/* Lsany Plans & pricing — price-first, ethical long-form sales page.
   Headline + Personal/Business toggle + cards (first paint), then a direct-response
   value stack with live proof-of-product, the workbook, the honest offer, a business
   track, comparison, the work packs, authority proof, FAQ and the close. Two proof
   tracks gated by main[data-view]. Reuses styles.css + courses.css + preview-kit.css.
   Tokens only (on-gold ink #1A0F00 excepted). */

.cn { background: var(--bg); }
.cn h1, .cn h2, .cn h3 { font-family: var(--f-display); font-weight: 700; color: var(--cream); letter-spacing: -0.02em; }
.cn-main { overflow: clip; padding-bottom: 120px; }

/* shared eyebrow + heads */
.cn-kicker { display: block; font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.cn-h2 { font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.08; }
.cn-h { text-align: center; font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: clamp(22px, 3vw, 30px); }
.cn-cta-row { display: flex; justify-content: center; margin-top: clamp(28px, 4vw, 40px); }

/* view tracks — Personal vs Business */
.cn-main[data-view="personal"] [data-track="business"] { display: none; }
.cn-main[data-view="business"] [data-track="personal"] { display: none; }

/* top nav bar */
.cn-bar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px clamp(20px, 5vw, 48px); background: color-mix(in srgb, var(--bg-2) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--stroke); }
.cn-brand { font-family: var(--f-display); font-weight: 700; font-size: 21px; color: var(--cream); text-decoration: none; }
.cn-brand .ar { font-family: var(--f-arabic); color: var(--gold); margin-inline-start: 4px; }
.cn-bar-right { display: flex; align-items: center; gap: 8px; }
.cn-nav-link, .cn-login { font-family: var(--f-body); font-size: 15px; font-weight: 600; color: var(--cream-muted); text-decoration: none; padding: 9px 16px; border-radius: 999px; transition: color .15s, background .15s; }
.cn-nav-link:hover, .cn-login:hover { color: var(--cream); background: var(--chip-bg); }

/* ---- PLANS — first paint: headline, toggle, cards, proof, CTA ---- */
.cn-plans { position: relative; padding: clamp(26px, 4vw, 44px) 0 clamp(24px, 3.2vw, 40px); }
.cn-plans .ai-ambient { border-radius: 0; }
.cn-plans .wrap { position: relative; z-index: 1; }
.cn-hero { text-align: center; font-size: clamp(1.95rem, 5vw, 3.1rem); line-height: 1.05; letter-spacing: -0.035em; color: var(--cream); max-width: 17ch; margin: 0 auto 14px; }
.cn-sub { text-align: center; font-family: var(--f-body); font-size: clamp(15px, 2.2vw, 17px); color: var(--secondary); max-width: 48ch; margin: 0 auto clamp(24px, 3.2vw, 34px); line-height: 1.5; }

