/* ==========================================================================
   TipOffly marketing site: wireframe v1 (26 Sep 2026)
   Shared styles for every page. Brand colours come from the logo (green-teal-sky
   aura + orange tip-off dot) and the app's night-green home screen.
   ========================================================================== */

/* ---------- Tokens: light ---------- */
:root{
  --paper:#F1FAF5;      /* page ground, minty white */
  --paper-2:#E3F4EC;    /* alternate band */
  --surface:#FFFFFF;
  --ink:#0B2A23;        /* main text, also chunky outlines */
  --ink-2:#2D4A42;
  --muted:#557068;
  --hair:#CFE5DB;
  --edge:#0B2A23;       /* sticker outline */
  --drop:#0B2A23;       /* hard offset shadow */

  --night:#0B2A23;      /* app background */
  --night-2:#12392F;
  --on-night:#EAFBF4;
  --on-night-2:#A9D8C7;

  --mint:#7FE0C4;
  --leaf:#00A86B;
  --teal:#14B8A6;
  --sky:#38BDF8;
  --tang:#F97316;
  --tang-ink:#B43F07;   /* orange that passes contrast as text */
  --sun:#FFC93C;
  --berry:#FF7EB6;
  --lilac:#B9A6FF;

  --ok:#0E9F6E; --ok-soft:#D8F5E8;
  --warn:#A15C00; --warn-soft:#FFF0CC;
  --bad:#C62828;  --bad-soft:#FFE1DE;

  --display:"Bricolage Grotesque","Trebuchet MS","Nirmala UI","Kohinoor Devanagari","Noto Sans Devanagari",system-ui,sans-serif;
  --body:"Nunito","Segoe UI","Nirmala UI","Kohinoor Devanagari","Noto Sans Devanagari",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;

  --r-xl:34px; --r-lg:24px; --r-md:16px; --r-sm:10px;
  --shadow:4px 4px 0 var(--drop);
  --shadow-lg:7px 7px 0 var(--drop);
  --max:1180px;
}

/* ---------- Tokens: dark (system) ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#081713; --paper-2:#0C201A; --surface:#10271F;
    --ink:#E6F7EF; --ink-2:#BFDCD0; --muted:#8FB0A4; --hair:#1F3E34;
    --edge:#3E7F6B; --drop:#000000;
    --night:#040F0C; --night-2:#0B241D; --on-night:#EAFBF4; --on-night-2:#A9D8C7;
    --tang-ink:#FF9A52;
    --ok:#4ADE9B; --ok-soft:#10352A; --warn:#F2C14E; --warn-soft:#352A0E; --bad:#FF8A80; --bad-soft:#3A1614;
  }
}
/* ---------- Tokens: dark (toggle) ---------- */
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#081713; --paper-2:#0C201A; --surface:#10271F;
  --ink:#E6F7EF; --ink-2:#BFDCD0; --muted:#8FB0A4; --hair:#1F3E34;
  --edge:#3E7F6B; --drop:#000000;
  --night:#040F0C; --night-2:#0B241D; --on-night:#EAFBF4; --on-night-2:#A9D8C7;
  --tang-ink:#FF9A52;
  --ok:#4ADE9B; --ok-soft:#10352A; --warn:#F2C14E; --warn-soft:#352A0E; --bad:#FF8A80; --bad-soft:#3A1614;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);line-height:1.05;margin:0;text-wrap:balance;letter-spacing:-.02em}
h1{font-size:clamp(40px,7vw,84px);font-weight:800}
h2{font-size:clamp(30px,4.4vw,52px);font-weight:800}
h3{font-size:22px;font-weight:700;letter-spacing:-.01em}
h4{font-size:18px;font-weight:700}
p{margin:0;max-width:62ch}
ul{margin:0}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:6px}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:20px}
.band{padding-block:88px}
.band.tight{padding-block:56px}
.band.alt{background:var(--paper-2)}
.band.night{background:var(--night);color:var(--on-night)}
.band.night .lede,.band.night .muted{color:var(--on-night-2)}
.stack{display:grid;gap:18px}
.stack-lg{display:grid;gap:40px}
.center{text-align:center;justify-items:center}
.center p{margin-inline:auto}
.lede{font-size:clamp(18px,2vw,21px);color:var(--ink-2)}
.muted{color:var(--muted)}
.small{font-size:14px}
.hl{background:linear-gradient(transparent 58%,var(--sun) 58%);padding-inline:.08em}
.band.night .hl{background:linear-gradient(transparent 58%,rgba(249,115,22,.55) 58%)}
.grad{background:linear-gradient(100deg,var(--leaf),var(--teal) 45%,var(--sky));-webkit-background-clip:text;background-clip:text;color:transparent}

/* eyebrow label: a tilted sticker */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:800 12px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;padding:8px 14px;border:2px solid var(--edge);border-radius:99px;background:var(--sun);color:#0B2A23;box-shadow:3px 3px 0 var(--drop);transform:rotate(-2deg);justify-self:start;width:max-content}
.center .eyebrow{justify-self:center}
.eyebrow.mint{background:var(--mint)}
.eyebrow.berry{background:var(--berry)}
.eyebrow.sky{background:var(--sky)}

