/* MateClar landing page: a scroll story told on an exam sheet.
   Colors and sizes in :root. Never red: errors are amber. Never yellow text on white. */

@font-face {
  font-family: 'MC Exam';
  src: url('/fonts/tinos-latin.woff2') format('woff2');
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0102-0103, U+015E-0163, U+0218-021B, U+0394, U+03B1,
    U+03C0, U+2010-2033, U+2070-209F, U+2102, U+2115, U+211A, U+211D, U+2124, U+2190-2193, U+2206,
    U+2212, U+2215, U+2219, U+221A, U+221E, U+2229, U+2248, U+2260, U+2264-2265;
}
@font-face {
  font-family: 'MC Exam';
  src: url('/fonts/tinos-cyrillic.woff2') format('woff2');
  font-style: normal;
  font-display: swap;
  unicode-range: U+0400-045F, U+2116;
}
@font-face {
  font-family: 'MC Exam';
  src: url('/fonts/tinos-italic-latin.woff2') format('woff2');
  font-style: italic;
  font-display: swap;
  unicode-range: U+0020-007E;
}
/* Handwriting: only the teacher's pen notes */
@font-face {
  font-family: 'MC Hand';
  src: url('/fonts/pangolin-latin.woff2') format('woff2');
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0102-0103, U+015E-0163, U+0218-021B, U+2010-2033, U+2212;
}
@font-face {
  font-family: 'MC Hand';
  src: url('/fonts/pangolin-cyrillic.woff2') format('woff2');
  font-display: swap;
  unicode-range: U+0400-045F, U+2116;
}

:root {
  --graphite: #1b1d22;
  --graphite-2: #262932;
  --ink: #15171c;
  --yellow: #ffd83d;
  --yellow-hover: #f5c400;
  --yellow-soft: #fff4bf;
  --amber-soft: #fff7e6;
  --amber-dark: #78350f;
  --green-bg: #dcfce7;
  --green-text: #14532d;
  --pen-blue: #1d4ed8; /* only for the teacher's pen marks */
  --paper: #fffef8;
  --morning: #fffbea; /* brand warm paper (yellow-softer): the light after the fog */
  --shadow-warm: 0 2px 4px rgb(90 64 30 / 0.08), 0 22px 48px rgb(90 64 30 / 0.16);
  --page-bg: #f6f7f9;
  --white: #ffffff;
  --border: #e4e6eb;
  --text-2: #444a57;
  --text-3: #5a6070;
  --input-border: #c9cdd5;

  --font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-exam: 'MC Exam', 'Times New Roman', Times, serif;
  --font-hand: 'MC Hand', 'Comic Sans MS', cursive;

  --gutter: clamp(16px, 4vw, 32px);
  --tap: 44px;
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}
:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
}
i {
  font-style: italic;
}

/* ---------- Scroll machinery ----------
   script.js sets --t (0 → 1) on every element with data-a / data-b while its scene scrolls by.
   Without JS, or with "reduce motion", --t stays 1: everything is simply shown. */
[data-a] {
  --t: 1;
}
.fade {
  opacity: var(--t);
  transform: translateY(calc((1 - var(--t)) * 24px));
}
.out {
  opacity: calc(1 - var(--t));
}
.write {
  /* reveals left to right, like writing; 20px spare so the pen ring is not cut */
  clip-path: inset(-40% calc((1 - var(--t)) * (100% + 20px) - 20px) -40% -20px);
}
.draw {
  fill: none;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--t));
}

.scene {
  position: relative;
}
.pin {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 96px var(--gutter) 120px;
  overflow: hidden;
}
.anim .pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  padding: 72px var(--gutter) 96px;
}
/* How much scrolling each scene takes. Kept short on purpose: every extra screen of
   scrolling is a chance for a pupil to leave. Phones get even less (a swipe ≈ one screen). */
