/* Transfer Answers site. White pages with the logo's navy for the hero, the story band, the closing call and the footer.
   Archivo (wide, 800) for headings, Public Sans for everything else. Colors, type, depth and motion come from tokens.css
   (shared with the app): one accent blue, flat surfaces with hairlines, no gradients, glass or glow. The one glow is
   on the dot that ends the logo's curve. */

/* ---------- layout (site only): an 8px grid, the section rhythm and the content container ---------- */
/* ---------- fonts: both self-hosted and preloaded, so text is drawn in its real face from the first paint ---------- */
/* headings: Archivo, self-hosted (SIL Open Font License), wide and heavy to match the wordmark ---------- */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 800;font-stretch:100% 125%;font-display:swap;
  src:url(/assets/fonts/archivo-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* body: Public Sans, self-hosted (SIL Open Font License), latin, variable weight 400 to 700 */
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/assets/fonts/public-sans-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* fallbacks measured against the real faces (width and line box), so the swap moves nothing */
@font-face{font-family:'Archivo Fallback';src:local('Arial Black'),local('Arial-Black'),local('Arial Bold'),local('Arial');
  size-adjust:103%;ascent-override:85.2%;descent-override:20.4%;line-gap-override:0%}
@font-face{font-family:'Public Sans Fallback';src:local('Arial'),local('ArialMT'),local('Helvetica');
  size-adjust:105.6%;ascent-override:89.9%;descent-override:21.8%;line-gap-override:0%}
:root{ --sans:'Public Sans','Public Sans Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif }
:root{ --head-font:'Archivo','Archivo Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; --head-weight:800;
  --display:116%; --track-display:-.02em; --lh-display:1.08 }

/* ---------- scale (site only): every size below is in rem, so this block scales the whole site. At a 16px root the
   site at 100% reads the way the earlier build read at about 70% browser zoom. tokens.css (shared with the app) keeps
   its px values; the site overrides them here. ---------- */
:root{
  --u:.5rem; --section-y:5rem; --container:70rem; --gutter:1.5rem;
  --fs-eyebrow:.75rem; --fs-small:.875rem; --fs-body:1rem; --fs-body-lg:1.0625rem; --fs-lead:1.125rem;
  --fs-h3:1.1875rem; --fs-h2:1.875rem; --fs-h1:2.75rem;
  --r-panel:1rem; --r-card:.75rem; --r-btn:.5rem; --r-xs:.375rem;
  --btn-h:2.75rem; --nav-h:3.5rem; --pad-card:1.5rem;
}
@media (max-width:767px){ :root{ --section-y:3.5rem; --fs-h1:2rem; --fs-h2:1.5rem; --fs-h3:1.0625rem; --fs-lead:1.0625rem; --pad-card:1.25rem } }
@media (min-width:768px){ :root{ --gutter:2rem } }

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;hanging-punctuation:first allow-end last}
body{margin:0;background:var(--paper);color:var(--ink-2);font-family:var(--sans);font-size:var(--fs-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
/* numerals: tabular wherever numbers are data */
.price,.plan__price,.proof__list,.how__n,.topics b,.sources,.card__meta,.plan__meta,.path3__cap b{font-variant-numeric:tabular-nums}
::selection{background:var(--accent-soft);color:var(--ink)}
img,svg{display:block;max-width:100%}
/* images still loading fade in once decoded instead of popping (site.js marks only those) */
img.is-loading{opacity:0}
img.is-decoded{opacity:1;transition:opacity 400ms var(--ease)}
a{color:var(--accent);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--accent-hover);text-decoration-thickness:2px}
a[href^="tel:"]{white-space:nowrap}
:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
a:focus-visible{border-radius:4px}
h1,h2,h3{margin:0;font-family:var(--head-font);font-weight:var(--head-weight);font-stretch:var(--display);line-height:var(--lh-display);letter-spacing:var(--track-display);
  text-wrap:balance;color:var(--ink);font-optical-sizing:auto}
h1{font-size:var(--fs-h1)}
h2,.h2{font-size:var(--fs-h2)}
h3,.h3{font-size:var(--fs-h3);letter-spacing:-.01em;line-height:1.2}
p,li,dd,figcaption,blockquote,.lead{text-wrap:pretty}
p{margin:0}
.small{font-size:var(--fs-small);color:var(--ink-2)}
.eyebrow{margin:0 0 0.75rem;font-family:var(--sans);font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.4;color:var(--accent)}
.wrap{max-width:calc(var(--container) + 2 * var(--gutter));margin:0 auto;
  padding:0 max(var(--gutter),env(safe-area-inset-right)) 0 max(var(--gutter),env(safe-area-inset-left))}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:0.75rem;top:-3.75rem;z-index:100;background:var(--ink);color:#fff;padding:0.625rem 0.875rem;border-radius:var(--r-btn);font-weight:600}
.skip:focus{top:0.75rem;color:#fff}
sup{font-size:var(--fs-eyebrow);font-weight:600;line-height:0;vertical-align:super;margin-left:1px}
sup a{padding:0 2px;text-decoration:none}
/* placeholders: anything marked data-pending stays hidden until its real content is in */
[data-pending]{display:none !important}

/* ---------- buttons and links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:var(--btn-h);padding:.5rem 1.125rem;border-radius:var(--r-btn);
  background:var(--accent);color:#fff;font:inherit;font-size:var(--fs-body);font-weight:600;line-height:1.2;text-decoration:none;border:0;cursor:pointer;
  transition:background-color var(--t-hover) var(--ease),scale 120ms var(--ease)}
.btn:hover{background:var(--accent-hover);color:#fff;text-decoration:none}
.btn:active{scale:.98}
.btn .arrow{width:.875rem;height:.875rem;flex:none;transition:transform var(--t-hover) var(--ease)}
.btn:hover .arrow{transform:translateX(0.1875rem)}
.btn--lg{min-height:var(--btn-h);padding:.5rem 1.375rem}
.btn--sm{min-height:2.5rem;padding:.375rem .875rem;font-size:var(--fs-small)}
@media (max-width:899px){ .btn--sm{min-height:var(--btn-h)} }
.btn--secondary{background:var(--paper);color:var(--ink);border:1px solid var(--line-strong)}
.btn--secondary:hover{background:var(--surface);color:var(--ink)}
.more{display:inline-flex;align-items:center;gap:0.375rem;min-height:2.75rem;font-weight:600;text-decoration:none}
.more:hover{text-decoration:underline}
.more .arrow{width:0.875rem;height:0.875rem;transition:transform var(--t-hover) var(--ease)}
.more:hover .arrow{transform:translateX(0.1875rem)}

/* ---------- nav: white, a hairline once the page moves ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid transparent;transition:border-color var(--t-hover) var(--ease)}
.nav.is-scrolled{border-bottom-color:var(--line)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u) * 2);height:var(--nav-h)}
.nav__logo{display:flex;align-items:center;flex:none;padding:0.75rem 0;border-radius:var(--r-xs)}
.nav__words{display:grid}
.nav__word{height:1.125rem;width:auto}
.nav__word--light{display:none}
.nav__mk{height:1.125rem;width:auto;flex:none;overflow:visible}
.mk-flat{fill:none;stroke:var(--logo-line);stroke-width:9;stroke-linecap:round}
.mk-curve{fill:none;stroke:var(--logo-curve);stroke-width:7.5;stroke-linecap:round}
.mk-dot{fill:var(--logo-curve);filter:var(--dot-glow)}
.nav__links{display:flex;align-items:center;gap:0.25rem;height:100%;position:relative;margin-left:auto}
.nav__links a:not(.btn){display:flex;align-items:center;height:100%;padding:0 0.75rem;font-size:var(--fs-small);font-weight:600;color:var(--ink-2);text-decoration:none;
  transition:color var(--t-hover) var(--ease)}
.nav__links a:not(.btn):hover,.nav__links a[aria-current="page"]{color:var(--ink)}
.nav__links a:not(.btn):focus-visible{outline-offset:-4px}
.nav__ind{position:absolute;bottom:0;left:0;height:2px;width:0;background:var(--accent);
  transition:transform var(--t-spring) var(--ease),width var(--t-spring) var(--ease),opacity var(--t-hover) var(--ease)}
.nav__menucta,.nav__menunote{display:none}
.nav__cta{flex:none}
.nav__menu{display:none}
@media (max-width:899px){
  .nav__in{gap:0.75rem}
  .nav__word,.nav__mk{height:1rem}
  .nav__menu{display:grid;place-items:center;width:2.75rem;height:2.75rem;margin-right:-0.625rem;padding:0;background:none;border:0;border-radius:var(--r-btn);cursor:pointer;color:var(--ink);position:relative;z-index:62}
  .nav__menu:hover{background:var(--surface)}
  .nav__bars,.nav__bars::before,.nav__bars::after{display:block;width:1.25rem;height:2px;border-radius:2px;background:currentColor;transition:transform var(--t-hover) var(--ease),background-color var(--t-hover) var(--ease)}
  .nav__bars{position:relative}
  .nav__bars::before,.nav__bars::after{content:"";position:absolute;left:0}
  .nav__bars::before{top:-0.375rem}.nav__bars::after{top:0.375rem}
  .nav.is-open .nav__bars{background:transparent}
  .nav.is-open .nav__bars::before{transform:translateY(0.375rem) rotate(45deg)}
  .nav.is-open .nav__bars::after{transform:translateY(-0.375rem) rotate(-45deg)}
  .nav__cta{position:relative;z-index:62;margin-left:auto;transition:opacity var(--t-hover) var(--ease)}
  .nav__logo{position:relative;z-index:62}
  .nav.is-open .nav__cta{visibility:hidden}
  /* the phone menu: full screen, links in a column, a large booking button at the bottom */
  .nav__links{position:fixed;inset:0;z-index:61;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;height:auto;margin:0;
    padding:5rem var(--gutter) calc(2rem + env(safe-area-inset-bottom));background:var(--paper);visibility:hidden;opacity:0;
    transition:opacity var(--t-reveal) var(--ease),visibility 0s var(--t-reveal)}
  .nav.is-open .nav__links{visibility:visible;opacity:1;transition:opacity var(--t-reveal) var(--ease),visibility 0s}
  .nav__links a:not(.btn){height:auto;min-height:3.5rem;padding:0;font-family:var(--head-font);font-stretch:var(--display);font-size:var(--fs-h2);font-weight:var(--head-weight);color:var(--ink);border-bottom:1px solid var(--line)}
  .nav__links a[aria-current="page"]{color:var(--accent)}
  .nav__ind{display:none}
  .nav__menunote{display:block;margin:auto 0 var(--u);font-size:var(--fs-small);color:var(--ink-2)}
  .nav__menucta{display:inline-flex;min-height:3rem;font-size:var(--fs-body)}
  .no-scroll{overflow:hidden}
}
/* phones: the mark alone, drawn heavier so it holds up small */
@media (max-width:479px){ .nav__words{display:none} .nav__mk{height:1.375rem} .mk-flat{stroke-width:20} .mk-curve{stroke-width:24} .mk-dot{transform:scale(1.9);transform-box:fill-box;transform-origin:center} }

/* ---------- sections: paper, the surface tone, and navy ---------- */
.page{padding:2rem 0 3.5rem}
@media (min-width:960px){ .page{padding:3rem 0 4rem} }
.phead{max-width:46em}
.phead .lead{margin-top:calc(var(--u) * 2)}
.band{padding:var(--section-y) 0}
.band--tint{background:var(--surface)}
.band--navy{background:var(--navy-900);color:var(--on-dark-2)}
.band--deep{background:var(--navy-950);color:var(--on-dark-2)}
.band--navy h2,.band--deep h2,.band--navy h3{color:var(--on-dark)}
.band--navy .eyebrow,.band--deep .eyebrow{color:var(--accent-on-dark)}
.band--navy a:not(.btn),.band--deep a:not(.btn){color:var(--accent-on-dark)}
.band__head{max-width:var(--measure);margin-bottom:calc(var(--u) * 4)}
.lead{font-size:var(--fs-lead);line-height:1.5;color:var(--ink-2);max-width:var(--measure)}

/* ---------- home: hero ---------- */
/* the logo, told as the transfer story, on a full-width navy panel; the headline and the call to action land inside it.
   Sized so the panel and the top of the next section share one 1440x900 screen. */
.hero{background:var(--navy-900);color:var(--on-dark)}
.film{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;justify-content:center;
  min-height:clamp(32rem,calc(100svh - var(--nav-h) - 10rem),42rem)}
.film__stage{position:absolute;inset:0}
.film__stage svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hero__content{position:relative;z-index:2;width:100%;text-align:center;padding-top:calc(var(--u) * 12);padding-bottom:calc(var(--u) * 5);display:grid;justify-items:center;gap:calc(var(--u) * 1.75)}
@media (min-width:768px){ .hero__content{padding-top:calc(var(--u) * 13);padding-bottom:calc(var(--u) * 4)} }
.hero__content h1{color:var(--on-dark);max-width:20ch;font-size:clamp(var(--fs-h1),6vw,3.5rem)}
.hero__content .lead{color:var(--on-dark-2);max-width:50ch}
.hero__cta{display:grid;justify-items:center;gap:var(--u);margin-top:calc(var(--u) * .5)}
.hero__note{font-size:var(--fs-small);color:var(--ink-2)}
.hero .hero__note{color:var(--on-dark-2)}
/* while the intro plays, the copy waits; it fades up as the logo settles (and after 5.5s no matter what) */
.hero__content > *{transition:opacity var(--t-reveal) var(--ease),transform var(--t-reveal) var(--ease)}
.hero-intro .hero__content > *{opacity:0;transform:translateY(.75rem);animation:hero-fallback 0s 5.5s forwards}
@keyframes hero-fallback{to{opacity:1;transform:none}}
.hero__content > :nth-child(2){transition-delay:60ms}
.hero__content > :nth-child(3){transition-delay:120ms}
/* Replay: a small, quiet icon in the corner; it brightens on hover and focus */
.film__ctl{position:absolute;right:calc(var(--u) * 1.5);bottom:calc(var(--u) * 1.5);z-index:3;display:grid;place-items:center;
  width:2.75rem;height:2.75rem;padding:0;color:var(--on-dark);background:none;border:0;border-radius:50%;cursor:pointer;opacity:.4;
  transition:opacity var(--t-hover) var(--ease),background-color var(--t-hover) var(--ease),scale 120ms var(--ease)}
.film__ctl:hover,.film__ctl:focus-visible{opacity:1;background:rgba(248,250,252,.08)}
.film__ctl:focus-visible{outline-color:var(--accent-on-dark)}
.film__ctl:active{scale:.94}
.film__ctl svg{width:1rem;height:1rem}
.hero-intro .film__ctl{opacity:0;pointer-events:none}

/* the drawing: the plan draws bright enough to follow, then settles to the baseline tone */
.f-flat{fill:none;stroke:rgba(248,250,252,.55);stroke-linecap:round;transition:stroke .6s ease}
.film:not([data-scene="1"]):not([data-scene="0"]) .f-flat{stroke:var(--base-dark)}
.f-flatend{fill:var(--navy-900);stroke:rgba(248,250,252,.55);stroke-width:2.5;opacity:0;transition:opacity .4s ease}
.film[data-scene="1"] .f-flatend,.film[data-scene="2"] .f-flatend{opacity:1}
/* the solid equivalent of 18% white on navy, so overlapping pieces don't double up at the joints */
.f-frags{fill:none;stroke:#3C4560;stroke-linecap:round;stroke-linejoin:round;transition:opacity .2s ease}
.film[data-lit="1"] .f-frags{opacity:0}
.f-curve{fill:none;stroke:var(--accent-on-dark);stroke-linecap:round;opacity:0;transition:opacity .35s ease}
.film[data-lit="1"] .f-curve{opacity:1}
.f-start{fill:var(--navy-900);stroke:#fff;stroke-width:2.5;transition:opacity .5s ease}
.f-leader{stroke:rgba(248,250,252,.4);stroke-width:1;transition:opacity .5s ease}
.film[data-scene="4"] .f-start,.film[data-scene="4"] .f-leader{opacity:0}
/* the dot that ends the curve: the product's one glow */
.f-dot{fill:var(--accent-on-dark);filter:var(--dot-glow);transform-box:fill-box;transform-origin:center;opacity:0;transform:scale(.3);transition:opacity .4s ease,transform .45s cubic-bezier(.2,1.5,.4,1)}
.f-ring{fill:none;stroke:var(--accent-on-dark);stroke-opacity:.3;stroke-width:1;opacity:0;transition:opacity .4s ease .2s}
.film[data-lit="1"] .f-dot{opacity:1;transform:scale(1)}
.film[data-lit="1"] .f-ring{opacity:1}
.f-glow{fill:none;stroke:var(--accent-on-dark);stroke-width:3;opacity:0;transform-box:fill-box;transform-origin:center}
.film[data-lit="1"][data-scene="3"] .f-glow{animation:glow 1.1s ease-out 1}
@keyframes glow{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(2.4)}}
.f-word{opacity:0;transition:opacity .6s ease .8s}
.f-word__a{fill:rgba(248,250,252,.72)}
.f-word__b{fill:#fff}
.film[data-scene="4"] .f-word{opacity:1}
.ft{position:absolute;margin:0;font-size:var(--fs-small);line-height:1.3;font-weight:650;color:#fff;pointer-events:none;white-space:nowrap;opacity:0;transition:opacity .4s ease}
.film[data-scene="1"] .ft--hs,.film[data-scene="2"] .ft--hs,.film[data-scene="3"] .ft--hs,
.film[data-scene="2"] .ft--uc,.film[data-scene="3"] .ft--uc{opacity:1}
/* one small label per phase, so a first-time viewer can follow it: it fades in with its phase and out as the next begins */
.ft--phase{font-size:.8125rem;font-weight:600;letter-spacing:.01em;color:rgba(248,250,252,.72);transition:opacity .5s ease}
.film[data-scene="1"] .ft--p1,.film[data-scene="2"] .ft--p2,.film[data-scene="3"] .ft--p3{opacity:1}
.ft--frag{font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.03em;color:var(--on-dark);background:var(--navy-800);border:1px solid rgba(96,165,250,.5);border-radius:var(--r-chip);padding:.1875rem .5625rem;transition:none}
.film:not([data-scene="2"]):not([data-scene="3"]) .ft--frag{visibility:hidden}

/* ---------- home: who you'll talk to ---------- */
/* the photo at about 40%, the words beside it, both centred on one line */
.intro{padding:calc(var(--u) * 7) 0 calc(var(--u) * 5)}
.intro__in{display:grid;gap:calc(var(--u) * 4);align-items:center}
.intro__copy{display:grid;gap:calc(var(--u) * 1.5);justify-items:start}
.intro__copy .eyebrow{margin:0}
.intro__copy h2{max-width:18ch}
.intro__copy .lead{max-width:36ch}
.intro__cta{display:grid;justify-items:start;gap:var(--u);margin-top:var(--u)}
@media (min-width:768px){
  .intro{padding:var(--section-y) 0 calc(var(--u) * 6)}
  .intro__in{grid-template-columns:1fr 1fr;gap:calc(var(--u) * 5)}
}
@media (min-width:1000px){ .intro__in{grid-template-columns:2fr 3fr;gap:calc(var(--u) * 8)} }
/* photos: a soft layered shadow and a 1px inner edge, so a light sky never melts into the page */
.photo-frame{position:relative;margin:0;border-radius:var(--r-panel);background:var(--surface);
  box-shadow:0 1px 2px rgba(15,23,42,.06),0 6px 16px -6px rgba(15,23,42,.14),0 22px 44px -18px rgba(15,23,42,.22)}
.photo-frame img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:inherit}
.photo-frame::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(15,23,42,.1);pointer-events:none}
.intro__photo{width:100%;max-width:26rem;justify-self:center}
/* on phones the portrait is smaller and sits with the text, so who he is shows on the first screen */
@media (max-width:767px){ .intro{padding-top:calc(var(--u) * 5)} .intro__in{gap:calc(var(--u) * 2.5)} .intro__photo{max-width:12.5rem;justify-self:start} }

/* ---------- home: what a website can't give you ---------- */
/* three short items in a row, no boxes; each is marked with the logo's curve and dot, small */
.cant{padding-top:calc(var(--u) * 6)}
.cant__list{list-style:none;margin:0;padding:0;display:grid;gap:calc(var(--u) * 3.5)}
@media (min-width:768px){ .cant__list{grid-template-columns:repeat(3,1fr);gap:calc(var(--u) * 5)} }
.cant__list li{display:grid;gap:calc(var(--u) * 1);align-content:start}
.cant__list p{color:var(--ink-2);max-width:32ch}
.cdot{width:2.75rem;height:auto;overflow:visible;margin-bottom:calc(var(--u) * .5)}
.cdot__flat{fill:none;stroke:var(--base-light);stroke-width:14;stroke-linecap:round}
.cdot__curve{fill:none;stroke:var(--accent);stroke-width:20;stroke-linecap:round}
.cdot__dot{fill:var(--accent)}

/* the proof strip: three facts in a ruled row, each a small label over its answer */
.proof{padding:0}
.proof__list{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--line)}
.proof__list li{display:grid;gap:.125rem;padding:calc(var(--u) * 1.5) 0;border-bottom:1px solid var(--line)}
.proof__list span{font-size:var(--fs-small);color:var(--ink-2)}
.proof__list b{font-size:var(--fs-body-lg);font-weight:650;color:var(--ink)}
@media (min-width:768px){
  .proof__list{grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
  .proof__list li{border-bottom:0;padding:calc(var(--u) * 2.5) calc(var(--u) * 3)}
  .proof__list li:first-child{padding-left:0}
  .proof__list li + li{border-left:1px solid var(--line)}
}

/* how it works: three numbered steps on one ruled line (it follows the proof strip closely) */
.how{list-style:none;margin:0;padding:0;display:grid;gap:calc(var(--u) * 3)}
.how li{display:grid;grid-template-columns:2.5rem 1fr;grid-template-rows:auto 1fr;column-gap:calc(var(--u) * 2);row-gap:0.375rem;align-items:start}
.how__n{grid-row:span 2;display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;border:1px solid var(--line-strong);font-size:var(--fs-small);font-weight:650;color:var(--ink)}
.how p{color:var(--ink-2);max-width:36ch}
@media (min-width:900px){
  .how{grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
  .how li{grid-template-columns:1fr;grid-template-rows:auto auto 1fr;padding:calc(var(--u) * 3) calc(var(--u) * 4) 0 0}
  .how li + li{padding-left:calc(var(--u) * 4);border-left:1px solid var(--line)}
  .how__n{grid-row:auto;margin-bottom:calc(var(--u) * 1.5)}
}

/* the report: the two sample pages, flat, the label on the first */
.report-band__in{display:grid;gap:calc(var(--u) * 5);align-items:center}
.report-band .band__head{margin-bottom:0}
.report-band .lead{margin-top:calc(var(--u) * 2)}
.report-band .band__head p:last-child{margin-top:calc(var(--u) * 2)}
.sheets{display:grid;grid-template-columns:1fr;gap:calc(var(--u) * 2);align-items:start}
.sheet{position:relative;display:block;width:100%;margin:0;padding:0;font:inherit;text-align:left;border:1px solid var(--line);border-radius:var(--r-xs);background:var(--paper);overflow:hidden;box-shadow:var(--shadow-sm);cursor:zoom-in;
  transition:box-shadow var(--t-hover) var(--ease),translate var(--t-hover) var(--ease)}
.sheet:hover,.rpage:hover{box-shadow:var(--shadow-md);translate:0 -2px}
.sheet img{width:100%;height:auto}
/* the label sits in its own row above the page, so it never covers the page itself */
.sheet .chip,.rpage .chip{position:static;display:flex;width:max-content;margin:calc(var(--u) * 1.5) calc(var(--u) * 1.5) 0}
.sheet--2{display:none}
@media (min-width:600px){ .sheets{grid-template-columns:1fr 1fr} .sheet--2{display:block} }
@media (min-width:1000px){ .report-band__in{grid-template-columns:4fr 7fr;gap:calc(var(--u) * 8)} }

/* the story band: the logo as my path, on navy */
.storyband__text{margin-top:calc(var(--u) * 2);font-size:var(--fs-body-lg);color:var(--on-dark-2);max-width:56ch}
.storyband__more{margin-top:calc(var(--u) * 2)}
.lchart{margin:0}
.lchart__stage{position:relative;height:18rem}
@media (min-width:768px){ .lchart__stage{height:21rem} }
.lchart__stage svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lc-base{fill:none;stroke:var(--base-dark);stroke-linecap:round}
.lc-curve{fill:none;stroke:var(--accent-on-dark);stroke-linecap:round}
.lc-leader{stroke:var(--on-dark-2);stroke-width:1;opacity:.5}
.lc-start{fill:var(--navy-900);stroke:var(--on-dark);stroke-width:2.5}
/* the dot that ends the curve: the product's one glow */
.lc-dot{fill:var(--accent-on-dark);filter:var(--dot-glow);transform-box:fill-box;transform-origin:center;opacity:0;transform:scale(.4);
  transition:opacity .3s var(--ease),transform .4s var(--ease)}
.lchart.is-end .lc-dot{opacity:1;transform:none}
.lt{position:absolute;margin:0;font-size:var(--fs-body);line-height:1.35;color:var(--on-dark-2);pointer-events:none;transition:opacity .4s var(--ease)}
.lt b{display:block;color:var(--on-dark);font-weight:650}
.lt--base,.lt--low,.lt--end{opacity:0}
.lt--base,.lt--end{text-align:right}
.lt--end b{color:var(--accent-on-dark)}
.lchart.is-base .lt--base,.lchart.is-curve .lt--low,.lchart.is-end .lt--end{opacity:1}

/* testimonials: rendered from /assets/testimonials.json, and only when it holds real entries */
.voices__list{display:grid;gap:calc(var(--u) * 2.5);margin-top:calc(var(--u) * 4)}
@media (min-width:860px){ .voices__list{grid-template-columns:repeat(3,1fr)} }
.voice{margin:0;padding-top:calc(var(--u) * 2);border-top:1px solid var(--line);display:grid;gap:calc(var(--u) * 1.5)}
.voice blockquote{margin:0;font-size:var(--fs-body-lg);line-height:1.5;color:var(--ink)}
.voice figcaption{font-size:var(--fs-small);color:var(--ink-2)}
.voice figcaption b{color:var(--ink);font-weight:650;margin-right:0.375rem}

/* pricing on Home: two plain plans */
.plans{display:grid;gap:calc(var(--u) * 2.5)}
@media (min-width:900px){ .plans{grid-template-columns:1fr 1fr} }
.plan{display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--u) * 1.25);padding:var(--pad-card);border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper)}
.plan--full{border-color:var(--accent)}
.plan__top{display:flex;width:100%;justify-content:space-between;align-items:baseline;gap:var(--u)}
.plan__price{font-family:var(--head-font);font-stretch:var(--display);font-size:var(--fs-h2);font-weight:var(--head-weight);color:var(--ink);line-height:1}
.plan__meta{font-size:var(--fs-small);font-weight:600;color:var(--ink)}
.plan .plan__note{font-size:var(--fs-small);color:var(--ink-2)}
/* the policy link never breaks at its hyphen */
a[href="/terms/#missed-sessions"]{white-space:nowrap}
.plan > p:not(.plan__meta){color:var(--ink-2)}
.plan .btn,.plan .more{margin-top:auto}

/* the close */
.finalcta__in{display:grid;justify-items:center;text-align:center;gap:calc(var(--u) * 3)}
.finalcta__cta{display:grid;justify-items:center;gap:calc(var(--u) * 1.5)}
.finalcta__cta p{font-size:var(--fs-small);color:var(--on-dark-2)}

/* ---------- my story ---------- */
/* the path in three photos, joined by the logo's curve: a faint baseline across the whole row, a node under the centre
   of each photo (2022 on the line, 2024 below it, 2026 above it at the glowing dot), the labels centred under the nodes.
   On phones the photos stack and the curve runs down the left side, a node beside each photo. */
.path3{margin-top:calc(var(--u) * 5)}
.path3__in{position:relative}
.path3__track{list-style:none;margin:0;padding:0 0 0 3.5rem;display:grid;gap:calc(var(--u) * 4)}
.path3__item{min-width:0}
.path3__photo{transition:scale var(--t-reveal) var(--ease),translate 500ms var(--ease),box-shadow 500ms var(--ease)}
.path3__photo:hover{scale:1.02}
.path3__item.is-lit .path3__photo{translate:0 -4px;
  box-shadow:0 2px 4px rgba(15,23,42,.08),0 10px 22px -8px rgba(15,23,42,.2),0 30px 56px -20px rgba(15,23,42,.3)}
.path3__cap{padding-top:calc(var(--u) * 1.5);font-size:var(--fs-small);color:var(--ink-2)}
.path3__cap b{display:block;font-family:var(--head-font);font-stretch:var(--display);font-size:var(--fs-h3);font-weight:800;color:var(--ink);letter-spacing:-.01em}
.path3__item--now .path3__cap b{color:var(--accent)}
.path3__curve{position:absolute;left:0;top:0;width:3.5rem;height:100%;overflow:visible;pointer-events:none;visibility:hidden}
/* site.js places the curve against the photos, then shows it, so it never jumps into place */
.path3__curve.is-placed{visibility:visible}
.p3-base{fill:none;stroke:var(--base-light);stroke-width:3;stroke-linecap:round}
.p3-curve{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;stroke-dasharray:1 1}
.p3-node{fill:var(--paper);stroke:var(--ink-2);stroke-width:2;transition:fill 300ms var(--ease),stroke 300ms var(--ease)}
.p3-node.is-lit{fill:var(--accent);stroke:var(--accent)}
.p3-dot{fill:var(--paper);stroke:var(--ink-2);stroke-width:2;transform-box:fill-box;transform-origin:center;transition:fill 300ms var(--ease),stroke 300ms var(--ease)}
.p3-dot.is-lit{fill:var(--accent);stroke:var(--accent);filter:var(--dot-glow);animation:p3-arrive 1.2s ease-out 1}
@keyframes p3-arrive{0%{transform:scale(.6)}35%{transform:scale(1.25);filter:drop-shadow(0 0 6px rgba(37,99,235,.9)) drop-shadow(0 0 16px rgba(37,99,235,.55))}100%{transform:none;filter:var(--dot-glow)}}
.path3.is-ready .p3-curve{stroke-dashoffset:1}
.path3.is-drawing .p3-curve{stroke-dashoffset:0;transition:stroke-dashoffset 1600ms linear}
@media (min-width:768px){
  .path3__track{padding:0;grid-template-columns:repeat(3,1fr);gap:calc(var(--u) * 3)}
  .path3__cap{padding-top:6rem;text-align:center}
  .path3__curve{width:100%;height:5.5rem}
}
.story__body{margin-top:calc(var(--u) * 6);font-size:var(--fs-body-lg);line-height:1.7;max-width:var(--measure)}
.story__body > * + *{margin-top:calc(var(--u) * 3)}
.story__body > .ctacard{margin-top:calc(var(--u) * 4)}
.ctacard{display:grid;gap:calc(var(--u) * 1.25);padding:calc(var(--pad-card) * 1.25);border-radius:var(--r-card);background:var(--navy-900);color:var(--on-dark-2)}
.ctacard h2{color:var(--on-dark)}
.ctacard__cta{display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--u) * 1.5) calc(var(--u) * 2);margin-top:var(--u)}
.ctacard .small{color:var(--on-dark-2)}

