/* ============================================================
   Redactopia // Frost — landing styles
   Built from the design handoff bundle (Project Frost) on 2026-05-14.
   Self-hosted fonts (no third-party connections).
   ============================================================ */

/* Self-hosted fonts — same files used by the extension's sidepanel/popup. */
@font-face{font-family:'Outfit';src:url('fonts/outfit-variable.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('fonts/space-grotesk-variable.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:'Source Code Pro';src:url('fonts/source-code-pro-variable.woff2') format('woff2');font-weight:200 900;font-style:normal;font-display:swap}

/* ──────────────── BASE STYLES (from index.html) ──────────────── */
  :root {
    --bg: #0a0b0f;
    --bg-soft: #0e1117;
    --panel: #161a22;
    --raised: #1c2029;
    --deep: #222631;
    --border: rgba(255, 255, 255, 0.07);
    --border-strong: rgba(255, 255, 255, 0.12);
    --text: #F1F5F9;
    --soft: #C4CDD8;
    --muted: #94A3B8;
    --teal: #2DD4BF;
    --teal-soft: rgba(45, 212, 191, 0.10);
    --orange: #ff4c00;
    --orange-soft: rgba(255, 76, 0, 0.12);
    --danger: #e01245;
    --danger-soft: rgba(224, 18, 69, 0.12);
    --black: #000000;
    --radius: 14px;
    --radius-sm: 10px;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; background-color: #0a0b0f; scrollbar-gutter: stable; }
  body {
    font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg); color: var(--text); line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
  }
  h1, h2, h3, h4, h5, h6, .logo {
    font-family: "Space Grotesk", "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    letter-spacing: -0.012em;
  }
  .label, .step-num, .sec-num,
  .announcement, .mockup-title, .lbl, .chip-row .chip, .pill,
  .sandbox-head, .footer-col h4 {
    font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
  }
  a { color: inherit; text-decoration: none; }
  .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }

  /* Grain overlay — subtle film texture, pointer-events off so it never blocks interaction */
  body::after {
    content: '';
    position: fixed; inset: 0; z-index: 9000;
    pointer-events: none; opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 250px 250px;
    mix-blend-mode: screen;
  }

  /* Buttons */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 24px; border-radius: 10px; font-weight: 600; font-size: 0.95rem;
    cursor: pointer; transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s, color 0.15s, border-color 0.15s; border: none;
    font-family: inherit;
  }
  .btn-primary { background: var(--orange); color: #080A12; box-shadow: 0 4px 24px rgba(255,76,0,0.18); }
  .btn-primary:hover  { transform: translateY(-2px); box-shadow: 0 8px 36px rgba(255,76,0,0.34); }
  .btn-primary:active { transform: translateY(1px);  box-shadow: 0 1px 8px rgba(255,76,0,0.14); }
  .btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border-strong); }
  .btn-ghost:hover  { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.22); }
  .btn-ghost:active { transform: translateY(0); background: rgba(255,255,255,0.06); }
  .btn-sm { padding: 8px 16px; font-size: 0.85rem; }

  @keyframes pulseDot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(148,163,184,0.5); }
    50% { box-shadow: 0 0 0 6px rgba(148,163,184,0); }
  }
  @keyframes pulseDotTeal {
    0%, 100% { box-shadow: 0 0 0 0 rgba(45,212,191,0.5); }
    50% { box-shadow: 0 0 0 6px rgba(45,212,191,0); }
  }

  .label {
    display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 12px;
  }
  .section { padding: 80px 0; position: relative; z-index: 1; }
  .section-header { text-align: center; max-width: 640px; margin: 0 auto 48px; }
  .section-header h2 { font-size: 2.8rem; font-weight: 700; margin-bottom: 12px; letter-spacing: -0.018em; }
  .section-header p { color: var(--muted); font-size: 1.05rem; }
  .card {
    background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 28px; transition: transform 0.22s cubic-bezier(0.22,1,0.36,1), box-shadow 0.22s cubic-bezier(0.22,1,0.36,1), border-color 0.2s, background 0.2s;
  }
  .card:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0,0,0,0.32); }
  .pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 100px; font-size: 0.78rem; font-weight: 600;
  }
  .pill-warn  { background: var(--danger-soft); color: var(--danger); border: 1px solid rgba(224,18,69,0.25); }
  .pill-safe  { background: rgba(148,163,184,0.10); color: var(--muted); border: 1px solid rgba(148,163,184,0.25); }
  .pill-brand { background: var(--orange-soft); color: var(--orange); border: 1px solid rgba(255,76,0,0.25); }
  .pill-soft  { background: var(--orange-soft); color: var(--orange); border: 1px solid rgba(255,76,0,0.25); }

  /* Announcement */
  .announcement {
    background: var(--bg-soft); border-bottom: 1px solid var(--border);
    text-align: center; padding: 10px 0; font-size: 0.85rem; color: var(--muted);
  }
  .announcement strong { color: var(--text); font-weight: 600; }

  /* Header */
  .header { position: sticky; top: 0; z-index: 100; background: transparent; border-bottom: 1px solid transparent; transition: background 0.25s, border-color 0.25s; }
  .header.is-scrolled { background: rgba(11,13,20,0.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom-color: var(--border); }
  .header .container { display: flex; align-items: center; justify-content: space-between; height: 64px; }
  .logo { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 1.1rem; letter-spacing: -0.01em; }
  .logo small { color: var(--muted); font-weight: 500; font-size: 0.75rem; margin-left: 6px; letter-spacing: 0; }
  .logo-mark {
    width: 32px; height: 32px; border-radius: 8px;
    background: var(--black); border: 1px solid var(--border-strong);
    display: flex; align-items: center; justify-content: center;
    position: relative; flex-shrink: 0;
  }
  .logo-mark svg { width: 18px; height: 18px; }
  .nav { display: flex; align-items: center; gap: 32px; }
  .nav a { font-size: 0.9rem; color: var(--muted); font-weight: 500; transition: color 0.2s; }
  .nav a:hover { color: var(--text); }
  .header-actions { display: flex; align-items: center; gap: 12px; }
  .mobile-toggle { display: none; cursor: pointer; padding: 6px; background: transparent; border: 1px solid var(--border); border-radius: 8px; color: var(--text); line-height: 0; transition: background 0.15s; }
  .mobile-toggle:hover { background: rgba(255,255,255,0.06); }
  .hamburger-icon { display: block; transition: transform 300ms ease-in-out; }
  .hamburger-icon.is-open { transform: rotate(-45deg); }
  .hamburger-path-1 { stroke-dasharray: 12 63; transition: stroke-dasharray 300ms ease-in-out, stroke-dashoffset 300ms ease-in-out; }
  .hamburger-icon.is-open .hamburger-path-1 { stroke-dasharray: 20 300; stroke-dashoffset: -32.42px; }

  /* Hero */
  .hero { padding: 80px 0 100px; position: relative; overflow: hidden; }
  .hero::before { display: none; }
  .hero-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: center; position: relative; z-index: 1; }
  .hero-content h1 { font-size: 4rem; font-weight: 700; line-height: 1.04; margin-bottom: 20px; letter-spacing: -0.028em; }
  .hero-content h1 em { font-style: normal; color: var(--orange); }
  .hero-content p { font-size: 1.15rem; color: var(--soft); margin-bottom: 32px; max-width: 520px; }
  .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

  .hero-visual { position: relative; }
  .mockup-frame {
    background: rgba(28,32,41,0.70); border: 1px solid rgba(255,255,255,0.11); border-radius: var(--radius);
    padding: 24px;
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
  }
  .mockup-header { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
  .dot { width: 10px; height: 10px; border-radius: 50%; }
  .dot-r { background: #E05252; }
  .dot-y { background: #e01245; }
  .dot-g { background: var(--muted); }
  .mockup-title { font-size: 0.8rem; color: var(--muted); margin-left: 8px; font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace; }

  .chat-bubble {
    background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 18px 20px; margin-bottom: 14px; font-size: 0.95rem; position: relative;
  }
  .chat-bubble .highlight {
    background: var(--danger-soft); color: var(--danger); padding: 2px 6px; border-radius: 4px;
    font-weight: 600; border-bottom: 2px solid var(--danger);
  }
  .chat-bubble .redacted {
    display: inline-block; background: var(--black); color: var(--danger);
    padding: 2px 8px; border-radius: 4px; font-weight: 700; font-size: 0.82rem;
    letter-spacing: 0.04em; border: 1px solid rgba(224,18,69,0.3);
  }
  .chat-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
  .chat-meta small { color: var(--muted); font-size: 0.75rem; }

  .warning-bar {
    background: var(--danger-soft); border: 1px solid rgba(224,18,69,0.22);
    border-radius: var(--radius-sm); padding: 14px 18px; margin-bottom: 14px;
    display: flex; align-items: center; gap: 12px;
  }
  .warning-bar .warn-icon {
    width: 28px; height: 28px; border-radius: 6px; background: var(--danger);
    display: flex; align-items: center; justify-content: center; color: #080A12; flex-shrink: 0;
  }
  .warning-bar .warn-icon svg { width: 16px; height: 16px; }
  .warning-bar .warn-text { font-size: 0.9rem; font-weight: 600; color: var(--danger); }
  .warning-bar .warn-sub { font-size: 0.8rem; color: var(--muted); }

  /* Hero two-panel demo */
  .demo-panel { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 10px; overflow: hidden; }
  .demo-panel-hd {
    display: flex; justify-content: space-between; align-items: center;
    padding: 7px 14px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.02);
  }
  .demo-lbl { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-family: "Source Code Pro", ui-monospace, "SF Mono", monospace; }
  .demo-live { display: flex; align-items: center; gap: 5px; font-size: 0.68rem; font-weight: 600; color: var(--teal); font-family: "Source Code Pro", ui-monospace, "SF Mono", monospace; }
  .demo-live .pulse {
    width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
    background: var(--teal);
    box-shadow: 0 0 0 0 rgba(45,212,191,0.5);
    animation: pulseDotTeal 1.8s ease-in-out infinite;
  }
  .demo-panel--matches { border-color: rgba(45,212,191,0.18); }
  .demo-matches-body { padding: 12px 14px; font-size: 0.9rem; line-height: 1.75; overflow-wrap: anywhere; word-break: break-word; }
  .demo-foot { margin-top: 10px; text-align: right; }
  .demo-privacy { font-size: 0.68rem; color: var(--muted); font-family: "Source Code Pro", ui-monospace, "SF Mono", monospace; letter-spacing: 0.04em; }

  .hero-cursor {
    display: inline-block; width: 2px; height: 1em;
    background: var(--text); vertical-align: text-bottom; margin-left: 1px;
    animation: hero-blink 0.9s step-end infinite;
  }
  @keyframes hero-blink { 0%,100%{opacity:1} 50%{opacity:0} }

  .warning-bar--safe {
    background: rgba(148,163,184,0.06); border-color: rgba(148,163,184,0.22);
  }
  .warning-bar--safe .warn-icon { background: var(--muted); }
  .warning-bar--safe .warn-text { color: var(--muted); }

  /* Supported sites */
  .sites-strip { background: #07080c; border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.04); box-shadow: inset 0 8px 24px rgba(0,0,0,0.5), inset 0 -8px 24px rgba(0,0,0,0.5); padding: 40px 0; position: relative; z-index: 1; }
  .sites-grid { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
  .site-pill {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 18px; border-radius: 100px;
    background: var(--panel); border: 1px solid var(--border);
    font-size: 0.9rem; font-weight: 600; color: var(--soft);
    transition: all 0.2s ease;
  }
  .site-pill:hover { border-color: var(--border-strong); background: var(--raised); }
  .site-icon {
    width: 24px; height: 24px; border-radius: 5px;
    background: var(--deep); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.65rem; font-weight: 800;
  }
  .site-pill.is-soon {
    background: transparent; color: var(--muted);
    border: 1px dashed var(--border-strong);
  }
  .sites-note { text-align: center; margin-top: 20px; font-size: 0.8rem; color: var(--muted); }

  /* Hero editable prompt — preserves spaces, wraps long strings, caps height */
  .hero-prompt-input {
    font-size: 0.9rem;
    line-height: 1.75;
    padding: 12px 14px;
    outline: none;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-height: 200px;
    overflow-y: auto;
    resize: none;
    caret-color: var(--text);
  }
  .hero-prompt-input::-webkit-scrollbar { width: 6px; }
  .hero-prompt-input::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
  [data-hero-pills] { min-height: 32px; }

  /* Logo ticker — infinite-scrolling horizontal strip */
  .logo-ticker {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
  }
  .logo-ticker-track {
    display: flex;
    width: max-content;
    align-items: center;
    gap: 64px;
    animation: logo-ticker-scroll 28s linear infinite;
  }
  .logo-ticker:hover .logo-ticker-track { animation-play-state: paused; }
  .logo-ticker-item {
    display: inline-flex; align-items: center; gap: 12px;
    color: var(--muted);
    font-weight: 600; font-size: 1rem;
    letter-spacing: -0.005em;
    flex-shrink: 0;
    transition: color 0.2s;
  }
  .logo-ticker-item:hover { color: var(--text); }
  .logo-ticker-item svg { width: 26px; height: 26px; flex-shrink: 0; transition: color 0.25s; }
  .logo-ticker-item[data-brand="chatgpt"]:hover    { color: #10A37F; }
  .logo-ticker-item[data-brand="claude"]:hover     { color: #D97757; }
  .logo-ticker-item[data-brand="gemini"]:hover     { color: #4796E3; }
  .logo-ticker-item[data-brand="perplexity"]:hover { color: #20B8CD; }
  .logo-ticker-item[data-brand="poe"]:hover        { color: #5D5CDE; }
  @keyframes logo-ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% - 32px)); }
  }
  @media (prefers-reduced-motion: reduce) {
    .logo-ticker-track { animation: none; justify-content: center; flex-wrap: wrap; gap: 32px; }
  }

  /* Advantage */
  .advantage { padding: 60px 0; }
  .advantage-card {
    background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 48px; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center;
    transition: transform 0.22s cubic-bezier(0.22,1,0.36,1), box-shadow 0.22s cubic-bezier(0.22,1,0.36,1), border-color 0.2s;
  }
  .advantage-card:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: 0 14px 48px rgba(0,0,0,0.34); }
  .advantage-card h3 { font-size: 2rem; font-weight: 700; margin-bottom: 12px; letter-spacing: -0.018em; }
  .advantage-card p { color: var(--soft); font-size: 1.05rem; margin-bottom: 20px; max-width: 560px; }
  .advantage-link { color: var(--orange); font-weight: 600; font-size: 0.95rem; display: inline-flex; align-items: center; gap: 6px; }
  .advantage-link:hover { text-decoration: underline; }
  .advantage-visual {
    width: 240px; height: 240px; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,76,0,0.10), transparent 70%);
    border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
    position: relative; flex-shrink: 0; overflow: hidden;
  }
  /* Orbital rings around the shield */
  .orbit-ring {
    position: absolute; border-radius: 50%; pointer-events: none;
  }
  .orbit-ring--outer {
    width: 220px; height: 220px;
    border: 1px solid rgba(255, 76, 0, 0.12);
    animation: spinReverse 60s linear infinite;
  }
  @keyframes spinReverse { to { transform: rotate(-360deg); } }

  /* Sonar pulse — two staggered rings emanating from shield.
     Toned down from the original 3-pulse arrangement so the advantage card
     reads as "quiet vigilance" rather than "active radar." */
  .sonar-pulse {
    position: absolute; width: 140px; height: 140px; border-radius: 50%;
    border: 1px solid rgba(255, 76, 0, 0.25);
    animation: sonarPulse 5.2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
    opacity: 0; pointer-events: none;
  }
  .sonar-pulse:nth-of-type(2) { animation-delay: 2.6s; }
  @keyframes sonarPulse {
    0%   { transform: scale(0.7); opacity: 0; border-color: rgba(255, 76, 0, 0.32); }
    15%  { opacity: 0.45; }
    100% { transform: scale(1.55); opacity: 0; border-color: rgba(255, 76, 0, 0.0); }
  }

  /* Shield — no badge, just centered SVG */
  .shield-icon {
    position: relative; z-index: 2;
    display: flex; align-items: center; justify-content: center;
  }
  .shield-icon svg {
    width: 140px; height: 140px; display: block;
    filter: drop-shadow(0 12px 32px rgba(255, 76, 0, 0.22));
  }

  /* Stage wraps the visual + status label */
  .advantage-stage {
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    flex-shrink: 0;
  }

  /* Status label below the shield — quiet HUD detail */
  .advantage-status {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--muted);
    padding: 6px 14px; border-radius: 100px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--border);
  }
  .advantage-status-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--teal);
    box-shadow: 0 0 0 0 rgba(45,212,191,0.5);
    animation: pulseDotTeal 2.4s ease-in-out infinite;
  }

  @media (prefers-reduced-motion: reduce) {
    .orbit-ring, .sonar-pulse, .advantage-status-dot, .demo-live .pulse { animation: none !important; }
    .sonar-pulse { display: none; }
  }

  /* Pipeline (How it works) */
  /* ── How it works — annotated pipeline mockup.
     Replaces the old 4-card grid. One composite artifact (composer + warning
     panel) sits on the left; three numbered callouts annotate it from the
     right. An SVG overlay draws hairline connectors between callout numerals
     and their targets in the artifact. Scaled-down sibling of the Promises
     numeral system — same family, lighter weight. */
  .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .pipeline-flow {
    margin-top: 36px;
  }
  .pipeline-figure {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 64px;
    align-items: center;
    margin: 0;
    padding: 0;
  }

  /* The annotated artifact */
  .pipeline-stage {
    position: relative;
    display: grid;
    gap: 14px;
    padding: 8px;
  }
  .pipeline-composer {
    background: var(--panel);
    border: 1px solid var(--border-strong, var(--border));
    border-radius: 12px;
    position: relative;
    z-index: 2;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  }
  /* Warning panel — visibly different surface from the composer so it reads
     as Redactopia stepping in, not as a sibling card stacked below. Darker
     fill, deeper directional shadow (more z-displacement), a "By Redactopia"
     mini-mark in the head row. */
  .pipeline-warning {
    background: var(--deep);
    border: 1px solid var(--border-strong, var(--border));
    border-radius: 12px;
    position: relative;
    z-index: 3;
    box-shadow: 0 18px 40px -10px rgba(0, 0, 0, 0.5), 0 2px 0 rgba(255, 76, 0, 0.08) inset;
  }
  .pipeline-composer-head,
  .pipeline-warning-head {
    padding: 12px 16px 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--border);
  }
  .pipeline-composer-eyebrow {
    font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .pipeline-composer-body {
    padding: 16px;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--soft);
    min-height: 84px;
    position: relative;
  }
  .pipeline-caret {
    display: inline-block;
    width: 2px;
    height: 1.05em;
    background: var(--orange);
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: pipelineCaret 1s steps(2) infinite;
  }
  .pipeline-flag {
    background: rgba(224, 18, 69, 0.16);
    color: var(--text);
    padding: 2px 6px;
    border-radius: 4px;
    border-bottom: 1px dashed var(--danger);
    font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.9em;
  }
  .pipeline-flag--soft {
    background: rgba(224, 18, 69, 0.10);
  }

  /* Warning panel head row — bullet + title on left, Redactopia mark on right */
  .pipeline-warning-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--danger);
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
  }
  .pipeline-warning-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--danger);
    box-shadow: 0 0 10px var(--danger);
    flex-shrink: 0;
  }
  .pipeline-warning-title { flex: 1; }
  .pipeline-warning-actions {
    display: flex;
    gap: 10px;
    padding: 14px 16px;
  }
  .pipeline-btn {
    padding: 7px 14px;
    border-radius: 7px;
    font-size: 0.82rem;
    font-weight: 600;
    border: 1px solid var(--border-strong, var(--border));
    color: var(--soft);
    background: rgba(255, 255, 255, 0.02);
  }
  .pipeline-btn--primary {
    background: var(--orange);
    color: #04101A;
    border-color: var(--orange);
  }

  /* Callout list */
  .pipeline-callouts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 36px;
    align-content: center;
  }
  .pipeline-callout {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 18px;
    align-items: start;
  }
  .pipeline-callout-num {
    font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
    font-weight: 700;
    font-size: 3.4rem;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--muted);
    opacity: 0.9;
    font-variant-numeric: tabular-nums;
    padding-top: 2px;
  }
  .pipeline-callout-body { min-width: 0; }
  .pipeline-callout-title {
    font-family: "Space Grotesk", "Outfit", sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.005em;
    color: var(--text);
    margin: 0 0 6px;
  }
  .pipeline-callout-body p {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--soft);
    margin: 0;
    max-width: 38ch;
  }

  @keyframes pipelineCaret { 50% { opacity: 0; } }

  /* Feature rows */
  .feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin-bottom: 100px; }
  .feature-row:last-child { margin-bottom: 0; }
  .feature-row.reverse { direction: rtl; }
  .feature-row.reverse > * { direction: ltr; }
  .feature-text h3 { font-size: 2.5rem; font-weight: 700; margin-bottom: 16px; letter-spacing: -0.018em; }
  .feature-text ul { list-style: none; }
  .feature-text li {
    display: block; position: relative;
    padding-left: 32px; margin-bottom: 14px;
    color: var(--soft); font-size: 1rem;
  }
  .feature-text li::before {
    content: ''; position: absolute; left: 0; top: 4px;
    width: 20px; height: 20px; border-radius: 50%;
    background: rgba(148,163,184,0.10); border: 1px solid rgba(148,163,184,0.3);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff4c00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 12 10 17 19 8'/></svg>");
    background-repeat: no-repeat; background-position: center; background-size: 12px;
  }
  .feature-visual { position: relative; }
  .feature-mockup {
    background: rgba(28,32,41,0.70); border: 1px solid rgba(255,255,255,0.11); border-radius: var(--radius);
    padding: 28px;
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
  }

  /* Detection grid */
  .detect-wrap {
    background: var(--panel);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  }
  .detect-legend,
  .detect-row {
    display: grid;
    grid-template-columns: 28px minmax(155px,0.65fr) 1fr minmax(190px,0.8fr);
    column-gap: 20px;
    padding: 0 20px;
  }
  .detect-legend {
    align-items: center;
    padding-top: 11px;
    padding-bottom: 11px;
    background: rgba(255,76,0,0.04);
    border-bottom: 1px solid rgba(255,76,0,0.13);
  }
  .detect-legend > span {
    font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--soft);
  }
  .detect-legend__ex {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
  }
  .detect-sev-key { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
  .detect-sev-key__item { display: flex; align-items: center; gap: 5px; }
  .detect-sev-key__dot {
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  }
  .detect-sev-key__dot--high { background: #e01245; }
  .detect-sev-key__dot--std  { background: rgba(255,76,0,0.55); }
  .detect-sev-key__label {
    font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.63rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  }
  .detect-row {
    align-items: center;
    padding-top: 13px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s ease;
  }
  .detect-body .detect-row:last-child { border-bottom: 0; }
  .detect-row:hover { background: rgba(255,76,0,0.055); }
  .detect-row-content { display: contents; }
  .detect-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; justify-self: center;
    transition: box-shadow 0.15s ease, background 0.15s ease;
  }
  .detect-row--high .detect-dot { background: rgba(224,18,69,0.85); }
  .detect-row--std  .detect-dot { background: rgba(255,76,0,0.4); }
  .detect-row--high:hover .detect-dot { box-shadow: 0 0 7px rgba(224,18,69,0.65); }
  .detect-row--std:hover  .detect-dot { background: rgba(255,76,0,0.75); box-shadow: 0 0 7px rgba(255,76,0,0.5); }
  .detect-cat-name {
    font-family: "Space Grotesk", "Outfit", ui-sans-serif, sans-serif;
    font-size: 0.925rem; font-weight: 600; color: var(--text);
    letter-spacing: -0.01em; line-height: 1.3;
  }
  .detect-meth {
    font-size: 0.895rem; color: var(--soft); line-height: 1.45;
  }
  .detect-ex {
    display: inline-block;
    font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.78rem; color: #ADCAF5;
    background: rgba(10,11,15,0.65);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 5px; padding: 3px 9px; line-height: 1.55;
    max-width: 100%; word-break: break-word;
    transition: color 0.15s ease, background 0.15s ease;
  }
  .detect-row:hover .detect-ex { color: #c5d8ff; background: rgba(14,17,24,0.85); }

  .detection-free-note {
    margin-top: 20px;
    text-align: center;
    font-size: 0.875rem;
    color: var(--muted);
    line-height: 1.6;
  }
  .detection-free-note strong {
    color: var(--orange);
    font-weight: 500;
  }

  /* Live sandbox */
  .sandbox-frame {
    background: rgba(28,32,41,0.70); border: 1px solid rgba(255,255,255,0.11); border-radius: var(--radius);
    padding: 24px;
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
  }
  .sandbox-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .sandbox-pane {
    background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-sm);
    overflow: hidden; display: flex; flex-direction: column; min-height: 240px;
  }
  .sandbox-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-bottom: 1px solid var(--border);
    font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--muted); font-weight: 700;
  }
  .sandbox-head .live { color: var(--muted); }
  .sandbox-head .live::before {
    content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--muted); margin-right: 6px; vertical-align: 1px;
    animation: pulseDot 1.8s ease-in-out infinite;
  }
  .sandbox-body {
    padding: 16px 18px; font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.88rem; line-height: 1.65; color: var(--soft);
    white-space: pre-wrap; word-break: break-word; flex: 1;
  }
  textarea.sandbox-body {
    width: 100%; min-height: 200px; background: transparent;
    border: 0; outline: 0; resize: none; color: var(--text);
    font-family: inherit; font-size: inherit; line-height: inherit;
  }
  mark.flag {
    background: var(--danger-soft); color: var(--danger); padding: 1px 5px; border-radius: 3px;
    font-weight: 600; border-bottom: 1px solid rgba(224,18,69,0.5);
  }
  .lbl {
    display: inline-block; margin-left: 4px;
    font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--muted); padding: 1px 5px; background: var(--deep);
    border: 1px solid var(--border); border-radius: 3px; vertical-align: 1px;
    font-family: "Source Code Pro", ui-monospace, monospace; font-weight: 700;
  }
  .sandbox-meta {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 8px; margin-top: 14px; font-size: 0.78rem;
    color: var(--muted); font-family: "Source Code Pro", ui-monospace, monospace; letter-spacing: 0.04em;
  }
  .chip-row { display: inline-flex; flex-wrap: wrap; gap: 6px; }
  .chip-row .chip {
    font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 2px 8px; background: var(--deep); border: 1px solid var(--border);
    border-radius: 3px; color: var(--soft); font-weight: 600;
  }
  .chip-row .chip.empty { opacity: 0.55; }

  /* ── "Four promises" — typographic manifest replacing the old card grid.
     Asymmetric: first promise is a full-width hero row with a static teal pill;
     the remaining three sit in a 2-column rhythm separated by hairlines.
     Leading numerals (Source Code Pro, oversize) carry the visual hierarchy
     — no icons, no card surfaces, content sits directly on the section bg. */
  .promises-head {
    max-width: 780px;
    margin: 0 0 56px;
  }
  .promises-eyebrow {
    display: inline-block;
    font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 18px;
  }
  .promises-head h2 {
    font-family: "Space Grotesk", "Outfit", sans-serif;
    font-size: clamp(2.4rem, 4.8vw, 4.2rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.025em;
    color: var(--text);
    margin: 0;
  }
  .promises-head-em { color: var(--orange); }

  /* 4-column card strip (Option A) */
  .promises-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  .promise-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px 20px;
    transition: transform 0.22s cubic-bezier(0.22,1,0.36,1), box-shadow 0.22s cubic-bezier(0.22,1,0.36,1), border-color 0.2s;
  }
  .promise-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.32);
  }
  .promise-num {
    font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: 14px;
    display: block;
  }
  .promise-name {
    font-family: "Space Grotesk", "Outfit", sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
    line-height: 1.2;
  }
  .promise-copy {
    font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--muted);
    margin: 0;
  }
  /* "Active by default" pill on promise 01 */
  .promise-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 3px 10px 3px 8px;
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 999px;
    font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .promise-pill .pulse {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--muted);
  }

  /* Privacy teaser — small hush moment between the Promises (editorial) and
     the FAQ (interactive). Centered single block; routes compliance-minded
     readers to privacy.html for the full policy. */
  .privacy-teaser {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
  }
  .privacy-teaser h2 {
    font-family: "Space Grotesk", "Outfit", sans-serif;
    font-size: clamp(1.9rem, 3.2vw, 2.6rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--text);
    margin: 0 0 16px;
  }
  .privacy-teaser p {
    font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--soft);
    margin: 0 0 24px;
  }

  /* FAQ — custom accordion, not native <details>. The native element snaps
     content visibility around the [open] attribute, which can't be animated
     reliably. Custom button+div lets the JS measure heights and animate
     them explicitly. Hover shadow is on a pseudo to keep box-shadow static
     (animating box-shadow paints every frame and stalls scroll). */
  .faq-wrap { max-width: 760px; margin: 0 auto; }
  .faq {
    background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 18px 22px; margin-bottom: 12px;
    position: relative;
    transition: transform 0.22s cubic-bezier(0.22,1,0.36,1), border-color 0.2s;
  }
  .faq::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 8px 28px rgba(0,0,0,0.28);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s cubic-bezier(0.22,1,0.36,1);
    z-index: -1;
  }
  .faq:not(.is-open):hover { transform: translateY(-1px); border-color: var(--border-strong); }
  .faq:not(.is-open):hover::before { opacity: 1; }
  .faq.is-open { border-color: rgba(148,163,184,0.28); }
  .faq-q {
    cursor: pointer; width: 100%; text-align: left;
    background: none; border: none; padding: 0; color: inherit; font: inherit;
    font-weight: 600; font-size: 1rem;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
  }
  .faq-q::after {
    content: '+'; color: var(--muted); font-size: 1.4rem; font-weight: 300;
    line-height: 1; flex-shrink: 0; transition: color 0.2s;
  }
  .faq-q:hover::after { color: var(--text); }
  .faq.is-open .faq-q::after { content: '−'; color: var(--muted); }
  .faq-a {
    height: 0;
    overflow: hidden;
    transition: height 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .faq-a p { color: var(--soft); font-size: 0.95rem; margin-top: 12px; }

  /* CTA Banner */
  .cta-banner {
    background: var(--raised); border: 1px solid rgba(255,76,0,0.18); border-radius: var(--radius); padding: 28px 36px;
    display: flex; align-items: center; justify-content: space-between; gap: 32px;
    position: relative; overflow: hidden; margin: 40px 0;
  }
  .cta-banner::before {
    content: ''; position: absolute; top: -50%; left: -20%; width: 140%; height: 200%;
    background: radial-gradient(circle at 60% 50%, rgba(255,76,0,0.05) 0%, transparent 65%);
    pointer-events: none;
  }
  .cta-text { position: relative; }
  .cta-banner h2 { font-size: 1.45rem; font-weight: 700; margin-bottom: 4px; position: relative; letter-spacing: -0.01em; }
  .cta-banner p { font-size: 0.9rem; color: var(--soft); margin-bottom: 0; position: relative; }
  /* CTA banner action column — primary mailto button + pre-release status line */
  .cta-action {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    flex-shrink: 0;
  }
  .cta-action .btn-primary { white-space: nowrap; }
  .launch-status {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--muted);
  }
  /* CTA banner status dot — static.
     "Pre-release" is a declarative state, not a live signal. */
  .launch-status__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--muted);
    flex-shrink: 0;
  }

  /* Nav CTA — smaller, less prominent than hero/banner CTAs.
     Header is chrome; the primary conversion should still land in the hero. */
  /* Nav CTA — ghost variant. Header is chrome; the hero owns the primary
     conversion site, so the nav button stays quiet (transparent + border)
     instead of competing for attention with a filled-blue treatment. */
  .nav-cta {
    border: 1px solid rgba(255, 76, 0, 0.28);
  }
  .nav-cta:hover {
    border-color: rgba(255, 76, 0, 0.48);
  }

  /* Footer */
  .footer { border-top: 0; padding: 36px 0 30px; position: relative; z-index: 1; background: #07080c; }
  .footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(255,76,0,0.45) 50%, transparent 100%); pointer-events: none; }
  .footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 40px; }
  .footer-brand p { color: var(--muted); font-size: 0.9rem; margin-top: 12px; max-width: 320px; }
  .footer-col h4 { font-size: 0.78rem; font-weight: 700; color: var(--text); margin-bottom: 16px; letter-spacing: 0.12em; text-transform: uppercase; }
  .footer-col a { display: block; color: var(--muted); font-size: 0.9rem; margin-bottom: 10px; transition: color 0.2s; }
  .footer-col a:hover { color: var(--orange); }
  .footer-bottom {
    border-top: 1px solid var(--border); margin-top: 40px; padding-top: 24px;
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    font-size: 0.8rem; color: var(--muted); flex-wrap: wrap;
  }

  /* Minimal styled fallback used only when the footer JS injector hasn't run
     (no-JS browsers, JS disabled, blocked by extensions). Lives inside the
     same .footer container so it inherits its padding + top hairline rule. */
  .footer-noscript { max-width: 1200px; margin: 0 auto; padding: 0 24px; text-align: center; color: var(--muted); font-size: 0.9rem; }
  .footer-noscript strong { color: var(--text); font-size: 1.05rem; letter-spacing: 0.02em; }
  .footer-noscript nav { margin-top: 14px; display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
  .footer-noscript nav a { color: var(--muted); text-decoration: none; }
  .footer-noscript nav a:hover { color: var(--orange); }
  .footer-noscript p { margin-top: 14px; font-size: 0.78rem; color: var(--muted); }

  /* Mobile menu drawer */
  .mobile-drawer {
    display: none; position: fixed; top: 64px; left: 0; right: 0; bottom: 0;
    background: rgba(11,13,20,0.97); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    flex-direction: column; padding: 24px; z-index: 99; overflow-y: auto;
  }
  .mobile-drawer a {
    display: block; padding: 14px 0; color: var(--soft); font-size: 1rem; font-weight: 500;
    border-bottom: 1px solid var(--border); transition: color 0.15s;
  }
  .mobile-drawer a:hover { color: var(--text); }
  .mobile-drawer a:last-of-type { border-bottom: 0; }
  .mobile-drawer.is-open { display: flex; animation: drawer-in 0.2s ease-out; }
  @keyframes drawer-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }

  /* Responsive */
  @media (max-width: 1024px) {
    .hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .hero-content h1 { font-size: 3rem; }
    .feature-row { grid-template-columns: 1fr; gap: 40px; }
    .feature-row.reverse { direction: ltr; }
    .advantage-card { grid-template-columns: 1fr; text-align: center; }
    .advantage-card p { margin-left: auto; margin-right: auto; }
    .advantage-visual { margin: 0 auto; }
    .feature-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .pipeline-figure { grid-template-columns: 1fr; gap: 32px; }
    .pipeline-callouts { gap: 24px; }
    .sandbox-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 768px) {
    .nav { display: none; }
    .mobile-toggle { display: flex; }
    .hero-content h1 { font-size: 2.3rem; }
    .feature-grid { grid-template-columns: 1fr; }
    /* Promises: 2-up on tablet */
    .promises-grid { grid-template-columns: 1fr 1fr; }
    .promises-head { margin-bottom: 36px; }
    .promises-head h2 br { display: none; }
    .promises-head-em::before { content: ' '; }
    .footer-grid { grid-template-columns: 1fr; gap: 32px; }
    .section { padding: 60px 0; }
    .cta-banner { padding: 28px 24px; flex-direction: column; text-align: center; gap: 20px; }
    .cta-banner h2 { font-size: 1.3rem; }
    .cta-banner p { font-size: 0.88rem; }
    .cta-action { align-items: center; gap: 12px; }
    a.nav-cta { display: none; }
    /* Pipeline already collapses to 1-col at 1024; here just tighten spacing */
    .pipeline-callout-num { font-size: 2.4rem; }
    .pipeline-callout-title { font-size: 1rem; }
    .advantage-card { padding: 32px 24px; }
    .detect-legend, .detect-row { padding-left: 16px; padding-right: 16px; column-gap: 14px; }
    .detect-cat-name { font-size: 0.875rem; }
    .detect-meth { font-size: 0.85rem; }
    .detect-ex { font-size: 0.73rem; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
  }
  @media (max-width: 480px) {
    .header .container { height: 56px; }
    .container { padding: 0 18px; }
    .hero { padding: 40px 0 60px; }
    .hero-content h1 { font-size: 2rem; }
    .hero-content p { font-size: 1rem; }
    .section-header h2 { font-size: 1.9rem; }
    .feature-text h3 { font-size: 1.75rem; }
    .advantage-card h3 { font-size: 1.5rem; }
    .cta-banner h2 { font-size: 1.2rem; }
    .mobile-drawer { top: 56px; }
    .hero-actions { width: 100%; }
    .hero-actions .btn { width: 100%; }
    .mockup-frame, .feature-mockup, .sandbox-frame, .advantage-card { padding: 18px; }
    .advantage-card { padding: 28px 18px; }
    /* Promises: single column on small phones */
    .promises-grid { grid-template-columns: 1fr; }
    .detect-legend { display: none; }
    .detect-row {
      display: grid;
      grid-template-columns: 14px 1fr auto;
      grid-template-rows: auto auto;
      column-gap: 10px;
      row-gap: 3px;
      padding: 12px 18px;
      align-items: start;
    }
    .detect-row-content { display: contents; }
    .detect-dot { grid-column: 1; grid-row: 1 / 3; margin-top: 5px; }
    .detect-cat-name { grid-column: 2; grid-row: 1; font-size: 0.9rem; }
    .detect-meth { grid-column: 2; grid-row: 2; font-size: 0.79rem; color: var(--muted); margin-top: 1px; }
    .detect-ex {
      grid-column: 3; grid-row: 1; align-self: center;
      font-size: 0.68rem; padding: 2px 7px;
      max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      margin-top: 0;
    }
  }

/* ──────────────── PRIVACY-SPECIFIC ADDITIONS (from privacy.html) ──────────────── */
  :root {
    --bg: #0a0b0f; --bg-soft: #0e1117; --panel: #161a22; --raised: #1c2029;
    --deep: #222631; --border: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.14);
    --text: #F4F7FB; --soft: #C8D0E0; --muted: #9EA7B8;
    --orange: #ff4c00; --orange-soft: rgba(255,76,0,0.14);
    --danger: #e01245; --danger-soft: rgba(224,18,69,0.12);
    --black: #080A12;
    --radius: 14px; --radius-sm: 10px;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg); color: var(--text); line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, h4, h5, h6, .logo {
    font-family: "Space Grotesk", "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    letter-spacing: -0.012em;
  }
  .sec-num, .announcement, .doc-hero .eyebrow, .doc-hero .meta, .footer-col h4 {
    font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
  }
  a { color: inherit; text-decoration: none; }
  .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
  .wrap-prose { max-width: 760px; margin: 0 auto; }

  .announcement {
    background: var(--bg-soft); border-bottom: 1px solid var(--border);
    text-align: center; padding: 10px 0; font-size: 0.85rem; color: var(--muted);
  }
  .announcement strong { color: var(--text); font-weight: 600; }

  .header { position: sticky; top: 0; z-index: 100; background: transparent; border-bottom: 1px solid transparent; transition: background 0.25s, border-color 0.25s; }
  .header.is-scrolled { background: rgba(11,13,20,0.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom-color: var(--border); }
  .header .container { display: flex; align-items: center; justify-content: space-between; height: 64px; }
  .logo { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 1.1rem; letter-spacing: -0.01em; }
  .logo small { color: var(--muted); font-weight: 500; font-size: 0.75rem; margin-left: 6px; letter-spacing: 0; }
  .logo-mark { width: 32px; height: 32px; border-radius: 8px; background: var(--black); border: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .logo-mark svg { width: 18px; height: 18px; }
  .nav { display: flex; align-items: center; gap: 32px; }
  .nav a { font-size: 0.9rem; color: var(--muted); font-weight: 500; transition: color 0.2s; }
  .nav a:hover, .nav a.is-here { color: var(--text); }
  .header-actions { display: flex; align-items: center; gap: 12px; }
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border-radius: 10px; font-weight: 600; font-size: 0.95rem; cursor: pointer; border: none; font-family: inherit; }
  .btn-sm { padding: 8px 16px; font-size: 0.85rem; }
  @keyframes pulseDot { 0%,100% { box-shadow: 0 0 0 0 rgba(148,163,184,0.5); } 50% { box-shadow: 0 0 0 6px rgba(148,163,184,0); } }
  .mobile-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
  .mobile-toggle:hover { background: rgba(255,255,255,0.06); }
  .hamburger-icon { display: block; transition: transform 300ms ease-in-out; }
  .hamburger-icon.is-open { transform: rotate(-45deg); }
  .hamburger-path-1 { stroke-dasharray: 12 63; transition: stroke-dasharray 300ms ease-in-out, stroke-dashoffset 300ms ease-in-out; }
  .hamburger-icon.is-open .hamburger-path-1 { stroke-dasharray: 20 300; stroke-dashoffset: -32.42px; }
  .mobile-drawer { display: none; position: fixed; top: 64px; left: 0; right: 0; bottom: 0; background: rgba(11,13,20,0.97); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); flex-direction: column; padding: 24px; z-index: 99; overflow-y: auto; }
  .mobile-drawer a { display: block; padding: 14px 0; color: var(--soft); font-size: 1rem; font-weight: 500; border-bottom: 1px solid var(--border); transition: color 0.15s; }
  .mobile-drawer a:hover { color: var(--text); }
  .mobile-drawer a:last-of-type { border-bottom: 0; }
  .mobile-drawer.is-open { display: flex; animation: drawer-in 0.2s ease-out; }
  @keyframes drawer-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }

  /* Hero */
  .doc-hero { padding: 80px 0 64px; border-bottom: 1px solid var(--border); }
  .doc-hero .eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px; border-radius: 999px; background: var(--panel); border: 1px solid var(--border-strong); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; color: var(--soft); margin-bottom: 20px; }
  .doc-hero .eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: pulseDot 2.2s ease-in-out infinite; }
  .doc-hero h1 { font-size: 3.8rem; font-weight: 800; line-height: 1.04; letter-spacing: -0.026em; margin-bottom: 18px; }
  .doc-hero h1 em { font-style: normal; color: var(--orange); }
  .doc-hero .lede { font-size: 1.15rem; color: var(--soft); max-width: 56ch; }
  .doc-hero .lede + .lede { margin-top: 12px; }
  .doc-hero .meta { margin-top: 24px; font-size: 0.85rem; color: var(--muted); font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.04em; }

  .privacy-glance {
    background: var(--panel);
    border: 1px solid rgba(255, 76, 0, 0.18);
    border-radius: 10px;
    padding: 20px 24px;
    margin: 24px 0 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .privacy-glance-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.9rem;
    color: var(--soft);
    line-height: 1.55;
  }
  .privacy-glance-item strong {
    color: var(--text);
    font-weight: 500;
  }
  .privacy-glance-check {
    color: var(--orange);
    font-weight: 600;
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 1px;
  }
  .privacy-hero-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 56px;
    align-items: center;
  }
  .privacy-hero-layout .privacy-glance { margin: 0; }
  @media (max-width: 768px) {
    .privacy-hero-layout { grid-template-columns: 1fr; gap: 28px; }
  }

  /* Doc sections */
  .doc-body { padding: 64px 0; }
  .doc-section { padding: 48px 0; border-top: 1px solid var(--border); }
  .doc-section:first-child { border-top: 0; padding-top: 0; }
  .sec-num { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--muted); display: block; margin-bottom: 12px; font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace; }
  .doc-section h2 { font-size: 2.1rem; font-weight: 700; letter-spacing: -0.016em; margin-bottom: 16px; }
  .doc-section p { color: var(--soft); font-size: 1rem; margin-bottom: 14px; max-width: 64ch; }
  .doc-section p:last-child { margin-bottom: 0; }
  .doc-section strong { color: var(--text); font-weight: 600; }
  .doc-section a.inline { color: var(--text); border-bottom: 1px solid rgba(255,255,255,0.25); padding-bottom: 1px; transition: border-color 0.2s; }
  .doc-section a.inline:hover { border-bottom-color: var(--orange); }
  .doc-section code { font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.88em; font-weight: 500; color: var(--orange); background: rgba(255,76,0,0.08); border: 1px solid rgba(255,76,0,0.22); padding: 2px 7px; border-radius: 5px; white-space: nowrap; }

  /* Tables */
  .doc-table-wrap + p { margin-top: 24px; }
  .doc-table-wrap { background: var(--panel); border: 1px solid var(--border-strong, var(--border)); border-radius: var(--radius); overflow: hidden; margin-top: 18px; box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset, 0 8px 24px rgba(0,0,0,0.18); }
  table.doc-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
  table.doc-table thead th { background: rgba(255,255,255,0.04); text-align: left; padding: 14px 20px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text); border-bottom: 1px solid var(--border-strong, var(--border)); }
  table.doc-table thead th + th { border-left: 1px solid var(--border); }
  table.doc-table td { padding: 14px 20px; border-bottom: 1px solid var(--border); color: var(--soft); vertical-align: top; line-height: 1.5; }
  table.doc-table td + td { border-left: 1px solid var(--border); }
  table.doc-table tbody tr:nth-child(even) td { background: rgba(255,255,255,0.018); }
  table.doc-table tbody tr:hover td { background: rgba(255,76,0,0.04); }
  table.doc-table tr:last-child td { border-bottom: 0; }
  table.doc-table td.cat { color: var(--text); font-weight: 600; width: 24%; }
  table.doc-table td.no { width: 22%; font-family: "Source Code Pro", ui-monospace, monospace; font-size: 0.74rem; color: var(--danger); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; white-space: nowrap; }
  table.doc-table thead th { vertical-align: middle; }
  table.doc-table code { white-space: nowrap; }

  /* Browser support table — narrow centered Chrome / Edge columns */
  table.doc-table th.col-browser, table.doc-table td.cell-yes, table.doc-table td.cell-no { width: 12%; text-align: center; }
  table.doc-table td.cell-yes { color: var(--muted); font-weight: 700; font-size: 1.1rem; }
  table.doc-table td.cell-no { color: var(--muted); font-weight: 700; font-size: 1.1rem; }
  table.doc-table.doc-table-support td.cat { width: 24%; }

  /* Bullet list */
  ul.spare { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; max-width: 64ch; }
  ul.spare li { padding-left: 22px; position: relative; line-height: 1.6; color: var(--soft); font-size: 1rem; }
  ul.spare li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 8px; height: 1px; background: var(--muted); }
  ul.spare li strong { color: var(--text); font-weight: 600; }

  /* Numbered variant. MUST be explicitly styled: a bare <ol class="spare"> falls
     back to default outside markers with no padding, which on iOS Safari render
     OUTSIDE the left edge and get counted in the scroll width → horizontal page
     stretch. Inside counter markers keep everything inside the box. */
  ol.spare { list-style: none; counter-reset: spare; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; max-width: 64ch; }
  ol.spare li { counter-increment: spare; padding-left: 26px; position: relative; line-height: 1.6; color: var(--soft); font-size: 1rem; }
  ol.spare li::before { content: counter(spare) "."; position: absolute; left: 0; top: 0; color: var(--orange); font-weight: 700; font-variant-numeric: tabular-nums; }
  ol.spare li strong { color: var(--text); font-weight: 600; }

  /* Permission chip row */
  .perm-deny { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .perm-deny li {
    font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.86rem; color: var(--soft);
    padding: 7px 12px; background: var(--panel); border: 1px solid var(--border);
    border-radius: 8px; font-weight: 500;
  }

  /* Sites grid */
  .sites-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 18px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
  .sites-grid .s { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: var(--panel); font-size: 0.95rem; }
  .sites-grid .s b { color: var(--text); font-weight: 600; }
  .sites-grid .s span { color: var(--muted); font: 400 0.82rem/1 "Source Code Pro", ui-monospace, monospace; }

  /* Footer */
  .footer { border-top: 0; padding: 36px 0 30px; position: relative; background: #07080c; }
  .footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(255,76,0,0.45) 50%, transparent 100%); pointer-events: none; }
  .footer-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; }
  .footer-bottom-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
  .footer-brand-slim { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-weight: 600; font-size: 0.95rem; letter-spacing: -0.005em; }
  .footer-brand-slim .logo-word { color: var(--text); }
  .footer-mark { width: 35px; height: 35px; display: inline-flex; align-items: center; justify-content: center; }
  .footer-mark svg { width: 100%; height: 100%; }
  .footer-copyright { display: flex; flex-direction: column; gap: 4px; font-size: 0.88rem; color: var(--muted); line-height: 1.4; }
  .footer-version { font-family: "Source Code Pro", ui-monospace, monospace; font-size: 0.72rem; letter-spacing: 0.03em; opacity: 0.8; margin-top: 2px; }
  .footer-nav { display: flex; gap: 32px; flex-wrap: wrap; row-gap: 10px; }
  .footer-nav a { color: var(--muted); font-size: 0.88rem; transition: color 0.2s; }
  .footer-nav a:hover, .footer-nav a.is-here { color: var(--orange); }
  .footer-nav-mailto { word-break: break-all; }
  .footer-social { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: var(--muted); transition: color 0.2s; }
  .footer-social:hover { color: var(--orange); }
  .footer-social svg { width: 18px; height: 18px; }

  /* Footer — center the stacked layout on phones (desktop uses brand-left / links-right) */
  @media (max-width: 560px) {
    .footer-top { flex-direction: column; gap: 18px; }
    .footer-bottom-row { flex-direction: column; align-items: center; text-align: center; gap: 22px; }
    .footer-copyright { align-items: center; }
    .footer-nav { justify-content: center; }
  }

  /* Responsive */
  @media (max-width: 1024px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 768px) {
    .nav { display: none; }
    .mobile-toggle { display: flex; }
    .doc-hero { padding: 48px 0 40px; }
    .doc-hero h1 { font-size: 2.4rem; }
    .doc-hero .lede { font-size: 1rem; }
    .doc-body { padding: 40px 0; }
    .doc-section { padding: 36px 0; }
    .doc-section h2 { font-size: 1.65rem; }
    .footer-grid { grid-template-columns: 1fr; gap: 32px; }
    .sites-grid { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
  }
  @media (max-width: 480px) {
    .container { padding: 0 18px; }
    .header .container { height: 56px; }
    .mobile-drawer { top: 56px; }
    .doc-hero h1 { font-size: 1.9rem; }
    .header-actions .btn-sm { display: none; }
    table.doc-table, table.doc-table tbody, table.doc-table tr, table.doc-table td { display: block; width: 100% !important; }
    table.doc-table thead { display: none; }
    table.doc-table tbody tr { padding: 14px 16px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.015); position: relative; }
    table.doc-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.04); }
    table.doc-table tbody tr:last-child { border-bottom: 0; }
    table.doc-table td { padding: 2px 0 !important; border: 0 !important; background: transparent !important; line-height: 1.5; }
    table.doc-table td.cat { font-size: 1.02rem; margin-bottom: 4px; padding-right: 60px !important; }
    table.doc-table td.no { position: absolute !important; top: 14px; right: 14px; width: auto !important; margin: 0 !important; padding: 3px 9px !important; font-size: 0.68rem !important; background: rgba(248,113,113,0.10) !important; border: 1px solid rgba(248,113,113,0.32) !important; border-radius: 4px; line-height: 1.3 !important; }

    /* Inline label + chip when the value cell is just a <code> pill (Where table, Permissions code rows) */
    /* Denser perm-deny chips on mobile */
    .perm-deny { gap: 6px; margin-top: 14px; }
    .perm-deny li { padding: 5px 10px; font-size: 0.78rem; }

    /* Support table on mobile — 2-line per row: service+ticks on line 1, domain chip on line 2.
       Mini legend shown above tbody via thead so users know which tick is Chrome vs Edge. */
    table.doc-table.doc-table-support thead { display: block !important; padding: 10px 16px 8px; border-bottom: 1px solid var(--border); }
    table.doc-table.doc-table-support thead tr { display: grid; grid-template-columns: 1fr 52px 52px; column-gap: 4px; align-items: center; }
    table.doc-table.doc-table-support thead th { display: none !important; }
    table.doc-table.doc-table-support thead th.col-browser { display: block !important; padding: 0 !important; width: auto !important; font-size: 0.6rem; letter-spacing: 0.06em; text-align: center !important; background: transparent !important; border: 0 !important; color: var(--muted) !important; white-space: nowrap; }
    table.doc-table.doc-table-support thead th:nth-child(3) { grid-column: 2; }
    table.doc-table.doc-table-support thead th:nth-child(4) { grid-column: 3; }
    table.doc-table.doc-table-support tbody tr:has(> td:nth-child(2) > code:only-child) {
      display: grid !important;
      grid-template-columns: 1fr auto;
      grid-template-areas: "title ticks" "domain ticks";
      column-gap: 12px;
      row-gap: 4px;
      padding: 12px 16px;
      justify-items: start;
      align-items: center;
    }
    table.doc-table.doc-table-support tbody tr td { flex: initial; width: auto !important; }
    table.doc-table.doc-table-support tbody tr td.cat { grid-area: title; padding-right: 0 !important; margin: 0 !important; font-size: 1rem; }
    table.doc-table.doc-table-support tbody tr td:nth-child(2) { grid-area: domain; margin: 0 !important; }
    table.doc-table.doc-table-support tbody tr td.cell-yes,
    table.doc-table.doc-table-support tbody tr td.cell-no {
      align-self: center;
      justify-self: stretch;
      display: block !important;
      width: auto !important;
      text-align: center !important;
      font-size: 1.15rem !important;
      font-weight: 700;
      padding: 0 !important;
      margin: 0 !important;
      background: transparent !important;
      border: 0 !important;
      line-height: 1 !important;
    }
    table.doc-table.doc-table-support tbody tr td.cell-yes { grid-column: 2; }
    table.doc-table.doc-table-support tbody tr td.cell-no { grid-column: 2; }
    /* Place the two browser cells side-by-side in the second column */
    table.doc-table.doc-table-support tbody tr td:nth-child(3) { grid-area: unset; grid-column: 2; grid-row: 1 / span 2; }
    table.doc-table.doc-table-support tbody tr td:nth-child(4) { grid-area: unset; grid-column: 3; grid-row: 1 / span 2; }
    table.doc-table.doc-table-support tbody tr:has(> td:nth-child(2) > code:only-child) {
      grid-template-columns: 1fr 52px 52px;
      grid-template-areas: "title chrome edge" "domain chrome edge";
      column-gap: 4px;
    }
  }

  /* Print */
  @media print {
    .header, .footer, .announcement, .mobile-drawer { display: none; }
    body { background: #fff; color: #000; font-size: 11pt; line-height: 1.45; }
    .doc-hero, .doc-section { border-color: #ccc; }
    .doc-hero h1 em, .doc-section h2, .sec-num, strong { color: #000; -webkit-text-fill-color: #000; background: none; }
    .perm-deny li, .doc-table-wrap, .sites-grid, .sites-grid .s, table.doc-table td, code { background: #fff; color: #000; border-color: #ccc; }
    a[href^="http"]:not(.no-print-url):after, a[href$=".html"]:not(.no-print-url):after {
      content: " (" attr(href) ")"; font-family: "Source Code Pro", ui-monospace, monospace; font-size: 9pt; color: #555;
    }
    a { border-bottom: 0 !important; color: #000; }
  }

/* ──────────────── TERMS-SPECIFIC ADDITIONS (from terms.html) ──────────────── */
  :root {
    --bg: #0a0b0f; --bg-soft: #0e1117; --panel: #161a22; --raised: #1c2029;
    --deep: #222631; --border: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.14);
    --text: #F1F5F9; --soft: #C4CDD8; --muted: #94A3B8;
    --orange: #ff4c00; --orange-soft: rgba(255,76,0,0.14);
    --danger: #e01245; --danger-soft: rgba(224,18,69,0.12); --black: #080A12;
    --radius: 14px; --radius-sm: 10px;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); line-height: 1.65; -webkit-font-smoothing: antialiased; }
  h1, h2, h3, h4, h5, h6, .logo {
    font-family: "Space Grotesk", "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    letter-spacing: -0.012em;
  }
  .sec-num, .announcement, .doc-hero .eyebrow, .doc-hero .meta, .footer-col h4 {
    font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
  }
  a { color: inherit; text-decoration: none; }
  .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
  .wrap-prose { max-width: 760px; margin: 0 auto; }

  .announcement { background: var(--bg-soft); border-bottom: 1px solid var(--border); text-align: center; padding: 10px 0; font-size: 0.85rem; color: var(--muted); }
  .announcement strong { color: var(--text); font-weight: 600; }

  .header { position: sticky; top: 0; z-index: 100; background: transparent; border-bottom: 1px solid transparent; transition: background 0.25s, border-color 0.25s; }
  .header.is-scrolled { background: rgba(11,13,20,0.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom-color: var(--border); }
  .header .container { display: flex; align-items: center; justify-content: space-between; height: 64px; }
  .logo { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 1.1rem; letter-spacing: -0.01em; }
  .logo small { color: var(--muted); font-weight: 500; font-size: 0.75rem; margin-left: 6px; letter-spacing: 0; }
  .logo-mark { width: 32px; height: 32px; border-radius: 8px; background: var(--black); border: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .logo-mark svg { width: 18px; height: 18px; }
  .nav { display: flex; align-items: center; gap: 32px; }
  .nav a { font-size: 0.9rem; color: var(--muted); font-weight: 500; transition: color 0.2s; }
  .nav a:hover, .nav a.is-here { color: var(--text); }
  .header-actions { display: flex; align-items: center; gap: 12px; }
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border-radius: 10px; font-weight: 600; font-size: 0.95rem; border: none; font-family: inherit; }
  .btn-sm { padding: 8px 16px; font-size: 0.85rem; }
  @keyframes pulseDot { 0%,100% { box-shadow: 0 0 0 0 rgba(148,163,184,0.5); } 50% { box-shadow: 0 0 0 6px rgba(148,163,184,0); } }
  .mobile-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
  .mobile-toggle:hover { background: rgba(255,255,255,0.06); }
  .hamburger-icon { display: block; transition: transform 300ms ease-in-out; }
  .hamburger-icon.is-open { transform: rotate(-45deg); }
  .hamburger-path-1 { stroke-dasharray: 12 63; transition: stroke-dasharray 300ms ease-in-out, stroke-dashoffset 300ms ease-in-out; }
  .hamburger-icon.is-open .hamburger-path-1 { stroke-dasharray: 20 300; stroke-dashoffset: -32.42px; }
  .mobile-drawer { display: none; position: fixed; top: 64px; left: 0; right: 0; bottom: 0; background: rgba(11,13,20,0.97); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); flex-direction: column; padding: 24px; z-index: 99; overflow-y: auto; }
  .mobile-drawer a { display: block; padding: 14px 0; color: var(--soft); font-size: 1rem; font-weight: 500; border-bottom: 1px solid var(--border); transition: color 0.15s; }
  .mobile-drawer a:hover { color: var(--text); }
  .mobile-drawer a:last-of-type { border-bottom: 0; }
  .mobile-drawer.is-open { display: flex; animation: drawer-in 0.2s ease-out; }
  @keyframes drawer-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }

  .doc-hero { padding: 80px 0 64px; border-bottom: 1px solid var(--border); }
  .doc-hero .eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px; border-radius: 999px; background: var(--panel); border: 1px solid var(--border-strong); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; color: var(--soft); margin-bottom: 20px; }
  .doc-hero .eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: pulseDot 2.2s ease-in-out infinite; }
  .doc-hero h1 { font-size: 3.8rem; font-weight: 800; line-height: 1.04; letter-spacing: -0.026em; margin-bottom: 18px; }
  .doc-hero h1 em { font-style: normal; color: var(--orange); }
  .doc-hero .lede { font-size: 1.15rem; color: var(--soft); max-width: 56ch; }
  .doc-hero .lede + .lede { margin-top: 12px; }
  .doc-hero .lede strong { color: var(--text); font-weight: 600; }
  .doc-hero .meta { margin-top: 24px; font-size: 0.85rem; color: var(--muted); font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.04em; }

  .doc-body { padding: 64px 0; }
  .doc-section { padding: 48px 0; border-top: 1px solid var(--border); }
  .doc-section:first-child { border-top: 0; padding-top: 0; }
  .sec-num { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--muted); display: block; margin-bottom: 12px; font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace; }
  .doc-section h2 { font-size: 2.1rem; font-weight: 700; letter-spacing: -0.016em; margin-bottom: 16px; }
  .doc-section p { color: var(--soft); font-size: 1rem; margin-bottom: 14px; max-width: 64ch; }
  .doc-section p:last-child { margin-bottom: 0; }
  .doc-section strong { color: var(--text); font-weight: 600; }
  .doc-section a.inline { color: var(--text); border-bottom: 1px solid rgba(255,255,255,0.25); padding-bottom: 1px; transition: border-color 0.2s; }
  .doc-section a.inline:hover { border-bottom-color: var(--orange); }
  .doc-section code { font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.88em; font-weight: 500; color: var(--orange); background: rgba(255,76,0,0.08); border: 1px solid rgba(255,76,0,0.22); padding: 2px 7px; border-radius: 5px; white-space: nowrap; }

  ul.spare { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; max-width: 64ch; }
  ul.spare li { padding-left: 22px; position: relative; line-height: 1.6; color: var(--soft); font-size: 1rem; }
  ul.spare li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 8px; height: 1px; background: var(--muted); }
  ul.spare li strong { color: var(--text); font-weight: 600; }

  /* Numbered variant — see the note on the other ol.spare block. Bare <ol class="spare">
     falls back to default outside markers (no padding) that overflow the left edge on
     iOS Safari and stretch the page; inside counter markers keep it in the box. */
  ol.spare { list-style: none; counter-reset: spare; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; max-width: 64ch; }
  ol.spare li { counter-increment: spare; padding-left: 26px; position: relative; line-height: 1.6; color: var(--soft); font-size: 1rem; }
  ol.spare li::before { content: counter(spare) "."; position: absolute; left: 0; top: 0; color: var(--orange); font-weight: 700; font-variant-numeric: tabular-nums; }
  ol.spare li strong { color: var(--text); font-weight: 600; }

  .sites-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 18px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
  .sites-grid .s { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: var(--panel); font-size: 0.95rem; }
  .sites-grid .s b { color: var(--text); font-weight: 600; }
  .sites-grid .s span { color: var(--muted); font: 400 0.82rem/1 "Source Code Pro", ui-monospace, monospace; }

  .footer { border-top: 0; padding: 36px 0 30px; position: relative; z-index: 1; }
  .footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(255,76,0,0.45) 50%, transparent 100%); pointer-events: none; }
  .footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 40px; }
  .footer-brand p { color: var(--muted); font-size: 0.9rem; margin-top: 12px; max-width: 320px; }
  .footer-col h4 { font-size: 0.78rem; font-weight: 700; color: var(--text); margin-bottom: 16px; letter-spacing: 0.12em; text-transform: uppercase; }
  .footer-col a { display: block; color: var(--muted); font-size: 0.9rem; margin-bottom: 10px; transition: color 0.2s; }
  .footer-col a:hover, .footer-col a.is-here { color: var(--orange); }
  .footer-bottom { border-top: 1px solid var(--border); margin-top: 40px; padding-top: 24px; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 0.8rem; color: var(--muted); flex-wrap: wrap; }

  @media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 768px) {
    .nav { display: none; } .mobile-toggle { display: flex; }
    .doc-hero { padding: 48px 0 40px; } .doc-hero h1 { font-size: 2.4rem; } .doc-hero .lede { font-size: 1rem; }
    .doc-body { padding: 40px 0; } .doc-section { padding: 36px 0; } .doc-section h2 { font-size: 1.65rem; }
    .footer-grid { grid-template-columns: 1fr; gap: 32px; } .sites-grid { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
  }
  @media (max-width: 480px) {
    .container { padding: 0 18px; } .header .container { height: 56px; } .mobile-drawer { top: 56px; }
    .doc-hero h1 { font-size: 1.9rem; } .header-actions .btn-sm { display: none; }
  }
  @media print {
    .header, .footer, .announcement, .mobile-drawer { display: none; }
    body { background: #fff; color: #000; font-size: 11pt; line-height: 1.45; }
    .doc-hero, .doc-section { border-color: #ccc; }
    .doc-hero h1 em, .doc-section h2, .sec-num, strong { color: #000; -webkit-text-fill-color: #000; background: none; }
    .sites-grid, .sites-grid .s, code { background: #fff; color: #000; border-color: #ccc; }
    a[href^="http"]:not(.no-print-url):after, a[href$=".html"]:not(.no-print-url):after { content: " (" attr(href) ")"; font-family: "Source Code Pro", ui-monospace, monospace; font-size: 9pt; color: #555; }
    a { border-bottom: 0 !important; color: #000; }
  }

/* ──────────────── BRAND LOCKUP & SNOWFLAKE ANIMATION ──────────────── */
.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo-word { letter-spacing: -0.012em; }
.logo-mark { display: inline-flex; }
.logo-mark svg { animation: frost-spin 14s linear infinite, frost-pulse 4.2s ease-in-out infinite; transform-origin: center; }
@keyframes frost-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes frost-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.62; } }
@media (prefers-reduced-motion: reduce) { .logo-mark svg { animation: none; } }


/* ──────────────── DELIGHT: MICRO-INTERACTIONS ────────────────
   Precision micro-interactions. Nothing decorative — each move earns its place.
   prefers-reduced-motion: transitions are properties-only (no animation keyframes here);
   the base @media(prefers-reduced-motion) block already gates motion globally. */

/* Logo mark: hover glow — signals it's a link, confirms brand precision */
.logo-mark {
  transition: border-color 0.2s, box-shadow 0.2s;
}
.logo-mark:hover {
  border-color: rgba(255,76,0,0.38);
  box-shadow: 0 0 0 3px rgba(255,76,0,0.08), 0 0 14px rgba(255,76,0,0.07);
}

/* Nav link: animated underline slides left-to-right on hover.
   Separates Redactopia nav from the color-only hover everyone ships. */
.nav a { position: relative; }
.nav a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 100%; height: 1px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav a:hover::after,
.nav a.is-here::after { transform: scaleX(1); }

/* Brand-gradient tick before each section number — one of the design's
   signature flourishes, brought into the doc pages. */
.doc-section { position: relative; }
.doc-section .sec-num { padding-left: 14px; position: relative; }
.doc-section .sec-num::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 8px; height: 2px;
  background: var(--orange);
  border-radius: 2px;
  transform: translateY(-50%);
}

/* Troubleshooting list — used by support.html to lay out problem / solution
   pairs. Matches the .doc-table card surface so dt/dd reads as a grouped panel. */
dl.trouble {
  margin-top: 18px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
dl.trouble dt {
  padding: 16px 20px 8px;
  color: var(--text);
  font-weight: 600;
  font-size: 0.98rem;
}
dl.trouble dd {
  padding: 0 20px 18px;
  margin: 0;
  color: var(--soft);
  font-size: 0.95rem;
  line-height: 1.65;
  border-bottom: 1px solid var(--border);
}
dl.trouble dd:last-child { border-bottom: 0; }
dl.trouble code {
  font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.9em; color: var(--orange);
  background: rgba(255,76,0,0.08); border: 1px solid rgba(255,76,0,0.22);
  padding: 1px 6px; border-radius: 4px;
}
dl.trouble a {
  color: var(--text);
  border-bottom: 1px solid rgba(255,255,255,0.25);
  transition: border-color 0.2s;
}
dl.trouble a:hover { border-bottom-color: var(--orange); }

/* ──────────────── MAIN NAV (Snipetic-style, all pages) ──────────────── */
nav.main-nav {
  position: sticky; top: 0; z-index: 100;
  padding: 6px 0;
  background: transparent;
  transition: transform 0.32s cubic-bezier(0.4,0,0.2,1), opacity 0.32s, background 0.25s;
}
nav.main-nav.is-scrolled {
  background: #0a0b0f;
}
nav.main-nav::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,76,0,0.45) 50%, transparent 100%);
  mask-image: none;
  -webkit-mask-image: none;
  pointer-events: none;
  opacity: 1;
}
nav.main-nav.nav-hidden { transform: translate3d(0, -100%, 0); -webkit-transform: translate3d(0, -100%, 0); opacity: 0; }

.nav-inner {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; height: 44px;
}

/* Logo */
.nav-logo {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; color: var(--text);
}
.nav-logo-mark {
  width: 28px; height: 28px; border-radius: 6px;
  background: var(--black); border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.nav-logo-mark svg { width: 16px; height: 16px; }
.nav-logo-mark svg { animation: frost-spin 14s linear infinite, frost-pulse 4.2s ease-in-out infinite; transform-origin: center; }
@media (prefers-reduced-motion: reduce) { .nav-logo-mark svg { animation: none; } }

/* Desktop links (center column) */
.nav-links { list-style: none; display: flex; align-items: center; gap: 2px; }
.nav-has-dd { position: relative; }
.nav-has-dd::before {
  content: ''; position: absolute; top: 100%;
  left: -12px; right: -12px; height: 12px;
}
.nav-dd-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; font-size: 0.875rem; font-weight: 500;
  color: var(--muted); background: transparent; border: none;
  border-radius: 8px; cursor: pointer; font-family: inherit;
  position: relative; white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}
.nav-dd-btn:hover { color: var(--text); background: rgba(255,255,255,0.04); }
/* gradient underline on hover */
.nav-dd-btn::after {
  content: ''; position: absolute; bottom: 3px; left: 12px; right: 12px;
  height: 1px;
  background: var(--orange);
  transform: scaleX(0); transform-origin: left; transition: transform 0.2s ease;
}
.nav-dd-btn:hover::after { transform: scaleX(1); }
/* plain nav link (Home, Guide) */
.nav-link {
  display: inline-flex; align-items: center;
  padding: 7px 12px; font-size: 0.875rem; font-weight: 500; line-height: normal;
  color: var(--muted); text-decoration: none;
  border-radius: 8px; white-space: nowrap; position: relative;
  transition: color 0.15s, background 0.15s;
}
.nav-link:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.nav-link::after {
  content: ''; position: absolute; bottom: 3px; left: 12px; right: 12px;
  height: 1px; background: var(--orange);
  transform: scaleX(0); transform-origin: left; transition: transform 0.2s ease;
}
.nav-link:hover::after { transform: scaleX(1); }
/* chevron */
.nav-chevron {
  display: inline-block; width: 7px; height: 7px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px,-2px); transition: transform 0.2s; flex-shrink: 0;
}
.nav-has-dd.dd-open .nav-chevron { transform: rotate(-135deg) translate(-1px,2px); }

/* Dropdown panel */
.nav-dd {
  list-style: none; position: absolute; top: calc(100% + 6px); left: 50%;
  transform: translateX(-50%) translateY(-4px); opacity: 0; pointer-events: none;
  min-width: 180px; background: var(--panel); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 6px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.55);
  transition: opacity 0.15s, transform 0.15s; z-index: 200;
}
.nav-dd li a {
  display: block; padding: 8px 12px; font-size: 0.875rem;
  color: var(--soft); border-radius: 6px; transition: background 0.12s, color 0.12s;
}
.nav-dd li a:hover { background: rgba(255,255,255,0.06); color: var(--text); }
@media (hover: hover) {
  .nav-has-dd:hover .nav-dd {
    opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0);
  }
  .nav-has-dd:hover .nav-chevron { transform: rotate(-135deg) translate(-1px,2px); }
}
.nav-has-dd.dd-open .nav-dd {
  opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0);
}

