/* =========================================================================
   WooSecure — Design System
   Brand: purple #5E00E4 (dominant, background) + orange #FF6F00 (accent/CTA)
   ========================================================================= */

/* ---------- Self-hosted fonts ----------
   Variable woff2 files, so one request covers every weight. Served from our own
   origin: no third-party DNS lookup or connection before text can paint, and
   nothing breaks if Google Fonts is blocked or slow. `swap` keeps text visible
   during load, which is what Core Web Vitals rewards. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-var.woff2") format("woff2");
}
@font-face {
  font-family: "Red Hat Display";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/assets/fonts/redhatdisplay-var.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
:root {
  /* Purple scale (brand core) */
  --violet-950: #07031A;
  --violet-900: #0C0524;
  --violet-850: #120A31;
  --violet-800: #190D42;
  --violet-700: #24105E;
  --violet-600: #3A15A0;
  --violet-500: #5E00E4;   /* WooSecure brand purple */
  --violet-400: #7C3DFF;
  --violet-300: #9F7BFF;
  --violet-200: #C2ADFF;

  /* Orange scale (accent) */
  --orange-600: #D95E00;
  --orange-500: #FF6F00;   /* WooSecure brand orange */
  --orange-400: #FF8A2B;
  --orange-300: #FFA95C;

  /* Support */
  --navy-900: #031B4E;
  --mint-400: #35E39B;
  --rose-400: #FF5C7A;
  --amber-400: #FFC44D;

  /* Semantic */
  --bg: var(--violet-950);
  --bg-elevated: #0E0726;
  --surface: rgba(255, 255, 255, 0.035);
  --surface-2: rgba(255, 255, 255, 0.06);
  --hairline: rgba(255, 255, 255, 0.09);
  --hairline-strong: rgba(159, 123, 255, 0.34);

  --text: #F2EFFB;
  --text-muted: #ADA2CC;
  --text-dim: #7E74A0;

  /* Effects */
  --glass: linear-gradient(168deg, rgba(94, 0, 228, 0.05) 0%, rgba(159, 123, 255, 0.16) 165%);
  --glass-hi: linear-gradient(168deg, rgba(94, 0, 228, 0.1) 0%, rgba(159, 123, 255, 0.3) 165%);
  --glow-inset: inset 0 0 30px rgba(94, 0, 228, 0.28);
  --shadow-lg: 0 28px 70px -20px rgba(3, 0, 20, 0.85);
  --shadow-orange: 0 12px 34px -10px rgba(255, 111, 0, 0.55);

  /* Metrics */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;
  --container: 1200px;
  --header-h: 72px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Inter carries navigation, UI and body copy; Red Hat Display carries headlines
     and display numerals. */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Red Hat Display", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}
body {
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: "cv11", "ss01";
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
:focus-visible {
  outline: 2px solid var(--orange-400);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Ambient background ---------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(900px 620px at 12% -8%, rgba(94, 0, 228, 0.5), transparent 62%),
    radial-gradient(760px 560px at 92% 4%, rgba(58, 21, 160, 0.42), transparent 60%),
    radial-gradient(1000px 700px at 50% 108%, rgba(124, 61, 255, 0.2), transparent 66%);
  pointer-events: none;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 30%, transparent 78%);
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}
.container--narrow { max-width: 860px; }
.section { padding-block: clamp(64px, 8vw, 116px); position: relative; }
.section--tight { padding-block: clamp(48px, 5vw, 72px); }
.section--alt { background: linear-gradient(180deg, transparent, rgba(94, 0, 228, 0.07) 45%, transparent); }
.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 200;
  background: var(--orange-500);
  color: #17060B;
  padding: 10px 18px;
  border-radius: var(--r-sm);
  font-weight: 600;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 16px; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  /* Red Hat Display runs a touch wider than Inter, so it needs less negative
     tracking to avoid the counters closing up at display sizes. */
  letter-spacing: -0.016em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.45rem, 5.2vw, 4rem); }
