/* =====================================================================
   Grow · My Grow dashboard, v2 ("Daybreak" app layer)
   Loaded after base.css (tokens, buttons, lockup). Fresh class names, so nothing
   here depends on the v1 draft stylesheet.
   Sections: 1 tokens+base · 2 header · 3 account menu · 4 resources menu
             5 shell+rail · 6 footer+toast · 7 home: greeting+hero · 8 motion
   ===================================================================== */

/* ---------- 1. tokens + base ---------- */
:root {
  --hair: rgba(31,35,40,.08);
  --hair-2: rgba(31,35,40,.14);
  --e1: 0 0 0 1px rgba(31,35,40,.06), 0 1px 2px rgba(31,35,40,.04);
  --e2: 0 0 0 1px rgba(31,35,40,.06), 0 4px 10px -2px rgba(31,35,40,.06), 0 20px 40px -14px rgba(31,35,40,.20);
  --e3: 0 0 0 1px rgba(31,35,40,.07), 0 10px 22px -8px rgba(31,35,40,.12), 0 36px 72px -24px rgba(31,35,40,.34);
  --e-dark: 0 44px 80px -40px rgba(31,35,40,.6);
  --r-panel: 28px; --r-card: 20px; --r-tile: 14px; --r-ctl: 12px;
  --ease: cubic-bezier(.2,.8,.2,1);
  --hdr: 64px; --stripe-h: 4px;
  --shell: 1328px; --gut: 24px;
  --canvas: #F4F5F7;
}
@media (max-width: 600px) { :root { --gut: 16px; --hdr: 60px; } }

html { scroll-padding-top: calc(var(--hdr) + 80px); }
body.v2 { background: var(--canvas); font-size: 16px; }
[hidden] { display: none !important; }
body.noscroll { overflow: hidden; }
svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
img { max-width: 100%; height: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: 10px; z-index: 100; background: #fff; color: #1F2328; padding: 10px 14px; border-radius: 12px; box-shadow: var(--e2); font-weight: 700;
  clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; }
