/* AImagine website
   Design read: premium event-tech landing for planners, venues and hosts, set in the booth's own dark,
   cinematic world. Dials: variance 7, motion 7, density 5 (raised after the owners found v1 too sparse).
   Theme: one dark theme on purpose (the brand is the dark mirror with its cyan/blue/violet light).
   Colour: cyan is the single interactive accent. The brand gradient is kept for brand moments (logo, the hero's
   second line, the live mirror). Primary buttons use blue to violet so white text passes contrast.
   Shapes: buttons, pills and chips are full-pill; images, panels and the device use --r (22px). Nothing else. */

@font-face { font-family: "Outfit"; src: url("assets/fonts/outfit.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist"; src: url("assets/fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: dark;
  --navy: #050A1E;
  --navy-2: #0A1433;
  --navy-3: #101D46;
  --ink: #EEF3FF;
  --muted: #A3B2D9;
  --faint: #7F8DB5;
  --line: rgb(120 150 230 / 0.16);
  --line-2: rgb(120 150 230 / 0.28);
  --cyan: #00E5FF;
  --cyan-rgb: 0 229 255;
  --blue: #1B6BFF;
  --violet: #7E40FC;
  --brand: linear-gradient(100deg, var(--cyan) 0%, var(--blue) 52%, var(--violet) 100%);
  --brand-cta: linear-gradient(100deg, var(--blue), var(--violet));
  --r: 22px;
  --display: "Outfit", "Segoe UI", system-ui, sans-serif;
  --text: "Geist", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --nav-h: 68px;
  --section-y: clamp(64px, 8vw, 112px);
  /* z-index scale: hero canvas -1, nav 20, skip link 30 */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); background: var(--navy); }
body {
  margin: 0; color: var(--ink); font: 400 17px/1.6 var(--text); background: var(--navy);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
img, video, canvas { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 1.2em; height: 1.2em; flex: none; fill: currentColor; }

.wrap {
  width: 100%; max-width: 1240px; margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.skip { position: absolute; left: 12px; top: -60px; z-index: 30; background: var(--ink); color: var(--navy); padding: 10px 14px; border-radius: 999px; }
.skip:focus { top: 12px; }

h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.8rem, 5.4vw, 4.9rem); line-height: 1.02; }
h2 { font-size: clamp(2rem, 3.2vw, 2.9rem); line-height: 1.08; }
h3 { font-size: 1.25rem; line-height: 1.25; }
p { margin: 0; }
.eyebrow { display: block; font: 600 0.8rem/1 var(--text); letter-spacing: 0.2em; text-transform: uppercase; color: var(--cyan); margin-bottom: 20px; }
.brand-text { background: var(--brand); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 0.08em; }
.lead { font-size: clamp(1.1rem, 1.5vw, 1.3rem); color: var(--muted); max-width: 40ch; margin-top: 22px; }
.section-head { max-width: 65ch; }
.section-sub { color: var(--muted); max-width: 60ch; margin-top: 14px; font-size: 1.08rem; }
.note { color: var(--faint); font-size: 0.92rem; }

/* Buttons: full pill. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; text-decoration: none; cursor: pointer;
  font: 600 1rem/1 var(--text); padding: 16px 26px; border-radius: 999px; border: 1px solid transparent;
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--brand-cta); color: #fff; box-shadow: 0 0 0 1px rgb(var(--cyan-rgb) / 0.45), 0 10px 30px -12px rgb(var(--cyan-rgb) / 0.7); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgb(var(--cyan-rgb) / 0.8), 0 14px 36px -12px rgb(var(--cyan-rgb) / 0.9); }
.btn-ghost { border-color: var(--line-2); color: var(--ink); background: rgb(255 255 255 / 0.03); }
.btn-ghost:hover { border-color: rgb(var(--cyan-rgb) / 0.55); }
.btn-sm { padding: 11px 18px; font-size: 0.94rem; }

/* Navigation: one line on desktop; on phones the links become a second, scrollable row. */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: rgb(5 10 30 / 0.74); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
@media (prefers-reduced-transparency: reduce) { .nav { background: var(--navy); backdrop-filter: none; } }
.nav-inner { min-height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand img { height: 42px; width: auto; }
.nav-links { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
.nav-links a { text-decoration: none; color: var(--muted); font-size: 0.96rem; transition: color 0.2s; white-space: nowrap; }
.nav-links a:hover { color: var(--ink); }
@media (max-width: 860px) {
  .nav-inner { flex-wrap: wrap; row-gap: 0; padding-top: 10px; }
  .nav nav { order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .nav-links { gap: 22px; padding: 8px 0 12px; }
  html { scroll-padding-top: 118px; }
}

/* Hero: the live mirror. The booth's Rays look glows full-bleed behind the section, centred on the device. */
/* The hero fills the first screen: the device is sized by the viewport height so the whole mirror always fits. */
.hero {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center;
  min-height: calc(100svh - var(--nav-h)); padding: clamp(20px, 3.5vh, 48px) 0;
}
.hero > .wrap { width: 100%; }
.hero::before { /* fallback light without WebGL, and the scrim that keeps the copy readable */
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(42% 60% at 72% 42%, rgb(27 107 255 / 0.30), transparent 70%),
              radial-gradient(30% 40% at 78% 30%, rgb(126 64 252 / 0.22), transparent 70%), var(--navy);
}
.hero-gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: 0; transition: opacity 1.4s var(--ease); pointer-events: none; }
.hero-gl.ready { opacity: 0.75; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgb(5 10 30 / 0.92) 0%, rgb(5 10 30 / 0.55) 42%, transparent 70%),
              linear-gradient(0deg, var(--navy) 0%, transparent 22%);
}
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* The device: a portrait screen in the mirror's 9:16 shape. */
.device { margin: 0; justify-self: center; width: clamp(200px, calc((100svh - var(--nav-h) - 140px) * 9 / 16), 360px); }
.device-frame {
  padding: 10px; border-radius: calc(var(--r) + 10px);
  background: linear-gradient(160deg, #1d2a55, #070d24 40%, #121c44);
  box-shadow: 0 0 0 1px var(--line-2), 0 40px 90px -30px rgb(27 107 255 / 0.55), 0 0 120px -40px rgb(var(--cyan-rgb) / 0.5);
}
.device-screen {
  position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; padding: 0; border: 0; cursor: pointer;
  border-radius: var(--r); overflow: hidden; background: var(--navy);
}
.device-gl { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.8s var(--ease); }
.device-gl.ready { opacity: 1; }
.device-screen::before { /* static ring when WebGL is unavailable */
  content: ""; position: absolute; left: 50%; top: 42%; width: 78%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgb(27 107 255 / 0.55), rgb(126 64 252 / 0.35) 78%, rgb(var(--cyan-rgb) / 0.7) 92%, transparent 100%);
  filter: blur(6px);
}
.device-start {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; pointer-events: none;
  transition: opacity 0.6s var(--ease), transform 0.9s var(--ease);
}
.device-start img { position: absolute; top: 42%; left: 50%; width: 44%; height: auto; transform: translate(-50%, -52%); filter: drop-shadow(0 4px 18px rgb(0 0 0 / 0.5)); }
.device-start .touch {
  position: absolute; top: 72%; left: 0; right: 0; text-align: center;
  font: 600 clamp(1rem, 1.7vw, 1.25rem) var(--display); color: var(--cyan); text-shadow: 0 0 18px rgb(var(--cyan-rgb) / 0.8);
  animation: touch 2.6s ease-in-out infinite;
}
@keyframes touch { 50% { opacity: 0.45; } }
.device-photos { position: absolute; inset: 0; }
.device-photos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 0.9s var(--ease), transform 4s linear; }
.device-photos img.on { opacity: 1; transform: scale(1); }
.device-chip {
  position: absolute; left: 50%; bottom: 16px; transform: translate(-50%, 8px); opacity: 0; white-space: nowrap;
  font: 600 0.92rem var(--display); padding: 8px 14px; border-radius: 999px; background: rgb(5 10 30 / 0.72);
  border: 1px solid var(--line-2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.device-chip.on { opacity: 1; transform: translate(-50%, 0); }
.device.opened .device-start { opacity: 0; transform: scale(1.08); }
.device-caption { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; color: var(--faint); font-size: 0.92rem; min-height: 40px; text-align: center; }
.icon-btn {
  display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; cursor: pointer; flex: none;
  background: rgb(255 255 255 / 0.04); border: 1px solid var(--line-2); color: var(--ink); transition: border-color 0.2s;
}
.icon-btn:hover { border-color: rgb(var(--cyan-rgb) / 0.55); }

@media (max-width: 860px) {
  .hero::after { background: linear-gradient(180deg, rgb(5 10 30 / 0.88) 0%, rgb(5 10 30 / 0.4) 38%, transparent 60%), linear-gradient(0deg, var(--navy) 0%, transparent 18%); }
  .hero-grid { grid-template-columns: 1fr; }
  .hero { min-height: 0; }
  .device { width: min(300px, 78vw); }
}

/* How it works: five real screens in one line, joined by a light that fills in once. */
.how { padding: var(--section-y) 0; background: linear-gradient(180deg, transparent, rgb(16 29 70 / 0.35) 30%, rgb(16 29 70 / 0.35) 70%, transparent); }
.flow { position: relative; isolation: isolate; list-style: none; margin: 52px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; }
.flow::before, .flow::after { /* connector through the screens' centre line */
  content: ""; position: absolute; left: 4%; right: 4%; top: 31%; height: 2px; border-radius: 2px; background: var(--line); z-index: -1;
}
.flow::after { background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform 1.8s var(--ease) 0.3s; }
.flow.in::after { transform: scaleX(1); }
.step-shot {
  position: relative; margin: 0; aspect-ratio: 720 / 920; border-radius: var(--r); overflow: hidden; background: var(--navy-2);
  border: 1px solid var(--line-2); box-shadow: 0 24px 50px -28px rgb(0 0 0 / 0.9);
}
.step-shot img { width: 100%; height: 100%; object-fit: cover; }
.step-ai img { position: absolute; inset: 0; }
.step-ai-after { animation: restyle 6s ease-in-out infinite; }
@keyframes restyle { 0%, 30% { opacity: 0; } 45%, 85% { opacity: 1; } 100% { opacity: 0; } }
.step h3 { display: flex; align-items: center; gap: 10px; margin-top: 20px; font-size: 1.15rem; }
.step h3 .ic { color: var(--cyan); width: 1.35em; height: 1.35em; }
.step p { color: var(--muted); margin-top: 8px; font-size: 0.98rem; }
@media (max-width: 1024px) {
  .flow { grid-template-columns: 1fr; gap: 0; max-width: 640px; }
  .flow::before, .flow::after { left: 59px; right: auto; top: 20px; bottom: 20px; width: 2px; height: auto; }
  .flow::after { transform: scaleY(0); transform-origin: top; }
  .flow.in::after { transform: scaleY(1); }
  .step { display: grid; grid-template-columns: 120px 1fr; column-gap: 22px; padding: 14px 0; align-items: center; }
  .step-shot { grid-row: span 2; }
  .step h3 { margin-top: 0; align-self: end; }
  .step p { align-self: start; }
}

/* Themes: the comparison slider (sticky on desktop) and the grid of tiles that load into it. */
.themes { padding: var(--section-y) 0; }
.themes-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 4vw, 56px); margin-top: 44px; align-items: start; }
.compare-col { position: sticky; top: calc(var(--nav-h) + 20px); }
.compare-frame {
  position: relative; aspect-ratio: 2 / 3; border-radius: var(--r); overflow: hidden; background: var(--navy-2); --pos: 50%;
  touch-action: pan-y; cursor: ew-resize; box-shadow: 0 0 0 1px var(--line-2), 0 30px 70px -30px rgb(126 64 252 / 0.6);
}
.compare-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare-after { clip-path: inset(0 0 0 var(--pos)); transition: opacity 0.35s var(--ease); }
.compare-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: var(--ink); transform: translateX(-1px); pointer-events: none; }
.compare-line span {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 999px;
  display: grid; place-items: center; background: var(--ink); color: var(--navy); font-size: 1.2rem;
}
.compare-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.compare-frame:focus-within .compare-line span { box-shadow: 0 0 0 3px var(--cyan); }
.compare-labels { display: flex; justify-content: space-between; margin-top: 12px; color: var(--muted); font-size: 0.95rem; }
.compare-labels span:last-child { color: var(--cyan); font-weight: 600; }

