/* Hallmark · macrostructure: Split Studio · genre: modern-minimal (custom theme)
 * theme: custom "Drafting Vellum" · vibe: "blueprint precision, warm vellum paper, cyanotype dark mode"
 * paper(light) oklch(95% 0.014 85) · paper(dark) oklch(15% 0.03 250) · accent oklch(48% 0.19 260) / oklch(74% 0.15 245)
 * display: Space Grotesk · body: IBM Plex Sans · outlier: JetBrains Mono (wordmark + sheet labels + stats only)
 * nav: N1b canonical SaaS three-section · footer: Ft1 mast-headed, styled as a blueprint title block
 * hero: H2 split diptych, ratio 6/6, right = CSS/SVG schematic panel (Tier A/B) · polish: none
 * NOTE: light/dark deliberately swap anchor hue (warm vellum -> cyanotype blue) — mirrors the
 * shipped app's own tokens (static/css/base.css), a real brand decision, not a slip.
 * Ported from the reviewed Artifact mockup into a vendored stylesheet (P22 landing page).
 */

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../vendor/fonts/space-grotesk-500.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../vendor/fonts/space-grotesk-700.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../vendor/fonts/plex-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../vendor/fonts/plex-sans-600.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../vendor/fonts/jbmono-500.woff2") format("woff2");
}

.landing {
  color-scheme: light dark;

  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --text-xs: 0.72rem;
  --text-sm: 0.86rem;
  --text-base: 1rem;
  --text-md: 1.2rem;
  --text-lg: 1.5rem;
  --text-xl: 1.95rem;
  --text-2xl: 2.55rem;
  --text-3xl: 3.35rem;
  --text-display: clamp(2.5rem, 4vw + 1.2rem, 4.75rem);
  --text-display-s: clamp(2rem, 3vw + 1rem, 3.4rem);

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.25rem;
  --space-xl: 3.5rem;
  --space-2xl: 5.5rem;
  --space-3xl: 8rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-med: 320ms;
  --dur-slow: 560ms;

  --radius-sm: 3px;
  --radius-md: 6px;

  --color-paper: oklch(95.5% 0.014 85);
  --color-paper-2: oklch(92% 0.017 85);
  --color-panel: oklch(98% 0.008 85);
  --color-rule: oklch(80% 0.02 85);
  --color-ink: oklch(21% 0.022 260);
  --color-muted: oklch(45% 0.02 260);
  --color-faint: oklch(58% 0.015 260);
  --color-accent: oklch(48% 0.19 260);
  --color-accent-ink: oklch(99% 0.005 260);
  --color-accent-soft: oklch(91% 0.035 260);
  --color-redline: oklch(52% 0.19 35);
  --color-redline-soft: oklch(92% 0.04 35);
  --color-assumed: oklch(60% 0.11 75);
  --color-focus: oklch(55% 0.2 260);
  --shadow-card: 0 1px 2px oklch(21% 0.02 260 / 0.06), 0 10px 24px oklch(21% 0.02 260 / 0.08);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .landing {
    --color-paper: oklch(16% 0.03 250);
    --color-paper-2: oklch(20% 0.032 250);
    --color-panel: oklch(23% 0.034 250);
    --color-rule: oklch(34% 0.03 250);
    --color-ink: oklch(93% 0.018 230);
    --color-muted: oklch(76% 0.02 235);
    --color-faint: oklch(60% 0.02 240);
    --color-accent: oklch(76% 0.14 245);
    --color-accent-ink: oklch(14% 0.02 250);
    --color-accent-soft: oklch(30% 0.05 245);
    --color-redline: oklch(72% 0.16 40);
    --color-redline-soft: oklch(30% 0.06 35);
    --color-assumed: oklch(76% 0.11 80);
    --color-focus: oklch(80% 0.15 245);
    --shadow-card: 0 1px 2px oklch(0% 0 0 / 0.3), 0 10px 28px oklch(0% 0 0 / 0.35);
  }
}
:root[data-theme="dark"] .landing {
  --color-paper: oklch(16% 0.03 250);
  --color-paper-2: oklch(20% 0.032 250);
  --color-panel: oklch(23% 0.034 250);
  --color-rule: oklch(34% 0.03 250);
  --color-ink: oklch(93% 0.018 230);
  --color-muted: oklch(76% 0.02 235);
  --color-faint: oklch(60% 0.02 240);
  --color-accent: oklch(76% 0.14 245);
  --color-accent-ink: oklch(14% 0.02 250);
  --color-accent-soft: oklch(30% 0.05 245);
  --color-redline: oklch(72% 0.16 40);
  --color-redline-soft: oklch(30% 0.06 35);
  --color-assumed: oklch(76% 0.11 80);
  --color-focus: oklch(80% 0.15 245);
  --shadow-card: 0 1px 2px oklch(0% 0 0 / 0.3), 0 10px 28px oklch(0% 0 0 / 0.35);
}
:root[data-theme="light"] .landing {
  --color-paper: oklch(95.5% 0.014 85);
  --color-paper-2: oklch(92% 0.017 85);
  --color-panel: oklch(98% 0.008 85);
  --color-rule: oklch(80% 0.02 85);
  --color-ink: oklch(21% 0.022 260);
  --color-muted: oklch(45% 0.02 260);
  --color-faint: oklch(58% 0.015 260);
  --color-accent: oklch(48% 0.19 260);
  --color-accent-ink: oklch(99% 0.005 260);
  --color-accent-soft: oklch(91% 0.035 260);
  --shadow-card: 0 1px 2px oklch(21% 0.02 260 / 0.06), 0 10px 24px oklch(21% 0.02 260 / 0.08);
}

