/* Tokens. Type scale, section rhythm and gutters follow the openai.com reference (see docs/DESIGN.md). */
:root {
  --color-bg: #ffffff;
  --color-text: #111111;
  --color-text-muted: #6b6b6b;
  --color-field: #f2f2f2;
  --color-field-focus: #e8e8e8;
  --color-input: #ffffff;
  --color-focus: #046597;
  --color-button: #046597;
  --color-button-text: #ffffff;
  --color-error: #d12c2c;
  --color-line: #e5e5e5;
  --color-form-bg: #ddeef8;
  --color-status: #1fae5b;
  --color-status-text: #15803d;
  --color-urgent: #d12c2c;

  --font-base: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Fluid sizes: min at 375px viewport, max at 1440px */
  --fluid: ((100vw - 23.4375rem) / 66.5625);
  --text-h1: clamp(2rem, calc(2rem + 2 * var(--fluid)), 4rem);
  --text-h2: clamp(1.5rem, calc(1.5rem + 0.5 * var(--fluid)), 2rem);
  --text-h3: clamp(1.5rem, calc(1.5rem + 0.375 * var(--fluid)), 1.875rem);
  --text-h4: clamp(1.25rem, calc(1.25rem + 0.125 * var(--fluid)), 1.375rem);
  --text-h5: clamp(1rem, calc(1rem + 0.125 * var(--fluid)), 1.125rem);
  --text-h6: var(--text-h5);
  --text-p: 17px;
  --text-control: 16px;
  --text-small: 14px;
  --text-xs: 12px;
  --leading-heading: 1.2;
  --leading-h3: 1.32;
  --leading-h4: 1.26;
  --leading-h5: 1.32;
  --leading-p: 28px;
  --leading-control: 24px;
  --leading-small: 20px;
  --leading-xs: 16px;
  --tracking-h1: -0.03em;
  --tracking-h2: clamp(-0.03em, calc(-0.03em + 0.02 * ((90rem - 100vw) / 66.5625)), -0.01em);
  --tracking-heading: -0.01em;
  --tracking-p: -0.01em;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  --section-gap: 56px;
  --gutter: 24px;

  --radius-small: 2px;
  --radius-field: 4px;
  --border-width: 1px;
  --focus-ring-width: 2px;
  --stroke-width: 2px;
  --radius-full: 999px;
  --page-max-width: 900px;
  /* Side padding of full-width bars (nav, footer) that lines their content up with the .page column */
  --page-inline: max(var(--gutter), calc((100% - var(--page-max-width)) / 2 + var(--gutter)));
  --logo-size: 34px;
  --logo-size-banner: 28px;
  --logo-size-form: 48px;
  --flag-width: 36px;
  --footer-text-width: 360px;
  --step-marker: 32px;
  --strip-height: 6px;
  --icon-size: 20px;
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* Z-index layers */
  --z-nav: 10;

  --duration: 250ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (max-width: 809px) {
  :root {
    --text-h1: clamp(1.75rem, calc(1.75rem + 2 * var(--fluid)), 4rem);
    --text-h2: clamp(1.375rem, calc(1.375rem + 0.5 * var(--fluid)), 2rem);
    --text-h3: clamp(1.375rem, calc(1.375rem + 0.375 * var(--fluid)), 1.875rem);
    --text-h4: clamp(1.125rem, calc(1.125rem + 0.125 * var(--fluid)), 1.375rem);
    --text-h5: clamp(0.9375rem, calc(0.9375rem + 0.125 * var(--fluid)), 1.125rem);
    --text-p: 16px;
    --text-control: 15px;
    --text-small: 14px;
  }

  .page.page--home { padding-top: calc(var(--space-24) / 2); }
}

@media (min-width: 810px) {
  :root {
    --section-gap: 80px;
    --gutter: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration: 0ms; }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html { background: var(--color-bg); }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-base);
  font-size: var(--text-p);
  line-height: var(--leading-p);
  letter-spacing: var(--tracking-p);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-4);
  font-weight: var(--weight-medium);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}
h1 { font-size: var(--text-h1); letter-spacing: var(--tracking-h1); }
h2 { font-size: var(--text-h2); letter-spacing: var(--tracking-h2); }
h3 { font-size: var(--text-h3); line-height: var(--leading-h3); }
h4 { font-size: var(--text-h4); line-height: var(--leading-h4); }
h5 { font-size: var(--text-h5); line-height: var(--leading-h5); }
h6 { font-size: var(--text-h6); line-height: var(--leading-h5); }

.md :is(h2, h3, h4, h5, h6):not(:first-child) { margin-top: var(--space-10); }

