/* ============================================================
   AUREUM FUNNELS · Demo-Webinars VSL
   Implemented 1:1 from Figma [Aureum] - [Branding + Funnel]
   Breakpoint anchors: 390 / 768 / 1440 (Figma artboards)
   ============================================================ */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, ul, ol { margin: 0; padding: 0; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; border: 0; background: none; cursor: pointer; }
input { font: inherit; }
a { color: inherit; text-decoration: none; }

/* ---------- tokens ---------- */
:root {
  --bg: #000000;
  --display: #e8e8e8;
  --ink: #e0e0e0;
  --serif: 'Hedvig Letters Serif', Georgia, serif;
  --sans: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --wordmark: 'Unbounded', var(--sans);
  --mono: 'Geist Mono', 'JetBrains Mono', monospace;
  --hairline: rgba(255, 255, 255, 0.1);
  --plate-stroke: rgba(255, 255, 255, 0.1);
  --plate-bg: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 100%), linear-gradient(0deg, rgba(255,255,255,0.025), rgba(255,255,255,0.025));
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  /* corner plus-dots, generated to match the Figma plusGrid (9x6 / 6x4) */
  --dots-lg: url("assets2/dots-lg.svg");
  --dots-sm: url("assets2/dots-sm.svg");
}

html, body { background: var(--bg); }
body {
  font-family: var(--sans);
  color: var(--ink);
  overflow-x: hidden;
}

/* page wrapper gets blurred while the application modal is open */
#page { transition: filter 0.45s var(--ease-out); }
body.modal-open #page { filter: blur(18px); }
body.modal-open { overflow: hidden; }

/* ---------- shared ---------- */
.wrap { width: 100%; max-width: 342px; margin: 0 auto; }
@media (min-width: 600px)  { .wrap { max-width: 672px; } }
@media (min-width: 1060px) { .wrap { max-width: 1280px; } }

section { position: relative; background: var(--bg); overflow: hidden; }

.label {
  font-size: 11px; line-height: 16px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--ink); opacity: 0.5;
}
@media (min-width: 600px)  { .label { font-size: 11.5px; } }
@media (min-width: 1060px) { .label { font-size: 12px; line-height: 17px; } }

.h2 { font-family: var(--serif); font-weight: 400; text-align: center; letter-spacing: 0.01em; line-height: 1.15; color: var(--display); }
.h2 .dim { color: rgba(232, 232, 232, 0.5); }
.h2 span { display: block; }
.h2 { font-size: clamp(24px, 6.7vw, 26px); }
@media (min-width: 600px)  { .h2 { font-size: clamp(28px, 4.43vw, 34px); } }
@media (min-width: 1060px) { .h2 { font-size: clamp(38px, 3.34vw, 48px); } }

.hairline { height: 1px; width: 100%; background: var(--hairline); }

.section-note { font-size: 13px; line-height: 19px; color: rgba(224,224,224,0.5); text-align: center; }
@media (min-width: 1060px) { .section-note { font-size: 14px; line-height: 20px; } }

.sec-head { display: flex; flex-direction: column; align-items: center; }
.sec-head .label { margin-bottom: 12px; }
@media (min-width: 1060px) { .sec-head .label { margin-bottom: 16px; } }
.sec-head .section-note { margin-top: 14px; }
@media (min-width: 1060px) { .sec-head .section-note { margin-top: 18px; } }

/* white pill CTA */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: #fff; border-radius: 35px; padding: 15px 30px;
  font-family: var(--sans); font-size: 15px; line-height: 22px; color: rgba(0,0,0,0.9);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.pill svg { width: 16px; height: 16px; opacity: 0.5; }
.pill:hover { transform: translateY(-1px); box-shadow: 0 0 34px rgba(255,255,255,0.22); }
@media (min-width: 1060px) {
  .pill { padding: 18px 36px; font-size: 18px; line-height: 25px; }
  .pill svg { width: 18px; height: 18px; }
}
@media (max-width: 599px) { .pill.pill-block { width: 100%; } }

/* plates (cards) */
.plate {
  position: relative; border: 1px solid var(--plate-stroke); border-radius: 16px;
  background: var(--plate-bg); overflow: hidden;
}
.plate::after {
  content: ""; position: absolute; top: 10px; right: 12px; width: 90px; height: 60px;
  background: var(--dots-sm) no-repeat; background-size: contain; pointer-events: none;
}
.plate.plate-lg::after { top: 11px; right: 14px; width: 153px; height: 85px; background-image: var(--dots-lg); }
.plate.no-dots::after { display: none; }