.anim .s1 {
  height: 210vh;
}
.anim .s2 {
  height: 250vh;
}
.anim .s3 {
  height: 200vh;
}
.anim .s4 {
  height: 180vh;
}
.anim .s5 {
  height: 150vh;
}
@media (max-width: 700px) {
  .anim .s1 {
    height: 180vh;
  }
  .anim .s2 {
    height: 210vh;
  }
  .anim .s3 {
    height: 170vh;
  }
  .anim .s4 {
    height: 150vh;
  }
  .anim .s5 {
    height: 140vh;
  }
}


/* ---------- Opening screen (plays once on load, then lifts like a curtain) ----------
   Pure CSS (the page's security rules allow no inline scripts). The name is written, "Clar" gets
   its yellow highlight, a short pause, then the screen slides up and the page is there.
   Never blocks: it removes itself (visibility) and is off with "reduce motion". */
.splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--graphite);
  animation: splash-out 0.75s cubic-bezier(0.76, 0, 0.24, 1) 2s forwards;
}
.splash-mark {
  margin: 0;
  font-size: clamp(52px, 16vw, 104px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--white);
  animation: splash-in 0.6s ease-out 0.2s both;
}
.splash-mark span {
  position: relative;
  display: inline-block;
  padding: 0 0.12em;
  margin-left: 0.04em;
  color: var(--white);
  z-index: 0;
}
/* the dark letters are a copy of the word, uncovered left to right in step with the highlight,
   so each letter turns from white to dark exactly where the yellow reaches it */
.splash-mark span::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  padding: 0 0.12em;
  white-space: nowrap;
  color: var(--ink);
  clip-path: inset(0 100% 0 0);
  animation: splash-ink 0.55s cubic-bezier(0.6, 0, 0.2, 1) 0.85s forwards;
}
.splash-mark span::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--yellow);
  border-radius: 0.14em;
  transform: scaleX(0);
  transform-origin: left center;
  z-index: -1;
  animation: splash-hl 0.55s cubic-bezier(0.6, 0, 0.2, 1) 0.85s forwards;
}
@keyframes splash-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}
@keyframes splash-hl {
  to {
    transform: scaleX(1);
  }
}
@keyframes splash-ink {
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes splash-out {
  to {
    transform: translateY(-100%);
    visibility: hidden;
  }
}
/* no scrolling while the opening screen is up (a swipe would skip the first questions);
   released the moment the curtain has gone: 2s wait + 0.75s slide = 2.75s */
.splash {
  touch-action: none;
  overscroll-behavior: none;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    animation: splash-lock 2.75s step-end both;
  }
}
@keyframes splash-lock {
  from {
    overflow: hidden;
  }
  to {
    overflow: visible;
  }
}
@media (prefers-reduced-motion: reduce) {
  .splash {
    display: none;
  }
}

/* ---------- Header ---------- */
.top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px var(--gutter);
}
.logo {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--white);
  text-decoration: none;
}
.logo span {
  background: var(--yellow);
  color: var(--ink);
  padding: 0 5px;
  border-radius: 4px;
  margin-left: 2px;
}
.lang {
  display: inline-flex;
  margin-left: auto;
  gap: 2px;
  font-weight: 700;
  font-size: 14px;
}
.lang a,
.lang span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap);
  min-height: var(--tap);
  border-radius: 999px;
  color: rgb(255 255 255 / 0.7);
  text-decoration: none;
}
.lang [aria-current='true'] {
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: var(--yellow);
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}

/* ---------- Fog that lifts ("clar" = the fog is gone) ----------
   A soft cloud texture (a small image). Its opacity follows
   --t: 0 = thick fog, 1 = clear. Without JS --t is 1, so there is no fog at all. */
.fog-layer {
  position: absolute;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  /* a small ready-made image (images/fog.webp, 26 KB), stretched: drawing the noise live
     at full phone resolution was the main reason scrolling lagged on phones */
  background: url('/images/fog.webp') center / cover no-repeat;
  opacity: calc((1 - var(--t)) * 0.7);
  transform: translateX(calc(var(--t) * -8%));
  will-change: transform, opacity;
}