/* ---------- sessions ---------- */
.page--sessions{padding-bottom:0}
/* how it works: the same three steps as Home */
.steps{margin-top:calc(var(--u) * 7);padding-bottom:calc(var(--u) * 8)}
.steps .how{margin-top:calc(var(--u) * 4)}
/* pricing: the full session is the featured card */
.cards{display:grid;gap:calc(var(--u) * 2.5);align-items:start}
@media (min-width:900px){ .cards{grid-template-columns:5fr 7fr} }
.card{position:relative;display:flex;flex-direction:column;gap:calc(var(--u) * 1.5);padding:var(--pad-card);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card)}
.card--featured{border-color:var(--accent)}
.card__top{display:flex;justify-content:space-between;align-items:flex-start;gap:calc(var(--u) * 2);padding-bottom:calc(var(--u) * 2);border-bottom:1px solid var(--line)}
.card__meta{font-size:var(--fs-small);color:var(--ink-2);margin-top:var(--u)}
.price{font-family:var(--head-font);font-stretch:var(--display);font-size:var(--fs-h2);font-weight:var(--head-weight);line-height:1;color:var(--ink)}
.card--featured .price{font-size:var(--fs-h1)}
.chip{display:inline-flex;align-items:center;min-height:1.75rem;padding:0.25rem 0.75rem;border-radius:var(--r-chip);background:var(--accent-soft);color:var(--accent-ink);font-size:var(--fs-small);font-weight:650}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:var(--u)}
.ticks li{display:flex;gap:calc(var(--u) * 1.5);align-items:baseline;color:var(--ink)}
.ticks li::before{content:"";flex:none;width:0.375rem;height:0.375rem;border-radius:50%;background:var(--ink-2);transform:translateY(-2px)}
.topics{list-style:none;margin:0;padding:0;display:grid}
.topics li{display:grid;grid-template-columns:2.25rem 1fr;gap:var(--u);padding:calc(var(--u) * 1.5) 0;border-top:1px solid var(--line);line-height:1.5}
.topics li:first-child{border-top:0;padding-top:0}
.topics b{font-weight:650;color:var(--ink-2);font-size:var(--fs-small);padding-top:0.1875rem}
.topics strong{font-weight:650;color:var(--ink)}
.card__report{line-height:1.55;color:var(--ink-2);padding-top:calc(var(--u) * 2);border-top:1px solid var(--line)}
.card__cta{display:grid;gap:var(--u);justify-items:start;margin-top:var(--u)}
.card__cta p{font-size:var(--fs-small);line-height:1.5;color:var(--ink-2);max-width:52ch}

