/* ====================================================
       SKILLPILL — LANDING v3 (landing-only additions)
       Follows the Swiss B&W system locked in design/v2/styles.css
       No new colors. Hairline borders. Sharp corners. Flat.
       ==================================================== */

    /* page baseline ------------------------------------- */
    body { font-size: 15px; }

    /* Mobile-only compare accordion: hidden on desktop */
    .lp-compare-mobile { display: none; }

    /* Mobile-only anatomy explainer: hidden on desktop */
    .lp-skill-mobile { display: none; }

    /* Social-proof stat bar (above testimonials) */
    .lp-proof-bar {
      display: flex;
      justify-content: center;
      align-items: stretch;
      gap: 0;
      margin: -16px auto 48px;
      border: 1px solid var(--border);
      max-width: 720px;
    }
    .lp-proof-stat {
      flex: 1;
      text-align: center;
      padding: 20px 16px;
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .lp-proof-stat:last-child { border-right: none; }
    .lp-proof-stat .num {
      font-size: 30px;
      font-weight: 800;
      letter-spacing: -0.02em;
      line-height: 1;
      color: var(--text);
    }
    .lp-proof-stat .num .star { color: var(--accent); -webkit-text-stroke: 0.5px var(--text); }
    .lp-proof-stat .label {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted);
    }

    /* Hero inline proof line */
    .hero-proof {
      display: block;
      margin-top: 10px;
      font-size: 13px;
      color: var(--muted);
      letter-spacing: 0.01em;
    }
    .hero-proof strong { color: var(--text); font-weight: 700; }

    /* sticky marketing header --------------------------- */
    .mkt-header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(250, 250, 250, 0.92);
      padding: 18px 0;
      /* base.css makes .mkt-header a flex container; reset to block so the
         inner .wrap can stretch to its max-width and properly space-between */
      display: block;
      border-bottom: 1px solid var(--border);
    }
    .mkt-header .mkt-nav a { color: #595959; } /* F-28: bumped from --muted #737373 for WCAG contrast */
    .mkt-header .mkt-nav a:hover { color: var(--text); }
    .mkt-mobile-cta { display: none; }
    @media (max-width: 768px) {
      .mkt-nav { display: none; }
      .mkt-actions .btn-secondary { display: none; }
    }

    /* Logo lockup -------------------------------------- */
    .mkt-logo {
      display: inline-flex;
      align-items: center;
      line-height: 1;
    }
    .mkt-logo img {
      display: block;
      height: 34px;
      width: auto;
    }
    .lp-footer-brand .lockup img {
      display: block;
      height: 44px;
      width: auto;
    }
    @media (max-width: 768px) {
      .mkt-logo img { height: 28px; }
      .lp-footer-brand .lockup img { height: 36px; }
    }

    /* HERO tweaks — exactly one viewport tall on desktop -- */
    .lp-hero {
      min-height: calc(100vh - 72px);
      padding: 24px 0 32px;
      align-content: center;
    }
    /* Tighter type + spacing so everything fits above the fold */
    .lp-hero h1 {
      font-size: clamp(2rem, 5vw, 4rem) !important;
      line-height: 1.02;
    }
    .lp-hero h1 .u-accent {
      background: var(--accent);
      padding: 0 10px;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
      font-size: 1.35em;
      line-height: 1.05;
      display: inline-block;
      margin-top: 6px;
      /* pull left by the padding so the text glyphs align with the
         lines above; yellow bg bleeds into the section gutter */
      margin-left: -10px;
    }
    .lp-hero .sub { margin-top: 20px; font-size: 17px; }
    .lp-hero .actions { margin-top: 24px; }
    /* Lock to exactly one viewport on desktop+ */
    @media (min-width: 1024px) {
      .lp-hero {
        max-height: calc(100vh - 72px);
        overflow: hidden;
      }
    }
    @media (max-height: 760px) and (min-width: 1024px) {
      .lp-hero h1 { font-size: clamp(1.875rem, 4.2vw, 3rem) !important; }
      .lp-hero .sub { margin-top: 14px; font-size: 16px; }
      .lp-hero .actions { margin-top: 18px; }
    }
    /* Mobile: don't clip — content can be slightly taller than viewport */
    @media (max-width: 1023px) {
      .lp-hero { align-content: start; padding: 20px 0 40px; }
    }

    /* Hero side wrapper — stacks SKILL.md + Works-in vertically on the right ----- */
    .lp-hero-side {
      grid-column: 1 / 13;
      margin-top: 24px;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    /* SKILL.md preview card in hero — ride alongside h1 on ≥1024 */
    .lp-hero-skill {
      border: 1px solid var(--text);
      background: var(--surface);
      padding: 0;
      font-family: 'JetBrains Mono', monospace;
      font-size: 13.5px;
      line-height: 1.65;
      color: var(--text);
    }
    .lp-hero-skill .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 14px;
      border-bottom: 1px solid var(--text);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted);
      background: var(--bg);
    }
    .lp-hero-skill .top .file {
      color: var(--text);
      font-weight: 500;
    }
    .lp-hero-skill pre {
      margin: 0;
      padding: 18px 20px 20px;
      white-space: pre-wrap;
      overflow-wrap: break-word;
      word-break: break-word;
      overflow-x: hidden;
      font-family: inherit;
      font-size: 13.5px;
      line-height: 1.7;
    }
    .lp-hero-skill .fm { color: var(--muted); }
    .lp-hero-skill .key { color: var(--muted); }
    .lp-hero-skill .val { color: var(--text); }
    .lp-hero-skill .h { color: var(--text); font-weight: 700; }
    .lp-hero-skill .quote { color: var(--text); }
    .lp-hero-skill .c { color: var(--muted-2); font-style: italic; }
    .lp-hero-skill .u-accent {
      background: transparent;
      color: var(--text);
      padding: 0;
      font-style: normal;
      font-weight: 700;
      display: inline;
    }
    /* Hero-main wrapper holds left-column content vertically centered */
    .lp-hero-main {
      grid-column: 1 / 13;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    /* H1 line-2 — inherits everything from h1 (same as line 1) */
    .lp-hero h1 .h1-line-2 {
      color: inherit;
      font-weight: inherit;
    }

    /* Result-led promise — short arrow flow, one line */
    .hero-promise {
      font-size: 16px;
      line-height: 1.4;
      font-weight: 500;
      color: var(--text);
      padding: 4px 0 4px 16px;
      border-left: 3px solid var(--accent);
      white-space: nowrap; /* overridden at 1024–1280px below (F-17) */
    }
    .hero-promise .arrow {
      color: var(--accent);
      font-weight: 900;
      font-size: 1.5em;
      line-height: 1;
      margin: 0 6px;
      vertical-align: -2px;
      -webkit-text-stroke: 1.5px var(--accent);
    }
    .hero-promise strong {
      font-weight: 700;
      border-bottom: 2px solid var(--accent);
      padding-bottom: 1px;
    }

    @media (min-width: 1024px) {
      .lp-hero {
        grid-template-columns: 2.05fr 1fr;
        column-gap: 48px;
      }
      .lp-hero-main {
        grid-column: 1 / 2;
        grid-row: 1;
        align-self: center;
        gap: 24px;
      }
      .lp-hero-side {
        grid-column: 2 / 3;
        grid-row: 1;
        align-self: start;
        margin-top: 0;
      }
      .lp-hero h1 {
        grid-column: auto !important;
        font-size: clamp(1.875rem, 3.5vw, 2.875rem) !important;
        text-wrap: nowrap;
        white-space: nowrap;
      }
      .lp-hero .sub     { grid-column: auto; margin-top: 0; font-size: 20px; line-height: 1.5; }
      .lp-hero .actions { grid-column: auto; margin-top: 0; }
    }

    /* F-17: allow .hero-promise to wrap at the 1024-1280 range so it
       does not overflow the left column when the text is long */
    @media (min-width: 1024px) and (max-width: 1280px) {
      .hero-promise {
        white-space: normal;
        overflow-wrap: break-word;
      }
    }

    /* Works-in card under the SKILL.md preview ------------------------- */
    .lp-hero-side .platforms {
      grid-column: auto;
      margin-top: 0;
      align-self: auto;
      border: 1px solid var(--border);
      border-left: 1px solid var(--border);
      padding: 18px 20px;
      background: var(--surface);
    }
    .lp-hero-side .platforms ul { list-style: none; margin: 0; padding: 0; }
    .lp-hero-side .platforms-label {
      font-size: 11px;
      letter-spacing: 0.1em;
      margin-bottom: 12px;
    }
    .lp-hero-side .platforms li {
      font-size: 14.5px;
      padding: 9px 0;
    }
    .lp-hero-side .platforms .open-standard {
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px solid var(--border);
      font-size: 11px;
      line-height: 1.6;
    }

    .lp-hero .eyebrow-line {
      grid-column: 1 / 13;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 14px;
    }
    .lp-hero h1 .accent-mark.dash {
      background: transparent;
      padding: 0;
      color: var(--accent);
      -webkit-text-stroke: 0;
    }
    .lp-hero .actions .sub-note {
      flex-basis: 100%;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-top: 8px;
    }
    .lp-hero .platforms li .ok {
      color: var(--text);
      font-weight: 500;
    }
    .lp-hero .platforms .open-standard {
      margin-top: 16px;
      padding-top: 14px;
      border-top: 1px solid var(--border);
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: var(--muted);
      line-height: 1.6;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    /* PROBLEM bullets ----------------------------------- */
    /* Strong section rule — reserved for major content shifts only */
    .lp-section.has-strong-rule { border-top: 1px solid var(--text); }

    /* Anatomy-inside-problem: divider between bullets and the skill block */
    .lp-anatomy-inline {
      margin-top: 72px;
      padding-top: 56px;
      border-top: 1px solid var(--border);
    }
    .lp-anatomy-inline .lp-anatomy-eyebrow {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 12px;
    }
    .lp-anatomy-inline .lp-anatomy-title {
      font-size: clamp(1.5rem, 3vw, 2.25rem);
      font-weight: 600;
      letter-spacing: -0.02em;
      line-height: 1.1;
      margin-bottom: 40px;
      max-width: 24ch;
    }

    /* Combined ‘Is this for you?’ — personas + objections */
    .lp-isthis {
      display: grid;
      grid-template-columns: 1fr 1fr;
      border-top: 1px solid var(--text);
      border-bottom: 1px solid var(--border);
    }
    .lp-isthis-col { padding: 40px 0; }
    .lp-isthis-col + .lp-isthis-col { border-left: 1px solid var(--border); }
    .lp-isthis-col .col-head {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      padding: 0 32px;
      margin-bottom: 32px;
    }
    .lp-isthis-row {
      padding: 24px 32px;
      border-top: 1px solid var(--border);
    }
    .lp-isthis-row .ix {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: var(--muted);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: 10px;
    }
    .lp-isthis-row h3 {
      font-size: 17px;
      font-weight: 600;
      letter-spacing: -0.005em;
      margin-bottom: 6px;
      line-height: 1.25;
    }
    .lp-isthis-row p {
      font-size: 14px;
      color: var(--muted);
      line-height: 1.55;
    }
    .lp-isthis-row p strong { color: var(--text); font-weight: 500; }
    .lp-isthis-row .q-spoken {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin: 8px 0 10px;
    }

    /* Pricing comparison — toggle reveal, prominent header */
    .lp-compare-toggle {
      margin-top: 48px;
      border-top: 2px solid var(--text);
      border-bottom: 2px solid var(--text);
    }
    .lp-compare-toggle summary {
      list-style: none;
      cursor: pointer;
      padding: 22px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      font-size: 18px;
      font-weight: 700;
      letter-spacing: -0.005em;
      color: var(--text);
      user-select: none;
    }
    .lp-compare-toggle summary::-webkit-details-marker { display: none; }
    .lp-compare-toggle summary .caret {
      font-family: 'JetBrains Mono', monospace;
      font-size: 22px;
      color: var(--accent);
      transition: transform 0.18s ease;
      line-height: 1;
    }
    .lp-compare-toggle[open] summary .caret { transform: rotate(180deg); }
    .lp-compare-toggle summary:hover { background: var(--surface); }
    .lp-compare-toggle .lp-compare-table {
      margin-top: 0;
      border-top: 1px solid var(--border);
    }
    .lp-compare-toggle .lp-compare-table th,
    .lp-compare-toggle .lp-compare-table td { text-align: center; }
    .lp-compare-toggle .lp-compare-table td.row-label,
    .lp-compare-toggle .lp-compare-table th.row-label { text-align: left; }
    .lp-compare-toggle .lp-compare-table td em,
    .lp-compare-toggle .lp-compare-table td.row-label em {
      font-style: normal;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: var(--muted);
      letter-spacing: 0.04em;
    }

    /* Plan card — bigger text + better-looking price */
    .lp-plan .name { font-size: 22px; font-weight: 700; margin-bottom: 12px; }
    .lp-plan .price {
      font-size: 56px;
      line-height: 1;
      margin-bottom: 14px;
      display: flex;
      align-items: baseline;
      gap: 4px;
    }
    .lp-plan .price small {
      font-size: 22px;
      font-weight: 500;
      color: var(--text);
      opacity: 0.85;
    }
    .lp-plan .price small:first-child { margin-right: 0; opacity: 0.7; }
    .lp-plan.featured .price small { color: #fff; opacity: 0.9; }
    .lp-plan .price .num { font-weight: 700; letter-spacing: -0.03em; }
    .lp-plan .summary-line { font-size: 15px; line-height: 1.5; }
    .lp-plan .ix { font-size: 11px; letter-spacing: 0.1em; }

    /* Per-skill anchor — clean text, no yellow chip */
    .lp-plan .per-skill {
      display: flex;
      align-items: baseline;
      flex-wrap: wrap;
      gap: 4px 8px;
      color: var(--text);
      margin-bottom: 24px;
      padding-bottom: 18px;
      border-bottom: 1px solid var(--border);
    }
    .lp-plan .per-skill-label {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted);
    }
    .lp-plan .per-skill-num {
      font-size: 18px;
      font-weight: 800;
      font-family: 'JetBrains Mono', monospace;
      letter-spacing: -0.01em;
      line-height: 1.1;
      color: var(--text);
    }
    .lp-plan .per-skill-note {
      font-size: 11px;
      letter-spacing: 0.02em;
      color: var(--muted);
      flex-basis: 100%;
    }

    /* Featured Plus tier on dark bg */
    .lp-plan.featured .per-skill { border-bottom-color: rgba(255,255,255,0.18); }
    .lp-plan.featured .per-skill-num { color: #fff; }
    .lp-plan.featured .per-skill-label,
    .lp-plan.featured .per-skill-note { color: rgba(255,255,255,0.65); }

    /* Pricing comparison — hidden behind details */
    .lp-compare {
      margin-top: 32px;
      border-top: 1px solid var(--border);
    }
    .lp-compare summary {
      list-style: none;
      cursor: pointer;
      padding: 18px 0;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .lp-compare summary::-webkit-details-marker { display: none; }
    .lp-compare summary::after { content: '+'; font-size: 18px; }
    .lp-compare[open] summary::after { content: '–'; }
    .lp-compare-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 8px;
      font-size: 13px;
      border-top: 1px solid var(--border);
    }
    .lp-compare-table th,
    .lp-compare-table td {
      padding: 14px 16px;
      border-bottom: 1px solid var(--border);
      text-align: left;
      vertical-align: top;
    }
    .lp-compare-table th {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted);
      font-weight: 500;
      background: var(--surface);
      border-bottom: 1px solid var(--text);
    }
    .lp-compare-table th.row-label { background: var(--surface); }
    .lp-compare-table td.row-label {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--muted);
      background: var(--surface);
      white-space: nowrap;
    }
    .lp-compare-table tr:hover td:not(.row-label) { background: var(--surface); }

    /* Simplified tier card: drop bulky feature list, keep name/price/skills/CTA */
    .lp-plan .summary-line {
      font-size: 14px;
      color: var(--muted);
      line-height: 1.5;
      margin-bottom: 24px;
      flex: 1 0 auto;
    }
    .lp-plan.featured .summary-line { color: rgba(255,255,255,0.7); }

    /* Pin the CTA to the bottom for equal-height visual alignment */
    .lp-plan > .btn { margin-top: auto; }

    /* Featured Plus tier: default = white CTA, hover = yellow accent */
    .lp-plan.featured .btn-accent {
      background: #fff;
      color: var(--text);
      border-color: #fff;
    }
    .lp-plan.featured .btn-accent:hover {
      background: var(--accent);
      color: var(--text);
      border-color: var(--accent);
    }

    .lp-problem-list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border-top: 1px solid var(--text);
      border-bottom: 1px solid var(--border);
    }
    .lp-problem-item {
      padding: 40px 32px 48px;
      border-right: 1px solid var(--border);
    }
    .lp-problem-item:last-child { border-right: none; }
    .lp-problem-item .ix {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: var(--muted);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: 32px;
    }
    .lp-problem-item h3 {
      font-size: 22px;
      font-weight: 600;
      letter-spacing: -0.015em;
      margin-bottom: 12px;
      line-height: 1.15;
    }
    .lp-problem-item p {
      color: var(--muted);
      font-size: 15px;
      line-height: 1.55;
      max-width: 32ch;
    }
    .lp-problem-close {
      margin-top: 72px;
      font-size: clamp(1.5rem, 3vw, 2.25rem);
      font-weight: 600;
      letter-spacing: -0.02em;
      line-height: 1.1;
      max-width: 24ch;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
    }
    .lp-problem-close .u-accent {
      background: var(--accent);
      padding: 0 4px;
    }

    /* DEMO ---------------------------------------------- */
    .lp-demo-wrap { position: relative; }
    .lp-demo-frame {
      border-top: 1px solid var(--text);
      border-bottom: 1px solid var(--border);
      position: relative;
    }
    .lp-demo-side.left {
      background: var(--bg);
      color: var(--muted);
    }
    .lp-demo-side.left h4,
    .lp-demo-side.left .label { color: var(--muted); }
    .lp-demo-side.left .lp-demo-q { border-left-color: var(--border); }
    .lp-demo-side.left .lp-demo-q strong { color: var(--muted); }
    .lp-demo-side.left .lp-demo-a { color: var(--muted); }
    .lp-demo-side.left .lp-demo-a .strike { text-decoration: line-through; color: var(--muted-2); }
    .lp-demo-side.right { background: var(--surface); border-right: none; }
    .lp-demo-side.right .lp-demo-a strong { color: var(--text); }
    .lp-demo-side.right .lp-demo-a .hl {
      background: var(--accent);
      color: var(--text);
      padding: 1px 3px;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
    }
    .lp-vs-badge {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: var(--text);
      color: white;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.12em;
      padding: 6px 10px;
      z-index: 2;
    }
    .lp-demo-cap {
      padding: 24px 0 0;
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      text-align: center;
    }
    .lp-demo-tagline {
      margin-top: 56px;
      font-size: clamp(1.25rem, 2.4vw, 1.875rem);
      font-weight: 500;
      letter-spacing: -0.015em;
      line-height: 1.2;
      max-width: 38ch;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
    }
    .lp-demo-tagline .u-accent {
      background: var(--accent);
      padding: 0 6px;
    }
    .lp-demo-vs-line {
      grid-column: 3 / 11;
      font-size: clamp(1.5rem, 2.4vw, 2rem);
      font-weight: 500;
      letter-spacing: -0.015em;
      line-height: 1.2;
      color: var(--text);
      max-width: 24ch;
    }
    .lp-demo-vs-line .vs {
      background: var(--text);
      color: white;
      padding: 0 6px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.7em;
      font-weight: 600;
      letter-spacing: 0.08em;
      vertical-align: middle;
      margin: 0 6px;
    }

    /* YouTube embed slot -------------------------------- */
    .lp-video {
      margin-top: 56px;
    }
    .lp-video-embed {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      background: var(--text);
      border: 1px solid var(--text);
      display: grid;
      place-items: center;
      overflow: hidden;
      cursor: pointer;
    }
    .lp-video-embed .play {
      width: 88px;
      height: 88px;
      border: 1px solid var(--accent);
      display: grid;
      place-items: center;
      transition: background 0.12s ease;
    }
    .lp-video-embed:hover .play { background: var(--accent); }
    .lp-video-embed .play svg { display: block; }
    .lp-video-embed .corner {
      position: absolute;
      bottom: 18px; left: 22px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: rgba(255,255,255,0.55);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }
    .lp-video-embed .runtime {
      position: absolute;
      bottom: 18px; right: 22px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: rgba(255,255,255,0.55);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }
    .lp-video-cap {
      margin-top: 22px;
      font-size: 18px;
      line-height: 1.5;
      color: var(--text);
      text-align: center;
    }
    .lp-video-cap strong {
      font-weight: 700;
      background: var(--accent);
      padding: 0 6px;
    }

    /* below-demo CTA strip ------------------------------ */
    .lp-cta-strip {
      margin-top: 56px;
      padding: 36px 24px;
      border-top: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      gap: 22px;
      align-items: center;
      text-align: center;
    }
    .lp-cta-strip p {
      font-size: 19px;
      font-weight: 500;
      letter-spacing: -0.005em;
      max-width: 56ch;
      margin: 0;
      line-height: 1.45;
      color: var(--text);
    }
    .lp-cta-strip p strong { font-weight: 700; }
    .lp-cta-strip .btn { flex-shrink: 0; }

    /* SOCIAL PROOF -------------------------------------- */
    .lp-trust {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border-top: 1px solid var(--text);
      border-bottom: 1px solid var(--border);
      margin-bottom: 64px;
    }
    @media (max-width: 1024px) {
      .lp-trust { grid-template-columns: 1fr; }
    }
    .lp-trust-row {
      padding: 28px 28px;
      border-right: 1px solid var(--border);
    }
    .lp-trust-row:last-child { border-right: none; }
    .lp-trust-row .label {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 12px;
    }
    .lp-trust-row .body {
      font-size: 15px;
      line-height: 1.5;
    }
    .lp-trust-row .body strong { font-weight: 600; }
    .lp-trust-row .logos {
      display: flex;
      gap: 16px;
      margin-top: 10px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 13px;
      font-weight: 500;
      flex-wrap: wrap;
    }
    .lp-trust-row .logos span {
      padding: 4px 10px;
      border: 1px solid var(--border);
    }
    .lp-trust-row .gh {
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px;
      padding: 4px 8px;
      border: 1px solid var(--text);
      display: inline-flex;
      gap: 6px;
      align-items: center;
      margin-top: 8px;
    }

    /* 18-card testimonial wall (masonry via columns) ---- */
    .lp-wall-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 32px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--border);
      flex-wrap: wrap;
      gap: 16px;
    }
    .lp-wall-head h3 {
      font-size: 22px;
      font-weight: 600;
      letter-spacing: -0.01em;
    }
    .lp-wall-head .meta {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }
    .lp-wall {
      column-count: 3;
      column-gap: 20px;
      column-fill: balance;
    }
    @media (max-width: 1024px) {
      .lp-wall { column-count: 2; }
    }
    .lp-tcard {
      break-inside: avoid;
      page-break-inside: avoid;
      border: 1px solid var(--border);
      background: var(--surface);
      padding: 18px 18px 16px;
      margin: 0 0 20px;
      display: inline-block;
      width: 100%;
      transition: border-color 0.12s ease;
    }
    .lp-tcard:hover { border-color: var(--text); }
    .lp-tcard__head {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--border);
    }
    .lp-tcard__glyph {
      width: 22px;
      height: 22px;
      flex-shrink: 0;
      display: grid;
      place-items: center;
    }
    .lp-tcard__glyph svg { display: block; }
    .lp-tcard__who {
      display: flex;
      flex-direction: column;
      min-width: 0;
      flex: 1;
    }
    .lp-tcard__who .name {
      font-size: 13px;
      font-weight: 600;
      letter-spacing: -0.005em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .lp-tcard__who .handle {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-top: 2px;
    }
    .lp-tcard__time {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }
    .lp-tcard__body {
      font-size: 14px;
      line-height: 1.5;
      color: var(--text);
      margin-bottom: 14px;
      font-weight: 400;
    }
    .lp-tcard__foot {
      display: flex;
      gap: 14px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      padding-top: 10px;
      border-top: 1px solid var(--border);
    }
    .lp-tcard__foot span {
      display: inline-flex;
      gap: 5px;
      align-items: center;
    }
    .lp-tcard__foot svg { display: block; }

    /* iMessage variant: right-aligned bubble */
    .lp-tcard--im .lp-tcard__head {
      justify-content: flex-end;
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 8px;
    }
    .lp-tcard--im .lp-tcard__body {
      border: 1px solid var(--border);
      padding: 12px 14px;
      max-width: 90%;
      margin-left: auto;
      font-size: 13px;
      line-height: 1.45;
      position: relative;
    }
    .lp-tcard--im .lp-tcard__body::after {
      content: '';
      position: absolute;
      bottom: -1px;
      right: -1px;
      width: 10px;
      height: 10px;
      border-right: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      background: var(--surface);
      transform: rotate(-45deg) translate(2px, -4px);
      transform-origin: 100% 100%;
    }
    .lp-tcard--im .lp-tcard__foot {
      justify-content: flex-end;
      border-top: none;
      padding-top: 8px;
    }

    /* TikTok variant: tighter, more vertical */
    .lp-tcard--tt .lp-tcard__body {
      font-weight: 400;
      letter-spacing: -0.005em;
    }

    /* Reddit variant: prefix subreddit */
    .lp-tcard--rd .lp-tcard__head .handle::before {
      content: '';
    }

    /* WHAT YOU GET / WHO IT'S FOR -------------------------- */
    .lp-who-intro {
      grid-column: 3 / 11;
      font-size: 17px;
      color: var(--muted);
      max-width: 56ch;
      margin-top: 8px;
    }

    /* HOW IT WORKS --------------------------------------- */
    /* §09 Objections — editorial Q&A rows */
    .lp-qa {
      border-top: 2px solid var(--text);
      border-bottom: 2px solid var(--text);
      margin-top: 24px;
    }
    .lp-qa-row {
      display: grid;
      grid-template-columns: 5fr 7fr;
      gap: 48px;
      padding: 40px 32px;
      border-bottom: 1px solid var(--border);
      align-items: start;
    }
    .lp-qa-row:last-child { border-bottom: none; }
    .lp-qa-q {
      display: flex;
      align-items: flex-start;
      gap: 18px;
    }
    .lp-qa-q .ix {
      font-family: 'JetBrains Mono', monospace;
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
      background: var(--accent);
      padding: 4px 10px;
      letter-spacing: 0.04em;
      flex-shrink: 0;
      align-self: flex-start;
    }
    .lp-qa-q p {
      font-size: 20px;
      font-weight: 500;
      letter-spacing: -0.01em;
      line-height: 1.3;
      color: var(--text);
      margin: 0;
      font-style: italic;
      white-space: nowrap;
    }
    .lp-qa-q p em {
      font-style: italic;
      background: var(--accent);
      padding: 0 4px;
      font-weight: 500;
    }
    .lp-qa-a p {
      font-size: 16px;
      line-height: 1.6;
      color: var(--muted);
      margin: 0;
    }
    .lp-qa-a p strong { color: var(--text); font-weight: 600; }
    @media (max-width: 768px) {
      .lp-qa-row {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 28px 20px;
      }
      .lp-qa-q p { font-size: 20px; }
    }

    /* §07 Who it's for — transformation matrix */
    .lp-matrix {
      border-top: 2px solid var(--text);
      border-bottom: 2px solid var(--text);
      margin-top: 24px;
    }
    .lp-matrix-head {
      display: grid;
      grid-template-columns: 1fr 60px 1fr;
      padding: 16px 32px;
      border-bottom: 1px solid var(--border);
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      font-weight: 600;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      gap: 24px;
    }
    .lp-matrix-row {
      display: grid;
      grid-template-columns: 1fr 60px 1fr;
      padding: 36px 32px;
      border-bottom: 1px solid var(--border);
      align-items: center;
      gap: 24px;
    }
    .lp-matrix-row:last-child { border-bottom: none; }
    .lp-matrix-cell .ix {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 12px;
    }
    .lp-matrix-cell h3 {
      font-size: 22px;
      font-weight: 600;
      letter-spacing: -0.01em;
      line-height: 1.2;
      margin-bottom: 10px;
    }
    .lp-matrix-cell p {
      font-size: 14px;
      color: var(--muted);
      line-height: 1.55;
      margin: 0;
    }
    .lp-matrix-cell.right h3 span {
      background: var(--accent);
      padding: 2px 10px;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
    }
    .lp-matrix-arrow {
      font-size: 36px;
      font-weight: 700;
      color: var(--text);
      text-align: center;
      align-self: center;
      line-height: 1;
    }
    @media (max-width: 768px) {
      .lp-matrix-head { display: none; }
      .lp-matrix-row {
        grid-template-columns: 1fr;
        padding: 28px 24px;
        gap: 16px;
      }
      .lp-matrix-arrow {
        transform: rotate(90deg);
        align-self: start;
        font-size: 28px;
      }
    }

    /* How-it-works steps — big yellow number blocks for process feel */
    #how .lp-steps {
      display: flex !important;
      justify-content: center;
      gap: 80px;
      margin-top: 24px;
      position: relative;
    }
    #how .lp-step {
      grid-column: auto !important;
      flex: 0 0 300px;
      border-top: none;
      padding-top: 0;
      position: relative;
    }
    #how .lp-step h3 { white-space: nowrap; }
    #how .lp-step .ix {
      font-family: 'JetBrains Mono', monospace;
      font-size: 56px;
      font-weight: 700;
      color: var(--text);
      background: var(--accent);
      display: block;
      width: fit-content;
      margin: 0 auto 28px;
      padding: 2px 16px 4px;
      line-height: 1.05;
      letter-spacing: -0.02em;
    }
    #how .lp-step h3 { font-size: 24px; margin-bottom: 14px; text-align: center; }
    #how .lp-step p { font-size: 15px; max-width: 36ch; margin: 0 auto; text-align: center; }
    @media (min-width: 1024px) {
      #how .lp-step:not(:last-child)::after {
        content: '';
        position: absolute;
        /* centered ix is ~80px → right edge sits at step-center + 40px,
           next step's ix left edge sits at step-width + gap + (step-center - 40px). */
        left: calc(50% + 40px);
        top: 30px;
        width: 100%;                 /* spans from this ix right edge to next ix left edge */
        height: 0;
        border-top: 3px solid var(--text);
      }
    }

    .lp-risk {
      margin-top: 80px;
      border: 1px solid var(--text);
      display: grid;
      grid-template-columns: repeat(3, 1fr);
    }
    /* 6-item grid: kill right-border on every 3rd col, add bottom-border for top row */
    .lp-risk-item:nth-child(3n) { border-right: none !important; }
    .lp-risk-item:nth-child(-n+3) { border-bottom: 1px solid var(--border); }
    .lp-risk-item {
      padding: 24px 28px;
      border-right: 1px solid var(--border);
      display: grid;
      grid-template-columns: 28px 1fr;
      gap: 14px;
      align-items: start;
    }
    .lp-risk-item:last-child { border-right: none; }
    .lp-risk-item .tick {
      font-family: 'JetBrains Mono', monospace;
      font-size: 16px;
      font-weight: 700;
      line-height: 1;
      padding-top: 3px;
    }
    .lp-risk-item h4 {
      font-size: 15px;
      font-weight: 600;
      letter-spacing: -0.005em;
      margin-bottom: 6px;
    }
    .lp-risk-item p {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.5;
    }

    /* §08 Anatomy — compressed to one viewport */
    @media (min-width: 1024px) {
      #anatomy {
        padding: 56px 0;
        min-height: calc(100vh - 72px);
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      #anatomy .lp-section-head { margin-bottom: 32px; }
      #anatomy .lp-skill-copy ul { margin: 6px 0 16px; }
      #anatomy .lp-skill-copy ul li { padding: 8px 0 8px 28px; font-size: 14px; }
      #anatomy .lp-skill-copy .lede { font-size: 17px; margin-bottom: 6px; }
      #anatomy .lp-skill-copy .inside { margin: 12px 0 0; }
      #anatomy .lp-skill-copy .vs { margin-top: 6px; padding: 14px 18px; }
      #anatomy .lp-skill-copy .note { margin-top: 16px; padding-top: 12px; }
    }

    /* ANATOMY (reuses .lp-skill / .lp-skill-tree) -------- */
    .lp-skill-copy p { font-size: 16px; line-height: 1.6; }
    .lp-skill-copy p strong { font-weight: 600; }
    .lp-skill-copy .lede {
      font-size: 18px;
      line-height: 1.5;
      margin-bottom: 8px;
    }
    .lp-skill-copy .inside {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted);
      margin: 20px 0 0;
    }
    .lp-skill-copy ul {
      list-style: none;
      margin: 10px 0 24px;
      padding: 0;
      border-top: 1px solid var(--border);
    }
    .lp-skill-copy ul li {
      padding: 12px 0;
      border-bottom: 1px solid var(--border);
      font-size: 15px;
      line-height: 1.5;
      padding-left: 28px;
      position: relative;
    }
    .lp-skill-copy ul li::before {
      content: '—';
      color: var(--text);
      font-weight: 700;
      position: absolute;
      left: 0;
      top: 12px;
    }
    .lp-skill-copy ul li strong { font-weight: 600; }
    .lp-skill-copy .vs {
      margin-top: 8px;
      padding: 18px 20px;
      border-left: 2px solid var(--accent);
      background: var(--surface);
      border-top: 1px solid var(--border);
      border-right: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      font-size: 15px;
      line-height: 1.55;
    }
    .lp-skill-copy .vs strong { font-weight: 600; }
    .lp-skill-copy .note {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      line-height: 1.55;
      margin-top: 24px;
      padding-top: 16px;
      border-top: 1px solid var(--border);
    }

    /* OBJECTIONS ---------------------------------------- */
    .lp-obj {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border-top: 1px solid var(--text);
      border-bottom: 1px solid var(--border);
    }
    .lp-obj-item {
      padding: 40px 32px 48px;
      border-right: 1px solid var(--border);
    }
    .lp-obj-item:last-child { border-right: none; }
    .lp-obj-item .ix {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: var(--muted);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: 32px;
    }
    .lp-obj-item .q {
      font-size: 19px;
      font-weight: 600;
      letter-spacing: -0.01em;
      line-height: 1.25;
      margin-bottom: 14px;
    }
    .lp-obj-item .q-spoken {
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-bottom: 14px;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--border);
    }
    .lp-obj-item .a {
      font-size: 14px;
      line-height: 1.6;
      color: var(--muted);
    }
    .lp-obj-item .a strong { color: var(--text); font-weight: 500; }

    /* PRICING (extends .lp-plans / .lp-plan) ------------ */
    .lp-pricing-toggle {
      display: flex;
      align-items: center;
      gap: 18px;
      padding: 20px 0;
      margin-bottom: 48px;
      border-bottom: 1px solid var(--border);
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted);
      flex-wrap: wrap;
    }
    .lp-pricing-toggle-pill {
      display: inline-flex;
      border: 1px solid var(--text);
    }
    .lp-pricing-toggle-pill button {
      border: none;
      background: var(--surface);
      font: inherit;
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 9px 16px;
      cursor: pointer;
      color: var(--text);
      border-right: 1px solid var(--text);
    }
    .lp-pricing-toggle-pill button:last-child { border-right: none; }
    .lp-pricing-toggle-pill button.on {
      background: var(--text);
      color: white;
      font-weight: 500;
    }
    .lp-pricing-toggle .save {
      margin-left: auto;
      font-size: 13px;
      letter-spacing: 0.04em;
      color: var(--text);
      background: var(--accent);
      padding: 6px 12px;
      font-weight: 600;
      text-transform: none;
    }
    .lp-pricing-toggle .save strong { color: var(--text); font-weight: 700; }

    .lp-plan .price small.crossed {
      text-decoration: line-through;
      opacity: 0.35;
      margin-right: 6px;
    }
    .lp-plan ul li.head {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      padding: 14px 0 6px;
      border-bottom: none;
      justify-content: flex-start;
    }
    .lp-plan.featured ul li.head { color: rgba(255,255,255,0.5); }

    /* Centered section head variant (FAQ, etc.) */
    .lp-section-head-centered {
      display: block !important;
      text-align: center;
    }
    .lp-section-head-centered .lp-section-title {
      grid-column: unset;
      margin: 0 auto;
      max-width: 720px;
    }
    .lp-plan ul li .v { font-weight: 500; color: var(--text); }
    .lp-plan.featured ul li .v { color: white; }
    .lp-plan ul li .k { color: var(--muted); }
    .lp-plan.featured ul li .k { color: rgba(255,255,255,0.6); }
    .lp-plan ul li.tickline {
      display: grid;
      grid-template-columns: 16px 1fr;
      gap: 10px;
    }
    .lp-plan ul li.tickline::before {
      content: '✓';
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px;
      color: var(--text);
    }
    .lp-plan.featured ul li.tickline::before { color: var(--accent); }
    .lp-plan .btn { width: 100%; justify-content: center; }
    .lp-plan.featured .btn-secondary {
      background: transparent;
      color: white;
      border-color: white;
    }
    .lp-plan.featured .btn-secondary:hover {
      background: var(--accent);
      color: var(--text);
      border-color: var(--accent);
    }

    .lp-rt {
      margin-top: 32px;
      padding: 20px 28px;
      border: 1px solid var(--border);
      display: flex;
      gap: 20px;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      font-size: 14px;
    }
    .lp-rt .label {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 4px;
    }
    .lp-rt .mult {
      font-family: 'JetBrains Mono', monospace;
      font-weight: 700;
      font-size: 15px;
      padding: 4px 10px;
      background: var(--accent);
    }

    .lp-custom {
      margin-top: 16px;
      padding: 32px;
      border: 1px solid var(--text);
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 32px;
      align-items: center;
    }
    .lp-custom .ix {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: var(--muted);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: 14px;
    }
    .lp-custom h3 {
      font-size: 22px;
      font-weight: 600;
      letter-spacing: -0.01em;
      margin-bottom: 6px;
    }
    .lp-custom p {
      color: var(--muted);
      font-size: 14px;
      max-width: 56ch;
      line-height: 1.55;
    }

    /* FAQ (collapsible) --------------------------------- */
    .lp-faq-item { user-select: none; }
    .lp-faq-item .q-row {
      display: contents;
    }
    .lp-faq-item .a {
      display: none;
    }
    .lp-faq-item.is-open .a {
      display: block;
      grid-column: 2 / 13;
      padding-top: 12px;
      color: var(--text);
      font-size: 15px;
      line-height: 1.6;
      max-width: 70ch;
    }
    .lp-faq-item .toggle {
      grid-column: 12 / 13;
      align-self: start;
      padding-top: 4px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 16px;
      font-weight: 500;
      color: var(--muted);
      text-align: right;
      transition: color 0.1s ease;
    }
    .lp-faq-item.is-open .toggle { color: var(--text); }
    .lp-faq-item:hover .q { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 6px; }

    /* FINAL CTA ----------------------------------------- */
    .lp-finalcta {
      padding: 120px 0 200px;
      border-top: 1px solid var(--text);
      text-align: center;
    }
    .lp-finalcta h2 {
      font-size: clamp(2.5rem, 6vw, 5rem);
      font-weight: 700;
      letter-spacing: -0.035em;
      line-height: 0.98;
      max-width: 22ch;
      margin: 0 auto 28px;
      text-wrap: balance;
      position: relative;
      z-index: 0;
    }
    .lp-finalcta h2 .u-accent {
      position: relative;
      padding: 0 0.18em;
      background-image: linear-gradient(
        to bottom,
        transparent 0,
        transparent 18%,
        var(--accent) 18%,
        var(--accent) 92%,
        transparent 92%
      );
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
      z-index: -1;
    }
    .lp-finalcta .sub {
      font-size: 19px;
      color: var(--muted);
      margin-bottom: 40px;
      max-width: 40ch;
      margin-left: auto;
      margin-right: auto;
    }
    .lp-finalcta .reassure {
      margin-top: 18px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    /* FOOTER tweaks ------------------------------------- */
    .lp-footer { padding: 20px 0 12px; }
    .lp-footer-brand .tagline { max-width: 32ch; margin-bottom: 0; }
    .lp-footer-brand .lockup { margin-bottom: 6px; }
    .lp-footer-col h5 { margin-bottom: 10px; }
    .lp-footer-col li { padding: 2px 0; }
    .lp-footer-bottom {
      margin-top: 14px;
      padding-top: 0;
      border-top: none;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    /* ====================================================
       RESPONSIVE — non-negotiable breakpoints
       ==================================================== */
    @media (max-width: 1024px) {
      .wrap { padding: 0 32px; }
      .lp-section { padding: 72px 0; }
      .lp-hero { padding: 48px 0 64px; }
      .lp-section-num { grid-column: 1 / 13; }
      .lp-section-title { grid-column: 1 / 13; }
      .lp-hero h1 { grid-column: 1 / 13; }
      .lp-hero .sub { grid-column: 1 / 13; }
      .lp-hero .actions { grid-column: 1 / 13; }
      .lp-hero .platforms {
        grid-column: 1 / 13;
        border-left: none;
        border-top: 1px solid var(--border);
        padding-left: 0;
        padding-top: 24px;
        margin-top: 24px;
      }
      .lp-step { grid-column: span 6; }
      .lp-skill-copy { grid-column: 1 / 13; }
      .lp-skill-tree { grid-column: 1 / 13; margin-top: 32px; }
      .lp-plans { grid-template-columns: repeat(2, 1fr); }
      .lp-plan { border-bottom: 1px solid var(--border); }
      .lp-plan:nth-child(2n) { border-right: none; }
      .lp-plan:nth-child(n+3) { border-bottom: none; }
      .lp-demo-vs-line { grid-column: 1 / 13; }
      .lp-who-intro { grid-column: 1 / 13; }
    }

    @media (max-width: 768px) {
      body { font-size: 14px; }
      .wrap { padding: 0 20px; }
      .lp-section { padding: 56px 0; }
      .lp-hero { padding: 32px 0 56px; }
      .lp-hero-meta { font-size: 10px; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 32px; }
      .lp-hero h1 { font-size: clamp(2.25rem, 9vw, 3.25rem); }
      .lp-hero .sub { font-size: 17px; margin-top: 24px; }
      .lp-hero .actions { margin-top: 28px; }
      .lp-section-head { margin-bottom: 40px; }
      .lp-section-num { margin-bottom: 12px; padding-top: 0; }

      .lp-cards { grid-template-columns: 1fr; }
      .lp-card { border-right: none; border-bottom: 1px solid var(--border); }
      .lp-card:last-child { border-bottom: none; }

      .lp-problem-list { grid-template-columns: 1fr; }
      .lp-problem-item { border-right: none; border-bottom: 1px solid var(--border); }
      .lp-problem-item:last-child { border-bottom: none; }

      .lp-steps { grid-template-columns: 1fr; }
      .lp-step { grid-column: 1 / -1; }

      .lp-demo-frame { grid-template-columns: 1fr; }
      .lp-demo-side { border-right: none; border-bottom: 1px solid var(--border); }
      .lp-demo-side:last-child { border-bottom: none; }
      .lp-vs-badge {
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
      }

      .lp-trust { grid-template-columns: 1fr; }
      .lp-trust-row { border-right: none; border-bottom: 1px solid var(--border); }
      .lp-trust-row:last-child { border-bottom: none; }

      /* Testimonial wall → horizontal scroll-snap row */
      .lp-wall {
        column-count: unset;
        display: flex;
        gap: 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 16px;
        margin: 0 -20px;
        padding-left: 20px;
        padding-right: 20px;
        -webkit-overflow-scrolling: touch;
      }
      .lp-wall::-webkit-scrollbar { height: 4px; }
      .lp-wall::-webkit-scrollbar-thumb { background: var(--border); }
      .lp-tcard {
        flex: 0 0 68%;
        max-width: 280px;
        margin: 0;
        scroll-snap-align: start;
        padding: 14px 16px;
        font-size: 13px;
      }
      .lp-tcard p { font-size: 13px; line-height: 1.4; }
      .lp-tcard__head { margin-bottom: 8px; padding-bottom: 8px; }
      .lp-tcard__who strong { font-size: 13px; }
      .lp-tcard__who .handle { font-size: 10px; }

      .lp-risk { grid-template-columns: 1fr; }
      .lp-risk-item { border-right: none; border-bottom: 1px solid var(--border); }
      .lp-risk-item:last-child { border-bottom: none; }

      .lp-obj { grid-template-columns: 1fr; }
      .lp-obj-item { border-right: none; border-bottom: 1px solid var(--border); }
      .lp-obj-item:last-child { border-bottom: none; }

      .lp-plans { grid-template-columns: 1fr; }
      .lp-plan { border-right: none; border-bottom: 1px solid var(--border); }
      .lp-plan:last-child { border-bottom: none; }

      .lp-faq-item { grid-template-columns: 30px 1fr 30px; gap: 12px; padding: 22px 0; }
      .lp-faq-item .num { grid-column: 1 / 2; font-size: 10px; }
      .lp-faq-item .q { grid-column: 2 / 3; font-size: 17px; }
      .lp-faq-item .toggle { grid-column: 3 / 4; font-size: 18px; }
      .lp-faq-item.is-open .a { grid-column: 2 / 4; }

      .lp-footer-grid { grid-template-columns: 1fr 1fr; gap: 18px 16px; }
      .lp-footer-brand { grid-column: 1 / -1; margin-bottom: 4px; }
      .lp-footer-col { grid-column: span 1; }
      .lp-footer-bottom { flex-direction: column; gap: 6px; align-items: flex-start; }

      /* Bigger tap targets */
      .btn { min-height: 44px; padding: 12px 18px; }
      .btn-lg { min-height: 52px; padding: 16px 24px; font-size: 14px; }

      .lp-pricing-toggle { gap: 12px; }
      .lp-pricing-toggle .save { width: 100%; margin-left: 0; order: 3; }
      .lp-pricing-toggle-pill { flex-wrap: wrap; }
      .lp-pricing-toggle-pill button { flex: 1 1 50%; padding: 10px 12px; }
      .lp-pricing-toggle-pill button:nth-child(2) { border-right: none; }
      .lp-pricing-toggle-pill button:nth-child(1), .lp-pricing-toggle-pill button:nth-child(2) {
        border-bottom: 1px solid var(--text);
      }
      .lp-custom { grid-template-columns: 1fr; padding: 24px 20px; gap: 20px; }
      .lp-custom .btn { width: 100%; justify-content: center; }
      .lp-isthis { grid-template-columns: 1fr; }
      .lp-isthis-col + .lp-isthis-col { border-left: none; border-top: 1px solid var(--border); }
      .lp-anatomy-inline { margin-top: 48px; padding-top: 40px; }
      .lp-hero-skill { font-size: 11px; }
      .lp-hero-skill pre { padding: 14px; }
      .lp-finalcta { padding: 80px 0; }
    }

    @media (max-width: 480px) {
      .wrap { padding: 0 16px; }
      .lp-hero h1 { font-size: clamp(2rem, 10vw, 2.75rem); }
      .lp-hero .actions .btn { flex: 1 1 100%; }
      .lp-hero .actions .btn-ghost { flex: 1 1 100%; }
      .lp-demo-side { padding: 28px 20px 32px; }
      .lp-skill-tree { padding: 20px 18px; font-size: 11px; }
      .lp-card, .lp-problem-item, .lp-obj-item { padding: 28px 20px 32px; }
      .lp-plan { padding: 28px 22px 32px; }
      .lp-trust-row { padding: 22px 20px; }
      .lp-video-embed .play { width: 64px; height: 64px; }
      .lp-finalcta h2 { font-size: clamp(2rem, 11vw, 2.75rem); }
    }

    /* ====================================================
       MOBILE FIXES (phones up to 767px)
       — undo desktop-only nowrap, flex columns, fixed widths
       ==================================================== */
    @media (max-width: 767px) {
      /* HERO promise: allow wrapping on mobile */
      .hero-promise { white-space: normal !important; font-size: 15px; }
      .hero-promise .arrow { font-size: 1.3em; margin: 0 4px; }

      /* HERO H1: allow natural wrap on mobile (kill nowrap that desktop set) */
      .lp-hero h1 { text-wrap: balance !important; white-space: normal !important; }

      /* HERO right column: full width + reset to flex stack */
      .lp-hero-side { grid-column: 1 / -1; }
      .lp-hero-skill { font-size: 12px; line-height: 1.55; }
      .lp-hero-skill pre { font-size: 12px; padding: 14px 16px; }

      /* §06 HOW IT WORKS: stop the desktop flex/300px layout, stack vertically */
      #how .lp-steps {
        display: flex !important;
        flex-direction: column;
        gap: 32px !important;
        margin-top: 16px;
      }
      #how .lp-step {
        flex: 1 1 100% !important;
        max-width: 100%;
        text-align: center;
      }
      #how .lp-step:not(:last-child)::after { display: none; }
      #how .lp-step .ix { font-size: 44px; padding: 2px 14px 4px; margin-bottom: 18px; }
      #how .lp-step h3 { white-space: normal !important; font-size: 20px; }
      #how .lp-step p { font-size: 14px; }

      /* §07 MATRIX: stack to single column, rotate arrow */
      .lp-matrix-head { display: none; }
      .lp-matrix-row {
        grid-template-columns: 1fr;
        padding: 28px 22px;
        gap: 12px;
      }
      .lp-matrix-arrow {
        transform: rotate(90deg);
        align-self: start;
        font-size: 28px;
        margin: 4px 0;
      }
      .lp-matrix-cell h3 { font-size: 19px; }
      .lp-matrix-cell p { font-size: 13px; }

      /* §09 Q&A: stack question above answer, allow question wrap */
      .lp-qa-row {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 26px 20px;
      }
      .lp-qa-q { gap: 12px; }
      .lp-qa-q p { font-size: 18px; white-space: normal !important; line-height: 1.3; }
      .lp-qa-a p { font-size: 15px; }

      /* §10 PRICING: 1-column plans, scrollable compare table */
      .lp-plans { grid-template-columns: 1fr !important; }
      .lp-plan {
        border-right: none !important;
        border-bottom: 1px solid var(--border);
      }
      .lp-plan:last-child { border-bottom: none; }
      .lp-plan .price { font-size: 44px; }
      .lp-pricing-toggle { flex-wrap: wrap; }
      .lp-pricing-toggle .save {
        width: 100%;
        margin-left: 0;
        order: 3;
        text-align: center;
        margin-top: 8px;
      }

      /* Compare table — horizontal scroll on mobile */
      .lp-compare-toggle .lp-compare-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
      }
      .lp-compare-toggle .lp-compare-table thead,
      .lp-compare-toggle .lp-compare-table tbody { display: table; width: max-content; min-width: 100%; }
      .lp-compare-toggle .lp-compare-table th,
      .lp-compare-toggle .lp-compare-table td {
        font-size: 12px;
        padding: 10px 12px;
        white-space: nowrap;
      }
      .lp-compare-toggle .lp-compare-table td.row-label,
      .lp-compare-toggle .lp-compare-table th.row-label {
        position: sticky;
        left: 0;
        background: var(--bg);
        z-index: 1;
        white-space: normal;
      }

      /* Custom integration block: stack, button below text */
      .lp-custom {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 24px 22px;
      }
      .lp-custom .btn { justify-self: start; }

      /* CTA-strip already centers via column flex; just trim padding */
      .lp-cta-strip { padding: 24px 16px; }
      .lp-cta-strip p { font-size: 16px; }

      /* Demo: VS badge stays centered, but make sure it's not overlapping */
      .lp-vs-badge {
        font-size: 9px;
        padding: 5px 8px;
      }

      /* Section titles centered (we set this inline on a few; ensure centering on all on mobile) */
      .lp-section-title { font-size: clamp(1.75rem, 6vw, 2.25rem) !important; }
    }

    /* Smaller phones (iPhone SE-ish) */
    @media (max-width: 380px) {
      .lp-hero h1 { font-size: clamp(1.625rem, 7vw, 2rem) !important; }
      .lp-hero .sub { font-size: 15px; }
      .hero-promise { font-size: 14px; padding: 6px 0 6px 12px; }
      .lp-section-title { font-size: 26px !important; }
      .wrap { padding: 0 14px; }
    }

    /* Super-small phones (320 — iPhone SE 1st gen) */
    @media (max-width: 320px) {
      .lp-hero h1 { font-size: clamp(1.4rem, 7vw, 1.75rem) !important; }
      .wrap { padding: 0 12px; }
      .lp-section { padding: 40px 0; }
      .lp-hero { padding: 16px 0 28px; }
      .lp-cta-strip { padding: 20px 12px; }
      .lp-matrix-row { padding: 24px 16px; }
      .lp-qa-row { padding: 22px 14px; }
      .lp-plan { padding: 24px 18px 28px; }
    }

    /* ====================================================
       TABLET (768–1023) — re-enable 2-col where it fits
       ==================================================== */
    @media (min-width: 768px) and (max-width: 1023px) {
      .wrap { padding: 0 32px; }
      .lp-section { padding: 72px 0; }

      /* HERO: stays stacked vertically since side card lives below */
      .lp-hero h1 { font-size: clamp(2rem, 5.5vw, 3rem) !important; }
      .lp-hero .sub { font-size: 18px; }
      .hero-promise { font-size: 16px; }

      /* §02 Problem: 3 problem cards in a row */
      .lp-problem-list { grid-template-columns: repeat(3, 1fr); }
      .lp-problem-item { border-right: 1px solid var(--border); border-bottom: none; padding: 32px 24px 40px; }
      .lp-problem-item:last-child { border-right: none; }

      /* §03 Demo: side-by-side stays (base.css default) */

      /* §04 Testimonial wall: 2-col masonry */
      .lp-wall { column-count: 2; display: block; overflow-x: visible; padding: 0; margin: 0; }
      .lp-tcard { display: inline-block; flex: none; max-width: none; width: 100%; margin-bottom: 20px; }

      /* §06 How-it-works: 3 steps in a row, smaller */
      #how .lp-steps {
        flex-direction: row !important;
        justify-content: center;
        gap: 32px !important;
      }
      #how .lp-step {
        flex: 0 0 200px !important;
        text-align: center;
        position: relative;
      }
      #how .lp-step .ix { font-size: 40px; padding: 2px 12px 4px; margin-bottom: 18px; }
      #how .lp-step h3 { font-size: 18px; }
      #how .lp-step:not(:last-child)::after {
        display: block;
        content: '';
        position: absolute;
        left: calc(50% + 30px);
        top: 22px;
        width: 100%;
        height: 0;
        border-top: 3px solid var(--text);
      }
      .lp-risk { grid-template-columns: repeat(3, 1fr); }
      .lp-risk-item { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
      .lp-risk-item:nth-child(3n) { border-right: none; }
      .lp-risk-item:nth-child(n+4) { border-bottom: none; }

      /* §07 Matrix: 2-col with arrow */
      .lp-matrix-head { display: grid; }
      .lp-matrix-row {
        grid-template-columns: 1fr 50px 1fr;
        gap: 18px;
        padding: 28px 28px;
      }
      .lp-matrix-arrow {
        transform: none !important;
        align-self: center;
        margin: 0;
      }
      .lp-matrix-cell h3 { font-size: 18px; }

      /* §09 Q&A: 2-col, question on the left */
      .lp-qa-row {
        grid-template-columns: 5fr 7fr;
        gap: 28px;
        padding: 32px 28px;
      }
      .lp-qa-q p {
        white-space: normal !important;
        font-size: 18px;
      }
      .lp-qa-a p { font-size: 15px; }

      /* §10 Pricing: 2×2 grid */
      .lp-plans { grid-template-columns: 1fr 1fr !important; }
      .lp-plan {
        border-right: 1px solid var(--border) !important;
        border-bottom: 1px solid var(--border);
      }
      .lp-plan:nth-child(2n) { border-right: none !important; }
      .lp-plan:nth-child(n+3) { border-bottom: none; }
      .lp-plan .price { font-size: 48px; }

      /* Compare table: full table, no scroll */
      .lp-compare-toggle .lp-compare-table { display: table; overflow-x: visible; white-space: normal; }
      .lp-compare-toggle .lp-compare-table thead,
      .lp-compare-toggle .lp-compare-table tbody { display: table-row-group; width: auto; min-width: 0; }
      .lp-compare-toggle .lp-compare-table th,
      .lp-compare-toggle .lp-compare-table td {
        font-size: 13px;
        padding: 12px 10px;
        white-space: normal;
      }
      .lp-compare-toggle .lp-compare-table td.row-label,
      .lp-compare-toggle .lp-compare-table th.row-label {
        position: static;
        background: transparent;
      }

      /* Custom: 2-col, button on right */
      .lp-custom { grid-template-columns: 1fr auto; gap: 24px; padding: 32px 28px; }
      .lp-custom .btn { justify-self: end; }
    }

    /* ====================================================
       MOBILE PASS v2 — final polish for phones (<=767px)
       Kills h-scroll, shrinks header + CTAs, bumps hero copy,
       fits SKILL.md, moves demo VS between stacked cards,
       hides anatomy, makes pricing a carousel, compacts toggle.
       ==================================================== */
    @media (max-width: 767px) {
      /* Kill any horizontal page swipe — clamp viewport.
         Use overflow-x: clip (not hidden) so it does NOT create a
         scroll container that would break the sticky header. */
      html, body { overflow-x: clip; max-width: 100vw; }

      /* Header — tighter on mobile */
      .mkt-header { padding: 10px 0; }
      .mkt-logo img { height: 26px; }
      .mkt-actions .btn { padding: 8px 12px; font-size: 11px; min-height: 36px; }

      /* Hero — bigger H1, smaller CTA */
      .lp-hero h1 {
        font-size: clamp(1.85rem, 8.5vw, 2.6rem) !important;
        line-height: 1.08 !important;
      }
      .lp-hero .actions .btn-lg {
        font-size: 13px;
        min-height: 44px;
        padding: 12px 18px;
      }

      /* SKILL.md preview — fit without horizontal scroll */
      .lp-hero-skill pre,
      .lp-hero-skill code {
        white-space: pre-wrap !important;
        word-break: break-word;
        font-size: 11px !important;
        line-height: 1.5;
      }
      .lp-hero-skill { overflow-x: hidden; }

      /* §02 Problem — smaller body, bigger kicker */
      .lp-problem-item h3 { font-size: 18px; }
      .lp-problem-item p { font-size: 13px; }
      .lp-problem-close,
      .lp-problem-close p {
        font-size: clamp(1.5rem, 6vw, 2rem) !important;
        line-height: 1.2 !important;
      }

      /* §03 Demo — move VS badge between stacked cards */
      .lp-demo-frame {
        display: flex !important;
        flex-direction: column;
        position: relative;
      }
      .lp-demo-side.left { order: 1; }
      .lp-vs-badge {
        order: 2;
        position: static !important;
        transform: none !important;
        align-self: center;
        margin: -14px auto;
        z-index: 5;
        font-size: 11px;
        padding: 8px 14px;
        background: var(--text);
        color: #fff;
        font-weight: 700;
        letter-spacing: 0.1em;
      }
      .lp-demo-side.right { order: 3; }

      /* All CTA buttons smaller on mobile */
      .btn { font-size: 12px; min-height: 40px; padding: 10px 14px; }
      .btn-lg { font-size: 13px; min-height: 46px; padding: 12px 18px; }
      .btn-caps { font-size: 11px; letter-spacing: 0.08em; }

      /* §08 Anatomy — swap full block for compact mobile explainer */
      #anatomy .lp-skill { display: none !important; }
      .lp-skill-mobile { display: block !important; }
      .lp-skill-mobile__lede {
        font-size: 16px;
        line-height: 1.5;
        margin-bottom: 18px;
      }
      .lp-skill-mobile__pack {
        list-style: none;
        margin: 0 0 18px;
        padding: 0;
        border: 1px solid var(--border);
      }
      .lp-skill-mobile__pack li {
        display: flex;
        align-items: baseline;
        gap: 10px;
        padding: 11px 14px;
        border-bottom: 1px solid var(--border);
      }
      .lp-skill-mobile__pack li:last-child { border-bottom: none; }
      .lp-skill-mobile__pack .f {
        font-family: 'JetBrains Mono', monospace;
        font-size: 12px;
        font-weight: 700;
        color: var(--text);
        background: var(--accent);
        padding: 2px 7px;
        flex: 0 0 auto;
      }
      .lp-skill-mobile__pack .d {
        font-size: 13px;
        color: var(--muted);
      }
      .lp-skill-mobile__vs {
        font-size: 14px;
        line-height: 1.5;
        padding: 14px 16px;
        border-left: 3px solid var(--accent);
        background: rgba(255, 212, 0, 0.06);
        margin-bottom: 18px;
      }
      .lp-skill-mobile__foot {
        font-size: 15px;
        text-align: center;
        color: var(--muted);
      }
      .lp-skill-mobile__foot strong { color: var(--text); }

      /* §10 Pricing — billing toggle compact */
      .lp-pricing-toggle {
        padding: 12px 0;
        margin-bottom: 28px;
        gap: 8px;
        font-size: 10px;
      }
      .lp-pricing-toggle-pill button {
        padding: 8px 10px;
        font-size: 10px;
      }
      .lp-pricing-toggle .save {
        font-size: 11px;
        padding: 5px 10px;
      }

      /* Pricing cards as horizontal scroll-snap carousel */
      .lp-plans {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 12px;
        padding: 0 16px 16px;
        margin: 0 -16px;
        -webkit-overflow-scrolling: touch;
        grid-template-columns: none !important;
      }
      .lp-plans::-webkit-scrollbar { height: 4px; }
      .lp-plans::-webkit-scrollbar-thumb { background: var(--border); }
      .lp-plan {
        flex: 0 0 72% !important;
        max-width: 280px;
        scroll-snap-align: center;
        padding: 20px 18px 24px !important;
        border: 1px solid var(--border) !important;
        border-bottom: 1px solid var(--border) !important;
      }
      .lp-plan:last-child { border-bottom: 1px solid var(--border) !important; }
      /* Featured card: extra top room so the "Most popular" badge
         doesn't sit on top of the plan name */
      .lp-plan.featured { padding-top: 40px !important; }
      .lp-plan .name { font-size: 21px; margin-bottom: 6px; }
      .lp-plan .price { font-size: 36px !important; margin-bottom: 8px; }
      .lp-plan .price small { font-size: 14px; }
      .lp-plan .ix { font-size: 9px; margin-bottom: 14px; }
      .lp-plan .per-skill { margin-bottom: 14px; padding-bottom: 12px; }
      .lp-plan .per-skill-num { font-size: 15px; }
      .lp-plan .summary-line { font-size: 12px; margin-bottom: 16px; }

      /* Compare plans — hide desktop table, show mobile accordion */
      .lp-compare-toggle { display: none !important; }
      .lp-compare-mobile {
        display: block !important;
        margin-top: 32px;
        border-top: 1px solid var(--text);
      }
      .lp-compare-mobile details {
        border-bottom: 1px solid var(--border);
      }
      .lp-compare-mobile details.featured { background: var(--text); color: #fff; }
      .lp-compare-mobile details.featured summary strong { color: #fff; }
      .lp-compare-mobile details.featured summary .m { color: rgba(255,255,255,0.7); }
      .lp-compare-mobile details.featured ul li { border-bottom-color: rgba(255,255,255,0.15); }
      .lp-compare-mobile details.featured ul li span { color: rgba(255,255,255,0.65); }
      .lp-compare-mobile details.featured ul li b { color: #fff; }
      .lp-compare-mobile summary {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 14px 16px;
        cursor: pointer;
        list-style: none;
      }
      .lp-compare-mobile summary::-webkit-details-marker { display: none; }
      .lp-compare-mobile summary strong { font-size: 16px; flex: 0 0 auto; }
      .lp-compare-mobile summary .m {
        flex: 1;
        font-family: 'JetBrains Mono', monospace;
        font-size: 11px;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }
      .lp-compare-mobile summary .caret {
        font-size: 18px;
        color: var(--muted);
        font-family: 'JetBrains Mono', monospace;
      }
      .lp-compare-mobile details[open] summary .caret::before {
        content: '−';
      }
      .lp-compare-mobile details[open] summary .caret { font-size: 0; }
      .lp-compare-mobile details[open] summary .caret::before { font-size: 18px; }
      .lp-compare-mobile ul {
        list-style: none;
        padding: 0 16px 16px;
      }
      .lp-compare-mobile ul li {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        padding: 8px 0;
        border-bottom: 1px solid var(--border);
        font-size: 13px;
      }
      .lp-compare-mobile ul li:last-child { border-bottom: none; }
      .lp-compare-mobile ul li span { color: var(--muted); }
      .lp-compare-mobile ul li b { font-weight: 600; text-align: right; }

      /* Final CTA — smaller */
      .lp-finalcta { padding: 64px 0 80px; }
      .lp-finalcta h2 { font-size: clamp(1.85rem, 8.5vw, 2.4rem) !important; }
      .lp-finalcta .sub { font-size: 15px; }
      .lp-finalcta .btn-lg { font-size: 13px; padding: 12px 18px; min-height: 46px; }

      /* Hero CTA even smaller on phones */
      .lp-hero .actions .btn,
      .lp-hero .actions .btn-lg {
        font-size: 12px !important;
        min-height: 40px !important;
        padding: 10px 16px !important;
        letter-spacing: 0.05em;
      }

      /* Header — sticky + solid opaque on mobile (F-24: no backdrop-filter blur) */
      .mkt-header {
        position: sticky !important;
        top: 0;
        z-index: 50;
        background: rgba(250, 250, 250, 0.97) !important;
      }

      /* Works-in card (hero side) — hidden on mobile */
      .lp-hero .platforms { display: none !important; }

      /* §02 Problem — tighter inter-item spacing */
      .lp-problem-list { gap: 0 !important; }
      .lp-problem-item { padding: 22px 18px !important; }
      .lp-problem-item .ix { margin-bottom: 10px; font-size: 10px; }
      .lp-problem-item h3 { margin-bottom: 8px; font-size: 17px; }
      .lp-problem-item p { font-size: 13px; line-height: 1.45; }

      /* Kicker line: "Skills fix all three. Permanently." — bigger on mobile */
      .lp-problem-close,
      .lp-problem-close p {
        font-size: clamp(1.75rem, 8vw, 2.5rem) !important;
        line-height: 1.15 !important;
        padding: 36px 0 !important;
      }

      /* §03 Demo title — stack as 3 lines: Before / VS / After */
      .lp-demo-title { display: flex; flex-direction: column; align-items: center; gap: 6px; }
      .lp-demo-title .line { display: block; }
      .lp-demo-title .vs {
        background: var(--text);
        color: #fff;
        padding: 4px 14px;
        font-size: 0.65em;
        letter-spacing: 0.15em;
        font-weight: 800;
      }

      /* Video caption — smaller on mobile */
      .lp-video-cap {
        font-size: 14px !important;
        line-height: 1.45;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
      }

      /* §06 How-it-works numbers smaller on mobile */
      #how .lp-step .ix {
        font-size: 32px !important;
        padding: 0 12px !important;
        margin-bottom: 14px !important;
      }
      #how .lp-step h3 { font-size: 18px; margin-bottom: 6px; }
      #how .lp-step p { font-size: 13px; }
      #how .lp-steps { gap: 24px !important; }

      /* §05 Risk-reverser tiles — tight grid, all on one screen */
      .lp-risk {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
      }
      .lp-risk-item {
        padding: 16px 16px !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border) !important;
      }
      .lp-risk-item:last-child { border-bottom: none !important; }
      .lp-risk-item h4 { font-size: 14px !important; margin-bottom: 4px !important; }
      .lp-risk-item p { font-size: 12px !important; line-height: 1.4; }
      .lp-risk-item .tick { font-size: 14px !important; margin-bottom: 4px !important; }

      /* Footer — really compact on mobile */
      .lp-footer { padding: 16px 0 10px; }
      .lp-footer-social { margin-top: 12px; gap: 8px; }
      .lp-footer-social a { width: 34px; height: 34px; }
      .lp-footer-brand .lockup img { height: 26px; }
      .lp-footer-brand .lockup { margin-bottom: 4px; }
      .lp-footer-brand .tagline { font-size: 12px; line-height: 1.4; }
      .lp-footer-grid { gap: 14px 14px; }
      .lp-footer-col h5 { margin-bottom: 6px; font-size: 10px; }
      .lp-footer-col ul { font-size: 12px; }
      .lp-footer-col li { padding: 1px 0; }
      .lp-footer-bottom { margin-top: 12px; font-size: 10px; }

      /* Social-proof stat bar — compact on mobile */
      .lp-proof-bar { margin: 0 auto 32px; max-width: 100%; }
      .lp-proof-stat { padding: 14px 8px; }
      .lp-proof-stat .num { font-size: 22px; }
      .lp-proof-stat .label { font-size: 9px; letter-spacing: 0.05em; }
      .hero-proof { font-size: 12px; }

      /* §09 Q&A — tight rows so 3 questions fit one screen */
      .lp-qa-row {
        padding: 16px 16px !important;
        gap: 8px !important;
        border-bottom: 1px solid var(--border);
      }
      .lp-qa-row:last-child { border-bottom: none; }
      .lp-qa-q { gap: 10px !important; }
      .lp-qa-q .ix {
        font-size: 11px !important;
        padding: 3px 7px !important;
      }
      .lp-qa-q p {
        font-size: 15px !important;
        line-height: 1.25 !important;
        white-space: normal !important;
      }
      .lp-qa-a p {
        font-size: 13px !important;
        line-height: 1.4 !important;
      }

      /* §07 Matrix — kill arrows, tighter rows */
      .lp-matrix-arrow { display: none !important; }
      .lp-matrix-row {
        grid-template-columns: 1fr !important;
        padding: 20px 18px !important;
        gap: 8px !important;
      }
      .lp-matrix-row + .lp-matrix-row { border-top: 1px solid var(--border); }
      .lp-matrix-cell h3 { font-size: 16px !important; margin-bottom: 4px !important; }
      .lp-matrix-cell p { font-size: 13px !important; line-height: 1.4; }
      .lp-matrix-cell.from { padding-bottom: 4px; }
      .lp-matrix-cell.to { padding-top: 4px; border-top: 1px dashed var(--border); }
    }

    /* ====================================================
       REDUCED MOTION (F-25)
       Kill all transitions/animations for users who prefer
       reduced motion. The JS carousel also checks this flag
       (see landing.js autoCarousel).
       ==================================================== */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
      }
    }