:root{
  /* ---- client palette, used exactly as supplied ---- */
  --ink:#260d44; --slate:#002237; --cyan:#0d197f; --wash:#4c8095; --token:#0b9893;
  --paper:#f0fffc; --available:#0007a9; --full:#640020; --whatsapp:#00bb22;
  --muted:#1c3f36; --line:#438581;
  /* ---- derived tints, no new hues: each is a supplied colour mixed into paper ---- */
  --s1:#d7eced;        /* wash 15% — tinted surface */
  --s2:#bfd9dd;        /* wash 30% — page background */
  --quiet:#3e5e56;     /* muted 84% — secondary text, 4.8:1 even on s2 */
  --free-fill:#cad7ef; /* available 16% */
  --full-fill:#dad6d9; /* full 16% */
  --token-fill:#bee8e5;/* token 22% */
  /* ---- the ink surface is purple now, so light-on-dark is re-derived ---- */
  --on-dark:#b7bbc8;       /* paper 72% into ink — 8.9:1 on ink */
  --on-dark-quiet:#8f8ba4; /* paper 52% into ink — 5.2:1 */
  --on-dark-faint:#73698a; /* paper 38% into ink — 3.4:1, non-text only */
  --available-dark:#545ec6;/* available lifted 35% — 3.1:1 on ink, carries a paper tick at 5.4:1 */
  --on-slate:#90a7ad;      /* paper 60% into slate — 6.5:1 */
  --ink-hover:#3e2a5a;     /* ink 12% toward paper */
  --disabled:#4a7a91;      /* wash darkened 5% with ink, so paper text clears 4.5:1 */
  --r-ctl:4px; --r-card:10px;
  --f-d:'Archivo',system-ui,sans-serif; --f-b:'Funnel Sans',system-ui,sans-serif; --f-m:'IBM Plex Mono',monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--s2);color:var(--muted);font:400 13px/1.55 var(--f-b)}
a{color:inherit}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
h1,h2,h3,h4{font-family:var(--f-d);margin:0;letter-spacing:-.015em;color:var(--slate)}

.pad{padding:20px 22px}
.pad.sm{padding:14px 16px}

.topbar{display:flex;align-items:center;gap:18px;padding:11px 18px;border-bottom:1px solid var(--line);background:var(--paper)}
.logo{font:800 16px/1 var(--f-d);color:var(--slate);letter-spacing:-.03em}
.nav{display:flex;gap:15px;font-size:12.5px;color:var(--muted);flex:1}
.nav span{white-space:nowrap}
.nav span.on{color:var(--cyan);font-weight:600;box-shadow:inset 0 -2px var(--cyan)}
.quiet{font-size:11.5px;color:var(--quiet)}

.btn{display:inline-block;font:600 13px/1 var(--f-b);padding:10px 15px;border-radius:var(--r-ctl);border:1px solid transparent;text-decoration:none;white-space:nowrap}
.btn.p{background:var(--slate);color:#fff}
.btn.s{background:var(--paper);color:var(--cyan);border-color:var(--cyan)}
.btn.g{background:transparent;color:var(--cyan);padding-left:0}
.btn.w{background:var(--whatsapp);color:var(--ink)}
.btn.sm{padding:7px 11px;font-size:12px}
.btn.blk{display:block;text-align:center;width:100%}

.crumb{font-size:11.5px;color:var(--quiet);padding:9px 22px;border-bottom:1px solid var(--line)}

.eyebrow{font-size:12px;color:var(--cyan);font-weight:600;margin:0 0 8px}
h3.big{font-size:30px;line-height:1.12;max-width:17ch}
h3.mid{font-size:21px;line-height:1.2}
h4.sm{font-size:15px}
.lede{max-width:56ch;margin:10px 0 0;font-size:12px}
.microtrust{font-size:11.5px;color:var(--quiet);margin:12px 0 0}
.cta{display:flex;gap:9px;margin:16px 0 0;flex-wrap:wrap;align-items:center}

.grid{display:grid;gap:14px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g6{grid-template-columns:repeat(6,1fr)}

.card{border:1px solid var(--line);border-radius:var(--r-card);padding:14px;background:var(--paper)}
.card h4{font-size:14px;margin:0 0 5px}
.card p{margin:0;font-size:12.5px}

.ent{display:flex;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:var(--paper)}
.rail{flex:0 0 6px}
.rail.free{background:var(--available)} .rail.soon{background:var(--wash)} .rail.full{background:var(--full)}
.ent .body{padding:12px 14px;flex:1;min-width:0}
.ent .name{font:600 14.5px/1.25 var(--f-d);color:var(--slate)}
.ent .sub{font-size:12px;color:var(--quiet);margin:3px 0 7px}
.ent .slotline{font:500 12px/1 var(--f-m);color:var(--available)}
.ent .slotline.later{color:var(--quiet)}
.ent .slotline.none{color:var(--full)}
.ent .thumb{flex:0 0 74px;background:var(--disabled);display:flex;align-items:center;justify-content:center;font:600 11px var(--f-b);color:#fff}

/* THE DAY STRIP */
.day{border:1px solid var(--line);border-radius:var(--r-card);padding:13px 14px;background:var(--paper)}
.dayhead{display:flex;justify-content:space-between;font-size:11.5px;color:var(--quiet);margin:0 0 9px}
.dayhead b{font:500 11.5px var(--f-m);color:var(--muted)}
.strip{display:flex;gap:2px;height:34px;align-items:stretch}
.blk{flex:1;border-radius:2px;background:var(--free-fill);border:1px solid var(--available)}
.blk.bk{background:var(--s2);border-color:var(--line)}
.blk.nx{background:var(--available);border-color:var(--available)}
.blk.cl{background:repeating-linear-gradient(45deg,var(--s1),var(--s1) 3px,var(--s2) 3px,var(--s2) 6px);border-color:var(--line)}
.scale{display:flex;justify-content:space-between;font:400 10px var(--f-m);color:var(--quiet);margin:6px 0 0}
.legend{display:flex;gap:14px;font-size:11px;color:var(--quiet);margin:11px 0 0;flex-wrap:wrap}
.legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:-1px}

/* QSTAT board — token red panel, paper digits (8.8:1) */
.token{background:var(--ink);border-radius:var(--r-card);padding:15px 17px;color:var(--on-dark)}
.token .lbl{font-size:11px;letter-spacing:.05em}
.token .num{font:600 40px/1 var(--f-m);color:var(--token)}
.token .row{display:flex;gap:22px;align-items:flex-end}
.token .nxt{font:500 13px var(--f-m);color:var(--on-dark)}

.slots{display:flex;flex-wrap:wrap;gap:7px}
.chip{font:500 12px/1 var(--f-m);padding:11px 10px;border:1px solid var(--line);border-radius:var(--r-ctl);min-width:78px;text-align:center;background:var(--paper)}
.chip.sel{background:var(--slate);color:#fff;border-color:var(--slate)}
.chip.next{background:var(--available);color:var(--paper);border-color:var(--available);font-weight:600}
.chip.off{color:var(--quiet);background:var(--s2);text-decoration:line-through;border-color:var(--line)}

.pill{display:inline-block;font:500 11px/1 var(--f-b);padding:5px 8px;border-radius:20px;background:var(--s1);color:var(--cyan);margin:0 4px 4px 0}
.pill.cred{background:var(--paper);border:1px solid var(--line);color:var(--muted)}
.pill.tok{background:var(--token-fill);color:var(--muted);border:1px solid var(--token)}

/* ===== MUI Stepper — Stepper > Step > StepIcon + StepConnector + StepLabel ===== */
.stepper{display:flex;align-items:center;list-style:none;margin:0;padding:0}
.step{display:flex;align-items:center;gap:7px;flex:0 1 auto;min-width:0;position:relative}
.step + .step::before{content:"";flex:1 1 auto;min-width:10px;height:1px;background:var(--line);opacity:.5;margin:0 7px}
.step[data-state="completed"] + .step::before{background:var(--available);opacity:1}
.step__icon{flex:0 0 22px;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;font:600 11px/1 var(--f-b);background:var(--s2);color:var(--quiet)}
.step[data-state="active"] .step__icon{background:var(--slate);color:#fff}
.step[data-state="completed"] .step__icon{background:var(--available);color:var(--paper)}
.step[data-state="error"] .step__icon{background:var(--full);color:var(--paper)}
.step__label{font-size:11.5px;color:var(--quiet);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.step[data-state="active"] .step__label{color:var(--slate);font-weight:600}
.step[data-state="completed"] .step__label{color:var(--muted)}
.step[data-state="error"] .step__label{color:var(--full);font-weight:500}
.step__optional{display:block;font-style:normal;font-size:10px;color:var(--quiet);font-weight:400}
.stepper[data-variant="alternative-label"] .step{flex-direction:column;flex:1;text-align:center}
.stepper[data-variant="alternative-label"] .step__label{white-space:normal;margin-top:6px}
.stepper[data-variant="alternative-label"] .step + .step::before{position:absolute;top:11px;
  left:calc(-50% + 18px);right:calc(50% + 18px);width:auto;margin:0}
.stepper[data-orientation="vertical"]{flex-direction:column;align-items:stretch}
.stepper[data-orientation="vertical"] .step{flex-direction:column;align-items:stretch}
.stepper[data-orientation="vertical"] .step__head{display:flex;align-items:center;gap:9px}
.stepper[data-orientation="vertical"] .step + .step::before{content:none}
/* Spine runs from under the icon to the next step, so it survives steps
   that carry no content. Previously the line came from .step__content's
   left border and simply vanished where there was none. */
.stepper[data-orientation="vertical"] .step:not(:last-child)::after{
  content:"";position:absolute;left:10px;top:26px;bottom:-4px;width:1px;
  background:var(--line);opacity:.45}
.stepper[data-orientation="vertical"] .step[data-state="completed"]:not(:last-child)::after{
  background:var(--available);opacity:1}
.stepper[data-orientation="vertical"] .step__content{margin-left:10px;padding:8px 0 10px 14px;
  font-size:11.5px;color:var(--quiet)}
.stepper[data-orientation="vertical"] .step[data-state="completed"] .step__content{border-left-color:var(--available)}
.stepper[data-orientation="vertical"] .step:last-child .step__content{border-left-color:transparent}

/* ===== MUI MobileStepper — text, dots, progress ===== */
.mstep{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--s1);
  border-radius:var(--r-ctl);padding:7px 10px;min-height:42px}
.mstep__dots{display:flex;gap:6px;align-items:center}
.mstep__dot{width:7px;height:7px;border-radius:50%;background:var(--s2);border:1px solid var(--line)}
.mstep__dot.on{background:var(--available);border-color:var(--available)}
.mstep__text{font:500 11.5px var(--f-m);color:var(--muted)}
.mstep__prog{flex:1;height:4px;border-radius:2px;background:var(--s2);overflow:hidden}
.mstep__bar{display:block;height:100%;background:var(--available);border-radius:2px}

/* ===== MUI Breadcrumbs — ol, separators in their own aria-hidden li ===== */
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:0;padding:0}
.crumb a{color:var(--quiet);text-decoration:none}
.crumb a:hover{color:var(--cyan);text-decoration:underline}
.crumb li[aria-current="page"]{color:var(--muted)}
.crumb .sep{color:var(--quiet)}
.crumb .ell{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:17px;
  padding:0 6px;background:var(--s1);border:0;border-radius:2px;color:var(--quiet);font:600 10px/1 var(--f-b)}

/* ===== MUI Menu — Paper + MenuItem + ListItemText + Divider ===== */
.menu{min-width:210px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:0 4px 16px rgba(0,34,55,.14);padding:4px 0;margin:0;list-style:none}
.menu__item{display:flex;align-items:center;gap:10px;padding:9px 14px;min-height:38px;color:var(--muted);
  text-decoration:none;font-size:12px}
.menu__item:hover{background:var(--s1);color:var(--cyan)}
.menu__item.sel{background:var(--free-fill);color:var(--available);font-weight:600}
.menu__item.dis{color:var(--quiet);opacity:.55}
.menu__text{flex:1;min-width:0}
.menu__sec{display:block;font-size:10.5px;color:var(--quiet);font-weight:400}
.menu__sc{color:var(--quiet);font:400 10.5px var(--f-m)}
.menu__div{height:1px;background:var(--line);opacity:.5;margin:4px 0;border:0}
.menu__sub{padding:7px 14px 3px;font:600 10px var(--f-b);color:var(--quiet);letter-spacing:.05em}
.menu--dense .menu__item{padding:6px 12px;min-height:32px}

/* ===== MUI BottomNavigation — 3 actions keep labels, 4–5 hide inactive ones ===== */
.bnav{display:flex;min-height:56px;background:var(--paper);border-top:1px solid var(--line)}
.bnav__a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:7px 4px;min-width:0;color:var(--quiet);text-decoration:none;font:500 10px/1.2 var(--f-b)}
.bnav__a.on{color:var(--available)}
.bnav__i{width:20px;height:20px;display:block}
.bnav__l{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bnav[data-actions="5"] .bnav__a:not(.on) .bnav__l,
.bnav[data-actions="4"] .bnav__a:not(.on) .bnav__l{display:none}
.bnav[data-actions="5"] .bnav__a:not(.on),
.bnav[data-actions="4"] .bnav__a:not(.on){padding-top:12px}

/* ===== Icon hover effects — Codrops idiom (round :after that scales/fades) ===== */
.iconrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:6px 0 0}
.icon-fx{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:0 0 44px;border-radius:50%;background:var(--s1);color:var(--cyan);
  text-decoration:none;cursor:pointer;
  transition:background .25s cubic-bezier(.2,.7,.3,1),color .25s cubic-bezier(.2,.7,.3,1)}
.icon-fx svg{width:20px;height:20px;position:relative;z-index:1}
.icon-fx::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;box-sizing:border-box}
.icon-fx--ring::after{border:2px solid var(--cyan);opacity:0;transform:scale(.85);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),opacity .3s cubic-bezier(.2,.7,.3,1)}
.icon-fx--ring:hover{background:var(--cyan);color:var(--paper)}
.icon-fx--ring:hover::after{opacity:1;transform:scale(1.35)}
.icon-fx--fill{overflow:hidden}
.icon-fx--fill::after{background:var(--available);transform:translateY(100%);
  transition:transform .28s cubic-bezier(.2,.7,.3,1);z-index:0}