.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tiles li.more { display: none; }
.tiles.all li.more { display: block; }
.tile {
  display: flex; flex-direction: column; width: 100%; padding: 0; text-align: left; cursor: pointer;
  background: none; border: 0; border-radius: var(--r);
}
.tile img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r); background: var(--navy-2); transition: transform 0.4s var(--ease), box-shadow 0.3s var(--ease); }
.tile:hover img { transform: translateY(-3px); }
.tile[aria-pressed="true"] img { box-shadow: 0 0 0 2px var(--navy), 0 0 0 4px var(--cyan); }
.tile-name { margin-top: 10px; font: 600 1rem/1.25 var(--display); }
.tile-desc { color: var(--faint); font-size: 0.9rem; line-height: 1.4; }
.tiles-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 26px; }
@media (max-width: 960px) {
  .themes-grid { grid-template-columns: 1fr; }
  .compare-col { position: relative; top: 0; width: min(420px, 100%); justify-self: center; }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles:not(.all) li:nth-child(n+7) { display: none; } /* six on a phone before "Show all" */
}

/* Your event: tabs for the kind of night, then the host's controls next to the reel. */
.event { padding: var(--section-y) 0; background: radial-gradient(60% 50% at 100% 20%, rgb(126 64 252 / 0.14), transparent 70%); }
.event-tabs { margin-top: 36px; }
.tablist { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.tablist [role="tab"] {
  flex: none; cursor: pointer; font: 500 0.98rem var(--text); color: var(--muted); padding: 11px 18px;
  border-radius: 999px; border: 1px solid var(--line-2); background: rgb(255 255 255 / 0.03); transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
.tablist [role="tab"]:hover { color: var(--ink); border-color: rgb(var(--cyan-rgb) / 0.5); }
.tablist [role="tab"][aria-selected="true"] { color: var(--navy); background: var(--cyan); border-color: var(--cyan); font-weight: 600; }
.panel {
  display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: 26px;
  padding: clamp(18px, 2.5vw, 28px); border-radius: var(--r); border: 1px solid var(--line); background: rgb(10 20 51 / 0.65);
}
.panel[hidden] { display: none; }
.panel-img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: calc(var(--r) - 8px); }
.panel-copy h3 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); }
.panel-copy > p { color: var(--muted); margin-top: 12px; font-size: 1.12rem; max-width: 42ch; }
.panel-copy .panel-label { color: var(--faint); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 30px; }
.picks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 150px)); gap: 14px; }
.picks img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: calc(var(--r) - 8px); }
.picks span { display: block; margin-top: 8px; font: 600 0.95rem var(--display); }
@media (max-width: 860px) { .panel { grid-template-columns: 1fr; } .panel-img { aspect-ratio: 4 / 3; } }