/* entrance cascade (gated behind the js root class so the page stays readable without JS) */
.js .rv { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.js .rv.in { opacity: 1; transform: none; }

/* ============================================================
   HERO
   ============================================================ */
.hero { display: flex; flex-direction: column; align-items: center; padding: 16px 24px 52px; }
@media (min-width: 600px)  { .hero { padding: 22px 48px 72px; } }
@media (min-width: 1060px) { .hero { padding: 64px 80px 88px; } }

.hero-eclipse {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 1440px; min-width: 100%; pointer-events: none; z-index: 0;
}
@media (min-width: 1441px) { .hero-eclipse { width: 100vw; } }
.hero > :not(.hero-eclipse) { position: relative; z-index: 1; }

.wordmark { display: inline-flex; align-items: center; gap: 8px; opacity: 0.75; }
.wordmark img { width: 13px; height: 13.5px; }
.wordmark span { font-family: var(--wordmark); font-weight: 400; font-size: 15px; line-height: 1; color: #fff; }
@media (min-width: 600px)  { .wordmark img { width: 14.4px; height: 15px; } .wordmark span { font-size: 17px; } }
@media (min-width: 1060px) { .wordmark img { width: 15.4px; height: 16px; } .wordmark span { font-size: 18px; } }
.manifesto .wordmark { opacity: 1; }
.manifesto .wordmark span { font-family: var(--serif); font-size: 22px; }
.manifesto .wordmark img { width: 17.3px; height: 18px; }

/* tick loader (live) — geometry taken 1:1 from Figma "Loader" 542x51:
   tick strip x5 w454 (46 bars of 4px, 6px gaps), % label right edge at x511, 12px */
.loader {
  position: relative; border: 1px solid #212121; border-radius: 6px;
  width: 300px; aspect-ratio: 542 / 51; margin-top: 22px;
  container-type: inline-size;
}
@media (min-width: 600px)  { .loader { width: 440px; margin-top: 30px; } }
@media (min-width: 1060px) { .loader { width: 542px; margin-top: 22px; } }
.loader-ticks {
  position: absolute; left: 0.7407%; width: 84.074%; top: 8.163%; height: 83.673%;
  display: flex; gap: 1.32159%; overflow: hidden;
}
.loader-ticks i {
  display: block; flex: 1 1 0; height: 100%; min-width: 0;
  background: rgba(255, 255, 255, 0.14);
  transition: background 0.18s linear, box-shadow 0.18s linear;
}
.loader-ticks i.lit {
  background: #fff;
  box-shadow: 0 0 6px rgba(255,255,255,0.9), 0 0 18px rgba(255,255,255,0.45);
}
.loader-pct {
  position: absolute; right: 5.5556%; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-weight: 500; letter-spacing: 0.1em;
  color: #f0f0f0; text-shadow: 0 0 5px rgba(255,255,255,0.75);
  font-size: 12px;
  font-size: max(9px, 2.2222cqw);
}

/* H1 — Hedvig serif with the diagonal light-to-dark gradient */
.h1 {
  font-family: var(--serif); font-weight: 400; text-align: center;
  letter-spacing: 0.01em; line-height: 1.15;
  background: linear-gradient(98.7deg, #e8e8e8 0.93%, #828282 101.75%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding: 0.12em 0 0.2em;
  font-size: clamp(21px, 5.7vw, 24px);
  margin-top: 26px;
}
@media (min-width: 600px)  { .h1 { font-size: clamp(28px, 4.43vw, 34px); margin-top: 34px; } }
@media (min-width: 1060px) { .h1 { font-size: clamp(36px, 2.8vw, 40.24px); margin-top: 28px; } }
.br-d { display: none; }
@media (min-width: 600px) { .br-d { display: inline; } .br-m { display: none; } }

/* VSL frame */
.vsl {
  position: relative; width: 100%; max-width: 840px; border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 0 40px rgba(255,255,255,0.1), 0 0 14px rgba(255,255,255,0.22);
  background: #000 url("assets2/vsl-poster.webp") center / cover no-repeat;
  margin-top: 24px;
}
@media (min-width: 600px)  { .vsl { margin-top: 36px; border-radius: 12px; } }
@media (min-width: 1060px) { .vsl { margin-top: 64px; } }
.vsl::before { content: ""; display: block; padding-top: 56.19%; }
.vsl vturb-smartplayer, .vsl .vsl-inner { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vsl .vsl-scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.08); pointer-events: none; }

.hero .pill { margin-top: 20px; }
@media (min-width: 600px)  { .hero .pill { margin-top: 26px; } }
@media (min-width: 1060px) { .hero .pill { margin-top: 32px; } }
.hero-micro { margin-top: 12px; font-size: 12px; line-height: 18px; color: rgba(224,224,224,0.5); text-align: center; }
@media (min-width: 1060px) { .hero-micro { margin-top: 14px; font-size: 14px; line-height: 20px; } }

/* ============================================================
   INTERLUDES
   ============================================================ */
.interlude { position: relative; overflow: hidden; background: #000; }
.interlude img { width: 100%; height: 100%; object-fit: cover; object-position: center; mix-blend-mode: screen; opacity: 0.95; }
.interlude::before, .interlude::after {
  content: ""; position: absolute; left: 0; right: 0; height: 56px; z-index: 1; pointer-events: none;
}
.interlude::before { top: 0; background: linear-gradient(180deg, #000, transparent); }
.interlude::after { bottom: 0; background: linear-gradient(0deg, #000, transparent); }
.int-audience { height: 214px; }
.int-hands   { height: 200px; }
.int-ab      { height: 186px; }
.int-globe   { height: 220px; }
/* the globe sits at ~34% of the asset; shift so the subject reads centered */
.int-globe img { transform: translateX(16%); }
@media (min-width: 600px) {
  .interlude::before, .interlude::after { height: 60px; }
  .int-audience { height: 300px; } .int-hands { height: 280px; }
  .int-ab { height: 260px; } .int-globe { height: 340px; }
}
@media (min-width: 1060px) {
  .interlude::before, .interlude::after { height: 80px; }
  .int-audience { height: 440px; } .int-hands { height: 400px; }
  .int-ab { height: 400px; } .int-globe { height: 500px; }
  .int-globe img { object-fit: contain; }
}

/* ============================================================
   FOUNDERS
   ============================================================ */
.clients { padding-bottom: 40px; }
.clients .wrap { display: flex; flex-direction: column; align-items: center; }
.clients .hairline { margin-bottom: 64px; }
@media (min-width: 600px)  { .clients .hairline { margin-bottom: 96px; } }
@media (min-width: 1060px) { .clients .hairline { margin-bottom: 120px; } }
.founders-grid {
  position: relative; display: grid; gap: 16px; margin-top: 36px;
  grid-template-columns: 1fr; width: 100%;
}
@media (min-width: 600px)  { .founders-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 48px; } }
@media (min-width: 1060px) { .founders-grid { grid-template-columns: repeat(4, 1fr); margin-top: 56px; } }
.founders-glow {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 94%; height: 60%; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(217,217,217,0.07), transparent 70%);
  filter: blur(60px); pointer-events: none;
}
.f-card { border-radius: 20px; padding: 20px; display: flex; flex-direction: column; }
.f-portrait {
  position: relative; border: 1px solid var(--plate-stroke); border-radius: 10px;
  overflow: hidden; aspect-ratio: 265 / 331;
}
.f-portrait img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.12);
}
.f-portrait .key { position: absolute; inset: 0; background: #000; opacity: var(--key, 0); }
.f-portrait .fade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.75) 100%); }
.f-name { font-family: var(--serif); font-size: 20px; line-height: 1.15; letter-spacing: 0.01em; color: var(--display); margin-top: 18px; }
.f-role { font-size: 13px; line-height: 18px; color: rgba(224,224,224,0.7); margin-top: 5px; }

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto { padding: 96px 24px; }
@media (min-width: 600px)  { .manifesto { padding: 120px 48px; } }
@media (min-width: 1060px) { .manifesto { padding: 200px 80px; } }
.manifesto-smoke { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 1440px; min-width: 100%; pointer-events: none; }
.manifesto .wrap { position: relative; display: flex; flex-direction: column; align-items: center; max-width: 886px; }
.manifesto-label { font-family: var(--serif); font-size: 14px; line-height: 1.4; color: var(--display); opacity: 0.5; margin-top: 10px; text-align: center; }
@media (min-width: 600px)  { .manifesto-label { font-size: 16px; } }
@media (min-width: 1060px) { .manifesto-label { font-size: 18px; } }
.manifesto-para {
  text-align: center; color: var(--display); letter-spacing: 0.01em;
  font-size: clamp(16px, 4.36vw, 17px); line-height: 1.52; margin-top: 20px;
}
@media (min-width: 600px)  { .manifesto-para { font-size: clamp(19px, 2.87vw, 22px); line-height: 1.38; margin-top: 26px; } }
@media (min-width: 1060px) { .manifesto-para { font-size: clamp(24px, 1.95vw, 28px); line-height: 1.3; margin-top: 34px; } }
.credential { display: flex; align-items: center; gap: 26px; margin-top: 20px; flex-wrap: wrap; justify-content: center; }
.credential .sep { width: 10px; height: 1px; background: var(--hairline); }
.credential p { font-size: 15px; line-height: 21px; color: var(--ink); }
.credential p + .sep + p, .credential .cohort { color: rgba(224,224,224,0.6); }
@media (min-width: 1060px) { .credential { margin-top: 34px; } .credential p { font-size: 18px; line-height: 25px; } }
@media (max-width: 599px) { .credential { gap: 6px; flex-direction: column; } .credential .sep { display: none; } }
.signature-row { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
@media (min-width: 1060px) { .signature-row { gap: 22px; margin-top: 30px; } }
.signature-row .sig { width: 118px; opacity: 0.9; }
.signature-row .seal { width: 58px; height: 58px; object-fit: contain; opacity: 0.92; }
@media (min-width: 600px)  { .signature-row .sig { width: 140px; } .signature-row .seal { width: 72px; height: 72px; } }
@media (min-width: 1060px) { .signature-row .sig { width: 162px; } .signature-row .seal { width: 84px; height: 84px; } }

/* ============================================================
   COMPARISON (duel cards + revenue band + essays)
   ============================================================ */
.comparison { padding: 64px 24px 40px; }
@media (min-width: 600px)  { .comparison { padding: 96px 48px 40px; } }
@media (min-width: 1060px) { .comparison { padding: 150px 80px 40px; } }
.comparison .wrap { display: flex; flex-direction: column; align-items: center; }
.duel { display: flex; flex-direction: column; gap: 16px; width: 100%; margin-top: 36px; align-items: center; }
@media (min-width: 600px)  { .duel { gap: 20px; margin-top: 48px; } }
@media (min-width: 1340px) { .duel { flex-direction: row; align-items: stretch; margin-top: 64px; } }
.duel-card { border-radius: 20px; width: 100%; max-width: 630px; display: flex; flex-direction: column; }
@media (min-width: 1340px) { .duel-card { flex: 1 1 0; } }
.duel-card.demo {
  border-color: rgba(255,255,255,0.16);
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 100%), linear-gradient(0deg, rgba(255,255,255,0.03), rgba(255,255,255,0.03));
  box-shadow: 0 0 46px rgba(255,255,255,0.05), 0 0 16px rgba(255,255,255,0.1);
}
.duel-card.regular { background: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 100%), linear-gradient(0deg, rgba(255,255,255,0.02), rgba(255,255,255,0.02)); }
.duel-render { position: relative; width: 100%; aspect-ratio: 630 / 400; overflow: hidden; }
.duel-render img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: screen; }
.duel-card.regular .duel-render img { opacity: 0.85; }
.duel-render::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.9)); }
.duel-body { padding: 8px 20px 24px; }
@media (min-width: 1060px) { .duel-body { padding: 8px 28px 28px; } }
.duel-title { font-family: var(--serif); font-size: 20px; line-height: 1.18; letter-spacing: 0.01em; color: var(--display); }
.duel-card.regular .duel-title { color: rgba(232,232,232,0.72); }
@media (min-width: 1060px) { .duel-title { font-size: 24px; } }
.duel-meter { margin-top: 14px; height: 12px; }
.duel-meter img {
  width: 100%; height: 100%; object-fit: cover; object-position: left;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.6s var(--ease-out);
}
.duel-meter.in img { clip-path: inset(0 0 0 0); }
.metric-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; }
.metric-row + .metric-row { border-top: 1px solid rgba(255,255,255,0.07); }
.metric-rows { margin-top: 18px; }
.metric-name { font-weight: 500; font-size: 14px; line-height: 20px; color: var(--display); }
.metric-sub { font-size: 10.5px; line-height: 15px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink); opacity: 0.5; margin-top: 1px; }
@media (min-width: 1060px) {
  .metric-name { font-size: 15px; line-height: 21px; }
  .metric-sub { font-size: 12px; line-height: 17px; letter-spacing: 2px; }
}
.metric-val { font-family: var(--serif); font-size: 24px; line-height: 1.05; letter-spacing: 0.01em; color: var(--display); text-align: right; }
.duel-card.regular .metric-val { color: rgba(232,232,232,0.7); }
@media (min-width: 1060px) { .metric-val { font-size: 28px; } }

