@font-face{font-family:'Nunito';src:url('/assets/fonts/Nunito-latin.woff2') format('woff2');font-weight:200 1000;font-style:normal;font-display:swap}
@font-face{font-family:'Figtree';src:url('/assets/fonts/Figtree-latin.woff2') format('woff2');font-weight:300 900;font-style:normal;font-display:swap}
/* CVtoBrand design tokens (Soft) · generated by _bron/tokens.py: do not edit by hand */

:root {
  color-scheme: light;
  --bg-canvas: #FBFAF7;
  --bg-surface: #FFFFFF;
  --bg-sunken: #F5F2FC;
  --bg-brand-soft: #EEE8FF;
  --bg-mint: #DDF4E7;
  --bg-peach: #FFE5D6;
  --bg-sky: #DCEEFF;
  --bg-butter: #FFF1C2;
  --text-primary: #221E4A;
  --text-muted: #5A5670;
  --text-brand: #4B3FCF;
  --border-subtle: #ECE8F2;
  --border-control: #8C86A0;
  --brand-primary: #4B3FCF;
  --brand-primary-hover: #3F34B5;
  --brand-on-primary: #FFFFFF;
  --focus-ring: #4B3FCF;
  --status-success: #1B6B44;
  --status-success-bg: #DDF4E7;
  --status-warning: #8A5300;
  --status-warning-bg: #FFF1C2;
  --status-error: #C2283A;
  --status-error-bg: #FDE8EA;
  --status-on-error: #FFFFFF;
  --status-info: #2F5BB7;
  --status-info-bg: #DCEEFF;
  --clay-lilac: #C9BCFF;
  --clay-mint: #9EDDBA;
  --clay-peach: #FFB990;
  /* tenant slots (set per workspace at runtime; Northbound Talent shown as default demo) */
  --tenant-primary: #1F5E4B;
  --tenant-on-primary: #FFFFFF;
  --tenant-primary-text: #1F5E4B;
  --tenant-soft: #E4ECE9;
  --shadow-sm: 0 1px 2px rgba(34,30,74,.06);
  --shadow-md: 0 1px 2px rgba(34,30,74,.06), 0 10px 24px -12px rgba(34,30,74,.22);
  --shadow-lg: 0 2px 4px rgba(34,30,74,.06), 0 24px 48px -18px rgba(34,30,74,.35);
  --shadow-clay: inset 0 -4px 0 rgba(34,30,74,.07), inset 0 2px 0 rgba(255,255,255,.9), 0 16px 32px -14px rgba(34,30,74,.32);
  --shadow-focus: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--focus-ring);
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --duration-instant: 100ms;
  --duration-fast: 160ms;
  --duration-base: 240ms;
  --duration-slow: 360ms;
  --duration-brand: 1100ms;
  --duration-loading-loop: 1600ms;
  --ease-standard: cubic-bezier(.2,0,0,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in: cubic-bezier(.7,0,.84,0);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
  --font-display: 'Nunito', ui-rounded, system-ui, sans-serif;
  --font-ui: 'Figtree', system-ui, sans-serif;
  --text-display: 72px;
  --leading-display: 76px;
  --text-h1: 52px;
  --leading-h1: 58px;
  --text-h2: 38px;
  --leading-h2: 44px;
  --text-h3: 28px;
  --leading-h3: 34px;
  --text-h4: 22px;
  --leading-h4: 28px;
  --text-h5: 18px;
  --leading-h5: 24px;
  --text-body-lg: 19px;
  --leading-body-lg: 30px;
  --text-body: 16px;
  --leading-body: 25px;
  --text-ui: 14px;
  --leading-ui: 20px;
  --text-ui-strong: 14px;
  --leading-ui-strong: 20px;
  --text-small: 13px;
  --leading-small: 18px;
  --text-caption: 12px;
  --leading-caption: 16px;
}

@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    color-scheme: dark;
    --bg-canvas: #17152E;
    --bg-surface: #221F3D;
    --bg-sunken: #2A2650;
    --bg-brand-soft: #2E2858;
    --bg-mint: #1F3A33;
    --bg-peach: #3D2A26;
    --bg-sky: #1E3049;
    --bg-butter: #3A3220;
    --text-primary: #FBFAF7;
    --text-muted: #A9A4C4;
    --text-brand: #B5ABFF;
    --border-subtle: #342F57;
    --border-control: #7E78A3;
    --brand-primary: #B5ABFF;
    --brand-primary-hover: #C9C1FF;
    --brand-on-primary: #17152E;
    --focus-ring: #B5ABFF;
    --status-success: #7CE0AE;
    --status-success-bg: #1F3A33;
    --status-warning: #F5C26B;
    --status-warning-bg: #3A3220;
    --status-error: #FF8C98;
    --status-error-bg: #3D1E2A;
    --status-on-error: #17152E;
    --status-info: #9FCBF5;
    --status-info-bg: #1E3049;
    --clay-lilac: #C9BCFF;
    --clay-mint: #9EDDBA;
    --clay-peach: #FFB990;
  /* tenant slots (set per workspace at runtime; Northbound Talent shown as default demo) */
    --tenant-primary: #1F5E4B;
    --tenant-on-primary: #FFFFFF;
    --tenant-primary-text: #799E93;
    --tenant-soft: #212D40;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 1px 2px rgba(0,0,0,.4), 0 10px 24px -12px rgba(0,0,0,.6);
    --shadow-lg: 0 2px 4px rgba(0,0,0,.4), 0 24px 48px -18px rgba(0,0,0,.7);
  }
}

