/* Semitrical — site styles.
 *
 * Design system is Sreeram's (2026-08-26): light ground, ink text, one gold accent, DM Sans
 * with DM Mono for figures. Extracted from his single-file draft into its own stylesheet so
 * the markup stays readable and the pages can share it.
 *
 * The gold is the ONLY accent. Everything else is ink at four weights and one rule colour —
 * which is what keeps a page full of numbers from looking like a dashboard.
 */

:root {
  --ink: #0f1117; --ink-2: #2d3142; --ink-3: #5c6078; --ink-4: #9098b0;
  --surface: #f7f8fc; --white: #fff; --rule: #e2e4ea;
  --gold: #DAA520; --gold-soft: #f5e6b8;
  --font: 'DM Sans', sans-serif; --mono: 'DM Mono', monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font); color: var(--ink); background: var(--white); }

/* NAV */
nav {
  display: flex; align-items: center; padding: 16px 48px;
  position: sticky; top: 0; background: rgba(255,255,255,0.95); backdrop-filter: blur(8px);
  z-index: 100; border-bottom: 1px solid var(--rule);
}
.logo { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.logo span { color: var(--gold); }
.nav-links { display: flex; gap: 28px; margin-left: 48px; }
.nav-links a { font-size: 13px; color: var(--ink-3); text-decoration: none; font-weight: 500; }
.nav-links a:hover { color: var(--ink); }
.nav-cta { margin-left: auto; padding: 8px 20px; background: var(--ink); color: #fff; border: none; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--font); }
.nav-cta:hover { background: #2d3142; }

/* HERO */
.hero {
  padding: 80px 48px 60px;
  max-width: 900px;
}
.hero-badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 600; font-family: var(--mono); color: var(--gold); background: #fef9ee; border: 1px solid var(--gold-soft); margin-bottom: 20px; letter-spacing: 0.03em; }
.hero h1 { font-size: 42px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 20px; }
.hero h1 em { font-style: normal; color: var(--gold); }
.hero-sub { font-size: 17px; color: var(--ink-2); line-height: 1.65; margin-bottom: 28px; max-width: 700px; }
.hero-actions { display: flex; gap: 12px; align-items: center; }
.btn-primary { padding: 12px 24px; background: var(--ink); color: #fff; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: var(--font); }
.btn-primary:hover { background: #2d3142; }
.btn-secondary { padding: 12px 24px; background: transparent; color: var(--ink); border: 1.5px solid var(--rule); border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; font-family: var(--font); }
.btn-secondary:hover { border-color: var(--ink-3); }

/* SCREENSHOT PLACEHOLDER */
.screenshot-section {
  padding: 20px 48px 60px;
  max-width: 1100px;
}
.screenshot-frame {
  background: var(--ink); border-radius: 12px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
  aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center;
  position: relative;
}
.screenshot-placeholder {
  color: var(--ink-3); font-size: 14px; font-family: var(--mono);
  text-align: center; padding: 40px;
}
.screenshot-tabs {
  position: absolute; top: 0; left: 0; right: 0; height: 36px;
  background: #0a0a09; display: flex; align-items: center; padding: 0 16px; gap: 0;
}
.screenshot-tab {
  padding: 0 14px; height: 100%; display: flex; align-items: center;
  font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.4);
}
.screenshot-tab.active { color: #fff; border-bottom: 2px solid var(--gold); }

/* SIGNAL PROOF */
.signal-section {
  padding: 60px 48px; background: var(--surface); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.signal-section .section-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold); margin-bottom: 10px; }
.signal-section h2 { font-size: 28px; font-weight: 700; margin-bottom: 8px; }
.signal-section .section-sub { font-size: 14px; color: var(--ink-3); margin-bottom: 32px; max-width: 600px; }
.signal-card {
  background: var(--white); border: 1px solid var(--rule); border-radius: 10px;
  padding: 28px 32px; max-width: 800px;
}
.signal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.signal-badge { padding: 3px 10px; border-radius: 20px; font-size: 10px; font-weight: 700; font-family: var(--mono); letter-spacing: 0.04em; }
.signal-badge.tight { background: #dcfce7; color: #166534; }
.signal-badge.excess { background: #e0e7ff; color: #3730a3; }
.signal-supplier { font-size: 14px; font-weight: 600; }
.signal-body { font-size: 13px; color: var(--ink-2); line-height: 1.7; margin-bottom: 16px; }
.signal-body strong { color: var(--ink); }
.signal-metrics { display: flex; gap: 24px; flex-wrap: wrap; }
.signal-metric { }
.signal-metric-val { font-size: 20px; font-weight: 700; font-family: var(--mono); color: var(--ink); }
.signal-metric-label { font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; }
.signal-cta { margin-top: 20px; font-size: 12px; color: var(--gold); font-weight: 600; }
.signal-cta a { color: var(--gold); text-decoration: none; }
.signal-cta a:hover { text-decoration: underline; }

/* PROBLEM */
.problem-section { padding: 60px 48px; max-width: 900px; }
.problem-section .section-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); margin-bottom: 10px; }
.problem-section h2 { font-size: 28px; font-weight: 700; margin-bottom: 16px; }
.problem-text { font-size: 15px; color: var(--ink-2); line-height: 1.7; margin-bottom: 24px; max-width: 700px; }
.problem-quote {
  padding: 16px 20px; border-radius: 8px; background: var(--surface);
  border-left: 3px solid var(--gold); font-size: 14px; font-style: italic;
  color: var(--ink-3); line-height: 1.6; max-width: 600px;
}
.problem-quote cite { display: block; margin-top: 8px; font-style: normal; font-weight: 600; font-size: 12px; }

/* WHAT YOU GET */
.platform-section { padding: 60px 48px; background: var(--surface); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.platform-section .section-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold); margin-bottom: 10px; }
.platform-section h2 { font-size: 28px; font-weight: 700; margin-bottom: 8px; }
.platform-section .section-sub { font-size: 14px; color: var(--ink-3); margin-bottom: 32px; max-width: 650px; }
.platform-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1000px; }
.platform-card {
  background: var(--white); border: 1px solid var(--rule); border-radius: 10px;
  padding: 24px; position: relative; overflow: hidden;
}
.platform-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gold); opacity: 0; transition: opacity 0.2s; }
.platform-card:hover::before { opacity: 1; }
.platform-num { font-size: 11px; font-family: var(--mono); color: var(--gold); font-weight: 600; margin-bottom: 8px; }
.platform-card h3 { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.platform-card p { font-size: 12px; color: var(--ink-3); line-height: 1.6; }

/* SECOND ROW — contract + ownership */
.secondary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 1000px; margin-top: 16px; }
.secondary-card {
  background: var(--white); border: 1px solid var(--rule); border-radius: 10px;
  padding: 24px; display: flex; gap: 16px; align-items: flex-start;
}
.secondary-icon { font-size: 22px; flex-shrink: 0; margin-top: 2px; }
.secondary-card h3 { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.secondary-card p { font-size: 12px; color: var(--ink-3); line-height: 1.6; }
.secondary-tag { display: inline-block; font-size: 9px; font-weight: 600; padding: 2px 8px; border-radius: 20px; background: #fef9ee; color: var(--gold); font-family: var(--mono); margin-bottom: 8px; }

/* MARKETS */
.markets-section { padding: 60px 48px; max-width: 1000px; }
.markets-section .section-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); margin-bottom: 10px; }
.markets-section h2 { font-size: 28px; font-weight: 700; margin-bottom: 8px; }
.markets-section .section-sub { font-size: 14px; color: var(--ink-3); margin-bottom: 32px; max-width: 600px; }
.markets-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.market-card {
  border: 1px solid var(--rule); border-radius: 10px; padding: 20px;
  transition: border-color 0.2s;
}
.market-card:hover { border-color: var(--gold); }
.market-card h3 { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.market-card p { font-size: 12px; color: var(--ink-3); line-height: 1.55; }

/* OUTPUT */
.output-section { padding: 60px 48px; background: var(--surface); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.output-section .section-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold); margin-bottom: 10px; }
.output-section h2 { font-size: 28px; font-weight: 700; margin-bottom: 8px; }
.output-section .section-sub { font-size: 14px; color: var(--ink-3); margin-bottom: 32px; max-width: 650px; }
.output-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 800px; }
.output-card {
  background: var(--white); border: 1px solid var(--rule); border-radius: 10px; padding: 24px;
}
.output-card h3 { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.output-card p { font-size: 12px; color: var(--ink-3); line-height: 1.6; }

/* EVIDENCE CTA */
.evidence-cta {
  padding: 60px 48px; text-align: center;
}
.evidence-cta h2 { font-size: 28px; font-weight: 700; margin-bottom: 8px; }
.evidence-cta p { font-size: 14px; color: var(--ink-3); margin-bottom: 24px; }
.evidence-links { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.ev-link {
  padding: 10px 20px; border: 1.5px solid var(--rule); border-radius: 6px;
  font-size: 13px; font-weight: 500; color: var(--ink-2); text-decoration: none;
  transition: all 0.15s;
}
.ev-link:hover { border-color: var(--gold); color: var(--ink); }

/* FOOTER */
footer {
  padding: 32px 48px; border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: center;
}
.footer-logo { font-size: 14px; font-weight: 700; }
.footer-logo span { color: var(--gold); }
.footer-right { font-size: 11px; color: var(--ink-4); }

/* ── ADDED: shared page furniture ────────────────────────────────────────────────────── */

/* Real product screenshots replace the placeholder frames. They are dark images on a light
   page, so they carry their own frame and shadow rather than sitting flat. */
.shot {
  width: 100%; display: block; border-radius: 10px;
  border: 1px solid var(--rule);
  box-shadow: 0 18px 50px rgba(15, 17, 23, 0.16);
}
.shot-wrap { max-width: 1100px; padding: 8px 48px 56px; }
.shot-caption {
  font-size: 11.5px; color: var(--ink-3); margin-top: 12px; font-family: var(--mono);
}

/* Evidence cases — the worked examples. Three columns on desktop, stacked on a phone. */
.cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.case {
  background: var(--white); border: 1px solid var(--rule); border-radius: 10px; padding: 22px 24px;
}
.case h3 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.case .case-kind {
  font-size: 10px; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--gold); margin-bottom: 10px;
}
.case p { font-size: 13px; color: var(--ink-2); line-height: 1.65; }
.case p + p { margin-top: 10px; }
.case .case-take { color: var(--ink); font-weight: 500; }

/* Founders */
.founders { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; }
.founder h3 { font-size: 16px; font-weight: 700; }
.founder .role {
  font-size: 11px; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--gold); margin: 2px 0 10px;
}
.founder p { font-size: 13.5px; color: var(--ink-2); line-height: 1.7; }

