/* Apex Site 2026: ported verbatim from the approved homepage mockup (29 Sep 2026).
   Tokens and both dark-mode blocks are at the top. Theme-specific additions
   (pop-ups, HubSpot forms, the quiz skin) live in apx-modal.css. */
:root{
  --mock-h:0px;
  --ink:#191919; --ink-2:#4B5157; --ink-3:#6B7278;
  --blue:#00AEEF; --blue-deep:#0071A8; --blue-ink:#003A57;
  --sky:#E8F7FD; --sky-2:#D3F0FB;
  --bg:#FFFFFF; --bg-2:#F4F8FA; --surface:#FFFFFF; --line:#E3E9ED;
  --charcoal:#191919; --charcoal-2:#24282C;
  --shadow:0 24px 60px -24px rgba(0,0,0,.28);
  --shadow-sm:0 10px 30px -14px rgba(0,0,0,.22);
  --r-lg:32px; --r-md:22px; --r-sm:14px;
  --f:'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pad:clamp(1rem, 4vw, 3rem);
  --max:1440px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#F2F5F7; --ink-2:#B9C2C9; --ink-3:#8F99A1; --blue-deep:#5BCBF5; --blue-ink:#BDEBFB;
    --sky:#0F2733; --sky-2:#133443; --bg:#0E1012; --bg-2:#14171A; --surface:#1A1E22; --line:#2A3036;
    --shadow:0 24px 60px -24px rgba(0,0,0,.7); --shadow-sm:0 10px 30px -14px rgba(0,0,0,.6); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ink:#F2F5F7; --ink-2:#B9C2C9; --ink-3:#8F99A1; --blue-deep:#5BCBF5; --blue-ink:#BDEBFB;
  --sky:#0F2733; --sky-2:#133443; --bg:#0E1012; --bg-2:#14171A; --surface:#1A1E22; --line:#2A3036;
  --shadow:0 24px 60px -24px rgba(0,0,0,.7); --shadow-sm:0 10px 30px -14px rgba(0,0,0,.6); color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--f); font-size:18px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img{display:block; max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0; font-weight:800; letter-spacing:-.035em; line-height:1.02}
p{margin:0}
.wrap{max-width:var(--max); margin-inline:auto; padding-inline:var(--pad)}
.eyebrow{font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-deep); display:flex; align-items:center; gap:.7rem}
.eyebrow::before{content:""; width:28px; height:3px; border-radius:3px; background:var(--blue)}
.h-lg{font-size:clamp(2.5rem, 6vw, 5.6rem)}
.h-md{font-size:clamp(2rem, 4vw, 3.6rem)}
.lede{font-size:clamp(1.1rem, 1.5vw, 1.3rem); color:var(--ink-2); max-width:46ch}
.blue{color:var(--blue)}

