/* =========================================================
   ConvertX landing page styles
   Direction B "Ex-Google Data": deep navy, electric blue,
   green = recovered, amber = what you're losing, mono numerals.
   Mobile-first. One shared sheet across all routes.
   ========================================================= */

/* ---------- self-hosted fonts (latin subsets, variable where the
   foundry ships one). Replaces the Google Fonts request chain so the
   text pipeline is first-party and render-ready in one round trip. ---------- */
@font-face{
  font-family:'Fraunces'; font-style:normal; font-weight:600 700; font-display:swap;
  src:url(fonts/fraunces-normal-600-700.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Fraunces'; font-style:italic; font-weight:600 700; font-display:swap;
  src:url(fonts/fraunces-italic-600-700.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Hanken Grotesk'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url(fonts/hanken-grotesk-variable.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url(fonts/ibm-plex-mono-normal-400.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:600; font-display:swap;
  src:url(fonts/ibm-plex-mono-normal-600.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --navy:#081A33;        /* primary dark bg */
  --navy-2:#0E2647;      /* raised dark surface */
  --navy-3:#13315c;      /* hover / border-ish */
  --blue:#2D7FF9;        /* brand blue: links, accents, glows */
  --blue-d:#1f6ae6;      /* primary CTA fill, WCAG AA on white text (~4.9:1) */
  --blue-dd:#1a5cd0;     /* primary CTA hover */
  --blue-2:#7FB1FF;      /* light accent text on dark */
  --green:#34D399;       /* recovered / positive */
  --green-d:#0a6e47;     /* AA on the mint form-status pill */
  --logo-green:#00E26A;  /* brand mark green, used for the wordmark X */
  --amber:#F59E0B;       /* the leakage / loss figure (data layer) */
  --amber-2:#FBBF24;
  --gold:#F2A007;        /* action layer: CTA gradient base */
  --gold-2:#FFC83D;      /* action layer: CTA gradient top */
  --gold-ink:#160F02;    /* text on gold, warm near-black (9 to 12:1) */
  --gold-d:#8F5E00;      /* deep gold for light surfaces, AA text on white/paper */
  --white:#F3F6FC;       /* off-white display text, never pure #fff */

  --ink:#0B1F3A;         /* text on light */
  --ink-2:#3a4a63;
  --paper:#EDF3FB;       /* light section bg */
  --paper-2:#ffffff;
  --line-l:#dde6f1;      /* light borders */

  --txt:#e3ebf7;         /* text on dark */
  --mut:#93a4bf;         /* muted on dark */
  --line:rgba(255,255,255,.10);

  --maxw:1180px;
  --radius:16px;
  --shadow:0 30px 70px -34px rgba(0,0,0,.55);
  --shadow-blue:0 28px 80px -42px rgba(45,127,249,.85);

  --f-head:'Fraunces', Georgia, serif;               /* editorial display: headlines */
  --f-mono:'IBM Plex Mono', ui-monospace, monospace; /* numerals / data console */
  --f-body:'Hanken Grotesk', system-ui, sans-serif;  /* body + UI */
}

*{ margin:0; padding:0; box-sizing:border-box; }
/* overflow-x lives on html, not body: on body it would make the body its
   own scroll container, which freezes CSS view() scroll timelines */
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; }
body{
  font-family:var(--f-body);
  background:var(--navy);
  color:var(--txt);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(760px 360px at 82% 0%, rgba(45,127,249,.18), transparent 68%),
    radial-gradient(520px 320px at 12% 14%, rgba(52,211,153,.08), transparent 70%);
  z-index:-1;
}
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
button{ font:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input,select{ font:inherit; }
::selection{ background:var(--blue); color:var(--white); }
:focus-visible{ outline:3px solid rgba(127,177,255,.82); outline-offset:3px; border-radius:10px; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 20px; padding-left:max(20px, env(safe-area-inset-left)); padding-right:max(20px, env(safe-area-inset-right)); }
.sec[id], #lead-form, [data-anchor]{ scroll-margin-top:84px; }
.skip{ position:absolute; left:-9999px; top:0; background:var(--blue-d); color:var(--white); padding:10px 16px; border-radius:8px; z-index:200; }
.skip:focus{ left:12px; top:12px; }

/* ---------- section shells ---------- */
.sec{ padding:64px 0; position:relative; }
.sec-dark{ background:var(--navy); color:var(--txt); }
.sec-grad{ background:
  linear-gradient(180deg, rgba(8,26,51,.96), rgba(8,26,51,1)),
  radial-gradient(120% 90% at 82% -10%, #11335f 0%, var(--navy) 56%);
  color:var(--txt);
}
.sec-light{ background:var(--paper); color:var(--ink); }
.eyebrow{ font-family:var(--f-mono); font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--blue-2); margin-bottom:16px; }
.sec-light .eyebrow{ color:var(--blue-dd); }
.sec-head{ max-width:48ch; margin-left:auto; margin-right:auto; text-align:center; }
.sec-head h2{ font-family:var(--f-head); font-weight:700; font-size:clamp(28px,5vw,42px); line-height:1.08; letter-spacing:-.02em; }
.sec-light .sec-head h2{ color:var(--ink); }
.sec-head p{ color:var(--mut); font-size:clamp(16px,2.4vw,18px); margin-top:14px; }
.sec-light .sec-head p{ color:var(--ink-2); }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--f-body); font-weight:800; font-size:16px; padding:16px 24px; border-radius:12px; transition:transform .16s ease, background .15s ease, box-shadow .15s, border-color .15s; line-height:1.15; min-height:48px; text-align:center; }
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--blue-d); color:var(--white); box-shadow:0 14px 30px -12px rgba(45,127,249,.7); }
.btn-primary:hover{ background:var(--blue-dd); }
.btn-amber{ background:var(--amber); color:var(--navy); box-shadow:0 14px 30px -12px rgba(245,158,11,.6); }
.btn-amber:hover{ background:var(--amber-2); }
.btn-ghost{ background:transparent; border:1.5px solid var(--line); color:var(--txt); }
.btn-ghost:hover{ border-color:var(--blue-2); }
.btn-lg{ font-size:17px; padding:18px 28px; }
.btn-block{ width:100%; }
.link-arrow{ font-weight:800; color:var(--blue-2); display:inline-flex; align-items:center; gap:7px; }
.sec-light .link-arrow{ color:var(--blue-d); }
.link-arrow:hover{ gap:11px; }

/* ---------- header ---------- */
.hdr{ position:sticky; top:0; z-index:100; background:rgba(8,26,51,.95); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid rgba(255,255,255,.12); }
.hdr .wrap{ display:flex; align-items:center; justify-content:space-between; height:66px; }
.brand{ display:flex; align-items:center; gap:11px; }
.brand .logo-img{ height:30px; width:auto; }
.brand .logo-mark{ width:38px; height:38px; border-radius:10px; flex:none; box-shadow:0 6px 18px -8px rgba(0,226,106,.45); }
.ftr .brand .logo-mark{ width:34px; height:34px; }
.brand .wordmark{ display:flex; flex-direction:column; line-height:1; }
.brand .wordmark b{ font-family:var(--f-head); font-weight:700; font-size:20px; letter-spacing:-.01em; color:var(--white); }
.brand .wordmark b i{ color:var(--white); font-style:normal; }
.brand .wordmark small{ font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); margin-top:4px; font-weight:700; }
.hdr-cta{ display:none; font-size:14px; padding:11px 18px; white-space:nowrap; }
.cta-short{ display:none; }
.hdr .hdr-cta-sm{ display:none; }

/* ---------- hero ---------- */
.hero{ padding:48px 0 40px; overflow:hidden; }
.hero .wrap{ display:grid; gap:38px; position:relative; }
.hero .wrap > *{ min-width:0; }
.hero .wrap::after{
  content:"";
  position:absolute;
  right:20px;
  top:4px;
  width:190px;
  height:190px;
  border:1px solid rgba(127,177,255,.12);
  border-radius:50%;
  transform:translate(34%,-44%);
  pointer-events:none;
}
.hero h1{ font-family:var(--f-head); font-weight:700; font-size:clamp(38px,8.7vw,64px); line-height:1.02; letter-spacing:-.035em; color:var(--white); max-width:6.8em; text-wrap:balance; }
.hero .sub{ font-size:clamp(16px,3.4vw,19px); color:var(--mut); margin-top:20px; max-width:19em; }
.hero .cta-row{ display:flex; flex-direction:column; gap:16px; margin-top:28px; align-items:flex-start; }
.hero .cta-row .btn{ width:100%; }
.hero .sec-link{ font-weight:800; color:var(--blue-2); font-size:15px; display:inline-flex; align-items:center; gap:9px; padding:13px 4px; margin:-13px -4px; }
.hero .sec-link::after{ content:""; width:22px; height:1.5px; background:currentColor; transition:width .18s ease; }
.hero .sec-link:hover::after{ width:34px; }
.hero .trust{ display:flex; flex-direction:column; gap:9px; margin-top:26px; }
.hero .trust span{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; color:var(--mut); }
.hero .trust svg{ flex:none; color:var(--green); }
.hero-media{ display:grid; gap:0; align-items:end; min-width:0; }
.hero-photo{ position:relative; aspect-ratio:16/10; border:1px solid rgba(255,255,255,.12); border-radius:22px; overflow:hidden; box-shadow:0 30px 80px -42px rgba(0,0,0,.9); background:#07172d; }
.hero-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(8,26,51,.72), rgba(8,26,51,.06) 46%, rgba(8,26,51,.18)),
    linear-gradient(180deg, rgba(8,26,51,.06), rgba(8,26,51,.62));
  pointer-events:none;
}
.hero-photo img{ width:100%; height:100%; object-fit:cover; object-position:58% 50%; filter:saturate(.95) contrast(1.06); }