.host { display: grid; grid-template-columns: 320px 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; margin-top: clamp(56px, 7vw, 96px); }
.reel { position: relative; }
.reel video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--r); background: var(--navy-2); border: 1px solid var(--line-2); }
.sound {
  position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font: 500 0.88rem var(--text); color: var(--ink); background: rgb(5 10 30 / 0.72); border: 1px solid var(--line-2);
  border-radius: 999px; padding: 9px 14px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.sound[aria-pressed="true"] { border-color: var(--cyan); }
.host-h { font-size: clamp(1.6rem, 2.4vw, 2.2rem); }
.controls { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line); }
.controls li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; padding: 24px 24px 24px 0; border-bottom: 1px solid var(--line); }
.controls li:nth-child(even) { padding-left: 24px; padding-right: 0; border-left: 1px solid var(--line); }
.controls .ic { width: 30px; height: 30px; color: var(--cyan); }
.controls strong { display: block; font: 600 1.12rem/1.3 var(--display); }
.controls span { display: block; color: var(--muted); margin-top: 6px; font-size: 0.98rem; }
@media (max-width: 960px) {
  .host { grid-template-columns: 1fr; }
  .reel { width: min(320px, 100%); justify-self: center; }
}
@media (max-width: 600px) {
  .controls { grid-template-columns: 1fr; }
  .controls li, .controls li:nth-child(even) { padding: 20px 0; border-left: 0; }
}

