/* ============================================================================
   KERTESSA — the early access page (goals W11.6.8, the founder's message 36)
   Loaded after styles/tokens.css, whose light-dark() colours carry both themes;
   the Light, Dark and System switch only sets data-theme on <html>, which
   tokens.css already reads.
   The one memorable thing is the mosaic: empty slots that fill with petrol tiles
   as each question is answered, one gap kept for the brand's unfitted tessera,
   and the last tile settling into it when someone joins. It leans toward the
   pointer and plays a soft note when touched (early-access.js).
   Motion moves transform and opacity only, so the compositor runs it at the
   display's own rate, and only under no-preference. Every px length is 1, 2 or
   a multiple of 4; tools/early-access-verify.mjs checks both.
   ============================================================================ */

@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-gutter: stable; }
/* very wide screens (a 4K display at 100%): the type grows with the room instead of floating in it */
@media (min-width: 2000px) { html { font-size: 112.5%; } }
@media (min-width: 2800px) { html { font-size: 125%; } }
html.ea-locked { overflow: hidden; }
body {
  margin: 0;
  background: var(--paper-0);
  color: var(--ink-700);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, fieldset, legend { margin: 0; }
button, input, textarea { font: inherit; color: inherit; }
svg { display: block; }
a { color: var(--accent-900); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: var(--border-focus); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
[tabindex="-1"]:focus { outline: none; }

.ea-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 16px; top: -64px; z-index: 10;
  padding: 12px 16px; border-radius: var(--radius-sm);
  background: var(--accent-600); color: var(--accent-on); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 8px; }

.ea-wrap {
  width: 100%;
  max-width: 90rem;
  margin-inline: auto;
  padding-inline: max(16px, env(safe-area-inset-left), env(safe-area-inset-right));
}
@media (min-width: 768px) { .ea-wrap { padding-inline: 32px; } }
@media (min-width: 1200px) { .ea-wrap { padding-inline: 56px; } }

/* ── header: the mark, the tagline, the theme and the sounds ──────────────── */
.ea-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "brand tag tools";
  align-items: center; column-gap: 24px; row-gap: 8px;
  padding-block: 24px;
}
.ea-brand { grid-area: brand; display: inline-flex; align-items: center; gap: 8px; color: var(--accent-600); }
.ea-mark { width: 32px; height: 32px; flex: none; }
.ea-wordmark {
  font-family: var(--font-display); font-size: 1.5rem; line-height: 1; font-weight: 560;
  letter-spacing: -0.01em; font-variation-settings: "opsz" 96;
}
.ea-tagline {
  grid-area: tag; padding-left: 24px; border-left: 1px solid var(--line-soft);
  color: var(--ink-500); font-size: 0.9375rem; line-height: 1.3;
}
.ea-tools { grid-area: tools; display: flex; align-items: center; gap: 8px; }
html:not(.js) .ea-tools { display: none; }
@media (width < 720px) {
  .ea-header { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand tools" "tag tag"; padding-block: 16px; }
  .ea-tagline { padding-left: 0; border-left: 0; font-size: 0.875rem; }
}

.ea-theme {
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 40px;
  padding: 2px; border: 0; border-radius: var(--radius-full);
  background: var(--paper-1); box-shadow: inset 0 0 0 1px var(--line-soft);
}
.ea-theme-opt {
  position: relative; z-index: 1; display: grid; place-items: center; height: 36px;
  border-radius: var(--radius-full); color: var(--ink-500); cursor: pointer;
}
.ea-theme-opt:hover { color: var(--ink-900); }
.ea-theme-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ea-theme-opt svg, .ea-sound svg {
  width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.ea-theme-opt:has(input:checked) { color: var(--accent-on); }
.ea-theme-opt:has(input:focus-visible) { outline: var(--border-focus); outline-offset: 2px; }
.ea-theme-thumb {
  position: absolute; z-index: 0; top: 2px; left: 2px; width: 40px; height: 36px;
  border-radius: var(--radius-full); background: var(--accent-600); box-shadow: var(--elev-1);
  transform: translateX(80px);
}
.ea-theme:has(input[value="light"]:checked) .ea-theme-thumb { transform: translateX(0); }
.ea-theme:has(input[value="dark"]:checked) .ea-theme-thumb { transform: translateX(40px); }

.ea-sound {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--line-soft); border-radius: var(--radius-full);
  background: var(--paper-1); color: var(--ink-700); cursor: pointer;
}
.ea-sound:hover { color: var(--ink-900); border-color: var(--line-strong); }
.ea-sound .ea-mute { opacity: 0; }
.ea-sound[aria-pressed="false"] { color: var(--ink-500); }
.ea-sound[aria-pressed="false"] .ea-wave { opacity: 0; }
.ea-sound[aria-pressed="false"] .ea-mute { opacity: 1; }

/* ── the stage: the words on one side, the sign up on the other ───────────── */
.ea-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "intro" "card" "details";
  row-gap: 40px;
  padding-top: clamp(16px, 4vw, 64px);
  padding-bottom: clamp(64px, 8vw, 128px);
}
.ea-intro { grid-area: intro; container-type: inline-size; }
.ea-card { grid-area: card; }
.ea-details { grid-area: details; }
@media (min-width: 1100px) {
  .ea-main {
    grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
    grid-template-rows: auto 1fr;
    grid-template-areas: "intro card" "details card";
    column-gap: clamp(48px, 6vw, 128px); row-gap: 64px;
    align-items: start;
  }
}
/* the card stays in view beside the words, only where the screen is tall enough to hold all of it */
@media (min-width: 1100px) and (min-height: 920px) { .ea-card { position: sticky; top: 24px; } }