/* Right actions */
.nav-right { display: flex; align-items: center; gap: 10px; justify-self: end; grid-column: 3; }

/* Hamburger (hidden on desktop) */
.nav-hamburger {
  display: none; flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; width: 36px; height: 36px; padding: 4px;
  background: transparent; border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer; transition: background 0.15s;
}
.nav-hamburger:hover { background: rgba(255,255,255,0.06); }
.nav-hamburger span {
  display: block; width: 18px; height: 2px;
  background: var(--text); border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
nav.main-nav.nav-open .nav-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
nav.main-nav.nav-open .nav-hamburger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
nav.main-nav.nav-open .nav-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Floating pill (injected by JS) */
.nav-pill {
  position: fixed; top: 14px; right: 24px; z-index: 99;
  width: 36px; height: 36px; border-radius: 8px;
  background: rgba(11,13,20,0.88);
  border: 1px solid rgba(255,76,0,0.28);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  opacity: 0; pointer-events: none;
  transform: translateY(-8px) scale(0.92);
  transition: opacity 0.22s, transform 0.28s cubic-bezier(0.4,0,0.2,1), background 0.15s, border-color 0.15s;
}
.nav-pill:hover {
  background: rgba(30,34,48,0.95);
  border-color: rgba(255,76,0,0.48);
}
.nav-pill.show { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.nav-pill-bar {
  display: block; width: 16px; height: 2px;
  background: var(--text); border-radius: 2px; position: relative;
}
.nav-pill-bar::before, .nav-pill-bar::after {
  content: ''; position: absolute; width: 16px; height: 2px;
  background: var(--text); border-radius: 2px; left: 0;
}
.nav-pill-bar::before { top: -5px; }
.nav-pill-bar::after { top: 5px; }

/* Mobile breakpoint */
@media (max-width: 960px) {
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  nav.main-nav.nav-open.nav-hidden { transform: translateY(0); }
  nav.main-nav.nav-open .nav-links {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(11,13,20,0.97); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    padding: 8px 0 16px; border-bottom: 1px solid var(--border);
    animation: menu-slide-down 0.2s cubic-bezier(0.4,0,0.2,1);
  }
  nav.main-nav.nav-open .nav-dd-btn,
  nav.main-nav.nav-open .nav-link {
    width: 100%; padding: 12px 24px; border-radius: 0;
    font-size: 1rem; justify-content: space-between;
  }
  nav.main-nav.nav-open .nav-dd-btn::after,
  nav.main-nav.nav-open .nav-link::after { display: none; }
  nav.main-nav.nav-open .nav-has-dd::before { display: none; }
  nav.main-nav.nav-open .nav-dd {
    position: static; transform: none; opacity: 0; pointer-events: none;
    max-height: 0; overflow: hidden;
    box-shadow: none; border: none; border-radius: 0;
    background: transparent; padding: 0; min-width: auto;
    transition: max-height 0.2s ease, opacity 0.15s;
  }
  nav.main-nav.nav-open .nav-has-dd.dd-open .nav-dd {
    opacity: 1; pointer-events: auto; max-height: 300px; padding: 4px 0 8px;
  }
  nav.main-nav.nav-open .nav-dd li a {
    padding: 10px 24px 10px 40px; border-radius: 0; font-size: 0.9rem;
  }
  nav.main-nav.nav-open .nav-has-dd.dd-open .nav-chevron { transform: rotate(-135deg) translate(-1px,2px); }
}
@media (min-width: 961px) {
  nav.main-nav.nav-hidden { transform: none; }
  .nav-pill { display: none !important; }
}
@keyframes menu-slide-down {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media print { nav.main-nav { display: none; } }

/* iOS Safari: drop sticky positioning on nav/header.
   A fixed/sticky element near the top creates a GPU compositing layer that iOS
   paints as a distinct dark band behind the address bar (a near-black-on-near-black
   artifact that persists for the page session once created). Falling back to relative
   removes the layer; iOS users scroll up to see the nav again. `relative` (not `static`)
   is required so absolute-positioned descendants like .nav-links still anchor to the
   nav. Selector matches iOS Safari only — desktop, Android, and other browsers keep
   the sticky behavior. */
@supports (-webkit-touch-callout: none) {
  nav.main-nav,
  .header {
    position: relative;
    top: auto;
  }
  /* Grain overlay uses position:fixed — hide on iOS (enhancement only). */
  body::after { display: none; }
  /* On iOS, the nav scrolls away with the page. When the user opens the menu
     while scrolled (nav off-screen, .nav-offscreen set by main.js), anchor the
     dropdown to the viewport top so it's actually visible. When the user opens
     the menu at the top of the page (nav still visible), keep the default
     absolute-below-nav positioning so the X and first item's chevron don't
     stack in the same spot. */
  nav.main-nav.nav-offscreen.nav-open .nav-links {
    position: fixed;
    top: 0;
  }
}


/* ──────────────── BACK TO TOP ──────────────── */
/* Matches .nav-pill: same 36px squircle, same gradient border drawn from nav colors. */
.to-top {
  position: fixed;
  bottom: 24px;
  right: max(24px, calc((100vw - 1200px) / 2 + 24px));
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(11,13,20,0.88);
  border: 1px solid rgba(255,76,0,0.28);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(0.92);
  transition: opacity 0.22s, transform 0.28s cubic-bezier(0.4,0,0.2,1), background 0.15s, border-color 0.15s;
  z-index: 90;
  padding: 0;
}
.to-top svg { width: 14px; height: 14px; display: block; }
.to-top.is-shown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.to-top:hover {
  background: rgba(30,34,48,0.95);
  border-color: rgba(255,76,0,0.55);
  transform: translateY(-2px) scale(1.06);
}
.to-top.is-shown.near-footer {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(0.92);
}
@media (max-width: 600px) {
  .to-top { right: 24px; bottom: 16px; }
}

/* ──────────────── ANIMATION SYSTEM ──────────────── */

/* Hero entrance — fires on page load, staggered per element */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.hero-content h1              { animation: heroFadeUp 0.72s cubic-bezier(0.22,1,0.36,1) 0.08s both; }
.hero-content > p:nth-of-type(1) { animation: heroFadeUp 0.72s cubic-bezier(0.22,1,0.36,1) 0.19s both; }
.hero-content > p:nth-of-type(2) { animation: heroFadeUp 0.72s cubic-bezier(0.22,1,0.36,1) 0.26s both; }
.hero-actions                 { animation: heroFadeUp 0.72s cubic-bezier(0.22,1,0.36,1) 0.34s both; }
.hero-visual                  { animation: heroFadeUp 0.80s cubic-bezier(0.22,1,0.36,1) 0.46s both; }

/* Scroll-triggered — initial hidden state, cleared to .is-visible by IntersectionObserver */
.anim-up {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity   0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.anim-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Accessibility — kill all motion for users who opt out */
@media (prefers-reduced-motion: reduce) {
  .hero-content h1,
  .hero-content > p,
  .hero-actions,
  .hero-visual {
    animation: none !important;
  }
  .anim-up {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ──────────────── DOC TOC LAYOUT ──────────────── */
/* Tightens the hero on doc pages so the right-rail TOC starts higher up. */
.doc-hero.doc-hero--compact { padding: 56px 0 36px; border-bottom: none; }
.doc-hero.doc-hero--compact h1 { margin-bottom: 16px; }
.doc-hero.doc-hero--compact .meta { margin-top: 18px; }
.doc-hero.doc-hero--compact .container { max-width: 1080px; padding: 0 24px; }
.doc-hero.doc-hero--compact .wrap-prose { max-width: 760px; margin: 0; }
.doc-body.doc-body--compact { padding: 32px 0 64px; }

/* Plain-mono eyebrow on compact doc heroes (no pill, no dot). */
.doc-hero.doc-hero--compact .eyebrow {
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 16px;
  font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.doc-hero.doc-hero--compact .eyebrow::before { content: none; }

/* TL;DR card — sits at the top of long-form policy/terms content. */
.doc-tldr {
  position: relative;
  background: var(--bg-soft);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  padding: 30px 32px 26px;
  margin-bottom: 48px;
}
.doc-tldr-tab {
  position: absolute;
  top: -11px;
  left: 24px;
  background: var(--bg);
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 6px;
  padding: 4px 10px;
  font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.doc-tldr-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}
.doc-tldr-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  color: var(--soft);
  font-size: 0.95rem;
  line-height: 1.55;
}
.doc-tldr-list li::before {
  content: '';
  width: 18px;
  height: 18px;
  min-width: 18px;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.4);
  margin-top: 2px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff4c00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 12 10 17 19 8'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px;
  flex-shrink: 0;
}

/* Two-column grid: left content column + sticky right-rail TOC. */
.doc-body--with-toc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 64px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}
.doc-body--with-toc .wrap-prose {
  max-width: none;
  margin: 0;
}
.doc-toc {
  position: sticky;
  top: 96px;
  align-self: start;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  border-left: 1px solid var(--border);
  padding-left: 20px;
  scrollbar-width: thin;
}
.doc-toc::-webkit-scrollbar { width: 4px; }
.doc-toc::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }
.doc-toc-label {
  font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.doc-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.doc-toc-list li { padding: 0; margin: 0; }
.doc-toc-list a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 7px 0;
  font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--soft);
  text-decoration: none;
  transition: color 0.15s;
  line-height: 1.4;
}
.doc-toc-list a:hover { color: var(--text); }
.doc-toc-list a:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 3px;
  color: var(--text);
}
.doc-toc-list .num {
  font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.72rem;
  color: var(--muted);
  width: 18px;
  flex-shrink: 0;
  transition: color 0.15s;
}
.doc-toc-list a.is-active { color: var(--orange); }
.doc-toc-list a.is-active .num { color: var(--orange); }

@media (max-width: 960px) {
  .doc-body--with-toc {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .doc-toc { display: none; }
}

/* ────────────────────────────────────────────────────────────────
   LANDING — feature-row mockups (Detect / Review / Redact / Manual Blur)
   Class-based versions of the inline styles previously embedded in
   index.html. Same visuals, no inline style="…" attributes.
   ──────────────────────────────────────────────────────────────── */

/* Generic mockup card surface used inside .feature-mockup */
.mock-card {
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 20px;
  border: 1px solid var(--border);
}
.mock-card--lg { padding: 24px; }

/* Eyebrow label used in mockup heads ("Prompt scan", "Manual Blur Tool", "Before", "After") */
.mock-eyebrow {
  font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 14px;
}
/* Body text inside a mockup */
.mock-body {
  font-size: 0.95rem;
  line-height: 1.95;
}
.mock-body--soft {
  font-size: 0.88rem;
  line-height: 1.85;
  color: var(--soft);
}

/* Inline highlight marks in the Detect mockup. One color (signal-blue) for
   all matched spans, regardless of category — Single-Hue Rule. The amber
   "Sensitive data detected" banner below carries the system-status signal.
   Marks here mean "this is a match," not "this is a HIGH severity item." */
.mock-mark {
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 700;
  background: var(--orange-soft);
  color: var(--orange);
  border: 1px solid rgba(255, 76, 0, 0.30);
}

/* "Before" plain-text emphasis underlines */
.mock-underline {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--danger);
  text-underline-offset: 3px;
}

/* "After" redaction-label chip */
/* Mirrors the extension's actual [LABEL REDACTED] chip rendering exactly:
   black bg + amber text + thin amber border. The Single-Hue Rule normally
   forbids mixing the dark surface with an amber accent like this, but here
   product fidelity wins — the mockup IS the rendering, not an abstraction
   of it. Intentional in-system exception. */
.mock-redact-label {
  display: inline-block;
  background: var(--black);
  color: var(--danger);
  padding: 2px 7px;
  border-radius: 4px;
  font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  border: 1px solid rgba(224, 18, 69, 0.30);
}

/* Coded-token variant (Redact feature row, Label-vs-Coded comparison). Orange
   instead of the red label chip so the Pro "coherent token" reads as the
   smarter, distinct option — and [EMAIL_1] vs [EMAIL_2] shows they stay apart. */
.mock-redact-label--coded {
  background: var(--orange-soft);
  color: var(--orange);
  border-color: rgba(255, 76, 0, 0.34);
}

/* Original / Label / Coded comparison stack in the Redact feature mockup */
.mock-diff { display: flex; flex-direction: column; gap: 13px; }
.mock-diff-row {
  display: grid;
  grid-template-columns: 88px 1fr;
  align-items: center;
  gap: 12px;
}
.mock-diff-tag {
  font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  white-space: nowrap;
}
.mock-diff-tag--pro { color: var(--orange); }
.mock-diff-note {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--muted);
}
@media (max-width: 480px) {
  .mock-diff-row { grid-template-columns: 60px 1fr; gap: 9px; }
}

