/*
 * Cosmic Match — the home page's own stylesheet (2026-09-23).
 *
 * The Daylight rebuild: the same Cosmic Design System as `styles.css` —
 * Frost canvas, Carbon ink, the three blues, 8px content / 980px interactive
 * radii, Carbon grounds for the hero and bands — with new motion layered on.
 * Only `index.html` loads this file (see `css=` on its entry in `_seo.py`);
 * every other page still loads `styles.css`. The two are NOT meant to be
 * combined: they share class names on purpose-built markup.
 *
 * Motion is started by `/home.js` (GSAP + ScrollTrigger + Lenis, self-hosted
 * in `/vendor/`). With the script off nothing is hidden. Every animation is
 * off under `prefers-reduced-motion`.
 */
/* ─── Tokens: the live site's Cosmic Design System, unchanged ────────────
   A white room with a single blue switch. Frost canvas, Carbon ink, three
   blues with one job each; Carbon as a ground for the hero and bands.
   Light only, as on the live site. What is new here is motion. */
:root{
  color-scheme: light;
  interpolate-size: allow-keywords;
  --cosmic:#0071e3; --link:#0066cc; --signal:#2997ff;
  --carbon:#1d1d1f; --smoke:#333333; --graphite:#474747; --ash:#707070; --mist:#858585;
  --frost:#f5f5f7; --ice:#f4f8fb; --pebble:#e2e2e5; --hairline:#d2d2d7; --hairline-dark:#333333; --white:#ffffff;
  --ember:#a93b22; --moss:#4c6733; --iris:#655399; --tide:#1f6675;
  --arc:linear-gradient(90deg,#2997ff,#7a5cff,#ff4f9a,#ffb02e,#ffd166);
  --text:"SF Pro Text",-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --display:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.25,.1,.25,1);
  --out:cubic-bezier(.2,.7,.2,1);
}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--text);color:var(--carbon);background:var(--frost);font-size:17px;line-height:1.47;letter-spacing:-.016em;overflow-x:clip;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--link)}
p{margin:0;color:var(--smoke)}
h1,h2,h3,h4{margin:0;text-wrap:balance}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid var(--cosmic);outline-offset:2px;border-radius:4px}

.wrap{max-width:980px;margin-inline:auto;padding-inline:24px}
@media (max-width:480px){.wrap{padding-inline:18px}}
section{position:relative;padding-block:clamp(64px,8vw,96px)}
.s-white{background:var(--white)} .s-ice{background:var(--ice)} .s-frost{background:var(--frost)}
.s-carbon{background:var(--carbon);color:var(--frost)}
.s-carbon p{color:var(--pebble)}
.s-carbon h2,.s-carbon h3{color:var(--frost)}

.eyebrow{font-size:14px;font-weight:600;color:var(--ash);letter-spacing:-.016em;margin-bottom:12px}
.s-carbon .eyebrow,.hero .eyebrow{color:var(--signal)}
h1{font-family:var(--display);font-size:clamp(36px,7vw,60px);line-height:1.05;letter-spacing:-.02em;font-weight:600}
h2{font-family:var(--display);font-size:clamp(28px,4vw,40px);line-height:1.12;letter-spacing:-.01em;font-weight:600;margin-bottom:14px}
h3{font-size:17px;font-weight:600;letter-spacing:-.016em}
.head{text-align:center;max-width:34em;margin:0 auto 40px}
.head p{color:var(--ash);font-size:19px;font-weight:300;line-height:1.35}
.s-carbon .head p{color:var(--pebble)}
.head a{color:var(--link)}
.muted{color:var(--ash)} .small{font-size:14px}
.small strong{color:var(--carbon)}

