/* Home page v4 (design reference: design/home-v4 branch). Fonts are served from /fonts. */
@font-face { font-family: Figtree; font-weight: 300; font-display: swap; src: url(/fonts/figtree-latin-300-normal.woff2) format("woff2"); }
@font-face { font-family: Figtree; font-weight: 400; font-display: swap; src: url(/fonts/figtree-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: Figtree; font-weight: 500; font-display: swap; src: url(/fonts/figtree-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: Figtree; font-weight: 600; font-display: swap; src: url(/fonts/figtree-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: Figtree; font-weight: 700; font-display: swap; src: url(/fonts/figtree-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-display: swap; src: url(/fonts/instrument-serif-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-display: swap; src: url(/fonts/instrument-serif-latin-400-italic.woff2) format("woff2"); }
@font-face { font-family: Parisienne; font-display: swap; src: url(/fonts/parisienne-latin-400-normal.woff2) format("woff2"); }

:root {
  --bg: #080B17;
  --text: #F2F0FA;
  --soft: #CDD0E4;
  --muted: #B7BAD2;
  --faint: #8C90A8;
  --line: rgba(242, 240, 250, .16);
  --line-soft: rgba(242, 240, 250, .08);
  --panel: rgba(15, 18, 36, .96);
  --card: rgba(16, 20, 40, .9);
  --violet: #B9A9FF;
  --mint: #9FD8C8;
  --gold: #D4B06A;
  --serif: "Instrument Serif", Georgia, serif;
  --script: Parisienne, cursive; /* the one script (BRAND.md, Rick 22 Oct): wordmark and the welcome line only */
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg); color: var(--text);
  font: 16px/1.5 Figtree, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
button, input, textarea { font-family: inherit; color: inherit; }
a { color: var(--text); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Background glows */
.glow { position: fixed; border-radius: 50%; pointer-events: none; z-index: 0; }
.g1 { top: -160px; left: 8%; width: 720px; height: 600px; background: radial-gradient(closest-side, rgba(124,108,240,.32), rgba(124,108,240,0)); filter: blur(40px); animation: drift 18s ease-in-out infinite; }
.g2 { top: 60px; right: -4%; width: 640px; height: 560px; background: radial-gradient(closest-side, rgba(86,128,220,.26), rgba(86,128,220,0)); filter: blur(44px); animation: drift 22s ease-in-out infinite reverse; }
.g3 { top: 520px; left: 30%; width: 560px; height: 400px; background: radial-gradient(closest-side, rgba(110,190,180,.14), rgba(110,190,180,0)); filter: blur(46px); }
@keyframes drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(30px, -20px); } }

/* Top bar and logo */
.top { position: relative; z-index: 3; display: flex; align-items: center; gap: 22px; padding: 24px 40px; }
.icon-btn { width: 40px; height: 40px; flex: none; border-radius: 12px; border: 1px solid var(--line); background: transparent; color: #E6E4F2; cursor: pointer; font-size: 16px; }
.icon-btn:hover { background: rgba(255,255,255,.05); }
.logo { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--text); }
.logo-art { position: relative; display: block; height: 72px; width: 262px; }
.wm { position: absolute; left: 0; top: 0; font-family: var(--script); font-size: 54px; line-height: 58px; white-space: nowrap; }
.rule { position: absolute; left: 94px; top: 54px; color: var(--text); transform-origin: left center; }
.pen { position: absolute; left: 182px; top: 2px; height: 56px; width: auto; }
.powered { display: flex; align-items: center; gap: 6px; font-size: 12px; letter-spacing: .06em; color: #A9ADC6; }
.powered img { height: 14px; width: auto; }
@keyframes write { 0% { clip-path: inset(0 100% 0 0); } 70%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes pen { 0% { transform: translate(-170px,-10px) rotate(-10deg); } 12% { transform: translate(-145px,2px) rotate(4deg); } 24% { transform: translate(-120px,-8px) rotate(-6deg); } 36% { transform: translate(-94px,4px) rotate(5deg); } 48% { transform: translate(-66px,-6px) rotate(-4deg); } 60% { transform: translate(-40px,0) rotate(2deg); } 72% { transform: translate(-90px,0) rotate(0); } 100% { transform: translate(0,0) rotate(0); } }
@keyframes rule { 0%, 62% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
.wm { animation: write 3.6s cubic-bezier(.45,.05,.4,1) .3s both; }
.pen { animation: pen 3.6s cubic-bezier(.45,.05,.4,1) .3s both; }
.rule { animation: rule 3.6s cubic-bezier(.45,.05,.4,1) .3s both; }
@media (prefers-reduced-motion: reduce) { .wm, .pen, .rule, .g1, .g2 { animation: none; } }
.spacer { flex: 1; }
.nav-links { display: flex; gap: 22px; }
.nav-links a { text-decoration: none; font-size: 15px; color: #C9CCE0; }
.nav-links a:hover { color: var(--text); }
.quota { color: var(--faint); font-size: 13px; white-space: nowrap; }
.signin { min-height: 40px; padding: 0 18px; border-radius: 99px; border: 0; background: var(--text); color: var(--bg); font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }

/* Sidebar */
.scrim { position: fixed; inset: 0; z-index: 9; background: rgba(4, 6, 14, .55); }
.sidebar {
  position: fixed; z-index: 10; top: 0; bottom: 0; left: 0; width: 272px; max-width: 86vw; overflow-y: auto;
  background: rgba(14,17,34,.98); border-right: 1px solid rgba(242,240,250,.07);
  padding: 20px 14px; display: flex; flex-direction: column; gap: 14px;
}
.side-top { display: flex; align-items: center; justify-content: space-between; padding: 0 6px; }
.side-mark { font-family: var(--script); font-size: 30px; line-height: 1; }
.side-new { min-height: 42px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.04); font-size: 15px; font-weight: 600; text-align: left; padding: 0 14px; cursor: pointer; }
.side-section { display: flex; flex-direction: column; gap: 2px; }
.side-head { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #7E82A0; padding: 6px 10px; }
.side-item { padding: 7px 10px; font-size: 14px; color: #8F93AE; background: none; border: 0; text-align: left; }
.side-live { color: var(--soft); cursor: pointer; border-radius: 10px; }
.side-live:hover { background: rgba(255,255,255,.05); }
.side-foot { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.03); font-size: 12.5px; color: #A9ADC6; }
.side-foot img { height: 20px; width: auto; }
.soon-tag { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 99px; background: rgba(242,240,250,.08); color: #A9ADC6; white-space: nowrap; }

/* Main column */
main { position: relative; z-index: 1; max-width: 864px; margin: 0 auto; padding: 0 32px; display: flex; flex-direction: column; }
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; padding: 106px 0 30px; }
.hero h1 { margin: 0; font-size: 72px; line-height: 1.02; font-weight: 600; letter-spacing: -.035em; }
.accent { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; background: linear-gradient(90deg, #C7BCFF, var(--mint)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.subhead { margin: 0; font-size: 19px; line-height: 1.5; color: var(--muted); max-width: 600px; }
.greeting { margin: 14px 0 0; font-size: 18px; font-weight: 600; color: var(--soft); }
main.chatting .hero, main.chatting .panels, main.chatting .more-wrap, main.chatting .more { display: none !important; }
main.home .thread { display: none; }

/* Ask box */
.composer-wrap { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
main.chatting .composer-wrap { position: sticky; bottom: 0; background: linear-gradient(rgba(8,11,23,0), var(--bg) 30%); padding-top: 18px; }
.composer { border-radius: 28px; padding: 1px; background: linear-gradient(120deg, rgba(185,169,255,.6), rgba(159,216,200,.45)); }
.composer-inner { border-radius: 27px; background: var(--panel); padding: 14px 12px 12px 22px; display: flex; flex-direction: column; gap: 12px; }
.composer-row { display: flex; align-items: flex-start; gap: 12px; }
.composer textarea {
  flex: 1; min-width: 0; resize: none; border: 0; outline: 0; background: transparent; color: var(--text);
  font-size: 19px; line-height: 1.45; max-height: 40vh; padding: 9px 0;
}
.composer textarea::placeholder { color: var(--faint); }
.send { width: 46px; height: 46px; flex: none; border-radius: 50%; border: 0; cursor: pointer; background: linear-gradient(135deg, var(--violet), var(--mint)); color: var(--bg); display: grid; place-items: center; }
.send:disabled { opacity: .4; cursor: default; }
.modes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mode {
  min-height: 36px; padding: 0 14px; border-radius: 99px; display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; cursor: pointer; background: transparent; color: var(--soft); border: 1px solid rgba(242,240,250,.2);
}
.mode:hover { background: rgba(255,255,255,.05); }
.mode[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.mode .it { border-bottom: 3px double currentColor; padding-bottom: 1px; }
.mode .quill { height: 20px; width: auto; margin-left: -4px; margin-top: -8px; }
.badge { font-size: 10px; font-weight: 700; letter-spacing: .08em; padding: 2px 6px; border-radius: 99px; background: var(--gold); color: var(--bg); }
.badge.free { background: var(--mint); }

/* Under the box */
.panels { margin-top: 20px; }
.suggestions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.suggestion {
  min-height: 36px; padding: 0 15px; border-radius: 99px; border: 1px solid rgba(242,240,250,.18); background: transparent;
  color: #DADCEC; font-size: 14px; cursor: pointer;
}
.suggestion:first-child { border-color: rgba(159,216,200,.45); background: rgba(159,216,200,.08); color: #CFEDE5; }
.suggestion:hover { background: rgba(255,255,255,.06); }
.panel-text { margin: 0; text-align: center; font-size: 15px; color: var(--muted); }
.panel-text .soon-tag { margin-left: 6px; vertical-align: 2px; }
.card { border-radius: 22px; background: rgba(20,24,46,.95); padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.card p { margin: 0; }
.coach-card { border: 1px solid rgba(217,183,122,.35); }
.coach-who { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #E8D3A6; }
.coach-dot { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #F5E3B8, var(--gold) 70%); }
.coach-card p { font-size: 17px; line-height: 1.55; color: #E6E4F2; }
.coach-start { margin-top: 4px; min-height: 46px; padding: 0 22px; border: 0; border-radius: 999px; background: linear-gradient(90deg, #C9BDFF, #A8DCCB); color: #121430; font-weight: 600; font-size: 15px; cursor: pointer; }
.gold-btn { min-height: 46px; padding: 0 22px; border-radius: 99px; border: 0; background: var(--gold); color: var(--bg); font-size: 15px; font-weight: 600; cursor: pointer; }
.sheet-status[data-state="failed"] { color: #fca5a5 !important; }
.battle-card { border: 1px solid rgba(185,169,255,.35); gap: 8px; }
.battle-title { font-size: 20px; font-weight: 600; }
.battle-card p { font-size: 16px; line-height: 1.55; color: #E6E4F2; }
.battle-plan { font-size: 14px; color: #E8D3A6; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.more-wrap { display: flex; justify-content: center; padding: 40px 0 40px; }
.more-btn { min-height: 40px; padding: 0 18px; border-radius: 99px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 14px; cursor: pointer; }
.more-btn:hover { color: var(--text); }
.more-btn::after { content: " ⌄"; }
.more-btn[aria-expanded="true"]::after { content: " ⌃"; }

/* Expanded sections (wider than the ask box) */
.more { width: min(1180px, calc(100vw - 64px)); margin-left: 50%; transform: translateX(-50%); padding-bottom: 110px; }
.sec { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 26px; padding-top: 70px; }
.sec:first-child { padding-top: 10px; }
.sec-head { display: flex; flex-direction: column; gap: 12px; text-align: center; align-items: center; }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--violet); }
.sec h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 46px; line-height: 1.08; max-width: 860px; text-align: center; }
.sec > h2 { align-self: center; }
.sec-body { margin: 0; font-size: 17px; line-height: 1.55; color: var(--muted); max-width: 720px; }
.today { margin: 0; text-align: center; font-size: 14px; color: #A9ADC6; }
.stats { border-radius: 22px; background: var(--card); border: 1px solid var(--line-soft); padding: 22px 28px; display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 18px; align-items: center; }
.stats-intro { font-size: 15px; line-height: 1.5; color: var(--soft); }
.stat { display: flex; flex-direction: column; }
.stat b { font-size: 38px; font-weight: 600; line-height: 1; }
.stat span { font-size: 13.5px; color: #A9ADC6; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.job { border-radius: 20px; background: #0E1226; border: 1px solid rgba(242,240,250,.07); padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.job b { font-size: 19px; font-weight: 600; }
.job span { font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.tag { margin-top: 4px; align-self: flex-start; font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 99px; color: var(--text); }
.tone-mint { background: rgba(159,216,200,.18); } .tone-violet { background: rgba(185,169,255,.2); } .tone-gold { background: rgba(217,183,122,.22); }
.source-line { text-align: center; font-size: 12px; color: #7E82A0; }
.promise { border-radius: 22px; background: var(--card); border: 1px solid var(--line-soft); padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.promise i { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 20px; font-style: normal; }
.promise i.tone-violet { background: rgba(185,169,255,.16); } .promise i.tone-mint { background: rgba(159,216,200,.16); } .promise i.tone-gold { background: rgba(217,183,122,.16); }
.promise b { font-size: 22px; font-weight: 600; }
.promise span { font-size: 15px; line-height: 1.55; color: var(--muted); }
.squire-box { border-radius: 28px; background: linear-gradient(135deg, rgba(124,108,240,.16), rgba(16,20,40,.95) 55%); border: 1px solid rgba(185,169,255,.25); padding: 44px; display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px; align-items: center; }
.squire-left { display: flex; flex-direction: column; gap: 16px; }
.squire-left img { height: 96px; width: auto; align-self: flex-start; }
.squire-left .big { font-family: var(--serif); font-size: 40px; line-height: 1.1; }
.squire-right { display: flex; flex-direction: column; gap: 14px; font-size: 16px; line-height: 1.55; color: var(--soft); }
.squire-right b { color: var(--text); }
.squire-right .today { text-align: left; }
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.plan { border-radius: 22px; background: rgba(16,20,40,.92); border: 1px solid rgba(242,240,250,.1); padding: 26px; display: flex; flex-direction: column; gap: 12px; }
.plan.violet { background: rgba(22,26,52,.95); border-color: rgba(185,169,255,.5); }
.plan.gold { border-color: rgba(217,183,122,.4); } .plan.gold-outline { border-color: rgba(217,183,122,.6); }
.plan-name { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 18px; font-weight: 600; }
.plan-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.plan-price b { font-size: 40px; font-weight: 600; line-height: 1; }
.plan-price small { font-size: 14px; color: var(--faint); }
.plan-later { font-size: 13px; color: var(--faint); margin-top: -4px; }
.plan-tagline { font-family: var(--serif, inherit); font-style: italic; font-size: 17px; color: var(--gold, inherit); }
.plan-text { font-size: 14.5px; line-height: 1.6; color: #C2C5DA; }
.plan-btn { margin-top: auto; min-height: 44px; border-radius: 99px; font-size: 14.5px; font-weight: 600; cursor: pointer; border: 1px solid rgba(242,240,250,.25); background: transparent; }
.plan.violet .plan-btn { background: var(--violet); color: var(--bg); border: 0; }
.plan.gold .plan-btn { background: var(--gold); color: var(--bg); border: 0; }
.plan.gold-outline .plan-btn { border-color: var(--gold); color: #E8D3A6; }
.fine { text-align: center; font-size: 13px; color: var(--faint); margin: 0; }
.plans-head .eyebrow { color: var(--gold); }

/* Conversation */
.thread { flex: 1; padding: 8px 0 24px; min-height: 50vh; }
.msg { margin: 18px 0; }
.msg.user { display: flex; justify-content: flex-end; }
.msg.user .bubble { background: rgba(185,169,255,.12); border: 1px solid rgba(185,169,255,.18); border-radius: 20px 20px 6px 20px; padding: 10px 16px; max-width: 85%; white-space: pre-wrap; word-wrap: break-word; }
.msg.ai .answer { word-wrap: break-word; line-height: 1.6; }
.answer p { margin: 0 0 .8em; }
.answer ul, .answer ol { padding-left: 1.3em; margin: 0 0 .8em; }
.answer code { background: #151a33; padding: 1px 5px; border-radius: 5px; font-size: .92em; }
.answer pre { background: #0E1226; padding: 12px; border-radius: 10px; overflow-x: auto; }
.answer a { color: var(--violet); }
.answer h1, .answer h2, .answer h3 { font-size: 1.05em; margin: 1em 0 .4em; }
.status { color: var(--faint); font-size: 14px; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.status .orb { width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, var(--violet), var(--mint)); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .status .orb { animation: none; } }
.sources { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0 4px; scrollbar-width: thin; } /* under the answer */
.source { flex: none; max-width: 220px; border: 1px solid var(--line-soft); border-radius: 12px; padding: 8px 10px; font-size: 12.5px; color: var(--soft); text-decoration: none; background: rgba(16,20,40,.8); }
.source:hover { background: rgba(26,30,56,.9); }
.source .host { color: var(--faint); display: block; }
.source .title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cite { font-size: 11px; vertical-align: super; text-decoration: none; color: var(--violet); margin-left: 1px; }
.msg-error { color: #fca5a5; }
.msg-note { color: var(--faint); font-size: 12.5px; margin: 4px 0 0; }
.msg-by { color: var(--faint); font-size: 12px; margin: 6px 0 0; }
/* "Why this AI?": a small word link with a 44px tap area that doesn't push the line apart. */
.msg-why { background: none; border: 0; color: var(--muted); font: inherit; text-decoration: underline; cursor: pointer;
  min-height: 44px; padding: 0 6px; margin: -14px 0; }
.msg-why-line a { color: inherit; text-decoration: underline; }
.msg-why-line a:focus-visible { outline: 2px solid #F3F1FF; outline-offset: 3px; border-radius: 4px; } /* Starlight focus (BRAND.md) */
.msg-why:focus-visible { outline: 2px solid #F3F1FF; outline-offset: 3px; border-radius: 4px; } /* Starlight focus (BRAND.md) */

/* Sheets (sign-in, profile) */
.sheet { width: min(420px, calc(100vw - 32px)); border: 1px solid var(--line); border-radius: 24px; background: #0E1124; color: var(--text); padding: 28px 24px 22px; text-align: center; }
.sheet::backdrop { background: rgba(4,6,14,.7); backdrop-filter: blur(4px); }
.sheet-star { height: 48px; width: auto; }
.sheet h2 { font-weight: 600; font-size: 22px; margin: 10px 0 8px; }
.sheet p { color: var(--muted); margin: 0 0 18px; }
.sheet-close { position: absolute; right: 10px; top: 6px; }
.sheet-close button { background: none; border: 0; font-size: 26px; color: var(--muted); cursor: pointer; }
.primary, .secondary { width: 100%; border-radius: 999px; padding: 12px 16px; cursor: pointer; font-weight: 600; }
.primary { border: 0; background: linear-gradient(135deg, var(--violet), var(--mint)); color: var(--bg); }
.secondary { border: 1px solid var(--line); background: rgba(255,255,255,.04); margin-top: 8px; }
.or { color: var(--muted); font-size: 13px; margin: 12px 0; }
.email-form input { width: 100%; border: 1px solid var(--line); background: rgba(8,11,23,.6); border-radius: 999px; padding: 12px 16px; font-size: 15px; }
.sheet-status { min-height: 1.2em; margin: 12px 0 0 !important; color: var(--violet) !important; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 20; background: #1A1E38; border: 1px solid var(--line); padding: 10px 16px; border-radius: 999px; font-size: 14px; max-width: calc(100vw - 32px); text-align: center; }
/* The shape interview: a full-screen chat with the coach (web/dna.js). Trait colours match the
   design record (design/coach-c0). */
:root { --t-openness: #B9A9FF; --t-conscientiousness: #D9B77A; --t-extraversion: #F2A07B; --t-agreeableness: #EFA3C4;
  --t-emotional_stability: #9FD8C8; --t-drive: #8FB8FF; --grad: linear-gradient(90deg, #C9BDFF, #A8DCCB); --card-solid: #10142A; }
.dna-sheet { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; border-radius: 0; text-align: left;
  background: radial-gradient(70% 40% at 50% 0%, rgba(124,108,240,.18), transparent 70%), var(--bg); overflow: hidden; }
.dna-sheet[open] { display: flex; flex-direction: column; }
/* Above the flow's header (z-index 6, web/coach-flow.css), which spans the full width and used to swallow the X's taps
   (Rick, 25 Oct: "the X does nothing"). */
.dna-sheet .sheet-close { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 10px); right: max(12px, env(safe-area-inset-right, 0px)); z-index: 7; }
.dna-sheet p { margin: 0; color: inherit; }
#dna-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.dna-bar { flex: none; height: 4px; margin: calc(env(safe-area-inset-top, 0px) + 26px) 64px 0 max(16px, env(safe-area-inset-left, 0px)); border-radius: 99px; background: var(--line-soft); overflow: hidden; }
.dna-bar::after { content: ""; display: block; height: 100%; width: var(--p, 0%); background: var(--grad); border-radius: inherit; transition: width .5s cubic-bezier(.2,.7,.2,1); }
.dna-thread { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px;
  padding: 20px max(16px, env(safe-area-inset-right, 0px)) 20px max(16px, env(safe-area-inset-left, 0px)); }
.dna-thread > * { width: 100%; max-width: 680px; margin-inline: auto; }
.dna-msg { display: flex; gap: 10px; align-items: flex-end; animation: dna-rise .35s cubic-bezier(.2,.7,.2,1) both; }
.dna-msg.you { justify-content: flex-end; }
.dna-orb { flex: none; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF4D6, #E2C07E 45%, #9A7A3E); box-shadow: 0 0 12px rgba(217,183,122,.35); }
.dna-msg.cont .dna-orb { visibility: hidden; }
.dna-bubble { padding: 10px 15px; border-radius: 20px 20px 20px 6px; background: var(--card); border: 1px solid var(--line-soft); max-width: min(560px, 86%); font-size: 16.5px; line-height: 1.45; }
.dna-bubble.big { font-family: var(--serif); font-size: clamp(23px, 6vw, 29px); line-height: 1.15; padding: 13px 18px 15px; }
.dna-msg.you .dna-bubble { background: var(--grad); color: #121430; border: 0; border-radius: 20px 20px 6px 20px; font-weight: 500; }
.dna-typing { display: inline-flex; gap: 5px; padding: 14px 16px; }
.dna-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: dna-dot 1s infinite; }
.dna-typing i:nth-child(2) { animation-delay: .15s; } .dna-typing i:nth-child(3) { animation-delay: .3s; }

.dna-pill { align-self: center; width: auto !important; display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px; border-radius: 99px; font-size: 14.5px;
  border: 1px solid rgba(217,183,122,.45); background: rgba(217,183,122,.08); animation: dna-rise .4s both; }
.dna-pill .star { color: var(--gold); }
.dna-pill.mint { border-color: rgba(159,216,200,.5); background: rgba(159,216,200,.08); }
.dna-card { padding: 16px 18px; border-radius: 20px; background: var(--card); border: 1px solid var(--line-soft); animation: dna-rise .4s both; }
.dna-card h4 { margin: 0 0 10px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }

.dna-tips { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--soft); font-size: 14.5px; }

.dna-dock { flex: none; display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 712px; margin-inline: auto;
  padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 14px) max(16px, env(safe-area-inset-left, 0px)); }
.dna-dock:empty { display: none; }
.dna-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.dna-opts.stack { flex-direction: column; }
.dna-scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.dna-opt { position: relative; min-height: 48px; padding: 8px 16px; border-radius: 99px; border: 1px solid var(--line); background: var(--card-solid); font-size: 15px; cursor: pointer; transition: border-color .2s, background .2s; }
.dna-scale .dna-opt { border-radius: 16px; padding: 8px 10px; }
.dna-scale .dna-opt b { display: none; }
.dna-opts.stack .dna-opt { border-radius: 16px; text-align: left; }
@media (hover: hover) { .dna-opt:hover:not(:disabled) { border-color: rgba(185,169,255,.55); } }
.dna-opt.on { border-color: var(--violet); background: rgba(185,169,255,.16); box-shadow: 0 0 0 4px rgba(185,169,255,.12), 0 0 30px rgba(185,169,255,.3); }
.dna-opt:disabled { opacity: .4; cursor: default; }
.dna-opt .sw { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c); margin-right: 8px; box-shadow: 0 0 10px var(--c); }
.dna-opt.pop { animation: dna-pop .42s cubic-bezier(.2,.7,.2,1); }
.dna-spark { position: absolute; left: 26px; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; pointer-events: none; animation: dna-spark .7s forwards; }
.dna-back { align-self: flex-start; background: none; border: 0; padding: 4px 0; color: var(--muted); font-size: 14px; cursor: pointer; }
.dna-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.dna-row .primary, .dna-row .secondary { flex: 1; min-width: 140px; margin-top: 0; }
.dna-cta { min-height: 52px; padding: 0 26px; border-radius: 99px; border: 0; background: var(--grad); color: #121430; font-weight: 600; font-size: 16px; cursor: pointer; align-self: flex-start; box-shadow: 0 10px 30px rgba(185,169,255,.25); }
.dna-cta:disabled { opacity: .45; cursor: default; box-shadow: none; }
.dna-link { background: none; border: 0; padding: 0; color: var(--soft); text-decoration: underline; text-underline-offset: 3px; font-size: 14.5px; cursor: pointer; align-self: flex-start; }
.dna-textrow { display: flex; gap: 8px; }
.dna-textrow input { flex: 1; min-width: 0; height: 52px; border-radius: 99px; border: 1px solid var(--line); background: var(--card-solid); padding: 0 20px; font-size: 16px; }
.dna-textrow input:focus { border-color: var(--violet); outline: none; box-shadow: 0 0 0 4px rgba(185,169,255,.14); }
.dna-send { flex: none; width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--grad); color: #121430; font-size: 20px; font-weight: 700; cursor: pointer; }
.dna-send:disabled { opacity: .4; cursor: default; }
.dna-takeover { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; overflow-y: auto;
  padding: 24px max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px));
  background: radial-gradient(80% 60% at 50% 30%, rgba(124,108,240,.35), transparent 70%), radial-gradient(70% 50% at 50% 100%, rgba(110,190,180,.18), transparent 70%), #070A16; animation: dna-fade .4s both; }
.dna-takeover .in { width: 100%; max-width: 460px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }

.reveal { position: relative; }
.dna-shape { width: 260px; max-width: 100%; height: auto; overflow: visible; }
.dna-shape .ring { fill: none; stroke: rgba(242,240,250,.12); stroke-width: 1; }
.dna-shape .fill { fill: rgba(185,169,255,.24); stroke: #B9A9FF; stroke-width: 2.5; stroke-linejoin: round; transform-origin: 130px 125px; animation: dna-grow 1s .2s cubic-bezier(.2,.7,.2,1) both; filter: drop-shadow(0 0 16px rgba(185,169,255,.6)); }
.dna-shape .node { transform-box: fill-box; transform-origin: center; animation: dna-node .4s calc(.8s + var(--d)) both; }
.dna-shape text { font: 600 11px Figtree, system-ui, sans-serif; }
.dna-burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.dna-burst i { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; opacity: 0; animation: dna-fly 1.4s var(--d) cubic-bezier(.15,.7,.3,1) forwards; }
.dna-burst i.long { width: 3px; height: 13px; border-radius: 2px; }
.dna-takeover .kicker { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.dna-takeover .arch { margin: 0; font-family: var(--serif); font-size: clamp(52px, 15vw, 78px); line-height: .95; animation: dna-rise .6s 1s both; }

.dna-takeover .pair { margin: 0; font-size: 15px; color: var(--soft); animation: dna-rise .6s 1.15s both; }
.dna-takeover .portrait { margin: 0; font-family: var(--serif); font-size: clamp(21px, 5.6vw, 26px); line-height: 1.2; animation: dna-rise .6s 1.3s both; }

.dna-takeover .dna-cta { align-self: center; margin-top: 10px; animation: dna-rise .6s 1.5s both; }

.dna-confirm { width: 100%; padding: 14px; border: 1px solid #5b2330; border-radius: 16px; }
.dna-confirm p { margin: 0 0 10px; }
@keyframes dna-rise { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes dna-fade { from { opacity: 0; } }
@keyframes dna-dot { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
@keyframes dna-pop { 35% { transform: scale(1.04); box-shadow: 0 0 0 7px rgba(185,169,255,.18), 0 0 44px rgba(185,169,255,.45); } }
@keyframes dna-spark { 0% { opacity: 1; transform: translate(0, 0) scale(1.2); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.5); } }
@keyframes dna-fly { 0% { opacity: 1; transform: translate(0,0) rotate(0) scale(.6); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(260deg) scale(1); } }
@keyframes dna-grow { from { transform: scale(0) rotate(-40deg); opacity: 0; } }
@keyframes dna-node { from { transform: scale(0); } 70% { transform: scale(1.5); } }
@media (max-width: 560px) {
  .dna-scale { grid-template-columns: 1fr; gap: 7px; }
  .dna-scale .dna-opt { min-height: 46px; text-align: left; padding-left: 18px; display: flex; align-items: center; gap: 12px; }
  .dna-scale .dna-opt b { display: inline; color: var(--faint); font-weight: 600; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .dna-sheet *, .dna-takeover * { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}
.danger { border: 1px solid #5b2330; background: transparent; color: #fca5a5; }
.noscript { text-align: center; padding: 120px 16px; }

/* Daily allowance meter (sidebar) */
.side-meter { display: flex; flex-direction: column; gap: 6px; padding: 4px 10px 2px; font-size: 12.5px; color: #A9ADC6; }
.meter-bar { height: 6px; border-radius: 99px; background: rgba(242,240,250,.08); overflow: hidden; }
.meter-bar span { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--violet), var(--mint)); }
.meter-bar span.full { background: var(--gold); }
.redeem { display: flex; gap: 8px; }
.redeem input { flex: 1; min-width: 0; border: 1px solid var(--line); background: rgba(8,11,23,.6); border-radius: 999px; padding: 11px 14px; font-size: 15px; text-transform: uppercase; }
.redeem button { width: auto !important; padding: 0 18px !important; margin-top: 0 !important; }

/* Welcome and account sheets */
.form-sheet { text-align: left; width: min(460px, calc(100vw - 32px)); }
.form-sheet h2 { margin-top: 4px; }
.field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.field span { font-size: 13px; color: var(--muted); }
.field input { border: 1px solid var(--line); background: rgba(8,11,23,.6); border-radius: 14px; padding: 11px 14px; font-size: 15px; }
.field input[readonly] { color: var(--muted); border-style: dashed; }
.plan-pill { align-self: flex-start; font-size: 13px; font-weight: 600; padding: 4px 12px; border-radius: 99px; background: rgba(185,169,255,.18); }
.row-btns { display: flex; gap: 8px; margin-top: 6px; }
.row-btns > * { flex: 1; margin-top: 0 !important; }
.sheet-divider { border: 0; border-top: 1px solid var(--line-soft); margin: 18px 0; }
.sheet-note { font-size: 13px !important; color: var(--faint) !important; margin: 6px 0 0 !important; }
.form-sheet .danger { width: 100%; border-radius: 999px; padding: 12px 16px; cursor: pointer; font-weight: 600; margin-top: 8px; }
.form-sheet .danger:disabled { opacity: .4; cursor: default; }

/* Tablet */
@media (max-width: 960px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .squire-box { grid-template-columns: 1fr; padding: 32px; gap: 24px; }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .stats-intro { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .nav-links { display: none; }
  .top { padding: 16px; gap: 12px; }
  main { padding: 0 16px; }
  .hero { padding: 56px 0 24px; gap: 14px; }
  .hero h1 { font-size: clamp(38px, 11vw, 56px); }
  .subhead { font-size: 16.5px; }
  .grid3 { grid-template-columns: 1fr; }
  .more { width: calc(100vw - 32px); }
  .sec h2 { font-size: 34px; }
  .squire-left .big { font-size: 30px; }
}
/* Phone */
@media (max-width: 520px) {
  .logo-art { transform: scale(.72); transform-origin: left top; height: 52px; width: 190px; }
  .powered { font-size: 11px; }
  .quota { display: none; }
  .signin { min-height: 36px; padding: 0 14px; }
  .composer-inner { padding: 12px 10px 10px 16px; gap: 10px; }
  .composer textarea { font-size: 17px; min-height: 3.4em; }
  .send { width: 42px; height: 42px; }
  .mode { min-height: 34px; padding: 0 11px; font-size: 13.5px; gap: 6px; }
  .suggestion { font-size: 13.5px; }
  .plans { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr 1fr; padding: 18px; gap: 12px; }
  .stat b { font-size: 30px; }
  .more-btn { font-size: 13px; padding: 8px 14px; line-height: 1.3; }
  .more-wrap { padding: 30px 0; }
}

/* Saved chats in the sidebar */
.side-chats { display: flex; flex-direction: column; gap: 2px; min-height: 0; }
.side-chats .side-head { gap: 8px; }
.chats-all { background: none; border: 0; color: #7E82A0; font-size: 11px; letter-spacing: 0; text-transform: none; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.chats-all:hover { color: var(--soft); background: rgba(255,255,255,.05); }
.chat-list { display: flex; flex-direction: column; gap: 1px; max-height: 38vh; overflow-y: auto; }
.chat-row { display: flex; align-items: center; gap: 2px; border-radius: 10px; }
.chat-row.active { background: rgba(255,255,255,.07); }
.chat-title { flex: 1; min-width: 0; padding: 7px 10px; font-size: 14px; background: none; border: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-act { flex: none; width: 30px; height: 30px; background: none; border: 0; color: #7E82A0; cursor: pointer; border-radius: 8px; font-size: 15px; opacity: .55; }
.chat-row:hover .chat-act, .chat-act:focus-visible { opacity: 1; }
.chat-act:hover { color: var(--soft); background: rgba(255,255,255,.06); }
.chat-rename { box-sizing: border-box; flex: 1; min-width: 0; width: 100%; margin: 2px 0; padding: 6px 8px; font: inherit; font-size: 14px; color: var(--soft); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); border-radius: 8px; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.switch-row input { width: 40px; height: 22px; accent-color: var(--violet, #B9A9FF); cursor: pointer; }
@media (hover: none) { .chat-act { opacity: 1; } }

/* Today and the coach conversation (web/today.js). Same look as the shape interview. */
.today-sheet #today-body, .talk-sheet #talk-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.today-sheet #today-body { overflow-y: auto; }
.today-wrap { width: 100%; max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px;
  padding: calc(env(safe-area-inset-top, 0px) + 22px) max(16px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 28px) max(16px, env(safe-area-inset-left, 0px)); }
.today-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-right: 40px; }
.today-head h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1; }
.today-head span { color: var(--muted); font-size: 14px; }
.dna-sheet .today-note { margin: 0; color: var(--muted); font-size: 13.5px; }
.today-goals { display: flex; flex-direction: column; gap: 8px; }
.today-goal { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 18px; background: var(--card); border: 1px solid var(--line-soft); }
.today-goal .text { flex: 1; min-width: 0; font-size: 16px; overflow-wrap: anywhere; }
.today-goal.done .text { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(159,216,200,.6); }
.today-check { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--line); background: transparent; cursor: pointer; display: grid; place-items: center; transition: background .2s, border-color .2s; }
.today-check svg { width: 18px; height: 18px; fill: none; stroke: #121430; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.today-check.on { border-color: transparent; background: linear-gradient(135deg, #C9BDFF, #A8DCCB); animation: dna-pop .42s; }
.today-check.on svg { opacity: 1; }
.today-x { flex: none; width: 32px; height: 32px; border: 0; background: none; color: var(--faint); font-size: 20px; cursor: pointer; border-radius: 50%; }
.today-card { padding: 16px 18px; border-radius: 20px; background: var(--card); border: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 8px; }
.today-card h4 { margin: 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.today-streak { flex-direction: row; align-items: center; gap: 16px; }
.today-streak .num { font-family: var(--serif); font-size: 56px; line-height: 1; color: var(--gold); min-width: 48px; text-align: center; }
.today-miles { display: flex; gap: 6px; margin-top: 6px; }
.today-miles i { font-style: normal; font-size: 11.5px; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--line); color: var(--faint); }
.today-miles i.on { border-color: rgba(217,183,122,.6); color: var(--gold); }
.today-big .big { font-family: var(--serif); font-size: 24px; line-height: 1.15; }
.today-bar { height: 8px; border-radius: 99px; background: var(--line-soft); overflow: hidden; }
.today-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #C9BDFF, #A8DCCB); }
.today-big input[type="text"] { height: 46px; border-radius: 14px; border: 1px solid var(--line); background: var(--card-solid); padding: 0 14px; font-size: 16px; }
.today-range { display: grid; gap: 6px; font-size: 14px; color: var(--soft); }
.today-range input { width: 100%; accent-color: #B9A9FF; }
.today-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.today-seg button { min-height: 44px; border-radius: 14px; border: 1px solid var(--line); background: var(--card-solid); cursor: pointer; font-size: 14.5px; }
.today-seg button[aria-pressed="true"] { border-color: var(--violet); background: rgba(185,169,255,.16); }
.today-talk { align-self: stretch; text-align: center; }
.today-delete { align-self: center; color: var(--faint); font-size: 13px; }
.today-confetti { position: fixed; z-index: 40; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 2px; pointer-events: none; opacity: 0; animation: dna-fly 1.4s cubic-bezier(.15,.7,.3,1) forwards; }
.talk-sheet #talk-body { overflow: hidden; }
.talk-head { flex: none; display: flex; align-items: center; gap: 10px; padding: calc(env(safe-area-inset-top, 0px) + 18px) 64px 10px max(16px, env(safe-area-inset-left, 0px)); border-bottom: 1px solid var(--line-soft); }
.talk-row textarea { flex: 1; min-width: 0; min-height: 52px; max-height: 140px; border-radius: 26px; border: 1px solid var(--line); background: var(--card-solid); padding: 14px 20px; font-size: 16px; resize: none; }
.talk-row textarea:focus { border-color: var(--violet); outline: none; }
.talk-note { font-size: 12.5px !important; }
.today-country { display: grid; gap: 6px; margin-top: 6px; font-size: 14px; color: var(--soft); }
.today-country select { height: 44px; border-radius: 14px; border: 1px solid var(--line); background: var(--card-solid); padding: 0 12px; font-size: 15px; }

/* The first session (web/session.js). */
.dna-opt small { display: block; font-size: 12.5px; color: var(--muted); }
.dna-divider { display: flex; align-items: center; gap: 12px; color: var(--gold); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; margin: 10px 0; }
.dna-divider::before, .dna-divider::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }
.dna-sheet .session-plan { font-family: var(--serif); font-size: 24px; line-height: 1.2; }
.session-goals { display: grid; gap: 8px; }
.session-goals label { display: flex; align-items: center; gap: 10px; }
.session-goals .n { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: var(--gold); border: 1px solid rgba(217,183,122,.5); }
.session-goals input { flex: 1; min-width: 0; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--card-solid); padding: 0 12px; font-size: 15.5px; }
.session-goals input[readonly] { border-color: transparent; background: transparent; padding-left: 0; }
.session-win { background: transparent; border: 0; padding: 4px 0; }
.session-bigwin { align-self: center; width: auto !important; text-align: center; display: grid; gap: 4px; padding: 10px 0; animation: dna-rise .5s both; }
.session-bigwin b { font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 12vw, 60px); line-height: 1; background: linear-gradient(90deg, #C9BDFF, #A8DCCB); -webkit-background-clip: text; background-clip: text; color: transparent; }
.session-bigwin span { color: var(--gold); font-size: 14px; }

/* The brain dump (web/coach-dump.js) */
.dump-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.dump-timer { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 14px; }
.dump-timer.up { color: var(--gold); }
.dump-mic { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 99px; border: 1px solid var(--line); background: var(--card-solid); font-size: 15px; font-weight: 600; cursor: pointer; }
.dump-mic .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--violet); }
.dump-mic.live { border-color: var(--violet); box-shadow: 0 0 0 4px rgba(185,169,255,.14); }
.dump-mic.live .dot { background: #F2A07B; animation: dump-pulse 1s ease-in-out infinite; }
@keyframes dump-pulse { 50% { transform: scale(1.5); opacity: .6; } }
.dump-text { width: 100%; box-sizing: border-box; min-height: 140px; resize: vertical; border-radius: 16px; border: 1px solid var(--line); background: var(--card-solid); padding: 12px 14px; font: inherit; font-size: 16px; line-height: 1.45; color: inherit; }
.dump-text:focus { border-color: var(--violet); outline: none; box-shadow: 0 0 0 4px rgba(185,169,255,.14); }
.dump-note { margin: 8px 0 0 !important; font-size: 13px; color: var(--faint) !important; }
.dump-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.dump-src { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.dump-piles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dump-pile { border-radius: 14px; border: 1px solid var(--line-soft); padding: 8px; min-height: 64px; --c: var(--gold); }
.dump-pile.todo { --c: var(--mint); }
.dump-pile.worry { --c: #EFA3C4; }
.dump-pile.idea { --c: var(--violet); }
.dump-pile h5 { display: flex; justify-content: space-between; margin: 0 0 6px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--c); font-weight: 600; }
.dump-list { display: flex; flex-direction: column; gap: 5px; }
.dump-chip { display: inline-block; padding: 5px 10px; border-radius: 12px; background: var(--card-solid); border: 1px solid var(--line); font-size: 13.5px; line-height: 1.3; transition: opacity .3s, border-color .3s; }
.dump-pile .dump-chip { border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.dump-chip.top { border-color: var(--gold) !important; box-shadow: 0 0 0 3px rgba(217,183,122,.18); font-weight: 600; }
.dump-chip.parked { opacity: .45; }
@media (min-width: 640px) { .dump-piles { grid-template-columns: repeat(4, 1fr); } }

/* Every pick sparkles the same way (buttons too), and the reading bars wait for the top trait. */
.dna-cta { position: relative; }

@keyframes dna-hold { 50% { opacity: .45; } }

/* The reveal and the read (web/coach-reveal.js): the shape stays pinned while the read unfolds. */

.secondary-cta { align-self: flex-start; }
.dna-note { margin: 8px 0 0 !important; font-size: 13px; color: var(--faint) !important; }
.dna-optimg { width: 100%; max-height: 160px; object-fit: cover; border-radius: 12px; display: block; margin-bottom: 6px; }

/* The coach's voice (web/coach-voice.js): the speaker button, next to Close, and its notes. */
.dna-voice { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 12px); right: calc(max(12px, env(safe-area-inset-right, 0px)) + 40px); z-index: 5;
  width: 36px; height: 36px; display: grid; place-items: center; border-radius: 99px; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--text, #F2F0FA); cursor: pointer; }
.dna-voice svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dna-voice[aria-pressed="false"] { color: var(--muted); }
.dna-voicenote { font-size: 12px; color: var(--muted) !important; }
/* The Project Board (web/board.js): five columns of cards. On a phone the columns are lanes you
   swipe between; on a wide screen they sit side by side. Same Aurora look as Today. */
.board-sheet #board-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }
.board-wrap { width: 100%; max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px;
  padding: calc(env(safe-area-inset-top, 0px) + 22px) max(16px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 28px) max(16px, env(safe-area-inset-left, 0px)); }
.board-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-right: 40px; }
.board-head h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1; }
.dna-sheet .board-head p { margin-top: 6px; color: var(--muted); font-size: 14px; max-width: 60ch; }
.board-add { border: 0; border-radius: 999px; padding: 10px 16px; font-weight: 600; cursor: pointer; background: linear-gradient(135deg, var(--violet), var(--mint)); color: var(--bg); }
.board-lanes { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * max(16px, env(safe-area-inset-left, 0px))); padding: 2px max(16px, env(safe-area-inset-left, 0px)) 8px; }
.board-lane { flex: 0 0 86vw; max-width: 360px; scroll-snap-align: center; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 20px;
  background: rgba(255,255,255,.025); border: 1px solid var(--line-soft); min-height: 160px; transition: border-color .15s, background .15s; }
.board-lane.over { border-color: var(--violet); background: rgba(185,169,255,.08); }
.board-lane h3 { margin: 0 0 2px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.board-lane.lane-now h3 { color: var(--mint); }
.board-lane.lane-waiting h3 { color: var(--gold); }
.board-lane.lane-waiting { border-color: rgba(217,183,122,.28); }
.board-n { color: var(--faint); font-weight: 500; letter-spacing: 0; }
.board-tile { display: flex; flex-direction: column; gap: 6px; width: 100%; text-align: left; padding: 12px 13px; border-radius: 16px; cursor: pointer;
  background: var(--card); border: 1px solid var(--line-soft); color: var(--text); font: inherit; }
.board-tile:hover, .board-tile:focus-visible { border-color: var(--line); }
.board-tile.dragging { opacity: .45; }
.board-tile-title { font-size: 15px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.board-tile-status { font-size: 13.5px; color: var(--muted); line-height: 1.4; overflow-wrap: anywhere; }
.board-tile-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: var(--faint); }
.board-owner { padding: 2px 8px; border-radius: 999px; background: rgba(185,169,255,.12); color: var(--violet); }
.board-empty, .dna-sheet .board-empty { color: var(--faint); font-size: 13px; padding: 6px 2px; }
.dna-sheet .board-hint { color: var(--faint); font-size: 12.5px; }
@media (hover: none) { .board-hint { display: none; } }
@media (min-width: 900px) {
  .board-lanes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; }
  .board-lane { max-width: none; }
}

/* One card, opened. */
.board-card-sheet { width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; text-align: left; padding: 24px 20px 20px; }
.board-card-wrap { display: flex; flex-direction: column; gap: 10px; }
.board-card-wrap h2 { margin: 0 0 4px; font-family: var(--serif); font-weight: 400; font-size: 30px; }
.sheet .board-touched { margin: 0; font-size: 12.5px; color: var(--faint); padding-right: 32px; }
.board-input { box-sizing: border-box; width: 100%; font: inherit; font-size: 15px; color: var(--text); background: rgba(8,11,23,.6); border: 1px solid var(--line); border-radius: 14px; padding: 11px 13px; resize: vertical; }
.board-input:focus { outline: 2px solid var(--violet); outline-offset: 1px; }
.board-linkrow { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; }
.board-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.board-links h4, .board-notes h4 { width: 100%; margin: 4px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.board-links a { color: var(--violet); font-size: 14px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; }
.board-actions { display: flex; gap: 8px; }
.board-primary, .board-secondary, .board-danger { flex: 1; border-radius: 999px; padding: 11px 14px; font: inherit; font-weight: 600; cursor: pointer; }
.board-primary { border: 0; background: linear-gradient(135deg, var(--violet), var(--mint)); color: var(--bg); }
.board-secondary { border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--text); }
.board-danger { border: 0; background: #E58A8A; color: var(--bg); }
.board-move { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-top: 4px; }
.board-move > span { width: 100%; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.board-chip { border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--soft); border-radius: 999px; padding: 8px 12px; font: inherit; font-size: 13.5px; cursor: pointer; }
.board-chip.on { border-color: var(--mint); color: var(--mint); background: rgba(159,216,200,.1); }
.board-notes { display: flex; flex-direction: column; gap: 8px; }
.board-notes ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.board-notes li { padding: 9px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line-soft); }
.sheet .board-notes li p { margin: 0; color: var(--text); font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.board-notes li span { font-size: 11.5px; color: var(--faint); }
.board-delete { padding-top: 6px; }
.board-link-btn { background: none; border: 0; color: var(--faint); font: inherit; font-size: 13.5px; text-decoration: underline; cursor: pointer; padding: 4px 0; }
.board-confirm { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sheet .board-confirm p { width: 100%; margin: 0; color: var(--soft); font-size: 14px; }
@media (max-width: 420px) { .board-linkrow { grid-template-columns: 1fr; } }
.board-care { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 16px; background: rgba(217,183,122,.1); border: 1px solid rgba(217,183,122,.4); }
.sheet .board-care p, .dna-sheet .board-care p { margin: 0; color: var(--text); font-size: 14.5px; line-height: 1.45; }
.board-care .board-secondary { flex: none; align-self: flex-start; }

/* Round 3 of the shape interview (the round 3 plan, section 1): one statement at a time on a stage, answered with a thumb. */

@keyframes stage-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* The new home (Rick, 19 Oct 2026, from design/premium-v1): the wordmark is the hero, the crystal star
   just off the upper left of the W, one ask box. The small header logo steps back on the home screen. */
body:has(main.home) .top .logo { visibility: hidden; }
.hero .hero-mark { position: relative; display: inline-block; margin: 0; padding: .14em .5em 0 .3em; font-family: var(--script); font-weight: 400;
  font-size: clamp(76px, 20vw, 156px); line-height: 1; letter-spacing: 0; color: var(--text); white-space: nowrap; }
.hero-mark .hm-w { padding: 0 .06em; }
.hm-star { position: absolute; left: .1em; top: .02em; width: .3em; height: .3em; }
.hm-star svg { width: 100%; height: 100%; filter: drop-shadow(0 0 .06em rgba(150,140,255,.6)); }
.ss-polaris .ridge line { stroke: #fff; stroke-opacity: .5; stroke-linecap: round; }
.ss-polaris .rim { fill: none; stroke: rgba(255,255,255,.82); stroke-linejoin: miter; }
.ss-polaris .sweep { --sw: 140px; opacity: 0; animation: star-sweep 8s ease-in-out 2s infinite; }
@keyframes star-sweep { 0%, 76% { transform: translateX(0); opacity: 0; } 79% { opacity: .9; } 94% { transform: translateX(var(--sw)); opacity: .9; } 100% { transform: translateX(var(--sw)); opacity: 0; } }
.hero .hero-tag { margin: -6px 0 0; font-size: clamp(26px, 5vw, 40px); line-height: 1.12; font-weight: 600; letter-spacing: -.02em; }
.hero { gap: 16px; padding-top: 72px; }
.check-it { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(255,255,255,.04); color: var(--text); font: 600 14px var(--sans, inherit); cursor: pointer; animation: check-rise .3s ease both; }
.check-it[hidden] { display: none; }
.check-it img { width: 10px; height: auto; }
.check-it[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.check-tag { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
@keyframes check-rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) { .hero { padding-top: 40px; } .hero .hero-mark { font-size: clamp(68px, 24vw, 110px); } }
@media (prefers-reduced-motion: reduce) { .ss-polaris .sweep, .check-it { animation: none; } }

/* Live-site fixes (Rick, 19 Oct 2026). The star floats clearly above the W and never touches it: each mark
   has room on top, and the star sits in it, over the W's first stroke. */
.hero .hero-mark { padding-top: .36em; }
.hm-star { left: .36em; top: .07em; width: .28em; height: .28em; }
/* The header mark everywhere off the home screen: the same wordmark and crystal star, small. */
.top-mark { position: relative; display: inline-block; font-family: var(--script); font-size: 34px; line-height: 1;
  color: var(--text); padding: .4em .1em 0 .06em; white-space: nowrap; }
.tm-star { position: absolute; left: .1em; top: 0; width: .36em; height: .36em; }
.hm-star svg, .tm-star svg, .sm-star svg { display: block; }
.tm-star svg, .sm-star svg { width: 100%; height: 100%; filter: drop-shadow(0 0 2px rgba(150,140,255,.6)); }
/* The sign-in screens: the wordmark and star, not the quill. */
.sheet-mark { position: relative; display: inline-block; font-family: var(--script); font-size: 50px; line-height: 1;
  color: var(--text); padding: .4em .1em 0 .06em; }
.sm-star { position: absolute; left: .1em; top: 0; width: .34em; height: .34em; }
/* The chat screen keeps the new look, calmer: the colour glows step well back. */
body:has(main.chatting) .g1, body:has(main.chatting) .g2 { opacity: .28; }
body:has(main.chatting) .g3 { opacity: .4; }
/* A check: the quill writes while it works, and the verdict sits on top of the answer. */
.status .quill-work { width: 12px; height: auto; animation: quill-write 1.1s ease-in-out infinite; transform-origin: 20% 90%; }
@keyframes quill-write { 0%, 100% { transform: rotate(-8deg) translateX(0); } 50% { transform: rotate(6deg) translateX(3px); } }
.msg.is-check .answer > :first-child { font-size: 18px; font-weight: 700; padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,.06);
  border: 1px solid var(--line); margin-bottom: 12px; }
@media (prefers-reduced-motion: reduce) { .status .quill-work { animation: none; } }
/* The reading sheet: a top-menu section over a conversation. */
.read-sheet { width: min(980px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; text-align: left; }
.read-sheet .sec { padding-top: 8px; }

/* The scan (Rick, 20 Oct 2026, demo): full screen, one statement at a time. The stage fills the screen;
   round intros and reactions show on it too. Carried by the coach lane, appended only. */
#dna-body.scan .dna-thread { justify-content: center; overflow: hidden; }

#dna-body.scan .dna-dock { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 26px); max-width: 520px; }

#dna-body.scan .dna-back { align-self: center; }
/* The reveal (Rick's demo, 20 Oct 2026): the star draws itself point by point, the name lands, then the
   star becomes a small emblem pinned at the top while the read unfolds. Carried by the coach lane. */
.dna-takeover { cursor: pointer; transition: opacity .5s ease; }
.dna-takeover .in { gap: 14px; }
.dna-takeover.leave { opacity: 0; pointer-events: none; }

.dna-takeover .dna-tk-hint { margin: 6px 0 0; min-height: 1.2em; font-size: 13px; color: var(--faint); letter-spacing: .08em; text-transform: uppercase; animation: dna-fade .6s both; }
@keyframes dna-land { from { opacity: 0; transform: scale(1.6); filter: blur(10px); } 60% { opacity: 1; filter: blur(0); } }

.dna-shape .node.glow { r: 9; filter: drop-shadow(0 0 10px currentColor) drop-shadow(0 0 4px #fff); transition: r .3s ease; }
.dna-shape.glow-all .fill { filter: drop-shadow(0 0 22px rgba(185,169,255,.95)); }

/* The first win's celebration (Rick's demo, 20 Oct 2026). Carried by the coach lane. */
.dna-party .arch { font-size: clamp(64px, 18vw, 112px) !important; animation: dna-land .7s cubic-bezier(.2,.9,.25,1.15) both !important; }
.dna-party .portrait { color: var(--gold); animation-delay: .35s !important; }
.dna-party-star { display: block; width: 104px; height: 104px; margin: 0 auto; animation: dna-node .7s both; }
/* The coach's face is the logo's crystal star (Rick, 20 Oct 2026): it twinkles while he gets ready (in place of
   the typing bubble) and pulses gently while his voice plays. The same star as the logo. Carried by the coach lane. */
.will-star { display: inline-block; flex: none; }
.will-star .logo-star { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 4px rgba(150,140,255,.55)); }
.will-star .logo-star .ridge line { stroke: #fff; stroke-opacity: .5; stroke-linecap: round; stroke-width: .8; }
.dna-orb.will-star { width: 28px; height: 28px; background: none; box-shadow: none; border-radius: 0; }
.dna-msg.thinking .will-star .logo-star { animation: will-twinkle 1.1s ease-in-out infinite; }
.dna-sheet.speaking .will-star.live .logo-star { animation: will-voice .52s ease-in-out infinite alternate; }

@keyframes will-twinkle { 0%, 100% { transform: scale(.88) rotate(-4deg); opacity: .7; filter: drop-shadow(0 0 3px rgba(150,140,255,.4)); }
  50% { transform: scale(1.06) rotate(4deg); opacity: 1; filter: drop-shadow(0 0 10px rgba(190,189,255,.95)); } }
@keyframes will-voice { 0% { transform: scale(.94); filter: drop-shadow(0 0 4px rgba(150,140,255,.5)); }
  45% { transform: scale(1.1); filter: drop-shadow(0 0 14px rgba(200,195,255,1)); } 100% { transform: scale(1.0); filter: drop-shadow(0 0 8px rgba(170,165,255,.8)); } }
@media (prefers-reduced-motion: reduce) { .will-star .logo-star { animation: none !important; } }
.msg.is-check .msg-preview { display: inline-block; margin-bottom: 6px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; }
/* The centered stage (Rick, 20 Oct 2026): on a phone the shape interview and first session fill the screen; on a tablet or
   laptop they sit in one centered column, about 560px wide, vertically centered, on the dark background with a
   soft purple glow behind it. Only the reveal and the first-win celebration open wider for the moment.
   Carried by the coach lane. */
@media (min-width: 700px) {
  .dna-sheet[open] { justify-content: center; align-items: center;
    background: radial-gradient(46% 52% at 50% 50%, rgba(124,108,240,.26), transparent 72%), radial-gradient(70% 40% at 50% 0%, rgba(124,108,240,.12), transparent 70%), var(--bg); }
  #dna-body { flex: 0 1 auto; position: relative; width: min(560px, calc(100vw - 48px)); height: auto; min-height: min(540px, calc(100dvh - 72px));
    max-height: min(calc(100dvh - 72px), 880px);
    border-radius: 28px; background: rgba(12,15,32,.74); border: 1px solid var(--line-soft);
    box-shadow: 0 0 0 1px rgba(185,169,255,.06), 0 30px 120px rgba(124,108,240,.22); overflow: hidden; }
  #dna-body .dna-bar { margin: 24px 84px 0 28px; }
  #dna-body .dna-voice { top: 12px; right: 16px; }
  #dna-body .dna-thread { flex: 1 1 auto; padding: 22px 28px; }
  /* A short conversation sits just above its buttons, not at the top of an empty column. */
  #dna-body .dna-thread > :first-child { margin-top: auto; }
  #dna-body.scan .dna-thread > :first-child { margin-top: 0; }
  #dna-body .dna-thread > * { max-width: 100%; }
  #dna-body .dna-dock { max-width: 100%; padding: 12px 28px 26px; }

  #dna-body.scan .dna-dock { padding-bottom: 30px; }

  #dna-body .dna-bubble { max-width: 88%; }
  #dna-body .dna-bubble.big { font-size: 25px; }

  .dna-takeover .in { max-width: 760px; }
}
/* /privacy and /terms as real pages (Rick, 25 Oct): the same type as the sheet, on their own. */
.doc-page { min-height: 100vh; }
.doc { max-width: 720px; margin: 0 auto; padding: 32px max(20px, env(safe-area-inset-right, 0px)) 64px max(20px, env(safe-area-inset-left, 0px)); } /* 20px phone gutters (BRAND.md) */
.doc h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 6vw, 42px); margin: 8px 0 12px; }
.doc-home a { color: var(--soft); text-decoration: none; font-size: 14px; }
.doc-home a:focus-visible, .doc a:focus-visible { outline: 2px solid #F3F1FF; outline-offset: 3px; } /* Starlight focus (BRAND.md) */
.doc-updated { margin: 24px 0 0; font-size: 14px; color: var(--soft); }
.privacy-h { font-size: 16px; margin: 18px 0 4px; }
.privacy-p { margin: 0; color: var(--muted); max-width: 70ch; }
.account-voice .link { background: none; border: 0; padding: 0; color: var(--violet); cursor: pointer; text-decoration: underline; font: inherit; }

/* Home v5 (Rick, 20 Oct): the mic in the box, three pills under it, one panel of cards at a time. */
.mic { width: 46px; height: 46px; flex: none; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--soft); cursor: pointer; display: grid; place-items: center; }
.mic:hover { background: rgba(255,255,255,.06); }
.mic.on { border-color: var(--mint); color: var(--mint); box-shadow: 0 0 0 4px rgba(159,216,200,.14); }
main.chatting .home-pills, main.chatting .pill-panel { display: none !important; }
/* "Today's tip" above the box (Rick, 26 Oct): small, quiet, home screen only. */
.tip-label { margin: 0 auto 8px; max-width: 800px; padding: 0 4px; font-size: 12.5px; letter-spacing: .02em; color: var(--muted); }
main.chatting .tip-label { display: none !important; }
.mic-note { margin-top: 12px; padding: 14px 16px; border-radius: 18px; background: var(--card); border: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.mic-note p { margin: 0; flex: 1 1 260px; min-width: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.mic-go { min-height: 36px; padding: 0 16px; border-radius: 99px; border: 0; cursor: pointer; font-weight: 700; font-size: 14px; color: var(--bg); background: var(--mint); }
/* The pills and their panel (Rick, 21 Oct, from the layout he sent): three pills in a row right under the
   box; a tap opens one rounded panel with a thin violet edge, three columns, a rule and a footer line. */
.home-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }
.home-pill {
  min-height: 40px; padding: 0 18px; border-radius: 99px; border: 1px solid rgba(242,240,250,.18);
  background: rgba(16,20,40,.55); color: var(--soft); font-size: 14.5px; font-weight: 600; cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.home-pill:hover { background: rgba(185,169,255,.08); border-color: rgba(185,169,255,.4); color: var(--text); }
.home-pill:focus-visible { outline: 2px solid #F3F1FF; outline-offset: 3px; } /* Starlight focus (BRAND.md) */
.home-pill[aria-expanded="true"] {
  color: var(--text); border-color: var(--violet); background: rgba(185,169,255,.16);
}
.pill-panel {
  position: relative; margin-top: 14px; padding: 30px 30px 20px; border-radius: 24px;
  background: linear-gradient(180deg, rgba(185,169,255,.06), rgba(185,169,255,0) 46%), var(--panel);
  border: 1px solid rgba(185,169,255,.5); box-shadow: 0 24px 60px rgba(4,6,16,.55);
  animation: pillIn .22s ease-out; scroll-margin-bottom: 16px; text-align: left;
}
@keyframes pillIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.pill-close { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.pill-close:hover { background: rgba(242,240,250,.08); color: var(--text); }
.pill-close:focus-visible { outline: 2px solid #F3F1FF; outline-offset: 3px; } /* Starlight focus (BRAND.md) */
.pill-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.pill-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.pill-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pill-col { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.pill-col-title { margin-top: 6px; font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--text); }
.pill-col-title .soon-tag { margin-left: 4px; vertical-align: 1px; }
.pill-col-text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.pill-col-btn { margin-top: 6px; min-height: 38px; padding: 0 18px; border-radius: 99px; border: 0; cursor: pointer; font-size: 14px; font-weight: 700; color: var(--bg); background: var(--gold); }
.pill-col-btn:hover { filter: brightness(1.06); }
.pill-icon { width: 42px; height: 42px; flex: none; border-radius: 13px; display: grid; place-items: center; transition: transform .25s cubic-bezier(.2,.9,.25,1.3); }
.pill-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pill-icon .pill-quill { width: 26px; height: 26px; object-fit: contain; }
.pill-icon.tone-violet { color: #D6CCFF; background: rgba(185,169,255,.14); box-shadow: inset 0 0 0 1px rgba(185,169,255,.32); }
.pill-icon.tone-mint { color: #C6EEE2; background: rgba(159,216,200,.13); box-shadow: inset 0 0 0 1px rgba(159,216,200,.32); }
.pill-icon.tone-gold { color: #F0DCB2; background: rgba(217,183,122,.14); box-shadow: inset 0 0 0 1px rgba(217,183,122,.34); }
@media (hover: hover) { .pill-col:hover .pill-icon { transform: rotate(-6deg) scale(1.06); } }
.pill-rule { margin: 22px 0 14px; border: 0; height: 1px; background: rgba(242,240,250,.1); }
.pill-footer { margin: 0; text-align: center; font-size: 13.5px; line-height: 1.5; color: var(--soft); }
@media (max-width: 760px) {
  .pill-cols { grid-template-columns: 1fr; gap: 20px; }
  .pill-col { display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-items: start; }
  .pill-col .pill-icon { grid-row: span 3; }
  .pill-col-title { margin-top: 0; }
  .pill-col:first-child .pill-col-title { padding-right: 40px; } /* the first title wraps before the X (Design Studio) */
  .pill-col-btn { justify-self: start; }
}
@media (max-width: 520px) {
  .mic { width: 42px; height: 42px; }
  .home-pills { gap: 8px; }
  .home-pill { min-height: 36px; padding: 0 13px; font-size: 13.5px; }
  .pill-panel { padding: 22px 18px 16px; border-radius: 20px; }
  .pill-rule { margin: 18px 0 12px; }
}
@media (prefers-reduced-motion: reduce) { .pill-panel { animation: none; } .pill-icon { transition: none; } }

/* Home v5, clean (Rick, 20 Oct): logo, tagline, one box, three pills; the slim top menu opens the rest
   on a sheet; attach, dictate and the quill sit in the box. Icons in brand colours, a little playful. */
/* Rick, 21 Oct: "center it up, still too low". The block starts in the upper part of the screen and
   stays put when a panel opens beneath it, instead of being centred in the whole height. */
body.home-v5 main.home { min-height: calc(100svh - 96px); display: flex; flex-direction: column; justify-content: flex-start; padding-top: clamp(0px, 3vh, 32px); padding-bottom: 48px; }
body.home-v5 main.home .hero { padding-top: clamp(0px, 2vh, 20px); gap: 12px; }
/* The wordmark also scales with the screen's height, so on a laptop the box sits near the middle. */
body.home-v5 .hero .hero-mark { font-size: clamp(68px, min(20vw, 17vh), 150px); padding-top: .3em; }
@media (max-width: 560px) { body.home-v5 .hero .hero-mark { font-size: clamp(64px, min(24vw, 13vh), 110px); } }
body.home-v5 main.home .hero { padding-bottom: 8px; }
/* Signed in with a name, the welcome line takes the headline's place (Rick, 24 Oct), so the hero has one line where
   Live has two (the headline, then "Good evening, Rick."). Keep Live's air (Rick, 25 Oct: "match Live's vertical gaps
   exactly"): the wordmark to the line and the line to the box measure the same as wordmark to greeting and greeting to box
   on willora.ai, at phone and desktop sizes. */
body.home-v5 main.home .hero.named .hero-tag { margin-top: calc(28px + 1.143em); margin-bottom: 3px; }
.nav-short { display: none; }
body.home-v5 .modes { gap: 6px; }
.attach, .modes .mic { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--soft); cursor: pointer; display: grid; place-items: center; }
.attach:hover { background: rgba(255,255,255,.06); }
body.home-v5 .check-it { margin-left: auto; }
body.home-v5 .check-it img { width: 12px; }
@media (max-width: 760px) {
  body.home-v5 .nav-links { display: flex; gap: 14px; }
  body.home-v5 .nav-links a { font-size: 13.5px; }
  body.home-v5 .nav-long { display: none; }
  body.home-v5 .nav-short { display: inline; }
}
@media (max-width: 520px) {
  .attach, .modes .mic { width: 36px; height: 36px; }
  body.home-v5 .top .logo { display: none; }
}

/* The quill in the chat box (Rick, 20 Oct 2026): the quill glows when what's in the box is worth checking
   (it never runs on its own), a small quill under each message runs it through the preview, and its answer
   wears its own look: the quill and a flame edge, clearly not the coach's gold box. */
body.home-v5 { --flame: linear-gradient(100deg, #FFB347 0%, #FF7A45 45%, #FF4D7A 100%); }
body.home-v5 .check-it.lit { border-color: var(--violet); animation: quill-glow 1.8s ease-in-out infinite; }
/* An invitation, never a warning (Story Lab, 20 Oct): brand violet, no red or orange, no words. */
@keyframes quill-glow { 0%, 100% { box-shadow: 0 0 0 1px rgba(185,169,255,.4), 0 0 10px rgba(185,169,255,.3); } 50% { box-shadow: 0 0 0 1px rgba(185,169,255,.75), 0 0 22px rgba(159,216,200,.55); } }
.msg-quill { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: var(--muted, inherit); font: 500 12px var(--sans, inherit); cursor: pointer; opacity: .75; }
.msg-quill:hover, .msg-quill:focus-visible { opacity: 1; border-color: var(--violet); color: var(--text); }
.msg-quill img { width: 9px; height: auto; }
.msg.user:has(.msg-quill) { flex-direction: column; align-items: flex-end; }
body.home-v5 .msg.ai.is-check { position: relative; padding: 14px 16px 14px 18px; border-radius: 16px; background: rgba(255,122,69,.06);
  border: 1px solid rgba(255,122,69,.28); }
body.home-v5 .msg.ai.is-check::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--flame); }
.squire-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-weight: 700; font-size: 14px; }
.squire-head img { width: 12px; height: auto; }
.squire-head .msg-preview { margin: 0; }
body.home-v5 .msg.is-check .answer > :first-child { border-color: rgba(255,122,69,.35); background: rgba(255,122,69,.08); }
@media (prefers-reduced-motion: reduce) { body.home-v5 .check-it.lit { animation: none; } }
/* "Sometimes" between the thumbs, the same size (Rick, 20 Oct 2026). Carried by the coach lane. */

/* "That's me" / "Not me" on each line of the read (Rick, 20 Oct 2026). Carried by the coach lane. */

/* On phones too, a short conversation sits just above its buttons (Rick, 20 Oct 2026). Carried by the coach lane. */
.dna-thread > :first-child { margin-top: auto; }
#dna-body.scan .dna-thread > :first-child { margin-top: 0; }
/* Rick's all-in-one (20 Oct 2026). Carried by the coach lane.
   Said or typed: the mic first, typing small underneath. */

.dna-textrow.small input { height: 44px; font-size: 15px; }
.dna-textrow.small .dna-send { width: 44px; height: 44px; font-size: 17px; }

/* The star silhouette fills in round by round: grey, no trait names or sizes. */

/* A soft change of mood each round (never a colour per trait). */
#dna-body.scan { transition: background-color 1.2s ease; }
#dna-body.scan[data-mood="0"] { background-color: rgba(124,108,240,.04); }
#dna-body.scan[data-mood="1"] { background-color: rgba(110,190,180,.05); }
#dna-body.scan[data-mood="2"] { background-color: rgba(217,183,122,.05); }
#dna-body.scan[data-mood="3"] { background-color: rgba(239,163,196,.05); }
#dna-body.scan[data-mood="4"] { background-color: rgba(143,184,255,.06); }

/* Three equal answers: the same size and weight. */

/* The person's star on the reveal and the badge: the logo star, scores as glow (Rick, 20 Oct 2026).
   Grey silhouette first; boom into full colour. Strengths glow purple; growth edges get a gold edge. */
.dna-star-logo { overflow: visible; }
.dna-star-logo .ridge line { stroke: #fff; stroke-opacity: .5; stroke-linecap: round; stroke-width: .8; }
.dna-star-logo .tip-glow { fill: none; stroke-linejoin: round; }
.dna-star-logo .tip-glow.strong { stroke: #C9BBFF; stroke-width: 1.6; filter: drop-shadow(0 0 4px rgba(185,169,255,.95)) drop-shadow(0 0 10px rgba(150,130,255,.7)); }
.dna-star-logo .tip-glow.edge { stroke: #E8C77F; stroke-width: 1.4; filter: drop-shadow(0 0 3px rgba(232,199,127,.8)); }
.dna-star-logo .tip-glow.steady { stroke: none; }
.dna-star-logo .tip-glow.on { stroke-width: 2.4; }
@keyframes star-boom { 0% { transform: scale(.85); filter: brightness(2.2); } 60% { transform: scale(1.12); } 100% { transform: scale(1); filter: none; } }

/* The closing card (Rick, 20 Oct 2026): full screen on a phone, the centered stage on a tablet or laptop.
   Carried by the coach lane. */

/* The email check's "Use …" suggestion on the sign-in sheet (Rick, 20 Oct). */
.link-btn { display: block; margin: 6px auto 0; background: none; border: 0; color: var(--mint); font: inherit; font-size: 15px; font-weight: 600; text-decoration: underline; cursor: pointer; padding: 4px 0; }

/* AI lesson of the day (issue #178): one small card under the chat box, signed in only. */
.lesson-card { margin: 12px auto 0; width: 100%; max-width: 680px; border: 1px solid rgba(159,216,200,.3); border-radius: 18px;
  background: rgba(16,20,40,.92); text-align: left; }
main.chatting .lesson-card:not(.open) { display: none; }
.lesson-head { width: 100%; display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; border: 0; background: none;
  text-align: left; cursor: pointer; border-radius: inherit; }
.lesson-head:focus-visible, .lesson-try:focus-visible, .lesson-rate button:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.lesson-kicker { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mint); }
.lesson-min { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--faint); }
.lesson-min::before { content: "·"; margin-right: 8px; }
.lesson-title { margin: 0; font-size: 16.5px; font-weight: 600; line-height: 1.35; color: var(--text); }
.lesson-card.open { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 18px; }
.lesson-top { display: flex; align-items: center; justify-content: space-between; }
.lesson-close { width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--line-soft); font-size: 20px; line-height: 1; cursor: pointer; }
.lesson-card.open .lesson-title { font-size: 19px; }
.lesson-what, .lesson-why { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--soft); }
.lesson-why strong { color: var(--text); font-weight: 600; }
.lesson-try { align-self: flex-start; min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--grad); color: #121430; font-weight: 600; font-size: 15px; cursor: pointer; }
.lesson-note { margin: 0; font-size: 13px; color: var(--faint); }
.lesson-rate { margin: 6px 0 4px; padding: 12px 14px; border: 1px solid rgba(159,216,200,.3); border-radius: 16px; background: rgba(16,20,40,.92); }
.lesson-rate p { margin: 0 0 8px; font-size: 14.5px; color: var(--soft); }
.lesson-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.lesson-buttons button { min-height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: none; font-size: 14.5px; cursor: pointer; }
.lesson-buttons button:disabled { opacity: .5; }
.lesson-rate .lesson-done { margin: 0; color: var(--mint); }
.today-lesson { display: block; margin: 6px 0 2px; text-align: left; }

/* Referral link on the account page (card #183). */
.invite-row { display: flex; gap: 8px; align-items: center; }
.invite-row .invite-link { flex: 1 1 auto; width: auto; min-width: 0; border: 1px solid var(--line); background: rgba(8,11,23,.6); border-radius: 999px; padding: 11px 14px; color: var(--text); font: inherit; font-size: 15px; }
.invite-row button { flex: none; align-self: stretch; width: auto !important; padding: 0 18px !important; margin-top: 0 !important; }
/* Two tracks (issue #196): the "Why today" line, and the quiet line under the card. */
.lesson-today { margin: 0; font-size: 14px; line-height: 1.5; color: var(--faint); }
.lesson-today strong { color: var(--soft); font-weight: 600; }
.lesson-more { display: block; margin: 0; padding: 0 18px 14px; border: 0; background: none; text-align: left; font-size: 13.5px; color: var(--faint); cursor: pointer; }
.lesson-card.open .lesson-more { padding: 4px 0 0; }
button.lesson-more:hover, .lesson-signup:hover { color: var(--mint); }
.lesson-signup { padding: 0; border: 0; background: none; font: inherit; color: var(--mint); text-decoration: underline; cursor: pointer; }

/* ---------- Today panel (Rick, 21 Oct 2026, from Design Studio's #188) ---------- */
/* Chat | Today */
.view-toggle { display: inline-flex; padding: 3px; border-radius: 99px; border: 1px solid var(--line); background: rgba(255,255,255,.03); flex: none; }
.view-toggle button { min-height: 34px; padding: 0 14px; border: 0; border-radius: 99px; background: none; color: var(--muted); font-size: 14px; font-weight: 600; cursor: pointer; }
.view-toggle button[aria-pressed="true"] { background: rgba(185,169,255,.18); color: var(--text); }
.view-toggle button:focus-visible { outline: 2px solid var(--violet); outline-offset: 1px; }

/* A phone: one view at a time. Today takes the chat's place under the top bar. */
body.view-today:not(.docked) main { display: none; }
.today-panel { position: relative; z-index: 1; width: 100%; max-width: 560px; margin: 0 auto;
  padding: 4px max(16px, env(safe-area-inset-right, 0px)) 40px max(16px, env(safe-area-inset-left, 0px)); }

/* A wide screen: chat | Today, both on screen. The menu is never pinned open (Rick, 25 Oct): it opens from its button. */
@media (min-width: 1180px) {
  body.docked.view-today { padding-right: 372px; }
  body.docked .today-panel { position: fixed; z-index: 5; top: 0; right: 0; bottom: 0; width: 372px; max-width: none; margin: 0; overflow-y: auto;
    padding: 26px 20px 32px; background: rgba(12,15,31,.97); border-left: 1px solid var(--line-soft); }
}

.tp-head { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 16px; }
.tp-head h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 36px; line-height: 1; }
.tp-head span { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.tp-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* The calendar (Connector Lab, web/connectors.js): the top bar's icon, its panel, and Today's "Next up" line. */
.cal-icon { display: inline-grid; place-items: center; padding: 0; }
.cal-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cal-sheet { width: min(480px, calc(100vw - 32px)); max-height: min(80vh, 760px); padding: 24px 0 0; text-align: left; overflow: hidden; display: flex; flex-direction: column; }
.cal-sheet:not([open]) { display: none; }
.cal-sheet h2 { margin: 0 24px 6px; }
.cal-list { overflow-y: auto; padding: 0 24px 24px; overscroll-behavior: contain; }
.cal-list .cal-day { margin: 18px 0 8px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.cal-list .conn-events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cal-list .conn-events li { padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line-soft); font-size: 15px; overflow-wrap: anywhere; }
.cal-list .conn-time { display: inline-block; min-width: 76px; color: var(--mint); font-variant-numeric: tabular-nums; }
/* The calendar view's month grid (Rick, 24 Oct): today ringed, a dot under days with events, the tapped day filled. */
.cal-next { margin: 4px 0 6px; color: var(--text); font-size: 15px; }
.cal-list .cal-month { margin: 18px 0 8px; font-size: 15px; font-weight: 600; color: var(--text); letter-spacing: 0; text-transform: none; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-wd { text-align: center; font-size: 12px; color: var(--muted); padding: 2px 0; }
.cal-cell { position: relative; display: grid; place-items: center; min-height: 44px; border-radius: 12px; border: 1px solid transparent; background: none; color: var(--text); font: inherit; font-size: 15px; font-variant-numeric: tabular-nums; cursor: pointer; }
.cal-cell.is-out { color: var(--muted); opacity: .45; cursor: default; }
.cal-cell.is-today { border-color: var(--mint); }
.cal-cell[aria-pressed="true"] { background: var(--card); border-color: var(--line); }
.cal-cell.is-today[aria-pressed="true"] { border-color: var(--mint); }
.cal-cell:focus-visible { outline: 2px solid #F3F1FF; outline-offset: 2px; }
.cal-dot { position: absolute; bottom: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--mint); }
.cal-day-detail { margin-top: 8px; }
.next-up { display: block; width: 100%; margin: 0 0 12px; padding: 12px 16px; border-radius: 16px; border: 1px solid var(--line-soft); background: var(--card); color: var(--text); font: inherit; font-size: 15px; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.next-up:hover { background: rgba(255,255,255,.05); }
.cal-icon:focus-visible, .next-up:focus-visible, .cal-sheet .sheet-close button:focus-visible { outline: 2px solid #F3F1FF; outline-offset: 3px; }
.tt { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; min-height: 132px; padding: 16px;
  border-radius: 20px; border: 1px solid var(--line-soft); background: var(--card); color: var(--text); font: inherit; text-align: left; cursor: pointer;
  transition: border-color .2s, transform .2s; }
.tt:hover { border-color: rgba(185,169,255,.4); }
.tt:active { transform: scale(.985); }
.tt:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.tt-hero { grid-column: 1 / -1; min-height: 0; background: linear-gradient(160deg, rgba(124,108,240,.24), rgba(18,20,44,.92)); border-color: rgba(185,169,255,.32); }
.tt-quiet { border-style: dashed; background: transparent; }
.tt-label { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.tt b { font-size: 17px; line-height: 1.25; font-weight: 600; overflow-wrap: anywhere; }
.tt-next, .tt-sub { font-size: 13.5px; line-height: 1.4; color: var(--soft); overflow-wrap: anywhere; }
.tt-sub { color: var(--muted); }
.tt-who { font-size: 13px; color: var(--muted); }
.tt-line { font-family: var(--serif); font-size: 23px; line-height: 1.2; }
.tt-go { align-self: stretch; margin-top: 4px; padding: 11px; border-radius: 99px; background: var(--grad); color: #121430; font-weight: 700; text-align: center; }
.tt-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); }
.tt-ic { font-style: normal; font-size: 13px; letter-spacing: 0; }
.tt-ic-sun::before { content: "☀"; color: var(--gold); }
.tt-ic-moon::before { content: "☾"; color: var(--gold); }
.tt-ic-plan::before { content: "✓"; color: var(--mint); }
.tt-ic-follow::before { content: "↻"; color: var(--mint); }
.tt-ic-lesson::before { content: "✦"; color: var(--violet); }
.tt-ic-dna::before { content: "✶"; color: var(--violet); }
.tt-ic-loops::before { content: "◌"; color: var(--soft); }

/* A tile opened full screen (the #today sheet) */
.today-back { position: absolute; z-index: 5; top: calc(env(safe-area-inset-top, 0px) + 12px); left: max(12px, env(safe-area-inset-left, 0px));
  min-height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--text); font-size: 14.5px; font-weight: 600; cursor: pointer; }
.today-sheet .today-wrap { padding-top: calc(env(safe-area-inset-top, 0px) + 66px); }
.today-from { display: block; margin-top: 2px; font-size: 12.5px; color: var(--gold); }
.today-later { display: flex; flex-direction: column; gap: 8px; }
/* "How did the step go?": the first session's step, and its two taps (docs/COACH-FIRST-SESSION-V3.md). */
.today-step { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; }
.today-step-text { margin: 0; font-weight: 600; }
.today-later h4, .today-settings { margin: 6px 0 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.today-follow { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.today-follow li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 18px; background: var(--card); border: 1px solid var(--line-soft); }
.today-follow .text { min-width: 0; overflow-wrap: anywhere; font-size: 16px; }
.today-follow .when { flex: none; font-size: 13px; color: var(--mint); }
@media (max-width: 520px) { .view-toggle button { padding: 0 11px; font-size: 13.5px; } }
/* A phone with the Chat | Today toggle: the top bar keeps the menu, the toggle and Account; the other links stay in the menu. */
@media (max-width: 760px) { body.has-today .top .nav-links { display: none !important; } }
/* The preview pill in the check mode (Rick, 21 Oct): a small pill under the box; a tap opens a short card. */
.battle-peek { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 12px; }
.battle-pill { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 13px; border-radius: 99px; border: 1px solid rgba(217,183,122,.4);
  background: rgba(217,183,122,.06); color: var(--gold); font-size: 13px; font-weight: 600; cursor: pointer; }
.battle-pill[aria-expanded="true"] { background: rgba(217,183,122,.14); }
.battle-pill:focus-visible, .battle-peek-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.battle-peek-card { max-width: 560px; padding: 14px 18px; border-radius: 18px; border: 1px solid rgba(217,183,122,.3); background: var(--card); color: var(--soft);
  font: inherit; font-size: 14.5px; line-height: 1.5; text-align: left; cursor: pointer; }

/* The user menu at the bottom of the left menu (Rick, 21 Oct 2026; web/user-menu.js). */
.user-corner { margin-top: auto; position: relative; }
.user-chip { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(242,240,250,.08); background: rgba(255,255,255,.03); color: var(--soft); font-size: 14px; text-align: left; cursor: pointer; }
.user-chip:hover, .user-chip[aria-expanded="true"] { background: rgba(255,255,255,.07); }
.um-avatar { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; color: #fff; background: linear-gradient(135deg, #7C5CFF, #4F7BFF); }
.um-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-caret { color: #7E82A0; font-size: 12px; }
.user-menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 14px; background: #171A33; border: 1px solid rgba(242,240,250,.1); box-shadow: 0 12px 36px rgba(0,0,0,.45); z-index: 20; }
.um-item { padding: 10px 12px; border: 0; border-radius: 10px; background: none; color: var(--soft); font-size: 14px; text-align: left; cursor: pointer; min-height: 40px; }
.um-item:hover, .um-item:focus-visible { background: rgba(255,255,255,.06); }
.um-signout { color: #F0A6A6; }
.um-rule { border: 0; border-top: 1px solid rgba(242,240,250,.08); margin: 4px 6px; }
/* Premium credits meter (step A, staging copy only): small, inside the menu, never in the chat. */
.um-credits { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 10px; padding: 10px 12px 12px; margin-bottom: 4px; border-bottom: 1px solid rgba(242,240,250,.08); }
.um-credits-label { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: #9CA0BE; }
.um-bar { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.um-bar-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7C5CFF, #4F7BFF); }
.um-bar.low .um-bar-fill { background: #E0A84F; }
.um-credits-line { font-size: 13px; color: var(--soft); }
.um-topup { justify-self: end; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(124,92,255,.5); background: rgba(124,92,255,.12); color: #fff; font-size: 13px; cursor: pointer; min-height: 32px; }
.um-topup:disabled { opacity: .6; cursor: default; }
.um-credits-note { grid-column: 1 / -1; font-size: 13px; color: #C9B8FF; }
.um-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; border: 1px solid rgba(242,240,250,.1); background: rgba(255,255,255,.03); margin-top: 10px; }
.um-card .secondary { align-self: flex-start; }
.um-soon { opacity: .85; }
.um-back { margin-top: 14px; }
/* The Feedback tab (Rick, 21 Oct: testers; web/feedback.js): a narrow tab on the right edge, half-way down, so it
   never covers a send button, a sheet's close button or the name menu at the bottom left. Inside an open sheet too. */
.fb-tab { position: fixed; right: 0; top: 50%; z-index: 30; transform: translateY(-50%); writing-mode: vertical-rl;
  rotate: 180deg; min-width: 44px; min-height: 44px; padding: 12px 8px; margin-right: env(safe-area-inset-right, 0px);
  border: 1px solid var(--line); border-left: 0; border-radius: 0 10px 10px 0; background: var(--card-solid); color: var(--soft);
  font-size: 12px; font-weight: 600; letter-spacing: .04em; cursor: pointer; }
.fb-tab:hover, .fb-tab:focus-visible { opacity: 1; color: var(--text); }
.fb-sheet { text-align: left; }
.fb-text { width: 100%; box-sizing: border-box; min-height: 110px; resize: vertical; border-radius: 14px; border: 1px solid var(--line);
  background: rgba(255,255,255,.04); color: var(--text); padding: 12px; font: inherit; }
.fb-status { min-height: 1.4em; margin: 10px 0 12px; }
.fb-actions { display: flex; flex-direction: column; gap: 8px; }

/* The founding-tester waitlist (Rick, 22 Oct 2026; web/waitlist.js): the form, the six quick taps, the list screens. */
.wl-sheet { max-height: calc(100dvh - 32px); overflow-y: auto; }
.wl-body { display: flex; flex-direction: column; gap: 12px; }
.wl-body h2 { margin: 4px 0 0; text-wrap: balance; }
.wl-intro { margin: 0; line-height: 1.5; color: var(--muted, inherit); }
.wl-taps { display: flex; flex-direction: column; gap: 12px; }
.wl-taps h3 { margin: 8px 0 0; font-size: 16px; text-wrap: balance; }
.wl-body p { margin: 0; }
.wl-form { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.wl-q { border: 0; margin: 0; padding: 0; text-align: left; }
.wl-q legend { padding: 0; margin-bottom: 8px; color: var(--soft); font-size: 15px; line-height: 1.35; }
.wl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wl-chip { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text);
  font: inherit; font-size: 15px; cursor: pointer; }
.wl-chip[aria-pressed="true"] { border-color: var(--mint); background: rgba(159, 216, 200, .16); color: var(--text); font-weight: 600; }
.wl-chip:focus-visible { outline: 2px solid #F3F1FF; outline-offset: 3px; } /* Starlight focus (BRAND.md) */
.wl-actions { display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin-top: 4px; }
.wl-body .sheet-note .link-btn { display: inline; margin: 0; font-size: 13px; }
/* The user menu: the email under the name. */
.um-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.um-email { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* "Plan and billing" holds the plan cards, one column. */
.um-plans .plans { grid-template-columns: 1fr; gap: 10px; }
.um-plans .plan { padding: 16px 18px; border-radius: 16px; gap: 8px; }

/* The tester walk, pass 1 (Rick, 25 Oct). The tip of the day lives in the ask box as its placeholder, so its card stays off
   the home screen (it still opens from Today's tile). */
body.tip-in-box .lesson-card:not(.open) { display: none !important; }

/* The companies line under the pills, signed in where the router answers everyone (#374): quiet, readable, home only. */
.router-home-note { max-width: 640px; margin: 16px auto 0; font-size: 13px; line-height: 1.5; color: var(--muted); text-align: center; }
main.chatting .router-home-note { display: none; }
.router-home-note a { color: inherit; text-decoration: underline; }

/* Pass 2 (Rick, 25 Oct): no "preview" tag on the page, so an empty tag takes no room; pill 2's one button. */
.check-tag:empty, .msg-preview:empty { display: none; }
.pill-go { display: block; margin: 20px auto 0; min-height: 44px; color: #17122F; font-weight: 600; } /* Ink words, 600, 44px (Design Studio, #375) */
/* "Meet your coach" as a small text link, bottom right under the beats (Rick, 25 Oct; Design Studio sizes it). */
.pill-go-link { display: block; margin: 12px 0 -10px auto; min-height: 44px; padding: 0 4px; line-height: 44px; background: none; border: 0;
  color: var(--text); font: inherit; font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pill-go-link:focus-visible, .pill-col-link:focus-visible { outline: 2px solid #F3F1FF; outline-offset: 3px; border-radius: 4px; } /* Starlight focus (BRAND.md) */
.pill-col-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }

/* Your page, step one (Rick, 25 Oct 2026; issue #396; staging only): the coach's questions in the chat. The card and the
   live page are Design Studio's (public/your-page.css, #398). */
.ypq-ask { margin: 6px 0 18px; }
.ypq-preview { max-width: 440px; }
.ypq-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ypq-input { flex: 1 1 220px; min-width: 0; min-height: 44px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit; }
.ypq-input:focus-visible, .ypq-chip:focus-visible, .ypq-btn:focus-visible { outline: 2px solid #F3F1FF; outline-offset: 3px; } /* Starlight focus (BRAND.md) */
.ypq-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ypq-chip { min-height: 44px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--line); background: transparent; color: var(--soft); font: inherit; cursor: pointer; }
.ypq-chip[aria-pressed="true"] { border-color: var(--violet); color: var(--text); background: rgba(185,169,255,.12); }
.ypq-btn { min-height: 44px; padding: 0 18px; border-radius: 99px; border: 0; font: inherit; font-weight: 600; cursor: pointer; }
.ypq-btn.primary { background: transparent; color: var(--text); border: 1px solid var(--violet); } /* outline: the screen keeps no filled primary (BRAND.md 2, 3) */
.ypq-btn.link { background: none; color: var(--muted); text-decoration: underline; padding: 0 8px; }
.ypq-btn:disabled, .ypc-go:disabled { opacity: .5; cursor: default; }
.ypq-note { flex-basis: 100%; margin: 0; font-size: 14px; color: var(--muted); }
.ypq-under { margin: -6px 0 10px; }

/* Plans hidden until they're real (Rick, 26 Oct; home.plans_open false): the free lesson card's line to the plans. */
body.plans-closed button.lesson-more { display: none; }
/* Rick's friends page (/friends; Rick, 26 Oct, friends week): the doc page's column, a short form, the done screen. */
.friends { max-width: 520px; }
.friends-line { color: var(--soft); font-size: 17px; line-height: 1.55; margin: 0 0 24px; }
.friends-form .field textarea { border: 1px solid var(--line); background: rgba(8,11,23,.6); border-radius: 14px; padding: 11px 14px; font: inherit; font-size: 15px; color: inherit; resize: vertical; }
.friends-consent { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 20px; font-size: 14px; line-height: 1.5; color: var(--soft); }
.friends-consent input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--violet); }
.friends-consent a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.friends-form button[type=submit], .friends-signin { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px; border-radius: 999px; font-weight: 600; font-size: 16px; cursor: pointer; text-decoration: none; }
.friends-code-label { margin: 28px 0 6px; font-size: 13px; color: var(--muted); }
.friends-code { margin: 0 0 24px; font-size: 26px; font-weight: 600; letter-spacing: .08em; user-select: all; }
.friends-optional { color: var(--faint); }
.friends-copy { width: auto; padding: 10px 22px; margin: -12px 0 20px; }

/* The site's one footer line, from config: off since Rick, 28 Oct (empty hides it); small, muted, centred, the home screen and /privacy and /terms only. */
.site-foot { margin: 28px auto 20px; padding: 0 20px; text-align: center; font-size: 12px; line-height: 1.4; color: var(--muted); }
.site-foot:empty, body:not(.doc-page) main:not(.home) + .site-foot { display: none; }
/* Photos in and pictures out (Image Lab; where IMAGES=on). */
.photo-chip { position: relative; display: inline-block; margin: 0 0 8px; }
.photo-chip img { display: block; height: 64px; max-width: 120px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.photo-chip-x { position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 16px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.composer.dropping { outline: 2px dashed var(--violet); outline-offset: 4px; }
.msg.user .msg-photo { display: block; max-width: min(240px, 70%); max-height: 240px; object-fit: cover; border-radius: 14px; border: 1px solid var(--line); margin: 0 0 6px auto; }
.msg-picture { display: block; width: auto; max-width: min(100%, 420px); max-height: 60vh; height: auto; border-radius: 14px; border: 1px solid var(--line); } /* a tall picture stays within the screen (#471) */
/* Under a picture (#471): three sizes, one re-roll button and Save picture. Outline buttons and a text link, 44px tall to
   tap, wrapping at phone width. The size that was made shows pressed. */
.picture-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.picture-sizes { display: inline-flex; gap: 6px; }
.picture-size, .picture-reroll { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text); font: 600 14px/1 Figtree, sans-serif; cursor: pointer; }
.picture-size[aria-pressed="true"] { border-color: var(--violet); color: var(--violet); }
.picture-size:disabled, .picture-reroll:disabled { opacity: .5; cursor: default; }
.msg-picture-save { display: inline-flex; align-items: center; min-height: 44px; color: var(--violet); font-size: 14px; }
.picture-size:focus-visible, .picture-reroll:focus-visible, .msg-picture-save:focus-visible { outline: 2px solid #F3F1FF; outline-offset: 3px; } /* Starlight focus (BRAND.md) */
.msg.user:has(.msg-photo) { flex-direction: column; align-items: flex-end; }
/* Documents in the box (Image Lab, #442): a file shows as a tile with its kind and name. */
.photo-chip .file-tile { min-height: 44px; }
.file-tile { display: flex; flex-direction: column; justify-content: center; gap: 2px; max-width: 220px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.file-tile .file-kind { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--violet); }
.file-tile .file-name { font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg.user:has(.msg-file) { flex-direction: column; align-items: flex-end; }
.msg.user .msg-file { margin: 0 0 6px auto; }
/* Keyboard focus on the image and file controls (#427 review note): the same 2px outline as the rest of the page. */
.photo-chip-x:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }

/* The "?" beside the quill button (Rick, 26 Oct): a small round mark with a 44px tap area; its one line opens above. */
.squire-help { position: relative; display: inline-flex; align-items: center; }
#check-it[hidden] + .squire-help { display: none; } /* never a lone "?" when the box button is hidden */
.squire-help-btn { position: relative; width: 22px; height: 22px; border-radius: 999px; border: 1px solid var(--line); background: transparent;
  color: var(--muted); font: inherit; font-size: 12px; line-height: 1; cursor: pointer; padding: 0; }
.squire-help-btn::before { content: ""; position: absolute; inset: -11px; }
.squire-help-btn:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.squire-help-tip { position: absolute; bottom: calc(100% + 8px); right: 0; width: min(280px, 80vw); padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 14px; line-height: 1.4; z-index: 20; text-align: left; }
.squire-help-tip[hidden] { display: none; }
.squire-head .squire-help-tip { right: auto; left: 0; } /* by an answer the "?" sits near the left edge: open rightward */
/* A message that didn't go through (Rick, 28 Oct): Retry, an outline button with a 44px tap area (BRAND.md). */
.msg .answer .retry { margin-top: 8px; min-height: 44px; padding: 0 18px; border-radius: 99px; border: 1px solid var(--line); background: transparent; color: inherit; font: inherit; font-size: 15px; cursor: pointer; }
.msg .answer .retry:focus-visible { outline: 2px solid #F3F1FF; outline-offset: 3px; } /* Starlight focus (BRAND.md) */