.revenue-band { border-radius: 20px; border-color: rgba(255,255,255,0.12); width: 100%; margin-top: 16px; padding: 32px 24px; }
@media (min-width: 600px)  { .revenue-band { margin-top: 20px; padding: 40px 32px; } }
@media (min-width: 1060px) { .revenue-band { padding: 51px 39px; } }
.rev-low  { font-family: var(--serif); font-size: 24px; line-height: 1.1; letter-spacing: 0.01em; color: rgba(232,232,232,0.55); margin-top: 16px; }
.rev-low-sub  { font-size: 12px; line-height: 18px; color: rgba(224,224,224,0.45); margin-top: 2px; }
.rev-high { font-family: var(--serif); font-size: clamp(30px, 8.7vw, 34px); line-height: 1.08; letter-spacing: 0.01em; color: var(--display); margin-top: 20px; }
.rev-high-sub { font-size: 12px; line-height: 18px; color: rgba(224,224,224,0.7); margin-top: 2px; }
@media (min-width: 600px)  { .rev-low { font-size: 28px; } .rev-high { font-size: clamp(36px, 5.4vw, 42px); } .rev-low-sub, .rev-high-sub { font-size: 13px; line-height: 19px; } }
@media (min-width: 1060px) { .rev-low { font-size: 30px; } .rev-high { font-size: 46px; } }