.ea-status {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 24px;
  padding: 4px 12px 4px 8px; border-radius: var(--radius-full);
  background: var(--accent-100); color: var(--accent-900); font-size: 0.875rem; font-weight: 600; line-height: 1.5;
}
.ea-dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--accent-600); }

.ea-intro h1 {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 1.25rem + 5vw, 5.5rem);
  font-size: clamp(2.75rem, 1rem + 9.5cqi, 6rem);
  line-height: 1;
  font-weight: 420;
  letter-spacing: -0.03em;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  color: var(--accent-900);
  max-width: 14ch;
  text-wrap: balance;
}
/* the words of the headline, once early-access.js has split them: each rises out of its own mask */
.ea-wm { display: inline-block; overflow: clip; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.ea-w { display: inline-block; }
.ea-lead {
  margin-top: 24px; max-width: 34em;
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem); line-height: 1.6; color: var(--ink-700); text-wrap: pretty;
}

/* ── the card ─────────────────────────────────────────────────────────────── */
.ea-card {
  position: relative; width: 100%; max-width: 36rem;
  padding: clamp(20px, 4vw, 32px);
  background: var(--paper-1);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-xl);
  box-shadow: var(--elev-4);
  scroll-margin-top: 16px;
}
@media (min-width: 1100px) { .ea-card { max-width: none; } }

