/* Grassroots Classic 2026.
   Structure, spacing, type scale and control shapes are calibrated against the
   GRC marketing site (dev.grassrootsclub.co.nz) so the Classic reads as the same
   family. Palette stays the Classic sub brand: Leaf accents on Moss and Coal,
   near black body text on paper. */

/* ---------- fonts ---------- */
@font-face {
  font-family: "Founders Grotesk Condensed";
  src: url("./assets/fonts/founders-grotesk-condensed-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Founders Grotesk Condensed";
  src: url("./assets/fonts/founders-grotesk-condensed-medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Founders Grotesk Condensed";
  src: url("./assets/fonts/founders-grotesk-condensed-semibold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Founders Grotesk Condensed";
  src: url("./assets/fonts/founders-grotesk-condensed-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Tiempos Text";
  src: url("./assets/fonts/tiempos-text-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Tiempos Text";
  src: url("./assets/fonts/tiempos-text-semibold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Tiempos Text";
  src: url("./assets/fonts/tiempos-text-regular-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}

/* ---------- tokens (mirrors the marketing site) ---------- */
:root {
  --paper: #F2EDE3;
  --paper-2: #E9E2D2;
  --cream: #FFF9EE;
  --coal: #0B100D;
  --coal-2: #131A15;
  --ink: #131614;
  --ink-muted: #5C625B;
  --rule: rgba(19, 22, 20, 0.12);
  --coal-rule: rgba(255, 255, 255, 0.1);
  --moss: #1A4D2E;
  --moss-2: #246138;
  --leaf: #3CA673;
  --leaf-soft: #C5E0D2;
  /* The only leaf that clears 4.5:1 for small text on Moss or on the photo. */
  --leaf-hi: #5FC994;
  --alert: #A6301F;

  --display: "Founders Grotesk Condensed", "Impact", "Helvetica Neue Condensed",
    "Arial Narrow", sans-serif;
  --serif: "Tiempos Text", "Charter", "Georgia", serif;

  --t-section: clamp(36px, 5.4vw, 76px);
  --t-sub: clamp(26px, 3vw, 38px);
  --t-body-lg: clamp(17px, 1.3vw, 19px);
  --t-body: 17px;
  --t-utility: 13px;

  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 48px;
  --space-xl: 96px;

  --max: 1320px;
  --gutter: clamp(20px, 4vw, 48px);
  --section-pad: clamp(64px, 8vw, 112px);

  /* Radii come from Morgan's 2026-08-05 redesign: softer cards, softer panels,
     softer fields. The pill is unchanged. */
  --radius-pill: 999px;
  --radius-card: 14px;
  --radius-panel: 8px;
  --radius-input: 8px;
  /* Fields carry a slightly stronger hairline than section rules do. */
  --rule-field: rgba(19, 22, 20, 0.14);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--t-body);
  line-height: 1.55;
  overflow-x: hidden;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}
img, svg { max-width: 100%; display: block; }
/* [hidden] lives in the user agent sheet, so ANY author display rule beats it.
   .btn sets display:inline-flex, which is why the pre open hero CTA and the
   tapped waitlist button both stayed on screen after the JS set el.hidden. */
[hidden] { display: none !important; }
p { margin: 0 0 0.9em; max-width: 62ch; }
a { color: var(--moss); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--moss-2);
  outline-offset: 2px;
}
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.tnum { font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; }

/* ---------- type ---------- */
h1, h2, h3, legend, .display {
  font-family: var(--display);
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0;
}
.section-h { font-size: var(--t-section); margin: 0 0 var(--space-sm); }
.sub-h { font-size: var(--t-sub); margin: 0 0 var(--space-sm); }
.eyebrow {
  font-family: var(--display);
  font-size: var(--t-utility); font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--moss); margin: 0 0 var(--space-sm);
}
.lead { font-size: var(--t-body-lg); max-width: 56ch; }
section { padding: var(--section-pad) 0; }

/* ---------- brand bar ---------- */
.bar { background: var(--coal); color: #fff; }
.bar__inner {
  max-width: var(--max); margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 68px;
}
.wordmark { display: inline-flex; line-height: 0; color: #fff; }
.wordmark svg { height: 30px; width: auto; }
.bar__back {
  font-family: var(--display); font-size: var(--t-utility); font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--leaf-hi);
  text-decoration: none; display: inline-flex; align-items: center; min-height: 44px;
}
.bar__back:hover { text-decoration: underline; }
.bar--hero { background: transparent; position: relative; z-index: 3; }

/* ---------- hero ---------- */
/* Morgan's redesign makes the hero a full viewport panel. min-height, not
   height: a short landscape phone must be allowed to grow rather than clip the
   sign up button.

   The height unit is svh, NOT dvh. On iOS Safari the toolbars are always
   expanded at scroll position zero, so the small viewport IS the first paint
   view. dvh tracks the toolbars as they collapse and was resolving short on the
   first screen, which let the cream section underneath peek in at the bottom.
   svh is the floor that cannot do that. The 100vh line above it stays as the
   fallback for browsers that do not know the newer units. */
.hero {
  position: relative; padding: 0;
  background: var(--coal); isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column;
}
.hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;
  filter: grayscale(1) contrast(1.06) brightness(0.8);
}
/* Moss duotone: a moss plane multiplied into the greyscale photo. */
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: var(--moss); mix-blend-mode: multiply; opacity: 0.6;
}
/* Scrim weighted to the top, where the photo's ceiling and banners are bright. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom,
    rgba(9, 26, 17, 0.86) 0%,
    rgba(9, 26, 17, 0.56) 30%,
    rgba(9, 26, 17, 0.66) 58%,
    rgba(9, 26, 17, 0.95) 100%);
}
/* Everything inside the hero is measured in svh too, so the content composes
   against the same box the hero is sized by. Mixing vh in here would scale the
   rhythm off the toolbar-retracted height and push the button toward the fold.
   Each rule keeps its vh line first: an unknown unit inside clamp() invalidates
   the whole declaration, so the fallback has to be a separate declaration. */
.hero__inner {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--max); margin: 0 auto;
  padding: clamp(12px, 3vh, 64px) var(--gutter) clamp(14px, 4vh, 52px);
  padding: clamp(12px, 3svh, 64px) var(--gutter) clamp(14px, 4svh, 52px);
  color: #fff;
  display: flex; flex-direction: column; justify-content: center;
  flex: 1; min-height: 0;
}
/* The commissioned Classic logo is the h1. The alt text carries the heading. */
.hero__lockup { margin: 0 0 clamp(12px, 2.8vh, 28px); }
.hero__lockup { margin: 0 0 clamp(12px, 2.8svh, 28px); }
.hero__lockup img {
  width: clamp(240px, 52vw, 700px); max-width: 100%; height: auto;
  object-fit: contain; margin: 0 auto;
  max-height: 30vh;
  max-height: 30svh;
}
.hero__facts {
  list-style: none; padding: 0; margin: 0 0 clamp(14px, 3.5vh, 40px);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 4px;
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(15px, 2.2vw, 22px); font-weight: 500; letter-spacing: 0.08em;
  color: #fff;
}
.hero__facts { margin: 0 0 clamp(14px, 3.5svh, 40px); }
/* Pre open the CTA is hidden, so the gap that held it off the facts would sit
   there as dead space and pull the centred stack off centre. */
.hero__inner:has(.hero__cta[hidden]) .hero__facts { margin-bottom: 0; }
.hero__price { color: var(--leaf-hi); }
.hero__cta { align-self: center; min-height: clamp(48px, 7vh, 56px); }
.hero__cta { min-height: clamp(48px, 7svh, 56px); }

/* ---------- buttons (marketing site pill) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 15px 26px;
  font-family: var(--display); font-size: var(--t-utility); font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  border: 0; border-radius: var(--radius-pill); cursor: pointer;
  text-decoration: none; text-align: center;
  background: var(--leaf); color: var(--coal);
  transition: background 120ms linear;
}
.btn:hover { background: #4FBB86; }
.btn:disabled { background: #7FA893; color: #24312A; cursor: not-allowed; }
.btn--lg { min-height: 56px; padding: 18px 34px; font-size: 15px; }
.btn--ghost {
  background: transparent; color: var(--moss);
  box-shadow: inset 0 0 0 2px var(--moss);
}
.btn--ghost:hover { background: rgba(26, 77, 46, 0.08); }
.btn--block { width: 100%; }

/* ---------- the Classic section ---------- */
/* Morgan's redesign centres the whole section. Paragraphs keep their measure
   but sit centred in the column instead of ragging off the left gutter. */
.classic { background: var(--paper); }
.classic .wrap { text-align: center; }
.classic p { margin-left: auto; margin-right: auto; }
.classic__intro { margin-bottom: 72px; }
.block-h {
  font-family: var(--display); text-transform: uppercase; font-weight: 700;
  font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -0.005em; line-height: 1;
  margin: 0 0 var(--space-md); padding-top: var(--space-md);
  border-top: 1px solid var(--rule);
}

/* ---------- schedule board ---------- */
.board { list-style: none; margin: 0 auto 72px; padding: 0; max-width: 520px; }
.board li {
  display: grid; grid-template-columns: 84px 1fr; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--rule); align-items: baseline;
}
@media (min-width: 560px) { .board li { grid-template-columns: 110px 1fr; gap: 18px; } }
.board time {
  font-family: var(--display); font-weight: 700; font-size: 17px;
  letter-spacing: 0.04em; color: var(--moss); text-transform: uppercase;
  text-align: right;
}
@media (min-width: 560px) { .board time { font-size: 19px; } }
.board-what {
  font-family: var(--display); font-size: 20px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.01em; text-align: left;
}
@media (min-width: 560px) { .board-what { font-size: 22px; } }

/* ---------- divisions grid ---------- */
/* Morgan's redesign pairs the divisions into two sex columns at every width,
   headed once at the top, rather than six free standing cards. */
.grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; margin: 0 0 72px; padding: 0; list-style: none;
}
.grid > li { display: flex; }
.grid .card { flex: 1 1 auto; min-width: 0; }
/* Overrides the flex display the grid puts on its cells. */
.grid > li.grid__head {
  display: block; padding: 0 0 4px;
  font-family: var(--display); font-size: var(--t-utility); font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-muted);
  text-align: center;
}

