/* Both faces are self hosted rather than linked from Google. Linking made the
   browser open a connection to a third party and wait on it before any text
   could paint, and sent every visitor's IP address to Google before this site
   had asked them for anything. These are the same files Google serves, latin
   subset, variable weight, under the SIL Open Font License. */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:500 700;
  font-display:swap;src:url(fonts/playfair-latin-var.woff2) format('woff2')}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:500 600;
  font-display:swap;src:url(fonts/playfair-italic-latin-var.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;
  font-display:swap;src:url(fonts/inter-latin-var.woff2) format('woff2')}

/* ============================================================
   FUNCTIONAL SKIN ACADEMY
   Brand: #394352 slate  /  #F6F5F4 paper
   Display type is Playfair Display, a didone like the logo but with
   sturdier strokes. Body type is Inter for its large x-height.
   ============================================================ */
:root{
  --ink:#394352;
  --paper:#F6F5F4;
  /* Body and small text sit on a pale ground, so these carry the readability.
     At .7 and .48 they measured 3.97:1 and 2.39:1 against the background,
     under the 4.5:1 needed to read comfortably. Now 6.3:1 and 4.9:1. */
  --ink-2:rgba(57,67,82,.88);
  --ink-3:rgba(57,67,82,.78);
  --mid:#5A6577;
  --soft:#A8B2C0;
  --sand:#E2D8CB;
  --mist:#DDE3EA;
  --shell:#EDE7E0;
  --glass:linear-gradient(150deg,rgba(255,255,255,.72),rgba(255,255,255,.3));
  --glass-b:1px solid rgba(255,255,255,.85);
  --glass-s:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.45),0 24px 56px -28px rgba(57,67,82,.5);
  --r-lg:28px; --r-md:20px; --r-sm:14px;
  --pad:clamp(20px,5vw,28px);
  --logo:url("logo.png");
  --ico-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='15' rx='2.5'/%3E%3Ccircle cx='8.6' cy='10' r='1.9'/%3E%3Cpath d='M21.5 15.5l-5-5-9 9'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--paper);
  overflow-x:hidden;line-height:1.55;-webkit-font-smoothing:antialiased}
