/* ============================================================
   Sumsight Pre-launch Site
   Voice: Direction A — The Ethicist
   Visual: Pure black-and-white + selective aurora on hero & footer.
   ============================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }

/* ---------- Tokens ---------- */
:root {
  --ink-100: #0A0A0A;
  --ink-80:  #2B2B2B;
  --ink-60:  #5C5C5C;
  --ink-40:  #8A8A8A;
  --ink-20:  #BFBFBF;
  --ink-10:  #E6E6E6;
  --ink-05:  #F4F4F4;
  --ink-02:  #FAFAFA;
  --paper:   #FFFFFF;

  --aurora-violet: oklch(0.74 0.10 295);
  --aurora-blue:   oklch(0.78 0.06 220);
  --aurora-sage:   oklch(0.78 0.10 145);
  --aurora-yellow: oklch(0.88 0.10  95);
  --aurora-amber:  oklch(0.82 0.10  75);

  --s-1:  4px;  --s-2:  8px;  --s-3:  12px; --s-4:  16px; --s-5:  24px;
  --s-6:  32px; --s-7:  48px; --s-8:  64px; --s-9:  96px; --s-10: 128px;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "SF Mono", "Berkeley Mono", "JetBrains Mono", ui-monospace, monospace;

  /* Type scale — hybrid, deliberately not one ratio end to end.
     13→18 steps in near-constant +1/+2px increments; 18→36 runs ~1.28; 36→64
     runs 1.333. That break is correct, not sloppy: at UI sizes the noticeable
     difference between two sizes is roughly constant in absolute px, so a
     geometric ratio extended downward collapses (16 ÷ 1.28 = 12.5, then 9.8 —
     unusable), while at display sizes a constant px step stops reading as a
     rank change. Compress at the bottom, expand at the top.
       xs  13  micro-labels — uppercase kickers, tags, legal, value labels
       sm  14  secondary UI + supporting body — nav, buttons, meta, card body
       base 16 primary body copy and form inputs
       md  18  lede paragraphs, minor headings, brand wordmark
       lg  22  component headline — card titles, consent title, strip values
       xl  28  pull quote / sub-section headline; h2 at ≤800px
       2xl 36  section headline (h2)
       3xl 48  secondary-page title; h1 at ≤800px
       4xl 64  hero title only
     Tracking is the family marker, and it carries as much rank as size does:
     headings run negative (-0.01 to -0.025em, steepening with size), reading
     sizes run 0, uppercase micro-labels run +0.12em. A thing set at heading
     size WITHOUT negative tracking is deliberately not a heading. */
  --t-xs:   13px; --t-sm:   14px; --t-base: 16px; --t-md:   18px;
  --t-lg:   22px; --t-xl:   28px; --t-2xl:  36px; --t-3xl:  48px; --t-4xl:  64px;

  --w-prose: 680px; --w-wide: 960px; --w-page: 1120px;
  --ease: cubic-bezier(0.2, 0.0, 0, 1);
}

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-padding-top: 72px;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--ink-100);
  background: var(--paper);
}
::selection { background: var(--ink-100); color: var(--paper); }

h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -0.01em; font-weight: 600; }
h1 { font-size: var(--t-4xl); letter-spacing: -0.025em; }
h2 { font-size: var(--t-2xl); letter-spacing: -0.02em; }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-md); }

.eyebrow { font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-60); font-weight: 500; }
.lede    { font-size: var(--t-md); line-height: 1.55; color: var(--ink-80); max-width: 56ch; }
.meta    { font-size: var(--t-sm); color: var(--ink-40); letter-spacing: 0.01em; }

p { color: var(--ink-80); max-width: 64ch; }
.prose p + p { margin-top: var(--s-4); }
.prose h2 { margin-top: var(--s-9); margin-bottom: var(--s-4); }
.prose h3 { margin-top: var(--s-7); margin-bottom: var(--s-3); }
.prose ul.bullets { margin-top: var(--s-3); }
.prose ul.bullets li { position: relative; padding-left: var(--s-5); color: var(--ink-80); margin-bottom: var(--s-2); max-width: 64ch; }
.prose ul.bullets li::before { content: "—"; position: absolute; left: 0; color: var(--ink-40); }

.eyebrow + h1, .eyebrow + h2, .eyebrow + h3, .eyebrow + h4 { margin-top: var(--s-4); }

a.link { border-bottom: 1px solid var(--ink-20); transition: border-color 200ms var(--ease), color 200ms var(--ease); }
a.link:hover { border-bottom-color: var(--ink-100); }