/* ---------- the FAQ ---------- */
.faq__grid{display:grid;gap:calc(var(--u) * 4)}
@media (min-width:900px){ .faq__grid{grid-template-columns:4fr 7fr;gap:calc(var(--u) * 10);align-items:start} .faq__head{position:sticky;top:6rem} }
.faq__mail{margin-top:calc(var(--u) * 2);font-size:var(--fs-small);color:var(--ink-2)}
.faq__list{border-top:1px solid var(--line-strong)}
.faq__item{border-bottom:1px solid var(--line-strong)}
.faq__item h3{font-family:var(--sans);font-stretch:100%;font-size:inherit;font-weight:inherit;letter-spacing:0;line-height:inherit}
.faq__q{display:flex;width:100%;align-items:center;justify-content:space-between;gap:calc(var(--u) * 2);min-height:3.25rem;padding:calc(var(--u) * 1.5) 0;
  font:inherit;font-size:var(--fs-body);font-weight:600;line-height:1.35;color:var(--ink);text-align:left;background:none;border:0;cursor:pointer;transition:color var(--t-hover) var(--ease)}
.faq__q:hover,.faq__item.is-open .faq__q{color:var(--accent)}
.faq__q:focus-visible{outline-offset:-2px;border-radius:var(--r-xs)}
.faq__icon{position:relative;width:0.875rem;height:0.875rem;flex:none;transition:transform var(--t-spring) var(--ease)}
.faq__icon::before,.faq__icon::after{content:"";position:absolute;left:0;top:0.375rem;width:0.875rem;height:2px;background:currentColor;border-radius:2px}
.faq__icon::after{transform:rotate(90deg);transition:transform var(--t-spring) var(--ease)}
.faq__q[aria-expanded="true"] .faq__icon::after{transform:rotate(90deg) scaleX(0)}
/* closed answers take no room and are hidden from readers; site.js animates the height between */
.faq__a{height:0;overflow:hidden;visibility:hidden}
.faq__a.is-shown{visibility:visible}
.faq__a p{padding:0 calc(var(--u) * 5) calc(var(--u) * 2.5) 0;color:var(--ink-2);max-width:var(--measure)}

