/*!
 * roininja — home template styles.
 * Ported verbatim from the source page's own inline <style> blocks (fidelity by
 * construction). Mechanical rewrites only: url(/assets/...) -> url(../img/...).
 * Webfonts live in roininja-fonts.css, enqueued alongside this file.
 * Do not re-author these rules; measure the source and patch instead.
 */
:root {
    --bg: #0a0a0a;
    --bg-soft: #0f0f0f;
    --surface: #141414;
    --surface-2: #1a1a1a;
    --line: rgba(255,255,255,0.07);
    --line-2: rgba(255,255,255,0.14);
    --text: #fafafa;
    --dim: #8a8a8a;
    --mute: #555555;
    --accent: #d4ff3d;
    --max: 1280px;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Inter Tight', -apple-system, sans-serif; }
  html { scroll-behavior: smooth; background: var(--bg); scroll-padding-top: 84px; overflow-x: hidden; overflow-x: clip; }
  body {
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    font-weight: 400;
    letter-spacing: -0.005em;
  }
  .display { letter-spacing: -0.035em; line-height: 0.96; font-weight: 700; }
  .container { max-width: var(--max); margin: 0 auto; padding: 0 32px; }
  a { color: inherit; text-decoration: none; }

  /* NAV */
  nav.top {
    position: fixed; inset: 0 0 auto 0; z-index: 50;
    background: rgba(10,10,10,0.85);
    backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--line);
  }
  nav.top .container {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 18px; padding-bottom: 18px;
  }
  .brand-block { display: inline-flex; flex-direction: column; gap: 7px; line-height: 1; }
  .brand-block a.brand { text-decoration: none; color: inherit; }
  .brand {
    font-weight: 800; font-size: 26px; letter-spacing: -0.035em;
    line-height: 1; display: inline-flex; align-items: baseline; gap: 0;
  }
  .brand .roi { color: var(--accent); }
  .brand .ninja { color: var(--text); }
  .nav-mid { display: flex; gap: 36px; font-size: 13.5px; color: var(--dim); }
  .nav-mid a { transition: color .15s ease; }
  .nav-mid a:hover { color: var(--text); }
  .nav-cta {
    font-size: 14px; padding: 11px 18px; border-radius: 999px;
    background: var(--text); color: var(--bg); font-weight: 600;
    transition: opacity .15s ease;
  }
  .nav-cta:hover { opacity: 0.85; }

  /* HERO */
  .hero {
    padding: 56px 0 32px;
    position: relative;
    overflow: hidden;
    text-align: center;
  }
  .hero-brand {
    margin: 0 auto 48px;
    align-items: center;
    gap: 9px;
  }
  .hero-brand .brand { font-size: 34px; letter-spacing: -0.04em; }
  .hero::before {
    content: ''; position: absolute; top: -160px; left: 50%; transform: translateX(-50%);
    width: 960px; height: 600px; max-width: 130vw;
    background: radial-gradient(ellipse at center, rgba(212,255,61,0.12), rgba(212,255,61,0) 66%);
    pointer-events: none; z-index: 0; filter: blur(8px);
  }
  .hero-bg {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
      linear-gradient(to right, rgba(255,255,255,0.035) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 38%, black 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 38%, black 0%, transparent 75%);
  }
  .hero .container { position: relative; z-index: 1; }
  .hero-meta {
    display: flex; align-items: center; gap: 14px;
    font-size: 12px; color: var(--dim);
    letter-spacing: 0.14em; text-transform: uppercase;
    margin-bottom: 56px;
  }
  .hero-meta .bar { width: 32px; height: 1px; background: var(--accent); }
  h1.hero-h1 {
    font-size: clamp(44px, 7vw, 100px);
    max-width: 1180px;
    margin: 0 auto 48px;
  }
  h1.hero-h1 .line { display: block; }
  h1.hero-h1 .em { color: var(--dim); font-weight: 400; }
  h1.hero-h1 .accent { color: var(--accent); }

  .hero-grid {
    display: flex; flex-direction: column; align-items: center; gap: 28px;
    margin-bottom: 24px;
  }
  .hero-body { font-size: 19px; color: var(--dim); max-width: 680px; line-height: 1.55; margin: 0 auto; text-align: center; }
  .hero-body b { color: var(--text); font-weight: 600; }
  .hero-cta { margin-top: 4px; }
  .btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 17px 28px; border-radius: 999px;
    font-size: 15px; font-weight: 600;
    transition: transform .15s ease, background .15s ease;
    cursor: pointer; border: none;
  }
  .btn-primary { background: var(--accent); color: #0a0a0a; }
  .btn-primary:hover { transform: translateY(-1px); }
  .btn .arr { transition: transform .15s ease; }
  .btn:hover .arr { transform: translateX(3px); }
  .micro { font-size: 12.5px; color: var(--mute); letter-spacing: 0.06em; }
  .micro .sep { margin: 0 10px; color: var(--mute); }

  /* press strip — its own section */
  .press-section {
    padding: 56px 0; border-bottom: 1px solid var(--line);
    background: var(--bg);
  }
  .press-section .press-label {
    font-size: 11px; color: var(--mute); letter-spacing: 0.2em;
    text-transform: uppercase; margin-bottom: 28px; text-align: center;
  }
  .press-section .press-row {
    display: flex; flex-wrap: wrap; gap: 36px 44px;
    align-items: center; justify-content: center;
  }
  /* legacy hero press strip styles (kept for reference) */
  .press { padding: 28px 0 0; margin-top: 24px; }
  .press-label {
    font-size: 11px; color: var(--mute); letter-spacing: 0.18em;
    text-transform: uppercase; margin-bottom: 28px;
  }
  .press-row {
    display: flex; flex-wrap: wrap; gap: 44px; align-items: center;
    opacity: 0.85;
  }
  .press-row .lgo {
    color: var(--dim); font-size: 18px; line-height: 1;
    filter: grayscale(1); transition: color .2s ease, opacity .2s ease;
    opacity: 0.75;
  }
  .press-row .lgo:hover { color: var(--text); opacity: 1; }
  .lgo-coindesk { font-family: 'Playfair Display', serif; font-weight: 800; letter-spacing: -0.02em; font-size: 21px; }
  .lgo-coindesk .bullet { color: var(--accent); margin-right: 5px; }
  .lgo-cointele { font-family: 'Inter Tight', sans-serif; font-weight: 700; letter-spacing: -0.025em; font-size: 19px; }
  .lgo-cointele .t { font-weight: 400; }
  .lgo-decrypt { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 19px; letter-spacing: -0.01em; }
  .lgo-decrypt::after { content: ']'; color: var(--accent); margin-left: 1px; }
  .lgo-decrypt::before { content: '['; color: var(--accent); margin-right: 1px; }
  .lgo-block { font-family: 'Inter Tight', sans-serif; font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: 0.18em; padding: 6px 10px; border: 1px solid currentColor; }
  .lgo-bankless { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 19px; letter-spacing: -0.01em; }
  .lgo-bankless .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: 1px; }
  .lgo-bloomberg { font-family: 'Playfair Display', serif; font-weight: 700; font-style: italic; font-size: 21px; letter-spacing: -0.02em; }
  .lgo-forbes { font-family: 'Playfair Display', serif; font-weight: 800; font-size: 19px; text-transform: uppercase; letter-spacing: 0.04em; }
  .lgo-briefing { font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 17px; }
  .lgo-briefing .b { font-weight: 700; }

  /* SECTIONS */
  section { padding: 140px 0; border-bottom: 1px solid var(--line); }
  .eyebrow {
    font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 28px;
    display: flex; align-items: center; gap: 14px;
  }
  .eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--accent); }
  h2.section-h {
    font-size: clamp(40px, 5.4vw, 76px);
    font-weight: 700;
    letter-spacing: -0.03em; line-height: 0.98;
    max-width: 980px;
    margin-bottom: 56px;
  }
  h2.section-h .dim { color: var(--dim); font-weight: 400; }

  /* RESULTS */
  .results-big {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin-bottom: 96px;
  }
  .result {
    padding: 36px 56px 36px 0;
    border-right: 1px solid var(--line);
    min-width: 0;
  }
  .result + .result { padding-left: 32px; }
  .result:last-child { border-right: none; padding-right: 0; }
  .result .num {
    font-size: clamp(30px, 3.4vw, 44px); font-weight: 700;
    letter-spacing: -0.03em; line-height: 1;
    margin-bottom: 14px;
    white-space: nowrap;
  }
  .result .num .arrow { color: rgba(250,250,250,0.32); font-weight: 500; padding: 0 4px; }
  .result .desc { font-size: 13.5px; color: var(--dim); line-height: 1.5; max-width: 240px; }

  /* case */
  .case-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: start; }
  .case-grid + .case-grid { margin-top: 72px; padding-top: 72px; border-top: 1px solid var(--line); }
  /* zigzag — flip text and visual on every even case + mirror column widths */
  .case-grid:nth-of-type(even) { grid-template-columns: 1fr 1.3fr; }
  .case-grid:nth-of-type(even) > div:first-child { order: 2; }
  .case-grid:nth-of-type(even) > .case-visual { order: 1; }
  /* Load More state */
  .case-grid.is-hidden { display: none !important; }
  .case-grid.is-revealing {
    animation: caseReveal .5s cubic-bezier(.2,.7,.3,1) both;
  }
  @keyframes caseReveal {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .cases-loadmore-wrap {
    margin-top: 64px;
    display: flex; justify-content: center;
  }
  .cases-loadmore {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 28px;
    background: transparent;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    color: var(--text);
    font-family: inherit;
    font-size: 14px; font-weight: 600;
    letter-spacing: -0.005em;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
  }
  .cases-loadmore:hover {
    border-color: var(--accent);
    background: rgba(212, 255, 61, 0.08);
    color: var(--accent);
  }
  .cases-loadmore .count { color: var(--dim); }
  .cases-loadmore:hover .count { color: var(--accent); opacity: 0.7; }
  .cases-loadmore .arr { transition: transform .2s ease; }
  .cases-loadmore:hover .arr { transform: translateY(2px); }
  .case-tag {
    font-size: 11px; color: var(--accent); letter-spacing: 0.18em;
    text-transform: uppercase; margin-bottom: 24px;
  }
  .case-h {
    font-weight: 700;
    font-size: clamp(28px, 3.2vw, 42px); letter-spacing: -0.02em;
    line-height: 1.05; margin-bottom: 28px; max-width: 600px;
  }
  /* Brand kicker (above case headline) */
  .case-kicker {
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(212,255,61,0.22);
    max-width: 600px;
  }
  .ck-brand {
    font-family: 'Inter Tight', sans-serif;
    font-weight: 900;
    font-size: clamp(20px, 1.8vw, 26px);
    letter-spacing: -0.015em;
    color: #d4ff3d;
    text-transform: uppercase;
    margin-bottom: 7px;
    line-height: 1;
    display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  }
  .ck-nda {
    font-family: 'Inter Tight', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: rgba(212,255,61,0.65);
    padding: 3px 8px;
    border: 1px solid rgba(212,255,61,0.32);
    border-radius: 4px;
    text-transform: uppercase;
  }
  .ck-meta {
    font-family: 'Inter Tight', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: rgba(250, 250, 250, 0.5);
    text-transform: uppercase;
    line-height: 1.5;
  }
  .case-body { color: var(--dim); font-size: 16px; line-height: 1.65; margin-bottom: 32px; max-width: 580px; }
  .case-quote {
    margin-top: 28px; padding-left: 24px;
    border-left: 1px solid var(--accent);
    font-size: 19px; line-height: 1.5; color: var(--text);
    max-width: 600px; font-weight: 400;
  }
  .case-attr { margin-top: 14px; padding-left: 24px; font-size: 14px; color: var(--dim); letter-spacing: 0.04em; }

  .case-visual { display: flex; flex-direction: column; gap: 0; }
  .case-chart-wrap {
    border: 1px solid var(--line);
    background: var(--bg-soft);
    padding: 24px 24px 16px;
    border-radius: 4px;
    margin-bottom: 24px;
  }
  .case-chart-h {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 11px; color: var(--mute); letter-spacing: 0.14em; text-transform: uppercase;
    margin-bottom: 8px;
  }
  .case-chart-h .delta { color: var(--accent); font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 14px; }
  .case-chart-sub { font-size: 12.5px; color: var(--dim); margin-bottom: 16px; }
  .case-screenshot-wrap {
    border: 1px solid var(--line);
    background: var(--bg-soft);
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 24px;
  }
  .case-screenshot {
    width: 100%; height: auto; display: block;
    border-radius: 3px;
    background: #fff;
  }
  .case-screenshot-wrap figcaption {
    margin: 10px 4px 2px; font-size: 11px;
    color: var(--mute); letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .case-stats {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    border-top: 1px solid var(--line);
  }
  .case-stat {
    padding: 18px 16px 18px 0; border-bottom: 1px solid var(--line);
  }
  .case-stat:nth-child(even) { padding-left: 16px; }
  .case-stat:nth-child(odd) { border-right: 1px solid var(--line); }
  .case-stat .v {
    font-size: 28px;
    font-weight: 700; letter-spacing: -0.02em; color: var(--text);
    display: block; margin-bottom: 2px;
  }
  .case-stat .k { font-size: 12px; color: var(--dim); letter-spacing: 0.04em; }

  /* OFFER */
  .pillars {
    display: grid; grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--line);
    margin-bottom: 80px;
  }
  .pillar {
    padding: 48px 48px 48px 0;
    border-bottom: 1px solid var(--line);
  }
  .pillar:nth-child(odd) { border-right: 1px solid var(--line); padding-right: 48px; }
  .pillar:nth-child(even) { padding-left: 48px; padding-right: 0; }
  .pillar-num {
    font-size: 14px; color: var(--dim); font-weight: 500;
    margin-bottom: 18px; letter-spacing: 0.04em;
  }
  .pillar-num span { color: var(--accent); }
  .pillar-h {
    font-size: 26px; font-weight: 700; letter-spacing: -0.02em;
    line-height: 1.15; margin-bottom: 14px;
  }
  .pillar-d { color: var(--dim); font-size: 15px; line-height: 1.55; max-width: 460px; }

  /* dashboard showcase */
  .dash-showcase {
    margin-bottom: 80px;
    border-top: 1px solid var(--line);
    padding-top: 56px;
  }
  .dash-showcase .head {
    display: flex; justify-content: space-between; align-items: end; margin-bottom: 32px; flex-wrap: wrap; gap: 16px;
  }
  .dash-showcase .head .title {
    font-size: clamp(22px, 2.4vw, 30px); font-weight: 600; letter-spacing: -0.02em; max-width: 600px;
  }
  .dash-showcase .head .title .dim { color: var(--dim); }
  .dash-showcase .head .sub { font-size: 12px; color: var(--mute); letter-spacing: 0.16em; text-transform: uppercase; }
  .dash-frame {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 32px 0 24px;
    position: relative;
  }
  .chart-legend {
    display: flex; gap: 28px; align-items: center;
    font-size: 12px; color: var(--dim); letter-spacing: 0.04em;
    margin-bottom: 24px;
  }
  .chart-legend .item { display: inline-flex; align-items: center; gap: 8px; }
  .chart-legend .swatch { display: inline-block; width: 18px; height: 2px; }
  .chart-legend .swatch.inv { background: var(--mute); }
  .chart-legend .swatch.ret { background: var(--accent); }
  .dash-chart { display: block; width: 100%; height: auto; }
  .chart-anno {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    border-top: 1px solid var(--line); margin-top: 8px;
  }
  .chart-anno .item { padding: 22px 24px 0 0; }
  .chart-anno .item:last-child { padding-left: 24px; border-left: 1px solid var(--line); }
  .chart-anno .day { font-size: 11px; color: var(--accent); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 8px; }
  .chart-anno .v { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; color: var(--text); }
  .chart-anno .v .dim { color: var(--dim); font-weight: 400; }

  .bonus-list {
    margin-bottom: 64px;
    padding: 40px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    display: grid; grid-template-columns: 200px 1fr; gap: 48px; align-items: center;
  }
  .bonus-label {
    font-size: 11px; color: var(--accent); letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  .bonus-items { display: flex; flex-wrap: wrap; gap: 12px; }
  .bonus-items span {
    font-size: 14px; color: var(--text); padding: 8px 16px;
    border: 1px solid var(--line-2); border-radius: 999px;
  }

  .bridge-line {
    font-size: clamp(22px, 2.5vw, 32px); line-height: 1.3;
    color: var(--text); max-width: 880px; margin-bottom: 48px;
    letter-spacing: -0.02em; font-weight: 500;
  }
  .bridge-line .dim { color: var(--dim); }

  /* TEAM */
  .team-intro { display: grid; grid-template-columns: 1.5fr 1fr; gap: 80px; align-items: start; margin-bottom: 80px; }
  .team-intro h2 { margin-bottom: 0; }
  .team-meta {
    border-left: 1px solid var(--line); padding-left: 32px;
    font-size: 14px; color: var(--dim); line-height: 1.7;
  }
  .team-meta b { color: var(--text); display: block; font-weight: 600; margin-bottom: 8px; }

  .roles {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
    border-top: 1px solid var(--line);
    margin-bottom: 120px;
  }
  .role {
    padding: 40px 32px 40px 0;
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
  }
  .role:nth-child(3n) { border-right: none; padding-right: 0; }
  .role:nth-child(3n+2), .role:nth-child(3n+3) { padding-left: 32px; }
  .role:nth-last-child(-n+3) { border-bottom: none; }
  .role-num { font-size: 11px; color: var(--accent); letter-spacing: 0.18em; margin-bottom: 16px; }
  .role-t { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 10px; }
  .role-d { font-size: 14px; color: var(--dim); line-height: 1.55; }

  .timeline-h {
    font-size: clamp(28px, 3.2vw, 44px);
    font-weight: 700; letter-spacing: -0.02em; margin-bottom: 56px; max-width: 700px;
  }
  .tl {
    display: grid; grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--line);
  }
  .tl-cell {
    padding: 40px 28px;
    border-right: 1px solid var(--line);
  }
  .tl-cell:first-child { padding-left: 0; }
  .tl-cell:last-child { padding-right: 0; border-right: none; }
  .tl-stage {
    font-size: 14px; color: var(--accent);
    letter-spacing: 0.06em; margin-bottom: 20px; font-weight: 500;
  }
  .tl-num {
    font-size: 56px; font-weight: 700; letter-spacing: -0.03em;
    line-height: 0.95; margin-bottom: 20px;
  }
  .tl-num .unit { font-size: 18px; color: var(--dim); font-weight: 500; margin-left: 6px; }
  .tl-t { font-size: 18px; font-weight: 600; margin-bottom: 12px; letter-spacing: -0.01em; }
  .tl-d { font-size: 13.5px; color: var(--dim); line-height: 1.6; }

  /* PRICING */
  .pricing { background: var(--bg-soft); }
  .price-includes {
    padding: 40px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    display: grid; grid-template-columns: 200px 1fr; gap: 48px; align-items: start;
    margin-bottom: 64px;
  }
  .price-includes .lbl { font-size: 11px; color: var(--accent); letter-spacing: 0.18em; text-transform: uppercase; }
  .price-includes .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 48px; }
  .price-includes .grid div { font-size: 14.5px; color: var(--dim); padding-left: 24px; position: relative; }
  .price-includes .grid div::before {
    content: '+'; position: absolute; left: 0; color: var(--accent); font-weight: 500;
  }

  .plans {
    display: grid; grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    margin-bottom: 56px;
  }
  .plan {
    padding: 40px 28px 40px 0;
    border-right: 1px solid var(--line);
    position: relative;
  }
  .plan:nth-child(n+2) { padding-left: 28px; padding-right: 28px; }
  .plan:last-child { border-right: none; padding-right: 0; }
  .plan.featured { background: var(--surface); margin: -1px 0; padding-left: 28px; padding-right: 28px; }
  .plan.featured::before {
    content: 'RECOMMENDED'; position: absolute; top: -10px; left: 28px;
    background: var(--accent); color: #0a0a0a;
    padding: 4px 10px; font-size: 12px; font-weight: 700;
    letter-spacing: 0.16em; border-radius: 4px;
  }
  .plan-n { font-size: 14px; color: var(--dim); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 14px; }
  .plan-p {
    font-size: 40px; font-weight: 700;
    letter-spacing: -0.025em; line-height: 1; margin-bottom: 8px;
  }
  .plan-p .per { font-size: 14px; color: var(--dim); font-weight: 400; margin-left: 4px; }
  .plan-cap { font-size: 12.5px; color: var(--accent); margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--line); letter-spacing: 0.02em; }
  .plan ul { list-style: none; }
  .plan li {
    font-size: 13.5px; color: var(--dim); line-height: 1.5;
    padding: 10px 0; border-bottom: 1px solid var(--line);
  }
  .plan li:last-child { border-bottom: none; }
  .plan li b { color: var(--text); font-weight: 600; }
  .plan li.muted { color: var(--mute); }

  .terms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-bottom: 56px; border-top: 1px solid var(--line); }
  .term { padding: 32px 32px 32px 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .term:nth-child(3n) { border-right: none; padding-right: 0; }
  .term:nth-child(n+2) { padding-left: 32px; }
  .term .ttl { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 10px; }
  .term .ttl .small { color: var(--dim); font-weight: 400; font-size: 14px; margin-left: 8px; }
  .term p { color: var(--dim); font-size: 14px; line-height: 1.55; }

  .fine {
    font-size: 14px; color: var(--dim); line-height: 1.65;
    max-width: 880px; margin-bottom: 24px;
  }
  .fine b { color: var(--text); }
  .fine.intake b { color: var(--accent); }

  /* COMPARISON */
  .compare-wrap { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 24px; }
  table.compare {
    width: 100%; border-collapse: collapse; background: transparent;
  }
  table.compare th, table.compare td {
    padding: 22px 24px; text-align: left; vertical-align: top;
    font-size: 14.5px; border-bottom: 1px solid var(--line);
  }
  table.compare thead th {
    font-weight: 600;
    color: var(--dim); font-size: 14px; letter-spacing: 0.02em;
    padding-top: 28px; padding-bottom: 28px;
    border-bottom: 1px solid var(--line-2);
  }
  table.compare thead th.us { color: var(--accent); }
  table.compare tbody th {
    font-weight: 500;
    color: var(--dim); padding-left: 0;
    width: 22%;
  }
  table.compare td { color: var(--dim); }
  table.compare td.us { color: var(--text); font-weight: 500; }
  table.compare tr:last-child th, table.compare tr:last-child td { border-bottom: none; }
  table.compare th:first-child, table.compare td:first-child { padding-left: 0; }
  table.compare th:last-child, table.compare td:last-child { padding-right: 0; }

  /* FAQ */
  details {
    border-bottom: 1px solid var(--line);
    padding: 0;
  }
  details:first-of-type { border-top: 1px solid var(--line); }
  summary {
    padding: 32px 0; cursor: pointer; list-style: none;
    display: grid; grid-template-columns: 1fr 40px; gap: 24px; align-items: baseline;
  }
  summary::-webkit-details-marker { display: none; }
  summary .q-t { font-size: clamp(18px, 1.9vw, 22px); font-weight: 600; letter-spacing: -0.015em; color: var(--text); line-height: 1.3; }
  summary .q-i { font-size: 22px; color: var(--dim); text-align: right; transition: transform .2s ease; }
  details[open] summary .q-i { transform: rotate(45deg); color: var(--accent); }
  .answer {
    padding: 0 0 36px 0; max-width: 820px;
    color: var(--dim); font-size: 15.5px; line-height: 1.7;
  }
  .answer b { color: var(--text); }

  /* FINAL */
  .final { padding: 180px 0 160px; text-align: left; }
  .final-h {
    font-size: clamp(44px, 6.5vw, 100px); font-weight: 700;
    letter-spacing: -0.035em; line-height: 0.98;
    max-width: 1100px; margin-bottom: 40px;
  }
  .final-h .accent { color: var(--accent); }
  .final-h .dim { color: var(--dim); font-weight: 400; }
  .final p.final-body {
    font-size: 18px; color: var(--dim); max-width: 680px;
    margin-bottom: 48px; line-height: 1.6;
  }
  .final-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
  .final-counter {
    font-size: 14px; color: var(--dim);
    letter-spacing: 0.04em;
    border-left: 1px solid var(--line-2); padding-left: 20px;
  }
  .final-counter b { color: var(--accent); font-weight: 600; }

  /* FOOTER */
  footer.site {
    padding: 64px 0 48px;
    border-top: 1px solid var(--line);
  }
  /* The footer manages its own two-row layout now, so the container is a plain block
     rather than the old single flex row. */
  footer.site .container { display: block; }
  footer.site .brand { font-size: 22px; }
  footer.site .legal { font-size: 12.5px; color: var(--mute); letter-spacing: 0.04em; }

  .foot-top {
    display: flex; align-items: flex-start; justify-content: space-between;
    flex-wrap: wrap; gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--line);
  }
  .foot-brand { max-width: 460px; }
  .foot-tagline {
    margin-top: 20px;
    font-size: 15px; line-height: 1.6; color: var(--dim);
  }
  .foot-bottom {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 20px;
    padding-top: 28px;
  }

  @media (max-width: 860px) {
    footer.site .brand { font-size: 22px; }
    .foot-top { flex-direction: column; gap: 28px; padding-bottom: 32px; }
    .foot-bottom { flex-direction: column; align-items: flex-start; gap: 16px; }
  }

  /* LEAD SECTION — ViralCoach-style, compressed */
  .lead-section {
    padding: 8px 0 64px;
    border-bottom: 1px solid var(--line);
    background: var(--bg);
  }
  .lead-section .container { max-width: 600px; }
  .lead-card {
    background: #fff; color: #1a1a1a;
    padding: 22px 28px 22px; border-radius: 4px;
    display: flex; flex-direction: column; gap: 6px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.45);
    color-scheme: light;
  }
  .lead-card * { font-family: 'Inter Tight', sans-serif; }
  .lead-card .field { display: flex; flex-direction: column; gap: 2px; }
  /* Standalone inputs (First/Last name) — get their own border */
  .lead-card > .field > input[type=text],
  .lead-card > .field > input[type=email],
  .lead-card > .field > input[type=tel] {
    background-color: #fff !important;
    color: #1a1a1a !important;
    border: 1px solid #b8b8b8 !important;
    padding: 10px 12px !important;
    font-size: 14px; border-radius: 4px; outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
    width: 100%;
    -webkit-text-fill-color: #1a1a1a;
    color-scheme: light;
    box-sizing: border-box;
  }
  .lead-card > .field > input::placeholder { color: #6f6f6f !important; font-style: normal; opacity: 1; }
  .lead-card > .field > input:hover { border-color: #888 !important; }
  .lead-card > .field > input:focus { border-color: #1a1a1a !important; box-shadow: 0 0 0 3px rgba(26,26,26,0.08); }
  .lead-card input:-webkit-autofill,
  .lead-card input:-webkit-autofill:hover,
  .lead-card input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 30px #fff inset !important;
    -webkit-text-fill-color: #1a1a1a !important;
    transition: background-color 5000s ease-in-out 0s;
  }
  /* Wrapped inputs (with icon or flag) — border is on the wrapper */
  .lead-card .input-group {
    display: flex; align-items: stretch;
    background: #fff !important;
    border: 1px solid #b8b8b8;
    border-radius: 4px;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
    color-scheme: light;
  }
  .lead-card .input-group:hover { border-color: #888; }
  .lead-card .input-group:focus-within { border-color: #1a1a1a; box-shadow: 0 0 0 3px rgba(26,26,26,0.08); }
  .lead-card .input-group .ig-prefix {
    display: inline-flex; align-items: center;
    padding: 0 4px 0 11px;
    color: #8a8a8a; pointer-events: none;
    font-size: 14px; line-height: 1;
    flex-shrink: 0; user-select: none;
  }
  .lead-card .input-group .ig-prefix.flag { padding: 0 0 0 10px; font-size: 15px; gap: 3px; }
  .lead-card .input-group .ig-prefix.flag::after {
    content: '▾'; color: #8a8a8a; font-size: 12px; margin-left: 3px;
  }
  .lead-card .input-group input {
    flex: 1; min-width: 0;
    border: none !important;
    background: transparent !important;
    color: #1a1a1a !important;
    padding: 10px 12px 10px 6px !important;
    font-size: 14px; outline: none;
    -webkit-text-fill-color: #1a1a1a;
    color-scheme: light;
    box-sizing: border-box;
  }
  .lead-card .input-group input::placeholder { color: #6f6f6f !important; opacity: 1; }
  .lead-card .group-label {
    font-weight: 700; font-size: 13.5px; color: #1a1a1a;
    margin-top: 8px; letter-spacing: -0.005em;
  }
  .lead-card .radio-list {
    display: flex; flex-direction: column; gap: 0; margin-top: 0;
  }
  .lead-card .radio-list label {
    display: flex; align-items: center; gap: 9px;
    padding: 3px 0; cursor: pointer;
    font-size: 13.5px; color: #1a1a1a; line-height: 1.2;
  }
  .lead-card .radio-list label:hover { color: #0a0a0a; }
  .lead-card .radio-list input[type=radio] {
    appearance: none; -webkit-appearance: none;
    width: 15px; height: 15px;
    border: 1.5px solid #aaa; border-radius: 50%;
    margin: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; background: #fff;
    transition: border-color .15s ease;
  }
  .lead-card .radio-list input[type=radio]:checked { border-color: #1a1a1a; border-width: 2px; }
  .lead-card .radio-list input[type=radio]:checked::after {
    content: ''; width: 6px; height: 6px; border-radius: 50%; background: #1a1a1a;
  }
  .lead-card button.submit {
    background: var(--accent); color: #0a0a0a;
    padding: 12px 22px; border: none; border-radius: 4px;
    font-weight: 700; font-size: 14.5px; letter-spacing: -0.005em;
    cursor: pointer; transition: transform .15s ease, box-shadow .15s ease;
    margin-top: 10px;
    align-self: stretch;
    box-shadow: 0 6px 18px rgba(212,255,61,0.25);
  }
  .lead-card button.submit:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(212,255,61,0.35); }

  .form-reviews {
    margin-top: 28px;
    display: flex; flex-direction: column; align-items: center;
    gap: 16px;
  }
  .form-reviews .rating {
    display: flex; align-items: center; gap: 10px;
  }
  .form-reviews .logos-row {
    display: flex; align-items: center; justify-content: center;
    gap: 24px; flex-wrap: nowrap;
  }
  .form-reviews .stars-bar {
    color: #F5A623; font-size: 18px; letter-spacing: 2px; line-height: 1;
  }
  .form-reviews .based-on {
    color: var(--text); font-size: 14px; font-weight: 500;
  }
  .form-reviews .divider {
    width: 1px; height: 26px; background: rgba(255,255,255,0.22);
  }
  .form-reviews .review-logo {
    display: inline-flex; align-items: center; gap: 8px;
    transition: transform .15s ease, opacity .15s ease;
    color: var(--text); text-decoration: none;
    opacity: 0.92;
  }
  .form-reviews .review-logo:hover { transform: translateY(-1px); opacity: 1; }
  .form-reviews .review-logo svg { width: 30px; height: 30px; display: block; flex-shrink: 0; }
  .form-reviews .rl-label {
    font-size: 13.5px; font-weight: 600; letter-spacing: -0.005em;
    color: var(--text);
  }

  /* MARQUEE — clients */
  .marquee-section { padding: 4px 0 8px; }
  .marquee-label {
    font-size: 11px; color: var(--mute); letter-spacing: 0.2em;
    text-transform: uppercase; margin-bottom: 20px; text-align: center;
  }
  .marquee-wrap {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  .marquee-wrap + .marquee-wrap { margin-top: 14px; }
  .marquee {
    display: flex; gap: 14px; width: max-content;
    animation: marquee 280s linear infinite;
  }
  .marquee.reverse { animation-direction: reverse; animation-duration: 320s; }
  .marquee:hover { animation-play-state: paused; }
  @keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }
  .m-chip {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 16px 40px;
    min-height: 100px;
    transition: opacity .2s ease, transform .2s ease;
    opacity: 0.92;
    flex-shrink: 0;
  }
  .m-chip:hover { opacity: 1; transform: translateY(-1px); }
  .m-chip img {
    height: 64px; width: auto;
    max-width: 320px;
    display: block;
    object-fit: contain;
  }
  .m-chip.l-binance {
    color: #fafafa; font-weight: 800; font-size: 30px; letter-spacing: -0.02em;
    font-family: 'Inter Tight', sans-serif;
  }
  .m-chip.l-microstrategy {
    color: #fafafa; font-weight: 700; font-size: 24px; letter-spacing: -0.015em;
    font-family: 'Inter Tight', sans-serif;
  }
  .m-chip.l-leonbet {
    color: #fafafa; font-weight: 900; font-size: 28px; letter-spacing: -0.02em;
    font-family: 'Inter Tight', sans-serif; font-style: italic;
  }
  .m-chip.l-solana { background: linear-gradient(135deg, #9945ff20, #14f19520); border-color: #9945ff40; }
  .m-chip.l-injective { color: #00f5ff; }
  .m-chip.l-okx { font-weight: 800; letter-spacing: -0.02em; font-size: 19px; }
  .m-chip.l-tezos { font-family: 'Playfair Display', serif; font-weight: 700; }
  .m-chip.l-polkadot { background: linear-gradient(135deg, #e6007a20, transparent); border-color: #e6007a40; }
  .m-chip.l-internetcomputer { font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: 0; font-size: 15px; text-transform: uppercase; }
  .m-chip.l-neo { font-weight: 700; }
  .m-chip.l-mew { font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: 19px; }
  .m-chip.l-daomaker { font-weight: 700; }
  .m-chip.l-dexcheck { font-family: 'Inter Tight'; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 15px; }
  .m-chip.l-cheelee { font-family: 'Inter Tight'; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-size: 15px; }
  .m-chip.l-lingo { font-family: 'Inter Tight'; font-weight: 800; letter-spacing: 0.16em; padding: 18px 22px; border-width: 2px; }
  .m-chip.l-spaceid { font-family: 'Space Grotesk', sans-serif; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; font-size: 15px; }
  .m-chip.l-gtprotocol { font-family: 'Inter Tight'; font-weight: 600; }
  .m-chip.l-aethir { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 19px; }
  .m-chip.l-humanity { font-family: 'Inter Tight'; font-weight: 700; line-height: 1; font-size: 14px; padding: 14px 22px; }
  .m-chip.l-humanity .stack { display: flex; flex-direction: column; gap: 4px; }
  .m-chip.l-cookie3 { font-weight: 700; }
  .m-chip.l-privacy { font-family: 'Space Grotesk', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; font-size: 14px; }
  .m-chip.l-satoshi { font-family: 'Playfair Display', serif; font-weight: 700; font-style: italic; font-size: 20px; }
  .m-chip.l-wepad { font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 19px; }
  .m-chip.l-htx { font-family: 'Inter Tight'; font-weight: 800; font-size: 20px; letter-spacing: -0.02em; }
  .m-chip.l-htx .accent { color: #00C8B4; }
  .m-chip.l-b2prime { font-family: 'Inter Tight'; font-weight: 700; font-size: 17px; }
  .m-chip.l-b2prime .num { color: var(--accent); font-weight: 800; }
  .m-chip.l-onexbet { font-family: 'Inter Tight'; font-weight: 900; font-size: 18px; letter-spacing: -0.01em; text-transform: uppercase; }
  .m-chip.l-onexbet .x { color: #2ecc40; }
  .m-chip.l-onexbet .bet { color: #f4b30a; }
  .m-chip.l-b2broker { font-family: 'Inter Tight'; font-weight: 700; font-size: 17px; letter-spacing: -0.005em; }
  .m-chip.l-b2broker .num { color: #1A6FE3; font-weight: 800; }
  .m-chip.l-blackcatcard { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: -0.005em; text-transform: lowercase; }
  .m-chip.l-blackcatcard .ico { font-size: 17px; margin-right: 4px; }
  .m-chip.l-bitcoincom { font-family: 'Inter Tight'; font-weight: 700; font-size: 17px; }
  .m-chip.l-bitcoincom .sym { color: #F7931A; font-weight: 900; font-size: 22px; margin-right: 4px; line-height: 1; }
  .m-chip.l-bitcoincom .dom { color: var(--dim); font-weight: 400; }
  .m-chip.l-ballet { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 19px; letter-spacing: 0.005em; }
  .m-chip.l-ballet .dom { font-family: 'Inter Tight', sans-serif; font-weight: 400; color: var(--dim); font-size: 14px; margin-left: 3px; }
  .m-chip.l-bunq { font-family: 'Inter Tight', sans-serif; font-weight: 800; font-size: 24px; letter-spacing: -0.035em; text-transform: lowercase; }
  .m-chip.l-bunq .accent { color: #FF4A8B; }
  .m-chip.l-zoomex { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
  .m-chip.l-zoomex .z { color: #FF6B35; font-weight: 800; margin-right: 1px; }
  .m-chip.l-aevo { font-family: 'Inter Tight'; font-weight: 800; font-size: 15px; letter-spacing: 0.22em; text-transform: uppercase; padding: 18px 22px; }

  /* VIDEO — self-hosted explainer clip, not part of the source.
     The accent-tinted border + double shadow (deep drop + lime bloom) is what lifts the
     player off the flat background; the section's own radial glow lives in #video::before
     alongside the other section glows further down this file. */
  .video-frame {
    position: relative;
    border: 1px solid rgba(212, 255, 61, 0.16);
    border-radius: 20px;
    overflow: hidden;
    background: #000;
    box-shadow:
      0 40px 90px -20px rgba(0, 0, 0, 0.85),
      0 0 70px -12px rgba(212, 255, 61, 0.16);
    transition: box-shadow .35s ease, border-color .35s ease, transform .35s ease;
  }
  .video-frame:hover {
    border-color: rgba(212, 255, 61, 0.3);
    box-shadow:
      0 46px 100px -20px rgba(0, 0, 0, 0.9),
      0 0 90px -10px rgba(212, 255, 61, 0.26);
    transform: translateY(-2px);
  }
  .video-frame video {
    display: block;
    width: 100%;
    /* Must match the actual file. The first clip was 2880x1300 (~2.22:1); the current one
       is 1920x1080, so leaving the old ratio here reserved a box the video could not fill
       and left black bands above and below it. */
    aspect-ratio: 16 / 9;
    background: #000;
    /* Repeated on the element itself: Safari does not always clip a <video> to the
       wrapper's radius with overflow:hidden alone, leaving square corners on the frame. */
    border-radius: 19px;
  }

  /* "What we actually do." must stay on ONE line. It measures 8.85em wide, so the size is
     capped at whatever keeps 8.85em inside the container (100vw minus the 2x32px gutter);
     the divisor carries a little slack. Deliberately NOT `white-space: nowrap`: if this
     heading is ever reworded to something longer, wrapping is a far better failure than
     text running out past the edge of the page. */
  #video .section-h {
    font-size: min(clamp(40px, 5.4vw, 76px), calc((100vw - 64px) / 8.9));
  }

  /* Centred play affordance over the poster. */
  .video-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 84px; height: 84px;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--accent);
    color: #0a0a0a;
    cursor: pointer;
    z-index: 2;
    /* The play glyph is optically left-heavy; nudge it so it reads as centred. */
    padding-left: 4px;
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
    transition: transform .2s ease, box-shadow .2s ease, opacity .25s ease, visibility .25s;
  }
  .video-play:hover {
    transform: translate(-50%, -50%) scale(1.06);
    box-shadow: 0 14px 42px rgba(0, 0, 0, 0.6), 0 0 34px -4px rgba(212, 255, 61, 0.6);
  }
  .video-play:active { transform: translate(-50%, -50%) scale(0.97); }
  .video-play:focus-visible { outline: 2px solid var(--text); outline-offset: 5px; }

  /* Expanding ring, same idea as the Telegram button, so the two read as one system. */
  .video-play-ring {
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 2px solid var(--accent);
    pointer-events: none;
    animation: video-play-pulse 2.4s cubic-bezier(.2,.7,.3,1) infinite;
  }
  @keyframes video-play-pulse {
    0%   { transform: scale(1);   opacity: 0.6; }
    70%  { transform: scale(1.7); opacity: 0; }
    100% { transform: scale(1.7); opacity: 0; }
  }

  /* While the clip plays the button gets out of the way; JS toggles .is-playing. */
  .video-frame.is-playing .video-play {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .video-play-ring { animation: none; opacity: 0.35; }
    .video-play { transition: opacity .25s ease, visibility .25s; }
    .video-play:hover { transform: translate(-50%, -50%); }
  }

  @media (max-width: 640px) {
    .video-play { width: 66px; height: 66px; }
    .video-play svg { width: 22px; height: 22px; }
    .video-frame { border-radius: 14px; }
    .video-frame video { border-radius: 13px; }
    .video-frame:hover { transform: none; }
  }

  /* WHY NOW — urgency panel under #pricing. One bordered block rather than the usual
     open section, so it reads as a notice the eye stops on instead of more page. */
  #why-now { padding-top: 0; border-bottom: none; }
  .wn-panel {
    max-width: 1040px; margin: 0 auto;
    background: linear-gradient(180deg, rgba(212,255,61,0.05), rgba(212,255,61,0.015));
    border: 1px solid rgba(212, 255, 61, 0.24);
    border-radius: 16px;
    padding: 48px 44px 44px;
  }
  .wn-head { max-width: 760px; }
  .wn-kicker {
    display: inline-flex; align-items: center; gap: 9px;
    margin-bottom: 18px;
    font-size: 11px; color: var(--accent); font-weight: 700;
    letter-spacing: 0.2em; text-transform: uppercase;
  }
  /* Reuses the live-metric pulse: signals "this is moving" without claiming a deadline. */
  .wn-pulse {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 0 rgba(212, 255, 61, 0.6);
    animation: pulse 2s infinite;
  }
  .wn-h {
    font-size: clamp(30px, 3.6vw, 46px); font-weight: 700;
    letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 18px;
  }
  .wn-h .dim { color: var(--dim); font-weight: 400; }
  .wn-body { font-size: 16.5px; line-height: 1.65; color: var(--dim); }

  .wn-points {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
    margin: 40px 0 36px;
    border-top: 1px solid rgba(212, 255, 61, 0.16);
  }
  .wn-point { padding: 28px 28px 0 0; border-right: 1px solid rgba(212, 255, 61, 0.16); }
  .wn-point:last-child { border-right: none; padding-right: 0; }
  .wn-point:nth-child(n+2) { padding-left: 28px; }
  .wn-num {
    display: block; margin-bottom: 12px;
    font-size: 12px; font-weight: 700; color: var(--accent);
    letter-spacing: 0.14em;
  }
  .wn-point-h {
    font-size: 16px; font-weight: 700; color: var(--text);
    letter-spacing: -0.015em; margin-bottom: 8px;
  }
  .wn-point-t { font-size: 14px; line-height: 1.55; color: var(--dim); }

  .wn-foot { display: flex; justify-content: flex-start; }

  @media (max-width: 860px) {
    .wn-panel { padding: 36px 26px 32px; border-radius: 14px; }
    .wn-points { grid-template-columns: 1fr; margin: 30px 0 28px; }
    .wn-point {
      padding: 22px 0 0 0 !important;
      border-right: none;
      border-bottom: 1px solid rgba(212, 255, 61, 0.16);
      padding-bottom: 22px !important;
    }
    .wn-point:last-child { border-bottom: none; }
    .wn-foot .btn { width: 100%; justify-content: center; }
  }

  /*
   * ACCOUNTS — logo wall of the platforms an account can be opened on.
   * Uses the plain `section` padding (140px top/bottom + the border-bottom rule) like any
   * other section — it used to sit right after #program with padding-top:0 to read as one
   * continuous block with it, but now it lives after #faq instead, an unrelated section,
   * so the tight coupling no longer makes sense.
   */
  .acc-head { text-align: center; max-width: 680px; margin: 0 auto 36px; }
  .acc-kicker {
    display: block; margin-bottom: 14px;
    font-size: 11px; color: var(--accent); font-weight: 700;
    letter-spacing: 0.2em; text-transform: uppercase;
  }
  .acc-h {
    font-size: clamp(24px, 2.6vw, 34px); font-weight: 700;
    letter-spacing: -0.03em; line-height: 1.15;
  }

  .acc-grid {
    list-style: none; margin: 0 auto; padding: 0;
    max-width: 1040px;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  }
  .acc-cell {
    /* Every cell is the same box; the logo inside is what varies. */
    min-height: 92px;
    display: flex; align-items: center; justify-content: center;
    padding: 18px 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
  }
  .acc-cell:hover {
    border-color: rgba(212, 255, 61, 0.28);
    box-shadow: 0 0 34px -12px rgba(212, 255, 61, 0.16);
    transform: translateY(-2px);
  }
  .acc-cell img {
    /* --logo-h is set per logo in accounts.php so each one covers a similar AREA;
       max-width keeps the widest marks inside the cell on narrow screens. */
    height: var(--logo-h, 28px);
    max-width: 100%;
    width: auto;
    object-fit: contain;
    display: block;
    opacity: 0.92;
    transition: opacity .3s ease;
  }
  .acc-cell:hover img { opacity: 1; }

  @media (prefers-reduced-motion: reduce) {
    .acc-cell, .acc-cell img { transition: none; }
    .acc-cell:hover { transform: none; }
  }
  @media (max-width: 860px) {
    .acc-grid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 620px) {
    .acc-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .acc-cell { min-height: 78px; padding: 14px; }
    /* Scale every logo down proportionally rather than letting the wide ones dominate. */
    .acc-cell img { height: calc(var(--logo-h, 28px) * 0.82); }
  }

  /* PRICING — two plan cards. Shares the panel treatment with .program-card. */
  .pricing-head { text-align: center; max-width: 760px; margin: 0 auto 56px; }
  .pricing-head .section-h { margin-bottom: 20px; }
  .pricing-sub { font-size: 17px; color: var(--dim); line-height: 1.6; }

  /* Single plan now (the Inferno tier was removed), so the track is one column at a width
     that reads as a deliberate card rather than a half-empty two-column grid. */
  .pricing-grid {
    display: grid; grid-template-columns: 1fr; gap: 24px;
    max-width: 560px; margin: 0 auto;
  }
  .pricing-card {
    position: relative;
    display: flex; flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 34px 32px 30px;
    transition: border-color .3s ease, box-shadow .3s ease;
  }
  .pricing-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212,255,61,0.55), transparent);
  }
  .pricing-card:hover {
    border-color: rgba(212, 255, 61, 0.28);
    box-shadow: 0 0 40px -12px rgba(212, 255, 61, 0.14);
  }

  .pricing-card-top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 18px; min-height: 26px;
  }
  .pricing-tier {
    font-size: 11px; color: var(--accent); font-weight: 700;
    letter-spacing: 0.2em; text-transform: uppercase;
  }

  /* CSS-only popover: opens on hover AND on focus-within, so keyboard and touch work
     without any JavaScript. */
  .pricing-help { position: relative; flex-shrink: 0; }
  .pricing-help-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    color: var(--dim);
    font: 600 11.5px/1 'Inter Tight', system-ui, sans-serif;
    cursor: help;
    transition: border-color .25s ease, color .25s ease;
  }
  .pricing-help-btn:hover, .pricing-help:focus-within .pricing-help-btn {
    border-color: rgba(212, 255, 61, 0.45); color: var(--accent);
  }
  .pricing-help-i {
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px; border-radius: 50%;
    border: 1px solid currentColor;
    font-size: 9px; font-weight: 700; font-style: italic;
  }
  .pricing-pop {
    position: absolute; top: calc(100% + 10px); right: 0;
    width: 264px; z-index: 5;
    padding: 14px 16px;
    background: #0f0f0f;
    border: 1px solid rgba(212, 255, 61, 0.25);
    border-radius: 10px;
    box-shadow: 0 18px 40px -12px rgba(0,0,0,0.85);
    font-size: 13px; line-height: 1.55; color: var(--dim);
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .pricing-pop strong { display: block; color: var(--text); font-size: 12.5px; margin-bottom: 6px; }
  .pricing-help:hover .pricing-pop,
  .pricing-help:focus-within .pricing-pop {
    opacity: 1; visibility: visible; transform: translateY(0);
  }

  .pricing-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
  .pricing-amount { font-size: clamp(42px, 5vw, 62px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
  .pricing-period { font-size: 17px; color: var(--dim); font-weight: 500; }
  .pricing-blurb { font-size: 14.5px; color: var(--dim); line-height: 1.6; margin-bottom: 26px; }

  .pricing-features { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 13px; }
  .pricing-features li {
    display: flex; align-items: flex-start; gap: 11px;
    font-size: 14.5px; color: var(--text); letter-spacing: -0.005em; line-height: 1.45;
  }
  .pricing-check {
    display: inline-flex; align-items: center; justify-content: center;
    width: 19px; height: 19px; flex-shrink: 0; margin-top: 1px;
    border-radius: 5px;
    background: rgba(212, 255, 61, 0.14);
    color: var(--accent);
  }

  /* Pushed to the bottom so both cards' buttons line up even with uneven feature counts. */
  .pricing-cta {
    margin-top: auto;
    width: 100%; justify-content: center;
    text-transform: uppercase; letter-spacing: 0.08em; font-size: 13px; font-weight: 700;
  }
  .pricing-note {
    margin-top: 14px; text-align: center;
    font-size: 10.5px; color: var(--mute);
    letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
  }

  @media (max-width: 860px) {
    .pricing-grid { grid-template-columns: 1fr; max-width: 560px; }
  }
  @media (max-width: 480px) {
    .pricing-card { padding: 28px 22px 26px; }
    .pricing-card-top { flex-direction: column; align-items: flex-start; gap: 10px; }
    /* Anchored right would hang off-screen once the button moves to the left edge. */
    .pricing-pop { right: auto; left: 0; width: min(264px, calc(100vw - 76px)); }
  }

  /* INSIDE THE PROGRAM — the Spark curriculum card. Was a two-card grid with a mobile tab
     strip; the Inferno card was removed, so the tabs and their JS went with it. */
  .program-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
  .program-head .section-h { margin-bottom: 20px; }
  .program-sub { font-size: 17px; color: var(--dim); line-height: 1.6; margin-bottom: 14px; }
  .program-meta {
    font-size: 11px; color: var(--accent); font-weight: 700;
    letter-spacing: 0.2em; text-transform: uppercase;
  }

  .program-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
    max-width: 1040px; margin: 0 auto;
  }
  /* Only the Spark card is left, so it centres at a readable width instead of stretching
     across a two-column track that has nothing in its second half. */
  .program-grid.is-single { grid-template-columns: 1fr; max-width: 640px; }
  .program-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 32px 30px 30px;
    overflow: hidden;
    transition: border-color .3s ease, box-shadow .3s ease;
  }
  /* Lime hairline across the top — the same accent cue the case-study cards use. */
  .program-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212,255,61,0.55), transparent);
  }
  .program-card:hover {
    border-color: rgba(212, 255, 61, 0.28);
    box-shadow: 0 0 40px -12px rgba(212, 255, 61, 0.14);
  }
  .program-card-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    padding-bottom: 18px; margin-bottom: 6px;
    border-bottom: 1px solid var(--line);
  }
  .program-card-h {
    font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: var(--text);
  }
  .program-card-meta {
    font-size: 11px; color: var(--mute);
    letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
  }

  .program-list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
  .program-row {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 14.5px; color: var(--text);
  }
  .program-row:last-child { border-bottom: none; }
  .program-num {
    font-size: 11px; color: var(--mute); font-weight: 600;
    letter-spacing: 0.06em; min-width: 18px; flex-shrink: 0;
  }
  .program-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; flex-shrink: 0;
    border-radius: 50%;
    color: var(--accent);
    background: rgba(212, 255, 61, 0.1);
  }
  .program-name { flex: 1 1 auto; min-width: 0; letter-spacing: -0.005em; }
  .program-time {
    flex-shrink: 0; font-size: 12.5px; color: var(--dim);
    letter-spacing: 0.04em; font-variant-numeric: tabular-nums;
  }

  @media (max-width: 860px) {
    .program-grid { grid-template-columns: 1fr; max-width: 560px; }
  }
  @media (max-width: 480px) {
    .program-card { padding: 26px 20px 24px; }
    .program-card-head { flex-direction: column; align-items: flex-start; gap: 6px; }
    .program-row { font-size: 14px; gap: 10px; }
  }

  /* SUCCESS STORIES — phone-screenshot rail, ported from the owner's earlier build.
     Same structure and motion; ember orange swapped for --accent throughout. */
  .success-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 24px; margin-bottom: 48px;
  }
  .success-head .section-h { margin-bottom: 16px; }
  .success-sub { font-size: 16px; color: var(--dim); max-width: 560px; line-height: 1.6; }
  .success-nav { display: flex; gap: 12px; flex-shrink: 0; }
  .success-btn {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid rgba(212, 255, 61, 0.3);
    color: var(--accent);
    border-radius: 10px;
    font-size: 17px; font-family: inherit;
    cursor: pointer;
    transition: border-color .3s ease, box-shadow .3s ease, opacity .3s ease;
  }
  .success-btn:hover:not([disabled]) {
    border-color: rgba(212, 255, 61, 0.8);
    box-shadow: 0 0 15px rgba(212, 255, 61, 0.2);
  }
  .success-btn[disabled] { opacity: 0.3; pointer-events: none; }

  .success-rail-wrap { position: relative; }
  /* Soft edge fades so the rail reads as continuing past the viewport rather than being
     cut off. Stop short of the rail's bottom padding so they do not veil the shadow. */
  .success-rail-wrap::before,
  .success-rail-wrap::after {
    content: ''; position: absolute; top: 0; bottom: 28px;
    width: 80px; z-index: 2; pointer-events: none;
  }
  .success-rail-wrap::before { left: 0;  background: linear-gradient(to right, var(--bg), rgba(10,10,10,0)); }
  .success-rail-wrap::after  { right: 0; background: linear-gradient(to left,  var(--bg), rgba(10,10,10,0)); }

  .success-rail {
    display: flex; gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* The .container wrapper supplies the horizontal inset on desktop; 4px here is just
       breathing room so a card's hover-lift shadow is not clipped. */
    padding: 8px 4px 28px;
    cursor: grab;
  }
  .success-rail::-webkit-scrollbar { display: none; }
  /* Snap must be OFF while dragging or drifting — mandatory snap stutters a continuous
     scroll and yanks to the nearest card the instant a drag ends. */
  .success-rail.is-dragging {
    cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none;
  }
  .success-rail.is-autoscrolling { scroll-snap-type: none; scroll-behavior: auto; }

  .success-phone {
    flex: 0 0 auto;
    width: 264px;
    scroll-snap-align: start;
    background: var(--surface);
    border: 1px solid rgba(212, 255, 61, 0.12);
    border-radius: 30px;
    padding: 10px;
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
  }
  .success-phone:hover {
    border-color: rgba(212, 255, 61, 0.4);
    box-shadow: 0 0 30px rgba(212, 255, 61, 0.12);
    transform: translateY(-4px);
  }
  .success-screen {
    /* Ratio comes from the first loaded screenshot (roininja-success.js) and is applied to
       THIS inner box, not the padded frame — putting it on the frame shifts the ratio by
       the 10px padding and crops the image. */
    width: 100%;
    aspect-ratio: var(--rn-shot-ratio, 9 / 19);
    border-radius: 21px;
    overflow: hidden;
    background: #0a0a0a;
    position: relative;
  }
  .success-screen img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .success-phone { transition: none; }
  }
  @media (max-width: 860px) {
    .success-head { flex-direction: column; align-items: flex-start; }
    .success-nav { display: none; }   /* touch scrolls natively; arrows are desktop-only */
  }
  @media (max-width: 640px) {
    /* Full-bleed on phones: undo the .container's 32px padding so the strip runs to both
       screen edges, while the heading and copy above it stay inset. */
    .success-rail-wrap { margin-left: -32px; margin-right: -32px; width: calc(100% + 64px); }
    .success-rail { padding-left: 20px; padding-right: 20px; scroll-padding-left: 20px; }
    .success-rail-wrap::before, .success-rail-wrap::after { width: 40px; }
  }

  /* TESTIMONIALS — aggregate strip + bold 2-column grid */
  .t-agg-strip {
    margin-top: 48px;
    padding: 20px 28px;
    background: #fafafa;
    color: #0a0a0a;
    border-radius: 14px;
    display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  }
  .t-agg-strip .t-as-logo {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 800; font-size: 22px;
    letter-spacing: -0.03em; color: #17313B;
    border-right: 1px solid rgba(0,0,0,0.10);
    padding-right: 22px;
  }
  .t-agg-strip .t-as-logo svg { width: 26px; height: 26px; }
  .t-agg-strip .t-as-rating {
    display: inline-flex; align-items: baseline; gap: 8px;
  }
  .t-agg-strip .t-as-num {
    font-family: 'Inter Tight', sans-serif;
    font-size: 30px; font-weight: 800;
    letter-spacing: -0.04em; line-height: 1;
    color: #0a0a0a;
  }
  .t-agg-strip .t-as-stars {
    color: #FFAA00;
    font-size: 15px; letter-spacing: 2px;
  }
  .t-agg-strip .t-as-count {
    font-size: 12px; color: #666;
    letter-spacing: -0.005em;
  }
  .t-agg-strip .t-as-themes {
    display: flex; flex-wrap: wrap; gap: 6px;
    flex: 1; min-width: 0;
  }
  .t-agg-strip .t-tag {
    display: inline-flex; align-items: center;
    padding: 5px 10px;
    background: #ececec;
    border-radius: 999px;
    font-size: 11.5px;
    color: #1a1a1a;
    font-weight: 500;
    letter-spacing: -0.005em;
    white-space: nowrap;
  }
  .t-agg-strip .t-tag em {
    color: #888;
    font-style: normal;
    margin-left: 3px;
    font-weight: 600;
  }
  /* Multi-platform layout — Clutch / G2 / Semrush */
  .t-as-platforms {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
  }
  .t-as-platform {
    display: flex; flex-direction: column; gap: 6px;
    padding: 4px 22px;
    border-right: 1px solid rgba(0,0,0,0.10);
    text-decoration: none; color: #0a0a0a;
    transition: opacity .15s ease, transform .15s ease;
  }
  .t-as-platform:first-child { padding-left: 0; }
  .t-as-platform:last-child { padding-right: 0; border-right: none; }
  .t-as-platform:hover { opacity: 0.75; transform: translateY(-1px); }
  .t-as-meta {
    display: flex; align-items: baseline; gap: 8px;
    flex-wrap: wrap;
  }
  .t-as-platform .t-as-num { font-size: 26px; font-weight: 800; letter-spacing: -0.04em; color: #0a0a0a; }
  .t-as-platform .t-as-stars { font-size: 14px; letter-spacing: 2px; color: #FFAA00; }
  .t-as-platform .t-as-count { font-size: 12px; color: #666; width: 100%; }
  .t-as-themes-row {
    margin-top: 18px; padding-top: 16px;
    border-top: 1px solid rgba(0,0,0,0.10);
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  }
  .t-as-themes-lbl {
    font-size: 11.5px; color: #666; margin-right: 6px;
    font-family: 'Inter Tight', sans-serif;
    letter-spacing: 0.04em; text-transform: uppercase;
    font-weight: 600;
  }
  @media (max-width: 720px) {
    .t-as-platforms { grid-template-columns: repeat(3, 1fr); gap: 0; }
    .t-as-platform { padding: 4px 10px; gap: 4px; }
    .t-as-platform:first-child { padding-left: 0; }
    .t-as-platform:last-child { padding-right: 0; }
    .t-as-platform .t-as-logo { font-size: 16px; gap: 5px; }
    .t-as-platform .t-as-logo svg { width: 20px; height: 20px; }
    .t-as-platform .t-as-num { font-size: 20px; }
    .t-as-platform .t-as-stars { font-size: 10.5px; letter-spacing: 1.2px; }
    .t-as-platform .t-as-count { font-size: 11px; }
    .t-as-meta { gap: 5px; }
  }

  .t-agg-strip .t-as-link {
    color: #1a1a1a;
    font-size: 12.5px;
    text-decoration: none;
    border-bottom: 1px solid #1a1a1a;
    padding-bottom: 1px;
    transition: color .15s ease, border-color .15s ease;
    white-space: nowrap;
    margin-left: auto;
  }
  .t-agg-strip .t-as-link:hover {
    color: #FF3D2E;
    border-color: #FF3D2E;
  }

  /* 2-column bold grid */
  .t-bold-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin-top: 22px;
  }
  .t-card-b {
    position: relative;
    background: #0d0d0d;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    padding: 36px 32px 28px;
    display: flex; flex-direction: column;
    min-height: 340px;
    overflow: hidden;
    transition: border-color .25s ease, transform .25s ease;
    isolation: isolate;
  }
  /* removed: colored top hairline */
  .t-card-b::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(140% 80% at 100% 0%, rgba(212,255,61,0.08), transparent 50%);
    opacity: 0;
    transition: opacity .35s ease;
    z-index: 0;
    pointer-events: none;
  }
  .t-card-b:hover {
    border-color: rgba(212,255,61,0.30);
    transform: translateY(-4px);
  }
  .t-card-b:hover::after { opacity: 1; }

  /* Chapter number top-left */
  .t-card-b .t-num {
    position: absolute;
    top: 28px; left: 32px;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.32em;
    color: var(--accent);
    z-index: 2;
  }
  /* Watermark italic quotation */
  .t-card-b .t-mark {
    position: absolute;
    bottom: -100px; right: -24px;
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 900;
    font-size: 360px;
    line-height: 0.78;
    color: var(--accent);
    opacity: 0.06;
    pointer-events: none;
    user-select: none;
    z-index: 0;
  }
  /* Verified pill top-right */
  .t-card-b .t-clutch {
    position: absolute;
    top: 22px; right: 22px;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px 5px 7px;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 999px;
    text-decoration: none; color: var(--dim);
    font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase;
    z-index: 2;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: border-color .15s ease, color .15s ease;
  }
  .t-card-b .t-clutch:hover {
    border-color: rgba(255,61,46,0.5);
    color: #FF6B5C;
  }
  .t-card-b .t-clutch svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--dim); }
  .t-card-b .t-clutch:hover svg { color: #FF6B5C; }
  .t-card-b .t-clutch .arr {
    font-size: 12px;
    color: var(--accent);
    margin-left: -1px;
  }
  .t-card-b .t-clutch:hover .arr { color: #FF6B5C; }

  /* Quote */
  .t-card-b .t-q {
    position: relative;
    z-index: 1;
    margin: 68px 0 36px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.28;
    letter-spacing: -0.02em;
    color: var(--text);
    flex: 1;
  }

  /* Footer area */
  .t-card-b .t-foot {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.07);
  }
  .t-card-b .t-id { min-width: 0; flex: 1; }
  .t-card-b .t-name {
    font-size: 15.5px; font-weight: 700;
    color: var(--text); letter-spacing: -0.01em;
    line-height: 1.2;
  }
  .t-card-b .t-role {
    font-size: 12px; color: var(--dim);
    margin-top: 3px; line-height: 1.3;
  }
  .t-card-b .t-company-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 12px 5px 6px;
    background: #fafafa;
    color: #0a0a0a;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-radius: 999px;
    flex-shrink: 0;
    transition: transform .15s ease, background .15s ease;
  }
  .t-card-b .t-company-chip img {
    width: 18px; height: 18px;
    border-radius: 50%;
    object-fit: contain;
    background: #fff;
    flex-shrink: 0;
  }
  .t-card-b .t-company-chip.no-logo {
    padding: 5px 12px 5px 12px;
    background: var(--c);
    color: var(--tc, #0a0a0a);
    border-radius: 4px;
  }
  /* Wordmark variant — logo includes brand name, no text needed */
  .t-card-b .t-company-chip.wordmark {
    padding: 6px 14px;
    gap: 0;
    background: #fafafa;
  }
  .t-card-b .t-company-chip.wordmark img {
    width: auto; height: 16px;
    max-width: 110px;
    border-radius: 0;
    background: transparent;
    object-fit: contain;
  }
  /* Dark wordmark — for white logos */
  .t-card-b .t-company-chip.wordmark.dark {
    background: #1a1a1a;
    border: 1px solid rgba(255,255,255,0.10);
  }
  .t-card-b:hover .t-company-chip { transform: scale(1.04); }

  /* Metadata row */
  .t-card-b .t-meta-line {
    position: relative; z-index: 1;
    margin-top: 18px;
    display: flex; align-items: center; gap: 14px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 14px;
    color: var(--text);
    letter-spacing: 0.06em;
    font-weight: 700;
  }
  .t-card-b .t-meta-line .t-stars {
    color: var(--accent);
    letter-spacing: 4px;
    font-size: 22px;
    font-family: inherit;
    line-height: 1;
  }
  .t-card-b .t-meta-line .t-sep { color: rgba(255,255,255,0.18); font-size: 14px; }
  /* services + company size line below stars */
  .t-card-b .t-services-line {
    position: relative; z-index: 1;
    margin-top: 10px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 12px;
    color: var(--dim);
    letter-spacing: 0.06em;
    line-height: 1.45;
    display: flex; flex-wrap: wrap; gap: 8px;
    align-items: baseline;
  }
  .t-card-b .t-services-line .ts-tag {
    display: inline-flex; align-items: center; gap: 5px;
  }
  .t-card-b .t-services-line .ts-ico {
    color: var(--accent); font-size: 12px;
    font-family: 'Inter Tight', sans-serif;
    font-style: normal;
    display: inline-flex;
  }
  .t-card-b .t-services-line .ts-sep { color: rgba(255,255,255,0.15); }

  /* CTA pill below grid */
  .t-cta-pill {
    margin-top: 34px;
    display: flex; align-items: center; justify-content: center;
    gap: 14px; flex-wrap: wrap;
    padding: 18px 26px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 14px; color: var(--dim);
    max-width: max-content;
    margin-left: auto; margin-right: auto;
    background: rgba(0,0,0,0.3);
  }
  .t-cta-pill .stars { color: var(--accent); letter-spacing: 1.5px; }
  .t-cta-pill .sep { color: var(--mute); }
  .t-cta-pill b { color: var(--text); font-weight: 700; }
  .t-cta-pill a {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--text); text-decoration: none; font-weight: 600;
    padding-left: 14px; border-left: 1px solid var(--line);
    transition: color .15s ease;
  }
  .t-cta-pill a:hover { color: var(--accent); }
  .t-cta-pill a svg { width: 16px; height: 16px; }

  @media (max-width: 1100px) {
    .t-card-b .t-q { font-size: 20px; }
    .t-card-b .t-mark { font-size: 280px; bottom: -70px; }
  }
  @media (max-width: 760px) {
    .t-bold-row { grid-template-columns: 1fr; gap: 16px; }
    .t-card-b { padding: 32px 26px 24px; min-height: 0; }
    .t-card-b .t-q { font-size: 20px; margin: 60px 0 28px; }
    .t-card-b .t-mark { font-size: 240px; bottom: -60px; right: -16px; }
    .t-agg-strip { padding: 16px 18px; gap: 14px; }
    .t-agg-strip .t-as-logo { padding-right: 14px; font-size: 19px; }
    .t-agg-strip .t-as-num { font-size: 26px; }
    .t-agg-strip .t-as-link { margin-left: 0; }
    .t-cta-pill { padding: 14px 20px; font-size: 12.5px; gap: 10px; }
  }

  /* Old slider/split CSS kept stubbed for cache safety */
  .t-grid-wrap, .t-grid-nav, .t-split { display: none !important; }

  /* Left: Clutch aggregate card (light) */
  .t-agg {
    background: #fafafa;
    color: #0a0a0a;
    border-radius: 16px;
    padding: 32px 28px 30px;
    display: flex; flex-direction: column;
  }
  .t-agg-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin-bottom: 32px;
  }
  .t-agg-logo {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 800; font-size: 24px;
    letter-spacing: -0.03em; color: #17313B;
  }
  .t-agg-logo .l-mark {
    width: 30px; height: 30px;
  }
  .t-agg-link {
    color: #1a1a1a;
    font-size: 14px;
    text-decoration: none;
    border-bottom: 1px solid #1a1a1a;
    padding-bottom: 1px;
    transition: color .15s ease, border-color .15s ease;
  }
  .t-agg-link:hover { color: #FF3D2E; border-color: #FF3D2E; }
  .t-agg-rating {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 4px;
  }
  .t-agg-num {
    font-family: 'Inter Tight', sans-serif;
    font-size: 52px;
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1;
    color: #0a0a0a;
  }
  .t-agg-stars {
    color: #FFAA00;
    font-size: 19px;
    letter-spacing: 3px;
  }
  .t-agg-count {
    font-size: 14px; color: #555;
    margin-bottom: 28px;
  }
  .t-agg-divider {
    border: none;
    border-top: 1px solid rgba(0,0,0,0.08);
    margin: 0 0 18px;
  }
  .t-agg-themes-lbl {
    font-size: 12px;
    color: #888;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 14px;
  }
  .t-agg-themes {
    display: flex; flex-wrap: wrap; gap: 7px;
  }
  .t-tag {
    display: inline-flex; align-items: center;
    padding: 7px 12px;
    background: #ececec;
    border-radius: 999px;
    font-size: 12.5px;
    color: #1a1a1a;
    font-weight: 500;
    letter-spacing: -0.005em;
  }
  .t-tag em {
    color: #777;
    font-style: normal;
    margin-left: 4px;
    font-weight: 600;
  }

  /* Right: featured testimonial slider (dark) */
  .t-featured {
    position: relative;
    background: #0d0d0d;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 30px 34px 24px;
    display: flex; flex-direction: column;
    overflow: hidden;
    isolation: isolate;
    min-height: 480px;
  }
  /* Subtle radial glow accent */
  .t-featured::before {
    content: '';
    position: absolute;
    top: -50%; right: -30%;
    width: 80%; height: 100%;
    background: radial-gradient(closest-side, rgba(212,255,61,0.07), transparent);
    pointer-events: none;
    z-index: 0;
  }
  .t-featured-inner {
    position: relative; z-index: 1;
    flex: 1;
  }
  .t-slide {
    display: none;
    flex-direction: column;
    gap: 22px;
  }
  .t-slide.is-active {
    display: flex;
    animation: t-fade .35s cubic-bezier(.2,.7,.3,1) both;
  }
  @keyframes t-fade {
    from { opacity: 0; transform: translateX(12px); }
    to { opacity: 1; transform: translateX(0); }
  }
  .t-slide-top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
  }
  .t-slide-rating {
    display: inline-flex; align-items: baseline; gap: 12px;
  }
  .t-slide-rating .num {
    font-family: 'Inter Tight', sans-serif;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--text);
    line-height: 1;
  }
  .t-slide-rating .stars {
    color: var(--accent);
    font-size: 16px;
    letter-spacing: 2.5px;
  }
  .t-slide-clutch {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 11px 6px 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 999px;
    text-decoration: none;
    color: var(--dim);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
  }
  .t-slide-clutch:hover {
    border-color: rgba(255,61,46,0.5);
    color: #FF6B5C;
    background: rgba(255,61,46,0.06);
  }
  .t-slide-clutch svg { width: 13px; height: 13px; color: currentColor; }
  .t-slide-clutch .arr { font-size: 12px; color: var(--accent); }
  .t-slide-clutch:hover .arr { color: #FF6B5C; }

  .t-slide-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 28px;
    font-size: 14px;
    color: var(--dim);
  }
  .t-slide-meta span {
    display: inline-flex; align-items: center; gap: 10px;
    letter-spacing: -0.005em;
  }
  .t-slide-meta .ico {
    color: var(--accent);
    font-style: normal;
    font-size: 14px;
    display: inline-flex; width: 16px; justify-content: center;
    flex-shrink: 0;
  }

  .t-slide-q {
    font-family: 'Inter Tight', sans-serif;
    font-size: 23px;
    font-weight: 600;
    letter-spacing: -0.022em;
    line-height: 1.28;
    color: var(--text);
    margin: 4px 0 0;
    quotes: '"\201C""\201D"';
  }
  .t-slide-q::before { content: open-quote; color: var(--accent); margin-right: 2px; }
  .t-slide-q::after { content: close-quote; color: var(--accent); margin-left: 2px; }

  .t-slide-foot {
    display: flex; align-items: center; gap: 16px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.07);
    margin-top: auto;
  }
  .t-slide-brand {
    display: inline-flex; align-items: center;
    padding: 8px 14px 7px;
    background: var(--c);
    color: var(--tc);
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    border-radius: 5px;
    flex-shrink: 0;
  }
  .t-slide-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .t-slide-name {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
  }
  .t-slide-role {
    font-size: 12.5px;
    color: var(--dim);
  }

  /* Slider nav */
  .t-nav {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.05);
  }
  .t-nav-btn {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--text);
    font-family: inherit;
    font-size: 18px; line-height: 1;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
  }
  .t-nav-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(212,255,61,0.06);
  }
  .t-nav-btn svg { width: 14px; height: 14px; }
  .t-dots {
    display: flex; gap: 10px; align-items: center;
  }
  .t-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background .2s ease, transform .2s ease, width .2s ease;
  }
  .t-dot:hover { background: rgba(255,255,255,0.4); }
  .t-dot.is-active {
    background: var(--accent);
    width: 24px;
    border-radius: 4px;
  }

  @media (max-width: 900px) {
    .t-split { grid-template-columns: 1fr; gap: 16px; }
    .t-agg { padding: 26px 22px; }
    .t-agg-num { font-size: 44px; }
    .t-featured { padding: 26px 24px 20px; min-height: 0; }
    .t-slide-meta { grid-template-columns: 1fr; gap: 8px; }
    .t-slide-q { font-size: 19px; }
    .t-slide-foot { flex-direction: column; align-items: flex-start; }
  }

  /* Old bold-card classes kept stubbed so nothing breaks if cache returns them */
  .t-row {
    display: none !important;
  }
  .t-card {
    position: relative;
    background: #0d0d0d;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    padding: 34px 30px 26px;
    display: flex; flex-direction: column;
    min-height: 380px;
    overflow: hidden;
    transition: border-color .25s ease, transform .25s ease;
    isolation: isolate;
  }
  /* Brand-color hairline at top */
  .t-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--brand, var(--accent));
    z-index: 1;
  }
  /* Diagonal sheen on hover */
  .t-card::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(140% 80% at 100% 0%, rgba(212,255,61,0.08), transparent 50%);
    opacity: 0;
    transition: opacity .35s ease;
    z-index: 0;
    pointer-events: none;
  }
  .t-card:hover {
    border-color: rgba(212,255,61,0.30);
    transform: translateY(-4px);
  }
  .t-card:hover::after { opacity: 1; }

  /* Big chapter number top-left */
  .t-num {
    position: absolute;
    top: 26px; left: 30px;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.32em;
    color: var(--accent);
    z-index: 2;
  }

  /* Massive italic quotation mark watermark */
  .t-mark {
    position: absolute;
    bottom: -90px; right: -22px;
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 900;
    font-size: 360px;
    line-height: 0.78;
    color: var(--accent);
    opacity: 0.06;
    pointer-events: none;
    user-select: none;
    z-index: 0;
  }

  /* Floating Verified pill top-right */
  .t-clutch {
    position: absolute;
    top: 20px; right: 20px;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px 5px 7px;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 999px;
    text-decoration: none; color: var(--dim);
    font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase;
    z-index: 2;
    transition: border-color .15s ease, color .15s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .t-clutch:hover {
    border-color: rgba(255,61,46,0.5);
    color: #FF6B5C;
  }
  .t-clutch svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--dim); }
  .t-clutch:hover svg { color: #FF6B5C; }
  .t-clutch .arr {
    font-size: 12px;
    color: var(--accent);
    margin-left: -1px;
  }
  .t-clutch:hover .arr { color: #FF6B5C; }

  /* Quote — display size */
  .t-q {
    position: relative;
    z-index: 1;
    margin: 64px 0 36px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 23px;
    font-weight: 600;
    line-height: 1.26;
    letter-spacing: -0.022em;
    color: var(--text);
    flex: 1;
  }

  /* Footer area */
  .t-foot {
    position: relative; z-index: 1;
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.07);
  }
  .t-id { min-width: 0; flex: 1; }
  .t-name {
    font-size: 15.5px; font-weight: 700;
    color: var(--text); letter-spacing: -0.01em;
    line-height: 1.2;
  }
  .t-role {
    font-size: 12px; color: var(--dim);
    margin-top: 3px; line-height: 1.3;
  }
  .t-company-chip {
    display: inline-flex; align-items: center;
    padding: 6px 11px 5px;
    background: var(--brand);
    color: var(--brand-text, #0a0a0a);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    border-radius: 4px;
    flex-shrink: 0;
    align-self: center;
    transition: transform .15s ease;
  }
  .t-card:hover .t-company-chip { transform: scale(1.04); }

  /* Metadata row */
  .t-meta-line {
    position: relative; z-index: 1;
    margin-top: 14px;
    display: flex; align-items: center; gap: 12px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 12px;
    color: var(--mute);
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .t-meta-line .t-stars {
    color: var(--accent);
    letter-spacing: 1.5px;
    font-family: inherit;
  }
  .t-meta-line .t-sep { color: rgba(255,255,255,0.10); }

  /* Footer CTA — pill */
  .t-cta {
    margin-top: 44px;
    display: flex; align-items: center; justify-content: center;
    gap: 14px; flex-wrap: wrap;
    padding: 18px 26px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 14px; color: var(--dim);
    max-width: max-content;
    margin-left: auto; margin-right: auto;
    background: rgba(0,0,0,0.3);
  }
  .t-cta .stars { color: var(--accent); letter-spacing: 1.5px; }
  .t-cta .sep { color: var(--mute); }
  .t-cta b { color: var(--text); font-weight: 700; }
  .t-cta-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--text); text-decoration: none; font-weight: 600;
    padding-left: 14px; border-left: 1px solid var(--line);
    transition: color .15s ease;
  }
  .t-cta-link:hover { color: var(--accent); }
  .t-cta-link svg { width: 16px; height: 16px; }

  @media (max-width: 1100px) {
    .t-q { font-size: 20px; }
    .t-mark { font-size: 280px; bottom: -70px; }
  }
  @media (max-width: 860px) {
    .t-row { grid-template-columns: 1fr; gap: 16px; }
    .t-card { min-height: 0; padding: 30px 24px 24px; }
    .t-q { font-size: 22px; margin: 56px 0 28px; }
    .t-mark { font-size: 240px; bottom: -60px; right: -16px; }
    .t-cta { padding: 14px 20px; font-size: 12.5px; gap: 10px; }
  }

  /* Old Clutch-style classes — kept stubbed for backward compat, hidden */
  .clutch-reviews { display: none !important; }
  .clutch-review {
    background: #fff; color: #1a1a1a;
    border-radius: 8px; padding: 28px 32px 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    color-scheme: light;
    overflow: hidden;
  }
  .clutch-review * { font-family: 'Inter Tight', sans-serif; }
  .clutch-review .cr-col { min-width: 0; }
  .clutch-review .cr-col * { overflow-wrap: break-word; word-wrap: break-word; }
  .cr-title-row {
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; flex-wrap: wrap;
    padding-bottom: 18px; border-bottom: 1px solid #e8e8e8;
    margin-bottom: 24px;
  }
  .cr-title {
    font-size: 20px; font-weight: 700; color: #1a1a1a;
    letter-spacing: -0.015em; line-height: 1.25;
    margin: 0; flex: 1; min-width: 280px;
  }
  .cr-clutch-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px; border-radius: 999px;
    background: rgba(255, 61, 46, 0.08);
    border: 1px solid rgba(255, 61, 46, 0.25);
    color: #17313B; font-size: 11.5px; font-weight: 700;
    letter-spacing: 0.04em; text-transform: uppercase;
    text-decoration: none; white-space: nowrap;
    transition: background .15s ease, transform .15s ease;
  }
  .cr-clutch-badge:hover { background: rgba(255, 61, 46, 0.14); transform: translateY(-1px); }
  .cr-clutch-badge svg { width: 16px; height: 16px; flex-shrink: 0; }
  .cr-clutch-badge .arr { color: #FF3D2E; font-size: 11px; margin-left: 1px; }
  .clutch-foot {
    margin-top: 28px; text-align: center;
  }
  .clutch-foot a {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 24px; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--line-2);
    color: var(--text); font-size: 14px; font-weight: 600;
    text-decoration: none; letter-spacing: -0.005em;
    transition: background .15s ease, border-color .15s ease;
  }
  .clutch-foot a:hover { background: var(--surface-2); border-color: var(--accent); }
  .clutch-foot a .stars { color: #FFAA00; letter-spacing: 1.5px; font-size: 14px; }
  .clutch-foot a .sep { color: var(--mute); }
  .clutch-foot a svg { width: 18px; height: 18px; flex-shrink: 0; }
  .cr-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) minmax(0, 1.95fr) minmax(0, 1.15fr);
    gap: 22px; align-items: start;
  }
  .cr-h {
    font-size: 12px; color: #888; letter-spacing: 0.16em;
    font-weight: 700; text-transform: uppercase;
    margin-bottom: 12px;
  }
  .cr-meta {
    display: grid; grid-template-columns: 18px 1fr; gap: 9px;
    align-items: start; padding: 5px 0;
    font-size: 14px; color: #1a1a1a; line-height: 1.4;
  }
  .cr-meta .ico { color: #888; font-size: 14px; padding-top: 1px; }
  .cr-h2 { font-size: 12px; color: #888; letter-spacing: 0.16em; font-weight: 700; text-transform: uppercase; margin: 18px 0 6px; }
  .cr-summary { font-size: 14px; line-height: 1.5; color: #1a1a1a; }

  .cr-rating-box {
    border: 1px solid #d0d0d0; border-radius: 4px;
    padding: 16px 16px 12px; text-align: center;
  }
  .cr-rating-box .big {
    font-size: 40px; font-weight: 700; color: #1a1a1a;
    letter-spacing: -0.025em; line-height: 1;
  }
  .cr-rating-box .stars {
    color: #FFAA00; font-size: 17px; letter-spacing: 3px;
    margin: 6px 0 0; line-height: 1;
  }
  .cr-rating-box hr {
    border: none; border-top: 1px solid #e8e8e8;
    margin: 16px -16px;
  }
  .cr-sub-rating {
    display: flex; justify-content: space-between;
    font-size: 14px; padding: 5px 0; text-align: left;
    color: #1a1a1a;
  }
  .cr-sub-rating .val { font-weight: 600; }

  .cr-review .quote {
    font-size: 16px; line-height: 1.45; color: #1a1a1a;
    margin-bottom: 12px; font-weight: 500;
  }
  .cr-review .date {
    font-size: 12.5px; color: #888; margin-bottom: 18px;
  }
  .cr-review .feedback {
    font-size: 13.5px; color: #1a1a1a; line-height: 1.55;
  }

  .cr-reviewer .role {
    font-size: 14.5px; font-weight: 700; color: #1a1a1a;
    line-height: 1.3; margin-bottom: 12px;
  }
  .cr-reviewer .name-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 0; border-bottom: 1px solid #e8e8e8;
    margin-bottom: 4px;
  }
  .cr-reviewer .avatar {
    width: 26px; height: 26px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 12px; color: #fff;
    flex-shrink: 0; letter-spacing: -0.02em;
  }
  .cr-reviewer .name { font-size: 13.5px; font-weight: 500; color: #1a1a1a; }
  .cr-reviewer .meta-row {
    display: grid; grid-template-columns: 18px 1fr; gap: 9px;
    padding: 6px 0; font-size: 12.5px; color: #555;
    align-items: center;
  }
  .cr-reviewer .meta-row .ico { color: #999; font-size: 12px; line-height: 1; }
  .cr-reviewer .meta-row.verified { color: #0AB759; font-weight: 600; }
  .cr-reviewer .meta-row.verified .ico { color: #0AB759; }

  /* CASES HEADING + RATED-EXCELLENT BADGE */
  .cases-head {
    display: flex; flex-direction: column; align-items: center;
    gap: 28px;
    text-align: center;
    margin-bottom: 56px;
  }
  .cases-head .section-h {
    text-align: center;
    max-width: 980px;
    margin: 0 auto;
  }
  .results-flow {
    font-size: clamp(40px, 5.4vw, 76px);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    text-align: center;
    margin: 0 auto;
    max-width: 1100px;
    color: #fafafa;
  }
  .results-flow .accent { color: var(--accent); }
  .results-flow .to {
    color: rgba(250,250,250,0.32);
    font-weight: 700;
    font-style: italic;
    padding: 0 0.08em;
  }
  .rated-pill {
    display: inline-flex; align-items: center; gap: 14px;
    padding: 12px 22px;
    background: linear-gradient(180deg, rgba(212,255,61,0.06), rgba(212,255,61,0.01));
    border: 1px solid rgba(212,255,61,0.25);
    border-radius: 999px;
    font-size: 13.5px; color: var(--text);
    letter-spacing: -0.005em;
    flex-wrap: wrap; justify-content: center;
  }
  .rated-pill .rp-text { font-weight: 700; }
  .rated-pill .rp-stars { color: var(--accent); letter-spacing: 2px; font-size: 14px; }
  .rated-pill .rp-count { color: var(--dim); }
  .rated-pill .rp-count b { color: var(--text); font-weight: 700; }
  .rated-pill.final-rated { margin: 0 auto 32px; }

  /* PROOF STATS — 4-col outcome grid */
  #proof-stats { padding: 80px 0; border-top: 1px solid var(--line); }
  .ps-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
  }
  .ps-card {
    position: relative;
    background: linear-gradient(180deg, rgba(212,255,61,0.04), rgba(255,255,255,0.005));
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    padding: 32px 28px 28px;
    overflow: hidden;
    transition: border-color .25s ease, transform .25s ease;
  }
  .ps-card::before {
    content: '';
    position: absolute; top: -40%; right: -20%;
    width: 70%; height: 140%;
    background: radial-gradient(closest-side, rgba(212,255,61,0.10), transparent);
    pointer-events: none;
  }
  .ps-card:hover {
    border-color: rgba(212,255,61,0.32);
    transform: translateY(-3px);
  }
  .ps-lbl {
    position: relative;
    font-family: 'Inter Tight', sans-serif;
    font-size: 11px; color: var(--accent);
    letter-spacing: 0.22em; text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 14px;
  }
  .ps-num {
    position: relative;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 800;
    font-size: clamp(54px, 5.5vw, 84px);
    line-height: 0.95;
    letter-spacing: -0.045em;
    color: var(--text);
    margin-bottom: 18px;
  }
  .ps-num .ps-unit {
    font-size: 0.55em;
    margin-left: 2px;
    color: var(--accent);
  }
  .ps-d {
    position: relative;
    font-size: 13.5px; color: var(--dim);
    line-height: 1.5;
    letter-spacing: -0.005em;
  }
  .ps-d b { color: var(--text); font-weight: 600; }

  /* PROCESS — 4 numbered steps */
  #process { padding: 96px 0 100px; border-top: 1px solid var(--line); }
  .proc-head {
    text-align: center;
    margin-bottom: 80px;
  }
  .proc-head .section-h { text-align: center; max-width: 880px; margin: 0 auto 16px; }
  .proc-sub {
    font-size: 16px; color: var(--text);
    letter-spacing: -0.005em;
  }
  .proc-steps {
    position: relative;
    max-width: 920px;
    margin: 0 auto;
  }
  .proc-steps::before {
    content: '';
    position: absolute; top: 32px; bottom: 32px;
    left: 50%; transform: translateX(-50%);
    width: 0;
    border-left: 1px dashed rgba(212,255,61,0.28);
  }
  .proc-step {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 76px 1fr;
    gap: 24px;
    align-items: center;
    margin-bottom: 56px;
  }
  .proc-step:last-child { margin-bottom: 0; }
  .proc-step .proc-circle {
    grid-column: 2;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--accent);
    color: #0a0a0a;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 800;
    font-size: 22px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 6px #0a0a0a, 0 0 32px rgba(212,255,61,0.35);
    z-index: 1;
    justify-self: center;
    letter-spacing: -0.02em;
  }
  .proc-step .proc-content {
    background: #0d0d0d;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 28px 30px;
    transition: border-color .25s ease, transform .25s ease;
  }
  .proc-step:hover .proc-content {
    border-color: rgba(212,255,61,0.28);
    transform: translateY(-2px);
  }
  .proc-step.left .proc-content { grid-column: 1; text-align: right; }
  .proc-step.right .proc-content { grid-column: 3; text-align: left; }
  .proc-h {
    font-family: 'Inter Tight', sans-serif;
    font-size: 24px; font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--text);
    margin-bottom: 10px;
    line-height: 1.15;
  }
  .proc-d {
    font-size: 14.5px; color: var(--dim);
    line-height: 1.55;
    letter-spacing: -0.005em;
  }
  .proc-d b { color: var(--text); font-weight: 600; }

  @media (max-width: 900px) {
    .ps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .ps-card { padding: 24px 22px; }
    .ps-num { font-size: 56px; }
    .proc-steps::before { left: 28px; transform: none; }
    .proc-step { grid-template-columns: 56px 1fr; gap: 18px; margin-bottom: 36px; }
    .proc-step .proc-circle { grid-column: 1 !important; width: 56px; height: 56px; font-size: 20px; }
    .proc-step.left .proc-content, .proc-step.right .proc-content {
      grid-column: 2; text-align: left;
    }
    .proc-h { font-size: 20px; }
    .rated-pill { padding: 10px 16px; font-size: 12.5px; gap: 10px; }
  }
  @media (max-width: 600px) {
    .ps-grid { grid-template-columns: 1fr; }
    #proof-stats { padding: 56px 0; }
    #process { padding: 64px 0 72px; }
    .proc-head { margin-bottom: 48px; }
  }

  /*
   * Body-copy fields the inline editor (roininja-inline-edit.js) can save a line break
   * into. Must ship in the MAIN stylesheet, not the editor-only one — the break has to
   * render for every visitor, not just a logged-in editor. `pre-line` preserves a saved
   * \n as a real line break while still collapsing ordinary runs of spaces/tabs, so
   * nothing changes for the (much more common) case of plain single-line copy.
   */
  .case-body, .case-quote, .hero-body, .answer, .final p.final-body,
  .wn-body, .pricing-blurb, .program-sub, .success-sub, .story-body {
    white-space: pre-line;
  }

  /* STORY */
  .story-body {
    font-size: clamp(24px, 2.7vw, 38px);
    line-height: 1.25; letter-spacing: -0.02em;
    max-width: 1100px; color: var(--text);
    margin-bottom: 64px; font-weight: 500;
  }
  .story-body .dim { color: var(--dim); }
  .story-body .accent { color: var(--accent); }
  .story-meta {
    display: grid; grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    margin-bottom: 64px;
  }
  .story-meta .item { padding: 36px 28px 36px 0; border-right: 1px solid var(--line); }
  .story-meta .item:last-child { border-right: none; padding-right: 0; }
  .story-meta .item:nth-child(n+2) { padding-left: 28px; }
  .story-meta .num {
    font-size: clamp(36px, 4vw, 56px); font-weight: 700;
    letter-spacing: -0.03em; line-height: 1; margin-bottom: 12px;
  }
  .story-meta .lbl { font-size: 14px; color: var(--dim); line-height: 1.45; }

  /* LIVE metrics strip */
  .story-live {
    margin-top: 32px;
    padding: 18px 24px;
    background: rgba(212,255,61,0.03);
    border: 1px solid rgba(212,255,61,0.18);
    border-radius: 10px;
  }
  .sl-row {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 28px;
    font-size: 14px;
  }
  .sl-cell {
    display: inline-flex; align-items: baseline; gap: 8px;
    color: var(--dim);
  }
  .sl-cell:first-child { gap: 10px; }
  .sl-pulse {
    display: inline-block;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 0 rgba(212,255,61,0.6);
    animation: pulse 2s infinite;
    align-self: center;
  }
  @keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(212,255,61,0.55); }
    70%  { box-shadow: 0 0 0 10px rgba(212,255,61,0); }
    100% { box-shadow: 0 0 0 0 rgba(212,255,61,0); }
  }
  .sl-lbl {
    font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
    font-weight: 700; color: var(--accent);
  }
  .sl-sep { color: var(--mute); }
  .sl-v {
    color: var(--text); font-weight: 700; font-size: 15px;
    letter-spacing: -0.01em;
  }
  .sl-k { font-size: 12.5px; color: var(--dim); }
  .sl-updated {
    margin-left: auto;
    font-size: 12px; color: var(--mute);
    letter-spacing: 0.06em;
  }
  @media (max-width: 860px) {
    .story-live { padding: 14px 16px; }
    .sl-row { gap: 16px; }
    .sl-updated { margin-left: 0; width: 100%; order: 99; padding-top: 4px; border-top: 1px solid rgba(255,255,255,0.05); margin-top: 6px; }
  }

  .awards-strip {
    padding: 56px 0 0; border-top: 1px solid var(--line);
  }
  .awards-strip .lbl {
    font-size: 11px; color: var(--mute); letter-spacing: 0.2em;
    text-transform: uppercase; margin-bottom: 24px; display: block;
  }
  .awards-strip .items {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
  }
  .award-mention {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 34px 13px 13px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    text-decoration: none; color: inherit;
    position: relative;
    transition: border-color .15s ease, transform .15s ease, background .15s ease;
    min-width: 0;
  }
  .award-mention:hover {
    border-color: rgba(212, 255, 61, 0.4);
    background: var(--surface-2);
    transform: translateY(-1px);
  }
  .award-mention::after {
    content: '↗'; position: absolute; top: 50%; right: 12px;
    transform: translateY(-50%);
    color: var(--mute); font-size: 12px;
    transition: color .15s ease;
  }
  .award-mention:hover::after { color: var(--accent); }
  .award-mention .mark {
    flex: 0 0 36px; width: 36px; height: 36px;
    border-radius: 7px;
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.04);
  }
  .award-mention .mark img {
    width: 24px; height: 24px;
    object-fit: contain;
    display: block;
  }
  .award-mention .meta {
    display: flex; flex-direction: column; gap: 2px;
    min-width: 0;
  }
  .award-mention .src {
    font-size: 12px; color: var(--dim);
    letter-spacing: 0.16em; text-transform: uppercase;
    font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .award-mention .title {
    font-size: 12.5px; color: var(--text);
    font-weight: 500; letter-spacing: -0.005em;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* BLOG */
  .blog-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
    border-top: 1px solid var(--line);
  }
  .blog-card {
    padding: 36px 32px 36px 0; border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    display: flex; flex-direction: column; gap: 16px;
    color: inherit; min-height: 280px;
    transition: background .2s ease;
  }
  .blog-card:nth-child(3n) { border-right: none; padding-right: 0; }
  .blog-card:nth-child(n+2):nth-child(-n+3) { padding-left: 32px; }
  .blog-card:nth-child(3n+2), .blog-card:nth-child(3n+3) { padding-left: 32px; }
  .blog-card:hover { background: rgba(255,255,255,0.015); }
  .blog-card:hover .blog-title { color: var(--accent); }
  .blog-cat {
    font-size: 11px; color: var(--accent); letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  .blog-title {
    font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
    line-height: 1.2; color: var(--text); transition: color .2s ease;
  }
  .blog-excerpt { font-size: 14px; color: var(--dim); line-height: 1.55; }
  .blog-meta {
    margin-top: auto; padding-top: 16px;
    font-size: 12px; color: var(--mute); letter-spacing: 0.04em;
    display: flex; align-items: center; gap: 10px;
  }
  .blog-meta .arrow { margin-left: auto; color: var(--dim); }
  .blog-card:hover .blog-meta .arrow { color: var(--accent); transform: translateX(3px); transition: transform .2s ease; }
  .blog-card.is-hidden { display: none; }
  .blog-card.is-revealing { animation: blog-fade-in .45s ease both; }
  @keyframes blog-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .blog-foot { margin-top: 48px; display: flex; justify-content: center; gap: 14px; align-items: center; }
  .blog-loadmore {
    background: transparent;
    border: 1px solid var(--line-2);
    color: var(--text);
    font-family: inherit;
    font-size: 14px; font-weight: 600;
    letter-spacing: -0.005em;
    padding: 14px 28px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 10px;
    transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease;
  }
  .blog-loadmore:hover {
    border-color: var(--accent);
    background: rgba(212, 255, 61, 0.06);
    color: var(--accent);
    transform: translateY(-1px);
  }
  .blog-loadmore .count {
    color: var(--mute);
    font-weight: 500;
    margin-left: 2px;
  }
  .blog-loadmore:hover .count { color: var(--accent); opacity: 0.7; }
  .blog-loadmore .arr { transition: transform .2s ease; }
  .blog-loadmore:hover .arr { transform: translateY(2px); }

  /* FORM */
  .form-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: start; margin-top: 48px; }
  .form-side .badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; border-radius: 999px;
    background: rgba(212,255,61,0.06); border: 1px solid rgba(212,255,61,0.25);
    color: var(--accent); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
    margin-bottom: 24px;
  }
  .form-side .feat-list { margin-top: 32px; }
  .form-side .feat-list .item {
    display: grid; grid-template-columns: 24px 1fr; gap: 16px;
    padding: 16px 0; border-bottom: 1px solid var(--line);
    align-items: start;
  }
  .form-side .feat-list .item:last-child { border-bottom: none; }
  .form-side .feat-list .ic { color: var(--accent); font-weight: 700; padding-top: 2px; }
  .form-side .feat-list .t { font-size: 15px; font-weight: 600; color: var(--text); }
  .form-side .feat-list .d { font-size: 13.5px; color: var(--dim); margin-top: 4px; line-height: 1.5; }

  .lead-form {
    background: var(--surface); border: 1px solid var(--line);
    padding: 40px; border-radius: 10px;
    display: flex; flex-direction: column; gap: 28px;
  }
  .lead-form h3 {
    font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
    margin-bottom: -4px;
  }
  .field { display: flex; flex-direction: column; gap: 8px; }
  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .field label.lbl {
    font-size: 11px; color: var(--dim); letter-spacing: 0.12em; text-transform: uppercase;
  }
  .field input[type=text],
  .field input[type=email],
  .field input[type=tel],
  .field input[type=url],
  .field textarea {
    background: var(--bg); border: 1px solid var(--line-2); color: var(--text);
    padding: 13px 16px; font-family: 'Inter Tight', sans-serif; font-size: 15px;
    border-radius: 6px; outline: none;
    transition: border-color .15s ease;
    width: 100%;
  }
  .field input:focus, .field textarea:focus { border-color: var(--accent); }
  .field textarea { min-height: 80px; resize: vertical; }
  .radio-group { display: flex; flex-wrap: wrap; gap: 8px; }
  .radio-group label {
    display: inline-flex; align-items: center;
    padding: 9px 14px; border: 1px solid var(--line-2);
    border-radius: 999px; cursor: pointer; font-size: 14px;
    color: var(--dim); transition: all .15s ease;
    user-select: none;
  }
  .radio-group label:hover { color: var(--text); border-color: var(--line-2); }
  .radio-group input[type=radio] { display: none; }
  .radio-group label:has(input:checked) { color: #0a0a0a; background: var(--accent); border-color: var(--accent); font-weight: 600; }
  .form-submit { margin-top: 4px; align-self: flex-start; }
  .form-note { font-size: 12px; color: var(--mute); margin-top: -4px; }

  /* RESPONSIVE */
  @media (max-width: 980px) {
    section { padding: 96px 0; }
    .hero { padding: 140px 0 56px; }
    .nav-mid { display: none; }
    h1.hero-h1 { font-size: clamp(44px, 11vw, 80px); }
    .hero-grid, .case-grid, .team-intro { grid-template-columns: 1fr; gap: 40px; }
    .hero-body { font-size: 17px; }
    .lead-card > .field > input[type=text],
    .lead-card > .field > input[type=email],
    .lead-card > .field > input[type=tel] { font-size: 15px !important; }
    .lead-card .input-group input { font-size: 15px !important; }
    .lead-card .group-label { font-size: 14.5px; }
    .lead-card .radio-list label { font-size: 14.5px; }
    .lead-card button.submit { font-size: 15.5px; }
    .case-grid:nth-of-type(even) { grid-template-columns: 1fr; }
    .case-grid:nth-of-type(even) > div:first-child { order: 1; }
    .case-grid:nth-of-type(even) > .case-visual { order: 2; }
    .team-meta { border-left: none; border-top: 1px solid var(--line); padding-left: 0; padding-top: 24px; }
    .results-big, .pillars, .plans, .terms, .tl, .roles, .chart-anno {
      grid-template-columns: 1fr; border-right: none;
    }
    .results-big .result, .pillar, .plan, .term, .tl-cell, .role {
      border-right: none !important; padding: 24px 0 !important;
      border-bottom: 1px solid var(--line);
    }
    .chart-anno .item:last-child { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 22px; }
    .price-includes, .bonus-list { grid-template-columns: 1fr; gap: 20px; }
    .price-includes .grid { grid-template-columns: 1fr; }
    .chart-legend { flex-wrap: wrap; gap: 16px; }
    /* The chart caption and its delta badge share one flex row on desktop. In a phone-width
       card there is no room for both, so each wraps to two lines and they collide at the
       baseline. Stack them instead: caption on its own line, delta under it. */
    .case-chart-h {
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
      margin-bottom: 10px;
    }
    .case-chart-h .delta { font-size: 15px; line-height: 1.25; }
    .case-chart-wrap { padding: 18px 16px 14px; }

    .case-stats { grid-template-columns: 1fr 1fr; }
    .case-stat { padding: 14px 12px 14px 0 !important; font-size: 14px; }
    .case-stat:nth-child(odd) { border-right: 1px solid var(--line) !important; padding-right: 12px !important; padding-left: 0 !important; }
    .case-stat:nth-child(even) { padding-left: 12px !important; padding-right: 0 !important; }
    .case-stat .v { font-size: 22px !important; }
    summary { grid-template-columns: 1fr 32px; }
    summary .q-num { display: none; }
    .answer { padding-left: 0; }
    table.compare { font-size: 12.5px; display: block; overflow-x: auto; white-space: nowrap; }
    table.compare th, table.compare td { padding: 14px 12px; }
    .hero-bg { background-size: 40px 40px; }
    .story-meta, .blog-grid { grid-template-columns: 1fr; }
    .awards-strip .items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .story-meta .item, .blog-card { padding: 24px 0 !important; border-right: none !important; }
    .clutch-review { padding: 22px 20px; }
    .cr-grid { grid-template-columns: 1fr; gap: 22px; }
    .cr-grid > .cr-col { padding-top: 18px; border-top: 1px solid #e8e8e8; }
    .cr-grid > .cr-col:first-child { padding-top: 0; border-top: none; }
    .award-mention { padding: 12px 30px 12px 11px; gap: 10px; }
    .award-mention .mark { flex-basis: 32px; width: 32px; height: 32px; }
    .award-mention .mark img { width: 20px; height: 20px; }
    .award-mention .title { font-size: 12px; }
    .form-grid { grid-template-columns: 1fr; gap: 40px; }
    .lead-form { padding: 28px 22px; }
    .field-row { grid-template-columns: 1fr; }
    .awards-strip { gap: 16px; justify-content: flex-start; }
    .marquee { animation-duration: 80s; }
    .m-chip { padding: 16px 22px; font-size: 15px; min-height: 56px; }
    .lead-section { padding: 56px 0 72px; }
    .lead-card { padding: 28px 22px; gap: 20px; }
    .lead-card .row-2 { grid-template-columns: 1fr; }
    .lead-trust { gap: 14px; font-size: 11.5px; }
  }

  /* STICKY HEADER ON SCROLL */
  .site-topbar {
    position: fixed; top: 0; left: 0; right: 0;
    background: rgba(10, 10, 10, 0.82);
    backdrop-filter: saturate(140%) blur(18px);
    -webkit-backdrop-filter: saturate(140%) blur(18px);
    border-bottom: 1px solid var(--line);
    z-index: 50;
    transform: translateY(-100%);
    transition: transform .35s cubic-bezier(.2,.7,.3,1), opacity .25s ease;
    opacity: 0;
    pointer-events: none;
  }
  .site-topbar.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .site-topbar .inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 12px 40px;
    display: flex;
    align-items: center;
    gap: 28px;
  }
  .site-topbar .sh-brand {
    font-size: 17px; font-weight: 800; letter-spacing: -0.04em;
    text-decoration: none; color: inherit;
    display: inline-flex; flex-direction: column; align-items: flex-start;
    line-height: 1;
  }
  .site-topbar .sh-brand-mark { display: inline-flex; align-items: baseline; }
  .site-topbar .sh-brand .roi { color: var(--accent); }
  .site-topbar .sh-brand .ninja { color: var(--text); }
  .site-topbar .sh-nav {
    display: flex; gap: 24px; margin-left: 8px;
  }
  .site-topbar .sh-nav a {
    font-size: 14px; color: var(--dim);
    text-decoration: none; font-weight: 500;
    letter-spacing: -0.003em;
    transition: color .15s ease;
  }
  .site-topbar .sh-nav a:hover { color: var(--text); }
  .site-topbar .sh-cta {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 18px;
    background: var(--accent);
    color: #0a0a0a;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px; font-weight: 700;
    letter-spacing: -0.005em;
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .site-topbar .sh-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(212,255,61,0.28);
  }
  @media (max-width: 860px) {
    .site-topbar .inner { padding: 10px 16px; gap: 12px; }
    .site-topbar .sh-nav { display: none; }
    .site-topbar .sh-brand { font-size: 22px; }
    .site-topbar .sh-cta { padding: 8px 14px; font-size: 12.5px; }
  }

/* ---- source style block boundary ---- */

#results, #testimonials, #story, #team, #final, #seo, #video { position: relative; }
  #results > .container, #testimonials > .container, #story > .container, #team > .container, #final > .container, #seo > .container, #video > .container { position: relative; z-index: 1; }
  #results::before, #testimonials::before, #story::before, #team::before, #final::before, #seo::before, #video::before {
    content: ''; position: absolute; pointer-events: none; z-index: 0; border-radius: 50%; filter: blur(34px);
  }
  #results::before  { width: 560px; height: 560px; top: 6%;  left: -240px;  background: radial-gradient(circle, rgba(212,255,61,0.060), transparent 70%); }
  #testimonials::before { width: 600px; height: 600px; top: 4%; right: -260px; background: radial-gradient(circle, rgba(212,255,61,0.050), transparent 70%); }
  #story::before { width: 560px; height: 560px; bottom: -120px; left: -220px; background: radial-gradient(circle, rgba(212,255,61,0.055), transparent 70%); }
  #team::before  { width: 600px; height: 600px; top: 8%; right: -260px; background: radial-gradient(circle, rgba(212,255,61,0.050), transparent 70%); }
  #final::before { width: 780px; height: 520px; top: -40px; left: 50%; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(212,255,61,0.10), transparent 66%); }
  #seo::before   { width: 600px; height: 600px; top: 5%; left: -260px; background: radial-gradient(circle, rgba(212,255,61,0.045), transparent 70%); }
  /* Same centred-ellipse treatment as #final, sized to sit behind the player itself. */
  #video::before { width: 1000px; height: 620px; top: 50%; left: 50%; transform: translate(-50%, -50%); background: radial-gradient(ellipse at center, rgba(212,255,61,0.11), transparent 68%); }
  @media (max-width: 640px) {
    #results::before,#testimonials::before,#story::before,#team::before,#seo::before { width: 320px; height: 320px; }
    #video::before { width: 460px; height: 340px; }
  }

