/* Portal redesign preview — shared shell. Scoped, no build step. */
:root{
  --deep:#270948; --brand:#5B21B6; --brand-lt:#7C4DD6; --gold:#E8B84B;
  --page:#F7F5FA; --card:#fff; --line:#E7E2EF; --ink:#1A0A3C;
  --body:#4a4458; --muted:#8b83a0; --dark:#140825;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:Inter,system-ui,-apple-system,sans-serif;background:var(--page);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 1.5rem}

/* ---------- top bar ---------- */
.topbar{background:var(--dark);border-bottom:1px solid rgba(255,255,255,.08);position:sticky;top:0;z-index:50}
.topbar-in{max-width:1180px;margin:0 auto;padding:.7rem 1.5rem;display:flex;align-items:center;gap:1.6rem}
.tb-logo img{height:25px;display:block;opacity:.95}
.tb-nav{display:flex;gap:1.35rem;margin-left:.4rem}
.tb-nav a{font-size:.83rem;color:rgba(255,255,255,.62);padding:.3rem 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;white-space:nowrap}
.tb-nav a:hover{color:#fff}
.tb-nav a.on{color:#fff;border-bottom-color:var(--gold)}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:.6rem}
.tb-btn{font-size:.75rem;color:rgba(255,255,255,.68);border:1px solid rgba(255,255,255,.2);border-radius:7px;padding:.34rem .7rem;white-space:nowrap}
.tb-btn:hover{color:#fff;border-color:rgba(255,255,255,.45)}
.tb-you{width:31px;height:31px;border-radius:50%;background:linear-gradient(140deg,var(--brand),var(--brand-lt));color:#fff;display:grid;place-items:center;font-size:.76rem;font-weight:600}

/* ---------- generic ---------- */
.eyebrow{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0 0 .55rem;font-weight:600}
.ptitle{font-family:'Playfair Display',Georgia,serif;font-weight:400;margin:0}
.sec{margin:2.6rem 0}
.sechead{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.1rem}
.sechead h2{font-family:'Playfair Display',Georgia,serif;font-weight:400;font-size:1.55rem;margin:0}
.sechead h2 em{font-style:italic;color:var(--brand)}
.sechead .more{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--brand);font-weight:600}
.pill{display:inline-block;font-size:.68rem;background:#EFEAF8;color:var(--brand);border-radius:99px;padding:.2rem .62rem;font-weight:600}
.pill.g{background:rgba(232,184,75,.16);color:#8a6410}
.pill.dim{background:#F0EEF4;color:var(--muted)}
.note{background:#FFF9E8;border:1px solid #F0E2B8;border-radius:10px;padding:.7rem .95rem;font-size:.78rem;color:#6b5720;margin:1rem 0}

/* ---------- mobile shell ---------- */
@media(max-width:820px){
  body{overflow-x:hidden}
  .topbar-in{padding:.55rem .9rem;gap:.8rem}
  .tb-logo img{height:21px}
  .tb-nav{gap:.9rem;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-left:0;flex:1;min-width:0}
  .tb-nav::-webkit-scrollbar{display:none}
  .tb-nav a{font-size:.78rem}
  .tb-right .tb-btn{display:none}
  .tb-you{width:28px;height:28px;font-size:.72rem;flex:none}
  .wrap{padding:0 1.1rem}
}
@media(max-width:430px){
  .tb-nav a{font-size:.74rem}
  .tb-nav{gap:.75rem}
}

/* identity menu on the avatar — replaces the Account button */
.tb-you{position:relative;cursor:pointer;user-select:none}
.tbmenu{display:none;position:absolute;right:0;top:calc(100% + 9px);min-width:214px;background:#fff;border:1px solid var(--line);
  border-radius:11px;box-shadow:0 14px 34px rgba(20,8,37,.24);padding:.4rem;z-index:80;text-align:left;cursor:default}
.tbmenu.open{display:block}
.tbmenu .who{display:block;padding:.55rem .65rem .6rem;border-bottom:1px solid var(--line);margin-bottom:.3rem;font-size:.73rem;color:var(--muted)}
.tbmenu .who b{display:block;font-size:.83rem;color:var(--ink);font-weight:600;margin-bottom:.1rem}
.tbmenu a{display:block;padding:.45rem .65rem;border-radius:7px;font-size:.79rem;color:var(--ink)}
.tbmenu a:hover{background:#F6F3FB;color:var(--brand)}

/* preview-only demo switches — must never sit on top of the content on a phone */
@media(max-width:820px){
  .demo{font-size:.66rem;padding:.34rem .5rem;border-radius:8px;opacity:.92}
  .demo b{font-weight:600}
}


/* ---------- prestige sidebar (Aug 20 — Yshai: sidebar helps orientation,
   but in OUR language, not an app rail) ---------- */
.siderail{position:fixed;inset:0 auto 0 0;width:236px;background:linear-gradient(178deg,#170928 0%,#120722 58%,#0f0616 100%);border-right:1px solid rgba(255,255,255,.07);z-index:60;display:flex;flex-direction:column;padding:1.35rem 0 1.05rem}
.sr-logo{display:block;padding:0 1.4rem 1.15rem}
.sr-logo img{height:30px;display:block;opacity:.95}
.sr-sec{font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(232,184,75,.55);font-weight:600;padding:1.15rem 1.45rem .45rem}
.sr-a{display:flex;align-items:center;gap:.7rem;padding:.52rem 1.45rem;font-size:.865rem;color:rgba(255,255,255,.6);border-left:2px solid transparent;transition:color .14s,background .14s;position:relative}
.sr-a:hover{color:#fff;background:rgba(255,255,255,.03)}
.sr-a.on{color:#fff;border-left-color:var(--gold);background:linear-gradient(90deg,rgba(232,184,75,.09),transparent 70%)}
.sr-a.on .sr-name{font-weight:600}
.sr-a .cnt{margin-left:auto;font-size:.66rem;color:rgba(255,255,255,.38)}
.sr-a .cnt.new{background:var(--gold);color:#31220a;font-weight:700;border-radius:99px;padding:.06rem .44rem}
.sr-live{width:7px;height:7px;border-radius:50%;background:#3ddc84;margin-left:auto;box-shadow:0 0 0 0 rgba(61,220,132,.7);animation:pulse 1.9s infinite}
.sr-foot{margin-top:auto;padding:1rem 1.45rem 0;border-top:1px solid rgba(255,255,255,.07)}
.sr-you{display:flex;align-items:center;gap:.7rem;padding:.35rem 0}
.sr-ava{width:34px;height:34px;border-radius:50%;background:linear-gradient(140deg,var(--brand),var(--brand-lt));color:#fff;display:grid;place-items:center;font-size:.8rem;font-weight:600;flex:none;position:relative;cursor:pointer}
.sr-ava:hover::after{content:'add your photo';position:absolute;left:44px;top:50%;transform:translateY(-50%);background:#000;color:#fff;font-size:.62rem;font-weight:500;border-radius:6px;padding:.28rem .55rem;white-space:nowrap;z-index:5}
.sr-you .nm{font-size:.78rem;color:#fff;font-weight:500;line-height:1.25}
.sr-you .em{font-size:.64rem;color:rgba(255,255,255,.38)}
.sr-out{display:block;font-size:.7rem;color:rgba(255,255,255,.42);padding:.55rem 0 0}
.sr-out:hover{color:#fff}
.sr-signout{display:flex;align-items:center;justify-content:center;gap:.5rem;
  width:100%;margin:.7rem 0 .1rem;padding:.52rem .8rem;
  font-family:inherit;font-size:.75rem;font-weight:500;line-height:1.3;text-align:center;
  color:rgba(255,255,255,.62);background:transparent;
  border:1px solid rgba(255,255,255,.14);border-radius:7px;
  cursor:pointer;transition:color .14s,border-color .14s,background .14s}
.sr-signout:hover{color:#fff;border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.05)}
.sr-signout:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.sr-signout svg{width:13px;height:13px;flex:none;opacity:.75}
@media(max-width:900px){.sr-signout{min-height:44px;font-size:.8rem;margin-bottom:.4rem}}
/* No hamburger. There was one on every page and it was invisible at every
   width — hidden above 900px by design, and below it by the rule saying the
   tab bar replaces it. The More tab opens the drawer. (Sep 13, 2026) */
body.has-rail{padding-left:236px}
body.has-rail .topbar{display:none}
@media(max-width:900px){
  body.has-rail{padding-left:0}
  .siderail{transform:translateX(-102%);transition:transform .22s;box-shadow:none}
  body.rail-open .siderail{transform:none;box-shadow:0 0 60px rgba(0,0,0,.5)}
}


/* ── PHONE PASS (Aug 21 — he answers feedback from the road) ──
   The burger is fixed at top-left, so every page header needs a lane for it. */
@media(max-width:900px){
  .head, .lh, .dash-hero, .hero{padding-top:3.6rem !important}
  .head .eyebrow, .lh .eyebrow{padding-left:0}
  .wrap{padding-left:1rem;padding-right:1rem}
  .head h1, .lh h1{font-size:1.55rem}
  .head p{font-size:.86rem}
  /* nothing may scroll the page sideways */
  html,body{max-width:100%;overflow-x:hidden}
  .sub2{flex-wrap:wrap;gap:.4rem}
  .g{grid-template-columns:1fr 1fr;gap:.7rem}
  .btn{padding:.65rem 1rem}
}
@media(max-width:430px){
  .g{grid-template-columns:1fr}
}


/* ── PHONE NAVIGATION (Aug 21 — his call: the rail matters MOST on mobile,
   and a hidden drawer is the weakest pattern there). On phones the rail
   becomes a fixed bottom bar: thumb-reachable, always visible, four
   destinations plus More for the rest. The drawer still exists behind More
   so nothing is unreachable. ── */
.tabbar{display:none}
@media(max-width:900px){
  .tabbar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:65;
    background:rgba(18,7,34,.97); backdrop-filter:blur(12px);
    border-top:1px solid rgba(255,255,255,.09);
    padding:.35rem .25rem calc(.35rem + env(safe-area-inset-bottom,0px));
  }
  .tb{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:.18rem;
    padding:.42rem .2rem; color:rgba(255,255,255,.5); font-size:.63rem;
    font-weight:500; letter-spacing:.01em; text-align:center; border-radius:10px;
    position:relative; min-width:0;
  }
  button.tb{background:none;border:0;font-family:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
  .tb svg{width:21px;height:21px;flex:none}
  .tb span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .tb.on{color:var(--gold)}
  .tb.on::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:22px;height:2px;background:var(--gold);border-radius:0 0 3px 3px}
  .tb .dot{position:absolute;top:.3rem;right:calc(50% - 18px);width:7px;height:7px;border-radius:50%;background:var(--gold)}
  .tb .dot.live{background:#3ddc84}
  body.has-rail{padding-bottom:4.6rem}      /* the bar never covers content */
  .siderail{transform:translateX(-102%);transition:transform .22s;bottom:4.6rem;overflow-y:auto;overscroll-behavior:contain}
  body.rail-open .siderail{transform:none;box-shadow:0 0 60px rgba(0,0,0,.55)}
  body.rail-open::after{content:'';position:fixed;inset:0;background:rgba(8,3,16,.5);z-index:59}
}


/* ── THE PICKER (Aug 21, his rule): any long list — lessons, rhythms —
   collapses to a button showing the current choice, opens on tap, and
   closes the moment something is chosen. Lists never sit open eating
   the page, least of all on a phone. ── */
.pick{position:relative}
.pickbtn{display:inline-flex;align-items:center;gap:.55rem;font-family:inherit;font-size:.83rem;font-weight:600;color:var(--ink);background:#F6F3FB;border:1px solid var(--line);border-radius:9px;padding:.5rem .85rem;cursor:pointer}
.pickbtn:hover{border-color:#cfc6e0}
.pickbtn .car{font-size:.6rem;color:var(--brand);transition:transform .15s;margin-left:auto}
.pick.open .pickbtn .car{transform:rotate(180deg)}
.pickpanel{display:none;position:absolute;left:0;top:calc(100% + 8px);width:300px;max-height:min(56vh,430px);background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:0 18px 44px rgba(20,8,37,.2);z-index:40;flex-direction:column;overflow-y:auto;padding:.4rem}
.pick.open .pickpanel{display:flex}
.prow{display:flex;align-items:center;gap:.75rem;padding:.5rem .7rem;border-radius:8px;cursor:pointer;font-size:.84rem;transition:background .13s}
.prow:hover{background:rgba(91,33,182,.05)}
.prow.on{background:rgba(91,33,182,.09);box-shadow:inset 3px 0 0 var(--brand)}
.prow .car{font-size:.58rem;color:#c9c0d8;width:.9rem;flex:none}
.prow.on .car{color:var(--brand)}
.prow .nm{font-weight:600;flex:1;min-width:0}
.prow.on .nm{color:var(--brand)}
.prow .mt{font-size:.74rem;color:#9a93a6;flex:none}
@media(max-width:900px){
  .pickbtn{width:100%;justify-content:space-between}
  .pickpanel{width:calc(100vw - 2.6rem);max-width:340px}
}


/* The way back out, reachable on a phone (his note: could not find it).
   On desktop it stays in the rail foot; on a phone it also sits at the end of
   the drawer the More tab opens, where the thumb already is. */
.sr-web{display:none}
@media(max-width:900px){
  .sr-web{display:flex;margin-top:.6rem;color:rgba(255,255,255,.5)}
  .sr-web:hover{color:#fff}
  .siderail .sr-foot .sr-out{display:none}
}


/* ── PICKERS ON A PHONE (Aug 21, second pass): anchoring the menu to the
   button pushed it off the bottom of the screen and under the tab bar. On a
   phone a long menu becomes a sheet: pinned above the bar, scrolling inside
   itself, with a dimmed page behind it. Cannot be covered, cannot be clipped. */
@media(max-width:900px){
  .pick .pickpanel{
    position:fixed !important;
    left:.55rem; right:.55rem; bottom:5.1rem; top:auto !important;
    width:auto !important; max-width:none !important;
    max-height:min(52vh,420px); overflow-y:auto;
    z-index:90 !important; border-radius:16px;
    box-shadow:0 -10px 50px rgba(8,3,16,.5);
    padding:.5rem;
  }
  .pick.open::before{
    content:''; position:fixed; inset:0; z-index:89;
    background:rgba(8,3,16,.45); backdrop-filter:blur(2px);
  }
  .pick .prow{padding:.7rem .8rem}          /* thumb-sized rows */
  .pick .prow .nm{font-size:.88rem}
}