/* ============================================================================
   MOONSHOT - registration page.

   Same brand green, same three type families, same radii, easing and button
   shapes as the landing page. This sheet's default ground is white because a
   form is read, not admired, and a dark form punishes anyone filling one in
   outdoors on a phone - so light is what you get when no preference is known
   and the visitor's system has not asked for otherwise.

   The dark palette is in section 1b. Both pages share one stored preference
   (js/theme.js), so a visitor who chose dark on the landing page arrives here
   in dark and the form does not flash white at them mid-journey.

   Mobile-first throughout: the base rules are the phone layout and every
   media query only ever adds to it. Most registrations arrive on a phone.
   ============================================================================ */

/* ---------- 1. TOKENS ---------- */
:root {
  color-scheme: light;
  /* brand - identical values to css/styles.css, sampled from the logo */
  --cn-teal:  #21C58C;
  --cn-green: #35DE7A;
  --cn-lime:  #5CF84A;

  /* green dark enough to read as text on white - the display greens above are
     for fills and glows only, they fail contrast at body size */
  --brand-ink: #07714A;
  --brand-ink-2: #0A5C3E;

  /* paper. --paper-soft is both the page ground and the fill inside every
     input, so it does double duty: dropped from #F2FAF6 to give the white
     form panel something to sit on, and to make an empty field read as a
     recess in that panel rather than as more panel. */
  --paper:      #FFFFFF;
  --paper-soft: #EDF5F0;
  --paper-tint: #E4F3EB;

  /* text on a brand-green fill. Dark in BOTH themes - the fill under it is the
     same bright green either way, so the ink on it does not move. */
  --paper-deep: #04140C;

  /* frosted panels that sit over the background washes */
  --glass:        rgba(255, 255, 255, 0.72);
  /* Near-opaque, not translucent. The launch streak behind the rail showed
     straight through a 0.82 card and read as a scratch across the text; at
     0.94 the card is a card and the beam passes behind it. */
  --glass-strong: rgba(255, 255, 255, 0.94);

  --line:        #D4E7DC;
  --line-strong: #AEDAC3;
  --line-focus:  rgba(33, 197, 140, 0.35);

  /* the faint graph paper behind everything - a fine cell and a heavier block,
     so the surface reads as engineering paper rather than as one flat mesh */
  --grid-ink: rgba(11, 26, 19, 0.055);
  --grid-ink-2: rgba(11, 26, 19, 0.085);
  --wash-a: rgba(53, 222, 122, 0.20);
  --wash-a2: rgba(33, 197, 140, 0.10);
  --wash-b: rgba(92, 248, 74, 0.14);

  /* the launch streak that crosses the page behind the rail */
  --beam-mid:  rgba(33, 197, 140, 0.22);
  --beam-end:  rgba(53, 222, 122, 0.85);
  --beam-halo: rgba(53, 222, 122, 0.16);

  /* the tinted plate an icon sits on: a rail fact, a perk, a chosen tile */
  --chip-bg:   rgba(33, 197, 140, 0.10);
  --chip-line: rgba(33, 197, 140, 0.20);

  /* ink */
  --ink:       #0A1912;
  --ink-dim:   #45604F;
  /* was #7B948A - 3.4:1 on the panel, and it is the colour every placeholder
     and help line under a field is set in. Those have to be readable. */
  --ink-muted: #5F7C6E;

  --danger:      #B3261E;
  --danger-soft: #FDF1F0;
  --danger-line: #F3C9C5;

  --warn-bg:   #FFF8EC;
  --warn-line: #F0DFC0;
  --warn-ink:  #7A5A20;

  --grad-brand: linear-gradient(115deg, #21C58C 0%, #35DE7A 46%, #5CF84A 100%);

  /* The BUTTON gradient, and the reason it is not --grad-brand.
     --grad-brand runs 115deg across three hues. On the landing page it paints
     small pills and the sweep reads as a sheen. Here the same gradient paints a
     button the full width of the form, where teal-to-lime over 600px stops
     being a sheen and becomes a horizontal wash - the button looks like a
     progress bar, and it was the last thing on this page still shouting.
     Vertical, two stops, one hue: a solid green button with light on it. */
  --grad-btn: linear-gradient(180deg, #3FDF83 0%, #21C58C 100%);

  /* type - Aptos in all three roles, exactly as css/styles.css sets it.
     See the note there for why it is a fallback stack and not an @font-face. */
  --font-display: 'Aptos Display', 'Aptos', 'Segoe UI Variable Display',
                  'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --font-body: 'Aptos', 'Aptos Display', 'Segoe UI Variable Text', 'Segoe UI',
               'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: 'Aptos Mono', 'Martian Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* ---- CONTROL SURFACES ----
     Held apart from --paper-soft on purpose. --paper-soft is green-tinted, and
     when every input, every segment and every domain card was filled with it,
     the form became a field of mint rectangles: the brand colour was doing the
     work of a neutral, so nothing on the page could stand out by being green.

     These are neutral. The field is white with a defined edge and a hairline
     recess - a sheet of paper with boxes ruled on it, which is what a form is -
     and green is spent only where it means something: focus, validity, the
     selected option, the primary action. */
  --field:        #FFFFFF;
  --field-line:   #D8E0DB;
  --field-line-2: #BAC7C1;   /* hover */
  --field-inset:  inset 0 1px 2px rgba(9, 32, 22, 0.045);

  /* The registration-ID card. Ink in BOTH themes - it is a credential, and a
     credential that changes colour with the reader's theme preference is a
     weaker thing to remember. On paper it needs no edge; on ink it needs one,
     or it dissolves into the panel behind it. */
  --regid-bg:   #0A1912;
  --regid-line: transparent;

  /* ---- RADIUS ----
     ONE scale, and everything the eye can compare sits on it. The form used to
     mix 12px inputs with 999px pill buttons in the same column; that reads as
     two designs sharing a page rather than one. Buttons are 10px like the
     field they sit under. */
  --radius:    14px;
  --radius-lg: 20px;
  --radius-sm: 10px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-press: 140ms;
  --dur-hover: 180ms;
  --dur-panel: 260ms;

  /* three stops: a contact line at the edge, a short ambient falloff, and a
     long pool that carries the actual depth. One blur radius is a smudge. */
  --shadow-card: 0 1px 2px rgba(9, 32, 22, 0.05),
                 0 4px 10px -6px rgba(9, 32, 22, 0.08),
                 0 20px 40px -24px rgba(9, 32, 22, 0.24);
  --shadow-lift: 0 2px 6px rgba(9, 32, 22, 0.07),
                 0 10px 22px -12px rgba(9, 32, 22, 0.12),
                 0 30px 58px -26px rgba(7, 113, 74, 0.38);
}

/* ---------- 1b. DARK PALETTE ----------
   Same rules, restated colours. Two things are deliberately NOT inverted:

   --paper-deep, because it is the ink on a green pill and the pill is green in
   both themes; and --grad-brand, for the same reason - a filled primary button
   deepened to #07714A under dark text would be unreadable.

   --brand-ink runs the other way. On paper it is the deep green that makes
   green text legible; on ink the display green already is legible and the deep
   one is a smudge, so it becomes the bright value. Every rule that reads
   --brand-ink gets the right answer without knowing which theme it is in. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --brand-ink:   #35DE7A;
  --brand-ink-2: #21C58C;

  --paper:      #0A100E;
  --paper-soft: #040706;
  --paper-tint: #101A16;

  --glass:        rgba(10, 16, 14, 0.72);
  --glass-strong: rgba(14, 22, 19, 0.94);

  --line:        #21372C;
  --line-strong: #33543F;
  --line-focus:  rgba(53, 222, 122, 0.38);

  /* On ink a field cannot be a recess - there is no light to fall into it. It
     is a surface lifted one step off the panel instead, with a lit top edge. */
  --field:        #121A17;
  --field-line:   #26362F;
  --field-line-2: #3A5147;
  --field-inset:  inset 0 1px 0 rgba(255, 255, 255, 0.035);

  --regid-bg:   #04100A;
  --regid-line: #2B4438;

  --grid-ink:   rgba(53, 222, 122, 0.075);
  --grid-ink-2: rgba(53, 222, 122, 0.115);
  --wash-a:  rgba(53, 222, 122, 0.16);
  --wash-a2: rgba(33, 197, 140, 0.08);
  --wash-b:  rgba(92, 248, 74, 0.10);

  /* The beam carries further on ink - there is nothing else lit for it to
     compete with, and the same alphas that read as a streak on paper vanish. */
  --beam-mid:  rgba(33, 197, 140, 0.30);
  --beam-end:  rgba(92, 248, 74, 0.95);
  --beam-halo: rgba(53, 222, 122, 0.22);

  --chip-bg:   rgba(53, 222, 122, 0.12);
  --chip-line: rgba(53, 222, 122, 0.22);

  --ink:       #E9F5EF;
  --ink-dim:   #A9BDB3;
  --ink-muted: #7C9188;

  --danger:      #FF7A6E;
  --danger-soft: #24100E;
  --danger-line: #5A2620;

  --warn-bg:   #221A0C;
  --warn-line: #4A3A18;
  --warn-ink:  #E8CF95;

  /* On ink a drop shadow falls on nothing. Depth comes from a lit top edge -
     the surface catching light from above - over a pool deep enough to seat
     the panel without reading as a shadow of its own. */
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.05),
                 0 18px 40px -32px rgba(0, 0, 0, 0.9);
  --shadow-lift: inset 0 1px 0 rgba(255, 255, 255, 0.08),
                 0 20px 44px -24px rgba(53, 222, 122, 0.42);
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body.reg {
  min-height: 100dvh;
  background: var(--paper-soft);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }

::selection { background: var(--cn-green); color: var(--paper-deep); }

:focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: 3px;
  border-radius: 6px;
}

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