/* ---- source style block boundary ---- */

.seo-article { background: var(--bg); }
  .seo-article .seo-wrap { max-width: 820px; margin: 0 auto; }
  .seo-article .seo-eyebrow {
    font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
    font-weight: 700; color: var(--mute); margin-bottom: 18px;
  }
  .seo-article .seo-title {
    font-size: clamp(30px, 4.2vw, 46px); font-weight: 800;
    letter-spacing: -0.035em; line-height: 1.06; margin-bottom: 26px; color: var(--text);
  }
  .seo-article .seo-title .accent { color: var(--accent); }
  .seo-article h3.seo-h2 {
    font-size: clamp(23px, 2.7vw, 31px); font-weight: 800;
    letter-spacing: -0.03em; line-height: 1.16; margin: 64px 0 18px; color: var(--text);
  }
  .seo-article h4.seo-h3 {
    font-size: 18.5px; font-weight: 700; letter-spacing: -0.02em;
    margin: 38px 0 12px; color: var(--text);
  }
  .seo-article p { color: var(--dim); font-size: 16px; line-height: 1.72; margin-bottom: 16px; }
  .seo-article p.seo-lead { font-size: 18px; line-height: 1.65; color: #c2c2c2; }
  .seo-article p b, .seo-article li b { color: var(--text); font-weight: 600; }
  .seo-article .seo-list { list-style: none; padding: 0; margin: 4px 0 16px; }
  .seo-article .seo-list li {
    position: relative; padding-left: 26px; margin-bottom: 14px;
    color: var(--dim); font-size: 16px; line-height: 1.6;
  }
  .seo-article .seo-list li::before {
    content: ""; position: absolute; left: 4px; top: 10px;
    width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  }
  /* flow chain */
  .seo-article .seo-flow {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 22px 0 26px;
  }
  .seo-article .seo-flow .step {
    background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
    padding: 10px 15px; font-size: 13.5px; font-weight: 600; color: var(--text);
  }
  .seo-article .seo-flow .arr { color: var(--accent); font-weight: 800; font-size: 15px; }
  /* compare */
  .seo-article .seo-compare {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 28px 0;
  }
  .seo-article .seo-compare .col {
    border: 1px solid var(--line); border-radius: 12px; padding: 22px 24px; background: var(--surface);
  }
  .seo-article .seo-compare .col.good { border-color: rgba(212,255,61,0.32); }
  .seo-article .seo-compare .lbl {
    font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
    font-weight: 700; margin-bottom: 10px;
  }
  .seo-article .seo-compare .bad .lbl { color: var(--mute); }
  .seo-article .seo-compare .good .lbl { color: var(--accent); }
  .seo-article .seo-compare .val { font-size: 15px; line-height: 1.5; color: var(--dim); }
  .seo-article .seo-compare .good .val { color: var(--text); }
  /* table */
  .seo-article .seo-table { width: 100%; border-collapse: collapse; margin: 26px 0; font-size: 14px; }
  .seo-article .seo-table th, .seo-article .seo-table td {
    text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--line);
    color: var(--dim); vertical-align: top; line-height: 1.45;
  }
  .seo-article .seo-table th {
    color: var(--text); font-weight: 700; font-size: 11px; letter-spacing: 0.12em;
    text-transform: uppercase; background: rgba(255,255,255,0.02);
  }
  .seo-article .seo-table td b { color: var(--text); font-weight: 600; }
  /* cta */
  .seo-article .seo-cta {
    margin-top: 60px; padding: 38px 36px; border: 1px solid rgba(212,255,61,0.28);
    border-radius: 16px; background: var(--surface); text-align: center;
  }
  .seo-article .seo-cta h3 {
    font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; letter-spacing: -0.03em;
    line-height: 1.15; margin-bottom: 14px; color: var(--text);
  }
  .seo-article .seo-cta p { font-size: 16px; max-width: 600px; margin: 0 auto 14px; }
  .seo-article .seo-cta .btn { margin-top: 14px; }
  @media (max-width: 640px) {
    .seo-article .seo-compare { grid-template-columns: 1fr; }
    .seo-article .seo-cta { padding: 28px 22px; }
    .seo-article .seo-table th, .seo-article .seo-table td { padding: 11px 10px; font-size: 13px; }
  }