/* Detect-mockup pill row */
.mock-pills {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

/* Detect-mockup status banner.
   Amber as foreground signal only (Cool-Dark Rule) — bullet + text + a
   single hairline above. No amber fill, no amber-tinted background. */
.mock-status {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(224, 18, 69, 0.32);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--danger);
}
.mock-status-bullet {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--danger);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.7rem;
  flex-shrink: 0;
}

/* Review-mockup header (icon + title block) */
.mock-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.mock-head-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--danger-soft);
  border: 1px solid rgba(224, 18, 69, 0.25);
  color: var(--danger);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mock-head-title { font-weight: 700; font-size: 1rem; }
.mock-head-sub   { font-size: 0.82rem; color: var(--muted); }

/* Review-mockup finding list */
.mock-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}
.mock-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--raised);
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 0.9rem;
}
.mock-list-row > div {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mock-bullet {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mock-bullet--amber { background: var(--danger); }
.mock-bullet--blue  { background: var(--orange); }
.mock-list-value {
  font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.8rem;
  color: var(--muted);
}

/* Review-mockup action row */
.mock-actions {
  display: flex;
  gap: 10px;
}
.mock-actions .btn { flex: 1; }

/* Redact mockup — split before/after grid. Stacks below 768px so the
   cards don't overflow the parent on phone viewports. */
.mock-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 768px) {
  .mock-split { grid-template-columns: 1fr; gap: 14px; }
}

/* Manual-Blur mockup — row container */
.mock-blur-row {
  padding: 14px 16px;
  background: var(--raised);
  border-radius: 8px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mock-blur-label { font-size: 0.88rem; color: var(--muted); }
.mock-blur-target {
  font-size: 0.85rem;
  filter: blur(4px);
  user-select: none;
  color: var(--text);
}
.mock-blur-target--strong { filter: blur(3px); }
.mock-blur-foot {
  padding: 10px 14px;
  background: var(--deep);
  border-radius: 6px;
  font-size: 0.8rem;
  color: var(--muted);
  text-align: center;
}

/* Constrain the narrower mockups (Review, Manual Blur) */
.feature-mockup--narrow { max-width: 440px; margin: 0 auto; }

/* Section-level layout overrides previously inline */
.section--no-top-pad   { padding-top: 0; }
.section--snug-top-pad { padding-top: 40px; }
.section--tight-top-pad{ padding-top: 20px; }

/* Tone-tinted section backgrounds */
.section--soft-bg { background: var(--bg-soft); }

/* Sites strip header tightening */
.section-header--tight { margin-bottom: 28px; }
.section-header--tight h2 { font-size: 1.25rem; }

/* Hero supporting line — "Nothing leaves the page. Ever."
   Mono Certification Rule: technically verifiable privacy claims → Source Code Pro.
   Promoted from muted caption to a statement the reader actually notices. */
.hero-content .hero-fineprint {
  margin-top: 14px;
  font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--orange);
}

/* Inline doc-style code used in Redact bullets */
.inline-code {
  font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.9rem;
  color: var(--text);
  background: var(--deep);
  padding: 1px 6px;
  border-radius: 4px;
}

/* ────────────────────────────────────────────────────────────────
   GUIDE PAGE — animated graphics and supporting components
   Used only on guide.html. All animations gated by prefers-reduced-motion.
   ──────────────────────────────────────────────────────────────── */

/* H3 within doc-section — used heavily on the guide for sub-sections */
.doc-section h3.guide-h3 {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
  margin: 28px 0 12px;
}

/* Severity chip — reused in tables, lists, mockups */
.guide-sev {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  vertical-align: middle;
  line-height: 1.5;
}
.guide-sev--hi  { background: rgba(224, 18, 69, 0.14); color: var(--danger, #e01245); border: 1px solid rgba(224, 18, 69, 0.32); }
.guide-sev--med { background: rgba(148, 163, 184, 0.12); color: var(--soft); border: 1px solid rgba(148, 163, 184, 0.28); }
.guide-sev--low { background: rgba(148, 163, 184, 0.06); color: var(--muted); border: 1px solid rgba(148, 163, 184, 0.18); }

/* Generic "flag" highlight used inside mocks */
.guide-flag {
  background: rgba(224, 18, 69, 0.16);
  border-bottom: 1px dashed var(--danger, #e01245);
  color: var(--text);
  padding: 0 4px;
  border-radius: 3px;
  font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.92em;
}

/* Keyboard key */
.guide-kbd {
  display: inline-block;
  font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 5px;
  background: var(--panel);
  border: 1px solid var(--border-strong, var(--border));
  border-bottom-width: 2px;
  color: var(--text);
  margin: 0 1px;
  vertical-align: middle;
}

/* ─── 01 · Overview: pillar cards ─── */
.guide-pillars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 28px 0 8px;
}
.guide-pillar {
  background: var(--panel);
  border: 1px solid var(--border-strong, var(--border));
  border-radius: var(--radius);
  padding: 20px 22px;
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px);
  animation: guidePillarIn 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}
.guide-pillar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(255, 76, 0, 0.06), transparent 55%);
  pointer-events: none;
}
.guide-pillar-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 76, 0, 0.08);
  border: 1px solid rgba(255, 76, 0, 0.22);
  color: var(--orange);
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
.guide-pillar-icon svg { width: 22px; height: 22px; }
.guide-pillar h3 { font-size: 1rem; font-weight: 600; margin: 0 0 8px; color: var(--text); }
.guide-pillar p { color: var(--soft); font-size: 0.92rem; margin: 0; max-width: none; line-height: 1.55; }
@media (max-width: 720px) { .guide-pillars { grid-template-columns: 1fr; } }