/* ─── Header ──────────────────────────────────────────────────────────── */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(245,245,247,.72);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid transparent;transition:border-color .2s var(--ease)}
.site-header.scrolled{border-bottom-color:var(--hairline)}
.hbar{display:flex;align-items:center;gap:12px 20px;padding:14px 24px;max-width:1440px;margin:0 auto}
.brand{font-weight:520;font-size:18px;color:var(--carbon);text-decoration:none;letter-spacing:-.035em;white-space:nowrap;display:inline-flex;align-items:center;gap:8px}
.brand em{font-style:normal;color:var(--signal)}
.brand .mark{width:15px;height:15px;fill:var(--carbon);transition:transform .7s var(--out)}
.brand:hover .mark{transform:rotate(90deg)}
.site-header nav{display:flex;gap:16px;margin-left:auto;align-items:center}
.site-header nav a{position:relative;font-size:14px;text-decoration:none;color:var(--ash);white-space:nowrap;transition:color .12s var(--ease)}
.site-header nav a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--carbon);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--out)}
.site-header nav a:hover{color:var(--carbon)}
.site-header nav a:hover::after{transform:scaleX(1);transform-origin:left}
.phase{flex:none;width:22px;height:22px;display:grid;place-items:center}
.phase svg{width:18px;height:18px;overflow:visible}
@media (max-width:720px){.site-header nav{display:none}.phase{margin-left:auto}}

/* ─── Hero: the one Carbon opener ─────────────────────────────────────── */
.hero{background:var(--carbon);color:var(--frost);text-align:center;overflow:hidden;padding:76px 0 84px}
.hero-stars{position:absolute;inset:0;pointer-events:none}
.hero-stars .layer{position:absolute;inset:0;transition:transform .9s var(--out)}
.hero-stars i{position:absolute;display:block;border-radius:50%;background:var(--frost);opacity:.12;animation:tw var(--dur) ease-in-out var(--delay) infinite alternate}
@keyframes tw{to{opacity:.7}}
.hero .wrap{position:relative;z-index:1;display:grid;justify-items:center}
.hero h1{margin-bottom:18px}
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.hero h1 .wi{display:inline-block}
.hero .lede{font-size:clamp(16px,2.4vw,21px);color:var(--frost);font-weight:300;max-width:30em;line-height:1.35}
.hero .fine{font-size:13px;color:var(--mist);margin-top:22px}
.stores{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.store{display:inline-flex;align-items:center;gap:13px;padding:14px 26px;border-radius:980px;border:1px solid var(--hairline-dark);color:var(--frost);text-decoration:none;text-align:left;transition:background-color .2s var(--ease),border-color .2s var(--ease),transform .35s var(--out)}
.store:hover{background:rgba(255,255,255,.08);border-color:var(--ash);transform:translateY(-2px)}
.store svg{width:30px;height:30px;flex:none;fill:currentColor}
.store .lines{display:flex;flex-direction:column;line-height:1.15}
.store .lines b{font-size:19px;font-weight:600;letter-spacing:-.02em}
.store .lines span{font-size:12px;color:var(--mist)}

/* ─── Shared ──────────────────────────────────────────────────────────── */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:860px){.grid-3{grid-template-columns:1fr}}
.card{position:relative;background:var(--white);border:1px solid var(--hairline);border-radius:8px;padding:22px;display:grid;align-content:start;gap:6px;overflow:hidden;isolation:isolate;transition:border-color .3s var(--ease),transform .45s var(--out)}
.s-white .card{background:var(--frost);border-color:var(--pebble)}
.s-carbon .card{background:transparent;border-color:var(--hairline-dark)}
.card::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .3s;background:radial-gradient(300px circle at var(--mx,50%) var(--my,0%),rgba(0,113,227,.07),transparent 65%)}
.s-carbon .card::before{background:radial-gradient(300px circle at var(--mx,50%) var(--my,0%),rgba(41,151,255,.14),transparent 65%)}
.card:hover{border-color:var(--hairline)}
.s-carbon .card:hover{border-color:#4a4a4f}
.card:hover::before{opacity:1}
/* Icons sit in their own 40px box, so any motion is centred on the icon itself,
   not on the card's full width. Hover: a soft lift with a little spring, and a
   faint halo that opens behind it. No rotation, no scaling of the glyph. */
.card .emoji{position:relative;isolation:isolate;justify-self:start;display:inline-grid;place-items:center;width:40px;height:40px;margin:-4px 0 0 -7px;font-size:26px;line-height:1;transform-origin:50% 50%;transition:transform .55s cubic-bezier(.34,1.56,.64,1)}
.card .emoji::before{content:"";position:absolute;inset:-2px;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(0,113,227,.16),rgba(0,113,227,0));transform:scale(.4);opacity:0;transition:transform .55s var(--out),opacity .4s var(--ease)}
.s-carbon .card .emoji::before{background:radial-gradient(closest-side,rgba(41,151,255,.28),rgba(41,151,255,0))}
.card:hover .emoji{transform:translateY(-5px)}
.card:hover .emoji::before{transform:scale(1.15);opacity:1}
.card h3{font-size:16px}
.card h3 a{color:inherit;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .4s var(--out)}
.card h3 a:hover{background-size:100% 1px}
.card p{font-size:14px;color:var(--ash)}
.card p+p{margin-top:4px}
.card p strong{color:var(--carbon)}
.s-carbon .card p{color:var(--mist)}
.s-carbon .card p strong{color:var(--frost)}
.photo-wrap{position:relative;overflow:hidden;border-radius:8px}
.photo-wrap picture{display:contents}
.photo-wrap img{width:100%;height:100%;aspect-ratio:1;object-fit:cover;object-position:50% 0}
.chip{position:absolute;left:12px;bottom:12px;z-index:1;display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600;line-height:1;background:rgba(29,29,31,.78);color:var(--frost);white-space:nowrap}

