/* ================================================================
   KILLSWITCH — landing page (take 2)
   Aesthetic: editorial financial statement / ledger.
   Display: Fraunces · Numbers+labels: IBM Plex Mono · Body: Hanken Grotesque.
   Warm paper, black ink, hairline ledger rules, one stamped red, accounting green.
   Phase A = the entire static site. No video in this file.
   ================================================================ */

:root {
  --paper:    #F4EFE4;
  --paper-2:  #ECE4D4;
  --paper-3:  #E4DAC6;
  --ink:      #1B1712;
  --ink-soft: #6E675A;
  --ink-faint:#9a9280;
  --rule:     #D6CCB8;
  --rule-2:   #CFC3A8;
  --red:      #C4321C;
  --red-deep: #A32712;
  --green:    #2F6B4C;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Hanken Grotesque', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --maxw: 1180px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* paper texture: faint ledger grid + warm top wash, never flat, never dark */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2;
  background:
    linear-gradient(180deg, #F8F4EB 0%, var(--paper) 22%),
    var(--paper);
}
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.5;
  background-image: linear-gradient(var(--rule) 1px, transparent 1px);
  background-size: 100% 34px;
  mask-image: linear-gradient(180deg, transparent, #000 40%, #000 92%, transparent);
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.04; letter-spacing: -0.015em; font-optical-sizing: auto; }

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

/* mono running-head label with a leader dash, like a statement field */
.field {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 12px;
}
.field::before { content: ""; width: 26px; height: 1px; background: var(--ink-soft); display: inline-block; }
.red  { color: var(--red); }
.green{ color: var(--green); }

/* stamped red DECLINED / KILL treatment */
.stamp {
  display: inline-block; font-family: var(--font-mono); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--red);
  border: 2px solid var(--red); border-radius: 4px; padding: 3px 10px;
  transform: rotate(-4deg); font-size: 0.8em;
  box-shadow: inset 0 0 0 1px rgba(196,50,28,0.25);
}

/* ---------- header ---------- */
header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px; transition: background .3s var(--ease), border-color .3s var(--ease);
  border-bottom: 1px solid transparent;
}
header.scrolled { background: rgba(244,239,228,0.9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); }
.brand { display: flex; align-items: center; gap: 11px; font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.12em; font-size: 15px; color: var(--ink); }
.brand .sq { width: 12px; height: 12px; background: var(--red); display: inline-block; }
header nav { display: flex; align-items: center; gap: 28px; }
header nav a { color: var(--ink-soft); text-decoration: none; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.02em; transition: color .2s; }
header nav a:hover { color: var(--ink); }
.nav-cta { color: var(--paper) !important; background: var(--ink); padding: 9px 17px; border-radius: 7px; transition: background .2s; }
.nav-cta:hover { background: var(--red); }
@media (max-width: 760px){ header nav a.navlink { display:none; } }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-weight: 600; font-size: 15px; padding: 15px 26px; border-radius: 9px; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform .18s var(--ease), background .2s, border-color .2s, color .2s; }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--red); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { border-color: var(--red); color: var(--red); }
.btn-lg { padding: 18px 36px; font-size: 16px; }

/* ================================================================
   HERO (Phase A: static, editorial statement)
   ================================================================ */
.hero { padding: 168px 0 90px; position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
@media (max-width: 940px){ .hero-grid { grid-template-columns: 1fr; gap: 40px; } }

.hero .eyebrow { margin-bottom: 26px; }
.hero h1 { font-size: clamp(2.7rem, 5.6vw, 4.7rem); letter-spacing: -0.02em; margin-bottom: 24px; }
.hero h1 em { font-style: italic; color: var(--red); }
.hero .sub { color: var(--ink-soft); font-size: clamp(1.05rem, 1.5vw, 1.22rem); max-width: 44ch; margin-bottom: 32px; }
.hero .sub b { color: var(--ink); font-weight: 600; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }

/* ledger social-proof strip */
.ledger-strip { border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--rule); }
.ledger-strip .row { display: flex; align-items: baseline; justify-content: space-between; padding: 11px 0; border-bottom: 1px dotted var(--rule-2); font-family: var(--font-mono); font-size: 13.5px; }
.ledger-strip .row:last-child { border-bottom: none; }
.ledger-strip .row .k { color: var(--ink-soft); }
.ledger-strip .row .dots { flex: 1; border-bottom: 1px dotted var(--ink-faint); margin: 0 12px 4px; }
.ledger-strip .row .v { color: var(--ink); font-weight: 600; font-size: 15px; }
.ledger-strip .row .v.red { color: var(--red); }