/* ---------- what you get ---------- */
.tour{margin-top:calc(var(--u) * 5)}
/* one row of tabs that never wraps; on a narrow phone it scrolls sideways instead */
.tour__tabs{position:relative;display:flex;max-width:100%;width:max-content;gap:0.25rem;padding:0.25rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-btn);
  overflow-x:auto;scrollbar-width:none}
.tour__tabs::-webkit-scrollbar{display:none}
.tour__tabs [role="tab"]{flex:none;white-space:nowrap}
.tour__tabs [role="tab"]{position:relative;z-index:1;font:inherit;font-size:var(--fs-small);font-weight:600;color:var(--ink-2);background:none;border:0;border-radius:calc(var(--r-btn) - 4px);
  min-height:2.75rem;padding:var(--u) calc(var(--u) * 2.5);cursor:pointer;transition:color var(--t-hover) var(--ease)}
.tour__tabs [role="tab"]:hover,.tour__tabs [role="tab"][aria-selected="true"]{color:var(--ink)}
@media (max-width:479px){ .tour__tabs [role="tab"]{padding-left:.625rem;padding-right:.625rem;font-size:.8125rem} }
.tour__ind{position:absolute;z-index:0;top:0.25rem;left:0;height:2.75rem;width:0;border-radius:calc(var(--r-btn) - 4px);background:var(--paper);box-shadow:0 0 0 1px var(--line);
  transition:transform var(--t-spring) var(--ease),width var(--t-spring) var(--ease)}