.dark {
  color-scheme: dark;
  --bg-canvas: #17152E;
  --bg-surface: #221F3D;
  --bg-sunken: #2A2650;
  --bg-brand-soft: #2E2858;
  --bg-mint: #1F3A33;
  --bg-peach: #3D2A26;
  --bg-sky: #1E3049;
  --bg-butter: #3A3220;
  --text-primary: #FBFAF7;
  --text-muted: #A9A4C4;
  --text-brand: #B5ABFF;
  --border-subtle: #342F57;
  --border-control: #7E78A3;
  --brand-primary: #B5ABFF;
  --brand-primary-hover: #C9C1FF;
  --brand-on-primary: #17152E;
  --focus-ring: #B5ABFF;
  --status-success: #7CE0AE;
  --status-success-bg: #1F3A33;
  --status-warning: #F5C26B;
  --status-warning-bg: #3A3220;
  --status-error: #FF8C98;
  --status-error-bg: #3D1E2A;
  --status-on-error: #17152E;
  --status-info: #9FCBF5;
  --status-info-bg: #1E3049;
  --clay-lilac: #C9BCFF;
  --clay-mint: #9EDDBA;
  --clay-peach: #FFB990;
  /* tenant slots (set per workspace at runtime; Northbound Talent shown as default demo) */
  --tenant-primary: #1F5E4B;
  --tenant-on-primary: #FFFFFF;
  --tenant-primary-text: #799E93;
  --tenant-soft: #212D40;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 1px 2px rgba(0,0,0,.4), 0 10px 24px -12px rgba(0,0,0,.6);
  --shadow-lg: 0 2px 4px rgba(0,0,0,.4), 0 24px 48px -18px rgba(0,0,0,.7);
}

@media (max-width: 640px) {
  :root { --text-display: 44px; --text-h1: 34px; --text-h2: 28px; --text-h3: 22px; --text-body-lg: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; --duration-brand: 200ms; }
}