/* Set-up: two grouped lists in one panel. */
.setup { padding: calc(var(--section-y) * 0.5) 0; }
.setup-inner {
  border-radius: var(--r); border: 1px solid var(--line-2); padding: clamp(28px, 4vw, 52px);
  background: radial-gradient(70% 120% at 0% 0%, rgb(var(--cyan-rgb) / 0.10), transparent 60%), var(--navy-2);
}
.setup-cols { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px, 5vw, 72px); margin-top: 34px; }
.setup-cols h3 { font-size: 1.05rem; font-family: var(--text); color: var(--cyan); letter-spacing: 0.02em; }
.checks { list-style: none; margin: 16px 0 0; padding: 0; }
.checks li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--line); font-size: 1.04rem; }
.checks .ic { width: 24px; height: 24px; color: var(--muted); margin-top: 1px; }
@media (max-width: 760px) { .setup-cols { grid-template-columns: 1fr; } }

/* Privacy: three promises in a row with hairlines. */
.privacy { padding: var(--section-y) 0 calc(var(--section-y) * 0.6); }
.promises { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: 1.1fr 1fr 0.9fr; border-top: 1px solid var(--line); }
.promises li { display: grid; gap: 8px; align-content: start; padding: 28px 28px 0; border-left: 1px solid var(--line); }
.promises li:first-child { padding-left: 0; border-left: 0; }
.promises .ic { width: 30px; height: 30px; color: var(--cyan); margin-bottom: 6px; }
.promises strong { font: 600 1.15rem/1.3 var(--display); }
.promises span { color: var(--muted); font-size: 0.98rem; max-width: 34ch; }
@media (max-width: 860px) {
  .promises { grid-template-columns: 1fr; }
  .promises li, .promises li:first-child { padding: 22px 0; border-left: 0; border-bottom: 1px solid var(--line); }
}

