/* ==========================================================================
   Days to Close — site.css
   Bump $assetVersion in app/Views/layouts/main.php and bare.php together
   whenever this file changes.

   No framework. Everything below is ~7 KB and does the whole marketing site;
   Bootstrap would have been 60 KB mostly overridden. See the note in
   layouts/main.php.

   Theme: LIGHT ONLY, deliberately. Sabrina's argument, and it is the right
   one: this replaces a whiteboard, not a chalkboard. The metaphor is the
   brand, so the page does not follow the OS into dark mode. Every colour is
   painted explicitly from a token, so the page holds its own ground whatever
   the host is doing around it.

   `color-scheme: light` below is what makes that actually true — without it a
   dark-mode browser still darkens form controls, scrollbars and autofill, and
   you get a white page with a black input in it.
   ========================================================================== */

:root {
  color-scheme: light;

  --ground: #fbfbfc;
  /* Section bands. The page was one flat white before these — correct in
     palette, wrong in rhythm. Both are cool-biased toward the accent so they
     read as chosen rather than as generic grey. */
  --ground-2: #eef2f8;      /* cool grey-blue, the alternating band */
  --ground-tint: #e7eefb;   /* pale accent wash, used once */
  --surface: #ffffff;
  --surface-2: #f4f5f8;
  --ink: #16191d;
  --muted: #656d78;
  --faint: #8d95a0;
  --line: #e2e5ea;
  --line-strong: #cdd3db;
  --accent: #1f5fd0;
  --accent-ink: #ffffff;
  --accent-soft: #eaf0fc;
  --good: #1a7f4f;
  --good-soft: #e6f3ec;
  --warn: #b4562a;
  --warn-soft: #fbeee7;
  --shadow: 0 1px 2px rgba(22, 25, 29, .05), 0 8px 24px -12px rgba(22, 25, 29, .18);
}

* { box-sizing: border-box; }

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

h1, h2, h3 {
  font-family: Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-wrap: balance;
  margin: 0;
  letter-spacing: -.02em;
  line-height: 1.15;
}

p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; }

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

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 660px; }

.eyebrow {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
}

/* --- logo mark ----------------------------------------------------------- */

/* Three cells filled, the fourth in the accent: a board with one still to go.
   Identical geometry to favicon.svg — on the favicon's blue tile the accent IS
   the background, so the fourth cell reads as open there and as filled here,
   and the two are one identity rather than two drawings that resemble each
   other. The earlier outline-plus-cross version was replaced because it turned
   to mush at 16px; solid blocks survive the smallest size the mark has to
   work at. */
.mark {
  width: 20px; height: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2.5px;
  flex: none;
}
.mark i { background: currentColor; border-radius: 1.5px; }
.mark i:nth-child(4) { background: var(--accent); }
.mark-lg { width: 42px; height: 42px; gap: 5px; }
.mark-lg i { border-radius: 3px; }

/* --- buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 6px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, filter .15s ease;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-quiet:hover { background: var(--surface-2); }

/* --- nav ----------------------------------------------------------------- */

.nav { border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 20; }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 60px; }
.brand {
  display: flex; align-items: center; gap: 10px;
  font-family: Archivo, sans-serif; font-weight: 700; font-size: 16px;
  letter-spacing: -.01em; text-decoration: none; color: var(--ink);
}
.nav-links { display: flex; gap: 26px; font-size: 14px; color: var(--muted); }
.nav-links a { text-decoration: none; }
.nav-links a:hover { color: var(--ink); }
@media (max-width: 760px) { .nav-links { display: none; } }

/* --- hero ---------------------------------------------------------------- */

