/* ============================================================
   Cred Count website — landing page components
   Loaded only by index.html. Depends on tokens.css.
   ============================================================ */

.eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--cyan); display:inline-flex; align-items:center; gap:8px; margin-bottom:18px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:linear-gradient(90deg,transparent,var(--cyan))}
/* Centred eyebrows had a rule on the left only, which read as lopsided rather
   than centred. Mirror it. */
.section-head.center .eyebrow{display:flex; justify-content:center}
.section-head.center .eyebrow::after{content:"";width:22px;height:1px;
  background:linear-gradient(90deg,var(--cyan),transparent)}
h1,h2,h3{line-height:1.12; letter-spacing:-.02em; font-weight:800}
.gradtext{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.section{padding:96px 0; position:relative}
.section-head{max-width:640px; margin-bottom:52px}
.section-head.center{margin:0 auto 52px; text-align:center}
h2{font-size:clamp(1.9rem,4vw,2.7rem); margin-bottom:16px}
.lede{color:var(--dim); font-size:1.075rem; max-width:62ch}
.section-head.center .lede{margin-left:auto; margin-right:auto}

/* Alternating ground. Nine sections at identical padding on one flat colour
   read as a single undifferentiated scroll; this gives the eye a rhythm to
   count by. The band fades out at both ends so there is never a hard seam
   between one section and the next. */
.section.alt::before{content:""; position:absolute; inset:0; z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(23,32,51,0), rgba(23,32,51,.55) 14%,
    rgba(23,32,51,.55) 86%, rgba(23,32,51,0))}

/* ---------- SVG icon defs ---------- */
.i{width:1em;height:1em;display:inline-block;vertical-align:-.125em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- HEADER ----------
   The bar itself is .sitebar in tokens.css, shared with the legal pages.
   Only the badge that sits in its trailing slot is local to this page. */
.no-acct{display:flex; align-items:center; gap:7px; font-size:.85rem; color:var(--dim)}
.no-acct .i{width:16px;height:16px;color:var(--green)}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:.94rem;
  padding:12px 22px; border-radius:12px; cursor:pointer; border:1px solid transparent;
  font-family:var(--sans); line-height:1.2;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn .i{width:18px;height:18px}
.btn-primary{background:var(--grad); color:var(--white);
  box-shadow:0 8px 22px -12px rgba(56,189,248,.7)}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 14px 34px -10px rgba(56,189,248,.6)}
.btn-ghost{background:rgba(51,65,85,.35); color:var(--white); border-color:var(--slate-700)}
.btn-ghost:hover{background:rgba(51,65,85,.6); border-color:#43587a; transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}

/* ---------- HERO ---------- */
.hero{position:relative; padding:70px 0 40px; overflow:hidden}
.hero-glow{
  position:absolute; top:-260px; left:50%; transform:translateX(-50%);
  width:900px; height:620px; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse at center,rgba(99,102,241,.30),rgba(56,189,248,.10) 45%,transparent 70%);
  filter:blur(8px);
}
.track-lines{position:absolute; inset:0; z-index:0; opacity:.5; pointer-events:none}
.hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
.tag{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--dim);
  background:rgba(30,41,59,.7); border:1px solid var(--slate-700); padding:6px 12px; border-radius:99px;
}
.dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(74,222,128,.7);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.6)}70%{box-shadow:0 0 0 8px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
.hero h1{font-size:clamp(2.4rem,5.3vw,3.9rem); margin:22px 0 20px}
/* The product name, inside the h1 rather than beside it.
   Google's OAuth brand verification compares the consent-screen app name
   against the name on this page, and kept failing while the h1 was a tagline
   alone — og:site_name, application-name and two JSON-LD nodes all said
   "Cred Count" and none of them satisfied it. Sized as a wordmark so the
   headline stays the hero; it reads as a label above the line, not a
   competing heading. */
.hero h1 .h1-name{
  display:block; font-family:var(--mono); font-size:.95rem;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--dim); margin-bottom:14px;
}
.hero p.sub{color:var(--dim); font-size:1.14rem; max-width:520px; margin-bottom:30px}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:30px}
.chips{display:flex; flex-wrap:wrap; gap:10px 20px}
.chip{display:flex; align-items:center; gap:7px; font-size:.86rem; color:var(--dim)}
.chip .i{color:var(--green); width:17px; height:17px}