.skip:focus { clip-path: none; width: auto; height: auto; overflow: visible; }
.btn svg, .bi { width: 18px; height: 18px; flex: none; }
.btn-sm { padding: 9px 16px; font-size: 14px; }
.btn-white { background: #fff; color: #1F2328; }
.btn-white:hover { background: #fff; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.btn .arr { display: inline-block; }
.linkish { background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); font: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.linkish:hover { text-decoration-color: currentColor; }
/* hand-drawn rainbow underline (Daybreak .ul) */
.ul { position: relative; white-space: nowrap; background: none; padding: 0; }
.ul::after { content: ""; position: absolute; left: -.02em; right: -.06em; bottom: -.07em; height: .13em; border-radius: 99px; background: var(--stripe); transform: rotate(-1.2deg); transform-origin: left center; z-index: -1; }

/* ---------- 2. header ---------- */
.hdr { position: sticky; top: 0; z-index: 50; background: var(--sf); box-shadow: 0 1px 0 var(--hair); }
.hdr-stripe { height: var(--stripe-h); background: var(--stripe); }
.hdr-in { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gut); height: var(--hdr); display: flex; align-items: center; gap: 20px; }
.hdr .gc-logo { gap: 12px; }
.hdr .gc-logo .mark { height: 32px; } .hdr .gc-logo .rule { height: 30px; } .hdr .gc-logo .word { font-size: 18.5px; }
/* Kenny round 4 (#3): on the dashboard pages the lockup says "Curriculum Dashboard" (accessible name "Grow Curriculum
   Dashboard"). It stays one line at every width: the type steps down with the header, and only where even that can't
   fit beside the account buttons (the narrowest phones) does it say "Dashboard" alone. The footer keeps "Curriculum". */
.hdr .gc-logo .word { white-space: nowrap; }
.hdr-nav { display: flex; align-items: center; gap: 2px; margin-left: 12px; }
.hdr-link { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border: 0; background: none; border-radius: var(--r-pill);
  color: var(--ink-2); font: 600 14.5px/1 var(--font); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.hdr-link:hover { background: var(--bg); color: var(--ink); }
.hdr-link[aria-current="page"] { color: var(--ink); font-weight: 700; }
.hdr-link[aria-current="page"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -13px; height: 3px; border-radius: 3px 3px 0 0; background: var(--char-3); }
.hdr-link[aria-expanded="true"] { background: var(--bg); color: var(--ink); }
.hdr-link svg { width: 15px; height: 15px; margin-right: -3px; transition: transform .2s var(--ease); }
.hdr-link[aria-expanded="true"] svg { transform: rotate(180deg); }
.hdr-util { margin-left: auto; display: flex; align-items: center; gap: 8px; position: relative; }
.hdr-help { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 15px; border-radius: var(--r-pill);
  color: var(--ink-2); font-weight: 700; font-size: 14px; text-decoration: none; box-shadow: inset 0 0 0 1.5px var(--line); transition: background .15s, box-shadow .15s, color .15s; }
.hdr-help:hover { color: var(--ink); background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.hdr-help svg { width: 17px; height: 17px; }
.av-btn { display: inline-flex; align-items: center; gap: 3px; height: 42px; padding: 0 8px 0 4px; border: 0; background: none; border-radius: var(--r-pill); cursor: pointer; transition: background .15s; }
.av-btn:hover, .av-btn[aria-expanded="true"] { background: var(--bg); }
.av { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--sel-bg); color: var(--sel-ink); font-weight: 800; font-size: 12.5px; letter-spacing: .03em; }
.av-caret { width: 14px; height: 14px; color: var(--ink-3); transition: transform .2s var(--ease); }
.av-btn[aria-expanded="true"] .av-caret { transform: rotate(180deg); }
.hdr-burger { display: none; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 13px; background: var(--bg); color: var(--ink); cursor: pointer; }
.hdr-burger svg { width: 21px; height: 21px; }
.hdr-burger[aria-expanded="true"] { background: var(--sel-bg); color: var(--sel-ink); }

/* ---------- 3. account menu ---------- */
.am { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; width: min(316px, calc(100vw - 2 * var(--gut))); background: var(--sf); border-radius: 20px; box-shadow: var(--e3); padding: 8px; transform-origin: top right; }
.am-who { display: flex; align-items: center; gap: 12px; padding: 12px 12px 14px; }
.am-who .av { width: 42px; height: 42px; font-size: 14.5px; }
.am-who p { margin: 0; min-width: 0; }
.am-who b { display: block; font-size: 15px; line-height: 1.3; }
.am-who p span { display: block; font-size: 13px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-plan { margin: 0 4px 6px; padding: 12px 14px; background: var(--bg); border-radius: 14px; display: grid; gap: 10px; }
.am-plan:empty { display: none; }
.am-plan p { margin: 0; display: grid; grid-template-columns: 9px minmax(0, 1fr); column-gap: 10px; align-items: center; font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.am-plan i { width: 9px; height: 9px; border-radius: 50%; background: var(--a); }
.am-plan small { grid-column: 2; color: var(--ink-3); font-weight: 600; font-size: 12.5px; }
.am-plan .am-renew { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-3); padding-top: 9px; border-top: 1px solid var(--hair); }
.am-links a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: var(--ink); font-weight: 600; font-size: 14.5px; text-decoration: none; }
.am-links a:hover { background: var(--bg); }
.am-links svg { width: 18px; height: 18px; color: var(--ink-3); flex: none; }
.am-links .am-out { position: relative; margin-top: 9px; }
.am-links .am-out::before { content: ""; position: absolute; left: 12px; right: 12px; top: -5px; height: 1px; background: var(--hair); }

/* ---------- 4. resources menu (floating panel on desktop, full sheet on mobile) ---------- */
.mm { position: absolute; left: 0; right: 0; top: 100%; z-index: 49; padding: 10px var(--gut) 0; pointer-events: none; }
.mm-in { pointer-events: auto; max-width: calc(var(--shell) - 2 * var(--gut)); margin: 0 auto; background: var(--sf); border-radius: 24px; box-shadow: var(--e3);
  display: grid; grid-template-columns: minmax(0, 1fr) 284px; overflow: hidden; opacity: 0; transform: translateY(-8px) scale(.99); transform-origin: top center;
  transition: opacity .18s var(--ease), transform .24s var(--ease); }
.mm.open .mm-in { opacity: 1; transform: none; }
.mm-mob { display: none; }
.mm-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; padding: 24px 22px 22px; }
.mm-col h3 { margin: 0 10px 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.mm-col h3.mt { margin-top: 20px; }
.mm-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mm-col ul + ul { margin-top: 2px; }
.mm-item { display: flex; align-items: flex-start; gap: 12px; padding: 9px 10px; border-radius: 14px; color: var(--ink); text-decoration: none; transition: background .12s; }
.mm-item:hover { background: var(--bg); }
.mm-ico { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--a-soft); color: var(--a-ink); }
.mm-ico svg { width: 18px; height: 18px; }
.mm-ico.emo { font-size: 19px; line-height: 1; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--a) 45%, transparent); }
.mm-item b { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.mm-item small { display: block; font-size: 13px; color: var(--ink-3); line-height: 1.35; margin-top: 1px; }
.mm-col li.dim b { color: var(--ink-2); }
.mm-plain a { display: block; padding: 6px 10px; border-radius: 10px; color: var(--ink-2); font-weight: 600; font-size: 14px; text-decoration: none; }
.mm-plain a:hover { background: var(--bg); color: var(--ink); }
.mm-help { background: var(--bg); padding: 26px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.mm-help h3 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.015em; }
.mm-help p { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.mm-help ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; align-self: stretch; }
.mm-help li a { display: flex; align-items: center; gap: 10px; padding: 7px 0; color: var(--ink-2); font-weight: 600; font-size: 14px; text-decoration: none; }
.mm-help li a:hover { color: var(--ink); text-decoration: underline; }
.mm-help li svg { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
.mm-scrim { position: fixed; inset: 0; z-index: 45; background: rgba(35,39,43,.3); opacity: 0; transition: opacity .2s; }
.mm-scrim.open { opacity: 1; }

/* ---------- 5. shell + left rail ---------- */
.app { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gut); display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 44px; align-items: start; }
.main { min-width: 0; padding: 34px 0 72px; }
.rail { position: sticky; top: calc(var(--hdr) + var(--stripe-h)); padding: 34px 0 24px; }
.rail nav { display: flex; flex-direction: column; gap: 2px; }
.rail ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rail-h { margin: 22px 12px 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.rail-link { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 13px; color: var(--ink-2); font-weight: 700; font-size: 15px; text-decoration: none; transition: background .15s, color .15s, box-shadow .15s; }
.rail-link:hover { background: rgba(31,35,40,.05); color: var(--ink); }
.rail-link[aria-current="page"] { background: var(--sf); color: var(--ink); box-shadow: var(--e1); }
.rail-link > svg { width: 19px; height: 19px; flex: none; }
.rail-dot { flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--a); margin: 0 4px; transition: box-shadow .2s; }
.rail-link.dim .rail-dot { background: none; box-shadow: inset 0 0 0 2.5px var(--a); }
.rail-link[aria-current="page"] .rail-dot { box-shadow: 0 0 0 4px var(--a-soft); }
.rail-link.dim[aria-current="page"] .rail-dot { box-shadow: inset 0 0 0 2.5px var(--a), 0 0 0 4px var(--a-soft); }
.rail-tag { margin-left: auto; display: inline-flex; color: var(--ink-3); opacity: .8; }
.rail-tag svg { width: 15px; height: 15px; }

/* ---------- 6. footer + toast ---------- */
.ftr { background: var(--sf); box-shadow: 0 -1px 0 var(--hair); }
.ftr-in { max-width: var(--shell); margin: 0 auto; padding: 36px var(--gut) 18px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 24px 64px; align-items: start; }
.ftr .gc-logo { gap: 10px; }
.ftr .gc-logo .mark { height: 28px; } .ftr .gc-logo .rule { height: 26px; } .ftr .gc-logo .word { font-size: 16.5px; }
.ftr-fine { margin: 12px 0 0; font-size: 13px; color: var(--ink-3); }
.ftr-links { display: flex; gap: 64px; font-size: 14px; padding-top: 2px; }
.ftr-links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; align-content: start; }
.ftr-contact { display: grid; gap: 8px; font-size: 14px; justify-items: start; }
.ftr a { color: var(--ink-2); text-decoration: none; font-weight: 600; }
.ftr a:hover { color: var(--ink); text-decoration: underline; }
.ftr-contact a { display: inline-flex; align-items: center; gap: 9px; }
.ftr-contact svg { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
.draft { width: fit-content; margin: 10px auto 26px; background: var(--bg); color: var(--ink-3); font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; padding: 5px 11px; border-radius: 8px; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 95; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; max-width: calc(100vw - 32px);
  background: var(--float-bg); color: #fff; font-weight: 700; font-size: 14.5px; line-height: 1.35; padding: 12px 18px; border-radius: 16px; box-shadow: var(--e3); transition: opacity .2s, transform .25s var(--ease); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 7. home: greeting + bundle hero ---------- */
.greet { margin: 2px 0 26px; }
.greet-date { margin: 0 0 8px; font-size: 13.5px; font-weight: 700; color: var(--ink-3); }
.greet h1 { position: relative; isolation: isolate; margin: 0; font-size: clamp(28px, 3.1vw, 40px); line-height: 1.08; letter-spacing: -.038em; font-weight: 800; text-wrap: balance; }
.greet-sub { margin: 10px 0 0; font-size: 16.5px; color: var(--ink-2); text-wrap: balance; }

/* ---------- D1 (Kenny 2026-10-05, review item D1): "This week", the leader's starting point ----------
   A light Studio card under the greeting: this Sunday's series art + series + week (theme = the age in focus), the
   week's big idea, then four shortcuts in the More resources card style. Studio tokens, so light / dark follow. */
.tw { position: relative; margin: 0 0 30px; padding: 22px 22px 20px; background: var(--sf); border-radius: var(--r-panel); box-shadow: var(--e1); container: tw / inline-size; }
.tw[hidden] { display: none; }
.tw::before { content: ""; position: absolute; left: 22px; top: 0; width: 56px; height: 4px; border-radius: 0 0 4px 4px; background: var(--a); }
.tw-in { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px 14px; align-items: start; }
.tw-art { display: block; margin-top: 2px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-tile); background: var(--bg); }
.tw-art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.tw-art:hover img { transform: scale(1.05); }
.tw-head { min-width: 0; }
.tw-k { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--a-ink); }
.tw-k i { flex: none; width: 9px; height: 9px; border-radius: 3px; background: var(--a); }
.tw-k span { font-size: 13.5px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.tw-t { margin: 4px 0 6px; font-size: clamp(21px, 5.6cqi, 30px); line-height: 1.1; letter-spacing: -.03em; font-weight: 800; text-wrap: balance; }
.tw-t a { color: inherit; text-decoration: none; }
.tw-t a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--a); text-underline-offset: 4px; }
.tw-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; font-size: 14px; color: var(--ink-2); }
.tw-meta b { color: var(--ink); font-weight: 800; }
.tw-dots { display: inline-flex; gap: 4px; }
.tw-dots i { box-sizing: border-box; width: 16px; height: 7px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.tw-dots i.done { background: var(--a-ink); opacity: .45; box-shadow: none; }
.tw-dots i.on { width: 26px; background: var(--a-ink); box-shadow: none; }
html[data-mode="dark"] .tw-dots i:not(.done):not(.on) { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3); }
html[data-mode="dark"] .tw-dots i.done { opacity: .55; }
.tw-age { color: var(--ink-3); font-weight: 700; }
/* Weekly Calendar (Kenny 2026-10-06): where this week's lesson comes from, and the way to change it */
.tw-cal { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); font-size: 13.5px; font-weight: 700; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.tw-cal svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tw-cal:hover { color: var(--ink); text-decoration-color: currentColor; }
.tw-big { grid-column: 1 / -1; margin: 0; padding: 12px 14px; border-radius: var(--r-tile); background: var(--bg); font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.tw-big small { display: block; margin-bottom: 2px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.tw-big b { color: var(--ink); font-weight: 750; }
.tw-ref { display: block; margin-top: 3px; font-size: 13.5px; }
.tw-ref a { white-space: nowrap; color: var(--ink-2); font-weight: 700; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.tw-ref a:hover { color: var(--ink); text-decoration-color: currentColor; }
.tw-wait { min-height: 66px; }
.tw-acts { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.tw-act { display: flex; align-items: center; gap: 12px; height: 100%; padding: 10px 12px; border-radius: 14px; background: var(--bg); color: var(--ink); text-decoration: none; transition: background .15s, box-shadow .15s, transform .15s; }
.tw-act:hover { background: var(--sf); box-shadow: var(--e2); transform: translateY(-1px); }
.tw-ico { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--a-soft); color: var(--a-ink); transition: background .15s, color .15s; }
.tw-ico svg { width: 19px; height: 19px; }
.tw-act:hover .tw-ico { background: var(--a-fill); color: var(--a-on); }
.tw-txt { min-width: 0; }
.tw-txt b { display: block; font-size: 14.5px; font-weight: 750; line-height: 1.25; letter-spacing: -.01em; }
.tw-txt small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.35; color: var(--ink-3); text-wrap: pretty; }
.tw-look { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--bg); font-size: 14.5px; color: var(--ink-2); }
.tw-look svg { flex: none; width: 18px; height: 18px; color: var(--ink-3); }
.tw-look a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.tw-look a:hover { text-decoration-color: currentColor; }
@container tw (min-width: 600px) {
  .tw-in { grid-template-columns: 176px minmax(0, 1fr); gap: 14px 22px; align-items: center; }
  .tw-art { margin-top: 0; }
}
/* wide: art | series | the week's big idea, one band */
@container tw (min-width: 860px) {
  .tw-in { grid-template-columns: 208px minmax(0, 1fr) minmax(0, 340px); }
  .tw-big { grid-column: 3; grid-row: 1; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
}
@container tw (min-width: 520px) { .tw-acts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container tw (min-width: 860px) { .tw-acts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 600px) { .tw { padding: 18px 16px 16px; } .tw::before { left: 16px; } }

.mybundle { container: mb / inline-size; }
/* folder tabs: sit on the dark panel; the active one merges into it.
   Kenny round 2 (#2): the first tab is flush with the panel's left edge and the panel's top-left corner is square, so the
   active tab and the panel are one shape (before, the tab started 22px in, over the panel's 28px rounded corner, which
   left a light wedge under it). The row also reaches 2px down over the panel and the active tab paints those 2px, so
   no hairline shows between them at any zoom (edges on fractional pixels). */
.agetabs { position: relative; z-index: 1; display: flex; gap: 4px; padding: 0 22px 2px 0; margin-bottom: -2px; overflow-x: auto; scrollbar-width: none; }
.agetabs::-webkit-scrollbar { display: none; }
.agetabs button { flex: none; display: inline-flex; align-items: center; gap: 9px; border: 0; cursor: pointer; padding: 12px 18px 12px 16px; border-radius: 14px 14px 0 0;
  background: rgba(31,35,40,.06); color: var(--ink-2); font: 700 14.5px/1 var(--font); transition: background .15s, color .15s; }
.agetabs button:hover { background: rgba(31,35,40,.1); color: var(--ink); }
.agetabs button[aria-selected="true"] { background: var(--hero); color: #fff; cursor: default; box-shadow: 0 2px 0 var(--hero); transition: none; }
.mybundle .hero { border-top-left-radius: 0; }
.agetabs i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--a); }
.agetabs button:focus-visible { outline-offset: -3px; }
/* an age group they have nothing in (Kenny 2026-09-30: all three tabs for everyone): a hollow dot, the same as the rail */
.agetabs button.dim i { background: none; box-shadow: inset 0 0 0 2px var(--a); }
.agetabs button.dim:not([aria-selected="true"]) { color: var(--ink-3); }

.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--hero); color: #fff; border-radius: var(--r-panel); box-shadow: var(--e-dark); }
.hero::before { content: ""; position: absolute; z-index: -1; right: -12%; top: -70%; width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, var(--a, var(--acc)), transparent); opacity: .42; pointer-events: none; transition: background .3s; }
/* round 2 (#2): the age-coloured glow never reaches the top edge under the tabs (it tinted the edge under the Students
   tab at tablet widths, so the flat tab and the panel met with a faint colour step). The tab row is at most 380px. */
