/* ═══════════════════════════════════════════════════════════════════════════
   GeneralPractice.AI — the new site's additions (16 Oct 2026), on top of the
   design system in style.<hash>.css: the 3D story, the sector chooser, the
   patient-app phone, the clinic-room and Discover bands, the header's extra
   links and the footer's columns. Same tokens, same type, both themes, UK/AU.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{--navh:60.5px;--sat:env(safe-area-inset-top,0px);--a-yng:#4D7C0F}
/* Young adults' colour (16 Oct 2026), beside the other audiences' in style.css */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--a-yng:#A6D65A}}
:root[data-theme="dark"]{--a-yng:#A6D65A}
@media (max-width:640px){:root{--navh:51.75px}}

/* ── header: the clinicians' menu holds six extra links now ── */
.nav-links .dd-more{flex-wrap:wrap;row-gap:2px}
.nav-links .dd-more a{padding:6px 8px}
/* "For individuals" is a menu too now (My Lifestyle Hub, Young adults): its own colour when you're on one of them */
.nav-you-dd .nav-ddb.nav-you{color:var(--ink)}
.nav-ddp.nav-ddp-you{width:360px}

/* ── footer, in columns ── */
.foot-x{padding-block:44px 44px}
.foot-cols{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:28px 32px;align-items:start}
.foot-brand .brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.foot-brand .brand b{font-weight:600;font-size:15px;letter-spacing:-.01em}
.foot-brand p{margin:12px 0 0;max-width:34ch;font-size:13px;line-height:1.6;color:var(--ink-2)}
.foot-mail{display:inline-block;margin-top:10px;font-size:13px;color:var(--accent-ink);text-decoration:none}
.foot-mail:hover{text-decoration:underline}
.foot-col{display:flex;flex-direction:column;gap:9px;min-width:0}
.foot-h{margin:0 0 3px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.foot-col a{font-size:13px;color:var(--ink-2);text-decoration:none;width:fit-content}
.foot-col a:hover{color:var(--ink)}
.foot-cols{padding-bottom:30px;border-bottom:1px solid var(--line)}
.foot-x .foot-legal:first-of-type{margin-top:22px}
@media (max-width:900px){.foot-cols{grid-template-columns:repeat(3,minmax(0,1fr))}.foot-brand{grid-column:1/-1}}
@media (max-width:560px){.foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-col:last-child{grid-column:auto}}

/* ═══ the story ═══
   A stage that stays put under the header while the steps scroll over it. It follows the site's theme (17 Oct 2026:
   light, the site's default, or dark when chosen; the 3D rooms are daylit, and an evening in the dark theme). On the
   sector pages the steps' words sit on a glass card, light or dark with the theme; on the home page (.story-open) they
   sit straight on the room, over a soft wash of the page's own colour on their side, and take the dark theme's colours
   while the room's lights are down for the body systems (.is-dim, from story.js). The 3D module frames its scene to
   the right of words that start at clamp(20px, 6vw, 96px) and are 540px wide (440px at 1100px and under), or above
   words covering the lower 40% on a phone (and on an upright tablet, data-c3d-layout="stacked"). */
.story{--stage-h:calc(100vh - var(--navh) - var(--sat));position:relative;isolation:isolate;background:var(--canvas);color:var(--ink)}
@supports (height:100svh){.story{--stage-h:calc(100svh - var(--navh) - var(--sat))}}
/* the room gone dark, on the light theme: the dark theme's tokens, for the words over it */
.story.is-dim{--canvas:#121115;--surface:#1A191E;--surface-2:#222127;--surface-3:#2A2930;--ink:#F1EFF4;--ink-2:#CFCBD8;--muted:#9A96A6;
  --line:#2F2D36;--line-2:#46444E;--accent:#9D95E6;--accent-ink:#B4ADF0;--accent-wash:#26243A;--good:#6DBF97;--chronic:#ff7d9c;color-scheme:dark}
.story-stage{position:sticky;top:calc(var(--navh) + var(--sat));height:var(--stage-h);overflow:hidden;z-index:0;
  background:radial-gradient(90% 70% at 66% 44%,#fbfaf8 0%,#eeece8 60%,#e3e0da 100%)}
:root[data-theme="dark"] .story-stage{background:radial-gradient(90% 70% at 68% 42%,#1f1d2a 0%,#141319 55%,#0e0d13 100%)}
.story-poster,.story-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.story-poster{object-fit:cover;object-position:62% 50%;opacity:0;transition:opacity .55s ease;transform:scale(var(--pz,1));transform-origin:64% 58%}
.story-poster.on{opacity:1}
/* the story in the app's own pictures (My Lifestyle Hub): captured twice as wide as they are tall, the room in their
   middle, so on a computer they sit to the left and the room lands right of the words */
.story.is-stills .story-poster{object-position:0% 50%;transform-origin:62% 55%}
@media (max-width:759.98px),(min-width:760px) and (max-width:1000px) and (orientation:portrait){.story.is-stills .story-poster{object-position:50% 0%;transform-origin:50% 30%}
  .story.is-stills .story-poster.lift{transform:translateY(-13%) scale(var(--pz,1))}}
.story-poster.gone{visibility:hidden}
.story.is-stills .story-poster.on.under{opacity:0}
.story-canvas{opacity:0;transition:opacity .9s ease}
.story.is-live .story-canvas{opacity:1}
.story.is-live .story-poster{opacity:0!important;transition-delay:.4s}
/* a soft wash on the words' side, so they never fight a busy frame: the page's light colour, or a dark one (the dark
   theme, the room's lights down), crossfading */
.story-stage::before,.story-stage::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;transition:opacity .6s ease}
.story-stage::before{background:linear-gradient(90deg,rgba(246,245,242,.5) 0%,rgba(246,245,242,.22) 34%,rgba(246,245,242,0) 52%)}
.story-stage::after{opacity:0;background:linear-gradient(90deg,rgba(10,9,14,.42) 0%,rgba(10,9,14,.18) 34%,rgba(10,9,14,0) 52%)}
.story.is-dim .story-stage::before,:root[data-theme="dark"] .story-stage::before{opacity:0}
.story.is-dim .story-stage::after,:root[data-theme="dark"] .story-stage::after{opacity:1}
.story-open .story-stage::before{background:linear-gradient(90deg,rgba(246,245,242,.95) 0%,rgba(246,245,242,.86) 27%,rgba(246,245,242,.45) 45%,rgba(246,245,242,0) 60%)}
.story-open .story-stage::after{background:linear-gradient(90deg,rgba(12,11,17,.88) 0%,rgba(12,11,17,.72) 27%,rgba(12,11,17,.32) 45%,rgba(12,11,17,0) 60%)}
:where(.story-labels){position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}
:where(.story-labels)>span{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 9px;
  border-radius:999px;background:rgba(18,17,24,.76);border:1px solid rgba(246,245,242,.16);font:600 13px/1 var(--sans);
  color:#F1EFF4;white-space:nowrap;opacity:0;will-change:transform,opacity}
:where(.story-labels)>span i{width:9px;height:9px;border-radius:50%;display:block}
.story-load{position:absolute;z-index:3;left:clamp(16px,4vw,48px);bottom:20px;display:none;align-items:center;gap:12px;padding:8px 14px;
  border-radius:999px;background:color-mix(in srgb,var(--surface) 88%,transparent);border:1px solid var(--line-2);font:500 11.5px var(--mono);letter-spacing:.05em;color:var(--ink-2)}
html.has-3d:not(.failed) .story:not(.is-live) .story-load{display:inline-flex}
.story-load b{display:block;width:72px;height:3px;border-radius:3px;background:var(--line-2);overflow:hidden}
.story-load i{display:block;height:100%;width:8%;background:var(--accent);transition:width .25s ease}
.story-note{position:fixed;z-index:31;margin:0;right:clamp(16px,4vw,48px);bottom:18px;display:none;align-items:center;gap:10px;
  max-width:min(460px,calc(100% - 32px));padding:8px 9px 8px 14px;border-radius:14px;background:color-mix(in srgb,var(--surface) 90%,transparent);
  border:1px solid var(--line-2);font:500 12.5px/1.4 var(--sans);color:var(--ink-2);box-shadow:var(--shadow);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html.no-3d .story.in .story-note,html.failed .story.in .story-note{display:flex}
.story-note button{flex:none;font:600 12.5px var(--sans);color:var(--ink);background:var(--surface-2);border:1px solid var(--line-2);
  border-radius:999px;min-height:34px;padding:6px 12px;cursor:pointer}
.story-note button:hover{background:var(--surface-3)}
.story-note button[hidden]{display:none}

.story-steps{position:relative;z-index:2;margin-top:calc(-1 * var(--stage-h))}
.story-step{min-height:var(--stage-h);display:flex;align-items:center;padding:48px clamp(20px,6vw,96px)}
.story-card{position:relative;width:min(540px,100%);padding:clamp(22px,2.3vw,32px);border-radius:24px;
  background:rgba(255,255,255,.8);border:1px solid rgba(22,21,26,.08);
  box-shadow:0 1px 0 rgba(255,255,255,.85) inset,0 30px 80px -34px rgba(22,21,26,.34);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
  transition:opacity .45s ease,transform .45s var(--ease),background-color .45s ease,border-color .45s ease}
:root[data-theme="dark"] .story-card,.story.is-dim .story-card{background:rgba(14,13,20,.76);border-color:rgba(255,255,255,.1);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 30px 80px -34px rgba(0,0,0,.7)}
.story-step:not(.is-on) .story-card{opacity:.55}
@media (max-width:1100px){.story-card{width:min(440px,100%)}}
.story-card .eyebrow{color:var(--accent-ink);margin:0 0 12px;font-size:11px;line-height:1.4}
.story-card h1{font-size:clamp(34px,4.1vw,56px);line-height:1.03;letter-spacing:-.03em;max-width:none}
.story-card h2{font-size:clamp(27px,2.9vw,38px);line-height:1.08}
.story-card h1:focus,.story-card h2:focus{outline:none}
:where(.story-card) p{margin:14px 0 0;color:var(--ink-2);font-size:clamp(15px,1.12vw,16.5px);line-height:1.6;text-wrap:pretty}
:where(.story-card) p b,:where(.story-card) p strong{color:var(--ink);font-weight:500}
.story-card .short{display:none}
.story-card .hero-cta{margin-top:22px}
.story-small{margin:14px 0 0!important;font-family:var(--mono);font-size:11px!important;letter-spacing:.04em;color:var(--muted)!important;line-height:1.5!important}
.story-sample{margin:16px 0 0!important;padding-top:12px;border-top:1px solid var(--line);font-family:var(--mono);font-size:10.5px!important;letter-spacing:.05em;color:var(--muted)!important;line-height:1.5!important}
/* "not another dashboard": the line the sector pages share with the home page (a mark, then the words) */
.story-eco{display:flex;gap:10px;align-items:baseline;margin:14px 0 0!important;font-size:14px!important;line-height:1.5!important;color:var(--ink)!important}
.story-eco::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--accent);transform:translateY(-1px);box-shadow:0 0 0 4px var(--accent-wash)}
/* the home page: no card, the words on the room (larger, as a front page's) */
.story-open .story-card{width:min(560px,100%);padding:0;border-radius:0;background:none!important;border:0!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.story-open .story-step:not(.is-on) .story-card{opacity:.4}
:where(.story-open .story-card) :where(p,h1,h2,b,em,span,li,a,button){transition:color .45s ease,border-color .45s ease,background-color .45s ease}
.story-open .story-card h1{font-size:clamp(36px,3.7vw,54px);line-height:1.02;letter-spacing:-.035em}
.story-open .story-card h1 .h1b{display:block;color:var(--ink-2)}
.story-open .story-card h1 em.s{color:var(--accent-ink)}
.story-open .story-card h2{font-size:clamp(30px,3.2vw,44px)}
.story-open .story-eco{font-size:15px!important}
.story-mbs::before{background:#e8b83a!important;box-shadow:0 0 0 4px rgba(0,132,61,.22)!important}
.story-mbs a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.story-mbs-link{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media (max-width:1100px){.story-open .story-card{width:min(470px,100%)}}
/* the six sectors, from the first screen */
.story-jump{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line)}
.story-jump>p{margin:0 0 10px!important;font-family:var(--mono);font-size:10.5px!important;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)!important}
.story-jump ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.story-jump a{display:flex;align-items:center;gap:8px;min-height:36px;padding:3px 12px 3px 3px;white-space:nowrap;border-radius:999px;
  background:color-mix(in srgb,var(--surface) 74%,transparent);border:1px solid var(--line-2);color:var(--ink);text-decoration:none;font-size:13px;font-weight:500;
  transition:background .2s,border-color .2s,transform .2s var(--ease)}
.story-jump a:hover{background:var(--surface);border-color:var(--ag,var(--ink-2));transform:translateY(-1px)}
.story-jump img{width:28px;height:28px;border-radius:50%;object-fit:cover;background:color-mix(in srgb,var(--ag,#9D95E6) 40%,var(--surface-2))}
.story-open .story-jump ul{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1300px){.story-open .story-jump ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* the six pillars */
.story-plist{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 18px}
.story-plist li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.35;color:var(--ink-2)}
.story-plist li b{display:block;color:var(--ink);font-weight:600;font-size:14.5px}
.story-plist i{flex:none;width:11px;height:11px;border-radius:50%;margin-top:4px;background:var(--pc);box-shadow:0 0 12px var(--pc)}
.story-sys{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.story-sys button{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:9px 16px;border-radius:999px;border:1px solid var(--line-2);
  background:color-mix(in srgb,var(--surface) 60%,transparent);color:var(--ink);font:500 14px var(--sans);cursor:pointer}
.story-sys button i{width:10px;height:10px;border-radius:50%}
.story-sys button:hover{border-color:var(--ink-2)}
.story-sys button[aria-pressed="true"]{border-color:var(--ink);background:color-mix(in srgb,var(--ink) 12%,transparent)}
/* a patient's plans, as the 3D shows them */
.story-plans{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px}
.story-plans li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 11px;align-items:center;padding:10px 12px;border-radius:14px;
  background:color-mix(in srgb,var(--surface-2) 70%,transparent);border:1px solid var(--line)}
.story-plans li::before{content:"";grid-row:span 2;width:9px;height:9px;border-radius:50%;background:var(--fc);box-shadow:0 0 10px var(--fc)}
.story-plans b{font-weight:600;font-size:14.5px;color:var(--ink)}
.story-plans span{font-size:12.5px;color:var(--muted);font-family:var(--mono);letter-spacing:.02em}
.story-plans .wait{color:var(--chronic)}
.story-goals{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:7px}
.story-goals li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.45;color:var(--ink)}
.story-goals li::before{content:"\201C";position:absolute;left:2px;top:-3px;font-family:var(--serif);font-size:24px;line-height:1;color:var(--accent-ink)}
.story-tag{display:inline-flex;align-items:center;gap:7px;margin-top:16px;padding:6px 11px;border-radius:999px;font:500 11px var(--mono);letter-spacing:.06em;
  text-transform:uppercase;color:var(--chronic);background:color-mix(in srgb,var(--chronic) 10%,transparent);border:1px solid color-mix(in srgb,var(--chronic) 35%,transparent)}
.story-tag.ok{color:var(--good);background:color-mix(in srgb,var(--good) 10%,transparent);border-color:color-mix(in srgb,var(--good) 35%,transparent)}
.story-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}

/* the stepper: the steps as buttons, beside the stage while it's on screen */
.story-nav{position:fixed;z-index:30;right:clamp(8px,1.8vw,26px);top:calc(50% + var(--navh) / 2);transform:translateY(-50%);
  display:flex;flex-direction:column;gap:4px;opacity:0;pointer-events:none;transition:opacity .3s}
.story.in .story-nav{opacity:1;pointer-events:auto}
.story-nav button{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-height:40px;min-width:40px;padding:0 6px;border:0;background:none;
  cursor:pointer;color:var(--ink-2);font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.story-nav button span{opacity:0;transform:translateX(6px);transition:opacity .2s,transform .2s;background:var(--surface);border:1px solid var(--line-2);
  border-radius:999px;padding:5px 10px;white-space:nowrap;box-shadow:var(--shadow)}
.story-nav button:hover span,.story-nav button:focus-visible span{opacity:1;transform:none}
.story-nav button i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--ink-2);display:block;transition:background .2s,transform .2s,border-color .3s;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--canvas) 55%,transparent)}
.story-nav button[aria-current="step"]{color:var(--ink)}
.story-nav button[aria-current="step"] i{background:var(--ink);border-color:var(--ink);transform:scale(1.3)}

/* phones: the stage above, the words covering its lower part */
@media (max-width:759.98px){
  .story-poster{object-position:50% 0%;transform-origin:50% 32%}
  .story-stage::before{background:linear-gradient(0deg,rgba(246,245,242,.55) 0%,rgba(246,245,242,0) 45%)}
  .story-stage::after{background:linear-gradient(0deg,rgba(10,9,14,.5) 0%,rgba(10,9,14,0) 45%)}
  .story-open .story-stage::before{background:linear-gradient(0deg,rgba(246,245,242,.98) 0%,rgba(246,245,242,.92) 36%,rgba(246,245,242,.55) 52%,rgba(246,245,242,0) 66%)}
  .story-open .story-stage::after{background:linear-gradient(0deg,rgba(12,11,17,.94) 0%,rgba(12,11,17,.84) 36%,rgba(12,11,17,.44) 52%,rgba(12,11,17,0) 66%)}
  .story-step{align-items:flex-end;padding:24px 12px 12px}
  .story-open .story-step{padding:24px 18px 18px}
  .story-card{width:100%;padding:18px 18px 18px;border-radius:20px;background:rgba(255,255,255,.9)}
  :root[data-theme="dark"] .story-card,.story.is-dim .story-card{background:rgba(14,13,20,.82)}
  .story-step:not(.is-on) .story-card{opacity:.75}
  .story-card .long{display:none}
  .story-card .short{display:block}
  .story-card h1{font-size:clamp(28px,7.9vw,36px)}
  .story-open .story-card h1{font-size:clamp(31px,8.6vw,40px)}
  .story-card h2{font-size:clamp(25px,6.9vw,30px)}
  .story-card p{font-size:15px;margin-top:10px}
  .story-card .hero-cta{margin-top:16px;gap:8px}
  .story-card .hero-cta .btn{flex:1 1 auto;justify-content:center}
  .story-card .btn.lg{padding:11px 18px;font-size:15px}
  .story-small{display:none}
  .story-eco{font-size:13.5px!important;margin-top:10px!important}
  .story-plist{gap:7px 12px;margin-top:14px}
  .story-plist li span{display:none}
  .story-plans{margin-top:12px;gap:6px}
  .story-plans li{padding:8px 10px}
  .story-goals{margin-top:12px}
  .story-jump{margin-top:14px;padding-top:12px}
  .story-jump ul,.story-open .story-jump ul{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-18px;padding:0 28px 2px 18px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 30px),transparent)}
  .story-jump ul::-webkit-scrollbar{display:none}
  .story-jump li{flex:none}
  .story-card .hide-sm{display:none}
  .story-jump a{font-size:12.5px;min-height:32px;padding:2px 10px 2px 2px}
  .story-jump img{width:26px;height:26px}
  .story-nav{display:none}
  .story-note{left:12px;right:12px;bottom:auto;top:calc(var(--navh) + var(--sat) + 10px);max-width:none;font-size:12px;padding:6px 7px 6px 12px}
  .story-load{top:12px;bottom:auto;left:12px}
}
/* upright tablets: the same stacked layout, with more room */
@media (min-width:760px) and (max-width:1000px) and (orientation:portrait){
  .story-poster{object-position:50% 0%;transform-origin:50% 32%}
  .story-stage::before{background:linear-gradient(0deg,rgba(246,245,242,.55) 0%,rgba(246,245,242,0) 45%)}
  .story-stage::after{background:linear-gradient(0deg,rgba(10,9,14,.5) 0%,rgba(10,9,14,0) 45%)}
  .story-open .story-stage::before{background:linear-gradient(0deg,rgba(246,245,242,.97) 0%,rgba(246,245,242,.9) 34%,rgba(246,245,242,.5) 50%,rgba(246,245,242,0) 64%)}
  .story-open .story-stage::after{background:linear-gradient(0deg,rgba(12,11,17,.92) 0%,rgba(12,11,17,.82) 34%,rgba(12,11,17,.42) 50%,rgba(12,11,17,0) 64%)}
  .story-step{align-items:flex-end;padding:32px 32px 28px}
  .story-card{width:min(640px,100%)}
  .story-open .story-card{width:min(640px,100%)}
  .story-nav{display:none}
  .story-note{bottom:auto;top:calc(var(--navh) + var(--sat) + 12px)}
  .story-load{top:14px;bottom:auto}
}
/* short windows (a phone on its side): the short versions of the words */
@media (max-height:560px) and (min-width:760px){
  .story-card .long{display:none}
  .story-card .short{display:block}
  .story-step{padding-block:20px}
  .story-small,.story-jump,.story-eco{display:none}
}
html.reduce .story-poster,html.reduce .story-canvas,html.reduce .story-card{transition:none}

/* ═══ the selfie phone (story.js draws it over the stage, then flies it into the pad) ═══
   A phone of no particular make: a camera's view of their selfie clip (3:4), a shutter, then "Glossy you" making
   the figure. Sizes are shares of its width (--pw), so it scales as one piece; story.js places and moves it. */
.selfie{position:absolute;inset:0;z-index:1;pointer-events:none;--pw:240px;--sf-acc:#9D95E6}
.sf-phone{position:absolute;left:0;top:0;width:var(--pw);height:calc(var(--pw) * 2.1667);opacity:0;transform-origin:50% 50%;will-change:transform,opacity}
.sf-body{position:absolute;inset:0;border-radius:calc(var(--pw) * .16);padding:calc(var(--pw) * .032);
  background:linear-gradient(145deg,#4a4c53 0%,#1c1d21 34%,#121316 62%,#34363c 100%);
  box-shadow:0 40px 70px -28px rgba(0,0,0,.75),0 14px 28px -14px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.18)}
.sf-body::before,.sf-body::after{content:"";position:absolute;right:calc(var(--pw) * -.012);width:calc(var(--pw) * .016);border-radius:2px;background:#2a2b30}
.sf-body::before{top:24%;height:11%}
.sf-body::after{top:38%;height:7%}
.sf-screen{position:relative;width:100%;height:100%;border-radius:calc(var(--pw) * .13);overflow:hidden;background:#000;display:flex;flex-direction:column;isolation:isolate}
.sf-status{position:relative;height:10.5%;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 10% 0 11%;
  font:600 calc(var(--pw) * .052)/1 var(--sans);color:#fff;letter-spacing:.01em}
.sf-island{position:absolute;left:50%;top:22%;width:30%;height:44%;transform:translateX(-50%);background:#000;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.sf-bat{position:relative;width:calc(var(--pw) * .085);height:calc(var(--pw) * .042);border:1.5px solid rgba(255,255,255,.55);border-radius:3px}
.sf-bat i{position:absolute;left:1.5px;top:1.5px;bottom:1.5px;width:70%;background:#fff;border-radius:1px}
.sf-view{position:relative;flex:none;width:100%;aspect-ratio:3/4;overflow:hidden;background:#15141a}
.sf-video,.sf-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sf-photo{opacity:0}
.selfie.shot .sf-photo{opacity:1}
.sf-grid{position:absolute;inset:0;opacity:.5;
  background:linear-gradient(90deg,transparent calc(33.33% - .5px),rgba(255,255,255,.35) calc(33.33% - .5px),rgba(255,255,255,.35) calc(33.33% + .5px),transparent calc(33.33% + .5px),
    transparent calc(66.66% - .5px),rgba(255,255,255,.35) calc(66.66% - .5px),rgba(255,255,255,.35) calc(66.66% + .5px),transparent calc(66.66% + .5px)),
  linear-gradient(0deg,transparent calc(33.33% - .5px),rgba(255,255,255,.35) calc(33.33% - .5px),rgba(255,255,255,.35) calc(33.33% + .5px),transparent calc(33.33% + .5px),
    transparent calc(66.66% - .5px),rgba(255,255,255,.35) calc(66.66% - .5px),rgba(255,255,255,.35) calc(66.66% + .5px),transparent calc(66.66% + .5px))}
.sf-face{position:absolute;left:29%;top:11%;width:42%;height:42%;border-radius:24%;border:2px solid var(--sf-acc);
  box-shadow:0 0 0 1px rgba(0,0,0,.18),0 0 18px -2px var(--sf-acc);opacity:0;transform:scale(1.18);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.9,.25,1)}
.sf-face.on{opacity:.95;transform:scale(1)}
.selfie.shot .sf-face{animation:sf-pulse 1.1s ease-in-out infinite}
@keyframes sf-pulse{50%{opacity:.55}}
.sf-scan{position:absolute;left:0;right:0;top:0;height:20%;opacity:0;mix-blend-mode:screen;
  background:linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--sf-acc) 42%,transparent) 72%,rgba(255,255,255,.95) 97%,transparent 100%)}
.sf-zoom{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;
  width:calc(var(--pw) * .13);height:calc(var(--pw) * .13);border-radius:50%;background:rgba(10,10,12,.62);
  font:600 calc(var(--pw) * .046)/1 var(--sans);color:#fff}
.sf-flash{position:absolute;inset:0;background:#fff;opacity:0}
.sf-ctl{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;gap:calc(var(--pw) * .07);padding:0 9%}
.sf-modes{display:flex;justify-content:center;gap:calc(var(--pw) * .07);font:600 calc(var(--pw) * .045)/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.sf-modes b{color:var(--sf-acc);font-weight:700}
.sf-row{display:flex;align-items:center;justify-content:space-between}
.sf-thumb{width:calc(var(--pw) * .15);height:calc(var(--pw) * .15);border-radius:calc(var(--pw) * .03);background:#2a2930;overflow:hidden;display:block}
.sf-thumb img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transform:scale(.4);transition:opacity .3s ease .2s,transform .4s cubic-bezier(.2,.9,.25,1) .2s}
.selfie.shot .sf-thumb img{opacity:1;transform:scale(1)}
.sf-shutter{position:relative;width:calc(var(--pw) * .22);height:calc(var(--pw) * .22);border-radius:50%;border:calc(var(--pw) * .014) solid #fff;display:block}
.sf-shutter i{position:absolute;inset:calc(var(--pw) * .012);border-radius:50%;background:#fff;display:block}
.sf-shutter.press i{animation:sf-press .32s ease}
@keyframes sf-press{40%{transform:scale(.82);background:#d9d9de}}
.sf-flip{position:relative;width:calc(var(--pw) * .15);height:calc(var(--pw) * .15);border-radius:50%;background:#2a2930;display:block}
.sf-flip::before{content:"";position:absolute;inset:28%;border:1.5px solid rgba(255,255,255,.85);border-radius:50%;border-left-color:transparent}
.sf-sheet{position:absolute;z-index:2;left:3.5%;right:3.5%;bottom:2.6%;margin:0;padding:calc(var(--pw) * .06) calc(var(--pw) * .065) calc(var(--pw) * .055);
  border-radius:calc(var(--pw) * .085);background:rgba(247,246,243,.97);color:#16151a;box-shadow:0 -10px 30px -10px rgba(0,0,0,.5);
  transform:translateY(118%);transition:transform .5s cubic-bezier(.2,.85,.25,1)}
.sf-sheet.on{transform:none}
.sf-sheet p{margin:0}
.sf-k{font:600 calc(var(--pw) * .042)/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--sf-acc) 55%,#16151a)}
.sf-t{margin-top:calc(var(--pw) * .02)!important;font:650 calc(var(--pw) * .068)/1.2 var(--sans);letter-spacing:-.01em}
.sf-bar{display:block;margin-top:calc(var(--pw) * .045);height:calc(var(--pw) * .02);border-radius:999px;background:rgba(22,21,26,.1);overflow:hidden}
.sf-bar i{display:block;height:100%;width:0;border-radius:inherit;background:var(--sf-acc)}
.sf-s{margin-top:calc(var(--pw) * .035)!important;font:500 calc(var(--pw) * .042)/1.3 var(--sans);color:#5d5a66}
.sf-glow{position:absolute;inset:0;z-index:3;opacity:0;background:radial-gradient(70% 55% at 50% 45%,#fff 0%,var(--sf-acc) 45%,transparent 100%);mix-blend-mode:screen}
.sf-dots i{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;opacity:0;background:#fff;
  box-shadow:0 0 6px 2px var(--sf-acc),0 0 16px 4px color-mix(in srgb,var(--sf-acc) 60%,transparent);will-change:transform,opacity}
.sf-cap{position:absolute;left:0;top:0;margin:0;display:inline-grid;padding:7px 13px;border-radius:999px;opacity:0;white-space:nowrap;
  background:rgba(18,17,24,.78);border:1px solid rgba(246,245,242,.16);font:500 11.5px/1.25 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#F1EFF4;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sf-cap span{grid-area:1/1;transition:opacity .35s ease}
.sf-cap .sf-c2,.sf-cap.two .sf-c1{opacity:0}
.sf-cap.two .sf-c2{opacity:1}
@media (max-width:759.98px){.sf-cap{font-size:10.5px;padding:6px 11px}}

/* ═══ the sectors: "Who are you? Choose yours." ═══
   Six large cards straight under the story, each with its turning figure (app.js draws them over the stills:
   the row keeps data-figures and each box keeps .fg-box[data-fig], so nothing in app.js changes). */
.sectors{padding-block:72px 84px;position:relative}
.sectors .band-h{max-width:70ch}
.sectors .band-h h2{font-size:clamp(32px,4vw,48px)}
.sectors .aud-row.sec-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-top:34px;row-gap:16px}
/* seven: three clinicians' across, then two wider, then the two for you */
.sectors .aud-row.sec-grid>.sec-card{grid-column:span 2}
.sectors .aud-row.sec-grid>.sec-card:nth-child(4),.sectors .aud-row.sec-grid>.sec-card:nth-child(5),.sectors .aud-row.sec-grid>.sec-card.you{grid-column:span 3}
.sectors .aud-card.sec-card{position:relative;display:grid;grid-template-columns:clamp(104px,10.5vw,136px) minmax(0,1fr);gap:4px 16px;align-items:center;
  padding:14px 20px 14px 10px;border-radius:24px;background:color-mix(in srgb,var(--surface) 88%,transparent);border:1px solid var(--line);
  box-shadow:var(--shadow);text-decoration:none;color:inherit;overflow:hidden;
  transition:border-color .3s,box-shadow .3s,transform .3s var(--ease),background .3s}
.sectors .aud-card.sec-card::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(70% 90% at 12% 70%,color-mix(in srgb,var(--ag) 26%,transparent),transparent 70%);opacity:.75;transition:opacity .3s}
.sectors .aud-card.sec-card:hover,.sectors .aud-card.sec-card:focus-visible{transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--ac) 45%,var(--line));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--ac) 18%,transparent),0 26px 50px -26px color-mix(in srgb,var(--ac) 60%,transparent)}
.sectors .aud-card.sec-card:hover::before{opacity:1}
.sectors .sec-card .fg-box{width:100%;margin:0}
.sectors .sec-card .aud-t{position:relative;padding:6px 0;gap:7px}
.sectors .sec-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sectors .sec-card .aud-k{font-size:clamp(19px,1.6vw,23px);font-weight:500;letter-spacing:-.02em;line-height:1.15}
.sectors .sec-card .aud-k::before{width:9px;height:9px;border-radius:3px}
.sectors .sec-card .aud-l{font-size:14px;line-height:1.5}
.sectors .sec-card .aud-go{margin-top:4px;padding-top:2px;font-size:13.5px}
.sectors .sec-card.you{background:color-mix(in srgb,var(--surface) 70%,color-mix(in srgb,var(--a-ind) 10%,transparent))}
.sectors .sec-card.you.yng{background:color-mix(in srgb,var(--surface) 70%,color-mix(in srgb,var(--a-yng) 10%,transparent))}
.sectors .sec-card.you::after{display:none}
.sectors .aud-foot{margin-top:14px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-inline:4px}
.sec-note{margin:0;font-size:13px;color:var(--ink-2)}
.sec-note a{color:var(--accent-ink);font-weight:500}
@media (max-width:1100px){.sectors .aud-row.sec-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sectors .aud-row.sec-grid>.sec-card,.sectors .aud-row.sec-grid>.sec-card:nth-child(4),.sectors .aud-row.sec-grid>.sec-card.you{grid-column:auto}
  .sectors .aud-row.sec-grid>.sec-card:nth-child(5){grid-column:1/-1}}
@media (max-width:640px){
  .sectors{padding-block:52px 60px}
  .sectors .aud-row.sec-grid{grid-template-columns:minmax(0,1fr);gap:10px;margin-top:24px}
  .sectors .aud-card.sec-card{grid-template-columns:92px minmax(0,1fr);gap:2px 12px;padding:8px 14px 8px 4px;border-radius:20px}
  .sectors .sec-card .aud-k{font-size:18.5px}
  .sectors .sec-card .aud-l{font-size:13.5px}
}

/* ═══ the patient app: a phone that zooms, turns and changes screen as the page scrolls ═══
   Without phone.js, with reduced motion, or in a window with no room for it, the same markup is a still row of
   phones with their words. phone.js adds .is-pinned when the sticky version fits, and drives --rx, --ry, --s
   and --ty on the section; every step's phone shares them, so the steps read as one phone changing screen. */
.mlh{position:relative;padding-block:88px 72px}
.mlh-h{max-width:66ch}
.mlh-steps{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 28px}
.mlh-step{display:flex;flex-direction:column;align-items:center;gap:18px;min-width:0}
.mlh-shot{margin:0;position:relative;display:block}
.mlh-cap{max-width:34ch;text-align:center}
.mlh-k{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink)}
.mlh-cap h3{margin:8px 0 0;font-size:clamp(19px,1.7vw,24px);line-height:1.18}
.mlh-cap p:not(.mlh-k){margin:8px 0 0;font-size:14.5px;line-height:1.6;color:var(--ink-2);text-wrap:pretty}
/* the phone itself */
.mlh-phone{--pw:230px;position:relative;width:var(--pw);padding:calc(var(--pw) * .034);border-radius:calc(var(--pw) * .165);
  background:linear-gradient(150deg,#45444c 0%,#1b1a20 22%,#0c0c10 50%,#24232a 78%,#4a4952 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 0 0 0 calc(var(--pw) * .012) #07070a,
    0 2px 2px rgba(10,9,14,.18),0 26px 46px -22px rgba(20,18,32,.55),0 60px 90px -50px rgba(20,18,32,.5)}
.mlh-phone::before{content:"";position:absolute;right:calc(var(--pw) * -.012);top:27%;width:calc(var(--pw) * .014);height:11%;border-radius:0 3px 3px 0;
  background:linear-gradient(90deg,#1c1b21,#4a4952)}
.mlh-phone::after{content:"";position:absolute;left:calc(var(--pw) * -.012);top:22%;width:calc(var(--pw) * .014);height:6.5%;border-radius:3px 0 0 3px;
  background:linear-gradient(270deg,#1c1b21,#4a4952);box-shadow:0 calc(var(--pw) * .2) 0 #2c2b31}
.mlh-screen{position:relative;overflow:hidden;border-radius:calc(var(--pw) * .135);background:#F6F5F2;aspect-ratio:780/1758;isolation:isolate}
.mlh-bar{position:absolute;inset:0 0 auto 0;height:3.98%;display:flex;align-items:center;justify-content:space-between;padding:0 9% 0 10%;
  font:600 calc(var(--pw) * .045)/1 var(--sans);color:#16151A;background:var(--bar,#fff);z-index:2}
.mlh-bar i{display:flex;gap:3px;align-items:center}
.mlh-bar i::before{content:"";width:calc(var(--pw) * .06);height:calc(var(--pw) * .03);border-radius:2px;
  background:linear-gradient(90deg,#16151A 0 26%,transparent 26% 37%,#16151A 37% 63%,transparent 63% 74%,#16151A 74%)}
.mlh-bar i::after{content:"";width:calc(var(--pw) * .068);height:calc(var(--pw) * .032);border-radius:3px;border:1.5px solid #16151A;
  background:linear-gradient(90deg,#16151A 0 70%,transparent 70%);background-clip:content-box;padding:1px;box-sizing:border-box}
.mlh-island{position:absolute;z-index:3;top:calc(var(--pw) * .03);left:50%;width:30%;height:calc(var(--pw) * .074);transform:translateX(-50%);
  border-radius:999px;background:#050507}
.mlh-screen img{position:absolute;left:0;right:0;bottom:0;width:100%;height:96.02%;display:block;object-fit:cover;object-position:50% 0}
.mlh-glare{position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;
  background:linear-gradient(118deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.08) 22%,rgba(255,255,255,0) 40%,rgba(255,255,255,0) 72%,rgba(255,255,255,.06) 100%);
  mix-blend-mode:screen;opacity:var(--glare,.7);transform:translateX(var(--gx,0%));transition:opacity .3s}
.mlh-shadow{display:block;position:absolute;left:8%;right:8%;bottom:-26px;height:34px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(20,18,32,.34),transparent);filter:blur(4px);transform:scale(var(--sh,1));opacity:var(--sho,1)}
:root[data-theme="dark"] .mlh-shadow{background:radial-gradient(closest-side,rgba(0,0,0,.7),transparent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mlh-shadow{background:radial-gradient(closest-side,rgba(0,0,0,.7),transparent)}}
.mlh-dots{display:none}
.mlh-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:56px}
.mlh-fact{padding:20px 20px 18px;border-radius:20px;background:color-mix(in srgb,var(--surface) 86%,transparent);border:1px solid var(--line);box-shadow:var(--shadow)}
.mlh-fact .mlh-k{color:var(--muted)}
.mlh-fact b{display:block;margin-top:8px;font-size:17px;font-weight:500;letter-spacing:-.015em;color:var(--ink)}
.mlh-fact p{margin:7px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.mlh-price{font-family:var(--serif);font-size:30px;letter-spacing:-.02em;line-height:1;color:var(--ink);margin-top:8px;display:block}
.mlh-price small{font-family:var(--sans);font-size:13px;color:var(--muted);letter-spacing:0}
.mlh-go{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:22px}
.mlh-go .btn svg{width:16px;height:16px;flex:none}
.mlh-cap-note{margin:12px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--muted)}
@media (max-width:1000px){.mlh-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.mlh-facts{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
  .mlh{padding-block:60px 56px}
  .mlh-steps{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;margin-inline:-24px;padding:6px 24px 30px;scrollbar-width:thin}
  .mlh-step{flex:0 0 72%;scroll-snap-align:center}
  .mlh-phone{--pw:min(210px,58vw)}
}
/* the pinned version */
.mlh.is-pinned .mlh-scroll{position:relative;height:calc(var(--n,6) * 62vh + 100vh)}
.mlh.is-pinned .mlh-pin{position:sticky;top:calc(var(--navh) + var(--sat));height:calc(100vh - var(--navh) - var(--sat));overflow:hidden}
@supports (height:100svh){.mlh.is-pinned .mlh-pin{height:calc(100svh - var(--navh) - var(--sat))}}
.mlh.is-pinned .mlh-pin>.wrap{position:relative;height:100%}
.mlh.is-pinned .mlh-steps{position:absolute;inset:0 24px;margin:0;display:block;overflow:visible;padding:0}
.mlh.is-pinned .mlh-step{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 48px;align-items:center;pointer-events:none}
.mlh.is-pinned .mlh-shot{grid-column:2;grid-row:1;justify-self:center;opacity:0;z-index:1;
  transform:translate3d(0,var(--ty,0px),0) perspective(1700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--s,1));transform-style:preserve-3d;will-change:transform}
.mlh.is-pinned .mlh-phone{--pw:clamp(220px,min(24vw,calc((100svh - var(--navh)) * .355)),340px)}
.mlh.is-pinned .mlh-cap{grid-column:1;grid-row:1;text-align:left;max-width:30rem;opacity:0;transform:translateY(18px);transition:opacity .45s ease,transform .55s var(--ease)}
.mlh.is-pinned .mlh-cap h3{font-size:clamp(28px,3vw,42px);line-height:1.06;margin-top:12px}
.mlh.is-pinned .mlh-cap p:not(.mlh-k){font-size:clamp(15.5px,1.2vw,17.5px);margin-top:14px;max-width:44ch}
.mlh.is-pinned .mlh-step.was-on .mlh-shot{opacity:1;z-index:1}
.mlh.is-pinned .mlh-step.is-on .mlh-shot{opacity:1;z-index:2;transition:opacity .42s ease}
.mlh.is-pinned .mlh-step.is-on .mlh-cap{opacity:1;transform:none;pointer-events:auto}
.mlh.is-pinned .mlh-dots{display:flex;position:absolute;z-index:3;left:24px;bottom:max(22px,6vh);gap:6px;align-items:center}
.mlh-dots button{position:relative;width:34px;height:30px;border:0;background:none;cursor:pointer;padding:0}
.mlh-dots button::before{content:"";position:absolute;left:3px;right:3px;top:50%;height:3px;margin-top:-1.5px;border-radius:3px;background:var(--line-2);transition:background .25s}
.mlh-dots button[aria-current="step"]::before{background:var(--ink)}
.mlh-dots button:focus-visible{outline-offset:0}
.mlh-count{margin-left:8px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--muted)}
@media (max-width:759.98px){
  .mlh.is-pinned .mlh-scroll{height:calc(var(--n,6) * 58vh + 100vh)}
  .mlh.is-pinned .mlh-steps{inset:0 16px}
  .mlh.is-pinned .mlh-step{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;align-items:start;gap:0;padding:14px 0 18px}
  .mlh.is-pinned .mlh-shot{grid-column:1;grid-row:1;align-self:center}
  .mlh.is-pinned .mlh-phone{--pw:min(calc((100svh - var(--navh)) * .262),64vw,260px)}
  .mlh.is-pinned .mlh-cap{grid-column:1;grid-row:2;text-align:center;margin:0 auto;max-width:36ch;padding-bottom:30px}
  .mlh.is-pinned .mlh-cap h3{font-size:clamp(22px,6.2vw,27px);margin-top:6px}
  .mlh.is-pinned .mlh-cap p:not(.mlh-k){font-size:14.5px;margin:8px auto 0}
  .mlh.is-pinned .mlh-dots{left:50%;transform:translateX(-50%);bottom:10px}
  .mlh-dots button{width:26px}
  .mlh-count{display:none}
}

/* ═══ the clinic room, and Discover ═══ */
.feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:40px 56px;align-items:center}
.feature.flip .feature-t{order:2}
.feature-t .lede{font-size:16.5px}
.feature-list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px}
.feature-list li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.feature-list li::before{content:"";width:8px;height:8px;margin:7px 0 0 4px;border-radius:2px;background:var(--accent)}
.feature-list b{color:var(--ink);font-weight:500}
.feature-pic{position:relative;margin:0;border-radius:24px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-lg);background:#121115}
.feature-pic img{display:block;width:100%;height:auto}
.feature-pic figcaption{position:absolute;left:12px;bottom:12px;padding:6px 11px;border-radius:999px;background:rgba(18,17,24,.78);color:#E9E6EF;
  font:500 11px var(--mono);letter-spacing:.04em;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.feature .hero-cta{margin-top:26px}
.feature-more{margin:18px 0 0;font-size:13.5px;line-height:1.7;color:var(--ink-2)}
.feature-more a{color:var(--accent-ink);font-weight:500;text-decoration:none;white-space:nowrap}
.feature-more a:hover{text-decoration:underline}
.feature-pic.zoom img{transform:scale(var(--zs,1.08));transform-origin:50% 45%;transition:transform .2s linear;will-change:transform}
html.reduce .feature-pic.zoom img{transform:none}
@media (max-width:900px){.feature{grid-template-columns:minmax(0,1fr)}.feature.flip .feature-t{order:0}}

/* the last step of a clinic story: the six pillars, and the plan's own check-ins */
.story-chips{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.story-chips li{display:inline-flex;align-items:center;gap:7px;padding:5px 10px 5px 8px;border-radius:999px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);font-size:12.5px}
.story-chips li b{font-weight:500;color:var(--ink)}
.story-chips i{width:8px;height:8px;border-radius:50%;background:var(--pc);box-shadow:0 0 8px var(--pc)}
.story-checks{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:6px}
.story-checks li{position:relative;padding:8px 10px 8px 34px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  font-size:13.5px;line-height:1.4;color:var(--ink)}
.story-checks li::before{content:"";position:absolute;left:11px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:5px;
  border:1.5px solid var(--accent-ink)}
.story-checks li:first-child::before{background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.4' fill='none' stroke='%23121115' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;border-color:var(--accent)}
@media (max-width:759.98px){
  .story-chips{display:none}
  .story-checks{margin-top:10px;gap:5px}
  .story-checks li{font-size:13px;padding:7px 9px 7px 31px}
  .story-checks li:nth-child(3){display:none}
}
/* phones: a patient's plans as a row of chips (their status is still read out) */
@media (max-width:759.98px){
  .story-plans{display:flex;flex-wrap:wrap;gap:6px}
  .story-plans li{display:inline-flex;align-items:center;gap:7px;padding:6px 11px 6px 10px;border-radius:999px;position:relative}
  .story-plans li::before{grid-row:auto;width:8px;height:8px}
  .story-plans b{font-size:13px;font-weight:500}
  .story-plans span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .story-plans li.is-wait{border-color:rgba(255,125,156,.4)}
  .story-plans li.is-wait::after{content:"Sign-off";font:500 9.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#FFB3C4}
}

/* /mylifestylehub: the phone app's note, beside its heading */
.phone-note{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:20px 56px;align-items:start}
.phone-note .hub-t .body:first-child{margin-top:0}
@media (max-width:900px){.phone-note{grid-template-columns:minmax(0,1fr)}}

/* smaller laptops and tablets on their side: the opening card keeps inside the stage */
@media (max-width:1100px) and (min-width:760px){.story-card .btn.lg{padding:12px 18px;font-size:15px}}
@media (max-height:820px) and (min-width:760px){
  .story-card h1{font-size:clamp(32px,3.7vw,50px)}
  .story-small{display:none}
  .story-step{padding-block:28px}
  .story-jump{margin-top:14px;padding-top:12px}
  .story-jump a{min-height:32px}
}
@media (max-height:700px) and (min-width:760px){
  .story-card .long{display:none}
  .story-card .short{display:block}
  .story-card h1{font-size:clamp(30px,3.4vw,44px)}
}

/* ═══ Young Adult Health (16 Oct 2026): the plan's ten foundations, five across ═══ */
.cond-steps.row.yah-ten{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.cond-steps.row.yah-ten li::before{background:color-mix(in srgb,var(--a-yng) 18%,var(--surface-2));color:var(--a-yng)}
@media (max-width:1100px){.cond-steps.row.yah-ten{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.cond-steps.row.yah-ten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.cond-steps.row.yah-ten{grid-template-columns:minmax(0,1fr)}}

/* ═══ one ecosystem (home): four steps in a loop ═══ */
.eco{position:relative;padding-block:84px 76px}
.eco-h{max-width:70ch}
.eco-h h2{font-size:clamp(32px,4vw,50px);line-height:1.06}
.eco-h h2 em.s{display:block;color:var(--accent-ink)}
.eco-loop{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;counter-reset:eco}
.eco-loop li{position:relative;padding:22px 22px 20px;border-radius:22px;background:color-mix(in srgb,var(--surface) 88%,transparent);border:1px solid var(--line);box-shadow:var(--shadow)}
.eco-loop li::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(90% 70% at 0% 0%,color-mix(in srgb,var(--ec) 16%,transparent),transparent 70%)}
/* the arrow on to the next one */
.eco-loop li:not(:last-child)::after{content:"";position:absolute;z-index:1;right:-14px;top:34px;width:10px;height:10px;border-top:1.6px solid var(--line-2);border-right:1.6px solid var(--line-2);transform:rotate(45deg)}
.eco-n{position:relative;display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--muted)}
.eco-n::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--ec);box-shadow:0 0 0 4px color-mix(in srgb,var(--ec) 18%,transparent)}
.eco-loop h3{position:relative;margin:14px 0 0;font-size:clamp(19px,1.6vw,22px);letter-spacing:-.02em}
.eco-loop p{position:relative;margin:8px 0 0;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.eco-round{display:flex;align-items:center;gap:8px;margin:18px 0 0;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--muted)}
.eco-round svg{width:16px;height:16px;flex:none;color:var(--accent)}
@media (max-width:1000px){.eco-loop{grid-template-columns:repeat(2,minmax(0,1fr))}.eco-loop li:nth-child(2)::after{display:none}}
@media (max-width:640px){.eco{padding-block:56px 52px}.eco-loop{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:26px}
  .eco-loop li::after{display:none}.eco-loop li{padding:18px 18px 16px}}

/* the stories' rooms turn with a sideways drag (story.js): a grab hand over the room, and a word that it turns */
.story{touch-action:pan-y pinch-zoom}
.story.is-live{cursor:grab}
.story.is-live.is-turning{cursor:grabbing}
.story.is-live :where(.story-card,.story-nav,.story-note){cursor:auto}
.story-hint{position:absolute;z-index:6;right:clamp(64px,6vw,96px);bottom:26px;margin:0;display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;
  background:rgba(18,17,24,.7);color:#e9e7ef;font:500 11px var(--mono);letter-spacing:.05em;pointer-events:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  animation:storyHint .6s ease both;transition:opacity .6s ease}
.story-hint svg{width:15px;height:15px;flex:none}
.story-hint.gone{opacity:0}
@keyframes storyHint{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
[data-c3d-layout="stacked"] .story-hint{right:12px;bottom:auto;top:calc(var(--navh, 64px) + 12px)}

/* the app's screens, live: its clip over its picture (phone.js plays it), shown once it's actually playing */
.mlh-screen video.mlh-vid{position:absolute;left:0;right:0;bottom:0;width:100%;height:96.02%;display:block;object-fit:cover;object-position:50% 0;opacity:0;transition:opacity .35s ease;pointer-events:none}
.mlh-screen video.mlh-vid.is-on{opacity:1}
html.reduce .mlh-screen video.mlh-vid{display:none}