/* ─────────────────────────────────────────────────────────────────────────────
   Trade73 public site.

   One stylesheet, no JavaScript, no web fonts. The page is the product's first
   impression and the thing crawlers read, so it renders from HTML and CSS
   alone — nothing here waits on a script, and there is no layout shift to
   measure because nothing arrives late.

   ## Working without a typeface

   No font is downloaded, which is the constraint this design is built around
   rather than around. Three things do the work a bought typeface would:

     1. The *display* stack asks for the system's display face by name —
        "Segoe UI Variable Display" on Windows 11, and `ui-sans-serif` picks
        up SF Pro Display on Apple — before falling back to the text face.
        Those are the faces the operating system itself uses for headlines, and
        they are drawn for the job: tighter apertures, less spacing, a different
        optical size. Asking for them costs one line and no bytes.
     2. A *monospace* stack carries every label, timestamp and figure. Nothing
        signals "instrument" faster than data set in mono next to prose set in
        sans, and it is the one typographic contrast available for free.
     3. Tracking and weight are set deliberately at every size. Display text is
        tracked in (-0.03em) and body text is not; the gap between 400 and 600
        does the emphasis that a third weight would otherwise be bought for.

   The palette is lifted from the application so the two do not read as
   different products.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Ground, in four steps rather than two ───────────────────────────────
     A dark page with one background and one card colour reads flat, because
     every surface is at the same depth. These are close together on purpose:
     the difference between them is barely nameable and entirely visible. */
  --bg: #05070a;
  --bg-lift: #080b10;
  --bg-card: #0b1016;
  --bg-card-hi: #10161e;

  /* Hairlines as alpha rather than as solid greys, so they sit correctly on
     whichever of the four grounds they land on. */
  --line: rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.12);
  --line-soft: rgba(255, 255, 255, 0.04);

  --silver: #e6ecf2;
  --silver-dim: #a6b4c2;
  --mint: #2ee6a6;
  --mint-bright: #4ff0bc;
  /*
   * The dark end of the mark's gradient.
   *
   * Missing until the call-to-action gradient was restored, and its absence was
   * not a missing colour but a missing *button*: one undefined custom property
   * makes the whole `background` declaration invalid, so the fill was dropped
   * and "Contact founders" rendered as dark text on the dark page.
   */
  --mint-deep: #14b983;
  --mint-well: rgba(46, 230, 166, 0.09);
  --mint-well-line: rgba(46, 230, 166, 0.22);
  --loss: #f6465d;

  --text: #f1f5f8;
  --text-soft: #b3bfcb;
  --muted: #7d8b99;
  --faint: #56636f;

  --wrap: 1160px;
  --radius: 14px;
  --radius-lg: 18px;

  /* The text face. `ui-sans-serif` first so each platform's own UI font wins
     before the named fallbacks are consulted. */
  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
          "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* The display face. Same list with the system's *display* optical size asked
     for first — a real cut drawn for headlines, not the body face enlarged. */
  --font-display: ui-sans-serif, -apple-system, BlinkMacSystemFont,
          "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", Menlo,
          Consolas, "Liberation Mono", monospace;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.65 var(--font);
  -webkit-font-smoothing: antialiased;
  /* Every figure on this page sits in a column or beside another figure.
     Proportional digits make those columns ragged. */
  font-variant-numeric: tabular-nums;
}

img { max-width: 100%; height: auto; }

a { color: var(--mint); text-decoration: none; }
a:hover { color: var(--mint-bright); }

:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; border-radius: 4px; }

/* Keyboard users get to skip the nav; it is off-screen until focused. */
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--bg-card); color: var(--text);
  padding: 10px 16px; border: 1px solid var(--line-2); border-radius: 0 0 8px 0;
  z-index: 100;
}
.skip:focus { left: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 760px; }
.mono { font-family: var(--font-mono); }

/* A section's own name, above its headline. Small, tracked out, and preceded
   by a rule — the cheapest way to make a page look composed rather than
   stacked. */
.eyebrow {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mint);
}
.eyebrow::before {
  content: ""; width: 22px; height: 1px; flex: none;
  background: currentColor; opacity: .55;
}
.eyebrowCentre { justify-content: center; }