.icon-fx--fill:hover{color:var(--paper)}
.icon-fx--fill:hover::after{transform:translateY(0)}
.icon-fx--spin::after{border:2px dashed var(--cyan);opacity:0;transition:opacity .2s}
.icon-fx--spin:hover{background:var(--wash);color:var(--paper)}
.icon-fx--spin:hover::after{opacity:1;animation:spinAround 3s linear infinite}
@keyframes spinAround{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.icon-fx--lift{transition:transform .2s,background .2s,box-shadow .2s}
.icon-fx--lift:hover{transform:translateY(-2px);background:var(--free-fill);color:var(--available);
  box-shadow:0 3px 10px rgba(0,34,55,.16)}
.icon-fx--onDark{background:rgba(255,255,255,.1);color:#fff}
.icon-fx--onDark.icon-fx--ring::after{border-color:#fff}
.icon-fx--onDark:hover{background:#fff;color:var(--ink)}
.icon-fx--sm{width:34px;height:34px;flex-basis:34px}
.icon-fx--sm svg{width:16px;height:16px}

/* ===== Collapsible rail — YouTube-style side menu ===== */
.railbox{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:var(--ink);min-height:260px;display:flex}
.rail{--rail-w:72px;width:var(--rail-w);flex:0 0 var(--rail-w);background:var(--ink);color:#b7bbc8;
  display:flex;flex-direction:column;padding:8px 0;overflow:hidden;
  transition:width .22s cubic-bezier(.2,.7,.3,1),flex-basis .22s cubic-bezier(.2,.7,.3,1)}
.rail[data-expanded="true"]{--rail-w:248px}
.rail__toggle{display:flex;align-items:center;gap:12px;width:100%;min-height:42px;padding:0 26px;
  background:none;border:0;color:#fff;cursor:pointer;font:600 12px var(--f-b)}
.rail__toggle{position:relative}
.rail__burger{flex:0 0 20px;width:20px;height:20px}
.rail__group{list-style:none;margin:0;padding:8px 0}
.rail__group + .rail__group{border-top:1px solid rgba(255,255,255,.1);margin-top:8px}
.rail__heading{padding:8px 16px 4px;font:600 10px var(--f-b);color:var(--on-dark-quiet);letter-spacing:.06em;
  white-space:nowrap;opacity:0;transition:opacity .15s}
.rail[data-expanded="true"] .rail__heading{opacity:1;transition-delay:.08s}
.rail__link{display:flex;align-items:center;gap:12px;min-height:42px;padding:0 26px;color:#b7bbc8;
  text-decoration:none;font-size:12px;white-space:nowrap;position:relative;background:none;border:0;
  width:100%;text-align:left;cursor:pointer;font-family:inherit}
.rail__link:hover{background:rgba(255,255,255,.07);color:#fff}
.rail__link[aria-current="page"]{background:rgba(255,255,255,.1);color:#fff;font-weight:600}
.rail__link[aria-current="page"]::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;
  background:var(--token);border-radius:0 2px 2px 0}
.rail__icon{flex:0 0 20px;width:20px;height:20px}
.rail__label{opacity:0;transform:translateX(-6px);transition:opacity .16s,transform .16s}
.rail[data-expanded="true"] .rail__label{opacity:1;transform:none;transition-delay:.06s}
.rail:not([data-expanded="true"]) .rail__link{justify-content:center;padding-inline:0}
.rail:not([data-expanded="true"]) .rail__label{position:absolute;left:calc(100% + 8px);opacity:0;transform:none;
  background:var(--slate);color:#fff;padding:5px 9px;border-radius:var(--r-ctl);font-size:11px;
  pointer-events:none;z-index:20;box-shadow:0 4px 16px rgba(0,34,55,.2)}
.rail:not([data-expanded="true"]) .rail__link:hover .rail__label{opacity:1}
.rail__sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .24s cubic-bezier(.2,.7,.3,1)}
.rail__sub > ul{overflow:hidden;list-style:none;margin:0;padding:0}
.rail__parent[aria-expanded="true"] + .rail__sub{grid-template-rows:1fr}
.rail__sub .rail__link{padding-left:48px;font-size:11px;min-height:34px}
.rail__chev{margin-left:auto;width:14px;height:14px;flex:0 0 14px;transition:transform .2s;opacity:0}
.rail[data-expanded="true"] .rail__chev{opacity:1}
.rail__parent[aria-expanded="true"] .rail__chev{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){
  .icon-fx,.icon-fx::after,.rail,.rail__label,.rail__sub,.rail__chev{transition:none!important;animation:none!important}
  .icon-fx--ring:hover::after{opacity:1;transform:scale(1.2)}
}

/* ===== Modal — Codrops "Super Scaled" on native <dialog> ===== */
.modal{--modal-scale:2;width:min(92vw,560px);max-height:85vh;padding:0;border:0;
  border-radius:var(--r-card);background:var(--paper);color:var(--muted);
  box-shadow:0 18px 50px rgba(0,34,55,.28);opacity:0;transform:scale(var(--modal-scale))}
.modal[open]{opacity:1;transform:scale(1)}
.modal::backdrop{background:rgba(0,34,55,.55);opacity:0}
@supports (transition-behavior: allow-discrete){
  .modal{transition:opacity .3s cubic-bezier(.2,.7,.3,1),transform .3s cubic-bezier(.2,.7,.3,1),
    overlay .3s allow-discrete,display .3s allow-discrete}
  .modal::backdrop{transition:opacity .3s,overlay .3s allow-discrete,display .3s allow-discrete}
  .modal[open]::backdrop{opacity:1}
  @starting-style{.modal[open]{opacity:0;transform:scale(var(--modal-scale))}
    .modal[open]::backdrop{opacity:0}}
}
.modal[data-closing]{opacity:0;transform:scale(var(--modal-scale));transition:opacity .25s,transform .25s}
.modal--calm{--modal-scale:1.35}
.modal--sm{width:min(92vw,420px)}
.modal__head{display:flex;align-items:flex-start;gap:12px;padding:18px 20px 12px;border-bottom:1px solid var(--line)}
.modal__title{font-size:16px;margin:0;flex:1;font-family:var(--f-d);color:var(--slate)}
.modal__body{padding:18px 20px;overflow-y:auto;max-height:55vh;font-size:12.5px}
.modal__foot{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;padding:12px 20px 18px}
.modal__close{flex:0 0 32px;width:32px;height:32px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;background:none;border:0;color:var(--quiet);
  cursor:pointer;font-size:19px;line-height:1}
.modal__close:hover{background:var(--s1);color:var(--muted)}
.modal--danger .modal__head{border-bottom-color:var(--full)}
.modal--danger .modal__title{color:var(--full)}
.codeblk{background:var(--ink);color:#b7bbc8;border-radius:var(--r-ctl);padding:12px 14px;
  font:400 11px/1.65 var(--f-m);overflow-x:auto;margin:10px 0 0;white-space:pre}
.mono{font-family:var(--f-m);font-size:.95em}
@media (prefers-reduced-motion:reduce){
  .modal,.modal[data-closing]{transform:none!important;transition:opacity .15s!important}
}

/* ===== Booker shell — dark step rail + calendar pane (reference 2) ===== */
.booker{display:grid;gap:0;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-card);overflow:hidden}
/* Container queries, not viewport. The booker sits inside a preview frame
   that is narrower than the window, so a viewport query made it go
   two-column with nowhere near the room for it. */
.bookerwrap{container-type:inline-size}
@container (min-width:600px){ .booker{grid-template-columns:200px minmax(0,1fr)} }
.booker__rail{background:var(--ink);color:#b7bbc8;padding:18px 14px}
.booker__rail .step__label{color:#b7bbc8;white-space:normal;font-size:11.5px}
.booker__rail .step[data-state="active"] .step__label{color:#fff}
.booker__rail .step[data-state="completed"] .step__label{color:#b7bbc8}
.booker__rail .step__icon{background:rgba(255,255,255,.14);color:#b7bbc8}
.booker__rail .step[data-state="active"] .step__icon{background:var(--paper);color:var(--ink)}
.booker__rail .step[data-state="completed"] .step__icon{background:var(--available);color:var(--paper)}
.booker__rail .step[data-state="completed"] .step__content{border-left-color:var(--available)}
.booker__foot{margin-top:24px;font-size:10.5px;color:var(--on-dark-quiet);line-height:1.7}
.booker__foot a{color:#b7bbc8}
.booker__main{padding:16px 18px}
.booker__panes{display:grid;gap:18px}
/* Under ~430px of calendar the free-count will not fit in a cell, so the
   tiles fall back to plain numbers rather than wrapping to two lines. */
@container (max-width:760px){
  .cal--tiles .cal__day{min-height:44px}
  .cal--tiles .cal__count{display:none}
}
.booker__done{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:var(--s1);border-radius:var(--r-ctl);padding:8px 11px;font-size:11.5px;margin:0 0 14px}
.booker__done b{color:var(--slate)}

/* ===== Booker step rail — row list (reference 2) =====
   Five steps with a connector spine is a lot of machinery for something
   that only has to say where you are and what you already chose. The
   reference uses rows with the mark on the right and a divider between,
   which also leaves room to list the chosen values under a done step. */
.bsteps{list-style:none;margin:0;padding:0}
.bstep{border-bottom:1px solid rgba(255,255,255,.1);position:relative}
.bstep:last-child{border-bottom:0}
.bstep__row{display:flex;align-items:center;gap:10px;min-height:44px;padding:2px 0}
.bstep__name{flex:1;min-width:0;font-size:12px;color:#8f8ba4;line-height:1.3}
.bstep__mark{flex:0 0 18px;width:18px;height:18px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.22);display:inline-flex;align-items:center;
  justify-content:center;font-size:10px;line-height:1;color:transparent}
.bstep[data-state="completed"] .bstep__name{color:#b7bbc8}
.bstep[data-state="completed"] .bstep__mark{background:var(--available-dark);
  border-color:var(--available-dark);color:var(--paper)}
.bstep[data-state="active"]{background:rgba(255,255,255,.06);
  box-shadow:inset 2px 0 0 var(--paper);margin-inline:-14px;padding-inline:14px}
.bstep[data-state="active"] .bstep__name{color:#fff;font-weight:600}
.bstep[data-state="active"] .bstep__mark{border-width:2px;border-color:var(--paper);
  box-shadow:0 0 0 3px rgba(255,255,255,.1)}
/* chosen values, listed under the step that captured them */
.bstep__values{list-style:none;margin:-2px 0 10px;padding:0;font-size:10.5px;
  color:var(--on-dark-quiet);line-height:1.8}
.bstep__hint{margin:-2px 0 10px;font-size:10.5px;color:#b7bbc8;line-height:1.6}
.bstep__edit{font-size:10.5px;color:#b7bbc8;text-decoration:underline;cursor:pointer}

/* ===== App shell — expanded rail beside the booking content =====
   The rail is a desktop component (the styleguide says so), but "desktop"
   here means the shell's own width, not the window's: the sheet draws this
   inside a frame, and the production page inside a container. */
.shellwrap{container-type:inline-size}
.appshell{display:grid;gap:0;align-items:stretch;min-height:100%}
.appshell__rail{display:none}
.appshell__main{min-width:0}
@container (min-width:1000px){
  .appshell{grid-template-columns:248px minmax(0,1fr)}
  .appshell__rail{display:flex}
}

/* ===== Menu as a popover — the standard menu, given a trigger ===== */
.menuwrap{position:relative}
.menu__trigger{display:inline-flex;align-items:center;gap:8px;min-height:36px;
  padding:8px 11px;border:1px solid var(--line);border-radius:var(--r-ctl);
  background:var(--paper);color:var(--muted);font:400 13px var(--f-b);cursor:pointer}
.menu__trigger:hover{border-color:var(--cyan);color:var(--cyan)}
.menu__trigger[aria-expanded="true"]{border-color:var(--cyan);color:var(--cyan)}
.menu__chev{width:14px;height:14px;transition:transform .18s}
.menu__trigger[aria-expanded="true"] .menu__chev{transform:rotate(180deg)}
.menuwrap .menu{position:absolute;top:calc(100% + 5px);left:0;z-index:30}
.menu[hidden]{display:none}
.menu__item{cursor:pointer}
.menu__item.dis{cursor:not-allowed}

/* ===== fill icons used as toggles — the sweep stays up when pressed ===== */
.icon-fx[aria-pressed]{appearance:none;border:0;cursor:pointer}
.icon-fx--fill[aria-pressed="true"]{color:var(--paper)}
.icon-fx--fill[aria-pressed="true"]::after{transform:translateY(0)}
.iconrow--toolbar{gap:7px;margin:0}

/* ===== the vertical stepper, on the ink rail =====
   available is 1.31:1 on ink, so the completed icon and the spine both use
   the lifted value instead. */
.booker__rail .stepper[data-orientation="vertical"] .step:not(:last-child)::after{
  background:rgba(255,255,255,.2);opacity:1}
.booker__rail .stepper[data-orientation="vertical"] .step[data-state="completed"]:not(:last-child)::after{
  background:var(--available-dark)}
.booker__rail .step[data-state="completed"] .step__icon{background:var(--available-dark);color:var(--paper)}
/* The generic vertical-stepper rule carries an attribute selector, so a
   plain .booker__rail .step__content never reached it. Match its depth. */
.booker__rail .stepper[data-orientation="vertical"] .step__content{
  color:var(--on-dark-quiet);font-size:10.5px;padding-bottom:14px;line-height:1.7;
  margin-left:10px;padding-left:14px}
.booker__rail .stepper[data-orientation="vertical"] .step__content a{color:var(--on-dark)}
.booker__rail .step__head{min-height:26px}
/* step content needs more room than the row list did */
@container (min-width:600px){ .booker{grid-template-columns:238px minmax(0,1fr)} }

.mstep--compact{display:none}
@container (max-width:599px){
  .mstep--compact{display:flex;margin:0 0 12px}
  .booker__rail{display:none}
}
.cal,.booker__main .day{max-width:760px}
.cal--dots .cal__day{min-height:58px}
.caldot-key{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}
.caldot{width:6px;height:6px;border-radius:50%;background:var(--available);display:inline-block}
.caldot--none{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
/* a filtered-out session band */
.slotgroup[hidden]{display:none}
.cal__month{font:600 13px var(--f-d);color:var(--slate)}

/* ===== MUI Tabs — tablist, indicator under the selected tab =====
   Sessions were a filter you had to discover; as tabs they are the primary
   way through the slot list, and only one band's times are on screen. */
.tabs{display:flex;border-bottom:1px solid var(--line);margin:0 0 14px;
  overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{appearance:none;background:none;border:0;cursor:pointer;position:relative;
  display:inline-flex;flex-direction:column;align-items:flex-start;gap:3px;
  padding:10px 16px;min-height:48px;white-space:nowrap;
  font:600 13px/1.2 var(--f-b);color:var(--quiet)}
.tab:hover:not([disabled]){color:var(--cyan);background:var(--s1)}
.tab[aria-selected="true"]{color:var(--cyan)}
.tab[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;
  height:2px;background:var(--cyan)}
.tab__meta{font:400 10.5px/1 var(--f-m);color:var(--quiet);font-weight:400}
.tab[aria-selected="true"] .tab__meta{color:var(--cyan)}
.tab[disabled]{color:var(--quiet);opacity:.55;cursor:not-allowed}
.tabpanel[hidden]{display:none}
.tabpanel:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* ===== Clinic picker — radio cards, replacing the grey confirmation strip =====
   The consultant sits at two clinics and one of them is shut today. That is a
   choice, so it is drawn as one, with the closed branch present and labelled
   rather than mentioned in a sentence underneath. */
.clinicpick{display:grid;gap:10px;margin:0 0 14px}
@container (min-width:620px){ .clinicpick{grid-template-columns:1fr 1fr} }
.clinicopt{position:relative;display:flex;gap:11px;align-items:flex-start;width:100%;
  border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper);
  padding:12px 13px;cursor:pointer;text-align:left;font:inherit;color:inherit;
  appearance:none;transition:border-color .15s,box-shadow .15s,background .15s}
.clinicopt:hover:not([disabled]){border-color:var(--cyan);background:var(--s1)}
.clinicopt[aria-checked="true"]{border-color:var(--cyan);box-shadow:inset 0 0 0 1px var(--cyan)}
.clinicopt[disabled]{cursor:not-allowed;background:var(--s1);border-style:dashed}
.clinicopt__mark{flex:0 0 18px;width:18px;height:18px;margin-top:2px;border-radius:50%;
  border:1.5px solid var(--line);background:var(--paper)}
.clinicopt[aria-checked="true"] .clinicopt__mark{border:5px solid var(--cyan)}
.clinicopt[disabled] .clinicopt__mark{border-style:dashed}
.clinicopt__body{flex:1;min-width:0}
.clinicopt__name{display:block;font:600 14px/1.25 var(--f-d);color:var(--slate)}
.clinicopt__sub{display:block;font-size:11.5px;color:var(--quiet);margin:3px 0 0}
.clinicopt__state{display:block;font:500 11.5px/1.3 var(--f-m);margin:7px 0 0;color:var(--available)}
.clinicopt__state.shut{color:var(--full)}

/* ===== Segmented control — the visit type, no longer behind a dropdown ===== */
.segwrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.segwrap__label{font:500 11.5px var(--f-b);color:var(--quiet)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-ctl);
  overflow:hidden;background:var(--paper)}
.seg__opt{appearance:none;border:0;background:none;cursor:pointer;text-align:left;
  padding:7px 13px;min-height:40px;font:600 12.5px/1.2 var(--f-b);color:var(--muted);
  display:inline-flex;flex-direction:column;justify-content:center;gap:2px}
.seg__opt + .seg__opt{border-left:1px solid var(--line)}
.seg__opt:hover[aria-checked="false"]{background:var(--s1);color:var(--cyan)}
.seg__opt[aria-checked="true"]{background:var(--slate);color:#fff}
.seg__fee{font:400 10.5px/1 var(--f-m);font-weight:400}

/* ===== Summary below the slots, so the calendar keeps the full width ===== */
.summary--bar{margin-top:16px}
.summary--bar dl{display:grid;gap:8px 18px;grid-template-columns:repeat(2,1fr);margin:0}
.summary--bar .summary__row{display:block;padding:0}
.summary--bar .summary__row dt{font-size:10.5px}
.summary--bar .summary__row dd{text-align:left;margin:2px 0 0;font-size:13px}
.summary--bar .summary__act{margin-top:14px}
.summary--bar .summary__act .btn{width:100%;text-align:center}
@container (min-width:620px){
  .summary--bar{display:flex;align-items:flex-end;gap:14px 20px;flex-wrap:wrap}
  .summary--bar h3{flex-basis:100%;margin-bottom:10px}
  .summary--bar dl{flex:1 1 100%;grid-template-columns:repeat(6,minmax(0,1fr))}
  .summary--bar .summary__act{flex:0 0 auto;margin:0 0 0 auto;display:flex;
    align-items:center;gap:14px}
  .summary--bar .summary__act .btn{flex:0 0 132px;width:auto}
  .summary--bar .summary__act p{margin:0;flex:0 1 230px;order:-1;text-align:right}
}

/* ===== Booking flow — step headings, department chips, consultant cards ===== */
.pickhead{display:flex;align-items:center;gap:10px;margin:0 0 9px;
  font:600 11px/1 var(--f-b);color:var(--quiet);letter-spacing:.06em;text-transform:uppercase}
.pickhead::after{content:"";flex:1;height:1px;background:var(--line);opacity:.4}
.pickhead + *{margin-top:0}
* + .pickhead{margin-top:20px}

.chiprow{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 12px}
.chipopt{appearance:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  padding:8px 13px;min-height:38px;border:1px solid var(--line);border-radius:20px;
  background:var(--paper);color:var(--muted);font:500 12.5px/1 var(--f-b)}
.chipopt:hover[aria-checked="false"]{border-color:var(--cyan);color:var(--cyan);background:var(--s1)}
.chipopt[aria-checked="true"]{background:var(--cyan);border-color:var(--cyan);color:var(--paper)}
.chipopt__n{font:500 10.5px/1 var(--f-m);padding:3px 6px;border-radius:10px;
  background:var(--s1);color:var(--quiet)}
.chipopt[aria-checked="true"] .chipopt__n{background:rgba(255,255,255,.22);color:var(--paper)}
.chipopt[hidden]{display:none}

.docpick{display:grid;gap:9px;margin:0 0 14px}
@container (min-width:620px){ .docpick{grid-template-columns:1fr 1fr} }
.docopt{appearance:none;cursor:pointer;display:flex;gap:11px;align-items:flex-start;width:100%;
  text-align:left;font:inherit;color:inherit;padding:11px 12px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-card);
  transition:border-color .15s,box-shadow .15s,background .15s}
.docopt:hover[aria-checked="false"]{border-color:var(--cyan);background:var(--s1)}
.docopt[aria-checked="true"]{border-color:var(--cyan);box-shadow:inset 0 0 0 1px var(--cyan)}
.docopt[hidden]{display:none}
.docopt__av{flex:0 0 38px;width:38px;height:38px;border-radius:50%;background:var(--s1);
  color:var(--cyan);display:inline-flex;align-items:center;justify-content:center;
  font:600 12.5px/1 var(--f-b)}
.docopt[aria-checked="true"] .docopt__av{background:var(--cyan);color:var(--paper)}
.docopt__body{flex:1;min-width:0}
.docopt__name{display:block;font:600 13.5px/1.25 var(--f-d);color:var(--slate)}
.docopt__sub{display:block;font-size:11.5px;color:var(--quiet);margin:2px 0 0}
.docopt__state{display:block;font:500 11px/1.4 var(--f-m);color:var(--available);margin:5px 0 0}

/* ===== The summary sticks to the bottom of the booker =====
   Next was below a month grid and three slot tabs — far enough down that it
   read as missing. Sticky keeps it in view without taking the calendar's width. */
.summary--bar{position:sticky;bottom:0;z-index:5;background:var(--paper);
  box-shadow:0 -6px 14px -10px rgba(0,34,55,.5)}
.summary--bar .summary__act p{font-size:11px;color:var(--quiet)}

/* ===== Details page — the booking so far, and the form ===== */
.recap{display:flex;gap:11px;align-items:flex-start;background:var(--s1);
  border-radius:var(--r-card);padding:12px 13px;margin:0 0 16px}
.recap__av{flex:0 0 38px;width:38px;height:38px;border-radius:50%;background:var(--cyan);
  color:var(--paper);display:inline-flex;align-items:center;justify-content:center;
  font:600 12.5px/1 var(--f-b)}
.recap__body{flex:1;min-width:0;font-size:12px;line-height:1.55}
.recap__body b{color:var(--slate)}
.recap__body span{display:block;color:var(--quiet)}
.formgrid{display:grid;gap:0 16px;grid-template-columns:1fr}
@container (min-width:620px){ .formgrid{grid-template-columns:1fr 1fr} }
.trustlist{list-style:none;margin:16px 0 0;padding:0;font-size:12px;color:var(--quiet)}
.trustlist li{padding:4px 0 4px 22px;position:relative}
.trustlist li::before{content:"";position:absolute;left:3px;top:10px;width:9px;height:9px;
  border-radius:50%;background:var(--available)}
.err{color:var(--full);font-size:12px}

/* ===== Booking calendar ===== */
.cal__bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.cal__nav{display:flex;gap:4px;margin-left:auto}
.cal__nav button{width:34px;height:34px;border:1px solid var(--line);background:var(--paper);
  border-radius:var(--r-ctl);color:var(--muted);cursor:pointer;display:inline-flex;
  align-items:center;justify-content:center}
.cal__nav button:hover{background:var(--s1);color:var(--cyan)}
.cal__tz{font-size:11px;color:var(--quiet);width:100%;margin:0}
.cal__legend{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.cal__legend .lbl{font-size:11px;color:var(--quiet)}
.band{display:inline-flex;align-items:center;padding:4px 8px;border-radius:var(--r-ctl);
  font:500 11px/1 var(--f-b);border:1px solid transparent}
.band.band--open{background:var(--free-fill);color:var(--available);border-color:var(--available)}
.band.band--few{background:var(--s1);color:var(--muted);border-color:var(--line)}
.band.band--none{background:var(--full-fill);color:var(--full);border-color:var(--full)}
.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal__dow{text-align:center;padding:6px 0;font:600 10px var(--f-b);color:var(--quiet);letter-spacing:.04em}
.cal__day{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:38px;padding:6px 2px;background:var(--paper);border:1px solid transparent;
  border-radius:var(--r-ctl);font:500 12px var(--f-m);color:var(--muted);cursor:pointer}
.cal__day:hover{background:var(--s1)}
.cal__day[aria-selected="true"]{background:var(--slate);color:#fff;border-color:var(--slate);font-weight:600}
.cal__day[data-today]:not([aria-selected="true"]){box-shadow:inset 0 0 0 1px var(--cyan)}
.cal__day[disabled],.cal__day[data-outside]{color:var(--quiet);opacity:.45;cursor:default;background:none}
.cal--dots .cal__day::after{content:"";width:4px;height:4px;border-radius:50%;background:transparent;margin-top:3px}
.cal--dots .cal__day[data-band="open"]::after,.cal--dots .cal__day[data-band="few"]::after{background:var(--available)}
.cal--dots .cal__day[aria-selected="true"]::after{background:#fff}
.cal--tiles .cal__day{min-height:54px;border-color:var(--line);gap:2px}
.cal--tiles .cal__day[data-band="open"]{background:var(--free-fill);border-color:var(--available);color:var(--available)}
.cal--tiles .cal__day[data-band="few"]{background:var(--paper);border-color:var(--line)}
.cal--tiles .cal__day[data-band="none"]{background:var(--full-fill);border-color:var(--full-fill);color:var(--full)}
.cal--tiles .cal__day[aria-selected="true"]{background:var(--slate);border-color:var(--slate);color:#fff}
.cal__count{font:400 9px/1 var(--f-b);opacity:.85}
.slotgroup + .slotgroup{margin-top:16px}
.slotgroup__label{display:flex;align-items:baseline;gap:8px;font:600 12px var(--f-b);
  color:var(--muted);margin:0 0 8px}
.slotgroup__label span{font:400 10.5px var(--f-m);color:var(--quiet)}
.slotgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:7px}
.slotgrid .slot,.slotgrid .chip{min-width:0;width:100%}
.summary{border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper);padding:14px}
.summary h3{font-size:14px;padding-bottom:10px;border-bottom:1px solid var(--line);margin:0 0 6px;
  font-family:var(--f-d);color:var(--slate)}
.summary dl{margin:0}
.summary__row{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:12px}
.summary__row dt{color:var(--quiet);margin:0}
.summary__row dd{margin:0;text-align:right;font-weight:500}
.summary__fee{font:600 14px var(--f-m);color:var(--slate)}
/* ===== Slot buttons =====
   These were rendering as unstyled <button>s — browser-default Arial, a black
   2px border, and no selected state at all, so choosing a time changed nothing
   on screen. Same grammar as .chip, which is what they replaced. */
.slot{appearance:none;cursor:pointer;font:500 12px/1 var(--f-m);padding:11px 10px;
  border:1px solid var(--line);border-radius:var(--r-ctl);min-width:78px;text-align:center;
  background:var(--paper);color:var(--muted);
  transition:background .14s,border-color .14s,color .14s}
.slot:hover:not([disabled]):not([aria-pressed="true"]){border-color:var(--cyan);
  color:var(--cyan);background:var(--s1)}
.slot--next{background:var(--free-fill);border-color:var(--available);
  color:var(--available);font-weight:600}
.slot[aria-pressed="true"]{background:var(--slate);border-color:var(--slate);
  color:#fff;font-weight:600}
.slot[disabled]{cursor:not-allowed;color:var(--quiet);background:var(--s2);
  border-color:var(--line);text-decoration:line-through}
.slot[aria-disabled="true"],.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}

/* ===== MUI layout — Container / Grid / Stack ===== */
.mgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.c12{grid-column:span 12}.c8{grid-column:span 8}.c6{grid-column:span 6}
.c4{grid-column:span 4}.c3{grid-column:span 3}.c9{grid-column:span 9}
.mstack{display:flex;flex-direction:column;gap:12px}
.mstack--row{flex-direction:row;flex-wrap:wrap;align-items:center}
.mstack__div{align-self:stretch;background:var(--line);opacity:.5;width:1px}

.field{margin:0 0 11px}
.field label{display:block;font-size:11.5px;margin:0 0 4px;font-weight:500}
.inp{border:1px solid var(--line);border-radius:var(--r-ctl);padding:10px 11px;font-size:13px;color:var(--quiet);background:var(--paper)}
.inp.pre{display:flex;align-items:center;padding:0}
.inp.pre b{font:500 13px var(--f-m);background:var(--s1);color:var(--muted);padding:10px 9px;border-right:1px solid var(--line)}
.inp.pre span{padding:10px 11px}
.otp{display:flex;gap:8px}
.otp i{width:44px;height:50px;border:1px solid var(--line);border-radius:var(--r-ctl);display:flex;align-items:center;justify-content:center;font:600 19px var(--f-m);font-style:normal;background:var(--paper)}
.otp i.f{border-color:var(--cyan);box-shadow:0 0 0 2px var(--free-fill)}

.note{border-left:4px solid var(--cyan);background:var(--s1);padding:11px 13px;border-radius:0 var(--r-ctl) var(--r-ctl) 0;font-size:12.5px}
.note.warn{border-left-color:var(--token);background:var(--token-fill)}
.note.bad{border-left-color:var(--full);background:var(--full-fill)}
.note b{display:block;margin:0 0 3px;color:var(--slate)}
.lnk{color:var(--cyan);font-weight:600}

.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl th{background:var(--slate);color:#fff;text-align:left;padding:9px 11px;font-weight:600;font-size:12px}
.tbl td{border-bottom:1px solid var(--line);padding:9px 11px;vertical-align:top}
.tbl tr:nth-child(even) td{background:var(--s1)}

.foot{background:var(--ink);color:#b7bbc8;padding:16px 22px;font-size:11.5px}
.foot .fg{display:flex;gap:30px;flex-wrap:wrap}
.foot b{color:#fff;display:block;margin:0 0 5px;font-size:11.5px}

.sticky{display:flex;gap:7px;padding:9px 11px;background:var(--paper);border-top:1px solid var(--line);position:sticky;bottom:0}
.sticky .btn{flex:1;text-align:center}

.rule{height:1px;background:var(--line);opacity:.45;margin:18px 0}
.stat{font:600 26px/1 var(--f-m);color:var(--cyan)}
.hr-sec{background:var(--s1)}
.dark{background:var(--ink);color:#b7bbc8}
.dark h3,.dark h4{color:#fff}
.band{background:var(--wash);color:#fff;padding:14px 18px;border-radius:var(--r-card)}
.band h4{color:#fff}
.press{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:11px;color:var(--quiet)}
.press i{font-style:normal;border:1px solid var(--line);padding:6px 9px;border-radius:3px;background:var(--paper);color:var(--muted)}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--s1);color:var(--cyan);display:flex;align-items:center;justify-content:center;font:600 12px var(--f-b);flex:0 0 34px}
.tm{display:flex;gap:10px}
.tm p{margin:0;font-size:12.5px}
.tm cite{display:block;font-style:normal;font-size:11.5px;color:var(--quiet);margin:5px 0 0}
.sw{height:52px;border-radius:6px;border:1px solid var(--line)}
px;border:1px solid var(--line)}

/* ==========================================================================
   SITE LAYER
   The rules above came out of the mockup sheet, where every page sat inside
   a fixed-width device frame. These are the rules a real page needs instead:
   a document shell, a navigation that collapses, and the breakpoints that
   make the mockup grids survive a phone.
   Breakpoints follow Material UI: sm 600, md 900, lg 1200.
   ========================================================================== */

html{-webkit-text-size-adjust:100%}
body{background:var(--paper);min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
img,svg,video{max-width:100%}
p{margin:0 0 10px}
p:last-child{margin-bottom:0}

.skip{position:absolute;top:0;left:0;z-index:100;background:var(--slate);color:#fff;
  padding:10px 14px;border-radius:0 0 var(--r-ctl) 0;font:600 13px var(--f-b);text-decoration:none;
  clip-path:inset(50%);white-space:nowrap}
.skip:focus{clip-path:none}

/* ---- horizontal rhythm ---------------------------------------------- */
.container{width:100%;max-width:1180px;margin-inline:auto;padding-inline:clamp(16px,4vw,28px)}
.sect{padding:clamp(22px,4vw,34px) 0}
.sect--tint{background:var(--s1)}
.sect--flush{padding-top:0}

/* ---- header ---------------------------------------------------------- */
.topbar{position:sticky;top:0;z-index:40;background:var(--paper);
  border-bottom:1px solid var(--line);padding:0}
.topbar__in{display:flex;align-items:center;gap:14px;min-height:58px}
.topbar .logo{text-decoration:none;flex:0 0 auto}
.topbar .nav{flex:1;min-width:0}
.navlist{display:flex;align-items:center;gap:clamp(10px,1.7vw,19px)}
.nav a{text-decoration:none;white-space:nowrap;padding:4px 0}
.nav a.on{color:var(--cyan);font-weight:600;box-shadow:inset 0 -2px var(--cyan)}
.topbar .quiet{text-decoration:none;white-space:nowrap}
.navtoggle{display:none;appearance:none;background:transparent;border:1px solid var(--line);
  border-radius:var(--r-ctl);width:40px;height:40px;padding:0;cursor:pointer;color:var(--slate);
  margin-left:auto}
.navtoggle svg{width:20px;height:20px;display:block;margin:auto}
.navtoggle .ic-x{display:none}
.navtoggle[aria-expanded="true"] .ic-x{display:block}
.navtoggle[aria-expanded="true"] .ic-m{display:none}

@media (max-width:900px){
  .topbar__in{flex-wrap:wrap;min-height:54px;padding-block:8px}
  .navtoggle{display:block;order:2}
  /* The panel is laid out but clipped, so opening it animates to its own
     height — no magic max-height to keep in sync with the item count. */
  .topbar .nav{order:3;flex-basis:100%;display:grid;grid-template-rows:0fr;
    transition:grid-template-rows .22s cubic-bezier(.2,.7,.3,1)}
  /* A grid item defaults to min-height:auto, so the panel never collapsed
     all the way — it sat 12px tall under the header on every page. */
  .topbar .nav > *{overflow:hidden;min-height:0}
  .topbar .nav[data-open="true"]{grid-template-rows:1fr}
  /* The padding, not the content, was holding the panel open: a border-box
     element cannot render shorter than its own padding, so 4px+8px kept
     12px on screen under every header. The spacing moves to the links. */
  .navlist{flex-direction:column;align-items:stretch;gap:0;padding:0}
  .navlist a:first-child{margin-top:4px}
  .navlist a:last-child{margin-bottom:8px}
  .navlist a{padding:11px 2px;border-bottom:1px solid var(--line);font-size:14px}
  .navlist a.on{box-shadow:none;border-left:3px solid var(--cyan);padding-left:9px}
  .topbar .quiet{order:1;margin-left:auto}
  .topbar .btn{order:1}
}
@media (prefers-reduced-motion:reduce){
  .topbar .nav{transition:none}
}

/* ---- breadcrumb on a page ------------------------------------------- */
.crumb{padding-block:9px}
.crumb .container{display:block}

/* ---- type scale ------------------------------------------------------ */
h3.big{font-size:clamp(26px,4.4vw,34px);max-width:19ch}
h3.mid{font-size:clamp(19px,2.6vw,23px)}
.lede{font-size:clamp(12px,1.6vw,13.5px)}

/* ---- grids collapse -------------------------------------------------- */
@media (max-width:1200px){
  .g6{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .grid[style*="1.35fr"]{grid-template-columns:1fr !important}
}
@media (max-width:600px){
  .g2,.g3,.g4{grid-template-columns:1fr}
  .g6{grid-template-columns:repeat(2,1fr)}
  .cta{gap:8px}
  .cta .btn{flex:1 1 100%;text-align:center}
  .press{font-size:10.5px;gap:8px}
}

/* ---- tables scroll rather than squash -------------------------------- */
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-ctl)}
.tblwrap .tbl{min-width:520px}

/* ---- real form controls ---------------------------------------------- */
input.inp,textarea.inp,select.inp{width:100%;display:block;font:400 13px/1.4 var(--f-b);
  color:var(--muted);appearance:none}
input.inp::placeholder,textarea.inp::placeholder{color:var(--quiet)}
textarea.inp{resize:vertical;min-height:72px}
.inp.pre{padding:0;overflow:hidden}
.inp.pre input{border:0;background:transparent;padding:10px 11px;flex:1;min-width:0;
  font:400 13px var(--f-b);color:var(--muted)}
.inp.pre input:focus{outline:none}
.inp:focus-within{border-color:var(--cyan);box-shadow:0 0 0 2px var(--free-fill)}
input.inp:focus-visible,textarea.inp:focus-visible{outline:none;border-color:var(--cyan);
  box-shadow:0 0 0 2px var(--free-fill)}
.field .err{color:var(--full);font-size:11.5px;margin:5px 0 0}
.field[data-invalid] .inp{border-color:var(--full);border-width:2px}
.otp input{width:44px;height:50px;border:1px solid var(--line);border-radius:var(--r-ctl);
  text-align:center;font:600 19px var(--f-m);background:var(--paper);color:var(--muted);padding:0}
.otp input:focus-visible{outline:none;border-color:var(--cyan);box-shadow:0 0 0 2px var(--free-fill)}
.otp[data-invalid] input{border-color:var(--full);border-width:2px}
button.btn{appearance:none;cursor:pointer;font:600 13px/1 var(--f-b)}
.btn[aria-disabled="true"]{background:var(--disabled);border-color:var(--disabled);color:var(--paper);
  cursor:not-allowed;pointer-events:none}
a.lnk{text-decoration:underline;cursor:pointer}

/* ---- multi-state panels (booking details → OTP, login → reset) ------- */
[data-panel][hidden]{display:none}

/* ---- footer ---------------------------------------------------------- */
.foot{padding-block:22px;margin-top:auto}
.foot a{color:var(--on-dark);text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline}
.foot .fg{gap:clamp(18px,4vw,42px)}
.foot .fg > div{flex:1 1 150px}
.foot__legal{margin:18px 0 0;padding-top:12px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;gap:14px;flex-wrap:wrap;justify-content:space-between;color:var(--on-dark-quiet)}

/* ---- mobile bottom navigation ---------------------------------------- */
.bnav--fixed{position:fixed;left:0;right:0;bottom:0;z-index:35;
  padding-bottom:env(safe-area-inset-bottom)}
@media (min-width:600px){ .bnav--fixed{display:none} }
body[data-bnav] .foot{padding-bottom:14px}

/* ---- sticky conversion bar (mobile only) ----------------------------- */
.sticky--mobile{position:fixed;left:0;right:0;bottom:0;z-index:36;
  padding-bottom:calc(9px + env(safe-area-inset-bottom));box-shadow:0 -2px 10px rgba(0,34,55,.1)}
@media (min-width:600px){ .sticky--mobile{display:none} }
body[data-sticky] .foot{padding-bottom:14px}

/* ---- the booker is its own container, so it works at any page width -- */
.bookerwrap{container-type:inline-size;max-width:1180px;margin-inline:auto}

/* ---- odds and ends --------------------------------------------------- */
.hide-sm{display:inline}
@media (max-width:600px){ .hide-sm{display:none} }
.stack-sm{display:flex;gap:10px;flex-wrap:wrap}
@media print{
  .topbar,.bnav,.sticky,.navtoggle,.skip{display:none !important}
  body{background:#fff}
  .sect{padding:10px 0}
}

/* ---- page-level helpers added by the page build ---------------------- */
.container--narrow{max-width:520px}
.panel{display:block}
.toclist{list-style:none;margin:14px 0 0;padding:0;display:flex;gap:9px;flex-wrap:wrap}
.toclist a{display:inline-block;font:500 12px/1 var(--f-b);padding:8px 11px;border:1px solid var(--line);
  border-radius:20px;background:var(--paper);color:var(--cyan);text-decoration:none}
.toclist a:hover{background:var(--free-fill);border-color:var(--available);color:var(--available)}
.tag{font:500 11px/1.3 var(--f-b);color:var(--quiet);margin:0 0 8px;text-transform:none}
.ent.idx{text-decoration:none}
.ent.idx .body{display:block}
.ent.idx .name,.ent.idx .sub{display:block}
.statepair{display:grid;gap:0}
@media (min-width:900px){ .statepair{grid-template-columns:1fr 1fr} }
code{font:500 12px var(--f-m);background:var(--s1);padding:2px 5px;border-radius:3px}


/* ---- late fixes found by the responsive sweep ------------------------ */

/* A grid item defaults to min-width:auto, so one wide child (a table, a
   long mono string) stretches its whole column past the page. */
.grid > *, .booker > *, .booker__panes > *, .booker__main{min-width:0}

/* Several mockup grids carry an inline grid-template-columns, which beats a
   stylesheet rule. On a phone the single column has to win anyway. */
@media (max-width:600px){
  .grid[style*="grid-template-columns"]{grid-template-columns:1fr !important}
}
@media (max-width:900px){
  .grid[style*="1.3fr"],.grid[style*="1.35fr"],.grid[style*=".9fr"]{grid-template-columns:1fr !important}
  .grid[style*="repeat(5"]{grid-template-columns:repeat(2,1fr) !important}
}

/* A horizontal stepper with real labels cannot stay on one line at 390px.
   Wrapping keeps icon-only steppers (the compact booking one) intact. */
@media (max-width:700px){
  .stepper[data-orientation="horizontal"]{flex-wrap:wrap;row-gap:9px}
  .stepper[data-orientation="horizontal"] .step__label{white-space:normal}
  .stepper[data-variant="alternative-label"] .step{flex:1 1 44%}
}

/* A page gives a stepper room the mockup frame did not, so a label wraps
   instead of being cut off with an ellipsis. */
.stepper[data-orientation="horizontal"] .step__label{white-space:normal;overflow:visible;
  text-overflow:clip}
.stepper[data-orientation="horizontal"] .step{align-items:flex-start}
.stepper[data-orientation="horizontal"] .step__icon{margin-top:1px}

/* The day strip's header is a two-item justify-between row; on a phone the
   clinic name and the counts collide, so let them stack. */
@media (max-width:560px){
  .dayhead{flex-wrap:wrap;gap:3px}
  .dayhead b{flex-basis:100%}
}

/* On a phone the step rail stacks above the calendar and pushes it nearly a
   screen down. Collapse it to a scrollable strip — the same information,
   56px instead of 470px. Container query, so it reacts to the booker's own
   width wherever the component is embedded. */
@container (max-width:599px){
  .booker__rail{padding:0}
  .bsteps{display:flex;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .bsteps::-webkit-scrollbar{display:none}
  .bstep{flex:0 0 auto;border-bottom:0;border-right:1px solid rgba(255,255,255,.1)}
  .bstep:last-child{border-right:0}
  .bstep__row{padding:10px 14px;gap:8px;min-height:0}
  .bstep__name{font-size:11.5px;white-space:nowrap}
  .bstep__mark{flex-basis:16px;width:16px;height:16px}
  .bstep__values,.bstep__hint,.booker__foot{display:none}
  .bstep[data-state="active"]{margin-inline:0;padding-inline:0;
    box-shadow:inset 0 -2px 0 var(--paper)}
}

/* The vertical stepper needs a column; below that the booking flow shows the
   MobileStepper progress variant instead — five steps is past the point
   where dots stay countable. */
.mstep--compact{display:none}
@container (max-width:599px){
  .mstep--compact{display:flex;margin:0 0 12px}
  .booker__rail{display:none}
}

/* ==========================================================================
   PROFILE PAGES — doctor (single and multi-location) and clinic
   ========================================================================== */

/* ---- image placeholders -------------------------------------------------
   Every one is a drop-in: replace the <div class="ph"> with an <img> of the
   stated size and nothing else changes. */
.ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:var(--s1);border:1px dashed var(--line);border-radius:var(--r-card);
  color:var(--quiet);font:500 10px/1.3 var(--f-m);text-align:center;padding:8px;
  flex:0 0 auto;overflow:hidden}
.ph svg{width:20px;height:20px;opacity:.6}
.ph b{display:block;font-weight:500;font-size:9.5px;opacity:.8}
.ph--doc{width:124px;height:124px;border-radius:50%}
.ph--docsm{width:52px;height:52px;border-radius:50%;font-size:9px;gap:2px}
.ph--docsm svg{width:15px;height:15px}
.ph--logo{width:96px;height:96px}
.ph--logosm{width:46px;height:46px;font-size:9px;gap:2px}
.ph--logosm svg{width:15px;height:15px}
.ph--map{width:100%;max-width:560px;aspect-ratio:16/10}

/* ---- identity block ----------------------------------------------------- */
.profhead{display:flex;gap:clamp(14px,2.4vw,22px);align-items:flex-start;flex-wrap:wrap}
.profhead__body{flex:1 1 320px;min-width:0}
.profhead__name{font-size:clamp(22px,3.4vw,30px);line-height:1.12;margin:0}
.profhead__qual{font:500 13px var(--f-m);color:var(--quiet);margin:5px 0 0}
.profhead__reg{font:500 12px var(--f-m);margin:4px 0 0}.profhead__reg strong{font-weight:600}
.profhead__where{font-size:13px;color:var(--muted);margin:7px 0 0}
.profhead__chips{margin:11px 0 0}
.profhead__cta{display:flex;gap:9px;flex-wrap:wrap;margin:15px 0 0;align-items:center}
.nextline{font:500 12.5px var(--f-m);color:var(--available);margin:12px 0 0}
.nextline.none{color:var(--full)}

/* ---- key facts ---------------------------------------------------------- */
.facts{display:grid;gap:12px 18px;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--line)}
.facts dt{font-size:10.5px;color:var(--quiet);margin:0}
.facts dd{margin:3px 0 0;font-size:13px;color:var(--muted)}
.facts dd b{color:var(--slate)}

/* ---- locations ---------------------------------------------------------- */
.loclist{display:grid;gap:14px}
@container (min-width:0px){ .loclist{grid-template-columns:1fr} }
@media (min-width:900px){ .loclist--two{grid-template-columns:1fr 1fr} }
.loccard{border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper);
  overflow:hidden;display:flex;flex-direction:column}
.loccard__head{display:flex;gap:12px;align-items:flex-start;padding:14px}
.loccard__name{font:600 15px/1.25 var(--f-d);color:var(--slate);display:block}
.loccard__addr{font-size:12px;color:var(--quiet);margin:4px 0 0;display:block}
.loccard__body{padding:0 14px 14px;flex:1}
.timings{width:100%;border-collapse:collapse;font-size:12.5px;margin:10px 0 0}
.timings th{text-align:left;font:500 11px var(--f-b);color:var(--quiet);padding:5px 0;width:92px}
.timings td{padding:5px 0;font-family:var(--f-m);font-size:12px;color:var(--muted)}
.timings tr + tr th,.timings tr + tr td{border-top:1px solid var(--line)}
.timings .shut{color:var(--full)}
.loccard__foot{display:flex;gap:8px;flex-wrap:wrap;padding:12px 14px;background:var(--s1)}

/* ---- services ----------------------------------------------------------- */
.svcgroup{border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper);
  margin:0 0 9px;overflow:hidden}
.svcgroup > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  padding:12px 14px;font:600 13.5px var(--f-d);color:var(--slate);min-height:46px}
.svcgroup > summary::-webkit-details-marker{display:none}
.svcgroup > summary::after{content:"";margin-left:auto;width:8px;height:8px;flex:0 0 8px;
  border-right:2px solid var(--quiet);border-bottom:2px solid var(--quiet);
  transform:rotate(45deg);transition:transform .18s}
.svcgroup[open] > summary::after{transform:rotate(-135deg)}
.svcgroup > summary:hover{background:var(--s1)}
.svcgroup__n{font:500 10.5px/1 var(--f-m);color:var(--quiet);padding:4px 7px;
  background:var(--s1);border-radius:10px}
.svcgroup[open] .svcgroup__n{background:var(--free-fill);color:var(--available)}
.svclist{list-style:none;margin:0;padding:0 14px 14px;display:grid;gap:3px 16px;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.svclist li{font-size:12.5px;padding:4px 0;border-bottom:1px solid var(--line)}
.svclist a{color:var(--cyan);text-decoration:none}
.svclist a:hover{text-decoration:underline}

/* ---- the clinic's consultants ------------------------------------------- */
.doclist{display:grid;gap:10px;grid-template-columns:1fr}
@media (min-width:700px){ .doclist{grid-template-columns:1fr 1fr} }
@media (min-width:1100px){ .doclist{grid-template-columns:repeat(3,1fr)} }
.doccard{display:flex;gap:11px;align-items:flex-start;padding:12px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-card);text-decoration:none;color:inherit}
.doccard:hover{border-color:var(--cyan);background:var(--s1)}
.doccard__name{display:block;font:600 13.5px/1.25 var(--f-d);color:var(--slate)}
.doccard__qual{display:block;font:400 11px/1.4 var(--f-m);color:var(--quiet);margin:3px 0 0}
.doccard__dept{display:block;font-size:11px;color:var(--cyan);margin:5px 0 0;font-weight:600}

/* ---- source attribution -------------------------------------------------- */
.attrib{font-size:11px;color:var(--quiet);margin:8px 0 0;font-style:normal}
.attrib a{color:var(--cyan)}

/* ---- the booking section lives on the profile page ---------------------- */
#book{scroll-margin-top:72px}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
.pickblock[hidden]{display:none}
[data-book-none]{display:none}
[data-nobooking="true"] [data-book-none]{display:block;margin:0 0 4px}
[data-nobooking="true"] [data-book-when],
[data-nobooking="true"] .summary--bar{display:none}
.docopt[disabled]{cursor:not-allowed;background:var(--s1);border-style:dashed}
.docopt[disabled] .docopt__av{background:var(--s2);color:var(--quiet)}
.docopt__state.shut{color:var(--full)}
.tab[disabled] .tab__meta{color:var(--full)}

/* ==========================================================================
   DOCTOR CARD — the split card from the reference, in this palette
   White photo panel with the name set behind it, dark panel of labelled rows,
   and the fee on a tab that breaks the right edge. The reference is coral on
   charcoal; here the dark panel is ink and the accent is token, which is the
   one colour in this system that clears 4.5:1 on ink (4.84) and takes ink text
   back at the same ratio — so the labels and the fee tab can share it.
   ========================================================================== */
.dgrid{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:980px){ .dgrid{grid-template-columns:1fr 1fr} }

.dcard{display:grid;grid-template-columns:1fr;background:var(--paper);
  border-radius:var(--r-card);box-shadow:0 14px 30px -18px rgba(0,34,55,.55);
  overflow:visible;position:relative}
@media (min-width:560px){ .dcard{grid-template-columns:36% minmax(0,1fr)} }

.dcard__photo{position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;padding:26px 16px;background:var(--paper);
  border-radius:var(--r-card) 0 0 var(--r-card);min-height:210px}
@media (max-width:559px){ .dcard__photo{border-radius:var(--r-card) var(--r-card) 0 0} }
.dcard__photo .ph{box-shadow:0 8px 18px -12px rgba(0,34,55,.6)}
.dcard__first{font:400 clamp(20px,3vw,27px)/1 var(--f-d);letter-spacing:.06em;
  color:var(--s2);text-transform:uppercase;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:100%}

.dcard__body{position:relative;background:var(--ink);color:var(--on-dark);
  padding:18px 20px 18px;border-radius:0 var(--r-card) var(--r-card) 0;overflow:hidden}
@media (max-width:559px){ .dcard__body{border-radius:0 0 var(--r-card) var(--r-card)} }
.dcard__ghost{position:absolute;top:2px;right:14px;font:700 54px/1 var(--f-d);
  letter-spacing:.04em;color:rgba(255,255,255,.055);pointer-events:none;user-select:none}

.dcard__lbl{font:600 10px/1 var(--f-b);letter-spacing:.11em;text-transform:uppercase;
  color:var(--token);margin:14px 0 5px}
.dcard__lbl:first-of-type{margin-top:0}
.dcard__head{display:flex;gap:14px;align-items:flex-start;justify-content:space-between}
.dcard__name{font:700 clamp(17px,2.1vw,19px)/1.2 var(--f-d);color:#fff;margin:0;
  position:relative;z-index:1}
.dcard__qual{font:400 12.5px/1.45 var(--f-m);color:var(--on-dark);margin:5px 0 0}
.dcard__at{font-size:12.5px;color:var(--on-dark);margin:4px 0 0;line-height:1.45}
.dcard__val{font-size:13px;color:var(--on-dark);margin:0;line-height:1.5}
.dcard__val b{color:#fff;font-weight:600}

/* the fee tab breaks the card's right edge, as in the reference */
.dcard__fee{flex:0 0 auto;text-align:right;position:relative;z-index:1}
.dcard__fee .dcard__lbl{margin:0 0 5px}
.dcard__tab{display:inline-block;background:var(--token);color:var(--ink);
  font:700 15px/1 var(--f-m);padding:9px 13px;border-radius:3px 0 0 3px;
  margin-right:-20px;position:relative;white-space:nowrap}
.dcard__tab::after{content:"";position:absolute;right:0;bottom:-5px;border-width:0 5px 5px 0;
  border-style:solid;border-color:transparent var(--ink) transparent transparent}
.dcard__tab--soft{background:rgba(255,255,255,.12);color:var(--on-dark);
  font:600 12px/1 var(--f-b);padding:9px 12px}

.dcard__chips{display:flex;flex-wrap:wrap;gap:6px}
.dcard__chip{font:500 11.5px/1 var(--f-b);padding:7px 11px;border-radius:20px;
  background:rgba(255,255,255,.1);color:var(--on-dark)}
.dcard__act{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:16px 0 0;
  padding:14px 0 0;border-top:1px solid rgba(255,255,255,.12)}
.dcard__act .btn.p{background:var(--token);color:var(--ink);border-color:var(--token)}
.dcard__act .btn.s{background:transparent;color:var(--on-dark);
  border-color:rgba(255,255,255,.3)}
.dcard__act .btn.s:hover{border-color:#fff;color:#fff}

/* ---- listing furniture --------------------------------------------------- */
.filterbar{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;
  padding:14px 16px;background:var(--s1);border-radius:var(--r-card);margin:0 0 18px}
.filterbar label{display:block;font:600 10.5px/1 var(--f-b);letter-spacing:.06em;
  text-transform:uppercase;color:var(--quiet);margin:0 0 5px}
.filterbar select{min-width:160px}
.filterbar__count{margin-left:auto;font:500 12px var(--f-m);color:var(--quiet)}
.faqlist{display:grid;gap:8px}
.faqitem{border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper)}
.faqitem > summary{list-style:none;cursor:pointer;display:flex;gap:12px;align-items:flex-start;
  padding:13px 15px;font:600 13.5px/1.4 var(--f-d);color:var(--slate);min-height:46px}
.faqitem > summary::-webkit-details-marker{display:none}
.faqitem > summary::after{content:"";margin-left:auto;margin-top:5px;flex:0 0 8px;
  width:8px;height:8px;border-right:2px solid var(--quiet);border-bottom:2px solid var(--quiet);
  transform:rotate(45deg);transition:transform .18s}
.faqitem[open] > summary::after{transform:rotate(-135deg)}
.faqitem > summary:hover{background:var(--s1)}
.faqitem p{margin:0;padding:0 15px 15px;font-size:11px;color:var(--muted);max-width:72ch}