@keyframes guidePillarIn {
  to { opacity: 1; transform: translateY(0); }
}

/* Subtle motion on icons */
.guide-pillar-icon .g-pulse { animation: guideTinyPulse 2.4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.guide-pillar-icon .g-blur-bars rect { animation: guideBarFade 3.2s ease-in-out infinite; transform-origin: left; transform-box: fill-box; }
.guide-pillar-icon .g-blur-bars rect:nth-child(2) { animation-delay: 0.35s; }
.guide-pillar-icon .g-blur-bars rect:nth-child(3) { animation-delay: 0.7s; }
.guide-pillar-icon .g-redact-fill { animation: guideRedactDraw 3.2s ease-in-out infinite; transform-origin: left; transform-box: fill-box; }
.guide-pillar-icon .g-orbit-dot { animation: guideOrbit 6s linear infinite; transform-origin: 16px 16px; transform-box: view-box; }

@keyframes guideTinyPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.78); } }
@keyframes guideBarFade { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
@keyframes guideRedactDraw { 0% { transform: scaleX(0); opacity: 0; } 25%, 100% { transform: scaleX(1); opacity: 1; } }
@keyframes guideOrbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ─── 02 · AI-chat protection: flow + modal mock ─── */
.guide-flow {
  display: grid;
  gap: 10px;
  margin: 22px 0 16px;
  max-width: 64ch;
}
.guide-flow-step {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  position: relative;
  opacity: 0;
  transform: translateX(-6px);
  animation: guideFlowIn 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.guide-flow-step:nth-child(1) { animation-delay: 0s; }
.guide-flow-step:nth-child(2) { animation-delay: 80ms; }
.guide-flow-step:nth-child(3) { animation-delay: 160ms; }
.guide-flow-step:nth-child(4) { animation-delay: 240ms; }
.guide-flow-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 76, 0, 0.1);
  border: 1px solid rgba(255, 76, 0, 0.32);
  color: var(--orange);
  font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 700;
  font-size: 0.78rem;
  display: grid;
  place-items: center;
  margin-top: 2px;
}
.guide-flow-body { font-size: 0.95rem; color: var(--soft); line-height: 1.55; }
.guide-flow-body strong { color: var(--text); font-weight: 600; }

