:root {
  --felt: #0c6a49;
  --felt-deep: #073f2b;
  --felt-line: rgba(255, 255, 255, 0.14);
  --page: #f1f6f3;
  --surface: #ffffff;
  --ink: #13261d;
  --ink-soft: #4a5d54;
  --line: #d5e2db;
  --chip-green: #1fc27a;
  --chip-gold: #f4b42c;
  --chip-red: #ef4545;
  --chip-blue: #2f5cff;
  --on-felt: #f4fbf7;
  --on-felt-soft: #b9d9ca;
  --radius-lg: 22px;
  --radius-sm: 10px;
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body: "Instrument Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--chip-gold); outline-offset: 3px; border-radius: 6px; }

.wrap { width: min(1160px, 100% - 32px); margin-inline: auto; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px;
  border-radius: 999px; border: 0;
  font: 600 16px/1 var(--body);
  text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background-color .15s ease;
}
.btn:active { transform: scale(.97); }
.btn-gold { background: var(--chip-gold); color: #2a1d00; }
.btn-gold:hover { background: #ffc54a; }
.btn-ghost { background: transparent; color: var(--on-felt); box-shadow: inset 0 0 0 2px var(--felt-line); }
.btn-ghost:hover { box-shadow: inset 0 0 0 2px var(--on-felt-soft); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #22392e; }
.btn-small { min-height: 40px; padding: 0 16px; font-size: 15px; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--felt-deep); color: var(--on-felt); }
.site-header .wrap { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 800 19px/1 var(--display); letter-spacing: -.01em; }
.brand-chip { width: 30px; height: 30px; flex: none; }
.site-nav { display: flex; gap: 22px; margin-left: auto; }
.site-nav a { text-decoration: none; color: var(--on-felt-soft); font-weight: 500; font-size: 15px; }
.site-nav a:hover { color: var(--on-felt); }
.slot-nav { display: flex; gap: 8px; }
.slot-nav:empty { display: none; }
.account { display: flex; align-items: center; gap: 10px; }
.account-name { font-size: 15px; font-weight: 600; max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) {
  .site-nav { display: none; }
  .slot-nav { margin-left: auto; }
  .account { margin-left: auto; }
  .slot-nav:not(:empty) + .account { margin-left: 0; }
  .account-name { display: none; }
  .site-header .wrap { gap: 10px; }
  .brand span { display: none; }
}

/* ---------- login + terms ---------- */
.auth-page { min-height: calc(100vh - 68px); display: grid; place-items: center; padding: 48px 16px; background: var(--felt); }
.auth-card { width: min(440px, 100%); background: var(--surface); border-radius: var(--radius-lg); padding: 30px 26px 26px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--page); border-radius: 999px; margin-bottom: 24px; }
.auth-tabs button { border: 0; background: none; border-radius: 999px; min-height: 42px; font: 600 15px var(--body); color: var(--ink-soft); cursor: pointer; }
.auth-tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(19,38,29,.15); }
.auth-card h1 { margin: 0 0 6px; font: 800 28px/1.1 var(--display); letter-spacing: -.02em; }
.auth-card > p, .auth-card form > p { margin: 0 0 20px; color: var(--ink-soft); font-size: 15px; }
.field { display: grid; gap: 6px; margin-bottom: 14px; font-size: 14px; font-weight: 600; }
.field input {
  width: 100%; font: 400 16px/1.4 var(--body); color: var(--ink);
  padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: #fff;
}
.field input:focus { outline: none; border-color: var(--felt); box-shadow: 0 0 0 3px rgba(12,106,73,.18); }
.field small { font-weight: 400; color: var(--ink-soft); }
.check { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; margin: 6px 0 20px; font-size: 15px; line-height: 1.45; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--felt); cursor: pointer; }
.btn-google { width: 100%; background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); margin-bottom: 6px; }
.btn-google:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.or { text-align: center; color: var(--ink-soft); font-size: 14px; margin: 10px 0 14px !important; }
.form-err { color: #b3141b; font-size: 14px; min-height: 20px; margin: 12px 0 0; }
.auth-card .btn { width: 100%; }
.notice { text-align: center; }
.notice .badge { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; background: #fff4d6; }
.terms-body { max-width: 720px; padding-block: 56px 80px; }
.terms-body h1 { font: 800 clamp(34px, 5vw, 52px)/1.05 var(--display); letter-spacing: -.03em; margin: 0 0 28px; }
.terms-body h2 { font: 700 21px/1.3 var(--display); margin: 28px 0 6px; }
.terms-body p { margin: 0; color: var(--ink-soft); }

/* locked lesson */
.locked { aspect-ratio: 16/9; border-radius: var(--radius-lg); background: var(--felt-deep); color: var(--on-felt); display: grid; place-items: center; text-align: center; padding: 24px; }
.locked h2 { margin: 14px 0 6px; font: 800 clamp(24px, 3vw, 32px)/1.1 var(--display); }
.locked p { margin: 0 auto 20px; max-width: 42ch; color: var(--on-felt-soft); }
.locked .btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
@media (max-width: 520px) { .locked { aspect-ratio: auto; padding: 36px 20px; } }
.locked { aspect-ratio: auto; min-height: 420px; }
.task-form { display: grid; gap: 10px; max-width: 360px; margin: 20px auto 0; text-align: left; }
.task-form label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--on-felt); }
.task-form input { font: 400 16px var(--body); padding: 12px 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--felt-line); background: rgba(255,255,255,.06); color: #fff; }
.task-err { margin: 0; color: #ffb4b4; font-size: 14px; min-height: 18px; }
.task-note { color: #ffb4b4 !important; }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 70% 60% at 30% 0%, rgba(255,255,255,.12), transparent 70%),
    radial-gradient(ellipse 90% 80% at 80% 110%, rgba(0,0,0,.28), transparent 70%),
    var(--felt);
  color: var(--on-felt);
}
.hero::after {
  /* table rail stitching */
  content: ""; position: absolute; inset: auto 0 0 0; height: 10px;
  background: repeating-linear-gradient(90deg, var(--chip-gold) 0 18px, transparent 18px 30px);
  opacity: .55;
}
.hero .wrap {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center;
  padding-block: 84px 96px;
}
.hero h1 {
  margin: 0 0 22px;
  font: 800 clamp(42px, 6.4vw, 78px)/0.98 var(--display);
  letter-spacing: -.035em;
  text-wrap: balance;
}
.hero-lede { margin: 0 0 32px; max-width: 34ch; font-size: 19px; color: var(--on-felt-soft); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 34px 0 0; padding: 0; list-style: none; font-size: 15px; color: var(--on-felt-soft); }
.hero-facts li { display: flex; align-items: center; gap: 8px; }
.hero-facts li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--chip-green); }

