/*
 * The company site's stylesheet.
 *
 * Lifted out of index.html unchanged when the data protection notice was
 * added: two pages cannot share 580 lines of CSS by both containing them.
 * Served from this origin, so `style-src 'self'` already admits it.
 */
  :root {
    --navy-deep: #081d38;
    --navy: #0f2b4d;
    --green: #2ea44f;
    --green-bright: #46c35a;
    --green-soft: #e7f4ea;
    --danger: #b42318;
    --danger-soft: #fdecea;

    --ground: #ffffff;
    --ground-alt: #f4f7f6;
    --surface: #ffffff;
    --ink: #0c1a28;
    --ink-soft: #46596a;
    --ink-faint: #6c8090;
    --rule: #e2e9e7;
    --rule-strong: #cbd7d4;
    --on-dark: #eef4f2;
    --on-dark-soft: #9fb6c8;
    --shadow-lg: 0 24px 60px -20px rgb(8 29 56 / 0.30);
    --shadow-sm: 0 1px 2px rgb(12 26 40 / 0.05);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --ground: #07131f;
      --ground-alt: #0b1c2c;
      --surface: #0e2234;
      --ink: #e9f1ef;
      --ink-soft: #a6bbc6;
      --ink-faint: #7b929f;
      --rule: #1a3145;
      --rule-strong: #26445c;
      --green-soft: #10281a;
      --danger: #ff8a80;
      --danger-soft: #3a1714;
      --shadow-lg: 0 24px 60px -20px rgb(0 0 0 / 0.6);
      --shadow-sm: none;
    }
  }
  :root[data-theme="dark"] {
    --ground: #07131f;
    --ground-alt: #0b1c2c;
    --surface: #0e2234;
    --ink: #e9f1ef;
    --ink-soft: #a6bbc6;
    --ink-faint: #7b929f;
    --rule: #1a3145;
    --rule-strong: #26445c;
    --green-soft: #10281a;
    --danger: #ff8a80;
    --danger-soft: #3a1714;
    --shadow-lg: 0 24px 60px -20px rgb(0 0 0 / 0.6);
    --shadow-sm: none;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

  body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: "Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3 { font-family: Fraunces, ui-serif, Georgia, serif; margin: 0; text-wrap: balance; letter-spacing: -0.018em; font-weight: 600; }
  p { margin: 0; }
  a { color: inherit; }

  .wrap { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; }

  .eyebrow {
    font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
    font-weight: 700; margin: 0;
  }

  /* ---------------- Navigation ---------------- */
  .nav {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--navy-deep) 92%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgb(255 255 255 / 0.07);
  }
  .nav .wrap { display: flex; align-items: center; gap: 1.5rem; height: 68px; }
  .brand { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; margin-right: auto; }
  .brand img { width: 30px; height: auto; display: block; }
  .brand span {
    font-family: Fraunces, serif; font-weight: 700; font-size: 1.12rem;
    letter-spacing: 0.03em; color: #fff;
  }
  .nav-links { display: flex; gap: 1.75rem; }
  .nav-links a {
    text-decoration: none; color: var(--on-dark-soft); font-size: 0.95rem; font-weight: 500;
    transition: color 0.15s ease;
  }
  .nav-links a:hover { color: #fff; }

  /* On a narrow phone the bar ran 29px past the viewport: the wordmark, the
     theme toggle and a nowrap button do not fit in 375px at full size, and
     because everything in the row refuses to shrink the button was simply cut
     in half. Most nursery managers read this page on a phone, so a clipped call to
     action is the version most people were seeing.

     The brand is allowed to shrink first — the mark alone still reads as us —
     and the button gives up its padding before it gives up its words. */
  @media (max-width: 30rem) {
    .nav .wrap { gap: 0.75rem; padding-inline: 1rem; }
    .brand { min-width: 0; }
    .brand span { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; }
    .nav .btn { padding-inline: 0.9rem; font-size: 0.92rem; }
  }
  @media (max-width: 46rem) { .nav-links { display: none; } }

  .btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.72rem 1.35rem; border-radius: 8px;
    font-weight: 600; font-size: 0.97rem; text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    white-space: nowrap;
  }
  .btn-primary { background: var(--green); color: #fff; }
  .btn-primary:hover { background: var(--green-bright); transform: translateY(-1px); }
  .btn-outline { border: 1px solid rgb(255 255 255 / 0.28); color: var(--on-dark); }
  .btn-outline:hover { border-color: rgb(255 255 255 / 0.6); }
  .btn-lg { padding: 0.92rem 1.7rem; font-size: 1.02rem; }

  /* The header is dark navy in both themes, so the control is styled for dark
     chrome either way. */
  .theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex: 0 0 auto;
    border: 1px solid rgb(255 255 255 / 0.22); border-radius: 8px;
    background: transparent; color: var(--on-dark-soft); cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
  }
  .theme-toggle:hover { color: #fff; border-color: rgb(255 255 255 / 0.5); }
  .theme-toggle svg { width: 18px; height: 18px; }
  /* Before the script runs there is no state yet; the moon is the safe default
     because the page opens light unless the system says otherwise. */
  .theme-toggle .i-sun { display: none; }
  .theme-toggle[data-state="dark"] .i-sun { display: block; }
  .theme-toggle[data-state="dark"] .i-moon { display: none; }


  /* ---------------- Assistant ---------------- */
  /* Matched to `.field input` rather than left to the browser, which renders
     a select nothing like the text inputs sitting next to it. */
  .field select {
    font-family: inherit; font-size: 1rem; width: 100%;
    padding: 0.65rem 0.75rem; border-radius: 9px;
    border: 1px solid var(--rule-strong);
    background: var(--surface); color: var(--ink);
    appearance: none;
    /* The chevron, drawn rather than fetched: an external image would be one
       more request and one more thing the CSP has to admit. */
    background-image: linear-gradient(45deg, transparent 50%, var(--ink-faint) 50%),
                      linear-gradient(135deg, var(--ink-faint) 50%, transparent 50%);
    background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 2.25rem;
  }
  .field select:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
  /* Distinguishes the prompt from a real choice, so an unfilled required
     field does not read as though it has been answered. */
  .field select:has(option[value=""]:checked) { color: var(--ink-faint); }

  .assistant-open {
    position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 60;
    display: inline-flex; align-items: center; gap: 0.55rem;
    padding: 0.8rem 1.25rem; border: none; border-radius: 999px;
    background: var(--green); color: #fff; font-family: inherit;
    font-size: 0.95rem; font-weight: 600; cursor: pointer;
    box-shadow: 0 10px 30px -8px rgb(8 29 56 / 0.5);
  }
  .assistant-open:hover { background: var(--green-bright); }
  .assistant-open svg { width: 18px; height: 18px; }

  .assistant-panel {
    position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 61;
    width: min(23rem, calc(100vw - 2.5rem));
    height: min(32rem, calc(100dvh - 2.5rem));
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--rule-strong); border-radius: 16px;
    box-shadow: var(--shadow-lg);
  }
  .assistant-panel[hidden] { display: none; }
  .assistant-head {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 0.9rem 1rem; background: var(--navy-deep); color: #fff;
  }
  .assistant-head strong { font-family: Fraunces, serif; font-size: 1rem; font-weight: 700; }
  .assistant-head span { display: block; font-size: 0.72rem; color: var(--on-dark-soft); font-weight: 400; }
  .assistant-close {
    background: transparent; border: none; color: var(--on-dark-soft);
    cursor: pointer; padding: 0.25rem; line-height: 1; font-size: 1.15rem;
  }
  .assistant-close:hover { color: #fff; }

  .assistant-log {
    flex: 1; overflow-y: auto; padding: 1rem; display: flex;
    flex-direction: column; gap: 0.75rem; background: var(--ground-alt);
  }
  .msg { max-width: 88%; font-size: 0.92rem; line-height: 1.55; }
  .msg p { margin: 0; padding: 0.65rem 0.85rem; border-radius: 12px; }
  .msg-bot { align-self: flex-start; }
  .msg-bot p { background: var(--surface); border: 1px solid var(--rule); border-bottom-left-radius: 4px; }
  .msg-you { align-self: flex-end; }
  .msg-you p { background: var(--green); color: #fff; border-bottom-right-radius: 4px; }
  /* The handoff for anything the assistant cannot answer. A button rather
     than a quiet link: it is the whole point of the reply. */
  .msg-handoff { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.55rem; }
  .msg-cta {
    align-self: flex-start; text-decoration: none; cursor: pointer;
    border: none; font-family: inherit;
    padding: 0.5rem 0.85rem; border-radius: 8px;
    background: var(--green); color: #fff;
    font-size: 0.85rem; font-weight: 600;
  }
  .msg-cta:hover { background: var(--green-bright); }
  /* The address, in plain text, under the button. Somebody who would rather
     write their own email should not have to hunt for where to send it. */
  .msg-addr { font-size: 0.76rem; color: var(--ink-faint); word-break: break-all; }

  .assistant-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0 1rem 0.75rem; background: var(--ground-alt); }
  .chip-q {
    font-family: inherit; font-size: 0.78rem; padding: 0.35rem 0.7rem;
    border: 1px solid var(--rule-strong); border-radius: 999px;
    background: var(--surface); color: var(--ink-soft); cursor: pointer;
  }
  .chip-q:hover { border-color: var(--green); color: var(--green); }

  /* Always there, never loud. The reply-level button only appears when the
     assistant knows it failed, and it does not always know. */
  .assistant-ask {
    font-family: inherit; font-size: 0.76rem; cursor: pointer;
    background: none; border: none; color: var(--ink-faint);
    padding: 0 1rem 0.8rem; text-align: left;
  }
  .assistant-ask:hover { color: var(--green); }

  .assistant-form { display: flex; gap: 0.5rem; padding: 0.85rem 1rem; border-top: 1px solid var(--rule); }
  .assistant-form input {
    flex: 1; min-width: 0; font-family: inherit; font-size: 0.92rem;
    padding: 0.6rem 0.75rem; border-radius: 8px;
    border: 1px solid var(--rule-strong); background: var(--ground); color: var(--ink);
  }
  .assistant-form input:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
  .assistant-form button {
    font-family: inherit; font-weight: 600; font-size: 0.9rem; cursor: pointer;
    padding: 0.6rem 0.95rem; border: none; border-radius: 8px;
    background: var(--green); color: #fff;
  }

  /* ---------------- Hero ---------------- */
  .hero { background: var(--navy-deep); color: var(--on-dark); padding: 4.5rem 0 5.5rem; }
  .hero .wrap { display: grid; gap: 3.5rem; grid-template-columns: 1fr; align-items: center; }
  @media (min-width: 62rem) { .hero .wrap { grid-template-columns: 1.05fr 0.95fr; gap: 4rem; } }

  .hero .eyebrow { color: var(--green-bright); margin-bottom: 1.1rem; }
  .hero h1 { font-size: clamp(2.35rem, 5.4vw, 3.7rem); line-height: 1.06; color: #fff; }
  .hero .lead { margin-top: 1.4rem; font-size: 1.14rem; color: var(--on-dark-soft); max-width: 46ch; }
  .cta-note { margin-top: 1rem; font-size: 0.92rem; color: var(--on-dark-soft); max-width: 32rem; }

  .hero .cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.2rem; }

  /* The reader, drawn rather than screenshotted — no school's data on a public page. */
  .device {
    justify-self: center;
    width: min(19rem, 100%);
    border-radius: 30px;
    background: #060f1a;
    border: 1px solid rgb(255 255 255 / 0.13);
    box-shadow: var(--shadow-lg);
    padding: 0.7rem;
  }
  .device-screen {
    background: #0b1826; border-radius: 22px; overflow: hidden;
    display: flex; flex-direction: column;
  }
  .device-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.7rem 0.85rem; border-bottom: 1px solid rgb(255 255 255 / 0.07);
  }
  .device-bar .who { display: flex; align-items: center; gap: 0.45rem; }
  .device-bar .dot { width: 20px; height: 20px; border-radius: 6px; background: var(--green); }
  .device-bar .lbl { font-size: 0.66rem; color: #cfe0d6; font-weight: 600; letter-spacing: 0.02em; }
  .chip {
    font-size: 0.6rem; font-weight: 600; padding: 0.18rem 0.45rem; border-radius: 999px;
    background: rgb(214 158 46 / 0.16); color: #e7b35c;
  }
  .device-window {
    padding: 0.42rem 0.85rem; font-size: 0.62rem; color: #7fe0a1;
    background: rgb(46 164 79 / 0.1); text-align: center; letter-spacing: 0.04em;
  }
  .device-body { padding: 1.1rem 0.85rem 1.3rem; display: flex; flex-direction: column; gap: 0.75rem; }
  .verdict {
    background: rgb(46 164 79 / 0.14); border: 1px solid rgb(70 195 90 / 0.3);
    border-radius: 12px; padding: 1rem 0.85rem; text-align: center;
    display: flex; flex-direction: column; gap: 0.3rem;
  }
  .verdict .tick {
    width: 30px; height: 30px; border-radius: 999px; background: var(--green);
    color: #fff; display: grid; place-items: center; margin: 0 auto 0.2rem; font-size: 0.9rem;
  }
  .verdict .n { font-size: 0.86rem; font-weight: 700; color: #fff; }
  .verdict .t { font-size: 0.7rem; color: #9fd8b2; }
  .device-row {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 0.66rem; color: #7f95a6;
    padding: 0.42rem 0; border-top: 1px solid rgb(255 255 255 / 0.06);
  }
  .device-row b { color: #c8d8e2; font-weight: 600; }

  /* ---------------- Proof strip ---------------- */
  .proof { background: var(--navy); border-top: 1px solid rgb(255 255 255 / 0.07); }
  .proof .wrap {
    display: grid; gap: 1.25rem 2rem; padding-block: 1.6rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  }
  /* Stacked, not inline: on one line the longer pairs wrapped and the rest
     did not, so four equal facts read as four different shapes. */
  .proof div { display: flex; flex-direction: column; gap: 0.1rem; }
  .proof .k { color: var(--green-bright); font-weight: 700; font-size: 0.95rem; }
  .proof .v { color: var(--on-dark-soft); font-size: 0.9rem; }

  /* ---------------- The film ----------------
     Straddles the dark band and the page below it: the top half of the
     section is the proof strip's navy, so the frame sits across the seam. */
  .film {
    background: linear-gradient(to bottom, var(--navy) 0 52%, var(--ground) 52% 100%);
    padding: 1.2rem 0 0;
  }
  .film-eyebrow { color: var(--green-bright); text-align: center; margin-bottom: 1rem; }
  .film-frame {
    position: relative; margin: 0 auto; max-width: 60rem;
    padding: 7px; border-radius: 22px;
    background: var(--surface);
    box-shadow:
      0 0 0 1px rgb(255 255 255 / 0.10),
      0 0 60px -8px rgb(70 195 90 / 0.40),
      0 34px 70px -34px rgb(8 29 56 / 0.65);
  }
  .film-poster, .film-frame iframe {
    display: block; width: 100%; aspect-ratio: 16 / 9; height: auto;
    border: 0; border-radius: 16px; background: var(--navy-deep);
  }
  .film-poster { position: relative; overflow: hidden; }
  .film-poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .film-play {
    position: absolute; left: 50%; top: 50%; width: 88px; height: 88px;
    translate: -50% -50%; border-radius: 50%;
    display: grid; place-items: center; padding-left: 6px;
    background: var(--green); color: #fff;
    box-shadow: 0 0 0 10px rgb(46 164 79 / 0.22), 0 18px 34px -12px rgb(8 29 56 / 0.55);
    transition: transform .15s ease, background .15s ease;
  }
  .film-play svg { width: 38px; height: 38px; }
  .film-poster:hover .film-play { background: var(--green-bright); transform: scale(1.06); }
  .film-poster:focus-visible { outline: 3px solid var(--green-bright); outline-offset: 4px; }
  @media (max-width: 40rem) {
    .film-frame { padding: 4px; border-radius: 16px; }
    .film-poster, .film-frame iframe { border-radius: 12px; }
    .film-play { width: 68px; height: 68px; }
    .film-play svg { width: 30px; height: 30px; }
  }

  /* ---------------- Sections ---------------- */
  section { padding: 5rem 0; }
  section.alt { background: var(--ground-alt); border-block: 1px solid var(--rule); }

  .head { max-width: 42rem; margin-bottom: 3rem; }
  .head .eyebrow { color: var(--green); margin-bottom: 0.85rem; }
  .head h2 { font-size: clamp(1.8rem, 3.6vw, 2.45rem); line-height: 1.16; }
  .head p { margin-top: 1rem; color: var(--ink-soft); font-size: 1.06rem; }

  .grid { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
  @media (min-width: 58rem) { .grid.of-six { grid-template-columns: repeat(3, 1fr); } }

  .card {
    background: var(--surface); border: 1px solid var(--rule); border-radius: 12px;
    padding: 1.5rem; display: flex; flex-direction: column; gap: 0.55rem;
    box-shadow: var(--shadow-sm);
  }
  .card h3 { font-family: "Public Sans", sans-serif; font-size: 1.06rem; font-weight: 700; letter-spacing: 0; }
  .card p { color: var(--ink-soft); font-size: 0.97rem; }
  .card .mark {
    width: 26px; height: 26px; border: 4px solid var(--green);
    border-bottom: none; border-radius: 13px 13px 0 0; margin-bottom: 0.5rem;
  }

  .steps { display: grid; gap: 0; }
  .step {
    display: grid; grid-template-columns: 2.9rem 1fr; gap: 1.1rem;
    padding: 1.7rem 0; border-top: 1px solid var(--rule-strong); align-items: start;
  }
  .step:last-child { border-bottom: 1px solid var(--rule-strong); }
  .step .n { font-family: Fraunces, serif; font-size: 1.6rem; color: var(--green); line-height: 1; font-variant-numeric: tabular-nums; }
  .step h3 { font-family: "Public Sans", sans-serif; font-size: 1.12rem; font-weight: 700; letter-spacing: 0; }
  .step p { margin-top: 0.3rem; color: var(--ink-soft); max-width: 48rem; }

  .statements { display: grid; gap: 1.6rem 2.6rem; grid-template-columns: 1fr; }
  @media (min-width: 52rem) { .statements { grid-template-columns: 1fr 1fr; } }
  .statement { border-left: 3px solid var(--green); padding-left: 1.4rem; display: flex; flex-direction: column; gap: 0.6rem; }
  .statement .who { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--ink-faint); }
  .statement p { color: var(--ink-soft); }

  .trust { display: grid; gap: 1.5rem 2rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
  .trust dt { font-weight: 700; margin-bottom: 0.25rem; }
  .trust dd { margin: 0; color: var(--ink-soft); font-size: 0.96rem; }

  /* ---------------- Contact ---------------- */
  .contact-panel {
    background: var(--navy-deep); color: var(--on-dark); border-radius: 18px;
    padding: 3.2rem 2.4rem; display: grid; gap: 2.5rem; grid-template-columns: 1fr;
  }
  @media (min-width: 56rem) { .contact-panel { grid-template-columns: 1.1fr 0.9fr; gap: 3.5rem; padding: 3.5rem 3rem; } }
  .contact-panel h2 { color: #fff; font-size: clamp(1.75rem, 3.4vw, 2.3rem); }
  .contact-panel .eyebrow { color: var(--green-bright); margin-bottom: 0.9rem; }
  .contact-panel p { color: var(--on-dark-soft); margin-top: 1rem; }
  .ask { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
  .ask li { display: grid; grid-template-columns: 1.1rem 1fr; gap: 0.6rem; color: var(--on-dark); font-size: 0.98rem; }
  .ask .b { color: var(--green-bright); font-weight: 700; }
  .mailbox {
    margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid rgb(255 255 255 / 0.12);
    display: flex; flex-direction: column; gap: 0.8rem; align-items: flex-start;
  }
  .mailbox a.addr { color: var(--green-bright); text-decoration: none; font-weight: 600; word-break: break-all; }
  .mailbox a.addr:hover { text-decoration: underline; }

  /* ---------------- Enquiry form ---------------- */
  .enquiry { display: flex; flex-direction: column; gap: 0.85rem; }
  .field-row { display: grid; gap: 0.85rem; grid-template-columns: 1fr; }
  @media (min-width: 30rem) { .field-row { grid-template-columns: 1fr 1fr; } }
  .field { display: flex; flex-direction: column; gap: 0.3rem; }
  .field > span {
    font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase;
    font-weight: 600; color: var(--on-dark-soft);
  }
  .field > span b { color: var(--green-bright); font-weight: 600; }
  .field input, .field textarea {
    font-family: inherit; font-size: 0.95rem; color: #fff;
    padding: 0.62rem 0.8rem; border-radius: 8px; resize: vertical;
    background: rgb(255 255 255 / 0.06);
    border: 1px solid rgb(255 255 255 / 0.18);
  }
  .field input::placeholder, .field textarea::placeholder { color: rgb(255 255 255 / 0.35); }
  .field input:focus-visible, .field textarea:focus-visible {
    outline: 2px solid var(--green-bright); outline-offset: 1px; border-color: transparent;
  }
  /* Off-screen rather than display:none — some bots skip what is hidden. */
  .trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .enquiry button { align-self: flex-start; margin-top: 0.3rem; border: none; cursor: pointer; font-family: inherit; }
  .enquiry button:disabled { opacity: 0.6; cursor: default; }
  .enquiry-status { font-size: 0.9rem; margin-top: 0.2rem; }
  .enquiry-status[data-tone="good"] { color: var(--green-bright); }
  .enquiry-status[data-tone="bad"] { color: #ffb4ab; }

  .mailbox-or { font-size: 0.85rem; color: var(--on-dark-soft); }
  .mailbox a.addr { display: inline-flex; align-items: center; gap: 0.5rem; }
  .mailbox a.addr svg { width: 17px; height: 17px; flex: 0 0 auto; }

  /* ---------------- Social ---------------- */
  .channel-row { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 2.2rem; }
  .channel {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 8px;
    border: 1px solid rgb(255 255 255 / 0.14);
    color: var(--on-dark-soft); text-decoration: none;
  }
  .channel svg { width: 17px; height: 17px; }
  /* A channel with no URL yet stays on the page, dimmed and inert.
     Hiding it was the other option and it is worse for the thing the row is
     for: the footer of a young company should show the whole set it intends
     to be on, and an icon that vanishes and reappears as accounts open makes
     the row a different shape every month.
     Dimmed rather than drawn at full strength, because an icon that looks
     live and does not respond is a broken control — a visitor cannot tell
     "we are not on Telegram yet" from "this site is broken", and they click
     it either way. At this weight it reads as not-yet, and the title says so
     on hover. Paste a URL into channels.js and it lights up as a real link.
     The hover lift belongs to the anchors, so the live ones are the only
     icons that answer the pointer. */
  span.channel { cursor: default; opacity: 0.34; }
  span.channel:hover { color: var(--on-dark-soft); border-color: rgb(255 255 255 / 0.14); }
  .channel:hover { color: #fff; border-color: rgb(255 255 255 / 0.32); }
  a.channel:hover { border-color: var(--green); background: rgb(46 164 79 / 0.16); }

  .footer-mail { display: inline-flex; align-items: center; gap: 0.45rem; }
  .footer-mail svg { width: 16px; height: 16px; flex: 0 0 auto; }

  /* ---------------- Footer ---------------- */
  footer { background: var(--navy-deep); color: var(--on-dark-soft); padding: 3rem 0 3.5rem; }
  footer .wrap { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
  footer h4 { color: #fff; font-size: 0.78rem; letter-spacing: 0.13em; text-transform: uppercase; margin: 0 0 0.85rem; font-family: "Public Sans", sans-serif; font-weight: 700; }
  footer p, footer li { font-size: 0.92rem; }
  footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
  footer a { text-decoration: none; }
  footer a:hover { color: #fff; }
  .colophon {
    border-top: 1px solid rgb(255 255 255 / 0.1); margin-top: 2.5rem; padding-top: 1.5rem;
    font-size: 0.86rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between;
  }

  a:focus-visible, button:focus-visible { outline: 2px solid var(--green-bright); outline-offset: 3px; border-radius: 4px; }

  /* --- Pricing ----------------------------------------------------------
     Two tiers, the bands under them, and the arithmetic shown. Every
     comparable product here answers "how much" with "contact us", so the
     whole section is built to be read rather than to be asked about. */

  .tiers { display: grid; gap: 1.4rem; grid-template-columns: 1fr; align-items: start; }
  @media (min-width: 52rem) { .tiers { grid-template-columns: repeat(2, 1fr); } }

  .tier {
    background: var(--surface); border: 1px solid var(--rule); border-radius: 14px;
    padding: 1.85rem; display: flex; flex-direction: column; gap: 1rem;
    box-shadow: var(--shadow-sm);
  }
  .tier.featured { border-color: var(--green); box-shadow: var(--shadow-lg); position: relative; }
  .tier-tag {
    position: absolute; top: -0.72rem; left: 1.85rem;
    background: var(--green); color: #fff; font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    padding: 0.2rem 0.6rem; border-radius: 999px;
  }
  .tier h3 { font-size: 1.3rem; margin: 0; }
  .tier > p { margin: 0; color: var(--ink-soft); font-size: 0.97rem; }

  .tier-price { display: flex; align-items: baseline; gap: 0.45rem; flex-wrap: wrap; }
  .tier-price .amount {
    font-size: clamp(2.1rem, 5vw, 2.7rem); font-weight: 800; letter-spacing: -0.02em;
    line-height: 1;
  }
  .tier-price .unit { color: var(--ink-faint); font-size: 0.95rem; }

  .tier-features { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
  .tier-features li {
    position: relative; padding-left: 1.65rem; font-size: 0.95rem; color: var(--ink-soft);
    line-height: 1.5;
  }
  .tier-features li::before {
    content: ""; position: absolute; left: 0; top: 0.42em;
    width: 0.95rem; height: 0.52rem; border-left: 2px solid var(--green);
    border-bottom: 2px solid var(--green); transform: rotate(-45deg);
  }
  .tier-features li:first-child { font-weight: 650; color: var(--ink); }
  .tier .btn { margin-top: auto; text-align: center; justify-content: center; }

  .btn-quiet {
    border: 1px solid var(--rule-strong); color: var(--ink); background: var(--surface);
  }
  .btn-quiet:hover { border-color: var(--green); color: var(--green); }

  /* The calculator. It reads its numbers out of the page rather than
     carrying its own copy, so there is exactly one set of prices here. */
  .calc {
    margin-top: 2.5rem; background: var(--ground-alt); border: 1px solid var(--rule);
    border-radius: 14px; padding: 1.6rem;
    display: grid; gap: 1.3rem; align-items: center;
  }
  @media (min-width: 46rem) { .calc { grid-template-columns: auto 1fr; } }
  .calc-ask { display: flex; flex-direction: column; gap: 0.45rem; }
  .calc-ask label { font-weight: 650; font-size: 0.95rem; }
  .calc-ask input {
    width: 9rem; font: inherit; font-size: 1.15rem; font-weight: 700;
    padding: 0.6rem 0.75rem; border-radius: 10px;
    border: 1px solid var(--rule-strong); background: var(--surface); color: var(--ink);
  }
  .calc-ask input:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
  .calc-out { display: grid; gap: 0.9rem; grid-template-columns: 1fr; }
  @media (min-width: 34rem) { .calc-out { grid-template-columns: repeat(2, 1fr); } }
  .calc-line { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 0.9rem 1rem; }
  .calc-line .who { display: block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-faint); }
  .calc-line .sum { display: block; font-size: 1.4rem; font-weight: 800; margin-top: 0.15rem; letter-spacing: -0.01em; }
  .calc-line .per { display: block; font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.2rem; }
  .calc-note { grid-column: 1 / -1; margin: 0; font-size: 0.88rem; color: var(--ink-faint); }

  /* The tier comparison: one row per thing, a tick or a cross per tier.
     Ticks are green and crosses are red because the two colours are the
     verdict; the icons carry it too for anyone who cannot tell them apart. */
  .compare { margin-top: 2.5rem; overflow-x: auto; }
  .compare table { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 34rem; }
  .compare caption { text-align: left; font-weight: 750; font-size: 1.05rem; padding-bottom: 0.7rem; color: var(--ink); }
  .compare th, .compare td { padding: 0.7rem 0.6rem; border-bottom: 1px solid var(--rule); vertical-align: middle; }
  .compare thead th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-faint); font-weight: 600; text-align: center; }
  .compare tbody th { text-align: left; font-weight: 500; color: var(--ink); width: 58%; }
  .compare td { text-align: center; color: var(--ink-soft); }
  .compare tbody tr:nth-child(1) td { font-weight: 750; color: var(--ink); font-size: 1.05rem; }
  .compare .yes, .compare .no {
    display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 999px;
  }
  .compare .yes { background: var(--green-soft); color: var(--green); }
  .compare .no { background: rgb(220 60 60 / 0.12); color: #c9352f; }
  .compare .yes svg, .compare .no svg { width: 15px; height: 15px; }
  @media (prefers-color-scheme: dark) {
    .compare .yes { background: rgb(70 195 90 / 0.18); color: var(--green-bright); }
    .compare .no { background: rgb(220 60 60 / 0.2); color: #f08a84; }
  }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

  .bands { margin-top: 2.5rem; display: grid; gap: 1.4rem; }
  @media (min-width: 52rem) { .bands { grid-template-columns: 3fr 2fr; } }
  .bands table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
  .bands caption { text-align: left; font-weight: 650; padding-bottom: 0.6rem; }
  .bands th, .bands td { text-align: left; padding: 0.62rem 0.5rem; border-bottom: 1px solid var(--rule); }
  .bands th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-faint); font-weight: 600; }
  .bands td:last-child, .bands th:last-child { text-align: right; }
  .bands tr:last-child td { border-bottom: 0; }

  .excl { background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; padding: 1.5rem; }
  .excl h3 { margin: 0 0 0.35rem; font-size: 1.08rem; }
  .excl > p { margin: 0 0 0.9rem; color: var(--ink-soft); font-size: 0.93rem; }
  .excl ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
  .excl li { position: relative; padding-left: 1.45rem; font-size: 0.93rem; color: var(--ink-soft); }

  /* The questions a school asks before it buys. <details> rather than a
     scripted accordion: it opens with JavaScript off, it is keyboard
     operable without our help, and the browser's own find-in-page can
     reach inside a closed one. */
  .faq { margin-top: 2.5rem; display: grid; gap: 0.7rem; }
  @media (min-width: 58rem) { .faq { grid-template-columns: repeat(2, 1fr); align-items: start; } }
  .faq details {
    background: var(--surface); border: 1px solid var(--rule); border-radius: 12px;
    padding: 0.95rem 1.15rem;
  }
  .faq details[open] { border-color: var(--rule-strong); }
  .faq summary {
    cursor: pointer; font-weight: 650; font-size: 0.97rem; list-style: none;
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after {
    content: ""; flex: none; width: 0.55rem; height: 0.55rem;
    border-right: 2px solid var(--ink-faint); border-bottom: 2px solid var(--ink-faint);
    transform: rotate(45deg) translate(-0.1rem, -0.1rem); transition: transform 0.15s ease;
  }
  .faq details[open] summary::after { transform: rotate(-135deg) translate(-0.1rem, -0.1rem); }
  .faq summary:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }
  .faq p { margin: 0.7rem 0 0; color: var(--ink-soft); font-size: 0.93rem; line-height: 1.6; }

  .excl li::before {
    content: ""; position: absolute; left: 0.15rem; top: 0.62em;
    width: 0.72rem; height: 2px; background: var(--rule-strong);
  }


/* ---------------- Data protection page ---------------- */
/*
 * Its own small block rather than reusing the landing page's section rhythm:
 * this page is read rather than scanned, so it wants one narrow column and
 * generous leading, not the wide feature grid everything else here uses.
 */
.prose { max-width: 46rem; padding: 4.5rem 0 5rem; }
.prose h1 { font-family: "Fraunces", Georgia, serif; font-size: clamp(2rem, 4vw, 2.7rem); line-height: 1.15; margin: 0.4rem 0 1rem; }
.prose h2 { font-family: "Fraunces", Georgia, serif; font-size: 1.35rem; margin: 2.4rem 0 0.7rem; }
.prose p, .prose li { font-size: 1rem; line-height: 1.7; }
.prose ul { padding-left: 1.1rem; margin: 0.6rem 0 1rem; }
.prose li { margin-bottom: 0.5rem; }
.prose .lede { font-size: 1.12rem; line-height: 1.65; color: var(--ink-soft); }
.prose .eyebrow { color: var(--green); font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; font-size: 0.75rem; margin: 0; }
.prose .revised { margin-top: 2.5rem; font-size: 0.85rem; color: var(--ink-soft); }

.prose table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: 0.93rem; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--line); }
.prose th { font-weight: 700; }
/* The table is the widest thing here; let it scroll rather than the page. */
.prose table { display: block; overflow-x: auto; }

.registration { padding: 1.4rem 1.6rem; margin: 1.8rem 0 0.5rem; }
.registration h2 { margin-top: 0; font-size: 1.15rem; }
.registration dl { display: grid; grid-template-columns: 1fr; gap: 0.5rem; margin: 0.8rem 0 0; }
.registration dl > div { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.registration dt { min-width: 10rem; color: var(--ink-soft); font-size: 0.9rem; }
.registration dd { margin: 0; font-size: 0.95rem; }

  /* ---------------- Careers ----------------
     Three pages: the careers page, the role, and the application. Built from
     the same parts as the home page — hero, cards, steps, FAQ — so they read
     as the same company; what is new here is the job card and the form. */
  .nav-links a[aria-current="page"] { color: #fff; }
  .hero .hero-sub { margin-top: 1rem; color: #fff; font-weight: 600; font-size: 1.12rem; }
  .hero .lead + .lead { margin-top: 0.8rem; }
  .crumbs { font-size: 0.86rem; color: var(--on-dark-soft); margin: 0 0 1rem; }
  .crumbs a { color: var(--green-bright); text-decoration: none; }
  .crumbs a:hover { text-decoration: underline; }

  .now-hiring {
    justify-self: stretch; display: flex; flex-direction: column; gap: 0.55rem;
    padding: 1.6rem 1.7rem; border-radius: 18px; text-decoration: none; color: var(--on-dark);
    background: linear-gradient(160deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.02));
    border: 1px solid rgb(255 255 255 / 0.14); box-shadow: var(--shadow-lg);
    transition: border-color .15s ease, transform .15s ease;
  }
  .now-hiring:hover { border-color: var(--green-bright); transform: translateY(-2px); }
  .now-hiring-tag { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-bright); }
  .now-hiring-tag .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green-bright); box-shadow: 0 0 0 4px rgb(70 195 90 / 0.2); }
  .now-hiring strong { font-family: Fraunces, serif; font-size: 1.6rem; line-height: 1.15; color: #fff; }
  .now-hiring-meta { color: var(--on-dark-soft); font-size: 0.95rem; }
  .now-hiring ul { margin: 0.4rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.4rem; }
  .now-hiring li { padding-left: 1.4rem; position: relative; font-size: 0.95rem; }
  .now-hiring li::before { content: ""; position: absolute; left: 0.1rem; top: 0.42rem; width: 0.65rem; height: 0.35rem; border-left: 2px solid var(--green-bright); border-bottom: 2px solid var(--green-bright); transform: rotate(-45deg); }
  .now-hiring-go { margin-top: 0.6rem; font-weight: 700; color: var(--green-bright); }

  .careers-four { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
  .careers-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--green-soft); color: var(--green); margin-bottom: 0.9rem; }
  .careers-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

  .careers-opening { display: grid; gap: 1.4rem; }
  @media (min-width: 58rem) { .careers-opening { grid-template-columns: 1.25fr 0.75fr; } }
  .job-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 18px; padding: 1.8rem; box-shadow: var(--shadow-sm); }
  .job-card h3 { font-size: 1.55rem; }
  .job-card > p { color: var(--ink-soft); margin-top: 0.85rem; }
  .job-card .job-tag { display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); background: var(--green-soft); padding: 0.25rem 0.6rem; border-radius: 999px; margin: 0 0 0.8rem; }
  .job-card .job-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 1.2rem; margin-top: 0.5rem; color: var(--ink); font-weight: 600; font-size: 0.92rem; }
  .job-meta span + span::before { content: "·"; margin-right: 1.2rem; color: var(--ink-faint); }
  .tags { list-style: none; padding: 0; margin: 1.2rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .tags li { font-size: 0.85rem; padding: 0.35rem 0.75rem; border-radius: 999px; border: 1px solid var(--rule-strong); color: var(--ink-soft); }
  .job-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.5rem; }
  .job-actions .btn-quiet, .app-nav .btn-quiet, .app-done .btn-quiet { border: 1px solid var(--rule-strong); color: var(--ink); }

  .lcgb { background: var(--navy); color: var(--on-dark-soft); border-radius: 18px; padding: 1.8rem; }
  .lcgb-title { font-family: Fraunces, serif; font-size: 1.35rem; color: #fff; font-weight: 600; }
  .lcgb-lead { margin-top: 0.5rem; font-size: 0.95rem; }
  .lcgb dl { margin: 1.3rem 0 0; display: grid; gap: 1rem; }
  .lcgb dt { color: var(--green-bright); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; }
  .lcgb dd { margin: 0.2rem 0 0; font-size: 0.93rem; }

  .values { display: grid; gap: 1.6rem 2.4rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin: 0; }
  .values div { border-top: 2px solid var(--green); padding-top: 0.9rem; }
  .values dt { font-weight: 700; font-size: 1.06rem; }
  .values dd { margin: 0.35rem 0 0; color: var(--ink-soft); font-size: 0.97rem; }

  .careers-split { display: grid; gap: 3rem; }
  @media (min-width: 62rem) { .careers-split { grid-template-columns: 1fr 1fr; gap: 4rem; } }
  .careers-split .head { margin-bottom: 1.6rem; }
  .careers-small { margin-top: 1rem; font-size: 0.88rem; color: var(--ink-faint); }
  .careers-note { margin-top: 1.4rem; padding: 0.9rem 1.1rem; border-radius: 12px; background: var(--green-soft); color: var(--ink); font-size: 0.93rem; }
  .areas { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
  .areas li { padding: 0.9rem 1.1rem; border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); display: grid; gap: 0.15rem; }
  .areas strong { font-size: 1rem; }
  .areas span { color: var(--ink-soft); font-size: 0.93rem; }

  .cta-band { background: var(--navy-deep); color: var(--on-dark-soft); padding: 3.6rem 0; }
  .cta-band .wrap { display: flex; flex-wrap: wrap; gap: 1.6rem 3rem; align-items: center; justify-content: space-between; }
  .cta-band h2 { color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.3rem); }
  .cta-band p { margin-top: 0.5rem; max-width: 40rem; }
  .cta-pair { display: flex; flex-wrap: wrap; gap: 0.7rem; }

  /* The role */
  .hero-tags { list-style: none; padding: 0; margin: 1.4rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .hero-tags li { font-size: 0.85rem; padding: 0.35rem 0.8rem; border-radius: 999px; border: 1px solid rgb(255 255 255 / 0.22); color: var(--on-dark); }
  .hero.role-hero .wrap { grid-template-columns: 1fr; }
  .role-hero h1 { max-width: 18ch; }
  .role-hero .lead { max-width: 62ch; }
  .role-body { display: grid; gap: 2.5rem; }
  @media (min-width: 62rem) { .role-body { grid-template-columns: 1fr 20rem; gap: 4rem; align-items: start; } }
  .role-main > p { color: var(--ink-soft); margin-top: 0.8rem; max-width: 46rem; }
  .role-h { font-size: clamp(1.4rem, 2.6vw, 1.75rem); margin: 2.6rem 0 0.2rem; }
  .role-h:first-child { margin-top: 0; }
  .ticks { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.55rem; max-width: 46rem; }
  .ticks li { padding-left: 1.7rem; position: relative; color: var(--ink-soft); }
  .ticks li::before { content: ""; position: absolute; left: 0.15rem; top: 0.45rem; width: 0.7rem; height: 0.38rem; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg); }
  @media (min-width: 62rem) { .role-side { position: sticky; top: 88px; } }
  .role-facts { background: var(--surface); border: 1px solid var(--rule); border-radius: 18px; padding: 1.5rem; box-shadow: var(--shadow-sm); }
  .role-facts dl { margin: 0 0 1.2rem; display: grid; gap: 0.8rem; }
  .role-facts dt { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
  .role-facts dd { margin: 0.15rem 0 0; font-weight: 600; }
  .role-facts .btn { width: 100%; justify-content: center; }
  .role-facts > p { margin-top: 0.8rem; font-size: 0.85rem; color: var(--ink-faint); }

  .flow { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; counter-reset: flow; }
  .flow li { counter-increment: flow; display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1rem; border-radius: 12px; background: var(--surface); border: 1px solid var(--rule); font-weight: 600; font-size: 0.95rem; }
  .flow li::before { content: counter(flow); display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--green-soft); color: var(--green); font-size: 0.8rem; font-weight: 700; }
  .flow li:last-child { background: var(--green); border-color: var(--green); color: #fff; }
  .flow li:last-child::before { background: rgb(255 255 255 / 0.22); color: #fff; }
  .flow-compact li { padding: 0.55rem 0.9rem; }
  .notice { margin-top: 1.8rem; padding: 1.2rem 1.4rem; border-radius: 14px; border: 1px solid var(--rule-strong); background: var(--surface); max-width: 48rem; }
  .notice strong { display: block; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); }
  .notice ul { margin: 0.6rem 0 0; padding-left: 1.1rem; color: var(--ink-soft); display: grid; gap: 0.3rem; }
  .provide { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
  .before { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
  @media (min-width: 62rem) { .before { grid-template-columns: repeat(3, 1fr); } }
  .stages { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
  @media (min-width: 58rem) { .stages { grid-template-columns: repeat(4, 1fr); } }
  .stages li { padding: 1.1rem 1.2rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--rule); color: var(--ink-soft); font-size: 0.93rem; display: grid; gap: 0.25rem; }
  .stages span { font-family: Fraunces, serif; font-size: 1.35rem; color: var(--green); line-height: 1; }
  .stages strong { color: var(--ink); font-size: 1rem; }
  .head-gap { margin-top: 3.5rem; }

  /* The application */
  .apply { padding: 3rem 0 5rem; }
  .apply-intro { max-width: 46rem; }
  .apply-intro .crumbs { color: var(--ink-faint); }
  .apply-intro .crumbs a { color: var(--green); }
  .apply-intro h1 { font-size: clamp(2rem, 4.4vw, 2.8rem); line-height: 1.1; }
  .apply-intro > p { margin-top: 0.9rem; color: var(--ink-soft); }
  .apply-layout { display: grid; gap: 1.6rem; margin-top: 2.2rem; scroll-margin-top: 90px; }
  @media (min-width: 60rem) { .apply-layout { grid-template-columns: 15rem minmax(0, 1fr); gap: 2.6rem; align-items: start; } }

  .app-progress { list-style: none; padding: 0; margin: 0; counter-reset: step; display: grid; gap: 0.25rem; }
  .app-progress li { counter-increment: step; display: flex; align-items: center; gap: 0.65rem; padding: 0.5rem 0.6rem; border-radius: 10px; font-size: 0.92rem; color: var(--ink-faint); }
  .app-progress li::before { content: counter(step); display: grid; place-items: center; flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 1.5px solid var(--rule-strong); font-size: 0.8rem; font-weight: 700; }
  .app-progress li.done { color: var(--ink-soft); }
  .app-progress li.done::before { content: "✓"; background: var(--green-soft); border-color: var(--green); color: var(--green); }
  .app-progress li.now { color: var(--ink); font-weight: 700; background: var(--green-soft); }
  .app-progress li.now::before { background: var(--green); border-color: var(--green); color: #fff; }
  @media (min-width: 60rem) { .app-progress { position: sticky; top: 92px; } }
  /* On a phone the eight names would push the form a screen down; they
     become a bar of eight segments instead. */
  @media (max-width: 59.99rem) {
    .app-progress { grid-template-columns: repeat(8, 1fr); gap: 0.3rem; }
    .app-progress li { font-size: 0; padding: 0; height: 6px; border-radius: 3px; background: var(--rule-strong); }
    .app-progress li::before { display: none; }
    .app-progress li.done, .app-progress li.now { background: var(--green); }
  }

  .app-form { background: var(--surface); border: 1px solid var(--rule); border-radius: 18px; padding: 1.8rem; box-shadow: var(--shadow-sm); min-width: 0; }
  @media (max-width: 30rem) { .app-form { padding: 1.2rem; } }
  .app-step { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 1.2rem; }
  .app-step[hidden] { display: none; }
  .app-step legend { font-family: Fraunces, serif; font-size: 1.5rem; font-weight: 600; padding: 0; margin-bottom: 1.2rem; display: flex; align-items: center; gap: 0.7rem; }
  .app-n { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--green); color: #fff; font-family: "Public Sans", sans-serif; font-size: 0.9rem; font-weight: 700; }
  .app-grid { display: grid; gap: 1.1rem 1.2rem; }
  @media (min-width: 40rem) { .app-grid { grid-template-columns: 1fr 1fr; } .app-wide { grid-column: 1 / -1; } }
  .app-field { display: flex; flex-direction: column; gap: 0.4rem; margin: 0; min-width: 0; }
  .app-field[hidden] { display: none; }
  .app-field > span { font-size: 0.93rem; font-weight: 600; color: var(--ink); }
  .app-field > span b, .app-check b { color: var(--green); }
  .app-field > span small { font-weight: 400; color: var(--ink-faint); margin-left: 0.3rem; }
  .app-field input:not([type=radio]):not([type=checkbox]):not([type=file]), .app-field select, .app-field textarea {
    font: inherit; font-size: 1rem; width: 100%; padding: 0.7rem 0.85rem; border-radius: 10px;
    border: 1px solid var(--rule-strong); background: var(--ground); color: var(--ink);
  }
  .app-field textarea { resize: vertical; min-height: 5.5rem; line-height: 1.5; }
  .app-field input:focus-visible, .app-field select:focus-visible, .app-field textarea:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green); }
  .choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .choices label { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.95rem; border: 1px solid var(--rule-strong); border-radius: 999px; cursor: pointer; font-size: 0.95rem; background: var(--ground); }
  .choices label:has(input:checked) { border-color: var(--green); background: var(--green-soft); font-weight: 600; }
  .choices input { accent-color: var(--green); margin: 0; }
  .choices label:has(input:focus-visible) { outline: 2px solid var(--green); outline-offset: 2px; }
  .app-file { position: relative; display: block; }
  .app-file input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .app-file-box { display: flex; flex-direction: column; gap: 0.2rem; padding: 1.1rem 1.2rem; border: 2px dashed var(--rule-strong); border-radius: 12px; cursor: pointer; background: var(--ground); }
  .app-file-box strong { color: var(--green); overflow-wrap: anywhere; }
  .app-file-box small { color: var(--ink-faint); }
  .app-file:hover .app-file-box, .app-file input:focus-visible + .app-file-box { border-color: var(--green); }
  .app-check { display: flex; gap: 0.75rem; align-items: flex-start; padding: 1rem 1.1rem; border: 1px solid var(--rule-strong); border-radius: 12px; cursor: pointer; flex-wrap: wrap; }
  .app-check input { margin-top: 0.25rem; width: 1.1rem; height: 1.1rem; accent-color: var(--green); flex: none; }
  .app-check span { flex: 1; min-width: 0; font-size: 0.95rem; }
  .app-check .app-field-error { flex-basis: 100%; }
  .app-hint { color: var(--ink-soft); font-size: 0.95rem; }
  .app-hint a { color: var(--green); }
  .app-declare { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.5rem; color: var(--ink-soft); font-size: 0.94rem; }
  .app-signed { display: flex; flex-wrap: wrap; gap: 0.6rem 2.5rem; margin: 0; }
  .app-signed dt { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
  .app-signed dd { margin: 0.15rem 0 0; font-weight: 600; }
  .app-review { display: grid; gap: 1rem; }
  .app-review section { border: 1px solid var(--rule); border-radius: 12px; padding: 1rem 1.2rem; }
  .app-review-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
  .app-review h3 { font-family: "Public Sans", sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: 0; }
  .app-edit { font: inherit; font-size: 0.88rem; font-weight: 600; color: var(--green); background: none; border: 0; cursor: pointer; padding: 0.2rem 0.4rem; }
  .app-review dl { margin: 0.6rem 0 0; display: grid; gap: 0.15rem 1.2rem; }
  @media (min-width: 40rem) { .app-review dl { grid-template-columns: minmax(10rem, 0.8fr) 1.2fr; } }
  .app-review dt { color: var(--ink-faint); font-size: 0.88rem; }
  .app-review dd { margin: 0 0 0.5rem; font-size: 0.93rem; white-space: pre-wrap; overflow-wrap: anywhere; }

  .app-invalid input:not([type=radio]):not([type=checkbox]), .app-invalid select, .app-invalid textarea, .app-invalid .app-file-box { border-color: var(--danger) !important; }
  .app-check.app-invalid { border-color: var(--danger); }
  .app-field-error { margin: 0; color: var(--danger); font-size: 0.86rem; font-weight: 600; }
  .app-error { margin: 1.4rem 0 0; padding: 0.8rem 1rem; border-radius: 10px; background: var(--danger-soft); color: var(--danger); font-weight: 600; font-size: 0.93rem; }
  .app-error[hidden] { display: none; }
  .app-nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--rule); }
  .app-nav #app-next { margin-left: auto; }
  .app-nav .btn:disabled { opacity: 0.6; cursor: progress; }

  .app-done { max-width: 40rem; margin: 1rem auto 0; text-align: center; padding: 2.6rem 2rem; background: var(--surface); border: 1px solid var(--rule); border-radius: 20px; box-shadow: var(--shadow-sm); outline: none; }
  .app-done[hidden] { display: none; }
  .app-done h1 { font-size: clamp(1.7rem, 3.6vw, 2.2rem); margin-top: 1rem; }
  .app-done > p { margin-top: 0.8rem; color: var(--ink-soft); }
  .app-done-tick { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--green); }
  .app-done-tick svg { width: 32px; height: 32px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
  .app-ref { margin: 1.4rem auto 0; padding: 1.1rem 1.4rem; border-radius: 14px; background: var(--green-soft); display: grid; gap: 0.3rem; max-width: 24rem; }
  .app-ref span { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); }
  .app-ref strong { font-size: 1.6rem; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
  .app-ref small { color: var(--ink-soft); }
  .app-done .cta-pair { justify-content: center; margin-top: 1.6rem; }
  /* The same drawn chevron as the home page's form; without `appearance:
     none` Safari ignores the padding and draws a small native control. */
  .app-field select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--ink-faint) 50%),
                      linear-gradient(135deg, var(--ink-faint) 50%, transparent 50%);
    background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 2.25rem !important;
  }
  .app-field select:has(option[value=""]:checked) { color: var(--ink-faint); }
  /* `.btn` sets a display, which beats the hidden attribute. */
  .app-nav .btn[hidden] { display: none; }

  /* `hidden` always wins. Three elements on the careers pages set their own
     display and so stayed on screen when hidden; one rule here rather than a
     `[hidden]` override beside every component that sets a display. */
  [hidden] { display: none !important; }