/* the statement card (static hero visual) */
.statement { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 6px; box-shadow: 0 24px 60px -34px rgba(27,23,18,0.4), 0 2px 0 var(--rule); overflow: hidden; }
.statement .st-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px; border-bottom: 1.5px solid var(--ink); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; }
.statement .st-head .doc { color: var(--ink-soft); }
.statement .st-head .no { color: var(--ink); }
.statement .st-body { padding: 22px; }
.st-line { display: flex; align-items: baseline; justify-content: space-between; font-family: var(--font-mono); font-size: 13px; padding: 9px 0; }
.st-line .lbl { color: var(--ink-soft); }
.st-line .amt { color: var(--ink); font-weight: 600; }
.st-line .amt.g { color: var(--green); }
.st-line .amt.r { color: var(--red); }
.st-rule { border-top: 1px dotted var(--rule-2); margin: 6px 0; }
.st-total { display: flex; justify-content: space-between; align-items: center; border-top: 1.5px solid var(--ink); margin-top: 10px; padding-top: 14px; }
.st-total .lbl { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.st-total .big { font-family: var(--font-mono); font-weight: 600; font-size: 30px; color: var(--ink); }
.st-stamp { text-align: right; margin-top: 16px; }

/* ================================================================
   HERO — Phase B motion variant (sticky scroll-scrub canvas)
   The clip is a warm paper statement, so the scrim is LIGHT (paper),
   dark ink copy reads directly over it. No dark chrome, no HUD.
   ================================================================ */
.hero-cine { position: relative; height: 360vh; }
.hero-cine .sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--paper); }
.hero-cine canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* paper scrims: warm wash left + bottom so ink copy stays legible over the clip */
.hero-cine .scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(244,239,228,0.94) 0%, rgba(244,239,228,0.72) 30%, rgba(244,239,228,0.0) 58%),
    linear-gradient(180deg, rgba(244,239,228,0.55) 0%, rgba(244,239,228,0.0) 24%, rgba(244,239,228,0.0) 62%, rgba(244,239,228,0.9) 100%);
}
/* scrubbing story lines (upper-left) */
.cine-story { position: absolute; top: 15vh; left: 0; right: 0; padding: 0 32px; pointer-events: none; }
.cine-story .wrap { position: relative; height: 40vh; }
.cine-story .reveal-line {
  position: absolute; top: 0; left: 0; max-width: 17ch;
  font-family: var(--font-display); font-weight: 600; font-size: clamp(2.1rem, 4.4vw, 3.7rem);
  line-height: 1.06; letter-spacing: -0.015em; color: var(--ink); opacity: 0; will-change: opacity, transform;
}
.cine-story .reveal-line em { font-style: italic; color: var(--red); }
/* persistent above-the-fold hero content (bottom-left) */
.cine-content { position: absolute; left: 0; right: 0; bottom: 6vh; padding: 0 32px; }
.cine-content .eyebrow { margin-bottom: 20px; }
.cine-content h1 { font-size: clamp(2.3rem, 4.6vw, 3.9rem); max-width: 15ch; margin-bottom: 20px; }
.cine-content h1 em { font-style: italic; color: var(--red); }
.cine-content .sub { color: var(--ink-soft); font-size: clamp(1rem, 1.4vw, 1.16rem); max-width: 46ch; margin-bottom: 26px; }
.cine-content .sub b { color: var(--ink); font-weight: 600; }
.cine-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }
.cine-strip { max-width: 620px; }
.cine-strip .row { display: flex; align-items: baseline; justify-content: space-between; padding: 8px 0; border-bottom: 1px dotted var(--rule-2); font-family: var(--font-mono); font-size: 12.5px; }
.cine-strip .row:first-child { border-top: 1.5px solid var(--ink); }
.cine-strip .row .k { color: var(--ink-soft); }
.cine-strip .row .v { color: var(--ink); font-weight: 600; }
.cine-strip .row .v.red { color: var(--red); }
.scroll-hint { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.28em; color: var(--ink-soft); transition: opacity .4s; }
@media (max-width: 760px){ .cine-story { top: 11vh; } .cine-strip .row:nth-child(n+3){ display:none; } }

