/* Interlock — shared stylesheet
   Tokens first; components style through tokens only, never inside a media query. */

:root {
  /* Neutrals carry a slight green bias toward the accent — chosen, not inherited. */
  --paper:    #F6F7F5;
  --paper-2:  #FFFFFF;
  --ink:      #131A18;
  --ink-2:    #3E4A46;
  --ink-3:    #556360;
  --line:     #D9DEDB;
  --accent:   #1F6F5C;  /* verdigris — "secured" */
  --alert:    #8C2F39;  /* oxblood — used only in the trace visualisation */
  --btn-ink:  #FFFFFF;  /* text on an accent-filled button */
  --warn-bg:  #FBF3E7;
  --warn-line:#C99A45;
  --warn-ink: #6B4A12;

  --serif: "Iowan Old Style", "Charter", "Palatino Linotype", Palatino, Georgia, serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --f-xs:   0.75rem;
  --f-sm:   0.8125rem;
  --f-base: 1.0625rem;
  --f-lg:   1.1875rem;
  --f-xl:   1.5rem;
  --f-2xl:  2rem;
  /* Ceiling kept at 2.6rem so the hero headline breaks over two wide lines
     rather than three narrow ones. Raising it re-breaks the headline. */
  --f-3xl:  clamp(1.9rem, 1.15rem + 2.3vw, 2.6rem);

  --measure: 68ch;
  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3rem);
  --rule: 1px solid var(--line);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:    #0E1412;
    --paper-2:  #151D1A;
    --ink:      #E8EDEA;
    --ink-2:    #BAC5C0;
    --ink-3:    #9BA8A3;
    --line:     #26302D;
    --accent:   #4FB79A;
    --alert:    #D97078;
    --btn-ink:  #0E1412;
    --warn-bg:  #251D0F;
    --warn-line:#7A5C22;
    --warn-ink: #E2C88C;
  }
}

