/* brand.css: BeePro brand book v2 ("Be a Pro") as code. Light Cloud + Pro Blue is the default, dark via [data-theme="dark"]. Blue stays under 10% of any layout. */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter+Tight:wght@300;400;500;600&family=Geist+Mono:wght@400;500&display=swap');

:root {
  --bg-canvas: #F6F7FB; --bg-surface: #FFFFFF; --bg-sunken: #F6F7FB; --bg-glass: rgba(255,255,255,0.88); --bg-track: #E3E7F0; --bg-ink: #0B1220;
  --text-primary: #0B1220; --text-secondary: #475069; --text-muted: #5F6880; --text-on-ink: #F6F7FB;
  --border-hairline: #E3E7F0; --border-input: #CDD3E0; --border-ghost: rgba(11,18,32,0.18);
  --accent-fill: #2350D8; --accent-fill-hover: #1A3DB0; --accent-text: #2350D8; --accent-strong: #1A3DB0; --accent-tint: #DCE5FF; --accent-wash: #EEF2FF; --accent-soft: #7D9BFF;
  --on-accent: #FFFFFF;
  --success-text: #2F5D50; --success-surface: #DCE7E2; --success-fill: #2F5D50;
  --error-text: #9B3B2A;
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-sans: 'Inter Tight', system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 12px; --radius-tile: 16px; --radius-xl: 20px;
  --shadow-card: 0 0 0 1px rgba(11,18,32,0.06), 0 8px 24px rgba(11,18,32,0.04);
  --shadow-float: 0 1px 0 rgba(11,18,32,0.04), 0 12px 32px rgba(11,18,32,0.10), 0 0 0 1px rgba(11,18,32,0.06);
  --shadow-hero: 0 40px 80px rgba(11,18,32,0.18), 0 0 0 1px rgba(11,18,32,0.06);
  --dots: radial-gradient(rgba(11,18,32,0.10) 1px, transparent 1.3px);
  --ease: cubic-bezier(.22, 1, .36, 1);
  color-scheme: light;
}
[data-theme="dark"] {
  --bg-canvas: #0B1220; --bg-surface: #141C2E; --bg-sunken: #0F1626; --bg-glass: rgba(20,28,46,0.85); --bg-track: #26304A;
  --text-primary: #F6F7FB; --text-secondary: #B9C0D0; --text-muted: #8A93A8;
  --border-hairline: #26304A; --border-input: #34405C; --border-ghost: rgba(246,247,251,0.2);
  --accent-text: #7D9BFF; --accent-tint: #1E2A52; --accent-wash: #18213D;
  --success-text: #6FA592; --success-surface: #1F3B33;
  --error-text: #E39A86;
  --shadow-card: none; --shadow-float: 0 0 0 1px #26304A;
  --dots: radial-gradient(rgba(246,247,251,0.08) 1px, transparent 1.3px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg-canvas); color: var(--text-primary); font-family: var(--font-sans); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: var(--accent-text); transition: color 200ms var(--ease); }
a:hover { color: var(--accent-strong); }
img, svg, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg-canvas), 0 0 0 4px var(--text-primary); border-radius: var(--radius-md); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Type */
.display, h1, h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.03em; margin: 0; }
.display { font-size: clamp(48px, 7vw, 96px); line-height: 0.98; }
h1 { font-size: clamp(36px, 4.4vw, 56px); line-height: 1.02; letter-spacing: -0.025em; }
h2 { font-size: clamp(32px, 4.4vw, 56px); line-height: 1.04; letter-spacing: -0.02em; }
h3 { font-family: var(--font-sans); font-weight: 600; font-size: clamp(19px, 2vw, 22px); line-height: 1.3; letter-spacing: -0.01em; margin: 0; }
.mark { font-style: italic; color: var(--accent-text); background: linear-gradient(transparent 60%, var(--accent-tint) 60%, var(--accent-tint) 94%, transparent 94%); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 0.06em; }
.lede { font-size: clamp(17px, 1.6vw, 19px); line-height: 1.55; color: var(--text-secondary); margin: 0; max-width: 36em; }
.body-lesson { font-size: clamp(17px, 1.4vw, 18px); line-height: 1.65; color: var(--text-secondary); max-width: 68ch; }
.body-lesson p { margin: 0 0 1em; }
.eyebrow { font-family: var(--font-mono); font-size: clamp(11px, 1vw, 12px); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--text-muted); }
.secondary { color: var(--text-secondary); }
.center { text-align: center; }