/* Headings balance their lines; body text avoids orphans */
p, li { text-wrap: pretty; }
p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: var(--weight-semibold); }

a { color: inherit; }
img { display: block; max-width: 100%; }

/* Layout */
/* Fixed on scroll: sticks to the top on every page, over the content */
.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: var(--color-bg);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  justify-content: space-between;
  /* Content aligns with the .page column; the border still spans the full width */
  padding: var(--space-2) var(--page-inline);
  border-bottom: var(--border-width) solid var(--color-line);
}
.nav__brand { display: flex; align-items: center; gap: var(--space-3); }
.nav__flag { width: var(--flag-width); height: auto; border-radius: var(--radius-small); }
.nav__text { font-size: var(--text-small); line-height: var(--leading-small); letter-spacing: 0; }
.nav__logo { display: flex; }
.nav .nav__logo { margin-left: -8px; }
.nav__logo img, .logo-pair img { width: var(--logo-size); height: var(--logo-size); }
.nav .nav__logo img {
  width: 64px;
  height: 48px;
  aspect-ratio: 4 / 3;
  object-fit: fill;
}

/* Banner under the nav: logo 2 × logo 3, then md text, in one row as tall as the nav;
   sits in the .page column, so its bottom line spans the content width only */
.banner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: 0 var(--page-inline);
  /* Same height as the nav, though its logos are smaller */
  min-height: calc(var(--logo-size) + 2 * var(--space-3) + var(--border-width));
  padding: var(--space-3) 0;
  border-bottom: var(--border-width) solid var(--color-line);
}
.banner .logo-pair img { width: var(--logo-size-banner); height: var(--logo-size-banner); }
/* Logo 2 × logo 3: in the banner and the footer */
.logo-pair { display: flex; align-items: center; gap: var(--space-3); flex: none; }
.logo-pair__x { color: var(--color-text-muted); font-size: var(--text-h5); line-height: 1; }
.banner__text { flex: 0 1 auto; min-width: 0; font-size: var(--text-small); line-height: var(--leading-small); letter-spacing: 0; }

.page {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: var(--space-24) var(--gutter) var(--section-gap);
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
}

/* Tag: a paragraph holding only inline code in md (hero status, step label in blocks) */
:is(.md, .blocks__item) p:has(> code:only-child) { display: flex; }
:is(.md, .blocks__item) p > code:only-child {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-field);
  font-family: var(--font-base);
  font-size: var(--text-small);
  line-height: var(--leading-small);
  font-weight: var(--weight-medium);
  letter-spacing: 0;
}
/* Form tag: red "limited places" badge */
.form__intro p > code:only-child {
  background: var(--color-bg);
  color: var(--color-urgent);
  font-weight: var(--weight-semibold);
}
.form__intro p:has(> code:only-child) { margin-bottom: var(--space-3); }
/* A heading right after a tag sits close to it, not 40px away */
.md p:has(> code:only-child) + :is(h2, h3, h4, h5, h6) { margin-top: 0; }

/* Hero status tag: light green pill, green text, one size up */
.hero p > code:only-child {
  padding: var(--space-2) var(--space-4);
  background: color-mix(in srgb, var(--color-status) 15%, var(--color-bg));
  color: var(--color-status-text);
  font-size: var(--text-control);
  line-height: var(--leading-control);
  font-weight: var(--weight-semibold);
}
/* Hero status tag only: green pulsing dot before the text */
.hero p > code:only-child::before {
  content: "";
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-status);
  animation: status-pulse 1.6s ease-out infinite;
}
@keyframes status-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-status) 60%, transparent); }
  100% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-status) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .hero p > code:only-child::before { animation: none; }
}

/* Blocks section (overview.md): intro, then a grid of 1–99 items; 3 columns from tablet up, 1 on phone */
.blocks__grid {
  display: grid;
  grid-template-columns: 1fr;
  /* Stacked items on phone get more air; 16px once they sit in a row */
  gap: var(--space-8);
  margin-top: var(--space-10);
}
/* Phone: title and text on the left, the step tag on the right, vertically centred on the text block */
.blocks__grid--4 .blocks__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-3);
  align-content: start;
}
.blocks__grid--4 .blocks__item > * { grid-column: 1; }
.blocks__grid--4 .blocks__item > p:has(> code:only-child) {
  grid-column: 2;
  grid-row: 1 / span 9;
  align-self: center;
  margin: 0;
}
@media (min-width: 810px) {
  .blocks__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
  .blocks__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blocks__grid--4 .blocks__item { display: block; }
  .blocks__grid--4 .blocks__item > p:has(> code:only-child) { margin-bottom: var(--space-3); }
}
.blocks__item p:has(> code:only-child) { margin-bottom: var(--space-3); }
.blocks__item {
  padding: var(--space-4);
  font-size: var(--text-small);
  line-height: var(--leading-small);
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-field);
}
@media (min-width: 810px) {
  .blocks__item { padding: var(--space-6); }
}
/* Strip variant (data-strip="bg"): no frame; an image strip (--strip-height) at the bottom, image set per item via --strip-image */
.blocks__item--strip {
  position: relative;
  padding: 0 0 calc(var(--space-4) + var(--strip-height));
  border: 0;
  border-radius: 0;
}
.blocks__item--strip::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: var(--strip-height);
  border-radius: var(--radius-small);
  background: var(--strip-image) center / cover no-repeat, var(--color-field);
}