.tour__panel{margin-top:calc(var(--u) * 4);scroll-margin-top:6rem}
.tour__cap{margin-top:calc(var(--u) * 3);color:var(--ink-2);max-width:var(--measure)}
/* the report: two sample pages side by side; click either to read it larger */
.pages{display:grid;gap:calc(var(--u) * 3);max-width:62.5rem}
@media (min-width:700px){ .pages{grid-template-columns:1fr 1fr;align-items:start} }
.rpage{position:relative;display:block;padding:0;border:1px solid var(--line);border-radius:var(--r-xs);background:var(--paper);box-shadow:var(--shadow-sm);cursor:zoom-in;
  transition:box-shadow var(--t-hover) var(--ease)}
.rpage img{width:100%;height:auto;border-radius:var(--r-xs)}
/* the report's outline: one line over each page */
.pages__col{display:grid;gap:calc(var(--u) * 1.5);align-content:start}
.outline{font-size:var(--fs-small);color:var(--ink-2);max-width:44ch}
@media (min-width:700px){ .outline{min-height:4.25rem} }
.outline b{display:block;font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.panel__title{font-size:var(--fs-h2);max-width:26ch}
.panel__sub{margin-top:calc(var(--u) * 1.5);font-size:var(--fs-lead);line-height:1.5;color:var(--ink-2);max-width:var(--measure)}
.panel__foot{margin-top:calc(var(--u) * 3);font-weight:600;color:var(--ink)}
/* my essays: the four prompts and their topics, nothing more */
.essays{list-style:none;margin:calc(var(--u) * 3) 0 0;padding:0;max-width:52rem;border-top:1px solid var(--line-strong)}
.essays li{display:grid;gap:.25rem;padding:calc(var(--u) * 2) 0;border-bottom:1px solid var(--line)}
@media (min-width:700px){ .essays li{grid-template-columns:11rem 1fr;align-items:baseline;gap:calc(var(--u) * 3)} }
.essays__q{font-size:var(--fs-small);font-weight:650;color:var(--accent)}
.essays b{font-weight:500;color:var(--ink);font-size:var(--fs-body);max-width:62ch}
/* the data, read for you: two native charts, built from real rows (UC Transfers by Major) */
.insights{display:grid;gap:calc(var(--u) * 2.5);margin-top:calc(var(--u) * 3.5)}
@media (min-width:1000px){ .insights{grid-template-columns:1fr 1fr;align-items:start} }
.insight{margin:0;display:grid;gap:calc(var(--u) * 2);padding:var(--pad-card);border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper);box-shadow:var(--shadow-sm)}
.insight__head{display:grid;gap:.25rem}
.insight__head p{font-size:var(--fs-small);color:var(--ink-2)}
.insight__take{font-weight:600;color:var(--ink)}
.insight__src{font-size:var(--fs-eyebrow);color:var(--ink-3)}
.insight__src span{display:block;margin-top:.25rem}
.bars__label sup,.range__label sup{font-size:.75em;margin-left:1px;color:var(--ink-3)}
/* bars: one row per major, the bar sweeping in from the baseline when the card comes into view */
.bars{list-style:none;margin:0;padding:0;display:grid;gap:calc(var(--u) * 1.5)}
.bars__row{display:grid;grid-template-columns:1fr auto;grid-template-areas:"label label" "track val";gap:.375rem calc(var(--u) * 1.5);align-items:center;transition:opacity var(--t-hover) var(--ease)}
@media (min-width:600px){ .bars__row{grid-template-columns:13rem 1fr 3.5rem;grid-template-areas:"label track val"} }
.bars__label{grid-area:label;font-size:var(--fs-small);color:var(--ink-2);line-height:1.3}
.bars__label b{color:var(--ink);font-weight:650}
.bars__track{grid-area:track;height:1.25rem;border-radius:0 4px 4px 0;box-shadow:inset 1px 0 0 var(--line-strong)}
.bars__fill{display:block;height:100%;width:calc(var(--v) * 100%);min-width:4px;border-radius:0 4px 4px 0;background:var(--ramp-2);transform-origin:left;
  transition:transform 900ms cubic-bezier(.22,1,.36,1)}