/* the mosaic: 24 slots, one gap. Eight across and three down on narrow screens, six by four beside the words */
.ea-mosaic {
  position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: var(--radius-md);
  background: none; cursor: pointer; perspective: 900px;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.ea-mosaic:focus-visible { outline-offset: 4px; }
/* positioned, so each tile's offsetLeft and offsetTop (which ignore the tilt) are measured from here */
.ea-tiles { position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; transform-style: preserve-3d; }
@media (min-width: 480px) { .ea-tiles { gap: 8px; } }
@media (min-width: 1100px) { .ea-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.ea-tiles > i {
  position: relative; display: block; aspect-ratio: 1; border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
@media (min-width: 480px) { .ea-tiles > i { border-radius: 8px; } }
.ea-tiles > i::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--tone); opacity: 0; transform: scale(0.5);
}
.ea-tiles > i.is-fit::after { opacity: 1; transform: none; }
.ea-mosaic:hover .ea-tiles > i { will-change: transform; }
.t1 { --tone: var(--accent-100); }
.t2 { --tone: var(--accent-300); }
.t3 { --tone: var(--accent-500); }
.t4 { --tone: var(--accent-600); }
.t5 { --tone: var(--accent-900); }
.ea-tiles > .ea-gap { box-shadow: none; outline: 1px dashed var(--accent-300); outline-offset: -1px; }
.ea-tiles > .ea-gap::after { content: none; }
.ea-last {
  position: absolute; inset: 0; display: block; border-radius: inherit; background: var(--tone);
  opacity: 0; transform: translateY(-24px) rotate(-12deg) scale(0.8);
}
.ea-card.is-done .ea-last { opacity: 1; transform: none; }
.ea-card.is-done .ea-gap { outline-color: transparent; }

.ea-card-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-top: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--line-hairline);
}
.ea-card-head h2 {
  font-family: var(--font-display); font-size: 1.375rem; font-weight: 540; line-height: 1.2;
  letter-spacing: -0.01em; color: var(--accent-900); font-variation-settings: "opsz" 72;
}
.ea-count { flex: none; font-size: 0.875rem; color: var(--ink-500); font-variant-numeric: tabular-nums; }
.ea-nojs { margin-top: 24px; }
html.js .ea-nojs, html:not(.js) .ea-count, html:not(.js) .ea-flow { display: none; }

/* ── the steps: one question at a time, all in one cell so the card keeps its size ── */
.ea-steps { display: grid; margin-top: 24px; }
.ea-step { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 16px; min-width: 0; visibility: hidden; }
.ea-step.is-on { visibility: visible; }
.ea-q {
  font-family: var(--font-display); font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem); font-weight: 480;
  line-height: 1.2; letter-spacing: -0.015em; color: var(--ink-900); font-variation-settings: "opsz" 72;
  text-wrap: balance;
}
.ea-help { color: var(--ink-500); font-size: 0.9375rem; }
.ea-small { color: var(--ink-500); font-size: 0.875rem; }
.ea-link { color: var(--accent-900); font-weight: 600; }
.ea-actions { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 16px; }
.ea-actions [data-next], .ea-actions [data-join] { margin-left: auto; }

/* the email box, with an example typed and taken back letter by letter behind it */
.ea-email-box { position: relative; }
.ea-email-box input, .ea-step textarea {
  width: 100%; min-width: 0; padding: 12px 16px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  background: var(--paper-1); color: var(--ink-900); font-size: 1.125rem;
}
.ea-email-box input { min-height: 56px; }
.ea-step textarea { min-height: 128px; resize: vertical; line-height: 1.5; font-size: 1.0625rem; }
.ea-email-box input:focus-visible, .ea-step textarea:focus-visible {
  outline: none; border-color: var(--accent-600); box-shadow: var(--elev-focus-ring);
}
.ea-email-box input::placeholder { color: transparent; }
.ea-ghost {
  position: absolute; inset: 1px; display: flex; align-items: center; padding-inline: 16px; overflow: hidden;
  color: var(--ink-500); font-size: 1.125rem; white-space: pre; pointer-events: none;
}
.ea-email-box input:not(:placeholder-shown) + .ea-ghost { visibility: hidden; }
.ea-caret { flex: none; width: 2px; height: 1.2em; margin-left: 2px; border-radius: 1px; background: var(--accent-600); }
.ea-email-box input:focus + .ea-ghost .ea-caret { visibility: hidden; }
[aria-invalid="true"] { border-color: var(--danger-700) !important; }