code, .mono { font-family: var(--mono); font-size: 0.92em; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.page  { max-width: var(--w-page);  margin: 0 auto; padding: 0 var(--s-6); }
.wide  { max-width: var(--w-wide);  margin: 0 auto; padding: 0 var(--s-6); }
.prose { max-width: var(--w-prose); margin: 0 auto; padding: 0 var(--s-6); }

section { padding: var(--s-9) 0; position: relative; }
section + section { border-top: 1px solid var(--ink-10); }

/* Top nav — transparent at rest, liquid glass once scrolled */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background 220ms var(--ease), border-color 220ms var(--ease), backdrop-filter 220ms var(--ease), -webkit-backdrop-filter 220ms var(--ease);
}
.nav.is-scrolled {
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: rgba(10, 10, 10, 0.06);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 56px; max-width: var(--w-page); margin: 0 auto; padding: 0 var(--s-6); }
.brand { font-weight: 600; letter-spacing: -0.01em; font-size: var(--t-md); }
.nav-cta { font-size: var(--t-sm); font-weight: 500; border: 1px solid var(--ink-100); padding: 6px 12px; transition: background 180ms var(--ease), color 180ms var(--ease); }
.nav-cta:hover { background: var(--ink-100); color: var(--paper); }

.btn { display: inline-flex; align-items: center; gap: var(--s-2); padding: 12px 20px; font-size: var(--t-sm); font-weight: 500; border: 1px solid var(--ink-100); transition: background 180ms var(--ease), color 180ms var(--ease); }
.btn-primary { background: var(--ink-100); color: var(--paper); }
.btn-primary:hover { background: var(--paper); color: var(--ink-100); }
.btn-secondary { background: var(--paper); color: var(--ink-100); }
.btn-secondary:hover { background: var(--ink-100); color: var(--paper); }
.btn-row { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }

/* HERO with aurora */
.hero {
  padding: var(--s-10) 0 var(--s-9);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(180deg, transparent 0%, transparent 65%, rgba(255,255,255,0.85) 92%, var(--paper) 100%),
    radial-gradient(60% 80% at 15% 50%, oklch(0.95 0.13 100 / 0.85), transparent 70%),
    radial-gradient(60% 80% at 50% 50%, oklch(0.88 0.13 190 / 0.90), transparent 70%),
    radial-gradient(60% 80% at 85% 50%, oklch(0.85 0.12 295 / 0.90), transparent 70%),
    oklch(0.86 0.08 240);
}
.hero h1 { max-width: 18ch; }
.hero .lede { margin-top: var(--s-5); }
.hero .form-block { margin-top: var(--s-7); }
.hero .meta { margin-top: var(--s-5); }

/* Email form */
.form-block { max-width: 520px; }
.subscribe-form { display: flex; gap: 0; border: 1px solid var(--ink-100); background: var(--paper); align-items: stretch; }
.subscribe-form input[type="email"] { flex: 1; border: 0; padding: 14px 16px; font: inherit; font-size: var(--t-base); background: transparent; color: var(--ink-100); outline: none; min-width: 0; }
.subscribe-form input[type="email"]::placeholder { color: var(--ink-40); }
.subscribe-form input[type="email"]:focus { background: var(--ink-02); }
.subscribe-form button { border: 0; border-left: 1px solid var(--ink-100); padding: 14px 22px; font-size: var(--t-sm); font-weight: 500; background: var(--ink-100); color: var(--paper); transition: background 180ms var(--ease), color 180ms var(--ease); white-space: nowrap; }
.subscribe-form button:hover { background: var(--paper); color: var(--ink-100); }
.subscribe-form button:disabled { opacity: 0.5; cursor: not-allowed; }
.form-meta { margin-top: var(--s-3); font-size: var(--t-sm); color: var(--ink-60); }
.form-meta a { color: var(--ink-100); border-bottom: 1px solid var(--ink-20); }
.form-meta a:hover { border-bottom-color: var(--ink-100); }
.form-status { margin-top: var(--s-4); font-size: var(--t-sm); color: var(--ink-80); min-height: 1.5em; }
.form-status.is-success { color: var(--ink-100); font-weight: 500; }
.form-status.is-error { color: var(--ink-100); }
.subscribe-wrap.is-submitted .subscribe-form { display: none; }