.blocks__item h3 {
  margin-bottom: var(--space-2);
  font-weight: var(--weight-semibold);
  font-size: var(--text-h5);
  line-height: var(--leading-h5);
}

/* Requirements (requirements.md): title, description, then any-length checklist, no frame;
   rows are split by a line that starts where the text starts (not under the icon) and runs to the column edge */
.requirements ul {
  display: flex;
  flex-direction: column;
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}
.requirements li {
  position: relative;
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  font-size: var(--text-control);
  line-height: var(--leading-control);
}
.requirements li + li::after {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--icon-size) + var(--space-3));
  right: 0;
  height: var(--border-width);
  background: var(--color-line);
}
.requirements li::before {
  content: "";
  flex: none;
  width: var(--icon-size);
  height: var(--leading-control);
  background: var(--color-text);
  -webkit-mask: var(--icon-check) center / var(--icon-size) no-repeat;
  mask: var(--icon-check) center / var(--icon-size) no-repeat;
}
.requirements blockquote {
  margin: var(--space-6) 0 0;
  padding: var(--space-4) var(--space-6);
  background: lightyellow;
  border-radius: var(--radius-small);
  color: var(--color-text);
  font-weight: var(--weight-medium);
}
.requirements blockquote p { margin: 0; }

/* Each info.md block is its own section; a 1px line sits midway between neighbours */
.info { display: flex; flex-direction: column; }
.info section + section {
  margin-top: calc(var(--section-gap) / 2);
  padding-top: calc(var(--section-gap) / 2);
  border-top: var(--border-width) solid var(--color-line);
}

.footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  /* Content aligns with the .page column, like the nav */
  padding: var(--space-12) var(--page-inline);
  border-top: var(--border-width) solid var(--color-line);
  font-size: var(--text-small);
  line-height: var(--leading-small);
  letter-spacing: 0;
  color: var(--color-text-muted);
}
@media (min-width: 810px) {
  .footer { flex-direction: row; justify-content: space-between; }
}
.footer__brand { display: flex; flex-direction: column; gap: var(--space-4); max-width: var(--footer-text-width); }
/* Footer logos: logo 1 | logo 2 × logo 3 */
.footer__logos { display: flex; align-items: center; gap: var(--space-4); }
.footer__sep { align-self: stretch; width: var(--border-width); background: var(--color-line); }
.footer__text p { margin-bottom: var(--space-2); }
.footer__links { display: flex; gap: var(--space-6); }

.legal ul, .legal ol { padding-left: var(--space-6); }

/* Form section: bordered box holding the form (intro + fields) or the success content */
.lead {
  --lead-inset: var(--space-4);
  padding: var(--lead-inset) var(--lead-inset) var(--space-6);
  background: var(--color-form-bg);
  border-radius: var(--radius-field);
}
@media (min-width: 810px) {
  .lead { --lead-inset: var(--space-8); padding-bottom: var(--space-10); }
}
.lead { position: relative; }
/* Logo 3 at the top left of the form box: touches the box's top edge, inset from the left by the box padding.
   The intro sits below it and uses the form's standard side padding. Hidden with the form on success */
.form__logo {
  position: absolute;
  top: 0;
  left: var(--lead-inset);
  width: var(--logo-size-form);
  height: var(--logo-size-form);
}
.form__intro {
  margin-bottom: var(--space-4);
  padding-top: calc(var(--logo-size-form) + var(--space-4));
}
.form__disclaimer {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  letter-spacing: 0;
  color: var(--color-text-muted);
}
.form__disclaimer p { margin-bottom: var(--space-2); }

