/*
 * 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;

    --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;
      --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;
    --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. Nigerian schools 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; }

  /* ---------------- 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; }