/* FLY Studio — shared stylesheet for /studio (catalogue) and the course sales
   pages under /studio/<slug>.

   Same cream/ink/sage/terra/blue family and the same type stack as the shop and
   the membership page, so the Studio reads as part of one site rather than a
   separate property. What it does NOT share is the shop's product-gallery
   vocabulary: a course is bought on what's inside it, so the page's own
   signature is the chapter ring — the player's progress ring, drawn empty and
   numbered, standing in for a lesson you haven't watched yet. That motif is real
   product language (see docs/design-system.md), which is what keeps it from
   being decoration.

   The signed-in player at /studio/my/face-tape is deliberately NOT styled from
   here: it's a dark, full-bleed video surface with its own self-contained CSS. */
:root {
  --ink: #292833;
  --ink-soft: #4c4b57;
  --muted: #7d7b86;
  --cream: #f7f3ed;
  --cream-2: #f1ece3;
  --sand: #e6ddce;
  --paper: #ffffff;
  --sage: #829685;
  --sage-soft: #e2e9e2;
  --terra: #dda995;
  --terra-soft: #f3e6de;
  --blue: #8dc4ff;
  --denim: #546d9e;
  --line: #e3dccf;
  --serif: 'Frank Ruhl Libre', 'Georgia', serif;
  --sans: 'Assistant', -apple-system, 'Segoe UI', sans-serif;
  --mark: 'Fraunces', 'Georgia', serif;
  --shadow: 0 10px 40px rgba(41,40,51,0.08);
  --shadow-lg: 0 24px 70px rgba(41,40,51,0.16);
  --radius: 22px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--sans); color: var(--ink); background: var(--cream);
  line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }

/* ---------- Layout ---------- */
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 780px; margin: 0 auto; padding: 0 24px; }
section { position: relative; }
.sec { padding: 88px 0; }
.center { text-align: center; }
@media (max-width: 700px) { .sec { padding: 56px 0; } }

/* Same tonal washes the shop and membership pages alternate through, so the
   Studio breathes in the same rhythm instead of sitting on flat cream. */
