:root{
--ink:#04102a;--navy:#081b3f;--card:#0d2350;--card2:#0c2049;--bd:#1e3260;
--txt:#eef2fa;--mut:#93a6c9;--soft:#b9c6e0;
--volt:#CCFF00;--blue:#1F5AA8;--green:#1B6B45;--gold:#C9962B;
--good:#3ED598;--warn:#FFB84D;
--f:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
--m:ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--txt);font:16px/1.65 var(--f);-webkit-font-smoothing:antialiased}
img{max-width:100%}a{color:inherit}
h1,h2,h3,h4{margin:0;text-wrap:balance;letter-spacing:-.01em}
.mono{font-family:var(--m)}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--ink) 90%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--bd)}
.nav .in{display:flex;align-items:center;gap:26px;max-width:1180px;margin:0 auto;padding:11px 24px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
.plate{background:#fff;border-radius:9px;padding:5px 7px;display:flex}
.wm{font-weight:800;font-size:15px;letter-spacing:.03em;line-height:1}
.wm i{font-style:normal;color:var(--volt)}
.wm small{display:block;font-size:8.5px;letter-spacing:.28em;color:var(--mut);font-weight:600;margin-top:3px}
.nav .sp{flex:1}
.nav nav{display:flex;gap:22px}
.nav nav a{color:var(--mut);text-decoration:none;font-size:13.5px;font-weight:600;letter-spacing:.02em}
.nav nav a:hover,.nav nav a[aria-current]{color:var(--volt)}
.navcta{background:var(--volt);color:var(--navy);padding:9px 18px;border-radius:99px;font:800 12px/1 var(--f);letter-spacing:.11em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.burger{display:none;background:none;border:0;color:var(--txt);font-size:22px;cursor:pointer}

/* ---------- hero ---------- */
.hero{position:relative;text-align:center;padding:104px 24px 112px;overflow:hidden;
background:radial-gradient(1100px 520px at 50% -12%,
  color-mix(in srgb,var(--volt) 12%,var(--card)) 0%,
  var(--card) 34%,var(--navy) 68%,var(--ink) 100%)}
.hero::before{content:"";position:absolute;inset:0;
background-image:linear-gradient(#5b86d422 1px,transparent 1px),linear-gradient(90deg,#5b86d422 1px,transparent 1px);
background-size:180px 180px;mask-image:radial-gradient(760px 420px at 50% 30%,#000 30%,transparent 78%)}
.hero>*{position:relative}
.eyebrow{color:var(--volt);font:800 12px/1 var(--f);letter-spacing:.22em;text-transform:uppercase}
.hero h1{margin:20px auto 0;max-width:15ch;font-size:clamp(38px,7.4vw,76px);line-height:.97;font-weight:800;text-transform:uppercase}
.hero p{margin:22px auto 0;max-width:50ch;color:var(--soft);font-size:17px}
.fine{margin-top:16px;color:var(--mut);font-size:12.5px}
.strip{height:5px;background:linear-gradient(90deg,#1F5AA8,#1B6B45 28%,#CCFF00 55%,#C9962B 78%,#1F5AA8)}

.btn{display:inline-block;padding:17px 40px;border-radius:99px;background:var(--volt);color:var(--navy);
font:800 13px/1 var(--f);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;box-shadow:0 0 42px #ccff0055;border:0;cursor:pointer}
.btn:hover{box-shadow:0 0 58px #ccff0080}
.btn.ghost{background:transparent;color:var(--txt);border:1px solid var(--bd);box-shadow:none}
.btn.ghost:hover{border-color:var(--volt);color:var(--volt)}
.btn.sm{padding:12px 24px;font-size:11.5px}
.hero .btn{margin-top:34px}

/* ---------- founding bar ---------- */
.founding{background:linear-gradient(90deg,var(--card),var(--card2));border-bottom:1px solid var(--bd);padding:13px 24px;text-align:center;font-size:13.5px}
.founding b{color:var(--volt)}
.founding .seats{font-family:var(--m);background:var(--ink);border:1px solid var(--volt);color:var(--volt);padding:3px 9px;border-radius:6px;font-size:12px;margin-left:8px}

/* ---------- sections ---------- */
section{padding:78px 0}
section.alt{background:var(--navy)}
.head{text-align:center;max-width:62ch;margin:0 auto 44px}
.head .eyebrow{display:block;margin-bottom:14px}
.head h2{font-size:clamp(27px,4vw,40px);font-weight:800;text-transform:uppercase;line-height:1.05}
.head p{color:var(--soft);margin:16px 0 0;font-size:16px}

.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:24px}
.card h3{font-size:17px;font-weight:700;margin-bottom:9px}
.card p{color:var(--soft);font-size:14.5px;margin:0}
.card .num{font:800 12px/1 var(--m);color:var(--volt);letter-spacing:.1em;display:block;margin-bottom:12px}

/* pathway bands */
.bands{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin:36px 0 8px}
.band{width:60px;height:9px;border-radius:99px}
.bandnote{text-align:center;color:var(--mut);font-size:12.5px;letter-spacing:.03em}

/* price */
.price{max-width:460px;margin:0 auto;background:var(--card);border:1px solid var(--volt);border-radius:18px;padding:34px;text-align:center;position:relative}
.price .amt{font:800 62px/1 var(--f);letter-spacing:-.02em}
.price .amt>.per{font-size:19px;color:var(--mut);font-weight:600;letter-spacing:0}
.price .was{color:var(--mut);text-decoration:line-through;font-size:17px;margin-right:9px}
.price ul{list-style:none;padding:0;margin:26px 0;text-align:left;display:flex;flex-direction:column;gap:11px}
.price li{color:var(--soft);font-size:14.5px;padding-left:26px;position:relative}
.price li::before{content:"";position:absolute;left:0;top:8px;width:13px;height:7px;border-left:2px solid var(--volt);border-bottom:2px solid var(--volt);transform:rotate(-45deg)}
.tagpill{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--volt);color:var(--navy);font:800 10.5px/1 var(--f);letter-spacing:.14em;text-transform:uppercase;padding:7px 15px;border-radius:99px;white-space:nowrap}

/* coach */
/* Grid stretch already makes the cards equal height, but the rate line sat
   directly under the bio — so a two-line bio pushed its rate lower than the
   card beside it. Column flex with the rate on auto top margin pins that row
   to the bottom of every card, whatever the bio length. */
.coach{background:var(--card);border:1px solid var(--bd);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column}
.coach .bd{display:flex;flex-direction:column;flex:1}
.coach .ph{height:180px;background:linear-gradient(135deg,var(--card2),var(--navy));display:flex;align-items:center;justify-content:center;font:800 42px/1 var(--f);color:#2a4d8f}
.coach .bd{padding:20px}
.coach h3{font-size:16.5px;margin-bottom:3px}
.coach .role{color:var(--volt);font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.coach p{color:var(--soft);font-size:13.8px;margin:11px 0 14px}
.coach .rate{font-family:var(--m);font-size:14px;color:var(--txt);border-top:1px solid var(--bd);padding-top:13px;margin-top:auto}
.coach .rate b{color:var(--volt)}

/* event */
.ev{display:flex;gap:20px;align-items:center;background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:20px 22px;flex-wrap:wrap}
.ev .date{flex:0 0 68px;text-align:center;background:var(--ink);border:1px solid var(--bd);border-radius:11px;padding:10px 6px}
.ev .date b{display:block;font:800 23px/1 var(--f)}
.ev .date span{font-size:10.5px;color:var(--mut);letter-spacing:.11em;text-transform:uppercase}
.ev .info{flex:1;min-width:200px}
.ev .info h3{font-size:16.5px;margin-bottom:4px}
.ev .info p{color:var(--mut);font-size:13.3px;margin:0}
.ev .book{text-align:right}
.ev .book .p{font:800 20px/1 var(--f);margin-bottom:9px}
.chipl{display:inline-block;font:700 10px/1 var(--m);letter-spacing:.06em;padding:4px 8px;border-radius:5px;background:#ccff001a;color:var(--volt);margin-bottom:7px}
.chipl.low{background:#ffb84d1a;color:var(--warn)}
.chipl.out{background:#ff6b6b1a;color:#FF6B6B}

/* faq */
.faq{border-top:1px solid var(--bd)}
.faq:last-of-type{border-bottom:1px solid var(--bd)}
.faq summary{cursor:pointer;padding:19px 40px 19px 0;font-size:16px;font-weight:600;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:16px;color:var(--volt);font-size:22px;font-weight:400}
.faq[open] summary::after{content:"–"}
.faq p{color:var(--soft);font-size:14.7px;margin:0 0 19px;max-width:76ch}

/* cta band */
.ctaband{text-align:center;background:radial-gradient(760px 300px at 50% 0%,color-mix(in srgb,var(--volt) 10%,var(--card)),var(--navy) 70%);border-top:1px solid var(--bd);border-bottom:1px solid var(--bd)}
.ctaband h2{font-size:clamp(26px,4vw,40px);font-weight:800;text-transform:uppercase;max-width:18ch;margin:0 auto}
.ctaband p{color:var(--soft);margin:16px auto 0;max-width:48ch}

/* footer */
footer{padding:52px 0 34px;background:var(--ink);border-top:1px solid var(--bd)}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px}
@media(max-width:760px){.fgrid{grid-template-columns:1fr 1fr}}
footer h4{font:700 11px/1 var(--f);letter-spacing:.13em;text-transform:uppercase;color:var(--mut);margin-bottom:15px}
footer a{display:block;color:var(--soft);text-decoration:none;font-size:14px;margin-bottom:9px}
footer a:hover{color:var(--volt)}
.fbot{border-top:1px solid var(--bd);margin-top:36px;padding-top:22px;color:var(--mut);font-size:12.5px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

@media(max-width:860px){
 .nav nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--navy);border-bottom:1px solid var(--bd);padding:10px 24px 18px}
 .nav nav.on{display:flex}.nav nav a{padding:11px 0;font-size:15px}
 .burger{display:block;order:3}
 .nav .in{position:relative}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}

/* ---------- added: logo, login, shop, admin ---------- */
.brandmark{display:flex;line-height:0}
.navlog{color:var(--soft);text-decoration:none;font-size:13.5px;font-weight:600;white-space:nowrap}
.navlog:hover{color:var(--volt)}
.ev .book .g{font-size:13px;color:var(--mut);font-weight:600}

/* shop */
.chips{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-bottom:32px}
.chipbtn{background:var(--card);border:1px solid var(--bd);color:var(--mut);border-radius:99px;
 padding:9px 19px;font:600 13px var(--f);cursor:pointer}
.chipbtn:hover{border-color:var(--volt);color:var(--txt)}
.chipbtn.on{background:var(--volt);border-color:var(--volt);color:var(--navy)}
.prod{background:var(--card);border:1px solid var(--bd);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.pimg{height:158px;background:linear-gradient(150deg,var(--card2),var(--navy));display:flex;align-items:center;
 justify-content:center;font-size:52px;position:relative}
.ptag{position:absolute;top:12px;left:12px;background:var(--volt);color:var(--navy);font:800 9.5px/1 var(--f);
 letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;border-radius:5px}
.pbd{padding:17px;display:flex;flex-direction:column;gap:9px;flex:1}
.pcat{font:700 10px/1 var(--m);letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.prod h3{font-size:15px;font-weight:700;flex:1}
.pprice s{color:var(--mut);font-size:13.5px}
.pprice b{font-size:18px;margin-left:4px}
.pprice span{font-size:11px;color:var(--volt);font-weight:700;text-transform:uppercase;letter-spacing:.07em}
.cartpill{position:relative}
#cartCount{position:absolute;top:-6px;right:-8px;background:var(--volt);color:var(--navy);border-radius:99px;
 min-width:19px;height:19px;font:800 11px/19px var(--f);text-align:center}
.bandnote a{color:var(--volt);text-decoration:none;font-weight:600}

/* forms / login / admin */
.panel{max-width:440px;margin:0 auto;background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:32px}
.tabs{display:flex;gap:6px;background:var(--ink);border:1px solid var(--bd);border-radius:11px;padding:5px;margin-bottom:26px}
.tabs button{flex:1;background:none;border:0;color:var(--mut);padding:10px;border-radius:8px;
 font:700 12.5px var(--f);cursor:pointer}
.tabs button.on{background:var(--volt);color:var(--navy)}
label{display:block;font:700 11px/1 var(--f);letter-spacing:.1em;text-transform:uppercase;
 color:var(--mut);margin:0 0 7px}
input,select,textarea{width:100%;background:var(--ink);border:1px solid var(--bd);border-radius:9px;
 color:var(--txt);padding:12px 13px;font:15px var(--f);margin-bottom:16px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--volt)}
textarea{resize:vertical;min-height:74px;line-height:1.5}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.row2{grid-template-columns:1fr}}
.hint{color:var(--mut);font-size:12.5px;margin:-8px 0 18px}
.linkrow{display:flex;justify-content:space-between;margin-top:16px;font-size:13px}
.linkrow a{color:var(--volt);text-decoration:none}

/* admin */
.adm{display:flex;max-width:1240px;margin:0 auto;min-height:70vh}
.admnav{width:206px;flex:0 0 206px;border-right:1px solid var(--bd);padding:26px 12px 40px 24px}
.admnav button{display:block;width:100%;text-align:left;background:none;border:0;color:var(--mut);
 padding:9px 11px;border-radius:8px;font:600 13.5px var(--f);cursor:pointer}
.admnav button:hover{background:var(--card);color:var(--txt)}
.admnav button.on{background:var(--card2);color:var(--volt)}
.admbody{flex:1;min-width:0;padding:26px 28px 80px}
.admpane{display:none}.admpane.on{display:block}
.admpane h2{font-size:20px;font-weight:800;text-transform:uppercase;margin-bottom:5px}
.admpane .sub{color:var(--mut);font-size:13.5px;margin:0 0 22px;max-width:70ch}
.editrow{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:18px;margin-bottom:13px}
.editrow .top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
.editrow .top b{font-size:14.5px}
/* The profile pane mixed .card and .editrow, which differ in radius, padding
   and heading size — so the two editable tiles read as a different component
   from the four beside them. When an element carries both, .card wins the box.
   (.editrow is declared after .card, so this override has to live here.) */
.card.editrow{border-radius:14px;padding:24px;margin-bottom:0}
/* .editrow .top above already lays this row out; only the heading needs
   resetting, because .card h3 adds a bottom margin the flex row doesn't want.
   Deliberately NOT `.card .top` — coach.html has a card whose .top sets its own
   inline flex without justify-content, and a blanket rule would space-between
   its avatar away from its text. */
.card.editrow .top h3{margin:0}
/* The type scale sizes `.card p` at lead size and `.hint` at small size, and
   `.card p` is the more specific of the two — so promoting a tile to .card
   silently blew its hint up to body copy. Win it back by matching on both. */
.card.editrow .hint,.card.editrow .tiny{font-size:var(--tsm)}
/* Every tile a direct grid child, so the row stretch that already exists makes
   them equal height. They used to be nested inside two column wrappers, which
   opted them out of it and let each column drift independently. */
.gtiles{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));align-items:stretch}
.del{background:none;border:1px solid var(--bd);color:var(--mut);border-radius:7px;padding:5px 11px;
 font:600 11.5px var(--f);cursor:pointer}
.del:hover{border-color:#FF6B6B;color:#FF6B6B}
.savebar{position:sticky;bottom:0;background:color-mix(in srgb,var(--ink) 94%,transparent);backdrop-filter:blur(10px);
 border-top:1px solid var(--bd);padding:14px 0;margin-top:26px;display:flex;gap:11px;align-items:center}
.saved{color:var(--good);font-size:13px;font-weight:600;opacity:0;transition:opacity .2s}
.saved.on{opacity:1}
.kpi{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:16px 18px}
.kpi b{display:block;font:800 26px/1 var(--m);margin-bottom:5px}
.kpi span{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.08em}
@media(max-width:860px){.adm{flex-direction:column}.admnav{width:auto;flex:auto;border-right:0;
 border-bottom:1px solid var(--bd);display:flex;gap:5px;overflow-x:auto;padding:12px 16px}
 .admnav button{white-space:nowrap;width:auto}.admbody{padding:22px 18px 70px}}

/* logo showcase */
.logobox{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:34px;text-align:center}
.logobox.light{background:#F4F6FA;border-color:#d8dee9}
.logobox h4{font:700 10.5px/1 var(--m);letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin-bottom:22px}
.logobox.light h4{color:#5b6479}
.logobox .lk{display:flex;align-items:center;gap:11px;justify-content:center}
.logobox.light .wm{color:#0B1F44}
.logobox.light .wm i{color:#7d9e00}
.logobox.light .wm small{color:#5b6479}

/* ================= PORTALS ================= */
.portal{max-width:1180px;margin:0 auto;padding:30px 24px 90px}
.phead{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.avatar{width:54px;height:54px;border-radius:14px;background:linear-gradient(140deg,var(--card2),var(--navy));
 border:1px solid var(--bd);display:flex;align-items:center;justify-content:center;font:800 19px var(--f)}
.phead h1{font-size:25px;font-weight:800}
.phead .sub{color:var(--mut);font-size:13.5px}
.phead .sp{flex:1}
.rankchip{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--bd);
 border-radius:99px;padding:7px 15px;font-size:13px;font-weight:600}
.rankdot{width:11px;height:11px;border-radius:50%}
.ptabs{display:flex;gap:6px;border-bottom:1px solid var(--bd);margin-bottom:26px;overflow-x:auto}
.ptabs button{background:none;border:0;border-bottom:2px solid transparent;color:var(--mut);
 padding:11px 15px;font:700 13.5px var(--f);cursor:pointer;white-space:nowrap}
.ptabs button:hover{color:var(--txt)}
.ptabs button.on{color:var(--volt);border-bottom-color:var(--volt)}
.ppane{display:none}.ppane.on{display:block}
.bar{height:8px;background:var(--ink);border-radius:99px;overflow:hidden;margin:10px 0 6px}
.bar i{display:block;height:100%;background:var(--volt);border-radius:99px}
.stat{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:15px 17px}
.stat b{display:block;font:800 24px/1 var(--m);margin-bottom:5px}
.stat span{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.08em}

/* ================= PASSPORT BOOK ================= */
.bookwrap{display:flex;flex-direction:column;align-items:center;gap:20px;padding:14px 0 6px}
.book{position:relative;width:min(820px,94vw);height:min(500px,64vw);perspective:2400px}
.book.shut{width:min(410px,47vw)}
.leaf{position:absolute;top:0;left:50%;width:50%;height:100%;transform-origin:left center;
 transform-style:preserve-3d;transition:transform .85s cubic-bezier(.42,0,.2,1)}
.book.shut .leaf{left:0;width:100%}
.leaf.flip{transform:rotateY(-180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden;
 background:linear-gradient(160deg,#132c5e,#0b1e44);border:1px solid var(--bd);padding:22px 24px}
.face.b{transform:rotateY(180deg);background:linear-gradient(200deg,#122a5a,var(--navy))}
.face.f{border-radius:0 12px 12px 0;box-shadow:inset 14px 0 26px -18px #000}
.face.b{border-radius:12px 0 0 12px;box-shadow:inset -14px 0 26px -18px #000}
.cover{background:linear-gradient(150deg,#123a80,#0B1F44 62%);border-radius:0 14px 14px 0;
 display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:30px}
.cover h3{font-size:23px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.cover .sm{color:var(--mut);font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.cover .seal{border:2px solid var(--volt);border-radius:50%;width:74px;height:74px;display:flex;
 align-items:center;justify-content:center;color:var(--volt);font:800 11px/1.3 var(--m);text-align:center}
.pgnum{position:absolute;bottom:12px;left:0;right:0;text-align:center;color:color-mix(in srgb,var(--paccent) 55%,var(--mut));
 font:600 10.5px var(--m);letter-spacing:.1em}
.face h4{font:700 10.5px/1 var(--m);letter-spacing:.14em;text-transform:uppercase;
 color:color-mix(in srgb,var(--paccent) 60%,var(--mut));margin-bottom:16px;padding-bottom:11px;
 border-bottom:1px dashed color-mix(in srgb,var(--paccent) 34%,transparent)}
.sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.stamp{aspect-ratio:1;border-radius:50%;border:2px dashed var(--paccent);background:color-mix(in srgb,var(--pcover) 30%,var(--ink));
 display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
 padding:6px;cursor:pointer;transition:transform .18s,background .18s;transform:rotate(var(--r,0deg))}
.stamp:hover{transform:rotate(0) scale(1.08);background:#123063}
.stamp .t1{font:700 7.5px/1 var(--m);letter-spacing:.06em;color:var(--volt);text-transform:uppercase}
.stamp .t2{font:800 10px/1.15 var(--f);margin:4px 2px;color:#fff}
.stamp .t3{font:600 7px/1 var(--m);color:var(--mut)}
.stamp.ev{border-color:#6FA8FF}.stamp.ev .t1{color:#6FA8FF}
.stamp.as{border-color:#3ED598}.stamp.as .t1{color:#3ED598}
.stamp.mt{border-color:#FFB84D}.stamp.mt .t1{color:#FFB84D}
.empty{aspect-ratio:1;border-radius:50%;border:1.5px dashed var(--paccent);opacity:.22}
.bookctl{display:flex;gap:11px;align-items:center}
.bookctl button{background:var(--card);border:1px solid var(--bd);color:var(--txt);width:40px;height:40px;
 border-radius:11px;font-size:16px;cursor:pointer}
.bookctl button:hover:not(:disabled){border-color:var(--volt);color:var(--volt)}
.bookctl button:disabled{opacity:.32;cursor:default}
.bookctl .lbl{color:var(--mut);font:600 12.5px var(--m);min-width:112px;text-align:center}
@media(max-width:700px){.book{height:74vw}.sgrid{grid-template-columns:repeat(2,1fr);gap:10px}
 .face{padding:16px 15px}}

/* modal */
.modal{position:fixed;inset:0;background:color-mix(in srgb,var(--ink) 84%,transparent);backdrop-filter:blur(6px);z-index:200;
 display:flex;align-items:center;justify-content:center;padding:24px}
.modal[hidden]{display:none}
.mbox{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:28px;
 max-width:420px;width:100%;position:relative}
.mbox .x{position:absolute;top:14px;right:16px;background:none;border:0;color:var(--mut);
 font-size:24px;cursor:pointer;line-height:1}
.mbox .x:hover{color:var(--volt)}
.mbox .bigstamp{width:96px;height:96px;margin:0 auto 18px;border-radius:50%;border:2px dashed var(--volt);
 background:var(--card2);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.mrow{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-top:1px solid var(--bd);font-size:14px}
.mrow span{color:var(--mut)}.mrow b{font-weight:600;text-align:right}

/* student cards / handoff */
.student{background:var(--card);border:1px solid var(--bd);border-radius:13px;padding:18px 20px;margin-bottom:13px}
.student .top{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.student .top .sp{flex:1}
.student h3{font-size:16px;font-weight:700}
.student .meta{color:var(--mut);font-size:12.5px}
.note{background:var(--card2);border-left:2px solid var(--bd);border-radius:0 9px 9px 0;padding:12px 14px;margin-top:10px}
.note.mine{border-left-color:var(--volt)}
.note .who{font:700 11px var(--m);color:var(--volt);letter-spacing:.05em;margin-bottom:5px}
.note.prior .who{color:var(--warn)}
.note p{margin:0;font-size:13.6px;color:var(--soft)}
.handoff{background:#2a1f0a;border:1px solid #4a3a12;border-radius:10px;padding:12px 15px;margin:12px 0;
 font-size:13.3px;color:#ffd591}
.handoff b{color:var(--warn)}
.tiny{font-size:12.5px;color:var(--mut)}
table.acct{width:100%;border-collapse:collapse;font-size:13.3px;min-width:620px}
table.acct th{text-align:left;font:600 10.5px var(--m);letter-spacing:.07em;text-transform:uppercase;
 color:var(--mut);padding:9px 12px;background:var(--card2)}
table.acct td{padding:10px 12px;border-top:1px solid var(--bd)}
table.acct tr:hover td{background:var(--card2)}
.pill{font:700 10px var(--m);padding:3px 8px;border-radius:5px;letter-spacing:.05em}
.pill.member{background:#6fa8ff1f;color:#6FA8FF}.pill.coach{background:#ccff001f;color:var(--volt)}
.pill.admin{background:#3ed5981f;color:var(--good)}.pill.past_due{background:#ff6b6b1f;color:#FF6B6B}
.pill.active{background:#3ed5981f;color:var(--good)}
.demorow{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;background:var(--ink);
 border:1px solid var(--bd);border-radius:10px;padding:11px 14px;margin-bottom:8px;cursor:pointer}
.demorow:hover{border-color:var(--volt)}
.demorow b{font:600 13.5px var(--f);color:var(--txt)}
.demorow span{font-size:12px;color:var(--mut)}

/* pathway ladder in coach view */
.ladder{display:flex;gap:5px;margin:12px 0 6px}
.rung{flex:1;height:34px;border-radius:7px;background:var(--ink);border:1px solid var(--bd);
 display:flex;align-items:center;justify-content:center;font:700 11px var(--m);color:#39507f;position:relative}
.rung.done{border-color:transparent;color:var(--ink)}
.rung.now{outline:2px solid var(--volt);outline-offset:2px;color:#fff}
.rung .tick{position:absolute;top:-7px;right:-4px;width:14px;height:14px;border-radius:50%;
 background:var(--volt);color:var(--ink);font:800 9px/14px var(--f);text-align:center}
.ladlbl{display:flex;justify-content:space-between;font:600 10px var(--m);color:var(--mut);
 letter-spacing:.06em;text-transform:uppercase}
.mile{display:flex;gap:12px;padding:11px 0;border-top:1px solid var(--bd)}
.mile .dot{flex:0 0 11px;width:11px;height:11px;border-radius:50%;margin-top:6px}
.mile .bd{flex:1}
.mile b{font-size:13.8px;font-weight:600}
.mile .d{font:600 11px var(--m);color:var(--mut)}
.inherit{background:#2a1f0a;border:1px solid #4a3a12;border-radius:10px;padding:13px 15px;margin:16px 0 12px}
.inherit .h{font:700 10.5px var(--m);letter-spacing:.12em;text-transform:uppercase;color:var(--warn);margin-bottom:6px}
.inherit p{margin:0;font-size:13.3px;color:#ffd591}
.scope{background:var(--card2);border:1px solid var(--bd);border-radius:10px;padding:13px 16px;
 margin-bottom:20px;font-size:13.2px;color:var(--soft)}
.scope b{color:var(--volt)}
.sechead{font:700 11px var(--m);letter-spacing:.12em;text-transform:uppercase;color:var(--mut);
 margin:24px 0 10px;padding-bottom:8px;border-bottom:1px solid var(--bd)}

/* ---------- availability grid ---------- */
.availwrap{overflow-x:auto;border:1px solid var(--bd);border-radius:12px;background:var(--card)}
table.avail{border-collapse:collapse;min-width:640px;width:100%}
table.avail th{font:600 10.5px var(--m);letter-spacing:.06em;text-transform:uppercase;color:var(--mut);
 padding:10px 6px;background:var(--card2);text-align:center}
table.avail th.h{text-align:right;padding-right:12px;width:62px;background:var(--card2)}
table.avail td{padding:2px;text-align:center}
table.avail td.h{font:600 11px var(--m);color:var(--mut);text-align:right;padding-right:12px;white-space:nowrap}
.slot{width:100%;height:27px;border-radius:6px;border:1px solid var(--bd);background:var(--ink);
 cursor:pointer;transition:background .12s,border-color .12s}
.slot:hover{border-color:var(--volt)}
.slot.on{background:var(--volt);border-color:var(--volt)}
.slot.bk{background:#6FA8FF;border-color:#6FA8FF;cursor:not-allowed}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;font-size:12.5px;color:var(--mut)}
.legend i{display:inline-block;width:13px;height:13px;border-radius:4px;margin-right:6px;
 vertical-align:-2px;border:1px solid var(--bd)}

/* ---------- booking ---------- */
.daycol{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:14px;min-width:0}
.daycol h4{font:700 11px var(--m);letter-spacing:.08em;text-transform:uppercase;color:var(--volt);
 margin-bottom:10px}
.slots{display:flex;flex-direction:column;gap:7px}
.slotbtn{background:var(--ink);border:1px solid var(--bd);color:var(--txt);border-radius:8px;
 padding:9px;font:600 13px var(--m);cursor:pointer}
.slotbtn:hover{border-color:var(--volt);color:var(--volt)}
.bkrow{display:flex;gap:14px;align-items:center;background:var(--card);border:1px solid var(--bd);
 border-radius:12px;padding:14px 17px;margin-bottom:10px;flex-wrap:wrap}
.bkrow .when{flex:0 0 92px;text-align:center;background:var(--ink);border:1px solid var(--bd);
 border-radius:9px;padding:8px 6px}
.bkrow .when b{display:block;font:800 15px/1.1 var(--f)}
.bkrow .when span{font:600 10px var(--m);color:var(--mut);text-transform:uppercase;letter-spacing:.06em}
.bkrow .who{flex:1;min-width:150px}
.bkrow .who b{font-size:14.5px}
.bkrow.cx{opacity:.5}
.bkrow.cx .who b{text-decoration:line-through}

/* ================= PATHWAY / SKILLS ================= */
.skill{margin-bottom:18px}
.skill .lb{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px;margin-bottom:7px}
.skill .lb b{font-weight:600}
.skill .lb span{font:600 12px var(--m);color:var(--mut)}
.track{position:relative;height:11px;background:var(--ink);border-radius:99px}
.track i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#2f7fd8,var(--volt));
 transition:width .7s cubic-bezier(.3,0,.2,1)}
.track .tgt{position:absolute;top:-5px;bottom:-5px;width:2px;background:#fff;opacity:.9;border-radius:2px}
.skill.hit .track i{background:var(--good)}
.skill.hit .lb span{color:var(--good)}
.gapnote{font-size:12px;color:var(--mut);margin-top:6px}
.gapnote b{color:var(--warn)}

.chal{display:flex;gap:11px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--bd)}
.chal:last-child{border-bottom:none}
.chal .bx{flex:0 0 20px;width:20px;height:20px;border-radius:6px;border:1.5px solid var(--bd);
 display:flex;align-items:center;justify-content:center;font:800 12px var(--f);color:transparent;cursor:pointer}
.chal.on .bx{background:var(--volt);border-color:var(--volt);color:var(--ink)}
.chal p{margin:0;font-size:14px}
.chal.on p{color:var(--mut);text-decoration:line-through}
.chal.ro .bx{cursor:default}

.levelcard{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:20px;
 border-left:4px solid var(--bd)}
.levelcard.now{border-left-color:var(--volt)}
.levelcard.done{opacity:.62}
.levelcard h3{font-size:16px;display:flex;align-items:center;gap:9px;margin-bottom:4px}
.levelcard .bd2{width:13px;height:13px;border-radius:50%;flex:0 0 13px}
.levelcard .says{color:var(--soft);font-size:13.5px;margin:6px 0 0}
.pill2{font:700 9.5px var(--m);letter-spacing:.06em;padding:3px 7px;border-radius:5px;
 background:var(--card2);color:var(--mut);text-transform:uppercase}

.grad{position:fixed;inset:0;z-index:400;background:radial-gradient(700px 480px at 50% 35%,color-mix(in srgb,var(--volt) 14%,var(--card)),var(--ink) 72%);
 display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:26px;overflow:hidden}
.grad[hidden]{display:none}
.gband{width:150px;height:150px;border-radius:50%;display:flex;align-items:center;justify-content:center;
 font:800 42px var(--f);color:var(--ink);margin-bottom:26px;animation:pop .8s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{0%{transform:scale(0) rotate(-140deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
.grad h2{font-size:clamp(30px,6vw,52px);font-weight:800;text-transform:uppercase;line-height:1}
.grad .k{color:var(--volt);font:800 12px var(--m);letter-spacing:.24em;text-transform:uppercase;margin-bottom:14px}
.grad p{color:var(--soft);max-width:44ch;margin:16px 0 0}
.confetti{position:absolute;width:9px;height:14px;top:-24px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(108vh) rotate(680deg);opacity:.15}}

/* ================= MATCH PLAY / LADDER ================= */
.mrow2{display:flex;gap:14px;align-items:center;background:var(--card);border:1px solid var(--bd);
 border-radius:12px;padding:14px 17px;margin-bottom:10px;flex-wrap:wrap}
.mrow2 .rk{flex:0 0 40px;font:800 19px var(--m);color:var(--mut);text-align:center}
.mrow2 .rk.top{color:var(--volt)}
.mrow2 .nm{flex:1;min-width:140px}
.mrow2 .nm b{font-size:14.5px}
.mrow2 .pts{font:800 16px var(--m)}
.freepill{font:700 9.5px var(--m);letter-spacing:.06em;padding:3px 7px;border-radius:5px;
 background:#6fa8ff1f;color:#6FA8FF;text-transform:uppercase}
.paidpill{background:#ccff001f;color:var(--volt)}

/* ================= COURT RADAR ================= */
.court{display:flex;gap:14px;align-items:center;background:var(--card);border:1px solid var(--bd);
 border-radius:12px;padding:15px 17px;margin-bottom:10px;flex-wrap:wrap}
.dotbig{width:13px;height:13px;border-radius:50%;flex:0 0 13px}
.dotbig.open{background:var(--good);box-shadow:0 0 0 4px #3ed5982e}
.dotbig.busy{background:var(--warn);box-shadow:0 0 0 4px #ffb84d2e}
.dotbig.full{background:#FF6B6B;box-shadow:0 0 0 4px #ff6b6b2e}
.dotbig.none{background:#39507f}
.court .ci{flex:1;min-width:160px}
.court .ci b{font-size:15px}
.court .ci .m{color:var(--mut);font-size:12.5px}
.rbtns{display:flex;gap:6px;flex-wrap:wrap}
.rbtn{background:var(--ink);border:1px solid var(--bd);color:var(--mut);border-radius:7px;
 padding:7px 11px;font:700 11px var(--m);cursor:pointer}
.rbtn:hover{border-color:var(--volt);color:var(--volt)}

/* ================= PERKS ================= */
.perk{background:var(--card);border:1px solid var(--bd);border-radius:13px;padding:19px;display:flex;
 flex-direction:column;gap:9px}
.perk .b{font-size:16px;font-weight:700}
.perk .o{color:var(--volt);font-weight:700;font-size:14px}
.perk .n{color:var(--mut);font-size:13px;flex:1}
.codebox{display:flex;gap:8px;align-items:center;background:var(--ink);border:1px dashed var(--bd);
 border-radius:8px;padding:9px 12px;font:700 13px var(--m);letter-spacing:.06em}
.codebox button{margin-left:auto;background:none;border:0;color:var(--volt);font:700 11px var(--m);cursor:pointer}

/* ================= WALLET ================= */
.wallet{background:linear-gradient(140deg,var(--card2),var(--navy));border:1px solid var(--volt);
 border-radius:16px;padding:24px;text-align:center}
.wallet b{display:block;font:800 40px/1 var(--m);color:var(--volt);margin:8px 0}

/* ================= MISC ================= */
.avatar.big{width:78px;height:78px;font-size:26px;border-radius:18px}
.strike{background:#2a1010;border:1px solid #5c2323;color:#ff9c9c;border-radius:10px;
 padding:12px 15px;font-size:13.2px;margin-bottom:16px}
.steps{display:flex;gap:8px;margin-bottom:24px;flex-wrap:wrap}
.step{flex:1;min-width:112px;padding:11px 13px;background:var(--card);border:1px solid var(--bd);
 border-radius:10px;font:600 12.5px var(--f);color:var(--mut)}
.step.on{border-color:var(--volt);color:var(--txt)}
.step b{display:block;font:800 10px var(--m);letter-spacing:.1em;color:var(--volt);margin-bottom:3px}
.doc{background:var(--card);border:1px solid var(--bd);border-radius:11px;padding:15px 17px;margin-bottom:10px}
.doc .t{display:flex;gap:10px;align-items:center}
.doc .t b{flex:1;font-size:14.2px}
.doc p{margin:8px 0 0;font-size:12.8px;color:var(--mut)}
.sig{display:flex;gap:10px;align-items:center;margin-top:12px}
.sig input{margin:0}

/* ===== nav: dropdowns, user menu ===== */
.hasmenu{position:relative}
.morebtn,.userbtn{background:none;border:0;color:var(--mut);font:600 13.5px var(--f);cursor:pointer;
 display:flex;align-items:center;gap:7px;padding:6px 2px;white-space:nowrap}
.morebtn:hover,.userbtn:hover,.morebtn.on{color:var(--volt)}
.userbtn{border:1px solid var(--bd);border-radius:99px;padding:5px 13px 5px 5px;color:var(--txt)}
.userbtn:hover{border-color:var(--volt)}
.uav{width:26px;height:26px;border-radius:50%;background:linear-gradient(140deg,var(--card2),var(--navy));
 display:flex;align-items:center;justify-content:center;font:800 10px var(--f);overflow:hidden;flex:0 0 26px}
.uav img{width:100%;height:100%;object-fit:cover}
.uname{font-size:13.5px;font-weight:600}
.dropdown{position:absolute;top:calc(100% + 10px);left:0;min-width:196px;background:var(--navy);
 border:1px solid var(--bd);border-radius:11px;padding:6px;display:none;z-index:60;
 box-shadow:0 18px 44px rgba(0,0,0,.5)}
.dropdown.right{left:auto;right:0}
.dropdown.on{display:block}
.dropdown a,.dropdown button{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:8px;
 color:var(--soft);text-decoration:none;font:600 13.5px var(--f);background:none;border:0;cursor:pointer}
.dropdown a:hover,.dropdown button:hover{background:var(--card2);color:var(--volt)}
.dropdown a[aria-current]{color:var(--volt)}
.dhead{padding:9px 12px 10px;border-bottom:1px solid var(--bd);margin-bottom:5px;font:700 13.5px var(--f)}
.dhead span{display:block;font:600 10.5px var(--m);letter-spacing:.08em;text-transform:uppercase;
 color:var(--mut);margin-top:3px}

/* ===== admin inline editing ===== */
.editbar{position:fixed;left:0;right:0;bottom:0;z-index:300;display:flex;gap:10px;align-items:center;
 padding:11px 18px;background:color-mix(in srgb,var(--ink) 96%,transparent);backdrop-filter:blur(12px);border-top:1px solid var(--bd);
 flex-wrap:wrap}
.editbar.live{border-top-color:var(--volt)}
.ebl{font:800 10px var(--m);letter-spacing:.14em;text-transform:uppercase;color:var(--volt);
 border:1px solid var(--volt);border-radius:99px;padding:4px 10px}
.editbar .tiny{margin-left:auto}
[data-copy].editing{outline:1px dashed var(--volt);outline-offset:4px;border-radius:4px;
 background:rgba(204,255,0,.05);cursor:text}
[data-copy].editing:focus{outline:2px solid var(--volt);background:rgba(204,255,0,.09)}

/* ===== pathway stages & metrics ===== */
.stagehead{display:flex;align-items:center;gap:12px;margin:34px 0 16px}
.stagehead h3{font:800 12px var(--m);letter-spacing:.14em;text-transform:uppercase;color:var(--volt);
 white-space:nowrap;margin:0}
.stagehead::after{content:"";flex:1;height:1px;background:var(--bd)}
.metric{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.metric div{background:var(--ink);border:1px solid var(--bd);border-radius:9px;padding:10px 11px}
.metric b{display:block;font:800 15px var(--m);margin-bottom:2px}
.metric span{font:600 9.5px var(--m);letter-spacing:.07em;text-transform:uppercase;color:var(--mut)}
@media(max-width:620px){.metric{grid-template-columns:repeat(2,1fr)}}

/* ===== responsive ===== */
@media(max-width:1080px){
  .nav .in{gap:16px;padding:11px 18px}
  .nav nav{gap:16px}
  .uname{display:none}
  .userbtn{padding:5px}
}
@media(max-width:900px){
  .nav nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    background:var(--navy);border-bottom:1px solid var(--bd);padding:8px 18px 16px;align-items:stretch}
  .nav nav.on{display:flex}
  .nav nav>a{padding:12px 0;font-size:15.5px;border-bottom:1px solid var(--bd)}
  .nav nav .hasmenu{position:static}
  .morebtn{display:none}
  #moreMenu{position:static;display:block;border:0;padding:0;background:none;box-shadow:none;min-width:0}
  #moreMenu a{padding:12px 0;font-size:15.5px;border-bottom:1px solid var(--bd);border-radius:0}
  #userMenu{position:absolute;background:var(--navy);border:1px solid var(--bd);padding:6px;
    border-radius:11px;display:none;right:0;left:auto}
  #userMenu.on{display:block}
  .burger{display:block;order:9}
  .nav .in{position:relative;flex-wrap:nowrap}
}
@media(max-width:820px){
  .portal{padding:22px 18px 90px}
  .phead h1{font-size:21px}
  .avatar.big{width:56px;height:56px;font-size:19px;border-radius:14px}
  .ptabs button{padding:11px 12px;font-size:13px}
  section{padding:56px 0}
  .hero{padding:70px 20px 76px}
  .book{height:78vw}
  .bkrow,.mrow2,.court{gap:11px;padding:13px 14px}
}
@media(max-width:560px){
  .wrap{padding:0 18px}
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr}
  .row2{grid-template-columns:1fr}
  .price{padding:26px 20px}
  .price .amt{font-size:50px}
  .phead{flex-wrap:wrap}
  .sgrid{grid-template-columns:repeat(2,1fr);gap:9px}
  .face{padding:14px 12px}
  .book{height:96vw}
  .editbar{padding:9px 14px;gap:7px}
  .editbar .tiny{display:none}
  .fgrid{grid-template-columns:1fr 1fr;gap:26px}
  table.avail{min-width:560px}
  .bkrow .when,.mrow2 .rk{flex-basis:64px}
  .stat b,.kpi b{font-size:21px}
}
@media(hover:none){.stamp:hover{transform:rotate(var(--r,0deg))}}

/* section hide/show (admin) */
.sec-hidden{opacity:.34;position:relative}
.sec-hidden::after{content:"Hidden from members";position:absolute;top:12px;right:16px;
 background:#FF6B6B;color:var(--ink);font:800 9.5px var(--m);letter-spacing:.1em;text-transform:uppercase;
 padding:4px 9px;border-radius:5px}
.secctl{display:none}
body.secmode [data-section]{outline:1px dashed var(--bd);outline-offset:-2px;position:relative}
body.secmode .secctl{display:flex;align-items:center;gap:10px;position:absolute;top:8px;left:16px;z-index:5;
 background:var(--ink);border:1px solid var(--volt);border-radius:8px;padding:6px 10px}
body.secmode .secctl span{font:700 10px var(--m);letter-spacing:.08em;text-transform:uppercase;color:var(--volt)}

/* passport polish */

.book.shut{cursor:pointer}
.book.shut:not(.atback) .cover.front::after{content:"Tap to open";position:absolute;bottom:26px;left:0;right:0;
 font:700 10px var(--m);letter-spacing:.18em;text-transform:uppercase;color:var(--volt);opacity:.9;
 animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.45}50%{opacity:1}}

.face.f::before{content:"";position:absolute;left:0;top:0;bottom:0;width:26px;
 background:linear-gradient(90deg,rgba(0,0,0,.42),transparent);pointer-events:none}
.face.b::before{content:"";position:absolute;right:0;top:0;bottom:0;width:26px;
 background:linear-gradient(270deg,rgba(0,0,0,.42),transparent);pointer-events:none}
/* The disc took its background from --ink and its border from --bd, both site
   theme tokens — but the page behind it is always navy, because the passport
   keeps its own palette whatever the site is wearing. Under a light palette
   that produced a cream disc with a lime glyph at roughly 1.4:1, which is why
   the arrows disappeared. Everything here now comes from the passport. */
.turn{position:absolute;bottom:14px;width:34px;height:34px;border-radius:50%;
 background:rgba(9,22,50,.88);
 border:1px solid color-mix(in srgb,var(--paccent) 50%,transparent);
 color:color-mix(in srgb,var(--paccent) 78%,#fff 22%);
 display:flex;align-items:center;justify-content:center;
 font-size:19px;cursor:pointer;z-index:4;transition:transform .15s,border-color .15s,background .15s}
.turn:hover{transform:scale(1.14);border-color:var(--paccent);background:rgba(9,22,50,.98)}
.turn.next{right:14px}.turn.prev{left:14px}
.cover .turn{display:none}
.stamp{box-shadow:0 4px 14px rgba(0,0,0,.35)}

.stamp:active{transform:rotate(0) scale(.95)}

/* member ladder viz */
.vladder{display:flex;flex-direction:column-reverse;gap:0;margin:6px 0 8px}
.vrung{display:flex;align-items:center;gap:14px;padding:13px 16px;border-left:3px solid var(--bd);
 position:relative;margin-left:12px}
.vrung::before{content:"";position:absolute;left:-9px;top:50%;transform:translateY(-50%);
 width:15px;height:15px;border-radius:50%;background:var(--ink);border:2px solid var(--bd)}
.vrung.done::before{background:var(--dot);border-color:var(--dot)}
.vrung.now{border-left-color:var(--volt);background:linear-gradient(90deg,rgba(204,255,0,.09),transparent);
 border-radius:0 12px 12px 0}
.vrung.now::before{background:var(--volt);border-color:var(--volt);width:19px;height:19px;left:-11px;
 box-shadow:0 0 0 5px rgba(204,255,0,.18)}
.vrung .vn{font:800 13px var(--m);width:44px;flex:0 0 44px;color:var(--mut)}
.vrung.done .vn,.vrung.now .vn{color:var(--txt)}
.vrung .vb{flex:1;min-width:0}
.vrung .vb b{font-size:14.5px;display:block}
.vrung .vb span{font-size:12.3px;color:var(--mut)}
.vrung.locked{opacity:.45}
.youare{background:var(--volt);color:var(--ink);font:800 9px var(--m);letter-spacing:.1em;
 text-transform:uppercase;padding:4px 9px;border-radius:99px;white-space:nowrap}

/* photo drop control */
.photodrop{display:flex;align-items:center;gap:13px;background:var(--ink);border:1px dashed var(--bd);
 border-radius:11px;padding:12px 14px;cursor:pointer;margin-bottom:16px;transition:border-color .15s}
.photodrop:hover{border-color:var(--volt)}
.photodrop .pi{width:48px;height:48px;border-radius:12px;flex:0 0 48px;overflow:hidden;
 background:linear-gradient(140deg,var(--card2),var(--navy));display:flex;align-items:center;justify-content:center;
 font:800 15px var(--f)}
.photodrop .pi img{width:100%;height:100%;object-fit:cover}
.photodrop .pt{flex:1;display:flex;flex-direction:column;gap:2px}
.photodrop .pt b{font-size:13.5px;font-weight:600;text-transform:none;letter-spacing:0}
.photodrop .pt span{font-size:12px;color:var(--mut)}
.photodrop .cam{font-size:19px;opacity:.7}
.avatar img,.uav img,.coach .ph img{width:100%;height:100%;object-fit:cover}
.avatar{overflow:hidden}.coach .ph{overflow:hidden}

/* passport colour */
.book{--pcover:#123a80;--paccent:#CCFF00}
.cover{background:linear-gradient(150deg,var(--pcover),#0B1F44 62%)!important}
.cover .seal{border-color:var(--paccent);color:var(--paccent)}
.book.shut .cover::after{color:var(--paccent)}
.stamp{border-color:var(--paccent)}
.stamp .t1{color:var(--paccent)}
/* Lightened toward white so a dark member-chosen accent still reads on the
   navy disc. Must stay in step with the .turn rule above, which this follows. */
.turn{color:color-mix(in srgb,var(--paccent) 78%,#fff 22%)}
.pcolors{display:flex;gap:9px;justify-content:center;margin-bottom:4px;flex-wrap:wrap}
.pcol{width:30px;height:30px;border-radius:9px;border:0;cursor:pointer;opacity:.55;
 transition:opacity .15s,transform .15s}
.pcol:hover{opacity:1;transform:scale(1.1)}
.pcol.on{opacity:1;outline:2px solid var(--txt);outline-offset:3px}

.book.atback .cover.back::after{content:"Tap to go back";position:absolute;bottom:26px;left:0;right:0;
 font:700 10px var(--m);letter-spacing:.18em;text-transform:uppercase;color:var(--paccent);
 animation:pulse 2.2s ease-in-out infinite}
.book.atback .leaf .face.f .turn{display:none}
.cover .turn{display:none}
.book.shut .turn{display:none}

/* ===== coach: sheet, mini bars, session log ===== */
.sheet{position:fixed;inset:0;z-index:250;background:color-mix(in srgb,var(--ink) 86%,transparent);
 backdrop-filter:blur(6px);display:flex;align-items:flex-start;justify-content:center;padding:28px 20px}
.sheet[hidden]{display:none}
.sheetbox{background:var(--card);border:1px solid var(--bd);border-radius:16px;width:100%;
 max-width:720px;max-height:calc(100vh - 56px);display:flex;flex-direction:column;overflow:hidden}
.sheethead{display:flex;align-items:center;gap:13px;padding:16px 18px;border-bottom:1px solid var(--bd);
 background:var(--card);flex:0 0 auto}
.shmeta{display:flex;flex-direction:column;gap:2px;min-width:0}
.shmeta b{font-size:16.5px}
.shmeta span{font-size:12.5px;color:var(--mut)}
.sheetx{width:36px;height:36px;border-radius:10px;border:1px solid var(--bd);background:var(--ink);
 color:var(--mut);font-size:22px;line-height:1;cursor:pointer;flex:0 0 36px}
.sheetx:hover{border-color:var(--volt);color:var(--volt)}
.sheettabs{display:flex;gap:2px;padding:0 12px;border-bottom:1px solid var(--bd);overflow-x:auto;flex:0 0 auto}
.sheettabs button{background:none;border:0;border-bottom:2px solid transparent;color:var(--mut);
 padding:11px 13px;font:700 13px var(--f);cursor:pointer;white-space:nowrap}
.sheettabs button:hover{color:var(--txt)}
.sheettabs button.on{color:var(--volt);border-bottom-color:var(--volt)}
.sheetbody{padding:20px 20px 28px;overflow-y:auto;flex:1}
@media(max-width:620px){.sheet{padding:0}.sheetbox{max-height:100vh;border-radius:0;border:0}}

.minibars{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.mb{display:flex;align-items:center;gap:6px;flex:1;min-width:104px}
.mbl{font:700 9.5px var(--m);letter-spacing:.06em;text-transform:uppercase;color:var(--mut);width:20px}
.mbt{flex:1;height:6px;background:var(--ink);border-radius:99px;overflow:hidden}
.mbt i{display:block;height:100%;border-radius:99px}
.mbv{font:700 10.5px var(--m);color:var(--soft);width:20px;text-align:right}

.skillrow{display:flex;align-items:center;gap:10px;margin-bottom:11px;flex-wrap:wrap}
.skillrow .sl{width:82px;flex:0 0 82px;font-size:13.5px;font-weight:600}
.skillrow .sv{font:700 12px var(--m);color:var(--mut);width:38px;text-align:right}
.skillrow .sv.ok{color:var(--good)}
.skillrow .sin{width:66px;margin:0;padding:7px 8px;text-align:center;font-family:var(--m)}
.skillrow .st{font:600 11.5px var(--m);color:var(--mut);width:52px}
@media(max-width:560px){.skillrow .sl{flex:1 1 100%}.skillrow .track{order:5;flex:1 1 100%}}

.hrow{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--bd);font-size:13.3px}
.hrow:last-child{border-bottom:0}
.hrow .hd{flex:0 0 96px;font:600 12px var(--m);color:var(--mut)}
.hrow .hb{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hrow .hb span{font-size:12px;color:var(--mut)}
.hrow .hr{flex:0 0 34%;text-align:right;color:var(--soft)}
@media(max-width:560px){.hrow{flex-wrap:wrap}.hrow .hr{flex:1 1 100%;text-align:left}}

.vrow{display:flex;gap:13px;align-items:center;background:var(--ink);border:1px solid var(--bd);
 border-radius:11px;padding:13px 15px;margin-bottom:9px}
.vrow .vi{font-size:21px}
.vrow .vb{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.vrow .vb b{font-size:13.8px;word-break:break-all}
.vrow .vb span{font-size:12px;color:var(--mut)}

/* hover submenu */
.navgrp{position:relative;display:inline-flex}
.submenu{position:absolute;top:100%;left:-14px;padding-top:14px;min-width:178px;display:none;z-index:70}
.navgrp:hover .submenu,.navgrp:focus-within .submenu{display:block}
.submenu::before{content:"";display:block;background:var(--navy);border:1px solid var(--bd);
 border-radius:11px;position:absolute;inset:14px 0 0 0;box-shadow:0 18px 44px rgba(0,0,0,.5)}
.submenu a{position:relative;display:block;padding:10px 14px;font-size:13.5px;font-weight:600;
 color:var(--soft);text-decoration:none;border-radius:8px;margin:0 6px}
.submenu a:first-of-type{margin-top:6px}.submenu a:last-of-type{margin-bottom:6px}
.submenu a:hover{background:var(--card2);color:var(--volt)}

/* equal-height cards everywhere */
.grid{align-items:stretch}
.grid>.card,.grid>.coach,.grid>.perk,.grid>.prod,.grid>.stat,.grid>.kpi,.grid>.levelcard,
.grid>.editrow,.grid>.daycol,.grid>div{display:flex;flex-direction:column}
.grid>.card>p:last-child,.grid>.perk .n{flex:1}
.card h3,.perk .b,.levelcard h3{min-height:0}
.stat,.kpi{justify-content:center}

/* passport: one colour, whole book */
.book{--pcover:#123a80;--paccent:#CCFF00;--pink:#0a1730}
.leaf{background:var(--pink)}
.face{background:linear-gradient(160deg,
  color-mix(in srgb,var(--pcover) 82%,#000 18%),
  color-mix(in srgb,var(--pcover) 57%,#000 43%))!important}
.face.b{background:linear-gradient(200deg,
  color-mix(in srgb,var(--pcover) 75%,#000 25%),
  color-mix(in srgb,var(--pcover) 50%,#000 50%))!important}
.cover{background:linear-gradient(150deg,
  color-mix(in srgb,var(--pcover) 94%,#fff 6%),
  color-mix(in srgb,var(--pcover) 74%,#000 26%))!important}
.stamp{background:color-mix(in srgb,var(--pcover) 64%,#000 36%)}
.face h4{color:color-mix(in srgb,var(--paccent) 70%,#fff)}
.pgnum{color:color-mix(in srgb,var(--paccent) 62%,#fff)}
.cover .sm{color:color-mix(in srgb,var(--paccent) 55%,#fff)}
.cover h3{color:#fff}
.stamp .t2{color:#fff}
.stamp .t3{color:color-mix(in srgb,var(--paccent) 55%,#fff)}
.pimg img{width:100%;height:100%;object-fit:cover}
.photodrop .pi img{width:100%;height:100%;object-fit:cover}

/* price: small currency mark, big number */
.price .amt{display:flex;align-items:baseline;justify-content:center;gap:0;flex-wrap:wrap;line-height:1}
.price .amt>span[data-t]{font-size:1em;font-weight:800;letter-spacing:-.02em}
.price .amt i{font-style:normal;font-size:.42em;font-weight:700;transform:translateY(-.45em);
 display:inline-block;margin-right:1px}
.price .amt .per{font-size:19px;color:var(--mut);font-weight:600;letter-spacing:0;margin-left:5px}
.price .was{display:inline-flex;align-items:baseline;font-size:20px;margin-right:10px}
.price .was i{font-size:.55em}

/* Ace 9 Black readable on dark */
.band[title*="Black"]{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.42)}
.levelcard .bd2[style*="#2C3242"],.vrung[style*="#2C3242"]::before{
  box-shadow:0 0 0 1.5px rgba(255,255,255,.5)}
.rung[style*="#2C3242"]{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4);color:#fff!important}

/* global spacer + true equal-height grids */
.sp{flex:1}
.grid>*{min-width:0}
.grid.g2>*,.grid.g3>*,.grid.g4>*{height:100%}
/* Equal height belongs to direct grid children only. Applying it to every
   card stretched stacked ones inside a column wrapper, which is what left the
   dead space under "Your kit". */
.grid>.card,.grid>.perk,.grid>.coach,.grid>.levelcard,.grid>.editrow{height:100%}
/* A column of cards inside one grid cell stacks from the top and keeps its
   own gaps, rather than each card growing to fill the row. */
.grid>div>.card,.grid>div>.editrow{height:auto}
.grid>div{display:flex;flex-direction:column;gap:14px}
.grid>div>.card,.grid>div>.editrow{margin-top:0;margin-bottom:0}
.card>*:last-child,.perk>*:last-child{margin-bottom:0}
.codebox.locked{color:var(--mut);border-style:solid;justify-content:center}
.sheethead .sp{flex:1}

/* smoother page turn */
.leaf{transition:transform 1.05s cubic-bezier(.35,.02,.18,1)}
.leaf .face{transition:box-shadow .8s ease}
.leaf.flip .face.f{box-shadow:inset 40px 0 60px -40px rgba(0,0,0,.75)}

/* coaches book */
.binder{max-width:820px;margin:0 auto;background:linear-gradient(180deg,var(--card),var(--navy));
 border:1px solid var(--bd);border-radius:6px 16px 16px 6px;position:relative;overflow:hidden}
.binder::before{content:"";position:absolute;left:0;top:0;bottom:0;width:40px;
 background:linear-gradient(90deg,color-mix(in srgb,var(--volt) 22%,var(--ink)),transparent);
 border-right:1px solid var(--bd)}
.binder::after{content:"";position:absolute;left:15px;top:34px;bottom:34px;width:9px;
 background-image:radial-gradient(circle,var(--ink) 42%,transparent 44%);
 background-size:9px 62px;background-repeat:repeat-y;opacity:.85}
.binder .bpage{padding:34px 34px 34px 68px}
.binder h2{font-size:20px;font-weight:800;text-transform:uppercase;margin:0 0 4px}
.binder .kicker{font:800 10.5px var(--m);letter-spacing:.16em;text-transform:uppercase;
 color:var(--volt);margin-bottom:6px}
.binder .lead{color:var(--soft);font-size:14.5px;margin:0 0 22px}
.bsec{border-top:1px solid var(--bd);padding:20px 0}
.bsec:last-child{padding-bottom:0}
.bsec h3{font-size:15.5px;font-weight:700;margin-bottom:10px;display:flex;gap:10px;align-items:center}
.bsec h3 .n{font:800 11px var(--m);color:var(--volt);border:1px solid var(--volt);
 border-radius:6px;padding:3px 7px;flex:0 0 auto}
.bsec ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.bsec li{font-size:14px;color:var(--soft)}
.bsec li b{color:var(--txt)}
.bsec p{font-size:14px;color:var(--soft);margin:0 0 10px}
.btoc{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.btoc a{font:700 11.5px var(--m);padding:6px 11px;border:1px solid var(--bd);border-radius:99px;
 color:var(--mut);text-decoration:none}
.btoc a:hover{border-color:var(--volt);color:var(--volt)}
@media print{
 .nav,footer,.ptabs,.phead,.editbar,.btoc,#bookDl{display:none!important}
 body{background:#fff;color:#111}
 .binder{border:0;background:#fff}.binder::before,.binder::after{display:none}
 .binder .bpage{padding:0}.bsec li,.bsec p,.binder .lead{color:#333}
 .bsec h3 .n{color:#111;border-color:#111}.binder .kicker{color:#111}
}

/* passport: no glow, smoother open/close */
.book{filter:none}
.leaf{box-shadow:none;transition:transform 1.45s cubic-bezier(.34,.03,.14,1)}
.face{box-shadow:0 12px 34px rgba(0,0,0,.4)}
.stamp{box-shadow:none}
.stamp:hover{box-shadow:none;background:color-mix(in srgb,var(--pcover) 82%,#000 18%)}
.book,.book *{backface-visibility:hidden}
.book.shut .leaf:not(.flip) .face.f{box-shadow:0 18px 44px rgba(0,0,0,.5)}

/* perks: marketable code cards */
.perk{border-radius:16px;padding:22px;gap:11px;position:relative;overflow:hidden}
.perk::after{content:"";position:absolute;inset:0 0 auto 0;height:3px;
 background:linear-gradient(90deg,var(--volt),transparent)}
.perk .b{font-size:18px;letter-spacing:-.01em}
.perk .o{font-size:15px}
.codebox{border-style:solid;border-color:color-mix(in srgb,var(--volt) 40%,var(--bd));
 background:color-mix(in srgb,var(--volt) 7%,var(--ink));border-radius:10px;padding:11px 13px;
 font-size:14px;color:var(--volt)}
.codebox button{background:var(--volt);color:var(--ink);border-radius:6px;padding:5px 10px;
 font:800 10.5px var(--m);letter-spacing:.06em;text-transform:uppercase}

/* ===== coaches book: spiral-bound notebook ===== */
.cbWrap{display:flex;flex-direction:column;align-items:center;gap:16px}
.cbook{position:relative;width:min(1020px,96vw);height:min(700px,74vw);perspective:2800px}
.cleaf{position:absolute;top:0;left:50%;width:50%;height:100%;transform-origin:left center;
 transform-style:preserve-3d;transition:transform 1.05s cubic-bezier(.28,.02,.14,1)}
.cleaf.flip{transform:rotateY(-180deg)}
.cface{position:absolute;inset:0;backface-visibility:hidden;overflow-y:auto;padding:30px 30px 40px;
 background:linear-gradient(165deg,color-mix(in srgb,var(--volt) 5%,var(--card)),var(--navy));
 border:1px solid var(--bd)}
.cface.f{border-radius:0 12px 12px 0;box-shadow:inset 16px 0 30px -22px #000}
.cface.b{transform:rotateY(180deg);border-radius:12px 0 0 12px;box-shadow:inset -16px 0 30px -22px #000}
.cface h3{font-size:17px;font-weight:800;margin:0 0 4px;display:flex;gap:9px;align-items:center}
.cface h3 .n{font:800 10.5px var(--m);color:var(--volt);border:1px solid var(--volt);
 border-radius:5px;padding:3px 6px}
.cface ul{margin:14px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:10px}
.cface li{font-size:13.4px;color:var(--soft);line-height:1.55}
.cface li b{color:var(--txt)}
.cface .pg{position:absolute;bottom:12px;left:0;right:0;text-align:center;
 font:600 10px var(--m);letter-spacing:.1em;color:var(--mut)}
.cbcover{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
 gap:14px;background:linear-gradient(150deg,color-mix(in srgb,var(--volt) 16%,var(--card)),var(--navy))!important}
.cbcover h2{font-size:26px;font-weight:800;text-transform:uppercase;line-height:1.05}
.cbcover .k{font:800 10px var(--m);letter-spacing:.2em;text-transform:uppercase;color:var(--volt)}

/* Ruled paper. The lines sit under the text and stop short of the page edges. */
.cface:not(.cbcover)::before{content:"";position:absolute;inset:76px 26px 36px;pointer-events:none;
 background-image:repeating-linear-gradient(color-mix(in srgb,var(--bd) 60%,transparent) 0 1px,
   transparent 1px 30px);opacity:.55}
.cface>*{position:relative;z-index:1}
/* Margin rule, mirrored so the two open pages read as one sheet turned over. */
.cface.f::after{content:"";position:absolute;left:30px;top:0;bottom:0;width:1px;
 background:color-mix(in srgb,#FF6B6B 30%,transparent);pointer-events:none}
.cface.b::after{content:"";position:absolute;right:30px;top:0;bottom:0;width:1px;
 background:color-mix(in srgb,#FF6B6B 30%,transparent);pointer-events:none}
.cface.f{padding-left:50px}
.cface.b{padding-right:50px}
/* A cover face is card, not paper — no rules, no margin line behind it. */
.cface:has(.cbcover)::before,.cface:has(.cbcover)::after{display:none}
.cface:has(.cbcover){padding:0}
.cbcover{height:100%;padding:30px}

/* The coil: a punched hole down the spine with a metal ring through each one. */
.cbring{position:absolute;left:50%;top:0;bottom:0;width:36px;margin-left:-18px;z-index:8;
 pointer-events:none}
.cbring::before{content:"";position:absolute;inset:16px 0;
 background-image:radial-gradient(ellipse 7px 9px at 50% 50%,
   color-mix(in srgb,var(--ink) 94%,#000) 0 60%,transparent 62%);
 background-size:100% 44px;background-repeat:repeat-y}
.cbring::after{content:"";position:absolute;inset:16px 0;
 background-image:linear-gradient(104deg,transparent 0 20%,
   color-mix(in srgb,#b9c6e0 55%,transparent) 23%,#f2f6fc 39%,
   color-mix(in srgb,#71809a 85%,transparent) 54%,transparent 62%);
 background-size:100% 44px;background-repeat:repeat-y;
 -webkit-mask-image:radial-gradient(ellipse 14px 10px at 50% 50%,#000 0 62%,transparent 64%);
 mask-image:radial-gradient(ellipse 14px 10px at 50% 50%,#000 0 62%,transparent 64%);
 -webkit-mask-size:100% 44px;mask-size:100% 44px;
 -webkit-mask-repeat:repeat-y;mask-repeat:repeat-y;
 filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
/* Board backing, so the notebook has something to sit on. */
.cbook::after{content:"";position:absolute;inset:-8px -10px -11px;border-radius:15px;z-index:0;
 background:linear-gradient(160deg,color-mix(in srgb,var(--card2) 80%,#000 20%),var(--ink));
 border:1px solid var(--bd)}
.cbctl{display:flex;gap:11px;align-items:center}
.cbctl button{background:var(--card);border:1px solid var(--bd);color:var(--txt);width:40px;height:40px;
 border-radius:11px;font-size:17px;cursor:pointer}
.cbctl button:hover:not(:disabled){border-color:var(--volt);color:var(--volt)}
.cbctl button:disabled{opacity:.3;cursor:default}
.cbctl .lbl{color:var(--mut);font:600 12.5px var(--m);min-width:120px;text-align:center}
@media(max-width:700px){.cbook{width:min(560px,92vw);height:126vw}
 .cleaf{left:0;width:100%}.cleaf.flip{transform:rotateY(-180deg)}
 .cface{padding:24px 20px 38px 44px}.cface.b{padding:24px 20px 38px 44px}
 /* one page at a time, so the coil belongs on the left edge */
 .cbring{left:0;margin-left:-16px;width:32px}
 .cface.b::after{right:auto;left:26px}
 .cface:not(.cbcover)::before{inset:70px 18px 34px}}
@media print{.cbook{height:auto;perspective:none}.cleaf{position:static;width:100%;transform:none!important}
 .cface{position:static;border:0;background:#fff;color:#111;page-break-after:always}
 .cface.b{transform:none}.cbring,.cbctl{display:none}}

.pidchip{font:700 10px var(--m);letter-spacing:.06em;padding:3px 8px;border-radius:5px;
 background:var(--card2);color:var(--mut);border:1px solid var(--bd)}

/* pathway gate rows */
.gaterow{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--bd)}
.gaterow:last-of-type{border-bottom:0}
.gaterow .gl{flex:1;font-size:14.5px}
.gaterow .gt{font:800 14px var(--m);color:var(--volt);white-space:nowrap}

/* ================= NEW JOINER — one question, full bleed ================= */
.jq{position:fixed;inset:0;z-index:200;background:var(--ink);display:flex;flex-direction:column;
  overflow-y:auto;overscroll-behavior:contain}
.jq-rail{position:sticky;top:0;height:3px;background:var(--bd);flex:0 0 3px;z-index:2}
.jq-rail i{display:block;height:100%;background:var(--volt);width:0;
  transition:width .38s cubic-bezier(.4,0,.2,1)}
.jq-top{display:flex;align-items:center;gap:14px;padding:18px 24px;flex:0 0 auto}
.jq-top .mark{display:flex;align-items:center;gap:9px;text-decoration:none;opacity:.9}
.jq-top .sp{flex:1}
.jq-count{font:700 11px var(--m);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.jq-exit{background:none;border:0;color:var(--mut);font:600 13px var(--f);cursor:pointer;padding:6px}
.jq-exit:hover{color:var(--txt)}

.jq-stage{flex:1;display:flex;align-items:center;justify-content:center;padding:24px 24px 120px}
.jq-in{width:100%;max-width:760px;text-align:center;will-change:opacity,transform}
.jq-in.out{animation:jqOut .12s ease-in both}
.jq-in.in{animation:jqIn .23s cubic-bezier(.16,.84,.44,1) both}
@keyframes jqOut{to{opacity:0;transform:translateX(-18px)}}
@keyframes jqIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}

.jq-eyebrow{font:700 11px var(--m);letter-spacing:.18em;text-transform:uppercase;color:var(--volt);
  display:block;margin-bottom:16px}
.jq-q{font-size:clamp(27px,4.4vw,50px);font-weight:800;letter-spacing:-.025em;line-height:1.06;
  max-width:19ch;margin:0 auto;text-wrap:balance}
.jq-sub{color:var(--soft);font-size:15.5px;margin:16px auto 0;max-width:46ch;line-height:1.55}

/* Flex, not grid: a short last row centres instead of leaving a hole. */
.jq-opts{display:flex;flex-wrap:wrap;justify-content:center;gap:13px;margin-top:44px}
.jq-opts>.jq-opt{flex:0 1 calc(33.333% - 8.7px);min-width:210px}
.jq-opts.c2>.jq-opt{flex:0 1 calc(50% - 6.5px)}
.jq-opts.c1{max-width:520px;margin-left:auto;margin-right:auto}
.jq-opts.c1>.jq-opt{flex:1 1 100%}
.jq-opt{position:relative;background:var(--card);border:1.5px solid var(--bd);border-radius:16px;
  min-height:96px;padding:22px 44px 22px 24px;display:flex;align-items:center;text-align:left;
  color:var(--txt);font:700 17px/1.3 var(--f);cursor:pointer;
  transition:border-color .14s ease,background .14s ease,transform .14s ease}
.jq-opt:hover{border-color:var(--mut);transform:translateY(-2px)}
.jq-opt:focus-visible{outline:2px solid var(--volt);outline-offset:3px}
.jq-opt.on{border-color:var(--volt);background:color-mix(in srgb,var(--volt) 9%,var(--card))}
.jq-opt .k{position:absolute;top:12px;right:14px;font:700 10.5px var(--m);color:var(--mut);
  letter-spacing:.08em}
.jq-opt.on .k{color:var(--volt)}
.jq-opt .tick{position:absolute;right:16px;top:50%;transform:translateY(-50%) scale(.4);
  width:22px;height:22px;border-radius:50%;background:var(--volt);color:var(--navy);
  display:grid;place-items:center;font-size:13px;font-weight:900;opacity:0;
  transition:opacity .16s ease,transform .16s ease}
.jq-opt.on .tick{opacity:1;transform:translateY(-50%) scale(1)}
.jq-opt .sub{display:block;font-weight:500;font-size:13.3px;color:var(--mut);margin-top:5px}

.jq-field{margin-top:40px;text-align:left;max-width:520px;margin-left:auto;margin-right:auto}
.jq-field textarea,.jq-field input{width:100%;background:var(--card);border:1.5px solid var(--bd);
  border-radius:14px;color:var(--txt);font:400 16px/1.6 var(--f);padding:16px 18px;resize:vertical}
.jq-field textarea:focus,.jq-field input:focus{outline:0;border-color:var(--volt)}

.jq-foot{position:fixed;left:0;right:0;bottom:0;display:flex;align-items:center;gap:14px;
  padding:16px 24px;background:linear-gradient(transparent,var(--ink) 34%);z-index:3}
.jq-foot .sp{flex:1}
.jq-back{background:none;border:0;color:var(--mut);font:600 13.5px var(--f);cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;padding:10px 4px}
.jq-back:hover{color:var(--txt)}
.jq-hint{font:600 11px var(--m);letter-spacing:.1em;text-transform:uppercase;color:var(--bd)}
@media(max-width:640px){.jq-hint{display:none}.jq-stage{padding-bottom:110px}}
@media(prefers-reduced-motion:reduce){
  .jq-in,.jq-in.in,.jq-in.out{animation:none;transform:none;opacity:1}
  .jq-opt:hover{transform:none}.jq-rail i{transition:none}}

/* joiner: coach match cards */
.jq-coach{display:grid;gap:12px;margin-top:36px;text-align:left}
.jq-coach .c{background:var(--card);border:1.5px solid var(--bd);border-radius:16px;padding:18px 20px;
  display:flex;gap:15px;align-items:center;cursor:pointer;transition:border-color .14s,transform .14s}
.jq-coach .c:hover{border-color:var(--mut);transform:translateY(-2px)}
.jq-coach .c.best{border-color:var(--volt)}
.jq-coach .c .av{width:52px;height:52px;border-radius:13px;background:var(--card2);
  display:grid;place-items:center;font:800 16px var(--f);color:var(--volt);flex:0 0 52px;overflow:hidden}
.jq-coach .c .av img{width:100%;height:100%;object-fit:cover}
.jq-coach .c h4{font-size:16.5px;margin:0 0 3px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.jq-coach .c .meta{font-size:12.8px;color:var(--mut)}
.jq-coach .c .why{font-size:13px;color:var(--soft);margin:7px 0 0}

/* ================= BOOKING — multi-select ================= */
.slotbtn.sel{background:var(--volt);border-color:var(--volt);color:var(--navy);font-weight:800}
.bookbar{position:sticky;bottom:14px;z-index:20;margin-top:22px;background:var(--card);
  border:1.5px solid var(--volt);border-radius:16px;padding:14px 18px;display:flex;
  align-items:center;gap:16px;flex-wrap:wrap;
  box-shadow:0 12px 34px rgba(0,0,0,.42)}
.bookbar .n{font:800 15px var(--f)}
.bookbar .n span{color:var(--mut);font-weight:500;font-size:13.4px;display:block;margin-top:2px}
.bookbar .sp{flex:1}
.lockbox{background:var(--card);border:1.5px solid var(--warn);border-radius:16px;padding:22px 24px;
  display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.lockbox .ic{font-size:22px;line-height:1}
.lockbox h3{font-size:16.5px;margin:0 0 6px}
.lockbox p{margin:0;color:var(--soft);font-size:14px;max-width:56ch}

/* bulk-cancel rows */
.bkrow .pick{width:auto;margin-right:2px;accent-color:var(--volt);cursor:pointer}
.bulkbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 14px;
  background:var(--card);border:1px solid var(--bd);border-radius:13px;padding:11px 15px}
.bulkbar .sp{flex:1}
.bulkbar b{font-size:14px}

/* ================= PATHWAY — labelled rung strip ================= */
.rungs{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:34px 0 10px}
.rung{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:64px;
  text-decoration:none;color:inherit}
.rung i{display:block;width:100%;height:7px;border-radius:99px}
.rung b{font:800 12.5px var(--f);letter-spacing:-.01em}
.rung span{font:600 10px var(--m);letter-spacing:.09em;text-transform:uppercase;color:var(--mut)}
@media(max-width:700px){.rung{min-width:52px}.rung b{font-size:11.5px}.rung span{font-size:9px}}

/* recording explainer */
.linkbtn{background:none;border:0;color:var(--volt);font:600 13px var(--f);cursor:pointer;
  padding:10px 0 0;text-decoration:underline;text-underline-offset:3px}
.linkbtn:hover{opacity:.82}
.modal.on{display:flex}
.mbox{position:relative;max-height:86vh;overflow-y:auto}
.mbox .mx{position:absolute;top:12px;right:14px;background:none;border:0;color:var(--mut);
  font-size:26px;line-height:1;cursor:pointer;padding:2px 6px}
.mbox .mx:hover{color:var(--volt)}
/* Scoped: a global padding-right here knocked the centred passport-stamp
   heading off its axis. Only the explainer modals reserve room for the ×. */
#recModal .mbox>h3,#briefModal .mbox>h3{font-size:19px;margin:0 0 4px;padding-right:34px}
.msec{margin-top:18px}
.msec h4{font:700 11.5px var(--m);letter-spacing:.13em;text-transform:uppercase;color:var(--volt);
  margin:0 0 6px}
.msec p{margin:0;color:var(--soft);font-size:14px;line-height:1.62}
.mfoot{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px;padding-top:18px;
  border-top:1px solid var(--bd)}
#recModal .mbox{max-width:560px}

/* ================= PASSPORT STAMP DETAIL =================
   Fixed 96px circle, so the three lines have to shrink to fit rather than
   spill. Long court names wrap instead of overflowing the dashes. */
.mbox .bigstamp{padding:8px;gap:1px}
.bigstamp .s1{font:700 8px/1 var(--m);letter-spacing:.06em;text-transform:uppercase;
  color:var(--paccent,var(--volt))}
.bigstamp .s2{font:800 11.5px/1.15 var(--f);margin:5px 3px;color:#fff;
  overflow-wrap:anywhere;max-width:100%}
.bigstamp .s3{font:600 8px/1 var(--m);color:var(--mut)}
.bigstamp.ev{border-color:#6FA8FF}.bigstamp.ev .s1{color:#6FA8FF}
.bigstamp.as{border-color:#3ED598}.bigstamp.as .s1{color:#3ED598}
.bigstamp.mt{border-color:#FFB84D}.bigstamp.mt .s1{color:#FFB84D}
.stamph{text-align:center;font-size:17.5px;margin:0 0 4px;text-wrap:balance}
.stampd{text-align:center;margin:0 0 18px}

/* ================= SEARCH ================= */
.navsearch{background:none;border:1px solid var(--bd);border-radius:99px;color:var(--mut);
  width:32px;height:32px;display:grid;place-items:center;cursor:pointer;flex:0 0 auto}
.navsearch:hover{border-color:var(--volt);color:var(--volt)}
.srch{position:fixed;inset:0;z-index:210;background:color-mix(in srgb,var(--ink) 82%,transparent);
  backdrop-filter:blur(7px);display:flex;align-items:flex-start;justify-content:center;
  padding:10vh 20px 20px}
.srch[hidden]{display:none}
.srchbox{width:100%;max-width:620px;background:var(--card);border:1px solid var(--bd);
  border-radius:16px;overflow:hidden;box-shadow:0 26px 70px rgba(0,0,0,.55)}
.srchtop{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--bd);
  color:var(--mut)}
.srchtop input{flex:1;margin:0;background:none;border:0;padding:0;font-size:16.5px;color:var(--txt)}
.srchtop input:focus{outline:none}
.srchx{background:var(--ink);border:1px solid var(--bd);color:var(--mut);border-radius:6px;
  padding:4px 8px;font:700 10px var(--m);cursor:pointer;flex:0 0 auto}
.srchres{max-height:58vh;overflow-y:auto;padding:8px}
.srchhint{padding:22px 14px;color:var(--mut);font-size:13.4px;line-height:1.6}
.srchhint b{color:var(--volt);font-family:var(--m);border:1px solid var(--bd);
  border-radius:5px;padding:1px 6px}
.srchrow{display:flex;gap:13px;align-items:center;padding:11px 13px;border-radius:10px;
  text-decoration:none;color:inherit}
.srchrow:hover,.srchrow:focus{background:var(--card2)}
.srchrow .k{font:700 9px var(--m);letter-spacing:.09em;text-transform:uppercase;color:var(--mut);
  background:var(--ink);border:1px solid var(--bd);border-radius:99px;padding:3px 8px;
  flex:0 0 auto;min-width:74px;text-align:center}
.srchrow .b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.srchrow .b b{font-size:14.2px;font-weight:600}
.srchrow .b span{font-size:12.3px;color:var(--mut)}
.srchrow .go{color:var(--volt);flex:0 0 auto}

/* ================= ASSISTANT ================= */
.asbtn{position:fixed;right:18px;bottom:18px;z-index:150;background:var(--volt);color:var(--navy);
  border:0;border-radius:99px;padding:12px 20px 12px 16px;font:800 12.5px var(--f);
  letter-spacing:.03em;cursor:pointer;display:flex;align-items:center;gap:9px;
  box-shadow:0 10px 30px rgba(0,0,0,.45)}
.asbtn .d{width:8px;height:8px;border-radius:50%;background:var(--navy);opacity:.75}
.asbtn:hover{filter:brightness(1.08)}
.aspanel{position:fixed;right:18px;bottom:74px;z-index:151;width:min(370px,calc(100vw - 36px));
  background:var(--card);border:1px solid var(--bd);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 22px 60px rgba(0,0,0,.55)}
.aspanel[hidden]{display:none}
.ashead{display:flex;align-items:center;gap:10px;padding:13px 15px;border-bottom:1px solid var(--bd)}
.ashead b{font-size:14.5px}
.asx{background:none;border:0;color:var(--mut);font-size:22px;line-height:1;cursor:pointer}
.asx:hover{color:var(--volt)}
.aslog{padding:14px;display:flex;flex-direction:column;gap:10px;max-height:46vh;overflow-y:auto}
.asmsg{font-size:13.7px;line-height:1.6;border-radius:13px;padding:10px 13px;max-width:92%}
.asmsg.bot{background:var(--card2);color:var(--soft);align-self:flex-start;border-top-left-radius:4px}
.asmsg.me{background:var(--volt);color:var(--navy);align-self:flex-end;font-weight:600;
  border-bottom-right-radius:4px}
.asmsg a{color:var(--volt);font-weight:600}
.assug{display:flex;gap:6px;flex-wrap:wrap;padding:0 14px 10px}
.assug button{background:var(--ink);border:1px solid var(--bd);color:var(--mut);border-radius:99px;
  padding:6px 11px;font:600 11.5px var(--f);cursor:pointer;text-align:left}
.assug button:hover{border-color:var(--volt);color:var(--volt)}
.asform{display:flex;gap:8px;padding:0 14px 10px}
.asform input{margin:0;flex:1;padding:10px 12px;font-size:14px}
.asnote{margin:0;padding:0 15px 13px;font-size:11px;color:var(--mut);line-height:1.5}
body:has(#jqRoot) .asbtn,body:has(#jqRoot) .aspanel,
body:has(.grad:not([hidden])) .asbtn{display:none}

/* ================= LESSON PACKAGES ================= */
.packbar{background:color-mix(in srgb,var(--volt) 8%,var(--card));border:1px solid var(--volt);
  border-radius:13px;padding:13px 16px;margin-bottom:14px}
.packbar b{display:block;font-size:14.5px;margin-bottom:3px}
.packbar span{font-size:12.8px;color:var(--soft)}
.packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;
  margin-bottom:20px}
.pack{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:16px 18px;
  display:flex;flex-direction:column;gap:5px}
.pack b{font-size:15px}
.pack .n{font-size:12.5px;color:var(--mut)}
.pack .p{font:800 22px var(--f);margin-top:4px}
.pack .p i{display:block;font:600 12px var(--m);color:var(--mut);font-style:normal;margin-top:2px}
.pack .save{font:700 11px var(--m);color:var(--good);margin:4px 0 8px}
.pack .save.flat{color:var(--mut)}
.pack .btn{margin-top:auto}
.packrow{border:1px solid var(--bd);border-radius:11px;padding:14px;margin-bottom:10px;
  background:var(--ink)}
.packrow .sp{flex:1}

/* ================= PRE-LESSON BRIEF ================= */
#briefModal .mbox{max-width:560px;padding:0;overflow:hidden}
#briefModal .mx{z-index:3;color:#fff}
.briefbox .mfoot{margin:0;padding:16px 22px 20px}
.brief{font-size:14px}
.brief .bh{background:linear-gradient(150deg,color-mix(in srgb,var(--volt) 16%,var(--card2)),
  var(--navy));padding:24px 22px 20px}
.brief .bh .k{font:800 9.5px var(--m);letter-spacing:.18em;text-transform:uppercase;color:var(--volt)}
.brief .bh h2{font-size:24px;font-weight:800;margin:8px 0 5px}
.brief .bh p{margin:0;font-size:13.4px;color:var(--soft)}
.bgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--bd)}
.bgrid div{background:var(--card);padding:13px 10px;text-align:center}
.bgrid b{display:block;font:800 15px var(--m);margin-bottom:3px}
.bgrid span{font:600 9px var(--m);letter-spacing:.07em;text-transform:uppercase;color:var(--mut)}
.bsecx{padding:18px 22px;border-top:1px solid var(--bd)}
.bsecx h3{font:700 10.5px var(--m);letter-spacing:.13em;text-transform:uppercase;color:var(--volt);
  margin:0 0 10px}
.bsecx ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.bsecx li,.bsecx p{font-size:13.6px;color:var(--soft);margin:0}
.btab{width:100%;border-collapse:collapse;font-size:13.2px}
.btab td{padding:7px 0;border-bottom:1px solid var(--bd);color:var(--soft)}
.btab tr:last-child td{border-bottom:0}
.btab .n{text-align:right;font-family:var(--m);white-space:nowrap;width:74px}
.btab .s{text-align:right;font:600 11.5px var(--m);color:var(--mut);width:76px}
.btab .s.ok{color:var(--good)}
.bq{border-left:2px solid var(--bd);padding:2px 0 2px 12px;margin-bottom:11px}
.bq span{font:700 10.5px var(--m);color:var(--warn)}
.bq p{margin:3px 0 0;font-size:13.3px;color:var(--soft)}
.brow{display:flex;justify-content:space-between;gap:14px;padding:7px 0;font-size:13.2px;
  border-bottom:1px solid var(--bd)}
.brow:last-child{border-bottom:0}
.brow span{color:var(--mut)}.brow b{text-align:right;font-weight:600;max-width:58%}
.bnote{margin:0;padding:14px 22px;background:var(--card2);font-size:13.3px;color:var(--soft);
  border-top:1px solid var(--bd)}
.bnote.warn{background:#2a1f0a;color:#ffd591}
.bnote.warn b{color:var(--warn)}
.bfoot{margin:0;padding:14px 22px 4px;font-size:11.5px;color:var(--mut)}

/* documents: a signed form stops shouting */
.doc.filed{background:var(--card2);opacity:.9}
.doc.filed .t{flex-wrap:wrap}
.doc .t .sp{flex:1}

/* joiner options with a second line (court towns) */
.jq-opt>span:not(.k):not(.tick){display:flex;flex-direction:column;gap:2px;min-width:0}

/* ================= TESTIMONIALS ================= */
.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px}
.tcard{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:24px;
  display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden}
.tcard::before{content:"”";position:absolute;top:-22px;right:14px;font:800 110px/1 Georgia,serif;
  color:color-mix(in srgb,var(--volt) 13%,transparent);pointer-events:none}
.tcard .stars{color:var(--volt);font-size:14px;letter-spacing:3px}
.tcard blockquote{margin:0;font-size:15.5px;line-height:1.62;color:var(--txt);flex:1}
.tcard .who{display:flex;align-items:center;gap:12px;border-top:1px solid var(--bd);padding-top:15px}
.tcard .who .av{width:42px;height:42px;border-radius:12px;flex:0 0 42px;display:grid;
  place-items:center;background:linear-gradient(140deg,var(--card2),var(--navy));
  font:800 14px var(--f);color:var(--volt)}
.tcard .who b{display:block;font-size:14.5px}
.tcard .who span{font-size:12.3px;color:var(--mut)}
.tcard .rk{margin-left:auto;font:700 10px var(--m);letter-spacing:.07em;text-transform:uppercase;
  color:var(--volt);border:1px solid var(--bd);border-radius:99px;padding:4px 9px;white-space:nowrap}

/* ================= PASSPORT — steady spread =================
   The book used to shrink to half width when shut and grow when opened, so it
   jumped on every turn and the back cover swung out to the left of its own
   container. The spread is now a fixed size at all times and we slide it
   sideways instead, which keeps whichever page you're looking at centred. */
.bookwrap{max-width:940px;margin:0 auto;gap:16px;padding:4px 0}
.bookstage{position:relative;width:min(880px,94vw);margin:0 auto;cursor:pointer;
  display:flex;justify-content:center;align-items:center;overflow:hidden;padding:34px 0}
.book,.book.shut{width:min(860px,92vw);height:min(520px,58vw)}
.book{transition:transform .85s cubic-bezier(.32,.06,.16,1)}
/* The slide itself is set from render() in passport.js — a class-driven
   transform proved unreliable to re-resolve mid-transition in the shell. */
/* Leaves always live on the right half — no re-layout between states. */
.book.shut .leaf{left:50%;width:50%}
/* A cover fills its leaf; it was floating inside the face's padding. */
.face:has(.cover){padding:0}
.face .cover{height:100%;margin:0;position:relative;z-index:2}
/* Opaque base so the leaf underneath can't ghost through a flipped face.
   NOTE: do not add isolation, filter, opacity or clip-path to .leaf — every one
   of them forces the stacking context flat, which kills preserve-3d and makes
   the reverse of each page show through mirrored. */
.face{background-color:#0a1730}
.book.shut .turn,.book.atback .turn{display:none}
.bookstage::after{content:"";position:absolute;left:50%;bottom:2px;transform:translateX(-50%);
  width:min(620px,80%);height:26px;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.5),transparent 70%)}
.bookstage .book{z-index:2}

/* ---------- the passport holder ----------
   A bifold cover in the luggage tradition: patterned canvas edge to edge,
   a contrast leather trim, saddle stitching just inside it, and a pull tab.
   The back panel sits behind the passport and the front flap in front of it,
   so it genuinely reads as tucked in. Colour is the member's choice. */
.holder{position:absolute;top:50%;left:26%;transform:translate(-50%,-50%);
  width:min(478px,51vw);aspect-ratio:478/566;pointer-events:none;
  --hc:#12305f;--ha:#CCFF00;
  /* The canvas: pattern over a warm ground, exactly like a monogram coated canvas. */
  --canvas:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'><g fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' opacity='0.30'><ellipse cx='18' cy='17' rx='8' ry='11' transform='rotate(-32 18 17)'/><path d='M11.6 10.4 24.4 24.2M24.4 10.4 11.6 24.2'/><path d='M23.4 25.2 30 34'/><circle cx='54' cy='19' r='7.5'/><path d='M47.2 15.8a12 12 0 0 0 13.6 0M47.2 22.2a12 12 0 0 1 13.6 0'/><ellipse cx='54' cy='53' rx='8' ry='11' transform='rotate(28 54 53)'/><path d='M47.6 46.4 60.4 60.2M60.4 46.4 47.6 60.2'/><path d='M46.6 61.2 40 70'/><circle cx='18' cy='55' r='7.5'/><path d='M11.2 51.8a12 12 0 0 0 13.6 0M11.2 58.2a12 12 0 0 1 13.6 0'/></g></svg>")}
.holder.hb{z-index:1}
.holder.hf{z-index:3}
.holder span{position:absolute}

/* Back panel — the half the passport rests against. */
.hback{inset:0;z-index:1;border-radius:5px 14px 14px 5px;
  background-image:var(--canvas),
    linear-gradient(158deg,color-mix(in srgb,var(--hc) 92%,#fff 8%),
      color-mix(in srgb,var(--hc) 62%,#000 38%));
  background-size:72px 72px,auto;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 20px 48px rgba(0,0,0,.55)}

/* Front flap — same canvas, covering the lower half. */
/* The front of the sleeve is a full vertical cover, patterned edge to edge —
   the passport lives entirely inside it, exactly like a passport wallet. */
.hflap{inset:0;z-index:3;border-radius:5px 14px 14px 5px;
  background-image:var(--canvas),
    linear-gradient(168deg,color-mix(in srgb,var(--hc) 97%,#fff 3%),
      color-mix(in srgb,var(--hc) 70%,#000 30%));
  background-size:72px 72px,auto;
  box-shadow:0 -12px 30px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.16)}

/* No one-sided trim. A 15px binding on the right edge only meant the 12px
   stitching ran underneath it on that side while sitting 12px clear of the edge
   on the other three — which is what read as the stitching not fitting. The
   edge detail is now the stitching alone, parallel to all four sides. */

/* Saddle stitching, inset from the trim. */
.hstitch{inset:12px;z-index:2;border-radius:0 3px 3px 0;
  border:1.5px dashed color-mix(in srgb,var(--ha) 34%,transparent);
  pointer-events:none}
.hlabel{left:0;right:0;bottom:20px;z-index:3;text-align:center;
  font:800 9.5px var(--m);letter-spacing:.26em;text-transform:uppercase;
  color:color-mix(in srgb,var(--ha) 72%,#fff)}

/* The pull tab — the thing you actually grab. */
.htab{position:absolute;right:-26px;top:50%;transform:translateY(-50%);
  width:30px;height:96px;z-index:4;
  border-radius:3px 10px 10px 3px;cursor:pointer;pointer-events:auto;
  writing-mode:vertical-rl;
  background:linear-gradient(180deg,color-mix(in srgb,var(--ha) 62%,#000 38%),
    color-mix(in srgb,var(--ha) 34%,#000 66%));
  box-shadow:0 6px 16px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.2);
  display:grid;place-items:center;
  font:800 8.5px var(--m);letter-spacing:.18em;text-transform:uppercase;
  color:color-mix(in srgb,#fff 88%,#000 12%);
  transition:transform .3s cubic-bezier(.32,.06,.16,1),box-shadow .3s ease}
.htab::after{content:"";position:absolute;right:7px;width:4px;height:30px;border-radius:99px;
  background:rgba(0,0,0,.45);box-shadow:inset 1px 0 0 rgba(255,255,255,.16)}
.bookstage:hover .htab{transform:translateY(-50%) translateX(7px);
  box-shadow:0 10px 22px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.24)}
.holder.empty .htab{opacity:0;transform:translateY(-50%) translateX(26px);
  transition:opacity .4s ease,transform .4s ease}

/* Once the passport is out, the flap eases open and the sleeve drops behind. */
/* Once the passport is out the sleeve is exactly behind page one, so it has to
   lie flat — any tilt pokes a patterned wedge out past the pages. */
.holder.empty .hflap{transform:none}
.holder.hf.empty{z-index:1}
.holder.empty{opacity:.35}
.hflap{transition:transform .7s cubic-bezier(.32,.06,.16,1)}
.holder{transition:opacity .7s ease}
@media(max-width:820px){
  .holder{left:50%;width:min(478px,53vw)}
  .htab{width:26px;height:82px;right:-22px}
}

/* grouped admin nav */
.admgrp{border-bottom:1px solid var(--bd)}
.admgrp:last-of-type{border-bottom:0}
.admgrp>summary{list-style:none;cursor:pointer;padding:11px 11px;border-radius:8px;
  font:800 10.5px var(--m);letter-spacing:.13em;text-transform:uppercase;color:var(--mut);
  display:flex;align-items:center;gap:8px;user-select:none}
.admgrp>summary::-webkit-details-marker{display:none}
.admgrp>summary::after{content:"›";margin-left:auto;font-size:15px;transition:transform .18s ease}
.admgrp[open]>summary{color:var(--volt)}
.admgrp[open]>summary::after{transform:rotate(90deg)}
.admgrp>summary:hover{background:var(--card)}
.admgrp>button{padding-left:22px}
.admgrp[open]{padding-bottom:8px}
@media(max-width:1024px){
  /* Horizontal nav on a tablet: groups become inline clusters. */
  .admnav{align-items:flex-start}
  .admgrp{border-bottom:0;flex:0 0 auto}
  .admgrp>summary{padding:8px 10px}
}

/* the referral reward choice */
.rewardpick{background:color-mix(in srgb,var(--volt) 7%,var(--card2));
  border:1px solid var(--volt);border-radius:12px;padding:14px 16px;margin-bottom:12px}
.rewardpick>b{display:block;font-size:14px;margin-bottom:10px}
.rewardpick .rp{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.rewardpick .tiny{display:block}

/* sleeve colour picker, matching the passport one */
.scol{width:30px;height:30px;border-radius:9px;border:0;cursor:pointer;opacity:.55;
  transition:opacity .15s,transform .15s}
.scol:hover{opacity:1;transform:scale(1.1)}
.scol.on{opacity:1;outline:2px solid var(--txt);outline-offset:3px}

@media(prefers-reduced-motion:reduce){.book{transition:none}}
@media(max-width:820px){
  .bookstage{width:100%}
  .book,.book.shut{width:96vw;height:76vw}
}
@media(max-width:560px){
  .book,.book.shut{width:96vw;height:104vw}
  .bookwrap{gap:12px}
}

/* Onboarding welcome: the whole stage is the button */
.jq-tap{margin-top:38px;font:700 11px var(--m);letter-spacing:.18em;text-transform:uppercase;
  color:var(--volt);animation:pulse 2.2s ease-in-out infinite}
.jq-stage:has(.jq-tap){cursor:pointer}

/* Live gate readout in the coach's Assessment tab */
.gatelive{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;margin:10px 0 4px;
  padding:11px 14px;background:var(--card2);border:1px solid var(--bd);border-radius:10px}
.gl-n{font:800 13px var(--m);color:var(--mut)}
.gl-n.ok{color:var(--good)}
.gl-t{font-size:13px;color:var(--soft)}
.gl-t b{color:var(--volt)}
.ladder .rung.pending{outline:2px dashed var(--volt);outline-offset:2px;color:var(--ink)}

/* Match Play hero: create-or-log-in pair */
.mpcta{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:30px}
.mplog{color:var(--soft);font-size:14px;text-decoration:none;border-bottom:1px solid var(--bd);
  padding-bottom:2px}
.mplog:hover{color:var(--volt);border-color:var(--volt)}

/* Worked example, folded into the ladder section rather than shouting on its own */
.peek{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center;margin-top:44px;
  padding-top:34px;border-top:1px solid var(--bd)}
.peek .pk .eyebrow{display:block;margin-bottom:12px}
.peek .pk h3{font-size:23px;font-weight:800;margin-bottom:10px}
.peek .pk p{color:var(--soft);font-size:14.8px;margin:0;max-width:44ch}
.pkcard{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:20px 22px}
@media(max-width:820px){.peek{grid-template-columns:1fr;gap:20px}}

/* ================= ADMIN: seasons & type steps ================= */
.seasons{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.season{display:flex;gap:13px;align-items:flex-start;text-align:left;background:var(--card);
  border:1px solid var(--bd);border-radius:13px;padding:14px 15px;cursor:pointer;color:inherit;
  font:inherit;width:100%}
.season:hover{border-color:var(--mut)}
.season.on{border-color:var(--volt);background:color-mix(in srgb,var(--volt) 7%,var(--card))}
.season .sw{flex:0 0 40px;width:40px;height:40px;border-radius:11px;overflow:hidden;
  display:flex;flex-direction:column;border:1px solid var(--bd)}
.season .sw i{display:block;flex:1;background:var(--c1)}
.season .sw i.a{flex:0 0 12px;background:var(--ac)}
.season .sb{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.season .sb b{font-size:14px}
.season .sb span{font:600 11px var(--m);letter-spacing:.05em;color:var(--mut)}
.season .sb .nt{font:400 12.2px var(--f);letter-spacing:0;color:var(--soft);margin-top:3px}
.tsteps{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}

/* ================= iPAD & iPHONE =================
   Everything below is about the two form factors the academy is actually
   demoed on: a 768–1024 tablet and a 375–430 phone. */

/* Nothing may push the page sideways. */
html,body{max-width:100%;overflow-x:hidden}
.tw2,.availwrap,.srchres,.aslog{-webkit-overflow-scrolling:touch}

/* iPad portrait and landscape */
@media(min-width:768px) and (max-width:1024px){
  .adm{flex-direction:column}
  .admnav{width:auto;flex:auto;border-right:0;border-bottom:1px solid var(--bd);
    display:flex;gap:5px;overflow-x:auto;padding:12px 18px}
  .admnav button{white-space:nowrap;width:auto}
  .admbody{padding:22px 20px 80px}
  .book{width:min(700px,92vw);height:min(430px,58vw)}
  .book.shut{width:min(350px,46vw)}
  .cbook{width:94vw;height:74vw}
  .jq-opts>.jq-opt{flex:0 1 calc(50% - 6.5px)}
  .grid.g4{grid-template-columns:repeat(2,1fr)}
  .bgrid{grid-template-columns:repeat(2,1fr)}
}

/* Phones */
@media(max-width:560px){
  .nav .in{gap:10px;padding:10px 14px}
  .navsearch{width:30px;height:30px}
  .hero{padding:56px 18px 60px}
  .portal{padding:18px 14px 96px}
  .ptabs{gap:2px;margin-bottom:20px;-webkit-overflow-scrolling:touch}
  .ptabs button{padding:11px 10px}
  .phead{gap:12px}
  .rankchip{font-size:12px;padding:6px 12px}

  /* The passport is the worst offender at this width — 47vw was unreadable. */
  .book{width:min(440px,94vw);height:118vw}
  .book.shut{width:min(300px,72vw)}
  .sgrid{grid-template-columns:repeat(2,1fr);gap:9px}
  .stamp .t2{font-size:9.5px}
  .bookctl .lbl{min-width:88px;font-size:11.5px}

  .bkrow{gap:10px;padding:12px 13px}
  .bkrow .when{flex-basis:58px;padding:6px 4px}
  .bkrow .when b{font-size:13.5px}
  .bkrow .who{flex-basis:100%;order:3}
  .bulkbar,.bookbar{padding:11px 13px;gap:10px}
  .bookbar .n{font-size:13.5px}
  .daycol{padding:11px}
  .packs{grid-template-columns:1fr}
  .bgrid{grid-template-columns:repeat(2,1fr)}
  .brief .bh{padding:20px 17px 17px}
  .brief .bh h2{font-size:20px}
  .bsecx,.bnote,.bfoot{padding-left:17px;padding-right:17px}
  .briefbox .mfoot{padding:14px 17px 18px}

  /* Full-screen sheets and modals read better than floating boxes on a phone. */
  .modal{padding:0;align-items:flex-end}
  .mbox{max-width:none;border-radius:16px 16px 0 0;max-height:92vh;padding:24px 18px}
  #briefModal .mbox{padding:0}
  .srch{padding:0}
  .srchbox{max-width:none;height:100%;border-radius:0;display:flex;flex-direction:column}
  .srchres{max-height:none;flex:1}
  .srchrow{gap:10px;padding:12px 11px}
  .srchrow .k{min-width:0;padding:3px 7px;font-size:8.5px}

  .aspanel{right:8px;left:8px;bottom:68px;width:auto}
  .aslog{max-height:44vh}
  .asbtn{right:12px;bottom:12px;padding:11px 17px 11px 14px}

  .jq-top{padding:14px 16px;gap:10px}
  .jq-top .wm small{display:none}
  .jq-stage{padding:18px 16px 118px}
  .jq-opt{min-height:78px;padding:16px 42px 16px 18px}
  .jq-opts{gap:10px;margin-top:30px}
  .jq-field{margin-top:28px}
  .jq-coach .c{padding:15px 16px;gap:12px}
  .jq-coach .c .av{width:44px;height:44px;flex-basis:44px}
  .lockbox{padding:18px 17px;gap:14px}
  .tcard{padding:20px}
  .tgrid{grid-template-columns:1fr}
  .editbar{gap:6px;padding:8px 12px}
}

/* Tap targets: a 27px slot is fine with a mouse and hopeless with a thumb. */
@media(pointer:coarse){
  .slot{height:34px}
  .slotbtn{padding:12px 9px}
  .chipbtn,.rbtn,.del{padding-top:9px;padding-bottom:9px}
  .pcol{width:36px;height:36px}
  .bookctl button,.cbctl button{width:46px;height:46px}
  .urow input,.bkrow .pick{width:20px;height:20px}
}

/* Notched iPhones: keep the fixed bars clear of the home indicator. */
@supports(padding:max(0px)){
  @media(max-width:900px){
    .jq-foot{padding-bottom:max(16px,env(safe-area-inset-bottom))}
    .editbar{padding-bottom:max(11px,env(safe-area-inset-bottom))}
    .asbtn{bottom:max(12px,env(safe-area-inset-bottom))}
    .aspanel{bottom:max(68px,calc(env(safe-area-inset-bottom) + 58px))}
  }
}

/* ============================================================
   "Cary Parks" — light preview palette
   Scoped entirely to [data-season="cary"], which only appears while an
   admin has that preset pinned in Admin → Colours & Themes. The house
   dark palette is untouched; unpinning is a full revert.

   The nine theme tokens are swapped by applyTheme() from the preset in
   data.js. This block covers what tokens can't reach: rules that hardcode
   a dark-background assumption (neon glows, dark-on-volt button text,
   low-alpha tints that vanish on cream) and the CTA colour, which is
   deliberately kept OUT of the token set so terracotta lands on buttons
   only rather than on every accent.
   ============================================================ */
:root[data-season="cary"]{
  --clay:#E07A5F;      /* Terracotta Clay — CTAs and urgent alerts ONLY */
  --sage:#8FA89B;      /* Park Bench Sage */
  --muni:#3A506B;      /* Municipal Blue — same value as --volt here */
  /* semantic tokens retuned for contrast on cream */
  --blue:#3A506B;--green:#5A7D6B;--gold:#A8792F;
  --good:#3C7A5B;--warn:#A96B14;
}
/* Archivo carries every display role; Inter (set as --f) carries the rest. */
:root[data-season="cary"] h1,:root[data-season="cary"] h2,
:root[data-season="cary"] h3,:root[data-season="cary"] h4,
:root[data-season="cary"] .wm,:root[data-season="cary"] .eyebrow,
:root[data-season="cary"] .btn,:root[data-season="cary"] .navcta,
:root[data-season="cary"] .jq-q,:root[data-season="cary"] .stat b,
:root[data-season="cary"] .kpi b{font-family:var(--head)}

/* The Action Pop: clay cuts through the blues and greens, nowhere else. */
[data-season="cary"] .btn{background:var(--clay);color:#fff;
  box-shadow:0 5px 16px #e07a5f3d}
[data-season="cary"] .btn:hover{background:#D66A4D;box-shadow:0 9px 24px #e07a5f5c}
[data-season="cary"] .btn.ghost{background:transparent;color:var(--muni);
  border:1px solid var(--muni);box-shadow:none}
[data-season="cary"] .btn.ghost:hover{border-color:var(--clay);color:var(--clay);background:#e07a5f0f}
[data-season="cary"] .navcta{background:var(--clay);color:#fff}
[data-season="cary"] .navcta:hover{background:#D66A4D}

/* Hero: linen wash instead of the navy radial, blue court-marking grid. */
[data-season="cary"] .hero{background:radial-gradient(1100px 520px at 50% -12%,
  #F6F3EE 0%,#F0ECE5 34%,#E7E2D9 68%,var(--ink) 100%)}
[data-season="cary"] .hero::before{background-image:
  linear-gradient(#3a506b26 1px,transparent 1px),
  linear-gradient(90deg,#3a506b26 1px,transparent 1px)}
[data-season="cary"] .strip{background:linear-gradient(90deg,
  #3A506B,#8FA89B 32%,#E07A5F 58%,#8FA89B 80%,#3A506B)}

/* Rigid grid, generous padding, soft shadow. */
[data-season="cary"] .card,[data-season="cary"] .coach,[data-season="cary"] .stat,
[data-season="cary"] .tbl,[data-season="cary"] .gcard,[data-season="cary"] .season{
  box-shadow:0 1px 2px #25282a0a,0 10px 26px #25282a0d}
[data-season="cary"] .card{padding:28px}
[data-season="cary"] .plate{border:1px solid var(--bd)}
[data-season="cary"] .nav{box-shadow:0 1px 14px #25282a0a}

/* Tints keyed to volt/neon that read as invisible or acidic on cream. */
[data-season="cary"] .chipl,[data-season="cary"] .pill.coach{background:#3a506b1f;color:var(--muni)}
[data-season="cary"] .chipl.low,[data-season="cary"] .pill.past_due{background:#e07a5f26;color:#B4472A}
[data-season="cary"] .chipl.out{background:#e07a5f26;color:#B4472A}
[data-season="cary"] .pill.member{background:#3a506b1f;color:var(--muni)}
[data-season="cary"] .pill.admin,[data-season="cary"] .pill.active{background:#3c7a5b1f;color:var(--good)}
[data-season="cary"] .founding .seats{background:#fff}

/* Callout boxes that hardcode a dark background. Every one of these was built
   to sit on navy and turns into a black slab on linen — .strike is the most
   visible, since the admin preview notice rides at the top of the Gear Shop. */
[data-season="cary"] .warn{background:#FBF3E3;border-color:#E4CE9A;color:#6B4E12}
[data-season="cary"] .warn b{color:#A96B14}
[data-season="cary"] .handoff,[data-season="cary"] .inherit,
[data-season="cary"] .bnote.warn{background:#FBF3E3;border-color:#E4CE9A;color:#6B4E12}
[data-season="cary"] .handoff b,[data-season="cary"] .inherit .h,
[data-season="cary"] .bnote.warn b{color:#A96B14}
[data-season="cary"] .strike{background:#FCEEEA;border-color:#E9BCAF;color:#8C3A22}
[data-season="cary"] .strike b{color:#B4472A}

/* Passport sleeve shadows. 48px of 55%-black reads as depth against navy and as
   a grey smear against linen — the sleeve looked like it was floating over a
   stain. Same geometry, far less ink; the object still lifts off the page. */
[data-season="cary"] .hback{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 12px 28px rgba(37,40,42,.18)}
[data-season="cary"] .hflap{
  box-shadow:0 -6px 16px rgba(37,40,42,.13),inset 0 1px 0 rgba(255,255,255,.16)}
[data-season="cary"] .htab{
  box-shadow:0 4px 11px rgba(37,40,42,.22),inset 0 1px 0 rgba(255,255,255,.2)}
[data-season="cary"] .bookstage:hover .htab{
  box-shadow:0 7px 16px rgba(37,40,42,.28),inset 0 1px 0 rgba(255,255,255,.24)}

/* ---- Display sizing for Archivo -------------------------------------------
   The first pass used Syne and needed -.038em tracking to stop the headline
   spanning the viewport. That combination is what "wide and tight at the same
   time" describes: wide glyphs jammed together, so the letters fight instead
   of sitting in a line. Archivo has normal proportions, so the tracking goes
   back to near-neutral — just enough negative to close the gaps that open up
   in all-caps — and the caps can grow again because the face sets narrower. */
:root[data-season="cary"] .hero h1{
  font-size:clamp(34px,6.2vw,66px);line-height:1.04;letter-spacing:-.017em;max-width:16ch}
:root[data-season="cary"] h1,:root[data-season="cary"] .phead h1{letter-spacing:-.016em}
:root[data-season="cary"] h2,:root[data-season="cary"] .head h2,
:root[data-season="cary"] .ctaband h2{
  font-size:clamp(25px,3.7vw,38px);line-height:1.1;letter-spacing:-.015em}
:root[data-season="cary"] .jq-q{letter-spacing:-.015em;line-height:1.08}
:root[data-season="cary"] h3,:root[data-season="cary"] h4{letter-spacing:-.005em}
:root[data-season="cary"] .eyebrow{letter-spacing:.19em}

/* ---- Hover: lift + a warm band that flows across the tile -----------------
   The sheen is a background-image on the element itself rather than a
   pseudo-element, so nothing needs overflow:hidden — which would have clipped
   the .tagpill that sits outside the top edge of the pricing cards. */
@keyframes carySheen{from{background-position:140% 0}to{background-position:-40% 0}}
[data-season="cary"] .card,[data-season="cary"] .coach,[data-season="cary"] .stat,
[data-season="cary"] .gcard{
  background-image:linear-gradient(100deg,transparent 30%,
    #e07a5f14 42%,#e07a5f2e 50%,#e07a5f14 58%,transparent 70%);
  background-size:260% 100%;background-position:140% 0;background-repeat:no-repeat;
  transition:transform .38s cubic-bezier(.2,.7,.3,1),box-shadow .38s ease,
    border-color .38s ease}
[data-season="cary"] .card:hover,[data-season="cary"] .coach:hover,
[data-season="cary"] .stat:hover,[data-season="cary"] .gcard:hover{
  transform:translateY(-5px);border-color:#e07a5f7a;
  box-shadow:0 3px 10px #25282a12,0 20px 44px #e07a5f2b;
  animation:carySheen 2.8s linear infinite}

/* ---- The closing band: asphalt, with the headline fading into clay --------
   Two-tone without touching the markup. A VERTICAL gradient clipped to the
   glyphs lands near-white across the first line and clay-to-tan across the
   second, because the heading wraps through the gradient. Splitting the copy
   into spans would have been the obvious route and the wrong one: the inline
   editor saves innerHTML, so an admin editing the band once would bake the
   spans into stored copy and they'd outlive the theme. */
[data-season="cary"] .ctaband{background:#25282A;border-color:#25282A}
[data-season="cary"] .ctaband h2{color:#F7F4EF}
[data-season="cary"] .ctaband p{color:#B9B3AA}
[data-season="cary"] .ctaband .fine,[data-season="cary"] .ctaband .tiny{color:#8D8880}

/* Two layers clipped to the glyphs: a hard-stopped vertical mask that paints
   every line above --cut solid, and a horizontal clay→tan ramp showing through
   underneath it. --cut is the line count measured by duoHeads() in site.js, so
   the split lands exactly on the last line break rather than halfway through a
   row of letters. .duo is only set on headings that actually wrap — a one-line
   heading keeps its solid fill, because a vertical gradient across a single
   line reads as a bevel, not as two-tone. */
[data-season="cary"] .hero h1.duo,[data-season="cary"] .ctaband h2.duo{
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;padding-bottom:.06em}
[data-season="cary"] .ctaband h2.duo{
  background-image:linear-gradient(180deg,#F7F4EF 0,#F7F4EF var(--cut),transparent var(--cut)),
    linear-gradient(90deg,#E07A5F 0%,#D68F6B 50%,#CD9C6F 100%)}
[data-season="cary"] .hero h1.duo{
  background-image:linear-gradient(180deg,var(--txt) 0,var(--txt) var(--cut),transparent var(--cut)),
    linear-gradient(90deg,#E07A5F 0%,#C9885F 100%)}
/* Transparent glyphs hide the caret, so edit mode gets its ink back. */
[data-season="cary"] .ctaband h2.editing,[data-season="cary"] .hero h1.editing{
  background-image:none;-webkit-text-fill-color:#F7F4EF}
[data-season="cary"] .hero h1.editing{-webkit-text-fill-color:var(--txt)}

@media(prefers-reduced-motion:reduce){
  [data-season="cary"] .card:hover,[data-season="cary"] .coach:hover,
  [data-season="cary"] .stat:hover,[data-season="cary"] .gcard:hover{
    animation:none;transform:none}
}

/* Bottom notice bar. Used by the inactivity warning and by the "changed in
   another window" prompt on admin. Neither had any styling — the markup was
   there but the class never existed, so both rendered as loose text at the
   very bottom of the document. */
.idlebar{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:9000;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;
  max-width:min(680px,calc(100vw - 32px));
  background:var(--card);border:1px solid var(--bd);border-radius:13px;
  padding:13px 18px;font-size:13.4px;color:var(--soft);
  box-shadow:0 8px 34px rgba(0,0,0,.34)}
.idlebar b{color:var(--txt)}
/* The admin edit bar is also pinned to the bottom, so lift clear of it. */
body:has(.editbar) .idlebar{bottom:76px}
@media(max-width:620px){
  .idlebar{bottom:max(12px,env(safe-area-inset-bottom))}
  body:has(.editbar) .idlebar{bottom:max(76px,calc(env(safe-area-inset-bottom) + 66px))}
}