/* buttons: charcoal text on bright blue is ~8:1 */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.6rem; border-radius:999px; padding:1.05rem 1.7rem; font-weight:700; font-size:1.02rem; text-decoration:none; border:2px solid transparent; transition:transform .2s ease, background-color .2s ease, border-color .2s ease; white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible{outline:3px solid var(--blue); outline-offset:3px}
.btn-blue{background:var(--blue); color:#0B1B24}
.btn-blue:hover{background:#29BEF4}
.btn-ghost{border-color:rgba(255,255,255,.7); color:#fff; background:rgba(255,255,255,.06); backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(255,255,255,.16)}
.btn-line{border-color:var(--ink); color:var(--ink)}
.btn-dark{background:var(--charcoal); color:#fff}
:root[data-theme="dark"] .btn-dark{background:#fff; color:#191919}
.btn svg{width:18px; height:18px}

/* mockup banner */
@media (max-width:620px){ .mock .long{display:none} }

/* header */
.head{position:fixed; top:var(--mock-h, 34px); left:0; right:0; z-index:50; transition:background-color .3s ease, box-shadow .3s ease, top .3s ease}
.head .wrap{display:flex; align-items:center; gap:1.5rem; height:84px}
.logo img{height:40px; width:auto; filter:none; transition:filter .3s ease}
.nav{display:flex; gap:2rem; margin-left:auto}
.nav a{text-decoration:none; font-weight:600; font-size:.98rem; color:#fff; opacity:.92}
.nav a:hover{opacity:1; text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:2px}
.head-actions{display:flex; align-items:center; gap:.7rem}
.login{color:#fff; font-weight:600; text-decoration:none; font-size:.98rem; padding:.5rem .6rem}
.icon-btn{width:46px; height:46px; border-radius:50%; display:grid; place-items:center; border:1.5px solid rgba(255,255,255,.5); background:transparent; color:#fff; cursor:pointer}
.icon-btn svg{width:20px; height:20px}
.head .btn{padding:.8rem 1.3rem}
.head.solid{background:color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--line); top:0}
.head.solid .logo img{filter:none}
:root[data-theme="dark"] .head.solid .logo img{filter:none}
.head.solid .nav a, .head.solid .login{color:var(--ink)}
.head.solid .icon-btn{color:var(--ink); border-color:var(--line)}
.menu-btn{display:none}
@media (max-width:1020px){ .nav, .login{display:none} .menu-btn{display:grid} .head-actions{margin-left:auto} }
@media (max-width:520px){ .head .btn{display:none} .head .wrap{height:72px} .logo img{height:34px} }
.drawer{position:fixed; inset:0; z-index:70; background:var(--charcoal); color:#fff; padding:6rem var(--pad) 2rem; display:none; flex-direction:column; gap:.4rem}
.drawer.open{display:flex}
.drawer a{font-size:2.2rem; font-weight:800; letter-spacing:-.03em; text-decoration:none; padding:.3rem 0}
.drawer .close{position:absolute; top:1.3rem; right:var(--pad)}
.drawer .btn{margin-top:1.5rem; align-self:flex-start; font-size:1.1rem}

/* hero */
.hero{position:relative; min-height:max(720px, 100svh); color:#fff; overflow:hidden; display:flex; align-items:flex-end; isolation:isolate; background:#0B1B24}
.hero-media{position:absolute; inset:0; z-index:-2}
.hero-media img, .hero-media video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:70% 40%}
.hero-media video{opacity:0; transition:opacity .8s ease}
.hero-media video.ready{opacity:1}
@media (prefers-reduced-motion:reduce){ .hero-media video{display:none} }
.hero::before{content:""; position:absolute; inset:0; z-index:-1; background:
  linear-gradient(to bottom right, rgba(0,0,0,.6) 0%, rgba(0,0,0,.3) 45%, rgba(0,0,0,.1) 100%),
  linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.25) 22%, rgba(0,0,0,0) 38%),
  linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.5) 36%, rgba(0,0,0,.1) 62%, rgba(0,0,0,0) 78%),
  linear-gradient(0deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.3) 30%, rgba(0,0,0,0) 55%)}
.hero .wrap{width:100%; padding-bottom:clamp(3rem, 8vh, 6rem); padding-top:160px; display:grid; grid-template-columns:minmax(0,1fr); max-width:var(--max)}
.hero .eyebrow{color:#fff}
.hero h1{margin-top:1.4rem; font-size:clamp(3.3rem, 7.8vw, 8.2rem); line-height:.94; letter-spacing:-.045em}
.hero h1 .blue{display:block}
.hero p.lede{color:rgba(255,255,255,.88); margin-top:1.6rem; max-width:40ch}
.hero .ctas{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.2rem}
.vid-btn{position:absolute; right:var(--pad); bottom:clamp(1.5rem, 5vh, 3rem); z-index:2; width:48px; height:48px; border-radius:50%; display:grid; place-items:center; color:#fff; background:rgba(0,0,0,.35); border:1.5px solid rgba(255,255,255,.45); backdrop-filter:blur(8px); cursor:pointer}
.vid-btn:focus-visible{outline:3px solid var(--blue); outline-offset:3px}
.vid-btn svg{width:18px; height:18px}
@media (prefers-reduced-motion:reduce){ .vid-btn{display:none} }
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr; padding-top:130px}
  .hero-media img, .hero-media video{object-position:82% 40%}
  .hero::before{background:linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.5) 14%, rgba(0,0,0,.28) 24%, rgba(0,0,0,.38) 40%, rgba(0,0,0,.78) 58%, rgba(0,0,0,.92) 100%)}
  .vid-btn{bottom:auto; top:calc(var(--mock-h, 34px) + 86px)}
}

/* portrait hero cut (phones, portrait tablets): the film is already reframed, so centre it */
.hero-media picture{display:contents}
@media (max-aspect-ratio:4/5){ .hero-media--portrait img, .hero-media--portrait video{object-position:50% 45%} }

/* blue band */
.band{background:var(--blue); color:#0B1B24}
.band ul{list-style:none; margin:0 auto; padding:0 var(--pad); max-width:var(--max); display:grid; grid-template-columns:repeat(4, minmax(0,1fr))}
.band li{padding:2rem 1.5rem 2rem 0; border-right:1.5px solid rgba(11,27,36,.2); margin-right:1.5rem}
.band li:last-child{border-right:0; margin-right:0}
.band .n{font-size:.8rem; font-weight:800; letter-spacing:.12em; opacity:.7}
.band b{display:block; font-size:clamp(1.15rem, 1.7vw, 1.5rem); font-weight:800; letter-spacing:-.02em; margin-top:.3rem; line-height:1.2}
@media (max-width:860px){ .band ul{grid-template-columns:1fr 1fr} .band li{padding:1.4rem 1rem 1.4rem 0; margin-right:1rem} .band li:nth-child(2){border-right:0; margin-right:0} .band li:nth-child(-n+2){border-bottom:1.5px solid rgba(11,27,36,.2)} }

/* sections */
.sec{padding-block:clamp(5rem, 11vw, 9.5rem)}
.sec-head{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:2rem; align-items:end; margin-bottom:clamp(2.5rem, 5vw, 4rem)}
.sec-head h2{margin-top:1.1rem}
@media (max-width:860px){ .sec-head{grid-template-columns:1fr} }

/* goals bento */
.bento{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); grid-auto-rows:minmax(320px, auto); gap:clamp(.8rem, 1.4vw, 1.25rem)}
.tile{position:relative; border-radius:var(--r-lg); overflow:hidden; color:#fff; text-decoration:none; isolation:isolate; min-height:300px; display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(1.3rem, 2.2vw, 2rem); background:#0B1B24}
.tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.tile::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, rgba(6,16,22,.86) 0%, rgba(6,16,22,.45) 38%, rgba(6,16,22,0) 62%)}
.tile:hover img{transform:scale(1.06)}
.tile:focus-visible{outline:3px solid var(--blue); outline-offset:4px}
.tile .tag{position:absolute; top:clamp(1.1rem,2vw,1.6rem); left:clamp(1.1rem,2vw,1.6rem); font-size:.75rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.35); backdrop-filter:blur(8px); padding:.4rem .75rem; border-radius:999px}
.tile h3{font-size:clamp(1.7rem, 2.6vw, 2.5rem)}
.tile p{margin-top:.5rem; opacity:.9; max-width:30ch; font-size:1rem; line-height:1.45}
.tile .go{position:absolute; right:clamp(1.1rem,2vw,1.6rem); bottom:clamp(1.1rem,2vw,1.6rem); width:52px; height:52px; border-radius:50%; background:var(--blue); color:#0B1B24; display:grid; place-items:center; transition:transform .3s ease}
.tile:hover .go{transform:rotate(-45deg)}
.tile .go svg{width:22px; height:22px}
.tile .txt{padding-right:64px}
.t-energy{grid-column:span 6; grid-row:span 2}
.t-energy h3{font-size:clamp(2.2rem, 4vw, 3.8rem)}
.t-energy img, .t-body img, .t-intimacy img, .t-clarity img{object-position:50% 18%}
.t-body, .t-recovery, .t-intimacy, .t-clarity{grid-column:span 3}
.t-hormone{grid-column:span 12; min-height:360px; justify-content:center}
.t-hormone img{object-position:60% 40%}
.t-hormone h3{font-size:clamp(2.2rem, 4vw, 3.8rem)}
.t-hormone::after{background:linear-gradient(90deg, rgba(6,16,22,.8) 0%, rgba(6,16,22,.3) 45%, rgba(6,16,22,0) 70%)}
@media (max-width:1020px){ .t-energy{grid-column:span 12; grid-row:span 1; min-height:460px} .t-body, .t-recovery, .t-intimacy, .t-clarity{grid-column:span 6; min-height:380px} }
@media (max-width:620px){ .bento{grid-template-columns:1fr} .t-energy, .t-body, .t-recovery, .t-intimacy, .t-clarity, .t-hormone{grid-column:auto; min-height:420px} .t-hormone::after{background:linear-gradient(0deg, rgba(6,16,22,.8) 0%, rgba(6,16,22,.1) 60%)} .t-hormone{justify-content:flex-end} }

/* statement with inline photo pills */
.statement{background:var(--bg-2)}
.statement p.big{font-size:clamp(2.1rem, 5.2vw, 5.4rem); font-weight:800; letter-spacing:-.04em; line-height:1.1}
.statement p.big .muted{color:var(--ink-3)}
.pill-img{display:inline-block; width:1.9em; height:.92em; border-radius:999px; overflow:hidden; vertical-align:-.08em; margin-inline:.08em; box-shadow:var(--shadow-sm)}
.pill-img img{width:100%; height:100%; object-fit:cover}
.statement .row{display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,.6fr); align-items:end; gap:clamp(2rem,5vw,5rem)}
@media (max-width:900px){ .statement .row{grid-template-columns:1fr} }
.statement .side{max-width:34ch; color:var(--ink-2)}
.statement .side .btn{margin-top:1.4rem}