h2 { font-size: clamp(1.95rem, 3.6vw, 2.85rem); }
h3 { font-size: clamp(1.18rem, 1.7vw, 1.4rem); font-weight: 600; letter-spacing: -0.012em; }
h4 { font-size: 1.03rem; font-weight: 600; letter-spacing: -0.008em; }

/* Display-scale numerals belong to the headline face; the numerals inside the
   product mockups stay on Inter, because a real dashboard would use a UI face. */
.statband__n,
.offer__now,
.offer__was s,
.threat__stat {
  font-family: var(--font-display);
}
p { text-wrap: pretty; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--violet-200);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--orange-500));
}
.eyebrow--center { justify-content: center; }

.lede {
  font-size: clamp(1.03rem, 1.35vw, 1.17rem);
  color: var(--text-muted);
  max-width: 62ch;
  line-height: 1.72;
}
.section-head { max-width: 720px; margin-bottom: clamp(40px, 5vw, 60px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: 18px; }
.section-head--center .lede { margin-inline: auto; }

.grad-text {
  background: linear-gradient(96deg, var(--orange-300) 4%, var(--orange-500) 42%, var(--violet-300) 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Screen-reader-only text that still counts for accessibility and SEO. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Badge / pill ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 15px 7px 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline-strong);
  background: rgba(94, 0, 228, 0.16);
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--violet-200);
  backdrop-filter: blur(8px);
}
.pill__tag {
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: var(--orange-500);
  color: #170700;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
a.pill:hover { background: rgba(94, 0, 228, 0.3); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 26px;
  border-radius: var(--r-pill);
  font-size: 0.97rem;
  font-weight: 600;
  letter-spacing: -0.006em;
  white-space: nowrap;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease),
              background-color 0.22s var(--ease), border-color 0.22s var(--ease);
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: linear-gradient(102deg, var(--orange-500), var(--orange-400) 62%, var(--orange-300));
  color: #1A0700;
  box-shadow: var(--shadow-orange);
}
.btn--primary:hover { box-shadow: 0 18px 44px -10px rgba(255, 111, 0, 0.7); }

.btn--violet {
  background: linear-gradient(102deg, var(--violet-500), var(--violet-400));
  color: #fff;
  box-shadow: 0 12px 34px -12px rgba(124, 61, 255, 0.75);
}
.btn--violet:hover { box-shadow: 0 18px 44px -12px rgba(124, 61, 255, 0.9); }

.btn--ghost {
  border: 1px solid var(--hairline-strong);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover { background: rgba(159, 123, 255, 0.14); border-color: var(--violet-300); }

.btn--sm { padding: 10px 19px; font-size: 0.9rem; }
.btn--lg { padding: 16px 34px; font-size: 1.03rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.btn-row--center { justify-content: center; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--violet-200);
  transition: gap 0.2s var(--ease), color 0.2s var(--ease);
}
.link-arrow::after { content: "→"; transition: transform 0.2s var(--ease); }
.link-arrow:hover { color: var(--orange-400); gap: 11px; }

.micro {
  font-size: 0.83rem;
  color: var(--text-dim);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
}
.micro span { display: inline-flex; align-items: center; gap: 7px; }
.micro span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mint-400);
  box-shadow: 0 0 9px var(--mint-400);
}

/* ---------- Cards ---------- */
.card {
  position: relative;
  padding: 28px;
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline);
  background: var(--glass);
  backdrop-filter: blur(12px);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
  overflow: hidden;
}
.card::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(194, 173, 255, 0.55), transparent);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--hairline-strong);
  box-shadow: var(--glow-inset), var(--shadow-lg);
}
.card:hover::after { opacity: 1; }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--text-muted); font-size: 0.96rem; line-height: 1.68; }

.card-ico {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  margin-bottom: 20px;
  background: linear-gradient(150deg, rgba(94, 0, 228, 0.55), rgba(124, 61, 255, 0.2));
  border: 1px solid var(--hairline-strong);
  color: var(--violet-200);
}
.card-ico svg { width: 22px; height: 22px; }
.card-ico--orange {
  background: linear-gradient(150deg, rgba(255, 111, 0, 0.42), rgba(255, 169, 92, 0.14));
  border-color: rgba(255, 138, 43, 0.45);
  color: var(--orange-300);
}