/* ===== CVtoBrand marketing site (Soft) ===== */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{background:var(--bg-canvas);color:var(--text-primary);font:400 var(--text-body)/var(--leading-body) var(--font-ui);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
ul,ol{padding:0;list-style:none}
h1,h2,h3{font-family:var(--font-display);text-wrap:balance}
:focus-visible{outline:2.5px solid var(--focus-ring);outline-offset:3px;border-radius:6px}
.wrap{max-width:1248px;margin:0 auto;padding:0 20px}
@media (min-width:768px){.wrap{padding:0 32px}}
@media (min-width:1200px){.wrap{padding:0 48px}}
.narrow{max-width:860px}
.skip{position:absolute;left:-9999px;top:12px;z-index:200;background:var(--bg-surface);color:var(--text-primary);padding:10px 16px;border-radius:var(--radius-sm);font-weight:600;box-shadow:var(--shadow-md)}
.skip:focus{left:12px}

/* theme-dependent images */
.only-d{display:none}
.dark .only-l{display:none}.dark .only-d{display:block}
@media (prefers-color-scheme:dark){:root:not(.light) .only-l{display:none}:root:not(.light) .only-d{display:block}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--radius-pill);font:700 15px/1.2 var(--font-ui);padding:12px 20px;text-decoration:none;border:0;cursor:pointer;text-align:center;transition:transform var(--duration-fast) var(--ease-bounce),background-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard)}
.btn:active{transform:scale(.96) translateY(1px);transition-duration:var(--duration-instant)}
.btn-sm{font-size:14px;padding:9px 16px}
.btn-lg{font-size:16px;padding:16px 26px}
.btn-berry{background:var(--brand-primary);color:var(--brand-on-primary)}
.btn-berry:hover{background:var(--brand-primary-hover)}
.btn-ink{background:var(--text-primary);color:var(--bg-canvas);box-shadow:0 10px 24px -10px rgba(34,30,74,.55),inset 0 -3px 0 rgba(0,0,0,.18)}
.btn-ink:hover{box-shadow:0 14px 28px -10px rgba(34,30,74,.6),inset 0 -3px 0 rgba(0,0,0,.18)}
.btn-soft{background:var(--bg-brand-soft);color:var(--text-primary);box-shadow:inset 0 -3px 0 rgba(75,63,207,.12)}
.btn-soft:hover{background:var(--bg-sunken)}
.btn-ghost{background:transparent;color:var(--text-primary);box-shadow:inset 0 0 0 1.5px var(--border-control)}
.btn-ghost:hover{background:var(--bg-sunken)}
.btn-white{background:#fff;color:#221E4A;box-shadow:0 10px 24px -10px rgba(0,0,0,.4),inset 0 -3px 0 rgba(34,30,74,.08)}
.btn-outline-w{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.75)}
.btn-outline-w:hover{background:rgba(255,255,255,.22)}
.cta .btn:focus-visible{outline-color:#fff}

/* header */
.hdr{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg-canvas) 88%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:border-color var(--duration-base)}
.hdr.scrolled{border-bottom-color:var(--border-subtle)}
.hdr-in{display:flex;align-items:center;gap:12px;height:68px}
.logo{display:inline-flex;flex:none;text-decoration:none;border-radius:8px}
.logo img{height:24px;width:auto}
@media (min-width:480px){.logo img{height:28px}}
.nav-main{display:none}
.nav-main a{text-decoration:none;font:500 15px var(--font-ui);color:var(--text-muted);padding:6px 2px;border-radius:6px}
.nav-main a:hover{color:var(--text-primary)}
.hdr-r{display:flex;align-items:center;gap:8px;margin-left:auto}
.icon-btn,.pill-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;min-width:40px;border-radius:var(--radius-pill);background:var(--bg-surface);border:1px solid var(--border-subtle);color:var(--text-primary);cursor:pointer;box-shadow:var(--shadow-sm);font:700 13px var(--font-ui)}
.icon-btn:hover,.pill-btn:hover{border-color:var(--border-control)}
.pill-btn{padding:0 12px}
.i-sun{display:none}.dark .i-sun{display:block}.dark .i-moon{display:none}
.menu-toggle .i-close{display:none}.menu-toggle[aria-expanded="true"] .i-close{display:block}.menu-toggle[aria-expanded="true"] .i-open{display:none}
.demo-d,.langmenu{display:none}
.login{padding:8px 14px;white-space:nowrap}
.btn{white-space:normal}.btn-sm{white-space:nowrap}
.langmenu{position:relative}
.langmenu summary{list-style:none}
.langmenu summary::-webkit-details-marker{display:none}
.langmenu[open] summary svg:last-child{transform:rotate(180deg)}
.langlist{position:absolute;right:0;top:calc(100% + 8px);min-width:190px;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:6px;display:grid;gap:2px}
.langlist a{display:flex;gap:10px;align-items:baseline;padding:9px 12px;border-radius:var(--radius-sm);text-decoration:none;font:500 14px var(--font-ui);color:var(--text-muted)}
.langlist a b{font:800 13px var(--font-display);color:var(--text-primary);width:24px}
.langlist a:hover{background:var(--bg-sunken);color:var(--text-primary)}
.langlist a[aria-current]{background:var(--bg-brand-soft);color:var(--text-primary)}
.mnav{border-top:1px solid var(--border-subtle);background:var(--bg-canvas);padding:12px 0 24px;max-height:calc(100vh - 68px);overflow:auto}
.mnav nav{display:grid}
.mnav nav a{padding:14px 4px;font:800 20px var(--font-display);text-decoration:none;border-bottom:1px solid var(--border-subtle)}
.mnav .seg{margin:20px 0}
.mnav-cta{display:grid;gap:10px}
.mnav-cta .btn{padding:15px 20px;font-size:16px}
@media (min-width:1024px){
  .hdr-in{height:76px;gap:20px}
  .logo img{height:32px}
  .nav-main{display:flex;gap:28px;margin-left:auto}
  .hdr-r{margin-left:24px}
  .demo-d,.langmenu{display:inline-flex}
  .langmenu{display:block}
  .menu-toggle{display:none}
  .mnav{display:none!important}
}
@media (max-width:479px){.hdr-r>.theme-toggle{display:none}.login{font-size:13.5px;padding:8px 12px}}
.mnav-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 0}
.mnav-row .seg{margin:0}

/* segmented language control */
.seg{display:inline-flex;background:var(--bg-sunken);border-radius:12px;padding:4px;gap:2px}
.seg a{padding:7px 11px;border-radius:9px;font:700 12.5px var(--font-ui);color:var(--text-muted);text-decoration:none}
.seg a:hover{color:var(--text-primary)}
.seg a[aria-current]{background:var(--bg-surface);color:var(--text-primary);box-shadow:var(--shadow-sm)}

