/* -------- Reset / Tokens -------- */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --bg: #0a0a0a;
    --bg-2: #111110;
    --ink: #f3efe6;
    --ink-dim: #8a8478;
    --rule: #1f1d1a;
    --accent: #ff5b1f;
    --accent-soft: #ff5b1f22;
    --serif: 'Instrument Serif', 'Times New Roman', serif;
    --mono: 'JetBrains Mono', ui-monospace, monospace;
    --sans: 'Inter', system-ui, sans-serif;
    --pad-x: clamp(20px, 4vw, 64px);
    --maxw: 1500px;
    /* Full-bleed borders, but content centered to a max width on large screens */
    --gutter: max(var(--pad-x), calc((100% - var(--maxw)) / 2));
  }
  html { scroll-behavior: smooth; scroll-padding-top: 58px; }
  html, body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-weight: 300; letter-spacing: -0.005em; line-height: 1.45; }
  body { overflow-x: hidden; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  a { color: inherit; text-decoration: none; }
  ::selection { background: var(--accent); color: var(--bg); }

  /* -------- Grain texture -------- */
  body::before {
    content: '';
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 100;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
  }

  /* -------- Top status bar -------- */
  .status {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 50;
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px var(--gutter);
    font-family: var(--mono); font-size: 11px; font-weight: 400;
    color: var(--ink-dim);
    background: rgba(10,10,10,0.7);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--rule);
    text-transform: uppercase; letter-spacing: 0.08em;
  }
  .status .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 8px; animation: pulse 2s infinite; vertical-align: middle; }
  .status .brand { display: inline-flex; align-items: center; color: var(--ink-dim); white-space: nowrap; transition: color 0.2s; }
  .status .brand:hover { color: var(--ink); }
  .status .right { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }
  .status .right a { color: var(--ink); white-space: nowrap; transition: color 0.2s; position: relative; padding: 2px 0; }
  .status .right a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -3px; height: 1px; background: var(--accent); transition: right 0.25s ease; }
  .status .right a:hover { color: var(--accent); }
  .status .right a.active { color: var(--accent); }
  .status .right a.active::after { right: 0; }
  .status .right a.contact { color: var(--accent); }
  /* scroll progress hairline */
  .scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--accent); z-index: 51; transition: width 0.1s linear; }
  /* mobile menu toggle */
  .nav-toggle { display: none; background: none; border: 1px solid var(--rule); color: var(--ink); font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; padding: 7px 12px; cursor: pointer; border-radius: 999px; align-items: center; gap: 8px; transition: 0.2s; }
  .nav-toggle:hover { border-color: var(--ink-dim); }
  .nav-toggle .bars { display: inline-flex; flex-direction: column; gap: 3px; }
  .nav-toggle .bars i { display: block; width: 14px; height: 1px; background: currentColor; transition: 0.25s; }
  .nav-toggle[aria-expanded="true"] .bars i:nth-child(1) { transform: translateY(4px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .bars i:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .bars i:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }
  @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

  @media (max-width: 820px) {
    .nav-toggle { display: inline-flex; }
    .status { flex-wrap: nowrap; }
    .status .right {
      position: absolute; top: 100%; left: 0; right: 0;
      flex-direction: column; align-items: stretch; gap: 0;
      background: rgba(10,10,10,0.97); backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--rule);
      padding: 4px var(--pad-x) 14px;
      transform: translateY(-130%); transition: transform 0.3s ease; opacity: 0;
      pointer-events: none;
      max-height: calc(100vh - 100%); overflow-y: auto;
    }
    .status .right.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
    .status .right a { padding: 13px 0; border-bottom: 1px solid var(--rule); }
    .status .right a::after { display: none; }
    .status .right a.active { padding-left: 12px; border-left: 2px solid var(--accent); }
  }

  /* -------- Section frame -------- */
  section { padding: clamp(60px, 9vh, 140px) var(--gutter); border-bottom: 1px solid var(--rule); position: relative; }
  .label { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 28px; display: flex; align-items: baseline; gap: 12px; }
  .label .num { color: var(--accent); }

  /* -------- HERO -------- */
  .hero { min-height: 100vh; display: flex; flex-direction: column; padding-top: clamp(104px, 13vh, 156px); }
  .hero-meta { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; font-family: var(--mono); font-size: 11px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.1em; }
  .hero-meta .cell { border-top: 1px solid var(--rule); padding-top: 10px; }
  .hero-meta .cell strong { display: block; color: var(--ink); font-weight: 400; margin-top: 4px; font-size: 11px; }
  .hero-main { flex: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(40px, 6vw, 130px); padding: clamp(24px, 4vh, 56px) 0; }
  .hero-left { flex: 0 1 620px; display: flex; flex-direction: column; gap: clamp(20px, 2.6vh, 34px); }
  .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: clamp(-8px, -1vh, -16px); }
  .eyebrow .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 2s infinite; }
  .wordmark {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(80px, 13vw, 220px);
    line-height: 0.82;
    letter-spacing: -0.04em;
  }
  .wordmark em { font-style: italic; color: var(--accent); }
  .hero .sub { display: block; font-family: var(--sans); font-weight: 300; font-style: normal; font-size: clamp(15px, 1.15vw, 19px); color: var(--ink-dim); letter-spacing: 0.02em; line-height: 1.55; max-width: 560px; }
  .hero-body { font-size: clamp(15px, 1.05vw, 17px); line-height: 1.6; color: var(--ink); max-width: 560px; }
  .rocket-wrap { flex: 0 0 auto; width: clamp(300px, 32vw, 460px); display: flex; flex-direction: column; gap: 16px; position: relative; }
  .rocket-svg { width: 100%; max-width: 100%; height: auto; }
  /* rocket annotations + plain-language readout */
  .rocket-svg .annot-rail { stroke: var(--rule); stroke-width: 0.6; }
  .rocket-svg .annot-lead { stroke: var(--ink-dim); stroke-width: 0.6; transition: stroke 0.15s; }
  .rocket-svg .annot-dot { fill: var(--ink-dim); transition: fill 0.15s; }
  .rocket-svg .annot-hit { fill: transparent; pointer-events: all; }
  .rocket-svg .annot { cursor: help; }
  .rocket-svg .annot:focus { outline: none; }
  .rocket-svg .annot:hover .annot-label,
  .rocket-svg .annot.is-active .annot-label,
  .rocket-svg .annot:focus-visible .annot-label { fill: var(--accent); }
  .rocket-svg .annot:hover .annot-lead,
  .rocket-svg .annot.is-active .annot-lead,
  .rocket-svg .annot:focus-visible .annot-lead { stroke: var(--accent); }
  .rocket-svg .annot:hover .annot-dot,
  .rocket-svg .annot.is-active .annot-dot,
  .rocket-svg .annot:focus-visible .annot-dot { fill: var(--accent); }
  /* Reserve enough height for the tallest marker readout so hovering never
     resizes the box (which would reflow and shift the rocket above it). */
  .rocket-readout { border: 1px solid var(--rule); border-left: 2px solid var(--accent); background: var(--bg-2); padding: 14px 16px; min-height: 150px; display: flex; flex-direction: column; justify-content: center; }
  .rocket-readout .rr-hint { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-dim); line-height: 1.55; }
  .rocket-readout .rr-content { display: flex; flex-direction: column; gap: 5px; }
  .rocket-readout .rr-content[hidden] { display: none; }
  .rocket-readout .rr-key { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
  .rocket-readout .rr-title { font-family: var(--serif); font-size: 20px; line-height: 1.05; color: var(--ink); }
  .rocket-readout .rr-body { font-size: 13px; line-height: 1.55; color: var(--ink-dim); }
  .rocket-svg .stroke { fill: none; stroke: var(--ink); stroke-width: 1; stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: draw 2.5s ease forwards; }
  .rocket-svg .stroke.accent { stroke: var(--accent); }
  .rocket-svg .stroke.dim { stroke: var(--ink-dim); stroke-width: 0.5; }
  .rocket-svg .label-text { font-family: var(--mono); font-size: 9.5px; fill: var(--ink); text-transform: uppercase; letter-spacing: 0.06em; opacity: 0; animation: fadeIn 0.6s ease forwards; }
  .rocket-svg .label-text.dim { fill: var(--ink-dim); }
  .rocket-svg .label-text.accent { fill: var(--accent); }
  .rocket-svg .delay-1 { animation-delay: 0.5s; }
  .rocket-svg .delay-2 { animation-delay: 1.0s; }
  .rocket-svg .delay-3 { animation-delay: 1.5s; }
  .rocket-svg .delay-4 { animation-delay: 2.0s; }
  .rocket-svg .delay-5 { animation-delay: 2.5s; }
  .rocket-svg .delay-6 { animation-delay: 3.0s; }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  @keyframes fadeIn { to { opacity: 1; } }
  .badge-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; margin-top: 4px; }
  .badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border: 1px solid var(--rule); border-radius: 999px; font-family: var(--mono); font-size: 11px; color: var(--ink); background: var(--bg-2); }
  .badge .v { color: var(--accent); }
  .badge.live::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: pulse 1.5s infinite; }

  /* -------- BUILT FOR -------- */
  .twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
  .col h2 { font-family: var(--serif); font-size: clamp(36px, 5vw, 68px); font-weight: 400; line-height: 0.95; letter-spacing: -0.02em; margin-bottom: 36px; }
  .col h2 em { font-style: italic; color: var(--accent); }
  .col ul { list-style: none; }
  .col li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; padding: 18px 0; border-top: 1px solid var(--rule); font-size: 16px; }
  .col li:last-child { border-bottom: 1px solid var(--rule); }
  .col li .ix { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); padding-top: 4px; }

  /* -------- PERFORMANCE -------- */
  .perf-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
  .perf-cell { padding: 36px 28px; border-right: 1px solid var(--rule); display: flex; flex-direction: column; justify-content: space-between; min-height: 260px; }
  .perf-cell:last-child { border-right: none; }
  .perf-cell .h { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.14em; }
  .perf-cell .v { font-family: var(--serif); font-size: clamp(54px, 7vw, 96px); line-height: 1; letter-spacing: -0.03em; }
  .perf-cell .v small { font-family: var(--sans); font-size: 14px; color: var(--ink-dim); margin-left: 6px; letter-spacing: 0; }
  .perf-cell .note { font-size: 12px; color: var(--ink-dim); line-height: 1.5; }
  .perf-cell.feature { background: var(--accent); color: var(--bg); }
  .perf-cell.feature .h, .perf-cell.feature .note { color: var(--bg); opacity: 0.75; }
  .live-pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; padding: 3px 7px; border: 1px solid currentColor; border-radius: 999px; letter-spacing: 0.12em; margin-top: 4px; }
  .live-pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: pulse 1.5s infinite; }
  .lh-scores { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; margin-top: 12px; }
  .lh-scores .row { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; }
  .lh-scores .row .val { font-weight: 500; }

  /* -------- URL TEST (Section 03) -------- */
  .test-head h2 { font-family: var(--serif); font-size: clamp(40px, 5.5vw, 84px); font-weight: 400; line-height: 0.92; letter-spacing: -0.02em; max-width: 800px; margin-bottom: 16px; }
  .test-head h2 em { font-style: italic; color: var(--accent); }
  .test-head p { font-size: 15px; color: var(--ink-dim); max-width: 520px; margin-bottom: 32px; }
  .test-form { display: flex; gap: 0; max-width: 720px; margin-bottom: 36px; border: 1px solid var(--rule); background: var(--bg-2); }
  .test-form .prefix { font-family: var(--mono); font-size: 13px; color: var(--ink-dim); padding: 18px 16px 18px 22px; letter-spacing: 0.04em; }
  .test-form input { flex: 1; min-width: 0; background: none; border: none; color: var(--ink); font-family: var(--mono); font-size: 14px; padding: 18px 8px; outline: none; }
  .test-form input::placeholder { color: var(--ink-dim); opacity: 0.5; }
  .test-form button { background: var(--accent); color: var(--bg); border: none; font-family: var(--mono); font-size: 11px; padding: 0 28px; cursor: pointer; text-transform: uppercase; letter-spacing: 0.14em; transition: 0.2s; }
  .test-form button:hover { background: var(--ink); }
  .test-form button:disabled { background: var(--rule); color: var(--ink-dim); cursor: not-allowed; }
  .test-results { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: 8px; }
  .test-card { background: var(--bg); padding: 32px; min-height: 380px; display: flex; flex-direction: column; gap: 20px; }
  .test-card.us { background: var(--bg-2); }
  .test-card .card-h { display: flex; justify-content: space-between; align-items: baseline; }
  .test-card .url { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); letter-spacing: 0.04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
  .test-card .you-them { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); }
  .test-card .big-score { font-family: var(--serif); font-size: clamp(72px, 9vw, 132px); line-height: 1; letter-spacing: -0.04em; }
  .test-card .big-score small { font-family: var(--sans); font-size: 14px; color: var(--ink-dim); letter-spacing: 0; }
  .test-card .big-score.poor { color: #ef4444; }
  .test-card .big-score.mid { color: #f59e0b; }
  .test-card .big-score.good { color: #22c55e; }
  .test-card .breakdown { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 8px; padding-top: 18px; border-top: 1px solid var(--rule); }
  .test-card .b { display: flex; flex-direction: column; gap: 4px; }
  .test-card .b .l { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.1em; }
  .test-card .b .n { font-family: var(--serif); font-size: 22px; }
  .test-card .footer-note { font-size: 12px; color: var(--ink-dim); margin-top: auto; }
  .test-card.loading .big-score::after { content: '___'; opacity: 0.3; animation: pulse 1.5s infinite; }
  .test-delta { margin-top: 24px; padding: 24px 28px; background: var(--accent); color: var(--bg); display: none; align-items: center; gap: 18px; }
  .test-delta.visible { display: flex; }
  .test-delta .x { font-family: var(--serif); font-size: 40px; font-style: italic; line-height: 1; }
  .test-delta .body { font-family: var(--sans); font-size: 15px; line-height: 1.5; }
  .test-delta .body strong { font-weight: 500; }
  .test-error { margin-top: 16px; padding: 16px; border: 1px solid var(--rule); color: var(--ink-dim); font-family: var(--mono); font-size: 11px; display: none; letter-spacing: 0.04em; }
  .test-error.visible { display: block; }

  /* -------- TCO CHART (Section 04) -------- */
  .tco-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 32px; flex-wrap: wrap; }
  .tco-head h2 { font-family: var(--serif); font-size: clamp(40px, 5.5vw, 84px); font-weight: 400; line-height: 0.92; letter-spacing: -0.02em; max-width: 720px; }
  .tco-head h2 em { font-style: italic; color: var(--accent); }
  .tco-head .intro { font-size: 15px; color: var(--ink-dim); max-width: 380px; }
  .tco-toggles { display: flex; gap: 0; margin-bottom: 28px; border: 1px solid var(--rule); flex-wrap: wrap; }
  .tco-toggles label { flex: 1; min-width: 240px; display: flex; gap: 14px; padding: 18px 22px; cursor: pointer; border-right: 1px solid var(--rule); align-items: flex-start; transition: 0.2s; }
  .tco-toggles label:last-child { border-right: none; }
  .tco-toggles label:hover { background: var(--bg-2); }
  .tco-toggles label.active { background: var(--accent); color: var(--bg); }
  .tco-toggles input { display: none; }
  .tco-toggles .check { width: 16px; height: 16px; border: 1px solid var(--ink-dim); flex-shrink: 0; margin-top: 2px; position: relative; transition: 0.2s; }
  .tco-toggles label.active .check { background: var(--bg); border-color: var(--bg); }
  .tco-toggles label.active .check::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 12px; font-weight: 600; }
  .tco-toggles .body { font-family: var(--mono); font-size: 11px; line-height: 1.4; letter-spacing: 0.04em; }
  .tco-toggles .body strong { display: block; font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 6px; }
  .tco-toggles label.active .body { color: var(--bg); }
  .tco-chart-wrap { border: 1px solid var(--rule); background: var(--bg-2); padding: 32px; position: relative; }
  .tco-svg { width: 100%; height: auto; display: block; }
  .tco-svg .axis { stroke: var(--rule); stroke-width: 0.5; }
  .tco-svg .grid { stroke: var(--rule); stroke-width: 0.3; stroke-dasharray: 2 4; }
  .tco-svg .tick-text { font-family: var(--mono); font-size: 11px; fill: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.1em; }
  .tco-svg .line-wp { fill: none; stroke: var(--ink-dim); stroke-width: 1.5; }
  .tco-svg .line-bo { fill: none; stroke: var(--accent); stroke-width: 2; }
  .tco-svg .crossover { stroke: var(--accent); stroke-width: 0.6; stroke-dasharray: 2 3; }
  .tco-svg .area-saved { fill: var(--accent); opacity: 0.06; }
  .tco-svg .endpoint-wp, .tco-svg .endpoint-bo { fill: var(--bg); stroke-width: 1.5; }
  .tco-svg .endpoint-wp { stroke: var(--ink-dim); }
  .tco-svg .endpoint-bo { stroke: var(--accent); }
  .tco-svg .endpoint-label { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; }
  .tco-svg .endpoint-label.wp { fill: var(--ink-dim); }
  .tco-svg .endpoint-label.bo { fill: var(--accent); }
  .tco-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--rule); border-top: none; }
  .tco-stats .stat { padding: 22px; border-right: 1px solid var(--rule); }
  .tco-stats .stat:last-child { border-right: none; }
  .tco-stats .stat.feature { background: var(--accent); color: var(--bg); }
  .tco-stats .h { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 10px; }
  .tco-stats .stat.feature .h { color: var(--bg); opacity: 0.75; }
  .tco-stats .v { font-family: var(--serif); font-size: clamp(28px, 3vw, 40px); line-height: 1; letter-spacing: -0.02em; }
  .tco-stats .note { font-size: 11px; color: var(--ink-dim); margin-top: 6px; }
  .tco-stats .stat.feature .note { color: var(--bg); opacity: 0.8; }
  .tco-method { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); margin-top: 18px; line-height: 1.6; letter-spacing: 0.04em; }

  /* -------- HOSTING ADD-ONS (inside Pricing) -------- */
  .addons { margin-top: 32px; }
  .addons-h { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 14px; display: flex; align-items: baseline; gap: 12px; }
  .addons-h .num { color: var(--accent); }
  .addons-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--rule); }
  .addon { padding: 28px; border-right: 1px solid var(--rule); display: flex; flex-direction: column; gap: 8px; min-height: 200px; }
  .addon:last-child { border-right: none; }
  .addon.default { background: var(--bg-2); }
  .addon .tag { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); }
  .addon .tag.muted { color: var(--ink-dim); }
  .addon .name { font-family: var(--serif); font-size: 28px; line-height: 1.1; letter-spacing: -0.01em; }
  .addon .price { font-family: var(--serif); font-size: 32px; line-height: 1; }
  .addon .price small { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); letter-spacing: 0.08em; }
  .addon .desc { font-size: 13px; color: var(--ink-dim); margin-top: auto; line-height: 1.5; }
  .launchpad-note { margin-top: 16px; border: 1px solid var(--rule); border-left: 2px solid var(--accent); background: var(--bg-2); padding: 22px 28px; display: flex; gap: 24px; align-items: baseline; flex-wrap: wrap; }
  .launchpad-note .lp-tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--accent); white-space: nowrap; }
  .launchpad-note .lp-body { font-size: 15px; line-height: 1.6; color: var(--ink-dim); max-width: 920px; flex: 1 1 320px; }
  .launchpad-note .lp-body strong { color: var(--ink); font-weight: 500; }
  .launchpad-note .lp-body a { color: var(--accent); border-bottom: 1px solid transparent; transition: border-color 0.2s; }
  .launchpad-note .lp-body a:hover { border-color: var(--accent); }

  /* -------- MEMBER BENEFITS -------- */
  .member-intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 36px; flex-wrap: wrap; }
  .member-intro h2 { font-family: var(--serif); font-size: clamp(36px, 5vw, 68px); font-weight: 400; line-height: 0.95; letter-spacing: -0.02em; max-width: 640px; }
  .member-intro h2 em { font-style: italic; color: var(--accent); }
  .member-intro p { font-size: 15px; color: var(--ink-dim); max-width: 400px; line-height: 1.6; }
  .member-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
  .member { background: var(--bg); padding: 36px 32px; display: flex; flex-direction: column; gap: 10px; min-height: 230px; transition: background 0.25s; }
  .member:hover { background: var(--bg-2); }
  .member .mnum { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
  .member h3 { font-family: var(--serif); font-size: 28px; font-weight: 400; line-height: 1.05; letter-spacing: -0.01em; }
  .member p { font-size: 14px; color: var(--ink-dim); line-height: 1.6; }
  .member .mtag { align-self: flex-start; margin-top: auto; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 5px 12px; }
  .member .mtag.soon { color: var(--ink-dim); border-color: var(--rule); }

  /* -------- ADVOCACY PULL-QUOTE -------- */
  .advocacy { border-left: 2px solid var(--accent); padding: 6px 0 6px 28px; }
  .advocacy .pull { font-family: var(--serif); font-size: clamp(24px, 3.4vw, 40px); font-weight: 400; line-height: 1.18; letter-spacing: -0.015em; max-width: 24ch; }
  .advocacy .pull em { font-style: italic; color: var(--accent); }
  .advocacy .pull-by { margin-top: 20px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); }

  /* -------- HOW IT WORKS -------- */
  .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--rule); }
  .steps .step { padding: 28px 28px 28px 0; border-bottom: 1px solid var(--rule); }
  .steps .step .snum { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--accent); display: block; margin-bottom: 14px; }
  .steps .step h3 { font-family: var(--serif); font-size: 22px; font-weight: 400; margin-bottom: 8px; }
  .steps .step p { font-size: 14px; color: var(--ink-dim); line-height: 1.6; max-width: 34ch; }

  /* -------- FAQ -------- */
  .faq { max-width: 820px; }
  .faq details { border-bottom: 1px solid var(--rule); padding: 22px 0; }
  .faq summary { font-family: var(--serif); font-size: clamp(18px, 2.2vw, 23px); font-weight: 400; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary .pm { flex-shrink: 0; width: 24px; height: 24px; position: relative; border: 1px solid var(--ink-dim); border-radius: 50%; transition: 0.25s; }
  .faq summary .pm::before, .faq summary .pm::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--ink); transition: 0.25s; }
  .faq summary .pm::before { width: 10px; height: 1.5px; }
  .faq summary .pm::after { width: 1.5px; height: 10px; }
  .faq details[open] summary .pm { background: var(--accent); border-color: var(--accent); transform: rotate(90deg); }
  .faq details[open] summary .pm::before { background: var(--bg); }
  .faq details[open] summary .pm::after { opacity: 0; }
  .faq details p { color: var(--ink-dim); margin-top: 14px; font-size: 15px; line-height: 1.6; max-width: 66ch; }
  @media (max-width: 900px) {
    .member-grid { grid-template-columns: 1fr; }
    .steps { grid-template-columns: 1fr; }
    .steps .step { padding-right: 0; }
  }

  /* -------- SECURITY -------- */
  .sec-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
  .sec-wrap h2 { font-family: var(--serif); font-size: clamp(40px, 6vw, 92px); font-weight: 400; line-height: 0.9; letter-spacing: -0.02em; }
  .sec-wrap h2 em { font-style: italic; color: var(--accent); }
  .attack-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: 28px; }
  .attack { background: var(--bg); padding: 22px; }
  .attack .name { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-dim); margin-bottom: 8px; }
  .attack .status-mark { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--accent); }
  .attack .status-mark.gone { text-decoration: line-through; text-decoration-color: var(--accent); color: var(--ink-dim); font-style: normal; font-family: var(--sans); font-size: 14px; }

  /* -------- WORLD MAP -------- */
  .map-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 36px; flex-wrap: wrap; }
  .map-head h2 { font-family: var(--serif); font-size: clamp(40px, 5.5vw, 84px); font-weight: 400; line-height: 0.92; letter-spacing: -0.02em; max-width: 800px; }
  .map-head h2 em { font-style: italic; color: var(--accent); }
  .map-head .legend { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.12em; display: grid; gap: 8px; }
  .map-head .legend .row { display: flex; align-items: center; gap: 10px; }
  .map-head .legend .sw { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
  .map-head .legend .sw.dim { background: var(--ink-dim); }
  .map-head .legend .sw.box { border-radius: 0; border: 1px solid var(--accent); background: none; }
  .world-wrap { position: relative; border: 1px solid var(--rule); background: var(--bg-2); padding: 30px; overflow: hidden; }
  .world-svg { width: 100%; height: auto; display: block; }
  .world-svg .grid { stroke: var(--rule); stroke-width: 0.3; fill: none; }
  .world-svg .continent { fill: var(--ink-dim); fill-opacity: 0.13; stroke: var(--ink-dim); stroke-width: 0.6; stroke-opacity: 0.55; stroke-linejoin: round; }
  .world-svg .equator { stroke: var(--ink-dim); stroke-width: 0.4; stroke-dasharray: 2 3; opacity: 0.5; }
  .world-svg .node-ring { fill: none; stroke: var(--accent); stroke-width: 0.8; opacity: 0; animation: ringPulse 2.5s infinite; }
  .world-svg .node-core { fill: var(--accent); }
  .world-svg .node-core.dim { fill: var(--ink-dim); }
  .world-svg .node-label { font-family: var(--mono); font-size: 8px; fill: var(--ink); text-transform: uppercase; letter-spacing: 0.12em; }
  .world-svg .node-label.dim { fill: var(--ink-dim); }
  .world-svg .link { stroke: var(--accent); stroke-width: 0.4; fill: none; opacity: 0; stroke-dasharray: 200; animation: linkRun 4s infinite; }
  @keyframes ringPulse { 0% { r: 3; opacity: 0.9; } 100% { r: 14; opacity: 0; } }
  @keyframes linkRun { 0% { stroke-dashoffset: 200; opacity: 0; } 30% { opacity: 1; } 70% { opacity: 1; } 100% { stroke-dashoffset: -200; opacity: 0; } }
  .map-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--rule); border-top: none; }
  .map-stats .stat { padding: 20px; border-right: 1px solid var(--rule); }
  .map-stats .stat:last-child { border-right: none; }
  .map-stats .stat .h { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 8px; }
  .map-stats .stat .v { font-family: var(--serif); font-size: 30px; line-height: 1; letter-spacing: -0.02em; }
  .map-stats .stat .note { font-size: 11px; color: var(--ink-dim); margin-top: 6px; }

  /* -------- COMPARISON -------- */
  .table-scroll { margin-top: 24px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .compare-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 680px; }
  .compare-table th, .compare-table td { padding: 18px 14px; text-align: left; border-bottom: 1px solid var(--rule); }
  .compare-table th { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-dim); font-weight: 400; vertical-align: bottom; }
  .compare-table th.us { color: var(--accent); }
  .compare-table td:first-child { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.08em; width: 24%; }
  .compare-table td.us { background: var(--accent-soft); color: var(--ink); font-weight: 500; }

  /* -------- PRICING -------- */
  .pricing-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 40px; flex-wrap: wrap; }
  .pricing-head h2 { font-family: var(--serif); font-size: clamp(40px, 6vw, 88px); font-weight: 400; line-height: 0.9; letter-spacing: -0.02em; max-width: 700px; }
  .pricing-head h2 em { font-style: italic; color: var(--accent); }
  .region-picker { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; }
  .region-picker .label-row { display: block; color: var(--ink-dim); margin-bottom: 10px; }
  .cur-badge { display: inline-block; background: var(--bg-2); border: 1px solid var(--rule); border-radius: 999px; padding: 11px 18px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--ink); }
  .region-select-wrap { position: relative; display: inline-block; }
  .region-select-wrap::after { content: '▾'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--accent); font-size: 11px; }
  .region-picker select { appearance: none; -webkit-appearance: none; background: var(--bg-2); border: 1px solid var(--rule); border-radius: 999px; color: var(--ink); font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; padding: 11px 40px 11px 18px; cursor: pointer; transition: border-color 0.2s; }
  .region-picker select:hover { border-color: var(--ink-dim); }
  .region-picker select:focus { outline: none; border-color: var(--accent); }
  .region-picker select option { background: var(--bg-2); color: var(--ink); text-transform: none; letter-spacing: 0; }
  .region-line { font-family: var(--sans); font-size: 15px; line-height: 1.6; color: var(--ink); max-width: 760px; margin: 0 0 38px; padding-left: 16px; border-left: 2px solid var(--accent); }
  .region-line strong { font-weight: 500; }
  .tier-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; border: 1px solid var(--rule); }
  .tier { padding: 36px 32px; border-right: 1px solid var(--rule); display: flex; flex-direction: column; gap: 18px; min-height: 460px; }
  .tier:last-child { border-right: none; }
  .tier.feature { background: var(--bg-2); }
  .tier .name { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); }
  .tier .ideal { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--ink-dim); }
  .tier .price { font-family: var(--serif); font-size: 56px; line-height: 1; letter-spacing: -0.02em; }
  .tier .price small { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); display: block; margin-top: 6px; letter-spacing: 0.08em; }
  .tier ul { list-style: none; font-size: 14px; }
  .tier li { padding: 9px 0; border-top: 1px solid var(--rule); }
  .tier li:first-child { border-top: none; padding-top: 0; }
  .tier .cta { margin-top: auto; padding-top: 18px; }
  .button { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border: 1px solid var(--ink); border-radius: 999px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; cursor: pointer; background: none; color: var(--ink); transition: 0.2s; }
  .button:hover { background: var(--ink); color: var(--bg); }
  .button.primary { background: var(--accent); border-color: var(--accent); color: var(--bg); }
  .button.primary:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
  .ppp-note { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); margin-top: 14px; letter-spacing: 0.08em; text-transform: uppercase; }

  /* -------- TEMPLATES -------- */
  .templates-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 32px; flex-wrap: wrap; }
  .templates-head h2 { font-family: var(--serif); font-size: clamp(36px, 5vw, 72px); font-weight: 400; line-height: 0.95; letter-spacing: -0.02em; max-width: 700px; }
  .templates-head h2 em { font-style: italic; color: var(--accent); }
  .templates-head p { font-size: 14px; color: var(--ink-dim); max-width: 380px; }
  .template-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
  .tpl { background: var(--bg); padding: 24px; aspect-ratio: 4/5; display: flex; flex-direction: column; justify-content: space-between; transition: background 0.2s; cursor: pointer; }
  .tpl:hover { background: var(--bg-2); }
  .tpl .vertical { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-dim); }
  .tpl .title { font-family: var(--serif); font-size: 26px; line-height: 1.05; }
  .tpl .meta { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); display: flex; justify-content: space-between; }
  .tpl .meta .price { color: var(--accent); }

  /* -------- CARE PLAN -------- */
  .care-wrap { display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: start; }
  .care-wrap h2 { font-family: var(--serif); font-size: clamp(40px, 5.5vw, 88px); font-weight: 400; line-height: 0.92; letter-spacing: -0.02em; }
  .care-wrap h2 em { font-style: italic; color: var(--accent); }
  .care-list { list-style: none; }
  .care-list li { padding: 18px 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 30px 1fr; gap: 14px; font-size: 15px; }
  .care-list li:last-child { border-bottom: 1px solid var(--rule); }
  .care-list .num { font-family: var(--mono); font-size: 11px; color: var(--accent); padding-top: 5px; }

  /* -------- DON'T HIRE US IF -------- */
  .dont-hero { font-family: var(--serif); font-size: clamp(40px, 7vw, 120px); font-weight: 400; line-height: 0.9; letter-spacing: -0.03em; max-width: 1100px; margin-bottom: 28px; }
  .dont-hero em { font-style: italic; color: var(--accent); }
  .dont-intro { font-size: 16px; line-height: 1.6; color: var(--ink-dim); max-width: 680px; margin-bottom: 52px; }
  .dont-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; border-top: 1px solid var(--rule); }
  .dont { padding: 28px 24px 28px 0; border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); display: flex; gap: 16px; padding-left: 24px; }
  .dont:nth-child(3n) { border-right: none; }
  .dont .x { font-family: var(--mono); font-size: 18px; color: var(--accent); line-height: 1.2; flex-shrink: 0; }
  .dont .body strong { display: block; font-weight: 500; font-size: 15px; margin-bottom: 6px; }
  .dont .body p { font-size: 13.5px; color: var(--ink-dim); line-height: 1.55; }

  /* -------- LIFTOFF / CTA -------- */
  .liftoff { min-height: 90vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 40px; }
  .liftoff h2 { font-family: var(--serif); font-size: clamp(60px, 12vw, 220px); font-weight: 400; line-height: 0.85; letter-spacing: -0.04em; }
  .liftoff h2 em { font-style: italic; color: var(--accent); }
  .liftoff p { font-size: 18px; max-width: 600px; color: var(--ink-dim); }
  .liftoff-actions { display: flex; gap: 14px; flex-wrap: wrap; }

  /* -------- FOOTER -------- */
  footer { padding: 60px var(--gutter) 40px; font-family: var(--mono); font-size: 11px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.1em; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
  footer h4 { color: var(--ink); font-weight: 400; margin-bottom: 14px; font-size: 11px; }
  footer ul { list-style: none; }
  footer li { padding: 6px 0; }
  .foot-logo { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--ink); text-transform: none; letter-spacing: 0; }
  .foot-bottom { grid-column: 1 / -1; border-top: 1px solid var(--rule); padding-top: 24px; display: flex; justify-content: space-between; margin-top: 20px; }

  /* -------- Responsive -------- */
  @media (max-width: 900px) {
    .twocol, .sec-wrap, .care-wrap, .pricing-head, .templates-head, .tco-head, .hero-main { grid-template-columns: 1fr; gap: 40px; }
    .perf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .perf-cell { border-bottom: 1px solid var(--rule); }
    .perf-cell.feature { grid-column: 1 / -1; }
    .tier-grid { grid-template-columns: 1fr; }
    .tier { border-right: none; border-bottom: 1px solid var(--rule); }
    .template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dont-grid { grid-template-columns: 1fr; }
    .dont { border-right: none; padding-left: 0; }
    footer { grid-template-columns: 1fr 1fr; }
    .hero-meta { grid-template-columns: 1fr; }
    .hero-lower { grid-template-columns: 1fr; }
    .badge-row { justify-content: flex-start; }
    .test-results { grid-template-columns: 1fr; }
    .map-stats, .tco-stats { grid-template-columns: 1fr 1fr; }
    .tco-toggles label { min-width: 100%; border-right: none; border-bottom: 1px solid var(--rule); }
    .tco-toggles label:last-child { border-bottom: none; }
    .addons-grid { grid-template-columns: 1fr; }
    .addon { border-right: none; border-bottom: 1px solid var(--rule); }
    .rocket-wrap { min-height: 480px; }
  }