.grid { display: grid; gap: 22px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), backdrop-filter 0.3s;
}
.header.is-stuck {
  background: rgba(9, 4, 26, 0.82);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--hairline);
}
.header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 30px;
}
.logo { display: inline-flex; align-items: center; flex: none; }
.logo img {
  height: 27px;
  width: auto;
  /* Intrinsic 790x105 is set on the element so the box is reserved before load. */
}
.logo--footer img { height: 32px; }

.nav { display: flex; align-items: center; gap: 4px; margin-inline: auto; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: var(--r-sm);
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.nav__link:hover, .nav__item:hover > .nav__link, .nav__link[aria-current="page"] {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}
.nav__link svg { width: 12px; height: 12px; opacity: 0.7; transition: transform 0.2s var(--ease); }
.nav__item:hover .nav__link svg { transform: rotate(180deg); }

.mega {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  translate: -50% 0;
  width: max-content;
  max-width: 620px;
  padding: 12px;
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline-strong);
  background: rgba(14, 7, 38, 0.97);
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 250px));
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.15s var(--ease), transform 0.15s var(--ease), visibility 0.15s;
  /* Just enough forgiveness to survive a jittery pointer. The ::before bridge
     below already covers the gap, so this only needs to be a few frames —
     anything longer reads as the menu refusing to close. */
  transition-delay: 0.07s;
}
/* Invisible bridge across the gap between the link and the panel. Without it the
   pointer leaves .nav__item mid-travel and the menu closes before it's reachable.
   It inherits the panel's visibility, so it can't capture hover while closed. */
.mega::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -14px;
  height: 14px;
}
.nav__item:hover .mega, .nav__item:focus-within .mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
/* Sliding sideways between nav items should swap panels instantly rather than
   leaving the previous one hanging for the close delay. The gap below the links
   sits outside .nav, so travelling down to a panel keeps its forgiveness. */
.nav:hover .nav__item:not(:hover) .mega { transition-delay: 0s; }
.mega__link {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: var(--r-md);
  transition: background-color 0.18s var(--ease);
}
.mega__link:hover { background: rgba(159, 123, 255, 0.13); }
.mega__ico {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(94, 0, 228, 0.4);
  border: 1px solid var(--hairline);
  color: var(--violet-200);
}
.mega__ico svg { width: 17px; height: 17px; }
/* Both are spans, so they need blockifying — inline elements sit on one line
   and silently drop vertical margins. */
.mega__link > span:last-child { min-width: 0; }
.mega__t { display: block; font-size: 0.93rem; font-weight: 600; line-height: 1.3; }
.mega__d { display: block; font-size: 0.81rem; color: var(--text-dim); line-height: 1.45; margin-top: 3px; }

.header__cta { display: flex; align-items: center; gap: 12px; flex: none; }
.header__cta .nav__link { padding-inline: 10px; }

/* ---------- Account menu (mobile only) ---------- */
.account { position: relative; display: none; }
.account__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 13px;
  border-radius: var(--r-pill);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  color: #1A0700;
  background: linear-gradient(102deg, var(--orange-500), var(--orange-400) 62%, var(--orange-300));
  box-shadow: var(--shadow-orange);
  transition: box-shadow 0.22s var(--ease);
}
.account__btn svg { width: 13px; height: 13px; flex: none; transition: transform 0.24s var(--ease); }
.account__btn[aria-expanded="true"] svg { transform: rotate(180deg); }

.account__menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 60;
  min-width: 232px;
  padding: 8px;
  display: grid;
  gap: 2px;
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline-strong);
  background: rgba(14, 7, 38, 0.97);
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-lg);
  animation: acctIn 0.2s var(--ease);
}
.account__menu[hidden] { display: none; }
@keyframes acctIn { from { opacity: 0; transform: translateY(-8px); } }

