@font-face{font-family:'Newsreader';src:url(assets/fonts/newsreader.woff2) format('woff2');font-style:normal;font-weight:200 800;font-display:swap}@font-face{font-family:'Newsreader';src:url(assets/fonts/newsreader-italic.woff2) format('woff2');font-style:italic;font-weight:200 800;font-display:swap}@font-face{font-family:'Kalam';src:url(assets/fonts/kalam.woff2) format('woff2');font-style:normal;font-weight:400;font-display:swap}
:root{--ggb:url(assets/img/ggb.webp);--ftb:url(assets/img/ftb.webp);--plane:url(assets/img/plane.webp);--gull:url(assets/img/gull.webp)}
:root{--plate:url(assets/img/plate.webp);--paper:url(assets/img/paper.webp);--swift:url(assets/img/swift.webp);--pigeon:url(assets/img/pigeon.webp);--pigeonfly:url(assets/img/pigeonfly.webp);--cat:url(assets/img/cat.webp);--student:url(assets/img/student.webp)}
/* WriteWise R4 · Ink and Instrument · Saturn Labs build chat */
:root{
  /* Manushri's palette (9 Oct): navy, sky blue, butter yellow, sunny gold, gold ink, thread gold, beige, stone, white. No red, no sage.
     Rough mix on any screen: 60% paper and white, 25% blue, yellow and beige, 10% navy, 5% gold. */
  --navy:#1B2A4A; --navy-d:#131F36; --navy-2:#24365C;
  --sky:#D6E4F5; --butter:#FBEFC2; --sun:#E2B65A; --gold-d:#8C6D3F; --gold:#B08D57; --beige:#F4E8CF; --stone:#F6F3EC; --white:#FFFFFF;
  --gold-b:var(--sun); --pale:var(--beige); --stone2:#EFEAE0;   /* older names, kept as aliases of the palette (stone2 is stone's shadow tone) */
  --paper-bg:#FAF7F0;   /* Manushri's paper: crumpled, warmed to her swatch #FAF7F0 (change 15) */
  --page:var(--paper-bg);
  --strike:rgba(27,42,74,.6);   /* crossing things out: navy at 60%, never red */
  --note:var(--gold-d);         /* editor notes and handwritten marks */
  --ink:#1B2A4A; --ink70:#3A4660; --ink50:#6B7489; --ink30:#A3A9B7;
  --line:#E7E2D6; --line2:#D9D2C1;
  --serif:"Newsreader","Iowan Old Style",Georgia,serif;
  --hand:"Kalam","Bradley Hand",cursive;
  /* the only text sizes on the site: one for section headings (every h2), one for everything else.
     Kalam is drawn smaller than Newsreader, so it runs at 1.15x body to read at the same size.
     Exceptions sized on their own: the hero headline, the big statistic numbers, the wordmark,
     text drawn inside scaled illustrations, and legal footnotes (--fs-legal). */
  --fs-h2:48px; --lh-h2:1.1;
  --fs-body:19px; --lh-body:1.55;
  --fs-hand:calc(var(--fs-body) * 1.15);
  --fs-legal:14px;
  --ease:cubic-bezier(.16,1,.3,1);
  --shadow:0 2px 5px rgba(32,32,32,.04),0 10px 28px rgba(32,32,32,.07);
  --shadow-lg:0 4px 10px rgba(32,32,32,.05),0 22px 48px rgba(32,32,32,.10);
  --r:28px; --r-sm:16px;
  --wrap:1240px; --gut:32px; --nav:72px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
/* pages are hash routes: a two-finger trackpad swipe would otherwise run the browser's back/forward and jump pages. Stop swipe-to-navigate */
html,body{overscroll-behavior-x:none}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--page);color:var(--ink);font:400 var(--fs-body)/var(--lh-body) var(--serif);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
::selection{background:var(--pale)}
.wrap{max-width:calc(var(--wrap) + var(--gut)*2);margin:0 auto;padding:0 var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- type ---------- */
/* section labels are small coloured tags (sky by default; app.js varies sky, butter and beige down each page, and uses sunny gold on navy) */
.eyebrow{font:500 var(--fs-body)/1 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--navy);display:flex;width:fit-content;gap:10px;align-items:center;margin:0 0 22px;padding:7px 12px;border-radius:8px;background:var(--sky)}
.eyebrow.tg-butter{background:var(--butter)}.eyebrow.tg-beige{background:var(--beige)}.eyebrow.tg-sky{background:var(--sky)}
.eyebrow.tg-sun,.band-navy .eyebrow,.cloud2 .eyebrow,.close .eyebrow{background:var(--sun);color:var(--navy)}
.eyebrow b{font-weight:500;color:var(--ink30)}
.h1,.h2,.h3{font-family:var(--serif);font-weight:400;letter-spacing:-.018em;color:var(--ink);margin:0;font-variation-settings:"opsz" 72}
.h1{font-size:clamp(38px,4vw,64px);line-height:1.04}
.h1 em{font-style:italic;color:var(--gold)}
.h2{font-size:var(--fs-h2);line-height:1.06;max-width:17ch}
.h3{font-size:var(--fs-body);line-height:1.15;letter-spacing:-.01em}
.lede{font-size:var(--fs-body);line-height:1.6;color:var(--ink70);max-width:56ch;margin:22px 0 0}
.small{font-size:var(--fs-body);color:var(--ink50)}
.mono{font-family:var(--serif);font-size:var(--fs-body);letter-spacing:.06em}
.muted{color:var(--ink50)}
.note-ph{font:500 var(--fs-body)/var(--lh-body) var(--serif);letter-spacing:.06em;color:var(--ink30);font-variant-caps:all-small-caps}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;border:0;border-radius:999px;padding:14px 22px;font:500 var(--fs-body)/1 var(--serif);transition:transform .5s var(--ease),background .4s var(--ease),box-shadow .5s var(--ease);white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn .ar{transition:transform .5s var(--ease)}
.btn:hover .ar{transform:translateX(3px)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-2);box-shadow:0 10px 24px rgba(27,42,74,.22)}
.btn-ghost{background:rgba(255,255,255,.86);color:var(--navy);box-shadow:inset 0 0 0 1px var(--line2);backdrop-filter:blur(6px)}
.btn-ghost:hover{background:#fff}
.btn-gold{background:var(--gold-b);color:var(--navy-d)}
.btn-gold:hover{background:#EAC274}
.btn-2l{flex-direction:column;align-items:flex-start;gap:5px;padding:13px 22px 12px;border-radius:18px}
.btn-2l small{font:400 var(--fs-body)/1 var(--serif);letter-spacing:.02em;opacity:.7}
.btn-2l b{font-weight:500;display:flex;gap:8px}
.link{color:var(--gold-d);font-weight:500;display:inline-flex;gap:8px;align-items:center;border-bottom:1px solid transparent;transition:border-color .4s}
.link:hover{border-color:currentColor}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--nav);transition:background .5s var(--ease),box-shadow .5s var(--ease)}
.nav .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav.solid{background:color-mix(in srgb,var(--paper-bg) 94%,transparent);backdrop-filter:saturate(1.4) blur(12px);box-shadow:0 1px 0 var(--line)}
.brand{font:400 25px/1 var(--serif);letter-spacing:-.02em;display:flex;align-items:baseline}
.brand i{font-style:italic;color:var(--gold)}
.nav-l{display:flex;gap:4px;align-items:center}
.nav-l a{font:450 var(--fs-body)/1 var(--serif);color:var(--ink70);padding:9px 12px;border-radius:999px;transition:color .3s,background .3s}
.nav-l a:hover{color:var(--ink);background:rgba(27,42,74,.05)}
.nav-l a.on{color:var(--ink);background:rgba(27,42,74,.06)}
.nav .btn{padding:11px 18px;font-size:var(--fs-body)}
.nav-prog{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--gold);transform-origin:0 50%;transform:scaleX(0);opacity:.85}
.nav-burger{display:none;width:44px;height:44px;border:0;background:transparent;border-radius:12px}
.nav-burger span{display:block;width:20px;height:1.5px;background:var(--navy);margin:5px auto;transition:transform .4s var(--ease)}

/* ---------- pages ---------- */
.pg{display:none}
.pg.on{display:block;animation:pgIn .2s ease-out both}   /* a short fade, so a real page change is always visible */
@keyframes pgIn{from{opacity:0}to{opacity:1}}
.pg-top{padding-top:calc(var(--nav) + 72px)}