/* FAQ: heading left, accordion right. */
.faq { padding: calc(var(--section-y) * 0.6) 0 var(--section-y); }
.faq-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.faq-head { position: sticky; top: calc(var(--nav-h) + 24px); }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 20px 0; font: 500 1.14rem var(--display);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { color: var(--cyan); transition: transform 0.3s var(--ease); }
.faq details[open] summary .ic { transform: rotate(45deg); }
.faq details p { color: var(--muted); padding: 0 0 22px; max-width: 62ch; }
@media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; } .faq-head { position: static; } }

/* Closing: the date request. */
.book { padding: 0 0 var(--section-y); }
.book-inner {
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 5vw, 72px); align-items: center;
  border-radius: var(--r); padding: clamp(28px, 5vw, 64px); border: 1px solid var(--line-2);
  background: radial-gradient(80% 120% at 100% 0%, rgb(126 64 252 / 0.32), transparent 60%),
              radial-gradient(80% 120% at 0% 100%, rgb(var(--cyan-rgb) / 0.16), transparent 60%), var(--navy-2);
}
.book-copy p { color: var(--muted); margin-top: 16px; max-width: 40ch; font-size: 1.1rem; }
.book-logo { width: 170px; height: auto; margin-top: 34px; }
.book-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.book-form label { display: grid; gap: 7px; font-size: 0.92rem; color: var(--muted); }
.book-form input, .book-form select {
  font: 400 1rem var(--text); color: var(--ink); background: rgb(5 10 30 / 0.7); border: 1px solid var(--line-2);
  border-radius: 12px; padding: 13px 14px; min-height: 48px; width: 100%; color-scheme: dark;
}
.book-form input:focus-visible, .book-form select:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.book-form .btn { grid-column: 1 / -1; margin-top: 6px; }
.form-status { grid-column: 1 / -1; color: var(--muted); font-size: 0.92rem; min-height: 1.4em; }
@media (max-width: 860px) { .book-inner { grid-template-columns: 1fr; } .book-logo { display: none; } }
@media (max-width: 520px) { .book-form { grid-template-columns: 1fr; } }

.footer { padding: 40px 0 calc(40px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.footer-inner img { height: 42px; width: auto; }
.footer-links { display: flex; gap: 22px; }
.footer-links a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--muted); }
.footer-links a:hover { color: var(--ink); }
.footer-links a[hidden] { display: none; }
.fine { color: var(--faint); font-size: 0.88rem; width: 100%; }

/* Scroll reveals: hidden only once main.js runs (.rv), so a failed script never hides the page. */
.rv .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.rv .reveal.in { opacity: 1; transform: none; }

/* The hero's pause button stops every looping animation on the page (WCAG 2.2.2). */
.paused .device-start .touch, .paused .step-ai-after { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv .reveal { opacity: 1; transform: none; transition: none; }
  .device-start .touch, .step-ai-after { animation: none; }
  .step-ai-after { opacity: 1; }
  .device-photos img { transition: opacity 0.01s; transform: none; }
  .flow::after { transition: none; }
  .tile img, .btn { transition: none; }
}