/* ---------- Scene 1: the questions in the fog, then the plan (the fog lifts) ---------- */
.s1 {
  background-color: var(--graphite);
  color: var(--white);
}
.qs,
.answer {
  width: min(100%, 760px);
  font-family: var(--font-exam);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: -0.01em;
}
/* questions and answer share one spot: the questions leave completely, then the answer comes alone */
.stage1 {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(100%, 760px);
  place-items: center;
}
.stage1 > * {
  grid-area: 1 / 1;
}
/* the questions crowd in like thoughts, then drift up and blur away */
.qs {
  /* big on phones too: the three questions should fill the screen, not float in it */
  font-size: clamp(50px, 14vw, 92px);
  line-height: 1.3;
  opacity: calc(1 - var(--t));
  transform: translateY(calc(var(--t) * -48px));
  filter: blur(calc(var(--t) * 8px));
}
.soft {
  filter: blur(calc((1 - var(--t)) * 8px));
}
.q {
  display: block;
}
.q2 {
  padding-left: 1.3em;
}
.q3 {
  padding-left: 0.5em;
}
.answer {
  margin: 0;
  color: var(--ink);
  text-align: center;
  font-size: clamp(36px, 9.6vw, 68px);
  line-height: 1.16;
  text-wrap: balance;
}
.answer .ln {
  display: block;
  text-wrap: balance;
}
.answer .ln + .ln {
  margin-top: 0.35em;
}
/* the questions keep their place on the left, like thoughts */
.qs {
  justify-self: start;
}
.hl {
  position: relative;
  display: inline-block;
  padding: 0 0.12em;
  color: var(--ink);
  z-index: 0;
}
.hl::before {
  content: '';
  position: absolute;
  inset: 0.1em -0.02em 0.02em;
  background: var(--yellow);
  border-radius: 0.14em; /* straight and even, like the logo's yellow box */
  transform: scaleX(var(--t));
  transform-origin: left center;
  z-index: -1;
}
.hint {
  position: absolute;
  bottom: 96px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.6);
}
.hint::after {
  content: '';
  width: 2px;
  height: 28px;
  background: linear-gradient(var(--yellow), transparent);
  animation: hint 1.6s ease-in-out 6;
}
@keyframes hint {
  50% {
    transform: translateY(8px);
  }
}
.hint {
  transition: opacity 0.4s ease;
}
/* shown only until the visitor starts scrolling (script.js adds .scrolled once, for good) */
html.scrolled .hint {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s 0.4s;
}
html:not(.anim) .hint {
  display: none;
}
html:not(.anim) .top .logo,
html:not(.anim) .lang a,
html:not(.anim) .lang span {
  color: var(--ink);
}

/* ---------- Two moods only: confusion (dark + fog) → clarity (warm brand paper) ----------
   Scene 1 starts dark. When the questions have gone, the fog lifts and the light comes on
   (.s1-light, driven by --t), then the plan is written on the light. Everything after stays
   on the warm paper; yellow is only an accent (highlighter, logo, button). */
.s1-light {
  /* the light spreads from the centre outwards (like a lamp coming on), with a soft edge,
     so halfway it is a bright centre in the dark, never a flat grey screen.
     Only "transform" changes while scrolling, which even cheap phones draw smoothly. */
  position: absolute;
  left: 50%;
  top: 45%;
  z-index: 0;
  /* a small circle (50vmax) enlarged up to 4× = enough to cover the screen; a big element
     here meant a giant texture that cheap phones could not move smoothly */
  width: 50vmax;
  height: 50vmax;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, var(--morning) 72%, rgb(255 251 234 / 0) 100%);
  transform: scale(calc(var(--t) * 4));
  will-change: transform;
  pointer-events: none;
}