.mybundle .hero::before { left: max(42%, 400px); right: auto; }
.hero::after { content: ""; position: absolute; z-index: -1; left: -10%; bottom: -60%; width: 46%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.07), transparent); pointer-events: none; }
.hero-top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 22px 40px; padding: clamp(26px, 4.6cqi, 48px) clamp(22px, 4.6cqi, 48px) clamp(22px, 3cqi, 30px); }
.hero-copy { flex: 1 1 100%; min-width: 0; }
@container mb (min-width: 860px) { .hero-copy { flex-basis: 24rem; } }
.hero-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 12.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.hero-kicker i { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--a); }
.hero-title { margin: 12px 0 16px; font-size: clamp(34px, 6.2cqi, 62px); line-height: 1; letter-spacing: -.048em; font-weight: 800; text-wrap: balance; }
.hero-chips { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hero-chips li { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 12px; border-radius: var(--r-pill); background: rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); font-size: 13.5px; font-weight: 700; color: rgba(255,255,255,.92); white-space: nowrap; }
.hero-chips svg { width: 15px; height: 15px; color: rgba(255,255,255,.6); }
.hero-lede { margin: 0; max-width: 40rem; font-size: 16px; line-height: 1.55; color: rgba(255,255,255,.72); text-wrap: pretty; }
.hero-act { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.hero-act .btn-lg { padding: 17px 28px; }
.hero-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(8px, 1.5cqi, 14px); padding: 0 clamp(22px, 4.6cqi, 48px) clamp(22px, 4.6cqi, 44px); }
.hs { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--r-tile); background: rgba(255,255,255,.06); color: #fff; text-decoration: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 14px 28px -14px rgba(0,0,0,.6); }
.hs img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.hs:hover img, .hs:focus-visible img { transform: scale(1.05); }
.hs:focus-visible { outline-offset: 3px; }
.hs-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 12px 10px; background: linear-gradient(transparent, rgba(31,35,40,.86)); font-size: 13.5px; font-weight: 800; line-height: 1.2;
  opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .25s var(--ease); }
.hs-cap small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.72); margin-bottom: 3px; }
.hs:hover .hs-cap, .hs:focus-visible .hs-cap { opacity: 1; transform: none; }
.hs:nth-child(n+3) { display: none; }
@container mb (min-width: 460px) { .hero-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hs:nth-child(3) { display: block; } }
@container mb (min-width: 680px) { .hero-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } .hs:nth-child(4) { display: block; } }
@container mb (min-width: 900px) { .hero-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); } .hs:nth-child(5) { display: block; } }
@container mb (max-width: 540px) {
  .hero-act, .hero-act .btn { width: 100%; }
  .hero-title { margin-bottom: 14px; }
  .hero-chips li { font-size: 13px; }
}
/* no age group owned yet */
.hero-empty .hero-act { flex-direction: row; flex-wrap: wrap; }
/* browsing an age they have nothing in: the one upsell on the page, a quiet line under the lede */
.hero-offer { margin: 14px 0 0; max-width: 40rem; font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,.72); text-wrap: pretty; }
.hero-offer b { color: #fff; }
.hero-offer a { color: #fff; font-weight: 800; white-space: nowrap; text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 3px; }
.hero-offer a:hover { text-decoration-color: #fff; }
/* a free Grow resource filling the strip (Kenny 2026-09-30): a small "Free" flag with its strategy dot */
.hs-flag { position: absolute; z-index: 1; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px 0 7px; border-radius: var(--r-pill);
  background: #fff; color: #1F2328; font-size: 11.5px; font-weight: 800; letter-spacing: .01em; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.hs-flag::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--a, var(--lead)); }
/* waiting for the age data (full bundles / pieces): the strip's shape, calm */
.hs-wait .hs { box-shadow: 0 0 0 1px rgba(255,255,255,.06); }
.hero-err { margin: 0 clamp(22px, 4.6cqi, 48px) 24px; color: rgba(255,255,255,.72); font-size: 15px; }
/* every image carries its strategy colour along the bottom edge (teaching series: red) */
.hs[data-theme]::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 4px; background: var(--a); pointer-events: none; }

/* ---------- home: the Grow strategy tray (Kenny 2026-09-30, #5) ----------
   One tile per area under the hero, in Kenny's order. Each tile's colour bar is a piece of the strategy stripe, so the
   stripe is labelled here; the tile opens that area of the age page. White surface, colour only on the bars + hover. */
.strat { margin-top: 12px; background: var(--sf); border-radius: 22px; box-shadow: var(--e1); overflow: hidden; container: strat / inline-size; }
.strat ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.st { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 1px; min-height: 64px; padding: 16px 12px 11px 14px;
  color: var(--ink); text-decoration: none; transition: background .15s; }
.st::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--a); transition: height .15s var(--ease); }
.st:hover { background: var(--a-soft); }
.st:hover::before { height: 7px; }
.st:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; border-radius: 0; }
.st-n { font-size: 14.5px; font-weight: 800; line-height: 1.2; letter-spacing: -.012em; white-space: nowrap; }
.st-c { min-height: 17px; font-size: 12.5px; font-weight: 700; line-height: 1.35; color: var(--ink-3); text-wrap: balance; }
.st-c svg { width: 13px; height: 13px; vertical-align: -2px; }
.strat li + li .st { box-shadow: inset 1px 0 0 var(--hair); }
.strat li:nth-child(n+5) .st { border-top: 1px solid var(--hair); }
@container strat (min-width: 940px) {
  .strat ul { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .strat li:nth-child(n+5) .st { border-top: 0; }
  .st { padding: 16px 10px 11px 13px; }
  .st-n { font-size: 14px; }
}
@container strat (max-width: 520px) {
  .strat ul { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .strat ul::-webkit-scrollbar { display: none; }
  .strat li { flex: 0 0 128px; scroll-snap-align: start; }
  .strat li:nth-child(n+5) .st { border-top: 0; }
  .strat ul[data-fr] { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
  .strat ul[data-fl] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px); mask-image: linear-gradient(90deg, transparent, #000 36px); }
  .strat ul[data-fl][data-fr] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
}
@media (max-width: 600px) { .strat { border-radius: 18px; } }

/* ---------- responsive shell ---------- */
@media (max-width: 999px) {
  .app { display: block; }
  .home .rail { display: none; }
  .rail { position: static; padding: 16px 0 0; }
  .rail nav > .rail-link, .rail-h { display: none; }
  .pv .rail { display: none; }
  .rail ul { display: flex; gap: 4px; padding: 4px; width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; background: var(--sf); border-radius: var(--r-pill); box-shadow: var(--e1); }
  .rail ul::-webkit-scrollbar { display: none; }
  .rail ul[data-fr] { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .rail ul[data-fl] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px); mask-image: linear-gradient(90deg, transparent, #000 28px); }
  .rail ul[data-fl][data-fr] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
  .rail-link { flex: none; min-height: 38px; padding: 0 15px 0 11px; gap: 8px; border-radius: var(--r-pill); font-size: 14px; white-space: nowrap; }
  .rail-link[aria-current="page"], .rail-link.dim[aria-current="page"] { background: var(--sel-bg); color: var(--sel-ink); box-shadow: none; }
  .rail-link[aria-current="page"] .rail-dot { box-shadow: none; }
  .rail-link.dim[aria-current="page"] .rail-dot { box-shadow: inset 0 0 0 2.5px var(--a); }
  .rail-dot { width: 9px; height: 9px; margin: 0 2px; }
  .rail-tag { display: none; }
  .main { padding-top: 22px; }
}
@media (max-width: 899px) {
  .hdr-nav { display: none; }
  .hdr-help { width: 42px; height: 42px; padding: 0; }
  .hdr-help span { display: none; }
  .hdr-burger { display: grid; }
  .mm { position: fixed; top: calc(var(--hdr) + var(--stripe-h)); bottom: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--sf); box-shadow: inset 0 1px 0 var(--hair); }
  .mm-in { max-width: none; border-radius: 0; box-shadow: none; grid-template-columns: minmax(0, 1fr); transform: none; }
  .mm-mob { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 16px var(--gut) 6px; }
  .mm-mob a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 76px; padding: 10px 6px; border-radius: 16px; background: var(--bg);
    color: var(--ink); font-weight: 700; font-size: 13.5px; line-height: 1.2; text-decoration: none; text-align: center; }
  .mm-mob a[aria-current="page"] { background: var(--sel-bg); color: var(--sel-ink); }
  .mm-mob svg { width: 21px; height: 21px; }
  .mm-cols { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 16px calc(var(--gut) - 10px) 8px; }
  @media (min-width: 640px) {
    .mm-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "cur tools" "shop tools"; gap: 18px 20px; align-items: start; }
    .mm-cols > :nth-child(1) { grid-area: cur; } .mm-cols > :nth-child(2) { grid-area: tools; } .mm-cols > :nth-child(3) { grid-area: shop; }
  }
  .mm-col h3.mt { margin-top: 18px; }
  .mm-dup { display: none; }
  .mm-help { margin: 8px var(--gut) calc(28px + env(safe-area-inset-bottom)); border-radius: 20px; }
  .mm-scrim { display: none; }
  body.mega-open { overflow: hidden; }
  .ftr-in { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ftr-links { gap: 40px; }
}
@media (max-width: 600px) {
  .hdr-in { gap: 10px; }
  .hdr .gc-logo { gap: 9px; }
  .hdr .gc-logo .mark { height: 27px; } .hdr .gc-logo .rule { height: 25px; } .hdr .gc-logo .word { font-size: 16px; }
  .hdr-util { gap: 4px; }
  .hdr-help { box-shadow: none; }
  .av-btn { padding: 0 4px; }
  .av-caret { display: none; }
  .main { padding-bottom: 48px; }
  .greet { margin-bottom: 20px; }
  .greet-sub { font-size: 15.5px; }
  .agetabs { padding: 0 8px 2px 0; gap: 3px; }
  .agetabs button { padding: 11px 10px; font-size: 13.5px; gap: 6px; }
  .hero { border-radius: 24px; }
  .mybundle .hero { border-top-left-radius: 0; }
}
/* round 4 (#3): "Curriculum Dashboard" is ~100px longer than "Curriculum", so the lockup steps down where the row is full.
   900-1009 (nav showing): the phone-size lockup; 900-979 also shows Get help as its icon (as below 900).
   386-419: 14px type. 385 and narrower: "Dashboard" alone (the accessible name still says the whole thing). */
@media (min-width: 900px) and (max-width: 1009px) {
  .hdr .gc-logo { gap: 9px; }
  .hdr .gc-logo .mark { height: 27px; } .hdr .gc-logo .rule { height: 25px; } .hdr .gc-logo .word { font-size: 16px; }
}
@media (min-width: 900px) and (max-width: 979px) {
  .hdr-help { width: 42px; height: 42px; padding: 0; }
  .hdr-help span { display: none; }
}
@media (max-width: 419px) {
  .hdr .gc-logo { gap: 8px; }
  .hdr .gc-logo .mark { height: 24px; } .hdr .gc-logo .rule { height: 22px; } .hdr .gc-logo .word { font-size: 14px; }
}
@media (max-width: 385px) {
  .hdr .gc-logo { gap: 9px; }
  .hdr .gc-logo .mark { height: 27px; } .hdr .gc-logo .rule { height: 25px; } .hdr .gc-logo .word { font-size: 16px; }
  .hdr .gc-logo .w1 { display: none; }
}
@media (max-width: 360px) {
  .hdr-help { display: none; }
  .agetabs { padding: 0 6px 2px 0; gap: 3px; }
  .agetabs button { padding: 10px 7px; font-size: 12.5px; }
  .agetabs i { display: none; }
}

/* ---------- 8b. home: section heads, More resources, Start here, Your bundles, help strip ---------- */
.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin: 0 0 16px; }
.sec-head h2 { margin: 0; font-size: clamp(21px, 2vw, 24px); font-weight: 800; letter-spacing: -.028em; line-height: 1.2; }
.sec-sub { margin: 6px 0 0; color: var(--ink-3); font-size: 15px; font-weight: 500; }
.sec-link { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: none; cursor: pointer;
  color: var(--ink-2); font: 700 14px/1 var(--font); box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow .15s, color .15s, background .15s; }
.sec-link:hover { color: var(--ink); background: var(--sf); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.sec-link svg { width: 16px; height: 16px; }
.eyebrow-sm { margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }

.res { margin-top: 44px; container: res / inline-size; }
.res-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 10px; }
@container res (min-width: 520px) { .res-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container res (min-width: 900px) { .res-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } }
.res-item { position: relative; height: 100%; display: flex; align-items: center; gap: 14px; padding: 16px 16px; background: var(--sf); border-radius: 18px; box-shadow: var(--e1);
  color: var(--ink); text-decoration: none; transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
.res-item:hover { box-shadow: var(--e2); transform: translateY(-2px); }
.res-ico { flex: none; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--a-soft); color: var(--a-ink); transition: background .2s, color .2s; }
.res-ico svg { width: 21px; height: 21px; }
.res-item:hover .res-ico { background: var(--a); color: #fff; }
.res-item:hover .res-ico[data-theme="env"], .res-item:hover .res-ico[data-theme="evt"], .res-item:hover .res-ico[data-theme="vol"], .res-item:hover .res-ico[data-theme="disc"], .res-item:hover .res-ico[data-theme="fam"], .res-item:hover .res-ico[data-theme="games"], .res-item:hover .res-ico[data-theme="music"] { color: var(--ink); }
.res-item:hover .res-ico[data-theme="teach"] { background: var(--teach-deep); }
.res-txt { min-width: 0; }
.res-txt b { display: block; font-size: 15.5px; font-weight: 750; line-height: 1.3; letter-spacing: -.01em; }
.res-txt small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--ink-3); line-height: 1.4; text-wrap: pretty; }
@container res (min-width: 900px) {
  .res-item { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px 18px 20px; }
}

