/* Give Spark — first draft
   Palette: ~65% white, 25% charcoal, 10% yellow */
:root {
  --ink: #1A1A1A;
  --charcoal: #2B2B2B;
  --paper: #FFFFFF;
  --mist: #F4F4F2;
  --line: #E4E4E0;
  --grey: #5E5E5A;
  --yellow: #F5C518;
  --yellow-soft: #FDF3C8;
  --grid: rgba(26, 26, 26, 0.05);

  --display: "Inter Tight", "Inter", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
  --hand: "Caveat", "Comic Sans MS", cursive;

  --wrap: 1440px;
  --gutter: clamp(16px, 4vw, 48px);
  --radius: 6px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Type ---------- */
h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 0;
}
h1 { font-size: clamp(56px, 9vw, 128px); }
h2 { font-size: clamp(36px, 5vw, 64px); }
h3 { font-size: clamp(22px, 2vw, 26px); letter-spacing: -0.02em; line-height: 1.15; }
p { margin: 0 0 1em; }
.lede { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--ink); max-width: 34em; }
.muted { color: var(--grey); }
.eyebrow {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 18px;
}
.eyebrow .num { color: var(--yellow); margin-right: 14px; letter-spacing: 0.05em; font-weight: 800; }
.hand { font-family: var(--hand); font-weight: 500; line-height: 1.1; }
.mark {
  background: var(--yellow);
  padding: 0 0.12em;
  margin-left: -0.12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.underline-y {
  text-decoration: none;
  background-image: linear-gradient(var(--yellow), var(--yellow));
  background-size: 100% 4px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 4px;
  font-weight: 600;
  transition: background-size .25s ease;
}
.underline-y:hover { background-size: 100% 100%; }
.bar { display: block; width: 56px; height: 6px; background: var(--yellow); margin: 22px 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--body); font-weight: 600; font-size: 16px;
  padding: 14px 26px;
  border-radius: var(--radius);
  border: 2px solid var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, color .15s ease;
  background: transparent; color: var(--ink);
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.btn-primary:hover { background: #ffd43b; border-color: #ffd43b; }
.btn-dark { background: var(--ink); color: var(--paper); }
.btn-light { border-color: var(--paper); color: var(--paper); }
.btn-light:hover { background: var(--paper); color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.96);
  backdrop-filter: saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.site-header.scrolled { border-color: var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 84px; }
.logo img { height: 58px; width: auto; }
.nav { display: flex; align-items: center; gap: 36px; }
.nav a { text-decoration: none; font-size: 15px; font-weight: 500; }
.nav a:not(.btn):hover, .nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--yellow); }
.nav .btn { padding: 10px 22px; font-size: 15px; }
.nav-tools { display: flex; align-items: center; gap: 18px; }
.basket { position: relative; display: inline-flex; text-decoration: none; }
.basket svg { width: 24px; height: 24px; }
.basket .count {
  position: absolute; top: -6px; right: -9px;
  background: var(--yellow); color: var(--ink);
  font-size: 11px; font-weight: 700; border-radius: 99px;
  min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 4px;
}
.menu-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.menu-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: 40px 0 64px; }
.hero .wrap { display: grid; grid-template-columns: 1fr 1.2fr; gap: 36px; align-items: stretch; }
.hero h1 { margin-bottom: 30px; }
.hero h1 .mark { display: inline-block; padding: 0.02em 0.12em 0.06em; }
.hero .lede { margin-bottom: 34px; max-width: 26em; }
.hero-media { position: relative; height: 100%; min-height: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; border-radius: var(--radius); mix-blend-mode: multiply; }
@media (max-width: 1080px) { .hero-media { height: auto; } .hero-media img { height: auto; } }
.note {
  position: absolute;
  font-family: var(--hand);
  font-size: clamp(22px, 2.4vw, 32px);
  color: var(--ink);
  transform: rotate(-8deg);
  white-space: nowrap;
}
.note svg { display: block; margin: 4px 0 0 30px; width: 34px; height: 44px; }
.hero .note { top: -6px; left: 4%; }

/* ---------- Sections ---------- */
section { position: relative; }
.section { padding: clamp(72px, 9vw, 128px) 0; }
.section-tight { padding: clamp(48px, 6vw, 80px) 0; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 48px; flex-wrap: wrap; }
.section-head p { max-width: 30em; margin: 0; color: var(--grey); }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
.dark { background: var(--charcoal); color: var(--paper); }
.dark .muted { color: #BDBDB8; }
.dark .eyebrow { color: var(--paper); }
.mist { background: var(--mist); }
.gridpaper {
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* ---------- Collections (01 02 03) ---------- */
.collections { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 -36px; }
.collection { padding: 8px 36px 12px; border-left: 1px solid var(--line); text-decoration: none; display: grid; grid-template-rows: 64px auto 1fr auto; align-content: start; }
.collection .eyebrow { align-self: start; }
.collection:first-child { border-left: 0; }
.collection .img { aspect-ratio: 1 / 1; overflow: hidden; margin: 6px 0 22px; }
.collection .img img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s ease; mix-blend-mode: multiply; }
.collection:hover .img img { transform: scale(1.04) rotate(-1deg); }
.collection p { font-size: 18px; margin-bottom: 12px; }

/* ---------- Product cards ---------- */
.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.card { display: flex; flex-direction: column; text-decoration: none; }
.card .img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--mist); border-radius: var(--radius); position: relative; }
.card .img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card:hover .img img { transform: scale(1.04); }
.card .peek {
  position: absolute; left: 12px; bottom: 12px;
  background: var(--paper); font-size: 13px; font-weight: 600;
  padding: 6px 12px; border-radius: 99px;
  opacity: 0; transform: translateY(6px); transition: all .2s ease;
}
.card:hover .peek { opacity: 1; transform: none; }
.card .meta { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 8px; }
.tag {
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  padding: 3px 10px; border-radius: 99px; border: 1px solid var(--line); color: var(--grey);
  white-space: nowrap;
}
.tag.y { background: var(--yellow-soft); border-color: transparent; color: var(--ink); }
.card h3 { font-size: 21px; margin-bottom: 6px; }
.card .sub { font-size: 15px; color: var(--grey); margin-bottom: 14px; }
.card .foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid var(--line); }
.price { font-weight: 700; font-size: 17px; }
.card .foot .underline-y { font-size: 15px; }

