/* ===== ShopGrade home page =====
   The home page's own stylesheet. Every other page still loads style.css; this
   one was split out so the home page could move to a light, paper-and-ink
   system without repainting the legal pages, the portals and the generated
   pages in the same change.

   Colour carries meaning here, not decoration. Ink is the interface; the four
   data colours are the report's own severity palette (SEV_META in
   src/report/Report.tsx), so a red dot on this page means what a red dot in the
   report means. The brand magenta is the logo's own colour, used as a pen: the
   hand-drawn circles, underlines and strikes an auditor would put on a page,
   plus the reading line under the nav and selected text. Never a fill, never
   a surface. Highlighter yellow is the one warm accent, and the six score
   areas each keep the colour their chip carries in the checks marquee.

   Type is Google Sans, the face the report is set in: the same variable file
   the report host serves, here from /assets/ so font-src stays 'self'. Labels
   and readings use its sibling, Google Sans Code. */
@font-face{
  font-family:"Google Sans";
  src:url("/assets/fonts/google-sans-variable.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}
/* Google Sans Code comes from /assets/ too. It used to be a stylesheet on
   fonts.googleapis.com, which blocked the first paint of every page on a fresh
   third-party connection. This is the whole variable family from google/fonts
   (OFL; the licence is served beside it as google-sans-code-OFL.txt). The file
   spans 300-800, but the range is held to the 400-500 that Google served, so
   the 600 labels keep the synthesised weight they always had. */
@font-face{
  font-family:"Google Sans Code";
  src:url("/assets/fonts/google-sans-code-variable.ttf") format("truetype");
  font-weight:400 500; font-style:normal; font-display:swap;
}
@property --ang{ syntax:"<angle>"; inherits:false; initial-value:0deg; }
:root{
  /* The page is white. --paper is only the quiet fill inside a white card
     (chips, evidence, tallies), never a surface of its own. */
  --bg:#FFFFFF;
  --paper:#F6F6F3;
  --paper-2:#EDEDE9;
  /* Soft washes for the alternating sections, from the page's own palette:
     highlighter, information blue, the safe green. */
  --wash-hl:#FFF8DD;
  --wash-blue:#EFF4FE;
  --wash-green:#EDF7F0;
  /* The hero's stage: white, with the brand magenta in a few small places
     (the grid, the offer, the ticks, the pen) and a blush where the
     window meets the edge of it. */
  --stage:#FFFFFF;
  --stage-end:#FFF0F6;
  --stage-line:rgba(236,0,95,.07);
  --card:#FFFFFF;
  --ink:#111113;
  --ink-2:#26262B;
  --ink-3:#45454C;
  /* 5.9:1 on --paper, 6.6:1 on white: safe for small text everywhere. */
  --muted:#5E5E66;
  /* Decorative only (rules, glyphs, the footer wordmark). Never body text. */
  --faint:#8C8C93;
  --line:#E4E3DD;
  --line-2:#D6D5CE;
  --line-3:#C2C1B9;

  --dark:#0E0E10;
  --dark-2:#17171B;
  --dark-3:#202026;
  --dark-line:rgba(255,255,255,.09);
  --dark-line-2:rgba(255,255,255,.17);
  --dark-text:#EDEDEA;
  --dark-muted:#A3A3AB;

  --high:#C5221F; --high-bg:#FCE8E6;
  --med:#A85800;  --med-dot:#E37400; --med-bg:#FEF3DC;
  --low:#1A63C8;  --low-dot:#1A73E8; --low-bg:#E8F0FE;
  --ok:#137333;   --ok-dot:#1E8E3E;  --ok-bg:#E6F4EA;
  --brand:#EC005F;
  --pen:#E2005A;
  --hl:#FFE24A;

  --r-xl:26px;
  --r-lg:18px;
  --r-md:12px;
  --r-sm:8px;
  --sh-1:0 1px 2px rgba(17,17,19,.05);
  --sh-2:0 1px 2px rgba(17,17,19,.04), 0 10px 28px -10px rgba(17,17,19,.14);
  --sh-3:0 1px 3px rgba(17,17,19,.06), 0 34px 80px -28px rgba(17,17,19,.32);
  --font:"Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono:"Google Sans Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --container:1200px;

  /* Read by the consent banner /js/analytics.js injects, which falls back to
     the old dark palette when these are missing. */
  --text:var(--ink);
  --radius:16px;
  --font-display:var(--font);
  --accent-text:var(--ink);
}
@supports (interpolate-size: allow-keywords){ :root{ interpolate-size:allow-keywords; } }

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
html.lenis, html.lenis body{ height:auto; }
html.lenis-on{ scroll-behavior:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }
body{
  font-family:var(--font);
  font-size:16px;
  line-height:1.55;
  letter-spacing:0;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
ul, ol{ list-style:none; }
button{ font:inherit; color:inherit; }
::selection{ background:rgba(236,0,95,.16); }
:focus-visible{ outline:2px solid var(--low-dot); outline-offset:2px; border-radius:4px; }
/* Landing zones for programmatic focus (the skip-link target). Focus still
   moves; only the ring is dropped, and none of these are controls. */
[tabindex="-1"]:focus{ outline:none; }
.skip-link{ position:fixed; left:12px; top:-64px; z-index:2000; padding:10px 16px; border-radius:10px;
  background:var(--ink); color:#fff; font-weight:600; transition:top .16s ease; }
.skip-link:focus{ top:12px; }
.visually-hidden{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }

h1, h2, h3, h4{ font-weight:500; letter-spacing:-0.025em; line-height:1.08; color:var(--ink); }
.mono{ font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.container{ width:100%; max-width:calc(var(--container) + 48px); margin-inline:auto; padding-inline:24px; }

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:46px; padding:0 20px; border-radius:11px; border:1px solid transparent;
  font:500 15px/1 var(--font); letter-spacing:-.01em; white-space:nowrap; cursor:pointer;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .25s ease, translate .25s var(--ease);
}
.btn:hover{ translate:0 -1px; }
.btn:active{ translate:0 0; }
.btn--primary{
  background:var(--ink); color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 1px 2px rgba(17,17,19,.25), 0 8px 18px -8px rgba(17,17,19,.45);
}
.btn--primary:hover{ background:#2A2A30; }
.btn--ghost{ background:var(--card); color:var(--ink); border-color:var(--line-2); box-shadow:var(--sh-1); }
.btn--ghost:hover{ border-color:var(--line-3); }
.btn--light{ background:#fff; color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.2); }
.btn--light:hover{ background:#EDEDEA; }
.btn--outline-dark{ background:transparent; color:var(--dark-text); border-color:var(--dark-line-2); }
.btn--outline-dark:hover{ background:rgba(255,255,255,.06); }
.btn--sm{ height:36px; padding:0 14px; font-size:14px; border-radius:9px; }
.btn--block{ width:100%; }
.arrow{ width:15px; height:15px; flex:none; transition:transform .3s var(--ease); }
.btn:hover .arrow{ transform:translate(2px,-2px); }

/* Section kicker: an index and a name, set in mono. */
.kick{ display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.kick b{ font-weight:500; color:var(--ink); font-size:11px; padding:3px 7px; border:1px solid var(--line-2);
  border-radius:6px; background:var(--card); }
.kick--dark{ color:var(--dark-muted); }
.kick--dark b{ color:var(--dark-text); border-color:var(--dark-line-2); background:transparent; }
@keyframes ping{ 0%{ transform:scale(.6); opacity:.9; } 80%,100%{ transform:scale(2.1); opacity:0; } }

/* ===== REVEAL =====
   `transform`, not the `translate` property, so the noscript block in the page
   head (which resets transform) can fully undo it. */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ===== NAV ===== */
.nav{ position:sticky; top:0; z-index:100; }
.nav::before{ content:""; position:absolute; inset:0; z-index:-1; background:rgba(255,255,255,.8);
  -webkit-backdrop-filter:saturate(1.6) blur(14px); backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .3s ease, background-color .3s ease; }
.nav.scrolled::before{ border-bottom-color:var(--line); background:rgba(255,255,255,.9); }
/* at the top of the page the nav is part of the hero's white stage */
.nav:not(.scrolled)::before{ background:var(--stage); -webkit-backdrop-filter:none; backdrop-filter:none; }
.nav__inner{ display:flex; align-items:center; gap:20px; height:64px; }
.brand{ display:inline-flex; align-items:center; gap:10px; font-size:17px; font-weight:600; letter-spacing:-.025em; color:var(--ink); }
.brand__mark{ width:28px; height:28px; border-radius:22%; }
/* the parent company, set under the wordmark in the nav */
.brand__text{ display:flex; flex-direction:column; gap:1px; line-height:1.15; }
.brand__by{ font-size:11px; font-weight:500; letter-spacing:0; color:var(--muted); }
.nav__links{ display:flex; align-items:center; gap:2px; margin-inline:auto; }
.nav__links a{ display:inline-flex; align-items:center; padding:8px 12px; border-radius:8px; font-size:14.5px; color:var(--ink-3);
  transition:color .2s ease, background-color .2s ease; }
.nav__links a:hover{ color:var(--ink); background:rgba(17,17,19,.05); }
.nav__links a[aria-current="page"]{ color:var(--ink); font-weight:500; background:rgba(236,0,95,.07); }
.nav__links a svg{ display:none; }
.nav__links-label, .nav__menusignin, .nav__menucta{ display:none !important; }
.nav__actions{ display:flex; align-items:center; gap:8px; }
.nav__toggle{ display:none; }
.nav__backdrop{ display:none; }

@media (max-width:980px){
  .nav__inner{ justify-content:space-between; }
  .nav__links{
    position:fixed; top:70px; left:12px; right:12px; z-index:5; margin:0;
    flex-direction:column; align-items:stretch; gap:0; padding:10px;
    /* dvh, not vh: a vh cap is measured against the tallest the viewport ever
       gets, so with a phone's URL bar showing the last rows sat under it. */
    max-height:calc(100dvh - 84px); overflow-y:auto; overscroll-behavior:contain;
    background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--sh-3);
    opacity:0; visibility:hidden; transform:translateY(-8px) scale(.985); transform-origin:top center;
    transition:opacity .22s ease, transform .35s var(--ease), visibility 0s linear .35s;
  }
  .nav__links.open{ opacity:1; visibility:visible; transform:none; transition:opacity .22s ease, transform .35s var(--ease); }
  .nav__links a{ display:flex; justify-content:space-between; padding:13px 12px; font-size:16px; color:var(--ink); border-radius:10px; }
  .nav__links a svg{ display:block; color:var(--faint); }
  .nav__links-label{ display:block !important; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:6px 12px 8px; }
  .nav__menusignin{ display:flex !important; }
  .nav__menucta{ display:flex !important; justify-content:center !important; gap:8px; margin-top:8px; background:var(--ink); color:#fff !important; font-weight:500; }
  .nav__menucta:hover{ background:#2A2A30 !important; }
  .nav__signin{ display:none; }
  .nav__toggle{ display:inline-flex; flex-direction:column; justify-content:center; align-items:center; gap:4px;
    width:40px; height:40px; border-radius:10px; border:1px solid var(--line-2); background:var(--card); cursor:pointer; }
  .nav__toggle span{ display:block; width:16px; height:1.6px; border-radius:2px; background:var(--ink); transition:transform .3s var(--ease), opacity .2s ease; }
  .nav__toggle.open span:nth-child(1){ transform:translateY(5.6px) rotate(45deg); }
  .nav__toggle.open span:nth-child(2){ opacity:0; }
  .nav__toggle.open span:nth-child(3){ transform:translateY(-5.6px) rotate(-45deg); }
  .nav__backdrop{ display:block; position:fixed; inset:0; z-index:-2; background:rgba(17,17,19,.22); opacity:0; pointer-events:none; transition:opacity .25s ease; }
  .nav__backdrop.open{ opacity:1; pointer-events:auto; }
}
@media (max-width:560px){
  .nav__cta{ display:none; }
}
/* ===== HERO =====
   The hero is a white stage with a little magenta in it. The band starts
   behind the nav and stops halfway down the browser window (see
   .hero__stage::before), warming to a blush at its lower edge, so the product
   sits across that edge instead of floating on a flat fill. */
.hero{ position:relative; padding:60px 0 24px; isolation:isolate; overflow:clip; }
/* one faint warmth up by the offer, so the white has a direction to it */
.hero::before{ content:""; position:absolute; inset:0 0 auto; height:min(1000px, 100%); z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 34% 40% at 86% 22%, rgba(236,0,95,.06), transparent 70%); }
.hero__grid{ position:absolute; inset:0 0 auto; height:760px; pointer-events:none; overflow:hidden;
  background-image:linear-gradient(var(--stage-line) 1px, transparent 1px), linear-gradient(90deg, var(--stage-line) 1px, transparent 1px);
  background-size:72px 72px; background-position:center -1px;
  -webkit-mask-image:radial-gradient(ellipse 80% 85% at 50% 0%, #000 25%, transparent 75%);
  mask-image:radial-gradient(ellipse 80% 85% at 50% 0%, #000 25%, transparent 75%); }
/* a slow scan line crossing the grid, the page's one ambient motion */
.hero__grid::after{ content:""; position:absolute; left:0; right:0; top:0; height:180px;
  background:linear-gradient(180deg, transparent, rgba(236,0,95,.025) 80%, rgba(236,0,95,.07));
  border-bottom:1px solid rgba(236,0,95,.22); transform:translateY(-200px); animation:gridScan 9s var(--ease-io) 1.6s infinite; }
@keyframes gridScan{ 0%{ transform:translateY(-200px); opacity:0; } 8%{ opacity:1; } 55%{ opacity:1; } 62%,100%{ transform:translateY(760px); opacity:0; } }
.hero__inner{ position:relative; display:grid; grid-template-columns:minmax(0,1fr);
  grid-template-areas:"copy" "side" "proof"; row-gap:30px; }
.hero__copy{ grid-area:copy; }
/* The headline gets the full width so it always sets as two lines; the
   description and the buttons share the row beneath it. */
.hero__side{ grid-area:side; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px);
  grid-template-areas:"sub cta" "sub guide"; column-gap:64px; align-items:start; }
.hero__proof{ grid-area:proof; display:flex; align-items:center; justify-content:space-between; gap:16px 32px; flex-wrap:wrap;
  padding-top:20px; border-top:1px solid var(--line); }
.hero__title{ font-size:clamp(42px, 7.6vw, 108px); line-height:1; letter-spacing:-.045em; font-weight:500; color:var(--ink); }
.hero__title .ln{ display:block; }
/* Each word rises out of a mask. The mask reaches past the word on every side
   but the top, and the matching negative margins keep the layout as it was:
   at -.045em tracking the tail of a y and the end of an e overhang the word's
   own box, and a mask cut to that box sliced them off. */
.hero__title .w{ display:inline-block; overflow:hidden; vertical-align:top; padding:0 .08em .1em; margin:0 -.08em -.1em; }
.hero__title .w > span{ display:inline-block; animation:lineUp 1.1s var(--ease) both; animation-delay:calc(var(--i) * 70ms + .1s); }
.hero__click{ position:relative; display:inline-block; }
.hero__click .w > span{ transition:color .3s ease; }
/* the pointer flies in, presses, and the word answers the click */
.hero__ptr{ position:absolute; left:74%; top:70%; width:.42em; height:.42em; pointer-events:none; opacity:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l14 7.5-6.2 1.6L10 18.5z' fill='%23111113' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.2)); animation:ptrIn 3.2s var(--ease-io) 1.15s both; }
.hero__ring{ position:absolute; left:74%; top:70%; width:.5em; height:.5em; margin:-.25em 0 0 -.25em; border-radius:50%;
  border:2px solid var(--brand); opacity:0; pointer-events:none; animation:ptrRing .8s var(--ease) 2.12s; }
@keyframes ptrIn{ 0%{ opacity:0; transform:translate(1.6em, 1em); } 10%{ opacity:1; } 28%{ transform:none; } 31%{ transform:scale(.8); } 35%{ transform:none; } 72%{ opacity:1; transform:none; } 100%{ opacity:0; transform:translate(.5em, .4em); } }
@keyframes ptrRing{ 0%{ opacity:.9; transform:scale(.4); } 100%{ opacity:0; transform:scale(3.2); } }
.hero__click .w > span{ animation:lineUp 1.1s var(--ease) both, clickFlash 1.2s ease 2.1s both; animation-delay:calc(var(--i) * 70ms + .1s), 2.1s; }
@keyframes clickFlash{ 0%{ color:var(--ink); } 18%{ color:var(--brand); } 100%{ color:var(--ink); } }
.hero__side{ animation:rise 1s var(--ease) .22s both; }
.hero__proof{ animation:rise 1s var(--ease) .34s both; }
@keyframes lineUp{ from{ transform:translateY(108%); } to{ transform:none; } }
@keyframes fadeIn{ from{ opacity:0; } }
@keyframes rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.hero__sub{ grid-area:sub; font-size:20px; line-height:1.5; letter-spacing:-.005em; color:var(--ink-3); max-width:560px; }
.hero__cta{ grid-area:cta; display:flex; flex-wrap:wrap; gap:10px; }
.install-guidance{ grid-area:guide; margin-top:14px; font-size:13px; line-height:1.5; color:var(--muted); }
.install-guidance a, .hero__note a{ color:var(--ink); text-decoration:underline; text-decoration-color:rgba(236,0,95,.35); text-underline-offset:3px; }
.install-guidance a:hover, .hero__note a:hover{ text-decoration-color:var(--brand); }
.hero__trust{ display:flex; flex-wrap:wrap; gap:10px 26px; font-size:14px; color:var(--ink-2); }
.hero__trust li{ display:inline-flex; align-items:center; gap:8px; }
.hero__trust svg{ width:16px; height:16px; padding:2px; border-radius:50%; color:#fff; background:var(--brand); }
.hero__note{ font-size:13.5px; color:var(--muted); }

/* ---------- HERO SCENE ----------
   Everything inside the window is sized in em, and the window's font-size is a
   fixed fraction of the scene's width (116em across), so the composition
   scales as one picture instead of reflowing. */
/* --cw is the scene's width, so the band's lower edge tracks the window. */
.hero__stage{ position:relative; margin-top:44px; --cw:min(var(--container), 100vw - 48px); }
.hero__stage::before{ content:""; position:absolute; z-index:-1; left:50%; width:100vw; translate:-50% 0; pointer-events:none;
  top:-4000px; height:calc(4000px + var(--cw) * .31); z-index:-2;
  background:linear-gradient(180deg, var(--stage) calc(100% - 640px), var(--stage-end) 100%); border-bottom:1px solid rgba(236,0,95,.1); }
.scene{ position:relative; container-type:inline-size; }
.scene__win{
  position:relative; font-size:calc(100cqw / 116); overflow:hidden;
  background:var(--card); border:1px solid var(--line-2); border-radius:1.4em;
  box-shadow:0 0 0 .7em rgba(17,17,19,.035), var(--sh-3);
  transform-origin:50% 0;
  /* perspective() inside the transform: the scene's parent is not the 3D
     context, so a perspective set on an ancestor would leave the tilt flat. */
  transform:perspective(2400px) rotateX(calc(var(--tilt, 0deg) + var(--prx, 0) * 1deg)) rotateY(calc(var(--pry, 0) * 1deg)) scale(var(--sc, 1));
  animation:stageIn 1.4s var(--ease) .3s both;
}
@keyframes stageIn{ from{ opacity:0; translate:0 60px; } to{ opacity:1; translate:0 0; } }
.scene__chrome{ position:relative; display:flex; align-items:center; gap:1.6em; height:4.8em; padding:0 1.6em; background:#F1F0EB; border-bottom:1px solid var(--line); }
.scene__dots{ display:flex; gap:.7em; }
.scene__dots i{ width:1.15em; height:1.15em; border-radius:50%; background:#DAD9D2; }
/* Two tabs: the store, and the one the extension opens on beat 3. */
.scene__tabs{ display:flex; align-items:center; gap:.4em; }
.scene__tab{ display:inline-flex; align-items:center; gap:.7em; height:3em; max-width:16em; padding:0 1.2em; border-radius:.8em;
  border:1px solid var(--line); background:#fff; font-size:1.2em; color:var(--ink-3); white-space:nowrap; overflow:hidden;
  transition:max-width .7s var(--ease), padding .7s var(--ease), opacity .4s ease, background-color .35s ease, border-color .35s ease, color .35s ease; }
.scene__tab img{ flex:none; width:1.25em; height:1.25em; border-radius:.3em; }
.scene__fav{ display:grid; place-items:center; flex:none; width:1.3em; height:1.3em; border-radius:.3em; background:#2F3F35; color:#fff;
  font:600 .75em/1 var(--font); font-style:normal; }
.scene__tt, .scene__url{ display:inline-grid; }
.scene__tt > span, .scene__url > span{ grid-area:1 / 1; transition:opacity .35s ease; }
.scene__bar{ flex:1; display:flex; align-items:center; gap:1.2em; min-width:0; }
.scene__addr{ flex:1; display:flex; align-items:center; gap:.7em; height:3.1em; padding:0 1.3em; border-radius:99em; background:#fff;
  border:1px solid var(--line); font-size:1.25em; color:var(--ink-3); white-space:nowrap; overflow:hidden; }
.scene__addr svg{ width:1.05em; height:1.05em; color:var(--muted); flex:none; }
.scene__tools{ display:flex; align-items:center; gap:1.1em; color:var(--muted); }
.scene__tools > svg{ width:2em; height:2em; }
.scene__ext{ position:relative; display:grid; place-items:center; width:3.2em; height:3.2em; border-radius:.8em; transition:background-color .3s; }
.scene__ext img{ width:2em; height:2em; border-radius:.45em; }
.scene__load{ position:absolute; left:0; bottom:-1px; height:.25em; width:100%; background:var(--brand); transform-origin:left; transform:scaleX(0); opacity:0; }
.scene.is-live[data-step="3"] .scene__load{ animation:chromeLoad 5s cubic-bezier(.2,.6,.3,1) both; }
@keyframes chromeLoad{ 0%{ transform:scaleX(0); opacity:1; } 85%{ transform:scaleX(.92); opacity:1; } 100%{ transform:scaleX(1); opacity:0; } }

.scene__view{ position:relative; aspect-ratio:1600 / 850; overflow:hidden; background:#FAF7F2; }
.scene__store{ width:100%; height:auto; transition:filter .8s ease; }
/* depth: the popup drifts against the window as the pointer moves */
.scene__pop{ translate:calc(var(--ppx, 0) * -7px) calc(var(--ppy, 0) * -6px); }
.scene__chips{ position:absolute; inset:0; pointer-events:none; }
.hchip{ position:absolute; z-index:5; display:inline-flex; align-items:center; gap:9px; padding:11px 14px; border-radius:12px;
  background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid var(--line-2);
  box-shadow:0 1px 2px rgba(17,17,19,.06), 0 18px 40px -16px rgba(17,17,19,.35); font-size:14px; color:var(--ink-3); white-space:nowrap;
  opacity:0; transform:translateY(12px) scale(.94); transition:opacity .5s ease, transform .7s var(--ease);
  translate:calc(var(--ppx, 0) * 14px) calc(var(--ppy, 0) * 12px); }
.hchip b{ font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.hchip .d{ width:8px; height:8px; }
.hchip--l{ left:-34px; top:38%; }
.hchip--r{ right:-34px; top:66%; }
.scene[data-step="3"] .hchip--l, .scene[data-step="4"] .hchip--l{ opacity:1; transform:none; transition-delay:1.2s; }
.scene[data-step="4"] .hchip--r{ opacity:1; transform:none; transition-delay:1.4s; }
@media (max-width:1279px){ .scene__chips{ display:none; } }

/* extension popup: beats 1 and 2 only. Chrome closes it when the new tab opens. */
.scene__pop{ position:absolute; top:1.2em; right:1.6em; z-index:3; width:31em; background:#fff; border:1px solid var(--line-2);
  border-radius:1.2em; box-shadow:0 .2em .4em rgba(17,17,19,.05), 0 2.4em 5em -1.6em rgba(17,17,19,.38); overflow:hidden;
  opacity:0; transform:translateY(-.8em) scale(.96); transform-origin:94% 0; transition:opacity .35s ease, transform .5s var(--ease); }
.scene__pop-h{ display:flex; align-items:center; gap:.8em; padding:1.1em 1.4em; border-bottom:1px solid var(--line); font-size:1.3em; }
.scene__pop-h img{ width:1.5em; height:1.5em; border-radius:.35em; }
.scene__pop-h b{ font-weight:600; letter-spacing:-.02em; }
.scene__pop-b{ display:grid; padding:1.6em 1.4em; }
.sp{ grid-area:1 / 1; display:flex; flex-direction:column; gap:.7em; opacity:0; transform:translateY(.6em);
  transition:opacity .4s ease, transform .5s var(--ease); pointer-events:none; }
.sp__ok{ display:inline-flex; align-items:center; gap:.6em; font:600 1.5em/1.2 var(--font); letter-spacing:-.02em; }
.sp__ok svg{ width:1.2em; height:1.2em; padding:.18em; border-radius:50%; background:var(--ok-bg); color:var(--ok); }
.sp__sub{ font-size:1.25em; color:var(--muted); line-height:1.4; }
.sp__detect{ display:inline-flex; align-items:center; gap:.6em; font:600 1.3em/1.2 var(--font); color:var(--ok); }
.sp__detect i{ width:.65em; height:.65em; border-radius:50%; background:var(--ok-dot); box-shadow:0 0 0 .25em var(--ok-bg); }
.sp__host{ font:1.15em/1.3 var(--mono); color:var(--muted); }
.sp__go{ margin-top:.5em; display:grid; place-items:center; height:3.3em; border-radius:.75em; background:var(--brand); color:#fff;
  font:500 1.3em/1 var(--font); transition:transform .15s ease, background-color .15s ease; }
.sp__go > span{ grid-area:1 / 1; display:inline-flex; align-items:center; gap:.6em; }
.sp__go-b{ opacity:0; }
.sp__go-b i{ width:1em; height:1em; border-radius:50%; border:.15em solid rgba(255,255,255,.35); border-top-color:#fff; animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* the fake pointer that presses "Generate full report" on beat 2 */
.scene__cursor{ position:absolute; z-index:4; left:46%; top:62%; width:2.4em; height:2.4em; opacity:0; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l14 7.5-6.2 1.6L10 18.5z' fill='%23111113' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 .2em .3em rgba(0,0,0,.25)); }

/* ----- beat 3: the tab the extension opens (report.shopgrade.in/preparing),
   drawn in the page's light palette ----- */
.scene__prep{ position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:3em; text-align:center; color:var(--ink); font-variant-numeric:tabular-nums;
  background:radial-gradient(55% 60% at 50% -8%, rgba(236,0,95,.1), transparent 70%), linear-gradient(180deg, #fff, #FBF8F9);
  opacity:0; visibility:hidden; transition:opacity .35s ease, visibility 0s linear .35s; }
.pp__lock{ display:inline-flex; align-items:center; gap:1.1em; text-align:left; }
.pp__lock img{ width:3.8em; height:3.8em; border-radius:1.1em; box-shadow:0 0 0 .5em rgba(236,0,95,.08), 0 1.2em 2.4em -.9em rgba(236,0,95,.5); }
.pp__lock b{ display:block; font:600 1.7em/1.1 var(--font); letter-spacing:-.03em; }
.pp__lock small{ display:block; margin-top:.35em; font:600 .8em/1 var(--font); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.pp__eye{ display:inline-flex; align-items:center; gap:.7em; margin-top:2.6em; padding:.75em 1.5em; border-radius:99em;
  background:#FDF0F5; border:1px solid rgba(236,0,95,.16); color:#A1084A; font:600 .9em/1 var(--font); letter-spacing:.2em; text-transform:uppercase; }
.pp__eye::before{ content:""; width:.6em; height:.6em; border-radius:50%; background:var(--brand); animation:ppDot 1.6s ease infinite; }
@keyframes ppDot{ 50%{ opacity:.25; transform:scale(.7); } }
.pp__title{ margin-top:.5em; font:600 3.7em/1.06 var(--font); letter-spacing:-.045em; }
.pp__pg{ width:50em; margin-top:2.2em; padding:1.5em 1.8em 1.7em; border-radius:1.8em; background:#fff; border:1px solid var(--line-2); text-align:left;
  box-shadow:0 .2em .4em rgba(17,17,19,.03), 0 1.6em 3.2em -2em rgba(17,17,19,.3); }
.pp__top{ display:flex; align-items:baseline; justify-content:space-between; gap:1em; margin-bottom:1em; font-size:1.2em; }
.pp__lbl{ display:inline-grid; color:var(--ink-2); font-weight:600; }
.pp__lbl i{ grid-area:1 / 1; font-style:normal; opacity:0; }
.pp__lbl i:last-child{ opacity:1; }
/* the percentage is a registered integer, so the CSS can count it */
@property --pp{ syntax:"<integer>"; inherits:false; initial-value:100; }
.pp__pct{ counter-reset:pp var(--pp); font-weight:700; color:var(--brand); }
.pp__pct::after{ content:counter(pp) "%"; }
.pp__track{ position:relative; display:block; height:.75em; border-radius:99em; background:#F3EEF0; overflow:hidden; }
.pp__track i{ position:absolute; inset:0; border-radius:inherit; background:linear-gradient(90deg, #FF7DB0, var(--brand)); transform-origin:left; }
.pp__steps{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1em; width:64em; margin-top:1.6em; text-align:left; }
.pp__st{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; column-gap:.9em; row-gap:.4em; padding:1.2em 1.3em;
  border-radius:1.3em; border:1px solid var(--line); background:#fff; }
.pp__st i{ display:grid; place-items:center; width:2.2em; height:2.2em; border-radius:50%; background:var(--paper); font:600 1em/1 var(--font); font-style:normal; color:var(--muted); }
.pp__st b{ font:600 1.3em/1.1 var(--font); }
.pp__st small{ grid-column:1 / -1; font-size:1em; line-height:1.4; color:var(--muted); }
.pp__note{ margin-top:1.7em; display:inline-flex; align-items:center; gap:.7em; font-size:1.1em; color:var(--muted); }
.pp__note::before{ content:""; width:.55em; height:.55em; border-radius:50%; background:#F29900; }

/* ----- beat 4: the same tab, now the report. Light, and it reads down the
   document: overview, health summary, roadmap. The sections are each one
   view tall, so scrolling is a translate by a third of the column. ----- */
.scene__report{ position:absolute; inset:0; z-index:4; display:grid; grid-template-columns:21em minmax(0,1fr); background:#F8F6F4; text-align:left;
  transition:opacity .5s ease; }
.rp__side{ display:flex; flex-direction:column; gap:.2em; padding:1.8em 1.2em; background:#fff; border-right:1px solid var(--line); color:var(--ink-3); overflow:hidden; }
.rp__brand{ display:flex; align-items:center; gap:.9em; padding:0 .4em 1.4em; }
.rp__brand img{ width:3em; height:3em; border-radius:.8em; }
.rp__brand b{ display:block; font:600 1.35em/1.1 var(--font); letter-spacing:-.02em; color:var(--ink); }
.rp__brand small{ display:block; margin-top:.35em; font:600 .72em/1 var(--font); letter-spacing:.14em; text-transform:uppercase; color:#A1084A; }
.rp__store{ display:block; margin-bottom:.8em; padding:1em 1.1em; border-radius:.9em; background:var(--paper); border:1px solid var(--line);
  font:600 1.05em/1.3 var(--font); color:var(--ink); white-space:nowrap; }
.rp__store small{ display:block; margin-bottom:.5em; font:600 .72em/1 var(--font); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.rp__grp{ padding:1.1em .6em .45em; font:600 .78em/1 var(--font); letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.rp__nav{ display:flex; align-items:center; gap:.9em; padding:.7em .6em; border-radius:.7em; font-size:1.08em; color:var(--ink-3); white-space:nowrap; }
.rp__nav i{ display:grid; place-items:center; flex:none; width:2.1em; height:1.7em; border-radius:.45em; background:var(--paper);
  font:500 .78em/1 var(--mono); font-style:normal; color:var(--muted); }
.rp__nav.is-on{ background:#FDEEF4; color:#A1084A; box-shadow:inset .22em 0 0 var(--brand); }
.rp__read{ margin-top:auto; padding:1.2em .6em 0; border-top:1px solid var(--line); }
.rp__read small{ display:block; font:600 .78em/1 var(--font); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.rp__read i{ position:relative; display:block; height:.35em; margin-top:.8em; border-radius:9em; background:var(--paper-2); overflow:hidden; }
.rp__read i::after{ content:""; position:absolute; inset:0; background:var(--brand); transform-origin:left; transform:scaleX(.08); }
.rp__main{ display:flex; flex-direction:column; gap:1.2em; min-width:0; padding:1.6em 2.2em 0; overflow:hidden; }
.rp__now{ display:flex; align-items:center; gap:.8em; padding:.85em 1.2em; background:#fff; border:1px solid var(--line); border-radius:1em; }
.rp__now > i{ width:.65em; height:.65em; border-radius:50%; background:var(--ok-dot); box-shadow:0 0 0 .25em var(--ok-bg); }
.rp__now small{ font:500 .85em/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.rp__now-t{ display:inline-grid; }
.rp__now-t b{ grid-area:1 / 1; font-size:1.15em; font-weight:600; letter-spacing:-.015em; }
.rp__now-t .rn--2, .rp__now-t .rn--3{ opacity:0; }
.rp__view{ flex:1; min-height:0; overflow:hidden; }
.rp__scroll{ height:300%; }
.rp__sec{ display:flex; flex-direction:column; gap:1.3em; height:33.3333%; padding-bottom:1.8em; }
.rp__hero{ display:grid; grid-template-columns:minmax(0,1fr) 19em; gap:2.4em; align-items:center; padding:2.6em 2.8em; border-radius:1.6em; color:var(--ink);
  background:radial-gradient(70% 100% at 100% 0%, rgba(236,0,95,.08), transparent 62%), #fff; border:1px solid #EEE6E9;
  box-shadow:0 1.2em 2.6em -1.8em rgba(60,10,30,.3); }
.rp__copy{ display:flex; flex-direction:column; gap:1em; }
.rp__copy small{ font:600 .82em/1.2 var(--font); letter-spacing:.16em; text-transform:uppercase; color:#A1084A; }
.rp__copy b{ font:600 3.1em/1.05 var(--font); letter-spacing:-.045em; }
.rp__copy > span:not(.sr__chips){ max-width:36em; font-size:1.2em; line-height:1.5; color:var(--ink-3); }
.sr__chips{ display:flex; flex-wrap:wrap; gap:.5em; margin-top:.2em; }
.sr__chips i{ font:500 1.05em/1 var(--font); font-style:normal; padding:.5em .7em; border-radius:.5em; }
.c--h{ color:var(--high); background:var(--high-bg); }
.c--m{ color:var(--med); background:var(--med-bg); }
.c--l{ color:var(--low); background:var(--low-bg); }
.rp__score{ display:flex; flex-direction:column; align-items:center; gap:.6em; padding:1.8em 1.6em; border-radius:1.4em; background:#FBF8F9; border:1px solid var(--line); text-align:center; }
.sr__ring{ position:relative; flex:none; display:grid; place-items:center; width:11.5em; height:11.5em; }
.sr__ring svg{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.sr__ring circle{ fill:none; stroke-width:9; }
.sr__track{ stroke:#EFE9EB; }
.sr__arc{ stroke:#E8890C; stroke-linecap:round; stroke-dasharray:326.7; stroke-dashoffset:104.5; transition:stroke-dashoffset 1.6s var(--ease) .45s; }
.sr__score{ margin-top:-.2em; font:600 3.9em/1 var(--font); letter-spacing:-.05em; color:var(--ink); font-variant-numeric:tabular-nums; }
.sr__ring small{ position:absolute; bottom:2.7em; font:500 .8em/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.rp__grade{ font:600 1.45em/1.1 var(--font); letter-spacing:-.02em; }
.rp__sub{ font-size:.95em; color:var(--muted); }
.rp__kpis{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1em; }
.rp__kpis span{ display:flex; align-items:baseline; gap:.6em; padding:1.4em 1.5em; border-radius:1.2em; background:#fff; border:1px solid var(--line);
  font-size:1.1em; line-height:1.3; color:var(--ink-3); }
.rp__kpis b{ flex:none; font:600 2em/1 var(--font); letter-spacing:-.03em; color:#A1084A; }
.rp__three{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1em; }
.rp__cap{ grid-column:1 / -1; font:600 .9em/1 var(--font); letter-spacing:.14em; text-transform:uppercase; color:#A1084A; }
.rp__t{ display:flex; flex-direction:column; gap:.6em; padding:1.4em 1.5em; border-radius:1.2em; background:#fff; border:1px solid var(--line);
  box-shadow:inset 0 .25em 0 #D93025; font:600 1.2em/1.3 var(--font); letter-spacing:-.01em; color:var(--ink); }
.rp__t small{ font:600 .7em/1 var(--font); letter-spacing:.12em; text-transform:uppercase; color:var(--high); }
.rp__since{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:.8em; padding-top:1.2em; border-top:1px solid var(--line); }
.rp__since li{ display:flex; align-items:flex-start; gap:.7em; font-size:1.05em; line-height:1.35; color:var(--ink-2); }
.rp__since i{ flex:none; display:grid; place-items:center; width:1.6em; height:1.6em; border-radius:50%; font:700 .85em/1 var(--font); font-style:normal; }
.rp__since .is-ok i{ color:var(--ok); background:var(--ok-bg); }
.rp__since .is-new i{ color:var(--med); background:var(--med-bg); }
.rp__h{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:.5em 1em; }
.rp__h i{ display:grid; place-items:center; width:2.8em; height:2.8em; border-radius:.8em; background:#FDEEF4; color:#A1084A; font:600 1.05em/1 var(--mono); font-style:normal; }
.rp__h b{ font:600 2.3em/1.1 var(--font); letter-spacing:-.035em; }
.rp__h small{ grid-column:1 / -1; font-size:1.15em; color:var(--muted); }
.rp__health{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1em; }
.hs{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:baseline; gap:.5em .8em; padding:1.4em 1.5em 1.5em; background:#fff; border:1px solid var(--line); border-radius:1.2em; }
.hs small{ grid-column:1 / -1; font-size:1.02em; color:var(--muted); white-space:nowrap; }
.hs b{ font:600 2.7em/1 var(--font); letter-spacing:-.045em; }
.hs em{ font-style:normal; font-size:.98em; font-weight:600; color:var(--c); }
.hs i{ position:relative; grid-column:1 / -1; height:.38em; margin-top:.3em; border-radius:9em; background:#F1EDEE; overflow:hidden; }
.hs i::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:var(--c); transform-origin:left; transform:scaleX(var(--v)); }
.hs--h{ --c:#D93025; } .hs--m{ --c:#E37400; } .hs--ok{ --c:#1E8E3E; }
.rp__trend{ display:grid; grid-template-columns:auto 14em auto minmax(0,1fr); align-items:center; gap:1.6em; padding:1.3em 1.6em; background:#fff; border:1px solid var(--line); border-radius:1.2em; }
.rp__trend-k{ font:500 .9em/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.rp__trend svg{ width:14em; height:3.6em; overflow:visible; }
.rp__trend polyline{ fill:none; stroke:var(--brand); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; }
.rp__trend circle{ fill:#fff; stroke:var(--brand); stroke-width:2.2; }
.rp__trend-v{ display:flex; align-items:baseline; gap:.6em; font-size:1.1em; color:var(--ink-3); white-space:nowrap; }
.rp__trend-v b{ font:600 2em/1 var(--font); letter-spacing:-.04em; color:var(--ink); }
.rp__trend-d{ justify-self:end; display:flex; gap:.5em; }
.rp__trend-d em, .rp__road em{ flex:none; font:500 .85em/1 var(--font); font-style:normal; padding:.45em .6em; border-radius:.45em; background:var(--paper); color:var(--ink-3); white-space:nowrap; }
.rp__road{ display:flex; flex-direction:column; padding:.3em 1.6em; background:#fff; border:1px solid var(--line); border-radius:1.2em; }
.rp__road li{ display:flex; align-items:center; gap:.6em; padding:1.42em 0; border-top:1px solid var(--line); font-size:1.2em; }
.rp__road li:first-child{ border-top:0; }
.rp__road i{ flex:none; display:grid; place-items:center; width:2em; height:2em; margin-right:.3em; border-radius:.55em; background:var(--paper); font:600 .9em/1 var(--font); font-style:normal; }
.rp__road span{ flex:1; min-width:0; font-weight:500; letter-spacing:-.01em; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rp__road .rt--h{ color:var(--high); background:var(--high-bg); }
.rp__road .rt--m{ color:var(--med); background:var(--med-bg); }
.rp__road .rt--q, .rp__trend-d .rt--ok{ color:var(--ok); background:var(--ok-bg); }
.rp__road .rt--a{ background:transparent; border:1px solid var(--line); font-family:var(--mono); }
.rp__trend-d .rt--new{ color:var(--med); background:var(--med-bg); }
.d{ flex:none; width:.7em; height:.7em; border-radius:50%; }
.d--h{ background:#D93025; } .d--m{ background:var(--med-dot); } .d--l{ background:var(--low-dot); } .d--ok{ background:var(--ok-dot); }

/* ----- beat states. One attribute on .scene drives all of it; the markup
   ships on beat 4, so beat 4 is the base and the others are overrides. ----- */
.scene[data-step="1"] .scene__tab--rep, .scene[data-step="2"] .scene__tab--rep{ max-width:0; padding-inline:0; border-width:0; opacity:0; }
.scene[data-step="3"] .scene__tab--store, .scene[data-step="4"] .scene__tab--store{ background:transparent; border-color:transparent; color:var(--muted); }
.scene__tt .tt--prep, .scene__url .u--store, .scene__url .u--prep{ opacity:0; }
.scene[data-step="3"] .tt--prep, .scene[data-step="3"] .u--prep{ opacity:1; }
.scene[data-step="3"] .tt--done, .scene[data-step="3"] .u--done{ opacity:0; }
.scene[data-step="1"] .u--store, .scene[data-step="2"] .u--store{ opacity:1; }
.scene[data-step="1"] .u--done, .scene[data-step="2"] .u--done{ opacity:0; }
.scene[data-step="1"] .scene__ext, .scene[data-step="2"] .scene__ext{ background:rgba(236,0,95,.1); }
.scene[data-step="1"] .scene__store{ filter:saturate(.2) brightness(1.04); }
.scene[data-step="1"] .scene__pop, .scene[data-step="2"] .scene__pop{ opacity:1; transform:none; }
.scene[data-step="1"] .sp--1, .scene[data-step="2"] .sp--2{ opacity:1; transform:none; }
.scene[data-step="3"] .scene__prep{ opacity:1; visibility:visible; transition:opacity .45s ease .3s, visibility 0s; }
.scene:not([data-step="4"]) .scene__report{ opacity:0; visibility:hidden; transition:opacity .2s ease, visibility 0s linear .2s; }

/* Animated-only states: they need the clock in /js/home.js, so they hang off
   .is-live and a JS-less visit simply sees the finished beat. */
.scene.is-live[data-step="2"] .scene__cursor{ animation:cursorGo 3.4s var(--ease-io) both; }
.scene.is-live[data-step="2"] .sp__go{ animation:press 3.4s ease both; }
.scene.is-live[data-step="2"] .sp__go-a{ animation:goOut 3.4s linear both; }
.scene.is-live[data-step="2"] .sp__go-b{ animation:goIn 3.4s linear both; }
@keyframes goOut{ 0%,63%{ opacity:1; } 66%,100%{ opacity:0; } }
@keyframes goIn{ 0%,63%{ opacity:0; } 66%,100%{ opacity:1; } }
@keyframes cursorGo{
  0%{ opacity:0; left:46%; top:66%; }
  12%{ opacity:1; }
  55%{ left:84.8%; top:22.4%; transform:none; }
  62%{ transform:scale(.82); }
  70%{ transform:none; }
  92%{ opacity:1; left:84.8%; top:22.4%; }
  100%{ opacity:0; left:84.8%; top:22.4%; }
}
@keyframes press{ 0%,57%{ transform:none; } 62%{ transform:scale(.96); } 70%,100%{ transform:none; } }
/* beat 3, on one 5.2s clock: progress from .5s to 4.7s, three stages ticking off under it */
.scene.is-live[data-step="3"] .pp__pct{ animation:ppCount 4.2s cubic-bezier(.3,.55,.35,1) .5s both; }
.scene.is-live[data-step="3"] .pp__track i{ animation:ppBar 4.2s cubic-bezier(.3,.55,.35,1) .5s both; }
@keyframes ppCount{ from{ --pp:0; } to{ --pp:100; } }
@keyframes ppBar{ from{ transform:scaleX(0); } to{ transform:none; } }
.scene.is-live[data-step="3"] .pp__lbl i{ opacity:0; }
.scene.is-live[data-step="3"] .pp__lbl i:nth-child(1){ animation:ppShow 1.9s linear .5s both; }
.scene.is-live[data-step="3"] .pp__lbl i:nth-child(2){ animation:ppShow 1.5s linear 2.4s both; }
.scene.is-live[data-step="3"] .pp__lbl i:nth-child(3){ animation:ppShow 9s linear 3.9s both; }
@keyframes ppShow{ 0%{ opacity:0; } 6%,94%{ opacity:1; } 100%{ opacity:0; } }
.scene.is-live[data-step="3"] .pp__st{ opacity:.45; transition:none; }
.scene.is-live[data-step="3"] .pp__st:nth-child(1){ animation:stLive .01s linear .6s forwards, stDone .01s linear 2.4s forwards; }
.scene.is-live[data-step="3"] .pp__st:nth-child(2){ animation:stLive .01s linear 2.4s forwards, stDone .01s linear 3.9s forwards; }
.scene.is-live[data-step="3"] .pp__st:nth-child(3){ animation:stLive .01s linear 3.9s forwards, stDone .01s linear 4.7s forwards; }
.scene.is-live[data-step="3"] .pp__st:nth-child(1) i{ animation:icLive .01s linear .6s forwards, icDone .01s linear 2.4s forwards; }
.scene.is-live[data-step="3"] .pp__st:nth-child(2) i{ animation:icLive .01s linear 2.4s forwards, icDone .01s linear 3.9s forwards; }
.scene.is-live[data-step="3"] .pp__st:nth-child(3) i{ animation:icLive .01s linear 3.9s forwards, icDone .01s linear 4.7s forwards; }
@keyframes stLive{ to{ opacity:1; border-color:rgba(236,0,95,.45); background:#FFF6FA; } }
@keyframes stDone{ to{ opacity:1; border-color:var(--line-2); background:#fff; } }
@keyframes icLive{ to{ background:var(--brand); color:#fff; } }
@keyframes icDone{ to{ background:var(--ok-dot); color:#fff; } }
/* beat 4: the report builds in, then reads down the document on one 9.8s
   clock: the overview until 3.2s, the health summary until 6.2s, then the
   roadmap. The sidebar, the "now reading" bar and the reading progress follow. */
.rp__side, .rp__now, .rp__hero, .rp__kpis, .rp__three{ transition:opacity .6s ease, transform .8s var(--ease); }
.rp__now{ transition-delay:.06s; } .rp__hero{ transition-delay:.12s; } .rp__kpis{ transition-delay:.3s; } .rp__three{ transition-delay:.44s; }
.scene.is-live:not([data-step="4"]) .rp__side{ opacity:0; transform:translateX(-1.5em); transition:none; }
.scene.is-live:not([data-step="4"]) .rp__now,
.scene.is-live:not([data-step="4"]) .rp__hero,
.scene.is-live:not([data-step="4"]) .rp__kpis,
.scene.is-live:not([data-step="4"]) .rp__three{ opacity:0; transform:translateY(1.6em); transition:none; }
.scene.is-live:not([data-step="4"]) .sr__arc{ stroke-dashoffset:326.7; transition:none; }
.scene.is-live[data-step="4"] .rp__scroll{ animation:rpScroll 9.8s cubic-bezier(.65,0,.35,1) both; }
@keyframes rpScroll{ 0%, 33%{ transform:none; } 40%, 63%{ transform:translateY(-33.3333%); } 70%, 100%{ transform:translateY(-66.6667%); } }
.scene.is-live[data-step="4"] .rp__nav--1{ animation:navOne 9.8s linear both; }
.scene.is-live[data-step="4"] .rp__nav--2{ animation:navTwo 9.8s linear both; }
.scene.is-live[data-step="4"] .rp__nav--3{ animation:navThree 9.8s linear both; }
@keyframes navOne{ 0%, 35.9%{ background:#FDEEF4; color:#A1084A; box-shadow:inset .22em 0 0 var(--brand); } 36%, 100%{ background:transparent; color:var(--ink-3); box-shadow:inset 0 0 0 transparent; } }
@keyframes navTwo{ 0%, 35.9%, 67%, 100%{ background:transparent; color:var(--ink-3); box-shadow:inset 0 0 0 transparent; } 36%, 66.9%{ background:#FDEEF4; color:#A1084A; box-shadow:inset .22em 0 0 var(--brand); } }
@keyframes navThree{ 0%, 66.9%{ background:transparent; color:var(--ink-3); box-shadow:inset 0 0 0 transparent; } 67%, 100%{ background:#FDEEF4; color:#A1084A; box-shadow:inset .22em 0 0 var(--brand); } }
.scene.is-live[data-step="4"] .rn--1{ animation:rnOne 9.8s linear both; }
.scene.is-live[data-step="4"] .rn--2{ animation:rnTwo 9.8s linear both; }
.scene.is-live[data-step="4"] .rn--3{ animation:rnThree 9.8s linear both; }
@keyframes rnOne{ 0%, 35.9%{ opacity:1; } 36%, 100%{ opacity:0; } }
@keyframes rnTwo{ 0%, 35.9%, 67%, 100%{ opacity:0; } 36%, 66.9%{ opacity:1; } }
@keyframes rnThree{ 0%, 66.9%{ opacity:0; } 67%, 100%{ opacity:1; } }
.scene.is-live[data-step="4"] .rp__read i::after{ animation:readP 9.8s cubic-bezier(.65,0,.35,1) both; }
@keyframes readP{ 0%, 33%{ transform:scaleX(.08); } 40%, 63%{ transform:scaleX(.24); } 70%, 100%{ transform:scaleX(.5); } }
.scene.is-live[data-step="4"] .hs i::after{ animation:hsFill 1.1s var(--ease) both; animation-delay:calc(3.7s + var(--n, 0) * 90ms); }
.hs:nth-child(2){ --n:1; } .hs:nth-child(3){ --n:2; } .hs:nth-child(4){ --n:3; } .hs:nth-child(5){ --n:4; } .hs:nth-child(6){ --n:5; }
@keyframes hsFill{ from{ transform:scaleX(0); } }
.scene.is-live[data-step="4"] .rp__trend polyline{ animation:trendDraw 1.2s var(--ease) 4.4s both; }
@keyframes trendDraw{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }
.scene.is-live[data-step="4"] .rp__road li{ animation:roadIn .6s var(--ease) both; animation-delay:calc(6.6s + var(--n, 0) * 90ms); }
.rp__road li:nth-child(2){ --n:1; } .rp__road li:nth-child(3){ --n:2; } .rp__road li:nth-child(4){ --n:3; } .rp__road li:nth-child(5){ --n:4; } .rp__road li:nth-child(6){ --n:5; }
@keyframes roadIn{ from{ opacity:0; transform:translateX(1.2em); } }

/* the four beats under the window */
.beats{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); margin-top:30px; border-top:1px solid var(--line-2); counter-reset:none; }
.beat{ position:relative; display:flex; flex-direction:column; gap:4px; padding:18px 22px 0 0; transition:opacity .4s ease; }
.beat::before{ content:""; position:absolute; top:-1px; left:0; height:2px; width:100%; background:var(--ink);
  transform-origin:left; transform:scaleX(0); }
.beat__n{ font:500 11.5px/1 var(--mono); letter-spacing:.06em; color:var(--muted); margin-bottom:6px; }
.beat b{ font-size:15.5px; font-weight:600; letter-spacing:-.02em; }
.beat > span:last-child{ font-size:14px; color:var(--muted); line-height:1.45; }
.scene.is-live .beat{ opacity:.42; }
.scene.is-live .beat.is-on{ opacity:1; }
.scene.is-live .beat.is-on::before{ animation:beatBar var(--dur, 3.4s) linear both; }
@keyframes beatBar{ to{ transform:scaleX(1); } }

@container (max-width:700px){
  .scene__tabs{ display:none; }
  .scene__pop{ font-size:1.4em; }
  .scene__prep{ font-size:1.9em; padding:1.5em; }
  .pp__eye, .pp__steps, .pp__note{ display:none; }
  .pp__lock img{ width:3em; height:3em; }
  .pp__pg{ width:100%; max-width:44em; }
  .scene__report{ grid-template-columns:1fr; }
  .rp__side, .rp__now, .rp__kpis, .rp__three, .rp__copy > span:not(.sr__chips), .rp__sub, .rp__grade, .rp__h small, .rp__trend, .hs em,
  .rp__road em:not(:first-of-type), .rp__road li:nth-child(n+5){ display:none; }
  .rp__main{ padding:1.2em 1.2em 0; font-size:1.7em; }
  .rp__sec{ justify-content:center; gap:1em; padding-bottom:1.2em; }
  .rp__hero{ grid-template-columns:minmax(0,1fr) auto; gap:1.2em; padding:1.6em; }
  .rp__score{ padding:0; background:none; border:0; }
  .rp__copy b{ font-size:2.4em; }
  .sr__ring{ width:9.5em; height:9.5em; }
  .rp__health{ gap:.6em; }
  .hs{ padding:1em; }
  .hs small{ white-space:normal; font-size:.9em; }
  .hs b{ font-size:2em; }
  .rp__road{ padding:.2em 1em; }
  .rp__road li{ padding:.8em 0; }
}

/* ===== STAT BAND ===== */
.stats{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); margin-bottom:64px; border-block:1px solid var(--line-2); }
.stats li{ display:flex; flex-direction:column; gap:12px; padding:30px 28px 30px 0; }
.stats li + li{ padding-left:28px; border-left:1px solid var(--line-2); }
.stats b{ font-size:clamp(52px, 6vw, 84px); font-weight:500; line-height:.9; letter-spacing:-.05em; font-variant-numeric:tabular-nums; }
.stats span{ max-width:220px; font-size:15px; line-height:1.45; color:var(--muted); }
.js-motion .stats li{ opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .9s var(--ease); transition-delay:calc(var(--i) * 90ms + .1s); }
.js-motion .stats.in li{ opacity:1; transform:none; }

/* ===== CHECKS MARQUEE ===== */
.checks{ padding:72px 0 8px; overflow:hidden; }
.checks__head{ margin-bottom:22px; }
.checks__title{ display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; font-size:17px; color:var(--ink-3); }
.marquee{ display:flex; overflow:hidden; margin-top:12px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.marquee__track{ display:flex; flex:none; gap:10px; padding-right:10px; animation:marquee var(--speed, 60s) linear infinite; }
.marquee--rev .marquee__track{ animation-direction:reverse; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__track li{ display:inline-flex; align-items:center; gap:10px; height:42px; padding:0 16px; white-space:nowrap;
  background:var(--card); border:1px solid var(--line); border-radius:11px; font-size:14.5px; color:var(--ink-2); box-shadow:var(--sh-1); }
.g{ width:8px; height:8px; border-radius:2.5px; flex:none; }
.g--speed{ background:#1A73E8; } .g--feel{ background:#12A4AF; } .g--mob{ background:#7C5CD6; }
.g--trust{ background:#1E8E3E; } .g--buy{ background:#E37400; } .g--find{ background:#5F6368; }
@keyframes marquee{ to{ transform:translateX(-100%); } }

/* ===== SECTIONS ===== */
.section{ position:relative; padding:128px 0; }
/* A wash that fades in from the white above and back out below it, so a
   tinted section reads as light falling on the page, not a grey stripe. */
.section--tint{ background:linear-gradient(180deg, var(--bg) 0, var(--wash, var(--paper)) 160px, var(--wash, var(--paper)) calc(100% - 160px), var(--bg) 100%); }
#findings{ --wash:var(--wash-hl); }
#report{ --wash:var(--wash-blue); }
#privacy{ --wash:var(--wash-green); }
.section--dark{ background:var(--dark); color:var(--dark-text); }
.shead{ max-width:820px; margin-bottom:64px; }
.shead h2{ margin-top:22px; font-size:clamp(34px, 4.5vw, 58px); line-height:1.02; letter-spacing:-.042em; }
.shead .lead{ margin-top:22px; max-width:640px; font-size:18px; line-height:1.55; color:var(--muted); }
.shead--left{ margin-bottom:0; }
.shead--row{ max-width:none; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:32px 64px; align-items:end; }
.shead--row .lead{ margin-top:0; }
.section--dark .shead h2{ color:#fff; }
/* Wide screens: heading left, its lead answering it on the right, so a section
   opens on a full-width line instead of a column with half the page empty. */
@media (min-width:1100px){
  .shead:not(.shead--left):not(.shead--row):has(> .lead){ max-width:none; display:grid; grid-template-columns:minmax(0,1.9fr) minmax(0,1fr); column-gap:64px; align-items:end; }
  .shead:not(.shead--left):not(.shead--row):has(> .lead) > h2{ font-size:clamp(34px, 3.9vw, 54px); }
  .shead:not(.shead--left):not(.shead--row):has(> .lead) > .kick{ grid-column:1 / -1; justify-self:start; }
  .shead:not(.shead--left):not(.shead--row):has(> .lead) > .lead{ margin-top:0; padding-bottom:.35em; }
}
.section--dark .shead .lead{ color:var(--dark-muted); }

/* ===== FINDINGS ===== */
.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:72px; align-items:start; }
.split__l{ position:sticky; top:112px; }
.split__l .btn{ margin-top:30px; }
.spec{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-2); overflow:hidden; }
.spec__head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:16px 22px; border-bottom:1px solid var(--line); background:#FBFBF9; }
.sev{ font:500 11px/1 var(--mono); letter-spacing:.05em; text-transform:uppercase; padding:6px 8px; border-radius:6px; }
.sev--high{ color:var(--high); background:var(--high-bg); }
.spec__area{ font-size:13px; color:var(--ink-3); padding:4px 9px; border:1px solid var(--line-2); border-radius:6px; }
.spec__src{ margin-left:auto; font-size:12.5px; color:var(--muted); }
.spec__part{ position:relative; display:grid; grid-template-columns:168px minmax(0,1fr); gap:20px; padding:22px; border-bottom:1px solid var(--line); }
.spec__part:last-child{ border-bottom:0; }
.spec__part::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--ink); transform:scaleY(0); transform-origin:top; }
.spec__tag{ display:flex; gap:9px; font:500 11px/1.4 var(--mono); letter-spacing:.05em; text-transform:uppercase; color:var(--muted); padding-top:3px; }
.spec__tag i{ font-style:normal; color:var(--ink); }
.spec__part h3{ font-size:20px; line-height:1.3; letter-spacing:-.022em; }
.spec__part p{ font-size:15.5px; line-height:1.55; color:var(--ink-3); }
.evidence{ font-family:var(--mono) !important; font-size:13px !important; line-height:1.55 !important; color:var(--ink-2) !important;
  background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--ink-3); border-radius:8px; padding:12px 14px; }
.effort{ display:inline-flex; align-items:center; gap:8px; justify-self:start; font-size:14px; color:var(--ok); background:var(--ok-bg); padding:7px 11px; border-radius:8px; }
.effort svg{ width:16px; height:16px; }
.spec .spec__part{ opacity:0; transform:translateY(10px); transition:opacity .6s ease, transform .7s var(--ease); transition-delay:calc(var(--i) * 110ms + .2s); }
.spec.in .spec__part{ opacity:1; transform:none; }
.spec.in .spec__part::before{ animation:partLine 1.2s var(--ease) calc(var(--i) * 110ms + .5s) both; }
@keyframes partLine{ 0%{ transform:scaleY(0); opacity:1; } 50%{ transform:scaleY(1); opacity:1; } 100%{ transform:scaleY(1); opacity:0; } }

.ledger{ margin-top:72px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.ledger__cap{ padding:20px 22px; font-size:14.5px; color:var(--muted); border-bottom:1px solid var(--line); }
.ledger__hd, .ledger__list li{ display:grid; grid-template-columns:12px minmax(0,1fr) 130px 110px; align-items:center; gap:16px; padding:0 22px; }
.ledger__hd{ height:38px; background:#FBFBF9; border-bottom:1px solid var(--line); font:500 11px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.ledger__hd span:last-child{ text-align:right; }
.ledger__list li{ min-height:54px; padding-block:12px; border-bottom:1px solid var(--line); font-size:15px; transition:background-color .2s ease; }
.ledger__list li:last-child{ border-bottom:0; }
.ledger__list li:hover{ background:#FBFBF9; }
.ledger__d{ width:9px; height:9px; border-radius:50%; }
.ledger__d--high{ background:#D93025; } .ledger__d--med{ background:var(--med-dot); } .ledger__d--low{ background:var(--low-dot); }
.ledger__t{ color:var(--ink); }
.ledger__a{ font-size:13.5px; color:var(--ink-3); }
.ledger__list b{ justify-self:end; font:500 11.5px/1 var(--mono); color:var(--muted); padding:5px 7px; border:1px solid var(--line); border-radius:6px; background:var(--paper); }
.ledger .ledger__list li{ opacity:0; transform:translateY(8px); transition:opacity .5s ease, transform .6s var(--ease), background-color .2s ease; transition-delay:calc(var(--i) * 80ms + .15s), calc(var(--i) * 80ms + .15s), 0s; }
.ledger.in .ledger__list li{ opacity:1; transform:none; }

/* ===== SIX SCORES ===== */
.bento{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
.tile{ display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:8px; overflow:hidden; }
.tile--wide{ grid-column:span 2; flex-direction:row; }
.tile--full{ grid-column:1 / -1; flex-direction:row; }
.tile--wide .tile__copy, .tile--full .tile__copy{ flex:0 0 36%; display:flex; flex-direction:column; justify-content:flex-end; padding:22px; }
.tile--wide .tile__vis, .tile--full .tile__vis{ flex:1; height:auto; min-height:270px; }
.tile__vis{ position:relative; height:236px; overflow:hidden; border-radius:12px; background:var(--paper); border:1px solid var(--line); }
.tile__copy{ padding:20px 14px 14px; }
.tile__n{ font:500 11.5px/1 var(--mono); letter-spacing:.06em; color:var(--muted); }
.tile__metric{ display:flex; flex-direction:column; gap:8px; margin-bottom:auto; padding-bottom:28px; }
.tile__metric b{ font-size:clamp(48px, 5vw, 68px); font-weight:500; line-height:.9; letter-spacing:-.05em; font-variant-numeric:tabular-nums; }
.tile__metric span{ max-width:220px; font-size:14px; line-height:1.45; color:var(--muted); }
.tile h3{ margin-top:10px; font-size:21px; letter-spacing:-.028em; }
.tile p{ margin-top:8px; font-size:14.5px; line-height:1.55; color:var(--muted); }
.tile__as{ display:block; margin-top:16px; padding-top:14px; border-top:1px dashed var(--line-2); font:12px/1.4 var(--mono); color:var(--muted); }
.tile__as b{ font-weight:500; color:var(--ink); }
.bento__note{ margin-top:18px; font:12px/1.5 var(--mono); color:var(--muted); }
.bento .tile:nth-child(2){ transition-delay:.08s; }
.bento .tile:nth-child(4){ transition-delay:.08s; }
.bento .tile:nth-child(5){ transition-delay:.16s; }

/* waterfall */
.viz-wf{ display:flex; flex-direction:column; justify-content:center; gap:12px; padding:22px 24px; --lab:92px; }
.wf__axis{ display:flex; justify-content:space-between; margin-left:var(--lab); padding-bottom:8px; border-bottom:1px dashed var(--line-2); font:10.5px/1 var(--mono); color:var(--muted); }
.wf__rows{ display:flex; flex-direction:column; gap:9px; }
.wf__r{ position:relative; display:grid; grid-template-columns:var(--lab) 1fr; align-items:center; height:18px; }
.wf__r em{ font:11.5px/1 var(--mono); font-style:normal; color:var(--ink-3); }
.wf__r i{ position:absolute; left:calc(var(--lab) + (100% - var(--lab)) * var(--a) / 100); width:calc((100% - var(--lab)) * var(--w) / 100);
  height:10px; border-radius:3px; background:#8D95A3; transform-origin:left; transform:scaleX(0);
  transition:transform 1s var(--ease); transition-delay:calc(var(--i) * 100ms + .3s); }
.wf__r.is-3p i{ background:repeating-linear-gradient(135deg, var(--med-dot) 0 4px, #F29A3A 4px 8px); }
.wf__r b{ position:absolute; left:calc(var(--lab) + (100% - var(--lab)) * (var(--a) + var(--w)) / 100 + 8px); font:500 10.5px/1 var(--mono); color:var(--muted);
  opacity:0; transition:opacity .4s ease; transition-delay:calc(var(--i) * 100ms + 1s); }
.tile.in .wf__r i{ transform:scaleX(1); }
.tile.in .wf__r b{ opacity:1; }
.wf__lcp{ position:absolute; top:16px; bottom:46px; left:calc(24px + var(--lab) + (100% - 48px - var(--lab)) * var(--at) / 100); width:0;
  border-left:1.5px dashed #D93025; opacity:0; transition:opacity .5s ease 1.4s; }
.wf__lcp b{ position:absolute; top:-2px; right:6px; font:600 11px/1 var(--mono); color:var(--high); background:var(--high-bg); padding:4px 6px; border-radius:5px; white-space:nowrap; }
.tile.in .wf__lcp{ opacity:1; }
.wf__legend{ display:flex; gap:18px; margin-left:var(--lab); font:11px/1 var(--mono); color:var(--muted); }
.wf__legend span{ display:inline-flex; align-items:center; gap:7px; }
.wf__legend i{ width:14px; height:8px; border-radius:2px; background:#8D95A3; }
.wf__legend i.is-3p{ background:repeating-linear-gradient(135deg, var(--med-dot) 0 3px, #F29A3A 3px 6px); }

/* layout shift */
.viz-cls{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:18px; }
.cls__frame{ position:relative; width:170px; height:150px; padding:10px; background:#fff; border:1px solid var(--line-2); border-radius:12px; box-shadow:var(--sh-1); overflow:hidden; }
.cls__bar{ display:block; height:10px; width:60%; border-radius:4px; background:var(--paper-2); }
.cls__img{ display:block; height:0; margin-top:8px; border-radius:6px; background:linear-gradient(135deg, #E9DFCF, #D9C7AB); }
.cls__btn{ position:absolute; left:10px; right:10px; top:30px; display:grid; place-items:center; height:30px; border-radius:7px; background:var(--ink); color:#fff; font-size:11px; font-weight:500; }
.cls__tap{ position:absolute; left:50%; top:45px; width:26px; height:26px; margin:-13px 0 0 -13px; border-radius:50%; border:2px solid #D93025; opacity:0; }
.tile.in .cls__img{ animation:clsImg 4.2s var(--ease) infinite; }
.tile.in .cls__btn{ animation:clsBtn 4.2s var(--ease) infinite; }
.tile.in .cls__tap{ animation:clsTap 4.2s ease infinite; }
@keyframes clsImg{ 0%,38%{ height:0; } 44%,92%{ height:62px; } 100%{ height:0; } }
@keyframes clsBtn{ 0%,38%{ top:30px; } 44%,92%{ top:100px; } 100%{ top:30px; } }
@keyframes clsTap{ 0%,40%{ opacity:0; transform:scale(.5); } 46%{ opacity:1; transform:scale(1); } 60%{ opacity:0; transform:scale(1.6); } 100%{ opacity:0; } }
.cls__read{ display:flex; gap:8px; }
.cls__read span{ font:11.5px/1 var(--mono); color:var(--muted); padding:6px 8px; border-radius:7px; background:#fff; border:1px solid var(--line); }
.cls__read b{ font-weight:600; color:var(--med); }

/* mobile */
.viz-mob{ display:flex; align-items:center; justify-content:center; gap:16px; padding:16px; }
.mob__phone{ position:relative; flex:none; width:112px; height:200px; border-radius:20px; border:5px solid var(--ink); background:#FAF7F2; overflow:hidden; box-shadow:var(--sh-2); }
.mob__screen{ position:absolute; left:0; right:0; bottom:-10%; aspect-ratio:780 / 1600; }
.mob__screen img{ width:100%; height:auto; }
.mob__hit{ position:absolute; left:var(--x); top:var(--y); width:var(--w); height:var(--h); border-radius:4px; border:1.5px solid var(--ok-dot); background:rgba(30,142,62,.08); }
.mob__hit.is-bad{ border:1.5px dashed #D93025; background:rgba(217,48,37,.08); }
.tile.in .mob__hit.is-bad{ animation:blink 1.6s ease-in-out infinite; }
@keyframes blink{ 50%{ background:rgba(217,48,37,.22); } }
.mob__notes{ display:flex; flex-direction:column; gap:7px; }
.mob__notes span{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--ink-2); white-space:nowrap; padding:6px 8px; background:#fff; border:1px solid var(--line); border-radius:7px; }
.mob__notes .d{ width:7px; height:7px; }

/* trust checklist */
.viz-checks{ display:flex; flex-direction:column; justify-content:center; gap:8px; padding:20px; }
.ck{ display:flex; align-items:center; gap:10px; height:32px; padding:0 10px; border-radius:8px; background:#fff; border:1px solid var(--line); font-size:13px; color:var(--ink-2);
  opacity:0; transform:translateX(-8px); transition:opacity .5s ease, transform .6s var(--ease); transition-delay:calc(var(--i) * 120ms + .25s); }
.ck i{ flex:none; width:16px; height:16px; border-radius:50%; background:center/10px no-repeat; }
.ck.is-ok i{ background-color:var(--ok-bg); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23137333' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4 10-10'/%3E%3C/svg%3E"); }
.ck.is-no i{ background-color:var(--high-bg); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C5221F' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E"); }
.ck.is-no{ color:var(--ink); }
.tile.in .ck{ opacity:1; transform:none; }

/* buying ease */
.viz-buy{ display:flex; align-items:center; justify-content:center; gap:14px; padding:16px; }
.buy__box{ display:flex; flex-direction:column; gap:6px; width:132px; padding:12px; background:#fff; border:1px solid var(--line-2); border-radius:10px; box-shadow:var(--sh-1); }
.buy__t{ font-size:12px; font-weight:600; }
.buy__p{ font-size:11px; color:var(--muted); margin-bottom:4px; }
.buy__atc{ display:grid; place-items:center; height:24px; border:1.5px solid var(--ink); border-radius:3px; font-size:9.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.buy__now{ display:grid; place-items:center; height:24px; border-radius:3px; background:#B97C5E; color:#fff; font-size:9.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.buy__pay{ display:flex; justify-content:center; gap:4px; margin-top:2px; }
.buy__pay i{ width:18px; height:11px; border-radius:2px; border:1px solid var(--line-2); background:var(--paper); }
.buy__tags{ display:flex; flex-direction:column; gap:6px; }
.buy__tags span{ display:inline-flex; align-items:center; gap:7px; font-size:12px; padding:6px 8px 6px 7px; border-radius:7px; background:#fff; border:1px solid var(--line); white-space:nowrap;
  opacity:0; transform:translateX(8px); transition:opacity .5s ease, transform .6s var(--ease); transition-delay:calc(var(--i) * 110ms + .3s); }
.buy__tags span::before{ content:""; width:7px; height:7px; border-radius:50%; flex:none; }
.buy__tags .is-ok::before{ background:var(--ok-dot); }
.buy__tags .is-no::before{ background:#D93025; }
.tile.in .buy__tags span{ opacity:1; transform:none; }

/* search result */
.viz-serp{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); align-items:center; gap:22px; padding:26px; }
.serp{ display:flex; flex-direction:column; gap:6px; padding:18px 20px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--sh-1); font-family:Arial, Helvetica, sans-serif; letter-spacing:0; }
.serp__url{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:#4D5156; }
.serp__url i{ display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:#2F3F35; color:#fff; font:600 11px/1 var(--font); font-style:normal; }
.serp__title{ position:relative; align-self:flex-start; font-size:19px; line-height:1.3; color:#1A0DAB; }
.serp__title::after{ content:""; position:absolute; left:0; right:0; bottom:-3px; height:4px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4' viewBox='0 0 8 4'%3E%3Cpath d='M0 3 2 1l2 2 2-2 2 2' fill='none' stroke='%23D93025' stroke-width='1'/%3E%3C/svg%3E") repeat-x;
  transform:scaleX(0); transform-origin:left; transition:transform .8s var(--ease) .6s; }
.tile.in .serp__title::after{ transform:none; }
.serp__desc{ font-size:13.5px; line-height:1.55; color:#4D5156; }
.serp__flags{ display:flex; flex-direction:column; gap:7px; }
.serp__flags span{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-2); padding:8px 10px; background:#fff; border:1px solid var(--line); border-radius:8px;
  opacity:0; transform:translateY(6px); transition:opacity .5s ease, transform .6s var(--ease); transition-delay:calc(var(--i) * 100ms + .3s); }
.serp__flags b{ flex:none; min-width:52px; font:500 10.5px/1 var(--mono); letter-spacing:.05em; text-transform:uppercase; padding:4px 6px; border-radius:5px; text-align:center; }
.serp__flags .is-no b{ color:var(--high); background:var(--high-bg); }
.serp__flags .is-ok b{ color:var(--ok); background:var(--ok-bg); }
.tile.in .serp__flags span{ opacity:1; transform:none; }

/* ===== PROVENANCE (dark) ===== */
#sources{ overflow:hidden; }
#sources::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:72px 72px; -webkit-mask-image:linear-gradient(180deg, #000, transparent 70%); mask-image:linear-gradient(180deg, #000, transparent 70%); }
#sources .shead{ max-width:900px; }
.prov{ position:relative; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; padding-top:46px; }
.prov__line{ position:absolute; top:7px; left:0; right:0; height:1px; background:var(--dark-line-2); overflow:hidden; }
.prov__line i{ position:absolute; top:0; left:-220px; width:220px; height:1px; background:linear-gradient(90deg, transparent, #fff, transparent); animation:travel 5s linear infinite; }
@keyframes travel{ to{ left:100%; } }
.prov__item{ position:relative; display:flex; flex-direction:column; padding:24px; background:var(--dark-2); border:1px solid var(--dark-line); border-radius:var(--r-lg);
  transition:border-color .3s ease, background-color .3s ease; }
.prov__item:hover{ border-color:var(--dark-line-2); background:var(--dark-3); }
.prov__node{ position:absolute; top:-46px; left:24px; translate:0 calc(-50% + 7.5px); width:15px; height:15px; border-radius:50%; background:var(--dark); border:1px solid var(--dark-line-2); }
.prov__node::after{ content:""; position:absolute; inset:4px; border-radius:50%; background:#fff; opacity:.25; animation:node 5s linear infinite; animation-delay:calc(var(--i) * 1.05s + .5s); }
@keyframes node{ 0%,100%{ opacity:.25; box-shadow:none; } 6%{ opacity:1; box-shadow:0 0 10px 2px rgba(255,255,255,.6); } 20%{ opacity:.25; box-shadow:none; } }
.prov__by{ font:500 11px/1.3 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--dark-muted); }
.prov__item h3{ margin-top:14px; font-size:19px; color:#fff; letter-spacing:-.022em; line-height:1.25; }
.prov__item p{ margin-top:10px; font-size:14.5px; line-height:1.55; color:var(--dark-muted); }
.prov__item em{ margin-top:auto; padding-top:16px; font-style:normal; font-size:12.5px; color:var(--dark-text); }
.prov__item p{ margin-bottom:18px; }
.prov__item em{ border-top:1px solid var(--dark-line); }
.prov .prov__item:nth-of-type(2){ transition-delay:.06s; }
.prov.in .prov__item{ animation:rise .8s var(--ease) both; animation-delay:calc(var(--i) * 90ms + .1s); }
.prov__foot{ margin-top:48px; max-width:780px; font-size:19px; line-height:1.5; color:#fff; letter-spacing:-.015em; }
.prov__fine{ margin-top:14px; max-width:780px; font-size:14px; line-height:1.6; color:var(--dark-muted); }

/* ===== REPORT WALKTHROUGH ===== */
.wk__panel{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:40px; align-items:start; padding:36px 0; border-top:1px solid var(--line-2); }
.wk__panel:first-child{ border-top:0; padding-top:0; }
.wk__step{ font:500 11.5px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.wk__copy h3{ margin-top:12px; font-size:26px; letter-spacing:-.03em; line-height:1.15; }
.wk__copy p{ margin-top:14px; font-size:16px; line-height:1.6; color:var(--ink-3); }
.wk__copy .wk__note{ font-size:13.5px; color:var(--muted); padding:10px 12px; background:rgba(255,255,255,.6); border:1px solid var(--line-2); border-radius:9px; }

/* tab mode, built by /js/home.js */
.wk.is-tabs{ display:grid; grid-template-columns:minmax(0,330px) minmax(0,1fr); gap:48px; align-items:start; }
.wk__tabs{ position:relative; display:flex; flex-direction:column; border-top:1px solid var(--line-2); }
.wk__tab{ position:relative; display:flex; flex-direction:column; gap:6px; padding:18px 4px 18px 0; text-align:left; background:none; border:0; border-bottom:1px solid var(--line-2);
  cursor:pointer; color:var(--muted); transition:color .25s ease; }
.wk__tab:hover{ color:var(--ink-2); }
.wk__tab-n{ font:500 11px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.wk__tab-t{ font-size:16.5px; font-weight:500; letter-spacing:-.02em; line-height:1.3; }
.wk__tab[aria-selected="true"]{ color:var(--ink); }
.wk__tab-bar{ position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--ink); transform:scaleX(0); transform-origin:left; }
.wk__tab[aria-selected="true"] .wk__tab-bar{ transform:scaleX(1); }
.wk.is-auto .wk__tab[aria-selected="true"] .wk__tab-bar{ animation:beatBar var(--auto, 7s) linear both; }
.wk.is-tabs .wk__panels{ display:grid; }
.wk.is-tabs .wk__panel{ grid-area:1 / 1; grid-template-columns:1fr; align-content:start; gap:24px; padding:0; border:0; opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .45s ease, transform .6s var(--ease), visibility 0s linear .45s; }
.wk.is-tabs .wk__panel.is-active{ opacity:1; visibility:visible; transform:none; transition:opacity .45s ease .05s, transform .6s var(--ease) .05s; }
.wk.is-tabs .wk__copy{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 24px; align-items:start; }
.wk.is-tabs .wk__step, .wk.is-tabs .wk__copy h3{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.wk.is-tabs .wk__copy p{ margin-top:0; grid-column:1; }
.wk.is-tabs .wk__copy .wk__note{ margin-top:12px; justify-self:start; }
.wk__panel:focus-visible{ outline-offset:6px; border-radius:12px; }

/* report fragments */
.wpanel{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px; box-shadow:var(--sh-2); display:flex; flex-direction:column; gap:16px; }
.wpanel__bar{ display:flex; align-items:center; gap:10px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.wpanel__bar img{ border-radius:5px; }
.wpanel__bar b{ font-size:15px; font-weight:600; letter-spacing:-.02em; }
.wpanel__bar span{ margin-left:auto; font:500 10.5px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:5px 7px; border:1px solid var(--line); border-radius:6px; }
.wsum{ display:flex; align-items:center; gap:22px; }
.wsum__score{ flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; width:108px; height:108px; border-radius:50%;
  background:conic-gradient(var(--med-dot) 0 68%, var(--paper-2) 68% 100%); position:relative; }
.wsum__score::before{ content:""; position:absolute; inset:8px; border-radius:50%; background:#fff; }
.wsum__score b, .wsum__score span{ position:relative; }
.wsum__score b{ font-size:34px; font-weight:600; letter-spacing:-.05em; line-height:1; font-variant-numeric:tabular-nums; }
.wsum__score span{ font:500 10px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-top:4px; }
.wsum__txt{ font-size:15px; line-height:1.55; color:var(--ink-3); }
.wsum__txt strong{ color:var(--ink); font-weight:600; }
.wtally{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; }
.wtally div{ display:flex; flex-direction:column; gap:4px; padding:12px; border-radius:10px; background:var(--paper); border:1px solid var(--line); text-align:center; }
.wtally b{ font-size:20px; font-weight:600; letter-spacing:-.03em; }
.wtally span{ font:500 10.5px/1.2 var(--mono); letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.wlist li{ display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--line); font-size:14.5px; color:var(--ink-2); }
.wlist li:first-child{ border-top:0; }
.wlist i{ flex:none; display:grid; place-items:center; width:24px; height:24px; border-radius:7px; background:var(--paper); border:1px solid var(--line); font:500 11px/1 var(--mono); font-style:normal; color:var(--ink-3); }
.wlist i.is-ok{ color:var(--ok); background:var(--ok-bg); border-color:transparent; }
.wlist i.is-new{ color:var(--med); background:var(--med-bg); border-color:transparent; }
.wlist b{ margin-left:auto; flex:none; font:500 11px/1 var(--mono); padding:5px 7px; border-radius:6px; }
.t--h{ color:var(--high) !important; background:var(--high-bg); }
.t--m{ color:var(--med) !important; background:var(--med-bg); }
.t--ok{ color:var(--ok) !important; background:var(--ok-bg); }
.wtally .t--h, .wtally .t--ok{ background:none; }
.wk__panel .wlist li{ opacity:1; }
.wk.is-tabs .wk__panel.is-active .wlist li{ animation:rise .6s var(--ease) both; animation-delay:calc(var(--i, 0) * 70ms + .15s); }
.splan{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
.splan > div{ padding:14px; border-radius:12px; background:var(--paper); border:1px solid var(--line); }
.splan h4{ display:flex; flex-direction:column; gap:6px; font-size:15px; letter-spacing:-.02em; }
.splan h4 em{ font:400 12px/1.4 var(--font); font-style:normal; color:var(--muted); letter-spacing:0; }
.splan ul{ margin-top:12px; display:flex; flex-direction:column; gap:6px; }
.splan li{ font-size:13px; padding:7px 9px; border-radius:7px; background:#fff; border:1px solid var(--line); color:var(--ink-2); }
.splan > div:nth-child(1) h4::before{ content:""; width:24px; height:3px; border-radius:2px; background:#D93025; }
.splan > div:nth-child(2) h4::before{ content:""; width:24px; height:3px; border-radius:2px; background:var(--med-dot); }
.splan > div:nth-child(3) h4::before{ content:""; width:24px; height:3px; border-radius:2px; background:var(--low-dot); }
.wdiff__hd{ display:flex; align-items:baseline; gap:14px; padding-bottom:6px; }
.wdiff__was{ font-size:26px; font-weight:600; color:var(--faint); text-decoration:line-through; text-decoration-thickness:2px; }
.wdiff__now{ font-size:44px; font-weight:600; letter-spacing:-.05em; color:var(--ok); }
.wdiff__delta{ margin-left:auto; font:500 11.5px/1 var(--mono); color:var(--ok); background:var(--ok-bg); padding:6px 8px; border-radius:6px; }
.wshare{ display:flex; flex-wrap:wrap; gap:8px; }
.wshare span{ display:inline-flex; align-items:center; gap:7px; font-size:13px; padding:8px 11px; border-radius:8px; background:var(--paper); border:1px solid var(--line); color:var(--ink-2); }
.wshare svg{ width:15px; height:15px; }
.wcalc{ display:flex; flex-direction:column; }
.wcalc__tag{ align-self:flex-start; font:500 10.5px/1 var(--mono); letter-spacing:.05em; text-transform:uppercase; color:var(--low); background:var(--low-bg); padding:6px 8px; border-radius:6px; margin-bottom:8px; }
.wcalc__row{ display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--line); font-size:14px; }
.wcalc__row label{ color:var(--ink-3); }
.wcalc__row b{ font-weight:500; white-space:nowrap; }
.wcalc__row:first-of-type b{ color:var(--low); }
.wcalc__out{ display:flex; justify-content:space-between; gap:16px; margin-top:12px; padding:12px 14px; border-radius:10px; background:var(--ink); color:var(--dark-muted); font-size:13.5px; }
.wcalc__out b{ color:#fff; font-weight:500; }

/* ===== THE CHATBOT QUESTION (closes #sources) ===== */
.vsai{ margin-top:20px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:24px 64px; padding:48px; border-radius:var(--r-xl); background:var(--dark); color:var(--dark-text); position:relative; overflow:hidden; }
.vsai__head .mono{ color:var(--dark-muted); }
.vsai__head h3{ margin-top:16px; font-size:clamp(26px, 2.6vw, 34px); line-height:1.12; letter-spacing:-.035em; color:#fff; }
.vsai__head p{ margin-top:16px; font-size:16px; line-height:1.55; color:var(--dark-muted); }
.vsai__list li{ padding:18px 0; border-top:1px solid var(--dark-line); }
.vsai__list li:first-child{ border-top:0; padding-top:0; }
.vsai__list b{ display:block; font-size:16.5px; font-weight:500; color:#fff; letter-spacing:-.015em; }
.vsai__list span{ display:block; margin-top:6px; font-size:14.5px; line-height:1.55; color:var(--dark-muted); }
.vsai .vsai__list li{ opacity:0; transform:translateY(8px); transition:opacity .6s ease, transform .7s var(--ease); transition-delay:calc(var(--i) * 120ms + .3s); }
.vsai.in .vsai__list li{ opacity:1; transform:none; }
.vsai__foot{ grid-column:1 / -1; padding-top:24px; border-top:1px solid var(--dark-line); font-size:19px; font-weight:500; letter-spacing:-.02em; color:#fff; }

/* ===== PROOF ===== */
.proof{ display:grid; grid-template-columns:minmax(0,1.65fr) minmax(0,1fr); gap:16px; }
.proofc{ position:relative; padding:30px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); }
.proofc__k{ font:500 11.5px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.proofc h3{ margin-top:16px; font-size:25px; letter-spacing:-.03em; line-height:1.15; }
.proofc p{ margin-top:12px; font-size:15px; line-height:1.6; color:var(--muted); }
.proofc .btn{ margin-top:26px; }
.proofc--lead{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:28px; align-items:center; overflow:hidden; padding-right:0; }
.deck{ position:relative; height:320px; }
.deck__s{ position:absolute; width:120%; max-width:none; height:auto; border-radius:10px; border:1px solid var(--line-2); background:#fff;
  box-shadow:0 1px 2px rgba(17,17,19,.06), 0 20px 40px -18px rgba(17,17,19,.35); transition:transform .7s var(--ease); }
.deck__s--1{ z-index:3; left:0; top:96px; transform:rotate(-2.5deg); }
.deck__s--2{ z-index:2; left:28px; top:48px; transform:rotate(1deg); }
.deck__s--3{ z-index:1; left:56px; top:0; transform:rotate(3.5deg); }
.proofc--lead:hover .deck__s--1{ transform:translate(-6px, 10px) rotate(-4deg); }
.proofc--lead:hover .deck__s--2{ transform:translate(10px, -4px) rotate(1.5deg); }
.proofc--lead:hover .deck__s--3{ transform:translate(26px, -16px) rotate(6deg); }

/* ===== PRIVACY ===== */
.perm{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:16px; }
.perm__col{ padding:26px 28px 10px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); }
.perm .perm__col:nth-child(2){ transition-delay:.08s; }
.perm__h{ display:inline-flex; align-items:center; gap:9px; font:500 11.5px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.perm__h i{ width:8px; height:8px; border-radius:50%; }
.perm__col--yes .perm__h i{ background:var(--ok-dot); }
.perm__col--no .perm__h i{ background:#D93025; }
.rules{ margin-top:18px; }
.perm__col--no .rules{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:32px; }
.rules li{ display:grid; grid-template-columns:24px minmax(0,1fr); gap:14px; padding:18px 0; border-top:1px solid var(--line); }
.rules svg{ width:22px; height:22px; padding:4px; border-radius:50%; }
.rules .yes svg{ color:var(--ok); background:var(--ok-bg); }
.rules .no svg{ color:var(--high); background:var(--high-bg); }
.rules div{ font-size:15.5px; font-weight:500; letter-spacing:-.015em; line-height:1.35; }
.rules div span{ display:block; margin-top:6px; font-size:14px; font-weight:400; letter-spacing:-.005em; line-height:1.55; color:var(--muted); }
.perm__links{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }

/* ===== PRICING ===== */
.plans__toggle{ display:flex; margin-bottom:28px; }
.toggle{ position:relative; display:inline-flex; gap:2px; padding:4px; background:var(--card); border:1px solid var(--line-2); border-radius:12px; box-shadow:var(--sh-1); }
.toggle__btn{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 16px; border:0; border-radius:9px; background:transparent;
  font-size:14.5px; font-weight:500; color:var(--ink-3); cursor:pointer; transition:color .3s ease, background-color .3s ease; }
.toggle__btn.is-active{ color:#fff; background:var(--ink); }
.toggle__btn em{ font:500 10.5px/1 var(--mono); font-style:normal; letter-spacing:.03em; padding:4px 6px; border-radius:5px; color:var(--ok); background:var(--ok-bg); }
.toggle__btn.is-active em{ color:#BFF0CB; background:rgba(255,255,255,.12); }
.toggle__thumb{ position:absolute; z-index:0; top:4px; bottom:4px; left:0; width:var(--tw, 0); border-radius:9px; background:var(--ink);
  transform:translateX(var(--tx, 0)); transition:transform .45s var(--ease), width .45s var(--ease); }
.toggle.has-thumb .toggle__btn.is-active{ background:transparent; }
.plans{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; align-items:start; }
.plans .plan:nth-child(2){ transition-delay:.07s; }
.plans .plan:nth-child(3){ transition-delay:.14s; }
.plan{ position:relative; display:flex; flex-direction:column; padding:28px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); }
.plan__top h3{ font-size:22px; letter-spacing:-.028em; }
.plan__desc{ margin-top:6px; font-size:14.5px; color:var(--muted); }
/* Two lines reserved, so the three prices sit on one baseline whatever each
   description's length. */
@media (min-width:981px){ .plan__desc{ min-height:calc(2 * 1.55em); } }
.plan__price{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin:26px 0 22px; }
.plan__price .amount{ font-size:50px; font-weight:600; letter-spacing:-.05em; line-height:1; font-variant-numeric:tabular-nums; }
.plan__price .per{ font-size:14px; color:var(--muted); white-space:nowrap; }
.plan__list{ margin-top:24px; padding-top:10px; border-top:1px solid var(--line); }
.plan__list li{ position:relative; padding:7px 0 7px 26px; font-size:14.5px; line-height:1.45; color:var(--ink-3); }
.plan__list li::before{ content:""; position:absolute; left:0; top:9px; width:16px; height:16px; border-radius:50%;
  background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111113' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4 10-10'/%3E%3C/svg%3E") center/9px no-repeat; border:1px solid var(--line-2); }
.plan__list li b{ color:var(--ink); font-weight:600; }
.plan__list li.plan__group{ padding:18px 0 6px; font:500 11px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.plan__list li.plan__group::before{ display:none; }
.plan__list li.is-hidden{ display:none; }
.plan__more{ display:inline-flex; align-items:center; gap:6px; align-self:flex-start; margin-top:12px; padding:8px 0; border:0; background:none; cursor:pointer; font-size:14px; font-weight:500; color:var(--ink); }
.plan__more svg{ width:15px; height:15px; transition:transform .3s var(--ease); }
.plan__more[aria-expanded="true"] svg{ transform:rotate(180deg); }
/* main.js builds this toggle at every width, but only collapses the list at
   760px and below (its own breakpoint); above that it would read "Show less"
   under a list that cannot be shortened. */
@media (min-width:761px){ .plan__more{ display:none; } }
.plan--popular{ background:var(--dark); border-color:var(--dark); color:var(--dark-text); box-shadow:var(--sh-3); }
.plan--popular h3, .plan--popular .amount, .plan--popular .plan__list li b, .plan--popular .plan__more{ color:#fff; }
.plan--popular .plan__desc, .plan--popular .per{ color:var(--dark-muted); }
.plan--popular .plan__list{ border-color:var(--dark-line); }
.plan--popular .plan__list li{ color:#D2D2D6; }
.plan--popular .plan__list li.plan__group{ color:var(--dark-muted); }
.plan--popular .plan__list li::before{ background-color:rgba(255,255,255,.08); border-color:var(--dark-line-2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4 10-10'/%3E%3C/svg%3E"); }
.plan__badge{ position:absolute; top:28px; right:28px; font:500 10.5px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; padding:6px 8px; border-radius:6px; color:#fff; background:rgba(255,255,255,.1); border:1px solid var(--dark-line-2); }
.plans__foot{ display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.chip{ display:inline-flex; align-items:center; height:34px; padding:0 13px; border-radius:9px; background:rgba(255,255,255,.65); border:1px solid var(--line-2); font-size:13.5px; color:var(--ink-3); }
a.chip{ text-decoration:underline; text-decoration-color:var(--line-3); text-underline-offset:3px; }
a.chip:hover{ color:var(--ink); }
.credits-note{ margin-top:18px; max-width:860px; font-size:14.5px; line-height:1.6; color:var(--muted); }
.credits-note b{ color:var(--ink); font-weight:600; }
.credits-note a{ color:var(--ink); font-weight:500; text-decoration:underline; text-underline-offset:3px; }

/* ===== FAQ ===== */
.faq__wrap{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.55fr); gap:72px; align-items:start; }
.faq__wrap > .shead{ position:sticky; top:112px; margin-bottom:0; }
.faq__cta{ display:flex; align-items:center; gap:12px; margin-top:32px; padding:14px; background:var(--card); border:1px solid var(--line); border-radius:14px; }
.faq__cta img{ border-radius:6px; }
.faq__cta div{ flex:1; min-width:0; }
.faq__cta b{ display:block; font-size:14.5px; font-weight:600; }
.faq__cta span{ font-size:13px; color:var(--muted); }
.faq{ border-top:1px solid var(--line-2); }
.faq__item{ border-bottom:1px solid var(--line-2); }
.faq__item summary{ display:flex; justify-content:space-between; align-items:center; gap:24px; padding:24px 0; cursor:pointer; list-style:none;
  font-size:18px; font-weight:500; letter-spacing:-.02em; line-height:1.35; transition:color .2s ease; }
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary:hover{ color:var(--ink-3); }
.faq__item summary i{ position:relative; flex:none; width:30px; height:30px; border-radius:9px; border:1px solid var(--line-2); background:var(--card);
  transition:background-color .3s ease, border-color .3s ease, transform .45s var(--ease); }
.faq__item summary i::before, .faq__item summary i::after{ content:""; position:absolute; left:50%; top:50%; width:11px; height:1.6px; margin:-.8px 0 0 -5.5px; border-radius:2px; background:var(--ink); transition:background-color .3s ease; }
.faq__item summary i::after{ transform:rotate(90deg); }
.faq__item[open] summary i{ background:var(--ink); border-color:var(--ink); transform:rotate(135deg); }
.faq__item[open] summary i::before, .faq__item[open] summary i::after{ background:#fff; }
.faq__a{ padding:0 56px 26px 0; font-size:15.5px; line-height:1.7; color:var(--muted); }
.faq__item::details-content{ block-size:0; overflow:hidden; transition:block-size .45s var(--ease), content-visibility .45s allow-discrete; }
.faq__item[open]::details-content{ block-size:auto; }

/* ===== FINAL CTA ===== */
.section.section--cta{ padding-top:24px; }
.finalcta{ position:relative; overflow:hidden; padding:96px 56px; border-radius:30px; background:var(--dark); color:var(--dark-text); text-align:center; isolation:isolate; }
/* radar: range rings, a beam on a 6s turn, and blips that flare as it passes */
.finalcta__radar{ position:absolute; left:50%; top:50%; z-index:-1; width:min(1120px, 170vw); aspect-ratio:1; translate:-50% -50%; pointer-events:none; }
.finalcta__radar::before{ content:""; position:absolute; inset:0; border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%, transparent 0 calc(8.33% - 1px), rgba(255,255,255,.075) calc(8.33% - 1px) 8.33%),
    linear-gradient(rgba(255,255,255,.05), rgba(255,255,255,.05)) 50% 0 / 1px 100% no-repeat,
    linear-gradient(rgba(255,255,255,.05), rgba(255,255,255,.05)) 0 50% / 100% 1px no-repeat;
  -webkit-mask-image:radial-gradient(closest-side, #000 40%, transparent 100%); mask-image:radial-gradient(closest-side, #000 40%, transparent 100%); }
.radar__sweep{ position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0deg 285deg, rgba(255,255,255,.015) 295deg, rgba(255,255,255,.11) 357deg, rgba(255,255,255,.42) 359.6deg, transparent 360deg);
  -webkit-mask-image:radial-gradient(closest-side, #000 30%, transparent 100%); mask-image:radial-gradient(closest-side, #000 30%, transparent 100%);
  animation:radarSpin 6s linear infinite; }
@keyframes radarSpin{ to{ transform:rotate(360deg); } }
.blip{ position:absolute; left:calc(50% + var(--r) * sin(var(--a))); top:calc(50% - var(--r) * cos(var(--a))); width:11px; height:11px; margin:-5.5px 0 0 -5.5px;
  border-radius:50%; background:var(--c); opacity:0; animation:blip 6s linear infinite; animation-delay:var(--t); }
.blip::after{ content:""; position:absolute; inset:-1px; border-radius:50%; border:1.5px solid var(--c); opacity:0; animation:blipRing 6s ease-out infinite; animation-delay:var(--t); }
.blip--h{ --c:#FF5B4F; } .blip--m{ --c:#FFAA3B; } .blip--l{ --c:#5EA1FF; } .blip--ok{ --c:#43CB72; }
@keyframes blip{ 0%{ opacity:1; transform:scale(1.25); box-shadow:0 0 22px 5px color-mix(in srgb, var(--c) 60%, transparent); } 45%{ opacity:.3; transform:none; box-shadow:0 0 0 0 transparent; } 100%{ opacity:.12; } }
@keyframes blipRing{ 0%{ opacity:.9; transform:scale(1); } 25%{ opacity:0; transform:scale(4.2); } 100%{ opacity:0; } }
.finalcta__inner{ position:relative; max-width:760px; margin:0 auto; display:flex; flex-direction:column; align-items:center; }
.finalcta__title{ margin-top:22px; font-size:clamp(36px, 5.4vw, 66px); line-height:1; letter-spacing:-.045em; color:#fff; }
.finalcta__sub{ margin-top:20px; max-width:520px; font-size:18px; line-height:1.55; color:var(--dark-muted); }
.finalcta__cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:36px; }
.finalcta__micro{ margin-top:18px; font-size:13px; color:var(--dark-muted); }

/* ===== FOOTER ===== */
.footer{ padding:88px 0 28px; border-top:1px solid var(--line); overflow:hidden; }
.footer__inner{ display:grid; grid-template-columns:minmax(0,1.7fr) repeat(3, minmax(0,1fr)); gap:40px; }
.footer__brand p{ margin-top:18px; max-width:340px; font-size:14.5px; line-height:1.6; color:var(--muted); }
.footer__social{ display:flex; gap:8px; margin-top:22px; }
.footer__social-link{ display:grid; place-items:center; width:38px; height:38px; border-radius:10px; border:1px solid var(--line-2); background:var(--card); color:var(--ink-3); transition:color .2s ease, border-color .2s ease; }
.footer__social-link:hover{ color:var(--ink); border-color:var(--line-3); }
.footer__col h3{ margin-bottom:14px; font:500 11px/1 var(--mono); letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }
.footer__col a{ display:block; padding:5px 0; font-size:14.5px; color:var(--ink-3); transition:color .2s ease; }
.footer__col a:hover{ color:var(--ink); }
.footer__wordmark{ margin-top:72px; font-size:clamp(72px, 17.5vw, 236px); font-weight:700; line-height:.78; letter-spacing:-.065em; text-align:center; user-select:none;
  background:linear-gradient(180deg, #DEDDD6 30%, rgba(222,221,214,0)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.footer__bottom{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-top:28px; padding-top:22px; border-top:1px solid var(--line); font-size:13px; color:var(--muted); }
.footer__operator{ display:block; margin-bottom:4px; }
.footer__operator a{ color:var(--ink-3); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line-3); }
.footer__top{ display:inline-flex; align-items:center; gap:6px; flex:none; color:var(--ink-3); }
.footer__top:hover{ color:var(--ink); }

/* ===== CONSENT BANNER (injected by /js/analytics.js with dark defaults) ===== */
html body .sg-cookie{ background:rgba(255,255,255,.94); color:var(--ink); border:1px solid var(--line-2); border-radius:16px;
  box-shadow:0 1px 3px rgba(17,17,19,.08), 0 30px 60px -20px rgba(17,17,19,.35); font-family:var(--font); }
html body .sg-cookie__copy{ color:var(--muted); }
html body .sg-cookie__copy strong{ color:var(--ink); font-family:var(--font); }
html body .sg-cookie__copy a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
html body .sg-cookie button{ border-radius:10px; font-family:var(--font); font-weight:500; }
html body .sg-cookie__essential{ background:var(--card); color:var(--ink); border-color:var(--line-2); }
html body .sg-cookie__essential:hover{ background:var(--paper); }
html body .sg-cookie__accept, html body .sg-cookie__all{ background:var(--ink); color:#fff; box-shadow:none; }
html body .sg-cookie__accept:hover, html body .sg-cookie__all:hover{ background:#2A2A30; filter:none; }
body:has(.nav__links.open) .sg-cookie{ visibility:hidden; }

/* ===== MOTION LAYER =====
   Everything below is driven by /js/home.js and only exists once it has run;
   none of it is needed to read the page. */

/* headings reveal word by word (home.js wraps each word in .sw) */
.sw{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.12em; margin-bottom:-.12em; }
.sw > span{ display:inline-block; transform:translateY(110%); transition:transform 1s var(--ease); transition-delay:calc(var(--i) * 45ms + .1s); }
.in .sw > span, .sw.in > span{ transform:none; }

/* cursor light: a soft fill plus a brighter rim that follow the pointer */
.fx{ position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .4s ease;
  background:radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), rgba(17,17,19,.045), transparent 42%); }
.fx::after{ content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background:radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(17,17,19,.32), transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
/* Behind the card's content but above its background: the card is its own
   stacking context, and the light sits at z-index -1 inside it. */
.has-fx{ isolation:isolate; }
.fx{ z-index:-1; }
.has-fx:hover > .fx{ opacity:1; }
.section--dark .fx, .plan--popular .fx, .vsai .fx{ background:radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.07), transparent 42%); }
.section--dark .fx::after, .plan--popular .fx::after{ background:radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.5), transparent 60%); }

/* magnetic primary buttons */
.btn.is-magnetic{ transform:translate(var(--mgx, 0px), var(--mgy, 0px)); transition:background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .25s ease, translate .25s var(--ease), transform .45s var(--ease); }
.btn.is-magnetic.is-pulled{ transition:background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .25s ease, translate .25s var(--ease), transform .12s linear; }

/* reading progress under the nav */
.nav__progress{ position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--brand); transform-origin:left; transform:scaleX(var(--read, 0)); pointer-events:none; }

/* the popular plan: a light that travels around its border */
.plan--popular{ isolation:isolate; }
.plan--popular::before{ content:""; position:absolute; inset:-1px; z-index:2; border-radius:inherit; padding:1.5px; pointer-events:none;
  background:conic-gradient(from var(--ang), transparent 0deg, transparent 250deg, rgba(255,255,255,.75) 320deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation:sweep 5s linear infinite; }
@keyframes sweep{ to{ --ang:360deg; } }

/* prices roll when the billing period changes */
.plan__price .amount{ display:inline-block; }
.plan__price .amount.is-rolling{ animation:roll .55s var(--ease) both; }
@keyframes roll{ from{ transform:translateY(.35em); opacity:0; clip-path:inset(0 0 40% 0); } to{ transform:none; opacity:1; clip-path:inset(0); } }

/* footer wordmark rises letter by letter */
.footer__wordmark{ background:none; color:inherit; -webkit-background-clip:border-box; background-clip:border-box; }
.footer__wordmark span{ display:inline-block; background:linear-gradient(180deg, #DEDDD6 30%, rgba(222,221,214,0)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.footer__wordmark.reveal{ opacity:1; transform:none; }
.js-motion .footer__wordmark.reveal span{ transform:translateY(40%); opacity:0; transition:transform 1.1s var(--ease), opacity .8s ease; transition-delay:calc(var(--i) * 55ms); }
.js-motion .footer__wordmark.reveal.in span{ transform:none; opacity:1; }

/* ===== COLOUR ===== */
/* the six areas keep the colour their chip carries in the marquee */
.bento .tile:nth-child(1){ --tc:#1A73E8; --tint:#ECF2FD; }
.bento .tile:nth-child(2){ --tc:#12A4AF; --tint:#E6F5F6; }
.bento .tile:nth-child(3){ --tc:#7C5CD6; --tint:#F0ECFA; }
.bento .tile:nth-child(4){ --tc:#1E8E3E; --tint:#E9F4EB; }
.bento .tile:nth-child(5){ --tc:#E37400; --tint:#FCF0E1; }
.bento .tile:nth-child(6){ --tc:#5F6368; --tint:#EEEFF1; }
.bento .tile__vis{ background-color:var(--tint); border-color:color-mix(in srgb, var(--tc) 16%, transparent);
  background-image:radial-gradient(color-mix(in srgb, var(--tc) 24%, transparent) 1px, transparent 1.2px); background-size:16px 16px; background-position:center; }
.bento .tile__n{ display:inline-flex; align-items:center; gap:8px; }
.bento .tile__n::before{ content:""; width:9px; height:9px; border-radius:3px; background:var(--tc); }
.bento .tile__metric b{ color:var(--high); }
.bento .tile:hover .tile__n::before{ animation:nudge .6s var(--ease); }
@keyframes nudge{ 40%{ transform:scale(1.5) rotate(45deg); } }

/* ===== THE PEN =====
   Hand-drawn marks in the logo's magenta. Each SVG's viewBox is measured in
   ems of the text it sits on, so the stroke is the same weight at every size
   and never stretches. They draw once their heading has arrived; without the
   motion script they are simply already there. */
.mk{ position:relative; display:inline-block; }
.mk > svg, .hero__circle{ position:absolute; overflow:visible; pointer-events:none; fill:none; stroke:var(--pen); stroke-linecap:round; stroke-linejoin:round; }
.mk > svg path, .hero__circle path{ stroke-width:var(--pw, .055); stroke-dasharray:1; stroke-dashoffset:0; }
.mk--circle > svg{ left:-.3em; top:-.12em; width:calc(100% + .6em); height:calc(100% + .26em); }
/* a circled word that opens a heading needs room before the next word */
.shead h2 > .mk--circle:first-child{ margin-right:.12em; }
.mk--under > svg{ left:-.04em; top:calc(100% - .14em); width:calc(100% + .08em); height:.34em; }
.mk--strike > svg{ left:-.08em; top:.3em; width:calc(100% + .16em); height:.42em; }
.mk--hl{ background:linear-gradient(var(--hl), var(--hl)) 0 86% / 100% 46% no-repeat; padding-inline:.06em; margin-inline:-.06em; border-radius:.06em; }
.mk--strike{ color:var(--faint); }
.js-motion .mk > svg path{ stroke-dashoffset:1; opacity:0; transition:stroke-dashoffset 1s cubic-bezier(.65,0,.25,1) .8s, opacity 0s linear .8s; }
.js-motion .mk > svg path + path{ transition-delay:1.3s, 1.3s; }
.js-motion .in .mk > svg path, .js-motion .mk.is-drawn > svg path{ stroke-dashoffset:0; opacity:1; }
.js-motion .mk--hl{ background-size:0% 46%; transition:background-size .9s var(--ease) .75s; }
.js-motion .in .mk--hl, .js-motion .mk--hl.is-drawn{ background-size:100% 46%; }
.js-motion .mk--strike{ color:inherit; transition:color .7s ease 1.4s; }
.js-motion .in .mk--strike{ color:var(--faint); }

/* the headline's click, circled the moment it lands */
.hero__circle{ left:-.22em; top:-.06em; width:calc(100% + .42em); height:calc(100% + .16em); --pw:.04; }
.hero__circle path{ animation:penDraw 1s cubic-bezier(.65,0,.25,1) 2.3s both; }
@keyframes penDraw{ 0%{ stroke-dashoffset:1; opacity:0; } 1%{ opacity:1; } 100%{ stroke-dashoffset:0; opacity:1; } }

/* ===== HERO: the offer, quietly, above the buttons it belongs to =====
   Left-aligned with the button column (420px wide, see .hero__side), and on
   the headline's second line, so it reads as part of the call to action. */
.hero__copy{ position:relative; }
.hero__offer{ position:absolute; left:calc(100% - 420px); bottom:12px; display:flex; align-items:center; gap:12px; padding:10px 18px 10px 10px;
  background:rgba(255,255,255,.86); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid var(--line-2); border-radius:16px; box-shadow:var(--sh-2); pointer-events:none; animation:rise 1s var(--ease) 2.6s both; }
.hero__offer img{ width:40px; height:40px; border-radius:11px; }
.hero__offer b{ display:block; font-size:15px; font-weight:600; letter-spacing:-.015em; color:var(--ink); }
.hero__offer small{ display:block; margin-top:2px; font-size:13.5px; color:var(--muted); }
@media (max-width:980px){ .hero__offer{ display:none; } }

/* ===== HERO: the grid answers the pointer ===== */
.hero__grid::before{ content:""; position:absolute; inset:0; opacity:0; transition:opacity .5s ease;
  background-image:linear-gradient(rgba(236,0,95,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(236,0,95,.2) 1px, transparent 1px);
  background-size:72px 72px; background-position:center -1px;
  -webkit-mask-image:radial-gradient(260px circle at var(--gx, -999px) var(--gy, -999px), #000, transparent 72%);
  mask-image:radial-gradient(260px circle at var(--gx, -999px) var(--gy, -999px), #000, transparent 72%); }
.hero.is-pointer .hero__grid::before{ opacity:1; }

/* ===== WHY: a paragraph lit as it is read ===== */
.manifesto{ position:relative; padding:150px 0 140px; background:var(--dark); color:var(--dark-text); overflow:hidden; isolation:isolate; }
.manifesto::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 50% 60% at 85% 100%, rgba(255,226,74,.07), transparent 70%), radial-gradient(ellipse 40% 50% at 8% 0%, rgba(226,0,90,.06), transparent 70%); }
.manifesto__text{ margin-top:34px; max-width:1120px; font-size:clamp(30px, 4.3vw, 62px); font-weight:500; line-height:1.14; letter-spacing:-.036em; color:#fff; text-wrap:pretty; }
.manifesto .hl{ color:var(--ink); background:linear-gradient(var(--hl), var(--hl)) 0 62% / 100% 80% no-repeat; border-radius:.08em; padding:0 .05em; margin:0 -.02em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.manifesto .mk > svg{ --pw:.05; }
.manifesto .mk--circle > svg{ left:-.4em; top:-.16em; width:calc(100% + .8em); height:calc(100% + .32em); }
.js-motion .manifesto .mk > svg path{ transition:stroke-dashoffset .9s cubic-bezier(.65,0,.25,1) .1s, opacity 0s linear .1s; }
.manifesto__foot{ margin-top:48px; }
.manifesto__link{ display:inline-flex; align-items:center; gap:10px; font-size:16px; font-weight:500; color:#fff; padding-bottom:4px; border-bottom:1px solid rgba(255,255,255,.28); transition:border-color .2s ease; }
.manifesto__link:hover{ border-color:#fff; }
.manifesto__link:hover .arrow{ transform:translateX(3px); }
/* lit word by word once /js/home.js has split the paragraph */
.manifesto.is-scrub .wd{ color:rgba(255,255,255,.17); transition:color .35s ease; }
.manifesto.is-scrub .wd.on{ color:#fff; }
.manifesto.is-scrub .hl{ background-size:0% 80%; transition:background-size .7s var(--ease); }
.manifesto.is-scrub .hl.is-drawn{ background-size:100% 80%; }
.manifesto.is-scrub .hl.is-drawn .wd{ color:var(--ink); }

/* dark sections open out from a card to the full width as they arrive */
.js-clip{ clip-path:inset(0 calc(var(--clip, 0) * 4vw) round calc(var(--clip, 0) * 40px)); }

/* ===== TAPES: the six areas, across the page ===== */
.tapes{ position:relative; z-index:1; height:clamp(200px, 21vw, 290px); pointer-events:none; overflow-x:clip; }
/* clip, not hidden: the tapes run past the screen edge on purpose, and a phone
   would otherwise widen the whole page to fit their rotated corners. */
.tape{ position:absolute; left:-6vw; right:-6vw; top:50%; display:flex; overflow:hidden; padding:clamp(12px, 1.3vw, 18px) 0; }
.tape--hl{ background:var(--hl); color:var(--ink); transform:translateY(calc(-50% - 22px)) rotate(3.6deg); }
.tape--ink{ background:var(--ink); color:#fff; transform:translateY(calc(-50% + 22px)) rotate(-3deg); box-shadow:0 24px 50px -24px rgba(17,17,19,.6); }
.tape__track{ display:flex; flex:none; align-items:center; gap:clamp(18px, 2.4vw, 36px); padding-right:clamp(18px, 2.4vw, 36px); animation:marquee 48s linear infinite; }
.tape--hl .tape__track{ animation-duration:56s; animation-direction:reverse; }
.tape span{ font-size:clamp(30px, 4.4vw, 62px); font-weight:500; line-height:1.08; letter-spacing:-.045em; white-space:nowrap; }
.tape span.o{ color:transparent; -webkit-text-stroke:1.4px currentColor; }
.tape__dot{ flex:none; width:clamp(12px, 1.2vw, 17px); aspect-ratio:1; border-radius:50%; }
.tape__dot--h{ background:#D93025; } .tape__dot--m{ background:var(--med-dot); } .tape__dot--l{ background:var(--low-dot); } .tape__dot--ok{ background:var(--ok-dot); }
.tape--hl .tape__dot{ box-shadow:0 0 0 3px rgba(17,17,19,.9); }

/* ===== TILT: cards lean toward the pointer (home.js, mouse only) ===== */
.reveal.in.has-tilt{ transform:perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition:opacity .9s var(--ease), transform .7s var(--ease), translate .35s var(--ease), box-shadow .35s ease, border-color .35s ease; }
.reveal.in.has-tilt.is-tilting{ transition:opacity .9s var(--ease), transform .18s ease-out, translate .35s var(--ease), box-shadow .35s ease, border-color .35s ease; }
.tile.has-tilt.is-tilting{ box-shadow:0 30px 60px -30px rgba(17,17,19,.35); }

.hero__stage{ scroll-margin-top:84px; }

/* a magnifier over the storefront, for a mouse (home.js builds it) */
.scene__loupe{ position:absolute; z-index:4; left:0; top:0; width:9.5em; height:9.5em; margin:-4.75em 0 0 -4.75em; border-radius:50%; pointer-events:none;
  background-repeat:no-repeat; background-color:#FAF7F2; border:.3em solid #fff;
  box-shadow:0 0 0 .14em var(--pen), 0 1.2em 2.6em -.6em rgba(17,17,19,.45);
  opacity:0; transform:scale(.6); transition:opacity .25s ease, transform .35s var(--ease); }
.scene__loupe.is-on{ opacity:1; transform:none; }
.scene__view.has-loupe{ cursor:zoom-in; }

/* ===== STAT BAND: a small live picture beside each number ===== */
.stats li{ position:relative; }
.stat__viz{ position:absolute; top:36px; right:28px; display:flex; align-items:center; gap:5px; }
.stat__viz--six i{ width:12px; height:12px; border-radius:3.5px; background:var(--c); }
.stat__viz--six i:nth-child(1){ --c:#1A73E8; } .stat__viz--six i:nth-child(2){ --c:#12A4AF; } .stat__viz--six i:nth-child(3){ --c:#7C5CD6; }
.stat__viz--six i:nth-child(4){ --c:#1E8E3E; } .stat__viz--six i:nth-child(5){ --c:#E37400; } .stat__viz--six i:nth-child(6){ --c:#5F6368; }
.js-motion .stat__viz--six i{ transform:scale(0) rotate(-60deg); transition:transform .7s cubic-bezier(.34,1.56,.64,1); transition-delay:calc(.6s + var(--k) * 90ms); }
.js-motion .stats.in .stat__viz--six i{ transform:none; }
.stat__viz--six:hover i{ animation:hop .5s var(--ease) both; animation-delay:calc(var(--k) * 50ms); }
@keyframes hop{ 40%{ transform:translateY(-6px) rotate(10deg); } }
.stat__viz--pages{ display:grid; grid-template-columns:repeat(4, 11px); gap:4px; }
.stat__viz--pages i{ width:11px; height:14px; border-radius:2.5px; border:1.5px solid var(--line-3); background:var(--card);
  animation:pageOn 4s steps(1) infinite; animation-delay:calc(var(--k) * .5s); }
@keyframes pageOn{ 0%{ background:var(--ink); border-color:var(--ink); } 12.5%, 100%{ background:var(--card); border-color:var(--line-3); } }
.stat__viz--src{ gap:13px; }
.stat__viz--src::before{ content:""; position:absolute; left:4px; right:4px; top:50%; height:1.5px; margin-top:-.75px; background:var(--line-3); }
.stat__viz--src i{ position:relative; width:10px; height:10px; border-radius:50%; background:var(--card); border:1.5px solid var(--ink-3);
  animation:srcPing 3.2s ease infinite; animation-delay:calc(var(--k) * .42s); }
.stat__viz--src i:nth-child(1){ --c:var(--ink); } .stat__viz--src i:nth-child(2){ --c:#1A73E8; }
.stat__viz--src i:nth-child(3){ --c:#1E8E3E; } .stat__viz--src i:nth-child(4){ --c:#7C5CD6; }
@keyframes srcPing{ 0%, 34%, 100%{ background:var(--card); border-color:var(--ink-3); box-shadow:none; } 8%, 22%{ background:var(--c); border-color:var(--c); box-shadow:0 0 0 4px color-mix(in srgb, var(--c) 20%, transparent); } }
.stat__viz--key{ position:absolute; width:48px; height:24px; }
.stat__viz--key svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.stat__keyicon{ stroke:var(--ink-3); stroke-width:2; }
.stat__strike{ stroke:var(--pen); stroke-width:2.6; }
.stat__strike path{ stroke-dasharray:1; stroke-dashoffset:0; }
.js-motion .stat__strike path{ stroke-dashoffset:1; opacity:0; transition:stroke-dashoffset .7s cubic-bezier(.65,0,.25,1) 1.2s, opacity 0s linear 1.2s; }
.js-motion .stats.in .stat__strike path{ stroke-dashoffset:0; opacity:1; }

/* ===== THE BIG BUTTONS CATCH A PASSING GLINT ===== */
.hero__cta .btn--primary, .finalcta__cta .btn--light{ position:relative; overflow:hidden; isolation:isolate; }
.hero__cta .btn--primary::after, .finalcta__cta .btn--light::after{ content:""; position:absolute; z-index:-1; top:-20%; bottom:-20%; left:-70%; width:45%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.3), transparent); transform:skewX(-18deg); animation:glint 6s ease-in-out 3.2s infinite; }
.finalcta__cta .btn--light::after{ background:linear-gradient(100deg, transparent, rgba(255,226,74,.55), transparent); }
@keyframes glint{ 0%{ left:-70%; } 16%, 100%{ left:140%; } }

/* ===== THE CHATBOT QUESTION, inside the dark sources section ===== */
.section--dark .vsai{ margin-top:72px; background:var(--dark-2); border:1px solid var(--dark-line); }
.section--dark .vsai::after{ content:""; position:absolute; right:-80px; top:-80px; width:280px; height:280px; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,226,74,.08), transparent); }

/* ===== PROOF: one card, the deck shuffles itself ===== */
.proof{ grid-template-columns:1fr; }
.proofc--lead{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); padding:40px 0 40px 40px; }
.proofc--lead .deck{ height:450px; }
.proofc--lead .deck__s{ width:94%; }
.deck__s{ transition:transform .8s var(--ease), left .8s var(--ease), top .8s var(--ease), filter .8s ease; }
.deck__s--2{ filter:brightness(.97); }
.deck__s--3{ filter:brightness(.94); }
.shead .lead a{ color:var(--ink); font-weight:500; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line-3); }
.shead .lead a:hover{ text-decoration-color:var(--ink); }

/* ===== FOOTER: the wordmark rises toward the pointer and blushes ===== */
/* --lift (0 to 1, from home.js) is registered so it eases on its own, and the
   rise and the colour both follow it. At 0 the letter is exactly as before. */
@property --lift{ syntax:"<number>"; inherits:false; initial-value:0; }
.footer__wordmark span{ translate:0 calc(var(--lift) * -0.14em);
  background-image:linear-gradient(180deg, color-mix(in srgb, var(--pen) calc(var(--lift) * 85%), #DEDDD6) 30%, rgba(222,221,214,0)); }
.js-motion .footer__wordmark.reveal span{ transition:transform 1.1s var(--ease), opacity .8s ease, --lift .6s var(--ease);
  transition-delay:calc(var(--i) * 55ms), calc(var(--i) * 55ms), 0s; }

@media (max-width:860px){
  /* two numbers to a row leaves no room beside them: the picture sits under the label */
  .stat__viz{ position:relative; top:auto; right:auto; align-self:flex-start; margin-top:4px; }
  .stat__viz--key{ flex:none; }
  .proofc--lead .deck{ height:auto; }
  .section--dark .vsai{ margin-top:48px; }
}

/* ===== RESPONSIVE ===== */
@media (max-width:1080px){
  .hero__side{ column-gap:40px; }
  .wk.is-tabs{ grid-template-columns:minmax(0,280px) minmax(0,1fr); gap:36px; }
  .split{ gap:48px; }
}
@media (max-width:980px){
  .section{ padding:104px 0; }
  .hero__side{ grid-template-columns:1fr; grid-template-areas:"sub" "cta" "guide"; row-gap:24px; }
  .hero__sub{ max-width:620px; }
  .install-guidance{ margin-top:-10px; }
  .split{ grid-template-columns:1fr; gap:40px; }
  .split__l{ position:static; }
  .bento{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .tile--wide, .tile--full{ grid-column:1 / -1; }
  .prov{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .prov__line, .prov__node{ display:none; }
  .prov{ padding-top:0; }
  .proof{ grid-template-columns:1fr; }
  .plans{ grid-template-columns:1fr; max-width:560px; margin-inline:auto; }
  .plans__toggle{ justify-content:center; }
  .plans__foot{ justify-content:center; }
  .credits-note{ margin-inline:auto; text-align:center; }
  .faq__wrap{ grid-template-columns:1fr; gap:40px; }
  .faq__wrap > .shead{ position:static; }
  .shead--row{ grid-template-columns:1fr; }
  .footer__inner{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .footer__brand{ grid-column:1 / -1; }
}
@media (max-width:860px){
  .stats{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .stats li:nth-child(3){ padding-left:0; border-left:0; }
  .stats li:nth-child(n+3){ border-top:1px solid var(--line-2); }
  .wk.is-tabs{ grid-template-columns:1fr; gap:24px; }
  .wk__tabs{ flex-direction:row; gap:8px; overflow-x:auto; border-top:0; margin-inline:-24px; padding:2px 24px 6px; scroll-snap-type:x mandatory; scroll-padding-inline:24px; scrollbar-width:none; }
  /* One panel at a time on a phone: stacked, the section was as tall as the
     longest chapter and every shorter one sat over a blank gap. Only a tap
     changes it here (home.js does not auto-advance at this width), so the
     page below never jumps while it is being read. */
  .wk.is-tabs .wk__panel:not(.is-active){ display:none; }
  .wk__tabs::-webkit-scrollbar{ display:none; }
  .wk__tab{ flex:none; scroll-snap-align:start; flex-direction:row; align-items:center; gap:8px; padding:10px 14px; border:1px solid var(--line-2); border-radius:10px; background:rgba(255,255,255,.55); }
  .wk__tab[aria-selected="true"]{ background:var(--ink); border-color:var(--ink); color:#fff; }
  .wk__tab-t{ font-size:14px; white-space:nowrap; max-width:240px; overflow:hidden; text-overflow:ellipsis; }
  .wk__tab-bar{ display:none; }
  .wk__panel{ grid-template-columns:1fr; gap:22px; }
  .wk.is-tabs .wk__copy{ grid-template-columns:1fr; }
  .vsai{ grid-template-columns:1fr; padding:36px 28px; }
  .perm{ grid-template-columns:1fr; }
  .proofc--lead{ grid-template-columns:1fr; padding-right:30px; }
  .deck{ height:auto; aspect-ratio:1754 / 1250; margin-right:-30px; }
  .deck__s{ width:92%; }
  .deck__s--1{ top:30%; }
  .deck__s--2{ top:15%; left:5%; }
  .deck__s--3{ left:10%; }
}
@media (max-width:760px){
  .section{ padding:84px 0; }
  .hero{ padding-top:48px; }
  .hero__stage{ margin-top:36px; }
  .beats{ grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:18px; }
  .beat{ padding-right:14px; }
  .shead{ margin-bottom:44px; }
  .shead .lead{ font-size:17px; }
  .ledger__hd{ display:none; }
  .ledger__list li{ grid-template-columns:12px minmax(0,1fr) auto; grid-template-areas:"d t t" "d a b"; row-gap:6px; }
  .ledger__d{ grid-area:d; align-self:start; margin-top:7px; }
  .ledger__t{ grid-area:t; }
  .ledger__a{ grid-area:a; }
  .ledger__list b{ grid-area:b; }
  .spec__part{ grid-template-columns:1fr; gap:10px; padding:18px; }
  .spec__src{ margin-left:0; width:100%; }
  .tile--wide, .tile--full{ flex-direction:column-reverse; }
  .tile--wide .tile__copy, .tile--full .tile__copy{ flex:none; padding:20px 14px 14px; }
  .viz-serp{ grid-template-columns:1fr; padding:18px; }
  .perm__col--no .rules{ grid-template-columns:1fr; }
  .splan{ grid-template-columns:1fr; }
  .wtally{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .finalcta{ padding:72px 24px; border-radius:24px; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:640px){
  .wf__legend{ flex-wrap:wrap; gap:6px 14px; }
  .wf__legend span{ white-space:nowrap; }
  .wf__lcp{ bottom:70px; }
  .wf__lcp b{ top:auto; bottom:2px; }
  .wf__legend{ margin-left:0; padding-top:6px; }
  .bento{ grid-template-columns:1fr; }
  .prov{ grid-template-columns:1fr; }
  .footer__inner{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:520px){
  .container{ padding-inline:16px; }
  .hero__stage{ --cw:calc(100vw - 32px); }
  .wk__tabs{ margin-inline:-16px; padding-inline:16px; scroll-padding-inline:16px; }
  .hero__title{ letter-spacing:-.045em; }
  /* Too narrow to hold the first line whole: let the two lines flow as one
     sentence instead of stranding "store", and fade rather than slide. */
  .hero__title .ln{ display:inline; }
  .hero__cta .btn{ flex:1 1 auto; }
  /* A pair of buttons that cannot share a row stacks at one full width,
     rather than as two different-length pills. */
  .finalcta__cta .btn, .perm__links .btn{ flex:1 1 100%; }
  .faq__cta{ flex-wrap:wrap; }
  .faq__cta div{ flex:1 1 0; }
  .faq__cta .btn{ flex:1 1 100%; }
  .hero__trust{ flex-direction:column; gap:10px; }
  .beats{ column-gap:14px; }
  .beat{ padding:14px 0 0; }
  .beat b{ font-size:14.5px; }
  .beat > span:last-child{ font-size:13px; }
  .plan{ padding:24px 20px; }
  .plan__badge{ top:24px; right:20px; }
  .vsai{ padding:30px 20px; }
  .proofc{ padding:24px 20px; }
  .proofc--lead{ padding-right:20px; }
  .deck{ margin-right:-20px; }
  .perm__col{ padding:22px 20px 6px; }
  .faq__item summary{ font-size:16.5px; }
  .faq__a{ padding-right:8px; }
  .finalcta{ margin-inline:-4px; }
}


/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-delay:0s !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; transition-delay:0s !important; scroll-behavior:auto !important; }
  .marquee__track, .prov__line i, .hero__grid::after, .plan--popular::before, .tape__track, .radar__sweep, .blip, .blip::after{ animation:none !important; }
  .radar__sweep{ display:none; }
  .blip{ opacity:.6; }
}