/* ---------- PHONE MOCKUP ---------- */
.phone{
  position:relative; width:300px; margin:0 auto; border-radius:34px; padding:12px;
  background:linear-gradient(160deg,#232f45,#111a2b); border:1px solid var(--slate-700);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.03) inset;
}
.phone-screen{background:var(--slate-900); border-radius:24px; overflow:hidden; padding:18px 16px 20px}
.ps-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px}
.ps-park{display:flex; align-items:center; gap:7px; font-size:.8rem; font-weight:700}
.ps-park .pin{width:20px;height:20px;border-radius:6px;background:var(--grad);display:grid;place-items:center}
.ps-park .pin .i{width:12px;height:12px;color:var(--slate-900);stroke-width:2.4}
.ps-count-card{
  background:linear-gradient(150deg,rgba(52,211,153,.14),rgba(5,150,105,.05));
  border:1px solid rgba(52,211,153,.28); border-radius:18px; padding:18px; margin-bottom:12px; text-align:center;
}
.ps-count-label{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--green);text-transform:uppercase}
.ps-count-num{font-size:3.3rem; font-weight:800; letter-spacing:-.03em; line-height:1; margin:4px 0 2px; font-variant-numeric:tabular-nums}
.ps-count-sub{font-size:.72rem;color:var(--dim)}
.ps-row{display:flex; align-items:center; gap:11px; background:var(--slate-800); border:1px solid var(--slate-700); border-radius:14px; padding:11px 13px; margin-bottom:10px}
.ps-row .thumb{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,#334155,#1e293b);display:grid;place-items:center;flex-shrink:0}
.ps-row .thumb .i{width:19px;height:19px;color:var(--cyan)}
.ps-row .meta{flex:1;min-width:0}
.ps-row .meta b{font-size:.82rem;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-row .meta span{font-size:.68rem;color:var(--dim);font-family:var(--mono)}
.ps-stars{color:var(--amber);font-size:.72rem;letter-spacing:1px}
.ps-ops{display:flex; justify-content:space-between; align-items:center; background:linear-gradient(150deg,rgba(249,115,22,.13),rgba(234,88,12,.04)); border:1px solid rgba(249,115,22,.3); border-radius:14px; padding:12px 14px}
.ps-ops .l{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;color:var(--ops);text-transform:uppercase}
.ps-ops .v{font-size:1.25rem;font-weight:800;font-variant-numeric:tabular-nums}
.ps-ops .v small{font-size:.62rem;color:var(--dim);font-weight:600}
.float-badge{
  position:absolute; z-index:2; display:flex; align-items:center; gap:9px; padding:10px 14px;
  background:rgba(23,32,51,.92); border:1px solid var(--slate-700); border-radius:14px;
  box-shadow:0 20px 40px -18px rgba(0,0,0,.7); backdrop-filter:blur(6px);
  font-size:.8rem; font-weight:600;
}
.float-badge .i{width:18px;height:18px}
.fb-1{top:26px; left:-46px; animation:floaty 5s ease-in-out infinite}
.fb-2{bottom:60px; right:-40px; animation:floaty 5.6s ease-in-out infinite .6s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* real screenshots in a device frame — object-position:bottom crops the top status bar + DEBUG banner */
.device{position:relative; width:280px; margin:0 auto; border-radius:42px; padding:11px;
  background:linear-gradient(160deg,#243049,#0c1424); border:1px solid var(--slate-700);
  box-shadow:0 45px 90px -35px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.03) inset}
.device .screen{position:relative; border-radius:32px; overflow:hidden; background:#0b1120}
.device .screen img{display:block; width:100%}

/* ---------- FEATURE ROWS ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center}
.split.rev .visual{order:-1}
.mini-list{list-style:none; margin-top:24px; display:flex; flex-direction:column; gap:14px}
.mini-list li{display:flex; gap:13px; align-items:flex-start}
.mini-list .ic{flex-shrink:0; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:rgba(56,189,248,.12); color:var(--cyan)}
.mini-list .ic .i{width:18px;height:18px}
.mini-list b{display:block; font-size:.98rem; margin-bottom:1px}
.mini-list p{color:var(--dim); font-size:.9rem; margin:0}

/* local-first diagram */
.lf-diagram{margin-top:28px}
.lf-node{display:flex; align-items:center; gap:14px; background:var(--slate-850); border:1px solid var(--slate-700); border-radius:14px; padding:14px 16px}
.lf-node.vault{border-color:rgba(74,222,128,.32); background:linear-gradient(150deg,rgba(74,222,128,.06),var(--slate-850))}
.lf-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex-shrink:0}
.lf-ic .i{width:21px;height:21px}
.lf-node b{display:block;font-size:.96rem;color:var(--white)}
.lf-node span{font-size:.82rem;color:var(--dim);line-height:1.45}
.lf-flow{display:flex; align-items:center; gap:11px; padding:9px 0 9px 20px; color:var(--low); font-size:.76rem; font-family:var(--mono); letter-spacing:.04em}
.lf-flow::before{content:""; width:2px; height:30px; background:linear-gradient(var(--cyan),var(--indigo)); border-radius:2px; margin-left:-1px}
.lf-gap{height:14px}

/* count visual */
.count-visual{
  background:linear-gradient(160deg,var(--slate-850),var(--slate-900));
  border:1px solid var(--slate-700); border-radius:24px; padding:40px; text-align:center; position:relative; overflow:hidden;
}
.count-visual::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(74,222,128,.16),transparent 60%)}
.count-big{position:relative; font-size:clamp(4rem,11vw,6.6rem); font-weight:800; letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums; background:var(--grad-cred);-webkit-background-clip:text;background-clip:text;color:transparent}
.count-cap{position:relative; font-family:var(--mono); font-size:12px; letter-spacing:.24em; color:var(--green); text-transform:uppercase; margin-top:10px}
.count-split{position:relative; display:flex; justify-content:center; gap:14px; margin-top:26px}
.count-pill{background:var(--slate-800); border:1px solid var(--slate-700); border-radius:12px; padding:12px 18px; min-width:100px}
.count-pill .n{font-size:1.5rem; font-weight:800; font-variant-numeric:tabular-nums}
.count-pill .t{font-size:.7rem; color:var(--dim); font-family:var(--mono); letter-spacing:.1em; text-transform:uppercase}
.cred-ovr{position:relative; margin-top:22px; display:flex; align-items:center; justify-content:space-between; gap:14px; background:var(--slate-800); border:1px solid var(--slate-700); border-radius:14px; padding:12px 14px}
.ovr-lab{font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--amber)}
.ovr-seg{display:flex; background:var(--slate-900); border:1px solid var(--slate-700); border-radius:10px; padding:3px; cursor:pointer}
.ovr-seg span{font-size:.7rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; padding:6px 12px; border-radius:7px; color:var(--dim); transition:.2s; white-space:nowrap}
.ovr-seg span.on{background:var(--grad-cred); color:var(--white)}

