:root{
  --bg:#FFFFFF; --ink:#1F2E3B; --body:#3A4A58; --muted:#6B7F90; --paper:#EDF3F6; --paper2:#F6F9FB;
  --rule:#DCE5EB; --rule-strong:#B8CCD9; --navy:#425B70; --navy-ink:#FFFFFF; --soft:#B8CCD9; --line:#FFFFFF;
  --logo-ink:#2F4356; --logo-mauve:#8E6A8A; --logo-blue:#5B86B0; --logo-dots:#C9B3C6;
  --serif:"Newsreader","Iowan Old Style",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --max:1240px; --gut:24px;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#111A22; --ink:#E7EEF3; --body:#C3D0DA; --muted:#8FA3B3; --paper:#18242F; --paper2:#15202A;
  --rule:#253646; --rule-strong:#35495C; --navy:#B8CCD9; --navy-ink:#14212C;
  --logo-ink:#E7EEF3; --logo-mauve:#C8A9C4; --logo-blue:#8DB2D6; --logo-dots:#7D6A7B; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#111A22; --ink:#E7EEF3; --body:#C3D0DA; --muted:#8FA3B3; --paper:#18242F; --paper2:#15202A;
  --rule:#253646; --rule-strong:#35495C; --navy:#B8CCD9; --navy-ink:#14212C;
  --logo-ink:#E7EEF3; --logo-mauve:#C8A9C4; --logo-blue:#8DB2D6; --logo-dots:#7D6A7B; color-scheme:dark}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 80px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--body);font:400 16px/1.6 var(--sans)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--logo-blue);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:400;color:var(--ink);font-optical-sizing:auto}
h1 em,h2 em{font-style:normal;font-weight:600;font-size:.9em;color:var(--muted)}
.hero h1 em{display:block;width:fit-content;width:-moz-fit-content;margin:0 auto;position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.05em;background:currentColor;border-radius:1px}
@media (prefers-reduced-motion:no-preference){
  .js .hero h1 em::after{transform:scaleX(0);transform-origin:left center;animation:uline .9s cubic-bezier(.2,.7,.2,1) .9s forwards}
  @keyframes uline{to{transform:scaleX(1)}}
}
h1,h2{text-wrap:balance}

/* preview note */
.note{background:var(--paper);border-bottom:1px solid var(--rule);font:400 12.5px/1.5 var(--mono);color:var(--muted)}
.note .wrap{padding-top:9px;padding-bottom:9px}

/* header */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--rule)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:21;background:var(--bg)}
.top .wrap{display:flex;align-items:center;gap:36px;height:64px}
.wm{height:20px;width:auto;display:block}
.top nav{display:flex;gap:28px;margin-left:auto;font-size:14.5px}
.top nav a{text-decoration:none;color:var(--body)}
.top nav a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--navy);color:var(--navy-ink);text-decoration:none;font:500 14.5px/1 var(--sans);padding:12px 18px;border-radius:999px;border:1px solid var(--navy)}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule-strong)}
.btn.sm{padding:9px 15px;font-size:14px}