.icon { display: block; }

/* ---------- 3. BACKGROUND ---------- */
.reg-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Two soft green washes rather than one big blurred circle: `filter: blur()`
   on a large element costs real paint time on phones, and a radial-gradient
   is free. */
.reg-bg__wash {
  position: absolute;
  border-radius: 50%;
}
.reg-bg__wash--a {
  width: 120vw; height: 120vw;
  top: -62vw; right: -46vw;
  background: radial-gradient(circle at 50% 50%,
              var(--wash-a) 0%,
              var(--wash-a2) 42%,
              transparent 70%);
}
.reg-bg__wash--b {
  width: 96vw; height: 96vw;
  bottom: -54vw; left: -40vw;
  background: radial-gradient(circle at 50% 50%,
              var(--wash-b) 0%,
              transparent 68%);
}

/* Two lattices rather than one: a fine 28px cell for texture and a heavier
   112px block over it, which is what makes a surface read as engineering paper
   instead of as a single flat mesh. Both fade out before they reach the form,
   so the grid never competes with the fields. */
.reg-bg__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--grid-ink) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-ink) 1px, transparent 1px),
    linear-gradient(to right, var(--grid-ink-2) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-ink-2) 1px, transparent 1px);
  background-size: 28px 28px, 28px 28px, 112px 112px, 112px 112px;
  -webkit-mask-image: radial-gradient(ellipse 92% 62% at 50% 0%, #000 0%, transparent 80%);
          mask-image: radial-gradient(ellipse 92% 62% at 50% 0%, #000 0%, transparent 80%);
}

/* THE TRAJECTORY. The MOONSHOT mark is an M with a line shot through it to a
   moon, and this is that line drawn across the page behind everything: a thin
   beam climbing out of the lower left, brightening as it goes, with the lit
   dot at its end. It is the one decorative element here that says which event
   this form belongs to - the same motif the posters carry.

   Hidden below 1040px, where the rail stacks on top of the form and the beam
   would run straight through the fields. */
.reg-bg__beam { display: none; }

@media (min-width: 1040px) {
  .reg-bg__beam {
    display: block;
    position: absolute;
    left: -6%;
    top: 78%;
    width: 78%;
    height: 2px;
    transform-origin: 0 50%;
    transform: rotate(-38deg);
    background: linear-gradient(90deg,
                rgba(53, 222, 122, 0) 0%,
                var(--beam-mid) 55%,
                var(--beam-end) 100%);
  }
  /* The moon. Two circles: a soft halo and the hard point inside it, which is
     what stops a glow from reading as a blur. */
  .reg-bg__beam::after {
    content: '';
    position: absolute;
    right: -7px;
    top: 50%;
    width: 14px; height: 14px;
    margin-top: -7px;
    border-radius: 50%;
    background: var(--beam-end);
    box-shadow: 0 0 0 6px var(--beam-halo), 0 0 30px 10px var(--beam-halo);
  }
}

/* ---------- 4. HEADER ---------- */
.reg-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px clamp(16px, 4vw, 40px);
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}

.reg-top__brand {
  display: flex;
  align-items: center;
  min-width: 0;
}

/* The MOONSHOT mark. Same treatment as .ms-mark in css/styles.css - this page
   does not load that sheet, so the two files are repeated rather than shared.
   The mark is one flat colour on transparent, so it ships as two exports and
   swaps by background-image; keep the pair in step with styles.css. */
.reg-top__logo {
  display: block;
  flex: none;
  width: 40px;
  aspect-ratio: 512 / 481;
  /* :root here is paper, as everywhere else in this sheet, so the ink-coloured
     export is the base and the white one is the dark-theme override */
  background: url("../assets/moonshot_mark_dark.png") center / contain no-repeat;
  transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1);
}
:root[data-theme="dark"] .reg-top__logo {
  background-image: url("../assets/moonshot_mark.png");
}
.reg-top__brand:hover .reg-top__logo { transform: translateY(-1px) scale(1.04); }

.reg-top__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.reg-top__back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-dim);
  transition: color var(--dur-hover) var(--ease-out),
              border-color var(--dur-hover) var(--ease-out),
              background var(--dur-hover) var(--ease-out);
}
.reg-top__back [data-icon] {
  transition: transform var(--dur-hover) var(--ease-out);
}
/* The arrow steps left, exactly as .btn--back does in styles.css. The two
   sheets are separate files by design - this page does not load the site's -
   so the behaviour is written twice on purpose rather than shared. */
.reg-top__back:hover [data-icon] { transform: translateX(-3px); }
.reg-top__back:hover {
  color: var(--brand-ink);
  border-color: var(--line-strong);
  background: var(--paper);
}

/* ---------- 5. LAYOUT ---------- */
.reg-main {
  position: relative;
  z-index: 1;
  flex: 1;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 8px clamp(16px, 4vw, 40px) 56px;
  display: grid;
  gap: 26px;
  align-items: start;
}

/* ---------- 6. CONTEXT RAIL ---------- */
/* A pill, not a line of text. It carries a state ("open") and a deadline ("8
   days to go"), and a bordered plate is how a status reads as a status - the
   same treatment the posters give their REGISTRATIONS OPEN badge. */
.reg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px 7px 12px;
  border: 1px solid var(--chip-line);
  border-radius: 999px;
  background: var(--chip-bg);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--brand-ink);
}
.reg-eyebrow__sep {
  width: 1px;
  height: 11px;
  background: var(--chip-line);
}
.reg-eyebrow__count { color: var(--ink-dim); }