/* ---------- OPS DEMO ---------- */
.ops-wrap{background:linear-gradient(160deg,var(--slate-850),var(--slate-900)); border:1px solid var(--slate-700); border-radius:24px; padding:32px}
.ops-stats{display:flex; justify-content:space-between; margin-bottom:24px}
.ops-stats .l{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--dim);text-transform:uppercase;margin-bottom:4px}
.ops-pph{font-size:2.4rem;font-weight:800;color:var(--ops);font-variant-numeric:tabular-nums;line-height:1}
.ops-pph small{font-size:.9rem;color:var(--dim);font-weight:600}
.ops-avg{font-size:2.4rem;font-weight:800;color:var(--amber);font-variant-numeric:tabular-nums;line-height:1;text-align:right}
/* Before the first pair of dispatches there is no interval to show. A full-size
   amber em-dash read as a rendering fault; dim it until it means something. */
.ops-avg.empty{color:var(--slate-700)}
.ops-pph.empty{color:var(--slate-700)}
.gauge{position:relative; width:230px; height:230px; margin:0 auto; cursor:pointer; user-select:none; display:grid; place-items:center}
.gauge-svg{position:absolute; inset:0; transform:rotate(-90deg)}
.gauge-track{stroke:#1C2A4A;stroke-width:8;fill:none}
.gauge-fill{stroke:var(--gc,#4ADE80);stroke-width:8;fill:none;stroke-linecap:round;transition:stroke-dashoffset .12s linear,stroke .3s}
.shockwave{position:absolute; width:196px; height:196px; border-radius:50%; background:var(--gc,#4ADE80); opacity:0; pointer-events:none}
.shockwave.go{animation:shock .32s ease-out forwards}
@keyframes shock{0%{opacity:.55; transform:scale(1)}100%{opacity:0; transform:scale(1.8)}}
.gauge-btn{
  position:relative; width:196px; height:196px; border-radius:50%;
  background:var(--slate-800); border:2px solid rgba(255,255,255,.1);
  box-shadow:0 8px 15px rgba(0,0,0,.35), 0 0 18px 2px rgba(56,189,248,.10);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  transition:transform .12s cubic-bezier(.34,1.56,.64,1);
}
.gauge.armed .gauge-btn{animation:breathe 1.8s ease-in-out infinite}
@keyframes breathe{0%,100%{box-shadow:0 8px 15px rgba(0,0,0,.35),0 0 18px 2px var(--gc-soft,rgba(74,222,128,.12))}50%{box-shadow:0 8px 15px rgba(0,0,0,.35),0 0 34px 7px var(--gc-soft,rgba(74,222,128,.30))}}
.gauge-btn.press{transform:scale(.9)}
.gauge-btn .tapicon{width:40px;height:40px;fill:var(--gc,#38BDF8);transition:fill .3s}
.gauge-btn .lab{font-weight:800; letter-spacing:.15em; font-size:.9rem; margin-top:10px; color:var(--white)}
.gauge-btn .timer{font-family:var(--mono); font-size:1.7rem; font-weight:700; margin-top:6px; color:var(--dim); font-variant-numeric:tabular-nums}
/* The invitation to try the demo used to sit at the bottom of the text column,
   on the far side of the page from the thing it was inviting you to press. */
.ops-try{margin-top:20px; text-align:center; font-size:.85rem; color:var(--dim)}
.ops-log{margin-top:16px; display:flex; align-items:center; justify-content:space-between}
.ops-log .btn-reset{background:none;border:none;color:var(--dim);cursor:pointer;font-size:.85rem;display:inline-flex;align-items:center;gap:6px}
.ops-log .btn-reset:hover{color:var(--white)}
.ops-hint{font-size:.8rem;color:var(--low);font-family:var(--mono)}

/* ---------- TROPHIES ---------- */
.trophy-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.trophy{
  background:var(--slate-850); border:1px solid var(--slate-700); border-radius:18px;
  padding:26px 16px 20px; text-align:center; position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .2s ease, border-color .2s ease;
}
/* Descriptions run to one or two lines, so the category label landed at a
   different height in every card. Pin it to the bottom of the card instead. */
.trophy-desc{flex:1}
.trophy:hover{transform:translateY(-4px); border-color:#3f5170}
@media (prefers-reduced-motion:reduce){.trophy:hover,.card:hover{transform:none}}
.trophy .glow{position:absolute; top:-40px; left:50%; transform:translateX(-50%); width:120px; height:120px; border-radius:50%; filter:blur(30px); opacity:.4}
.badge{position:relative; width:96px; height:96px; margin:0 auto 16px}
.badge img{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%)}
.badge .ring{width:100%; height:100%}
.badge .glass{width:86%; height:86%}
.badge .icon{width:36%; height:36%}
.trophy.locked .badge{opacity:.4; filter:grayscale(.6)}
.trophy.locked .glow{display:none}
.trophy-name{font-weight:800; font-size:.86rem; letter-spacing:.02em; margin-bottom:5px}
.trophy-desc{font-size:.76rem; color:var(--dim); line-height:1.45}
.trophy-cat{font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--low); margin-top:9px}

/* ---------- PRIVACY CARDS ---------- */
.cards3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.card{background:var(--slate-850); border:1px solid var(--slate-700); border-radius:18px; padding:26px; transition:.2s}
.card:hover{transform:translateY(-3px); border-color:#3f5170}
.card .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px;background:rgba(56,189,248,.12);color:var(--cyan)}
.card .ic .i{width:22px;height:22px}
.card h3{font-size:1.08rem; margin-bottom:8px}
.card p{color:var(--dim); font-size:.92rem}
.card.g-green .ic{background:rgba(74,222,128,.12);color:var(--green)}
.card.g-amber .ic{background:rgba(251,191,36,.12);color:var(--amber)}

/* smart import visual */
.imp-visual{display:grid; grid-template-columns:1.3fr auto 1fr; gap:22px; align-items:center; margin-bottom:36px;
  background:linear-gradient(160deg,var(--slate-850),var(--slate-900)); border:1px solid var(--slate-700); border-radius:22px; padding:26px}
.imp-sheet{background:var(--slate-900); border:1px solid var(--slate-700); border-radius:12px; overflow:hidden}
.imp-sheet-bar{display:flex; align-items:center; gap:6px; font-size:.72rem; color:var(--dim); font-family:var(--mono); padding:9px 12px; background:var(--slate-800); border-bottom:1px solid var(--slate-700)}
.dotx{width:8px;height:8px;border-radius:50%;background:var(--slate-700)}
.imp-grid{display:grid; grid-template-columns:repeat(4,1fr)}
.imp-cell{padding:9px 10px; font-size:.75rem; border-bottom:1px solid var(--borderSubtle,#1E293B); border-right:1px solid #1e293b; color:var(--white)}
.imp-cell.head{font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--cyan); background:rgba(56,189,248,.06)}
.imp-arrow{display:grid; place-items:center; color:var(--cyan); font-size:1.4rem}
.imp-arrow .i{width:26px;height:26px}
.imp-out{display:flex; flex-direction:column; gap:9px}
.imp-chip{display:flex; align-items:center; gap:8px; font-size:.8rem; padding:9px 12px; border-radius:10px; background:var(--slate-800); border:1px solid var(--slate-700); color:var(--dim)}
.imp-chip b{color:var(--white); font-weight:700}
.imp-chip .i{width:15px;height:15px;flex-shrink:0}
.imp-chip.ok{border-color:rgba(74,222,128,.35)} .imp-chip.ok .i{color:var(--green)}
.imp-chip.warn{border-color:rgba(251,191,36,.35)} .imp-chip.warn .i{color:var(--amber)}
@media(max-width:820px){.imp-visual{grid-template-columns:1fr; gap:16px}.imp-arrow{transform:rotate(90deg)}}

/* steps */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; counter-reset:s}
.step{background:var(--slate-850); border:1px solid var(--slate-700); border-radius:18px; padding:26px; position:relative}
.step .num{font-family:var(--mono); font-size:.8rem; color:var(--cyan); font-weight:700; margin-bottom:12px; display:block}
.step h3{font-size:1.05rem; margin-bottom:8px}
.step p{color:var(--dim); font-size:.9rem}

/* watch */
.watch{position:relative; width:220px; margin:0 auto; display:flex; flex-direction:column; align-items:center}
.strap{width:118px; background:linear-gradient(160deg,#2b3654,#141b2e); position:relative}
.strap.top{height:76px; border-radius:30px 30px 10px 10px; margin-bottom:-18px; box-shadow:inset 0 4px 7px rgba(255,255,255,.06), inset 0 -6px 12px rgba(0,0,0,.4)}
.strap.bot{height:76px; border-radius:10px 10px 30px 30px; margin-top:-18px; box-shadow:inset 0 -4px 7px rgba(255,255,255,.04), inset 0 6px 12px rgba(0,0,0,.4)}
.strap::after{content:""; position:absolute; left:50%; transform:translateX(-50%); width:70px; height:8px; background:rgba(0,0,0,.35); border-radius:4px}
.strap.top::after{bottom:24px} .strap.bot::after{top:24px}
.watch-body{position:relative; width:216px; height:216px; border-radius:50%; background:#05080f; padding:12px; z-index:3;
  box-shadow:0 34px 64px -22px #000, 0 0 0 1px #263145, 0 0 0 7px #0a0f1c, inset 0 0 0 1px rgba(255,255,255,.04)}
.crown{position:absolute; right:-7px; top:50%; transform:translateY(-50%); width:10px; height:40px; border-radius:4px; background:linear-gradient(90deg,#3a465f,#1a2234); box-shadow:0 2px 4px rgba(0,0,0,.5)}
.crown.small{height:22px; top:34%}
.watch-screen{position:relative; width:100%; height:100%; border-radius:50%; overflow:hidden; background:radial-gradient(circle at 50% 32%,#141d33,#070c18); display:flex; flex-direction:column; align-items:center; justify-content:center}
.watch-ring{position:absolute; inset:0}
.watch-ring circle{fill:none; stroke-width:8; stroke-linecap:round}
.wf-num{font-size:3rem; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; background:var(--grad-cred);-webkit-background-clip:text;background-clip:text;color:transparent}
.wf-lab{font-family:var(--mono); font-size:9px; letter-spacing:.24em; color:var(--green); text-transform:uppercase; margin-top:3px}
.wf-park{display:flex; align-items:center; gap:4px; font-size:.66rem; color:var(--dim); margin-top:9px}
.wf-park .i{width:11px;height:11px;color:var(--cyan)}
.wf-pill{margin-top:11px; font-size:9px; font-weight:800; letter-spacing:.12em; color:var(--slate-900); background:var(--grad); padding:5px 13px; border-radius:99px}

/* device tilt for variety */
.device{transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.tilt-l{transform:rotate(-2.6deg)} .tilt-r{transform:rotate(2.6deg)}
.tilt-l:hover,.tilt-r:hover{transform:rotate(0)}

/* ghost logs */
.ghost-visual{background:linear-gradient(160deg,var(--slate-850),var(--slate-900)); border:1px solid var(--slate-700); border-radius:22px; padding:24px}
.ghost-card{display:flex; align-items:center; gap:13px; border-radius:16px; padding:15px 16px}
.ghost-card.raw{background:var(--slate-900); border:1px dashed var(--slate-700)}
.ghost-card.done{background:linear-gradient(150deg,rgba(74,222,128,.08),var(--slate-850)); border:1px solid rgba(74,222,128,.4)}
.ghost-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex-shrink:0}
.ghost-ic .i{width:22px;height:22px}
.ghost-meta{flex:1;min-width:0}
.ghost-meta b{display:block;font-size:.95rem;color:var(--white)}
.ghost-meta span{font-size:.78rem;color:var(--dim)}
.ghost-tag{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;border-radius:7px;white-space:nowrap}
.ghost-tag.gt{color:var(--pink);border:1px solid rgba(255,177,229,.4)}
.ghost-flow{display:flex;align-items:center;gap:10px;padding:11px 0 11px 22px;color:var(--low);font-size:.77rem;font-family:var(--mono)}
.ghost-flow::before{content:"";width:2px;height:26px;background:linear-gradient(var(--pink),var(--green));border-radius:2px;margin-left:-1px}
.ghost-confirm{font-size:.7rem;font-weight:800;letter-spacing:.04em;color:var(--white);background:var(--grad-cred);border:none;border-radius:8px;padding:9px 15px;cursor:pointer;white-space:nowrap}

/* share cards */
.share-cards{display:flex; gap:20px; justify-content:center; align-items:center; flex-wrap:wrap; perspective:1400px}
.share-card{width:222px; aspect-ratio:9/16; border-radius:24px; padding:22px; display:flex; flex-direction:column; border:1px solid rgba(255,255,255,.12); box-shadow:0 34px 64px -32px rgba(0,0,0,.75); transition:transform .4s}
.share-card .sc-top{display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.82)}
.sc-logo{width:22px;height:22px;border-radius:6px}
.sc-body{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center}
.sc-huge{font-size:4.2rem; font-weight:800; line-height:.9; letter-spacing:-.03em; color:#fff}
.sc-cap{font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.85); margin-top:6px}
.sc-foot{font-family:var(--mono); font-size:8.5px; letter-spacing:.1em; color:rgba(255,255,255,.6); text-align:center}
.share-card.sc-cred{background:linear-gradient(160deg,#059669,#0f172a 88%); transform:rotate(-5deg)}
.share-card.sc-trophy{background:linear-gradient(160deg,#5b3aa6,#0f172a 88%); transform:scale(1.08); z-index:2}
.share-card.sc-trip{background:linear-gradient(160deg,#1d4ed8,#0f172a 88%); transform:rotate(5deg)}
.share-card:hover{transform:scale(1.05) rotate(0)}
@media(max-width:720px){.share-card.sc-cred,.share-card.sc-trophy,.share-card.sc-trip{transform:none}}

/* ---------- CLOSING CTA ----------
   The page used to stop dead on the watch section and go straight to the
   footer, so a reader who had just been sold the thing had nowhere to go and
   no answer to "how do I get it?". */
.cta{position:relative; overflow:hidden; text-align:center;
  background:linear-gradient(160deg,var(--slate-850),var(--slate-900));
  border:1px solid var(--slate-700); border-radius:28px; padding:64px 32px}
.cta::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 50% -10%,rgba(99,102,241,.28),transparent 62%)}
.cta > *{position:relative}
.cta h2{margin-bottom:14px}
.cta .lede{max-width:560px; margin:0 auto}
.cta-actions{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:32px}
.cta-foot{margin-top:22px; font-size:.83rem; color:var(--low)}
.cta-foot a{color:var(--dim); border-bottom:1px solid rgba(148,163,184,.35)}
.cta-foot a:hover{color:var(--cyan); border-bottom-color:var(--cyan)}

/* ---------- FOOTER ----------
   Structure and styling are .sitefoot in tokens.css, shared with the legal
   pages. Nothing page-specific left to add. */

/* reveal
   Guarded on .js so the page is readable with scripting off or blocked —
   without it every section below the hero stayed at opacity:0 forever. */
.js .reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease}
.js .reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{transition-duration:.01ms; transform:none}
}

/* ---------- RESPONSIVE ---------- */
@media(max-width:900px){
  /* minmax(0,…), not 1fr. A bare `1fr` track has an automatic minimum of
     min-content, so any child that refuses to shrink — here the flex row
     inside .count-visual — widens the track past the column and pushes the
     whole page sideways. This was invisible until 2026-08-06 because
     `overflow-x:hidden` on body was hiding it, and that band-aid was itself
     breaking the sticky header (see tokens.css). Same fix, and the same
     reasoning, as .layout in legal.css. */
  .hero-grid,.split{grid-template-columns:minmax(0,1fr); gap:44px}
  .split.rev .visual{order:0}
  .hero-showcase{margin-top:10px}
  .trophy-grid{grid-template-columns:repeat(2,1fr)}
  .cards3,.steps{grid-template-columns:1fr}
  .float-badge{display:none}
  .section{padding:72px 0}
  .cta{padding:48px 24px; border-radius:22px}
}
@media(max-width:560px){
  .trophy-grid{grid-template-columns:repeat(2,1fr)}
  .ops-stats{flex-direction:column;gap:16px}
  .ops-avg{text-align:left}
  .hero h1{font-size:2.2rem}
  .ops-wrap,.count-visual{padding:24px 20px}
  .gauge,.gauge-svg{width:200px;height:200px}
  .gauge-btn,.shockwave{width:170px;height:170px}
}

/* Inline caveat inside a lede — used where a marketing claim needs a limit
   stated next to it rather than buried in the legal pages. */
.note-inline{color:var(--dim); font-size:.92em}

/* The data section makes the strongest claims on the site; it should point at
   the document that backs them rather than asking to be taken on trust. */
.policy-cta{margin-top:26px;padding:14px 18px;font-size:.94rem;color:var(--dim);
  background:var(--slate-850);border:1px solid var(--slate-800);
  border-left:3px solid var(--cyan);border-radius:0 10px 10px 0}
.policy-cta a{color:var(--cyan);border-bottom:1px solid rgba(56,189,248,.35)}
.policy-cta a:hover{border-bottom-color:var(--cyan)}