/* ================================================================
   generic sections
   ================================================================ */
section.block { padding: 104px 0; border-top: 1px solid var(--rule); }
section.block.alt { background: linear-gradient(180deg, var(--paper) 0%, #EFE9DC 100%); }
.sec-head { max-width: 640px; margin-bottom: 52px; }
.sec-head .field { margin-bottom: 20px; }
.sec-head h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 16px; }
.sec-head h2 em { font-style: italic; color: var(--red); }
.sec-head p { color: var(--ink-soft); font-size: 1.1rem; max-width: 58ch; }
.sec-head p b { color: var(--ink); font-weight: 600; }

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ---------- media: full spend statement (real-product fidelity) ---------- */
.doc { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 8px; box-shadow: 0 30px 70px -40px rgba(27,23,18,0.4); overflow: hidden; }
.doc-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 26px; border-bottom: 1.5px solid var(--ink); font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.06em; }
.doc-head .path { color: var(--ink); }
.doc-head .meta { color: var(--ink-soft); display: flex; gap: 18px; }
.doc-head .meta .armed { color: var(--red); }
.doc-grid { display: grid; grid-template-columns: 1.25fr 1fr; }
@media (max-width: 800px){ .doc-grid { grid-template-columns: 1fr; } }
.doc-l { padding: 28px; border-right: 1px solid var(--rule); }
@media (max-width: 800px){ .doc-l { border-right: none; border-bottom: 1px solid var(--rule); } }
.doc-r { padding: 24px 28px; }
.meter-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.meter-row .cap { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-soft); letter-spacing: 0.04em; }
.meter-row .val { font-family: var(--font-mono); font-size: 24px; font-weight: 600; }
.meter { height: 10px; background: var(--paper-3); border: 1px solid var(--rule); border-radius: 2px; overflow: hidden; }
.meter > i { display: block; height: 100%; background: repeating-linear-gradient(45deg, var(--red) 0 6px, var(--red-deep) 6px 12px); }
.meter.g > i { width: 71%; background: repeating-linear-gradient(45deg, var(--green) 0 6px, #245538 6px 12px); }
.meter-foot { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.05em; margin-top: 7px; }
.calls { list-style: none; font-family: var(--font-mono); font-size: 12.5px; }
.calls li { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px dotted var(--rule-2); }
.calls li:last-child { border-bottom: none; }
.calls .m { color: var(--ink-soft); }
.calls .c { color: var(--ink); font-weight: 600; }
.calls li.killed .c { color: var(--red); }
.calls .t { font-size: 10px; padding: 2px 7px; border-radius: 3px; letter-spacing: 0.08em; margin-left: 8px; }
.calls .t.ok { background: rgba(47,107,76,0.14); color: var(--green); }
.calls .t.kill { background: rgba(196,50,28,0.14); color: var(--red); }
.doc-note { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-soft); margin-top: 14px; line-height: 1.55; }

/* ---------- features: ledger line-items ---------- */
.feat-list { border-top: 1.5px solid var(--ink); }
.feat-row { display: grid; grid-template-columns: 46px 1fr 1fr auto; gap: 26px; align-items: start; padding: 30px 0; border-bottom: 1px solid var(--rule); transition: background .25s; }
.feat-row:hover { background: rgba(27,23,18,0.025); }
@media (max-width: 820px){ .feat-row { grid-template-columns: 40px 1fr; gap: 10px 18px; } .feat-row .f-stat { grid-column: 2; } }
.feat-row .f-no { font-family: var(--font-mono); font-size: 13px; color: var(--ink-faint); padding-top: 6px; }
.feat-row .f-title { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; }
.feat-row .f-desc { color: var(--ink-soft); font-size: 1rem; }
.feat-row .f-stat { font-family: var(--font-mono); font-size: 12.5px; color: var(--red); white-space: nowrap; padding-top: 6px; text-align: right; }
@media (max-width: 820px){ .feat-row .f-stat { text-align: left; } }

/* ---------- proof ---------- */
.proof-lead { background: var(--paper-2); border: 1px solid var(--rule); border-left: 3px solid var(--red); border-radius: 6px; padding: 34px; margin-bottom: 38px; }
.proof-lead .q { font-family: var(--font-display); font-style: italic; font-size: clamp(1.3rem, 2.6vw, 1.95rem); line-height: 1.3; margin-bottom: 18px; }
.proof-lead .who { font-family: var(--font-mono); font-size: 13px; color: var(--ink-soft); }
.proof-lead .who a { color: var(--red); text-decoration: none; border-bottom: 1px solid rgba(196,50,28,0.35); }
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1.5px solid var(--ink); }
@media (max-width: 820px){ .proof-grid { grid-template-columns: 1fr; } }
.proof-card { padding: 24px 24px 26px; text-decoration: none; display: block; border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); transition: background .22s; }
.proof-card:hover { background: rgba(27,23,18,0.03); }
.proof-card .src { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); display: flex; justify-content: space-between; }
.proof-card .src .pts { color: var(--red); }
.proof-card .h { color: var(--ink); font-weight: 600; margin: 13px 0 8px; font-size: 1.05rem; line-height: 1.32; }
.proof-card .ex { color: var(--ink-soft); font-size: 0.92rem; }

