/* Generated by scripts/build-landing.mjs from storyboards/knowa-us-promo-45s.html. Edit the preview, then rebuild. */
/* Palette and type taken from knowa.co/us-retirement (computed styles). */
:root {
  --night: #2A1B2E; --night-2: #3A2740; --gold: #E9B872; --cream: #FBF7F1; --cream-2: #F2EAE0;
  --ink: #1F1A22; --ink-muted: rgba(31, 26, 34, 0.62); --line: #E8DFD4; --card: #FFFDFA;
  --plum: #9647D7; --plum-soft: rgba(150, 71, 215, 0.12); --white-65: rgba(255, 255, 255, 0.65);
  --white-14: rgba(255, 255, 255, 0.14);
  --font-display: "Space Grotesk", Inter, sans-serif; --font-ui: Inter, -apple-system, "Segoe UI", sans-serif;
  /* page chrome around the stage */
  --page: #FBF7F1; --page-fg: #1F1A22; --page-muted: rgba(31, 26, 34, 0.6); --page-border: #E8DFD4; --page-card: #FFFDFA;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --page: #1A1220; --page-fg: #F4EEF6; --page-muted: rgba(244, 238, 246, 0.6); --page-border: rgba(255, 255, 255, 0.12); --page-card: #241828; }
}
:root[data-theme="dark"] { --page: #1A1220; --page-fg: #F4EEF6; --page-muted: rgba(244, 238, 246, 0.6); --page-border: rgba(255, 255, 255, 0.12); --page-card: #241828; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--page); color: var(--page-fg); font: 400 15px/1.55 var(--font-ui); }
h1, h2 { font-family: var(--font-display); margin: 0; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 28px 16px 56px; }
.head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.head h1 { font-size: 28px; letter-spacing: -0.02em; }
.head p { margin: 4px 0 0; color: var(--page-muted); font-size: 14px; }
.views { display: flex; gap: 4px; border: 1px solid var(--page-border); border-radius: 10px; padding: 3px; background: var(--page-card); }
.views button { font: 500 14px var(--font-ui); border: none; background: transparent; color: var(--page-muted); padding: 8px 14px; min-height: 40px; border-radius: 8px; cursor: pointer; }
.views button[aria-pressed="true"] { background: var(--plum-soft); color: var(--plum); }
:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--page), 0 0 0 4px rgba(150, 71, 215, 0.4); }
[hidden] { display: none !important; }