/* Layout */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 768px) { .wrap { padding: 0 32px; } }
.stack { display: flex; flex-direction: column; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; } .gap-32 { gap: 32px; } .gap-48 { gap: 48px; }
.section { padding-top: 96px; padding-bottom: 96px; position: relative; }
@media (max-width: 767px) { .section { padding-top: 64px; padding-bottom: 64px; } }
.band { background: var(--bg-surface); border-top: 1px solid var(--border-hairline); border-bottom: 1px solid var(--border-hairline); }
.dotgrid { background-image: var(--dots); background-size: 22px 22px; }
.hairline { border: 0; border-top: 1px solid var(--border-hairline); margin: 0; }
.rel { position: relative; z-index: 1; }
.glow { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(35,80,216,0.16), transparent 65%); pointer-events: none; z-index: 0; }

/* Header */
.topbar { position: sticky; top: 0; z-index: 20; background: rgba(246,247,251,0.85); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border-hairline); }
.nav { display: flex; align-items: center; gap: 28px; padding: 14px 0; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text-primary); }
.brand:hover { color: var(--text-primary); }
.brand span { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.nav-links { display: flex; gap: 24px; font-size: 14px; }
.nav-links a { color: var(--text-secondary); text-decoration: none; }
.nav-links a:hover { color: var(--text-primary); }
.nav-cta { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.nav-menu { display: none; }
@media (max-width: 900px) { .nav-links { display: none; } .nav-menu { display: inline-flex; } }
@media (max-width: 600px) { .nav-cta .btn-plain { display: none; } .hide-sm { display: none !important; } }
details summary::-webkit-details-marker { display: none; }
details[open] summary span.mono { transform: rotate(45deg); }

/* Buttons */
.btn { font-family: var(--font-sans); font-size: 16px; font-weight: 500; min-height: 48px; padding: 14px 24px; border-radius: var(--radius-lg); border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; transition: background 200ms var(--ease), box-shadow 200ms var(--ease), color 200ms var(--ease), transform 200ms var(--ease); }
.btn-primary { background: var(--accent-fill); color: var(--on-accent); box-shadow: 0 6px 16px rgba(35,80,216,0.22); }
.btn-primary:hover { background: var(--accent-fill-hover); color: var(--on-accent); transform: translateY(-1px); }
.btn-ghost { background: var(--bg-surface); color: var(--text-primary); box-shadow: 0 0 0 1px var(--border-hairline); font-weight: 400; }
.btn-ghost:hover { box-shadow: 0 0 0 1px var(--border-input); color: var(--text-primary); }
.btn-plain { background: transparent; color: var(--text-primary); font-weight: 400; padding: 10px 14px; min-height: 44px; }
.btn-white { background: #FFFFFF; color: var(--accent-strong); font-weight: 600; }
.btn-white:hover { background: #F6F7FB; color: var(--accent-strong); }
.btn-sm { min-height: 44px; padding: 10px 18px; font-size: 14px; border-radius: var(--radius-md); }
.btn-block { width: 100%; }
.btn[disabled], .btn.is-disabled { background: var(--bg-track); color: var(--text-muted); cursor: not-allowed; box-shadow: none; transform: none; }
.link-arrow { display: inline-flex; gap: 8px; align-items: center; text-decoration: none; font-size: 15px; background: none; border: 0; padding: 10px 0; cursor: pointer; font-family: var(--font-sans); color: var(--accent-text); }

/* Pills */
.pill { display: inline-flex; align-self: flex-start; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.03em; color: var(--accent-strong); background: var(--accent-tint); border-radius: 999px; padding: 7px 14px; }
.pill-success { font-family: var(--font-mono); font-size: 12px; color: var(--success-text); background: var(--success-surface); padding: 6px 10px; border-radius: 999px; align-self: flex-start; }
.pill-white { font-size: 11px; font-weight: 500; color: var(--accent-strong); background: #FFFFFF; padding: 4px 8px; border-radius: 999px; }

/* Surfaces */
.card { background: var(--bg-surface); border-radius: var(--radius-tile); padding: 24px; box-shadow: var(--shadow-card); }
.card-flat { background: var(--bg-sunken); border-radius: var(--radius-tile); padding: 28px; }
.card-blue { background: var(--accent-fill); color: #FFFFFF; border-radius: var(--radius-tile); padding: 28px; }
.card-ink { background: var(--bg-ink); color: var(--text-on-ink); border-radius: var(--radius-tile); padding: 22px; }
.float { background: var(--bg-surface); border-radius: 14px; box-shadow: var(--shadow-float); }
.glass { background: var(--bg-glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-radius: 14px; padding: 16px 18px; }
.tile-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.photo { border-radius: var(--radius-tile); overflow: hidden; background: var(--accent-tint); }
.photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.photo:hover img { transform: scale(1.03); }

/* Forms */
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 13px; color: var(--text-secondary); }
.input, textarea.input { font-family: var(--font-sans); background: var(--bg-surface); border: 1px solid var(--border-input); color: var(--text-primary); border-radius: var(--radius-md); padding: 14px 16px; font-size: 16px; width: 100%; transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease); }
.input:focus { outline: none; border-color: var(--accent-fill); box-shadow: 0 0 0 4px var(--accent-tint); }
.input::placeholder { color: var(--text-muted); }
textarea.input { min-height: 120px; resize: vertical; line-height: 1.5; }

/* Choice cards */
.choices { display: flex; flex-direction: column; gap: 10px; }
.choices.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.choice { font-family: var(--font-sans); display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left; background: var(--bg-surface); border: 1px solid var(--border-input); color: var(--text-primary); border-radius: var(--radius-lg); padding: 16px 18px; font-size: 16px; min-height: 60px; cursor: pointer; transition: border-color 200ms var(--ease), background 200ms var(--ease), box-shadow 200ms var(--ease); }
.choice:hover { border-color: var(--accent-soft); }
.choice .tag { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); letter-spacing: 0.06em; }
.choice .check { display: none; flex: none; }
.choice[aria-pressed="true"] { background: var(--accent-wash); border-color: var(--accent-fill); box-shadow: 0 0 0 3px var(--accent-tint); }
.choice[aria-pressed="true"] .tag { display: none; }
.choice[aria-pressed="true"] .check { display: block; }

/* Progress */
.track { height: 6px; background: var(--bg-track); border-radius: 6px; overflow: hidden; }
.track > span { display: block; height: 6px; background: var(--accent-fill); border-radius: 6px; transition: width 600ms var(--ease); }
.steps { flex: 1; display: flex; gap: 4px; }
.steps span { flex: 1; height: 4px; border-radius: 4px; background: var(--bg-track); transition: background 450ms var(--ease); }
.steps span.on { background: var(--accent-fill); }

/* Roadmap */
.roadmap { position: relative; overflow-x: auto; padding-bottom: 4px; }
.roadmap-inner { position: relative; min-width: 640px; display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 8px; }
.roadmap-line { position: absolute; left: 8%; right: 8%; top: 13px; height: 3px; background: var(--bg-track); border-radius: 3px; }
.roadmap-line > span { display: block; height: 3px; background: var(--accent-fill); border-radius: 3px; }
.node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; font-size: 13px; font-weight: 500; }
.node small { font-size: 12px; color: var(--text-muted); font-weight: 400; }
.node.current { color: var(--accent-text); font-weight: 600; }
.dot { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; }
.dot.done { background: var(--success-fill); }
.dot.current { background: var(--accent-fill); box-shadow: 0 0 0 6px var(--accent-tint); }
.dot.future { background: var(--bg-surface); border: 2px solid var(--border-input); }
.dot.sm { width: 16px; height: 16px; }
.dot.sm.current { box-shadow: 0 0 0 4px var(--accent-tint); }

/* App shell */
.app { display: flex; flex-wrap: wrap; min-height: 100vh; }
.sidenav { flex: 0 0 240px; background: var(--bg-surface); border-right: 1px solid var(--border-hairline); padding: 24px 16px; display: flex; flex-direction: column; gap: 4px; }
@media (min-width: 900px) { .sidenav { position: sticky; top: 0; height: 100vh; overflow-y: auto; } }
@media (max-width: 899px) { .sidenav { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 12px 16px; border-right: 0; border-bottom: 1px solid var(--border-hairline); } .sidenav .sn-hide { display: none; } }
.sn-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--radius-md); color: var(--text-secondary); text-decoration: none; font-size: 14px; }
.sn-item.on { background: var(--accent-wash); color: var(--accent-text); font-weight: 500; }
.sn-item.locked { color: var(--text-muted); pointer-events: none; }
.appmain { flex: 999 1 560px; min-width: 0; padding: 24px clamp(16px, 3vw, 40px) 64px; display: flex; flex-direction: column; gap: 24px; }

/* Lesson */
.lesson-cols { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.lesson-article { flex: 3 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 28px; max-width: 74ch; }
.lesson-aside { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 1100px) { .lesson-aside { position: sticky; top: 24px; } }
.lesson-hero { position: relative; border-radius: var(--radius-tile); overflow: hidden; aspect-ratio: 21 / 8; min-height: 170px; background: var(--bg-surface); box-shadow: var(--shadow-card); }
.lsec { display: flex; flex-direction: column; gap: 16px; background: var(--bg-surface); border-radius: var(--radius-tile); box-shadow: var(--shadow-card); padding: clamp(20px, 3vw, 32px); }
.lsec .meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tag-adapt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--accent-strong); background: var(--accent-tint); border-radius: 999px; padding: 4px 10px; }
.example { border-radius: var(--radius-lg); background: var(--accent-wash); padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.check-q { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--border-hairline); padding-top: 18px; }
.check-q .choice { min-height: 52px; font-size: 15px; padding: 12px 16px; }
.choice.right { border-color: var(--success-fill); background: var(--success-surface); }
.choice.wrong { border-color: var(--error-text); background: #FBEDEA; }
.feedback { font-size: 14px; line-height: 1.55; color: var(--text-secondary); margin: 0; }
.feedback.ok { color: var(--success-text); }
.feedback.no { color: var(--error-text); }
.lsec-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lsec.is-locked { display: none; }

/* Behind the scenes */
.bts-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.bts-list li { display: grid; grid-template-columns: 14px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(246,247,251,0.1); font-size: 13px; line-height: 1.5; color: #B9C0D0; }
.bts-list li:first-child { border-top: 0; }
.bts-list li b { color: #F6F7FB; font-weight: 500; }
.bts-list .t { font-family: var(--font-mono); font-size: 10px; color: #8A93A8; display: block; letter-spacing: 0.06em; }
.bts-state { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; font-size: 13px; }
.bts-state .mono { color: var(--accent-soft); }
.bts-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; background: #34405C; }
.bts-dot.on { background: var(--accent-soft); box-shadow: 0 0 0 4px rgba(125,155,255,0.2); }

.course-card { transition: box-shadow 200ms var(--ease), transform 200ms var(--ease); }
.course-card:hover { box-shadow: var(--shadow-float); transform: translateY(-2px); color: inherit; }
.course-card:hover img { transform: scale(1.04); }

/* Persuasion blocks */
.compare { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.compare th, .compare td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--border-hairline); vertical-align: top; }
.compare th { font-family: var(--font-mono); font-size: 12px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.compare td.us { background: var(--accent-wash); color: var(--text-primary); font-weight: 500; }
.compare th.us { background: var(--accent-fill); color: #FFFFFF; border-radius: 12px 12px 0 0; }
.compare tr:last-child td.us { border-radius: 0 0 12px 12px; }
.stat { font-family: var(--font-mono); font-size: clamp(36px, 4vw, 44px); letter-spacing: -0.03em; color: var(--accent-text); line-height: 1; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-family: var(--font-sans); font-size: 14px; padding: 10px 14px; border-radius: 999px; background: var(--bg-surface); border: 1px solid var(--border-input); color: var(--text-primary); cursor: pointer; transition: all 200ms var(--ease); }
.chip[aria-pressed="true"] { background: var(--accent-fill); border-color: var(--accent-fill); color: #FFFFFF; }
.preview-lesson { transition: opacity 300ms var(--ease); }

/* Adaptive loop diagram and progress chart */
.lv-sweep { animation: lv-spin 8s linear infinite; transform-origin: 400px 200px; transform-box: view-box; }
@keyframes lv-spin { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
.lv-node rect { transition: fill 300ms var(--ease), stroke 300ms var(--ease); animation: lv-pulse 8s infinite; }
@keyframes lv-pulse { 0%, 22% { fill: #EEF2FF; stroke: #2350D8; } 26%, 100% { fill: #FFFFFF; stroke: #CDD3E0; } }
.lv-ver { opacity: 0; animation: lv-ver 8s infinite; }
@keyframes lv-ver { 0% { opacity: 0; transform: translateY(6px); } 4%, 22% { opacity: 1; transform: none; } 26%, 100% { opacity: 0; } }
.lv-entry { animation: lv-dash 1.2s linear infinite; }
@keyframes lv-dash { to { stroke-dashoffset: -24; } }
.ex-flow { opacity: 0; animation: ex-flow 3s linear infinite; }
@keyframes ex-flow { 0% { opacity: 0; stroke-dashoffset: 0; } 20%, 70% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: -64; } }
.cv-line { stroke-dasharray: 900; stroke-dashoffset: 900; }
.cv-area, .cv-pt { opacity: 0; }
.reveal.in .cv-line { animation: cv-draw 2.2s var(--ease) forwards; }
.reveal.in .cv-gen { animation-duration: 1.6s; }
.reveal.in .cv-area { animation: cv-fade 1s 1.4s var(--ease) forwards; }
.reveal.in .cv-pt { animation: cv-fade 500ms var(--ease) forwards; }
@keyframes cv-draw { to { stroke-dashoffset: 0; } }
@keyframes cv-fade { to { opacity: 1; } }

.story-caps { position: absolute; left: 4%; bottom: 7%; width: min(340px, 70%); height: 64px; }
.story-cap { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 2px; justify-content: center; box-shadow: var(--shadow-float); opacity: 0; animation: story-cap 12s infinite; }
@keyframes story-cap { 0% { opacity: 0; transform: translateY(8px); } 3%, 22% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; } }
@media (max-width: 600px) { .story-caps { height: 58px; } .story-cap span:last-child { font-size: 12px !important; } }

/* Motion */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity 450ms var(--ease), transform 450ms var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.fade-swap { animation: fadein 600ms var(--ease); }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.floaty { animation: floaty 6s ease-in-out infinite; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.skeleton { height: 14px; border-radius: 4px; background: linear-gradient(90deg, var(--bg-track), var(--accent-wash), var(--bg-track)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 1ms !important; transition-property: opacity !important; }
  .reveal { transform: none; }
  .cv-line { stroke-dashoffset: 0; } .cv-area, .cv-pt { opacity: 1; }
  .lv-ver { opacity: 0; } .lv-ver:first-child { opacity: 1; }
  .story-cap { opacity: 0; } .story-cap:last-child { opacity: 1; }
}

/* Footer */
.foot { padding: 32px 0; border-top: 1px solid var(--border-hairline); font-size: 13px; color: var(--text-muted); }
.foot a { color: var(--text-muted); text-decoration: none; }