.card {
  position: relative; display: flex; flex-direction: column; align-items: center;
  min-height: 168px; padding: 18px 16px 16px;
  background: var(--cream); border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 2px rgba(19, 22, 20, 0.04);
  text-align: center;
}
/* Two columns at 320 leaves about 100px of card interior, and INTERMEDIATE at
   18px does not fit it, so the clamp floor drops far enough to keep the longest
   division name on one line rather than breaking it mid word. */
.card__name {
  font-family: var(--display); text-transform: uppercase; font-weight: 700;
  font-size: clamp(15px, 4.7vw, 32px); line-height: 1; letter-spacing: -0.01em;
  margin: 0 0 auto; overflow-wrap: anywhere;
}
.card__count {
  font-family: var(--display); font-size: 15px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--moss);
  margin: var(--space-sm) 0 12px; min-height: 22px;
}
.card__count.is-low { color: var(--alert); }
.card__count.is-hidden { visibility: hidden; }
/* Morgan's card action is an auto width pill, not a full bleed bar. Held at 44px
   so it still clears the minimum tap target. */
.card .btn {
  width: auto; align-self: center;
  min-height: 44px; padding: 11px 20px; font-size: 12px; letter-spacing: 0.16em;
}
.card--full { background: var(--paper-2); }
.card .waitlist-slot { width: 100%; }