body::before{content:'';position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(66% 50% at 8% 3%,#E4EAF0 0%,rgba(228,234,240,0) 62%),
    radial-gradient(56% 44% at 92% 9%,#EFE8DF 0%,rgba(239,232,223,0) 64%),
    radial-gradient(70% 54% at 52% 97%,#E1E6EC 0%,rgba(225,230,236,0) 62%),
    linear-gradient(180deg,#F8F7F6,#E9EAEC)}
body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.42;
  background-image:radial-gradient(rgba(57,67,82,.06) 1px,transparent 1px);background-size:3px 3px}
::selection{background:var(--sand);color:var(--ink)}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:12px;top:-60px;z-index:200;padding:12px 20px;border-radius:100px;
  background:var(--ink);color:var(--paper);font-size:13px;font-weight:700;text-decoration:none;
  transition:top .2s}
.skip:focus{top:12px}

.wrap{width:min(1180px,100% - 36px);margin-inline:auto}
.narrow{width:min(760px,100% - 36px);margin-inline:auto}
section{position:relative}

/* ---------- logo ---------- */
.logo{display:block;background-color:var(--ink);aspect-ratio:700/327;width:158px;
  -webkit-mask:var(--logo) no-repeat center/contain;mask:var(--logo) no-repeat center/contain}
.logo.pale{background-color:var(--paper)}
/* The sticky bar rides with you down the page, so the mark sits smaller
   there than it does in the footer and the closing panel. */
.nav .logo{width:100px}

/* ---------- type ---------- */
h1,h2,h3,.display{font-family:'Playfair Display',Georgia,serif;font-weight:600;
  letter-spacing:-.012em;line-height:1.14;font-optical-sizing:auto}
h2{font-size:clamp(26px,5.4vw,42px)}
h3{font-size:clamp(19px,3.6vw,26px);line-height:1.2}
em{font-style:italic;color:var(--mid);font-weight:inherit}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.15em;
  font-weight:600;color:var(--ink-2);padding:9px 16px;border-radius:100px;
  background:rgba(255,255,255,.5);border:var(--glass-b);backdrop-filter:blur(16px) saturate(170%);
  -webkit-backdrop-filter:blur(16px) saturate(170%);box-shadow:inset 0 1px 0 rgba(255,255,255,.95)}
.eyebrow i{width:5px;height:5px;border-radius:50%;background:var(--mid);flex:0 0 5px}
.lede{font-size:clamp(16px,3.8vw,18.5px);line-height:1.7;color:var(--ink-2);font-weight:450}

/* ---------- glass ---------- */
.glass{background:var(--glass);backdrop-filter:blur(24px) saturate(175%);
  -webkit-backdrop-filter:blur(24px) saturate(175%);border:var(--glass-b);box-shadow:var(--glass-s)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;border:none;
  text-decoration:none;font-family:inherit;font-size:15px;font-weight:700;
  padding:17px 28px;border-radius:100px;transition:transform .28s cubic-bezier(.16,1,.3,1),box-shadow .28s,background .28s}
.btn-solid{background:linear-gradient(155deg,#48546A,#333C4A);color:var(--paper);
  box-shadow:0 18px 40px -16px rgba(57,67,82,.7),inset 0 1px 0 rgba(255,255,255,.2)}
.btn-solid:hover{transform:translateY(-2px);box-shadow:0 26px 52px -18px rgba(57,67,82,.8),inset 0 1px 0 rgba(255,255,255,.26)}
.btn-ghost{background:rgba(255,255,255,.55);color:var(--ink);border:var(--glass-b);
  backdrop-filter:blur(18px) saturate(175%);-webkit-backdrop-filter:blur(18px) saturate(175%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 10px 28px -14px rgba(57,67,82,.45)}
.btn-ghost:hover{background:rgba(255,255,255,.85);transform:translateY(-2px)}
.btn-pale{background:var(--paper);color:var(--ink);box-shadow:0 18px 40px -18px rgba(0,0,0,.5)}
.btn-pale:hover{transform:translateY(-2px)}
.btn-sm{padding:10px 18px;font-size:13px}

/* ---------- announce + nav ---------- */
.announce{text-align:center;font-size:12px;font-weight:600;letter-spacing:.05em;padding:11px 18px;
  background:var(--ink);color:var(--paper)}
.announce b{font-weight:800}
.nav{position:sticky;top:0;z-index:80;padding:8px 0}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:7px 8px 7px 18px;border-radius:100px;
  background:linear-gradient(150deg,rgba(255,255,255,.78),rgba(255,255,255,.44));
  backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%);
  border:var(--glass-b);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 14px 34px -22px rgba(57,67,82,.55)}
.nav-links{display:none;gap:28px;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.nav-links a{text-decoration:none}
.nav-links a:hover{color:var(--ink)}

/* ---------- hero ---------- */
.hero{padding:44px 0 0;text-align:center}
/* Sized for a headline of this length: about 35 characters a line, so it
   settles on three lines wide and four on a phone. */
.hl{font-family:'Playfair Display',Georgia,serif;font-weight:600;margin:28px auto 0;
  font-size:clamp(32px,7.4vw,60px);line-height:1.15;letter-spacing:-.022em;max-width:15em}
.hero .lede{margin:24px auto 0;max-width:36em}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;justify-content:center}
.microcopy{margin-top:16px;font-size:13.5px;color:var(--ink-3);font-weight:600}

.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:52px}
.stat{border-radius:var(--r-md);padding:24px 20px;text-align:left}
.stat b{display:block;font-family:'Playfair Display',serif;font-weight:600;
  font-size:clamp(28px,7vw,42px);letter-spacing:-.02em;line-height:1}
.stat span{display:block;font-size:13px;line-height:1.5;color:var(--ink-3);margin-top:9px;font-weight:600}

/* ---------- marquee ---------- */
/* Mobile first, and deliberately not an animation. A touch screen has no
   hover, so the drifting version could never be paused there and the only
   real proof on this page lives inside these rows. Below the desktop
   breakpoint they are ordinary scrollers the reader drives. */
.marquee{position:relative;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-padding-inline:18px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.marquee::-webkit-scrollbar{display:none}
.marquee:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:var(--r-md)}
.mq-track{display:flex;align-items:flex-start;gap:14px;width:max-content;padding-inline:18px}
.mq-track>*{scroll-snap-align:start}
/* Every row rolls, on every device, and anything the reader does stops it:
   hover, tap, or keyboard focus. A tap also hands the row back as an ordinary
   scroller, so stopping it is not a dead end, you can then browse it at your
   own pace. Tap again to set it going.

   The touch case is the one that matters. A phone cannot hover, so before
   this the rows either drifted unstoppably or did not drift at all. This is
   the third option and the reason it is safe to roll them everywhere.

   .read rows are message screenshots rather than pictures. They roll at half
   speed, because a sentence takes longer to take in than a photograph. */
@media (prefers-reduced-motion:no-preference){
  .marquee{overflow:hidden;scroll-snap-type:none;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .mq-track{padding-inline:0;animation:slide 48s linear infinite}
  .marquee.read .mq-track{animation-duration:96s}
  .marquee:hover .mq-track,
  .marquee:focus-within .mq-track,
  .marquee.paused .mq-track{animation-play-state:paused}
  .marquee.paused{overflow-x:auto;scroll-snap-type:x mandatory}
}
.marquee{cursor:pointer}
.marquee.paused{cursor:default}
@keyframes slide{to{transform:translateX(-50%)}}

/* Faye, 24 Aug: the two rows of message screenshots do not roll at all. They
   are the rows you read rather than glance at, and a moving row of sentences
   is a row nobody finishes. Static, but still a scroller you drive yourself,
   which also closes the gap on a phone where the drifting track started off
   screen and the section opened blank. */
.marquee.read{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;cursor:default;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.marquee.read .mq-track{animation:none;padding-inline:18px}

/* Fixed height, natural width: the proof row mixes 16:9 clinic photography,
   a near square before and after, and wide chat screenshots. Forcing them all
   into one portrait box cropped the widest ones down to a fragment. */
.shot{flex:0 0 auto;height:clamp(210px,50vw,300px);border-radius:var(--r-md);overflow:hidden;position:relative;
  background:linear-gradient(150deg,var(--shell),var(--mist));border:var(--glass-b);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 20px 42px -26px rgba(57,67,82,.55)}
.shot img{height:100%;width:auto;max-width:none;object-fit:cover}
.shot .tag{position:absolute;left:12px;bottom:12px;font-size:11.5px;font-weight:700;letter-spacing:.08em;
  padding:7px 12px;border-radius:100px;color:var(--ink);
  background:rgba(255,255,255,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.9)}
/* Paige's before and after is the one stacked pair in the row, so a credit
   sitting at the bottom lands squarely on the after shot, which is the half
   that matters. Hers rides at the top instead. */
.shot .tag.top{top:12px;bottom:auto}

/* ---------- image placeholders ---------- */
/* Faye's own photographs and the stock shots were pulled out, so these stand
   in until she supplies replacements. Each one names the picture it wants.
   To fill one, swap the div back to a real image tag and drop the ph class. */
.ph{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(150deg,var(--shell),var(--mist))}
.ph::before{content:'';position:absolute;inset:10px;border-radius:12px;
  border:1.5px dashed rgba(57,67,82,.3);pointer-events:none}
.ph i{width:26px;height:26px;margin-bottom:11px;background:var(--ink-3);opacity:.8;flex:0 0 auto;
  -webkit-mask:var(--ico-img) no-repeat center/contain;mask:var(--ico-img) no-repeat center/contain}
.ph span{font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);text-align:center;line-height:1.55;padding:0 22px}
.ph span b{display:block;margin-top:6px;font-size:12.5px;font-weight:600;
  letter-spacing:.01em;text-transform:none;color:var(--ink-2)}
/* No image to set the width, so the shape comes from the ratio instead. */
.shot.ph{aspect-ratio:16/9}
/* Message screenshots are read, not glanced at. Sizing them by height like a
   photograph blew the short wide ones up past 200%, which is both blurry and
   two screens wide for one sentence. These cap on both axes instead and are
   never upscaled, so each one lands at whatever size keeps its own text
   legible, whatever shape it arrived in. */
.shot.msg{height:auto;width:auto;max-width:min(620px,88vw);min-width:min(320px,80vw)}
/* The min width is what stops the row opening blank, which is the other half
   of Faye's note. These cards size themselves from the image, so before a
   lazily loaded screenshot arrives there is no width to size from and the
   whole row collapses to a hairline. The floor is below every one of these
   images at every breakpoint, so it only ever shapes the empty state. */
.shot.msg img{width:auto;height:auto;max-width:100%;max-height:min(420px,64vh);object-fit:contain}
.shot.ph.msg{width:min(420px,88vw);height:clamp(200px,52vw,260px)}

/* ---------- sections ---------- */
.sec{padding:clamp(76px,13vw,130px) 0 0}
/* The line length has to be measured against the heading's own size. Sitting
   on this container as ch, it resolved against 16px body text and squeezed
   52px headings into a 242px ribbon, ten lines deep. Two sections carried an
   inline max-width:none to escape it; the rest did not. */
.sec-head{max-width:none}
.sec-head h2{margin-top:22px;max-width:15em}
.sec-head h2:first-child{margin-top:0}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center h2{margin-inline:auto}
.sec-head .lede{margin-top:18px;max-width:46ch}
.sec-head.center .lede{margin-inline:auto}

.probs{display:grid;gap:16px;margin-top:40px;grid-template-columns:1fr}
.prob{border-radius:var(--r-lg);padding:var(--pad)}
.prob .k{font-size:12px;letter-spacing:.14em;font-weight:700;color:var(--ink-3)}
.prob h3{margin-top:14px}
.prob p{margin-top:12px;font-size:16px;line-height:1.7;color:var(--ink-2)}

.pull{margin-top:44px;border-radius:var(--r-lg);padding:clamp(32px,7vw,56px) var(--pad);text-align:center}
.pull p{font-family:'Playfair Display',serif;font-style:italic;font-weight:500;font-size:clamp(20px,5vw,33px);
  line-height:1.3;letter-spacing:-.012em}
.pull cite{display:block;margin-top:20px;font-style:normal;font-size:12px;letter-spacing:.12em;
  font-weight:700;color:var(--ink-3)}

/* ---------- framework ---------- */
.fw{display:grid;gap:44px;margin-top:44px;grid-template-columns:1fr;align-items:start}
/* Tilting the stack throws its top corner about 70px above its own layout
   box, which had it climbing into the paragraph above. The margin on
   .stack-inner buys that back. */
.stack{position:relative;perspective:1500px;min-height:470px;display:flex;justify-content:center}
.stack-inner{position:relative;transform-style:preserve-3d;transform:rotateX(50deg) rotateZ(-26deg);
  width:min(300px,70vw);height:280px;margin-top:84px}
/* Each layer opens its own module, so the diagram is the navigation rather
   than a second copy of the list beside it. --z carries the depth so hover
   can add to it instead of overwriting the transform. */
.layer{position:absolute;left:0;top:0;width:100%;height:104px;border-radius:20px;padding:0 20px;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left;
  font:inherit;color:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;
  transform:translateZ(var(--z));
  background:linear-gradient(140deg,rgba(255,255,255,.86),rgba(255,255,255,.42) 55%,rgba(255,255,255,.68));
  backdrop-filter:blur(8px) saturate(180%);-webkit-backdrop-filter:blur(8px) saturate(180%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.98),0 20px 34px -22px rgba(57,67,82,.6);
  transition:transform .55s cubic-bezier(.16,1,.3,1),box-shadow .35s,background .35s}
.layer:hover{transform:translateZ(calc(var(--z) + 18px))}
.layer:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.layer[aria-expanded="true"]{
  background:linear-gradient(140deg,rgba(255,255,255,.99),rgba(255,255,255,.74) 55%,rgba(255,255,255,.92));
  box-shadow:inset 0 1px 0 #fff,0 26px 44px -20px rgba(57,67,82,.8)}
.layer[aria-expanded="true"] .lx{color:var(--ink)}
.layer .ln{font-size:15.5px;font-weight:700}
.layer .ld{font-size:11.5px;color:var(--ink-3);margin-top:4px;font-weight:600}
.layer .lx{position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:11px;font-weight:700;
  letter-spacing:.1em;color:var(--ink-3)}
.stack-cap{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:13px;letter-spacing:.1em;
  font-weight:600;color:var(--ink-3)}

.mods{display:grid;gap:10px}
details.mod{border-radius:var(--r-md);overflow:hidden;
  background:linear-gradient(150deg,rgba(255,255,255,.66),rgba(255,255,255,.28));
  backdrop-filter:blur(22px) saturate(175%);-webkit-backdrop-filter:blur(22px) saturate(175%);
  border:var(--glass-b);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 16px 38px -28px rgba(57,67,82,.55)}
details.mod summary{list-style:none;cursor:pointer;padding:20px 22px;display:flex;align-items:center;gap:16px}
details.mod summary::-webkit-details-marker{display:none}
.mod .num{font-family:'Playfair Display',serif;font-size:13.5px;font-weight:600;color:var(--mid);flex:0 0 auto;
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.95)}
.mod .t{flex:1}
.mod .t b{display:block;font-size:16px;font-weight:700}
.mod .t span{display:block;font-size:13.5px;color:var(--ink-3);margin-top:3px;font-weight:600}
.mod .chev{width:11px;height:11px;border-right:2px solid rgba(57,67,82,.62);border-bottom:2px solid rgba(57,67,82,.62);
  transform:rotate(45deg);transition:transform .3s;flex:0 0 auto;margin-right:4px}
details.mod[open] .chev{transform:rotate(225deg)}
.mod-body{padding:0 22px 22px 68px;font-size:15.5px;line-height:1.72;color:var(--ink-2);max-width:68ch}

/* ---------- timeline ---------- */
.tl{margin-top:52px;position:relative}
.tl::before{content:'';position:absolute;left:26px;top:12px;bottom:12px;width:2px;
  background:linear-gradient(180deg,var(--sand),var(--soft),var(--mist))}
.tl-item{position:relative;padding-left:70px;padding-bottom:32px}
.tl-item:last-child{padding-bottom:0}
.tl-dot{position:absolute;left:0;top:0;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  font-family:'Playfair Display',serif;font-size:17px;font-weight:600;
  background:linear-gradient(150deg,rgba(255,255,255,.92),rgba(255,255,255,.5));
  backdrop-filter:blur(18px) saturate(175%);-webkit-backdrop-filter:blur(18px) saturate(175%);
  border:var(--glass-b);box-shadow:inset 0 1px 0 rgba(255,255,255,.98),0 14px 28px -18px rgba(57,67,82,.55)}
.tl-card{border-radius:var(--r-md);padding:24px 22px}
.tl-card .when{font-size:12px;letter-spacing:.12em;font-weight:700;color:var(--mid)}
.tl-card h3{margin-top:10px;font-size:clamp(20px,4.4vw,26px)}
.tl-card p{margin-top:10px;font-size:16px;line-height:1.7;color:var(--ink-2)}
.tl-media{margin-top:16px;border-radius:var(--r-sm);overflow:hidden;aspect-ratio:16/9;
  background:linear-gradient(140deg,var(--shell),var(--mist))}
.tl-media img{width:100%;height:100%;object-fit:cover}

/* ---------- gallery ---------- */
.gal{margin-top:40px;display:grid;gap:14px}
.card{width:clamp(230px,62vw,300px);border-radius:var(--r-md);padding:20px;flex:0 0 auto;
  background:linear-gradient(150deg,rgba(255,255,255,.74),rgba(255,255,255,.34));
  backdrop-filter:blur(22px) saturate(175%);-webkit-backdrop-filter:blur(22px) saturate(175%);
  border:var(--glass-b);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 20px 44px -28px rgba(57,67,82,.5)}
.card .thumb{height:112px;border-radius:14px;margin-bottom:16px;position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,.9)}
.card .thumb::after{content:'';position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.5) 47%,transparent 58%)}
.card .thumb .doc{position:absolute;left:14px;right:14px;bottom:-6px;height:74px;border-radius:10px 10px 0 0;
  background:rgba(255,255,255,.74);border:1px solid rgba(255,255,255,.95);
  box-shadow:0 -6px 16px -10px rgba(57,67,82,.5);padding:12px}