@keyframes guideFlowIn { to { opacity: 1; transform: translateX(0); } }

.guide-modal-mock {
  position: relative;
  margin: 24px 0;
  padding: 28px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.5), rgba(11, 13, 20, 0.8));
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  min-height: 220px;
  display: grid;
  place-items: center;
}
.guide-modal-mock::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 76, 0, 0.05), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(224, 18, 69, 0.04), transparent 55%);
  pointer-events: none;
}
.guide-modal-card {
  position: relative;
  width: min(100%, 480px);
  background: var(--panel);
  border: 1px solid var(--border-strong, var(--border));
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 76, 0, 0.05);
  animation: guideModalPop 4.5s ease-in-out infinite;
}
.guide-modal-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--danger, #e01245);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.guide-modal-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger, #e01245);
  box-shadow: 0 0 12px var(--danger, #e01245);
  animation: guideTinyPulse 1.6s ease-in-out infinite;
}
.guide-modal-body {
  padding: 16px 0;
  color: var(--soft);
  font-size: 0.95rem;
  line-height: 1.6;
}
.guide-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
}
.guide-modal-btn {
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 600;
  border: 1px solid var(--border-strong, var(--border));
  color: var(--soft);
  background: rgba(255, 255, 255, 0.02);
}
.guide-modal-btn--primary {
  background: var(--orange);
  color: #04101A;
  border-color: var(--orange);
}
.guide-modal-btn--danger {
  color: var(--danger, #e01245);
  border-color: rgba(224, 18, 69, 0.4);
}

@keyframes guideModalPop {
  0%, 8%   { transform: translateY(8px) scale(0.97); opacity: 0; }
  18%, 88% { transform: translateY(0) scale(1); opacity: 1; }
  98%, 100%{ transform: translateY(4px) scale(0.99); opacity: 0; }
}

/* ─── 03 · Detection: radar sweep ─── */
.guide-radar {
  position: relative;
  margin: 22px 0 26px;
  padding: 22px 24px;
  background: var(--panel);
  border: 1px solid var(--border-strong, var(--border));
  border-radius: 12px;
  overflow: hidden;
  font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--soft);
  word-break: break-word;
}
.guide-radar-text { position: relative; z-index: 2; max-width: 64ch; }
.guide-radar-mark {
  position: relative;
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(224, 18, 69, 0.06);
  color: var(--text);
  border-bottom: 1px dashed transparent;
  transition: all 0.3s;
  animation: guideRadarMark 6s ease-in-out infinite;
}
.guide-radar-mark[data-d="0"] { animation-delay: 0s; }
.guide-radar-mark[data-d="1"] { animation-delay: 1.6s; }
.guide-radar-mark[data-d="2"] { animation-delay: 3.2s; }
.guide-radar-sweep {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 76, 0, 0.12) 48%, rgba(255, 76, 0, 0.25) 50%, rgba(255, 76, 0, 0.12) 52%, transparent 100%);
  width: 28%;
  pointer-events: none;
  animation: guideRadarSweep 6s linear infinite;
  z-index: 1;
}