/* hero */
.hero{position:relative;overflow:hidden;padding:28px 0 0}
.blob{position:absolute;z-index:0;border-radius:46% 54% 58% 42%/48% 44% 56% 52%;pointer-events:none}
.b1{width:420px;height:400px;left:-240px;top:300px;background:var(--bg-brand-soft)}
.b2{width:380px;height:360px;right:-220px;top:80px;background:var(--bg-mint)}
.hero .copy{position:relative;z-index:2;text-align:center;max-width:920px;margin:0 auto}
.eb{display:inline-flex;align-items:center;gap:8px;font:600 12px/1.3 var(--font-ui);background:var(--bg-surface);border-radius:var(--radius-pill);padding:8px 14px;box-shadow:var(--shadow-md);max-width:100%}
.eb svg{flex:none}
.hero h1{font-weight:900;font-size:clamp(33px,9.4vw,86px);line-height:1.06;letter-spacing:-.03em;margin:18px 0 14px;position:relative;z-index:0}
.hl{position:relative;color:var(--text-brand);white-space:nowrap;z-index:0}
.hl::before{content:"";position:absolute;left:-.1em;right:-.1em;bottom:.04em;height:.42em;border-radius:.3em;background:var(--bg-peach);z-index:-1;transform:rotate(-1.5deg)}
.sub{font-size:var(--text-body-lg);line-height:1.6;color:var(--text-muted);max-width:640px;margin:0 auto}
.ctas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:24px}
.hero .ctas .btn{flex:1 1 150px;max-width:280px;padding:15px 14px}
@media (min-width:640px){.eb{font-size:13.5px;padding:8px 16px}.hero .ctas .btn{flex:0 0 auto;padding:16px 26px}}
@media (min-width:1024px){.hero{padding-top:44px}.b1{left:-120px;top:420px;width:460px;height:440px}.b2{right:-80px;top:40px;width:400px;height:380px}}