.hero { padding: 88px 0 64px; }
.hero h1 { font-size: clamp(34px, 5.2vw, 56px); font-weight: 700; max-width: 16ch; }
.hero .lede { margin-top: 20px; font-size: 19px; color: var(--muted); max-width: 56ch; }
.hero-cta { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.hero-note { margin-top: 14px; font-size: 13px; color: var(--faint); }

/* --- the board ----------------------------------------------------------- */

.board-wrap { margin-top: 56px; overflow-x: auto; padding-bottom: 4px; }
.board {
  min-width: 820px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.board-head, .board-row {
  display: grid;
  grid-template-columns: 1.5fr .7fr .9fr repeat(7, minmax(58px, .55fr));
  align-items: center;
}
.board-head {
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint);
}
.board-head span { padding: 11px 10px; line-height: 1.25; }
.board-row { border-bottom: 1px solid var(--line); font-size: 13.5px; }
.board-row:last-child { border-bottom: 0; }
.board-row > * { padding: 13px 10px; }
.cell-name { font-weight: 600; }
.cell-name small { display: block; font-weight: 400; color: var(--faint); font-size: 12px; }
.date {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.date.done { color: var(--good); font-weight: 500; }
.date.next { color: var(--warn); font-weight: 600; }
.date.empty { color: var(--faint); opacity: .45; }
.board-cap { margin-top: 12px; font-size: 12.5px; color: var(--faint); font-family: "IBM Plex Mono", monospace; }

.chip {
  display: inline-block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 4px; white-space: nowrap;
}
.chip-esc { background: var(--accent-soft); color: var(--accent); }
.chip-ctg { background: var(--warn-soft); color: var(--warn); }
.chip-clr { background: var(--good-soft); color: var(--good); }


/* --- section bands -------------------------------------------------------
   Alternating grounds give the page rhythm; the accent band is the single
   loud moment and sits on the CTA, where volume is doing work rather than
   decorating. Adjacent sections always differ, so the colour change is the
   separator and section borders are no longer needed. */

.band-alt    { background: var(--ground-2); }
.band-tint   { background: var(--ground-tint); }
.band-accent { background: var(--accent); color: #fff; }

/* The accent band inverts everything that sits on it. Each of these takes its
   colour from the band, never from a token tuned for the light ground. */
.band-accent .eyebrow      { color: rgba(255,255,255,.66); }
.band-accent h2            { color: #fff; }
.band-accent .signup-p     { color: rgba(255,255,255,.88); }
.band-accent .form-note    { color: rgba(255,255,255,.72); }
.band-accent .form-note a  { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.band-accent input[type="email"] {
  background: #fff;
  border-color: transparent;
  color: var(--ink);
}
.band-accent .btn-primary {
  background: #fff;
  color: var(--accent);
  border-color: #fff;
}
.band-accent .btn-primary:hover { filter: none; background: #eef2f8; border-color: #eef2f8; }
.band-accent .done-msg {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.5);
  color: #fff;
}
.band-accent .done-msg.is-error {
  background: rgba(0,0,0,.16);
  border-color: rgba(255,255,255,.55);
  color: #fff;
}
.band-accent :focus-visible { outline-color: #fff; }

/* --- sections ------------------------------------------------------------ */

section { padding: 76px 0; }
.sec-head { max-width: 60ch; }
.sec-head h2 { font-size: clamp(25px, 3.4vw, 34px); font-weight: 600; margin-top: 14px; }
.sec-head p { margin-top: 14px; color: var(--muted); font-size: 17px; }

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 46px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.grid-3 > div { background: var(--surface); padding: 26px 24px; }
.grid-3 h3 { font-size: 16px; font-weight: 600; margin-bottom: 9px; }
.grid-3 p { color: var(--muted); font-size: 14.5px; }
@media (max-width: 820px) { .grid-3 { grid-template-columns: 1fr; } }

.steps {
  margin-top: 46px;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
}
.step {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.step:last-child { border-bottom: 0; }
.step-n { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.step strong { font-weight: 600; font-size: 15px; }
.step span { color: var(--muted); font-size: 14.5px; }
.step.marked { background: var(--good-soft); }
.step.marked .step-n { color: var(--good); }

.nots { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 34px; }
.not {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12.5px;
  color: var(--muted);
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  padding: 7px 11px;
  background: var(--surface);
}
.not s { color: var(--faint); }

.vows { margin-top: 44px; display: grid; gap: 18px; }
.vow { display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start; }
.vow svg { width: 18px; height: 18px; margin-top: 4px; color: var(--good); flex: none; }
.vow strong { font-weight: 600; }
.vow p { color: var(--muted); font-size: 14.5px; margin-top: 3px; }

/* --- pricing ------------------------------------------------------------- */

.price-card {
  margin-top: 44px;
  max-width: 520px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.price-top { padding: 30px 30px 26px; border-bottom: 1px solid var(--line); }
.price-fig { display: flex; align-items: baseline; gap: 9px; margin-top: 12px; }
.price-fig b { font-family: Archivo, sans-serif; font-size: 46px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.price-fig span { color: var(--muted); font-size: 15px; }
.price-alt { margin-top: 9px; font-family: "IBM Plex Mono", monospace; font-size: 12.5px; color: var(--faint); }
.price-list { padding: 24px 30px 30px; display: grid; gap: 12px; }
.price-list div { display: grid; grid-template-columns: 20px 1fr; gap: 11px; font-size: 14.5px; align-items: start; }
.price-list svg { width: 14px; height: 14px; margin-top: 5px; color: var(--accent); flex: none; }
.price-rule {
  margin-top: 30px;
  padding: 18px 20px;
  border-left: 2px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 7px 7px 0;
  max-width: 520px;
}
.price-rule p { font-size: 15px; }

/* --- early access form --------------------------------------------------- */

.signup { padding: 84px 0; }
.signup-h { font-size: clamp(25px, 3.4vw, 32px); font-weight: 600; margin-top: 14px; }
.signup-p { margin-top: 14px; color: var(--muted); font-size: 17px; }

form { margin-top: 28px; display: flex; gap: 10px; max-width: 480px; flex-wrap: wrap; }
input[type="email"] {
  flex: 1;
  min-width: 220px;
  font-family: inherit;
  font-size: 15px;
  padding: 11px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
}
input[type="email"]::placeholder { color: var(--faint); }

/* Honeypot. Off-screen rather than display:none — some bots skip hidden
   fields, and this way it is still in the layout as far as they can tell.
   aria-hidden + tabindex="-1" in the markup keep it away from real users. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-note { margin-top: 13px; font-size: 13px; color: var(--faint); max-width: 52ch; }
.form-note a { color: var(--accent); }
.done-msg {
  margin-top: 28px;
  padding: 15px 18px;
  border: 1px solid var(--good);
  border-radius: 8px;
  background: var(--good-soft);
  color: var(--good);
  font-size: 14.5px;
  font-weight: 500;
  max-width: 480px;
}
.done-msg.is-error { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); }

/* --- document + result pages --------------------------------------------- */

.doc, .result { padding: 76px 0; border-bottom: 0; }
.doc-h, .result-h { font-size: clamp(28px, 4vw, 38px); font-weight: 600; margin-top: 14px; }
.doc-meta { margin-top: 10px; font-family: "IBM Plex Mono", monospace; font-size: 12.5px; color: var(--faint); }
.doc-lede, .result-p { margin-top: 20px; font-size: 17px; color: var(--muted); }
.doc h2 { font-size: 19px; font-weight: 600; margin-top: 38px; }
.doc p { margin-top: 12px; color: var(--muted); font-size: 15.5px; }
.doc ul { margin-top: 12px; padding-left: 20px; color: var(--muted); font-size: 15.5px; }
.doc li { margin-top: 7px; }
.doc a, .result a:not(.btn) { color: var(--accent); }
.doc code {
  font-family: "IBM Plex Mono", monospace;
  font-size: 13.5px;
  background: var(--surface-2);
  padding: 1px 5px;
  border-radius: 4px;
}
.doc-back, .result-back { margin-top: 40px; }

/* --- pre-launch gate ----------------------------------------------------- */

.gate { min-height: 100vh; display: grid; place-items: center; padding: 24px; text-align: center; }
.gate-in { display: grid; gap: 16px; justify-items: center; }
.gate h1 { font-size: clamp(28px, 5vw, 40px); font-weight: 700; }
.gate p { color: var(--muted); font-size: 17px; max-width: 42ch; }
.gate-foot { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--faint); margin-top: 18px; }
.gate-foot a { color: var(--faint); }


/* --- hero layout + oversized mark ----------------------------------------
   The mark sits BESIDE the headline, not above it. A large logo above the
   headline pushes the proposition down the page, and for a product nobody
   has heard of the proposition earns attention where the name does not. This
   also fills the empty right half the hero had at desktop widths.

   Quiet on purpose: three cells in the hairline colour so the accent cell is
   the only thing that carries, and the headline still wins the page. Hidden
   below 900px, where there is no room and the navbar mark is right there. */

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 56px;
  align-items: center;
}
.hero-mark { display: flex; justify-content: center; }
.mark-xl { width: 188px; height: 188px; gap: 18px; }
.mark-xl i { border-radius: 13px; background: var(--line-strong); }
.mark-xl i:nth-child(4) { background: var(--accent); }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 0; }
  .hero-mark { display: none; }
}

/* --- footer brand -------------------------------------------------------- */

.foot-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: Archivo, sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -.01em;
  color: var(--ink);
  text-decoration: none;
  margin-bottom: 22px;
}

/* --- footer -------------------------------------------------------------- */

footer { padding: 44px 0 64px; background: var(--ground-2); font-size: 13.5px; color: var(--faint); }
.foot-in { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.foot-in a { text-decoration: none; color: var(--muted); margin-left: 20px; }
.foot-in span:first-child + span a:first-child { margin-left: 0; }
.foot-in a:hover { color: var(--ink); }

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


/* --- two timelines -------------------------------------------------------
   Buyers and sellers each get their own column. Side by side on desktop so the
   difference in vocabulary is the point rather than a footnote; stacked on
   phones, where two columns of eight rows would be unreadable. */

.timelines {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 46px;
}
.timeline-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 12px;
}
.timeline-h span {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
}
.timelines .steps { margin-top: 0; }

@media (max-width: 820px) {
  .timelines { grid-template-columns: 1fr; gap: 34px; }
}


/* --- sticky footer -------------------------------------------------------
   Short pages (privacy, terms, 404, the early-access result) did not have
   enough content to push the footer down, so it floated mid-screen with dead
   space beneath it. Body becomes a column and the footer takes the slack.

   flex-shrink: 0 on the children matters: in a column flex container a section
   whose content is taller than the space available will otherwise compress
   rather than overflow, which silently crops long pages. */

body { min-height: 100vh; display: flex; flex-direction: column; }
body > * { flex-shrink: 0; }
footer { margin-top: auto; }

/* --- document pages ------------------------------------------------------
   Wider than .narrow. A policy is scanned rather than read linearly, and 660px
   made it feel like a column of receipts.

   Stopped at 780px rather than going full width: past roughly 90 characters
   the eye loses its place returning to the start of the next line, and a
   privacy policy is exactly the document where someone gives up. */

.doc .narrow { max-width: 780px; }
.doc p, .doc li { max-width: 72ch; }
.doc h2 { max-width: 72ch; }