/* ── stage ───────────────────────────────────────────────────────────── */
.stage { position: relative; aspect-ratio: 16 / 9; width: 100%; border-radius: 22px; overflow: hidden; container-type: inline-size;
  background: radial-gradient(ellipse at 50% 0%, var(--night-2) 0%, var(--night) 70%); color: #fff; isolation: isolate; box-shadow: 0 0 0 1px var(--page-border); }
.paper { position: absolute; inset: 0; background: var(--cream); opacity: 0; transition: opacity .7s ease; z-index: 0; }
.stage.light .paper { opacity: 1; }
.scene { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .55s ease, visibility 0s .55s; z-index: 1; }
.scene.on { opacity: 1; visibility: visible; transition: opacity .55s ease .15s; }
.scene * { animation-play-state: paused; }
.scene.on * { animation-play-state: running; }
.a { opacity: 0; animation: var(--anim, rise) var(--dur, .8s) cubic-bezier(.2, .7, .2, 1) var(--d, 0s) both; }
@keyframes rise { from { opacity: 0; transform: translateY(2.2cqw); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { 0% { opacity: 0; transform: scale(.85); } 70% { opacity: 1; transform: scale(1.03); } 100% { opacity: 1; transform: none; } }
@keyframes slideL { from { opacity: 0; transform: translateX(-3cqw); } to { opacity: 1; transform: none; } }
@keyframes slideR { from { opacity: 0; transform: translateX(3cqw); } to { opacity: 1; transform: none; } }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes typing { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pulse { 0%, 100% { opacity: .35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.25); } }
@keyframes drift { 0% { transform: translate(0, 0) rotate(var(--r, 0deg)); } 50% { transform: translate(var(--dx, 1cqw), var(--dy, -1cqw)) rotate(calc(var(--r, 0deg) + 2deg)); } 100% { transform: translate(0, 0) rotate(var(--r, 0deg)); } }
@keyframes gather { 0% { opacity: 1; transform: translate(0, 0) rotate(var(--r, 0deg)) scale(1); } 100% { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(0deg) scale(.2); } }

.ov { font: 600 1.15cqw var(--font-ui); letter-spacing: .14em; text-transform: uppercase; }
.ov.gold { color: var(--gold); }
.ov.plum { color: var(--plum); }
.display { font: 700 5.4cqw/1.02 var(--font-display); letter-spacing: -0.04em; }
.display .gold { color: var(--gold); }
.h2 { font: 700 3.6cqw/1.06 var(--font-display); letter-spacing: -0.035em; }
.sub { font-size: 1.55cqw; line-height: 1.5; }
.on-dark .sub { color: var(--white-65); }
.on-light { color: var(--ink); }
.on-light .sub { color: var(--ink-muted); }
.quote { font: 500 1.5cqw/1.4 var(--font-display); color: var(--plum); border-left: .3cqw solid var(--gold); padding-left: 1.2cqw; }
.corner { position: absolute; left: 4.5cqw; bottom: 3.4cqw; width: 10cqw; z-index: 2; opacity: .9; }
.corner svg { width: 100%; height: auto; display: block; }
.stage.light .corner path { fill: var(--night); }

/* scene 1: scattered records */
.s1 .chip { position: absolute; padding: .8cqw 1.2cqw; border-radius: .8cqw; background: rgba(251, 247, 241, 0.08); border: 1px solid var(--white-14);
  font: 500 1.2cqw var(--font-ui); color: rgba(255, 255, 255, 0.78); white-space: nowrap; backdrop-filter: blur(2px);
  animation: fade .8s ease-out var(--d, 0s) both, drift 6s ease-in-out infinite; }
.s1 .chip b { display: block; font: 600 .85cqw var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: .2cqw; }
.s1 .lead { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64cqw; text-align: center; }
.s1 .lead .sub { margin: 1.4cqw auto 0; max-width: 50cqw; }

/* scene 2: gather into the mark */
.s2 .chip { position: absolute; padding: .8cqw 1.2cqw; border-radius: .8cqw; background: rgba(251, 247, 241, 0.08); border: 1px solid var(--white-14);
  font: 500 1.2cqw var(--font-ui); color: rgba(255, 255, 255, 0.78); white-space: nowrap; animation: gather 1.1s cubic-bezier(.6, 0, .4, 1) var(--d, 0s) both; }
.s2 .mark { position: absolute; left: 0; right: 0; top: 27%; width: 36cqw; margin: 0 auto; }
.s2 .mark svg { width: 100%; height: auto; }
.s2 .line { position: absolute; left: 0; right: 0; top: 64%; text-align: center; }

/* light scenes: two columns */
.cols { position: absolute; inset: 0; padding: 6cqw 5cqw 8cqw 6cqw; display: grid; grid-template-columns: .92fr 1.08fr; gap: 4cqw; align-items: center; }
.cols .text { display: grid; gap: 1.4cqw; }
.ui { background: var(--card); border: 1px solid var(--line); border-radius: 1.4cqw; box-shadow: 0 1.6cqw 3.6cqw -1.6cqw rgba(42, 27, 46, 0.28); color: var(--ink); overflow: hidden; }
.ui-head { display: flex; align-items: center; gap: .8cqw; padding: 1.1cqw 1.4cqw; border-bottom: 1px solid var(--line); font: 600 1.15cqw var(--font-ui); }
.ui-head .dot { width: .7cqw; height: .7cqw; border-radius: 50%; background: var(--line); }
.ui-head .tag { margin-left: auto; font: 500 .9cqw var(--font-ui); color: var(--plum); background: var(--plum-soft); padding: .25cqw .7cqw; border-radius: 99px; }
.row { display: flex; align-items: center; gap: 1cqw; padding: .95cqw 1.4cqw; border-bottom: 1px solid var(--line); font-size: 1.15cqw; }
.row:last-child { border-bottom: none; }
.ico { width: 2.2cqw; height: 2.6cqw; border-radius: .35cqw; background: var(--cream-2); border: 1px solid var(--line); position: relative; flex: none; }
.ico::after { content: ""; position: absolute; left: 22%; right: 22%; top: 30%; height: 2px; background: var(--line); box-shadow: 0 .5cqw 0 var(--line), 0 1cqw 0 var(--line); }
.row .meta { margin-left: auto; font-size: .95cqw; color: var(--ink-muted); white-space: nowrap; }
.badge { font: 600 .85cqw var(--font-ui); padding: .2cqw .6cqw; border-radius: 99px; border: 1px solid var(--line); color: var(--ink-muted); }
.badge.gold { border-color: transparent; background: rgba(233, 184, 114, 0.28); color: #7A5420; }
.badge.plum { border-color: transparent; background: var(--plum-soft); color: var(--plum); }
.stamp-wrap { position: absolute; right: -1.6cqw; bottom: -2.4cqw; transform: rotate(-8deg); }
.stamp { font: 700 1.3cqw var(--font-display); letter-spacing: .08em; text-transform: uppercase;
  color: var(--plum); border: .25cqw solid var(--plum); border-radius: .6cqw; padding: .4cqw 1cqw; background: rgba(255, 253, 250, 0.9); }
.vault { position: relative; }

/* scene 4: pack → capture → minutes */
.rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2cqw; }
.step { background: var(--card); border: 1px solid var(--line); border-radius: 1.2cqw; padding: 1.2cqw; min-height: 21cqw; display: flex; flex-direction: column; gap: .8cqw;
  box-shadow: 0 1.2cqw 2.6cqw -1.4cqw rgba(42, 27, 46, 0.25); color: var(--ink); }
.step .n { font: 600 .9cqw var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--plum); }
.step .t { font: 700 1.55cqw var(--font-display); letter-spacing: -0.02em; }
.paperlet { height: 2.4cqw; border-radius: .4cqw; background: var(--cream-2); border: 1px solid var(--line); display: flex; align-items: center; padding: 0 .7cqw; font-size: .9cqw; color: var(--ink-muted); }
.hl { background: linear-gradient(transparent 55%, rgba(233, 184, 114, 0.55) 55%); }
.bubble { align-self: flex-end; max-width: 90%; background: var(--night); color: #fff; font-size: .95cqw; padding: .6cqw .9cqw; border-radius: .9cqw .9cqw .2cqw .9cqw; }
.rec { display: flex; align-items: center; gap: .6cqw; font-size: .95cqw; color: var(--ink-muted); margin-top: auto; }
.rec i { width: .8cqw; height: .8cqw; border-radius: 50%; background: #E0524F; animation: pulse 1.2s ease-in-out infinite; }
.mins { font-size: 1cqw; line-height: 1.5; color: var(--ink); }
.mins .typed { display: block; animation: typing 2.2s steps(46, end) var(--d, 0s) both; }
.actions { display: grid; gap: .4cqw; margin-top: auto; }
.act { display: flex; align-items: center; gap: .5cqw; font-size: .9cqw; color: var(--ink-muted); }
.act::before { content: ""; width: .9cqw; height: .9cqw; border-radius: .25cqw; border: 2px solid var(--plum); flex: none; }
.clock { font: 600 1cqw var(--font-ui); color: var(--plum); }

/* scene 5: collaboration */
.thread { padding: 1.2cqw 1.4cqw; display: grid; gap: 1cqw; }
.msg { display: grid; grid-template-columns: 2.8cqw 1fr; gap: .8cqw; font-size: 1.1cqw; line-height: 1.45; }
.av { width: 2.8cqw; height: 2.8cqw; border-radius: 50%; display: grid; place-items: center; font: 600 1cqw var(--font-ui); color: #fff; background: var(--night-2); }
.av.g { background: #B4823F; }
.av.p { background: var(--plum); }
.who { font-weight: 600; } .who small { font-weight: 400; color: var(--ink-muted); margin-left: .4cqw; }
.mention { color: var(--plum); font-weight: 600; }
.attach { display: inline-flex; align-items: center; gap: .5cqw; margin-top: .4cqw; padding: .35cqw .7cqw; border-radius: .5cqw; background: var(--cream-2); border: 1px solid var(--line); font-size: .95cqw; }
.vote { margin: 0 1.4cqw 1.4cqw; border: 1px solid var(--line); border-radius: 1cqw; padding: 1.1cqw 1.2cqw; background: #fff; display: grid; gap: .7cqw; }
.vote .top { display: flex; justify-content: space-between; align-items: center; font: 600 1.15cqw var(--font-ui); }
.bar { height: .9cqw; border-radius: 99px; background: var(--cream-2); overflow: hidden; }
.bar span { display: block; height: 100%; width: 83%; background: var(--plum); transform-origin: left; animation: fill 1.4s cubic-bezier(.2, .7, .2, 1) var(--d, 0s) both; }
.signed { display: flex; align-items: center; gap: .6cqw; font-size: 1cqw; color: var(--ink-muted); }
.check { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: #2F8F5B; display: grid; place-items: center; }
.check svg { width: 60%; height: 60%; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* Knowa Q: one question, two cited answers */
.q-mark { width: 1.8cqw; height: 1.8cqw; border-radius: .5cqw; background: var(--plum); color: #fff; display: grid; place-items: center; font: 700 1cqw var(--font-display); }
.ask { margin: 1.2cqw 1.4cqw .4cqw; padding: .9cqw 1.1cqw; border-radius: .9cqw; background: var(--night); color: #fff; font: 500 1.2cqw var(--font-ui); }
.ask .typed { display: block; animation: typing 1.6s steps(44, end) var(--d, 0s) both; }
.answers { display: grid; grid-template-columns: 1fr 1fr; gap: 1cqw; padding: 1cqw 1.4cqw 1.4cqw; }
.ans { border: 1px solid var(--line); border-radius: 1cqw; padding: 1cqw 1.1cqw; background: #fff; display: grid; gap: .6cqw; align-content: start; }
.ans p { margin: 0; font-size: 1cqw; line-height: 1.5; color: var(--ink); }
.ans-k { font: 600 .85cqw var(--font-ui); letter-spacing: .1em; text-transform: uppercase; }
.ans-k.plan { color: var(--plum); }
.ans-k.psca { color: #9A6A24; }
.answers.one { grid-template-columns: 1fr; }
.answers.one .ans p { font-size: 1.15cqw; }
.srcs { display: flex; gap: .6cqw; flex-wrap: wrap; }
.reply { display: flex; align-items: center; justify-content: space-between; gap: 1cqw; padding: 0 1.4cqw 1.4cqw; }
.reply-btn { font: 600 1cqw var(--font-ui); background: var(--plum); color: #fff; border-radius: .7cqw; padding: .6cqw 1.1cqw; }
.src { font-size: .85cqw; color: var(--ink-muted); padding: .3cqw .6cqw; border-radius: .4cqw; background: var(--cream-2); justify-self: start; }

/* onboarding: 30-minute ring */
.s8 .inner { position: absolute; inset: 0; padding: 6.5cqw 7cqw 8cqw; display: grid; grid-template-columns: 1.4fr .6fr; gap: 5cqw; align-items: center; }
.s8 .display { font-size: 4.4cqw; }
.ring-wrap { position: relative; width: 23cqw; justify-self: center; }
.ring { width: 100%; height: auto; display: block; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: rgba(255, 255, 255, 0.12); stroke-width: 10; }
.ring-fill { fill: none; stroke: var(--gold); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 540.4; stroke-dashoffset: 540.4; }
.scene.on .ring-fill { animation: ring 2.6s cubic-bezier(.4, 0, .2, 1) .6s both; }
@keyframes ring { to { stroke-dashoffset: 0; } }
.ring-num { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring-num b { font: 700 7cqw/1 var(--font-display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.ring-num span { font-size: 1.2cqw; color: var(--white-65); letter-spacing: .12em; text-transform: uppercase; }
.ring-steps { display: flex; justify-content: center; flex-wrap: wrap; gap: .6cqw; margin-top: 1.6cqw; }
.ring-steps span { font: 500 1cqw var(--font-ui); padding: .35cqw .8cqw; border-radius: 99px; border: 1px solid var(--white-14); color: rgba(255, 255, 255, 0.8); }
.ring-steps span.gold { border-color: var(--gold); color: var(--gold); }

/* scene 7: payoff */
.s6 .inner { position: absolute; inset: 0; padding: 6.5cqw 7cqw 8cqw; display: grid; grid-template-columns: 1fr 1fr; gap: 5cqw; align-items: center; }
.s6 .display { font-size: 4.6cqw; }
.gains { display: grid; gap: 1.6cqw; }
.gain { display: grid; grid-template-columns: 3cqw 1fr; gap: 1.2cqw; align-items: start; }
.gain .tick { width: 3cqw; height: 3cqw; border-radius: 50%; border: 2px solid var(--gold); display: grid; place-items: center; }
.gain .tick svg { width: 55%; height: 55%; fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.gain b { display: block; font: 600 1.7cqw/1.2 var(--font-display); letter-spacing: -0.01em; }
.gain span { font-size: 1.15cqw; color: var(--white-65); }
.proof { position: absolute; left: 7cqw; right: 7cqw; bottom: 3.4cqw; display: flex; justify-content: flex-end; gap: 2.6cqw; font-size: 1.05cqw; color: var(--white-65); }
.proof b { color: #fff; font-family: var(--font-display); font-weight: 700; margin-right: .3cqw; }

/* scene 7: end card */
.s7 .center { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; gap: 2cqw; padding: 0 6cqw; }
.s7 .display { font-size: 7.4cqw; }
.s7 .logo { width: 24cqw; }
.s7 .logo svg { width: 100%; height: auto; display: block; }
.cta { font: 600 1.4cqw var(--font-ui); background: var(--plum); color: #fff; border-radius: 1cqw; padding: 1cqw 2.2cqw; }
.s7 .note { font-size: 1.15cqw; color: var(--white-65); }

/* progress + controls */
.progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, 0.12); z-index: 3; }
.progress span { display: block; height: 100%; width: 0; background: var(--gold); }
.controls { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.ctl { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--page-border); background: var(--page-card); color: var(--page-fg); cursor: pointer; display: grid; place-items: center; }
.ctl:hover { border-color: var(--plum); }
.ctl svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dots { display: flex; gap: 2px; flex-wrap: wrap; }
.dots button { width: 30px; height: 44px; border: none; background: transparent; padding: 0; cursor: pointer; display: grid; place-items: center; }
.dots button span { width: 22px; height: 4px; border-radius: 99px; background: var(--page-border); display: block; }
.dots button[aria-current="true"] span { background: var(--plum); }
.time { margin-left: auto; color: var(--page-muted); font-size: 14px; font-variant-numeric: tabular-nums; }

/* storyboard */
.panel h2 { font-size: 20px; margin-bottom: 4px; }
.panel > .head p { color: var(--page-muted); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-weight: 500; color: var(--page-muted); font-size: 13px; padding: 8px 10px; border-bottom: 1px solid var(--page-border); }
td { padding: 12px 10px; border-bottom: 1px solid var(--page-border); vertical-align: top; }
td.n { font-family: var(--font-display); font-weight: 600; white-space: nowrap; }
td .m { color: var(--page-muted); font-size: 13px; }
.tablewrap { overflow-x: auto; border: 1px solid var(--page-border); border-radius: 14px; background: var(--page-card); }
.copy { font: 500 14px var(--font-ui); border: 1px solid var(--page-border); background: var(--page-card); color: var(--page-fg); border-radius: 8px; min-height: 40px; padding: 0 14px; cursor: pointer; }
.copy:hover { border-color: var(--plum); }
.notes { margin-top: 18px; color: var(--page-muted); font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .stage *, .stage { animation: none !important; transition: none !important; } .a { opacity: 1; } }

/* ── landing page frame ───────────────────────────────────────────────── */
.topbar { position: sticky; top: 0; z-index: 10; height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 32px;
  background: var(--page); border-bottom: 1px solid var(--page-border); }
.topbar .wordmark { font: 600 15px var(--font-display); letter-spacing: -0.02em; }
.topbar .divider { width: 1px; height: 20px; background: var(--page-border); }
.topbar .caption { font-size: 13px; color: var(--page-muted); }
.topbar nav { margin-left: auto; display: flex; gap: 4px; height: 100%; }
.topbar nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--page-muted); text-decoration: none; font-weight: 500; }
.topbar nav a:hover { color: var(--page-fg); }
.landing { max-width: 1160px; margin: 0 auto; padding: 24px 16px 56px; }
.landing .intro { margin: 0 0 16px; }
.landing .intro h1 { font: 700 30px/1.15 var(--font-display); letter-spacing: -0.025em; margin: 0; }
.landing .intro p { margin: 6px 0 0; color: var(--page-muted); }
.enter { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 22px; }
.enter a { font: 600 15px var(--font-ui); min-height: 48px; padding: 0 22px; border-radius: 10px; display: inline-flex; align-items: center; text-decoration: none; }
.enter .primary { background: var(--plum); color: #fff; }
.enter .primary:hover { opacity: 0.88; }
.enter .secondary { border: 1px solid var(--page-border); background: var(--page-card); color: var(--page-fg); }
.enter .secondary:hover { border-color: var(--plum); }
.enter .note { color: var(--page-muted); font-size: 14px; }
@media (max-width: 640px) { .topbar { padding: 0 16px; } .topbar .caption { display: none; } .landing .intro h1 { font-size: 24px; } }