.essays { display: grid; grid-template-columns: 1fr; gap: 26px; width: 100%; margin-top: 30px; }
@media (min-width: 1060px) { .essays { grid-template-columns: 1fr 1fr; gap: 60px; margin-top: 40px; } }
.essay h3 { font-weight: 500; font-size: 15px; line-height: 22px; color: var(--display); margin-bottom: 10px; }
@media (min-width: 1060px) { .essay h3 { font-size: 18px; line-height: 25px; margin-bottom: 12px; } }
.essay p { font-size: 13.5px; line-height: 21px; color: rgba(224,224,224,0.62); }
.essay p + p { margin-top: 14px; }
@media (min-width: 600px)  { .essay p { font-size: 14px; line-height: 22px; } }
@media (min-width: 1060px) { .essay p { font-size: 15px; line-height: 24px; } }
@media (max-width: 1059px) { .essay h3 { text-align: center; } .essay p { text-align: center; } }

/* ============================================================
   TIMELINE
   ============================================================ */
.timeline { padding: 64px 24px 40px; }
@media (min-width: 600px)  { .timeline { padding: 96px 48px 40px; } }
@media (min-width: 1060px) { .timeline { padding: 150px 80px 40px; } }
.timeline .wrap { display: flex; flex-direction: column; align-items: center; }
.days { position: relative; width: 100%; margin-top: 36px; display: flex; flex-direction: column; gap: 32px; }
@media (min-width: 600px)  { .days { gap: 40px; margin-top: 48px; } }
@media (min-width: 1060px) { .days { gap: 44px; margin-top: 72px; } }
.days .spine { display: none; }
@media (min-width: 1060px) {
  .days .spine { display: block; position: absolute; left: 150px; top: 15px; bottom: 165px; width: 1px; background: rgba(255,255,255,0.12); }
}
.day { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 1060px) { .day { display: grid; grid-template-columns: 120px 60px 420px 1fr; gap: 0; align-items: start; } }
.day-tag-col { display: none; }
@media (min-width: 1060px) { .day-tag-col { display: block; text-align: right; padding: 10px 24px 0 0; } }
.day-node { display: none; }
@media (min-width: 1060px) {
  .day-node { display: flex; justify-content: center; padding-top: 8px; }
  .day-node i { position: relative; width: 14px; height: 14px; border: 1px solid rgba(255,255,255,0.35); border-radius: 50%; }
  .day-node i::after { content: ""; position: absolute; left: 4px; top: 4px; width: 4px; height: 4px; background: rgba(255,255,255,0.95); border-radius: 50%; }
}
.day-head { display: flex; align-items: center; gap: 14px; }
@media (min-width: 1060px) { .day-head { display: block; padding-right: 48px; padding-left: 24px; } }
.day-num { font-family: var(--serif); font-size: 40px; line-height: 1; color: var(--display); }
@media (min-width: 600px)  { .day-num { font-size: 52px; } }
@media (min-width: 1060px) { .day-num { font-size: 72px; } }
.day-title-col .label { display: block; margin-bottom: 2px; }
@media (min-width: 1060px) { .day-title-col { margin-top: 10px; } .day-title-col .label { display: none; } }
.day-title { font-weight: 500; font-size: 16px; line-height: 1.35; color: var(--display); }
@media (min-width: 600px)  { .day-title { font-size: 17px; } }
@media (min-width: 1060px) { .day-title { font-size: 20px; line-height: 27px; max-width: 348px; } }
.day-plate { border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 600px)  { .day-plate { flex-direction: row; align-items: center; gap: 16px; padding: 24px; border-radius: 16px; } }
@media (min-width: 1060px) { .day-plate { gap: 20px; } }
.tasks { display: flex; flex-direction: column; gap: 6px; flex: 1; }
@media (min-width: 1060px) { .tasks { gap: 8px; } }
.task { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 18px; color: rgba(224,224,224,0.72); }
.task .arr { opacity: 0.55; flex: none; }
.task.done { font-family: var(--serif); font-size: 15px; color: var(--display); }
@media (min-width: 600px)  { .task { font-size: 12.5px; line-height: 19px; } }
@media (min-width: 1060px) { .task { font-size: 13px; line-height: 20px; gap: 10px; } .task.done { font-size: 16px; } }
.day-art { width: 96px; height: 96px; flex: none; mix-blend-mode: screen; opacity: 0.9; align-self: flex-end; }
@media (min-width: 600px)  { .day-art { width: 116px; height: 116px; align-self: center; } }
@media (min-width: 1060px) { .day-art { width: 150px; height: 150px; } }