/* ─── The moment ──────────────────────────────────────────────────────── */
.moment-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(28px,5vw,64px);align-items:center}
@media (max-width:860px){.moment-grid{grid-template-columns:1fr}}
.tilt{perspective:1000px}
.match-card{background:var(--frost);border:1px solid var(--pebble);border-radius:8px;padding:10px;max-width:420px;margin-inline:auto;transform-style:preserve-3d;transition:transform .2s ease-out}
.match-card .photo-wrap{transform:translateZ(24px)}
.match-body{text-align:center;padding:18px 12px 8px;display:grid;gap:4px;transform:translateZ(40px)}
.match-body .pct{font-size:14px;font-weight:600;color:var(--cosmic)}
.match-body h3{font-family:var(--display);font-size:26px;letter-spacing:-.02em}
.match-body h3 em{font-style:normal;color:var(--signal)}
.match-body p{font-size:14px;color:var(--ash)}
.match-body .verdict{color:var(--carbon);font-weight:500}
.match-actions{display:grid;gap:8px;margin-top:10px}
.match-actions span{padding:11px;border-radius:980px;font-weight:500;font-size:15px}
.match-actions .primary{background:var(--cosmic);color:#fff}
.match-actions .secondary{border:1px solid var(--link);color:var(--link)}
.moment-copy p.lede{font-size:19px;font-weight:300;color:var(--graphite);line-height:1.4;margin-top:4px}
.beats{position:relative;display:grid;gap:18px;margin-top:28px;padding-left:30px}
.beats .rail{position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--pebble);border-radius:2px;overflow:hidden}
.beats .rail i{position:absolute;inset:0;background:var(--cosmic);transform-origin:top}
.beat{position:relative;font-size:15px;font-weight:600;color:var(--carbon)}
.beat::before{content:"";position:absolute;left:-30px;top:3px;width:14px;height:14px;border-radius:50%;background:var(--white);border:2px solid var(--cosmic)}
.beat-note{margin-top:22px;color:var(--ash);font-size:15px}