/* ---------- sections ---------- */
.sec{padding:clamp(88px,10vw,144px) 0}
.sec-tight{padding:clamp(64px,7vw,96px) 0}
.sec-head{display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:end;margin-bottom:56px}
.sec-head .lede{margin:0;justify-self:end;max-width:46ch}
.panel{background:var(--stone);border-radius:var(--r);padding:clamp(28px,4.4vw,64px)}
.panel.pale{background:var(--pale)}
.panel.navy{background:var(--navy);color:#fff}
.inset{margin:0 24px}

/* reveal */
.rv{opacity:0;transform:translateY(24px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}.rv.d4{transition-delay:.32s}

/* ---------- hero ---------- */
.hero{position:relative;background:transparent}   /* the hero sits on the same warm paper as every other section (.pg carries --paper-bg and the texture) */
.hero-stage{position:relative;width:100%;overflow:hidden;height:min(calc(100vw / 2 + var(--nav) + 36px),100vh);min-height:560px;background:none}
.hero-stage::before{display:none}   /* the page texture already runs under the hero */
.hero-box{position:absolute;left:0;right:0;aspect-ratio:2/1;top:calc(var(--nav) + 36px + min(0px,calc(min(calc(100vw / 2 + var(--nav) + 36px),100vh) - var(--nav) - 36px - 100vw / 2 * .95)))}
.hero-plate{position:absolute;inset:0;background:var(--plate) 0 0/100% 100% no-repeat;z-index:2;animation:hIn 1.6s var(--ease) both .1s}
@keyframes hIn{from{opacity:0}to{opacity:1}}
.hero-copy{position:absolute;z-index:6;top:calc(var(--nav) + clamp(4px,1.4vw,28px));left:0;right:0}
.hero-copy .inner{max-width:clamp(440px,45vw,680px)}
.hero-copy .h1{font-size:clamp(34px,3.3vw,56px);text-wrap:balance}
.hero-copy .lede{font-size:var(--fs-body);max-width:58ch;margin-top:16px}
.hero-cta{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
.hero-copy .h1,.hero-copy .lede,.hero-cta{opacity:0;transform:translateY(16px);animation:hUp 1.2s var(--ease) forwards}
.hero-copy .lede{animation-delay:.12s}.hero-cta{animation-delay:.24s}
.hero.h-wait .hero-copy .lede,.hero.h-wait .hero-cta{animation:none}   /* landing: the subtitle and button wait for the headline to unscramble, then fade up under it */
#page-home .hero-copy .lede,#page-home .hero-cta{animation-duration:.7s}
@keyframes hUp{to{opacity:1;transform:none}}
.hero-pause{position:absolute;z-index:7;left:20px;bottom:calc((var(--fnd-h) - 36px) / 2);font:500 var(--fs-body)/1 var(--serif);letter-spacing:.04em;color:var(--navy);background:rgba(255,255,255,.9);border:0;box-shadow:inset 0 0 0 1px var(--line2);border-radius:999px;padding:8px 13px;opacity:.75;transition:opacity .3s}
.hero-pause:hover{opacity:1}
/* sprites: all positions in % of the 1774x887 plate */
.hero-sky,.hero-life{position:absolute;inset:0;pointer-events:none;z-index:2}
.hero-life{z-index:3}
.hero-plate{z-index:2}
/* hero top-ups (Raghav, design-refs/hero-topup): the drawn bench is painted out of the plate and a new bench with a reader replaces it,
   and one more walker with a dog */
.hero-plate{background-image:url(assets/img/topup/plate-nobench.webp)}
.tu-reader{position:absolute;left:40.13%;width:3.45%;top:calc(83.7% - 4.72%);aspect-ratio:240/164}
.tu-reader img{display:block;width:100%;height:100%}
.wk.tu-dog img{height:100%}
/* change 16: the loose essay page is back, one sprite, smooth: it drifts across the sky on a soft wave, rocks about 12deg and flutters,
   behind the tower and the trees (the plate's sky is transparent), for about 16s, then rests about 50s off screen */
.tu-page{position:absolute;z-index:1;left:102%;top:6%;width:2.8%;max-width:40px;aspect-ratio:103/110;opacity:0;pointer-events:none;animation:tuDrift 66s linear infinite 14s}
.tu-wave{width:100%;height:100%;animation:tuWave 2.7s ease-in-out infinite alternate}
.tu-wave img{display:block;width:100%;height:100%;animation:tuRock 3.3s ease-in-out infinite alternate,tuFlut 1.6s ease-in-out infinite alternate}
@keyframes tuDrift{0%{left:102%;top:6%;opacity:1}22%{opacity:1}24.2%{left:58%;top:40%;opacity:0}24.3%,100%{left:102%;top:6%;opacity:0}}
@keyframes tuWave{from{translate:0 -45%}to{translate:0 45%}}
@keyframes tuRock{from{rotate:-12deg}to{rotate:12deg}}
@keyframes tuFlut{from{scale:.85 1}to{scale:1 1}}
@media (prefers-reduced-motion:reduce){.tu-page{display:none}}
@media (max-width:599px){.tu-reader,.hero-life .cat{display:none}}   /* the phone crop cuts the bench at the left edge: no half bench */
.cl{position:absolute;opacity:0;--o:.4;animation:clDrift linear infinite}
.cl img{width:100%}
.cl.c1{top:5%;width:9%;animation-duration:190s;animation-delay:-60s}
.cl.c2{top:11%;width:6.5%;animation-duration:220s;animation-delay:-140s;--o:.32}
.cl.c3{top:19%;width:5.5%;animation-duration:170s;animation-delay:-25s;--o:.28}
@keyframes clDrift{0%{left:50%;opacity:0}8%{opacity:var(--o)}92%{opacity:var(--o)}100%{left:104%;opacity:0}}
/* swifts round the spire */
.sw{position:absolute;left:67.4%;top:15%;width:1.05%;aspect-ratio:59/40;offset-rotate:0deg}
.sw i{position:absolute;inset:0;background:var(--swift) 0 0/400% 100% no-repeat;animation:swf .44s steps(4) infinite}
@keyframes swf{to{background-position:133.333% 0}}
.sw.s1{animation:circ1 15s linear infinite}
.sw.s2{width:.85%;animation:circ2 19s linear infinite -6s}
.sw.s3{width:.75%;animation:circ1 23s linear infinite -14s;top:21%}
@keyframes circ1{0.00%{transform:translate(-700%,80%) scaleX(1)}6.25%{transform:translate(-647%,-12%) scaleX(1)}12.50%{transform:translate(-495%,-90%) scaleX(1)}18.75%{transform:translate(-268%,-142%) scaleX(1)}25.00%{transform:translate(-0%,-160%) scaleX(1)}31.25%{transform:translate(268%,-142%) scaleX(1)}37.50%{transform:translate(495%,-90%) scaleX(1)}43.75%{transform:translate(647%,-12%) scaleX(1)}50.00%{transform:translate(700%,80%) scaleX(-1)}56.25%{transform:translate(647%,172%) scaleX(-1)}62.50%{transform:translate(495%,250%) scaleX(-1)}68.75%{transform:translate(268%,302%) scaleX(-1)}75.00%{transform:translate(0%,320%) scaleX(-1)}81.25%{transform:translate(-268%,302%) scaleX(-1)}87.50%{transform:translate(-495%,250%) scaleX(-1)}93.75%{transform:translate(-647%,172%) scaleX(-1)}100.00%{transform:translate(-700%,80%) scaleX(1)}}
@keyframes circ2{0.00%{transform:translate(770%,380%) scaleX(-1)}6.25%{transform:translate(533%,464%) scaleX(-1)}12.50%{transform:translate(215%,512%) scaleX(-1)}18.75%{transform:translate(-135%,517%) scaleX(-1)}25.00%{transform:translate(-466%,478%) scaleX(-1)}31.25%{transform:translate(-725%,402%) scaleX(-1)}37.50%{transform:translate(-874%,299%) scaleX(-1)}43.75%{transform:translate(-890%,186%) scaleX(1)}50.00%{transform:translate(-770%,80%) scaleX(1)}56.25%{transform:translate(-533%,-4%) scaleX(1)}62.50%{transform:translate(-215%,-52%) scaleX(1)}68.75%{transform:translate(135%,-57%) scaleX(1)}75.00%{transform:translate(466%,-18%) scaleX(1)}81.25%{transform:translate(725%,58%) scaleX(1)}87.50%{transform:translate(874%,161%) scaleX(1)}93.75%{transform:translate(890%,274%) scaleX(-1)}100.00%{transform:translate(770%,380%) scaleX(-1)}}
.clock{position:absolute;z-index:4;left:calc(66.855% - .958%);top:calc(36.98% - 1.916%);width:1.916%;aspect-ratio:1}
.clock svg{width:100%;height:100%;overflow:visible}
.clock line{stroke:var(--navy);stroke-linecap:round}
.clock .hh{stroke-width:1.3}.clock .mh{stroke-width:.85}
.clock circle{fill:var(--navy)}
.bell{position:absolute;z-index:4;left:67.47%;top:29.5%;width:0;height:0}
.bell i{position:absolute;left:0;top:0;width:2.4vw;height:2.4vw;margin:-1.2vw 0 0 -1.2vw;border:1px solid rgba(27,42,74,.45);border-radius:50%;opacity:0;transform:scale(.4)}
.bell.ring i{animation:ring 3.2s ease-out forwards}
.bell.ring i:nth-child(2){animation-delay:.45s}.bell.ring i:nth-child(3){animation-delay:.9s}
@keyframes ring{0%{opacity:0;transform:scale(.4)}12%{opacity:.7}100%{opacity:0;transform:scale(3.4)}}
/* walkers: path lane (feet 83.9%) and lower lawn (feet 91.6%) */
.wk{position:absolute;left:-6%;animation:walkR linear infinite;will-change:left}
.wk.l{animation-name:walkL}
.wk img{position:absolute;left:0;bottom:0;height:100%;width:auto;max-width:none}
.wk .fa{position:relative}
.wk .fb{opacity:0}
.wk .fa,.wk .fb{animation:fa 1.1s steps(1,end) infinite}   /* stride matches the ground speed (about .38 of a body height per step), so the feet don't slide */
.wk .fb{animation-name:fb}
.wk.l img{transform:scaleX(-1)}
.wk.l.nf img{transform:none}
.wk.dist{height:4.4%;top:calc(75.4% - 4.4%);opacity:.92}
.wk.mid{height:6%;top:calc(84% - 6%)}
.wk.near{height:7%;top:calc(87% - 7%)}   /* clear of the founders strip at 1280x720 and 1366x768 */
.wk.bike{height:6.6%;top:calc(84.3% - 6.6%)}
.wk.bike .fa,.wk.bike .fb{animation-duration:.5s}
@keyframes walkR{from{left:-6%}to{left:104%}}
@keyframes walkL{from{left:104%}to{left:-6%}}
@keyframes fa{0%{opacity:1}50%{opacity:0}}
@keyframes fb{0%{opacity:0}50%{opacity:1}}
@keyframes bob{to{transform:translateY(-3%)}}
/* graduates on the upper lawn */
.grads{position:absolute;left:24%;top:calc(79.2% - 5.3%);width:3.6%;height:5.3%}
.grads img.g{position:absolute;left:0;bottom:0;width:100%}
.grads .gd{animation:gd 18s steps(1,end) infinite}
.grads .gu{opacity:0;animation:gu 18s steps(1,end) infinite}
@keyframes gd{0%{opacity:1}68%{opacity:0}86%{opacity:1}}
@keyframes gu{0%{opacity:0}68%{opacity:1}86%{opacity:0}}
.gcap{position:absolute;width:13%;top:4%;opacity:0;animation:toss 18s cubic-bezier(.25,.6,.35,1) infinite}
.gcap img{width:100%}
@keyframes toss{0%,68%{opacity:0;transform:translate(0,0) rotate(0)}68.5%{opacity:1;transform:translate(0,0) rotate(0)}75%{opacity:1;transform:translate(var(--dx),-560%) rotate(var(--r))}82%{opacity:1;transform:translate(calc(var(--dx)*1.6),-60%) rotate(calc(var(--r)*2))}85%,100%{opacity:0;transform:translate(calc(var(--dx)*1.7),0) rotate(calc(var(--r)*2.2))}}
/* the cat on the bench */
.cat{position:absolute;left:40.35%;top:calc(82.1% - 2.01%);width:1.2%;   /* asleep on the free end of the new bench */
  aspect-ratio:179/150;background:var(--cat) 0 0/600% 100% no-repeat}
.cat[data-f="1"]{background-position:20% 0}.cat[data-f="2"]{background-position:40% 0}.cat[data-f="3"]{background-position:60% 0}.cat[data-f="4"]{background-position:80% 0}.cat[data-f="5"]{background-position:100% 0}
/* the student writing under the big tree */
.writer{position:absolute;left:82.3%;top:calc(75.4% - 3.34%);width:1.95%;aspect-ratio:210/180;background:var(--student) 0 0/300% 100% no-repeat}
.writer[data-f="1"]{background-position:50% 0}.writer[data-f="2"]{background-position:100% 0}
.leaf{position:absolute;top:52%;width:.55%;opacity:0;animation:leaf 16s linear infinite}
.leaf img{width:100%;animation:spin 3.2s ease-in-out infinite alternate}
.leaf.l1{left:84.5%}.leaf.l2{left:86.5%;animation-delay:-5s;animation-duration:19s}.leaf.l3{left:83%;animation-delay:-10s;animation-duration:22s}.leaf.l4{left:88%;animation-delay:-14s;animation-duration:25s;width:.45%}
@keyframes leaf{0%{transform:translate(0,0);opacity:0}4%{opacity:.9}30%{transform:translate(-120%,1400%)}46%{transform:translate(60%,2600%);opacity:.9}52%,100%{transform:translate(20%,3000%);opacity:0}}
@keyframes spin{from{transform:rotate(-35deg)}to{transform:rotate(40deg) scaleX(-1)}}
/* pigeons on the lower lawn; now and then one takes off */
.pig{position:absolute;width:.85%;aspect-ratio:88/64}
.pig.p1{left:15.5%;top:calc(87.3% - 1.24%)}
.pig.p2{left:17.4%;top:calc(86.9% - 1.1%);width:.75%}
.pg-g{position:absolute;inset:0;background:var(--pigeon) 0 0/300% 100% no-repeat}
.pg-g[data-f="1"]{background-position:50% 0}.pg-g[data-f="2"]{background-position:100% 0}
.pg-f{position:absolute;inset:-10% 10%;background:var(--pigeonfly) 0 0/200% 100% no-repeat;opacity:0}
.pig.fly .pg-g{opacity:0;transition:opacity .1s}
.pig.fly .pg-f{opacity:1;animation:pflap .22s steps(2) infinite,pfly 3.4s cubic-bezier(.4,.1,.8,.6) forwards}
@keyframes pflap{to{background-position:200% 0}}
@keyframes pfly{0%{transform:translate(0,0)}100%{transform:translate(900%,-1500%);opacity:0}}
.pig.back .pg-g{animation:pin 1.2s ease both}
@keyframes pin{from{opacity:0}to{opacity:1}}
body.still .hero *{animation-play-state:paused!important}

/* ---------- founders strip: the last line of the hero, inside its white fade ---------- */
:root{--fnd-h:52px}
.fnd{position:absolute;left:0;right:0;bottom:0;z-index:5;height:var(--fnd-h);display:flex;align-items:center;justify-content:center;gap:18px;padding:0 176px;   /* clear of the pause button at its left */
  /* the strip is the page paper itself, its texture shifted (--fy, set in app.js) so it lines up with the paper behind it, faded in at the top */
  background:linear-gradient(rgba(255,252,245,.75),rgba(255,252,245,.75)),url(assets/img/paper.webp) 0 var(--fy,0px)/760px 760px repeat,#FFFCF5;background-blend-mode:normal,multiply,normal;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 42%);mask-image:linear-gradient(180deg,transparent,#000 42%)}
.fnd-k{margin:0;flex:none;font:500 var(--fs-body)/1 var(--serif);font-variant-caps:all-small-caps;letter-spacing:.06em;color:rgba(27,42,74,.5)}
.fnd-vp{min-width:0;overflow:hidden}
.fnd-list{display:flex;list-style:none;margin:0;padding:0;width:max-content;white-space:nowrap}
.fnd-list li{font:400 var(--fs-body)/1.3 var(--serif);color:rgba(27,42,74,.72)}
.fnd-list li+li::before{content:"\00B7";margin:0 .7em;color:rgba(27,42,74,.35)}
/* too long for the line: the names scroll slowly (two copies, moved by half) */
.fnd-track{display:flex;width:max-content;animation:fndRun 30s linear infinite}
@keyframes fndRun{to{transform:translateX(-50%)}}
.fnd.run .fnd-list li+li::before{content:none}
.fnd.run .fnd-list li::after{content:"\00B7";margin:0 .7em;color:rgba(27,42,74,.35)}
.fnd.run .fnd-vp{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
/* reduced motion: no scrolling, the names wrap instead */
.fnd.wrapd .fnd-list{display:block;width:auto;text-align:center}
.fnd.wrapd .fnd-list li{display:inline;white-space:nowrap}
.fnd.wrapd .fnd-list li+li::before{margin:0 .3em}
/* a name that starts a line: the line breaks before it, and it has no dot */
.fnd.wrapd .fnd-list li.nl::before{content:"\A";white-space:pre;margin:0}
.fnd.wrapd .fnd-list li.nd::before{content:none}   /* only while measuring */
@media (max-width:900px){
  :root{--fnd-h:84px}
  .fnd{position:relative;flex-direction:column;gap:8px;padding:0 0 6px}
  .fnd-vp{align-self:stretch;display:flex;justify-content:center}
}

/* founded-by row */
.founded{border-bottom:1px solid var(--line);background:#fff}
.founded .wrap{display:flex;align-items:center;gap:40px;padding-top:26px;padding-bottom:26px;flex-wrap:wrap}
.founded .k{font:500 var(--fs-body)/1 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--ink50);white-space:nowrap}
.founded ul{display:flex;gap:clamp(20px,3.4vw,52px);list-style:none;margin:0;padding:0;flex-wrap:wrap;align-items:center}
.founded li{font:400 var(--fs-body)/1 var(--serif);color:var(--ink50);letter-spacing:-.005em;white-space:nowrap}

/* ---------- closing CTA + form ---------- */
.close{padding:0 24px clamp(24px,3vw,32px)}
.close .panel.navy{padding:clamp(40px,6vw,88px);display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,4vw,64px) clamp(32px,5vw,80px);align-items:center}
.close .h2{color:#fff;max-width:12ch}
.close .lede{color:rgba(255,255,255,.72)}
.close .alt{margin-top:28px;font-size:var(--fs-body);color:rgba(255,255,255,.62)}
.close .alt a{color:var(--gold-b)}
.cform{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cform label{display:flex;flex-direction:column;gap:8px;font:500 var(--fs-body)/1 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:rgba(255,255,255,.6)}
.cform label.full{grid-column:1/-1}
.cform input,.cform select,.cform textarea{font:400 var(--fs-body)/var(--lh-body) var(--serif);color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:14px 16px;outline:none;transition:border-color .4s,background .4s,transform .5s var(--ease)}
.cform textarea{min-height:110px;resize:vertical}
.cform select option{color:var(--navy)}
.cform input:focus,.cform select:focus,.cform textarea:focus{border-color:var(--gold-b);background:rgba(255,255,255,.09);transform:translateY(-1px)}
.cform .row{grid-column:1/-1;display:flex;align-items:center;gap:18px;margin-top:6px;flex-wrap:wrap}
.cform .ok{font:400 var(--fs-body)/1.2 var(--serif);color:var(--gold-b);opacity:0;transition:opacity .8s var(--ease);font-style:italic}
.cform.sent .ok{opacity:1}

/* ---------- footer ---------- */
.foot{position:relative;background:var(--navy-d);color:rgba(255,255,255,.72);overflow:hidden;margin-top:0}
.foot::before{content:"";position:absolute;inset:0;background:var(--paper) 0 0/760px 760px;mix-blend-mode:multiply;opacity:.35;pointer-events:none}
.foot>*{position:relative}
.foot .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;padding-top:48px;padding-bottom:48px}
.foot h4{font:500 var(--fs-body)/1 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:rgba(255,255,255,.45);margin:0 0 18px}
.foot .cols a{display:block;font-size:var(--fs-body);color:rgba(255,255,255,.78);padding:5px 0;transition:color .3s}
.foot .cols a:hover{color:#fff}
.foot .about p{margin:0;max-width:34ch;font-size:var(--fs-body);line-height:1.6}
.foot .sig{font:400 var(--fs-body)/1 var(--serif);color:var(--gold-b);margin-top:24px;display:inline-block;white-space:nowrap}
.foot .sky{--aw:min(100vw,1534px);position:relative;height:calc(var(--aw) * .30);margin-top:0;-webkit-mask-image:linear-gradient(180deg,#000 50%,transparent 96%);mask-image:linear-gradient(180deg,#000 50%,transparent 96%)}
.foot .sky i{position:absolute;left:50%;top:0;width:var(--aw);height:calc(var(--aw) * 900 / 1536);background:var(--gold-b);opacity:.3;-webkit-mask:var(--plate) 0 0/100% 100% no-repeat;mask:var(--plate) 0 0/100% 100% no-repeat;transform:translate(-50%,-27%);clip-path:inset(0 100% 0 0);transition:clip-path 2.6s var(--ease)}
.foot.in .sky i{clip-path:inset(0 0 0 0)}
/* footer art: drawn for widths up to 1534px. Wider screens centre it at that size (so the top is never cut) and fade its side edges;
   phones show it at 150% so the landmarks are big enough to read */
@media (min-width:1535px){.foot .sky{-webkit-mask-image:linear-gradient(180deg,#000 50%,transparent 96%),linear-gradient(90deg,transparent calc(50% - 767px),#000 calc(50% - 560px),#000 calc(50% + 560px),transparent calc(50% + 767px));-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,#000 50%,transparent 96%),linear-gradient(90deg,transparent calc(50% - 767px),#000 calc(50% - 560px),#000 calc(50% + 560px),transparent calc(50% + 767px));mask-composite:intersect}}
@media (max-width:640px){.foot .sky{--aw:150vw;overflow-x:clip}}
.foot .legal{position:absolute;left:0;right:0;bottom:18px;z-index:2}
.foot .legal .wrap{display:flex;justify-content:space-between;gap:16px;font:400 var(--fs-legal)/1 var(--serif);color:rgba(255,255,255,.5);flex-wrap:wrap}
.foot .legal a{margin-left:20px}
.foot .legal a:hover{color:#fff}

/* review badge */
.rbadge{position:fixed;right:16px;bottom:16px;z-index:60;font:500 var(--fs-body)/1 var(--serif);letter-spacing:.06em;background:var(--navy);color:#fff;border:0;border-radius:999px;padding:9px 13px;opacity:.88;box-shadow:var(--shadow)}
.rnotes{position:fixed;right:16px;bottom:56px;z-index:61;width:min(420px,calc(100vw - 32px));max-height:70vh;overflow:auto;background:#fff;border-radius:20px;box-shadow:var(--shadow-lg);padding:22px 24px;font-size:var(--fs-body);line-height:1.55;display:none}
.rnotes.on{display:block}
.rnotes h4{font:400 var(--fs-body)/1.2 var(--serif);margin:0 0 10px}
.rnotes ul{padding-left:18px;margin:8px 0}
.rnotes li{margin:4px 0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .rv{opacity:1;transform:none}
  .hero-copy .lede,.hero-cta{animation-delay:0s!important}   /* no staggered wait for the subtitle and button */
}
/* ---------- journey ---------- */
.jr-track{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-bottom:28px}
.jr-line{position:absolute;left:0;right:0;top:18px;height:1px;background:var(--line2)}
.jr-line i{position:absolute;inset:0;background:var(--gold);transform-origin:0 50%;transform:scaleX(var(--p,0));transition:transform .2s linear}
.jr-step{position:relative;text-align:left;background:none;border:0;padding:0 18px 22px 0;display:flex;flex-direction:column;gap:6px}
.jr-step .n{position:relative;z-index:1;display:inline-grid;place-items:center;width:37px;height:37px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px var(--line2);font:500 var(--fs-body)/1 var(--serif);color:var(--ink50);margin-bottom:16px;transition:all .6s var(--ease)}
.jr-step b{font:600 var(--fs-body)/1.15 var(--serif);letter-spacing:-.01em;color:var(--ink);transition:color .4s}
.jr-step>span:last-child{font-size:var(--fs-body);color:var(--ink50);max-width:22ch}
.jr-step::after{content:"";position:absolute;left:0;right:18px;bottom:0;height:2px;background:var(--navy);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease)}
.jr-step:hover b{color:var(--gold-d)}
.jr-step.on .n{background:var(--navy);color:#fff;box-shadow:none}
.jr-step.on::after{transform:scaleX(1)}
.jr-step.lit .n{box-shadow:inset 0 0 0 1px var(--gold);color:var(--gold-d)}
.jr-step.on.lit .n{box-shadow:none;color:#fff}
.jr-detail{position:relative;display:grid;min-height:340px}
.jr-pane{grid-area:1/1;display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .6s var(--ease),transform .7s var(--ease),visibility 0s .6s}
.jr-pane.on{opacity:1;visibility:visible;transform:none;transition:opacity .7s var(--ease) .1s,transform .8s var(--ease) .1s,visibility 0s}
.jr-pane .h3{max-width:20ch}
.jr-pane .lede{font-size:var(--fs-body);margin:16px 0 22px}
.mini{background:#fff;border-radius:20px;box-shadow:var(--shadow);padding:24px;font-size:var(--fs-body)}
.mini-chat .mc-row{max-width:88%;padding:12px 15px;border-radius:14px;margin-bottom:10px;line-height:1.45}
.mini-chat .q{background:var(--stone);border-top-left-radius:4px}
.mini-chat .a{background:var(--navy);color:#fff;margin-left:auto;border-top-right-radius:4px}
.mc-foot,.ml-h{font:500 var(--fs-body)/1 var(--serif);letter-spacing:.06em;color:var(--ink50);display:flex;gap:8px;align-items:center;margin-top:14px;font-variant-caps:all-small-caps}
.dot{width:7px;height:7px;border-radius:50%;background:var(--gold);display:inline-block}
.dot.g{background:var(--navy)}
.mini-list .ml-h{justify-content:space-between;margin:0 0 12px}
.mini-list .ml-h span:last-child{color:var(--navy);background:var(--sky);padding:5px 8px;border-radius:6px}
.ml-r{display:flex;justify-content:space-between;padding:12px 0;border-top:1px solid var(--line)}
.ml-r b{font:500 var(--fs-body)/var(--lh-body) var(--serif);color:var(--navy)}
.ml-r.warn b{color:var(--gold-d)}
.mini-doc .md-h{font:500 var(--fs-body)/1 var(--serif);letter-spacing:.06em;color:var(--ink50);font-variant-caps:all-small-caps;margin-bottom:14px}
.mini-doc p{font:400 var(--fs-body)/var(--lh-body) var(--serif);margin:0 0 16px}
.caret{display:inline-block;width:1.5px;height:1.05em;background:var(--navy);vertical-align:-3px;margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.md-l{height:9px;border-radius:5px;background:var(--stone2);margin:10px 0}.md-l.s{width:60%}
.mini-rounds .rd{display:grid;grid-template-columns:90px 1fr;gap:4px 14px;padding:12px 0;border-top:1px solid var(--line)}
.mini-rounds .rd:first-child{border-top:0}
.mini-rounds .rd b{font-weight:600}.mini-rounds .rd span{color:var(--ink50);font-size:var(--fs-body)}
.mini-rounds .bar{grid-column:2;height:4px;border-radius:2px;background:var(--stone2);position:relative;overflow:hidden}
.mini-rounds .bar::after{content:"";position:absolute;inset:0;width:var(--w);background:var(--gold);opacity:.75;border-radius:2px}
.hn{font:400 var(--fs-body)/1.2 var(--serif);color:var(--note);margin:14px 0 0;font-style:italic}
.mini-check .ck{display:flex;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--line)}
.mini-check .ck:first-child{border-top:0}
.mini-check .ck i{flex:none;width:22px;height:22px;border-radius:50%;background:var(--sky);position:relative}
.mini-check .ck i::after{content:"";position:absolute;left:7px;top:5px;width:6px;height:10px;border:solid var(--navy);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* ---------- tools band ---------- */
.tl-stack{display:grid;gap:24px}
.tl{display:grid;grid-template-columns:4fr 6fr;gap:clamp(32px,5vw,72px);align-items:center;padding:clamp(28px,4vw,56px)}
.tl:nth-child(2){grid-template-columns:6fr 4fr}
.tl:nth-child(2) .tl-copy{order:2}
.tl-copy{display:flex;flex-direction:column}
.tl .h3{font-size:var(--fs-body);line-height:1.1;max-width:14ch}
.stage{position:relative;height:clamp(340px,30vw,420px);border-radius:22px;background:#fff;box-shadow:var(--shadow);overflow:hidden}
.tl-pts{list-style:none;padding:0;margin:26px 0 30px;display:grid;gap:11px}
.tl-pts li{position:relative;padding-left:22px;font-size:var(--fs-body);color:var(--ink70)}
.tl-pts li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:1px;background:var(--gold)}
.tl .btn{align-self:flex-start}
.tl-note{margin:22px 0 0}
/* trace */
.tr{fill:none;stroke:var(--gold);stroke-width:1.4;stroke-dasharray:var(--len,400);stroke-dashoffset:var(--len,400);transition:stroke-dashoffset .9s var(--ease)}
.tr.on{stroke-dashoffset:0}
/* mara stage */
.orb{position:absolute;left:38.2%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px}
.orb .core{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0,#F4E8CF 18%,#C9A56A 46%,#24365C 78%,#131F36 100%);box-shadow:0 10px 30px rgba(27,42,74,.28),inset 0 -6px 14px rgba(0,0,0,.25);animation:orbB 3.2s ease-in-out infinite}
.orb>i{position:absolute;inset:-10px;border-radius:50%;border:1px solid rgba(176,141,87,.45);animation:orbR 3.2s ease-out infinite}
.orb>i+i{animation-delay:1.6s}
@keyframes orbB{50%{transform:scale(1.05)}}
@keyframes orbR{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.wave{position:absolute;left:50%;top:100%;margin-top:14px;transform:translateX(-50%);display:flex;gap:3px;align-items:center;height:18px}
.wave b{width:3px;border-radius:2px;background:var(--gold);height:30%;animation:wv 1s ease-in-out infinite}
.wave b:nth-child(2){animation-delay:.1s}.wave b:nth-child(3){animation-delay:.25s}.wave b:nth-child(4){animation-delay:.05s}.wave b:nth-child(5){animation-delay:.3s}.wave b:nth-child(6){animation-delay:.15s}.wave b:nth-child(7){animation-delay:.2s}
@keyframes wv{50%{height:100%}}
/* research stage */
@keyframes scan{0%{transform:translateY(-30px);opacity:1}92%{opacity:1}100%{transform:translateY(250px);opacity:0}}

/* ---------- transformation ---------- */
.xf{position:relative;height:320vh;background:var(--stone);margin:0 24px;border-radius:var(--r)}
.xf-pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;padding-top:var(--nav)}
.xf-grid{display:grid;grid-template-columns:4fr 7fr;gap:clamp(32px,5vw,80px);align-items:center;width:100%}
.xf-side .h2{max-width:12ch}
.xf-steps{list-style:none;padding:0;margin:40px 0 36px;display:grid;gap:4px}
.xf-steps li{display:flex;gap:16px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--line2);opacity:.45;transition:opacity .6s var(--ease);cursor:pointer}
.xf-steps li.on{opacity:1}
.xf-steps .n{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:500 var(--fs-body)/1 var(--serif);box-shadow:inset 0 0 0 1px var(--line2);transition:all .5s var(--ease)}
.xf-steps li.on .n{background:var(--navy);color:#fff;box-shadow:none}
.xf-steps b{display:block;font-weight:600;font-size:var(--fs-body)}
.xf-steps li span:not(.n){font-size:var(--fs-body);color:var(--ink50)}
.xf-meter{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.xf-meter div{background:#fff;border-radius:14px;padding:14px 14px 12px}
.xf-meter b{display:block;font:400 34px/1 var(--serif);font-variant-numeric:tabular-nums}
.xf-meter span{display:block;margin-top:6px;font-size:var(--fs-body);line-height:1.3;color:var(--ink50)}
.xf-stage{position:relative}
.doc{background:#fff;border-radius:22px;box-shadow:var(--shadow-lg);overflow:hidden}
.doc-bar{display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--line)}
.doc-bar .dots{display:flex;gap:5px}.doc-bar .dots i{width:9px;height:9px;border-radius:50%;background:var(--line2)}
.doc-bar .t{font:500 var(--fs-body)/1 var(--serif);letter-spacing:.04em;color:var(--ink50);flex:1}
.doc-bar .chip{font:500 var(--fs-body)/1 var(--serif);padding:7px 10px;border-radius:999px;background:var(--stone);color:var(--ink70);transition:background .5s,color .5s}
.doc-bar .chip.fin{background:var(--sky);color:var(--navy)}
.doc-body{position:relative;display:grid;padding:clamp(28px,3.6vw,48px) clamp(28px,3.6vw,52px) clamp(32px,4vw,56px)}
.ver{grid-area:1/1;position:relative;opacity:0;visibility:hidden;transition:opacity .7s var(--ease),visibility 0s .7s}
.ver.on{opacity:1;visibility:visible;transition:opacity .8s var(--ease) .15s,visibility 0s}
.ver p{font:400 var(--fs-body)/var(--lh-body) var(--serif);color:var(--ink);margin:0;max-width:36ch}
.v0 p{color:var(--ink70)}
/* pencil strike */
.st{position:relative;color:var(--ink50);background:linear-gradient(var(--strike),var(--strike)) 0 58%/0 1.6px no-repeat;transition:background-size 1s var(--ease)}
.v1.on .st{background-size:100% 1.6px}
.v1.on .st.s2{transition-delay:.9s}
.ul{background:linear-gradient(var(--gold),var(--gold)) 0 96%/0 1.5px no-repeat;transition:background-size .9s var(--ease) .5s}
.v1.on .ul{background-size:100% 1.5px}
.notes{position:absolute;right:calc(-1 * clamp(0px,2vw,24px));top:-8px;width:34%;height:100%;pointer-events:none}
.v1 p{max-width:none;width:64%}
.notes .hn{position:absolute;left:0;right:0;margin:0;font-size:var(--fs-body);line-height:1.15;clip-path:inset(0 100% 0 0);transition:clip-path 1.1s cubic-bezier(.5,.1,.3,1);font-style:italic}
.notes .n1{top:0}.notes .n2{top:38%;color:var(--gold-d)}.notes .n3{top:72%}
.v1.on .hn{clip-path:inset(-10% -4% -10% 0)}
.v1.on .n1{transition-delay:.7s}.v1.on .n2{transition-delay:1.3s}.v1.on .n3{transition-delay:1.9s}
/* final */
.v2 p{width:64%;max-width:none}
.sp{transition:background .6s var(--ease)}
.v2.traced .sp.a{background:linear-gradient(transparent 62%,rgba(226,182,90,.32) 62%)}
.v2.traced .sp.b{background:linear-gradient(transparent 62%,rgba(214,228,245,.9) 62%)}
.v2.traced .sp.c{background:linear-gradient(transparent 62%,rgba(244,232,207,.95) 62%)}
.srcs{position:absolute;right:0;top:0;width:31%;height:100%}
.sc{position:absolute;left:0;right:0;display:flex;gap:10px;align-items:flex-start;padding:11px 12px;border-radius:12px;background:var(--stone);opacity:0;transform:translateX(10px);transition:opacity .7s var(--ease),transform .8s var(--ease)}
.sc i{flex:none;width:8px;height:8px;border-radius:50%;margin-top:5px}
.sc b{display:block;font-size:var(--fs-body);font-weight:600;line-height:1.3}
.sc span{display:block;font-size:var(--fs-body);color:var(--ink50);line-height:1.35;margin-top:3px}
.sa{top:0}.sa i{background:var(--gold-b)}
.sb{top:40%}.sb i{background:var(--navy)}
.sc3{top:74%}.sc3 i{background:var(--navy)}
.v2.traced .sc{opacity:1;transform:none}
.v2.traced .sb{transition-delay:.35s}.v2.traced .sc3{transition-delay:.7s}
.xf-tr{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.xf-tr .tr.xa{stroke:var(--gold)}.xf-tr .tr.xb{stroke:var(--gold-d)}.xf-tr .tr.xc{stroke:var(--navy)}
.xf-tr .tr{stroke-width:1.2}
.xf-note{margin-top:16px}

/* ---------- testimonials ---------- */
.q-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.q{margin:0;background:var(--stone);border-radius:24px;padding:34px 32px 30px;display:flex;flex-direction:column;transition:transform .7s var(--ease),box-shadow .7s var(--ease),background .5s}
.q:hover{transform:translateY(-4px);background:#fff;box-shadow:var(--shadow-lg)}
.q .k{font:500 var(--fs-body)/1 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--gold-d);margin:0 0 20px}
.q blockquote{margin:0 0 28px;font:400 var(--fs-body)/var(--lh-body) var(--serif);color:var(--ink);letter-spacing:-.005em}
.q figcaption{margin-top:auto;padding-top:18px;border-top:1px solid var(--line2);display:flex;flex-direction:column;gap:3px}
.q figcaption b{font-weight:600;font-size:var(--fs-body)}
.q figcaption span{font-size:var(--fs-body);color:var(--ink50)}

/* ---------- dream college ---------- */
.dr-panel{display:grid;grid-template-columns:5fr 6fr;gap:clamp(32px,5vw,80px);align-items:center;background:var(--pale)}
.dr-list{margin:28px 0 0;font-size:var(--fs-body);line-height:1.7;color:var(--ink70);max-width:52ch}
.dr-list span{display:block;font:500 var(--fs-body)/1 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--gold-d);margin-bottom:10px}
.dr-list em{font-style:normal;color:var(--ink50)}
.cmd{background:#fff;border-radius:22px;box-shadow:var(--shadow-lg);overflow:hidden}
.cmd-in{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line)}
.cmd-in svg{flex:none;width:20px;height:20px;fill:none;stroke:var(--ink50);stroke-width:1.8;stroke-linecap:round}
.cmd-in input{flex:1;border:0;outline:none;font:400 var(--fs-body)/1.2 var(--serif);color:var(--ink);background:transparent;min-width:0}
.cmd-in input::placeholder{color:var(--ink30)}
.cmd-in kbd{font:500 var(--fs-body)/1 var(--serif);color:var(--ink50);border:1px solid var(--line2);border-radius:6px;padding:5px 7px}
.cmd-list{list-style:none;margin:0;padding:8px;min-height:216px}
.cmd-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:12px;font-size:var(--fs-body);cursor:pointer;transition:background .25s}
.cmd-list li.act,.cmd-list li:hover{background:var(--stone)}
.cmd-list li small{font:500 var(--fs-body)/1 var(--serif);letter-spacing:.04em;color:var(--navy);display:flex;gap:6px;align-items:center}
.cmd-list li small.no{color:var(--ink30)}
.cmd-list .empty{color:var(--ink50);cursor:default}
.cmd-res{margin:8px;padding:22px;border-radius:16px;background:var(--sky);animation:resIn .7s var(--ease)}
.cmd-res.no{background:var(--stone)}
@keyframes resIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.cmd-res .k{font:500 var(--fs-body)/1 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--navy);display:flex;gap:8px;align-items:center}
.cmd-res.no .k{color:var(--ink50)}
.cmd-res h4{font:600 var(--fs-body)/1.2 var(--serif);margin:12px 0 16px}
.cmd-res .acts{display:flex;gap:18px;flex-wrap:wrap}
.cmd-foot{display:flex;justify-content:space-between;gap:12px;padding:12px 20px;border-top:1px solid var(--line);font:500 var(--fs-body)/1 var(--serif);letter-spacing:.04em;color:var(--ink50)}
.cmd-foot span{display:flex;gap:7px;align-items:center}

/* ---------- people ---------- */
.fd-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.fd{display:grid;grid-template-columns:200px 1fr;gap:32px;background:var(--stone);border-radius:24px;padding:32px}
.fd-ph{position:relative;aspect-ratio:4/5;border-radius:16px;background:linear-gradient(160deg,#EFE6D2,#E3D5B8);display:grid;place-items:center;overflow:hidden}
.fd-ph span{font:400 64px/1 var(--serif);color:rgba(27,42,74,.35)}
.fd-ph em{position:absolute;bottom:10px;left:0;right:0;text-align:center;font:500 var(--fs-body)/1 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;font-style:normal;color:rgba(27,42,74,.4)}
.fd-role{font:500 var(--fs-body)/1 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--gold-d);margin:4px 0 10px}
.fd-name{font:600 var(--fs-body)/1.1 var(--serif);letter-spacing:-.01em;margin:0 0 20px}
.fd-stat{display:flex;gap:14px;align-items:baseline;padding:16px 0;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.fd-stat b{font:400 40px/1 var(--serif);color:var(--gold-d)}
.fd-stat span{font-size:var(--fs-body);color:var(--ink70);line-height:1.4}
.fd-cred{list-style:none;padding:0;margin:16px 0;display:grid;gap:9px}
.fd-cred li{font-size:var(--fs-body);color:var(--ink70);line-height:1.4}
.fd-cred span{display:block;font:500 var(--fs-body)/var(--lh-body) var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--ink);margin-bottom:2px}
.fd-bio{font-size:var(--fs-body);line-height:1.55;color:var(--ink70);margin:0 0 6px}
.sig{width:190px;height:48px;display:block}
.sig text{font:400 var(--fs-body) var(--serif);fill:none;stroke:var(--navy);stroke-width:.9;stroke-dasharray:900;stroke-dashoffset:900;transition:stroke-dashoffset 2.6s cubic-bezier(.5,.1,.3,1),fill 1s 2s}
.sig.in text{stroke-dashoffset:0;fill:var(--navy)}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
.pillars>div{border-top:1px solid var(--line2);padding-top:22px}
.pillars .n{font:italic 400 var(--fs-body)/1 var(--serif);color:var(--gold)}
.pillars b{display:block;font:600 var(--fs-body)/1.2 var(--serif);margin:12px 0 10px}
.pillars p{margin:0;font-size:var(--fs-body);color:var(--ink70);max-width:34ch}

/* ---------- faq ---------- */
.faq-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,6vw,96px);align-items:start}
.acc-g{font:500 var(--fs-body)/1 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--gold-d);margin:0 0 6px;padding-top:8px}
.acc-g+details{border-top:1px solid var(--line2)}
.acc details+.acc-g{margin-top:44px}
.acc details{border-bottom:1px solid var(--line2)}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding:22px 0;font:600 var(--fs-body)/var(--lh-body) var(--serif);color:var(--ink);transition:color .3s}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";flex:none;width:12px;height:12px;margin-top:8px;background:linear-gradient(var(--navy),var(--navy)) center/12px 1.5px no-repeat,linear-gradient(var(--navy),var(--navy)) center/1.5px 12px no-repeat;transition:transform .5s var(--ease)}
.acc details[open] summary::after{transform:rotate(45deg)}
.acc summary:hover{color:var(--gold-d)}
.acc details p{margin:0 0 24px;font-size:var(--fs-body);color:var(--ink70);max-width:60ch}

.xf-tr .td{opacity:0;transition:opacity .5s}.xf-tr .td.a{fill:var(--gold-b)}.xf-tr .td.b{fill:var(--gold-d)}.xf-tr .td.c{fill:var(--navy)}
.v2.traced .xf-tr .td{opacity:1}
.ver .notes .hn{font-family:var(--serif);color:var(--note);width:auto;max-width:none;font-size:var(--fs-body);line-height:1.15;font-style:italic}
.ver .notes .n2{color:var(--gold-d)}
/* ---------- inner page hero ---------- */
.ph{padding:calc(var(--nav) + clamp(48px,6vw,88px)) 0 clamp(40px,5vw,72px);position:relative}
.ph-s{padding-bottom:0}

.ph .h1{font-size:var(--fs-h2);max-width:14ch}
.ph-cta{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.ph-price{margin:18px 0 0;font:400 var(--fs-body)/1 var(--serif);letter-spacing:.04em;color:var(--ink50)}
.ph-price b{font-weight:500;color:var(--ink)}
.play{width:0;height:0;border-left:8px solid var(--navy);border-top:5px solid transparent;border-bottom:5px solid transparent}
.demo-btn:hover .play{border-left-color:var(--gold-d)}

/* app window */

@keyframes rec{50%{opacity:.25}}

.orb.big{position:relative;left:auto;top:auto;margin:0;width:112px;height:112px}
.orb.md{position:relative;left:auto;top:auto;margin:0;width:64px;height:64px;flex:none}
.orb.sm{position:relative;left:auto;top:auto;margin:0;width:34px;height:34px;flex:none}
.orb.off .core{filter:grayscale(1) opacity(.35);animation:none}
.stk-card.on .orb.off .core{filter:none;transition:filter 1s ease 1.1s;animation:orbB 3.2s ease-in-out infinite}
.wave.lg{position:relative;left:auto;top:auto;transform:none;margin:22px 0 0;height:30px;gap:4px}
.wave.lg b{width:3px;background:var(--navy)}
.obj-live .wave.lg{margin:0}

.phases{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;width:100%;max-width:360px;margin-top:18px}
.phases i{height:4px;border-radius:4px;background:var(--stone2)}
.phases i.d{background:var(--gold)}
.phases i.n{background:linear-gradient(90deg,var(--gold) 50%,var(--stone2) 50%);background-size:200% 100%;animation:ph 6s linear infinite}
@keyframes ph{from{background-position:100% 0}to{background-position:0 0}}

.pill{font:500 var(--fs-body)/1 var(--serif)!important;color:var(--navy)!important;background:var(--sky);padding:7px 10px;border-radius:999px;white-space:nowrap}

.src{display:inline-block;margin-top:6px;font:500 var(--fs-body)/1 var(--serif);letter-spacing:.03em;color:var(--navy);background:var(--sky);padding:4px 7px;border-radius:5px}
.tk{display:inline-block;width:17px;height:17px;border-radius:50%;background:var(--navy);position:relative;flex:none}
.tk::after{content:"";position:absolute;left:6px;top:3.5px;width:4px;height:8px;border:solid #fff;border-width:0 1.7px 1.7px 0;transform:rotate(45deg)}

/* app entrance choreography */

/* ---------- stat tiles ---------- */
:where(#page-brainstorm,#page-college-research,#page-home .mx3) .tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
:where(#page-brainstorm,#page-college-research,#page-home .mx3) .tile{position:relative;display:flex;flex-direction:column;gap:14px;padding:4px clamp(18px,2.6vw,40px) 6px;background:none;border-radius:0;min-height:0}
:where(#page-brainstorm,#page-college-research,#page-home .mx3) .tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--line2);transform:scaleY(0);transform-origin:top;transition:transform 1.1s var(--ease) .25s}
:where(#page-brainstorm,#page-college-research,#page-home .mx3) .tile.in::before,:where(#page-brainstorm,#page-college-research,#page-home .mx3) .tile:not(.rv)::before{transform:none}
:where(#page-brainstorm,#page-college-research,#page-home .mx3) .tile:first-child{padding-left:0}:where(#page-brainstorm,#page-college-research,#page-home .mx3) .tile:first-child::before{display:none}
:where(#page-brainstorm,#page-college-research,#page-home .mx3) .tile b{font:400 clamp(58px,5.6vw,90px)/.86 var(--serif);letter-spacing:-.035em;font-variant-numeric:lining-nums tabular-nums;color:var(--navy)}
:where(#page-brainstorm,#page-college-research,#page-home .mx3) .tile b small{font:italic 400 .34em/1 var(--serif);letter-spacing:0;margin-left:6px;color:var(--gold-d);opacity:1}
:where(#page-brainstorm,#page-college-research,#page-home .mx3) .tile b small.sup{font:400 .52em/0 var(--serif);font-style:normal;vertical-align:.72em;margin-left:3px}
:where(#page-brainstorm,#page-college-research,#page-home .mx3) .tile span{font-size:var(--fs-body);line-height:1.45;color:var(--ink70);max-width:24ch}
:where(#page-brainstorm,#page-college-research,#page-home .mx3) .tile.navy,:where(#page-brainstorm,#page-college-research,#page-home .mx3) .tile.pale,:where(#page-brainstorm,#page-college-research,#page-home .mx3) .tile.sky{background:none;color:inherit}
:where(#page-brainstorm,#page-college-research,#page-home .mx3) .tile.navy b,:where(#page-brainstorm,#page-college-research,#page-home .mx3) .tile.sky b{color:var(--navy)}:where(#page-brainstorm,#page-college-research,#page-home .mx3) .tile.navy span{color:var(--ink70)}

/* ---------- problem cards ---------- */
.prob-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

.pf{background:var(--stone)}
.pb{background:var(--navy);color:#fff;opacity:0;transform:translateY(12px)}

.pb em{color:var(--gold-b)}

/* ---------- sticky feature list ---------- */
.feat{padding:clamp(40px,6vw,96px) 0}
.feat-grid{display:grid;grid-template-columns:5fr 6fr;gap:clamp(40px,6vw,96px);align-items:start}
.feat-l .h2{max-width:14ch;margin-bottom:24px}
.feat-items{display:grid}
.fi{display:flex;gap:18px;padding:30px 0 32px;border-top:1px solid var(--line2);min-height:36vh;opacity:.38;transition:opacity .6s var(--ease)}
.fi.on{opacity:1}
.fi .n{font:500 var(--fs-body)/1 var(--serif);color:var(--gold-d);padding-top:6px}
.fi b{display:block;font:600 var(--fs-body)/1.2 var(--serif);margin-bottom:10px}
.fi p{margin:0;font-size:var(--fs-body);color:var(--ink70);max-width:40ch}
.feat-r{position:sticky;top:calc(var(--nav) + 64px)}
.feat-card{position:relative;display:grid;background:var(--stone);border-radius:28px;padding:32px;min-height:440px;align-items:center}
.fc{grid-area:1/1;background:#fff;border-radius:20px;box-shadow:var(--shadow);padding:24px;opacity:0;transform:translateY(14px) scale(.985);transition:opacity .6s var(--ease),transform .8s var(--ease)}
.fc.on{opacity:1;transform:none}
.fc-h{font:500 var(--fs-body)/1 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--ink50);margin-bottom:16px}
.bub{max-width:86%;padding:12px 15px;border-radius:14px;margin-bottom:10px;font-size:var(--fs-body);line-height:1.45}
.bub.q{background:var(--stone);border-top-left-radius:4px}
.bub.a{background:var(--navy);color:#fff;margin-left:auto;border-top-right-radius:4px}
.tl-line{display:grid;grid-template-columns:52px 1fr auto;gap:10px;align-items:baseline;padding:11px 0;border-top:1px solid var(--line)}
.tl-line .t{font:500 var(--fs-body)/1 var(--serif);color:var(--ink50)}
.tl-line p{margin:0;font:400 var(--fs-body)/var(--lh-body) var(--serif)}
.tl-line.dim{opacity:.4}
.flag{font:500 var(--fs-body)/1 var(--serif);font-style:normal;color:var(--gold-d);background:var(--pale);padding:5px 8px;border-radius:6px}
.tl-note{margin-top:14px;font-size:var(--fs-body);color:var(--navy);display:flex;gap:8px;align-items:center}
.tl-note::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--navy)}
.hand-row{display:flex;gap:12px;align-items:center}
.av{width:38px;height:38px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font:500 var(--fs-body)/1 var(--serif)}
.hand-row b{display:block;font-weight:600;font-size:var(--fs-body)}.hand-row span{font-size:var(--fs-body);color:var(--ink50)}
.keep{display:flex;gap:12px;align-items:baseline;padding:10px 12px;border-radius:10px;background:var(--pale);font:400 var(--fs-body)/var(--lh-body) var(--serif);margin-top:8px}
.keep span{font:500 var(--fs-body)/1 var(--serif);color:var(--gold-d)}

/* ---------- bounty stack ---------- */
.stk{position:relative;padding:clamp(40px,5vw,72px) 0 clamp(56px,6vw,96px)}
.stk-intro{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px}
.stk-big{font:400 var(--fs-h2)/var(--lh-h2) var(--serif);letter-spacing:-.03em;margin:0;color:var(--navy)}
.stk-big em{font-style:italic;color:var(--gold)}
.stk-cards{position:relative;z-index:1;max-width:1180px;margin:-16vh auto 0;padding:0 24px}
.stk-card{position:sticky;top:calc(var(--nav) + 28px);height:min(600px,calc(100vh - var(--nav) - 60px));display:grid;grid-template-columns:.95fr 1.05fr;gap:10px;border-radius:30px;padding:10px;margin-bottom:34px;transform-origin:50% 0;box-shadow:0 -18px 50px -30px rgba(19,31,54,.4);will-change:transform}
.stk-card:nth-child(1){background:var(--stone)}
.stk-card:nth-child(2){background:var(--sky)}
.stk-card:nth-child(3){background:var(--beige)}
.stk-card:nth-child(4){background:var(--navy)}
.stk-txt{display:flex;flex-direction:column;justify-content:space-between;padding:34px 34px 28px}
.stk-txt h3{font:600 var(--fs-body)/1.05 var(--serif);letter-spacing:-.02em;margin:0 0 14px}
.stk-txt p{font-size:var(--fs-body);line-height:1.6;color:var(--ink70);margin:0;max-width:32ch}
.stk-num{font:400 clamp(64px,7vw,108px)/.8 var(--serif);display:flex;align-items:flex-end;justify-content:space-between}
.stk-num small{font:500 var(--fs-body)/1 var(--serif);letter-spacing:.14em;opacity:.5;padding-bottom:10px}
.stk-card:nth-child(4) h3,.stk-card:nth-child(4) .stk-num{color:#fff}
.stk-card:nth-child(4) p{color:rgba(255,255,255,.7)}
.stk-card:nth-child(4) .stk-num em{color:var(--gold-b);font-style:italic}
.stk-mock{position:relative;border-radius:22px;background:rgba(255,255,255,.55);display:grid;place-items:center;padding:28px;overflow:hidden}
.stk-card:nth-child(4) .stk-mock{background:var(--navy-2)}
/* Brainstorm steps sit on the sky band: white step cards (the last stays navy), each mock-up on a quiet sky tray */
.band-sky .stk-card:nth-child(-n+3){background:#fff;box-shadow:0 2px 5px rgba(27,42,74,.05),0 18px 40px -22px rgba(27,42,74,.35)}
.band-sky .stk-card:nth-child(-n+3) .stk-mock{background:var(--sky)}
.obj{width:min(420px,100%);background:#fff;border-radius:18px;box-shadow:0 30px 60px -34px rgba(19,31,54,.5),0 0 0 1px rgba(27,42,74,.06);padding:20px 22px;position:relative}
.obj-h{display:flex;justify-content:space-between;align-items:center;font:500 var(--fs-body)/1 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--ink50);margin-bottom:16px}
.obj-h .st{background:var(--pale);color:var(--gold-d);border-radius:999px;padding:6px 10px;letter-spacing:.08em}
.obj-f{margin:0 0 12px}
.obj-f label{display:block;font-size:var(--fs-body);color:var(--ink50);margin-bottom:6px}
.obj-f .inp{display:block;min-height:42px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:var(--fs-body);background:#FCFBF8}
.cur{display:inline-block;width:1.5px;height:1.05em;background:var(--navy);vertical-align:-2px;margin-left:1px;animation:blink 1s steps(1) infinite}
.obj-bar{height:5px;border-radius:9px;background:var(--stone2);overflow:hidden;margin-top:14px}
.obj-bar i{display:block;height:100%;width:0;background:var(--gold);border-radius:9px;transition:width 1.6s var(--ease) .3s}
.stk-card.on .obj-bar i{width:var(--w,40%)}
.obj-tog{position:relative;display:grid;grid-template-columns:1fr 1fr;background:var(--stone);border-radius:999px;padding:5px;margin:4px 0 18px}
.obj-tog span{position:relative;z-index:1;text-align:center;font-size:var(--fs-body);font-weight:500;padding:11px 0;color:var(--ink50);transition:color .4s}
.obj-tog::before{content:"";position:absolute;top:5px;bottom:5px;left:50%;width:calc(50% - 5px);border-radius:999px;background:var(--navy);transition:left .7s var(--ease) .5s}
.stk-card.on .obj-tog::before{left:5px}
.stk-card.on .obj-tog span:first-child{color:#fff;transition-delay:.7s}
.obj-mic{display:flex;align-items:center;gap:14px;font-size:var(--fs-body);color:var(--ink50)}
.obj-live{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center}
.obj-time{font:500 var(--fs-body)/1 var(--serif);color:var(--ink50);display:flex;justify-content:space-between;margin:18px 0 8px}
.obj .phases{max-width:none;margin-top:0}
.obj-said{margin:16px 0 0;padding:12px 14px;border-radius:12px 12px 12px 4px;background:#fff;box-shadow:inset 0 0 0 1px var(--line2);font-size:var(--fs-body);line-height:1.5;min-height:3.3em}
.obj-said.you{margin:8px 0 0 auto;width:fit-content;max-width:80%;min-height:0;border-radius:12px 12px 4px 12px;background:var(--navy);color:#fff;box-shadow:none}
.obj-said.you:empty{visibility:hidden}
/* change 11: the Mara session on the site is an illustrative composite; a small grey caption says so */
.sample-cap{margin:10px 0 0;font:400 13px/1.3 var(--serif);color:var(--ink50);text-align:center}
.tool-demo{position:relative}.tool-demo>.sample-cap{position:absolute;right:4px;bottom:9px;margin:0}   /* on the first screen it shares the row with "Watch the full demo" */
.hwc .sample-cap{margin:8px 0 -4px}
.hwc.navy .sample-cap{color:rgba(255,255,255,.6)}
.rpage .sample-cap{text-align:left;margin-top:14px}
.ill-tag{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:999px;background:var(--stone2);font:500 11.5px/1.3 var(--serif);font-style:normal;letter-spacing:.04em;color:var(--ink50);vertical-align:1px}
.obj.rm h4{font:600 var(--fs-body)/1.1 var(--serif);margin:0 0 6px}
.obj.rm .who{margin:0 0 16px;font-size:var(--fs-body);color:var(--ink70)}
.rm-tab{display:flex;gap:12px;align-items:flex-start;padding:11px 12px;border-radius:12px;background:var(--stone);margin-bottom:7px;opacity:0;transform:translateX(16px);transition:opacity .7s var(--ease),transform .8s var(--ease)}
.rm-tab b{flex:none;width:24px;height:24px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font:500 var(--fs-body)/1 var(--serif)}
.rm-tab strong{display:block;font:600 var(--fs-body)/1.2 var(--serif);font-weight:600}
.rm-tab span{display:block;font-size:var(--fs-body);color:var(--ink50);margin-top:3px}
.stk-card.on .rm-tab{opacity:1;transform:none}
.stk-card.on .rm-tab:nth-of-type(2){transition-delay:.6s}.stk-card.on .rm-tab:nth-of-type(3){transition-delay:.85s}.stk-card.on .rm-tab:nth-of-type(1){transition-delay:.35s}
.obj-q{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:var(--fs-body);background:#FCFBF8}
.obj-q svg{width:16px;height:16px;flex:none;stroke:var(--ink50)}
.obj-dd{margin-top:8px;border:1px solid var(--line);border-radius:12px;overflow:hidden;opacity:0;transform:translateY(-6px);transition:opacity .5s ease 1.3s,transform .5s ease 1.3s}
.stk-card.on .obj-dd{opacity:1;transform:none}
.obj-dd div{padding:10px 14px;font-size:var(--fs-body);border-top:1px solid var(--line)}
.obj-dd div:first-child{border-top:0;background:var(--pale);font-weight:500}
.obj-dd small{display:block;font-weight:400;color:var(--ink50);font-size:var(--fs-body)}
.odo{display:flex;align-items:baseline;gap:10px;margin:2px 0 16px}
.odo b{font:400 56px/1 var(--serif);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.odo span{font-size:var(--fs-body);color:var(--ink50)}
.src-row{display:grid;grid-template-columns:92px 1fr 56px;gap:10px;align-items:center;font-size:var(--fs-body);margin:8px 0}
.src-row .bar{height:5px;border-radius:6px;background:var(--stone2);overflow:hidden}
.src-row .bar i{display:block;height:100%;width:0;background:var(--navy);border-radius:6px;transition:width 1.4s var(--ease)}
.src-row em{font:500 var(--fs-body)/1 var(--serif);font-style:normal;color:var(--ink50);text-align:right}
.stk-card.on .src-row .bar i{width:var(--w)}
/* College Research step 2: the sources tick off one by one (no counts until they are real) */
.rd-h{margin:4px 0 14px;font:400 32px/1.1 var(--serif);letter-spacing:-.01em;color:var(--navy)}
.rd-list{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.rd-list li{display:flex;align-items:center;gap:12px;font-size:var(--fs-body);color:var(--ink50);transition:color .4s var(--ease) calc(var(--i) * .45s + .3s)}
.rd-list li i{position:relative;flex:none;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line2);transition:background .4s var(--ease) calc(var(--i) * .45s + .3s),box-shadow .4s var(--ease) calc(var(--i) * .45s + .3s)}
.rd-list li i::after{content:"";position:absolute;left:8px;top:4.5px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .35s var(--ease) calc(var(--i) * .45s + .45s)}
.stk-card.on .rd-list li{color:var(--navy)}
.stk-card.on .rd-list li i{background:var(--navy);box-shadow:none}
.stk-card.on .rd-list li i::after{transform:rotate(45deg) scale(1)}
/* the same list, small, on the Sample Essays research station: it ticks off (about 1s) while the belt stops there, and clears when it moves on */
.rd-sm{display:flex;flex-wrap:wrap;gap:5px 11px;margin:10px 0 0}
.rd-sm li{white-space:nowrap}
.rd-sm li{gap:8px;font-size:13.5px;line-height:1.2;transition:color .25s}
.rd-sm li i{width:15px;height:15px;transition:background .25s,box-shadow .25s}
.rd-sm li i::after{left:5.2px;top:2.6px;width:3.6px;height:7px;border-width:0 1.6px 1.6px 0;transition:transform .2s}
.stn.on .rd-sm li{color:var(--navy);transition:color .3s calc(var(--i) * .12s + .1s)}
.stn.on .rd-sm li i{background:var(--navy);box-shadow:none;transition:background .3s calc(var(--i) * .12s + .1s),box-shadow .3s calc(var(--i) * .12s + .1s)}
.stn.on .rd-sm li i::after{transform:rotate(45deg) scale(1);transition:transform .3s var(--ease) calc(var(--i) * .12s + .2s)}
.cv-mobile .rd-m{margin-top:8px}
.cv-mobile .rd-m.in li{color:var(--navy);transition:color .3s calc(var(--i) * .25s + .5s)}
.cv-mobile .rd-m.in li i{background:var(--navy);box-shadow:none;transition:background .3s calc(var(--i) * .25s + .5s),box-shadow .3s calc(var(--i) * .25s + .5s)}
.cv-mobile .rd-m.in li i::after{transform:rotate(45deg) scale(1);transition:transform .3s var(--ease) calc(var(--i) * .25s + .6s)}
@media (prefers-reduced-motion:reduce){.cv-mobile .rd-m li{color:var(--navy)}.cv-mobile .rd-m li i{background:var(--navy);box-shadow:none}.cv-mobile .rd-m li i::after{transform:rotate(45deg) scale(1)}}
@media (prefers-reduced-motion:reduce){.rd-list li,.rd-list li i,.rd-list li i::after{transition:none}}
.mx{display:grid;grid-template-columns:1fr 44px 1fr;align-items:center;position:relative}
.mx .col{display:grid;gap:10px}
.mx .col div{font-size:var(--fs-body);line-height:1.35;border:1px solid var(--line);border-radius:10px;padding:9px 10px;background:#fff}
.mx .col.r div{background:var(--pale);border-color:transparent}
.mx .col div small{display:block;font:500 var(--fs-body)/1.2 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--ink50);margin-bottom:3px}
.mx svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.mx svg path{fill:none;stroke:var(--gold);stroke-width:1.6;stroke-dasharray:300;stroke-dashoffset:300;transition:stroke-dashoffset 1.1s ease;vector-effect:non-scaling-stroke}
.stk-card.on .mx svg path{stroke-dashoffset:0}
.stk-card.on .mx svg path:nth-child(2){transition-delay:.4s}.stk-card.on .mx svg path:nth-child(3){transition-delay:.8s}
.claims{width:min(440px,100%);display:grid;gap:10px}
.cl2{display:flex;gap:12px;background:#fff;border-radius:14px;padding:14px 16px;font-size:var(--fs-body);line-height:1.4;opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease),transform .8s var(--ease)}
.cl2 q{display:block;margin-top:7px;font:400 var(--fs-body)/var(--lh-body) var(--serif);color:var(--navy);quotes:none}
.cl2 .tick{flex:none;width:22px;height:22px;border-radius:50%;background:var(--sky);position:relative;transition:background .5s .5s}
.cl2 .tick::after{content:"";position:absolute;left:7.5px;top:4.5px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.stk-card.on .cl2{opacity:1;transform:none}.stk-card.on .cl2 .tick{background:var(--navy)}
.stk-card.on .cl2:nth-child(2){transition-delay:.4s}.stk-card.on .cl2:nth-child(3){transition-delay:.8s}
.pdf-chip{margin:6px 0 0;font:500 var(--fs-body)/var(--lh-body) var(--serif);letter-spacing:.04em;color:rgba(255,255,255,.55);text-align:center}

/* ---------- navy panels ---------- */
.panel.navy{position:relative;overflow:hidden}
.panel.navy::before{content:"";position:absolute;inset:0;background:var(--paper) 0 0/760px 760px;mix-blend-mode:multiply;opacity:.35;pointer-events:none}
.panel.navy>*{position:relative}
.built{display:grid;grid-template-columns:4fr 7fr;gap:clamp(32px,5vw,80px);align-items:start}
.built-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.12);border-radius:20px;overflow:hidden}
.built-grid>div{background:var(--navy);padding:26px 24px}
.built-grid b{font:400 44px/1 var(--serif);color:var(--gold-b)}
.built-grid h4{margin:12px 0 8px;font-weight:600;font-size:var(--fs-body);color:#fff}
.built-grid p{margin:0;font-size:var(--fs-body);color:rgba(255,255,255,.66)}
.rmx{display:grid;grid-template-columns:4fr 6fr;gap:clamp(32px,5vw,80px);align-items:start}
.rmx-doc{background:#fff;border-radius:24px;box-shadow:var(--shadow-lg),0 0 0 1px var(--line);padding:clamp(24px,3vw,40px)}
.rmx-h{display:flex;justify-content:space-between;font:500 var(--fs-body)/1 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--ink50);padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:18px}
.rmx-k{font:500 var(--fs-body)/1 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--gold-d);margin:20px 0 10px}
.rmx-who{font:italic 400 var(--fs-body)/var(--lh-body) var(--serif);margin:0}
.rmx-sl{display:grid;grid-template-columns:100px 1fr;gap:4px 16px;padding:14px 0;border-top:1px solid var(--line)}
.rmx-sl span{font:500 var(--fs-body)/var(--lh-body) var(--serif);color:var(--ink50);grid-row:span 2}
.rmx-sl b{font:600 var(--fs-body)/1.2 var(--serif);font-weight:600}
.rmx-sl q{font-size:var(--fs-body);color:var(--ink70)}

.shelf{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);gap:16px;overflow-x:auto;overscroll-behavior-x:contain;padding:4px 2px 18px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.bcard{scroll-snap-align:start;background:var(--stone);border-radius:22px;padding:24px;display:flex;flex-direction:column;gap:10px;transition:transform .6s var(--ease),background .4s,box-shadow .6s}
.bcard:hover{transform:translateY(-4px);background:#fff;box-shadow:var(--shadow-lg)}
.bcard .k{margin:0;font:500 var(--fs-body)/var(--lh-body) var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--gold-d)}
.bcard b{font:600 var(--fs-body)/1.2 var(--serif);font-weight:600}
.bcard ul{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.bcard li{font-size:var(--fs-body);color:var(--ink70);padding-left:18px;position:relative}
.bcard li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--sky);box-shadow:inset 0 0 0 2px var(--navy)}
.bcard .src{align-self:flex-start;margin-top:auto;color:var(--ink50);background:#fff}

/* ---------- samples ---------- */
.case-top{display:grid;grid-template-columns:7fr 4fr;gap:48px;align-items:end;margin-bottom:40px}
.snap{margin:0;display:grid;gap:0;background:#fff;border-radius:18px;padding:6px 20px}
.snap div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--line);font-size:var(--fs-body)}
.snap div:first-child{border-top:0}
.snap dt{color:var(--ink50);font:500 var(--fs-body)/var(--lh-body) var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps}
.snap dd{margin:0;text-align:right}
.ba{background:#fff;border-radius:22px;box-shadow:var(--shadow);padding:clamp(24px,3.4vw,48px) clamp(24px,5vw,72px) clamp(32px,4vw,56px)}
.ba-seg{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;background:var(--stone);border-radius:999px;padding:4px;margin-bottom:28px}
.ba-seg button{position:relative;z-index:1;border:0;background:none;padding:10px 20px;font:500 var(--fs-body)/1 var(--serif);color:var(--ink50);transition:color .4s}
.ba-seg button.on{color:#fff}
.ba-seg i{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:var(--navy);transition:transform .6s var(--ease)}
.ba-seg.fin i{transform:translateX(100%);background:var(--navy)}
.ba-body{display:grid}
.ba-t{grid-area:1/1;margin:0;font:400 var(--fs-body)/var(--lh-body) var(--serif);max-width:46ch;opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease),transform .7s var(--ease)}
.ba-t.on{opacity:1;transform:none}
.ba-t.v0{color:var(--ink50)}
.ba-k{font:500 var(--fs-body)/1 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--ink50);margin:0 0 16px}
.case-src{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:32px}
.case-src b{display:inline-block;margin-left:8px;font-weight:600}
.case-src p{margin:8px 0 0;font-size:var(--fs-body);color:var(--ink70)}
.books{position:relative;display:flex;align-items:flex-end;gap:14px;height:280px;padding:0 24px}
.book{position:relative;width:74px;height:var(--h);border:0;border-radius:6px 6px 3px 3px;background:var(--c);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:18px 0 14px;box-shadow:inset -6px 0 0 rgba(0,0,0,.12),inset 3px 0 0 rgba(255,255,255,.08);transition:transform .6s var(--ease)}
.book span{writing-mode:vertical-rl;transform:rotate(180deg);font:400 var(--fs-body)/1 var(--serif);letter-spacing:.01em}
.book em{font:500 var(--fs-body)/1 var(--serif);font-style:normal;writing-mode:vertical-rl;transform:rotate(180deg);opacity:.7}
.book:hover{transform:translateY(-8px)}
.book.on{transform:translateY(-18px)}
.shelf-rule{position:absolute;left:0;right:0;bottom:-2px;height:4px;border-radius:2px;background:var(--line2)}
.spread{display:grid;grid-template-columns:1fr 1fr;margin-top:40px;border-radius:22px;overflow:hidden;box-shadow:var(--shadow-lg),0 0 0 1px var(--line)}
.spread>div{padding:clamp(28px,4vw,52px)}
.sp-l{background:#F3F1EB}.sp-r{background:#fff;border-left:1px solid var(--line)}
.sp-t{margin:0;font:400 var(--fs-body)/var(--lh-body) var(--serif);transition:opacity .5s var(--ease)}
.sp-l .sp-t{color:var(--ink50)}
.sp-r .ba-k{color:var(--navy)}

/* ---------- guides ---------- */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:30px}
.chips button{border:0;background:var(--stone);border-radius:999px;padding:10px 16px;font-size:var(--fs-body);color:var(--ink70);transition:background .3s,color .3s}
.chips button.on{background:var(--navy);color:#fff}
.gd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 24px}
.gd{display:flex;flex-direction:column;transition:opacity .5s var(--ease)}
.gd.hide{display:none}
.gd-cv{position:relative;aspect-ratio:4/3;border-radius:22px;background:var(--bg);overflow:hidden;margin-bottom:18px;transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.gd-art{position:absolute;inset:14% 14%;background:var(--plate) var(--x) var(--y)/520% auto no-repeat;mix-blend-mode:multiply;border-radius:12px;transition:transform 1.2s var(--ease)}
.gd:hover .gd-cv{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.gd:hover .gd-art{transform:scale(1.04)}
.gd .k{margin:0 0 8px;font:500 var(--fs-body)/1 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--gold-d)}
.gd-grid.one .gd .k{display:none}   /* a picked chip already says the category */
.gd h3{margin:0 0 10px;font:600 var(--fs-body)/1.25 var(--serif);max-width:24ch}
.gd .rt{font-size:var(--fs-body);color:var(--ink50)}

/* ---------- about ---------- */
.tlx{display:grid;grid-template-columns:4fr 7fr;gap:clamp(32px,6vw,96px);align-items:start}
.tlx-l{position:sticky;top:calc(var(--nav) + 48px)}
.tlx-list{position:relative;list-style:none;margin:0;padding:0 0 0 36px}
.tlx-line{position:absolute;left:6px;top:8px;bottom:8px;width:1.5px;background:var(--line2)}
.tlx-line i{position:absolute;inset:0;background:var(--gold);transform-origin:50% 0;transform:scaleY(var(--p,0))}
.tlx-list li{position:relative;display:grid;grid-template-columns:90px 1fr;gap:16px;padding:0 0 40px}
.tlx-list li::before{content:"";position:absolute;left:-36px;top:5px;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1.5px var(--gold)}
.tlx-list span{font:500 var(--fs-body)/var(--lh-body) var(--serif);color:var(--gold-d)}
.tlx-list b{display:block;font:600 var(--fs-body)/1.2 var(--serif);font-weight:600}
.tlx-list p{margin:8px 0 0;font-size:var(--fs-body);color:var(--ink70)}
.promises{display:grid;grid-template-columns:4fr 7fr;gap:clamp(32px,5vw,80px);align-items:start}
.pr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pr-grid b{display:block;font:600 var(--fs-body)/1.2 var(--serif);font-weight:600;margin-bottom:10px;padding-top:16px;border-top:1px solid rgba(27,42,74,.18)}
.pr-grid p{margin:0;font-size:var(--fs-body);color:var(--ink70)}
/* ---------- conveyor belt (R2 belt, v3 tap-for-detail, R4 finish) ---------- */
.cv{padding-bottom:clamp(40px,5vw,72px)}
#page-sample-transformations>.cv:first-of-type{padding-top:calc(var(--nav) + clamp(40px,5vw,72px))}   /* the page now opens on the conveyor */
.cv .sec-head{margin-bottom:8px}
.cv-wrap{position:relative;width:100%;max-width:1180px;margin:0 auto;overflow:hidden}
.cv-stage{position:relative;width:1180px;height:780px;transform-origin:0 0;
  background-image:radial-gradient(rgba(27,42,74,.09) 1px,transparent 1.2px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(120% 92% at 50% 50%,#000 70%,transparent 100%);mask-image:radial-gradient(120% 92% at 50% 50%,#000 70%,transparent 100%)}
.cv-svg{position:absolute;inset:0;width:100%;height:760px}
.belt-rim,.belt-body,.belt-slat,.belt-edge,.belt-glow{fill:none;stroke-linejoin:round}
.belt-rim{stroke:#DDD5C6;stroke-width:88}
.belt-body{stroke:#F1ECE2;stroke-width:80}
.belt-slat{stroke:rgba(27,42,74,.06);stroke-width:78;stroke-dasharray:1.2 11;animation:slat .075s linear infinite}
.belt-edge{stroke:rgba(255,255,255,.8);stroke-width:1;stroke-dasharray:1 7}
.belt-glow{stroke:var(--gold);stroke-width:2;opacity:.55;stroke-dasharray:0 9999}
@keyframes slat{to{stroke-dashoffset:-12.2}}
.cv.paused .belt-slat{animation-play-state:paused}
.cv-movers{position:absolute;inset:0}
.mv{position:absolute;left:0;top:0;width:0;height:0;opacity:0;will-change:transform}
/* stations: the belt is one diagram, scaled to the window, so its text keeps its drawn size */
.stn{position:absolute;transform:translate(-50%,-50%);width:236px;min-height:150px;border-radius:22px;z-index:5;cursor:pointer;
  background:linear-gradient(165deg,#fff 0%,#FAF7F1 100%);border:1px solid var(--line2);
  box-shadow:inset 0 1px 0 #fff,0 26px 40px -24px rgba(27,42,74,.45),0 0 0 7px rgba(255,255,255,.55);
  padding:14px 16px 16px;display:flex;flex-direction:column;transition:box-shadow .5s var(--ease),border-color .5s,transform .5s var(--ease)}
.stn::before,.stn::after{content:"";position:absolute;top:50%;width:6px;height:80px;margin-top:-40px;border-radius:3px;background:linear-gradient(90deg,rgba(27,42,74,.2),rgba(27,42,74,.05))}
.stn::before{left:-4px}.stn::after{right:-4px;transform:scaleX(-1)}
.stn:hover{transform:translate(-50%,calc(-50% - 3px))}
.stn:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.stn-top{display:flex;align-items:center;gap:8px}
.stn-n{font:500 11px/1 var(--serif);letter-spacing:.14em;color:var(--ink50)}
.led{width:7px;height:7px;border-radius:50%;background:var(--line2);box-shadow:0 0 0 3px rgba(217,210,193,.35);transition:.4s}
.stn-more{margin-left:auto;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line2);display:grid;place-items:center;font:400 16px/1 var(--serif);color:var(--navy);background:#fff;transition:.3s}
.stn:hover .stn-more{background:var(--navy);color:#fff;box-shadow:none}
.stn-row{display:flex;gap:10px;align-items:center;margin-top:12px}
.stn-ic{flex:none;width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line2);background:#fff;display:grid;place-items:center}
.stn-ic svg{width:17px;height:17px;fill:none;stroke:var(--navy);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.stn-t{font:400 22px/1.1 var(--serif);letter-spacing:-.01em;color:var(--navy)}
.stn-d{margin:8px 0 0;font:400 13.5px/1.45 var(--serif);color:var(--ink70)}
.stn-d b{font-weight:500;color:var(--navy)}
.stn-r{margin-top:10px;height:14px;display:flex;align-items:center;gap:3px}
.stn-r.wv i{width:3px;height:30%;border-radius:2px;background:var(--line2)}
.stn.on .stn-r.wv i{background:var(--navy);animation:wv .5s ease-in-out infinite alternate}
.stn-r.wv i:nth-child(2n){animation-delay:-.2s}.stn-r.wv i:nth-child(3n){animation-delay:-.35s}
.stn-r.ty i{display:block;height:3px;width:0;border-radius:2px;background:var(--line2)}
.stn.on .stn-r.ty i{background:var(--navy);animation:ty 1.1s steps(8) forwards}
.stn.on .stn-r.ty i:nth-child(2){animation-delay:.35s}.stn.on .stn-r.ty i:nth-child(3){animation-delay:.7s}
@keyframes ty{from{width:0}to{width:30px}}
.stn.on{border-color:var(--gold);box-shadow:inset 0 1px 0 #fff,0 26px 44px -22px rgba(176,141,87,.5),0 0 0 7px rgba(244,232,207,.8)}
.stn.on .led{background:var(--sun);box-shadow:0 0 0 3px rgba(226,182,90,.25),0 0 10px rgba(226,182,90,.6)}
.stn.on .stamp{color:var(--navy);font-weight:500}
/* the human station */
.stn.hmn{width:280px;background:linear-gradient(165deg,#1B2A4A 0%,#24365C 100%);border-color:var(--navy)}
.stn.hmn::before,.stn.hmn::after{background:linear-gradient(90deg,rgba(176,141,87,.4),rgba(176,141,87,.08))}
.stn.hmn .stn-t{color:#fff}
.stn.hmn .stn-n{color:rgba(255,255,255,.6)}
.stn.hmn .stn-more{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.h-sub{display:block;font-size:12.5px;color:rgba(255,255,255,.65);margin-top:3px}
.av{display:flex;flex:none}
.av span{width:30px;height:30px;border-radius:50%;background:var(--gold-b);color:var(--navy);display:grid;place-items:center;font:500 10.5px/1 var(--serif);box-shadow:0 0 0 2px var(--navy)}
.av span+span{margin-left:-4px;background:var(--pale)}
.rounds{display:flex;gap:6px;margin-top:14px}
.rounds i{font:500 11.5px/1 var(--serif);font-style:normal;padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.7)}
.hmn.on .rounds i{animation:rd3 .45s forwards}
.hmn.on .rounds i:nth-child(2){animation-delay:.5s}.hmn.on .rounds i:nth-child(3){animation-delay:1s}
@keyframes rd3{to{background:var(--gold-b);color:var(--navy)}}
.hmn.on{border-color:var(--gold-b)}
/* captions */
.cap-t{position:absolute;transform:translateX(-50%);margin:0;width:340px;text-align:center;font:400 13px/1.45 var(--serif);color:var(--ink50);z-index:6}
.cap-t.gold{color:var(--gold-d);font-weight:500}
/* moving cards */
.jc{position:absolute;left:-58px;top:-40px;width:116px;height:84px;background:#fff;border:1px solid #E4DDD0;border-radius:7px;
  box-shadow:0 12px 18px -10px rgba(27,42,74,.4),0 1px 0 rgba(255,255,255,.9) inset;padding:8px 9px;overflow:hidden;font-family:var(--serif);transition:opacity .4s}
.jc .k{display:flex;justify-content:space-between;font:500 5.8px/1 var(--serif);letter-spacing:.12em;color:var(--ink50);text-transform:uppercase;margin-bottom:6px}
.jc .who{display:flex;gap:6px;align-items:center}
.jc .ini{width:18px;height:18px;border-radius:5px;background:var(--pale);color:var(--gold-d);font:500 6.5px/18px var(--serif);text-align:center}
.jc .nm{font:400 10.5px/1 var(--serif);color:var(--navy)}
.jc .sb{font-size:5.8px;color:var(--ink50);margin-top:2px}
.jc .ln{display:block;height:2px;border-radius:2px;background:#E6E0D4;margin-top:4px}
.jc .ln.g{background:var(--gold-b)}
.jc .ln.r{background:rgba(27,42,74,.45)}
.jc .tg{display:inline-block;font-size:5.4px;border:1px solid #E6E0D4;border-radius:9px;padding:1.5px 4px;margin:5px 2px 0 0;color:var(--gold-d)}
.jc .rw{display:flex;justify-content:space-between;font-size:6.2px;color:var(--navy);padding:2.6px 0;border-bottom:1px solid #F1ECE3}
.jc .rw span:last-child{font-family:var(--serif);color:var(--navy)}
.jc .sig{width:auto;height:auto;position:absolute;right:8px;bottom:7px;font:400 8px/1 var(--serif);color:var(--note);font-style:italic}
.jc .st{position:absolute;inset:8px 9px;opacity:0;transition:opacity .35s}
.jc[data-st="0"] .st0,.jc[data-st="1"] .st1,.jc[data-st="2"] .st2,.jc[data-st="3"] .st3,.jc[data-st="4"] .st4{opacity:1}
.jc.admit{left:-80px;top:-50px;width:160px;height:100px;padding:11px 12px}
.jc.admit .uni{font:400 16px/1.05 var(--serif);color:var(--navy);margin:3px 0 3px}
.jc.admit .crs{font-size:6.8px;color:var(--ink50)}
.jc.admit .pill{position:absolute;left:12px;bottom:10px;display:inline-flex;gap:4px;align-items:center;font:500 7px/1 var(--serif);color:var(--navy);background:var(--sky);border-radius:9px;padding:4px 7px}
.jc.admit .ill{position:absolute;right:12px;bottom:13px;font:500 4.8px/1 var(--serif);letter-spacing:.1em;color:var(--ink30)}
.jc.bp{left:-90px;top:-42px;width:180px;height:84px;padding:0;display:flex;background:linear-gradient(120deg,#FFFDF9,#F2EBDD)}
.bp .bm{flex:1;padding:9px 11px}
.bp .ap{display:flex;justify-content:space-between;align-items:center;margin-top:5px}
.bp .ap b{font:400 22px/1 var(--serif);color:var(--navy)}
.bp .ap small{display:block;font-size:5.6px;color:var(--ink50);margin-top:2px}
.bp .fl{flex:1;height:1px;border-top:1px dashed #C9BFAE;margin:0 8px;position:relative}
.bp .fl::after{content:"\2708";position:absolute;left:50%;top:-7px;transform:translateX(-50%);font-size:10px;color:var(--navy)}
.bp .mt{display:flex;gap:14px;margin-top:6px;font:500 5px/1.3 var(--serif);color:var(--ink50);letter-spacing:.08em}
.bp .mt b{display:block;font:500 6.4px/1.2 var(--serif);color:var(--navy);letter-spacing:0;margin-top:1px}
.bp .stub{width:38px;border-left:1px dashed #C9BFAE;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.bp .bar{width:22px;height:34px;background:repeating-linear-gradient(0deg,var(--navy) 0 1.2px,transparent 1.2px 2.8px,var(--navy) 2.8px 3.6px,transparent 3.6px 6px)}
.bp .stub small{font:500 4px/1 var(--serif);letter-spacing:.1em;color:var(--ink50)}
.cv-foot{display:flex;gap:18px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:10px;font-size:var(--fs-legal);color:var(--ink50)}
.cv-foot button{font:500 var(--fs-body)/1 var(--serif);color:var(--navy);background:#fff;border:0;box-shadow:inset 0 0 0 1px var(--line2);border-radius:999px;padding:8px 13px}
.cv-foot .link{font-size:var(--fs-body)}
.cv-mobile{display:none}
/* pop-up */
.pop{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:20px}
.pop[hidden]{display:none!important}
.pop-bg{position:absolute;inset:0;background:rgba(19,31,54,.5);backdrop-filter:blur(4px);animation:pgIn .35s both}
.pop-card{position:relative;max-width:600px;width:100%;max-height:86vh;overflow:auto;background:#fff;border-radius:28px;padding:36px 38px 32px;box-shadow:0 40px 90px -30px rgba(0,0,0,.55);animation:popin .55s var(--ease) both}
@keyframes popin{from{opacity:0;transform:translateY(24px) scale(.97)}}
.pop-x{position:absolute;right:16px;top:16px;width:38px;height:38px;border-radius:50%;border:0;box-shadow:inset 0 0 0 1px var(--line2);background:#fff;font-size:var(--fs-body);line-height:1;color:var(--navy)}
.pop-n{margin:0;font:500 var(--fs-body)/1 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--gold-d)}
.pop-t{margin:12px 0 12px;font:600 var(--fs-body)/1.1 var(--serif);letter-spacing:-.01em;color:var(--navy)}
.pop-t em{font-style:italic;color:var(--gold)}
.pop-p{margin:0 0 20px;font-size:var(--fs-body);line-height:1.6;color:var(--ink70)}
.pop-opts{display:grid;gap:10px;margin:0 0 22px}
.pop-opts>div{border-radius:18px;padding:18px 20px;background:var(--stone)}
.pop-opts>div:first-child{background:var(--navy);color:#fff}
.pop-opts b{display:block;font-weight:600;font-size:var(--fs-body);margin-bottom:6px}
.pop-opts span{font-size:var(--fs-body);line-height:1.5;color:var(--ink70)}
.pop-opts>div:first-child span{color:rgba(255,255,255,.7)}
.pop-big{display:flex;align-items:baseline;gap:12px;margin:0 0 20px;padding:18px 20px;border-radius:18px;background:var(--navy);color:#fff}
.pop-big b{font:400 44px/1 var(--serif);color:var(--gold-b)}
.pop-big span{font-size:var(--fs-body);color:rgba(255,255,255,.72)}
.pop-rounds{display:flex;gap:8px;margin:0 0 20px;flex-wrap:wrap}
.pop-rounds i{font:500 var(--fs-body)/1 var(--serif);font-style:normal;padding:10px 14px;border-radius:999px;background:var(--pale);color:var(--navy)}
.pop-rounds i:last-child{background:var(--navy);color:#fff}
.pop-cta{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
body.popped{overflow:hidden}
@media (max-width:760px){
  .cv-wrap{display:none}
  .cv-mobile{display:block}
  .cv-mobile ol{list-style:none;margin:8px 0 0;padding:0;position:relative}
  .cv-mobile ol::before{content:"";position:absolute;left:21px;top:20px;bottom:20px;width:2px;background:repeating-linear-gradient(180deg,var(--line2) 0 6px,transparent 6px 12px);animation:vbelt 1s linear infinite}
  @keyframes vbelt{to{background-position:0 12px}}
  .cv-mobile ol>li{position:relative;display:flex;gap:14px;align-items:center;padding:14px 44px 14px 0;cursor:pointer}
  .cv-mobile ol>li .n{position:relative;z-index:1;flex:none;width:44px;height:44px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px var(--line2),0 6px 14px -8px rgba(27,42,74,.3);display:grid;place-items:center;font:500 var(--fs-body)/1 var(--serif);color:var(--ink50)}
  .cv-mobile ol>li.gold .n{background:var(--navy);color:var(--gold-b);box-shadow:none}
  .cv-mobile ol>li b{display:block;font:600 var(--fs-body)/1.2 var(--serif);font-weight:600}
  .cv-mobile ol>li span{font-size:var(--fs-body);color:var(--ink70)}
  .cv-mobile ol>li::after{content:"+";position:absolute;right:4px;top:50%;margin-top:-12px;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line2);display:grid;place-items:center;color:var(--navy)}
  .cv-foot span{display:none}
  .pop-card{padding:30px 22px 24px;border-radius:22px}
  .pop-t{font-size:var(--fs-body)}
}

/* per-page footer art: campus on home and guides, the bridges elsewhere */
.foot .sky b.bridge,.foot .sky .plane,.foot .sky .gull{display:none}
.foot .sky .bridge{position:absolute;left:50%;width:var(--aw);transform:translateX(-50%);bottom:-6%;background:var(--gold-b);opacity:.3;-webkit-mask:var(--m) 50% 100%/100% auto no-repeat;mask:var(--m) 50% 100%/100% auto no-repeat;height:calc(var(--aw) / var(--ar));clip-path:inset(0 100% 0 0);transition:clip-path 2.6s var(--ease)}
.foot.in .sky .bridge{clip-path:inset(0 0 0 0)}
.foot .sky .ggb{--m:var(--ggb);--ar:2.196}
.foot .sky .ftb{--m:var(--ftb);--ar:2.963;bottom:-4%}
.foot .sky .plane{position:absolute;top:8%;left:0;width:clamp(30px,3.4%,64px);aspect-ratio:1.775;background:var(--gold-b);opacity:.55;-webkit-mask:var(--plane) 0 0/100% 100% no-repeat;mask:var(--plane) 0 0/100% 100% no-repeat;animation:plane 46s linear infinite}
.foot .sky .gull{position:absolute;top:26%;left:0;width:clamp(22px,2.6%,46px);aspect-ratio:2.07;background:var(--gold-b);opacity:.4;-webkit-mask:var(--gull) 0 0/100% 100% no-repeat;mask:var(--gull) 0 0/100% 100% no-repeat;animation:gull 70s linear infinite -20s}
@keyframes plane{from{transform:translate(105vw,60px)}to{transform:translate(-10vw,-30px)}}   /* the biplane faces left, so it flies right to left (as do the gulls) */
@keyframes gull{from{transform:translate(104vw,0)}50%{transform:translate(50vw,-14px)}to{transform:translate(-8vw,6px)}}
body[data-page="page-brainstorm"] .foot .sky .campus,body[data-page="page-about"] .foot .sky .campus,
body[data-page="page-college-research"] .foot .sky .campus,body[data-page="page-sample-transformations"] .foot .sky .campus{display:none}
body[data-page="page-brainstorm"] .foot .sky .ggb,body[data-page="page-about"] .foot .sky .ggb,
body[data-page="page-college-research"] .foot .sky .ftb,body[data-page="page-sample-transformations"] .foot .sky .ftb{display:block}
body:not([data-page="page-home"]):not([data-page="page-guides"]) .foot .sky .plane,
body:not([data-page="page-home"]):not([data-page="page-guides"]) .foot .sky .gull{display:block}
body.still .foot .sky *{animation-play-state:paused}

/* navy bands (the client's ask), kept quiet */
.band-navy{position:relative;background:var(--navy);color:#fff;overflow:hidden}
.band-navy::before{content:"";position:absolute;inset:0;background:var(--paper) 0 0/760px 760px;mix-blend-mode:multiply;opacity:.3;pointer-events:none}
.band-navy>*{position:relative}
.band-navy .h2{color:#fff}
.band-navy .eyebrow b{color:rgba(255,255,255,.3)}
.band-navy .lede{color:rgba(255,255,255,.7)}
.band-navy .q{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.band-navy .q:hover{background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px rgba(226,182,90,.35),0 24px 48px -24px rgba(0,0,0,.5)}
.band-navy .q .k{color:var(--gold-b)}
.band-navy .q blockquote{color:#fff}
.band-navy .q figcaption{border-top-color:rgba(255,255,255,.12)}
.band-navy .q figcaption span{color:rgba(255,255,255,.55)}
.band-pale{background:var(--pale)}
.band-pale .dr-panel{background:transparent;padding-left:0;padding-right:0}

/* flip cards on the tool pages */

.band-navy .pf{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);color:#fff}
.band-navy .pf em{color:var(--gold-b)}
.band-navy .pb{background:var(--pale);color:var(--navy)}
.band-navy .pb em{color:var(--gold-d)}

@media (max-width:760px){.cv-foot button{display:none}}
/* ---------- tablet ---------- */
/* below 1260 the seven menu links and Log in no longer fit on one line, so the burger takes over */
@media (max-width:1259px){
  .nav-l{display:none}
  .nav-burger{display:block}
  .nav .nav-cta{margin-left:auto}   /* the button sits on the right, next to the burger */
  body.menu .nav-l{display:flex;flex-direction:column;align-items:stretch;position:fixed;top:var(--nav);left:0;right:0;background:#fff;padding:12px 20px 24px;box-shadow:0 20px 40px rgba(27,42,74,.12)}
  body.menu .nav-l a{font-size:var(--fs-body);padding:14px 8px;border-bottom:1px solid var(--line);border-radius:0}
  body.menu .nav{background:var(--paper-bg)}
  body.menu .nav-burger span:first-child{transform:translateY(3px) rotate(45deg)}
  body.menu .nav-burger span:last-child{transform:translateY(-3px) rotate(-45deg)}
}
@media (max-width:1024px){
  .sec-head{grid-template-columns:1fr;gap:18px;margin-bottom:40px}
  .sec-head .lede{justify-self:start}
  .tl,.tl:nth-child(2){grid-template-columns:1fr}
  .tl:nth-child(2) .tl-copy{order:0}
  
  .xf-grid{grid-template-columns:1fr}
  .xf-side .xf-meter{display:none}
  :where(#page-brainstorm,#page-college-research,#page-home .mx3) .tiles{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}:where(#page-brainstorm,#page-college-research,#page-home .mx3) .tile:nth-child(odd){padding-left:0}:where(#page-brainstorm,#page-college-research,#page-home .mx3) .tile:nth-child(odd)::before{display:none}
  .fd{grid-template-columns:140px 1fr;gap:22px}
  .fd-grid{grid-template-columns:1fr}
  .dr-panel,.faq-grid,.built,.rmx,.case-top,.tlx,.promises,.close .panel.navy{grid-template-columns:1fr}
  .tlx-l{position:static}
  .gd-grid{grid-template-columns:1fr 1fr}
}
/* ---------- phone ---------- */
@media (max-width:900px){
  :root{--gut:20px;--nav:64px;--fs-h2:34px;--fs-body:17px}
  .nav .nav-cta{display:none}
  .h2{font-size:var(--fs-h2);max-width:none}
  .lede{font-size:var(--fs-body)}
  .sec{padding:80px 0}
  .inset,.close{padding-left:12px;padding-right:12px}
  .panel{border-radius:22px;padding:26px 22px}

  /* hero: copy above, campus below, wide and cropped to the tower */
  .hero-stage{height:auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
  .hero-stage::before{-webkit-mask-image:linear-gradient(180deg,#000 40%,transparent 80%);mask-image:linear-gradient(180deg,#000 40%,transparent 80%)}
  .hero-copy{position:relative;top:auto;order:-1;padding:calc(var(--nav) + 24px) 0 8px;z-index:6}
  .hero-copy .inner{max-width:none}
  .hero-copy .h1{font-size:clamp(34px,9.4vw,44px)}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{align-items:flex-start}
  .hero-box{position:relative;top:auto;left:auto;right:auto;width:210%;margin-left:-86%;margin-top:-6%}
  .hero-pause{left:auto;right:12px;bottom:calc(var(--fnd-h) + 8px)}
  .founded .wrap{gap:14px}
  .founded ul{gap:10px 22px}
  .founded li{font-size:var(--fs-body)}

  .jr-track{grid-template-columns:1fr;gap:0}
  .jr-line{display:none}
  .jr-step{flex-direction:row;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
  .jr-step .n{margin:0;flex:none}
  .jr-step>span:last-child{display:none}
  .jr-step::after{display:none}
  .jr-step b{font-size:var(--fs-body)}
  .jr-pane{grid-template-columns:1fr;gap:22px}
  .jr-detail{min-height:0;margin-top:20px}

  .stage{height:330px}

  /* transformation: no pinning, state stepper */
  .xf{height:auto;margin:0 12px;padding:64px 0}
  .xf-pin{position:relative;height:auto;padding-top:0;display:block}
  .xf-steps{display:flex;gap:6px;margin:24px 0}
  .xf-steps li{flex:1;flex-direction:column;gap:6px;padding:12px 10px;border:1px solid var(--line2);border-radius:14px;opacity:.6}
  .xf-steps li span:not(.n){display:none}
  .xf-steps b{font-size:var(--fs-body)}
  .v1 p,.v2 p{width:auto}
  .notes,.srcs{position:relative;right:auto;top:auto;width:auto;height:auto;margin-top:18px;display:grid;gap:8px}
  .notes .hn{position:relative;top:auto!important}
  .sc{position:relative;top:auto!important}
  .xf-tr{display:none}
  .doc-body{padding:24px 20px 28px}

  .q-grid,.pillars,.prob-grid,.gd-grid,.pr-grid,.case-src,.built-grid,.cform{grid-template-columns:1fr}
  .fd{grid-template-columns:1fr}
  .fd-ph{max-width:180px}
  :where(#page-brainstorm,#page-college-research,#page-home .mx3) .tiles{row-gap:30px}:where(#page-brainstorm,#page-college-research,#page-home .mx3) .tile{padding:2px 0 4px 18px}:where(#page-brainstorm,#page-college-research,#page-home .mx3) .tile b{font-size:clamp(50px,13vw,64px)}
  .feat-grid{grid-template-columns:1fr}
  .feat-r{position:relative;top:auto}
  .fi{min-height:0}
  .feat-card{min-height:360px;padding:18px}
  
  
  /* stacks become a plain sequence */
  .stk-intro{position:relative;height:auto;padding:24px 20px 32px}
  .stk-big{font-size:var(--fs-h2)}
  .stk-cards{margin-top:0;padding:0 12px}
  .stk-card{position:relative;top:auto;height:auto;grid-template-columns:1fr;transform:none!important;filter:none!important;margin-bottom:14px}
  .stk-txt{padding:22px 20px 10px}
  .stk-num{font-size:56px;margin-top:20px}
  .stk-mock{padding:18px}
  
  
  .books{height:220px;gap:8px;padding:0;overflow-x:auto;overscroll-behavior-x:contain}
  .book{width:58px;flex:none}
  .spread{grid-template-columns:1fr}.sp-r{border-left:0;border-top:1px solid var(--line)}
  .rmx-sl{grid-template-columns:1fr}
  .foot .cols{grid-template-columns:1fr 1fr}
  .foot .about{grid-column:1/-1}
  .foot .legal{position:relative;bottom:auto;padding:0 0 22px}
  .foot .legal a{margin-left:12px}
  .rbadge{right:10px;bottom:10px}
  .cmd-list{min-height:0}
  .dr-list{display:none}
}
@media (max-width:900px){.doc-bar .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.cmd-list li small{white-space:nowrap}.cmd-list li{font-size:var(--fs-body)}}
@media (max-width:1024px){.xf-grid>*{min-width:0}.xf-steps{flex-wrap:nowrap}}

/* ===== WriteWise launch layer, on top of Saturn R4 ===== */
.hn2{font:italic 400 var(--fs-body)/var(--lh-body) var(--serif);color:var(--note);margin:0}
.hn2.g{color:var(--gold-d)}
.hn2.w{color:var(--gold-b)}
.u-scr{position:relative;display:inline-block}
.u-scr svg{position:absolute;left:-3%;bottom:-.18em;width:106%;height:.36em;overflow:visible;pointer-events:none}
.u-scr svg path{fill:none;stroke:var(--gold-b);stroke-width:4;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:420;transition:stroke-dashoffset 1.2s var(--ease)}
.u-scr.in svg path{stroke-dashoffset:0}
.sec-s{padding:clamp(56px,7vw,96px) 0}
.sec-head.c{display:block;text-align:center;max-width:780px;margin:0 auto 44px}
.sec-head.c .h2{max-width:none;margin:0 auto}
.sec-head.c .eyebrow{justify-content:center;margin-left:auto;margin-right:auto}
.sec-head.c .lede{margin:14px auto 0}

/* ---------- the quill: a horizontal scrubber on the nav line ---------- */
.nav-prog{background:linear-gradient(90deg,var(--navy-d),var(--navy) 70%,var(--navy-2));height:2px;opacity:1}
.quill{position:absolute;left:0;bottom:-3px;width:46px;height:52px;pointer-events:none;z-index:3;transform:translateX(-8px);will-change:transform}
.quill svg{display:block;width:100%;height:100%;overflow:visible}
.quill .blot{position:absolute;left:3px;bottom:0;width:7px;height:7px;border-radius:50%;background:var(--navy-d)}
@media (max-width:760px){.quill{width:34px;height:40px}}

/* ---------- hero ---------- */
.hero-copy .h1.h1-now{font-size:clamp(40px,4.4vw,72px);max-width:none;line-height:1.02;letter-spacing:-.02em}
.hero-copy .h1.h1-now{opacity:1;transform:none;animation:none}   /* the letter scramble is this line's entrance */
.h1-now .easy i{display:inline-block;font-style:inherit}
/* the extra "s" of "essay": drawn from CSS so the page text stays "easy." */
.h1-now .easy .xs{position:absolute;left:0;top:0;opacity:0;pointer-events:none}
.h1-now .easy .xs::before{content:"s"}
.h1-now.prep .easy{visibility:hidden}
.h1-now{position:relative}
.h1-now.scr>span[aria-hidden]:not(.h1-scr){visibility:hidden}   /* the real line keeps its width while the overlay searches */
.h1-scr{position:absolute;inset:0;pointer-events:none}
.h1-scr i{position:absolute;display:block;text-align:center;white-space:pre;font-style:inherit;opacity:.45;transition:opacity .25s ease-out}
.h1-scr i.on{opacity:1}
.h1-now em{font-style:italic}
.h1-now .easy{color:var(--gold);font-style:italic;position:relative;display:inline-block}
/* change 15: "now easy." sits on one continuous highlighter band (thicker than the others); it sweeps in left to right once the word has settled */
.h1-now .ne{background:linear-gradient(transparent 52%,rgba(226,182,90,.45) 52%,rgba(226,182,90,.45) 94%,transparent 94%) 0 0/0% 100% no-repeat;transition:background-size 1.4s cubic-bezier(.45,0,.2,1)}
.h1-now.done .ne{background-size:100% 100%}
@media (prefers-reduced-motion:reduce){.h1-now .ne{transition:none}}
.hero-copy .lede.fear{font-size:var(--fs-body);max-width:44ch}
/* three facts take turns in one spot: the box keeps the height of the tallest, so nothing below moves */
.facts{display:grid}
.facts .fact{grid-area:1/1;margin:0;opacity:0;transition:opacity .3s ease}
.facts .fact.on{opacity:1;transition-delay:.3s}   /* the old fact fades fully out (.3s), then the new one fades in (.3s): they never overlap */
.fear b{font:600 34px/1.05 var(--serif);color:var(--navy);letter-spacing:-.01em}   /* the client asked for the number BOLD and LARGER */
.fear b.hl-m{background-image:linear-gradient(transparent 56%,rgba(226,182,90,.45) 56% 92%,transparent 92%)}
@media (max-width:640px){.fear b{font-size:28px}}
.fear .nyna{margin:6px 0 0}
.fear strong{font-weight:600;color:var(--navy)}
.hero-cta .btn-2l small{opacity:.75}

/* ---------- 3 metrics under the hero: the same numbers row as Brainstorm and College Research ---------- */
.mx3{padding:clamp(28px,3.4vw,44px) 0 clamp(20px,3vw,36px);background:#fff}
@media (min-width:1025px){.mx3 .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* ---------- personas: three plain notepad sheets ---------- */
.stuck2{padding:clamp(48px,6vw,88px) 0 clamp(40px,5vw,64px)}
/* a cream paper band, so the stories separate from the white numbers row above */
/* landing and the other light pages: a soft crumpled-paper texture behind every light section (the navy bands keep their own colour). paper-soft is the repo's paper texture at half contrast */
body,.pg{background:linear-gradient(rgba(255,252,245,.75),rgba(255,252,245,.75)),url(assets/img/paper.webp) 0 0/760px 760px repeat,#FFFCF5;background-blend-mode:normal,multiply,normal}   /* one paper everywhere; it scrolls with the page */
#page-home #stories{background:#fff;overflow-x:clip}   /* plain white, so the blue notes do not clash with the paper texture */
.pads{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,44px);padding-top:14px}
/* each persona is a beige post-it in front (::after), a sky blue note peeking out behind it (::before), a metal clip at the top */
.pad{--tilt:-1.4deg;--back:var(--sky);--bk:2.6deg;position:relative;isolation:isolate;margin:0;display:flex;flex-direction:column;padding:34px 28px 24px}
.pad:nth-child(2){--tilt:.8deg;--bk:-2.2deg}
.pad:nth-child(3){--tilt:-.6deg;--bk:3deg}
.pad::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:2px 2px 3px 14px;
  background:linear-gradient(180deg,rgba(27,42,74,.035) 0 22px,transparent 22px),linear-gradient(rgba(246,236,214,.62),rgba(246,236,214,.62)),url(assets/img/paper-soft.webp) 0 0/900px 900px,#F6ECD6;background-blend-mode:normal,normal,multiply,normal;
  box-shadow:0 1px 1px rgba(27,42,74,.07),0 10px 18px -12px rgba(27,42,74,.32),14px 18px 22px -18px rgba(27,42,74,.35)}
.pad::before{content:"";position:absolute;inset:6px -6px -8px 8px;z-index:-2;border-radius:2px 2px 10px 3px;background:var(--back);transform:rotate(var(--bk));box-shadow:0 8px 18px -12px rgba(27,42,74,.35)}
.pad>*{position:relative}
.pad .clip{position:absolute;left:38px;top:-16px;width:20px;height:50px;transform:rotate(-7deg);z-index:2;filter:drop-shadow(1px 2px 1.5px rgba(27,42,74,.28))}
/* entry: rise and fade one after another, settling at a slight tilt; desktop hover straightens and lifts */
.pads .pad.rv{opacity:0;transform:translateY(16px) rotate(var(--tilt));transition:opacity .6s var(--ease) calc(var(--i,0) * 110ms),transform .6s var(--ease) calc(var(--i,0) * 110ms)}
.pads .pad.rv.in{opacity:1;transform:rotate(var(--tilt))}
/* desktop pointer: a note lifts 3px and straightens 40% of its tilt, its shadow a little deeper (translate and rotate stack on the entrance transform) */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .pads .pad.rv.in{transition:opacity .6s var(--ease) calc(var(--i,0) * 110ms),transform .6s var(--ease) calc(var(--i,0) * 110ms),translate .35s var(--ease),rotate .35s var(--ease)}
  .pads .pad.rv.in:hover{translate:0 -3px;rotate:calc(var(--tilt) * -.4)}
  .pad::after{transition:box-shadow .35s var(--ease)}
  .pads .pad.rv.in:hover::after{box-shadow:0 1px 1px rgba(27,42,74,.08),0 14px 24px -12px rgba(27,42,74,.38),16px 22px 28px -18px rgba(27,42,74,.42)}
}
.pad .who{display:flex;align-items:center;gap:16px;margin:0 0 18px}
.pad .face{flex:none;width:62px;height:74px;background:var(--stone) center/cover no-repeat;border:4px solid #fff;box-shadow:0 2px 6px -2px rgba(27,42,74,.35)}
.pad h3{margin:0;font:400 var(--fs-hand)/1.15 var(--hand);color:var(--navy)}
.pad-t{margin:0 0 20px;font:400 var(--fs-body)/var(--lh-body) var(--serif);color:var(--ink)}
.pad figcaption{margin-top:auto;padding-top:14px;border-top:1px solid rgba(27,42,74,.14);font:500 var(--fs-body)/1.3 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--ink70)}
.fine{margin:40px 0 0;text-align:center;font:400 var(--fs-legal)/var(--lh-body) var(--serif);color:var(--ink50)}
/* Day 45: one slim, boxless line */
/* Day 45: a soft cream panel across the content width, so it reads as a call to action without being a heavy block */
/* prominent CTA strip: the Day 45 box on the landing page and the referral strip on the tool pages share it */
.day45,.ref-strip{margin:48px 0 0;display:flex;align-items:center;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;background:var(--beige);border-radius:20px;padding:30px 36px;box-shadow:0 1px 0 rgba(27,42,74,.05),inset 0 0 0 1px rgba(176,141,87,.25)}
.day45 p,.ref-strip p{margin:0;font:400 clamp(26px,2.4vw,34px)/1.1 var(--serif);letter-spacing:-.01em;color:var(--navy)}
.day45 p em,.ref-strip p em{font-style:italic;color:var(--gold-d)}
.day45 .acts,.ref-strip .acts{display:flex;gap:10px;flex-wrap:wrap}
.ref-sec{padding:clamp(24px,3vw,40px) 0 0}.ref-sec .ref-strip{margin:0}   /* the tool pages' referral ask, just above the FAQ */
@media (max-width:640px){.day45,.ref-strip{padding:24px 20px}.day45 .acts,.ref-strip .acts{flex:1 1 100%}.day45 .acts .btn,.ref-strip .acts .btn{flex:1 1 100%;justify-content:center}}
@media (max-width:1024px){.pads{grid-template-columns:minmax(0,1fr);max-width:540px;margin:0 auto;gap:40px}}

/* ---------- how we helped: the base the three line options build on (line-knot, line-qmark, line-pinboard).
   Without an option, with no JS or with reduced motion, it is a still section: the heading, then the three boxes ---------- */
section.ln{position:relative;padding:clamp(48px,6vw,88px) 0 clamp(40px,5vw,64px);overflow-x:clip}   /* section only: .ln is also the small line in the numbers tiles */
.ln .sec-head.c{margin-bottom:0}
.ln-h{max-width:none}
.ln-h1,.ln-h2{display:block}
.ln-hand{display:none;margin:12px 0 0;font:400 var(--fs-hand)/1.2 var(--hand);color:var(--gold-d)}
.ln-sub{margin:12px auto 0}
.ln-art{position:relative}
.hw3{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:28px}
.hw-col{position:relative;display:flex;flex-direction:column}
.hw-col>.hwc{flex:1}
/* each milestone sits straight above its box */
.ms{position:relative;margin:0;padding:0 8px 14px;text-align:center;font:400 var(--fs-body)/1.3 var(--serif);color:var(--navy)}
.ms b{font-weight:600}
.ms-n{color:var(--gold-d);font-variant-numeric:tabular-nums}
.ms-s{display:block;color:var(--ink50)}
.ms-dot{display:none}   /* no yellow dots: the options hang the line on gold tacks */
/* one colour map for the three tools, site-wide: Mara butter, research beige, a real person navy */
.hwc{display:flex;flex-direction:column;background:var(--butter);border-radius:26px;padding:12px 12px 26px;position:relative}
.hwc{box-shadow:0 1px 0 var(--line2),0 22px 40px -28px rgba(27,42,74,.55)}   /* the soft paper shadow the pinboard cards have, on all three boxes */
.hwc.pale{background:var(--pale);box-shadow:0 0 0 1px rgba(176,141,87,.6),0 22px 40px -28px rgba(27,42,74,.55)}   /* beige stays, with a gold edge so it doesn't disappear into the paper */
.hwc.navy{background:var(--navy);color:#fff}
.anim{position:relative;border-radius:18px;overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.anim-in{position:absolute;left:0;top:0;width:470px;transform-origin:0 0}   /* the box demos are wider than tall, as before; 470 wide so the text scales down less */
.anim-in>.stage{height:300px;border-radius:0;box-shadow:none}
.hwc-b{padding:22px 14px 0;display:flex;flex-direction:column;flex:1}
.hwc .k{font:500 var(--fs-body)/1 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--gold-d);margin:0 0 12px}
.hwc.navy .k{color:var(--gold-b)}
.hwc h3{margin:0;font:600 var(--fs-body)/1.12 var(--serif);letter-spacing:-.012em}
.hwc h3 em{color:var(--gold-d)}
.hwc.navy h3 em{color:var(--gold-b)}
.hwc .ln1{margin:10px 0 0;font-size:var(--fs-body);color:var(--ink70)}
.hwc.navy .ln1{color:rgba(255,255,255,.75)}
.hwc ul{list-style:none;margin:18px 0 24px;padding:0;display:grid;gap:9px}
.hwc li{position:relative;padding-left:22px;font-size:var(--fs-body);line-height:1.45;color:var(--ink70)}
.hwc.navy li{color:rgba(255,255,255,.82)}
.hwc li::before{content:"";position:absolute;left:0;top:.62em;width:11px;height:1.5px;background:var(--gold)}
.hwc .btn{margin-top:auto;align-self:flex-start}
/* under the boxes: the link to the ChatGPT comparison */
.gpt-row{margin:32px 0 0;text-align:center}
.gpt-link{display:inline-block;font:500 var(--fs-body)/1.35 var(--serif);color:var(--gold-d);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .4s}
.gpt-link:hover{border-bottom-color:currentColor}
@media (max-width:1024px){
  .hw3{grid-template-columns:minmax(0,1fr);gap:0;max-width:620px;margin-left:auto;margin-right:auto}
  .ms{text-align:left;padding:28px 0 12px}
  .hw-col:first-child .ms{padding-top:6px}
}

/* ---------- the three box demos (drawn at 440 x 340, scaled to the box) ---------- */
.stage [data-step]{opacity:0;transform:translateY(6px);transition:opacity .5s var(--ease),transform .6s var(--ease),background .5s}
.stage [data-step].on{opacity:1;transform:none}
/* Mara: a short talk turns into three essay ideas */
/* box demos: the original look (spoken words flow into Mara's orb; a resume is read and research tips pop up), with the new content */
.st-mara,.st-res{background:#fff}
.st-mara .mq{position:absolute;left:14px;top:14px;width:196px;margin:0;padding:9px 12px 10px;border-radius:4px 12px 12px 12px;background:var(--stone);font:400 16px/1.3 var(--serif);color:var(--ink);opacity:0;transform:translateY(6px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.st-mara .mq b{display:block;font:600 14px/1 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--gold-d);margin-bottom:4px}
.st-mara .mq.on{opacity:1;transform:none}
.st-mara .rib{position:absolute;inset:0;width:100%;height:100%}
.rib-bed{fill:none;stroke:var(--stone);stroke-width:30;stroke-linecap:round}
.rib-t{font:400 17px var(--serif);fill:var(--ink70);dominant-baseline:middle}
.st-mara .orb{left:30%;top:62%;width:72px;height:72px;margin:-36px 0 0 -36px}
.st-mara.idle .orb>i,.st-mara.idle .orb .core{animation-play-state:paused}
.ideas{position:absolute;left:45%;right:12px;top:12px;bottom:12px;display:flex;flex-direction:column;justify-content:center;gap:8px}
.idc{position:relative;background:#fff;border-radius:12px;box-shadow:0 0 0 1px var(--line),0 8px 20px -10px rgba(27,42,74,.25);border-left:3px solid var(--gold-b);padding:8px 12px 9px;opacity:0;transform:translateX(-10px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.idc.on{opacity:1;transform:none}
.idc small{display:block;font:600 14px/1 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--gold-d);margin-bottom:3px}
.idc b{display:block;font:600 17px/1.2 var(--serif);color:var(--navy)}
.idc span{display:block;margin-top:2px;font:400 14px/1.3 var(--serif);color:var(--ink70)}
.st-res .br{position:absolute;left:14px;top:14px;bottom:14px;width:30%;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;background:#FFFDF6}
.br-bar{display:flex;align-items:center;height:34px;padding:0 12px;background:var(--stone);border-bottom:1px solid var(--line)}
.br-bar span{font:600 14px/1 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--ink50)}
.br-body{position:relative;padding:10px 10px 0}
.qt{margin:4px 0 7px;font:400 15px/1.28 var(--serif);color:var(--ink70);padding:4px 7px;border-radius:5px;transition:background .6s var(--ease),color .6s}
.qt.hit{background:rgba(226,182,90,.32);color:var(--ink)}
.st-res .br-body{padding-top:8px}.st-res .qt{margin:3px 0 5px}.st-res .br-bar span{white-space:nowrap;letter-spacing:.03em}   /* change 11: the USC resume lines are longer */
.scan{position:absolute;left:0;right:0;top:0;height:26px;background:linear-gradient(180deg,rgba(226,182,90,0),rgba(226,182,90,.16));border-bottom:1.5px solid rgba(176,141,87,.7);transform:translateY(-30px);opacity:0}
.res-tr{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.res-tr .tr{stroke-width:1.2;vector-effect:non-scaling-stroke}
.brief{position:absolute;right:14px;top:14px;bottom:14px;width:calc(70% - 46px);display:flex;flex-direction:column;gap:6px}
.bf-h{margin:0;padding:6px 2px 2px;font:600 14px/1 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--ink50)}
.claim{position:relative;background:#fff;border-radius:11px;padding:8px 11px 9px;box-shadow:0 0 0 1px var(--line),0 6px 16px -8px rgba(27,42,74,.2);opacity:0;transform:translateX(10px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.claim p{margin:0;font:400 14px/1.22 var(--serif);color:var(--navy)}
.claim .src{display:inline-block;margin-top:5px;font:500 14px/1.15 var(--serif);color:var(--navy);background:var(--sky);padding:4px 6px;border-radius:5px}
.claim.on{opacity:1;transform:none}
.claim.m{box-shadow:0 0 0 1.5px var(--gold),0 6px 16px -8px rgba(27,42,74,.2)}
.match{margin-top:auto;display:flex;flex-direction:column;gap:4px;padding:8px 11px 9px;border-radius:11px;background:var(--navy);color:#fff;opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.match span{font:600 14px/1 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--gold-b)}
.match b{font:500 14px/1.25 var(--serif)}
.match.on{opacity:1;transform:none}
/* a real person: a draft gets marked up, round by round */
.st-hum{background:#fff}
.st-hum .sheet{position:absolute;left:16px;top:16px;bottom:16px;width:292px;background:#FFFDF6;border-radius:10px;box-shadow:0 0 0 1px var(--line),0 10px 24px -14px rgba(27,42,74,.35);padding:14px 14px 0;overflow:hidden}
.st-hum .sheet .t{font:600 14px/1 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--ink50);margin:0 0 10px}
.st-hum .sheet p{margin:0 0 7px;font:400 15px/21px var(--serif);color:var(--ink)}
/* the cut: a red line through the sentence, across every line it wraps onto */
.st-hum .x{background:linear-gradient(var(--strike),var(--strike)) 0 58%/0 2px no-repeat;transition:background-size .7s var(--ease)}
.st-hum .hl{background:linear-gradient(transparent 60%,rgba(226,182,90,0) 60%);transition:background .7s}
.st-hum .sheet .m{display:block;margin:-2px 0 9px;font:400 20px/1.1 var(--hand);color:var(--note);opacity:0;transform:translateY(6px) rotate(-2deg);transition:all .6s var(--ease)}
.st-hum .side{position:absolute;right:16px;top:16px;bottom:16px;width:130px;display:flex;flex-direction:column;gap:8px}
.st-hum .av{flex:none;width:auto;height:auto;color:inherit;display:flex;flex-wrap:wrap;align-items:center;gap:8px 0;background:var(--stone);border-radius:12px;padding:9px}
.st-hum .av span{width:30px;height:30px;border-radius:50%;display:inline-grid;place-items:center;font:600 14px/1 var(--serif);color:#fff;background:var(--navy)}
.st-hum .av span+span{margin-left:-4px;background:var(--gold-d);box-shadow:0 0 0 2px var(--stone)}
.st-hum .av b{flex-basis:100%;font:600 14px/1.25 var(--serif);color:var(--ink)}
.st-hum .rd{display:flex;align-items:center;justify-content:space-between;border-radius:10px;padding:8px 10px;background:var(--stone);font:600 15px/1 var(--serif);color:var(--ink50);transition:all .5s var(--ease)}
.st-hum .rd i{width:8px;height:8px;border-radius:50%;background:var(--line2);transition:background .4s}
.st-hum .rd.on{background:var(--navy);color:#fff}
.st-hum .rd.on i{background:var(--gold-b)}
.st-hum .rd.fin.on{background:var(--gold-d)}
.st-hum.s1 .x1,.st-hum.s2 .x1,.st-hum.s3 .x1{background-size:100% 2px}
.st-hum.s1 .m1,.st-hum.s2 .m1,.st-hum.s3 .m1{opacity:1;transform:rotate(-2deg)}
.st-hum.s2 .x2,.st-hum.s3 .x2{background-size:100% 2px}
.st-hum.s2 .hl,.st-hum.s3 .hl{background:linear-gradient(transparent 60%,rgba(226,182,90,.55) 60%)}
.st-hum.s3 .m2{opacity:1;transform:rotate(-2deg)}
/* phones: a simpler version of each demo (same look, fewer pieces, larger text) on a 320-wide stage */
@media (max-width:640px){
  .anim-in{width:320px}
  .anim-in>.stage{height:250px}
  .st-mara .mq,.st-mara .rib-bed,.st-mara .rib g{display:none}   /* Mara: the orb and the three essay ideas */
  .st-mara .orb{left:17%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px}
  .ideas{left:35%;right:10px;top:10px;bottom:10px;gap:7px}
  .idc{padding:7px 10px 8px}
  .idc small{font-size:12px}.idc b{font-size:14.5px}.idc span{font-size:12.5px}
  .st-res .q3,.st-res .match{display:none}   /* research: two resume lines, two tips */
  .st-res .br{left:10px;top:10px;bottom:10px;width:32%}
  .br-bar{height:28px;padding:0 10px}.br-bar span{font-size:12px}
  .br-body{padding:8px 8px 0}
  .qt{margin:4px 0 8px;font-size:13px;padding:3px 6px}
  .brief{right:10px;top:10px;bottom:10px;width:calc(68% - 30px)}
  .bf-h{font-size:12px;padding:4px 2px 2px}
  .claim{padding:6px 8px 7px}.claim p{font-size:12.5px}.claim .src{font-size:11.5px;padding:3px 5px}
  .st-hum .av,.st-hum .sheet .m2{display:none}   /* the editor: the draft, one note, the round chips */
  .st-hum .sheet{left:10px;right:10px;top:10px;bottom:50px;width:auto;padding:12px 12px 0}
  .st-hum .sheet .t{font-size:12px;margin-bottom:8px}
  .st-hum .sheet p{font-size:12.5px;line-height:18px;margin-bottom:5px}
  .st-hum .sheet .m{font-size:17px;margin-bottom:6px}
  .st-hum .side{left:10px;right:10px;top:auto;bottom:10px;width:auto;flex-direction:row;gap:6px}
  .st-hum .rd{flex:1;justify-content:center;padding:8px 4px;font-size:12px}
  .st-hum .rd i{display:none}
}

/* ---------- why not ChatGPT: the client's reference layout (1 Oct export), three chatbots stacked, the report card beside ---------- */
/* ---------- why not ChatGPT: one screen. The question and the three bot answers sit on the left (pinned while you scroll on desktop);
   WriteWise's research card on the right scrolls past them. The chat cards are drawn like a chat app, so their text is UI-sized ---------- */
.gpt,.sec-s.gpt{overflow-x:clip}
.gpt .sec-head.c{margin-bottom:0}
.gpt .sec-head .lede em{color:var(--gold-d)}
.vs2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,2.6vw,36px);margin-top:16px;align-items:start}
.vs2-l{display:grid;gap:10px}
.gpt-ask{display:block;background:var(--navy);color:#fff;border-radius:16px;padding:12px 18px 13px}
.gpt-ask span{display:block;font:500 15px/1.2 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--gold-b);margin-bottom:4px}
.gpt-ask p{margin:0;font:400 17px/1.45 var(--serif)}
.bots{list-style:none;margin:0;padding:6px 18px;display:block;background:#fff;border-radius:16px;box-shadow:0 0 0 1px var(--line)}
.bots li{position:relative;padding:11px 0 12px;border-top:1px solid rgba(27,42,74,.08);opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--i) * 140ms)}
.bots li:first-child{border-top:0}
.vs2.go .bots li{opacity:1;transform:none}
.bot{margin:0}
.bot figcaption{display:flex;align-items:center;gap:8px;font:600 16px/1 var(--serif);color:#6E7482}
.bot-ic{width:17px;height:17px;flex:none}
.bot p{margin:6px 0 0;font:400 16px/1.42 var(--serif);color:#5D6474}
/* the verdict sits on the bot's name line, in red pen */
.scrawl{position:absolute;right:0;top:7px;display:block;width:fit-content;max-width:62%;margin:0;font:400 20px/1.15 var(--hand);color:var(--note);transform:rotate(-1.4deg);transform-origin:right center;clip-path:inset(-10% 100% -20% 0);transition:clip-path 1s cubic-bezier(.45,0,.25,1);transition-delay:calc(650ms + var(--i) * 260ms)}
.vs2.go .scrawl{clip-path:inset(-10% -4% -20% 0)}
.us2{background:#fff;border:2px solid var(--navy);border-radius:20px;padding:16px 22px 16px;box-shadow:var(--shadow-lg)}
.us2-h{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:8px}
.us2-h b{font:600 var(--fs-body)/1.2 var(--serif);color:var(--navy)}
.us2-h b i{font-style:italic;color:var(--gold)}
.us2-h span{font:500 15px/1 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;background:var(--gold-b);color:var(--navy-d);padding:6px 12px;border-radius:999px;white-space:nowrap}
.ptr2{list-style:none;margin:0;padding:0}
.ptr2 li{padding:12px 0;border-top:1px solid var(--line);opacity:0;transform:translateX(10px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.vs2.go .ptr2 li{opacity:1;transform:none}
.ptr2 li b{display:block;font:600 17px/1.3 var(--serif);color:var(--navy)}
.ptr2 li q{display:block;margin-top:5px;font:italic 400 16px/1.45 var(--serif);color:var(--ink70);quotes:"\201C" "\201D"}
.ptr2 li q::before{content:open-quote}.ptr2 li q::after{content:close-quote}
.ptr2 li small{display:block;margin-top:5px;font:400 15px/1.35 var(--serif);color:var(--ink50)}
.ptr2 li small span{color:var(--gold-d)}
.ptr2 li.fl b{color:var(--ink50)}
.ptr2 li.fl small{color:var(--note)}
@media (min-width:1025px){.vs2-l{position:sticky;top:calc(var(--nav) + 20px)}}
@media (prefers-reduced-motion:reduce){.bots li,.ptr2 li{opacity:1;transform:none;transition:none}.scrawl{clip-path:none;transition:none}}   /* desktop: the question and answers stay in view while the research card scrolls past */
@media (max-width:1024px){.vs2{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.bots{padding:4px 14px}.scrawl{position:static;margin:6px 0 0 auto;max-width:100%}.us2{padding:14px 16px}.us2-h{flex-wrap:wrap}}

/* ---------- word cloud ---------- */
.cloud2{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.cloud2::before{content:"";position:absolute;inset:0;background:var(--paper) 0 0/760px 760px;mix-blend-mode:multiply;opacity:.35;pointer-events:none}
.cloud2>.wrap{position:relative}
.cloud2 .h2{color:#fff}
.cloud2 .lede{color:rgba(255,255,255,.72)}

.cw2{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 22px;max-width:1080px;margin:36px auto 0;padding:6px 0 30px}
.cw2>button{position:relative;border:0;background:none;cursor:pointer;font-family:var(--serif);color:rgba(255,255,255,.62);padding:3px 2px;line-height:1.1;transition:transform .35s var(--ease),color .25s;animation:bob var(--d,7s) ease-in-out var(--dl,0s) infinite alternate}
/* the cloud is an illustration: three sizes (1, 1.25 and 1.5 times body) and three strengths */
.cw2>.w1{font-size:var(--fs-body);color:rgba(255,255,255,.55)}.cw2>.w2{font-size:calc(var(--fs-body) * 1.25);color:rgba(255,255,255,.76)}.cw2>.w3{font-size:calc(var(--fs-body) * 1.5);color:rgba(255,255,255,.95)}
.cw2>button:hover,.cw2>button:focus-visible,.cw2>button.on{color:var(--gold-b);transform:scale(1.18);z-index:5;animation-play-state:paused;outline:none}
@keyframes bob{from{translate:0 -4px}to{translate:0 4px}}
body.still .cw2>button{animation:none}
.cwc{position:absolute;z-index:20;width:340px;box-sizing:border-box;background:#fff;color:var(--ink);border-radius:18px;padding:16px 18px;box-shadow:0 30px 60px -24px rgba(0,0,0,.6);opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .25s,transform .3s var(--ease)}
.cwc.on{opacity:1;pointer-events:auto;transform:none}
.cwc .k{margin:0;font:500 var(--fs-body)/1 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--gold-d)}
.cwc h4{margin:6px 0;font:600 var(--fs-body)/1.1 var(--serif)}
.cwc p{margin:0 0 14px;font-size:var(--fs-body);line-height:1.5;color:var(--ink70)}
.cwc .btn{white-space:normal;max-width:100%;text-align:left;line-height:1.25;padding:11px 16px}   /* long college names wrap inside the card */
.cwc .btn .ar{flex:none}
.cloud-hn{position:absolute;right:8%;top:-6px;transform:rotate(-5deg)}
@media (prefers-reduced-motion:reduce){.cw2>button{animation:none}}

/* ---------- referral banner ---------- */

/* ---------- close panel: book a call ---------- */
/* landing page: a full-width band in the footer's navy, so call + footer read as one ending */
.close.close-band{padding:0}
.close-band .panel.navy{border-radius:0;background:var(--navy-d);padding:clamp(64px,7vw,104px) max(var(--gut),calc((100% - var(--wrap)) / 2)) clamp(8px,1.5vw,24px)}
.close-band .panel.navy::before{opacity:.35}
/* one ending per page: the pitch and two buttons on the left, a compact contact card on the right, the referral line under both */

.call-l .lede{margin:14px 0 0;font-size:var(--fs-body)}
.call-l .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.call-card{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);border-radius:18px;padding:clamp(22px,2.4vw,30px)}
.contact{list-style:none;margin:0;padding:0;display:grid;gap:16px;font-size:var(--fs-body);line-height:var(--lh-body);color:rgba(255,255,255,.82)}
.contact li span{display:block;font:500 var(--fs-body)/1.2 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--gold-b)}
.contact a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:3px}
.contact li[hidden]{display:none}
.call-ref{grid-column:1/-1;margin:0;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);font:400 var(--fs-body)/1.5 var(--serif);color:rgba(255,255,255,.72)}
.call-ref .link{border:0;background:none;padding:0;font:inherit;font-weight:500;color:var(--gold-b);cursor:pointer}
@media (max-width:640px){.call-l .row .btn{flex:1 1 100%;justify-content:center}}
.call .h2 s{text-decoration-color:var(--gold-b);text-decoration-thickness:3px;color:rgba(255,255,255,.55)}
.btn-ghost-d{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.btn-ghost-d:hover{background:rgba(255,255,255,.08)}
.call .hn2{margin-top:18px}

/* ---------- signup ---------- */
.sm{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:16px}
.sm[hidden]{display:none}
.sm-bg{position:absolute;inset:0;background:rgba(19,31,54,.62);backdrop-filter:blur(3px)}
.sm-card{position:relative;width:100%;max-width:520px;max-height:92vh;overflow:auto;background:#FFFDF8;border-radius:26px;padding:32px 30px 26px;box-shadow:0 40px 80px -30px rgba(0,0,0,.6);animation:smIn .45s var(--ease) both}
.sm-card::before{content:"";position:absolute;inset:0;background:var(--paper) 0 0/760px 760px;mix-blend-mode:multiply;opacity:.35;pointer-events:none;border-radius:inherit}
.sm-card>*{position:relative}
@keyframes smIn{from{opacity:0;transform:translateY(14px) scale(.98)}}
.sm-x{position:absolute;right:14px;top:10px;border:0;background:none;font-size:var(--fs-body);line-height:1;color:var(--navy);cursor:pointer;padding:6px;z-index:2}
.sm-k{margin:0;font:500 var(--fs-body)/1 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--gold-d)}
.sm h3{margin:10px 0 6px;font:600 var(--fs-body)/1.08 var(--serif);color:var(--navy)}
.sm h3 em{color:var(--gold)}
.sm .sm-p{margin:0 0 18px;font-size:var(--fs-body);color:var(--ink70)}
.sm form{display:grid;gap:12px}
.sm label,.sm .lbl{display:grid;gap:7px;font:500 var(--fs-body)/1 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--ink50)}
.sm input,.sm select{font:400 var(--fs-body)/1.2 var(--serif);padding:13px 14px;border:1px solid var(--line2);border-radius:12px;background:#fff;color:var(--navy);width:100%;outline:none}
.sm input:focus,.sm select:focus{border-color:var(--navy)}
.sm .bad{border-color:var(--gold-d);box-shadow:0 0 0 2px rgba(226,182,90,.45)}
.seg2{display:flex;gap:4px;padding:4px;border-radius:999px;background:#fff;border:1px solid var(--line2);justify-self:start}
.seg2 button{font:500 var(--fs-body)/1 var(--serif);border:0;background:none;color:var(--navy);padding:10px 16px;border-radius:999px;cursor:pointer}
.seg2 button[aria-pressed="true"]{background:var(--navy);color:#fff}
.sm .btn{justify-content:center;width:100%;margin-top:4px}
.sm-fine{margin:4px 0 0;text-align:center;font-size:var(--fs-body);color:var(--ink50)}
.sm-done[hidden],.sm-form[hidden]{display:none}
.sm-ref{border-top:1px dashed var(--line2);padding-top:16px}
.sm-ref p{margin:0 0 10px;font-size:var(--fs-body);color:var(--ink70)}
.sm-ref p b{color:var(--navy)}
.reflink{display:flex;gap:8px;background:#fff;border:1px solid var(--line2);border-radius:12px;padding:6px 6px 6px 12px;align-items:center;margin-bottom:10px}
.reflink code{flex:1;font:400 var(--fs-body)/1.2 var(--serif);color:var(--navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reflink button{border:0;border-radius:9px;background:var(--navy);color:#fff;font:500 var(--fs-body)/1 var(--serif);padding:9px 12px;cursor:pointer}
.friends4{display:flex;gap:8px;margin:12px 0 4px}
.friends4 i{width:26px;height:26px;border-radius:50%;border:2px dashed var(--line2)}
body.smopen{overflow:hidden}
/* the endings */
.sm-done-p{margin:0 0 16px!important}
.sm-choices{display:grid;gap:10px;margin:14px 0 20px}
.sm-ch{display:block;padding:14px 16px;border:1px solid var(--line2);border-radius:14px;background:#fff;color:var(--navy);text-decoration:none;transition:border-color .25s,box-shadow .25s,transform .25s var(--ease)}
.sm-ch:hover,.sm-ch:focus-visible{border-color:var(--navy);box-shadow:0 10px 24px -16px rgba(27,42,74,.5);transform:translateY(-1px);outline:none}
.sm-ch b{display:flex;justify-content:space-between;gap:12px;font:600 var(--fs-body)/1.3 var(--serif)}
.sm-ch b .ar{color:var(--gold-d)}
.sm-ch>span{display:block;margin-top:3px;font:400 var(--fs-body)/1.45 var(--serif);color:var(--ink70)}
.sm-goto{margin:6px 0 0}
/* phones: a bottom sheet that stays above the on-screen keyboard */
@media (max-width:640px){
  .sm{align-items:flex-end;padding:0}
  .sm-card{max-width:none;border-radius:22px 22px 0 0;max-height:calc(var(--vvh,100dvh) - 12px);padding:28px 20px calc(20px + env(safe-area-inset-bottom))}
}

/* ---------- mobile start bar ---------- */
.mbar{position:fixed;left:10px;right:10px;bottom:10px;z-index:90;display:none;align-items:center;justify-content:space-between;gap:10px;background:var(--navy);color:#fff;border-radius:999px;padding:7px 7px 7px 18px;box-shadow:0 20px 40px -16px rgba(0,0,0,.6);transform:translateY(140%);transition:transform .45s var(--ease)}
.mbar span{font:400 var(--fs-body)/1.1 var(--serif)}
.mbar span em{color:var(--gold-b)}
.mbar .btn{padding:11px 16px;font-size:var(--fs-body)}
.mbar.on{transform:none}
@media (max-width:760px){.mbar{display:flex}}

/* ---------- tool pages ---------- */

.ph-cta .btn-2l{padding:12px 20px 11px}
.tiles.t4 .tile b,.tiles.t5 .tile b{font-size:clamp(40px,3.8vw,60px)}
.tiles.t5{grid-template-columns:repeat(5,1fr)}
@media (max-width:1024px){.tiles.t5{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* journal notecards (brainstorm problems) */

/* flip cards (Brainstorm and College Research): clean cards that size to their content; front and back share one cell */

/* the front sets the card's height; the back sits over it, and the card grows to the back's height when flipped (app.js) */

   /* the back is hidden at rest, so it never catches clicks below the card */

/* roadmap document preview */
.rm2{display:grid;grid-template-columns:4fr 7fr;gap:clamp(24px,4vw,64px);align-items:start}
.rm2-tabs{display:grid;gap:8px;margin-top:26px}
.rm2-tabs button{display:flex;gap:12px;align-items:center;text-align:left;border:1px solid var(--line2);background:#fff;border-radius:14px;padding:12px 14px;cursor:pointer;font:400 var(--fs-body)/var(--lh-body) var(--serif);color:var(--ink)}
.rm2-tabs button b{font-weight:600;display:block}
.rm2-tabs button small{color:var(--ink50);font-size:var(--fs-body)}
.rm2-tabs button i{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:500 var(--fs-body)/1 var(--serif);font-variant-caps:all-small-caps;font-style:normal;background:var(--stone);color:var(--navy);flex:none}
.rm2-tabs button[aria-pressed="true"]{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.rm2-tabs button[aria-pressed="true"] i{background:var(--navy);color:var(--gold-b)}
.rm2-doc{position:relative;padding:14px 10px 10px;outline:none}   /* no box behind the note: just the notepad page, pinned */
/* a gold tack holds the note */
.rm2-doc::before{content:"";position:absolute;left:50%;top:2px;width:20px;height:20px;margin-left:-10px;border-radius:50%;z-index:5;background:radial-gradient(circle at 35% 30%,#FFF6DD 0 12%,#E2B65A 30%,#8C6D3F 85%);box-shadow:2px 4px 5px rgba(0,0,0,.28);pointer-events:none}

.rm2-doc .pgs{position:relative;display:grid;padding:0 22px 20px 0;transition:opacity .3s}
.rm2-doc.swap .pgs{opacity:0}
.rm2-doc .pgs>.rpage{grid-area:1/1;transform-origin:30% 100%;transition:transform .65s var(--ease),opacity .45s var(--ease),filter .5s}
.rm2-doc .rpage.on{z-index:3}

.rpage{position:relative;background:#fff;border-radius:6px;padding:34px 38px 30px 56px;box-shadow:0 10px 26px -18px rgba(27,42,74,.5);
  background-image:linear-gradient(90deg,transparent 40px,rgba(176,141,87,.3) 40px,rgba(176,141,87,.3) 41.5px,transparent 41.5px)}
.rpage .rk{margin:0 0 6px;font:500 var(--fs-body)/1 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--gold-d)}
.rpage h4{margin:0 0 12px;font:600 var(--fs-body)/1.15 var(--serif);color:var(--navy)}
.rpage h5{margin:18px 0 6px;font:500 var(--fs-body)/1 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--ink50)}
.rpage p{margin:0 0 10px;font:400 var(--fs-body)/var(--lh-body) var(--serif);color:var(--ink)}
.rpage .cover{border-bottom:1px solid var(--line2);padding-bottom:16px;margin-bottom:6px}
.rpage .cover b{display:block;font:600 var(--fs-body)/1.05 var(--serif);color:var(--navy)}
.rpage .cover span{font:500 var(--fs-body)/1 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--ink50)}
.rpage blockquote{margin:10px 0;padding:10px 14px;border-left:3px solid var(--gold-b);background:#fff;font:400 italic var(--fs-body)/var(--lh-body) var(--serif);color:var(--ink70)}
.rpage .keep{display:flex;gap:10px;align-items:baseline;margin:6px 0;font:400 var(--fs-body)/var(--lh-body) var(--serif)}
.rpage .keep span{flex:none;font:500 var(--fs-body)/1 var(--serif);color:var(--gold-d)}
.rpage .warn{background:var(--butter);border-radius:10px;padding:10px 12px;font:400 var(--fs-body)/var(--lh-body) var(--serif);color:var(--gold-d)}
.rpage .hn2{position:absolute;right:22px;top:22px;transform:rotate(-4deg);font-size:var(--fs-body)}
.rpage .pno{position:absolute;right:18px;bottom:12px;font:500 var(--fs-body)/1 var(--serif);color:var(--ink30)}
@media (max-width:1024px){.rm2{grid-template-columns:minmax(0,1fr)}.rpage{padding:28px 20px 26px 46px}}
@media (max-width:640px){
  .rm2-doc{padding:16px 14px 16px}
  .rm2-doc .pgs{display:block;padding:0 12px 14px 0}
  .rm2-doc .pgs::before,.rm2-doc .pgs::after{content:"";position:absolute;top:0;left:0;right:12px;bottom:14px;background:#fff;border-radius:6px;box-shadow:0 10px 26px -18px rgba(27,42,74,.5)}
  .rm2-doc .pgs::before{transform:translate(12px,13px) rotate(1.8deg);filter:brightness(.95)}
  .rm2-doc .pgs::after{transform:translate(7px,7px) rotate(1deg);filter:brightness(.975)}
  .rm2-doc .pgs>.rpage{position:relative;z-index:2}
  
  
  .rpage .hn2{position:static;display:block;width:fit-content;margin:-8px 0 12px auto}
}

/* benefits: why Mara, not a chatbot */
.ben{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:10px}
.ben>div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:22px}
.ben b{display:block;font:600 var(--fs-body)/1.2 var(--serif);color:#fff;margin-bottom:8px}
.ben p{margin:0;font-size:var(--fs-body);line-height:1.5;color:rgba(255,255,255,.72)}
.ben .hn2{margin-top:10px}
@media (max-width:1024px){.ben{grid-template-columns:1fr}}

/* research flips: problem front, exact quote back */

/* free sample block */
.fs2{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
.fs2 .h2{max-width:13ch}
.fs2-steps{list-style:none;margin:24px 0 28px;padding:0;display:grid;gap:12px}
.fs2-steps li{display:flex;gap:14px;align-items:baseline;font-size:var(--fs-body);color:var(--ink70)}
.fs2-steps li i{flex:none;width:28px;height:28px;border-radius:50%;background:var(--navy);color:var(--gold-b);font:500 var(--fs-body)/28px var(--serif);font-style:normal;text-align:center}
.fs2-steps li b{color:var(--navy);font-weight:600}
.rep{position:relative;height:420px}
.rp2{position:absolute;top:0;width:52%;aspect-ratio:8.5/11;background:#fff;border-radius:8px;box-shadow:0 18px 36px -24px rgba(19,31,54,.6),0 0 0 1px var(--line);padding:16px}
.rp2 .rk{margin:0 0 8px;font:500 var(--fs-body)/1 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--gold-d)}
.rp2 h5{margin:0 0 10px;font:600 var(--fs-body)/1.2 var(--serif);color:var(--navy)}
.rp2 i{display:block;height:6px;border-radius:3px;background:var(--line2);margin:0 0 7px}
.rp2 i.g{background:rgba(176,141,87,.42)}
/* p. 1 reads at a glance: two real points from Purdue's pages and why they fit (stand-in until real report pages) */
.rp-front .rk{margin-bottom:6px}.rp-front h5{margin-bottom:8px}
.rp-pt{margin:0 0 8px;padding-left:9px;border-left:2px solid var(--gold);font:400 13.5px/1.35 var(--serif);color:var(--navy)}
.rp-pt b{font-weight:600}.rp-pt small{display:block;margin-top:2px;font-size:11.5px;color:var(--ink50)}
.rp-fit{margin:10px 0 0;padding:8px 10px;border-radius:8px;background:var(--navy);color:#fff;font:400 13px/1.35 var(--serif)}
.rp-fit span{display:block;margin-bottom:2px;font:600 11.5px/1 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--gold-b)}
.rp2.lock{filter:blur(3.5px)}
.rep-free{position:absolute;left:0;top:-14px;z-index:30;background:var(--gold-b);color:var(--navy-d);font:500 var(--fs-body)/1 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;padding:7px 11px;border-radius:999px}
.rep-lock{position:absolute;right:2%;bottom:6%;z-index:30;background:var(--navy);color:#fff;border-radius:16px;padding:12px 16px;font-size:var(--fs-body);box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}
.rep-lock b{display:block;font:600 var(--fs-body)/1.1 var(--serif);color:var(--gold-b)}
@media (max-width:1024px){.fs2{grid-template-columns:1fr;gap:34px}.rep{height:360px}}
@media (max-width:520px){.rep{height:290px}.rp2{padding:10px}.rp2 h5{font-size:var(--fs-body)}}
@media (max-width:520px){.rep-lock{right:0;bottom:-62px}.rep{margin-bottom:66px}.rp-front{width:72%}.rp-pt{font-size:12.5px;margin-bottom:6px}.rp-pt small{font-size:11px;overflow-wrap:anywhere}.rp-fit{font-size:12px;padding:6px 8px}.rep{height:330px}}

/* samples page: the annotated page */
.spread2{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:26px;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-lg)}
.spread2>div{padding:34px 34px 30px;min-height:260px}
.spread2 .l{background:#F3EFE6}
.spread2 .r{background:#FFFDF6;box-shadow:inset 22px 0 26px -24px rgba(0,0,0,.25)}
.spread2 .k{margin:0 0 12px;font:500 var(--fs-body)/1 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--ink50)}
.spread2 .r .k{color:var(--gold-d)}
.spread2 p.t{margin:0;font:400 var(--fs-body)/var(--lh-body) var(--serif);color:var(--navy);transition:opacity .3s}
.spread2 .l p.t{color:var(--ink50);text-decoration:line-through;text-decoration-color:var(--strike)}
.spread2.swap p.t{opacity:0}
.annot{display:grid;grid-template-columns:7fr 4fr;gap:26px;margin-top:26px;align-items:start}
.sheet2{position:relative;background:#FFFDF6;border-radius:6px;padding:40px 44px 36px 64px;box-shadow:0 18px 40px -26px rgba(27,42,74,.55);
  background-image:linear-gradient(90deg,transparent 46px,rgba(176,141,87,.35) 46px,rgba(176,141,87,.35) 47.5px,transparent 47.5px),repeating-linear-gradient(180deg,transparent 0,transparent 35px,#E3E8F1 35px,#E3E8F1 36px);background-position:0 0,0 36px}
.sheet2 .sk{margin:0 0 14px;font:500 var(--fs-body)/1 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--ink50)}
.sheet2 p{margin:0;font:400 var(--fs-body)/36px var(--serif);color:var(--ink)}
.sheet2 del{text-decoration-color:var(--strike);text-decoration-thickness:2px;color:var(--ink50)}
.sheet2 .ma{background:linear-gradient(transparent 58%,rgba(226,182,90,.45) 58%)}
.sheet2 .re{background:linear-gradient(transparent 58%,rgba(214,228,245,.95) 58%)}
.sheet2 .hn2{position:absolute}
.notes2{display:grid;gap:14px}
.notes2 .n{background:#fff;border-radius:14px;padding:14px 16px;box-shadow:var(--shadow);border-left:4px solid var(--gold-b)}
.notes2 .n.re{border-left-color:var(--navy)}
.notes2 .n.hu{border-left-color:var(--navy)}
.notes2 .n b{display:block;font:500 var(--fs-body)/1 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--ink50);margin-bottom:6px}
.notes2 .n p{margin:0;font:400 var(--fs-body)/var(--lh-body) var(--serif);color:var(--navy);font-style:italic}
@media (max-width:1024px){.spread2,.annot{grid-template-columns:1fr}.sheet2{padding:32px 20px 28px 56px}}

/* about */
.essay{max-width:760px;margin:0 auto}

.essay p{margin:0 0 18px;font:400 var(--fs-body)/var(--lh-body) var(--serif);color:var(--ink)}
.essay p.lead{font-size:var(--fs-body);line-height:1.45;color:var(--navy)}
.essay .sign{font:400 var(--fs-body)/1 var(--serif);color:var(--gold-d);margin:6px 0 0;font-style:italic}
.essay .hn2{position:absolute;right:-150px;top:120px;width:140px;transform:rotate(-3deg)}

@media (max-width:1180px){.essay .hn2{position:static;width:auto;margin:-6px 0 14px}}
.h2 em{font-style:italic;color:var(--gold-d)}
.band-navy .h2 em,.panel.navy .h2 em,.cloud2 .h2 em,.close .h2 em{color:var(--gold-b)}
.panel.navy.benp{display:block}
.benp .ben{margin-top:34px}
.benp .h2{max-width:none}

.xf-side .more{display:inline-flex;margin-top:18px}
.samples-note{margin-top:16px;font:500 var(--fs-legal)/var(--lh-body) var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--ink30)}
/* ---------- transformations: the open book, first draft left, final right ---------- */
.shelf-hint{position:absolute;left:clamp(310px,26vw,380px);bottom:26%;margin:0;color:var(--note)!important;transform:rotate(-4deg);pointer-events:none}
@media (max-width:640px){.shelf-hint{left:auto;right:0;bottom:62%}}
.opened{margin-top:clamp(26px,3vw,40px);transition:opacity .3s var(--ease),transform .4s var(--ease)}
.opened.swap{opacity:0;transform:translateY(10px)}
.pair-cap{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 18px;margin:0 0 16px}
.pair-cap b{font:600 var(--fs-body)/1.15 var(--serif);color:var(--navy)}
.pair-cap span{font:500 var(--fs-body)/var(--lh-body) var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--ink50)}
.flip{display:none}
.spread{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:#FFFDF7;border-radius:8px 8px 12px 12px;
  box-shadow:0 1px 0 var(--line2),0 2px 6px -2px rgba(27,42,74,.08),0 34px 64px -38px rgba(27,42,74,.5)}
.spread::before{content:"";position:absolute;inset:0;background:var(--paper) 0 0/760px 760px;mix-blend-mode:multiply;opacity:.32;pointer-events:none;border-radius:inherit}
.spread::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:90px;transform:translateX(-50%);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(27,42,74,.035) 30%,rgba(27,42,74,.11) 49%,rgba(27,42,74,.14) 50%,rgba(27,42,74,.11) 51%,rgba(27,42,74,.035) 70%,transparent)}
.page{position:relative;padding:clamp(34px,3.4vw,56px) clamp(28px,3.8vw,68px) 72px}
.page header{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 26px;padding-bottom:13px;border-bottom:1px solid var(--line2)}
.page header b{font:500 var(--fs-body)/1 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--ink50)}
.page.final header b{color:var(--gold-d)}
.page header span{font:500 var(--fs-body)/1 var(--serif);color:var(--ink30)}
.page .txt p{margin:0 0 1.05em;font:400 var(--fs-body)/var(--lh-body) var(--serif);color:var(--ink);text-wrap:pretty;hanging-punctuation:first}
.page.draft .txt p{color:#5E6678}
.page footer{position:absolute;left:0;right:0;bottom:26px;text-align:center;font:italic 400 var(--fs-body)/1 var(--serif);color:var(--ink30)}
.page .to-final,.page .to-draft{display:none}
@media (max-width:760px){
  .flip{display:inline-flex;gap:4px;margin:0 0 14px;padding:4px;background:var(--stone);border:1px solid var(--line);border-radius:999px}
  .flip button{border:0;background:none;border-radius:999px;padding:9px 14px;font:500 var(--fs-body)/1 var(--serif);color:var(--ink70);cursor:pointer}
  .flip button small{font:500 var(--fs-body)/1 var(--serif);color:var(--ink30);margin-left:4px}
  .flip button[aria-selected="true"]{background:#fff;color:var(--navy);box-shadow:0 1px 3px rgba(27,42,74,.14)}
  .spread{grid-template-columns:minmax(0,1fr)}
  .spread::after{display:none}
  .page{padding:30px 22px 64px}
  .pair .page.final,.pair.show-final .page.draft{display:none}
  .pair.show-final .page.final{display:block}
  .page .to-final,.page .to-draft{display:block;margin:6px 0 0;background:none;border:0;padding:4px 0;cursor:pointer;font:500 var(--fs-body)/1 var(--serif);color:var(--gold-d)}
  .page .to-final{margin-left:auto}
}

/* ---------- fixes after review ---------- */
[hidden]{display:none!important}
.hn2,p.hn2,.rpage p.hn2,.sheet2 p.hn2,.essay p.hn2{font-family:var(--serif)!important;font-weight:400;font-style:italic;line-height:var(--lh-body);font-size:var(--fs-body)}
.rpage p.hn2,.sheet2 p.hn2,.essay p.hn2{color:var(--note)}

.quill{width:30px;height:34px;bottom:-2px}
.sec-s{padding:clamp(40px,5vw,72px) 0}
.stuck2{padding-bottom:clamp(40px,5vw,64px)}
.sec-head.c{max-width:920px}
.gpt .sec-head.c{max-width:1040px}
.gpt .h2.big{font-size:var(--fs-h2);max-width:none;margin:0 auto}
.ai2{padding-bottom:18px;min-height:0;display:flex;flex-direction:column}
.ai2 .v{position:static;margin-top:auto;transform:translateY(8px)}
.ai2 p{margin-bottom:14px}
.xf{height:240vh}
@media (max-width:900px){.xf{height:auto}}
.benp .h2{color:#fff}
.benp .h2 em{color:var(--gold-b)}

.pad blockquote{font-size:var(--fs-body)}

/* ---------- same student, different essay: three before / after pairs on the paper tint ---------- */
.ba3{position:relative;background:#fff}
.ba3-list{display:grid;gap:clamp(32px,3.4vw,48px);max-width:1080px;margin:0 auto}
/* each pair reveals on its own as it scrolls in: fade and a 12px rise */
.ba3-pair.rv{transform:translateY(12px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.ba3-pair.rv.in{transform:none}
/* labels: small colour-coded pills with an icon */
.ba3-k{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:6px 14px 6px 11px;border-radius:999px;font:600 var(--fs-body)/1.1 var(--serif)}
.ba3-k svg{flex:none;width:15px;height:15px}
/* one colour map for the three tools, site-wide: Mara butter, research beige, a real person navy */
.ba3-k.mara{background:var(--butter);color:var(--navy);box-shadow:inset 0 0 0 1px rgba(140,109,63,.28)}
.ba3-k.res{background:var(--beige);color:var(--navy);box-shadow:inset 0 0 0 1px rgba(140,109,63,.28)}
.ba3-k.ed{background:var(--navy);color:#fff}
.ba3-cards{display:grid;grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr);align-items:center}
/* before: lighter and quieter */
/* both cards are notepad pages: white, faint ruled lines under every line of text, a thin rose line below the label, a soft shadow */
.ba3-c{--rl:calc(var(--fs-body) * var(--lh-body));--top:44px;border-radius:6px;padding:14px 24px calc(var(--rl) * .5);
  background:linear-gradient(transparent calc(var(--top) - 1px),rgba(176,141,87,.32) calc(var(--top) - 1px),rgba(176,141,87,.32) var(--top),transparent var(--top)) 0 0/100% 100% no-repeat,
    linear-gradient(#fff,#fff) 0 0/100% calc(var(--top) + 10px) no-repeat,
    linear-gradient(transparent calc(var(--rl) - 1px),rgba(70,110,160,.17) calc(var(--rl) - 1px)) 0 calc(var(--top) + 8px)/100% var(--rl) repeat-y,#fff;
  box-shadow:0 1px 2px rgba(27,42,74,.06),0 14px 30px -18px rgba(27,42,74,.38)}
.ba3-c p+p{margin-top:0}
.ba3-c p{margin:0;font:400 var(--fs-body)/var(--lh-body) var(--serif)}
.ba3-c:not(.after){transform:scale(.96)}
.ba3-c:not(.after) p{color:#6b7590}
.ba3-c p.ba3-t{margin:0 0 calc(var(--top) - 14px - var(--fs-body) + 8px);height:var(--fs-body);font:600 var(--fs-body)/1 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:#8b93a8}
/* after: the hero */
.ba3-c.after{border-left:4px solid var(--gold);box-shadow:0 1px 2px rgba(27,42,74,.07),0 22px 44px -24px rgba(27,42,74,.45)}
.ba3-c.after p{color:var(--navy)}
.ba3-c.after p.ba3-t{color:var(--gold-d)}
/* the arrow draws in, then a soft gold highlight sweeps under the key words */
.ba3-ar{display:flex;justify-content:center;color:var(--gold)}
.ba3-ar svg{width:36px;height:16px;overflow:visible}
.ba3-ar path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;transition:stroke-dashoffset .6s var(--ease) .3s}
.ba3-pair.in .ba3-ar path{stroke-dashoffset:0}
.ba3-c mark.hl{color:inherit;padding:0 .08em;-webkit-box-decoration-break:clone;box-decoration-break:clone;background:linear-gradient(transparent 44%,rgba(226,182,90,.4) 44%,rgba(226,182,90,.4) 94%,transparent 94%) 0 0/0% 100% no-repeat;transition:background-size .7s var(--ease) .9s}
.ba3-pair.in mark.hl{background-size:100% 100%}
.ba3-note{margin:30px 0 0;text-align:center;font:400 var(--fs-body)/var(--lh-body) var(--serif);color:var(--ink50)}
.ba3-cta{text-align:center;margin-top:18px}
@media (max-width:760px){
  .ba3-cards{grid-template-columns:minmax(0,1fr);gap:4px}
  .ba3-ar{padding:2px 0}
  .ba3-ar svg{transform:rotate(90deg)}   /* the arrow points down on phone */
  .ba3-c:not(.after){transform:scale(.97)}
}

/* ---------- "Coming soon": guides and the free research pages are not open yet (client, 1 Oct 2026) ---------- */
.soon{display:inline-block;vertical-align:middle;background:var(--gold-b);color:var(--navy-d);font:500 var(--fs-body)/1 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;padding:6px 9px;border-radius:999px;white-space:nowrap}
.gd-cv .soon{position:absolute;left:14px;top:14px;z-index:2}
.btn:has(>.soon){position:relative}
.btn>.soon{position:absolute;top:-9px;right:-10px;padding:5px 7px;font-size:var(--fs-body);box-shadow:0 0 0 2px #fff}  /* a corner tag: the button keeps its size */

/* ---------- policy pages: drafts for the client and their legal adviser (1 Oct 2026) ---------- */
.ldoc{max-width:760px;margin:0 auto}
.ldoc .ldraft{display:flex;gap:14px;align-items:flex-start;background:var(--pale);border-radius:18px;padding:18px 22px;margin:0 0 30px}
.ldoc .ldraft p{margin:0;font-size:var(--fs-body);line-height:1.6;color:var(--navy)}
.ldoc .ldraft .soon{flex:none;margin-top:2px}
.ldoc .lmeta{margin:0 0 8px;font:500 var(--fs-body)/var(--lh-body) var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--ink50)}
.ldoc h2{margin:44px 0 14px;font:400 var(--fs-h2)/var(--lh-h2) var(--serif);letter-spacing:-.01em;color:var(--navy)}
.ldoc p,.ldoc li{font:400 var(--fs-body)/var(--lh-body) var(--serif);color:var(--ink70)}
.ldoc p{margin:0 0 14px}
.ldoc ul{margin:0 0 16px;padding-left:22px}
.ldoc li{margin:0 0 6px}
.ldoc a{color:var(--navy);text-decoration:underline;text-decoration-color:var(--gold-b);text-underline-offset:3px}
.ldoc strong{font-weight:600;color:var(--navy)}
.ldoc .tbc{background:var(--pale);box-shadow:inset 0 -2px 0 var(--gold-b);border-radius:4px;padding:1px 5px;color:var(--navy);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ldoc .tbc b{margin-right:6px;font:500 var(--fs-body)/1 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--gold-d)}
.ldoc table{width:100%;border-collapse:collapse;margin:4px 0 18px}
.ldoc th,.ldoc td{text-align:left;vertical-align:top;padding:12px 16px 12px 0;border-top:1px solid var(--line);font:400 var(--fs-body)/var(--lh-body) var(--serif);color:var(--ink70)}
.ldoc th{border-top:0;font:500 var(--fs-body)/var(--lh-body) var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--ink50)}
.ldoc td:first-child{width:44%;color:var(--navy)}
@media (max-width:760px){.ldoc .ldraft{flex-direction:column;gap:10px;padding:16px 18px}.ldoc p,.ldoc li{font-size:var(--fs-body)}}

/* the referral line under the tool heroes: a plain link, like every other secondary action */
.ph-ref{margin:16px 0 0}
.ph-ref .link{border:0;background:none;padding:0;font:inherit;font-weight:500;cursor:pointer;text-align:left}
.sm-ref .wa{margin-top:2px}
/* phones: keep the legal line clear of the "Start writing now" bar */
@media (max-width:760px){.foot .legal{padding-bottom:calc(84px + env(safe-area-inset-bottom))}}
@media (max-width:640px){.foot .sky .plane{top:24%}}   /* lower start, so the climb stays inside the short phone band */

/* ---------- change 6: reduced motion shows every final state, nothing moves ---------- */
@media (prefers-reduced-motion:reduce){
  .pads .pad.rv{opacity:1;transform:rotate(var(--tilt));transition:none}
  .ba3-pair.rv{transform:none}
  .ba3-ar path{stroke-dashoffset:0;transition:none}
  .ba3-c mark.hl{background-size:100% 100%;transition:none}
  
}

/* ---------- tool pages (Brainstorm and College Research): one shared layout ---------- */
/* first screen: copy and demo, then the numbers band, all inside one screen from 1366x768 up */
.tool-first{display:flex;flex-direction:column;padding-top:var(--nav)}
.tool-hero{flex:1;width:100%;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,4.4vw,72px);align-items:center;padding-top:clamp(20px,4vh,48px);padding-bottom:clamp(20px,4vh,40px)}
.tool-copy .h1{font-size:clamp(38px,3.6vw,56px);max-width:14ch;text-wrap:balance}
.tool-copy .lede{max-width:46ch;margin-top:16px}
.tool-copy .ph-cta{margin-top:26px}
.tool-demo{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0}
.tool-win{width:100%;background:#fff;border-radius:18px;box-shadow:var(--shadow-lg),0 0 0 1px var(--line);overflow:hidden}
.tw-bar{display:flex;align-items:center;gap:12px;height:38px;padding:0 14px;border-bottom:1px solid var(--line);background:#FCFBF8;font:500 14px/1 var(--serif);letter-spacing:.03em;color:var(--ink50)}
.tw-bar .dots{display:flex;gap:6px}.tw-bar .dots i{width:9px;height:9px;border-radius:50%;background:var(--line2)}
.tw-bar>span:nth-child(2){flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tw-rec{display:flex;gap:7px;align-items:center;color:var(--gold-d);font-variant-numeric:tabular-nums}
.tw-rec b{font-weight:500}
.tw-rec i{width:7px;height:7px;border-radius:50%;background:var(--sun);animation:rec 1.6s ease-in-out infinite}
.tw-rec.live{color:var(--gold-d)}.tw-rec.live i{background:var(--gold)}
.tool-win.done .tw-rec i,.tool-win.done .orb>i,.tool-win.done .orb .core,.tool-win.done .wave b{animation-play-state:paused}
.tw-k{margin:0 0 10px;font:600 13px/1 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--ink50)}
.tw-body{display:grid;min-height:clamp(300px,40vh,360px)}
.tool-win [data-step]{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.tool-win [data-step].on{opacity:1;transform:none}
/* Mara: the conversation in the middle, the essay ideas it finds on the right */
.mara-v{grid-template-columns:minmax(0,.86fr) minmax(0,1fr)}   /* change 11: the sample session's thread and titles are longer, so Mara's notes get more room */
.mv-main{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:22px 20px}
.mv-main .wave{position:relative;left:auto;top:auto;transform:none;margin:0 0 6px;height:20px}
.mv-main .wave b{background:var(--navy)}
.mv-q,.mv-a{margin:0;width:100%;max-width:340px;padding:9px 12px 10px;border-radius:12px;font:400 15px/1.4 var(--serif)}
@media (max-height:820px){.mv-early{display:none}}   /* short laptop screens: the first screen shows only the last two lines of the exchange */
.mv-q b,.mv-a b{display:block;font:600 12.5px/1 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;margin-bottom:4px}
.mv-q{background:var(--stone);color:var(--ink);border-top-left-radius:4px}
.mv-q b{color:var(--gold-d)}
.mv-a{background:var(--navy);color:#fff;border-top-right-radius:4px;align-self:flex-end}
.mv-a b{color:var(--gold-b)}
.mv-ideas{padding:14px 14px;border-left:1px solid var(--line);background:#FCFBF8;display:flex;flex-direction:column;gap:6px}
.mv-i{background:#fff;border-radius:10px;border-left:3px solid var(--gold-b);padding:6px 10px 7px;box-shadow:0 0 0 1px var(--line)}
.mv-i b{display:block;font:600 14.5px/1.25 var(--serif);color:var(--navy)}
.mv-i span{display:block;margin-top:2px;font:italic 400 13.5px/1.3 var(--serif);color:var(--ink70)}
/* research: a resume line lights up, a line draws across to the finding it earned on the college's own pages */
.res-v{position:relative;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);gap:0 30px;padding:16px 18px}
.rs-cv{background:#FFFDF6;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line);padding:14px 12px;align-self:center}
.rs-name{margin:0 0 10px;font:600 15px/1.2 var(--serif);color:var(--navy)}
.rs-l{margin:0 0 8px;padding:6px 8px;border-radius:6px;font:400 14.5px/1.35 var(--serif);color:var(--ink70);background:transparent;transition:background .5s var(--ease),color .5s}
.tool-win .rs-l[data-step]{opacity:1;transform:none}
.rs-l.on{background:rgba(226,182,90,.32);color:var(--ink)}
.rs-out{display:flex;flex-direction:column;justify-content:center;gap:9px}
.rs-f{background:#fff;border-radius:11px;box-shadow:0 0 0 1px var(--line),0 6px 16px -10px rgba(27,42,74,.25);padding:9px 11px 10px}
.rs-f small{display:block;font:600 12.5px/1 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--gold-d);margin-bottom:4px}
.rs-f q{display:block;font:italic 400 14px/1.35 var(--serif);color:var(--ink);quotes:"\201C" "\201D"}
.rs-f q::before{content:open-quote}.rs-f q::after{content:close-quote}
.rs-f .src{margin-top:6px;font:500 12px/1 var(--serif);padding:4px 6px}
.rs-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.rs-lines path{fill:none;stroke:var(--gold);stroke-width:1.4;stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300);transition:stroke-dashoffset .6s var(--ease)}
.tool-win .rs-lines path[data-step]{opacity:1;transform:none}
.rs-lines path.on{stroke-dashoffset:0}
/* the full demo link */
.tool-video{display:inline-flex;align-items:center;gap:9px;border:0;background:none;padding:6px 2px;cursor:pointer;font:500 var(--fs-body)/1 var(--serif);color:var(--navy)}
.tool-video svg{width:22px;height:22px;color:var(--gold-d);transition:transform .3s var(--ease)}
.tool-video:hover svg{transform:scale(1.08)}
.tool-video:hover span{text-decoration:underline;text-underline-offset:4px}
/* the numbers band: a clean full-width strip with hairlines, on the same grid as everything else */
.tool-band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff;padding:clamp(14px,2.2vh,22px) 0}
.tool-band .tiles .tile b{font-size:clamp(34px,3vw,48px)}
.tool-band .tiles .tile span{max-width:28ch;line-height:1.35}
/* College Research's five numbers: the long "specific reasons" label gets a wider column, so every label sits on two lines at most */
@media (min-width:1025px){.tool-band .tiles.t5{grid-template-columns:1fr 1.35fr 1fr .75fr 1fr}}
@media (min-width:1025px){.tool-first{min-height:min(100svh,900px)}}
@media (max-width:1024px){
  .tool-hero{grid-template-columns:minmax(0,1fr);gap:28px;padding-top:24px}
  .tool-copy .h1{max-width:none}
  .tool-band{padding:24px 0}
}
@media (max-width:560px){
  .tw-body{min-height:0}
  .tw-rec.live b{display:none}
  .mara-v{grid-template-columns:minmax(0,1fr)}
  .mv-ideas{border-left:0;border-top:1px solid var(--line)}
  .res-v{grid-template-columns:minmax(0,1fr);gap:12px;padding:14px}
  .rs-lines{display:none}
}
/* video lightbox */
.vmodal{position:fixed;inset:0;z-index:400;display:grid;place-items:center;padding:20px}
.vm-bg{position:absolute;inset:0;background:rgba(19,31,54,.72)}
.vm-box{position:relative;width:min(960px,100%);aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-lg)}
.vm-box iframe,.vm-box video{width:100%;height:100%;border:0;display:block}
.vm-x{position:absolute;right:10px;top:10px;width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:var(--navy);font:400 24px/1 var(--serif);cursor:pointer}

/* sound familiar: the worries as incoming messages, then the turn line and the word cloud */
.sf{padding:clamp(48px,4.6vw,64px) 0}
.sf .sec-head.c{margin-bottom:clamp(24px,2.6vw,32px)}
/* option 1 (Vedant's): the messages as still chat bubbles across the page in two rows, then the big line, then the cloud */
.sf-msgs{list-style:none;margin:0 auto;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 14px;max-width:1120px;opacity:0;transition:opacity .9s ease}
.sf.in .sf-msgs{opacity:1}
.sf-msgs li{max-width:min(340px,100%);padding:11px 16px 12px;border-radius:20px 20px 20px 6px;background:var(--sky);color:var(--navy)}
.sf-msgs li p{margin:0;font:400 var(--fs-body)/1.4 var(--serif)}
.sf-who{display:none}
.sf-turn{margin-top:clamp(32px,3.4vw,44px);text-align:center;opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease) .25s,transform .7s var(--ease) .25s}
.sf.in .sf-turn{opacity:1;transform:none}
.sf-big{max-width:24ch;margin:0 auto}
.sf-under{margin:10px auto 20px;max-width:none}
/* option 2 (Raghav's): many different people with the same problem. Each message is a little chat card from a different anonymous student, pinned loosely like screenshots */
html[data-sf="2"] .sf-msgs{gap:22px 26px;max-width:1180px;padding:6px 0}
html[data-sf="2"] .sf-msgs li{--bub:var(--sky);--av:var(--navy);--tilt:-1.6deg;--dy:0px;max-width:min(330px,100%);padding:12px 14px 14px;border-radius:14px;background:#fff;box-shadow:0 1px 2px rgba(27,42,74,.06),0 14px 26px -16px rgba(27,42,74,.4);transform:translateY(var(--dy)) rotate(var(--tilt))}
html[data-sf="2"] .sf-msgs li:nth-child(2){--bub:var(--butter);--av:var(--gold);--tilt:1.4deg;--dy:18px}
html[data-sf="2"] .sf-msgs li:nth-child(3){--bub:var(--beige);--av:var(--sky);--tilt:-.6deg;--dy:-6px}
html[data-sf="2"] .sf-msgs li:nth-child(4){--bub:var(--stone);--av:var(--sun);--tilt:2deg;--dy:10px}
html[data-sf="2"] .sf-msgs li:nth-child(5){--bub:var(--sky);--av:var(--gold-d);--tilt:-2.2deg;--dy:-4px}
html[data-sf="2"] .sf-msgs li:nth-child(6){--bub:var(--butter);--av:var(--navy-2);--tilt:1deg;--dy:14px}
html[data-sf="2"] .sf-who{display:flex;align-items:center;gap:9px;margin:0 0 9px}
html[data-sf="2"] .sf-who b{font:600 15px/1.2 var(--serif);color:var(--navy)}
html[data-sf="2"] .sf-who time{margin-left:auto;font:400 14px/1 var(--serif);color:var(--ink50)}
.sf-av{flex:none;position:relative;width:30px;height:30px;border-radius:50%;background:var(--av,var(--navy));overflow:hidden}
.sf-av::before{content:"";position:absolute;left:50%;top:6px;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;background:rgba(255,255,255,.78)}
.sf-av::after{content:"";position:absolute;left:50%;top:19px;width:22px;height:18px;margin-left:-11px;border-radius:50% 50% 0 0;background:rgba(255,255,255,.78)}
html[data-sf="2"] .sf-msgs li p{padding:9px 12px 10px;border-radius:16px 16px 16px 4px;background:var(--bub)}
@media (max-width:640px){html[data-sf="2"] .sf-msgs li{--dy:0px!important}}
/* option 3, the default: a scroll story. Without JS, or with reduced motion, it is a still layout:
   the heading, the chat cards in a loose two-column collage, the big line with its highlight, the orb (or the magnifier), then the cloud */
.sf-mark{display:none}
html:not([data-sf="1"]):not([data-sf="2"]) .sf-mark{display:block;margin:18px auto 8px;width:max-content}
.sf-orb{position:relative;left:auto;top:auto;margin:0;width:72px;height:72px}
.sf-lens{display:block;width:64px;height:64px}
html:not([data-sf="1"]):not([data-sf="2"]) .sf-msgs{display:grid;grid-template-columns:repeat(2,minmax(0,340px));justify-content:center;gap:22px 34px;max-width:820px;opacity:1}
html:not([data-sf="1"]):not([data-sf="2"]) .sf-msgs li{--bub:var(--sky);--av:var(--navy);--tilt:-1.6deg;--dy:0px;max-width:none;padding:12px 14px 14px;border-radius:14px;background:#fff;color:var(--navy);box-shadow:0 1px 2px rgba(27,42,74,.06),0 14px 26px -16px rgba(27,42,74,.45);transform:translateY(var(--dy)) rotate(var(--tilt))}
html:not([data-sf="1"]):not([data-sf="2"]) .sf-msgs li:nth-child(2){--bub:var(--butter);--av:var(--gold);--tilt:1.4deg;--dy:18px}
html:not([data-sf="1"]):not([data-sf="2"]) .sf-msgs li:nth-child(3){--bub:var(--beige);--av:var(--sky);--tilt:-.6deg;--dy:-6px}
html:not([data-sf="1"]):not([data-sf="2"]) .sf-msgs li:nth-child(4){--bub:var(--stone);--av:var(--sun);--tilt:2deg;--dy:10px}
html:not([data-sf="1"]):not([data-sf="2"]) .sf-msgs li:nth-child(5){--bub:var(--sky);--av:var(--gold-d);--tilt:-2.2deg;--dy:-4px}
html:not([data-sf="1"]):not([data-sf="2"]) .sf-msgs li:nth-child(6){--bub:var(--butter);--av:var(--navy-2);--tilt:1deg;--dy:14px}
html:not([data-sf="1"]):not([data-sf="2"]) .sf-who{display:flex;align-items:center;gap:9px;margin:0 0 9px}
html:not([data-sf="1"]):not([data-sf="2"]) .sf-who b{font:600 15px/1.2 var(--serif);color:var(--navy)}
html:not([data-sf="1"]):not([data-sf="2"]) .sf-who time{margin-left:auto;font:400 14px/1 var(--serif);color:var(--ink50)}
html:not([data-sf="1"]):not([data-sf="2"]) .sf-msgs li p{padding:9px 12px 10px;border-radius:16px 16px 16px 4px;background:var(--bub)}
html:not([data-sf="1"]):not([data-sf="2"]) .sf-turn{opacity:1;transform:none}
html:not([data-sf="1"]):not([data-sf="2"]) .sf-big{max-width:22ch;font-size:clamp(34px,4.6vw,64px);line-height:1.08}
html:not([data-sf="1"]):not([data-sf="2"]) .sf-big .hl-m{background-size:100% 100%}
html:not([data-sf="1"]):not([data-sf="2"]) .wcloud{background:none;padding:6px 0 0}
html:not([data-sf="1"]):not([data-sf="2"]) .wc-list{opacity:1}
@media (max-width:640px){html:not([data-sf="1"]):not([data-sf="2"]) .sf-msgs{grid-template-columns:minmax(0,1fr);max-width:420px}html:not([data-sf="1"]):not([data-sf="2"]) .sf-msgs li{--dy:0px!important}html:not([data-sf="1"]):not([data-sf="2"]) .sf-msgs li:nth-child(even){margin-left:18px}html:not([data-sf="1"]):not([data-sf="2"]) .sf-msgs li:nth-child(odd){margin-right:18px}}

/* the live story (JS adds .sf3-live): the section pins and scroll drives the cards, the big line, the orb and the cloud */
.sf3-live .sf{padding:0}
.sf3-live .sf-pin{position:relative;height:260vh}
.sf3-live .sf-stage{position:sticky;top:var(--nav);height:calc(100svh - var(--nav));overflow:hidden}
.sf3-live .sf-stage>.wrap{position:relative;height:100%}
.sf3-live .sf .sec-head{position:relative;z-index:1;margin:0 auto;padding-top:clamp(18px,3vh,32px)}
.sf3-live .sf-msgs{display:block;position:absolute;inset:0;max-width:none;margin:0;gap:0}
.sf3-live .sf-msgs li{position:absolute;left:0;top:0;width:340px;margin:0;opacity:0;transform:none;will-change:transform,opacity,filter}
.sf3-live .sf-turn{position:absolute;left:0;right:0;top:0;z-index:2;margin:0;opacity:1;transform:none;padding:0 var(--gut)}
.sf3-live .sf-big,.sf3-live .sf-under,.sf3-live .sf-mark{opacity:0;will-change:transform,opacity}
.sf3-live .sf-big .hl-m{background-size:0% 100%}
.sf3-live .sf-big .hl-m.on{background-size:100% 100%}
.sf3-live .wc-list li{opacity:0;will-change:transform,opacity}
@media (max-width:640px){.sf3-live .sf-pin{height:230vh}.sf3-live .sf-msgs li{width:calc(100% - 36px)}}
/* word cloud: words the client planted. L navy and large, M gold ink and medium, S ink70; it fades in once */
.wcloud{position:relative;border-radius:20px;background:var(--beige);padding:clamp(22px,2.6vw,34px) clamp(18px,3vw,48px)}
.wc-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:8px 22px;text-align:center;opacity:0;transition:opacity .9s ease}
.wcloud.in .wc-list{opacity:1}
.wc-list li{font-family:var(--serif);line-height:1.15}
.wc-list .wl{font-size:calc(var(--fs-body) * 1.75);color:var(--navy)}
.wc-list .wm{font-size:calc(var(--fs-body) * 1.3);color:var(--gold-d);font-style:italic}
.wc-list .ws{font-size:var(--fs-body);color:var(--ink70)}

/* download sample report */
.dl-row{margin-top:24px;display:flex;justify-content:center}
.dl-ic{font-weight:600;color:var(--gold-d)}
[data-report].is-soon{cursor:default;opacity:1;color:var(--ink50);box-shadow:inset 0 0 0 1px var(--line2);background:transparent}
.rm2-side .dl-row{justify-content:flex-start}

/* college research: three illustrative transformations, all visible */
.xs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:8px}
.xs-card{position:relative;display:flex;flex-direction:column;gap:16px;background:#fff;border-radius:16px;padding:22px 22px 24px;box-shadow:var(--shadow),0 0 0 1px var(--line)}
.xs-tag{position:absolute;right:16px;top:16px;margin:0;padding:3px 9px;border-radius:999px;background:var(--stone);font:500 14px/1.3 var(--serif);letter-spacing:.04em;color:var(--ink50)}
.xs-row{margin:0}
.xs-k{margin:0 0 6px;font:600 var(--fs-body)/1 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--ink50)}
.xs-draft{margin:0;font:400 var(--fs-body)/var(--lh-body) var(--serif);color:var(--ink50)}
.xs-find{padding:12px 14px;border-radius:12px;background:var(--sky)}
.xs-find .xs-k{display:inline-block;margin-bottom:10px;padding:6px 12px;border-radius:999px;background:var(--beige);color:var(--navy);box-shadow:inset 0 0 0 1px rgba(140,109,63,.28);letter-spacing:.04em}   /* task 16: the research label takes the research box colour, as in "Same student. Different essay." */
.xs-find q{display:block;font:italic 400 var(--fs-body)/1.45 var(--serif);color:var(--ink);quotes:"\201C" "\201D"}
.xs-find q::before{content:open-quote}.xs-find q::after{content:close-quote}
.xs-find .src{margin-top:8px;background:#fff;word-break:break-word}
.xs-new .xs-k{color:var(--gold-d)}
.xs-new p:last-child{margin:0;font:400 var(--fs-body)/var(--lh-body) var(--serif);color:var(--navy)}
.xs-new mark{background:linear-gradient(transparent 55%,rgba(226,182,90,.45) 55%);color:inherit}
@media (max-width:1024px){.xs-grid{grid-template-columns:minmax(0,1fr);max-width:620px;margin-left:auto;margin-right:auto}}

@media (prefers-reduced-motion:reduce){
  .tool-win [data-step]{opacity:1;transform:none;transition:none}
  .sf-msgs,.sf-turn,.wc-list{opacity:1;transform:none;transition:none}
}

/* landing numbers: a small engraving-style drawing beside each number, in the same navy line work as the campus */
/* numbers banner (landing, and Brainstorm's first screen): no icons, the numbers speak. Each tile is centred: a very large number, the label under it, then a quieter line */
.tiles.nums{grid-template-columns:repeat(3,minmax(0,1fr))}
.nums .tile{align-items:center;text-align:center;gap:6px}
.nums .tile b{font-size:clamp(72px,7.2vw,112px);line-height:.9}
.tool-band .nums .tile b{font-size:clamp(46px,4vw,64px)}   /* in a first screen the banner stays compact */
.tool-band .nums .tile{gap:0}
.nums .tile .lb{max-width:none;margin-top:6px;font:600 var(--fs-body)/1.25 var(--serif);color:var(--navy)}
.nums .tile .ln{max-width:30ch;font-size:var(--fs-body);line-height:1.4;color:var(--ink70);margin-top:8px}
/* number, label and small line stack from the top; each tile is only as tall as its content */
.nums .tile{gap:0;justify-content:flex-start;align-self:start}
.nums .tile span{max-width:30ch}
@media (min-width:641px){.nums .tile:first-child{padding-left:clamp(18px,2.6vw,40px)}}
/* phones: the three tiles stay in one row, compact; College Research's five tiles go in two columns, the last one centred */
@media (max-width:640px){
  .tiles.nums{grid-template-columns:repeat(3,minmax(0,1fr))!important;column-gap:8px;row-gap:22px}
  .tiles.nums.t5{grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:16px;row-gap:12px}
  .tiles.nums.t5 .tile b{font-size:36px}
  .tiles.nums.t5 .tile:last-child{grid-column:1/-1}
  .nums .tile,:where(#page-brainstorm,#page-college-research,#page-home .mx3) .nums .tile{padding:0 2px!important}
  .nums .tile::before{display:none}
  .nums .tile b,.tool-band .nums .tile b,:where(#page-brainstorm,#page-college-research,#page-home .mx3) .nums .tile b{font-size:40px;line-height:.95}
  .nums .tile .lb{margin-top:5px;font-size:15px;line-height:1.2}
  .nums .tile .ln,.nums .tile span:not(.lb){margin-top:5px;font-size:14px;line-height:1.3}
  .mx3{padding:24px 0 22px}
  .tool-band{padding:20px 0}
}

/* ---------- About: each founder's story as a magazine editor's letter ---------- */
.wrap.essay.letters{max-width:calc(var(--wrap) + var(--gut) * 2)}   /* the letters share the page header's left edge */
.letter{max-width:1036px;margin:0 0 clamp(72px,8vw,112px)}
.letter+.letter{padding-top:clamp(48px,6vw,72px);border-top:1px solid var(--line)}
.lt-label{display:inline-block;margin:0 0 30px;padding:7px 13px 8px;border:1px solid var(--navy);font:600 var(--fs-body)/1 var(--serif);letter-spacing:.16em;font-variant-caps:all-small-caps;color:var(--navy)}
.lt-grid{display:grid;grid-template-columns:minmax(0,680px) minmax(200px,260px);gap:clamp(36px,6vw,96px);align-items:start}
.lt-text{max-width:64ch}
.lt-text p{margin:0 0 18px;font:400 var(--fs-body)/var(--lh-body) var(--serif);color:var(--ink);hanging-punctuation:first}
.lt-text .lt-first{color:var(--navy)}
.lt-text .lt-first::first-letter{float:left;font:400 calc(var(--fs-body) * 4.4)/.8 var(--serif);margin:.08em .1em 0 -.02em;color:var(--gold-d)}
.lt-sign{margin-top:30px}
.lt-sig{display:inline-block;font:400 calc(var(--fs-hand) * 2.1)/1 var(--hand);color:var(--navy);transform:rotate(-4deg);transform-origin:0 100%}
.lt-sig img{display:block;height:64px;width:auto}
.lt-sign p{margin:14px 0 0;font:500 var(--fs-body)/1.35 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--ink50)}
.lt-sign p b{font-weight:600;color:var(--navy)}
.lt-photo{margin:0;position:sticky;top:calc(var(--nav) + 32px)}
.lt-ph{position:relative;aspect-ratio:4/5;background:var(--beige) center/cover no-repeat;box-shadow:0 1px 2px rgba(27,42,74,.08),0 22px 40px -26px rgba(27,42,74,.45);display:grid;place-items:center;align-content:center;gap:8px}
.lt-ph span{font:italic 400 calc(var(--fs-h2) * 1.1)/1 var(--serif);color:var(--gold-d)}
.lt-ph small{font:500 var(--fs-body)/1 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--ink50)}
.lt-ph.has-photo span,.lt-ph.has-photo small{display:none}
.lt-photo figcaption{margin-top:12px;font:500 var(--fs-body)/1.3 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--ink50)}
.lt-logos{list-style:none;max-width:1036px;margin:40px 0 0;padding:24px 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:14px 40px}
.lt-logos li{display:flex;align-items:center;min-height:34px}
/* real logos in one muted navy tone, so the row reads as one quiet line; full strength on hover */
.lt-logos img{display:block;height:30px;width:auto;filter:grayscale(1) brightness(.35) sepia(.25) hue-rotate(185deg) saturate(1.6);opacity:.72;transition:opacity .3s}
.lt-logos li[data-logo="ben-jerrys"] img{height:34px}
.lt-logos li[data-logo="tim-hortons"] img{height:26px}
.lt-logos li[data-logo="tc-columbia"] img{filter:none;opacity:.9}   /* already converted to transparent navy, and lighter than the rest, so a touch more opacity to sit at the same weight */
.lt-logos li:hover img,.lt-logos li:hover .wm{opacity:1}
/* a school with no logo file yet: its name as a wordmark at the same weight and tone as the logos */
.lt-logos .wm{font:600 23px/1 var(--serif);letter-spacing:.07em;font-variant-caps:all-small-caps;color:var(--navy);opacity:.72;transition:opacity .3s}
@media (max-width:860px){
  .lt-grid{grid-template-columns:minmax(0,1fr)}
  .lt-photo{position:relative;top:auto;order:-1;width:min(220px,60%)}
  .lt-logos{gap:12px 28px}
}


#page-terms .sec-s .wrap>p{padding-right:6px}   /* room for the "To confirm" chip's padding at a line end */

/* ---------- change 9: coloured section bands. The paper texture shows through at half strength, so each band reads as coloured paper ---------- */
.band-sky{background:linear-gradient(rgba(214,228,245,.55),rgba(214,228,245,.55)),url(assets/img/paper-soft.webp) 0 0/900px 900px,var(--sky);background-blend-mode:normal,multiply,normal}
.band-butter{background:linear-gradient(rgba(251,239,194,.55),rgba(251,239,194,.55)),url(assets/img/paper-soft.webp) 0 0/900px 900px,var(--butter);background-blend-mode:normal,multiply,normal}

/* ---------- change 9: a soft butter marker behind a few key words; it draws in once, left to right ---------- */
.hl-m{background:linear-gradient(transparent 56%,rgba(226,182,90,.38) 56% 92%,transparent 92%) 0 0/0% 100% no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .6s var(--ease)}
.hl-m.on{background-size:100% 100%}
h2 .hl-m,.h2 .hl-m{background-image:linear-gradient(transparent 42%,rgba(226,182,90,.4) 42% 74%,transparent 74%)}   /* in big headings the band sits a little higher, behind the lower half of the letters, so it reads */
@media (prefers-reduced-motion:reduce){.hl-m{background-size:100% 100%;transition:none}}

/* change 9: the demos read like a real session. Essay type as a small tag on each idea; Mara's thread line; research shows what was found and why it fits */
.idc small,.mv-i small{display:inline-block}
.mv-i small{font:600 12.5px/1 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--gold-d);margin-bottom:4px}
.mv-th{margin:0 0 2px;padding:7px 10px;border-radius:10px;background:var(--butter);font:400 14.5px/1.3 var(--serif);color:var(--navy)}
.mv-th span{display:block;font:600 12.5px/1 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--gold-d);margin-bottom:3px}
.claim p b{font-weight:700}
.rs-fd{display:block;margin:3px 0 4px;font:600 14px/1.3 var(--serif);color:var(--navy)}
.rs-fit{margin:10px 0 0;padding:9px 11px;border-radius:10px;background:var(--navy);color:#fff;font:400 14px/1.35 var(--serif)}
.rs-fit span{display:block;font:600 12.5px/1 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--sun);margin-bottom:3px}

/* change 9: What you get. A photo (or a soft silhouette until the photos arrive) and one line per sample; the note is a ruled notepad page, slightly tilted */
.rm2-tabs button{gap:14px}
.rm-face{flex:none;width:52px;height:52px;border-radius:50%;background:var(--face) center/cover no-repeat,radial-gradient(circle at 50% 38%,rgba(255,255,255,.85) 0 22%,transparent 23%),radial-gradient(ellipse 46% 36% at 50% 100%,rgba(255,255,255,.85) 0 98%,transparent 100%),var(--sky);box-shadow:0 0 0 2px #fff,0 2px 6px rgba(27,42,74,.18)}
.rm2-tabs button:nth-child(2) .rm-face{background-color:var(--butter)}
.rm2-tabs button:nth-child(3) .rm-face{background-color:var(--beige)}
.rm2-doc .pgs{transform:rotate(-1.1deg)}
.rm2-doc .rpage{background:repeating-linear-gradient(180deg,transparent 0 29px,rgba(70,110,160,.13) 29px 30px) 0 22px/100% 100% no-repeat,linear-gradient(90deg,transparent 40px,rgba(176,141,87,.32) 40px,rgba(176,141,87,.32) 41.5px,transparent 41.5px),#fff;
  box-shadow:0 1px 2px rgba(27,42,74,.08),0 18px 32px -18px rgba(27,42,74,.5)}
@media (prefers-reduced-motion:reduce){.rm2-doc .pgs{transform:none}}

/* change 9: Brainstorm How it works. Step 3 tips; step 4 is the email Mara sends: the thread, then three typed ideas */
.stk-ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:6px}
.stk-ul li{position:relative;padding-left:22px;font-size:var(--fs-body);line-height:1.45;color:inherit;opacity:.88}
.stk-ul li::before{content:"";position:absolute;left:2px;top:.45em;width:10px;height:5px;border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)}
.mail-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.mail-from{display:flex;align-items:center;gap:8px}
.mail-from b{font:600 var(--fs-body)/1 var(--serif);color:var(--navy)}
.mail-from small{font:400 15px/1 var(--serif);color:var(--ink50)}
.mail-h .st{font:500 var(--fs-body)/1 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--ink50)}
.mail-s{margin:0 0 10px;padding-bottom:10px;border-bottom:1px solid var(--line);font:600 var(--fs-body)/1.2 var(--serif);color:var(--navy)}
.mail-th{margin:0 0 10px;padding:9px 12px;border-radius:10px;background:var(--butter);font:400 var(--fs-body)/1.3 var(--serif);color:var(--navy)}
.mail-th span,.mail-i small{display:block;font:600 15px/1 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--gold-d);margin-bottom:4px}
.mail-i{padding:9px 12px 10px;border-radius:10px;background:var(--stone);border-left:3px solid var(--gold-b);margin-bottom:7px;opacity:0;transform:translateX(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.mail-i strong{display:block;font:600 var(--fs-body)/1.2 var(--serif);color:var(--navy)}
.mail-i span{display:block;margin-top:3px;font:400 var(--fs-body)/1.35 var(--serif);color:var(--ink70)}
.stk-card.on .mail-i{opacity:1;transform:none}
.stk-card.on .mail-i:nth-of-type(1){transition-delay:.35s}.stk-card.on .mail-i:nth-of-type(2){transition-delay:.6s}.stk-card.on .mail-i:nth-of-type(3){transition-delay:.85s}
@media (prefers-reduced-motion:reduce){.mail-i{opacity:1;transform:none;transition:none}}
.stk-card .obj.mail p.mail-th{color:var(--navy)}
/* change 11: the sample session's three ideas carry a longer line each, so the email and the claims sit a little tighter to stay inside their tray */
.stk-card:nth-child(4) .stk-mock{padding:10px}
.stk-card:nth-child(1) .stk-mock{padding:14px}
.stk-txt .sample-cap{text-align:left;margin-top:12px}
.obj.mail{padding:14px 18px;width:min(540px,100%)}
.obj.mail .mail-h{margin-bottom:6px}
.obj.mail .mail-s{margin-bottom:7px;padding-bottom:7px}
.obj.mail .mail-th{margin-bottom:8px;padding:7px 11px}
.obj.mail .mail-i{padding:7px 11px 8px;margin-bottom:5px}
.obj.mail .mail-i span{margin-top:2px}
.claims{gap:8px}
.claims .cl2{padding:11px 14px}
.claims .cl2 q{margin-top:5px}
.rm2-tabs button i.ill-tag,.rm2-tabs button[aria-pressed="true"] i.ill-tag{width:auto;height:auto;display:inline-block;border-radius:999px;background:var(--stone2);color:var(--ink50);font:500 11.5px/1.3 var(--serif);font-variant-caps:normal;letter-spacing:.04em;padding:2px 7px}


/* ================= change 12: backgrounds the way Manushri designed them =================
   The page is crumpled paper; colour arrives as tiles, cards and sheets laid on it. No full-width pastel or white bands. */
.band-sky,.band-butter,#page-home #stories,.mx3,.ba3,#how,.hw{background:none}
.tool-band{background:none;border-top:0;border-bottom:0}

/* the numbers (change 14): no boxes. Each number gets a highlighter stroke (sky, butter, beige, repeating), with a thin gold rule
   between columns; on the tool pages the row also sits between two gold lines, a lined banner */
.mx3 .tiles.nums,.tool-band .tiles.nums{gap:0;align-items:stretch}
.mx3 .tiles.nums .tile,.tool-band .tiles.nums .tile{--hl:214,228,245;background:none;box-shadow:none;border-radius:0;align-self:stretch;padding:4px clamp(18px,2.6vw,40px) 6px}
.mx3 .tiles.nums .tile:nth-child(3n+2),.tool-band .tiles.nums .tile:nth-child(3n+2){--hl:251,239,194}
.mx3 .tiles.nums .tile:nth-child(3n),.tool-band .tiles.nums .tile:nth-child(3n){--hl:244,232,207}
.mx3 .tiles.nums .tile::before,.tool-band .tiles.nums .tile::before{display:block;background:rgba(176,141,87,.45)}
.mx3 .tiles.nums .tile:first-child::before,.tool-band .tiles.nums .tile:first-child::before{display:none}
.mx3 .tiles.nums .tile b,.tool-band .tiles.nums .tile b{background:linear-gradient(transparent 58%,rgb(var(--hl)) 58%,rgb(var(--hl)) 90%,transparent 90%);padding:0 .14em;width:max-content;margin:0 auto}
.mx3 .tiles.nums .tile .lb,.tool-band .tiles.nums .tile .lb{color:var(--navy);font-weight:600}
.tool-band .tiles.t5.nums{grid-template-columns:repeat(5,minmax(0,1fr))}
.tool-band{padding:0}
.tool-band>.wrap{padding-top:14px;padding-bottom:14px;border-top:1px solid rgba(176,141,87,.55);border-bottom:1px solid rgba(176,141,87,.55)}
.tool-band .tiles.nums .tile{padding:2px clamp(14px,1.8vw,28px)}
.tool-band .tiles.t5.nums .tile{padding:2px clamp(8px,.8vw,12px)}   /* five equal columns: the phrases keep to two lines */
@media (prefers-reduced-motion:reduce){.mx3 .tiles.nums .tile::before,.tool-band .tiles.nums .tile::before{transform:none;transition:none}}
@media (max-width:640px){
  .mx3 .tiles.nums{grid-template-columns:repeat(3,minmax(0,1fr))!important;column-gap:0;row-gap:0}   /* landing: one row of three, smaller numbers */
  .mx3 .tiles.nums .tile{padding:0 6px!important}
  .mx3 .tiles.nums .tile:not(:first-child)::before{display:block}
  .tool-band .tiles.nums,.tool-band .tiles.nums.t5{grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:0;row-gap:16px}   /* tool pages: two columns */
  .tool-band .tiles.nums .tile{padding:0 10px!important}
  .tool-band .tiles.nums .tile::before{display:none}
  .tool-band .tiles.nums .tile:nth-child(even)::before{display:block}   /* one rule, between the two columns */
  .tool-band .tiles.nums .tile:last-child:nth-child(odd){grid-column:1/-1}
  .tool-band>.wrap{margin:0 12px;padding:14px 8px}
}

/* sheets laid on the paper instead of bands: the section's .wrap */
.stuck2>.wrap,html:not(.sf3-live) .sf>.wrap,.ba3>.wrap,.xs>.wrap,.sec-s>.rm2,.sec-s>.fs2{border-radius:8px;padding:56px clamp(20px,4vw,56px) 48px;box-shadow:0 2px 5px rgba(32,32,32,.04),0 12px 30px rgba(32,32,32,.08)}
.stuck2>.wrap,html:not(.sf3-live) .sf>.wrap{background:#fff;box-shadow:0 0 0 1px #E7E2D6,0 2px 5px rgba(32,32,32,.04),0 12px 30px rgba(32,32,32,.08);padding-left:clamp(20px,2.4vw,36px);padding-right:clamp(20px,2.4vw,36px)}   /* white, as the client asked; narrower sides so the post-its keep their width */
.ba3>.wrap,.xs>.wrap,.sec-s>.rm2,.sec-s>.fs2{background:var(--stone)}   /* stone, never beige: the research tag is beige */
.xs>.wrap,.sec-s>.rm2,.sec-s>.fs2{padding-left:clamp(20px,2.4vw,36px);padding-right:clamp(20px,2.4vw,36px)}   /* the sample cards keep room for their source links on one line */
section.ba3 .wrap .eyebrow,section.xs .wrap .eyebrow,.sec-s>.rm2 .eyebrow,.sec-s>.fs2 .eyebrow{background:#fff}
.faq .acc{background:var(--stone);border-radius:8px;padding:12px clamp(20px,3vw,40px) 16px;box-shadow:0 2px 5px rgba(32,32,32,.04),0 12px 30px rgba(32,32,32,.08)}
.faq .acc details:last-child{border-bottom:0}
@media (min-width:641px) and (max-width:1328px){   /* a strip of paper shows at the sides; the post-its keep their width at 1280 */
  .stuck2>.wrap,html:not(.sf3-live) .sf>.wrap,.ba3>.wrap,.xs>.wrap,.sec-s>.rm2,.sec-s>.fs2{margin:0 12px}
  .stuck2>.wrap,html:not(.sf3-live) .sf>.wrap{padding-left:20px;padding-right:20px}
}
@media (max-width:640px){
  .stuck2>.wrap,html:not(.sf3-live) .sf>.wrap,.ba3>.wrap,.xs>.wrap,.sec-s>.rm2,.sec-s>.fs2{margin:0 12px;padding:32px 16px}
  .faq .acc{padding:6px 16px 10px}
}

/* ================= change 13: the same sheet style throughout, each sheet type kept to one job ================= */
/* Sound familiar: a white sheet behind the pinned story. The stage pins inside .sf-pin, so the sheet is drawn on the pin;
   app.js sets --sf-cut so it ends just after the word cloud (the stage keeps its own height and layout). */
.sf3-live .sf{padding:80px 0 0}
.sf3-live .sf-pin::before{content:"";position:absolute;z-index:0;top:-32px;bottom:var(--sf-cut,0px);left:50%;width:min(calc(var(--wrap) + var(--gut) * 2),calc(100% - 24px));transform:translateX(-50%);
  background:#fff;border-radius:8px;box-shadow:0 0 0 1px #E7E2D6,0 2px 5px rgba(32,32,32,.04),0 12px 30px rgba(32,32,32,.08);pointer-events:none}
.sf3-live .sf-stage{z-index:1}
@media (min-width:1329px){.sf3-live .sf-stage>.wrap{padding-left:clamp(20px,2.4vw,36px);padding-right:clamp(20px,2.4vw,36px)}}
@media (max-width:640px){
  .sf3-live .sf{padding-top:72px}
  .sf3-live .sf-stage>.wrap{padding-left:28px;padding-right:28px}   /* the sheet's 12px margin plus its 16px padding */
  .sf3-live .sf-msgs li{width:calc(100% - 84px)}
  html.sf3-live .sf-stage .sf-msgs li:nth-child(n){margin-left:0}   /* the still layout's indent; the live story staggers the cards itself */
}

/* ================= change 14: numbers, sheet colour, navy bands ================= */
/* Same student and the College Research samples: sky sheets (Top 3 and the report stay stone) */
.ba3>.wrap,.xs>.wrap{background:var(--sky)}
/* Brainstorm "Why not just talk to ChatGPT?": a full-width navy band; the panel runs edge to edge and keeps its content width */
.band-gpt>.wrap{max-width:none;padding:0}
.band-gpt .panel.navy.benp{border-radius:0;padding:clamp(28px,4.4vw,64px) calc(max(var(--gut),(100% - var(--wrap)) / 2) + clamp(28px,4.4vw,64px))}
/* Brainstorm first screen: Mara's notes never start blank; the thread shows faintly from the first frame, then comes up full */
.tool-win .mv-th[data-step]:not(.on){opacity:.35;transform:none}

/* ================= change 15: the client's last design batch ================= */
/* "What Mara found" matches the new Mara card: stone */
.ba3-k.mara{background:var(--stone)}
/* Same student (landing) and Sample transformations (College Research): full-width navy bands with the colleges band's
   paper texture, instead of sheets. The cards stay white; the tags keep their colours; the editor tag gets a gold ring. */
section.ba3,section.xs{position:relative;overflow:hidden;background:var(--navy);color:#fff}
section.ba3::before,section.xs::before{content:"";position:absolute;inset:0;background:var(--paper) 0 0/760px 760px;mix-blend-mode:multiply;opacity:.35;pointer-events:none}
section.ba3>.wrap,section.xs>.wrap{position:relative;margin:0 auto;padding:0 var(--gut);background:none;box-shadow:none;border-radius:0}
section.ba3 .h2,section.xs .h2{color:#fff}
section.ba3 .h2 em,section.xs .h2 em{color:var(--sun)}
section.ba3 .ba3-ar{color:var(--sun)}
section.ba3 .ba3-k.ed{box-shadow:0 0 0 1.5px rgba(226,182,90,.9)}
section.ba3 .ba3-note{color:rgba(255,255,255,.7)}
section.ba3 .ba3-cta .btn{background:var(--sun);color:var(--navy);box-shadow:none}
section.ba3 .ba3-cta .btn:hover{background:#EAC274}
section.xs .lede{color:rgba(255,255,255,.8)}
section.xs .dl-row .btn{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.8);backdrop-filter:none}

/* ================= change 16: the 13 Oct call and the client's copy doc ================= */
/* personas: the question in the default face, the student's words handwritten (copy doc) */
.pad h3{font:600 var(--fs-body)/1.3 var(--serif);color:var(--navy)}
.pad-t{font:400 var(--fs-hand)/1.4 var(--hand);color:var(--navy)}
/* Same student. Two completely different essays.: two handwritten notes beside each pair, each with a small drawn arrow
   to the line it explains. Research pair A is the default; ?ba=b shows our real report pair */
section.ba3 .ba3-list{max-width:1240px}
.ba3-pair{display:grid;grid-template-columns:minmax(0,1fr) clamp(220px,20vw,270px);column-gap:clamp(20px,2.4vw,36px);align-items:center}
.ba3-pair>.ba3-k{grid-column:1;justify-self:start}
.ba3-pair>.ba3-cards{grid-column:1}
.ba3-notes{grid-column:2;grid-row:1/span 2;display:grid;gap:18px;align-self:center}
.ba3-n{position:relative;margin:0;padding-left:50px;font:400 calc(var(--fs-hand) * .92)/1.25 var(--hand);color:var(--sun);transform:rotate(-2deg);transform-origin:0 50%}
.ba3-n+.ba3-n{transform:rotate(1.5deg)}
.ba3-na{position:absolute;left:0;top:2px;width:44px;height:23px;overflow:visible}
.ba3-na path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:1024px){
  .ba3-pair{grid-template-columns:minmax(0,1fr)}
  .ba3-notes{grid-column:1;grid-row:auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px;margin-top:14px}
  .ba3-n{padding:30px 0 0 6px}
  .ba3-na{left:4px;top:0;transform:rotate(70deg) scale(.8);transform-origin:12px 12px}   /* on narrow screens the arrows point up at the cards */
}
@media (max-width:640px){.ba3-notes{grid-template-columns:minmax(0,1fr)}}
/* "Why not just use ChatGPT?": the three chatbots take turns in a small stack (7s each, pauses on hover or tap, dots to pick);
   each card is the chat window with the bot's own words and a grey source line; a handwritten note sits under it */
.bstack{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:10px 16px}
.vs2 .bstack .bots{grid-column:1/-1;display:grid;padding:0 0 26px;background:none;box-shadow:none;border-radius:0}
.vs2 .bstack .bots li{grid-area:1/1;--y:0px;--s:1;padding:14px 18px 13px;border:0;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--line),0 10px 24px -16px rgba(27,42,74,.35);
  opacity:1;transform:translateY(var(--y)) scale(var(--s));transform-origin:50% 100%;transition:transform .6s var(--ease),box-shadow .6s;z-index:1}
.vs2 .bstack .bots li[data-pos="0"]{z-index:3}
.vs2 .bstack .bots li[data-pos="1"]{--y:12px;--s:.96;z-index:2}
.vs2 .bstack .bots li[data-pos="2"]{--y:24px;--s:.92;z-index:1}
.bstack .bot{transition:opacity .5s ease}
.bstack li:not([data-pos="0"]) .bot{opacity:0}
.bot-src{display:block;margin-top:8px;font:400 14px/1.3 var(--serif);color:var(--ink50)}
.bnote{grid-row:2;grid-column:2;position:relative;margin:-10px 6px 0 0;padding-top:20px;padding-left:34px;font:400 calc(var(--fs-hand) * .92)/1.2 var(--hand);color:var(--gold-d);white-space:nowrap;transform:rotate(-2deg);opacity:0;transition:opacity .5s ease;pointer-events:none}
.bnote.on{opacity:1}
.bnote-a{position:absolute;left:0;top:0;width:34px;height:22px;overflow:visible}
.bnote-a path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bnote+.bnote,.bnote+.bnote+.bnote{grid-area:2/2}
.bdots{grid-row:2;grid-column:1;display:flex;gap:8px;align-self:start;padding-top:2px}
.bdots button{width:10px;height:10px;padding:0;border:0;border-radius:50%;background:var(--line2);cursor:pointer}
.bdots button[aria-current="true"]{background:var(--gold)}
.us2-h b{font:600 var(--fs-body)/1.2 var(--serif)}
.ptr3{list-style:none;margin:0;padding:0}
.ptr3 li{padding:14px 0;border-top:1px solid var(--line);opacity:0;transform:translateX(10px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.vs2.go .ptr3 li{opacity:1;transform:none}
.ptr3 .k{display:block;font:600 15px/1 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--gold-d)}
.ptr3 b{display:block;margin-top:6px;font:600 var(--fs-body)/1.3 var(--serif);color:var(--navy)}
.ptr3 p{margin:5px 0 0;font:400 17px/1.45 var(--serif);color:var(--ink70)}
@media (prefers-reduced-motion:reduce){.vs2 .bstack .bots li,.bstack .bot,.bnote{transition:none}.ptr3 li{opacity:1;transform:none;transition:none}}
@media (max-width:640px){.bnote{white-space:normal;max-width:220px}}
/* "Sound familiar?" (Brainstorm and College Research): the problems as big words, then the students' own words as a chat thread */
.sfx{padding:clamp(48px,4.6vw,64px) 0}
.sfx .sec-head.c{margin-bottom:0}
.pw{margin:clamp(22px,2.6vw,36px) auto 0;max-width:1120px}
.pw-a{font:400 clamp(30px,4.1vw,58px)/1.2 var(--serif);letter-spacing:-.015em;color:var(--navy)}
/* A: phrases on the desk, a little uneven; a gold pen line strikes them through in batches */
.pw-a{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.12em .7em;margin:0;text-align:center}
.pw-w{position:relative;display:inline-block;transform:rotate(var(--r)) translateY(var(--dy));transition:color .5s ease .45s}
.pw-w::after{content:"";position:absolute;left:-.08em;right:-.08em;top:54%;height:max(3px,.075em);border-radius:3px;background:var(--gold);transform:rotate(-1.4deg) scaleX(0);transform-origin:0 50%;transition:transform .85s cubic-bezier(.6,0,.2,1)}
.pw-w.x{color:var(--ink50)}
.pw-w.x::after{transform:rotate(-1.4deg) scaleX(1)}
/* the turn, then the chat thread */
.sfx-turn{margin-top:clamp(36px,4vw,56px);text-align:center}
.sfx .sf-big{max-width:22ch;margin:0 auto;font-size:clamp(34px,4.6vw,64px);line-height:1.08}
.sfx .sf-mark{display:block;margin:18px auto 8px;width:max-content}
.sfx .sf-under{margin:6px auto 0;max-width:none}
.fb-who{display:block;margin-bottom:3px;font:600 14px/1.2 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--ink50)}
@media (prefers-reduced-motion:reduce){.pw-w,.pw-w::after{transition:none}}
/* College Research hero: the college name rotates (soft slide up every 2s); reduced motion stays on Stanford */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.crh-rot{position:relative;display:inline-grid;vertical-align:bottom;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em;transition:width .4s var(--ease)}
.crh-rot>span{grid-area:1/1;white-space:nowrap;opacity:0;transform:translateY(80%);transition:transform .55s var(--ease),opacity .4s ease}
.crh-rot>span.on{opacity:1;transform:none}
.crh-rot>span.out{opacity:0;transform:translateY(-80%)}
@media (prefers-reduced-motion:reduce){.crh-rot>span{transition:none}}
/* College Research, Sample transformations: tabs, then four steps joined by thin gold arrows (stacked on phones) */
.xt{margin-top:clamp(20px,2.4vw,32px)}
.xt-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:22px}
.xt-tabs button{padding:9px 18px;border:0;border-radius:999px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.82);font:500 var(--fs-body)/1.2 var(--serif);cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);transition:background .25s,color .25s}
.xt-tabs button[aria-selected="true"]{background:var(--sun);color:var(--navy);box-shadow:none}
.xt-pane[hidden]{display:none}
.tool-copy .h1.crh{font-size:clamp(34px,3vw,46px);max-width:17ch}
/* the real session's answer is longer: on laptop screens the orb shrinks and sits beside the wave, so the window keeps its height */
@media (min-width:641px){
  .mara-v .mv-main{gap:10px;padding:16px 18px}
  .mara-v .mv-main .orb.md{width:58px;height:58px}
  .mara-v .mv-main .wave{margin:0;height:14px}
}
@media (min-width:641px) and (max-height:740px){
  .tool-band .nums .tile b{font-size:42px}
  .tool-band .nums .tile .lb{margin-top:2px}
  .tool-band .nums .tile .ln{margin-top:2px}
  .tool-band>.wrap{padding-top:10px;padding-bottom:10px}
  .tool-copy .h1.crh{font-size:34px}
  .tool-copy .lede{margin-top:10px}
}
@media (min-width:641px) and (max-height:740px){.res-v{padding-top:10px;padding-bottom:10px}.rs-out{gap:6px}.rs-f{padding:7px 10px 8px}.rs-f .src{margin-top:4px}}
/* Guides (copy doc, 14 Oct): sections USA, Essay Hacks, UK, India, Singapore, AI */
.pw-w::after{left:0;right:0}
.crh-rot>span:not(.on):not(.out){visibility:hidden}
.crh-rot>span{justify-self:start}   /* each word keeps its own width, so it can be measured */

/* ================= change 17 ================= */
/* "Why not just use ChatGPT?": the tally, what is still on her list, and the match line in each WriteWise find */
.tally{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 10px;margin:14px 0 4px;font:400 var(--fs-body)/1.2 var(--serif);color:var(--navy)}
.tally-k{margin-right:4px}
.tl{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;background:#fff;color:var(--ink50);box-shadow:0 0 0 1px var(--line2);font-size:16px}
.tl-x{font-style:normal;font-size:12px;color:#b45a4a}
.tl.ww{background:var(--navy);color:#fff;box-shadow:none}
.tl-y{font-style:normal;color:var(--sun)}
.vs2 .bstack .bots li{padding-bottom:0;overflow:hidden}
.bot-list{margin:12px -18px 0;padding:9px 18px 10px;background:#fbf1ee;color:#7a3e33;font:400 15px/1.4 var(--serif);border-top:1px dashed rgba(122,62,51,.25)}
.bot-list b,.us2-list b{font-weight:600}
.ptr3 .mt{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin:6px 0 2px}
.ptr3 .mt span{padding:2px 8px;border-radius:4px;font:400 14px/1.3 var(--serif);color:var(--navy)}
.ptr3 .mt .mt-a{background:var(--butter)}
.ptr3 .mt .mt-b{background:var(--sky)}
.ptr3 .mt i{font-style:normal;color:var(--ink50);font-size:13px}
.ptr3 li{padding:12px 0}
.ptr3 p:not(.mt){font-style:italic;font-size:16px}
.us2-list{margin:4px -22px 0;padding:10px 22px;background:#EEF4FB;font:400 16px/1.4 var(--serif);color:var(--navy)}
@media (max-width:640px){.tally{gap:6px}.tally-k{flex-basis:100%;text-align:center;margin:0}.us2-list{margin:4px -16px 0;padding:10px 16px}}
.vs2 .bot .bot-list{margin:12px -18px 0;padding:9px 18px 10px}
.gpt .sec-head .lede{max-width:none}
@media (min-width:1025px){
  .gpt .h2.big{font-size:clamp(34px,3.1vw,44px)}
  .gpt .tally{margin-top:10px}
  .gpt .vs2{margin-top:12px}
  .ptr3 li{padding:9px 0}
  .ptr3 b{font-size:18px;margin-top:4px}
  .ptr3 .mt{margin:5px 0 1px}
  .ptr3 p:not(.mt){font-size:15px;line-height:1.4}
  .us2-h{padding-bottom:4px}
}
@media (min-width:1025px){.us2{padding-top:12px;padding-bottom:12px}.gpt-ask{padding:10px 18px 11px}}
@media (min-width:1025px){.us2-list{padding:8px 22px}.ptr3 li{padding:8px 0}}
/* C1: the student feedback crowd (built by app.js from WW_CONFIG.wordsMara / wordsResearch) */
.crowd{max-width:1180px;margin:26px auto 0}
.crowd-list{list-style:none;margin:0;padding:0;position:relative;height:330px}
.cb{position:absolute;left:var(--x);top:var(--y);display:inline-flex;align-items:center;gap:.45em;white-space:nowrap;
  padding:.42em .85em .42em .5em;border-radius:999px;background:var(--cb-bg);color:var(--ink);font-family:var(--serif);line-height:1.15;
  box-shadow:0 1px 2px rgba(27,42,74,.06),0 8px 20px rgba(27,42,74,.09);
  transform:translate(-50%,-50%) rotate(var(--r)) scale(.6);opacity:0;transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .3s ease}
.cb.in{transform:translate(-50%,-50%) rotate(var(--r)) scale(1);opacity:1}
.cb::after{content:"";position:absolute;left:1.15em;bottom:-.42em;width:.9em;height:.9em;background:var(--cb-bg);
  clip-path:polygon(0 0,100% 0,0 100%);border-bottom-left-radius:3px}
.cb-t{position:relative;z-index:1}
.cb-av{flex:none;width:1.45em;height:1.45em;border-radius:50%;background:var(--cb-av);display:grid;place-items:center;position:relative;z-index:1}
.cb-av svg{width:68%;height:68%;fill:var(--cb-gl)}
.cb-l{font-size:30px;font-weight:500}.cb-m{font-size:22px}.cb-s{font-size:17px}
.cb-sky{--cb-bg:var(--sky);--cb-av:#EAF1FA;--cb-gl:#8FA9CC}
.cb-butter{--cb-bg:var(--butter);--cb-av:#FDF7E1;--cb-gl:#C9AE5E}
.cb-white{--cb-bg:#fff;--cb-av:var(--stone);--cb-gl:#B9B2A2}
.cb-stone{--cb-bg:var(--stone2);--cb-av:#F8F5EE;--cb-gl:#B4AC9A}
/* after the pop-in, each bobs 2 to 3px on its own clock (the bob sits on the text and avatar, so the pop transform is untouched) */
@keyframes cbBob{0%,100%{translate:0 0}50%{translate:0 -2.5px}}
.cb.in{animation:cbBob var(--bd,5s) ease-in-out var(--bdl,0s) infinite}
body.still .cb{animation:none}
@media (prefers-reduced-motion:reduce){.cb{transition:none;animation:none!important}}
@media (max-width:1100px){.crowd-list{height:360px}.cb-l{font-size:25px}.cb-m{font-size:19px}.cb-s{font-size:15px}}
@media (max-width:860px){
  .crowd-list{height:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:14px 10px;padding:4px 0 8px}
  .cb{position:relative;left:auto;top:auto;transform:rotate(var(--r)) scale(.6)}
  .cb.in{transform:rotate(var(--r)) scale(1)}
  .cb-l{font-size:22px}.cb-m{font-size:18px}.cb-s{font-size:15px}
}
/* C3: the Top 3 tabs show the AI-generated portraits (commit 97887b1), round and cropped to the face */
.rm-face{position:relative;overflow:hidden;background:var(--sky)}
.rm-face img{width:100%;height:100%;object-fit:cover;object-position:52% 34%;transform:scale(1.75);transform-origin:52% 36%}
.rm2-fine{margin:12px 0 0;text-align:left}
.sm[data-mode=ref] .sm-more{display:none}
.ref-acts{display:flex;flex-wrap:wrap;gap:10px}.ref-acts .btn{flex:1 1 auto}
/* D3 / D4 */
.stk-txt p.stk-ps{margin-top:14px;font-family:var(--hand);font-size:var(--fs-body);line-height:1.4;color:var(--gold-d)}
.stk-after{display:flex;justify-content:center;padding:8px var(--gut) 56px}
/* E: Sample Essays, cards plus a reader */
.es{padding-top:40px}
/* the reader */
.er{position:fixed;inset:0;z-index:120;overflow-y:auto;overscroll-behavior:contain;padding:48px 16px}
.er[hidden]{display:none}
.er-bg{position:fixed;inset:0;background:rgba(18,28,50,.86)}
.er-page{position:relative;max-width:760px;margin:0 auto;background:#FFFCF5;border-radius:18px;padding:52px 64px 40px;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.er-prog{position:sticky;top:-48px;margin:-52px -64px 40px;height:4px;border-radius:18px 18px 0 0;overflow:hidden;background:rgba(176,141,87,.15)}
.er-prog i{display:block;height:100%;background:var(--sun);transform:scaleX(0);transform-origin:0 50%}
.er-x{position:absolute;top:14px;right:14px;width:40px;height:40px;border:0;border-radius:50%;background:var(--stone);color:var(--ink);font-size:26px;line-height:1;cursor:pointer}
.er-x:hover{background:var(--stone2)}
.er-tag{margin:0 0 10px;font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--gold-d)}
.er-t{margin:0;font:600 28px/1.25 var(--serif);color:var(--ink);padding-right:30px}
.er-r{margin:6px 0 0;font-size:16px;color:var(--ink50)}
.er-meta{margin:14px 0 0;padding-bottom:22px;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink50)}
.er-draft{margin:14px 0 0}.er-draft button{border:1px solid var(--line2);background:#fff;border-radius:999px;padding:6px 14px;font:inherit;font-size:15px;cursor:pointer}
.er-body{margin-top:26px;font-size:19px;line-height:1.65;color:var(--ink)}
.er-body p{margin:0 0 1.05em}
.er-body h3{margin:1.6em 0 .6em;font:600 19px/1.4 var(--serif);color:var(--navy)}
.er-body h3:first-child{margin-top:0}
.er-body > p:first-of-type::first-letter{float:left;font-size:3.4em;line-height:.86;margin:.06em .1em 0 0;color:var(--gold);font-weight:500}
.er-nav{display:flex;justify-content:space-between;gap:16px;margin-top:34px;padding-top:22px;border-top:1px solid var(--line)}
.er-nav a{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--ink50);font-size:15px;max-width:48%}
.er-nav a b{color:var(--navy);font-size:17px;font-weight:600}
.er-nav a[hidden]{display:flex;visibility:hidden}
.er-next{margin-left:auto;text-align:right}
.er-nav a:hover b{text-decoration:underline;text-underline-offset:3px}
body.eropen{overflow:hidden}
@media (max-width:700px){
  .er{padding:0}
  .er-page{max-width:none;min-height:100%;border-radius:0;padding:56px 20px 32px;box-shadow:none}
  .er-prog{top:0;margin:-56px -20px 34px;border-radius:0}
  .er-t{font-size:23px}
  .er-body{font-size:18px}
}
/* F1: each guide has its label chip and read time; no Featured picks */
/* G2: "Log in" (navy outline pill, same height as Start Writing) and the menu's own buttons */
.nav-r{display:flex;align-items:center;gap:10px}
.btn-line{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--navy)}
.btn-line:hover{background:rgba(27,42,74,.06)}
.nav-m{display:none}
@media (max-width:1259px){
  .nav-r{margin-left:auto}
  .nav .nav-login{display:none}
  body.menu .nav-m{display:flex;flex-direction:column;gap:10px;padding-top:16px}
  body.menu .nav-m .btn{justify-content:center}
  body.menu .nav-m .btn-navy{display:none}
}
@media (max-width:900px){body.menu .nav-m .btn-navy{display:inline-flex}}
.nav-l a{white-space:nowrap}
.nav-l{gap:2px}.nav-l a{padding:9px 9px}
@media (min-width:1260px){.nav .wrap{gap:16px}}
/* G3 / G4: the real policy pages (privacy.html ...) */
.contact-list{list-style:none;margin:0 0 26px;padding:0}
.ldoc .contact-list li{display:grid;grid-template-columns:200px 1fr;gap:16px;margin:0;padding:14px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.contact-list li>span{color:var(--ink50);font-size:15px;letter-spacing:.06em;text-transform:uppercase;padding-top:3px}
.ldoc .pp-lead{font-size:22px;line-height:1.5;color:var(--ink)}
.pp-cta{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 30px}
.ldoc .pp-links{margin-top:34px;padding-top:18px;border-top:1px solid var(--line)}
.ldoc a:not(.btn){color:var(--navy);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(176,141,87,.6)}
@media (max-width:640px){.ldoc .contact-list li{grid-template-columns:1fr;gap:4px}}
.ldoc .btn{text-decoration:none}.ldoc .btn-navy{color:#fff}.ldoc .btn-line{color:var(--navy)}
.crh.brk .crh-dc{display:block}   /* change 17b: "dream college." on its own line when a long name would wrap */
/* change 17b: the Guides quick links at the end, change 16 style; six groups, so three columns */
.tool-copy .h1.crh{max-width:none}   /* change 17b: the name starts its own line, so the headline uses the column width to keep its line count */
.crh.brk .crh-dc+br{display:none}
/* change 18: the footer has four link columns (Tools, Company, Resources, Policies) */
.foot .cols{grid-template-columns:minmax(0,1.6fr) repeat(4,auto);column-gap:clamp(28px,4vw,56px)}
@media (max-width:1100px){.foot .cols{grid-template-columns:repeat(4,auto);justify-content:space-between;row-gap:8px}.foot .about{grid-column:1/-1}}
@media (max-width:900px){.foot .cols{grid-template-columns:1fr 1fr;justify-content:stretch;row-gap:28px}}
.ldoc h3{margin:28px 0 10px;font:600 var(--fs-body)/1.35 var(--serif);color:var(--navy)}   /* change 18: sub-headings in the refunds and shipping sections of the terms */
.ldoc h2[id]{scroll-margin-top:calc(var(--nav) + 20px)}
/* change 18: the tool pages' numbers band looks like the landing one (.mx3): no line above or below, the same number size */
.tool-band>.wrap{border-top:0;border-bottom:0}
.tool-band .tiles.nums .tile b,.tool-band .nums .tile b{font-size:clamp(72px,7.2vw,112px);line-height:.9}
@media (min-width:641px) and (max-height:740px){.tool-band .tiles.nums .tile b,.tool-band .nums .tile b{font-size:clamp(72px,7.2vw,112px)}}
@media (max-width:640px){.tool-band .tiles.nums .tile b,.tool-band .nums .tile b{font-size:40px;line-height:.95}}
/* the bigger numbers need room in the first screen: on laptop-height screens the hero's top padding goes, and the band (now without its lines) loses its line spacing */
@media (min-width:1025px) and (max-height:800px){.tool-hero{padding-top:0}.tool-band>.wrap{padding-top:4px;padding-bottom:8px}}
/* change 18: "Sound familiar?" keeps its design, in the site's sizes: struck-through lines and the big line at heading size,
   the bubble words around body size (L a touch larger, S a touch smaller); the crowd is a little shorter, with the same air between bubbles */
.sfx .pw-a{font-size:clamp(22px,2.5vw,36px);line-height:1.3;gap:.45em .9em}
.sfx .sf-big,html:not([data-sf="1"]):not([data-sf="2"]) .sfx .sf-big{font-size:clamp(30px,3.4vw,var(--fs-h2));line-height:var(--lh-h2)}
.sfx .cb-l{font-size:21px}.sfx .cb-m{font-size:var(--fs-body)}.sfx .cb-s{font-size:17px}
.sfx .crowd-list{height:290px}
@media (max-width:1100px){.sfx .crowd-list{height:310px}}
@media (max-width:860px){.sfx .crowd-list{height:auto;gap:16px 12px}.sfx .cb-l{font-size:19px}.sfx .cb-m{font-size:17px}.sfx .cb-s{font-size:15px}}
/* change 18: Brainstorm, How it works. Card 1's note sits under its picture; under the stack, "Still stuck?" and a booking button */
.stk-mock .mock-cap{position:absolute;right:18px;bottom:10px;margin:0;font-size:16px;text-align:right;color:var(--ink50)}
.stk-stuck{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.stk-stuck p{margin:0;font:400 var(--fs-body)/1.4 var(--serif);color:var(--navy)}
@media (max-width:640px){.stk-stuck{flex-direction:column;gap:12px;text-align:center}.stk-mock .mock-cap{position:static;grid-row:2;justify-self:end;margin-top:8px;font-size:14px}}

/* change 18b: College Research "Before and after", after the client's reference: boxed two-line tabs, then a 2x2 per student on navy.
   What they did (see-through), what the research found (white), before (dashed, faded), after (butter, the strongest).
   All panes share one grid cell, so the section keeps one height on every tab. When a tab opens the four cards fade up in turn and
   the After highlight draws in; nothing loops; reduced motion shows it all at once */
.xt{display:grid;grid-template-columns:minmax(0,1fr)}
.xt-tabs{grid-row:1;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:10px;margin:0 0 18px}
.xt-tabs button{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:9px 16px 10px;border-radius:10px;background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);cursor:pointer;text-align:left}
.xt-tabs button b{font:600 17px/1.15 var(--serif)}
.xt-tabs button small{font:400 14px/1.15 var(--serif);opacity:.85}
.xt-tabs button[aria-selected="true"]{background:var(--sun);color:var(--navy);box-shadow:none}
.xt-tabs button[hidden]{display:none}
.xt-pane{grid-row:2;grid-column:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.xt-pane.off{visibility:hidden;pointer-events:none}   /* the other student stays in the same grid cell, so the height never changes */
.xc{border-radius:12px;padding:20px 22px 22px}
.xc p{margin:0;font:400 var(--fs-body)/1.5 var(--serif)}
.xc p.xc-k{margin:0 0 12px;font:500 12px/1.2 var(--serif);letter-spacing:.08em}
.xc-did{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.xc-did p.xc-k,.xc-before p.xc-k{color:rgba(255,255,255,.72)}
.xc-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.xc-chips li{padding:6px 12px;border-radius:8px;background:var(--sun);font:500 16px/1.3 var(--serif);color:var(--navy)}
.xc p.xc-note{margin-top:14px;color:#fff}
.xc-found{background:#fff}
.xc-found p.xc-k,.xc-after p.xc-k{color:var(--gold-d)}
.xc p.xc-title{margin-bottom:8px;font:500 26px/1.2 var(--serif);color:var(--navy)}
.xc-found p{color:var(--navy)}
.xc p.xc-src{margin-top:12px;font-size:14px;color:var(--ink50)}
.xc-before{background:transparent;border:1px dashed rgba(255,255,255,.4)}
.xc-before p.xc-q{color:rgba(255,255,255,.75)}
.xc-after{background:var(--butter)}
.xc-after p.xc-q{font:400 22px/1.45 var(--serif);color:var(--navy)}
.xc-after mark{color:inherit;padding:0 2px;background:linear-gradient(var(--sun),var(--sun)) 0 0/100% 100% no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.xt-pane.go .xc{animation:xcUp .55s var(--ease) both;animation-delay:calc(var(--k) * .14s)}
.xt-pane.go .xc-after mark{background-size:0% 100%;animation:xcMark .8s ease-out .7s forwards}
@keyframes xcUp{from{opacity:0;transform:translateY(14px)}}
@keyframes xcMark{to{background-size:100% 100%}}
.xt-foot{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;margin-top:22px}
.btn-sun{background:var(--sun);color:var(--navy)}
.btn-sun:hover{background:#ECC572;box-shadow:0 10px 24px rgba(0,0,0,.25)}
.xt-fine{margin:0;font:400 15px/1.4 var(--serif);color:rgba(255,255,255,.7)}
@media (max-width:760px){.xt-pane{grid-template-columns:minmax(0,1fr);gap:12px}.xc{padding:18px 18px 20px}.xc p.xc-title{font-size:23px}.xc-after p.xc-q{font-size:20px}.xt-foot{flex-direction:column;align-items:flex-start}}
@media (prefers-reduced-motion:reduce){.xt-pane.go .xc,.xt-pane.go .xc-after mark{animation:none;background-size:100% 100%}}

/* change 18: Sample Essays as books on a shelf. Each book's height comes from "h", its colour from "c"; the spine reads bottom to top.
   The shelf is as wide as its books; a wooden board runs under every row (a repeating gradient, one board per row height) */
.es-head{margin-bottom:20px}
.shelf3{--R:320px;--G:54px;--ws:1.3;list-style:none;width:fit-content;max-width:100%;margin:0 auto;padding:0 clamp(16px,3vw,44px);display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;row-gap:var(--G);
  background:repeating-linear-gradient(180deg,transparent 0 var(--R),#E3C795 var(--R),#C9A56A calc(var(--R) + 9px),#A9874F calc(var(--R) + 12px),rgba(27,42,74,.16) calc(var(--R) + 12px),rgba(27,42,74,0) calc(var(--R) + 26px),transparent calc(var(--R) + var(--G)));
  padding-bottom:calc(var(--G) - 12px);border-radius:2px}
.bk3{height:var(--R);width:calc(var(--w) * var(--ws));margin:0 6px;display:flex;align-items:flex-end;transition:width .5s var(--ease),margin .5s var(--ease),opacity .4s ease,transform .5s var(--ease)}
.bk3 a{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:var(--h);border-radius:5px 5px 2px 2px;color:#FFFCF5;text-decoration:none;
  background:linear-gradient(90deg,rgba(0,0,0,.22) 0,rgba(0,0,0,0) 14%,rgba(255,255,255,.1) 42%,rgba(0,0,0,0) 70%,rgba(0,0,0,.2) 100%),var(--c);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.1),0 8px 14px -10px rgba(0,0,0,.5);transform-origin:30% 100%;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.bk3 a::before,.bk3 a::after{content:"";position:absolute;left:8px;right:8px;height:2px;background:var(--sun);opacity:.85;box-shadow:0 4px 0 -1px rgba(226,182,90,.5)}
.bk3 a::before{top:16px}.bk3 a::after{bottom:18px}
.bk3-sp{writing-mode:vertical-rl;transform:rotate(180deg);max-height:calc(100% - 64px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:500 18px/1 var(--serif);letter-spacing:.04em}
.bk3 a:hover,.bk3 a:focus-visible{transform:translateY(-10px) rotate(var(--t,-2deg));box-shadow:inset 0 0 0 1px rgba(0,0,0,.1),0 22px 26px -14px rgba(0,0,0,.5)}
.bk3 a:focus-visible{outline:2px solid var(--sun);outline-offset:3px}
@media (max-width:860px){.shelf3{--R:270px;--ws:1}.bk3-sp{font-size:16px}}
@media (max-width:560px){.shelf3{--R:244px;--G:44px;--ws:1;max-width:300px}.bk3{margin:0 5px}.bk3-sp{font-size:15px}.bk3 a::before{top:12px}.bk3 a::after{bottom:13px}}
@media (prefers-reduced-motion:reduce){.bk3,.bk3 a{transition:none}.bk3 a:hover,.bk3 a:focus-visible{transform:none}}
/* change 18: Our Story, two founders side by side with a thin gold rule and a Kalam "&" between them; each letter opens in the essay reader */
.fd2-grid{display:grid;grid-template-columns:minmax(0,1fr) 90px minmax(0,1fr);align-items:stretch;max-width:1180px}
.fd2-col{display:flex;flex-direction:column;align-items:center;text-align:center;padding:8px clamp(8px,2vw,28px) 12px}
.fd2-ph{position:relative;width:clamp(150px,15vw,200px);aspect-ratio:1;border:0;padding:0;border-radius:50%;overflow:hidden;cursor:pointer;
  background:var(--sky);box-shadow:0 0 0 6px #fff,0 0 0 7px rgba(176,141,87,.45),0 18px 40px -18px rgba(27,42,74,.45);transition:transform .45s var(--ease)}
.fd2-ph span{position:absolute;inset:0;display:grid;place-items:center;font:400 46px/1 var(--serif);color:var(--navy)}
.fd2-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fd2-ph:hover{transform:translateY(-3px)}
.fd2-name{margin:26px 0 6px;font:400 clamp(28px,2.4vw,36px)/1.15 var(--serif);color:var(--navy)}
.fd2-name button{border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer}
.fd2-name button:hover{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:5px}
.fd2-role{margin:0;font:500 var(--fs-body)/1.35 var(--serif);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--ink50)}
.fd2 .lt-logos{justify-content:center;max-width:none;margin:22px 0 0;padding:18px 0 0;gap:12px 28px}
.fd2 .lt-logos img{height:26px}
.fd2 .lt-logos .wm{font-size:20px}
.fd2-line{margin:22px 0 24px;max-width:46ch;font:400 var(--fs-body)/var(--lh-body) var(--serif);color:var(--ink70)}
.fd2-col .btn{margin-top:auto}
.fd2-amp{position:relative;display:flex;align-items:center;justify-content:center}
.fd2-amp::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:rgba(176,141,87,.55)}
.fd2-amp span{position:relative;padding:10px 0;background:var(--page);font:400 56px/1 var(--hand);color:var(--gold-d)}
@media (max-width:860px){
  .fd2-grid{grid-template-columns:minmax(0,1fr);row-gap:8px}
  .fd2-amp{height:70px}
  .fd2-amp::before{top:50%;bottom:auto;left:15%;right:15%;width:auto;height:1px}
  .fd2-amp span{padding:0 18px}
}
/* the letter in the reader: its signature */
.er-body .lt-sign{margin-top:28px}