/* ---------- Make thinking visible (lesson demo) ---------- */
.visible-head { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: end; margin-bottom: 56px; }
.visible-head .hand-col { font-family: var(--hand); font-size: clamp(30px, 3vw, 42px); line-height: 1.25; transform: rotate(-3deg); justify-self: end; }
.visible-head .hand-col .scribble { display: block; width: 150px; height: 14px; margin-top: 4px; }
.demo-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,.2); }
.demo-tab {
  text-align: left; background: none; border: 0; color: #BDBDB8; cursor: pointer;
  padding: 20px 20px 22px 0; font: inherit; border-top: 4px solid transparent; margin-top: -1px;
  transition: color .2s ease, border-color .2s ease;
}
.demo-tab .n { display: block; font-family: var(--display); font-weight: 800; font-size: 15px; color: var(--yellow); margin-bottom: 4px; }
.demo-tab .t { font-weight: 600; font-size: 17px; }
.demo-tab[aria-selected="true"] { color: var(--paper); border-top-color: var(--yellow); }
.demo-panels { margin-top: 36px; }
.demo-panel { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; }
.demo-panel[hidden] { display: none; }
.demo-panel .img { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; background: #3a3a3a; }
.demo-panel .img img { width: 100%; height: 100%; object-fit: cover; }
.demo-panel h3 { font-size: clamp(28px, 3vw, 40px); margin-bottom: 18px; }
.qcard {
  display: inline-block; background: var(--paper); color: var(--ink);
  font-family: var(--hand); font-size: 30px; line-height: 1.15;
  padding: 18px 26px; border-radius: 4px; transform: rotate(-2deg);
  box-shadow: 0 10px 30px rgba(0,0,0,.25); margin-bottom: 22px;
}
.demo-panel ul { padding: 0; margin: 0 0 22px; list-style: none; }
.demo-panel li { padding: 10px 0 10px 28px; position: relative; border-bottom: 1px solid rgba(255,255,255,.12); }
.demo-panel li::before { content: ""; position: absolute; left: 0; top: 20px; width: 12px; height: 4px; background: var(--yellow); }
.teacher-says { font-size: 15px; color: #BDBDB8; border-left: 3px solid var(--yellow); padding-left: 14px; }
.teacher-says b { color: var(--paper); font-weight: 600; }

/* ---------- Everything you need ---------- */
.kit { display: grid; grid-template-columns: 1.5fr 1fr; gap: 56px; align-items: center; }
.kit-img { position: relative; }
.kit-img img { border-radius: var(--radius); }
.kit-img .note { right: -10px; bottom: -40px; transform: rotate(-4deg); }
.kit-list { list-style: none; margin: 28px 0 32px; padding: 0; counter-reset: k; }
.kit-list li { display: grid; grid-template-columns: 44px 1fr; gap: 10px; padding: 16px 0; border-top: 1px solid var(--line); counter-increment: k; }
.kit-list li::before { content: counter(k, decimal-leading-zero); font-family: var(--display); font-weight: 800; color: var(--yellow); font-size: 18px; }
.kit-list b { display: block; font-weight: 600; }
.kit-list span { color: var(--grey); font-size: 15px; }

/* ---------- Reviews ---------- */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.review { padding: 32px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); display: flex; flex-direction: column; }
.review blockquote { margin: 0 0 24px; font-size: 19px; line-height: 1.5; }
.review blockquote::before { content: "\201C"; display: block; font-family: var(--display); font-weight: 800; font-size: 64px; line-height: .6; color: var(--yellow); margin-bottom: 14px; }
.review cite { margin-top: auto; font-style: normal; font-size: 14px; color: var(--grey); }
.review cite b { color: var(--ink); display: block; font-size: 15px; }
.placeholder-flag {
  display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  background: var(--yellow-soft); padding: 4px 10px; border-radius: 4px; margin-bottom: 18px;
}

/* ---------- Split (approach teaser, try a lesson) ---------- */
.split { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: center; }
.split.flip { grid-template-columns: 1.2fr 1fr; }
.split img { border-radius: var(--radius); }
.split h2 { margin-bottom: 22px; }

.steps { list-style: none; padding: 0; margin: 26px 0 30px; }
.steps li { padding: 12px 0; border-top: 1px solid var(--line); display: flex; gap: 16px; }
.steps li b { font-family: var(--display); font-weight: 800; color: var(--yellow); min-width: 28px; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--yellow); }
.cta-band .wrap { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; }
.cta-band img { border-radius: var(--radius); mix-blend-mode: multiply; }
.cta-band .btn-dark:hover { background: #000; }

/* ---------- Signup ---------- */
.signup { display: flex; gap: 10px; flex-wrap: wrap; max-width: 520px; margin-top: 22px; }
.signup input, .signup select {
  flex: 1 1 200px; font: inherit; font-size: 16px; padding: 14px 16px; border: 2px solid var(--ink); border-radius: var(--radius); background: var(--paper);
}
.signup input:focus, .signup select:focus { outline: 3px solid var(--yellow); outline-offset: 1px; }
.form-note { font-size: 13px; color: var(--grey); margin-top: 10px; }

/* ---------- Page header (inner pages) ---------- */
.page-head { padding: 40px 0 40px; }
.page-head .wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.page-head h1 { font-size: clamp(52px, 7.5vw, 104px); margin-bottom: 20px; }
.page-head h1 .mark { padding: 0 0.1em 0.04em; }
.page-head img { width: 100%; max-width: 520px; height: auto; justify-self: end; mix-blend-mode: multiply; }
.page-head h1.h1-long { font-size: clamp(44px, 6vw, 84px); }
.page-head h1.h1-two { font-size: clamp(40px, 5.2vw, 76px); white-space: nowrap; }
@media (max-width: 560px) { .page-head h1.h1-two { white-space: normal; } }
.promise { font-family: var(--hand); font-size: 28px; display: inline-block; margin-top: 4px; }

/* ---------- Filters ---------- */
.filters { position: sticky; top: 84px; z-index: 10; background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.filters .wrap { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; }
.filter-group { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.filter-group > span { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); margin-right: 4px; }
.chip {
  font: inherit; font-size: 14px; font-weight: 500; padding: 7px 14px; border-radius: 99px;
  border: 1.5px solid var(--line); background: var(--paper); cursor: pointer; transition: all .15s ease;
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.search { margin-left: auto; position: relative; }
.search input { font: inherit; font-size: 15px; padding: 9px 14px 9px 36px; border: 1.5px solid var(--line); border-radius: 99px; width: 220px; }
.search input:focus { outline: none; border-color: var(--ink); }
.search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--grey); }
.result-count { font-size: 14px; color: var(--grey); margin: 28px 0 20px; }
.empty { padding: 40px 0; color: var(--grey); }

.pillars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.pillar { border-top: 4px solid var(--yellow); padding-top: 16px; }
.pillar b { display: block; font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; margin-bottom: 6px; }
.pillar span { font-size: 15px; color: var(--grey); }
.dark .pillar span { color: #BDBDB8; }

/* ---------- Product page ---------- */
.crumbs { font-size: 14px; color: var(--grey); padding-top: 28px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.product-top { display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; padding: 28px 0 40px; align-items: start; }
.gallery-main { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/10; background: var(--mist); }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 10px; }
.thumbs button { padding: 0; border: 2px solid transparent; border-radius: 4px; overflow: hidden; cursor: pointer; aspect-ratio: 4/3; background: var(--mist); }
.thumbs button[aria-current="true"] { border-color: var(--yellow); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }
.buy-box { position: sticky; top: 108px; }
.buy-box h1 { font-size: clamp(36px, 3.6vw, 52px); margin: 10px 0 12px; }
.buy-box .price-row { display: flex; align-items: baseline; gap: 12px; margin: 22px 0; }
.buy-box .price { font-size: 32px; font-family: var(--display); font-weight: 800; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line); margin: 26px 0; }
.facts div { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.facts div:nth-child(odd) { padding-right: 12px; }
.facts dt { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); }
.facts dd { margin: 2px 0 0; font-weight: 500; }
.trust { font-size: 14px; color: var(--grey); margin-top: 16px; display: grid; gap: 6px; }
.trust span::before { content: "— "; color: var(--yellow); font-weight: 800; }

.qnav { position: sticky; top: 84px; z-index: 9; background: var(--paper); border-bottom: 1px solid var(--line); }
.qnav .wrap { display: flex; gap: 26px; overflow-x: auto; padding-top: 14px; padding-bottom: 14px; scrollbar-width: none; }
.qnav a { white-space: nowrap; text-decoration: none; font-size: 14px; font-weight: 500; color: var(--grey); }
.qnav a:hover { color: var(--ink); }
.qblock { display: grid; grid-template-columns: 440px 1fr; gap: 56px; padding: 40px 0; border-top: 1px solid var(--line); scroll-margin-top: 140px; }
.qblock:first-child { border-top: 0; }
.qblock .q { font-family: var(--display); font-weight: 800; font-size: 28px; letter-spacing: -0.02em; line-height: 1.15; white-space: nowrap; }
.qblock .q small { display: block; font-family: var(--body); font-weight: 600; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--yellow); margin-bottom: 10px; }
.qblock ul { padding-left: 20px; margin: 0 0 1em; }
.qblock li { margin-bottom: 8px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.arc { list-style: none; padding: 0; margin: 0; counter-reset: l; }
.arc li { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); align-items: baseline; counter-increment: l; }
.arc li::before { content: "L" counter(l); font-family: var(--display); font-weight: 800; color: var(--grey); }
.arc li b { font-weight: 600; }
.arc li .move { font-size: 13px; color: var(--grey); }
.arc li.open { background: var(--yellow-soft); margin: 0 -16px; padding-left: 16px; padding-right: 16px; border-radius: 4px; }
.preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.preview-grid figure { margin: 0; }
.preview-grid img { border-radius: 4px; aspect-ratio: 4/3; object-fit: cover; width: 100%; border: 1px solid var(--line); }
.preview-grid figcaption { font-size: 14px; color: var(--grey); margin-top: 8px; }

