/* House Agent design tokens and base. Native CSS, no build step.
   One accent (deep green, reads "sorted"), one radius scale (10px), one type family.
   Light and dark both defined from the start; dark follows the device. */

@font-face {
  font-family: 'Geist';
  src: url('/assets/fonts/Geist-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/assets/fonts/GeistMono-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg:          #f4f6f5;
  --surface:     #ffffff;
  --surface-2:   #eef1ef;
  --line:        #dee4e0;
  --line-strong: #c6d0ca;
  --ink:         #131c18;
  --ink-2:       #3d4a44;
  --muted:       #5f6d66;
  --accent:      #0d6b4f;
  --accent-hover:#0a5540;
  --accent-on:   #ffffff;
  --accent-soft: #e4f0eb;
  --shadow:      0 1px 2px rgba(19, 28, 24, .05), 0 8px 24px -12px rgba(19, 28, 24, .18);
  --r:           10px;
  --r-sm:        7px;
  --maxw:        1080px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #0d1311;
    --surface:     #141d19;
    --surface-2:   #18231e;
    --line:        #24312b;
    --line-strong: #33443b;
    --ink:         #e9efec;
    --ink-2:       #bdc9c3;
    --muted:       #8d9d95;
    --accent:      #34d399;
    --accent-hover:#5ee0b0;
    --accent-on:   #06120d;
    --accent-soft: #142a21;
    --shadow:      0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

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

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ── nav ─────────────────────────────────────────────── */
.nav {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand {
  display: flex; align-items: center; gap: 9px;
  font-weight: 600; font-size: 15.5px; letter-spacing: -.01em;
  color: var(--ink);
}
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 26px; height: 26px; border-radius: var(--r-sm);
  background: var(--accent); color: var(--accent-on);
  display: grid; place-items: center;
}
.brand-mark svg { width: 16px; height: 16px; }

/* ── buttons ─────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 11px 18px;
  border-radius: var(--r);
  border: 1px solid transparent;
  font: inherit; font-size: 14.5px; font-weight: 550;
  cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--accent-on); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-quiet {
  background: var(--surface); color: var(--ink); border-color: var(--line-strong);
}
.btn-quiet:hover { background: var(--surface-2); }
.btn svg { width: 17px; height: 17px; flex: none; }
.btn-lg { padding: 13px 22px; font-size: 15.5px; }

/* ── typography ──────────────────────────────────────── */
h1, h2, h3 { margin: 0; letter-spacing: -.022em; line-height: 1.14; font-weight: 600; }
h1 { font-size: clamp(32px, 6.2vw, 50px); }
h2 { font-size: clamp(23px, 3.6vw, 30px); }
h3 { font-size: 16px; letter-spacing: -.01em; }
p  { margin: 0; }
.lede { font-size: clamp(16px, 2.2vw, 18px); color: var(--ink-2); max-width: 46ch; }
.muted { color: var(--muted); }
.mono { font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }

section { padding: 64px 0; }
@media (max-width: 720px) { section { padding: 44px 0; } }

/* ── hero ────────────────────────────────────────────── */
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center;
        padding-top: 40px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.hero-note { margin-top: 14px; font-size: 13px; color: var(--muted); }
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; gap: 32px; padding-top: 20px; }
}

/* Real transcript, not a mocked-up phone screen. These are the messages the bot
   actually sends, set as text. */
.thread {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow);
  padding: 16px; display: grid; gap: 10px;
}
.msg { display: grid; gap: 3px; padding: 10px 13px; border-radius: var(--r-sm); font-size: 14.5px; }
.msg .who { font-size: 11.5px; font-weight: 600; letter-spacing: .01em; color: var(--muted); }
.msg-them { background: var(--surface-2); }
.msg-us { background: var(--accent-soft); }
.msg-us .who { color: var(--accent); }
.thread-gap {
  display: flex; align-items: center; gap: 10px;
  font-size: 11.5px; color: var(--muted); padding: 2px 4px;
}
.thread-gap::before, .thread-gap::after {
  content: ""; height: 1px; background: var(--line); flex: 1;
}

/* ── flow diagram ────────────────────────────────────── */
.flow { margin-top: 28px; }
/* Specificity note: .flow svg is (0,1,1), so the show/hide rules must also carry
   two selectors or the hide silently loses. */
.flow svg { width: 100%; height: auto; }
.flow .flow-wide { display: block; }
.flow .flow-tall { display: none; }
@media (max-width: 800px) {
  .flow .flow-wide { display: none; }
  .flow .flow-tall { display: block; max-width: 380px; margin: 0 auto; }
}
.dg-box   { fill: var(--surface); stroke: var(--line-strong); }
.dg-boxa  { fill: var(--accent-soft); stroke: var(--accent); }
.dg-line  { stroke: var(--line-strong); fill: none; }
.dg-loop  { stroke: var(--accent); fill: none; }
.dg-t     { fill: var(--ink); font-size: 14px; font-weight: 550; }
.dg-s     { fill: var(--muted); font-size: 12.5px; }
.dg-n     { fill: var(--muted); font-size: 11px; font-weight: 600;
            font-family: 'Geist Mono', monospace; }
.dg-icon  { color: var(--accent); }

/* ── outcome cards ───────────────────────────────────── */
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
        background: var(--line); border: 1px solid var(--line);
        border-radius: var(--r); overflow: hidden; }
