/* Ponderica — the light, professional theme (Nov 12). Loaded last; it replaces the dark red HUD look.
   Paper background, ink type, one liquid orb. The product's own interface (the recording and the simulated
   session) stays dark inside its frames, because that is what the app looks like. */

:root {
  --paper: #f3f2ee;
  --ink: #0e1014;
  --bg: var(--paper);
  --center-glow: transparent;
  --panel: #ffffff;
  --panel-clear: rgba(255, 255, 255, 0.7);
  --accent: #0e1014;
  --accent-glow: transparent;
  --rose: #5b6170;
  --decor: #0e1014;
  --link: #0e1014;
  --text: #0e1014;
  --muted: #555b66;
  --faint: #8b909a;
  --warn: #a96a00;
  --done: #12804d;
  --line: #d8d6cf;
  --signal: #c8102e;
  --title: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Inter, Arial, sans-serif;
  --ui: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Inter, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --radius: 20px;
  --shadow: 0 1px 2px rgba(14, 16, 20, 0.04), 0 12px 40px rgba(14, 16, 20, 0.07);
  color-scheme: light;
}
/* The app's interface keeps its own colours inside its frames. */
.stage {
  --bg: #07030a; --panel: rgba(12, 4, 8, 0.9); --panel-clear: rgba(46, 10, 18, 0.55); --accent: #ff1f3d; --rose: #ff5a6e;
  --decor: #ff8a98; --link: #ffb3bd; --text: #fff1f3; --muted: #c99aa3; --faint: #7d5560; --warn: #f2d24b; --done: #57d6a0;
  --line: #8a4a56; --title: "Oxanium", "Helvetica Neue", sans-serif; --ui: "Chakra Petch", ui-monospace, Menlo, monospace;
  color: var(--text); font-family: var(--ui); background: #07030a; border-radius: var(--radius); border: 0;
  box-shadow: 0 30px 90px rgba(14, 16, 20, 0.28); padding: 18px; color-scheme: dark;
}

html { background: var(--paper); }
body { background: var(--paper); color: var(--ink); font-family: var(--ui); font-size: 17px; line-height: 1.55; letter-spacing: -0.005em; }
::selection { background: var(--ink); color: var(--paper); }
.bg-glow, .scanlines, .reticle, .deco, .grid-floor, .boot, .sys, .sec-num, .goo, .lens-copy { display: none !important; }
a { color: var(--ink); }

/* ---------- Small labels ---------- */
.micro, .kicker, .card-label { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; color: var(--faint); }
.kicker { color: var(--muted); }
.card-label span { color: var(--faint); }
.card p.micro { font-size: 11px; color: var(--faint); }
kbd { font-family: var(--mono); font-size: 0.82em; border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; background: #fff; color: var(--ink); }

/* ---------- Buttons ---------- */
.btn {
  border: 1px solid rgba(14, 16, 20, 0.22); outline: 0; border-radius: 999px; background: transparent; color: var(--ink);
  font-family: var(--ui); font-size: 14px; font-weight: 500; letter-spacing: -0.005em; text-transform: none; padding: 10px 18px;
  box-shadow: none; transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}
.btn:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); box-shadow: none; }
.btn-small { padding: 8px 15px; font-size: 13px; }
.btn-big { padding: 16px 28px; font-size: 16px; }
.btn-hot, .btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); box-shadow: none; outline: 0; }
.btn-hot:hover, .btn[aria-pressed="true"]:hover { background: #2a2d35; border-color: #2a2d35; transform: translateY(-1px); }
.btn:focus-visible, .chip:focus-visible, .mood:focus-visible, .kill:focus-visible, input:focus-visible, .beat:focus-visible,
.seg button:focus-visible, .hold:focus-visible, .obj:focus-visible, .faq summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---------- Top bar ---------- */
.topbar { background: color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; }
.docked .topbar { border-bottom-color: var(--line); }
.brand { color: var(--ink); font-family: var(--ui); font-weight: 600; letter-spacing: 0.02em; font-size: 17px; text-shadow: none; text-transform: none; }
.brand-mark { background: radial-gradient(circle at 35% 30%, #fff, #9aa3b5 45%, #0e1014 100%); box-shadow: none; }
.topbar .nav .btn:not(.btn-hot) { border-color: transparent; }
.topbar .nav .btn:not(.btn-hot):hover { background: rgba(14, 16, 20, 0.07); color: var(--ink); }

/* ---------- Hero ---------- */
.hero { --oy: 33vh; padding-bottom: 90px; }
.hero-copy { padding-top: max(56vh, 340px); max-width: 1120px; }
.hero-copy > * { animation: rise 0.9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: 2.5s; }
.hero-copy > .caption { animation-delay: 2.3s; }
.hero-copy > .cta-row { animation-delay: 2.7s; }
.hero-copy > .platforms, .hero-copy > .moods, .hero-copy > .ask-hint { animation-delay: 2.9s; }
.hero > .mic-row { animation: rise 0.9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: 3.1s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
.caption { font-size: 15px; color: var(--muted); text-shadow: none; margin-bottom: 22px; padding: 6px 14px 6px 6px; background: #fff; border-radius: 999px; box-shadow: var(--shadow); }
.pill { border-radius: 999px; padding: 3px 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; box-shadow: none; background: var(--ink); }
.hero-copy .kicker { text-transform: none; font-family: var(--ui); font-size: 15px; letter-spacing: 0; color: var(--muted); margin-bottom: 18px; }
.headline { margin: 0 0 30px; font-family: var(--title); font-weight: 600; font-size: clamp(38px, 6.3vw, 98px); line-height: 0.98; letter-spacing: -0.045em; color: var(--faint); text-wrap: balance; }
.headline em { font-style: normal; color: var(--ink); }
.platforms { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.05em; color: var(--faint); margin-top: 20px; }
.platforms b { color: var(--ink); font-weight: 500; }
.platforms i { border-radius: 50%; box-shadow: none; }
.platforms i.soon { box-shadow: none; }
.moods { margin-top: 34px; }
.mood { border-radius: 999px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; font-weight: 500; padding: 6px 12px; color: var(--muted); border: 1px solid var(--line); background: transparent; box-shadow: none; text-shadow: none; }
.mood:hover { border-color: var(--c); color: var(--c); background: transparent; box-shadow: none; }
.mood.is-on { background: var(--c); border-color: var(--c); color: #fff; box-shadow: none; }
.mood[data-mood="neutral"] { --c: #1b2a4a !important; } .mood[data-mood="warm"] { --c: #b4621f !important; }
.mood[data-mood="amused"] { --c: #a3287f !important; } .mood[data-mood="dry"] { --c: #3a3f4a !important; }
.mood[data-mood="concerned"] { --c: #4b2f86 !important; } .mood[data-mood="pleased"] { --c: #12806a !important; }
.mood[data-mood="apologetic"] { --c: #6b7280 !important; } .mood[data-mood="urgent"] { --c: #c8102e !important; }
.ask-hint { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.05em; color: var(--faint); }
.mic-row { color: var(--muted); font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; border-color: var(--line); }
.readout b, .device { color: var(--ink); }
.meter i { background: #dcdad3; box-shadow: none; }
.meter i.on { background: var(--ink); box-shadow: none; }
.meter i.on.hi, .meter i.on.pk { background: var(--signal); box-shadow: none; }
.live-dot { color: var(--signal); }
.live-dot::before { background: var(--signal); box-shadow: none; }
.mic-note { color: var(--faint); }
.orb-hit { cursor: pointer; }

/* ---------- Sections and headings ---------- */
.section { padding-top: 150px; }
.sec-head { max-width: 900px; margin-bottom: 54px; }
.sec-head h2, .join h2 { font-family: var(--title); font-weight: 600; font-size: clamp(34px, 5.2vw, 76px); line-height: 1; letter-spacing: -0.04em; margin: 14px 0 18px; text-shadow: none; text-wrap: balance; }
.sec-head h2.decoding { color: var(--faint); text-shadow: none; }
.sec-sub { color: var(--muted); font-size: 19px; line-height: 1.5; max-width: 620px; }

/* ---------- Cards ---------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px 26px 28px; }
.card::before, .card::after { display: none; }
.card h3 { font-family: var(--title); font-weight: 600; font-size: 23px; letter-spacing: -0.025em; line-height: 1.12; margin: 12px 0 10px; }
.card p { color: var(--muted); font-size: 15.5px; }
.card .card-label { color: var(--faint); }

/* Capability tiles */
.feature-grid { gap: 16px; }
.feature-grid .card { padding: 18px 24px 28px; }
.feature-grid .card:hover, .feature-grid .card.lit { border-color: transparent; box-shadow: 0 24px 60px rgba(14, 16, 20, 0.2); }
.flood { background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--c) 86%, #fff) 0%, var(--c) 70%); border-radius: inherit; }
.feature-grid .card .art { filter: drop-shadow(0 18px 20px rgba(14, 16, 20, 0.28)); }
.feature-grid .card:hover .art, .feature-grid .card.lit .art { filter: drop-shadow(0 26px 28px rgba(0, 0, 0, 0.45)); }
.feature-grid .card:hover h3, .feature-grid .card.lit h3 { color: #fff; }
.feature-grid .card:hover p, .feature-grid .card.lit p { color: rgba(255, 255, 255, 0.86); }
.feature-grid .card:hover .card-label, .feature-grid .card.lit .card-label,
.feature-grid .card:hover .card-label span, .feature-grid .card.lit .card-label span { color: rgba(255, 255, 255, 0.7); }

/* ---------- Statement band and closing line ---------- */
.band { padding: 110px 0 20px; }
.band-row { font-family: var(--title); font-weight: 700; letter-spacing: -0.05em; }
.band-row span { -webkit-text-stroke: 1.5px rgba(14, 16, 20, 0.42); }
.band-row b { color: var(--ink); text-shadow: none; font-weight: 700; }
.band-row i { color: var(--line); }
.mega-close { font-family: var(--title); letter-spacing: -0.05em; }
.wordmark span, .mega-close span { color: var(--ink); text-shadow: none; font-variation-settings: normal; font-weight: calc(300 + var(--g, 0) * 500); transform: translateY(var(--dy, 0)); }

/* ---------- The recording ---------- */
.proof::before { display: none; }
.proof { padding-bottom: 60px; }
.screen { border: 0; border-radius: 22px; overflow: hidden; box-shadow: 0 40px 120px rgba(14, 16, 20, 0.3), 0 0 0 1px rgba(14, 16, 20, 0.08); background: #0b0c16; }
.screen .corner { display: none; }
.screen-tag { border: 0; border-radius: 999px; background: rgba(14, 16, 20, 0.72); color: #fff; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; padding: 6px 12px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.screen-tag b { color: #ff6b7d; }
.beats { margin-top: 22px; }
.beat { border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-family: var(--ui); font-size: 13.5px; font-weight: 500; letter-spacing: 0; text-transform: none; padding: 8px 16px; box-shadow: none; }
.beat:hover { color: var(--ink); border-color: var(--ink); }
.beat.on { background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: none; }
.fineprint { color: var(--faint); font-size: 13px; }

/* ---------- Eyes ---------- */
.lens { border: 0; border-radius: var(--radius); box-shadow: 0 30px 80px rgba(14, 16, 20, 0.22); }
.lens::after { display: none; }
.sweep { background: linear-gradient(transparent, rgba(255, 255, 255, 0.22) 85%, #fff); }
.obj:hover i { border-color: rgba(255, 255, 255, 0.6); }
.obj.on i { border-color: #fff; border-radius: 6px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 6px 20px rgba(0, 0, 0, 0.35); }
.obj i { border-radius: 6px; }
.obj em { background: #fff; color: var(--ink); border-radius: 999px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em; padding: 3px 9px; margin-bottom: 6px; left: 0; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); }
.lens-tag, .lens-live { border: 0; border-radius: 999px; background: rgba(14, 16, 20, 0.6); color: #fff; font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em; padding: 5px 10px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.lens-live::before { background: #fff; box-shadow: none; }
.card p.seen-count { font-family: var(--title); font-weight: 600; letter-spacing: -0.04em; font-size: 60px; color: var(--ink); }
.seen-count small { font-family: var(--mono); letter-spacing: 0.06em; color: var(--faint); font-weight: 500; }
.seen { color: var(--ink) !important; }
.chip { border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); font-family: var(--ui); font-size: 14.5px; letter-spacing: 0; padding: 11px 14px; box-shadow: none; }
.chip:hover:not(:disabled) { background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: none; }
.stage .chip { border-radius: 0; background: transparent; color: var(--text); border-color: rgba(196, 13, 38, 0.6); font-family: var(--ui); }
.stage .chip:hover:not(:disabled) { background: rgba(196, 13, 38, 0.2); color: var(--text); border-color: rgba(196, 13, 38, 0.6); }
.stage .btn { border-radius: 0; text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; font-weight: 600; color: var(--text); border-color: rgba(255, 220, 226, 0.55); font-family: var(--ui); }
.stage .btn:hover { background: rgba(10, 3, 6, 0.6); color: var(--text); border-color: #fff; }
.stage .btn-hot, .stage .btn[aria-pressed="true"] { background: #ff1f3d; border-color: #ff1f3d; color: #fff; }
.stage .micro { font-family: var(--ui); letter-spacing: 0.2em; font-size: 11px; font-weight: 600; color: var(--muted); }
.stage .mic-row { font-family: var(--ui); color: var(--muted); }
.stage .meter i { background: #2a0c13; } .stage .meter i.on { background: #ff1f3d; }
.stage .readout b, .stage .device { color: var(--text); }
.stage input { color: var(--text); }
.stage kbd { background: transparent; color: var(--text); }

/* ---------- Hold for yes ---------- */
.folder { border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.folder.target { border-color: var(--ink); border-style: dashed; box-shadow: none; }
.folder h4 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; color: var(--faint); font-weight: 500; }
.folder h4 b { color: var(--ink); }
.file { border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font-family: var(--mono); font-size: 11.5px; padding: 5px 8px; }
.card p.ask-line { font-family: var(--title); font-weight: 600; letter-spacing: -0.03em; font-size: clamp(24px, 2.8vw, 36px); line-height: 1.08; color: var(--ink); }
.yes-status { color: var(--muted) !important; }
.hold { background: var(--ink); color: var(--paper); font-family: var(--ui); font-weight: 600; font-size: 15px; letter-spacing: 0;
  box-shadow: 0 calc(10px + var(--p) * 14px) calc(30px + var(--p) * 30px) rgba(14, 16, 20, calc(0.22 + var(--p) * 0.2)); }
.hold::before { background: conic-gradient(var(--ink) calc(var(--p) * 360deg), var(--line) 0); }
.hold small { font-family: var(--mono); letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.6); font-weight: 500; }
.yes-log { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.03em; color: var(--muted); }
.yes-log li::before { color: var(--faint); }

/* ---------- Control ---------- */
.kill { background: radial-gradient(circle at 45% 38%, #ff6b7d, #e0142f 45%, #7d0a1e 100%); box-shadow: 0 0 0 8px rgba(224, 20, 47, 0.1), 0 18px 40px rgba(200, 16, 46, 0.3), inset 0 -8px 20px rgba(0, 0, 0, 0.3); }
.kill-ring { background: repeating-conic-gradient(var(--ink) 0 10deg, transparent 10deg 20deg); opacity: 0.35; }
.kill-label { font-family: var(--ui); font-weight: 700; letter-spacing: 0.04em; font-size: 17px; }
.kill-state { color: var(--muted); }
.killed .kill-state { color: var(--warn); }
.cap-meter { background: #e7e5de; border-radius: 999px; height: 8px; }
.cap-meter i { box-shadow: none; border-radius: 999px; }
.cap-meter.full i { background: var(--signal); box-shadow: none; }
.rules li { color: var(--muted); font-size: 15px; }
.rules li::before { box-shadow: none; border-radius: 50%; width: 6px; height: 6px; top: 0.6em; }
.menu-row { border-bottom-color: var(--line); }
.menu-row b { color: var(--ink); font-weight: 600; }
.seg { border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--paper); }
.seg button { font-family: var(--ui); font-size: 12.5px; letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--muted); padding: 7px 13px; }
.seg button + button { border-left: 0; }
.seg button[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; border-radius: 999px; }
.seg button[data-v="ask"][aria-pressed="true"] { background: #b7791f; color: #fff; box-shadow: none; }
.seg button[data-v="off"][aria-pressed="true"] { background: #9a9ea8; color: #fff; }
.menu-note { color: var(--ink) !important; }
.kill-banner { background: var(--ink); border: 0; border-radius: 999px; color: #fff; box-shadow: var(--shadow); padding: 8px 8px 8px 18px; }
.kill-banner .btn { background: #fff; color: var(--ink); border-color: #fff; }

/* ---------- Pricing, FAQ, join, footer ---------- */
.card p.price { font-family: var(--title); font-weight: 600; letter-spacing: -0.05em; color: var(--ink); text-shadow: none; }
.price small { font-family: var(--mono); letter-spacing: 0.05em; color: var(--faint); font-weight: 500; text-shadow: none; }
.ticks li { color: var(--muted); font-size: 15.5px; }
.ticks li::before, .rules li::before { background: var(--ink); }
.ticks li::before { box-shadow: none; border-radius: 50%; width: 6px; height: 6px; top: 0.6em; }
.spec dt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; color: var(--faint); }
.spec dd { color: var(--ink); }
.tag-req, .tag-opt { border-radius: 999px; font-family: var(--mono); letter-spacing: 0.04em; padding: 2px 8px; }
.faq details { border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: none; }
.faq details[open] { border-color: var(--ink); box-shadow: var(--shadow); }
.faq summary { font-family: var(--title); font-weight: 600; letter-spacing: -0.02em; font-size: 19px; padding: 20px 52px 20px 22px; }
.faq summary::after { color: var(--ink); }
.faq p { padding: 0 22px 22px; color: var(--muted); font-size: 16px; }
.join-card { padding: 60px clamp(22px, 5vw, 64px) 64px; }
.form-msg { color: var(--faint) !important; }
.footer { border-top: 1px solid var(--line); color: var(--faint); font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.02em; }
.footer a { color: var(--muted); }

/* ---------- Ask bar, rail, corner ---------- */
.ask form { background: #fff; border: 1px solid var(--line); outline: 0; border-radius: 999px; box-shadow: 0 14px 44px rgba(14, 16, 20, 0.16); padding: 0 6px 0 20px; backdrop-filter: none; }
.ask form:focus-within { border-color: var(--ink); box-shadow: 0 14px 44px rgba(14, 16, 20, 0.22); }
.ask form > span { color: var(--faint); font-family: var(--ui); }
.ask input { color: var(--ink); font-family: var(--ui); }
.ask input::placeholder { color: var(--faint); }
.ask kbd { color: var(--faint); border-color: var(--line); }
.ask-panel { background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 24px 70px rgba(14, 16, 20, 0.2); padding: 18px 20px; }
.ask-answer { color: var(--ink); font-size: 16px; }
.ask-chips button { border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-family: var(--ui); font-size: 13px; letter-spacing: 0; padding: 6px 12px; }
.ask-chips button:hover { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.ask-close { color: var(--faint); }
.ask-close:hover { color: var(--ink); }
.rail a { color: var(--faint); font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; }
.rail a.on { color: var(--ink); }
.rail a.on::before { background: var(--ink); box-shadow: none; }
.corner-tag { display: none; }

/* ---------- Small pages ---------- */
.doc h1 { font-family: var(--title); font-weight: 600; letter-spacing: -0.04em; }
.doc h2 { font-family: var(--title); font-weight: 600; letter-spacing: -0.02em; }
.doc .draft { border-radius: 12px; background: #fff7e6; border-color: #e7c98a; color: #7a5200; }

@media (max-width: 720px) {
  body { font-size: 16px; }
  .hero { --oy: 27vh; }
  .hero-copy { padding-top: 47vh; }
  .section { padding-top: 96px; }
  .band { padding-top: 60px; }
  .stage { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-copy > *, .hero > .mic-row { animation: none; }
}

/* ---------- Fixes after the first on-screen check of the light theme ---------- */
/* ".proof" is also a small panel class in site.css; the recording section must not inherit its look. */
.section.proof { border-left: 0; background: none; font-size: inherit; margin-top: 0; padding: 150px var(--gutter) 60px; overflow: visible; }
/* Outlined system type draws its inner joins, so the quiet words are a soft solid instead. */
.band-row span { -webkit-text-stroke: 0; color: #dddbd4; }
/* The closing line: each letter is measured at its heaviest, so the weight must come from the same value. */
.wordmark span, .mega-close span { font-weight: var(--w, 300); }

/* =====================================================================================================
   Colour (Nov 12, later): Vesper is red again, and the page uses his red as its one loud colour:
   red buttons and accents, a full red statement band, an ink-black "your yes" block and a red close.
   ===================================================================================================== */
:root { --red: #c40d26; --red-deep: #9c0a1e; --signal: #c40d26; }
::selection { background: var(--red); color: #fff; }

/* Buttons and small accents */
.btn-hot, .btn[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 10px 28px rgba(196, 13, 38, 0.32); }
.btn-hot:hover, .btn[aria-pressed="true"]:hover { background: var(--red-deep); border-color: var(--red-deep); box-shadow: 0 14px 34px rgba(196, 13, 38, 0.42); }
.btn-small.btn-hot { box-shadow: 0 6px 18px rgba(196, 13, 38, 0.3); }
.brand-mark { background: radial-gradient(circle at 35% 30%, #ffd0d7, var(--red) 50%, #7d0a1e 100%); box-shadow: 0 0 12px rgba(196, 13, 38, 0.5); }
.kicker { color: var(--red); }
.hero-copy .kicker { color: var(--muted); }
.headline em { color: var(--red); }
.sec-head h2.decoding { color: var(--red); }
.beat.on { background: var(--red); border-color: var(--red); color: #fff; }
.rail a.on::before { background: var(--red); }
.faq details[open] { border-color: var(--red); }
.faq summary::after { color: var(--red); }
.ticks li::before, .rules li::before { background: var(--red); }
.tag-req { background: var(--red); }
.cap-meter i { background: var(--red); }
.cap-row input { accent-color: var(--red); }
.folder.target { border-color: var(--red); }
.ask form:focus-within { border-color: var(--red); box-shadow: 0 14px 44px rgba(196, 13, 38, 0.22); }
.meter i.on { background: var(--red); }
a:hover { color: var(--red); }
.mood[data-mood="neutral"] { --c: #c40d26 !important; } .mood[data-mood="warm"] { --c: #ff6418 !important; }
.mood[data-mood="amused"] { --c: #c98400 !important; } .mood[data-mood="dry"] { --c: #a80f26 !important; }
.mood[data-mood="concerned"] { --c: #8c1466 !important; } .mood[data-mood="pleased"] { --c: #ee3b2b !important; }
.mood[data-mood="apologetic"] { --c: #9b4c5c !important; } .mood[data-mood="urgent"] { --c: #ff0000 !important; }

/* Hero: a warm bloom of his colour behind the orb */
.hero::before { content: ""; position: absolute; left: 50%; top: 33vh; width: min(1100px, 120vw); aspect-ratio: 1; transform: translate(-50%, -50%); z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(196, 13, 38, 0.2) 0%, rgba(255, 70, 40, 0.07) 55%, rgba(255, 70, 40, 0) 100%); animation: bloomIn 1.8s ease-out 1.6s both; }
@keyframes bloomIn { from { opacity: 0; } }

/* The camera boxes are red, as they are in the app */
.obj.on i { border-color: var(--red); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 0 18px rgba(196, 13, 38, 0.6); }
.obj em { background: var(--red); color: #fff; }
.sweep { background: linear-gradient(transparent, rgba(196, 13, 38, 0.3) 85%, #fff); }

/* Statement band: a full red block */
.band { background: var(--red); padding: 90px 0 80px; margin-top: 110px; }
.band-row span { color: rgba(60, 4, 12, 0.34); }
.band-row b { color: #fff; }
.band-row i { color: rgba(255, 255, 255, 0.45); }

/* Your yes: an ink-black block, with the yes itself in red */
#hands, #pricing { position: relative; isolation: isolate; padding-bottom: 130px; }
#hands::before, #pricing::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; z-index: -1; }
#hands { margin-top: 130px; }
#hands::before { background: var(--ink); }
#hands .sec-head h2 { color: #fff; }
#hands .sec-sub { color: rgba(255, 255, 255, 0.68); }
#hands .card { border-color: transparent; }
.hold { background: var(--red); color: #fff; box-shadow: 0 calc(10px + var(--p) * 14px) calc(30px + var(--p) * 40px) rgba(196, 13, 38, calc(0.35 + var(--p) * 0.35)); }
.hold::before { background: conic-gradient(var(--red) calc(var(--p) * 360deg), var(--line) 0); }
.hold:disabled { background: #b9bcc4; box-shadow: none; opacity: 1; }
.hold small { color: rgba(255, 255, 255, 0.75); }

/* Pricing: a soft blush block, with the price in red */
#pricing { margin-top: 130px; }
#pricing::before { background: linear-gradient(180deg, #f6dfe0, #f7e9e2); }
.card p.price { color: var(--red); }

/* The close: red, with the line in white */
.join { background: var(--red); margin-top: 130px; padding-top: 110px; padding-bottom: 130px; }
.mega-close span { color: #fff; }
.join-card { border-color: transparent; box-shadow: 0 30px 90px rgba(125, 10, 30, 0.35); }
.footer { border-top: 0; background: var(--ink); color: rgba(255, 255, 255, 0.55); padding-top: 34px; }
.footer a { color: rgba(255, 255, 255, 0.8); }
.footer a:hover { color: #fff; }

/* Capability tiles lift in colour */
.feature-grid .card:hover, .feature-grid .card.lit { box-shadow: 0 26px 64px color-mix(in srgb, var(--c) 45%, transparent); }
.flood { background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--c) 82%, #fff) 0%, var(--c) 72%); }

@media (max-width: 720px) {
  .band { padding: 50px 0 44px; margin-top: 70px; }
  #hands, #pricing, .join { margin-top: 80px; padding-bottom: 90px; }
  .join { padding-top: 70px; }
}

/* =====================================================================================================
   Self-review fixes (Nov 12, later)
   ===================================================================================================== */
/* The glow behind the orb is painted on the hero itself, so it has no edges. */
.hero::before { display: none; }
.hero { background: radial-gradient(ellipse 46% 44% at 50% 33vh, rgba(196, 13, 38, 0.16), rgba(196, 13, 38, 0.05) 55%, rgba(196, 13, 38, 0) 78%); }
/* The top bar stays paper-coloured over the red and black blocks instead of going pink or grey. */
.topbar { background: color-mix(in srgb, var(--paper) 94%, transparent); }
/* No paper strip between the red close and the footer. */
main { padding-bottom: 0; }
.footer { margin-top: 0; }
/* The ask bar sits beside the orb it speaks for, small until you use it, so it no longer covers the page. */
.ask { left: auto; right: 132px; bottom: 34px; transform: none; width: 300px; transition: width 0.35s cubic-bezier(.2, .8, .2, 1), opacity 0.3s; }
.ask:focus-within, .ask.open { width: min(560px, calc(100vw - 180px)); }
.ask form { padding-left: 16px; }
.ask input { padding: 11px 0; font-size: 14.5px; }
.ask kbd { display: none; }
.ask:not(:focus-within):not(.open) .btn { display: none; }
.ask:not(:focus-within):not(.open) form { padding-right: 16px; }
/* Colour blocks open up as they arrive: a rounded card that grows to the full width of the screen. */
.band, .join { clip-path: inset(0 var(--in, 0px) round var(--rad, 0px)); }
#hands::before, #pricing::before { clip-path: inset(0 var(--in, 0px) round var(--rad, 0px)); }
@media (max-width: 720px) {
  .ask { right: 92px; left: 12px; bottom: 14px; width: auto; }
  .ask:focus-within, .ask.open { width: auto; }
}
/* The pricing block is a warm stone tone, not pink. */
#pricing::before { background: #e8e4db; }

/* =====================================================================================================
   The statement band holds on screen while you scroll (Nov 12): it is taller than the window, and its
   two lines stay pinned in the middle while they travel, so the last words are never scrolled past.
   ===================================================================================================== */
.band { height: 260vh; padding: 0; overflow: clip; }
.band-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 0.5vw; overflow: clip; }
.band-row { width: max-content; }
@media (max-width: 720px) { .band { height: 230vh; padding: 0; } }
/* Without motion, the lines simply wrap and can be read as text. */
@media (prefers-reduced-motion: reduce) {
  .band { height: auto; padding: 70px var(--gutter); }
  .band-pin { position: static; height: auto; }
  .band-row { width: auto; flex-wrap: wrap; white-space: normal; font-size: min(11vw, 120px); }
}
/* Sized so "FOR YOUR YES" fits inside the window with room to spare, on any screen. */
.band-row { font-size: min(11.2vw, 190px); gap: 0.3em; }
@media (max-width: 720px) { .band-row { font-size: 11.2vw; } }

/* The closing block is compact enough that "SAY THE WORD" and the waitlist card fit in one window together. */
.mega-close { margin-bottom: 26px; }
.join { padding-top: 90px; }
.join-card { padding: 44px clamp(22px, 5vw, 64px) 46px; }
.join-card .sec-sub { margin-bottom: 22px; }
@media (max-height: 760px) {
  .join-card { padding-top: 32px; padding-bottom: 34px; }
  .join h2 { font-size: clamp(30px, 4.4vw, 56px); }
}
/* The side rail of section ticks clashed with the red and black blocks on wide screens; the top bar already navigates. */
.rail { display: none !important; }

/* =====================================================================================================
   Rework after comparing with the reference (Nov 12): rising liquid edges and the pointer ring.
   ===================================================================================================== */
.tide { display: block; width: 100%; height: clamp(46px, 7.5vw, 120px); margin: 0; }
.tide.top { margin-top: 120px; margin-bottom: -1px; }
.tide.flip { transform: scaleY(-1); margin-top: -1px; }
/* The waterline replaces the straight edges and the rounded opening on these blocks. */
.band, #hands, .join { margin-top: 0; clip-path: none; }
#hands::before { clip-path: none; }
#hands { padding-top: 70px; padding-bottom: 80px; }
.join { padding-top: 50px; padding-bottom: 80px; }
.footer { padding-top: 14px; }
.ring-cursor { position: fixed; left: 0; top: 0; z-index: 90; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid #fff; mix-blend-mode: difference; pointer-events: none; opacity: 0; transition: opacity 0.3s; will-change: transform; }
@media (max-width: 720px) {
  .tide.top { margin-top: 70px; }
  #hands { padding-top: 40px; padding-bottom: 50px; }
  .join { padding-top: 30px; padding-bottom: 50px; }
}
/* The headline arrives a word at a time, each rising out of a soft blur. */
.hero-copy > .headline { animation: none; }
.headline .word { display: inline-block; animation: wordIn 0.8s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes wordIn { from { opacity: 0; transform: translateY(0.35em); filter: blur(10px); } }