.account__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: var(--r-md);
  transition: background-color 0.18s var(--ease);
}
.account__item:hover { background: rgba(159, 123, 255, 0.14); }
.account__item b { display: block; font-size: 0.92rem; font-weight: 600; line-height: 1.3; }
.account__item span span { display: block; font-size: 0.79rem; color: var(--text-dim); margin-top: 2px; }
.account__ico {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(94, 0, 228, 0.4);
  border: 1px solid var(--hairline);
  color: var(--violet-200);
}
.account__ico svg { width: 16px; height: 16px; }
.account__item:first-child .account__ico {
  background: rgba(255, 111, 0, 0.24);
  border-color: rgba(255, 138, 43, 0.42);
  color: var(--orange-300);
}

.burger {
  display: none;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--hairline);
}
.burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
/* Bars sit 3.5px apart, so the X offset is line-height + gap = 5.5px.
   Keep these three numbers in sync or the cross won't meet. */
.burger span + span { margin-top: 3.5px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.mobile-nav {
  display: none;
  position: fixed;
  inset: calc(var(--header-h)) 0 0;
  z-index: 45;
  background: rgba(8, 3, 22, 0.98);
  backdrop-filter: blur(20px);
  padding: 24px;
  overflow-y: auto;
}
.mobile-nav.is-open { display: block; }
.mobile-nav a {
  display: block;
  padding: 15px 4px;
  font-size: 1.06rem;
  font-weight: 500;
  border-bottom: 1px solid var(--hairline);
}
.mobile-nav a:hover { color: var(--violet-200); }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(56px, 7vw, 92px) clamp(50px, 6vw, 84px); position: relative; }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 64px);
  align-items: center;
}
.hero h1 { margin: 20px 0 22px; }
.hero .lede { max-width: 55ch; }
.hero .btn-row { margin-top: 34px; }
.hero .micro { margin-top: 22px; }
.hero--center { text-align: center; }
.hero--center .hero__grid { grid-template-columns: 1fr; max-width: 860px; margin-inline: auto; }
.hero--center .lede { margin-inline: auto; }
.hero--center .btn-row, .hero--center .micro { justify-content: center; }

/* ---------- Product mock (SVG-free HTML dashboard) ---------- */
.mock {
  position: relative;
  border-radius: var(--r-xl);
  border: 1px solid var(--hairline-strong);
  background: linear-gradient(160deg, rgba(18, 10, 49, 0.96), rgba(9, 4, 26, 0.96));
  box-shadow: var(--glow-inset), var(--shadow-lg);
  overflow: hidden;
}
.mock::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto;
  height: 220px;
  background: radial-gradient(closest-side, rgba(124, 61, 255, 0.4), transparent);
  pointer-events: none;
}
.mock__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.028);
}
.mock__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.17); }
.mock__title {
  margin-left: 10px;
  font-size: 0.78rem;
  color: var(--text-dim);
  font-family: var(--mono);
  letter-spacing: 0.02em;
}
.mock__body { padding: 20px; display: grid; gap: 14px; position: relative; }

.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.stat {
  padding: 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.03);
}
.stat__k {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--text-dim);
  font-weight: 600;
}
.stat__v { font-size: 1.45rem; font-weight: 700; letter-spacing: -0.03em; margin-top: 5px; }
.stat__v small { font-size: 0.72rem; font-weight: 600; margin-left: 5px; color: var(--mint-400); }
.stat__v.is-orange { color: var(--orange-400); }
.stat__v.is-mint { color: var(--mint-400); }

.feed { border-radius: var(--r-md); border: 1px solid var(--hairline); overflow: hidden; }
.feed__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.035);
  border-bottom: 1px solid var(--hairline);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.feed__live { display: inline-flex; align-items: center; gap: 6px; color: var(--mint-400); }