.landing * { box-sizing: border-box; min-width: 0; }
html:has(.landing) { overflow-x: clip; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(.landing) { scroll-behavior: auto; } }

.landing {
  display: block;
  background: var(--color-paper);
  background-image:
    linear-gradient(var(--color-rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-rule) 1px, transparent 1px);
  background-size: 32px 32px;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.landing img, .landing svg { max-width: 100%; display: block; }
.landing a { color: inherit; }
.landing .honeypot-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.landing .wrap {
  max-width: 74rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.landing h1, .landing h2, .landing h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
  overflow-wrap: anywhere;
}
.landing p { max-width: 62ch; margin: 0; }
.landing .lede { font-size: var(--text-md); color: var(--color-muted); line-height: 1.55; }

.landing .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* A solid-enough backdrop for body copy sitting over the drafting grid —
   the grid reads as texture in the margins, not as noise behind the words. */
.landing .panel {
  background: color-mix(in oklch, var(--color-panel) 85%, transparent);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}
@media (max-width: 40rem) {
  .landing .panel { padding: var(--space-md); }
}

/* Persona self-select flag — the label a scanning visitor needs to see
   before anything else in the block, so it's sized like a heading, not
   a caption. */
.landing .persona__flag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: 1.1;
  color: var(--color-accent);
  background: var(--color-accent-soft);
  padding: var(--space-2xs) var(--space-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
}
@media (max-width: 40rem) {
  .landing .persona__flag { font-size: var(--text-lg); }
}

.landing .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
  padding: 0.85em 1.4em;
  min-height: 44px;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  text-decoration: none;
}
.landing .btn-primary { background: var(--color-accent); color: var(--color-accent-ink); }
.landing .btn-primary:hover { transform: translateY(-1px); }
.landing .btn-primary:active { transform: translateY(0); }
.landing .btn-outline { background: transparent; color: var(--color-ink); border-color: var(--color-rule); }
.landing .btn-outline:hover { border-color: var(--color-accent); color: var(--color-accent); }
.landing .btn:focus-visible, .landing input:focus-visible, .landing a:focus-visible, .landing summary:focus-visible {
  outline: 2.5px solid var(--color-focus);
  outline-offset: 2px;
}
.landing .btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }

.landing .nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding-block: var(--space-sm);
  background: color-mix(in oklch, var(--color-paper) 88%, transparent);
  backdrop-filter: blur(10px) saturate(1.2);
  border-bottom: 1px solid var(--color-rule);
}
.landing .wordmark {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-md);
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4ch;
}
.landing .wordmark .tick { color: var(--color-accent); }
.landing .nav__links {
  display: flex; align-items: center; gap: var(--space-lg);
  font-size: var(--text-sm);
}
.landing .nav__links a { text-decoration: none; color: var(--color-muted); transition: color var(--dur-fast) var(--ease-out); }
.landing .nav__links a:hover { color: var(--color-ink); }
.landing .nav__cta { display: flex; align-items: center; gap: var(--space-sm); }
@media (max-width: 52rem) {
  .landing .nav__links { display: none; }
}