/* The live dot, and the only animation on the page: a slow pulse that says the
   form on the right is taking entries right now. Two seconds, tiny amplitude -
   a blink here would be a distraction sitting next to a text field. */
.reg-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cn-green);
  box-shadow: 0 0 0 4px rgba(53, 222, 122, 0.18);
  animation: reg-pulse 2.4s var(--ease-out) infinite;
}
@keyframes reg-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(53, 222, 122, 0.16); }
  50%      { box-shadow: 0 0 0 6px rgba(53, 222, 122, 0.05); }
}

.reg-rail__title {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: clamp(30px, 7.4vw, 44px);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -0.028em;
  font-variation-settings: 'wdth' 96;
  text-wrap: balance;
}
/* The name takes the brand gradient rather than a flat green. It is one word
   in a 44px headline, which is exactly the size at which a gradient reads as
   an intention and not as a bug. background-clip needs a painted background to
   clip, so the colour is declared first and only then made transparent -
   anything that cannot do the clip keeps the readable green. */
.reg-rail__title em {
  font-style: normal;
  color: var(--brand-ink);
  background: var(--grad-brand);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* On paper the display greens are too light to carry a headline, so the
   gradient is deepened for light mode only. */
:root:not([data-theme="dark"]) .reg-rail__title em {
  background: linear-gradient(115deg, #07714A 0%, #0E9C63 55%, #12B872 100%);
  -webkit-background-clip: text;
          background-clip: text;
}

.reg-rail__tagline {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--ink-dim);
}

/* Hidden on phones. The rail is a preamble, and every line of it is a line
   between someone arriving and someone typing their name - on a narrow screen
   the facts below earn their space and this paragraph does not. It returns at
   1040px, where the rail sits beside the form and costs nothing. */
.reg-rail__lead { display: none; }

@media (min-width: 1040px) {
  .reg-rail__lead {
    display: block;
    margin-top: 14px;
    font-size: 15.5px;
    line-height: 1.66;
    color: var(--ink-dim);
    max-width: 46ch;
  }
}

/* Four cards with a gap between them rather than one block ruled into
   quarters. The old hairline grid read as a table - a thing to be scanned
   left to right - when these are four unrelated facts, each of which somebody
   looks up on its own. */
.reg-facts {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.reg-fact {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 13px;
  background: var(--glass-strong);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  transition: border-color var(--dur-hover) var(--ease-out),
              transform var(--dur-hover) var(--ease-out);
}
.reg-fact:hover {
  border-color: var(--line-strong);
  transform: translateY(-1px);
}
/* The tinted plate under an icon. Green is spent here because it is the only
   colour in the rail, and four small greens set the temperature of the whole
   left-hand side without any of them shouting. */
.reg-fact__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--chip-bg);
  border: 1px solid var(--chip-line);
  color: var(--brand-ink);
}
.reg-facts dt {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.reg-facts dd {
  margin-top: 3px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
.reg-facts dd.is-free { color: var(--brand-ink); }

/* ---- what you leave with ----
   The reason to spend the next two minutes. It lived on the landing page and
   nowhere on the form, which is backwards: this is the page where somebody is
   deciding, and a certificate, a kit and an interview are the answer to "what
   do I get out of it". */
.reg-perks {
  margin-top: 16px;
  padding: 14px 15px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.reg-perks__head {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.reg-perks ul {
  margin-top: 11px;
  display: grid;
  gap: 10px;
  list-style: none;
  padding: 0;
}
.reg-perks li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-dim);
}
.reg-perks b { color: var(--ink); font-weight: 600; }
.reg-perk__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  margin-top: 1px;
  border-radius: 8px;
  background: var(--chip-bg);
  color: var(--brand-ink);
}

/* Below the form on a phone, under the rail on a desktop - see the grid areas
   at the 1040px breakpoint. Its own top margin, because on a phone it follows
   the panel rather than the facts. */
.reg-extras { margin-top: 4px; }
.reg-extras .reg-perks { margin-top: 0; }

.reg-rail__note {
  margin-top: 12px;
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  background: var(--paper-tint);
  border: 1px solid var(--line);
}
.reg-rail__note p { font-size: 13.5px; line-height: 1.55; color: var(--ink-dim); }
.reg-note__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 8px;
  background: var(--chip-bg);
  color: var(--brand-ink);
}
/* The compulsory one is the only note anybody must act on, so it gets an edge.
   A left rule rather than a louder fill: it marks the paragraph without
   turning a quiet corner of the page into a warning banner. */
.reg-rail__note--must {
  border-left: 3px solid var(--cn-teal);
}

/* ---------- 7. PANEL ---------- */
.reg-panel {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 22px 18px 24px;
  min-width: 0;
}

/* a thin brand edge along the top of the card, the same gradient the landing
   page uses on its register card */
.reg-panel::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--grad-brand);
}

/* ---- panel head ----
   A title and two chips, above the stepper. The panel used to begin with "01
   About You", which is a step label doing a heading's job: it says where you
   are without ever having said what this is. */
/* THE HEAD IS A BLOCK, NOT A SPLIT ROW.
   `justify-content: space-between` pinned the title to the left edge and the
   two chips to the right one, so on any panel wider than the text the head
   read as two unrelated things at opposite ends with a hole between them. The
   chips belong TO the title - they answer "how long" and "what does it cost"
   about the form underneath - so they sit under it, and the head reads as one
   object at every width. */
.panel-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}
.panel-head__kicker {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.panel-head__title {
  margin-top: 5px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.022em;
  color: var(--ink);
}
.panel-head__chips { display: flex; gap: 7px; flex-wrap: wrap; padding-top: 4px; }

/* A rule under the head, so the stepper below it reads as the start of the
   form rather than as a third line of the title block. */
.panel-head {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
/* `display: flex` above beats the UA sheet's [hidden] rule on specificity, so
   the attribute has to be said again - exactly as .stepper does below, and for
   the same reason: register.js hides this head when it swaps in a confirmation
   screen, and without this line "Let's get you in - 2 minutes" survives above
   a registration that is already complete. */
.panel-head[hidden] { display: none; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-soft);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-dim);
  white-space: nowrap;
}
.chip span { display: grid; place-items: center; color: var(--ink-muted); }
/* "Free" is the single most persuasive word on this page. It gets the brand. */
.chip--brand {
  border-color: var(--chip-line);
  background: var(--chip-bg);
  color: var(--brand-ink);
}
.chip--brand span { color: var(--brand-ink); }

/* ---------- 8. STEPPER ---------- */
/* `display: flex` below beats the UA sheet's [hidden] rule on specificity, so
   the attribute needs saying again or the stepper survives into the success
   screen it is meant to be replaced by. */
.stepper[hidden] { display: none; }

.stepper {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.stepper__item {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.stepper__badge {
  position: relative;
  flex: none;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  transition: background var(--dur-panel) var(--ease-out),
              border-color var(--dur-panel) var(--ease-out),
              color var(--dur-panel) var(--ease-out);
}
.stepper__num, .stepper__tick {
  grid-area: 1 / 1;
  transition: opacity var(--dur-hover) var(--ease-out),
              transform var(--dur-hover) var(--ease-out);
}
.stepper__tick { opacity: 0; transform: scale(0.6); }

.stepper__label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--dur-panel) var(--ease-out);
}

.stepper__item.is-current .stepper__badge {
  border-color: transparent;
  background: var(--grad-brand);
  color: var(--paper-deep);
}
.stepper__item.is-current .stepper__label { color: var(--ink); }

.stepper__item.is-done .stepper__badge {
  border-color: var(--cn-green);
  background: var(--cn-green);
  color: var(--paper-deep);
}
.stepper__item.is-done .stepper__num { opacity: 0; transform: scale(0.6); }
.stepper__item.is-done .stepper__tick { opacity: 1; transform: none; }