/* shared */
.eyebrow{display:block;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.eyebrow::after{content:" /"}
.sec{padding:120px 0;border-top:1px solid var(--rule)}
.sec.paper{background:var(--paper2)}
.head{max-width:760px;margin:0 auto 64px;text-align:center}
.head h2{font-size:clamp(34px,4.4vw,56px);line-height:1.04;letter-spacing:-.015em}
.head p{margin:20px auto 0;max-width:36em;font-size:17.5px;line-height:1.55}
.br{font-family:var(--mono);font-weight:500;color:var(--muted)}
sup a{font:500 11px/1 var(--mono);text-decoration:none;color:var(--muted);padding:0 1px}
.fn{font:400 12.5px/1.55 var(--mono);color:var(--muted)}
.cap{font:400 12.5px/1.55 var(--mono);color:var(--muted);margin-top:16px}

/* hero */
.hero{padding:88px 0 0;text-align:center}
.hero .kick{font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hero h1{font-size:clamp(46px,7.4vw,96px);line-height:.98;letter-spacing:-.025em;margin:26px auto 0;max-width:11.5em}
.hero .lede{max-width:34em;margin:26px auto 0;font-size:18.5px;line-height:1.55}
.hero .actions{display:flex;justify-content:center;align-items:center;gap:22px;margin-top:34px}
.badge-link{display:inline-block;line-height:0;border-radius:8px}
.badge{height:46px;width:auto;display:block}
.textlink{font:500 15px/1 var(--sans);color:var(--ink);text-underline-offset:5px}
.proof{display:grid;grid-template-columns:repeat(3,1fr);max-width:860px;margin:60px auto 0;border-top:1px solid var(--rule)}
.proof div{padding:20px 12px 0;text-align:center}
.proof div+div{border-left:1px solid var(--rule)}
.proof b{display:block;font:500 15px/1.3 var(--sans);color:var(--ink)}
.proof span{display:block;font-size:14px;color:var(--muted);margin-top:4px}

/* analysis figure */
.an{margin-top:88px;background:var(--paper);border-top:1px solid var(--rule);padding:72px 0 64px}
.an-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px) minmax(0,1fr);gap:32px;align-items:center}
.col{display:flex;flex-direction:column;gap:18px}
.w{background:var(--bg);border:1px solid var(--rule);border-radius:10px;padding:16px 18px;text-align:left}
.w-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.w-t{font:500 13px/1.3 var(--sans);color:var(--ink)}
.w-t .br{margin-right:6px}
.w-l{font:500 11px/1 var(--mono);letter-spacing:.04em;color:var(--muted);text-transform:uppercase}
.w-v{font:400 34px/1 var(--serif);color:var(--ink);margin:12px 0 14px;font-variant-numeric:lining-nums tabular-nums}
.scale{position:relative;height:30px}
.scale .tr{position:absolute;left:0;right:0;top:9px;height:2px;background:var(--rule)}
.scale .id{position:absolute;top:3px;width:2px;height:14px;background:var(--muted);margin-left:-1px;left:var(--ideal)}
.scale .you{position:absolute;top:4px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--navy);box-shadow:0 0 0 3px var(--bg);left:var(--you)}
.scale .ends{position:absolute;left:0;right:0;top:20px;display:flex;justify-content:space-between;font:400 10.5px/1 var(--mono);color:var(--muted)}
.scale .ends i{white-space:nowrap;font-style:normal;position:absolute;transform:translateX(-50%);left:var(--ideal);color:var(--ink)}
.chip2{display:inline-block;margin-top:10px;font:500 13px/1 var(--sans);color:var(--ink);background:var(--paper);padding:8px 10px;border-radius:6px}
.bars{display:grid;gap:9px;margin-top:12px}
.bars div{display:grid;grid-template-columns:70px 1fr 26px;align-items:center;gap:10px;font-size:12.5px}
.bars span{color:var(--muted)}
.bars b{font:500 12.5px/1 var(--sans);color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.bars i{display:block;height:4px;border-radius:2px;background:var(--rule);position:relative;overflow:hidden}
.bars i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--v);background:var(--navy);border-radius:2px}
.face{position:relative;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px var(--rule)}
.face img{width:100%}
.face .ov{position:absolute;inset:0;width:100%;height:100%}
.ov .g{stroke:var(--line);stroke-width:2.6;fill:none;opacity:.95}
.ov .d{stroke-dasharray:8 8}
.ov .mesh line{stroke:#fff;stroke-width:1.6;opacity:.55}
.ov .pt{fill:rgba(255,255,255,.88);stroke:rgba(31,46,59,.35);stroke-width:5}
.ov .tag rect{fill:#1F2E3B}
.ov .tag text{fill:#fff;font:500 22px var(--mono);text-anchor:middle;dominant-baseline:central}
.scanbar{position:absolute;left:0;right:0;top:-4%;height:3px;background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.25),0 0 24px 6px rgba(184,204,217,.55);opacity:0;pointer-events:none}
.an .cap{text-align:center;max-width:62em;margin:28px auto 0}

/* report */
.rep-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
.cat details{border-top:1px solid var(--rule)}
.cat details:last-of-type{border-bottom:1px solid var(--rule)}
.cat summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto 20px;align-items:baseline;gap:14px;padding:20px 0}
.cat summary::-webkit-details-marker{display:none}
.cat summary h3{font-size:24px;line-height:1.2}
.cat summary .n{font:400 12.5px/1 var(--mono);color:var(--muted)}
.cat summary::after{content:"+";font:400 20px/1 var(--mono);color:var(--muted);transition:transform .25s;justify-self:end}
.cat details[open] summary::after{transform:rotate(45deg)}
.cat ul{list-style:none;margin:0;padding:0 0 18px;display:grid;grid-template-columns:1fr 1fr;gap:14px 28px}
.cat li b{display:block;font:500 14.5px/1.35 var(--sans);color:var(--ink)}
.cat li span{display:block;font-size:13.5px;line-height:1.45;color:var(--muted);margin-top:2px}
.cat .fn{margin-top:18px}

/* previews */
.pv{max-width:700px;margin:0 auto}
.looks{display:grid;grid-template-columns:repeat(3,1fr);max-width:900px;margin:48px auto 0;border-top:1px solid var(--rule)}
.looks div{padding:20px 22px 0}
.looks div+div{border-left:1px solid var(--rule)}
.looks h3{font-size:22px}
.looks p{font-size:14.5px;line-height:1.5;margin-top:8px}

/* steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink)}
.steps li{padding:22px 24px 0 0}
.steps li+li{padding-left:24px;border-left:1px solid var(--rule)}
.steps .br{font-size:13px}
.steps h3{font-size:24px;margin:18px 0 10px}
.steps p{font-size:14.5px;line-height:1.55}
.steps .meta{display:block;margin-top:16px;font:400 12px/1 var(--mono);color:var(--muted)}

/* experts */
.ex-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:72px;align-items:start}
.ex-grid h2{font-size:clamp(32px,3.6vw,46px);line-height:1.06;letter-spacing:-.012em}
.ex-grid .lead{margin-top:18px;font-size:17px}
.checks{list-style:none;margin:36px 0 0;padding:0}
.checks li{display:grid;grid-template-columns:34px 1fr;padding:16px 0;border-top:1px solid var(--rule)}
.checks li:last-child{border-bottom:1px solid var(--rule)}
.checks b{display:block;font:500 15px/1.4 var(--sans);color:var(--ink)}
.checks span{display:block;font-size:14.5px;line-height:1.55;margin-top:3px}
.stack{display:grid;gap:14px}