/* segmented toggle */
/* generous gap so the raised + hover-scaled Pro card ribbon never reaches the toggle */
.cn-seg { position: relative; z-index: 5; display: flex; width: max-content; max-width: 100%; margin: 0 auto clamp(52px, 6vw, 76px); padding: 5px; border-radius: 999px; border: 1px solid var(--stroke); background: var(--chip-bg); }
.cn-seg-btn { position: relative; z-index: 1; flex: 1; min-width: 124px; white-space: nowrap; text-align: center; border: none; background: none; cursor: pointer; padding: 9px 22px; border-radius: 999px; font-family: var(--f-body); font-size: 14px; font-weight: 600; color: var(--cream-muted); transition: color .2s; }
.cn-seg-btn.is-on { color: #1A0F00; }
.cn-seg-pill { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px; background: linear-gradient(180deg, var(--gold-2), var(--gold)); box-shadow: 0 6px 16px -8px var(--gold-glow); transition: transform .28s var(--ease-bounce); }

.cn-trust { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 26px; margin: clamp(28px, 4vw, 40px) 0 0; padding: 0; }
.cn-trust li { position: relative; padding-left: 23px; font-family: var(--f-body); font-size: 13px; color: var(--cream-muted); }
.cn-trust li::before { content: ""; position: absolute; left: 0; top: 1px; width: 15px; height: 15px; border-radius: 999px; background:
  var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A0F00' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/10px no-repeat; }
.cn-anchor { text-align: center; font-family: var(--f-body); font-size: 14px; color: var(--secondary); max-width: 52ch; margin: clamp(16px, 2.2vw, 22px) auto 0; line-height: 1.55; }

/* ---- Guarantee band — Saqr's Promise, right at the buy decision ---- */
.cn-guarantee { display: flex; align-items: center; gap: 15px; max-width: 560px; margin: clamp(30px, 4vw, 44px) auto 0; padding: 16px 22px; border-radius: 16px; border: 1px solid var(--stroke); background: radial-gradient(130% 180% at 0% 50%, var(--gold-glow), transparent 62%), var(--surface); }
.cn-guarantee-shield { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: #1A0F00; background: linear-gradient(180deg, var(--gold-2), var(--gold)); box-shadow: 0 8px 20px -11px var(--gold-glow); }
.cn-guarantee-shield svg { width: 22px; height: 22px; }
.cn-guarantee-txt { margin: 0; font-family: var(--f-body); font-size: 14px; line-height: 1.5; color: var(--secondary); }
.cn-guarantee-txt strong { color: var(--cream); font-weight: 700; }

/* ---- Problem / agitation ---- */
.cn-problem { padding: clamp(54px, 8vw, 92px) 0 0; text-align: center; }
.cn-problem .cn-kicker, .cn-problem .cn-h2 { text-align: center; }
.cn-problem .cn-h2 { max-width: 22ch; margin-inline: auto; }
.cn-problem-turn { font-family: var(--f-body); font-size: clamp(15px, 2.2vw, 17px); color: var(--cream); font-weight: 600; max-width: 52ch; margin: 14px auto 0; line-height: 1.6; }

/* ---- Proof of product — one demo at a time (slideshow) ---- */
.cn-stack { padding: clamp(28px, 3.6vw, 48px) 0 0; }
.cn-stack-head { text-align: center; max-width: 46ch; margin: 0 auto clamp(22px, 3.2vw, 32px); }
.cn-stack-head .cn-kicker, .cn-stack-head .cn-h2 { text-align: center; }

.cn-show { max-width: 560px; margin: 0 auto; }
.cn-show-tabs { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-bottom: 18px; }
.cn-show-tab { position: relative; z-index: 1; font-family: var(--f-body); font-size: 12.5px; font-weight: 600; color: var(--cream-muted); background: var(--chip-bg); border: 1px solid var(--stroke); border-radius: 999px; padding: 7px 14px; cursor: pointer; transition: color .2s var(--ease-smooth), border-color .16s, background .16s; }
.cn-show-tab:hover { color: var(--cream); border-color: var(--stroke-strong); }
.cn-show-tab.is-on { color: #1A0F00; background: linear-gradient(180deg, var(--gold-2), var(--gold)); border-color: transparent; }
/* when JS adds the sliding pill, the active tab goes transparent so the gold pill shows through and glides */
.cn-show.has-pill .cn-show-tab.is-on { background: transparent; border-color: transparent; }
.cn-show-pill {
  position: absolute; top: 0; left: 0; z-index: 0; opacity: 0;
  border-radius: 999px; background: linear-gradient(180deg, var(--gold-2), var(--gold));
  box-shadow: 0 6px 16px -8px var(--gold-glow);
  transition: transform .32s var(--ease-spring-soft), width .3s var(--ease-smooth), height .3s var(--ease-smooth), opacity .2s;
  view-transition-name: cn-show-pill;
}

.cn-show-view { display: flex; align-items: center; gap: 8px; }
.cn-show-track { flex: 1; min-width: 0; view-transition-name: cn-show-track; }
.cn-slide { display: none; max-width: 440px; margin: 0 auto; animation: cn-slidein .35s var(--ease-smooth) both; }
.cn-slide.is-on { display: block; }

/* View Transition tuning — the demo swap morphs (crossfade + height) instead of cutting */
::view-transition-group(cn-show-track), ::view-transition-group(cn-show-pill) { animation-duration: .42s; animation-timing-function: var(--ease-smooth); }
::view-transition-old(cn-show-track), ::view-transition-new(cn-show-track) { animation-duration: .42s; animation-timing-function: var(--ease-smooth); }
/* the pricing grid morphs across the Personal/Business toggle */
.pv-grid { view-transition-name: pv-grid; }
::view-transition-old(pv-grid), ::view-transition-new(pv-grid) { animation-duration: .4s; animation-timing-function: var(--ease-smooth); }
@keyframes cn-slidein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cn-slide .demo-card { width: 100%; margin: 0; }
.cn-slide .trace-letter-pad { aspect-ratio: 1 / 1; max-width: 220px; max-height: none; margin: 0 auto; }
.cn-slide .trace-letter { font-size: 150px; }
.cn-slide .chat-area { font-size: 13px; }

.cn-show-arrow { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--stroke); background: var(--chip-bg); color: var(--gold); cursor: pointer; display: grid; place-items: center; transition: border-color .16s, transform .12s var(--ease-bounce), background .16s; }
.cn-show-arrow:hover { border-color: var(--gold); transform: scale(1.06); }
.cn-show-arrow:active { transform: scale(.92); }
.cn-show-arrow svg { width: 18px; height: 18px; }

.cn-show-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.cn-show-dot { width: 8px; height: 8px; border-radius: 999px; border: none; padding: 0; cursor: pointer; background: var(--stroke-strong); transition: background .2s, transform .2s var(--ease-bounce); }
.cn-show-dot.is-on { background: var(--gold); transform: scale(1.3); }

/* pronunciation mic — .pp-mic hook, mirrors the in-app mic */
.pp-mic { width: 54px; height: 54px; margin-top: 12px; border-radius: 50%; border: none; cursor: pointer; display: grid; place-items: center; background: linear-gradient(180deg, var(--gold-2), var(--gold-deep)); box-shadow: 0 0 0 0 var(--gold-glow), 0 8px 20px rgba(230,184,97,0.4); animation: mic-pulse 2s ease-in-out infinite; }
.pp-mic svg { width: 20px; height: 20px; }
.pp-mic.is-on { animation: none; transform: scale(.94); }
.pron-demo .pron-score { transition: transform .26s var(--ease-bounce); }

/* Saqr call — mirrors the in-course call UI (saqr-call.html) */
.saqr-demo { padding: 0; }
.saqr-head { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--stroke); background: linear-gradient(180deg, var(--surface), rgba(27,56,49,0.5)); }
.saqr-mini { width: 44px; height: 44px; border-radius: 50%; flex: none; overflow: hidden; background: var(--surface-2); border: 1.5px solid var(--gold-deep); box-shadow: 0 6px 16px rgba(0,0,0,0.3); }
.saqr-mini img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.saqr-meta { min-width: 0; flex: 1 1 auto; }
.saqr-name { font-family: var(--f-body); font-weight: 700; font-size: 16px; color: var(--cream); line-height: 1.1; }
.saqr-status { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--green); margin-top: 5px; }
.saqr-status::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); margin-right: 6px; vertical-align: middle; box-shadow: 0 0 0 3px rgba(77,191,142,0.16); }
.saqr-timer { flex: none; font-family: var(--f-mono); font-weight: 700; font-size: 14px; color: var(--gold); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.saqr-thread { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.saqr-turn { border: 1px solid var(--stroke); border-radius: 16px; padding: 12px 14px; }
.saqr-turn.them { background: var(--surface); border-bottom-left-radius: 7px; align-self: stretch; }
.saqr-turn.you { background: linear-gradient(160deg, rgba(230,184,97,0.18), rgba(184,136,56,0.13)); border-color: rgba(230,184,97,0.32); border-bottom-right-radius: 7px; align-self: flex-end; max-width: 90%; }
.saqr-who { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.saqr-turn.you .saqr-who { text-align: right; color: var(--gold); }
.saqr-tl { font-family: var(--f-mono); font-weight: 700; font-size: 18px; line-height: 1.25; color: var(--cream); letter-spacing: -.01em; }
.saqr-ar { font-family: var(--f-arabic); direction: rtl; text-align: left; font-size: 17px; color: var(--gold-2); margin-top: 6px; }
.saqr-en { font-family: var(--f-body); font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.saqr-turn.you .saqr-tl, .saqr-turn.you .saqr-ar, .saqr-turn.you .saqr-en { text-align: right; }

/* ---- THE INTERACTIVE E-BOOK ---- */
.cn-ebook-sec { padding: clamp(54px, 8vw, 92px) 0 0; text-align: center; }
.cn-ebook-lead { font-family: var(--f-body); font-size: 15.5px; color: var(--secondary); line-height: 1.6; max-width: 52ch; margin: 14px auto 22px; }
.cn-ebook-stage { max-width: 460px; margin: 0 auto; text-align: left; }
.cn-book-note { font-family: var(--f-body); font-size: 13px; color: var(--green); margin: 16px 0 18px !important; }

/* ---- the library: a shelf of 3D book volumes (reuses the hero book language) ---- */
.cn-lib { margin-top: clamp(46px, 7vw, 78px); }
.cn-lib-head { text-align: center; max-width: 62ch; margin: 0 auto clamp(34px, 4.5vw, 52px); }
.cn-lib-title { font-family: var(--f-display); font-weight: 700; color: var(--cream); font-size: clamp(21px, 3.2vw, 27px); margin: 0 0 9px; }
.cn-lib-sub { font-family: var(--f-body); font-size: 15px; color: var(--secondary); line-height: 1.55; margin: 0; }

/* ================ The Climb: six e-books as a colour-coded ascending journey ================ */
/* Each step is tinted by its level (--lac*) so the near-identical cream covers read as six
   distinct volumes; the row climbs left→right from free Beginner to the gold Business summit.
   Reuses the site's [data-level] colour language + the 3D cover treatment. No bespoke JS. */

/* per-level colour identity — extends the courses.css [data-level] set to all six volumes */
/* a deliberate sunrise gradient up the climb: cool base camp warming to the gold
   summit, every adjacent pair distinct so the six covers never read as "the same book". */
.cn-climb-step[data-level="beginner"]     { --lac: #4DBF8E; --lac-2: #7EDBB0; --lac-soft: rgba(77,191,142,.26); }
.cn-climb-step[data-level="elementary"]   { --lac: #3FC8D6; --lac-2: #78DEE8; --lac-soft: rgba(63,200,214,.26); }
.cn-climb-step[data-level="intermediate"] { --lac: #5C9CE8; --lac-2: #8CBBF0; --lac-soft: rgba(92,156,232,.26); }
.cn-climb-step[data-level="advanced"]     { --lac: #E89A4A; --lac-2: #F2B87C; --lac-soft: rgba(232,154,74,.26); }
.cn-climb-step[data-level="idioms"]       { --lac: #E8614A; --lac-2: #F2917E; --lac-soft: rgba(232,97,74,.26); }
.cn-climb-step[data-level="business"]     { --lac: var(--gold); --lac-2: var(--gold-2); --lac-soft: var(--gold-glow); }

/* the view toggle (preview-only; removed with the loser views before launch) */
.eb-toggle { display: flex; justify-content: center; gap: 4px; width: max-content; margin: 0 auto clamp(24px, 4vw, 44px); padding: 5px; border-radius: 999px; border: 1px solid var(--stroke); background: color-mix(in srgb, var(--surface-2) 62%, transparent); }
.eb-toggle button { font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--secondary); background: none; border: 0; padding: 9px 17px; border-radius: 999px; cursor: pointer; transition: color .2s ease, background .2s ease; }
.eb-toggle button:hover { color: var(--cream); }
.eb-toggle button.is-active { color: #1A0F00; background: linear-gradient(180deg, var(--gold-2), var(--gold)); box-shadow: 0 6px 16px -8px var(--gold-glow); }

/* ---- shared book anatomy (every view): a real 3D volume with spine + page edges ---- */
.cn-climb { position: relative; list-style: none; margin: 0; padding: 0; counter-reset: climbstep; }
.cn-climb-step { position: relative; counter-increment: climbstep; }
.cn-vol-cover { position: relative; display: block; width: 100%; margin: 0; perspective: 1000px; text-decoration: none; }
.cn-vol-cover img { display: block; width: 100%; height: auto; border-radius: 2px 7px 7px 2px; }
.cn-vol-3d { position: relative; display: block; border-radius: 2px 7px 7px 2px; transform-style: preserve-3d; box-shadow: 12px 18px 32px -16px rgba(0,0,0,.78), 0 3px 12px -5px rgba(0,0,0,.5); transition: transform .45s var(--ease-pop), box-shadow .45s var(--ease-smooth); will-change: transform; }
/* real thickness: stacked page edges (right) + spine shadow (left) */
.cn-vol-3d::after { content: ""; position: absolute; top: 2%; bottom: 2%; right: -7px; width: 8px; transform: rotateY(32deg); transform-origin: left center; border-radius: 0 2px 2px 0; background: repeating-linear-gradient(180deg, var(--cream) 0 1px, var(--cream-muted) 1px 2px, #cdbf9a 2px 3px); box-shadow: inset -2px 0 4px rgba(0,0,0,.35); }
.cn-vol-3d::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 8px; border-radius: 2px 0 0 2px; background: linear-gradient(90deg, rgba(0,0,0,.45), transparent); z-index: 3; }

/* a numbered ribbon bookmark tucked into each volume — the pop of level colour */
.cn-step-no { position: absolute; top: -12px; right: 14%; z-index: 6; font-family: var(--f-mono); font-size: 10px; font-weight: 700; line-height: 1; color: #1A0F00; background: linear-gradient(180deg, var(--lac-2, var(--gold-2)), var(--lac, var(--gold))); padding: 6px 7px 12px; border-radius: 2px 2px 0 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%); box-shadow: 0 5px 11px -5px rgba(0,0,0,.55); }

/* ============ the three desktop presentations (Ali toggles between them) ============ */
@media (min-width: 721px) {
  /* VIEW 1 · BOOK ROW — clean dark, six 3D volumes standing in a row (Stripe/RUI) */
  .eb-showcase[data-view="row"] .cn-climb { display: grid; grid-template-columns: repeat(6, 1fr); align-items: end; gap: clamp(10px, 1.7vw, 24px); padding: clamp(26px, 4vw, 50px) clamp(4px, 1vw, 14px) 0; }
  .eb-showcase[data-view="row"] .cn-climb-step { display: flex; flex-direction: column; align-items: center; }
  .eb-showcase[data-view="row"] .cn-step-cap { padding-top: 22px; }
  .eb-showcase[data-view="row"] .cn-climb-step:hover .cn-vol-3d,
  .eb-showcase[data-view="row"] .cn-climb-step:focus-within .cn-vol-3d { transform: translateY(-12px) rotateX(6deg) scale(1.035); box-shadow: 18px 34px 56px -18px rgba(0,0,0,.85), 0 16px 34px -16px var(--lac-soft, var(--gold-glow)); }

  /* VIEW 2 · WARM SCENE — volumes resting on a warm, softly-lit heritage surface (Folio) */
  .eb-showcase[data-view="scene"] .cn-climb { display: grid; grid-template-columns: repeat(6, 1fr); align-items: end; gap: clamp(2px, 0.8vw, 12px); padding: clamp(56px, 8vw, 100px) clamp(16px, 4vw, 56px) clamp(52px, 6vw, 80px); border-radius: 24px; overflow: hidden; border: 1px solid var(--stroke); background: radial-gradient(120% 86% at 50% -8%, rgba(230,184,97,0.18), transparent 52%), linear-gradient(180deg, color-mix(in srgb, var(--gold-deep) 7%, var(--bg)), color-mix(in srgb, var(--gold-deep) 3%, var(--surface)) 66%, color-mix(in srgb, var(--gold-deep) 15%, var(--bg))); }
  /* the warm surface the volumes rest on */
  .eb-showcase[data-view="scene"] .cn-climb::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--gold-deep) 22%, var(--bg)) 44%, color-mix(in srgb, var(--gold-deep) 32%, #000) 100%); box-shadow: 0 -1px 0 color-mix(in srgb, var(--gold) 38%, transparent) inset; z-index: 0; pointer-events: none; }
  /* soft grain over the whole scene */
  .eb-showcase[data-view="scene"] .cn-climb::before { content: ""; position: absolute; inset: 0; background: url("/images/noise.png") repeat; opacity: .045; mix-blend-mode: overlay; pointer-events: none; z-index: 1; }
  .eb-showcase[data-view="scene"] .cn-climb-step { display: flex; flex-direction: column; align-items: center; z-index: 2; }
  .eb-showcase[data-view="scene"] .cn-vol-cover { transform-origin: bottom center; transition: transform .4s var(--ease-pop); }
  /* hand-placed lean + depth (applied to the cover so captions stay upright) */
  .eb-showcase[data-view="scene"] .cn-climb-step:nth-child(1) .cn-vol-cover { transform: rotate(-3.5deg) translateY(4px); }
  .eb-showcase[data-view="scene"] .cn-climb-step:nth-child(2) .cn-vol-cover { transform: rotate(1.5deg) translateY(-7px) scale(.965); }
  .eb-showcase[data-view="scene"] .cn-climb-step:nth-child(3) .cn-vol-cover { transform: rotate(-1deg) translateY(1px); }
  .eb-showcase[data-view="scene"] .cn-climb-step:nth-child(4) .cn-vol-cover { transform: rotate(2.5deg) translateY(-5px) scale(.975); }
  .eb-showcase[data-view="scene"] .cn-climb-step:nth-child(5) .cn-vol-cover { transform: rotate(-2deg) translateY(-2px); }
  .eb-showcase[data-view="scene"] .cn-climb-step:nth-child(6) .cn-vol-cover { transform: rotate(3deg) translateY(3px); }
  .eb-showcase[data-view="scene"] .cn-climb-step:hover .cn-vol-cover { transform: rotate(0deg) translateY(-14px) scale(1.05); }
  .eb-showcase[data-view="scene"] .cn-vol-3d { box-shadow: 16px 28px 46px -18px rgba(0,0,0,.82), 0 6px 16px -6px rgba(0,0,0,.6); }
  .eb-showcase[data-view="scene"] .cn-step-cap { padding-top: 18px; gap: 6px; position: relative; z-index: 3; }
  .eb-showcase[data-view="scene"] .cn-lib-cap-row { flex-direction: row; gap: 10px; }
  .eb-showcase[data-view="scene"] .cn-vol-buy { padding: 6px 13px; font-size: 11px; }

  /* VIEW 3 · STACK — a fanned deck; hover a volume to lift it out and reveal its buy (Stripe) */
  .eb-showcase[data-view="stack"] .cn-climb { display: block; height: clamp(400px, 46vw, 560px); padding: clamp(20px, 3vw, 40px) 0 0; }
  .eb-showcase[data-view="stack"] .cn-climb-step { position: absolute; left: 50%; bottom: clamp(40px, 6vw, 76px); width: clamp(160px, 16vw, 216px); z-index: var(--i, 0); transform-origin: bottom center; transform: translateX(-50%) translateX(calc((var(--i) - 2.5) * clamp(48px, 6.4vw, 96px))) rotate(calc((var(--i) - 2.5) * 7deg)); transition: transform .5s var(--ease-pop); }
  .eb-showcase[data-view="stack"] .cn-climb-step:hover { z-index: 20; transform: translateX(-50%) translateX(calc((var(--i) - 2.5) * clamp(48px, 6.4vw, 96px))) rotate(0deg) translateY(-42px) scale(1.08); }
  .eb-showcase[data-view="stack"] .cn-step-no { display: none; }
  .eb-showcase[data-view="stack"] .cn-step-cap { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%); width: max-content; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
  .eb-showcase[data-view="stack"] .cn-lib-cap-row { flex-direction: row; gap: 12px; }
  .eb-showcase[data-view="stack"] .cn-climb-step:hover .cn-step-cap { opacity: 1; pointer-events: auto; }
}

/* caption: level name in its colour, then price + buy (positioned per view) */
.cn-step-cap { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; text-align: center; }
.cn-step-level { font-family: var(--f-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--lac); }
.cn-lib-cap-row { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.cn-lib-cap-price { font-family: var(--f-display); font-weight: 700; font-size: 16px; color: var(--cream); white-space: nowrap; }
.cn-lib-cap-price.is-free { color: var(--green); }
/* the buy button — bold, filled (no bevel) */
.cn-vol-buy { font-family: var(--f-body); font-weight: 700; font-size: 12px; text-decoration: none; color: #1A0F00; background: linear-gradient(180deg, var(--gold-2), var(--gold)); padding: 8px 16px; border-radius: 999px; box-shadow: 0 9px 22px -11px var(--gold-glow); white-space: nowrap; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; }
.cn-vol-buy:hover { transform: translateY(-2px); box-shadow: 0 13px 28px -11px var(--gold-glow); filter: brightness(1.05); }
.cn-vol-buy.is-free { color: #05130C; background: linear-gradient(180deg, #6ad3a4, var(--green)); box-shadow: 0 9px 22px -11px rgba(77,191,142,.5); }

/* the bundle nudge — anchors AED 199-each against the plan that includes them all */
.cn-lib-bundle { margin: clamp(30px, 4vw, 46px) auto 0; max-width: 720px; display: flex; align-items: center; justify-content: space-between; gap: clamp(16px, 3vw, 30px); flex-wrap: wrap; padding: clamp(20px, 2.6vw, 28px) clamp(22px, 3vw, 32px); border-radius: 20px; border: 1px solid var(--stroke-strong); background: radial-gradient(130% 130% at 0% 0%, rgba(230,184,97,0.1), transparent 55%), linear-gradient(180deg, var(--surface-2), var(--surface)); }
.cn-lib-bundle-tx { flex: 1 1 320px; text-align: left; }
.cn-lib-bundle-title { display: block; font-family: var(--f-display); font-weight: 700; color: var(--cream); font-size: 17px; margin-bottom: 5px; }
.cn-lib-bundle-sub { font-family: var(--f-body); font-size: 13.5px; color: var(--secondary); line-height: 1.5; }
.cn-lib-bundle-sub b { color: var(--cream); }
.cn-lib-bundle-cta { flex: 0 0 auto; font-family: var(--f-body); font-weight: 700; font-size: 13.5px; text-decoration: none; color: #1A0F00; background: linear-gradient(180deg, var(--gold-2), var(--gold)); padding: 12px 22px; border-radius: 999px; box-shadow: 0 10px 26px -12px var(--gold-glow); white-space: nowrap; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; }
.cn-lib-bundle-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -12px var(--gold-glow); filter: brightness(1.05); }

/* touch / narrow: every view collapses to one clean vertical list of colour-tinted book cards */
@media (max-width: 720px) {
  /* Nav was overflowing at phone widths — "Log in" wrapped to two lines and the
     bar ballooned to ~99px. Tighten spacing and drop the redundant "Home" link
     (the brand logo already links home) so it stays one clean row. */
  .cn-bar { padding: 12px 18px; gap: 10px; }
  .cn-bar-right { gap: 4px; }
  .cn-nav-link, .cn-login { padding: 8px 11px; font-size: 14px; }
  .cn-nav-link[href="/"] { display: none; }
  .eb-toggle { display: none; }
  .cn-climb { display: grid; grid-template-columns: 1fr; padding: 4px 0 0; gap: 12px; }
  .cn-climb-step { display: flex; transform: none; flex-direction: row; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--lac) 32%, var(--stroke)); background: radial-gradient(120% 130% at 0% 0%, var(--lac-soft), transparent 60%), linear-gradient(180deg, var(--surface-2), var(--surface)); }
  /* number moves off the artwork and into the level label so it never clips the title */
  .cn-step-no { display: none; }
  .cn-vol-cover { width: 90px; flex: 0 0 auto; }
  .cn-step-cap { align-items: flex-start; text-align: left; padding: 0; flex: 1; gap: 9px; }
  .cn-step-level { font-size: 11px; }
  .cn-step-level::before { content: counter(climbstep, decimal-leading-zero) " · "; opacity: .85; }
  .cn-lib-cap-row { flex-direction: row; align-items: center; gap: 14px; }
  .cn-lib-bundle { flex-direction: column; align-items: stretch; text-align: center; }
  .cn-lib-bundle-tx { text-align: center; }
  .cn-lib-bundle-cta { text-align: center; }
}
/* reduced motion: drop the hover/press transitions */
@media (prefers-reduced-motion: reduce) {
  .cn-vol-3d, .cn-vol-buy, .cn-lib-bundle-cta { transition: none; }
}

/* ---- Business track ---- */
.cn-biz { padding: clamp(48px, 7vw, 84px) 0 0; }
.cn-biz-pieces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cn-biz-piece { padding: 24px; border-radius: 18px; border: 1px solid var(--stroke); background: linear-gradient(180deg, var(--surface-2), var(--surface)); }
.cn-biz-no { font-family: var(--f-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--green); }
.cn-biz-piece h3 { font-size: 18px; margin: 10px 0 8px; }
.cn-biz-piece p { font-family: var(--f-body); font-size: 14px; color: var(--secondary); line-height: 1.5; }
.cn-biz-dash { margin: clamp(22px, 3vw, 30px) auto 0; max-width: 640px; padding: 22px 24px; border-radius: 20px; border: 1px solid var(--stroke-strong); background: radial-gradient(120% 100% at 50% 0%, rgba(77,191,142,0.08), transparent 60%), linear-gradient(180deg, var(--surface-2), var(--surface)); }
.cn-biz-dash-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.cn-biz-dash-title { font-family: var(--f-display); font-weight: 700; color: var(--cream); font-size: 16px; }
.cn-biz-dash-sub { font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cn-biz-kpis { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 16px; }
.cn-biz-kpis span { font-family: var(--f-body); font-size: 13px; color: var(--secondary); }
.cn-biz-kpis b { font-family: var(--f-mono); color: var(--gold); font-size: 16px; margin-right: 3px; }
.cn-biz-bars { display: flex; flex-direction: column; gap: 7px; }
.cn-biz-bars i { display: block; height: 8px; border-radius: 999px; width: var(--w); background: linear-gradient(90deg, var(--gold-deep), var(--gold)); }

/* ---- comparison (compact) ---- */
.cn-compare, .cn-work, .cn-faq, .cn-voices { padding: clamp(54px, 8vw, 92px) 0 0; }
/* the compare table now sits right under the pricing cards — tighten that one gap */
.cn-plans + .cn-compare { padding-top: clamp(10px, 2.2vw, 24px); }
.cn-vs { border: 1px solid var(--stroke); border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, var(--surface-2), var(--surface)); }
.cn-vs-head { display: grid; grid-template-columns: 1fr 1fr; font-family: var(--f-display); font-weight: 700; font-size: 14px; }
.cn-vs-head span { padding: 12px 18px; }
.cn-vs-head span:first-child { color: var(--gold); }
.cn-vs-head span:last-child { color: var(--muted); border-left: 1px solid var(--stroke); }
.cn-vs .vs-row { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--stroke); position: relative; }
.cn-vs .vs-k { display: none; }
.cn-vs .vs-us, .cn-vs .vs-them { display: flex; gap: 9px; padding: 14px 18px; font-family: var(--f-body); font-size: 13.5px; line-height: 1.45; }
.cn-vs .vs-them { border-left: 1px solid var(--stroke); color: var(--secondary); }
.cn-vs .vs-us { color: var(--cream); }
.cn-vs .vs-ic { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.cn-vs .vs-ic svg { width: 16px; height: 16px; }
.cn-vs .vs-ic-yes { color: var(--green); }
.cn-vs .vs-ic-no { color: var(--coral); opacity: .8; }

/* ---- Learning for work? ---- */
/* cn-work was the lone left-aligned text block among centered sections, leaving
   the whole right half of the row empty (its 20ch/56ch max-widths were built for
   a two-column layout that never got a right column). Center it to match the
   page rhythm and close the void. */
.cn-work .wrap-narrow { text-align: center; }
.cn-work .cn-h2 { max-width: 20ch; margin-inline: auto; }
.cn-work-p { font-family: var(--f-body); font-size: 15px; color: var(--secondary); line-height: 1.6; max-width: 56ch; margin: 0 auto; }
.cn-work-chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0; margin: 18px 0; }
.cn-work-chips li { font-family: var(--f-body); font-size: 13px; color: var(--cream-muted); padding: 6px 13px; border-radius: 999px; border: 1px solid var(--stroke); background: var(--chip-bg); }
.cn-work-price { font-family: var(--f-body); font-size: 14px; color: var(--cream-muted); margin: 0; }
.cn-work-price b { color: var(--gold); }

/* ---- Authority proof ---- */

/* faq */
.cn-faq [data-kit="faq"] { max-width: 720px; margin: 0 auto; }

/* close */
.cn-final { padding: clamp(46px, 7vw, 80px) 0 0; text-align: center; }
.cn-final-saqr { display: block; width: clamp(112px, 16vw, 156px); height: auto; margin: 0 auto 8px; filter: drop-shadow(0 16px 28px rgba(0,0,0,.42)); }
.cn-final-title { font-size: clamp(1.7rem, 3.6vw, 2.5rem); margin-bottom: 12px; }
.cn-final-sub { font-family: var(--f-body); font-size: 15px; color: var(--secondary); margin: 0 auto 22px; max-width: 44ch; }

/* Saqr in the "Sound familiar?" beat */
.cn-problem-saqr { display: block; width: clamp(96px, 13vw, 132px); height: auto; margin: 0 auto 14px; filter: drop-shadow(0 14px 24px rgba(0,0,0,.4)); }

/* ---- sticky mobile CTA ---- */
.cn-sticky { position: fixed; left: 50%; bottom: 14px; z-index: 90; display: flex; align-items: center; gap: 14px; width: min(540px, calc(100vw - 24px)); padding: 9px 10px 9px 18px; border-radius: 16px; border: 1px solid var(--stroke-strong); background: var(--bg-2); box-shadow: 0 22px 50px -22px rgba(0,0,0,.85); transform: translate(-50%, 150%); opacity: 0; transition: transform .3s var(--ease-bounce), opacity .3s; }
.cn-sticky.show { transform: translate(-50%, 0); opacity: 1; }
.cn-sticky-label { flex: 1; min-width: 0; font-family: var(--f-body); font-size: 13.5px; font-weight: 600; color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-sticky-btn { flex: none; }
@media (min-width: 761px) { .cn-sticky { display: none; } }

/* ---- responsive ---- */
@media (max-width: 860px) {
  .cn-biz-pieces { grid-template-columns: 1fr; }
  .cn-book-hero { grid-template-columns: 1fr; gap: 34px; text-align: center; }
  .cn-book-copy { max-width: none; }
  .cn-book-prices, .cn-book-copy .cn-kicker { justify-content: center; }
  .cn-book-copy .cn-h2 { text-align: center; }
}
/* phones: swipe the demo slides, drop the side arrows */
@media (max-width: 560px) {
  .cn-show-arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cn-book-3d, .cn-seg-pill, .cn-sticky, .cn-show-pill { transition: none; }
  .cn-slide { animation: none; }
  .pp-mic { animation: none !important; }
  .ai-orb { animation: none !important; }
}

/* ============================== value stack (pricing page only) ============================== */
.cn-valuestack { padding: clamp(40px, 6vw, 68px) 0; }
.cn-vs-lede { font-family: var(--f-body); font-size: 15px; color: var(--secondary); line-height: 1.6; max-width: 52ch; margin: 12px auto 0; }
/* the What's-Inside card — one rich card: each tool is an icon + name + one line
   of what it does, with its sold-separately price; footer anchors the total. */
.vs-ledger {
  list-style: none; margin: clamp(24px,4vw,36px) auto 0; padding: clamp(8px,1.4vw,16px) clamp(14px,2.4vw,26px);
  max-width: 640px; border-radius: 20px;
  border: 1px solid var(--stroke);
  background: radial-gradient(130% 60% at 50% 0%, rgba(230,184,97,.06), transparent 60%), linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: 0 26px 60px -38px rgba(0,0,0,.6);
}
.vs-row { display: flex; align-items: center; gap: 14px; padding: 15px 2px; border-bottom: 1px solid var(--stroke); }
.vs-row:last-child { border-bottom: 0; }
.vs-ico { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: var(--gold); background: radial-gradient(120% 120% at 50% 0%, rgba(230,184,97,.16), rgba(230,184,97,.05)); border: 1px solid var(--gold-deep); }
.vs-ico svg { width: 22px; height: 22px; }
.vs-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.vs-name { font-family: var(--f-body); font-weight: 700; font-size: 15px; color: var(--cream); }
.vs-desc { font-family: var(--f-body); font-size: 12.5px; line-height: 1.45; color: var(--secondary); }
.vs-price { flex: none; align-self: center; font-family: var(--f-mono); font-size: 14px; font-weight: 700; color: var(--cream-muted); font-variant-numeric: tabular-nums; }
.vs-total {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  max-width: 640px; margin: 16px auto 0; padding: 16px 22px; border-radius: 16px;
  background: radial-gradient(120% 170% at 50% 0%, rgba(230,184,97,.15), transparent 70%), var(--surface-2);
  border: 1px solid var(--gold-deep, var(--stroke));
}
.vs-total-tx { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.vs-total-label { font-family: var(--f-body); font-weight: 700; font-size: 15px; color: var(--cream); }
.vs-total-note { font-family: var(--f-body); font-size: 12.5px; color: var(--secondary); }
.vs-total-price { flex: none; font-family: var(--f-display); font-weight: 700; font-size: clamp(22px, 4vw, 28px); color: var(--gold); font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .vs-desc { display: none; } }

/* ============================== book bundles (pricing page) ============================== */
.eb-bundles { margin-top: clamp(46px, 7vw, 78px); }
.eb-bundle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 900px; margin: clamp(28px,4vw,40px) auto 0; align-items: stretch; }
@media (max-width: 780px) { .eb-bundle-grid { grid-template-columns: 1fr; max-width: 420px; } }
.eb-bundle {
  position: relative; display: flex; flex-direction: column; gap: 7px;
  padding: 26px 22px 22px; border-radius: 18px; text-decoration: none;
  border: 1px solid var(--stroke); background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: 0 24px 52px -34px rgba(0,0,0,.6);
  transition: transform .38s var(--ease-smooth), box-shadow .38s var(--ease-smooth), border-color .3s var(--ease-smooth);
}
@media (hover: hover) { .eb-bundle:hover { transform: translateY(-6px); border-color: var(--gold-deep); box-shadow: 0 40px 78px -34px rgba(0,0,0,.66), 0 16px 48px -30px var(--gold-glow); } }
.eb-bundle.is-feat { border-color: transparent; background: radial-gradient(130% 90% at 50% 0%, rgba(230,184,97,.16), transparent 56%), linear-gradient(180deg, var(--surface-2), var(--surface)); box-shadow: 0 34px 78px -34px rgba(0,0,0,.72), 0 18px 54px -32px var(--gold-glow); }
.eb-bundle-ribbon { position: absolute; top: 14px; right: 14px; font-family: var(--f-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #1A0F00; background: linear-gradient(180deg, var(--gold-2), var(--gold)); padding: 4px 9px; border-radius: 999px; }
.eb-bundle-tag { font-family: var(--f-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.eb-bundle-name { font-family: var(--f-display); font-weight: 700; font-size: 20px; color: var(--cream); line-height: 1.15; }
.eb-bundle-desc { font-family: var(--f-body); font-size: 13.5px; line-height: 1.5; color: var(--secondary); }
.eb-bundle-price { display: flex; align-items: baseline; gap: 9px; margin-top: 12px; }
.eb-bundle-price s { font-family: var(--f-mono); font-size: 13px; color: var(--muted); text-decoration-thickness: 1px; }
.eb-bundle-price b { font-family: var(--f-display); font-weight: 700; font-size: 24px; color: var(--cream); }
.eb-bundle-cta { margin-top: 14px; font-family: var(--f-body); font-weight: 700; font-size: 14px; color: var(--gold); transition: color .2s var(--ease-smooth); }
@media (hover: hover) { .eb-bundle:hover .eb-bundle-cta { color: var(--gold-2); } }

/* ============================== the Lsany Library (pricing page) ============================== */
.cn-library-sec { padding: clamp(48px, 7vw, 84px) 0; }
.lib-hero { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: clamp(30px, 6vw, 64px); align-items: center; margin-top: clamp(28px,4vw,44px); }
@media (max-width: 820px) { .lib-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
.lib-obj { display: grid; place-items: center; perspective: 1200px; }
.lib-tome { position: relative; width: 236px; height: 312px; transform: rotateY(-14deg) rotateX(4deg); transform-style: preserve-3d; }
@media (max-width: 820px) { .lib-tome { transform: none; } }
.lib-tome::before {
  content: ""; position: absolute; top: 8px; bottom: 8px; right: -15px; width: 22px;
  border-radius: 2px 5px 5px 2px;
  background: repeating-linear-gradient(180deg, var(--surface) 0 2px, var(--surface-2) 2px 4px);
  box-shadow: 4px 6px 18px rgba(0,0,0,.45);
  transform: skewY(-8deg);
}
.lib-tome-spine { position: absolute; left: 0; top: 0; bottom: 0; width: 13px; border-radius: 6px 0 0 6px; background: linear-gradient(180deg, var(--gold-2), var(--gold)); box-shadow: inset -2px 0 4px rgba(0,0,0,.3); }
.lib-tome-face {
  position: relative; z-index: 1; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border-radius: 5px 12px 12px 5px; padding: 24px;
  background: radial-gradient(120% 80% at 50% 18%, rgba(230,184,97,.10), transparent 60%), linear-gradient(155deg, var(--surface-2), var(--surface));
  border: 1px solid var(--gold-deep);
  box-shadow: inset 0 0 0 1px rgba(230,184,97,.14), -26px 34px 66px -32px rgba(0,0,0,.72);
}
.lib-tome-mark { font-family: var(--f-display); font-weight: 700; font-size: 30px; color: var(--gold); }
.lib-tome-title { font-family: var(--f-body); font-weight: 700; font-size: 14px; color: var(--cream); text-transform: uppercase; letter-spacing: .18em; }
.lib-tome-sub { font-family: var(--f-mono); font-size: 11px; color: var(--secondary); letter-spacing: .08em; margin-top: 2px; }
.lib-lead { font-family: var(--f-body); font-size: clamp(16px, 2.4vw, 18.5px); line-height: 1.55; color: var(--cream); margin: 0; }
.lib-feats { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.lib-feat { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: baseline; }
@media (max-width: 820px) { .lib-feat { grid-template-columns: 1fr; gap: 2px; text-align: center; } }
.lib-feat-k { font-family: var(--f-mono); font-weight: 700; font-size: 13px; color: var(--gold); letter-spacing: .02em; }
.lib-feat-v { font-family: var(--f-body); font-size: 14.5px; line-height: 1.5; color: var(--secondary); }
.lib-buy { display: flex; align-items: center; gap: 18px; margin-top: 26px; flex-wrap: wrap; }
@media (max-width: 820px) { .lib-buy { justify-content: center; } }
.lib-price { font-family: var(--f-display); font-weight: 700; font-size: clamp(24px, 4vw, 30px); color: var(--cream); }
.lib-note { font-family: var(--f-body); font-size: 12.5px; color: var(--muted); margin: 14px 0 0; }

/* ============================== industry-packs CTA band (pricing page) ============================== */
.cn-work-cta { padding: clamp(30px, 4vw, 46px) 0; }
.work-band {
  display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap;
  padding: clamp(24px, 3.5vw, 36px); border-radius: 20px;
  border: 1px solid var(--stroke);
  background: radial-gradient(130% 120% at 100% 0%, rgba(230,184,97,.10), transparent 60%), linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: 0 26px 56px -36px rgba(0,0,0,.6);
}
.work-band-tx { flex: 1 1 340px; }
.work-band-title { font-family: var(--f-display); font-weight: 700; font-size: clamp(20px, 3vw, 25px); color: var(--cream); margin: 8px 0 8px; }
.work-band-sub { font-family: var(--f-body); font-size: 14.5px; line-height: 1.55; color: var(--secondary); margin: 0; max-width: 52ch; }
.work-band .btn { flex: none; }
@media (max-width: 620px) { .work-band { justify-content: flex-start; } }

/* ============================================================================
   THE BOOKSHOP — preview-only display switcher (5 tactile modes) + bundle fans.
   Ali picks one mode on device; the losing four blocks get deleted before ship.
   Covers are ~200x319 (ratio .627). Every mode keeps each book buyable.
   ============================================================================ */

/* the mode switcher */
.shop-modes { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; width: max-content; max-width: 100%; margin: 0 auto clamp(24px, 3.6vw, 38px); padding: 5px; border-radius: 999px; border: 1px solid var(--stroke); background: color-mix(in srgb, var(--surface-2) 62%, transparent); }
.shop-mode { font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--secondary); background: none; border: 0; padding: 9px 15px; border-radius: 999px; cursor: pointer; transition: color .2s ease, background .2s ease; }
.shop-mode:hover { color: var(--cream); }
.shop-mode.is-on { color: #1A0F00; background: linear-gradient(180deg, var(--gold-2), var(--gold)); box-shadow: 0 6px 16px -8px var(--gold-glow); }
.shop-stage { max-width: 720px; margin: 0 auto; }
.shop-stage img { display: block; width: 100%; height: auto; border-radius: 3px 6px 6px 3px; box-shadow: 10px 16px 30px -14px rgba(0,0,0,.75), 0 0 0 1px rgba(0,0,0,.28); }

/* shared caption / buy for single-active modes */
.shop-cap { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; margin-top: 18px; }
.shop-cap-level { font-family: var(--f-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.shop-cap-name { font-family: var(--f-display); font-weight: 700; font-size: 19px; color: var(--cream); }
.shop-cap-price { font-family: var(--f-body); font-weight: 700; font-size: 15px; color: var(--cream-muted); }
.shop-cap-price.is-free { color: var(--green); }
.shop-buy { font-family: var(--f-body); font-weight: 700; font-size: 13.5px; text-decoration: none; color: #1A0F00; background: linear-gradient(180deg, var(--gold-2), var(--gold)); padding: 10px 20px; border-radius: 999px; box-shadow: 0 10px 24px -12px var(--gold-glow); transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; }
.shop-buy:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px var(--gold-glow); filter: brightness(1.05); }
.shop-buy.is-free { color: #05130C; background: linear-gradient(180deg, #6ad3a4, var(--green)); box-shadow: 0 10px 24px -12px rgba(77,191,142,.5); }
.shop-nav { display: flex; justify-content: center; gap: 14px; margin-top: 6px; }
.shop-arrow { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--stroke); background: var(--chip-bg); color: var(--gold); font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: border-color .16s, transform .12s var(--ease-bounce), background .16s; }
.shop-arrow:hover { border-color: var(--gold); transform: scale(1.06); }
.shop-arrow:active { transform: scale(.92); }

/* MODE 1 · Crate flip */
.crate-bin { position: relative; height: clamp(300px, 42vw, 400px); perspective: 1500px; }
.crate-item { position: absolute; left: 50%; bottom: 4%; width: clamp(150px, 21vw, 210px); transform-origin: bottom center; transition: transform .5s var(--ease-pop), opacity .4s ease; cursor: pointer; }
.crate-item.is-front { cursor: default; }

/* MODE 2 · Bookshelf */
.bs { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.bs-pop { min-height: clamp(290px, 40vw, 372px); display: flex; align-items: flex-end; justify-content: center; width: 100%; }
.bs-pop-card { display: flex; flex-direction: column; align-items: center; gap: 14px; opacity: 0; transform: translateY(16px); animation: bs-pop-in .45s var(--ease-pop) forwards; }
.bs-pop-card img { width: clamp(160px, 22vw, 208px); }
@keyframes bs-pop-in { to { opacity: 1; transform: none; } }
.bs-shelf { display: flex; align-items: flex-end; justify-content: center; gap: clamp(6px, 1.2vw, 12px); width: 100%; padding-bottom: 14px; position: relative; }
.bs-shelf::after { content: ""; position: absolute; left: -3%; right: -3%; bottom: 0; height: 9px; border-radius: 0 0 7px 7px; background: linear-gradient(180deg, var(--gold-deep), color-mix(in srgb, var(--gold-deep) 40%, #000)); box-shadow: 0 8px 18px -8px rgba(0,0,0,.7); }
.bs-spine { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 8px; width: clamp(40px, 5.2vw, 54px); height: clamp(196px, 27vw, 256px); padding: 14px 4px; border: 0; cursor: pointer; border-radius: 3px 5px 5px 3px; background: linear-gradient(180deg, color-mix(in srgb, var(--sc) 82%, #000), color-mix(in srgb, var(--sc) 52%, #000)); box-shadow: inset -3px 0 6px rgba(0,0,0,.4), inset 3px 0 3px rgba(255,255,255,.12), 4px 8px 16px -6px rgba(0,0,0,.6); transition: transform .35s var(--ease-pop), box-shadow .35s ease; transform-origin: bottom center; }
.bs-spine:hover { transform: translateY(-9px); }
.bs-spine.is-out { transform: translateY(-16px); box-shadow: inset -3px 0 6px rgba(0,0,0,.4), 0 14px 26px -8px rgba(0,0,0,.7), 0 0 0 2px color-mix(in srgb, var(--sc) 60%, transparent); }
.bs-spine-no { font-family: var(--f-mono); font-size: 10px; font-weight: 700; color: #1A0F00; background: rgba(255,255,255,.72); border-radius: 3px; padding: 2px 4px; flex: none; }
.bs-spine-name { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--f-display); font-weight: 700; font-size: clamp(11px, 1.4vw, 13px); color: #fff; white-space: nowrap; overflow: hidden; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.bs-spine-level { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--f-mono); font-size: 8.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.72); white-space: nowrap; flex: none; }

/* MODE 3 · Tilt gallery */
.tg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2.2vw, 26px); }
@media (max-width: 620px) { .tg-grid { grid-template-columns: repeat(2, 1fr); } }
.tg-card { perspective: 900px; }
.tg-inner { position: relative; transform-style: preserve-3d; transition: transform .3s var(--ease-smooth), box-shadow .3s var(--ease-smooth); cursor: pointer; will-change: transform; border-radius: 3px 6px 6px 3px; }
.tg-card:hover .tg-inner { box-shadow: 0 26px 44px -20px rgba(0,0,0,.7); }
.tg-info { position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 34px 10px 12px; border-radius: 0 0 6px 3px; background: linear-gradient(180deg, transparent, rgba(6,16,14,.94) 44%); opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; pointer-events: none; }
.tg-card:hover .tg-info, .tg-card:focus-within .tg-info { opacity: 1; transform: none; pointer-events: auto; }
.tg-level { font-family: var(--f-mono); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.tg-name { font-family: var(--f-display); font-weight: 700; font-size: 14px; color: var(--cream); }
.tg-price { font-family: var(--f-body); font-weight: 700; font-size: 12.5px; color: var(--cream-muted); }
.tg-price.is-free { color: var(--green); }
.tg-info .shop-buy { padding: 7px 15px; font-size: 12px; margin-top: 3px; }
@media (hover: none) { .tg-info { position: static; opacity: 1; transform: none; pointer-events: auto; background: none; padding: 11px 4px 0; border-radius: 0; } }

/* MODE 4 · Riffle stack */
.rs-pile { position: relative; height: clamp(320px, 44vw, 420px); }
.rs-card { position: absolute; left: 50%; top: 50%; width: clamp(168px, 22vw, 218px); transform-origin: center; transition: transform .45s var(--ease-pop), opacity .4s ease; cursor: pointer; }

/* MODE 5 · Coverflow */
.cf-stage { position: relative; height: clamp(320px, 44vw, 420px); perspective: 1200px; }
.cf-item { position: absolute; left: 50%; top: 0; width: clamp(168px, 22vw, 218px); margin-left: calc(clamp(168px, 22vw, 218px) / -2); transform-origin: center center; transition: transform .5s var(--ease-smooth), opacity .5s ease; cursor: pointer; }
.cf-item.is-active { cursor: default; }
.cf-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.cf-dot { width: 8px; height: 8px; border-radius: 999px; border: 0; padding: 0; cursor: pointer; background: var(--stroke-strong); transition: background .2s, transform .2s var(--ease-bounce); }
.cf-dot.is-on { background: var(--gold); transform: scale(1.3); }

/* the bundle shelves — a fan of each set's real covers */
.eb-bd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 900px; margin: clamp(28px, 4vw, 40px) auto 0; align-items: stretch; }
@media (max-width: 780px) { .eb-bd-grid { grid-template-columns: 1fr; max-width: 420px; } }
.eb-bd { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 26px 22px 24px; border-radius: 18px; text-decoration: none; border: 1px solid var(--stroke); background: linear-gradient(180deg, var(--surface-2), var(--surface)); box-shadow: 0 24px 52px -34px rgba(0,0,0,.6); transition: transform .38s var(--ease-smooth), box-shadow .38s var(--ease-smooth), border-color .3s var(--ease-smooth); }
@media (hover: hover) { .eb-bd:hover { transform: translateY(-6px); border-color: var(--gold-deep); box-shadow: 0 40px 78px -34px rgba(0,0,0,.66), 0 16px 48px -30px var(--gold-glow); } }
.eb-bd.is-feat { border-color: transparent; background: radial-gradient(130% 90% at 50% 0%, rgba(230,184,97,.16), transparent 56%), linear-gradient(180deg, var(--surface-2), var(--surface)); box-shadow: 0 34px 78px -34px rgba(0,0,0,.72), 0 18px 54px -32px var(--gold-glow); }
.eb-bd-ribbon { position: absolute; top: 14px; right: 14px; font-family: var(--f-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #1A0F00; background: linear-gradient(180deg, var(--gold-2), var(--gold)); padding: 4px 9px; border-radius: 999px; }
.eb-bd-fan { width: 100%; max-width: 240px; height: 128px; margin: 4px auto 14px; }
.eb-bd-fan.pv-fan .pv-fan-c { width: 56px; }
.eb-bd-tag { font-family: var(--f-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.eb-bd-name { font-family: var(--f-display); font-weight: 700; font-size: 20px; color: var(--cream); line-height: 1.15; }
.eb-bd-desc { font-family: var(--f-body); font-size: 13.5px; line-height: 1.5; color: var(--secondary); max-width: 30ch; }
.eb-bd-price { display: flex; align-items: baseline; justify-content: center; gap: 9px; margin-top: 12px; }
.eb-bd-price s { font-family: var(--f-mono); font-size: 13px; color: var(--muted); text-decoration-thickness: 1px; }
.eb-bd-price b { font-family: var(--f-display); font-weight: 700; font-size: 24px; color: var(--cream); }
.eb-bd-cta { margin-top: 14px; font-family: var(--f-body); font-weight: 700; font-size: 14px; color: var(--gold); transition: color .2s var(--ease-smooth); }
@media (hover: hover) { .eb-bd:hover .eb-bd-cta { color: var(--gold-2); } }

/* reduced motion: the switcher modes settle instantly */
@media (prefers-reduced-motion: reduce) {
  .crate-item, .bs-spine, .bs-pop-card, .tg-inner, .rs-card, .cf-item, .shop-buy, .shop-arrow, .eb-bd, .eb-bd-cta { transition: none !important; animation: none !important; }
}