/* Mustardseed Vocal Coaching — design system
   Brand orange sampled from the logo: #EF940F */

:root{
  /* v3 — her logo is orange ON BLACK. we were only using half the brand. */
  --paper:#FBF8F2;--card:#FFFFFF;--sand:#F4EADA;
  --line:#E7DCC9;--line-soft:#F0E8DA;
  --ink:#14110E;--ink-mid:#4A4136;--ink-soft:#8C8071;
  --espresso:#221C15;--espresso-2:#2E2619;
  --seed:#EF940F;--seed-deep:#B26608;--seed-wash:#FDF3E2;
  --gilt:#E4C48A;
  --leaf:#3B7A57;--leaf-wash:#ECF3EE;
  --rose:#B5503A;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:#EFE9DE;color:var(--ink);
  font-family:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;padding:0;}
img{max-width:100%;display:block;}
input,textarea,select{font:inherit;}

/* ---------- shell ---------- */
.phone{max-width:26rem;margin:0 auto;min-height:100vh;min-height:100dvh;background:var(--paper);
  display:flex;flex-direction:column;position:relative;overflow:hidden;}
@media(min-width:44rem){
  body{padding:2rem 0;}
  .phone{min-height:auto;height:min(54rem,calc(100dvh - 4rem));border-radius:16px;box-shadow:0 14px 44px rgba(22,19,15,.2);}
}

.topbar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:calc(env(safe-area-inset-top) + .8rem) 1.1rem .7rem;background:var(--paper);
  border-bottom:1px solid var(--line-soft);z-index:5;}
.topbar .ic{width:1.35rem;height:1.35rem;stroke:var(--ink-mid);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;}
.iconbtn{display:grid;place-items:center;width:2.2rem;height:2.2rem;margin:-.4rem;}
.brandlock{display:flex;align-items:center;gap:.45rem;margin:0 auto;}
.brandlock img{height:1.65rem;width:auto;}
.brandlock .wm{font-family:"Marcellus",Georgia,serif;font-size:1.0625rem;letter-spacing:.01em;color:var(--ink);line-height:1;}
.view{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.pane{display:none;flex-direction:column;}
.pane.on{display:flex;}
.pad{padding:1.25rem 1.1rem;display:flex;flex-direction:column;gap:1.25rem;}
.pad.snug{gap:.85rem;}

/* ---------- type ---------- */
.eyebrow{font-size:.6875rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--seed-deep);}
.eyebrow.q{color:var(--ink-soft);}
h1.disp{font-family:"Marcellus",Georgia,serif;font-weight:400;font-size:1.9rem;line-height:1.18;margin:0;text-wrap:balance;}
h2.disp{font-family:"Marcellus",Georgia,serif;font-weight:400;font-size:1.3rem;line-height:1.25;margin:0;}
h3.lbl{font-size:.9375rem;font-weight:600;margin:0;}
p{margin:0;}
.sub{color:var(--ink-mid);font-size:.9375rem;font-weight:300;}
.tiny{font-size:.8125rem;color:var(--ink-soft);font-weight:300;line-height:1.5;}
.script{font-family:"Marcellus",Georgia,serif;font-style:italic;}
.centered{text-align:center;display:flex;flex-direction:column;gap:.55rem;align-items:center;}
.rule{height:1px;background:var(--line);width:100%;}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;}

/* ---------- gate ---------- */
.gate{position:absolute;inset:0;z-index:40;background:var(--paper);display:flex;flex-direction:column;
  justify-content:center;gap:1.6rem;padding:2rem 1.6rem calc(env(safe-area-inset-bottom) + 2rem);text-align:center;}
.gate.gone{display:none;}
.gate img.lg{height:4.6rem;width:auto;margin:0 auto;}
.gate h1{font-family:"Marcellus",Georgia,serif;font-weight:400;font-size:1.5rem;margin:0;line-height:1.25;}
.gate .lead{color:var(--ink-mid);font-size:.9375rem;font-weight:300;max-width:20rem;margin:0 auto;}
.gate .stack{display:flex;flex-direction:column;gap:.9rem;}
.gate .stack.hide{display:none;}
.sent{display:none;flex-direction:column;gap:1rem;}
.sent.on{display:flex;}
.demo-tag{font-size:.75rem;color:var(--ink-soft);font-style:italic;font-weight:300;}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:.45rem;text-align:left;}
.field label{font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);font-weight:500;}
.field input,.field textarea,.field select{width:100%;padding:.8rem .9rem;border:1px solid var(--line);
  border-radius:2px;background:var(--card);color:var(--ink);}
.field textarea{min-height:5rem;resize:vertical;font-family:inherit;}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--seed);outline-offset:-1px;}
.btn{width:100%;padding:.9rem;border-radius:2px;background:var(--seed);color:#fff;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;font-size:.8125rem;}
.btn:active{background:var(--seed-deep);}
.btn.ghost{background:none;color:var(--seed-deep);border:1px solid var(--line);}
.btn.ghost:active{background:var(--seed-wash);}
.btn.quiet{background:none;color:var(--ink-soft);border:1px solid var(--line);}
.btn[disabled]{opacity:.45;pointer-events:none;}

/* ---------- tiles / cards ---------- */
.tile{position:relative;width:100%;overflow:hidden;background:var(--sand);display:block;text-align:left;}
.tile img{width:100%;height:100%;object-fit:cover;object-position:center 18%;}
.tile .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,19,15,.05),rgba(22,19,15,.42) 62%,rgba(22,19,15,.72));}
.tile .cap{position:absolute;left:0;right:0;bottom:1.3rem;text-align:center;color:#fff;
  display:flex;flex-direction:column;gap:.3rem;padding:0 1rem;}
.tile .cap .big{font-weight:300;font-size:1.55rem;letter-spacing:.34em;text-transform:uppercase;text-indent:.34em;}
.tile .cap .small{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;opacity:.88;}
.tile.h1x{aspect-ratio:1/1;}

.card{background:var(--card);border:1px solid var(--line);border-radius:3px;padding:1.05rem 1.1rem;
  display:flex;flex-direction:column;gap:.55rem;text-align:left;width:100%;}
.card.press:active{background:var(--seed-wash);}
.card.assign{background:var(--seed-wash);border-color:#F0D9AF;}
.row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;}

.streak{display:flex;gap:.35rem;}
.dot{flex:1;height:1.9rem;border:1px solid var(--line);border-radius:2px;display:grid;place-items:center;
  font-size:.625rem;letter-spacing:.06em;color:var(--ink-soft);font-weight:500;background:var(--card);}
