/* The public face: the landing page a signed-out visitor sees at "/", and the
   terms / privacy pages. Light paper, dark slate ink, one mint accent, a
   heavy display face for headlines and a mono face for labels — the opposite
   of the app's dark theme on purpose: the app is a tool, this is a pitch.
   Everything is scoped under `.landing` (set on <body> while signed out) so
   style.css's dark rules never leak in and these never leak out. */

@font-face { font-family: "Anybody"; font-style: normal; font-weight: 600 700; font-display: swap;
  src: url(fonts/anybody-600-700.woff2) format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(fonts/dmsans-400-500-600.woff2) format("woff2"); }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/spacemono-400.woff2) format("woff2"); }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fonts/spacemono-700.woff2) format("woff2"); }

:root {
  --l-bg: #e9e9e9; --l-paper: #f3f3f3; --l-ink: #3d3b4f; --l-muted: #66647a;
  --l-line: rgba(61, 59, 79, .22); --l-line-soft: rgba(61, 59, 79, .11);
  --l-mint: #28e99f; --l-seafoam: #c5ffd6; --l-slate: #3d3b4f; --l-slate-2: #4a4860;
  --l-display: "Anybody", "Helvetica Neue", Arial, sans-serif;
  --l-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --l-mono: "Space Mono", ui-monospace, Menlo, monospace;
  /* the app's own dark palette, for the product mocks */
  --l-app-bg: #121212; --l-app-card: #1c1c1c; --l-app-line: #2e2e2e; --l-app-ink: #ededed;
  --l-app-muted: #8f8f8f; --l-app-green: #3ecf8e; --l-app-yellow: #ffc53d; --l-app-red: #f04438;
}

body.landing { background: var(--l-bg); color: var(--l-ink); font-family: var(--l-sans); font-size: 16px; line-height: 1.5; }
.landing * { box-sizing: border-box; }
.landing a { color: inherit; text-decoration: none; }
.landing a:hover { text-decoration: none; }
.landing h1, .landing h2, .landing h3, .landing h4 { margin: 0; font-weight: 600; }
.landing p { margin: 0; }
.landing .muted { color: var(--l-muted); }

/* ── the column: a 1200px sheet with hairline rails, like ruled paper ──── */
.l-wrap { max-width: 1200px; margin: 0 auto; border-left: 1px solid var(--l-line); border-right: 1px solid var(--l-line); }
.l-section { padding: 72px 56px; border-top: 1px solid var(--l-line); }
.l-section-head { max-width: 720px; margin-bottom: 40px; }
.l-section-head h2 { margin: 10px 0 14px; }
.l-section-head p { font-size: 18px; color: var(--l-muted); }

/* ── type ──────────────────────────────────────────────────────────────── */
.landing h1 { font-family: var(--l-display); font-weight: 700; font-size: clamp(44px, 5vw, 72px); line-height: .98; letter-spacing: -.028em; }
.landing h2 { font-family: var(--l-display); font-weight: 600; font-size: clamp(32px, 4.2vw, 48px); line-height: 1; letter-spacing: -.035em; }
.landing h3 { font-family: var(--l-sans); font-weight: 600; font-size: 20px; letter-spacing: -.02em; line-height: 1.25; }
.l-tag { font-family: var(--l-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--l-muted); }
.l-mono { font-family: var(--l-mono); font-size: 13px; letter-spacing: .02em; }
.l-arrow { font-family: var(--l-mono); font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.l-arrow::after { content: " →"; text-decoration: none; display: inline-block; }
.l-arrow:hover { color: #1f1d2e; }

/* ── buttons: square tags with a chevron, interlocking when paired ─────── */
.landing .l-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 42px; padding: 0 22px 0 18px;
  font: 500 14px/1 var(--l-sans); letter-spacing: -.01em; border: 0; border-radius: 0; cursor: pointer; white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%, 9px 50%); transition: filter .12s ease; }
.landing .l-btn.first { clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 9px 100%, 0 50%); }
.landing .l-btn.dark { background: var(--l-slate); color: #eee; }
.landing .l-btn.mint { background: var(--l-mint); color: #0b1f16; }
.landing .l-btn.ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; clip-path: none; }
.landing .l-btn:hover:not(:disabled) { filter: brightness(1.06); }
.landing .l-btn:disabled { opacity: .5; cursor: not-allowed; }
.l-pair { display: inline-flex; }
.l-pair .l-btn + .l-btn { margin-left: -8px; }

/* ── nav ───────────────────────────────────────────────────────────────── */
.l-nav { position: sticky; top: 0; z-index: 10; background: rgba(233, 233, 233, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--l-line); }
.l-nav-in { display: flex; align-items: center; gap: 24px; height: 64px; padding: 0 24px 0 28px; border-left-color: transparent; border-right-color: transparent; }
.l-brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--l-display); font-weight: 700; font-size: 20px; letter-spacing: -.02em; }
.l-brand::before { content: ""; width: 11px; height: 11px; background: var(--l-mint); clip-path: polygon(0 0, 70% 0, 100% 50%, 70% 100%, 0 100%); }
.l-links { display: flex; gap: 28px; margin: 0 auto; }
.l-links a { font-family: var(--l-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding: 6px 0; border-bottom: 1px solid transparent; }
.l-links a:hover { border-bottom-color: var(--l-ink); }

/* ── hero ──────────────────────────────────────────────────────────────── */
.l-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; padding: 72px 56px 64px; align-items: center;
  background-image: radial-gradient(var(--l-line-soft) 1px, transparent 1.2px); background-size: 16px 16px; }