.scene{position:relative;z-index:1;max-width:1140px;margin:52px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-bottom:0}
.pan{position:relative;border-radius:24px 24px 0 0;overflow:hidden;aspect-ratio:170/235}
.p1{background:var(--bg-peach)}.p2{background:var(--bg-mint)}
.lab{position:absolute;left:12px;top:12px;z-index:3;font:700 11px/1 var(--font-ui);background:var(--bg-surface);color:var(--text-primary);border-radius:var(--radius-pill);padding:6px 10px;box-shadow:var(--shadow-sm);max-width:calc(100% - 24px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rawc{position:absolute;left:10%;top:20%;width:84%;transform:rotate(-5deg);border-radius:8px;overflow:hidden;box-shadow:0 18px 36px -16px rgba(34,30,74,.35)}
.raw{background:#fff;padding:1.2em 1.2em 1.6em;font:400 clamp(4.6px,1.25vw,10px)/1.45 'Liberation Serif','Times New Roman',Georgia,serif;color:#4A4A4A}
.raw p{margin-bottom:.7em}.raw p.t{text-align:center;font-size:1.3em}
.out{position:absolute;left:13%;top:19%;width:74%;transform:rotate(3deg);border-radius:10px;overflow:hidden;box-shadow:0 24px 48px -18px rgba(34,30,74,.45)}
.out img{width:100%;height:auto}
.mid{position:absolute;z-index:4;left:50%;top:44%;width:23%;max-width:110px;transform:translateX(-50%)}
.mid .pagi{width:100%;height:auto}
.chip{position:absolute;z-index:5;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font:700 12px/1 var(--font-ui);background:var(--bg-surface);color:var(--text-primary);border-radius:var(--radius-pill);padding:7px 12px 7px 8px;box-shadow:var(--shadow-md)}
.chip i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--bg-mint);color:var(--status-success)}
.c0{right:4%;top:-16px;transform:rotate(4deg)}
.c2{left:3%;bottom:6%;transform:rotate(-4deg)}
.c1,.c3{display:none}
.spk{position:absolute;z-index:2}
.s1{left:45%;top:-34px}.s2{display:none}
@media (min-width:768px){
  .scene{grid-template-columns:1fr 200px 1fr;gap:24px;margin-top:64px}
  .pan{border-radius:32px 32px 0 0;aspect-ratio:1/0.92}
  .lab{left:20px;top:18px;font-size:13px;padding:7px 12px}
  .mid{position:relative;left:auto;top:auto;transform:none;width:auto;max-width:none;align-self:center;display:flex;justify-content:center}
  .mid .pagi{width:190px}
  .chip{font-size:14px;padding:9px 15px 9px 10px}
  .c0{right:-2%;top:8%;transform:rotate(5deg)}
  .c1{display:inline-flex;right:-1%;top:34%;transform:rotate(-4deg)}
  .c2{left:-2%;bottom:16%}
  .c3{display:inline-flex;left:50%;bottom:6%;transform:translateX(-50%) rotate(3deg)}
  .s1{left:39%;top:2%}.s2{display:block;left:60%;top:56%}
  .raw{font-size:clamp(6px,.72vw,9.6px)}
}
@media (min-width:1280px){.c0{right:-5%}.c1{right:-4%}.c2{left:-4%}}

/* Pagi dip (plays once when scrolled into view) */
@media (prefers-reduced-motion:no-preference){
  .js .mid .pagi{transform-origin:50% 100%}
  .js .mid.in .pagi{animation:dip var(--duration-brand) var(--ease-in-out) 1 both}
}
@keyframes dip{0%{transform:translateY(0)}18%{transform:translateY(4px) scaleY(.94)}38%{transform:translateY(-18px) scaleY(1.03)}62%{transform:translateY(3px) scaleY(.97)}80%{transform:translateY(-3px)}100%{transform:translateY(0)}}

/* sections */
.sec{padding:72px 0}
@media (min-width:1024px){.sec{padding:96px 0}}
.sec-hd{text-align:center;max-width:860px;margin:0 auto 40px}
.k{font:700 12px/1.2 var(--font-ui);color:var(--text-brand);text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px}
.sec-hd h2{font-weight:900;font-size:var(--text-h1);line-height:1.08;letter-spacing:-.025em}
.sec-hd h2 span{color:var(--text-brand)}
@media (min-width:1024px){.k{font-size:14px}.sec-hd{margin-bottom:48px}}

/* steps */
.steps{display:grid;gap:20px}
.step{position:relative;border-radius:var(--radius-2xl);padding:28px 26px 0;display:flex;flex-direction:column;overflow:hidden}
.s-1{background:var(--bg-brand-soft)}.s-2{background:var(--bg-mint)}.s-3{background:var(--bg-peach)}
.n{width:44px;height:44px;border-radius:50%;background:var(--bg-surface);display:grid;place-items:center;font:900 20px var(--font-display);box-shadow:var(--shadow-sm)}
.step h3{font-weight:800;font-size:var(--text-h3);line-height:1.15;letter-spacing:-.015em;margin:18px 0 10px}
.step p{font-size:17px;line-height:1.55;color:var(--text-primary);opacity:.86}
.ill{margin-top:auto;padding-top:24px;display:flex;justify-content:center;align-items:flex-end;min-height:200px}
.ill .pagi{width:180px;height:auto;margin-bottom:-4px}
.mini{position:relative;width:min(300px,100%);background:var(--bg-surface);border-radius:22px 22px 0 0;padding:16px;height:180px;box-shadow:var(--shadow-md)}
.mseg{display:flex;background:var(--bg-sunken);border-radius:12px;padding:4px;gap:2px}
.mseg span{flex:1;text-align:center;padding:7px 0;font:700 12.5px var(--font-ui);border-radius:9px;color:var(--text-muted)}
.mseg span.on{background:var(--text-primary);color:var(--bg-canvas)}
.tg{display:flex;gap:10px;align-items:center;margin-top:16px;font:600 14px var(--font-ui)}
.sw{position:relative;width:42px;height:24px;border-radius:99px;background:var(--status-success)}
.sw::after{content:"";position:absolute;right:3px;top:3px;width:18px;height:18px;border-radius:50%;background:var(--bg-surface)}
.nt{position:absolute;right:-4px;bottom:-10px}
.nt .pagi{width:96px;height:auto}
@media (min-width:1024px){.steps{grid-template-columns:repeat(3,1fr);gap:24px}.step{min-height:450px;padding:30px 30px 0}}

/* bento */
.bento{display:grid;gap:16px}
.t{position:relative;border-radius:var(--radius-2xl);padding:26px;overflow:hidden}
.t h3{font-weight:800;font-size:24px;line-height:1.15;letter-spacing:-.015em}
.t p{font-size:16px;line-height:1.55;color:var(--text-primary);opacity:.86;margin-top:8px;max-width:440px}
.t p.note{font-size:13px;opacity:.7;margin-top:12px}
.ta{background:var(--bg-brand-soft);display:grid;gap:20px;align-items:center}
.tb{background:var(--bg-mint)}.tc{background:var(--bg-peach);min-height:400px}.td{background:var(--bg-sky)}.te{background:var(--bg-butter)}
.tf{background:var(--bg-surface);border:1px solid var(--border-subtle);display:flex;flex-direction:column}
.sw3{display:grid;gap:10px}
.tl{background:#fff;color:#16181D;border-radius:18px;padding:12px 14px;display:flex;justify-content:space-between;align-items:center;gap:10px;box-shadow:var(--shadow-sm);overflow:hidden}
.dots{display:flex;gap:5px;align-items:center;flex:none}
.dots i{width:16px;height:16px;border-radius:50%}
.dots em{font:600 11px var(--font-ui);font-style:normal;color:#5A5670;margin-left:6px}
.lg{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.lg li{background:var(--bg-surface);border-radius:12px;padding:7px 11px;display:flex;gap:6px;align-items:baseline}
.lg b{font:800 14px var(--font-display)}
.lg span{font:500 11.5px var(--font-ui);color:var(--text-muted)}
.ch{display:flex;justify-content:center;margin-top:20px}
.ch .pagi{width:220px;height:auto}
.ticks{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;margin-top:22px}
.ticks i{height:18px;border-radius:6px;background:var(--bg-surface)}
.ticks i.d{background:var(--text-primary)}
.roles{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.roles li{background:var(--bg-surface);border-radius:14px;padding:8px 12px;font:500 12.5px var(--font-ui);color:var(--text-muted)}
.roles b{display:block;font:800 15px var(--font-display);color:var(--text-primary)}
.files{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:28px;color:var(--text-primary)}
.files em{font:800 15px var(--font-display);font-style:normal;background:var(--bg-sunken);border-radius:14px;padding:14px 16px}
.files em.o{background:var(--text-primary);color:var(--bg-canvas)}
@media (min-width:768px){.bento{grid-template-columns:1fr 1fr;gap:20px}.ta,.tf{grid-column:span 2}.tc{grid-row:span 2}.ta{grid-template-columns:1fr 320px}}
@media (min-width:1100px){
  .bento{grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(250px,auto)}
  .t{padding:30px}.t h3{font-size:26px}
  .ta{grid-column:span 4;grid-template-columns:1fr 340px}
  .tb,.td,.te{grid-column:span 2}
  .tc{grid-column:span 2;grid-row:span 2;min-height:0}
  .tc .ch{position:absolute;left:0;right:0;bottom:16px}
  .tf{grid-column:span 4}.tf .files{margin-top:auto}
}

/* CTA */
.sec-cta{padding-top:24px}
.cta{position:relative;background:#4B3FCF;color:#fff;border-radius:28px;padding:44px 26px 0;overflow:hidden;display:grid;gap:12px}
.cta-tx{position:relative;z-index:2;max-width:640px}
.cta h2{font-weight:900;font-size:clamp(34px,5.2vw,60px);line-height:1.04;letter-spacing:-.03em}
.cta p{font-size:var(--text-body-lg);line-height:1.55;margin-top:16px;color:#fff;opacity:.92;max-width:520px}
.cta .ctas{justify-content:flex-start;margin-top:28px}
.cta p.cta-mail{font-size:15px;margin-top:18px;opacity:.92}
.cta-mail a{color:#fff;font-weight:700;text-underline-offset:3px}
.cta-ch{position:relative;z-index:2;display:flex;justify-content:center}
.cta-ch img{width:200px;height:auto}
.cta .c1{position:absolute;right:-140px;top:-80px;width:440px;height:440px;border-radius:50%;background:#5B4FE0}
.cta .c2{position:absolute;left:30%;bottom:-220px;width:300px;height:300px;border-radius:50%;background:#5548DA}
@media (min-width:1024px){.cta{border-radius:40px;padding:64px 72px;grid-template-columns:1fr 300px;align-items:center;min-height:420px}.cta-ch img{width:260px}.cta .c1{right:-80px;top:-60px;width:520px;height:520px}.cta .c2{left:auto;right:360px}}

/* footer */
.ftr{padding:56px 0 32px}
.ftr-grid{display:grid;gap:36px}
.ftr-brand p{color:var(--text-muted);font-size:15px;margin:14px 0 0;max-width:320px}
.ftr-brand .tagline{font:800 15px var(--font-display);color:var(--text-primary);margin:8px 0 18px}
.ftr h2{font:800 16px var(--font-display);margin-bottom:12px}
.ftr ul{display:grid;gap:9px}
.ftr ul a{color:var(--text-muted);font-size:15px;text-decoration:none}
.ftr ul a:hover{color:var(--text-primary);text-decoration:underline}
.ftr-bottom{margin-top:40px;padding-top:18px;border-top:1px solid var(--border-subtle);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
.credits{color:var(--text-muted);font-size:13.5px}
.made{white-space:nowrap}
@media (min-width:768px){.ftr-grid{grid-template-columns:1.6fr 1fr 1fr}}

/* scroll to top */

/* legal */
.legal{padding:40px 0 64px}
.draft{background:var(--status-warning-bg);color:var(--status-warning);border:1.5px dashed currentColor;border-radius:var(--radius-md);padding:12px 16px;font:500 14px/1.5 var(--font-ui);margin-bottom:28px}
.legal h1{font-weight:900;font-size:clamp(32px,5vw,52px);line-height:1.08;letter-spacing:-.025em}
.upd{color:var(--text-muted);font-size:14px;margin-top:10px}
.callout{margin:28px 0;background:var(--bg-brand-soft);border-left:6px solid var(--brand-primary);border-radius:var(--radius-lg);padding:22px 24px}
.callout h2{font:800 21px/1.25 var(--font-display);margin-bottom:8px}
.callout p{font-size:16.5px;line-height:1.65}
.toc{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:20px 24px;margin-bottom:12px}
.toc h2{font:800 17px var(--font-display);margin-bottom:10px}
.toc ol{display:grid;gap:6px}
.toc a{color:var(--text-brand);font-size:14.5px;text-decoration:none}
.toc a:hover{text-decoration:underline}
@media (min-width:768px){.toc ol{grid-template-columns:1fr 1fr;column-gap:24px}}
.doc section{padding-top:28px}
.doc h2{font:800 22px/1.25 var(--font-display);letter-spacing:-.01em;margin-bottom:10px}
.doc p,.doc li{font-size:16px;line-height:1.7;color:var(--text-primary)}
.doc p+p{margin-top:10px}
.doc ul{list-style:disc;padding-left:22px;display:grid;gap:8px;margin-top:6px}
.doc strong{font-weight:700}
.others{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}

/* 404 */
.nf{padding:64px 0;text-align:center}
.nf .pagi{width:180px;height:auto;margin:0 auto 20px}
.nf h1{font-weight:900;font-size:var(--text-h1)}
.nf p{color:var(--text-muted);margin-top:10px}
.nf-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:24px!important}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0s!important;transition-duration:0s!important}}
@media print{.hdr,.ftr,.totop,.toc{display:none}}

/* ===== legal: placeholders, sub-headings, tables (v0.4) ===== */
mark.tbc{background:var(--status-warning-bg);color:var(--text-primary);border:1px dashed var(--status-warning);border-radius:4px;padding:0 4px;font-weight:600;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.doc h3{font:800 17px/1.3 var(--font-display);margin:18px 0 4px}
.doc section > h3:first-of-type{margin-top:4px}
.doc .tbl{margin-top:14px;overflow-x:auto;border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--bg-surface)}
.doc table{border-collapse:collapse;width:100%;min-width:760px;font-size:14px;line-height:1.5}
.doc th,.doc td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--border-subtle)}
.doc th{font:700 13px/1.3 var(--font-ui);background:var(--bg-sunken);color:var(--text-primary)}
.doc tr:last-child td{border-bottom:0}
.doc .tbl + p{margin-top:14px}
@media (max-width:719px){
 .doc .tbl{overflow:visible;border:0;background:none}
 .doc table{min-width:0}
 .doc thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
 .doc tbody,.doc tr,.doc td{display:block}
 .doc tr{border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--bg-surface);padding:6px 0;margin-bottom:10px}
 .doc td{border:0;padding:6px 14px}
 .doc td::before{content:attr(data-label);display:block;font:700 12px/1.3 var(--font-ui);color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:2px}
}

/* ===== floating + banner buttons, cookie banner, settings dialog (v0.6, Soft) ===== */
/* Soft button family for the banner/dialog: Nunito, pill, pastel + berry anchor, clay shadow, lift on hover, press on active */
.sbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 20px;border-radius:var(--radius-pill);border:1.5px solid transparent;cursor:pointer;font:800 15px/1.15 var(--font-display);letter-spacing:.005em;text-align:center;text-decoration:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform var(--duration-fast) var(--ease-bounce),background-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard)}
.sbtn:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.sbtn:active{transform:translateY(1px) scale(.96);transition-duration:var(--duration-instant)}
.sbtn-berry{background:var(--brand-primary);color:var(--brand-on-primary);box-shadow:inset 0 -3px 0 rgba(23,21,46,.22),0 8px 18px -10px rgba(75,63,207,.75)}
.sbtn-berry:hover{background:var(--brand-primary-hover);transform:translateY(-1px);box-shadow:inset 0 -3px 0 rgba(23,21,46,.22),0 12px 22px -10px rgba(75,63,207,.8)}
.sbtn-soft{background:var(--bg-brand-soft);color:var(--text-brand);border-color:color-mix(in srgb,var(--brand-primary) 22%,transparent);box-shadow:inset 0 -3px 0 rgba(75,63,207,.12)}
.sbtn-soft:hover{background:color-mix(in srgb,var(--bg-brand-soft) 70%,var(--brand-primary) 30%);color:var(--text-primary);transform:translateY(-1px)}
.sbtn-berry:focus-visible{box-shadow:var(--shadow-focus)}
.dark .sbtn-berry{box-shadow:inset 0 -3px 0 rgba(23,21,46,.28),0 8px 18px -10px rgba(0,0,0,.8)}
@media (prefers-color-scheme:dark){:root:not(.light) .sbtn-berry{box-shadow:inset 0 -3px 0 rgba(23,21,46,.28),0 8px 18px -10px rgba(0,0,0,.8)}}

/* scroll-to-top: pastel clay bubble with berry arrow */
.totop{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));z-index:60;width:52px;height:52px;border-radius:var(--radius-pill);cursor:pointer;display:grid;place-items:center;background:var(--bg-brand-soft);color:var(--text-brand);border:1.5px solid color-mix(in srgb,var(--brand-primary) 26%,transparent);box-shadow:var(--shadow-clay);-webkit-tap-highlight-color:transparent;touch-action:manipulation;opacity:0;transform:translateY(12px) scale(.9);pointer-events:none;transition:opacity var(--duration-base) var(--ease-standard),transform var(--duration-base) var(--ease-bounce),background-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),bottom var(--duration-base) var(--ease-standard)}
.totop svg{width:22px;height:22px}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop.show:hover{background:var(--brand-primary);color:var(--brand-on-primary);border-color:transparent;transform:translateY(-2px)}
.totop.show:active{transform:scale(.94);transition-duration:var(--duration-instant)}
.totop:focus-visible{outline:none;box-shadow:var(--shadow-clay),var(--shadow-focus)}
.dark .totop{box-shadow:var(--shadow-lg)}
@media (prefers-color-scheme:dark){:root:not(.light) .totop{box-shadow:var(--shadow-lg)}}
@media (min-width:768px){.totop{right:max(24px,env(safe-area-inset-right));bottom:calc(24px + env(safe-area-inset-bottom))}}
/* lift above the cookie banner while it is open */
.cb-open .totop{bottom:calc(16px + env(safe-area-inset-bottom) + var(--cb-h,0px))}
@media (min-width:768px){.cb-open .totop{bottom:calc(24px + env(safe-area-inset-bottom) + var(--cb-h,0px))}}
/* keep the end of the page reachable while the banner is open */
.cb-open body{padding-bottom:var(--cb-h,0px)}

/* footer "Cookie settings" looks like the other footer links */
.linkbtn{-webkit-appearance:none;appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;font-size:15px;color:var(--text-muted);cursor:pointer;text-align:left;line-height:inherit;border-radius:4px}
.linkbtn:hover{color:var(--text-primary);text-decoration:underline}
.ftr ul a,.ftr ul .linkbtn{display:inline-block;padding:4px 0}

/* cookie banner */
.cb{position:fixed;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:calc(12px + env(safe-area-inset-bottom));z-index:70;max-width:980px;margin:0 auto;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px - env(safe-area-inset-bottom));overflow:auto;overscroll-behavior:contain;background:var(--bg-surface);color:var(--text-primary);border:1.5px solid color-mix(in srgb,var(--brand-primary) 18%,var(--border-subtle));border-radius:var(--radius-xl);box-shadow:var(--shadow-lg)}
.cb[hidden],.cs[hidden]{display:none!important}
.cb:focus{outline:none}.cb:focus-visible{outline:2.5px solid var(--focus-ring);outline-offset:3px}
.cb-in{display:grid;gap:14px;padding:18px 20px}
.cb h2{font:800 17px/1.3 var(--font-display);margin-bottom:4px;color:var(--text-primary)}
.cb p{font-size:14.5px;line-height:1.55;color:var(--text-muted)}
.cb p a{color:var(--text-brand);font-weight:700;text-underline-offset:2px}
.cb-act,.cs-act{display:flex;flex-wrap:wrap;gap:10px}
.cb-act .sbtn,.cs-act .sbtn{flex:1 1 auto}
@media (min-width:860px){.cb-in{grid-template-columns:1fr auto;align-items:center;gap:28px;padding:20px 24px}.cb-act{flex-wrap:nowrap}.cb-act .sbtn{flex:0 0 auto}}
@media (max-width:559px){.cb{left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom))}.cb-in{padding:16px}.cb-act{display:grid;grid-template-columns:1fr 1fr;gap:8px}.cb-act [data-cb="accept"]{grid-column:1 / -1;order:-1}.cb-act .sbtn{padding:10px 12px}}
/* short landscape phones: text left, buttons right, compact */
@media (max-height:520px) and (orientation:landscape){
 .cb{bottom:calc(8px + env(safe-area-inset-bottom))}
 .cb-in{grid-template-columns:1fr minmax(230px,auto);align-items:center;gap:14px;padding:10px 14px}
 .cb h2{font-size:15px;margin-bottom:2px}
 .cb p{font-size:13px;line-height:1.4}
 .cb-act{display:grid;grid-template-columns:1fr 1fr;gap:6px}
 .cb-act [data-cb="accept"]{grid-column:1 / -1;order:-1}
 .cb-act .sbtn{min-height:42px;padding:8px 12px;font-size:14px}
 .cs-dlg{padding:16px 18px}
}