.dot.done{background:var(--leaf-wash);border-color:#BCD6C6;color:var(--leaf);}
.dot.today{border-color:var(--seed);color:var(--seed-deep);background:var(--seed-wash);}

blockquote{margin:0;padding:.1rem 0 .1rem .95rem;border-left:2px solid var(--seed);
  font-family:"Marcellus",Georgia,serif;font-style:italic;font-size:1rem;color:var(--ink-mid);line-height:1.5;}

/* ---------- pillars ---------- */
.pil{display:grid;grid-template-columns:2.4rem 1fr;gap:.15rem .7rem;align-items:start;}
.pil .n{font-family:"Marcellus",serif;font-size:1.6rem;color:var(--seed);line-height:1;}
.pil .nm{font-family:"Marcellus",Georgia,serif;font-size:1.15rem;line-height:1.2;}
.pil .ds{grid-column:2;font-size:.8125rem;color:var(--ink-soft);font-weight:300;line-height:1.5;}
.pil .mt{grid-column:2;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-top:.45rem;font-weight:500;}
.freetag{color:var(--leaf);}

/* ---------- rows ---------- */
.rows{display:flex;flex-direction:column;border-top:1px solid var(--line);}
.rw{display:flex;align-items:center;gap:.9rem;padding:.85rem .2rem;border-bottom:1px solid var(--line-soft);
  text-align:left;width:100%;background:none;}
.rw:active{background:var(--seed-wash);}
.play{flex:none;width:2rem;height:2rem;border-radius:50%;border:1px solid var(--seed);display:grid;
  place-items:center;color:var(--seed-deep);font-size:.6rem;padding-left:2px;}
.rw.done .play{background:var(--leaf-wash);border-color:var(--leaf);color:var(--leaf);}
.rw .t{flex:1 1 auto;min-width:0;}
.rw .t b{display:block;font-weight:500;font-size:.9375rem;}
.rw .t span{display:block;font-size:.6875rem;color:var(--ink-soft);letter-spacing:.11em;text-transform:uppercase;margin-top:.1rem;}
.rw .dur{flex:none;font-family:"IBM Plex Mono",monospace;font-size:.75rem;color:var(--ink-soft);}
.thumb{flex:none;width:4.4rem;height:3rem;border-radius:2px;overflow:hidden;position:relative;background:var(--sand);}
.thumb img{width:100%;height:100%;object-fit:cover;}
.thumb::after{content:"\25B6";position:absolute;inset:0;display:grid;place-items:center;color:#fff;
  font-size:.65rem;text-shadow:0 1px 4px rgba(0,0,0,.6);}

/* ---------- chips ---------- */
.chips{display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;padding-bottom:.15rem;}
.chips::-webkit-scrollbar{display:none;}
.chip{flex:none;font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;
  padding:.42rem .8rem;border:1px solid var(--line);border-radius:999px;color:var(--ink-soft);
  background:var(--card);white-space:nowrap;}
.chip.on{border-color:var(--seed);color:#fff;background:var(--seed);}

/* ---------- back bar ---------- */
.backbar{display:flex;align-items:center;gap:.6rem;padding:.9rem 1.1rem .2rem;}
.backbar button{display:flex;align-items:center;gap:.4rem;font-size:.75rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--seed-deep);font-weight:500;}

/* ---------- tuner ---------- */
.tuner{display:flex;flex-direction:column;height:100%;}
.thead{padding:1rem 1.1rem .4rem;text-align:center;display:flex;flex-direction:column;gap:.25rem;}
.thead .tgt{font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);font-weight:500;}
.thead .tgt b{color:var(--seed-deep);}
.readout{display:flex;align-items:baseline;justify-content:center;gap:.7rem;padding:.2rem 1.1rem .6rem;}
.note-big{font-family:"Marcellus",Georgia,serif;font-size:3.2rem;line-height:1;font-variant-numeric:tabular-nums;
  min-width:3.8rem;text-align:center;color:var(--ink);}
