/* ---------- the 3D phone ---------- */
.ph3{position:relative;width:100%;height:clamp(500px,74vh,700px)}
.ph3 canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .9s var(--e-std);cursor:grab;touch-action:pan-y;outline:0}
.ph3 canvas.grabbing{cursor:grabbing}
.ph3.on canvas{opacity:1}
.ph3-flat{position:absolute;inset:0;overflow:hidden;opacity:0;visibility:hidden}
.ph3.flat .ph3-flat{opacity:1;visibility:visible}
.ph3-flat img.ld{opacity:1}
.ph3.flat canvas{display:none}
.ph3-flat img{opacity:0;transition:opacity .35s var(--e-std);position:absolute;top:8%;left:50%;height:84%;width:auto;max-width:none;aspect-ratio:390/855;transform:translateX(-50%);border-radius:34px;background:var(--card);box-shadow:0 0 0 7px #0b0b0c,0 0 0 9px #8d8f94,0 30px 60px -30px rgba(17,17,17,.45)}
.ph3-credit{margin-top:14px;font:550 12px/1.4 var(--f);color:var(--ink3)}
.ph3-credit a{color:inherit}
@media (max-width:900px){.ph3{height:min(470px,58svh)}.ph3-flat img{border-radius:28px}}

/* secondary pages run a tighter section rhythm than the home */
:root{--sec:clamp(64px,11vh,112px);--pg-pane:#f4f4f6;--pg-sk:#e2e2e8;--pg-green:#13844f;--pg-green-s:#e3f5ec;--pg-blue:#3b74f0;--pg-x:rgba(17,17,17,.55);--pg-chip:#f2f2f5;--pg-chip-h:#e6e6ea;--pg-dim:rgba(17,17,17,.6);--pg-dim2:rgba(17,17,17,.64);--pg-row:#f6f6f8;--pg-row-h:#eeeef2;--pg-row-s:#f7f7f9;--pg-lil-s:#f2f2f4}
@media (max-width:900px){:root{--sec:72px}}

/* ---- page gutter = the header's (--pad: 20px on phones, ~55px on the 1290 laptop), so the H1 lines up with the logo ---- */
.wrap,.wrap-wide{width:min(var(--wrap),calc(100% - 2 * var(--pad)))}

/* ---- page top: H1 lands at nav bottom + breathing room ---- */
.pg-top{padding-top:var(--top)}
/* short laptop screens (1290x680): every marketing hero starts its H1 34px higher, at the home's 116px, so moving
   between nav pages never makes the heading jump (pages with cards tighten the cards themselves, not the top) */
@media (min-width:901px) and (max-height:760px){.pg-top{padding-top:calc(var(--top) - 34px)}}
@media (max-width:900px){
  .pg-top{transition:padding-top .35s var(--e-std)}
  html.kb .pg-top:focus-within{padding-top:calc(20px + env(safe-area-inset-top))}
}

/* ---- the home's type: heavy, tight, two-tone ---- */
.pg-h{max-width:none;text-wrap:balance}
/* the muted second line is drawn as ONE layer (ink at 42% opacity, like the home's .mute), so touching letters never
   print a darker join, and it sits .07em lower so line-1 descenders never cut into it */
.pg-h .ds-dim{display:block;color:var(--ink);opacity:.42;margin-top:.07em}
.pg-lead{margin-top:20px;max-width:42ch;font:560 clamp(17px,15.5px + .3vw,19px)/1.5 var(--f);letter-spacing:-.01em;color:var(--lead);text-wrap:pretty}
.pg-x{margin-top:18px;font:600 13.5px/1.45 var(--f);color:var(--pg-x);max-width:46ch}
.pg-facts{margin-top:16px;max-width:54ch;font:600 14.5px/1.5 var(--f);letter-spacing:-.005em;color:var(--pg-x);text-wrap:pretty}
.pg-facts a{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.pg-label{font:800 12px/1.2 var(--f);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}

/* ---- cards, panes; a lit card (.on / .pg-glow) gets a 1px line, no colour glow (same as .evc / .cn on the home) ---- */
.pg-card{position:relative;border-radius:32px;background:var(--card);box-shadow:var(--sh);isolation:isolate;transition:box-shadow .9s var(--e-std)}
.pg-glow,.pg-card.on{box-shadow:0 0 0 1px var(--line2),var(--sh)}
.pg-pane{border-radius:24px;background:var(--pg-pane)}
.pg-sk{display:block;height:8px;border-radius:8px;background:var(--pg-sk)}
.pg-av{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:14px;background:var(--mono);color:var(--on-mono);font:800 17px/1 var(--f)}
/* the small black "it happened" chip the home's minis use */
.pg-pop{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px;border-radius:999px;background:var(--ink);color:var(--on-ink);font:750 12px/1 var(--f);white-space:nowrap;box-shadow:0 10px 22px -10px rgba(17,17,17,.5);pointer-events:none}
.pg-pop svg{width:12px;height:12px}
.pg-pop.g{background:#13844f;color:#fff}

/* ---- handle field: the home's claim pill (filled, faint 1px line, grey prefix, bold handle, ink button) ---- */
.pg-claim{display:flex;align-items:center;gap:8px;width:min(560px,100%);height:68px;margin:0;padding:0 7px 0 24px;border-radius:999px;background:var(--fld);box-shadow:var(--fld-sh);text-align:left;transition:box-shadow .3s var(--e-std)}
.pg-claim:focus-within{box-shadow:var(--fld-sh-f)}
.pg-claim label{flex:1;min-width:0;display:flex;align-items:center;height:100%;font-size:19px;letter-spacing:-.03em;cursor:text}
.pg-pre{font-weight:500;color:var(--ink3);white-space:nowrap}
.pg-claim.tight .pg-pre-d{display:none}
.pg-claim.scr input{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px);mask-image:linear-gradient(90deg,transparent 0,#000 14px)}
.pg-claim input{flex:1;min-width:0;width:100%;height:100%;border:0;outline:0;background:none;color:var(--ink);font:800 1em/1 var(--f);letter-spacing:-.03em;padding:0;caret-color:var(--ink);text-overflow:ellipsis}
.pg-claim input:focus-visible{outline:0}
.pg-claim input::placeholder{color:var(--ink);opacity:.2}
.pg-claim button{flex:none;display:inline-flex;align-items:center;gap:8px;height:54px;padding:0 22px 0 24px;border:0;border-radius:999px;background:var(--ink);color:var(--on-ink);font:750 16.5px/1 var(--f);cursor:pointer;transition:transform .18s var(--e-std),background-color .2s}
.pg-claim button:active{transform:scale(.96)}
@media (hover:hover){.pg-claim button:hover{background:var(--ink-h)}}
.pg-claim-lg{width:min(820px,100%);height:92px;padding:0 10px 0 30px}
.pg-claim-lg label{font-size:clamp(22px,2.8vw,36px);letter-spacing:-.035em}
.pg-claim-lg button{height:72px;padding:0 28px 0 32px;font-size:19px;gap:10px}
@media (max-width:760px){
  /* phones: one row, like the home. The field, then a round button with the arrow (its word is still read aloud) */
  .pg-claim,.pg-claim-lg{flex-direction:row;align-items:center;height:60px;padding:0 6px 0 18px;border-radius:999px;gap:6px}
  .pg-claim label,.pg-claim-lg label{flex:1;height:100%;padding:0;font-size:clamp(17px,5vw,20px)}
  .pg-claim button,.pg-claim-lg button{flex:none;width:48px;height:48px;padding:0;justify-content:center;border-radius:50%;gap:0}
  .pg-claim button span,.pg-claim-lg button span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .pg-claim button svg,.pg-claim-lg button svg{width:21px;height:21px}
}
@media (pointer:coarse){.pg-claim input{font-size:max(16px,1em)}}

/* ---- accordion: big white rounded cards, round +/- that turns black when open ---- */
.pg-acc{display:grid;gap:12px}
.pg-q{border-radius:24px;background:var(--card);box-shadow:var(--sh)}
.pg-q > summary{padding:20px 20px 20px 26px;min-height:72px;font:750 clamp(17px,16px + .3vw,19.5px)/1.3 var(--f);letter-spacing:-.018em;border-radius:24px}
.pg-q > summary > span{text-wrap:pretty}
.pg-q .acc-i{width:34px;height:34px;background:var(--pg-chip)}
.pg-q .acc-i svg{display:block}
.pg-q[open]:not([data-acc]) .acc-i,.pg-q[data-acc=o] .acc-i{background:var(--ink);color:var(--on-ink)}
.pg-a p{padding:0 64px 24px 26px;color:var(--ink2);font:520 16.5px/1.55 var(--f);letter-spacing:-.006em;max-width:64ch}
.pg-a a{color:var(--ink);font-weight:750;text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px;padding-block:11px}
@media (hover:hover){.pg-a a:hover{text-decoration-color:var(--ink)}.pg-q > summary:hover .acc-i{background:var(--pg-chip-h)}.pg-q[open] > summary:hover .acc-i{background:var(--ink-h)}}
@media (max-width:900px){.pg-q,.pg-q > summary{border-radius:22px}.pg-q > summary{padding:16px 14px 16px 20px;min-height:64px;font-size:17px}.pg-a p{padding:0 20px 20px;font-size:16px}}

/* ---- closing band: centred two-tone head, the big claim pill ---- */
.pg-band{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--sec) var(--pad) 0}
.ds-sec + .pg-band{padding-top:0}
.pg-band .ds-h2{margin:0 auto;max-width:14ch}
.pg-band-f{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;margin-top:clamp(28px,5vh,44px)}
.pg-band-m{font:650 15px/1.4 var(--f);color:var(--pg-x)}

/* ---- chip rows that scroll sideways on phones: soft edges ---- */
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--pg-pane:var(--raised);--pg-sk:#3a3a3a;--pg-green:#3ecf8e;--pg-green-s:rgba(62,207,142,.14);--pg-blue:#7aa2ff;--pg-x:rgba(237,237,237,.58);
  --pg-chip:var(--raised);--pg-chip-h:var(--hover);--pg-dim:rgba(237,237,237,.6);--pg-dim2:rgba(237,237,237,.64);--pg-row:var(--raised);--pg-row-h:var(--hover);--pg-row-s:rgba(255,255,255,.03);--pg-lil-s:var(--raised);
  .pg-pop{box-shadow:0 10px 22px -10px rgba(0,0,0,.6)}}}:root[data-theme=dark]{--pg-pane:var(--raised);--pg-sk:#3a3a3a;--pg-green:#3ecf8e;--pg-green-s:rgba(62,207,142,.14);--pg-blue:#7aa2ff;--pg-x:rgba(237,237,237,.58);
  --pg-chip:var(--raised);--pg-chip-h:var(--hover);--pg-dim:rgba(237,237,237,.6);--pg-dim2:rgba(237,237,237,.64);--pg-row:var(--raised);--pg-row-h:var(--hover);--pg-row-s:rgba(255,255,255,.03);--pg-lil-s:var(--raised);
  .pg-pop{box-shadow:0 10px 22px -10px rgba(0,0,0,.6)}}
@media (max-width:900px){
  [data-fade]{--fl:0px;--fr:36px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fl),#000 calc(100% - var(--fr)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--fl),#000 calc(100% - var(--fr)),transparent)}
}

.tl{max-width:860px;margin-inline:auto}
.tl .pg-lead{max-width:52ch}
.sc-f{display:flex;align-items:center;gap:8px;width:min(620px,100%);height:68px;margin-top:28px;padding:0 7px 0 24px;border-radius:999px;background:var(--fld);box-shadow:var(--fld-sh);transition:box-shadow .3s var(--e-std)}
.sc-f:focus-within{box-shadow:var(--fld-sh-f)}
.sc-f input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;font:600 19px/1 var(--f);letter-spacing:-.02em;color:var(--ink)}
.sc-f input::placeholder{color:var(--ink3)}
.sc-b{flex:none;display:inline-flex;align-items:center;gap:8px;height:54px;padding:0 24px;border:0;border-radius:999px;background:var(--ink);color:var(--on-ink);font:750 16.5px/1 var(--f);cursor:pointer;transition:background-color var(--t-hover) var(--e-std),transform .45s var(--e-out)}
.sc-b:active{transform:scale(.97)}
.sc-b[disabled]{opacity:.55;cursor:default}
@media (hover:hover){.sc-b:not([disabled]):hover{background:var(--ink-h)}}
.sc-n{margin-top:14px;min-height:22px;font:600 14.5px/1.5 var(--f);color:var(--mute)}
.sc-n b{color:var(--ink);font-weight:800}
.sc-msg{margin-top:10px;font:650 15px/1.5 var(--f);color:var(--red)}
.sc-msg:empty{display:none}
.sc-out{margin-top:8px}
.sc-out:empty{display:none}
.sc-wait{display:flex;align-items:center;gap:12px;margin-top:22px;font:650 16px/1.4 var(--f);color:var(--ink2)}
.sc-wait i{width:18px;height:18px;border-radius:50%;border:2.5px solid var(--line2);border-top-color:var(--ink);animation:sc-spin .8s linear infinite}
@keyframes sc-spin{to{transform:rotate(360deg)}}
.sc-card{margin-top:16px;padding:26px 28px 28px;border-radius:28px;background:var(--card);box-shadow:var(--sh)}
.sc-card{--sc-mid:#b06a00;--sc-mid-s:#fbf0dc}
.sc-hero{display:grid;grid-template-columns:128px minmax(0,1fr);align-items:center;gap:26px}
.sc-hero h2{margin-top:10px;font:800 clamp(26px,22px + 1vw,34px)/1.1 var(--d);letter-spacing:-.04em}
.sc-url{display:block;margin-top:4px;font:600 15px/1.4 var(--f);color:var(--mute);overflow-wrap:anywhere}
.sc-hero p{margin-top:8px;font:560 16.5px/1.5 var(--f);color:var(--ink2);text-wrap:pretty}
.sc-v{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 12px;border-radius:99px;font:750 13.5px/1 var(--f)}
.sc-v::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.sc-v.good{background:var(--pg-green-s);color:var(--pg-green)}
.sc-v.mid{background:var(--sc-mid-s);color:var(--sc-mid)}
.sc-v.bad{background:rgba(196,55,43,.12);color:var(--red)}
.sc-ring{width:128px;height:128px}
.sc-ring circle{fill:none;stroke-width:11;stroke-linecap:round}
.sc-ring-bg{stroke:var(--pg-pane)}
.sc-ring-fg{transition:stroke-dasharray 1s var(--e-out)}
.sc-ring.good .sc-ring-fg{stroke:var(--pg-green)}
.sc-ring.mid .sc-ring-fg{stroke:var(--sc-mid)}
.sc-ring.bad .sc-ring-fg{stroke:var(--red)}
.sc-ring-t{font:800 27px/1 var(--d);letter-spacing:-.04em;fill:var(--ink);text-anchor:middle;dominant-baseline:central}
.sc-mini{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 28px;margin:24px 0 0;padding:22px 0 0;box-shadow:0 -1px 0 var(--line)}
.sc-mini li{display:flex;align-items:center;gap:10px;font:650 15.5px/1.3 var(--f)}
.sc-mini li.fail{color:var(--ink)}
.sc-mini .sc-i,.sc-two .sc-i{flex:none;width:22px;height:22px;margin:0}
.sc-mini li.fail .sc-i{background:rgba(196,55,43,.12);color:var(--red)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){.sc-card{--sc-mid:#f0b84d;--sc-mid-s:rgba(240,184,77,.14)}}}:root[data-theme=dark]{.sc-card{--sc-mid:#f0b84d;--sc-mid-s:rgba(240,184,77,.14)}}
.sc-card h3{font:800 20px/1.2 var(--d);letter-spacing:-.03em}
.sc-card > p{margin-top:8px;font:560 16.5px/1.55 var(--f);color:var(--ink2);text-wrap:pretty;max-width:66ch}
.sc-rows{list-style:none;margin:12px 0 0;padding:0}
.sc-row{display:grid;grid-template-columns:28px minmax(0,1fr);gap:0 12px;padding:14px 0;box-shadow:0 -1px 0 var(--line)}
.sc-row:first-child{box-shadow:none}
.sc-i{display:grid;place-items:center;width:26px;height:26px;margin-top:1px;border-radius:50%;background:var(--pg-green-s);color:var(--pg-green)}
.sc-row.fail .sc-i{background:rgba(196,55,43,.12);color:var(--red)}
.sc-row.info .sc-i{background:var(--pg-pane);color:var(--ink3)}
.sc-row b{font:750 16.5px/1.35 var(--f);letter-spacing:-.012em}
.sc-row p{grid-column:2;margin-top:3px;font:540 15.5px/1.5 var(--f);color:var(--ink2);text-wrap:pretty;overflow-wrap:anywhere}
.sc-row .sc-fix{color:var(--ink);font-weight:620}
.sc-tag{display:inline-flex;align-items:center;height:22px;margin-left:8px;padding:0 9px;border-radius:99px;background:var(--pg-pane);font:700 12px/1 var(--f);color:var(--ink2);vertical-align:2px;white-space:nowrap}
.sc-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 36px;margin-top:16px}
.sc-two h4{font:750 15px/1.3 var(--f);color:var(--mute)}
.sc-two ul{list-style:none;display:flex;flex-direction:column;gap:7px;margin:8px 0 0;padding:0}
.sc-two li{display:flex;align-items:flex-start;gap:10px;font:560 15.5px/1.45 var(--f);color:var(--ink)}
.sc-two .open .sc-i{background:var(--sc-mid-s);color:var(--sc-mid)}
.sc-cta{background:var(--ink);color:var(--on-ink)}
.sc-cta h3{color:var(--on-ink)}
.sc-cta > p{color:var(--on-ink);opacity:.78}
.sc-cta ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0}
.sc-cta li{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:99px;background:rgba(255,255,255,.14);font:680 13.5px/1 var(--f)}
:root[data-theme="dark"] .sc-cta li{background:rgba(0,0,0,.1)}
.sc-go{display:inline-flex;align-items:center;gap:8px;height:50px;margin-top:20px;padding:0 22px;border-radius:999px;background:var(--on-ink);color:var(--ink);font:750 16px/1 var(--f);text-decoration:none}
.sc-cta small{display:block;margin-top:14px;font:560 13.5px/1.5 var(--f);opacity:.62}
.tl-sec{margin-top:clamp(48px,8vh,84px)}
.tl-sec > h2{font:800 clamp(24px,21px + .8vw,31px)/1.12 var(--d);letter-spacing:-.038em}
.tl-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:20px}
.tl-c{padding:24px 24px 26px;border-radius:26px}
.tl-c .tl-ic{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--pg-pane)}
.tl-c h3{margin-top:16px;font:800 19px/1.2 var(--d);letter-spacing:-.03em}
.tl-c p,.tl-list li{margin-top:8px;font:560 15.5px/1.55 var(--f);color:var(--ink2);text-wrap:pretty}
.tl-c a,.tl-list a{color:var(--ink);font-weight:750;text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.tl-list{list-style:none;margin:14px 0 0;padding:6px 26px;border-radius:26px}
.tl-list li{margin:0;padding:15px 0;box-shadow:0 -1px 0 var(--line)}
.tl-list li:first-child{box-shadow:none}
.tl-list b{color:var(--ink);font-weight:750}
.tl-it{display:grid;grid-template-columns:300px minmax(0,1fr) auto;align-items:center;gap:0 28px;margin-top:28px;padding:12px 24px 12px 12px;border-radius:28px;background:var(--card);box-shadow:var(--sh);color:var(--ink);text-decoration:none}
.tl-it h2{font:800 23px/1.2 var(--d);letter-spacing:-.035em}
.tl-it p{margin-top:6px;font:540 16px/1.55 var(--f);color:var(--ink2);max-width:60ch}
.tl-im{display:block;border-radius:20px;overflow:hidden;background:var(--pg-pane);aspect-ratio:16/9}
.tl-im img{display:block;width:100%;height:auto}
.tl-im .tl-d{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){.tl-im .tl-l{display:none}.tl-im .tl-d{display:block}}}:root[data-theme=dark]{.tl-im .tl-l{display:none}.tl-im .tl-d{display:block}}
.tl-it i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--pg-chip)}
.tl-it em{font-style:normal;display:inline-flex;align-items:center;height:22px;margin-left:10px;padding:0 9px;border-radius:99px;background:var(--pg-green-s);color:var(--pg-green);font:750 12px/1 var(--f);vertical-align:3px}
@media (max-width:760px){.sc-hero{grid-template-columns:minmax(0,1fr);gap:16px}.sc-ring{width:104px;height:104px}.sc-mini{grid-template-columns:minmax(0,1fr)}.tl-it{grid-template-columns:minmax(0,1fr) auto;gap:16px 14px;padding:10px 16px 20px 10px}.tl-im{grid-column:1/-1}.tl-it > span:nth-child(2){padding-left:8px}.tl-g,.sc-two{grid-template-columns:minmax(0,1fr)}.sc-card{padding:22px 20px 24px;border-radius:24px}.sc-f{height:60px;padding-left:20px}.sc-f input{font-size:17px}.sc-b{height:48px;padding:0 18px}.tl-list{padding:4px 20px}}