/* ---------- card expansion: the pairs already entered ---------- */
/* Native details. The Enter pill is the entry affordance, the summary is the
   expand affordance, so the two taps never fight over the same box. */
.card__teams { margin-top: 12px; width: 100%; }
.card__teams > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding-top: 12px; border-top: 1px solid var(--rule);
  font-family: var(--display); font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--moss);
  min-height: 44px;
}
.card__teams > summary::-webkit-details-marker { display: none; }
.card__teams > summary::marker { content: ""; }
.card__teams > summary:hover { color: var(--moss-2); }
.team-list {
  list-style: none; margin: 10px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px; text-align: center;
}
/* A 60 character team name with no spaces in it is a legal entry, so it has to
   break rather than push the card wider than the column. */
.team-list li {
  font-family: var(--serif); font-size: 15px; line-height: 1.35;
  overflow-wrap: anywhere; min-width: 0;
}
.team-empty { margin: 10px 0 0; font-size: 15px; color: var(--ink-muted); }

.skeleton {
  display: inline-block; height: 14px; width: 92px; border-radius: 2px;
  background: linear-gradient(90deg, var(--paper-2), var(--cream), var(--paper-2));
  background-size: 200% 100%; animation: shimmer 1.3s linear infinite;
}
.skeleton--row { display: block; width: 100%; height: 40px; margin-bottom: 8px; }
@keyframes shimmer { to { background-position: -200% 0; } }

.grid-note { margin: var(--space-md) 0 0; color: var(--ink-muted); }
.board-intro { margin: 0 0 var(--space-md); }
.waitlist-form { margin-top: 10px; display: grid; gap: 8px; }
.waitlist-form input {
  width: 100%; min-height: 46px; padding: 10px 12px;
  border: 1px solid var(--rule); border-radius: var(--radius-input);
  font-family: var(--serif); font-size: 16px; background: #fff; color: var(--ink);
}
.waitlist-form label {
  font-family: var(--display); font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted);
}
.waitlist-done { font-size: 16px; color: var(--moss); font-weight: 600; margin: 10px 0 0; }

/* ---------- form ---------- */
/* Morgan's redesign centres the form column and its fields. */
.form-wrap > * { max-width: 620px; margin-left: auto; margin-right: auto; }
.form-wrap { text-align: center; }
.form-grid { display: grid; gap: var(--space-md); }
.field { display: grid; gap: 6px; min-width: 0; }
.field label {
  font-family: var(--display); font-size: var(--t-utility); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted);
}
.field .hint { font-size: 16px; color: var(--ink-muted); }
.field input, .field select {
  width: 100%; min-height: 48px; padding: 11px 14px; text-align: center;
  font-family: var(--serif); font-size: 17px; color: var(--ink);
  background: var(--cream); border: 1px solid var(--rule-field);
  border-radius: var(--radius-input); appearance: none;
}
.field select {
  text-align: center; text-align-last: center;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.field input[aria-invalid="true"], .field select[aria-invalid="true"] {
  border-color: var(--alert); border-width: 2px;
}
.field-error { font-size: 16px; color: var(--alert); font-weight: 600; }
.fieldset { border: 0; padding: 0; margin: 0; display: block; }
.fieldset > * + * { margin-top: var(--space-md); }
.fieldset > *:not(legend) { clear: both; }
/* A background line, not a border: a legend cuts a fieldset border in half.
   The float keeps the legend inside the box instead of straddling its top. */
.fieldset + .fieldset {
  padding-top: var(--space-lg);
  background-image: linear-gradient(var(--rule), var(--rule));
  background-size: 100% 1px; background-repeat: no-repeat; background-position: top left;
}
.fieldset legend {
  float: left; width: 100%;
  font-size: var(--t-sub); margin: 0 0 var(--space-md);
  text-align: center; color: var(--moss);
}
/* Two up from 320 in Morgan's redesign: division and pair are short enough. */
.two-up { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (min-width: 560px) { .two-up { gap: var(--space-md); } }

/* Ticks stay left aligned inside a centred column so the box and its sentence
   read as one line rather than drifting apart. */
.check {
  display: grid; grid-template-columns: 26px 1fr; gap: 12px;
  align-items: start; padding: 9px 0; min-height: 44px; cursor: pointer;
  width: 100%; max-width: 420px; margin: 0 auto; text-align: left;
}
.check input[type="checkbox"] {
  width: 26px; height: 26px; margin: 2px 0 0; accent-color: var(--moss);
}
.check span { font-size: 16px; line-height: 1.45; }

/* Morgan centred the whole agreement. Headings follow him, the body does not:
   nine paragraphs of legal prose ragged on both edges is the one place on these
   pages where the centred rhythm costs more than it buys. */
.waiver {
  max-height: 280px; overflow-y: auto; padding: 18px 20px;
  background: #fff; border: 1px solid var(--rule-field);
  border-radius: var(--radius-panel);
  font-size: 16px; line-height: 1.55; text-align: left;
}
.waiver h3, .waiver h4 { text-align: center; }
.waiver h3 { font-size: 20px; margin: 0 0 10px; }
.waiver h4 {
  font-family: var(--display); font-size: 14px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--moss); margin: 20px 0 6px;
  font-weight: 700; line-height: 1.2;
}
.waiver p { max-width: none; }
.waiver strong { font-weight: 600; }

/* Morgan folds both the collection statement and the policy recap into tinted
   disclosure panels, so the form reads short and the detail is one tap away.
   The wording inside each is unchanged. */
.panel {
  font-size: 16px; background: var(--paper-2); color: var(--ink-muted);
  border-left: 3px solid var(--moss); padding: 14px 18px;
  border-radius: var(--radius-panel); text-align: left;
}
.panel > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-family: var(--display); font-size: var(--t-utility); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--moss);
  min-height: 44px;
}
.panel > summary::-webkit-details-marker { display: none; }
.panel > summary::marker { content: ""; }
.panel > summary:hover { color: var(--moss-2); }
.panel .chev { font-family: var(--display); font-size: 15px; line-height: 1; }
.panel[open] .chev { transform: rotate(45deg); }
.panel__body { padding-top: 12px; }
.panel p { max-width: none; margin-left: 0; margin-right: 0; }
.panel__body p:last-child { margin-bottom: 0; }
.policy-recap dl { margin: 0; }
.policy-recap dt {
  font-family: var(--display); font-size: var(--t-utility); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--moss);
  margin-top: 14px;
}
.policy-recap dt:first-of-type { margin-top: 0; }
.policy-recap dd { margin: 4px 0 0; }

.banner {
  padding: 16px 18px; border-radius: var(--radius-panel); font-size: 16px;
  margin-bottom: var(--space-md); text-align: left;
  border-left: 3px solid var(--moss); background: var(--paper-2);
}
.banner p { margin-left: 0; margin-right: 0; }
.banner--warn { border-left-color: var(--alert); background: #FBEDEA; color: #6E1F13; }
.banner--good { border-left-color: var(--leaf); background: #E6F4EC; }
.banner strong { font-weight: 600; }
.banner p:last-child { margin-bottom: 0; }

.spinner {
  width: 16px; height: 16px; margin-right: 10px; border-radius: 50%;
  border: 2px solid rgba(11, 16, 13, 0.35); border-top-color: var(--coal);
  animation: spin 700ms linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- page head (register and partner) ---------- */
/* Morgan's redesign folds the brand bar into one moss block with the Classic
   logo in it, and centres the headline under it. */
.page-head { background: var(--moss); color: #fff; padding: 0 0 56px; }
.page-head__bar {
  max-width: var(--max); margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 68px;
}
.page-head__logo { display: inline-flex; line-height: 0; }
.page-head__logo img { height: 51px; width: auto; }
.page-head__back {
  font-family: var(--display); font-size: 15px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: #fff;
  text-decoration: none; display: inline-flex; align-items: center; min-height: 44px;
}
.page-head__back:hover { color: #fff; text-decoration: underline; }
.page-head__title {
  width: 100%; max-width: var(--max); margin: 0 auto;
  padding: var(--space-md) var(--gutter) 0; text-align: center;
}
.page-head__title p {
  font-family: var(--serif); font-style: italic; font-size: 20px;
  color: rgba(255, 255, 255, 0.86); margin: 0 auto; max-width: 48ch;
}

.partner-head h1 { font-size: clamp(32px, 7.5vw, 56px); margin: 0 0 var(--space-xs); }
.partner-body { padding: var(--space-lg) 0 var(--space-xl); }
.state-msg { max-width: 46ch; margin: 0 auto; }

.register-head h1 { font-size: clamp(34px, 8vw, 64px); margin: 0 0 var(--space-xs); }
.register-body { padding: var(--space-lg) 0 var(--space-xl); }