.stepper__line {
  flex: 1;
  height: 2px;
  min-width: 12px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}
.stepper__line span {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 2px;
  background: var(--grad-brand);
  /* scaleX rather than width: a transform is composited, a width change is a
     layout on every frame */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms var(--ease-out);
}
.stepper__line.is-filled span { transform: scaleX(1); }

/* ---------- 9. STEPS ---------- */
.step[hidden] { display: none; }

.step.is-active {
  animation: stepIn 320ms var(--ease-out) both;
}
@keyframes stepIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* .step__head is gone. The stepper directly above already reads "01 ABOUT
   YOU"; repeating it as a heading four lines later said the same thing twice
   in the same words, which is the sort of thing that makes a form feel
   assembled rather than designed. The stepper is now the only place a step is
   named, and it is the place that also shows where you are in the sequence. */

/* ---------- 10. FIELDS ---------- */
.field { margin-bottom: 16px; }

.field > label,
.field__label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.002em;
  color: var(--ink);
}
.field > label b,
.field__label b {
  color: var(--brand-ink);
  font-weight: 600;
}

/* The counterpart to the required asterisk. Deliberately quiet - it is
   permission to skip a field, not a call to action, and every other label on
   the form would lose its rhythm if this shouted. */
.field > label .opt {
  margin-left: 7px;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-soft);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink-muted);
  vertical-align: 1px;
}

/* Sits BELOW the input, so the top margin has to be positive. It was -3px,
   which pulled the hint up into the bottom edge of the control and made the
   two collide by exactly 3px on every field that has one - email and phone.
   Matches .error's 7px so a field reads the same whether it is showing a hint,
   an error, or both stacked. */
.hint {
  margin: 7px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-muted);
}

/* 1px, not 1.5px. A one-and-a-half pixel border lands on a half pixel at 1x
   and is rendered as a soft two-pixel smear; at 2x it is a crisp 3px, which is
   heavier than any input on a professional form. 1px is 1px everywhere. */
.control {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--field);
  border: 1px solid var(--field-line);
  border-radius: var(--radius-sm);
  box-shadow: var(--field-inset);
  transition: border-color var(--dur-hover) var(--ease-out),
              background var(--dur-hover) var(--ease-out),
              box-shadow var(--dur-hover) var(--ease-out);
}
.control:hover { border-color: var(--field-line-2); }

/* The focus ring is the one place green is spent on a field, and it is spent
   loudly - a 3px halo plus the border going brand. Nothing else on the form
   competes with it, so the eye always knows where the caret is. */
.control:focus-within {
  border-color: var(--cn-teal);
  box-shadow: 0 0 0 3px var(--line-focus);
}

.control__icon {
  flex: none;
  display: grid;
  place-items: center;
  padding-left: 13px;
  color: var(--ink-muted);
  transition: color var(--dur-hover) var(--ease-out);
}
.control:focus-within .control__icon { color: var(--brand-ink); }

.control input,
.control select,
.control textarea {
  flex: 1;
  min-width: 0;
  width: 100%;
  border: 0;
  background: none;
  outline: none;
  padding: 12px 14px;
  font-family: inherit;
  /* 16px exactly - anything smaller and iOS Safari zooms the page on focus */
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
  border-radius: var(--radius-sm);
}
.control input::placeholder,
.control textarea::placeholder { color: var(--ink-muted); opacity: .85; }

.control__icon + input,
.control__icon + select { padding-left: 10px; }

.control--area { align-items: stretch; }
.control textarea {
  resize: vertical;
  min-height: 88px;
  padding: 13px 14px;
}

/* native select arrow removed so the caret matches the icon set */
.control--select select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  cursor: pointer;
}

/* THE OPEN DROPDOWN IS NOT PART OF THIS PAGE, and that is the whole bug.
   The list a native <select> opens is drawn by the operating system, outside
   the document, so it inherits none of the theme above - it reads colours off
   the elements themselves and nothing else.

   What it read here was `background: none` from the shared control rule, which
   computes to transparent, and `color: var(--ink)`, which on the dark theme is
   near-white. A transparent background makes the popup fall back to the
   platform's own default - white on Chrome and on most Android browsers - so
   the year and experience options were near-white text on a white list.
   Invisible, and only in dark mode, which is the theme this site defaults to.

   `color-scheme: dark` on :root does not rescue it. That property steers the
   popup only while the control is still using UA-supplied colours; the moment
   an author sets a background on the select - even to `none` - the control is
   author-styled and the platform stops theming it.

   THE FIX GOES ON THE OPTIONS AND NOT ON THE SELECT, which is the part worth
   writing down. Painting the <select> opaque would fix the popup and square
   off the field: the select is stretched inside .control, which is what draws
   the rounded background and the border, so an opaque child covers its
   corners. The options carry the colour instead - they exist only inside the
   popup, so styling them cannot affect the closed field at all.

   --paper-soft rather than --paper because the popup floats ABOVE the form:
   the same value as the surface behind it reads as a hole rather than as a
   menu, and one step deeper is what makes it sit on top. */
.control--select select option,
.control--select select optgroup {
  background-color: var(--paper-soft);
  color: var(--ink);
}
.control__caret {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-muted);
  pointer-events: none;
}

.counter {
  margin-top: 6px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}
.counter.is-near { color: var(--brand-ink); }

/* ---------- 11. ERRORS ---------- */
.error {
  display: none;
  margin-top: 7px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--danger);
}
.error::before {
  content: '';
  display: inline-block;
  width: 4px; height: 4px;
  margin: 0 7px 2px 0;
  border-radius: 50%;
  background: var(--danger);
}

.field.is-invalid .error { display: block; }
.field.is-invalid .control {
  border-color: var(--danger-line);
  background: var(--danger-soft);
}
.field.is-invalid .control:focus-within {
  box-shadow: 0 0 0 4px rgba(179, 38, 30, 0.12);
}

.field.is-valid .control { border-color: rgba(33, 197, 140, 0.42); }

/* A tick on a field that is filled and valid. Drawn from two borders rather
   than an icon, because it has to appear the instant a field passes and an
   injected <svg> would need JS to reach in and do it.
   Not on selects or the textarea: the select already has a caret at that end,
   and a 240-character idea wraps under a badge floated over its corner. */
.field.is-valid .control:not(.control--select):not(.control--area)::after {
  content: '';
  position: absolute;
  right: 15px;
  top: 50%;
  width: 6px; height: 11px;
  margin-top: -8px;
  border: 2px solid var(--brand-ink);
  border-top: 0;
  border-left: 0;
  transform: rotate(42deg);
  opacity: 0.9;
  pointer-events: none;
}
.field.is-valid .control:not(.control--select):not(.control--area) input {
  padding-right: 34px;
}