.l-hero .l-lead { font-size: 22px; line-height: 1.4; color: var(--l-ink); margin: 26px 0 30px; max-width: 520px; }
.l-form { display: flex; gap: 0; max-width: 520px; }
.l-form input { flex: 1; min-width: 0; height: 46px; padding: 0 14px; font: 15px var(--l-sans); color: var(--l-ink);
  background: #f7f7f7; border: 1px solid var(--l-ink); border-right: 0; border-radius: 0; outline: none; }
.l-form input:focus { background: #fff; }
.l-form .l-btn { height: 46px; }
.l-form-note { margin-top: 12px; font-size: 13px; color: var(--l-muted); }
.l-hero details { margin-top: 14px; }
.l-hero details summary { cursor: pointer; font-family: var(--l-mono); font-size: 12px; letter-spacing: .04em; color: var(--l-muted); }
.l-hero details .l-form { margin-top: 10px; }
.l-hero #auth-msg { margin-top: 12px; font-size: 14px; min-height: 1.4em; }
.l-hero .l-small { font-size: 12px; margin-top: 10px; }
.l-hero .l-small a, .l-legal-links a { text-decoration: underline; text-underline-offset: 3px; }
.l-hero .l-arrow { display: inline-block; margin-top: 26px; }

/* the mock beside the headline: the test as written, then what the tester saw */
.l-demo { display: grid; gap: 14px; }
/* `color` is set, not inherited: the closing panel puts this card on the dark band. */
.l-doc { background: var(--l-paper); color: var(--l-ink); border: 1px solid var(--l-line); padding: 18px 20px 20px; position: relative; }
.l-doc h4 { font-size: 18px; margin: 8px 0 8px; letter-spacing: -.01em; }
.l-doc ol { margin: 0; padding-left: 22px; font-size: 15px; line-height: 1.5; }
.l-doc ol li { margin: 3px 0; }
.l-doc ol li::marker { font-family: var(--l-mono); font-size: 12px; color: var(--l-muted); }
.l-result { background: var(--l-app-card); color: var(--l-app-ink); border: 1px solid var(--l-app-line); border-left: 3px solid var(--l-app-red); padding: 16px 20px 16px; font-size: 14px; }
.l-result .l-tag { color: var(--l-app-muted); }
.l-verdict { margin: 8px 0 6px; font-weight: 600; font-size: 16px; }
.l-verdict.failed { color: var(--l-app-red); }
.l-verdict.passed { color: var(--l-app-green); }
.l-verdict.inconclusive { color: var(--l-app-yellow); }
.l-verdict span { color: var(--l-app-muted); font-weight: 400; }
.l-result .l-lead { color: var(--l-app-ink); font-size: 15px; margin: 0 0 10px; line-height: 1.4; }
.l-steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--l-app-line); }
.l-steps li { display: flex; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--l-app-line); color: var(--l-app-ink); }
.l-steps li::before { font-family: var(--l-mono); font-size: 12px; width: 16px; flex: none; }
.l-steps li.ok::before { content: "✓"; color: var(--l-app-green); }
.l-steps li.bad::before { content: "✗"; color: var(--l-app-red); }
.l-steps li.hm::before { content: "?"; color: var(--l-app-yellow); }
.l-steps li b { font-family: var(--l-mono); font-weight: 400; font-size: 12px; color: var(--l-app-muted); }
.l-steps li em { font-style: normal; font-size: 12px; color: var(--l-app-muted); margin-left: auto; white-space: nowrap; border: 1px solid var(--l-app-line); border-radius: 10px; padding: 1px 8px; }
.l-result-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; font-family: var(--l-mono); font-size: 11px; color: var(--l-app-muted); letter-spacing: .02em; }
.l-chip { border: 1px solid var(--l-app-line); border-radius: 6px; padding: 4px 9px; color: var(--l-app-ink); font-family: var(--l-sans); font-size: 12px; letter-spacing: 0; }