/* symptoms (interactive) */
.dark{background:var(--charcoal); color:#fff}
.dark .eyebrow{color:var(--blue)}
.dark .lede{color:rgba(255,255,255,.78)}
.symp{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(2rem, 6vw, 6rem); align-items:center}
.symp-photo{position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/5}
.symp-photo img{width:100%; height:100%; object-fit:cover; object-position:50% 25%}
.symp-photo .stamp{position:absolute; left:1.2rem; bottom:1.2rem; right:1.2rem; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); backdrop-filter:blur(14px); border-radius:var(--r-sm); padding:1rem 1.2rem; font-weight:600; font-size:.98rem}
.symp h2{margin-top:1.1rem}
.symp .lede{margin-top:1.2rem}
.chips{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2rem}
.chip{font:inherit; font-weight:700; font-size:1.02rem; color:#fff; background:transparent; border:1.5px solid rgba(255,255,255,.35); border-radius:999px; padding:.8rem 1.2rem; cursor:pointer; display:inline-flex; align-items:center; gap:.55rem; transition:background-color .2s ease, border-color .2s ease, color .2s ease}
.chip:hover{border-color:#fff}
.chip:focus-visible{outline:3px solid var(--blue); outline-offset:3px}
.chip .ck{width:20px; height:20px; border-radius:50%; border:1.5px solid rgba(255,255,255,.5); display:grid; place-items:center}
.chip .ck svg{width:12px; height:12px; opacity:0}
.chip[aria-pressed="true"]{background:var(--blue); border-color:var(--blue); color:#0B1B24}
.chip[aria-pressed="true"] .ck{background:#0B1B24; border-color:#0B1B24; color:var(--blue)}
.chip[aria-pressed="true"] .ck svg{opacity:1}
.symp-out{margin-top:2rem; padding:1.4rem 1.5rem; border-radius:var(--r-md); background:var(--charcoal-2); display:flex; justify-content:space-between; align-items:center; gap:1.2rem; flex-wrap:wrap}
.symp-out b{font-size:1.25rem; letter-spacing:-.01em}
.symp-out span{display:block; color:rgba(255,255,255,.72); font-size:.95rem; margin-top:.2rem}
@media (max-width:900px){ .symp{grid-template-columns:1fr} .symp-photo{aspect-ratio:4/3} }

/* how it works: sticky photo stage */
.how{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem, 6vw, 6rem)}
.stage{position:sticky; top:110px; height:min(78vh, 720px); border-radius:var(--r-lg); overflow:hidden; background:#0B1B24}
.stage img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .6s ease}
.stage img.on{opacity:1}
.stage .ui{position:absolute; left:1.4rem; right:1.4rem; bottom:1.4rem; background:var(--surface); color:var(--ink); border-radius:var(--r-md); padding:1.1rem 1.3rem; box-shadow:var(--shadow); display:flex; align-items:center; gap:1rem}
.stage .ui .ic{width:46px; height:46px; border-radius:14px; flex:none; display:grid; place-items:center; background:var(--sky); color:var(--blue-deep)}
.stage .ui .ic svg{width:22px; height:22px}
.stage .ui b{display:block; font-size:1.05rem}
.stage .ui span{color:var(--ink-2); font-size:.92rem}
.stage .count{position:absolute; top:1.4rem; left:1.4rem; background:rgba(0,0,0,.4); color:#fff; backdrop-filter:blur(8px); border-radius:999px; padding:.45rem .9rem; font-weight:800; font-size:.85rem; letter-spacing:.06em}
.steps{list-style:none; margin:0; padding:0}
.step{padding-block:clamp(3rem, 12vh, 7rem); border-top:1.5px solid var(--line); opacity:.38; transition:opacity .4s ease}
.step:first-child{border-top:0; padding-top:1rem}
.step.on{opacity:1}
.step .num{font-size:clamp(4rem, 8vw, 7rem); font-weight:800; letter-spacing:-.05em; line-height:1; color:var(--blue)}
.step h3{font-size:clamp(1.9rem, 3.2vw, 2.9rem); margin-top:.8rem}
.step p{color:var(--ink-2); margin-top:.9rem; max-width:40ch}
.step .m-img{display:none}
@media (max-width:900px){
  .how{grid-template-columns:1fr} .stage{display:none}
  .step{opacity:1; padding-block:2.4rem}
  .step .m-img{display:block; border-radius:var(--r-md); overflow:hidden; aspect-ratio:16/10; margin-top:1.3rem}
  .step .m-img img{width:100%; height:100%; object-fit:cover; object-position:50% 45%}
}

/* results + app */
.results{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem, 6vw, 6rem); align-items:center}
.res-visual{position:relative; padding:0 0 3rem 3rem}
.res-photo{border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/5}
.res-photo img{width:100%; height:100%; object-fit:cover}
.chart-card{position:absolute; left:0; bottom:0; width:min(420px, 88%); background:var(--surface); color:var(--ink); border-radius:var(--r-md); padding:1.4rem; box-shadow:var(--shadow)}
.chart-card .cc-top{display:flex; justify-content:space-between; align-items:baseline; gap:1rem}
.chart-card b{font-size:1.1rem}
.chart-card small{color:var(--ink-3); font-size:.8rem}
.chart-card svg.chart{width:100%; height:auto; margin-top:.8rem}
.status{display:inline-flex; align-items:center; gap:.4rem; font-weight:700; font-size:.85rem; padding:.3rem .7rem; border-radius:999px}
.status svg{width:14px; height:14px}
.s-low{background:#FFF1E6; color:#8A3A00}
.s-ok{background:var(--sky); color:var(--blue-ink)}
.chart-card .legend{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.6rem}
.app-list{list-style:none; margin:2rem 0 0; padding:0; display:grid; gap:1rem}
.app-list li{display:flex; gap:1rem; align-items:flex-start; padding:1.1rem 1.2rem; border-radius:var(--r-md); background:var(--bg-2); border:1px solid var(--line)}
.app-list .ic{width:44px; height:44px; border-radius:14px; flex:none; display:grid; place-items:center; background:var(--blue); color:#0B1B24}
.app-list .ic svg{width:22px; height:22px}
.app-list b{display:block; font-size:1.08rem}
.app-list span{color:var(--ink-2); font-size:.96rem}
@media (max-width:900px){ .results{grid-template-columns:1fr} .res-visual{padding:0 0 3rem 1rem} }

/* doctor band */
.doc{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); min-height:680px}
.doc-photo{position:relative; min-height:420px}
.doc-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 20%}
.doc-copy{padding:clamp(3rem, 8vw, 7rem) var(--pad); display:flex; flex-direction:column; justify-content:center; max-width:720px}
.doc-copy h2{margin-top:1.1rem}
.doc-copy .lede{margin-top:1.3rem}
.doc-points{list-style:none; margin:2.2rem 0 0; padding:0; display:grid}
.doc-points li{display:grid; grid-template-columns:3.2rem 1fr; gap:1rem; padding:1.2rem 0; border-top:1px solid rgba(255,255,255,.16)}
.doc-points .n{font-weight:800; color:var(--blue); font-size:1.05rem}
.doc-points b{display:block; font-size:1.15rem}
.doc-points span{color:rgba(255,255,255,.72); font-size:.98rem}
@media (max-width:900px){ .doc{grid-template-columns:1fr} }

/* pricing */
.pricing{background:var(--sky)}
.prices{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1.2rem; align-items:stretch}
.price{background:var(--surface); border-radius:var(--r-lg); padding:clamp(1.6rem, 2.6vw, 2.4rem); display:flex; flex-direction:column; box-shadow:var(--shadow-sm)}
.price .tag{align-self:flex-start; font-size:.75rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:.4rem .8rem; border-radius:999px; background:var(--sky); color:var(--blue-ink)}
.price h3{font-size:1.6rem; margin-top:1.4rem; letter-spacing:-.02em}
.price .amt{font-size:clamp(3.4rem, 5.4vw, 5rem); font-weight:800; letter-spacing:-.05em; line-height:1; margin-top:.8rem}
.price .amt small{font-size:1rem; font-weight:600; letter-spacing:0; color:var(--ink-3)}
.price ul{list-style:none; margin:1.6rem 0 2rem; padding:0; display:grid; gap:.7rem; color:var(--ink-2); font-size:1rem}
.price li{display:flex; gap:.6rem}
.price li svg{width:20px; height:20px; flex:none; color:var(--blue-deep); margin-top:.2rem}
.price .btn{margin-top:auto}
.price.feature{background:var(--charcoal); color:#fff}
:root[data-theme="dark"] .price.feature{background:#000; outline:1.5px solid var(--blue)}
.price.feature .tag{background:var(--blue); color:#0B1B24}
.price.feature ul{color:rgba(255,255,255,.8)}
.price.feature li svg{color:var(--blue)}
.price.feature .amt small{color:rgba(255,255,255,.65)}
.tbc{display:inline-block; font-size:.75rem; font-weight:800; letter-spacing:.06em; background:#FFE8D6; color:#7A3300; padding:.2rem .5rem; border-radius:6px; vertical-align:middle; margin-left:.4rem}
.price-note{margin-top:1.5rem; color:var(--ink-2); font-size:.95rem}
@media (max-width:960px){ .prices{grid-template-columns:1fr} }

/* longer view full-bleed */
.longer{position:relative; min-height:min(90vh, 820px); display:flex; align-items:flex-end; color:#fff; overflow:hidden; isolation:isolate}
.longer img{position:absolute; left:0; right:0; top:-10%; width:100%; height:120%; object-fit:cover; object-position:72% 0%; z-index:-2; will-change:transform}
.longer::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, rgba(6,16,22,.88) 0%, rgba(6,16,22,.45) 38%, rgba(6,16,22,0) 68%), linear-gradient(90deg, rgba(6,16,22,.35) 0%, rgba(6,16,22,0) 55%)}
.longer .wrap{width:100%; padding-bottom:clamp(3rem, 8vw, 6rem)}
.longer h2{font-size:clamp(3rem, 8vw, 8rem); line-height:.95; max-width:12ch}
@media (max-width:900px){ .longer img{top:0; height:100%; transform:none !important} }
.longer p{margin-top:1.4rem; max-width:44ch; font-size:1.2rem; color:rgba(255,255,255,.88)}

/* learn */
.posts{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1.2rem}
.post{text-decoration:none; display:flex; flex-direction:column; gap:1rem}
.post .ph{border-radius:var(--r-md); overflow:hidden; aspect-ratio:4/3}
.post .ph img{width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.post:hover .ph img{transform:scale(1.05)}
.post .cat{font-size:.78rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--blue-deep)}
.post h3{font-size:1.5rem; letter-spacing:-.02em; line-height:1.2}
.post:focus-visible{outline:3px solid var(--blue); outline-offset:6px; border-radius:var(--r-md)}
@media (max-width:900px){ .posts{grid-template-columns:1fr} }

/* faq */
.faq{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(2rem, 6vw, 6rem)}
.faq-head{position:sticky; top:120px; align-self:start}
.faq-head h2{margin-top:1.1rem}
.faq-head .lede{margin-top:1.2rem}
details{border-top:1.5px solid var(--line)}
details:last-child{border-bottom:1.5px solid var(--line)}
summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1.5rem; padding:1.6rem 0; font-size:clamp(1.15rem, 1.6vw, 1.4rem); font-weight:700; letter-spacing:-.015em}
summary::-webkit-details-marker{display:none}
summary:focus-visible{outline:3px solid var(--blue); outline-offset:4px; border-radius:6px}
summary .pm{width:40px; height:40px; border-radius:50%; flex:none; display:grid; place-items:center; background:var(--sky); color:var(--blue-deep); transition:transform .3s ease}
summary .pm svg{width:18px; height:18px}
details[open] summary .pm{transform:rotate(45deg)}
details p{padding:0 3.5rem 1.7rem 0; color:var(--ink-2)}
@media (max-width:900px){ .faq{grid-template-columns:1fr} .faq-head{position:static} details p{padding-right:0} }

/* closing */
.closing{position:relative; min-height:min(92vh, 860px); display:flex; align-items:center; color:#fff; overflow:hidden; isolation:isolate; text-align:center}
.closing img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2}
.closing::after{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse at center, rgba(6,16,22,.55) 0%, rgba(6,16,22,.25) 60%, rgba(6,16,22,.1) 100%)}
.closing .wrap{width:100%}
.closing h2{font-size:clamp(3.2rem, 9vw, 9rem); line-height:.94; letter-spacing:-.045em}
.closing p{margin:1.5rem auto 0; max-width:40ch; font-size:1.2rem; color:rgba(255,255,255,.9)}
.closing .ctas{display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; margin-top:2.4rem}

/* footer */
.foot{background:var(--charcoal); color:rgba(255,255,255,.78); padding:5rem 0 2.5rem; font-size:.96rem; position:relative; overflow:hidden}
/* 15 Oct 2026 (Shan): brand "A" watermark, blue fading to transparent */
.foot-mark{position:absolute; right:3%; bottom:8%; width:clamp(160px, 20vw, 300px); aspect-ratio:473/476; pointer-events:none; opacity:.16;
  background:linear-gradient(140deg, var(--blue, #00AEEF) 10%, rgba(0,174,239,.35) 55%, rgba(0,174,239,0) 90%);
  -webkit-mask:var(--apx-mark) center/contain no-repeat; mask:var(--apx-mark) center/contain no-repeat}
.foot > .wrap{position:relative; z-index:1}
@media (max-width:800px){ .foot-mark{right:5%; bottom:3%; width:42vw; opacity:.12} }
:root[data-theme="dark"] .foot{background:#08090A}
.foot-grid{display:grid; grid-template-columns:1.4fr repeat(3, 1fr); gap:2rem}
.foot img{height:40px; width:auto; filter:none}
.foot h4{margin:0 0 1rem; color:#fff; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:.55rem}
.foot a{text-decoration:none}
.foot a:hover{color:#fff; text-decoration:underline}
.foot .fine{margin-top:4rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.14); font-size:.84rem; color:rgba(255,255,255,.6)}
@media (max-width:800px){ .foot-grid{grid-template-columns:1fr 1fr} .foot-grid > :first-child{grid-column:1/-1} }

/* reveal (only when JS runs) */
.js .rv{opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .js .rv{opacity:1; transform:none; transition:none} }

/* mobile sticky */
.stickybar{position:fixed; left:0; right:0; bottom:0; z-index:45; display:none; gap:.6rem; padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom,0px)); background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(12px); border-top:1px solid var(--line)}
.stickybar .btn{flex:1; padding:.95rem 1rem}
@media (max-width:760px){ .stickybar{display:flex; transform:translateY(110%); transition:transform .25s ease} .stickybar.show{transform:none} }
@media (prefers-reduced-motion:reduce){ .stickybar{transition:none} }

/* rotating phrase (typewriter) */
.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}
.rot{color:var(--ink-3); white-space:nowrap}
.rot-caret{display:inline-block; width:.07em; height:.9em; margin-left:.06em; vertical-align:-.08em; background:var(--blue); animation:rotBlink 1s steps(1) infinite}
@keyframes rotBlink{ 50%{ opacity:0 } }
@media (prefers-reduced-motion:reduce){ .rot-caret{display:none} }

/* results chart animation (plays once in view) */
.res-visual .ch-line{stroke-dasharray:100; stroke-dashoffset:100}
.res-visual .ch-clip{transform:scaleX(0); transform-origin:left; transform-box:fill-box}
.res-visual .ch-dot, .res-visual .ch-chip{opacity:0; transform:scale(.6); transform-box:fill-box; transform-origin:center}
.res-visual .ch-pulse{opacity:0; transform-box:fill-box; transform-origin:center}
.res-visual.play .ch-line{transition:stroke-dashoffset 1.6s cubic-bezier(.45,.05,.2,1) .3s; stroke-dashoffset:0}
.res-visual.play .ch-clip{transition:transform 1.6s cubic-bezier(.45,.05,.2,1) .3s; transform:scaleX(1)}
.res-visual.play .ch-dot, .res-visual.play .ch-chip{opacity:1; transform:none; transition:opacity .35s ease, transform .45s cubic-bezier(.16,1,.3,1)}
.res-visual.play .ch-d1{transition-delay:.2s} .res-visual.play .ch-c1{transition-delay:.45s}
.res-visual.play .ch-d2{transition-delay:1.1s} .res-visual.play .ch-d3{transition-delay:1.8s} .res-visual.play .ch-c2{transition-delay:2.0s}
.res-visual.play .ch-pulse{animation:chPulse 2.2s ease-out 2.2s infinite}
@keyframes chPulse{ 0%{opacity:.8; transform:scale(1)} 100%{opacity:0; transform:scale(3)} }
.res-visual.play .chart-card{animation:chFloat 6s ease-in-out 2.4s infinite}
@keyframes chFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-8px) } }
.res-visual .res-photo img{transition:transform 8s ease-out}
.res-visual.play .res-photo img{transform:scale(1.06)}
@media (prefers-reduced-motion:reduce){
  .res-visual .ch-line{stroke-dasharray:none; stroke-dashoffset:0}
  .res-visual .ch-clip{transform:none}
  .res-visual .ch-dot, .res-visual .ch-chip{opacity:1; transform:none}
  .res-visual.play .chart-card, .res-visual.play .ch-pulse{animation:none}
  .res-visual.play .res-photo img{transform:none}
}

/* ---- review fixes 29 Sep (P1/P2) ---- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .btn-dark{background:#fff; color:#191919}
  :root:not([data-theme="light"]) .price.feature{background:#000; outline:1.5px solid var(--blue)}
  :root:not([data-theme="light"]) .foot{background:#08090A}
  :root:not([data-theme="light"]) .head.solid .logo img{filter:none}
  :root:not([data-theme="light"]) .s-low{background:#3A1E0B; color:#FFB27A}
}
:root[data-theme="dark"] .s-low{background:#3A1E0B; color:#FFB27A}
.drawer{overflow-y:auto}
.drawer a:not(.btn){font-size:2.2rem; font-weight:800; letter-spacing:-.03em; text-decoration:none; padding:.3rem 0}
.drawer .btn{margin-top:1rem; align-self:flex-start}
.tile .tag{background:rgba(6,16,22,.5); border-color:rgba(255,255,255,.28)}
html{scroll-padding-top:96px}
:focus-visible{outline:3px solid var(--blue-deep); outline-offset:3px}
.btn:focus-visible,.vid-btn:focus-visible,.tile:focus-visible,.chip:focus-visible,.post:focus-visible,summary:focus-visible{outline-color:var(--blue-deep)}
.hero :focus-visible,.dark :focus-visible,.drawer :focus-visible,.closing :focus-visible,.foot :focus-visible,.tile:focus-visible,.head:not(.solid) :focus-visible{outline-color:#fff}
.step{opacity:1}
.step:not(.on) .num,.step:not(.on) h3{opacity:.45; transition:opacity .4s ease}
.step .num{color:var(--blue-deep)}
.rot{display:inline-block; min-width:8.6ch; text-align:left}
.rot.done .rot-caret{display:none}
.res-visual.play .ch-pulse{animation-iteration-count:3}
.res-visual.play .chart-card{animation-iteration-count:3}
.closing::after{background:radial-gradient(ellipse at center, rgba(6,16,22,.68) 0%, rgba(6,16,22,.4) 60%, rgba(6,16,22,.2) 100%)}
.foot h3{margin:0 0 1rem; color:#fff; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; line-height:1.3}
.foot li a{display:inline-block; padding:.35rem 0}
.skip{position:absolute; left:1rem; top:-4rem; z-index:100; background:var(--blue-deep); color:#fff; padding:.7rem 1rem; border-radius:8px; font-weight:700; text-decoration:none}
.skip:focus{top:1rem}
@media (max-width:760px){
  .stickybar{visibility:hidden; transition:transform .25s ease, visibility 0s .25s}
  .stickybar.show{visibility:visible; transition:transform .25s ease}
  .foot{padding-bottom:calc(6rem + env(safe-area-inset-bottom,0px))}
  html{scroll-padding-bottom:90px}
}
@media (prefers-reduced-motion:reduce){ .tile img,.post .ph img,.btn,.tile .go{transition:none} }

/* ---- UX round 30 Sep ---- */
.hero .cta-note{margin-top:1rem; font-size:.9rem; font-weight:600; color:rgba(255,255,255,.8); letter-spacing:.01em}
.car-dots{display:none}
@media (max-width:760px){
  .bento, .steps{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; gap:.8rem; margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad); scroll-padding-inline:var(--pad); scrollbar-width:none; -webkit-overflow-scrolling:touch}
  .bento::-webkit-scrollbar, .steps::-webkit-scrollbar{display:none}
  .bento .tile{flex:0 0 84%; min-height:440px; scroll-snap-align:start}
  .js .bento .rv{opacity:1; transform:none}
  .steps .step{flex:0 0 86%; scroll-snap-align:start; border-top:0; padding-block:0; display:flex; flex-direction:column}
  .steps .step .m-img{order:-1; margin:0 0 1.1rem}
  .steps .step .num{font-size:2.6rem}
  .steps .step h3{margin-top:.4rem; font-size:1.7rem}
  .steps .step .num, .steps .step h3{opacity:1}
  .car-dots{display:flex; justify-content:center; gap:.5rem; margin-top:1.3rem}
  .car-dots button{width:8px; height:8px; padding:0; border:0; border-radius:99px; background:var(--line); cursor:pointer; transition:background .25s ease}
  .car-dots button.on{width:22px; background:var(--blue-deep)}
  .stickybar.show.at-end{transform:translateY(110%); visibility:hidden; transition:transform .25s ease, visibility 0s .25s}
}
@media (prefers-reduced-motion:reduce){ .car-dots button{transition:none} }

/* ==== 8 Oct 2026 (laptop): Cameron's 6 Oct picks: ticker (option C, faster), light "Sound familiar?", services core first. Ported from apex-site-review.vercel.app index-r2. ==== */
/* ---- point 1, option C: slow ticker, pausable, static with reduced motion ---- */
.ticker{display:flex; align-items:center; gap:.4rem; background:var(--bg); border-bottom:1px solid var(--line); padding-right:var(--pad)}
.tk-view{flex:1; min-width:0; overflow:hidden; padding-block:1.55rem; -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%)}
.tk-track{display:flex; width:max-content; animation:tkMove calc(var(--tk-dur, 38s) * .8) linear infinite} /* 12 Oct 2026: Cameron 9 Oct, every ticker 25% faster */
.tk-set{display:flex; list-style:none; margin:0; padding:0}
.tk-set li{position:relative; display:flex; align-items:center; gap:.75rem; padding-inline:2.3rem; font-weight:800; font-size:clamp(1.15rem, 1.7vw, 1.55rem); letter-spacing:-.02em; white-space:nowrap; color:var(--ink)}
.tk-set li::before{content:""; position:absolute; left:0; top:50%; width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:50%; background:var(--blue)}
.tk-set .pi{color:var(--blue-deep); display:grid}
.tk-set .pi svg{width:26px; height:26px}
@keyframes tkMove{ to{ transform:translateX(-33.3333%) } }
.ticker.paused .tk-track{animation-play-state:paused}
/* 15 Oct 2026 (Cameron + Shan): no pause/play buttons; a ticker pauses while hovered (desktop), touched (phones) or focused (keyboard) */
.tk-btn, .vid-btn{display:none !important}
.ticker{padding-right:0}
.ticker:hover .tk-track, .ticker:focus-within .tk-track, .ticker.touching .tk-track{animation-play-state:paused}
.tk-btn{flex:none; width:40px; height:40px; border-radius:50%; border:1.5px solid var(--line); background:var(--surface); color:var(--ink); display:grid; place-items:center; cursor:pointer}
.tk-btn svg{width:15px; height:15px}
.tk-btn:hover{border-color:var(--ink)}
@media (max-width:760px){ .tk-view{padding-block:1.1rem} .tk-set li{padding-inline:1.6rem; font-size:1.08rem} .tk-set .pi svg{width:22px; height:22px} .tk-btn{width:36px; height:36px} }
@media (prefers-reduced-motion:reduce){
  .ticker{padding-right:0}
  .tk-track{animation:none; width:auto; justify-content:center}
  .tk-set[aria-hidden="true"], .tk-btn{display:none}
  .tk-view{-webkit-mask-image:none; mask-image:none; padding-inline:var(--pad)}
  .tk-set{flex-wrap:wrap; justify-content:center; row-gap:.7rem}
  .tk-set li::before{display:none}
  .tk-set{column-gap:clamp(1.5rem, 3.2vw, 3.2rem)}
  .tk-set li{padding-inline:0; font-size:clamp(1rem, 1.35vw, 1.3rem)}
}
@media (prefers-reduced-motion:reduce) and (max-width:760px){
  .tk-set{display:grid; grid-template-columns:1fr 1fr; gap:.9rem 1rem}
  .tk-set li{padding-inline:0; white-space:normal; font-size:.95rem; line-height:1.25; gap:.55rem}
  .tk-set li::before{display:none}
}