.note-big.intune{color:var(--leaf);}
.cents{font-family:"IBM Plex Mono",monospace;font-size:.8125rem;color:var(--ink-soft);min-width:4.6rem;}
.hz{font-family:"IBM Plex Mono",monospace;font-size:.7rem;color:var(--ink-soft);}
.ladderwrap{flex:1 1 auto;position:relative;overflow:hidden;min-height:15rem;
  border-top:1px solid var(--line);background:linear-gradient(180deg,#FFFDF9,#F8F2E8);}
.ladderwrap canvas{display:block;width:100%;height:100%;}
.tfoot{flex:none;padding:.8rem 1.1rem calc(env(safe-area-inset-bottom) + .5rem);
  display:flex;flex-direction:column;gap:.5rem;border-top:1px solid var(--line);background:var(--paper);}
.micnote{font-size:.75rem;color:var(--ink-soft);text-align:center;line-height:1.45;font-weight:300;}
.btnrow{display:flex;gap:.5rem;}
.btnrow .btn{flex:1;}
.micbtn.live{background:var(--leaf);}

/* ---------- transport ---------- */
.transport{display:flex;align-items:center;gap:.9rem;padding:.7rem 1.1rem;border-top:1px solid var(--line-soft);background:var(--card);}
.bigplay{flex:none;width:3rem;height:3rem;border-radius:50%;background:var(--seed);color:#fff;
  display:grid;place-items:center;font-size:.9rem;padding-left:3px;}
.bigplay.playing{background:var(--ink);padding-left:0;}
.transport .meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:.3rem;}
.transport .meta b{font-size:.875rem;font-weight:500;}
.progress{height:3px;background:var(--line);border-radius:2px;overflow:hidden;}
.progress i{display:block;height:100%;background:var(--seed);width:0;}
.transport .time{font-family:"IBM Plex Mono",monospace;font-size:.6875rem;color:var(--ink-soft);}

/* ---------- media player ---------- */
.stage{width:100%;aspect-ratio:16/9;background:#16130F;position:relative;display:grid;place-items:center;overflow:hidden;}
.stage img{width:100%;height:100%;object-fit:cover;opacity:.55;position:absolute;inset:0;}
.stage .pbtn{position:relative;width:3.6rem;height:3.6rem;border-radius:50%;background:rgba(255,255,255,.92);
  color:var(--ink);display:grid;place-items:center;font-size:1rem;padding-left:4px;}
.stage .pbtn.playing{padding-left:0;}
.stage .badge{position:absolute;left:.7rem;top:.7rem;font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:rgba(0,0,0,.45);padding:.25rem .5rem;border-radius:2px;}

.wave{display:flex;align-items:flex-end;gap:2px;height:3rem;padding:0 .1rem;}
.wave i{flex:1;background:var(--line);border-radius:1px;min-height:3px;}
.wave i.on{background:var(--seed);}

/* ---------- sessions ---------- */
.switch{display:flex;gap:.7rem;align-items:flex-start;padding:.75rem .9rem;background:var(--sand);border-radius:2px;}
.sw{flex:none;width:2.2rem;height:1.25rem;border-radius:999px;background:var(--leaf);position:relative;margin-top:.15rem;}
.sw::after{content:"";position:absolute;top:2px;right:2px;width:1rem;height:1rem;border-radius:50%;background:#fff;}
.slot{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.8rem .2rem;
  border-bottom:1px solid var(--line-soft);width:100%;text-align:left;background:none;}
.slot:active{background:var(--seed-wash);}
.slot .d{display:block;margin-bottom:.1rem;font-size:.6875rem;color:var(--ink-soft);letter-spacing:.12em;text-transform:uppercase;font-weight:500;}
.slot b{display:block;font-size:.9375rem;font-weight:500;}
.pill{font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;padding:.25rem .55rem;border-radius:999px;
  border:1px solid var(--leaf);color:var(--leaf);font-weight:500;white-space:nowrap;}
.pill.soon{border-color:var(--seed);color:var(--seed-deep);}
.pill.warn{border-color:var(--rose);color:var(--rose);}

.pkg{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;padding:.8rem .2rem;border-bottom:1px solid var(--line-soft);}
.pkg .nm{font-family:"Marcellus",serif;font-size:1.0625rem;}
.pkg .de{font-size:.75rem;color:var(--ink-soft);font-weight:300;}
.pkg .pr{font-family:"IBM Plex Mono",monospace;font-size:.875rem;white-space:nowrap;}
.pkg.star{background:var(--seed-wash);margin:0 -.5rem;padding:.8rem .7rem;border-radius:2px;}

/* ---------- coach ---------- */
.subnav{display:flex;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--paper);z-index:3;}
.snb{flex:1;padding:.75rem .2rem;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:500;color:var(--ink-soft);border-bottom:2px solid transparent;}
.snb.on{color:var(--seed-deep);border-bottom-color:var(--seed);}
.cpane{display:none;}
.cpane.on{display:block;}

.stud{display:grid;grid-template-columns:1fr auto;gap:.15rem .7rem;padding:.85rem .2rem;
  border-bottom:1px solid var(--line-soft);align-items:center;width:100%;text-align:left;background:none;}
.stud:active{background:var(--seed-wash);}
.stud b{font-size:.9375rem;font-weight:500;}
.stud .l{font-size:.6875rem;color:var(--ink-soft);letter-spacing:.08em;text-transform:uppercase;}
.bar{grid-column:1/-1;height:3px;background:var(--line);margin-top:.4rem;border-radius:2px;overflow:hidden;}
.bar i{display:block;height:100%;background:var(--leaf);}
.bar i.low{background:var(--seed);}
.bar i.bad{background:var(--rose);}

.pick{display:flex;align-items:center;gap:.75rem;padding:.7rem .85rem;border:1px solid var(--line);
  border-radius:2px;background:var(--card);text-align:left;width:100%;}
.pick .bx{flex:none;width:1.05rem;height:1.05rem;border:1px solid var(--line);border-radius:2px;
  display:grid;place-items:center;font-size:.6rem;color:#fff;}
.pick.sel{border-color:var(--seed);background:var(--seed-wash);}
.pick.sel .bx{background:var(--seed);border-color:var(--seed);}
.pick .t{flex:1;min-width:0;}
.pick .t b{display:block;font-size:.875rem;font-weight:500;}
.pick .t span{display:block;font-size:.6875rem;color:var(--ink-soft);letter-spacing:.1em;text-transform:uppercase;}
.picker{display:flex;flex-direction:column;gap:.45rem;}

.upload{border:1px dashed var(--line);border-radius:3px;padding:1.3rem 1rem;text-align:center;
  display:flex;flex-direction:column;gap:.3rem;background:var(--sand);width:100%;}
.upload .big{font-family:"Marcellus",serif;font-size:1.05rem;}

.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.statgrid div{background:var(--card);padding:.8rem .5rem;text-align:center;}
.statgrid .v{font-family:"Marcellus",serif;font-size:1.5rem;line-height:1;color:var(--seed-deep);}
.statgrid .k{font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-top:.3rem;}

/* ---------- pitch / plan ---------- */
.tier{border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--card);}
.tier.best{border-color:var(--seed);}
.tier .th{padding:1.1rem 1.15rem .9rem;border-bottom:1px solid var(--line-soft);display:flex;flex-direction:column;gap:.3rem;}
.tier.best .th{background:var(--seed-wash);}
.tier .th .tag{font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;color:var(--seed-deep);font-weight:600;}
.tier .th h3{font-family:"Marcellus",Georgia,serif;font-weight:400;font-size:1.45rem;margin:0;line-height:1.15;}
.tier .th .pr{font-family:"IBM Plex Mono",monospace;font-size:1.05rem;}
.tier .th .pr small{font-size:.75rem;color:var(--ink-soft);}
.tier .tb{padding:.95rem 1.15rem 1.15rem;display:flex;flex-direction:column;gap:.5rem;}
.ln{display:flex;gap:.6rem;align-items:flex-start;font-size:.875rem;color:var(--ink-mid);font-weight:300;line-height:1.5;}
.ln .mk{flex:none;width:.95rem;color:var(--leaf);font-size:.8rem;line-height:1.5;}
.ln.no{color:var(--ink-soft);}
.ln.no .mk{color:#C9B9A4;}

.ph{border:1px dashed var(--line);border-radius:2px;padding:.75rem .85rem;font-size:.75rem;
  color:var(--ink-soft);line-height:1.5;background:var(--sand);font-weight:300;}
.ph b{color:var(--seed-deep);font-weight:600;}

/* ---------- tabs ---------- */
.tabs{flex:none;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);
  background:var(--paper);padding-bottom:env(safe-area-inset-bottom);}
.tab{padding:.6rem .2rem .5rem;display:flex;flex-direction:column;align-items:center;gap:.28rem;
  font-size:.5625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:500;}
.tab svg{width:1.15rem;height:1.15rem;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;}
.tab.on{color:var(--seed-deep);}
.tab.on svg{stroke:var(--seed);}
.tab:focus-visible,.btn:focus-visible{outline:2px solid var(--seed);outline-offset:-2px;}

/* ---------- toast ---------- */
#toast{position:absolute;left:50%;bottom:5.2rem;transform:translate(-50%,1rem);z-index:60;
  background:var(--ink);color:var(--paper);padding:.7rem 1.1rem;border-radius:3px;font-size:.8125rem;
  max-width:88%;text-align:center;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;}
#toast.on{opacity:1;transform:translate(-50%,0);}
@media(prefers-reduced-motion:reduce){#toast{transition:none;}}

/* =================== DRAWER =================== */
.scrim{position:absolute;inset:0;z-index:30;background:rgba(22,19,15,.42);opacity:0;pointer-events:none;
  transition:opacity .2s ease;}
.scrim.on{opacity:1;pointer-events:auto;}
.drawer{position:absolute;top:0;bottom:0;left:0;width:78%;max-width:19rem;z-index:31;background:var(--paper);
  border-right:1px solid var(--line);transform:translateX(-102%);transition:transform .22s ease;
  display:flex;flex-direction:column;overflow-y:auto;}
.drawer.on{transform:translateX(0);}
@media(prefers-reduced-motion:reduce){.drawer,.scrim{transition:none;}}
.dhead{padding:calc(env(safe-area-inset-top) + 1.2rem) 1.15rem 1rem;border-bottom:1px solid var(--line-soft);
  display:flex;flex-direction:column;gap:.55rem;}
.dhead img{height:2.6rem;width:auto;align-self:flex-start;object-fit:contain;}
.dhead .who{font-size:.8125rem;color:var(--ink-soft);font-weight:300;}
.dgroup{padding:.9rem 0 .3rem;}
.dgroup .gt{font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);
  padding:0 1.15rem .35rem;font-weight:500;}
.dlink{display:flex;align-items:center;gap:.8rem;width:100%;padding:.68rem 1.15rem;text-align:left;font-size:.9375rem;}
.dlink:active{background:var(--seed-wash);}
.dlink .di{flex:none;width:1.25rem;height:1.25rem;stroke:var(--seed-deep);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;}
.dlink .tagn{margin-left:auto;font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--seed-deep);background:var(--seed-wash);padding:.15rem .45rem;border-radius:999px;}
.dfoot{margin-top:auto;padding:1rem 1.15rem calc(env(safe-area-inset-bottom) + 1.2rem);
  border-top:1px solid var(--line-soft);font-size:.75rem;color:var(--ink-soft);font-weight:300;}

/* =================== SHOP =================== */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:.85rem;}
.prod{display:flex;flex-direction:column;gap:.5rem;text-align:left;width:100%;}
.prod .sw2{aspect-ratio:1/1;border-radius:3px;display:grid;place-items:center;position:relative;overflow:hidden;}
.prod .sw2 img{width:auto;max-width:56%;max-height:72%;opacity:.92;}
.prod .nm{font-size:.875rem;font-weight:500;line-height:1.3;}
.prod .pr{font-family:"IBM Plex Mono",monospace;font-size:.8125rem;color:var(--ink-soft);}
.hero-prod{aspect-ratio:1/1;border-radius:3px;display:grid;place-items:center;}
.hero-prod img{width:auto;max-width:46%;max-height:68%;}
.cartbar{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.75rem .9rem;
  background:var(--sand);border-radius:2px;}

/* =================== EVENTS =================== */
.ev{display:flex;flex-direction:column;gap:.4rem;padding:1rem .2rem;border-bottom:1px solid var(--line-soft);
  width:100%;text-align:left;background:none;}
.ev:active{background:var(--seed-wash);}
.ev .k{font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--seed-deep);font-weight:600;}
.ev .n{font-family:"Marcellus",Georgia,serif;font-size:1.15rem;line-height:1.2;}
.ev .w{font-size:.8125rem;color:var(--ink-soft);font-weight:300;}
.ev .foot{display:flex;gap:.6rem;align-items:center;margin-top:.15rem;}