/* tracking */
.tr-grid{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:72px;align-items:center}
.tr-grid h2{font-size:clamp(32px,3.6vw,46px);line-height:1.06}
.tr-grid p{margin-top:18px;font-size:17px}

/* data */
.data{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule)}
.data li{padding:22px 24px 0 0}
.data li+li{padding-left:24px;border-left:1px solid var(--rule)}
.data b{display:block;font:500 15px/1.4 var(--sans);color:var(--ink);margin-top:14px}
.data span{display:block;font-size:14.5px;line-height:1.55;margin-top:6px}
.more{text-align:center;margin-top:40px}

/* mindset */
.mind{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut)}
.mind div{background:var(--bg);border:1px solid var(--rule);border-radius:10px;padding:26px}
.mind h3{font-size:22px;line-height:1.25}
.mind p{font-size:14.5px;line-height:1.6;margin-top:10px}

/* faq */
.faq{max-width:820px;margin:0 auto}
.faq details{border-top:1px solid var(--rule)}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:20px 0;font:500 17px/1.4 var(--sans);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 22px/1 var(--mono);color:var(--muted);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 48px 22px 0;font-size:15.5px;line-height:1.6}

/* closing */
.closing{text-align:center;padding:130px 0;border-top:1px solid var(--rule)}
.closing h2{font-size:clamp(38px,5vw,64px);line-height:1.02;letter-spacing:-.02em}
.closing p{margin:18px auto 0;max-width:30em;font-size:17.5px}
.closing .btn{margin-top:30px}

/* footer */
footer{border-top:1px solid var(--rule);padding:64px 0 48px;font-size:14px}
.fgrid{display:grid;grid-template-columns:1.2fr 2fr 1fr 1fr;gap:40px}
.fl{font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin-bottom:16px}
.fl::after{content:" /";color:var(--muted)}
footer ul{list-style:none;margin:0;padding:0}
footer li+li{margin-top:8px}
footer a{text-decoration:none;color:var(--body)}
footer a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
footer ol{margin:0;padding:0;list-style:none;font:400 12.5px/1.6 var(--mono);color:var(--muted)}
footer ol li+li{margin-top:8px}
.fbot{display:flex;justify-content:space-between;gap:20px;margin-top:56px;padding-top:22px;border-top:1px solid var(--rule);font:400 12.5px/1.5 var(--mono);color:var(--muted)}

