/* ---------------------------------------------------------
       Landing page only. Uses the tokens already defined in
       style.css (--ink, --vault, --ore, --line, radii, shadows)
       so the homepage cannot drift from the app's identity.
       Kept inline: one file, one request, no extra round trip.
       --------------------------------------------------------- */
    .lp-wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

    /* The header is sticky, so anchored sections would otherwise land
       underneath it. Offset every jump target by its height. */
    section[id] { scroll-margin-top: 76px; }
    @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

    /* header */
    .lp-top {
      position: sticky; top: 0; z-index: 100;
      background: rgba(255,255,255,.88);
      backdrop-filter: saturate(160%) blur(10px);
      border-bottom: 1px solid var(--line);
    }
    .lp-top-inner { display: flex; align-items: center; gap: 16px; height: 60px; }
    .lp-brand {
      display: inline-flex; align-items: center; gap: 10px;
      font-weight: 680; font-size: 1.12rem; letter-spacing: -.02em;
      color: var(--ink); text-decoration: none; margin-right: auto;
    }
    .lp-brand:hover { text-decoration: none; }
    .lp-brand .mine { color: var(--ore); }
    .lp-brand .dm-mark { display: inline-flex; }
    .lp-nav { display: flex; align-items: center; gap: 22px; }
    .lp-nav a { color: var(--slate); font-size: .93rem; font-weight: 520; }
    .lp-nav a:hover { color: var(--ink); text-decoration: none; }
    /* The nav's `a` colour outranks .lp-btn-primary (class+element beats
       class alone), which greys out the button label. Re-assert it here. */
    .lp-nav a.lp-btn-primary,
    .lp-nav a.lp-btn-primary:hover { color: #fff; }
    .lp-nav a.lp-btn-ghost,
    .lp-nav a.lp-btn-ghost:hover { color: var(--ink); }

    /* buttons */
    .lp-btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      padding: 11px 20px; border-radius: var(--r); border: 1px solid transparent;
      font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer;
      text-decoration: none; transition: background .15s, border-color .15s, color .15s;
    }
    .lp-btn:hover { text-decoration: none; }
    .lp-btn-primary { background: var(--vault); color: #fff; }
    .lp-btn-primary:hover { background: var(--vault-bright); color: #fff; }
    .lp-btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
    .lp-btn-ghost:hover { border-color: var(--vault); color: var(--vault); }
    .lp-btn-sm { padding: 8px 15px; font-size: .9rem; }
    .lp-btn[disabled] { opacity: .55; cursor: not-allowed; }

    /* hero */
    .lp-hero { padding: 68px 0 56px; }
    .lp-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 52px; align-items: center; }
    .lp-eyebrow {
      display: inline-flex; align-items: center; gap: 7px;
      font-family: var(--font-mono); font-size: .74rem; letter-spacing: .06em;
      text-transform: uppercase; color: var(--vault);
      background: var(--vault-soft); border-radius: 999px; padding: 5px 11px;
      margin-bottom: 18px;
    }
    .lp-hero h1 {
      font-size: clamp(2.1rem, 5vw, 3.05rem); line-height: 1.1;
      letter-spacing: -.03em; margin-bottom: 18px;
    }
    .lp-hero h1 em { font-style: normal; color: var(--ore); }
    .lp-lede { font-size: 1.08rem; color: var(--slate); max-width: 46ch; margin: 0 0 26px; }
    .lp-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
    .lp-cta-note { font-size: .86rem; color: var(--muted); margin: 14px 0 0; }

    /* hero demo card */
    .lp-demo {
      background: var(--ink); color: #e8edf2; border-radius: var(--r-xl);
      padding: 20px; box-shadow: var(--shadow-lg); overflow: hidden;
    }
    .lp-demo-head {
      display: flex; align-items: center; justify-content: space-between;
      font-family: var(--font-mono); font-size: .78rem;
      padding-bottom: 12px; margin-bottom: 14px;
      border-bottom: 1px solid rgba(255,255,255,.12); color: #a8b4c2;
    }
    .lp-demo-head b {
      color: #0f1a12; background: #7fd8a4; border-radius: 4px;
      padding: 2px 8px; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
    }
    .lp-demo-line { font-size: .9rem; line-height: 2.05; color: #cdd6e0; }
    .lp-demo-split + .lp-demo-split {
      margin-top: 16px; padding-top: 14px;
      border-top: 1px dashed rgba(255,255,255,.14);
    }
    .lp-demo-cap {
      font-family: var(--font-mono); font-size: .7rem; letter-spacing: .07em;
      text-transform: uppercase; color: #8d9aa9; margin-bottom: 8px;
      display: flex; align-items: center; gap: 7px;
    }
    .lp-demo-cap::before {
      content: ""; width: 6px; height: 6px; border-radius: 50%;
      background: currentColor; flex: none;
    }
    .lp-demo-cap.tok { color: #d19023; }
    .lp-bar {
      display: inline-block; height: 11px; vertical-align: baseline;
      background: #0b1119; border-radius: 2px; margin: 0 2px;
    }
    .lp-tok {
      font-family: var(--font-mono); font-size: .8rem;
      color: #f0b855; background: rgba(209,144,35,.16);
      border: 1px solid rgba(209,144,35,.3); border-radius: 4px; padding: 1px 6px;
    }

    /* interactive demo controls (live on the dark hero card) */
    .lp-demo-controls {
      display: flex; flex-wrap: wrap; gap: 10px;
      align-items: center; justify-content: space-between; margin-bottom: 14px;
    }
    .lp-demo-toggles { display: flex; gap: 6px; }
    .lp-demo-chip {
      font: inherit; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .03em;
      cursor: pointer; padding: 5px 11px; border-radius: 999px;
      background: rgba(255,255,255,.06); color: #a8b4c2;
      border: 1px solid rgba(255,255,255,.14);
      transition: background .15s, color .15s, border-color .15s;
    }
    .lp-demo-chip:hover { color: #e8edf2; border-color: rgba(255,255,255,.32); }
    .lp-demo-chip.on {
      background: rgba(209,144,35,.16); color: #f0b855; border-color: rgba(209,144,35,.42);
    }
    .lp-demo-mode { display: flex; gap: 2px; padding: 2px; border-radius: 999px; background: rgba(255,255,255,.05); }
    .lp-demo-seg {
      font: inherit; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .03em;
      cursor: pointer; padding: 5px 12px; border: 0; border-radius: 999px;
      background: transparent; color: #a8b4c2; transition: background .15s, color .15s;
    }
    .lp-demo-seg:hover { color: #e8edf2; }
    .lp-demo-seg.on { background: rgba(255,255,255,.14); color: #e8edf2; }
    #demo-doc { white-space: pre-wrap; min-height: 150px; }
    .lp-hit { border-bottom: 2px solid rgba(240,184,85,.55); color: #f0d9a8; }
    .lp-demo-acts {
      display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
      margin-top: 14px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.12);
    }
    .lp-demo-reset { background: rgba(255,255,255,.08); color: #cdd6e0; }
    .lp-demo-reset:hover { background: rgba(255,255,255,.16); color: #fff; }
    .lp-demo-note { font-size: .72rem; color: #8d9aa9; flex: 1 1 170px; line-height: 1.5; }
    .lp-demo-note a { color: #7fd8a4; text-decoration: underline; }

    /* data-handling strip under the hero */
    .lp-data {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
      margin-top: 36px; padding: 16px 20px;
      background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg);
    }
    .lp-data > div { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; color: var(--slate); }
    .lp-data svg { flex: none; color: var(--vault); margin-top: 1px; }

    /* generic section */
    .lp-sec { padding: 62px 0; border-top: 1px solid var(--line); }
    .lp-sec-alt { background: var(--surface); }
    .lp-sec h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); letter-spacing: -.025em; margin-bottom: 12px; }
    .lp-sec-lede { color: var(--muted); max-width: 58ch; margin: 0 0 34px; }

    /* feature grid */
    .lp-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
    .lp-grid-2 { grid-template-columns: repeat(2, 1fr); }
    .lp-card {
      background: var(--surface); border: 1px solid var(--line);
      border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow-sm);
    }
    .lp-sec-alt .lp-card { background: var(--surface-2); }
    .lp-card h3 { font-size: 1.03rem; margin-bottom: 7px; }
    .lp-card p { margin: 0; color: var(--muted); font-size: .93rem; }
    .lp-ico {
      width: 34px; height: 34px; border-radius: 9px; margin-bottom: 14px;
      display: inline-flex; align-items: center; justify-content: center;
      background: var(--vault-soft); color: var(--vault);
    }
    .lp-ico.ore { background: var(--ore-soft); color: var(--ore); }

    /* two-mode cards */
    .lp-mode {
      background: var(--surface); border: 1px solid var(--line-strong);
      border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow-sm);
    }
    .lp-mode-tag {
      display: inline-block; font-family: var(--font-mono); font-size: .72rem;
      letter-spacing: .07em; text-transform: uppercase;
      border-radius: 999px; padding: 4px 11px; margin-bottom: 14px;
      background: var(--ore-soft); color: var(--ore);
    }
    .lp-mode-tag.vault { background: var(--vault-soft); color: var(--vault); }
    .lp-mode h3 { font-size: 1.16rem; margin-bottom: 8px; }
    .lp-mode > p { color: var(--muted); font-size: .95rem; margin: 0 0 16px; }
    .lp-out {
      font-family: var(--font-mono); font-size: .82rem; line-height: 1.85;
      background: var(--surface-2); border: 1px solid var(--line);
      border-radius: var(--r-sm); padding: 12px 14px; color: var(--slate);
      overflow-x: auto; white-space: pre;
    }
    .lp-out .k { color: var(--ore); }

    /* chips */
    .lp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
    .lp-chip {
      font-family: var(--font-mono); font-size: .81rem;
      background: var(--surface); border: 1px solid var(--line-strong);
      border-radius: 999px; padding: 6px 13px; color: var(--slate);
    }
    .lp-sec-alt .lp-chip { background: var(--surface-2); }
    .lp-chip.on { border-color: var(--vault); color: var(--vault); background: var(--vault-soft); }

    /* steps */
    .lp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: s; }
    .lp-step { padding-top: 16px; border-top: 2px solid var(--line-strong); }
    .lp-step::before {
      counter-increment: s; content: counter(s, decimal-leading-zero);
      font-family: var(--font-mono); font-size: .82rem; color: var(--ore); display: block; margin-bottom: 8px;
    }
    .lp-step h3 { font-size: 1rem; margin-bottom: 6px; }
    .lp-step p { margin: 0; color: var(--muted); font-size: .93rem; }

    /* split rows */
    .lp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
    .lp-list { list-style: none; margin: 0; padding: 0; }
    .lp-list li {
      position: relative; padding-left: 26px; margin-bottom: 11px;
      color: var(--slate); font-size: .96rem;
    }
    .lp-list li::before {
      content: ""; position: absolute; left: 4px; top: .52em;
      width: 7px; height: 7px; border-radius: 2px; background: var(--vault);
    }

    /* notice / disclaimer */
    .lp-notice {
      background: var(--warn-soft); border: 1px solid rgba(153,108,16,.28);
      border-radius: var(--r-lg); padding: 24px 26px;
    }
    .lp-notice h3 {
      font-size: 1.05rem; margin-bottom: 10px; color: var(--warn);
      display: flex; align-items: center; gap: 9px;
    }
    .lp-notice p { margin: 0 0 11px; font-size: .94rem; color: var(--slate); }
    .lp-notice p:last-child { margin-bottom: 0; }
    .lp-notice b { color: var(--ink); }
    .lp-hero-warn {
      font-size: .84rem; color: var(--muted); margin: 10px 0 0;
      padding-left: 13px; border-left: 2px solid var(--line-strong);
    }

    /* contact form */
    .lp-form { display: grid; gap: 14px; }
    .lp-field { display: grid; gap: 6px; }
    .lp-field label { font-size: .88rem; font-weight: 600; color: var(--slate); }
    .lp-field input, .lp-field textarea, .lp-field select {
      font: inherit; font-size: .95rem; color: var(--ink);
      background: var(--surface); border: 1px solid var(--line-strong);
      border-radius: var(--r-sm); padding: 10px 12px; width: 100%;
    }
    .lp-field textarea { min-height: 130px; resize: vertical; }
    .lp-field input:focus, .lp-field textarea:focus, .lp-field select:focus {
      outline: 2px solid var(--vault-bright); outline-offset: 1px; border-color: var(--vault);
    }
    .lp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .lp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
    .lp-form-msg { border-radius: var(--r-sm); padding: 11px 14px; font-size: .92rem; margin: 0; }
    .lp-form-msg.ok { background: var(--ok-soft); color: var(--ok); }
    .lp-form-msg.err { background: var(--danger-soft); color: var(--danger); }
    .lp-form-fine { font-size: .82rem; color: var(--faint); margin: 0; }

    /* cookie consent */
    .lp-consent {
      position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 200;
      max-width: 640px; margin: 0 auto;
      background: var(--surface); border: 1px solid var(--line-strong);
      border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
      padding: 18px 20px;
      display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    }
    .lp-consent[hidden] { display: none; }
    .lp-consent p { margin: 0; flex: 1 1 260px; font-size: .9rem; color: var(--slate); }
    .lp-consent .acts { display: flex; gap: 10px; flex: 0 0 auto; }
    .lp-consent-manage {
      background: none; border: 0; padding: 0; font: inherit;
      color: var(--vault-bright); cursor: pointer; text-decoration: underline;
    }
    @media (max-width: 520px) {
      .lp-consent { padding: 16px; gap: 12px; }
      .lp-consent .acts { width: 100%; }
      .lp-consent .acts .lp-btn { flex: 1; }
    }

    /* faq */
    .lp-faq details {
      background: var(--surface); border: 1px solid var(--line);
      border-radius: var(--r); padding: 14px 18px; margin-bottom: 10px;
    }
    .lp-faq summary { cursor: pointer; font-weight: 600; list-style: none; }
    .lp-faq summary::-webkit-details-marker { display: none; }
    .lp-faq summary::after { content: "+"; float: right; color: var(--muted); font-weight: 400; }
    .lp-faq details[open] summary::after { content: "–"; }
    .lp-faq p { margin: 10px 0 0; color: var(--muted); font-size: .94rem; }

    /* final cta */
    .lp-final {
      background: var(--ink); color: #e8edf2; border-radius: var(--r-xl);
      padding: 46px 40px; text-align: center; position: relative; overflow: hidden;
    }
    .lp-final::after {
      content: ""; position: absolute; right: -100px; bottom: -140px;
      width: 380px; height: 380px; border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, rgba(209,144,35,.22), transparent 62%);
    }
    .lp-final h2 { color: #fff; margin-bottom: 10px; position: relative; z-index: 1; }
    .lp-final p { color: #a8b4c2; margin: 0 auto 24px; max-width: 46ch; position: relative; z-index: 1; }
    .lp-final .lp-btn { position: relative; z-index: 1; }

    /* footer */
    .lp-foot { border-top: 1px solid var(--line); padding: 28px 0 40px; }
    .lp-foot-inner { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
    .lp-foot p { margin: 0; color: var(--faint); font-size: .85rem; }
    .lp-foot nav { display: flex; gap: 18px; font-size: .88rem; }
    .lp-foot-legal {
      margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
      font-size: .8rem; color: var(--faint); line-height: 1.7; max-width: 90ch;
    }

    /* responsive */
    @media (max-width: 900px) {
      .lp-hero-grid, .lp-split { grid-template-columns: 1fr; gap: 34px; }
      .lp-data { grid-template-columns: 1fr; gap: 12px; }
      .lp-grid, .lp-steps { grid-template-columns: repeat(2, 1fr); }
      /* Thin the nav before it crowds the brand, keeping Plans and Contact. */
      .lp-nav { gap: 15px; }
      .lp-nav a[href="#modes"], .lp-nav a[href="#formats"],
      .lp-nav a[href="#limits"] { display: none; }
    }
    @media (max-width: 640px) {
      /* Section links go; Plans, Contact and Sign in stay reachable. */
      .lp-nav a { display: none; }
      .lp-nav a.lp-nav-plans, .lp-nav a.lp-nav-contact,
      .lp-nav a.lp-btn { display: inline-flex; }
      .lp-nav a.lp-nav-contact { font-weight: 600; color: var(--vault); }
      .lp-hero { padding: 44px 0 38px; }
      .lp-sec { padding: 46px 0; }
      .lp-grid, .lp-steps, .lp-form-row { grid-template-columns: 1fr; }
      .lp-cta .lp-btn { flex: 1 1 100%; }
      .lp-final { padding: 34px 22px; border-radius: var(--r-lg); }
      .lp-demo, .lp-notice { padding: 16px; }
    }
    @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
  

    /* ---------------------------------------------------------
       Guide pages only (redact-*.html, extract-*.html).
       --------------------------------------------------------- */
    .lp-crumbs {
      font-size: .84rem; color: var(--faint);
      padding: 18px 0 0; display: flex; gap: 8px; flex-wrap: wrap;
    }
    .lp-crumbs a { color: var(--slate); }
    .lp-crumbs span[aria-current] { color: var(--muted); }

    .lp-guide-hero { padding: 26px 0 46px; }
    .lp-guide-hero h1 {
      font-size: clamp(1.9rem, 4.4vw, 2.7rem); line-height: 1.12;
      letter-spacing: -.03em; margin-bottom: 16px; max-width: 20ch;
    }
    .lp-guide-hero h1 em { font-style: normal; color: var(--ore); }

    .lp-prose { max-width: 68ch; }
    .lp-prose h2 {
      font-size: clamp(1.35rem, 2.8vw, 1.7rem); letter-spacing: -.025em;
      margin: 38px 0 12px;
    }
    .lp-prose h3 { font-size: 1.06rem; margin: 24px 0 8px; }
    .lp-prose p { color: var(--slate); margin: 0 0 14px; }
    .lp-prose ul, .lp-prose ol { margin: 0 0 16px; padding-left: 22px; color: var(--slate); }
    .lp-prose li { margin-bottom: 8px; }
    .lp-prose code {
      font-family: var(--font-mono); font-size: .88em;
      background: var(--surface-2); border: 1px solid var(--line);
      border-radius: 4px; padding: 1px 5px;
    }
    .lp-prose strong { color: var(--ink); }

    .lp-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .lp-related a {
      display: block; padding: 15px 17px; border-radius: var(--r-lg);
      background: var(--surface); border: 1px solid var(--line);
      color: var(--ink); font-weight: 600; font-size: .95rem;
    }
    .lp-related a:hover { border-color: var(--vault); text-decoration: none; }
    .lp-related a span { display: block; font-weight: 400; font-size: .87rem; color: var(--muted); margin-top: 4px; }
    @media (max-width: 900px) { .lp-related { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 640px) { .lp-related { grid-template-columns: 1fr; } }