.landing section { padding-block: var(--space-xl); }
.landing .section-head { margin-bottom: var(--space-lg); max-width: 46rem; }
.landing .section-head h2 { font-size: var(--text-3xl); margin-top: var(--space-2xs); }
@media (max-width: 40rem) {
  .landing section { padding-block: var(--space-lg); }
  .landing .section-head h2 { font-size: var(--text-2xl); }
}

/* Visible by default — the fade-in-on-scroll effect is added ONLY once the
   page's script confirms IntersectionObserver ran (html.reveal-armed, set
   at the top of <body>). A slow/blocked/failed script, a no-JS crawler, or
   a browser without IntersectionObserver must never hide real page content
   — that's the opposite of progressive enhancement. */
html.reveal-armed .landing .reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
/* Must match the armed rule's specificity (html + 3 classes) or beat it —
   a bare `.landing .reveal.is-visible` (3 classes, no type selector) loses
   the specificity tie-break to the `html.` prefix above and never shows. */
html.reveal-armed .landing .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  /* Same specificity as the armed rule above (html.reveal-armed .landing
     .reveal) so this actually wins by cascade order — a plain `.landing
     .reveal` rule here would lose to it and reduced-motion users would
     still get the hide-until-scrolled behavior this is meant to skip. */
  html.reveal-armed .landing .reveal { opacity: 1; transform: none; transition: none; }
}

.landing .hero { padding-block: var(--space-2xl) var(--space-2xl); }
.landing .hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: center; }
.landing .hero h1 { font-size: var(--text-display); max-width: 13ch; }
.landing .hero__lede { margin-top: var(--space-md); font-size: var(--text-md); }
.landing .hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-top: var(--space-lg); }
.landing .hero__reassure { font-size: var(--text-xs); color: var(--color-faint); font-family: var(--font-mono); }
.landing .hero__link { font-size: var(--text-sm); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-rule); }
.landing .hero__link:hover { text-decoration-color: var(--color-accent); color: var(--color-accent); }
@media (max-width: 60rem) {
  .landing .hero__grid { grid-template-columns: 1fr; }
  .landing .hero h1 { max-width: none; }
}
@media (max-width: 40rem) {
  .landing .hero h1 { font-size: var(--text-display-s); }
}

/* Shared shell for every "panel card" on the page (schematic sheet, decision
   log, digest, agent feature card) — background/border/radius/shadow are
   identical everywhere; only padding and a couple of extras vary per use. */
.landing .card {
  background: var(--color-panel);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.landing .sheet {
  padding: var(--space-lg);
  position: relative;
}
.landing .sheet__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-faint);
  letter-spacing: 0.08em;
  display: flex; justify-content: space-between;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-xs);
  border-bottom: 1px dashed var(--color-rule);
}
.landing .sheet__plan { width: 100%; height: auto; }
.landing .sheet__chips { display: flex; flex-direction: column; gap: var(--space-xs); margin-top: var(--space-md); }
.landing .chip {
  display: flex; align-items: center; gap: var(--space-xs);
  font-size: var(--text-sm);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-rule);
  background: var(--color-paper);
}
.landing .chip .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.landing .chip.is-open .dot { background: var(--color-accent); }
.landing .chip.is-waiting .dot { background: var(--color-redline); }
.landing .chip.is-done .dot { background: var(--color-faint); }
.landing .chip strong { font-family: var(--font-mono); font-weight: 500; }

.landing .steps { display: grid; gap: var(--space-lg); }
.landing .step { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--space-md); padding-block: var(--space-md); border-top: 1px solid var(--color-rule); }
.landing .step:first-child { border-top: none; }
.landing .step__num { font-family: var(--font-mono); font-size: var(--text-lg); color: var(--color-accent); font-weight: 500; }
.landing .step h3 { font-size: var(--text-lg); margin-bottom: var(--space-2xs); }
.landing .step p { color: var(--color-muted); }
@media (max-width: 40rem) {
  .landing .step { grid-template-columns: 1fr; gap: var(--space-2xs); }
}