.tk-set a{color:inherit; text-decoration:none; display:inline-flex; align-items:center; gap:.6rem}
.tk-set a:hover span{color:var(--blue-deep)}
.tk-tag{font-style:normal; font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; background:var(--blue); color:#0B1B24; padding:.3rem .6rem; border-radius:999px}
/* ---- point 3: "Sound familiar?" on the pricing section's light blue (var(--sky)) ---- */
#symptoms.is-light{background:var(--sky); color:var(--ink)}
#symptoms.is-light .eyebrow{color:var(--blue-deep)}
#symptoms.is-light .lede{color:var(--ink-2)}
#symptoms.is-light :focus-visible{outline-color:var(--blue-deep)}
#symptoms.is-light .chip{color:var(--ink); background:var(--surface); border-color:color-mix(in srgb, var(--blue-deep) 24%, transparent); box-shadow:0 6px 16px -12px rgba(0,58,87,.5)}
#symptoms.is-light .chip:hover{border-color:var(--blue-deep)}
#symptoms.is-light .chip .ck{border-color:var(--ink-3)}
#symptoms.is-light .chip[aria-pressed="true"]{background:var(--blue); border-color:var(--blue); color:#0B1B24}
#symptoms.is-light .chip[aria-pressed="true"] .ck{background:#0B1B24; border-color:#0B1B24; color:var(--blue)}
#symptoms.is-light .symp-out{background:var(--surface); box-shadow:var(--shadow-sm)}
#symptoms.is-light .symp-out span{color:var(--ink-2)}
#symptoms.is-light .symp-photo{box-shadow:var(--shadow)}
#symptoms.is-light .stamp{background:var(--surface); color:var(--ink); border:0; backdrop-filter:none; box-shadow:var(--shadow-sm); display:flex; align-items:center; gap:.7rem}
#symptoms.is-light .stamp::before{content:""; flex:none; width:4px; align-self:stretch; border-radius:4px; background:var(--blue)}

/* ---- point 4: services, core service first ---- */
#goals .svc-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(.8rem, 1.4vw, 1.25rem)}
#goals .svc{position:relative; border-radius:var(--r-lg); overflow:hidden; color:#fff; text-decoration:none; isolation:isolate; display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(1.3rem, 2.2vw, 2rem); background:#0B1B24; min-height:460px}
#goals .svc img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 22%; z-index:-2; transition:transform .8s cubic-bezier(.2,.7,.2,1)}
#goals .svc::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, rgba(6,16,22,.92) 0%, rgba(6,16,22,.6) 36%, rgba(6,16,22,0) 64%)}
#goals .svc:hover img{transform:scale(1.05)}
#goals .svc:focus-visible{outline:3px solid var(--blue-deep); outline-offset:4px}
#goals .svc .txt{padding-right:64px}
#goals .svc h3{font-size:clamp(1.6rem, 2.3vw, 2.2rem); letter-spacing:-.03em; line-height:1.05}
#goals .svc p{margin-top:.55rem; font-size:1rem; line-height:1.45; color:rgba(255,255,255,.9); max-width:34ch}
#goals .svc .go{position:absolute; right:clamp(1.1rem,2vw,1.6rem); bottom:clamp(1.1rem,2vw,1.6rem); width:52px; height:52px; border-radius:50%; background:var(--blue); color:#0B1B24; display:grid; place-items:center; transition:transform .3s ease}
#goals .svc:hover .go{transform:rotate(-45deg)}
#goals .svc .go svg{width:22px; height:22px}
#goals .svc-goals{list-style:none; margin:1rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem}
#goals .svc-goals li{font-size:.78rem; font-weight:700; letter-spacing:.01em; padding:.32rem .7rem; border-radius:999px; background:rgba(6,16,22,.5); border:1px solid rgba(255,255,255,.3); backdrop-filter:blur(8px)}
#goals .svc-goals .svc-for{align-self:center; padding:0 .25rem 0 0; background:none; border:0; backdrop-filter:none; font-size:.66rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.72)}
#goals .svc-core{grid-column:1 / -1; min-height:clamp(540px, 44vw, 640px); justify-content:center}
#goals .svc-core img{object-position:68% 40%}
#goals .svc-core::after{background:linear-gradient(90deg, rgba(6,16,22,.9) 0%, rgba(6,16,22,.62) 38%, rgba(6,16,22,.1) 66%, rgba(6,16,22,0) 80%)}
#goals .svc-core .txt{max-width:660px; padding-right:0}
#goals .svc-core h3{font-size:clamp(2.4rem, 4.4vw, 4.4rem); line-height:.98; letter-spacing:-.04em; max-width:14ch}
#goals .svc-core > .txt > p:not(.svc-note){font-size:1.15rem; margin-top:1.1rem; max-width:44ch}
#goals .svc-core .svc-goals{margin-top:1.3rem}
#goals .svc-core .svc-goals li{font-size:.86rem; padding:.4rem .85rem}
#goals .svc-core .go{width:60px; height:60px}
#goals .svc-flag{align-self:flex-start; display:inline-flex; align-items:center; gap:.5rem; background:var(--blue); color:#0B1B24; font-size:.78rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; padding:.5rem .95rem; border-radius:999px; margin-bottom:1.3rem}
#goals .svc-flag svg{width:14px; height:14px}
#goals .svc-core .txt{display:flex; flex-direction:column}
#goals .svc .svc-note{margin-top:1.3rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,.2); font-size:.95rem; color:rgba(255,255,255,.78); max-width:48ch}
@media (max-width:1020px){
#goals .svc{min-height:420px}
#goals .svc h3{font-size:1.55rem}
}
@media (max-width:760px){
#goals .svc-grid{grid-template-columns:1fr}
#goals .svc{min-height:300px}
#goals .svc-core{min-height:600px; justify-content:flex-end}
#goals .svc-core img{object-position:48% 30%}
#goals .svc-core::after{background:linear-gradient(0deg, rgba(6,16,22,.94) 0%, rgba(6,16,22,.72) 48%, rgba(6,16,22,.1) 75%, rgba(6,16,22,0) 100%)}
#goals .svc-core h3{font-size:2.3rem}
#goals .svc-core > .txt > p:not(.svc-note){font-size:1.02rem}
#goals .svc-core .go{top:clamp(1.1rem,2vw,1.6rem); bottom:auto}
#goals .svc-rec img{object-position:50% 40%}
}
/* "start with how you feel" finder */
#goals /
.finder{margin-top:clamp(2.5rem, 5vw, 4rem); padding-top:clamp(2rem, 4vw, 3rem); border-top:1.5px solid var(--line); display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,2.25fr); gap:clamp(1.5rem, 4vw, 4rem); align-items:start}
#goals .finder h3{font-size:clamp(1.6rem, 2.4vw, 2.2rem); letter-spacing:-.03em; line-height:1.1}
#goals .finder h3 span{display:block; color:var(--blue-deep)}
#goals .finder ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:.7rem}
#goals .finder a{height:100%; display:flex; flex-direction:column; gap:.35rem; padding:1rem 1.2rem; border-radius:var(--r-md); background:var(--bg-2); border:1px solid var(--line); text-decoration:none; transition:border-color .2s ease, transform .2s ease}
#goals .finder a:hover{border-color:var(--blue-deep); transform:translateY(-2px)}
#goals .finder b{font-size:1.08rem; letter-spacing:-.01em; line-height:1.25}
#goals .finder small{display:flex; align-items:flex-start; gap:.4rem; font-size:.86rem; font-weight:700; color:var(--blue-deep); line-height:1.3}
#goals .finder small svg{width:14px; height:14px; flex:none; margin-top:.15rem}
@media (max-width:1020px){
#goals .finder{grid-template-columns:1fr}
}
@media (max-width:620px){
#goals .finder ul{grid-template-columns:1fr 1fr; gap:.55rem}
#goals .finder a{padding:.85rem .9rem; border-radius:var(--r-sm)}
#goals .finder b{font-size:.98rem}
#goals .finder small{font-size:.78rem}
}
@media (prefers-reduced-motion:reduce){
#goals .svc img, #goals .svc .go, #goals .finder a{transition:none}
}
@media (max-width:520px){ .hero .eyebrow{font-size:.7rem; letter-spacing:.09em; gap:.55rem} .hero .eyebrow::before{width:20px} }