/* ─── Sky tab (Carbon) ────────────────────────────────────────────────── */
.sky-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center}
.sky-grid .copy{display:grid;gap:14px}
.sky-grid .copy p{font-weight:300;font-size:17px}
.sky-grid .copy em{font-style:normal;color:var(--frost);font-weight:500}
@media (max-width:860px){.sky-grid{grid-template-columns:1fr}}
.wheel-wrap{display:flex;flex-direction:column;align-items:center;gap:22px}
.chart{width:min(360px,100%);aspect-ratio:1;overflow:visible}
.chart .ln{fill:none;stroke:rgba(245,245,247,.28);stroke-width:1}
.chart .horizon{stroke:var(--signal);stroke-width:1.5}
.chart text.sg{fill:rgba(245,245,247,.62);font-size:11px;font-weight:600;letter-spacing:.08em;text-anchor:middle;font-family:var(--text)}
.chart .mk circle{fill:var(--frost);stroke-width:2}
.chart .mk text{fill:var(--carbon);font-size:12px;font-weight:600;text-anchor:middle;font-family:var(--text)}
.chart .fire circle{stroke:#e0673f} .chart .water circle{stroke:#3a9fb3} .chart .air circle{stroke:#9d8be0}
.chart .spin{transform-origin:160px 160px}
/* Ambient, time-based — runs on its own, never tied to scroll. One pass = 12 s. */
.chart .sweep{transform-box:view-box;transform-origin:160px 160px;animation:spin 12s linear infinite}
.chart .sweep .wedge{fill:url(#sweepFill)}
.chart .sweep .edge{stroke:var(--signal);stroke-width:1.5;stroke-linecap:round}
.chart text.sg{animation:signlit 12s linear infinite;animation-delay:var(--sd,0s)}
@keyframes signlit{0%{fill:#fff}3%{fill:#8fc6ff}16%,100%{fill:rgba(245,245,247,.62)}}
.chart .mk circle.halo{fill:none;stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:halo 3.2s ease-out infinite}
.chart .water circle.halo{animation-delay:1.05s} .chart .air circle.halo{animation-delay:2.1s}
@keyframes halo{from{transform:scale(1);opacity:.85}to{transform:scale(1.9);opacity:0}}
.three{display:flex;gap:36px}
.three div{display:flex;flex-direction:column;gap:2px}
.three span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(245,245,247,.55);font-weight:600}
.three b{font-size:19px;font-weight:600;color:var(--frost)}

/* ─── Steps ───────────────────────────────────────────────────────────── */
.steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding-top:64px}
.constellation{position:absolute;left:0;right:0;top:0;height:56px;width:100%;overflow:visible}
.constellation path{fill:none;stroke:var(--cosmic);stroke-width:1.5;vector-effect:non-scaling-stroke}
.node{position:absolute;width:28px;height:28px;margin-left:-14px;display:grid;place-items:center;font-size:13px;font-weight:600;border-radius:50%;background:var(--white);border:1px solid var(--hairline);color:var(--ash);z-index:1;transition:background .4s,color .4s,border-color .4s}
.node.on{background:var(--cosmic);border-color:var(--cosmic);color:#fff}
.step-n{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:980px;border:1px solid var(--hairline);color:var(--ash);font-size:13px;font-weight:600;letter-spacing:0}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr;padding-top:0}.constellation,.node{display:none}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* ─── Engine ──────────────────────────────────────────────────────────── */
.dial-block{display:grid;justify-items:center;gap:14px;text-align:center;margin-bottom:34px}
.dial{--sweep:302.4deg;position:relative;width:min(240px,64vw);aspect-ratio:1;margin-block:44px}
/* The live site's two halo rings, in the arc's own colours, breathing on a
   4.8 s loop. Sizes keep the live ratio to the ring (x1.136 and x1.304). At
   their widest they reach 16% of the dial past its edge (about 38px), and the
   44px margin above and below keeps the heading and the verdict line clear. */
.dial .halo{position:absolute;border-radius:50%;border:8px solid;pointer-events:none}
.dial .halo--inner{inset:-6.25%;border-color:rgba(122,92,255,.24);animation:halo-in 4.8s ease-in-out infinite}
.dial .halo--outer{inset:-14.55%;border-color:rgba(255,79,154,.16);animation:halo-out 4.8s ease-in-out infinite}
@keyframes halo-in{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes halo-out{0%,100%{transform:scale(1.02)}50%{transform:scale(1)}}
.dial .ring{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,#2997ff 0deg,#7a5cff calc(var(--sweep)*.3),#ff4f9a calc(var(--sweep)*.62),#ffb02e calc(var(--sweep)*.86),#ffd166 var(--sweep),var(--pebble) var(--sweep));
  -webkit-mask:radial-gradient(closest-side,transparent 86%,#000 87%,#000 99%,transparent 100%);mask:radial-gradient(closest-side,transparent 86%,#000 87%,#000 99%,transparent 100%)}
.dial .tip{position:absolute;inset:0;transform:rotate(var(--sweep))}
.dial .tip i{position:absolute;left:50%;top:0;width:14px;height:14px;margin:1px 0 0 -7px;border-radius:50%;background:#ffbc42;border:2px solid var(--frost)}
.dial .face{position:absolute;inset:0;display:grid;place-content:center}
.dial .num{font-family:var(--display);font-weight:600;font-size:64px;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--carbon)}
.dial .cap{font-size:12px;color:var(--ash)}
.params{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:640px){.params{grid-template-columns:1fr}}
.param{background:var(--white);border:1px solid var(--hairline);border-radius:8px;padding:14px 16px;transition:transform .45s var(--out)}
.param .top{display:flex;align-items:center;gap:10px}
.param .top .e{font-size:20px;width:30px;text-align:center}
.param .top b{font-size:15px;font-weight:600;flex:1}
.param .pill{font-size:11px;font-weight:600;padding:3px 8px;border-radius:980px;background:rgba(41,151,255,.12);color:var(--link)}
.param .n{font-size:17px;font-weight:600;color:var(--c);font-variant-numeric:tabular-nums}
.param .n small{font-size:12px;font-weight:600;color:var(--ash)}
.param .bar{height:6px;border-radius:980px;background:var(--pebble);margin:12px 0 9px;overflow:hidden}
.param .bar i{display:block;height:100%;width:var(--w);border-radius:980px;background:var(--c)}
.param>small{font-size:13px;color:var(--ash);display:block;line-height:1.4}
.param--strongest{background:rgba(41,151,255,.06);border-color:rgba(41,151,255,.35)}

/* ─── Why you two ─────────────────────────────────────────────────────── */
.why{max-width:820px;margin:0 auto;background:var(--white);border:1px solid var(--hairline);border-radius:8px;overflow:hidden}
.why-rule{height:3px;background:var(--arc);transform-origin:left}
.why-grid{display:grid;grid-template-columns:.9fr 1.1fr}
.why .photo-wrap{border-radius:0}
.why .photo-wrap img{height:100%}
.why-body{padding:24px 26px;display:grid;gap:12px;align-content:center}
.why-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.why-head .eyebrow{margin:0;color:var(--link)}
.why-pair{font-weight:600}
.why-pair .fire{color:var(--ember)} .why-pair .air{color:var(--iris)}
.why-body p{font-size:15px;color:var(--smoke);line-height:1.5}
.why-body p.soft{color:var(--ash)}
.why-body p.soft b{color:var(--carbon)}
.why-pills{display:flex;flex-wrap:wrap;gap:6px}
.why-pills span{font-size:12px;font-weight:600;padding:5px 10px;border-radius:999px;background:var(--frost)}
@media (max-width:760px){.why-grid{grid-template-columns:1fr}.why .photo-wrap img{aspect-ratio:4/3}}

/* ─── Verdict ─────────────────────────────────────────────────────────── */
.meter{background:var(--white);border:1px solid var(--hairline);border-radius:8px;padding:18px 20px 10px;margin-bottom:16px}
.meter label{display:flex;justify-content:space-between;font-size:13px;font-weight:600;color:var(--ash)}
.meter .read{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:6px 0 4px}
.meter output{font-family:var(--display);font-size:40px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;min-width:2.2ch}
.meter .read b{font-size:19px;font-weight:600}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:980px;background:var(--arc)}
input[type=range]::-moz-range-track{height:6px;border-radius:980px;background:var(--arc)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;margin-top:-8px;border:1px solid var(--hairline)}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:1px solid var(--hairline)}
.tbl{overflow-x:auto;background:var(--white);border:1px solid var(--hairline);border-radius:8px}
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--hairline);vertical-align:top}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
thead th{font-size:13px;color:var(--ash);font-weight:600;white-space:nowrap}
.vt td{transition:background .3s,color .3s;color:var(--smoke)}
.vt td:first-child{white-space:nowrap;color:var(--ash);font-variant-numeric:tabular-nums}
.vt td:nth-child(2){font-weight:600;color:var(--carbon)}
.vt tr.on td{background:rgba(0,113,227,.07)}
.vt tr.on td:first-child{color:var(--cosmic);font-weight:600}
.verdict-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,4vw,48px);align-items:center}
@media (max-width:860px){.verdict-grid{grid-template-columns:1fr}}
.orbit{position:relative;width:min(340px,100%);aspect-ratio:1;margin-inline:auto;container-type:inline-size}
.orbit .ring{position:absolute;inset:0;animation:spin 80s linear infinite}
.orbit:hover .ring,.orbit:hover .sign span{animation-play-state:paused}
.orbit .ring::before{content:"";position:absolute;inset:14%;border-radius:50%;border:1px dashed var(--hairline)}
.orbit .sign{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translateY(calc(-50cqw + 32px)) rotate(calc(-1 * var(--a)))}
.orbit .sign span{position:absolute;display:grid;justify-items:center;gap:1px;font-size:11.5px;font-weight:500;color:var(--ash);white-space:nowrap;transform:translate(-50%,-50%);animation:spin-back 80s linear infinite}
.orbit .sign i{font-style:normal;font-size:20px;line-height:1.1;font-variant-emoji:text;font-family:"Apple Symbols","Segoe UI Symbol","Noto Sans Symbols 2","Noto Sans Symbols",var(--text)}
.orbit .fire i{color:var(--ember)} .orbit .earth i{color:var(--moss)} .orbit .air i{color:var(--iris)} .orbit .water i{color:var(--tide)}
.orbit .core{position:absolute;inset:30%;display:grid;place-content:center;text-align:center;font-size:12.5px;color:var(--ash);line-height:1.4}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spin-back{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(-360deg)}}