.landing .persona { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: center; }
.landing .persona.is-reverse .persona__text { order: 2; }
.landing .persona.is-reverse .persona__proof { order: 1; }
.landing .persona h2 { font-size: var(--text-2xl); margin-bottom: var(--space-md); }
.landing .persona ul { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: grid; gap: var(--space-sm); }
.landing .persona li { display: grid; grid-template-columns: 1.3rem 1fr; gap: var(--space-xs); color: var(--color-muted); }
.landing .persona li::before { content: "—"; color: var(--color-accent); font-family: var(--font-mono); }
.landing .persona + .persona { margin-top: var(--space-xl); }
@media (max-width: 60rem) {
  .landing .persona, .landing .persona.is-reverse { grid-template-columns: 1fr; }
  .landing .persona.is-reverse .persona__text, .landing .persona.is-reverse .persona__proof { order: initial; }
}

.landing .log-card { overflow: hidden; }
.landing .log-card__row { padding: var(--space-md); border-bottom: 1px solid var(--color-rule); }
.landing .log-card__row:last-child { border-bottom: none; }
.landing .log-card__top { display: flex; justify-content: space-between; gap: var(--space-sm); font-size: var(--text-sm); }
.landing .log-card__title { font-weight: 600; }
.landing .log-card__meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-faint); white-space: nowrap; }
.landing .log-card__why { color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-3xs); }

.landing .digest-card { padding: var(--space-md); }
.landing .digest-card__head { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-faint); letter-spacing: 0.06em; margin-bottom: var(--space-sm); }
.landing .digest-line { display: flex; gap: var(--space-xs); padding-block: var(--space-2xs); font-size: var(--text-sm); align-items: baseline; }
.landing .digest-line .tag { font-family: var(--font-mono); font-size: var(--text-xs); padding: 0.15em 0.5em; border-radius: 3px; flex: none; }
.landing .tag.overdue { background: var(--color-redline-soft); color: var(--color-redline); }
.landing .tag.due { background: var(--color-accent-soft); color: var(--color-accent); }

.landing .letter { max-width: 42rem; }
.landing .letter__mark { font-family: var(--font-mono); color: var(--color-accent); font-size: var(--text-sm); margin-bottom: var(--space-md); }
.landing .letter p { margin-bottom: var(--space-md); color: var(--color-muted); font-size: var(--text-md); line-height: 1.65; max-width: 60ch; }
.landing .letter p:last-of-type { margin-bottom: 0; }
.landing .letter__sign { margin-top: var(--space-lg); font-family: var(--font-display); font-weight: 600; color: var(--color-ink); }

.landing .faq { display: grid; gap: 0; max-width: 52rem; }
.landing .faq-item { border-top: 1px solid var(--color-rule); padding-block: var(--space-md); }
.landing .faq-item:last-child { border-bottom: 1px solid var(--color-rule); }
.landing .faq-item summary { cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); list-style: none; }
.landing .faq-item summary::-webkit-details-marker { display: none; }
.landing .faq-item summary::after { content: "+"; font-family: var(--font-mono); color: var(--color-accent); font-size: var(--text-lg); transition: transform var(--dur-fast) var(--ease-out); flex: none; }
.landing .faq-item[open] summary::after { transform: rotate(45deg); }
.landing .faq-item p { margin-top: var(--space-sm); color: var(--color-muted); max-width: 60ch; }

/* ---------- agentic feature cards ---------- */
.landing .agent-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); margin-top: var(--space-xl); }
.landing .agent-card { padding: var(--space-lg); }
.landing .agent-card__tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}
.landing .agent-card h3 { font-size: var(--text-lg); margin-bottom: var(--space-xs); }
.landing .agent-card p { color: var(--color-muted); font-size: var(--text-sm); }
.landing .agent-card__detail {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px dashed var(--color-rule);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-faint);
}
@media (max-width: 60rem) {
  .landing .agent-grid { grid-template-columns: 1fr; }
}