/* Generic section wrapper, so pages other than the home page do not need bespoke rules. */
.section { padding: 60px 48px; max-width: 1100px; }
.section.alt { background: var(--surface); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); max-width: none; }
.section.alt > .inner { max-width: 1100px; margin: 0 auto; }
.section h2 { font-size: 28px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 10px; }
.section .section-sub { font-size: 14.5px; color: var(--ink-3); line-height: 1.7; margin-bottom: 30px; max-width: 660px; }
.section-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--gold); margin-bottom: 10px;
}

/* Footnote / honesty line. Used wherever a claim needs its boundary stated next to it. */
.note {
  font-size: 12px; color: var(--ink-3); line-height: 1.65; margin-top: 18px;
  padding-left: 14px; border-left: 2px solid var(--gold-soft); max-width: 720px;
}

a.plain { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
a.plain:hover { border-color: var(--ink-3); }

/* ── Small screens. The nav collapses to the logo and the CTA; everything else stacks. */
@media (max-width: 720px) {
  nav { padding: 14px 20px; }
  .hero { padding: 48px 20px 36px; }
  .hero h1 { font-size: 30px; }
  .section, .shot-wrap, .signal-section, .screenshot-section { padding-left: 20px; padding-right: 20px; }
}


/* ── Logo. The wordmark is an image, so .logo only has to size and align it. The old text
   rules are kept above for anywhere the lockup is unavailable. ─────────────────────────── */
.logo { display: inline-flex; align-items: center; line-height: 0; }
.logo img { display: block; height: 34px; width: auto; }
footer .logo img { height: 26px; }
@media (max-width: 720px) { .logo img { height: 28px; } }

/* ── Nav as tabs. Each top-level section is its own page, so the "selected tab" is simply
   the page you are on. Real URLs mean the evidence can be SENT to a sceptic, which is the
   whole point of having it. ─────────────────────────────────────────────────────────────── */
.nav-links a { position: relative; padding: 6px 0; }
.nav-links a.is-current { color: var(--ink); font-weight: 600; }
.nav-links a.is-current::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -17px;
  height: 2px; background: var(--gold);
}

