@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&family=Noto+Sans+Devanagari:wght@300;400;600&display=swap');

/* ─── Tokens ─────────────────────────────────────────────────────── */
:root {
  --bur:     #7B2D2D;
  --sf:      #C4621D;
  --sf-pale: #FFF3EC;
  --sf-l:    #E8A87C;
  --parch:   #FAF6F0;
  --parch2:  #D4B896;
  --ink:     #1A1A1A;
  --ink-m:   #3D3D3D;
  --stone:   #6B6560;
  --stone-l: #B8B0A8;
  --bdr:     #E8E0D6;
  --bdr-m:   #D4C8BC;
  --r:       4px;
  --sh:      0 2px 12px rgba(0,0,0,.06);
}

/* ─── Reset / base ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { font-size: 16px; }
body  { font-family: 'DM Sans', system-ui, sans-serif; font-weight: 300; background: var(--parch); color: var(--ink); line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; }
a     { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ─── Layout ─────────────────────────────────────────────────────── */
.wrap  { max-width: 780px; margin: 0 auto; padding: 0 1.5rem; width: 100%; }
.wrap.ph { padding-top: 2.5rem; }
main   { flex: 1; padding-bottom: 4rem; }

/* ─── Nav ────────────────────────────────────────────────────────── */
nav         { background: #fff; border-bottom: 1px solid var(--bdr); padding: .85rem 1.5rem; display: flex; align-items: center; gap: 1.5rem; position: sticky; top: 0; z-index: 100; }
.n-logo     { display: flex; align-items: center; gap: .4rem; font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; font-weight: 600; color: var(--bur); cursor: pointer; white-space: nowrap; }
.om         { font-size: 1.2rem; }
.n-links    { display: flex; gap: .25rem; flex: 1; }
.n-link     { background: none; border: none; font-size: .82rem; font-weight: 400; color: var(--stone); padding: .35rem .65rem; border-radius: 2px; cursor: pointer; transition: color .18s; white-space: nowrap; }
.n-link:hover, .n-link.on { color: var(--bur); }
.n-link.on  { font-weight: 500; }
.n-right    { display: flex; align-items: center; gap: .35rem; margin-left: auto; }
.n-sep      { display: none; }
.lang       { background: none; border: 1px solid var(--bdr); font-size: .72rem; font-weight: 500; color: var(--stone); padding: .2rem .5rem; border-radius: 2px; cursor: pointer; letter-spacing: .04em; transition: all .18s; }
.lang:hover, .lang.on { border-color: var(--bur); color: var(--bur); }

/* ─── Footer ─────────────────────────────────────────────────────── */
footer       { background: #fff; border-top: 1px solid var(--bdr); padding: 1.5rem; text-align: center; font-size: .8rem; font-weight: 300; color: var(--stone); }
.footer-main { margin-bottom: .4rem; }
.footer-note { font-size: .72rem; color: var(--stone); opacity: .7; line-height: 1.6; }
.footer-note a { color: var(--stone); text-underline-offset: 2px; text-decoration: underline; }
.footer-note a:hover { color: var(--bur); }

/* ─── Loading / error states ────────────────────────────────────── */
.loading-state, .error-state { text-align: center; padding: 4rem 2rem; font-size: .9rem; font-weight: 300; color: var(--stone); }

/* ─── Home hero ──────────────────────────────────────────────────── */
.hero      { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; padding: 3.5rem 0 3rem; position: relative; overflow: hidden; }
.hero-bg   { position: absolute; right: 50%; top: 50%; transform: translate(50%,-50%); font-size: 18rem; font-family: 'Noto Sans Devanagari', serif; color: var(--bdr); opacity: .35; pointer-events: none; line-height: 1; user-select: none; }
.hero-c    { position: relative; z-index: 1; }
.eyebrow   { font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--sf); margin-bottom: .75rem; }
.h-title   { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.7rem,3.5vw,2.6rem); font-weight: 300; color: var(--bur); line-height: 1.2; margin-bottom: 1rem; }
.h-body    { font-size: .92rem; font-weight: 300; color: var(--ink-m); line-height: 1.8; }
.hero-topics       { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; font-size: .82rem; }
.hero-topics-label { color: var(--stone); font-weight: 300; }
.hero-topic-link   { background: none; border: none; padding: 0; font-size: .82rem; font-weight: 400; color: var(--bur); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.hero-topic-link:hover { color: var(--sf); }
.hero-topics-sep   { color: var(--stone-l); }
.hero-levels { display: flex; flex-direction: column; gap: .75rem; position: relative; z-index: 1; }

/* ─── Level cards (hero) ─────────────────────────────────────────── */
.lc          { background: #fff; border: 1px solid var(--bdr); border-radius: var(--r); padding: 1.25rem 1.25rem; cursor: pointer; transition: border-color .18s, box-shadow .18s; display: flex; flex-direction: column; gap: .35rem; }
.lc:hover    { border-color: var(--sf); box-shadow: var(--sh); }
.lc-title    { font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; font-weight: 600; color: var(--bur); }
.lc-sub      { font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sf); }
.lc-desc     { font-size: .8rem; font-weight: 300; color: var(--stone); line-height: 1.5; }
.lc-cta      { align-self: flex-start; margin-top: .25rem; font-size: .78rem; font-weight: 500; color: var(--bur); background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ─── Purchase cards ─────────────────────────────────────────────── */
.sec-h2        { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.4rem,2.5vw,2rem); font-weight: 300; color: var(--bur); margin-bottom: 1.75rem; }
.purchase-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; margin-bottom: 3rem; }
.pc             { background: #fff; border: 1px solid var(--bdr); border-radius: var(--r); padding: 1.5rem; display: flex; flex-direction: column; gap: .5rem; }
.pc-membership  { background: var(--parch); }
.pc-tag         { font-size: .6rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--stone); }
.pc-title       { font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; font-weight: 600; color: var(--bur); }
.pc-desc        { font-size: .82rem; font-weight: 300; color: var(--stone); line-height: 1.6; flex: 1; }
.pc-cta         { align-self: flex-start; margin-top: .5rem; padding: .45rem 1.1rem; background: var(--bur); color: #fff; border: none; border-radius: 2px; font-size: .8rem; font-weight: 500; cursor: pointer; transition: background .18s; }
.pc-cta:hover   { background: var(--sf); }
.pc-cta-soon    { background: var(--stone-l); color: var(--stone); cursor: default; }
.pc-cta-soon:hover { background: var(--stone-l); }

/* ─── Credibility ────────────────────────────────────────────────── */
.credibility { font-size: .85rem; font-weight: 300; color: var(--stone); line-height: 1.6; padding: 1.5rem 0; border-top: 1px solid var(--bdr); display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; margin-bottom: 0; }
.cred-link   { background: none; border: none; padding: 0; font-size: .85rem; font-weight: 500; color: var(--bur); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ─── Quote banner ───────────────────────────────────────────────── */
.qb      { background: var(--bur); color: #fff; text-align: center; padding: 3.5rem 2rem; }
.qb-dv   { font-family: 'Noto Sans Devanagari', serif; font-size: 1.4rem; opacity: .9; margin-bottom: .5rem; }
.qb-lat  { font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; font-style: italic; opacity: .8; margin-bottom: 1rem; }
.qb-tr   { font-size: .95rem; font-weight: 300; opacity: .9; line-height: 1.6; max-width: 480px; margin: 0 auto .75rem; }
.qb-attr { font-size: .72rem; font-weight: 300; opacity: .6; letter-spacing: .08em; }

/* ─── Shelf / topic pages ────────────────────────────────────────── */
.p-title   { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.8rem,4vw,2.8rem); font-weight: 300; color: var(--bur); margin: .5rem 0 .75rem; }
.p-sub     { font-size: .9rem; font-weight: 300; color: var(--stone); line-height: 1.7; margin-bottom: 2rem; }
.back-btn  { background: none; border: none; font-size: .8rem; color: var(--stone); cursor: pointer; padding: 0; margin-bottom: 1.5rem; display: block; }
.back-btn:hover { color: var(--bur); }
.sec-label { font-size: .65rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--stone); margin-bottom: 1rem; }

/* ─── Bundle grid (shelf/level/mantras pages) ────────────────────── */
.bundles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 1rem; margin-bottom: 3rem; }
.bc           { background: #fff; border: 1px solid var(--bdr); border-radius: var(--r); padding: 1.25rem; cursor: pointer; transition: border-color .18s, box-shadow .18s; display: flex; flex-direction: column; gap: .5rem; }
.bc:hover     { border-color: var(--sf); box-shadow: var(--sh); }
.bc-name      { font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; font-weight: 600; color: var(--bur); }
.bc-desc      { font-size: .8rem; font-weight: 300; color: var(--stone); line-height: 1.55; flex: 1; }
.bc-foot      { display: flex; align-items: center; justify-content: space-between; font-size: .75rem; color: var(--stone); margin-top: .25rem; }
.bc-price     { font-weight: 500; color: var(--bur); }
.bc-cnt       { font-weight: 300; }
.bc-notify    { color: var(--sf); font-weight: 500; }
.free-col     { color: #2E7D32; }

/* ─── Tags ───────────────────────────────────────────────────────── */
.tag-free  { display: inline-block; font-size: .6rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 2px; background: #E8F5E9; color: #2E7D32; margin-bottom: .2rem; }
.tag-paid  { display: inline-block; font-size: .6rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 2px; background: var(--parch); color: var(--stone); margin-bottom: .2rem; }
.tag-soon  { display: inline-block; font-size: .6rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 2px; background: #EEF2FF; color: #4338CA; margin-bottom: .2rem; }
.tag-text  { display: inline-block; font-size: .6rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 2px; background: #FDF3E9; color: #92400E; margin-bottom: .2rem; }

/* ─── Level page ─────────────────────────────────────────────────── */
.level-eyebrow { font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--sf); margin-bottom: .4rem; }

/* ─── Collection (bundle) page ───────────────────────────────────── */
.bd-wrap    { max-width: 680px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.bd-title   { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.6rem,3.5vw,2.4rem); font-weight: 300; color: var(--bur); margin-bottom: .5rem; }
.bd-desc    { font-size: .88rem; font-weight: 300; color: var(--stone); line-height: 1.7; margin-bottom: 1.5rem; }

/* ─── Usage hint ─────────────────────────────────────────────────── */
.usage-hint      { background: var(--parch); border-left: 3px solid var(--sf); border-radius: 0 var(--r) var(--r) 0; padding: .75rem 1rem; margin-bottom: 1.5rem; }
.usage-hint-line { font-size: .82rem; font-weight: 300; color: var(--ink); line-height: 1.7; }
.usage-hint-line + .usage-hint-line { margin-top: .1rem; }

/* ─── Buy box ────────────────────────────────────────────────────── */
.buy-box    { background: #fff; border: 1px solid var(--bdr); border-radius: var(--r); padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.buy-box-l  { font-size: .82rem; font-weight: 300; color: var(--stone); line-height: 1.6; }
.buy-box-l strong { display: block; font-size: .9rem; font-weight: 500; color: var(--ink); margin-bottom: .2rem; }
.buy-box-r  { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; min-width: 160px; }
.price-tag  { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-weight: 600; color: var(--bur); }
.btn-buy    { background: var(--bur); color: #fff; border: none; border-radius: 2px; padding: .5rem 1.1rem; font-size: .82rem; font-weight: 500; cursor: pointer; transition: background .18s; white-space: nowrap; }
.btn-buy:hover { background: var(--sf); }

/* ─── In-page nav ────────────────────────────────────────────────── */
.nav-index         { display: flex; flex-wrap: wrap; gap: .4rem .6rem; padding: .75rem 0 1.25rem; border-bottom: 1px solid var(--bdr); margin-bottom: 1.5rem; }
.nav-index-link    { font-size: .82rem; color: var(--bur); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; background: none; border: none; padding: 0; }
.nav-index-link:hover { color: var(--sf); }
.nav-sequence-hint { font-size: .78rem; font-weight: 300; color: var(--stone); font-style: italic; padding: .5rem .75rem; background: var(--parch); border-radius: var(--r); margin-bottom: 1.25rem; }
.seq-nav           { display: flex; align-items: center; justify-content: space-between; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--bdr); }
.seq-prev,
.seq-next          { font-size: .82rem; color: var(--bur); text-decoration: none; font-weight: 500; cursor: pointer; background: none; border: none; padding: 0; }
.seq-prev:hover,
.seq-next:hover    { color: var(--sf); }
.seq-count         { font-size: .75rem; color: var(--stone); font-weight: 300; }

/* ─── Items list ─────────────────────────────────────────────────── */
.items-list  { display: flex; flex-direction: column; gap: 1.25rem; }
.item-card   { background: #fff; border: 1px solid var(--bdr); border-radius: var(--r); overflow: hidden; transition: box-shadow .18s; }
.item-card.unlocked:hover { box-shadow: var(--sh); }
.item-inner  { padding: 1.25rem 1.5rem; }
.item-badge  { display: inline-block; font-size: .58rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 2px 7px; border-radius: 2px; margin-bottom: .6rem; }
.badge-free  { background: #E8F5E9; color: #2E7D32; }
.badge-locked{ background: var(--parch); color: var(--stone); }

/* ─── Item content ───────────────────────────────────────────────── */
.item-simple   { font-size: 1.4rem; font-weight: 500; color: var(--ink); margin-bottom: .5rem; }
.item-scripts  { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin-bottom: .25rem; }
.item-dv       { font-family: 'Noto Sans Devanagari', serif; font-size: 1.1rem; color: var(--ink); }
.item-lat      { font-size: .82rem; font-weight: 300; color: var(--stone); font-style: italic; }
.item-section  { margin-top: .9rem; padding-top: .6rem; border-top: 1px solid var(--bdr); }
.item-section-label { font-size: .62rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--stone); margin-bottom: .5rem; }
.item-phonetic { font-family: monospace; font-size: .9rem; font-weight: 600; color: var(--sf); margin-bottom: .5rem; }
.item-pro      { font-size: .82rem; font-weight: 300; color: var(--stone); line-height: 1.65; margin-bottom: .5rem; }
.item-tr       { font-size: .92rem; font-weight: 500; color: var(--ink); line-height: 1.5; margin-bottom: .4rem; }
.item-meaning  { font-size: .82rem; font-weight: 300; color: var(--stone); line-height: 1.65; }

/* ─── Syllable highlighting ──────────────────────────────────────── */
.item-phonetic-hl { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0; }
.syl-group        { display: inline-flex; align-items: baseline; text-decoration: none; text-underline-offset: 4px; cursor: default; transition: text-decoration .1s; }
.syl-group.syl-active { text-decoration: underline; text-decoration-thickness: 2px; }
.syl              { display: inline; }
.syl-sep          { color: var(--stone-l); font-size: .7em; margin: 0 1px; }
.syl-sep-inner    { color: var(--sf); font-size: .7em; margin: 0 0px; opacity: .6; }

/* ─── Custom audio player ────────────────────────────────────────── */
.audio-player  { display: flex; align-items: center; gap: .6rem; padding: .5rem 0; margin: .5rem 0; }
.ap-play       { width: 30px; height: 30px; border-radius: 50%; background: var(--bur); color: #fff; font-size: .7rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .18s; border: none; cursor: pointer; }
.ap-play:hover { background: var(--sf); }
.ap-bar        { flex: 1; height: 3px; background: var(--stone-l); border-radius: 2px; overflow: hidden; }
.ap-fill       { height: 100%; width: 0%; background: var(--sf); border-radius: 2px; transition: width .1s linear; }
.ap-time       { font-size: .7rem; color: var(--stone); font-variant-numeric: tabular-nums; min-width: 2.2rem; text-align: right; }
.ap-loop       { font-size: .85rem; opacity: .35; cursor: pointer; border: none; background: none; padding: 2px; transition: opacity .18s; }
.ap-loop:hover { opacity: .65; }
.ap-loop-on    { opacity: 1; color: var(--sf); }
.ap-practice   { font-size: .72rem; font-weight: 500; color: var(--bur); background: none; border: 1px solid var(--bdr); border-radius: 2px; padding: 2px 8px; cursor: pointer; margin-left: .25rem; transition: background .18s, color .18s; white-space: nowrap; }
.ap-practice:hover { background: var(--bur); color: #fff; }

/* ─── Practice mode ──────────────────────────────────────────────── */
.practice-ui        { padding: .6rem .75rem; background: var(--parch); border-radius: var(--r); margin-top: .4rem; }
.practice-prompt    { font-size: .9rem; font-weight: 500; color: var(--bur); margin-bottom: .4rem; min-height: 1.3rem; }
.practice-reps      { display: flex; gap: .4rem; }
.rep-dot            { font-size: .9rem; color: var(--stone-l); }
.rep-done           { color: var(--sf); }
.practice-play-again{ display: block; margin-top: .5rem; padding: .45rem 1rem; background: var(--bur); color: #fff; border: none; border-radius: 2px; font-size: .82rem; font-weight: 500; cursor: pointer; transition: background .18s; }
.practice-play-again:hover { background: var(--sf); }

/* ─── Unlock prompt ──────────────────────────────────────────────── */
.unlock-prompt { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .75rem; padding: .65rem .9rem; background: var(--parch); border-left: 3px solid var(--bur); border-radius: 0 var(--r) var(--r) 0; flex-wrap: wrap; }
.unlock-text   { font-size: .82rem; font-weight: 400; color: var(--ink); line-height: 1.4; }
.unlock-btn    { font-size: .78rem; font-weight: 600; color: #fff; background: var(--bur); border: none; border-radius: 2px; padding: .35rem .9rem; cursor: pointer; white-space: nowrap; transition: background .18s; }
.unlock-btn:hover { background: var(--sf); }

/* ─── Meaning flip card ──────────────────────────────────────────── */
.meaning-card  { min-height: 60px; }
.meaning-front { background: var(--parch); border: 1px dashed var(--bdr); border-radius: var(--r); padding: .75rem; display: flex; align-items: center; gap: .6rem; color: var(--stone); font-size: .85rem; font-weight: 300; }
.meaning-lock  { font-size: 1rem; opacity: .5; }
.meaning-hint  { font-style: italic; }
.meaning-back  { display: none; }
.meaning-revealed .meaning-front { display: none; }
.meaning-revealed .meaning-back  { display: block; animation: flipIn .4s ease; }
@keyframes flipIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Unlock prompt ─────────────────────────────────────────────── */
.unlock-prompt { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .75rem; padding: .65rem .9rem; background: var(--parch); border-left: 3px solid var(--bur); border-radius: 0 var(--r) var(--r) 0; flex-wrap: wrap; }
.unlock-text   { font-size: .82rem; font-weight: 400; color: var(--ink); line-height: 1.4; }
.unlock-btn    { font-size: .78rem; font-weight: 600; color: #fff; background: var(--bur); border: none; border-radius: 2px; padding: .35rem .9rem; cursor: pointer; white-space: nowrap; transition: background .18s; }
.unlock-btn:hover { background: var(--sf); }

/* ─── Index nav ─────────────────────────────────────────────────── */
.nav-index        { display: flex; flex-wrap: wrap; gap: .4rem .6rem; padding: .75rem 0 1.25rem; border-bottom: 1px solid var(--bdr); margin-bottom: 1.5rem; }
.nav-index-link   { font-size: .82rem; color: var(--bur); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.nav-index-link:hover { color: var(--sf); }

/* ─── Sequence nav ──────────────────────────────────────────────── */
.nav-sequence-hint { font-size: .78rem; font-weight: 300; color: var(--stone); font-style: italic; padding: .5rem .75rem; background: var(--parch); border-radius: var(--r); margin-bottom: 1.25rem; }
.seq-nav           { display: flex; align-items: center; justify-content: space-between; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--bdr); }
.seq-prev,
.seq-next          { font-size: .82rem; color: var(--bur); text-decoration: none; font-weight: 500; cursor: pointer; }
.seq-prev:hover,
.seq-next:hover    { color: var(--sf); }
.seq-count         { font-size: .75rem; color: var(--stone); font-weight: 300; }

/* ─── Usage hint ────────────────────────────────────────────────── */
.usage-hint      { background: var(--parch); border-left: 3px solid var(--sf); border-radius: 0 var(--r) var(--r) 0; padding: .75rem 1rem; margin-bottom: 1.5rem; }
.usage-hint-line { font-size: .82rem; font-weight: 300; color: var(--ink); line-height: 1.7; }
.usage-hint-line + .usage-hint-line { margin-top: .15rem; }

/* ─── Level page ────────────────────────────────────────────────── */
.level-eyebrow { font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--sf); margin-bottom: .4rem; }

/* ─── Home: shared section heading ─────────────────────────────── */
.sec-h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.4rem,2.5vw,2rem); font-weight: 300; color: var(--bur); margin-bottom: 1.75rem; }

/* ─── Home: level cards ─────────────────────────────────────────── */
.level-cards  { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; margin-bottom: 3rem; }
.lc           { background: #fff; border: 1px solid var(--bdr); border-radius: var(--r); padding: 1.75rem 1.5rem; cursor: pointer; transition: border-color .18s, box-shadow .18s; display: flex; flex-direction: column; gap: .5rem; }
.lc:hover     { border-color: var(--sf); box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.lc-title     { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 600; color: var(--bur); }
.lc-sub       { font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sf); }
.lc-desc      { font-size: .85rem; font-weight: 300; color: var(--stone); line-height: 1.6; flex: 1; }
.lc-cta       { align-self: flex-start; margin-top: .5rem; font-size: .82rem; font-weight: 500; color: var(--bur); background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ─── Home: purchase cards ──────────────────────────────────────── */
.purchase-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; margin-bottom: 3rem; }
.pc             { background: #fff; border: 1px solid var(--bdr); border-radius: var(--r); padding: 1.75rem 1.5rem; display: flex; flex-direction: column; gap: .6rem; position: relative; }
.pc-membership  { background: var(--parch); }
.pc-tag         { font-size: .6rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--stone); }
.pc-title       { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; font-weight: 600; color: var(--bur); }
.pc-desc        { font-size: .85rem; font-weight: 300; color: var(--stone); line-height: 1.6; flex: 1; }
.pc-cta         { align-self: flex-start; margin-top: .5rem; padding: .5rem 1.25rem; background: var(--bur); color: #fff; border: none; border-radius: 2px; font-size: .82rem; font-weight: 500; cursor: pointer; transition: background .18s; }
.pc-cta:hover   { background: var(--sf); }
.pc-cta-soon    { background: var(--stone-l); color: var(--stone); cursor: default; }
.pc-cta-soon:hover { background: var(--stone-l); }

/* ─── Home: credibility ─────────────────────────────────────────── */
.credibility  { font-size: .85rem; font-weight: 300; color: var(--stone); line-height: 1.6; padding: 1.5rem 0; border-top: 1px solid var(--bdr); display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; margin-bottom: 0; }
.cred-link    { background: none; border: none; padding: 0; font-size: .85rem; font-weight: 500; color: var(--bur); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* ─── Quote banner ──────────────────────────────────────────────── */
.qb      { background: var(--bur); color: #fff; text-align: center; padding: 3.5rem 2rem; }
.qb-dv   { font-family: 'Noto Sans Devanagari', serif; font-size: 1.4rem; opacity: .9; margin-bottom: .5rem; }
.qb-lat  { font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; font-style: italic; opacity: .8; margin-bottom: 1rem; }
.qb-tr   { font-size: .95rem; font-weight: 300; opacity: .9; line-height: 1.6; max-width: 480px; margin: 0 auto .75rem; }
.qb-attr { font-size: .72rem; font-weight: 300; opacity: .6; letter-spacing: .08em; }

/* ─── About page ────────────────────────────────────────────────── */

/* ─── Locked item card ───────────────────────────────────────────── */
.locked-card   { opacity: .92; }
.locked-blur   { filter: blur(4px); user-select: none; pointer-events: none; margin: .4rem 0; }
.lock-hint     { font-size: .78rem; font-weight: 300; color: var(--stone); font-style: italic; margin-top: .5rem; }

/* ─── About page ─────────────────────────────────────────────────── */
.about-wrap   { max-width: 640px; padding: 2rem 0 4rem; }
.about-body   { margin-top: 1.5rem; }
.about-body p { font-size: .95rem; font-weight: 300; color: var(--ink); line-height: 1.85; margin-bottom: 1.25rem; }

/* ─── Empty shelf ────────────────────────────────────────────────── */
.empty-shelf      { text-align: center; padding: 5rem 2rem; }
.empty-shelf-icon { font-size: 3rem; margin-bottom: 1rem; opacity: .3; }
.empty-shelf-text { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-weight: 300; color: var(--stone); }

/* ─── Footer audio attribution ──────────────────────────────────── */
.footer-main { margin-bottom: .4rem; }
.footer-note { font-size: .72rem; font-weight: 300; color: var(--stone); opacity: .7; }
.footer-note a { color: var(--stone); text-underline-offset: 2px; }
.footer-note a:hover { color: var(--bur); }

/* ─── What you get ──────────────────────────────────────────────── */
.what-you-get  { background: var(--sf-pale); border: 1px solid var(--bdr-m); border-radius: var(--r); padding: 1.5rem 1.75rem; margin-bottom: 2rem; }
.wyg-title     { font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; font-weight: 600; color: var(--bur); margin-bottom: 1rem; }
.wyg-item      { display: flex; align-items: flex-start; gap: .75rem; font-size: .85rem; font-weight: 300; color: var(--ink-m); line-height: 1.6; margin-bottom: .5rem; }
.wyg-check     { color: var(--sf); font-weight: 600; flex-shrink: 0; margin-top: .1rem; }
.wyg-note      { font-size: .75rem; font-weight: 300; color: var(--stone); margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--bdr); font-style: italic; line-height: 1.6; }

/* ─── Tags ──────────────────────────────────────────────────────── */
.tag-free  { display: inline-block; font-size: .62rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 1px; background: var(--sf-pale); color: var(--sf); margin-bottom: .2rem; }
.tag-paid  { display: inline-block; font-size: .62rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 1px; background: var(--parch); color: var(--stone); margin-bottom: .2rem; }
.tag-soon  { display: inline-block; font-size: .62rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 1px; background: #EEF2FF; color: #4338CA; margin-bottom: .2rem; }
.tag-text  { display: inline-block; font-size: .62rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 1px; background: #FDF3E9; color: #92400E; margin-bottom: .2rem; }
.bc-notify { color: var(--sf); font-weight: 500; }
/* ─── Texts page note ────────────────────────────────────────────── */
.texts-note { font-size: .8rem; font-weight: 300; color: var(--stone); font-style: italic; padding: .75rem 1rem; background: var(--parch); border-left: 3px solid var(--sf-l); border-radius: 0 2px 2px 0; margin-bottom: 2rem; }

/* ─── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .hero               { grid-template-columns: 1fr; padding-top: 2rem; }
  .hero-bg            { display: none; }
  .hero-levels        { flex-direction: column; }
  .purchase-cards     { grid-template-columns: 1fr; }
  .n-links            { gap: 0; }
  .n-link             { font-size: .75rem; padding: .3rem .45rem; }
}

/* ─── Karaoke line ──────────────────────────────────────────────── */
.karaoke        { font-family: monospace; font-size: .95rem; font-weight: 600; color: #333; margin-top: .4rem; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.kar-group      { display: inline-block; padding: 0 2px; border-radius: 4px; transition: all 0.15s ease-out; }
.kar-group.kar-active { color: #fff; background-color: var(--sf); transform: scale(1.1); box-shadow: 0 2px 5px rgba(0,0,0,.2); }
.kar-sep        { display: inline-block; width: .4rem; }
.kar-inner-sep  { color: #999; font-size: .7em; }