/* ---------- forecast / gantt panel ("for both") ---------- */
.landing .forecast-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: center; margin-top: var(--space-xl); }
.landing .forecast-layout__text ul { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: grid; gap: var(--space-sm); }
.landing .forecast-layout__text li { display: grid; grid-template-columns: 1.3rem 1fr; gap: var(--space-xs); color: var(--color-muted); font-size: var(--text-sm); }
.landing .forecast-layout__text li::before { content: "—"; color: var(--color-accent); font-family: var(--font-mono); }
.landing .gantt-panel__legend, .landing .plan-card__legend { display: flex; flex-wrap: wrap; gap: var(--space-md); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-faint); }
.landing .gantt-panel__legend span, .landing .plan-card__legend span { display: inline-flex; align-items: center; gap: var(--space-3xs); }
.landing .gantt-panel__legend { margin-top: var(--space-md); }
.landing .gantt-panel__legend .swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
@media (max-width: 60rem) {
  .landing .forecast-layout { grid-template-columns: 1fr; }
}

/* ---------- GC proof: draft-plan + jurisdictions card ---------- */
.landing .persona__proof { display: flex; flex-direction: column; gap: var(--space-md); }
.landing .plan-card__legend { margin-top: var(--space-sm); }
.landing .plan-card__legend .swatch { width: 12px; height: 3px; border-radius: 1px; display: inline-block; }
.landing .plan-card__legend .swatch--dash { height: 0; border-top: 2px dashed; background: none; }
.landing .juris { margin-top: var(--space-md); padding-top: var(--space-sm); border-top: 1px solid var(--color-rule); }
.landing .juris__head { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; color: var(--color-faint); margin-bottom: var(--space-xs); }
.landing .juris__chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.landing .juris-chip {
  font-family: var(--font-mono); font-size: var(--text-xs);
  padding: 0.2em 0.6em; border-radius: 3px;
  background: var(--color-accent-soft); color: var(--color-accent);
}
.landing .juris-chip.is-out { background: transparent; color: var(--color-faint); border: 1px dashed var(--color-rule); }

.landing .cta-strip { background: var(--color-paper-2); border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); }
.landing .cta-strip__inner { text-align: center; max-width: 38rem; margin-inline: auto; }
.landing .cta-strip h2 { font-size: var(--text-2xl); }
.landing .cta-strip .lede { margin: var(--space-sm) auto 0; }
.landing .form-row { display: flex; gap: var(--space-xs); margin-top: var(--space-lg); max-width: 26rem; margin-inline: auto; }
.landing .form-row input[type="email"] {
  flex: 1; min-width: 0;
  font-family: var(--font-body); font-size: var(--text-sm);
  padding: 0.85em 1em; min-height: 44px;
  border: 1.5px solid var(--color-rule); border-radius: var(--radius-sm);
  background: var(--color-panel); color: var(--color-ink);
}
.landing .form-row input::placeholder { color: var(--color-faint); }
.landing .form-row input:focus-visible { outline: 2.5px solid var(--color-focus); outline-offset: 2px; border-color: var(--color-accent); }
@media (max-width: 30rem) {
  .landing .form-row { flex-direction: column; }
  .landing .form-row .btn { width: 100%; justify-content: center; }
}
.landing .reassure { margin-top: var(--space-sm); font-size: var(--text-xs); color: var(--color-faint); font-family: var(--font-mono); }
.landing .cta-strip__sent { font-size: var(--text-md); color: var(--color-accent); font-weight: 600; margin-top: var(--space-lg); }

.landing .footer { border-top: 1px solid var(--color-rule); padding-block: var(--space-xl) var(--space-lg); }
.landing .titleblock { border: 1px solid var(--color-rule); border-radius: var(--radius-md); display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; }
.landing .titleblock__cell { padding: var(--space-md); border-left: 1px solid var(--color-rule); }
.landing .titleblock__cell:first-child { border-left: none; }
.landing .titleblock__label { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-faint); letter-spacing: 0.08em; margin-bottom: var(--space-3xs); }
.landing .titleblock__value { font-size: var(--text-sm); }
.landing .footer__links { display: flex; gap: var(--space-md); flex-wrap: wrap; }
.landing .footer__links a { font-size: var(--text-sm); color: var(--color-muted); text-decoration: none; }
.landing .footer__links a:hover { color: var(--color-accent); }
.landing .footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); font-size: var(--text-xs); color: var(--color-faint); font-family: var(--font-mono); }
@media (max-width: 40rem) {
  .landing .titleblock { grid-template-columns: 1fr 1fr; }
  .landing .titleblock__cell:nth-child(3) { border-left: none; }
}