/* ---------- Scenes 2–4: a title, one picture, one short line ---------- */
.s2,
.s3,
.s4 {
  background-color: var(--morning);
  color: var(--ink);
}
/* soft daylight behind each picture */
.s2 .pin::before,
.s3 .pin::before,
.s4 .pin::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 54%;
  width: min(130vw, 980px);
  aspect-ratio: 1.3;
  translate: -50% -50%;
  background: radial-gradient(closest-side, rgb(255 255 255 / 0.8), transparent);
  pointer-events: none;
}
.title {
  position: relative;
  text-wrap: balance;
  margin: 0 0 28px;
  max-width: 16em;
  text-align: center;
  font-weight: 800;
  font-size: clamp(26px, 6.4vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.sub-cap {
  text-wrap: balance;
  margin: 40px 0 0;
  max-width: 24em;
  text-align: center;
  position: relative;
  font-size: clamp(16px, 4.2vw, 20px);
  color: var(--text-2);
}
/* Scene 2: the graded sheet */
.sheet {
  position: relative;
  width: min(100%, 460px);
  background: var(--paper);
  color: #111;
  font-family: var(--font-exam);
  border-radius: 4px;
  padding: 18px 20px 26px;
  box-shadow: var(--shadow-warm);
}
.zoom {
  opacity: calc(0.3 + var(--t) * 0.7);
  transform: scale(calc(0.82 + var(--t) * 0.18)) rotate(calc((1 - var(--t)) * -6deg - 1deg));
}
.sheet-head {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  border-bottom: 1px solid #111;
  padding-bottom: 6px;
  margin-bottom: 14px;
}
.q-ex {
  margin: 0 0 16px;
  font-size: clamp(17px, 4.5vw, 21px);
  line-height: 1.4;
}
.nw {
  white-space: nowrap;
}
.work {
  font-size: clamp(23px, 6.2vw, 28px);
  line-height: 1.25;
}
.wl {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 0;
  white-space: nowrap;
}
.bad {
  position: relative;
  display: inline-block;
}
.pen {
  position: absolute;
  overflow: visible;
  stroke: var(--pen-blue);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.tick {
  position: static;
  width: 26px;
  height: 26px;
  flex: none;
}
.ring {
  inset: -10px -12px -8px -14px;
  width: calc(100% + 26px);
  height: calc(100% + 18px);
}
.note {
  display: flex;
  align-items: flex-start;
  margin-left: 18px;
  gap: 4px;
  font-family: var(--font-hand);
  font-size: clamp(19px, 5vw, 23px);
  color: var(--pen-blue);
  white-space: nowrap;
}
.note svg {
  position: static;
  width: 30px;
  height: 26px;
  margin-top: -14px;
}
.score {
  position: absolute;
  right: 14px;
  bottom: -22px;
  font-family: var(--font-hand);
  font-size: 26px;
  color: var(--pen-blue);
  background: var(--paper);
  padding: 4px 18px;
  rotate: -5deg;
}
.score svg {
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Scene 3: the topics, ticked off one by one; today's topic lights up */
.topics {
  position: relative;
  width: min(100%, 400px);
  background: var(--white);
  border-radius: 16px;
  padding: 6px 18px;
  color: var(--ink);
  box-shadow: var(--shadow-warm);
}
.topic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: clamp(16px, 4.3vw, 18px);
}
.topic .tick {
  width: 24px;
  height: 24px;
}
.topic.now {
  margin: 0 -10px;
  padding: 0 10px;
  border-radius: 10px;
  border-bottom-color: transparent;
  background: color-mix(in srgb, var(--yellow-soft) calc(var(--t) * 100%), transparent);
}
.chip {
  font-size: 13px;
  font-weight: 800;
  background: var(--yellow);
  padding: 2px 10px;
  border-radius: 999px;
  opacity: var(--t);
  transform: scale(calc(0.8 + var(--t) * 0.2));
}
.topic.later {
  border-bottom: 0;
  color: var(--text-3);
}
.pen-note {
  position: absolute;
  right: 6px;
  bottom: -54px;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  font-family: var(--font-hand);
  font-size: clamp(19px, 5vw, 22px);
  color: var(--pen-blue);
  white-space: nowrap;
  rotate: -3deg;
}
.pen-note svg {
  position: static;
  width: 34px;
  height: 30px;
  margin-top: -20px;
}
.s3 .sub-cap {
  margin-top: 84px;
}

/* Scene 4: a new test lands on the pile every Monday.
   Each sheet is the cover page of a real MateClar test (same layout as content/…/test_NN_ro.pdf),
   portrait A4 shape. Sizes are in cqw (% of the sheet width), so it scales like a real page. */
.stack {
  position: relative;
  width: min(100%, 360px);
  aspect-ratio: 1 / 1.36;
}
.mini {
  position: absolute;
  inset: 0;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-radius: 2px;
  padding: 6cqw 6cqw 5cqw;
  font-family: var(--font-exam);
  color: #111;
  box-shadow: var(--shadow-warm);
  opacity: calc(var(--t) * 4);
  transform: translateY(calc((1 - var(--t)) * 90vh)) rotate(calc(var(--r) + (1 - var(--t)) * 8deg));
}
.mini:nth-child(1) {
  --r: -5deg;
}
.mini:nth-child(2) {
  --r: 3deg;
}
.mini:nth-child(3) {
  --r: -1deg;
}
.mini p {
  margin: 0;
}
.cv-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-family: var(--font-ui);
}
.cv-logo {
  font-size: 5.6cqw;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.cv-logo span {
  background: var(--yellow);
  padding: 0 0.2em;
  margin-left: 0.08em;
  border-radius: 0.17em;
}
.cv-site {
  font-size: 2.6cqw;
  line-height: 1.35;
  text-align: right;
  color: #555;
}
/* the double-framed title box, the heart of the cover */
.cv-box {
  margin: 14cqw 0 6cqw;
  padding: 4.5cqw 3cqw;
  border: 1.1cqw double #111;
  text-align: center;
  line-height: 1.3;
}
.cv-title {
  font-size: 4.6cqw;
  font-weight: 700;
}
.cv-kind {
  font-size: 3.3cqw;
  margin-top: 1.2cqw !important;
}
.cv-prof {
  font-size: 3.3cqw;
  text-decoration: underline;
  margin-top: 2cqw !important;
}
.cv-nr {
  font-size: 3.6cqw;
  margin-top: 2.4cqw !important;
}
.cv-time {
  font-size: 3.3cqw;
  margin-top: 1.4cqw !important;
}
.cv-req {
  font-size: 2.9cqw;
  padding-bottom: 2cqw;
  border-bottom: 1px solid #111;
}
.cv-ins {
  font-size: 2.9cqw;
  padding: 2cqw 0;
  border-bottom: 1px solid #111;
}
.cv-ins ul {
  margin: 0.8cqw 0 0;
  padding-left: 5cqw;
  list-style: '-  ';
}
.cv-luck {
  margin-top: 6cqw !important;
  text-align: center;
  font-size: 4.4cqw;
  font-weight: 700;
  font-style: italic;
}
.cv-score {
  margin-top: auto !important;
  text-align: right;
  font-size: 3cqw;
}

/* ---------- Scene 5: the last light mist lifts, then the motto ---------- */
.s5 {
  background-color: var(--morning);
  color: var(--ink);
}
/* the last light mist: white haze over the morning, it lifts before the motto */
.s5 .fog-layer {
  opacity: calc((1 - var(--t)) * 1);
}

.motto {
  position: relative;
  z-index: 1;
  margin: 0;
  text-align: center;
  font-weight: 800;
  /* as big as a phone allows while "devine clară." still fits on one line */
  font-size: clamp(46px, 14vw, 120px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
/* very small phones (320–340 px wide): a little smaller so each line still fits */
@media (max-width: 340px) {
  .motto {
    font-size: 12.4vw;
  }
}
.motto .w {
  display: inline-block;
}
/* the highlighter writes the word: yellow and letters appear together, left to right */
.hl.reveal {
  /* 104%, not 100%: the left edge sits at -4%, so at the start nothing at all may show
     (with 100% a thin sliver of yellow was visible before the word began) */
  clip-path: inset(-20% calc((1 - var(--t)) * 104%) -20% -4%);
}
.hl.reveal::before {
  transform: none;
}
.motto .ln {
  display: block;
}
.focus-in {
  opacity: var(--t);
  filter: blur(calc((1 - var(--t)) * 16px));
  transform: scale(calc(1.06 - var(--t) * 0.06));
}

/* ---------- Finale: sign up, in the morning light ----------
   Same morning light as the scenes before: the form is one more sheet of paper,
   and yellow is used only on the button (the one thing to press). */
.final {
  position: relative;
  overflow: hidden;
  background: var(--morning);
  color: var(--ink);
  padding: 40px var(--gutter) 120px;
}
.final::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 58%;
  width: min(140vw, 1000px);
  aspect-ratio: 1.2;
  translate: -50% -50%;
  background: radial-gradient(closest-side, rgb(255 255 255 / 0.7), rgb(255 255 255 / 0.25) 55%, transparent);
  pointer-events: none;
}
.final-in {
  position: relative;
  width: min(100%, 480px);
  margin: 0 auto;
}
.final h2 {
  margin: 0 0 8px;
  font-family: var(--font-exam);
  font-weight: 400;
  font-size: clamp(52px, 14vw, 96px);
  line-height: 1;
  letter-spacing: -0.02em;
}
.final .sub {
  margin: 0 0 24px;
  font-size: 18px;
  color: var(--text-2);
}
.signup {
  background: var(--paper);
  color: var(--ink);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow-warm);
}
.field {
  margin: 0 0 14px;
}
.lbl,
legend {
  display: block;
  font-weight: 700;
  font-size: 14px;
  margin: 0 0 6px;
  padding: 0;
}
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
input[type='email'] {
  width: 100%;
  min-height: var(--tap);
  padding: 0 14px;
  font: inherit;
  border: 2px solid var(--input-border);
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
}
input[type='email']:focus {
  border-color: var(--graphite);
  outline: 3px solid var(--yellow);
  outline-offset: 0;
}
.choices {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.choice {
  position: relative;
}
.choice input {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.choice span {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 16px;
  border: 2px solid var(--input-border);
  border-radius: 10px;
  font-weight: 700;
  background: var(--white);
}
.choice input:checked + span {
  border-color: var(--graphite);
  background: var(--yellow-soft);
}
.choice input:focus-visible + span {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
}
.check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 12px;
  font-size: 15px;
  color: var(--text-2);
  cursor: pointer;
}
.check input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--graphite);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: 0 24px;
  background: var(--yellow);
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
}
.btn:hover {
  background: var(--yellow-hover);
}
.btn[disabled] {
  opacity: 0.6;
  cursor: wait;
}
.fine {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--text-3);
}
.msg {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 600;
}
.msg[hidden] {
  display: none;
}
.msg.error {
  background: var(--amber-soft);
  color: var(--amber-dark);
}
.msg.ok {
  background: var(--green-bg);
  color: var(--green-text);
}
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Footer ---------- */
footer {
  background: var(--morning);
  border-top: 1px solid rgb(27 29 34 / 0.08);
  color: var(--text-3);
  padding: 28px var(--gutter) 36px;
  font-size: 15px;
}
footer .row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  align-items: center;
  justify-content: space-between;
  max-width: 1080px;
  margin: 0 auto;
}
footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}
footer a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--ink);
}

/* Phones and tablets: animated blur on large text is the most expensive effect, so it is
   replaced by plain fades. */
@media (pointer: coarse), (max-width: 700px) {
  .qs,
  .soft,
  .focus-in {
    filter: none;
  }
}
.zoom,
.mini {
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .hint::after {
    animation: none;
  }
}