/* Form */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-radius: var(--radius-field);
  background: var(--color-input);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-control);
  line-height: var(--leading-control);
  letter-spacing: 0;
  outline: none;
  transition: box-shadow var(--duration) var(--ease);
}
.input::placeholder { color: var(--color-text-muted); }
.input:focus { box-shadow: 0 0 0 var(--focus-ring-width) var(--color-focus); }
.field.is-invalid .input { box-shadow: inset 0 0 0 var(--border-width) var(--color-error); }

/* Hint / error under a field, and the submit error: height + fade/slide reveal */
.field__msg, .form__error {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(calc(var(--space-1) * -1));
  transition:
    grid-template-rows var(--duration) var(--ease),
    opacity var(--duration) var(--ease),
    transform var(--duration) var(--ease);
}
.field__msg > *, .form__error > * { min-height: 0; overflow: hidden; }
.field__msg.is-visible, .form__error.is-visible {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: none;
}
/* The hidden submit error must not add a second form gap above the button */
.form__error {
  margin-top: calc(var(--space-2) * -1);
  transition-property: grid-template-rows, opacity, transform, margin-top;
}
.form__error.is-visible { margin-top: 0; }
.field__text, .form__error-text {
  margin: 0;
  padding: var(--space-1) var(--space-1) 0;
  font-size: var(--text-small);
  line-height: var(--leading-small);
  letter-spacing: 0;
  color: var(--color-text-muted);
}
.field.is-invalid .field__text, .form__error-text { color: var(--color-error); }

/* intl-tel-input: make the wrapper fit the field design */
.iti {
  width: 100%;
  --iti-border-color: transparent;
  --iti-hover-color: var(--color-field-focus);
}

/* Button */
.button {
  position: relative;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-radius: var(--radius-field);
  background: var(--color-button);
  color: var(--color-button-text);
  font: inherit;
  font-size: var(--text-control);
  line-height: var(--leading-control);
  letter-spacing: 0;
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: opacity var(--duration) var(--ease);
}
.button:disabled { opacity: 0.4; cursor: default; }
.button.is-loading:disabled { opacity: 1; }

.button__label { transition: opacity var(--duration) var(--ease); }
.button__spinner {
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--icon-size);
  height: var(--icon-size);
  border: var(--stroke-width) solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-full);
  opacity: 0;
  transition: opacity var(--duration) var(--ease);
  animation: spin 0.8s linear infinite;
}
.button.is-loading .button__label { opacity: 0; }
.button.is-loading .button__spinner { opacity: 1; }

@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .button__spinner { animation-duration: 2.4s; }
}

/* Form → success swap: the .lead container animates its height, children fade */
.lead.is-swapping {
  overflow: hidden;
  transition: height var(--duration) var(--ease);
}
.form, .success { transition: opacity var(--duration) var(--ease); }
.is-faded { opacity: 0; }

/* Success: heading, message and submitted values share one white card; steps follow below. */
.success__info {
  padding: var(--space-4);
  background: var(--color-bg);
  border-radius: var(--radius-field);
}
.success__info ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-control);
  line-height: var(--leading-control);
}
.success__info li:first-child { font-weight: var(--weight-semibold); }
.success__info li { display: flex; align-items: center; gap: var(--space-2); }
.success__info li img { flex: none; width: var(--icon-size); height: var(--icon-size); }
@media (min-width: 810px) {
  .success__info { padding: var(--space-6); }
}

.steps { padding: var(--space-6) 0 0; }
.steps ol {
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
}
.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 var(--space-6) calc(var(--step-marker) + var(--space-4));
  min-height: var(--step-marker);
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: var(--step-marker);
  height: var(--step-marker);
  border-radius: var(--radius-full);
  background: var(--color-button);
  color: var(--color-button-text);
  font-weight: var(--weight-semibold);
  font-size: var(--text-small);
}
.steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(var(--step-marker) / 2 - var(--stroke-width) / 2);
  top: var(--step-marker);
  bottom: 0;
  width: var(--stroke-width);
  background: var(--color-button);
}
.steps li:last-child { padding-bottom: 0; }
.steps li p { margin: 0; }

/* Preview debug menu: regular page elements, visible without stored settings or top-layer support. */
.debug-menu {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: var(--z-nav);
  width: min(240px, calc(100vw - 2 * var(--space-4)));
  background: var(--color-bg);
  color: var(--color-text);
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-field);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--color-text) 18%, transparent);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}
.debug-menu summary {
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-text);
  color: var(--color-bg);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
.debug-menu__body { padding: var(--space-4); }
.debug-menu__body label { display: block; margin-bottom: var(--space-2); }
.debug-menu select {
  width: 100%;
  min-height: 44px;
  padding: var(--space-2);
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-field);
  background: var(--color-input);
  color: var(--color-text);
  font: inherit;
}