/* ════════════════════════════════════════════════════════════════════
   Delayer public marketing site — page styles.

   Loaded AFTER _shared/tokens.css and _shared/fonts.css (see index.html),
   so every colour below resolves from the canonical Iris token set. There
   are NO colour literals in this file: a raw hex here would silently
   diverge from the app the first time the palette moves, which is the
   exact failure the token layer exists to prevent.

   The one page-local token is --hero-glow, derived from --accent via
   color-mix so it follows the theme on its own. It lives here rather than
   in ui/_shared/tokens.css because it is a decorative marketing gradient
   with zero app consumers, and tokens.css is contrast-gated for UI ink.
   ════════════════════════════════════════════════════════════════════ */

:root {
  --hero-glow: color-mix(in srgb, var(--accent) 16%, transparent);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 760px; }
section { padding: 88px 0; border-top: 1px solid var(--border); }
section:first-of-type { border-top: none; }

h1, h2, h3 { text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); line-height: 1.08; letter-spacing: -.028em; font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); line-height: 1.18; letter-spacing: -.02em; font-weight: 680; }
h3 { font-size: 1.06rem; font-weight: 650; letter-spacing: -.01em; }
p { margin: 0; }
a { color: var(--accent); }

.eyebrow {
  font-size: .72rem; font-weight: 680; letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 18px; font-family: ui-monospace, monospace;
}
.lede { font-size: 1.1rem; color: var(--muted); line-height: 1.62; max-width: 62ch; }
.sec-head { margin-bottom: 44px; }
.sec-head p { margin-top: 14px; }
.note { font-size: .82rem; color: var(--dim); margin-top: 18px; line-height: 1.55; }

/* Skip link — first tab stop, off-screen until focused. */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--panel); color: var(--text); border: 1px solid var(--accent);
  padding: 10px 16px; border-radius: 0 0 8px 0; text-decoration: none;
}
.skip:focus { left: 0; }

/* ── nav ─────────────────────────────────────────────────────────────── */
nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-in { display: flex; align-items: center; gap: 16px; height: 60px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 680; letter-spacing: -.01em; font-size: 1.05rem; }
.logo-mark {
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--accent-a16); border: 1px solid var(--accent-a35);
  display: grid; place-items: center; color: var(--accent); flex-shrink: 0;
}
.nav-links { margin-left: auto; display: flex; gap: 22px; align-items: center; }
/* :not() keeps this off the two button-shaped links. Without it `.nav-links a`
   (0,1,1) outranks `.btn-primary` (0,1,0) and the CTA silently renders in
   --muted — which is illegible on the violet fill in light mode. Excluding
   them here is the fix; !important on each button would just move the trap. */
.nav-links a:not(.btn):not(.nav-login) { color: var(--muted); text-decoration: none; font-size: .9rem; }
.nav-links a:not(.btn):not(.nav-login):hover { color: var(--text); }

/* Log in is for existing customers — a quieter, distinct affordance from
   the primary CTA (which books a walkthrough). Bordered, not filled. */
.nav-login {
  color: var(--text);
  text-decoration: none; font-size: .9rem;
  border: 1px solid var(--border-mid);
  border-radius: 8px; padding: 6px 14px; font-weight: 600;
}
.nav-login:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-a10); }

.theme-btn {
  width: 32px; height: 32px; flex-shrink: 0;
  display: grid; place-items: center;
  background: transparent; color: var(--muted);
  border: 1px solid var(--border); border-radius: 8px;
  font-size: .95rem; line-height: 1; cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.theme-btn:hover { color: var(--accent); border-color: var(--accent); }

@media (max-width: 860px) { .nav-links .nav-sec { display: none; } }
@media (max-width: 520px) { .nav-links .nav-cta { display: none; } }

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 20px; border-radius: 9px;
  font-size: .94rem; font-weight: 600; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  font-family: inherit;
  transition: transform .12s ease, background .15s ease, border-color .15s ease;
}
.btn-primary { background: var(--cta); color: var(--cta-fg); border-color: var(--cta); }
.btn-primary:hover { background: var(--cta-hi); border-color: var(--cta-hi); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border-mid); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-a10); }
.btn-sm { padding: 8px 15px; font-size: .87rem; }
.btn[disabled] { opacity: .6; cursor: progress; transform: none; }

:is(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px;
}

