/* ═══════════════════════════════════════════════════════════════
   Neurobird — Warm Minimal · Poppins · 2026
   Aesthetic: clean editorial · warm beige · grainy organic
   Base: #F4DFCD beige · Accent: #111111 black
═══════════════════════════════════════════════════════════════ */

/* ── Design tokens ───────────────────────────────────────── */
:root {
  /* Surfaces (warm neutral palette) */
  --bg:  #F5EFE6;
  --s1:  #FBF8F3;
  --s2:  #FFFFFF;
  --s3:  #EFE7DC;

  /* Borders */
  --b0: rgba(28,28,28,.06);
  --b1: rgba(28,28,28,.10);
  --b2: rgba(28,28,28,.14);
  --b3: rgba(28,28,28,.20);

  /* Warm accents */
  --h-silver: #8C7B6E;
  --h-violet: #7C6FA0;
  --h-cyan:   #6B9FAF;
  --h-rose:   #C49A8A;
  --h-gold:   #B89A6A;
  --h-mint:   #7AAF94;

  /* Warm gradient */
  --chrome: linear-gradient(180deg, #FCF6F1 0%, #EDE5DB 50%, #F4DFCD 100%);
  --holo: linear-gradient(120deg, #C49A8A, #7C6FA0, #6B9FAF, #7AAF94, #C49A8A);

  /* Accent system */
  --accent:       #6FAF7A;
  --accent-light: #7FBF8E;
  --accent-glow:  rgba(111,175,122,.24);

  /* System surfaces */
  --card-bg:      #FFFFFF;
  --card-bg-soft: #FBF8F3;
  --card-border:  rgba(28,28,28,.08);
  --card-border2: rgba(28,28,28,.14);

  /* Shadows (reference: soft iOS-like elevation) */
  --shadow-card:       0 10px 30px rgba(0,0,0,.05);
  --shadow-card-hover: 0 14px 36px rgba(0,0,0,.08);

  /* Semantic */
  --green:  #6FAF7A;
  --amber:  #B8860B;
  --red:    #C0392B;
  --text:   #1C1C1C;
  --muted:  #6F6F6F;
  --muted2: #969089;

  /* 8pt spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 32px;

  /* Radius logic (soft physical cards) */
  --r-s: 12px;
  --r: 20px;
  --r-l: 24px;
  --r-xl: 28px;
}

/* ── Animated border angle (Houdini @property) ───────────── */
@property --ba {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* ── Keyframes ────────────────────────────────────────────── */

/* Holographic color-shift (used on text, borders, buttons) */
@keyframes holo-shift {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

/* Rotating conic border — sci-fi radar sweep */
@keyframes ba-spin { to { --ba: 360deg; } }

/* Card scan line — vertical sweep */
@keyframes card-scan {
  0%   { top: -80px;              opacity: 0;  }
  5%   { opacity: 1;                           }
  95%  { opacity: 1;                           }
  100% { top: calc(100% + 80px); opacity: 0;  }
}

/* Slower drift for ambient glows */
@keyframes glow-drift {
  0%, 100% { opacity: .14; transform: scale(1);    }
  50%       { opacity: .22; transform: scale(1.08); }
}

/* Orb floats */
@keyframes float-a { 0%,100%{transform:translate(0,0)} 33%{transform:translate(40px,-30px)} 66%{transform:translate(-20px,25px)} }
@keyframes float-b { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-35px,22px)} }
@keyframes float-c { 0%,100%{transform:translate(0,0)} 25%{transform:translate(28px,-18px)} 75%{transform:translate(-22px,14px)} }
@keyframes float-d { 0%,100%{transform:translate(0,0)} 40%{transform:translate(-30px,-20px)} 80%{transform:translate(20px,15px)} }

/* Spin for step-ico SVG */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes step-spin { to { transform: rotate(360deg); } }

/* Slide up for results */
@keyframes slide-up { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }

/* Ticker */
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* Kicker pulse */
@keyframes kpulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.75)} }

/* Chrome shimmer (for score number) */
@keyframes chrome-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

/* Progress shimmer */
@keyframes prog-shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--text);
  font-family: 'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}

/* Ensure content sits above background effects */
body > header,
body > main,
body > footer {
  position: relative;
  z-index: 2;
}
a      { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; }
.hidden { display: none !important; }

/* ── Warm beige background — tonal gradient base ─────────── */
body {
  background:
    /* subtle warm diagonal shift so it's never flat */
    linear-gradient(145deg,
      #F8F1E8 0%,
      #F5EDE3 30%,
      #F2E8DC 60%,
      #EEE2D5 100%
    );
  background-attachment: fixed;
}

/* ── Grain layer 1 — coarse warm texture (like linen paper) ─ */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat; background-size: 220px;
  opacity: .32; mix-blend-mode: multiply;
}
/* ── Grain layer 2 — fine sand detail ───────────────────── */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat; background-size: 80px;
  opacity: .18; mix-blend-mode: multiply;
}

/* ── Vignette + tonal depth layer ───────────────────────── */
.noise-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    /* corner darkening — gives depth like aged paper */
    radial-gradient(ellipse 100% 100% at 0% 0%,   rgba(180,140,100,.09) 0%, transparent 55%),
    radial-gradient(ellipse 100% 100% at 100% 100%, rgba(150,110,70,.11) 0%, transparent 55%),
    radial-gradient(ellipse 100% 100% at 100% 0%,  rgba(160,120,80,.07) 0%, transparent 50%),
    radial-gradient(ellipse 100% 100% at 0% 100%,  rgba(140,100,60,.09) 0%, transparent 50%),
    /* center bloom — warm ivory lift */
    radial-gradient(ellipse 70% 50% at 50% 38%, rgba(255,250,240,.45) 0%, transparent 70%),
    /* bottom shadow */
    radial-gradient(ellipse 80% 40% at 50% 100%, rgba(80,50,20,.08) 0%, transparent 60%);
  mix-blend-mode: normal;
  opacity: 1;
}

/* Warm accent text */
.holo-text {
  color: #111111; font-weight: 700;
}

code {
  font-family: 'Inter', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8em;
  background: rgba(0,0,0,.06); border: 1px solid rgba(0,0,0,.1);
  border-radius: 6px; padding: 1px 6px; color: #555555;
}

/* Reusable system primitives */
.nb-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-card);
  padding: var(--sp-4);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.nb-card:hover {
  transform: translateY(-2px);
  border-color: var(--card-border2);
  box-shadow: var(--shadow-card-hover);
}
.nb-btn {
  border: 0;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  transition: all .18s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nb-btn-primary {
  background: #1C1C1C;
  color: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
.nb-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 20px rgba(0,0,0,.22); }
.nb-btn-soft {
  background: var(--card-bg-soft);
  color: var(--text);
  border: 1px solid var(--card-border);
}
.nb-btn-soft:hover { background: #fff; border-color: var(--card-border2); }
.nb-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 600;
  color: #537f5a;
  background: rgba(111,175,122,.14);
  border: 1px solid rgba(111,175,122,.2);
}
.nb-badge-warn {
  color: #946d1d;
  background: rgba(184,134,11,.14);
  border-color: rgba(184,134,11,.24);
}
.nb-badge-neutral {
  color: #6f6f6f;
  background: rgba(28,28,28,.06);
  border-color: rgba(28,28,28,.1);
}

/* ── Container ───────────────────────────────────────────── */
.container { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }

/* ── Holographic border mixin (pseudo-element pattern) ─────
   Used on cards: inset box-shadow with holo gradient          */
.holo-border {
  position: relative;
}
.holo-border::after {
  content: '';
  position: absolute; inset: 0; border-radius: inherit;
  background: var(--holo);
  background-size: 300% 300%;
  animation: holo-shift 6s linear infinite;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
  /* Make it a border by masking the center */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding: 1px;
}
.holo-border:hover::after { opacity: .7; }

/* ── Buttons ─────────────────────────────────────────────── */

.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: #1C1C1C;
  border: none;
  color: #fff; border-radius: 999px; padding: 13px 26px;
  font-size: 14px; font-weight: 600; letter-spacing: -.1px;
  transition: background .2s, transform .2s, box-shadow .2s;
  white-space: nowrap;
  box-shadow: 0 2px 12px rgba(0,0,0,.2);
}
.btn-primary:hover {
  background: #2b2b2b;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}

.btn-primary-full {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; background: #111111;
  color: #fff; border-radius: 999px; padding: 15px 20px;
  font-size: 14.5px; font-weight: 600; letter-spacing: -.1px;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  transition: transform .16s, box-shadow .16s, background .16s;
}
.btn-primary-full::before { display: none; }
.btn-primary-full:hover { background: #333333; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,.25); }

.btn-outline {
  display: flex; align-items: center; justify-content: center; width: 100%;
  background: transparent; color: rgba(0,0,0,.55);
  border: 1.5px solid rgba(0,0,0,.18); border-radius: 999px; padding: 14px;
  font-size: 14.5px; font-weight: 600; transition: all .16s;
}
.btn-outline:hover { border-color: rgba(0,0,0,.4); color: #111111; background: rgba(0,0,0,.04); }

.btn-pro-cta {
  display: inline-flex; align-items: center; gap: 7px;
  background: #111111;
  color: #fff; border-radius: var(--r-l); padding: 12px 20px;
  font-size: 14.5px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 4px 20px rgba(0,0,0,.4); transition: transform .16s, box-shadow .16s, background .16s;
}
.btn-pro-cta:hover { background: #111111; transform: translateY(-1px); box-shadow: 0 8px 28px rgba(0,0,0,.55); }

/* ── Announcement ────────────────────────────────────────── */
.announce {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #111111;
  border-bottom: none;
  color: rgba(0,0,0,.7); font-size: 13px; font-weight: 500;
  padding: 9px 20px; position: relative; z-index: 10;
}
.announce strong { color: #fff; }
.announce-close {
  position: absolute; right: 16px; background: none;
  color: rgba(0,0,0,.4); font-size: 18px; line-height: 1; padding: 0 4px; transition: color .15s;
}
.announce-close:hover { color: rgba(0,0,0,.8); }

/* ── Nav ─────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 200;
  background: rgba(245,239,230,.88);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-bottom: 1px solid rgba(0,0,0,.08);
  transition: box-shadow .25s, background .25s;
}
.nav.scrolled {
  background: rgba(245,239,230,.96);
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 8px 32px rgba(0,0,0,.08);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0;
}
.nav-inner #langSwitcher { margin-left: auto; }
.nav-logo { display: flex; align-items: center; gap: 8px; }
.nav-logo > span:last-child { /* nb-wordmark set below */ }
.logo-icon { display: flex; align-items: center; justify-content: center; line-height: 0; }
.nav-links { display: flex; gap: 32px; }
.nav-links a {
  color: rgba(0,0,0,.45); font-size: 14px; font-weight: 500;
  letter-spacing: -.01em; transition: color .15s;
}
.nav-links a:hover { color: rgba(0,0,0,.85); }
.nav-right { display: flex; align-items: center; gap: 8px; }
.btn-nav-ghost {
  color: rgba(0,0,0,.45); border-radius: var(--r);
  padding: 7px 14px; font-size: 14px; font-weight: 500;
  transition: color .15s; background: none; border: none;
}
.btn-nav-ghost:hover { color: rgba(0,0,0,.85); }
.btn-nav {
  background: #111111;
  border: none;
  color: #fff; border-radius: 999px;
  padding: 10px 22px; font-size: 13.5px; font-weight: 600;
  letter-spacing: -.01em;
  transition: all .2s;
  box-shadow: 0 2px 12px rgba(0,0,0,.2);
}
.btn-nav::before, .btn-nav::after { display: none; }
.btn-nav:hover {
  background: #333333;
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
  transform: translateY(-1px);
}

/* ── Hero ────────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden;
  min-height: calc(100vh - 53px);
  display: flex; align-items: center;
  padding: 60px 0;
}

/* Two-column split */
.hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.hero-left  { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.hero-right { display: flex; flex-direction: column; align-items: stretch; min-width: 0; }

/* Aurora-holographic background */
.hero-canvas { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

/* Subtle dot grid */
.grid-overlay {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle, rgba(0,0,0,.06) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 80% 65% at 50% 0%, black 0%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 65% at 50% 0%, black 0%, transparent 90%);
}

/* No orbs on light theme */
.orb, .orb-1, .orb-2, .orb-3, .orb-4 { display: none; }
.hero-canvas::after { display: none; }

.hero-body { position: relative; z-index: 1; width: 100%; }
.hero-split { position: relative; z-index: 1; }

.hero-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
  margin-bottom: 30px;
  white-space: nowrap;
}
.kicker-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: rgba(0,0,0,.36);
}
.kicker-divider {
  width: 1px; height: 12px;
  background: rgba(255,255,255,.16);
  flex-shrink: 0;
}
.kicker-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: .03em;
  color: rgba(134,239,172,.75);
}
.kicker-pulse {
  width: 5px; height: 5px; border-radius: 50%;
  background: #86efac; box-shadow: 0 0 6px #86efac80;
  animation: kpulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}

/* ── Hero headline ───────────────────────────────────────── */
.hero h1 {
  font-size: clamp(50px, 5.4vw, 70px);
  font-weight: 900;
  letter-spacing: -3.5px;
  line-height: 1.05;
  margin-bottom: 32px;
  color: #111111;
}
.hero h1 > span { display: inline; }
.hero h1 > span.hero-line-1 { color: #111111; }
.hero-highlight {
  /* consolidated — see holo-ai block near bottom of file */
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .hero-highlight { animation: none; background-size: 100% 100%; }
}
.br-mobile { display: none; }

.hero-lead {
  font-size: 17px; color: rgba(0,0,0,.5);
  max-width: 460px; line-height: 1.7; margin-bottom: 0; font-weight: 400;
  letter-spacing: -.01em;
}

/* ── Avatar social proof in hero ─────────────────────────── */
.hero-proof {
  display: flex; align-items: center; gap: 14px;
  margin: 28px 0 20px;
}
.avatar-stack { display: flex; }
.ava-sm {
  width: 38px; height: 38px; border-radius: 50%;
  border: 2px solid var(--bg);
  outline: 2px solid rgba(0,0,0,.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: #fff;
  margin-left: -10px; flex-shrink: 0;
  overflow: hidden;
  background: #111111;
}
.ava-sm:first-child { margin-left: 0; }

/* Initials variant */
.ava-i {
  font-size: 9px; font-weight: 800; letter-spacing: .02em;
  background: linear-gradient(135deg, #1e1b35, #14112a);
  color: rgba(0,0,0,.6);
}

/* ── Testimonial initials badge ──────────────────────────── */
.rev-initial {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; letter-spacing: .03em;
  background: linear-gradient(135deg, #1e1b35, #14112a);
  border: 1px solid rgba(0,0,0,.2);
  color: rgba(0,0,0,.7);
}
.proof-text { display: flex; flex-direction: column; gap: 1px; }
.proof-stars {
  font-size: 12px; letter-spacing: 1px;
  color: #B8860B;
}
.proof-count { font-size: 12px; color: var(--muted); }
.proof-count strong { color: var(--text); }

/* Trust badges */
.trust-badges {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 12px;
}
.trust-badge {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 500; color: rgba(0,0,0,.45);
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 999px; padding: 4px 10px;
  transition: border-color .2s, color .2s;
}
.trust-badge svg { opacity: .5; color: rgba(0,0,0,.55); flex-shrink: 0; }
.trust-badge:hover { border-color: rgba(0,0,0,.14); color: rgba(0,0,0,.7); }

/* ── Analyzer card ───────────────────────────────────────── */
.analyzer-card {
  width: 100%; min-width: 0;
  background: var(--card-bg);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-bottom: 28px;
  position: relative;
  isolation: isolate;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--card-border);
}
.analyzer-card:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--card-border2);
}
.analyzer-card::before { display: none; }
.analyzer-card::after { display: none; }

.card-topbar {
  display: flex; align-items: center; gap: 6px;
  padding: 11px 16px;
  background: rgba(252,246,241,.92);
  border-bottom: 1px solid rgba(0,0,0,.07);
  overflow: hidden;
}
.topbar-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.topbar-dot.red   { background: #ff5f57; }
.topbar-dot.amber { background: #febc2e; }
.topbar-dot.green { background: #28c840; }
.topbar-label {
  margin-left: 8px; font-size: 11px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;
}
.topbar-engines {
  font-size: 11px; color: rgba(0,0,0,.35);
  white-space: nowrap; flex-shrink: 0;
}

.card-body {
  padding: 22px 24px 24px;
  /* Slightly darker/inset surface so the contents pop */
  background: linear-gradient(180deg, rgba(251,248,243,.98) 0%, rgba(239,231,220,.9) 100%);
}

/* Holographic animated border wrapper */
@property --url-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes url-border-spin { to { --url-angle: 360deg; } }
@keyframes url-border-shimmer {
  0%, 100% { opacity: .55; }
  50%       { opacity: 1;   }
}

.url-field-wrap {
  position: relative;
  border-radius: 999px;
  padding: 1.5px;
  margin-bottom: 12px;
  background: conic-gradient(from var(--url-angle),
    #C49A8A 0%, #7C6FA0 18%, #6B9FAF 36%,
    #7AAF94 54%, #B8A86A 72%, #C49A8A 100%);
  animation: url-border-spin 4s linear infinite,
             url-border-shimmer 3s ease-in-out infinite;
  box-shadow: 0 0 18px rgba(196,154,138,.18), 0 0 36px rgba(124,111,160,.12);
  transition: box-shadow .3s;
}
.url-field-wrap:focus-within {
  box-shadow: 0 0 22px rgba(196,154,138,.32),
              0 0 44px rgba(124,111,160,.22),
              0 0 8px  rgba(107,159,175,.18);
}

.url-field {
  display: flex; align-items: center; gap: 0;
  background: #FFFFFF;
  border: none;
  border-radius: 999px; padding: 4px 4px 4px 0;
  overflow: hidden; width: 100%;
}

/* Protocol toggle badge */
.url-proto {
  display: flex; align-items: center; gap: 5px;
  flex-shrink: 0; padding: 9px 10px 9px 13px;
  background: none; border: none; cursor: pointer;
  font-size: 13px; font-weight: 700; font-family: 'Poppins', monospace;
  letter-spacing: -.3px; transition: opacity .15s;
  white-space: nowrap; line-height: 1;
}
.url-proto:hover { opacity: .75; }

/* HTTPS: clean dark */
.url-proto-https { color: #111111; font-weight: 700; }
.url-proto-https svg { color: #3D8B6E; flex-shrink: 0; }

/* HTTP: muted warning */
.url-proto-http { color: var(--amber); }
.url-proto-http svg { color: var(--amber); flex-shrink: 0; }

/* Thin vertical divider between proto and input */
.url-divider {
  width: 1px; height: 20px; background: rgba(0,0,0,.14); flex-shrink: 0; margin: 0 6px;
}

.url-icon  { flex-shrink: 0; opacity: .4; }
.url-field input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--text); font-size: 15px; font-family: inherit; padding: 9px 6px 9px 0;
}
.url-field input::placeholder { color: var(--muted2); }

.card-hint { font-size: 12px; color: var(--muted2); text-align: center; }

/* ── Loading state ───────────────────────────────────────── */
.loading-state {
  margin-top: 16px;
  padding: 16px 16px 14px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.steps { display: grid; gap: 9px; margin-bottom: 20px; }
.step {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 500; color: var(--text);
}
.step-dim  { color: var(--muted2); }
.step-done { color: #3D8B6E; }
.step-ico  {
  width: 18px; height: 18px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.step-ico svg { width: 16px; height: 16px; }
.step-spin-svg { animation: step-spin 0.9s linear infinite; transform-origin: center; }
.step-meta {
  margin-left: auto; font-size: 11px; font-family: 'Poppins', monospace;
  color: var(--muted2); white-space: nowrap;
}
.spin { animation: spin 1.1s linear infinite; display: inline-block; }

/* Progress bar */
.prog-wrap { margin-bottom: 10px; }
.prog-track {
  height: 5px; border-radius: 999px;
  background: rgba(17,17,17,.12);
  overflow: visible; position: relative;
}
.prog-fill {
  height: 100%; width: 0; border-radius: 999px;
  /* More prominent, premium "ink" gradient (still warm + minimal) */
  background: linear-gradient(90deg,
    #1C1C1C 0%,
    rgba(111,175,122,.95) 40%,
    rgba(196,154,138,.9) 72%,
    #1C1C1C 100%);
  background-size: 280% auto;
  transition: width .6s cubic-bezier(.4,0,.2,1);
  animation: prog-shimmer 3s linear infinite;
  position: relative; z-index: 1;
}
/* Glow under the fill */
.prog-fill::after {
  content: '';
  position: absolute; right: 0; top: -2px;
  width: 20px; height: 9px;
  background: rgba(0,0,0,.42);
  border-radius: 999px;
  filter: blur(4px);
}
.prog-meta-row {
  display: flex; align-items: center;
  margin-top: 7px;
  gap: 0;
}
.prog-pct {
  font-size: 11px; font-weight: 800; font-family: 'Poppins', monospace;
  background: var(--holo); background-size: 300% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: holo-shift 5s linear infinite;
  min-width: 34px;
}
.prog-eta {
  font-size: 11px; color: #555555; font-family: 'Poppins', monospace;
  font-weight: 600; flex: 1; text-align: center;
}
.prog-elapsed {
  font-size: 11px; color: var(--muted);
  font-family: 'Poppins', monospace;
  min-width: 28px; text-align: right;
}

/* Stage label row */
.prog-stage-row {
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 12px;
}
.prog-pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: #555555; box-shadow: 0 0 6px #555555;
  animation: kpulse 1.2s ease-in-out infinite; flex-shrink: 0;
}
.prog-stage {
  font-size: 12px; font-weight: 600; color: rgba(0,0,0,.55);
}

/* LLM live counter */
.llm-live {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 12px;
  background: rgba(212,212,216,.04);
  border: 1px solid rgba(212,212,216,.09);
  border-radius: var(--r); font-size: 11px;
  font-family: 'Poppins', monospace; color: rgba(0,0,0,.4);
  position: relative; overflow: hidden;
}
.llm-live::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.05), rgba(17,17,17,.03), transparent);
  background-size: 300% auto; animation: holo-shift 4s linear infinite;
  pointer-events: none;
}
.llm-live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #10b981; box-shadow: 0 0 5px #10b981;
  animation: kpulse 1s ease-in-out infinite; flex-shrink: 0;
}
.llm-live-tokens { font-weight: 700; color: #111111; }
.llm-sep { color: var(--muted2); }

/* Error */
.error-state {
  margin-top: 14px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  background: rgba(192,57,43,.06); border: 1px solid rgba(192,57,43,.16);
  border-radius: var(--r); padding: 11px 14px; font-size: 13px; color: #C0392B;
}
.error-retry {
  margin-left: auto; flex-shrink: 0;
  background: rgba(192,57,43,.1); border: 1px solid rgba(192,57,43,.25);
  color: #C0392B; border-radius: var(--r-s); padding: 4px 12px;
  font-size: 12px; font-weight: 700; cursor: pointer;
  transition: background .15s;
}
.error-retry:hover { background: rgba(192,57,43,.2); }

/* Trust */
.hero-trust {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: 12.5px; color: rgba(0,0,0,.35); margin-bottom: 0;
}
.hero-trust span { display: flex; align-items: center; gap: 4px; }
.hero-trust span svg { opacity: .4; }
.hero-trust .dot { color: rgba(0,0,0,.18); }

/* ── Logo strip — enterprise trust bar ───────────────────── */
.logos-strip {
  padding: 36px 0;
  border-top: 1px solid rgba(0,0,0,.07);
  border-bottom: 1px solid rgba(0,0,0,.07);
  background: var(--s1);
  text-align: center;
}
.logos-label {
  font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(0,0,0,.3); margin-bottom: 24px;
}
.logos-row {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 0;
}
.logo-name {
  font-size: 15px; font-weight: 800; letter-spacing: -.3px;
  color: rgba(0,0,0,.2); padding: 0 28px;
  transition: color .3s;
}
.logo-name:hover { color: rgba(0,0,0,.5); }
.logo-div {
  color: rgba(0,0,0,.1); font-size: 18px;
}

/* ── AI Search Gap — animated chat mockups ───────────────── */
.ai-gap-section { padding: 120px 0; }
.ai-gap-lead {
  font-size: 17px; color: var(--muted); max-width: 560px;
  line-height: 1.7; margin-bottom: 48px; margin-top: -38px;
}

/* ── MacBook-style screen frame ── */
.mockup-wrap {
  background: #EDE5DB;
  border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(0,0,0,.1);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.6) inset,
    0 20px 60px rgba(0,0,0,.15),
    0 4px 16px rgba(0,0,0,.08);
  margin-bottom: 20px;
}
.mockup-topbar {
  display: flex; align-items: center;
  padding: 10px 16px;
  background: #EDE5DB;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.mockup-dots-wrap { display: flex; gap: 6px; width: 52px; flex-shrink: 0; }
.mdot {
  width: 11px; height: 11px; border-radius: 50%;
  box-shadow: 0 0 0 0.5px rgba(0,0,0,.15) inset;
}
.mdot.r { background: #ff5f57; }
.mdot.y { background: #febc2e; }
.mdot.g { background: #28c840; }
.mockup-urlbar {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  background: rgba(255,255,255,.65); border: 1px solid rgba(0,0,0,.1);
  border-radius: 6px; padding: 5px 14px;
  font-size: 11px; color: rgba(0,0,0,.35);
  max-width: 360px; margin: 0 auto;
  font-family: inherit; letter-spacing: .01em;
}
.mockup-inner {
  padding: 16px;
  background: #FCF6F1;
}

/* ── Windows grid inside frame ── */
.ai-windows {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin-bottom: 0;
}

/* Window shell */
.ai-win {
  border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  background: #FFFFFF;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  display: flex; flex-direction: column;
  transition: transform .3s, box-shadow .3s;
  min-height: 380px;
}
.ai-win:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.ai-win-gpt    { border-color: rgba(16,163,127,.2); }
.ai-win-claude { border-color: rgba(212,113,62,.2); }
.ai-win-gemini { border-color: rgba(66,133,244,.2); }

/* Chrome bar */
.ai-win-chrome {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 13px 9px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.ai-win-gpt    .ai-win-chrome { background: rgba(16,163,127,.05); }
.ai-win-claude .ai-win-chrome { background: rgba(212,113,62,.05); }
.ai-win-gemini .ai-win-chrome { background: rgba(66,133,244,.05); }
.ai-win-dots { display: flex; gap: 5px; flex-shrink: 0; }
.ai-win-dots span { width: 8px; height: 8px; border-radius: 50%; }
.ai-win-dots span:nth-child(1) { background: rgba(255,95,87,.7); }
.ai-win-dots span:nth-child(2) { background: rgba(254,188,46,.7); }
.ai-win-dots span:nth-child(3) { background: rgba(40,200,64,.6); }
.ai-win-label {
  display: flex; align-items: center; gap: 7px; flex: 1;
  font-size: 12px; font-weight: 600; color: rgba(0,0,0,.55);
  letter-spacing: .01em;
}
.ai-win-model {
  margin-left: auto;
  font-size: 9.5px; font-weight: 600;
  background: rgba(0,0,0,.06); border: 1px solid rgba(0,0,0,.08);
  border-radius: 4px; padding: 1px 6px;
  color: rgba(0,0,0,.4); letter-spacing: .02em;
}

/* Body */
.ai-win-body {
  padding: 14px 13px 16px; display: flex; flex-direction: column; gap: 12px; flex: 1;
}

/* User message */
.ai-msg-user {
  align-self: flex-end; max-width: 90%;
  background: #111111;
  border: none;
  border-radius: 16px 16px 3px 16px;
  padding: 9px 12px;
  font-size: 12px; color: #fff; line-height: 1.55;
  min-height: 36px;
}
.ai-cursor {
  display: inline-block; width: 1px; height: 12px;
  background: rgba(0,0,0,.5); margin-left: 1px; vertical-align: middle;
  animation: blink-cur .75s step-end infinite;
}
.ai-cursor.hidden { display: none; }
@keyframes blink-cur { 0%,100%{opacity:1} 50%{opacity:0} }

/* Thinking dots */
.ai-thinking {
  display: none; align-items: center; gap: 5px; padding: 6px 2px;
}
.ai-thinking.active { display: flex; }
.ai-thinking span {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(0,0,0,.18);
  animation: think-bounce .9s ease-in-out infinite;
}
.ai-thinking span:nth-child(2) { animation-delay: .18s; }
.ai-thinking span:nth-child(3) { animation-delay: .36s; }
@keyframes think-bounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-6px)} }

/* Bot response */
.ai-msg-bot { display: flex; gap: 10px; align-items: flex-start; opacity: 0; transition: opacity .3s; }
.ai-msg-bot.visible { opacity: 1; }
.ai-bot-avatar {
  width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.ai-avatar-gpt    { background: rgba(16,163,127,.1); border: 1px solid rgba(16,163,127,.25); }
.ai-avatar-claude { background: rgba(212,113,62,.1);  border: 1px solid rgba(212,113,62,.25); }
.ai-avatar-gemini { background: rgba(66,133,244,.1);  border: 1px solid rgba(66,133,244,.25); }
.ai-bot-text { flex: 1; }
.ai-bot-intro { font-size: 11.5px; color: rgba(0,0,0,.45); margin-bottom: 8px; line-height: 1.5; }

/* Result list */
.ai-result-list { display: flex; flex-direction: column; gap: 4px; }
.ai-result-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; line-height: 1.4;
  padding: 7px 10px; border-radius: 8px;
  opacity: 0; transform: translateY(5px);
  transition: opacity .28s, transform .28s;
}
.ai-result-item.visible { opacity: 1; transform: none; }
.ai-result-item strong { color: rgba(0,0,0,.85); font-weight: 600; }
.ai-result-item em { color: rgba(0,0,0,.3); font-style: normal; font-size: 10.5px; margin-left: 2px; }
.ai-found { background: rgba(0,0,0,.03); border: 1px solid rgba(0,0,0,.07); }
.ai-rank {
  font-size: 10px; font-weight: 700; color: rgba(0,0,0,.25);
  width: 14px; flex-shrink: 0; font-family: 'Poppins', monospace;
}

/* Brand result — highlighted */
.ai-brand-result {
  background: linear-gradient(105deg, rgba(17,17,17,.04), rgba(17,17,17,.02));
  border: 1px solid rgba(0,0,0,.15);
  box-shadow: 0 0 10px rgba(0,0,0,.04);
  animation: brand-pulse 3s ease-in-out infinite;
}
@keyframes brand-pulse {
  0%,100% { box-shadow: 0 0 16px rgba(0,0,0,.07); }
  50%      { box-shadow: 0 0 26px rgba(0,0,0,.16); }
}
.ai-rank-brand {
  background: linear-gradient(90deg, #555555, #777777);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 800;
}
.ai-brand-inner { display: flex; align-items: center; gap: 7px; flex: 1; }
.ai-brand-inner strong { color: rgba(0,0,0,.95) !important; }
.ai-brand-tag {
  font-size: 9px; font-weight: 700; letter-spacing: .04em;
  color: #111111;
  border: 1px solid rgba(0,0,0,.25); border-radius: 999px;
  padding: 1px 6px; white-space: nowrap;
}

/* Replay row */
.ai-replay-row {
  display: flex; align-items: center; gap: 14px; margin-top: 16px;
}
.ai-replay-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(0,0,0,.04); border: 1px solid rgba(0,0,0,.1);
  color: rgba(0,0,0,.55); border-radius: var(--r); padding: 8px 16px;
  font-size: 12px; font-weight: 600; font-family: inherit;
  transition: all .18s; cursor: pointer;
}
.ai-replay-btn:hover { background: rgba(0,0,0,.08); color: rgba(0,0,0,.8); }
.ai-replay-hint { font-size: 12px; color: rgba(0,0,0,.3); }

@media (max-width: 900px) { .ai-windows { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .ai-gap-section { padding: 80px 0; } }

/* ── Sections ────────────────────────────────────────────── */
.section { padding: 128px 0; }
.section-alt {
  background: var(--s1);
  border-top: 1px solid var(--card-border);
  border-bottom: 1px solid var(--card-border);
}

.sec-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  color: rgba(0,0,0,.45);
  margin-bottom: 20px;
}
.sec-kicker::before {
  content: '';
  display: block; width: 18px; height: 1px;
  background: rgba(0,0,0,.3);
}
.sec-h2 {
  font-size: clamp(30px, 3.4vw, 48px);
  font-weight: 700;
  letter-spacing: -1.2px;
  line-height: 1.12;
  margin-bottom: 56px;
  color: var(--text);
  text-wrap: balance;
}

/* ── How it works ────────────────────────────────────────── */
.how-steps {
  display: grid; grid-template-columns: repeat(3, 1fr);
  align-items: start; gap: 2px;
  background: rgba(28,28,28,.05);
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-card);
}
.how-card {
  background: var(--card-bg);
  border: none;
  border-right: 1px solid var(--card-border);
  border-radius: 0; padding: 44px 36px 40px;
  position: relative; overflow: hidden;
  transition: background .2s, transform .2s;
}
.how-card:last-child { border-right: none; }
.how-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.15), rgba(0,0,0,.1), transparent);
  opacity: 0; transition: opacity .3s;
}
.how-card:hover { background: var(--card-bg-soft); transform: translateY(-1px); }
.how-card:hover::before { opacity: 1; }
.how-num {
  font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
  color: rgba(0,0,0,.35);
  margin-bottom: 24px;
  display: flex; align-items: center; gap: 8px;
}
.how-num::before {
  content: ''; display: block; width: 24px; height: 1px;
  background: rgba(0,0,0,.4);
}
.how-card h3 { font-size: 19px; font-weight: 700; margin-bottom: 14px; color: #111111; letter-spacing: -.3px; }
.how-card p  { font-size: 14.5px; color: rgba(0,0,0,.5); line-height: 1.75; }

/* ── Stats band ─────────────────────────────────────────── */
.stats-band {
  border-top: 1px solid var(--card-border);
  border-bottom: 1px solid var(--card-border);
  padding: 72px 0;
  background: var(--s1);
  position: relative; overflow: hidden;
}
.stats-band::before { display: none; }
.stats-row {
  display: flex; align-items: center; justify-content: space-between;
  position: relative; z-index: 1;
}
.stat { text-align: center; }
.stat-n {
  display: block;
  font-size: clamp(40px, 5vw, 62px);
  font-weight: 900; letter-spacing: -3px; line-height: 1;
  color: #111111;
  animation: none;
  background: none; -webkit-background-clip: unset; background-clip: unset;
}
.stat-l {
  display: block; font-size: 13.5px; color: rgba(0,0,0,.4);
  margin-top: 8px; letter-spacing: -.01em; font-weight: 500;
}
.stat-rule { width: 1px; height: 72px; background: rgba(0,0,0,.1); }

/* ── Features ─────────────────────────────────────────────── */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.feat-card {
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: var(--r-l); padding: 36px 30px;
  position: relative; overflow: hidden;
  transition: border-color .25s, transform .25s, background .25s;
  box-shadow: var(--shadow-card);
}
.feat-card::before { display: none; }
.feat-card:hover {
  border-color: var(--card-border2);
  background: var(--card-bg-soft);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}
.feat-ico {
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--s1);
  border: 1px solid var(--card-border);
  display: flex; align-items: center; justify-content: center; margin-bottom: 24px;
}
.feat-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 12px; color: #111111; letter-spacing: -.2px; }
.feat-card p  { font-size: 14px; color: rgba(0,0,0,.5); line-height: 1.72; }

/* ── Testimonials ─────────────────────────────────────────── */
.review-stars {
  font-size: 13px; letter-spacing: 2px; margin-bottom: 0;
  color: #B8860B;
  display: inline-block;
}

/* Featured testimonial */
.review-hero {
  display: flex; gap: 60px; align-items: center; flex-wrap: wrap;
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: var(--r-xl); padding: 52px 56px;
  margin-bottom: 16px; position: relative; overflow: hidden;
  box-shadow: var(--shadow-card);
}
.review-hero::before { display: none; }
.review-scores {
  display: flex; align-items: center; gap: 24px; flex-shrink: 0;
}
.rscore { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rscore-n {
  font-size: 58px; font-weight: 900; letter-spacing: -4px; line-height: 1;
  color: #111111; background: none;
  -webkit-background-clip: unset; background-clip: unset;
  animation: none;
}
.rscore-before .rscore-n { opacity: .35; }
.rscore-after .rscore-n { color: #3D8B6E; }
.rscore-l { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: rgba(0,0,0,.3); }
.rscore-arrow { opacity: .3; }
.review-hero-body { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 22px; }
.review-quote {
  font-size: 19px; line-height: 1.62; color: rgba(0,0,0,.8);
  font-weight: 400; letter-spacing: -.02em;
  border-left: 3px solid #F4DFCD; padding-left: 24px;
  margin: 0;
}
.review-author {
  display: flex; align-items: center; gap: 14px;
}
.review-author img { border-radius: 50%; border: 2px solid rgba(0,0,0,.08); flex-shrink: 0; }
.review-author strong { display: block; font-size: 14px; font-weight: 700; color: #111111; }
.review-author span  { display: block; font-size: 12.5px; color: rgba(0,0,0,.4); }

/* 3-col grid */
.review-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin-bottom: 36px;
}
.review-card {
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: var(--r-l); padding: 32px;
  display: flex; flex-direction: column; gap: 16px;
  position: relative; overflow: hidden;
  transition: border-color .2s, transform .2s;
  box-shadow: var(--shadow-card);
}
.review-card:hover { border-color: var(--card-border2); transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
.review-card blockquote {
  font-size: 14.5px; color: rgba(0,0,0,.55); line-height: 1.75;
  margin: 0; flex: 1; font-weight: 400;
}
.review-metric {
  font-size: 11px; font-weight: 700; letter-spacing: .3px;
  background: rgba(61,139,110,.08); border: 1px solid rgba(61,139,110,.2);
  color: #3D8B6E; border-radius: var(--r-s); padding: 4px 12px;
  display: inline-flex; width: fit-content;
}
.review-card-author {
  display: flex; align-items: center; gap: 12px;
  padding-top: 4px; border-top: 1px solid rgba(0,0,0,.06);
}
.review-card-author img { border-radius: 50%; border: 1.5px solid rgba(0,0,0,.06); flex-shrink: 0; }
.review-card-author strong { display: block; font-size: 13px; font-weight: 700; color: #111111; }
.review-card-author span  { display: block; font-size: 11.5px; color: rgba(0,0,0,.4); }

.review-rating-row {
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
.review-rating-txt { font-size: 13px; color: rgba(0,0,0,.35); }

/* ── Industry benchmarks ─────────────────────────────────── */
.bench-intro {
  display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: center;
}
.bench-sub {
  font-size: 16.5px; color: rgba(0,0,0,.38); line-height: 1.72;
  margin-bottom: 36px; max-width: 380px; letter-spacing: -.01em;
}
.btn-bench-cta { margin-top: 8px; }
.bench-grid {
  display: grid; grid-template-columns: 1fr; gap: 10px;
}
.bench-item {
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: 16px; padding: 14px 18px;
  display: grid; grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 8px; align-items: center;
  box-shadow: var(--shadow-card);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.bench-item:hover { border-color: var(--card-border2); transform: translateY(-1px); box-shadow: var(--shadow-card-hover); }
.bench-header {
  grid-column: 1; display: flex; align-items: center; gap: 0;
}
.bench-industry { font-size: 13px; font-weight: 600; }
.bench-track    { grid-column: 1; height: 5px; border-radius: 999px; background: rgba(0,0,0,.08); overflow: hidden; }
.bench-fill {
  height: 100%; width: 0; border-radius: 999px;
  background: #111111;
  position: relative; transition: width 1.4s cubic-bezier(.4,0,.2,1);
}
.bench-fill.bench-anim { width: var(--bw); }
.bench-score-label {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 9px; font-weight: 700; color: rgba(0,0,0,.9);
  font-family: 'Poppins', monospace; white-space: nowrap;
}
.bench-grade {
  grid-row: 1 / 3; grid-column: 2;
  width: 28px; height: 28px; border-radius: 7px;
  font-size: 12px; font-weight: 900;
  display: flex; align-items: center; justify-content: center; border: 2px solid;
  margin-left: 16px;
}

/* ── Pricing note ────────────────────────────────────────── */
.pricing-note {
  text-align: center; margin-top: 24px;
  font-size: 13px; color: var(--muted2);
}

/* ── Pricing ──────────────────────────────────────────────── */
.price-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 0; align-items: stretch;
  background: rgba(28,28,28,.05);
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-card);
}
.price-card {
  background: var(--card-bg); border: none;
  border-right: 1px solid var(--card-border);
  padding: 40px 36px; position: relative; overflow: hidden;
  transition: background .2s ease;
}
.price-card:last-child { border-right: none; }
.price-card:hover { background: var(--card-bg-soft); }
.price-featured {
  background: #F7F2EA;
  border-right: 1px solid var(--card-border2) !important;
  border-left: 1px solid var(--card-border2) !important;
  z-index: 1;
}
.price-featured::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--accent);
}
.price-popular {
  position: absolute; top: 0; right: 28px;
  background: #111111;
  color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase;
  padding: 4px 12px 5px; border-radius: 0 0 8px 8px;
}
.price-tier {
  font-size: 11px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: rgba(0,0,0,.35); margin-bottom: 16px;
}
.price-row  { display: flex; align-items: baseline; gap: 4px; margin-bottom: 8px; }
.price-num  { font-size: 48px; font-weight: 900; letter-spacing: -3px; color: #111111; }
.price-mo   { font-size: 15px; color: rgba(0,0,0,.4); margin-bottom: 2px; }
.price-desc { font-size: 13.5px; color: rgba(0,0,0,.45); margin-bottom: 28px; line-height: 1.55; }
.price-list { list-style: none; display: grid; gap: 12px; margin-bottom: 28px; }
.price-list li { font-size: 13.5px; color: rgba(0,0,0,.6); padding-left: 22px; position: relative; }
.price-list li.ok::before { content: '✓'; position: absolute; left: 0; color: #3D8B6E; font-weight: 700; }
.price-list li.no::before { content: '—'; position: absolute; left: 0; color: rgba(0,0,0,.2); }
.price-list li.no { opacity: .5; }

/* ── CTA section ─────────────────────────────────────────── */
.cta-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  color: rgba(0,0,0,.4);
  margin-bottom: 24px;
}
.cta-kicker::before {
  content: ''; display: block; width: 18px; height: 1px;
  background: rgba(0,0,0,.3);
}
.section-cta {
  padding: 140px 0; text-align: center; position: relative; overflow: hidden;
  background: #1F1F1F;
  border-top: none;
}
.cta-glow-1, .cta-glow-2 { display: none; }
.section-cta::before { display: none; }
.cta-body { position: relative; z-index: 1; }
.cta-h2 {
  font-size: clamp(36px, 4.8vw, 66px);
  font-weight: 700; letter-spacing: -1.8px; line-height: 1.06; margin-bottom: 22px;
  color: #FFFFFF;
}
.cta-h2 em {
  font-style: normal;
  color: #F4DFCD;
  background: none; -webkit-background-clip: unset; background-clip: unset; animation: none;
}
.cta-sub {
  font-size: 18px; color: rgba(0,0,0,.5);
  max-width: 540px; margin: 0 auto 48px; line-height: 1.7; letter-spacing: -.01em;
}
.cta-form { display: flex; gap: 10px; max-width: 520px; margin: 0 auto 16px; }
.cta-form input {
  flex: 1; background: rgba(0,0,0,.06); border: 1px solid rgba(255,255,255,.15);
  color: #fff; border-radius: 999px; padding: 15px 20px;
  font-size: 15.5px; font-family: inherit; transition: border-color .18s, background .18s;
}
.cta-form input:focus {
  outline: none; border-color: rgba(0,0,0,.4);
  background: rgba(255,255,255,.12);
}
.cta-form input::placeholder { color: rgba(0,0,0,.3); }
.cta-note { font-size: 12.5px; color: rgba(0,0,0,.3); }
/* CTA buttons get inverted on dark CTA */
.section-cta .btn-primary {
  background: #F5EFE6; color: #1C1C1C;
}
.section-cta .btn-primary:hover { background: #FCF6F1; }
.section-cta .btn-outline {
  border-color: rgba(0,0,0,.2); color: rgba(0,0,0,.65);
}
.section-cta .btn-outline:hover { background: rgba(255,255,255,.05); color: #fff; }

/* ── Results ─────────────────────────────────────────────── */
.results-section { padding: 40px 0 24px; }

/* ── Streaming skeleton state ───────────────────────────────────────────── */

/* Score ring — spinning arc uses SVG animateTransform (no CSS transform, iOS-safe) */
.results-streaming #score-arc { display: none; }
.results-streaming #score-arc-spinner { display: block !important; }
/* Hide actual number + /100 during scan */
.results-streaming .score-num,
.results-streaming .score-sub { opacity: 0; transition: none; }
/* Scanning label in ring center */
.score-scanning-lbl {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px; pointer-events: none;
}
.score-scanning-lbl span:first-child {
  font-size: 11px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: #1C1C1C;
}
.score-scanning-lbl span:last-child {
  font-size: 9.5px; color: rgba(0,0,0,.45); letter-spacing: .05em;
}

/* Grade chip skeleton */
.results-streaming .grade-chip {
  background: rgba(17,17,17,.06) !important;
  color: transparent !important;
  border-color: rgba(17,17,17,.10) !important;
  min-width: 28px;
}

/* Summary text skeleton */
.results-streaming .res-summary {
  color: rgba(0,0,0,.18);
}

/* Make the "scoring" header feel alive (higher contrast + subtle shimmer) */
.results-streaming .res-domain {
  color: rgba(17,17,17,.88);
}
.results-streaming .res-tag {
  color: rgba(0,0,0,.35);
}

/* Skeleton shimmer — shared keyframe */
@keyframes skel-shine {
  0%   { background-position: -340px 0; }
  100% { background-position: 340px 0; }
}
/* Skeleton chip */
.skel-chip {
  height: 30px;
  border-radius: 99px;
  display: inline-block;
  background: linear-gradient(90deg,
    rgba(0,0,0,.05) 0%,
    rgba(0,0,0,.12) 50%,
    rgba(0,0,0,.05) 100%);
  background-size: 340px 100%;
  animation: skel-shine 1.6s linear infinite;
  border: 1px solid rgba(0,0,0,.08);
  vertical-align: middle;
}
/* Skeleton breakdown bar fill */
.skel-bd-fill {
  background: linear-gradient(90deg,
    rgba(0,0,0,.06) 0%,
    rgba(0,0,0,.14) 50%,
    rgba(0,0,0,.06) 100%) !important;
  background-size: 340px 100% !important;
  animation: skel-shine 1.6s linear infinite !important;
  border-radius: 3px;
  transition: none !important;
}

/* Streaming breakdown cards: increase contrast + add micro-motion */
.results-streaming .bd-item {
  background: rgba(17,17,17,.03);
  border-color: rgba(17,17,17,.12);
}
.results-streaming .bd-name {
  color: rgba(0,0,0,.48);
}
.results-streaming .bd-track {
  height: 4px;
  background: rgba(17,17,17,.14);
}
.results-streaming .bd-val {
  color: rgba(0,0,0,.28);
}
.results-streaming .bd-item {
  position: relative;
  overflow: hidden;
}
.results-streaming .bd-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.55) 45%,
    transparent 80%);
  transform: translateX(-110%);
  animation: bd-sweep 1.9s ease-in-out infinite;
  opacity: .45;
  pointer-events: none;
}
@keyframes bd-sweep {
  0%   { transform: translateX(-120%); }
  55%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}
.skel-chip:nth-child(2) { animation-delay: -.4s; }
.skel-chip:nth-child(3) { animation-delay: -.8s; }
.skel-chip:nth-child(4) { animation-delay: -1.2s; }
/* ══════════════════════════════════════════════════════════
   RESULTS CARD — warm minimal, high-end floating card
══════════════════════════════════════════════════════════ */
.results-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.04);
  animation: slide-up .4s cubic-bezier(.4,0,.2,1) both;
  position: relative;
}
.results-card:hover {
  box-shadow: 0 24px 72px rgba(0,0,0,.1), 0 6px 20px rgba(0,0,0,.05);
  border-color: var(--card-border2);
  transform: translateY(-2px);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.results-card::before { display: none; }

/* ── Header strip — warm gradient top ──────────────────── */
.res-header {
  display: flex; align-items: flex-start; gap: 28px;
  padding: 28px 28px 24px;
  flex-wrap: wrap;
  background: linear-gradient(160deg, #FFFFFF 0%, #FBF8F3 100%);
  border-bottom: 1px solid rgba(28,28,28,.06);
  position: relative;
}
/* Subtle warm tint top-right corner */
.res-header::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 220px; height: 120px;
  background: radial-gradient(ellipse at top right, rgba(196,154,138,.12) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Score ring ─────────────────────────────────────────── */
.score-ring-wrap {
  position: relative;
  width: 120px; height: 120px;
  flex-shrink: 0;
  background: var(--s3);
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.8);
  overflow: hidden;
}
.score-ring-svg  { width: 100%; height: 100%; display: block; }
.score-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.score-num {
  font-size: 28px; font-weight: 900; letter-spacing: -1.5px; line-height: 1;
  color: #111111;
}
.score-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }

/* ── Meta block ─────────────────────────────────────────── */
.res-meta { flex: 1; min-width: 200px; }
.res-row1 { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.grade-chip {
  font-size: 12px; font-weight: 900;
  width: 28px; height: 28px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.grade-A { color: #3D8B6E; border-color: rgba(61,139,110,.4); background: rgba(61,139,110,.08); }
.grade-B { color: #555555; border-color: rgba(0,0,0,.2);     background: rgba(0,0,0,.06); }
.grade-C { color: #946d1d; border-color: rgba(184,134,11,.3); background: rgba(184,134,11,.08); }
.grade-D { color: #B8602A; border-color: rgba(184,96,42,.3);  background: rgba(184,96,42,.08); }
.grade-F { color: #C0392B; border-color: rgba(192,57,43,.3);  background: rgba(192,57,43,.08); }
.res-tag {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .8px;
  color: var(--muted2);
  background: rgba(28,28,28,.05);
  border: 1px solid rgba(28,28,28,.08);
  border-radius: 999px; padding: 3px 9px;
}
.res-domain  { font-size: 24px; font-weight: 900; letter-spacing: -.6px; margin-bottom: 8px; color: #111111; }
.res-summary {
  font-size: 13.5px; color: var(--muted); line-height: 1.7; margin-bottom: 18px;
  max-width: 560px;
}

/* ── Score breakdown grid ───────────────────────────────── */
.breakdown-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bd-item {
  background: #FFFFFF;
  border: 1px solid rgba(28,28,28,.08);
  border-radius: var(--r);
  padding: 12px 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  transition: transform .18s ease, box-shadow .18s ease;
}
.bd-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.07);
}
.bd-name  {
  font-size: 11px; font-weight: 600; letter-spacing: .01em;
  color: var(--muted2); margin-bottom: 8px;
}
.bd-track {
  height: 4px; border-radius: 999px;
  background: rgba(28,28,28,.07); overflow: hidden;
}
.bd-fill  {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #1C1C1C, rgba(28,28,28,.7));
  transition: width 1.2s cubic-bezier(.4,0,.2,1);
}
.bd-val   {
  font-size: 13px; font-weight: 800; color: var(--text);
  margin-top: 6px; letter-spacing: -.02em;
}

/* ── Actions (Upgrade button) ───────────────────────────── */
.res-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.download-hint { font-size: 11px; color: var(--muted2); text-align: right; }

/* ── Tabs strip ─────────────────────────────────────────── */
.tabs-row {
  display: flex; gap: 4px; padding: 10px 20px;
  border-bottom: 1px solid rgba(28,28,28,.06);
  background: #FDFAF7;
  overflow-x: auto; scrollbar-width: none;
}
.tabs-row::-webkit-scrollbar { display: none; }
.tab {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 999px; border: 1px solid transparent;
  font-size: 13px; font-weight: 600; color: var(--muted);
  background: none; font-family: inherit;
  transition: all .18s; white-space: nowrap;
}
.tab:hover { color: var(--text); background: rgba(28,28,28,.05); }
.tab.active {
  color: var(--text);
  background: #FFFFFF;
  border-color: rgba(28,28,28,.1);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

/* Premium feed section */
.section-feed { padding-top: 72px; }
.feed-head .sec-h2 { margin-bottom: 18px; }
.feed-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.feed-pill {
  border: 1px solid var(--card-border);
  background: rgba(255,255,255,.65);
  color: var(--muted);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  transition: all .18s ease;
}
.feed-pill:hover { border-color: var(--card-border2); color: var(--text); }
.feed-pill.active {
  background: #1C1C1C;
  color: #fff;
  border-color: #1C1C1C;
}
.feed-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: var(--sp-3);
}
.nb-card-featured {
  background: linear-gradient(160deg, #fff 0%, #FBF8F3 100%);
}
.nb-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.nb-meta {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted2);
}
.nb-title {
  font-size: clamp(22px, 2.3vw, 34px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--text);
  margin-bottom: 10px;
}
.feed-grid .nb-card:not(.nb-card-featured) .nb-title {
  font-size: 22px;
}
.nb-copy {
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
  margin-bottom: var(--sp-3);
}
.nb-before-after {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.nb-mini-panel {
  background: rgba(28,28,28,.04);
  border: 1px solid rgba(28,28,28,.09);
  border-radius: 16px;
  padding: 12px;
}
.nb-mini-panel-good {
  background: rgba(111,175,122,.12);
  border-color: rgba(111,175,122,.2);
}
.nb-mini-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted2);
  margin-bottom: 4px;
}
.nb-mini-panel strong {
  font-size: 13px;
  color: var(--text);
}
.nb-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.nb-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px dashed rgba(28,28,28,.1);
  font-size: 13px;
  color: var(--muted);
}
.nb-stat-row strong {
  color: var(--text);
  font-size: 14px;
}

/* ── Feed second row ─────────────────────────────────────── */
.feed-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

/* ── Mini bar (before/after in featured card) ────────────── */
.nb-mini-bar {
  height: 4px;
  background: rgba(28,28,28,.08);
  border-radius: 999px;
  margin-top: 8px;
  overflow: hidden;
}
.nb-mini-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width .6s cubic-bezier(.4,0,.2,1);
}

/* ── Checklist card ──────────────────────────────────────── */
.nb-checklist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: var(--sp-3);
}
.nb-check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
}
.nb-check-done { color: var(--text); }
.nb-check-ico {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid rgba(28,28,28,.15);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nb-check-ico-done {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ── Progress bar ────────────────────────────────────────── */
.nb-progress-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--sp-3);
}
.nb-progress-track {
  flex: 1;
  height: 5px;
  background: rgba(28,28,28,.08);
  border-radius: 999px;
  overflow: hidden;
}
.nb-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  transition: width .6s cubic-bezier(.4,0,.2,1);
}
.nb-progress-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted2);
  white-space: nowrap;
}

/* ── Image thumbnail strip (diary-style) ─────────────────── */
.nb-img-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.nb-img-tile {
  height: 72px;
  border-radius: 14px;
  background-size: cover;
  background-position: center;
}
.nb-img-tile-a {
  background: linear-gradient(135deg, #D4C4B8 0%, #C8B5A5 100%);
  position: relative;
  overflow: hidden;
}
.nb-img-tile-a::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 70%, rgba(196,154,138,.6), transparent 60%),
              radial-gradient(circle at 80% 20%, rgba(244,223,205,.8), transparent 50%);
}
.nb-img-tile-b {
  background: linear-gradient(135deg, #B8A898 0%, #8C7B6E 100%);
  position: relative;
  overflow: hidden;
}
.nb-img-tile-b::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 30%, rgba(140,123,110,.5), transparent 60%),
              radial-gradient(circle at 20% 80%, rgba(196,180,165,.7), transparent 50%);
}

/* ── Score ring (small, in card) ─────────────────────────── */
.nb-score-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-3) 0;
}
.nb-score-ring-wrap {
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}
.nb-score-ring-svg { width: 72px; height: 72px; }
.nb-score-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nb-score-num {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.03em;
}
.nb-sparkline {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nb-sparkline svg {
  width: 100%;
  height: 44px;
}
.nb-spark-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--muted2);
  font-weight: 500;
}

/* ── Crawler list ────────────────────────────────────────── */
.nb-crawler-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: var(--sp-3) 0;
}
.nb-crawler-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  background: rgba(28,28,28,.03);
  border: 1px solid rgba(28,28,28,.07);
}
.nb-crawler-warn {
  background: rgba(184,134,11,.06);
  border-color: rgba(184,134,11,.15);
}
.nb-crawler-ok {
  background: rgba(111,175,122,.06);
  border-color: rgba(111,175,122,.15);
}
.nb-crawler-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #B8860B;
  flex-shrink: 0;
}
.nb-crawler-dot-ok { background: var(--accent); }
.nb-crawler-name { flex: 1; color: var(--text); }
.nb-crawler-status { font-size: 11px; color: var(--muted2); }

/* ── Tag cloud ───────────────────────────────────────────── */
.nb-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: var(--sp-3) 0;
}
.nb-tag {
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(28,28,28,.05);
  border: 1px solid rgba(28,28,28,.09);
  color: var(--muted);
}
.nb-tag-miss {
  color: #946d1d;
  background: rgba(184,134,11,.1);
  border-color: rgba(184,134,11,.2);
}

/* ── Phone mockup card ───────────────────────────────────── */
.nb-card-app-mockup {
  display: flex;
  flex-direction: column;
}
.nb-phone-mockup {
  flex: 1;
  background: #1C1C1C;
  border-radius: 18px;
  overflow: hidden;
  margin-top: var(--sp-3);
  display: flex;
  flex-direction: column;
}
.nb-phone-screen {
  flex: 1;
  padding: 14px 14px 10px;
}
.nb-phone-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,.6);
}
.nb-phone-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.nb-phone-dot-warn { background: #B8860B; }
.nb-phone-dot-ok   { background: var(--accent); }
.nb-phone-val {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.4);
}
.nb-phone-bar {
  height: 3px;
  background: rgba(255,255,255,.08);
  border-radius: 999px;
  margin: 5px 0 0;
  overflow: hidden;
}
.nb-phone-fill {
  height: 100%;
  border-radius: 999px;
  background: rgba(184,134,11,.7);
  transition: width .6s cubic-bezier(.4,0,.2,1);
}
/* Bottom nav bar */
.nb-phone-nav {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 10px 8px 12px;
  background: #111111;
  border-top: 1px solid rgba(255,255,255,.06);
}
.nb-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: rgba(255,255,255,.28);
  font-size: 9px;
  font-weight: 600;
  cursor: pointer;
  transition: color .15s;
}
.nb-nav-item svg { opacity: .5; }
.nb-nav-active {
  color: #fff;
}
.nb-nav-active svg { opacity: 1; }

/* Featured card flex layout */
.nb-card-featured {
  background: linear-gradient(160deg, #fff 0%, #FBF8F3 100%);
  display: flex;
  flex-direction: column;
}
.nb-card-todo,
.nb-card-score,
.nb-card-crawler,
.nb-card-entity {
  display: flex;
  flex-direction: column;
}

/* ── Responsive: feed rows ───────────────────────────────── */
@media (max-width: 900px) {
  .feed-row2 { grid-template-columns: 1fr 1fr; }
  .nb-card-app-mockup { display: none; }
}
@media (max-width: 600px) {
  .feed-row2 { grid-template-columns: 1fr; }
}

.tab-body { padding: 24px; background: #FDFAF7; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── Issues tab: panel headers ───────────────────────────── */
.panel-section-hdr { margin-bottom: 16px; }
.panel-ttl {
  font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 10px; border-bottom: 1px solid rgba(28,28,28,.06); margin-bottom: 10px;
}
.panel-ttl-sub { font-size: 13px; color: var(--muted); line-height: 1.65; }
.red-ttl   { color: var(--red); }
.green-ttl { color: #3D8B6E; }

/* ── Playbook grid ─────────────────────────────────────── */
.playbook-grid {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-bottom: 8px;
}

/* ── Category group — Editorial Bento headers ────────────── */
.issue-cat-group {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 52px;
}

/* Per-category tint variables — inherited by cards below */
.issue-cat-group[data-category="AI Infrastructure"]   { --cat-tint: rgba(167,139,250,.07); --cat-border: rgba(167,139,250,.2); --cat-glow: rgba(167,139,250,.18); --cat-rule: rgba(167,139,250,.4); --cat-color: #a78bfa; }
.issue-cat-group[data-category="Crawler Access"]      { --cat-tint: rgba(56,189,248,.07);  --cat-border: rgba(56,189,248,.2);  --cat-glow: rgba(56,189,248,.18);  --cat-rule: rgba(56,189,248,.4);  --cat-color: #38bdf8; }
.issue-cat-group[data-category="Content & Structure"] { --cat-tint: rgba(52,211,153,.07);  --cat-border: rgba(52,211,153,.2);  --cat-glow: rgba(52,211,153,.18);  --cat-rule: rgba(52,211,153,.4);  --cat-color: #34d399; }
.issue-cat-group[data-category="Entity Authority"]    { --cat-tint: rgba(251,191,36,.07);  --cat-border: rgba(251,191,36,.2);  --cat-glow: rgba(251,191,36,.18);  --cat-rule: rgba(251,191,36,.4);  --cat-color: #fbbf24; }
.issue-cat-group[data-category="Other"]               { --cat-tint: rgba(148,163,184,.07); --cat-border: rgba(148,163,184,.2); --cat-glow: rgba(148,163,184,.12); --cat-rule: rgba(148,163,184,.35); --cat-color: #94a3b8; }

.cat-header {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  margin-bottom: 6px;
}
.cat-num {
  font-size: 11px; font-weight: 800; letter-spacing: .06em;
  font-family: 'SF Mono', ui-monospace, monospace;
  color: var(--muted2);
  flex-shrink: 0;
  min-width: 22px;
  padding-bottom: 3px;
  text-align: right;
}
.cat-name {
  font-size: 24px; font-weight: 900;
  letter-spacing: -0.6px; line-height: 1;
  color: var(--text); flex: 1;
  padding-bottom: 2px;
}
.cat-meta {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 4px; flex-shrink: 0;
}
.cat-issues {
  font-size: 11px; font-weight: 700;
  color: var(--text); opacity: .35;
  letter-spacing: -.01em;
}
.cat-count {
  font-size: 10px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 11px; border-radius: 5px;
  border-left: 3px solid;
}
.cat-count-high      { color: #B91C1C; background: rgba(185,28,28,.07);  border-color: #B91C1C; }
.cat-count-med       { color: #92400E; background: rgba(146,64,14,.07);  border-color: #92400E; }
.cat-count-low       { color: #166534; background: rgba(22,101,52,.07);  border-color: #166534; }
.cat-count-building  { color: var(--muted2); background: rgba(28,28,28,.04); border-color: var(--muted2); opacity: .5; }

.cat-rule {
  height: 1.5px;
  background: linear-gradient(90deg, var(--cat-rule, rgba(28,28,28,.15)) 0%, rgba(28,28,28,.03) 100%);
  border-radius: 2px;
  margin-bottom: 20px;
}

.cat-toggle {
  display: none; /* hidden — collapse toggle removed for clean bento look */
}

/* ═══════════════════════════════════════════════════════════════
   CARDS GRID — clean architecture
   .cat-rows is the CSS Grid container.
   .pb-card-glass is the DIRECT grid child — no wrapper div.
   data-layout="featured" / "solo" on the card itself controls span.
   No display:contents, no specificity wars.
═══════════════════════════════════════════════════════════════ */
.cat-rows {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

/* ── Featured: single card in category → full-width horizontal ── */
.pb-card-glass[data-layout="featured"] {
  grid-column: 1 / -1;
  flex-direction: row;
  border-radius: 20px;
}
.pb-card-glass[data-layout="featured"] .pb-glass-zone {
  width: 340px;
  min-width: 260px;
  height: auto !important;
  flex-shrink: 0;
  border-radius: 20px 0 0 20px !important;
  border-right: 1px solid rgba(255,255,255,.5);
}
.pb-card-glass[data-layout="featured"] .pb-glass-body {
  padding: 28px 32px 28px 28px !important;
  gap: 10px !important;
  justify-content: center;
  flex: 1;
}
.pb-card-glass[data-layout="featured"] .pb-title {
  font-size: 18px !important;
  letter-spacing: -.04em !important;
}
.pb-card-glass[data-layout="featured"] .pb-desc {
  font-size: 13.5px !important;
}

/* ── Solo orphan: last card alone on a row → full-width vertical ─ */
.pb-card-glass[data-layout="solo"] {
  grid-column: 1 / -1;
  flex-direction: column;
}
.pb-card-glass[data-layout="solo"] .pb-glass-zone {
  height: 210px !important;
}

/* ── Skeleton cards — shown while first card in category streams ─ */
.skel-card {
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 1px 3px rgba(0,0,0,.03), 0 4px 16px rgba(0,0,0,.04),
              inset 0 1px 0 rgba(255,255,255,.9);
  display: flex; flex-direction: column;
}
.skel-card-zone {
  height: 148px;
  background: linear-gradient(90deg,
    rgba(0,0,0,.04) 0%, rgba(0,0,0,.09) 50%, rgba(0,0,0,.04) 100%);
  background-size: 600px 100%;
  animation: skel-shine 1.6s linear infinite;
  flex-shrink: 0;
}
.skel-card-body {
  padding: 16px 18px 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.skel-line {
  border-radius: 6px;
  background: linear-gradient(90deg,
    rgba(0,0,0,.045) 0%, rgba(0,0,0,.1) 50%, rgba(0,0,0,.045) 100%);
  background-size: 600px 100%;
  animation: skel-shine 1.6s linear infinite;
}
.skel-line-imp { height: 22px; width: 64px; border-radius: 5px; }
.skel-line-h   { height: 16px; width: 80%; }
.skel-line-p1  { height: 11px; width: 100%; animation-delay: -.25s; }
.skel-line-p2  { height: 11px; width: 70%;  animation-delay: -.5s; }
.skel-line-p3  { height: 11px; width: 85%;  animation-delay: -.75s; }

/* Skeleton category header */
.skel-cat-group { margin-bottom: 52px; }
.skel-cat-hdr   { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 6px; }
.skel-cat-num   { height: 12px; width: 22px; border-radius: 4px; background: rgba(0,0,0,.07); flex-shrink: 0; }
.skel-cat-name  {
  height: 28px; width: 180px; border-radius: 6px;
  background: linear-gradient(90deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.12) 50%, rgba(0,0,0,.06) 100%);
  background-size: 400px 100%;
  animation: skel-shine 1.8s linear infinite;
}
.skel-cat-rule  { height: 1.5px; margin-bottom: 20px; background: rgba(0,0,0,.06); border-radius: 2px; }

/* Skeleton: featured (full-width hero shape while waiting for first card) */
.skel-card[data-layout="featured"] {
  grid-column: 1 / -1;
  flex-direction: row;
  border-radius: 20px;
}
.skel-card[data-layout="featured"] .skel-card-zone {
  width: 340px; min-width: 260px; height: auto;
  flex-shrink: 0;
}
.skel-card[data-layout="featured"] .skel-card-body {
  padding: 28px 32px;
  flex: 1;
}
@media (max-width: 640px) {
  .skel-card[data-layout="featured"] { flex-direction: column; }
  .skel-card[data-layout="featured"] .skel-card-zone { width: 100%; height: 160px; }
}

/* ── Mobile ≤ 640px ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .cat-rows { grid-template-columns: 1fr; }

  .pb-card-glass[data-layout="featured"] {
    flex-direction: column;
    border-radius: 18px;
    grid-column: 1 / -1;
  }
  .pb-card-glass[data-layout="featured"] .pb-glass-zone {
    width: 100% !important;
    min-width: 0 !important;
    height: 160px !important;
    border-radius: 18px 18px 0 0 !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,.4);
  }
  .pb-card-glass[data-layout="featured"] .pb-glass-body {
    padding: 18px !important;
  }
  .pb-card-glass[data-layout="featured"] .pb-title {
    font-size: 15px !important;
  }
  .pb-card-glass[data-layout="solo"] .pb-glass-zone {
    height: 148px !important;
  }
}

/* ── Playbook issue cards — warm minimal, same DNA as feed cards ── */
.pb-card {
  border-radius: var(--r-l);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  background: #FFFFFF;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  border: 1px solid rgba(28,28,28,.08);
  box-shadow: 0 6px 24px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.04);
}
.pb-card-high   {
  border-color: rgba(192,57,43,.18);
}
.pb-card-medium {
  border-color: rgba(184,134,11,.16);
}
.pb-card-low    {
  border-color: rgba(28,28,28,.07);
}
.pb-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 48px rgba(0,0,0,.1), 0 4px 12px rgba(0,0,0,.06);
  border-color: rgba(28,28,28,.14);
}




/* ── Priority impact indicator ── pill badge style ────── */
.pb-impact {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 6px;
  width: fit-content;
}
.pb-imp-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.pb-imp-high   {
  color: #C0392B;
  background: rgba(192,57,43,.08);
  border: 1px solid rgba(192,57,43,.18);
}
.pb-imp-medium {
  color: #946d1d;
  background: rgba(184,134,11,.08);
  border: 1px solid rgba(184,134,11,.18);
}
.pb-imp-low    {
  color: #3D8B6E;
  background: rgba(61,139,110,.08);
  border: 1px solid rgba(61,139,110,.18);
}

/* ── Title ───────────────────────────────────────────────── */
.pb-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.025em;
  color: #111111;
  line-height: 1.3;
  margin: 0;
}

/* ── Description ─────────────────────────────────────────── */
.pb-desc {
  font-size: 13px;
  line-height: 1.72;
  color: rgba(0,0,0,.5);
  margin: 0;
}

/* Domain highlight inside description */
mark.d-hl {
  background: rgba(0,0,0,.07);
  color: #111111;
  padding: 0 3px;
  border-radius: 3px;
  font-weight: 600;
  font-style: normal;
}

/* ── Quick wins chips ──────────────────────────────────── */
.wins-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.win-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid rgba(28,28,28,.1);
  font-size: 12.5px; color: var(--text);
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  transition: transform .15s ease, box-shadow .15s ease;
}
.win-chip:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.09); }
.win-chip-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.win-chip-high   { background: #C0392B; box-shadow: 0 0 0 2px rgba(192,57,43,.2); }
.win-chip-medium { background: #B8860B; box-shadow: 0 0 0 2px rgba(184,134,11,.2); }
.win-chip-low    { background: #3D8B6E; box-shadow: 0 0 0 2px rgba(61,139,110,.2); }
.win-chip-action { font-weight: 600; }
.win-chip-effort {
  font-size: 10px; color: var(--muted2);
  background: rgba(28,28,28,.05); padding: 2px 7px; border-radius: 5px;
  font-weight: 600;
}

.signals-wrap  { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(28,28,28,.06); }
.signals-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.sig-chip {
  font-size: 12px; font-weight: 600;
  padding: 5px 13px; border-radius: 999px;
  background: rgba(61,139,110,.08); border: 1px solid rgba(61,139,110,.18); color: #3D8B6E;
  transition: background .15s;
}
.sig-chip:hover { background: rgba(61,139,110,.14); }

/* Responsive: playbook cards + category groups */
@media (max-width: 680px) {
  .playbook-grid { gap: 20px; }
  .cat-rows { grid-template-columns: 1fr; }
}

/* ── Recommendations ─────────────────────────────────────── */
.rec-list { list-style: none; display: grid; gap: 10px; }
.rec-item {
  background: #FFFFFF;
  border: 1px solid rgba(28,28,28,.08);
  border-radius: var(--r-l);
  padding: 18px 20px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 16px;
  align-items: start;
  box-shadow: 0 4px 16px rgba(0,0,0,.05);
  transition: transform .18s ease, box-shadow .18s ease;
}
.rec-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.rec-num {
  font-size: 13px; font-weight: 900;
  color: rgba(28,28,28,.2);
  font-variant-numeric: tabular-nums;
  padding-top: 2px; width: 24px; text-align: center;
}
.rec-cat   { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted2); margin-bottom: 4px; }
.rec-title { font-size: 15px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 6px; color: #111111; }
.rec-desc  { font-size: 13px; color: var(--muted); line-height: 1.65; margin-bottom: 10px; }
.rec-impl  {
  font-size: 12px; font-family: 'Inter', monospace; color: #555555;
  background: #FBF8F3; border: 1px solid rgba(28,28,28,.08);
  border-radius: var(--r-s); padding: 8px 12px; line-height: 1.55;
}

/* ── Missing files ───────────────────────────────────────── */
.missing-list { list-style: none; display: grid; gap: 10px; }
.missing-item {
  display: flex; align-items: flex-start; gap: 16px;
  background: #FFFFFF;
  border: 1px solid rgba(192,57,43,.14);
  border-left: 3px solid rgba(192,57,43,.4);
  border-radius: var(--r-l); padding: 14px 16px;
  box-shadow: 0 4px 14px rgba(0,0,0,.05);
  transition: transform .18s ease;
}
.missing-item:hover { transform: translateY(-1px); }
.missing-file {
  font-family: 'Inter', monospace; font-size: 12.5px; font-weight: 700;
  color: #C0392B; white-space: nowrap; min-width: 130px; padding-top: 2px;
}
.missing-why { font-size: 13px; color: var(--muted); line-height: 1.6; }

/* ── Deploy panel ────────────────────────────────────────── */
.deploy-panel {
  margin: 0; padding: 24px 26px; position: relative; overflow: hidden;
  border-top: 1px solid rgba(28,28,28,.06);
  background: linear-gradient(160deg, #FBF8F3 0%, #F5EFE6 100%);
}
.deploy-panel-glow { display: none; }

/* Shared text styles */
.deploy-panel-title {
  font-size: 15px; font-weight: 800; letter-spacing: -.02em;
  margin-bottom: 4px; color: #111111;
}
.deploy-panel-sub { font-size: 13px; color: var(--muted); line-height: 1.6; }

/* ── Waiting state ── */
.deploy-waiting { display: flex; flex-direction: column; gap: 16px; }
.deploy-waiting-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  background: #FFFFFF; border: 1px solid rgba(28,28,28,.1);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: #888; box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.deploy-waiting-text { flex: 1; min-width: 180px; }
.deploy-file-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.deploy-pill {
  display: inline-flex; align-items: center;
  background: #FFFFFF; border: 1px solid rgba(28,28,28,.09);
  border-radius: var(--r); padding: 7px 14px;
  font-size: 12px; color: var(--muted);
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
}

/* ── Generating state ── */
.deploy-generating {
  display: flex; align-items: center; gap: 14px; min-height: 56px;
}
.deploy-spinner {
  width: 20px; height: 20px; flex-shrink: 0;
  border: 2.5px solid rgba(28,28,28,.15);
  border-top-color: #111111;
  border-radius: 50%;
  animation: deploy-spin .8s linear infinite;
}
@keyframes deploy-spin { to { transform: rotate(360deg); } }
.deploy-gen-label { font-size: 14px; font-weight: 600; color: #333; }

/* ── Ready state ── */
.deploy-ready {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.deploy-ready-left { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.deploy-ready-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  background: #111111; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #ffffff; box-shadow: 0 4px 14px rgba(0,0,0,.22);
}
.deploy-ready-text { flex: 1; min-width: 0; }
.deploy-ready-text .deploy-panel-sub {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Download button */
.btn-download {
  display: inline-flex; align-items: center; gap: 8px;
  background: #111111; color: #ffffff;
  border: none; border-radius: 999px;
  padding: 12px 22px; font-size: 13px; font-weight: 700;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
  transition: transform .16s, box-shadow .16s, background .16s, opacity .16s;
}
.btn-download:hover:not(:disabled) {
  background: #333333; transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
}
.btn-download:disabled {
  opacity: .55; cursor: not-allowed; transform: none;
}
.btn-download svg { flex-shrink: 0; }

/* ── Error state ── */
.deploy-error {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 4px 0;
}
.deploy-error-msg { font-size: 13px; color: #c0392b; flex: 1; }
.btn-download-retry {
  display: inline-flex; align-items: center;
  background: transparent; color: #111111;
  border: 1.5px solid rgba(28,28,28,.25); border-radius: 999px;
  padding: 8px 18px; font-size: 12px; font-weight: 700;
  cursor: pointer; transition: border-color .16s, background .16s;
}
.btn-download-retry:hover { background: rgba(28,28,28,.05); border-color: rgba(28,28,28,.4); }

/* ── Footer ──────────────────────────────────────────────── */
.site-footer {
  padding: 60px 0 40px;
  border-top: 1px solid var(--card-border);
  background: var(--s1);
}
.footer-inner {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: start; gap: 48px;
}
.footer-brand { display: flex; flex-direction: column; gap: 10px; }
.footer-brand-sub { font-size: 13px; color: rgba(0,0,0,.4); line-height: 1.6; max-width: 220px; }
.footer-copy {
  margin-top: 28px; font-size: 12px; color: rgba(0,0,0,.3);
  padding-top: 24px; border-top: 1px solid rgba(0,0,0,.07);
  grid-column: 1 / -1;
}
.footer-col-label {
  font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: rgba(0,0,0,.3); margin-bottom: 16px;
}
.footer-col-links { display: flex; flex-direction: column; gap: 12px; }
.footer-col-links a {
  font-size: 13.5px; color: rgba(0,0,0,.45); transition: color .15s;
}
.footer-col-links a:hover { color: rgba(0,0,0,.8); }
.footer-logo  {
  font-weight: 800; font-size: 14px;
  color: #111111;
  background: none; -webkit-background-clip: unset; background-clip: unset; animation: none;
}
.site-footer p { font-size: 12px; color: rgba(0,0,0,.3); }
.site-footer a { color: rgba(0,0,0,.5); text-decoration: none; transition: color .15s; }
.site-footer a:hover { color: rgba(0,0,0,.85); }
@media (max-width: 700px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-copy  { grid-column: 1 / -1; }
}

/* ── Fade-in ─────────────────────────────────────────────── */
.fade-in { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1040px) {
  .feat-grid { grid-template-columns: repeat(2,1fr); }
  .hero-split { gap: 36px; }
  .bench-intro { grid-template-columns: 1fr; gap: 48px; }
  .feed-grid { grid-template-columns: 1fr 1fr; }
  .nb-card-featured { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; }
  .hero-left { text-align: center; align-items: center; }
  .how-steps { grid-template-columns: 1fr; border-radius: var(--r-l); }
  .how-card { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.05); }
  .how-card:last-child { border-bottom: none; }
  .review-grid { grid-template-columns: 1fr; }
  .price-grid { grid-template-columns: 1fr; border-radius: var(--r-l); }
  .price-card { border-right: none !important; border-left: none !important; border-bottom: 1px solid rgba(0,0,0,.07) !important; }
  .price-card:last-child { border-bottom: none !important; }
  .review-hero { flex-direction: column; gap: 28px; padding: 36px 28px; }
  .review-scores { gap: 12px; }
  .bench-intro { grid-template-columns: 1fr; gap: 40px; }
  .stats-row { flex-direction: column; gap: 36px; } .stat-rule { width: 60px; height: 1px; }
  .breakdown-grid { grid-template-columns: 1fr 1fr; }
  .res-header { flex-direction: column; }
  .res-actions { align-items: flex-start; flex-direction: row; }
  .feed-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .hero { padding: 44px 0 32px; }
  .hero h1 { letter-spacing: -1px; font-size: clamp(30px, 9vw, 44px); }
  .url-field { flex-wrap: wrap; padding: 6px; gap: 4px; }
  .url-proto { padding: 7px 8px 7px 10px; font-size: 12px; }
  .url-divider { display: none; }
  .url-field input { padding: 7px 4px; min-width: 0; flex: 1; }
  .feat-grid { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .cta-form  { flex-direction: column; }
  .sec-h2    { letter-spacing: -.8px; }
  .section   { padding: 80px 0; }
  .logos-row { gap: 4px 0; }
  .logo-name { font-size: 13px; padding: 0 12px; }
  .hero-proof { justify-content: center; }
  .rscore-n { font-size: 40px; }
  .review-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PLAYBOOK CARD DESIGN SYSTEM — 4 modular styles
   To remove a style, search for "PB-STYLE: <name>" and delete that block.
   ══════════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════════════
   PB-STYLE: glass
   Apple Vision Pro / macOS glass aesthetic.
   Zone: full-width blurred screenshot as backdrop. Centered icon. Two text pills.
   Body: priority dot, large headline, muted description.
   ════════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
   CARD: Editorial Bento + Soft Glass Hybrid
   Frosted white surface · category tint via inherited CSS vars
   Warm screenshot zone · frosted badge + icon box overlay
   Premium body typography · pastel hover glow per category
══════════════════════════════════════════════════════════════ */
.pb-card-glass {
  border-radius: 18px;
  overflow: hidden;
  /* Frosted glass surface */
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow:
    0 1px 3px rgba(0,0,0,.04),
    0 6px 24px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.95);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
/* Category tint layer — painted via ::after so it doesn't block children */
.pb-card-glass::after {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: var(--cat-tint, rgba(167,139,250,.05));
  pointer-events: none; border-radius: inherit;
}
.pb-card-glass > * { position: relative; z-index: 1; }

.pb-card-glass:hover {
  transform: translateY(-5px);
  border-color: var(--cat-border, rgba(167,139,250,.3));
  box-shadow:
    0 0 0 1px var(--cat-border, rgba(167,139,250,.18)),
    0 20px 56px rgba(0,0,0,.1),
    0 4px 12px rgba(0,0,0,.05),
    0 0 40px var(--cat-glow, rgba(167,139,250,.1)),
    inset 0 1px 0 rgba(255,255,255,.95);
}

/* ── Screenshot zone ── */
.pb-glass-zone {
  position: relative;
  height: 148px;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(240,236,232,.7);
  border-radius: 18px 18px 0 0;
}
.pb-glass-ss {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top left;
  filter: grayscale(.2) brightness(.94) saturate(.75);
  opacity: 0; transition: opacity 1s ease;
  z-index: 1;
}
.pb-glass-ss.pb-ss-rdy { opacity: 1; }
/* No blur clone needed for light design — hide it */
.pb-glass-ss-blur { display: none; }

.pb-glass-ph {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(135deg,
    var(--cat-tint, rgba(167,139,250,.08)) 0%,
    rgba(245,239,230,.5) 100%);
}
.pb-glass-overlay {
  position: absolute; inset: 0; z-index: 3;
  background: linear-gradient(180deg, transparent 35%, rgba(255,255,255,.92) 100%);
}

/* ── Icon+badge overlay row ── */
.pb-glass-icon-wrap {
  position: absolute; bottom: 11px; left: 0; right: 0;
  z-index: 6;
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 0 13px;
}
/* Badge — dark frosted terminal pill */
.pb-glass-badge {
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  font-family: 'SF Mono', ui-monospace, monospace;
  padding: 4px 10px; border-radius: 7px;
  background: rgba(20,20,24,.78) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: rgba(255,255,255,.9) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
/* Icon — frosted white box with accent color */
.pb-glass-icon {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 2px 10px rgba(0,0,0,.1), inset 0 1px 0 #fff;
  /* color is set inline from accent */
  filter: none !important;
}
.pb-glass-icon svg { width: 15px; height: 15px; }

/* ── Before/After pills — repurposed as WHERE + FIX TIME footer ── */
.pb-glass-pills { display: none; }

/* ── Card body ── */
.pb-glass-body {
  padding: 16px 18px 18px;
  display: flex; flex-direction: column; gap: 7px;
  background: none;
  border-top: 1px solid rgba(28,28,28,.055);
}
.pb-card-glass .pb-title {
  color: var(--text);
  font-size: 14.5px; font-weight: 800; letter-spacing: -.025em; line-height: 1.28;
}
.pb-card-glass .pb-desc {
  color: var(--muted);
  font-size: 12.5px; line-height: 1.65;
}
/* Impact chip — inline tinted block */
.pb-card-glass .pb-impact {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; align-self: flex-start;
  padding: 3px 9px; border-radius: 6px;
  margin-bottom: 1px;
}
.pb-card-glass .pb-card-high   .pb-impact,
.pb-card-glass.pb-card-high    .pb-impact { color: #B91C1C; background: rgba(185,28,28,.08); border: 1px solid rgba(185,28,28,.14); }
.pb-card-glass .pb-card-medium .pb-impact,
.pb-card-glass.pb-card-medium  .pb-impact { color: #92400E; background: rgba(146,64,14,.08);  border: 1px solid rgba(146,64,14,.14); }
.pb-card-glass .pb-card-low    .pb-impact,
.pb-card-glass.pb-card-low     .pb-impact { color: #166534; background: rgba(22,101,52,.08);  border: 1px solid rgba(22,101,52,.14); }
.pb-imp-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .8; }

/* ════════════════════════════════════════════════════════════════════════════
   PB-STYLE: diff
   VS Code / Linear code-diff aesthetic.
   Zone: dark terminal window with macOS chrome + git diff lines.
   Body: headline + description.
   ════════════════════════════════════════════════════════════════════════════ */
.pb-card-diff {
  border-radius: 18px;
  overflow: hidden;
  background: #07080f;
  display: flex;
  flex-direction: column;
}
.pb-diff-zone {
  border-bottom: 1px solid rgba(0,0,0,.07);
  flex-shrink: 0;
  overflow: hidden;
}
.pb-diff-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.pb-diff-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  flex-shrink: 0;
}
.pb-diff-dot:nth-child(1) { background: rgba(255, 95, 87, .45); }
.pb-diff-dot:nth-child(2) { background: rgba(255,189, 46, .35); }
.pb-diff-dot:nth-child(3) { background: rgba( 39,201, 63, .35); }
.pb-diff-path {
  flex: 1;
  font-family: 'Poppins', 'SF Mono', 'Fira Code', monospace;
  font-size: 10px;
  color: rgba(0,0,0,.32);
  letter-spacing: .01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pb-diff-imp {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.pb-diff-lines {
  padding: 6px 0 10px;
  background: #070810;
}
.pb-diff-line {
  display: flex;
  align-items: flex-start;
  gap: 0;
  font-family: 'Poppins', 'SF Mono', 'Fira Code', monospace;
  font-size: 10.5px;
  line-height: 1.6;
  padding: 0 14px;
  min-height: 22px;
}
.pb-diff-num {
  width: 22px;
  flex-shrink: 0;
  color: rgba(0,0,0,.14);
  user-select: none;
  font-size: 9.5px;
  padding-top: 1px;
}
.pb-diff-sign {
  width: 14px;
  flex-shrink: 0;
  text-align: center;
  font-weight: 700;
  font-size: 11px;
}
.pb-diff-del {
  background: rgba(244, 63, 94, .04);
  color: rgba(252,165,165,.5);
}
.pb-diff-del .pb-diff-sign { color: rgba(252,165,165,.6); }
.pb-diff-add {
  background: rgba(52,211,153,.04);
  color: rgba(167,255,195,.7);
}
.pb-diff-add .pb-diff-sign { color: rgba(110,231,183,.8); }
.pb-diff-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: linear-gradient(160deg, #0b0c18 0%, #07080f 100%);
}

/* Diff cards are also dark-themed */
.pb-card-diff .pb-title {
  color: rgba(243,244,246,.96);
}
.pb-card-diff .pb-desc {
  color: rgba(203,213,225,.88);
}



/* Keep highlight subtle on dark cards */
.pb-card-glass mark.d-hl { background: rgba(99,102,241,.18); border-color: rgba(99,102,241,.22); }

/* ── Responsive: new styles ──────────────────────────────────────────────── */
@media (max-width: 680px) {
  .pb-glass-pills { flex-direction: column; }
  .pb-glass-pill-b, .pb-glass-pill-a { -webkit-line-clamp: 1; }
  .pb-diff-line { font-size: 9.5px; }
}

/* ── Protected-site friendly error card ─────────────────────────────────── */
.protected-error-card {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: linear-gradient(145deg, #0f0c1e 0%, #0a0814 100%);
  border: 1px solid rgba(251,191,36,.18);
  border-radius: 20px;
  padding: 28px 28px 28px 24px;
  max-width: 680px;
  margin: 60px auto;
}
.pec-icon {
  flex-shrink: 0;
  width: 52px; height: 52px;
  border-radius: 14px;
  background: rgba(251,191,36,.1);
  border: 1px solid rgba(251,191,36,.2);
  display: flex; align-items: center; justify-content: center;
  color: #fbbf24;
}
.pec-content { flex: 1; min-width: 0; }
.pec-title {
  font-size: 17px;
  font-weight: 700;
  color: rgba(235,233,255,.95);
  margin: 0 0 8px;
  letter-spacing: -.015em;
}
.pec-body {
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(175,170,210,.65);
  margin: 0 0 16px;
}
.pec-tips {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 18px;
}
.pec-tips-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(0,0,0,.4);
  margin: 0 0 8px;
}
.pec-tips ul {
  margin: 0; padding-left: 16px;
  display: flex; flex-direction: column; gap: 5px;
}
.pec-tips li {
  font-size: 12.5px;
  color: rgba(175,170,210,.6);
  line-height: 1.5;
}
.pec-tips code {
  font-family: 'Poppins', monospace;
  font-size: 11.5px;
  background: rgba(255,255,255,.07);
  padding: 1px 5px;
  border-radius: 4px;
  color: rgba(196,181,253,.8);
}
.pec-retry {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(235,233,255,.8);
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
}
.pec-retry:hover { background: rgba(255,255,255,.12); color: #fff; }

/* ── Guest limit wall ────────────────────────────────────────────────────── */
#protected-error-overlay { position: relative; }

.guest-limit-wall {
  position: relative;
  overflow: hidden;
  max-width: 520px;
  margin: 40px auto;
  padding: 44px 40px 36px;
  border-radius: 24px;
  background: #FFFFFF;
  border: 1px solid rgba(28,28,28,0.10);
  box-shadow: var(--shadow-card-hover);
  text-align: center;
}

/* Animated spark particles — subtle warm dots */
.glw-sparks { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: 24px; }
.glw-spark {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  animation: glw-float 5s ease-in-out infinite;
}
.glw-spark.s1 { left: 15%; top: 20%; animation-delay: 0s;    width: 3px; height: 3px; background: var(--h-mint); }
.glw-spark.s2 { left: 75%; top: 15%; animation-delay: 0.8s;  background: var(--h-violet); width: 5px; height: 5px; }
.glw-spark.s3 { left: 40%; top: 80%; animation-delay: 1.4s;  background: var(--accent); }
.glw-spark.s4 { left: 85%; top: 55%; animation-delay: 2.0s;  width: 3px; height: 3px; background: var(--h-gold); }
.glw-spark.s5 { left: 10%; top: 65%; animation-delay: 2.6s;  background: var(--h-rose); width: 3px; height: 3px; }
.glw-spark.s6 { left: 60%; top: 10%; animation-delay: 3.2s;  background: var(--h-cyan); width: 6px; height: 6px; }
@keyframes glw-float {
  0%   { opacity: 0; transform: translateY(0) scale(1); }
  20%  { opacity: .5; }
  80%  { opacity: .25; }
  100% { opacity: 0; transform: translateY(-40px) scale(0.4); }
}

/* Pulsing icon */
.glw-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px; height: 68px;
  border-radius: 50%;
  background: rgba(111,175,122,0.10);
  border: 1px solid rgba(111,175,122,0.25);
  color: var(--accent);
  margin-bottom: 20px;
  animation: glw-pulse 2.8s ease-in-out infinite;
}
@keyframes glw-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(111,175,122,0.25); }
  50%       { box-shadow: 0 0 0 10px rgba(111,175,122,0); }
}

/* Three usage check badges */
.glw-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
}
.glw-badge {
  width: 36px; height: 36px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  background: rgba(111,175,122,0.10);
  border: 1px solid rgba(111,175,122,0.25);
  color: var(--accent);
  animation: glw-badge-pop .5s cubic-bezier(.34,1.56,.64,1) both;
}
.glw-badge.s2 { animation-delay: .1s; }
.glw-badge.s3 { animation-delay: .2s; }
@keyframes glw-badge-pop {
  from { opacity: 0; transform: scale(.5) rotate(-10deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}

.glw-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.025em;
  margin: 0 0 10px;
  line-height: 1.25;
}
.glw-sub {
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0 0 28px;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}
.glw-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.glw-btn-primary {
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  background: #1C1C1C;
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 15px 24px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: -.01em;
  transition: background .15s, transform .1s;
}
.glw-btn-primary:hover { background: #333; }
.glw-btn-primary:active { transform: scale(0.99); }
.glw-btn-secondary {
  display: flex; align-items: center; justify-content: center;
  background: var(--s1);
  border: 1px solid var(--card-border2);
  border-radius: 12px;
  padding: 13px 24px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
  transition: background .15s;
}
.glw-btn-secondary:hover { background: var(--s3); }
.glw-reset {
  font-size: 11.5px;
  color: var(--muted2);
  margin: 0;
  letter-spacing: .02em;
}

/* ── Preview upgrade CTA — shown after 5 issues on landing page ───────── */
.preview-upgrade-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 28px 0 12px;
  padding: 20px 24px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(167,139,250,.08) 0%, rgba(99,102,241,.06) 100%);
  border: 1px solid rgba(167,139,250,.22);
  box-shadow: 0 2px 16px rgba(99,102,241,.06);
}
.puc-lock-icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(167,139,250,.14);
  border: 1px solid rgba(167,139,250,.2);
  color: #7c3aed;
  display: flex; align-items: center; justify-content: center;
}
.puc-text { flex: 1; min-width: 0; }
.puc-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 3px;
  letter-spacing: -.01em;
}
.puc-sub {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}
.puc-btn {
  flex-shrink: 0;
  background: #1C1C1C;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, transform .1s;
}
.puc-btn:hover { background: #333; }
.puc-btn:active { transform: scale(0.98); }

@media (max-width: 560px) {
  .preview-upgrade-cta { flex-direction: column; text-align: center; gap: 12px; }
  .puc-lock-icon { margin: 0 auto; }
  .puc-btn { width: 100%; justify-content: center; }
}

/* ── Portrait avatar photos ─────────────────────────────────────────────── */
.ava-photo {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 1.5px solid rgba(255,255,255,.15);
  filter: brightness(0.9) contrast(1.05);
  flex-shrink: 0;
  margin-left: -8px;
}
.ava-photo:first-child { margin-left: 0; }

.rev-photo {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 1.5px solid rgba(255,255,255,.12);
  filter: brightness(0.88) contrast(1.08) saturate(0.85);
  flex-shrink: 0;
}

/* ── Glass card: icon + badge — overridden by Bento+Glass block ── */

/* ── Neurobird brand logo ─────────────────────────────────────────────────── */
.nb-logo-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: none;
  flex-shrink: 0;
  display: block;
}
.nb-wordmark {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #111111;
}
.nb-footer-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
}
.nb-footer-logo-img {
  width: 16px;
  height: 16px;
  opacity: .7;
  filter: invert(1) brightness(2);
}
.nb-footer-brand .nb-wordmark {
  font-size: 13px;
  opacity: .85;
  color: #111111;
}

/* -----------------------------------------------------------------------
   Cohesion Layer — warm minimal, Poppins, diary aesthetic
   ----------------------------------------------------------------------- */

/* 1) Typography */
body {
  font-family: 'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #1C1C1C;
}

.sec-h2, .hero h1, .nb-title, .res-domain {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1C1C1C;
}

.hero-lead, .res-summary, .nb-copy, .feat-card p, .review-card blockquote {
  color: #6F6F6F;
}

/* Keep hero highlight gradient animation */
.hero-highlight {
  /* Don't override — let the gradient/animation defined earlier stay */
}

/* 2) One card language — DO NOT flatten the shadows set per-component */
.analyzer-card,
.feat-card,
.review-card,
.review-hero,
.bench-item,
.price-grid,
.how-steps,
.nb-card {
  border-radius: 24px;
  border: 1px solid rgba(28,28,28,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.05);
}
/* results-card shadow intentionally NOT listed here — set in its own block */

.analyzer-card:hover,
.feat-card:hover,
.review-card:hover,
.bench-item:hover,
.nb-card:hover {
  border-color: rgba(28,28,28,.13);
  box-shadow: 0 14px 34px rgba(0,0,0,.08);
}

/* 3) Warm alt surfaces */
.section-alt, .logos-strip, .stats-band, .site-footer {
  background: #FBF8F3;
  border-color: rgba(28,28,28,.08);
}

/* card-topbar stays warm */
.card-topbar {
  background: rgba(252,246,241,.92);
  border-color: rgba(28,28,28,.07);
}

/* bd-item: white with border — NOT overridden to FBF8F3 */
/* lock-file: white — NOT overridden */
/* rec-impl: warm — NOT overridden */
/* tabs-row: NOT overridden here */

/* 4) Buttons and pills */
.btn-primary, .btn-primary-full, .btn-pro-cta, .btn-unlock, .btn-nav,
.feed-pill.active, .nb-btn-primary {
  background: #1C1C1C;
  color: #fff;
  border-color: #1C1C1C;
}

.btn-outline, .feed-pill {
  border-color: rgba(28,28,28,.12);
  color: #6F6F6F;
  background: rgba(255,255,255,.72);
}

.tab {
  border-color: transparent;
  color: #6F6F6F;
  background: none;
}
.tab.active {
  background: #FFFFFF;
  color: #1C1C1C;
  border-color: rgba(28,28,28,.1);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

/* 5) Playbook card variants — handled by Editorial Bento+Glass block above */

/* 6) CTA section */
.section-cta {
  background: linear-gradient(180deg, #2B2B2B 0%, #222 100%);
}
.section-cta .cta-sub, .section-cta .cta-note {
  color: rgba(255,255,255,.78);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN OVERHAUL 2026 — Three-area upgrade
   1) Hero: massive bold typography + reveal animations
   2) Analyzer card: dark premium interior with better contrast
   3) Playbook cards: warm editorial quality matching workspace feed
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1) HERO — massive, bold, animated ────────────────────────────────────── */

/* Override font for h1 */
.hero h1 {
  font-family: 'Poppins', 'Inter', -apple-system, sans-serif;
  font-size: clamp(58px, 7.2vw, 96px);
  font-weight: 900;
  letter-spacing: -4px;
  line-height: 1.0;
  margin-bottom: 36px;
  color: #111111;
}

/* Staggered reveal animation for hero lines */
@keyframes hero-reveal {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-line-1 {
  display: block;
  animation: hero-reveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero h1 > span.hero-line-1:nth-child(1) { animation-delay: 0.05s; }
.hero h1 > span.hero-line-1:nth-child(2) { animation-delay: 0.15s; }
.hero-highlight {
  /* consolidated below — see holo-ai block */
}

/* Hero lead text — animate in */
.hero-lead {
  font-size: 18px;
  font-weight: 400;
  color: rgba(0,0,0,.48);
  max-width: 480px;
  line-height: 1.72;
  animation: hero-reveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.38s both;
}

/* Hero proof & trust — animate in */
.hero-proof {
  animation: hero-reveal 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.52s both;
}
.hero-trust {
  animation: hero-reveal 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both;
}

/* ── 2) ANALYZER CARD — dark premium, higher contrast ─────────────────────── */

/* Card shell: keep warm exterior, upgrade interior */
.analyzer-card {
  box-shadow: 0 20px 60px rgba(0,0,0,.12), 0 4px 16px rgba(0,0,0,.06);
  border-color: rgba(28,28,28,.1);
}

/* Top chrome bar: warm + slightly elevated */
.card-topbar {
  background: #FAF5EF;
  border-bottom: 1px solid rgba(28,28,28,.09);
  padding: 12px 18px;
}
.topbar-label {
  font-size: 10.5px;
  letter-spacing: .07em;
  color: rgba(0,0,0,.4);
  font-weight: 700;
}
.topbar-engines {
  font-size: 10.5px;
  color: rgba(0,0,0,.28);
}

/* Card body: dark premium surface */
.card-body {
  background: #141414;
  padding: 24px 26px 28px;
}

/* URL input field: high contrast on dark card body */
.url-field {
  background: #141414;
  border: none;
  border-radius: 999px;
  padding: 5px 5px 5px 0;
}
/* On dark card body the wrapper glow is stronger */
.card-body .url-field-wrap {
  box-shadow: 0 0 22px rgba(196,154,138,.28), 0 0 44px rgba(124,111,160,.18);
}
.card-body .url-field-wrap:focus-within {
  box-shadow: 0 0 30px rgba(196,154,138,.5), 0 0 60px rgba(124,111,160,.32), 0 0 12px rgba(107,159,175,.24);
}
.url-proto-https {
  color: rgba(255,255,255,.9);
  font-weight: 700;
}
.url-proto-https svg { color: #6FAF7A; }
.url-proto-http { color: #fbbf24; }
.url-divider { background: rgba(255,255,255,.12); }
.url-field input {
  color: #fff;
  font-size: 15px;
}
.url-field input::placeholder { color: rgba(255,255,255,.28); }

/* Analyze button: bright on dark */
#analyze-btn.btn-primary {
  background: #fff;
  color: #111111;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(255,255,255,.15);
}
#analyze-btn.btn-primary:hover {
  background: #F5EFE6;
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(255,255,255,.2);
}

/* Hint text on dark */
.card-hint {
  color: rgba(255,255,255,.3);
  font-size: 11.5px;
  text-align: center;
  margin-top: 14px;
  margin-bottom: 0;
}

/* Loading state on dark: redesigned */
.loading-state {
  margin-top: 18px;
  padding: 18px 18px 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
}

/* Progress bar on dark */
.prog-track {
  background: rgba(255,255,255,.1);
  height: 4px;
}
.prog-fill {
  background: linear-gradient(90deg, #6FAF7A 0%, #C49A8A 55%, #7C6FA0 100%);
  background-size: 280% auto;
  animation: prog-shimmer 2.5s linear infinite;
}
.prog-fill::after {
  background: rgba(255,255,255,.35);
  filter: blur(6px);
}
.prog-pct {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  color: rgba(255,255,255,.7);
  animation: none;
}
.prog-eta { color: rgba(255,255,255,.5); }
.prog-elapsed { color: rgba(255,255,255,.3); }

/* Stage row on dark */
.prog-pulse { background: #6FAF7A; box-shadow: 0 0 8px #6FAF7A; }
.prog-stage { color: rgba(255,255,255,.65); font-size: 12px; }

/* Step rows on dark */
.step { color: rgba(255,255,255,.75); font-size: 13px; }
.step-dim { color: rgba(255,255,255,.28); }
.step-done { color: #6FAF7A; }
.step-meta { color: rgba(255,255,255,.3); }

/* LLM live on dark */
.llm-live {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.07);
  color: rgba(255,255,255,.35);
}
.llm-live-tokens { color: rgba(255,255,255,.85); }

/* Error state on dark */
.error-state {
  background: rgba(192,57,43,.08);
  border-color: rgba(192,57,43,.2);
  color: #f87171;
}

/* ── 3) PLAYBOOK CARDS — Editorial Bento + Soft Glass Hybrid ─────────────── */

/* Core card: frosted white glass, category tint inherited via CSS vars */
.pb-card-glass {
  background: rgba(255,255,255,.72) !important;
  backdrop-filter: blur(20px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.6) !important;
  border: 1px solid rgba(255,255,255,.85) !important;
  border-radius: 18px !important;
  box-shadow:
    0 1px 3px rgba(0,0,0,.04),
    0 6px 24px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}
.pb-card-glass:hover {
  transform: translateY(-5px) !important;
  border-color: var(--cat-border, rgba(167,139,250,.3)) !important;
  box-shadow:
    0 0 0 1px var(--cat-border, rgba(167,139,250,.18)),
    0 20px 56px rgba(0,0,0,.1),
    0 4px 12px rgba(0,0,0,.05),
    0 0 40px var(--cat-glow, rgba(167,139,250,.1)),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}
/* Category tint overlay */
.pb-card-glass::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important; z-index: 0 !important;
  background: var(--cat-tint, rgba(167,139,250,.05)) !important;
  pointer-events: none !important;
  border-radius: inherit !important;
}
.pb-card-glass > * { position: relative !important; z-index: 1 !important; }

/* Screenshot zone: warm, light */
.pb-glass-zone {
  background: rgba(240,236,232,.7) !important;
  border-bottom: none !important;
  height: 148px !important;
  border-radius: 18px 18px 0 0 !important;
}
.pb-glass-ss {
  filter: grayscale(.2) brightness(.94) saturate(.75) !important;
  transform: none !important;
}
.pb-glass-ss-blur { display: none !important; }
.pb-glass-ph {
  background: linear-gradient(135deg,
    var(--cat-tint, rgba(167,139,250,.08)) 0%,
    rgba(245,239,230,.5) 100%) !important;
}
.pb-glass-overlay {
  background: linear-gradient(180deg, transparent 35%, rgba(255,255,255,.92) 100%) !important;
}

/* Non-featured cards: extra blur + stronger overlay for contrast vs. hero */
.pb-card-glass:not([data-layout="featured"]) .pb-glass-ss {
  filter: grayscale(.35) brightness(.88) saturate(.55) blur(2px) !important;
}
.pb-card-glass:not([data-layout="featured"]) .pb-glass-overlay {
  background: linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.96) 100%) !important;
}

/* Icon+badge row: bottom of zone, horizontal */
.pb-glass-icon-wrap {
  position: absolute !important;
  top: auto !important; left: 0 !important; right: 0 !important;
  bottom: 11px !important;
  transform: none !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0 13px !important;
  gap: 0 !important;
}
/* Badge: dark frosted terminal pill */
.pb-glass-badge {
  font-family: 'SF Mono', ui-monospace, monospace !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  padding: 4px 10px !important;
  border-radius: 7px !important;
  background: rgba(20,20,24,.78) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  color: rgba(255,255,255,.9) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.2) !important;
}
/* Icon: frosted white box */
.pb-glass-icon {
  position: static !important;
  transform: none !important;
  width: 32px !important; height: 32px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: rgba(255,255,255,.85) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,.9) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.1), inset 0 1px 0 #fff !important;
  filter: none !important;
}
.pb-glass-icon svg { width: 15px !important; height: 15px !important; }

/* Pills: hidden (replaced by impact chip in body) */
.pb-glass-pills { display: none !important; }

/* Body: clean light */
.pb-glass-body {
  background: none !important;
  border-top: 1px solid rgba(28,28,28,.055) !important;
  padding: 16px 18px 18px !important;
  gap: 7px !important;
}
.pb-card-glass .pb-title {
  color: #1C1C1C !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  letter-spacing: -.025em !important;
  line-height: 1.28 !important;
}
.pb-card-glass .pb-desc {
  color: rgba(0,0,0,.5) !important;
  font-size: 12.5px !important;
  line-height: 1.65 !important;
}
/* Impact chip */
.pb-impact {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  padding: 3px 9px !important;
  border-radius: 6px !important;
  width: fit-content !important;
}
.pb-imp-high   { color: #B91C1C !important; background: rgba(185,28,28,.08) !important; border: 1px solid rgba(185,28,28,.15) !important; }
.pb-imp-medium { color: #92400E !important; background: rgba(146,64,14,.08) !important;  border: 1px solid rgba(146,64,14,.15) !important; }
.pb-imp-low    { color: #166534 !important; background: rgba(22,101,52,.08) !important;  border: 1px solid rgba(22,101,52,.15) !important; }

/* Domain highlight */
.pb-card-glass mark.d-hl {
  background: rgba(28,28,28,.07) !important;
  border: 1px solid rgba(28,28,28,.1) !important;
  color: #111111 !important;
}


/* ── Analyzer card: right column hero animation ───────────────────────────── */
.hero-right {
  animation: hero-reveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

/* ── Results card: score ring uses warm colors ───────────────────────────── */
.score-ring-wrap {
  background: #F0E8DE;
  box-shadow: 0 8px 24px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.9);
}

/* ── Protected error card on light bg ────────────────────────────────────── */
.protected-error-card {
  background: #FFFFFF !important;
  border-color: rgba(192,57,43,.14) !important;
}
.pec-title { color: #111111 !important; }
.pec-body { color: rgba(0,0,0,.5) !important; }
.pec-tips { background: rgba(0,0,0,.02) !important; border-color: rgba(0,0,0,.06) !important; }
.pec-tips li { color: rgba(0,0,0,.5) !important; }
.pec-retry { background: #1C1C1C !important; color: #fff !important; border-color: transparent !important; }

/* ── Nb wordmark: slightly larger ────────────────────────────────────────── */
.nb-wordmark {
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: -.03em;
}

/* ── Section headings: Poppins for bold editorial impact ─────────────────── */
.sec-h2,
.cta-h2,
.res-domain {
  font-family: 'Poppins', 'Inter', -apple-system, sans-serif;
  font-weight: 800;
}

/* ── Playbook card zone: proper height and overflow ──────────────────────── */
.pb-card-glass .pb-glass-zone {
  height: 170px !important;
}

/* ── Breakdown grid cards: better contrast ───────────────────────────────── */
.bd-item {
  background: #FFFFFF;
  border: 1px solid rgba(28,28,28,.09);
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: 0 4px 14px rgba(0,0,0,.05);
}
.bd-name {
  font-size: 11px;
  font-weight: 700;
  color: rgba(0,0,0,.38);
  letter-spacing: .01em;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.bd-fill {
  background: linear-gradient(90deg, #1C1C1C, #555555);
}
.bd-val {
  font-size: 14px;
  font-weight: 800;
  color: #111111;
  margin-top: 8px;
}

/* ── Quick wins chips: cleaner look ──────────────────────────────────────── */
.win-chip {
  background: #FFFFFF;
  border: 1.5px solid rgba(28,28,28,.1);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

/* ── Tabs: cleaner pill style ─────────────────────────────────────────────── */
.tabs-row {
  background: #F5EFE6;
  border-bottom: 1px solid rgba(28,28,28,.07);
  padding: 12px 22px;
}
.tab {
  font-size: 13px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 999px;
}
.tab.active {
  background: #FFFFFF;
  color: #111111;
  border-color: rgba(28,28,28,.1);
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
}

/* ── Tab body: warm surface ──────────────────────────────────────────────── */
.tab-body {
  background: #FAF6F1;
  padding: 28px;
}

/* ── Playbook grid: slightly bigger gap ──────────────────────────────────── */
.playbook-grid {
  gap: 12px;
}

/* ── Panel title (ISSUES PLAYBOOK): warm red, more impactful ─────────────── */
.panel-ttl {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(28,28,28,.07);
  margin-bottom: 12px;
}
.panel-ttl-sub {
  font-size: 14px;
  color: rgba(0,0,0,.45);
  line-height: 1.7;
}
.red-ttl { color: #C0392B; }
.green-ttl { color: #3D8B6E; }

/* ── Missing items: cleaner ──────────────────────────────────────────────── */
.missing-item {
  border-radius: 16px;
  border: 1px solid rgba(192,57,43,.12);
  border-left: 3px solid rgba(192,57,43,.35);
  background: #FFFFFF;
}

/* ── Recommendation items ────────────────────────────────────────────────── */
.rec-item {
  border-radius: 18px;
  border: 1px solid rgba(28,28,28,.08);
  background: #FFFFFF;
}
.rec-title { font-size: 15px; font-weight: 700; }
.rec-impl {
  background: #FAF6F1;
  border-color: rgba(28,28,28,.07);
  border-radius: 10px;
}

/* ── Hero: bigger baseline padding on desktop ────────────────────────────── */
@media (min-width: 1024px) {
  .hero { padding: 80px 0 72px; }
  .hero-split { gap: 72px; }
}
@media (max-width: 700px) {
  .hero h1 {
    font-size: clamp(42px, 11vw, 64px);
    letter-spacing: -2.5px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PATCH v96 — Nav, Streaming state, Rec/Missing cards, hero gradient fix
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── NAV: corporate, bold, trusted ─────────────────────────────────────────── */
.nav {
  background: rgba(250,246,241,.96);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-bottom: 1px solid rgba(28,28,28,.1);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 2px 12px rgba(0,0,0,.05);
}
.nav.scrolled {
  background: rgba(250,246,241,.99);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 4px 24px rgba(0,0,0,.1);
}
.nav-inner {
  padding: 14px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 9px;
}
/* Logo icon: circular warm badge */
.nav-logo-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: #111111;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.nav-logo-icon .nb-logo-img {
  width: 18px;
  height: 18px;
  filter: invert(1) brightness(2);
}
.nb-wordmark {
  font-family: 'Poppins', 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.04em;
  color: #111111;
}
/* Small "GEO / AIO" tag next to brand */
.nav-badge-geo {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(0,0,0,.35);
  background: rgba(28,28,28,.06);
  border: 1px solid rgba(28,28,28,.1);
  border-radius: 999px;
  padding: 3px 8px;
  white-space: nowrap;
  align-self: center;
  margin-top: 1px;
}
.nav-links {
  display: flex;
  gap: 32px;
  margin-left: auto;
  margin-right: 24px;
}
.nav-links a {
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(0,0,0,.45);
  letter-spacing: -.01em;
  transition: color .15s;
}
.nav-links a:hover { color: rgba(0,0,0,.85); }
/* "Free audit" CTA in nav */
.btn-nav {
  background: #111111;
  color: #fff;
  border-radius: 999px;
  padding: 10px 22px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.01em;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  transition: background .18s, transform .18s, box-shadow .18s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.btn-nav:hover {
  background: #2d2d2d;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}

/* ── RESULTS SECTION: tighter top spacing, flush after hero ──────────────── */
.results-section {
  padding: 32px 0 40px;
}

/* ── SCORING STATE ─────────────────────────────────────────────────────────── */

/* Score ring: clean light background, no dark disc */
.results-streaming .score-ring-wrap {
  background: #F0E8DE;
  box-shadow: 0 4px 20px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.9);
  overflow: hidden;
}

/* "SCORING / in progress" label: dark text on light bg */
.score-scanning-lbl span:first-child {
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .10em;
  color: #1C1C1C;
}
.score-scanning-lbl span:last-child {
  font-size: 9px;
  color: rgba(0,0,0,.4);
  letter-spacing: .06em;
}

/* Rotating scan arc handled by SVG animateTransform — no CSS needed */

/* Breakdown cards during stream: warm light skeleton, NOT dark */
.results-streaming .bd-item {
  background: #FFFFFF;
  border-color: rgba(28,28,28,.1);
}
.results-streaming .bd-name {
  color: rgba(0,0,0,.5);
}
.results-streaming .bd-track {
  background: rgba(28,28,28,.08);
}
.results-streaming .bd-val {
  color: rgba(0,0,0,.22);
}

/* res-header during streaming: darker domain text */
.results-streaming .res-domain {
  font-family: 'Poppins', sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: #111111;
}
.results-streaming .res-summary {
  color: rgba(0,0,0,.35);
  font-style: italic;
}

/* Grade chip skeleton: dark block */
.results-streaming .grade-chip {
  background: rgba(17,17,17,.08) !important;
  color: transparent !important;
  border-color: rgba(17,17,17,.12) !important;
}

/* Breakdown bd-item shimmer: warm sweep on white */
.results-streaming .bd-item::after {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.75) 45%,
    transparent 80%);
  opacity: 1;
  animation: bd-sweep 1.9s ease-in-out infinite;
}

/* Breakdown track fill: animated scanning pulse (warm green crawl) */
@keyframes bd-scan-pulse {
  0%   { width: 8%;  opacity: .55; }
  40%  { width: 65%; opacity: 1;   }
  60%  { width: 65%; opacity: 1;   }
  100% { width: 8%;  opacity: .55; }
}
.results-streaming .bd-fill.skel-bd-fill {
  background: linear-gradient(90deg, rgba(111,175,122,.6) 0%, rgba(111,175,122,.3) 100%) !important;
  background-size: unset !important;
  animation: bd-scan-pulse 2.4s ease-in-out infinite !important;
  border-radius: 999px !important;
  transition: none !important;
}
/* Stagger each card's pulse so they don't all move in sync */
.results-streaming .bd-item:nth-child(1) .skel-bd-fill { animation-delay: 0s !important; }
.results-streaming .bd-item:nth-child(2) .skel-bd-fill { animation-delay: .55s !important; }
.results-streaming .bd-item:nth-child(3) .skel-bd-fill { animation-delay: 1.1s !important; }
.results-streaming .bd-item:nth-child(4) .skel-bd-fill { animation-delay: 1.65s !important; }

/* Card-level breathing glow to reinforce "live" state */
@keyframes bd-card-breathe {
  0%,100% { box-shadow: 0 4px 14px rgba(0,0,0,.05); }
  50%      { box-shadow: 0 6px 24px rgba(111,175,122,.14), 0 2px 8px rgba(0,0,0,.04); }
}
.results-streaming .bd-item {
  animation: bd-card-breathe 2.4s ease-in-out infinite;
}
.results-streaming .bd-item:nth-child(2) { animation-delay: .55s; }
.results-streaming .bd-item:nth-child(3) { animation-delay: 1.1s; }
.results-streaming .bd-item:nth-child(4) { animation-delay: 1.65s; }

/* res-header: add bottom accent line while streaming */
.results-streaming .res-header {
  border-bottom: 2px solid rgba(111,175,122,.25);
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO GRADIENT — two-color only: near-black + deep crimson/rose
   ═══════════════════════════════════════════════════════════════════════════ */
.hero-highlight {
  /* consolidated below — see holo-ai block */
}

/* ═══════════════════════════════════════════════════════════════════════════
   RECOMMENDATIONS TAB — nb-card aesthetic
   JS renders: .rec-num + .rec-body (>.rec-cat/title/desc/impl)
   Design: full-width editorial card; .rec-num becomes small numbered chip
           in the top meta row alongside .rec-cat badge chip.
   ═══════════════════════════════════════════════════════════════════════════ */
.rec-list {
  list-style: none;
  display: grid;
  gap: 14px;
}

/* Card shell — matches nb-card */
.rec-item {
  display: block !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(28,28,28,.08) !important;
  border-radius: 22px !important;
  overflow: visible !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.05) !important;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
  padding: 0 !important;
  gap: 0 !important;
}
.rec-item:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.09) !important;
  border-color: rgba(28,28,28,.13) !important;
}

/* Priority number chip — floated into meta row via absolute/flex trick.
   We hide it here and re-expose via .rec-body::before pseudo-element approach
   isn't possible, so instead we reposition .rec-num as a small pill chip
   that sits visually in the card header area using flex column on the card. */
.rec-item > .rec-num {
  display: none !important; /* hidden — number shown inside .rec-body top row */
}

/* Body fills the whole card */
.rec-item > .rec-body {
  flex: unset !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 22px 24px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

/* Top meta row: category badge + priority index */
.rec-item > .rec-body .rec-cat {
  display: inline-flex !important;
  align-items: center !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .09em !important;
  color: #537f5a !important;
  background: rgba(111,175,122,.13) !important;
  border: 1px solid rgba(111,175,122,.22) !important;
  border-radius: 999px !important;
  padding: 4px 11px !important;
  margin-bottom: 6px !important;
  width: fit-content !important;
}

/* Title — large Poppins à la nb-title */
.rec-item > .rec-body .rec-title {
  font-family: 'Poppins', sans-serif !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  letter-spacing: -.03em !important;
  color: #111111 !important;
  line-height: 1.25 !important;
  margin: 0 !important;
}

/* Description — muted body text */
.rec-item > .rec-body .rec-desc {
  font-size: 13.5px !important;
  color: rgba(0,0,0,.46) !important;
  line-height: 1.7 !important;
  margin: 2px 0 0 !important;
}

/* Implementation hint — warm beige inset panel (like nb-card "After" block) */
.rec-item > .rec-body .rec-impl {
  font-size: 12.5px !important;
  font-family: 'Inter', ui-sans-serif, sans-serif !important;
  color: rgba(0,0,0,.54) !important;
  background: #F6F1EA !important;
  border: 1px solid rgba(28,28,28,.07) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  line-height: 1.65 !important;
  margin-top: 10px !important;
  display: block !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MISSING FILES TAB — nb-card aesthetic
   JS renders: .missing-file + .missing-why as direct children of .missing-item
   Design: full-width card; .missing-file as a red warning badge chip at top,
           .missing-why as the card body description text below.
   ═══════════════════════════════════════════════════════════════════════════ */
.missing-list {
  list-style: none;
  display: grid;
  gap: 14px;
}

.missing-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(28,28,28,.08) !important;
  border-radius: 22px !important;
  overflow: visible !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.05) !important;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
  padding: 22px 24px 24px !important;
  gap: 10px !important;
}
.missing-item:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.09) !important;
  border-color: rgba(192,57,43,.14) !important;
}

/* Filename: red badge chip at top — like a "Missing" nb-badge-warn */
.missing-item > .missing-file {
  font-family: 'Poppins', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  color: #B03025 !important;
  background: rgba(176,48,37,.09) !important;
  border: 1px solid rgba(176,48,37,.2) !important;
  border-radius: 999px !important;
  padding: 5px 14px !important;
  display: inline-block !important;
  width: auto !important;
  min-width: unset !important;
  flex-shrink: 0 !important;
  line-height: 1.4 !important;
  word-break: break-all !important;
}

/* Description — full-width below the chip */
.missing-item > .missing-why {
  flex: unset !important;
  font-family: 'Inter', ui-sans-serif, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: rgba(0,0,0,.48) !important;
  line-height: 1.7 !important;
  padding: 0 !important;
  display: block !important;
  border-left: none !important;
  width: 100% !important;
}

/* ── RESULTS card spacing ────────────────────────────────────────────────── */
.results-section:not(.hidden) {
  padding-bottom: 64px;
}

/* ── Signals chips ───────────────────────────────────────────────────────── */
.signals-wrap {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(28,28,28,.07);
}
.sig-chip {
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(61,139,110,.08);
  border: 1px solid rgba(61,139,110,.2);
  color: #3D8B6E;
}

/* ── Quick wins ──────────────────────────────────────────────────────────── */
.win-chip {
  font-size: 13px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1.5px solid rgba(28,28,28,.1);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  display: flex;
  align-items: center;
  gap: 8px;
}
.win-chip-action { color: #111111; }

/* ── Nav mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .nav-badge-geo { display: none; }
  .nav-links { display: none; }
  .nav-inner { gap: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CORPORATE TRUST LAYER — global polish pass
   ═══════════════════════════════════════════════════════════════════════════ */

/* Body: warm beige */
body { background: #F5EFE6; }

/* Tighter, sharper section headings */
.sec-h2 {
  font-family: 'Poppins', 'Inter', sans-serif;
  font-weight: 800;
  letter-spacing: -2px;
  color: #0F0F0F;
}

/* Kicker line: more authority */
.sec-kicker {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.8px;
  color: rgba(0,0,0,.38);
}
.sec-kicker::before {
  width: 22px;
  background: rgba(0,0,0,.35);
}

/* How-it-works step numbers: bolder */
.how-num {
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: rgba(0,0,0,.28);
}
.how-card h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  font-weight: 700;
}

/* Stats band: Poppins numbers */
.stat-n {
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
  letter-spacing: -4px;
}

/* Hero lead: slightly darker for readability */
.hero-lead {
  color: rgba(0,0,0,.52);
  font-size: 17px;
  max-width: 460px;
}

/* Proof stars: richer gold */
.proof-stars { color: #A07820; }

/* Trust badges: more visible */
.hero-trust {
  font-size: 12.5px;
  color: rgba(0,0,0,.38);
}
.hero-trust .dot { color: rgba(0,0,0,.2); }

/* Feat cards: heading font */
.feat-card h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 700;
}

/* Review quotes: more editorial */
.review-quote {
  font-size: 18px;
  border-left-color: rgba(139,26,43,.25);
}

/* Price numbers: Poppins */
.price-num {
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
}

/* CTA heading: Poppins */
.cta-h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  letter-spacing: -2.5px;
}

/* Footer: slightly darker brand text */
.nb-wordmark { color: #0F0F0F; }

/* Analyzer card: subtle warm border on dark container */
.analyzer-card {
  box-shadow: 0 24px 72px rgba(0,0,0,.14), 0 4px 16px rgba(0,0,0,.07);
}

/* Score ring colors: warm accent (rotation handled by SVG transform attribute) */
#score-arc { stroke: var(--accent); }

/* Grade chip: cleaner box */
.grade-chip {
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  font-size: 13px;
}

/* res-domain: Poppins */
.res-domain {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -.04em;
}

/* Deploy panel title: Poppins */
.deploy-panel-title {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 700;
}

/* bench grade: Poppins */
.bench-grade {
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
}

/* Benchmark industry label */
.bench-industry { font-weight: 700; font-size: 13.5px; }

/* Review metric chip: more trust */
.review-metric {
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 14px;
}

/* Panel title: bolder */
.panel-ttl {
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
}
.panel-ttl-sub {
  font-size: 13.5px;
  color: rgba(0,0,0,.42);
}

/* Deploy pills: cleaner */
.deploy-pill {
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 600;
}

/* Score sub */
.score-sub {
  font-size: 12px;
  color: rgba(0,0,0,.35);
  font-weight: 600;
}

/* ── Remove old conflicting rec-item grid rules ───────────────────────────── */
.rec-item > .rec-cat,
.rec-item > .rec-title,
.rec-item > .rec-desc,
.rec-item > .rec-impl { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   HERO POLISH — restore v97 layout, holographic "AI search." animation
   ═══════════════════════════════════════════════════════════════════════════ */

/* Restore hero to v97 layout */
.hero {
  background: var(--bg) !important;
  min-height: calc(100vh - 53px) !important;
  padding: 60px 0 !important;
}

/* Grain/vignette elements hidden — keep hero clean */
.hero-grain { display: none !important; }
.hero-vignette { display: none !important; }

/* Dot grid: restore subtle version */
.grid-overlay {
  display: block !important;
  background-image: radial-gradient(circle, rgba(0,0,0,.06) 1px, transparent 1px) !important;
  background-size: 40px 40px !important;
  mask-image: radial-gradient(ellipse 80% 65% at 50% 0%, black 0%, transparent 90%) !important;
  -webkit-mask-image: radial-gradient(ellipse 80% 65% at 50% 0%, black 0%, transparent 90%) !important;
}

/* Hero split: v97 balanced */
.hero-split {
  grid-template-columns: 1fr 1fr !important;
  gap: 60px !important;
  align-items: center !important;
}

/* Hero h1: v97 size */
.hero h1 {
  font-size: clamp(50px, 5.4vw, 70px) !important;
  letter-spacing: -3.5px !important;
  line-height: 1.05 !important;
  margin-bottom: 32px !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 900 !important;
}

.hero-line-1 {
  color: #111111 !important;
}

/* ── "AI search." — holographic animated gradient ────────────────────────
   Deep black → warm crimson → gold → warm crimson → black
   Slow sweep creates a premium foil/holo effect. Two colors max: black + crimson.
   ──────────────────────────────────────────────────────────────────────── */
/* Full holographic sweep — position pans continuously across a wide gradient */
@keyframes holo-ai {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.hero-highlight {
  display: block;
  /* Full-spectrum holographic: rose → violet → cyan → mint → gold, seamless loop */
  background: linear-gradient(
    110deg,
    #C49A8A,
    #7C6FA0,
    #6B9FAF,
    #7AAF94,
    #B8A86A,
    #C49A8A,
    #7C6FA0,
    #6B9FAF,
    #7AAF94,
    #B8A86A,
    #C49A8A
  );
  background-size: 400% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  animation:
    hero-reveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.28s both,
    holo-ai 10s linear 1s infinite;
}

/* Restore hero-lead, proof, trust to v97 */
.hero-lead {
  font-size: 17px !important;
  color: rgba(0,0,0,.52) !important;
  max-width: 460px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
}
.hero-proof {
  margin: 28px 0 20px !important;
}
.proof-stars { color: #A07820 !important; }
.hero-trust {
  font-size: 12.5px !important;
  color: rgba(0,0,0,.38) !important;
}
.hero-trust .dot { color: rgba(0,0,0,.2) !important; }

/* Restore analyzer card — no float, v97 shadow */
.hero-right { position: relative !important; }
.hero-right .analyzer-card {
  animation: none !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.12), 0 4px 16px rgba(0,0,0,.06) !important;
}
.hero-right::before { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   DARK ENTERPRISE FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */

.site-footer-dark {
  background: #0F0F0F !important;
  border-top: none !important;
  padding: 72px 0 0 !important;
  position: relative;
  overflow: hidden;
}

/* Subtle grain on dark footer too */
.site-footer-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='0.06'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 300px 300px;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}

.site-footer-dark .container {
  position: relative;
  z-index: 1;
}

/* Dark footer inner grid */
.site-footer-dark .footer-inner {
  display: grid !important;
  grid-template-columns: 1.6fr auto auto auto !important;
  gap: 56px !important;
  align-items: start !important;
  padding-bottom: 56px !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
}

/* Brand column */
.site-footer-dark .footer-brand {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Logo icon pill in dark footer */
.footer-logo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 9px;
  flex-shrink: 0;
}
.footer-logo-icon img {
  width: 18px;
  height: 18px;
  opacity: .85;
  filter: invert(1);
}

/* Wordmark in dark footer */
.footer-wordmark-dark {
  font-family: 'Poppins', sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  letter-spacing: -.03em !important;
  opacity: 1 !important;
}

.site-footer-dark .nb-footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

/* Brand sub: off-white muted */
.site-footer-dark .footer-brand-sub {
  font-size: 13px !important;
  color: rgba(255,255,255,.32) !important;
  line-height: 1.65 !important;
  max-width: 240px !important;
}

/* AI engine chips in footer */
.footer-engine-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.fec {
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 999px;
  padding: 4px 10px;
  letter-spacing: .02em;
}

/* Nav columns: white type */
.site-footer-dark .footer-col-label {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.28) !important;
  margin-bottom: 20px !important;
}

.site-footer-dark .footer-col-links {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.site-footer-dark .footer-col-links a,
.site-footer-dark a {
  font-size: 14px !important;
  color: rgba(255,255,255,.5) !important;
  text-decoration: none !important;
  transition: color .18s ease !important;
  font-weight: 400 !important;
}
.site-footer-dark .footer-col-links a:hover,
.site-footer-dark a:hover {
  color: rgba(255,255,255,.9) !important;
}

/* Bottom bar */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
}

.site-footer-dark .footer-copy {
  font-size: 12.5px !important;
  color: rgba(255,255,255,.22) !important;
  margin: 0 !important;
  padding: 0 !important;
  border-top: none !important;
}

.footer-legal-links {
  display: flex;
  gap: 24px;
}
.footer-legal-links a {
  font-size: 12.5px !important;
  color: rgba(255,255,255,.22) !important;
  transition: color .18s ease !important;
}
.footer-legal-links a:hover {
  color: rgba(255,255,255,.6) !important;
}

/* Override generic site-footer rules for dark version */
.site-footer-dark p { color: rgba(255,255,255,.3) !important; }

/* Responsive: dark footer */
@media (max-width: 860px) {
  .site-footer-dark .footer-inner {
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
  }
  .site-footer-dark .footer-brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 560px) {
  .site-footer-dark .footer-inner {
    grid-template-columns: 1fr !important;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SAFARI COMPAT + FULL MOBILE RESPONSIVE — v100
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1) Safari: add missing -webkit-backdrop-filter prefixes ─────────────── */
.pb-glass-pill-a,
.pb-glass-pill-b { -webkit-backdrop-filter: blur(20px) saturate(1.5); }
.page-link-badge { -webkit-backdrop-filter: blur(12px); }
.pb-glass-badge  { -webkit-backdrop-filter: blur(8px); }

/* ── 2) Safari: gradient text — already set in canonical .hero-highlight rule above ── */

/* ── 3) Safari: loading-state overflow on mobile ─────────────────────────── */
.loading-state { overflow: hidden; }
.prog-track { overflow: hidden; }

/* ── 4) Safari: fix flex min-width so card doesn't break at narrow widths ── */
.card-body { min-width: 0; }
.url-field { min-width: 0; }
.topbar-label { min-width: 0; }

/* ── 5) Safari: -webkit-fill-available for 100vh on mobile Safari address bar */
.hero {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS — complete coverage
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Desktop wide (≥ 1280px): hero split with gap boost ─────────────────── */
@media (min-width: 1280px) {
  .hero-split { gap: 80px !important; }
  .hero h1 { font-size: 72px !important; }
}

/* ── Tablet landscape (900–1040px): tighten hero ────────────────────────── */
@media (max-width: 1040px) {
  .hero-split { gap: 40px !important; }
  .hero h1 { font-size: clamp(46px, 5vw, 62px) !important; }
}

/* ── Tablet portrait (768–900px): stack hero, keep card ─────────────────── */
@media (max-width: 900px) {
  .hero-split {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .hero-left { text-align: center !important; align-items: center !important; }
  .hero-lead { max-width: 540px !important; margin-left: auto !important; margin-right: auto !important; }
  .hero-proof { justify-content: center !important; }
  .hero-trust { justify-content: center !important; }
  .hero-right { max-width: 540px !important; margin: 0 auto !important; width: 100% !important; }
  .hero-right .analyzer-card { animation: none !important; }
  .hero { padding: 60px 0 64px !important; }
}

/* ── Mobile large (600–768px): tighten font, card fits screen ───────────── */
@media (max-width: 768px) {
  .hero h1 { font-size: clamp(36px, 9vw, 52px) !important; letter-spacing: -2px !important; }
  .hero { padding: 48px 0 52px !important; }
  .hero-right { max-width: 100% !important; }
  .analyzer-card { border-radius: 16px !important; }
  .card-body { padding: 18px 18px 20px !important; }
  .card-topbar { padding: 10px 14px !important; }
  /* Results card */
  .results-card { padding: 20px !important; }
  .res-header { flex-direction: column !important; gap: 20px !important; }
  .breakdown-grid { grid-template-columns: 1fr 1fr !important; }
  /* Feed grid */
  .feed-grid { grid-template-columns: 1fr !important; }
  /* Section spacing */
  .section { padding: 64px 0 !important; }
  .sec-h2 { font-size: clamp(24px, 5.5vw, 36px) !important; letter-spacing: -.8px !important; text-wrap: balance !important; }
  /* Footer */
  .footer-inner { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
  .footer-brand { grid-column: 1 / -1 !important; }
  .footer-copy { grid-column: 1 / -1 !important; }
}

/* ── Mobile standard (≤ 600px): full single column ──────────────────────── */
@media (max-width: 600px) {
  /* Container breathing room */
  .container { width: calc(100% - 32px) !important; }
  /* Hero */
  .hero { padding: 36px 0 44px !important; }
  .hero h1 { font-size: clamp(32px, 10.5vw, 46px) !important; letter-spacing: -1.5px !important; line-height: 1.06 !important; }
  .hero-lead { font-size: 15.5px !important; max-width: 100% !important; }
  .hero-proof { flex-direction: column !important; align-items: center !important; gap: 10px !important; }
  .hero-trust { font-size: 11px !important; gap: 4px 4px !important; text-align: center !important; }
  /* Analyzer card: full bleed on mobile */
  .analyzer-card { border-radius: 14px !important; margin-bottom: 0 !important; }
  .card-topbar { padding: 9px 12px !important; }
  .topbar-engines { display: none !important; }
  .card-body { padding: 14px 14px 18px !important; }
  /* URL field: stack on very small screens */
  .url-field { flex-wrap: wrap !important; padding: 6px !important; gap: 4px !important; border-radius: 14px !important; }
  .url-proto { padding: 7px 8px 7px 10px !important; font-size: 12px !important; }
  .url-divider { display: none !important; }
  .url-field input { padding: 7px 4px !important; font-size: 14px !important; min-width: 0 !important; flex: 1 !important; }
  #analyze-btn { width: 100% !important; border-radius: 10px !important; justify-content: center !important; padding: 12px !important; }
  /* Steps text */
  .step { font-size: 12px !important; }
  .step-meta { font-size: 10px !important; }
  /* Results */
  .score-ring-wrap { width: 100px !important; height: 100px !important; }
  .breakdown-grid { grid-template-columns: 1fr !important; }
  .res-actions { flex-direction: column !important; align-items: stretch !important; }
  .btn-pro-cta { text-align: center !important; justify-content: center !important; }
  /* Tabs */
  .tab-btn { font-size: 12px !important; padding: 7px 12px !important; }
  /* Rec / missing cards */
  .rec-item > .rec-body { padding: 16px 18px 18px !important; }
  .rec-item > .rec-body .rec-title { font-size: 16px !important; }
  .missing-item { padding: 16px 18px 18px !important; }
  /* Playbook cards */
  .pb-card-glass, .pb-card-diff {
    border-radius: 16px !important;
  }
  /* Section headings */
  .sec-h2 { font-size: clamp(22px, 6.5vw, 30px) !important; text-wrap: balance !important; }
  /* How-it-works */
  .how-card { padding: 28px 22px !important; }
  /* Nav */
  .nav-inner { padding: 12px 0 !important; }
  .nav-badge-geo { display: none !important; }
  /* Footer single column */
  .footer-inner { grid-template-columns: 1fr !important; gap: 28px !important; }
  .footer-brand { grid-column: 1 !important; }
  .footer-copy { grid-column: 1 !important; }
}

/* ── Mobile small (≤ 390px): iPhone SE / small Android ──────────────────── */
@media (max-width: 390px) {
  .hero h1 { font-size: clamp(28px, 10vw, 38px) !important; }
  .container { width: calc(100% - 24px) !important; }
  .card-body { padding: 12px 12px 16px !important; }
  .score-ring-wrap { width: 88px !important; height: 88px !important; }
  .score-num { font-size: 28px !important; }
  .tab-btn { font-size: 11px !important; padding: 6px 10px !important; }
}

/* ── Tablet-only (600–900px): two-col playbook ───────────────────────────── */
@media (min-width: 601px) and (max-width: 900px) {
  .rec-list { grid-template-columns: 1fr !important; }
  .missing-list { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRIORITY BADGES — high-contrast solid pills (HIGH / MEDIUM / LOW)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Base pill: solid background, white or near-white text */
.pb-impact {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  padding: 5px 11px !important;
  border-radius: 999px !important;
  width: fit-content !important;
  border: none !important;
  line-height: 1 !important;
}

/* Dot: always white on solid background */
.pb-imp-dot {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: currentColor !important;
  flex-shrink: 0 !important;
  opacity: .75 !important;
}

/* IMPACT BADGES — clean warm tinted pills, dark readable text */
.pb-card-high   .pb-impact,
.pb-card-medium .pb-impact,
.pb-card-low    .pb-impact {
  font-weight: 800 !important;
  font-size: 10.5px !important;
  letter-spacing: .08em !important;
  padding: 5px 13px !important;
  border-radius: 999px !important;
  border: none !important;
}

/* JS now uses dark colors: #B91C1C / #92400E / #166534 — readable on these light tints */
.pb-card-high   .pb-impact { background: rgba(185, 28, 28, .12) !important; }
.pb-card-medium .pb-impact { background: rgba(146, 64, 14, .12) !important; }
.pb-card-low    .pb-impact { background: rgba(22, 101, 52, .12) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   SAFARI URL FIELD + ANALYZE BUTTON FIX
   Problem: Safari flexbox doesn't shrink input correctly, button overflows.
   Fix: explicit flex-shrink, -webkit-appearance, and width constraints.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Field: ensure it never grows wider than its container */
.url-field {
  width: 100% !important;
  box-sizing: border-box !important;
  /* Safari: force proper flex baseline alignment */
  -webkit-align-items: center !important;
}

/* Input: must shrink, must not overflow */
.url-field input {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  width: 0 !important;          /* Safari trick: allows flex to shrink below content width */
  -webkit-appearance: none !important;
  box-sizing: border-box !important;
}

/* Proto button: never shrink */
.url-proto {
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
}

/* Analyze button: never shrink, always stays at natural size */
#analyze-btn {
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  white-space: nowrap !important;
  /* Safari: ensure border-radius pill renders correctly */
  -webkit-appearance: none !important;
  overflow: visible !important;
}

/* ══════════════════════════════════════════════════════════════
   V2 LANDING SECTIONS — How It Works, Benchmarks, Reviews,
   Features, Pricing, Final CTA
   (CSS v110 — full v2-* system)
══════════════════════════════════════════════════════════════ */

/* ── Shared section header ── */
.v2-section-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 64px;
}
.v2-section-sub {
  margin: 14px 0 0;
  font-size: 17px;
  color: #6B6055;
  line-height: 1.6;
}
.v2-cta-btn {
  display: inline-block;
  background: #111;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: 14px 32px;
  border-radius: 999px;
  text-decoration: none;
  transition: background .2s, transform .15s;
}
.v2-cta-btn:hover { background: #333; transform: translateY(-1px); }
.v2-cta-note {
  font-size: 13px;
  color: #9B8E82;
}

/* ══════════════════════════════════════════════
   HOW IT WORKS
══════════════════════════════════════════════ */
.v2-how { background: #FDFAF6; }

.v2-how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 48px;
}

.v2-how-step {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.v2-step-visual {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 20px;
}

.v2-step-num {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #C49A8A;
  letter-spacing: .12em;
  margin-right: 16px;
  white-space: nowrap;
}

.v2-step-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, #E8DDD4 0%, transparent 100%);
}

.v2-step-card {
  background: #fff;
  border: 1px solid rgba(196,154,138,.18);
  border-radius: 20px;
  padding: 28px 26px;
  flex: 1;
  transition: box-shadow .2s, transform .2s;
  position: relative;
}
.v2-step-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,.08);
  transform: translateY(-2px);
}

.v2-step-icon {
  width: 48px;
  height: 48px;
  background: rgba(196,154,138,.12);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.v2-step-card h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: #1A1512;
  margin: 0 0 10px;
}

.v2-step-card p {
  font-size: 14px;
  color: #6B6055;
  line-height: 1.65;
  margin: 0 0 20px;
}

/* Typing demo */
.v2-step-demo {
  background: #F5EFE6;
  border-radius: 10px;
  padding: 12px 14px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 13px;
}
.v2-demo-url {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #555;
}
.v2-demo-lock { opacity: .5; }
.v2-demo-domain { color: #9B8E82; }
.v2-demo-typing { color: #111; font-weight: 600; }
.v2-demo-cursor {
  color: #C49A8A;
  animation: blink .8s step-end infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* Signal chips */
.v2-signal-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.v2-chip {
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 999px;
  letter-spacing: .04em;
}
.v2-chip-green { background: rgba(34,197,94,.12); color: #166534; }
.v2-chip-amber { background: rgba(234,179,8,.12); color: #713F12; }
.v2-chip-red   { background: rgba(239,68,68,.12); color: #991B1B; }

/* File list */
.v2-file-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.v2-file {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #3B2E26;
  background: rgba(196,154,138,.08);
  border-radius: 8px;
  padding: 7px 12px;
  font-family: 'SF Mono', 'Fira Code', monospace;
}
.v2-file-icon { font-size: 14px; }
.v2-file-more {
  color: #C49A8A;
  background: transparent;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 2px 0;
}

/* How CTA bar */
.v2-how-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* ══════════════════════════════════════════════
   BENCHMARKS
══════════════════════════════════════════════ */
.v2-bench-section {
  padding: 100px 0;
  background: #1A1512;
  color: #fff;
}
.v2-bench-section .sec-kicker {
  color: rgba(196,154,138,.8);
}
.v2-bench-section .sec-h2 {
  color: #fff;
}

.v2-bench-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 48px;
  margin-bottom: 56px;
}

.v2-bench-lead {
  color: rgba(255,255,255,.6);
  font-size: 17px;
  line-height: 1.65;
  margin-top: 16px;
}
.v2-bench-lead strong { color: #fff; }

.v2-bench-stat-block {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 180px;
}
.v2-big-stat { text-align: right; }
.v2-big-num {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 52px;
  font-weight: 800;
  line-height: 1;
  color: #C49A8A;
  margin-bottom: 4px;
}
.v2-big-label {
  font-size: 12px;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* Scoreboard */
.v2-bench-board {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  overflow: hidden;
}

.v2-bench-row {
  display: grid;
  grid-template-columns: 1.6fr .8fr .5fr 2fr;
  align-items: center;
  padding: 16px 24px;
  gap: 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background .15s;
}
.v2-bench-row:last-child { border-bottom: none; }
.v2-bench-row:not(.v2-bench-row-head):not(.v2-bench-row-you):hover {
  background: rgba(255,255,255,.04);
}

.v2-bench-row-head {
  background: rgba(255,255,255,.04);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.35);
  padding: 12px 24px;
}

.v2-bench-row-you {
  background: rgba(196,154,138,.08);
  border: 1px solid rgba(196,154,138,.25);
  border-radius: 0 0 16px 16px;
}

.v2-br-industry {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,.85);
}
.v2-br-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.v2-br-dot-pulse {
  background: #C49A8A;
  box-shadow: 0 0 0 0 rgba(196,154,138,.6);
  animation: pulse-dot 2s ease-out infinite;
}
@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(196,154,138,.6); }
  70%  { box-shadow: 0 0 0 8px rgba(196,154,138,0); }
  100% { box-shadow: 0 0 0 0 rgba(196,154,138,0); }
}

.v2-br-score {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,.7);
  font-feature-settings: 'tnum';
}
.v2-br-score-q {
  color: #C49A8A;
  font-size: 16px;
}

.v2-br-grade {
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
}
.v2-grade-f { color: #ef4444; }
.v2-grade-d { color: #f97316; }
.v2-grade-c { color: #eab308; }
.v2-grade-b { color: #84cc16; }
.v2-grade-a { color: #22c55e; }
.v2-grade-q {
  color: #C49A8A;
  font-size: 20px;
}

.v2-br-bar {
  height: 6px;
  background: rgba(255,255,255,.08);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.v2-br-fill {
  height: 100%;
  border-radius: 999px;
  width: var(--w, 0%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.v2-br-fill.animated { transform: scaleX(1); }

.v2-br-cta {
  display: inline-block;
  background: #C49A8A;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 18px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s;
}
.v2-br-cta:hover { background: #b08878; }

/* fade-in for rows */
.v2-bench-row.fade-in {
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity .5s ease, transform .5s ease;
}
.v2-bench-row.fade-in.visible {
  opacity: 1;
  transform: none;
}

/* ══════════════════════════════════════════════
   REVIEWS / SOCIAL PROOF
══════════════════════════════════════════════ */
.v2-reviews { background: #FDFAF6; }

/* Score transformer */
.v2-transform-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  margin-bottom: 64px;
  flex-wrap: wrap;
}

.v2-transform-card {
  background: #fff;
  border: 1px solid rgba(196,154,138,.2);
  border-radius: 20px;
  padding: 32px 40px;
  text-align: center;
  min-width: 200px;
  flex: 1;
  max-width: 240px;
}
.v2-tc-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #9B8E82;
  margin-bottom: 16px;
}
.v2-tc-score {
  font-family: 'Poppins', sans-serif;
  font-size: 72px;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 4px;
}
.v2-tc-before .v2-tc-score { color: #ef4444; }
.v2-tc-after  .v2-tc-score { color: #22c55e; }

.v2-tc-grade {
  font-family: 'Poppins', sans-serif;
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 14px;
}
.v2-tc-before .v2-tc-grade { color: #ef4444; }
.v2-tc-after  .v2-tc-grade { color: #22c55e; }

.v2-tc-bar {
  height: 6px;
  background: #F0EAE4;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 14px;
}
.v2-tc-desc {
  font-size: 12px;
  color: #9B8E82;
  line-height: 1.5;
}

.v2-transform-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #6B6055;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  flex-shrink: 0;
}

/* Review masonry */
.v2-review-masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 20px;
  margin-bottom: 48px;
}

.v2-review-card {
  background: #fff;
  border: 1px solid rgba(196,154,138,.18);
  border-radius: 18px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: box-shadow .2s, transform .2s;
}
.v2-review-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,.07);
  transform: translateY(-2px);
}

/* Featured card spans 2 rows */
.v2-rc-featured {
  grid-row: span 2;
}

.v2-rc-stars {
  color: #F59E0B;
  font-size: 15px;
  letter-spacing: 2px;
}

.v2-review-card blockquote {
  font-size: 14.5px;
  line-height: 1.7;
  color: #2D2520;
  margin: 0;
  font-style: italic;
  quotes: none;
  flex: 1;
}

.v2-rc-metric {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 13px;
}
.v2-rc-before { color: #ef4444; font-size: 22px; }
.v2-rc-after  { color: #22c55e; font-size: 22px; }
.v2-rc-arrow  { color: #C49A8A; font-size: 18px; }
.v2-rc-tag    { font-size: 11px; font-weight: 600; color: #9B8E82; font-family: 'Inter', sans-serif; }

.v2-rc-pill {
  display: inline-block;
  background: rgba(196,154,138,.12);
  color: #7A5A46;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 999px;
}
.v2-rc-pill-green {
  background: rgba(34,197,94,.12);
  color: #166534;
}

.v2-rc-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}
.v2-rc-author img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: #EEE;
}
.v2-rc-author div { display: flex; flex-direction: column; gap: 1px; }
.v2-rc-author strong { font-size: 13px; color: #1A1512; }
.v2-rc-author span  { font-size: 12px; color: #9B8E82; }

.v2-review-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  color: #6B6055;
}
.v2-stars-row { color: #F59E0B; letter-spacing: 2px; }
.v2-inline-cta {
  color: #111;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1.5px solid #111;
  padding-bottom: 1px;
  transition: opacity .15s;
  margin-left: 8px;
}
.v2-inline-cta:hover { opacity: .6; }

/* ══════════════════════════════════════════════
   FEATURES — Interactive explorer
══════════════════════════════════════════════ */
.v2-features-section {
  padding: 100px 0;
  background: #fff;
}

.v2-feat-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.v2-feat-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.v2-feat-card {
  background: #FDFAF6;
  border: 1.5px solid transparent;
  border-radius: 16px;
  padding: 20px 22px;
  cursor: pointer;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.v2-feat-card:hover { border-color: rgba(196,154,138,.35); }
.v2-fc-active {
  border-color: #C49A8A !important;
  background: #fff !important;
  box-shadow: 0 4px 20px rgba(196,154,138,.15);
}

.v2-fc-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
.v2-fc-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.v2-feat-card h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #1A1512;
  margin: 0 0 2px;
}
.v2-fc-tag {
  font-size: 11px;
  font-weight: 600;
  color: #9B8E82;
  font-family: 'SF Mono', 'Fira Code', monospace;
}
.v2-feat-card p {
  font-size: 13.5px;
  color: #6B6055;
  line-height: 1.6;
  margin: 0;
}

/* Right: code preview */
.v2-feat-preview {
  background: #1A1512;
  border-radius: 20px;
  overflow: hidden;
  position: sticky;
  top: 100px;
  box-shadow: 0 24px 64px rgba(0,0,0,.2);
}

.v2-fp-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  background: rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.v2-fp-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.v2-fp-dot.r { background: #FF5F57; }
.v2-fp-dot.a { background: #FEBC2E; }
.v2-fp-dot.g { background: #28C840; }

.v2-fp-title {
  font-size: 12px;
  color: rgba(255,255,255,.4);
  font-family: 'SF Mono', 'Fira Code', monospace;
  margin-left: 8px;
}

.v2-fp-code {
  padding: 24px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 13px;
  line-height: 2;
  color: rgba(255,255,255,.75);
  min-height: 320px;
  white-space: pre-wrap;
  word-break: break-word;
}

.v2-code-comment { color: rgba(196,154,138,.6); }
.v2-code-key     { color: #C49A8A; }
.v2-code-val     { color: rgba(255,255,255,.85); }
.v2-code-str     { color: #7AAF94; }
.v2-code-prop    { color: #6B9FAF; }
.v2-code-num     { color: #B8A86A; }

.v2-fp-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: rgba(255,255,255,.04);
  border-top: 1px solid rgba(255,255,255,.06);
  font-size: 12px;
  color: rgba(255,255,255,.4);
}
.v2-fp-badge {
  background: rgba(34,197,94,.15);
  color: #4ade80;
  font-weight: 700;
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 999px;
}

/* ══════════════════════════════════════════════
   PRICING
══════════════════════════════════════════════ */
.v2-pricing-section { background: #FDFAF6; }

.v2-price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
  margin-bottom: 48px;
}

.v2-price-card {
  background: #fff;
  border: 1.5px solid rgba(196,154,138,.2);
  border-radius: 20px;
  padding: 36px 30px;
  position: relative;
  transition: box-shadow .2s, transform .2s;
}
.v2-price-card:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,.08);
  transform: translateY(-3px);
}

.v2-price-featured {
  border-color: #C49A8A !important;
  box-shadow: 0 12px 48px rgba(196,154,138,.2);
  transform: translateY(-8px);
  background: #fff;
}
.v2-price-featured:hover { transform: translateY(-11px); }

.v2-pc-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: #111;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 18px;
  border-radius: 999px;
  letter-spacing: .08em;
  white-space: nowrap;
}

.v2-pc-tier {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #9B8E82;
  margin-bottom: 10px;
}

.v2-pc-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 8px;
}
.v2-pc-num {
  font-family: 'Poppins', sans-serif;
  font-size: 52px;
  font-weight: 900;
  color: #1A1512;
  line-height: 1;
}
.v2-pc-mo {
  font-size: 15px;
  color: #9B8E82;
  font-weight: 500;
}
.v2-pc-desc {
  font-size: 14px;
  color: #6B6055;
  margin: 0 0 24px;
  line-height: 1.5;
}

.v2-pc-list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.v2-pc-list li {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #2D2520;
}
.v2-pc-list li::before {
  content: '';
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  background-size: 10px;
  background-repeat: no-repeat;
  background-position: center;
}
.v2-pc-ok { color: #2D2520; }
.v2-pc-ok::before {
  background-color: rgba(34,197,94,.15);
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 5l2 2 4-4' stroke='%2316a34a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.v2-pc-no { color: #B0A090; }
.v2-pc-no::before {
  background-color: rgba(0,0,0,.06);
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 3l4 4M7 3l-4 4' stroke='%23aaa' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.v2-pc-bold { font-weight: 700; }

.v2-pc-btn-outline {
  display: block;
  text-align: center;
  border: 2px solid #1A1512;
  color: #1A1512;
  font-weight: 700;
  font-size: 14px;
  padding: 13px;
  border-radius: 12px;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.v2-pc-btn-outline:hover { background: #1A1512; color: #fff; }

.v2-pc-btn-primary {
  display: block;
  text-align: center;
  background: #1A1512;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 13px;
  border-radius: 12px;
  text-decoration: none;
  transition: background .2s, transform .15s;
  margin-bottom: 10px;
}
.v2-pc-btn-primary:hover { background: #333; transform: translateY(-1px); }

.v2-pc-note {
  font-size: 11.5px;
  color: #9B8E82;
  text-align: center;
  margin: 0;
}

/* Trust bar */
.v2-price-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  padding: 28px 32px;
  background: rgba(196,154,138,.08);
  border-radius: 14px;
}
.v2-pt-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: #3B2E26;
}

/* ══════════════════════════════════════════════
   FINAL CTA — Dark urgency block
══════════════════════════════════════════════ */
.v2-cta-section {
  position: relative;
  background: #1A1512;
  padding: 100px 0;
  overflow: hidden;
}

.v2-cta-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 80% 50%, rgba(196,154,138,.12) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 20% 20%, rgba(124,111,160,.1) 0%, transparent 60%);
  pointer-events: none;
}

.v2-cta-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.v2-cta-kicker {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #C49A8A;
  margin-bottom: 20px;
}

.v2-cta-h2 {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 800;
  line-height: 1.18;
  color: #fff;
  margin: 0 0 20px;
  text-wrap: balance;
}
.v2-cta-h2 em {
  font-style: normal;
  color: #C49A8A;
}

.v2-cta-sub {
  font-size: 16px;
  color: rgba(255,255,255,.55);
  line-height: 1.7;
  margin: 0 0 32px;
}
.v2-cta-sub strong { color: rgba(255,255,255,.85); }

.v2-cta-proof {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: rgba(255,255,255,.5);
  flex-wrap: wrap;
}
.v2-cta-proof span:first-child { color: #F59E0B; letter-spacing: 2px; }
.v2-cta-proof strong { color: rgba(255,255,255,.8); }

.v2-cta-live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(34,197,94,.5);
  animation: pulse-dot 2s ease-out infinite;
}
.v2-cta-live-txt { color: rgba(255,255,255,.5); }

/* CTA card */
.v2-cta-card {
  background: #fff;
  border-radius: 24px;
  padding: 40px 36px;
  box-shadow: 0 32px 80px rgba(0,0,0,.35);
}

.v2-cc-head {
  font-family: 'Poppins', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #1A1512;
  margin-bottom: 24px;
}

.v2-cc-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.v2-cc-field {
  display: flex;
  align-items: center;
  border: 1.5px solid rgba(196,154,138,.4);
  border-radius: 12px;
  overflow: hidden;
  background: #FDFAF6;
}
.v2-cc-prefix {
  padding: 0 12px;
  font-size: 13px;
  color: #9B8E82;
  font-family: 'SF Mono', 'Fira Code', monospace;
  white-space: nowrap;
  flex-shrink: 0;
  border-right: 1px solid rgba(196,154,138,.3);
}
.v2-cc-field input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 14px 14px;
  font-size: 14px;
  color: #1A1512;
  outline: none;
  min-width: 0;
  width: 0;
}
.v2-cc-field input::placeholder { color: #C0B0A4; }

.v2-cc-btn {
  width: 100%;
  background: #1A1512;
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 15px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, transform .15s;
}
.v2-cc-btn:hover { background: #333; transform: translateY(-1px); }

.v2-cc-note {
  text-align: center;
  font-size: 12px;
  color: #9B8E82;
  margin-bottom: 18px;
}

.v2-cc-signals {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.v2-cc-signals span {
  font-size: 11.5px;
  font-weight: 700;
  color: #166534;
  background: rgba(34,197,94,.1);
  padding: 4px 10px;
  border-radius: 999px;
}

/* ══════════════════════════════════════════════
   V2 RESPONSIVE
══════════════════════════════════════════════ */
@media (max-width: 1040px) {
  .v2-how-grid {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
  .v2-step-visual { display: none; }
  .v2-bench-header { grid-template-columns: 1fr; }
  .v2-bench-stat-block { flex-direction: row; }
  .v2-big-stat { text-align: left; }
  .v2-review-masonry { grid-template-columns: repeat(2,1fr); }
  .v2-rc-featured { grid-row: span 1; }
  .v2-feat-layout { grid-template-columns: 1fr; }
  .v2-feat-preview { position: static; }
  .v2-price-grid { grid-template-columns: 1fr; max-width: 440px; margin-left: auto; margin-right: auto; }
  .v2-price-featured { transform: none; }
  .v2-price-featured:hover { transform: translateY(-3px); }
  .v2-cta-inner { grid-template-columns: 1fr; gap: 48px; }
  .v2-cta-h2 { font-size: 36px; }
}

@media (max-width: 768px) {
  .v2-bench-row { grid-template-columns: 1.4fr .7fr 2fr; }
  .v2-bench-row > span:nth-child(3) { display: none; }
  .v2-bench-row-head > span:nth-child(3) { display: none; }
  .v2-review-masonry { grid-template-columns: 1fr; }
  .v2-transform-strip { flex-direction: column; }
  .v2-transform-arrow { flex-direction: row; }
  .v2-price-trust { gap: 18px; }
  .v2-cta-section { padding: 72px 0; }
  .v2-cta-h2 { font-size: 30px; }
  .v2-cta-card { padding: 28px 22px; }
}

@media (max-width: 600px) {
  .v2-section-head { margin-bottom: 40px; }
  .v2-how-grid { gap: 20px; }
  .v2-step-card { padding: 22px 18px; }
  .v2-bench-section { padding: 72px 0; }
  .v2-bench-row { padding: 14px 16px; gap: 10px; }
  .v2-bench-row { grid-template-columns: 1fr .7fr 1.2fr; }
  .v2-bench-row > span:nth-child(2) { font-size: 13px; }
  .v2-big-num { font-size: 40px; }
  .v2-price-grid { max-width: 100%; }
  .v2-cta-h2 { font-size: 26px; }
}


/* ════════════════════════════════════════════════════════════════════════════
   AUTH MODAL
   Shown when unauthenticated user clicks "Download ZIP" or hits guest limit
   ════════════════════════════════════════════════════════════════════════════ */
#auth-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28, 20, 14, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: auth-fade-in 0.18s ease;
}

@keyframes auth-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.auth-modal {
  background: #FFFFFF;
  border: 1px solid rgba(28,28,28,0.10);
  border-radius: 20px;
  padding: 36px;
  width: 100%;
  max-width: 420px;
  position: relative;
  box-shadow: 0 24px 60px rgba(28,20,14,0.18), 0 4px 12px rgba(28,20,14,0.08);
  animation: auth-slide-up 0.22s cubic-bezier(0.16,1,0.3,1);
}

@keyframes auth-slide-up {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.auth-modal-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

.auth-modal-header .auth-modal-tabs {
  flex: 1;
  margin-bottom: 0;
}

.auth-modal-close {
  flex-shrink: 0;
  background: none;
  border: 1px solid rgba(28,28,28,0.12);
  border-radius: 8px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(28,28,28,0.35);
  cursor: pointer;
  transition: all 0.15s;
}
.auth-modal-close:hover { background: var(--s3); color: var(--text); border-color: rgba(28,28,28,0.2); }

.auth-modal-icon {
  width: 52px; height: 52px;
  background: rgba(111,175,122,0.12);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  margin-bottom: 18px;
}

.auth-modal-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.25;
}

.auth-modal-sub {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 22px;
}

/* Tabs */
.auth-modal-tabs {
  display: flex;
  background: var(--s3);
  border-radius: 10px;
  padding: 3px;
  gap: 3px;
  margin-bottom: 0;
}

.auth-tab {
  flex: 1;
  padding: 8px 12px;
  border: none;
  background: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.auth-tab.active {
  background: #FFFFFF;
  color: var(--text);
  box-shadow: 0 1px 4px rgba(28,28,28,0.10);
  font-weight: 600;
}

/* Forms */
.auth-form { display: none; }
.auth-form.active { display: block; }

.auth-field { margin-bottom: 14px; }
.auth-field label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 7px;
}
.auth-field input {
  width: 100%;
  background: var(--s1);
  border: 1px solid rgba(28,28,28,0.12);
  border-radius: 9px;
  padding: 10px 14px;
  color: var(--text);
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: inherit;
  box-sizing: border-box;
}
.auth-field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(111,175,122,0.14);
}
.auth-field input::placeholder { color: var(--muted2); }

.auth-submit-btn {
  width: 100%;
  background: #1C1C1C;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 13px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 6px;
  transition: background 0.15s, transform 0.1s;
  font-family: inherit;
  letter-spacing: -0.1px;
}
.auth-submit-btn:hover { background: #333; }
.auth-submit-btn:active { transform: scale(0.99); }
.auth-submit-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.am-turnstile {
  margin: 12px 0;
  min-height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-form-error {
  color: #C0392B;
  font-size: 12px;
  margin-top: 8px;
  min-height: 18px;
}

.auth-form-note {
  font-size: 11px;
  color: var(--muted2);
  text-align: center;
  margin-top: 12px;
}

/* ── Nav user chip (shown when logged in) ── */
.nav-user-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 4px 12px 4px 10px;
}

.nav-user-email {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  font-weight: 500;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-user-tier {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 20px;
}

.nav-tier-free   { background: rgba(144,144,168,0.15); color: #9090a8; }
.nav-tier-pro    { background: rgba(139,92,246,0.15);  color: #8b5cf6; }
.nav-tier-admin  { background: rgba(6,182,212,0.15);   color: #06b6d4; }

/* ═══════════════════════════════════════════════════════════════
   2026 LP PREMIUM UPGRADE — sections below hero/analyzer
   All overrides scoped to new modifier classes
═══════════════════════════════════════════════════════════════ */

/* Global section rhythm tightening */
.sec-kicker {
  font-size: 10px !important;
  letter-spacing: 1.8px !important;
  margin-bottom: 14px !important;
  color: rgba(0,0,0,.38) !important;
}
.sec-kicker::before {
  width: 14px !important;
  background: rgba(0,0,0,.22) !important;
}

/* ── Product feed ── */
.section-feed { padding-top: 80px !important; padding-bottom: 80px !important; }
.feed-h2 {
  font-size: clamp(28px,3vw,42px) !important;
  margin-bottom: 36px !important;
  font-weight: 900 !important;
  letter-spacing: -1.5px !important;
}
.feed-head { margin-bottom: 0 !important; }

/* ── Features (moved up, tighter) ── */
.lp-features-top {
  padding-top: 0 !important;
  padding-bottom: 80px !important;
}
.lp-feat-head { text-align: left !important; }
.lp-feat-h2 {
  font-size: clamp(26px,2.8vw,40px) !important;
  margin-bottom: 16px !important;
  font-weight: 900 !important;
  letter-spacing: -1.4px !important;
}
.lp-feat-sub {
  font-size: 14px !important;
  color: rgba(0,0,0,.42) !important;
  margin-bottom: 36px !important;
}

/* ── AI Gap simulation — tighter ── */
.ai-gap-section { padding: 80px 0 !important; }
.lp-aigap-h2 {
  font-size: clamp(26px,2.8vw,40px) !important;
  margin-bottom: 32px !important;
  font-weight: 900 !important;
  letter-spacing: -1.4px !important;
}

/* ── Stats band — tighter ── */
.stats-band { padding: 52px 0 !important; }
.stat-n { font-size: clamp(36px,4vw,52px) !important; letter-spacing: -2.5px !important; }
.stat-l { font-size: 12.5px !important; }
.stat-rule { height: 52px !important; }

/* ── Logos strip — tighter ── */
.logos-strip { padding: 28px 0 !important; }

/* ── How it works — new compact layout ── */
.lp-how-section { padding: 72px 0 !important; }
.lp-how-head { margin-bottom: 40px; }
.lp-how-h2 {
  font-size: clamp(26px,2.8vw,40px) !important;
  font-weight: 900 !important;
  letter-spacing: -1.4px !important;
  margin-bottom: 0 !important;
}
.lp-how-steps {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: #fff;
  border: 1px solid rgba(28,28,28,.08);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 32px rgba(0,0,0,.06), 0 1px 4px rgba(0,0,0,.03);
}
.lp-how-step {
  flex: 1;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  border-right: 1px solid rgba(28,28,28,.07);
  transition: background .18s;
}
.lp-how-step:last-child { border-right: none; }
.lp-how-step:hover { background: rgba(111,175,122,.03); }
.lp-step-n {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(0,0,0,.25);
}
.lp-step-icon {
  width: 40px; height: 40px;
  background: rgba(28,28,28,.05);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #111;
}
.lp-how-step h3 {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.025em;
  color: #111;
  margin: 0;
}
.lp-how-step p {
  font-size: 13.5px;
  color: rgba(0,0,0,.48);
  line-height: 1.65;
  margin: 0;
}
.lp-how-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2px;
  color: rgba(0,0,0,.18);
  flex-shrink: 0;
  background: rgba(28,28,28,.03);
  border-top: 1px solid rgba(28,28,28,.07);
  border-bottom: 1px solid rgba(28,28,28,.07);
}
.lp-how-cta {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* ── Benchmarks — tighter header ── */
.v2-bench-section { padding: 72px 0 !important; }
.lp-bench-header { gap: 40px !important; align-items: flex-end !important; }
.lp-bench-h2 {
  font-size: clamp(24px,2.6vw,38px) !important;
  font-weight: 900 !important;
  letter-spacing: -1.3px !important;
  margin-bottom: 0 !important;
}
.lp-bench-stats { gap: 20px !important; }
.v2-big-num { font-size: clamp(36px,4.5vw,58px) !important; letter-spacing: -2px !important; }
.v2-big-label { font-size: 12px !important; }

/* ── Social proof — compact ── */
.v2-reviews { padding: 72px 0 !important; }
.lp-reviews-head { text-align: left !important; margin-bottom: 32px !important; }
.lp-reviews-h2 {
  font-size: clamp(24px,2.6vw,38px) !important;
  font-weight: 900 !important;
  letter-spacing: -1.3px !important;
  margin-bottom: 16px !important;
}
.lp-transform-inline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid rgba(28,28,28,.09);
  border-radius: 14px;
  padding: 10px 18px;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
  margin-bottom: 4px;
}
.lp-ti-before {
  font-size: 22px;
  font-weight: 900;
  font-family: 'Poppins', sans-serif;
  color: #ef4444;
  letter-spacing: -.04em;
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.lp-ti-before span { font-size: 12px; font-weight: 800; opacity: .7; }
.lp-ti-after {
  font-size: 22px;
  font-weight: 900;
  font-family: 'Poppins', sans-serif;
  color: #22c55e;
  letter-spacing: -.04em;
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.lp-ti-after span { font-size: 12px; font-weight: 800; opacity: .8; }
.lp-ti-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(0,0,0,.35);
  text-transform: uppercase;
  letter-spacing: .08em;
  border-left: 1px solid rgba(0,0,0,.1);
  padding-left: 12px;
}

/* ── Review masonry cards — sharper ── */
.v2-review-card {
  border-radius: 18px !important;
  padding: 24px !important;
}
.v2-rc-featured { padding: 28px !important; }
.v2-review-card blockquote {
  font-size: 14px !important;
  line-height: 1.65 !important;
}

/* ── Pricing — sharper cards ── */
.v2-pricing-section { padding: 72px 0 !important; }
.v2-price-card { border-radius: 20px !important; }
.v2-price-featured { border-radius: 22px !important; }
.v2-pc-num { letter-spacing: -2px !important; }

/* ── CTA section — tighter copy ── */
.v2-cta-section { padding: 80px 0 !important; }
.v2-cta-h2 {
  font-size: clamp(24px,2.8vw,38px) !important;
  line-height: 1.18 !important;
  letter-spacing: -1px !important;
}
.v2-cta-sub {
  font-size: 14px !important;
  line-height: 1.6 !important;
  max-width: 420px !important;
}
.v2-cta-kicker {
  font-size: 10px !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
  margin-bottom: 14px !important;
}

/* ── Section heads global tightening ── */
.v2-section-head { margin-bottom: 40px !important; }
.v2-section-sub {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: rgba(0,0,0,.45) !important;
  margin-top: -8px !important;
}

/* ── Footer — sharper ── */
.site-footer { padding: 56px 0 40px !important; }
.footer-brand-sub { font-size: 12.5px !important; }
.footer-col-label {
  font-size: 10px !important;
  letter-spacing: .14em !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  color: rgba(0,0,0,.35) !important;
  margin-bottom: 14px !important;
}
.footer-col-links a { font-size: 13px !important; }
.footer-copy {
  font-size: 11.5px !important;
  color: rgba(0,0,0,.28) !important;
}

@media (max-width: 768px) {
  .lp-how-steps { flex-direction: column; }
  .lp-how-divider { padding: 12px 0; transform: rotate(90deg); }
  .lp-how-step { border-right: none; border-bottom: 1px solid rgba(28,28,28,.07); }
  .lp-how-step:last-child { border-bottom: none; }
  .lp-bench-header { flex-direction: column !important; align-items: flex-start !important; }
  .lp-reviews-head { text-align: center !important; }
  .lp-transform-inline { flex-wrap: wrap; }
}

/* ══════════════════════════════════════════════════════
   SINGLE SHOT — Product window illustration (v120)
══════════════════════════════════════════════════════ */

/* ── Section ── */
.shot-section {
  padding: 80px 0 96px;
  background: var(--bg);
  overflow: hidden;
}
.shot-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* ── Header — tight, centered ── */
.shot-head {
  text-align: center;
  margin-bottom: 52px;
}
.shot-h2 {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 1.1;
  margin: 0 0 12px;
}
.shot-sub {
  font-size: 15px;
  color: var(--muted);
  margin: 0;
}

/* ── Stage — holds window + glow + callouts ── */
.shot-stage {
  position: relative;
  width: 100%;
  max-width: 1020px;
  padding: 0 130px 60px;  /* room for side tags + bottom tag */
}

/* Glow pool — a soft radial bloom beneath the window */
.shot-glow {
  position: absolute;
  inset: -60px -80px;
  background:
    radial-gradient(ellipse 60% 50% at 20% 60%, rgba(111,175,122,.18) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 75% 40%, rgba(123,159,212,.14) 0%, transparent 70%),
    radial-gradient(ellipse 40% 35% at 50% 80%, rgba(184,154,200,.1) 0%, transparent 70%);
  filter: blur(32px);
  pointer-events: none;
  z-index: 0;
}

/* ── The window itself ── */
.shot-window {
  position: relative;
  z-index: 1;
  border-radius: 16px;
  overflow: hidden;
  background: #17181A;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 1px 0 rgba(255,255,255,.1) inset,
    0 40px 80px rgba(0,0,0,.35),
    0 12px 32px rgba(0,0,0,.2),
    0 2px 6px rgba(0,0,0,.15);
  transform: perspective(1400px) rotateX(2deg);
  transform-origin: top center;
  transition: transform .5s cubic-bezier(.22,.68,0,1.2);
}
.shot-window:hover {
  transform: perspective(1400px) rotateX(0deg);
}

/* Window chrome bar */
.shot-chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px 10px;
  background: #1E1F21;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.shot-dots { display: flex; gap: 6px; flex-shrink: 0; }
.sd-r { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.sd-y { width: 10px; height: 10px; border-radius: 50%; background: #febc2e; }
.sd-g { width: 10px; height: 10px; border-radius: 50%; background: #28c840; }
.shot-chrome-title {
  flex: 1;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,.3);
  letter-spacing: .01em;
}
.shot-chrome-tag {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  color: rgba(111,175,122,.8);
  letter-spacing: .04em;
  background: rgba(111,175,122,.08);
  border: 1px solid rgba(111,175,122,.18);
  border-radius: 20px;
  padding: 3px 9px;
}

/* Window body — 3 panels side by side */
.shot-body {
  display: grid;
  grid-template-columns: 220px 1fr 210px;
  gap: 0;
  min-height: 380px;
}

/* Panel base */
.shot-panel {
  padding: 20px 18px;
  border-right: 1px solid rgba(255,255,255,.06);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.shot-panel:last-child { border-right: none; }

/* ── LEFT: Score panel ── */
.shot-panel-score { background: #17181A; }
.shot-score-ring {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 0 auto;
  flex-shrink: 0;
}
.shot-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.shot-score-num {
  font-size: 26px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -1px;
  line-height: 1;
  font-family: 'Poppins', sans-serif;
}
.shot-score-sub {
  font-size: 10px;
  color: rgba(255,255,255,.3);
  font-weight: 600;
}
.shot-grade-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.shot-grade {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 900;
  background: rgba(111,175,122,.15);
  border: 1px solid rgba(111,175,122,.3);
  color: #8FD4A0;
  font-family: 'Poppins', sans-serif;
}
.shot-grade-label {
  font-size: 10px;
  color: rgba(255,255,255,.3);
  line-height: 1.4;
}
.shot-domain {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.6);
  font-family: monospace;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  padding: 5px 10px;
}
.shot-breakdown {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
}
.shot-bk-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: rgba(255,255,255,.35);
}
.shot-bk-row > span:first-child { width: 72px; flex-shrink: 0; }
.shot-bk-row > span:last-child { width: 24px; text-align: right; color: rgba(255,255,255,.45); font-weight: 700; }
.shot-bk-bar {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,.07);
  border-radius: 2px;
  overflow: hidden;
}
.shot-bk-bar div { height: 100%; border-radius: 2px; }

/* ── CENTER: Issues panel ── */
.shot-panel-issues { background: #17181A; gap: 10px; }
.shot-panel-head {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  padding-bottom: 10px;
  margin-bottom: 4px;
  flex-shrink: 0;
}
.shot-tab {
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(255,255,255,.3);
  padding: 4px 10px;
  border-radius: 6px;
  cursor: default;
}
.shot-tab-active {
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.85);
}
.shot-issues {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.shot-issue {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.shot-issue-crit { background: rgba(239,68,68,.06); border-color: rgba(239,68,68,.15); }
.shot-issue-high { background: rgba(251,146,60,.05); border-color: rgba(251,146,60,.12); }
.shot-issue-ok   { background: rgba(111,175,122,.05); border-color: rgba(111,175,122,.12); }
.shot-issue-top {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 2px;
}
.shot-sev {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 2px 6px;
  flex-shrink: 0;
}
.shot-sev-crit { background: rgba(239,68,68,.15); color: #f87171; }
.shot-sev-high { background: rgba(251,146,60,.15); color: #fb923c; }
.shot-sev-ok   { background: rgba(111,175,122,.15); color: #86efac; }
.shot-file {
  font-family: monospace;
  font-size: 9px;
  color: rgba(255,255,255,.3);
  background: rgba(255,255,255,.06);
  border-radius: 4px;
  padding: 1px 6px;
}
.shot-file-ok { color: rgba(111,175,122,.7); background: rgba(111,175,122,.08); }
.shot-issue-title {
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(255,255,255,.8);
  line-height: 1.35;
}
.shot-issue-fix {
  font-size: 10.5px;
  color: rgba(255,255,255,.3);
  line-height: 1.4;
}

/* ── RIGHT: Files panel ── */
.shot-panel-files {
  background: #1A1B1D;
  gap: 10px;
}
.shot-deploy-ready {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(111,175,122,.08);
  border: 1px solid rgba(111,175,122,.18);
  border-radius: 10px;
  flex-shrink: 0;
}
.shot-deploy-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(111,175,122,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.shot-deploy-title {
  font-size: 11.5px;
  font-weight: 800;
  color: rgba(255,255,255,.85);
  line-height: 1.2;
}
.shot-deploy-sub {
  font-size: 9.5px;
  color: rgba(255,255,255,.35);
}
.shot-file-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.shot-fitem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-radius: 7px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  font-size: 10.5px;
  font-weight: 700;
  font-family: monospace;
  color: rgba(255,255,255,.6);
  transition: background .15s;
}
.shot-fi-green  { border-left: 2px solid rgba(111,175,122,.5); }
.shot-fi-blue   { border-left: 2px solid rgba(126,184,224,.5); }
.shot-fi-purple { border-left: 2px solid rgba(184,154,200,.5); }
.shot-fi-amber  { border-left: 2px solid rgba(224,184,126,.5); }
.shot-fi-rose   { border-left: 2px solid rgba(224,126,154,.5); }
.shot-fi-muted  { opacity: .55; }
.shot-fi-dim    { opacity: .35; border-style: dashed; font-family: inherit; }
.shot-fitag {
  font-family: inherit;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(255,255,255,.25);
}
.shot-dl-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(111,175,122,.12);
  border: 1px solid rgba(111,175,122,.25);
  color: #8FD4A0;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: .02em;
  transition: background .2s;
  flex-shrink: 0;
}
.shot-dl-btn:hover { background: rgba(111,175,122,.2); }

/* ── Organic floating callout tags ── */
.shot-callouts {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: visible;
}

/* SVG connector paths — faint curved lines */
.shot-co-svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
}
.shot-co-path {
  fill: none;
  stroke: rgba(28,28,28,.13);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

/* Floating pill tag base */
.shot-tag {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px 7px 10px;
  background: #FAF6F0;
  border: 1px solid rgba(28,28,28,.1);
  border-radius: 100px;
  box-shadow: 0 2px 12px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.05);
  font-size: 12px;
  font-weight: 700;
  color: rgba(28,28,28,.65);
  letter-spacing: -.01em;
  white-space: nowrap;
  backdrop-filter: blur(8px);
}
.shot-tag-icon {
  font-size: 11px;
  opacity: .5;
  line-height: 1;
}

/* Score tag — floats left, tilted slightly counter-clockwise */
.shot-tag-1 {
  left: -118px;
  top: 68px;
  transform: rotate(-4deg);
}
/* Issues tag — floats below center, tilted slightly clockwise */
.shot-tag-2 {
  bottom: -44px;
  left: calc(38% - 60px);
  transform: rotate(2deg);
}
/* Files tag — floats right, counter-clockwise */
.shot-tag-3 {
  right: -112px;
  top: 60px;
  transform: rotate(3deg);
}

/* Responsive */
@media (max-width: 860px) {
  .shot-body { grid-template-columns: 1fr; }
  .shot-panel { border-right: none; border-bottom: 1px solid rgba(255,255,255,.06); }
  .shot-panel:last-child { border-bottom: none; }
  .shot-callouts { display: none; }
  .shot-window { transform: none; }
}

/* ══════════════════════════════════════════════════════
   PREMIUM SIMULATION MOCKUP — v140 (light / authentic)
══════════════════════════════════════════════════════ */

.ai-gap-section { padding: 0 0 112px; }

/* ── Browser frame — light macOS style ── */
.mockup-wrap {
  background: #E8E8EA;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.8) inset,
    0 2px 0 rgba(255,255,255,.6) inset,
    0 32px 80px rgba(0,0,0,.18),
    0 12px 32px rgba(0,0,0,.10),
    0 3px 8px rgba(0,0,0,.06);
  transform: perspective(1400px) rotateX(2.5deg);
  transform-origin: top center;
  transition: transform .6s cubic-bezier(.22,.68,0,1.2), box-shadow .5s ease;
  margin-bottom: 32px;
}
.mockup-wrap:hover {
  transform: perspective(1400px) rotateX(0deg) translateY(-8px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.8) inset,
    0 2px 0 rgba(255,255,255,.6) inset,
    0 48px 100px rgba(0,0,0,.20),
    0 20px 48px rgba(0,0,0,.12);
}

/* Top chrome — light brushed bar */
.mockup-topbar {
  background: linear-gradient(180deg, #F0F0F2 0%, #E4E4E6 100%);
  border-bottom: 1px solid rgba(0,0,0,.10);
  padding: 11px 18px;
}
.mockup-urlbar {
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 1px 3px rgba(0,0,0,.06) inset;
  color: rgba(0,0,0,.38);
  font-size: 10.5px;
  letter-spacing: .01em;
}
.mockup-urlbar svg { opacity: .3; }

/* macOS traffic lights — real colors */
.mdot.r { background: #FF5F57; box-shadow: 0 0 0 .5px rgba(0,0,0,.18) inset; }
.mdot.y { background: #FEBC2E; box-shadow: 0 0 0 .5px rgba(0,0,0,.12) inset; }
.mdot.g { background: #28C840; box-shadow: 0 0 0 .5px rgba(0,0,0,.12) inset; }

/* Inner canvas — off-white */
.mockup-inner {
  background: #F2F2F4;
  padding: 18px;
  position: relative;
}
.ai-windows { position: relative; z-index: 1; gap: 12px; }

/* ── AI window cards — clean white ── */
.ai-win {
  border-radius: 12px;
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 2px 16px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.05);
  position: relative; overflow: hidden;
  transition: transform .35s cubic-bezier(.22,.68,0,1.2), box-shadow .35s ease;
  min-height: 380px;
  display: flex; flex-direction: column;
}
.ai-win:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 12px 40px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06);
}
/* Subtle per-brand top stripe */
.ai-win-gpt    { border-top: 2px solid rgba(16,163,127,.45); }
.ai-win-claude { border-top: 2px solid rgba(217,117,89,.45); }
.ai-win-gemini { border-top: 2px solid rgba(66,133,244,.45); }

/* ── ChatGPT sidebar layout ── */
.ai-win-gpt { flex-direction: row; }

.ai-sidebar {
  width: 40px;
  flex-shrink: 0;
  background: #F7F7F8;
  border-right: 1px solid rgba(0,0,0,.07);
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 0 10px;
  gap: 6px;
}
.ai-sidebar-logo {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  color: #10a37f; margin-bottom: 6px;
}
.ai-sidebar-item {
  width: 28px; height: 28px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(0,0,0,.35);
  transition: background .15s, color .15s;
  cursor: pointer;
}
.ai-sidebar-item:hover { background: rgba(0,0,0,.06); color: rgba(0,0,0,.6); }
.ai-sidebar-active {
  background: rgba(16,163,127,.1);
  color: #10a37f;
}
.ai-sidebar-avatar {
  margin-top: auto;
  width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(135deg, #10a37f, #0e8f6e);
  color: #fff; font-size: 9px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

.ai-main {
  flex: 1; display: flex; flex-direction: column; overflow: hidden;
}
.ai-main .ai-win-body { flex: 1; }

/* ── Claude topbar ── */
.ai-claude-topbar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 13px 9px;
  border-bottom: 1px solid rgba(0,0,0,.07);
  background: #FAFAFA;
}
.ai-claude-brand {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; color: #1a1a1a;
  letter-spacing: -.01em;
}
.ai-claude-topbar .ai-win-model {
  margin-left: auto;
  font-size: 9px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase;
  background: rgba(217,117,89,.1); border: 1px solid rgba(217,117,89,.25);
  color: rgba(217,117,89,.9); border-radius: 4px; padding: 2px 6px;
}

/* ── Gemini topbar ── */
.ai-gemini-topbar {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 13px 0;
  background: #FFFFFF;
}
.ai-gemini-brand {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; color: #1a1a1a;
  letter-spacing: -.01em;
}
.ai-gemini-tabs {
  display: flex; align-items: flex-end; gap: 0; margin-left: 8px;
}
.ai-gtab {
  font-size: 10.5px; font-weight: 500; color: rgba(0,0,0,.45);
  padding: 6px 10px; border-bottom: 2px solid transparent;
  cursor: pointer; transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.ai-gtab:hover { color: rgba(0,0,0,.7); }
.ai-gtab-active {
  color: #4285F4;
  border-bottom-color: #4285F4;
  font-weight: 600;
}
.ai-gemini-model {
  margin-left: auto;
  font-size: 9px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase;
  background: rgba(66,133,244,.1); border: 1px solid rgba(66,133,244,.22);
  color: rgba(66,133,244,.9); border-radius: 4px; padding: 2px 6px;
  align-self: flex-start; margin-top: 4px;
}
.ai-gemini-topbar + .ai-win-body {
  border-top: 1px solid rgba(0,0,0,.07);
  margin-top: 0;
}

/* ── Source pills ── */
.ai-sources-row {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  margin-top: 8px;
}
.ai-source-pill {
  font-size: 9.5px; font-weight: 500;
  background: rgba(0,0,0,.04); border: 1px solid rgba(0,0,0,.09);
  border-radius: 999px; padding: 2px 8px; color: rgba(0,0,0,.45);
  white-space: nowrap;
}

/* ── Item body + desc ── */
.ai-item-body {
  display: flex; flex-direction: column; gap: 1px; flex: 1;
}
.ai-item-desc {
  font-size: 10px; color: rgba(0,0,0,.3); font-style: normal; line-height: 1.35;
}

/* ── Input bars ── */
.ai-input-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  border-top: 1px solid rgba(0,0,0,.07);
  background: #FAFAFA;
  flex-shrink: 0;
}
.ai-input-bar-claude { background: #FAFAFA; }
.ai-input-bar-gemini {
  background: #FFFFFF;
  border-top: 1px solid rgba(0,0,0,.07);
}
.ai-input-field {
  flex: 1;
  font-size: 10.5px; color: rgba(0,0,0,.3);
  background: #FFFFFF; border: 1px solid rgba(0,0,0,.10);
  border-radius: 8px; padding: 5px 10px;
  line-height: 1.5; pointer-events: none;
}
.ai-input-actions {
  display: flex; align-items: center; gap: 5px; flex-shrink: 0;
}
.ai-model-badge {
  font-size: 9px; font-weight: 700; letter-spacing: .04em;
  color: rgba(0,0,0,.4); background: rgba(0,0,0,.05);
  border: 1px solid rgba(0,0,0,.08); border-radius: 4px;
  padding: 2px 6px;
}
.ai-send-btn {
  width: 26px; height: 26px; border-radius: 7px; border: none;
  background: #10a37f; color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s;
  flex-shrink: 0;
}
.ai-send-btn:hover { background: #0e8f6e; }
.ai-send-claude { background: #d97559; }
.ai-send-claude:hover { background: #c5664a; }
.ai-send-gemini { background: #4285F4; }
.ai-send-gemini:hover { background: #3367D6; }

/* ── Override existing model pill for GPT (no chrome bar anymore) ── */
.ai-win-gpt .ai-win-model {
  font-size: 9px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  background: rgba(16,163,127,.1); border: 1px solid rgba(16,163,127,.22);
  color: rgba(16,163,127,.9); border-radius: 4px; padding: 2px 6px;
}

/* Product feed heading */
.feed-head { text-align: center; margin-bottom: 48px; }

@media (max-width: 900px) {
  .mockup-wrap { transform: none; }
  .mockup-wrap:hover { transform: translateY(-4px); }
  .ai-windows { grid-template-columns: 1fr; }
  .ai-win-gpt { flex-direction: column; }
  .ai-sidebar { width: 100%; height: 36px; flex-direction: row; padding: 0 12px; border-right: none; border-bottom: 1px solid rgba(0,0,0,.07); }
  .ai-sidebar-logo { margin-bottom: 0; margin-right: 6px; }
  .ai-sidebar-avatar { margin-top: 0; margin-left: auto; }
}


/* ══════════════════════════════════════════════════════════════
   PREMIUM LOWER SECTIONS REDESIGN — v121
   Logos · Stats · How it works · Benchmarks · Reviews ·
   Pricing · Final CTA · Footer
══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────
   LOGOS STRIP — refined marquee-style row
───────────────────────────────────────── */
.logos-strip {
  padding: 32px 0 !important;
  background: transparent !important;
  border-top: 1px solid rgba(28,28,28,.07) !important;
  border-bottom: 1px solid rgba(28,28,28,.07) !important;
}
.logos-label {
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: rgba(28,28,28,.28) !important;
  text-align: center !important;
  margin-bottom: 18px !important;
}
.logos-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  flex-wrap: wrap !important;
}
.logo-name {
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: -.3px !important;
  color: rgba(28,28,28,.18) !important;
  padding: 4px 22px !important;
  transition: color .2s !important;
}
.logo-name:hover { color: rgba(28,28,28,.45) !important; }
.logo-div {
  color: rgba(28,28,28,.1) !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

/* ─────────────────────────────────────────
   STATS BAND — large editorial numbers
───────────────────────────────────────── */
.stats-band {
  padding: 64px 0 !important;
  background: #111110 !important;
  position: relative;
  overflow: hidden;
}
.stats-band::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 80% at 10% 50%, rgba(111,175,122,.08) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 90% 50%, rgba(123,159,212,.06) 0%, transparent 70%);
}
.stats-row {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr !important;
  align-items: center !important;
  gap: 0 !important;
}
.stat { text-align: center; padding: 0 24px; }
.stat-n {
  display: block;
  font-size: clamp(36px, 4vw, 52px) !important;
  font-weight: 900 !important;
  letter-spacing: -2px !important;
  color: #fff !important;
  line-height: 1 !important;
  margin-bottom: 8px !important;
  font-family: 'Poppins', sans-serif !important;
}
.stat-l {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,.32) !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}
.stat-rule {
  width: 1px !important;
  height: 48px !important;
  background: rgba(255,255,255,.08) !important;
  flex-shrink: 0 !important;
}

/* ─────────────────────────────────────────
   HOW IT WORKS — clean horizontal timeline
───────────────────────────────────────── */
.lp-how-section {
  padding: 88px 0 !important;
  background: var(--bg) !important;
}
.lp-how-head { text-align: center; margin-bottom: 52px; }
.lp-how-h2 { font-size: clamp(28px, 3.5vw, 42px) !important; letter-spacing: -1.5px !important; }

.lp-how-steps {
  display: flex !important;
  align-items: stretch !important;
  background: #fff !important;
  border: 1px solid rgba(28,28,28,.07) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 32px rgba(0,0,0,.06), 0 1px 4px rgba(0,0,0,.04) !important;
  margin-bottom: 40px !important;
}
.lp-how-step {
  flex: 1 !important;
  padding: 36px 32px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  border-right: 1px solid rgba(28,28,28,.07) !important;
  position: relative !important;
  background: transparent !important;
  border-radius: 0 !important;
  transition: background .2s !important;
}
.lp-how-step:last-child { border-right: none !important; }
.lp-how-step:hover { background: rgba(28,28,28,.015) !important; }

.lp-step-n {
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .1em !important;
  color: rgba(28,28,28,.2) !important;
  font-family: 'Poppins', sans-serif !important;
}
.lp-step-icon {
  width: 44px !important; height: 44px !important;
  border-radius: 12px !important;
  background: rgba(28,28,28,.04) !important;
  border: 1px solid rgba(28,28,28,.07) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  color: rgba(28,28,28,.5) !important;
}
.lp-how-step h3 {
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: -.4px !important;
  color: var(--dark) !important;
  margin: 0 !important;
}
.lp-how-step p {
  font-size: 13px !important;
  color: var(--muted) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}
.lp-how-divider { display: none !important; }

.lp-how-cta {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
}
.v2-cta-btn {
  background: #111 !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  padding: 14px 28px !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  letter-spacing: -.1px !important;
  transition: background .2s, transform .2s !important;
}
.v2-cta-btn:hover { background: #333 !important; transform: translateY(-2px) !important; }
.v2-cta-note {
  font-size: 12px !important;
  color: rgba(28,28,28,.4) !important;
}

/* ─────────────────────────────────────────
   BENCHMARKS — compact editorial v122
───────────────────────────────────────── */
.v2-bench-section {
  padding: 72px 0 !important;
  background: #0F0F0E !important;
  position: relative; overflow: hidden;
}
.v2-bench-section::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 45% 55% at 15% 50%, rgba(111,175,122,.055) 0%, transparent 65%),
    radial-gradient(ellipse 35% 45% at 85% 30%, rgba(100,130,200,.04) 0%, transparent 65%);
}
.v2-bench-section .sec-kicker { color: rgba(255,255,255,.22) !important; }
.v2-bench-section .sec-h2, .lp-bench-h2 {
  color: #fff !important;
  font-size: clamp(22px, 2.8vw, 34px) !important;
  letter-spacing: -1px !important;
}
.v2-bench-header, .lp-bench-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 32px !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
}
.v2-bench-stat-block, .lp-bench-stats {
  display: flex !important;
  gap: 24px !important;
  flex-shrink: 0 !important;
}
.v2-big-stat {
  text-align: right;
  background: rgba(255,255,255,.035) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 12px !important;
  padding: 12px 18px !important;
}
.v2-big-num {
  display: block !important;
  font-size: clamp(22px,2.8vw,32px) !important;
  font-weight: 900 !important;
  letter-spacing: -1.5px !important;
  color: #fff !important;
  line-height: 1 !important;
  font-family: 'Poppins', sans-serif !important;
}
.v2-big-label {
  font-size: 9.5px !important;
  color: rgba(255,255,255,.25) !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  margin-top: 4px !important;
}

/* Benchmark table */
.v2-bench-board {
  background: rgba(255,255,255,.025) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}
.v2-bench-row {
  display: grid !important;
  grid-template-columns: 1fr 90px 58px 1fr !important;
  align-items: center !important;
  padding: 11px 18px !important;
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
  gap: 16px !important;
}
.v2-bench-row:last-child { border-bottom: none !important; }
.v2-bench-row-head {
  background: rgba(255,255,255,.03) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.18) !important;
  padding: 10px 18px !important;
}
.v2-br-industry {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,.6) !important;
}
.v2-br-score {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,.38) !important;
  font-family: 'Poppins', sans-serif !important;
}
.v2-br-grade {
  font-size: 10.5px !important;
  font-weight: 900 !important;
  width: 24px !important; height: 24px !important;
  border-radius: 6px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-family: 'Poppins', sans-serif !important;
}
.v2-grade-f { background: rgba(239,68,68,.12) !important; color: rgba(248,113,113,.7) !important; }
.v2-grade-d { background: rgba(251,146,60,.12) !important; color: rgba(251,146,60,.7) !important; }
.v2-grade-c { background: rgba(234,179,8,.12) !important; color: rgba(250,204,21,.7) !important; }
.v2-grade-q { background: rgba(255,255,255,.05) !important; color: rgba(255,255,255,.2) !important; }
.v2-br-bar {
  height: 3px !important;
  background: rgba(255,255,255,.05) !important;
  border-radius: 2px !important;
  overflow: hidden !important;
}
.v2-br-fill {
  height: 100% !important;
  width: var(--w) !important;
  border-radius: 2px !important;
  opacity: .5 !important;
}
.v2-bench-row-you {
  background: rgba(111,175,122,.04) !important;
  border-bottom: none !important;
}
.v2-br-score-q { color: rgba(255,255,255,.18) !important; }
.v2-br-cta {
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(111,175,122,.12) !important;
  border: 1px solid rgba(111,175,122,.22) !important;
  color: rgba(143,212,160,.85) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 6px 12px !important;
  border-radius: 7px !important;
  text-decoration: none !important;
  transition: background .2s !important;
}
.v2-br-cta:hover { background: rgba(111,175,122,.2) !important; }
.v2-br-dot { width: 6px !important; height: 6px !important; border-radius: 50% !important; flex-shrink: 0 !important; }

/* ─────────────────────────────────────────
   REVIEWS — compact corporate v123
───────────────────────────────────────── */
.v2-reviews {
  padding: 64px 0 !important;
  background: #FAFAF8 !important;
}
.lp-reviews-head { text-align: center !important; margin-bottom: 36px !important; }
.lp-reviews-h2 { font-size: clamp(22px, 2.6vw, 32px) !important; letter-spacing: -.8px !important; }

.lp-transform-inline {
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
  background: #fff !important;
  border: 1px solid rgba(28,28,28,.08) !important;
  border-radius: 100px !important;
  padding: 5px 14px !important;
  font-size: 12px !important; font-weight: 700 !important;
  margin-top: 14px !important;
  box-shadow: 0 1px 8px rgba(0,0,0,.04) !important;
}
.lp-ti-before { color: #ef4444 !important; font-family: 'Poppins', sans-serif !important; }
.lp-ti-before span { font-size: 9px !important; font-weight: 800 !important; opacity: .6 !important; }
.lp-ti-after { color: #3D8B6E !important; font-family: 'Poppins', sans-serif !important; }
.lp-ti-after span { font-size: 9px !important; font-weight: 800 !important; opacity: .6 !important; }
.lp-ti-label { font-size: 10px !important; color: rgba(28,28,28,.3) !important; font-weight: 600 !important; }

/* 3-col equal grid — no span-2 monster */
.v2-review-masonry {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
}
.v2-review-card {
  background: #fff !important;
  border: 1px solid rgba(28,28,28,.06) !important;
  border-radius: 14px !important;
  padding: 20px !important;
  display: flex !important; flex-direction: column !important; gap: 10px !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.03) !important;
  transition: transform .25s cubic-bezier(.22,.68,0,1.2), box-shadow .25s !important;
}
.v2-review-card:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(0,0,0,.07) !important; }
/* kill the span-2 on featured — make it same size as others */
.v2-rc-featured {
  grid-column: span 1 !important;
  background: #F6F1EB !important;
  border-color: rgba(28,28,28,.07) !important;
}
.v2-rc-featured blockquote { color: rgba(28,28,28,.68) !important; }
.v2-rc-featured .v2-rc-author strong { color: rgba(28,28,28,.88) !important; }
.v2-rc-featured .v2-rc-author span { color: rgba(28,28,28,.38) !important; }
.v2-rc-stars {
  font-size: 10px !important;
  color: #F59E0B !important;
  letter-spacing: .5px !important;
}
.v2-review-card blockquote {
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: rgba(28,28,28,.62) !important;
  font-style: normal !important;
  flex: 1 !important;
  margin: 0 !important;
}
.v2-rc-metric {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 10px !important;
  background: rgba(111,175,122,.07) !important;
  border: 1px solid rgba(111,175,122,.12) !important;
  border-radius: 7px !important;
  width: fit-content !important;
}
.v2-rc-before {
  font-size: 13px !important; font-weight: 900 !important;
  color: #ef4444 !important; font-family: 'Poppins', sans-serif !important;
}
.v2-rc-after {
  font-size: 13px !important; font-weight: 900 !important;
  color: #3D8B6E !important; font-family: 'Poppins', sans-serif !important;
}
.v2-rc-arrow { color: rgba(28,28,28,.2) !important; font-size: 11px !important; }
.v2-rc-tag {
  font-size: 9px !important; font-weight: 700 !important;
  color: rgba(28,28,28,.3) !important; letter-spacing: .03em !important;
}
.v2-rc-pill {
  display: inline-block !important;
  font-size: 9.5px !important; font-weight: 700 !important;
  background: rgba(28,28,28,.04) !important;
  border: 1px solid rgba(28,28,28,.08) !important;
  border-radius: 20px !important; padding: 3px 10px !important;
  color: rgba(28,28,28,.4) !important;
  width: fit-content !important;
}
.v2-rc-pill-green {
  background: rgba(111,175,122,.07) !important;
  border-color: rgba(111,175,122,.16) !important;
  color: #3D8B6E !important;
}
.v2-rc-author {
  display: flex !important; align-items: center !important; gap: 8px !important;
  margin-top: auto !important; padding-top: 4px !important;
  border-top: 1px solid rgba(28,28,28,.05) !important;
}
.v2-rc-author img {
  width: 26px !important; height: 26px !important;
  border-radius: 50% !important; object-fit: cover !important;
  background: rgba(28,28,28,.08) !important;
}
.v2-rc-author strong {
  display: block !important; font-size: 11.5px !important;
  font-weight: 700 !important; color: rgba(28,28,28,.82) !important;
}
.v2-rc-author span {
  font-size: 10px !important; color: rgba(28,28,28,.35) !important;
}
.v2-review-footer {
  display: flex !important; align-items: center !important;
  justify-content: center !important; gap: 8px !important;
  margin-top: 28px !important;
  font-size: 12px !important; color: rgba(28,28,28,.4) !important;
}
.v2-stars-row { color: #F59E0B !important; letter-spacing: 1px !important; font-size: 11px !important; }
.v2-inline-cta {
  color: rgba(28,28,28,.75) !important; font-weight: 700 !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(28,28,28,.18) !important;
  padding-bottom: 1px !important;
  transition: border-color .2s !important;
}
.v2-inline-cta:hover { border-color: rgba(28,28,28,.55) !important; }

/* ─────────────────────────────────────────
   PRICING — clean three-card grid
───────────────────────────────────────── */
.v2-pricing-section {
  padding: 88px 0 !important;
  background: #111110 !important;
  position: relative; overflow: hidden;
}
.v2-pricing-section::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 50% 60% at 50% 0%, rgba(111,175,122,.07) 0%, transparent 60%);
}
.v2-pricing-section .sec-kicker { color: rgba(255,255,255,.3) !important; }
.v2-pricing-section .sec-h2 {
  color: #fff !important;
  font-size: clamp(28px, 3.5vw, 44px) !important;
  letter-spacing: -1.5px !important;
}
.v2-pricing-section .v2-section-sub { color: rgba(255,255,255,.35) !important; }
.v2-pricing-section .v2-section-head { margin-bottom: 48px !important; }

.v2-price-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 14px !important;
}
.v2-price-card {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 20px !important;
  padding: 32px 28px !important;
  display: flex !important; flex-direction: column !important; gap: 16px !important;
  position: relative !important;
  transition: transform .3s cubic-bezier(.22,.68,0,1.2), box-shadow .3s !important;
}
.v2-price-card:hover { transform: translateY(-4px) !important; box-shadow: 0 20px 48px rgba(0,0,0,.35) !important; }
.v2-price-featured {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(111,175,122,.25) !important;
  box-shadow: 0 0 0 1px rgba(111,175,122,.12) !important;
}
.v2-pc-badge {
  position: absolute !important; top: -12px !important; left: 50% !important;
  transform: translateX(-50%) !important;
  background: #6FAF7A !important; color: #fff !important;
  font-size: 10px !important; font-weight: 800 !important;
  letter-spacing: .08em !important; text-transform: uppercase !important;
  border-radius: 20px !important; padding: 4px 12px !important;
}
.v2-pc-tier {
  font-size: 11px !important; font-weight: 800 !important;
  letter-spacing: .12em !important; text-transform: uppercase !important;
  color: rgba(255,255,255,.35) !important;
}
.v2-pc-price { display: flex !important; align-items: baseline !important; gap: 3px !important; }
.v2-pc-num {
  font-size: 48px !important; font-weight: 900 !important;
  color: #fff !important; letter-spacing: -2px !important;
  line-height: 1 !important; font-family: 'Poppins', sans-serif !important;
}
.v2-pc-mo { font-size: 14px !important; color: rgba(255,255,255,.3) !important; font-weight: 600 !important; }
.v2-pc-desc { font-size: 13px !important; color: rgba(255,255,255,.4) !important; margin: 0 !important; }
.v2-pc-list {
  list-style: none !important; display: flex !important;
  flex-direction: column !important; gap: 9px !important;
  padding: 0 !important; margin: 0 !important; flex: 1 !important;
}
.v2-pc-list li { font-size: 13px !important; display: flex !important; align-items: center !important; gap: 9px !important; }
.v2-pc-ok { color: rgba(255,255,255,.72) !important; }
.v2-pc-ok::before { content: '✓' !important; color: #6FAF7A !important; font-weight: 800 !important; flex-shrink: 0 !important; }
.v2-pc-no { color: rgba(255,255,255,.2) !important; }
.v2-pc-no::before { content: '—' !important; color: rgba(255,255,255,.15) !important; flex-shrink: 0 !important; }
.v2-pc-bold { font-weight: 800 !important; color: #fff !important; }
.v2-pc-btn-primary {
  display: block !important; text-align: center !important;
  background: #6FAF7A !important; color: #fff !important;
  padding: 13px !important; border-radius: 11px !important;
  font-size: 13.5px !important; font-weight: 800 !important;
  text-decoration: none !important; letter-spacing: -.1px !important;
  transition: background .2s, transform .2s !important;
}
.v2-pc-btn-primary:hover { background: #4a9c6a !important; transform: translateY(-1px) !important; }
.v2-pc-btn-outline {
  display: block !important; text-align: center !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.6) !important;
  padding: 13px !important; border-radius: 11px !important;
  font-size: 13.5px !important; font-weight: 800 !important;
  text-decoration: none !important;
  transition: border-color .2s, color .2s !important;
}
.v2-pc-btn-outline:hover { border-color: rgba(255,255,255,.3) !important; color: rgba(255,255,255,.85) !important; }
.v2-pc-note { font-size: 10.5px !important; color: rgba(255,255,255,.25) !important; text-align: center !important; }

.v2-price-trust {
  display: flex !important; align-items: center !important;
  justify-content: center !important; gap: 32px !important;
  margin-top: 48px !important; flex-wrap: wrap !important;
  padding-top: 36px !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
}
.v2-pt-item {
  display: flex !important; align-items: center !important; gap: 8px !important;
  font-size: 12.5px !important; font-weight: 700 !important;
  color: rgba(255,255,255,.4) !important;
}
.v2-pt-item svg { opacity: .7 !important; }

/* ─────────────────────────────────────────
   FINAL CTA — dark urgency block
───────────────────────────────────────── */
.v2-cta-section {
  padding: 100px 0 !important;
  background: #0C0C0B !important;
  position: relative !important; overflow: hidden !important;
}
.v2-cta-bg {
  position: absolute !important; inset: 0 !important; pointer-events: none !important;
  background:
    radial-gradient(ellipse 70% 80% at 5% 50%, rgba(111,175,122,.06) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 95% 60%, rgba(123,159,212,.05) 0%, transparent 60%) !important;
}
.v2-cta-inner {
  display: grid !important;
  grid-template-columns: 1fr 420px !important;
  gap: 64px !important; align-items: center !important;
  position: relative !important; z-index: 1 !important;
}
.v2-cta-kicker {
  font-size: 10px !important; font-weight: 800 !important;
  letter-spacing: .16em !important; text-transform: uppercase !important;
  color: rgba(111,175,122,.7) !important; margin-bottom: 16px !important;
}
.v2-cta-h2 {
  font-size: clamp(28px, 3.5vw, 44px) !important;
  font-weight: 900 !important; letter-spacing: -1.5px !important;
  color: #fff !important; line-height: 1.2 !important;
  margin: 0 0 16px !important;
}
.v2-cta-h2 em { font-style: italic !important; color: #8FD4A0 !important; }
.v2-cta-sub { font-size: 15px !important; color: rgba(255,255,255,.4) !important; line-height: 1.7 !important; margin: 0 0 28px !important; }
.v2-cta-sub strong { color: rgba(255,255,255,.7) !important; font-weight: 700 !important; }
.v2-cta-proof {
  display: flex !important; align-items: center !important; gap: 12px !important;
  flex-wrap: wrap !important;
  font-size: 12px !important; color: rgba(255,255,255,.4) !important;
}
.v2-cta-proof span:first-child { color: #F59E0B !important; letter-spacing: 1px !important; }
.v2-cta-live-dot {
  width: 6px !important; height: 6px !important; border-radius: 50% !important;
  background: #6FAF7A !important;
  box-shadow: 0 0 8px rgba(111,175,122,.6) !important;
  animation: live-pulse 2s ease-in-out infinite !important;
}
@keyframes live-pulse {
  0%,100% { box-shadow: 0 0 8px rgba(111,175,122,.6); }
  50%      { box-shadow: 0 0 16px rgba(111,175,122,.9); }
}
.v2-cta-live-txt { color: rgba(255,255,255,.5) !important; }

.v2-cta-card {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 20px !important;
  padding: 28px !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset !important;
}
.v2-cc-head {
  font-size: 15px !important; font-weight: 800 !important;
  color: #fff !important; margin-bottom: 16px !important; letter-spacing: -.2px !important;
}
.v2-cc-form { display: flex !important; flex-direction: column !important; gap: 10px !important; }
.v2-cc-field {
  display: flex !important; align-items: center !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 10px !important; overflow: hidden !important;
}
.v2-cc-prefix {
  padding: 0 12px !important; font-size: 12px !important;
  color: rgba(255,255,255,.25) !important; font-weight: 700 !important;
  border-right: 1px solid rgba(255,255,255,.08) !important; white-space: nowrap !important;
}
.v2-cc-field input {
  flex: 1 !important; background: transparent !important; border: none !important;
  padding: 13px 14px !important; font-size: 14px !important; color: #fff !important;
  outline: none !important;
}
.v2-cc-field input::placeholder { color: rgba(255,255,255,.2) !important; }
.v2-cc-btn {
  background: #6FAF7A !important; color: #fff !important;
  border: none !important; border-radius: 10px !important;
  padding: 14px !important; font-size: 14px !important; font-weight: 800 !important;
  cursor: pointer !important; width: 100% !important;
  transition: background .2s, transform .2s !important; letter-spacing: -.1px !important;
}
.v2-cc-btn:hover { background: #4a9c6a !important; transform: translateY(-1px) !important; }
.v2-cc-note { font-size: 11px !important; color: rgba(255,255,255,.25) !important; text-align: center !important; margin-top: 4px !important; }
.v2-cc-signals {
  display: flex !important; gap: 8px !important; flex-wrap: wrap !important;
  margin-top: 12px !important;
}
.v2-cc-signals span {
  font-size: 10px !important; font-weight: 700 !important;
  color: rgba(255,255,255,.3) !important;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 5px !important; padding: 3px 8px !important;
}

/* ─────────────────────────────────────────
   FOOTER — dark, editorial, clean
───────────────────────────────────────── */
.site-footer {
  background: #0C0C0B !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
  padding: 60px 0 40px !important;
}
.footer-inner {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr 1fr !important;
  gap: 48px !important; align-items: start !important;
}
.footer-brand { display: flex !important; flex-direction: column !important; gap: 12px !important; }
.nb-footer-brand {
  display: flex !important; align-items: center !important; gap: 9px !important;
  text-decoration: none !important;
}
.nb-footer-brand .nb-wordmark { font-size: 15px !important; font-weight: 900 !important; color: #fff !important; letter-spacing: -.3px !important; }
.footer-brand-sub {
  font-size: 12.5px !important; color: rgba(255,255,255,.3) !important;
  line-height: 1.65 !important; max-width: 280px !important;
}
.footer-col-label {
  font-size: 9.5px !important; font-weight: 800 !important;
  letter-spacing: .14em !important; text-transform: uppercase !important;
  color: rgba(255,255,255,.25) !important; margin-bottom: 14px !important;
}
.footer-col-links { display: flex !important; flex-direction: column !important; gap: 10px !important; }
.footer-col-links a, .site-footer a {
  font-size: 13px !important; font-weight: 600 !important;
  color: rgba(255,255,255,.45) !important;
  text-decoration: none !important; transition: color .2s !important;
}
.footer-col-links a:hover, .site-footer a:hover { color: rgba(255,255,255,.85) !important; }
.footer-copy {
  grid-column: 1 / -1 !important;
  font-size: 11.5px !important; color: rgba(255,255,255,.18) !important;
  padding-top: 32px !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
  margin-top: 8px !important;
}
.site-footer p { color: rgba(255,255,255,.18) !important; }

/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */
@media (max-width: 900px) {
  .stats-row { grid-template-columns: 1fr 1fr !important; }
  .stat-rule:nth-child(2n) { display: none !important; }
  .v2-review-masonry { grid-template-columns: 1fr !important; }
  .v2-rc-featured { grid-column: span 1 !important; }
  .v2-price-grid { grid-template-columns: 1fr !important; }
  .v2-cta-inner { grid-template-columns: 1fr !important; gap: 40px !important; }
  .footer-inner { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
  .footer-copy { grid-column: 1 / -1 !important; }
}
@media (max-width: 600px) {
  .stats-row { grid-template-columns: 1fr !important; }
  .stat-rule { display: none !important; }
  .lp-how-steps { flex-direction: column !important; }
  .lp-how-step { border-right: none !important; border-bottom: 1px solid rgba(28,28,28,.07) !important; }
  .footer-inner { grid-template-columns: 1fr !important; }
}

/* ── Deploy locked state (free users) ── */
.deploy-locked{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.deploy-locked-left{display:flex;align-items:center;gap:14px;flex:1;min-width:0}
.deploy-locked-icon{font-size:22px;flex-shrink:0;filter:grayscale(1);opacity:.5}
.btn-upgrade-dl{
  flex-shrink:0;background:linear-gradient(135deg,#7C6FA0,#9b8ec4);color:#fff;
  border:none;border-radius:11px;padding:11px 20px;font-size:13px;font-weight:700;
  cursor:pointer;font-family:inherit;text-decoration:none;transition:all .18s;
  box-shadow:0 3px 14px rgba(124,111,160,.3);letter-spacing:-.01em;white-space:nowrap;
}
.btn-upgrade-dl:hover{box-shadow:0 5px 22px rgba(124,111,160,.45);transform:translateY(-1px)}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — complete overhaul (all breakpoints)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hamburger button ─────────────────────────────────────────────────────── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: 8px;
  border-radius: 8px;
  transition: background .15s;
}
.nav-hamburger:hover { background: rgba(0,0,0,.06); }
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #111;
  border-radius: 2px;
  transition: transform .25s, opacity .25s;
  transform-origin: center;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile nav drawer ────────────────────────────────────────────────────── */
.nav-drawer {
  display: none;
  position: fixed;
  top: 0; right: 0;
  width: min(320px, 100vw);
  height: 100%;
  background: rgba(250,246,241,.99);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-left: 1px solid rgba(28,28,28,.1);
  z-index: 500;
  padding: 80px 28px 40px;
  flex-direction: column;
  gap: 4px;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  box-shadow: -8px 0 40px rgba(0,0,0,.12);
}
.nav-drawer.open { transform: translateX(0); }
.nav-drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 499;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.nav-drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.nav-drawer-link {
  font-size: 17px;
  font-weight: 600;
  color: rgba(0,0,0,.7);
  letter-spacing: -.02em;
  padding: 14px 4px;
  border-bottom: 1px solid rgba(28,28,28,.07);
  text-decoration: none;
  transition: color .15s;
}
.nav-drawer-link:hover { color: #111; }
.nav-drawer-cta {
  margin-top: 16px;
  background: #111;
  color: #fff !important;
  border-radius: 999px;
  padding: 14px 24px;
  text-align: center;
  border-bottom: none;
  font-size: 15px;
}

/* ── Container padding on mobile ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .container { padding: 0 18px; }
}
@media (max-width: 390px) {
  .container { padding: 0 14px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   MAX-WIDTH: 768px  — tablets + large phones
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Nav */
  .nav-hamburger { display: flex !important; visibility: visible !important; opacity: 1 !important; z-index: 70 !important; }
  .nav-links { display: none !important; }
  .nav-drawer { display: flex; }
  .nav-drawer-backdrop { display: block; }
  .btn-nav { display: none !important; }
  .btn-nav-dashboard { display: inline-flex !important; padding: 8px 14px !important; font-size: 13px !important; }
  .nav-right { display: flex !important; align-items: center !important; }

  /* Hero */
  .hero { padding: 48px 0 40px; }
  .hero-split { grid-template-columns: 1fr; gap: 32px; }
  .hero-left { text-align: center; }
  .hero h1 { font-size: clamp(34px, 9vw, 52px); letter-spacing: -2px; }
  .hero-lead { font-size: 15px; max-width: 100%; }
  .hero-badges { justify-content: center; }
  .hero-cta-row { justify-content: center; flex-wrap: wrap; gap: 10px; }

  /* Analyzer card in hero */
  .analyzer-card { border-radius: 16px; }
  .analyzer-card .url-row { flex-direction: column; gap: 10px; }
  .analyzer-card .url-input-wrap { width: 100%; }
  .analyzer-card .btn-analyze { width: 100%; justify-content: center; height: 48px; }

  /* Features sticky layout */
  .v2-feat-layout { grid-template-columns: 1fr; gap: 32px; }
  .v2-feat-preview { position: static !important; top: auto; }
  .v2-feat-list { gap: 8px; }

  /* Pricing cards */
  .v2-price-grid { grid-template-columns: 1fr; gap: 16px; max-width: 420px; margin: 0 auto; }
  .v2-price-featured { transform: none !important; }

  /* CTA section */
  .v2-cta-inner { grid-template-columns: 1fr; gap: 32px; text-align: center; }
  .v2-cta-form { max-width: 100%; }

  /* Footer */
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
  .footer-col { text-align: left; }

  /* Shot section */
  .shot-stage { padding: 0 16px 40px; }
  .shot-callouts { display: none; }
  .shot-body { grid-template-columns: 1fr !important; min-height: auto; }
  .shot-sidebar-left, .shot-sidebar-right { display: none; }
  .shot-main { padding: 16px; }

  /* Benchmarks — replace tiny text with readable cards */
  .v2-bench-board { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .v2-bench-row { min-width: 540px; }
  .v2-bench-row-head { font-size: 11px !important; }
  .v2-br-label { font-size: 11px !important; }

  /* Reviews masonry — single column */
  .v2-review-masonry { grid-template-columns: 1fr !important; gap: 12px; }
  .v2-rc-featured { grid-row: auto !important; grid-column: auto !important; }

  /* How section */
  .lp-how-steps { flex-direction: column; }
  .lp-how-step { border-right: none; border-bottom: 1px solid rgba(28,28,28,.07); padding: 20px 0; }
  .lp-how-step:last-child { border-bottom: none; }

  /* Stats row */
  .stats-row { grid-template-columns: 1fr 1fr; gap: 16px; }
  .stat-rule { display: none; }

  /* AI windows section */
  .ai-windows { grid-template-columns: 1fr; }

  /* General section padding reduction */
  section { padding-top: 56px !important; padding-bottom: 56px !important; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   MAX-WIDTH: 600px  — phones
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  /* Hero */
  .hero h1 { font-size: clamp(30px, 9vw, 44px); letter-spacing: -1.5px; }
  .hero-lead { font-size: 14px; }

  /* Stats: single column on very small */
  .stats-row { grid-template-columns: 1fr; }

  /* Pricing: full width */
  .v2-price-grid { max-width: 100%; }

  /* Bench: scrollable, bump font floor */
  .v2-bench-row-head { font-size: 10px !important; }

  /* Reviews */
  .v2-review-masonry { grid-template-columns: 1fr !important; }

  /* Section headings */
  .v2-section-label { font-size: 10px; }
  .v2-section-title { font-size: clamp(22px, 6vw, 32px); }

  /* Footer */
  .footer-inner { grid-template-columns: 1fr !important; }

  /* Shot section */
  .shot-section-title { font-size: clamp(22px, 6vw, 30px); }

  /* Feature items */
  .v2-feat-item { padding: 16px; }
  .v2-feat-item-title { font-size: 14px; }
  .v2-feat-item-desc { font-size: 13px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   MAX-WIDTH: 390px  — small phones (iPhone SE etc.)
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 390px) {
  .hero h1 { font-size: clamp(28px, 9vw, 38px); }
  .hero-lead { font-size: 13.5px; }
  .btn-nav { padding: 9px 16px; font-size: 12px; }
  .v2-section-title { font-size: clamp(20px, 7vw, 28px); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ANALYZER CARD — mobile redesign (overrides all previous conflicting rules)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Card shell */
  .hero-right { max-width: 100% !important; width: 100% !important; }
  .analyzer-card {
    border-radius: 20px !important;
    margin-bottom: 0 !important;
    box-shadow: 0 12px 40px rgba(0,0,0,.13), 0 2px 8px rgba(0,0,0,.07) !important;
  }
  .card-topbar {
    padding: 10px 14px !important;
    border-radius: 20px 20px 0 0 !important;
  }
  .topbar-engines { display: none !important; }
  .card-body { padding: 16px 16px 18px !important; }

  /* Kill animated border — pointer-events none so it never steals taps */
  .url-field-wrap {
    border-radius: 16px !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
    animation: none !important;
    background: rgba(196,154,138,.35) !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }
  /* Inner field: column layout, pointer-events back on */
  .url-field {
    pointer-events: auto !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    border-radius: 15px !important;
    padding: 14px !important;
    gap: 10px !important;
    align-items: stretch !important;
    overflow: visible !important;
    background: #1C1C1C !important;
    position: relative !important;
    z-index: 1 !important;
  }
  /* Hide proto+divider, plain text input */
  .url-proto-row { display: flex !important; align-items: center !important; }
  .url-proto { display: none !important; }
  .url-divider { display: none !important; }
  .url-field input {
    flex: none !important;
    height: 50px !important;
    padding: 0 16px !important;
    font-size: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: rgba(255,255,255,.08) !important;
    border: 1.5px solid rgba(255,255,255,.15) !important;
    border-radius: 10px !important;
    color: #fff !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 2 !important;
    touch-action: manipulation !important;
  }
  /* Analyze button: full-width, white on dark, guaranteed tappable */
  #analyze-btn {
    width: 100% !important;
    border-radius: 10px !important;
    justify-content: center !important;
    padding: 0 20px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    margin-top: 0 !important;
    height: 54px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    letter-spacing: -.2px !important;
    background: #fff !important;
    color: #111 !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 2 !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
  }
  /* Card hint */
  .card-hint {
    font-size: 11px !important;
    margin-top: 10px !important;
    line-height: 1.5 !important;
  }
  /* Loading state */
  .loading-state { padding: 14px 14px 12px !important; border-radius: 14px !important; }
  .step { font-size: 12.5px !important; }
  .step-meta { display: none !important; }
  .llm-live { font-size: 10.5px !important; padding: 6px 10px !important; }

  /* Results card */
  .results-section { padding: 20px 0 32px !important; }
  .results-card {
    border-radius: 20px !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  .res-header {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 16px !important;
    padding: 28px 20px 20px !important;
    overflow: visible !important;
  }
  .res-meta { width: 100% !important; text-align: center !important; }
  .res-row1 { justify-content: center !important; flex-wrap: wrap !important; gap: 6px !important; }
  .grade-chip { display: none !important; }
  .res-domain { font-size: 20px !important; }
  .res-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .res-actions > * { text-align: center !important; justify-content: center !important; }

  /* Score + breakdown row */
  .results-main {
    flex-direction: column !important;
    gap: 16px !important;
    padding: 0 18px 18px !important;
  }
  .score-ring-wrap {
    align-self: center !important;
  }
  .breakdown-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }

  /* Tabs */
  .tabs-row {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    padding: 12px 18px 0 !important;
    scrollbar-width: none !important;
  }
  .tabs-row::-webkit-scrollbar { display: none !important; }
  .tab-btn { white-space: nowrap !important; font-size: 12.5px !important; padding: 7px 14px !important; }

  /* Tab content */
  .tab-content { padding: 16px 18px 20px !important; }

  /* Issues */
  .issue-card { padding: 14px 16px !important; border-radius: 14px !important; }
  .issue-title { font-size: 14px !important; }
  .issue-desc { font-size: 13px !important; }

  /* Deploy panel */
  .deploy-panel {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 16px 18px !important;
    border-radius: 0 0 20px 20px !important;
  }
  .deploy-panel-left { flex-direction: row !important; align-items: center !important; }
  .deploy-ready-actions { width: 100% !important; }
  .deploy-ready-actions > * { width: 100% !important; text-align: center !important; justify-content: center !important; }
}

@media (max-width: 480px) {
  .breakdown-grid { grid-template-columns: 1fr !important; }
  .score-ring-wrap { width: 88px !important; height: 88px !important; }
  .score-num { font-size: 26px !important; }
}

/* url-proto-row: flex on all viewports */
.url-proto-row {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  gap: 0;
}
.url-proto-row input {
  flex: 1;
  min-width: 0;
}

/* Tab class alias fix — .tab and .tab-btn both used */
@media (max-width: 768px) {
  .tabs-row {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
    padding-bottom: 0 !important;
  }
  .tabs-row::-webkit-scrollbar { display: none !important; }
  .tab, .tab-btn {
    white-space: nowrap !important;
    font-size: 13px !important;
    padding: 8px 14px !important;
    flex-shrink: 0 !important;
  }

  /* res-header 3-col → single column on mobile */
  .res-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 14px !important;
    padding: 20px 18px 16px !important;
  }
  .res-meta { width: 100% !important; }
  .breakdown-grid { grid-template-columns: 1fr 1fr !important; }
  .res-actions {
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .btn-pro-cta { justify-content: center !important; text-align: center !important; }
  .download-hint { text-align: center !important; }

  /* Tab body padding */
  .tab-body { padding: 0 14px 16px !important; }

  /* Deploy panel stacks on mobile */
  .deploy-panel {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 16px 18px !important;
  }
  .deploy-file-pills { gap: 6px !important; }
  .deploy-pill { font-size: 11px !important; padding: 4px 10px !important; }
  .deploy-ready-actions, .deploy-install-btn, .deploy-download-btn {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

@media (max-width: 480px) {
  .breakdown-grid { grid-template-columns: 1fr !important; }
  .res-domain { font-size: 18px !important; }
  .res-summary { font-size: 13px !important; }
}

/* ══════════════════════════════════════════════════════
   PLAYBOOK PREVIEW — v143 (Apple-quality illustrated)
══════════════════════════════════════════════════════ */

.playbook-preview-section {
  padding: 104px 0 96px;
  background: #F5F5F7;
  border-top: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.ppv-head { text-align: center; margin-bottom: 64px; }
.ppv-h2 { margin-bottom: 14px; }
.ppv-sub {
  color: rgba(0,0,0,.45); font-size: 16px;
  max-width: 540px; margin: 0 auto; line-height: 1.7;
}

/* ── 2-col grid ── */
.ppv-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
}

/* ── Card shell ── */
.ppv-card {
  background: #FFFFFF;
  border-radius: 20px;
  border: 1px solid rgba(0,0,0,.07);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 24px rgba(0,0,0,.06);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .35s cubic-bezier(.22,.68,0,1.2), box-shadow .35s ease;
}
.ppv-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 24px 64px rgba(0,0,0,.10);
}

/* ── Illustration zone — tall, generous ── */
.ppv-card-illo {
  height: 220px;
  display: flex; align-items: stretch; justify-content: stretch;
  border-bottom: 1px solid rgba(0,0,0,.06);
  overflow: hidden; position: relative;
}
.ppv-illo-crawlers { background: linear-gradient(160deg, #FFF1F2 0%, #FFF5F5 50%, #FEF9FF 100%); }
.ppv-illo-llms     { background: linear-gradient(160deg, #F0FDF4 0%, #ECFDF5 50%, #F0FDFA 100%); }
.ppv-illo-schema   { background: linear-gradient(160deg, #EFF6FF 0%, #F0F4FF 50%, #EEF2FF 100%); }
.ppv-illo-meta     { background: linear-gradient(160deg, #FFFBEB 0%, #FEFCE8 50%, #FFF7ED 100%); }

/* SVG fills the illustration zone fully */
.ppv-illo-svg {
  width: 100%; height: 100%;
  display: block;
}

/* ── Card text body ── */
.ppv-card-body {
  padding: 24px 26px 26px;
  display: flex; flex-direction: column; gap: 10px; flex: 1;
}
.ppv-tag {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 6px; align-self: flex-start;
}
.ppv-tag-red  { color: #B91C1C; background: rgba(185,28,28,.07); border: 1px solid rgba(185,28,28,.14); }
.ppv-tag-blue { color: #1D4ED8; background: rgba(29,78,216,.07); border: 1px solid rgba(29,78,216,.14); }
.ppv-tag-amber{ color: #92400E; background: rgba(146,64,14,.07);  border: 1px solid rgba(146,64,14,.14); }
.ppv-card-title {
  font-size: 15.5px; font-weight: 700; color: #0D0D0E;
  line-height: 1.3; letter-spacing: -.025em; margin: 0;
}
.ppv-card-desc {
  font-size: 13.5px; color: rgba(0,0,0,.46); line-height: 1.7; margin: 0;
}
.ppv-fix-row {
  display: flex; align-items: baseline; gap: 7px;
  margin-top: 4px; padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,.06);
}
.ppv-fix-label {
  font-size: 10px; font-weight: 800; color: #18A25A;
  letter-spacing: .06em; text-transform: uppercase; flex-shrink: 0;
}
.ppv-fix-text {
  font-size: 12.5px; color: rgba(0,0,0,.48); line-height: 1.5;
}

/* ── Footer below grid ── */
.ppv-footer {
  display: flex; align-items: center; justify-content: center;
  gap: 20px; margin-top: 48px; flex-wrap: wrap;
}
.ppv-count {
  font-size: 13px; color: rgba(0,0,0,.38); font-weight: 500;
  background: rgba(0,0,0,.04); border: 1px solid rgba(0,0,0,.08);
  border-radius: 20px; padding: 7px 16px;
}
.ppv-cta {
  font-size: 14px; font-weight: 700; color: var(--accent2);
  text-decoration: none; display: inline-flex; align-items: center;
  gap: 6px; transition: color .15s;
}
.ppv-cta:hover { color: #1a6635; }

@media (max-width: 960px) {
  .ppv-grid { grid-template-columns: 1fr; }
  .ppv-card-illo { height: 200px; }
}
@media (max-width: 600px) {
  .playbook-preview-section { padding: 72px 0 64px; }
  .ppv-head { margin-bottom: 44px; }
  .ppv-card-illo { height: 180px; }
  .ppv-card-body { padding: 20px 20px 22px; }
}

/* ── Live count skeleton ─────────────────────────────────────────────────── */
@keyframes skel-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

.count-skel {
  display: inline-block;
  width: 3.2em;
  height: 0.85em;
  border-radius: 4px;
  vertical-align: middle;
  background: linear-gradient(90deg,
    rgba(28,28,28,.08) 25%,
    rgba(28,28,28,.16) 50%,
    rgba(28,28,28,.08) 75%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s ease-in-out infinite;
}

.count-skel-wide {
  width: 4em;
}

/* Dark contexts (CTA section) */
.v2-cta-section .count-skel,
.v2-cta-proof .count-skel {
  background: linear-gradient(90deg,
    rgba(255,255,255,.12) 25%,
    rgba(255,255,255,.22) 50%,
    rgba(255,255,255,.12) 75%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s ease-in-out infinite;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SHOT-SECTION HIDDEN
───────────────────────────────────────────────────────────────────────────── */
.shot-section-hidden { display: none !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   NB-LOGOS-STRIP — v144
   Minimal trust bar: eyebrow + SVG wordmarks on warm beige background
───────────────────────────────────────────────────────────────────────────── */
.nb-logos-strip {
  background: var(--bg);
  border-top: 1px solid var(--b0);
  border-bottom: 1px solid var(--b0);
  padding: 28px 0;
}

.nb-logos-eyebrow {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--muted2);
  margin: 0 0 18px;
}

.nb-logos-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}

.nb-logo-svg {
  opacity: .45;
  transition: opacity .2s;
}
.nb-logo-svg:hover { opacity: .75; }

@media (max-width: 600px) {
  .nb-logos-row { gap: 28px; }
  .nb-logo-svg { transform: scale(.88); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   NB-BENCH-SECTION — v144
   Industry benchmarks leaderboard with FOMO "Your site" row
───────────────────────────────────────────────────────────────────────────── */
.nb-bench-section {
  background: #FFFFFF;
  padding: 96px 0 104px;
}

.nb-bench-head {
  text-align: center;
  margin-bottom: 56px;
}
.nb-bench-head .sec-kicker { margin-bottom: 12px; }
.nb-bench-head h2 {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.12;
  color: var(--text);
  margin: 0 0 16px;
}
.nb-bench-head p {
  font-size: 17px;
  color: var(--muted);
  max-width: 500px;
  margin: 0 auto;
}

.nb-bench-stats {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  max-width: 480px;
  margin: 0 auto 52px;
  background: #F5F5F7;
  border-radius: 20px;
  overflow: hidden;
}
.nb-bench-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 24px;
  gap: 6px;
}
.nb-bench-stat + .nb-bench-stat {
  border-left: 1px solid rgba(0,0,0,.07);
}
.nb-bench-num {
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--text);
  line-height: 1;
}
.nb-bench-label {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  max-width: 110px;
  line-height: 1.4;
}
.nb-bench-divider { display: none; }

.nb-bench-board {
  max-width: 680px;
  margin: 0 auto;
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 8px 32px rgba(0,0,0,.05);
}

.nb-bench-row {
  display: grid;
  grid-template-columns: 1fr 90px 52px 1fr;
  align-items: center;
  gap: 0;
  padding: 13px 24px;
  border-bottom: 1px solid rgba(0,0,0,.05);
  font-size: 14px;
}
.nb-bench-row:last-child { border-bottom: none; }

.nb-bench-head-row {
  background: #F5F5F7;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted2);
  padding: 10px 24px;
}

.nb-br-industry {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 500;
  color: var(--text);
}
.nb-br-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.nb-br-score {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.nb-br-grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}
.nb-grade-f { background: rgba(239,68,68,.1); color: #DC2626; }
.nb-grade-d { background: rgba(249,115,22,.1); color: #EA580C; }
.nb-grade-c { background: rgba(234,179,8,.1); color: #CA8A04; }
.nb-grade-b { background: rgba(34,197,94,.1); color: #16A34A; }
.nb-grade-a { background: rgba(16,163,127,.1); color: #0D9488; }

.nb-br-bar {
  height: 6px;
  background: rgba(0,0,0,.06);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
}
.nb-br-fill {
  height: 100%;
  width: var(--w, 0%);
  background: var(--c, #6FAF7A);
  border-radius: 99px;
  transition: width .8s cubic-bezier(.22,1,.36,1);
}

/* "Your site" row */
.nb-bench-you-row {
  background: linear-gradient(90deg, rgba(111,175,122,.04) 0%, rgba(111,175,122,.01) 100%);
  border-top: 1px solid rgba(111,175,122,.18) !important;
}
.nb-bench-you-row .nb-br-industry { font-weight: 700; }
.nb-bench-you-row .nb-br-dot {
  width: 9px; height: 9px;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(111,175,122,.25);
  animation: pulse-dot 2s ease-in-out infinite;
}
.nb-bench-score-q,
.nb-br-score-q {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.nb-bench-grade-q,
.nb-grade-q {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(0,0,0,.05);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.nb-br-dot-pulse {
  width: 9px; height: 9px;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(111,175,122,.25);
  animation: pulse-dot 2s ease-in-out infinite;
}
.nb-bench-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
  transition: gap .18s;
}
.nb-bench-cta:hover { gap: 9px; }

@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 3px rgba(111,175,122,.25); }
  50%       { box-shadow: 0 0 0 6px rgba(111,175,122,.10); }
}

@media (max-width: 640px) {
  .nb-bench-section { padding: 64px 0 72px; }
  .nb-bench-row { grid-template-columns: 1fr 70px 40px 1fr; padding: 11px 16px; font-size: 13px; }
  .nb-bench-head-row { padding: 8px 16px; }
  .nb-bench-num { font-size: 34px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   NB-HOW-SECTION — v144
   3-step "How it works" with numbered steps + connecting lines
───────────────────────────────────────────────────────────────────────────── */
.nb-how-section {
  background: var(--bg);
  padding: 96px 0 104px;
}

.nb-how-head {
  text-align: center;
  margin-bottom: 64px;
}
.nb-how-head .sec-kicker { margin-bottom: 12px; }
.nb-how-head h2 {
  font-size: clamp(26px, 3.5vw, 40px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.14;
  color: var(--text);
  margin: 0;
}

.nb-how-steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  max-width: 860px;
  margin: 0 auto;
}

.nb-how-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 24px;
}

.nb-step-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.nb-step-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: #FFFFFF;
  border: 1px solid var(--b1);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  margin-bottom: 20px;
  transition: transform .2s, box-shadow .2s;
}
.nb-how-step:hover .nb-step-icon {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.09);
}

.nb-how-step h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 8px;
  letter-spacing: -.01em;
}
.nb-how-step p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

.nb-step-connector {
  flex-shrink: 0;
  width: 48px;
  display: flex;
  align-items: center;
  padding-top: 42px;
  color: var(--muted2);
}
.nb-step-connector svg { width: 100%; }

.nb-how-cta {
  text-align: center;
  margin-top: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.nb-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--text);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  padding: 14px 28px;
  border-radius: 14px;
  text-decoration: none;
  transition: background .18s, transform .18s, box-shadow .18s;
  box-shadow: 0 2px 8px rgba(0,0,0,.12), 0 6px 20px rgba(0,0,0,.08);
}
.nb-cta-btn:hover {
  background: #333;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.15), 0 10px 28px rgba(0,0,0,.10);
}

.nb-cta-note {
  font-size: 12px;
  color: var(--muted2);
  letter-spacing: .01em;
}

@media (max-width: 700px) {
  .nb-how-section { padding: 64px 0 72px; }
  .nb-how-steps {
    flex-direction: column;
    align-items: center;
    gap: 32px;
    max-width: 360px;
    margin: 0 auto;
  }
  .nb-step-connector {
    width: 2px;
    height: 32px;
    padding-top: 0;
    justify-content: center;
  }
  .nb-step-connector svg { display: none; }
  .nb-step-connector::after {
    content: '';
    display: block;
    width: 1px;
    height: 32px;
    background: var(--b2);
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   NB-REVIEWS — v144 (Apple-level social proof)
   Dark-background testimonial section with metric callouts
───────────────────────────────────────────────────────────────────────────── */
.nb-reviews-section {
  background: #111111;
  padding: 96px 0 104px;
}

.nb-reviews-head {
  text-align: center;
  margin-bottom: 64px;
}
.nb-reviews-head .sec-kicker {
  color: rgba(255,255,255,.45);
  letter-spacing: .12em;
}
.nb-reviews-head h2 {
  font-size: clamp(26px, 3.8vw, 44px);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.1;
  color: #FFFFFF;
  margin: 0 0 16px;
}
.nb-reviews-transform {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 99px;
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}
.nb-rt-before { color: rgba(255,255,255,.45); font-size: 14px; }
.nb-rt-after { color: #6FAF7A; }
.nb-rt-label { font-size: 12px; color: rgba(255,255,255,.4); font-weight: 500; }

.nb-review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1080px;
  margin: 0 auto;
}

/* Featured card spans 2 rows */
.nb-review-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: background .2s, border-color .2s;
}
.nb-review-card:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.12);
}
.nb-review-card-featured {
  grid-row: span 2;
  background: rgba(111,175,122,.08);
  border-color: rgba(111,175,122,.2);
}
.nb-review-card-featured:hover {
  background: rgba(111,175,122,.12);
  border-color: rgba(111,175,122,.28);
}

.nb-rc-stars { color: #F5C842; font-size: 13px; letter-spacing: 2px; }
.nb-rc-quote {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255,255,255,.80);
  margin: 0;
  font-style: italic;
}
.nb-review-card-featured .nb-rc-quote {
  font-size: 17px;
  color: rgba(255,255,255,.90);
}

.nb-rc-metric {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(111,175,122,.12);
  border: 1px solid rgba(111,175,122,.2);
  border-radius: 12px;
  padding: 10px 16px;
  align-self: flex-start;
}
.nb-rc-before { font-size: 20px; font-weight: 800; color: rgba(255,255,255,.35); }
.nb-rc-arrow { color: rgba(255,255,255,.3); font-size: 14px; }
.nb-rc-after { font-size: 24px; font-weight: 800; color: #6FAF7A; }
.nb-rc-tag { font-size: 11px; color: rgba(111,175,122,.7); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }

.nb-rc-pill {
  display: inline-flex;
  align-self: flex-start;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 99px;
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.10);
}
.nb-rc-pill-green {
  background: rgba(111,175,122,.12);
  color: rgba(111,175,122,.9);
  border-color: rgba(111,175,122,.2);
}

.nb-rc-author {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: auto;
  padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.nb-rc-author img {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255,255,255,.1);
}
.nb-rc-author strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #FFFFFF;
}
.nb-rc-author span {
  font-size: 12px;
  color: rgba(255,255,255,.4);
}

.nb-reviews-footer {
  text-align: center;
  margin-top: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 14px;
  color: rgba(255,255,255,.45);
}
.nb-reviews-footer strong { color: rgba(255,255,255,.80); }
.nb-reviews-footer-cta {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  transition: opacity .18s;
}
.nb-reviews-footer-cta:hover { opacity: .75; }

@media (max-width: 900px) {
  .nb-review-grid { grid-template-columns: 1fr 1fr; }
  .nb-review-card-featured { grid-row: span 1; }
}
@media (max-width: 560px) {
  .nb-reviews-section { padding: 64px 0 72px; }
  .nb-review-grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   NB-PRICING — v144 (Apple-level pricing)
   Clean 3-card grid on white background with featured glow
───────────────────────────────────────────────────────────────────────────── */
.nb-pricing-section {
  background: #F5F5F7;
  padding: 96px 0 104px;
}

.nb-pricing-head {
  text-align: center;
  margin-bottom: 56px;
}
.nb-pricing-head .sec-kicker { margin-bottom: 12px; }
.nb-pricing-head h2 {
  font-size: clamp(26px, 3.8vw, 44px);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.1;
  color: var(--text);
  margin: 0 0 12px;
}
.nb-pricing-head p {
  font-size: 16px;
  color: var(--muted);
  max-width: 440px;
  margin: 0 auto;
}

.nb-price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 940px;
  margin: 0 auto 48px;
  align-items: start;
}

.nb-price-card {
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 24px;
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.05);
  position: relative;
  transition: transform .2s, box-shadow .2s;
}
.nb-price-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 12px 40px rgba(0,0,0,.08);
}
.nb-price-card-featured {
  background: #111111;
  border-color: transparent;
  box-shadow: 0 2px 4px rgba(0,0,0,.12), 0 16px 48px rgba(0,0,0,.20), 0 0 0 1px rgba(255,255,255,.06) inset;
  transform: scale(1.03);
}
.nb-price-card-featured:hover {
  transform: scale(1.03) translateY(-2px);
}

.nb-pc-badge {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 0 0 10px 10px;
}

.nb-pc-tier {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-bottom: 16px;
}
.nb-price-card-featured .nb-pc-tier { color: rgba(255,255,255,.5); }

.nb-pc-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 8px;
}
.nb-pc-num {
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--text);
  line-height: 1;
}
.nb-price-card-featured .nb-pc-num { color: #FFFFFF; }
.nb-pc-mo {
  font-size: 16px;
  font-weight: 500;
  color: var(--muted);
}
.nb-price-card-featured .nb-pc-mo { color: rgba(255,255,255,.45); }

.nb-pc-desc {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 24px;
  line-height: 1.5;
}
.nb-price-card-featured .nb-pc-desc { color: rgba(255,255,255,.55); }

.nb-pc-divider {
  border: none;
  border-top: 1px solid rgba(0,0,0,.07);
  margin: 0 0 20px;
}
.nb-price-card-featured .nb-pc-divider { border-top-color: rgba(255,255,255,.09); }

.nb-pc-list {
  list-style: none;
  padding: 0; margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.nb-pc-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text);
}
.nb-price-card-featured .nb-pc-list li { color: rgba(255,255,255,.8); }
.nb-pc-list li::before {
  content: '';
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(111,175,122,.12);
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4l3 3 5-6' stroke='%236FAF7A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}
.nb-pc-no { opacity: .35; }
.nb-pc-no::before {
  background-image: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l6 6M7 1L1 7' stroke='%236F6F6F' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-color: rgba(0,0,0,.06);
}
.nb-pc-bold { font-weight: 600; }

.nb-pc-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  padding: 14px 24px;
  border-radius: 14px;
  text-decoration: none;
  transition: background .18s, transform .18s;
  margin-top: auto;
  text-align: center;
}
.nb-pc-btn-primary:hover { background: var(--accent-light); transform: translateY(-1px); }

.nb-pc-btn-outline {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--b2);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  padding: 13px 24px;
  border-radius: 14px;
  text-decoration: none;
  transition: background .18s, border-color .18s, transform .18s;
  margin-top: auto;
  text-align: center;
}
.nb-pc-btn-outline:hover {
  background: var(--bg);
  border-color: var(--b3);
  transform: translateY(-1px);
}
.nb-price-card-featured .nb-pc-btn-outline {
  color: rgba(255,255,255,.7);
  border-color: rgba(255,255,255,.15);
}
.nb-price-card-featured .nb-pc-btn-outline:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.25);
}

.nb-pc-note {
  font-size: 11px;
  color: var(--muted2);
  text-align: center;
  margin-top: 10px;
}
.nb-price-card-featured .nb-pc-note { color: rgba(255,255,255,.3); }

.nb-price-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 28px;
  max-width: 600px;
  margin: 0 auto;
}
.nb-pt-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}
.nb-pt-item svg { flex-shrink: 0; }

@media (max-width: 860px) {
  .nb-price-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
  }
  .nb-price-card-featured { transform: none; }
  .nb-price-card-featured:hover { transform: translateY(-2px); }
}
@media (max-width: 500px) {
  .nb-pricing-section { padding: 64px 0 72px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   NB-CTA-SECTION — v144 (Apple-level final CTA)
   Full-bleed dark urgency block with inline form card
───────────────────────────────────────────────────────────────────────────── */
.nb-cta-section {
  background: #0A0A0A;
  padding: 96px 0 104px;
  position: relative;
  overflow: hidden;
}
/* Subtle radial glow behind */
.nb-cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(111,175,122,.08) 0%, transparent 70%);
  pointer-events: none;
}

.nb-cta-inner {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 80px;
  align-items: center;
  position: relative;
}

.nb-cta-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.nb-cta-h2 {
  font-size: clamp(26px, 3.5vw, 42px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: #FFFFFF;
  margin: 0 0 16px;
}
.nb-cta-h2 em {
  font-style: normal;
  color: var(--accent);
}
.nb-cta-sub {
  font-size: 16px;
  color: rgba(255,255,255,.50);
  line-height: 1.6;
  margin: 0 0 28px;
  max-width: 420px;
}
.nb-cta-sub strong { color: rgba(255,255,255,.75); font-weight: 600; }

.nb-cta-proof {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(255,255,255,.4);
  flex-wrap: wrap;
}
.nb-cta-proof strong { color: rgba(255,255,255,.70); }
.nb-cta-live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4CAF76;
  box-shadow: 0 0 0 3px rgba(76,175,118,.2);
  animation: pulse-dot 2s ease-in-out infinite;
}
.nb-cta-live-txt { color: rgba(255,255,255,.5); font-weight: 500; }

/* Right: form card */
.nb-cta-card {
  background: #FFFFFF;
  border-radius: 24px;
  padding: 32px 28px;
  box-shadow: 0 4px 8px rgba(0,0,0,.16), 0 24px 80px rgba(0,0,0,.30);
}
.nb-cc-head {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.01em;
  margin-bottom: 20px;
}
.nb-cc-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.nb-cc-field {
  display: flex;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--b1);
  border-radius: 12px;
  overflow: hidden;
  padding: 0 14px;
  transition: border-color .18s, box-shadow .18s;
}
.nb-cc-field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(111,175,122,.15);
}
.nb-cc-prefix {
  font-size: 14px;
  color: var(--muted2);
  flex-shrink: 0;
  user-select: none;
}
.nb-cc-field input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 13px 8px;
  font-size: 15px;
  font-family: inherit;
  color: var(--text);
  outline: none;
}
.nb-cc-btn {
  width: 100%;
  background: var(--text);
  color: #FFFFFF;
  border: none;
  border-radius: 12px;
  padding: 14px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  font-family: inherit;
  cursor: pointer;
  transition: background .18s, transform .15s;
}
.nb-cc-btn:hover { background: #333; transform: translateY(-1px); }
.nb-cc-note {
  font-size: 12px;
  color: var(--muted2);
  text-align: center;
  margin-bottom: 14px;
}
.nb-cc-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.nb-cc-signals span {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted2);
  background: var(--bg);
  border: 1px solid var(--b0);
  border-radius: 6px;
  padding: 3px 8px;
}

@media (max-width: 860px) {
  .nb-cta-inner {
    grid-template-columns: 1fr;
    gap: 48px;
    text-align: center;
  }
  .nb-cta-sub { max-width: none; }
  .nb-cta-proof { justify-content: center; }
  .nb-cta-card { max-width: 420px; margin: 0 auto; }
}
@media (max-width: 500px) {
  .nb-cta-section { padding: 64px 0 72px; }
  .nb-cta-inner { gap: 40px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REDESIGN v2 — r2-* design system
   Philosophy: editorial restraint, generous space, one dark accent, sharp type
═══════════════════════════════════════════════════════════════════════════ */

/* Shared tokens for r2 system */
:root {
  --r2-ink:    #0A0A0A;
  --r2-ink2:   #3A3A3A;
  --r2-muted:  #6B6B6B;
  --r2-light:  #9A9A9A;
  --r2-line:   rgba(0,0,0,.08);
  --r2-bg:     #FAFAFA;
  --r2-white:  #FFFFFF;
  --r2-green:  #1A7A4A;
  --r2-green-l:rgba(26,122,74,.08);
  --r2-section-pad: 96px 0 104px;
}

.r2-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--r2-light);
  margin: 0 0 14px;
}

.r2-h2 {
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.12;
  color: var(--r2-ink);
  margin: 0;
}
.r2-h2 em { font-style: normal; color: var(--r2-green); }

.r2-h2-sm {
  font-size: clamp(24px, 2.8vw, 36px);
  font-weight: 800;
  letter-spacing: -.028em;
  line-height: 1.14;
  color: var(--r2-ink);
  margin: 0;
}

.r2-body {
  font-size: 17px;
  line-height: 1.65;
  color: var(--r2-ink2);
  max-width: 480px;
}

.r2-section-head {
  text-align: center;
  margin-bottom: 64px;
}
.r2-section-head .r2-eyebrow { margin-bottom: 14px; }

/* ── LOGOS ── */
.r2-logos {
  background: var(--r2-bg);
  border-bottom: 1px solid var(--r2-line);
  border-top: 1px solid var(--r2-line);
  padding: 28px 0;
}
.r2-logos-label {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--r2-light);
  margin: 0 0 18px;
}
.r2-logos-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 0;
}
.r2-logo {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  color: rgba(0,0,0,.22);
  padding: 0 22px;
  transition: color .2s;
}
.r2-logo:hover { color: rgba(0,0,0,.4); }
.r2-logo-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--r2-line);
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .r2-logo { padding: 0 12px; font-size: 13px; }
  .r2-logo-dot { display: none; }
}

/* ── PROBLEM SECTION ── */
.r2-problem {
  background: var(--r2-bg);
  padding: 104px 0 112px;
  border-top: 1px solid var(--r2-line);
}
.r2-problem-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
.r2-problem-left { display: flex; flex-direction: column; gap: 28px; }
.r2-problem-left .r2-h2 { max-width: 460px; }

.r2-stat-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--r2-bg);
  border: 1px solid var(--r2-line);
  border-radius: 16px;
  overflow: hidden;
  max-width: 400px;
}
.r2-stat {
  flex: 1;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.r2-stat + .r2-stat { border-left: 1px solid var(--r2-line); }
.r2-stat-n {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--r2-ink);
  line-height: 1;
}
.r2-stat-pct { font-size: 22px; }
.r2-stat-l { font-size: 12px; color: var(--r2-muted); line-height: 1.45; max-width: 100px; }
.r2-stat-div { display: none; }

.r2-problem-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.r2-cite-card {
  width: 100%;
  max-width: 340px;
  background: var(--r2-white);
  border: 1px solid var(--r2-line);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 6px 20px rgba(0,0,0,.06);
}
.r2-cite-before { opacity: .5; transform: scale(.97); transform-origin: top center; }
.r2-cite-after { box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 12px 40px rgba(0,0,0,.10); }

.r2-cite-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--r2-muted);
  margin-bottom: 10px;
}
.r2-cite-label-green { color: var(--r2-green); }
.r2-cite-query {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--r2-ink2);
  background: var(--r2-bg);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 12px;
}
.r2-cite-results { display: flex; flex-direction: column; gap: 6px; }
.r2-cite-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  padding: 6px 8px;
  border-radius: 8px;
}
.r2-cite-found { color: var(--r2-ink2); }
.r2-cite-missing {
  color: var(--r2-light);
  text-decoration: line-through;
  opacity: .6;
}
.r2-cite-you {
  background: rgba(26,122,74,.07);
  color: var(--r2-ink);
  border: 1px solid rgba(26,122,74,.15);
}
.r2-cite-n {
  width: 20px; height: 20px;
  border-radius: 6px;
  background: var(--r2-bg);
  border: 1px solid var(--r2-line);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  color: var(--r2-muted);
  flex-shrink: 0;
}
.r2-cite-n-you {
  background: var(--r2-green);
  border-color: var(--r2-green);
  color: #fff;
}
.r2-cite-badge {
  font-size: 10px;
  font-weight: 700;
  color: var(--r2-green);
  background: var(--r2-green-l);
  border-radius: 4px;
  padding: 2px 6px;
}
.r2-cite-x {
  width: 20px; height: 20px;
  border-radius: 6px;
  background: rgba(239,68,68,.08);
  color: #DC2626;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
  flex-shrink: 0;
}
.r2-cite-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 0;
  color: var(--r2-green);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

@media (max-width: 860px) {
  .r2-problem-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .r2-problem-left .r2-h2 { max-width: none; }
  .r2-problem-right { max-width: 360px; margin: 0 auto; width: 100%; }
  .r2-stat-row { max-width: none; }
}
@media (max-width: 600px) {
  .r2-problem { padding: 64px 0 72px; }
}

/* ── HOW IT WORKS ── */
.r2-how {
  background: var(--r2-white);
  padding: 104px 0 112px;
  border-top: 1px solid var(--r2-line);
}
.r2-steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: start;
  gap: 0;
  max-width: 880px;
  margin: 0 auto;
}
.r2-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 16px;
}
.r2-step-icon {
  width: 56px; height: 56px;
  border-radius: 18px;
  background: var(--r2-white);
  border: 1px solid var(--r2-line);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.06);
  display: flex; align-items: center; justify-content: center;
  color: var(--r2-ink);
  margin-bottom: 16px;
  transition: transform .2s, box-shadow .2s;
}
.r2-step:hover .r2-step-icon {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.09);
}
.r2-step-n {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .10em;
  color: var(--r2-green);
  margin-bottom: 8px;
}
.r2-step h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--r2-ink);
  letter-spacing: -.01em;
  margin: 0 0 8px;
}
.r2-step p {
  font-size: 14px;
  color: var(--r2-muted);
  line-height: 1.6;
  margin: 0;
}
.r2-step-line {
  display: flex;
  align-items: flex-start;
  padding-top: 27px;
  width: 56px;
  flex-shrink: 0;
}
.r2-step-line span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--r2-line) 0%, rgba(0,0,0,.14) 50%, var(--r2-line) 100%);
}
.r2-how-cta {
  text-align: center;
  margin-top: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.r2-btn-dark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--r2-ink);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  padding: 14px 28px;
  border-radius: 12px;
  text-decoration: none;
  transition: background .18s, transform .18s, box-shadow .18s;
  box-shadow: 0 2px 8px rgba(0,0,0,.12), 0 6px 20px rgba(0,0,0,.08);
}
.r2-btn-dark:hover { background: #2A2A2A; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.16), 0 10px 28px rgba(0,0,0,.10); }
.r2-btn-note { font-size: 12px; color: var(--r2-light); }

@media (max-width: 700px) {
  .r2-how { padding: 72px 0 80px; }
  .r2-steps {
    grid-template-columns: 1fr;
    max-width: 320px;
    margin: 0 auto;
    gap: 32px;
  }
  .r2-step-line {
    width: auto; height: 32px; padding: 0;
    justify-content: center; align-items: stretch;
  }
  .r2-step-line span { flex: none; width: 1px; height: 100%; background: var(--r2-line); }
}

/* ── BENCHMARKS ── */
.r2-bench {
  background: var(--r2-bg);
  padding: 104px 0 112px;
  border-top: 1px solid var(--r2-line);
}
.r2-bench-inner {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 72px;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
}
.r2-bench-left { display: flex; flex-direction: column; gap: 32px; }
.r2-bench-stats {
  display: flex;
  gap: 0;
  background: var(--r2-bg);
  border: 1px solid var(--r2-line);
  border-radius: 14px;
  overflow: hidden;
}
.r2-bs {
  flex: 1;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.r2-bs + .r2-bs { border-left: 1px solid var(--r2-line); }
.r2-bs-n {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--r2-ink);
  line-height: 1;
}
.r2-bs-l { font-size: 12px; color: var(--r2-muted); line-height: 1.4; }
.r2-bs-div { display: none; }

.r2-bench-board {
  background: var(--r2-white);
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 8px 32px rgba(0,0,0,.07);
}
.r2-bb-row {
  display: grid;
  grid-template-columns: 1fr 90px 48px 1fr;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(0,0,0,.05);
  font-size: 14px;
  gap: 0;
}
.r2-bb-row:last-child { border-bottom: none; }
.r2-bb-head {
  background: var(--r2-bg);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--r2-light);
  padding: 9px 20px;
}
.r2-bb-ind { display: flex; align-items: center; gap: 9px; font-weight: 500; color: var(--r2-ink); }
.r2-bb-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.r2-bb-dot-pulse {
  background: var(--r2-green);
  box-shadow: 0 0 0 3px rgba(26,122,74,.2);
  animation: r2-pulse 2s ease-in-out infinite;
}
@keyframes r2-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(26,122,74,.2); }
  50%       { box-shadow: 0 0 0 6px rgba(26,122,74,.07); }
}
.r2-bb-score { font-size: 13px; font-weight: 600; color: var(--r2-ink); }
.r2-bb-grade {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 7px;
  font-size: 12px; font-weight: 700;
}
.r2-gf { background: rgba(239,68,68,.1); color: #DC2626; }
.r2-gd { background: rgba(249,115,22,.1); color: #EA580C; }
.r2-gc { background: rgba(234,179,8,.1); color: #CA8A04; }
.r2-bb-bar {
  height: 5px; background: rgba(0,0,0,.06); border-radius: 99px; overflow: hidden;
}
.r2-bb-fill {
  height: 100%; width: var(--w,0); background: var(--c,#6FAF7A);
  border-radius: 99px;
}
.r2-bb-you {
  background: linear-gradient(90deg, rgba(26,122,74,.04) 0%, transparent 100%);
  border-top: 1px solid rgba(26,122,74,.12) !important;
}
.r2-bb-you .r2-bb-ind { font-weight: 700; }
.r2-bb-cta {
  font-size: 13px; font-weight: 600; color: var(--r2-green);
  text-decoration: none; white-space: nowrap;
  transition: letter-spacing .18s;
}
.r2-bb-cta:hover { letter-spacing: .01em; }

@media (max-width: 900px) {
  .r2-bench-inner { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 600px) {
  .r2-bench { padding: 64px 0 72px; }
  .r2-bb-row { grid-template-columns: 1fr 60px 36px 1fr; padding: 10px 14px; font-size: 13px; }
  .r2-bb-head { padding: 8px 14px; }
}

/* ── SOCIAL PROOF ── */
.r2-reviews {
  background: #080808;
  padding: 104px 0 112px;
}
.r2-reviews .r2-eyebrow { color: rgba(255,255,255,.35); }
.r2-reviews .r2-h2-sm { color: #FFFFFF; }
.r2-review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 1080px;
  margin: 0 auto;
}
.r2-rc {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 18px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background .2s, border-color .2s;
}
.r2-rc:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); }
.r2-rc-featured {
  grid-row: span 2;
  background: rgba(26,122,74,.07);
  border-color: rgba(26,122,74,.18);
}
.r2-rc-featured:hover { background: rgba(26,122,74,.10); border-color: rgba(26,122,74,.25); }
.r2-rc-stars { color: #F5C842; font-size: 13px; letter-spacing: 2px; }
.r2-rc-quote {
  font-size: 15px; line-height: 1.62; color: rgba(255,255,255,.75);
  margin: 0; font-style: italic;
}
.r2-rc-featured .r2-rc-quote { font-size: 16px; color: rgba(255,255,255,.88); }
.r2-rc-metric {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(26,122,74,.1); border: 1px solid rgba(26,122,74,.18);
  border-radius: 10px; padding: 9px 14px; align-self: flex-start;
}
.r2-rcm-before { font-size: 18px; font-weight: 800; color: rgba(255,255,255,.30); }
.r2-rcm-after { font-size: 22px; font-weight: 800; color: #4CAF76; }
.r2-rcm-tag {
  font-size: 11px; font-weight: 600; color: rgba(76,175,118,.65);
  text-transform: uppercase; letter-spacing: .07em;
}
.r2-rc-pill {
  display: inline-flex; align-self: flex-start;
  font-size: 12px; font-weight: 600;
  padding: 5px 11px; border-radius: 99px;
  background: rgba(255,255,255,.06); color: rgba(255,255,255,.50);
  border: 1px solid rgba(255,255,255,.09);
}
.r2-rc-pill-green {
  background: rgba(26,122,74,.10); color: rgba(76,175,118,.85);
  border-color: rgba(26,122,74,.18);
}
.r2-rc-author {
  display: flex; align-items: center; gap: 10px;
  margin-top: auto; padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.r2-rc-author img {
  width: 34px; height: 34px; border-radius: 50%;
  object-fit: cover; background: rgba(255,255,255,.1);
}
.r2-rc-author strong { display: block; font-size: 13px; font-weight: 600; color: #FFFFFF; }
.r2-rc-author span { font-size: 12px; color: rgba(255,255,255,.38); }
.r2-reviews-foot {
  text-align: center; margin-top: 44px;
  display: flex; align-items: center; justify-content: center;
  gap: 10px; font-size: 14px; color: rgba(255,255,255,.38);
  flex-wrap: wrap;
}
.r2-rf-stars { color: #F5C842; }
.r2-reviews-foot strong { color: rgba(255,255,255,.75); }
.r2-rf-cta {
  color: #4CAF76; text-decoration: none; font-weight: 600;
  transition: opacity .18s;
}
.r2-rf-cta:hover { opacity: .75; }

@media (max-width: 900px) {
  .r2-review-grid { grid-template-columns: 1fr 1fr; }
  .r2-rc-featured { grid-row: span 1; }
}
@media (max-width: 560px) {
  .r2-reviews { padding: 64px 0 72px; }
  .r2-review-grid { grid-template-columns: 1fr; }
}

/* ── PRICING ── */
.r2-pricing {
  background: var(--r2-white);
  padding: 104px 0 112px;
  border-top: 1px solid var(--r2-line);
}
.r2-pricing-sub {
  font-size: 16px; color: var(--r2-muted); max-width: 400px;
  margin: 12px auto 0; line-height: 1.55;
}
.r2-price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 960px;
  margin: 0 auto 44px;
  align-items: start;
}
.r2-pc {
  background: var(--r2-bg);
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 24px;
  padding: 32px 28px 28px;
  position: relative;
  display: flex; flex-direction: column; gap: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 6px 20px rgba(0,0,0,.05);
  transition: transform .2s, box-shadow .2s;
}
.r2-pc:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 14px 44px rgba(0,0,0,.09); }
.r2-pc-pro {
  background: var(--r2-ink);
  border-color: transparent;
  box-shadow: 0 2px 4px rgba(0,0,0,.14), 0 20px 60px rgba(0,0,0,.28);
  transform: scale(1.04);
}
.r2-pc-pro:hover { transform: scale(1.04) translateY(-2px); }
.r2-pc-popular {
  position: absolute; top: -1px; left: 50%;
  transform: translateX(-50%);
  background: var(--r2-green);
  color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 0 0 10px 10px;
}
.r2-pc-tier {
  font-size: 12px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--r2-light); margin-bottom: 14px;
}
.r2-pc-pro .r2-pc-tier { color: rgba(255,255,255,.4); }
.r2-pc-price {
  display: flex; align-items: baseline; gap: 3px; margin-bottom: 7px;
}
.r2-pc-n {
  font-size: 52px; font-weight: 800; letter-spacing: -.05em;
  color: var(--r2-ink); line-height: 1;
}
.r2-pc-pro .r2-pc-n { color: #FFFFFF; }
.r2-pc-period { font-size: 16px; font-weight: 500; color: var(--r2-light); }
.r2-pc-pro .r2-pc-period { color: rgba(255,255,255,.35); }
.r2-pc-desc { font-size: 14px; color: var(--r2-muted); margin: 0 0 20px; line-height: 1.5; }
.r2-pc-pro .r2-pc-desc { color: rgba(255,255,255,.5); }

.r2-pc-list {
  list-style: none; padding: 0;
  margin: 0 0 24px;
  border-top: 1px solid var(--r2-line);
  padding-top: 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.r2-pc-pro .r2-pc-list { border-top-color: rgba(255,255,255,.1); }
.r2-pc-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; color: var(--r2-ink2);
}
.r2-pc-pro .r2-pc-list li { color: rgba(255,255,255,.78); }
.r2-li-ok::before {
  content: '';
  width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px;
  border-radius: 50%;
  background: rgba(26,122,74,.1) url("data:image/svg+xml,%3Csvg width='9' height='7' viewBox='0 0 9 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 3.5l2.5 2.5 5-5' stroke='%231A7A4A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
}
.r2-li-no { opacity: .35; }
.r2-li-no::before {
  content: '';
  width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px;
  border-radius: 50%;
  background: rgba(0,0,0,.06) url("data:image/svg+xml,%3Csvg width='7' height='7' viewBox='0 0 7 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5M6 1L1 6' stroke='%236B6B6B' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
}
.r2-li-bold { font-weight: 600; }

.r2-pc-primary {
  display: flex; align-items: center; justify-content: center;
  background: var(--r2-green); color: #FFFFFF;
  font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  padding: 14px 20px; border-radius: 12px; text-decoration: none;
  transition: background .18s, transform .15s; margin-top: auto;
}
.r2-pc-primary:hover { background: #156A3C; transform: translateY(-1px); }
.r2-pc-ghost {
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: var(--r2-ink);
  border: 1px solid var(--r2-line);
  font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  padding: 13px 20px; border-radius: 12px; text-decoration: none;
  transition: background .18s, border-color .18s, transform .15s; margin-top: auto;
}
.r2-pc-ghost:hover { background: var(--r2-bg); border-color: rgba(0,0,0,.14); transform: translateY(-1px); }
.r2-pc-pro .r2-pc-ghost { color: rgba(255,255,255,.65); border-color: rgba(255,255,255,.15); }
.r2-pc-pro .r2-pc-ghost:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.25); }
.r2-pc-note { font-size: 11px; color: var(--r2-light); text-align: center; margin-top: 10px; }
.r2-pc-pro .r2-pc-note { color: rgba(255,255,255,.28); }

.r2-trust-row {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 10px 6px;
  font-size: 13px; color: var(--r2-muted);
}
.r2-tr-item { display: flex; align-items: center; gap: 6px; font-weight: 500; }
.r2-tr-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--r2-light); }

@media (max-width: 860px) {
  .r2-price-grid { grid-template-columns: 1fr; max-width: 400px; }
  .r2-pc-pro { transform: none; }
  .r2-pc-pro:hover { transform: translateY(-2px); }
}
@media (max-width: 500px) { .r2-pricing { padding: 64px 0 72px; } }

/* ── FINAL CTA ── */
.r2-cta {
  background: #030303;
  padding: 112px 0 120px;
  position: relative; overflow: hidden;
}
.r2-cta::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 30% 50%, rgba(26,122,74,.07) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 80% 30%, rgba(26,122,74,.04) 0%, transparent 60%);
  pointer-events: none;
}
.r2-cta-inner {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 80px; align-items: center;
  position: relative;
}
.r2-cta-kicker {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #4CAF76; margin-bottom: 20px;
}
.r2-cta-h2 {
  font-size: clamp(28px, 3.8vw, 48px);
  font-weight: 800; letter-spacing: -.035em; line-height: 1.06;
  color: #FFFFFF; margin: 0 0 20px;
}
.r2-cta-h2 em { font-style: normal; color: #4CAF76; }
.r2-cta-body {
  font-size: 16px; color: rgba(255,255,255,.48); line-height: 1.65; margin: 0 0 28px; max-width: 420px;
}
.r2-cta-body strong { color: rgba(255,255,255,.72); font-weight: 600; }
.r2-cta-proof {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; color: rgba(255,255,255,.38); flex-wrap: wrap;
}
.r2-cta-stars { color: #F5C842; }
.r2-cta-proof strong { color: rgba(255,255,255,.68); }
.r2-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #4CAF76; box-shadow: 0 0 0 3px rgba(76,175,118,.2);
  animation: r2-pulse 2s ease-in-out infinite;
}
.r2-live-label { color: rgba(255,255,255,.45); font-weight: 500; }

.r2-cta-card {
  background: #FFFFFF; border-radius: 20px; padding: 28px 26px;
  box-shadow: 0 4px 8px rgba(0,0,0,.18), 0 24px 80px rgba(0,0,0,.32);
}
.r2-cta-card-head {
  font-size: 17px; font-weight: 700; color: var(--r2-ink);
  letter-spacing: -.01em; margin-bottom: 16px;
}
.r2-cta-form { display: flex; flex-direction: column; gap: 9px; margin-bottom: 12px; }
.r2-cta-field {
  display: flex; align-items: center;
  background: var(--r2-bg); border: 1px solid var(--r2-line);
  border-radius: 11px; overflow: hidden; padding: 0 14px;
  transition: border-color .18s, box-shadow .18s;
}
.r2-cta-field:focus-within { border-color: var(--r2-green); box-shadow: 0 0 0 3px rgba(26,122,74,.12); }
.r2-cta-proto { font-size: 14px; color: var(--r2-light); flex-shrink: 0; user-select: none; }
.r2-cta-field input {
  flex: 1; border: none; background: transparent;
  padding: 13px 8px; font-size: 15px; font-family: inherit;
  color: var(--r2-ink); outline: none;
}
.r2-cta-field input::placeholder { color: var(--r2-light); }
.r2-cta-submit {
  width: 100%; background: var(--r2-ink); color: #FFFFFF;
  border: none; border-radius: 11px; padding: 14px;
  font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  font-family: inherit; cursor: pointer;
  transition: background .18s, transform .15s;
}
.r2-cta-submit:hover { background: #2A2A2A; transform: translateY(-1px); }
.r2-cta-card-note { font-size: 12px; color: var(--r2-light); text-align: center; margin-bottom: 12px; }
.r2-cta-signals {
  display: flex; flex-wrap: wrap; gap: 5px; justify-content: center;
}
.r2-cta-signals span {
  font-size: 11px; font-weight: 600; color: var(--r2-light);
  background: var(--r2-bg); border: 1px solid var(--r2-line);
  border-radius: 6px; padding: 3px 8px;
}

@media (max-width: 860px) {
  .r2-cta-inner { grid-template-columns: 1fr; gap: 44px; text-align: center; }
  .r2-cta-body { max-width: none; }
  .r2-cta-proof { justify-content: center; }
  .r2-cta-card { max-width: 400px; margin: 0 auto; }
}
@media (max-width: 500px) { .r2-cta { padding: 64px 0 72px; } }

/* ═══════════════════════════════════════════════════════════════════════════
   PROBLEM SECTION — scenario cards (human storytelling)
═══════════════════════════════════════════════════════════════════════════ */
.r2-prob-intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 72px;
}
.r2-prob-intro .r2-eyebrow { margin-bottom: 18px; }
.r2-prob-intro .r2-h2 { margin-bottom: 24px; }
.r2-prob-lead {
  font-size: 18px;
  color: var(--r2-muted);
  line-height: 1.6;
  margin: 0;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.r2-scenarios {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto 72px;
}

.r2-scenario {
  background: var(--r2-white);
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 24px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 8px 32px rgba(0,0,0,.06);
  position: relative;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.r2-scenario:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 16px 48px rgba(0,0,0,.09);
}
.r2-scenario-after {
  border-color: rgba(26,122,74,.25);
  background: linear-gradient(160deg, rgba(26,122,74,.03) 0%, #fff 60%);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 24px rgba(26,122,74,.10);
}

.r2-sc-badge {
  position: absolute;
  top: 16px; right: 16px;
  background: var(--r2-green);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 99px;
}

.r2-sc-persona {
  display: flex;
  align-items: center;
  gap: 10px;
}
.r2-sc-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.r2-sc-av1 { background: linear-gradient(135deg, #F59E0B, #EF4444); }
.r2-sc-av2 { background: linear-gradient(135deg, #3B82F6, #8B5CF6); }
.r2-sc-av3 { background: linear-gradient(135deg, #10B981, #059669); }
.r2-sc-name {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--r2-ink);
  line-height: 1.2;
}
.r2-sc-role {
  display: block;
  font-size: 12px;
  color: var(--r2-muted);
}

.r2-sc-chat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.r2-sc-bubble {
  border-radius: 12px;
  padding: 10px 13px;
  font-size: 13px;
  line-height: 1.5;
}
.r2-sc-user {
  background: var(--r2-bg);
  color: var(--r2-ink);
  border: 1px solid var(--r2-line);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  font-style: italic;
}
.r2-sc-ai {
  background: #F0F0F2;
  color: var(--r2-ink2);
  border-bottom-left-radius: 4px;
}
.r2-sc-ai-after {
  background: rgba(26,122,74,.06);
  border: 1px solid rgba(26,122,74,.14);
}
.r2-sc-ai-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--r2-muted);
  margin-bottom: 5px;
}
.r2-sc-your {
  color: var(--r2-green);
  font-weight: 700;
}

.r2-sc-outcome {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.4;
  padding: 10px 12px;
  border-radius: 10px;
}
.r2-sc-bad {
  background: rgba(220,38,38,.06);
  color: #991B1B;
  border: 1px solid rgba(220,38,38,.12);
}
.r2-sc-good {
  background: rgba(26,122,74,.07);
  color: #14532D;
  border: 1px solid rgba(26,122,74,.15);
}
.r2-sc-outcome svg { flex-shrink: 0; margin-top: 1px; }

.r2-prob-stats {
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: var(--r2-ink);
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 24px;
  overflow: hidden;
  max-width: 900px;
  margin: 0 auto;
  box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 12px 40px rgba(0,0,0,.14);
}
.r2-pstat {
  flex: 1;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: center;
  text-align: center;
}
.r2-pstat + .r2-pstat { border-left: 1px solid rgba(255,255,255,.09); }
.r2-pstat-div { display: none; }
.r2-pstat-n {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -.04em;
  color: #FFFFFF;
  line-height: 1;
}
.r2-pstat-l {
  font-size: 13px;
  color: rgba(255,255,255,.45);
  line-height: 1.4;
  max-width: 160px;
}

@media (max-width: 960px) {
  .r2-scenarios { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .r2-scenarios { grid-template-columns: 1fr; max-width: 480px; }
}
@media (max-width: 700px) {
  .r2-prob-stats { flex-direction: column; max-width: 480px; }
  .r2-pstat + .r2-pstat { border-left: none; border-top: 1px solid rgba(255,255,255,.09); }
}
@media (max-width: 600px) {
  .r2-prob-intro .r2-h2 { font-size: 26px; }
  .r2-prob-lead { font-size: 16px; }
  .r2-problem { padding: 72px 0 80px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOW IT WORKS — walkthrough with mini product mockups
═══════════════════════════════════════════════════════════════════════════ */
.r2-walkthroughs {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 800px;
  margin: 0 auto;
}
.r2-wt {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 24px;
  align-items: start;
}
.r2-wt-connector {
  display: flex;
  justify-content: center;
  padding: 4px 0;
  width: 56px;
}
.r2-wt-connector span {
  width: 1px;
  height: 32px;
  background: linear-gradient(to bottom, rgba(0,0,0,.12), rgba(0,0,0,.04));
  display: block;
}
.r2-wt-num {
  width: 56px; height: 56px;
  border-radius: 18px;
  background: var(--r2-ink);
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  letter-spacing: -.02em;
  box-shadow: 0 2px 8px rgba(0,0,0,.15), 0 6px 20px rgba(0,0,0,.08);
}
.r2-wt-content {
  padding-bottom: 36px;
}
.r2-wt-content h3 {
  font-size: 22px;
  font-weight: 700;
  color: var(--r2-ink);
  letter-spacing: -.025em;
  margin: 12px 0 10px;
  line-height: 1.2;
}
.r2-wt-content p {
  font-size: 16px;
  color: var(--r2-muted);
  line-height: 1.6;
  margin: 0 0 24px;
  max-width: 480px;
}

/* URL bar mockup */
.r2-wt-mock {
  background: var(--r2-bg);
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 28px rgba(0,0,0,.07);
}
.r2-wt-mock-url { max-width: 420px; }
.r2-wt-url-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--r2-bg);
  border: 1px solid var(--r2-line);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 10px;
}
.r2-wt-url-proto { font-size: 13px; color: var(--r2-light); }
.r2-wt-url-typed {
  font-size: 14px;
  font-weight: 500;
  color: var(--r2-ink);
}
.r2-wt-cursor {
  display: inline-block;
  width: 1px;
  height: 14px;
  background: var(--r2-ink);
  margin-left: 1px;
  vertical-align: middle;
  animation: blink .9s step-end infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.r2-wt-url-btn {
  background: var(--r2-ink);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 9px;
  text-align: center;
  cursor: pointer;
}

/* Score card mockup */
.r2-wt-mock-score { max-width: 420px; }
.r2-wt-score-ring {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  position: relative;
}
.r2-wt-score-ring > svg { flex-shrink: 0; }
.r2-wt-score-n {
  position: absolute;
  left: 18px; top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  font-weight: 800;
  color: var(--r2-ink);
  letter-spacing: -.03em;
  pointer-events: none;
}
.r2-wt-score-right { flex: 1; }
.r2-wt-score-grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 9px;
  background: rgba(26,122,74,.1);
  color: var(--r2-green);
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 4px;
}
.r2-wt-score-label { font-size: 11px; color: var(--r2-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; }
.r2-wt-bars { display: flex; flex-direction: column; gap: 7px; }
.r2-wt-bar {
  display: grid;
  grid-template-columns: 60px 1fr 28px;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--r2-muted);
}
.r2-wtb-track { height: 5px; background: rgba(0,0,0,.07); border-radius: 99px; overflow: hidden; }
.r2-wtb-fill { height: 100%; border-radius: 99px; }

/* Issues list mockup */
.r2-wt-mock-issues { max-width: 480px; display: flex; flex-direction: column; gap: 10px; }
.r2-wt-issue {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.4;
}
.r2-wti-critical { background: rgba(220,38,38,.06); border: 1px solid rgba(220,38,38,.12); }
.r2-wti-high { background: rgba(234,88,12,.05); border: 1px solid rgba(234,88,12,.12); }
.r2-wti-ok { background: rgba(26,122,74,.05); border: 1px solid rgba(26,122,74,.12); }
.r2-wti-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-top: 3px;
  flex-shrink: 0;
}
.r2-wti-critical .r2-wti-dot { background: #DC2626; }
.r2-wti-high .r2-wti-dot { background: #EA580C; }
.r2-wti-ok .r2-wti-dot { background: #1A7A4A; }
.r2-wti-sev {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-right: 6px;
}
.r2-wti-critical .r2-wti-sev { color: #DC2626; }
.r2-wti-high .r2-wti-sev { color: #EA580C; }
.r2-wti-ok .r2-wti-sev { color: #1A7A4A; }
.r2-wti-title { color: var(--r2-ink2); font-weight: 500; }
.r2-wt-files {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--r2-green);
  padding: 4px 0 0;
}

@media (max-width: 600px) {
  .r2-wt { grid-template-columns: 44px 1fr; gap: 16px; }
  .r2-wt-num { width: 44px; height: 44px; font-size: 17px; border-radius: 14px; }
  .r2-wt-connector { width: 44px; }
  .r2-wt-content h3 { font-size: 18px; }
  .r2-wt-mock-url, .r2-wt-mock-score, .r2-wt-mock-issues { max-width: 100%; }
}


/* ═══════════════════════════════════════════════════════════════════════
   nb2-* DESIGN SYSTEM — Unified, Apple-quality, single token set
   Philosophy: one typeface, one green, maximum air, minimum words
═══════════════════════════════════════════════════════════════════════ */

:root {
  --c-ink:   #0A0A0A;
  --c-ink2:  #3A3A3A;
  --c-muted: #6B6B6B;
  --c-dim:   #9A9A9A;
  --c-line:  rgba(0,0,0,.08);
  --c-surf:  #FAFAFA;
  --c-white: #FFFFFF;
  --c-green: #1A7A4A;
  --c-green-l: rgba(26,122,74,.08);
}

/* ── Shared section shell ── */
.nb2-section {
  padding: 112px 0 120px;
  border-top: 1px solid var(--c-line);
}

.nb2-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-dim);
  text-align: center;
  margin-bottom: 20px;
}

.nb2-h2 {
  font-size: clamp(28px, 3.2vw, 46px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.1;
  color: var(--c-ink);
  text-align: center;
  margin: 0 auto 28px;
  max-width: 720px;
}
.nb2-h2 em { font-style: normal; color: var(--c-green); }

.nb2-h2-sm {
  font-size: clamp(24px, 2.8vw, 38px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.12;
  color: var(--c-ink);
  text-align: center;
  margin: 0 auto 44px;
  max-width: 560px;
}

.nb2-subhead {
  font-size: 18px;
  color: var(--c-muted);
  text-align: center;
  line-height: 1.6;
  max-width: 480px;
  margin: 0 auto 72px;
}

/* ── LOGOS ── */
/* Trust bar now lives inside .pb-pre, keep old .nb2-logos intact for fallback */
.nb2-logos {
  background: var(--bg);
  border-top: 1px solid var(--b0);
  padding: 28px 0 56px;
}
.nb2-logos-label {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-dim);
  margin: 0 0 18px;
}
.nb2-logos-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
}
.nb2-logo {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  color: rgba(0,0,0,.2);
  padding: 0 24px;
  line-height: 1;
  transition: color .2s;
}
.nb2-logo:hover { color: rgba(0,0,0,.45); }
.nb2-logo-sep {
  width: 1px; height: 16px;
  background: var(--c-line);
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .nb2-logo { padding: 0 14px; font-size: 12px; }
  .nb2-logo-sep { display: none; }
}

/* ── PROBLEM section ── */

.nb2-proof-strip {
  display: flex;
  align-items: stretch;
  max-width: 860px;
  margin: 0 auto;
  background: var(--c-ink);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,.1), 0 16px 56px rgba(0,0,0,.18);
}
.nb2-proof-stat {
  flex: 1;
  padding: 36px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.nb2-proof-stat + .nb2-proof-stat {
  border-left: 1px solid rgba(255,255,255,.08);
}
.nb2-proof-div { display: none; }
.nb2-stat-n {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -.05em;
  color: #FFFFFF;
  line-height: 1;
}
.nb2-stat-pct { font-size: 28px; }
.nb2-stat-sm { font-size: 22px; font-weight: 700; opacity: .6; }
.nb2-stat-l {
  font-size: 13px;
  color: rgba(255,255,255,.4);
  line-height: 1.45;
  max-width: 140px;
}
@media (max-width: 700px) {
  .nb2-proof-strip { flex-direction: column; max-width: 400px; border-radius: 20px; }
  .nb2-proof-stat + .nb2-proof-stat { border-left: none; border-top: 1px solid rgba(255,255,255,.08); }
  .nb2-proof-stat { padding: 28px 20px; }
  .nb2-stat-n { font-size: 34px; }
  .nb2-problem { padding: 72px 0 80px; }
}

/* ── HOW section ── */
.nb2-how {
  background: var(--c-surf);
}
.nb2-steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 0;
  align-items: start;
  max-width: 1040px;
  margin: 0 auto 60px;
}
.nb2-step {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.nb2-step-n {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--c-green);
  margin-bottom: 10px;
}
.nb2-step-body h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: -.02em;
  margin: 0 0 10px;
  line-height: 1.25;
}
.nb2-step-body p {
  font-size: 15px;
  color: var(--c-muted);
  line-height: 1.6;
  margin: 0 0 20px;
  max-width: 280px;
}
.nb2-step-arrow {
  display: flex;
  align-items: flex-start;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  color: var(--c-line);
  flex-shrink: 0;
  color: rgba(0,0,0,.18);
}
@media (max-width: 800px) {
  .nb2-steps {
    grid-template-columns: 1fr;
    max-width: 480px;
    gap: 0;
  }
  .nb2-step-arrow {
    padding: 6px 0 6px 0;
    transform: rotate(90deg);
    justify-content: center;
  }
}

/* Step mockups */
.nb2-mock {
  background: var(--c-white);
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 32px rgba(0,0,0,.07);
}
.nb2-url-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--c-surf);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 10px;
  font-size: 13px;
}
.nb2-url-proto { color: var(--c-dim); }
.nb2-url-domain { color: var(--c-ink); font-weight: 500; }
.nb2-cursor {
  display: inline-block;
  width: 1.5px; height: 13px;
  background: var(--c-ink);
  vertical-align: middle;
  margin-left: 1px;
  animation: blink .9s step-end infinite;
}
.nb2-url-btn {
  background: var(--c-ink);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 9px;
  text-align: center;
}
.nb2-score-ring {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
  position: relative;
}
.nb2-score-n {
  position: absolute;
  left: 20px; top: 50%;
  transform: translateY(-50%);
  font-size: 17px;
  font-weight: 800;
  color: var(--c-ink);
  pointer-events: none;
  letter-spacing: -.03em;
}
.nb2-score-right { flex: 1; }
.nb2-score-grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 8px;
  background: rgba(26,122,74,.1);
  color: var(--c-green);
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 3px;
}
.nb2-score-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-muted);
  margin-bottom: 8px;
}
.nb2-score-bars { display: flex; flex-direction: column; gap: 6px; }
.nb2-sbar {
  display: grid;
  grid-template-columns: 52px 1fr 22px;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--c-muted);
}
.nb2-sbar b { font-size: 11px; color: var(--c-ink); text-align: right; }
.nb2-sbar-track { height: 4px; background: rgba(0,0,0,.07); border-radius: 99px; overflow: hidden; }
.nb2-sbar-fill { height: 100%; background: var(--c-ink); border-radius: 99px; }

.nb2-issue {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 8px;
}
.nb2-issue:last-of-type { margin-bottom: 10px; }
.nb2-issue b { font-weight: 700; margin-right: 4px; }
.nb2-issue-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 3px;
}
.nb2-issue-crit { background: rgba(220,38,38,.06); border: 1px solid rgba(220,38,38,.12); color: var(--c-ink2); }
.nb2-issue-crit .nb2-issue-dot { background: #DC2626; }
.nb2-issue-crit b { color: #DC2626; }
.nb2-issue-high { background: rgba(234,88,12,.05); border: 1px solid rgba(234,88,12,.12); color: var(--c-ink2); }
.nb2-issue-high .nb2-issue-dot { background: #EA580C; }
.nb2-issue-high b { color: #EA580C; }
.nb2-issue-ok { background: rgba(26,122,74,.05); border: 1px solid rgba(26,122,74,.12); color: var(--c-ink2); }
.nb2-issue-ok .nb2-issue-dot { background: var(--c-green); }
.nb2-issue-ok b { color: var(--c-green); }
.nb2-issue-files {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-green);
}

.nb2-how-cta {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.nb2-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--c-ink);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  padding: 15px 30px;
  border-radius: 13px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.14), 0 8px 24px rgba(0,0,0,.08);
  transition: background .18s, transform .18s, box-shadow .18s;
}
.nb2-btn-primary:hover { background: #222; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.18), 0 12px 36px rgba(0,0,0,.10); }
.nb2-btn-note { font-size: 12px; color: var(--c-dim); }
@media (max-width: 700px) { .nb2-how { padding: 72px 0 80px; } }

/* ── SIMULATION section ── */
.nb2-sim {
  background: var(--c-white);
}

/* ── SOCIAL PROOF ── */
.nb2-proof {
  background: #0A0A0A;
}
.nb2-proof .nb2-section-label { color: rgba(255,255,255,.25); }
.nb2-proof .nb2-h2-sm { color: #FFFFFF; }
.nb2-reviews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 1060px;
  margin: 0 auto 44px;
}
.nb2-review {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 20px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background .2s;
}
.nb2-review:hover { background: rgba(255,255,255,.06); }
.nb2-review-hero {
  grid-row: span 2;
  background: rgba(26,122,74,.08);
  border-color: rgba(26,122,74,.18);
}
.nb2-rv-stars { color: #F5C842; font-size: 13px; letter-spacing: 2px; }
.nb2-rv-quote {
  font-size: 15px;
  line-height: 1.62;
  color: rgba(255,255,255,.72);
  margin: 0;
  font-style: italic;
  flex: 1;
}
.nb2-review-hero .nb2-rv-quote { font-size: 16px; color: rgba(255,255,255,.88); }
.nb2-rv-score {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(26,122,74,.1);
  border: 1px solid rgba(26,122,74,.18);
  border-radius: 10px;
  padding: 9px 14px;
  align-self: flex-start;
}
.nb2-rv-before { font-size: 17px; font-weight: 800; color: rgba(255,255,255,.28); }
.nb2-rv-after { font-size: 22px; font-weight: 800; color: #4CAF76; }
.nb2-rv-tag { font-size: 11px; font-weight: 600; color: rgba(76,175,118,.6); text-transform: uppercase; letter-spacing: .07em; }
.nb2-rv-pill {
  display: inline-flex;
  align-self: flex-start;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 99px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.48);
  border: 1px solid rgba(255,255,255,.09);
}
.nb2-rv-pill-green {
  background: rgba(26,122,74,.1);
  color: rgba(76,175,118,.85);
  border-color: rgba(26,122,74,.18);
}
.nb2-rv-author {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,.06);
  margin-top: auto;
}
.nb2-rv-author img {
  width: 34px; height: 34px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255,255,255,.1);
}
.nb2-rv-author strong { display: block; font-size: 13px; font-weight: 600; color: #fff; }
.nb2-rv-author span { font-size: 12px; color: rgba(255,255,255,.35); }
.nb2-proof-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  color: rgba(255,255,255,.35);
  flex-wrap: wrap;
}
.nb2-pf-stars { color: #F5C842; }
.nb2-proof-foot strong { color: rgba(255,255,255,.72); }
.nb2-pf-cta { color: #4CAF76; text-decoration: none; font-weight: 600; transition: opacity .18s; margin-left: 4px; }
.nb2-pf-cta:hover { opacity: .75; }
@media (max-width: 900px) {
  .nb2-reviews { grid-template-columns: 1fr 1fr; }
  .nb2-review-hero { grid-row: span 1; }
  .nb2-proof { padding: 72px 0 80px; }
}
@media (max-width: 560px) {
  .nb2-reviews { grid-template-columns: 1fr; }
}

/* ── PRICING ── */
.nb2-pricing {
  background: var(--c-surf);
}
.nb2-pricing-note {
  font-size: 15px;
  color: var(--c-muted);
  text-align: center;
  margin: -28px 0 56px;
}
.nb2-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 960px;
  margin: 0 auto 48px;
  align-items: start;
}
.nb2-plan {
  background: var(--c-white);
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 24px;
  padding: 32px 28px 28px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 6px 20px rgba(0,0,0,.05);
  transition: transform .2s, box-shadow .2s;
}
.nb2-plan:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 14px 44px rgba(0,0,0,.09); }
.nb2-plan-pro {
  background: var(--c-ink);
  border-color: transparent;
  box-shadow: 0 2px 4px rgba(0,0,0,.15), 0 20px 64px rgba(0,0,0,.30);
  transform: scale(1.04);
}
.nb2-plan-pro:hover { transform: scale(1.04) translateY(-2px); }
.nb2-plan-popular {
  position: absolute;
  top: -1px; left: 50%;
  transform: translateX(-50%);
  background: var(--c-green);
  color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 0 0 10px 10px;
}
.nb2-plan-tier {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-dim); margin-bottom: 14px;
}
.nb2-plan-pro .nb2-plan-tier { color: rgba(255,255,255,.35); }
.nb2-plan-price { display: flex; align-items: baseline; gap: 2px; margin-bottom: 6px; }
.nb2-plan-n { font-size: 54px; font-weight: 800; letter-spacing: -.05em; color: var(--c-ink); line-height: 1; }
.nb2-plan-pro .nb2-plan-n { color: #fff; }
.nb2-plan-mo { font-size: 16px; color: var(--c-dim); }
.nb2-plan-pro .nb2-plan-mo { color: rgba(255,255,255,.3); }
.nb2-plan-desc { font-size: 14px; color: var(--c-muted); margin: 0 0 20px; line-height: 1.5; }
.nb2-plan-pro .nb2-plan-desc { color: rgba(255,255,255,.45); }
.nb2-plan-list {
  list-style: none; padding: 0;
  margin: 0 0 24px;
  border-top: 1px solid var(--c-line);
  padding-top: 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.nb2-plan-pro .nb2-plan-list { border-top-color: rgba(255,255,255,.1); }
.nb2-plan-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; color: var(--c-ink2); }
.nb2-plan-pro .nb2-plan-list li { color: rgba(255,255,255,.75); }
.nb2-li-yes::before {
  content: '';
  width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px;
  border-radius: 50%;
  background: rgba(26,122,74,.1) url("data:image/svg+xml,%3Csvg width='9' height='7' viewBox='0 0 9 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 3.5l2.5 2.5 5-5' stroke='%231A7A4A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
}
.nb2-li-no { opacity: .3; }
.nb2-li-no::before {
  content: '';
  width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px;
  border-radius: 50%;
  background: rgba(0,0,0,.06) url("data:image/svg+xml,%3Csvg width='7' height='7' viewBox='0 0 7 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5M6 1L1 6' stroke='%236B6B6B' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
}
.nb2-li-bold { font-weight: 600; }
.nb2-plan-btn-primary {
  display: flex; align-items: center; justify-content: center;
  background: var(--c-green); color: #fff;
  font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  padding: 14px 20px; border-radius: 13px; text-decoration: none;
  transition: background .18s, transform .15s; margin-top: auto;
}
.nb2-plan-btn-primary:hover { background: #156A3C; transform: translateY(-1px); }
.nb2-plan-btn-ghost {
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: var(--c-ink);
  border: 1px solid var(--c-line);
  font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  padding: 13px 20px; border-radius: 13px; text-decoration: none;
  transition: background .18s, border-color .18s; margin-top: auto;
}
.nb2-plan-btn-ghost:hover { background: var(--c-surf); border-color: rgba(0,0,0,.15); transform: translateY(-1px); }
.nb2-plan-pro .nb2-plan-btn-ghost { color: rgba(255,255,255,.6); border-color: rgba(255,255,255,.15); }
.nb2-plan-fine { font-size: 11px; color: var(--c-dim); text-align: center; margin-top: 10px; }
.nb2-plan-pro .nb2-plan-fine { color: rgba(255,255,255,.25); }

.nb2-trust-row {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 8px;
  font-size: 13px; font-weight: 500; color: var(--c-muted);
}
.nb2-trust-row span { display: flex; align-items: center; gap: 6px; }
.nb2-tr-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--c-line); }
@media (max-width: 860px) {
  .nb2-plans { grid-template-columns: 1fr; max-width: 400px; }
  .nb2-plan-pro { transform: none; }
  .nb2-plan-pro:hover { transform: translateY(-2px); }
  .nb2-pricing { padding: 72px 0 80px; }
}

/* ── FINAL CTA ── */
.nb2-cta {
  background: #040404;
  padding: 120px 0 128px;
  position: relative;
  overflow: hidden;
}
.nb2-cta::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 25% 55%, rgba(26,122,74,.07) 0%, transparent 65%),
    radial-gradient(ellipse 40% 55% at 82% 25%, rgba(26,122,74,.05) 0%, transparent 60%);
  pointer-events: none;
}
.nb2-cta-inner {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 80px;
  align-items: center;
  position: relative;
}
.nb2-cta-eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #4CAF76; margin-bottom: 22px;
}
.nb2-cta-h2 {
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 800; letter-spacing: -.04em; line-height: 1.06;
  color: #FFFFFF; margin: 0 0 20px;
}
.nb2-cta-h2 em { font-style: normal; color: #4CAF76; }
.nb2-cta-sub {
  font-size: 16px; color: rgba(255,255,255,.44); line-height: 1.65; margin: 0 0 28px; max-width: 400px;
}
.nb2-cta-sub strong { color: rgba(255,255,255,.7); font-weight: 600; }
.nb2-cta-social {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: rgba(255,255,255,.35); flex-wrap: wrap;
}
.nb2-cta-stars { color: #F5C842; }
.nb2-cta-social strong { color: rgba(255,255,255,.68); }
.nb2-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #4CAF76;
  box-shadow: 0 0 0 3px rgba(76,175,118,.2);
  animation: r2-pulse 2s ease-in-out infinite;
}
.nb2-live-txt { color: rgba(255,255,255,.4); font-weight: 500; }

.nb2-cta-card {
  background: #FFFFFF; border-radius: 22px; padding: 30px 28px;
  box-shadow: 0 4px 8px rgba(0,0,0,.20), 0 28px 96px rgba(0,0,0,.36);
}
.nb2-cta-card-title {
  font-size: 17px; font-weight: 700; color: var(--c-ink);
  letter-spacing: -.01em; margin-bottom: 18px;
}
.nb2-cta-form { display: flex; flex-direction: column; gap: 9px; margin-bottom: 12px; }
.nb2-cta-field {
  display: flex; align-items: center;
  background: var(--c-surf); border: 1px solid var(--c-line);
  border-radius: 12px; overflow: hidden; padding: 0 14px;
  transition: border-color .18s, box-shadow .18s;
}
.nb2-cta-field:focus-within { border-color: var(--c-green); box-shadow: 0 0 0 3px rgba(26,122,74,.12); }
.nb2-cta-proto { font-size: 14px; color: var(--c-dim); flex-shrink: 0; user-select: none; }
.nb2-cta-field input {
  flex: 1; border: none; background: transparent;
  padding: 13px 8px; font-size: 15px; font-family: inherit;
  color: var(--c-ink); outline: none;
}
.nb2-cta-field input::placeholder { color: var(--c-dim); }
.nb2-cta-submit {
  width: 100%; background: var(--c-ink); color: #fff;
  border: none; border-radius: 11px; padding: 14px;
  font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  font-family: inherit; cursor: pointer;
  transition: background .18s, transform .15s;
}
.nb2-cta-submit:hover { background: #222; transform: translateY(-1px); }
.nb2-cta-fine { font-size: 12px; color: var(--c-dim); text-align: center; margin-bottom: 12px; }
.nb2-cta-chips {
  display: flex; flex-wrap: wrap; gap: 5px; justify-content: center;
}
.nb2-cta-chips span {
  font-size: 11px; font-weight: 600; color: var(--c-dim);
  background: var(--c-surf); border: 1px solid var(--c-line);
  border-radius: 6px; padding: 3px 9px;
}
@media (max-width: 860px) {
  .nb2-cta-inner { grid-template-columns: 1fr; gap: 44px; text-align: center; }
  .nb2-cta-sub { max-width: none; }
  .nb2-cta-social { justify-content: center; }
  .nb2-cta-card { max-width: 400px; margin: 0 auto; }
  .nb2-cta { padding: 80px 0 96px; }
}


/* ═══════════════════════════════════════════════════════════════
   sc2-* — Interactive scenario tabs (problem section)
═══════════════════════════════════════════════════════════════ */

.sc2-wrap {
  max-width: 960px;
  margin: 0 auto;
}

/* Tab row */
.sc2-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.sc2-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-muted);
  background: var(--c-surf);
  border: 1px solid var(--c-line);
  border-radius: 99px;
  padding: 9px 18px;
  cursor: pointer;
  transition: all .18s;
  font-family: inherit;
}
.sc2-tab:hover {
  color: var(--c-ink);
  border-color: rgba(0,0,0,.14);
  background: var(--c-white);
}
.sc2-tab-active {
  background: var(--c-ink);
  color: #fff;
  border-color: var(--c-ink);
}
.sc2-tab-active:hover {
  background: #222;
  color: #fff;
}

/* Panel visibility */
.sc2-panel { display: none; }
.sc2-panel-active { display: block; animation: sc2-fade .22s ease; }
@keyframes sc2-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Person context row */
.sc2-context {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}
.sc2-person {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sc2-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.sc2-person strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--c-ink);
  line-height: 1.2;
}
.sc2-person span {
  font-size: 13px;
  color: var(--c-muted);
}
.sc2-query-bubble {
  background: var(--c-surf);
  border: 1px solid var(--c-line);
  border-radius: 16px;
  padding: 13px 20px;
  font-size: 15px;
  font-style: italic;
  color: var(--c-ink2);
  max-width: 560px;
  text-align: center;
  line-height: 1.5;
}

/* Side-by-side reply cards */
.sc2-split {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: center;
  background: var(--c-white);
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 48px rgba(0,0,0,.08);
}
.sc2-ai-reply {
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}
.sc2-reply-bad {
  background: #FAFAFA;
  border-right: 1px solid rgba(0,0,0,.07);
}
.sc2-reply-good {
  background: rgba(26,122,74,.03);
}
.sc2-divider-arrow {
  padding: 0 2px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Label pill */
.sc2-reply-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  align-self: flex-start;
  padding: 5px 11px;
  border-radius: 99px;
}
.sc2-label-red {
  color: #DC2626;
  background: rgba(220,38,38,.07);
  border: 1px solid rgba(220,38,38,.14);
}
.sc2-label-green {
  color: var(--c-green);
  background: var(--c-green-l);
  border: 1px solid rgba(26,122,74,.18);
}

/* AI brand header */
.sc2-ai-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-muted);
}

/* Result list */
.sc2-result-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}
.sc2-result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--c-ink2);
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(0,0,0,.025);
}
.sc2-result-item strong { font-weight: 600; color: var(--c-ink); }
.sc2-rank {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: rgba(0,0,0,.06);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--c-muted);
  flex-shrink: 0;
}
.sc2-result-missing {
  opacity: .5;
}
.sc2-rank-x {
  background: rgba(220,38,38,.08);
  color: #DC2626;
  font-size: 10px;
}
.sc2-missing-tag {
  font-size: 11px;
  font-weight: 600;
  color: #DC2626;
  background: rgba(220,38,38,.08);
  border-radius: 5px;
  padding: 2px 7px;
  margin-left: auto;
}
.sc2-result-you {
  background: rgba(26,122,74,.07);
  border: 1px solid rgba(26,122,74,.18);
}
.sc2-result-you strong { color: var(--c-green); }
.sc2-rank-you {
  background: var(--c-green);
  color: #fff;
}
.sc2-you-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--c-green);
  background: rgba(26,122,74,.1);
  border-radius: 5px;
  padding: 2px 7px;
  margin-left: auto;
}

/* Outcome bar */
.sc2-outcome {
  font-size: 13px;
  font-weight: 600;
  padding: 11px 14px;
  border-radius: 10px;
  line-height: 1.4;
}
.sc2-outcome-bad {
  background: rgba(220,38,38,.06);
  color: #991B1B;
  border: 1px solid rgba(220,38,38,.12);
}
.sc2-outcome-good {
  background: rgba(26,122,74,.07);
  color: #14532D;
  border: 1px solid rgba(26,122,74,.14);
}

@media (max-width: 700px) {
  .sc2-split {
    grid-template-columns: 1fr;
  }
  .sc2-reply-bad {
    border-right: none;
    border-bottom: 1px solid rgba(0,0,0,.07);
  }
  .sc2-divider-arrow {
    display: none;
  }
  .nb2-problem { padding: 72px 0 80px; }
}
@media (max-width: 500px) {
  .sc2-tab { font-size: 12px; padding: 8px 14px; }
  .sc2-ai-reply { padding: 20px 18px; }
}


/* ═══════════════════════════════════════════════════════════════
   pb-* INTERACTIVE PLAYBOOK
═══════════════════════════════════════════════════════════════ */

/* ── Pre-playbook warm zone (same bg as hero) ────────────── */
.pb-pre {
  background: var(--bg);
  padding: 40px 0 72px;
  position: relative;
  z-index: 1;
}
.pb-pre-logos {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

/* ── Playbook dark card ────────────────────────────────── */
.pb-section {
  background: #0D0D0F;
  overflow: hidden;
  position: relative;
  padding: 72px 0 120px;
  border-radius: 36px 36px 0 0;
  margin-top: -48px;
  z-index: 2;
}

/* Problem section: white card arching up from dark bg */
.nb2-problem {
  background: #FFFFFF;
  border-top: none;
  border-radius: 36px 36px 0 0;
  margin-top: -48px;
  position: relative;
  z-index: 3;
  padding-top: 100px;
}

/* Intro header above the card */
.pb-intro {
  text-align: center;
  padding: 56px 24px 44px;
  position: relative;
  z-index: 2;
}
.pb-intro-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #4ADE80;
  background: rgba(74,222,128,.1);
  border: 1px solid rgba(74,222,128,.2);
  border-radius: 99px;
  padding: 6px 16px;
  margin-bottom: 20px;
}
.pb-intro-h2 {
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 900;
  letter-spacing: -.04em;
  color: #FFFFFF;
  line-height: 1.12;
  margin: 0 0 16px;
}
.pb-intro-h2 em {
  font-style: normal;
  background: linear-gradient(90deg, #4ADE80, #22D3EE);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pb-intro-sub {
  font-size: 17px;
  color: rgba(255,255,255,.45);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Floating card shell */
.pb-shell {
  display: grid;
  grid-template-columns: 272px 1fr;
  max-width: 1160px;
  margin: 0 auto;
  min-height: 620px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 24px 80px rgba(0,0,0,.5),
    0 8px 24px rgba(0,0,0,.3);
  position: relative;
  z-index: 2;
  background: #161618;
}

/* ── Left nav ── */
.pb-nav {
  background: #161618;
  padding: 40px 28px 36px;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  border-right: 1px solid rgba(255,255,255,.06);
}
.pb-nav-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.22);
  margin-bottom: 24px;
}
.pb-chapters {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}
.pb-ch {
  display: flex;
  align-items: center;
  gap: 13px;
  background: transparent;
  border: none;
  padding: 11px 13px;
  border-radius: 14px;
  cursor: pointer;
  transition: background .18s;
  font-family: inherit;
  text-align: left;
}
.pb-ch:hover { background: rgba(255,255,255,.05); }
.pb-ch-active { background: rgba(255,255,255,.08); }
.pb-ch-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  flex-shrink: 0;
  transition: background .2s, box-shadow .2s;
}
.pb-ch-active .pb-ch-dot {
  background: #4ADE80;
  box-shadow: 0 0 0 5px rgba(74,222,128,.15);
}
.pb-ch-title {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,.35);
  line-height: 1.3;
  transition: color .18s;
}
.pb-ch-active .pb-ch-title { color: #FFFFFF; font-weight: 600; }
.pb-ch:hover .pb-ch-title { color: rgba(255,255,255,.7); }

/* Progress bar */
.pb-progress-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}
.pb-progress-bar {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,.08);
  border-radius: 99px;
  overflow: hidden;
}
.pb-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4ADE80, #22D3EE);
  border-radius: 99px;
  width: 20%;
  transition: width .4s cubic-bezier(.4,0,.2,1);
}
.pb-progress-txt {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,.25);
  white-space: nowrap;
}

/* ── Right stage ── */
.pb-stage {
  background: #FFFFFF;
  position: relative;
  overflow: hidden;
  border-radius: 0 22px 22px 0;
}

.pb-chapter {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  height: 100%;
}
.pb-chapter-active {
  display: grid;
  animation: pb-slide .32s cubic-bezier(.4,0,.2,1);
}
@keyframes pb-slide {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: none; }
}

/* Illustration pane */
.pb-illo {
  background: #F4F6FA;
  border-right: 1px solid rgba(0,0,0,.06);
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  min-height: 540px;
}
.pb-illo > * {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
.pb-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Animated SVG elements */
.pb0-glow {
  animation: pb-glow-pulse 2.5s ease-in-out infinite;
}
@keyframes pb-glow-pulse {
  0%, 100% { opacity: .55; r: 12; }
  50%       { opacity: 1;   r: 18; }
}
.pb0-beam {
  animation: pb-dash-move 1.5s linear infinite;
}
.pb0-bounce {
  animation: pb-dash-move 1.2s linear infinite reverse;
}
@keyframes pb-dash-move {
  to { stroke-dashoffset: -20; }
}

.pb1-window {
  animation: pb-win-blink 2s ease-in-out infinite;
}
@keyframes pb-win-blink {
  0%, 90%, 100% { opacity: 1; }
  95%           { opacity: .4; }
}
.pb1-arrow {
  stroke-dashoffset: 200;
  animation: pb-draw 1.2s ease forwards .3s;
}
@keyframes pb-draw {
  to { stroke-dashoffset: 0; }
}
.pb1-check {
  animation: pb-pop .4s cubic-bezier(.34,1.56,.64,1) forwards .8s;
  transform-origin: center;
  transform: scale(0);
  opacity: 0;
}
@keyframes pb-pop {
  to { transform: scale(1); opacity: 1; }
}
.pb1-bots {
  animation: pb-float 3s ease-in-out infinite;
}
@keyframes pb-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-14px); }
}

.pb2-arrow {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: pb-draw 1s ease forwards .2s;
}
.pb2-node {
  animation: pb-pop .35s cubic-bezier(.34,1.56,.64,1) both;
}
.pb2-card {
  animation: pb-float 4s ease-in-out infinite;
}

.pb3-pulse {
  animation: pb3-pulse-ring 2.5s ease-in-out infinite;
}
@keyframes pb3-pulse-ring {
  0%, 100% { stroke-width: 2.5; opacity: 1; }
  50%       { stroke-width: 4; opacity: .7; }
}
.pb3-ring {
  animation: pb-spin-slow 20s linear infinite;
  transform-origin: 260px 150px;
}
@keyframes pb-spin-slow { to { stroke-dashoffset: -200; } }
.pb3-edge {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: pb-draw .8s ease forwards;
}
.pb3-badge {
  animation: pb-float 3.5s ease-in-out infinite;
}

.pb4-building {
  animation: pb4-fadein .5s ease forwards;
}
@keyframes pb4-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.pb4-win {
  animation: pb4-shimmer 1.8s ease-in-out infinite;
}
@keyframes pb4-shimmer {
  0%, 100% { opacity: .7; }
  50%       { opacity: 1; filter: drop-shadow(0 0 4px #4ADE80); }
}
.pb4-beacon {
  animation: pb4-beacon-pulse 1.5s ease-in-out infinite;
}
@keyframes pb4-beacon-pulse {
  0%, 100% { r: 8; opacity: 1; }
  50%       { r: 18; opacity: .45; }
}
.pb4-particle {
  animation: pb4-float-particle 3s ease-in-out infinite;
}
@keyframes pb4-float-particle {
  0%, 100% { transform: translateY(0) rotate(0); opacity: .7; }
  33%       { transform: translateY(-20px) rotate(15deg); opacity: 1; }
  66%       { transform: translateY(-10px) rotate(-10deg); opacity: .85; }
}
.pb4-result-card {
  animation: pb4-card-in .5s ease both;
}
@keyframes pb4-card-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.pb4-score {
  animation: pb4-score-in .5s ease both .35s;
}
@keyframes pb4-score-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Text pane */
.pb-text {
  padding: 52px 48px;
  display: flex;
  flex-direction: column;
  gap: 0;
  justify-content: center;
}
.pb-chapter-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #9A9A9A;
  margin-bottom: 14px;
}
.pb-chapter-title {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800;
  letter-spacing: -.03em;
  color: #0A0A0A;
  line-height: 1.18;
  margin: 0 0 18px;
}
.pb-chapter-body {
  font-size: 16px;
  color: #5A5A5A;
  line-height: 1.68;
  margin: 0 0 24px;
  max-width: 380px;
}
.pb-chapter-body code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 13px;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  border-radius: 5px;
  padding: 2px 6px;
  color: #0A0A0A;
}
.pb-callout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #F8FAFC;
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 24px;
  font-size: 14px;
  color: #4A4A4A;
  line-height: 1.55;
}
.pb-callout-icon { font-size: 18px; flex-shrink: 0; line-height: 1; margin-top: 1px; }
.pb-fix-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #3A3A3A;
  background: #F8FAFC;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  padding: 9px 14px;
  margin-bottom: 28px;
  align-self: flex-start;
}
.pb-fix-tag svg { color: #1A7A4A; flex-shrink: 0; }
.pb-fix-tag strong { color: #0A0A0A; font-weight: 700; }

/* Next button */
.pb-next-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #0A0A0A;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  padding: 14px 24px;
  border-radius: 13px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: background .18s, transform .15s, box-shadow .18s;
  align-self: flex-start;
  box-shadow: 0 2px 8px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.07);
}
.pb-next-btn:hover { background: #1A1A1A; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.18), 0 12px 32px rgba(0,0,0,.09); }
.pb-next-btn span { transition: transform .18s; }
.pb-next-btn:hover span { transform: translateX(3px); }

/* Finale chapter extras */
.pb-text-finale { justify-content: center; }
.pb-score-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #F8FAFC;
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 18px;
  padding: 18px 22px;
  margin-bottom: 28px;
  align-self: flex-start;
}
.pb-score-before { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pb-score-after  { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pb-score-n-sm { font-size: 32px; font-weight: 800; letter-spacing: -.04em; color: rgba(0,0,0,.2); line-height: 1; }
.pb-score-n-lg { font-size: 44px; font-weight: 800; letter-spacing: -.05em; color: #1A7A4A; line-height: 1; }
.pb-score-label-sm { font-size: 11px; font-weight: 600; color: #9A9A9A; text-transform: uppercase; letter-spacing: .07em; }
.pb-score-grade-a {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 13px;
  background: rgba(26,122,74,.1);
  color: #1A7A4A;
  font-size: 22px;
  font-weight: 800;
  margin-left: 4px;
}
.pb-finale-btn {
  display: inline-flex;
  align-items: center;
  background: #1A7A4A;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
  padding: 16px 28px;
  border-radius: 14px;
  text-decoration: none;
  margin-bottom: 10px;
  transition: background .18s, transform .15s;
  box-shadow: 0 2px 8px rgba(26,122,74,.25), 0 8px 28px rgba(26,122,74,.15);
  align-self: flex-start;
}
.pb-finale-btn:hover { background: #156A3C; transform: translateY(-1px); }
.pb-finale-note { font-size: 12px; color: #9A9A9A; }

/* Responsive */
@media (max-width: 1200px) {
  .pb-shell { margin: 0 24px; }
}
@media (max-width: 1000px) {
  .pb-shell { grid-template-columns: 230px 1fr; }
  .pb-text { padding: 40px 36px; }
}
@media (max-width: 820px) {
  .pb-shell { grid-template-columns: 1fr; border-radius: 20px; margin: 0 16px; }
  .pb-nav {
    flex-direction: row;
    align-items: center;
    padding: 18px 16px;
    gap: 10px;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .pb-nav-label { display: none; }
  .pb-chapters { flex-direction: row; gap: 6px; flex: 1; flex-wrap: nowrap; }
  .pb-ch { padding: 8px 14px; border-radius: 99px; white-space: nowrap; }
  .pb-ch-title { font-size: 12px; }
  .pb-progress-wrap { display: none; }
  .pb-stage { border-radius: 0 0 20px 20px; }
  .pb-chapter { grid-template-columns: 1fr; }
  .pb-illo { min-height: 280px; padding: 20px; border-right: none; border-bottom: 1px solid rgba(0,0,0,.06); }
  .pb-text { padding: 28px 24px 36px; }
  .pb-chapter-body { max-width: none; }
}
@media (max-width: 500px) {
  .pb-intro-h2 { font-size: 26px; }
  .pb-ch { padding: 7px 12px; }
  .pb-ch-title { font-size: 11px; }
  .pb-next-btn { font-size: 14px; padding: 12px 20px; }
  .pb-score-row { padding: 14px 16px; gap: 10px; }
}