/* ─── Lasting ─────────────────────────────────────────────────────────── */
.lasting-split{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(28px,5vw,60px);align-items:center;margin-bottom:40px}
@media (max-width:860px){.lasting-split{grid-template-columns:1fr}}
.lasting-split .head{text-align:left;margin:0}
.lasting-photo img{transform:scale(1.14)}
.chips{position:absolute;left:12px;right:12px;bottom:12px;z-index:1;display:flex;flex-wrap:wrap;gap:6px}
.chips .chip{position:static}
.lmark{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--hairline);border-radius:999px;padding:6px 12px;font-size:14px;font-weight:600;line-height:1;color:var(--carbon);white-space:nowrap}
.lmark svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chips .lmark{background:rgba(29,29,31,.78);color:var(--frost);border-color:rgba(245,245,247,.45);font-size:12px}
.quote{margin-top:14px;font-size:19px;font-weight:600;color:var(--carbon);display:grid;gap:6px}
.quote small{font-size:13px;font-weight:400;color:var(--mist)}
.intent{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.intent span{border-radius:999px;padding:4px 10px;font-size:12px;font-weight:600;background:var(--frost);color:var(--smoke);white-space:nowrap}
.card p.read{font-size:13px;color:var(--mist)}

/* ─── Checks (Carbon) ─────────────────────────────────────────────────── */
.viz{height:108px;border-radius:8px;border:1px solid var(--hairline-dark);position:relative;overflow:hidden;display:grid;place-items:center;margin-bottom:10px}
.viz .big{font-size:34px;position:relative;z-index:1}
.viz-scan::after{content:"";position:absolute;left:0;right:0;height:34px;top:-36px;background:linear-gradient(180deg,transparent,rgba(41,151,255,.28));border-bottom:1px solid var(--signal);animation:scan 2.8s var(--out) infinite}
@keyframes scan{to{top:108px}}
.viz-oval .ov{position:absolute;width:64px;height:84px;border-radius:50%;border:2px solid var(--signal);animation:breathe 2.4s ease-in-out infinite}
.viz-oval .ov2{position:absolute;width:80px;height:100px;border-radius:50%;border:1px dashed rgba(245,245,247,.35);animation:spin 12s linear infinite}
@keyframes breathe{50%{transform:scale(1.06)}}
.viz-flag .rip{position:absolute;width:54px;height:54px;border-radius:50%;border:1px solid rgba(245,245,247,.5);animation:rip 2.6s ease-out infinite}
.viz-flag .rip:nth-child(2){animation-delay:.87s}.viz-flag .rip:nth-child(3){animation-delay:1.74s}
@keyframes rip{from{transform:scale(.6);opacity:1}to{transform:scale(2.4);opacity:0}}
.btn{display:inline-flex;align-items:center;padding:11px 22px;border-radius:980px;font-size:15px;font-weight:400;text-decoration:none;border:1px solid transparent;transition:background .2s}
.btn--outlined{border-color:var(--signal);color:var(--signal)}
.btn--outlined:hover{background:rgba(41,151,255,.1)}
.center{display:flex;justify-content:center;margin-top:34px}

/* ─── Chat ────────────────────────────────────────────────────────────── */
.chat-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px);align-items:center}
@media (max-width:860px){.chat-split{grid-template-columns:1fr}}
.chat-split .grid-3{grid-template-columns:1fr}
.phone{background:var(--white);border:1px solid var(--hairline);border-radius:8px;padding:10px;max-width:420px;width:100%;margin-inline:auto}
.phone .photo-wrap img{aspect-ratio:16/11}
.thread{display:flex;flex-direction:column;gap:8px;padding:14px 6px 4px}
.bubble{max-width:88%;border-radius:18px;padding:9px 13px;font-size:14px;line-height:1.35}
.bubble.in{align-self:flex-start;background:var(--frost);color:var(--carbon);border-bottom-left-radius:6px}
.bubble.out{align-self:flex-end;background:var(--cosmic);color:#fff;border-bottom-right-radius:6px}
.bubble .q{display:block;font-size:12px;opacity:.85;margin-bottom:3px;padding-left:7px;border-left:2px solid rgba(255,255,255,.6)}
.voice{display:inline-flex;align-items:center;gap:8px}
.wave{display:inline-flex;align-items:center;gap:2px;height:16px}
.wave i{display:block;width:2px;border-radius:1px;background:currentColor;height:var(--h);opacity:.85;animation:wv 1.1s ease-in-out calc(var(--i) * -90ms) infinite alternate}
@keyframes wv{to{transform:scaleY(.35)}}
.voice b{font-size:12px;font-weight:600}
.typing{align-self:flex-start;display:flex;gap:4px;padding:12px 13px;border-radius:18px;background:var(--frost)}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--mist);animation:dot 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{50%{transform:translateY(-4px);opacity:.5}}
.tonight{display:flex;gap:8px;align-items:flex-start;padding:9px 12px;border-radius:8px;background:var(--ice);font-size:13px;color:var(--graphite)}
.compose{display:flex;gap:8px;align-items:center}
.compose i{flex:1;height:36px;border-radius:980px;border:1px solid var(--hairline)}
.compose b{width:36px;height:36px;border-radius:50%;background:var(--cosmic);color:#fff;display:grid;place-items:center}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px;text-align:center}
.stat b{display:block;white-space:nowrap;font-family:var(--display);font-size:clamp(32px,4vw,44px);font-weight:600;letter-spacing:-.02em;line-height:1.05;font-variant-numeric:tabular-nums}
.stat>span{display:block;font-size:14px;color:var(--ash);margin-top:6px}
@media (max-width:640px){.stats{grid-template-columns:1fr 1fr}}

/* ─── Recently added ──────────────────────────────────────────────────── */
.orbit-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.orbit-btns span{padding:8px 16px;border-radius:980px;font-size:14px;font-weight:500;border:1px solid var(--hairline);color:var(--carbon);transition:transform .3s var(--out)}
.orbit-btns span:hover{transform:translateY(-2px)}
.orbit-btns .al{background:var(--cosmic);border-color:var(--cosmic);color:#fff}

/* ─── Tiers ───────────────────────────────────────────────────────────── */
.compare{overflow-x:auto;background:var(--white);border:1px solid var(--hairline);border-radius:8px}
.compare table{min-width:640px}
.compare th,.compare td{padding:13px 14px}
.compare thead th{font-size:17px;font-weight:600;color:var(--carbon);width:22%}
.compare thead th.feature{width:34%}
.compare thead small{display:block;font-size:12px;font-weight:400;color:var(--ash);margin-top:4px;white-space:normal}
.compare tbody th{font-weight:600;color:var(--carbon);font-size:14px}
.compare tbody th .e{margin-right:8px}
.compare td{color:var(--smoke);font-size:14px;transition:background .25s}
.compare .tick{color:var(--cosmic);font-weight:600}
.compare .dash{color:var(--mist)}
.compare td.elite{background:var(--ice);color:var(--carbon);font-weight:600}
.compare thead th.elite{background:var(--signal);color:#fff;position:relative;overflow:hidden}
.compare thead th.elite small{color:rgba(255,255,255,.85)}
.compare thead th.elite::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);transform:translateX(-100%);animation:sheen 3.6s var(--ease) infinite}
@keyframes sheen{60%,100%{transform:translateX(100%)}}
.compare td.hl{background:var(--frost)}
.compare td.elite.hl{background:#e6f0fb}
.notes{position:relative;z-index:1;display:grid;gap:6px;margin-top:18px}
.elite-more{margin-top:28px;background:var(--frost);border:1px solid var(--pebble);border-radius:8px;padding:22px 24px}
.elite-more h3{font-size:21px;margin-bottom:14px}
.elite-more ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 28px}
.elite-more li{font-size:15px;line-height:1.35}
.elite-more li b{display:block;font-weight:600}
.elite-more li span{color:var(--ash);font-size:14px}
@media (max-width:640px){.elite-more ul{grid-template-columns:1fr}}
@media (max-width:620px){.compare table{min-width:0}.compare th,.compare td{padding:9px 5px;font-size:11.5px;line-height:1.35}.compare thead th{font-size:13px}.compare thead small{display:none}.compare tbody th{font-size:12px}.compare tbody th .e{margin-right:4px}.compare td{text-align:center}}

/* ─── Honest / FAQ ────────────────────────────────────────────────────── */
.callout{background:var(--frost);border-radius:8px;padding:22px 24px;position:relative;overflow:hidden}
.callout::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--arc);transform-origin:top}
.callout p{font-size:17px;color:var(--smoke)}
.callout strong{color:var(--carbon)}
.faq{border-top:1px solid var(--hairline)}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:18px 0;font-size:17px;font-weight:600;transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--link)}
.faq summary .pm{flex:none;width:22px;height:22px;position:relative;color:var(--ash);transition:transform .4s var(--out)}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:currentColor;transform:translate(-50%,-50%)}
.faq summary .pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] summary .pm{transform:rotate(135deg);color:var(--cosmic)}
.faq details::details-content{block-size:0;overflow:clip;transition:block-size .4s var(--out),content-visibility .4s allow-discrete}
.faq details[open]::details-content{block-size:auto}
.faq details p{margin:0 0 18px;font-size:15px;color:var(--ash);max-width:46em}

/* ─── Closing band (Carbon) ───────────────────────────────────────────── */
.closing{text-align:center;overflow:hidden}
.closing .wrap{position:relative;z-index:1;display:grid;justify-items:center}
.closing .sub{font-size:19px;font-weight:300;color:var(--frost);margin-bottom:10px}
.closing .body{max-width:30em;color:var(--pebble);font-weight:300;font-size:19px}

footer{background:var(--frost);border-top:1px solid var(--hairline);padding-block:40px calc(40px + env(safe-area-inset-bottom,0px));font-size:14px}
.foot{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-bottom:26px}
@media (max-width:700px){.foot{grid-template-columns:1fr 1fr}}
.foot h4{font-size:13px;font-weight:600;margin-bottom:10px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.foot a{color:var(--ash);text-decoration:none;transition:color .15s}
.foot a:hover{color:var(--carbon)}
.copy{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--ash);border-top:1px solid var(--hairline);padding-top:20px}
.mock-tag{font-size:12px;font-weight:600;color:var(--link)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}