/* ---------- Approach page ---------- */
.commitment { display: grid; grid-template-columns: 120px 1fr 1fr; gap: 48px; padding: 72px 0; border-top: 1px solid var(--line); align-items: center; }
.commitment .big { font-family: var(--display); font-weight: 800; font-size: 96px; line-height: 1; color: var(--yellow); letter-spacing: -0.05em; }
.commitment h2 { font-size: clamp(30px, 3.4vw, 44px); margin-bottom: 18px; }
.example { background: var(--mist); border-radius: var(--radius); overflow: hidden; }
.example img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.example .cap { padding: 18px 22px; font-size: 15px; }
.example .cap b { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); margin-bottom: 4px; }

/* ---------- Help ---------- */
.faq { max-width: 820px; }
.faq details { border-top: 1px solid var(--line); padding: 20px 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 600; font-size: 19px; list-style: none; display: flex; justify-content: space-between; gap: 20px; }
.faq summary::after { content: "+"; font-family: var(--display); font-weight: 800; font-size: 24px; line-height: 1; color: var(--ink); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 14px 0 0; color: var(--grey); }
.faq-group { margin-bottom: 56px; }
.faq-group h2 { font-size: 30px; margin-bottom: 18px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--charcoal); color: var(--paper); padding: 72px 0 36px; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,.14); }
.footer-word { font-family: var(--display); font-weight: 800; font-size: 44px; letter-spacing: -0.04em; line-height: 1; margin-bottom: 14px; }
.footer-word .mark { color: var(--ink); }
.site-footer h4 { font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 16px; color: #BDBDB8; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.site-footer a { text-decoration: none; font-size: 15px; }
.site-footer a:hover { color: var(--yellow); }
.footer-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-top: 28px; font-size: 13px; color: #BDBDB8; }

/* ---------- Basket drawer ---------- */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(26,26,26,.4); z-index: 90; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%); background: var(--paper); z-index: 100; transform: translateX(100%); transition: transform .3s ease; display: flex; flex-direction: column; }
.drawer-open .drawer { transform: none; }
.drawer-open .drawer-backdrop { opacity: 1; pointer-events: auto; }
.drawer header { display: flex; justify-content: space-between; align-items: center; padding: 24px 28px; border-bottom: 1px solid var(--line); }
.drawer header h3 { font-size: 24px; }
.drawer .close { background: none; border: 0; font-size: 28px; cursor: pointer; line-height: 1; }
.drawer .items { flex: 1; overflow-y: auto; padding: 8px 28px; }
.drawer .item { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); align-items: center; }
.drawer .item img { border-radius: 4px; aspect-ratio: 4/3; object-fit: cover; }
.drawer .item b { display: block; font-size: 15px; }
.drawer .item small { color: var(--grey); }
.drawer .item button { background: none; border: 0; color: var(--grey); cursor: pointer; font-size: 13px; text-decoration: underline; }
.drawer footer { padding: 24px 28px; border-top: 1px solid var(--line); }
.drawer footer .total { display: flex; justify-content: space-between; font-weight: 700; font-size: 18px; margin-bottom: 16px; }
.drawer footer .btn { width: 100%; }

.toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 30px); background: var(--ink); color: var(--paper); padding: 12px 20px; border-radius: 99px; font-size: 15px; opacity: 0; transition: all .25s ease; z-index: 120; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { scroll-behavior: auto !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .products { grid-template-columns: repeat(2, 1fr); }
  .pillars { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .nav { display: none; }
  .menu-toggle { display: block; }
  .menu-open .nav {
    display: flex; flex-direction: column; align-items: flex-start; gap: 22px;
    position: absolute; top: 84px; left: 0; right: 0; background: var(--paper);
    padding: 24px var(--gutter) 32px; border-bottom: 1px solid var(--line);
  }
  .menu-open .nav a { font-size: 20px; }
  .hero { padding-top: 24px; }
  .hero .wrap, .split, .split.flip, .kit, .cta-band .wrap, .visible-head, .page-head .wrap, .product-top, .qblock, .commitment, .demo-panel { grid-template-columns: 1fr; }
  .hero-media { margin: 8px -8px 0; }
  .hero .note { top: -4px; left: 8px; font-size: 20px; }
  .collections { grid-template-columns: 1fr; margin: 0; }
  .collection, .collection:first-child, .collection:last-child {
    border-left: 0; border-top: 1px solid var(--line); padding: 14px 0; margin: 0;
    display: grid; grid-template-columns: 92px 1fr; grid-template-rows: auto auto auto; column-gap: 18px; align-items: center;
  }
  .collection:last-child { border-bottom: 1px solid var(--line); }
  .collection .img { grid-row: 1 / 4; grid-column: 1; aspect-ratio: 1 / 1; margin: 0; }
  .collection .eyebrow { margin: 0 0 2px; font-size: 12px; }
  .collection p { font-size: 15px; margin: 0 0 4px; }
  .collection .underline-y { font-size: 14px; justify-self: start; }
  .reviews { grid-template-columns: 1fr; }
  .visible-head .hand-col { justify-self: start; }
  .demo-tabs { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .page-head img { justify-self: start; max-width: 260px; }
  .search { margin-left: 0; width: 100%; }
  .search input { width: 100%; }
  .filters { position: static; }
  .buy-box { position: static; }
  .commitment .big { font-size: 64px; }
  .commitment { gap: 24px; padding: 48px 0; }
  .qblock { gap: 20px; padding: 44px 0; }
  .qblock .q { white-space: normal; }
  .two-col, .preview-grid { grid-template-columns: 1fr; }
  .split img { order: -1; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .products { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr 1fr; }
  .logo img { height: 48px; }
  .btn-row .btn { flex: 1 1 100%; }
  .footer-top { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; }
  .arc li { grid-template-columns: 44px 1fr; }
  .arc li .move { grid-column: 2; }
}
[hidden] { display: none !important; }


/* ===== Draft 2 additions ===== */
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 6px var(--yellow); border-radius: 2px; }
.dark :focus-visible, .site-footer :focus-visible { outline-color: var(--paper); }
.skip { position: absolute; left: 12px; top: -60px; background: var(--yellow); color: var(--ink); padding: 10px 16px; z-index: 200; font-weight: 600; border-radius: 4px; }
.skip:focus { top: 12px; }
.star { color: #C99A1E; }
.dark .star, .site-footer .star { color: var(--yellow); }
.trust-line { margin-top: 22px; font-size: 15px; color: var(--grey); }
.trust-line b { color: var(--ink); }

/* cards */
.card .img .badge { position: absolute; top: 12px; left: 12px; background: var(--yellow); color: var(--ink); font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 99px; }
.card-body { display: flex; flex-direction: column; flex: 1; }
.card .foot { gap: 10px; flex-wrap: wrap; }
.rating { font-size: 14px; font-weight: 600; white-space: nowrap; }
.formats { font-size: 13px; color: var(--grey); margin-top: 8px; }
.card-wide { grid-column: span 2; }
.card-wide .img { aspect-ratio: 16 / 9; }
.card-wide .img img { object-position: center 40%; }
.card-wide h3 { font-size: 26px; }
.card-wide .sub { font-size: 16px; max-width: 36em; }

/* catalogue groups */
.cat-group { padding: 48px 0 8px; }
.cat-group:first-child { padding-top: 8px; }
.cat-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-top: 3px solid var(--ink); padding-top: 14px; margin-bottom: 24px; }
.cat-head h2 { font-size: clamp(28px, 3vw, 38px); }
.cat-note { margin: -12px 0 24px; }
.products-3 { grid-template-columns: repeat(3, 1fr); }
.collection-stat { font-weight: 600; margin-top: 16px; }

/* format picker */
.format-pick { border: 0; padding: 0; margin: 22px 0; display: grid; gap: 8px; }
.format-pick legend { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); margin-bottom: 8px; }
.format-pick label { display: block; cursor: pointer; }
.format-pick input { position: absolute; opacity: 0; }
.format-pick label > span { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; padding: 12px 16px; border: 1.5px solid var(--line); border-radius: var(--radius); transition: border-color .15s ease; }
.format-pick input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--yellow-soft); }
.format-pick input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }
.fp-price { font-weight: 700; }
.fp-price s, .price-row s { font-weight: 400; color: var(--grey); font-size: 14px; }
.price-row .price { font-size: 32px; font-family: var(--display); font-weight: 800; }