/* the receipt: what the house keeps */
.receipt {
  background: var(--felt-deep);
  border-radius: var(--radius-lg);
  padding: 28px 28px 22px;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.6), inset 0 0 0 1px var(--felt-line);
}
.receipt h2 { margin: 0 0 4px; font: 700 22px/1.2 var(--display); letter-spacing: -.01em; }
.receipt-sub { margin: 0 0 20px; font-size: 14px; color: var(--on-felt-soft); }
.edge-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.edge-row { display: grid; grid-template-columns: minmax(0, 11.5em) 1fr 4.2em; gap: 12px; align-items: center; font-size: 15px; }
.edge-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.edge-track { height: 14px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; }
.edge-bar {
  display: block; height: 100%; min-width: 5px; border-radius: 999px;
  transform-origin: left; transform: scaleX(0);
  animation: grow .9s cubic-bezier(.2,.8,.2,1) forwards;
}
.edge-bar[data-tier="low"] { background: var(--chip-green); }
.edge-bar[data-tier="mid"] { background: var(--chip-gold); }
.edge-bar[data-tier="high"] { background: var(--chip-red); }
.edge-val { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
@keyframes grow { to { transform: scaleX(1); } }
.receipt-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 20px 0 0; padding-top: 16px; border-top: 1px dashed var(--felt-line); font-size: 13px; color: var(--on-felt-soft); }
.receipt-key span { display: inline-flex; align-items: center; gap: 6px; }
.receipt-key i { width: 10px; height: 10px; border-radius: 50%; }

@media (max-width: 920px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 40px; padding-block: 56px 72px; }
}
@media (max-width: 480px) {
  .receipt { padding: 22px 18px 18px; }
  .edge-row { grid-template-columns: minmax(0, 8.6em) 1fr 3.8em; gap: 8px; font-size: 14px; }
  .edge-name { white-space: normal; line-height: 1.25; }
}

/* ---------- sections ---------- */
.section { padding-block: 88px; }
.section-head { max-width: 640px; margin-bottom: 44px; }
.section-head h2 { margin: 0 0 12px; font: 800 clamp(32px, 4.4vw, 50px)/1.04 var(--display); letter-spacing: -.03em; text-wrap: balance; }
.section-head p { margin: 0; color: var(--ink-soft); font-size: 18px; }
@media (max-width: 600px) { .section { padding-block: 60px; } }

