/* /begin — the first-time onboarding on the site (test version, 6 Nov 2026). The home's tokens (home.css) so it reads
   as the same house; the app's onboarding look (portrait, dialogue, bracketed buttons) kept for the introduction. A first
   port, not the redesign: Louis's redesign comes after the move. */
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 300 500; font-display: swap; src: url(/fonts/jost.woff) format('woff'); }

:root {
  --bg: #030608; --bg-2: #070b0d; --bg-3: #0b1013;
  --ink: #f2f4f2; --ink-2: rgba(242,244,242,.78); --ink-3: rgba(242,244,242,.62);
  --line: rgba(242,244,242,.09); --line-2: rgba(242,244,242,.16);
  --gold: #DAB542; --gold-2: #F0CC55; --gold-line: rgba(218,181,66,.32);
  --red: #ff8a7a;
  --sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'EB Garamond', Georgia, serif;
  --mono: 'Share Tech Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.22,1,.36,1);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100svh; background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(218,181,66,.06), transparent 70%), var(--bg);
  color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--gold); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
::selection { background: rgba(218,181,66,.35); }
[hidden] { display: none !important; }

/* test-version strip */
.mode-strip { position: sticky; top: 0; z-index: 20; display: flex; gap: 16px; justify-content: center; align-items: center; padding: 6px 16px;
  background: #3a2c05; color: #ffe39a; font: 500 13px/1.4 var(--sans); letter-spacing: .04em; }
.mode-strip.live { background: #0d3b23; color: #a6f5c8; }

/* top bar */
.bar { display: flex; align-items: center; gap: 24px; padding: 18px clamp(16px, 4vw, 40px); border-bottom: 1px solid var(--line); }
.bar-logo img { width: 132px; }
.steps { display: flex; gap: 6px; margin: 0 auto; padding: 0; list-style: none; counter-reset: s; font-size: 13px; letter-spacing: .06em; color: var(--ink-3); }
.steps li { counter-increment: s; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.steps li::before { content: counter(s) " "; color: var(--ink-3); }
.steps li.done { color: var(--ink-2); }
.steps li.done::before { content: "✓ "; color: var(--gold); }
.steps li.now { color: #0a0a08; background: var(--gold); }
.steps li.now::before { color: #0a0a08; }
.sound { background: none; border: 1px solid var(--line-2); color: var(--ink-3); border-radius: 999px; padding: 4px 12px; font: 13px var(--sans); cursor: pointer; }
.sound[aria-pressed="true"] { color: var(--gold); border-color: var(--gold-line); }
@media (max-width: 760px) {
  .bar { flex-wrap: wrap; gap: 10px; }
  .steps { order: 3; width: 100%; justify-content: space-between; font-size: 11px; }
  .steps li { padding: 3px 8px; }
  .steps li:not(.now) { font-size: 0; }            /* on a phone: numbers only, and the step he is on by name */
  .steps li:not(.now)::before { font-size: 12px; }
  .sound { margin-left: auto; }
}

/* screens */
main { padding: clamp(24px, 6vh, 64px) 16px 80px; }
.card { width: 100%; max-width: 480px; margin: 0 auto; }
.card.center { text-align: center; }
.label { margin: 0 0 10px; font-size: 12.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
h1 { margin: 0 0 12px; font-weight: 400; font-size: clamp(30px, 5vw, 42px); line-height: 1.1; letter-spacing: -.01em; text-wrap: balance; }
.lead { margin: 0 0 24px; color: var(--ink-2); font-size: 18px; }
.fine { margin: 14px 0 0; color: var(--ink-3); font-size: 14px; }
.notice { margin: 16px 0 0; padding: 12px 14px; border: 1px solid rgba(255,138,122,.4); border-radius: 10px; color: var(--red); font-size: 15px; }
.notice.ok { border-color: var(--gold-line); color: var(--gold-2); }

/* buttons */
.btn, .btn-line, .btn-google { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 28px;
  border-radius: 999px; font: 500 16px var(--sans); letter-spacing: .02em; text-decoration: none; cursor: pointer; transition: background 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease); }
.btn { border: 0; background: var(--gold); color: #0a0a08; }
.btn:hover { background: var(--gold-2); transform: translateY(-1px); }
.btn:disabled { opacity: .55; cursor: progress; transform: none; }
.btn-line { border: 1px solid var(--line-2); background: none; color: var(--ink); }
.btn-google { border: 0; background: #fff; color: #1f1f1f; }
.btn-google:hover { background: #f1f1f1; }
.link-btn { background: none; border: 0; padding: 0; color: var(--gold); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.mode-strip .link-btn { color: inherit; }
.or { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: var(--ink-3); font-size: 13px; letter-spacing: .08em; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }

/* fields */
.field { display: block; margin: 0 0 16px; }
.field > span, .qlabel, .q > label { display: block; margin: 0 0 6px; font-size: 14px; letter-spacing: .04em; color: var(--ink-2); }
.field small { display: block; margin-top: 6px; color: var(--ink-3); font-size: 13px; }
input[type=email], input[type=password], input[type=text], input[type=number], input[type=date], textarea {
  width: 100%; padding: 13px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg-2); color: var(--ink);
  font: 16px var(--sans); transition: border-color 160ms var(--ease); }
input:focus, textarea:focus { outline: none; border-color: var(--gold); }
input[type=date] { color-scheme: dark; }
textarea { min-height: 84px; resize: vertical; font-family: var(--serif); font-size: 18px; line-height: 1.45; }
.short { max-width: 140px; }
.tick { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 0; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.tick input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--gold); flex: none; }
.signin { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.turnstile { margin: 0 0 16px; min-height: 65px; }
.facts { margin: 0 0 24px; padding: 0; list-style: none; }
.facts li { position: relative; padding: 8px 0 8px 28px; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.facts li::before { content: "✓"; position: absolute; left: 4px; color: var(--gold); }

/* the introduction: the app's scene */
.intro { max-width: 560px; margin: 0 auto; text-align: center; }
.portrait { position: relative; width: min(300px, 70vw); margin: 0 auto 26px; border-radius: 4px; overflow: hidden; border: 1px solid var(--gold-line);
  box-shadow: 0 0 60px rgba(218,181,66,.08); }
.portrait img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: opacity 300ms var(--ease); }
.scan { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0, rgba(218,181,66,.06) 50%, transparent 100%); background-size: 100% 6px; pointer-events: none; mix-blend-mode: screen; }
.dialogue { min-height: 4.6em; margin: 0 0 22px; font-family: var(--serif); font-size: clamp(21px, 3.2vw, 26px); line-height: 1.4; white-space: pre-line; opacity: 0; transform: translateY(6px); }
.dialogue.visible { opacity: 1; transform: none; transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
.dialogue .stage { display: block; margin-bottom: 8px; font: 13px var(--mono); letter-spacing: .08em; color: var(--gold); }
.dialogue .house { display: block; margin-top: 14px; font: 14px var(--sans); color: var(--ink-3); }
.free { margin: 0 0 16px; }
.free textarea { min-height: 60px; text-align: left; }
.free .ob-btn { margin-top: 10px; }
.choices { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.ob-btn { min-height: 46px; padding: 0 20px; border: 1px solid var(--gold-line); border-radius: 999px; background: rgba(218,181,66,.06); color: var(--gold-2);
  font: 500 14px var(--mono); letter-spacing: .08em; cursor: pointer; transition: background 160ms var(--ease), border-color 160ms var(--ease); }
.ob-btn:hover { background: rgba(218,181,66,.14); border-color: var(--gold); }
.ob-btn.quiet { border-color: var(--line-2); background: none; color: var(--ink-3); }

/* the papers form */
.paper { max-width: 680px; margin: 0 auto; }
.paper-head { margin-bottom: 8px; }
.progress { display: flex; align-items: center; gap: 14px; margin: 0 0 8px; font-size: 13px; color: var(--ink-3); }
.progress .track { flex: 1; height: 3px; background: var(--line-2); border-radius: 2px; overflow: hidden; }
.progress .fill { height: 100%; width: 0; background: var(--gold); transition: width 300ms var(--ease); }
.sec { margin: 40px 0 16px; padding-bottom: 8px; border-bottom: 1px solid var(--gold-line); font: 400 14px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.q { margin: 0 0 22px; }
.q em { font-style: normal; color: var(--gold); font-size: 13px; margin-left: 6px; }
.radios { display: flex; flex-wrap: wrap; gap: 8px; }
.radios label { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 15px; cursor: pointer; transition: border-color 160ms var(--ease), background 160ms var(--ease); }
.radios label:has(input:checked) { border-color: var(--gold); background: rgba(218,181,66,.1); }
.radios input { accent-color: var(--gold); margin: 0; }
.consent { padding: 16px; margin: 0 0 20px; border: 1px solid var(--line-2); border-radius: 12px; font-size: 15px; color: var(--ink-2); }
.consent p { margin: 0; }
.health { margin: 0; padding: 0; border: 0; min-width: 0; }
.health:disabled { opacity: .4; }
.q output { float: right; font: 16px var(--mono); color: var(--gold); }
input[type=range] { width: 100%; accent-color: var(--gold); }
.scale { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-3); }
.paper-foot { position: sticky; bottom: 0; margin-top: 28px; padding: 16px 0 20px; background: linear-gradient(180deg, transparent, var(--bg) 30%); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* 7 Nov: tap to hear him (browsers allow sound only after a tap), and the papers inside his scene */
.hear { display: inline-flex; align-items: center; gap: 8px; margin: 18px auto 0; padding: 8px 18px; border: 1px solid var(--gold-line); border-radius: 999px;
  background: rgba(218,181,66,.1); color: var(--gold-2); font: 500 14px var(--sans); letter-spacing: .04em; cursor: pointer; animation: hear-pulse 2.4s var(--ease) infinite; }
@keyframes hear-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(218,181,66,.25); } 50% { box-shadow: 0 0 0 8px rgba(218,181,66,0); } }
.dialogue .papers-house { font-size: 14px; line-height: 1.6; }
.dialogue .papers-house a { color: var(--gold); }

/* framed on the home page: the scene only, on the home's own background */
html.embed body { background: transparent; min-height: 0; }
html.embed .bar, html.embed .mode-strip { display: none !important; }
html.embed main { padding: 8px 12px 16px; }
html.embed .portrait { width: min(260px, 58vw); margin-bottom: 18px; }

/* 7 Nov: the paperwork, one question at a time inside his scene */
.ask-box { display: block; width: 100%; max-width: 440px; margin: 0 auto 6px; text-align: left; }
.choices .ask-box { flex-basis: 100%; }
.ob-btn.on { background: rgba(218,181,66,.22); border-color: var(--gold); color: var(--ink); }

/* 7 Nov (Louis): the choices as ultra-simple mobile tap-throughs, the quiz-funnel look (Noom's live quiz: full-width
   stacked answers about 62px tall, plain left-aligned 18px text, soft fill). Their face is Untitled Sans (a paid licence);
   ours is the phone's own UI face (SF Pro on iPhone, Roboto on Android): what a tap target looks like to that thumb. */
:root { --tap: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.choices { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 10px; width: 100%; max-width: 440px; margin: 0 auto; }
.ob-btn { display: flex; align-items: center; justify-content: flex-start; width: 100%; min-height: 60px; padding: 14px 20px; text-align: left;
  border: 1.5px solid transparent; border-radius: 14px; background: rgba(242,244,242,.075); color: var(--ink);
  font: 500 18px/1.3 var(--tap); letter-spacing: 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background 120ms ease, border-color 120ms ease, transform 80ms ease; }
.ob-btn:hover { background: rgba(242,244,242,.12); border-color: transparent; }
.ob-btn:active { transform: scale(.98); background: rgba(218,181,66,.22); border-color: var(--gold); }
.ob-btn.on { background: rgba(218,181,66,.16); border-color: var(--gold); color: var(--ink); }
.ob-btn.on::after { content: "\2713"; margin-left: auto; color: var(--gold); font-weight: 700; }
/* the one way forward: a solid pill, centred */
.ob-btn.primary { justify-content: center; text-align: center; min-height: 56px; margin-top: 6px; border-radius: 999px; background: var(--gold); color: #0a0a08;
  font: 600 17px/1 var(--tap); }
.ob-btn.primary:hover { background: var(--gold-2); }
/* Back and Skip: quiet words underneath, never a competing button */
.ob-btn.quiet { order: 9; justify-content: center; min-height: 40px; padding: 6px; background: none; border: 0; color: var(--ink-3);
  font: 400 15px var(--tap); width: auto; align-self: center; }
.ob-btn.quiet:hover, .ob-btn.quiet:active { background: none; color: var(--ink-2); transform: none; }
.free { width: 100%; max-width: 440px; margin: 0 auto 10px; }
.free .ob-btn { margin-top: 10px; }
.free textarea, .ask-box { font: 400 18px/1.4 var(--tap); border-radius: 14px; padding: 16px; }
/* "Turn on audio?" is a question about the page, not an answer: a small chip above his portrait, unlike any choice */
.hear { display: inline-flex; align-items: center; gap: 8px; margin: 0 auto 14px; padding: 7px 14px 7px 12px; border: 1px solid var(--line-2); border-radius: 999px;
  background: rgba(3,6,8,.6); color: var(--ink-2); font: 500 14px var(--tap); letter-spacing: 0; animation: hear-pulse 2.4s var(--ease) infinite; }
.hear svg { color: var(--gold); }

/* 7 Nov: nothing moves. No fade or slide on his words, a fixed place for the question, the buttons start at the same
   height on every screen, no shrink on tap, and the audio chip floats over the portrait instead of pushing it down. */
.intro { position: relative; }
.dialogue, .dialogue.visible { opacity: 1; transform: none; transition: none; min-height: 5.6em; display: flex; flex-direction: column; justify-content: flex-end; }
.ob-btn, .ob-btn:active { transform: none !important; transition: background 120ms ease, border-color 120ms ease; }
.hear { position: absolute; top: 40px; left: 50%; transform: translateX(-50%); z-index: 2; margin: 0; }
.qbar { height: 4px; max-width: 440px; margin: 0 auto 22px; border-radius: 2px; background: var(--line-2); overflow: hidden; }
.qfill { height: 100%; width: 0; background: var(--gold); transition: width 300ms ease; }
.papers-fine a { color: var(--ink-2); }

/* the one progress bar replaces the three step pills (7 Nov) */
.steps { display: none !important; }

/* the footer (7 Nov), hidden when the scene is framed on the home page (the home has its own) */
.foot { margin-top: 40px; padding: 28px 16px 36px; border-top: 1px solid var(--line); text-align: center; color: var(--ink-3); font: 13px/1.6 var(--sans); }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 0 0 10px; }
.foot-links a { color: var(--ink-2); text-decoration: none; }
.foot-links a:hover { color: var(--gold); }
.foot-links.papers a { color: var(--ink-3); }
.foot p { max-width: 640px; margin: 8px auto 0; }
html.embed .foot { display: none; }

/* Louis, 9 Nov: his portrait bigger, and alive the way it is in the app (the app's own idle breathing, power-on,
   gold scan line, green glow, and the lean while he speaks: styles.css .agent-portrait / .scan-line / .avatar-glow). */
.portrait { width: min(440px, 88vw); margin-bottom: 22px; border-radius: 6px; background: #000;
  box-shadow: 0 0 0 1px var(--gold-line), 0 30px 80px rgba(0,0,0,.55), 0 0 70px rgba(218,181,66,.10); }
.portrait img { filter: saturate(0.92) brightness(0.86) contrast(1.08); transform-origin: 50% 42%;
  animation: portraitIdle 11s ease-in-out infinite; }
.portrait img.poweron { animation: portraitReveal 2s ease forwards, portraitIdle 11s ease-in-out 2s infinite; }
.portrait img.speaking { animation: portraitSpeak 1.15s ease-in-out infinite !important;
  filter: saturate(1.02) brightness(1.08) contrast(1.1) drop-shadow(0 0 12px rgba(0,255,136,0.38)); }
.portrait .glow { position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(circle at 50% 68%, rgba(224,190,104,.18), transparent 34%), radial-gradient(circle at 50% 100%, rgba(124,255,138,.10), transparent 66%);
  animation: avatarGlowPulse 6.2s ease-in-out infinite; }
.portrait .scan-line { position: absolute; top: 0; left: 0; right: 0; height: 100%; pointer-events: none; z-index: 4; opacity: .7;
  background: linear-gradient(90deg, transparent 0%, rgba(252,223,134,.24) 10%, #f5dc8a 50%, rgba(252,223,134,.24) 90%, transparent 100%);
  background-size: 100% 2px; background-repeat: no-repeat; animation: scanSweep 5.2s linear infinite; }
@keyframes portraitIdle { 0% { transform: scale(1.004) translateY(0); } 50% { transform: scale(1.008) translateY(-0.5px); } 100% { transform: scale(1.004) translateY(0); } }
@keyframes portraitSpeak { 0% { transform: scale(1.038) translateY(-1px); } 50% { transform: scale(1.055) translateY(-2px); } 100% { transform: scale(1.038) translateY(-1px); } }
@keyframes portraitReveal { 0% { filter: saturate(0) brightness(0.03); opacity: .06; } 20% { filter: saturate(.2) brightness(.3); opacity: .35; } 40% { filter: saturate(.1) brightness(.15); opacity: .15; } 70% { filter: saturate(.6) brightness(.7); opacity: .72; } 100% { filter: saturate(.92) brightness(.86) contrast(1.08); opacity: 1; } }
@keyframes avatarGlowPulse { 0%, 100% { opacity: .7; transform: scale(.995); } 50% { opacity: 1; transform: scale(1.02); } }
@keyframes scanSweep { 0% { transform: translateY(0); opacity: 0; } 4% { opacity: .88; } 96% { opacity: .88; } 100% { transform: translateY(100%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .portrait img, .portrait .glow, .portrait .scan-line { animation: none !important; } }
/* bigger answers and a bigger Next (Louis, 9 Nov) */
.ob-btn { min-height: 68px; padding: 16px 22px; font-size: 20px; border-radius: 16px; }
.ob-btn.primary { min-height: 64px; font-size: 19px; }
.choices { max-width: 480px; gap: 12px; }

/* "Turn on audio?" as a permission prompt over the scene (Louis, 9 Nov): one big yes, a small no */
.audio-ask { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px;
  background: rgba(2,4,6,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: askIn .25s ease; }
.audio-ask-box { width: min(340px, 100%); padding: 28px 24px 18px; border-radius: 20px; text-align: center; color: var(--gold-2);
  background: #0d1214; border: 1px solid var(--gold-line); box-shadow: 0 30px 80px rgba(0,0,0,.6); animation: askPop .3s cubic-bezier(.2,.9,.3,1.2); }
.audio-ask-title { margin: 10px 0 20px; color: var(--ink); font: 500 22px/1.3 var(--sans); }
.audio-ask-yes { display: block; width: 100%; min-height: 56px; border: 0; border-radius: 14px; background: var(--gold); color: #0a0a08;
  font: 600 18px var(--sans); cursor: pointer; }
.audio-ask-yes:hover { background: var(--gold-2); }
.audio-ask-no { margin-top: 12px; padding: 6px 10px; border: 0; background: none; color: var(--ink-3); font: 14px var(--sans); cursor: pointer; }
.audio-ask-no:hover { color: var(--ink-2); text-decoration: underline; }
@keyframes askIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes askPop { from { transform: scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .audio-ask, .audio-ask-box { animation: none; } }

/* after the account: one question a screen, Sesame's pattern in Aelfred's dark and gold (Louis, 9 Nov) */
.step { width: 100%; max-width: 460px; margin: 0 auto; min-height: calc(100svh - 160px); display: flex; flex-direction: column; padding: 4px 4px 24px; }
.st-top { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; justify-items: center; margin-bottom: 26px; }
.st-back { width: 44px; height: 44px; border: 0; background: none; color: var(--ink-3); cursor: pointer; display: grid; place-items: center; border-radius: 50%; }
.st-back:hover { color: var(--gold-2); background: rgba(218,181,66,.08); }
.st-mark { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; box-shadow: 0 0 0 2px var(--gold-line), 0 0 22px rgba(218,181,66,.18); }
.st-title { margin: 0 0 8px; color: var(--ink); font: 600 clamp(26px, 7vw, 32px)/1.15 var(--sans); letter-spacing: -.01em; }
.st-sub { margin: 0 0 30px; color: var(--ink-3); font-size: 18px; line-height: 1.4; }
.st-sub:empty { display: none; }
.st-body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.st-input { width: 100%; padding: 22px 22px; border-radius: 22px; border: 1px solid var(--gold-line); background: rgba(255,255,255,.035);
  color: var(--ink); font: 500 22px var(--sans); outline: none; box-shadow: inset 0 0 0 4px rgba(255,255,255,.015); }
.st-input::placeholder { color: rgba(242,244,242,.32); }
.st-input:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(218,181,66,.12); }
.st-note { min-height: 22px; margin: 14px 0 0; text-align: center; color: var(--ink-3); font-size: 15px; }
.st-note.bad { color: #ff9c8a; }
.st-go { display: block; width: 100%; min-height: 62px; margin-top: 10px; border: 1px solid var(--gold); border-radius: 999px; background: var(--gold);
  color: #0a0a08; font: 600 19px var(--sans); cursor: pointer; text-align: center; line-height: 60px; text-decoration: none; transition: opacity .2s, background .2s; }
.st-go:hover { background: var(--gold-2); color: #0a0a08; }
.st-go:disabled { background: transparent; color: var(--ink-3); border-color: var(--line-2); cursor: default; }
.st-go.gmail { margin: 18px 0 14px; }
.step-verified .st-body { align-items: center; text-align: center; }
.step-verified { text-align: center; }
.step-verified .st-title { order: 4; margin-top: 18px; }
.step-verified .st-body { order: 3; flex: 0 0 auto; margin-top: 18vh; }
.step-verified .st-sub { order: 5; }
.step-verified .st-note { order: 6; flex: 1; }
.step-verified .st-go { order: 7; }
.st-tick { width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; color: var(--gold-2);
  background: rgba(218,181,66,.10); box-shadow: 0 0 0 1px var(--gold-line), 0 0 60px rgba(218,181,66,.15); animation: askPop .45s cubic-bezier(.2,.9,.3,1.3); }
.wheel { position: relative; display: grid; grid-template-columns: 1.7fr .8fr 1.2fr; gap: 4px; padding: 0 10px; border-radius: 22px;
  background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.wheel::before { content: ""; position: absolute; left: 8px; right: 8px; top: 50%; height: 44px; margin-top: -22px; border-radius: 12px;
  background: rgba(218,181,66,.10); border: 1px solid var(--gold-line); pointer-events: none; }
.wh-col { height: 220px; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; outline: none;
  -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); }
.wh-col::-webkit-scrollbar { display: none; }
.wh-pad, .wh-item { height: 44px; }
.wh-item { scroll-snap-align: center; display: flex; align-items: center; justify-content: center; color: var(--ink-3); font: 500 20px var(--sans); cursor: pointer; transition: color .15s, transform .15s; }
.wh-month .wh-item { justify-content: flex-start; padding-left: 10px; }
.wh-item.on { color: var(--ink); font-weight: 500; transform: scale(1.06); }
.st-lock { margin: 4px 0 0; text-align: center; color: var(--ink-3); font-size: 15px; display: flex; gap: 6px; align-items: center; justify-content: center; }

/* Log in, top right beside the sound switch (Louis, 9 Nov: "login on top, our logo, the rest entirely onboarding") */
.bar .login { margin-left: auto; padding: 8px 16px; border-radius: 999px; background: var(--gold); color: #0a0a08; font: 600 15px var(--sans); text-decoration: none; }
.bar .login:hover { background: var(--gold-2); color: #0a0a08; }
.bar .login + .sound { margin-left: 10px; }
/* "Look around first" (12 Nov): the way out to the site, quiet beside Log in. */
.bar .look { margin-left: auto; color: var(--ink-3); font: 500 14px var(--sans); text-decoration: none; white-space: nowrap; }
.bar .look:hover { color: var(--gold); }
.bar .look + .login { margin-left: 14px; }

/* Article 50 line (12 Nov): quiet, under the choices, never a banner. */
.intro .ai-note { margin: 18px 0 0; text-align: center; font-size: 12px; letter-spacing: .04em; color: var(--ink-3); }
.foot-links .foot-reset { color: var(--ink-2); text-decoration: none; font-size: inherit; }
.foot-links .foot-reset:hover { color: var(--gold); }

.wh-col:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* The footer sits at the bottom of the screen, not under a short card (Louis, 12 Nov 20:49). */
body { display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }
body > .foot { flex-shrink: 0; }

/* Phones (Louis, 12 Nov 21:47: "clearly there's so much u haven't thought about"). Measured on a 390×740 screen:
   the header took two rows (115px) and the answers began at 691px, below the fold. Now: one header row, a smaller
   portrait, a tighter line, so the question and its answers sit on the first screen. */
@media (max-width: 560px) {
  .bar { flex-wrap: nowrap; gap: 8px; padding: 10px 14px; }
  .bar-logo img { width: 96px; }
  .bar .steps { display: none; }
  .bar .look { margin-left: auto; font-size: 12.5px; }
  .bar .look + .login { margin-left: 8px; }
  .bar .login { padding: 6px 12px; font-size: 13px; }
  .bar .sound { padding: 4px 10px; font-size: 12px; }
  main { padding-top: 14px; padding-bottom: 32px; }
  .portrait { width: min(260px, 64vw); margin-bottom: 12px; }
  .dialogue, .dialogue.visible { min-height: 3em; margin-bottom: 14px; font-size: 20px; }
  .ob-btn { min-height: 50px; padding: 10px 18px; }
  .choices { gap: 8px; }
}
@media (max-width: 560px) and (max-height: 700px) {
  .portrait { width: min(200px, 52vw); }
}
@media (max-width: 560px) { .bar .login, .bar .sound, .bar .look { white-space: nowrap; } }
/* Skip is an offer, not the answer: outlined while the box is empty; gold once he types and it becomes Enter. */
.ob-btn.primary.skipping { background: none; border: 1px solid var(--line-2); color: var(--ink-2); }
.ob-btn.primary.skipping:hover { background: rgba(242,244,242,.06); color: var(--ink); }

/* Louis, 12 Nov: the return screens looked bare. Aelfred greets him back, smiling. */
.return-portrait { width: min(260px, 62vw); margin: 0 auto 22px; }
@media (max-width: 560px) { .return-portrait { width: min(200px, 54vw); } }

/* Louis, 13 Nov: the account screen offers the main page too, clearly. Answers are kept: coming back resumes. */
.learn-first { width: auto; min-height: 40px; padding: 0 18px; margin: 0 0 20px; font-size: 15px; }