.bars__row:nth-child(1) .bars__fill{background:var(--ramp-4)}
.bars__row:nth-child(2) .bars__fill{background:var(--ramp-3)}
.bars__row:nth-child(3) .bars__fill{background:var(--ramp-2)}
.bars__row:nth-child(4) .bars__fill{background:var(--ramp-1)}
.bars__row:nth-child(2) .bars__fill{transition-delay:80ms}
.bars__row:nth-child(3) .bars__fill{transition-delay:160ms}
.bars__row:nth-child(4) .bars__fill{transition-delay:240ms}
.bars__val{grid-area:val;font-size:var(--fs-small);font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}
[data-chart].is-waiting .bars__fill{transform:scaleX(0)}
.bars:hover .bars__row:not(:hover),.range__rows:hover .range__row:not(:hover){opacity:.45}
/* where you stand: each major's middle 50% on one GPA axis (3.4 to 4.0), with a dashed marker where your number goes on the call */
.range{--cols:7.5rem 1fr;position:relative;display:grid;gap:.25rem}
@media (min-width:600px){ .range{--cols:12rem 1fr 5.5rem} }
.range__axis,.range__row,.range__marks{display:grid;grid-template-columns:var(--cols);column-gap:calc(var(--u) * 1.5)}
.range__axis{order:2;font-size:var(--fs-eyebrow);color:var(--ink-3);font-variant-numeric:tabular-nums}
.range__axis > span:last-child,.range__marks > span:last-child{display:none}
@media (min-width:600px){ .range__axis > span:last-child,.range__marks > span:last-child{display:block} }
.range__ticks{position:relative;height:1.25rem;border-top:1px solid var(--line-strong)}
.range__ticks i{position:absolute;top:.25rem;left:calc((var(--t) - 3.4) / .6 * 100%);translate:-50% 0;font-style:normal}
.range__ticks i:first-child{translate:0 0}.range__ticks i:last-child{translate:-100% 0}
.range__rows{list-style:none;margin:0;padding:0;display:grid}
.range__row{align-items:center;min-height:3.5rem;border-top:1px solid var(--line);transition:opacity var(--t-hover) var(--ease)}
.range__row:first-child{border-top:0}
.range__label{font-size:var(--fs-small);color:var(--ink-2);line-height:1.3}
.range__label b{display:block;color:var(--ink);font-weight:650}
.range__lv{display:block;font-variant-numeric:tabular-nums}
@media (min-width:600px){ .range__lv{display:none} }
.range__plot{position:relative;height:1.25rem}
.range__bar{position:absolute;top:0;bottom:0;left:calc((var(--lo) - 3.4) / .6 * 100%);right:calc((4 - var(--hi)) / .6 * 100%);border-radius:4px;background:var(--ramp-5);
  transform-origin:left;transition:transform 900ms cubic-bezier(.22,1,.36,1),opacity 400ms var(--ease)}