/* leakage meter card (hero + reused) */
.meter{
  background:
    linear-gradient(180deg,rgba(14,38,71,.98),#0a1f3d),
    radial-gradient(260px 160px at 80% 0%, rgba(45,127,249,.28), transparent 68%);
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  padding:24px;
  box-shadow:var(--shadow), var(--shadow-blue);
  position:relative;
  overflow:hidden;
  max-width:100%;
  margin-top:-54px;
}
.meter::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.08), transparent 34%);
  pointer-events:none;
}
.meter > *{ position:relative; }
.meter .hd{ display:flex; align-items:center; justify-content:space-between; font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--mut); }
.meter .hd span:first-child{ min-width:0; overflow-wrap:anywhere; }
.meter .live{ display:inline-flex; align-items:center; gap:7px; color:var(--green); font-weight:600; }
.meter .live i{ width:7px; height:7px; border-radius:50%; background:var(--green); animation:pulse 1.7s infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(52,211,153,.5)} 70%{box-shadow:0 0 0 9px rgba(52,211,153,0)} 100%{box-shadow:0 0 0 0 rgba(52,211,153,0)} }
.meter .big{ font-family:var(--f-mono); font-weight:600; font-size:clamp(40px,11vw,54px); letter-spacing:-.02em; color:var(--amber); margin:16px 0 4px; }
.meter .cap{ font-size:13.5px; color:var(--mut); line-height:1.45; }
.meter .bars{ display:flex; gap:5px; margin-top:20px; height:46px; align-items:flex-end; }
.meter .bars span{ flex:1; border-radius:3px 3px 0 0; background:linear-gradient(180deg,var(--blue),#1b4f9e); opacity:.9; }
.meter .bars span:nth-child(odd){ background:linear-gradient(180deg,#22406e,#16345c); }
.meter .foot{ display:flex; align-items:center; justify-content:space-between; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); font-size:12.5px; color:var(--mut); }
.meter .foot b{ color:var(--green); font-family:var(--f-mono); }
.reply-preview{ display:flex; gap:12px; align-items:flex-start; margin-top:18px; padding:14px; border:1px solid rgba(127,177,255,.16); border-radius:14px; background:rgba(8,26,51,.56); }
.reply-preview .avatar{ width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex:none; background:var(--blue); color:var(--white); font-family:var(--f-head); font-size:12px; font-weight:700; }
.reply-preview p{ color:var(--txt); font-size:13px; line-height:1.35; }
.reply-preview b{ display:block; color:var(--white); font-weight:800; }
.reply-preview span:not(.avatar){ display:block; color:var(--mut); margin-top:2px; }

.badge{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; color:var(--blue-2); border:1px solid var(--line); padding:8px 14px; border-radius:100px; background:rgba(45,127,249,.08); }

/* ---------- proof strip ---------- */
.proof{ background:linear-gradient(90deg,var(--navy-2),#0b2343); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.proof .wrap{ display:flex; align-items:center; gap:14px; padding:18px 20px; }
.proof .ic{ width:38px; height:38px; border-radius:10px; background:#25D366; flex:none; display:flex; align-items:center; justify-content:center; }
.proof p{ font-size:15px; line-height:1.45; color:var(--txt); }
.proof b{ color:var(--white); font-weight:800; }

/* ---------- calculator ---------- */
.calc{ display:grid; gap:26px; margin-top:36px; }
.calc-inputs{ display:grid; gap:22px; }
.field{ }
.field .lab{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px; }
.field .lab label{ font-size:14.5px; font-weight:700; color:var(--txt); }
.field .val{ display:inline-flex; align-items:center; background:var(--navy); border:1px solid var(--line); border-radius:9px; padding:4px 6px 4px 10px; }
.field .val input{ width:74px; background:transparent; border:none; color:var(--white); font-family:var(--f-mono); font-weight:600; font-size:16px; text-align:right; outline:none; }
.field .val .unit{ font-family:var(--f-mono); font-size:13px; color:var(--mut); padding:0 6px 0 2px; }
/* The input is a 44px-tall touch target; the visible 6px track lives on the
   track pseudo elements so the hit area stays finger-sized. */
input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:44px; background:transparent; outline:none; }
input[type=range]::-webkit-slider-runnable-track{ height:6px; border-radius:6px; background:linear-gradient(90deg, rgba(45,127,249,.65), rgba(255,255,255,.14)); }
input[type=range]::-moz-range-track{ height:6px; border-radius:6px; background:linear-gradient(90deg, rgba(45,127,249,.65), rgba(255,255,255,.14)); }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; margin-top:-11px; border-radius:50%; background:var(--blue); border:3px solid #cfe0ff; box-shadow:0 4px 12px rgba(45,127,249,.5), 0 0 0 6px rgba(45,127,249,.16); cursor:pointer; }
input[type=range]::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background:var(--blue); border:3px solid #cfe0ff; box-shadow:0 0 0 6px rgba(45,127,249,.16); cursor:pointer; }

.calc-out{ background:linear-gradient(180deg,var(--navy-2),#0a1f3d); border:1px solid var(--line); border-radius:20px; padding:30px 26px; box-shadow:var(--shadow); align-self:start; }
.calc-out .lbl{ font-family:var(--f-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--mut); }
.calc-out .num{ font-family:var(--f-mono); font-weight:600; font-size:clamp(44px,13vw,68px); line-height:1; letter-spacing:-.02em; color:var(--amber); margin:10px 0; }
.calc-out .per{ font-size:15px; color:var(--mut); }
.calc-out .formula{ font-size:13.5px; color:var(--mut); line-height:1.5; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.calc-out .formula code{ font-family:var(--f-mono); color:var(--blue-2); }
.calc-out .price{ background:rgba(52,211,153,.08); border:1px solid rgba(52,211,153,.25); border-radius:12px; padding:16px; margin-top:20px; font-size:15px; line-height:1.5; }
.calc-out .price b{ color:var(--white); font-weight:800; }
.calc-out .price .keep{ color:var(--green); font-weight:800; }
.calc-out .btn{ margin-top:18px; }

/* ---------- how it works ---------- */
.steps{ display:grid; gap:18px; margin-top:36px; }
.step{ background:var(--paper-2); border:1px solid var(--line-l); border-radius:var(--radius); padding:26px 24px; position:relative; overflow:hidden; box-shadow:0 18px 42px -36px rgba(11,31,58,.34); }
.step::after{ content:""; position:absolute; inset:auto 22px 0 22px; height:3px; background:var(--blue); opacity:.18; border-radius:999px 999px 0 0; }
.step .n{ font-family:var(--f-mono); font-weight:600; font-size:13px; color:var(--white); background:var(--blue-d); width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; }
.step h3{ font-family:var(--f-head); font-weight:700; font-size:19px; color:var(--ink); margin:16px 0 8px; letter-spacing:-.01em; }
.step p{ color:var(--ink-2); font-size:15.5px; }
.step .tag{ display:inline-block; margin-top:14px; font-family:var(--f-mono); font-size:12px; font-weight:600; color:var(--blue-d); }

/* ---------- features ---------- */
.feats{ display:grid; gap:1px; margin-top:36px; background:var(--line-l); border:1px solid var(--line-l); border-radius:var(--radius); overflow:hidden; }
.feat{ background:var(--paper-2); padding:26px 24px; transition:background .18s ease, transform .18s ease; }
.feat:hover{ background:#f8fbff; transform:translateY(-1px); }
.feat .ic{ width:42px; height:42px; border-radius:11px; background:rgba(45,127,249,.1); color:var(--blue-d); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.feat p{ color:var(--ink); font-size:15.5px; font-weight:600; line-height:1.45; }
.feat p b{ font-weight:800; }

/* ---------- agency band ---------- */
.agency{ background:radial-gradient(110% 120% at 90% 0%, #11335f, var(--navy) 60%); }
.agency .box{ display:grid; gap:18px; align-items:center; }
.agency h2{ font-family:var(--f-head); font-weight:700; font-size:clamp(24px,4.6vw,34px); letter-spacing:-.02em; color:var(--white); }
.agency p{ color:var(--mut); font-size:17px; max-width:48ch; }
.agency .ic-big{ width:56px; height:56px; border-radius:14px; background:rgba(45,127,249,.12); color:var(--blue-2); display:flex; align-items:center; justify-content:center; }

/* ---------- proof points ---------- */
.proof-story{ display:grid; gap:22px; margin-top:36px; align-items:center; }
.proof-story figure{ aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line-l); box-shadow:0 24px 64px -46px rgba(11,31,58,.5); background:#dfe7f2; }
.proof-story img{ width:100%; height:100%; object-fit:cover; object-position:58% 50%; filter:saturate(.95) contrast(1.03); }
.proof-story h3{ font-family:var(--f-head); font-weight:700; font-size:clamp(22px,4vw,32px); line-height:1.1; letter-spacing:-.02em; color:var(--ink); max-width:18ch; }
.proof-story p{ color:var(--ink-2); font-size:16px; line-height:1.6; margin-top:12px; max-width:44ch; }
.proof-grid{ display:grid; gap:18px; margin-top:36px; }
.proof-card{ background:var(--paper-2); border:1px solid var(--line-l); border-radius:var(--radius); padding:28px 24px; min-height:100%; box-shadow:0 18px 42px -36px rgba(11,31,58,.34); }
.proof-card span{ width:44px; height:44px; border-radius:12px; background:rgba(45,127,249,.1); color:var(--blue-d); display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.proof-card h3{ font-family:var(--f-head); color:var(--ink); font-size:20px; line-height:1.15; letter-spacing:-.015em; }
.proof-card p{ color:var(--ink-2); font-size:15.5px; line-height:1.55; margin-top:10px; }

/* ---------- offer ---------- */
.offer .obox{
  background:
    linear-gradient(180deg,var(--navy-2),#0a1f3d),
    radial-gradient(360px 220px at 86% 0%, rgba(245,158,11,.16), transparent 70%);
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  padding:34px 26px;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
.offer .ribbon{ display:inline-flex; align-items:center; gap:8px; font-family:var(--f-mono); font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--amber); background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.3); padding:7px 14px; border-radius:100px; }
.offer h2{ font-family:var(--f-head); font-weight:700; font-size:clamp(26px,5vw,38px); color:var(--white); letter-spacing:-.02em; margin:18px 0 6px; }
.offer .checklist{ display:grid; gap:14px; margin:24px 0; }
.offer .checklist li{ display:flex; gap:13px; align-items:flex-start; list-style:none; font-size:16px; color:var(--txt); }
.offer .checklist .ck{ flex:none; width:24px; height:24px; border-radius:7px; background:rgba(52,211,153,.15); color:var(--green); display:flex; align-items:center; justify-content:center; margin-top:1px; }
.offer .checklist b{ color:var(--white); font-weight:800; }
.offer .urgency{ display:flex; align-items:center; gap:11px; font-size:15px; font-weight:700; color:var(--amber-2); background:rgba(245,158,11,.08); border-radius:11px; padding:14px 16px; margin-bottom:22px; }

/* ---------- FAQ ---------- */
.faq{ margin-top:34px; border-top:1px solid var(--line-l); max-width:820px; margin-left:auto; margin-right:auto; }
.faq details{ border-bottom:1px solid var(--line-l); }
.faq summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 4px; font-family:var(--f-head); font-weight:600; font-size:clamp(17px,3vw,20px); color:var(--ink); letter-spacing:-.01em; }
.faq summary::-webkit-details-marker{ display:none; }
/* The +/x glyph is drawn with pseudo-element bars so only the icon rotates on
   open; the rounded-square button keeps its silhouette in both states. */
.faq summary .pm{ flex:none; width:30px; height:30px; border-radius:8px; border:1.5px solid var(--line-l); display:flex; align-items:center; justify-content:center; color:transparent; transition:background .2s, border-color .2s; font-size:18px; position:relative; }
.faq summary .pm::before,
.faq summary .pm::after{ content:""; position:absolute; left:50%; top:50%; background:var(--blue-d); border-radius:1px; transition:transform .2s ease, background .2s; }
.faq summary .pm::before{ width:12px; height:2px; transform:translate(-50%,-50%); }
.faq summary .pm::after{ width:2px; height:12px; transform:translate(-50%,-50%); }
.faq details[open] summary .pm{ background:var(--blue); border-color:var(--blue); }
.faq details[open] summary .pm::before,
.faq details[open] summary .pm::after{ background:#fff; transform:translate(-50%,-50%) rotate(45deg); }
.faq .ans{ padding:0 4px 24px; color:var(--ink-2); font-size:16px; line-height:1.6; max-width:64ch; }

/* ---------- form ---------- */
.final .wrap{ display:grid; gap:36px; }
.form-card{ background:var(--paper-2); border-radius:22px; padding:30px 24px; box-shadow:var(--shadow), 0 0 0 1px rgba(255,255,255,.7) inset; color:var(--ink); }
.form-card .fhd{ font-family:var(--f-head); font-weight:700; font-size:22px; color:var(--ink); letter-spacing:-.01em; }
.form-card .fsub{ color:var(--ink-2); font-size:15px; margin-top:6px; margin-bottom:22px; }
.frow{ display:grid; gap:16px; }
.fg{ display:flex; flex-direction:column; gap:7px; }
.fg label{ font-size:13.5px; font-weight:700; color:var(--ink); }
.fg .req{ color:var(--blue-d); }
.fg input, .fg select{ background:#fff; border:1.5px solid var(--line-l); border-radius:11px; padding:14px 14px; font-size:16px; color:var(--ink); outline:none; transition:border-color .15s, box-shadow .15s, background .15s; width:100%; }
.fg input:hover, .fg select:hover{ background:#fbfdff; }
.fg input:focus, .fg select:focus{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(45,127,249,.15); }
.fg input.err, .fg select.err{ border-color:#e0524a; box-shadow:0 0 0 3px rgba(224,82,74,.12); }
.fg .hint{ font-size:14px; color:var(--ink-2); }
.fg .msg{ font-size:14px; color:#d83b32; font-weight:600; display:none; }
.fg.invalid .msg{ display:block; }
.phone-wrap{ display:flex; align-items:stretch; }
.phone-wrap .cc{ display:flex; align-items:center; padding:0 12px; background:var(--paper); border:1.5px solid var(--line-l); border-right:none; border-radius:11px 0 0 11px; font-family:var(--f-mono); font-weight:600; font-size:15px; color:var(--ink-2); }
.phone-wrap input{ border-radius:0 11px 11px 0; }
.consent{ display:flex; gap:12px; align-items:flex-start; margin-top:6px; }
.consent input{ width:20px; height:20px; margin-top:2px; flex:none; accent-color:var(--blue); }
.consent label{ font-size:14px; color:var(--ink-2); line-height:1.45; font-weight:500; }
.consent a{ color:var(--blue-d); font-weight:700; text-decoration:underline; }
/* block layout so the icon flows with the first line instead of floating
   beside wrapped text */
.form-note{ font-size:13.5px; color:var(--ink-2); text-align:center; margin-top:14px; display:block; }
.form-note svg{ display:inline-block; vertical-align:-2px; margin-right:5px; }
.final .aside h2{ font-family:var(--f-head); font-weight:700; font-size:clamp(26px,5vw,40px); color:var(--white); letter-spacing:-.025em; line-height:1.06; }
.final .aside p{ color:var(--mut); font-size:17px; margin-top:16px; max-width:40ch; }
.final .aside .mini{ display:grid; gap:12px; margin-top:26px; }
.final .aside .mini span{ display:flex; align-items:center; gap:11px; font-size:15px; color:var(--txt); font-weight:600; }
.final .aside .mini svg{ color:var(--green); flex:none; }

/* ---------- footer ---------- */
.ftr{ background:#050f1f; border-top:1px solid var(--line); padding:40px 0 30px; }
.ftr .wrap{ display:grid; gap:22px; }
.ftr .brand .wordmark b{ font-size:18px; }
.ftr .cols{ display:grid; gap:20px; }
.ftr p, .ftr a{ color:var(--mut); font-size:14px; line-height:1.6; }
.ftr a:hover{ color:var(--blue-2); }
.ftr .links{ display:flex; flex-wrap:wrap; gap:8px 18px; }
.ftr .legal{ border-top:1px solid var(--line); padding-top:20px; font-size:12.5px; color:#7d90ad; }
.ftr .legal a{ font-size:12.5px; }

/* ---------- thank-you ---------- */
.ty{ min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; background:radial-gradient(120% 90% at 50% -10%, #11335f 0%, var(--navy) 56%); padding:40px 20px; }
.ty .inner{ max-width:560px; }
.ty .check{ width:88px; height:88px; border-radius:50%; background:rgba(52,211,153,.14); border:1px solid rgba(52,211,153,.4); display:flex; align-items:center; justify-content:center; margin:0 auto 28px; color:var(--green); }
.ty h1{ font-family:var(--f-head); font-weight:700; font-size:clamp(32px,8vw,52px); color:var(--white); letter-spacing:-.025em; line-height:1.05; }
.ty p{ color:var(--mut); font-size:clamp(16px,3.4vw,19px); margin-top:18px; }
.ty .ring{ position:relative; width:180px; height:180px; margin:34px auto; }
.ty .ring svg{ transform:rotate(-90deg); }
.ty .ring .t{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ty .ring .t b{ font-family:var(--f-mono); font-weight:600; font-size:46px; color:var(--white); line-height:1; }
.ty .ring .t span{ font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--mut); margin-top:6px; }
.ty .wa-link{ display:inline-flex; align-items:center; gap:10px; margin-top:18px; font-weight:800; color:var(--navy); background:#25D366; padding:14px 22px; border-radius:12px; white-space:nowrap; }
.ty .fallback{ font-size:14px; color:var(--mut); margin-top:30px; }

/* ---------- legal page ---------- */
.legal-page{ padding:54px 0 70px; background:var(--paper); color:var(--ink); min-height:70vh; }
.legal-page .wrap{ max-width:760px; }
.legal-page h1{ font-family:var(--f-head); font-weight:700; font-size:clamp(28px,6vw,40px); color:var(--ink); letter-spacing:-.02em; }
.legal-page .upd{ font-family:var(--f-mono); font-size:12px; color:var(--ink-2); margin-top:8px; }
.legal-page h2{ font-family:var(--f-head); font-weight:700; font-size:20px; color:var(--ink); margin:32px 0 10px; }
.legal-page p, .legal-page li{ color:var(--ink-2); font-size:16px; line-height:1.65; margin-bottom:12px; }
.legal-page ul{ padding-left:20px; }
.legal-page a{ color:var(--blue-d); font-weight:700; text-decoration:underline; }

/* =========================================================
   Responsive, tablet and up
   ========================================================= */
@media (min-width:680px){
  .wrap{ padding:0 32px; padding-left:max(32px, env(safe-area-inset-left)); padding-right:max(32px, env(safe-area-inset-right)); }
  .sec{ padding:80px 0; }
  .hero{ padding:56px 0 48px; }
  .hero .cta-row{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:16px 20px; }
  .hero .cta-row .btn{ width:auto; flex:none; white-space:nowrap; }
  .hero .sec-link{ white-space:nowrap; flex:none; }
  .hero .trust{ flex-flow:row wrap; gap:10px 20px; }
  .steps{ grid-template-columns:repeat(3,1fr); }
  .feats{ grid-template-columns:repeat(2,1fr); }
  .proof-grid{ grid-template-columns:repeat(3,1fr); }
  .proof-story{ grid-template-columns:1.35fr .65fr; gap:34px; }
  .frow.two{ grid-template-columns:1fr 1fr; }
  .ftr .cols{ grid-template-columns:1.4fr 1fr 1fr; }
  .agency .box{ grid-template-columns:auto 1fr auto; gap:26px; }
  .hdr-cta{ display:inline-flex; }
}
@media (min-width:980px){
  .hero .wrap{ grid-template-columns:1.12fr .88fr; align-items:center; gap:52px; }
  .hero{ padding:78px 0 62px; }
  .hero-media .meter{ width:min(86%,470px); justify-self:end; margin-right:24px; }
  .calc{ grid-template-columns:1fr .92fr; align-items:start; gap:40px; }
  .feats{ grid-template-columns:repeat(3,1fr); }
  .final .wrap{ grid-template-columns:.9fr 1.1fr; align-items:start; }
  .final .aside{ position:sticky; top:90px; }
  .hdr-cta{ font-size:14px; }
  .offer .obox{ padding:44px 40px; }
  .form-card{ padding:36px 34px; }
}

@media (max-width:430px){
  .brand .wordmark small{ font-size:8px; letter-spacing:.1em; }
  .btn-lg{ width:100%; white-space:normal; line-height:1.12; text-wrap:balance; }
  .meter{ padding:20px; }
  .meter .foot{ align-items:flex-start; gap:10px; flex-direction:column; }
  .field .lab{ align-items:flex-start; flex-direction:column; }
  .field .val input{ text-align:left; }
  .offer .urgency{ align-items:flex-start; }
}

@media (max-width:680px){
  .hero,
  .sec-head,
  .proof-story,
  .proof-card,
  .step,
  .feat,
  .agency .box,
  .offer .obox,
  .final .aside{
    text-align:center;
  }
  .hero h1,
  .hero .sub,
  .sec-head,
  .proof-story h3,
  .proof-story p,
  .proof p,
  .agency p,
  .final .aside p{
    max-width:310px;
    margin-left:auto;
    margin-right:auto;
  }
  .hero .cta-row,
  .hero .trust,
  .proof .wrap,
  .offer .urgency,
  .final .aside .mini span{
    align-items:center;
    justify-content:center;
  }
  .hero .trust span,
  .proof .wrap,
  .offer .checklist li,
  .offer .urgency,
  .final .aside .mini span{
    text-align:center;
  }
  .proof .wrap{
    flex-direction:column;
  }
  .proof p{
    width:100%;
  }
  .hero .trust span,
  .offer .checklist li,
  .final .aside .mini span{
    justify-content:center;
  }
  .hero .cta-row .btn,
  .meter{
    width:100%;
    max-width:310px;
    justify-self:center;
  }
  .hero-photo{ max-width:310px; aspect-ratio:4/3; justify-self:center; }
  .hero-photo img{ object-position:66% 50%; }
  .hero-media{ gap:0; }
  .hero-media .meter{ margin-top:-34px; }
  .meter .hd{ align-items:flex-start; gap:8px; flex-direction:column; }
  .meter .foot{ align-items:center; }
  .step .n,
  .feat .ic,
  .proof-card span,
  .agency .ic-big,
  .offer .checklist .ck{
    margin-left:auto;
    margin-right:auto;
  }
  .proof-story{ margin-top:30px; }
  .ftr{ text-align:center; }
  .ftr .wrap{ justify-items:center; }
  .ftr .brand,
  .ftr .cols,
  .ftr .legal{ width:100%; max-width:320px; }
  .ftr .brand .wordmark,
  .ftr .links{ justify-content:center; }
  .ftr p{ margin-left:auto; margin-right:auto; }
  .ftr .links{ gap:8px 16px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; scroll-behavior:auto !important; transition:none !important; }
}

/* =========================================================
   POLISH LAYER, additive refinements
   Sharpens the existing "ex-Google Data" aesthetic with editorial
   detail, depth cues, monospace number drama, scroll-revealed
   atmosphere, and crisper micro-interactions. Mobile-first.
   ========================================================= */

/* ---------- scroll progress bar (top of viewport) ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:2px;
  z-index:200; pointer-events:none;
  background:rgba(255,255,255,.04);
}
.scroll-progress i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--blue) 0%, var(--green) 60%, var(--amber) 100%);
  box-shadow:0 0 14px rgba(45,127,249,.55);
  transition:width .12s linear;
}

/* live / online indicator pulse (used by the leakage meter, calc badge,
   and the form assistant-online status, all real "live" states) */
@keyframes eyebrow-pulse{
  0%,100%{ opacity:.55; transform:scale(.92); }
  50%{ opacity:1; transform:scale(1.05); }
}

/* ---------- hero atmospherics ---------- */
.hero{ position:relative; }
.hero .grid-bg{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(rgba(127,177,255,.10) 1px, transparent 1px);
  background-size:24px 24px;
  background-position:0 0;
  -webkit-mask-image:radial-gradient(82% 70% at 28% 38%, #000 30%, transparent 88%);
          mask-image:radial-gradient(82% 70% at 28% 38%, #000 30%, transparent 88%);
  opacity:.85;
}
.hero .wrap{ position:relative; z-index:1; }

/* keyword highlight inside H1 */
.hero h1 .mark{
  position:relative; color:var(--white); white-space:nowrap;
  background:transparent; padding:0 .05em;
}
.hero h1 .mark::before{
  content:""; position:absolute; left:-2%; right:-2%; bottom:.06em; height:.36em;
  background:linear-gradient(90deg, rgba(245,158,11,.85), rgba(251,191,36,.55));
  z-index:-1; border-radius:6px;
  transform:skewX(-7deg);
  box-shadow:0 6px 24px -10px rgba(245,158,11,.55);
}

/* hero CTA arrow micro-motion */
.btn .btn-arrow{ transition:transform .18s ease; }
.btn:hover .btn-arrow{ transform:translateX(3px); }

/* trust strip refresh */
.hero .trust{ align-items:center; gap:10px 14px; }
.hero .trust span{ font-size:13.5px; }
/* Separator pipes dangle at line ends whenever the trust row wraps, which it
   does at most widths; the flex gap is enough separation on its own. */
.trust-sep{ display:none; }

.hero-photo{ z-index:1; }

/* meter polish */
.meter{ transition:transform .24s ease, box-shadow .24s ease; }
.meter:hover{ transform:translateY(-2px); box-shadow:var(--shadow), 0 38px 100px -42px rgba(45,127,249,.95); }
.meter .big{ position:relative; display:inline-block; }
.meter .big::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background:linear-gradient(90deg, var(--amber), transparent);
  border-radius:2px; opacity:.7;
}

/* ---------- proof strip polish ---------- */
.proof{ position:relative; }
.proof::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(127,177,255,.35), transparent);
}
.proof .wrap{ position:relative; }
.proof-timer{
  display:none; align-items:center; gap:8px;
  margin-left:auto; padding:8px 14px; border-radius:10px;
  background:rgba(127,177,255,.08);
  border:1px solid rgba(127,177,255,.18);
  font-family:var(--f-mono); color:var(--blue-2);
  white-space:nowrap;
}
.proof-timer b{ font-size:17px; font-weight:600; color:var(--white); letter-spacing:-.01em; }
.proof-timer small{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); }
@media (min-width:680px){
  .proof-timer{ display:inline-flex; }
}

/* ---------- calculator polish ---------- */
.calc-out{ position:relative; overflow:hidden; }
.calc-out::before{
  content:""; position:absolute; right:-30%; top:-30%;
  width:380px; height:380px; border-radius:50%;
  background:radial-gradient(circle, rgba(245,158,11,.13), transparent 64%);
  pointer-events:none;
}
.calc-out .lbl{ display:flex; align-items:center; gap:10px; }
.calc-out .lbl .live{
  display:inline-flex; align-items:center; gap:7px;
  font-size:10px; letter-spacing:.1em; color:var(--green); font-weight:700;
  padding:3px 8px; border-radius:100px;
  background:rgba(52,211,153,.08); border:1px solid rgba(52,211,153,.25);
}
.calc-out .lbl .live i{
  width:6px; height:6px; border-radius:50%; background:var(--green);
  box-shadow:0 0 6px var(--green);
  animation:eyebrow-pulse 1.6s ease-in-out infinite;
}
.calc-out .twoway{ font-size:14px; line-height:1.55; color:var(--mut); margin-top:14px; }
.calc-out .twoway::before{
  content:""; display:block; width:26px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--green), var(--blue-2)); margin-bottom:10px;
}
.calc-out .num{ position:relative; display:inline-block; }
.calc-out .num::after{
  content:""; position:absolute; left:0; bottom:-2px; width:100%; height:3px;
  background:linear-gradient(90deg, var(--amber) 0%, transparent 100%);
  border-radius:3px; opacity:.7;
}

/* slider track refinement */
input[type=range]{
  transition:filter .18s ease;
}
input[type=range]:hover{ filter:brightness(1.1); }
input[type=range]::-webkit-slider-thumb{ transition:transform .14s ease, box-shadow .14s ease; }
input[type=range]:hover::-webkit-slider-thumb{ transform:scale(1.08); box-shadow:0 6px 18px rgba(45,127,249,.6); }

/* ---------- how it works ---------- */
.steps{ position:relative; }
.step{ transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; position:relative; z-index:1; }
.step:hover{ transform:translateY(-3px); box-shadow:0 28px 64px -36px rgba(11,31,58,.36); border-color:rgba(45,127,249,.22); }
.step .n{
  font-size:14px; width:42px; height:38px; border-radius:11px;
  background:linear-gradient(180deg, var(--blue-d), var(--blue-dd));
  box-shadow:0 8px 20px -10px rgba(45,127,249,.7), inset 0 1px 0 rgba(255,255,255,.25);
  letter-spacing:.04em;
}
.step::after{
  background:linear-gradient(90deg, var(--blue), var(--green));
  opacity:0; transition:opacity .22s ease;
}
.step:hover::after{ opacity:.7; }

/* ---------- features: cleaner hover ---------- */
.feat{ position:relative; }
.feat::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg, var(--blue), var(--green));
  transform:scaleY(0); transform-origin:top center;
  transition:transform .25s ease;
}
.feat:hover::before{ transform:scaleY(1); }
.feat .ic{ transition:transform .22s ease, background .22s ease; }
.feat:hover .ic{ transform:rotate(-4deg) scale(1.04); background:rgba(45,127,249,.18); }

/* ---------- agency band polish ---------- */
.agency .box{
  background:linear-gradient(180deg, rgba(45,127,249,.05), rgba(45,127,249,.0));
  border:1px solid rgba(127,177,255,.16);
  border-radius:20px;
  padding:28px 26px;
}
@media (min-width:680px){
  .agency .box{ padding:32px 34px; }
}

/* ---------- proof story polish ---------- */
.proof-story figure{ position:relative; }
.proof-card{ position:relative; overflow:hidden; transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.proof-card::before{
  content:""; position:absolute; left:0; top:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--blue) 0%, var(--green) 100%);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .3s ease;
}
.proof-card:hover{ transform:translateY(-3px); box-shadow:0 28px 64px -36px rgba(11,31,58,.4); border-color:rgba(45,127,249,.24); }
.proof-card:hover::before{ transform:scaleX(1); }
.proof-card span{ transition:background .22s ease, transform .22s ease; }
.proof-card:hover span{ background:rgba(45,127,249,.18); transform:rotate(-4deg); }

/* ---------- testimonials (dark section, elevated cards) ---------- */
.tlist{ display:grid; gap:18px; margin-top:36px; }
.tcard{
  background:linear-gradient(180deg,var(--navy-2),#0a1f3d);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px 24px;
  box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:14px;
  position:relative; overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.tcard::before{
  content:""; position:absolute; left:0; top:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--green) 0%, var(--blue-2) 100%);
  transform:scaleX(0); transform-origin:left center; transition:transform .3s ease;
}
.tcard:hover{ transform:translateY(-3px); border-color:rgba(127,177,255,.24); box-shadow:var(--shadow), var(--shadow-blue); }
.tcard:hover::before{ transform:scaleX(1); }
.tcard .stars{ color:var(--amber-2); font-size:14px; letter-spacing:2px; line-height:1; }
.tcard blockquote{ color:var(--txt); font-size:15.5px; line-height:1.6; font-weight:500; }
.tcard .who{ display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:4px; }
.tcard .ava{ width:42px; height:42px; border-radius:11px; flex:none; display:flex; align-items:center; justify-content:center; background:var(--blue-d); color:var(--white); font-family:var(--f-head); font-weight:700; font-size:14px; }
.tcard .who b{ display:block; color:var(--white); font-weight:800; font-size:14.5px; letter-spacing:-.01em; }
.tcard .who span{ display:block; color:var(--mut); font-size:13px; margin-top:2px; }
.tnote{ font-family:var(--f-mono); font-size:12.5px; letter-spacing:.04em; color:var(--mut); margin-top:22px; display:flex; align-items:center; gap:8px; }
.tnote svg{ color:var(--green); flex:none; }
@media (min-width:680px){
  .tlist{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:680px){
  .tcard{ text-align:left; }
  .tcard .who{ justify-content:flex-start; }
}

/* ---------- centred symmetric grids ----------
   Section intros are centred (.sec-head, above). The symmetric icon-card
   grids read better with their icons and copy centred too. Asymmetric
   blocks (hero, calculator I/O, proof story, form) and quote cards stay
   in their natural left alignment. */
.steps .step,
.feats .feat,
.proof-card{ text-align:center; }
.steps .step .n,
.feats .feat .ic,
.proof-card span{ margin-left:auto; margin-right:auto; }

/* ---------- offer polish ---------- */
.offer .obox{
  background:
    linear-gradient(180deg,var(--navy-2),#0a1f3d),
    radial-gradient(420px 280px at 86% -10%, rgba(245,158,11,.22), transparent 70%),
    radial-gradient(360px 240px at 14% 110%, rgba(45,127,249,.18), transparent 70%);
}
.offer .obox::after{
  content:""; position:absolute; inset:-1px;
  border-radius:22px; pointer-events:none;
  background:linear-gradient(135deg, rgba(245,158,11,.4), transparent 30%, transparent 70%, rgba(45,127,249,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  padding:1px; opacity:.6;
}
.offer .ribbon{
  box-shadow:0 0 0 4px rgba(245,158,11,.08);
}
.offer .urgency{
  border:1px solid rgba(245,158,11,.22);
  position:relative; overflow:hidden;
}
.offer .urgency::before{
  content:""; position:absolute; left:-30%; top:0; bottom:0; width:30%;
  background:linear-gradient(90deg, transparent, rgba(245,158,11,.16), transparent);
  animation:sheen 3.4s ease-in-out infinite;
}
@keyframes sheen{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(440%); }
}

/* ---------- FAQ polish ---------- */
.faq summary{ transition:color .18s ease, padding-left .18s ease; }
.faq summary:hover{ color:var(--blue-d); padding-left:8px; }
.faq details[open] summary{ color:var(--ink); }
.faq .ans{
  animation:faq-in .26s ease;
}
@keyframes faq-in{
  from{ opacity:0; transform:translateY(-4px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ---------- form polish ---------- */
.form-card{ position:relative; overflow:hidden; }
.form-card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg, var(--blue), var(--green), var(--amber));
  opacity:.9;
}
.form-status{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--green-d);
  padding:6px 11px; border-radius:100px;
  background:rgba(52,211,153,.1); border:1px solid rgba(52,211,153,.28);
  margin-bottom:14px;
}
.form-status i{
  width:6px; height:6px; border-radius:50%; background:var(--green);
  box-shadow:0 0 8px var(--green);
  animation:eyebrow-pulse 1.6s ease-in-out infinite;
}
.fg input, .fg select{
  background:linear-gradient(180deg, #fff, #fbfdff);
}
.fg input:focus, .fg select:focus{
  background:#fff;
  box-shadow:0 0 0 3px rgba(45,127,249,.15), 0 8px 22px -16px rgba(45,127,249,.6);
}
.form-card button[type=submit]{ position:relative; overflow:hidden; }
.form-card button[type=submit]::after{
  content:""; position:absolute; left:-30%; top:0; bottom:0; width:30%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transition:transform .6s ease;
  transform:translateX(0);
}
.form-card button[type=submit]:hover::after{ transform:translateX(450%); }

/* ---------- footer polish ---------- */
.ftr{ position:relative; }
.ftr::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(127,177,255,.28), transparent);
}

/* ---------- hero entrance ----------
   One orchestrated load sequence instead of generic scroll-fades: copy
   staggers in, the amber keyword highlight sweeps in, the meter bars rise
   like live data, and the reply toast arrives last, like a real WhatsApp
   notification landing. LCP elements (h1, hero photo) never change opacity,
   only transform, so paint metrics are untouched. */
@keyframes hero-rise{ from{ transform:translateY(16px); } to{ transform:none; } }
@keyframes hero-fade-rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes mark-sweep{ from{ transform:skewX(-7deg) scaleX(0); } to{ transform:skewX(-7deg) scaleX(1); } }
@keyframes toast-in{ from{ opacity:0; transform:translateY(12px) scale(.96); } to{ opacity:1; transform:none; } }
@keyframes bar-rise{ from{ transform:scaleY(.12); } to{ transform:scaleY(1); } }

.js .hero h1{ animation:hero-rise .6s cubic-bezier(.22,.9,.32,1) both; }
.js .hero .eyebrow{ opacity:0; animation:hero-fade-rise .55s cubic-bezier(.22,.9,.32,1) .05s forwards; }
.js .hero .sub{ opacity:0; animation:hero-fade-rise .6s cubic-bezier(.22,.9,.32,1) .28s forwards; }
.js .hero .cta-row{ opacity:0; animation:hero-fade-rise .6s cubic-bezier(.22,.9,.32,1) .42s forwards; }
.js .hero .trust{ opacity:0; animation:hero-fade-rise .6s cubic-bezier(.22,.9,.32,1) .56s forwards; }
.js .hero-media{ animation:hero-rise .7s cubic-bezier(.22,.9,.32,1) .2s both; }
.js .hero h1 .mark::before{ transform:skewX(-7deg) scaleX(0); transform-origin:left center; animation:mark-sweep .5s cubic-bezier(.3,.8,.3,1) .8s forwards; }
.js .hero .reply-preview{ opacity:0; animation:toast-in .55s cubic-bezier(.2,.9,.3,1.06) 1.35s forwards; }
.js .hero .meter .bars span{ transform-origin:bottom; animation:bar-rise .65s cubic-bezier(.22,.9,.32,1) backwards; }
.js .hero .meter .bars span:nth-child(1){ animation-delay:.85s; }
.js .hero .meter .bars span:nth-child(2){ animation-delay:.91s; }
.js .hero .meter .bars span:nth-child(3){ animation-delay:.97s; }
.js .hero .meter .bars span:nth-child(4){ animation-delay:1.03s; }
.js .hero .meter .bars span:nth-child(5){ animation-delay:1.09s; }
.js .hero .meter .bars span:nth-child(6){ animation-delay:1.15s; }
.js .hero .meter .bars span:nth-child(7){ animation-delay:1.21s; }
.js .hero .meter .bars span:nth-child(8){ animation-delay:1.27s; }

/* The global reduced-motion kill removes animations, so anything that starts
   at opacity:0 must be forced visible here. */
@media (prefers-reduced-motion:reduce){
  .js .hero .eyebrow,
  .js .hero .sub,
  .js .hero .cta-row,
  .js .hero .trust,
  .js .hero .reply-preview{ opacity:1; transform:none; }
  .js .hero h1 .mark::before{ transform:skewX(-7deg); }
}

/* ---------- scroll reveal ----------
   Only hide when JS is available (html.js). If the script fails or is
   disabled, every section stays fully visible, so content and CTAs are
   never trapped behind opacity:0. */
.js .reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.22,.9,.32,1);
  transition-delay:var(--reveal-delay, 0ms);
  will-change:opacity, transform;
}
.js .reveal.in{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion:reduce){
  .js .reveal{ opacity:1; transform:none; }
}

/* ---------- sticky mobile CTA bar ----------
   Long mobile page means the header CTA scrolls away. This keeps the
   single conversion action (book the audit, routed through the form so
   gclid + conversion tracking are preserved) one tap away. Mobile only;
   reveals after the hero, hides once the form is on screen. */
.mobile-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  display:flex; align-items:center; gap:14px;
  padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  background:rgba(8,26,51,.92);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-top:1px solid rgba(127,177,255,.18);
  box-shadow:0 -18px 40px -28px rgba(0,0,0,.8);
  transform:translateY(120%);
  visibility:hidden;
  transition:transform .32s cubic-bezier(.22,.9,.32,1), visibility 0s .32s;
}
.mobile-cta.show{ transform:translateY(0); visibility:visible; transition-delay:0s; }
.mobile-cta .mc-copy{ display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.mobile-cta .mc-copy b{ color:var(--white); font-size:14px; font-weight:800; letter-spacing:-.01em; }
.mobile-cta .mc-copy span{ color:var(--mut); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mobile-cta .btn{ margin-left:auto; flex:none; padding:13px 18px; font-size:15px; min-height:46px; white-space:nowrap; }
@media (min-width:680px){
  .mobile-cta{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .mobile-cta{ transition:none; }
}

/* ---------- section seam where testimonials were removed ----------
   The light proof section and the dark offer meet directly now; both sides
   get extra breathing room so the hard light-to-dark cut reads as a
   deliberate act break. */
.offer{ padding-top:84px; }
.sec-light:has(.proof-grid){ padding-bottom:84px; }
@media (min-width:680px){
  .offer{ padding-top:104px; }
  .sec-light:has(.proof-grid){ padding-bottom:104px; }
}

/* ---------- mobile lockups and density ---------- */
@media (max-width:680px){
  /* feature grid: compact icon-left rows instead of six tall sparse cells */
  .feats .feat{ display:flex; align-items:flex-start; gap:14px; text-align:left; padding:18px 20px; }
  .feats .feat .ic{ margin:0; width:38px; height:38px; flex:none; }
  /* trust mini-list: centred as a unit, rows left-aligned so icons line up */
  .final .aside .mini{ width:max-content; max-width:100%; margin-left:auto; margin-right:auto; }
  .final .aside .mini span{ justify-content:flex-start; text-align:left; }
  /* icon-plus-text rows read as lockups, not orphaned icons */
  .offer .checklist li{ text-align:left; }
  .offer .urgency{ text-align:left; }
}

/* ---------- crisper focus rings ---------- */
.btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(127,177,255,.55), 0 14px 30px -12px rgba(45,127,249,.7);
}
.btn-amber:focus-visible{
  box-shadow:0 0 0 3px rgba(251,191,36,.65), 0 14px 30px -12px rgba(245,158,11,.6);
}
/* calculator controls, which opt out of the native outline, get explicit rings */
.field .val:focus-within{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(127,177,255,.45); }
input[type=range]:focus-visible{ outline:3px solid rgba(127,177,255,.82); outline-offset:4px; }
/* the pale global ring is invisible on light backgrounds; darken it there */
.sec-light :focus-visible,
.legal-page :focus-visible,
.form-card :focus-visible{ outline-color:var(--blue-d); }
.sec-light .btn:focus-visible{ box-shadow:0 0 0 3px var(--blue-d), 0 14px 30px -12px rgba(45,127,249,.7); }

/* ---------- utilities ---------- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* honeypot field: off-screen for humans, present for bots */
.fg-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }


/* =========================================================
   RESKIN LAYER: "Midnight trading desk"
   Editorial serif authority (Fraunces) over the phosphor data
   console; every action wears the colour of money. Overrides
   sit at the end of the sheet so the battle-tested layout,
   form, focus and motion rules above stay intact.
   ========================================================= */

/* ---------- serif display tuning ----------
   Fraunces carries more inherent character than a grotesk, so
   tracking relaxes and weights drop to the 650 sweet spot. */
.hero h1{ font-weight:650; letter-spacing:-.015em; line-height:1.06; max-width:7.2em; }
.hero h1 .mark{ font-style:italic; }
.sec-head h2, .agency h2, .offer h2, .final .aside h2, .ty h1, .legal-page h1{ font-weight:650; letter-spacing:-.012em; }
.sec-head h2{ line-height:1.12; }
.step h3, .proof-story h3, .proof-card h3, .form-card .fhd, .legal-page h2{ letter-spacing:-.005em; }
.faq summary{ letter-spacing:0; }

/* the brand lockup stays geometric to match the supplied logo art */
.brand .wordmark b{ font-family:var(--f-body); font-weight:800; letter-spacing:-.01em; }
.reply-preview .avatar{ font-family:var(--f-body); font-weight:700; }

/* ---------- gold action system ----------
   One action colour across the whole funnel: gold, navy text
   (8:1). Blue steps back to the information layer: links,
   eyebrows, data accents, sliders. */
.btn-primary{
  background:linear-gradient(180deg, var(--gold-2), var(--gold));
  color:var(--gold-ink);
  box-shadow:0 14px 30px -12px rgba(242,160,7,.6);
}
.btn-primary:hover{ background:linear-gradient(180deg, #ffd454, var(--gold-2)); }
.btn-primary:focus-visible{
  box-shadow:0 0 0 3px rgba(255,200,61,.7), 0 14px 30px -12px rgba(242,160,7,.6);
}
.scroll-progress i{
  background:linear-gradient(90deg, var(--gold) 0%, var(--gold-2) 55%, var(--green) 100%);
  box-shadow:0 0 14px rgba(242,160,7,.5);
}

/* ---------- atmosphere ---------- */
/* fine grain over everything, cheap alpha noise, no blend mode */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:3;
  opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* gold under-glow rising from the hero floor: money under the surface */
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(620px 320px at 10% 104%, rgba(245,158,11,.11), transparent 68%);
}
/* the existing amber CTAs join the same gold treatment so the whole funnel
   has exactly one action style */
.btn-amber{ background:linear-gradient(180deg, var(--gold-2), var(--gold)); color:var(--gold-ink); box-shadow:0 14px 30px -12px rgba(242,160,7,.6); }
.btn-amber:hover{ background:linear-gradient(180deg, #ffd454, var(--gold-2)); }
.btn-amber:focus-visible{ box-shadow:0 0 0 3px rgba(255,200,61,.7), 0 14px 30px -12px rgba(242,160,7,.6); }
::selection{ background:var(--gold-2); color:var(--gold-ink); }

/* =========================================================
   TREND LAYER 2026: progressive enhancements only.
   Every rule here is a no-op on browsers without the feature;
   nothing below affects layout, tracking or the reduced-motion
   contract (the global animation kill still applies).
   ========================================================= */

/* Cross-document view transitions: the click-to-thank-you moment
   crossfades instead of hard-cutting. Baseline; ignored elsewhere. */
@view-transition{ navigation:auto; }
::view-transition-old(root){ animation-duration:.22s; }
::view-transition-new(root){ animation-duration:.34s; }
@media (prefers-reduced-motion:reduce){
  @view-transition{ navigation:none; }
}

/* Scroll-driven parallax depth on the two photographs, scrubbed on the
   compositor thread, no JavaScript. The slight over-scale gives the
   translate room inside the overflow-hidden figures. */
@supports (animation-timeline: view()){
  .hero-photo img,
  .proof-story img{
    scale:1.12;
    animation:plx-drift linear both;
    animation-timeline:view();
    animation-range:entry 0% exit 100%;
  }
  @keyframes plx-drift{
    from{ transform:translateY(4.5%); }
    to{ transform:translateY(-4.5%); }
  }
}

/* The offer CTA breathes twice once it has revealed: a quiet pull on the
   eye at the money moment, then it settles. */
@keyframes cta-breathe{
  0%,100%{ box-shadow:0 14px 30px -12px rgba(242,160,7,.6); }
  50%{ box-shadow:0 16px 40px -10px rgba(255,200,61,.9), 0 0 0 7px rgba(242,160,7,.16); }
}
.obox.reveal.in .btn-amber{ animation:cta-breathe 2.2s ease-in-out .9s 2; }

/* Wide-gamut accents: on P3 screens the gold and green gain chroma at the
   same lightness, so every contrast ratio holds; sRGB screens gamut-map
   back to essentially the shipped values. */
@supports (color: oklch(from white l c h)){
  :root{
    --amber:oklch(from #F59E0B l calc(c * 1.12) h);
    --amber-2:oklch(from #FBBF24 l calc(c * 1.12) h);
    --gold:oklch(from #F2A007 l calc(c * 1.12) h);
    --gold-2:oklch(from #FFC83D l calc(c * 1.12) h);
    --green:oklch(from #34D399 l calc(c * 1.12) h);
  }
}

/* Calmer rag on running copy where supported */
.hero .sub, .sec-head p, .faq .ans, .calc-out .twoway, .final .aside p{ text-wrap:pretty; }
.sec-head h2{ text-wrap:balance; }

/* liquid-glass header: saturation behind the blur reads premium */
.hdr{ backdrop-filter:blur(16px) saturate(150%); -webkit-backdrop-filter:blur(16px) saturate(150%); }
/* overflow:clip clips like hidden but does NOT create a scroll container,
   so the view() timelines above track the viewport; browsers without clip
   keep the earlier overflow:hidden and simply skip the parallax */
.hero, .hero-photo, .proof-story figure{ overflow:clip; }

/* =========================================================
   DAYLIGHT LEDGER PASS: the light "how it works" and "six jobs"
   blocks were the last pieces still wearing the generic blue-badge
   SaaS look. Step numbers become mono numerals seated on a ledger
   rule (the rules align across the three cards, so the row reads
   as one timeline), tags become ticket-stub footers, and the
   six-jobs grid uses the compact icon-left rows on desktop that
   mobile already ships. Overrides only; layout, copy and tracking
   untouched.
   ========================================================= */
.step{ box-shadow:0 14px 36px -30px rgba(11,31,58,.32); }
.step .n{
  width:100%; height:auto; border-radius:0; background:none; box-shadow:none;
  color:var(--blue-d); font-size:15px; letter-spacing:.12em;
  display:flex; align-items:center; justify-content:center; gap:14px;
}
.step .n::before,
.step .n::after{ content:""; flex:1; height:1px; background:var(--line-l); }
.step h3{ margin-top:18px; }
/* flex column so the ticket-stub footers anchor to the card bottoms and
   align across the row regardless of copy length */
.step{ display:flex; flex-direction:column; }
.step .tag{
  display:block; margin-top:auto; padding-top:14px;
  border-top:1px dashed var(--line-l);
}
.step p{ margin-bottom:18px; }
@media (min-width:680px){
  .feats .feat{ display:flex; align-items:center; gap:16px; text-align:left; padding:20px 22px; }
  .feats .feat .ic{ margin:0; flex:none; }
}
/* proof strip: icon, copy and SLA chip centred as one lockup instead of
   the copy filling the row and the chip being flung to the far right edge;
   the width cap also kills the orphaned last word */
.proof .wrap{ justify-content:center; }
.proof p{ flex:0 1 auto; max-width:60ch; text-wrap:balance; }
.proof-timer{ margin-left:10px; }

/* final-aside image slot: the closing stretch (offer, FAQ, form) carries
   no photography, so the sticky aside gets one human frame on desktop.
   Hidden on mobile so the form stays one scroll away. While the file is
   missing the slot renders as a labelled dashed placeholder (.ph); once
   the real img is dropped in and .ph removed, it becomes a framed photo
   matching the hero treatment. */
.aside-photo{ display:none; }
@media (min-width:980px){
  .aside-photo{
    display:block; margin-top:28px; aspect-ratio:3/2;
    border-radius:18px; overflow:clip;
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 24px 60px -38px rgba(0,0,0,.85);
  }
  .aside-photo img{ width:100%; height:100%; object-fit:cover; filter:saturate(.95) contrast(1.05); }
  .aside-photo.ph{
    display:flex; align-items:center; justify-content:center;
    border:1.5px dashed rgba(127,177,255,.4);
    background:rgba(14,38,71,.4);
  }
  .aside-photo.ph::after{
    content:"IMAGE SLOT · " attr(data-img);
    font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; color:var(--mut);
  }
}

/* offer: a focused centred ticket instead of a full-width banner whose
   right half sat empty at desktop widths. Checklist centres as a unit
   with rows kept left-aligned so the check icons line up (same pattern
   as the final-section trust mini-list). */
.offer .obox{ max-width:720px; margin-left:auto; margin-right:auto; text-align:center; }
.offer h2{ text-wrap:balance; }
.offer .checklist{ width:max-content; max-width:100%; margin-left:auto; margin-right:auto; }
.offer .checklist li{ text-align:left; }
.offer .urgency{ justify-content:center; }

/* =========================================================
   LIVE LAYER: the promise made visible.
   A WhatsApp conversation that answers itself in 43 seconds,
   a reply-window clock that never passes 60, and rand figures
   that move when the visitor moves. Additive only; the layout,
   form, tracking and reduced-motion contracts above stay intact.
   ========================================================= */

/* ---------- hero chat simulation ----------
   Sits in the old hero-photo slot, same reserved footprint, so
   nothing shifts. Bubbles live in a bottom-anchored clipped pane:
   new messages grow the pane internally, never the page. */
.chat-sim{
  position:relative; z-index:1;
  display:flex; flex-direction:column;
  aspect-ratio:16/10; min-height:300px;
  border:1px solid rgba(255,255,255,.12); border-radius:22px;
  overflow:clip;
  background:
    linear-gradient(180deg, rgba(14,38,71,.6), rgba(7,23,45,.92)),
    radial-gradient(420px 260px at 85% -10%, rgba(37,211,102,.14), transparent 70%),
    #07172d;
  box-shadow:0 30px 80px -42px rgba(0,0,0,.9);
}
.chat-hd{
  display:flex; align-items:center; gap:11px;
  padding:13px 16px;
  background:rgba(8,26,51,.85);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.chat-hd .chat-ava{
  width:34px; height:34px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:#25D366; color:var(--white);
}
.chat-hd .chat-who{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.chat-hd .chat-who b{ color:var(--white); font-size:14px; font-weight:800; letter-spacing:-.01em; }
.chat-hd .chat-who span{ font-size:11.5px; color:var(--green); display:flex; align-items:center; gap:5px; }
.chat-hd .chat-who span::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--green); }
.chat-hd .chat-sla{
  margin-left:auto; font-family:var(--f-mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--blue-2);
  border:1px solid rgba(127,177,255,.22); border-radius:100px; padding:5px 10px;
  white-space:nowrap;
}
.chat-pane{
  flex:1; display:flex; flex-direction:column; justify-content:flex-end;
  gap:8px; padding:16px; overflow:clip;
  transition:opacity .45s ease;
}
.chat-pane.chat-reset{ opacity:0; }
.chat-day{
  align-self:center; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--mut);
  background:rgba(255,255,255,.05); border-radius:100px; padding:4px 11px;
}
/* Unshown bubbles take no space, so each arrival pushes earlier messages
   up inside the clipped pane exactly like a real chat; the page never
   moves because the card itself is a fixed-footprint box. */
@keyframes chat-pop{
  from{ opacity:0; transform:translateY(10px) scale(.97); }
  to{ opacity:1; transform:none; }
}
.chat-msg{
  display:none;
  max-width:82%; padding:9px 12px 7px; border-radius:14px;
  font-size:13.5px; line-height:1.42; color:#eaf1fb;
}
.chat-msg.show{ display:block; animation:chat-pop .34s cubic-bezier(.2,.9,.3,1.05) both; }
.chat-msg.in{
  align-self:flex-start; background:#13315c;
  border-radius:14px 14px 14px 4px;
}
.chat-msg.out{
  align-self:flex-end; background:#0b5c3f;
  border-radius:14px 14px 4px 14px;
}
.chat-msg .chat-meta{
  display:flex; justify-content:flex-end; align-items:center; gap:4px;
  font-size:10px; color:rgba(234,241,251,.55); margin-top:3px;
  font-family:var(--f-mono);
}
.chat-msg.out .chat-meta b{ color:#6fc7ff; font-weight:400; letter-spacing:-.06em; }
.chat-msg .chat-link{
  display:inline-block; margin-top:6px; padding:7px 12px; border-radius:9px;
  background:rgba(255,255,255,.12); color:#bfffe2; font-weight:700; font-size:12.5px;
}
.chat-note{
  align-self:center; display:none; align-items:center; gap:7px;
  font-family:var(--f-mono); font-size:11px; font-weight:600; letter-spacing:.06em;
  color:var(--green);
  background:rgba(52,211,153,.1); border:1px solid rgba(52,211,153,.3);
  border-radius:100px; padding:5px 12px;
}
.chat-note.show{ display:flex; animation:chat-pop .34s ease both; }
.chat-typing{
  align-self:flex-start; display:none; gap:4px; align-items:center;
  background:#13315c; border-radius:14px 14px 14px 4px; padding:12px 14px;
}
.chat-typing.show{ display:flex; }
.chat-typing i{
  width:6px; height:6px; border-radius:50%; background:#7fa6d9;
  animation:chat-dot 1.1s ease-in-out infinite;
}
.chat-typing i:nth-child(2){ animation-delay:.15s; }
.chat-typing i:nth-child(3){ animation-delay:.3s; }
@keyframes chat-dot{ 0%,100%{ opacity:.35; transform:translateY(0); } 50%{ opacity:1; transform:translateY(-3px); } }
/* no-JS / reduced motion: the whole conversation simply shows, static */
html:not(.js) .chat-msg{ display:block; }
html:not(.js) .chat-note{ display:flex; }
html:not(.js) .chat-typing{ display:none; }
@media (prefers-reduced-motion:reduce){
  .chat-msg{ display:block; }
  .chat-note{ display:flex; }
  .chat-typing{ display:none !important; }
}
/* The meter used to overlap the hero photo decoratively; under the chat
   card that overlap would hide the newest bubbles, so it sits clear. */
.hero-media .meter{ margin-top:16px; }
@media (max-width:680px){
  .chat-sim{ max-width:340px; width:100%; aspect-ratio:auto; height:350px; justify-self:center; }
  .hero-media .meter{ margin-top:14px; }
}

/* ---------- 60-second reply-window ring (hero) ---------- */
.sla-ring{
  display:inline-flex; align-items:center; gap:12px;
  margin-top:22px; padding:9px 16px 9px 10px;
  border:1px solid rgba(127,177,255,.18); border-radius:100px;
  background:rgba(14,38,71,.5);
}
.sla-ring .sla-dial{ position:relative; width:42px; height:42px; flex:none; }
.sla-ring svg{ transform:rotate(-90deg); }
.sla-ring .sla-bg{ fill:none; stroke:rgba(255,255,255,.12); stroke-width:3; }
.sla-ring .sla-fg{ fill:none; stroke:var(--green); stroke-width:3; stroke-linecap:round; }
.sla-ring .sla-n{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--f-mono); font-weight:600; font-size:14px; color:var(--white);
}
.sla-ring .sla-lab{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--mut); line-height:1.4; text-align:left;
}
.sla-ring .sla-lab b{ display:block; color:var(--green); font-weight:600; }
@media (max-width:680px){
  .sla-ring{ margin-left:auto; margin-right:auto; }
}

/* ---------- calculator comparison bars ---------- */
.calc-bars{ display:grid; gap:12px; margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
.cbar{ display:grid; grid-template-columns:1fr auto; gap:4px 12px; align-items:baseline; }
.cbar .cbar-lab{ font-size:12.5px; font-weight:700; color:var(--mut); letter-spacing:.01em; }
.cbar b{ font-family:var(--f-mono); font-weight:600; font-size:13.5px; color:var(--txt); white-space:nowrap; }
.cbar .cbar-track{
  grid-column:1 / -1; display:block; height:8px; border-radius:6px;
  background:rgba(255,255,255,.07); overflow:hidden;
}
.cbar .cbar-track i{
  display:block; height:100%; width:100%; border-radius:6px;
  transform:scaleX(var(--w,0)); transform-origin:left center;
  transition:transform .5s cubic-bezier(.22,.9,.32,1);
  will-change:transform;
}
.cbar-lost .cbar-track i{ background:linear-gradient(90deg, #b45309, var(--amber)); }
.cbar-lost b{ color:var(--amber); }
.cbar-rec .cbar-track i{ background:linear-gradient(90deg, #0a6e47, var(--green)); }
.cbar-rec b{ color:var(--green); }
.cbar-cost .cbar-track i{ background:linear-gradient(90deg, #1b4f9e, var(--blue)); }
html:not(.js) .calc-bars{ display:none; }

/* ---------- three steps: connected journey ----------
   One line runs behind the cards (visible only in the gaps);
   the coloured fill advances as each step enters the viewport,
   and inactive steps wait dimmed until the line reaches them. */
.steps::before, .steps::after{
  content:""; position:absolute; z-index:0; border-radius:2px;
}
.steps::before{ background:var(--line-l); }
.steps::after{
  background:linear-gradient(180deg, var(--blue-d), var(--green));
  transform:scaleY(var(--journey,0)); transform-origin:top center;
  transition:transform .7s cubic-bezier(.22,.9,.32,1);
  will-change:transform;
}
.steps::before, .steps::after{ left:50%; top:12px; bottom:12px; width:3px; margin-left:-1.5px; }
@media (min-width:680px){
  .steps::before, .steps::after{
    left:12px; right:12px; top:50%; bottom:auto; width:auto; height:3px; margin:-1.5px 0 0;
  }
  .steps::after{
    background:linear-gradient(90deg, var(--blue-d), var(--green));
    transform:scaleX(var(--journey,0)); transform-origin:left center;
  }
}
.js .steps .step{ opacity:.45; transform:translateY(12px); transition:opacity .55s ease, transform .55s cubic-bezier(.22,.9,.32,1); }
.js .steps .step.active{ opacity:1; transform:none; }
.steps .step .n{ transition:color .4s ease; }
.steps .step.active .n{ color:var(--green-d); }
.steps .step.active .n::before, .steps .step.active .n::after{ background:rgba(52,211,153,.45); }
@media (prefers-reduced-motion:reduce){
  .js .steps .step{ opacity:1; transform:none; }
  .steps::after{ transform:none; }
}

/* ---------- six jobs: tap or hover to see the message ----------
   Each card front keeps its exact copy; the reveal is one example
   WhatsApp message of that job being done. Button + aria-expanded,
   0fr -> 1fr row expansion, hover preview only on true hover devices. */
.feat{ padding:0 !important; display:block !important; }
.feat .feat-btn{
  width:100%; display:flex; align-items:center; gap:16px; text-align:left;
  padding:20px 22px; min-height:48px;
  font:inherit; color:inherit; background:none; border:none; cursor:pointer;
}
.feat .feat-btn .ic{ margin:0; flex:none; }
.feat .feat-btn p{ flex:1; }
.feat .feat-x{
  flex:none; width:26px; height:26px; border-radius:8px;
  border:1.5px solid var(--line-l); position:relative;
  transition:background .2s ease, border-color .2s ease, transform .25s ease;
}
.feat .feat-x::before, .feat .feat-x::after{
  content:""; position:absolute; left:50%; top:50%; background:var(--blue-d);
  border-radius:1px; transition:background .2s ease;
}
.feat .feat-x::before{ width:10px; height:2px; transform:translate(-50%,-50%); }
.feat .feat-x::after{ width:2px; height:10px; transform:translate(-50%,-50%); }
.feat .feat-btn[aria-expanded="true"] .feat-x{ background:#0b5c3f; border-color:#0b5c3f; transform:rotate(45deg); }
.feat .feat-btn[aria-expanded="true"] .feat-x::before, .feat .feat-btn[aria-expanded="true"] .feat-x::after{ background:#fff; }
.feat .feat-msg{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .35s cubic-bezier(.22,.9,.32,1);
}
.feat .feat-btn[aria-expanded="true"] + .feat-msg{ grid-template-rows:1fr; }
@media (hover:hover){
  .feat:hover .feat-msg{ grid-template-rows:1fr; }
}
.feat .feat-msg > div{ overflow:hidden; min-height:0; }
.feat .feat-bubble{
  margin:0 22px 18px; padding:11px 14px 8px;
  background:#e7f8ef; border:1px solid #bfe8d2;
  border-radius:14px 14px 14px 4px;
  font-size:13.5px; line-height:1.45; color:#14323f; text-align:left;
  opacity:0; transform:translateY(6px);
  transition:opacity .3s ease .08s, transform .3s ease .08s;
}
.feat .feat-btn[aria-expanded="true"] + .feat-msg .feat-bubble{ opacity:1; transform:none; }
@media (hover:hover){
  .feat:hover .feat-bubble{ opacity:1; transform:none; }
}
.feat .feat-bubble .chat-meta{
  display:flex; justify-content:flex-end; gap:4px; margin-top:4px;
  font-family:var(--f-mono); font-size:10px; color:#5d7d70;
}
html:not(.js) .feat .feat-msg{ grid-template-rows:1fr; }
html:not(.js) .feat .feat-bubble{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .feat .feat-bubble{ opacity:1; transform:none; }
}
@media (max-width:680px){
  .feat .feat-btn{ padding:18px 20px; gap:14px; }
  .feat .feat-btn .ic{ width:38px; height:38px; }
  .feat .feat-bubble{ margin:0 20px 16px; }
}

/* ---------- sticky recoverable bar (all sizes, dismissible) ---------- */
.mobile-cta .mc-x{
  flex:none; width:34px; height:34px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  color:var(--mut); border:1px solid rgba(255,255,255,.14);
  font-size:17px; line-height:1;
}
.mobile-cta .mc-x:hover{ color:var(--white); border-color:rgba(255,255,255,.3); }
.mobile-cta .mc-copy b em{ font-style:normal; color:var(--amber-2); font-family:var(--f-mono); font-weight:600; white-space:nowrap; }
@media (min-width:680px){
  .mobile-cta{
    display:flex; left:50%; right:auto; bottom:18px;
    transform:translate(-50%,140%);
    width:min(560px, calc(100vw - 40px));
    border:1px solid rgba(127,177,255,.2); border-radius:16px;
    padding:12px 14px 12px 20px;
    box-shadow:0 24px 60px -24px rgba(0,0,0,.85);
  }
  .mobile-cta.show{ transform:translate(-50%,0); }
}

/* ---------- FAQ: smooth height + animated close where supported ---------- */
@supports (interpolate-size: allow-keywords){
  .faq details{ interpolate-size:allow-keywords; }
  .faq details::details-content{
    block-size:0; overflow-y:clip;
    transition:block-size .32s cubic-bezier(.22,.9,.32,1), content-visibility .32s allow-discrete;
  }
  .faq details[open]::details-content{ block-size:auto; }
}

/* ---------- mobile footer: centre the brand lockup ---------- */
@media (max-width:680px){
  .ftr .brand{ justify-content:center; }
}

/* ---------- founding places counter ---------- */
.places{ display:none; margin-bottom:22px; }
.places.on{ display:block; }
.places .places-dots{ display:flex; gap:7px; justify-content:center; margin-bottom:10px; }
.places .places-dots i{
  width:18px; height:8px; border-radius:4px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.14);
}
.places .places-dots i.taken{
  background:linear-gradient(90deg, var(--gold), var(--gold-2));
  border-color:transparent;
  box-shadow:0 0 12px -3px rgba(242,160,7,.8);
}
.places p{ font-size:14.5px; color:var(--mut); }
.places p b{ color:var(--white); font-family:var(--f-mono); font-weight:600; }

/* =========================================================
   ELEVATION LAYER (12 June 2026): one warm accent family for
   everything the visitor touches. Gold carries action and
   interaction, amber carries money figures, green stays the
   true recovered/positive state. Blue retreats to a faint
   passive tint (meter bars, chat header, atmosphere). Pure
   white text retired in favour of --white above.
   ========================================================= */

/* ---------- labels and links ---------- */
.eyebrow{ color:var(--gold-2); }
.sec-light .eyebrow{ color:var(--gold-d); }
.hero .sec-link, .link-arrow{ color:var(--gold-2); }
.sec-light .link-arrow{ color:var(--gold-d); }
.btn-ghost:hover{ border-color:var(--gold-2); }
.ftr a:hover{ color:var(--gold-2); }
.skip{ background:var(--gold); color:var(--gold-ink); }
.proof-timer{ color:var(--gold-2); border-color:rgba(242,160,7,.3); background:rgba(242,160,7,.07); }
.proof-timer small{ color:var(--mut); }
.chat-hd .chat-sla{ color:var(--gold-2); border-color:rgba(242,160,7,.3); }
.calc-out .formula code{ color:var(--gold-2); }
.calc-out .twoway::before{ background:linear-gradient(90deg, var(--green), var(--gold-2)); }
.form-card::before{ background:linear-gradient(90deg, var(--gold), var(--amber), var(--green)); }

/* ---------- sliders: the calculator is the product ---------- */
input[type=range]::-webkit-slider-runnable-track{
  background:linear-gradient(90deg, rgba(242,160,7,.8), rgba(255,255,255,.14));
}
input[type=range]::-moz-range-track{
  background:linear-gradient(90deg, rgba(242,160,7,.8), rgba(255,255,255,.14));
}
input[type=range]::-webkit-slider-thumb{
  background:linear-gradient(180deg, var(--gold-2), var(--gold));
  border:3px solid #ffe7b0;
  box-shadow:0 4px 12px rgba(242,160,7,.55), 0 0 0 6px rgba(242,160,7,.16);
}
input[type=range]::-moz-range-thumb{
  background:var(--gold);
  border:3px solid #ffe7b0;
  box-shadow:0 0 0 6px rgba(242,160,7,.16);
}
input[type=range]:hover::-webkit-slider-thumb{ box-shadow:0 6px 18px rgba(242,160,7,.6), 0 0 0 7px rgba(242,160,7,.2); }
/* haptic-feeling grab: the thumb swells while held */
input[type=range]:active::-webkit-slider-thumb{ transform:scale(1.18); }
input[type=range]:active::-moz-range-thumb{ transform:scale(1.18); }
input[type=range]:focus-visible{ outline-color:rgba(255,200,61,.85); }
.field .val:focus-within{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(255,200,61,.4); }

/* ---------- focus rings ---------- */
:focus-visible{ outline-color:rgba(255,200,61,.85); }
.sec-light :focus-visible,
.legal-page :focus-visible,
.form-card :focus-visible{ outline-color:var(--gold-d); }
.btn:focus-visible{ box-shadow:0 0 0 3px rgba(255,200,61,.7), 0 14px 30px -12px rgba(242,160,7,.6); }
.sec-light .btn:focus-visible{ box-shadow:0 0 0 3px var(--gold-d), 0 14px 30px -12px rgba(242,160,7,.6); }

/* ---------- form accents ---------- */
.fg input:focus, .fg select:focus{
  border-color:var(--gold-d);
  box-shadow:0 0 0 3px rgba(242,160,7,.22), 0 8px 22px -16px rgba(242,160,7,.6);
}
.fg .req{ color:var(--gold-d); }
.consent a{ color:var(--gold-d); }
.consent input{ accent-color:var(--gold); }

/* ---------- FAQ toggles ---------- */
.faq summary .pm::before, .faq summary .pm::after{ background:var(--gold-d); }
.faq details[open] summary .pm{ background:var(--gold); border-color:var(--gold); }
.faq details[open] summary .pm::before,
.faq details[open] summary .pm::after{ background:var(--gold-ink); }
.faq summary:hover{ color:var(--gold-d); }

/* ---------- light-section cards and ledger ---------- */
.step .n{ color:var(--gold-d); }
.step:hover{ border-color:rgba(242,160,7,.35); }
.step::after{ background:linear-gradient(90deg, var(--gold), var(--green)); }
.steps::after{ background:linear-gradient(180deg, var(--gold), var(--green)); }
@media (min-width:680px){
  .steps::after{ background:linear-gradient(90deg, var(--gold), var(--green)); }
}
.step .tag{ color:var(--gold-d); }
.feat .ic, .proof-card span{ background:rgba(242,160,7,.12); color:var(--gold-d); }
.feat:hover .ic{ background:rgba(242,160,7,.2); }
.feat::before{ background:linear-gradient(180deg, var(--gold), var(--green)); }
.feat .feat-x::before, .feat .feat-x::after{ background:var(--gold-d); }
.proof-card::before{ background:linear-gradient(90deg, var(--gold) 0%, var(--green) 100%); }
.proof-card:hover{ border-color:rgba(242,160,7,.35); }
.proof-card:hover span{ background:rgba(242,160,7,.2); }
.agency .ic-big{ background:rgba(242,160,7,.12); color:var(--gold-2); }

/* ---------- six jobs: asymmetric bento ----------
   The 60-second response is the flagship job, so it gets the big
   cell, a WhatsApp-green tint and its example message open by
   default. The ads-reporting cell closes the grid wide and warm.
   Span pattern keeps every row full: 3-col = 2+1 / 2+1 / 1+2,
   2-col = 2 / 1+1 / 1+1 / 2. */
@media (min-width:680px){
  .feats .feat:nth-child(1){ grid-column:span 2; }
  .feats .feat:nth-child(6){ grid-column:span 2; }
}
@media (min-width:980px){
  .feats .feat:nth-child(3){ grid-column:span 2; }
}
.feats .feat:nth-child(1){ background:linear-gradient(135deg, #e9f9f0, #f7fdfa); }
.feats .feat:nth-child(1) .ic{ background:rgba(37,211,102,.18); color:#0b6e43; }
.feats .feat:nth-child(1) .feat-btn p{ font-size:17px; }
.feats .feat:nth-child(1):hover{ background:linear-gradient(135deg, #e3f7ec, #f2fcf7); }
/* the flagship message is the permanent product demo, never collapsible:
   its header is a plain div (no toggle), the message is always expanded */
.feats .feat:nth-child(1) .feat-msg{ grid-template-rows:1fr; }
.feats .feat:nth-child(1) .feat-bubble{ opacity:1; transform:none; }
.feats .feat:nth-child(1) .feat-x{ display:none; }
.feats .feat:nth-child(1) div.feat-btn{ cursor:default; }
.feats .feat:nth-child(6){ background:#fdf9ee; }
.feats .feat:nth-child(6):hover{ background:#fbf5e2; }
.feat:hover{ background:#fdfaf2; }

/* ---------- calculator result panel: product-grade elevation ---------- */
.calc-out{
  box-shadow:var(--shadow), 0 24px 70px -40px rgba(242,160,7,.35), inset 0 0 0 1px rgba(255,255,255,.07);
}
/* one pulse when the recoverable figure crosses the plan price */
@keyframes price-pulse{
  0%{ box-shadow:0 0 0 0 rgba(255,200,61,0); }
  35%{ box-shadow:0 0 0 7px rgba(255,200,61,.28); }
  100%{ box-shadow:0 0 0 0 rgba(255,200,61,0); }
}
.calc-out .price.price-pulse{ animation:price-pulse .9s ease-out 1; }

/* in-text links carry an underline, never colour alone */
.ftr .legal a{ text-decoration:underline; }

/* ---------- chat: longer, smarter conversation ----------
   The script now reschedules, code-switches and closes with a
   system status pill, so the card gets a touch more height on
   desktop and the pills stay one-line on small screens.
   The pane becomes a hidden-scrollbar scroller pinned to the
   newest message by the script: flex-end alone only bottom-anchors
   while the thread FITS; once it overflows, content top-anchors
   and the newest bubbles clip below the card (the reported bug). */
@media (min-width:980px){
  .chat-sim{ aspect-ratio:16/11; }
}
@media (max-width:680px){
  .chat-note{ font-size:10px; padding:5px 10px; white-space:nowrap; }
}
.chat-pane{ overflow-y:auto; scrollbar-width:none; }
.chat-pane::-webkit-scrollbar{ display:none; }

/* ---------- loss-led hero meter ----------
   The big amber figure is now the monthly leak (the pain), the
   annual line multiplies it honestly, and the green footer answers
   with what ConvertX rescues. Same assumptions, reframed. */
.meter .annual{ font-size:13.5px; color:var(--mut); line-height:1.45; margin-top:10px; }
.meter .annual b{ color:var(--amber-2); font-family:var(--f-mono); font-weight:600; white-space:nowrap; }

/* ---------- CTA labels never wrap: tighten type before breaking lines ---------- */
@media (max-width:430px){
  .btn-lg{ font-size:15px; padding:16px 18px; white-space:nowrap; }
  .btn-lg .btn-arrow{ width:16px; height:16px; }
}

/* ---------- tap states: everything pressable responds ---------- */
.btn:active{ transform:translateY(1px) scale(.985); }
.feat .feat-btn:active .ic{ transform:scale(.94); }
.faq summary:active .pm{ transform:scale(.92); }
.mobile-cta .btn:active{ transform:scale(.97); }