@keyframes guideRadarSweep {
  0%   { transform: translateX(-30%); }
  100% { transform: translateX(360%); }
}
@keyframes guideRadarMark {
  0%, 30%, 100% { background: rgba(224, 18, 69, 0.06); border-bottom-color: transparent; box-shadow: none; }
  40%, 70%      { background: rgba(224, 18, 69, 0.22); border-bottom-color: var(--danger, #e01245); box-shadow: 0 0 0 1px rgba(224, 18, 69, 0.3); }
}

/* ─── 04 · Custom patterns: input mock ─── */
.guide-cp-mock {
  margin: 22px 0 18px;
  padding: 18px 20px 16px;
  background: var(--panel);
  border: 1px solid var(--border-strong, var(--border));
  border-radius: 12px;
}
.guide-cp-mock-hdr {
  font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.guide-cp-row { display: grid; grid-template-columns: 1fr 1.8fr; gap: 12px; align-items: flex-start; }
.guide-cp-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.guide-cp-field label { font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.guide-cp-input {
  background: rgba(11, 13, 20, 0.7);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.85rem;
  color: var(--text);
  min-height: 36px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.guide-cp-regex { border-color: rgba(255, 76, 0, 0.32); }
.guide-cp-cursor::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 1em;
  background: var(--orange);
  margin-left: 2px;
  vertical-align: middle;
  animation: guideCursorBlink 1s steps(2) infinite;
}
@keyframes guideCursorBlink { 50% { opacity: 0; } }
.guide-cp-validate {
  font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.72rem;
  color: #2DD4BF;
  display: flex;
  align-items: center;
  gap: 6px;
}
.guide-cp-validate-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2DD4BF;
  box-shadow: 0 0 8px rgba(45, 212, 191, 0.6);
  flex-shrink: 0;
}
.guide-cp-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.guide-cp-sev-wrap { display: flex; flex-direction: column; gap: 6px; }
.guide-cp-sev-wrap label { font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.guide-cp-seg { display: flex; gap: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.guide-cp-seg span {
  flex: 1;
  text-align: center;
  padding: 7px 18px;
  font-size: 0.78rem;
  color: var(--muted);
  background: rgba(11, 13, 20, 0.4);
  border-right: 1px solid var(--border);
  font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 600;
}
.guide-cp-seg span:last-child { border-right: 0; }
.guide-cp-seg .guide-cp-seg--active { background: rgba(255, 76, 0, 0.12); color: var(--orange); }
.guide-cp-btn {
  background: rgba(255, 76, 0, 0.1);
  border: 1px solid rgba(255, 76, 0, 0.28);
  border-radius: 8px;
  color: var(--orange);
  font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 7px 18px;
  cursor: default;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
@media (max-width: 720px) {
  .guide-cp-row { grid-template-columns: 1fr; }
  .guide-cp-bottom { flex-direction: column; align-items: stretch; }
  .guide-cp-btn { text-align: center; }
}

/* ─── 05 · Blur overlay demo ─── */
.guide-blur-demo {
  margin: 22px 0 18px;
  padding: 28px 24px;
  background: var(--panel);
  border: 1px solid var(--border-strong, var(--border));
  border-radius: 12px;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--soft);
}
.guide-blur-line { max-width: 56ch; }
.guide-blur-mask {
  position: relative;
  display: inline-block;
  border-radius: 6px;
  padding: 2px 6px;
}
.guide-blur-text {
  font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.92em;
  color: var(--text);
}
.guide-blur-frost {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: rgba(20, 24, 32, 0.32);
  backdrop-filter: blur(8px) saturate(0.5);
  -webkit-backdrop-filter: blur(8px) saturate(0.5);
  animation: guideBlurReveal 5s ease-in-out infinite;
}
.guide-blur-label {
  position: absolute;
  top: -10px;
  right: -8px;
  font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--danger, #e01245);
  color: #1A1003;
  animation: guideBlurReveal 5s ease-in-out infinite;
}

@keyframes guideBlurReveal {
  0%, 20%   { opacity: 0; transform: translateY(-2px); }
  35%, 85%  { opacity: 1; transform: translateY(0); }
  100%      { opacity: 0; }
}

/* ─── 06 · Sidepanel mock ─── */
.guide-sp-mock {
  margin: 22px 0 18px;
  max-width: 360px;
  background: var(--panel);
  border: 1px solid var(--border-strong, var(--border));
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
}
.guide-sp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--border);
}
.guide-sp-tabs { display: flex; gap: 4px; }
.guide-sp-tab {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 600;
}
.guide-sp-tab--active { background: rgba(255, 76, 0, 0.1); color: var(--orange); }
.guide-sp-blur-btn {
  font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--orange);
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(11, 13, 20, 0.7);
  border: 1px solid rgba(255, 76, 0, 0.32);
  text-shadow: 0 0 8px rgba(255, 76, 0, 0.5);
}
.guide-sp-textarea {
  padding: 16px 14px;
  font-size: 0.9rem;
  color: var(--soft);
  line-height: 1.65;
  background: rgba(11, 13, 20, 0.4);
  border-bottom: 1px solid var(--border);
  min-height: 70px;
}
.guide-sp-findings {
  padding: 12px 14px;
  display: grid;
  gap: 8px;
  border-bottom: 1px solid var(--border);
}
.guide-sp-finding {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--soft);
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
}
.guide-sp-send-row {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  align-items: center;
}
.guide-sp-select {
  flex: 1;
  padding: 8px 10px;
  background: rgba(11, 13, 20, 0.5);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.78rem;
  color: var(--soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.guide-sp-chev { color: var(--muted); margin-left: 6px; }
.guide-sp-send {
  padding: 8px 14px;
  background: var(--orange);
  color: #04101A;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
}

/* ─── 07 · Manual Blur dock mock ─── */
.guide-dock-mock {
  display: flex;
  gap: 6px;
  margin: 22px 0 18px;
  padding: 12px;
  background: rgba(11, 13, 20, 0.82);
  border: 1px solid var(--border-strong, var(--border));
  border-radius: 14px;
  width: fit-content;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.guide-dock-tile {
  width: 60px;
  height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  color: var(--soft);
  font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  position: relative;
  animation: guideDockTilePulse 6s ease-in-out infinite;
}
.guide-dock-tile svg { width: 22px; height: 22px; }
.guide-dock-tile[data-i="0"] { animation-delay: 0s; }
.guide-dock-tile[data-i="1"] { animation-delay: 1s; }
.guide-dock-tile[data-i="2"] { animation-delay: 2s; }
.guide-dock-tile[data-i="3"] { animation-delay: 3s; }
.guide-dock-tile[data-i="4"] { animation-delay: 4s; }

@keyframes guideDockTilePulse {
  0%, 12%, 100% { background: rgba(255, 255, 255, 0.02); border-color: var(--border); color: var(--soft); box-shadow: none; }
  3%, 8%        { background: rgba(255, 76, 0, 0.1); border-color: rgba(255, 76, 0, 0.5); color: var(--orange); box-shadow: 0 0 18px rgba(255, 76, 0, 0.18); }
}

/* ─── 08 · Custom AI sites mock ─── */
.guide-cs-mock {
  margin: 22px 0 18px;
  padding: 18px;
  background: var(--panel);
  border: 1px solid var(--border-strong, var(--border));
  border-radius: 12px;
  max-width: 460px;
}
.guide-cs-row { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; }
.guide-cs-input {
  flex: 1;
  background: rgba(11, 13, 20, 0.6);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 8px 12px;
  font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.85rem;
  color: var(--text);
  outline: none;
}
.guide-cs-input:focus { border-color: rgba(255, 76, 0, 0.5); }
.guide-cs-add {
  padding: 8px 14px;
  background: var(--orange);
  color: #04101A;
  border-radius: 7px;
  font-size: 0.8rem;
  font-weight: 700;
}
.guide-cs-list { display: grid; gap: 6px; }
.guide-cs-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.85rem;
}
.guide-cs-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
  box-shadow: 0 0 10px var(--muted);
  animation: guideTinyPulse 2.6s ease-in-out infinite;
  flex-shrink: 0;
}
.guide-cs-name { flex: 1; color: var(--text); font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.84rem; }
.guide-cs-toggle {
  width: 30px;
  height: 16px;
  border-radius: 999px;
  background: rgba(255, 76, 0, 0.18);
  border: 1px solid rgba(255, 76, 0, 0.4);
  position: relative;
}
.guide-cs-thumb {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 8px rgba(255, 76, 0, 0.6);
}
.guide-cs-x {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 400;
  background: rgba(255, 255, 255, 0.025);
}

/* ─── 09 · Permissions: grid of cards ─── */
.guide-perm-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 22px 0 18px;
}
.guide-perm-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}
.guide-perm-name {
  font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.guide-perm-name code {
  font-family: inherit;
  background: rgba(255, 76, 0, 0.08);
  border: 1px solid rgba(255, 76, 0, 0.22);
  color: var(--orange);
  padding: 1px 6px;
  border-radius: 4px;
}
.guide-perm-why { font-size: 0.88rem; color: var(--soft); line-height: 1.55; }
@media (max-width: 720px) { .guide-perm-grid { grid-template-columns: 1fr; } }

/* ─── Mobile/tablet: let long inline <code> wrap.
   The default rule sets white-space: nowrap, which is right for short
   tokens (sk_live_, <all_urls>) on desktop but causes horizontal overflow
   at narrow viewports when a long string (e.g. a full CSP declaration)
   is used inline. Applied below 960px to match the breakpoint where the
   desktop right-rail TOC hides. ─── */
@media (max-width: 960px) {
  .doc-section code,
  .guide-perm-name code,
  dl.trouble code {
    /* Wrap as a whole unit to the next line; only break internally if the chip
       is genuinely wider than the container (e.g. a full CSP declaration). */
    display: inline-block;
    overflow-wrap: anywhere;
  }
}

/* ─── Mobile TOC drawer — slides in from the left on mobile/tablet.
   Built at runtime in main.js (initDocTocDrawer) by cloning the existing
   .doc-toc-list. Shows on any page that already has the desktop right-rail
   TOC, so privacy/terms/support/guide all benefit with zero per-page work. */
.doc-toc-trigger {
  position: fixed;
  /* Respect iOS home-indicator + landscape notch. env() falls back to 0 on
     non-iOS so the max() collapses to the literal value. */
  bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px));
  left: max(18px, calc(env(safe-area-inset-left) + 12px));
  z-index: 86;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: rgba(11, 13, 20, 0.92);
  border: 1px solid var(--border-strong, var(--border));
  color: var(--text);
  border-radius: 999px;
  font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.2s ease, opacity 0.2s ease, border-color 0.2s ease;
  /* iOS polish */
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
}
.doc-toc-trigger:hover { border-color: rgba(255, 76, 0, 0.4); }
.doc-toc-trigger:active { transform: scale(0.96); }
.doc-toc-trigger.is-hidden,
.doc-toc-trigger.is-near-footer { opacity: 0; pointer-events: none; transform: translateY(8px); }
.doc-toc-trigger svg { width: 14px; height: 14px; color: var(--muted); }