/* ── hero ────────────────────────────────────────────────────────────── */
.hero { padding: 76px 0 64px; position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -30% 0 auto 50%;
  transform: translateX(-50%);
  width: 1100px; height: 620px; pointer-events: none;
  background: radial-gradient(ellipse at center, var(--hero-glow), transparent 68%);
}
.hero > * { position: relative; }
.hero h1 .hl { color: var(--accent); }
.hero .lede { margin-top: 22px; font-size: 1.16rem; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.repel { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.repel span {
  font-size: .76rem; font-family: ui-monospace, monospace; color: var(--dim);
  border: 1px solid var(--border); border-radius: 999px; padding: 3px 11px; background: var(--panel);
}

/* ── product screenshots ─────────────────────────────────────────────── */
.shot {
  margin: 52px 0 0;
  border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  box-shadow: 0 30px 70px -20px var(--shadow); background: var(--panel);
}
.shot img { display: block; width: 100%; height: auto; }
.shot-cap {
  font-size: .78rem; color: var(--dim);
  padding: 10px 14px; border-top: 1px solid var(--border);
  background: var(--panel); font-family: ui-monospace, monospace;
}

/* Theme-matched screenshots. Every shot ships a dark AND a light capture —
   a dark screenshot on a light page reads as a broken image. CSS picks one.
   Below the fold both variants carry loading="lazy", so the hidden one is
   never fetched: a display:none element never enters the viewport, so the
   lazy loader never triggers. The hero pair is eager (no lazy) to avoid an
   empty first paint, which costs one unused image on the first load only. */
.shot-dark { display: block; }
.shot-light { display: none; }
:root[data-theme="dark"] .shot-dark { display: block; }
:root[data-theme="dark"] .shot-light { display: none; }
:root[data-theme="light"] .shot-dark { display: none; }
:root[data-theme="light"] .shot-light { display: block; }
/* No-JS / pre-hydration fallback, mirroring how tokens.css is structured. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .shot-dark { display: none; }
  :root:not([data-theme]) .shot-light { display: block; }
}

/* ── proof strip ─────────────────────────────────────────────────────── */
.proof {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
}
.proof div { background: var(--panel); padding: 20px 18px; }
.proof b { display: block; font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.proof span { display: block; margin-top: 7px; font-size: .79rem; color: var(--muted); line-height: 1.4; }

/* ── quotes ──────────────────────────────────────────────────────────── */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px; margin-top: 36px; }
.quote {
  background: var(--panel); border: 1px solid var(--border);
  border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; padding: 20px 22px;
}
.quote p { font-size: .97rem; line-height: 1.55; }
.quote cite { display: block; margin-top: 12px; font-size: .76rem; color: var(--dim); font-style: normal; font-family: ui-monospace, monospace; }

/* ── five questions ──────────────────────────────────────────────────── */
.q { display: grid; grid-template-columns: 52px 1fr; gap: 20px; padding: 26px 0; border-top: 1px solid var(--border); }
.q:first-child { border-top: none; }
.qn {
  font-family: ui-monospace, monospace; font-size: .82rem; font-weight: 700; color: var(--accent);
  border: 1px solid var(--accent-a35); background: var(--accent-a10); border-radius: 9px;
  height: 38px; display: grid; place-items: center;
}
.q h3 { margin-bottom: 7px; }
.q p { color: var(--muted); font-size: .95rem; }
.q .a { color: var(--text); font-weight: 600; }

/* ── coverage matrix ─────────────────────────────────────────────────── */
.tablewrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
table { border-collapse: collapse; width: 100%; min-width: 660px; font-size: .87rem; }
th, td { text-align: left; padding: 9px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; }
thead th {
  background: var(--panel-3); color: var(--muted); font-size: .71rem; text-transform: uppercase;
  letter-spacing: .07em; font-weight: 650; position: sticky; top: 0;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--lift); }
td.svc { font-weight: 600; }
td.fam { color: var(--dim); font-family: ui-monospace, monospace; font-size: .78rem; }
.mk { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; font-size: .7rem; font-weight: 700; font-family: ui-monospace, monospace; }
.mk-y { background: var(--ok-bg); color: var(--ok); }
.mk-p { background: var(--warn-bg); color: var(--warn); }
.mk-n { background: var(--panel-2); color: var(--dim); border: 1px solid var(--border); }
.legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 16px; font-size: .8rem; color: var(--muted); }
.legend i { font-style: normal; display: inline-flex; align-items: center; gap: 7px; }

/* ── how it works ────────────────────────────────────────────────────── */
.modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin-top: 8px; }
.mode { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 24px; }
.mode h3 { margin-bottom: 6px; }
.mode .tag { font-size: .72rem; font-family: ui-monospace, monospace; color: var(--accent); letter-spacing: .06em; text-transform: uppercase; }
.flow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 18px 0; }
.node { border: 1px solid var(--border); background: var(--panel-2); border-radius: 8px; padding: 8px 12px; font-size: .79rem; font-family: ui-monospace, monospace; }
.node.hi { border-color: var(--accent-a35); background: var(--accent-a10); color: var(--accent); }
.arrow { color: var(--dim); font-size: .9rem; }
.mode ul { margin: 14px 0 0; padding-left: 18px; color: var(--muted); font-size: .9rem; display: flex; flex-direction: column; gap: 6px; }