/* Numbers strip */
.numbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-1); margin-top: var(--s-6); border-top: 1px solid var(--ink-10); border-bottom: 1px solid var(--ink-10); }
.numbers .n { padding: var(--s-6) var(--s-5); border-right: 1px solid var(--ink-10); }
.numbers .n:last-child { border-right: none; }
/* .v is deliberately NOT in the heading family. Only one of the four values is
   a numeral — the other three are words, and words set at display size read as
   headlines whatever element wraps them, which is why this strip was competing
   with the h2 below it. Two markers demote it: --t-lg, a full rank under h2's
   --t-2xl, and letter-spacing 0, which drops it out of the negative-tracking
   heading family by system rule rather than by size alone. Do not restore
   -0.02em — matching h2's weight made size on its own too weak a signal. */
.numbers .n .v { font-size: var(--t-lg); font-weight: 600; letter-spacing: 0; display: block; line-height: 1.2; }
/* 0.12em matches .eyebrow, which sits directly above this strip in the same
   section — two 13px uppercase labels a few px apart in tracking read as an
   accident, not a pair. s-2 rather than s-3 binds label to value: the gap
   inside a pair has to be smaller than the gap between pairs, and at 22px the
   value no longer needs 12px of clearance to hold the top of the stack. */
.numbers .n .l { display: block; margin-top: var(--s-2); font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-60); }

/* Manifesto pull */
/* max-width intentionally unset: the manifesto is lineated with <br>, so each
   refusal should occupy exactly one line. A ch-based cap re-wraps them and
   destroys the left-edge "It will not" column that makes the section scannable. */
.pull { font-size: var(--t-xl); line-height: 1.4; letter-spacing: -0.01em; font-weight: 500; color: var(--ink-100); border-left: 1px solid var(--ink-100); padding-left: var(--s-5); }

/* Wedge cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-1); margin-top: var(--s-6); }
.card { background: var(--paper); border: 1px solid var(--ink-10); padding: var(--s-6); display: flex; flex-direction: column; min-height: 240px; transition: border-color 200ms var(--ease), background 200ms var(--ease); }
.card:hover { border-color: var(--ink-100); background: var(--ink-02); }
.card .eyebrow { margin-bottom: var(--s-3); }
.card h3 { font-size: var(--t-lg); margin-bottom: var(--s-3); letter-spacing: -0.01em; }
.card p { color: var(--ink-60); flex-grow: 1; font-size: var(--t-sm); }

/* Tag row */
.tag-row { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.tag { border: 1px solid var(--ink-10); padding: 6px 12px; font-size: var(--t-xs); letter-spacing: 0.04em; color: var(--ink-60); text-transform: uppercase; }

/* FAQ */
.faq { border-top: 1px solid var(--ink-10); margin-top: var(--s-6); }
.faq details { border-bottom: 1px solid var(--ink-10); padding: var(--s-5) 0; }
.faq summary { cursor: pointer; font-weight: 500; font-size: var(--t-md); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: var(--t-lg); color: var(--ink-40); transition: transform 200ms var(--ease); }
.faq details[open] summary::after { content: "−"; color: var(--ink-100); }
.faq details p { margin-top: var(--s-3); }

/* Footer with subtle aurora */
.footer {
  border-top: 1px solid var(--ink-10);
  padding: var(--s-8) 0 var(--s-7);
  margin-top: var(--s-9);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(50% 80% at 12% 100%, oklch(0.97 0.06 100 / 0.30), transparent 70%),
    radial-gradient(55% 90% at 50% 100%, oklch(0.94 0.06 190 / 0.25), transparent 70%),
    radial-gradient(55% 90% at 88% 100%, oklch(0.93 0.06 295 / 0.28), transparent 70%),
    linear-gradient(180deg, var(--paper) 0%, oklch(0.98 0.01 240) 100%);
}
.footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--aurora-violet), var(--aurora-sage), var(--aurora-amber), transparent);
  opacity: 0.6;
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s-6); align-items: start; }
.footer h5 { font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-60); font-weight: 500; margin-bottom: var(--s-3); }
.footer ul li { margin-bottom: var(--s-2); }
.footer a { color: var(--ink-60); font-size: var(--t-sm); }
.footer a:hover { color: var(--ink-100); }
.footer .socials { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.footer .socials a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--ink-10); border-radius: 999px; color: var(--ink-60); transition: color 160ms var(--ease), border-color 160ms var(--ease), background 160ms var(--ease), transform 160ms var(--ease); }
.footer .socials a:hover { color: var(--ink-100); border-color: var(--ink-100); background: var(--ink-02); transform: translateY(-1px); }
.footer .socials svg { width: 15px; height: 15px; display: block; }
.footer .brand-block .wordmark { font-size: var(--t-md); font-weight: 600; letter-spacing: -0.01em; }
.footer .brand-block p { margin-top: var(--s-2); font-size: var(--t-sm); color: var(--ink-60); }
.footer-bottom { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--ink-10); display: flex; justify-content: space-between; font-size: var(--t-xs); color: var(--ink-40); letter-spacing: 0.02em; }