.cols > div { background: var(--surface); padding: 22px 20px; }
.cols h3 { margin-bottom: 6px; }
.cols p { font-size: 14px; color: var(--muted); }
.cols .ic { color: var(--accent); margin-bottom: 12px; display: block; }
.cols .ic svg { width: 21px; height: 21px; }
@media (max-width: 780px) { .cols { grid-template-columns: 1fr; } }

/* ── footer ──────────────────────────────────────────── */
.foot {
  border-top: 1px solid var(--line); margin-top: 24px; padding: 26px 0 40px;
  display: flex; flex-wrap: wrap; gap: 12px 22px;
  align-items: center; justify-content: space-between;
  font-size: 13px; color: var(--muted);
}

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

/* ── mobile overflow guards ──────────────────────────────
   Grid and flex items default to min-width:auto, so any child with
   white-space:nowrap (our buttons) sets a min-content floor that blows the
   track past the viewport and stops flex-wrap ever wrapping. Reset it. */
.hero > *, .ha-split > *, .cols > *, .thread, .flow { min-width: 0; }
.msg, .lede, p, h1, h2 { overflow-wrap: break-word; }
img, svg { max-width: 100%; }

/* Two full-width buttons stack cleanly on a phone rather than being clipped. */
@media (max-width: 460px) {
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
}

/* ── evidence trail ──────────────────────────────────── */
.trail-row {
  display: flex; gap: 14px; padding: 9px 16px;
  font-size: 13.5px; border-bottom: 1px solid var(--line);
}
.trail-row .when { flex: none; width: 104px; white-space: nowrap; }
@media (max-width: 470px) {
  .trail-row { flex-direction: column; gap: 1px; padding: 10px 16px; }
  .trail-row .when { width: auto; font-size: 11.5px; }
}
/* On a phone the explanation must come before the table of dates, or the reader
   meets a wall of timestamps with no idea what they are looking at. */
@media (max-width: 820px) {
  .ha-split > div:first-child { order: 2; }
  .ha-split > div:last-child  { order: 1; }
}

/* ── setup steps ─────────────────────────────────────── */
.setup { margin-top: 26px; }
.setup-h {
  font-size: 13px; font-weight: 600; color: var(--muted);
  margin-bottom: 12px;
}
.steps { list-style: none; margin: 0; padding: 0; max-width: 62ch; }
.steps li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 12px 0; border-top: 1px solid var(--line);
  font-size: 14.5px; color: var(--ink-2);
}
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps b { color: var(--ink); font-weight: 600; }
.sn {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 650; margin-top: 1px;
}

/* ── app pages: onboarding + home ────────────────────── */
.wrap.narrow { max-width: 560px; }
.stepline { font-size: 12.5px; font-weight: 600; color: var(--muted);
            margin: 26px 0 10px; }
.card { background: var(--surface); border: 1px solid var(--line);
        border-radius: var(--r); padding: 20px; margin-top: 18px; }
.card.empty p { margin: 0; font-size: 15px; }
.err { background: #fdecec; border: 1px solid #f3c7c7; color: #8a1c1c;
       padding: 11px 14px; border-radius: var(--r); font-size: 14px; margin: 0 0 4px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
.field .opt { font-weight: 400; color: var(--muted); }
.field input {
  width: 100%; padding: 11px 12px; font: inherit; font-size: 15px;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
}
.field input::placeholder { color: #9aa8a1; }
.field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.picks { display: grid; gap: 8px; }
.pick { display: flex; gap: 11px; align-items: flex-start; cursor: pointer;
        border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 11px 13px; }
.pick:hover { background: var(--surface-2); }
.pick input { margin-top: 3px; accent-color: var(--accent); flex: none; }
.pick b { display: block; font-size: 14.5px; font-weight: 600; }
.pick small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.pick:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.note { font-size: 13px; line-height: 1.55; color: var(--muted); margin: 14px 0 18px; }
.codebox { background: var(--accent-soft); border: 1px solid var(--accent);
           border-radius: var(--r-sm); padding: 15px; text-align: center; margin: 16px 0 0; }
.codebox code { font-size: 20px; font-weight: 600; letter-spacing: .08em; color: var(--accent); }
.sec { font-size: 15px; margin: 30px 0 0; }
.caserow { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start;
           padding: 14px 16px; border-bottom: 1px solid var(--line); }
.caserow:last-child { border-bottom: 0; }
.ref { font-size: 12.5px; font-weight: 600; }
.tag { font-size: 11.5px; color: var(--accent); background: var(--accent-soft);
       border-radius: 4px; padding: 2px 6px; margin-left: 6px; }
.ctitle { font-size: 14.5px; margin-top: 5px; }
.cmeta { font-size: 12px; color: var(--muted); text-align: right; flex: none; max-width: 130px; }
@media (max-width: 470px) {
  .caserow { flex-direction: column; gap: 6px; }
  .cmeta { text-align: left; max-width: none; }
}

/* Nav must never wrap: the brand is two words and a long name will break it. */
.brand { white-space: nowrap; }
.nav .whoami { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 470px) {
  .nav .whoami { display: none; }   /* you know who you are; the brand matters more */
}

.codebox { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.codebox .btn { padding: 8px 14px; font-size: 13px; }

/* explicit permission, never a buried default */
.consent { display: flex; gap: 11px; align-items: flex-start;
           background: var(--accent-soft); border: 1px solid var(--accent);
           border-radius: var(--r-sm); padding: 13px; margin: 4px 0 18px;
           font-size: 13.5px; line-height: 1.55; color: var(--ink-2); cursor: pointer; }
.consent input { margin-top: 3px; accent-color: var(--accent); flex: none; }
.consent b { color: var(--ink); }