.card .thumb .doc i{display:block;height:5px;border-radius:3px;background:rgba(57,67,82,.15);margin-bottom:7px}
.card .thumb .doc i:nth-child(1){width:60%}
.card .thumb .doc i:nth-child(2){width:88%}
.card .thumb .doc i:nth-child(3){width:76%}
.card .thumb .doc i:nth-child(4){width:44%;background:rgba(107,119,137,.4)}
.card h3{font-family:'Inter',system-ui,sans-serif;font-size:15px;font-weight:800;
  line-height:1.28;letter-spacing:0}
.card p{font-size:14px;line-height:1.6;color:var(--ink-3);margin-top:8px;font-weight:500}
.t-mist{background:linear-gradient(140deg,#DDE3EA,#E7EAEE)}
.t-shell{background:linear-gradient(140deg,#EDE7E0,#E5E7E6)}
.t-sand{background:linear-gradient(140deg,#E2D8CB,#EDE7E0)}
.t-slate{background:linear-gradient(140deg,#C9D2DC,#DDE3EA)}
/* ---------- fit ---------- */
.split{display:grid;gap:18px;margin-top:44px;grid-template-columns:1fr}
.panel{border-radius:var(--r-lg);padding:clamp(26px,5.4vw,40px)}
.panel p{margin-top:14px;font-size:16px;line-height:1.7;color:var(--ink-2);max-width:64ch}
.checks{list-style:none;margin-top:22px;display:grid;gap:13px}
.checks li{display:flex;gap:13px;font-size:16px;line-height:1.6;color:rgba(57,67,82,.9)}
.checks li::before{content:'';flex:0 0 17px;height:17px;margin-top:3px;border-radius:50%;
  background:linear-gradient(140deg,var(--soft),var(--ink));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
/* "This is for you if" is a set you check yourself against. "How enrolment
   works" is an order of events. They were wearing the same marker. */
.checks.steps{counter-reset:step}
.checks.steps li{counter-increment:step}
.checks.steps li::before{content:counter(step);flex:0 0 22px;height:22px;margin-top:0;
  display:grid;place-items:center;background:var(--ink);color:var(--paper);
  font-size:11.5px;font-weight:800;line-height:1;letter-spacing:0;box-shadow:none}

/* ---------- faye ---------- */
.faye{display:grid;gap:28px;margin-top:44px;grid-template-columns:1fr;align-items:center}
.faye-img{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;max-height:560px;
  background:linear-gradient(150deg,var(--shell),var(--mist));border:var(--glass-b);box-shadow:var(--glass-s)}
.faye-img img{width:100%;height:100%;object-fit:cover}
.faye-name{margin-top:14px;font-size:12px;letter-spacing:.12em;font-weight:700;
  text-transform:uppercase;color:var(--mid)}
.faye-copy p{margin-top:16px;font-size:16.5px;line-height:1.76;color:var(--ink-2);max-width:66ch}
.faye-copy p strong{color:var(--ink);font-weight:700}

/* ---------- faq ---------- */
.faq{margin-top:38px;display:grid;gap:9px}
details.q{border-radius:var(--r-sm);overflow:hidden;
  background:linear-gradient(150deg,rgba(255,255,255,.64),rgba(255,255,255,.26));
  backdrop-filter:blur(20px) saturate(175%);-webkit-backdrop-filter:blur(20px) saturate(175%);
  border:var(--glass-b);box-shadow:inset 0 1px 0 rgba(255,255,255,.95)}
details.q summary{list-style:none;cursor:pointer;padding:19px 22px;display:flex;align-items:center;gap:14px;
  font-size:15px;font-weight:700}
details.q summary::-webkit-details-marker{display:none}
details.q .chev{width:10px;height:10px;border-right:2px solid rgba(57,67,82,.62);border-bottom:2px solid rgba(57,67,82,.62);
  transform:rotate(45deg);transition:transform .3s;flex:0 0 auto;margin-left:auto}
details.q[open] .chev{transform:rotate(225deg)}
details.q .a{padding:0 22px 20px;font-size:16px;line-height:1.72;color:var(--ink-2);max-width:70ch}

/* ---------- final + footer ---------- */
.final{margin-top:clamp(76px,13vw,130px);border-radius:var(--r-lg);text-align:center;
  padding:clamp(44px,8vw,78px) var(--pad);background:linear-gradient(160deg,#414D60,#333C4A);color:var(--paper);
  box-shadow:0 40px 90px -40px rgba(57,67,82,.9)}
.final .eyebrow{background:rgba(246,245,244,.12);border:1px solid rgba(246,245,244,.24);color:rgba(246,245,244,.85);
  box-shadow:none}
.final .eyebrow i{background:var(--sand)}
.final h2{margin-top:22px;max-width:17ch;margin-inline:auto}
.final h2 em{color:var(--sand)}
.final .lede{margin:18px auto 0;max-width:46ch;color:rgba(246,245,244,.72)}
.final .microcopy{color:rgba(246,245,244,.72)}
.final .logo{margin:0 auto 6px}
.foot{padding:56px 0 64px;text-align:center;font-size:13.5px;color:var(--ink-3);line-height:1.9;font-weight:500}
.foot a{font-weight:700;color:var(--ink);text-decoration:none}
.foot .logo{margin:0 auto 18px;width:132px;opacity:.85}

/* ---------- responsive ---------- */
@media(min-width:720px){
  .stats{grid-template-columns:repeat(4,1fr)}
  .probs{grid-template-columns:repeat(3,1fr)}
  .split{grid-template-columns:1.05fr .95fr}
}
@media(min-width:960px){
  .nav-links{display:flex}
  .logo{width:178px}
  .nav .logo{width:102px}
  .fw{grid-template-columns:.85fr 1.15fr;gap:56px}
  .stack-inner{width:320px;margin-top:78px}
  .faye{grid-template-columns:.82fr 1.18fr;gap:52px}
  .tl::before{left:50%;transform:translateX(-1px)}
  .tl-item{padding-left:0;width:50%;padding-right:52px;text-align:right;padding-bottom:44px}
  .tl-item:nth-child(even){margin-left:50%;padding-right:0;padding-left:52px;text-align:left}
  .tl-dot{left:auto;right:-27px;top:14px}
  .tl-item:nth-child(even) .tl-dot{left:-27px;right:auto}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}