/* choices: whole rows to tap, a ring that fills */
.ea-choices { min-width: 0; padding: 0; border: 0; }
.ea-choices > legend { float: left; width: 100%; padding: 0; margin-bottom: 16px; }
.ea-options { clear: both; display: grid; gap: 8px; }
@media (min-width: 400px) { .ea-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ea-option {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 16px;
  border: 1px solid var(--line-soft); border-radius: var(--radius-md);
  background: var(--paper-1); color: var(--ink-900); line-height: 1.3; cursor: pointer;
}
.ea-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ea-option::before {
  content: ""; flex: none; width: 20px; height: 20px;
  border: 2px solid var(--line-strong); border-radius: var(--radius-full);
}
.ea-option::after {
  content: ""; position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; border-radius: var(--radius-full);
  background: radial-gradient(circle closest-side, var(--accent-600) 45%, transparent 50%);
  transform: translateY(-50%) scale(0);
}
.ea-option:hover { border-color: var(--accent-500); }
.ea-option:has(input:checked) { border-color: var(--accent-600); background: var(--accent-050); box-shadow: inset 0 0 0 1px var(--accent-600); }
.ea-option:has(input:checked)::before { border-color: var(--accent-600); }
.ea-option:has(input:checked)::after { transform: translateY(-50%) scale(1); }
.ea-option:has(input:focus-visible) { outline: var(--border-focus); outline-offset: 2px; }

/* the two ticks: the first needed to join, the second for news and offers, never ticked for anyone */
.ea-ticks { display: grid; gap: 8px; }
.ea-check {
  position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 16px; border: 1px solid var(--line-soft); border-radius: var(--radius-md);
  color: var(--ink-700); line-height: 1.5; cursor: pointer;
}
.ea-check input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ea-box {
  display: grid; place-items: center; width: 24px; height: 24px;
  border: 2px solid var(--line-strong); border-radius: 8px; background: var(--paper-1); color: var(--accent-on);
}
.ea-box svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0; transform: scale(0.4);
}
.ea-check strong { color: var(--ink-900); font-weight: 600; }
.ea-check:hover { border-color: var(--accent-500); }
.ea-check:has(input:checked) { border-color: var(--accent-600); background: var(--accent-050); }
.ea-check:has(input:checked) .ea-box { border-color: var(--accent-600); background: var(--accent-600); }
.ea-check:has(input:checked) .ea-box svg { opacity: 1; transform: none; }
.ea-check:has(input:focus-visible) { outline: var(--border-focus); outline-offset: 2px; }
.ea-check:has(input[aria-invalid="true"]) { border-color: var(--danger-700); }

.ea-brief {
  display: grid; gap: 8px; padding: 16px; border-radius: var(--radius-md);
  background: var(--paper-2); color: var(--ink-700); font-size: 0.875rem; line-height: 1.5;
}
.ea-brief ul { display: grid; gap: 4px; padding: 0; list-style: none; }
.ea-brief li { position: relative; padding-left: 20px; }
.ea-brief li::before {
  content: ""; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; border-radius: 2px; background: var(--accent-500);
}
.ea-brief .ea-link { justify-self: start; }

.ea-trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.ea-error { color: var(--danger-700); font-weight: 600; font-size: 0.9375rem; }
.ea-form-error { padding: 12px 16px; border-radius: var(--radius-sm); background: var(--danger-100); }

.ea-button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 28px;
  border: 0; border-radius: var(--radius-full); background: var(--accent-600); color: var(--accent-on);
  font-weight: 600; font-size: 1rem; line-height: 1.2; cursor: pointer;
}
.ea-button:hover { background: var(--accent-700); }
.ea-button.is-skip { background: transparent; color: var(--accent-900); box-shadow: inset 0 0 0 1px var(--line-strong); }
.ea-button.is-skip:hover { background: var(--paper-2); }
.ea-button[disabled] { cursor: progress; background: var(--accent-500); }
.ea-back {
  min-height: 48px; padding: 12px 16px; margin-left: -16px; border: 0; border-radius: var(--radius-full);
  background: none; color: var(--ink-700); font-weight: 500; cursor: pointer;
}
.ea-back:hover { background: var(--paper-2); color: var(--ink-900); }

