/* What the generated site needs on top of the prototype's own stylesheet (BUILD_STATE 11.643).

   prototype.css is lifted straight out of design/site-sections.html and carries the design language: the tokens,
   the serif headline, the fact strip, the sub navigation, the icons, the bands. It is not edited, so the port can
   be diffed against the mock.

   The prototype assembles its pages in the browser and writes some markup this site does not reproduce. What is
   here is only the few pieces it never had a stylesheet for: the hub cards as links, the rules block, and the
   footer. Same tokens throughout: no new colours, no new fonts. */

/* ---- the skip link, which belongs to the live site's stylesheet rather than the prototype's ---- */
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus {
  left: 8px; top: 8px; z-index: 40; padding: 10px 14px;
  background: var(--panel); color: var(--panel-fg); text-decoration: none;
}

/* ---- the header's right-hand side, on every page ----
   design/home.html and design/site-sections.html have different headers: the homepage's carries Sign in and a Set up
   for free button in a .right group, the sections' carries Sign in alone. The site uses the homepage's header on every
   page, but .site .right and .site .cta exist only in home.css, so on section pages the pair sat unstyled: jammed
   together, not pushed right, the button's text underlined. These two rules are home.css's own, copied exactly. */
/* Copying only those two was not enough (Gray, 21 September 2026: "YOU ARE BLIND"). Measured against the homepage, a
   section page's header was 64px not 66, its gaps 28px not 20, so the menu sat 8px right, and its button took
   prototype.css's large .cta (15px, 12px 18px padding, 46px tall) instead of the header's 14.5px, 10px 16px, 41px.
   So the header now carries home.css's own header rules, lines 77 and 85-91, exactly, scoped to header.site so they
   win on every page whichever prototype sheet is loaded. */
header.site > .in{display:flex; align-items:center; gap:20px; height:66px;}   /* > : the menu panels inside the header have an .in of their own */
header.site .right{margin-left:auto; display:flex; align-items:center; gap:16px; flex:none;}
header.site .sign{margin-left:0; font-size:14.5px; color:var(--ink-2); text-decoration:none; display:inline;}
header.site .cta{background:var(--pop); color:var(--pop-ink); font-weight:600; font-size:14.5px; line-height:1.5; padding:10px 16px; white-space:nowrap; text-decoration:none; display:inline-block;}
header.site .cta:hover{background:var(--pop-hover);}
@media (max-width:520px){ header.site .sign{display:none;} header.site .wordmark{font-size:1.12rem;} }
@media (max-width:420px){ header.site > .in{gap:12px;} header.site .cta{padding:9px 12px; font-size:13.5px;} }

/* ---- the sub navigation scrolls, it does not wrap ----
   The prototype's own rule, kept explicit here because a wrapped bar reads as a second menu. */
.subnav .in { flex-wrap: nowrap; }

/* ---- a call to action ----
   The prototype styles `.cta` but never `.actions`, because its own pages lay the button out inline. Without this
   the button is an unpositioned inline box that overlaps the line above it. */
.actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 24px; }
.actions .cta { display: inline-block; text-decoration: none; }
.actions small { color: var(--muted); font-size: 13px; }

/* Removed 21/09/2026: the first design's own blocks (notes list, "what we do" columns, the rules block, the onward
   band, the hub cards). The pages are the prototype's markup now and nothing used them, but three of them shared the
   prototype's class names: `.dd` made the prototype's "Straight answers" section a two-column grid and crushed its
   content to the left, and `.mdo` and `.rules h2`/`.notes h2`/`.tool h2` overrode its padding and headings. */

/* ---- signing in, and the tools ----
   These were shipped with no stylesheet at all, which is why the panel was raw HTML on the page: a heading jammed
   against the lede, a button, the word "or" and a label all sitting inline. Written in the prototype's idiom:
   same tokens, same sizes, no new colours. */

/* A label that belongs to a screen reader and not to the layout. */
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.gate, .gate-in { margin-top: 26px; max-width: 640px; }
.gate {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 22px 24px 24px;
}
.gate h3 { font-size: 16px; font-weight: 600; margin: 0 0 6px; }
.gate-why { margin: 0 0 18px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }

.gate-ways { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.gate-ways .cta { border: 0; cursor: pointer; font-family: inherit; }
.gate-ways .cta[disabled], .gate-ways .cta-sm[disabled] { opacity: .55; cursor: default; }
.gate-or { font-size: 13px; color: var(--muted); }

.gate-email { display: flex; gap: 8px; align-items: stretch; flex: 1 1 280px; min-width: 240px; }
.gate-email input {
  flex: 1 1 auto; min-width: 0;
  font: inherit; font-size: 14.5px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--ground);
  color: var(--ink);
}
.gate-email input:focus { outline: 2px solid var(--pop); outline-offset: -1px; background: var(--surface); }
.gate-email .cta-sm {
  border: 0; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600;
  padding: 10px 14px; background: var(--panel); color: var(--panel-fg); white-space: nowrap;
}
.gate-email .cta-sm:hover { background: var(--graphite); }

.gate-sent, .gate-problem, .gate-loading { margin: 14px 0 0; font-size: 13.5px; }
.gate-sent { color: var(--pos); }
.gate-problem { color: var(--attn); }
.gate-loading { color: var(--muted); }

.gate-who { margin: 0 0 16px; font-size: 13px; color: var(--muted); }
.linky {
  border: 0; background: none; padding: 0; margin-left: 8px;
  font: inherit; font-size: 13px; color: var(--ink-2); text-decoration: underline; cursor: pointer;
}

/* The tool itself. */
.tool-box { margin-top: 4px; }
.tool-form { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-end; margin: 0; }
.tool-form .field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.tool-form label { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tool-form select {
  font: inherit; font-size: 14.5px; padding: 9px 12px; min-width: 210px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
}
.tool-form select:focus { outline: 2px solid var(--pop); outline-offset: -1px; }
.tool-form .cta { border: 0; cursor: pointer; font-family: inherit; }
.tool-form .cta[disabled] { opacity: .55; cursor: default; }

.tool-answer {
  margin-top: 22px; padding: 18px 20px;
  background: var(--sunk); border: 1px solid var(--line);
}
.answer-big { margin: 0; display: flex; align-items: baseline; gap: 10px; }
.answer-big strong {
  font-family: var(--f-serif); font-weight: 500; font-size: clamp(30px, 4vw, 44px);
  letter-spacing: -.02em; line-height: 1;
}
.answer-unit { font-size: 14px; color: var(--muted); }
.answer-detail { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.answer-none { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.answer-kept { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); }
.tool-problem { margin: 14px 0 0; font-size: 13.5px; color: var(--attn); }
.tool-soon { margin: 0; font-size: 14.5px; color: var(--muted); }

/* Under a visitor's answer: set up for free to keep it (11.656). Same register as the prototype's small print. */
.keep-nudge { margin: 12px 0 0; font-size: 13.5px; color: var(--muted); }
.keep-nudge a { color: var(--ink); font-weight: 600; }

/* A checklist line's rule in full, one tap below its one-line version (11.658). */
.rule-full { margin-top: 4px; }
.rule-full summary { cursor: pointer; font-size: 12.5px; color: var(--ink-2); font-weight: 400; }
.rule-full p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); font-weight: 400; }