/* app UI built in HTML */
.ui{--u-bg:#FFFFFF;--u-ink:#22313E;--u-mut:#6B7F90;--u-line:#E3EAEF;--u-chip:#EDF3F6;--u-navy:#425B70;font-family:var(--sans);color:var(--u-ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ui{--u-bg:#1F2E3B;--u-ink:#E7EEF3;--u-mut:#93A6B5;--u-line:#2E4152;--u-chip:#2A3B4B;--u-navy:#B8CCD9}}
.card{background:var(--u-bg);border-radius:14px;box-shadow:0 0 0 1px var(--u-line)}
.rep{padding:26px 26px 10px}
.rep-h{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;column-gap:14px}
.rep .no{font:500 11px/1 var(--mono);color:var(--u-mut);letter-spacing:.06em}
.rep .ttl{font:400 26px/1.15 var(--serif);color:var(--u-ink)}
.rep .sc{font:400 46px/1 var(--serif);color:var(--u-ink);font-variant-numeric:lining-nums tabular-nums}
.meter{height:4px;background:var(--u-line);border-radius:2px;margin:14px 0 18px;overflow:hidden}
.meter i,.tu-bar i{display:block;height:100%;width:var(--w);background:var(--u-navy);border-radius:2px}
.rep .sum{font-size:16px;line-height:1.5;color:var(--u-ink)}
.chip{display:inline-block;margin:14px 0 6px;font:500 13px/1 var(--sans);background:var(--u-chip);padding:8px 10px;border-radius:6px}
.rep .ml,.ml2{font:500 11px/1 var(--mono);letter-spacing:.08em;color:var(--u-mut);margin:16px 0 4px}
.rep .row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;border-top:1px solid var(--u-line)}
.rep .row b{display:block;font:500 15px/1.35 var(--sans)}
.rep .row small{display:block;font-size:13px;color:var(--u-mut);margin-top:3px}
.rv2{text-align:right}
.rv2 b{font:600 17px/1 var(--sans);font-variant-numeric:tabular-nums}
.pill{display:inline-block;margin-top:6px;font:500 11.5px/1 var(--sans);padding:5px 8px;border-radius:4px;box-shadow:inset 0 0 0 1px var(--u-line)}
.pill.near{background:#C9D8E3;color:#22313E;box-shadow:none}
.clinic{padding:20px}
.c-top{display:flex;gap:16px;align-items:flex-start}
.ini{flex:none;width:58px;height:58px;border-radius:12px;background:var(--u-chip);display:flex;align-items:center;justify-content:center;font:500 18px/1 var(--sans);color:var(--u-navy)}
.c-top b{display:block;font:600 17px/1.3 var(--sans)}
.c-top small{display:flex;align-items:center;gap:5px;font-size:13.5px;color:var(--u-mut);margin-top:4px}
.c-top svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.badge-ml{display:inline-flex;align-items:center;gap:5px;margin-top:8px;font:500 12px/1 var(--sans);color:#2F6B4F;background:#E3F1E9;padding:6px 8px;border-radius:6px}
.c-bot{display:flex;justify-content:space-between;align-items:center;margin-top:18px;padding-top:14px;border-top:1px solid var(--u-line);font-size:14.5px;color:var(--u-mut)}
.c-bot b{color:var(--u-ink)}
.btn-ui{background:var(--u-navy);color:var(--u-bg);font:600 14px/1 var(--sans);padding:11px 18px;border-radius:8px}
.prices{padding:4px 20px}
.pr{display:flex;justify-content:space-between;align-items:baseline;padding:16px 0;font-size:15px}
.pr+.pr{border-top:1px solid var(--u-line)}
.pr span{color:var(--u-mut);font-size:14px}.pr span b{color:var(--u-ink);font-size:16px}
.rings{display:grid;grid-template-columns:repeat(4,1fr);padding:20px 10px}
.ring{position:relative;display:flex;flex-direction:column;align-items:center}
.ring svg{width:68px;height:68px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:4;stroke-linecap:round}
.ring .trk{stroke:var(--u-line)}
.ring .arc{stroke:var(--u-navy);stroke-dasharray:113.1;stroke-dashoffset:calc(113.1 - 113.1 * var(--v) / 100)}
.ring .rn{position:absolute;top:24px;font:600 16px/1 var(--sans)}
.ring small{margin-top:8px;font-size:13px;color:var(--u-mut)}
.topup{background:#425B70;color:#fff;border-radius:14px;padding:20px 22px}
.topup .ml2{color:#B8CCD9;margin:0}
.tu-m{display:flex;justify-content:space-between;align-items:flex-end;margin-top:12px}
.tu-d{display:block;font:400 30px/1.1 var(--serif)}
.tu-m small{display:block;font-size:13.5px;color:#C9D8E3;margin-top:4px}
.tu-n{text-align:right}.tu-n b{display:block;font:400 44px/1 var(--serif)}
.tu-bar{height:4px;background:rgba(255,255,255,.18);border-radius:2px;margin:16px 0 14px;overflow:hidden}
.tu-bar i{background:#fff}
.tu-f{display:flex;align-items:center;gap:8px;font:600 14px/1 var(--sans)}
.tu-f svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:no-preference){
  .js .rv .meter i,.js .rv .tu-bar i{width:0;transition:width 1.4s cubic-bezier(.2,.7,.2,1) .5s}
  .js .rv.in .meter i,.js .rv.in .tu-bar i{width:var(--w)}
  .js .rv .ring .arc{stroke-dashoffset:113.1;transition:stroke-dashoffset 1.4s cubic-bezier(.2,.7,.2,1);transition-delay:calc(.5s + var(--rd2))}
  .js .rv.in .ring .arc{stroke-dashoffset:calc(113.1 - 113.1 * var(--v) / 100)}
  .js .rv .rep .row,.js .rv .pr,.js .rv .c-bot{opacity:0;transform:translateX(-10px);transition:opacity .6s,transform .6s cubic-bezier(.2,.7,.2,1)}
  .js .rv.in .rep .row,.js .rv.in .pr,.js .rv.in .c-bot{opacity:1;transform:none}
  .js .rv.in .rep .row{transition-delay:var(--dl)}
  .js .rv.in .pr:nth-child(1){transition-delay:.4s}.js .rv.in .pr:nth-child(2){transition-delay:.52s}.js .rv.in .c-bot{transition-delay:.35s}
}
@media (max-width:620px){.rep{padding:20px 18px 6px}.rep .ttl{font-size:21px}.rep .sc{font-size:38px}.ring svg{width:56px;height:56px}.ring .rn{top:19px;font-size:14px}.tu-d{font-size:24px}}


/* compare slider */
.scanbar{position:absolute;left:0;right:0;top:-4%;height:3px;background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.25),0 0 24px 6px rgba(184,204,217,.55);opacity:0;pointer-events:none}
.replay{margin-top:10px;background:none;border:0;padding:0;font:500 13px/1.5 var(--mono);color:var(--ink);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.cmp{position:relative;overflow:hidden;border-radius:4px;touch-action:pan-y;user-select:none;-webkit-user-select:none;--pos:50%}
.cmp img{width:100%;display:block;pointer-events:none}
.cmp .top{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.cmp .top img{height:100%;object-fit:cover}
.cmp .bar{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;pointer-events:none}
.cmp .knob{position:absolute;top:50%;left:var(--pos);width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;gap:6px;pointer-events:none;color:#425B70;box-shadow:0 1px 3px rgba(20,33,44,.25)}
.cmp .knob svg{width:9px;height:14px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.cmp .lab{position:absolute;bottom:14px;font:500 12px/1 var(--mono);letter-spacing:.06em;color:#425B70;background:rgba(255,255,255,.92);padding:7px 9px;border-radius:4px;pointer-events:none}
.cmp .lab.l{left:14px}.cmp .lab.r{right:14px}
.cmp input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.cmp:has(input:focus-visible){outline:2px solid var(--logo-blue);outline-offset:3px}



/* motion */
@media (prefers-reduced-motion:no-preference){
  .play .face img{animation:zoom 2.4s cubic-bezier(.2,.7,.2,1) both}
  .play .scanbar{animation:scan 1.6s cubic-bezier(.45,0,.55,1) .2s both}
  .play .ov .pt{transform-box:fill-box;transform-origin:center;opacity:0;transform:scale(.3);animation:pop .45s cubic-bezier(.3,1.4,.5,1) forwards;animation-delay:calc(1s + var(--i) * .05s)}
  .play .ov .mesh{opacity:0;animation:fade .8s ease-out 1.6s forwards}
  .play .ov .g{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw 1s cubic-bezier(.3,.6,.2,1) forwards;animation-delay:var(--d)}
  .play .ov .g.d{stroke-dasharray:8 8;stroke-dashoffset:0;opacity:0;animation:fade .6s ease-out 2.2s forwards}
  .play .ov .tag{opacity:0;animation:fade .4s ease-out forwards;animation-delay:var(--d)}
  .play .w{opacity:0;transform:translateY(14px);animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(2.3s + var(--wi) * .14s)}
  .play .scale .you{left:calc(var(--you) - 18%);opacity:0;animation:slide 1s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(2.6s + var(--wi) * .14s)}
  .play .bars i::after{width:0;animation:grow 1.2s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(2.8s + var(--wi) * .14s)}
  .js .hero h1 .wd{display:inline-block;opacity:0;transform:translateY(.4em);animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(.1s + var(--w) * .08s)}
  .js .hero .lede,.js .hero .actions,.js .hero .proof,.js .hero .kick{opacity:0;transform:translateY(12px);animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
  .js .hero .kick{animation-delay:0s}.js .hero .lede{animation-delay:.55s}.js .hero .actions{animation-delay:.7s}.js .hero .proof{animation-delay:.85s}
  .js .rv{opacity:0;transform:translateY(32px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1);transition-delay:var(--rd,0s)}
  .js .rv.in{opacity:1;transform:none}
  .faq details[open] p,.cat details[open] ul{animation:rise .4s ease-out}
  @keyframes zoom{from{transform:scale(1.08)}to{transform:none}}
  @keyframes scan{0%{top:-4%;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:100%;opacity:0}}
  @keyframes pop{to{opacity:1;transform:scale(1)}}
  @keyframes draw{to{stroke-dashoffset:0}}
  @keyframes fade{to{opacity:1}}
  @keyframes rise{to{opacity:1;transform:none}}
  @keyframes slide{to{opacity:1;left:var(--you)}}
  @keyframes grow{to{width:var(--v)}}
}

/* responsive */
@media (max-width:1060px){
  .top nav{display:none}
  .top .btn{margin-left:auto}
  .an-grid{grid-template-columns:1fr 1fr;gap:18px}
  .an-grid .face{grid-column:1 / -1;grid-row:1;max-width:520px;margin:0 auto 12px;width:100%}
  .rep-grid,.ex-grid,.tr-grid{grid-template-columns:1fr;gap:48px}
  .steps,.data{grid-template-columns:1fr 1fr}
  .steps li:nth-child(3),.data li:nth-child(3){padding-left:0;border-left:0}
  .steps li:nth-child(n+3),.data li:nth-child(n+3){margin-top:32px}
  .mind{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  :root{--gut:20px}
  .sec{padding:84px 0}
  .hero{padding-top:56px}
  .hero .actions{flex-direction:column;gap:18px}
  .proof{grid-template-columns:1fr}
  .proof div+div{border-left:0;border-top:1px solid var(--rule);padding-bottom:16px}
  .an-grid{grid-template-columns:1fr}
  .cat ul{grid-template-columns:1fr}
  .looks{grid-template-columns:1fr}
  .looks div+div{border-left:0;border-top:1px solid var(--rule)}
  .looks div{padding:18px 0}
  .steps,.data{grid-template-columns:1fr}
  .steps li,.data li{padding-left:0!important;border-left:0!important;margin-top:0!important;padding-bottom:22px}
  .steps li+li,.data li+li{border-top:1px solid var(--rule)}
  .fgrid{grid-template-columns:1fr}
  .fbot{flex-direction:column}
}

/* one App Store badge style everywhere; the header badge hides while a page badge is on screen */
.hb .badge{height:38px}
.hb{margin-left:auto;transition:opacity .3s,transform .3s,visibility .3s}
.top nav + .hb{margin-left:0}
.hb.away{opacity:0;transform:translateY(-6px);visibility:hidden}
.closing .badge-link{margin-top:30px}
.closing .badge{height:52px}
@media (max-width:1060px){.top nav + .hb{margin-left:auto}}
@media (max-width:640px){.hb .badge{height:34px}}
/* page header */
.ph{padding:96px 0 72px;text-align:center}
.ph h1{font-size:clamp(42px,6.4vw,80px);line-height:1;letter-spacing:-.022em;max-width:12em;margin:0 auto}
.ph .lede{max-width:34em;margin:24px auto 0;font-size:18px;line-height:1.55}
.ph .eyebrow{margin-bottom:22px}
.an.flat{margin-top:0}
.top nav a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.btnrow{display:flex;justify-content:center;gap:14px;margin-top:30px;flex-wrap:wrap}
/* two column text + figure */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:72px;align-items:center}
.duo.rev{grid-template-columns:minmax(0,520px) minmax(0,1fr)}
.duo h2{font-size:clamp(32px,3.6vw,46px);line-height:1.06;letter-spacing:-.012em}
.duo p.lead{margin-top:18px;font-size:17px}
.tips{list-style:none;margin:28px 0 0;padding:0}
.tips li{display:grid;grid-template-columns:34px 1fr;padding:13px 0;border-top:1px solid var(--rule);font-size:15.5px;color:var(--ink)}
.tips li:last-child{border-bottom:1px solid var(--rule)}
.photo-ex{border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px var(--rule)}
/* measurement table */
table.meas{width:100%;border-collapse:collapse;max-width:900px;margin:0 auto}
.meas th{font:500 11.5px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:left;padding:0 12px 12px 0;border-bottom:1px solid var(--ink)}
.meas td{padding:18px 12px 18px 0;border-bottom:1px solid var(--rule);font-size:15px;vertical-align:baseline}
.meas td b{display:block;font:500 15px/1.35 var(--sans);color:var(--ink)}
.meas td small{display:block;color:var(--muted);font-size:13.5px;margin-top:2px}
.meas td.v{font:400 30px/1 var(--serif);color:var(--ink);font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.meas td.i{font:400 13px/1.4 var(--mono);color:var(--muted);white-space:nowrap}
.meas .lab{display:inline-block;font:500 12px/1 var(--sans);padding:6px 8px;border-radius:4px;background:var(--paper);color:var(--ink);white-space:nowrap}
.tblwrap{overflow-x:auto}
/* badges explained */
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut);max-width:960px;margin:0 auto}
.two div{background:var(--bg);border:1px solid var(--rule);border-radius:10px;padding:28px}
.two h3{font-size:24px}
.two p{font-size:15px;line-height:1.6;margin-top:10px}
.two .badge-ml{margin:0 0 14px}
.sci .br{display:block;margin-bottom:12px}
/* documents */
.doc{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);padding:8px 0 110px}
.toc{grid-column:1 / span 3;position:sticky;top:96px;align-self:start;font-size:14px}
.toc p{font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--rule)}
.toc a{display:block;padding:6px 0 6px 14px;text-decoration:none;color:var(--body)}
.toc a:hover{color:var(--ink)}
.body{grid-column:5 / span 8;max-width:70ch}
.body h2{font-size:30px;line-height:1.15;margin:56px 0 14px;scroll-margin-top:96px}
.body > h2:first-child,.body > .callout:first-child + h2{margin-top:0}
.body p,.body li{font-size:16px;line-height:1.68}
.body p+p{margin-top:14px}
.body ul{padding-left:20px;margin:14px 0}
.body li+li{margin-top:8px}
.body table{width:100%;border-collapse:collapse;margin:18px 0;font-size:14.5px}
.body th{font:500 11.5px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:left;padding:0 12px 10px 0;border-bottom:1px solid var(--ink)}
.body td{padding:12px 12px 12px 0;border-bottom:1px solid var(--rule);vertical-align:top;line-height:1.5}
.body .callout{background:var(--paper);border-radius:10px;padding:22px 24px;margin-bottom:48px}
.body details{border-top:1px solid var(--rule)}
.body details:last-of-type{border-bottom:1px solid var(--rule)}
.body summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:18px 0;font:500 16.5px/1.4 var(--sans);color:var(--ink)}
.body summary::-webkit-details-marker{display:none}
.body summary::after{content:"+";font:400 22px/1 var(--mono);color:var(--muted);transition:transform .25s}
.body details[open] summary::after{transform:rotate(45deg)}
.body details > *:not(summary){padding-bottom:18px}
.updated{font:400 12.5px/1.5 var(--mono);color:var(--muted);margin-top:18px}
@media (max-width:1060px){.duo,.duo.rev{grid-template-columns:1fr;gap:44px}.two{grid-template-columns:1fr}.toc{display:none}.body{grid-column:1 / -1}}
@media (max-width:640px){.ph{padding:64px 0 48px}.meas td.v{font-size:24px}.body table{display:block;overflow-x:auto}}