/* ============================================================
   TOOLSTACK
   ============================================================ */
.toolstack { padding: 64px 24px 40px; }
@media (min-width: 600px)  { .toolstack { padding: 96px 48px 40px; } }
@media (min-width: 1060px) { .toolstack { padding: 150px 80px 40px; } }
.toolstack .wrap { display: flex; flex-direction: column; align-items: center; }
.bento { display: flex; flex-direction: column; gap: 12px; width: 100%; margin-top: 36px; }
@media (min-width: 600px)  { .bento { gap: 16px; margin-top: 48px; } }
@media (min-width: 1060px) { .bento { gap: 20px; margin-top: 64px; } }
.bento-row { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 600px)  { .bento-row { flex-direction: row; gap: 16px; } }
@media (min-width: 1060px) { .bento-row { gap: 20px; } }
.tool-card { border-radius: 16px; padding: 20px; display: flex; flex-direction: column; flex: 1; }
@media (min-width: 1060px) { .tool-card { padding: 24px; } .tool-card.feat { padding: 28px; } }
.tool-card .label { margin-bottom: 10px; }
@media (min-width: 1060px) { .tool-card .label { margin-bottom: 14px; } }
.tool-serif { font-family: var(--serif); font-size: 18px; line-height: 1.28; letter-spacing: 0.01em; color: var(--display); }
@media (min-width: 600px)  { .tool-serif { font-size: 19px; } }
@media (min-width: 1060px) { .tool-serif { font-size: 24px; } .bento-row .tool-card.feat.wide .tool-serif { font-size: 26px; } }
.tool-text { font-size: 13px; line-height: 1.5; color: rgba(224,224,224,0.8); }
@media (min-width: 600px)  { .tool-text { font-size: 13.5px; } }
@media (min-width: 1060px) { .tool-text { font-size: 15px; line-height: 23px; } }
.marks { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 14px; }
@media (min-width: 1060px) { .marks { gap: 14px; } }
.marks img { mix-blend-mode: screen; opacity: 0.92; height: 44px; width: auto; }
.tool-card.feat .marks img { height: 72px; }
@media (min-width: 600px)  { .marks img { height: 50px; } .tool-card.feat .marks img { height: 84px; } }
@media (min-width: 1060px) {
  .marks img { height: 58px; }
  .tool-card.feat .marks img { height: 128px; }
  .tool-card.tall .marks { flex-direction: column; margin: auto 0; padding: 0; justify-content: center; align-items: center; flex: 1; gap: 10px; }
  .tool-card.tall .marks img { height: 132px; }
  .tool-card.tall.single .marks img { height: 190px; }
  .tool-card.wide .marks img { height: 104px; }
}
/* desktop masonry lanes */
@media (min-width: 1060px) {
  .bento-a, .bento-b { display: flex; gap: 20px; }
  .bento-a .lane-1, .bento-b .lane-2 { width: 31.25%; display: flex; }
  .bento-a .lane-2, .bento-b .lane-1 { width: 67.19%; display: flex; flex-direction: column; gap: 20px; }
  .bento-pair { display: flex; gap: 20px; }
  .bento-pair .tool-card { flex: 1 1 0; }
  .bento-c { display: flex; gap: 20px; }
  .bento-c .tool-card:first-child { width: 31.25%; flex: none; }
  .bento-c .tool-card { flex: 1 1 0; }
}
@media (max-width: 1059px) and (min-width: 600px) {
  .bento-a, .bento-b, .bento-c { display: flex; flex-direction: row; flex-wrap: wrap; gap: 16px; }
  .bento-a > *, .bento-b > *, .bento-pair { display: contents; }
  .bento-a .tool-card, .bento-b .tool-card, .bento-c .tool-card, .bento-pair .tool-card { flex: 1 1 calc(50% - 8px); min-width: calc(50% - 8px); }
  .bento .tool-card.wide { flex: 1 1 100%; min-width: 100%; }
}
@media (max-width: 599px) {
  .bento-a, .bento-b, .bento-c, .bento-pair { display: flex; flex-direction: column; gap: 12px; }
  .bento-a > *, .bento-b > * { display: contents; }
}

/* ============================================================
   CLOSING (dome)
   ============================================================ */
.closing { padding: 300px 24px 64px; }
@media (min-width: 600px)  { .closing { padding: 430px 48px 96px; } }
@media (min-width: 1060px) { .closing { padding: 630px 80px 140px; } }
.closing-dome { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); width: 1440px; min-width: 100%; pointer-events: none; }
@media (min-width: 1441px) { .closing-dome { width: 100vw; top: 0; } }
.closing .wrap { position: relative; display: flex; flex-direction: column; align-items: center; }
.closing-inner { padding: 30px 0; display: flex; flex-direction: column; align-items: center; width: 100%; }
@media (min-width: 600px)  { .closing-inner { padding: 40px 0; } }
@media (min-width: 1060px) {
  .closing-inner { flex-direction: row; justify-content: space-between; align-items: center; text-align: left; padding: 56px 0; }
}
.closing-copy { display: flex; flex-direction: column; align-items: center; gap: 12px; }
@media (min-width: 1060px) { .closing-copy { align-items: flex-start; gap: 18px; max-width: 720px; } }
.h3 { font-family: var(--serif); font-size: 24px; line-height: 1.24; letter-spacing: 0.01em; color: var(--display); text-align: center; }
@media (min-width: 600px)  { .h3 { font-size: 30px; } }
@media (min-width: 1060px) { .h3 { font-size: 40px; line-height: 1.15; text-align: left; } }
.closing-sub { font-size: 13.5px; line-height: 20px; color: rgba(224,224,224,0.7); text-align: center; max-width: 480px; }
@media (min-width: 600px)  { .closing-sub { font-size: 15px; line-height: 22px; } }
@media (min-width: 1060px) { .closing-sub { font-size: 18px; line-height: 28px; text-align: left; max-width: 560px; } }
.closing .pill { margin-top: 20px; }
@media (min-width: 1060px) { .closing .pill { margin-top: 0; flex: none; } }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { padding: 44px 24px; }
@media (min-width: 600px)  { .footer { padding: 56px 48px; } }
@media (min-width: 1060px) { .footer { padding: 0 80px 64px; } }
.colophon { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; }
@media (min-width: 1060px) { .colophon { padding-bottom: 24px; } }
.colophon .wordmark { opacity: 0.8; }
.colophon .wordmark span { font-family: var(--serif); font-size: 17px; }
.colophon .wordmark img { width: 14.4px; height: 15px; }
@media (min-width: 1060px) { .colophon .wordmark span { font-size: 18px; } .colophon .wordmark img { width: 15.4px; height: 16px; } }
.disclaimers { display: grid; grid-template-columns: 1fr; gap: 16px; padding-top: 20px; }
@media (min-width: 600px)  { .disclaimers { grid-template-columns: 1fr 1fr; gap: 24px; padding-top: 22px; } }
@media (min-width: 1060px) { .disclaimers { gap: 64px; padding-top: 32px; } }
.disclaimers p { font-size: 11px; line-height: 16px; color: rgba(224,224,224,0.4); }
.disclaimers p + p { margin-top: 12px; }
@media (min-width: 600px)  { .disclaimers p { font-size: 11.5px; line-height: 17px; } }
@media (min-width: 1060px) { .disclaimers p { font-size: 12px; line-height: 18px; } }

