.price-compare{
    padding:48px 16px 56px;background:transparent;
    /* 2026-05-26: pulls the section up under the fading tail of the hero
       so the two sections visually overlap instead of butting against a
       hard seam. Negative margin lets the price-compare's first ~80px
       sit inside the hero's mask-out zone; padding-top adjusts so the
       eyebrow doesn't land in that overlap zone. */
    margin-top:-80px;padding-top:128px;position:relative;z-index:2;
  }
  /* 2026-05-24: section width bumped 1240 → 1400 per user "open wider"
     feedback. The pricing comparison + founder letter beat carries the
     full weight of the page narrative; cramping it to 1240 left the
     founder letter visibly narrow on wide displays. */
  .pc-wrap{max-width:1400px;margin:0 auto;text-align:center}
  /* 2026-05-24 (rev3): editorial 3-column grid replaces the prior
     1fr/2fr "DeepAI card | Debatable card" layout. The Debatable card
     was stacking 2 paragraphs + 2 link tiles into a narrow column
     and leaving ~5 columns of dead air to its right, which read as
     "content failed to load." New shape: a compact pricing card on
     the left (vertical "vs." comparison so both sides live in one
     card), the founder letter as the load-bearing middle column
     with modular sub-heads + a real CTA row, and a trust-signal
     rail on the right (formats / brains / use-cases) so the page
     reads as a growing platform, not a personal blog.
     12-col proportions: 3 / 5 / 4. Stacks to 2-col under 1080px,
     1-col under 720px. */
  /* 2026-05-24 (rev4): trust rail dropped per user — Formats / AI
     brains / What-people-drill cards repeated info the rest of the
     landing page already makes (encyclopedia overview, FAQ, audience
     tabs). Layout is now 2 columns: pricing comparison + founder
     letter, with the founder letter taking the lion's share.
     2026-05-24 (rev5): user direction — DeepAI ~20%, Debatable ~80%
     to make the section shorter on Y. Was 2fr:5fr (~29/71); now
     1fr:4fr (20/80). The pricing card holds only a tag + two prices
     + one short note, so 20% is enough room; the reclaimed width
     lets the founder letter wrap to fewer lines and cuts row height. */
  .pc-grid{
    display:grid;
    /* 2026-06-12: pricing comparison card restored per the founder; it
       stacks above the co-founder ask in the left column. */
    grid-template-columns:minmax(0,1fr) minmax(0,4fr);
    grid-template-areas:
      "price    founder"
      "cofound  founder";
    gap:22px;max-width:1340px;margin:0 auto;
    align-items:start;
    text-align:left;
  }
  .pc-grid > .pc-card{grid-area:price}
  .pc-grid > .cofounder-card{grid-area:cofound}
  .pc-grid > .founder-letter{grid-area:founder}
  @media (max-width:1080px){
    /* Tablet: dial back to 1fr:3fr so the narrow cofounder column
       stays legible without pushing the founder letter past a
       comfortable reading measure. */
    .pc-grid{grid-template-columns:minmax(0,1fr) minmax(0,3fr)}
  }
  @media (max-width:720px){
    .pc-grid{
      grid-template-columns:1fr;
      grid-template-areas:
        "price"
        "cofound"
        "founder";
      max-width:560px;
    }
  }

  .pc-eyebrow{font-size:.64rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#ef4444;margin-bottom:10px}
  .pc-title{font-family:var(--font-display);font-size:2rem;font-weight:700;letter-spacing:-.02em;line-height:1.15;margin-bottom:8px}
  .pc-sub{color:var(--text-dim,rgba(255,255,255,.66));font-size:1rem;line-height:1.55;max-width:620px;margin:0 auto 28px}
  .pc-card{
    background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.012));
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;padding:22px 22px 20px;
    display:flex;flex-direction:column;gap:6px;
    box-shadow:0 1px 0 rgba(255,255,255,.02);
  }
  .pc-card-section + .pc-card-section{margin-top:6px}
  .pc-card-tag{font-size:.6rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim,rgba(255,255,255,.66));display:flex;align-items:center;gap:6px;margin-bottom:2px}
  .pc-card-tag--us{color:#ef4444}
  .pc-card-row{display:flex;align-items:baseline;gap:6px;margin-bottom:2px}
  .pc-price{font-size:1.55rem;font-weight:800;color:var(--text,#fff);letter-spacing:-.02em;line-height:1}
  .pc-price--us{color:#ef4444;font-size:1.7rem}
  .pc-cadence{font-size:.74rem;color:var(--text-dim,rgba(255,255,255,.66))}
  .pc-card-note{margin-top:8px;font-size:.74rem;color:var(--text-dim,rgba(255,255,255,.7));line-height:1.5}
  .pc-card-rule{border:none;border-top:1px dashed rgba(255,255,255,.10);margin:14px 0 6px;width:100%}
  .pc-vs{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim,rgba(255,255,255,.55));font-weight:800;margin-bottom:6px}
  .pc-beta-chip{display:inline-block;font-size:.56rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:2px 7px;border-radius:999px;background:rgba(34,197,94,.14);color:#22c55e;border:1px solid rgba(34,197,94,.32);vertical-align:middle}
  .pc-personalize{max-width:1340px;margin:22px auto 0}
  .pc-personalize-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  @media (max-width:640px){.pc-personalize-grid{grid-template-columns:1fr}}
  .pc-personalize-cell{background:var(--bg-card,rgba(255,255,255,.025));border:1px solid var(--border,rgba(255,255,255,.08));border-radius:14px;padding:14px 16px;text-align:left}
  .pc-personalize-cell--us{border-color:rgba(239,68,68,.32);background:rgba(239,68,68,.04)}
  .pc-cell-tag{font-size:.58rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim,rgba(255,255,255,.6));margin-bottom:6px}
  .pc-personalize-cell--us .pc-cell-tag{color:#ef4444}
  .pc-cell-body{font-size:.84rem;color:var(--text,rgba(255,255,255,.86));line-height:1.55}
  .pc-cell-body em{font-style:normal;color:#fca5a5}
  [data-theme="light"] .pc-card,
  [data-theme="stone"] .pc-card,
  [data-theme="light"] .pc-personalize-cell,
  [data-theme="stone"] .pc-personalize-cell{background:#ffffff;border-color:rgba(0,0,0,.08)}
  [data-theme="light"] .pc-cell-body,
  [data-theme="stone"] .pc-cell-body{color:#1a1a1f}
  [data-theme="light"] .pc-card-note,
  [data-theme="stone"] .pc-card-note{color:#5a5a64}
  [data-theme="light"] .pc-card-rule,
  [data-theme="stone"] .pc-card-rule{border-top-color:rgba(0,0,0,.10)}

  /* ── Co-founder ask card ─────────────────────────────────
     Sits in the left column of .pc-grid right under the $0
     comparison card so the empty band under it (the founder-letter
     in the right column is much taller) finally has a purpose.
     Same chrome family as pc-card but with a single short-form
     message. Honest, plain, founder-voice. */
  .cofounder-card{
    padding:18px 18px;
    background:rgba(239,68,68,.05);
    border:1px dashed rgba(239,68,68,.36);
    border-radius:14px;
    text-align:left;
  }
  .cofounder-card .cc-eyebrow{
    font-size:.6rem;font-weight:800;letter-spacing:.14em;
    text-transform:uppercase;color:#ef4444;margin-bottom:8px;
  }
  .cofounder-card .cc-h{
    font-family:var(--font-display);
    font-size:1.32rem;font-weight:700;letter-spacing:-.012em;
    line-height:1.15;margin:0 0 8px;color:var(--text,#fff);
  }
  .cofounder-card .cc-body{
    font-size:.84rem;color:var(--text-dim,rgba(255,255,255,.72));
    line-height:1.55;margin:0 0 12px;
  }
  .cofounder-card .cc-cta{
    display:inline-flex;align-items:center;gap:6px;
    font-size:.78rem;font-weight:700;color:#ef4444;
    text-decoration:none;border-bottom:1px solid rgba(239,68,68,.45);
    padding-bottom:1px;transition:border-color .15s,color .15s;
  }
  .cofounder-card .cc-cta:hover{
    color:#dc2626;border-color:#dc2626;
  }
  [data-theme="light"] .cofounder-card,
  [data-theme="stone"] .cofounder-card{
    background:rgba(220,38,38,.06);border-color:rgba(220,38,38,.34);
  }
  [data-theme="light"] .cofounder-card .cc-h,
  [data-theme="stone"] .cofounder-card .cc-h{color:#1a1a1f}
  [data-theme="light"] .cofounder-card .cc-body,
  [data-theme="stone"] .cofounder-card .cc-body{color:#5a5a64}

  /* Founder letter — load-bearing middle column. Subtle radial
     accent in the top-left replaces the flat pink fill; the modular
     sub-heads break a 600-word wall into 5 readable beats. Reading
     measure sits at ~58–66 ch on desktop. */
  .founder-letter{
    position:relative;overflow:hidden;
    background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));
    border:1px solid rgba(239,68,68,.18);
    border-radius:20px;
    padding:28px 30px 26px;
    display:flex;flex-direction:column;gap:16px;
  }
  .founder-letter::before{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(600px 280px at 20% -10%,rgba(239,68,68,.10),transparent 62%);
    z-index:0;
  }
  .founder-letter::after{
    /* Faint grain so the panel doesn't read as a flat slab. */
    content:'';position:absolute;inset:0;pointer-events:none;opacity:.45;mix-blend-mode:overlay;
    background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px);
    background-size:3px 3px;z-index:0;
  }
  .founder-letter > *{position:relative;z-index:1}
  .fl-head{display:flex;flex-direction:column;gap:3px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.07)}
  .fl-eyebrow{font-size:.6rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#ef4444}
  .fl-byline{font-family:var(--font-display);font-size:1.05rem;font-weight:700;color:var(--text,#fff);letter-spacing:-.005em;margin:0}
  .fl-byline-meta{font-size:.74rem;color:var(--text-dim,rgba(255,255,255,.66));margin-top:2px}
  .fl-module{display:flex;flex-direction:column;gap:6px}
  .fl-mod-h{font-size:.82rem;font-weight:700;color:var(--text,#fff);letter-spacing:-.005em;margin:0;display:flex;align-items:baseline;gap:8px}
  .fl-mod-num{font-size:.62rem;font-weight:800;letter-spacing:.12em;color:#ef4444;opacity:.85;font-variant-numeric:tabular-nums}
  .fl-module p{font-size:.93rem;line-height:1.6;color:rgba(255,255,255,.86);margin:0}
  .fl-module p em{color:#fca5a5;font-style:normal}
  /* 2026-05-24: Her-style screen homage next to module 01.
     Stylized red OS panel + infinity glyph; deliberately NOT a film
     still, to avoid lifting copyrighted material from the film.
     2026-05-24: user overrode the SVG-only stance — see the
     .her-still block + the surrounding markup. The SVG glyph
     scaffolding is gone; the .her-screen-frame chrome (cream
     bezel, scanline overlay) remains and now wraps the still.
     Body becomes a 2-col grid; collapses under 720px. */
  .fl-mod-body{display:grid;grid-template-columns:1fr;gap:14px;align-items:start}
  .fl-mod-body--media{grid-template-columns:1fr 280px}
  @media (max-width:720px){.fl-mod-body--media{grid-template-columns:1fr}}
  /* Paired media module (01 + 02). The still spans the right column while
     both beats stack on the left, so "02" sits directly under "01" instead
     of clearing below the full image height. */
  .fl-module--media{display:grid;grid-template-columns:1fr 280px;gap:14px 28px;align-items:start}
  .fl-media-text{display:flex;flex-direction:column;gap:16px}
  .fl-beat{display:flex;flex-direction:column;gap:6px}
  @media (max-width:720px){.fl-module--media{grid-template-columns:1fr}}
  .her-screen{margin:0}
  .her-screen-frame{
    aspect-ratio:16/9;
    position:relative;
    border-radius:8px;
    background:#1a0d0a;
    box-shadow:
      inset 0 0 0 7px #f4ede2,
      0 1px 0 rgba(255,255,255,.06),
      0 16px 38px rgba(220,38,48,.28),
      0 2px 8px rgba(0,0,0,.45);
    overflow:hidden;
  }
  .her-screen-frame::after{
    content:'';position:absolute;inset:7px;
    background:repeating-linear-gradient(to bottom,transparent 0 2px,rgba(0,0,0,.06) 2px 3px);
    mix-blend-mode:multiply;opacity:.55;pointer-events:none;z-index:2;border-radius:2px;
  }
  .her-still{
    position:absolute;inset:7px;
    width:calc(100% - 14px);height:calc(100% - 14px);
    object-fit:cover;border-radius:2px;display:block;z-index:1;
    /* 2026-05-27: focal point biased upward (50% 28%) + slight scale
       so Theodore's face/head sits closer to the vertical centre of
       the 16:9 crop. Default center-center was clipping too much of
       his head against the upper bezel of the screen frame. */
    object-position:50% 28%;
    transform:scale(1.06);
    transform-origin:50% 30%;
  }
  .her-screen-cap{
    display:block;margin-top:10px;
    font-size:.72rem;line-height:1.45;
    color:rgba(255,255,255,.68);
    text-align:left;
  }
  .her-screen-cap em{font-style:normal;color:rgba(255,255,255,.82)}
  .her-screen-cap strong{font-weight:700;color:#fca5a5}
  .her-screen-cap a{color:#ef4444;text-decoration:none;border-bottom:1px solid rgba(239,68,68,.45);font-weight:600}
  .her-screen-cap a:hover{border-bottom-color:#ef4444}
  [data-theme="light"] .her-screen-cap,
  [data-theme="stone"] .her-screen-cap{color:rgba(0,0,0,.64)}
  [data-theme="light"] .her-screen-cap em,
  [data-theme="stone"] .her-screen-cap em{color:rgba(0,0,0,.82)}
  [data-theme="light"] .her-screen-cap strong,
  [data-theme="stone"] .her-screen-cap strong{color:#dc2626}
  .fl-cta{display:flex;flex-wrap:wrap;gap:10px;padding-top:14px;border-top:1px solid rgba(255,255,255,.07);margin-top:4px}
  .fl-cta-primary,.fl-cta-secondary{
    display:inline-flex;align-items:center;gap:6px;
    padding:10px 16px;border-radius:999px;
    font-size:.78rem;font-weight:700;text-decoration:none;
    transition:.15s ease;
  }
  .fl-cta-primary{background:#b91c1c;color:#fff;border:1px solid #ef4444}
  .fl-cta-primary:hover{background:#dc2626;border-color:#dc2626;transform:translateY(-1px)}
  .fl-cta-secondary{background:rgba(255,255,255,.04);color:var(--text,#fff);border:1px solid rgba(255,255,255,.14)}
  .fl-cta-secondary:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.22)}

  /* Light + stone themes: cream bg needs darker text + slightly
     stronger borders on the new chrome. */
  [data-theme="light"] .founder-letter,
  [data-theme="stone"] .founder-letter{
    background:#ffffff;border-color:rgba(239,68,68,.30);
  }
  [data-theme="light"] .fl-module p,
  [data-theme="stone"] .fl-module p{color:#1a1a1f}
  /* Contrast: the founder-letter card flips to a WHITE background in
     light/stone, where the dark-theme pink em (#fca5a5) and the .85-alpha
     #ef4444 section numbers wash out. Darker reds clear WCAG AA on white. */
  [data-theme="light"] .fl-module p em,
  [data-theme="stone"] .fl-module p em{color:#b91c1c}
  [data-theme="light"] .fl-mod-num,
  [data-theme="stone"] .fl-mod-num{color:#c81e1e;opacity:1}
  [data-theme="light"] .fl-cta-secondary,
  [data-theme="stone"] .fl-cta-secondary{background:rgba(0,0,0,.04);color:#1a1a1f;border-color:rgba(0,0,0,.12)}