.ea-done { gap: 16px; }
.ea-done .ea-q { color: var(--accent-900); }
.ea-done strong { color: var(--ink-900); overflow-wrap: anywhere; }

/* ── what Kertessa will bring ─────────────────────────────────────────────── */
.ea-details { padding-top: 40px; border-top: 1px solid var(--line-hairline); }
.ea-points { display: grid; gap: 32px; padding: 0; list-style: none; }
@media (min-width: 720px) { .ea-points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 48px; } }
.ea-points li { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 16px; align-content: start; }
.ea-sq { grid-row: span 2; width: 16px; height: 16px; margin-top: 8px; border-radius: 4px; background: var(--tone); }
.ea-points h3 {
  font-family: var(--font-display); font-size: 1.3125rem; font-weight: 520; line-height: 1.3;
  letter-spacing: -0.01em; color: var(--ink-900); font-variation-settings: "opsz" 48;
}
.ea-points p { margin-top: 4px; max-width: 34em; color: var(--ink-700); text-wrap: pretty; }

/* ── the notice: a short version first, every part one tap away ───────────── */
.ea-notice {
  width: min(100% - 32px, 40rem); max-width: none; max-height: min(85dvh, 48rem);
  padding: 0; border: 0; border-radius: var(--radius-xl);
  background: var(--paper-1); color: var(--ink-700); box-shadow: var(--elev-4); overflow: hidden;
}
.ea-notice::backdrop { background: var(--scrim-modal); }
.ea-notice-panel { max-height: inherit; overflow: auto; overscroll-behavior: contain; padding: 24px; }
@media (min-width: 640px) { .ea-notice-panel { padding: 32px; } }
@media (width < 640px) {
  .ea-notice { width: 100%; max-height: 90dvh; margin: auto 0 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  .ea-notice-panel { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
}
.ea-notice-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ea-notice-head h2 {
  font-family: var(--font-display); font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); font-weight: 480;
  line-height: 1.15; letter-spacing: -0.015em; color: var(--accent-900); font-variation-settings: "opsz" 96;
}
.ea-close {
  display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 40px; padding: 8px 16px 8px 12px;
  border: 1px solid var(--line-soft); border-radius: var(--radius-full);
  background: var(--paper-1); color: var(--ink-900); font-weight: 600; font-size: 0.9375rem; cursor: pointer;
}
.ea-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ea-close:hover { background: var(--paper-2); }
.ea-notice-lead { margin-top: 16px; }
.ea-notice-list { margin-top: 24px; border-bottom: 1px solid var(--line-hairline); }
.ea-more { border-top: 1px solid var(--line-hairline); }
.ea-more summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding-block: 12px; list-style: none; cursor: pointer;
}
.ea-more summary::-webkit-details-marker { display: none; }
.ea-more summary h3 { font-size: 1rem; font-weight: 600; line-height: 1.4; color: var(--ink-900); }
.ea-more summary:hover h3 { color: var(--accent-900); }
.ea-more summary:focus-visible { outline-offset: -2px; border-radius: 4px; }
.ea-more summary::after {
  content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px;
  border-right: 2px solid var(--ink-500); border-bottom: 2px solid var(--ink-500);
  transform: translateY(-2px) rotate(45deg);
}
.ea-more[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.ea-more-body { padding-bottom: 16px; }
.ea-more-body p { max-width: 38em; }
.ea-more-body p + p { margin-top: 12px; }
.ea-notice-foot { margin-top: 24px; font-size: 0.8125rem; color: var(--ink-500); }
.ea-version { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--ink-700); overflow-wrap: anywhere; }
/* with no scripts the notice sits on the page, every part still opens */
html:not(.js) .ea-notice {
  position: static; display: block; width: auto; max-width: 48rem; max-height: none; margin: 0 auto 48px;
  border: 1px solid var(--line-hairline); box-shadow: none;
}
html:not(.js) .ea-close { display: none; }