/* ── the strip under the hero ──────────────────────────────────────────── */
.l-strip { display: flex; border-top: 1px solid var(--l-line); }
.l-strip span { flex: 1; padding: 14px 20px; font-family: var(--l-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; text-align: center; color: var(--l-muted); border-right: 1px solid var(--l-line); }
.l-strip span:last-child { border-right: 0; }

/* ── how it works: three numbered steps with a sketch each ─────────────── */
.l-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--l-line); }
.l-three > article { padding: 22px 22px 26px; border-right: 1px solid var(--l-line); display: flex; flex-direction: column; gap: 14px; }
.l-three > article:last-child { border-right: 0; }
.l-stepno { font-family: var(--l-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.l-stepno b { font-weight: 700; }
.l-three h3 { margin-top: 2px; }
.l-three p { font-size: 15px; color: var(--l-muted); }
.l-sketch { background: var(--l-app-bg); color: var(--l-app-ink); border: 1px solid var(--l-app-line); padding: 14px; min-height: 150px; font-size: 13px; line-height: 1.45; }
.l-sketch .l-tag { color: var(--l-app-muted); margin-bottom: 8px; }
.l-sketch .doc-title { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.l-sketch .doc-line { display: flex; gap: 8px; color: var(--l-app-ink); padding: 2px 0; }
.l-sketch .doc-line b { font-family: var(--l-mono); font-weight: 400; color: var(--l-app-muted); font-size: 11px; width: 14px; flex: none; }
.l-sketch .doc-line.caret::after { content: ""; width: 1px; height: 14px; background: var(--l-app-green); align-self: center; animation: l-blink 1s steps(2) infinite; }
@keyframes l-blink { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .l-sketch .doc-line.caret::after { animation: none; } }
.l-sketch .kv { display: grid; grid-template-columns: 70px 1fr; gap: 6px 10px; }
.l-sketch .kv span:nth-child(odd) { color: var(--l-app-muted); }
.l-sketch .pill { display: inline-block; border: 1px solid var(--l-app-line); border-radius: 12px; padding: 1px 9px; margin: 2px 4px 2px 0; font-size: 12px; }
.l-sketch .pill.on { border-color: var(--l-app-green); color: var(--l-app-green); }
.l-sketch .runbtn { display: inline-block; margin-top: 10px; background: var(--l-app-green); color: #0a1f16; font-weight: 600; font-size: 12px; padding: 5px 12px; border-radius: 6px; }
.l-sketch .row { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--l-app-line); }
.l-sketch .row:last-child { border-bottom: 0; }
.l-sketch .row i { font-style: normal; font-size: 12px; }
.l-sketch .row i.p { color: var(--l-app-green); } .l-sketch .row i.f { color: var(--l-app-red); } .l-sketch .row i.q { color: var(--l-app-yellow); }

/* ── examples: a dark band with three result cards ─────────────────────── */
.l-band { background: var(--l-slate); color: #eee; }
.l-band .l-wrap { border-color: rgba(255, 255, 255, .14); }
.l-band .l-section { border-top: 0; }
.l-band h2 { color: var(--l-seafoam); }
.l-band .l-section-head p { color: rgba(238, 238, 238, .72); }
.l-band .l-tag { color: rgba(238, 238, 238, .6); }
.l-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.l-cards .l-result { border-left-width: 3px; }
.l-cards .l-result.passed { border-left-color: var(--l-app-green); }
.l-cards .l-result.inconclusive { border-left-color: var(--l-app-yellow); }
.l-cards .l-result .l-tag { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; }
.l-cards .l-result .l-tag span:first-child { white-space: nowrap; }
.l-cards .l-result .l-tag span:last-child { text-align: right; overflow-wrap: anywhere; }
.l-band .l-arrow { color: var(--l-seafoam); margin-top: 28px; display: inline-block; }

/* ── numbered lists of features (your stack, tests that don't rot) ─────── */
.l-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--l-line); }
.l-grid.two-rows { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.l-grid > div { padding: 22px 22px 26px; border-right: 1px solid var(--l-line); }
.l-grid > div:nth-child(4n) { border-right: 0; }
.l-grid.two-rows > div:nth-child(4n) { border-right: 1px solid var(--l-line); }
.l-grid.two-rows > div:nth-child(3n) { border-right: 0; }
.l-grid.two-rows > div:nth-child(-n+3) { border-bottom: 1px solid var(--l-line); }
.l-grid .l-no { font-family: var(--l-mono); font-size: 12px; letter-spacing: .08em; color: var(--l-muted); margin-bottom: 26px; }
.l-grid h3 { margin-bottom: 8px; }
.l-grid p { font-size: 15px; color: var(--l-muted); }

/* ── pricing ───────────────────────────────────────────────────────────── */
.l-price { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--l-line); background: var(--l-paper); }
.l-price > div { padding: 30px 32px; }
.l-price > div:first-child { border-right: 1px solid var(--l-line); }
.l-price .big { font-family: var(--l-display); font-weight: 700; font-size: 56px; letter-spacing: -.03em; line-height: 1; margin: 8px 0 12px; }
.l-price .big small { font-family: var(--l-mono); font-weight: 400; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--l-muted); margin-left: 10px; }
.l-price ul { margin: 6px 0 0; padding: 0; list-style: none; }
.l-price li { padding: 9px 0; border-bottom: 1px solid var(--l-line-soft); font-size: 15px; display: flex; gap: 10px; }
.l-price li::before { content: "→"; font-family: var(--l-mono); color: var(--l-muted); }
.l-price li:last-child { border-bottom: 0; }
.l-price p.note { font-size: 14px; color: var(--l-muted); margin-top: 14px; }

/* ── faq ───────────────────────────────────────────────────────────────── */
.l-faq { border-top: 1px solid var(--l-line); }
.landing details.l-q { border-bottom: 1px solid var(--l-line); margin: 0; }
.landing details.l-q summary { cursor: pointer; list-style: none; padding: 18px 0; font-weight: 500; font-size: 17px; display: flex; justify-content: space-between; gap: 16px; color: var(--l-ink); }
.landing details.l-q summary::-webkit-details-marker { display: none; }
.landing details.l-q summary::after { content: "+"; font-family: var(--l-mono); color: var(--l-muted); flex: none; }
.landing details.l-q[open] summary::after { content: "–"; }
.landing details.l-q p { padding: 0 0 18px; max-width: 720px; color: var(--l-muted); font-size: 15px; }

/* ── closing panel + footer ────────────────────────────────────────────── */
.l-close { background: var(--l-slate); color: #eee; }
.l-close .l-wrap { border-color: rgba(255, 255, 255, .14); }
.l-close .l-section { border-top: 0; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.l-close h2 { color: var(--l-seafoam); font-size: clamp(30px, 3.6vw, 44px); }
.l-close p { color: rgba(238, 238, 238, .75); font-size: 17px; margin-top: 14px; max-width: 520px; }
.l-close .l-btn.ghost { color: #eee; }
.l-close .l-pair { margin-top: 26px; }
.l-foot { border-top: 1px solid var(--l-line); }
.l-foot .l-wrap { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 24px; padding: 36px 56px 48px; }
.l-foot .l-tag { margin-bottom: 12px; }
.l-foot ul { list-style: none; margin: 0; padding: 0; }
.l-foot li { padding: 4px 0; font-size: 14px; }
.l-foot li a:hover { text-decoration: underline; text-underline-offset: 3px; }
.l-foot .l-brand { margin-bottom: 10px; }
.l-foot .l-fine { font-size: 13px; color: var(--l-muted); max-width: 300px; }

/* ── the terms / privacy pages share the sheet ─────────────────────────── */
.landing .legal { max-width: 720px; margin: 0 auto; padding: 48px 24px 72px; }
.landing .legal h1 { font-size: clamp(34px, 5vw, 48px); margin-bottom: 4px; }
.landing .legal h3 { margin: 26px 0 6px; }
.landing .legal p, .landing .legal li { line-height: 1.55; }
.landing .legal p.small { font-size: 13px; }

/* ── phones and narrow windows ─────────────────────────────────────────── */
@media (max-width: 960px) {
  .l-hero { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .l-cards, .l-three, .l-grid, .l-grid.two-rows { grid-template-columns: minmax(0, 1fr); }
  .l-three > article, .l-grid > div, .l-grid.two-rows > div { border-right: 0 !important; border-bottom: 1px solid var(--l-line); }
  .l-three > article:last-child, .l-grid > div:last-child { border-bottom: 0; }
  .l-price, .l-close .l-section { grid-template-columns: minmax(0, 1fr); }
  .l-price > div:first-child { border-right: 0; border-bottom: 1px solid var(--l-line); }
  .l-foot .l-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .l-wrap { border-left: 0; border-right: 0; }
  .l-section, .l-hero { padding: 44px 16px; }
  .l-nav-in { padding: 0 16px; gap: 12px; }
  .l-links { display: none; }
  .l-nav-cta .l-btn.dark { display: none; }
  .l-strip { flex-wrap: wrap; }
  .l-strip span { flex: 1 1 50%; border-bottom: 1px solid var(--l-line); border-right: 0; }
  .l-form { flex-direction: column; }
  .l-form input { border-right: 1px solid var(--l-ink); }
  .l-form .l-btn { clip-path: none; }
  .l-foot .l-wrap { grid-template-columns: minmax(0, 1fr); padding: 32px 16px 40px; }
  .l-pair { flex-direction: column; gap: 8px; }
  .l-pair .l-btn + .l-btn { margin-left: 0; }
  .landing .l-btn, .landing .l-btn.first { clip-path: none; }
  .landing .legal { padding: 32px 16px 56px; }
}