/* syllabus */
.days { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.day {
  display: grid; grid-template-columns: 92px minmax(0, 1.5fr) minmax(0, 1fr) auto;
  gap: 28px; align-items: center;
  padding: 26px 0; border-bottom: 1px solid var(--line);
}
.day-num { font: 800 64px/0.9 var(--display); letter-spacing: -.05em; color: var(--felt); font-variant-numeric: tabular-nums; }
.day h3 { margin: 0 0 6px; font: 700 23px/1.2 var(--display); letter-spacing: -.015em; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.day p { margin: 0; color: var(--ink-soft); max-width: 52ch; }
.day-tool { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }
.day-tool svg { flex: none; margin-top: 2px; }
.day-tool strong { display: block; font-weight: 600; }
.day-tool span { color: var(--ink-soft); }
.tag-live { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: #ffe3e3; color: #b3141b; font: 600 13px/1.4 var(--body); }
.tag-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--chip-red); }
.tag-free { padding: 3px 10px; border-radius: 999px; background: #d9f6e7; color: #0a6b40; font: 600 13px/1.4 var(--body); }
@media (max-width: 900px) {
  .day { grid-template-columns: 64px 1fr; gap: 6px 18px; align-items: start; }
  .day-num { font-size: 44px; grid-row: span 3; }
  .day-tool { margin-top: 10px; }
  .day .btn { justify-self: start; margin-top: 12px; }
}

/* lesson flow */
.flow-bg { background: var(--surface); }
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: step; position: relative; }
.flow li { position: relative; padding: 0 24px 0 0; }
.flow-chip {
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 20px;
  font: 800 22px/1 var(--display); color: #fff;
  background: var(--c);
  box-shadow: inset 0 0 0 5px var(--c), inset 0 0 0 7px rgba(255,255,255,.55);
  position: relative; z-index: 1;
}
.flow li:not(:last-child)::after {
  content: ""; position: absolute; top: 29px; left: 58px; right: 0; height: 2px;
  background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px);
}
.flow h3 { margin: 0 0 4px; font: 700 22px/1.2 var(--display); }
.flow .mins { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--felt); }
.flow p { margin: 0; color: var(--ink-soft); font-size: 16px; }
@media (max-width: 860px) {
  .flow { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .flow li::after { display: none; }
}
@media (max-width: 480px) { .flow { grid-template-columns: 1fr; } }

/* promise */
.promise { background: var(--ink); color: #eef6f1; }
.promise .wrap { display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: end; }
.promise blockquote { margin: 0; font: 700 clamp(30px, 4vw, 48px)/1.1 var(--display); letter-spacing: -.025em; text-wrap: balance; }
.promise ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; color: #b7c8bf; }
.promise li { padding-left: 30px; position: relative; }
.promise li::before { content: ""; position: absolute; left: 0; top: .45em; width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--chip-red); }
.promise li.yes::before { border-color: var(--chip-green); }
@media (max-width: 860px) { .promise .wrap { grid-template-columns: 1fr; gap: 36px; } }

/* faq */
.faq { max-width: 780px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative;
  font: 600 19px/1.35 var(--display);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; margin-top: -8px;
  border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: rotate(45deg);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details p { margin: 0 0 22px; color: var(--ink-soft); max-width: 64ch; }

/* cta band + slots */
.slot-band { display: flex; flex-wrap: wrap; gap: 10px; }
.slot-band:empty { display: none; }

/* footer */
.site-footer { background: var(--felt-deep); color: var(--on-felt-soft); padding-block: 48px 40px; font-size: 15px; }
.site-footer .wrap { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: start; }
.age-badge { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 3px solid var(--chip-red); color: var(--on-felt); font: 800 17px/1 var(--display); margin-bottom: 14px; }
.site-footer p { margin: 0 0 10px; max-width: 70ch; }
.site-footer a { color: var(--on-felt); }
.footer-right { display: grid; gap: 10px; justify-items: end; }
@media (max-width: 700px) { .site-footer .wrap { grid-template-columns: 1fr; } .footer-right { justify-items: start; } }

/* age gate */
.gate { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(4, 26, 18, .82); backdrop-filter: blur(6px); }
.gate[hidden] { display: none; }
.gate-box { width: min(440px, 100%); background: var(--surface); border-radius: var(--radius-lg); padding: 32px 28px 26px; text-align: center; }
.gate-box .age-badge { color: var(--ink); width: 64px; height: 64px; font-size: 21px; }
.gate-box h2 { margin: 0 0 8px; font: 800 28px/1.1 var(--display); letter-spacing: -.02em; }
.gate-box p { margin: 0 0 24px; color: var(--ink-soft); font-size: 16px; }
.gate-actions { display: grid; gap: 10px; }
.gate-actions .btn-plain { background: none; border: 0; color: var(--ink-soft); font: 500 15px var(--body); cursor: pointer; padding: 10px; text-decoration: underline; }

/* ---------- lesson page ---------- */
.lesson-top { background: var(--felt); color: var(--on-felt); padding-block: 44px 40px; }
.crumbs { font-size: 15px; color: var(--on-felt-soft); margin-bottom: 18px; }
.crumbs a { color: var(--on-felt-soft); }
.lesson-top h1 { margin: 0 0 10px; font: 800 clamp(34px, 5vw, 58px)/1 var(--display); letter-spacing: -.03em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.lesson-top h1 .n { color: var(--chip-gold); }
.lesson-top p { margin: 0; max-width: 60ch; color: var(--on-felt-soft); font-size: 18px; }
.lesson-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 44px; padding-block: 44px 80px; }
.video { aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow: hidden; background: var(--felt-deep); }
.video iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-empty { height: 100%; display: grid; place-items: center; text-align: center; color: var(--on-felt-soft); padding: 20px; }
.play-cover {
  width: 100%; height: 100%; border: 0; cursor: pointer; color: var(--on-felt);
  display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center; padding: 20px;
  background: radial-gradient(ellipse 60% 70% at 50% 40%, rgba(255,255,255,.1), transparent 70%), var(--felt-deep);
  font: 500 15px var(--body);
}
.play-cover strong { font: 700 24px/1.2 var(--display); }
.play-cover > span:last-child { color: var(--on-felt-soft); }
.play-dot { width: 76px; height: 76px; border-radius: 50%; background: var(--chip-gold); display: grid; place-items: center; margin-bottom: 8px; transition: transform .15s ease; }
.play-cover:hover .play-dot { transform: scale(1.06); }
.player { position: relative; width: 100%; height: 100%; background: #000; }
.player iframe { width: 100%; height: 100%; border: 0; display: block; }
.player:fullscreen { width: 100vw; height: 100vh; }
.wm {
  position: absolute; pointer-events: none; user-select: none; z-index: 2;
  color: rgba(255,255,255,.34); text-shadow: 0 0 3px rgba(0,0,0,.55);
  font: 700 clamp(13px, 1.6vw, 20px)/1 var(--body); white-space: nowrap;
}
.wm-move { transform: rotate(-8deg); transition: left 1.2s ease, top 1.2s ease; }
.wm-fixed { right: 14px; top: 12px; font-size: 13px; color: rgba(255,255,255,.28); }
.fs-btn { position: absolute; right: 10px; bottom: 54px; z-index: 3; width: 40px; height: 40px; border-radius: 10px; border: 0; background: rgba(0,0,0,.45); cursor: pointer; display: grid; place-items: center; }
.fs-btn:hover { background: rgba(0,0,0,.7); }
.plays-left { margin: 10px 0 0; font-size: 14px; color: var(--ink-soft); }
#lesson .notes, #lesson .lesson-top { user-select: none; -webkit-user-select: none; }
.video-empty strong { display: block; font: 700 22px/1.2 var(--display); color: var(--on-felt); margin-bottom: 6px; }
.notes h2 { font: 700 26px/1.2 var(--display); margin: 40px 0 16px; letter-spacing: -.015em; }
.notes ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; counter-reset: pt; }
.notes li { position: relative; padding: 16px 18px 16px 58px; background: var(--surface); border-radius: var(--radius-sm); border: 1px solid var(--line); counter-increment: pt; }
.notes li::before { content: counter(pt); position: absolute; left: 16px; top: 15px; width: 28px; height: 28px; border-radius: 50%; background: var(--felt); color: #fff; display: grid; place-items: center; font: 700 14px/1 var(--display); }
.lesson-side { display: grid; gap: 20px; align-content: start; }
.side-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; }
.side-card h3 { margin: 0 0 8px; font: 700 18px/1.25 var(--display); }
.side-card p { margin: 0 0 14px; color: var(--ink-soft); font-size: 15px; }
.side-card .muted { font-size: 14px; color: var(--ink-soft); }
.day-nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.day-nav a { display: grid; grid-template-columns: 30px 1fr; gap: 8px; padding: 9px 10px; border-radius: 8px; text-decoration: none; font-size: 15px; }
.day-nav a:hover { background: var(--page); }
.day-nav a[aria-current="page"] { background: var(--felt); color: #fff; }
.day-nav b { font-family: var(--display); font-variant-numeric: tabular-nums; }
.pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 36px; flex-wrap: wrap; }
@media (max-width: 920px) { .lesson-body { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .edge-bar { transform: none; }
}