/* 12 Oct 2026: Cameron 9 Oct, logo in its normal colours everywhere (the white filter hid the TRT bar) */

/* 19 Oct 2026: the Apex TRT "A" symbol as a soft watermark beyond the footer (Learn hero, 404). Same look as .foot-mark. */
.apx-mark{position:absolute; aspect-ratio:473/476; pointer-events:none; z-index:0; opacity:.14;
  background:linear-gradient(140deg, var(--blue, #00AEEF) 10%, rgba(0,174,239,.35) 55%, rgba(0,174,239,0) 90%);
  -webkit-mask:var(--apx-mark) center/contain no-repeat; mask:var(--apx-mark) center/contain no-repeat}
.apx-learn-hero .apx-mark{right:-2%; bottom:-30%; width:clamp(240px, 34vw, 520px)}
.apx-learn-hero > .wrap{position:relative; z-index:1}
.apx-sys{position:relative; overflow:hidden}
.apx-sys .apx-mark{right:-6%; top:50%; transform:translateY(-50%); width:clamp(280px, 46vw, 700px); opacity:.12}
.apx-sys > .wrap{position:relative; z-index:1}
@media (max-width:800px){ .apx-learn-hero .apx-mark{right:-22%; bottom:-12%; width:70vw; opacity:.1} .apx-sys .apx-mark{right:-30%; width:95vw; opacity:.1} }