/* ── Nav ─────────────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(5, 7, 10, 0.78);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line-soft);
}
.navInner { display: flex; align-items: center; gap: 24px; height: 68px; }
/* The logo is a link home, so it is a tap target like any other. */
.brand { display: flex; align-items: center; min-height: 32px; flex: none; }
/* The wordmark PNG carries a black matte rather than a clean alpha edge, so on
   a dark background it shows as a visible rectangle. `screen` drops the black
   and keeps the glyphs — the same treatment the application's own Brand
   component uses, which is what stops the two surfaces looking like different
   logos. */
.brand img { display: block; width: 132px; height: auto; mix-blend-mode: screen; }

.navLinks { display: flex; align-items: center; gap: 30px; margin: 0 auto; }
/* `inline-flex` with a floor, not bare text: WCAG 2.5.8 asks for 24px, and a
   14px link on a 1.65 line box measures 23. One pixel short is still short. */
.navLinks a {
  display: inline-flex; align-items: center; min-height: 24px;
  color: var(--muted); font-size: 14px;
}
.navLinks a:hover { color: var(--text); }

.navActions { display: flex; align-items: center; gap: 16px; flex: none; }

/* Below 900px the in-page anchors are noise next to the two things somebody
   actually came for. Sign in survives with the CTA: a returning visitor should
   never have to scroll a sales page to reach their account. */
@media (max-width: 900px) {
  .navLinks { display: none; }
  .navInner { justify-content: space-between; }
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 26px; border-radius: 10px;
  font-size: 15px; font-weight: 600; letter-spacing: -0.005em;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.btnSm { padding: 8px 16px; font-size: 13.5px; border-radius: 8px; }

/*
 * The primary action carries the mark's own gradient, not a flat fill.
 *
 * One colour on a dark page is a rectangle; a gradient between the two ends of
 * the logo's sweep is the brand. `--mint-deep` is load-bearing here — see its
 * definition for what happens when a custom property in this declaration is
 * missing.
 */
.btnPrimary {
  background: linear-gradient(135deg, var(--mint-bright), var(--mint-deep));
  color: #04150f !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 6px 22px rgba(46, 230, 166, .18);
}
.btnPrimary:hover { background: linear-gradient(135deg, #67f5c9, var(--mint)); color: #04150f !important; }

.btnGhost { border-color: var(--line-2); color: var(--text-soft) !important; background: rgba(255,255,255,.02); }
.btnGhost:hover { border-color: var(--mint-well-line); background: var(--mint-well); color: var(--text) !important; }

@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero {
  padding: 92px 0 84px;
  /*
   * Two lights, not one.
   *
   * A single centred glow behind a centred hero was right when the hero was
   * centred. This one is asymmetric, so the light is too: a broad wash behind
   * the headline on the left and a tighter one behind the product panel on the
   * right, which is what stops the panel looking pasted onto a flat field.
   */
  background:
    radial-gradient(760px 420px at 12% -10%, rgba(46, 230, 166, .10), transparent 68%),
    radial-gradient(620px 420px at 88% 8%, rgba(46, 230, 166, .07), transparent 66%),
    var(--bg);
  border-bottom: 1px solid var(--line-soft);
}

.heroCopy { min-width: 0; }

.heroGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.heroLockup {
  display: block;
  width: 208px; height: auto;
  margin: 0 0 24px;
  /* The same black-matte fix as the nav. This was missed when the nav was
     corrected, so the hero carried a visible dark rectangle around the logo. */
  mix-blend-mode: screen;
}

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 22px;
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-soft); background: rgba(255,255,255,.03);
  border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 14px 6px 11px;
}
/* A live dot. It does not blink — an animation that never stops is a thing to
   look away from, and this badge is a fact, not an alert. */
.pillDot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--mint);
  box-shadow: 0 0 0 3px rgba(46, 230, 166, .16);
}