/* ── not-list ────────────────────────────────────────────────────────── */
.nots { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: 8px; }
.not { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; }
.not b { display: block; font-size: .94rem; margin-bottom: 5px; }
.not b::before { content: "✕"; color: var(--danger); margin-right: 9px; font-weight: 700; }
.not p { font-size: .88rem; color: var(--muted); line-height: 1.5; }

/* ── pricing ─────────────────────────────────────────────────────────── */
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-top: 8px; }
.tier { background: var(--panel); border: 1px solid var(--border); border-radius: 13px; padding: 26px 24px; display: flex; flex-direction: column; }
.tier.feat { border-color: var(--accent-a35); box-shadow: 0 0 0 1px var(--accent-a16); }
.tier .nm { font-size: .75rem; font-family: ui-monospace, monospace; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); }
.tier .pr { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; margin-top: 12px; line-height: 1; }
.tier .pr small { font-size: .85rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.tier .unit { font-size: .82rem; color: var(--dim); margin-top: 7px; font-family: ui-monospace, monospace; }
.tier ul { list-style: none; margin: 20px 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: .9rem; color: var(--muted); flex: 1; }
.tier li::before { content: "→"; color: var(--accent); margin-right: 9px; font-family: ui-monospace, monospace; }

.askbox { margin-top: 22px; background: var(--panel); border: 1px dashed var(--border-mid); border-radius: 12px; padding: 24px; }
.askbox h3 { margin-bottom: 8px; }
.askbox p { color: var(--muted); font-size: .94rem; }
.askbox ol { margin: 16px 0 0; padding-left: 20px; color: var(--muted); font-size: .92rem; display: flex; flex-direction: column; gap: 7px; }
.askbox ol b { color: var(--text); }

/* ── faq ─────────────────────────────────────────────────────────────── */
details { border-bottom: 1px solid var(--border); padding: 16px 0; }
details summary { cursor: pointer; font-weight: 600; font-size: .99rem; list-style: none; display: flex; gap: 12px; align-items: flex-start; }
details summary::-webkit-details-marker { display: none; }
details summary::before { content: "+"; color: var(--accent); font-family: ui-monospace, monospace; font-weight: 700; flex-shrink: 0; }
details[open] summary::before { content: "–"; }
details p { margin-top: 11px; padding-left: 24px; color: var(--muted); font-size: .93rem; }

/* ── contact form ────────────────────────────────────────────────────── */
.final { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 44px 40px; margin: 0 auto; }
.final > .lede { margin-top: 14px; }
.final .note { margin-bottom: 0; }

.form { margin-top: 30px; display: grid; gap: 16px; text-align: left; }
.field { display: flex; flex-direction: column; gap: 6px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .row2 { grid-template-columns: 1fr; } }

.field label { font-size: .84rem; font-weight: 600; color: var(--text); }
.field .opt { color: var(--dim); font-weight: 500; }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: .94rem; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 9px; padding: 10px 12px; width: 100%;
  transition: border-color .15s ease;
}
.field textarea { resize: vertical; min-height: 118px; line-height: 1.55; }
.field input::placeholder, .field textarea::placeholder { color: var(--dim); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--border-mid); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.field select {
  appearance: none;
  /* Caret drawn with borders so it needs no asset and inherits --muted. */
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}
.field .err { font-size: .8rem; color: var(--danger); min-height: 1em; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--danger); }

/* Honeypot. Off-screen rather than display:none — a bot reading the
   computed style skips hidden inputs, but happily fills a positioned one.
   Never announced (aria-hidden) and never focusable (tabindex=-1). */
.hp {
  position: absolute; left: -5000px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

.form-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.form-status { font-size: .88rem; line-height: 1.5; }
.form-status:empty { display: none; }
.form-status.is-error { color: var(--danger); }
.form-status.is-busy { color: var(--muted); }

.form-done {
  border: 1px solid var(--ok-border); background: var(--ok-bg);
  border-radius: 12px; padding: 26px 24px; margin-top: 30px; text-align: left;
}
.form-done h3 { color: var(--ok); margin-bottom: 8px; }
.form-done p { color: var(--muted); font-size: .94rem; }
.privacy { font-size: .8rem; color: var(--dim); line-height: 1.5; }

/* ── footer ──────────────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--border); padding: 40px 0 56px; color: var(--dim); font-size: .86rem; }
.foot { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.foot .col { display: flex; flex-direction: column; gap: 8px; }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--accent); }
.foot .ttl { font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; color: var(--dim); font-family: ui-monospace, monospace; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }