/* ===== The Mentor Economy =====
   Full-bleed documentary banner. Both people and the recording setup stay in
   frame; the gradient sits only behind the white copy. */
.mentorband{position:relative;margin:0;isolation:isolate}
.mentorband img{width:100%;display:block;aspect-ratio:21/9;object-fit:cover;object-position:50% 30%}
.mentorband:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,13,28,.9) 0%,rgba(7,13,28,.72) 34%,rgba(7,13,28,.12) 62%,transparent 78%);z-index:1}
.mentorband-copy{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:14px;padding:0 7vw;max-width:760px;color:#fff}
.mentorband-copy h2{font-size:clamp(26px,3.3vw,44px);line-height:1.1}
.mentorband-copy p{font-size:15px;line-height:1.6;color:var(--muted-onDark);max-width:400px}
.mentorband-copy .text-link{margin-top:4px}
@media(max-width:860px){
  .mentorband img{aspect-ratio:4/3.4;object-position:62% 30%}
  .mentorband:after{background:linear-gradient(0deg,rgba(7,13,28,.94) 0%,rgba(7,13,28,.7) 46%,rgba(7,13,28,.1) 78%,transparent)}
  .mentorband-copy{justify-content:flex-end;padding:0 6vw 30px;max-width:none}
  .mentorband-copy p{max-width:none}
}

/* ===== Experience behind the model =====
   A documentary photograph carries the claim; four chips open one sentence each.
   No name, no headshot, nobody in the group identified. */
.evidence{display:grid;grid-template-columns:1fr;gap:0}
/* The heading sits on the photograph rather than beside it, so the field
   picture and the claim it supports read as one unit. */
.ev-band{position:relative;margin:0;isolation:isolate}
.ev-band img{width:100%;display:block;aspect-ratio:21/9;object-fit:cover;object-position:50% 34%}
.ev-band:after{content:'';position:absolute;inset:0;background:linear-gradient(78deg,rgba(7,13,28,.92) 0%,rgba(7,13,28,.78) 34%,rgba(7,13,28,.18) 62%,rgba(7,13,28,.05) 100%)}
.ev-band-copy{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:10px;padding:0 7vw;max-width:760px}
.ev-band-copy h2{color:#fff;font-size:clamp(28px,3.4vw,44px);line-height:1.08;margin:0}
.ev-band-copy h2 em{color:var(--marigold)}
.ev-cap{display:flex;align-items:center;gap:8px;margin:2px 0 0;font:500 12.5px var(--font-body);color:var(--muted-onDark)}
.ev-cap:before{content:'';width:22px;height:2px;border-radius:2px;background:var(--marigold);flex-shrink:0}
.ev-body{padding:40px 7vw 66px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.ev-lede{font-size:16.5px;line-height:1.65;color:var(--ink-soft);max-width:680px}
.ev-chips{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:820px;margin-top:10px;align-items:start}
.ev-chip{display:flex;flex-direction:column;text-align:left;background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px 17px;transition:border-color .16s,box-shadow .16s,transform .16s}
.ev-chip:hover,.ev-chip:focus-visible{border-color:var(--marigold-deep);box-shadow:var(--shadow-lift);transform:translateY(-2px)}
.ev-chip-top{display:flex;align-items:center;gap:10px;width:100%}
.ev-chip-top .ico{color:var(--marigold-deep);flex-shrink:0}
.ev-chip b{flex:1;font:700 14px var(--font-body);color:var(--ink)}
.ev-chev{color:var(--ink-faint);transition:transform .18s,color .18s}
.ev-chip[aria-expanded="true"] .ev-chev{transform:rotate(90deg);color:var(--marigold-deep)}
.ev-chip-say{display:block;max-height:0;overflow:hidden;opacity:0;font-size:12.5px;line-height:1.55;color:var(--ink-soft);transition:max-height .22s ease,opacity .22s ease,margin .22s ease}
.ev-chip[aria-expanded="true"] .ev-chip-say,.ev-chip:hover .ev-chip-say{max-height:120px;opacity:1;margin-top:8px}
.fd-link{align-self:flex-start;margin-top:18px;font:700 14px var(--font-body);color:var(--ink);border-bottom:1.5px solid var(--marigold-deep);padding-bottom:2px}
.fd-link:hover{color:var(--marigold-deep)}
@media(max-width:860px){
  .ev-band img{aspect-ratio:4/3}
  .ev-band-copy{padding:0 6vw;max-width:none}
  .ev-band:after{background:linear-gradient(0deg,rgba(7,13,28,.94) 8%,rgba(7,13,28,.72) 46%,rgba(7,13,28,.2) 100%)}
  .ev-band-copy{justify-content:flex-end;padding-bottom:26px}
  .ev-chips{grid-template-columns:1fr}
  .ev-body{padding:40px 6vw 64px}
}
@media(prefers-reduced-motion:reduce){.ev-chip:hover{transform:none}.ev-chip-say{transition:none}}

/* ===== Tokens ===== */
:root{
  --ink:#101a30; --ink-2:#1b2947; --ink-deep:#070d1c;
  --marigold:#f5a623; --marigold-deep:#c97a1a; --marigold-pale:#fde8bf;
  --paper:#f8f4ea; --paper-2:#f0e9d8; --line:#e3ddc8;
  --ink-soft:#5c6478; --ink-faint:#8a90a1;
  --cream:#f3f1ea; --muted-onDark:#aab2c8; --line-onDark:#334066;
  --mint:#cfeee1; --mint-deep:#1f8a68;
  --radius-lg:28px; --radius-md:16px; --radius-sm:10px;
  --font-display:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;
  --font-body:'DM Sans',Arial,Helvetica,sans-serif;
  /* One family across the interface: the small label role keeps its own token so
     spacing stays tunable, but it resolves to the same face as body copy. */
  --font-mono:'DM Sans',Arial,Helvetica,sans-serif;
  --font-bangla:'Noto Sans Bengali','Hind Siliguri',sans-serif;
  --shadow-soft:0 24px 60px -24px rgba(7,13,28,.28);
  --shadow-lift:0 14px 34px -16px rgba(7,13,28,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:86px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 var(--font-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;text-wrap:balance;letter-spacing:-.01em}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;color:inherit;background:none;border:0}
ul{margin:0;padding:0;list-style:none}
img{display:block;max-width:100%}
.section-pad{padding:74px 7vw}
.kicker{font:600 11px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--marigold-deep)}
.kicker.light{color:var(--marigold)}
em{font-style:italic;color:var(--marigold-deep)}
.light em{color:var(--marigold)}
.skip-link{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;border-radius:0 0 10px 0;z-index:200}
.skip-link:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--marigold-deep);outline-offset:3px;border-radius:4px}

/* ===== Supplied Lucide sprite =====
   The geometry is the Lucide file, untouched; only size and colour are set here. */
.ico-sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{display:inline-block;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.15em}

/* ===== Tactile primary buttons =====
   A 3px darker bottom edge that compresses on press. */
.tactile{box-shadow:0 3px 0 var(--marigold-deep);transition:transform .16s,box-shadow .16s,background .16s}
.tactile:active{transform:translateY(2px);box-shadow:0 1px 0 var(--marigold-deep)}
.nav-cta.tactile{box-shadow:0 3px 0 #000;}
.nav-cta.tactile:active{transform:translateY(2px);box-shadow:0 1px 0 #000}
@media(prefers-reduced-motion:reduce){.tactile:active{transform:none}}

/* ===== Cube mark ===== */
.cube-mark{width:30px;height:30px;display:grid;place-items:center}
.cube-mark i{width:100%;height:100%;border:2.5px solid var(--marigold);border-radius:8px;position:relative;display:block;transform:rotate(6deg)}
.cube-mark i:before{content:'';position:absolute;inset:5px;border:2px solid currentColor;border-radius:4px;color:var(--ink)}
.cube-mark.large{width:64px;height:64px}
.cube-mark.large i{border-width:4px;border-radius:16px}
.cube-mark.large i:before{inset:10px;border-width:3px}

/* ===== Nav ===== */
.nav{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 5vw;background:rgba(248,244,234,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transition:box-shadow .25s}
.nav.scrolled{box-shadow:0 8px 24px -18px rgba(7,13,28,.4)}
.brand{display:flex;align-items:center;gap:10px;font:800 20px var(--font-display);letter-spacing:-.02em}
.nav-links{display:flex;align-items:center;gap:30px;font:600 14px var(--font-body)}
.nav-links a{position:relative;padding:6px 0;color:var(--ink-soft)}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--ink)}
.nav-links a.active:after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--marigold-deep);border-radius:2px}
.nav-right{display:flex;align-items:center;gap:12px}
.lang-switch{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border-radius:999px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line);font:700 12px var(--font-body);color:var(--ink);transition:background .18s,box-shadow .18s}
.lang-btn:hover{background:#fff;box-shadow:inset 0 0 0 1px var(--marigold-deep)}
.lang-btn .globe{color:var(--marigold-deep);font-size:13px;line-height:1}
.lang-btn .lang-caret{color:var(--ink-faint);transform:rotate(90deg);transition:transform .18s}
.lang-switch.open .lang-btn .lang-caret{transform:rotate(-90deg)}
.lang-switch.open .lang-btn{background:#fff;box-shadow:inset 0 0 0 1px var(--marigold-deep)}
.lang-menu{position:absolute;top:calc(100% + 10px);right:0;width:232px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:7px;box-shadow:var(--shadow-soft);z-index:120}
.lang-menu button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:9px 11px;border-radius:9px;transition:background .15s}
.lang-menu button:hover{background:var(--paper-2)}
.lang-menu button span{font:700 14px var(--font-body);color:var(--ink)}
.lang-menu button small{font-size:11px;color:var(--ink-faint);flex:1}
.lang-menu button em{font-style:normal;font:600 9px var(--font-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--marigold-deep);background:var(--marigold-pale);padding:3px 6px;border-radius:5px;flex-shrink:0}
.lang-menu button.selected{background:var(--marigold-pale)}
.lang-menu button.selected small{color:var(--marigold-deep)}
.lang-menu button.flash{background:var(--marigold-pale)}
.lang-note{font-size:10.5px;line-height:1.45;color:var(--ink-faint);padding:9px 11px 5px;margin:4px 0 0;border-top:1px solid var(--line)}
.nav-cta{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;padding:11px 18px;border-radius:999px;font:700 13px var(--font-body);white-space:nowrap}
.nav-cta:hover{background:var(--ink-2)}
.nav-links a.nav-cta{padding:11px 18px;color:#fff}
.nav-links a.nav-cta:after{display:none}
.nav-links a.nav-try{color:var(--ink);font-weight:700}
.nav-links a.nav-try:hover{color:var(--marigold-deep)}
/* the demo frame flashes once when a Try a mission link sends you to it */
@media(prefers-reduced-motion:no-preference){.phone.spotlight{animation:demoSpot .9s ease-out}}
@keyframes demoSpot{0%{box-shadow:var(--shadow-soft),0 0 0 0 rgba(245,166,35,.85)}100%{box-shadow:var(--shadow-soft),0 0 0 22px rgba(245,166,35,0)}}
.nav-toggle{display:none;flex-direction:column;gap:5px;width:34px;height:34px;align-items:center;justify-content:center}
.nav-toggle span{width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s,opacity .25s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ===== Chapter rail (desktop wayfinding) ===== */
.chapter-rail{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:90;display:flex;flex-direction:column;align-items:center;gap:0}
.rail-dot{position:relative;width:22px;height:22px;display:grid;place-items:center}
.rail-dot:before{content:'';width:7px;height:7px;border-radius:50%;background:var(--line);border:2px solid transparent;transition:background .2s,transform .2s}
.rail-dot.active:before{background:var(--marigold-deep);transform:scale(1.35)}
.rail-dot span{position:absolute;right:28px;top:50%;transform:translateY(-50%) translateX(6px);background:var(--ink);color:#fff;font:600 11px var(--font-body);padding:6px 10px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s}
.rail-dot:hover span,.rail-dot:focus-visible span{opacity:1;transform:translateY(-50%) translateX(0)}
.rail-line{width:1px;height:20px;background:var(--line)}

/* ===== Buttons ===== */
.button{display:inline-flex;align-items:center;gap:10px;padding:15px 22px;border-radius:999px;font:700 14px var(--font-body)}
.button.primary{background:var(--marigold);color:var(--ink-deep)}
.button.primary:hover{background:var(--marigold-deep);color:#fff}
.button.ghost{border:1.5px solid var(--line-onDark);color:#fff}
.button.ghost:hover{border-color:var(--marigold);color:var(--marigold)}
.text-link{display:inline-flex;align-items:center;gap:6px;font:700 14px var(--font-body);color:var(--ink);border-bottom:1.5px solid var(--marigold-deep);padding-bottom:2px}
.text-link.light{color:#fff;border-bottom-color:var(--marigold)}
.text-link.light:hover{color:var(--marigold)}

/* ===== Hero ===== */
.hero{position:relative;display:grid;grid-template-columns:55fr 45fr;gap:56px;align-items:center;padding-top:56px;padding-bottom:44px;overflow:hidden}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:700 12px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:#fff;background:linear-gradient(120deg,var(--ink),var(--ink-2));padding:9px 18px 9px 12px;border-radius:999px;box-shadow:var(--shadow-lift)}
.eyebrow b{color:var(--marigold);font-weight:700}
.eyebrow .cube-mark.small{width:18px;height:18px;flex-shrink:0}
.eyebrow .cube-mark.small i{border-width:2px;border-radius:5px}
.eyebrow .cube-mark.small i:before{inset:3px;border-width:1.5px}
.lang-pill{display:flex;align-items:center;gap:8px;font:600 13px var(--font-body);color:var(--ink-soft);margin-top:14px}
.lang-pill span{font-size:15px}
.cubi-hello{position:relative;z-index:1;display:flex;align-items:center;gap:12px;margin-bottom:18px}
.cubi-fly{display:block;flex-shrink:0}
.cubi-hello .cubi{width:62px;height:62px}
.cubi-speech{position:relative;background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 18px;font:700 14px var(--font-body);color:var(--ink);box-shadow:var(--shadow-lift)}
.cubi-speech b{color:var(--marigold-deep)}
.cubi-speech:before{content:'';position:absolute;left:-6px;top:50%;transform:translateY(-50%);width:12px;height:12px;background:#fff;border-left:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0 0 0 3px;transform:translateY(-50%) rotate(45deg)}
@media(prefers-reduced-motion:no-preference){
  .wave-arm{transform-origin:115px 78px;animation:waveHi 2s ease-in-out 3}
  /* Cubi launches from behind the photo (z-index 1 under the frame's 2), arcs
     across on two axes so the path curves, lands on the eyebrow and waves. */
  .cubi-hello .cubi-fly{animation:cubiFlyX 1.15s cubic-bezier(.34,.1,.3,1) .25s both}
  .cubi-hello .cubi-fly .cubi{animation:cubiFlyY 1.15s cubic-bezier(.4,0,.35,1) .25s both}
  .cubi-hello .cubi-fly .wave-arm{animation:waveHi 1.9s ease-in-out 1.35s 2}
  .cubi-speech{animation:cubiSay .42s cubic-bezier(.16,1,.3,1) 1.3s both}
  .float-card{animation:fcIn .55s cubic-bezier(.16,1,.3,1) both}
  .fc-one{animation-delay:.75s}
  .fc-two{animation-delay:.95s}
  .fc-three{animation-delay:1.15s}
  .fc-one .fc-ico{animation:fcBob 3.8s ease-in-out 2s infinite}
  .fc-two .fc-ico{animation:fcBob 4.4s ease-in-out 2.6s infinite}
  .fc-three .fc-ico{animation:fcBob 4.1s ease-in-out 3.1s infinite}
}
@keyframes cubiFlyX{from{transform:translateX(min(52vw,760px))}to{transform:translateX(0)}}
@keyframes cubiFlyY{0%{transform:translateY(118px) scale(.42) rotate(-16deg)}
  58%{transform:translateY(-30px) scale(.9) rotate(8deg)}
  80%{transform:translateY(7px) scale(1.06) rotate(-2deg)}
  100%{transform:translateY(0) scale(1) rotate(0)}}
@keyframes cubiLand{from{opacity:0;transform:translateY(-14px) scale(.8)}to{opacity:1;transform:none}}
@keyframes cubiSay{from{opacity:0;transform:translateX(-8px) scale(.9)}to{opacity:1;transform:none}}
@keyframes fcIn{from{opacity:0;transform:translateY(10px) scale(.92)}to{opacity:1;transform:none}}
@keyframes fcBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes waveHi{0%,55%,100%{transform:rotate(0deg)}10%{transform:rotate(-24deg)}20%{transform:rotate(-4deg)}30%{transform:rotate(-24deg)}40%{transform:rotate(-4deg)}}
.hero h1{font-size:clamp(38px,4.6vw,65px);line-height:1.02;margin:22px 0 22px}
.hero-head{display:flex;flex-direction:column}
.hero-head.reverse{flex-direction:column-reverse}
.rotator{display:block;min-height:1.02em}
.rotator:after{content:'';display:inline-block;width:.055em;height:.74em;margin-left:.05em;background:currentColor;vertical-align:-.04em;border-radius:1px}
@media(prefers-reduced-motion:no-preference){.rotator:after{animation:caretBlink 1.05s steps(1) infinite}.rotator.typing:after{animation:none}}
@keyframes caretBlink{0%,48%{opacity:1}49%,100%{opacity:0}}
.hero .lede{font-size:19px;line-height:1.6;color:var(--ink-soft);max-width:520px}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:30px}
.trust-row{display:flex;gap:30px;margin-top:48px;flex-wrap:wrap}
.trust-row div{border-left:2px solid var(--marigold);padding-left:12px;display:flex;flex-direction:column;gap:3px}
.trust-row strong{font:800 17px var(--font-display)}
.trust-row span{font-size:11px;color:var(--ink-faint)}
.hero-photo{position:relative}
.hero-photo .frame{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-soft);aspect-ratio:4/4.6;position:relative}
.hero-photo .frame img{width:100%;height:100%;object-fit:cover;object-position:60% 30%}
.hero-photo .float-card{position:absolute;background:#fff;border-radius:14px;padding:13px 16px;box-shadow:var(--shadow-lift);display:flex;flex-direction:column;gap:2px}
.hero-photo .fc-one{left:-26px;top:14%}
.hero-photo .fc-two{right:-22px;bottom:12%}
@media(prefers-reduced-motion:no-preference){
  .hero-photo .fc-one{animation:floatY 4.5s ease-in-out infinite}
  .hero-photo .fc-two{animation:floatY 4.5s ease-in-out infinite -2.3s}
}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.float-card b{font:800 16px var(--font-body)}
.float-card span{font-size:11px;color:var(--ink-faint)}

/* ===== Hero photograph =====
   A 55/45 split: the promise on the left, one real retailer conversation on the
   right in an editorial frame with a thin navy and marigold edge. */
.hero-shot{margin:0;position:relative;z-index:2}
.hero-shot-frame{position:relative;border-radius:var(--radius-lg);padding:7px;background:linear-gradient(145deg,var(--marigold) 0%,var(--ink) 58%);box-shadow:var(--shadow-soft)}
.hero-shot-frame img{width:100%;display:block;aspect-ratio:4/3.1;object-fit:cover;object-position:52% 34%;border-radius:calc(var(--radius-lg) - 6px)}
/* Gamified readouts lifted off the photo: the same chips the demo awards. */
.float-card{position:absolute;display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:13px;padding:9px 13px 9px 10px;box-shadow:var(--shadow-lift);white-space:nowrap}
.float-card .fc-ico{width:27px;height:27px;border-radius:8px;display:grid;place-items:center;background:var(--marigold-pale);color:var(--marigold-deep);flex-shrink:0}
.float-card .fc-ico.green{background:var(--mint);color:var(--mint-deep)}
.float-card .fc-t{display:flex;flex-direction:column;line-height:1.15}
.float-card b{font:800 14.5px var(--font-body);color:var(--ink);font-variant-numeric:tabular-nums}
.float-card small{font-size:10.5px;color:var(--ink-faint)}
.fc-one{left:-18px;top:9%}
.fc-two{right:-14px;bottom:15%}
.fc-three{left:-24px;bottom:15%}

/* ===== Compact role switcher =====
   Navigation, not marketing: one slim bar of three segmented pills. The long
   three-way pitch lives once, in the closing section. */
.rolebar-wrap{padding:0 7vw 20px}
.rolebar{display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:999px;padding:10px 12px 10px 24px;box-shadow:var(--shadow-lift)}
.rolebar-lab{font:700 13px var(--font-body);color:var(--ink);white-space:nowrap}
.rolebar-pills{display:flex;gap:6px;flex:1;flex-wrap:wrap}
.rolepill{display:inline-flex;align-items:center;gap:9px;flex:1;justify-content:center;background:var(--paper-2);border-radius:999px;padding:12px 18px;font:700 13.5px var(--font-body);color:var(--ink-soft);white-space:nowrap;transition:transform .15s,background .15s,color .15s,box-shadow .15s}
.rolepill .ico{color:var(--marigold-deep);transition:color .15s}
.rolepill:hover,.rolepill:focus-visible{transform:translateY(-3px);background:var(--marigold-pale);color:var(--ink);box-shadow:0 6px 16px -10px rgba(7,13,28,.45)}
.rolepill:active{transform:translateY(-1px)}
@media(prefers-reduced-motion:reduce){.rolepill:hover,.rolepill:active{transform:none}}

/* ===== Proof ribbon ===== */
.ribbon-sec{padding:0 7vw}
.proof-ribbon{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden}
.proof-ribbon > div{display:flex;align-items:center;gap:11px;background:var(--paper);padding:16px 20px;color:var(--marigold-deep)}
.proof-ribbon span{display:flex;flex-direction:column;gap:1px;font-size:12.5px;color:var(--ink-soft);line-height:1.4}
.proof-ribbon b{font:800 15px var(--font-body);color:var(--ink);letter-spacing:-.01em}

@media(max-width:980px){
  .hero{grid-template-columns:1fr;gap:30px;padding-bottom:36px}
  .hero-shot{order:-1}
  .hero-shot-frame img{aspect-ratio:16/10}
  /* Stacked, there is no photo to the right to launch from, so Cubi just arrives. */
  .cubi-hello .cubi-fly{animation:cubiLand .5s cubic-bezier(.16,1,.3,1) .2s both}
  .cubi-hello .cubi-fly .cubi{animation:none}
  .cubi-hello .cubi{width:54px;height:54px}
  .cubi-speech{font-size:13px;padding:8px 15px}
  .fc-three{display:none}
  .fc-one{left:-10px;top:9%}
  .fc-two{right:-8px;bottom:11%}
  .proof-ribbon{grid-template-columns:1fr}
  .rolebar{border-radius:var(--radius-md);padding:16px 16px;align-items:stretch;flex-direction:column;gap:12px}
  .rolebar-pills{flex-direction:column}
  .rolepill{justify-content:flex-start}
}

/* ===== gentle entrance (never hides content, safe if JS/observer never fires) ===== */
.reveal{opacity:1;transform:none}
@media(prefers-reduced-motion:no-preference){
  .reveal{transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .46s ease}
  .reveal:not(.in){transform:translateY(10px)}
  /* The opacity half only arms once JS is running, so a page without it, or
     with a dead observer, still renders everything at full strength. */
  html.has-reveal .reveal:not(.in){transform:translateY(18px);opacity:0}
}

/* ===== Value strip ===== */
.value-strip{display:flex;gap:1px;background:var(--line);margin:0 7vw 56px;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-lift);position:relative;z-index:2}
@media(max-width:980px){.value-strip{flex-direction:column;margin:0 6vw 40px}}
.value-col{flex:1;background:#fff;padding:22px 28px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;transition:background .2s}
.value-col:hover{background:var(--paper-2)}
.value-tag{font:700 11px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--marigold-deep);background:var(--marigold-pale);padding:6px 12px;border-radius:999px;white-space:nowrap;flex-shrink:0}
.value-col p{font-size:15px;color:var(--ink);line-height:1.5;flex:1}
.value-col strong{font-family:var(--font-display);font-weight:800}
.value-arrow{font-style:normal;color:var(--marigold-deep);font-size:18px;transition:transform .2s;flex-shrink:0}
.value-col:hover .value-arrow{transform:translateX(4px)}

/* ===== Problem / sequence ===== */
.problem{background:var(--ink-deep);color:#fff}
.split-heading{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:end;margin-top:16px}
.split-heading h2{font-size:clamp(38px,4.6vw,60px);line-height:1.02}
.split-heading p{color:var(--muted-onDark);font-size:16px;line-height:1.65;max-width:440px}
.problem > .text-link{margin-top:40px}
.sequence{display:flex;align-items:stretch;gap:32px;margin-top:52px;border-top:1px solid var(--line-onDark)}
.sequence article{flex:1;padding:22px 0 0;display:flex;flex-direction:column;gap:10px}
.sequence span{font:700 12px var(--font-mono);color:var(--marigold)}
.seq-icon{width:40px;height:40px;display:block}
.sequence h3{font-size:19px}
.sequence p{font-size:13px;line-height:1.55;color:var(--muted-onDark)}

/* Cubi face icons: blinking is driven per-face from JS so no two faces blink in
   step. The CSS only describes the two eyelid states; FACE-ANIMATION-SPEC.md sets
   the durations, and app.js writes them as inline transitions. */
.eye{transform-box:fill-box;transform-origin:center bottom}
.cubi.tilt{animation:headTilt .5s cubic-bezier(.34,1.3,.64,1)}
@keyframes headTilt{0%{transform:rotate(0)}45%{transform:rotate(-3deg)}100%{transform:rotate(0)}}
@media(prefers-reduced-motion:reduce){.cubi.tilt{animation:none}}
.eye-closed{opacity:0}
.eye-open{opacity:1}
.blink .eye{transform:scaleY(.08)}
.blink .eye-closed{opacity:1}
.blink .eye-open{opacity:0}
@media(prefers-reduced-motion:reduce){
  .blink .eye{transform:none}
  .blink .eye-closed{opacity:0}
  .blink .eye-open{opacity:1}
}

/* ===== Loop timeline ===== */
.loop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:52px;border-top:1px solid var(--line);position:relative}
.loop-grid:before{content:'';position:absolute;top:-1px;left:0;height:2px;width:0;background:var(--marigold-deep)}
.loop-grid.in:before{width:100%;transition:width 1.3s cubic-bezier(.16,1,.3,1) .1s}
.loop-grid article{padding:26px 20px 0 0;display:flex;flex-direction:column;gap:10px;border-right:1px solid var(--line)}
.loop-grid article:last-child{border-right:0}
.loop-grid span{font:700 12px var(--font-mono);color:var(--marigold-deep)}
.loop-icon{width:36px;height:36px;display:block}
@media(prefers-reduced-motion:no-preference){
  .loop-grid.in article:nth-child(1) .loop-icon{animation:popIn .5s .15s cubic-bezier(.34,1.56,.64,1) both}
  .loop-grid.in article:nth-child(2) .loop-icon{animation:popIn .5s .45s cubic-bezier(.34,1.56,.64,1) both}
  .loop-grid.in article:nth-child(3) .loop-icon{animation:popIn .5s .75s cubic-bezier(.34,1.56,.64,1) both}
  .loop-grid.in article:nth-child(4) .loop-icon{animation:popIn .5s 1.05s cubic-bezier(.34,1.56,.64,1) both}
}
.loop-grid h3{font-size:19px}
.loop-grid p{font-size:13px;line-height:1.55;color:var(--ink-soft)}

/* ===== How practice becomes proof =====
   Three product fragments on a progress track. Clicking one drives the single
   evidence panel underneath; there are no arrows anywhere in here. */
.proofjourney .pj-track{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:44px;padding-top:26px}
.pj-rail{position:absolute;top:8px;left:5%;right:5%;height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.pj-rail i{display:block;height:100%;width:25%;background:var(--marigold-deep);border-radius:3px;transition:transform .26s cubic-bezier(.22,1,.36,1)}
.pj-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:20px;transition:transform .2s,border-color .2s,box-shadow .2s}
.pj-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.pj-card.selected{border-color:var(--marigold-deep);box-shadow:var(--shadow-lift)}
.pj-top{display:flex;align-items:center;justify-content:space-between;width:100%}
.pj-ico{width:40px;height:40px;border-radius:12px;background:var(--paper-2);color:var(--ink-soft);display:grid;place-items:center;transition:background .2s,color .2s}
.pj-card.selected .pj-ico{background:var(--marigold);color:var(--ink-deep)}
.pj-n{font:700 11px var(--font-mono);color:var(--ink-faint);letter-spacing:.08em}
.pj-card b{font:700 17px var(--font-display);letter-spacing:-.01em;margin-top:8px}
.pj-card small{font-size:12px;color:var(--ink-soft);line-height:1.5}
.pj-frag{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.pj-wave{display:flex;align-items:center;gap:3px;height:22px}
.pj-wave i{display:block;width:3px;border-radius:2px;background:var(--marigold-deep);opacity:.55;height:7px}
.pj-card.selected .pj-wave i{opacity:1}
.pj-wave i:nth-child(2n){height:15px}
.pj-wave i:nth-child(3n){height:21px}
.pj-wave i:nth-child(5n){height:11px}
.pj-score{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.pj-score em{font-style:normal;font:600 10.5px var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint)}
.pj-score u{text-decoration:none;font:800 21px var(--font-display);color:var(--ink);font-variant-numeric:tabular-nums}
.pj-score.up u{color:var(--mint-deep)}
.pj-quote{display:flex;gap:7px;font-size:11.5px;line-height:1.5;color:var(--ink-soft)}
.pj-quote .ico{color:var(--marigold-deep);margin-top:2px}
.pj-chip{display:inline-flex;align-items:center;gap:6px;font:700 10.5px var(--font-body);background:var(--paper-2);color:var(--ink-soft);padding:6px 10px;border-radius:999px;line-height:1.3}
.pj-chip.green{background:var(--mint);color:var(--mint-deep)}

.pj-panel{position:relative;margin-top:18px;background:linear-gradient(140deg,var(--ink-2) 0%,var(--ink) 52%);color:#fff;border-radius:var(--radius-lg);padding:30px 32px;min-height:150px;outline:none;overflow:hidden}
.pj-panel:before{content:'';position:absolute;right:-90px;top:-110px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(245,166,35,.16),transparent 66%);pointer-events:none}
.pj-panel:focus-visible{box-shadow:0 0 0 3px var(--marigold)}
.pj-inner{position:relative;display:grid;grid-template-columns:1.1fr .92fr;gap:34px;align-items:center}
.pj-say{display:flex;flex-direction:column;gap:12px}
.pj-stage{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;font:700 10px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--marigold);background:rgba(245,166,35,.14);padding:6px 11px;border-radius:999px}
.pj-say h3{font:700 clamp(21px,2.3vw,28px)/1.15 var(--font-display);letter-spacing:-.015em}
.pj-say p{font-size:13.8px;line-height:1.65;color:var(--muted-onDark);max-width:460px}
/* The panel shows the product state each step produces, drawn in the same
   surface language as the phone demo rather than as an abstract meter. */
.pj-ui{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 20px 44px rgba(3,8,20,.34)}
.pj-ui-top{display:flex;align-items:center;gap:8px;padding:10px 15px;background:var(--paper-2);border-bottom:1px solid var(--line);font:700 9.5px var(--font-mono);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint)}
.pj-ui-top .dot{width:7px;height:7px;border-radius:50%;background:var(--marigold-deep);flex-shrink:0}
.pj-ui-body{padding:14px 15px 15px;display:flex;flex-direction:column;gap:11px}
.pj-msg{display:flex;gap:10px;align-items:flex-start}
.pj-av{width:34px;height:34px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--paper-2)}
.pj-av-cubi{display:grid;place-items:center;background:var(--marigold-pale);overflow:hidden}
.pj-av-cubi svg{width:26px;height:26px}
.pj-bub{flex:1;background:var(--paper-2);border-radius:4px 14px 14px 14px;padding:9px 13px 10px;font:500 12.5px/1.5 var(--font-body);color:var(--ink)}
.pj-who{display:block;font:700 9.5px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:4px}
.pj-rec{display:flex;align-items:center;gap:9px;background:var(--ink);border-radius:12px;padding:10px 13px}
.pj-recdot{width:8px;height:8px;border-radius:50%;background:#ef6c4d;flex-shrink:0}
.pj-wave2{display:flex;align-items:center;gap:2px;height:20px;flex-shrink:0}
.pj-wave2 i{display:block;width:2.5px;border-radius:2px;background:var(--marigold);height:6px}
.pj-wave2 i:nth-child(2n){height:13px}
.pj-wave2 i:nth-child(3n){height:19px}
.pj-wave2 i:nth-child(5n){height:9px}
.pj-rect{flex:1;font:600 11.5px var(--font-body);color:var(--muted-onDark)}
.pj-rectime{font:700 11.5px var(--font-mono);color:#fff;font-variant-numeric:tabular-nums}
.pj-chiprow{display:flex;flex-wrap:wrap;gap:6px}
.pj-mchip{display:inline-flex;align-items:center;gap:5px;background:var(--paper-2);color:var(--ink-soft);font:700 11px var(--font-body);padding:6px 10px;border-radius:999px}
.pj-mchip .ico{color:var(--ink-faint)}
.pj-delta{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--mint);border-radius:12px;padding:11px 14px}
.pj-dl{font:600 11.5px/1.35 var(--font-body);color:var(--mint-deep)}
.pj-dv{display:inline-flex;align-items:center;gap:6px;flex-shrink:0}
.pj-dv em{font-style:normal;font:600 14px var(--font-body);color:var(--mint-deep);opacity:.55;text-decoration:line-through;font-variant-numeric:tabular-nums}
.pj-dv .ico{color:var(--mint-deep);opacity:.6}
.pj-dv b{font:800 20px var(--font-display);color:var(--mint-deep);font-variant-numeric:tabular-nums}
.pj-skill{display:flex;flex-direction:column;gap:6px}
.pj-sk-t{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.pj-sk-t b{font:700 12.5px var(--font-body);color:var(--ink)}
.pj-sk-t u{text-decoration:none;font:800 15px var(--font-body);color:var(--ink);font-variant-numeric:tabular-nums}
.pj-sk-bar{display:block;height:6px;background:var(--line);border-radius:6px;overflow:hidden}
.pj-sk-bar i{display:block;height:100%;width:0;background:var(--marigold-deep);border-radius:6px;transition:width .55s cubic-bezier(.22,1,.36,1)}
.pj-sk-bar i.good{background:var(--mint-deep)}
.pj-sk-tier{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;font:700 10px var(--font-body);color:var(--ink-faint)}
.pj-sk-tier.good{color:var(--mint-deep)}
.pj-tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:2px}
.pj-tier{text-align:center;font:700 9px var(--font-body);letter-spacing:.01em;color:var(--ink-faint);background:var(--paper-2);padding:7px 3px;border-radius:7px;line-height:1.25}
.pj-tier.on{background:var(--mint);color:var(--mint-deep)}
.pj-tier.now{background:var(--mint-deep);color:#fff}
.pj-note{display:flex;gap:7px;align-items:flex-start;margin:4px 0 0;font-size:11.5px;line-height:1.5;color:var(--ink-faint)}
.pj-note .ico{color:var(--marigold);flex-shrink:0;margin-top:1px}
.pj-job{display:flex;align-items:center;gap:12px;background:var(--paper-2);border-radius:13px;padding:14px 15px}
.pj-job .pj-jico{width:40px;height:40px;border-radius:12px;background:var(--marigold);color:var(--ink-deep);display:grid;place-items:center;flex-shrink:0}
.pj-job .pj-jt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.pj-job .pj-jt b{font:700 14.5px var(--font-body);color:var(--ink)}
.pj-job .pj-jt small{font-size:11.5px;color:var(--ink-faint);display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.pj-job .pj-jm{font:800 18px var(--font-display);color:var(--mint-deep);font-variant-numeric:tabular-nums;flex-shrink:0}
.pj-jfine{font-size:10.8px;line-height:1.5;color:var(--ink-faint);margin:0;display:flex;gap:6px;align-items:flex-start}
.pj-jfine .ico{flex-shrink:0;margin-top:1px}
/* the four steps arrive left to right, once, when the section comes into view */
@media(prefers-reduced-motion:no-preference){
  .pj-panel .pj-inner{animation:pjIn .24s ease-out}
  .proofjourney .pj-track.in .pj-card{animation:pjIn .28s ease-out both}
  .proofjourney .pj-track.in .pj-card:nth-child(3){animation-delay:.1s}
  .proofjourney .pj-track.in .pj-card:nth-child(4){animation-delay:.2s}
  .proofjourney .pj-track.in .pj-card:nth-child(5){animation-delay:.3s}
}
@keyframes pjIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@media(max-width:1100px){.proofjourney .pj-track{grid-template-columns:1fr 1fr}.pj-rail{display:none}}
@media(max-width:980px){
  .proofjourney .pj-track{grid-template-columns:1fr;padding-top:0}
  .pj-rail{display:none}
  .pj-inner{grid-template-columns:1fr;gap:20px}
}

/* ===== AI section ===== */
.ai{display:grid;grid-template-columns:1fr 1.15fr;gap:52px;align-items:center;background:var(--paper-2)}
.ai-photo{margin:0 0 24px;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-lift);cursor:zoom-in}
.ai-photo img{width:100%;display:block;aspect-ratio:16/10;object-fit:cover;transition:transform .5s ease}
.ai-photo:hover img{transform:scale(1.04)}
.ai-copy h2{font-size:clamp(30px,3.3vw,44px);line-height:1.06;margin-top:12px}
.ai-copy p{margin-top:16px;color:var(--ink-soft);max-width:420px;line-height:1.65}
.ai-copy blockquote{margin:26px 0 0;padding-left:18px;border-left:3px solid var(--marigold-deep);font:600 italic 17px/1.5 var(--font-body);color:var(--ink)}
.ai-stack{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:start}
.ai-stack article{background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:16px 14px 14px 18px;display:flex;align-items:center;gap:8px;min-height:0;transition:box-shadow .2s,transform .2s}
.ai-stack article:hover{box-shadow:var(--shadow-lift);transform:translateY(-3px)}
.ai-card-top{flex:1;min-width:0}
.ai-stack h3{font-size:15.5px;margin-bottom:5px}
.ai-stack p{font-size:12.8px;line-height:1.52;color:var(--ink-soft)}
.ai-stack .cubi{width:58px;height:58px;flex-shrink:0;align-self:flex-end;margin:0 0 -4px}

/* ===== Gallery / lightbox ===== */
.people{background:var(--paper)}
.people .section-kicker-row{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap}
.people h2{font-size:clamp(30px,3.4vw,44px);margin-top:12px;max-width:560px}
.people-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-top:40px}
.people-grid figure{margin:0;display:flex;flex-direction:column;gap:12px}
.people-grid .img-wrap{position:relative;border-radius:var(--radius-md);overflow:hidden;cursor:zoom-in;background:var(--ink);aspect-ratio:1/1.05}
.people-grid img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.people-grid .img-wrap:hover img{transform:scale(1.06)}
.people-grid figcaption{display:flex;flex-direction:column;gap:2px}
.people-grid figcaption b{font-size:14px}
.people-grid figcaption span{font-size:12px;color:var(--ink-faint)}

/* ===== More screens from Cubicly =====
   Interface previews drawn in code, using the same tokens as the phone demo so
   the previews and the working product cannot drift apart. */
.scr-tabs{display:inline-flex;gap:4px;background:var(--paper-2);border-radius:999px;padding:4px;margin-top:40px}
.scr-tab{padding:9px 20px;border-radius:999px;font:700 13px var(--font-body);color:var(--ink-soft);transition:background .16s,color .16s}
.scr-tab:hover{color:var(--ink)}
.scr-tab.selected{background:var(--ink);color:#fff}
/* the active tab pairs one real photograph with that audience's own screens */
.scr-stage{display:grid;grid-template-columns:38fr 62fr;gap:20px;margin-top:22px;align-items:stretch}
.scr-photo{position:relative;margin:0;border-radius:20px;overflow:hidden;background:var(--ink);min-height:420px;display:flex}
.scr-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scr-photo:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,13,28,.92) 0%,rgba(7,13,28,.42) 46%,rgba(7,13,28,.06) 78%)}
.scr-photo figcaption{position:relative;z-index:2;align-self:flex-end;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:24px;color:#fff}
.scr-photo .scr-aud{font:700 10px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--marigold)}
.scr-photo b{font:700 20px/1.24 var(--font-display);letter-spacing:-.01em}
.scr-photo p{font-size:13px;line-height:1.55;color:var(--muted-onDark);margin:0}
.scr-photo .scr-do{display:inline-flex;align-items:center;gap:7px;margin-top:4px;background:var(--marigold);color:var(--ink-deep);font:700 13px var(--font-body);padding:11px 16px;border-radius:11px;box-shadow:0 3px 0 var(--marigold-deep);transition:transform .15s,box-shadow .15s}
.scr-photo .scr-do:active{transform:translateY(2px);box-shadow:0 1px 0 var(--marigold-deep)}
.scr-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.scr-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;min-width:0}
.scr-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;text-align:left;transition:transform .16s,box-shadow .16s,border-color .16s}
.scr-card:hover,.scr-card:focus-visible{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--marigold-deep)}
.scr-thumb{display:block;position:relative;overflow:hidden;background:#fbfaf7;height:240px}
.scr-thumb:after{content:'';position:absolute;left:0;right:0;bottom:0;height:44px;background:linear-gradient(0deg,#fbfaf7,rgba(251,250,247,0));pointer-events:none}
.scr-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px;border-top:1px solid var(--line);margin-top:auto}
.scr-meta b{font-size:13px}
.scr-open{display:inline-flex;align-items:center;gap:5px;font:700 11px var(--font-body);color:var(--marigold-deep)}
.scr-note{font-size:12px;color:var(--ink-faint);margin-top:14px}
.scr-dots{display:none;gap:7px;justify-content:center}
.scr-dots button{width:8px;height:8px;border-radius:50%;background:var(--line);transition:background .16s,transform .16s}
.scr-dots button.on{background:var(--marigold-deep);transform:scale(1.25)}
.scr-render{display:block;width:340px;transform-origin:top left;background:#fbfaf7;border-radius:0}
/* phone chrome: a status strip so a preview reads as a screen, not a page */
.scr-render .u-status{display:flex;align-items:center;justify-content:space-between;gap:10px;height:26px;padding:0 14px;background:var(--ink);color:#fff}
.scr-render .u-time{font:700 10px var(--font-mono);letter-spacing:.02em}
.scr-render .u-pill{width:44px;height:7px;border-radius:99px;background:rgba(255,255,255,.22)}
.scr-render .u-sys{display:flex;align-items:flex-end;gap:2px;height:10px}
.scr-render .u-sys i{display:block;width:2.5px;border-radius:1px;background:rgba(255,255,255,.75)}
.scr-render .u-sys i:nth-child(1){height:4px}
.scr-render .u-sys i:nth-child(2){height:7px}
.scr-render .u-sys i:nth-child(3){height:10px}
.scr-render .u-sys u{display:block;width:16px;height:8px;border-radius:2px;border:1.2px solid rgba(255,255,255,.7);margin-left:4px;position:relative}
.scr-render .u-sys u:after{content:'';position:absolute;inset:1.4px;width:9px;border-radius:1px;background:var(--marigold)}
.scr-render .u-greet{display:flex;align-items:center;gap:11px}
.scr-render .u-greet > span{min-width:0}
.scr-render .u-greet .u-face{width:38px;height:38px}
.scr-render .u-with{display:flex;align-items:center;gap:8px;background:var(--paper-2);border-radius:999px;padding:5px 12px 5px 5px;align-self:flex-start;font-size:10px;color:var(--ink-faint)}
.scr-render .u-with b{color:var(--ink)}
.scr-render .u-face.sm{width:24px;height:24px}
.scr-render .u-face.seal{width:34px;height:34px;border-radius:11px}
.scr-render .u-face.u-anon{display:grid;place-items:center;font:800 13px var(--font-body);color:var(--ink-soft)}
.scr-render .u-pass .ico{color:var(--marigold);margin-left:auto;flex-shrink:0}
.scr-render.big{transform:none;width:340px;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-lift)}

/* --- the shared interface vocabulary used inside every preview --- */
.scr-render .u-head{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--ink);color:#fff;padding:11px 14px;font:700 10.5px var(--font-mono);letter-spacing:.02em}
.scr-render .u-brand{display:inline-flex;align-items:center;gap:6px;color:var(--marigold)}
.scr-render .u-head .ico{vertical-align:-.2em}
.scr-render .u-body{padding:14px;display:flex;flex-direction:column;gap:9px}
.scr-render .u-body.u-center{align-items:center}
.scr-render h4{font:700 16px var(--font-body);letter-spacing:-.01em;margin:0;color:var(--ink)}
.scr-render h4.u-big{font-size:26px;color:var(--marigold-deep)}
.scr-render .u-hello{font:700 9px var(--font-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--marigold-deep);margin:0}
.scr-render .u-cap{font:600 9.5px var(--font-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint);margin:0}
.scr-render .u-fine{display:flex;align-items:flex-start;gap:6px;font-size:9.5px;line-height:1.45;color:var(--ink-faint);margin:2px 0 0}
.scr-render .u-line{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:11px;color:var(--ink-soft);font-weight:600}
.scr-render .u-line b{font:700 11.5px var(--font-mono);color:var(--ink);font-variant-numeric:tabular-nums}
.scr-render .u-bar{display:block;height:6px;background:#ece5d6;border-radius:6px;overflow:hidden}
.scr-render .u-bar i{display:block;height:100%;background:var(--marigold-deep);border-radius:6px}
.scr-render .u-bar.good i{background:var(--mint-deep)}
.scr-render .u-chips{display:flex;flex-wrap:wrap;gap:5px}
.scr-render .u-chip{display:inline-flex;align-items:center;gap:4px;background:#eef1f7;color:var(--ink-soft);font:700 9.5px var(--font-body);padding:5px 8px;border-radius:999px;line-height:1.2}
.scr-render .u-chip.good{background:#e7f6ef;color:var(--mint-deep)}
.scr-render .u-chip.on{background:var(--marigold);color:var(--ink-deep)}
.scr-render .u-row{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid #ece5d6;border-radius:12px;padding:9px 11px}
.scr-render .u-row.good{border-color:#a9dcc6;background:#f4fbf8}
.scr-render .u-hold{width:26px;height:26px;border-radius:8px;background:#eef1f7;color:var(--ink);display:grid;place-items:center;flex-shrink:0}
.scr-render .u-hold.amber{background:#fde8bf;color:var(--marigold-deep)}
.scr-render .u-hold.navy{background:#eef1f7;color:var(--ink)}
.scr-render .u-rt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.scr-render .u-rt b{font-size:11.5px;color:var(--ink)}
.scr-render .u-rt small{font-size:9.5px;color:var(--ink-faint);line-height:1.35}
.scr-render .u-rv{font:700 11px var(--font-mono);color:var(--marigold-deep);flex-shrink:0;font-variant-numeric:tabular-nums}
.scr-render .u-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:#eef1f7;color:var(--ink);font:700 11px var(--font-body);padding:9px 13px;border-radius:10px}
.scr-render .u-btn.dark{background:var(--ink);color:#fff}
.scr-render .u-btn.gold{background:var(--marigold);color:var(--ink-deep)}
.scr-render .u-btn.wide{width:100%}
.scr-render .u-two{display:flex;gap:7px;width:100%}
.scr-render .u-two .u-btn{flex:1}
.scr-render .u-pair{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.scr-render .u-stat{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #ece5d6;border-radius:12px;padding:9px 10px}
.scr-render .u-stat b{display:block;font:700 13px var(--font-body);color:var(--ink)}
.scr-render .u-stat small{font-size:9px;color:var(--ink-faint)}
.scr-render .u-mission{background:#fef5e4;border:1px solid #f0c775;border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:7px}
.scr-render .u-mission b{font:700 14px var(--font-body);color:var(--ink)}
.scr-render .u-band{display:block}
.scr-render .u-who{display:flex;align-items:center;gap:9px}
.scr-render .u-face{width:32px;height:32px;border-radius:50%;background:#eef1f7;color:var(--ink);display:grid;place-items:center;flex-shrink:0;object-fit:cover}
.scr-render .u-who b{display:block;font-size:12px;color:var(--ink)}
.scr-render .u-who small{font-size:9.5px;color:var(--ink-faint)}
.scr-render .u-bub{background:#f0e9d8;color:var(--ink);border-radius:13px;border-bottom-left-radius:4px;padding:10px 12px;font-size:11.5px;line-height:1.5;margin:0}
.scr-render .u-obj{font-size:10px;color:var(--ink-faint);margin:0}
.scr-render .u-obj b{color:var(--ink)}
.scr-render .u-voice{display:flex;flex-direction:column;align-items:center;gap:8px;background:#fff;border:1px dashed #ece5d6;border-radius:13px;padding:12px}
.scr-render .u-voice small{font-size:9.5px;color:var(--ink-faint)}
.scr-render .u-wave{display:flex;align-items:center;gap:3px;height:18px}
.scr-render .u-wave i{display:block;width:3px;border-radius:2px;background:var(--marigold-deep);height:6px}
.scr-render .u-wave i:nth-child(2n){height:14px}
.scr-render .u-wave i:nth-child(3n){height:18px}
.scr-render .u-wave i:nth-child(5n){height:9px}
.scr-render .u-ring{position:relative;width:78px;height:78px;display:block;margin-top:4px}
.scr-render .u-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.scr-render .u-ring circle{fill:none;stroke-width:6;stroke-linecap:round}
.scr-render .u-ring .t{stroke:#ece5d6}
.scr-render .u-ring .b{stroke:var(--marigold-deep)}
.scr-render .u-ring em{position:absolute;inset:0;display:grid;place-items:center;font:800 22px var(--font-display);font-style:normal;color:var(--ink);font-variant-numeric:tabular-nums}
.scr-render .u-skills{display:flex;flex-direction:column;gap:6px;width:100%;margin-top:4px}
.scr-render .u-skill{display:grid;grid-template-columns:60px 1fr 26px;align-items:center;gap:7px}
.scr-render .u-skill em{font-style:normal;font-size:9.5px;color:var(--ink-soft);font-weight:600}
.scr-render .u-skill u{text-decoration:none;font:700 10px var(--font-mono);color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.scr-render .u-good{display:flex;gap:8px;background:#e7f6ef;border-radius:12px;padding:10px 11px;width:100%}
.scr-render .u-good .ico{color:var(--mint-deep);flex-shrink:0;margin-top:1px}
.scr-render .u-good b{display:block;font-size:10px;color:var(--mint-deep);text-transform:uppercase;letter-spacing:.05em;font-family:var(--font-mono);margin-bottom:2px}
.scr-render .u-good span{font-size:11px;line-height:1.45;color:var(--ink)}
.scr-render .u-pass{display:flex;align-items:center;gap:10px;background:var(--ink);color:#fff;border-radius:14px;padding:11px 13px}
.scr-render .u-pass b{display:block;font:700 13px var(--font-body)}
.scr-render .u-pass small{font-size:9.5px;color:var(--muted-onDark)}
.scr-render .u-seal{width:32px;height:32px;border-radius:10px;background:rgba(245,166,35,.18);color:var(--marigold);display:grid;place-items:center;flex-shrink:0}
.scr-render .u-ev{display:flex;flex-direction:column;gap:5px;background:#fff;border:1px solid #ece5d6;border-radius:12px;padding:10px 11px}
.scr-render .u-tiers{display:flex;gap:3px}
.scr-render .u-tiers em{flex:1;font-style:normal;text-align:center;font:700 7.5px var(--font-body);letter-spacing:.02em;color:var(--ink-faint);background:#f4f1ea;padding:4px 2px;border-radius:5px;line-height:1.2}
.scr-render .u-tiers em.on{background:#e7f6ef;color:var(--mint-deep)}
.scr-render .u-meta{display:flex;align-items:center;justify-content:space-between;gap:8px}
.scr-render .u-meta em{font-style:normal;font-size:9px;color:var(--ink-faint);font-family:var(--font-mono)}
.scr-render .u-week{display:flex;gap:5px}
.scr-render .u-week em{flex:1;font-style:normal;text-align:center;font:700 10px var(--font-mono);color:var(--ink-faint);background:#fff;border:1px solid #ece5d6;border-radius:8px;padding:8px 0}
.scr-render .u-week em.done{background:#e7f6ef;border-color:#a9dcc6;color:var(--mint-deep)}
.scr-render .u-week em.now{background:var(--marigold);border-color:var(--marigold-deep);color:var(--ink-deep)}
.scr-render .u-payline{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#fff;border:1px solid #ece5d6;border-radius:12px;padding:10px 12px;font:600 10.5px var(--font-body);color:var(--ink-soft)}
.scr-render .u-payline b{font:700 12px var(--font-body);color:var(--marigold-deep)}
.scr-render .u-cols{display:flex;align-items:flex-end;gap:7px;height:56px;padding:0 2px}
.scr-render .u-cols em{flex:1;display:block;background:#ece5d6;border-radius:5px 5px 0 0}
.scr-render .u-cols em.now{background:var(--marigold-deep)}
.scr-render .u-weeks{display:flex;gap:7px;padding:0 2px}
.scr-render .u-weeks em{flex:1;text-align:center;font-style:normal;font:600 8.5px var(--font-mono);color:var(--ink-faint)}
.scr-render .u-search{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #ece5d6;border-radius:11px;padding:10px 12px;font-size:11.5px;color:var(--ink)}
.scr-render .u-search .ico{color:var(--ink-faint)}
.scr-render .u-cand{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid #ece5d6;border-radius:12px;padding:10px 11px;position:relative}
.scr-render .u-cand .u-ring{width:38px;height:38px;margin:0;order:3;flex-shrink:0}
.scr-render .u-cand .u-ring circle{stroke-width:5}
.scr-render .u-cand .u-ring em{font-size:11px}
.scr-render .u-id{position:absolute;top:-1px;left:11px;font:700 8px var(--font-mono);color:var(--ink-faint);letter-spacing:.04em}
.scr-render .u-ct{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;padding-top:7px}
.scr-render .u-ct b{font-size:11.5px;color:var(--ink)}
.scr-render .u-ct small{font-size:9.5px;color:var(--ink-faint)}
.scr-render .u-ct .u-chip{align-self:flex-start}
.scr-render .u-packs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.scr-render .u-pack{display:flex;flex-direction:column;gap:2px;background:#fff;border:1px solid #ece5d6;border-radius:11px;padding:9px 8px;text-align:center}
.scr-render .u-pack.on{border-color:var(--marigold-deep);border-width:2px;padding:8px 7px;background:#fef5e4}
.scr-render .u-pack b{font-size:10px;color:var(--ink)}
.scr-render .u-pack small{font-size:9px;color:var(--ink-soft)}
.scr-render .u-pack em{font-style:normal;font-size:8px;color:var(--ink-faint);font-family:var(--font-mono)}
.scr-render .u-tray{display:flex;align-items:center;gap:9px;background:var(--ink);color:#fff;border-radius:12px;padding:10px 11px}
.scr-render .u-tray .ico{color:var(--marigold);flex-shrink:0}
.scr-render .u-tray > span:not(.u-chip){flex:1;min-width:0}
.scr-render .u-tray b{display:block;font-size:11.5px}
.scr-render .u-tray small{font-size:9px;color:var(--muted-onDark)}
.scr-render .u-consent{display:flex;gap:7px;background:#eef1f7;border-radius:11px;padding:9px 11px;font-size:9.5px;line-height:1.45;color:var(--ink-soft)}
.scr-render .u-consent .ico{color:var(--ink);flex-shrink:0;margin-top:1px}
.scr-render .u-pipe{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.scr-render .u-stage{display:flex;flex-direction:column;gap:3px;background:#fff;border:1px solid #ece5d6;border-radius:11px;padding:9px 8px}
.scr-render .u-stage em{font-style:normal;font:800 17px var(--font-display);color:var(--ink);line-height:1}
.scr-render .u-stage small{font-size:8.5px;color:var(--ink-faint);line-height:1.2}
.scr-render .u-path{display:flex;align-items:center;gap:5px;flex-wrap:wrap;background:#eef1f7;border-radius:10px;padding:9px 11px}
.scr-render .u-path em{font-style:normal;font:700 10.5px var(--font-body);color:var(--ink)}
.scr-render .u-path .ico{color:var(--ink-faint)}
.scr-render .u-row.u-dim{opacity:.62}

/* --- enlarged preview --- */
.scr-modal{position:fixed;inset:0;background:rgba(5,9,20,.78);z-index:300;display:flex;align-items:center;justify-content:center;padding:4vh 5vw}
.scr-modal[hidden]{display:none}
.scr-dialog{position:relative;background:var(--paper);border-radius:var(--radius-lg);padding:30px 30px 22px;max-width:760px;width:100%;max-height:92vh;overflow:auto;box-shadow:var(--shadow-soft);display:grid;grid-template-columns:340px 1fr;grid-template-areas:"body head" "body foot";gap:22px 28px;align-content:start}
.scr-dialog-head{grid-area:head;display:flex;flex-direction:column;gap:9px;padding-right:40px}
.scr-dialog-aud{font:700 10px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--marigold-deep)}
.scr-dialog-head h3{font-size:23px;line-height:1.2}
.scr-dialog-head p{font-size:13.5px;line-height:1.6;color:var(--ink-soft);margin:0}
.scr-dialog-cta{align-self:flex-start;margin-top:4px;font:700 13px var(--font-body);color:var(--ink);border-bottom:1.5px solid var(--marigold-deep);padding-bottom:2px;cursor:pointer}
.scr-dialog-cta:hover{color:var(--marigold-deep)}
.scr-dialog-body{grid-area:body}
.scr-dialog-foot{grid-area:foot;display:flex;align-items:center;gap:12px;align-self:end;font:600 11.5px var(--font-mono);color:var(--ink-faint)}
.scr-nav{font:700 12px var(--font-body);color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 14px;transition:border-color .16s,background .16s}
.scr-nav:hover{border-color:var(--marigold-deep);background:var(--marigold-pale)}

@media(max-width:1100px){.scr-stage{grid-template-columns:1fr}.scr-photo{min-height:300px}}
@media(max-width:860px){
  .scr-dialog{grid-template-columns:1fr;grid-template-areas:"head" "body" "foot";justify-items:center;padding:26px 22px 20px}
  .scr-dialog-head{padding-right:0}
}
@media(max-width:720px){
  .scr-grid{display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-left:-5vw;margin-right:-5vw;padding:0 5vw 6px}
  .scr-card{flex:0 0 78%;scroll-snap-align:center}
  .scr-dots{display:flex}
  .scr-photo{min-height:240px}
  .scr-photo figcaption{padding:18px}
  .scr-render.big{width:min(340px,86vw)}
  .scr-dialog-body{overflow-x:auto}
}
@media(prefers-reduced-motion:reduce){.scr-card:hover{transform:none}.scr-photo .scr-do:active{transform:none}}
/* a short crossfade when the audience changes */
@media(prefers-reduced-motion:no-preference){.scr-stage.swap .scr-photo,.scr-stage.swap .scr-grid{animation:scrSwap .28s ease-out}}
@keyframes scrSwap{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ===== For employers ===== */
.employers{display:grid;grid-template-columns:1fr 1.05fr;gap:60px;align-items:center;background:var(--paper-2)}
.employers-photo .frame{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-soft);aspect-ratio:4/4.6}
.employers-photo .frame img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.employers-copy h2{font-size:clamp(34px,4vw,52px);margin-top:14px}
.employers-copy .lede{margin-top:16px;font-size:17px;line-height:1.6;color:var(--ink-soft);max-width:480px}
.employer-points{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:32px 0}
.employer-points div{display:flex;flex-direction:column;gap:5px}
.employer-points b{font-size:14px}
.employer-points span{font-size:12px;line-height:1.55;color:var(--ink-soft)}
.lightbox{position:fixed;inset:0;background:rgba(5,9,20,.92);z-index:300;display:flex;align-items:center;justify-content:center;padding:5vh 5vw;flex-direction:column;gap:16px}
.lightbox[hidden]{display:none}
.lightbox img{max-width:min(920px,90vw);max-height:74vh;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lightbox p{color:#fff;font-size:14px;max-width:600px;text-align:center;color:var(--muted-onDark)}
.lightbox-close{position:absolute;top:24px;right:28px;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:22px;display:grid;place-items:center}
.lightbox-close:hover{background:rgba(255,255,255,.2)}

/* ===== Contact modal (email fallback for mailto: links that can't rely on a default mail app) ===== */
.contact-modal{position:fixed;inset:0;background:rgba(5,9,20,.72);z-index:300;display:flex;align-items:center;justify-content:center;padding:5vh 5vw}
.contact-modal[hidden]{display:none}
.contact-card{position:relative;background:var(--paper);border-radius:var(--radius-lg);padding:38px 34px;max-width:400px;width:100%;box-shadow:var(--shadow-soft);display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.contact-card h3{font-size:24px;margin-top:8px}
.contact-card>p{color:var(--ink-soft);font-size:13.5px;line-height:1.55}
.contact-close{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;background:var(--paper-2);color:var(--ink-soft);font-size:18px;display:grid;place-items:center;transition:background .2s,color .2s}
.contact-close:hover{background:var(--line);color:var(--ink)}
.contact-email-row{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;width:100%}
.contact-email-row span{flex:1;font:600 13px var(--font-mono);color:var(--ink);word-break:break-all}
.contact-email-row button{flex-shrink:0;background:var(--ink);color:#fff;font:700 12px var(--font-body);padding:8px 14px;border-radius:999px;transition:background .2s}
.contact-email-row button:hover{background:var(--ink-2)}
.contact-email-row button.copied{background:var(--mint-deep)}
.contact-card .button{width:100%;justify-content:center}
.contact-note{font-size:11.5px;color:var(--ink-faint);line-height:1.5;margin-top:-4px}

/* ===== Interactive phone demo ===== */
.demo-wrap{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:48px;position:relative}
.demo-wrap:before{content:'';position:absolute;top:50%;left:50%;width:470px;height:470px;max-width:140vw;background:radial-gradient(circle,rgba(245,166,35,.3),transparent 70%);transform:translate(-50%,-50%);filter:blur(6px);z-index:0;pointer-events:none}
@media(prefers-reduced-motion:no-preference){.demo-wrap:before{animation:glowPulseBg 5s ease-in-out infinite}}
@keyframes glowPulseBg{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}
.phone{width:340px;max-width:100%;height:640px;background:#fbfaf7;border:8px solid var(--ink);border-radius:40px;box-shadow:var(--shadow-soft);overflow:hidden;position:relative;z-index:1;text-align:left}
.cubi{display:block}
.cubi-demo{position:relative;width:112px;height:112px;margin:0 auto -16px;z-index:2}
@media(min-width:1300px){.cubi-demo{position:absolute;left:calc(50% - 318px);bottom:96px;width:146px;height:146px;margin:0}}
@media(prefers-reduced-motion:no-preference){
  .cubi-demo{animation:cubiBreathe 4s ease-in-out infinite}
  .ai-stack .cubi,.leb-grid .cubi,.asks .cubi{animation:cubiBreathe 3.6s ease-in-out infinite}
  .cubi-arm-r{transform-origin:115px 78px;animation:armSwayR 2.8s ease-in-out infinite}
  .cubi-arm-l{transform-origin:35px 80px;animation:armSwayL 2.8s ease-in-out infinite}
}
@keyframes cubiBreathe{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-1.5px) rotate(-1deg)}}
@keyframes armSwayR{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-4deg)}}
@keyframes armSwayL{0%,100%{transform:rotate(0deg)}50%{transform:rotate(4deg)}}
.phone-top{height:30px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;font:600 11px var(--font-mono);color:var(--ink-faint)}
.speaker{width:34px;height:5px;background:var(--line);border-radius:4px}
.app-head{height:52px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 18px;font:700 12px var(--font-body)}
.mini-mark{color:var(--marigold);font-size:16px}
.head-stat{display:inline-flex;align-items:center;gap:6px;color:#fff;font:700 12px var(--font-body);padding:6px 8px;margin:0 -8px;border-radius:8px;cursor:pointer;transition:background .15s}
.head-stat:hover,.head-stat:active{background:rgba(255,255,255,.14)}
.app-head b{display:inline-block}
@media(prefers-reduced-motion:no-preference){.app-head b{animation:flameFlicker 1.8s ease-in-out infinite}}
@keyframes flameFlicker{0%,100%{transform:scale(1) rotate(0deg)}25%{transform:scale(1.14) rotate(-6deg)}50%{transform:scale(.95) rotate(4deg)}75%{transform:scale(1.08) rotate(-3deg)}}
.app-screen{display:none;height:calc(100% - 82px);overflow:auto;padding:20px 20px 84px;background:#fbfaf7}
.app-screen.active{display:block}
.hello{font:700 10px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--marigold-deep);margin:0}
.app-screen h3{margin:4px 0 0;font-size:22px;letter-spacing:-.02em}
.progress-label{display:flex;justify-content:space-between;font:600 11px var(--font-body);color:var(--ink-soft);margin-top:16px}
.progress-label b{font-variant-numeric:tabular-nums}
.progress{height:6px;background:var(--line);border-radius:10px;overflow:hidden;margin-top:6px}
.progress i{display:block;height:100%;width:72%;background:var(--marigold-deep);border-radius:10px}
.mission-card{margin-top:16px;background:var(--marigold);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:4px;position:relative;overflow:hidden}
.mission-card:after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-15deg);pointer-events:none;z-index:0}
.mission-card>*{position:relative;z-index:1}
@media(prefers-reduced-motion:no-preference){.mission-card:after{animation:shimmerSweep 3.2s ease-in-out infinite}}
@keyframes shimmerSweep{0%{left:-60%}45%{left:130%}100%{left:130%}}
.mission-card .tag{font:700 9px var(--font-mono);letter-spacing:.06em}
.mission-icon{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.5);display:grid;place-items:center;font-size:15px;margin:4px 0}
.mission-card h4{margin:0;font:700 15px var(--font-body)}
.mission-card p{font-size:11px;color:var(--ink-2);margin:2px 0 8px}
.mission-card button{display:inline-flex;align-items:center;gap:6px;background:var(--ink);color:#fff;padding:9px 14px;border-radius:999px;font:700 11px var(--font-body);align-self:flex-start}
.mini-title{display:flex;justify-content:space-between;margin:22px 0 10px;font:700 11px var(--font-body)}
.mini-title span{color:var(--marigold-deep)}
.path-row{display:flex;align-items:center;justify-content:space-between}
.path-row i{font-style:normal;width:32px;height:32px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font:700 12px var(--font-mono)}
.path-row i.done{background:var(--mint);border-color:var(--mint-deep);color:var(--mint-deep)}
.path-row i.current{background:var(--marigold);border-color:var(--marigold-deep)}
.app-screen .back{font-size:18px;margin-bottom:8px}
.tag{display:inline-block;font:700 10px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--marigold-deep)}
.avatar{width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font:700 12px var(--font-body);margin-top:14px}
.avatar-name{display:block;margin-top:8px;font-size:12px;color:var(--ink-soft)}
.speech{margin-top:14px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;font:italic 15px/1.5 var(--font-body)}
.recording{margin-top:22px;display:flex;align-items:center;justify-content:center;gap:4px;height:60px}
.recording span{width:52px;height:52px;border-radius:50%;background:#e64b3c;box-shadow:0 0 0 8px rgba(230,75,60,.14)}
.recording i{width:3px;background:var(--line);border-radius:2px;height:18px}
.hint{text-align:center;font-size:11px;color:var(--ink-faint);margin-top:10px}
.wide-button{width:100%;margin-top:18px;background:var(--ink);color:#fff;padding:14px;border-radius:12px;font:700 12px var(--font-body);text-align:center}
.score-ring{width:76px;height:76px;border-radius:50%;background:var(--mint);display:flex;flex-direction:column;align-items:center;justify-content:center;margin:16px auto 6px}
.score-ring b{font:800 24px var(--font-display);color:var(--mint-deep)}
.score-ring span{font-size:9px;color:var(--mint-deep)}
.center-copy{text-align:center;font-size:12px;color:var(--ink-soft);margin-top:6px}
.score-row{display:flex;flex-direction:column;gap:5px;margin-top:14px;font-size:11px}
.score-row span{display:flex;justify-content:space-between}
.score-row i{height:5px;background:var(--line);border-radius:10px;position:relative;overflow:hidden}
.score-row i:before{content:'';position:absolute;inset:0;width:var(--w);background:var(--marigold-deep);border-radius:10px}
.passport-name{display:flex;align-items:center;gap:12px;margin-top:16px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px}
.passport-name>div:first-child{width:38px;height:38px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font:700 11px var(--font-body)}
.passport-name span{flex:1;display:flex;flex-direction:column}
.passport-name small{color:var(--ink-faint);font-size:10px}
.passport-name strong{font:800 18px var(--font-display);color:var(--marigold-deep)}
.passport-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:14px}
.passport-grid span{background:var(--paper-2);border-radius:10px;padding:10px;font-size:10px;color:var(--ink-soft);display:flex;flex-direction:column;gap:2px}
.passport-grid b{font:800 17px var(--font-display);color:var(--ink)}
.job-card{width:100%;text-align:left;margin-top:14px;background:var(--ink);color:#fff;border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:3px;transition:box-shadow .15s,transform .15s}
button.job-card{cursor:pointer}
button.job-card:hover,button.job-card:active{box-shadow:var(--shadow-lift);transform:translateY(-1px)}
.job-card b{font-size:14px}
.job-card small{color:var(--muted-onDark);font-size:10px}
.job-card strong{color:var(--marigold);font-size:13px;margin-top:2px}
.list-row{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:14px;padding:11px 13px;margin-top:9px;transition:box-shadow .15s,transform .15s}
button.list-row{cursor:pointer}
button.list-row:hover,button.list-row:active{box-shadow:var(--shadow-lift);transform:translateY(-1px)}
.list-row .avatar{margin-top:0;flex-shrink:0}
.list-row .row-body{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.list-row .row-body b{font-size:13px}
.list-row .row-body small{font-size:10px;color:var(--ink-faint)}
.list-row .row-end{font-size:11px;font-weight:700;color:var(--marigold-deep);flex-shrink:0;text-align:right}
.list-row .row-end small{display:block;font-weight:600;color:var(--ink-faint);font-size:9px}
.lesson-icon{width:28px;height:28px;border-radius:9px;background:var(--paper-2);color:var(--ink-faint);display:grid;place-items:center;font:700 11px var(--font-mono);flex-shrink:0}
.lesson-icon.done{background:var(--mint);color:var(--mint-deep)}
.lesson-icon.current{background:var(--marigold);color:var(--ink-deep)}
.app-nav{position:absolute;left:0;right:0;bottom:0;height:64px;background:#fff;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-around}
.app-nav button{border:0;background:none;color:var(--ink-faint);display:flex;flex-direction:column;align-items:center;gap:3px;font-size:9px}
.app-nav button.selected{color:var(--marigold-deep)}

/* ===== Gamification screens: badges, streak + leaderboard ===== */
.badge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.badge{display:flex;flex-direction:column;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 6px;text-align:center}
.badge-icon{width:38px;height:38px;border-radius:50%;background:var(--marigold);color:var(--ink-deep);display:grid;place-items:center;font-size:16px}
.badge span{font-size:10px;font-weight:700;line-height:1.3;color:var(--ink)}
.badge.locked{opacity:.5}
.badge.locked .badge-icon{background:var(--paper-2);color:var(--ink-faint)}
.streak-strip{display:flex;justify-content:space-between;gap:5px;margin-top:16px}
.streak-day{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:9px;color:var(--ink-faint);font-weight:700}
.streak-dot{width:27px;height:27px;border-radius:50%;background:var(--paper-2);display:grid;place-items:center;font:700 11px var(--font-mono);color:var(--ink-faint)}
.streak-dot.done{background:var(--mint);color:var(--mint-deep)}
.streak-dot.today{background:var(--marigold);color:var(--ink-deep)}
.leaderboard-row.me{background:var(--marigold-pale);border-color:var(--marigold-deep)}

/* ===== Mentor payment screen ===== */
.pay-summary{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-top:14px}
.pay-summary .row-body,.wallet-option .row-body{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.pay-summary .row-body b,.wallet-option .row-body b{font-size:13px}
.pay-summary .row-body small,.wallet-option .row-body small{font-size:10px;color:var(--ink-faint)}
.pay-summary strong{color:var(--marigold-deep);font:800 15px var(--font-body);flex-shrink:0}
.wallet-options{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.wallet-option{position:relative;display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer;transition:border-color .15s,background .15s}
.wallet-option input{position:absolute;opacity:0;pointer-events:none}
.wallet-option.selected{border-color:var(--marigold-deep);background:var(--marigold-pale)}
.wallet-badge{flex-shrink:0;font:800 10px var(--font-mono);color:#fff;padding:7px 9px;border-radius:7px;letter-spacing:.01em}
.wallet-badge.bkash{background:#e2136e}
.wallet-badge.nagad{background:#f5831f}
.wallet-badge.rocket{background:#7b2d8e}

/* ===== Stub screen for "coming soon" taps across the demo ===== */
.stub-art{text-align:center;font-size:34px;color:var(--marigold-deep);margin:26px 0 2px}

.demo-hint{font-size:12px;color:var(--ink-faint);position:relative;z-index:1}
.demo-banner{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:#fff;font:700 13px var(--font-body);padding:11px 20px;border-radius:999px;position:relative;z-index:2;box-shadow:var(--shadow-lift)}
.mission-card.pulse-cta{position:relative}
.mission-card.pulse-cta button{position:relative;display:inline-flex;align-items:center;gap:6px}
@media(prefers-reduced-motion:no-preference){
  .mission-card.pulse-cta button{animation:ctaGlow 1.8s ease-in-out infinite}
}
@keyframes ctaGlow{0%,100%{box-shadow:0 0 0 0 rgba(16,26,48,.35)}50%{box-shadow:0 0 0 7px rgba(16,26,48,0)}}

/* ===== Phone demo: liveliness ===== */
@media(prefers-reduced-motion:no-preference){
  .phone{animation:phoneIn .7s cubic-bezier(.16,1,.3,1) both}
  .app-screen.active{animation:screenIn .38s cubic-bezier(.16,1,.3,1)}
  .demo-wrap.reveal.in .progress i{animation:fillProgress 1.1s .35s cubic-bezier(.16,1,.3,1) both}
  .app-screen.active .recording span{animation:pulseRing 1.6s ease-out infinite}
  .app-screen.active .recording i{animation:waveBar 1s ease-in-out infinite}
  .app-screen.active .recording i:nth-child(2){animation-delay:0s;--peak:14px}
  .app-screen.active .recording i:nth-child(3){animation-delay:.09s;--peak:28px}
  .app-screen.active .recording i:nth-child(4){animation-delay:.18s;--peak:20px}
  .app-screen.active .recording i:nth-child(5){animation-delay:.27s;--peak:34px}
  .app-screen.active .recording i:nth-child(6){animation-delay:.36s;--peak:18px}
  .app-screen.active .recording i:nth-child(7){animation-delay:.45s;--peak:26px}
  .app-screen.active .recording i:nth-child(8){animation-delay:.54s;--peak:15px}
  .app-screen[data-screen="feedback"].active .score-ring{animation:popIn .5s cubic-bezier(.34,1.56,.64,1)}
  .score-row i.counted:before{transition:width .8s cubic-bezier(.16,1,.3,1)}
  .app-screen[data-screen="passport"].active .job-card{animation:popIn .5s .15s cubic-bezier(.34,1.56,.64,1) both}
  .app-screen[data-screen="passport"].active .passport-name strong{animation:glowPulse 1.6s ease-out}
}
@keyframes phoneIn{from{opacity:0;transform:translateY(22px) rotate(-1.2deg)}to{opacity:1;transform:none}}
@keyframes screenIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
@keyframes fillProgress{from{width:0}to{width:72%}}
@keyframes pulseRing{0%{box-shadow:0 0 0 8px rgba(230,75,60,.14)}70%{box-shadow:0 0 0 18px rgba(230,75,60,0)}100%{box-shadow:0 0 0 18px rgba(230,75,60,0)}}
@keyframes waveBar{0%,100%{height:10px}50%{height:var(--peak,22px)}}
@keyframes popIn{from{transform:scale(.65);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes glowPulse{0%{text-shadow:0 0 0 rgba(245,166,35,0)}35%{text-shadow:0 0 18px rgba(245,166,35,.65)}100%{text-shadow:0 0 0 rgba(245,166,35,0)}}

/* ===== Learn Earn Belong ===== */
.leb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.leb-grid article{background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:32px;min-height:260px;display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden}
.leb-grid article.featured{background:var(--ink);color:#fff;border-color:var(--ink)}
.leb-stat{display:flex;align-items:baseline;gap:8px}
.leb-num{font:800 30px var(--font-display);color:var(--marigold-deep)}
.leb-grid article.featured .leb-num{color:var(--marigold)}
.leb-stat span{font-size:12px;color:var(--ink-faint);line-height:1.3;max-width:150px}
.leb-grid article.featured .leb-stat span{color:var(--muted-onDark)}
.leb-grid h3{font-size:26px}
.leb-grid p{font-size:14px;line-height:1.6;color:var(--ink-soft);flex:1}
.leb-grid article.featured p{color:var(--muted-onDark)}
.leb-grid b.leb-action-label{font:700 12px var(--font-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--marigold-deep)}
.leb-grid article.featured b.leb-action-label{color:var(--marigold)}
.leb-grid .cubi{width:72px;height:72px;align-self:flex-end;margin-top:auto}
.leb-link{display:inline-flex;align-items:center;gap:6px;font:700 13px var(--font-body);color:var(--ink);align-self:flex-start;margin-top:2px}
.leb-link i{font-style:normal;transition:transform .2s}
.leb-link:hover i{transform:translateX(4px)}
.leb-grid article.featured .leb-link{color:var(--marigold)}
.leb-grid article.featured .cubi{--ink:var(--marigold-deep)}
@media(prefers-reduced-motion:no-preference){.leb-grid article:hover .cubi{animation:cubiBreathe 1.6s ease-in-out infinite}}
.community-photo{margin-top:44px;border-radius:var(--radius-lg);overflow:hidden;position:relative;box-shadow:var(--shadow-soft)}
.community-photo img{width:100%;max-height:480px;object-fit:cover}
.community-photo:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,13,28,.82),transparent 55%)}
.community-photo figcaption{position:absolute;left:36px;right:36px;bottom:30px;z-index:2;color:#fff;display:flex;align-items:end;justify-content:space-between;gap:30px;flex-wrap:wrap}
.community-photo figcaption b{font:700 26px var(--font-display)}
.community-photo figcaption span{max-width:480px;color:var(--muted-onDark);line-height:1.55;font-size:14px}
.stat-chip{position:absolute;top:24px;left:24px;z-index:2;background:#fff;border-radius:14px;padding:13px 16px;box-shadow:var(--shadow-lift);display:flex;flex-direction:column;gap:2px}
.stat-chip b{font:800 20px var(--font-display);color:var(--ink)}
.stat-chip span{font-size:11px;color:var(--ink-soft);max-width:140px;line-height:1.4}
.stat-chip.cta{display:flex;flex-direction:row;align-items:center;gap:14px;max-width:none;transition:transform .2s,box-shadow .2s}
.stat-chip.cta:hover{transform:translateY(-2px);box-shadow:0 20px 44px -18px rgba(7,13,28,.4)}
.stat-chip-text{display:flex;flex-direction:column;gap:2px}
.stat-chip.cta i{font-style:normal;color:var(--marigold-deep);font-size:16px;flex-shrink:0;transition:transform .2s}
.stat-chip.cta:hover i{transform:translateX(3px)}

/* ===== Pilot / map ===== */
.pilot{background:var(--ink-deep);color:#fff}
.pilot-top{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:end}
.pilot-top h2{font-size:clamp(34px,4vw,52px);margin-top:12px}
.pilot-top p{color:var(--muted-onDark);font-size:15px;line-height:1.65;max-width:440px}
.flow-strip{display:flex;align-items:center;gap:18px;margin-top:40px;background:var(--ink-2);border-radius:var(--radius-md);padding:22px 26px;flex-wrap:wrap}
.flow-strip>div{display:flex;flex-direction:column;gap:4px;flex:1;min-width:150px}
.flow-strip b{font-size:14px}
.flow-strip span{font-size:12px;color:var(--muted-onDark)}
.flow-arrow{font-style:normal;color:var(--ink-faint);font-size:16px;flex-shrink:0}
.pilot-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:20px;margin-top:48px}
.map-panel{background:var(--ink-2);border-radius:var(--radius-md);padding:26px;display:flex;flex-direction:column;gap:18px;align-self:start}
.map-title{display:flex;justify-content:space-between;align-items:center;gap:12px;font:700 13px var(--font-body)}
.map{position:relative;width:100%;max-width:370px;aspect-ratio:296/394;margin:0 auto;background:radial-gradient(circle at 30% 20%,rgba(245,166,35,.14),transparent 60%);border-radius:12px}
.bd-map-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.bd-outline{fill:rgba(245,166,35,.14);stroke:var(--marigold);stroke-width:4;stroke-linejoin:round;stroke-linecap:round}
.bd-outline path{stroke-dasharray:100;stroke-dashoffset:100;fill-opacity:0;transition:stroke-dashoffset 1.8s ease-out,fill-opacity 1.2s .9s ease-out}
.pilot-grid.in .bd-outline path{stroke-dashoffset:0;fill-opacity:1}
.map-filter{display:flex;gap:3px;background:var(--ink);border-radius:999px;padding:3px;flex-shrink:0}
.map-filter-btn{font:700 10.5px var(--font-body);letter-spacing:.01em;color:var(--muted-onDark);padding:5px 10px;border-radius:999px;transition:background .18s,color .18s}
.map-filter-btn:hover{color:#fff}
.map-filter-btn.selected{background:var(--marigold);color:var(--ink-deep)}
.map-prompt{font-size:11px;color:var(--ink-faint);margin:-10px 0 -6px}
.map-pin{position:absolute;transform:translateY(-50%);display:flex;align-items:center;gap:6px;padding:3px 8px 3px 3px;margin-left:-3px;border-radius:999px;background:rgba(7,13,28,.55);color:#fff;font:700 12px var(--font-body);text-shadow:0 1px 6px rgba(7,13,28,.9);white-space:nowrap;transition:background .18s,color .18s,opacity .3s}
.map-pin i{position:relative;width:15px;height:15px;flex-shrink:0}
.map-pin i:before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--marigold);transition:background .18s}
.map-pin i:after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--marigold);opacity:0;transform-origin:center}
@media(prefers-reduced-motion:no-preference){.map-pin.hub i:after{animation:hubRing 2.4s ease-out infinite}}
@keyframes hubRing{0%{transform:scale(.65);opacity:.75}100%{transform:scale(1.9);opacity:0}}
.map-pin.next{font:600 10px var(--font-mono);color:#c3cbde}
.map-pin.next i:before{inset:5px;background:var(--line-onDark);box-shadow:0 0 0 1px var(--marigold)}
.map-pin.flip{flex-direction:row-reverse;transform:translate(-100%,-50%);padding:3px 3px 3px 8px;margin-left:3px}
.map-pin:hover,.map-pin:focus-visible{background:rgba(255,255,255,.2);color:#fff}
.map-pin.selected{background:var(--marigold);color:var(--ink-deep);text-shadow:none}
.map-pin.selected i:before{background:var(--ink-deep)}
.map-pin.selected i:after{animation:none}
.map.only-hubs .map-pin.next{opacity:.18;pointer-events:none}
.map-readout{background:var(--ink);border:1px solid var(--line-onDark);border-radius:14px;padding:16px 18px;min-height:150px}
.ro{display:none;flex-direction:column;gap:7px}
.ro.active{display:flex}
.ro-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ro-head b{font:800 17px var(--font-display)}
.ro-pill{font:700 9px var(--font-mono);text-transform:uppercase;letter-spacing:.05em;background:var(--marigold);color:var(--ink-deep);padding:4px 8px;border-radius:999px}
.ro-pill.next{background:transparent;color:var(--muted-onDark);box-shadow:inset 0 0 0 1px var(--line-onDark)}
.ro p{font-size:12.5px;line-height:1.55;color:var(--muted-onDark)}
.ro small{font-size:11px;line-height:1.5;color:var(--ink-faint);border-top:1px solid var(--line-onDark);padding-top:8px}
.map-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:-6px}
.lg{display:flex;align-items:center;gap:7px;font:600 10px var(--font-mono);color:var(--ink-faint);text-transform:uppercase;letter-spacing:.03em}
.lg i{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.lg.hub i{background:var(--marigold)}
.lg.next i{background:var(--line-onDark);box-shadow:0 0 0 1px var(--marigold)}
.houses-panel{background:var(--ink-2);border-radius:var(--radius-md);padding:26px;display:flex;flex-direction:column;gap:16px;align-self:stretch}
.houses-count{color:var(--marigold);font:700 11px var(--font-mono);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
/* the dependent selector that replaced the invented distributor list */
.md-selects{display:flex;flex-direction:column;gap:11px}
.md-sel{display:flex;flex-direction:column;gap:5px}
.md-sel > span{display:inline-flex;align-items:center;gap:6px;font:700 9.5px var(--font-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint)}
.md-sel > span .ico{color:var(--marigold)}
.md-sel select{width:100%;font:500 13.5px var(--font-body);color:#fff;background:var(--ink);border:1px solid var(--line-onDark);border-radius:10px;padding:11px 12px;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--marigold) 50%),linear-gradient(135deg,var(--marigold) 50%,transparent 50%);background-position:calc(100% - 16px) calc(50% + 1px),calc(100% - 11px) calc(50% + 1px);background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.md-sel select:focus{outline:0;border-color:var(--marigold);box-shadow:0 0 0 3px rgba(245,166,35,.25)}
.md-sel select:disabled{opacity:.45;color:var(--muted-onDark);background-image:none;cursor:not-allowed}
.md-card{background:var(--ink);border:1px solid var(--line-onDark);border-radius:14px;padding:15px 16px;min-height:104px;display:flex;flex-direction:column;gap:11px;justify-content:center}
.md-hint{display:flex;gap:9px;font-size:12px;line-height:1.55;color:var(--muted-onDark);margin:0}
.md-hint .ico{color:var(--marigold);flex-shrink:0;margin-top:1px}
.md-path{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.md-path em{font-style:normal;font:700 13.5px var(--font-body);color:#fff}
.md-path .ico{color:var(--ink-faint)}
.md-say{font-size:12px;line-height:1.55;color:var(--muted-onDark);margin:0}
.md-acts{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.md-go{display:inline-flex;align-items:center;gap:7px;background:var(--marigold);color:var(--ink-deep);font:700 12px var(--font-body);padding:9px 14px;border-radius:10px;transition:background .16s}
.md-go:hover{background:#ffbe4d}
.md-tag{display:inline-flex;align-items:center;gap:5px;font:700 9.5px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted-onDark)}
.houses-foot{font-size:10.5px;line-height:1.5;color:var(--ink-faint);margin-top:auto}
/* The 90-day promise: the one commitment the venture makes about its own
   reporting, given a surface of its own rather than a line in a stat grid. */
.promise{display:grid;grid-column:1/-1;grid-template-columns:auto 1fr;gap:38px;align-items:start;margin-top:22px;background:linear-gradient(140deg,var(--ink-2) 0%,var(--ink) 58%);border-radius:var(--radius-lg);padding:34px 36px;position:relative;overflow:hidden}
.promise:before{content:'';position:absolute;left:-70px;bottom:-110px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(245,166,35,.18),transparent 66%);pointer-events:none}
.promise-mark{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:112px;height:112px;border-radius:26px;background:var(--marigold);color:var(--ink-deep);flex-shrink:0}
.promise-mark span{font:800 42px var(--font-display);line-height:1;letter-spacing:-.03em}
.promise-mark em{font:700 10px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;font-style:normal;margin-top:3px}
.promise-copy{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.promise-copy h3{font:700 clamp(23px,2.6vw,32px)/1.12 var(--font-display);letter-spacing:-.018em;color:#fff;margin:2px 0 0}
.promise-copy h3 em{font-style:italic;color:var(--marigold)}
.promise-copy > p{font-size:13.8px;line-height:1.65;color:var(--muted-onDark);max-width:66ch;margin:0}
.promise-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;margin-top:6px}
.promise-list article{background:rgba(255,255,255,.05);border:1px solid var(--line-onDark);border-radius:14px;padding:16px 17px}
.promise-list b{display:block;font:700 13.5px/1.35 var(--font-body);color:#fff;margin-bottom:6px}
.promise-list p{font-size:12px;line-height:1.55;color:var(--muted-onDark);margin:0}
.promise-fine{display:flex;gap:8px;align-items:flex-start;margin:4px 0 0;font-size:11.5px;line-height:1.55;color:var(--ink-faint);max-width:78ch}
.promise-fine .ico{color:var(--marigold);flex-shrink:0;margin-top:1px}
.ribbon-link{display:flex;align-items:center;gap:11px;background:var(--paper);padding:16px 20px;color:var(--marigold-deep);transition:background .16s}
.ribbon-link:hover{background:#fff}
@media(max-width:900px){
  .promise{grid-template-columns:1fr;gap:20px;padding:26px 22px}
  .promise-mark{width:86px;height:86px;border-radius:20px}
  .promise-mark span{font-size:32px}
  .promise-list{grid-template-columns:1fr}
}
.metrics{display:grid;grid-column:1/-1;grid-template-columns:repeat(3,1fr);gap:14px}
.metrics article{background:var(--ink-2);border-radius:var(--radius-md);padding:20px;display:flex;flex-direction:column;gap:6px}
.metrics .wide{justify-content:center}
.metrics b{font:800 30px var(--font-display);font-variant-numeric:tabular-nums}
.metrics span{font-size:11px;color:var(--muted-onDark)}
.metrics .wide{grid-column:1/-1;background:linear-gradient(120deg,var(--ink-2),var(--ink));padding:24px}
.metrics .wide span{color:var(--marigold);font:700 11px var(--font-mono);text-transform:uppercase}
.metrics .wide b{font-size:22px;margin:6px 0}
.metrics .wide p{font-size:13px;color:var(--muted-onDark);line-height:1.5}

/* ===== Pilot field record: photos from the three pilots + news segment ===== */
.field-record{margin-top:20px;background:var(--ink-2);border-radius:var(--radius-md);padding:30px;display:flex;flex-direction:column;gap:26px}
.field-top{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
.field-head{display:flex;flex-direction:column;gap:14px}
.field-head h3{font-size:clamp(24px,2.6vw,33px);line-height:1.12}
.field-head p{font-size:14px;line-height:1.65;color:var(--muted-onDark);max-width:460px}
.news-embed{display:flex;flex-direction:column;gap:10px}
.news-poster{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;display:block;padding:0;background:radial-gradient(circle at 70% 25%,rgba(245,166,35,.28),transparent 62%),linear-gradient(150deg,var(--ink),var(--ink-deep));box-shadow:inset 0 0 0 1px var(--line-onDark)}
.news-badge{position:absolute;top:13px;left:13px;background:rgba(7,13,28,.78);color:#fff;font:700 9px var(--font-mono);text-transform:uppercase;letter-spacing:.07em;padding:6px 9px;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.news-play{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;background:var(--marigold);color:var(--ink-deep);display:grid;place-items:center;font-size:18px;padding-left:4px;box-shadow:0 10px 28px rgba(7,13,28,.55);transition:transform .2s}
.news-poster:hover .news-play,.news-poster:focus-visible .news-play{transform:translate(-50%,-50%) scale(1.09)}
.news-cap{position:absolute;left:0;right:0;bottom:0;padding:15px 16px;display:flex;flex-direction:column;gap:3px;text-align:left;background:linear-gradient(transparent,rgba(7,13,28,.92))}
.news-cap b{font:800 15px var(--font-body);color:#fff}
.news-cap>span{font-size:11px;color:var(--muted-onDark)}
.news-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000}
.news-frame video{position:absolute;inset:0;width:100%;height:100%;display:block;background:#000}
.news-foot{display:flex;flex-direction:column;gap:6px}
.news-out{font:600 10px var(--font-mono);color:var(--ink-faint);text-transform:uppercase;letter-spacing:.05em;text-decoration:none;align-self:flex-start;transition:color .2s}
.news-out:hover{color:var(--marigold)}
.field-shots{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.field-shots figure{margin:0;border-radius:12px;overflow:hidden;background:var(--ink);display:flex;flex-direction:column;cursor:pointer;transition:transform .2s,box-shadow .2s}
.field-shots figure:hover,.field-shots figure:focus-visible{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.field-shots img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.field-shots figcaption{padding:11px 13px 13px;display:flex;flex-direction:column;gap:3px}
.field-shots figcaption b{font-size:12.5px}
.field-shots figcaption span{font-size:10.5px;line-height:1.45;color:var(--muted-onDark)}

/* ===== Evidence / mentor ===== */
/* ===== Employer talent desk =====
   Progressive disclosure: a search box, three quick filters and three
   candidates. Experience, thana, readiness and sorting sit behind More filters;
   packages and pricing sit behind the access step, which only opens once a
   candidate has been selected. */
.employer-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.talent{background:var(--paper-2)}
.td2{display:flex;flex-direction:column;gap:14px;margin-top:38px}
.td2-bar{display:grid;grid-template-columns:minmax(220px,1fr) auto;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:14px}
.td2-search{display:flex;align-items:center;gap:9px;background:var(--paper);border:1px solid var(--line);border-radius:11px;padding:11px 13px;min-width:0}
.td2-search .ico{color:var(--ink-faint);flex-shrink:0}
.td2-search input{flex:1;min-width:0;border:0;background:none;font:500 13.5px var(--font-body);color:var(--ink);outline:none}
.td2-search:focus-within{border-color:var(--marigold-deep);box-shadow:0 0 0 3px rgba(245,166,35,.2)}
.td2-quick{display:flex;gap:8px;flex-wrap:wrap}
.td2-quick select{font:500 13px var(--font-body);color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;max-width:210px}
.td2-quick select:focus{outline:0;border-color:var(--marigold-deep);box-shadow:0 0 0 3px rgba(245,166,35,.2)}
.td2-more{display:inline-flex;align-items:center;gap:7px;font:700 12.5px var(--font-body);color:var(--ink);background:var(--paper-2);border:1px solid var(--line);border-radius:10px;padding:10px 14px;transition:background .16s,border-color .16s}
.td2-more:hover{border-color:var(--marigold-deep)}
.td2-more.on{background:var(--ink);border-color:var(--ink);color:#fff}
.td2-more.on .ico{color:var(--marigold)}
.td2-drawer{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:12px;align-items:end;background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:16px}
.td2-drawer[hidden]{display:none}
.td2-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.td2-field > span{font:700 9.5px var(--font-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint)}
.td2-field select{width:100%;font:500 13px var(--font-body);color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:10px 11px}
.td2-field select:disabled{opacity:.5;cursor:not-allowed}
.td2-field select:focus{outline:0;border-color:var(--marigold-deep);box-shadow:0 0 0 3px rgba(245,166,35,.2)}
.td2-clear{display:inline-flex;align-items:center;gap:6px;font:700 12px var(--font-body);color:var(--ink-soft);padding:10px 2px;white-space:nowrap}
.td2-clear:hover{color:var(--ink)}
.td2-active{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:14px}
.td2-fchip{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 8px 6px 12px;font:600 12px var(--font-body);color:var(--ink);transition:border-color .16s,box-shadow .16s}
.td2-fchip em{font-style:normal;font-weight:700;color:var(--ink-faint);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em}
.td2-fchip i{font-style:normal;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:var(--paper-2);color:var(--ink-faint);font-size:13px;line-height:1}
.td2-fchip:hover{border-color:var(--marigold-deep)}
.td2-fchip:hover i{background:var(--marigold);color:var(--ink-deep)}
.td2-clearall{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:6px 4px;font:700 12px var(--font-body);color:var(--marigold-deep);text-decoration:underline;text-underline-offset:3px}
.td2-clearall:hover{color:var(--ink)}
.td2-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:0 2px}
.td2-count{font:700 12px var(--font-mono);color:var(--marigold-deep);font-variant-numeric:tabular-nums}
.td2-demo{display:inline-flex;align-items:center;gap:6px;font:600 11px var(--font-body);color:var(--ink-faint)}
.td2-results{display:flex;flex-direction:column;gap:10px}
.td2-card{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:15px 18px;transition:border-color .16s,box-shadow .16s}
.td2-card:hover{box-shadow:var(--shadow-lift)}
.td2-card.picked{border-color:var(--marigold-deep);border-width:1.5px;padding:14.5px 17.5px;background:#fffdf7}
.td2-pick{display:flex;align-items:center;flex-shrink:0}
.td2-pick input{width:19px;height:19px;accent-color:var(--marigold-deep);cursor:pointer}
.td2-pick input:disabled{cursor:not-allowed;opacity:.4}
.td2-av{width:42px;height:42px;border-radius:50%;background:var(--ink);color:var(--marigold);display:grid;place-items:center;font:700 13px var(--font-body);flex-shrink:0;letter-spacing:.02em}
.td2-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.td2-t b{display:flex;align-items:baseline;gap:8px;font:700 15px var(--font-body);color:var(--ink)}
.td2-t b em{font-style:normal;font:600 9.5px var(--font-mono);letter-spacing:.05em;color:var(--ink-faint)}
.td2-t > small{font-size:12.5px;color:var(--ink-soft)}
.td2-facts{display:flex;gap:6px 14px;flex-wrap:wrap;margin-top:2px}
.td2-facts span{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink-faint)}
.td2-signal{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin-top:4px;font:700 10.5px var(--font-body);background:var(--mint);color:var(--mint-deep);padding:5px 9px;border-radius:999px}
.td2-end{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0}
.td2-match{font:800 17px var(--font-display);color:var(--marigold-deep);font-variant-numeric:tabular-nums}
.td2-view{font:700 12px var(--font-body);color:var(--ink);border:1px solid var(--line);border-radius:9px;padding:8px 13px;transition:border-color .16s,background .16s}
.td2-view:hover{border-color:var(--marigold-deep);background:var(--marigold-pale)}
.td2-showmore{align-self:flex-start;font:700 12.5px var(--font-body);color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:999px;padding:10px 18px;transition:border-color .16s}
.td2-showmore:hover{border-color:var(--marigold-deep)}
.td2-showmore[hidden]{display:none}
.td-empty{font-size:13px;color:var(--ink-faint);padding:16px 2px}

/* the tray only exists once a candidate is selected */
.td-tray2{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:150;display:flex;align-items:center;gap:16px;background:var(--ink);color:#fff;border-radius:999px;padding:12px 14px 12px 22px;box-shadow:0 18px 40px -18px rgba(7,13,28,.7);max-width:calc(100vw - 32px)}
.td-tray2[hidden]{display:none}
.td-tray2-n{display:inline-flex;align-items:baseline;gap:8px;font-size:13px;color:var(--muted-onDark);white-space:nowrap}
.td-tray2-n b{font:800 20px var(--font-display);color:#fff;font-variant-numeric:tabular-nums}
.td-tray2-clear{display:inline-flex;align-items:center;gap:6px;font:700 12px var(--font-body);color:var(--muted-onDark);white-space:nowrap}
.td-tray2-clear:hover{color:#fff}
.td-tray2 .button{padding:11px 18px;font-size:13px;white-space:nowrap}
@media(prefers-reduced-motion:no-preference){
  .td-tray2{animation:trayUp .24s cubic-bezier(.22,1,.36,1)}
  .td-tray2-n b.bump{animation:tdBump .24s ease-out}
}
@keyframes trayUp{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translateX(-50%)}}
@keyframes tdBump{0%{transform:translateY(5px);opacity:.5}100%{transform:none;opacity:1}}

@media(max-width:1100px){
  .td2-bar{grid-template-columns:1fr}
  .td2-drawer{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  .td2-quick{display:grid;grid-template-columns:1fr}
  .td2-quick select{max-width:none}
  .td2-drawer{grid-template-columns:1fr}
  .td2-card{flex-wrap:wrap;gap:10px 12px}
  .td2-end{flex-direction:row;align-items:center;width:100%;justify-content:space-between;order:3}
  .td-tray2{left:12px;right:12px;transform:none;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:var(--radius-md)}
  .td-tray2 .button{flex:1;justify-content:center}
  @media(prefers-reduced-motion:no-preference){.td-tray2{animation:none}}
}

/* --- the two employer overlays --- */
.td-card{max-width:520px;gap:10px}
.td-card h3{font-size:22px;margin-top:2px}
.td-card .td-sub{font-size:13px;color:var(--ink-soft);margin:0}
.td-card .td-lab{margin:14px 0 8px}
.td-card .td-facts{margin-top:4px}
.td-ev{display:flex;flex-direction:column;gap:5px;width:100%;background:var(--paper-2);border-radius:11px;padding:11px 13px;margin-bottom:8px}
.td-evrow{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--ink)}
.td-evrow span{font:700 12px var(--font-mono);font-variant-numeric:tabular-nums}
.td-meter{display:block;height:6px;background:var(--line);border-radius:6px;overflow:hidden}
.td-meter i{display:block;height:100%;background:var(--marigold-deep);border-radius:6px}
.td-meter.good i{background:var(--mint-deep)}
.td-ev em{font-style:normal;font:700 10px var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint)}
.td-card .td-consent{width:100%;margin-top:6px}
.td-card .button{margin-top:10px}
.td-sum{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;margin-top:4px}
.td-sum > div{display:flex;flex-direction:column;gap:2px;background:var(--paper-2);border-radius:10px;padding:11px 13px}
.td-sum span{font:700 9.5px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.td-sum b{font-size:12.5px;color:var(--ink);overflow-wrap:anywhere;line-height:1.4}
.td-filters{display:flex;flex-direction:column;gap:6px;width:100%;margin:0}
.td-filters li{font-size:12px;color:var(--ink-soft);padding-left:14px;position:relative}
.td-filters li:before{content:'';position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:var(--marigold-deep)}
.td-note{display:flex;gap:9px;width:100%;background:var(--paper-2);border-radius:11px;padding:12px 13px;font-size:11.5px;line-height:1.55;color:var(--ink-soft);margin:10px 0 0}
.td-note .ico{color:var(--mint-deep);flex-shrink:0;margin-top:1px}
.td-ack{display:flex;gap:10px;align-items:flex-start;width:100%;margin-top:12px;font-size:12px;line-height:1.55;color:var(--ink);cursor:pointer}
.td-ack input{margin-top:2px;width:17px;height:17px;flex-shrink:0;accent-color:var(--marigold-deep)}
.td-error{font-size:12px;font-weight:600;color:#d1443a;margin:8px 0 0}
.td-done{width:56px;height:56px;border-radius:50%;background:var(--mint);color:var(--mint-deep);display:grid;place-items:center;margin-bottom:4px}
.td-req{max-width:560px}

@media(max-width:1100px){
  .td{grid-template-columns:1fr}
  .td-controls{position:static}
  .td-lower{grid-template-columns:1fr}
}
@media(max-width:700px){
  .td-results{grid-template-columns:1fr}
  .td-packgrid{grid-template-columns:1fr}
  .td-sum{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.td-card-row:hover,.td-pack:hover{transform:none}}

/* ===== Founder experience =====
   The claim is the experience, so the section leads with a real portrait slot and
   four compact evidence chips instead of a checklist and an equation. */
.evidence{display:flex;flex-direction:column}
.fd-head{font-size:clamp(30px,3.4vw,46px);margin-top:12px;line-height:1.08}
.fd-grid{display:grid;grid-template-columns:270px 1fr;gap:34px;align-items:start;margin-top:36px}
.fd-portrait{margin:0;display:flex;flex-direction:column;gap:12px}
.fd-slot{aspect-ratio:4/5;border-radius:var(--radius-md);background:var(--paper-2);border:1.5px dashed var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--ink-faint);text-align:center;font:600 12px/1.5 var(--font-body)}
.fd-slot .ico{color:var(--marigold-deep);opacity:.7}
.fd-portrait figcaption{display:flex;flex-direction:column;gap:2px;font:700 15px var(--font-body);color:var(--ink)}
.fd-portrait figcaption span{font:600 12px var(--font-body);color:var(--ink-faint)}
.fd-say{display:flex;flex-direction:column;gap:22px;padding-top:4px}
.fd-lede{font-size:17px;line-height:1.65;color:var(--ink-soft);max-width:600px;margin:0}
.fd-chips{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:560px}
.fd-chip{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 15px;font:700 13.5px var(--font-body);color:var(--ink)}
.fd-chip .ico{color:var(--marigold-deep);flex-shrink:0}
.fd-link{align-self:flex-start;font:700 14px var(--font-body);color:var(--ink);border-bottom:1.5px solid var(--marigold-deep);padding-bottom:2px}
.fd-link:hover{color:var(--marigold-deep)}
.fd-doc{margin:40px 0 0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-soft);background:var(--ink);position:relative}
.fd-doc img{width:100%;display:block;aspect-ratio:21/9;object-fit:cover}
.fd-doc figcaption{position:absolute;left:0;right:0;bottom:0;padding:38px 32px 20px;color:#fff;font:600 13.5px var(--font-body);background:linear-gradient(0deg,rgba(7,13,28,.88),transparent)}
@media(max-width:860px){
  .fd-grid{grid-template-columns:1fr;gap:26px}
  .fd-portrait{max-width:230px}
  .fd-chips{grid-template-columns:1fr}
  .fd-doc img{aspect-ratio:16/9}
}

/* ===== Regional ===== */
/* ===== One sales skill, different frontline moments =====
   The two repeated bullet boxes are gone; the same point is now something the
   visitor operates. Never autoplays: the industry is the visitor's choice. */
.regional-lede{margin-top:16px;color:var(--ink-soft);font-size:16px;line-height:1.65;max-width:640px}
.ix{margin-top:38px;display:flex;flex-direction:column;gap:18px}
.ix-tabs{display:flex;flex-wrap:wrap;gap:8px}
.ix-tab{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:10px 17px;font:700 13px var(--font-body);color:var(--ink-soft);transition:background .18s,color .18s,border-color .18s,transform .18s}
.ix-tab .ico{color:var(--ink-faint);transition:color .18s}
.ix-tab:hover{border-color:var(--marigold-deep);color:var(--ink)}
.ix-tab.selected{background:var(--ink);border-color:var(--ink);color:#fff}
.ix-tab.selected .ico{color:var(--marigold)}
.ix-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:0;display:grid;grid-template-columns:.9fr 1.1fr;gap:0;align-items:stretch;overflow:hidden;outline:none}
.ix-card:focus-visible{border-color:var(--marigold-deep);box-shadow:0 0 0 3px rgba(245,166,35,.25)}
.ix-shot{position:relative;margin:0;min-height:330px;display:flex;background:var(--ink)}
.ix-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ix-shot:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,13,28,.94) 12%,rgba(7,13,28,.6) 52%,rgba(7,13,28,.2) 100%)}
.ix-shot-plain{background:linear-gradient(150deg,var(--ink-2) 0%,var(--ink) 60%)}
.ix-shot-plain:after{background:radial-gradient(120% 90% at 18% 8%,rgba(245,166,35,.16),transparent 62%)}
.ix-mark{position:absolute;right:-34px;top:-24px;color:var(--marigold);opacity:.1;line-height:0}
.ix-mark .ico{stroke-width:1}
.ix-shot figcaption{position:relative;z-index:1;margin-top:auto;padding:24px 26px 26px;display:flex;flex-direction:column;gap:11px}
.ix-where{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;font:700 9.5px var(--font-mono);letter-spacing:.11em;text-transform:uppercase;color:var(--marigold)}
.ix-shot blockquote{margin:0;font:600 clamp(19px,2.1vw,26px)/1.3 var(--font-display);color:#fff;letter-spacing:-.015em;text-wrap:balance}
.ix-read{display:flex;flex-direction:column;gap:16px;padding:26px 28px}
.ix-said{display:flex;gap:8px;align-items:flex-start;margin:0;font-size:12.5px;line-height:1.55;color:var(--ink-faint)}
.ix-said .ico{color:var(--marigold-deep);flex-shrink:0;margin-top:2px}
.ix-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ix-col{border-radius:14px;padding:15px 16px}
.ix-col.same{background:var(--mint)}
.ix-col.diff{background:var(--paper-2)}
.ix-col h4{display:flex;align-items:center;gap:6px;font:700 10.5px var(--font-body);letter-spacing:.02em;text-transform:uppercase;margin:0 0 9px}
.ix-col.same h4{color:var(--mint-deep)}
.ix-col.diff h4{color:var(--ink-faint)}
.ix-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.ix-col li{position:relative;padding-left:14px;font-size:12.3px;line-height:1.45;color:var(--ink)}
.ix-col li:before{content:'';position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%}
.ix-col.same li:before{background:var(--mint-deep)}
.ix-col.diff li:before{background:var(--ink-faint);opacity:.5}
.ix-rubric{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:15px}
.ix-rlab{font:700 9.5px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.ix-axes{display:flex;flex-wrap:wrap;gap:6px}
.ix-axis{display:inline-flex;align-items:center;gap:6px;background:var(--ink);color:#fff;font:700 11.5px var(--font-body);padding:7px 12px;border-radius:999px}
.ix-axis .ico{color:var(--marigold)}
.ix-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:auto}
.ix-try{display:inline-flex;align-items:center;gap:8px;background:var(--marigold);color:var(--ink-deep);font:700 12.5px var(--font-body);padding:11px 16px;border-radius:11px;transition:background .16s,transform .16s}
.ix-try:hover{background:#ffbe4d;transform:translateY(-2px)}
.ix-role{display:inline-flex;align-items:center;gap:6px;font:600 11.5px var(--font-body);color:var(--ink-faint)}
@media(max-width:860px){
  .ix-card{grid-template-columns:1fr}
  .ix-shot{min-height:240px}
  .ix-cols{grid-template-columns:1fr}
  .ix-read{padding:22px}
}
@media(prefers-reduced-motion:no-preference){.ix-card.swap{animation:ixIn .18s ease-out}}
@keyframes ixIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:860px){.ix-card{grid-template-columns:1fr;gap:22px;padding:24px}}

/* ===== Partner / ask ===== */
.partner{background:var(--ink-deep);color:#fff;position:relative;overflow:hidden}
.partner h2{font-size:clamp(36px,4.6vw,58px);margin-top:14px}
.partner-lede{margin-top:16px;color:var(--muted-onDark);font-size:15px;line-height:1.6;max-width:520px}
.asks{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.asks article{background:var(--ink-2);border-radius:var(--radius-md);padding:26px 24px;display:flex;flex-direction:column;gap:9px;transition:transform .2s,box-shadow .2s}
.asks article:hover{transform:translateY(-4px);box-shadow:0 20px 44px -18px rgba(0,0,0,.5)}
.asks .cubi{width:60px;height:60px;margin-bottom:2px}
.asks span{font:700 11px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--marigold)}
.asks h3{font-size:19px}
.asks p{font-size:13px;color:var(--muted-onDark);line-height:1.55;flex:1}
.asks .text-link{margin-top:6px;align-self:flex-start}
.closing{margin-top:56px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;border-top:1px solid var(--line-onDark);padding-top:36px}
.closing>span{display:flex;flex-direction:column}
.closing b{font:800 20px var(--font-display)}
.closing small{color:var(--marigold);font-size:11px}
.closing .button{margin-left:auto}

footer{background:var(--ink-deep);color:var(--muted-onDark);font-size:12px;border-top:1px solid var(--line-onDark)}
.foot-top{display:grid;grid-template-columns:minmax(260px,1.1fr) 2.4fr;gap:56px;padding:52px 7vw 40px}
.foot-brand{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.foot-brand .brand{color:#fff;font-size:20px}
.foot-brand p{font-size:12.8px;line-height:1.65;color:var(--muted-onDark);margin:0;max-width:40ch}
.foot-mail{display:inline-flex;align-items:center;gap:8px;font:600 12.5px var(--font-body);color:#fff;border:1px solid var(--line-onDark);border-radius:10px;padding:9px 13px;transition:border-color .16s,background .16s}
.foot-mail .ico{color:var(--marigold)}
.foot-mail:hover{border-color:var(--marigold);background:rgba(245,166,35,.08)}
.foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.foot-cols > div{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.foot-cols h4{font:700 9.5px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--marigold);margin:0 0 3px}
.foot-cols a,.foot-cols button{font:500 12.8px var(--font-body);color:var(--muted-onDark);background:none;border:0;padding:0;text-align:left;transition:color .16s}
.foot-cols a:hover,.foot-cols button:hover{color:#fff}
.foot-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:18px 7vw;border-top:1px solid var(--line-onDark);font-size:11.5px}
.foot-note{display:inline-flex;align-items:center;gap:7px;color:var(--ink-faint)}
.foot-note .ico{color:var(--ink-faint);flex-shrink:0}
.foot-bar a:hover{color:#fff}
@media(max-width:900px){
  .foot-top{grid-template-columns:1fr;gap:34px;padding:40px 6vw 30px}
  .foot-cols{grid-template-columns:1fr 1fr;gap:24px}
  .foot-bar{padding:16px 6vw;flex-direction:column;align-items:flex-start;gap:9px}
}

/* ===== Responsive ===== */
@media(max-width:1100px){
  .chapter-rail{display:none}
}
@media(max-width:980px){
  .nav-links{position:fixed;top:65px;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);flex-direction:column;padding:18px 7vw;gap:4px;transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
  .nav-links a{padding:12px 0;border-bottom:1px solid var(--line)}
  .nav-links.open{opacity:1;transform:none;pointer-events:auto}
  .nav-cta{display:none}
  .nav-links .nav-cta{display:inline-flex;justify-content:center;margin-top:12px;border-bottom:0}
  .nav-toggle{display:flex}
  .hero{grid-template-columns:1fr;padding-top:36px}
  .split-heading,.ai,.pilot-top,.employers{grid-template-columns:1fr}
  .sequence{flex-direction:column}
  .people-grid{grid-template-columns:1fr 1fr}
  .leb-grid,.asks{grid-template-columns:1fr}
  .pilot-grid{grid-template-columns:1fr}
  .metrics{grid-template-columns:1fr 1fr}
  .field-record{padding:24px}
  .field-top{grid-template-columns:1fr;gap:24px}
  .field-shots{grid-template-columns:1fr 1fr}
  .houses-panel{padding:22px}
  .employers-photo{order:-1}
  .employers-photo .frame{aspect-ratio:16/11}
  .employer-points{grid-template-columns:1fr}
  .section-pad{padding:54px 6vw}
}
@media(max-width:980px){
  .lang-btn{padding:8px 12px}
  .lang-menu{width:212px}
}
@media(max-width:560px){
  .section-pad{padding:44px 22px}
  .ai>*{min-width:0}
  .ai-stack{grid-template-columns:1fr}
  .demo-wrap:before{width:320px;height:320px}
  .field-shots figcaption{padding:9px 10px 11px}
  .field-shots figcaption b{font-size:11.5px}
  .field-shots figcaption span{font-size:10px}
  .hero h1{font-size:34px}
  .trust-row{gap:18px}
  .people-grid{grid-template-columns:1fr}
  .loop-grid{grid-template-columns:1fr}
  .metrics{grid-template-columns:1fr}
  .closing{flex-direction:column;align-items:flex-start}
  .closing .button{margin-left:0}
  .screen-card{flex-basis:220px}
}

/* ===== Bangla typography: Bangla needs its own faces, looser leading, and none of
   the uppercase/letter-spaced treatments that only work for Latin script. ===== */

/* ===== Get Started: chooser, sign up, sign in =============================== */
/* ===== Get started =========================================================
   One primary door for learners, two deliberately quiet ones beside it, so the
   panel has a hierarchy instead of three identical cards. Icons come from the
   same Lucide sprite the demo uses; no glyphs stand in for an icon.          */
.auth-card{max-width:452px;gap:0;padding:30px 30px 26px}
.auth-panel{display:none;flex-direction:column;align-items:stretch;gap:12px;width:100%;margin:0;border:0;padding:0}
.auth-panel.active{display:flex}
.auth-modal .ico{display:inline-block;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.15em}
.auth-eyebrow{display:inline-flex;align-items:center;gap:7px;font:700 10px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.auth-eyebrow .cube-mark{width:17px;height:17px}
.auth-eyebrow .cube-mark i{border-width:2px;border-radius:5px}
.auth-eyebrow .cube-mark i:before{inset:3px;border-width:1.5px}
.auth-card h3{font-size:23px;line-height:1.16;margin:2px 0 0;letter-spacing:-.02em}
.auth-lede{color:var(--ink-soft);font-size:13px;line-height:1.55;margin:0}

/* the one door most visitors want, given the weight to match */
.auth-hero{display:flex;flex-direction:column;gap:13px;text-align:left;width:100%;margin-top:4px;
  background:var(--ink);color:#fff;border-radius:16px;padding:16px 16px 14px;position:relative;overflow:hidden;
  transition:transform .18s,box-shadow .18s}
.auth-hero:before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--marigold)}
.auth-hero:hover,.auth-hero:focus-visible{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.auth-hero-top{display:flex;align-items:center;gap:12px}
.auth-hero .auth-ico{width:38px;height:38px;border-radius:12px;background:rgba(245,166,35,.18);color:var(--marigold);display:grid;place-items:center;flex-shrink:0}
.auth-hero-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.auth-hero-t b{font:700 15px var(--font-body);letter-spacing:-.01em}
.auth-hero-t small{font-size:11.5px;line-height:1.4;color:var(--muted-onDark)}
.auth-hero-cta{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--marigold);color:var(--ink-deep);font:700 13px var(--font-body);
  border-radius:11px;padding:10px 14px;transition:background .18s}
.auth-hero:hover .auth-hero-cta{background:#ffbe4d}

.auth-or{display:flex;align-items:center;gap:12px;margin:2px 0}
.auth-or:before,.auth-or:after{content:'';flex:1;height:1px;background:var(--line)}
.auth-or em{font:700 9.5px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);font-style:normal}

/* the quiet pair: rows, not cards, so they read as secondary */
.auth-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:transparent;
  border:1px solid var(--line);border-radius:13px;padding:11px 13px;color:var(--ink-soft);
  transition:border-color .18s,background .18s}
.auth-row:hover,.auth-row:focus-visible{border-color:var(--marigold-deep);background:#fff}
.auth-row > .ico:first-child{color:var(--marigold-deep)}
.auth-row > .ico:last-child{color:var(--ink-faint);margin-left:auto;transition:transform .18s}
.auth-row:hover > .ico:last-child{transform:translateX(3px);color:var(--marigold-deep)}
.auth-row-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.auth-row-t b{font-size:13.5px;color:var(--ink)}
.auth-row-t small{font-size:11px;line-height:1.4;color:var(--ink-faint)}

.auth-back{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font:700 12px var(--font-body);color:var(--ink-soft);padding:0}
.auth-back:hover{color:var(--ink)}
.auth-flag{align-self:flex-start;font:700 10px var(--font-mono);text-transform:uppercase;letter-spacing:.05em;color:var(--marigold-deep);background:var(--marigold-pale);padding:5px 10px;border-radius:999px}

.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px 10px}
.field{display:flex;flex-direction:column;gap:5px;width:100%;margin:0;border:0;padding:0;min-width:0}
.field>span{display:flex;align-items:baseline;gap:5px;font:700 9.5px var(--font-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint)}
.field>span em{font-style:normal;font-weight:500;font-size:9px;letter-spacing:.02em;text-transform:lowercase;opacity:.75}
.field input,.field select{width:100%;font:500 13.5px var(--font-body);color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;transition:border-color .18s,box-shadow .18s}
.field input::placeholder{color:var(--ink-faint)}
.field input:focus,.field select:focus{outline:0;border-color:var(--marigold-deep);box-shadow:0 0 0 3px rgba(245,166,35,.22)}
.field input.bad{border-color:#d1443a;box-shadow:0 0 0 3px rgba(209,68,58,.16)}
.role-field{gap:7px}
.role-row{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.role-opt{position:relative;display:flex;flex-direction:column;gap:2px;border:1.5px solid var(--line);border-radius:11px;padding:10px 9px;cursor:pointer;background:#fff;transition:border-color .18s,background .18s}
.role-opt input{position:absolute;opacity:0;pointer-events:none}
.role-opt b{font-size:12px}
.role-opt small{font-size:9.5px;line-height:1.35;color:var(--ink-faint)}
.role-opt.selected{border-color:var(--marigold-deep);background:var(--marigold-pale)}
.role-opt.selected small{color:var(--marigold-deep)}
.auth-error{font-size:12px;color:#d1443a;font-weight:600;line-height:1.45;margin:0}
.auth-submit{width:100%;justify-content:center;gap:7px;margin-top:2px}
.auth-note{font-size:11px;color:var(--ink-faint);line-height:1.5;margin:0}
.auth-foot{display:flex;align-items:flex-start;gap:8px;font-size:10.5px;line-height:1.5;color:var(--ink-faint);
  background:var(--paper-2);border-radius:10px;padding:9px 11px;margin:2px 0 0}
.auth-foot .ico{margin-top:1px;color:var(--mint-deep)}
.auth-tick{width:48px;height:48px;border-radius:50%;background:var(--mint);color:var(--mint-deep);display:grid;place-items:center;align-self:flex-start}
@media(max-width:560px){
  .role-row{grid-template-columns:1fr}
  .field-grid{grid-template-columns:1fr}
  .auth-card{padding:32px 24px}
}



/* ===== Interactive demo app =================================================
   Every rule is scoped to #demo. Colours are the existing Cubicly variables plus
   tints derived from them; nothing new is invented. Icons come from the supplied
   Lucide sprite and inherit currentColor. Motion follows ANIMATION-SPEC.md.     */
#demo{
  --d-bg:#fbfaf7;                      /* page surface inside the phone */
  --d-card:#ffffff;                    /* standard card */
  --d-edge:#ece5d6;                    /* fine warm-grey border */
  --d-amber-1:#fef5e4;                 /* palest amber tint */
  --d-amber-2:#fde8bf;                 /* var(--marigold-pale) */
  --d-amber-line:#f0c775;
  --d-green-1:#e7f6ef;
  --d-green-line:#a9dcc6;
  --d-navy-1:#eef1f7;
  --d-shadow:0 1px 2px rgba(16,26,48,.05),0 6px 16px -10px rgba(16,26,48,.22);
  --d-shadow-lift:0 2px 4px rgba(16,26,48,.06),0 14px 26px -14px rgba(16,26,48,.34);
  --d-r-lg:18px; --d-r-md:14px;
}
#demo .ico-sprite{position:absolute;width:0;height:0;overflow:hidden}
#demo .ico{display:inline-block;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.15em;transform:none}
#demo .ico.amber{color:var(--marigold-deep)}
#demo .ico.green{color:var(--mint-deep)}
#demo .ico.navy{color:var(--ink)}
#demo .ico.faint{color:var(--ink-faint)}
#demo [hidden]{display:none !important}

#demo .app-body{height:calc(100% - 82px);overflow:auto;padding:16px 16px 84px;background:var(--d-bg);outline:none;-webkit-overflow-scrolling:touch}
#demo .app-body:focus-visible{outline:2px solid var(--marigold-deep);outline-offset:-2px}
#demo .scr{display:flex;flex-direction:column;gap:12px}
@media(prefers-reduced-motion:no-preference){#demo .scr{animation:demoIn .22s ease-out}}
@keyframes demoIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#demo .scr h3{font-size:20px;line-height:1.22;margin:0}
#demo .scr .tag{align-self:flex-start}
#demo .lede{font-size:12.5px;line-height:1.55;color:var(--ink-soft);margin:0}
#demo .micro{font-size:10.5px;line-height:1.5;color:var(--ink-faint);margin:0}
#demo .hello{font:700 10px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--marigold-deep);margin:0}
#demo .greet{display:flex;align-items:center;gap:11px}
#demo .greet > span{min-width:0;display:flex;flex-direction:column;gap:2px}
#demo .row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#demo .spread{display:flex;align-items:center;justify-content:space-between;gap:8px}
#demo .back{display:inline-flex;align-items:center;gap:5px;font:700 12px var(--font-body);color:var(--ink-soft);align-self:flex-start;padding:3px 0;margin:0}
#demo .back:hover{color:var(--ink)}

/* --- surfaces ------------------------------------------------------------- */
#demo .card{background:var(--d-card);border:1px solid var(--d-edge);border-radius:var(--d-r-md);box-shadow:var(--d-shadow)}
#demo .card.accent{border-left:2px solid var(--marigold-deep)}
#demo .card.accent-green{border-left:2px solid var(--mint-deep)}
#demo .tint-amber{background:var(--d-amber-1);border-color:var(--d-amber-line)}
#demo .tint-green{background:var(--d-green-1);border-color:var(--d-green-line)}
#demo .chip{display:inline-flex;align-items:center;gap:5px;font:700 10px var(--font-body);padding:5px 9px;border-radius:999px;background:var(--d-navy-1);color:var(--ink-soft);white-space:nowrap}
#demo .chip.amber{background:var(--d-amber-2);color:var(--marigold-deep)}
#demo .chip.green{background:var(--d-green-1);color:var(--mint-deep)}
#demo .chip.navy{background:var(--ink);color:#fff}

/* --- header chips --------------------------------------------------------- */
#demo .app-head{gap:4px;padding:0 10px}
#demo .hchip{display:inline-flex;align-items:center;gap:5px;color:#fff;font:700 11.5px var(--font-body);padding:6px 8px;border-radius:9px;white-space:nowrap;transition:background .16s,transform .1s}
#demo .hchip:hover,#demo .hchip:focus-visible{background:rgba(255,255,255,.15)}
#demo .hchip .ico{color:var(--marigold)}
#demo .hchip-reset{padding:6px}
#demo .hchip-reset .ico{color:var(--muted-onDark)}
#demo .hchip-reset:hover .ico{color:#fff}
@media(prefers-reduced-motion:no-preference){#demo .app-body.enter .hchip-flame .ico{animation:flameTilt .42s ease-in-out}}
@keyframes flameTilt{0%,100%{transform:rotate(0)}30%{transform:rotate(-11deg) scale(1.08)}65%{transform:rotate(7deg)}}

/* --- home ----------------------------------------------------------------- */
#demo .stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#demo .stat{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:var(--d-card);border:1px solid var(--d-edge);border-radius:var(--d-r-md);box-shadow:var(--d-shadow);padding:10px 11px}
#demo .stat .holder{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex-shrink:0}
#demo .stat .holder.amber{background:var(--d-amber-2);color:var(--marigold-deep)}
#demo .stat .holder.navy{background:var(--d-navy-1);color:var(--ink)}
#demo .stat .holder.green{background:var(--d-green-1);color:var(--mint-deep)}
#demo .stat span{display:block;min-width:0}
#demo .stat b{display:block;font:800 15px var(--font-body);color:var(--ink);line-height:1.15}
#demo .stat small{display:block;font-size:9.8px;line-height:1.35;color:var(--ink-faint)}
#demo .readiness-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px}
#demo .readiness-head b{font:800 14px var(--font-body);color:var(--marigold-deep);font-variant-numeric:tabular-nums}

#demo .mission{position:relative;border-radius:var(--d-r-lg);overflow:hidden;background:var(--d-amber-1);border:1px solid var(--d-amber-line);box-shadow:var(--d-shadow);display:flex;flex-direction:column}
#demo .mission-strip{position:relative;height:82px;flex-shrink:0}
#demo .mission-strip img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;display:block}
#demo .mission-strip .fade{position:absolute;left:0;right:0;top:0;height:46px;background:linear-gradient(rgba(7,13,28,.72),transparent)}
#demo .mission-strip .tag{position:absolute;top:9px;left:11px;color:#fff;margin:0}
#demo .mission-body{padding:13px 14px 14px;display:flex;flex-direction:column;gap:8px}
#demo .mission-body h4{margin:0;font:800 16px var(--font-body);color:var(--ink);line-height:1.25}
#demo .mission-meta{display:flex;flex-wrap:wrap;gap:6px}
#demo .mission-meta .chip{background:rgba(255,255,255,.78);color:var(--ink-soft)}
#demo .mission-meta .chip .ico{color:var(--marigold-deep)}
#demo .go{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;background:var(--ink);color:#fff;padding:10px 15px;border-radius:999px;font:700 12px var(--font-body);transition:transform .1s,background .16s}
#demo .go:hover{background:var(--ink-2)}
@media(prefers-reduced-motion:no-preference){
  #demo .mission:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.55),transparent 65%);transform:translateX(-120%);animation:missionSweep 1.5s ease-out .25s 1 forwards}
}
@keyframes missionSweep{to{transform:translateX(120%)}}

/* --- pathway nodes -------------------------------------------------------- */
#demo .path{display:flex;align-items:flex-start;justify-content:space-between;gap:4px;margin-top:2px}
#demo .pnode{display:flex;flex-direction:column;align-items:center;gap:5px;flex:1;min-width:0}
#demo .pnode .ring{position:relative;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--d-card);border:2px solid var(--d-edge);color:var(--ink-faint)}
#demo .pnode.done .ring{background:var(--d-green-1);border-color:var(--mint-deep);color:var(--mint-deep)}
#demo .pnode.now .ring{background:var(--marigold);border-color:var(--marigold-deep);color:var(--ink-deep)}
#demo .pnode.locked .ring{opacity:.55}
#demo .pnode .badge-tick{position:absolute;right:-3px;bottom:-3px;width:15px;height:15px;border-radius:50%;background:var(--mint-deep);color:#fff;display:grid;place-items:center;border:2px solid var(--d-bg)}
#demo .pnode .badge-tick .ico{stroke-width:3.4}
#demo .pnode em{font-style:normal;font-size:8.6px;line-height:1.2;color:var(--ink-faint);text-align:center;font-weight:700}
#demo .pnode.now em{color:var(--marigold-deep)}
@media(prefers-reduced-motion:no-preference){#demo .path.live .pnode.now .ring{animation:nodeBreathe 4s ease-in-out infinite}}
@keyframes nodeBreathe{0%,88%,100%{box-shadow:0 0 0 0 rgba(245,166,35,.55)}94%{box-shadow:0 0 0 7px rgba(245,166,35,0)}}

/* --- briefing ------------------------------------------------------------- */
#demo .scene{position:relative;height:120px;border-radius:var(--d-r-lg);overflow:hidden;box-shadow:var(--d-shadow)}
#demo .scene img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;display:block}
#demo .scene .veil{position:absolute;inset:0;background:linear-gradient(transparent 38%,rgba(7,13,28,.82))}
#demo .scene .label{position:absolute;left:11px;bottom:10px;display:inline-flex;align-items:center;gap:6px;color:#fff;font:700 11.5px var(--font-body)}
#demo .goal{display:flex;gap:9px;align-items:flex-start;background:var(--d-amber-1);border:1px solid var(--d-amber-line);border-left-width:2px;border-left-color:var(--marigold-deep);border-radius:0 var(--d-r-md) var(--d-r-md) 0;padding:11px 13px;font-size:12px;line-height:1.5;color:var(--ink-deep)}
#demo .goal b{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.05em;font-family:var(--font-mono);color:var(--marigold-deep);margin-bottom:3px}
#demo .check{display:flex;gap:9px;align-items:flex-start;font-size:11.8px;line-height:1.45;color:var(--ink-soft);padding:1px 0}
#demo .check .ico{color:var(--ink-faint);margin-top:1px}
#demo .check.hit .ico{color:var(--mint-deep)}
@media(prefers-reduced-motion:no-preference){#demo .check.seq{opacity:0;animation:demoIn .22s ease-out forwards}}
#demo .reassure{display:flex;gap:9px;align-items:center;background:var(--d-green-1);border:1px solid var(--d-green-line);border-radius:var(--d-r-md);padding:10px 12px;font-size:11.5px;line-height:1.45;color:#15614a}
#demo .reassure .ico{color:var(--mint-deep)}

/* --- conversation --------------------------------------------------------- */
#demo .turnbar{display:flex;align-items:center;gap:7px;font:700 10px var(--font-mono);color:var(--ink-faint);text-transform:uppercase;letter-spacing:.05em}
#demo .turnbar u{flex:1;height:3px;background:var(--d-edge);border-radius:3px;text-decoration:none;overflow:hidden}
#demo .turnbar u b{display:block;height:100%;background:var(--marigold-deep);border-radius:3px;transition:width .7s cubic-bezier(.22,1,.36,1)}
#demo .who{display:flex;align-items:center;gap:10px}
#demo .face{border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--d-navy-1);display:block}
#demo .face.f42{width:42px;height:42px}
#demo .face.f52{width:52px;height:52px}
#demo .face.f56{width:56px;height:56px}
#demo .face.f88{width:88px;height:88px;border-radius:20px}
#demo .who b{font-size:12.5px;display:block;color:var(--ink)}
#demo .who .sub{display:inline-flex;align-items:center;gap:4px;font-size:10px;color:var(--ink-faint);font-weight:600}
#demo .turnline{display:flex;gap:8px;align-items:flex-end}
#demo .turnline.me{flex-direction:row-reverse}
#demo .bubble{max-width:82%;font-size:12.5px;line-height:1.55;padding:10px 13px;border-radius:15px;background:var(--paper-2);color:var(--ink);border-bottom-left-radius:5px}
#demo .turnline.me .bubble{background:var(--d-amber-2);color:var(--ink-deep);border-bottom-left-radius:15px;border-bottom-right-radius:5px}
@media(prefers-reduced-motion:no-preference){#demo .turnline.seq{opacity:0;animation:bubbleIn .28s cubic-bezier(.22,1,.36,1) forwards}}
@keyframes bubbleIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#demo .opt{display:flex;gap:10px;align-items:center;width:100%;text-align:left;background:var(--d-card);border:1.5px solid var(--d-edge);border-radius:var(--d-r-md);padding:11px 12px;font-size:12px;line-height:1.45;color:var(--ink);box-shadow:var(--d-shadow);transition:border-color .16s,box-shadow .16s,transform .16s}
#demo .opt em{font-style:normal;flex-shrink:0;width:21px;height:21px;border-radius:7px;background:var(--d-navy-1);color:var(--ink-soft);display:grid;place-items:center;font:700 10px var(--font-mono)}
#demo .opt span{flex:1;min-width:0}
#demo .opt .ico{color:var(--ink-faint);transition:color .16s,transform .16s}
#demo .opt:hover,#demo .opt:focus-visible{border-color:var(--d-amber-line);box-shadow:var(--d-shadow-lift);transform:translateY(-2px)}
#demo .opt:hover .ico{color:var(--marigold-deep);transform:translateX(2px)}
#demo .opt.chosen{border-color:var(--marigold-deep);border-width:2px;background:var(--d-amber-1)}
#demo .opt.chosen em{background:var(--marigold);color:var(--ink-deep)}
#demo .consequence{background:var(--d-card);border:1px solid var(--d-edge);border-left:2px solid var(--marigold-deep);border-radius:0 var(--d-r-md) var(--d-r-md) 0;padding:12px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--d-shadow)}
#demo .mood{display:inline-flex;align-items:center;gap:6px;font:700 10px var(--font-body);padding:5px 9px;border-radius:999px;align-self:flex-start}
#demo .mood.open{background:var(--d-green-1);color:var(--mint-deep)}
#demo .mood.neutral{background:var(--d-amber-2);color:var(--marigold-deep)}
#demo .mood.guarded{background:var(--d-navy-1);color:var(--ink-soft)}
#demo .principle{font-size:11.5px;line-height:1.55;color:var(--ink-soft);border-top:1px solid var(--d-edge);padding-top:9px;margin:0}
#demo .principle b{display:flex;align-items:center;gap:6px;color:var(--ink);font-size:10px;text-transform:uppercase;letter-spacing:.05em;font-family:var(--font-mono);margin-bottom:5px}

/* --- voice practice ------------------------------------------------------- */
#demo .voice{background:var(--d-card);border:1px dashed var(--d-edge);border-radius:var(--d-r-md);padding:13px;display:flex;flex-direction:column;gap:10px;align-items:center}
#demo .hold{width:100%;background:var(--ink);color:#fff;padding:12px;border-radius:12px;font:700 12px var(--font-body);display:flex;align-items:center;justify-content:center;gap:8px;touch-action:none;transition:background .16s,transform .1s}
#demo .hold:hover{background:var(--ink-2)}
#demo .hold.live{background:#b8392c}
#demo .hold .ico{transition:transform .12s}
@media(prefers-reduced-motion:no-preference){#demo .hold.live .ico{transform:scale(1.06)}}
#demo .wave{display:flex;align-items:center;justify-content:center;gap:10px;height:40px;color:var(--marigold-deep)}
#demo .wave .bars{display:flex;align-items:center;gap:3px;height:28px}
#demo .wave .bars i{width:3px;height:9px;border-radius:2px;background:var(--marigold-deep);display:block}
@media(prefers-reduced-motion:no-preference){
  #demo .wave .bars i{animation:waveTick .65s ease-in-out infinite}
  #demo .wave .bars i:nth-child(2){animation-delay:.13s}
  #demo .wave .bars i:nth-child(3){animation-delay:.26s}
  #demo .wave .bars i:nth-child(4){animation-delay:.39s}
  #demo .wave .bars i:nth-child(5){animation-delay:.52s}
}
@keyframes waveTick{0%,100%{height:9px}50%{height:26px}}
#demo .dots{display:inline-flex;gap:5px;align-items:center}
#demo .dots i{width:5px;height:5px;border-radius:50%;background:var(--marigold-deep);display:block;opacity:.25}
@media(prefers-reduced-motion:no-preference){
  #demo .dots i{animation:dotFade .9s ease-in-out infinite}
  #demo .dots i:nth-child(2){animation-delay:.3s}
  #demo .dots i:nth-child(3){animation-delay:.6s}
}
@keyframes dotFade{0%,100%{opacity:.22}45%{opacity:1}}
#demo .caption{font-size:11px;color:var(--ink-soft);text-align:center;min-height:16px;margin:0;display:flex;align-items:center;justify-content:center;gap:7px}
#demo .linkish{display:inline-flex;align-items:center;gap:5px;font:700 11px var(--font-body);color:var(--marigold-deep);padding:3px}
#demo .linkish:hover{color:var(--ink)}

/* --- feedback ------------------------------------------------------------- */
#demo .ringwrap{display:flex;flex-direction:column;align-items:center;gap:3px;padding:16px 0 6px}
#demo .ringwrap .ring{position:relative;width:132px;height:132px}
#demo .ringwrap .ring svg{width:100%;height:100%;transform:rotate(-90deg)}
#demo .ringwrap .ring circle{fill:none;stroke-width:9;stroke-linecap:round}
#demo .ringwrap .ring .track{stroke:var(--d-edge)}
#demo .ringwrap .ring .bar{stroke:var(--marigold-deep);transition:stroke-dashoffset .9s cubic-bezier(.22,1,.36,1)}
#demo .ringwrap .ring .mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
#demo .ringwrap .ring .mid b{font:800 38px var(--font-display);color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
#demo .ringwrap .ring .mid small{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;font-family:var(--font-mono);color:var(--ink-faint)}
#demo .skillbar{display:flex;align-items:center;gap:9px}
#demo .skillbar .holder{width:26px;height:26px;border-radius:8px;background:var(--d-navy-1);color:var(--ink);display:grid;place-items:center;flex-shrink:0}
#demo .skillbar .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
#demo .skillbar .spread{font-size:11px;color:var(--ink-soft);font-weight:600}
#demo .skillbar .spread b{font:700 11.5px var(--font-mono);color:var(--ink);font-variant-numeric:tabular-nums}
#demo .skillbar u{display:block;height:6px;background:var(--d-edge);border-radius:6px;overflow:hidden;text-decoration:none}
#demo .skillbar u i{display:block;height:100%;width:0;background:var(--marigold-deep);border-radius:6px;transition:width .7s cubic-bezier(.22,1,.36,1)}
#demo .skillbar.up u i{background:var(--mint-deep)}
@media(prefers-reduced-motion:no-preference){#demo .skillbar.up{animation:okFlash 1.1s ease-out}}
@keyframes okFlash{0%,100%{box-shadow:0 0 0 0 rgba(31,138,104,0)}25%{box-shadow:0 0 0 3px rgba(31,138,104,.22)}}
#demo .tipcard{display:flex;gap:10px;align-items:flex-start;background:var(--d-amber-1);border:1px solid var(--d-amber-line);border-left:2px solid var(--marigold-deep);border-radius:0 var(--d-r-md) var(--d-r-md) 0;padding:12px;font-size:11.8px;line-height:1.55;color:var(--ink-deep)}
#demo .tipcard b,#demo .wellcard b{display:block;font:700 10px var(--font-mono);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
#demo .tipcard b{color:var(--marigold-deep)}
#demo .wellcard{display:flex;gap:10px;align-items:flex-start;background:var(--d-green-1);border:1px solid var(--d-green-line);border-left:2px solid var(--mint-deep);border-radius:0 var(--d-r-md) var(--d-r-md) 0;padding:12px;font-size:11.8px;line-height:1.55;color:#15614a}
#demo .wellcard b{color:var(--mint-deep)}
@media(prefers-reduced-motion:no-preference){#demo .tipcard.seq,#demo .wellcard.seq{opacity:0;animation:demoIn .24s ease-out forwards}}
#demo .disclaim{display:flex;gap:8px;align-items:flex-start;font-size:10.5px;line-height:1.5;color:var(--ink-faint);background:var(--d-navy-1);border-radius:10px;padding:9px 11px}

/* --- buttons -------------------------------------------------------------- */
#demo .btn-row{display:flex;flex-direction:column;gap:8px;margin-top:4px}
#demo .btn{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;padding:13px;border-radius:12px;font:700 12px var(--font-body);transition:transform .16s,box-shadow .16s,background .16s}
#demo .btn:hover,#demo .btn:focus-visible{transform:translateY(-2px);box-shadow:var(--d-shadow-lift)}
#demo .btn.solid{background:var(--ink);color:#fff}
#demo .btn.gold{background:var(--marigold);color:var(--ink-deep)}
#demo .btn.quiet{background:transparent;color:var(--ink-soft);box-shadow:inset 0 0 0 1px var(--d-edge)}
#demo .btn[disabled]{opacity:.45;pointer-events:none}
#demo button{transition:transform .1s ease-out}
#demo button:active{transform:scale(.97)}
#demo .opt:active,#demo .node:active,#demo .stat:active,#demo .btn:active,#demo .paytile:active{transform:translateY(-1px) scale(.978)}
@media(prefers-reduced-motion:reduce){#demo button:active,#demo .opt:active,#demo .node:active,#demo .stat:active,#demo .btn:active,#demo .paytile:active{transform:none}}

/* --- result --------------------------------------------------------------- */
#demo .trophy{width:66px;height:66px;border-radius:50%;background:var(--marigold);color:var(--ink-deep);display:grid;place-items:center;margin:2px auto 0;position:relative}
#demo .spark{position:absolute;color:var(--marigold-deep);opacity:0}
#demo .spark.s1{top:-6px;right:-12px}
#demo .spark.s2{bottom:0;left:-14px}
@media(prefers-reduced-motion:no-preference){#demo .trophy.pop{animation:popUp .42s cubic-bezier(.34,1.4,.64,1)}#demo .trophy.pop .spark{animation:sparkFade .7s ease-out .12s}}
@keyframes popUp{0%{transform:scale(.85)}60%{transform:scale(1.05)}100%{transform:scale(1)}}
@keyframes sparkFade{0%{opacity:0;transform:scale(.6)}40%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.1)}}
#demo .rrow{display:flex;align-items:center;gap:10px;background:var(--d-card);border:1px solid var(--d-edge);border-radius:var(--d-r-md);padding:11px 12px;box-shadow:var(--d-shadow)}
#demo .rrow .holder{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;background:var(--d-navy-1);color:var(--ink)}
#demo .rrow .holder.amber{background:var(--d-amber-2);color:var(--marigold-deep)}
#demo .rrow .holder.green{background:var(--d-green-1);color:var(--mint-deep)}
#demo .rrow .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
#demo .rrow .txt b{font-size:12px;color:var(--ink)}
#demo .rrow .txt small{font-size:10px;color:var(--ink-faint)}
#demo .rrow .val{font:800 13px var(--font-body);color:var(--marigold-deep);font-variant-numeric:tabular-nums;flex-shrink:0}
@media(prefers-reduced-motion:no-preference){#demo .rrow{opacity:0;transform:translateY(8px);transition:opacity .22s ease-out,transform .22s ease-out}}
#demo .rrow.in{opacity:1;transform:none}
#demo .bar{height:7px;background:var(--d-edge);border-radius:10px;overflow:hidden}
#demo .bar i{display:block;height:100%;background:var(--marigold-deep);border-radius:10px;width:0;transition:width .7s cubic-bezier(.22,1,.36,1)}
@media(prefers-reduced-motion:no-preference){
  #demo .pnode.justdone .ring{animation:popUp .42s cubic-bezier(.34,1.4,.64,1)}
  #demo .pnode.justopen .ring{animation:unlockTip .42s ease-out}
}
@keyframes unlockTip{0%{transform:rotate(0)}45%{transform:rotate(-8deg)}100%{transform:rotate(0)}}

/* --- route (learn) -------------------------------------------------------- */
#demo .route{position:relative;display:flex;flex-direction:column;gap:2px;padding-left:2px}
#demo .rstep{display:flex;gap:12px;align-items:stretch;width:100%;text-align:left;background:none;padding:0}
#demo .rstep .rail{position:relative;width:36px;flex-shrink:0;display:flex;justify-content:center}
#demo .rstep .rail:before,#demo .rstep .rail:after{content:'';position:absolute;left:50%;width:2px;margin-left:-1px;background:var(--d-edge)}
#demo .rstep .rail:before{top:0;height:12px}
#demo .rstep .rail:after{top:48px;bottom:0}
#demo .rstep:first-child .rail:before{display:none}
#demo .rstep:last-child .rail:after{display:none}
#demo .rstep.done .rail:after,#demo .rstep.done .rail:before{background:var(--mint-deep)}
#demo .rstep.now .rail:before{background:var(--mint-deep)}
#demo .rdot{position:relative;z-index:1;width:36px;height:36px;border-radius:50%;background:var(--d-card);border:2px solid var(--d-edge);color:var(--ink-faint);display:grid;place-items:center;margin-top:12px}
#demo .rstep.done .rdot{background:var(--d-green-1);border-color:var(--mint-deep);color:var(--mint-deep)}
#demo .rstep.now .rdot{background:var(--marigold);border-color:var(--marigold-deep);color:var(--ink-deep)}
#demo .rstep .rbody{flex:1;min-width:0;background:var(--d-card);border:1px solid var(--d-edge);border-radius:var(--d-r-md);box-shadow:var(--d-shadow);padding:11px 12px;margin:6px 0;display:flex;align-items:center;gap:9px;transition:border-color .16s,transform .16s,box-shadow .16s}
#demo .rstep:hover .rbody,#demo .rstep:focus-visible .rbody{border-color:var(--d-amber-line);transform:translateY(-2px);box-shadow:var(--d-shadow-lift)}
#demo .rstep.locked .rbody{background:transparent;box-shadow:none;border-style:dashed}
#demo .rstep .rbody .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
#demo .rstep .rbody b{font-size:12.5px;color:var(--ink)}
#demo .rstep .rbody small{font-size:10px;color:var(--ink-faint)}
#demo .cohort{background:var(--ink);color:#fff;border-radius:var(--d-r-lg);padding:14px;display:flex;flex-direction:column;gap:9px}
#demo .cohort b{font-size:13px}
#demo .cohort p{font-size:11px;line-height:1.5;color:var(--muted-onDark);margin:0}
#demo .cohort .bar{background:rgba(255,255,255,.16)}
#demo .cohort .bar i{background:var(--marigold)}
#demo .cohort .num{font:700 11.5px var(--font-mono);color:var(--marigold);font-variant-numeric:tabular-nums}

/* --- mentors -------------------------------------------------------------- */
#demo .mentor{display:flex;flex-direction:column;align-items:stretch;gap:9px;width:100%;text-align:left;background:var(--d-card);border:1px solid var(--d-edge);border-radius:var(--d-r-md);padding:11px;box-shadow:var(--d-shadow);transition:border-color .16s,transform .16s,box-shadow .16s}
#demo .mentor:hover,#demo .mentor:focus-visible{border-color:var(--d-amber-line);transform:translateY(-2px);box-shadow:var(--d-shadow-lift)}
#demo .mentor .m-head{display:flex;align-items:center;gap:11px}
#demo .mentor .m-chips{display:flex;flex-wrap:wrap;gap:6px}
#demo .mentor .m-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
#demo .mentor .m-t b{font-size:12.5px;display:flex;align-items:center;gap:5px}
#demo .mentor .m-t small{font-size:10px;color:var(--ink-faint)}
#demo .mentor .m-t .row{gap:5px}
#demo .rate{display:inline-flex;align-items:center;gap:3px;font:700 11px var(--font-body);color:var(--ink)}
#demo .rate .ico{color:var(--marigold-deep);fill:var(--marigold);stroke:var(--marigold-deep)}
#demo .credit-pill{display:inline-flex;align-items:center;gap:6px;background:var(--ink);color:#fff;font:700 10.5px var(--font-body);padding:6px 11px;border-radius:999px}
#demo .credit-pill b{color:var(--marigold);font-family:var(--font-mono)}
@media(prefers-reduced-motion:no-preference){#demo .credit-pill.earned{animation:flipIn .5s ease-out}}
@keyframes flipIn{0%{transform:rotateY(0)}100%{transform:rotateY(180deg)}}

/* --- payment tiles -------------------------------------------------------- */
#demo .paygrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
#demo .paytile{position:relative;background:#fff;border:1px solid var(--d-edge);border-radius:var(--d-r-md);padding:13px 10px 11px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:88px;transition:border-color .16s,transform .16s,box-shadow .16s}
#demo .paytile:hover,#demo .paytile:focus-visible{transform:translateY(-2px);box-shadow:var(--d-shadow-lift)}
#demo .paytile img{height:27px;width:auto;max-width:78%;object-fit:contain;display:block}
#demo .paytile .cred{width:34px;height:34px;border-radius:50%;background:var(--d-amber-2);color:var(--marigold-deep);display:grid;place-items:center}
#demo .paytile span{font:700 10.5px var(--font-body);color:var(--ink-soft);text-align:center;line-height:1.3}
#demo .paytile.on{border-color:var(--marigold-deep);border-width:2px;padding:12px 9px 10px}
#demo .paytile .pick{position:absolute;top:6px;right:6px;color:var(--mint-deep);opacity:0;transform:scale(.7);transition:opacity .16s,transform .16s}
#demo .paytile.on .pick{opacity:1;transform:none}
#demo .paytile[disabled]{opacity:.5;pointer-events:none}
#demo .payline{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--d-card);border:1px solid var(--d-edge);border-radius:var(--d-r-md);padding:11px 13px;box-shadow:var(--d-shadow)}
#demo .payline .amt{font:800 16px var(--font-body);color:var(--marigold-deep)}

/* --- jobs ----------------------------------------------------------------- */
#demo .job{display:flex;gap:11px;align-items:center;width:100%;text-align:left;background:var(--d-card);border:1px solid var(--d-edge);border-radius:var(--d-r-md);padding:12px;box-shadow:var(--d-shadow);transition:border-color .16s,transform .16s,box-shadow .16s}
#demo .job:hover,#demo .job:focus-visible{border-color:var(--d-amber-line);transform:translateY(-2px);box-shadow:var(--d-shadow-lift)}
#demo .job.locked{background:transparent;border-style:dashed;box-shadow:none}
#demo .job .rolei{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex-shrink:0;background:var(--d-navy-1);color:var(--ink)}
#demo .job.locked .rolei{color:var(--ink-faint)}
#demo .job .j-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
#demo .job .j-t > .chip{align-self:flex-start}
#demo .job .j-t b{font-size:12.5px;color:var(--ink)}
#demo .job .j-t .row{gap:4px}
#demo .job .j-t small{display:inline-flex;align-items:center;gap:3px;font-size:10px;color:var(--ink-faint)}
#demo .mring{position:relative;width:42px;height:42px;flex-shrink:0}
#demo .mring svg{width:100%;height:100%;transform:rotate(-90deg)}
#demo .mring circle{fill:none;stroke-width:4;stroke-linecap:round}
#demo .mring .track{stroke:var(--d-edge)}
#demo .mring .bar{stroke:var(--marigold-deep)}
#demo .mring.lock .bar{stroke:var(--ink-faint)}
#demo .mring em{position:absolute;inset:0;display:grid;place-items:center;font:700 10.5px var(--font-mono);font-style:normal;color:var(--ink);font-variant-numeric:tabular-nums}

/* --- passport / profile --------------------------------------------------- */
#demo .passhead{display:flex;align-items:center;gap:12px;background:var(--ink);color:#fff;border-radius:var(--d-r-lg);padding:14px}
#demo .passhead .p-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
#demo .passhead b{font:800 15px var(--font-body)}
#demo .passhead small{font-size:10.5px;color:var(--muted-onDark)}
#demo .passhead .seal{width:38px;height:38px;border-radius:11px;background:rgba(245,166,35,.18);color:var(--marigold);display:grid;place-items:center;flex-shrink:0}
#demo .skill{display:flex;flex-direction:column;gap:7px;background:var(--d-card);border:1px solid var(--d-edge);border-radius:var(--d-r-md);padding:11px 12px;box-shadow:var(--d-shadow)}
#demo .skill.verified{border-left:2px solid var(--mint-deep)}
#demo .skill .spread b{font-size:12px}
#demo .skill .spread .pc{font:700 12px var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink)}
#demo .skill u{display:block;height:6px;background:var(--d-edge);border-radius:6px;overflow:hidden;text-decoration:none}
#demo .skill u i{display:block;height:100%;background:var(--marigold-deep);border-radius:6px}
#demo .skill.verified u i{background:var(--mint-deep)}
#demo .tiers{display:flex;gap:4px;flex-wrap:wrap}
#demo .tier{display:inline-flex;align-items:center;gap:4px;font:700 9.4px var(--font-body);padding:4px 7px;border-radius:999px;background:var(--d-bg);color:var(--ink-faint);box-shadow:inset 0 0 0 1px var(--d-edge)}
#demo .tier.on{background:var(--d-green-1);color:var(--mint-deep);box-shadow:inset 0 0 0 1px var(--d-green-line)}
#demo .tier.on.t1{background:var(--d-navy-1);color:var(--ink-soft);box-shadow:inset 0 0 0 1px var(--d-edge)}
#demo .tier.on.t2{background:var(--d-amber-2);color:var(--marigold-deep);box-shadow:none}
#demo .tier.on.t4{background:var(--ink);color:#fff;box-shadow:none}
#demo .note{background:var(--d-navy-1);border-radius:11px;padding:10px 11px;font-size:10.5px;line-height:1.5;color:var(--ink-soft);display:flex;gap:8px;align-items:flex-start}

/* --- bottom navigation ---------------------------------------------------- */
#demo .app-nav button{position:relative;gap:4px;font-size:9.6px;font-weight:700;padding-top:3px}
#demo .app-nav .navi{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;transition:background .16s,color .16s,transform .16s}
#demo .app-nav button.selected .navi{background:var(--marigold);color:var(--ink-deep)}
@media(prefers-reduced-motion:no-preference){#demo .app-nav button.selected .navi{animation:navPop .16s ease-out}}
@keyframes navPop{from{transform:scale(.82)}to{transform:scale(1)}}

/* --- Bangla and longer labels need room in a 380px frame ------------------ */

/* ===== Bangla =====
   One rule, applied through the token. The Bangla face has taller counters, so
   mono letter-spacing and uppercase are dropped wherever it takes over. */
body.lang-bn,[lang="bn"]{font-family:var(--font-bangla)}
body.lang-bn h1,body.lang-bn h2,body.lang-bn h3,body.lang-bn h4,
[lang="bn"] h1,[lang="bn"] h2,[lang="bn"] h3,[lang="bn"] h4{font-family:var(--font-bangla);letter-spacing:0;line-height:1.3}
body.lang-bn .kicker,body.lang-bn .eyebrow,body.lang-bn .tag,body.lang-bn .pj-stage,
body.lang-bn .scr-aud,body.lang-bn .td2-count,body.lang-bn .houses-count,body.lang-bn .houses-foot,
body.lang-bn .md-sel > span,body.lang-bn .md-tag,body.lang-bn .td-lab,body.lang-bn .td2-field > span,
body.lang-bn .ro-pill,body.lang-bn .lg,body.lang-bn .auth-flag,body.lang-bn .field > span,
body.lang-bn .house-tag,body.lang-bn .metrics .wide span{font-family:var(--font-bangla);text-transform:none;letter-spacing:.005em}
body.lang-bn .hero h1{font-size:clamp(32px,3.9vw,54px)}
body.lang-bn .rotator{min-height:1.32em}
body.lang-bn #demo .scr h3{font-size:18px;line-height:1.35}
body.lang-bn #demo .pnode em{font-size:8px}