/* NDCoach public site — shared by the landing page, the privacy notice and the terms.
   Extracted 2026-08-04 so the three pages cannot drift apart visually.
   Same rule as the pages themselves: no @import, no webfont, no third-party request. */

  /* ---- system ---------------------------------------------------------- */
  :root {
    --paper:      #faf7f1;
    --paper-deep: #f2ede3;
    --ink:        #1b1917;
    --ink-soft:   #4f4a42;
    --ink-faint:  #8b8378;
    --accent:     #2c5545;   /* one accent, used sparingly */
    --accent-soft:#e4ece7;
    --rule:       #ddd5c7;

    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    --mono:  ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

    --measure: 34rem;
    --step:    clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem);
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --paper:      #14130f;
      --paper-deep: #1c1a15;
      --ink:        #ece6da;
      --ink-soft:   #b3ab9c;
      --ink-faint:  #7d766a;
      --accent:     #8fc4ad;
      --accent-soft:#1e2a24;
      --rule:       #322e26;
    }
  }

  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--serif);
    font-size: var(--step);
    line-height: 1.65;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  /* subtle paper grain — atmosphere without motion or weight */
  body::before {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
    opacity: .5; mix-blend-mode: multiply;
    background-image: radial-gradient(circle at 1px 1px, rgba(120,105,85,.10) 1px, transparent 0);
    background-size: 4px 4px;
  }
  @media (prefers-color-scheme: dark) {
    body::before { mix-blend-mode: screen; opacity: .35;
      background-image: radial-gradient(circle at 1px 1px, rgba(255,240,210,.05) 1px, transparent 0); }
  }

  .wrap { position: relative; z-index: 1; max-width: var(--measure); margin: 0 auto; padding: 0 1.5rem; }

  /* ---- section numbering, editorial margin ------------------------------ */
  section { padding: 3.25rem 0; border-top: 1px solid var(--rule); }
  section:first-of-type { border-top: 0; }
  .num {
    font-family: var(--mono); font-size: .72rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ink-faint);
    display: block; margin-bottom: 1.1rem;
  }

  h1, h2 { font-weight: 400; line-height: 1.2; letter-spacing: -.015em; margin: 0 0 1rem; }
  h1 { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.1rem); }
  h2 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.75rem); }
  p  { margin: 0 0 1.15rem; }
  p:last-child { margin-bottom: 0; }
  strong { font-weight: 600; }
  a { color: var(--accent); text-underline-offset: .18em; text-decoration-thickness: 1px; }

  .lede { font-size: 1.2em; color: var(--ink-soft); }

  /* ---- hero -------------------------------------------------------------- */
  header { padding: 5rem 0 3.5rem; }
  .eyebrow {
    font-family: var(--mono); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--accent); margin: 0 0 1.75rem;
  }

  /* ---- the "what this is not" band — the one grid-breaking element ------- */
  .band {
    background: var(--paper-deep);
    border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
    padding: 3.25rem 0;
  }
  .band section { border-top: 0; padding: 0; }
  .plainlist { list-style: none; margin: 0; padding: 0; }
  .plainlist li {
    padding: .7rem 0 .7rem 1.6rem; position: relative;
    border-bottom: 1px solid var(--rule); color: var(--ink-soft);
  }
  .plainlist li:last-child { border-bottom: 0; }
  .plainlist li::before {
    content: "—"; position: absolute; left: 0; color: var(--ink-faint);
  }
  .plainlist b { color: var(--ink); font-weight: 600; }

  /* ---- steps ------------------------------------------------------------- */
  ol.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
  ol.steps li {
    counter-increment: s; position: relative; padding: 0 0 1.5rem 2.6rem;
  }
  ol.steps li::before {
    content: counter(s); position: absolute; left: 0; top: .05em;
    font-family: var(--mono); font-size: .78rem; color: var(--accent);
    border: 1px solid var(--rule); border-radius: 50%;
    width: 1.7rem; height: 1.7rem; display: grid; place-items: center;
  }

  /* ---- form -------------------------------------------------------------- */
  form { margin-top: 1.75rem; }
  .field { margin-bottom: 1.5rem; }
  label { display: block; margin-bottom: .4rem; font-size: .95rem; color: var(--ink-soft); }
  .hint { font-size: .85rem; color: var(--ink-faint); margin: .35rem 0 0; }
  input[type="email"], input[type="text"], textarea {
    width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
    background: var(--paper); border: 1px solid var(--rule); border-radius: 2px;
    padding: .7rem .8rem;
  }
  textarea { min-height: 5.5rem; resize: vertical; }
  input:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px;
  }
  .consent {
    display: grid; grid-template-columns: 1.4rem 1fr; gap: .75rem;
    background: var(--accent-soft); border: 1px solid var(--rule);
    padding: 1.1rem; border-radius: 2px;
  }
  .consent input { margin-top: .35rem; width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }
  .consent label { margin: 0; font-size: .95rem; color: var(--ink); line-height: 1.55; }
  button {
    font: inherit; font-size: 1rem; cursor: pointer;
    background: var(--accent); color: var(--paper);
    border: 0; border-radius: 2px; padding: .8rem 1.6rem;
  }
  @media (prefers-color-scheme: dark) { button { color: #10120f; } }
  button:hover { filter: brightness(1.08); }

  footer {
    border-top: 1px solid var(--rule); padding: 2.5rem 0 4rem;
    font-size: .9rem; color: var(--ink-faint);
  }
  footer a { color: var(--ink-soft); }

  /* ---- motion: one gentle reveal, and never for those who said no -------- */
  .rise { opacity: 0; transform: translateY(10px); animation: rise .7s ease forwards; }
  .rise:nth-child(1) { animation-delay: .05s } .rise:nth-child(2) { animation-delay: .16s }
  .rise:nth-child(3) { animation-delay: .27s } .rise:nth-child(4) { animation-delay: .38s }
  @keyframes rise { to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) {
    .rise { animation: none; opacity: 1; transform: none; }
    * { transition: none !important; }
  }

  /* ==== added 2026-08-05 for /register/ ====================================
     Shared tokens only. Everything the pane deck needs that is NOT shared lives
     in assets/deck.css, so the three original pages are untouched by any of it.
     Same rule as the extraction that created this file: one place, no drift. */
  :root {
    --paper-raise: #fffdf8;   /* lifted surface — the price note, the active rail chip */
    --rule-soft:   #e8e1d4;   /* a rule that separates without dividing */
    --on-accent:   #faf7f1;   /* text on an accent fill; NOT --paper, which flips in dark */
    --flag:        #8c3423;   /* the one caution mark. See §6 of design.md: at most one per view */

    /* Controls are set in a sans face and prose is not. A button that reads like the paragraph
       around it gives the eye nothing to catch, and this audience is the last one to make hunt
       for the interactive parts. */
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --leading:  1.65;
    --tracking: 0;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --paper-raise: #201d17;
      --rule-soft:   #262319;
      --on-accent:   #10120f;
      --flag:        #dd9280;   /* lightened to clear AA on the dark ground, same meaning */
    }
  }

  /* The reading preference. An accommodation, not a theme, and not a decoration: Atkinson
     Hyperlegible was drawn by the Braille Institute to maximise character distinction, and the
     fallbacks are the two most widely installed faces designed for screen legibility. Opening the
     leading and shortening the measure does as much work as the face change. Set by assets/deck.js
     and remembered; nothing on the page depends on it being on or off. */
  :root[data-reading="easy"] {
    --serif:    "Atkinson Hyperlegible", "Public Sans", Verdana, Tahoma, system-ui, sans-serif;
    --leading:  1.9;
    --tracking: .012em;
    --measure:  30rem;
  }
  :root[data-reading="easy"] body { line-height: var(--leading); letter-spacing: var(--tracking); }