/* ---- source style block boundary ---- */

/* Footer language switcher */
  .lang-switch {
    display: flex; flex-wrap: wrap; gap: 14px;
    font-size: 12px; letter-spacing: 0.06em;
    color: var(--mute); margin: 4px 0;
  }
  .lang-switch .lang-current {
    color: var(--accent); font-weight: 700;
    border-bottom: 1px solid var(--accent);
    padding-bottom: 1px;
  }
  .lang-switch a {
    color: var(--mute); text-decoration: none;
    transition: color .15s ease;
  }
  .lang-switch a:hover { color: var(--text); }

  /* Sticky animated proof-bar (desktop only) */
  .proof-bar {
    position: fixed;
    bottom: 20px; left: 20px;
    width: 320px;
    background: rgba(13, 13, 13, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 14px;
    padding: 14px 18px 12px;
    z-index: 50;
    box-shadow: 0 18px 48px rgba(0,0,0,0.55);
    opacity: 0;
    transform: translate(-20px, 10px);
    transition: opacity .35s ease, transform .35s cubic-bezier(.2,.7,.3,1);
    pointer-events: none;
  }
  .proof-bar.is-visible {
    opacity: 1;
    transform: translate(0, 0);
    pointer-events: auto;
  }
  .pb-head {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 10px;
  }
  .pb-pulse {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 0 rgba(212,255,61,0.55);
    animation: pulse 2s infinite;
    flex-shrink: 0;
  }
  .pb-lbl {
    font-family: 'Inter Tight', sans-serif;
    font-size: 12px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--accent);
    font-weight: 700;
  }
  .pb-close {
    margin-left: auto;
    background: transparent; border: none;
    color: var(--mute); cursor: pointer;
    font-size: 20px; line-height: 1;
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    padding: 0;
    transition: color .15s ease, background .15s ease;
  }
  .pb-close:hover { color: var(--text); background: rgba(255,255,255,0.06); }
  .pb-stage {
    position: relative;
    height: 64px;
    overflow: hidden;
  }
  .pb-slide {
    position: absolute; top: 0; left: 0; right: 0;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .4s ease, transform .4s ease;
    pointer-events: none;
  }
  .pb-slide.is-active {
    opacity: 1;
    transform: translateY(0);
  }
  .pb-brand {
    font-size: 12px; color: var(--dim);
    letter-spacing: 0.04em;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pb-metric {
    font-family: 'Inter Tight', sans-serif;
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -0.025em;
    color: var(--accent);
    line-height: 1.1;
    margin-bottom: 3px;
  }
  .pb-desc {
    font-size: 11px; color: var(--mute);
    letter-spacing: -0.005em;
    line-height: 1.3;
  }
  .pb-cta {
    display: block;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid rgba(255,255,255,0.06);
    font-size: 11px;
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
    transition: color .15s ease;
  }
  .pb-cta:hover { color: var(--accent); }
  @media (max-width: 1080px) {
    .proof-bar { display: none !important; }
  }

  /* Sticky mobile CTA */
  .mobile-cta {
    display: none;
    position: fixed; left: 12px; right: 12px; bottom: 14px;
    background: #d4ff3d; color: #0a0a0a;
    text-decoration: none; text-align: center;
    padding: 16px 20px; border-radius: 999px;
    font-weight: 700; font-size: 15px;
    letter-spacing: -0.005em;
    box-shadow: 0 12px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,0,0,0.08);
    z-index: 60;
  }
  @media (max-width: 860px) {
    .mobile-cta { display: flex; align-items: center; justify-content: center; gap: 8px; }
    .mobile-cta.is-hidden { transform: translateY(120%); opacity: 0; transition: transform .25s ease, opacity .2s ease; }
    /* No `body { padding-bottom }` here on purpose. That padding existed so the fixed bar
       could never cover the end of the page — but roininja-main.js already hides the bar
       whenever #final is on screen, i.e. exactly when you reach the bottom. Measured at
       390px: at full scroll the bar is opacity 0 and translated off, so the reserved 72px
       was only ever rendering as dead space under the footer. */
  }

  /* Floating Telegram button (template-parts/telegram-fab.php) — bottom-RIGHT, so it
     never meets .proof-bar or the inline-edit toolbar, both of which sit bottom-left. */
  .tg-fab {
    position: fixed;
    right: 22px; bottom: 22px;
    width: 58px; height: 58px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--accent);
    color: #0a0a0a;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,0,0,0.06);
    z-index: 70;                      /* above .mobile-cta (60) and the topbar (50) */
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .tg-fab:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 14px 38px rgba(0,0,0,0.5), 0 0 28px -4px rgba(212,255,61,0.55);
  }
  .tg-fab:active { transform: translateY(0) scale(0.98); }
  .tg-fab:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }

  .tg-icon { display: flex; position: relative; z-index: 1; }

  /* The moving part: two rings expanding out of the circle, offset in time. Behind the
     button (z-index 0 vs the icon's 1) and pointer-events:none so they never eat a click. */
  .tg-ring {
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 2px solid var(--accent);
    pointer-events: none;
    z-index: 0;
    animation: tg-pulse 2.4s cubic-bezier(.2,.7,.3,1) infinite;
  }
  .tg-ring-2 { animation-delay: 1.2s; }
  @keyframes tg-pulse {
    0%   { transform: scale(1);    opacity: 0.65; }
    70%  { transform: scale(1.9);  opacity: 0; }
    100% { transform: scale(1.9);  opacity: 0; }
  }

  /* On the templates that pin a full-width CTA bar to the bottom under 860px, lift the
     button above it rather than letting the two overlap. */
  @media (max-width: 860px) {
    .tg-fab { right: 16px; bottom: 16px; width: 54px; height: 54px; }
    .tg-fab.has-mobile-cta { bottom: 84px; }
  }

  /* A ring that never stops is exactly what reduced-motion asks you to drop. */
  @media (prefers-reduced-motion: reduce) {
    .tg-ring { animation: none; opacity: 0.35; }
    .tg-fab { transition: none; }
    .tg-fab:hover { transform: none; }
  }

  /* Form toast */
  .form-toast {
    position: fixed;
    top: 24px; right: 24px;
    background: #fafafa; color: #0a0a0a;
    border-radius: 10px;
    box-shadow: 0 18px 48px rgba(0,0,0,0.5);
    padding: 16px 20px 16px 16px;
    display: none;
    gap: 12px; align-items: center;
    max-width: 380px;
    z-index: 100;
    animation: toast-in .35s ease both;
  }
  .form-toast.is-visible { display: flex; }
  .form-toast-mark {
    flex: 0 0 36px; width: 36px; height: 36px;
    border-radius: 50%;
    background: #d4ff3d; color: #0a0a0a;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 18px;
  }
  .form-toast-t { font-weight: 700; font-size: 14.5px; }
  .form-toast-d { font-size: 14px; color: #555; margin-top: 2px; }
  @keyframes toast-in {
    from { transform: translateY(-12px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }