/* HumanMatcher landing page */
:root {
  --bg: #0D0E12;
  --panel: #16171E;
  --panel-2: #1A1C24;
  --panel-3: #1E2029;
  --line: #2A2C35;
  --line-2: #2F3140;
  --line-3: #3A3C47;
  --text: #F2F1EC;
  --text-2: #D6D7DE;
  --muted: #B7B8C2;
  --muted-2: #9A9BA8;
  --quiet: #8A8C99;
  --accent: #D4F46A;
  --rec: #FF5A5F;
  --cream: #F4EFE6;
  --ink: #17140F;
  --ink-2: #4A443A;
  --cream-line: #E4DCCD;
  --love: #D61F45;
  --ok: #1E7B45;
  --display: "Unbounded", sans-serif;
  --body: "DM Sans", system-ui, sans-serif;
  --gutter: 80px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--body); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: var(--accent); }
a:hover { color: #E6FAA0; }
h1, h2, h3, p { margin: 0; }
.page { max-width: 1440px; margin: 0 auto; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; font-family: var(--body); font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn-accent { background: var(--accent); color: var(--bg); }
.btn-accent:hover { background: #E1F98C; color: var(--bg); }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--line-3); font-weight: 500; }
.btn-ghost:hover { border-color: var(--muted-2); color: var(--text); }
.btn-sm { height: 44px; padding: 0 18px; font-size: 14px; }
.btn-md { height: 48px; padding: 0 24px; font-size: 15px; }
.btn-lg { height: 64px; padding: 0 36px; font-size: 18px; }
.btn-block { width: 100%; }

/* Logo */
.logo { display: flex; gap: 10px; align-items: center; font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: -0.5px; color: var(--text); text-decoration: none; }
.logo:hover { color: var(--text); }
.logo span span { color: var(--accent); }

/* Nav */
.nav { height: 88px; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; }
.nav-links { display: flex; gap: 8px; padding: 6px; border: 1px solid var(--line); border-radius: 999px; }
.nav-links a { color: var(--text); text-decoration: none; padding: 10px 18px; font-size: 15px; font-weight: 500; border-radius: 999px; }
.nav-links a:hover { background: var(--panel); color: var(--text); }

/* Hero */
.hero { padding: 72px var(--gutter) 40px; display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; }
.eyebrow { font-size: 14px; font-weight: 700; letter-spacing: 2px; color: var(--muted-2); }
.hero h1 { font-family: var(--display); font-size: 96px; line-height: 1.02; font-weight: 600; letter-spacing: -4px; }
.hero h1 .accent { color: var(--accent); }
.heart { display: inline-block; width: 84px; height: 76px; vertical-align: -6px; margin: 0 6px; filter: drop-shadow(0 0 18px rgba(255,59,92,0.55)) drop-shadow(0 6px 14px rgba(180,10,50,0.5)); }
.hero-sub { max-width: 640px; font-size: 20px; line-height: 1.55; color: var(--muted); }
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }

/* Orbit: a fixed 1280x640 stage, scaled down by a small script on laptop-size windows */
.orbit { position: relative; height: 640px; margin: 24px var(--gutter) 0; }
.orbit-stage { position: absolute; left: 50%; top: 0; width: 1280px; height: 640px; margin-left: -640px; transform-origin: top center; }
.ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); }
.ring-1 { width: 1120px; height: 600px; }
.ring-2 { width: 760px; height: 440px; }
.recorder { position: absolute; left: 50%; top: 50%; width: 380px; height: 560px; transform: translate(-50%, -50%); background: var(--panel); border: 1px solid var(--line-2); border-radius: 32px; padding: 20px; display: flex; flex-direction: column; gap: 16px; z-index: 2; }
.rec-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--muted-2); }
.rec-dot { display: inline-block; width: 9px; height: 9px; border-radius: 999px; background: var(--rec); margin-right: 8px; }
.rec-screen { flex-grow: 1; border-radius: 20px; background: #22242E; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 14px; text-align: left; }
.rec-screen > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.rec-screen > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.live { position: relative; align-self: flex-start; display: flex; gap: 6px; align-items: center; background: rgba(13,14,18,0.72); padding: 6px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 1px; }
.live::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--rec); }
.question { position: relative; background: rgba(13,14,18,0.84); border-radius: 14px; padding: 14px 16px; font-family: var(--display); font-size: 17px; line-height: 1.35; font-weight: 500; }
.progress { display: flex; gap: 6px; }
.progress span { flex-grow: 1; height: 5px; border-radius: 3px; background: var(--line-2); }
.progress span.done { background: var(--accent); }
.progress span.now { background: #5A5C68; }
.rec-controls { display: flex; justify-content: space-between; align-items: center; }
.rec-btn { width: 64px; height: 64px; border-radius: 999px; border: 4px solid var(--text); background: var(--rec); cursor: pointer; }

.match-pill { position: absolute; display: flex; gap: 12px; align-items: center; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 8px 20px 8px 8px; text-align: left; }
.match-pill img { width: 56px; height: 56px; border-radius: 999px; border: 2px solid var(--text); object-fit: cover; flex-shrink: 0; }
.match-pill .name { font-size: 15px; font-weight: 700; }
.match-pill .fit { font-size: 13px; font-weight: 700; color: var(--accent); }
.p-jordan { left: 40px; top: 70px; }
.p-hannah { left: 120px; top: 300px; }
.p-sophie { left: 60px; top: 520px; }
.p-chris { left: 960px; top: 110px; }
.p-maya { left: 1000px; top: 400px; }
.p-marcus { left: 930px; top: 560px; }
.why-callout { position: absolute; left: 40px; top: 152px; width: 300px; background: var(--panel-2); border: 1px solid var(--line-3); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.why-callout .label { display: flex; gap: 6px; align-items: center; font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--accent); }
.why-callout p { font-size: 14px; line-height: 1.45; color: var(--text-2); }

/* Press */
.press { margin: 88px var(--gutter) 0; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.press-label { font-size: 12px; font-weight: 700; letter-spacing: 2px; color: var(--quiet); }
.press-row { width: 100%; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: center; }
.press-row div { display: flex; align-items: center; justify-content: center; height: 48px; }

/* Trust strip */
.trust { margin: 64px var(--gutter) 0; padding: 28px 0; border-top: 1px solid #23252E; border-bottom: 1px solid #23252E; display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: center; gap: 8px 16px; }
.trust div { display: flex; gap: 12px; align-items: center; justify-content: center; height: 44px; font-size: 16px; font-weight: 600; color: var(--quiet); white-space: nowrap; }
.trust svg { flex-shrink: 0; }

/* Metrics */
.metrics { margin: 88px var(--gutter) 0; padding: 48px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.metric { display: flex; flex-direction: column; gap: 8px; }
.metric b { font-family: var(--display); font-size: 48px; line-height: 1; font-weight: 600; letter-spacing: -2px; color: var(--accent); }
.metric span { font-size: 15px; font-weight: 600; color: var(--muted); }

/* Section headings */
.h2 { font-family: var(--display); font-size: 52px; line-height: 1.08; font-weight: 600; letter-spacing: -2px; }
.kicker { font-size: 13px; font-weight: 700; letter-spacing: 1.5px; color: var(--accent); }
.lead { font-size: 18px; line-height: 1.55; color: var(--muted); }

/* How it works */
.how { margin: 64px var(--gutter) 0; padding: 72px; background: var(--panel-3); border: 1px solid rgba(212,244,106,0.45); box-shadow: 0 0 0 6px rgba(212,244,106,0.06); border-radius: 32px; display: flex; flex-direction: column; gap: 56px; }
.how-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.how-head .h2 { max-width: 720px; }
.how-head .lead { max-width: 400px; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.step { background: #2A2D38; border: 1px solid #4A4E5C; border-radius: 24px; padding: 40px; display: flex; flex-direction: column; gap: 20px; min-height: 340px; }
.step .num { font-family: var(--display); font-size: 20px; color: var(--accent); }
.step h3 { font-size: 28px; font-weight: 700; letter-spacing: -0.5px; }
.step p { font-size: 17px; line-height: 1.6; color: var(--muted); }

/* Weekly drop */
.drop { padding: 120px var(--gutter); display: flex; flex-direction: column; gap: 48px; }
.drop-head { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.drop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 12px; display: flex; flex-direction: column; gap: 16px; }
.card-media { height: 340px; border-radius: 12px; background: var(--line); position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: 12px; }
.card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.duration { position: relative; display: flex; gap: 6px; align-items: center; background: rgba(13,14,18,0.78); padding: 6px 12px 6px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.card-body { padding: 0 8px 8px; display: flex; flex-direction: column; gap: 10px; flex-grow: 1; }
.card-title { display: flex; justify-content: space-between; align-items: center; }
.card-title .name { font-size: 18px; font-weight: 700; }
.card-title .fit { font-size: 13px; font-weight: 700; color: var(--accent); }
.checks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.checks li { display: flex; gap: 8px; align-items: center; font-size: 13px; line-height: 1.3; color: var(--text-2); }
.checks li::before { content: ""; width: 16px; height: 16px; flex-shrink: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23D4F46A'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%230D0E12' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.checks li span { flex-grow: 1; }
.checks li b { font-weight: 700; color: var(--text); }
.summary { border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 4px; flex-grow: 1; }
.mini-label { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; color: var(--muted-2); }
.summary p { font-size: 14px; line-height: 1.5; color: var(--muted); }
.reveal { padding: 28px 20px 20px; }
.reveal-title { font-family: var(--display); font-size: 22px; line-height: 1.25; }
.reveal > p { font-size: 14px; line-height: 1.55; color: var(--muted-2); }
.option { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid #34363F; border-radius: 14px; background: var(--panel-3); }
.option b { font-size: 15px; color: var(--accent); }
.option span { font-size: 14px; line-height: 1.5; color: var(--muted); }
.includes { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.reveal .btn { margin-top: auto; }

/* Light band (Concept C2) */
.band { background: var(--cream); color: var(--ink); padding: 120px 0; border-radius: 48px; margin: 0 24px; }
.principles { padding: 0 var(--gutter) 120px; display: flex; flex-direction: column; gap: 48px; }
.principles .h2 { max-width: 900px; }
.band .h2 .love { color: var(--love); }
.principle-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.principle { border-top: 2px solid var(--ink); padding-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.principle h3 { font-size: 22px; font-weight: 700; }
.principle p { font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.safety { margin: 0 var(--gutter); background: #FFFFFF; border: 1px solid var(--cream-line); box-shadow: 0 24px 60px rgba(60,40,20,0.08); border-radius: 32px; padding: 72px; display: flex; gap: 72px; align-items: center; }
.safety-copy { flex-grow: 1; display: flex; flex-direction: column; gap: 20px; max-width: 560px; }
.safety-copy .kicker { color: var(--love); }
.safety-copy h2 { font-family: var(--display); font-size: 32px; line-height: 1.12; font-weight: 600; letter-spacing: -1.5px; }
.safety-copy p { font-size: 18px; line-height: 1.55; color: var(--ink-2); }
.badge-card { width: 440px; flex-shrink: 0; border: 1px solid var(--cream-line); border-radius: 24px; padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.badge-head { display: flex; gap: 12px; align-items: center; font-size: 20px; font-weight: 700; }
.badge-rows { display: flex; flex-direction: column; gap: 14px; font-size: 16px; font-weight: 500; }
.badge-rows div { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--cream-line); padding-bottom: 14px; }
.badge-rows div:last-child { border-bottom: 0; padding-bottom: 0; }
.badge-rows b { color: var(--ok); }

/* Dark version of principles + safety (Concept C). Used only if the dark block in index.html is uncommented. */
.dark-principles .principle { border-top-color: var(--text); }
.dark-principles .principle p { color: var(--muted); }
.dark-principles .h2 .accent { color: var(--accent); }
.safety.dark { background: var(--panel); border-color: var(--line); box-shadow: none; }
.safety.dark .safety-copy .kicker { color: var(--accent); }
.safety.dark .safety-copy p { color: var(--muted); }
.safety.dark .badge-card, .safety.dark .badge-rows div { border-color: var(--line); }
.safety.dark .badge-rows b { color: #6FD99A; }

/* Closing CTA */
.cta { margin: 120px var(--gutter) 0; background: var(--panel); border: 1px solid var(--line); border-radius: 32px; padding: 88px 72px; display: flex; justify-content: space-between; align-items: center; gap: 32px; }
.cta h2 { font-family: var(--display); font-size: 60px; line-height: 1; font-weight: 600; letter-spacing: -2.5px; }
.cta p { margin-top: 16px; font-size: 20px; color: var(--muted-2); }

/* Footer */
.footer { padding: 64px var(--gutter) 48px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; font-size: 14px; color: var(--muted); }
.footer .logo { font-size: 18px; }
.tagline { margin-top: 6px; font-size: 13px; font-weight: 600; }
.footer-links { display: flex; gap: 32px; }
.footer-links a { color: var(--muted); }

/* ---------- Smaller laptops ---------- */
@media (max-width: 1140px) {
  :root { --gutter: 40px; }
  .hero h1 { font-size: 76px; letter-spacing: -3px; }
  .heart { width: 66px; height: 60px; }
  .trust div { gap: 8px; font-size: 14px; }
  .trust svg { width: 22px; height: 22px; }
  .how { padding: 56px; }
  .safety { flex-direction: column; align-items: stretch; padding: 56px; gap: 40px; }
  .badge-card { width: 100%; }
  .cta { padding: 64px 56px; }
  .cta h2 { font-size: 52px; }
}

/* ---------- Tablet: stack the hero matches ---------- */
@media (max-width: 900px) {
  .hero h1 { font-size: 64px; }
  .orbit { height: auto; }
  .orbit-stage { position: static; width: auto; height: auto; margin: 0; transform: none !important; display: flex; flex-direction: column; align-items: center; gap: 16px; }
  .ring { display: none; }
  .recorder { position: relative; left: auto; top: auto; transform: none; max-width: 100%; }
  .match-pill, .why-callout { position: static; }
  .pills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 860px; }
  .why-callout { width: 100%; max-width: 860px; }
  .press-row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 24px; }
  .trust { flex-wrap: wrap; justify-content: center; gap: 8px 40px; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .how { padding: 48px; }
  .how-head { flex-direction: column; align-items: flex-start; }
  .steps { grid-template-columns: 1fr; }
  .step { min-height: 0; }
  .drop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .principle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta { flex-direction: column; align-items: flex-start; padding: 56px 48px; }
}
/* Above tablet width the pills wrapper is invisible to layout, so each pill sits on the stage */
@media (min-width: 901px) { .pills { display: contents; } }

/* ---------- Phone ---------- */
@media (max-width: 760px) {
  :root { --gutter: 16px; }
  .nav { height: 72px; }
  .nav-links { display: none; }
  .logo { font-size: 18px; }
  .hero { padding-top: 40px; gap: 24px; }
  .eyebrow { font-size: 12px; letter-spacing: 1.5px; }
  .hero h1 { font-size: 40px; letter-spacing: -1.5px; }
  .heart { width: 38px; height: 34px; vertical-align: -4px; margin: 0 2px; }
  .hero-sub { font-size: 17px; }
  .btn-lg { height: 56px; padding: 0 28px; font-size: 16px; }
  .recorder { width: 100%; height: 520px; }
  .pills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .match-pill { padding-right: 12px; }
  .match-pill img { width: 44px; height: 44px; }
  .press { margin-top: 56px; }
  .press-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust { flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 40px; }
  .trust div { justify-content: flex-start; }
  .metrics { margin-top: 56px; padding: 32px 0; gap: 24px; }
  .metric b { font-size: 36px; }
  .h2 { font-size: 32px; letter-spacing: -1px; }
  .how { margin-top: 40px; padding: 28px 20px; gap: 32px; border-radius: 24px; }
  .step { padding: 28px; }
  .step h3 { font-size: 22px; }
  .drop { padding: 72px var(--gutter); }
  .drop-grid { grid-template-columns: 1fr; }
  .card-media { height: 360px; }
  .band { margin: 0 8px; padding: 64px 0; border-radius: 28px; }
  .principles { padding-bottom: 64px; }
  .principle-grid { grid-template-columns: 1fr; }
  .safety { padding: 28px 20px; border-radius: 24px; }
  .safety-copy h2 { font-size: 26px; }
  .badge-card { padding: 20px; }
  .badge-rows { font-size: 15px; }
  .cta { margin-top: 64px; padding: 40px 24px; }
  .cta h2 { font-size: 36px; letter-spacing: -1px; }
  .footer { flex-direction: column; align-items: flex-start; }
  .footer-links { flex-wrap: wrap; gap: 16px 24px; }
}

/* Press logos keep their ratio when columns get narrow */
.press-row img { max-width: 90%; height: auto; }

/* Privacy: hero line + Private by design section */
.hero-private { display: flex; gap: 8px; align-items: center; justify-content: center; font-size: 15px; font-weight: 500; color: var(--muted-2); }
.hero-private svg { flex-shrink: 0; }
.private { margin: 0 var(--gutter) 120px; background: var(--panel); border: 1px solid var(--line); border-radius: 32px; padding: 72px; display: flex; gap: 72px; align-items: center; }
.private-copy { flex-grow: 1; display: flex; flex-direction: column; gap: 20px; max-width: 580px; }
.private-kicker { display: flex; gap: 8px; align-items: center; }
.private h2 { font-family: var(--display); font-size: 44px; line-height: 1.1; font-weight: 600; letter-spacing: -1.5px; }
.private-copy > p { font-size: 18px; line-height: 1.6; color: var(--muted); }
.private-checks { margin-top: 8px; gap: 12px; }
.private-checks li { font-size: 16px; font-weight: 600; color: var(--text); gap: 10px; }
.private-checks li::before { width: 18px; height: 18px; }
.visibility { width: 440px; flex-shrink: 0; background: var(--panel-3); border: 1px solid #34363F; border-radius: 24px; padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.vis-rows { display: flex; flex-direction: column; gap: 16px; }
.vis-rows div { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-bottom: 1px solid var(--line); padding-bottom: 16px; font-size: 16px; color: var(--text-2); }
.vis-rows div:last-child { border-bottom: 0; padding-bottom: 0; }
.vis-rows b { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--muted-2); }
.vis-rows .on b { color: var(--accent); }
@media (max-width: 1140px) {
  .private { flex-direction: column; align-items: stretch; padding: 56px; gap: 40px; }
  .visibility { width: 100%; }
}
@media (max-width: 760px) {
  .hero-private { font-size: 14px; text-align: left; }
  .private { margin-bottom: 72px; padding: 28px 20px; border-radius: 24px; }
  .private h2 { font-size: 28px; letter-spacing: -1px; }
  .private-copy > p { font-size: 16px; }
  .visibility { padding: 20px; }
}

/* Hero video: captions + sound button */
.rec-top-row { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sound-btn { display: flex; gap: 6px; align-items: center; height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: rgba(13,14,18,0.72); color: var(--text); font-family: var(--body); font-size: 12px; font-weight: 700; cursor: pointer; }
.sound-btn:hover { background: rgba(13,14,18,0.9); }
.sound-btn .ico-on { display: none; }
.sound-btn.is-on .ico-on { display: block; }
.sound-btn.is-on .ico-off, .sound-btn.is-on span { display: none; }
.rec-captions { position: relative; margin-top: auto; margin-bottom: 8px; align-self: center; max-width: 100%; padding: 6px 12px; border-radius: 10px; background: rgba(13,14,18,0.6); color: #FFFFFF; font-size: 15px; font-weight: 700; line-height: 1.35; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,0.6); opacity: 0; transition: opacity 0.15s; }
.rec-captions.on { opacity: 1; }
.rec-video::cue { opacity: 0; }
@media (max-width: 760px) { .rec-captions { font-size: 14px; } }

/* question-top: question card at the top of the video, captions at the bottom */
.rec-top-row { order: 0; }
.rec-screen .question { order: 1; margin-top: 10px; font-size: 15px; padding: 12px 14px; }
.rec-captions { order: 2; margin-bottom: 0; }

/* Pulsing record dots */
@keyframes rec-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.8); } }
.rec-dot, .live::before { animation: rec-pulse 1.4s ease-in-out infinite; }
.rec-time { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .rec-dot, .live::before { animation: none; } }

/* Orbit rings: more visible */
.ring-1 { border: 1.5px dashed rgba(212,244,106,0.38); box-shadow: 0 0 40px rgba(212,244,106,0.06), inset 0 0 40px rgba(212,244,106,0.04); }
.ring-2 { border: 1.5px dashed rgba(242,241,236,0.28); }