/* ── LAYOUT: centre the page and use the width ─────────────────────────────────────────
   Sreeram's draft was authored as a single left column with a fixed 48px gutter, so on a
   wide monitor every section hugged the left edge with a void to the right. One width token
   now governs every container, and the nav gutter is computed from the same number so the
   logo lines up with the content beneath it rather than floating out on its own.

   Prose keeps its own narrower cap. Widening a container is not the same as widening a
   paragraph — text set to 1180px is unreadable however good the page looks. */

:root { --maxw: 1180px; --gutter: 48px; }

nav {
  /* Same optical left edge as the centred content below, without needing an inner wrapper. */
  padding-left: max(var(--gutter), calc((100% - var(--maxw)) / 2));
  padding-right: max(var(--gutter), calc((100% - var(--maxw)) / 2));
}

.hero,
.section,
.shot-wrap,
.section.alt > .inner,
.signal-section,
footer > div {
  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* Full-bleed bands keep their background edge-to-edge; only the content inside centres. */
.section.alt { max-width: none; }
.signal-section { max-width: none; }
.signal-section > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }

/* The hero was capped at 900px, which left it stranded on a wide screen. Let the block use
   the full width and cap the READING LINE instead. */
.hero { max-width: var(--maxw); }
.hero h1 { max-width: 15ch; font-size: clamp(34px, 4.2vw, 52px); }
.hero-sub { max-width: 62ch; }
.section-sub { max-width: 68ch; }

/* Cards get room to breathe now there is more of it — three across on a wide screen rather
   than four cramped ones. */
.cases { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.case { padding: 26px 28px; }

@media (max-width: 720px) {
  :root { --gutter: 20px; }
  .hero h1 { max-width: none; }
}

/* ── TYPE SCALE ────────────────────────────────────────────────────────────────────────
   The draft was set 2–3px small throughout — body copy at 13px against a modern convention
   of 16–18px. It read as dense and technical rather than confident.

   The reader decides this, not the designer: a procurement director in their forties or
   fifties, on a laptop, reading a page that is asking them to trust a judgement about their
   suppliers. Small type makes that harder for no gain.

   Typeface is unchanged. The page did not read dated, it read small — and changing the face
   at the same time would make it impossible to tell which change did the work. */

body { font-size: 15.5px; line-height: 1.7; }

.hero h1        { font-size: clamp(36px, 4.6vw, 60px); letter-spacing: -0.025em; line-height: 1.1; }
.hero-sub       { font-size: 18px; line-height: 1.65; }
.hero-badge     { font-size: 11.5px; }

.section h2,
.signal-section h2 { font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -0.018em; line-height: 1.2; }
.section .section-sub,
.signal-section .section-sub { font-size: 17px; line-height: 1.7; }
.section-label  { font-size: 11.5px; }

.case h3        { font-size: 17px; }
.case p         { font-size: 15px; line-height: 1.65; }
.case .case-kind { font-size: 10.5px; }

.founder h3     { font-size: 18px; }
.founder p      { font-size: 15.5px; line-height: 1.72; }
.founder .role  { font-size: 11.5px; }

.note           { font-size: 14px; line-height: 1.7; }
.shot-caption   { font-size: 12.5px; }

.nav-links a    { font-size: 14px; }
.nav-cta        { font-size: 14px; padding: 9px 22px; }
.btn-primary,
.btn-secondary  { font-size: 15px; padding: 13px 26px; }

footer          { font-size: 13.5px; }

/* Reading columns are measured in characters, so they narrow automatically as the type grows
   — otherwise a bigger font produces longer, harder lines rather than easier ones. */
.hero-sub       { max-width: 58ch; }
.section-sub    { max-width: 64ch; }

@media (max-width: 720px) {
  body { font-size: 15px; }
  .hero-sub { font-size: 16.5px; }
  .section .section-sub { font-size: 16px; }
}

/* ── Contact form ──────────────────────────────────────────────────────────────────────
   Every call to action was a mailto, which does nothing at all — silently — on a machine
   with no default mail client. That is most people using webmail, and it was the primary
   action on the site. A real form works for everyone and captures the lead. */

.form-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.65fr); gap: 44px; align-items: start; }

#contact-form label {
  display: block; margin: 18px 0 6px; font-size: 13px; font-weight: 600; color: var(--ink-2);
}
#contact-form label:first-child { margin-top: 0; }

#contact-form input,
#contact-form select,
#contact-form textarea {
  width: 100%; font-family: var(--font); font-size: 15.5px; color: var(--ink);
  padding: 11px 13px; background: var(--white);
  border: 1px solid var(--rule); border-radius: 7px; line-height: 1.5;
}
#contact-form textarea { resize: vertical; min-height: 110px; }
#contact-form input:focus,
#contact-form select:focus,
#contact-form textarea:focus {
  outline: none; border-color: var(--ink-3); box-shadow: 0 0 0 3px rgba(218, 165, 32, 0.14);
}
#contact-form button { margin-top: 22px; }
#contact-form button[disabled] { opacity: 0.55; cursor: default; }

.form-note { font-size: 13px; color: var(--ink-3); line-height: 1.6; margin-top: 12px; }
#form-error { color: #b91c1c; font-weight: 500; }

.form-aside {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 10px;
  padding: 24px 26px;
}
.form-aside h3 { font-size: 15px; font-weight: 700; margin-bottom: 12px; }
.form-aside ol { margin: 0; padding-left: 18px; }
.form-aside li { font-size: 14px; color: var(--ink-2); line-height: 1.65; margin-bottom: 10px; }

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


/* ── Mobile navigation ─────────────────────────────────────────────────────────────────
   The links were previously just hidden below 720px with nothing in their place, so a phone
   could not reach Markets, Evidence or About at all.

   The collapse is gated on .has-js-nav, which nav.js sets. If that script fails to load the
   links stay visible and wrap — navigation degraded rather than navigation gone. */

.nav-toggle { display: none; }

@media (max-width: 820px) {
  nav { flex-wrap: wrap; row-gap: 0; }

  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    order: 3; margin-left: 14px;
    width: 40px; height: 40px; padding: 0 9px;
    background: transparent; border: 1px solid var(--rule); border-radius: 8px;
    cursor: pointer;
  }
  .nav-toggle span {
    display: block; height: 2px; width: 100%; background: var(--ink-2); border-radius: 2px;
    transition: transform .18s ease, opacity .18s ease;
  }
  /* Bars become a cross when open, so the button says what it will do next. */
  .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2) { opacity: 0; }
  .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav-cta { order: 2; margin-left: auto; }

  .has-js-nav .nav-links {
    order: 4; flex-basis: 100%;
    display: none; flex-direction: column; gap: 0;
    margin: 0; padding: 6px 0 10px;
  }
  .has-js-nav .nav-links.is-open { display: flex; }
  .nav-links a {
    padding: 12px 2px; font-size: 15.5px; border-bottom: 1px solid var(--rule);
  }
  .nav-links a:last-child { border-bottom: 0; }
  /* The gold underline is a desktop affordance; on a stacked list it reads as a divider. */
  .nav-links a.is-current::after { display: none; }
  .nav-links a.is-current { color: var(--gold); }
}

@media (max-width: 420px) {
  .nav-cta { font-size: 13px; padding: 8px 14px; }
}