/* =========================================================
   SurePath4Success — Homepage
   Design system: bright premium EdTech · indigo core, warm accents
   ========================================================= */

:root{
  --ink:#171A3D;
  --ink-soft:#3D4270;
  --indigo:#4338CA;
  /* Text-only accent. Same colour as --indigo in light mode; dark mode
     lightens this one alone, leaving gradients and chip fills untouched. */
  --accent:#4338CA;
  /* Fill-safe brand colours. --violet and --cyan get lightened in dark so
     they are readable AS TEXT; these two stay deep for the handful of
     gradients and badges that put WHITE TEXT on them, which need the
     opposite treatment. */
  --violet-deep:#7C3AED;
  --cyan-deep:#06B6D4;
  /* Text-safe accents, the light-mode mirror of --accent. The bright brand
     colours are for fills; as words on a white page they sit at 2.3-2.6:1.
     These are the same hues taken down to where they can be read. */
  --accent-orange:#C2410C;   /* 5.2:1 on white */
  --accent-green:#15803D;    /* 5.0:1 */
  --accent-cyan:#0E7490;     /* 5.4:1 */
  --violet:#7C3AED;
  --blue:#2563EB;
  --cyan:#06B6D4;
  --orange:#FF7A1A;
  --yellow:#FFC53D;
  --green:#22C55E;
  --bg:#F6F7FE;
  --bg-2:#EEF1FD;
  --card:#FFFFFF;
  --line:#E4E7F6;
  /* The ramp ends at a deepened teal, not #06B6D4. White text sits on this in
     ten places - the primary button, the timeline pill, the step numbers - and
     white on the old bright cyan measured 2.43:1. #0E7490 carries it at 5.4:1
     while still reading as the same indigo-violet-teal sweep. */
  --grad:linear-gradient(94deg,var(--indigo),var(--violet) 55%,#0E7490);
  /* Same ramp, but for text painted with background-clip. Kept separate so
     dark mode can lighten the lettering without lightening the buttons that
     use --grad as a fill behind white text. */
  --grad-text:linear-gradient(94deg,var(--indigo),var(--violet) 55%,var(--cyan));
  --sh-sm:0 2px 10px rgba(23,26,61,.06);
  --sh-md:0 10px 30px rgba(23,26,61,.10);
  --sh-lg:0 24px 60px rgba(23,26,61,.16);
  --r-sm:12px; --r-md:20px; --r-lg:28px;
  --font-d:"Sora",sans-serif;
  --font-b:"Inter",system-ui,sans-serif;
  --font-h:"Caveat",cursive;
  --nav-h:72px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-b);
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--font-d);line-height:1.15;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,5.6vw,3.9rem);font-weight:800;letter-spacing:-.02em}
h2{font-size:clamp(1.6rem,3.6vw,2.6rem);font-weight:800;letter-spacing:-.015em}
h3{font-size:1.15rem;font-weight:700}
p{margin:0 0 1em}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}

.skip-link{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:200;border-radius:0 0 10px 0}
.skip-link:focus{left:0}

.container{width:min(1180px,92%);margin-inline:auto}
.container.narrow{width:min(820px,92%)}
.section{padding:clamp(3.5rem,8vw,6.5rem) 0;position:relative}
.center{text-align:center;justify-content:center}
.lead{font-size:1.06rem;color:var(--ink-soft);max-width:52ch}

/* ---------- Text accents ---------- */
.eyebrow{
  display:inline-block;font-weight:700;font-size:.82rem;letter-spacing:.06em;
  color:var(--accent);background:#fff;border:1.5px solid var(--line);
  padding:.4rem .9rem;border-radius:999px;box-shadow:var(--sh-sm);margin-bottom:1rem;
}
.hl-grad{
  background:var(--grad-text);background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:gradshift 6s ease-in-out infinite alternate;
}
@keyframes gradshift{to{background-position:100% 50%}}
section[id],footer[id]{scroll-margin-top:92px}
.hl-marker{
  background:linear-gradient(180deg,transparent 58%,rgba(255,197,61,.75) 58% 92%,transparent 92%);
  padding:0 .1em;border-radius:4px;
}
.hl-y{color:var(--yellow)}
/*
  The line that changes has to stay one line.

  "Discover your <word>." cycles through path, stream, career, college and
  future, and at the h1's own size the longest of them does not fit the hero
  column - 718px of text in 594px on a desktop, 362 in 345 on a phone. So the
  word dropped to a line of its own whenever it came round, the heading grew a
  fourth line, and everything under it jumped. nowrap makes a break
  impossible; the smaller size is what makes nowrap safe. Measured against the
  longest word with headroom to spare: 3% on a desktop column, 7% on a phone.

  If a longer word is ever added to the list in script.js, check it still fits.
*/
/*
  Sized against the column, not the viewport.

  A share of the h1 alone is not enough: between about 950px and 1100px the
  hero is still two columns while the heading is near its largest, so the copy
  column narrows to 471px against a 46px h1 and the line ran 12% past its own
  column. The text is about 11.5em wide at its longest, so 8.3cqw - 8.3% of
  the column, with headroom - is the size at which it always fits, whatever
  the layout is doing. min() keeps it from ever growing past its share of the
  heading. The plain .8em first is the fallback for anything without container
  queries; there it behaves as it did before.
*/
.hl-path{position:relative;display:inline-block;color:var(--accent);
  white-space:nowrap;font-size:.8em;font-size:min(.8em,8.3cqw)}
.scribble{position:absolute;left:0;bottom:-.28em;width:100%;height:.42em;color:var(--orange)}
.scribble path{stroke-dasharray:340;stroke-dashoffset:340;animation:draw 1.1s .5s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-family:var(--font-d);
  font-size:.95rem;padding:.8rem 1.5rem;border-radius:999px;border:2px solid transparent;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s,background .25s;
  will-change:transform;
}
.btn .arrow{transition:transform .25s;display:inline-block}
.btn:hover .arrow{transform:translateX(5px)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-primary{
  background:var(--grad);background-size:160% auto;color:#fff;
  box-shadow:0 8px 22px rgba(67,56,202,.35);position:relative;overflow:hidden;
}
.btn-primary:hover{box-shadow:0 14px 30px rgba(67,56,202,.5);background-position:90% 50%}
/* auto shine sweep */
.btn-primary::after{
  content:"";position:absolute;top:-10%;bottom:-10%;left:-45%;width:34%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);animation:shine 3.6s ease-in-out infinite;pointer-events:none;
}
@keyframes shine{0%,58%{left:-45%}82%,100%{left:135%}}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--ink);box-shadow:var(--sh-sm)}
.btn-ghost:hover{border-color:var(--indigo);color:var(--indigo);background:#F3F5FF;box-shadow:0 6px 16px rgba(67,56,202,.14)}
.btn-light{background:#fff;color:var(--indigo);box-shadow:0 10px 26px rgba(0,0,0,.22)}
.btn-outline{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.btn-outline:hover{border-color:#fff}
.btn-dark{background:var(--ink);color:#fff}
.btn-lg{padding:1rem 1.9rem;font-size:1.02rem}
.btn-sm{padding:.55rem 1.05rem;font-size:.85rem}
.btn-block{width:100%;justify-content:center}
.pulse{animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 8px 22px rgba(67,56,202,.35)}50%{box-shadow:0 8px 22px rgba(67,56,202,.35),0 0 0 9px rgba(124,58,237,.12)}}

/* ---------- Topbar & Nav ---------- */
.topbar{background:var(--ink);color:#fff;text-align:center;font-size:.82rem;padding:.45rem 1rem}
.topbar p{margin:0}

.nav{
  position:sticky;top:0;z-index:100;height:var(--nav-h);
  background:rgba(246,247,254,.75);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:height .3s,background .3s,border-color .3s,box-shadow .3s;
}
.nav.scrolled{height:60px;background:rgba(255,255,255,.85);border-color:var(--line);box-shadow:var(--sh-sm)}
.scroll-progress{
  position:absolute;left:0;bottom:-1px;height:3px;width:0;z-index:2;
  background:var(--grad);border-radius:0 3px 3px 0;transition:width .1s linear;
}
.nav-inner{width:min(1240px,94%);margin-inline:auto;height:100%;display:flex;align-items:center;gap:1.4rem}
.brand{display:flex;align-items:center;gap:.55rem;font-family:var(--font-d);font-weight:800;font-size:1.12rem}
/*
  The brand mark is the institute's own crest now, not an abstract compass.
  It arrives as a PNG on a solid white ground, so the tile is white rather than
  the theme gradient - and it is not tilted, because a crest that reads as a
  seal should sit straight. The wordmark beside it carries the name, which is
  why the crest can be this small without the ribbon text needing to be legible.
*/
.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  background:#fff;border:1px solid var(--line);overflow:hidden;transition:transform .35s}
.brand-mark img{width:100%;height:100%;object-fit:contain;padding:2px}
.brand:hover .brand-mark{transform:scale(1.06)}
/* On the dark footer the white tile is the point: the crest's teal and gold
   need a light ground or they disappear into it. */
.brand.light .brand-mark{border-color:rgba(255,255,255,.28)}
.brand-name em{font-style:normal;color:var(--accent-orange)}
.brand.light{color:#fff}
.nav-links{display:flex;gap:1.35rem;margin-inline:auto;font-weight:600;font-size:.9rem;color:var(--ink-soft)}
.nav-links a{position:relative;padding:.3rem 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2.5px;border-radius:3px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-cta{display:flex;gap:.6rem}
.hamburger{display:none;background:none;border:0;width:44px;height:44px;flex-direction:column;justify-content:center;gap:5px;align-items:center;margin-left:auto}
.hamburger span{width:24px;height:2.6px;border-radius:3px;background:var(--ink);transition:transform .35s,opacity .25s}
.hamburger.open span:nth-child(1){transform:translateY(7.6px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7.6px) rotate(-45deg)}

/* Drawer */
.drawer{
  position:fixed;inset:0 0 0 auto;width:min(340px,88%);z-index:120;background:#fff;
  padding:calc(var(--nav-h) + 1.4rem) 1.4rem 1.4rem;display:flex;flex-direction:column;gap:1rem;
  transform:translateX(105%);transition:transform .42s cubic-bezier(.32,.72,0,1);
  box-shadow:-20px 0 60px rgba(23,26,61,.18);overflow-y:auto;
}
.drawer.open{transform:none}
.drawer-links{display:flex;flex-direction:column;gap:.3rem}
.drawer-links a{
  display:flex;flex-direction:column;font-weight:700;font-family:var(--font-d);font-size:1rem;
  padding:.75rem .9rem;border-radius:var(--r-sm);transition:background .2s;
}
.drawer-links a i{font:500 .78rem/1.4 var(--font-b);color:var(--ink-soft)}
.drawer-links a:hover{background:var(--bg-2)}
.drawer-cta{margin-top:auto;display:flex;flex-direction:column;gap:.6rem}
.drawer-backdrop{position:fixed;inset:0;z-index:110;background:rgba(23,26,61,.42);backdrop-filter:blur(2px);opacity:0;transition:opacity .35s}
.drawer-backdrop.show{opacity:1}

/* ---------- Hero ---------- */
.hero{position:relative;padding:clamp(2.4rem,5vw,4.5rem) 0 0;overflow:hidden}
.hero-bg{position:absolute;inset:0;pointer-events:none}
.hero-bg::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(620px 420px at 86% 8%, rgba(124,58,237,.16), transparent 62%),
    radial-gradient(520px 400px at 6% 24%, rgba(6,182,212,.15), transparent 62%),
    radial-gradient(540px 440px at 72% 82%, rgba(255,122,26,.10), transparent 65%),
    radial-gradient(440px 320px at 22% 92%, rgba(34,197,94,.10), transparent 62%);
}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.35}
.blob-1{width:480px;height:480px;background:#C7D2FE;top:-160px;right:-120px;animation:drift 14s ease-in-out infinite alternate}
.blob-2{width:380px;height:380px;background:#FDE9CF;bottom:-140px;left:-120px;animation:drift 18s ease-in-out infinite alternate-reverse}
@keyframes drift{to{transform:translate(50px,40px) scale(1.08)}}
.dot-grid{
  position:absolute;inset:0;
  background-image:radial-gradient(rgba(67,56,202,.14) 1.3px,transparent 1.3px);
  background-size:26px 26px;
  mask-image:radial-gradient(ellipse 75% 65% at 50% 35%,#000 30%,transparent 75%);
  animation:gridmove 26s linear infinite;
}
@keyframes gridmove{to{background-position:52px 26px}}

/* The heading measures itself against this column - see .hl-path. */
.hero-copy{container-type:inline-size}
.hero-inner{
  width:min(1180px,92%);margin-inline:auto;position:relative;
  display:grid;grid-template-columns:1.05fr .95fr;gap:2rem;align-items:center;
}
.hero-sub{font-size:1.08rem;color:var(--ink-soft);max-width:48ch;margin-top:.4rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.5rem 0 1.1rem}
.hero-trust{display:flex;flex-wrap:wrap;gap:.5rem}
.chip-mini{font-size:.78rem;font-weight:600;background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:.32rem .75rem;color:var(--ink-soft)}

/* Career universe */
.hero-visual{display:grid;place-items:center;min-height:480px}
.universe{position:relative;width:min(480px,100%);aspect-ratio:1}
.orbit-rings{position:absolute;inset:0}
.ring{fill:none;stroke:#CBD3F5;stroke-width:1.6}
.ring-dash{stroke-dasharray:5 9}
.compass{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:3}
.compass-face{
  width:132px;height:132px;border-radius:50%;background:#fff;box-shadow:var(--sh-lg);
  display:grid;place-items:center;padding:14px;border:5px solid #EDEFFC;
}
.compass-svg .cface{fill:#F4F6FF;stroke:#D9DEF7;stroke-width:2}
.needle{transform-origin:50% 50%;transition:transform .6s cubic-bezier(.2,.8,.3,1)}
.n-north{fill:var(--orange)} .n-south{fill:#B9C1E8} .c-pin{fill:var(--ink)}
.compass-tag{
  position:absolute;bottom:calc(50% - 96px);font:700 .8rem var(--font-d);
  background:var(--ink);color:#fff;padding:.22rem .8rem;border-radius:999px;
}
.orbit{position:absolute;inset:0;animation:spin 46s linear infinite}
.orbit-b{animation-duration:70s;animation-direction:reverse}
@keyframes spin{to{rotate:360deg}}
.planet{
  position:absolute;translate:-50% -50%;width:max-content;
  background:#fff;border:1.5px solid var(--line);border-radius:999px;
  padding:.45rem .85rem;font:600 .82rem var(--font-b);box-shadow:var(--sh-md);
  white-space:nowrap;transition:scale .25s,box-shadow .25s;
  animation:counterspin 46s linear infinite;
}
.orbit-b .planet{animation-duration:70s;animation-direction:reverse}
@keyframes counterspin{to{rotate:-360deg}}
/* inner ring (r ≈ 28%) at diagonals */
.orbit-a .planet[style*="--i:0"]{left:69.8%;top:30.2%}
.orbit-a .planet[style*="--i:1"]{left:69.8%;top:69.8%}
.orbit-a .planet[style*="--i:2"]{left:30.2%;top:69.8%}
.orbit-a .planet[style*="--i:3"]{left:30.2%;top:30.2%}
/* outer ring (r ≈ 41%) at cardinals */
.orbit-b .planet[style*="--i:0"]{left:50%;top:9%}
.orbit-b .planet[style*="--i:1"]{left:91%;top:50%}
.orbit-b .planet[style*="--i:2"]{left:50%;top:91%}
.orbit-b .planet[style*="--i:3"]{left:9%;top:50%}
.planet:hover{scale:1.12;box-shadow:var(--sh-lg);z-index:5}
.match-badge{
  position:absolute;right:2%;bottom:8%;z-index:4;background:#fff;border-radius:var(--r-md);
  box-shadow:var(--sh-lg);padding:.7rem 1.1rem;display:flex;flex-direction:column;line-height:1.15;
  border:1.5px solid var(--line);animation:bob 4.5s ease-in-out infinite;
}
.match-badge b{font:800 1.4rem var(--font-d);color:var(--accent-green)}
.match-badge span{font-size:.72rem;color:var(--ink-soft);font-weight:600}
@keyframes bob{50%{transform:translateY(-9px)}}

/* Marquee */
.marquee{margin-top:clamp(1.6rem,4vw,3rem);border-block:1.5px solid var(--line);background:#fff;overflow:hidden;padding:.75rem 0;mask-image:linear-gradient(90deg,transparent,#000 8% 92%,transparent)}
.marquee-track{display:flex;gap:1.6rem;width:max-content;animation:marquee 34s linear infinite;font:700 .9rem var(--font-d);color:var(--ink-soft)}
.marquee-half{display:flex;gap:1.6rem}
.marquee-track span:nth-child(even){color:var(--accent-orange)}
@keyframes marquee{to{transform:translateX(-50%)}}
.marquee:hover .marquee-track{animation-play-state:paused}

/* ---------- Confusion ---------- */
.confusion{background:#fff}
.chat-stack{display:flex;flex-direction:column;gap:.85rem;margin:1.4rem 0 2.2rem}
.cbubble{
  max-width:75%;padding:.85rem 1.2rem;border-radius:20px;font-weight:600;font-size:1rem;
  background:var(--bg-2);box-shadow:var(--sh-sm);
}
.cbubble.left{align-self:flex-start;border-bottom-left-radius:6px}
.cbubble.right{align-self:flex-end;border-bottom-right-radius:6px;background:#EDE6FD}
.cbubble.big{font-size:1.1rem;background:#FFF1E2}
.confusion-turn{text-align:center;padding-top:.6rem}
.path-arrow{width:74px;color:var(--orange);margin:0 auto 1rem}
.path-arrow path{animation:dashflow 1.4s linear infinite}
@keyframes dashflow{to{stroke-dashoffset:-11}}

/* ---------- Journey cards ---------- */
.sec-head{max-width:720px;margin-bottom:2.4rem}
.sec-head.row{display:flex;align-items:end;justify-content:space-between;gap:1rem;max-width:none;flex-wrap:wrap}
.journey-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
/* Two-up rather than four, for the pages that want it. Deliberately here,
   above the breakpoints, so 920px and 640px still narrow it. */
.jg-2{grid-template-columns:repeat(2,1fr)}
.jcard{
  position:relative;background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-lg);
  padding:1.6rem 1.4rem 1.4rem;display:flex;flex-direction:column;gap:.45rem;overflow:hidden;
  box-shadow:var(--sh-sm);transition:transform .35s,box-shadow .35s,border-color .35s;
}
.jcard::before{content:"";position:absolute;inset:auto -30% -55% -30%;height:70%;background:radial-gradient(closest-side,color-mix(in srgb,var(--jc) 22%,transparent),transparent);opacity:0;transition:opacity .4s}
.jcard:hover{transform:translateY(-8px);box-shadow:var(--sh-lg),0 0 0 4px color-mix(in srgb,var(--jc) 16%,transparent);border-color:var(--jc)}
.jcard:hover::before{opacity:1}
.jnum{font:800 .85rem var(--font-d);color:color-mix(in srgb,var(--jc) 60%,#171A3D);letter-spacing:.1em}
.jemoji{font-size:2rem;transition:transform .35s}
.jcard:hover .jemoji{transform:scale(1.2) rotate(-8deg)}
.jcard p{font-size:.9rem;color:var(--ink-soft);flex:1}
.jlink{font:700 .9rem var(--font-d);color:var(--accent);display:inline-flex;gap:.4rem;align-items:center}
.jlink .arrow{transition:transform .25s}
.jcard:hover .jlink .arrow,.bcard:hover .jlink .arrow{transform:translateX(5px)}

/* ---------- How / roadmap ---------- */
.how{background:linear-gradient(180deg,var(--bg),#F0F2FC 40%,var(--bg))}
.roadmap{position:relative}
.roadmap-svg{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.road-base{fill:none;stroke:#DDE2F8;stroke-width:3.5;stroke-dasharray:1 14;stroke-linecap:round}
.road-draw{fill:none;stroke:var(--indigo);stroke-width:3.5;stroke-linecap:round}
.steps{
  position:relative;z-index:1;list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:2.6rem 1.2rem;counter-reset:s;
}
.step{
  background:#fff;border:1.5px solid var(--line);border-radius:var(--r-md);padding:1.3rem 1.2rem;
  box-shadow:var(--sh-sm);transition:transform .3s,box-shadow .3s;
}
.step:nth-child(even){transform:translateY(1.4rem)}
.step:hover{transform:translateY(-6px);box-shadow:var(--sh-md),0 0 0 4px rgba(67,56,202,.09);border-color:#C6CDF3}
.step:nth-child(even):hover{transform:translateY(calc(1.4rem - 6px))}
.step b{
  display:inline-grid;place-items:center;width:42px;height:42px;border-radius:14px;
  background:var(--grad);color:#fff;font:800 .95rem var(--font-d);margin-bottom:.7rem;
  transform:rotate(-6deg);
}
.step h3{font-size:1.02rem}
.step p{font-size:.88rem;color:var(--ink-soft);margin:0}

/* ---------- Psychometric ---------- */
.psycho{background:var(--bg)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split.rev .split-visual{order:0}
.dim-list{list-style:none;padding:0;margin:1.1rem 0;display:flex;flex-direction:column;gap:.55rem;font-weight:600;font-size:.95rem}
.dim-list li{display:flex;align-items:center;gap:.7rem}
.dim-list li span{width:14px;height:14px;border-radius:5px;background:var(--d);flex:none;transform:rotate(45deg)}
.mini-note{font-family:var(--font-h);font-size:1.5rem;color:var(--violet);margin:.4rem 0 1.2rem}
.radar-card{
  margin:0;background:#fff;border-radius:var(--r-lg);border:1.5px solid var(--line);
  box-shadow:var(--sh-lg);padding:1.4rem;
}
.radar-card figcaption{font:700 .85rem var(--font-d);display:flex;gap:.5rem;align-items:center;margin-bottom:.6rem}
.radar-card figcaption em{font:500 .78rem var(--font-b);color:var(--ink-soft)}
.live-dot{width:9px;height:9px;border-radius:50%;background:var(--green);display:inline-block;animation:blink 1.8s infinite}
@keyframes blink{50%{opacity:.35}}
.radar-grid polygon{fill:none;stroke:#E3E7F8;stroke-width:1.4}
.radar-shape{fill:rgba(124,58,237,.22);stroke:var(--violet);stroke-width:2.5;stroke-linejoin:round;transition:all 1.2s cubic-bezier(.22,1,.36,1)}
.radar-labels text{font:600 .68rem var(--font-b);fill:var(--ink-soft)}
.radar-labels .score{font:800 .74rem var(--font-d);fill:var(--indigo)}

/* ---------- Clario ---------- */
.clario{background:#fff}
.phone{
  width:min(370px,100%);margin-inline:auto;background:linear-gradient(160deg,#1B1F4B,#2A2F6E);
  border-radius:34px;box-shadow:var(--sh-lg),0 0 0 8px #EDEFFC;color:#fff;overflow:hidden;
  position:relative;
}
.phone::after{content:"";position:absolute;inset:-40% -40% auto;height:60%;background:radial-gradient(closest-side,rgba(124,58,237,.5),transparent);pointer-events:none}
.phone-head{display:flex;gap:.7rem;align-items:center;padding:1.1rem 1.2rem;border-bottom:1px solid rgba(255,255,255,.12);position:relative;z-index:1}
.clario-avatar{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:var(--grad);font-size:1.2rem;box-shadow:0 0 22px rgba(124,58,237,.65)}
.phone-head b{font-family:var(--font-d)}
.phone-head i{display:flex;align-items:center;gap:.35rem;font:500 .75rem var(--font-b);color:#C6CBF3;font-style:normal}
.phone-body{padding:1.1rem;display:flex;flex-direction:column;gap:.7rem;min-height:280px;position:relative;z-index:1}
.msg{max-width:85%;padding:.7rem 1rem;border-radius:16px;font-size:.88rem;opacity:0;transform:translateY(12px);transition:opacity .5s,transform .5s}
.msg.show{opacity:1;transform:none}
.msg.user{align-self:flex-end;background:#fff;color:var(--ink);border-bottom-right-radius:5px}
.msg.bot{align-self:flex-start;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);border-bottom-left-radius:5px}
.msg.typing{align-self:flex-start;display:flex;gap:5px;padding:.85rem 1rem;background:rgba(255,255,255,.12);border-radius:16px 16px 16px 5px}
.msg.typing span{width:7px;height:7px;border-radius:50%;background:#C6CBF3;animation:tdot 1s infinite}
.msg.typing span:nth-child(2){animation-delay:.15s}
.msg.typing span:nth-child(3){animation-delay:.3s}
@keyframes tdot{40%{transform:translateY(-5px);opacity:.5}}
.msg.cards{display:flex;flex-wrap:wrap;gap:.45rem;background:none;padding:0;max-width:100%}
.msg.cards span{background:var(--grad);padding:.5rem .85rem;border-radius:999px;font:700 .78rem var(--font-d)}
.phone-input{display:flex;justify-content:space-between;align-items:center;margin:0 1.1rem 1.1rem;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:.7rem 1.1rem;font-size:.85rem;color:#AEB4E4;position:relative;z-index:1}
.phone-input b{color:var(--yellow)}
.tick-list{list-style:none;padding:0;margin:0 0 1.4rem;display:flex;flex-direction:column;gap:.55rem;font-weight:600;font-size:.95rem}
.tick-list li{padding-left:1.9rem;position:relative}
.tick-list li::before{content:"✓";position:absolute;left:0;top:0;width:1.3rem;height:1.3rem;border-radius:8px;background:#E5F8EC;color:var(--green);font-weight:800;display:grid;place-items:center;font-size:.8rem}
.tick-list.light li::before{background:rgba(255,255,255,.18);color:var(--yellow)}

/* ---------- Explorer ---------- */
.explorer{background:linear-gradient(180deg,#fff,var(--bg))}
.chips{display:flex;gap:.55rem;flex-wrap:wrap;margin-bottom:1.8rem}
.chip{
  background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:.55rem 1.05rem;
  font:600 .86rem var(--font-b);color:var(--ink-soft);transition:all .25s;
}
.chip:hover{border-color:var(--indigo);transform:translateY(-2px)}
.chip.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}
.career-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;min-height:230px}
.ccard{
  position:relative;perspective:1000px;min-height:262px;cursor:pointer;
  animation:popin .45s cubic-bezier(.34,1.4,.64,1) backwards;animation-delay:calc(var(--i) * 60ms);
}
@keyframes popin{from{opacity:0;transform:translateY(18px) scale(.94)}}
.cc-inner{
  position:relative;width:100%;height:100%;min-height:262px;
  transform-style:preserve-3d;transition:transform .65s cubic-bezier(.2,.75,.3,1.05);
}
.ccard.flipped .cc-inner{transform:rotateY(180deg)}
.cc-face{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:#fff;border:1.5px solid var(--line);border-radius:var(--r-md);padding:1.15rem;
  display:flex;flex-direction:column;gap:.5rem;box-shadow:var(--sh-sm);overflow:hidden;
  transition:box-shadow .3s,border-color .3s;
}
.ccard:hover .cc-face{box-shadow:var(--sh-md),0 0 0 4px color-mix(in srgb,var(--cc) 15%,transparent);border-color:var(--cc)}
.cc-back{
  transform:rotateY(180deg);
  background:linear-gradient(165deg,#fff,color-mix(in srgb,var(--cc) 9%,#fff));
  border-color:color-mix(in srgb,var(--cc) 40%,var(--line));
}
.ccard .cico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:1.35rem;background:color-mix(in srgb,var(--cc) 14%,#fff)}
.ccard h3{font-size:1rem;margin:0}
.ccard .cskills{display:flex;flex-wrap:wrap;gap:.3rem}
.ccard .cskills i{font:500 .7rem var(--font-b);font-style:normal;background:var(--bg-2);border-radius:6px;padding:.18rem .5rem;color:var(--ink-soft)}
.ccard .cout{font-size:.78rem;color:var(--ink-soft)}
.ccard .cout b{color:var(--accent-green)}
/* The one action on the back of a flip card. A 16px line box is a hard
   thing to hit with a thumb, and on a phone the flip is a tap, so this is
   the second tap of two - the one that has to land. */
.ccard .jlink{font-size:.84rem;padding-block:.75rem;min-height:40px}
.cback-row{display:flex;align-items:baseline;gap:.4rem;font-size:.85rem;flex-wrap:wrap}
.cback-row b{font-family:var(--font-d);color:var(--accent)}
.cback-row i{font:500 .68rem var(--font-b);font-style:normal;color:var(--ink-soft)}
.flip-hint{margin-top:auto;font:600 .7rem var(--font-b);color:var(--ink-soft);letter-spacing:.03em}
.sal-note{font-size:.75rem;color:var(--ink-soft);margin:.9rem 0 1.4rem}

/* ---------- Parents ---------- */
.parents{background:var(--bg)}
.parent-card{
  background:linear-gradient(120deg,#1B1F4B,#3B2F8F 60%,#5B3FB8);color:#fff;border-radius:var(--r-lg);
  padding:clamp(1.8rem,5vw,3.6rem);display:grid;grid-template-columns:1.15fr .85fr;gap:2rem;align-items:center;
  box-shadow:var(--sh-lg);overflow:hidden;position:relative;
}
.parent-card::before{content:"";position:absolute;top:-40%;right:-15%;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(255,197,61,.28),transparent)}
.parent-copy .eyebrow{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);color:#fff}
.parent-copy h2{font-size:clamp(1.5rem,3vw,2.2rem)}
.parent-visual{display:grid;place-items:center}
.paths-svg{width:min(300px,80%)}
.pline{fill:none;stroke:var(--pc);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:6 10;animation:dashflow 2.2s linear infinite}
.pnode{fill:rgba(255,255,255,.12);stroke:var(--pc);stroke-width:2}
.pyou{fill:#fff}
.paths-svg text{font-size:15px}

/* ---------- Bento ---------- */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.btile{
  background:#fff;border:1.5px solid var(--line);border-radius:var(--r-md);padding:1.4rem;
  box-shadow:var(--sh-sm);position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s;
}
.btile:hover{transform:translateY(-6px);box-shadow:var(--sh-md),0 0 0 4px color-mix(in srgb,var(--bc) 15%,transparent);border-color:color-mix(in srgb,var(--bc) 45%,var(--line))}
.btile::after{content:"";position:absolute;left:0;top:0;height:4px;width:0;background:var(--bc);transition:width .45s;border-radius:0 4px 4px 0}
.btile:hover::after{width:100%}
.b-lg{grid-column:span 2}
.b-wide{grid-column:span 2}
.bico{font-size:1.7rem;display:inline-block;margin-bottom:.5rem;transition:transform .3s}
.btile:hover .bico{transform:scale(1.25) rotate(-8deg)}
.btile h3{font-size:1.02rem}
.btile p{font-size:.88rem;color:var(--ink-soft);margin:0}

/* ---------- Stats ---------- */
.stats{background:#fff;border-block:1.5px solid var(--line);padding:clamp(2.4rem,5vw,3.6rem) 0}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;text-align:center}
.stat b{display:block;font:800 clamp(2rem,4.5vw,3.1rem) var(--font-d);background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font-weight:600;color:var(--ink-soft);font-size:.9rem}

/* ---------- Testimonials ---------- */
.stories{overflow:hidden}
.t-carousel{overflow:hidden;cursor:grab;mask-image:linear-gradient(90deg,transparent,#000 6% 94%,transparent)}
.t-carousel:active{cursor:grabbing}
.t-track{display:flex;gap:1.2rem;width:max-content;padding:0 1rem;animation:marquee 42s linear infinite}
.t-carousel:hover .t-track{animation-play-state:paused}
.tcard{
  width:min(400px,84vw);margin:0;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-md);
  padding:1.6rem;box-shadow:var(--sh-sm);display:flex;flex-direction:column;gap:1rem;
  border-top:4px solid var(--tc,var(--indigo));transition:transform .3s,box-shadow .3s;
}
.tcard:hover{transform:translateY(-5px);box-shadow:var(--sh-md)}
.tcard p{margin:0;font-size:.95rem}
.tcard footer{display:flex;gap:.8rem;align-items:center}
.tav{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font:800 .9rem var(--font-d);color:#fff;background:var(--tc)}
.tcard footer i{display:block;font:500 .8rem var(--font-b);color:var(--ink-soft);font-style:normal}

/* ---------- Future path (alternating timeline) ---------- */
.future{background:var(--bg)}
.center-head{text-align:center;margin-inline:auto}
.timeline{position:relative;max-width:940px;margin-inline:auto;padding:.6rem 0 1rem}
.tl-line{
  position:absolute;left:50%;top:14px;bottom:14px;width:4px;translate:-50%;border-radius:4px;
  background:repeating-linear-gradient(180deg,#D7DCF6 0 9px,transparent 9px 19px);
}
.tl-line i{
  position:absolute;inset:0;border-radius:4px;
  background:linear-gradient(180deg,var(--indigo),var(--violet-deep) 55%,var(--cyan-deep));
  transform:scaleY(0);transform-origin:top;
  box-shadow:0 0 14px rgba(124,58,237,.4);
}
.tl-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.4rem}
.tl-item{position:relative;width:calc(50% - 46px)}
.tl-item:nth-child(even){margin-left:auto}
/* dot on the centre line */
.tl-item::before{
  content:"";position:absolute;top:24px;width:14px;height:14px;border-radius:50%;
  background:#fff;border:4px solid var(--indigo);box-shadow:0 0 0 5px var(--bg);z-index:2;
  transition:transform .3s,border-color .3s,box-shadow .3s;
}
.tl-item:nth-child(odd)::before{right:-57px}
.tl-item:nth-child(even)::before{left:-57px}
/* connector arm from card to dot */
.tl-item::after{
  content:"";position:absolute;top:30px;width:34px;height:2.5px;border-radius:3px;
  background:linear-gradient(90deg,var(--line),#C4CBF0);z-index:1;
}
.tl-item:nth-child(odd)::after{right:-40px}
.tl-item:nth-child(even)::after{left:-40px}
.tl-item:hover::before{transform:scale(1.35);border-color:var(--violet);box-shadow:0 0 0 5px var(--bg),0 0 16px rgba(124,58,237,.55)}
.tl-card{
  display:flex;gap:.9rem;align-items:flex-start;background:#fff;
  border:1.5px solid var(--line);border-radius:var(--r-md);padding:1.05rem 1.15rem;
  box-shadow:var(--sh-sm);transition:transform .3s,box-shadow .3s,border-color .3s;
}
.tl-item:nth-child(odd) .tl-card{flex-direction:row-reverse;text-align:right}
.tl-card:hover{transform:translateY(-4px);border-color:var(--tlc,var(--indigo));box-shadow:var(--sh-md),0 0 0 4px color-mix(in srgb,var(--tlc,var(--indigo)) 14%,transparent)}
.tl-ico{
  width:48px;height:48px;flex:none;border-radius:15px;display:grid;place-items:center;font-size:1.3rem;
  background:color-mix(in srgb,var(--tlc,var(--indigo)) 13%,#fff);
  border:1.5px solid color-mix(in srgb,var(--tlc,var(--indigo)) 26%,transparent);
  transition:transform .3s;
}
.tl-card:hover .tl-ico{transform:scale(1.12) rotate(-6deg)}
.tl-card b{font:700 1.02rem var(--font-d);display:block;margin-bottom:.15rem}
.tl-card p{margin:0;font-size:.85rem;color:var(--ink-soft)}
/* start & end pills sit ON the line */
.tl-item.here,.tl-item.rocket{width:max-content;max-width:92%;margin-inline:auto}
.tl-item.here::before,.tl-item.rocket::before,.tl-item.here::after,.tl-item.rocket::after{display:none}
.tl-pill{
  display:flex;align-items:center;gap:.7rem;font:800 .98rem var(--font-d);letter-spacing:.04em;
  border-radius:999px;padding:.55rem 1.5rem .55rem .6rem;box-shadow:var(--sh-md);
}
.tl-pill span{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:1.15rem;background:rgba(255,255,255,.16)}
.tl-pill.dark{background:var(--ink);color:#fff;position:relative}
.tl-pill.dark::after{
  content:"";position:absolute;inset:-5px;border-radius:999px;border:2px solid rgba(67,56,202,.35);
  animation:ping 2.4s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes ping{75%,100%{transform:scale(1.12);opacity:0}}
.tl-pill.grad{background:var(--grad);color:#fff;box-shadow:0 16px 34px rgba(67,56,202,.42)}
.tl-pill.grad span{animation:bob 3s ease-in-out infinite}
/* alternate slide-in directions */
.tl-item.reveal{transform:translateX(-36px)}
.tl-item:nth-child(even).reveal{transform:translateX(36px)}
.tl-item.here.reveal,.tl-item.rocket.reveal{transform:translateY(20px)}

/* ---------- Blog ---------- */
.blog{background:#fff}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.bcard{
  background:#fff;border:1.5px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  display:flex;flex-direction:column;gap:.45rem;padding-bottom:1.3rem;box-shadow:var(--sh-sm);
  transition:transform .35s,box-shadow .35s;
}
.bcard:hover{transform:translateY(-8px);box-shadow:var(--sh-lg),0 0 0 4px rgba(67,56,202,.1);border-color:#C6CDF3}
.bthumb{
  aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;
  background:linear-gradient(135deg,color-mix(in srgb,var(--bt) 22%,#fff),color-mix(in srgb,var(--bt) 8%,#fff));
  font-size:2.4rem;margin-bottom:.6rem;
}
.bthumb i{font:700 .82rem var(--font-d);color:var(--ink-soft);font-style:normal}
.bcard .btag{padding:0 1.3rem;font:700 .74rem var(--font-b);color:var(--accent);letter-spacing:.04em;text-transform:uppercase}
.bcard h3{padding:0 1.3rem;font-size:1.05rem}
.bmeta{padding:0 1.3rem;font-size:.8rem;color:var(--ink-soft)}
.bcard .jlink{padding:0 1.3rem;margin-top:.3rem}

/* ---------- Final CTA ---------- */
.final{background:linear-gradient(140deg,#171A3D,#33298C 55%,#4C2FA8);color:#fff;overflow:hidden;text-align:center}
.final-bg{position:absolute;inset:0;pointer-events:none}
.f-ico{position:absolute;left:var(--x);bottom:-3rem;font-size:1.8rem;opacity:.35;animation:floatup 11s linear infinite;animation-delay:var(--d)}
@keyframes floatup{to{transform:translateY(-120vh) rotate(30deg)}}
.final-h{font-size:clamp(1.7rem,4.4vw,3rem)}
.final-hand{font-family:var(--font-h);font-size:clamp(1.9rem,4vw,2.8rem);color:var(--yellow);margin:.2rem 0 1.6rem}
.final-call{margin-top:1.4rem;color:#C6CBF3;font-size:.92rem}
.final-call a{font-weight:700;color:#fff;border-bottom:2px solid var(--yellow)}

/* ---------- Footer ---------- */
.footer{background:#101331;color:#C9CDEF;font-size:.92rem}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.4rem;padding:clamp(2.6rem,6vw,4.2rem) 0 2.2rem}
.foot-brand p{margin:1rem 0;max-width:34ch;color:#9AA1D6}
.foot-brand address{font-style:normal;display:flex;flex-direction:column;gap:.45rem}
.foot-brand address a:hover,.foot-col a:hover{color:#fff}
.foot-col{display:flex;flex-direction:column;gap:.55rem}
.foot-col h4{color:#fff;font-size:.95rem;margin-bottom:.4rem}
.foot-col a{transition:transform .2s,color .2s}
.foot-col a:hover{transform:translateX(4px)}
.foot-bar{
  border-top:1px solid rgba(255,255,255,.1);padding:1.2rem 4%;display:flex;
  justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.84rem;color:#8A91C9;
}
.foot-bar p{margin:0}
.hindi{color:var(--yellow);font-weight:600}

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;gap:.6rem;padding:.7rem .9rem calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-top:1.5px solid var(--line);
  transform:translateY(110%);transition:transform .4s cubic-bezier(.32,.72,0,1);
}
.sticky-cta.show{transform:none}
.sticky-cta .btn{flex:1;justify-content:center;padding:.85rem .5rem;font-size:.9rem}

/* ---------- Reveal ---------- */
.reveal{transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}
/* Hidden only when JavaScript is there to unhide it - see the html.js class
   in the layout head. Without that guard a single failed script request
   turns every page on the site into an empty column. */
.js .reveal{opacity:0;transform:translateY(26px)}
.reveal.in,.js .reveal.in{opacity:1;transform:none}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1100px){
  .journey-grid{grid-template-columns:repeat(2,1fr)}
  .career-grid{grid-template-columns:repeat(3,1fr)}
  .bento{grid-template-columns:repeat(2,1fr)}
  .b-lg,.b-wide{grid-column:span 2}
}

@media (max-width:920px){
  .nav-links,.nav-cta{display:none}
  .hamburger{display:flex}
  .hero-inner{grid-template-columns:1fr;text-align:center}
  .hero-copy{display:flex;flex-direction:column;align-items:center}
  .hero-sub{margin-inline:auto}
  .hero-actions,.hero-trust{justify-content:center}
  .hero-visual{min-height:0;margin-top:.6rem}
  .universe{width:min(380px,88vw)}
  .split{grid-template-columns:1fr}
  .split.rev .split-visual{order:2}
  .steps{grid-template-columns:1fr 1fr}
  .roadmap-svg{display:none}
  .step:nth-child(even){transform:none}
  .step:nth-child(even):hover{transform:translateY(-6px)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .tl-item{width:calc(50% - 36px)}
  .tl-item:nth-child(odd)::before{right:-47px}
  .tl-item:nth-child(even)::before{left:-47px}
  .tl-item:nth-child(odd)::after{right:-32px;width:26px}
  .tl-item:nth-child(even)::after{left:-32px;width:26px}
}

@media (max-width:640px){
  :root{--nav-h:62px}
  .topbar{font-size:.74rem}
  .hero{padding-top:1.6rem}
  h1{font-size:clamp(1.9rem,8.4vw,2.5rem)}
  .hl-path{font-size:.88em;font-size:min(.88em,8.3cqw)}
  .hero-sub{font-size:.98rem}
  .btn-lg{padding:.9rem 1.4rem;font-size:.95rem;width:100%;justify-content:center}
  .hero-actions{width:100%;flex-direction:column}
  .universe{width:min(320px,86vw)}
  .compass-face{width:104px;height:104px}
  .compass-tag{bottom:calc(50% - 78px)}
  .planet{font-size:.72rem;padding:.36rem .65rem;margin-left:-40px}
  .match-badge{right:0;bottom:2%}
  .cbubble{max-width:88%}
  .journey-grid{grid-template-columns:1fr;gap:.9rem}
  .steps{grid-template-columns:1fr;gap:1rem}
  .career-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:.85rem;padding-bottom:.8rem;margin-inline:-4%;padding-inline:4%;min-height:0;-webkit-overflow-scrolling:touch}
  .ccard{flex:0 0 76%;scroll-snap-align:center}
  .parent-card{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr}
  .b-lg,.b-wide{grid-column:auto}
  .stat-row{grid-template-columns:1fr 1fr;gap:1.4rem .6rem}
  .blog-grid{grid-template-columns:1fr}
  .sec-head.row .btn{display:none}
  /* timeline: single left rail on mobile */
  .tl-line{left:24px;translate:0}
  .tl-item,.tl-item:nth-child(even){width:auto;margin:0 0 0 58px}
  .tl-item:nth-child(odd)::before,.tl-item:nth-child(even)::before{left:-46px;right:auto;top:22px;width:12px;height:12px}
  .tl-item:nth-child(odd)::after,.tl-item:nth-child(even)::after{left:-32px;right:auto;width:26px;top:27px}
  .tl-item:nth-child(odd) .tl-card{flex-direction:row;text-align:left}
  .tl-item.here,.tl-item.rocket{margin:0 0 0 58px;max-width:calc(100% - 58px)}
  .tl-item.here.reveal,.tl-item.rocket.reveal,.tl-item.reveal,.tl-item:nth-child(even).reveal{transform:translateY(20px)}
  /* The .in state, which the line above forgot. It sets the phone-sized
     starting offset but out-ranks .reveal.in, so once a timeline card had
     been revealed it stayed twenty pixels low - permanently, on every phone,
     for anyone whose system allows motion. */
  .tl-item.here.reveal.in,.tl-item.rocket.reveal.in,.tl-item.reveal.in,.tl-item:nth-child(even).reveal.in{transform:none}
  .tl-pill{font-size:.85rem;padding-right:1.1rem}
  .tl-card{padding:.9rem 1rem}
  .tl-card b{font-size:.95rem}
  .foot-grid{grid-template-columns:1fr;gap:1.8rem}
  /* The footer's links are 24px line boxes nine pixels apart, which is fine
     with a mouse and a lottery with a thumb. The spacing moves into the links
     themselves: same rhythm, but the whole strip is now the target. */
  .foot-col{gap:0}
  .foot-col a{padding-block:.5rem}
  /* Same reasoning for the contact block: these are the phone number, the
     WhatsApp link and the email address - the three a parent is most likely
     to reach for. */
  .foot-brand address{gap:0}
  .foot-brand address a{padding-block:.5rem}
  .foot-bar{justify-content:center;text-align:center}
  .sticky-cta{display:flex}
  body{padding-bottom:76px}
}

/* ---------- Reduced motion ---------- */
/* The reduced-motion rules moved to theme/motion-off.css, which is
   loaded through a media attribute so a visitor can override the OS
   default. See the motion toggle in the header. */


/* =========================================================
   V3 ADDITIONS — mascot, waves, quiz, streams, team, FAQ,
   exam strip, WhatsApp float, bottom sheet, intro, grain
   ========================================================= */

/* ---------- Grain texture ---------- */
.grain{
  position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.55'/></svg>");
  background-size:170px 170px;
}
.final .grain{opacity:.09;mix-blend-mode:overlay}

/* ---------- Wave dividers ---------- */
.wave{line-height:0;background:var(--wt);margin-top:-1px;position:relative;z-index:1}
.wave svg{width:100%;height:52px;display:block}
.wave path{fill:var(--wb)}

/* ---------- Clario mascot ---------- */
.mascot{width:120px;height:auto;filter:drop-shadow(0 12px 22px rgba(67,56,202,.2));overflow:visible}
.mascot-xs{width:36px;filter:none}
.m-shadow{fill:#171A3D;opacity:.12}
.m-shadow.light{fill:#000;opacity:.25}
.m-spark{fill:#FFC53D}
.m-eyes circle{fill:#171A3D}
.m-smile{fill:none;stroke:#171A3D;stroke-width:5;stroke-linecap:round}
.m-cheek{fill:#FF9EB3;opacity:.85}
.m-body{animation:mfloat 3.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes mfloat{50%{transform:translateY(-8px)}}
.m-shadow{animation:mshadow 3.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes mshadow{50%{transform:scaleX(.82);opacity:.07}}
.m-eyes{transform-box:fill-box;transform-origin:center;animation:mblink 4.4s infinite}
@keyframes mblink{0%,91%,100%{transform:scaleY(1)}94%{transform:scaleY(.12)}}
.m-arm{transform-box:fill-box;transform-origin:100% 100%;animation:mwave 5s ease-in-out infinite}
@keyframes mwave{0%,55%,100%{transform:rotate(0)}65%{transform:rotate(-26deg)}75%{transform:rotate(12deg)}85%{transform:rotate(-18deg)}}
.m-spark{animation:msparkle 2.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes msparkle{50%{transform:scale(1.4);opacity:.75}}

.hero-mascot{position:absolute;top:-8px;left:-10px;z-index:6;display:flex;flex-direction:column;align-items:center;gap:.2rem}
.hero-visual{position:relative}
.mascot-hi{
  font-family:var(--font-h);font-size:1.15rem;color:var(--violet);background:#fff;
  border:1.5px solid var(--line);border-radius:999px;padding:.15rem .8rem;box-shadow:var(--sh-sm);
  animation:bob 4s ease-in-out infinite;
}
.clario-avatar{padding:3px}
.clario-avatar .mascot-xs{display:block}
.final-mascot{display:flex;justify-content:center;margin-bottom:.6rem}
.final-mascot .mascot{width:104px}

/* ---------- Exam countdown strip ---------- */
/*
  A ticker, like the careers strip above it, but slower: those are job titles
  you take in at a glance, and these are numbers someone is counting down with.
*/
.exam-strip{
  overflow:hidden;padding:.8rem 0;background:var(--bg);
  mask-image:linear-gradient(90deg,transparent,#000 4% 96%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4% 96%,transparent);
}
.exam-strip::-webkit-scrollbar{display:none}
.exam-track{display:flex;gap:.6rem;align-items:center;width:max-content;
  animation:marquee 30s linear infinite}
.exam-half{display:flex;gap:.6rem;align-items:center;padding-right:.6rem}
.exam-set{display:flex;gap:.6rem;align-items:center;padding-right:.6rem}
.exam-strip:hover .exam-track{animation-play-state:paused}
.exam-chip{
  flex:none;display:inline-flex;gap:.45rem;align-items:center;background:#fff;
  border:1.5px solid var(--line);border-radius:999px;padding:.42rem .9rem;
  font:600 .8rem var(--font-b);color:var(--ink-soft);box-shadow:var(--sh-sm);
}
.exam-chip b{font-family:var(--font-d);color:var(--accent-orange)}
.exam-note{flex:none;font:500 .72rem var(--font-b);color:var(--ink-soft);opacity:.8}

/* ---------- Streams ---------- */
.streams{background:#fff}
.stream-tabs{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.6rem}
.stream-tab{
  background:var(--bg);border:2px solid var(--line);border-radius:999px;padding:.65rem 1.4rem;
  font:700 .95rem var(--font-d);color:var(--ink-soft);transition:all .25s;
}
.stream-tab:hover{border-color:var(--indigo);transform:translateY(-2px)}
.stream-tab.is-active{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:0 8px 20px rgba(23,26,61,.25)}
.stream-panel{
  background:var(--bg);border:1.5px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.3rem,3.5vw,2rem);max-width:900px;margin:0 auto 1.6rem;
}
.sp-title{font:800 1.15rem var(--font-d);margin-bottom:1rem;animation:popin .35s}
.sp-cols{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.sp-col h4{font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.6rem}
.sp-chips{display:flex;flex-wrap:wrap;gap:.45rem}
.sp-chips span{
  background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:.42rem .8rem;
  font:600 .84rem var(--font-b);animation:popin .4s backwards;animation-delay:calc(var(--i) * 55ms);
}
.sp-chips.exams span{border-color:#F5D9BC;background:#FFF7EE;color:#A2540A}

/* ---------- Counsellor team ---------- */
.counsellors{background:var(--bg)}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;margin-bottom:1.6rem}
.mcard{
  background:#fff;border:1.5px solid var(--line);border-radius:var(--r-md);padding:1.5rem 1.2rem;
  text-align:center;box-shadow:var(--sh-sm);transition:transform .3s,box-shadow .3s,border-color .3s;
}
.mcard:hover{transform:translateY(-7px);box-shadow:var(--sh-md),0 0 0 4px color-mix(in srgb,var(--mc) 14%,transparent);border-color:color-mix(in srgb,var(--mc) 45%,var(--line))}
.mavatar{
  width:96px;height:96px;border-radius:50%;display:grid;place-items:center;margin:0 auto .9rem;
  font:800 1.3rem var(--font-d);color:#fff;
  background:linear-gradient(140deg,color-mix(in srgb,var(--mc) 45%,#171A3D),color-mix(in srgb,var(--mc) 40%,var(--indigo)));
  border:4px solid #fff;box-shadow:0 0 0 3px color-mix(in srgb,var(--mc) 40%,transparent),var(--sh-md);
  transition:transform .35s;
}
.mcard:hover .mavatar{transform:scale(1.07) rotate(-3deg)}
.mcard img{width:96px;height:96px;border-radius:50%;object-fit:cover;margin:0 auto .9rem;border:4px solid #fff;box-shadow:0 0 0 3px color-mix(in srgb,var(--mc) 40%,transparent),var(--sh-md)}
.mcard h3{font-size:1.02rem;margin-bottom:.2rem}
.mcard p{font-size:.82rem;color:var(--ink-soft);margin-bottom:.7rem}
.mtag{
  display:inline-block;font:700 .72rem var(--font-d);color:var(--accent);
  background:#EFF1FE;border-radius:999px;padding:.3rem .75rem;
}

/* ---------- FAQ accordion ---------- */
.faq{background:#fff}
.faq-list{display:flex;flex-direction:column;gap:.8rem}
.faq-item{
  background:var(--bg);border:1.5px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;transition:border-color .3s,box-shadow .3s,background .3s;
}
.faq-item.open{background:#fff;border-color:#C6CDF3;box-shadow:var(--sh-md)}
.faq-q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  background:none;border:0;text-align:left;padding:1.05rem 1.25rem;
  font:700 .98rem var(--font-d);color:var(--ink);
}
.faq-chev{font-style:normal;font-weight:800;color:var(--accent);transition:transform .35s;flex:none}
.faq-item.open .faq-chev{transform:rotate(180deg)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.22,1,.36,1)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a>div{overflow:hidden}
.faq-a p{padding:0 1.25rem 1.1rem;margin:0;font-size:.92rem;color:var(--ink-soft)}

/* ---------- WhatsApp float ---------- */
.wa-float{
  position:fixed;right:18px;bottom:20px;z-index:95;width:56px;height:56px;border-radius:50%;
  background:#25D366;display:grid;place-items:center;box-shadow:0 10px 26px rgba(37,211,102,.45);
  transition:transform .25s;
}
.wa-float:hover{transform:scale(1.1) rotate(6deg)}

/*
  Clario, riding just above the WhatsApp button.

  The name is a permanent badge rather than a tooltip. A tooltip only exists
  for a mouse, and the people who most need telling what a purple robot in the
  corner is are on a phone - everyone knows the WhatsApp mark, nobody knows
  this one. So it says who it is, on every screen, and there is one label
  instead of two behaving differently.
*/
.clario-float{
  position:fixed;right:18px;bottom:88px;z-index:95;text-decoration:none;
  display:flex;flex-direction:column;align-items:center;gap:.3rem;
}
.cf-orb{
  width:56px;height:56px;border-radius:50%;background:var(--sw);border:1.5px solid var(--line);
  display:grid;place-items:center;box-shadow:0 10px 26px rgba(67,56,202,.28);
  transition:transform .25s,box-shadow .25s;
}
.clario-float:hover .cf-orb{transform:scale(1.08);box-shadow:0 14px 32px rgba(67,56,202,.4)}
.mascot-fl{width:42px;height:auto;overflow:visible;display:block}
/* 10.6px, not 9.9: the badge exists so a parent can tell what the robot in
   the corner is, and a label too small to read would defeat the point. */
.cf-name{
  font:800 .66rem var(--font-d);letter-spacing:.07em;text-transform:uppercase;
  color:#fff;background:var(--grad);border-radius:999px;padding:.17rem .52rem;line-height:1.25;
  box-shadow:0 4px 10px rgba(67,56,202,.32);
}
.wa-ping{position:absolute;inset:-4px;border-radius:50%;border:2.5px solid rgba(37,211,102,.55);animation:ping 2.2s cubic-bezier(0,0,.2,1) infinite}

/* ---------- Bottom sheet ---------- */
.sheet-handle{
  flex:none;width:48px;height:48px;border-radius:16px;border:0;background:var(--grad);
  color:#fff;font-size:1.25rem;box-shadow:0 6px 16px rgba(67,56,202,.35);
  display:grid;place-items:center;transition:transform .25s;
}
.sheet-handle:active{transform:scale(.92)}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:130;background:#fff;
  border-radius:26px 26px 0 0;padding:1rem 1.3rem calc(1.4rem + env(safe-area-inset-bottom));
  box-shadow:0 -20px 60px rgba(23,26,61,.25);
  transform:translateY(105%);transition:transform .45s cubic-bezier(.32,.72,0,1);
}
.sheet.open{transform:none}
.sheet-grab{display:block;width:44px;height:5px;border-radius:99px;background:var(--line);margin:0 auto .9rem}
.sheet h3{text-align:center;font-size:1.05rem;margin-bottom:1rem}
.sheet-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.sheet-grid a{
  display:flex;flex-direction:column;align-items:center;gap:.15rem;text-align:center;
  background:var(--bg);border:1.5px solid var(--line);border-radius:18px;padding:1rem .6rem;
  font-size:1.4rem;transition:transform .2s,border-color .2s,background .2s;
}
.sheet-grid a:active{transform:scale(.95)}
.sheet-grid a:hover{border-color:var(--indigo);background:#F3F5FF}
.sheet-grid b{font:700 .9rem var(--font-d);color:var(--ink)}
.sheet-grid i{font:500 .72rem var(--font-b);font-style:normal;color:var(--ink-soft)}
.sheet-backdrop{position:fixed;inset:0;z-index:125;background:rgba(23,26,61,.45);backdrop-filter:blur(2px);opacity:0;transition:opacity .35s}
.sheet-backdrop.show{opacity:1}

/* ---------- Confetti ---------- */
.cf{
  position:fixed;z-index:400;width:9px;height:13px;border-radius:2.5px;
  pointer-events:none;will-change:transform,opacity;
}

/* ---------- Typewriter caret ---------- */
.type-wrap{white-space:nowrap}
.caret{
  display:inline-block;width:3.5px;height:.85em;background:var(--orange);
  margin-left:2px;vertical-align:-.06em;border-radius:2px;
  animation:caretBlink 1s steps(1) infinite;
}
@keyframes caretBlink{50%{opacity:0}}

/* ---------- Page-load intro ---------- */
.intro{
  position:fixed;inset:0;z-index:300;background:var(--bg);display:grid;place-items:center;
  animation:introOut .5s ease 2.6s forwards; /* JS removes earlier; this is a no-JS safety net */
}
.intro.hide{opacity:0;visibility:hidden;transition:opacity .45s,visibility .45s}
@keyframes introOut{to{opacity:0;visibility:hidden}}
.intro-logo{display:flex;flex-direction:column;align-items:center;gap:.7rem;text-align:center}
.intro-mark{
  width:76px;height:76px;border-radius:22px;display:grid;place-items:center;background:var(--grad);color:#fff;
  animation:introSpin .95s cubic-bezier(.34,1.4,.64,1) both;
}
@keyframes introSpin{0%{transform:rotate(-200deg) scale(.3);opacity:0}100%{transform:rotate(-8deg) scale(1);opacity:1}}
.intro-name{font:800 1.5rem var(--font-d);animation:introFade .5s .45s ease both}
.intro-name em{font-style:normal;color:var(--orange)}
.intro-tag{font:700 1.1rem var(--font-h);font-style:normal;color:var(--violet);animation:introFade .5s .65s ease both}
@keyframes introFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- Tap feedback (native-app feel) ---------- */
.chip:active,.stream-tab:active,.jcard:active,.tl-card:active,.bcard:active,.faq-q:active,.quiz-opt:active{transform:scale(.97)}
.ccard:active .cc-inner{scale:.97}

/* ---------- Stories dots (mobile) ---------- */
.t-dots{display:none;justify-content:center;gap:.45rem;margin-top:1rem}
.t-dots i{width:8px;height:8px;border-radius:50%;background:var(--line);transition:all .3s}
.t-dots i.on{width:22px;border-radius:99px;background:var(--indigo)}

/* ---------- Perf: skip offscreen rendering for late sections ---------- */
.blog,.counsellors,.faq{content-visibility:auto;contain-intrinsic-size:auto 640px}

/* ---------- Responsive additions ---------- */
@media (max-width:1100px){
  .team-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:920px){
  .hero-mascot{top:-14px;left:0}
  .hero-mascot .mascot{width:88px}
  .mascot-hi{font-size:.95rem}
}
@media (max-width:640px){
  .sp-cols{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr 1fr;gap:.8rem}
  .mavatar,.mcard img{width:74px;height:74px}
  .mcard{padding:1.1rem .8rem}
  .mcard p{font-size:.74rem}
  .wave svg{height:34px}
  .exam-strip{padding:.7rem 0}
  .hero-mascot{top:-10px;left:-4px}
  .hero-mascot .mascot{width:68px}
  .final-mascot .mascot{width:86px}
  /* WhatsApp float sits above the sticky CTA bar */
  .wa-float{bottom:calc(88px + env(safe-area-inset-bottom));right:12px;width:50px;height:50px}
  /* Stacked above WhatsApp, same size, same margin - two buttons in a column
     rather than three, because Clario has left the sticky bar. */
  .clario-float{bottom:calc(148px + env(safe-area-inset-bottom));right:12px}
  .cf-orb{width:50px;height:50px}
  .mascot-fl{width:37px}
  .cf-name{font-size:.62rem;padding:.14rem .45rem}
  /* stories become swipeable with snap + dots */
  .t-carousel{overflow-x:auto;scroll-snap-type:x mandatory;mask-image:none;cursor:auto;scrollbar-width:none}
  .t-carousel::-webkit-scrollbar{display:none}
  .t-track{animation:none;padding:0 8%}
  .tcard{scroll-snap-align:center;width:84vw}
  .tcard.t-dupe{display:none}
  .t-dots{display:flex}
}

/* ---------- Reduced motion (v3) ---------- */
/* The reduced-motion rules moved to theme/motion-off.css, which is
   loaded through a media attribute so a visitor can override the OS
   default. See the motion toggle in the header. */


/* =========================================================
   V3.1 — theme tokens, dark mode, chat confusion, Clario
   push, split-word headings, professional buttons
   ========================================================= */

:root{--sw:#fff}

/* ---------- Professional nav + buttons ---------- */
.nav-links a{font:500 .84rem/1 var(--font-b);letter-spacing:.01em}
.btn{border-radius:12px}
.btn-sm{border-radius:10px}
.btn-lg{border-radius:14px}
.stream-tab{border-radius:12px}
.theme-btn{
  width:38px;height:38px;border-radius:12px;border:1.5px solid var(--line);
  background:transparent;color:var(--ink);font-size:1.05rem;display:grid;place-items:center;
  cursor:pointer;transition:border-color .25s,transform .25s;
}
.theme-btn:hover{border-color:var(--indigo);transform:translateY(-1px)}
.theme-wide{width:100%;height:44px;margin-bottom:.2rem}

/* The motion button is a quiet square either way now: motion is on by
   default, so there is no state to announce - only an off switch to offer. */

/* ---------- Split-word heading animation ---------- */
.sw{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.12em;margin-bottom:-.12em}
.swi{
  display:inline-block;transform:translateY(115%);
  transition:transform .7s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(var(--wi,0) * 48ms);
}
.in .swi{transform:translateY(0)}

/* ---------- Confusion: compact chat card ---------- */
.center-eyebrow{display:table;margin-inline:auto}
.center-lead{margin-inline:auto;text-align:center}
.chat-card{
  max-width:520px;margin:1.2rem auto 0;background:var(--sw);
  border:1.5px solid var(--line);border-radius:22px;box-shadow:var(--sh-lg);overflow:hidden;
}
.chat-head{
  display:flex;align-items:center;gap:.6rem;padding:.75rem 1rem;
  background:linear-gradient(90deg,var(--indigo),var(--violet-deep));color:#fff;
}
.ch-ico{width:36px;height:36px;border-radius:12px;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:1.1rem}
.chat-head b{display:block;font:700 .92rem var(--font-d)}
.chat-head i{font:500 .7rem var(--font-b);font-style:normal;opacity:.85}
.chat-body{padding:.9rem;display:flex;flex-direction:column;gap:.5rem}
.cmsg{
  align-self:flex-start;max-width:82%;padding:.55rem .9rem;
  background:#EEF1FF;border-radius:15px 15px 15px 4px;
  font:600 .88rem var(--font-b);color:var(--ink);
  opacity:0;transform:translateY(10px) scale(.96);
  transition:opacity .4s,transform .45s cubic-bezier(.34,1.3,.64,1);
}
.cmsg.show{opacity:1;transform:none}
.cmsg.right{align-self:flex-end;background:#F3EEFE;border-radius:15px 15px 4px 15px}
.cmsg.big{background:#FFF4E5;max-width:94%}
.cav{font-style:normal;margin-right:.4rem}
.cmsg.ctyping{display:inline-flex;gap:4px;padding:.7rem .95rem}
.cmsg.ctyping span{width:7px;height:7px;border-radius:50%;background:var(--ink-soft);animation:ctb 1s infinite}
.cmsg.ctyping span:nth-child(2){animation-delay:.15s}
.cmsg.ctyping span:nth-child(3){animation-delay:.3s}
@keyframes ctb{30%{transform:translateY(-4px);opacity:.5}}
.conf-turn{display:flex;align-items:center;justify-content:center;gap:1.1rem;margin-top:1.8rem;text-align:left}
.mascot-turn{width:88px;flex:none}
.conf-turn h2{margin:0;font-size:clamp(1.4rem,3.4vw,2rem)}

/* ---------- Clario push (free quiz lives in Clario) ---------- */
.cpush{background:var(--bg)}
.cpush-card{
  max-width:560px;margin:0 auto;background:var(--sw);
  border:1.5px solid var(--line);border-radius:22px;box-shadow:var(--sh-lg);overflow:hidden;
}
.cp-head{
  display:flex;align-items:center;gap:.6rem;padding:.75rem 1rem;
  background:linear-gradient(90deg,var(--indigo),var(--violet-deep));color:#fff;
}
.cp-head b{display:block;font:700 .95rem var(--font-d)}
.cp-head i{font:500 .72rem var(--font-b);font-style:normal;opacity:.9;display:flex;align-items:center;gap:.3rem}
.cp-body{padding:1.1rem 1.1rem .4rem}
.cp-msg{
  background:var(--bg);border:1.5px solid var(--line);border-radius:15px 15px 15px 4px;
  padding:.75rem 1rem;font:600 .92rem var(--font-b);max-width:92%;
}
.cp-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:.9rem 0 .4rem;justify-content:flex-end}
.cp-chips a{
  border:1.5px solid var(--indigo);color:var(--accent);border-radius:12px;
  padding:.5rem .9rem;font:600 .84rem var(--font-b);background:transparent;
  transition:background .25s,color .25s,transform .25s;
}
.cp-chips a:hover{background:var(--indigo);color:#fff;transform:translateY(-2px)}
.cp-foot{padding:.9rem 1.1rem 1.2rem;display:flex;flex-direction:column;align-items:center;gap:.55rem}
.cp-foot .btn{width:100%;justify-content:center}
.cp-note{font:500 .74rem var(--font-b);color:var(--ink-soft)}

/* ---------- Dark mode ---------- */
[data-theme="dark"]{
  --bg:#0E1024;--bg-2:#191C3A;--ink:#ECEEFF;--ink-soft:#A3A9D6;--line:#2A2E56;--sw:#14172F;
}
[data-theme="dark"] body{background:var(--bg)}
[data-theme="dark"] .nav{background:rgba(14,16,36,.78)}
[data-theme="dark"] .nav.is-scrolled{background:rgba(14,16,36,.92)}
[data-theme="dark"] .drawer{background:#12142C}
[data-theme="dark"] .confusion,
[data-theme="dark"] .clario,
[data-theme="dark"] .streams,
[data-theme="dark"] .stats,
[data-theme="dark"] .faq,
[data-theme="dark"] .blog,
[data-theme="dark"] .marquee{background:var(--sw)}
[data-theme="dark"] .explorer{background:linear-gradient(180deg,var(--sw),var(--bg))}
[data-theme="dark"] .how{background:linear-gradient(180deg,var(--bg),#12142E 40%,var(--bg))}
[data-theme="dark"] .eyebrow,
[data-theme="dark"] .jcard,
[data-theme="dark"] .step,
[data-theme="dark"] .btile,
[data-theme="dark"] .bcard,
[data-theme="dark"] .tcard,
[data-theme="dark"] .radar-card,
[data-theme="dark"] .phone,
[data-theme="dark"] .mcard,
[data-theme="dark"] .cc-face,
[data-theme="dark"] .exam-chip,
[data-theme="dark"] .chat-card,
[data-theme="dark"] .cpush-card,
[data-theme="dark"] .mascot-hi,
[data-theme="dark"] .tl-card,
[data-theme="dark"] .faq-item.open,
[data-theme="dark"] .match-badge,
[data-theme="dark"] .compass-tag,
[data-theme="dark"] .planet,
[data-theme="dark"] .sheet{background:#171A38;border-color:var(--line)}
[data-theme="dark"] .cc-back{background:linear-gradient(165deg,#171A38,color-mix(in srgb,var(--cc) 16%,#171A38))}
[data-theme="dark"] .chip,
[data-theme="dark"] .stream-tab,
[data-theme="dark"] .sheet-grid a,
[data-theme="dark"] .faq-item,
[data-theme="dark"] .stream-panel,
[data-theme="dark"] .msg.bot,
[data-theme="dark"] .msg.typing,
[data-theme="dark"] .cp-msg,
[data-theme="dark"] .phone-input{background:var(--bg-2);border-color:var(--line)}
[data-theme="dark"] .msg.cards span{background:#232752;color:var(--ink)}
[data-theme="dark"] .cmsg{background:#232752}
[data-theme="dark"] .cmsg.right{background:#2B2360}
[data-theme="dark"] .cmsg.big{background:#3A2E17}
[data-theme="dark"] .btn-ghost{color:var(--ink)}
[data-theme="dark"] .btn-ghost:hover{background:#1B1F40;border-color:var(--indigo);color:var(--ink)}
[data-theme="dark"] .btn-dark{background:#232752}
[data-theme="dark"] .chip.is-active,
[data-theme="dark"] .stream-tab.is-active{background:linear-gradient(90deg,var(--indigo),var(--violet-deep));border-color:transparent;color:#fff}
[data-theme="dark"] .tl-pill.dark{background:linear-gradient(90deg,var(--indigo),var(--violet-deep));color:#fff}
[data-theme="dark"] .hl-marker{color:#171A3D}
[data-theme="dark"] .hl-y{color:#171A3D}
[data-theme="dark"] .grain{mix-blend-mode:overlay;opacity:.07}
[data-theme="dark"] .dot-grid{opacity:.14}
[data-theme="dark"] .cface{fill:#171A38}
[data-theme="dark"] .orbit-rings .ring{stroke:var(--line)}
[data-theme="dark"] .radar-grid polygon{stroke:var(--line)}
[data-theme="dark"] .mavatar,[data-theme="dark"] .tav{border-color:#171A38}
[data-theme="dark"] .sticky-cta{background:rgba(14,16,36,.94);border-top:1px solid var(--line)}
[data-theme="dark"] .drawer-links a:hover{background:#1B1F40}

@media (max-width:640px){
  .conf-turn{flex-direction:column;text-align:center;gap:.6rem}
  .mascot-turn{width:72px}
  .cp-chips{justify-content:center}
}

/* =========================================================
   INNER PAGES — page hero, pricing, prose, forms, CTA band
   ========================================================= */
.nav-links a.is-active{color:var(--accent);font-weight:600}

.phero{position:relative;overflow:hidden;padding:9.2rem 0 3.6rem;background:var(--bg)}
.phero .hero-bg{position:absolute;inset:0;pointer-events:none}
.phero .container{position:relative;max-width:820px}
.crumb{font:600 .74rem var(--font-b);color:var(--ink-soft);letter-spacing:.04em;text-transform:uppercase;margin-bottom:1rem}
.crumb a{color:var(--accent)}
.phero h1{font:800 clamp(2rem,5vw,3.1rem)/1.15 var(--font-d);letter-spacing:-.02em;margin:.7rem 0 1rem}
.phero .lead{max-width:58ch}
.phero .hero-actions{margin-top:1.5rem}
.phero-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}

.lang-chips{display:flex;gap:.5rem;flex-wrap:wrap}
.lang-chips span{background:var(--sw);border:1.5px solid var(--line);border-radius:12px;padding:.5rem 1rem;font:600 .88rem var(--font-b)}

.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;align-items:stretch}
.price-card{
  position:relative;background:var(--sw);border:1.5px solid var(--line);border-radius:var(--r-md);
  padding:1.6rem 1.4rem;display:flex;flex-direction:column;gap:.9rem;box-shadow:var(--sh-sm);
  transition:transform .3s,box-shadow .3s,border-color .3s;
}
.price-card:hover{transform:translateY(-7px);box-shadow:var(--sh-md),0 0 0 4px color-mix(in srgb,var(--pc,var(--indigo)) 14%,transparent);border-color:color-mix(in srgb,var(--pc,var(--indigo)) 45%,var(--line))}
.price-card.pop{border-color:var(--indigo);box-shadow:var(--sh-lg)}
.p-flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--grad);color:#fff;font:700 .7rem var(--font-d);border-radius:999px;padding:.32rem .85rem;white-space:nowrap}
.p-name{font:700 1.05rem var(--font-d)}
.p-price{font:800 2rem var(--font-d);color:var(--ink)}
.p-price i{font:600 .8rem var(--font-b);font-style:normal;color:var(--ink-soft)}
.p-feat{display:flex;flex-direction:column;gap:.5rem;font-size:.86rem;color:var(--ink-soft)}
.p-feat li{list-style:none;padding-left:1.4rem;position:relative}
.p-feat li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:800}
.price-card .btn{margin-top:auto;justify-content:center}

.arow{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;align-items:center;padding:2.2rem 0}
.arow+.arow{border-top:1.5px dashed var(--line)}
.arow .aemoji{font-size:clamp(3.4rem,7vw,5rem);text-align:center;filter:drop-shadow(0 12px 24px rgba(67,56,202,.18))}
.arow h3{font-size:1.25rem;margin-bottom:.5rem}
.arow p{color:var(--ink-soft);font-size:.94rem}
.arow .tick-list{margin-top:.8rem}

.cta-band{position:relative;overflow:hidden;background:var(--ink);color:#fff;padding:3.4rem 0;text-align:center}
[data-theme="dark"] .cta-band{background:#171A38}
.cta-band h2{font:800 clamp(1.5rem,3.6vw,2.2rem) var(--font-d);margin-bottom:.5rem}
.cta-band p{color:#C9CEF0;margin-bottom:1.4rem}
.cta-band .mascot{width:82px;margin-bottom:.6rem}
.cta-band .hero-actions{justify-content:center}

.prose{max-width:760px;margin:0 auto;font-size:.96rem;color:var(--ink)}
.prose h2{font:700 1.25rem var(--font-d);margin:1.8rem 0 .6rem}
.prose p,.prose li{color:var(--ink-soft);line-height:1.75}
.prose ul{padding-left:1.2rem;margin:.6rem 0}
.pdate{font:600 .78rem var(--font-b);color:var(--ink-soft);letter-spacing:.03em;text-transform:uppercase}

.todo-box{
  background:#FFF7E8;border:1.5px dashed #E8B34B;border-radius:var(--r-md);
  padding:1.1rem 1.3rem;margin:1.4rem 0;font:600 .88rem var(--font-b);color:#8A5A00;
}
[data-theme="dark"] .todo-box{background:#3A2E17;border-color:#8A6A2B;color:#F0C36B}

.form-card{
  background:var(--sw);border:1.5px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);padding:clamp(1.4rem,3.5vw,2.2rem);max-width:560px;margin:0 auto;
}
.fld{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1rem}
.fld label{font:600 .8rem var(--font-b);color:var(--ink-soft)}
.fld input,.fld textarea,.fld select{
  border:1.5px solid var(--line);border-radius:12px;padding:.75rem .9rem;
  font:500 .92rem var(--font-b);color:var(--ink);background:var(--bg);
  transition:border-color .25s,box-shadow .25s;
}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:none;border-color:var(--indigo);box-shadow:0 0 0 4px rgba(67,56,202,.12)}
.form-card .btn{width:100%;justify-content:center}
.form-note{font:500 .76rem var(--font-b);color:var(--ink-soft);text-align:center;margin-top:.8rem}

.contact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;margin-bottom:2.2rem}
.ccard-info{
  background:var(--sw);border:1.5px solid var(--line);border-radius:var(--r-md);padding:1.4rem;
  display:flex;gap:.9rem;align-items:flex-start;box-shadow:var(--sh-sm);transition:transform .3s,box-shadow .3s;
}
.ccard-info:hover{transform:translateY(-5px);box-shadow:var(--sh-md)}
.ccard-info .ci{width:46px;height:46px;flex:none;border-radius:14px;display:grid;place-items:center;font-size:1.3rem;background:color-mix(in srgb,var(--cc,var(--indigo)) 14%,var(--sw))}
.ccard-info b{display:block;font:700 .95rem var(--font-d);margin-bottom:.15rem}
.ccard-info a,.ccard-info span{font-size:.86rem;color:var(--ink-soft);word-break:break-word}

.login-wrap{min-height:70vh;display:grid;place-items:center;padding:8.5rem 4% 4rem}
.login-card{max-width:400px;width:100%}
.login-card .brand{justify-content:center;margin-bottom:1.4rem}

@media (max-width:1100px){.price-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:920px){.arow{grid-template-columns:1fr;gap:1.2rem}.arow .aemoji{order:-1}}
@media (max-width:640px){
  .price-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .phero{padding:7.6rem 0 2.6rem}
}

/* ============================================================
   Scroll performance
   Added after the reskin: the page felt like it caught rather
   than glided. Two causes were fixed in script.js (a layout
   thrash in the scroll handler); this is the third.
   ============================================================ */

/* While the page is actually moving, stop the decorative loops.
   27 infinite animations run on this theme; together they eat the
   same frames the scroll needs. Transitions are untouched, so
   reveal-on-scroll still animates normally. */
html.is-scrolling *,
html.is-scrolling *::before,
html.is-scrolling *::after {
  animation-play-state: paused !important;
}

/* The sticky header blurs whatever is behind it. That blur is
   re-rasterised as content moves under it, which is the single
   most expensive thing on the page during a scroll. Promote it to
   its own layer so the compositor can reuse it, and drop the blur
   radius while moving. */
.nav {
  transform: translateZ(0);
  backface-visibility: hidden;
}
html.is-scrolling .nav {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Anyone who has asked their OS to reduce motion gets none of this. */
/* The reduced-motion rules moved to theme/motion-off.css, which is
   loaded through a media attribute so a visitor can override the OS
   default. See the motion toggle in the header. */


/* ============================================================
   All-tests catalogue (/psychometric-tests)
   Deliberately not .price-card: those are four tiers side by side,
   these are a dozen assessments that each need room to explain
   themselves. Wider cards, denser copy, and a jump bar so a parent
   on a phone is not scrolling past groups about other people's children.
   ============================================================ */
.tests-jump{display:flex;flex-wrap:wrap;gap:.6rem}
.tj-chip{
  display:inline-flex;align-items:center;gap:.45rem;background:var(--bg);border:1.5px solid var(--line);
  border-radius:999px;padding:.5rem 1rem;font:600 .85rem var(--font-d);color:var(--ink);
  text-decoration:none;transition:border-color .25s,transform .25s,background .25s;
}
.tj-chip:hover{border-color:var(--indigo);transform:translateY(-2px);background:var(--sw)}
.tj-chip i{font-style:normal;font-size:.72rem;font-weight:800;color:#fff;background:var(--indigo);
  border-radius:999px;min-width:1.25rem;padding:.05rem .4rem;text-align:center}

.tests-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:1.2rem}
.test-card{
  position:relative;background:var(--sw);border:1.5px solid var(--line);border-radius:var(--r-md);
  padding:1.5rem 1.4rem;display:flex;flex-direction:column;gap:.8rem;box-shadow:var(--sh-sm);
  transition:transform .3s,box-shadow .3s,border-color .3s;scroll-margin-top:6rem;
}
.test-card:hover{transform:translateY(-6px);box-shadow:var(--sh-md),0 0 0 4px color-mix(in srgb,var(--indigo) 12%,transparent);border-color:color-mix(in srgb,var(--indigo) 40%,var(--line))}
.tc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.tc-head h3{font-size:1.06rem;line-height:1.3;margin:0}
.tc-price{text-align:right;white-space:nowrap;line-height:1.15}
.tc-amount{display:block;font:800 1.5rem var(--font-d);color:var(--ink)}
.tc-price s{font-size:.8rem;color:var(--ink-soft);opacity:.75}
.tc-price i{display:block;font:600 .7rem var(--font-b);font-style:normal;color:var(--ink-soft)}
.tc-meta{display:flex;flex-wrap:wrap;gap:.4rem .9rem;font-size:.78rem;color:var(--ink-soft);margin:0}
.tc-desc{font-size:.9rem;color:var(--ink-soft);margin:0;line-height:1.65}
.tc-feat{display:flex;flex-direction:column;gap:.42rem;font-size:.84rem;color:var(--ink-soft);margin:0}
.tc-feat li{list-style:none;padding-left:1.35rem;position:relative}
.tc-feat li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:800}
.tc-actions{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:auto;padding-top:.4rem}

@media (max-width:620px){
  .tests-grid{grid-template-columns:1fr}
  .tc-head{flex-direction:column;gap:.35rem}
  .tc-price{text-align:left}
  .tc-amount{font-size:1.35rem}
}

/* ---------- Dark mode contrast fixes ----------
   The accent palette was only ever tuned against white. On the dark surfaces
   these colours were being asked to sit on, several dropped under 3:1 — the
   active nav item, breadcrumb links and every section eyebrow read at about
   2.2:1, which is a smudge rather than a word.

   Two whole components were invisible rather than merely dim: the announcement
   bar and the skip link both paint white text on var(--ink), and --ink flips to
   near-white in dark mode; the ghost button kept its hard-coded white fill
   under near-white text.

   Everything below is measured, not eyeballed — each rule notes the ratio it
   reaches against the surface it actually sits on.
   ---------------------------------------------------------------- */

/* Light indigo, ~8.8:1 on the card surface and ~9.4:1 on the page. */
[data-theme="dark"]{--accent:#A5B4FC}

/* background:var(--ink) + color:#fff is white-on-near-white once --ink flips. */
[data-theme="dark"] .topbar,
[data-theme="dark"] .skip-link{background:#232752;color:#fff}          /* 13.8:1 */

/* .btn-ghost hard-codes background:#fff, so the dark rule that only changed
   the text colour left near-white lettering on a white pill. */
[data-theme="dark"] .btn-ghost{background:#1B1F40;border-color:var(--line)}   /* 12.8:1 */

/* Chips whose pale fill is hard-coded: recolour the fill, not just the text. */
[data-theme="dark"] .mtag{background:#232752;color:var(--accent)}      /* 6.9:1 */

/* These two paint white on var(--indigo); --indigo is deliberately unchanged in
   dark, so they still read. Stated here so a later edit does not "helpfully"
   lighten them and break the white text. */
[data-theme="dark"] .tj-chip i,
[data-theme="dark"] .cp-chips a:hover{background:var(--indigo);color:#fff}


/* The highlighter band only covers 58%-92% of the line box, so most of the word
   sits on the page, not on the yellow. Dark ink over that was invisible except
   for the strip. Keep the text light and let the band glow behind it. */
[data-theme="dark"] .hl-marker{
  color:var(--ink);
  background:linear-gradient(180deg,transparent 58%,rgba(255,197,61,.30) 58% 92%,transparent 92%);
}
[data-theme="dark"] .hl-y{color:var(--yellow)}

/* ---------- Dark mode, second pass ----------
   Found by auditing all 17 public pages, not just the one that was reported.
   ---------------------------------------------------------------- */

/* The rest of the accent palette had the same problem as --indigo: tuned
   against white, unreadable on a dark card. The violet section numbers and the
   Clario greeting were sitting at 2.97:1.

   Safe to lighten these outright, unlike --indigo: the only place any of them
   is a background behind text is .tav, handled below. Everywhere else they are
   4px bars, dots and carets, where a lighter shade is if anything better. */
[data-theme="dark"]{
  --violet:#C4B5FD;   /* 9.7:1 on the card surface */
  --cyan:#67E8F9;     /* 11.0:1 */
  --green:#4ADE80;    /* 10.1:1 */
  --orange:#FDBA74;   /* 9.5:1  */
  --grad-text:linear-gradient(94deg,#A5B4FC,#C4B5FD 55%,#67E8F9);

  /* --grad is pinned to the original brand ramp. It is built from --violet and
     --cyan, so lightening those above silently repainted every primary button,
     the brand mark and the pricing flag - all of which carry WHITE text. The
     button label went to roughly 1.6:1 across the middle of the pill. Ten fills
     use this; none of them are text, so they keep the deep colours. */
  --grad:linear-gradient(94deg,#4338CA,#7C3AED 55%,#0E7490);
}

/* Two more components with a hard-coded white fill that dark mode never
   reached, so --ink text landed on white at 1.15:1. */
[data-theme="dark"] .msg.user{background:#232752;color:var(--ink)}     /* 11.2:1 */
[data-theme="dark"] .chip-mini{background:var(--bg-2);color:var(--ink-soft);border-color:var(--line)}

/* .tav puts white initials on the accent itself, which was 2.43:1 on cyan and
   2.61:1 on orange — failing in light mode too, not just dark. Darkening the
   circle keeps the colour coding and carries white text at 4.8:1 or better.
   Applied to both themes because both were wrong. */
/* 45%, not 60%: 60 is enough behind the deep light-mode accents but leaves the
   lightened dark ones at 3.3:1. At 45% the worst case in either theme - white on
   mixed #67E8F9 - clears 4.7:1, and the colour coding still reads. */
.tav{background:color-mix(in srgb,var(--tc) 45%,#171A3D)}

/* Chips in the "subjects you'd enjoy" strip hard-code a white fill and inherit
   --ink for text, which flips to near-white in dark: 1.15:1, the words vanish.
   The exam variant passes contrast but is a cream tile on a dark page, so it
   gets a dark surface with the same amber accent. */
[data-theme="dark"] .sp-chips span{background:var(--bg-2);border-color:var(--line);color:var(--ink)}
[data-theme="dark"] .sp-chips.exams span{background:#33240F;border-color:#5A431C;color:#F5C98B}

/* ---------- Light mode accent fixes ----------
   Dark mode needed these colours lighter; light mode needs them darker. Same
   split as --accent: fills keep the bright brand hues, words get a readable
   one. Measured on the surface each actually sits on.
   ---------------------------------------------------------------- */
[data-theme="dark"]{
  /* The base accents are already lightened for dark, so point back at them
     rather than keeping the deep light-mode values. */
  --accent-orange:var(--orange);
  --accent-green:var(--green);
  --accent-cyan:var(--cyan);
}
/* --jc is already light in dark mode; darkening it there would undo the fix. */
[data-theme="dark"] .jnum{color:var(--jc)}

/* The footer is #101331 in BOTH themes, so it is the one place on a light page
   that needs the LIGHT accent. Darkening the wordmark fixed the header (2.44 to
   4.85) and broke the footer copy of it in the same stroke, down to 3.5. The
   bright orange was always correct down here: 5.9:1. */
.footer .brand-name em{color:var(--orange)}

/* Tell the browser which mode it is in. Without this the page paints itself
   dark while the UA still believes it is light, so the parts CSS cannot reach
   stay light: scrollbars, the drop-down list a <select> opens, date pickers,
   spinner arrows, and the yellow autofill wash Chrome paints over saved values.
   Form fields themselves already set their own colour and background, so this
   only corrects the browser-drawn furniture around them. */
:root{color-scheme:light}
[data-theme="dark"]{color-scheme:dark}

/* ============================================================
   Daily quiz. One question on screen at a time — ten at once
   reads as a test, one at a time reads as a game, and the whole
   point is that a student comes back tomorrow.
   ============================================================ */
.qbar{display:flex;align-items:center;gap:1rem;margin-bottom:1.4rem;font:600 .84rem var(--font-b);color:var(--ink-soft)}
.qbar-track{flex:1;height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.qbar-track i{display:block;height:100%;background:var(--grad);transition:width .4s ease}

.qcard{display:none;background:var(--sw);border:1.5px solid var(--line);border-radius:var(--r-md);
  padding:1.8rem 1.6rem;box-shadow:var(--sh-sm)}
.qcard.is-on{display:block;animation:popin .32s backwards}
.qtag{display:inline-block;font:700 .7rem var(--font-d);letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent);background:var(--bg-2);border-radius:999px;padding:.28rem .7rem;margin-bottom:.9rem}
.qcard h3{font-size:1.18rem;line-height:1.45;margin-bottom:1.2rem}
.qopts{display:flex;flex-direction:column;gap:.6rem}
.qopt{text-align:left;padding:.85rem 1.1rem;border:1.5px solid var(--line);border-radius:12px;
  background:var(--bg);font:500 .95rem var(--font-b);color:var(--ink);cursor:pointer;
  transition:border-color .2s,transform .2s,background .2s}
.qopt:hover{border-color:var(--indigo);transform:translateX(3px)}
.qopt.is-picked{border-color:var(--indigo);background:color-mix(in srgb,var(--indigo) 10%,var(--bg))}

.qscore{display:flex;align-items:baseline;gap:1rem;margin-bottom:1rem}
.qscore b{font:800 2.6rem var(--font-d);background:var(--grad-text);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.qscore span{font:700 .9rem var(--font-d);color:var(--accent)}

.qrev{border-left:3px solid var(--line);padding:.7rem 0 .7rem 1rem;margin-bottom:.9rem}
.qrev.ok{border-color:var(--green)}
.qrev.no{border-color:var(--terra)}
.qrev-q{font-weight:600;font-size:.95rem;margin-bottom:.3rem}
.qrev-a{font-size:.86rem;color:var(--ink-soft);margin-bottom:.25rem}
.qrev-w{font-size:.84rem;color:var(--ink-soft);opacity:.88}

.qcta{margin-top:2rem;padding-top:1.6rem;border-top:1.5px dashed var(--line);text-align:center}
.qcta p{color:var(--ink-soft);margin-bottom:1rem}

/* Free snapshot card, shown inside the Clario chat after the ten questions. */
.snap{font-size:13px;line-height:1.6}
.snap-h{font:800 15px var(--font-d);color:var(--accent);margin-bottom:.4rem}
.snap-p{color:var(--ink);margin-bottom:.7rem}
.snap-s{margin:.7rem 0;padding-top:.6rem;border-top:1px solid var(--line)}
.snap-s b{font:700 12px var(--font-d);text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft)}
.snap-sub{display:block;color:var(--ink-soft);font-size:12.5px;margin-top:.2rem}
.snap-note{display:block;color:var(--ink-soft);font-size:12px;margin-top:.35rem;font-style:italic;opacity:.9}
.snap-job{display:flex;justify-content:space-between;gap:.6rem;padding:.28rem 0;font-size:12.5px}
.snap-job i{font-style:normal;color:var(--accent);font-weight:700;white-space:nowrap}
.snap-w{margin-top:.7rem;padding:.6rem .7rem;border-radius:10px;background:var(--bg-2);
  color:var(--ink-soft);font-size:12.5px}
.snap-cta{display:block;margin-top:.8rem;padding:.75rem .85rem;border-radius:12px;
  border:1.5px solid var(--accent-orange);background:var(--bg-2);text-decoration:none;
  box-shadow:none;transition:.16s}
.snap-cta:hover{border-color:var(--accent);box-shadow:0 6px 18px rgba(0,0,0,.10)}
.snap-cta b{display:block;font:800 13.5px var(--font-d);color:var(--ink);margin-bottom:.2rem}
.snap-cta span{display:block;color:var(--ink-soft);font-size:12.5px;line-height:1.5}
.snap-cta em{display:block;margin-top:.45rem;font-style:normal;font:800 12px var(--font-d);color:var(--accent)}

/* =========================================================
   Phone field sizes — deliberately the last thing in this file.

   Safari zooms the whole page in when a field smaller than 16px takes focus,
   and then leaves the visitor pinching their way back out to find the next
   one. The site's fields are .92rem, which is 14.7px.

   This has to sit after the rules it overrides, not up in the responsive
   section with the other phone rules: .fld input sets its size through the
   `font` shorthand at the same specificity, further down the file, and at
   equal specificity the later rule wins. Written up there it lost silently.
   ========================================================= */
@media (max-width:640px){
  .fld input,.fld textarea,.fld select,
  .form-card input,.form-card textarea,.form-card select,
  input[type=text],input[type=email],input[type=tel],input[type=number],
  input[type=password],input[type=search],select,textarea{font-size:16px}
}