.feed__live i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--mint-400); box-shadow: 0 0 8px var(--mint-400);
  animation: pulse 1.7s var(--ease) infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.feed__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  font-size: 0.83rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  animation: rowIn 0.5s var(--ease) backwards;
}
.feed__row:last-child { border-bottom: 0; }
.feed__row:nth-child(2) { animation-delay: 0.1s; }
.feed__row:nth-child(3) { animation-delay: 0.2s; }
.feed__row:nth-child(4) { animation-delay: 0.3s; }
.feed__row:nth-child(5) { animation-delay: 0.4s; }
@keyframes rowIn { from { opacity: 0; transform: translateX(-10px); } }
.feed__ip { font-family: var(--mono); font-size: 0.79rem; color: var(--text-muted); }
.feed__what { color: var(--text-muted); }
.tag {
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tag--blocked { background: rgba(255, 92, 122, 0.16); color: var(--rose-400); border: 1px solid rgba(255, 92, 122, 0.32); }
.tag--allowed { background: rgba(53, 227, 155, 0.14); color: var(--mint-400); border: 1px solid rgba(53, 227, 155, 0.3); }
.tag--warn { background: rgba(255, 196, 77, 0.14); color: var(--amber-400); border: 1px solid rgba(255, 196, 77, 0.3); }
.tag--info { background: rgba(159, 123, 255, 0.16); color: var(--violet-200); border: 1px solid rgba(159, 123, 255, 0.32); }

.mock__float {
  position: absolute;
  right: -18px;
  bottom: 34px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 17px;
  border-radius: var(--r-md);
  border: 1px solid rgba(53, 227, 155, 0.36);
  background: rgba(10, 32, 25, 0.94);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-lg);
  animation: float 5s ease-in-out infinite;
}
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.mock__float b { font-size: 0.88rem; display: block; }
.mock__float span { font-size: 0.75rem; color: var(--text-dim); }
.mock__float .ico {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(53, 227, 155, 0.2); color: var(--mint-400);
}
.mock__float .ico svg { width: 16px; height: 16px; }

/* ---------- Logo marquee ---------- */
.marquee-wrap {
  padding-block: 26px;
  border-block: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.015);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee { display: flex; gap: 60px; width: max-content; animation: slide 38s linear infinite; }
.marquee-wrap:hover .marquee { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.marquee__item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.42);
  white-space: nowrap;
  transition: color 0.25s var(--ease);
}
.marquee__item:hover { color: rgba(255, 255, 255, 0.85); }
.marquee__item svg { width: 19px; height: 19px; opacity: 0.75; }
.marquee-label {
  text-align: center;
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 22px;
}

/* ---------- Stat band ---------- */
.statband {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline);
  background: var(--hairline);
  overflow: hidden;
}
.statband__cell {
  padding: 30px 24px;
  background: rgba(12, 5, 36, 0.9);
  text-align: center;
}
.statband__n {
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  background: linear-gradient(180deg, #fff, var(--violet-200));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.statband__l { font-size: 0.87rem; color: var(--text-muted); margin-top: 7px; }

/* ---------- Bento ---------- */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.bento > * { grid-column: span 2; }
.bento__wide { grid-column: span 3; }
.bento__hero { grid-column: span 6; }
.bento__hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 34px; align-items: center; padding: 34px; }

/* ---------- Split feature ---------- */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(34px, 5vw, 66px);
  align-items: center;
}
.split + .split { margin-top: clamp(56px, 7vw, 96px); }
.split--flip .split__media { order: -1; }
.split__body h2 { margin-bottom: 18px; }
/* The marker is absolutely positioned rather than a flex item. With `display:flex`
   on the <li>, the <b> lead-in became its own flex item — so the icon, the bold
   label and the description laid out as three columns instead of one sentence. */
.checks { margin-top: 26px; display: grid; gap: 14px; }
.checks li {
  position: relative;
  padding-left: 32px;
  font-size: 0.96rem;
  color: var(--text-muted);
  line-height: 1.65;
}
.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(53, 227, 155, 0.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2335E39B' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
  border: 1px solid rgba(53, 227, 155, 0.3);
}
.checks li b { color: var(--text); font-weight: 600; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; position: relative; }
.step { position: relative; padding-top: 8px; }
.step__n {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--orange-300);
  background: rgba(255, 111, 0, 0.13);
  border: 1px solid rgba(255, 138, 43, 0.4);
  margin-bottom: 20px;
}
.step h3 { margin-bottom: 10px; }
.step p { color: var(--text-muted); font-size: 0.96rem; }
.step::after {
  content: "";
  position: absolute;
  top: 22px;
  left: 56px;
  right: -22px;
  height: 1px;
  background: linear-gradient(90deg, var(--hairline-strong), transparent);
}
.step:last-child::after { display: none; }