/* =================== READS =================== */
.artbody{display:flex;flex-direction:column;gap:1rem;}
.artbody p{font-size:1rem;line-height:1.7;color:var(--ink-mid);font-weight:300;}
.artbody p:first-child::first-letter{font-family:"Marcellus",Georgia,serif;font-size:2.6rem;float:left;
  line-height:.85;padding:.15rem .35rem 0 0;color:var(--seed);}
.lede-q{font-family:"Marcellus",Georgia,serif;font-style:italic;font-size:1.15rem;color:var(--ink);
  line-height:1.4;text-align:center;}

/* =================== COMMUNITY =================== */
.post{display:flex;flex-direction:column;gap:.5rem;padding:1rem .2rem;border-bottom:1px solid var(--line-soft);}
.post .hd{display:flex;align-items:center;gap:.6rem;}
.post .av{flex:none;width:2.1rem;height:2.1rem;border-radius:50%;background:var(--sand);display:grid;
  place-items:center;font-family:"Marcellus",serif;font-size:.8125rem;color:var(--seed-deep);}
.post .av.coach{background:var(--seed);color:#fff;}
.post .who{font-size:.875rem;font-weight:500;}
.post .when{font-size:.6875rem;color:var(--ink-soft);}
.post .tx{font-size:.9375rem;color:var(--ink-mid);font-weight:300;line-height:1.55;}
.post .acts{display:flex;gap:1rem;align-items:center;}
.post .lk{display:flex;align-items:center;gap:.35rem;font-size:.75rem;color:var(--ink-soft);}
.post .lk.on{color:var(--seed-deep);}
.post .lk svg{width:.95rem;height:.95rem;stroke:currentColor;fill:none;stroke-width:1.6;}
.post .lk.on svg{fill:currentColor;}

/* =================== MESSAGES =================== */
.thread{display:flex;flex-direction:column;gap:.7rem;padding:.4rem 0;}
.bub{max-width:82%;padding:.7rem .9rem;border-radius:12px;font-size:.9375rem;line-height:1.5;font-weight:300;}
.bub.them{background:var(--sand);border-bottom-left-radius:3px;align-self:flex-start;color:var(--ink);}
.bub.me{background:var(--seed);color:#fff;border-bottom-right-radius:3px;align-self:flex-end;}
.bub .t{display:block;font-size:.625rem;opacity:.7;margin-top:.3rem;letter-spacing:.06em;}
.composer{display:flex;gap:.5rem;align-items:flex-end;}
.composer input{flex:1;padding:.75rem .9rem;border:1px solid var(--line);border-radius:999px;background:var(--card);}
.composer button{flex:none;width:2.9rem;height:2.9rem;border-radius:50%;background:var(--seed);color:#fff;
  display:grid;place-items:center;font-size:.95rem;}

/* =================== PROGRESS =================== */
.rangebar{position:relative;height:2.6rem;border:1px solid var(--line);border-radius:3px;background:var(--card);overflow:hidden;}
.rangebar .full{position:absolute;top:0;bottom:0;background:var(--seed-wash);}
.rangebar .comf{position:absolute;top:0;bottom:0;background:var(--seed);opacity:.28;}
.rangebar .lab{position:absolute;top:50%;transform:translateY(-50%);font-family:"IBM Plex Mono",monospace;
  font-size:.6875rem;color:var(--ink);}
.badges{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;}
.badge2{display:flex;flex-direction:column;align-items:center;gap:.35rem;text-align:center;
  padding:.8rem .35rem;border:1px solid var(--line);border-radius:3px;background:var(--card);}
.badge2 .ic2{width:2.1rem;height:2.1rem;border-radius:50%;display:grid;place-items:center;
  background:var(--sand);color:var(--ink-soft);}
.badge2.got .ic2{background:var(--seed);color:#fff;}
.badge2 .nm{font-size:.6875rem;font-weight:500;line-height:1.25;}
.badge2.locked{opacity:.5;}

/* =================== JOURNAL =================== */
.jent{padding:.9rem .2rem;border-bottom:1px solid var(--line-soft);display:flex;flex-direction:column;gap:.3rem;}
.jent .d{font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);font-weight:500;}
.jent .b{font-size:.9375rem;color:var(--ink-mid);font-weight:300;line-height:1.55;}

/* =================== BUSINESS =================== */
.ord{display:flex;align-items:center;justify-content:space-between;gap:.7rem;padding:.8rem .2rem;
  border-bottom:1px solid var(--line-soft);}
.ord .l2{font-size:.6875rem;color:var(--ink-soft);letter-spacing:.06em;}
.ord b{display:block;font-size:.9375rem;font-weight:500;}


/* ==================================================================
   V3 — darker surfaces, brighter icons, louder streak.
   Appended so the base cascade above stays intact.
   ================================================================== */

/* --- top bar goes dark --- */
.topbar{background:var(--espresso);border-bottom:none;position:relative}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(228,196,138,.38),transparent)}
.topbar .ic{stroke:#EFE7D8;stroke-width:1.8}
.brandlock .wm{color:#F7F2E7}
.brandlock img{align-self:center;object-fit:contain}
.iconbtn{position:relative}

/* menu button pulse until it has been opened once */
.pulse{position:absolute;top:.3rem;right:.3rem;width:.5rem;height:.5rem;border-radius:50%;
  background:var(--seed);pointer-events:none}
.pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--seed);
  animation:msping 1.8s cubic-bezier(0,0,.2,1) infinite}
@keyframes msping{0%{transform:scale(1);opacity:.7}80%,100%{transform:scale(2.6);opacity:0}}
@media(prefers-reduced-motion:reduce){.pulse::after{animation:none}}
.iconbtn.seen .pulse{display:none}

/* --- panes fill the viewport so dark screens reach the tab bar --- */
.view{display:flex;flex-direction:column}
.pane.on{flex:1 0 auto}

/* --- install prompt --- */
.install{margin:0 1.05rem 1.2rem;background:var(--espresso);border-radius:10px;padding:1rem 1.1rem;
  display:flex;gap:.85rem;align-items:flex-start;position:relative;overflow:hidden}