/* ---------- 12. SEGMENTED (education status) ---------- */
.segmented {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
/* Three options do not fit side by side on a 360px phone without the labels
   turning into two-line stubs, so below the breakpoint they stack and above it
   they sit in a row. auto-fit rather than a hard 3, so a future fourth option
   wraps instead of shrinking everything past legibility. */
.segmented--three {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
}

/* The real radio is hidden but still focusable and still the thing that gets
   checked - the styled box is only a label. `position: relative` on the label
   keeps the absolutely positioned input anchored to its own control rather
   than to the panel, so focus never scrolls the page somewhere unexpected. */
.segment { display: block; cursor: pointer; position: relative; }
.segment input {
  position: absolute;
  inset: 0 auto auto 0;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0;
  pointer-events: none;
}

.segment__box {
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 100%;
  padding: 11px 12px 12px;
  border: 1px solid var(--field-line);
  border-radius: var(--radius-sm);
  background: var(--field);
  box-shadow: var(--field-inset);
  transition: border-color var(--dur-hover) var(--ease-out),
              background var(--dur-hover) var(--ease-out),
              transform var(--dur-press) var(--ease-out);
}
.segment:hover .segment__box { border-color: var(--field-line-2); }
.segment:active .segment__box { transform: scale(0.985); }

/* The icon sits on a plate, the same one the rail facts and the domain cards
   use, so a tile reads as a thing you pick rather than as a paragraph with a
   picture over it. */
.segment__icon {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  margin-bottom: 8px;
  border-radius: 9px;
  background: var(--paper-soft);
  color: var(--ink-dim);
  transition: color var(--dur-hover) var(--ease-out),
              background var(--dur-hover) var(--ease-out);
}
.segment__text { font-size: 14px; font-weight: 600; }

/* The tick that says "this one". The domain cards below already answer their
   selection with a badge; these three answered it with a tint alone, which is
   the weaker signal and the one that disappears for anybody who does not see
   the green. */
.segment__tick {
  position: absolute;
  top: 9px; right: 9px;
  width: 19px; height: 19px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cn-green);
  color: var(--paper-deep);
  opacity: 0;
  transform: scale(0.55);
  transition: opacity var(--dur-hover) var(--ease-out),
              transform var(--dur-hover) var(--ease-out);
}
/* Was mono, uppercase and letter-spaced - three shouts for a line that only
   disambiguates the word above it. Set as the quiet caption it actually is. */
.segment__sub {
  font-size: 11.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-muted);
}

/* Selected reads by a doubled border and a tint, not by a different fill
   weight: the box must not appear to move or resize when it is chosen, and a
   1px border going to 2px would shift the text inside it by a pixel. The inner
   ring is drawn with box-shadow, which costs no layout. */
.segment input:checked + .segment__box {
  border-color: var(--cn-teal);
  background: var(--paper-tint);
  box-shadow: inset 0 0 0 1px var(--cn-teal);
}
.segment input:checked + .segment__box .segment__icon {
  color: var(--brand-ink);
  background: var(--chip-bg);
}
.segment input:checked + .segment__box .segment__sub { color: var(--brand-ink); }
.segment input:checked + .segment__box .segment__tick {
  opacity: 1;
  transform: scale(1);
}
/* Room for the badge, so a tick can never land on top of the word beside it. */
.segment__box { padding-right: 34px; }
.segment input:focus-visible + .segment__box {
  outline: 2px solid var(--brand-ink);
  outline-offset: 2px;
}

/* ---------- 13. DOMAIN PICKER ---------- */
/* grid-auto-rows: 1fr is the whole fix for the ragged look this had. Six cards,
   two columns, and one of them ("FinTech & Financial Innovation") wraps to two
   lines - which made its row taller than the others and left the card beside it
   with a band of dead space under the text. Every row now takes the height of
   its tallest card, so the grid reads as a grid. */
.domains {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: 1fr;
  gap: 8px;
}

.domain { display: block; cursor: pointer; position: relative; height: 100%; }
.domain input {
  position: absolute;
  inset: 0 auto auto 0;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0;
  pointer-events: none;
}

.domain__box {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  height: 100%;
  padding: 11px 40px 11px 11px;
  border: 1px solid var(--field-line);
  border-radius: var(--radius-sm);
  background: var(--field);
  box-shadow: var(--field-inset);
  transition: border-color var(--dur-hover) var(--ease-out),
              background var(--dur-hover) var(--ease-out),
              transform var(--dur-press) var(--ease-out);
}
/* Lift on hover, not just a darker edge. Six cards is the one place on this
   form where somebody browses rather than answers, and a card that rises to
   meet the cursor is what makes a grid feel picked-through. */
.domain:hover .domain__box {
  border-color: var(--field-line-2);
  transform: translateY(-1px);
  box-shadow: var(--field-inset), 0 6px 16px -10px rgba(9, 32, 22, 0.35);
}
.domain:hover .domain__icon { color: var(--brand-ink); background: var(--chip-bg); }
.domain:active .domain__box { transform: scale(0.99); }

/* The icon tile lost its border. Six bordered tiles inside six bordered cards
   is twelve rectangles competing at the same weight; the tile now reads as a
   tint the icon sits on, and the card is the only edge in the component. */
.domain__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 8px;
  background: var(--paper-soft);
  color: var(--ink-dim);
  transition: color var(--dur-hover) var(--ease-out),
              background var(--dur-hover) var(--ease-out);
}

.domain__text { min-width: 0; }
.domain__name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.domain__n {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
}

.domain__check {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%) scale(0.5);
  width: 20px; height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cn-green);
  color: var(--paper-deep);
  opacity: 0;
  transition: opacity var(--dur-hover) var(--ease-out),
              transform var(--dur-hover) var(--ease-out);
}

.domain input:checked + .domain__box {
  border-color: var(--cn-teal);
  background: var(--paper-tint);
  /* The inner ring keeps the selected card from growing by a pixel, and the
     outer halo is what makes one card out of six read as chosen from across
     the panel. */
  box-shadow: inset 0 0 0 1px var(--cn-teal),
              0 0 0 3px var(--line-focus);
}
.domain input:checked + .domain__box .domain__icon {
  color: var(--brand-ink);
  background: var(--paper);
}
.domain input:checked + .domain__box .domain__n { color: var(--brand-ink); }
.domain input:checked + .domain__box .domain__check {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}
.domain input:focus-visible + .domain__box {
  outline: 2px solid var(--brand-ink);
  outline-offset: 2px;
}

/* ---------- 14. BUTTONS ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  /* 48px - comfortably over the 44px thumb-target floor without the button
     becoming the tallest thing on the form */
  min-height: 48px;
  padding: 13px 22px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.005em;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-press) var(--ease-out),
              box-shadow var(--dur-hover) var(--ease-out),
              background var(--dur-hover) var(--ease-out),
              border-color var(--dur-hover) var(--ease-out),
              opacity var(--dur-hover) var(--ease-out);
}
.btn:active { transform: translateY(1px) scale(0.99); }

/* The brand gradient stays - this is the same button as the one on the site,
   and the form should not look like it belongs to a different product. What
   goes is the glow: a coloured 26px pool under a full-width lime bar is what
   made this read as a landing-page CTA dropped into a form. A contact shadow
   seats it; hover lifts it slightly. The action is still unmistakable because
   it is the only saturated thing on the panel. */
.btn--primary {
  background: var(--grad-btn);
  color: var(--paper-deep);
  box-shadow: 0 1px 2px rgba(7, 113, 74, 0.18);
}
.btn--primary:hover {
  box-shadow: 0 1px 2px rgba(7, 113, 74, 0.20),
              0 6px 16px -8px rgba(7, 113, 74, 0.45);
}

.btn--ghost {
  background: var(--field);
  border-color: var(--field-line);
  color: var(--ink);
  box-shadow: var(--field-inset);
}
.btn--ghost:hover { border-color: var(--field-line-2); color: var(--brand-ink); }

.btn--block { width: 100%; }
/* min-width:0 because a flex item defaults to min-width:auto, which refuses to
   shrink below its own content. Without it "Submit My MOONSHOT" plus its arrow
   pushed the button 28px outside the panel on a 360px screen. */
.btn--grow  { flex: 1; min-width: 0; }

.btn__spinner { display: none; }

.btn.is-loading {
  pointer-events: none;
  opacity: 0.92;
}
.btn.is-loading .btn__arrow { display: none; }
.btn.is-loading .btn__spinner {
  display: block;
  animation: spin 900ms linear infinite;
}
@keyframes spin { to { rotate: 360deg; } }