/* ---------- Threat / problem grid ---------- */
.threat {
  padding: 24px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(255, 92, 122, 0.2);
  background: linear-gradient(165deg, rgba(255, 92, 122, 0.06), rgba(255, 92, 122, 0.015));
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.threat:hover { border-color: rgba(255, 92, 122, 0.45); transform: translateY(-3px); }
.threat__stat {
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--rose-400);
  margin-bottom: 8px;
}
.threat h3 { font-size: 1.04rem; margin-bottom: 8px; }
.threat p { font-size: 0.92rem; color: var(--text-muted); }

/* ---------- Comparison table ---------- */
.tablewrap {
  overflow-x: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline);
  background: rgba(12, 5, 36, 0.7);
  -webkit-overflow-scrolling: touch;
}
table.cmp { width: 100%; border-collapse: collapse; min-width: 680px; font-size: 0.94rem; }
table.cmp th, table.cmp td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--hairline); }
table.cmp thead th {
  font-size: 0.73rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  font-weight: 700;
  background: rgba(255, 255, 255, 0.03);
}
table.cmp thead th.is-us { color: var(--orange-300); }
table.cmp tbody tr:last-child td { border-bottom: 0; }
table.cmp tbody tr:hover { background: rgba(159, 123, 255, 0.05); }
table.cmp td:first-child { font-weight: 600; color: var(--text); }
table.cmp td { color: var(--text-muted); }
.cmp-col-us { background: rgba(94, 0, 228, 0.13); }
.yes, .no { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.yes { color: var(--mint-400); }
.no { color: var(--text-dim); }
.yes svg, .no svg { width: 16px; height: 16px; }

/* ---------- Testimonials ---------- */
.quote {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px;
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline);
  background: var(--glass);
  backdrop-filter: blur(12px);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.quote:hover { border-color: var(--hairline-strong); transform: translateY(-4px); }
.quote__stars { display: flex; gap: 3px; color: var(--orange-400); }
.quote__stars svg { width: 15px; height: 15px; }
.quote blockquote { font-size: 1rem; line-height: 1.68; color: var(--text); }
.quote__who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
  background: linear-gradient(140deg, var(--violet-500), var(--violet-400));
  flex: none;
}
.quote__who b { display: block; font-size: 0.92rem; font-weight: 600; }
.quote__who span { font-size: 0.82rem; color: var(--text-dim); }