/* ============================================================
   APPLICATION MODAL
   ============================================================ */
.overlay {
  position: fixed; inset: 0; z-index: 60; display: none;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,0.62); padding: 20px;
  opacity: 0; transition: opacity 0.4s var(--ease-out);
}
.overlay.open { display: flex; }
.overlay.visible { opacity: 1; }
.modal {
  position: relative; width: 100%; max-width: 350px;
  background: #0a0a0a; border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px; padding: 20px 20px 26px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.6), 0 0 28px rgba(255,255,255,0.06);
  transform: translateY(14px); opacity: 0;
  transition: transform 0.5s var(--ease-out), opacity 0.5s var(--ease-out);
}
.overlay.visible .modal { transform: none; opacity: 1; }
@media (min-width: 600px) { .modal { max-width: 640px; padding: 28px 28px 40px; border-radius: 24px; } }
.modal-head { display: flex; align-items: center; justify-content: space-between; }
.modal-close { padding: 6px; margin: -6px; opacity: 0.5; transition: opacity 0.2s; }
.modal-close:hover { opacity: 0.9; }
.modal .loader { width: 100%; margin: 16px 0 0; }
@media (min-width: 600px) { .modal .loader { margin-top: 24px; } }
.q-title { font-family: var(--serif); font-size: 19px; line-height: 1.28; letter-spacing: 0.005em; color: var(--display); text-align: center; margin-top: 22px; }
@media (min-width: 600px) { .q-title { font-size: 27px; line-height: 1.25; margin-top: 32px; max-width: 520px; margin-left: auto; margin-right: auto; } }
.q-subject { font-size: 12px; line-height: 18px; color: rgba(224,224,224,0.55); text-align: center; margin: 9px auto 0; max-width: 480px; }
@media (min-width: 600px) { .q-subject { font-size: 14px; line-height: 21px; margin-top: 12px; } }
.q-options { display: flex; flex-direction: column; gap: 7px; margin-top: 18px; }
@media (min-width: 600px) { .q-options { gap: 9px; margin-top: 26px; max-width: 520px; margin-left: auto; margin-right: auto; width: 100%; } }
.q-opt {
  display: flex; align-items: center; gap: 10px; text-align: left; width: 100%;
  padding: 11px 14px; border-radius: 10px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.06);
  font-size: 13.5px; line-height: 19px; color: rgba(224,224,224,0.85);
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
@media (min-width: 600px) { .q-opt { padding: 14px 20px; border-radius: 12px; font-size: 15px; line-height: 21px; } }
.q-opt:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.14); }
.q-opt.other { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.1); }
.q-opt.other span { opacity: 0.6; flex: none; }
.q-opt.other input {
  flex: 1; background: none; border: 0; outline: 0; color: var(--ink);
  border-bottom: 1px solid rgba(255,255,255,0.2); padding: 0 0 2px; min-width: 0;
}
.q-fields { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
@media (min-width: 600px) { .q-fields { gap: 10px; margin-top: 26px; max-width: 520px; margin-left: auto; margin-right: auto; width: 100%; } }
.q-field {
  width: 100%; padding: 12px 14px; border-radius: 10px;
  background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.12);
  color: var(--ink); font-size: 13.5px; line-height: 19px; outline: none;
  transition: border-color 0.2s;
}
.q-field::placeholder { color: rgba(224,224,224,0.35); }
.q-field:focus { border-color: rgba(255,255,255,0.3); }
.q-field.err { border-color: rgba(255,120,120,0.55); }
@media (min-width: 600px) { .q-field { padding: 15px 20px; border-radius: 12px; font-size: 15px; line-height: 21px; } }
.modal .pill { margin: 16px auto 0; display: flex; width: 100%; max-width: 520px; }
@media (min-width: 600px) { .modal .pill { margin-top: 24px; width: auto; min-width: 260px; } }
.received { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 20px; }
@media (min-width: 600px) { .received { padding-top: 30px; } }
.received .seal { width: 68px; height: 68px; object-fit: contain; }
@media (min-width: 600px) { .received .seal { width: 96px; height: 96px; } }
.received h3 { font-family: var(--serif); font-weight: 400; font-size: 19px; line-height: 1.28; color: var(--display); margin-top: 14px; max-width: 460px; }
@media (min-width: 600px) { .received h3 { font-size: 26px; line-height: 1.25; margin-top: 22px; } }
.received p { font-size: 12.5px; line-height: 19px; color: rgba(224,224,224,0.65); margin-top: 10px; max-width: 440px; }
@media (min-width: 600px) { .received p { font-size: 15px; line-height: 24px; margin-top: 14px; } }
.step { display: none; }
.step.active { display: block; }

/* ---------- wax loader (molten reveal) ---------- */
.wax-loader {
  position: fixed; inset: 0; z-index: 70; display: none;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55);
}
.wax-loader.open { display: flex; }
.wax-stage { position: relative; width: 132px; height: 132px; }
.wax-stage .wax {
  position: absolute; inset: 0; object-fit: contain;
  clip-path: inset(100% 0 0 0);
}
.wax-stage .edge {
  position: absolute; left: 6%; right: 6%; height: 10px; top: 100%;
  background: radial-gradient(ellipse at center, rgba(255,236,205,0.95), rgba(255,236,205,0) 70%);
  filter: blur(2px); opacity: 0;
}

/* honeypot: present for bots, never shown to or reachable by a person */
.q-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }