/* The judges' landing page. The app's "Steel" look (d3a) with a fall
   season over it: a dusky autumn evening, or warm parchment in light,
   tangerine where you act, the state spectrum line, drifting leaves in
   the hero and the mark in amber, rust and sky. Dark first. The light
   theme follows prefers-color-scheme through light-dark(). */

@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/signal-body.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans Fallback";
  src: local("Arial"), local("Liberation Sans"), local("Helvetica");
  ascent-override: 95.18%;
  descent-override: 24.53%;
  line-gap-override: 0%;
  size-adjust: 101.92%;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/signal-display.woff2") format("woff2");
  font-weight: 500 800;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Fallback";
  src: local("Arial Bold"), local("Liberation Sans Bold"), local("Helvetica Bold");
  ascent-override: 101.24%;
  descent-override: 29.39%;
  line-gap-override: 0%;
  size-adjust: 91.86%;
}
@font-face {
  font-family: "Martian Mono";
  src: url("fonts/signal-mono.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Martian Fallback";
  src: local("Courier New"), local("Liberation Mono"), local("Menlo");
  ascent-override: 92.32%;
  descent-override: 18.46%;
  line-gap-override: 0%;
  size-adjust: 108.32%;
}

:root {
  color-scheme: dark light;

  --font: "Instrument Sans", "Instrument Sans Fallback", ui-sans-serif, sans-serif;
  --display: "Bricolage Grotesque", "Bricolage Fallback", var(--font);
  --mono: "Martian Mono", "Martian Fallback", ui-monospace, monospace;

  /* Fall over Steel. The graphite warms toward a dusky autumn evening, and
     the light theme is warm parchment. Steel blue stays as a cool autumn
     sky. */
  --bg: light-dark(#f5eee2, #110f0e);
  --surface: light-dark(#fffaf2, #1a1715);
  --surface-2: light-dark(#efe6d6, #221e1b);
  --surface-3: light-dark(#e4d8c4, #2c2723);
  --hairline: light-dark(rgb(60 40 20 / 0.11), rgb(240 220 195 / 0.09));
  --hairline-strong: light-dark(rgb(60 40 20 / 0.22), rgb(240 220 195 / 0.18));
  --text: light-dark(#1d1814, #f3eee8);
  --text-2: light-dark(#5d5246, #b0a69b);
  --steel: light-dark(#2f5a86, #93b6d8);
  --rim: light-dark(rgb(255 255 255 / 0.85), rgb(240 200 150 / 0.16));
  --pane-line: light-dark(rgb(90 60 30 / 0.16), rgb(240 210 170 / 0.14));
  --sky: light-dark(rgb(47 90 134 / 0.08), rgb(120 160 205 / 0.12));
  --sky-2: light-dark(rgb(176 122 30 / 0.07), rgb(233 169 58 / 0.07));
  --golden: light-dark(rgb(233 150 58 / 0.22), rgb(224 112 43 / 0.2));

  /* The season's inks. Maple, burnt orange, amber gold, deep ochre and a
     muted pine for the leaves, each with a text tone that reads at 4.5:1. */
  --maple: light-dark(#b8361f, #d9502f);
  --amber: light-dark(#d99a26, #e9a93a);
  --ochre: light-dark(#a8741c, #c08a2c);
  --pine: light-dark(#4f6b55, #6f8f74);
  --maple-text: light-dark(#9c2c18, #f08a6c);
  --amber-text: light-dark(#7a5300, #f2c46a);
  --ochre-text: light-dark(#7a5410, #dcae5c);
  --pine-text: light-dark(#3d5a44, #a3c6aa);

  --accent: light-dark(#ff5a1f, #ff6b2c);
  --accent-hover: light-dark(#ff7340, #ff8752);
  --accent-text: light-dark(#a33405, #ff9466);
  --on-accent: #170600;
  --glow: 0 0 0 1px light-dark(rgb(255 90 31 / 0), rgb(255 107 44 / 0.4)), 0 10px 26px -10px light-dark(rgb(255 90 31 / 0.7), rgb(255 107 44 / 0.75));

  /* The app's own state hues, unchanged, so the schedule reads the same. */
  --st-confirmed-fg: light-dark(#06733a, #4be39a);
  --st-confirmed-bg: light-dark(#dcf5e6, #0e2a1f);
  --st-offered-fg: light-dark(#1f4fd8, #84b3ff);
  --st-offered-bg: light-dark(#e3ebff, #12213d);
  --st-requested-fg: light-dark(#7a5300, #ffd34d);
  --st-requested-bg: light-dark(#fdf0c4, #2b2410);
  --st-move-fg: light-dark(#ad1f69, #ff8cc6);
  --st-canceled-fg: light-dark(#6b5641, #d2c1ad);
  --st-canceled-bg: light-dark(#efe8df, #29241e);
  --st-clash-fg: light-dark(#c41230, #ff6470);
  --st-clash-bg: light-dark(#fde0e3, #3a1218);
  --st-calendar-fg: light-dark(#086b78, #52dbeb);
  --st-calendar-bg: light-dark(#d9f3f6, #0b2a30);

  --spectrum: linear-gradient(90deg,
    light-dark(#10a85a, #4be39a) 0 14.3%, light-dark(#2f63f0, #84b3ff) 14.3% 28.6%,
    light-dark(#f2b300, #ffd34d) 28.6% 42.9%, light-dark(#e0368f, #ff8cc6) 42.9% 57.1%,
    light-dark(#a08a72, #d2c1ad) 57.1% 71.4%, light-dark(#e3263f, #ff6470) 71.4% 85.7%,
    light-dark(#0aa3b5, #52dbeb) 85.7%);
  /* The aurora, retuned for the season: amber, rust and sky. */
  --aurora-fill: linear-gradient(125deg, #f6c05a 0%, #e0773a 50%, #93b6d8 100%);

  --elev: inset 0 1px 0 var(--rim), 0 0 0 1px var(--pane-line), 0 30px 70px -24px light-dark(rgb(60 35 15 / 0.24), rgb(0 0 0 / 0.75));
  --radius: 18px;
  --wrap: 1120px;
  --pad: clamp(20px, 5vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .42 0 0 0 0 .3 0 0 0 .45 -.19'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background:
    var(--grain) 0 0 / 160px 160px repeat,
    radial-gradient(60rem 40rem at 0% 0%, var(--sky), transparent 70%),
    radial-gradient(50rem 36rem at 100% 10%, var(--sky-2), transparent 70%),
    var(--bg);
}
@media (prefers-color-scheme: light) { html { --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .42 0 0 0 0 .3 0 0 0 .63 -.27'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } }
html { background-repeat: repeat, no-repeat, no-repeat; }
body {
  margin: 0; color: var(--text); font: 400 1rem/1.6 var(--font);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
/* Paper grain, CSS only: a 160 px noise tile, the top layer of the page
   background, so it scrolls with the page and needs no layer of its own. */
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--display); line-height: 1.08; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: var(--accent-text); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid light-dark(#2f5f93, #ffa070); outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(100% - 2 * var(--pad), var(--wrap)); margin-inline: auto; }
.skip { position: absolute; left: 12px; top: -60px; padding: 8px 14px; border-radius: 8px; background: var(--surface); color: var(--text); z-index: 10; }
.skip:focus { top: 12px; }

/* The spectrum: the seven appointment states in order, one line. */
.spectrum { display: block; height: 3px; background: var(--spectrum); }

/* Top bar */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; font: 760 1.25rem/1 var(--display); letter-spacing: -0.02em; }
.mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--aurora-fill); color: #140a04; box-shadow: 0 10px 28px -10px light-dark(rgb(200 100 40 / 0.5), rgb(224 119 58 / 0.55)), inset 0 1px 0 rgb(255 255 255 / 0.5); }
.top nav { display: flex; align-items: center; gap: 8px; }

/* Buttons: tangerine only for the one thing to do. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px;
  border-radius: 999px; border: 1px solid var(--hairline-strong); background: transparent; color: var(--text);
  font: 650 0.9375rem/1 var(--font); text-decoration: none; white-space: nowrap;
  transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.btn:hover { background: var(--surface-2); }
.btn:active { transform: translateY(1px); }
.btn-act { background: var(--accent); border-color: transparent; color: var(--on-accent); box-shadow: var(--glow); }
.btn-act:hover { background: var(--accent-hover); }
.btn-sm { min-height: 44px; padding: 0 18px; }
.btn svg { flex: none; }

/* The season: a low golden-hour glow behind the hero, and up to eight
   leaves drifting through it. Transform and opacity only, paused under
   reduced motion and while the hero is off screen. */
.season { position: relative; overflow: clip; isolation: isolate; }
.season::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; mask-image: linear-gradient(to bottom, black 55%, transparent); background: radial-gradient(70% 60% at 30% 85%, var(--golden), transparent 70%), radial-gradient(40% 45% at 85% 75%, var(--golden), transparent 70%); }
.season > .wrap { position: relative; z-index: 1; }
.leaves { position: absolute; inset: 0; pointer-events: none; --fall: 860px; }
.leaf {
  position: absolute; top: -48px; left: var(--x); width: var(--s); height: var(--s); color: var(--c); opacity: 0;
  animation: leaf-fall var(--d) linear var(--delay) infinite; will-change: transform, opacity;
}
@keyframes leaf-fall {
  0% { transform: translate3d(0, 0, 0) rotate(var(--r0)); opacity: 0; }
  10% { opacity: var(--o); }
  50% { transform: translate3d(var(--sway), calc(var(--fall) * 0.5), 0) rotate(calc(var(--r0) + 150deg)); }
  90% { opacity: var(--o); }
  100% { transform: translate3d(calc(var(--sway) * -0.4), var(--fall), 0) rotate(calc(var(--r0) + 300deg)); opacity: 0; }
}
.season.is-off .leaf { animation-play-state: paused; }
/* At 1360 px and up the leaves keep to the side gutters and the gap
   between the headline and the schedule, so they never cross the text.
   Narrower, where text spans the page, four faint ones drift behind it,
   light enough that the text over them still reads at 4.5:1. */
@media (max-width: 1359px) {
  .leaf { --o: 0.22 !important; }
  .leaf:nth-child(2), .leaf:nth-child(3), .leaf:nth-child(5), .leaf:nth-child(7) { display: none; }
}
@media (max-width: 959px) { .leaves { --fall: 1200px; } }

/* Hero */
.hero { display: grid; gap: 48px; align-items: center; padding-block: clamp(32px, 7vw, 88px) clamp(48px, 8vw, 104px); }
.eyebrow { font: 600 0.75rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.hero h1 { margin-top: 18px; font-size: clamp(2.5rem, 7vw, 4.75rem); font-weight: 760; letter-spacing: -0.025em; line-height: 1; max-width: 11ch; }
.lede { margin-top: 22px; max-width: 34rem; font-size: clamp(1.0625rem, 1.6vw, 1.25rem); line-height: 1.55; color: var(--text-2); }
.lede strong { color: var(--text); font-weight: 600; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
@media (min-width: 960px) { .hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } }

/* The schedule card: a drawing of the app's agenda, in HTML. */
.pane {
  position: relative; overflow: hidden; border-radius: var(--radius);
  background: linear-gradient(to bottom, light-dark(#fffcf6, #231f1c), light-dark(#fffaf2, #1a1715) 220px);
  box-shadow: var(--elev);
}
.pane::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--spectrum); }
.pane { box-shadow: inset 0 1px 0 var(--rim), 0 0 0 1px var(--pane-line), 0 24px 48px -28px light-dark(rgb(20 30 42 / 0.3), rgb(0 0 0 / 0.6)); }
.pane-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 22px 12px; }
.pane-head b { font: 740 1.0625rem/1.2 var(--display); letter-spacing: -0.02em; }
.pane-head span { font-size: 0.8125rem; color: var(--text-2); }
.day { padding: 8px 22px 6px; font: 600 0.6875rem/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); border-top: 1px solid var(--hairline); background: light-dark(#f8f1e5, #1d1a17); }
.slot { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 14px; padding: 12px 22px; }
.slot + .slot { border-top: 1px solid var(--hairline); }
.slot time { font: 600 0.75rem/1.6 var(--mono); text-align: right; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.slot-body { display: grid; gap: 6px; padding-left: 14px; border-left: 4px solid var(--edge); border-radius: 4px; }
.slot-body b { font-weight: 600; font-size: 0.9375rem; line-height: 1.35; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 0 9px; border-radius: 999px; font: 650 0.75rem/22px var(--font); color: var(--fg); background: var(--bg-tag); }
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: currentColor; box-shadow: 0 0 6px light-dark(transparent, currentColor); }
.is-confirmed { --edge: var(--st-confirmed-fg); --fg: var(--st-confirmed-fg); --bg-tag: var(--st-confirmed-bg); }
.is-offered { --edge: var(--st-offered-fg); --fg: var(--st-offered-fg); --bg-tag: var(--st-offered-bg); }
.is-canceled { --edge: var(--st-canceled-fg); --fg: var(--st-canceled-fg); --bg-tag: var(--st-canceled-bg); }
.is-calendar { --edge: var(--st-calendar-fg); --fg: var(--st-calendar-fg); --bg-tag: var(--st-calendar-bg); }
.is-clash { --fg: var(--st-clash-fg); --bg-tag: var(--st-clash-bg); }
.slot.clashes { background: linear-gradient(90deg, light-dark(rgb(196 18 48 / 0.07), rgb(255 100 112 / 0.08)), transparent 70%); }
.slot.mine .slot-body { border-left-style: dashed; border-left-width: 2px; }
.reply { margin: 10px 14px 14px; padding: 16px; border-radius: 14px; background: light-dark(#f1e8d9, #221e1b); display: grid; gap: 12px; }
.reply-k { font: 600 0.6875rem/1 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-2); }
.reply-t { font-weight: 600; }
.reply-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.reply-row small { color: var(--st-confirmed-fg); font-weight: 600; font-size: 0.8125rem; }
.fake-btn { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 650; font-size: 0.875rem; box-shadow: var(--glow); }

/* Sections */
section { padding-block: clamp(56px, 8vw, 96px); }
.k { font: 600 0.75rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel); }
h2 { margin-top: 14px; font-size: clamp(1.875rem, 4.4vw, 3rem); font-weight: 760; letter-spacing: -0.03em; max-width: 18ch; }
.sub { margin-top: 16px; max-width: 40rem; color: var(--text-2); font-size: 1.0625rem; }

/* The video */
.film { padding-top: 0; }
.frame { margin-top: 28px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--elev); background: #000; }
.frame video { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; background: #000; }
.film figcaption { margin-top: 14px; color: var(--text-2); font-size: 0.875rem; }

/* The problem */
.problem ol { display: grid; gap: 4px; margin-top: 28px; counter-reset: p; }
.problem li { counter-increment: p; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 18px 0; border-top: 1px solid var(--hairline); font: 650 clamp(1.25rem, 2.6vw, 1.75rem)/1.3 var(--display); letter-spacing: -0.02em; }
.problem li::before { content: counter(p, decimal-leading-zero); font: 600 0.8125rem/1 var(--mono); color: var(--text-2); letter-spacing: 0; }

/* How it works: four steps, each topped by its own state hue. */
.steps { display: grid; gap: 16px; margin-top: 36px; counter-reset: s; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.step { counter-increment: s; position: relative; display: grid; align-content: start; gap: 10px; padding: 26px 22px 24px; border-radius: var(--radius); background: var(--surface); box-shadow: inset 0 1px 0 var(--rim), 0 0 0 1px var(--hairline); overflow: hidden; }
.step::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--hue); }
.step::after { content: counter(s, decimal-leading-zero); order: -1; font: 600 0.75rem/1 var(--mono); color: var(--hue-text); }
.step h3 { display: flex; align-items: center; gap: 8px; font-size: 1.25rem; font-weight: 740; letter-spacing: -0.02em; }
.leaf-b { flex: none; color: var(--hue); }
.step p { color: var(--text-2); font-size: 0.9375rem; }
.steps > :nth-child(1) { --hue: var(--maple); --hue-text: var(--maple-text); }
.steps > :nth-child(2) { --hue: var(--amber); --hue-text: var(--amber-text); }
.steps > :nth-child(3) { --hue: var(--accent); --hue-text: var(--accent-text); }
.steps > :nth-child(4) { --hue: var(--pine); --hue-text: var(--pine-text); }

.rules { display: grid; gap: 0 40px; margin-top: 40px; }
@media (min-width: 820px) { .rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rules li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 18px 0; border-top: 1px solid var(--hairline); }
.rules li svg { margin-top: 3px; color: var(--ochre-text); }
.rules b { display: block; font-weight: 650; }
.rules span { color: var(--text-2); font-size: 0.9375rem; }

/* Built with Meta */
.meta { display: grid; gap: 16px; margin-top: 36px; }
@media (min-width: 900px) { .meta { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.meta li { display: grid; align-content: start; gap: 10px; padding: 26px 24px; border-radius: var(--radius); background: var(--surface); box-shadow: inset 0 1px 0 var(--rim), 0 0 0 1px var(--hairline); }
.meta .what { font: 600 0.75rem/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--steel); }
.meta h3 { font-size: 1.5rem; font-weight: 760; letter-spacing: -0.025em; }
.meta p { color: var(--text-2); font-size: 0.9375rem; }

/* For judges */
.judges-grid { display: grid; gap: 16px; margin-top: 36px; }
@media (min-width: 900px) { .judges-grid { grid-template-columns: 1.1fr 1fr 1fr; } }
.card { padding: 26px 24px; border-radius: var(--radius); background: var(--surface); box-shadow: inset 0 1px 0 var(--rim), 0 0 0 1px var(--hairline); }
.card h3 { font-size: 1.25rem; font-weight: 740; letter-spacing: -0.02em; margin-bottom: 14px; }
.card li { padding: 10px 0; border-top: 1px solid var(--hairline); color: var(--text-2); font-size: 0.9375rem; }
.card li b { color: var(--text); font-weight: 600; }
.access { position: relative; overflow: hidden; box-shadow: var(--elev); }
.access::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--spectrum); }
.access p { color: var(--text-2); font-size: 0.9375rem; }
.access p + p { margin-top: 12px; }
.code { margin: 16px 0; padding: 14px 16px; border-radius: 12px; border: 1px dashed var(--hairline-strong); background: var(--surface-2); font: 500 0.8125rem/1.5 var(--mono); color: var(--text); overflow-wrap: anywhere; }
.access .btn { margin-top: 18px; }

/* Footer */
footer { padding-block: 40px 56px; border-top: 1px solid var(--hairline); color: var(--text-2); font-size: 0.875rem; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; }
footer p:first-child { color: var(--amber-text); font-weight: 600; }
footer a { color: var(--text); }

/* Coming soon: the status beside the eyebrow. */
.eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.soon { display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 999px; line-height: 28px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--hairline-strong); color: var(--amber-text); }
.soon-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 3px light-dark(rgb(217 154 38 / 0.2), rgb(233 169 58 / 0.22)); }
.lede-2 { margin-top: 14px; font-size: clamp(1rem, 1.4vw, 1.0625rem); }
.trust { padding-top: 0; }
.trust .rules { margin-top: 28px; }

/* The waitlist. */
.waitlist-grid { display: grid; gap: 32px; align-items: start; }
@media (min-width: 900px) { .waitlist-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; } }
.next { display: grid; gap: 0; margin-top: 28px; }
.next li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-top: 1px solid var(--hairline); color: var(--text-2); }
.next li::before { content: ""; width: 8px; height: 8px; margin-top: 9px; border-radius: 2px; background: var(--amber); transform: rotate(45deg); }
.form-card { position: relative; overflow: hidden; padding: 30px 28px 26px; box-shadow: var(--elev); }
.form-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--spectrum); }
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 7px; }
.field label { font-weight: 600; font-size: 0.9375rem; }
.opt { margin-left: 4px; font: 500 0.6875rem/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-2); }
.form input[type=email], .form input[type=text] {
  width: 100%; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--hairline-strong);
  background: var(--bg); color: var(--text); font: 400 1rem/1.4 var(--font);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.form input:hover { border-color: var(--text-2); }
.form input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px light-dark(rgb(255 90 31 / 0.18), rgb(255 107 44 / 0.25)); }
.form input[aria-invalid=true] { border-color: var(--st-clash-fg); }
.hint { font-size: 0.8125rem; color: var(--text-2); }
.field-error { font-size: 0.875rem; font-weight: 600; color: var(--st-clash-fg); }
.field-error:empty, .status:empty { display: none; }
.tick { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; cursor: pointer; font-size: 0.9375rem; }
.tick input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; }
.form .btn { justify-self: start; min-width: 200px; }
.form .btn:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
.form .btn[aria-busy=true] { cursor: progress; opacity: 0.8; }
.status { padding: 12px 14px; border-radius: 12px; font-size: 0.9375rem; font-weight: 600; }
.status[data-kind=error] { background: var(--st-clash-bg); color: var(--st-clash-fg); }
.status[data-kind=busy] { background: var(--surface-2); color: var(--text-2); }
.privacy-line { font-size: 0.8125rem; color: var(--text-2); }
.nojs { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); font-size: 0.9375rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.done { display: grid; justify-items: start; gap: 12px; padding: 12px 0 6px; outline: none; }
.done-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--st-confirmed-bg); color: var(--st-confirmed-fg); }
.done h3 { font-size: 1.5rem; font-weight: 760; letter-spacing: -0.02em; }
.done p { color: var(--text-2); }

/* The privacy page. */
.prose { max-width: 720px; padding-block: clamp(32px, 6vw, 72px) clamp(48px, 8vw, 96px); }
.prose h1 { margin-top: 14px; font-size: clamp(2.25rem, 6vw, 3.5rem); font-weight: 760; letter-spacing: -0.03em; }
.prose .lede { margin-top: 16px; }
.prose h2 { margin-top: 40px; font-size: 1.5rem; max-width: none; }
.prose p, .prose ul { margin-top: 12px; color: var(--text-2); }
.prose ul { display: grid; gap: 6px; padding-left: 20px; list-style: disc; }
.prose li::marker { color: var(--ochre); }
.prose .back { margin-top: 40px; }
footer .links { display: flex; flex-wrap: wrap; gap: 8px 20px; }

@media (max-width: 559px) {
  .top nav .btn-ghost { display: none; }
  .actions .btn { flex: 1 1 auto; }
  .slot { grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding-inline: 16px; }
  .pane-head, .day { padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
  .leaf { animation-play-state: paused; }
}
@media (forced-colors: active) {
  .spectrum, .pane::before, .access::before, .step::before { background: CanvasText; }
  .leaves { display: none; }
  html { --grain: none; }
}