/* ── footer ───────────────────────────────────────────────────────────────── */
.ea-footer {
  display: grid; gap: 12px; padding-block: 40px 48px; border-top: 1px solid var(--line-hairline);
  font-size: 0.9375rem; color: var(--ink-700);
}
.ea-foot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.ea-copy { color: var(--ink-500); }
/* the Booked with Kertessa chip: the design system's BrandingChip (28px, a translucent paper pill, the name in petrol),
   its 14px K in its own square. The square clips, so the stem can rise into it from below. */
.ea-chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.ea-chip {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 28px; padding-inline: 8px 12px;
  border-radius: var(--radius-full); background: color-mix(in srgb, var(--paper-2) 60%, transparent);
  color: var(--ink-500); font-size: 0.75rem; line-height: 16px; font-weight: 500; letter-spacing: 0.01em;
  text-decoration: none; white-space: nowrap;
}
.ea-chip:hover { background: var(--paper-2); color: var(--ink-700); }
.ea-chip strong { color: var(--accent-600); font-weight: 600; }
.ea-chip-k { flex: none; overflow: hidden; }   /* 14px square, set on the svg as the design system's chip sets it */
.ea-chip-note { color: var(--ink-500); font-size: 0.875rem; }
/* 28px is what the eye sees; on touch the chip answers across the full 44px */
@media (pointer: coarse) {
  .ea-chip::after { content: ""; position: absolute; inset: 50% 0 auto 0; height: 44px; transform: translateY(-50%); }
}

@media (forced-colors: active) {
  .ea-button, .ea-back { border: 2px solid ButtonText; }
  .ea-option:has(input:checked), .ea-check:has(input:checked), .ea-theme-opt:has(input:checked) {
    outline: 2px solid Highlight; outline-offset: 2px;
  }
  .ea-tiles > i { border: 1px solid CanvasText; }
}

/* ── motion: the opening shot, the tiles, and what answers a press ────────── */
@media (prefers-reduced-motion: no-preference) {
  /* held back until early-access.js plays the opening; if it never runs, they appear on their own */
  .js:not(.is-ready) .ea-header, .js:not(.is-ready) .ea-intro, .js:not(.is-ready) .ea-card {
    opacity: 0; animation: ea-show 1ms 2500ms forwards;
  }
  @keyframes ea-show { to { opacity: 1; } }
  .ea-points > li.is-pending { opacity: 0; }
  /* the chip's K waits, out of sight, until the chip first comes into view (early-access.js) */
  .ea-chip.is-pending { opacity: 0; }
  .ea-chip.is-pending .ea-chip-k path { opacity: 0; }

  .ea-theme-thumb { transition: transform 420ms cubic-bezier(0.3, 1.4, 0.4, 1); }
  .ea-sound .ea-wave, .ea-sound .ea-mute { transition: opacity 240ms linear; }
  .ea-tiles > i::after {
    transition: opacity 320ms linear var(--d, 0ms), transform 720ms cubic-bezier(0.3, 1.4, 0.4, 1) var(--d, 0ms);
  }
  .ea-last { transition: transform 1000ms cubic-bezier(0.16, 1, 0.3, 1), opacity 320ms linear; }
  .ea-option::after { transition: transform 360ms cubic-bezier(0.3, 1.4, 0.4, 1); }
  .ea-box svg { transition: transform 360ms cubic-bezier(0.3, 1.4, 0.4, 1), opacity 160ms linear; }
  .ea-more summary::after { transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1); }
  .ea-button, .ea-back, .ea-option, .ea-check, .ea-sound, .ea-close { transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1); }
  .ea-button:active, .ea-back:active, .ea-option:active, .ea-check:active, .ea-sound:active, .ea-close:active { transform: scale(0.985); }
  .ea-caret { animation: ea-blink 1060ms steps(1) infinite; }
  @keyframes ea-blink { 50% { opacity: 0; } }
}