/* ---------- FAQ ---------- */
.faq-list { border-top: 1.5px solid var(--ink); }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-q { width: 100%; text-align: left; background: none; border: none; color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: 1.28rem; padding: 26px 44px 26px 0; cursor: pointer; position: relative; }
.faq-q::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: 1.5rem; color: var(--red); transition: transform .3s var(--ease); }
.faq-item.open .faq-q::after { transform: translateY(-50%) rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.faq-a p { color: var(--ink-soft); padding: 0 44px 26px 0; font-size: 1.04rem; }
.faq-a p b { color: var(--ink); }

/* ---------- final CTA: closing statement plate ---------- */
.final { padding: 120px 0; border-top: 1.5px solid var(--ink); background: linear-gradient(180deg, #EFE9DC, #E7DECB); text-align: center; position: relative; }
.final .field { justify-content: center; margin-bottom: 26px; }
.final h2 { font-size: clamp(2.2rem, 5vw, 3.7rem); max-width: 17ch; margin: 0 auto 20px; }
.final h2 em { font-style: italic; color: var(--red); }
.final p { color: var(--ink-soft); max-width: 52ch; margin: 0 auto 34px; font-size: 1.14rem; }
.final .fine { margin-top: 22px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }

/* ---------- footer ---------- */
footer { background: var(--ink); color: #C9C0AE; padding: 66px 0 32px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 44px; }
@media (max-width: 820px){ .foot-grid { grid-template-columns: 1fr 1fr; } }
.foot-brand .brand { color: #F4EFE4; margin-bottom: 14px; }
.foot-brand p { color: #9c9484; font-size: 0.92rem; max-width: 32ch; }
.foot-col h4 { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #837b6b; margin-bottom: 15px; font-weight: 600; }
.foot-col a { display: block; color: #C9C0AE; text-decoration: none; font-size: 0.92rem; margin-bottom: 11px; transition: color .2s; }
.foot-col a:hover { color: var(--red); }
.foot-bar { border-top: 1px solid #322c22; padding-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-family: var(--font-mono); font-size: 12px; color: #837b6b; }

/* staggered load */
.load { opacity: 0; transform: translateY(18px); animation: rise .8s var(--ease) forwards; }
.load.d1{animation-delay:.05s}.load.d2{animation-delay:.16s}.load.d3{animation-delay:.28s}.load.d4{animation-delay:.4s}.load.d5{animation-delay:.52s}
@keyframes rise { to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .reveal, .load { opacity: 1; transform: none; }
}