/* ---------- Pricing: the single offer ---------- */
.offer {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4vw, 52px);
  max-width: 1000px;
  margin-inline: auto;
  padding: clamp(30px, 4vw, 46px);
  border-radius: var(--r-xl);
  border: 1px solid rgba(255, 138, 43, 0.42);
  background:
    radial-gradient(620px 260px at 12% 0%, rgba(255, 111, 0, 0.16), transparent 62%),
    linear-gradient(155deg, rgba(94, 0, 228, 0.34), rgba(18, 10, 49, 0.9));
  box-shadow: var(--glow-inset), var(--shadow-lg);
  overflow: hidden;
}
.offer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 75% 80% at 30% 30%, #000, transparent);
  -webkit-mask-image: radial-gradient(ellipse 75% 80% at 30% 30%, #000, transparent);
}
.offer > * { position: relative; }
.offer__main { display: flex; flex-direction: column; }
.offer__flag {
  align-self: flex-start;
  padding: 5px 14px;
  border-radius: var(--r-pill);
  background: linear-gradient(100deg, var(--orange-500), var(--orange-400));
  color: #1A0700;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.offer__name {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 18px;
  letter-spacing: -0.01em;
}
.offer__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 12px;
}
.offer__was s {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-dim);
  text-decoration-color: var(--orange-500);
  text-decoration-thickness: 2px;
}
.offer__now {
  font-size: clamp(3.6rem, 8vw, 5.4rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.92;
  background: linear-gradient(170deg, #fff 20%, var(--violet-200));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.offer__cur { font-size: 0.46em; vertical-align: super; letter-spacing: -0.02em; }
.offer__per {
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.4;
  flex: none;
}
.offer__equiv {
  margin-top: 18px;
  font-size: 0.98rem;
  color: var(--text-muted);
}
.offer__equiv strong { color: var(--orange-300); }
.offer__main .btn { margin-top: 26px; }
.offer__note {
  margin-top: 14px;
  font-size: 0.82rem;
  color: var(--text-dim);
  text-align: center;
}
.offer__list h3 { margin-bottom: 18px; font-size: 1.05rem; }

/* Same fix as .checks — an absolutely positioned marker, so a <strong> lead-in
   stays part of the sentence instead of becoming a separate flex column. */
.plan__feats { display: grid; gap: 12px; }
.plan__feats li {
  position: relative;
  padding-left: 27px;
  font-size: 0.91rem;
  color: var(--text-muted);
  line-height: 1.55;
}
.plan__feats li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 17px;
  height: 17px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF8A2B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
}
.plan__feats li.is-off { color: var(--text-dim); opacity: 0.6; }
.plan__feats li.is-off::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237E74A0' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
}

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; }
.faq__item {
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.026);
  overflow: hidden;
  transition: border-color 0.25s var(--ease);
}
.faq__item[open] { border-color: var(--hairline-strong); background: rgba(94, 0, 228, 0.09); }
.faq__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 19px 22px;
  font-size: 1.01rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239F7BFF' stroke-width='2.4' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.25s var(--ease);
}
.faq__item[open] .faq__q::after { transform: rotate(135deg); }
.faq__a { padding: 0 22px 21px; color: var(--text-muted); font-size: 0.96rem; line-height: 1.72; }
.faq__a p + p { margin-top: 12px; }

/* ---------- CTA band ---------- */
.cta {
  position: relative;
  padding: clamp(46px, 6vw, 74px) clamp(28px, 5vw, 64px);
  border-radius: var(--r-xl);
  border: 1px solid var(--hairline-strong);
  background:
    radial-gradient(700px 300px at 20% 0%, rgba(255, 111, 0, 0.17), transparent 62%),
    linear-gradient(140deg, rgba(94, 0, 228, 0.5), rgba(36, 16, 94, 0.6));
  box-shadow: var(--glow-inset), var(--shadow-lg);
  text-align: center;
  overflow: hidden;
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000, transparent);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000, transparent);
  pointer-events: none;
}
.cta > * { position: relative; }
.cta h2 { margin-bottom: 18px; }
.cta .lede { margin-inline: auto; }
.cta .btn-row { margin-top: 32px; justify-content: center; }
.cta .micro { margin-top: 22px; justify-content: center; }

/* ---------- Footer ---------- */
.footer {
  margin-top: clamp(60px, 7vw, 96px);
  border-top: 1px solid var(--hairline);
  background: linear-gradient(180deg, rgba(94, 0, 228, 0.09), transparent 40%);
  padding-block: clamp(48px, 6vw, 72px) 32px;
}
.footer__top {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: 40px 30px;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--hairline);
}
.footer__brand p {
  margin-top: 18px;
  font-size: 0.92rem;
  color: var(--text-muted);
  max-width: 34ch;
}
.footer__social { display: flex; gap: 10px; margin-top: 22px; }
.footer__social a {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--hairline);
  color: var(--text-muted);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.footer__social a:hover { color: var(--orange-400); border-color: rgba(255, 138, 43, 0.45); background: rgba(255, 111, 0, 0.1); }
.footer__social svg { width: 17px; height: 17px; }
.footer h4 {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--text-dim);
  margin-bottom: 16px;
  font-weight: 700;
}
.footer__col li + li { margin-top: 10px; }
.footer__col a { font-size: 0.92rem; color: var(--text-muted); transition: color 0.18s var(--ease); }
.footer__col a:hover { color: var(--orange-400); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 28px;
  font-size: 0.86rem;
  color: var(--text-dim);
}
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer__bottom a:hover { color: var(--orange-400); }
.footer__disclaimer {
  margin-top: 20px;
  font-size: 0.78rem;
  color: var(--text-dim);
  line-height: 1.6;
  opacity: 0.8;
}