.range__row:nth-child(2) .range__bar{transition-delay:80ms}
.range__row:nth-child(3) .range__bar{transition-delay:160ms}
.range__row:nth-child(4) .range__bar{transition-delay:240ms}
.range__val{display:none;font-size:var(--fs-small);font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}
@media (min-width:600px){ .range__val{display:block} }
[data-chart].is-waiting .range__bar{transform:scaleX(0);opacity:0}
.range__marks{position:absolute;left:0;right:0;top:-1.75rem;bottom:1.5rem;pointer-events:none}
.range__lane{position:relative}
.mark{position:absolute;top:0;bottom:0;left:calc((var(--t) - 3.4) / .6 * 100%);border-left:2px solid var(--navy-900)}
.mark em{position:absolute;top:0;font-style:normal;font-size:var(--fs-eyebrow);font-weight:700;white-space:nowrap;color:var(--ink);line-height:1;padding:0 .375rem}
.mark--you{border-left:2px dashed var(--accent);transition:left 1100ms cubic-bezier(.22,1,.36,1) 500ms,opacity 300ms var(--ease) 500ms}
.mark--you em{left:0;color:var(--accent-ink)}
[data-chart].is-waiting .mark--you{left:0;opacity:0}
.range{margin-top:1.75rem}
.wyg-cta{margin-top:calc(var(--u) * 7);max-width:var(--measure)}
.lightbox{width:min(62.5rem,94vw);max-height:92vh;padding:0;border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper);box-shadow:var(--shadow-lg);overflow:hidden}
.lightbox::backdrop{background:rgba(10,17,40,.72)}
.lightbox__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--u);padding:calc(var(--u) * 1.5) calc(var(--u) * 2);border-bottom:1px solid var(--line)}
.lightbox__tools{display:flex;gap:var(--u);margin-left:auto}
.lightbox__bar .chip{white-space:nowrap;font-size:var(--fs-eyebrow)}
.lightbox__tools .btn{min-height:2.5rem;padding:.25rem .875rem;white-space:nowrap}
.lightbox[open]{display:flex;flex-direction:column}
.lightbox__body{flex:1;min-height:0;overflow:auto}
.lightbox__body img{width:100%;height:auto;cursor:zoom-in}
.lightbox.is-zoomed .lightbox__body img{width:200%;max-width:none;cursor:zoom-out}

/* ---------- plain-English definitions for TAG, Cal-GETC, ASSIST and PIQ ---------- */
.term{position:relative;display:inline}
.term__btn{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:help;border-bottom:1.5px solid var(--accent-soft);border-radius:0;line-height:inherit}
.term__btn:hover,.term__btn[aria-expanded="true"]{border-bottom-color:var(--accent)}
.term__def{position:absolute;left:0;top:calc(100% + 0.375rem);z-index:20;width:max-content;max-width:min(18.75rem,calc(100vw - 2rem));padding:0.625rem 0.75rem;
  background:var(--navy-900);box-shadow:var(--shadow-lg);color:#fff;font-size:var(--fs-small);font-weight:400;line-height:1.45;text-align:left;white-space:normal;
  letter-spacing:0;border-radius:var(--r-btn);display:none}
.term__def::before{content:"";position:absolute;top:-0.25rem;left:var(--arrow,0.875rem);width:0.5rem;height:0.5rem;transform:rotate(45deg);background:var(--navy-900)}
.term__btn:hover + .term__def,.term__btn:focus-visible + .term__def,.term__btn[aria-expanded="true"] + .term__def{display:block}