/* Start here (new users; dismissible) */
.onb { margin-top: 44px; position: relative; overflow: hidden; background: var(--sf); border-radius: var(--r-panel); box-shadow: var(--e1); padding: 26px 28px 22px; container: onb / inline-size; }
.onb::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--stripe); }
.onb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.onb-head h2 { margin: 0; font-size: clamp(20px, 2vw, 23px); font-weight: 800; letter-spacing: -.025em; text-wrap: balance; }
.onb-x { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: var(--bg); color: var(--ink-2); cursor: pointer; font: 700 13.5px/1 var(--font); }
.onb-x:hover { color: var(--ink); background: var(--line); }
.onb-x svg { width: 14px; height: 14px; }
.onb-steps { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; counter-reset: s; }
@container onb (min-width: 760px) { .onb-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.onb-steps li { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 18px; background: var(--bg); }
.onb-n { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--sel-bg); color: var(--sel-ink); font-weight: 800; font-size: 14px; }
.onb-steps b { display: block; font-size: 15.5px; line-height: 1.3; margin: 5px 0 4px; }
.onb-steps li > div > span { display: block; font-size: 14px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.onb-steps a, .onb-help a { color: var(--ink); font-weight: 700; }
.onb-help { margin: 16px 0 0; font-size: 14.5px; color: var(--ink-2); }

/* Your bundles */
.yb { margin-top: 44px; background: var(--sf); border-radius: var(--r-panel); box-shadow: var(--e1); padding: 26px 28px 24px; container: yb / inline-size; }
.yb-head { margin-bottom: 18px; }
.seg { display: inline-flex; gap: 2px; padding: 4px; background: var(--bg); border-radius: var(--r-pill); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 12px; border: 0; border-radius: var(--r-pill); background: none; color: var(--ink-2); cursor: pointer; font: 700 14px/1 var(--font); transition: background .15s, color .15s, box-shadow .15s; }
.seg button:hover { color: var(--ink); }
.seg button[aria-checked="true"] { background: var(--sf); color: var(--ink); box-shadow: 0 1px 2px rgba(31,35,40,.08), 0 2px 8px rgba(31,35,40,.08); }
.seg i, .seg-one i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--a); }
.seg-one { margin: 0; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 12px; border-radius: var(--r-pill); background: var(--bg); font-weight: 700; font-size: 14px; }
.yb-set { border: 0; margin: 0; padding: 0; min-width: 0; }
.yb-key { margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; font-weight: 700; color: var(--ink-3); }
.yb-key span { display: inline-flex; align-items: center; gap: 7px; }
.yb-key span::before { content: ""; width: 14px; height: 14px; border-radius: 5px; }
.yb-key .k-own::before { background: var(--a-soft); box-shadow: inset 0 0 0 2px var(--a); }
.yb-key .k-pre::before { background: var(--sf); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.yb-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@container yb (min-width: 480px) { .yb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container yb (min-width: 640px) { .yb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container yb (min-width: 860px) { .yb-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.yt { position: relative; display: flex; flex-direction: column; }
.yt-card { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 18px 8px 14px; border-radius: 18px;
  color: var(--ink); text-decoration: none; cursor: pointer; transition: box-shadow .15s, background .15s, transform .15s var(--ease); }
.yt-emo { font-size: 34px; line-height: 1.1; margin-bottom: 4px; transition: transform .25s var(--ease), filter .2s; }
.yt-card b { font-size: 14.5px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
.yt-card small { display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 12px; font-weight: 700; line-height: 1.3; }
.yt-card small svg { width: 13px; height: 13px; flex: none; }
/* owned: filled + bordered in the age colour */
.yt.own .yt-card { background: var(--a-soft); box-shadow: inset 0 0 0 2px var(--a); }
.yt.own .yt-card:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 2px var(--a), 0 10px 20px -10px rgba(31,35,40,.3); }
.yt.own .yt-tag { color: var(--a-ink); }
/* not owned: calm, desaturated; choose one for the next renewal */
.yt.pre .yt-card { background: var(--sf); box-shadow: inset 0 0 0 1.5px var(--line); padding-bottom: 40px; }
.yt.pre .yt-emo { filter: grayscale(1); opacity: .55; }
.yt.pre .yt-card b { color: var(--ink-2); }
.yt.pre .yt-card:hover { box-shadow: inset 0 0 0 1.5px var(--line-2), 0 8px 18px -10px rgba(31,35,40,.25); }
.yt.pre .yt-card:hover .yt-emo { filter: grayscale(.2); opacity: .9; transform: scale(1.06); }
.yt-in { position: absolute; opacity: 0; pointer-events: none; }
.yt-pick { color: var(--ink-3); }
.yt-radio { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-2); background: var(--sf); transition: box-shadow .15s; }
.yt-on { display: none; }
.yt.picked .yt-card { background: var(--sf); box-shadow: inset 0 0 0 2px var(--ink), 0 10px 22px -12px rgba(31,35,40,.4); }
.yt.picked .yt-emo { filter: none; opacity: 1; }
.yt.picked .yt-card b { color: var(--ink); }
.yt.picked .yt-pick { color: var(--ink); }
.yt.picked .yt-radio { box-shadow: inset 0 0 0 4.5px var(--ink); }
.yt.picked .yt-on { display: inline; } .yt.picked .yt-off { display: none; }
.yt-card:has(.yt-in:focus-visible) { outline: 3px solid var(--vol-ink); outline-offset: 2px; }
.yt-pv { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--bg); color: var(--ink-2); font-size: 12px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; }
.yt-pv:hover { background: var(--line); color: var(--ink); }
.yt-pv svg { width: 13px; height: 13px; }
.yb-renew { margin-top: 16px; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: var(--bg); }
.yb-cal { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--sf); color: var(--ink-2); box-shadow: var(--e1); }
.yb-cal svg { width: 19px; height: 19px; }
.yb-txt { flex: 1; min-width: 0; margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
.yb-txt span { display: block; font-size: 13.5px; color: var(--ink-3); }
.yb-saved { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 800; color: var(--own); opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .25s var(--ease); }
.yb-saved svg { width: 15px; height: 15px; }
.yb-saved.on { opacity: 1; transform: none; }
@container yb (max-width: 520px) {
  .yb-renew { flex-wrap: wrap; align-items: flex-start; }
  .yb-saved { width: 100%; padding-left: 54px; }
  .yb-head > div:first-child { flex: 1 1 100%; }
  .seg { display: flex; width: 100%; }
  .seg button { flex: 1 1 0; min-width: 0; justify-content: center; padding: 0 8px; gap: 6px; font-size: 13.5px; }
  .yb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .yt-card { padding: 14px 4px 12px; border-radius: 16px; }
  .yt.pre .yt-card { padding-bottom: 38px; }
  .yt-emo { font-size: 28px; }
  .yt-card b { font-size: 13.5px; }
  .yt-card small { font-size: 11.5px; }
  .yt-pv { padding: 4px 8px; font-size: 11.5px; }
}
@container yb (max-width: 290px) {
  .yb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* equal-height tiles: owned tiles get the same bottom room the Preview chip takes */
.yt.own .yt-card { padding-bottom: 40px; }
@container yb (max-width: 520px) { .yt.own .yt-card { padding-bottom: 38px; } }
/* no subscription: some of this bundle is theirs (bought one by one); others are plain links to take a look */
.yt.part .yt-card { background: var(--sf); box-shadow: inset 0 0 0 2px var(--a); padding-bottom: 40px; }
.yt.part .yt-card:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 2px var(--a), 0 10px 20px -10px rgba(31,35,40,.3); }
.yt.part .yt-tag { color: var(--a-ink); }
a.yt-card .yt-pick { display: inline-flex; }
@container yb (max-width: 520px) { .yt.part .yt-card { padding-bottom: 38px; } }
.yb-key .k-part::before { background: var(--sf); box-shadow: inset 0 0 0 2px var(--a); }
/* Kenny round 2 (#3): all three age groups in the picker; one they have nothing in has a hollow dot (as the age tabs) */
.seg button.dim i { background: none; box-shadow: inset 0 0 0 2px var(--a); }
.seg button.dim:not([aria-checked="true"]) { color: var(--ink-3); }
@container yb (max-width: 330px) { .seg i { display: none; } .seg button { padding: 0 4px; font-size: 13px; } }
/* an age group with nothing in it: browse it */
.yb-browse { margin-top: 16px; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: var(--bg); }
.yb-browse .btn { flex: none; }
.yb-plans { display: block; margin-top: 2px; font-style: normal; font-size: 13.5px; color: var(--ink-3); }
.yb-plans a { font-weight: 800; }
@container yb (max-width: 520px) { .yb-browse { flex-wrap: wrap; align-items: flex-start; } .yb-browse .btn { width: 100%; } }
/* the subscription offer (Your bundles, without a plan) */
.yb-offer { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px 18px; border-radius: 18px; background: var(--hero); color: #fff; }
.yb-offer .yb-cal { background: rgba(255,255,255,.1); color: #fff; box-shadow: none; }
.yb-offer .yb-txt { flex: 1 1 300px; color: rgba(255,255,255,.8); }
.yb-offer .yb-txt b { color: #fff; }
.yb-offer .yb-txt span { color: rgba(255,255,255,.66); }
.yb-offer .btn-dark { flex: none; background: #fff; color: #1F2328; }
.yb-offer .btn-dark:hover { background: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.3); }
@container yb (max-width: 520px) { .yb-offer .btn { width: 100%; } }

/* ---------- home: Planning View promo (Kenny 2026-09-30, #6a) ----------
   A white panel: the pitch + one CTA on the left, a miniature of the real (dark) board on the right, and the strategy
   key underneath. The mini board is decorative; the key is real text, so the colours are explained, not implied.
   Edge (Kenny 2026-10-01): a 1px --hair-2 ring plus the soft --shadow, so the panel's top edge reads crisply on the grey
   canvas (the --e1 ring was too faint); same treatment as the marketplace Planning View card. */
.pp-wrap { margin-top: 44px; container: pp / inline-size; }
.plan-promo { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "copy art" "key key";
  gap: 18px 32px; padding: 30px 30px 22px; background: var(--sf); border-radius: var(--r-panel); box-shadow: 0 0 0 1px var(--hair-2), var(--shadow); }
.pp-copy { grid-area: copy; min-width: 0; align-self: center; }
.pp-kick { margin: 0; display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.pp-kick i { width: 10px; height: 10px; border-radius: 3px; background: var(--stripe); }
.plan-promo h2 { margin: 10px 0 0; font-size: clamp(22px, 2.3vw, 28px); line-height: 1.15; letter-spacing: -.03em; font-weight: 800; text-wrap: balance; }
.pp-lede { margin: 10px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.pp-pts { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.pp-pts li { display: flex; align-items: flex-start; gap: 9px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.pp-pts svg { flex: none; width: 17px; height: 17px; margin-top: 2px; color: var(--own); stroke-width: 2.6; }
.pp-acts { margin-top: 20px; }
.pp-art { grid-area: art; min-width: 0; display: block; align-self: center; text-decoration: none; }
.pp-board { display: flex; gap: 10px; padding: 14px; background: var(--hero); border-radius: 20px; box-shadow: var(--e-dark); }
.pp-sea { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pp-sea > b { display: block; padding: 6px 9px; border-radius: 7px; background: #1C1F22; color: #fff; font-size: 11.5px; font-weight: 800; }
.pp-mons, .pp-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.pp-mons i { display: block; padding: 3px 0; border-radius: 5px; background: #fff; color: #1F2328; font-style: normal; font-size: 10px; font-weight: 800; text-align: center; }
.pp-col { display: flex; flex-direction: column; gap: 4px; }
.pp-col em { display: block; height: 15px; border-radius: 4px; background: var(--a); }
.pp-col em[data-theme="teach"] { height: 22px; }
.pp-key { grid-area: key; list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.pp-key li { display: inline-flex; align-items: center; gap: 7px; }
.pp-key i { width: 11px; height: 11px; border-radius: 3px; background: var(--a); }
@container pp (max-width: 720px) {
  .plan-promo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "art" "copy" "key"; }
  /* stacked, the board sits right above the eyebrow: a short shadow, so no grey haze runs into the copy */
  .pp-board { box-shadow: var(--shadow); }
}
@media (max-width: 600px) {
  .pp-wrap { margin-top: 32px; }
  .plan-promo { padding: 20px 16px 16px; border-radius: 24px; gap: 16px; }
  .pp-acts .btn { width: 100%; }
  .pp-board { padding: 10px; gap: 7px; border-radius: 16px; }
}
@container pp (max-width: 340px) { .pp-mons i { font-size: 9px; letter-spacing: -.02em; } }
/* Planning View card build (Kenny 2026-10-01). Replaces the tilted board that straightened on hover. The board stays
   still. When it scrolls into view, the season and month headers fade in, then each card is placed one at a time in
   calendar order (by month, then row): it starts lifted, then settles into its cell. The whole build takes about 1.7s and
   plays once. An inline <head> script adds html.pp-arm before first paint (only when motion is welcome), so cards never
   flash. dash.js swaps it for .pp-build when the board is in view. With no JS or with reduced motion the board is
   finished. Only opacity and transform animate, so nothing shifts. Same timing family as the marketplace (.mkp-build)
   and home page (.yb-build) boards. */
@media screen and (prefers-reduced-motion: no-preference) {
  .pp-arm .pp-board :is(.pp-sea > b, .pp-mons i, .pp-col em) { opacity: 0; }
  .pp-board.pp-build :is(.pp-sea > b, .pp-mons i) { animation: ppHead .32s cubic-bezier(.2, .7, .3, 1) var(--pp-d, 0ms) both; }
  .pp-board.pp-build .pp-col em { animation: ppPlace .52s cubic-bezier(.25, .8, .35, 1) var(--pp-d, 0ms) both; }
}
@keyframes ppHead { from { opacity: 0; transform: translateY(-3px); } }
@keyframes ppPlace {
  0% { opacity: 0; transform: translateY(-7px) scale(1.06); }
  60% { opacity: 1; transform: translateY(1px) scale(.99); }
  100% { opacity: 1; transform: none; }
}

/* help strip: the only help/upsell art on the page */
.help { margin-top: 44px; position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: 20px 28px; flex-wrap: wrap;
  padding: 22px 28px 22px 24px; background: var(--hero); color: #fff; border-radius: var(--r-panel); container: help / inline-size; }
.help::before { content: ""; position: absolute; z-index: -1; left: -60px; top: 50%; width: 260px; aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(191,228,120,.22), transparent); }
.help-art { flex: none; width: 124px; display: block; }
.help-art img { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 18px rgba(0,0,0,.45)); }
.help-copy { flex: 1 1 260px; min-width: 0; }
.help-copy h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.help-copy p { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.72); }
.help-btns { flex: none; display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 600px) {
  .res, .onb, .yb, .help { margin-top: 32px; }
  .onb, .yb { padding: 22px 16px 18px; border-radius: 24px; }
  .help { padding: 22px 18px; border-radius: 24px; }
  .help-art { width: 96px; }
  .help-btns, .help-btns .btn { width: 100%; }
}

/* ---------- 9. bundle page ---------- */
/* header panel: crumbs, then the title and the bundle dropdown on one row (Kenny 2026-09-30) */
.bph { --bph-r: var(--r-panel); position: relative; background: var(--sf); border-radius: var(--bph-r); box-shadow: var(--e1); container: bph / inline-size; }
/* the glow is clipped by its own layer, so the bundle dropdown can open over the page below */
.bph-top { position: relative; isolation: isolate; border-radius: var(--bph-r); }
.bph-glow { position: absolute; z-index: -1; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.bph-glow::before { content: ""; position: absolute; right: -8%; top: -260%; width: 58%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, var(--a), transparent); opacity: .16; }
.bph-top { padding: 24px 32px 26px; }
.crumbs { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; font-size: 13.5px; font-weight: 700; color: var(--ink-3); }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs svg { width: 14px; height: 14px; opacity: .7; }
.crumbs [aria-current] { color: var(--ink-2); }
.bph-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; }
.bph-id { min-width: 0; display: grid; gap: 10px; justify-items: start; }
.bph h1 { margin: 0; display: flex; align-items: center; gap: 14px; font-size: clamp(30px, 4.4cqi, 46px); line-height: 1.05; letter-spacing: -.042em; font-weight: 800; }
.bph-dot { flex: none; width: .36em; height: .36em; border-radius: 50%; background: var(--a); box-shadow: 0 0 0 .14em var(--a-soft); }
.bph-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bph-meta li { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; border-radius: var(--r-pill); background: var(--bg); font-size: 13.5px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.bph-meta svg { width: 15px; height: 15px; color: var(--ink-3); }
.bph-meta .pill-plan { background: var(--a-soft); color: var(--a-ink); }
.bph-meta .pill-plan svg { color: currentColor; }
.bph-meta .pill-look { background: var(--sel-bg); color: var(--sel-ink); }
.bph-meta .pill-look svg { color: rgba(255,255,255,.7); }

/* the bundle dropdown: "All" + each bundle (Kenny: bundles are a once-a-year thought, so they sit in a menu) */
.bph.dd-on { z-index: 35; }
.dd { flex: 0 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.dd-lab { font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.dd-w { position: relative; min-width: 0; }
.dd-btn { display: flex; align-items: center; gap: 12px; min-width: min(300px, 100%); max-width: 100%; min-height: 54px; padding: 6px 14px 6px 8px; border: 0; border-radius: 16px; cursor: pointer;
  background: var(--sf); color: var(--ink); font: inherit; text-align: left; box-shadow: inset 0 0 0 1.5px var(--line-2), 0 1px 2px rgba(31,35,40,.05); transition: box-shadow .15s; }
.dd-btn:hover { box-shadow: inset 0 0 0 1.5px var(--ink-3), 0 4px 12px -6px rgba(31,35,40,.25); }
.dd-btn[aria-expanded="true"] { box-shadow: inset 0 0 0 2px var(--ink), 0 6px 16px -8px rgba(31,35,40,.35); }
.dd-btn:disabled { cursor: progress; opacity: .75; }
.dd-cur { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; }
.dd-e { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; line-height: 1; background: var(--bg); }
.dd-e.dd-all { background: var(--sel-bg); color: var(--sel-ink); }
.dd-e.dd-all svg { width: 19px; height: 19px; }
.own > .dd-e, .dd-cur.own .dd-e { background: var(--a-soft); box-shadow: inset 0 0 0 2px var(--a); }
.part > .dd-e, .dd-cur.part .dd-e { background: var(--sf); box-shadow: inset 0 0 0 2px var(--a); }
.pre > .dd-e { filter: grayscale(1); opacity: .6; }
.dd-t { min-width: 0; display: grid; gap: 1px; }
.dd-t b { font-size: 15.5px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-t small { font-size: 12.5px; font-weight: 700; line-height: 1.3; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.own .dd-t small, .part .dd-t small { color: var(--a-ink); }
.dd-bar { display: block; width: 88px; height: 4px; margin-top: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.dd-bar i { display: block; height: 100%; border-radius: 4px; background: var(--a); }
.dd-car { flex: none; width: 18px; height: 18px; color: var(--ink-3); transition: transform .2s var(--ease); }
.dd-btn[aria-expanded="true"] .dd-car { transform: rotate(180deg); }
.dd-list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: max(100%, 320px); max-width: calc(100vw - 2 * var(--gut)); max-height: min(440px, 70vh); overflow-y: auto; overscroll-behavior: contain;
  margin: 0; padding: 6px; list-style: none; background: var(--sf); border-radius: 18px; box-shadow: var(--e3); }
.dd-list:focus { outline: none; }
.dd-list:focus-visible { outline: 3px solid var(--vol-ink); outline-offset: 2px; }
.dd-o { position: relative; display: flex; align-items: center; gap: 12px; padding: 7px 38px 7px 7px; border-radius: 13px; cursor: pointer; }
.dd-o.act { background: var(--bg); }
.dd-list:focus-visible .dd-o.act { box-shadow: inset 0 0 0 2px var(--vol-ink); }
.dd-o.dd-first { margin-bottom: 6px; }
.dd-o.dd-first::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -4px; height: 1px; background: var(--hair); }
.dd-ok { position: absolute; right: 12px; top: 50%; width: 17px; height: 17px; margin-top: -8.5px; color: var(--ink); opacity: 0; stroke-width: 2.6; }
.dd-o[aria-selected="true"] .dd-ok { opacity: 1; }
.dd-o[aria-selected="true"] .dd-t b { color: var(--ink); }
.pre .dd-t b { color: var(--ink-2); }
/* narrow panels: the dropdown wraps under the title, full width */
@container bph (max-width: 620px) {
  .dd { flex: 1 1 100%; gap: 6px; }
  .dd-lab { width: 100%; }
  .dd-w, .dd-btn { width: 100%; }
  .dd-list { left: 0; right: auto; width: 100%; max-width: none; }
}

/* horizontal scroller edge fades (set by bundle.js) */
.tabs[data-fr] { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.tabs[data-fl] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px); mask-image: linear-gradient(90deg, transparent, #000 40px); }
.tabs[data-fl][data-fr] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
@container bph (max-width: 620px) {
  .bph-top { padding: 20px 18px 18px; }
  .bph-row { flex-direction: column; align-items: stretch; }
}

/* the one banner */
.banner { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 16px 14px 14px; border-radius: 20px; background: var(--sf); box-shadow: var(--e1); }
.ban-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--sel-bg); color: var(--sel-ink); }
.ban-ico svg { width: 19px; height: 19px; }
.ban-lib .ban-ico { background: var(--a-soft); color: var(--a-ink); }
.ban-txt { flex: 1 1 280px; min-width: 0; margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.ban-txt b { display: block; color: var(--ink); font-size: 15px; text-wrap: balance; }
.banner .btn { flex: none; }

/* sticky area tabs */
.tabs-sent { height: 1px; margin-top: 22px; }
.tabs-bar { position: sticky; top: calc(var(--hdr) + var(--stripe-h)); z-index: 30; margin: 0 -10px; padding: 8px 10px 10px; background: var(--canvas); transition: box-shadow .2s; }
.tabs-bar.stuck { box-shadow: 0 1px 0 var(--hair), 0 10px 18px -16px rgba(31,35,40,.35); }
.tabs { position: relative; display: flex; gap: 2px; padding: 5px; background: var(--sf); border-radius: var(--r-pill); box-shadow: var(--e1); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px 0 14px; border: 0; border-radius: var(--r-pill); background: none; cursor: pointer;
  color: var(--ink-2); font: 700 14.5px/1 var(--font); white-space: nowrap; transition: background .15s, color .15s; }
.tabs button:hover { background: var(--bg); color: var(--ink); }
.tabs button i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--a); }
.tab-n { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: var(--r-pill); background: var(--bg); color: var(--ink-3); font-size: 12px; font-weight: 800; }
.tab-n svg { width: 12px; height: 12px; }
.tabs button[aria-selected="true"] { background: var(--sel-bg); color: var(--sel-ink); cursor: default; }
.tabs button[aria-selected="true"] .tab-n { background: rgba(255,255,255,.14); color: rgba(255,255,255,.9); }
/* Kenny 2026-09-30 (#4): the active category is filled with its own colour, not black. --a-fill/--a-on pass AA. */
.tabs button[data-theme][aria-selected="true"] { background: var(--a-fill); color: var(--a-on); }
.tabs button[data-theme][aria-selected="true"] i { background: var(--a-on); opacity: .55; }
.tabs button[data-theme][aria-selected="true"] .tab-n { background: rgba(255,255,255,.5); color: var(--ink); }
.tabs button[data-theme="teach"][aria-selected="true"] .tab-n, .tabs button[data-theme="lead"][aria-selected="true"] .tab-n { background: rgba(0,0,0,.22); color: #fff; }
/* focus: an ink ring + a white inner ring, visible on white and on every strategy fill (orange-on-orange would vanish) */
.tabs button:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; box-shadow: inset 0 0 0 5px #fff; }
/* wide enough for all 8: stretch evenly, no scrolling */
.tabs-bar { container: tb / inline-size; }
@container tb (min-width: 960px) {
  .tabs { gap: 0; }
  .tabs button { flex: 1 1 auto; justify-content: center; gap: 6px; padding: 0 6px 0 9px; font-size: 14px; }
  .tab-n { min-width: 20px; height: 20px; padding: 0 5px; font-size: 11.5px; }
}

/* results */
#results { container: res2 / inline-size; min-height: 40vh; }
.rs { margin-top: 26px; }
.rs + .rs { margin-top: 40px; }
.rs-head { margin: 0 0 16px; }
.rs-head h2 { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: clamp(20px, 2vw, 24px); font-weight: 800; letter-spacing: -.028em; line-height: 1.2; text-wrap: balance; }
.rs-n { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: var(--r-pill); background: var(--sf); box-shadow: var(--e1); font-size: 13px; font-weight: 800; letter-spacing: 0; color: var(--ink-3); }
.rs-head p { margin: 6px 0 0; font-size: 15px; color: var(--ink-3); font-weight: 500; text-wrap: pretty; }
.grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@container res2 (min-width: 480px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container res2 (min-width: 700px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
@container res2 (min-width: 1180px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.grid.small { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@container res2 (min-width: 520px) { .grid.small { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container res2 (min-width: 760px) { .grid.small { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }

.rc { position: relative; display: flex; min-width: 0; }
.rc-btn { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 0; border: 0; border-radius: var(--r-card); overflow: hidden; cursor: pointer; text-align: left;
  background: var(--sf); color: var(--ink); font: inherit; box-shadow: var(--e1); transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
.rc-btn:hover { box-shadow: var(--e2); transform: translateY(-3px); }
.rc-btn:focus-visible { outline-offset: 3px; }
.rc-art { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg); }
/* Kenny 2026-09-30 (#5): every card carries its strategy colour: a bar along the bottom of the art */
#results[data-theme] .rc-art::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 5px; background: var(--a); }
#results[data-theme] .rc.locked .rc-art::after { opacity: .5; }
#results[data-theme] .rc-btn:hover .rc-go { background: var(--a-fill); color: var(--a-on); }
/* loading skeleton: the series art is large, so show a calm shimmer until it paints over it */
.rc-art::before, .hs::before, .p-media::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%) -150% 0 / 60% 100% no-repeat; }
.hs::before { background-image: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.08) 50%, transparent 70%); }
.rc-art img, .hs img, .p-media img, .p-media iframe { position: relative; }
.rc-art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease), filter .3s; }
.rc-btn:hover .rc-art img { transform: scale(1.04); }
.rc.locked .rc-art img { filter: grayscale(.85) contrast(.92); opacity: .9; }
.rc.locked .rc-btn:hover .rc-art img { filter: grayscale(.25); opacity: 1; }
.rc-flag { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px 0 8px; border-radius: var(--r-pill);
  background: #fff; color: #1F2328; font-size: 12px; font-weight: 800; box-shadow: 0 2px 8px rgba(31,35,40,.18); }
.rc-flag svg { width: 14px; height: 14px; }
.rc-body { flex: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 14px 14px 14px 16px; }
.rc-txt { min-width: 0; display: grid; gap: 3px; }
.rc-meta { font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.rc-title { font-size: 16px; font-weight: 800; line-height: 1.25; letter-spacing: -.015em; text-wrap: balance; }
.rc.locked .rc-title { color: var(--ink-2); }
.rc-go { flex: none; display: inline-flex; align-items: center; gap: 3px; height: 30px; padding: 0 9px 0 12px; border-radius: var(--r-pill); background: var(--bg); color: var(--ink-2); font-size: 13px; font-weight: 800; transition: background .15s, color .15s; }
.rc-go svg { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.rc-btn:hover .rc-go { background: var(--sel-bg); color: var(--sel-ink); }
.rc-btn:hover .rc-go svg { transform: translateX(2px); }
.grid.small .rc-body { padding: 10px 10px 12px 12px; gap: 8px; }
.grid.small .rc-title { font-size: 14px; }
.grid.small .rc-go { height: 26px; padding: 0 8px 0 10px; font-size: 12px; }
@container res2 (max-width: 420px) { .grid.small .rc-go { display: none; } }
.showall { display: flex; justify-content: center; margin-top: 20px; }

/* one quiet line above each grid: which strategy (eyebrow in its colour), the intro, and the order control */
.rs-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; margin: 0 0 14px; }
.rs-intro { flex: 1 1 280px; min-width: 0; margin: 0; font-size: 15px; font-weight: 500; line-height: 1.45; color: var(--ink-3); text-wrap: pretty; }
.rs-intro p { margin: 0; }
.rs-eye { display: flex; align-items: center; gap: 8px; margin: 0 0 4px !important; font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--a-ink, var(--ink-3)); }
.rs-eye i { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--a, var(--ink-3)); }
.rs-ord { flex: none; display: inline-flex; }
.rs-hint, .rs-reset { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 9px; border-radius: var(--r-pill); font: 700 13px/1 var(--font); white-space: nowrap; }
.rs-hint { color: var(--ink-3); background: rgba(31,35,40,.04); }
.rs-reset { border: 0; cursor: pointer; background: var(--sf); color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--line-2); transition: box-shadow .15s, color .15s; }
.rs-reset:hover { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.rs-hint svg, .rs-reset svg { width: 15px; height: 15px; flex: none; }

/* drag to reorder: a grip on every card (always there on touch; on hover/focus with a mouse) */
.rc-drag { position: absolute; z-index: 2; top: 8px; right: 8px; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 11px;
  background: rgba(255,255,255,.94); color: var(--ink-2); cursor: grab; touch-action: none; -webkit-touch-callout: none; box-shadow: 0 2px 8px rgba(31,35,40,.2);
  opacity: 0; transition: opacity .15s, background .15s, color .15s, transform .15s var(--ease); }
.rc-drag svg { width: 19px; height: 19px; stroke-width: 0; fill: currentColor; }
.rc:hover .rc-drag, .rc-drag:focus-visible, .rc.lifted .rc-drag, .rc.dragging .rc-drag { opacity: 1; }
.rc-drag:hover { background: var(--sf); color: var(--ink); }
.rc-drag:active { cursor: grabbing; }
.rc-drag[aria-pressed="true"] { background: var(--sel-bg); color: var(--sel-ink); }
@media (hover: none), (pointer: coarse) { .rc-drag { opacity: 1; width: 40px; height: 40px; top: 6px; right: 6px; } }
.grid.small .rc-drag { top: 6px; right: 6px; width: 32px; height: 32px; }
.rc-btn, .rc-art img { -webkit-user-drag: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.rc.dragging { z-index: 20; pointer-events: none; }
.rc.dragging .rc-btn { box-shadow: 0 0 0 2px var(--ink), 0 24px 44px -12px rgba(31,35,40,.45); transform: scale(1.03) rotate(-.6deg); transition: transform .15s var(--ease), box-shadow .15s; }
.rc.settling { z-index: 19; }
.rc.lifted .rc-btn { box-shadow: 0 0 0 3px var(--ink), 0 18px 36px -14px rgba(31,35,40,.45); transform: translateY(-3px); }
body.is-dragging, body.is-dragging * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
body.is-dragging .rc-btn:hover { transform: none; }
body.is-dragging .rc:not(.dragging) .rc-btn:hover .rc-art img { transform: none; }
.upsell { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; padding: 18px 20px; border-radius: 22px; background: var(--hero); color: #fff; }
.up-ico { flex: none; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: rgba(255,255,255,.1); }
.up-ico svg { width: 19px; height: 19px; }
.up-txt { flex: 1 1 280px; margin: 0; font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,.72); }
.up-txt b { display: block; color: #fff; font-size: 16px; text-wrap: balance; }
.upsell .btn-dark { background: #fff; color: #1F2328; }
.upsell + .rs { opacity: .96; }
.empty { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 26px 24px; border-radius: 22px; background: var(--sf); box-shadow: var(--e1); }
.empty-emo { font-size: 34px; filter: grayscale(.3); }
.empty p { flex: 1 1 220px; min-width: 0; margin: 0; font-size: 15px; color: var(--ink-3); }
.empty b { display: block; color: var(--ink); font-size: 16px; }
.empty .btn { flex: none; }
@media (max-width: 600px) { .empty { padding: 20px 18px; } .empty .btn { width: 100%; } }

/* panel: DS1 (Kenny 2026-10-04, ask A) the one shared resource popup is a centered modal dialog, like the growdev.org
   sales page's series dialog (grow-salespage-v2 sales.css "series dialog"): a scrim, a charcoal top bar with the rainbow
   stripe and a close button, the media full-bleed at the top, then the text. Near full-screen on phones. */
.scrim { position: fixed; inset: 0; z-index: 80; background: var(--scrim-dlg); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity .24s var(--ease); }
.scrim.in { opacity: 1; }
html.p-lock { overflow: hidden; }
.panel { position: fixed; z-index: 90; left: 50%; top: 50%; width: min(820px, calc(100vw - 32px)); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px);
  display: flex; flex-direction: column; overflow: hidden; background: var(--sf); color: var(--ink); border-radius: var(--r-panel); box-shadow: var(--e3);
  opacity: 0; transform: translate(-50%, calc(-50% + 16px)) scale(.97); transition: opacity .2s var(--ease), transform .28s var(--ease); }
.panel.in { opacity: 1; transform: translate(-50%, -50%); }
.p-bar { position: relative; z-index: 1; flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 12px 15px 18px; background: var(--hero); color: #fff; box-shadow: 0 8px 16px -12px rgba(31,35,40,.5); }
.p-bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--stripe); }
.p-ctx { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; overflow: hidden; }
.p-ctx > span { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; border-radius: var(--r-pill); background: rgba(255,255,255,.09); font-size: 13px; font-weight: 700; white-space: nowrap; }
.p-ctx .p-bun { flex: 0 1 auto; min-width: 0; display: block; line-height: 28px; overflow: hidden; text-overflow: ellipsis; }
.p-age i { width: 8px; height: 8px; border-radius: 50%; background: var(--a); }
.p-ctx svg { width: 14px; height: 14px; flex: none; }
.p-own { color: #BFE478; }
@media (max-width: 520px) { .p-x { display: none; } }
@media (max-width: 380px) { .p-lb { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .p-ctx > .p-own, .p-ctx > .p-pre { padding: 0 8px; } .p-ctx { gap: 6px; } }
.p-pre { color: rgba(255,255,255,.8); }
.p-close { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.1); color: #fff; cursor: pointer; transition: background .15s; }
.p-close:hover { background: rgba(255,255,255,.2); }
.p-close svg { width: 19px; height: 19px; }
.p-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0; }
.p-text { padding: 24px 34px 36px; }
.p-body > .p-media { border-radius: 0; box-shadow: none; }
.p-body > .p-vsw { margin: 0; padding: 12px 34px 0; }
@media (max-width: 600px) { .p-body > .p-vsw { padding: 10px 18px 0; } }
.p-media { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 18px; background: var(--bg); box-shadow: 0 0 0 1px var(--hair); }
.p-media img, .p-media iframe { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; }
/* the overview video: a play button on the series art until pressed */
.p-play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: #000; cursor: pointer; color: #fff; }
.p-play img { transition: transform .4s var(--ease), filter .3s; }
.p-play:hover img { transform: scale(1.03); filter: brightness(.92); }
.p-play-b { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(255,255,255,.94); color: var(--ink); box-shadow: 0 10px 26px rgba(0,0,0,.45); transition: transform .2s var(--ease); }
.p-play-b svg { width: 26px; height: 26px; margin-left: 3px; fill: currentColor; stroke: none; }
.p-play:hover .p-play-b, .p-play:focus-visible .p-play-b { transform: scale(1.08); }
.p-play:focus-visible { outline: 3px solid var(--acc-ring); outline-offset: -3px; }
.p-play-l { position: absolute; left: 12px; bottom: 12px; padding: 5px 11px; border-radius: var(--r-pill); background: rgba(31,35,40,.82); font-size: 13px; font-weight: 800; }
/* R6 (Kenny 2026-10-02, #8): a song's lyric / dance video switch, under a music panel's video (panel.js) */
.p-vsw { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.p-vsw-b { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px 0 10px; border: 0; border-radius: var(--r-pill); background: var(--bg); color: var(--ink-2); font: 700 13.5px/1 var(--font); cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); }
.p-vsw-b svg { width: 14px; height: 14px; }
.p-vsw-b:hover { color: var(--ink); background: var(--sf); }
.p-vsw-b[aria-pressed="true"] { background: var(--sel-bg); color: var(--sel-ink); box-shadow: none; }
.p-vsw-b:focus-visible { outline: 3px solid var(--acc-ring); outline-offset: 2px; }
/* R6 (#7): the panel's About may be several paragraphs */
.about + .about { margin-top: 10px; }
.panel.is-pre .p-media img { filter: grayscale(.4); }
.p-head { margin-top: 20px; }
.p-kicker { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--a-ink); }
.p-kicker i { width: 9px; height: 9px; border-radius: 3px; background: var(--a); }
.p-wk { color: var(--ink-3); }
.p-wk::before { content: "·"; margin-right: 8px; }
.p-head h2 { margin: 8px 0 0; font-size: clamp(26px, 3vw, 32px); line-height: 1.08; letter-spacing: -.035em; font-weight: 800; text-wrap: balance; }
.p-tag { margin: 8px 0 0; font-size: 16px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.p-sug { margin: 12px 0 0; display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--ink-3); font-weight: 600; }
.p-sug svg { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.p-acts { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; }
.p-acts .btn { flex: 1 1 200px; }
.p-acts .btn-primary { flex-grow: 1.4; }
.p-note { margin: 12px 0 0; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.p-note svg { width: 14px; height: 14px; flex: none; }
.p-lock { margin-top: 20px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--bg); font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
.p-lock-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--sf); box-shadow: var(--e1); }
.p-lock-ico svg { width: 16px; height: 16px; }
.p-lock + .p-acts { margin-top: 12px; }
.psec { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--hair); }
.psec h3, .fold summary { margin: 0 0 12px; font-size: 17px; font-weight: 800; letter-spacing: -.015em; }
.fold { margin-top: 26px; border-top: 1px solid var(--hair); padding-top: 12px; }
.fold summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 10px 0; cursor: pointer; list-style: none; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary svg { width: 18px; height: 18px; color: var(--ink-3); transition: transform .2s var(--ease); }
.fold[open] summary svg { transform: rotate(180deg); }
.fold[open] summary { margin-bottom: 8px; }
.big { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: b; }
.big li { position: relative; padding: 12px 14px 12px 52px; border-radius: 16px; background: var(--bg); counter-increment: b; }
.big li::before { content: counter(b); position: absolute; left: 14px; top: 12px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--a); color: var(--ink); font-size: 13px; font-weight: 800; }
.panel[data-theme="teach"] .big li::before, .panel[data-theme="lead"] .big li::before, .panel[data-theme="fam"] .big li::before, .panel[data-theme="disc"] .big li::before { color: #fff; }
.big b { display: block; font-size: 15.5px; line-height: 1.4; }
.big span { display: block; margin-top: 3px; font-size: 13.5px; color: var(--ink-2); }
.big a { color: var(--ink-2); font-weight: 700; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.big a:hover { color: var(--ink); text-decoration-color: currentColor; }
.mv { margin: 12px 0 0; padding: 14px 16px; border-radius: 16px; background: var(--a-soft); font-size: 15px; line-height: 1.5; }
.mv span { display: block; font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--a-ink); margin-bottom: 3px; }
.weeks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.weeks li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; padding: 10px 14px; border-radius: 14px; background: var(--bg); }
.wk-n { font-weight: 800; font-size: 14.5px; }
.wk-acts { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.wk-acts .linkish, .p-links .linkish { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.linkish svg { width: 15px; height: 15px; flex: none; color: var(--ink-3); }
.p-links { margin: 12px 0 0; padding: 0 14px; display: flex; flex-wrap: wrap; gap: 8px 18px; }
/* D2: "Edit in Lesson Builder" opens the series in the Lesson Builder app (one link for the series; week rows below) */
.p-lbgo { margin: 0 0 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.p-lbgo .btn { display: inline-flex; align-items: center; gap: 8px; }
.p-lbgo .btn svg { width: 16px; height: 16px; flex: none; }
.p-lbgo small { flex: 1 1 220px; font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
.p-teach video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; background: #000; }
.p-teach-sub { margin: -4px 0 12px; font-size: 14px; color: var(--ink-3); }
.about { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.psec h4, .fold h4 { margin: 14px 0 6px; font-size: 14px; font-weight: 800; }
.inc { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.inc li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.inc svg { flex: none; width: 17px; height: 17px; margin-top: 2px; color: var(--a-ink); }
@media (max-width: 600px) {
  .panel { width: calc(100vw - 16px); max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); border-radius: 16px; }
  .p-bar { padding: 8px 8px 11px 14px; }
  .p-text { padding: 18px 18px calc(26px + env(safe-area-inset-bottom)); }
  .p-acts .btn { flex-basis: 100%; }
}
@media (max-width: 600px) {
  .bph { --bph-r: 24px; }
  .tabs-sent { margin-top: 16px; }
  .tabs-bar { margin: 0 calc(-1 * var(--gut)); padding: 8px var(--gut) 10px; }
  .tabs button { height: 38px; padding: 0 8px 0 12px; font-size: 14px; }
  .rs { margin-top: 20px; }
  .banner .btn, .upsell .btn { width: 100%; }
}

/* ---------- 10. ownership instances (V2-OWNERSHIP.md) ---------- */
/* (round 5, Kenny 2026-10-01: "remove the accent toggle ... and dashboard subscriber type toggle. Everywhere": the
   "Viewing sample" picker and the accent switch inside it are gone, with their CSS; ?as= / ?accent= are URL-only hooks) */

/* tool states: included (subscribers) or add (one-off buyers) */
.tool-tag { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; font-style: normal; font-size: 12px; font-weight: 800; line-height: 1.3; }
.tool-tag svg { width: 13px; height: 13px; flex: none; }
.tool-tag.inc { color: var(--ink-3); font-weight: 700; }
.tool-tag.inc svg { color: var(--own); stroke-width: 2.6; }
.tool-tag.add { color: var(--ink-2); padding: 3px 9px 3px 7px; border-radius: var(--r-pill); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.res-item:hover .tool-tag.add { background: var(--sf); }
.res-txt .tool-tag { display: flex; width: fit-content; }
.mm-item .tool-tag { display: flex; width: fit-content; margin-top: 5px; }
.mm-note { margin: -4px 10px 8px; display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; color: var(--own); }
.mm-note svg { width: 14px; height: 14px; }

/* account menu: customer type line, loose items, credits (same dot + text columns as the plan rows) */
.am-plan .am-type { display: block; font-size: 13px; font-weight: 800; color: var(--ink); line-height: 1.3; }
.am-plan .am-uni { display: block; padding-left: 19px; margin-top: -7px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.am-plan .am-cr { padding-top: 10px; border-top: 1px solid var(--hair); }
.am-plan .am-cr i { background: var(--env); }



/* bundle page, bought one by one: header pills, part chips */
.bph-meta .pill-cr, .cr-pill { background: var(--env-soft); color: var(--env-ink); }
.bph-meta .pill-cr svg { color: var(--env-ink); }
/* priced cards: missing items carry their price (no "Preview" flag); a calm tint where art is missing */
body.priced .rc.locked .rc-art { background: linear-gradient(135deg, var(--bg), var(--line)); }

/* the completion line (a bundle bought one by one: compact; the list is a fold) */
.banner.ban-own { display: block; padding: 14px 16px 14px 18px; }
.own-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.own-txt { flex: 1 1 300px; min-width: 0; margin: 0; display: grid; gap: 2px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.own-txt b { color: var(--ink); font-size: 15px; text-wrap: balance; }
.own-top .btn { flex: none; }
.own-top .btn svg { width: 16px; height: 16px; }
.ban-deal, .ban-cr { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; }
.ban-deal { color: var(--own); }
.ban-cr { color: var(--env-ink); }
.ban-deal svg, .ban-cr svg { width: 15px; height: 15px; flex: none; }
.own-bar { margin: 12px 0 0; height: 6px; border-radius: 6px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.own-bar i { display: block; height: 100%; border-radius: 6px; background: var(--a); }
.own-sub { margin: 14px 0 0; font-size: 13.5px; color: var(--ink-3); }
.own-sub b { color: var(--ink-2); }
.own-sub .linkish { font-size: 13.5px; }
/* the missing list */
.miss { margin-top: 14px; padding-top: 4px; border-top: 1px solid var(--hair); }
.mi-a { margin-top: 12px; }
.mi-a h3 { margin: 0 0 6px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; font-size: 14.5px; font-weight: 800; }
.mi-a h3 span { font-size: 13px; font-weight: 700; color: var(--ink-3); }
.mi-a ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mi-a li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; min-height: 40px; padding: 4px 6px 4px 12px; border-radius: 12px; background: var(--bg); font-size: 14px; }
.mi-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.mi-n .linkish { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-weight: 700; text-align: left; }
.mi-p { font-weight: 800; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mi-p.na { font-weight: 600; color: var(--ink-3); font-size: 13px; }
.mi-buy { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: var(--r-pill); background: var(--sel-bg); color: var(--sel-ink); font-size: 13px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.mi-buy:hover { background: #000; }
.mi-buy.ghost { background: var(--sf); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.mi-cmp { margin: 8px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border-radius: 12px; background: var(--sf); box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; color: var(--ink-2); }
.mi-cmp > svg { width: 15px; height: 15px; color: var(--own); flex: none; }
.mi-cmp span { flex: 1 1 240px; }
.mi-tot { margin: 14px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding-top: 12px; border-top: 1px solid var(--hair); font-size: 14px; color: var(--ink-3); }
.mi-tot b { font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.mi-tot em { font-style: normal; }
.mi-best { margin: 6px 0 0; display: flex; align-items: flex-start; gap: 7px; font-size: 14px; color: var(--own); font-weight: 600; }
.mi-best b { color: var(--own); }
.mi-best.cr { color: var(--env-ink); }
.mi-best svg { width: 15px; height: 15px; flex: none; margin-top: 3px; }
@media (max-width: 600px) {
  .banner.ban-own { padding: 14px 14px 14px; }
  .own-top .btn { width: 100%; }
  .mi-a li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; padding: 8px 8px 8px 12px; }
  .mi-a li .mi-buy { grid-row: 1 / span 2; grid-column: 2; }
  .mi-p { grid-column: 1; }
}

/* cards, bought one by one: owned = full colour + "Yours"; missing = price line */
.rc-flag.own { background: var(--own); color: #fff; }
.rc-price { display: block; margin-top: 3px; font-size: 13.5px; font-weight: 800; color: var(--ink); }
.rc-price.na { font-weight: 600; color: var(--ink-3); font-size: 13px; }
.rs-own { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px 0 8px; border-radius: var(--r-pill); background: var(--acc-soft); color: var(--own); font-size: 13px; font-weight: 800; letter-spacing: 0; }
.rs-own svg { width: 14px; height: 14px; }
/* panel, bought one by one: the price + buy actions */
.p-buy b { color: var(--ink); }
.p-buy .linkish { font-size: 14.5px; }
.p-price { margin: 16px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-size: 28px; font-weight: 800; letter-spacing: -.03em; }
.p-price.na { font-size: 18px; color: var(--ink-3); letter-spacing: -.01em; }
.p-cr { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 800; letter-spacing: 0; color: var(--env-ink); }
.p-cr svg { width: 17px; height: 17px; }
.p-price + .p-acts { margin-top: 12px; }
.p-note.deal { color: var(--own); font-weight: 700; }

/* ---------- 8. motion ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes shimmer { to { background-position: 250% 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .am:not([hidden]) { animation: pop .18s var(--ease); }
  .hero-copy, .hero-act { animation: rise .5s var(--ease) both; }
  .hero-act { animation-delay: .06s; }
  .hs { animation: rise .55s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms + 120ms); }
  .rc { animation: rise .42s var(--ease) both; animation-delay: calc(var(--i, 0) * 28ms); }
  .rc-art::before, .hs::before, .p-media::before { animation: shimmer 1.6s linear infinite; }
  .banner:not([hidden]), .upsell, .empty { animation: rise .35s var(--ease) both; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}