.btn:disabled { opacity: 0.55; pointer-events: none; }

.linklike {
  display: block;
  margin: 18px auto 0;
  font-size: 13.5px;
  color: var(--ink-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-strong);
}
.linklike:hover { color: var(--brand-ink); }

/* ---------- 15. ACTIONS ---------- */
.reg-actions { margin-top: 22px; }
.reg-actions--split {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.reg-actions--split .btn--ghost { flex: none; padding-inline: 18px; }

/* Below ~380px the two buttons plus the gap leave the submit label nowhere to
   go, and shrinking it just squashes the text. Stacking is the honest answer -
   submit first, because it is the one they came here to press. */
@media (max-width: 380px) {
  .reg-actions--split { flex-direction: column-reverse; }
  .reg-actions--split .btn--ghost { width: 100%; }
}

.reg-legal {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-muted);
  text-align: center;
}

/* ---------- 16. NOTICE ---------- */
.notice {
  margin-top: 4px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
  border: 1px solid var(--danger-line);
  color: var(--danger);
  font-size: 13.5px;
  line-height: 1.55;
}
.notice[hidden] { display: none; }

/* ---------- 17. HONEYPOT ---------- */
/* Off-canvas rather than display:none - some bots skip hidden inputs, and
   nothing here is reachable by keyboard because of the tabindex="-1". */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ---------- 18. OUTCOME SCREENS ---------- */
.outcome {
  text-align: center;
  padding: 12px 2px 6px;
  animation: outcomeIn 460ms var(--ease-out) both;
}
.outcome[hidden] { display: none; }
.outcome:focus { outline: none; }

@keyframes outcomeIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Smaller, and the halo is one thin ring instead of an 8px cushion over a
   36px coloured pool. A success tick does not need to be the largest object on
   the screen - the registration ID does. */
.outcome__mark {
  display: grid;
  place-items: center;
  width: 60px; height: 60px;
  margin: 4px auto 18px;
  border-radius: 50%;
  background: var(--grad-brand);
  color: var(--paper-deep);
  box-shadow: 0 0 0 5px rgba(53, 222, 122, 0.12);
  animation: markPop 520ms var(--ease-out) 80ms both;
}
.outcome__mark--soft {
  background: var(--paper-tint);
  color: var(--brand-ink);
  box-shadow: 0 0 0 5px rgba(53, 222, 122, 0.09);
}
@keyframes markPop {
  from { opacity: 0; transform: scale(0.72); }
  to   { opacity: 1; transform: none; }
}

/* Sentence case, not uppercase. "REGISTRATION CONFIRMED" set in 800-weight
   condensed capitals is a poster headline; this is a receipt, and the reader
   has just handed over their details. The same words in sentence case read as
   a confirmation rather than an announcement. */
.outcome__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 5.6vw, 31px);
  line-height: 1.12;
  font-weight: 750;
  letter-spacing: -0.028em;
  text-transform: none;
  font-variation-settings: 'wdth' 98;
}

.outcome__lead {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.outcome__text {
  margin-top: 8px;
  font-size: 14.5px;
  color: var(--ink-dim);
  max-width: 44ch;
  margin-inline: auto;
}

/* Plain type, no box. It was a bordered tinted panel sitting directly under
   another bordered tinted panel (the join box) and above a third - three
   stacked containers, none of which was more important than the others, which
   is how a success screen ends up looking like a stack of alerts. Only the
   join box keeps its box now, because it is the only thing still to DO. */
.outcome__mail {
  margin: 18px auto 0;
  max-width: 46ch;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-dim);
}
/* The failure variant keeps a box, and should: this one IS an alert - the
   confirmation email did not send, and it must not read like body copy. */
.outcome__mail.is-warn {
  padding: 12px 15px;
  border-radius: var(--radius-sm);
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  color: var(--warn-ink);
}

/* THE CREDENTIAL.
   This is what the reader came away with and what they will be asked for at
   the door, so it is the one object on the screen built to be looked at and
   remembered. It was a dashed outline around tinted paper, which is the visual
   language of a placeholder - an empty drop zone waiting for content, not the
   content itself. It is now a solid ink card in both themes: the ID sits on
   the darkest surface on the page, in mono, in brand green, the way a number
   on a ticket does. */
.regid {
  margin: 20px auto 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 15px 30px;
  border-radius: var(--radius);
  border: 1px solid var(--regid-line, transparent);
  background: var(--regid-bg, #0A1912);
  box-shadow: var(--shadow-card);
}
.regid__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.55);
}
.regid__value {
  font-family: var(--font-mono);
  font-size: clamp(20px, 5vw, 25px);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--cn-green);
}

/* The waiting list, said in red on the ID card itself. Red because this is the
   one place on the page where the answer might not be the one the reader
   wants, and a state that only differs by wording is a state people miss.
   Not colour alone: it is also a bordered pill carrying the words. */
.regid__flag {
  margin-top: 2px;
  padding: 4px 11px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FF6B5C;
  background: rgba(255, 107, 92, 0.12);
  border: 1px solid rgba(255, 107, 92, 0.45);
}

.outcome__actions {
  margin-top: 24px;
  display: grid;
  gap: 10px;
}

.outcome__tagline {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--brand-ink);
}

/* ---------- 19. FOOTER ---------- */
.reg-foot {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  padding: 22px clamp(16px, 4vw, 40px) 32px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  text-align: center;
}
.reg-foot__sep { color: var(--line-strong); }

/* ---------- 20. BREAKPOINTS ---------- */

/* 480px - the domain picker and the fact grid gain a second column */
@media (min-width: 480px) {
  .domains { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .outcome__actions {
    grid-auto-flow: column;
    justify-content: center;
  }
}

/* 640px - roomier panel, real page margins */
@media (min-width: 640px) {
  .reg-panel { padding: 30px 30px 32px; }
  .reg-main { padding-bottom: 72px; gap: 34px; }
  .reg-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stepper { gap: 14px; }
}

/* 1040px - the rail moves alongside the form and sticks */
@media (min-width: 1040px) {
  /* Two named areas in the left column, one tall one on the right. The DOM
     order is rail -> form -> extras, which is the order a phone wants; here
     the extras go back under the rail, beside the form, without the markup
     having to be in that order. */
  .reg-main {
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    grid-template-areas:
      "rail  panel"
      "extra panel";
    align-content: start;
    column-gap: 56px;
    row-gap: 18px;
    padding-top: 28px;
    padding-bottom: 88px;
    align-items: start;
  }
  .reg-rail   { grid-area: rail; padding-top: 10px; }
  .reg-extras { grid-area: extra; }
  .reg-panel  { grid-area: panel; }
  .reg-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reg-panel { padding: 36px 38px 38px; }
  .domains { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reg-top { padding-block: 20px; }
  .reg-top__logo { width: 46px; }
}

@media (min-width: 1240px) {
  .reg-rail__title { font-size: 48px; }
}

/* ---------- 21. REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  /* the spinner is the one exception: with no motion at all a loading button
     looks like a frozen one, so it keeps turning, just slowly */
  .btn.is-loading .btn__spinner {
    animation: spin 2.4s linear infinite !important;
  }
}

/* ---------- 21b. HEADER ON NARROW SCREENS ----------
   The header carries a logo, a wordmark, a theme toggle and a back control, and
   the wordmark is nowrap. On a phone that ran under the back button and clipped
   mid-word. Two things give it the room: the back control drops to its icon,
   and the wordmark is allowed to disappear last - the logo beside it still
   says whose site this is. */
.reg-top__back { flex: none; white-space: nowrap; }

@media (max-width: 560px) {
  .reg-top__back-text { display: none; }
  .reg-top__back { padding: 9px; }
}

/* ---------- 22. PHONE FIELD ---------- */
/* The +91 is a fixed prefix, not an editable input: every number this event
   takes is Indian, and a country picker would be four extra taps on a phone to
   arrive back where it started. */
.control--phone .control__prefix {
  flex: none;
  padding: 0 11px 0 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-dim);
  border-right: 1.5px solid var(--line);
  align-self: stretch;
  display: grid;
  place-items: center;
  transition: color var(--dur-hover) var(--ease-out),
              border-color var(--dur-hover) var(--ease-out);
}
.control--phone:focus-within .control__prefix {
  color: var(--brand-ink);
  border-right-color: var(--line-strong);
}
.control--phone input {
  padding-left: 12px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}