.hero h1 {
  margin: 0 0 22px;
  max-width: 15ch;
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 4.4vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.032em;
  font-weight: 700;
}
.accent {
  display: block;
  background: linear-gradient(100deg, var(--silver) 0%, var(--silver-dim) 26%, var(--mint) 76%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lede { margin: 0; max-width: 54ch; color: var(--text-soft); font-size: 1.06rem; }

.ctaRow { display: flex; flex-wrap: wrap; gap: 14px; margin: 32px 0 0; }
.ctaCentre { justify-content: center; }

/* Not fine print. It is the first claim the page makes about risk and it sits
   with the call to action deliberately. */
.risk { margin: 26px 0 0; max-width: 56ch; color: var(--faint); font-size: 13px; }

/* ── The drawn product panel ─────────────────────────────────────────────── */
/* The column holds two things now — the note on the name, and the drawn
   panel — so it stacks them rather than being a single block. */
.heroVisual { min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.panelWrap { min-width: 0; }

/* ── Why 73 ──────────────────────────────────────────────────────────────── */
/*
 * The arithmetic behind the name, set as arithmetic.
 *
 * It sits in the space above the product panel, which was empty. A product
 * arguing that you should check things can afford to make a claim that takes
 * ten seconds to check, and this is the only one on the page that does not
 * rest on trusting us.
 */
.why73 {
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.022), transparent);
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset;
}
.why73 .eyebrow { margin-bottom: 14px; }

.why73Body { display: flex; align-items: center; gap: 20px; }

/* Big enough to be the object under discussion rather than a decoration, and
   in the mark's own gradient so the number on the page and the number in the
   logo are visibly the same number. */
.why73Big {
  flex: none;
  font-family: var(--font-display);
  font-size: 3.3rem; font-weight: 700; line-height: 1;
  letter-spacing: -0.05em;
  background: linear-gradient(140deg, var(--silver) 0%, var(--mint) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.why73Proof { min-width: 0; display: grid; gap: 8px; }
.why73Proof p { margin: 0; color: var(--text-soft); font-size: 13.5px; line-height: 1.55; }
/*
 * The figures inside the sentences, in mono.
 *
 * They were chips beside each line to begin with, which put a small "73"
 * immediately to the right of the large one — the same number twice in two
 * sizes, reading as a stutter rather than as emphasis. Inline is enough: the
 * sentences are about numbers, so setting the numbers apart is all the
 * structure they need.
 */
.why73Fig { font-family: var(--font-mono); font-weight: 600; color: var(--mint); font-size: 12.5px; }

.why73Note {
  margin: 14px 0 0; padding-top: 13px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted); font-size: 12.5px; line-height: 1.5;
}

@media (max-width: 940px) {
  /* Below the panel on a phone. It explains the name, which is a pleasure
     rather than the point, and it should not stand between somebody and the
     thing they came to look at. */
  .why73 { order: 2; }
  .why73Body { gap: 16px; }
  .why73Big { font-size: 2.8rem; }
}
@media (max-width: 420px) {
  .why73Body { display: block; }
  .why73Big { display: block; margin-bottom: 12px; }
}

.panel {
  background: linear-gradient(180deg, var(--bg-card-hi), var(--bg-card));
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  /* The inset highlight is what makes a dark rectangle read as a lit surface
     rather than a hole. It is one line and it does most of the work. */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .06) inset,
    0 30px 70px -24px rgba(0, 0, 0, .9),
    0 0 0 1px rgba(46, 230, 166, .05);
  overflow: hidden;
}

.panelBar {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(255,255,255,.015);
}
.panelDots { display: flex; gap: 6px; }
.panelDots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.12); }
.panelTitle { font-size: 13px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.tag {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px;
}
/* Paper and live must never look alike anywhere in this product, including in
   a drawing of it. */
.tagPaper { color: #7cc0ff; background: rgba(124, 192, 255, .1); border: 1px solid rgba(124, 192, 255, .22); }

.panelChart { display: block; width: 100%; height: 132px; padding: 16px 0 6px; }

.panelLog { padding: 4px 16px 16px; border-top: 1px solid var(--line-soft); margin-top: 8px; }
.logHead {
  display: block; margin: 14px 0 10px;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
}
.logRow {
  display: flex; align-items: baseline; gap: 10px;
  padding: 6px 0;
  font-size: 12.5px;
  border-top: 1px solid var(--line-soft);
}
.logRow:first-of-type { border-top: none; }
.logTime { color: var(--faint); font-size: 11px; flex: none; }
.verdict {
  flex: none;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 4px;
}
.verdict.hold { color: var(--muted); background: rgba(255,255,255,.05); }
.verdict.buy { color: var(--mint); background: var(--mint-well); }
.logWhy { color: var(--text-soft); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Says what the panel is. A drawing of an interface on a page arguing against
   screenshots has to be labelled, or it is the thing it is arguing against. */
/* 12.5px, not 12: this is the line that says the panel above it is a drawing
   rather than a screenshot, which makes it the one caption on the page that
   has to be comfortably readable. */
.visualNote { margin: 14px 0 0; text-align: center; color: var(--faint); font-size: 12.5px; }

@media (max-width: 940px) {
  .heroGrid { grid-template-columns: 1fr; gap: 44px; }
  .hero h1 { max-width: 18ch; }
}

/* ── The band under the hero ─────────────────────────────────────────────── */
.band {
  padding: 0;
  background: var(--bg-lift);
  border-bottom: 1px solid var(--line-soft);
}

.factsGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  padding: 0;
}
.fact {
  padding: 32px 26px 32px 0;
  /* Hairline separators drawn as a box-shadow rather than borders, so the
     first cell in each wrapped row does not end up with a stray edge. */
  box-shadow: 1px 0 0 var(--line-soft);
}
.fact:last-child { box-shadow: none; padding-right: 0; }
.fact + .fact { padding-left: 26px; }
.factNum {
  display: block;
  font-family: var(--font-display);
  font-size: 2.25rem; font-weight: 700; letter-spacing: -0.035em; line-height: 1;
  color: var(--mint);
  margin-bottom: 11px;
}
.factLabel { display: block; color: var(--muted); font-size: 13.5px; line-height: 1.5; max-width: 30ch; }

/* The four capability words, under a rule rather than in a section of their
   own. Icon beside the label rather than above it, so this row cannot be
   mistaken for a second copy of the one above. */
.pillarRow {
  gap: 26px;
  padding: 26px 0 32px;
  border-top: 1px solid var(--line-soft);
}
.pillar { display: flex; gap: 12px; align-items: flex-start; }
.pillarIcon {
  flex: none;
  display: inline-grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 9px;
  color: var(--mint);
  background: var(--mint-well);
  border: 1px solid var(--mint-well-line);
}
.pillar h2 { margin: 0 0 3px; font-size: .95rem; color: var(--text); }
.pillar p { color: var(--muted); font-size: 13.5px; line-height: 1.5; }

/* Two by two rather than four stacked. Four full-width rows of one number each
   put a screen and a half of scrolling between the hero and the first
   argument, for content that is four short facts. */
@media (max-width: 860px) {
  .factsGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact { padding: 24px 20px 24px 0; }
  .fact + .fact { padding-left: 0; }
  .fact:nth-child(2n) { padding-left: 20px; }
  .fact:nth-child(2n) { box-shadow: none; }
  .fact:nth-child(-n+2) { box-shadow: 1px 0 0 var(--line-soft), 0 1px 0 var(--line-soft); }
  .fact:nth-child(2) { box-shadow: 0 1px 0 var(--line-soft); }
}
/* ── Sections ────────────────────────────────────────────────────────────── */
/*
 * Sections alternate ground, and the padding is set once.
 *
 * Two adjacent sections on the same colour put 184px of identical dark
 * between two blocks of text, which reads as the page having stopped rather
 * than as a division. Every other section is lifted and ruled, so the gap is
 * doing something.
 */
section { padding: 84px 0; }
.features, .steps { background: var(--bg); }
.sectionTitle {
  margin: 0 0 46px; text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.35rem);
  letter-spacing: -0.028em; line-height: 1.15; font-weight: 700;
}
h2, h3 { font-family: var(--font-display); letter-spacing: -0.022em; }
p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

.grid2 { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid4 { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* Four cards in a 3+1 is an orphan, and `auto-fit` produced exactly that at
   this width. Two columns, explicitly, until there is no room for two. */
@media (max-width: 780px) { .grid2 { grid-template-columns: 1fr; } }

.card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset;
  transition: border-color .15s, background .15s;
}
.card:hover { border-color: var(--line-2); background: var(--bg-card-hi); }
.cardNum {
  position: absolute; top: 22px; right: 24px;
  font-size: 11px; letter-spacing: .1em; color: var(--faint);
}
.card h3 { margin: 0 0 10px; font-size: 1.12rem; padding-right: 36px; }
.card p { color: var(--text-soft); font-size: 15px; }

@media (prefers-reduced-motion: reduce) { .card { transition: none; } }

/* ── Custody ─────────────────────────────────────────────────────────────── */
.custody {
  background:
    radial-gradient(620px 300px at 18% 50%, rgba(46, 230, 166, .07), transparent 70%),
    var(--bg-lift);
  border-block: 1px solid var(--line-soft);
}
/*
 * Two columns rather than one narrow one.
 *
 * The copy alone sat in a 900px block with a third of the row empty beside it,
 * which is what a section looks like when it has been narrowed to hide that it
 * has nothing to put there. The diagram is what goes there.
 */
.custodyGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.custodyCopy { min-width: 0; }

/* ── The custody diagram ─────────────────────────────────────────────────── */
.custodyDiagram { min-width: 0; }
.node {
  padding: 20px 22px;
  border-radius: var(--radius);
  border: 1px solid var(--line-2);
  background: var(--bg-card);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
}
/* The side holding the money is the one that gets the accent. */
.nodeYours { border-color: var(--mint-well-line); background: linear-gradient(180deg, var(--mint-well), var(--bg-card)); }
/* Deliberately plain. The half of the diagram that holds nothing should not be
   the half that draws the eye. */
.nodeUs { background: var(--bg-card); }
.nodeTag {
  display: block; margin-bottom: 10px;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
}
.nodeYours .nodeTag { color: var(--mint); }
.nodeMain {
  display: block;
  font-family: var(--font-display);
  font-size: 1.12rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3;
  color: var(--text);
}

.nodeList { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.nodeList li {
  display: flex; align-items: flex-start; gap: 8px;
  color: var(--text-soft); font-size: 13px; line-height: 1.45;
}
/* A rule rather than a tick: none of these is a feature that was added, they
   are things that are absent by construction. */
.nodeList li::before {
  content: ""; flex: none;
  width: 8px; height: 1px; margin-top: 9px;
  background: var(--mint); opacity: .7;
}

.wire { display: flex; align-items: center; gap: 12px; padding: 14px 22px; }
.wireLine { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line-2), transparent); }
.wireLabel { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); flex: none; }

@media (max-width: 900px) {
  .custodyGrid { grid-template-columns: 1fr; gap: 36px; }
}
.custody h2, .honest h2, .close h2 {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.35rem);
  letter-spacing: -0.028em; line-height: 1.15; font-weight: 700;
}
.custody p, .honest p, .close p { color: var(--text-soft); }
.note { color: var(--muted); font-size: 14px; }
.lede2 { color: var(--text) !important; font-size: 1.06rem; }

/* ── Honest ──────────────────────────────────────────────────────────────── */
.honest { background: var(--bg-lift); border-block: 1px solid var(--line-soft); }
.honestCopy { min-width: 0; }

.honestGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

/*
 * The failure, set as evidence.
 *
 * Buried in a paragraph this was the most persuasive sentence on the page and
 * the least read one. A product that publishes the numbers on a strategy it
 * withdrew is making a claim no competitor's copy can, so it is given the
 * treatment a testimonial would get on a site that had any.
 */
.evidence {
  margin: 0;
  padding: 32px;
  background: var(--bg-card);
  border: 1px solid var(--line-2);
  border-left: 2px solid var(--mint-well-line);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset;
}
.evidenceEyebrow {
  margin: 0 0 18px;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
}
/* A list, where a single large figure used to be. Each line is a cost the
   simulation charges, so they are set as things being deducted rather than as
   features being offered. */