/* settings dialog */
.cs{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
.cs-back{position:absolute;inset:0;background:rgba(23,21,46,.45);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.cs-dlg{position:relative;width:100%;max-width:520px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px - env(safe-area-inset-bottom));overflow:auto;overscroll-behavior:contain;background:var(--bg-surface);color:var(--text-primary);border:1.5px solid color-mix(in srgb,var(--brand-primary) 18%,var(--border-subtle));border-radius:var(--radius-2xl);box-shadow:var(--shadow-lg);padding:22px 22px 20px}
.cs-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.cs-hd h2{font:800 20px/1.25 var(--font-display)}
.cs-hd .icon-btn{width:44px;height:44px}
#cs-d{font-size:14.5px;line-height:1.55;color:var(--text-muted);margin-bottom:14px}
.cs-opt{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid var(--border-subtle)}
.cs-opt h3{font:800 16px/1.3 var(--font-display)}
.cs-opt p{font-size:14px;line-height:1.5;color:var(--text-muted);margin-top:2px}
.cs-on{flex:0 0 auto;font:800 12.5px/1 var(--font-display);color:var(--status-success);background:var(--bg-mint);border-radius:var(--radius-pill);padding:6px 11px;white-space:nowrap}
.cs-act{border-top:1px solid var(--border-subtle);padding-top:16px;margin-top:2px}
/* switch: real checkbox inside a 44px label hit area */
.swl{flex:0 0 auto;display:inline-grid;place-items:center;min-width:56px;min-height:44px;margin:-6px -6px 0 0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sw{-webkit-appearance:none;appearance:none;margin:0;width:48px;height:28px;border-radius:999px;background:var(--border-control);position:relative;cursor:pointer;transition:background-color var(--duration-fast) var(--ease-standard)}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(23,21,46,.3);transition:transform var(--duration-fast) var(--ease-bounce)}
.sw:checked{background:var(--brand-primary)}
.sw:checked::after{transform:translateX(20px)}
.dark .sw:checked::after{background:var(--brand-on-primary)}
@media (prefers-color-scheme:dark){:root:not(.light) .sw:checked::after{background:var(--brand-on-primary)}}
.sw:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.cs-open,.cs-open body{overflow:hidden}
@media print{.cb,.cs,.totop{display:none!important}}