/* ============================================================================
   23. THEME TOGGLE
   Same control as the landing page: shows the theme you would GET, not the one
   you are in, because it is read as "press for this" and not as a status light.
   ============================================================================ */
.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--glass);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: var(--ink-dim);
  transition: color var(--dur-hover) var(--ease-out),
              border-color var(--dur-hover) var(--ease-out),
              transform var(--dur-press) var(--ease-out);
}
.theme-toggle:hover { color: var(--brand-ink); border-color: var(--line-strong); }
.theme-toggle:active { transform: scale(0.92); }

.theme-toggle__icon {
  position: absolute;
  display: inline-flex;
  transition: opacity 200ms var(--ease-out), transform 260ms var(--ease-out);
}
/* light page -> offer the moon; dark page -> offer the sun */
.theme-toggle__icon--sun { opacity: 0; transform: scale(.6) rotate(70deg); }
[data-theme="dark"] .theme-toggle__icon--sun { opacity: 1; transform: none; }
[data-theme="dark"] .theme-toggle__icon--moon { opacity: 0; transform: scale(.6) rotate(-70deg); }


/* ============================================================================
   24. THE COMPULSORY GROUP JOIN

   Placed directly under the registration ID on the success screen, above the
   email note and the event links, because it is the only thing still asked of
   the person reading it. Everything else on that screen is confirmation; this
   is an instruction, and an instruction under three paragraphs of good news
   does not get followed.

   It is styled as a callout rather than another button in the row for the same
   reason - a row of equal-weight buttons is a menu, and a menu implies choice.
   ============================================================================ */
/* Now the ONLY filled container on the success screen, which is what lets it
   carry the weight the comment above claims for it. It used to be one of three
   tinted boxes stacked down the page - the ID, this, and the email note - and
   three emphasised blocks in a column emphasise nothing. */
.joinbox {
  margin: 24px auto 0;
  max-width: 460px;
  text-align: left;
  padding: 18px 18px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: var(--paper-tint);
  box-shadow: var(--shadow-card);
}

.joinbox__flag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--brand-ink);
  margin-bottom: 10px;
}
.joinbox__flag [data-icon] { flex: none; }

.joinbox__title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 8px;
}

.joinbox__text {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-dim);
  margin-bottom: 16px;
}

/* The waiting list variant: same box, no button. Its text is the last thing in
   the box, so the gap the button used to sit in goes with it. */
.joinbox--wait .joinbox__text { margin-bottom: 0; }

.joinbox__note {
  margin-top: 11px;
  font-size: 12.5px;
  color: var(--ink-muted);
  text-align: center;
}

/* the same instruction on the rail, before anyone has submitted anything */
.reg-rail__note--must {
  border-color: var(--line-strong);
  background: var(--paper-tint);
}
.reg-rail__note--must strong { color: var(--ink); font-weight: 700; }


/* ============================================================================
   25. READABILITY PASS

   The form was set at 13.5-15px throughout, which is a size that reads as
   "small print" on a page asking for someone's phone number. Everything that
   is actually read moves up a step, the rail is capped at a sane measure
   instead of stretching to its column, and the whole composition centres on
   narrow screens where there is no rail to sit beside.
   ============================================================================ */
body.reg { font-size: 17px; font-weight: 500; }

/* ---- weight ----
   Same move as the landing page: heavier throughout, headings at the top of
   the range. Labels above form fields matter most - they are what someone
   scans when they are deciding whether this form is going to be long. */
.reg-rail__title,
.outcome__title,
.joinbox__title,
.regid__value       { font-weight: 800; }

.field label,
.field__label,
.reg-eyebrow,
.reg-facts dt,
.reg-facts dd,
.stepper__label,
.segment__text,
.domain__name,
.joinbox__flag,
.reg-rail__tagline,
.outcome__tagline   { font-weight: 700; }

.reg-rail__lead,
.outcome__lead,
.joinbox__text,
.reg-rail__note p,
.hint,
.outcome__text,
.outcome__mail      { font-weight: 500; }

strong, b           { font-weight: 800; }

.reg-rail__lead     { font-size: 16.5px; line-height: 1.6; max-width: 46ch; }
.reg-rail__note p   { font-size: 14.5px; line-height: 1.6; }
.reg-facts dd       { font-size: 15.5px; }
.hint               { font-size: 13.5px; line-height: 1.5; }
.error              { font-size: 13.5px; }
.reg-legal          { font-size: 13.5px; line-height: 1.6; }
.outcome__lead      { font-size: 17.5px; line-height: 1.55; }
.outcome__text      { font-size: 15px; line-height: 1.6; }
.outcome__mail      { font-size: 14.5px; line-height: 1.6; }
.segment__text      { font-size: 14.5px; }
.domain__name       { font-size: 14.5px; }
.control input,
.control select,
.control textarea   { font-size: 16.5px; }   /* 16px+ or iOS zooms on focus */

/* the rail is prose; prose gets a measure */
.reg-rail__title { max-width: 16ch; }

/* Below the two-column breakpoint the rail sits above the form with the whole
   page width to itself, so it centres rather than hugging the left edge. */
@media (max-width: 1039px) {
  .reg-rail { text-align: center; }
  .reg-rail__lead,
  .reg-rail__title { max-width: 34ch; margin-inline: auto; }
  .reg-rail__note { text-align: left; }
  .reg-eyebrow { justify-content: center; }
}

/* ---------- 23. ALREADY REGISTERED ---------- */
/* Right-aligned and quiet. Centred, it read as a heading for the form below
   it; off to the side it reads as what it is - a link for the few people this
   page is not for. */
.reg-already {
  margin: -4px 0 18px;
  text-align: right;
  font-size: 13px;
  color: var(--ink-muted);
}
.reg-already .linklike {
  display: inline;
  margin: 0 0 0 5px;
  font-size: 13px;
  color: var(--brand-ink);
  text-decoration-color: currentColor;
}

.outcome--lookup { text-align: left; }
.outcome--lookup .outcome__mark,
.outcome--lookup .outcome__title,
.outcome--lookup .outcome__lead { text-align: center; }
.outcome--lookup .outcome__mark { margin-inline: auto; }

.lookup-form { margin: 22px 0 4px; }
.lookup-form .field { margin-bottom: 14px; }

.lookup-result { margin-top: 24px; }

.lookup-greet {
  margin: 0 0 16px;
  text-align: center;
  font-size: 16px;
  line-height: 1.55;
  font-weight: 600;
  color: var(--brand-ink);
}

.lookup-table {
  width: 100%;
  margin: 18px 0 0;
  border-collapse: collapse;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  font-size: 14px;
}
.lookup-table tr:nth-child(odd) { background: var(--paper-soft); }
.lookup-table th,
.lookup-table td {
  padding: 11px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.lookup-table tr:last-child th,
.lookup-table tr:last-child td { border-bottom: 0; }
.lookup-table th {
  width: 42%;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-muted);
  white-space: nowrap;
}
.lookup-table td {
  color: var(--ink);
  word-break: break-word;
}