/* The viewer's toggle stamps data-theme on the root and must win in both directions. */
:root[data-theme="dark"] {
  --paper:#0E1412; --paper-2:#151D1A;
  --ink:#E8EDEA; --ink-2:#BAC5C0; --ink-3:#9BA8A3; --line:#26302D;
  --accent:#4FB79A; --alert:#D97078; --btn-ink:#0E1412;
  --warn-bg:#251D0F; --warn-line:#7A5C22; --warn-ink:#E2C88C;
}
:root[data-theme="light"] {
  --paper:#F6F7F5; --paper-2:#FFFFFF;
  --ink:#131A18; --ink-2:#3E4A46; --ink-3:#556360; --line:#D9DEDB;
  --accent:#1F6F5C; --alert:#8C2F39; --btn-ink:#FFFFFF;
  --warn-bg:#FBF3E7; --warn-line:#C99A45; --warn-ink:#6B4A12;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--f-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 600; text-wrap: balance; line-height: 1.15; margin: 0; }
h1 { font-size: var(--f-3xl); letter-spacing: -0.015em; }
h2 { font-size: var(--f-2xl); letter-spacing: -0.01em; }
h3 { font-size: var(--f-lg); font-family: var(--sans); font-weight: 600; letter-spacing: -0.005em; }

p { margin: 0; max-width: var(--measure); }
a { color: inherit; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.eyebrow {
  font-family: var(--mono);
  font-size: var(--f-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  margin: 0;
}

.shell { max-width: 1160px; margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Draft banner ---------- */


/* ---------- Header ---------- */

.masthead { border-bottom: var(--rule); position: sticky; top: 0; background: var(--paper); z-index: 10; }
.masthead__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-block: 1rem; }

.wordmark { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; font-family: var(--serif); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
.wordmark__glyph { width: 14px; height: 14px; border: 2px solid var(--accent); border-radius: 50%; position: relative; flex: none; }
.wordmark__glyph::after { content: ""; position: absolute; inset: 3px; background: var(--accent); border-radius: 50%; }

.nav { display: flex; gap: 1.6rem; align-items: center; font-size: var(--f-sm); }
.nav a { color: var(--ink-2); text-decoration: none; }
.nav a:hover { color: var(--ink); }
/* The link group participates in the nav's own flex layout; on narrow
   screens it is dropped entirely and only the CTA button remains. */
.nav__links { display: contents; }
@media (max-width: 860px) { .nav__links { display: none; } }

.btn {
  display: inline-block;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  padding: 0.55rem 1rem;
  border-radius: 3px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--btn-ink);
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { filter: brightness(1.08); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink-3); filter: none; }

/* ---------- Section rhythm ---------- */

.band { padding-block: clamp(3.5rem, 2rem + 5vw, 6.5rem); border-bottom: var(--rule); }
.band--fill { background: var(--paper-2); }

.stack { display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; }
.stack--sm { gap: 0.75rem; }
.stack--lg { gap: 2rem; }

/* Left rule: the page hangs off a single vertical line rather than centring. */
.hangs { border-left: 3px solid var(--accent); padding-left: clamp(1rem, 0.5rem + 1.5vw, 1.75rem); }

/* ---------- Hero ---------- */

.hero { padding-block: clamp(3.5rem, 2rem + 6vw, 7rem); }
/* Wide measure: the headline is meant to run across the page in two lines.
   25em exceeds the container at desktop, so the container governs and the
   sentence has room to break evenly rather than spilling to a third line. */
.hero h1 { max-width: 25em; text-wrap: balance; }
.hero__lede { font-size: var(--f-lg); color: var(--ink-2); max-width: 58ch; }
.hero__cta { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.5rem; }

/* The eyebrow holds one line wherever it fits. Below 800px it must wrap —
   71 tracked uppercase characters cannot fit a phone without the body
   scrolling sideways. */
@media (min-width: 800px) {
  .hero .eyebrow { white-space: nowrap; letter-spacing: 0.12em; }
}

/* ---------- Trace visualisation ---------- */

.trace { background: var(--paper-2); border-block: var(--rule); padding-block: 2.5rem; }

/* Light mode only: sit the diagram on a tinted sage panel — clearly deeper
   than the white it used to be, but still a light surface, so the dark text
   and verdigris nodes read as normal. Only --line is nudged darker so the
   connecting edges stay visible against the tint (the canvas reads its
   colours from inside .trace, so this reaches the drawing too). Node fill
   stays white, giving the boxes a raised-card feel. Dark mode is untouched. */
:root[data-theme="light"] .trace {
  --line: #B9C5BE;
  background: #DCE6DF;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .trace {
    --line: #B9C5BE;
    background: #DCE6DF;
  }
}
.trace__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 2rem; }
.trace__head h2 { font-size: var(--f-xl); max-width: 24ch; }
@media (max-width: 640px) { .trace__head { flex-direction: column; align-items: flex-start; gap: 1rem; } }
.trace__btn {
  font-family: var(--mono);
  font-size: var(--f-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-2);
  background: transparent;
  border: var(--rule);
  border-radius: 3px;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
  flex: none;
  min-width: 5.75rem;   /* Pause / Resume / Replay swap without shifting the row */
}
.trace__btn:hover { color: var(--accent); border-color: var(--accent); }

.trace__figure { margin: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.trace__frame { position: relative; }
/* Taller than the network needs: the bottom band is the return lane. */
.trace canvas { display: block; width: 100%; height: 340px; }

.trace__caption { display: flex; align-items: baseline; gap: 1rem; min-height: 2.6em; border-left: 2px solid var(--accent); padding-left: 1rem; }
.trace__stage {
  font-family: var(--mono);
  font-size: var(--f-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  flex: none;
  width: 11rem;   /* holds "Interlock Legal Setup" without reflowing the text beside it */
}
.trace__text { color: var(--ink-2); font-size: var(--f-sm); max-width: 62ch; }
@media (max-width: 640px) {
  .trace__caption { flex-direction: column; gap: 0.35rem; }
  .trace__stage { width: auto; }
}

.trace__key { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 1.5rem; font-family: var(--mono); font-size: var(--f-xs); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.1em; }
.trace__key span { display: flex; align-items: center; gap: 0.45rem; }
.trace__key .k-dot { width: 8px; height: 8px; display: inline-block; flex: none; border-radius: 50%; background: var(--alert); }
.trace__key .k-node { width: 10px; height: 10px; flex: none; border: 1px solid var(--ink-3); background: var(--paper-2); border-radius: 2px; }
.trace__key .k-hold { width: 10px; height: 10px; flex: none; background: var(--accent); border-radius: 2px; }
.trace__key .k-return { width: 18px; height: 8px; flex: none; border-bottom: 2px solid var(--accent); border-radius: 0 0 9px 9px; }

/* ---------- Prose + grids ---------- */

.lead { font-size: var(--f-lg); color: var(--ink-2); max-width: 60ch; }
/* Subtitle under a section heading: smaller than the h2, regular weight. */
.subhead { font-size: var(--f-lg); font-weight: 400; color: var(--ink-2); max-width: 40ch; }
/* Contact lines, footnotes: quiet small text. */
.smallprint { color: var(--ink-3); font-size: var(--f-sm); }
.prose { display: flex; flex-direction: column; gap: 1rem; }
.prose p { color: var(--ink-2); }

.grid { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 3rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* Numbered steps: the sequence is real — a report precedes a trace precedes a hold. */
.steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.step { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1.5rem; padding-block: 1.75rem; border-top: var(--rule); }
.step:last-child { border-bottom: var(--rule); }
.step__n { font-family: var(--mono); font-size: var(--f-sm); color: var(--accent); font-variant-numeric: tabular-nums; padding-top: 0.2rem; }
.step__body { display: flex; flex-direction: column; gap: 0.5rem; }
.step__body p { color: var(--ink-2); }
@media (max-width: 640px) { .step { grid-template-columns: 1fr; gap: 0.5rem; } }

.card { background: var(--paper-2); border: var(--rule); border-radius: 3px; padding: 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; }
.card p { color: var(--ink-2); font-size: var(--f-sm); }
.card--flat { background: transparent; border: 0; border-top: 2px solid var(--line); border-radius: 0; padding: 1.25rem 0 0; }

/* Placeholder token: every unsubstantiated figure is visibly marked. */
.ph {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--warn-bg);
  color: var(--warn-ink);
  border: 1px dashed var(--warn-line);
  border-radius: 2px;
  padding: 0.05em 0.35em;
  white-space: nowrap;
}

table { width: 100%; border-collapse: collapse; font-size: var(--f-sm); }
.table-wrap { overflow-x: auto; }
th, td { text-align: left; padding: 0.85rem 1rem 0.85rem 0; border-bottom: var(--rule); vertical-align: top; }
th { font-family: var(--mono); font-size: var(--f-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); font-weight: 400; }
td { color: var(--ink-2); }
td:first-child { color: var(--ink); font-weight: 500; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.doclist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.doclist li { border-top: var(--rule); }
.doclist li:last-child { border-bottom: var(--rule); }
.doclist a { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1.1rem 0; text-decoration: none; }
.doclist a:hover .doclist__name { color: var(--accent); }
.doclist__name { font-weight: 500; }
.doclist__meta { font-family: var(--mono); font-size: var(--f-xs); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.1em; text-align: right; flex: none; }

/* ---------- Footer ---------- */

.footer { padding-block: 3rem; font-size: var(--f-sm); color: var(--ink-3); }
/* The link groups spread across the full shell width rather than
   stacking on the left; the fine print below runs the full width too. */
.footer__grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem 4rem; }
.footer h4 { font-family: var(--mono); font-size: var(--f-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); font-weight: 400; margin: 0 0 0.75rem; }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.footer a { color: var(--ink-2); text-decoration: none; }
.footer a:hover { color: var(--accent); }
.footer__fine { margin-top: 2.5rem; padding-top: 1.5rem; border-top: var(--rule); }
.footer__fine p { max-width: none; }
.footer__fine p { color: var(--ink-3); font-size: var(--f-sm); }
/* Legal pages: the fine print stands alone, with no link grid above it. */
.footer__fine--bare { margin-top: 0; border-top: 0; }

/* ---------- Legal document pages ---------- */

.doc { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.doc__head { display: flex; flex-direction: column; gap: 0.75rem; padding-bottom: 2rem; border-bottom: var(--rule); }
.doc__head h1 { font-size: var(--f-2xl); }
.doc__meta { font-family: var(--mono); font-size: var(--f-xs); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.1em; }
.doc__body { max-width: var(--measure); display: flex; flex-direction: column; gap: 2rem; padding-top: 2rem; }
.doc__body section { display: flex; flex-direction: column; gap: 0.85rem; }
.doc__body h2 { font-size: var(--f-xl); }
.doc__body p, .doc__body li { color: var(--ink-2); }
.doc__body ul, .doc__body ol { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }

.callout {
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-radius: 3px;
  color: var(--warn-ink);
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: none;
}
.callout p { color: inherit; max-width: none; font-size: var(--f-sm); }
.callout strong { font-weight: 600; }
.callout__tag { font-family: var(--mono); font-size: var(--f-xs); text-transform: uppercase; letter-spacing: 0.12em; }

/* Floating light/dark toggle, injected by theme.js. Styled through tokens so
   it recolours with the theme it controls. */
.theme-toggle {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  font-family: var(--mono);
  font-size: var(--f-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.5rem 0.8rem;
  border-radius: 6px;
  border: var(--rule);
  background: var(--paper-2);
  color: var(--ink-2);
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.14);
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }

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

/* Consent banner (analytics.js). Fixed above the theme toggle; appears
   only when a marketing pixel is configured and no choice is stored. */
.consent {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 64px;
  z-index: 60;
  max-width: 34rem;
  margin: 0 auto;
  padding: 1rem 1.2rem;
  border: var(--rule);
  border-radius: 8px;
  background: var(--paper-2);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.consent__text { margin: 0 0 0.8rem; font-size: var(--f-sm); color: var(--ink-2); }
.consent__text a { color: var(--accent); }
.consent__row { display: flex; gap: 0.6rem; justify-content: flex-end; }
.consent__btn {
  font-family: var(--mono);
  font-size: var(--f-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.5rem 0.9rem;
  border-radius: 6px;
  border: var(--rule);
  background: var(--paper-2);
  color: var(--ink-2);
  cursor: pointer;
}
.consent__btn--accept { background: var(--accent); border-color: var(--accent); color: var(--btn-ink); }