/* Status pages */
.status-page { min-height: 70vh; display: flex; align-items: center; }
.status-page .prose { padding-top: var(--s-9); padding-bottom: var(--s-9); }
.status-page h1 { font-size: var(--t-3xl); }
.status-page .lede { margin-top: var(--s-4); }
.status-page .btn-row { margin-top: var(--s-7); }
.status-icon { width: 36px; height: 36px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--ink-100); margin-bottom: var(--s-5); font-size: 18px; font-weight: 600; }

@media (max-width: 800px) {
  h1 { font-size: var(--t-3xl); }
  h2 { font-size: var(--t-xl); }
  .cards { grid-template-columns: 1fr; }
  .numbers { grid-template-columns: 1fr 1fr; }
  .numbers .n { border-right: none; border-bottom: 1px solid var(--ink-10); }
  .numbers .n:nth-child(even) { border-right: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer .brand-block { grid-column: 1 / -1; }
  section { padding: var(--s-7) 0; }
  .hero { padding: var(--s-8) 0 var(--s-7); }
  .subscribe-form { flex-direction: column; }
  .subscribe-form button { border-left: 0; border-top: 1px solid var(--ink-100); }
}

/* Analytics consent gate.
   Accept and Reject are deliberately identical: same element, same size,
   same row, one click each. Do not restyle one to outweigh the other —
   reject must be as easy as accept, and that is law, not taste.
   z-index sits above the sticky nav (50), which creates its own stacking
   context via backdrop-filter once scrolled. */
.consent {
  position: fixed;
  left: var(--s-4); right: var(--s-4); bottom: var(--s-4);
  z-index: 1000;
  max-width: var(--w-page);
  margin: 0 auto;
  background: var(--ink-100);
  color: var(--paper);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.28);
}
.consent-inner { padding: var(--s-6); display: flex; gap: var(--s-7); align-items: center; justify-content: space-between; }
.consent-copy { max-width: 68ch; }
/* The global `p { color: var(--ink-80) }` rule matches these paragraphs
   DIRECTLY, and a direct match always beats an inherited colour no matter how
   specific the parent is. Setting the colour on .consent-copy alone left the
   body text at #2B2B2B on #0A0A0A — 1.4:1, effectively invisible. Keep the
   colour on the <p> itself. */
.consent-copy p { margin: 0; max-width: none; font-size: var(--t-base); line-height: 1.55; color: #E8E8E8; }
/* Must out-specify `.consent-copy p` (0,1,1) above — the title is one of
   those paragraphs, so a bare `.consent-title` (0,1,0) loses and the heading
   silently renders at body size and weight. */
.consent-copy .consent-title { font-size: var(--t-lg); font-weight: 700; color: var(--paper); margin-bottom: var(--s-3); letter-spacing: -0.02em; line-height: 1.2; }
.consent-copy a { color: var(--paper); border-bottom: 1px solid rgba(255, 255, 255, 0.45); }
.consent-copy a:hover { border-bottom-color: var(--paper); }
/* Stacked, equal-width column (borrowed from the reference). Stacking makes
   the two options identical in width as well as height, which reinforces the
   equal-ease requirement rather than working against it. */
.consent-actions { display: flex; flex-direction: column; gap: var(--s-3); flex-shrink: 0; min-width: 208px; }
.consent-btn { display: block; width: 100%; border: 1px solid var(--paper); padding: 14px 28px; font-family: var(--sans); font-size: var(--t-base); font-weight: 700; background: var(--paper); color: var(--ink-100); cursor: pointer; transition: background 180ms var(--ease), color 180ms var(--ease); white-space: nowrap; }
.consent-btn:hover { background: transparent; color: var(--paper); }
.consent-btn:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
@media (max-width: 800px) {
  .consent { left: var(--s-3); right: var(--s-3); bottom: var(--s-3); }
  .consent-inner { flex-direction: column; align-items: stretch; gap: var(--s-4); padding: var(--s-4); }
  .consent-actions { width: 100%; }
  .consent-btn { flex: 1; padding: 14px 20px; }
}