/* ---------- Icons (CSS masks, one colour, follow currentColor) ---------- */
.ic{display:inline-block;width:26px;height:26px;flex:none;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.i-shield{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/><path d='M8.5 12l2.5 2.5 4.5-5'/></svg>")}
.i-phone{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='6' y='2.5' width='12' height='19' rx='3'/><path d='M10.5 18.5h3'/></svg>")}
.i-smile{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M8.5 14.5c1 1.3 2.2 2 3.5 2s2.5-.7 3.5-2'/><path d='M9 9.5h.01M15 9.5h.01'/></svg>")}
.i-pin{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21s7-6.2 7-11.5A7 7 0 0 0 5 9.5C5 14.8 12 21 12 21z'/><circle cx='12' cy='9.5' r='2.5'/></svg>")}
.i-heart{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z'/></svg>")}
.i-id{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='3'/><circle cx='9' cy='11' r='2'/><path d='M6.5 16c.6-1.4 1.5-2 2.5-2s1.9.6 2.5 2M14 10h4M14 13.5h3'/></svg>")}
.i-lock{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='10.5' width='14' height='10' rx='2.5'/><path d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/></svg>")}
.i-eye{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z'/><circle cx='12' cy='12' r='3'/></svg>")}
.i-clock{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></svg>")}
.i-chat{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 5h16v11H9l-5 4z'/></svg>")}
.i-qr{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='3.5' width='6' height='6' rx='1'/><rect x='14.5' y='3.5' width='6' height='6' rx='1'/><rect x='3.5' y='14.5' width='6' height='6' rx='1'/><path d='M14.5 14.5h2.5v2.5M20.5 14.5v6h-6M17 20.5v-3'/></svg>")}
.i-sim{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 2.5h7l4 4v15H7z'/><rect x='9.5' y='11' width='6' height='7' rx='1'/></svg>")}
.i-bell{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 16V11a6 6 0 0 1 12 0v5l1.5 2h-15z'/><path d='M10 20.5a2 2 0 0 0 4 0'/></svg>")}
.i-globe{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M3 12h18M12 3c2.5 2.6 3.7 5.6 3.7 9s-1.2 6.4-3.7 9c-2.5-2.6-3.7-5.6-3.7-9S9.5 5.6 12 3z'/></svg>")}
.i-moon{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5z'/></svg>")}
.i-bolt{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M13 2.5L5 13.5h6l-1 8 8-11h-6z'/></svg>")}
.i-users{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8' r='3.5'/><path d='M2.5 20c.8-3.5 3.4-5.5 6.5-5.5s5.7 2 6.5 5.5'/><path d='M16 4.8a3.5 3.5 0 0 1 0 6.4M18.5 14.8c1.6.8 2.7 2.6 3 5.2'/></svg>")}
.i-rupee{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 4h12M6 9h12M6 4h3.5a5 5 0 0 1 0 10H6l8.5 7'/></svg>")}
.i-check{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>")}
.i-x{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'><path d='M6 6l12 12M18 6L6 18'/></svg>")}
.i-arrow{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12h15M13 6l6 6-6 6'/></svg>")}
.i-sun{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='4'/><path d='M12 2v2.5M12 19.5V22M2 12h2.5M19.5 12H22M4.9 4.9l1.8 1.8M17.3 17.3l1.8 1.8M4.9 19.1l1.8-1.8M17.3 6.7l1.8-1.8'/></svg>")}
.i-menu{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'><path d='M4 7h16M4 12h16M4 17h16'/></svg>")}

/* ---------- Wireframe toolbar (not part of the final site) ---------- */
.wf-bar{position:relative;z-index:60;background:#FF3D7F;color:#fff;font:600 12px/1.2 var(--mono)}
.wf-bar .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding-block:7px}
.wf-bar b{letter-spacing:.06em}
.wf-bar .wf-pages{display:flex;flex-wrap:wrap;gap:4px 10px;flex:1;min-width:0}
.wf-bar a{color:#fff;text-decoration:none;opacity:.8}
.wf-bar a[aria-current="page"]{opacity:1;text-decoration:underline;text-underline-offset:3px}
.wf-bar button{font:600 12px var(--mono);background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.5);border-radius:99px;padding:4px 10px;cursor:pointer}
.wf-bar button[aria-pressed="true"]{background:#fff;color:#C2185B}

/* Annotation labels, shown when "Notes" is on */
body.wf-notes [data-wf]{position:relative;outline:2px dashed #FF3D7F;outline-offset:-2px}
body.wf-notes [data-wf]::before{content:attr(data-wf);position:absolute;top:8px;left:8px;z-index:40;max-width:calc(100% - 16px);font:600 11px/1.35 var(--mono);color:#fff;background:#FF3D7F;padding:4px 8px;border-radius:6px;pointer-events:none;text-align:left;letter-spacing:0;text-transform:none}

/* ---------- Header ---------- */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:2px solid var(--edge)}
.site-head .wrap{display:flex;align-items:center;gap:20px;min-height:70px}
.logo{display:inline-flex;color:var(--ink);text-decoration:none}
.logo svg{height:34px;width:auto}
.nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.nav a{font-weight:700;font-size:15px;text-decoration:none;padding:8px 12px;border-radius:99px;color:var(--ink-2)}
.nav a:hover{background:var(--paper-2);color:var(--ink)}
.nav a[aria-current="page"]{background:var(--ink);color:var(--paper)}
.head-cta{display:flex;gap:10px;align-items:center}
.icon-btn{width:42px;height:42px;display:inline-grid;place-items:center;border:2px solid var(--edge);border-radius:12px;background:var(--surface);color:var(--ink);cursor:pointer;box-shadow:2px 2px 0 var(--drop)}
.menu-btn{display:none}
@media (max-width:1060px){
  .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;background:var(--paper);border-bottom:2px solid var(--edge);padding:12px 20px 20px;gap:2px}
  .nav.open{display:flex}
  .nav a{font-size:18px;padding:12px 14px}
  .menu-btn{display:inline-grid;margin-left:auto}
  .head-cta .btn{display:none}
}

/* ---------- Buttons ---------- */
.btn{--bg:var(--tang);--fg:#1B0B02;display:inline-flex;align-items:center;justify-content:center;gap:10px;font:800 16px/1 var(--body);padding:15px 22px;border-radius:99px;border:2.5px solid var(--edge);background:var(--bg);color:var(--fg);text-decoration:none;box-shadow:var(--shadow);cursor:pointer;transition:transform .18s cubic-bezier(.3,1.6,.5,1),box-shadow .18s}
.btn:hover{transform:translate(-2px,-3px) rotate(-1deg);box-shadow:6px 7px 0 var(--drop)}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--drop)}
.btn.mint{--bg:var(--mint)}
.btn.ghost{--bg:var(--surface);--fg:var(--ink)}
.btn.sm{padding:10px 16px;font-size:14px}
.band.night .btn.ghost{--bg:transparent;--fg:var(--on-night);border-color:var(--on-night)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* ---------- Stickers, chips, badges ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;font:800 12px/1 var(--body);padding:6px 10px;border-radius:99px;border:2px solid currentColor;white-space:nowrap}
.chip.and{color:var(--ok)}
.chip.ios{color:#2B6FD6}
.chip.plan{color:var(--tang-ink)}
.chip.soon{color:var(--muted);border-style:dashed}
.chips{display:flex;flex-wrap:wrap;gap:6px}
:root[data-theme="dark"] .chip.ios{color:#8DB8FF}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .chip.ios{color:#8DB8FF}}

.sticker{position:absolute;z-index:3;font:800 14px/1.1 var(--body);padding:10px 14px;border:2.5px solid var(--edge);border-radius:14px;background:var(--sun);color:#0B2A23;box-shadow:var(--shadow);animation:wiggle 4.5s ease-in-out infinite}
.sticker.mint{background:var(--mint)} .sticker.berry{background:var(--berry)} .sticker.sky{background:var(--sky)} .sticker.lilac{background:var(--lilac)}

/* ---------- Cards ---------- */
.card{background:var(--surface);border:2.5px solid var(--edge);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:26px;display:grid;gap:12px;align-content:start;transition:transform .25s cubic-bezier(.3,1.5,.5,1),box-shadow .25s}
.card.lift:hover{transform:translate(-3px,-5px) rotate(-.6deg);box-shadow:var(--shadow-lg)}
.card .ic-badge{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;border:2.5px solid var(--edge);color:#0B2A23;box-shadow:3px 3px 0 var(--drop)}
.bg-sun{background:var(--sun)} .bg-mint{background:var(--mint)} .bg-sky{background:var(--sky)} .bg-berry{background:var(--berry)} .bg-tang{background:var(--tang)} .bg-lilac{background:var(--lilac)} .bg-leaf{background:var(--leaf)}
.card p{color:var(--ink-2);font-size:16px}
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}

.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center}
.split.flip > :first-child{order:2}
@media (max-width:900px){.split{grid-template-columns:minmax(0,1fr);gap:40px}.split.flip > :first-child{order:0}}

/* ---------- Placeholders (wireframe image boxes) ---------- */
.ph{display:grid;place-items:center;text-align:center;min-height:220px;border:2.5px dashed var(--edge);border-radius:var(--r-lg);color:var(--muted);font:600 13px/1.4 var(--mono);padding:20px;background:repeating-linear-gradient(45deg,transparent 0 12px,color-mix(in srgb,var(--mint) 22%,transparent) 12px 24px)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding-block:72px 96px}
.hero .split{align-items:center}
.hero h1 .row{display:block}
.hero .lede{max-width:52ch}
.hero-proof{display:flex;flex-wrap:wrap;gap:10px 22px;font-weight:700;font-size:15px;color:var(--ink-2)}
.hero-proof span{display:inline-flex;align-items:center;gap:8px}
.hero-proof .ic{width:20px;height:20px;color:var(--leaf)}
.page-hero{position:relative;overflow:hidden;padding-block:64px 72px}
.page-hero .stack{max-width:780px}

/* Blobs: soft animated shapes behind heroes */
.blob{position:absolute;z-index:0;filter:blur(2px);opacity:.55;border-radius:42% 58% 63% 37% / 41% 44% 56% 59%;animation:blob 16s ease-in-out infinite}
.blob.b1{width:420px;height:420px;background:var(--mint);top:-120px;right:-80px}
.blob.b2{width:260px;height:260px;background:var(--sun);bottom:-90px;left:-60px;animation-delay:-5s;opacity:.4}
.blob.b3{width:180px;height:180px;background:var(--sky);top:40%;left:46%;animation-delay:-9s;opacity:.3}
.hero > .wrap,.page-hero > .wrap{position:relative;z-index:1}

/* ---------- Phone mock ---------- */
.phone-stage{position:relative;display:grid;place-items:center;min-height:560px}
.phone{position:relative;width:290px;max-width:100%;aspect-ratio:9/18.6;border-radius:46px;border:10px solid #06140F;background:linear-gradient(170deg,#0F3A30,#0B2A23 55%,#082019);box-shadow:10px 12px 0 var(--drop);overflow:hidden;color:#EAFBF4;animation:float 6s ease-in-out infinite}
.phone::before{content:"";position:absolute;top:10px;left:50%;translate:-50% 0;width:88px;height:24px;background:#06140F;border-radius:99px;z-index:4}
.phone .status{display:flex;justify-content:space-between;padding:14px 22px 0;font:700 12px var(--body);opacity:.85}
.phone .brand{padding:22px 20px 0;font:800 13px var(--display);letter-spacing:.28em}
.phone .brand i{color:var(--tang);font-style:normal}
.ring{--p:100;width:150px;height:150px;margin:22px auto 8px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--mint) calc(var(--p)*1%),rgba(255,255,255,.08) 0);animation:ringfill 2.2s cubic-bezier(.2,.8,.2,1) both}
.ring > div{width:120px;height:120px;border-radius:50%;background:#0B2A23;display:grid;place-items:center;text-align:center}
.ring b{display:block;font:800 44px/1 var(--display)}
.ring small{font:800 9px var(--body);letter-spacing:.2em;opacity:.7}
.phone .ok{text-align:center;color:var(--mint);font:800 16px var(--display)}
.phone .mini{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:14px 16px}
.phone .mini div{background:rgba(255,255,255,.07);border-radius:14px;padding:10px 4px;text-align:center;font-size:10px;line-height:1.2;opacity:.9}
.phone .mini b{display:block;font:800 18px var(--display)}
/* notifications that pop over the phone */
.toasts{position:absolute;inset:auto 0 18px 0;display:grid;gap:8px;padding:0 10px;z-index:5}
.toast{background:#FFFFFF;color:#0B2A23;border-radius:16px;padding:10px 12px;font-size:12px;line-height:1.35;box-shadow:0 8px 20px rgba(0,0,0,.25);display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:start;animation:toast 9s cubic-bezier(.3,1.4,.5,1) infinite both}
.toast:nth-child(2){animation-delay:1.1s}
.toast:nth-child(3){animation-delay:2.2s}
.toast .dot{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:#fff}
.toast .dot .ic{width:16px;height:16px}
.toast b{display:block;font-size:12.5px}
.toast small{display:block;opacity:.6;font-size:10px;font-weight:700;letter-spacing:.06em}

/* ---------- Marquee of scam names ---------- */
.marquee{overflow:hidden;border-block:2.5px solid var(--edge);background:var(--tang);color:#1B0B02;padding-block:14px;transform:rotate(-1.2deg);margin-block:-6px}
.marquee .track{display:flex;gap:40px;width:max-content;animation:marquee 32s linear infinite;font:800 22px/1 var(--display);white-space:nowrap}
.marquee .track span{display:inline-flex;align-items:center;gap:40px}
.marquee .track span::after{content:"";width:12px;height:12px;border-radius:50%;background:#0B2A23}

/* ---------- Steps (a real sequence, so numbered) ---------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;counter-reset:s}
.step{counter-increment:s;display:grid;gap:10px;align-content:start;position:relative;padding-top:64px}
.step::before{content:counter(s);position:absolute;top:0;left:0;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font:800 22px var(--display);background:var(--mint);color:#0B2A23;border:2.5px solid var(--edge);box-shadow:3px 3px 0 var(--drop)}
.step:nth-child(2)::before{background:var(--sun)} .step:nth-child(3)::before{background:var(--sky)} .step:nth-child(4)::before{background:var(--tang)}
.step p{font-size:16px;color:var(--ink-2)}
.band.night .step p{color:var(--on-night-2)}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* ---------- Scan demo ("inside a tip-off") ---------- */
.scan{position:relative;background:#FFFFFF;color:#0B2A23;border-radius:22px;padding:18px 18px 16px;border:2.5px solid var(--edge);box-shadow:var(--shadow-lg);overflow:hidden;max-width:420px;width:100%}
.scan .from{font:800 12px var(--body);letter-spacing:.06em;color:#557068}
.scan .msg{font-size:17px;margin-top:6px}
.scan .msg mark{background:transparent;color:inherit;border-radius:4px;animation:markbad 6s ease-in-out infinite}
.scan::after{content:"";position:absolute;left:0;right:0;height:46px;top:-46px;background:linear-gradient(transparent,rgba(127,224,196,.55));animation:scanline 6s ease-in-out infinite}
.flags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.flag{font:800 12px var(--body);padding:6px 10px;border-radius:99px;background:#FFE1DE;color:#B42318;border:2px solid #B42318;animation:pop 6s ease-in-out infinite both}
.flag:nth-child(2){animation-delay:.25s} .flag:nth-child(3){animation-delay:.5s}
.verdict{margin-top:14px;display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:#B42318;color:#fff;font:800 16px var(--display);animation:pop 6s ease-in-out infinite both;animation-delay:.8s}
.verdict .ic{width:20px;height:20px}
.meta-row{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:6px}
.meta-row span{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14px}
.meta-row .ic{width:18px;height:18px;color:var(--mint)}

/* ---------- Pricing ---------- */
.price{position:relative}
.price .amt{font:800 52px/1 var(--display);letter-spacing:-.03em}
.price .amt small{font:700 16px var(--body);color:var(--muted);letter-spacing:0}
.price ul{list-style:none;padding:0;display:grid;gap:10px}
.price li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;font-size:16px}
.price li .ic{width:20px;height:20px;color:var(--leaf);margin-top:3px}
.price.best{background:var(--night);color:var(--on-night);transform:rotate(-1deg)}
.price.best p,.price.best .amt small{color:var(--on-night-2)}
.price.best li .ic{color:var(--mint)}
.price .ribbon{position:absolute;top:-16px;right:20px;transform:rotate(4deg)}
.price .btn{margin-top:auto}

/* ---------- Tables ---------- */
.tbl{overflow-x:auto;border:2.5px solid var(--edge);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow)}
table{border-collapse:collapse;width:100%;font-size:15px}
th,td{padding:14px 16px;text-align:left;border-bottom:1.5px solid var(--hair);vertical-align:top}
th{font:800 12px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--paper-2)}
tr:last-child td{border-bottom:0}
td .ic{width:20px;height:20px}
td.yes{color:var(--ok)} td.no{color:var(--muted)}
.num{font-variant-numeric:tabular-nums}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:12px;max-width:820px}
.faq details{background:var(--surface);border:2.5px solid var(--edge);border-radius:18px;box-shadow:3px 3px 0 var(--drop);padding:0 20px}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;font:700 18px var(--display);padding-block:18px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:800 26px/1 var(--display);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details > div{padding-bottom:18px;color:var(--ink-2)}

/* ---------- CTA band ---------- */
.wave{display:block;width:100%;height:60px;color:var(--night)}
.wave.flip{transform:scaleY(-1)}
.wave path{fill:currentColor}
.cta-band{background:var(--night);color:var(--on-night);text-align:center;padding-block:40px 96px}
.cta-band .stack{justify-items:center}
.cta-band p{color:var(--on-night-2)}
.store-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.store{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:14px;border:2px solid var(--on-night-2);color:var(--on-night);text-decoration:none;font-weight:700;font-size:14px}
.store b{display:block;font:800 17px var(--display)}

/* ---------- Footer ---------- */
.site-foot{background:var(--night);color:var(--on-night-2);padding-block:0 40px;font-size:15px}
.site-foot .top{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px;padding-block:48px;border-top:1.5px solid rgba(255,255,255,.12)}
.site-foot h4{color:var(--on-night);font-size:15px;margin-bottom:12px}
.site-foot ul{list-style:none;padding:0;display:grid;gap:8px}
.site-foot a{text-decoration:none}
.site-foot a:hover{color:var(--mint)}
.site-foot .logo{color:var(--on-night)}
.site-foot .fine{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:13px;opacity:.8}
@media (max-width:800px){.site-foot .top{grid-template-columns:1fr 1fr}}

/* ---------- Filters (features page) ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px}
.filters button{font:800 15px var(--body);padding:10px 16px;border-radius:99px;border:2.5px solid var(--edge);background:var(--surface);color:var(--ink);cursor:pointer;box-shadow:2px 2px 0 var(--drop);transition:transform .15s}
.filters button:hover{transform:translateY(-2px)}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.feat .meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:6px}

/* ---------- Split parent/child view (kids page) ---------- */
.sees{display:grid;grid-template-columns:1fr 1fr;border:2.5px solid var(--edge);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.sees > div{padding:24px;display:grid;gap:12px;align-content:start;background:var(--surface)}
.sees > div + div{border-left:2.5px solid var(--edge);background:var(--paper-2)}
.sees .row{display:flex;gap:10px;align-items:center;font-size:15px}
.sees .row .ic{width:20px;height:20px}
.sees .yes{color:var(--ok)} .sees .no{color:var(--bad)}
@media (max-width:700px){.sees{grid-template-columns:1fr}.sees > div + div{border-left:0;border-top:2.5px solid var(--edge)}}

.alert-card{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;background:var(--surface);border:2.5px solid var(--edge);border-radius:18px;padding:14px 16px;box-shadow:3px 3px 0 var(--drop)}
.alert-card .ic-badge{width:44px;height:44px;border-radius:14px;box-shadow:none}
.alert-card small{color:var(--muted);font-weight:700}
.pill{font:800 12px var(--body);padding:5px 10px;border-radius:99px}
.pill.bad{background:var(--bad-soft);color:var(--bad)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.ok{background:var(--ok-soft);color:var(--ok)}

/* screen-time bars */
.bars{display:grid;gap:12px}
.bar-row{display:grid;grid-template-columns:110px 1fr 58px;gap:12px;align-items:center;font-weight:700;font-size:14px}
.bar-track{height:18px;border-radius:99px;background:var(--paper-2);border:2px solid var(--edge);overflow:hidden}
.bar-fill{height:100%;width:var(--w);border-radius:99px;background:var(--c,var(--mint));transform-origin:left;animation:grow 1.6s cubic-bezier(.2,.8,.2,1) both}

/* chat bubbles (Ask family flow) */
.chat{display:grid;gap:12px;max-width:440px}
.bubble{padding:12px 16px;border-radius:20px;border:2.5px solid var(--edge);box-shadow:3px 3px 0 var(--drop);font-size:16px;max-width:88%;animation:bubble .6s cubic-bezier(.3,1.5,.5,1) both}
.bubble.me{background:var(--surface);justify-self:start;border-bottom-left-radius:6px}
.bubble.them{background:var(--mint);color:#0B2A23;justify-self:end;border-bottom-right-radius:6px}
.bubble small{display:block;font-weight:800;font-size:11px;letter-spacing:.08em;opacity:.65;margin-bottom:2px}
.bubble:nth-child(2){animation-delay:.3s}.bubble:nth-child(3){animation-delay:.6s}.bubble:nth-child(4){animation-delay:.9s}
.choice{display:flex;gap:8px;margin-top:8px}
.choice span{font:800 13px var(--body);padding:6px 12px;border-radius:99px;border:2px solid #0B2A23;background:#fff;color:#0B2A23}
.choice span.go{background:var(--leaf);color:#fff}

/* pipeline (how it works) */
.pipe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;position:relative}
.pipe .node{display:grid;gap:8px;align-content:start;padding:22px;border:2.5px solid var(--edge);background:var(--surface);position:relative}
.pipe .node:first-child{border-radius:var(--r-lg) 0 0 var(--r-lg)}
.pipe .node:last-child{border-radius:0 var(--r-lg) var(--r-lg) 0}
.pipe .node + .node{border-left:0}
.pipe .node .t{font:800 12px var(--mono);color:var(--tang-ink)}
.pipe .node p{font-size:15px;color:var(--ink-2)}
.pipe .pulse{position:absolute;top:-7px;left:0;width:14px;height:14px;border-radius:50%;background:var(--tang);border:2px solid var(--edge);animation:travel 5s linear infinite;z-index:2}
@media (max-width:900px){.pipe{grid-template-columns:1fr 1fr}.pipe .node{border-radius:0!important;border-left:2.5px solid var(--edge)!important}.pipe .pulse{display:none}}
@media (max-width:520px){.pipe{grid-template-columns:1fr}}

/* checker widget (resources page) */
.checker{display:grid;gap:14px}
.checker textarea{width:100%;min-height:130px;resize:vertical;font:500 16px/1.5 var(--body);padding:14px 16px;border-radius:16px;border:2.5px solid var(--edge);background:var(--surface);color:var(--ink)}
.result{border:2.5px solid var(--edge);border-radius:16px;padding:16px;display:grid;gap:8px;background:var(--surface)}
.result.bad{background:var(--bad-soft)} .result.warn{background:var(--warn-soft)} .result.ok{background:var(--ok-soft)}
.result h4{display:flex;align-items:center;gap:8px}
.result ul{padding-left:20px;color:var(--ink-2);font-size:15px}

/* forms */
.form{display:grid;gap:14px}
.form label{display:grid;gap:6px;font-weight:800;font-size:14px}
.form input,.form select,.form textarea{font:500 16px var(--body);padding:12px 14px;border-radius:14px;border:2.5px solid var(--edge);background:var(--surface);color:var(--ink)}
.form textarea{min-height:120px;resize:vertical}

.copy-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.copy-row code{font:600 15px var(--mono);background:var(--paper-2);padding:6px 10px;border-radius:10px;border:2px solid var(--hair);user-select:all}

/* ---------- Reveal on scroll (content stays visible; only moves) ---------- */
.rv.pre{transform:translateY(28px) scale(.98)}
.rv{transition:transform .8s cubic-bezier(.2,.9,.25,1.2)}

/* ---------- Keyframes ---------- */
@keyframes float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-14px) rotate(1deg)}}
@keyframes wiggle{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(3deg) translateY(-4px)}}
@keyframes blob{0%,100%{border-radius:42% 58% 63% 37%/41% 44% 56% 59%;transform:translate(0,0) rotate(0)}33%{border-radius:58% 42% 38% 62%/55% 38% 62% 45%;transform:translate(20px,-16px) rotate(20deg)}66%{border-radius:38% 62% 52% 48%/38% 60% 40% 62%;transform:translate(-14px,12px) rotate(-12deg)}}
@keyframes ringfill{from{--p:0}}
@property --p{syntax:"<number>";inherits:false;initial-value:100}
@keyframes toast{0%{transform:translateY(30px) scale(.9);opacity:0}6%,78%{transform:none;opacity:1}88%,100%{transform:translateY(-8px) scale(.96);opacity:0}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes scanline{0%{top:-46px}35%{top:100%}100%{top:100%}}
@keyframes markbad{0%,30%{background:transparent}40%,90%{background:#FFD6D1}100%{background:transparent}}
@keyframes pop{0%,38%{transform:scale(.6);opacity:.25}46%{transform:scale(1.08);opacity:1}52%,92%{transform:scale(1);opacity:1}100%{transform:scale(.95);opacity:.25}}
@keyframes grow{from{transform:scaleX(0)}}
@keyframes bubble{from{transform:translateY(16px) scale(.9)}}
@keyframes travel{0%{left:0}100%{left:calc(100% - 14px)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv.pre{transform:none}
}

/* ---------- Footer wave: hide when the page already ends on a night CTA band ---------- */
main:has(> .cta-band:last-child) ~ .wave{display:none}

/* ==========================================================================
   Mobile responsive: tablets (≤ 900px) and phones (≤ 560px / ≤ 400px)
   Grids already collapse above; this block tunes spacing, type and motion
   pieces so nothing overflows on a 360–414px screen.
   ========================================================================== */
@media (max-width:900px){
  .band{padding-block:68px}
  .hero{padding-block:48px 72px}
  .phone-stage{min-height:520px}
  .price.best{transform:none}
}
@media (max-width:560px){
  body{font-size:16px}
  .wrap{padding-inline:16px}
  .band{padding-block:56px}
  .band.tight{padding-block:40px}
  .hero{padding-block:36px 56px}
  .page-hero{padding-block:44px 48px}
  h1{font-size:clamp(36px,11vw,48px)}
  h2{font-size:clamp(28px,8.4vw,36px)}
  .stack-lg{gap:28px}
  .grid{gap:18px}
  .card{padding:20px;border-radius:20px}
  .btn{padding:14px 18px;font-size:15px}
  .btn-row .btn{flex:1 1 100%}                 /* full-width tap targets */
  .hero-proof{gap:8px 16px;font-size:14px}
  .phone-stage{min-height:480px}
  .phone{width:250px;border-width:8px;border-radius:40px}
  .ring{width:128px;height:128px}.ring > div{width:102px;height:102px}.ring b{font-size:38px}
  .sticker{font-size:12px;padding:8px 10px}
  .blob.b1{width:260px;height:260px}.blob.b3{display:none}
  .marquee .track{font-size:18px;gap:28px}.marquee .track span{gap:28px}
  .scan{padding:16px}.scan .msg{font-size:16px}
  .price .amt{font-size:42px}
  .price .ribbon{right:12px}
  .steps{gap:28px}
  .sees > div{padding:18px}
  .alert-card{grid-template-columns:auto 1fr;}
  .alert-card .pill{grid-column:2;justify-self:start}
  .bar-row{grid-template-columns:78px 1fr 48px;gap:8px;font-size:13px}
  .faq summary{font-size:16px}
  .site-head .wrap{min-height:62px}
  .logo svg{height:28px}
  .site-foot .top{grid-template-columns:1fr 1fr;gap:24px}
  .site-foot .top > :first-child{grid-column:1/-1}
  .cta-band{padding-block:28px 72px}
  .store{flex:1 1 100%;justify-content:center}
  /* toolbar: page links scroll sideways instead of wrapping into 3 lines */
  .wf-bar .wrap{flex-wrap:nowrap}
  .wf-bar .wf-pages{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .wf-bar .wf-pages::-webkit-scrollbar{display:none}
  .wf-bar a{white-space:nowrap}
  .wf-bar > .wrap > b{display:none}
  th,td{padding:12px}
  table{font-size:14px}
}
@media (max-width:400px){
  .filters button{font-size:14px;padding:8px 12px}
  .chip{font-size:11px}
  .copy-row code{font-size:13px}
}
/* Touch screens: no hover tilt, keep press feedback */
@media (hover:none){
  .card.lift:hover,.btn:hover{transform:none;box-shadow:var(--shadow)}
}

/* ==========================================================================
   Device ranges (tested widths in brackets)
   Phones        ≤ 560px   (360, 390, 414)          rules above
   Tablets       561–1060  (iPad mini 768, iPad 820/834, iPad landscape 1024)
   Laptops       1061–1599 (1280, 1366, 1440)
   Large PCs     ≥ 1600    (1680, 1920, 2560)
   ========================================================================== */

/* Tablets: 2-column grids; an odd last card spans the full row instead of sitting alone */
@media (min-width:561px) and (max-width:980px){
  .g3 > :last-child:nth-child(odd),
  .g4 > :last-child:nth-child(odd){grid-column:1/-1}
  .g3 > .price:last-child:nth-child(odd){max-width:560px;justify-self:center;width:100%}
}
@media (min-width:561px) and (max-width:1060px){
  .wrap{padding-inline:32px}
  .hero .lede{max-width:60ch}
  .phone-stage{min-height:540px}
  .steps{gap:32px 24px}
  .pipe .node{padding:20px}
}
/* iPad landscape / small laptops: keep the side-by-side hero but tighten it */
@media (min-width:901px) and (max-width:1180px){
  .split{gap:40px}
  h1{font-size:clamp(44px,6vw,68px)}
  .phone{width:270px}
}
/* Laptops */
@media (min-width:1061px) and (max-width:1599px){
  .wrap{padding-inline:32px}
}
/* Large PCs and external monitors: wider canvas, slightly larger type, bigger phone */
@media (min-width:1600px){
  :root{--max:1340px}
  body{font-size:18px}
  .wrap{padding-inline:40px}
  .band{padding-block:112px}
  .hero{padding-block:96px 120px}
  .phone{width:320px}
  .phone-stage{min-height:640px}
  .card{padding:30px}
}
/* Short landscape phones: don't let the phone mock fill the whole screen */
@media (max-height:520px) and (orientation:landscape){
  .phone-stage{min-height:420px}
  .phone{width:210px}
}

/* ==========================================================================
   Fluid type & spacing scale (last in the file, so it wins)
   Sizes grow smoothly with screen width: first value = phone (360px),
   last value = large PC (≈1900px+). Change a token here to retune everywhere.
   ========================================================================== */
:root{
  --fs-small: clamp(13px, 0.78rem + 0.15vw, 14.5px);
  --fs-body:  clamp(16px, 0.94rem + 0.22vw, 18px);
  --fs-lede:  clamp(17px, 0.98rem + 0.5vw, 22px);
  --fs-btn:   clamp(15px, 0.9rem + 0.15vw, 17px);
  --fs-h4:    clamp(16px, 0.95rem + 0.3vw, 19px);
  --fs-h3:    clamp(19px, 1.05rem + 0.45vw, 24px);
  --fs-h2:    clamp(28px, 1.2rem + 2.7vw, 56px);
  --fs-h1:    clamp(36px, 1.45rem + 4.8vw, 88px);
  --fs-price: clamp(40px, 2rem + 1.6vw, 56px);
  --fs-marq:  clamp(17px, 1rem + 0.6vw, 24px);
  --band:     clamp(56px, 2.8rem + 5vw, 116px);
}
body{font-size:var(--fs-body)}
h1{font-size:var(--fs-h1);line-height:1.02}
h2{font-size:var(--fs-h2);line-height:1.06}
h3{font-size:var(--fs-h3)}
h4{font-size:var(--fs-h4)}
.lede{font-size:var(--fs-lede);line-height:1.55}
.small,.hero-proof,.meta-row span,.site-foot{font-size:var(--fs-small)}
.card p,.step p,.pipe .node p,.price li,.faq details > div{font-size:calc(var(--fs-body) - 1px)}
.btn{font-size:var(--fs-btn)}
.btn.sm{font-size:calc(var(--fs-btn) - 2px)}
.price .amt{font-size:var(--fs-price)}
.marquee .track{font-size:var(--fs-marq)}
.band{padding-block:var(--band)}
.band.tight{padding-block:calc(var(--band) * .62)}
table{font-size:calc(var(--fs-body) - 2px)}
/* Keep long headline words from overflowing narrow phones */
h1,h2{overflow-wrap:anywhere;hyphens:auto}

/* ==========================================================================
   v2 PROFESSIONAL LAYER (26 Sep 2026)
   Design footprint taken from a study of leading consumer-safety sites
   (e.g. aura.com): warm neutral ground, near-black ink, hairline borders
   instead of chunky outlines, soft shadows instead of hard offsets, a light
   serif for section headings over a clean grotesk, pill buttons, 24px cards,
   ~73rem content width and generous section spacing.
   It sits last in the file so it overrides the v1 "funky" layer above and
   turns it into a calm, professional site: one accent colour, no stickers,
   no looping or wobbling motion.
   Delete this block to return to v1.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  --paper:#FEFBF2;        /* warm off-white ground */
  --paper-2:#F5F2EA;      /* alternate band */
  --surface:#FFFFFF;
  --ink:#161616;          /* near-black text */
  --ink-2:#2E333A;
  --muted:#636870;        /* paragraph grey */
  --hair:rgba(22,22,22,.12);
  --edge:rgba(22,22,22,.14);
  --drop:transparent;     /* switches off every v1 hard offset shadow */
  --night:#10211C;        /* deep brand green, used for dark bands */
  --night-2:#173029;
  --on-night:#F4FBF8;
  --on-night-2:#B9D3C9;
  --tang-ink:#B8470B;
  --display:"Inter Tight","Inter",system-ui,sans-serif;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Inter","Segoe UI","Nirmala UI","Noto Sans Devanagari",system-ui,-apple-system,sans-serif;
  --shadow:0 1px 2px rgba(22,22,22,.04),0 14px 34px -18px rgba(22,22,22,.18);
  --shadow-lg:0 2px 4px rgba(22,22,22,.04),0 30px 60px -28px rgba(22,22,22,.32);
  --r-xl:32px; --r-lg:24px; --r-md:16px; --r-sm:10px;
  --max:73rem;
  --ease:cubic-bezier(.16,1,.3,1);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#111113; --paper-2:#17171A; --surface:#1C1C20;
    --ink:#F2F2F4; --ink-2:#CFCFD6; --muted:#9C9CA6;
    --hair:rgba(255,255,255,.1); --edge:rgba(255,255,255,.12); --drop:transparent;
    --night:#0A1512; --night-2:#10201B; --tang-ink:#FF9A52;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 14px 34px -18px rgba(0,0,0,.6);
    --shadow-lg:0 30px 60px -28px rgba(0,0,0,.75);
  }
}
:root[data-theme="dark"]{
  --paper:#111113; --paper-2:#17171A; --surface:#1C1C20;
  --ink:#F2F2F4; --ink-2:#CFCFD6; --muted:#9C9CA6;
  --hair:rgba(255,255,255,.1); --edge:rgba(255,255,255,.12); --drop:transparent;
  --night:#0A1512; --night-2:#10201B; --tang-ink:#FF9A52;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 14px 34px -18px rgba(0,0,0,.6);
  --shadow-lg:0 30px 60px -28px rgba(0,0,0,.75);
}

/* ---------- Type ---------- */
body{font-family:var(--body);line-height:1.55;letter-spacing:-.005em;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}
h1{font-family:var(--display);font-weight:600;letter-spacing:-.035em;line-height:1.02}
h2{font-family:var(--serif);font-weight:300;letter-spacing:-.02em;line-height:1.1;font-variation-settings:"opsz" 96}
h3{font-family:var(--body);font-weight:600;letter-spacing:-.015em;line-height:1.25}
h4{font-family:var(--body);font-weight:600;letter-spacing:-.01em}
p{text-wrap:pretty}
.lede{color:var(--muted);line-height:1.5}
.band.night .lede,.band.night .muted{color:var(--on-night-2)}
.hl{background:none;padding:0;font-style:italic;color:var(--tang-ink)}
.band.night .hl{background:none;color:#FFB27A}
h1 .hl,h2 .hl{font-family:var(--serif);font-weight:300}
:focus-visible{outline:2px solid var(--tang);outline-offset:3px}

/* ---------- Layout rhythm ---------- */
.wrap{max-width:calc(var(--max) + 64px);padding-inline:32px}
.band{padding-block:clamp(64px,4rem + 3vw,112px)}
.band.tight{padding-block:clamp(48px,3rem + 2vw,80px)}
.stack{gap:20px}
.stack-lg{gap:clamp(40px,2rem + 2vw,64px)}
.split{gap:clamp(40px,2rem + 5vw,120px)}

/* ---------- Eyebrow: a quiet label with a coloured dot ---------- */
.eyebrow{transform:none;border:0;background:none;box-shadow:none;padding:0;color:var(--muted);font:600 13px/1 var(--body);letter-spacing:.1em;gap:10px}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--tang)}
.eyebrow.mint::before{background:var(--leaf)} .eyebrow.sky::before{background:var(--sky)} .eyebrow.berry::before{background:var(--berry)}
.eyebrow.mint,.eyebrow.berry,.eyebrow.sky{background:none}
.band.night .eyebrow,.cta-band .eyebrow{color:var(--on-night-2)}

/* ---------- Header ---------- */
.site-head{background:color-mix(in srgb,var(--paper) 86%,transparent);border-bottom:1px solid var(--hair)}
.site-head .wrap{min-height:72px}
.logo svg{height:20px}
.nav{gap:2px}
.nav a{font-weight:500;font-size:15px;color:var(--ink-2);padding:8px 14px;position:relative}
.nav a:hover{background:none;color:var(--ink)}
.nav a[aria-current="page"]{background:none;color:var(--ink)}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:1.5px;background:var(--tang);border-radius:2px}
.icon-btn{border:1px solid var(--edge);border-radius:999px;box-shadow:none;background:transparent;width:40px;height:40px;transition:background .2s,border-color .2s}
.icon-btn:hover{background:var(--paper-2);border-color:var(--ink)}
.icon-btn .ic{width:18px;height:18px}
.theme-btn .i-sun{display:none}
:root[data-theme="dark"] .theme-btn .i-sun{display:inline-block}
:root[data-theme="dark"] .theme-btn .i-moon{display:none}
@media (max-width:1060px){
  .nav{border-bottom:1px solid var(--hair);box-shadow:var(--shadow)}
  .nav a[aria-current="page"]::after{left:14px;right:auto;width:24px;bottom:6px}
}

/* ---------- Buttons: pill, hairline, no hard shadow ---------- */
.btn{--bg:var(--ink);--fg:var(--paper);font:600 var(--fs-btn,16px)/1 var(--body);letter-spacing:-.005em;padding:15px 26px;border:1px solid var(--bg);box-shadow:none;transition:transform .25s var(--ease),background .2s,color .2s,border-color .2s}
.btn:hover{transform:translateY(-1px);box-shadow:none;background:color-mix(in srgb,var(--bg) 88%,var(--paper))}
.btn:active{transform:translateY(0);box-shadow:none}
.btn.ghost{--bg:transparent;--fg:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn.mint{--bg:var(--tang);--fg:#1B0B02}
.btn.sm{padding:10px 18px}
.btn .ic{width:18px;height:18px;transition:transform .25s var(--ease)}
.btn:hover .ic{transform:translateX(3px)}
.band.night .btn.ghost,.cta-band .btn.ghost{--fg:var(--on-night);border-color:var(--on-night)}
.band.night .btn.ghost:hover{background:var(--on-night);color:var(--night)}

/* ---------- Chips and floating labels ---------- */
.chip{border-width:1px;font:600 12px/1 var(--body);padding:6px 10px}
.sticker{border:1px solid var(--hair);background:var(--surface);color:var(--ink);box-shadow:var(--shadow);border-radius:999px;font:600 13px/1.1 var(--body);padding:10px 14px 10px 12px;display:inline-flex;align-items:center;gap:8px;animation:drift 7s ease-in-out infinite}
.sticker::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--tang);flex:none}
.sticker.mint::before{background:var(--leaf)} .sticker.berry::before{background:var(--berry)} .sticker.sky::before{background:var(--sky)} .sticker.lilac::before{background:var(--lilac)}
.sticker.mint,.sticker.berry,.sticker.sky,.sticker.lilac{background:var(--surface)}

/* ---------- Cards: hairline, 24px, soft lift ---------- */
.card{border:1px solid var(--hair);box-shadow:none;padding:28px;gap:14px;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.card.lift:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card .ic-badge{width:48px;height:48px;border-radius:14px;border:0;box-shadow:none;color:var(--ink)}
.card p{color:var(--muted)}
.bg-sun{background:color-mix(in srgb,var(--sun) 30%,var(--surface))}
.bg-mint{background:color-mix(in srgb,var(--mint) 38%,var(--surface))}
.bg-sky{background:color-mix(in srgb,var(--sky) 26%,var(--surface))}
.bg-berry{background:color-mix(in srgb,var(--berry) 26%,var(--surface))}
.bg-tang{background:color-mix(in srgb,var(--tang) 24%,var(--surface))}
.bg-lilac{background:color-mix(in srgb,var(--lilac) 30%,var(--surface))}
.bg-leaf{background:color-mix(in srgb,var(--leaf) 26%,var(--surface))}
.toast .dot.bg-tang{background:var(--tang)} .toast .dot.bg-leaf{background:var(--leaf)}
.ph{border:1px dashed var(--edge);background:repeating-linear-gradient(45deg,transparent 0 12px,color-mix(in srgb,var(--ink) 4%,transparent) 12px 24px);font:500 12px/1.4 var(--mono)}

/* ---------- Hero: aurora glow instead of wobbling blobs ---------- */
.blob{filter:blur(60px);opacity:.45;border-radius:50%;animation:aurora 22s ease-in-out infinite;will-change:transform}
.blob.b1{background:radial-gradient(circle,var(--mint),transparent 70%)}
.blob.b2{background:radial-gradient(circle,#FFD7B5,transparent 70%);opacity:.6}
.blob.b3{background:radial-gradient(circle,var(--sky),transparent 70%);opacity:.25}
.hero-proof{font-weight:500;color:var(--muted)}
.hero-proof .ic{color:var(--leaf)}
.phone{border-width:8px;border-color:#0C0C0E;box-shadow:0 50px 90px -40px rgba(16,33,28,.55),0 0 0 1px rgba(255,255,255,.06) inset;animation:float2 8s ease-in-out infinite}

/* ---------- Marquee: calm serif ticker ---------- */
.marquee{transform:none;margin:0;background:transparent;color:var(--ink);border-block:1px solid var(--hair);padding-block:22px}
.marquee .track{font:300 italic var(--fs-marq,22px)/1 var(--serif);animation-duration:48s}
.marquee .track span::after{width:6px;height:6px;background:var(--tang)}

/* ---------- Steps: numbered rows with a hairline (sequence matters) ---------- */
.step{border-top:1px solid var(--edge);padding-top:22px;gap:10px}
.step::before{content:counter(s,decimal-leading-zero);position:static;width:auto;height:auto;display:block;border:0;box-shadow:none;background:none!important;color:var(--tang-ink);font:300 40px/1 var(--serif);border-radius:0}
.step p{color:var(--muted)}
.band.night .step{border-top-color:rgba(255,255,255,.14)}
.band.night .step::before{color:#FFB27A}

/* ---------- Scan demo ---------- */
.scan{border:1px solid var(--hair);box-shadow:var(--shadow-lg);border-radius:var(--r-lg)}
.flag{border:0;background:#FDE4E1;color:#A3261A;font:600 12px var(--body)}
.verdict{font:600 16px var(--body)}

/* ---------- Pricing ---------- */
.price{box-shadow:none}
.price .amt{font:500 var(--fs-price,52px)/1 var(--display);letter-spacing:-.04em}
.price.best{transform:none;border-color:var(--night);box-shadow:0 40px 80px -40px rgba(16,33,28,.6)}
.price .ribbon{transform:none;top:22px;right:22px;background:var(--tang);color:#1B0B02;border:0;box-shadow:none;animation:none;padding:7px 12px;font-size:12px}
.price .ribbon::before{display:none}

/* ---------- Tables, FAQ, forms and widgets: hairlines ---------- */
.tbl{border:1px solid var(--hair);box-shadow:none}
th{background:var(--paper-2);font:600 12px var(--body)}
th,td{border-bottom:1px solid var(--hair)}
.faq{gap:0}
.faq details{background:none;border:0;border-top:1px solid var(--edge);border-radius:0;box-shadow:none;padding:0}
.faq details:last-child{border-bottom:1px solid var(--edge)}
.faq summary{font:500 19px/1.3 var(--body);padding-block:22px}
.faq summary::after{font:300 28px/1 var(--body);color:var(--muted)}
.filters button{border:1px solid var(--edge);box-shadow:none;font:600 14px var(--body);transition:background .2s,color .2s,border-color .2s}
.filters button:hover{transform:none;border-color:var(--ink)}
.sees{border:1px solid var(--hair);box-shadow:none}
.sees > div + div{border-left:1px solid var(--hair)}
.alert-card{border:1px solid var(--hair);box-shadow:none}
.bar-track{border:0;background:color-mix(in srgb,var(--ink) 8%,transparent)}
.bubble{border:1px solid var(--hair);box-shadow:none}
.bubble.them{border-color:transparent}
.choice span{border-width:1px}
.pipe .node{border:1px solid var(--hair)}
.pipe .node + .node{border-left:0}
.pipe .pulse{border:0;box-shadow:0 0 0 4px color-mix(in srgb,var(--tang) 25%,transparent)}
.checker textarea,.form input,.form select,.form textarea{border:1px solid var(--edge);border-radius:14px;font-family:var(--body);transition:border-color .2s,box-shadow .2s}
.checker textarea:focus,.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--ink) 8%,transparent)}
.result{border:1px solid var(--hair)}
.form label{font-weight:600}
.copy-row code{border:1px solid var(--hair)}
@media (max-width:900px){.pipe .node{border-left:1px solid var(--hair)!important}}
@media (max-width:700px){.sees > div + div{border-top:1px solid var(--hair)}}

/* ---------- CTA band and footer ---------- */
.wave{display:none}
.cta-band{padding-block:clamp(72px,4rem + 4vw,128px)}
.store{border:1px solid rgba(255,255,255,.35);border-radius:14px;transition:background .2s,color .2s}
.store:hover{background:var(--on-night);color:var(--night)}
.site-foot{background:#141414;color:rgba(255,255,255,.66);padding-block:0 32px}
.site-foot .top{border-top:0;padding-block:72px 48px}
.site-foot h4{color:#fff;font-weight:600;font-size:14px;letter-spacing:.02em}
.site-foot a{transition:color .2s}
.site-foot a:hover{color:#fff}
.site-foot .logo{color:#fff}
.site-foot .legal-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;padding-block:22px;border-top:1px solid rgba(255,255,255,.12);font-size:13.5px}
.site-foot .legal-row a,.site-foot .legal-row button{color:rgba(255,255,255,.8);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.35)}
.site-foot .legal-row button{background:none;border:0;padding:0;font:inherit;cursor:pointer}
.site-foot .legal-row .copy{margin-right:auto;text-decoration:none}
.site-foot .fine{opacity:.6;padding-top:6px}

/* ---------- Reveal: smooth ease, no overshoot ---------- */
.rv{transition:transform .9s var(--ease)}
.rv.pre{transform:translateY(24px)}

/* ---------- Legal pages ---------- */
.legal-hero{padding-block:clamp(56px,3rem + 3vw,96px) clamp(32px,2rem + 1vw,48px);border-bottom:1px solid var(--hair)}
.legal-hero h1{font-family:var(--serif);font-weight:300;letter-spacing:-.025em}
.legal-meta{display:flex;flex-wrap:wrap;gap:8px 24px;color:var(--muted);font-size:14px}
.draft-note{display:flex;gap:10px;align-items:flex-start;background:color-mix(in srgb,var(--sun) 22%,var(--surface));border:1px solid color-mix(in srgb,var(--sun) 60%,transparent);border-radius:14px;padding:12px 16px;font-size:14px;color:var(--ink-2);max-width:760px}
.legal{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(32px,2rem + 3vw,96px);padding-block:clamp(40px,2rem + 2vw,72px) clamp(64px,4rem + 2vw,112px);align-items:start}
.toc{position:sticky;top:96px;display:grid;gap:2px;font-size:14px}
.toc b{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;font-weight:600}
.toc a{text-decoration:none;color:var(--muted);padding:6px 0 6px 12px;border-left:1px solid var(--hair);transition:color .2s,border-color .2s}
.toc a:hover,.toc a.on{color:var(--ink);border-left-color:var(--tang)}
.legal-body{max-width:760px;display:grid;gap:44px}
.legal-body section{display:grid;gap:14px;scroll-margin-top:96px}
.legal-body h2{font-size:clamp(26px,1.2rem + 1vw,34px)}
.legal-body h3{font-size:18px;margin-top:6px}
.legal-body p,.legal-body li{color:var(--ink-2);line-height:1.7;max-width:none}
.legal-body ul,.legal-body ol{padding-left:22px;display:grid;gap:8px}
.legal-body a{color:var(--tang-ink);text-underline-offset:3px}
.legal-body .tbl table{font-size:15px}
.legal-body .callout{border-left:2px solid var(--tang);padding:4px 0 4px 18px;color:var(--ink-2)}
@media (max-width:900px){.legal{grid-template-columns:1fr}.toc{position:static;grid-template-columns:1fr 1fr;gap:0 16px}}
@media (max-width:560px){.toc{grid-template-columns:1fr}}

/* ---------- Cookie consent ---------- */
.cookie{position:fixed;left:16px;bottom:16px;z-index:90;width:min(440px,calc(100% - 32px));background:var(--surface);color:var(--ink);border:1px solid var(--hair);border-radius:20px;box-shadow:0 30px 70px -20px rgba(0,0,0,.35);padding:22px;display:grid;gap:14px;transform:translateY(calc(100% + 32px));opacity:0;transition:transform .5s var(--ease),opacity .3s}
.cookie.show{transform:none;opacity:1}
.cookie h3{font-size:17px}
.cookie p{font-size:14.5px;color:var(--muted);line-height:1.55}
.cookie p a{color:var(--ink);text-underline-offset:3px}
.cookie .row{display:flex;flex-wrap:wrap;gap:8px}
.cookie .btn{padding:11px 16px;font-size:14px;flex:1 1 auto}
.cookie .link{background:none;border:0;padding:6px 2px;font:600 14px var(--body);color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cookie-prefs{display:none;gap:0;border-top:1px solid var(--hair)}
.cookie.open .cookie-prefs{display:grid}
.cookie-prefs label{display:grid;grid-template-columns:1fr auto;gap:4px 16px;align-items:center;padding:12px 0;border-bottom:1px solid var(--hair);cursor:pointer}
.cookie-prefs label b{font-size:14.5px;font-weight:600}
.cookie-prefs label small{grid-column:1;font-size:13px;color:var(--muted);line-height:1.45}
.cookie-prefs input{appearance:none;-webkit-appearance:none;grid-row:1/span 2;grid-column:2;width:40px;height:24px;border-radius:999px;background:color-mix(in srgb,var(--ink) 18%,transparent);position:relative;cursor:pointer;transition:background .2s;margin:0}
.cookie-prefs input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .2s var(--ease)}
.cookie-prefs input:checked{background:var(--leaf)}
.cookie-prefs input:checked::after{transform:translateX(16px)}
.cookie-prefs input:disabled{opacity:.55;cursor:not-allowed}
@media (max-width:560px){.cookie{left:8px;right:8px;bottom:8px;width:auto;padding:18px}}

/* ---------- Motion keyframes (transform only, so they stay smooth) ---------- */
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes float2{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-10px) rotate(0deg)}}
@keyframes aurora{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-20px) scale(1.08)}}

/* ---------- v2 mobile tuning ---------- */
@media (max-width:560px){
  .wrap{padding-inline:20px}
  .card{padding:22px}
  .btn{padding:14px 20px}
  .site-foot .legal-row .copy{flex-basis:100%}
}
@media (min-width:1600px){:root{--max:80rem}}

/* ---------- Professional, not playful: remove the remaining v1 flourishes ---------- */
.grad{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:inherit}
.sticker:not(.ribbon){display:none}
.blob{animation:none;opacity:.3}
.blob.b3{display:none}
.phone{animation:none;transform:rotate(-1.5deg)}
.eyebrow::before,.eyebrow.mint::before,.eyebrow.sky::before,.eyebrow.berry::before{background:var(--tang)}
.card .ic-badge,.bg-sun,.bg-mint,.bg-sky,.bg-berry,.bg-tang,.bg-lilac,.bg-leaf{background:var(--paper-2)}
.card .ic-badge .ic{color:var(--ink)}
[style*="rotate("]{transform:none!important}
.chip.and,.chip.ios,.chip.plan{color:var(--muted)}
.scan::after{display:none}
.scan .msg mark{animation:none;background:#FDE4E1;color:inherit;padding-inline:2px}
.flag,.verdict{animation:none}
.toast{animation:none}
.marquee .track{animation-duration:60s}

/* Hero phone: alerts sit where the stats row was */
.phone:has(.toasts) .mini{display:none}
.phone::before{width:30%}
@media (max-width:560px){.toast:nth-child(3){display:none}}


/* ==========================================================================
   v3 BRAND THEME (26 Sep 2026): colours from the TipOffly shield logo
   Navy ink (#0F1B3D), brand blue (#1E5BFF) to sky (#2EC5FF), cool neutrals.
   One typeface: Poppins. Sits last, so it overrides v1 and v2 above.
   ========================================================================== */
:root{
  --paper:#F7F9FC; --paper-2:#EEF3FA; --surface:#FFFFFF;
  --ink:#0F1B3D; --ink-2:#2A3857; --muted:#5B6782;
  --hair:rgba(15,27,61,.10); --edge:rgba(15,27,61,.14);
  --night:#0B1633; --night-2:#12214A; --on-night:#F2F6FF; --on-night-2:#A9B9DB;
  --brand:#1E5BFF; --brand-2:#2EC5FF; --brand-ink:#1749D6; --brand-soft:#E8F0FF;
  --brand-grad:linear-gradient(135deg,#1E5BFF 0%,#2EC5FF 100%);
  --tang:var(--brand); --tang-ink:var(--brand-ink);
  --mint:#5CC8FF; --sky:#2EC5FF;
  --display:"Poppins","Segoe UI",system-ui,sans-serif;
  --serif:"Poppins","Segoe UI",system-ui,sans-serif;
  --body:"Poppins","Segoe UI","Nirmala UI","Noto Sans Devanagari",system-ui,-apple-system,sans-serif;
  --shadow:0 1px 2px rgba(15,27,61,.05),0 14px 34px -18px rgba(15,27,61,.22);
  --shadow-lg:0 2px 6px rgba(15,27,61,.05),0 34px 70px -30px rgba(15,27,61,.35);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0A1224; --paper-2:#0E1830; --surface:#121E3A;
    --ink:#EEF3FF; --ink-2:#C9D4EE; --muted:#95A5C8;
    --hair:rgba(255,255,255,.09); --edge:rgba(255,255,255,.13);
    --night:#060D1C; --night-2:#0C1733;
    --brand:#3F7BFF; --brand-ink:#7FA8FF; --brand-soft:rgba(63,123,255,.16);
  }
}
:root[data-theme="dark"]{
  --paper:#0A1224; --paper-2:#0E1830; --surface:#121E3A;
  --ink:#EEF3FF; --ink-2:#C9D4EE; --muted:#95A5C8;
  --hair:rgba(255,255,255,.09); --edge:rgba(255,255,255,.13);
  --night:#060D1C; --night-2:#0C1733;
  --brand:#3F7BFF; --brand-ink:#7FA8FF; --brand-soft:rgba(63,123,255,.16);
}

/* Type: Poppins everywhere, clear hierarchy */
body{font-family:var(--body);font-size:var(--fs-body);line-height:1.65;letter-spacing:0}
h1,h2,h3,h4{font-family:var(--display);font-variation-settings:normal}
h1{font-weight:700;letter-spacing:-.03em;line-height:1.08}
h2{font-weight:600;letter-spacing:-.025em;line-height:1.15}
h3{font-weight:600;letter-spacing:-.01em}
h4{font-weight:600}
.legal-hero h1{font-family:var(--display);font-weight:700;letter-spacing:-.03em}
.hl,h1 .hl,h2 .hl{font-family:inherit;font-weight:inherit;font-style:normal;background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.band.night .hl{background:linear-gradient(135deg,#7FB0FF,#5CD6FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{line-height:1.6}
.eyebrow{font:600 12.5px/1 var(--body);letter-spacing:.12em;color:var(--brand-ink)}
.eyebrow::before,.eyebrow.mint::before,.eyebrow.sky::before,.eyebrow.berry::before{background:var(--brand-grad)}
.band.night .eyebrow,.cta-band .eyebrow{color:#8FB6FF}

/* Logo */
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.logo .logo-mark{height:34px;width:auto}
.logo-word{font:700 22px/1 var(--display);letter-spacing:-.02em;color:var(--ink)}
.logo-word span{background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.site-foot .logo-word{color:#fff}
@media (max-width:560px){.logo .logo-mark{height:30px}.logo-word{font-size:20px}}

/* Header */
.site-head{background:color-mix(in srgb,var(--paper) 90%,transparent)}
.nav a{font-weight:500;font-size:14.5px}
.nav a[aria-current="page"]{color:var(--brand-ink)}
.nav a[aria-current="page"]::after{background:var(--brand)}

/* Buttons: brand blue primary, navy outline secondary */
.btn{--bg:var(--brand);--fg:#fff;font-family:var(--body);font-weight:600;border-color:var(--bg);box-shadow:0 8px 20px -10px rgba(30,91,255,.55)}
.btn:hover{background:var(--brand-ink);border-color:var(--brand-ink);box-shadow:0 12px 26px -10px rgba(30,91,255,.6)}
.btn.ghost{--bg:transparent;--fg:var(--ink);border-color:var(--edge);box-shadow:none}
.btn.ghost:hover{background:var(--brand-soft);color:var(--brand-ink);border-color:var(--brand)}
.btn.mint{--bg:#fff;--fg:var(--brand-ink);border-color:#fff;box-shadow:none}
.btn.mint:hover{background:var(--brand-soft);border-color:var(--brand-soft)}
.band.night .btn.ghost,.cta-band .btn.ghost{--fg:#fff;border-color:rgba(255,255,255,.4)}
.band.night .btn.ghost:hover{background:rgba(255,255,255,.1);color:#fff}

/* Cards and icon badges */
.card{border-radius:20px}
.card .ic-badge,.bg-sun,.bg-mint,.bg-sky,.bg-berry,.bg-tang,.bg-lilac,.bg-leaf{background:var(--brand-soft)}
.card .ic-badge .ic{color:var(--brand)}
.card.lift:hover{border-color:color-mix(in srgb,var(--brand) 35%,transparent)}
.hero-proof .ic,.meta-row .ic{color:var(--brand)}
.price li .ic{color:var(--brand)}
.price.best{background:var(--night);border-color:var(--night);box-shadow:0 40px 80px -40px rgba(11,22,51,.7)}
.price.best li .ic{color:#7FB0FF}
.price .ribbon{background:var(--brand-grad);color:#fff}
.chip.and,.chip.ios,.chip.plan{color:var(--brand-ink)}
.step::before{color:var(--brand);font-family:var(--display);font-weight:600;font-size:34px}
.band.night .step::before{color:#7FB0FF}

/* Dark bands: deep navy */
.band.night,.cta-band{background:var(--night)}
.band.night{background:radial-gradient(80% 120% at 85% 0%,#16306E 0%,transparent 60%),var(--night)}
.cta-band{background:radial-gradient(70% 120% at 50% 0%,#1B3A86 0%,transparent 65%),var(--night)}
.site-foot{background:#081127}

/* Hero glow and marquee */
.blob.b1{background:radial-gradient(circle,#9CC4FF,transparent 70%);opacity:.45}
.blob.b2{background:radial-gradient(circle,#BDEBFF,transparent 70%);opacity:.5}
.marquee .track{font:500 var(--fs-marq,20px)/1 var(--body);font-style:normal;color:var(--ink-2)}
.marquee .track span::after{background:var(--brand)}

/* Phone mock-up in brand navy */
.phone{background:linear-gradient(170deg,#173A8A,#0E214F 55%,#0A1838)}
.ring{background:conic-gradient(#5CC8FF calc(var(--p)*1%),rgba(255,255,255,.08) 0)}
.ring > div{background:#0E214F}
.phone .ok{color:#7FD3FF}
.phone .brand{font-family:var(--display);letter-spacing:.2em}
.phone .brand i{color:#5CC8FF}
.toast .dot.bg-tang{background:#F97316}
.toast .dot.bg-leaf{background:var(--brand)}

/* Forms, focus, cookie switches, legal pages */
:focus-visible{outline-color:var(--brand)}
.checker textarea:focus,.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 18%,transparent)}
.cookie-prefs input:checked{background:var(--brand)}
.filters button[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.toc a:hover,.toc a.on{border-left-color:var(--brand);color:var(--ink)}
.legal-body a{color:var(--brand-ink)}
.legal-body .callout{border-left-color:var(--brand)}
.draft-note{background:var(--brand-soft);border-color:color-mix(in srgb,var(--brand) 30%,transparent)}
.faq summary{font-family:var(--body);font-weight:500}

/* Poppins runs wide: smaller display sizes so headlines keep their line breaks */
:root{--fs-h1:clamp(34px,1.3rem + 3.4vw,68px);--fs-h2:clamp(26px,1.1rem + 2vw,46px)}
.phone .brand{letter-spacing:-.01em;font-size:15px;font-weight:700}
.phone .brand i{background:linear-gradient(135deg,#5CC8FF,#9CE1FF);-webkit-background-clip:text;background-clip:text;color:transparent}


/* ==========================================================================
   v4 MENU + FEATURE TILES (26 Sep 2026)
   Menu pattern: sticky header that gains a shadow on scroll, pill hover links,
   a grouped mega-menu with a CTA strip, and a right-hand drawer on mobile.
   ========================================================================== */
.site-head{position:sticky;top:0;transition:box-shadow .3s var(--ease),background .3s}
.site-head.scrolled{box-shadow:0 10px 30px -18px rgba(15,27,61,.35)}
.navrow{display:flex;align-items:center;gap:24px;min-height:76px}
.mainnav-wrap{margin-inline:auto}
.mainnav{list-style:none;display:flex;align-items:center;gap:2px;margin:0;padding:0}
.mainnav > li{position:relative}
.mainnav > li > a,.mainnav > li > button{display:flex;align-items:center;gap:6px;padding:9px 14px;border-radius:10px;border:0;background:none;font:500 14.5px/1 var(--body);color:var(--ink-2);text-decoration:none;cursor:pointer;transition:color .2s,background .2s}
.mainnav > li > a:hover,.mainnav > li > button:hover,.mainnav > li.open > button,.mainnav > li > a[aria-current="page"],.mainnav > li > button.is-current{color:var(--brand-ink);background:var(--brand-soft)}
.mainnav .chev{width:14px;height:14px;transition:transform .25s var(--ease)}
.mainnav > li.open .chev{transform:rotate(180deg)}
.nav,.nav a[aria-current="page"]::after{display:none}

.mega{position:absolute;top:calc(100% + 14px);left:50%;width:min(860px,94vw);z-index:70;padding:22px;background:var(--surface);border:1px solid var(--hair);border-radius:22px;box-shadow:0 30px 70px -24px rgba(15,27,61,.35);opacity:0;visibility:hidden;transform:translate(-50%,10px);transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s}
.mega::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.has-mega.open .mega{opacity:1;visibility:visible;transform:translate(-50%,0)}
.mega-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mega-col h5{margin:0 0 8px;padding-inline:10px;font:600 11px/1 var(--body);letter-spacing:.13em;text-transform:uppercase;color:var(--brand-ink)}
.mega-col a{display:flex;align-items:center;gap:12px;padding:10px;border-radius:14px;text-decoration:none;color:var(--ink);transition:background .2s,transform .2s var(--ease)}
.mega-col a:hover{background:var(--paper-2);transform:translateX(3px)}
.mega-col .mi{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand)}
.mega-col .mi .ic{width:18px;height:18px}
.mega-col b{display:block;font-weight:600;font-size:14.5px;line-height:1.25}
.mega-col small{display:block;font-size:12.5px;color:var(--muted);line-height:1.35}
.mega-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:16px;padding-top:16px;border-top:1px solid var(--hair)}
.mega-foot p{margin:0;font-size:14px;color:var(--muted)}

.head-cta{display:flex;align-items:center;gap:10px;margin-left:auto}
.burger{display:none;width:44px;height:44px;border:1px solid var(--edge);border-radius:12px;background:var(--surface);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0}
.burger span{width:19px;height:2px;border-radius:2px;background:var(--ink)}
.drawer-mask{position:fixed;inset:0;z-index:90;background:rgba(8,17,39,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.drawer-mask.on{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;z-index:95;width:min(400px,88vw);height:100dvh;display:flex;flex-direction:column;background:var(--surface);box-shadow:-30px 0 70px -30px rgba(0,0,0,.4);transform:translateX(100%);transition:transform .4s var(--ease)}
.drawer.on{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--hair)}
.drawer-close{width:40px;height:40px;border-radius:50%;border:1px solid var(--edge);background:none;color:var(--ink);display:grid;place-items:center;cursor:pointer}
.drawer-close .ic{width:16px;height:16px}
.drawer-body{flex:1;overflow-y:auto;padding:10px 20px 24px}
.drawer-acc > button,.drawer-link{width:100%;display:flex;align-items:center;justify-content:space-between;padding:15px 4px;border:0;border-bottom:1px solid var(--hair);background:none;font:600 16px var(--body);color:var(--ink);text-align:left;text-decoration:none;cursor:pointer}
.drawer-acc > button .chev{width:16px;height:16px;transition:transform .25s var(--ease)}
.drawer-acc.open > button{color:var(--brand-ink)}
.drawer-acc.open > button .chev{transform:rotate(180deg)}
.drawer-acc-body{display:none;padding:6px 0 10px}
.drawer-acc.open .drawer-acc-body{display:grid}
.drawer-acc-body a{display:flex;align-items:center;gap:12px;padding:11px 8px;border-radius:12px;color:var(--ink-2);text-decoration:none;font-size:15px}
.drawer-acc-body a:hover{background:var(--paper-2);color:var(--brand-ink)}
.drawer-acc-body .ic{width:18px;height:18px;color:var(--brand)}
.drawer-link[aria-current="page"]{color:var(--brand-ink)}
.drawer-foot{display:grid;gap:10px;padding:18px 20px;border-top:1px solid var(--hair);text-align:center}
@media (max-width:1060px){
  .mainnav-wrap{display:none}
  .burger{display:inline-flex}
  .head-cta .btn{display:none}
}

/* ---------- Feature tiles: compact, colourful, gently animated ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.tile{--tone:#1E5BFF;--tone-2:#2EC5FF;position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:16px 18px;border-radius:18px;background:var(--surface);border:1px solid var(--hair);text-decoration:none;color:var(--ink);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.tile[data-tone="violet"]{--tone:#7C4DFF;--tone-2:#B28CFF}
.tile[data-tone="rose"]{--tone:#F0447B;--tone-2:#FF8FB1}
.tile[data-tone="amber"]{--tone:#F08A00;--tone-2:#FFC24D}
.tile[data-tone="teal"]{--tone:#0FA79A;--tone-2:#4FD8C8}
.tile[data-tone="indigo"]{--tone:#3B4CCA;--tone-2:#7C8CFF}
.tile::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--tone) 12%,transparent),transparent 70%);opacity:0;transition:opacity .35s}
.tile::after{content:"";position:absolute;left:18px;right:18px;bottom:0;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--tone),var(--tone-2));transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.tile-ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--tone),var(--tone-2));box-shadow:0 10px 20px -10px var(--tone);transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.tile-ic .ic{width:22px;height:22px}
.tile-tx b{display:block;font-weight:600;font-size:16.5px;line-height:1.25;letter-spacing:-.01em}
.tile-tx small{display:block;margin-top:3px;font-size:13.5px;line-height:1.45;color:var(--muted)}
.tile-go{width:18px;height:18px;color:var(--tone);opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .35s var(--ease)}
.tile:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--tone) 35%,transparent);box-shadow:0 22px 40px -24px color-mix(in srgb,var(--tone) 70%,transparent)}
.tile:hover::before{opacity:1}
.tile:hover::after{transform:scaleX(1)}
.tile:hover .tile-ic{transform:rotate(-8deg) scale(1.08)}
.tile:hover .tile-go{opacity:1;transform:none}
.tile:focus-visible{outline:2px solid var(--tone);outline-offset:3px}
/* staggered entrance */
.tiles .tile.rv{transition:transform .8s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.tiles .tile.rv.pre{transform:translateY(22px);opacity:0}
.tiles .tile.rv:not(.pre){opacity:1;transition:transform .8s var(--ease),opacity .8s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.tiles .tile:nth-child(2){transition-delay:60ms}.tiles .tile:nth-child(3){transition-delay:120ms}
.tiles .tile:nth-child(4){transition-delay:180ms}.tiles .tile:nth-child(5){transition-delay:240ms}.tiles .tile:nth-child(6){transition-delay:300ms}
.tiles .tile:hover{transition-delay:0ms}
@media (max-width:980px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.tiles{grid-template-columns:1fr;gap:10px}.tile{padding:14px 16px;gap:14px}.tile-ic{width:44px;height:44px;border-radius:13px}.tile-go{opacity:.5;transform:none}}
@media (hover:none){.tile:hover{transform:none}}
@media (prefers-reduced-motion:reduce){.tiles .tile.rv.pre{opacity:1}}

/* Mega-menu centres under the whole header, not under its button */
.navrow{position:relative}
.mainnav > li.has-mega{position:static}
.mega{top:calc(100% - 6px)}


/* ==========================================================================
   v5 FEWER BOXES + 3D ACCENTS (26 Sep 2026)
   ========================================================================== */
/* Tip-off demo: a message bubble and a verdict, no enclosing card */
.tipdemo{width:min(460px,100%);justify-self:center;display:grid;gap:14px}
.td-from{display:flex;align-items:center;gap:12px;color:var(--on-night)}
.td-av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:600;background:rgba(255,255,255,.12);color:#fff}
.td-from b{display:block;font-weight:600;font-size:15px}
.td-from small{display:block;font-size:12.5px;color:var(--on-night-2)}
.td-bubble{margin:0;max-width:none;padding:16px 18px;border-radius:6px 22px 22px 22px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff;font-size:16.5px;line-height:1.6;position:relative;overflow:hidden}
.td-bubble mark{background:transparent;color:inherit;border-radius:6px;padding:0 3px;transition:background .5s ease .5s,color .5s ease .5s}
.play .td-bubble mark{background:rgba(255,99,90,.24);color:#FFC7C0}
.td-bubble::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,transparent,rgba(92,200,255,.35),transparent);transform:translateX(-120%)}
.play .td-bubble::after{animation:tdscan 1.1s var(--ease) .1s 1 both}
.td-flags{display:flex;flex-wrap:wrap;gap:8px}
.td-flags span{font:600 12.5px/1 var(--body);padding:8px 12px;border-radius:999px;color:#FFB3AA;background:rgba(255,99,90,.12);border:1px solid rgba(255,99,90,.35);opacity:0;transform:translateY(8px) scale(.94)}
.play .td-flags span{animation:tdpop .5s var(--ease) both}
.play .td-flags span:nth-child(1){animation-delay:1s}.play .td-flags span:nth-child(2){animation-delay:1.15s}.play .td-flags span:nth-child(3){animation-delay:1.3s}
.td-verdict{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:18px;color:#fff;background:linear-gradient(135deg,#D92D20,#F0443A);box-shadow:0 18px 40px -16px rgba(217,45,32,.7);opacity:0;transform:translateY(10px)}
.play .td-verdict{animation:tdpop .6s var(--ease) 1.6s both}
.td-verdict .ic{width:22px;height:22px}
.td-verdict b{display:block;font-weight:600;font-size:16px}
.td-verdict small{display:block;font-size:12.5px;opacity:.85}
@keyframes tdscan{to{transform:translateX(320%)}}
@keyframes tdpop{to{opacity:1;transform:none}}

/* Pricing: one panel, three columns, hairline dividers */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--surface);border:1px solid var(--hair);border-radius:24px;overflow:hidden;box-shadow:var(--shadow)}
.plan{display:grid;gap:10px;align-content:start;padding:26px 28px;border-left:1px solid var(--hair);transition:background .3s}
.plan:first-child{border-left:0}
.plan:not(.best):hover{background:var(--paper)}
.plan-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:28px}
.plan-head h3{font-size:16px}
.plan-head small{font-size:12.5px;color:var(--muted)}
.plan-amt{font:600 clamp(34px,1.6rem + 1vw,44px)/1 var(--display);letter-spacing:-.03em}
.plan-amt small{font:500 14px var(--body);letter-spacing:0;color:var(--muted);margin-left:6px}
.plan p{margin:0;font-size:14.5px;line-height:1.5;color:var(--muted)}
.plan-link{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font-weight:600;font-size:15px;color:var(--brand-ink);text-decoration:none}
.plan-link .ic{width:16px;height:16px;transition:transform .25s var(--ease)}
.plan-link:hover .ic{transform:translateX(4px)}
.plan.best{background:radial-gradient(120% 90% at 100% 0%,#1B3A86 0%,transparent 60%),var(--night);color:#fff;border-left-color:transparent}
.plan.best p,.plan.best .plan-amt small{color:var(--on-night-2)}
.plan.best .btn{justify-self:start;margin-top:6px}
.plan-badge{font:600 11.5px/1 var(--body);padding:6px 10px;border-radius:999px;color:#fff;background:var(--brand-grad)}
@media (max-width:860px){.plans{grid-template-columns:1fr}.plan{border-left:0;border-top:1px solid var(--hair)}.plan:first-child{border-top:0}}

/* Privacy: 3D padlock + hairline list */
.promise{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,2rem + 4vw,96px);align-items:center}
.promise-list{display:grid;margin-top:8px}
.promise-row{display:grid;grid-template-columns:40px 1fr;gap:2px 16px;align-items:center;padding:16px 0;border-top:1px solid var(--hair)}
.promise-row:last-child{border-bottom:1px solid var(--hair)}
.pr-ic{grid-row:1/3;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand)}
.pr-ic .ic{width:19px;height:19px}
.promise-row b{font-weight:600;font-size:16px}
.promise-row small{font-size:14px;color:var(--muted)}
@media (max-width:860px){.promise{grid-template-columns:1fr}.lock3d{order:-1}}

/* 3D objects */
.o3d-stage{position:relative;perspective:900px;display:grid;place-items:center;margin-inline:auto}
.shield3d{width:120px;height:170px;margin-bottom:6px}
.lock3d{width:min(240px,60vw);height:min(300px,75vw)}
.o3d{position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:spin3d 7s ease-in-out infinite;will-change:transform}
.o3d .lay,.o3d .shk{position:absolute;inset:0;width:100%;height:100%}
.o3d .shk{transform-style:preserve-3d;animation:shackle 7s ease-in-out infinite}
.o3d-shadow{position:absolute;left:18%;right:18%;bottom:-22px;height:22px;border-radius:50%;background:radial-gradient(closest-side,rgba(8,17,39,.35),transparent);animation:shadow3d 7s ease-in-out infinite}
.cta-band .o3d-shadow{background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent)}
@keyframes spin3d{0%,100%{transform:rotateY(-30deg) rotateX(8deg) translateY(0)}50%{transform:rotateY(30deg) rotateX(-4deg) translateY(-12px)}}
@keyframes shadow3d{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.82);opacity:.6}}
@keyframes shackle{0%,30%{transform:translateY(-14px)}42%,88%{transform:translateY(0)}100%{transform:translateY(-14px)}}
@media (prefers-reduced-motion:reduce){.o3d,.o3d .shk,.o3d-shadow{animation:none}.td-flags span,.td-verdict{opacity:1;transform:none}}

/* Closing CTA centred */
.cta-band .stack{justify-items:center;text-align:center}
.cta-band .eyebrow{justify-self:center}

/* Scam alerts: article rows split by hairlines, no boxes */
.articles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--edge)}
.article{--tone:#1E5BFF;display:grid;gap:10px;align-content:start;padding:24px 28px 26px;border-left:1px solid var(--hair);text-decoration:none;color:var(--ink);position:relative;transition:background .3s}
.article:first-child{border-left:0;padding-left:0}
.article[data-tone="rose"]{--tone:#F0447B}.article[data-tone="violet"]{--tone:#7C4DFF}
.article::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--tone);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.article:hover::before{transform:scaleX(1)}
.art-top{display:flex;align-items:center;gap:10px;font-size:12.5px}
.art-ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;color:#fff;background:var(--tone)}
.art-ic .ic{width:16px;height:16px}
.art-kind{font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--tone)}
.art-time{margin-left:auto;color:var(--muted)}
.article b{font-weight:600;font-size:18px;line-height:1.35;letter-spacing:-.01em}
.article small{font-size:14.5px;line-height:1.5;color:var(--muted)}
.art-go{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-weight:600;font-size:14.5px;color:var(--tone)}
.art-go .ic{width:16px;height:16px;transition:transform .25s var(--ease)}
.article:hover .art-go .ic{transform:translateX(4px)}
@media (max-width:860px){.articles{grid-template-columns:1fr}.article{border-left:0;padding-left:0;padding-right:0;border-bottom:1px solid var(--hair)}}


/* ==========================================================================
   v6 HERO PHONE IN 3D (26 Sep 2026)
   Only transform and opacity animate (GPU friendly), everything pauses when
   the hero is off-screen, and reduced-motion users get a still picture.
   ========================================================================== */
.hero3d{position:relative;display:grid;place-items:center;min-height:600px;perspective:1400px}
.h3-glow{position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(closest-side,rgba(46,197,255,.35),rgba(30,91,255,.12) 60%,transparent);filter:blur(10px);animation:h3pulse 6s ease-in-out infinite}
.h3-tilt{--rx:0deg;--ry:0deg;position:relative;transform-style:preserve-3d;transform:rotateX(calc(6deg + var(--rx))) rotateY(calc(-16deg + var(--ry)))}
.h3-float{transform-style:preserve-3d;animation:h3float 7s ease-in-out infinite}
.hero3d .phone{animation:none;transform:none;border:0;padding:0;width:290px;aspect-ratio:9/18.8;border-radius:48px;
  background:linear-gradient(170deg,#173A8A,#0E214F 55%,#0A1838);
  box-shadow:0 0 0 9px #0C0C10,0 0 0 10.5px #3A3F4B,-5px 6px 0 10px #1B1D24,-9px 10px 0 10px #111217,-30px 50px 70px -10px rgba(11,22,51,.45)}
.hero3d .phone::before{top:12px;width:32%;height:24px}
.hero3d .status{align-items:center;padding:16px 26px 0}
.st-ic{display:flex;align-items:center;gap:4px}
.st-ic svg{height:10px;width:auto}
.glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;overflow:hidden;z-index:6}
.glare::before{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.14) 45%,rgba(255,255,255,.04) 55%,transparent);transform:translateX(-130%) skewX(-12deg);animation:h3glare 9s ease-in-out infinite}
.hero3d .ring{animation:none}

/* notifications pop in one by one, like a real phone, then loop */
.hero3d .toasts{inset:auto 0 16px 0}
.hero3d .toast{opacity:0;transform:translateY(-14px) scale(.92);animation:h3toast 9s cubic-bezier(.34,1.56,.64,1) infinite both}
.hero3d .toast:nth-child(1){animation-delay:.8s}
.hero3d .toast:nth-child(2){animation-delay:1.6s}
.hero3d .toast:nth-child(3){animation-delay:2.4s}

/* floating 3D pieces at different depths */
.h3-orb{position:absolute;transform-style:preserve-3d}
.orb-shield{width:74px;height:104px;top:4%;right:-64px;transform:translateZ(80px)}
.orb-lock{width:70px;height:88px;bottom:14%;left:-70px;transform:translateZ(60px)}
.h3-orb .o3d{animation-duration:6s}
.orb-lock .o3d{animation-delay:-2s}
.h3-orb .o3d-shadow{display:none}
.h3-chip{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:16px;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(15,27,61,.08);box-shadow:0 18px 40px -18px rgba(15,27,61,.45);color:#0F1B3D;white-space:nowrap}
.h3-chip b{display:block;font-size:13.5px;font-weight:600;line-height:1.2}
.h3-chip small{display:block;font-size:11.5px;color:#5B6782}
.h3-chip .cd{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;color:#fff;background:var(--brand-grad)}
.h3-chip .cd.ok{background:linear-gradient(135deg,#0FA96B,#35D39A)}
.h3-chip .cd .ic{width:16px;height:16px}
.chip-a{top:22%;left:-120px;transform:translateZ(110px);animation:h3bob 6s ease-in-out infinite}
.chip-b{bottom:6%;right:-96px;transform:translateZ(90px);animation:h3bob 6s ease-in-out -3s infinite}
:root[data-theme="dark"] .h3-chip{background:rgba(18,30,58,.85);border-color:rgba(255,255,255,.1);color:#EEF3FF}
:root[data-theme="dark"] .h3-chip small{color:#95A5C8}

@keyframes h3float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes h3pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.08);opacity:.8}}
@keyframes h3glare{0%,55%{transform:translateX(-130%) skewX(-12deg)}75%,100%{transform:translateX(320%) skewX(-12deg)}}
@keyframes h3toast{0%{opacity:0;transform:translateY(-14px) scale(.92)}6%,80%{opacity:1;transform:none}90%,100%{opacity:0;transform:translateY(6px) scale(.97)}}
@keyframes h3bob{0%,100%{translate:0 0}50%{translate:0 -10px}}

/* pause everything while the hero is off-screen */
.hero3d.paused *,.hero3d.paused{animation-play-state:paused!important}

@media (max-width:1180px){.chip-a{left:-70px}.chip-b{right:-50px}.orb-shield{right:-40px}.orb-lock{left:-44px}}
@media (max-width:560px){
  .hero3d{min-height:560px}
  .hero3d .phone{width:250px}
  .chip-a{left:-6px;top:14%}.chip-b{right:-6px;bottom:8%}
  .orb-shield{right:-8px;top:0;width:56px;height:80px}.orb-lock{display:none}
  .h3-tilt{transform:rotateX(4deg) rotateY(-10deg)}
}
@media (prefers-reduced-motion:reduce){
  .hero3d *,.hero3d{animation:none!important}
  .hero3d .toast{opacity:1;transform:none}
}


/* ==========================================================================
   v7 SITE-WIDE MOTION (26 Sep 2026)
   Everything from the home page, applied to every page: gradient icons,
   pointer glow, lift, staggered entrances, a 3D object per page, demos that
   play on view, smooth FAQ, reading bar. Transform/opacity only; 3D objects
   pause off-screen; reduced motion gets still versions.
   ========================================================================== */
/* page fade-in */
main{animation:pagein .6s var(--ease) both}
@keyframes pagein{from{opacity:0;transform:translateY(8px)}}

/* headline highlight: brand gradient everywhere */
.grad{background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent}

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

/* primary buttons: a quick shine on hover */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;z-index:-1;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:translateX(-140%) skewX(-18deg);transition:transform .7s var(--ease)}
.btn:hover::after{transform:translateX(330%) skewX(-18deg)}
.btn.ghost::after{background:linear-gradient(100deg,transparent,color-mix(in srgb,var(--brand) 18%,transparent),transparent)}

/* ---------- Cards everywhere: tone per card, gradient icon, glow, lift ---------- */
.card{--tone:#1E5BFF;--tone-2:#2EC5FF;position:relative;isolation:isolate;overflow:hidden;border-radius:18px;padding:24px;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.grid > .card:nth-child(6n+2),.card[data-tone="violet"]{--tone:#7C4DFF;--tone-2:#B28CFF}
.grid > .card:nth-child(6n+3),.card[data-tone="rose"]{--tone:#F0447B;--tone-2:#FF8FB1}
.grid > .card:nth-child(6n+4){--tone:#F08A00;--tone-2:#FFC24D}
.grid > .card:nth-child(6n+5){--tone:#0FA79A;--tone-2:#4FD8C8}
.grid > .card:nth-child(6n+6){--tone:#3B4CCA;--tone-2:#7C8CFF}
.card::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(280px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--tone) 11%,transparent),transparent 70%);opacity:0;transition:opacity .35s}
.card::after{content:"";position:absolute;left:20px;right:20px;bottom:0;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--tone),var(--tone-2));transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--tone) 32%,transparent);box-shadow:0 22px 44px -26px color-mix(in srgb,var(--tone) 70%,transparent)}
.card:hover::before{opacity:1}
.card:hover::after{transform:scaleX(1)}
.card .ic-badge,.card .ic-badge.bg-sun,.card .ic-badge.bg-mint,.card .ic-badge.bg-sky,.card .ic-badge.bg-berry,.card .ic-badge.bg-tang,.card .ic-badge.bg-lilac,.card .ic-badge.bg-leaf{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,var(--tone),var(--tone-2));box-shadow:0 10px 20px -10px var(--tone);transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.card .ic-badge .ic{color:#fff;width:22px;height:22px}
.card:hover .ic-badge{transform:rotate(-8deg) scale(1.08)}
.card.checker,.card.form,.price.best{--tone:#1E5BFF}
.card.checker:hover,.card.form:hover{transform:none}
.card.lift .ph{display:none}
/* feature filter: cards pop back in */
.card.pop{animation:cardpop .45s var(--ease) both}
@keyframes cardpop{from{opacity:0;transform:translateY(10px) scale(.97)}}

/* staggered entrance for anything in a grid */
.rv{transition:transform .8s var(--ease) calc(var(--d,0) * 70ms),opacity .8s var(--ease) calc(var(--d,0) * 70ms)}
.rv.pre{opacity:0;transform:translateY(22px)}
.card.rv:hover,.tile.rv:hover{transition-delay:0ms}

/* ---------- Alert cards (Kids / Parents) as colourful rows ---------- */
.alert-card{border-radius:16px;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.alert-card:hover{transform:translateX(4px);box-shadow:var(--shadow)}
.alert-card .ic-badge{background:var(--brand-grad)!important;color:#fff}
.alert-card .ic-badge .ic{color:#fff}

/* ---------- Page heroes: a 3D object each ---------- */
.page-hero.has-3d{min-height:360px}
.ph3d{position:absolute;z-index:1;top:50%;right:max(32px,calc(50% - 36rem));width:170px;height:220px;transform:translateY(-50%)}
.ph3d-coin{width:150px;height:150px;right:max(40px,calc(50% - 34rem))}
.ph3d-coin.ph3d-alt{right:auto;left:max(40px,calc(50% - 34rem));width:110px;height:110px;top:62%}
.ph3d-coin.ph3d-alt .o3d{animation-delay:-2.5s}
.ph3d-bell{width:170px;height:190px}
.o3d-coin{animation:coinspin 6s linear infinite}
.swing{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:50% 12%;animation:bellswing 2.8s ease-in-out infinite}
.swing .lay{position:absolute;inset:0;width:100%;height:100%}
.bell-dot{position:absolute;top:4%;right:6%;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:700 15px var(--body);color:#fff;background:#E5484D;box-shadow:0 6px 14px -4px rgba(229,72,77,.7);transform:translateZ(24px);animation:dotpop 2.8s ease-in-out infinite}
@keyframes coinspin{0%{transform:rotateY(0) translateY(0)}50%{transform:rotateY(180deg) translateY(-12px)}100%{transform:rotateY(360deg) translateY(0)}}
@keyframes bellswing{0%,60%,100%{transform:rotate(0)}10%{transform:rotate(14deg)}20%{transform:rotate(-12deg)}30%{transform:rotate(8deg)}40%{transform:rotate(-5deg)}50%{transform:rotate(2deg)}}
@keyframes dotpop{0%,8%{transform:translateZ(24px) scale(1)}14%{transform:translateZ(24px) scale(1.25)}22%,100%{transform:translateZ(24px) scale(1)}}
.o3d-stage.paused .o3d,.o3d-stage.paused .o3d *,.o3d-stage.paused .o3d-shadow,.o3d-stage.paused .bell-dot{animation-play-state:paused!important}
@media (max-width:1100px){.page-hero.has-3d .stack{padding-right:180px}}
@media (max-width:760px){
  .page-hero.has-3d .stack{padding-right:0}
  .ph3d{position:relative;top:auto;right:auto;left:auto;transform:none;width:96px;height:124px;margin:18px auto 0}
  .ph3d-coin{width:96px;height:96px}
  .ph3d-coin.ph3d-alt{display:none}
}

/* ---------- Kids / Parents hero visual: 3D tilt + float + orb ---------- */
.tilt-card{--rx:0deg;--ry:0deg;position:relative;transform-style:preserve-3d;transform:perspective(1200px) rotateX(calc(4deg + var(--rx))) rotateY(calc(-8deg + var(--ry)));transition:box-shadow .3s}
.hero .tilt-card.rv{transition:none}
.tilt-orb{position:absolute;top:-40px;right:-26px;width:70px;height:96px;transform:translateZ(70px);z-index:4}
.tilt-orb .o3d{animation-duration:6s}
.tilt-orb .o3d-shadow{display:none}
.tilt-card > .alert-card{opacity:0;transform:translateY(12px);animation:alertin .6s var(--ease) both}
.tilt-card > .alert-card:nth-of-type(1){animation-delay:.3s}.tilt-card > .alert-card:nth-of-type(2){animation-delay:.55s}
.tilt-card > .alert-card:nth-of-type(3){animation-delay:.8s}.tilt-card > .alert-card:nth-of-type(4){animation-delay:1.05s}
@keyframes alertin{to{opacity:1;transform:none}}
@media (max-width:760px){.tilt-card{transform:none}.tilt-orb{right:-4px;top:-30px;width:54px;height:74px}}

/* ---------- Demos play once visible ---------- */
.scan .flag,.scan .verdict{opacity:0;transform:translateY(8px) scale(.94)}
.scan.play .flag{animation:tdpop .5s var(--ease) both}
.scan.play .flag:nth-child(1){animation-delay:.9s}.scan.play .flag:nth-child(2){animation-delay:1.05s}.scan.play .flag:nth-child(3){animation-delay:1.2s}
.scan.play .verdict{animation:tdpop .6s var(--ease) 1.5s both}
.scan .msg mark{background:transparent;transition:background .5s ease .4s}
.scan.play .msg mark{background:#FDE4E1}
.scan::after{display:block;content:"";position:absolute;top:0;bottom:0;left:0;width:40%;height:auto;background:linear-gradient(90deg,transparent,rgba(46,197,255,.28),transparent);transform:translateX(-130%);animation:none}
.scan.play::after{animation:tdscan 1.1s var(--ease) .1s 1 both}
.bar-fill{animation:none;transform:scaleX(0);transition:transform 1.2s var(--ease)}
.bars.play .bar-fill{transform:scaleX(1)}
.bars.play .bar-row:nth-child(2) .bar-fill{transition-delay:.12s}.bars.play .bar-row:nth-child(3) .bar-fill{transition-delay:.24s}.bars.play .bar-row:nth-child(4) .bar-fill{transition-delay:.36s}
.chat .bubble{animation:none;opacity:0;transform:translateY(14px) scale(.96)}
.chat.play .bubble{animation:tdpop .5s cubic-bezier(.34,1.56,.64,1) both}
.chat.play .bubble:nth-child(1){animation-delay:.1s}.chat.play .bubble:nth-child(2){animation-delay:.7s}.chat.play .bubble:nth-child(3){animation-delay:1.3s}.chat.play .bubble:nth-child(4){animation-delay:1.9s}
.sees > div{opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.sees.play > div{opacity:1;transform:none}
.sees.play > div + div{transition-delay:.15s}
.pipe .node{opacity:.35;transition:opacity .5s}
.pipe.play .node{opacity:1}
.pipe.play .node:nth-child(2){transition-delay:.2s}.pipe.play .node:nth-child(3){transition-delay:.4s}.pipe.play .node:nth-child(4){transition-delay:.6s}.pipe.play .node:nth-child(5){transition-delay:.8s}

/* ---------- Pricing page: full plan panel ---------- */
.plans-full .plan{padding:30px 30px 28px;gap:12px}
.plans-full .plan-amt{font-size:clamp(38px,1.8rem + 1vw,50px)}
.plan-list{list-style:none;padding:0;margin:6px 0 10px;display:grid;gap:10px}
.plan-list li{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;font-size:14.5px;color:var(--ink-2)}
.plan-list .ic{width:18px;height:18px;margin-top:2px;color:var(--brand)}
.plan.best .plan-list li{color:#DCE6FF}
.plan.best .plan-list .ic{color:#7FD3FF}
.plans .plan{opacity:1}
.plans .plan .plan-list li{opacity:0;transform:translateX(-6px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.plans.play .plan .plan-list li{opacity:1;transform:none}
.plans.play .plan-list li:nth-child(2){transition-delay:.06s}.plans.play .plan-list li:nth-child(3){transition-delay:.12s}.plans.play .plan-list li:nth-child(4){transition-delay:.18s}.plans.play .plan-list li:nth-child(5){transition-delay:.24s}.plans.play .plan-list li:nth-child(6){transition-delay:.3s}.plans.play .plan-list li:nth-child(7){transition-delay:.36s}
.plan{position:relative;isolation:isolate}
.plan::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),rgba(30,91,255,.08),transparent 70%);opacity:0;transition:opacity .35s}
.plan.best::before{background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),rgba(46,197,255,.18),transparent 70%)}
.plan:hover::before{opacity:1}

/* ---------- FAQ: tidy chevron, smooth open ---------- */
.faq details > div{overflow:hidden}
.faq summary::after{transition:transform .3s var(--ease)}

/* ---------- Tables: row highlight ---------- */
tbody tr{transition:background .2s}
tbody tr:hover{background:color-mix(in srgb,var(--brand) 5%,transparent)}

@media (hover:none){.card:hover,.alert-card:hover{transform:none}}
@media (prefers-reduced-motion:reduce){
  main{animation:none}
  .rv.pre{opacity:1;transform:none}
  .o3d,.o3d-coin,.swing,.bell-dot,.o3d-shadow{animation:none!important}
  .tilt-card{transform:none}
  .tilt-card > .alert-card,.scan .flag,.scan .verdict,.chat .bubble,.sees > div,.plans .plan .plan-list li{opacity:1;transform:none;animation:none}
  .bar-fill{transform:none;transition:none}
  .pipe .node{opacity:1}
}

/* v7 fixes */
/* "Plan" labels are chips, not pricing columns */
.chip.plan{display:inline-flex;padding:6px 10px;gap:6px;border:1px solid currentColor;border-left:1px solid currentColor;align-content:normal;overflow:visible;isolation:auto;background:none}
.chip.plan::before{display:none}
/* the 3D orb may stick out of the tilting hero card */
.tilt-card{overflow:visible}
/* pricing coins sit in the page margins, clear of the headline */
.ph3d-coin{width:120px;height:120px;top:42%;right:max(20px,calc(50% - 44rem))}
.ph3d-coin.ph3d-alt{left:max(20px,calc(50% - 44rem));width:92px;height:92px;top:66%}
@media (max-width:1200px){.ph3d-coin.ph3d-alt{display:none}.ph3d-coin{top:20%}}


/* ==========================================================================
   v8 ALIGNMENT, SPACING, CLEANER PHONE (26 Sep 2026)
   ========================================================================== */
/* tighter vertical rhythm */
.band{padding-block:clamp(56px,3rem + 2.4vw,96px)}
.band.tight{padding-block:clamp(40px,2.4rem + 1.4vw,64px)}
.hero{padding-block:clamp(32px,1.5rem + 2vw,56px) clamp(40px,2rem + 2vw,72px)}
.page-hero{padding-block:clamp(40px,2rem + 2vw,72px) clamp(36px,2rem + 1.5vw,56px)}
.page-hero.has-3d{min-height:0}
.cta-band{padding-block:clamp(56px,3rem + 3vw,104px)}
.stack-lg{gap:clamp(32px,1.6rem + 1.6vw,52px)}

/* inner-page heroes line up with the rest of the page (left edge = content edge) */
.page-hero .wrap.stack{max-width:calc(var(--max) + 64px)}
.page-hero .stack > h1,.page-hero .stack > .lede{max-width:780px}
.page-hero .stack.center > h1,.page-hero .stack.center > .lede{margin-inline:auto}
.page-hero.has-3d .stack{padding-right:0}
.page-hero.has-3d .stack > *{position:relative;z-index:2}
.ph3d{right:max(32px,calc(50% - 36.5rem + 32px))}

/* home hero phone: clean single bezel, no stacked edges; chips never cover the alerts */
.hero3d{min-height:540px}
.h3-tilt{transform:rotateX(calc(4deg + var(--rx))) rotateY(calc(-10deg + var(--ry)))}
.hero3d .phone{width:280px;border:9px solid #0C0C10;box-shadow:0 0 0 1.5px #3A3F4B,0 40px 70px -30px rgba(11,22,51,.55),0 18px 30px -18px rgba(11,22,51,.35)}
.hero3d .phone::before{top:10px}
.hero3d .status{padding:10px 20px 0}
.hero3d .brand{padding:14px 18px 0}
.hero3d .toasts{padding:0 8px;bottom:10px}
.chip-a{top:24%;left:-118px}
.chip-b{top:auto;bottom:auto;top:50%;right:-128px}
.orb-shield{top:-4%;right:-46px}
.orb-lock{bottom:10%;left:-58px}
@media (max-width:1180px){.chip-a{left:-60px}.chip-b{right:-60px}}
@media (max-width:560px){.hero3d{min-height:520px}.hero3d .phone{width:240px}.chip-a{left:-4px;top:16%}.chip-b{right:-4px;top:46%}}

/* section 3D accents sit in the heading's top-right corner */
.stack:has(> .sec3d){position:relative}
.sec3d{position:absolute;top:-8px;right:0;width:92px;height:110px;z-index:1}
.sec3d[data-3d="coin"]{width:84px;height:84px}
.sec3d .o3d-shadow{bottom:-14px;height:14px}
.stack.center > .sec3d{right:4%}
@media (max-width:760px){.sec3d{width:64px;height:78px;top:-4px}.sec3d[data-3d="coin"]{width:60px;height:60px}}

/* consistent media alignment inside split sections */
.split > *{min-width:0}
.split{align-items:center}
.tilt-card{justify-self:end;width:100%;max-width:520px}
.tipdemo{justify-self:end}
@media (max-width:900px){.tilt-card,.tipdemo{justify-self:stretch;max-width:none}}

/* small screens: keep the phone clear, no floating chips over the score */
@media (max-width:560px){.h3-chip{display:none}}
.tilt-orb{top:-56px;right:-30px}

/* ==========================================================================
   v9 FLUID CONTAINER (26 Sep 2026): content spans the full width with a
   small responsive side gutter instead of a centred fixed-width column.
   Long text keeps a readable line length on its own.
   ========================================================================== */
:root{--gutter:clamp(20px,3.2vw,56px)}
.wrap,.wrap.navrow,.page-hero .wrap.stack,.legal-hero .wrap{max-width:none;width:100%;padding-inline:var(--gutter)}
.ph3d,.ph3d-coin{right:var(--gutter)}
.ph3d-coin.ph3d-alt{left:var(--gutter)}
.lede,p{max-width:72ch}
.center p,.stack.center .lede{margin-inline:auto}
.plan p,.tile-tx small,.article small,.card p{max-width:none}

/* ==========================================================================
   v10 WIDE CONTAINER + FLOATING NAVBAR (26 Sep 2026)
   Content sits in a wide centred container (1440px) with fluid gutters.
   The navbar is a floating glass bar with a segmented link group.
   ========================================================================== */
:root{--container:1440px;--gutter:clamp(20px,3vw,48px)}
.wrap,.wrap.navrow,.page-hero .wrap.stack,.legal-hero .wrap{max-width:calc(var(--container) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.ph3d,.ph3d-coin{right:max(var(--gutter),calc((100vw - var(--container)) / 2))}
.ph3d-coin.ph3d-alt{left:max(var(--gutter),calc((100vw - var(--container)) / 2))}

/* navbar: floating glass bar */
.site-head{background:transparent;border-bottom:0;padding:12px var(--gutter) 0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;pointer-events:none}
.site-head.scrolled{box-shadow:none}
.site-head .navrow{pointer-events:auto;max-width:var(--container);min-height:66px;padding:0 10px 0 20px;gap:18px;border-radius:20px;
  background:color-mix(in srgb,var(--surface) 78%,transparent);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid var(--hair);box-shadow:0 1px 2px rgba(15,27,61,.04),0 10px 30px -22px rgba(15,27,61,.35);transition:box-shadow .3s var(--ease),background .3s}
.site-head.scrolled .navrow{background:color-mix(in srgb,var(--surface) 90%,transparent);box-shadow:0 1px 2px rgba(15,27,61,.05),0 18px 44px -24px rgba(15,27,61,.45)}
.logo .logo-mark{height:30px}
.logo-word{font-size:20px}

/* segmented link group */
.mainnav{gap:2px;padding:4px;border-radius:14px;background:color-mix(in srgb,var(--ink) 5%,transparent)}
.mainnav > li > a,.mainnav > li > button{padding:8px 14px;border-radius:10px;font-size:14px;font-weight:500;color:var(--ink-2)}
.mainnav > li > a:hover,.mainnav > li > button:hover,.mainnav > li.open > button{background:color-mix(in srgb,var(--surface) 80%,transparent);color:var(--ink)}
.mainnav > li > a[aria-current="page"],.mainnav > li > button.is-current{background:var(--surface);color:var(--brand-ink);box-shadow:0 1px 2px rgba(15,27,61,.08),0 4px 10px -6px rgba(15,27,61,.25)}
:root[data-theme="dark"] .mainnav{background:rgba(255,255,255,.06)}

/* right side */
.head-cta{gap:8px}
.head-link{font:500 14px var(--body);color:var(--ink-2);text-decoration:none;padding:8px 10px;border-radius:10px;transition:color .2s,background .2s}
.head-link:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 5%,transparent)}
.site-head .btn.sm{padding:11px 18px;font-size:14px}
.site-head .btn .ic{width:16px;height:16px}
.icon-btn{width:40px;height:40px}

/* mega-menu and progress bar with the floating bar */
.mega{top:calc(100% + 10px)}
.read-bar{position:fixed;top:0;left:0;right:0;bottom:auto;height:3px;z-index:100}
.toc{top:104px}
.legal-body section{scroll-margin-top:104px}

@media (max-width:1060px){.head-link{display:none}}
@media (max-width:560px){
  .site-head{padding:8px 10px 0}
  .site-head .navrow{min-height:58px;padding:0 8px 0 14px;border-radius:16px}
}

/* soft fade above the floating bar so scrolled content never shows in the gap */
.site-head{background:linear-gradient(var(--paper) 40%,color-mix(in srgb,var(--paper) 0%,transparent))}

/* v11 navbar: no grey tray; clean links with a sliding underline */
.mainnav,:root[data-theme="dark"] .mainnav{background:none;padding:0;gap:6px}
.mainnav > li > a,.mainnav > li > button{position:relative;background:none!important;box-shadow:none!important;padding:10px 12px;color:var(--ink-2);font-weight:500}
.mainnav > li > a::after,.mainnav > li > button::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;border-radius:2px;background:var(--brand-grad);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.mainnav > li > button::after{right:30px}
.mainnav > li > a:hover,.mainnav > li > button:hover,.mainnav > li.open > button{color:var(--ink)}
.mainnav > li > a:hover::after,.mainnav > li > button:hover::after,.mainnav > li.open > button::after{transform:scaleX(1)}
.mainnav > li > a[aria-current="page"],.mainnav > li > button.is-current{color:var(--brand-ink);font-weight:600}
.mainnav > li > a[aria-current="page"]::after,.mainnav > li > button.is-current::after{transform:scaleX(1)}


/* v12: illustrations, contact page, no progress bar */
.read-bar{display:none}
.card.lift .ph{display:grid}
.illo{display:block;width:100%;height:auto;border-radius:20px;box-shadow:0 20px 40px -28px rgba(15,27,61,.45);transition:transform .45s var(--ease)}
.card .illo{border-radius:14px;box-shadow:none;margin:-4px 0 4px}
.card:hover .illo{transform:scale(1.02)}
.illo.avatar{border-radius:24px;aspect-ratio:1}
.stack:hover > .illo.avatar{transform:translateY(-4px)}
#faq .split{align-items:start}
#faq .illo{position:sticky;top:110px}
@media (max-width:900px){#faq .illo{position:static;max-width:520px}}
.card > .chip{justify-self:start}

/* Contact: 3D phone call, brand blue, gentle tilt + ringing waves */
.ph3d-call{width:190px;height:190px}
.o3d-call{animation:callturn 6s ease-in-out infinite}
.call-hs{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:40% 60%;animation:ring 2.6s ease-in-out infinite}
.call-hs .lay{position:absolute;inset:0;width:100%;height:100%}
.call-waves .w0,.call-waves .w1,.call-waves .w2{animation:wave 2.6s ease-in-out infinite}
.call-waves .w1{animation-delay:.18s}.call-waves .w2{animation-delay:.36s}
@keyframes callturn{0%,100%{transform:rotateY(-24deg) rotateX(10deg) translateY(0)}50%{transform:rotateY(18deg) rotateX(4deg) translateY(-10px)}}
@keyframes ring{0%,55%,100%{transform:rotate(0)}8%{transform:rotate(-9deg)}16%{transform:rotate(8deg)}24%{transform:rotate(-6deg)}32%{transform:rotate(4deg)}40%{transform:rotate(-2deg)}}
@keyframes wave{0%,100%{opacity:.25}30%{opacity:1}60%{opacity:.25}}
.o3d-stage.paused .call-hs,.o3d-stage.paused .call-waves *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.o3d-call,.call-hs,.call-waves *{animation:none!important;opacity:1}}


/* ==========================================================================
   v13 PHOTOS, TEAM NOTE, OFFICIAL NUMBERS, COMPARISON TABLE (27 Sep 2026)
   ========================================================================== */
/* photos */
.illo.photo{object-fit:cover;aspect-ratio:16/10;background:var(--paper-2)}
.split > .illo.photo{aspect-ratio:4/3}
#faq .illo.photo{aspect-ratio:4/5;max-height:560px}
.credits{padding:6px 0 28px}
.credits summary{cursor:pointer;font-size:13px;color:var(--muted)}
.credits ul{margin:10px 0 6px;padding-left:18px;display:grid;gap:4px;font-size:12.5px;color:var(--muted)}
.credits a{color:var(--brand-ink)}
.credits p{font-size:12px;color:var(--muted)}

/* team statement */
.team-note{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,4vw,80px);align-items:center}
.team-facts{display:grid;gap:0}
.team-facts > div{display:grid;gap:2px;padding:18px 0;border-top:1px solid var(--hair)}
.team-facts > div:last-child{border-bottom:1px solid var(--hair)}
.team-facts b{font-weight:600;font-size:17px}
.team-facts small{color:var(--muted);font-size:14.5px}
@media (max-width:860px){.team-note{grid-template-columns:1fr}}

/* official numbers */
.stats-band{background:radial-gradient(70% 120% at 50% 0%,#1B3A86 0%,transparent 65%),var(--night);color:#fff}
.stats-band .eyebrow{color:#8FB6FF}
.stats-band h2{color:#fff}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.14)}
.stat-item{display:grid;gap:8px;padding:28px 28px 8px;border-left:1px solid rgba(255,255,255,.14)}
.stat-item:first-child{border-left:0;padding-left:0}
.stat-item b{font:600 clamp(34px,1.6rem + 1.6vw,54px)/1 var(--display);letter-spacing:-.03em;background:linear-gradient(135deg,#7FB0FF,#5CD6FF);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.stat-item span{color:var(--on-night-2);font-size:15px;line-height:1.5;max-width:34ch}
.stats-src{font-size:12.5px;color:var(--on-night-2);max-width:none}
.stats-src a{color:#8FB6FF}
@media (max-width:860px){.stats{grid-template-columns:1fr}.stat-item{border-left:0;padding-left:0;border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:22px}}

/* comparison table: black, light purple, dark blue */
.cmp{--cmp-bg:#0B0B14;--cmp-row:#12121F;--cmp-line:rgba(201,184,255,.14);--cmp-lav:#C9B8FF;--cmp-blue:#1B2A6B;
  position:relative;border-radius:22px;padding:1.5px;overflow:hidden;isolation:isolate;
  background:conic-gradient(from var(--cmp-a,0deg),#1B2A6B,#C9B8FF,#3F5BFF,#1B2A6B);animation:cmpspin 8s linear infinite;box-shadow:0 30px 60px -30px rgba(27,42,107,.7)}
@property --cmp-a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes cmpspin{to{--cmp-a:360deg}}
.cmp table{width:100%;border-collapse:separate;border-spacing:0;background:var(--cmp-bg);border-radius:20.5px;overflow:hidden;color:#EDEBFF;font-size:15px}
.cmp thead th{padding:18px 22px;text-align:left;font:600 12px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--cmp-lav);
  background:linear-gradient(90deg,#1B2A6B,#141B45 60%,#1B1633);border-bottom:1px solid var(--cmp-line)}
.cmp thead th.fam{color:#fff;background:linear-gradient(135deg,#3F2E8F,#1B2A6B)}
.cmp tbody th,.cmp tbody td{padding:16px 22px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--cmp-line)}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp tbody th{font-weight:600;color:#fff;width:46%}
.cmp tbody th small{display:block;margin-top:4px;font-weight:400;font-size:13px;line-height:1.45;color:#A9A3CF}
.cmp td small{display:block;font-size:12.5px;color:#A9A3CF}
.cmp td.fam{background:rgba(201,184,255,.06)}
.cmp tbody tr{transition:background .25s}
.cmp tbody tr:hover{background:rgba(63,91,255,.12)}
.ck{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:9px}
.ck .ic{width:16px;height:16px}
.ck.ok{background:linear-gradient(135deg,#3F5BFF,#C9B8FF);color:#0B0B14;box-shadow:0 6px 14px -6px rgba(201,184,255,.8)}
.ck.no{background:rgba(255,255,255,.06);color:#6E6A92}
/* rows slide in, ticks pop */
.cmp tbody tr{opacity:0;transform:translateY(10px);transition:opacity .55s var(--ease),transform .55s var(--ease),background .25s;transition-delay:calc(var(--r,0) * 90ms)}
.cmp.play tbody tr{opacity:1;transform:none}
.cmp .ck.ok{transform:scale(.4);transition:transform .45s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(var(--r,0) * 90ms + 250ms)}
.cmp.play .ck.ok{transform:none}
@media (max-width:760px){
  .cmp{overflow-x:auto}
  .cmp table{min-width:620px;font-size:14px}
  .cmp tbody th,.cmp tbody td,.cmp thead th{padding:14px 14px}
}
@media (prefers-reduced-motion:reduce){.cmp{animation:none}.cmp tbody tr,.cmp .ck.ok{opacity:1;transform:none;transition:none}}
/* table row labels: dark theme, not the generic light header */
.cmp tbody th{background:transparent;text-transform:none;letter-spacing:0;font:600 15px/1.35 var(--body);color:#fff}
.cmp tbody th small{text-transform:none;letter-spacing:0}