/* The /signup page, extracted from its own <style> block.
 *
 * This page arrived after the extraction that moved privacy, terms, team, the
 * tools, the insights guides, the flows and the predictor out of inline style,
 * so it was the one marketing page still carrying its CSS in the document. The
 * per-family ceiling in test/chrome.test.js measures inline bytes, and the
 * marketing family read 77,287 against a ceiling of 67,833 once this page
 * joined it. That ceiling asks for the number to be brought down by extraction
 * rather than raised to fit, so this is that rather than a larger number.
 *
 * Linked where the inline block sat, after drawn-controls.css and
 * drawn-lettering.css, so the cascade order the page was built against is
 * unchanged.
 */

  /* Page-local. assets/chrome.css is still a stub, so the nav and the flow are
     styled here, built from the canonical tokens rather than fresh hex. The
     component shapes are lifted from tools/_shared/flow.css and join/index.html
     so this page is the same system, not a lookalike. */
  * { box-sizing: border-box; }
  [hidden] { display: none !important; }

  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  /* --- Nav, matching tools/index.html ------------------------------------- */
  #mainNav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid var(--paper-edge);
  }
  @media (min-width: 768px) { #mainNav { padding: 1.1rem 2.5rem; } }
  .nav-lockup { display: flex; align-items: baseline; gap: .7rem; text-decoration: none; }
  .nav-wordmark { height: 26px; width: auto; display: block; transform: translateY(2px); }
  .nav-tagline {
    font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em;
    text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; display: none;
  }
  @media (min-width: 768px) {
    .nav-tagline { display: inline; }
    .nav-wordmark { height: 30px; }
  }
  .nav-links { display: flex; align-items: center; gap: 1rem; }
  @media (min-width: 768px) { .nav-links { gap: 1.6rem; } }
  .nav-links a {
    font-size: .88rem; font-weight: 500; color: var(--ink-muted);
    text-decoration: none; transition: color .15s;
  }
  .nav-links a:hover { color: var(--ink); }
  .nav-fun, .nav-team { display: none; }
  @media (min-width: 600px) { .nav-fun, .nav-team { display: inline; } }

  /* --- Column ------------------------------------------------------------- */
  main { max-width: 34rem; margin: 0 auto; padding: 2.5rem 1.5rem 5rem; }
  @media (min-width: 700px) { main { padding-top: 3.5rem; } }

  .eyebrow {
    font-family: var(--font-mono); font-size: .7rem; letter-spacing: .17em;
    text-transform: uppercase; color: var(--ink-muted); margin: 0 0 .9rem;
  }

  /* Newsreader is pinned to 600 on purpose: the UA bold default resolves to
     700, which the first-paint weight test forbids across the in-scope set. */
  h1 {
    font-family: var(--font-display); font-size: clamp(1.9rem, 5vw, 2.7rem);
    font-weight: 600; line-height: 1.12; letter-spacing: -.02em;
    margin: 0 0 1rem; text-wrap: balance;
  }
  /* Every screen is headed by an h1, because each one is the whole page as far
     as a screen reader is concerned and the previous heading has been removed
     from the document. The question screens keep the smaller size the old h2
     carried, so nothing about the page LOOKS different for the change. */
  h1.q {
    font-size: clamp(1.5rem, 4.6vw, 2.05rem);
    line-height: 1.2; letter-spacing: -.01em; margin: 0 0 .6rem;
  }
  /* Focused programmatically on every screen change, and a visible ring there
     would read as an error rather than as an arrival. */
  h1:focus { outline: none; }
  h1:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
  .sub { color: var(--ink-muted); font-size: .97rem; margin: 0 0 2.25rem; max-width: 34ch; }
  .lede { color: var(--ink-muted); font-size: 1.02rem; margin: 0 0 2rem; max-width: 38ch; }

  /* --- Progress, from flow.css -------------------------------------------- */
  .progress { display: flex; gap: .4rem; margin: 0 0 2.75rem; }
  .seg { flex: 1; height: 6px; background: var(--paper-3); border-radius: 99px; overflow: hidden; }
  .seg span { display: block; height: 100%; width: 0; background: var(--orange); border-radius: 99px; transition: width .45s var(--ease-ink); }
  .seg.done span { width: 100%; }
  .seg.now span { width: 100%; background: var(--orange-soft); }
  /* Deliberately quiet, in the same mono label vocabulary as .rk, because going
     back is a repair and should never compete with the question being asked. */
  .back {
    display: inline-flex; align-items: center; gap: .4rem;
    /* 44px of touch target for a control whose whole purpose is repairing a
       misclick on a phone, with the margin pulled up so the extra height is
       felt by a thumb without moving where the label sits. */
    min-height: 44px; margin: -.7rem 0 .55rem;
    background: none; border: 0; padding: 0; cursor: pointer;
    font-family: var(--font-mono); font-size: .7rem; letter-spacing: .15em;
    text-transform: uppercase; color: var(--ink-muted); font-weight: 600;
  }
  .back:hover { color: var(--ink); }
  .back:focus-visible { outline: 2px solid var(--orange-deep); outline-offset: 3px; border-radius: 3px; }

  /* --- Options. flow.css cards, listed rather than tiled because these carry
         sentences instead of the short figures the calculators ask for. ------ */
  .opts { display: grid; gap: .7rem; margin: 0 0 1.75rem; }
  .opt {
    position: relative; display: flex; flex-direction: column;
    align-items: flex-start; justify-content: center; gap: .25rem; text-align: left;
    background: var(--paper-card); border: 1px solid transparent; border-radius: 12px;
    padding: 1rem 2.6rem 1rem 1.15rem;
    font: inherit; font-size: 1rem; font-weight: 600; line-height: 1.3; color: var(--ink);
    cursor: pointer;
    transition: border-color .22s var(--ease-ink), background .22s var(--ease-ink),
                transform .22s var(--ease-ink), box-shadow .22s var(--ease-ink);
  }
  .opt:hover:not(:disabled) { border-color: var(--orange); transform: translateY(-4px); box-shadow: 0 8px 24px rgba(223, 89, 17, .15); }
  .opt:active:not(:disabled) { transform: translateY(0); box-shadow: none; }
  .opt:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
  .opt .mark { position: absolute; top: 50%; right: .9rem; margin-top: -10px; display: none; width: 20px; height: 20px; }
  .opt .mark svg { width: 100%; height: 100%; display: block; }
  .opt.picked { border-color: var(--orange); background: var(--orange-pale); }
  .opt.picked .mark { display: block; color: var(--orange-deep); }

  /* --- Reveal, from flow.css ---------------------------------------------- */
  .reveal {
    border-left: 3px solid var(--orange); border-radius: 0 10px 10px 0;
    background: var(--paper-2); padding: 1.3rem 1.4rem; margin: 0 0 1.75rem;
    animation: rise .3s both;
  }
  .reveal .rk {
    font-family: var(--font-mono); font-size: .7rem; letter-spacing: .15em;
    text-transform: uppercase; color: var(--ink-muted); font-weight: 600; margin: 0 0 .5rem;
  }
  .reveal p:last-child { margin: 0; color: var(--ink-2); font-size: .95rem; line-height: 1.6; }

  /* --- Fields, from join/index.html ---------------------------------------- */
  .field { margin-bottom: 22px; }
  .field-label {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .15em;
    text-transform: uppercase; color: var(--ink-muted); display: block;
    margin: 0 0 9px; font-weight: 600;
  }
  /* Lighter than the label it sits in, so the field reads as optional at a
     glance without the word competing with the question itself.
     NOT .opt: that name is already taken on this page by the answer buttons in
     the quiz, which are display:flex with their own padding and ground, so a
     span wearing it painted as a full-width empty box directly above the real
     textarea and read as a second input nobody could type in. */
  .field-label .field-opt { color: var(--ink-faded); font-weight: 400; letter-spacing: .1em; }
  input[type=text], input[type=email], textarea {
    width: 100%; font-family: var(--font-sans); font-size: .95rem; color: var(--ink);
    background: var(--surface); border: 1px solid var(--rule-cream); border-radius: 9px;
    padding: 12px 13px; outline: none; transition: border-color .15s, box-shadow .15s;
  }
  /* Resizing vertically is allowed because the box invites more than one line;
     horizontal resize is not, because it would break out of the column. */
  textarea { display: block; min-height: 96px; resize: vertical; line-height: 1.55; }
  input::placeholder, textarea::placeholder { color: var(--ink-faded); }
  input:focus, textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-wash); }
  .err { color: var(--orange-deep); font-size: .88rem; font-weight: 600; margin: 10px 0 0; }
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* --- Confirmation, from join/index.html ---------------------------------- */
  .check-ring {
    width: 78px; height: 78px; margin: 0 0 24px; border-radius: 50%;
    background: rgba(74, 107, 62, .12); display: flex; align-items: center;
    justify-content: center; color: var(--status-ok);
  }
  .check-ring svg { width: 34px; height: 34px; }
  .next {
    background: var(--surface); border: 1px solid var(--rule-cream); border-radius: 12px;
    padding: 18px 20px; margin: 26px 0 0; text-align: left;
  }
  .next .nl {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ink-muted); margin: 0 0 7px; font-weight: 600;
  }
  .next p { margin: 0 0 14px; font-size: .95rem; color: var(--ink-2); line-height: 1.6; }
  .next p:last-child { margin-bottom: 0; }

  .foot { font-size: .85rem; color: var(--ink-muted); margin: 1.4rem 0 0; max-width: 42ch; line-height: 1.6; }
  .foot a { color: var(--orange-deep); }
  .cta-row { margin-top: 1.6rem; }

  /* --- The way in for anyone who would rather talk ------------------------- */
  /* The questions are the route the page is built around, so this is ruled off
     below them and set in the same quiet mono vocabulary as .rk and
     .field-label. It reads as an aside rather than a second front door, which
     is the whole point of putting it under the reassurance about there being no
     account to create rather than beside the Start button. */
  .alt { margin: 2.4rem 0 0; padding: 1.5rem 0 0; border-top: 1px solid var(--rule-soft); }
  .alt h2 {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .15em;
    text-transform: uppercase; color: var(--ink-muted); font-weight: 600; margin: 0 0 .7rem;
  }
  .alt p { font-size: .9rem; color: var(--ink-2); line-height: 1.6; margin: 0; max-width: 42ch; }
  /* The call is offered as a sentence rather than as a second drawn button.
     Lowering the second button's ink was tried first and did not work, because
     the wider control still carried the greater visual mass, so the page showed
     two orange buttons above a heading that promises no call at all. BRAND.md
     principle 2 allows one primary call to action per page, which makes Start
     the only button on this screen and leaves the call as a way out for anyone
     who wants one. */
  .alt a { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }

  /* --- Footer, matching tools/index.html ----------------------------------- */
  footer {
    max-width: 42rem; margin: 3.5rem auto 0; padding: 2rem 1.5rem 3rem;
    border-top: 1px solid var(--rule-soft); color: var(--ink-muted); font-size: .9rem;
  }
  .footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; }
  .footer-wordmark { height: 22px; width: auto; display: block; }
  .footer-links { display: flex; flex-wrap: wrap; gap: 1.1rem; }
  .footer-links a { color: var(--ink-muted); text-decoration: none; }
  .footer-links a:hover { color: var(--orange); }
  .footer-copy { font-size: .82rem; line-height: 1.6; margin: 1.1rem 0 0; max-width: 70ch; }
  /* --orange-deep, not --orange, for the same 3.12:1 AA failure on paper. */
  .footer-copy a { color: var(--orange-deep); }

  /* The data controller notice used to sit inside a second <footer> on this
     page, which stacked a duplicate wordmark and a duplicate link row directly
     above the injected site footer. The notice is specific to this form and has
     to stay, so it keeps the footer's measure and rule while the element that
     wrapped it goes, leaving the page with the one footer every other page has. */
  .signup-legal {
    max-width: 42rem; margin: 3.5rem auto 0; padding: 2rem 1.5rem 0;
    border-top: 1px solid var(--rule-soft); color: var(--ink-muted); font-size: .9rem;
  }
  .signup-legal .footer-copy { margin: 0; }
  .signup-legal .footer-links { margin: 1.1rem 0 0; }

  .screen { animation: rise .35s var(--ease-ink) both; }
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

  @media (prefers-reduced-motion: reduce) {
    .screen, .reveal { animation: none; }
    .seg span, .opt { transition: none; }
    .opt:hover:not(:disabled) { transform: none; }
  }