/* ---------- footer ---------- */
.foot{background:var(--navy-950);color:var(--on-dark-2);font-size:var(--fs-small);padding:calc(var(--u) * 6) 0 calc(var(--u) * 4)}
.foot a{color:var(--on-dark)}
.foot a:hover{color:var(--accent-on-dark)}
.foot .eyebrow{color:var(--accent-on-dark);margin-bottom:var(--u)}
.foot__main{display:grid;gap:calc(var(--u) * 4);padding-bottom:calc(var(--u) * 5);border-bottom:1px solid var(--line-dark)}
@media (min-width:600px){ .foot__main{grid-template-columns:1fr 1fr} .foot__brand{grid-column:1 / -1} }
@media (min-width:900px){ .foot__main{grid-template-columns:minmax(0,1fr) 11rem 15rem;align-items:start} .foot__brand{grid-column:auto} }
.foot__brand{display:grid;gap:calc(var(--u) * 1.5);max-width:36ch}
.foot__brand img{height:1.125rem;width:auto}
.foot__brand p{font-size:var(--fs-small);color:var(--on-dark-2)}
.foot__col .eyebrow{margin-bottom:calc(var(--u) * .5)}
.foot__links{list-style:none;margin:0;padding:0;display:grid;gap:0;font-size:var(--fs-small)}
.foot__links a{display:inline-flex;align-items:center;min-height:2.5rem;text-decoration:none}
.foot__links a:hover{text-decoration:underline}
.foot__fine{display:grid;gap:calc(var(--u) * 4);padding:calc(var(--u) * 4) 0;border-bottom:1px solid var(--line-dark);line-height:1.6}
@media (min-width:900px){ .foot__fine{grid-template-columns:1fr 1fr;gap:calc(var(--u) * 8)} }
.sources{margin:0;padding-left:1.2em;display:grid;gap:0.25rem}
.sources li:target{outline:1px solid var(--accent-on-dark);outline-offset:2px;border-radius:2px}
.sources a{overflow-wrap:anywhere}
.foot__base{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--u) calc(var(--u) * 3);padding-top:calc(var(--u) * 3);color:var(--on-dark-2)}
/* privacy and terms, beside the disclaimer */
.foot__legal{list-style:none;margin:0;padding:0;display:flex;gap:calc(var(--u) * 2.5)}
.foot__legal a{display:inline-flex;align-items:center;min-height:2.75rem}

/* the last thing on every page: the logo's curve, small, finishing in the dot */
.foot__end{display:inline-flex;align-items:center;gap:0.75rem}
.foot__curve{width:3rem;height:auto;overflow:visible}
.fc-flat{fill:none;stroke:var(--base-dark);stroke-width:10;stroke-linecap:round}
.fc-curve{fill:none;stroke:var(--accent-on-dark);stroke-width:18;stroke-linecap:round;stroke-dasharray:1 1}
.fc-dot{fill:var(--accent-on-dark);filter:var(--dot-glow);transform-box:fill-box;transform-origin:center}
.foot__curve.is-ready .fc-curve{stroke-dashoffset:1}
.foot__curve.is-ready .fc-dot{transform:scale(0)}
.foot__curve.is-drawn .fc-curve{stroke-dashoffset:0;transition:stroke-dashoffset 800ms var(--ease) 150ms}
.foot__curve.is-drawn .fc-dot{transform:scale(1);transition:transform var(--t-spring) var(--ease) 900ms}

/* ---------- phones: a slim booking bar once the page's first booking button has scrolled away ---------- */
/* site.js adds it on every page and shows it between that button and the page's closing call to action */
.bookbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u) * 2);
  padding:0.625rem max(var(--gutter),env(safe-area-inset-right)) calc(0.625rem + env(safe-area-inset-bottom)) max(var(--gutter),env(safe-area-inset-left));
  background:var(--paper);border-top:1px solid var(--line);transform:translateY(110%);visibility:hidden;
  transition:transform 240ms var(--ease),visibility 0s 240ms}
.bookbar.is-on{transform:none;visibility:visible;transition:transform 240ms var(--ease),visibility 0s}
.bookbar p{font-size:var(--fs-small);line-height:1.35;color:var(--ink-2)}
.bookbar p b{display:block;color:var(--ink);font-weight:650}
.bookbar .btn{flex:none;min-height:2.75rem;padding:0.625rem 1.125rem;font-size:var(--fs-small)}
@media (min-width:768px){ .bookbar{display:none} }
/* with the bar up, the nav's own button steps aside so one booking button is on screen */
@media (max-width:767px){ body.has-bookbar .nav__cta{opacity:0;pointer-events:none} }

/* ---------- privacy and terms (drafts) ---------- */
.draft{max-width:var(--measure);margin-bottom:calc(var(--u) * 4);padding:calc(var(--u) * 1.5) calc(var(--u) * 2);border:1px solid var(--line-strong);border-left:3px solid var(--accent);border-radius:var(--r-xs);background:var(--surface);font-size:var(--fs-small);color:var(--ink-2)}
.draft b{color:var(--ink)}
.legal__body{max-width:var(--measure);margin-top:calc(var(--u) * 5)}
.legal__body h2{font-size:var(--fs-h3);margin-top:calc(var(--u) * 4)}
.legal__body h2:first-child{margin-top:0}
.legal__body p,.legal__body ul{margin-top:calc(var(--u) * 1.25)}
.legal__body ul{padding-left:1.25em}
.legal__body li + li{margin-top:.25rem}
.legal__body b{color:var(--ink);font-weight:650}
.confirm{background:#FEF3C7;color:#78350F;padding:0 .2em;border-radius:3px;font-weight:600;font-size:.92em}
.nf__fine a{color:var(--on-dark)}

/* ---------- 404: the path that dipped and kept going ---------- */
.nf{min-height:100vh;min-height:100dvh;background:var(--navy-900);color:var(--on-dark-2)}
.nf__main{min-height:100vh;min-height:100dvh;display:grid;place-content:center;justify-items:center;gap:calc(var(--u) * 4);
  padding:calc(var(--u) * 12) var(--gutter);text-align:center}
.nf__logo{position:absolute;top:calc(var(--u) * 3);left:var(--gutter);padding:0.75rem 0}
.nf__logo img{height:1.25rem;width:auto}
.nf__art{width:min(40rem,100%);height:auto;overflow:visible}
.nf__flat{fill:none;stroke:var(--base-dark);stroke-width:6;stroke-linecap:round}
.nf__flatend{fill:var(--navy-900);stroke:var(--base-dark);stroke-width:2}
.nf__curve{fill:none;stroke:var(--accent-on-dark);stroke-width:10;stroke-linecap:round;stroke-dasharray:1 1;animation:nf-draw 1400ms var(--ease) 200ms both}
.nf__start{fill:var(--navy-900);stroke:#fff;stroke-width:2.5}
@keyframes nf-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.nf h1{color:var(--on-dark);max-width:16ch}
.nf__fine{position:absolute;left:0;right:0;bottom:calc(var(--u) * 3);padding:0 var(--gutter);font-size:var(--fs-small);color:var(--on-dark-2)}

/* ---------- motion: things below the fold rise 12px once as they arrive; none with reduced motion ---------- */
.rv{opacity:0;translate:0 0.75rem}
.rv.is-in{opacity:1;translate:0 0;transition:opacity 480ms var(--ease),translate 480ms var(--ease);transition-delay:var(--rv-delay,0ms)}

/* moving between pages, the nav holds still while the content crossfades (browsers without it simply load the page) */
@view-transition{navigation:auto}
.nav__in{view-transition-name:site-nav}
::view-transition-group(site-nav){animation:none}
::view-transition-old(site-nav){display:none}
::view-transition-new(site-nav){animation:none}
::view-transition-old(root){animation:vt-out 140ms var(--ease) both}
::view-transition-new(root){animation:vt-in 220ms var(--ease) 40ms both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}
}