.doc-toc-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 14, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 109; /* above .main-nav (100) and .nav-pill (99) */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.doc-toc-backdrop.is-open { opacity: 1; pointer-events: auto; }

.doc-toc-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: min(86vw, 320px);
  height: 100dvh; /* dynamic viewport — handles iOS URL bar collapse */
  max-height: 100vh;
  z-index: 110; /* above backdrop (109), nav (100), nav-pill (99) */
  background: var(--panel);
  border-right: 1px solid var(--border-strong, var(--border));
  transform: translateX(-100%);
  /* Force GPU compositing so the slide animation stays smooth on older iOS */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
  transition: transform 0.26s cubic-bezier(0.2, 0.7, 0.2, 1);
  display: flex;
  flex-direction: column;
  box-shadow: 24px 0 48px rgba(0, 0, 0, 0.5);
  /* Respect notch / safe-area on iOS landscape */
  padding-left: env(safe-area-inset-left);
}
.doc-toc-drawer.is-open { transform: translateX(0); }
/* iOS safe-area band fix (confirmed on-device 2026-06-01): the drawer is a
   position:fixed element with a forced compositing layer (will-change/transform
   above). When merely transformed off-screen on close it LINGERS as a promoted
   layer, and under viewport-fit=cover iOS Safari repaints the dark safe-area
   bands top+bottom — present after the first open/close, sticking until reload.
   Stowing it with display:none on close drops the layer entirely → no band.
   (Sandbox A/B: transform-close BANDS even with no scroll; display:none-close
   does not.) Trades the slide-OUT animation for correctness; slide-IN on open
   is preserved by removing is-stowed + reflow before is-open (see main.js). */