.sec-blue { background: radial-gradient(90% 70% at 50% -10%, #a6b7e6, transparent 60%), #93aae0; color: #fff; }
.sec-blue h2.title, .sec-blue h1, .sec-blue b { color: #fff; }
.sec-blue .eyebrow { color: rgba(255,255,255,0.88); }
.sec-blue .lead, .sec-blue p, .sec-blue span { color: rgba(255,255,255,0.85); }
.sec-warm { background: radial-gradient(48% 64% at 18% 42%, rgba(221,169,149,0.42), transparent 62%), radial-gradient(44% 54% at 96% 92%, rgba(130,150,133,0.26), transparent 62%), #efe8dd; }
.sec-sky { background: radial-gradient(60% 55% at 84% 8%, #dbe6f8, transparent 62%), linear-gradient(180deg, #e6eef9, #dde8f6 60%, #e2ebf7); }
.sec-sand { background: radial-gradient(54% 58% at 50% -4%, rgba(221,169,149,0.44), transparent 58%), linear-gradient(180deg, #efe6d8, #e7dbc7); }
.sec-ink { background: radial-gradient(70% 60% at 82% -6%, #2e2c3b, transparent 64%), #1d1c25; color: var(--cream); }
.sec-ink h2.title, .sec-ink h1 { color: #fff; }
.sec-ink .lead, .sec-ink p { color: rgba(247,243,237,0.82); }
.sec-ink .eyebrow { color: rgba(247,243,237,0.72); }
/* Sage band — the second dark ground, so the page never repeats ink twice.
   It carries the after-purchase steps, the one stretch that is instruction
   rather than persuasion, and reads as a different kind of moment because of it. */
.sec-sage { background: radial-gradient(72% 80% at 78% -8%, #91a795, transparent 62%), linear-gradient(180deg, #7f9484, #6c8272); color: #f4f1ea; }
.sec-sage h2.title, .sec-sage h1 { color: #fff; }
.sec-sage .lead, .sec-sage p { color: rgba(247,243,237,0.86); }
.sec-sage .eyebrow { color: rgba(247,243,237,0.8); }
.sec-sage .eyebrow .mark { color: #f2cdb8; }

/* ---------- Type ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .74rem; font-weight: 600; letter-spacing: .26em;
  text-transform: uppercase; color: var(--sage); margin: 0 0 16px;
}
.eyebrow .mark { width: 15px; height: 26px; color: var(--terra); flex: 0 0 auto; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; color: var(--ink); letter-spacing: -0.005em; }
h2.title { font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.1; margin: 0 0 20px; font-weight: 400; letter-spacing: -0.016em; }
h2.title em, h1 em { font-style: normal; font-weight: 700; }
.lead { font-size: 1.1rem; color: var(--ink-soft); line-height: 1.8; margin: 0; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.d1 { transition-delay: .08s; } .d2 { transition-delay: .16s; } .d3 { transition-delay: .24s; } .d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 34px; border-radius: 999px; border: 1px solid var(--ink);
  font-family: var(--sans); font-size: 1rem; font-weight: 600; letter-spacing: .01em;
  color: var(--cream); background: var(--ink); cursor: pointer; text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, background .25s, color .25s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(41,40,51,0.28); background: #17161f; }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--cream); }
.btn.line-light { background: transparent; color: var(--cream); border-color: rgba(247,243,237,0.5); }
.btn.line-light:hover { background: rgba(247,243,237,0.12); border-color: var(--cream); }
.btn.wide { width: 100%; }
.btn svg { width: 19px; height: 19px; }
.btn.buy-btn { padding: 18px 30px; font-size: 1.05rem; box-shadow: 0 10px 30px rgba(41,40,51,0.18); }
.btn.buy-btn:hover { box-shadow: 0 16px 38px rgba(41,40,51,0.3); }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: var(--promo-h, 0px); z-index: 90;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; background: rgba(247,243,237,0.86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand { font-family: var(--mark); text-decoration: none; color: var(--ink); display: inline-flex; align-items: baseline; gap: 2px; }
.brand .b1 { font-size: 1.5rem; font-weight: 500; letter-spacing: .01em; }
.brand .dot { color: var(--terra); font-weight: 500; margin: 0 3px; }
.brand .b2 { font-size: .82rem; font-weight: 400; color: var(--ink-soft); letter-spacing: .12em; text-transform: lowercase; }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a.lnk { font-size: .9rem; font-weight: 500; color: var(--ink-soft); text-decoration: none; letter-spacing: .02em; }
.nav-links a.lnk:hover, .nav-links a.lnk.current { color: var(--ink); }
.nav-links a.lnk-in { font-weight: 600; color: var(--sage); }
@media (max-width: 860px) { .nav-links { gap: 16px; } .nav-links a.lnk { font-size: .82rem; } }
@media (max-width: 760px) { .brand .b2 { display: none; } }

/* Site menu — synced from public/shared/partials/site-nav.css by
   `npm run sync-partials`. Never hand-edit between the markers. */
/* site-nav-css:start */
.site-menu { display: flex; align-items: center; gap: inherit; }
.site-menu a.lnk, .site-menu a.shop-lnk { font-family: var(--sans); font-size: .9rem; font-weight: 500; color: var(--ink-soft); text-decoration: none; letter-spacing: .02em; white-space: nowrap; }
.site-menu a.lnk:hover, .site-menu a.shop-lnk:hover, .site-menu a.current { color: var(--ink); }
.site-menu a.current { position: relative; }
.site-menu a.current::after { content: ""; position: absolute; inset-inline: 0; bottom: -7px; height: 2px; border-radius: 2px; background: var(--terra); }
.nav-shop { position: relative; }
.shop-dd { position: absolute; top: calc(100% + 14px); inset-inline-end: 0; min-width: 300px; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); padding: 10px; z-index: 95; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; }
.nav-shop:hover .shop-dd, .nav-shop:focus-within .shop-dd { opacity: 1; visibility: visible; transform: translateY(0); }
.shop-dd-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border-radius: 12px; text-decoration: none; color: var(--ink); }
.shop-dd-item:hover { background: var(--cream-2); }
.shop-dd-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.shop-dd-thumb { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--sand); flex: 0 0 auto; }
.shop-dd-name { font-size: .92rem; font-weight: 600; line-height: 1.35; }
.shop-dd-name .en { display: block; font-weight: 400; font-size: .76rem; color: var(--muted); margin-top: 2px; }
.shop-dd-price { font-weight: 700; color: var(--sage); white-space: nowrap; font-size: .9rem; }
.shop-dd-all { display: block; text-align: center; margin-top: 6px; padding: 10px; border-radius: 12px; font-size: .84rem; font-weight: 600; color: var(--sage); text-decoration: none; border-top: 1px solid var(--line); }
.shop-dd-all:hover { background: var(--cream-2); }
.nav-burger { display: none; order: 99; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 0 10px; border: 0; background: none; color: var(--ink); cursor: pointer; }
.nav-burger span { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 900px) {
  .nav-burger { display: inline-flex; }
  .site-menu { display: none; position: absolute; top: 100%; inset-inline: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 6px 24px 14px; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg); }
  .nav-open .site-menu { display: flex; }
  .site-menu > * + * { border-top: 1px solid var(--line); }
  .site-menu a.lnk, .site-menu a.shop-lnk { display: block; padding: 14px 0; font-size: 1rem; }
  .site-menu a.current { font-weight: 600; }
  .site-menu a.current::after { inset-inline: -14px auto; top: 12px; bottom: 12px; width: 3px; height: auto; }
  .shop-dd { display: none; }
}
/* site-nav-css:end */

/* site-ig-css:start */
/* Instagram feed above the footer — colors/fonts hardcoded so it looks the same on every palette */
.site-ig { padding: clamp(72px, 10vw, 116px) 0; background:
  radial-gradient(70% 60% at 82% 8%, #6076a4, transparent 55%),
  radial-gradient(60% 60% at 10% 92%, #6076a4, transparent 55%),
  #546d9e; }
.site-ig-wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.site-ig-head { text-align: center; margin: 0 0 40px; }
.site-ig-line { margin: 0 0 8px; font-family: 'Assistant', system-ui, sans-serif; font-size: clamp(1.05rem, 2.2vw, 1.3rem); font-weight: 600; line-height: 1.5; color: rgba(255,255,255,0.9); }
.site-ig-handle { font-family: 'Fraunces', 'Georgia', serif; font-size: clamp(1.9rem, 4.4vw, 3.1rem); color: #fff; text-decoration: none; letter-spacing: .01em; white-space: nowrap; }
.site-ig-handle:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
/* site-ig-css:end */

/* ---------- Top trust strip ---------- */
.ship-strip { background: var(--ink); color: var(--cream); text-align: center; font-size: .82rem; letter-spacing: .04em; font-weight: 500; padding: 10px 16px; }
.ship-strip span { opacity: .55; margin: 0 8px; }
@media (max-width: 600px) { .ship-strip { font-size: .74rem; } }

/* ---------- Promo strip ----------
   Site-wide campaign bar above the ship strip. One markup block, identical on
   the shop, so a campaign is a copy edit in two stylesheets and nothing else.
   The code is a button rather than text so a tap copies it. Sticky at the
   top; the nav docks under it at --promo-h (set by studio.js). */
.promo-strip { position: sticky; top: 0; z-index: 91; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; background: linear-gradient(90deg, #e9c8b1, var(--terra), #e9c8b1); color: var(--ink); text-align: center; font-size: .85rem; font-weight: 600; letter-spacing: .01em; padding: 9px 16px; }
.promo-strip i { font-style: normal; opacity: .45; margin: 0 4px; }
.promo-code { font-family: var(--sans); font-size: .85rem; font-weight: 700; letter-spacing: .09em; background: var(--paper); color: var(--ink); border: 1px dashed rgba(41,40,51,0.38); border-radius: 999px; padding: 3px 13px; cursor: pointer; transition: transform .15s ease, background .15s ease, color .15s ease; }
.promo-code:hover { transform: translateY(-1px); }
.promo-code.copied { background: var(--ink); color: var(--cream); border-style: solid; border-color: transparent; }
@media (max-width: 600px) { .promo-strip { font-size: .74rem; gap: 8px; padding: 8px 12px; } .promo-code { font-size: .74rem; padding: 3px 11px; } }

/* ---------- Signature: the chapter ring ----------
   The player draws a real progress ring around each chapter. Here the same ring
   is drawn empty, with the chapter number inside it — the visual promise of the
   thing being sold, and the one motif carried straight from the product. */
.ring { position: relative; width: 54px; height: 54px; flex: 0 0 auto; display: grid; place-items: center; }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring svg circle { fill: none; stroke-width: 2.5; }
.ring .ring-bg { stroke: var(--sand); }
.ring .ring-fg { stroke: var(--terra); stroke-linecap: round; stroke-dasharray: 151; stroke-dashoffset: 132; }
.ring b { font-family: var(--mark); font-size: 1.05rem; font-weight: 500; color: var(--ink); line-height: 1; }

/* ---------- Course landing hero (sales page) ----------
   A course is not a product with a photograph: what's on sale is a name, a
   promise and fifteen minutes of Meytal. So the hero carries type only, on a
   slow aurora of the brand's own three accents. The blobs drift on their own
   (18-26s) and each one also tracks the scroll at its own rate, set as --sy by
   studio.js — parallax that says "there is more below" without a single arrow
   of chrome. Both motions are off under prefers-reduced-motion. */
.lhero {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(64px, 12vh, 116px) 0 clamp(52px, 9vh, 88px);
  background: var(--cream);
}
.lhero-bg { position: absolute; inset: -18% -10%; z-index: -1; pointer-events: none; }
.lhero-bg .blob { position: absolute; display: block; will-change: transform; }
.lhero-bg .blob::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  filter: blur(48px); opacity: .72;
  animation: lh-drift 22s ease-in-out infinite alternate;
}
.lhero-bg .b1 { inset-inline-end: -6%; top: -12%; width: 58%; padding-top: 46%; transform: translate3d(0, calc(var(--sy, 0) * 0.22px), 0); }
.lhero-bg .b1::before { background: radial-gradient(circle at 40% 40%, rgba(141,196,255,0.60), rgba(141,196,255,0) 68%); }
.lhero-bg .b2 { inset-inline-start: -12%; bottom: -22%; width: 62%; padding-top: 50%; transform: translate3d(0, calc(var(--sy, 0) * -0.14px), 0); }
.lhero-bg .b2::before { background: radial-gradient(circle at 60% 45%, rgba(221,169,149,0.62), rgba(221,169,149,0) 68%); animation-duration: 26s; animation-delay: -7s; }
.lhero-bg .b3 { inset-inline-start: 26%; top: 18%; width: 46%; padding-top: 38%; transform: translate3d(0, calc(var(--sy, 0) * 0.34px), 0); }
.lhero-bg .b3::before { background: radial-gradient(circle at 50% 50%, rgba(130,150,133,0.42), rgba(130,150,133,0) 66%); animation-duration: 19s; animation-delay: -12s; }
@keyframes lh-drift {
  from { transform: translate3d(-4%, -3%, 0) scale(1); }
  to   { transform: translate3d(5%, 4%, 0) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .lhero-bg .blob { transform: none !important; }
  .lhero-bg .blob::before { animation: none; }
}

.lhero-in { position: relative; text-align: center; max-width: 900px; }
.lhero .eyebrow { justify-content: center; }
.lhero h1 {
  font-size: clamp(2.5rem, 8.4vw, 5.2rem); line-height: 1.02; font-weight: 400;
  letter-spacing: -0.032em; margin: 0 0 20px;
}
.lhero h1 em { font-style: normal; font-weight: 700; }
.lhero-sub {
  font-size: clamp(1.08rem, 2.2vw, 1.32rem); line-height: 1.72; color: var(--ink-soft);
  max-width: 30ch; margin: 0 auto 30px;
}
/* Three facts, not a spec sheet: the only numbers a buyer needs before the price. */
.lhero-meta {
  list-style: none; margin: 0 0 34px; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}
.lhero-meta li {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.72); border: 1px solid rgba(227,220,207,0.9);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 999px; padding: 8px 16px; font-size: .88rem; font-weight: 500; color: var(--ink-soft);
}
.lhero-meta svg { width: 15px; height: 15px; color: var(--sage); flex: 0 0 auto; }
.lhero-cta { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lhero-price { font-family: var(--serif); font-size: 1.05rem; color: var(--muted); }
.lhero-note { font-size: .84rem; color: var(--muted); }
.scroll-cue {
  display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
  margin-top: 42px; text-decoration: none; color: var(--muted); font-size: .8rem; letter-spacing: .06em;
}
.scroll-cue:hover { color: var(--ink); }
.scroll-cue svg { width: 18px; height: 18px; animation: cue 2.4s ease-in-out infinite; }
@keyframes cue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .scroll-cue svg { animation: none; } }

/* ---------- Preview section ----------
   Out of the hero and given a section of its own: the sample is the strongest
   thing on the page, and it converts better when it follows a promise instead
   of competing with one. */
.pv-frame { max-width: 372px; margin: 40px auto 0; }
.pv-note { text-align: center; font-size: .88rem; color: var(--muted); margin: 20px auto 0; max-width: 44ch; }
.pv-cta { display: flex; justify-content: center; margin-top: 28px; }

/* ---------- Benefit cards ---------- */
.bens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 42px; }
@media (max-width: 860px) { .bens { grid-template-columns: 1fr; } }
.ben {
  background: var(--paper); border: 1px solid var(--line); border-radius: 18px;
  padding: 26px 24px; box-shadow: 0 6px 22px rgba(41,40,51,0.05); text-align: start;
}
.ben-ic {
  width: 42px; height: 42px; border-radius: 12px; background: var(--terra-soft);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.ben-ic svg { width: 21px; height: 21px; color: var(--ink); }
.ben h3 { font-size: 1.2rem; margin: 0 0 8px; font-weight: 500; }
.ben p { margin: 0; font-size: .96rem; color: var(--ink-soft); line-height: 1.68; }

/* ---------- Course hero (sales page) ---------- */
.chero { padding: 56px 0 72px; background: radial-gradient(60% 60% at 82% 0%, rgba(141,196,255,0.16), transparent 62%), radial-gradient(50% 50% at 5% 90%, rgba(221,169,149,0.18), transparent 60%), var(--cream); }
.chero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 52px; align-items: center; }
@media (max-width: 940px) { .chero-grid { grid-template-columns: 1fr; gap: 34px; } }
.chero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.08; margin: 0 0 18px; letter-spacing: -0.02em; font-weight: 400; }
.chero .lead { margin-bottom: 26px; }

/* Preview player — the lessons are shot 9:16 (720x720 coded, 9:16 SAR), so the
   frame is 9:16 and the whole shot survives. `controls` only, no autoplay: a
   sales-page video that starts talking on its own is the fastest way to get a
   tab closed. Fullscreen has to letterbox rather than cover, or a wide screen
   crops the portrait frame down to a strip of chin. */
.cplayer { position: relative; border-radius: var(--radius); overflow: hidden; background: #21202a; box-shadow: var(--shadow-lg); aspect-ratio: 9 / 16; }
.cplayer video { width: 100%; height: 100%; object-fit: cover; display: block; background: #21202a; }
.cplayer video:fullscreen, .cplayer video:-webkit-full-screen { object-fit: contain; background: #000; }
.cplayer-tag {
  position: absolute; inset-inline-start: 14px; top: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px; pointer-events: none;
  background: rgba(33,32,42,0.72); color: #fff; backdrop-filter: blur(8px);
  padding: 7px 14px; border-radius: 999px; font-size: .76rem; font-weight: 600; letter-spacing: .04em;
}
.cplayer-tag svg { width: 14px; height: 14px; }

/* Preview end card — what a capped sample lands on instead of stopping dead.
   The sample is a real lesson cut short, so the card has to answer "and then
   what": the rest of it is the thing being sold, and replaying is the only
   other move left. */
.cplayer-end {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 24px; text-align: center;
  background: rgba(33,32,42,0.86); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s;
}
.cplayer-end.show { opacity: 1; visibility: visible; }
.cplayer-end b {
  font-family: var(--serif); font-weight: 500; color: #fff;
  font-size: clamp(1.4rem, 3.4vw, 1.9rem); line-height: 1.25;
}
.cplayer-end p { margin: -6px 0 2px; font-size: .9rem; color: rgba(255,255,255,0.75); max-width: 30ch; }
.cplayer-end .again {
  background: none; border: 0; padding: 4px; cursor: pointer;
  font: inherit; font-size: .86rem; color: rgba(255,255,255,0.7); text-decoration: underline;
}
.cplayer-end .again:hover { color: #fff; }

/* Price + buy panel */
.cbuy { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 26px 22px; box-shadow: var(--shadow); }
.cprice-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 4px; }
.cprice { font-family: var(--serif); font-size: 2.8rem; font-weight: 500; line-height: 1; }
.cprice .cur { font-size: 1.5rem; margin-inline-end: 2px; color: var(--muted); }
.cprice-was { font-size: 1.05rem; color: var(--muted); text-decoration: line-through; }
.cprice-note { font-size: .86rem; color: var(--muted); margin: 0 0 18px; }
.cincl { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 11px; }
.cincl li { display: flex; align-items: flex-start; gap: 10px; font-size: .95rem; line-height: 1.55; }
.cincl svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--sage); margin-top: 3px; }
.cincl b { font-weight: 600; }
.cincl span { display: block; color: var(--muted); font-size: .84rem; }
.trust-row { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.trust-row li { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--muted); }
.trust-row svg { width: 14px; height: 14px; color: var(--sage); flex: 0 0 auto; }

/* ---------- Stat band ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; text-align: center; }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); gap: 26px 12px; } }
.stat b { display: block; font-family: var(--serif); font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 500; line-height: 1; margin-bottom: 8px; }
.stat span { font-size: .88rem; letter-spacing: .02em; }

/* ---------- Curriculum ---------- */
.curric { display: grid; gap: 14px; }
.chap {
  display: flex; align-items: flex-start; gap: 18px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 18px;
  padding: 20px 22px; box-shadow: 0 6px 22px rgba(41,40,51,0.05);
}
.chap-body { flex: 1; min-width: 0; }
.chap-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.chap-head h3 { font-size: 1.22rem; margin: 0; font-weight: 500; }
.chap-time { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; background: var(--cream-2); border-radius: 999px; padding: 3px 11px; }
.chap p { margin: 0; font-size: .96rem; color: var(--ink-soft); line-height: 1.65; }
.chap { transition: transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease; }
.chap:hover { transform: translateY(-3px); }
@media (max-width: 600px) { .chap { padding: 17px 16px; gap: 13px; } .ring { width: 44px; height: 44px; } .ring b { font-size: .9rem; } }

/* The curriculum runs on ink. It is the thing being sold, so it gets the one
   dark block in the middle of the page instead of another wash of cream, and
   the terra rings read as light on it the way they do inside the player. */
.sec-ink .chap { background: rgba(255,255,255,0.055); border-color: rgba(247,243,237,0.14); box-shadow: none; }
.sec-ink .chap:hover { background: rgba(255,255,255,0.09); border-color: rgba(247,243,237,0.28); }
.sec-ink .chap h3 { color: #fff; }
.sec-ink .chap p { color: rgba(247,243,237,0.7); }
.sec-ink .chap-time { background: rgba(247,243,237,0.1); color: rgba(247,243,237,0.68); }
.sec-ink .ring .ring-bg { stroke: rgba(247,243,237,0.16); }
.sec-ink .ring b { color: #fff; }

/* A hairline from one ring to the next: the six lessons are an order, not a
   pile, and the line is the cheapest way to say so. */
.curric .chap { position: relative; --ring-c: 49px; }
@media (max-width: 600px) { .curric .chap { --ring-c: 38px; } }
.curric .chap:not(:last-child)::after {
  content: ''; position: absolute; top: 100%; inset-inline-start: var(--ring-c);
  width: 1px; height: 14px; background: rgba(247,243,237,0.18);
}

/* The arc is the lesson's place in the course — a sixth closed on chapter one,
   the full circle on chapter six — so the ring carries information instead of
   repeating the same decorative stub six times. It draws itself as each card
   reveals, which is the page's one orchestrated moment. */
.curric .ring-fg { stroke-dashoffset: 151; transition: stroke-dashoffset .9s cubic-bezier(.2,.7,.2,1) .12s; }
.curric .chap:nth-child(1).in .ring-fg { stroke-dashoffset: 126; }
.curric .chap:nth-child(2).in .ring-fg { stroke-dashoffset: 101; }
.curric .chap:nth-child(3).in .ring-fg { stroke-dashoffset: 76; }
.curric .chap:nth-child(4).in .ring-fg { stroke-dashoffset: 50; }
.curric .chap:nth-child(5).in .ring-fg { stroke-dashoffset: 25; }
.curric .chap:nth-child(6).in .ring-fg { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .curric .ring-fg { transition: none; } }

/* ---------- Demo: the portrait clip in a phone frame ----------
   The shop's tape demo is a 9:16 phone clip, so it gets a phone-shaped frame
   rather than being letterboxed into a landscape slot it was never shot for. */
.demo-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 54px; align-items: center; }
@media (max-width: 900px) { .demo-grid { grid-template-columns: 1fr; gap: 32px; } }
.phone {
  position: relative; margin: 0 auto; width: min(300px, 78vw);
  border-radius: 40px; padding: 10px; background: #21202a;
  box-shadow: var(--shadow-lg);
}
.phone video { width: 100%; aspect-ratio: 640 / 1138; object-fit: cover; border-radius: 31px; display: block; background: #000; }
.phone::before {
  content: ''; position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  width: 72px; height: 5px; border-radius: 99px; background: rgba(255,255,255,0.32); z-index: 2;
}
.learn-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 13px; }
.learn-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 1rem; line-height: 1.6; }
.learn-list svg { width: 20px; height: 20px; color: var(--sage); flex: 0 0 auto; margin-top: 3px; }

/* ---------- What's in the box ---------- */
.box-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .box-grid { grid-template-columns: 1fr; gap: 30px; } }
.box-img { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }
.box-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pspecs { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 520px) { .pspecs { grid-template-columns: 1fr; } }
.pspecs li { display: flex; align-items: flex-start; gap: 11px; }
.pspecs svg { width: 20px; height: 20px; color: var(--sage); flex: 0 0 auto; margin-top: 4px; }
.pspecs b { display: block; font-size: .93rem; font-weight: 600; line-height: 1.3; }
.pspecs span { font-size: .82rem; color: var(--muted); }
.ship-note { margin-top: 22px; padding: 14px 18px; border-radius: 14px; background: var(--sage-soft); font-size: .9rem; color: var(--ink-soft); }
.ship-note b { color: var(--ink); }

/* ---------- Meytal ---------- */
.about-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 52px; align-items: center; }
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; gap: 30px; } }
.about-photo { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }
.about-photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 46% center; }
.about-role { color: var(--sage); font-weight: 600; font-size: .96rem; margin: 10px 0 18px; letter-spacing: .01em; }
.about-quote { font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--ink); margin: 20px 0 0; line-height: 1.55; max-width: 34ch; }
.cred { display: inline-flex; align-items: center; gap: 14px; margin-top: 22px; padding: 10px 18px 10px 10px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); }
.cred img { width: 54px; height: 54px; object-fit: cover; border-radius: 10px; background: var(--cream-2); }
.cred div b { display: block; font-size: .92rem; font-weight: 600; }
.cred div span { font-size: .8rem; color: var(--muted); }

/* ---------- Steps after purchase ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 800px) { .steps { grid-template-columns: 1fr; gap: 20px; } }
.step { background: rgba(255,255,255,0.06); border: 1px solid rgba(247,243,237,0.16); border-radius: 18px; padding: 24px 22px; }
.step .sn { font-family: var(--mark); font-size: 1.6rem; color: var(--terra); display: block; line-height: 1; margin-bottom: 12px; }
.step b { display: block; font-size: 1.05rem; font-weight: 600; margin-bottom: 6px; color: #fff; }
.step p { margin: 0; font-size: .92rem; }

/* ---------- FAQ ---------- */
.faq-list { display: grid; gap: 10px; max-width: 820px; margin: 0 auto; }
.qa { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease; }
.qa[open] { border-color: var(--sage); box-shadow: 0 8px 26px rgba(41,40,51,0.07); }
.qa summary { list-style: none; cursor: pointer; padding: 18px 22px; font-weight: 600; font-size: 1.02rem; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary .ic { flex: 0 0 auto; color: var(--sage); transition: transform .25s ease; }
.qa summary .ic svg { width: 18px; height: 18px; display: block; }
.qa[open] summary .ic { transform: rotate(180deg); }
.qa .ans { padding: 0 22px 20px; color: var(--ink-soft); font-size: .96rem; line-height: 1.75; }

/* ---------- Final CTA ---------- */
.final { text-align: center; }
.final .btn { margin-top: 10px; }
.final-sub { font-size: .88rem; color: var(--muted); margin-top: 14px; }

/* ---------- Store cross-sell band ----------
   Where the membership band used to sit. A course page sells one finished
   thing, so the honest next step is the tool that goes with it, not a
   subscription with a different commitment shape. Card vocabulary is the shop's
   .pcard, copied rather than shared because the two stylesheets are separate
   files by design. */
.shop-cross .lead { max-width: 620px; margin: 14px auto 0; }
.xsell-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 940px; margin: 38px auto 0; }
.xsell-grid.two { grid-template-columns: repeat(2, 1fr); max-width: 640px; }
@media (max-width: 860px) { .xsell-grid { grid-template-columns: repeat(2, 1fr); max-width: 640px; } }
@media (max-width: 600px) { .xsell-grid, .xsell-grid.two { grid-template-columns: 1fr; max-width: 380px; } }
.pcard { background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); text-decoration: none; color: var(--ink); display: flex; flex-direction: column; transition: transform .25s ease, box-shadow .25s ease; }
.pcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.pcard:nth-of-type(3n+1) { border-top-color: var(--terra); }
.pcard:nth-of-type(3n+2) { border-top-color: var(--denim); }
.pcard:nth-of-type(3n+3) { border-top-color: var(--sage); }
.pcard .pth { aspect-ratio: 1/1; background: var(--sand); overflow: hidden; }
.pcard .pth img { width: 100%; height: 100%; object-fit: cover; }
.pcard .pbody { padding: 20px 20px 24px; display: flex; flex-direction: column; gap: 5px; flex: 1; text-align: start; }
.pcard .pname { font-family: var(--serif); font-size: 1.18rem; font-weight: 600; line-height: 1.35; }
.pcard .pname .en { display: block; font-family: var(--sans); font-weight: 400; font-size: .8rem; color: var(--muted); margin-top: 3px; }
.pcard .pprice { font-weight: 700; color: var(--sage); font-size: 1.05rem; margin-top: 4px; }
.pcard .pcta { margin-top: auto; padding-top: 14px; font-size: .88rem; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.pcard .pcta svg { width: 16px; height: 16px; transition: transform .2s ease; }
.pcard:hover .pcta svg { transform: translateX(-4px); }
.xsell-all { display: inline-block; margin-top: 30px; font-weight: 600; font-size: .95rem; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 3px; }
.xsell-all:hover { border-bottom-color: var(--ink); }

/* ---------- Sticky buy bar ---------- */
.buybar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 95;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 20px; background: rgba(247,243,237,0.94);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line); box-shadow: 0 -8px 30px rgba(41,40,51,0.09);
  transform: translateY(110%); transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.buybar.show { transform: none; }
.buybar-info b { display: block; font-family: var(--serif); font-size: 1.15rem; font-weight: 500; line-height: 1.2; }
.buybar-info span { font-size: .8rem; color: var(--muted); }
.buybar .btn { padding: 13px 28px; white-space: nowrap; }
@media (max-width: 560px) { .buybar { padding: 10px 14px; } .buybar-info b { font-size: 1rem; } .buybar-info span { font-size: .72rem; } .buybar .btn { padding: 12px 20px; font-size: .92rem; } }

/* ---------- Catalogue (/studio) ---------- */
.shero { padding: 72px 0 40px; text-align: center; }
.shero h1 { font-size: clamp(2.2rem, 5.4vw, 3.6rem); line-height: 1.06; margin: 0 0 18px; font-weight: 400; letter-spacing: -0.02em; }
.shero .lead { max-width: 620px; margin: 0 auto; }
/* auto-FILL, not auto-fit: auto-fit collapses the empty tracks, so the single
   course we have today would stretch across the whole row and read as a banner.
   auto-fill keeps the empty columns, so one card is exactly the size it will be
   when there are three. */
.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 26px; }
.ccard {
  display: flex; flex-direction: column; text-decoration: none; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); transition: transform .28s ease, box-shadow .28s ease;
}
.ccard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.ccard-th { position: relative; aspect-ratio: 3 / 4; background: var(--cream-2); }
/* Every cover.jpg is cut to 3:4 so the cards frame Meytal identically; the box
   matches that ratio, which leaves object-fit nothing to crop. */
.ccard-th img { width: 100%; height: 100%; object-fit: cover; }
.ccard-badge { position: absolute; inset-inline-start: 14px; top: 14px; background: rgba(33,32,42,0.74); color: #fff; backdrop-filter: blur(8px); border-radius: 999px; padding: 6px 13px; font-size: .74rem; font-weight: 600; letter-spacing: .04em; }
.ccard-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.ccard-body h2 { font-size: 1.5rem; margin: 0 0 6px; font-weight: 500; }
.ccard-body p { margin: 0 0 16px; color: var(--ink-soft); font-size: .96rem; }
.ccard-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .82rem; color: var(--muted); margin-bottom: 18px; }
.ccard-meta i { font-style: normal; opacity: .5; }
.ccard-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 16px; border-top: 1px solid var(--line); }
.ccard-price { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; }
.ccard-price .cur { font-size: 1rem; color: var(--muted); }
.ccard-cta { display: inline-flex; align-items: center; gap: 7px; font-size: .92rem; font-weight: 600; color: var(--sage); }
.ccard-cta svg { width: 17px; height: 17px; }
.cat-empty, .cat-loading { text-align: center; color: var(--muted); padding: 40px 0; font-size: .95rem; }

/* Skeleton, so the catalogue doesn't flash empty while /api/courses answers. */
.cskel { border-radius: var(--radius); background: var(--cream-2); height: 420px; animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: .55; } 50% { opacity: .85; } }
@media (prefers-reduced-motion: reduce) { .cskel { animation: none; } }

/* ---------- Footer ---------- */
.foot { background: var(--cream-2); border-top: 1px solid var(--line); text-align: center; padding: 44px 24px; font-size: .84rem; color: var(--muted); }
.foot .brand { margin-bottom: 14px; }
.foot .links { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin: 12px 0 16px; }
.foot .links a { color: var(--ink-soft); text-decoration: none; }
.foot .links a:hover { color: var(--ink); }