/* reviews */
.review { margin: 0; }
.review-topic { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); margin: 0 0 14px; }
.review figcaption { margin-top: auto; font-size: 14px; color: var(--grey); }
.review figcaption b { color: var(--ink); display: block; font-size: 15px; }
.reviews-2 { grid-template-columns: 1fr 1fr; }
.review-stat { font-family: var(--display); font-weight: 800; font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -0.02em; }

/* lesson sequence, visible all at once */
.steps4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: s; }
.step { position: relative; }
.step .img { aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: #fff; margin-bottom: 18px; }
.step .img img { width: 100%; height: 100%; object-fit: cover; }
.step .img.contain img { object-fit: contain; }
.step .n { font-family: var(--display); font-weight: 800; color: var(--yellow); font-size: 15px; display: block; margin-bottom: 4px; }
.step h3 { font-size: 21px; margin-bottom: 10px; }
.step p { font-size: 15px; color: #D6D6D2; margin-bottom: 10px; }
.step .qcard { font-size: 22px; padding: 12px 16px; margin: 0 0 12px; }

.fixed-note { margin-top: 36px; padding: 18px 22px; border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius); font-size: 15px; color: #D6D6D2; }
.fixed-note b { color: var(--paper); }

/* footer */
.foot-h { font-family: var(--body); font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 16px; color: #E4E4E0; }
.foot-note { color: #E4E4E0; max-width: 22em; }
.footer-base { color: #E4E4E0; }
.dark .muted { color: #D6D6D2; }

@media (max-width: 1080px) {
  .steps4 { grid-template-columns: repeat(2, 1fr); }
  .step::after { display: none; }
  .card-wide { grid-column: span 2; }
}
@media (max-width: 900px) {
  .reviews-2, .products-3 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .steps4 { grid-template-columns: 1fr; }
  .card-wide { grid-column: span 1; padding: 12px; }
  .cat-group { padding-top: 36px; }
}

/* product mockup grid (homepage) */
.kit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.kit-grid figure { margin: 0; }
.kit-grid img { border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.kit-grid figcaption { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); margin-top: 8px; }
.thumbs { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 560px) { .kit-grid { grid-template-columns: 1fr 1fr; gap: 10px; } }

/* lesson grid (How does the learning develop?) */
.qblock-wide { grid-template-columns: 1fr; gap: 20px; }
.qblock-wide .q { max-width: none; white-space: nowrap; }
.lesson-hint { font-size: 14px; margin: 8px 0 0; }
.lesson-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px 20px; counter-reset: none; }
.lesson { cursor: pointer; outline: none; }
.lesson-img { position: relative; aspect-ratio: 900 / 585; border-radius: var(--radius); overflow: hidden; background: var(--mist); }
.lesson-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.lesson-q {
  position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 14px;
  background: linear-gradient(to top, rgba(26,26,26,.92) 0%, rgba(26,26,26,.75) 55%, rgba(26,26,26,.35) 100%);
  color: var(--paper); font-family: var(--hand); font-size: 22px; line-height: 1.15;
  opacity: 0; transition: opacity .2s ease;
}
.lesson-q span { display: block; }
.lesson:hover .lesson-q, .lesson:focus-visible .lesson-q, .lesson.open .lesson-q { opacity: 1; }
.lesson:hover .lesson-img img, .lesson:focus-visible .lesson-img img, .lesson.open .lesson-img img { transform: scale(1.04); }
.lesson:focus-visible .lesson-img { outline: 3px solid var(--ink); outline-offset: 3px; }
.lesson-meta { display: flex; gap: 10px; align-items: baseline; margin-top: 12px; }
.lesson-n { font-family: var(--display); font-weight: 800; color: var(--yellow); font-size: 15px; }
.lesson-meta b { font-weight: 600; font-size: 15px; line-height: 1.25; }
.lesson-lab { font-size: 13px; color: var(--ink); margin-top: 4px; padding-left: 30px; }
@media (max-width: 1080px) { .lesson-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .lesson-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; } .lesson-q { font-size: 18px; padding: 10px; } .lesson-lab { padding-left: 0; } }

/* end-of-unit project feature box */
.project-box { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; background: var(--mist); border-radius: var(--radius); overflow: hidden; }
.project-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.project-text { padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; }
.project-text h3 { font-size: clamp(28px, 3vw, 40px); margin-bottom: 16px; }
.project-text p:last-child { margin-bottom: 0; }
@media (max-width: 900px) { .project-box { grid-template-columns: 1fr; } }

/* product page v2 */
.facts-1 { grid-template-columns: 1fr; }
.facts-1 div { padding-right: 0; }
.facts dd { line-height: 1.45; }
.rgroups { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; }
.rgroup { margin: 0; }
.rgroup-media { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--mist); aspect-ratio: 16 / 9; }
.rgroup-media img, .rgroup-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.rgroup-media .rgroup-second { position: absolute; right: 12px; bottom: 12px; width: 38%; height: auto; border-radius: 4px; box-shadow: 0 8px 24px rgba(0,0,0,.18); border: 2px solid #fff; }
.rgroup figcaption { padding-top: 14px; }
.rgroup figcaption b { display: block; font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; margin-bottom: 6px; }
.rgroup figcaption p { font-size: 15px; color: var(--grey); margin: 0; }
.rgroup-cap { font-size: 13px !important; margin-top: 6px !important; }
.inventory, .made { margin-top: 28px; border-top: 1px solid var(--line); padding-top: 14px; }
.inventory summary, .made summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; }
.inventory summary::after, .made summary::after { content: "+"; font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1; }
.inventory[open] summary::after, .made[open] summary::after { content: "–"; }
.inventory ul { margin: 14px 0 0; padding-left: 20px; columns: 2; column-gap: 32px; }
.inventory li { break-inside: avoid; margin-bottom: 8px; }
.made { margin: 24px 0 56px; }
.made p { color: var(--grey); font-size: 15px; margin: 12px 0 0; }
.closing { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; background: var(--yellow); border-radius: var(--radius); padding: clamp(28px, 4vw, 56px); margin-top: 24px; }
.closing h2 { font-size: clamp(30px, 3.6vw, 48px); margin-bottom: 22px; }
.closing img { border-radius: var(--radius); width: 100%; }
.closing .btn-dark:hover { background: #000; }
@media (max-width: 900px) { .rgroups { grid-template-columns: 1fr; } .closing { grid-template-columns: 1fr; } .inventory ul { columns: 1; } .lesson-dq { padding-left: 0; font-size: 17px; } }

.dl { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; font-weight: 600; text-decoration: none; padding: 12px 18px; border: 1.5px solid var(--line); border-radius: var(--radius); transition: border-color .15s ease; }
.dl:hover { border-color: var(--ink); }
.dl svg { width: 18px; height: 18px; }

.facts-2 { grid-template-columns: auto 1fr; column-gap: 28px; }
.facts-2 dd { white-space: nowrap; }
.facts-2 .span2 dd { white-space: normal; }
.facts-2 .span2 { grid-column: 1 / -1; }
@media (max-width: 560px) { .facts-2 { grid-template-columns: 1fr; } }


.kit-top { align-items: start; }
.kit-top .kit-list li:first-child { border-top: 0; padding-top: 0; }

/* learning journey: the eight project stages */
.journey { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 24px; }
.journey li { margin: 0; }
.journey img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); display: block; background: var(--mist); }
.journey b { display: flex; gap: 10px; align-items: baseline; margin-top: 12px; font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; }
.journey b span { font-family: var(--body); font-weight: 600; font-size: 12px; letter-spacing: .14em; color: var(--yellow); }
.journey p { font-size: 15px; color: var(--grey); margin: 6px 0 0; }
.reviews-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .journey { grid-template-columns: repeat(2, 1fr); } .reviews-3 { grid-template-columns: 1fr; } }

/* ---------- The PBL Playground ---------- */
.pg-entrances { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.pg-tile { display: block; text-decoration: none; border: 1px solid transparent; border-radius: var(--radius); padding: 22px 24px 20px; background: var(--paper); transition: border-color .2s, transform .2s; }
.pg-tile.c-spark { background: #FBE3DA; } .pg-tile.c-adventure { background: #FDF1C2; } .pg-tile.c-quest { background: #E3EBDD; }
.pg-tile:hover { border-color: var(--ink); transform: translateY(-2px); }
.pg-tile .pg-desc { color: var(--ink); opacity: .75; }
.pg-tile .pg-say { font-family: var(--hand); font-size: 26px; line-height: 1.1; color: var(--ink); margin-bottom: 14px; }
.pg-tile h3 { font-size: 30px; letter-spacing: -0.02em; margin-bottom: 4px; }
.pg-tile .pg-desc { font-size: 15px; color: var(--grey); margin-bottom: 10px; }
.pg-tile .pg-pack { font-size: 14px; color: var(--grey); border-top: 1px solid var(--line); padding-top: 12px; }
.pg-tile .pg-count { display: inline-block; margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--ink); }
.select-wrap { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); }
.select-wrap select { font: 500 14px/1.2 var(--body); letter-spacing: 0; text-transform: none; color: var(--ink); padding: 8px 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--paper); }
.pg-q.c-spark { background: #FBE3DA; } .pg-q.c-adventure { background: #FDF1C2; } .pg-q.c-quest { background: #E3EBDD; }
.card .img.pg-q { display: flex; align-items: flex-end; padding: 20px; color: var(--ink); background: var(--yellow-soft); }
.card .img.pg-q b { font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1.15; letter-spacing: -0.02em; }
.card .img.pg-q.c-spark { background: #FBE3DA; } .card .img.pg-q.c-adventure { background: #FDF1C2; } .card .img.pg-q.c-quest { background: #E3EBDD; }
.card .dev { position: absolute; top: 12px; left: 12px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; background: var(--ink); color: var(--paper); padding: 5px 10px; border-radius: 99px; }
.card .q-line { font-size: 15px; color: var(--ink); margin-bottom: 14px; }
.tag.f-spark { background: #FBE3DA; border-color: transparent; color: var(--ink); }
.tag.f-adventure { background: #FDF1C2; border-color: transparent; color: var(--ink); }
.tag.f-quest { background: #E3EBDD; border-color: transparent; color: var(--ink); }
.seeds { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; margin-top: 44px; }
.seed { position: relative; padding-top: 18px; }
.seed .dot { width: 56px; height: 56px; border-radius: 50%; margin-bottom: 18px; }
.seed b { display: block; font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; margin-bottom: 8px; color: var(--paper); }
.seed p { font-size: 15px; color: #BDBDB8; margin: 0; }
.seed::after { content: "↔"; position: absolute; right: -20px; top: 32px; color: #6a6a66; font-size: 18px; }
.seed:last-child::after { content: "↺"; }
.principles { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 32px; counter-reset: pr; }
.principles li { counter-increment: pr; border-top: 4px solid var(--yellow); padding-top: 16px; }
.principles li::before { content: counter(pr, decimal-leading-zero); display: block; font-size: 13px; font-weight: 600; letter-spacing: .2em; color: var(--yellow); margin-bottom: 8px; }
.principles b { display: block; font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; margin-bottom: 6px; }
.principles span { font-size: 15px; color: var(--grey); }
.unit-projects { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 24px; }
.unit-projects a { display: block; text-decoration: none; padding: 14px 0; border-top: 1px solid var(--line); }
.unit-projects a b { display: block; font-size: 16px; margin-bottom: 2px; }
.unit-projects a span { font-size: 13px; color: var(--grey); }
.journey-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.journey-list li { display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: start; }
.journey-list .dot { width: 44px; height: 44px; border-radius: 50%; margin-top: 2px; }
.journey-list b { display: block; font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: -0.02em; margin-bottom: 2px; }
.journey-list p { margin: 0; color: var(--grey); }
.tpl { background: var(--yellow-soft); border-radius: var(--radius); padding: 18px 20px; font-size: 15px; color: var(--ink); }
.tpl b { font-weight: 600; }
.dev-note { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; background: var(--ink); color: var(--paper); padding: 5px 10px; border-radius: 99px; margin-bottom: 14px; }
@media (max-width: 1080px) { .seeds { grid-template-columns: repeat(3, 1fr); } .seed::after { display: none; } .unit-projects { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .pg-entrances, .principles { grid-template-columns: 1fr; } .seeds { grid-template-columns: 1fr 1fr; } .unit-projects { grid-template-columns: 1fr; } }
.lesson-tpl .lesson-img.pg-q { display: block; padding: 0; }
.lesson-tpl .lesson-q { opacity: 1; background: transparent; color: var(--ink); font-size: 15px; font-weight: 600; }
.lesson-tpl .lesson-lab { color: var(--grey); }

.ingredients { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px 24px; }
.ingredients li { border-top: 1px solid var(--line); padding-top: 18px; }
.ing-dot { display: block; width: 18px; height: 18px; border-radius: 50%; margin-bottom: 14px; }
.ingredients b { display: block; font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; margin-bottom: 6px; }
.ingredients li > span:last-child { font-size: 15px; color: var(--grey); }
@media (max-width: 1080px) { .ingredients { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .ingredients { grid-template-columns: 1fr 1fr; } }

/* ---------- Thinking Tools ---------- */
.page-head-compact { padding: 40px 0 28px; }
.page-head-compact h1.h1-long { font-size: clamp(38px, 4.6vw, 64px); }
.booklet-feature { display: grid; grid-template-columns: 260px 1fr; gap: 48px; align-items: center; }
.booklet-feature img { width: 100%; border-radius: 6px; box-shadow: 0 12px 36px rgba(0,0,0,.12); }
.collection p { min-height: 0; }
@media (max-width: 1080px) and (min-width: 701px) { .collections { grid-template-columns: 1fr 1fr; margin: 0; } .collection { border-left: 0; padding: 8px 0 12px; } }
@media (max-width: 900px) { .booklet-feature { grid-template-columns: 1fr; } .booklet-feature img { max-width: 240px; } }

.card .img.img-contain img { object-fit: contain; padding: 14px; background: var(--mist); }

.filters-pg .wrap { flex-direction: column; align-items: stretch; gap: 12px; }
.filter-row { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.search-wide { width: 100%; max-width: none; }
.search-wide input { width: 100%; }

/* featured full-year bundle above each grade's units (compact: image one third, warm off-white panel, content-driven height) */
.bundle-feature { display: grid; grid-template-columns: 1fr 2fr; gap: 0; text-decoration: none; background: #FAF8F2; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 32px; max-width: 1280px; }
.bundle-feature .bf-img { aspect-ratio: 4 / 3; background: #FAF8F2; }
.bundle-feature .bf-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bundle-feature .bf-body { padding: 40px 44px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.bundle-feature .bf-body .tag { align-self: flex-start; background: var(--paper); }
.bundle-feature h3 { font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -0.02em; }
.bundle-feature p { font-size: 15.5px; color: var(--grey); max-width: none; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1080px) { .bundle-feature p { white-space: normal; } }
.bundle-feature .bf-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.bundle-feature .bf-foot .btn { margin-left: 0; }
.shop-units { font-size: 24px; letter-spacing: -0.02em; margin: 0 0 18px; display: flex; align-items: baseline; gap: 14px; }
.shop-units span { font-family: var(--body); font-weight: 400; font-size: 15px; color: var(--grey); letter-spacing: 0; }
.card[aria-disabled="true"] { cursor: default; }
.card[aria-disabled="true"]:hover .img img { transform: none; }
@media (max-width: 900px) { .bundle-feature { grid-template-columns: 1fr; } }

/* home: two doors */
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.door { text-decoration: none; display: grid; gap: 10px; align-content: start; }
.door .img { aspect-ratio: 4 / 3; overflow: hidden; background: #fff; margin-bottom: 10px; }
.door .img img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s ease; mix-blend-mode: multiply; }
.door:hover .img img { transform: scale(1.03); }
.door h3 { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.15; margin: 0; }
.door p { font-size: 17px; margin: 0; max-width: 34em; }
.door .eyebrow { margin: 0; }
.also { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.also a { text-decoration: none; color: inherit; font-size: 16px; }
.also a .underline-y { margin-left: 8px; white-space: nowrap; }
@media (max-width: 760px) { .doors, .also { grid-template-columns: 1fr; gap: 32px; } }

/* home hub: where are you off to? */
.hub { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px; }
.hub-card { text-decoration: none; color: inherit; display: grid; gap: 8px; align-content: start; padding: 0; }
.hub-card .img { aspect-ratio: 1 / 1; overflow: hidden; background: #fff; margin-bottom: 6px; border-radius: 4px; }
.hub-card .img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .5s ease; }
.hub-card:hover .img img { transform: scale(1.04); }
.hub-card .tag { justify-self: start; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 4px 9px; border: 1px solid var(--ink); border-radius: 999px; }
.hub-card .tag.free { background: var(--yellow); border-color: var(--yellow); }
.hub-card h3 { font-size: 28px; line-height: 1.15; margin: 2px 0 0; }
.hub-card p { font-size: 17px; margin: 0; color: var(--muted, #555); }
.hub-card .go { font-weight: 600; font-size: 15px; margin-top: 2px; }
.hub-card:hover .go { text-decoration: underline; text-decoration-color: var(--yellow); text-underline-offset: 4px; text-decoration-thickness: 3px; }

@media (max-width: 760px) { .hub { grid-template-columns: 1fr 1fr; gap: 20px; } }

/* the Playground area: ink sketch on a warm wash */
.hub-card.pg-area .img { background: #fff; padding: 4%; }
body[data-page="pbl"] .page-head img { max-width: 560px; }

/* Curiosity by Design: Moves, membership, locked routines */
.moves-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.move-card { text-decoration: none; color: inherit; display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; transition: transform .25s ease, box-shadow .25s ease; }
.move-card .art { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.move-card .art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.move-card:hover .art img { transform: scale(1.03); }
.move-card .art .n { position: absolute; left: 14px; top: 14px; width: 36px; height: 36px; border-radius: 50%; background: var(--mv); color: #fff; font-family: var(--display); font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.move-card .body { padding: 18px 22px 22px; display: grid; gap: 8px; align-content: start; }
.move-card h3 { color: var(--mv); }
.move-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,.08); }
.move-card .swatch, .cat-head .swatch, .move-nav .swatch { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--mv); }
.move-card h3 { font-size: 24px; line-height: 1.1; margin: 0; }
.move-card p { font-size: 15px; margin: 0; color: #555; }
.move-card .count { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-top: 6px; color: var(--mv); }
.cat-head h2 { display: flex; align-items: center; gap: 12px; }
.chip[data-tool-move][aria-pressed="true"] { background: var(--mv, var(--ink)); border-color: var(--mv, var(--ink)); color: #fff; }
.card.routine .img { position: relative; }
.card.routine .members { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 6px; background: var(--mv, var(--ink)); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 5px 9px 5px 7px; border-radius: 999px; }
.card.routine .lock { width: 12px; height: 12px; fill: #fff; stroke: #fff; stroke-width: 1.5; }
.card.routine .tag.mv { border-color: var(--mv); color: var(--mv); }
.member-strip { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center; }
.member-strip h2 { font-size: clamp(30px, 3.6vw, 46px); margin-bottom: 12px; }
.member-strip .lede { max-width: 34em; margin: 0; }
.member-cta { display: grid; gap: 12px; justify-items: start; padding: 28px 32px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.member-cta .price { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.member-strip.compact { gap: 32px; }
.move-head { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: start; padding: 28px 0 48px; }
.move-head h1 { font-size: clamp(44px, 6vw, 84px); line-height: .98; letter-spacing: -0.03em; margin: 8px 0 20px; }
.move-head .eyebrow .num { color: var(--mv); }
.move-head .lede { max-width: 32em; }
.playbook { border: 1px solid var(--line); border-top: 8px solid var(--mv); border-radius: var(--radius); padding: 28px 30px; display: grid; gap: 12px; }
.playbook h2 { font-size: 30px; margin: 0; }
.playbook ul { padding-left: 20px; margin: 0; }
.playbook li { margin-bottom: 6px; }
.move-nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; }
.move-nav a { text-decoration: none; color: inherit; font-weight: 700; font-size: 22px; display: grid; gap: 6px; justify-items: start; }
.move-nav a.next { justify-items: end; text-align: right; }
.move-nav a small { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #777; }
.move-nav a.all { font-size: 15px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--yellow); text-underline-offset: 4px; text-decoration-thickness: 3px; }
@media (max-width: 1100px) { .moves-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .moves-grid, .member-strip, .move-head, .move-nav { grid-template-columns: 1fr; } .move-nav a.next { justify-items: start; text-align: left; } }

/* hub: photo at rest, doodle signature on hover */
.hub-card.flip .img { position: relative; }
.hub-card.flip .img img { position: absolute; inset: 0; transition: opacity .45s ease, transform .5s ease; }
.hub-card.flip .img img.alt { opacity: 0; }
.hub-card.flip:hover .img img.alt, .hub-card.flip:focus-visible .img img.alt { opacity: 1; }
.hub-card.flip:hover .img img:not(.alt), .hub-card.flip:focus-visible .img img:not(.alt) { opacity: 0; }
.hub-card.flip:hover .img img { transform: none; }

/* expanded Move page */
.move-head .tagline { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 2.2vw, 30px); color: var(--mv); margin: 0 0 14px; letter-spacing: -0.01em; }
.move-head .btn-row { margin-top: 22px; }
.move-art img { width: 100%; height: auto; border-radius: var(--radius); display: block; }
.understand .eyebrow { margin-bottom: 20px; }
.u-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 56px; align-items: center; margin-bottom: 36px; }
.u-grid .kicker { font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--mv); margin: 0 0 12px; }
.u-grid .statement { font-family: var(--display); font-weight: 700; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.2; letter-spacing: -0.02em; margin: 0; }
.u-grid .heart-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #9a948c; margin: 30px 0 8px; }
.u-grid .heart { font-family: var(--display); font-weight: 700; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.2; color: var(--mv); margin: 0; }
.u-body p { font-size: 17px; line-height: 1.7; margin: 0 0 16px; }
.mpanels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 28px; }
.mpanel { background: var(--mist); border-radius: var(--radius); padding: 24px 26px; }
.mpanel .eyebrow { color: var(--mv); margin-bottom: 10px; }
.mpanel p { font-size: 15.5px; line-height: 1.6; margin: 0; }
.mpanel.dies { background: var(--yellow-soft); }
.mpanel.dies .eyebrow { color: #8A6A00; }
.mstory { border-left: 5px solid var(--mv); padding: 6px 0 6px 28px; max-width: 72ch; }
.mstory .eyebrow { color: var(--mv); margin-bottom: 12px; }
.mstory p { font-size: 17px; line-height: 1.7; margin: 0 0 10px; }
.mstory p em { font-family: var(--display); font-style: normal; font-weight: 700; color: var(--mv); }
.mstory p.last { font-weight: 700; }
.pb-band { display: grid; grid-template-columns: 220px 1fr auto; gap: 36px; align-items: center; background: var(--mv); color: #fff; border-radius: var(--radius); padding: 32px 36px; }
.pb-cover img { width: 100%; border-radius: 6px; box-shadow: 0 14px 34px rgba(0,0,0,.35); display: block; }
.pb-body .eyebrow { color: var(--yellow); }
.pb-body h2 { font-size: clamp(26px, 2.6vw, 34px); margin: 4px 0 10px; color: #fff; }
.pb-body p { font-size: 15.5px; line-height: 1.6; margin: 0 0 12px; max-width: 62ch; color: rgba(255,255,255,.88); }
.pb-body ul { padding-left: 18px; margin: 0; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.92); }
.pb-body li { margin-bottom: 4px; }
.pb-buy { display: grid; gap: 10px; justify-items: start; min-width: 240px; }
.pb-buy .price { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
.pb-buy .form-note { color: rgba(255,255,255,.75); }
.card.routine .rq { font-size: 14px; font-style: italic; color: #777; margin: -4px 0 8px; }
.chooser { margin-top: 48px; border-top: 1px solid var(--line); padding-top: 36px; }
.chooser .eyebrow { color: var(--mv); }
.chooser h3 { font-size: clamp(22px, 2.2vw, 28px); max-width: 30em; margin: 6px 0 20px; }
.ttable { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.ttable .thead, .ttable .trow { display: grid; grid-template-columns: 1.1fr 1fr 2fr; }
.ttable .thead { background: var(--mv); color: #fff; }
.ttable .thead span { padding: 12px 20px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ttable .trow { text-decoration: none; color: inherit; border-top: 1px solid var(--line); transition: background .2s; }
.ttable .trow span { padding: 14px 20px; display: flex; align-items: center; }
.ttable .trow .t { font-weight: 700; color: var(--mv); }
.ttable .trow .k { font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.ttable .trow .w { font-size: 15px; justify-content: space-between; gap: 10px; }
.ttable .trow:hover { background: var(--mv); }
.ttable .trow:hover span { color: #fff; }
.chooser .tip { font-size: 15px; color: #666; margin: 18px 0 0; }
.chooser .tip em { font-style: normal; font-weight: 700; color: var(--mv); }
@media (max-width: 900px) { .u-grid, .mpanels, .pb-band { grid-template-columns: 1fr; } .ttable .trow .k { display: none; } .ttable .thead span:nth-child(2) { display: none; } .ttable .thead, .ttable .trow { grid-template-columns: 1fr 2fr; } }
/* unit product: bundle option under the format chooser */
.bundle-opt { display: grid; gap: 4px; text-decoration: none; color: inherit; border: 1px solid var(--line); border-left: 5px solid var(--yellow); border-radius: var(--radius); padding: 14px 18px; margin: 14px 0 4px; background: #FAF8F2; }
.bundle-opt .bo-tag { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #8A6A00; }
.bundle-opt b { font-size: 17px; }
.bundle-opt .bo-line { font-size: 14px; color: #555; }
.bundle-opt .bo-line em { font-style: normal; font-weight: 800; color: var(--ink); background: var(--yellow); padding: 1px 6px; border-radius: 4px; }
.bundle-opt .underline-y { font-size: 14px; font-weight: 600; margin-top: 4px; }
.section-head .sh-right { display: grid; gap: 14px; justify-items: start; }

/* product page: compact purchase panel */
.meta-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 15px; color: var(--grey); }
.meta-line .ml::before { content: "·"; margin-right: 10px; }
.format-row { margin: 18px 0 8px; }
.format-row .fr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.format-row label > span { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 4px; padding: 12px 10px; text-align: center; }
.format-row label > span b { font-size: 16px; }
.format-row .fp-price { font-size: 17px; font-weight: 700; }
.fmt-rating { margin: 6px 0 14px; font-size: 15px; }
.buy-links { margin: 12px 0 4px; text-align: center; font-size: 15px; }
.buy-links a { color: inherit; text-decoration: underline; text-decoration-color: var(--yellow); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.buy-links .sep { color: var(--line); margin: 0 6px; }
.stds { font-size: 14px; color: #444; background: var(--mist); border-radius: var(--radius); padding: 10px 14px; margin: 8px 0 0; }
.buy-box .form-note { text-align: center; margin: 4px 0 14px; }
.bundle-strip { display: grid; gap: 2px; text-decoration: none; color: inherit; border-left: 5px solid var(--yellow); background: #FAF8F2; border-radius: var(--radius); padding: 12px 16px; }
.bundle-strip b { font-size: 16px; }
.bundle-strip span { font-size: 14px; color: #555; }
.q-sub { font-size: 15px; color: var(--grey); margin: 6px 0 0; font-weight: 500; }
@media (max-width: 760px) { .format-row .fr-grid { grid-template-columns: 1fr; } }
/* approach page (scoped) */
.appr-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.appr-hero { padding: 40px 0 0; }
.appr-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 64px; align-items: end; }
.appr-grid > * { min-width: 0; }
.appr-h1 { font-size: clamp(40px, 4.5vw, 64px); line-height: 1.05; letter-spacing: -0.02em; margin: 0; white-space: normal; max-width: 11em; }
.ul-y { background: linear-gradient(transparent 82%, var(--yellow) 82%, var(--yellow) 96%, transparent 96%); }
.appr-lede { font-size: 20px; line-height: 1.5; max-width: 420px; margin: 0 0 6px; }
.appr-ings { padding: 56px 0 72px; }
.appr-h2 { font-size: clamp(26px, 2.4vw, 32px); line-height: 1.2; margin: 0 0 24px; }
.ing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 28px; }
.ing { min-width: 0; }
.ing .img { aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius); background: var(--mist); margin-bottom: 16px; }
.ing .img img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; display: block; }
.ing h3 { font-size: 27px; line-height: 1.15; margin: 0 0 8px; }
.ing p { font-size: 17px; line-height: 1.5; margin: 0; }
.ing .ex { margin-top: 14px; font-size: 14px; line-height: 1.5; color: #555; }
.ing .ex b { display: block; font-weight: 600; color: var(--ink); }
.ing-cta { background: var(--charcoal); color: var(--paper); border-radius: var(--radius); padding: 30px 28px; display: grid; gap: 14px; align-content: start; min-width: 0; }
.ing-cta .eyebrow { color: var(--yellow); margin: 0; }
.ing-cta h3 { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.08; margin: 0; }
.ing-cta p { font-size: 17px; line-height: 1.5; margin: 0 0 6px; color: rgba(255,255,255,.88); }
.ing-cta .btn { justify-self: stretch; text-align: center; }
.ing-cta .underline-y { color: #fff; justify-self: start; }
@media (max-width: 1000px) { .ing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .appr-grid { grid-template-columns: 1fr; gap: 20px; } .appr-lede { max-width: none; } }
@media (max-width: 640px) { .appr-wrap { padding: 0 var(--gutter); } .ing-grid { grid-template-columns: 1fr; gap: 36px; } .appr-ings { padding: 48px 0 56px; } }
/* text-only collection header */
.page-head-text { padding: 40px 0 16px; }
.page-head-text .wrap { grid-template-columns: 1fr; }
.page-head-text h1 { margin-bottom: 10px; }
.page-head-text .lede { max-width: 46em; font-size: 17px; }
/* free resources */
.free-callout { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; text-decoration: none; color: inherit; background: var(--yellow-soft); border-radius: var(--radius); padding: 36px 40px; }
.free-callout h2 { font-size: clamp(26px, 2.8vw, 38px); margin: 6px 0 10px; }
.free-callout p { font-size: 17px; line-height: 1.5; margin: 0 0 18px; max-width: 36em; }
.free-callout img { width: 100%; border-radius: var(--radius); display: block; }
.free-card .img { display: block; }
.free-card .fq { font-family: var(--display); font-weight: 700; font-size: 18px; line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 8px; }
.free-card .foot { margin-top: 12px; }
.free-card .foot .btn { width: 100%; text-align: center; }
.free-card .formats a { color: inherit; text-decoration: underline; text-decoration-color: var(--yellow); text-underline-offset: 3px; }
@media (max-width: 760px) { .free-callout { grid-template-columns: 1fr; padding: 24px; } }
/* one header format for every inner page: same top padding, eyebrow and title size as Individual Units */
.page-head, .page-head-compact, .page-head-text, .appr-hero { padding: 40px 0 16px; }
.page-head h1, .page-head .h1-long, .page-head .h1-two, .appr-h1 { font-size: clamp(40px, 4.5vw, 64px); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 12px; }
.page-head .lede { font-size: 17px; line-height: 1.5; }
.page-head .eyebrow, .appr-hero .eyebrow { margin-bottom: 14px; }
.think-lede { max-width: 38em; }
.incl-block { display: block; }
.incl-block > div:first-child { margin-bottom: 28px; }
.incl-row { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .incl-row { grid-template-columns: repeat(2, 1fr); } }
.try-head h1 { font-size: clamp(40px, 4.5vw, 64px); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 14px; }
.try-head .eyebrow { margin-bottom: 14px; }
.cat-group:first-child .cat-head { border-top: 0; padding-top: 0; }
/* free lessons by grade */
.free-lessons { background: var(--yellow-soft); border-radius: var(--radius); padding: 28px 32px 30px; }
.fl-head { display: grid; grid-template-columns: auto 1fr; gap: 6px 32px; align-items: baseline; margin-bottom: 18px; }
.fl-head .eyebrow { grid-column: 1 / -1; margin: 0; }
.fl-head h2 { font-size: clamp(22px, 2.2vw, 30px); margin: 0; }
.fl-head p { margin: 0; font-size: 15px; color: #555; }
.fl-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.fl-card { background: #fff; border-radius: var(--radius); padding: 16px 16px 14px; display: grid; gap: 8px; align-content: start; text-decoration: none; color: inherit; border: 1px solid rgba(0,0,0,.06); transition: transform .2s ease, box-shadow .2s ease; }
.fl-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.08); }
.fl-card .tag { justify-self: start; }
.fl-card b { font-size: 16px; line-height: 1.25; }
.fl-card .fl-q { font-size: 13.5px; color: #555; line-height: 1.4; }
.fl-card .underline-y { font-size: 13px; font-weight: 600; margin-top: 2px; }
@media (max-width: 1100px) { .fl-grid { grid-template-columns: repeat(3, 1fr); } .fl-head { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .fl-grid { grid-template-columns: 1fr 1fr; } .free-lessons { padding: 20px; } }
.cat-group:first-child { padding-top: 40px; }
.appr-h1 { max-width: none; }
.appr-lede { max-width: 46em; margin: 0 0 8px; }
.appr-hand { font-family: var(--hand); font-weight: 600; font-size: clamp(30px, 3vw, 40px); letter-spacing: 0; }
/* free challenge landing: video first */
.fc-top { display: grid; grid-template-columns: 3fr 2fr; gap: 40px; align-items: start; padding: 8px 0 40px; }
.video-facade { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--mist); }
.video-facade img, .video-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.video-facade .play { position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%; border: 0; background: rgba(26,26,26,.9); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .2s ease, background .2s ease; }
.video-facade .play svg { width: 36px; height: 36px; fill: #fff; margin-left: 4px; }
.video-facade .play:hover { transform: scale(1.06); background: var(--ink); }
.video-facade.no-video::after { content: "Video coming soon"; position: absolute; left: 16px; bottom: 14px; background: rgba(26,26,26,.85); color: #fff; font-size: 13px; font-weight: 600; padding: 6px 10px; border-radius: 6px; }
.fc-watch { font-size: 22px; margin: 18px 0 4px; }
.fc-watch-sub { color: var(--grey); font-size: 16px; margin: 0; }
.fc-buy h1 { font-size: clamp(36px, 3.6vw, 52px); line-height: 1.02; margin: 10px 0 10px; }
.fc-q { font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 10px; }
.fc-blurb { font-size: 17px; line-height: 1.5; margin: 0 0 22px; }
.fc-dl { display: inline-flex; align-items: center; gap: 12px; width: 100%; justify-content: center; font-size: 18px; padding: 18px 24px; }
.fc-dl svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fc-incl { margin: 14px 0 4px; font-size: 16px; color: #444; }
.fc-inside { display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px; align-items: start; padding: 32px 0 40px; border-top: 1px solid var(--line); }
.fc-inside h2 { font-size: clamp(28px, 3vw, 40px); margin: 0 0 24px; }
.stages { list-style: none; padding: 0; margin: 0; display: grid; gap: 26px; }
.stages li { display: grid; grid-template-columns: 64px 1fr; gap: 20px; align-items: center; }
.st-ic { width: 64px; height: 64px; border-radius: 50%; background: var(--yellow-soft); display: flex; align-items: center; justify-content: center; }
.st-ic svg { width: 30px; height: 30px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.stages b { display: block; font-size: 19px; margin-bottom: 4px; }
.stages p { margin: 0; color: #555; font-size: 15.5px; line-height: 1.5; }
.dl-panel { background: var(--yellow-soft); border-radius: var(--radius); padding: 28px 32px 26px; }
.dl-pages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.dl-pages.one { grid-template-columns: 1fr; }
.dl-pages figure { margin: 0; text-align: center; }
.dl-pages img { width: 100%; height: auto; border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.12); background: #fff; display: block; transition: transform .2s ease; }
.dl-pages a:hover img { transform: translateY(-3px); }
.dl-pages figcaption { font-size: 14px; color: #555; margin-top: 10px; }
.dl-preview { display: block; text-align: center; margin-top: 18px; font-weight: 600; font-size: 15px; color: inherit; text-decoration: underline; text-decoration-color: var(--yellow); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.fc-unit { display: flex; justify-content: space-between; align-items: center; gap: 24px; text-decoration: none; color: inherit; background: #FAF8F2; border-left: 6px solid var(--yellow); border-radius: var(--radius); padding: 22px 28px; margin: 0 0 24px; }
.fc-unit-k { display: block; font-size: 14px; color: var(--grey); margin-bottom: 4px; }
.fc-unit b { font-size: 22px; }
.lightbox { position: fixed; inset: 0; background: rgba(20,20,20,.86); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 40px; cursor: zoom-out; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.5); background: #fff; }
.lb-close { position: absolute; top: 18px; right: 22px; background: none; border: 0; color: #fff; font-size: 40px; line-height: 1; cursor: pointer; }
@media (max-width: 900px) { .fc-top, .fc-inside { grid-template-columns: 1fr; } .fc-unit { flex-direction: column; align-items: flex-start; } }
/* PBL product page v2 */
.pbl-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; }
.pbl-thumbs a { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px; background: var(--mist); }
.pbl-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.pbl-thumbs a:hover img { transform: scale(1.04); }
.dl-pages.two { grid-template-columns: 1fr 1fr; }
.dl-pages.two figcaption { text-align: left; font-size: 14px; line-height: 1.45; }
.dl-pages.two figcaption b { display: block; color: var(--ink); margin-bottom: 2px; }

/* mini: compact science hero */
.sci-compact .lede { max-width: 46em; }
/* mini: grade cards */
.grades { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; }
.grade-card { text-decoration: none; color: inherit; display: grid; gap: 8px; align-content: start; }
.grade-card .img { aspect-ratio: 1 / 1; overflow: hidden; background: #fff; }
.grade-card .img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .5s ease; }
.grade-card:hover .img img { transform: scale(1.04); }
.grade-card h3 { font-size: 24px; margin: 6px 0 0; }
@media (max-width: 1000px) { .grades { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .grades { grid-template-columns: 1fr 1fr; gap: 18px; } }