.install::before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 100% 0%,rgba(239,148,15,.22),transparent 60%)}
.install > *{position:relative}
.install .ic2{flex:none;width:2.6rem;height:2.6rem;border-radius:8px;background:#F7F2E7;display:grid;place-items:center}
.install .ic2 img{width:70%;height:auto}
.install .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:.3rem}
.install .tx b{font-family:"Marcellus",Georgia,serif;font-weight:400;font-size:1.0625rem;color:#F7F2E7}
.install .tx > span{font-size:.8125rem;color:#C9BEA8;font-weight:300;line-height:1.45}
.install .go{margin-top:.55rem;align-self:flex-start;background:var(--seed);color:#1B150D;font-weight:600;
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;padding:.55rem .95rem;border-radius:4px}
.install .x{flex:none;color:#8A7F6A;font-size:1.15rem;line-height:1;padding:.1rem .25rem}
.install.gone{display:none}
.steps{display:flex;flex-direction:column;gap:.45rem;margin-top:.5rem}
.steps div{display:flex;gap:.55rem;align-items:center;font-size:.8125rem;color:#D8CDB8;font-weight:300}
.steps .n{flex:none;width:1.15rem;height:1.15rem;border-radius:50%;border:1px solid var(--gilt);
  color:var(--gilt);font-size:.625rem;display:grid;place-items:center;font-weight:500}
.steps svg{width:.95rem;height:.95rem;stroke:var(--gilt);fill:none;stroke-width:1.7;vertical-align:-2px}

/* --- THIS WEEK, louder --- */
.weekcard{background:linear-gradient(180deg,var(--espresso),#1A150F);border:none;color:#F7F2E7;
  border-radius:10px;padding:1.1rem 1.15rem;display:flex;flex-direction:column;gap:.8rem;position:relative;overflow:hidden}
.weekcard::before{content:"";position:absolute;inset:0;
  background:radial-gradient(90% 80% at 0% 0%,rgba(239,148,15,.18),transparent 62%)}
.weekcard > *{position:relative}
.weekcard h3{color:#F7F2E7;font-size:.6875rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600}
.weekcard .count{font-family:"Marcellus",Georgia,serif;font-size:2.1rem;line-height:1;color:var(--seed)}
.weekcard .count small{font-size:.9rem;color:#9E9279;font-family:"Jost",sans-serif;letter-spacing:.06em}
.weekcard .streak{gap:.35rem}
.weekcard .dot{height:2.3rem;border-radius:6px;border-color:rgba(228,196,138,.28);background:rgba(255,255,255,.04);
  color:#9E9279;font-size:.6875rem;font-weight:600}
.weekcard .dot.done{background:rgba(63,125,90,.32);border-color:rgba(127,211,164,.55);color:#9BE4BC}
.weekcard .dot.today{background:rgba(239,148,15,.2);border-color:var(--seed);color:var(--seed)}
.weekcard blockquote{border-left-color:var(--seed);color:#C9BEA8;font-size:.9375rem}

/* --- hero tile richer --- */
.tile .veil{background:linear-gradient(180deg,rgba(34,28,21,.08) 0%,rgba(34,28,21,.55) 58%,rgba(20,16,11,.88) 100%)}
.tile .cap .big{color:#FDFAF3}
.tile .cap .small{color:var(--gilt)}

/* --- drawer goes dark --- */
.drawer{background:var(--espresso);border-right:none}
.dhead{border-bottom:1px solid rgba(228,196,138,.2);position:relative}
.dhead::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 70% at 0% 0%,rgba(239,148,15,.16),transparent 65%)}
.dhead img{height:3rem;align-self:flex-start;object-fit:contain;position:relative}
.dhead .who{color:#A99D86;position:relative}
.dgroup .gt{color:var(--gilt);letter-spacing:.24em;font-weight:600}
.dlink{color:#EFE7D8}
.dlink:active{background:rgba(239,148,15,.14)}
.dlink .di{stroke:var(--seed);stroke-width:1.8}
.dlink .tagn{color:#1B150D;background:var(--gilt);font-weight:600}
.dfoot{border-top:1px solid rgba(228,196,138,.2);color:#8A7F6A}
.scrim{background:rgba(20,17,14,.5)}

/* --- tuner becomes a dark instrument --- */
#p-tuner.on{background:var(--espresso)}
#p-tuner .tuner{background:var(--espresso);flex:1 0 auto}
#p-tuner .thead .tgt{color:#9E9279}
#p-tuner .thead .tgt b{color:var(--gilt)}
#p-tuner .thead .tiny{color:#8A7F6A}
#p-tuner .note-big{color:#FDFAF3}
#p-tuner .note-big.intune{color:#7FD3A4}
#p-tuner .cents{color:#9E9279}
#p-tuner .hz{color:#7C7260}
#p-tuner .ladderwrap{background:linear-gradient(180deg,#2A2218,#1B160F);border-top:1px solid rgba(228,196,138,.18)}
#p-tuner .tfoot{background:transparent;border-top:1px solid rgba(228,196,138,.18)}
#p-tuner .micnote{color:#8A7F6A}
#p-tuner .btn.ghost{color:var(--gilt);border-color:rgba(228,196,138,.35)}
#p-player .thead .tgt b{color:var(--seed-deep)}

.micbtn{background:var(--seed);color:#1B150D;border-radius:6px}
.micbtn.live{background:var(--leaf);color:#F7F2E7}

/* --- tabs: brighter, with an active bar --- */
.tabs{background:var(--paper);border-top:1px solid var(--line)}
.tab{position:relative;color:var(--ink-soft);font-weight:600;letter-spacing:.06em;white-space:nowrap}
.tab svg{width:1.25rem;height:1.25rem;stroke-width:1.8}
.tab.on{color:var(--ink)}
.tab.on svg{stroke:var(--seed)}
.tab.on::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:1.6rem;height:2px;background:var(--seed);border-radius:0 0 2px 2px}

/* --- play buttons and rows a touch stronger --- */
.play{background:var(--seed-wash);border-color:#F0DCB4;width:2.15rem;height:2.15rem}
.card{border-radius:8px}
.chip.on{background:var(--espresso);border-color:var(--espresso);color:#F7F2E7}

/* --- youtube --- */
.ytwrap{width:100%;aspect-ratio:16/9;background:#000;position:relative}
.ytwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ytsoon{width:100%;aspect-ratio:16/9;background:var(--espresso);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.5rem;text-align:center;padding:1rem;position:relative;overflow:hidden}
.ytsoon::before{content:"";position:absolute;inset:0;
  background:radial-gradient(90% 80% at 50% 0%,rgba(239,148,15,.18),transparent 65%)}
.ytsoon img{width:3.4rem;height:auto;position:relative;opacity:.9}
.ytsoon b{font-family:"Marcellus",Georgia,serif;font-weight:400;color:#F7F2E7;font-size:1.05rem;position:relative}
.ytsoon span{font-size:.75rem;color:#9E9279;font-weight:300;position:relative;max-width:20rem;line-height:1.5}


/* ---- range test strip (sits inside the dark tuner) ---- */
.rangetest{margin:0 0 1rem;padding:.9rem 1rem;border-radius:10px;
  background:rgba(255,255,255,.05);border:1px solid rgba(228,196,138,.22)}
.rangetest[hidden]{display:none}
.rangetest .rt-row{display:flex;gap:1.4rem}
.rangetest .rt-cell{display:flex;flex-direction:column;gap:.1rem}
.rangetest .rt-cell b{font-family:"Marcellus",Georgia,serif;font-weight:400;font-size:1.8rem;
  line-height:1;color:var(--seed)}
.rangetest .rt-cell span{font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:#9E9279}
.rangetest .tiny{color:#C9BEA8;margin:.6rem 0 0}
.rangetest .rt-btns{display:flex;gap:.5rem;margin-top:.75rem}
.rangetest .btn.tiny2{padding:.5rem .85rem;font-size:.8125rem;flex:1}
.rangetest .btn.ghost.tiny2{background:transparent;color:#C9BEA8;border:1px solid rgba(228,196,138,.3)}

/* [hidden] must beat any display rule we set elsewhere */
[hidden]{display:none !important}

/* ---- drawer lockup: the full logo is black-on-white art, unreadable on the
       dark drawer. use the mark plus set type, same as the topbar. ---- */
.dhead .dlock{display:flex;align-items:center;gap:.6rem;position:relative}
.dhead .dlock img{height:2.6rem;width:auto;flex:none;object-fit:contain;align-self:center}
.dhead .dwm{display:flex;flex-direction:column;line-height:1}
.dhead .dwm{font-family:"Marcellus",Georgia,serif;font-weight:400;font-size:1.35rem;color:#F7F2E7;
  letter-spacing:.01em}
.dhead .dwm small{font-family:"Jost",sans-serif;font-size:.5625rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gilt);font-weight:400;margin-top:.3rem}


/* ============ TODAY LAUNCHER ============
   Today should open like an app, not scroll like a page. Rhythm is deliberate:
   three up, a wide bar, a two-by-two, another wide bar, a two up. Nothing sits
   flat — every control is lifted off the paper with a warm layered shadow and a
   light top edge, and presses back down when tapped. */

:root{
  --lift-1:0 1px 1px rgba(74,56,28,.05), 0 2px 5px rgba(74,56,28,.06);
  --lift-2:0 1px 1px rgba(74,56,28,.05), 0 4px 10px rgba(74,56,28,.08),
           0 10px 22px rgba(74,56,28,.06);
  --lift-3:0 2px 3px rgba(30,22,10,.14), 0 8px 18px rgba(30,22,10,.18),
           0 18px 38px rgba(30,22,10,.14);
  --edge:inset 0 1px 0 rgba(255,255,255,.75);
  --edge-dark:inset 0 1px 0 rgba(255,255,255,.1);
}

.tint-seed  { --tw:#FDF0DC; --tb:#EFD5A8; --ti:#9E5B06; --tg:rgba(239,148,15,.16) }
.tint-gilt  { --tw:#F6EEDA; --tb:#E0CFA6; --ti:#7A5A1E; --tg:rgba(228,196,138,.2)  }
.tint-leaf  { --tw:#E6F0E9; --tb:#BFD7C9; --ti:#2F6B49; --tg:rgba(63,125,90,.16)   }
.tint-clay  { --tw:#F8EDE8; --tb:#E4CDC3; --ti:#9E4430; --tg:rgba(158,68,48,.15)   }
.tint-slate { --tw:#E7EEF1; --tb:#C6D7DD; --ti:#2E5A63; --tg:rgba(46,90,99,.15)    }

/* one press behaviour for every raised control */
.press3{transition:transform .13s ease, box-shadow .13s ease}
.press3:active{transform:translateY(2px)}
@media(prefers-reduced-motion:reduce){.press3{transition:none}.press3:active{transform:none}}

/* ---- three up ---- */
.bigrow{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:.9rem}
.bigtile{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;
  padding:.9rem .72rem .85rem;border-radius:14px;border:1px solid var(--tb);
  border-bottom-color:color-mix(in srgb,var(--tb) 78%, #7A6242);
  background:linear-gradient(168deg,#FFF 0%,var(--tw) 55%,var(--tw) 100%);
  box-shadow:var(--lift-2),var(--edge);
  text-align:left;position:relative;overflow:hidden;font-family:"Jost",sans-serif;cursor:pointer}
.bigtile::after{content:"";position:absolute;inset:0;
  background:radial-gradient(95% 72% at 86% 0%,var(--tg),transparent 62%);pointer-events:none}
.bigtile > *{position:relative}
.bigtile .ic{width:2.25rem;height:2.25rem;border-radius:9px;background:#FFF;
  border:1px solid var(--tb);display:grid;place-items:center;margin-bottom:.55rem;
  box-shadow:var(--lift-1)}
.bigtile .ic svg{width:1.25rem;height:1.25rem;fill:none;stroke:var(--ti);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.bigtile .nm{font-family:"Marcellus",Georgia,serif;font-size:1rem;color:var(--ink);line-height:1.1}
.bigtile .ds{font-size:.6875rem;color:var(--ink-soft);line-height:1.35;margin-top:.22rem}
.bigtile:active{box-shadow:var(--lift-1),var(--edge)}

/* the tuner is the thing nobody else hands a student. it gets the dark treatment. */
.bigtile.t-tuner{background:linear-gradient(168deg,#3A3021,#171208 70%);border-color:#4A3E2C;
  border-bottom-color:#0E0B05;box-shadow:var(--lift-3),var(--edge-dark)}
.bigtile.t-tuner::after{background:radial-gradient(95% 78% at 78% 0%,rgba(239,148,15,.4),transparent 62%)}
.bigtile.t-tuner .ic{background:rgba(255,255,255,.08);border-color:rgba(228,196,138,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.bigtile.t-tuner .ic svg{stroke:var(--seed)}
.bigtile.t-tuner .nm{color:#F7F2E7}
.bigtile.t-tuner .ds{color:#B5A88E}
.bigtile.t-tuner:active{box-shadow:var(--lift-2),var(--edge-dark)}
.bigtile.t-leaf { --tw:#E6F0E9; --tb:#BFD7C9; --ti:#2F6B49; --tg:rgba(63,125,90,.18) }
.bigtile.t-clay { --tw:#F8EDE8; --tb:#E4CDC3; --ti:#9E4430; --tg:rgba(158,68,48,.17) }

/* ---- the wide bars that break the grid ---- */
.widebar{display:flex;align-items:center;justify-content:space-between;gap:.8rem;width:100%;
  margin-top:.6rem;padding:.9rem 1rem;border-radius:14px;border:1px solid var(--tb);
  border-bottom-color:color-mix(in srgb,var(--tb) 78%, #7A6242);
  background:linear-gradient(168deg,#FFF,var(--tw));box-shadow:var(--lift-2),var(--edge);
  text-align:left;font-family:"Jost",sans-serif;cursor:pointer;position:relative;overflow:hidden}
.widebar::after{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 120% at 95% 0%,var(--tg),transparent 62%);pointer-events:none}
.widebar > *{position:relative}
.widebar .wl{display:flex;align-items:center;gap:.7rem;min-width:0;flex:1}
.widebar .ic{flex:none;width:2.25rem;height:2.25rem;border-radius:9px;background:#FFF;
  border:1px solid var(--tb);display:grid;place-items:center;box-shadow:var(--lift-1)}
.widebar .ic svg{width:1.2rem;height:1.2rem;fill:none;stroke:var(--ti);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.widebar .wt{min-width:0}
.widebar .wt b{display:block;font-family:"Marcellus",Georgia,serif;font-weight:400;
  font-size:1.0625rem;color:var(--ink);line-height:1.15}
.widebar .wt span{display:block;font-size:.75rem;color:var(--ink-soft);margin-top:.15rem;
  line-height:1.4}
.widebar:active{box-shadow:var(--lift-1),var(--edge)}
.widebar.t-seed { --tw:#FDF0DC; --tb:#EFD5A8; --ti:#9E5B06; --tg:rgba(239,148,15,.2) }
.widebar.t-slate{ --tw:#E7EEF1; --tb:#C6D7DD; --ti:#2E5A63; --tg:rgba(46,90,99,.2)  }

/* the range, drawn small, inside the progress bar */
.rangemini{flex:none;width:5.4rem;height:2.1rem;position:relative}
.rangemini i{position:absolute;left:0;right:0;top:50%;height:.3rem;margin-top:-.15rem;
  border-radius:2px;background:rgba(122,98,66,.16)}
.rangemini b{position:absolute;top:50%;height:.55rem;margin-top:-.275rem;border-radius:3px;
  background:var(--seed);box-shadow:0 1px 2px rgba(122,74,6,.35)}
.rangemini u{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:.5625rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ti);text-decoration:none;
  font-weight:700}

/* the faces on the community bar */
.faces{flex:none;display:flex;align-items:center}
.faces i{width:1.65rem;height:1.65rem;border-radius:50%;border:2px solid #FFF;margin-left:-.5rem;
  background:linear-gradient(160deg,#E7EEF1,#C6D7DD);display:grid;place-items:center;
  font-family:"Marcellus",Georgia,serif;font-style:normal;font-size:.75rem;color:#2E5A63;
  box-shadow:var(--lift-1)}
.faces i:first-child{margin-left:0}
.faces i.more{background:linear-gradient(160deg,#2E5A63,#1D3B41);color:#DCE9EC;font-size:.625rem;
  font-family:"Jost",sans-serif;font-weight:700}

/* ---- two up ---- */
.smallgrid{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin-top:.6rem}
.smalltile{display:flex;align-items:center;gap:.6rem;padding:.78rem .8rem;border-radius:12px;
  border:1px solid var(--tb);border-bottom-color:color-mix(in srgb,var(--tb) 78%, #7A6242);
  background:linear-gradient(168deg,#FFF,var(--tw));box-shadow:var(--lift-2),var(--edge);
  text-align:left;font-family:"Jost",sans-serif;cursor:pointer;min-width:0}
.smalltile .ic{flex:none;width:1.85rem;height:1.85rem;border-radius:8px;background:#FFF;
  border:1px solid var(--tb);display:grid;place-items:center;box-shadow:var(--lift-1)}
.smalltile .ic svg{width:1rem;height:1rem;fill:none;stroke:var(--ti);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.smalltile .nm{flex:1;min-width:0;font-size:.8125rem;font-weight:600;color:var(--ink);
  line-height:1.25;overflow-wrap:break-word}
.smalltile .pipx{flex:none;font-size:.5625rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ti);background:#FFF;border:1px solid var(--tb);
  border-radius:5px;padding:.15rem .32rem}
.smalltile:active{box-shadow:var(--lift-1),var(--edge)}
.smalltile.t-seed { --tw:#FDF0DC; --tb:#EFD5A8; --ti:#9E5B06 }
.smalltile.t-gilt { --tw:#F6EEDA; --tb:#E0CFA6; --ti:#7A5A1E }
.smalltile.t-leaf { --tw:#E6F0E9; --tb:#BFD7C9; --ti:#2F6B49 }
.smalltile.t-clay { --tw:#F8EDE8; --tb:#E4CDC3; --ti:#9E4430 }
.smalltile.t-slate{ --tw:#E7EEF1; --tb:#C6D7DD; --ti:#2E5A63 }

/* ---- pick up where you left off: same paper, same lift ---- */
#continueList{display:flex;flex-direction:column;gap:.55rem}
#continueList .rw{background:linear-gradient(168deg,#FFF,#FBF6EC);border:1px solid #EADFC9;
  border-bottom-color:#D8C9AC;border-radius:12px;padding:.7rem .8rem;
  box-shadow:var(--lift-2),var(--edge);transition:transform .13s ease, box-shadow .13s ease}
#continueList .rw:active{transform:translateY(2px);box-shadow:var(--lift-1),var(--edge)}
#continueList .rw .play{box-shadow:var(--lift-1)}

/* ---- the proposal, bottom of Today ---- */
.proposal{display:flex;align-items:center;gap:.8rem;width:100%;margin-top:1.2rem;padding:1.05rem;
  border-radius:14px;border:1px solid var(--gilt);border-bottom-color:#8E7237;text-align:left;
  cursor:pointer;background:linear-gradient(165deg,#3A3021,#15100A 72%);
  box-shadow:var(--lift-3),var(--edge-dark);
  position:relative;overflow:hidden;font-family:"Jost",sans-serif}
.proposal::after{content:"";position:absolute;inset:0;
  background:radial-gradient(90% 85% at 92% 6%,rgba(228,196,138,.3),transparent 60%);
  pointer-events:none}
.proposal > *{position:relative}
.proposal .pl{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem}
.proposal .eyebrow.g2{font-size:.625rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gilt);font-weight:600}
.proposal b{font-family:"Marcellus",Georgia,serif;font-weight:400;font-size:1.3rem;color:#F7F2E7}
.proposal .pl > span:last-child{font-size:.8125rem;color:#C9BEA8;line-height:1.5;margin-top:.2rem}
.proposal .arr{flex:none;width:2.15rem;height:2.15rem;border-radius:50%;
  background:linear-gradient(160deg,#FBB03B,var(--seed));color:#1B150D;display:grid;
  place-items:center;font-size:1rem;font-weight:700;
  box-shadow:0 2px 5px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.5)}
.proposal:active{box-shadow:var(--lift-2),var(--edge-dark)}

/* ---- add to home screen: a button at the end, not a pop-up ---- */
.installend{margin-top:.9rem}
.installend.gone{display:none}
.installend .ibtn{display:flex;align-items:center;gap:.7rem;width:100%;padding:.8rem .85rem;
  border-radius:12px;border:1px dashed #D8C9AC;background:rgba(255,255,255,.55);
  text-align:left;cursor:pointer;font-family:"Jost",sans-serif}
.installend .ibtn .ic{flex:none;width:2.1rem;height:2.1rem;border-radius:8px;background:#FFF;
  border:1px solid #EADFC9;display:grid;place-items:center;box-shadow:var(--lift-1)}
.installend .ibtn .ic img{width:72%;height:auto}
.installend .tx{flex:1;min-width:0}
.installend .tx b{display:block;font-size:.875rem;font-weight:600;color:var(--ink)}
.installend .tx span{display:block;font-size:.75rem;color:var(--ink-soft);margin-top:.1rem;
  line-height:1.4}
.installend .arr{flex:none;color:var(--seed-deep);font-size:1rem}
.installend .steps{display:flex;flex-direction:column;gap:.4rem;margin-top:.6rem;padding:.8rem;
  background:var(--seed-wash);border:1px solid #EFD5A8;border-radius:10px}
.installend .steps[hidden]{display:none}
.installend .st{display:flex;align-items:flex-start;gap:.5rem;font-size:.8125rem;
  color:var(--ink-mid);line-height:1.45}
.installend .st .n{flex:none;width:1.15rem;height:1.15rem;border-radius:50%;background:var(--seed);
  color:#1B150D;font-size:.6875rem;font-weight:700;display:grid;place-items:center;margin-top:.1rem}
.installend .st b{color:var(--ink);font-weight:600}

/* ============ COMMUNITY, MODELLED ON HIGHLEVEL ============
   HighLevel Communities gives channels, rich posts, threaded replies, eight
   reactions, @mentions, a Learning tab and Contributor/Moderator/Admin roles.
   It does NOT give leaderboards or streak boards — those are ours to build. */
.chanwrap{position:relative;border-bottom:1px solid var(--line-soft)}
.chanwrap::after{content:"";position:absolute;right:0;top:0;bottom:1px;width:2rem;
  pointer-events:none;background:linear-gradient(90deg,rgba(251,248,242,0),var(--paper))}
.chans{display:flex;gap:.4rem;overflow-x:auto;padding:.1rem 1.15rem .85rem;scrollbar-width:none}
.chans::-webkit-scrollbar{display:none}
.chan{flex:none;display:flex;align-items:center;gap:.35rem;background:#FFF;
  border:1px solid var(--line);border-radius:999px;padding:.4rem .7rem;font-family:"Jost",sans-serif;
  font-size:.8125rem;font-weight:500;color:var(--ink-mid);cursor:pointer;white-space:nowrap;
  box-shadow:var(--lift-1)}
.chan .ci{font-size:.625rem;color:var(--seed-deep)}
.chan .cn{font-size:.625rem;font-weight:700;background:var(--seed-wash);color:var(--seed-deep);
  border-radius:4px;padding:.1rem .28rem}
.chan.on{background:var(--espresso);border-color:var(--espresso);color:#F7F2E7}
.chan.on .ci{color:var(--gilt)}
.chan.on .cn{background:rgba(228,196,138,.2);color:var(--gilt)}

.ctabs{display:flex;gap:1.2rem;padding:.85rem 1.15rem 0;border-bottom:1px solid var(--line-soft)}
.ctab{background:none;border:0;padding:0 0 .6rem;font-family:"Jost",sans-serif;font-size:.875rem;
  font-weight:600;color:var(--ink-soft);cursor:pointer;position:relative}
.ctab.on{color:var(--ink)}
.ctab.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--seed);border-radius:2px}
.cpane{display:none}
.cpane.on{display:block}

.composer{display:flex;gap:.6rem;margin-bottom:1rem}
.composer .cav{flex:none;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--seed);
  color:#1B150D;display:grid;place-items:center;font-family:"Marcellus",Georgia,serif;
  font-size:.9375rem;box-shadow:var(--lift-1)}
.composer .cin{flex:1;min-width:0;background:#FFF;border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--lift-1);overflow:hidden}
.composer textarea{width:100%;border:0;background:transparent;padding:.7rem .8rem .4rem;
  font-family:"Jost",sans-serif;font-size:.9375rem;color:var(--ink);resize:none;min-height:3.2rem;
  outline:none}
.composer .ctools{display:flex;align-items:center;gap:.65rem;padding:.4rem .7rem .55rem;
  border-top:1px solid var(--line-soft)}
.composer .ct{font-size:.9375rem;color:var(--ink-soft);cursor:pointer;line-height:1}
.btn.tinybtn{margin-left:auto;width:auto;padding:.38rem .85rem;font-size:.75rem;border-radius:7px}

.post .hd{align-items:flex-start}
.post .hw{flex:1;min-width:0}
.post .who{display:flex;align-items:center;gap:.4rem}
.post .pinned{flex:none;font-size:.5625rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--seed-deep);background:var(--seed-wash);
  border:1px solid #EFD5A8;border-radius:4px;padding:.15rem .32rem}
.rolebadge{font-size:.5625rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:var(--seed);color:#1B150D;border-radius:4px;padding:.1rem .3rem}
.rolebadge.r-moderator{background:var(--leaf-wash);color:var(--leaf)}
.rolebadge.r-contributor{background:var(--sand);color:var(--ink-soft)}
.rolebadge.r-admin{background:var(--seed);color:#1B150D}

.post .acts{position:relative}
.rx{display:flex;align-items:center;gap:.25rem;background:#FFF;border:1px solid var(--line);
  border-radius:999px;padding:.22rem .55rem;cursor:pointer;box-shadow:var(--lift-1)}
.rx i{font-style:normal;font-size:.8125rem;line-height:1}
.rx b{font-size:.6875rem;font-weight:700;color:var(--ink-soft);margin-left:.15rem}
.rx.on{border-color:var(--seed);background:var(--seed-wash)}
.rx.on b{color:var(--seed-deep)}
.post .lk.rep{font-size:.75rem;color:var(--ink-soft)}
.rxpick{position:absolute;bottom:2rem;left:0;display:flex;gap:.1rem;background:#FFF;
  border:1px solid var(--line);border-radius:999px;padding:.3rem .4rem;z-index:20;
  box-shadow:var(--lift-2)}
.rxpick button{background:none;border:0;font-size:1.1rem;line-height:1;padding:.15rem .2rem;
  cursor:pointer;border-radius:50%}
.rxpick button.on{background:var(--seed-wash)}

.statrow2{display:flex;gap:.5rem;margin-bottom:1rem}
.stat2{flex:1;background:#FFF;border:1px solid var(--line);border-radius:10px;padding:.7rem .5rem;
  text-align:center;box-shadow:var(--lift-1)}
.stat2 .v{font-family:"Marcellus",Georgia,serif;font-size:1.4rem;line-height:1;color:var(--seed-deep)}
.stat2 .k{font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);
  margin-top:.3rem;font-weight:600}
.av2{flex:none;width:2.1rem;height:2.1rem;border-radius:50%;background:var(--sand);
  border:1px solid var(--line);display:grid;place-items:center;
  font-family:"Marcellus",Georgia,serif;font-size:.875rem;color:var(--seed-deep)}

/* ---- community tabs now mirror HighLevel: Discussion / Learning / Events /
       Leaderboard / Members. Five do not fit at 390px, so the row scrolls. ---- */
.ctabwrap{position:relative;border-bottom:1px solid var(--line-soft)}
.ctabwrap::after{content:"";position:absolute;right:0;top:0;bottom:1px;width:1.8rem;
  pointer-events:none;background:linear-gradient(90deg,rgba(251,248,242,0),var(--paper))}
.ctabs{border-bottom:none;overflow-x:auto;scrollbar-width:none;gap:1.05rem}
.ctabs::-webkit-scrollbar{display:none}
.ctab{flex:none;white-space:nowrap}

/* ---- leaderboard ---- */
.boardhead{display:flex;align-items:flex-end;justify-content:space-between;gap:.8rem;
  margin-bottom:.9rem}
.bswitch{flex:none;display:flex;background:var(--sand);border:1px solid var(--line);
  border-radius:999px;padding:.15rem}
.bsw{background:none;border:0;border-radius:999px;padding:.3rem .7rem;font-family:"Jost",sans-serif;
  font-size:.75rem;font-weight:600;color:var(--ink-soft);cursor:pointer}
.bsw.on{background:#FFF;color:var(--ink);box-shadow:var(--lift-1)}

.brow{display:flex;align-items:center;gap:.65rem;padding:.75rem .7rem;border-radius:11px;
  border:1px solid transparent;margin-bottom:.4rem}
.brow.top{background:linear-gradient(168deg,#FFF,#FDF6EA);border-color:#EFD5A8;
  box-shadow:var(--lift-1)}
.brow.you{background:linear-gradient(168deg,#FFF,var(--seed-wash));border-color:var(--seed)}
.brow .rk{flex:none;width:1.5rem;text-align:center;font-family:"Marcellus",Georgia,serif;
  font-size:1.0625rem;color:var(--ink-soft)}
.brow.top .rk{color:var(--seed-deep)}
.brow .t{flex:1;min-width:0}
.brow .t b{display:flex;align-items:center;gap:.4rem;font-size:.9375rem;font-weight:600;
  color:var(--ink)}
.brow .t > span{display:block;font-size:.75rem;color:var(--ink-soft);margin-top:.1rem}
.bbar{display:block;height:.28rem;border-radius:2px;background:rgba(122,98,66,.14);
  margin-top:.4rem;overflow:hidden}
.bbar i{display:block;height:100%;border-radius:2px;
  background:linear-gradient(90deg,#FBB03B,var(--seed))}
.brow .pts{flex:none;text-align:right}
.brow .pts b{display:block;font-family:"Marcellus",Georgia,serif;font-size:1.15rem;
  color:var(--seed-deep);line-height:1}
.brow .pts span{display:block;font-size:.5625rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:700;margin-top:.15rem}

.ptnote{margin-top:1rem;background:var(--sand);border:1px solid var(--line);border-radius:10px;
  padding:.85rem}
.ptnote b{display:block;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:700}
.ptnote span{display:block;font-size:.875rem;color:var(--ink-mid);line-height:1.55;
  margin-top:.35rem}

/* ---- My Business. Hers alone, sitting under the proposal at the foot of
       Today. Quieter than the proposal card on purpose — the proposal is the
       thing she is meant to read, this is the door she already knows about. ---- */
.adminbtn{display:flex;align-items:center;gap:.75rem;width:100%;margin-top:.7rem;
  padding:.85rem .9rem;border-radius:12px;border:1px solid var(--gilt);
  border-bottom-color:#8E7237;background:linear-gradient(165deg,#2A2218,#16110A);
  box-shadow:var(--lift-2),var(--edge-dark);
  text-align:left;cursor:pointer;font-family:"Jost",sans-serif}
.adminbtn .eye{flex:none;width:2rem;height:2rem;border-radius:8px;
  background:rgba(228,196,138,.14);border:1px solid rgba(228,196,138,.3);
  display:grid;place-items:center}
.adminbtn .eye svg{width:1.05rem;height:1.05rem;fill:none;stroke:var(--gilt);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.adminbtn .at{flex:1;min-width:0}
.adminbtn .at b{display:block;font-family:"Marcellus",Georgia,serif;font-weight:400;
  font-size:1.0625rem;color:#F7F2E7;line-height:1.15}
.adminbtn .at span{display:block;font-size:.75rem;letter-spacing:.04em;color:var(--gilt);
  margin-top:.15rem}
.adminbtn .arr{flex:none;color:var(--gilt);font-size:1rem}
.adminbtn:active{box-shadow:var(--lift-1),var(--edge-dark)}