.lookup-note {
  margin: 14px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-muted);
}

.lookup-empty {
  margin: 20px 0 0;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--paper-tint);
  border: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-dim);
  text-align: center;
}

/* On a narrow phone the two-column table wastes its width on labels. Stack it. */
@media (max-width: 460px) {
  .lookup-table th,
  .lookup-table td { display: block; width: auto; }
  .lookup-table th { border-bottom: 0; padding-bottom: 2px; }
  .lookup-table td { padding-top: 0; }
}

/* ---------- 24. PRINT ---------- */
/* People screenshot or print the confirmation. Give them a clean sheet. */
@media print {
  .reg-bg, .reg-top__back, .reg-foot, .outcome__actions, .stepper,
  .reg-already, .lookup-form { display: none; }
  body.reg { background: #fff; }
  .reg-panel { border: 0; box-shadow: none; padding: 0; }
  .reg-panel::before { display: none; }
}


/* ---------- the credit strip on the rail ----------
   Who is behind MOONSHOT, on the page where somebody is deciding whether to
   hand over their name and number. Three marks, three roles, one row.

   SIZED TO ONE HEIGHT AND NOT ONE WIDTH. CodeNicely's master is about 1.99:1
   and the other two are over 3.2:1, so a single width would draw CodeNicely
   half again as tall and the row would read as one big logo beside two small
   ones. The three widths below are worked back from a common 40px height -
   set by the co-host's mark, whose third line ("User Group") is the smallest
   type in the row and therefore the thing that decides how big all three are.

   BooDoo is a dark wordmark on transparent and the co-host's is dark ink, so
   both need something light behind them; the CodeNicely master carries its own
   white and is shown as supplied. */
.reg-rail__credits {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px 20px;
  margin-top: 22px; padding-top: 20px;
  border-top: 1px solid var(--line);
}
.reg-credit { display: flex; flex-direction: column; gap: 7px; }
.reg-credit__label {
  font-family: var(--font-mono);
  font-size: 9.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-muted);
}
.reg-credit__mark { display: block; }
.reg-credit__mark > img { display: block; width: 100%; height: auto; }

.reg-credit__mark--cn { width: 80px; }   /* 1.993:1 -> 40px tall */
.reg-credit__mark--bd { width: 133px; }  /* 3.333:1 -> 40px tall */
.reg-credit__mark--pt { width: 129px; }  /* 3.226:1 -> 40px tall */
/* MATCHED BY AREA, NOT BY HEIGHT - the one mark in this row that is. GimBooks
   is a small disc beside one very large word at 4.249:1, so at the row's 40px
   height its lettering would be about twice the size of CodeNicely's beside it
   and the two would read as a company and its junior partner. 116 x 27 is the
   same drawn area as CodeNicely's 80 x 40. Still true now that each stands
   under its own caption: they are neighbours in the row either way. */
.reg-credit__mark--gb { width: 116px; }  /* 4.249:1 -> 27px tall */

/* Our plate, for the two files that bring none. px and not %: percentage
   padding resolves against the containing block's width. */
/* Same reasoning as the header plate: both of these files are trimmed to their
   own ink and have no margin built in, so the card supplies all of it. */
.reg-credit__mark--plate {
  padding: 9px 12px;
  border-radius: 9px;
  background: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(9, 32, 22, .07),
              0 1px 2px rgba(9, 32, 22, .06);
}


/* ---------- the co-host, in the header ----------
   For the visitor who arrived by scanning a partner QR: the mark they came
   from, at the top of the page they landed on, so they can see they are in the
   right place before they start typing.

   Pushed against the brand rather than into the middle, with the actions
   staying hard right - .reg-top is a flex row and the actions block already
   carries margin-left:auto, so this sits next to the logo without either of
   them needing to know about the other. */
.reg-top__partner {
  display: flex; align-items: center; gap: 9px;
  padding-left: 14px;
  border-left: 1px solid var(--line);
  min-width: 0;
  /* .reg-top is space-between, which with three children would park this in
     the middle of the header on its own. The auto margin collapses the gap to
     its right instead, so brand and co-host read as one group on the left and
     the actions stay hard right. */
  margin-right: auto;
}
.reg-top__partner-label {
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
}
/* Our plate: the supplied master is a crop of a JPEG and carries opaque white,
   so the plate matches it at #FFFFFF rather than the usual near-white - four
   values of difference is enough to draw a faint rectangle inside the rounded
   one. */
.reg-top__partner-mark {
  display: block; flex: none;
  /* 88px, down from 97. THE PLATE IS PART OF THE OBJECT, so what a reader
     sees as "the logo" is the artwork PLUS its padding - and growing the
     padding without shrinking the artwork just makes the whole card bigger
     next to a 40px MOONSHOT mark. Trading a few pixels of wordmark for
     breathing room keeps the plate the same overall size and stops it
     looking crammed. */
  width: 88px;                 /* 3.226:1 -> 27px of artwork */
  /* GENEROUS, BECAUSE THIS FILE HAS NO MARGIN OF ITS OWN. It was trimmed
     tight to its ink before being committed, unlike BooDoo's supplied master
     which arrives with its own breathing room built in - so the plate is the
     ONLY thing keeping the wordmark off the edge, and it has to do the whole
     job. At 5x7 the "Chhattisgarh" line was all but touching the right edge.
     Proportionally in line with .brand-mark--plate in css/styles.css, which
     is the site's own convention for a mark that needs a card. */
  padding: 8px 11px;
  border-radius: 9px;
  background: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(9, 32, 22, .07);
}
.reg-top__partner-mark > img { display: block; width: 100%; height: auto; }

/* On a phone the label is the first thing to go - the logo carries the name
   already, and the header has a theme toggle and a back link to fit beside it. */
/* ON A PHONE THE PLATE WAS THE LOUDEST THING IN THE HEADER.
   White on near-black carries far more weight than its size suggests, so at
   84px the co-host's card outweighed the 40px MOONSHOT mark it sits next to -
   on the page that is meant to say MOONSHOT first. The label goes (the logo
   carries the name), the plate tightens, and the mark comes down to roughly
   the height of the mark beside it so the two read as a pair rather than as a
   logo with a billboard next to it. */
@media (max-width: 560px) {
  .reg-top__partner { padding-left: 9px; gap: 0; }
  .reg-top__partner-label { display: none; }
  /* The padding-to-artwork RATIO is what reads, not the padding. At 6px round
     a 19px mark the card is mostly white and the logo looks lost in it - the
     opposite failure to the cramped desktop one, from over-correcting it. */
  .reg-top__partner-mark {
    width: 70px;               /* 3.226:1 -> 22px of artwork */
    padding: 5px 7px;
    border-radius: 7px;
  }
}
@media (max-width: 380px) {
  .reg-top__partner { padding-left: 7px; }
  .reg-top__partner-mark { width: 62px; padding: 4px 6px; border-radius: 6px; }
}


/* ---------- a partner mark belongs to its own door ----------
   Every partner's mark is in the markup on every route; this is what decides
   which one a visitor actually sees.

   HIDDEN BY DEFAULT AND SHOWN BY ROUTE, not the other way round. The plain
   page - /register.html, the link on the landing page, anything that is not a
   partner path - is the ORIGINAL registration page with no co-host branding
   on it at all. A slug only ever adds its own mark, so a route that is not a
   partner cannot accidentally inherit somebody else's.

   :root[data-partner] is stamped by the inline script in <head>, before the
   first paint. Doing it in a module instead would paint the wrong logo and
   then remove it, and a co-host's mark flashing on and off a form is worse
   than never showing it. */
[data-for] { display: none; }
:root[data-partner="kugcg"] [data-for="kugcg"] { display: flex; }