.evidenceList { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 10px; }
.evidenceList li {
  display: flex; align-items: flex-start; gap: 10px;
  color: var(--text); font-size: 15px; line-height: 1.45;
}
.evidenceList li::before {
  content: "−"; flex: none;
  font-family: var(--font-mono); font-size: 14px; line-height: 1.5;
  color: var(--loss);
}
.evidence figcaption { color: var(--muted); font-size: 14px; line-height: 1.6; }

@media (max-width: 880px) { .honestGrid { grid-template-columns: 1fr; gap: 32px; } }

/* ── Steps ───────────────────────────────────────────────────────────────── */
.stepList { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.stepList li {
  position: relative;
  counter-increment: step;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px 24px;
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset;
}
.stepList li::before {
  content: counter(step, decimal-leading-zero);
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; margin-bottom: 16px;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 600;
  color: var(--mint);
  background: var(--mint-well);
  border: 1px solid var(--mint-well-line);
}
.stepList h3 { margin: 0 0 8px; font-size: 1.02rem; }
.stepList p { color: var(--muted); font-size: 14px; }

.close {
  text-align: center;
  background:
    radial-gradient(700px 300px at 50% 110%, rgba(46, 230, 166, .10), transparent 70%),
    var(--bg-lift);
  border-top: 1px solid var(--line-soft);
}
.close .narrow { margin: 0 auto; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.footer { padding: 56px 0 44px; border-top: 1px solid var(--line-soft); background: var(--bg); }

.footTop {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
  gap: 40px;
  padding-bottom: 36px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--line-soft);
}
.footBrand img { display: block; width: 120px; height: auto; mix-blend-mode: screen; margin-bottom: 14px; }
.footBlurb { color: var(--muted); font-size: 13.5px; max-width: 34ch; }

.footCols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.footCol { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.footCol h2 {
  margin: 0 0 2px;
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--faint);
}
.footCol a {
  display: inline-flex; align-items: center; min-height: 26px;
  color: var(--muted); font-size: 14px;
}
.footCol a:hover { color: var(--text); }

.disclaimer { color: var(--faint); font-size: 12.5px; max-width: 86ch; line-height: 1.6; }
.copyright { margin-top: 18px; color: var(--faint); font-size: 12.5px; }

@media (max-width: 760px) {
  .footTop { grid-template-columns: 1fr; gap: 30px; }
  .footCols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
}

@media (max-width: 600px) {
  .hero { padding: 64px 0 60px; }
  section { padding: 62px 0; }
  .card, .evidence { padding: 22px; }
}

/* ── Small phones ────────────────────────────────────────────────────────── */
/*
 * Below about 360px the bar stopped fitting.
 *
 * With the in-page links already hidden, the row is the wordmark (132px), a
 * gap, and the call to action — which grew when "Request access" became
 * "Contact founders". Together with 48px of gutter that came to more than a
 * 320px screen has, so the whole page scrolled sideways: the bar is `sticky`
 * and full width, so its overflow is the document's.
 *
 * The gutter narrows first, then the logo, then the button's padding. The
 * label itself is not touched — shortening the one action on the page to make
 * a layout work is solving the wrong problem.
 */
@media (max-width: 420px) {
  .wrap { padding: 0 16px; }
  /*
   * "Every tick" is held together by a non-breaking space so it never splits
   * across two lines mid-phrase. That is right, and it is also why the tile
   * cannot narrow past the width of the phrase: at 320px the two-column grid
   * gives each tile 144px and the words needed 154, so the figure pushed the
   * *document* 15px wider than the screen and every section scrolled sideways
   * with it. Nothing looked broken — the page was simply 335px wide.
   *
   * Shrinking the figure is the fix rather than letting it wrap: a heading
   * number that breaks in half reads as a layout accident.
   */
  .factNum { font-size: 1.75rem; }
  .brand img { width: 112px; }
  .btnSm { padding: 8px 13px; font-size: 13px; }
  .navInner { gap: 10px; }
}

@media (max-width: 340px) {
  .brand img { width: 96px; }
  .btnSm { padding: 7px 11px; font-size: 12.5px; }
}

/* ── Contact page ────────────────────────────────────────────────────────── */

/* The hero without the product panel beside it: the same lighting and spacing,
   left-aligned, sized for a page title rather than a headline. */
.heroPlain { padding: 76px 0 40px; text-align: left; }
.heroPlain .narrow { margin: 0 auto; }
.pageTitle {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.6vw, 2.9rem);
  line-height: 1.08; letter-spacing: -0.032em; font-weight: 700;
}
.formSection { padding-top: 0; }
/* The form is a card and does not want the hover lift the feature cards have. */
.formSection .card:hover { border-color: var(--line); background: var(--bg-card); }

/* One footer, two shapes. The home page pairs the columns with a brand block;
   here there is no brand block, so the columns start at the left edge. */
.footColsFlat { grid-template-columns: repeat(2, minmax(0, 220px)); margin: 0 0 30px; padding-bottom: 30px; border-bottom: 1px solid var(--line-soft); }

/* ── Contact form ────────────────────────────────────────────────────────── */
.field { margin-bottom: 20px; }
.field label { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 600; color: var(--text-soft); }
.field input, .field textarea {
  width: 100%;
  background: #070a0e;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  color: var(--text);
  padding: 12px 13px;
  font: inherit;
  font-size: 15px;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field textarea:focus { border-color: var(--mint); outline: none; }
.hint { margin: 7px 0 0; color: var(--faint); font-size: 13px; }

/* Empty until something is said, so it never occupies space it has no use for. */
.formStatus { margin: 0 0 16px; font-size: 14px; color: var(--text-soft); }
.formStatus:empty { display: none; }
.formStatus.good { color: var(--mint); }
.formStatus.bad  { color: var(--loss); }

button.btn { cursor: pointer; font-family: inherit; }
button.btn[disabled] { opacity: .55; cursor: progress; }