/* ---------- Breadcrumbs ---------- */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.84rem;
  color: var(--text-dim);
  padding-top: 28px;
}
.crumbs a:hover { color: var(--violet-200); }
.crumbs li + li::before { content: "/"; margin-right: 8px; opacity: 0.45; }
.crumbs li { display: inline-flex; }

/* ---------- Prose (legal pages) ---------- */
.prose { font-size: 1rem; color: var(--text-muted); line-height: 1.8; }
.prose h2 { font-size: 1.5rem; color: var(--text); margin: 44px 0 14px; }
.prose h3 { font-size: 1.13rem; color: var(--text); margin: 30px 0 10px; }
.prose p + p, .prose ul, .prose ol { margin-top: 14px; }
.prose ul li, .prose ol li { padding-left: 22px; position: relative; margin-top: 8px; }
.prose ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 12px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--orange-500);
}
.prose ol { counter-reset: n; }
.prose ol li { counter-increment: n; }
.prose ol li::before {
  content: counter(n) ".";
  position: absolute;
  left: 0;
  color: var(--orange-400);
  font-weight: 600;
}
.prose a { color: var(--violet-200); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--orange-400); }
.prose strong { color: var(--text); }

/* ---------- Form ---------- */
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 8px; }
.field label { font-size: 0.88rem; font-weight: 600; }
.field label span { color: var(--orange-400); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 15px;
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.96rem;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-dim); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--violet-400);
  background: rgba(94, 0, 228, 0.12);
}
.field textarea { resize: vertical; min-height: 130px; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ADA2CC' stroke-width='2.4' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; padding-right: 40px; }
.field select option { background: #150A38; color: var(--text); }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form__note { font-size: 0.82rem; color: var(--text-dim); }

/* ---------- Reveal animation ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .footer__top { grid-template-columns: 1fr 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  /* Mobile header: [burger]  [logo]  [account].
     1fr auto 1fr keeps the logo optically centred, and degrades by shifting
     rather than overlapping when the side columns get wide. */
  .header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
  }
  .burger { display: grid; justify-self: start; }
  .logo { justify-self: center; }
  .header__cta { justify-self: end; min-width: 0; }

  .nav, .header__signin, .header__start { display: none; }
  .account { display: block; }
  .hero__grid, .split { grid-template-columns: 1fr; }
  .split--flip .split__media { order: 0; }
  .split__media { max-width: 620px; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento > *, .bento__wide, .bento__hero { grid-column: span 1; }
  .bento__hero { grid-column: span 2; grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 30px; }
  .step::after { display: none; }
  .offer { grid-template-columns: 1fr; max-width: 560px; }
  .statband { grid-template-columns: repeat(2, 1fr); }
  .mock__float { right: 10px; }
}
@media (max-width: 700px) {
  body { font-size: 16px; }
  .container { padding-inline: 18px; }
  /* The wordmark is ~7.5:1, so it needs to shrink to leave room for the burger. */
  .logo img { height: 23px; }
  .logo--footer img { height: 28px; }
  .grid--2, .grid--3, .grid--4, .bento { grid-template-columns: 1fr; }
  .bento__hero { grid-column: span 1; }
  .statband { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .field--row { grid-template-columns: 1fr; }
  .mock__float { position: static; margin: 0 20px 20px; animation: none; }
  .btn-row .btn { flex: 1 1 100%; }
}

/* Tighten the three header columns so the wordmark stays centred on small phones. */
@media (max-width: 560px) {
  .logo img { height: 21px; }
  .account__btn { padding: 8px 11px; font-size: 0.76rem; }
  .account__menu { min-width: 216px; }
}
@media (max-width: 380px) {
  .logo img { height: 19px; }
  .account__btn { padding: 8px 10px; font-size: 0.72rem; gap: 4px; }
}

/* ---------- Motion / print ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    /* Without this the dropdown's close delay survives, so the menu stalls
       before vanishing instantly — worse than either behaviour on its own. */
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}
@media print {
  body::before, body::after, .header, .footer, .mock, .cta { display: none !important; }
  body { background: #fff; color: #000; }
}