.doc-toc-drawer.is-stowed,
.doc-toc-backdrop.is-stowed { display: none; }
.doc-toc-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(18px, calc(env(safe-area-inset-top) + 12px)) 20px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.doc-toc-drawer-label {
  font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
}
.doc-toc-drawer-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  color: var(--soft);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
}
.doc-toc-drawer-close:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); }
.doc-toc-drawer-list {
  list-style: none;
  margin: 0;
  /* Reserve room for the iOS home indicator at the bottom of the scroll area */
  padding: 12px 0 max(12px, calc(env(safe-area-inset-bottom) + 12px));
  overflow-y: auto;
  overscroll-behavior: contain; /* prevent rubber-band from bleeding into body */
  flex: 1;
  -webkit-overflow-scrolling: touch;
}
.doc-toc-drawer-list::-webkit-scrollbar { width: 4px; }
.doc-toc-drawer-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 2px; }
.doc-toc-drawer-list li { padding: 0; margin: 0; }
.doc-toc-drawer-list a {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 22px; /* slightly taller for thumb-friendly hit target */
  color: var(--soft);
  font-size: 0.94rem;
  line-height: 1.3;
  border-left: 2px solid transparent;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  -webkit-tap-highlight-color: rgba(255, 76, 0, 0.18);
  touch-action: manipulation;
}
.doc-toc-drawer-list a:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.02);
}
.doc-toc-drawer-list a.is-active {
  color: var(--muted);
  background: rgba(148, 163, 184, 0.06);
  border-left-color: var(--muted);
}
.doc-toc-drawer-list a .num {
  font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  width: 22px;
  flex-shrink: 0;
  letter-spacing: 0.04em;
}
.doc-toc-drawer-list a.is-active .num { color: var(--orange); }

body.doc-toc-locked { overflow: hidden; }
/* iOS: do NOT lock body overflow — locking body overflow/height stops iOS
   Safari's URL-bar collapse and repaints the dark safe-area bands top+bottom
   (same family as the position:fixed-body band bug). The non-passive touchmove
   handler in main.js (initDocTocDrawer → preventBgTouch) does the real scroll
   lock on iOS without touching body geometry, so the bands never come back.
   overflow:hidden above is only needed for wheel/pointer (desktop ≤960px). */
@supports (-webkit-touch-callout: none) {
  body.doc-toc-locked { overflow: visible; }
}

@media (max-width: 960px) {
  .doc-toc-trigger { display: inline-flex; }
}
@media (min-width: 961px) {
  .doc-toc-drawer,
  .doc-toc-backdrop,
  .doc-toc-trigger { display: none !important; }
}

/* ─── Reduced motion overrides ─── */
@media (prefers-reduced-motion: reduce) {
  .guide-pillar,
  .guide-flow-step { opacity: 1; transform: none; animation: none; }
  .guide-pillar-icon .g-pulse,
  .guide-pillar-icon .g-blur-bars rect,
  .guide-pillar-icon .g-redact-fill,
  .guide-pillar-icon .g-orbit-dot,
  .guide-modal-dot,
  .guide-modal-card,
  .guide-cs-dot,
  .guide-cp-cursor::after,
  .guide-radar-sweep,
  .guide-radar-mark,
  .guide-blur-frost,
  .guide-blur-label,
  .guide-dock-tile { animation: none !important; }
  .guide-blur-frost { opacity: 1; }
  .guide-blur-label { opacity: 1; }
  .guide-modal-card { opacity: 1; transform: none; }
}

/* ─── Pricing page ─────────────────────────────────────────────────────────── */

.pricing-main { padding: 8px 0 80px; }

/* Billing toggle */
.pricing-toggle {
  display: inline-flex;
  margin: 0 auto 36px;
  padding: 4px;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.pricing-toggle__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 20px;
  border: none; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 0.95rem; font-weight: 600;
  color: var(--muted); border-radius: 999px;
  transition: color 0.18s, background 0.18s;
}
.pricing-toggle__btn.is-active { background: var(--orange); color: #080A12; }
.pricing-toggle__btn:not(.is-active):hover { color: var(--text); }
.pricing-toggle__save {
  font-family: "Source Code Pro", ui-monospace, monospace;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(45, 212, 191, 0.16); color: var(--teal);
}
.pricing-toggle__btn.is-active .pricing-toggle__save { background: rgba(0,0,0,0.18); color: #080A12; }

/* Plan cards */
.pricing-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 320px));
  gap: 20px;
  justify-content: center;
  margin-bottom: 56px;
}
.pricing-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 28px 26px;
  display: flex; flex-direction: column;
}
.pricing-card--featured {
  border-color: rgba(255, 76, 0, 0.4);
  background: linear-gradient(180deg, rgba(255,76,0,0.05), var(--panel) 60%);
  box-shadow: 0 12px 40px rgba(0,0,0,0.32);
}
.pricing-card__badge {
  position: absolute; top: -11px; left: 26px;
  font-family: "Source Code Pro", ui-monospace, monospace;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  background: var(--orange); color: #080A12;
}
.pricing-card__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; }
.pricing-card__name { font-family: "Space Grotesk", sans-serif; font-size: 1.35rem; font-weight: 700; }
.pricing-card__tag { font-size: 0.88rem; color: var(--muted); }
.pricing-card__price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.pricing-card__strike { color: var(--muted); text-decoration: line-through; font-size: 1rem; }
.pricing-card__amount { font-family: "Space Grotesk", sans-serif; font-size: 2.6rem; font-weight: 700; line-height: 1; }
.pricing-card__period { color: var(--muted); font-size: 0.95rem; }
.pricing-card__blurb { color: var(--soft); font-size: 1rem; margin-bottom: 22px; min-height: 40px; }
.pricing-card__cta { width: 100%; margin-top: auto; }
.pricing-card__sub { width: 100%; font-size: 0.82rem; color: var(--orange); font-family: "Source Code Pro", ui-monospace, monospace; margin-top: -4px; }

/* [hidden] must beat the display:flex/inline-flex above (attribute selector wins on specificity) */
.pricing-card__price[hidden],
.pricing-card__cta[hidden] { display: none; }

/* Comparison matrix */
.pricing-matrix {
  max-width: 760px; margin: 0 auto;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  overflow: hidden;
}
.pricing-matrix__head,
.pricing-row {
  display: grid;
  grid-template-columns: 1fr 90px 90px;
  align-items: center;
}
.pricing-matrix__head {
  padding: 14px 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--border-strong);
}
.pricing-matrix__feature-label {
  font-family: "Source Code Pro", ui-monospace, monospace;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--muted);
}
.pricing-matrix__col {
  text-align: center;
  font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 1rem;
}
.pricing-matrix__col:last-child { color: var(--orange); }
.pricing-row {
  padding: 13px 20px;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.pricing-row:last-child { border-bottom: none; }
.pricing-row:hover { background: rgba(255,255,255,0.02); }
.pricing-row__feature { font-size: 1rem; color: var(--soft); }
.pricing-row__val { text-align: center; display: flex; align-items: center; justify-content: center; }
.pm-check { width: 19px; height: 19px; color: var(--teal); }
.pm-dash { color: var(--muted); opacity: 0.5; }
.pricing-row__val--num { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 1rem; color: var(--soft); }
.pricing-row__val--pro { color: var(--orange); }

.pricing-foot {
  max-width: 680px; margin: 28px auto 0;
  text-align: center; font-size: 0.95rem; color: var(--muted); line-height: 1.6;
}
.pricing-foot a { color: var(--orange); }
.pricing-foot a:hover { text-decoration: underline; }

@media (max-width: 680px) {
  .pricing-cards { grid-template-columns: minmax(0, 360px); }
  .pricing-matrix__head, .pricing-row { grid-template-columns: 1fr 74px 74px; }
  .pricing-row__feature { font-size: 0.92rem; }
  .pricing-matrix__head, .pricing-row { padding-left: 12px; padding-right: 12px; }
  /* Shrink value text + keep each value on one line so wide values like
     "Unlimited" don't overflow their column and collide with the Free value. */
  .pricing-matrix__col, .pricing-row__val--num { font-size: 0.82rem; }
  .pricing-row__val { white-space: nowrap; }
}