/* Shortlist UI: BobWork "AOS" design system, copied from CalendarForm (see its header for component classes). Shortlist additions at the end. */
/* CalendarForm UI: BobWork "AOS" design system.
 *
 * Component classes (shared by every route file, incl. setup.ts and local.ts):
 *   Layout   .wrap (1180px) .wrap.narrow (680px) .section .section-head .grid (auto-fill 260px) .grid-2 .grid-3 .row .stack .split
 *   Type     h1-h3 (Bricolage) .lead .eyebrow[.blue|.amber|.green|.pink|.purple] .mono .small .muted .count[.amber…] .crumbs
 *   Surfaces .card (18px, white) a.card/.card.hover (link card) .panel (wash, 14px) .device > .device-bar(.dots .device-title .device-meta) + .device-body
 *   Pills    .pill[.green|.amber|.pink|.purple|.grey|.off] = wash status badge (Mono 700); default blue
 *            .pill-outline = white clickable/filter pill (Sans 600); wrap several in .pills
 *   Buttons  .btn (blue pill) .btn.ghost (white outline) .btn.dark (ink) .btn.danger .btn.sm .btn.lg; group in .btns; button.link
 *   Data     .stat > .stat-l + .stat-n   .meter(.warn) > span   table (th = Mono eyebrow) inside .table-scroll   td.mono/.ts   .empty
 *   Forms    label input select textarea fieldset .check .hint .field-row .otp
 *   Modules  .m-blue|.m-amber|.m-green|.m-pink|.m-purple on a card sets --m/--m-wash/--m-ink; children .m-icon .eyebrow.m .ticks
 *   Booking  .biz-head .avatar  .days > a(.on|.none) > .d-w .d-n .d-s   .slots > a(.left)   .svc  .summary .when  .powered .done-mark
 *   App      .shell > .side(.brand .side-h a.nav(.on) .side-foot) + .main   .page-head  .linkbox  .list-card  .tabs
 *   Misc     .flash(.err) .faq(details) .steps .price .price-card.featured .cta-band .hero .hero-note .prose .foot
 *   Embed    html.embed (booking pages inside the embed.js iframe)  .slots a.full (waitlist)  .snippet (copyable code)
 */

:root {
  --ink: #16172E; --ink-soft: #43466A; --muted-deco: #7A7E9C;
  --paper: #FFFFFF; --sf2: #F9FAFD; --wash: #F5F6FB;
  --line: #E7E9F4; --line-soft: #EEF0F8; --line-strong: #C9CEEA;
  --blue: #2F54FF; --blue-deep: #1B34C7; --blue-wash: #EDF0FF; --blue-border: #D9E0FF; --blue-text: #2F54FF;
  --green: #0E9E76; --green-wash: #E9F7F1; --green-ink: #07694E;
  --purple: #7742E4; --purple-wash: #F1EBFC; --purple-ink: #5A2FB8;
  --pink: #D6467B; --pink-wash: #FBE7EF; --pink-ink: #A32B58;
  --amber: #E8A13D; --amber-wash: #FCF3E4; --amber-ink: #7A5B12;
  --red: #D34C47; --red-ink: #B3322D; --red-wash: #FBE9E8;
  --glass: rgba(255,255,255,.78);
  --shadow-card: 0 18px 34px -26px rgba(22,23,46,.35);
  --shadow-sm: 0 5px 12px -10px rgba(22,23,46,.4);
  --shadow-blue: 0 10px 22px -12px rgba(47,84,255,.7);
  --sans: "IBM Plex Sans", "Noto Sans HK", "PingFang HK", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Bricolage Grotesque", var(--sans);
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* legacy aliases (older markup) */
  --bg: var(--wash); --card: var(--paper); --muted: var(--ink-soft);
  --accent: var(--blue); --accent-ink: #FFFFFF; --accent-soft: var(--blue-wash);
  --err: var(--red-ink); --err-soft: var(--red-wash); --radius: 14px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #EDEEF7; --ink-soft: #A9AEC9;
    --paper: #14152A; --sf2: #171831; --wash: #0C0D1A;
    --line: #252846; --line-soft: #1C1E38; --line-strong: #353A63;
    --blue: #4A66F5; --blue-deep: #3A55E0; --blue-wash: #1A2050; --blue-border: #2A3478; --blue-text: #93A6FF;
    --green: #2FBF95; --green-wash: #0F2A24; --green-ink: #6FDCB8;
    --purple: #9C72F0; --purple-wash: #23193F; --purple-ink: #C3A8F7;
    --pink: #E86C98; --pink-wash: #33182A; --pink-ink: #F3A3C0;
    --amber: #E8A13D; --amber-wash: #2E2412; --amber-ink: #F0C27A;
    --red: #E8716C; --red-ink: #F49A95; --red-wash: #3A1C1E;
    --glass: rgba(20,21,42,.82);
    --shadow-card: 0 18px 34px -26px rgba(0,0,0,.8);
    --shadow-sm: 0 5px 12px -10px rgba(0,0,0,.7);
    --shadow-blue: 0 10px 22px -12px rgba(74,102,245,.6);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--wash); color: var(--ink); font: 400 15px/1.6 var(--sans); overflow-x: hidden; }
a { color: var(--blue-text); text-underline-offset: 2px; }
img, svg { max-width: 100%; }
p { margin: 0 0 12px; }
h1, h2, h3 { font-family: var(--display); color: var(--ink); margin: 0 0 10px; }
h1 { font-weight: 800; font-size: clamp(34px, 5.4vw, 52px); line-height: 1.04; letter-spacing: -0.03em; }
h2 { font-weight: 700; font-size: clamp(23px, 3vw, 28px); line-height: 1.15; letter-spacing: -0.02em; margin-top: 8px; }
h3 { font-weight: 700; font-size: 18px; line-height: 1.25; letter-spacing: -0.01em; }
ul, ol { padding-left: 20px; margin: 0 0 12px; }
li { margin: 4px 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; }

/* ---------- layout ---------- */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 26px); }
.narrow { max-width: 680px; }
.wrap.narrow { margin: 0 auto; }
main { min-height: 60vh; padding-bottom: 64px; }
.section { padding: 44px 0 8px; }
.section-head { max-width: 680px; margin-bottom: 18px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.stack > * + * { margin-top: 12px; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.grid-2 { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.split { display: grid; gap: 40px; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; }

/* ---------- type ---------- */
.lead { font-size: 17px; line-height: 1.6; color: var(--ink-soft); max-width: 640px; }
.eyebrow { display: inline-block; font: 600 11px/1.4 var(--mono); letter-spacing: 1.32px; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; }
.eyebrow.blue { color: var(--blue-text); } .eyebrow.green { color: var(--green-ink); } .eyebrow.amber { color: var(--amber-ink); }
.eyebrow.pink { color: var(--pink-ink); } .eyebrow.purple { color: var(--purple-ink); }
.mono { font-family: var(--mono); font-size: .92em; }
.small { font-size: 13.5px; }
.muted { color: var(--ink-soft); }
.count { font: 700 12.5px var(--mono); color: var(--blue-text); }
.count.amber { color: var(--amber-ink); } .count.green { color: var(--green-ink); } .count.pink { color: var(--pink-ink); } .count.purple { color: var(--purple-ink); }
.crumbs { font: 400 12px var(--mono); letter-spacing: .4px; color: var(--ink-soft); margin-bottom: 14px; }
.crumbs a { color: var(--ink-soft); }

/* ---------- header / footer ---------- */
.top { position: sticky; top: 0; z-index: 20; background: var(--glass); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); }
.top .row { min-height: 60px; flex-wrap: nowrap; }
.top nav { display: flex; gap: 4px; align-items: center; }
.top nav a { color: var(--ink-soft); text-decoration: none; font: 500 13.5px var(--sans); padding: 6px 10px; border-radius: 999px; white-space: nowrap; }
.top nav a:hover { color: var(--ink); background: var(--line-soft); }
.top nav a.btn { color: #fff; padding: 7px 14px; margin-left: 6px; }
.top nav a.btn:hover { background: var(--blue-deep); }
.brand { display: flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; flex: 0 0 auto; }
.brand .wm { font: 800 19px var(--display); letter-spacing: -0.02em; }
.brand .wm span { color: var(--blue-text); }
.foot { border-top: 1px solid var(--line); background: var(--paper); padding: 40px 0 28px; font-size: 14px; }
.foot-grid { display: grid; gap: 24px; grid-template-columns: 1.4fr repeat(3, 1fr); }
.foot h4 { font: 600 11px var(--mono); letter-spacing: 1.32px; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 10px; }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin: 6px 0; }
.foot a { color: var(--ink); text-decoration: none; }
.foot a:hover { color: var(--blue-text); }
.foot .legal { font: 400 11.5px var(--mono); color: var(--ink-soft); margin-top: 28px; letter-spacing: .3px; }

/* ---------- surfaces ---------- */
.card { display: block; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; box-shadow: var(--shadow-card); color: inherit; }
a.card, .card.hover { text-decoration: none; transition: border-color .18s ease, transform .18s ease; }
a.card:hover, .card.hover:hover { border-color: var(--blue-border); transform: translateY(-1px); }
.panel { background: var(--wash); border: 1px solid var(--line-soft); border-radius: 14px; padding: 14px 16px; }
.device { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 30px 60px -40px rgba(22,23,46,.45); overflow: hidden; }
.device-bar { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line-soft); background: var(--sf2); }
.dots { display: flex; gap: 5px; } .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); display: block; }
.device-title { font: 600 12px var(--sans); color: var(--ink-soft); }
.device-meta { margin-left: auto; font: 400 11px var(--mono); color: var(--ink-soft); }
.device-body { padding: 16px; }

/* ---------- pills / badges ---------- */
.pill { display: inline-block; font: 700 10.5px/1.5 var(--mono); letter-spacing: .5px; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--blue-wash); color: var(--blue-text); white-space: nowrap; vertical-align: middle; }
.pill.green { background: var(--green-wash); color: var(--green-ink); }
.pill.amber { background: var(--amber-wash); color: var(--amber-ink); }
.pill.pink, .pill.off { background: var(--pink-wash); color: var(--pink-ink); }
.pill.purple { background: var(--purple-wash); color: var(--purple-ink); }
.pill.grey { background: var(--line-soft); color: var(--ink-soft); }
.pill-outline { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px var(--sans); color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; text-decoration: none; white-space: nowrap; }
a.pill-outline:hover { border-color: var(--blue-border); color: var(--blue-text); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--blue); color: #fff; border: 1px solid transparent; border-radius: 999px;
  padding: 10px 18px; font: 600 14.5px/1.2 var(--sans); text-decoration: none; cursor: pointer; box-shadow: var(--shadow-blue); transition: transform .14s ease, background .14s ease; white-space: nowrap; }
.btn:hover { background: var(--blue-deep); transform: translateY(-1px); }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.btn.ghost { background: var(--paper); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn.ghost:hover { border-color: var(--blue-border); color: var(--blue-text); background: var(--paper); }
.btn.dark { background: var(--ink); color: var(--paper); box-shadow: var(--shadow-sm); }
.btn.danger { background: var(--red-ink); box-shadow: none; }
.btn.sm { padding: 7px 13px; font-size: 13px; }
.btn.lg { padding: 13px 22px; font-size: 15.5px; }
.btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 18px 0 6px; }
button.link { background: none; border: 0; color: var(--blue-text); font: 500 13.5px var(--sans); cursor: pointer; padding: 0; }
button.link.danger { color: var(--red-ink); }
form.inline { display: inline; margin: 0; }

/* ---------- forms ---------- */
label { display: block; font: 600 13.5px var(--sans); color: var(--ink); margin: 14px 0 6px; }
input, select, textarea { width: 100%; font: 400 15px var(--sans); color: var(--ink); background: var(--paper); border: 1px solid var(--line-strong); border-radius: 10px; padding: 10px 12px; transition: border-color .14s ease, box-shadow .14s ease; }
input::placeholder, textarea::placeholder { color: var(--ink-soft); opacity: .8; }
input[type=checkbox], input[type=radio] { width: 17px; height: 17px; padding: 0; accent-color: var(--blue); flex: 0 0 auto; }
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-wash); }
fieldset { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin: 14px 0 0; background: var(--paper); }
legend { padding: 0 6px; font: 600 13.5px var(--sans); }
.check { display: flex; gap: 10px; align-items: center; font-weight: 400; margin: 8px 0; }
.hint { font-size: 13px; color: var(--ink-soft); margin: 6px 0 0; }
.field-row { border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin: 10px 0; background: var(--sf2); }
.field-row .row { flex-wrap: wrap; }
.field-row .row > input { flex: 1 1 220px; }
.field-row .row > select { flex: 0 1 140px; width: auto; }
.field-actions { display: flex; gap: 14px; margin-top: 8px; }
.otp { font: 600 28px var(--mono) !important; letter-spacing: .4em; text-align: center; max-width: 260px; padding: 12px !important; }

/* ---------- feedback ---------- */
.flash { padding: 11px 14px; border-radius: 12px; background: var(--green-wash); color: var(--green-ink); font-size: 14.5px; margin: 12px 0; }
.flash.err { background: var(--red-wash); color: var(--red-ink); }
.empty { text-align: center; padding: 34px 20px; border: 1px dashed var(--line-strong); border-radius: 18px; background: var(--sf2); }
.empty h3 { margin-bottom: 4px; }
.empty p { color: var(--ink-soft); margin: 6px auto 14px; max-width: 420px; }

/* ---------- data ---------- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
th { font: 600 10.5px var(--mono); letter-spacing: 1.1px; text-transform: uppercase; color: var(--ink-soft); background: var(--sf2); }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
tbody th { font: 600 13.5px var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); background: transparent; }
.table-scroll { overflow-x: auto; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-card); margin: 0 0 16px; }
.table-scroll table { min-width: 520px; }
td.mono, .ts { font: 400 12.5px var(--mono); color: var(--ink-soft); white-space: nowrap; }
.stat { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; box-shadow: var(--shadow-card); }
.stat-n { font: 700 26px/1.1 var(--mono); letter-spacing: -0.48px; color: var(--ink); }
.stat-n small { font: 400 13px var(--mono); color: var(--ink-soft); letter-spacing: 0; }
.stat-l { font: 600 10.5px var(--mono); letter-spacing: 1.1px; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.meter { height: 6px; border-radius: 99px; background: var(--line-soft); overflow: hidden; margin: 10px 0 8px; }
.meter > span { display: block; height: 100%; background: var(--blue); border-radius: 99px; }
.meter.warn > span { background: var(--amber); }

/* ---------- module cards ---------- */
.m-blue { --m: var(--blue); --m-wash: var(--blue-wash); --m-ink: var(--blue-text); }
.m-amber { --m: var(--amber); --m-wash: var(--amber-wash); --m-ink: var(--amber-ink); }
.m-green { --m: var(--green); --m-wash: var(--green-wash); --m-ink: var(--green-ink); }
.m-pink { --m: var(--pink); --m-wash: var(--pink-wash); --m-ink: var(--pink-ink); }
.m-purple { --m: var(--purple); --m-wash: var(--purple-wash); --m-ink: var(--purple-ink); }
.m-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--m-wash, var(--blue-wash)); color: var(--m, var(--blue)); margin-bottom: 14px; }
.m-icon svg { width: 22px; height: 22px; }
.eyebrow.m { color: var(--m-ink, var(--blue-text)); font-weight: 700; }
.ticks { list-style: none; padding: 0; margin: 10px 0 0; }
.ticks li { position: relative; padding-left: 24px; margin: 7px 0; color: var(--ink-soft); font-size: 14.5px; }
.ticks li::before { content: "✓"; position: absolute; left: 2px; top: 0; font-weight: 700; color: var(--m, var(--blue)); }

/* ---------- marketing ---------- */
.hero { padding: 56px 0 24px; }
.hero h1 { max-width: 760px; }
.hero .lead { font-size: 18px; }
.hero-note { font: 400 12px var(--mono); color: var(--ink-soft); letter-spacing: .3px; margin-top: 12px; }
.mock { position: relative; }
.mock .device + .device { margin: -36px 0 0 16%; position: relative; }
.mock-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 10px; }
.mock-slots span { text-align: center; font: 600 12px var(--mono); padding: 8px 0; border-radius: 999px; border: 1px solid var(--blue-border); color: var(--blue-text); background: var(--paper); }
.mock-slots span.on { background: var(--blue); color: #fff; border-color: var(--blue); }
.mock-slots span.full { color: var(--ink-soft); border-color: var(--line); background: var(--sf2); text-decoration: line-through; }
.mock-days { display: flex; gap: 6px; }
.mock-days span { flex: 1; text-align: center; padding: 7px 0; border-radius: 10px; border: 1px solid var(--line); font: 600 11px/1.3 var(--mono); color: var(--ink-soft); }
.mock-days span b { display: block; font-size: 15px; color: var(--ink); }
.mock-days span.on { border-color: var(--blue); background: var(--blue-wash); color: var(--blue-text); }
.mock-days span.on b { color: var(--blue-text); }
.mock-field { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 13px; color: var(--ink-soft); margin-top: 6px; background: var(--paper); }
.mock-label { font: 600 12px var(--sans); color: var(--ink); margin-top: 10px; }
.mock-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.price { font: 700 34px/1 var(--mono); letter-spacing: -1px; color: var(--ink); margin: 6px 0 8px; }
.price small { font: 400 13px var(--mono); color: var(--ink-soft); letter-spacing: 0; }
.price-card.featured { border-color: var(--blue-border); box-shadow: 0 20px 42px -28px rgba(47,84,255,.55); }
.faq { margin: 0; max-width: 820px; }
.faq details { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 0 18px; margin: 0 0 8px; }
.faq summary { cursor: pointer; font: 600 15.5px var(--sans); padding: 15px 0; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 20px/1 var(--mono); color: var(--ink-soft); }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--ink-soft); margin: 0 0 16px; }
.cta-band { margin-top: 48px; background: #16172E; color: #fff; border-radius: 24px; padding: clamp(24px, 4vw, 40px); display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cta-band h2 { color: #fff; margin: 0 0 6px; }
.cta-band p { color: #C9CCE4; margin: 0; }
.cta-band .btn.ghost { background: transparent; color: #fff; border-color: #43466A; box-shadow: none; }
.cta-band .btn.ghost:hover { border-color: #93A6FF; color: #fff; }
@media (prefers-color-scheme: dark) { .cta-band { background: #1C1E38; border: 1px solid var(--line); } }
.steps { counter-reset: s; list-style: none; padding: 0; max-width: 820px; }
.steps li { counter-increment: s; position: relative; padding: 14px 16px 14px 56px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; margin: 0 0 8px; }
.steps li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 18px; top: 15px; font: 700 12.5px var(--mono); color: var(--blue-text); }
.prose { max-width: 720px; } .prose h2 { margin-top: 28px; }

/* ---------- customer booking ---------- */
.biz-head { display: flex; align-items: center; gap: 14px; padding: 28px 0 10px; }
.avatar { width: 52px; height: 52px; border-radius: 16px; background: var(--blue-wash); color: var(--blue-text); display: grid; place-items: center; font: 800 22px var(--display); flex: 0 0 auto; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.biz-head h1 { font-size: clamp(26px, 5vw, 34px); margin: 0; }
.days { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: thin; }
.days a { flex: 0 0 auto; min-width: 74px; text-align: center; padding: 9px 10px; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: var(--ink); background: var(--paper); }
.days a .d-w { display: block; font: 600 10.5px var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--ink-soft); }
.days a .d-n { display: block; font: 700 20px/1.25 var(--mono); }
.days a .d-s { display: block; font: 400 10.5px var(--mono); color: var(--green-ink); }
.days a.on { border-color: var(--blue); background: var(--blue-wash); box-shadow: 0 0 0 1px var(--blue) inset; }
.days a.on .d-w, .days a.on .d-n { color: var(--blue-text); }
.days a.none { background: var(--sf2); }
.days a.none .d-n, .days a.none .d-s { color: var(--ink-soft); }
/* Staff picker on appointment services with staff (public.ts) */
.staff-pick { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: thin; }
.staff-pick a { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border: 1px solid var(--line);
  border-radius: 999px; text-decoration: none; color: var(--ink); background: var(--paper); font: 600 14px var(--font); }
.staff-pick a.on { border-color: var(--blue); background: var(--blue-wash); box-shadow: 0 0 0 1px var(--blue) inset; color: var(--blue-text); }
.avatar.sm { width: 30px; height: 30px; border-radius: 999px; font: 700 12px var(--mono); }
.slots { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.slots a { display: block; text-align: center; padding: 11px 6px; border: 1px solid var(--blue-border); border-radius: 999px; text-decoration: none; font: 600 14px var(--mono); color: var(--blue-text); background: var(--paper); transition: background .14s ease, color .14s ease; }
.slots a .left { display: block; font: 400 10.5px var(--mono); color: var(--ink-soft); }
.slots a:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.slots a:hover .left { color: #DCE3FF; }
.svc { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.svc + .svc { margin-top: 10px; }
.svc .meta { font: 400 12px var(--mono); color: var(--ink-soft); letter-spacing: .3px; margin-top: 4px; }
.svc .go { font: 600 13px var(--sans); color: var(--blue-text); white-space: nowrap; }
.summary .when { font: 700 18px var(--mono); letter-spacing: -0.3px; }
.powered { text-align: center; font: 400 11.5px var(--mono); color: var(--ink-soft); margin-top: 28px; letter-spacing: .3px; }
.powered a { color: var(--ink-soft); }
.done-mark { width: 56px; height: 56px; border-radius: 50%; background: var(--green-wash); color: var(--green-ink); display: grid; place-items: center; margin: 28px 0 12px; }
.done-mark.off { background: var(--pink-wash); color: var(--pink-ink); }

/* ---------- app shell ---------- */
.shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.side { background: var(--paper); border-right: 1px solid var(--line); padding: 18px 12px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 2px; }
.side .brand { padding: 4px 10px 14px; }
.side-h { font: 600 11px var(--mono); letter-spacing: 1.32px; text-transform: uppercase; color: var(--ink-soft); padding: 14px 12px 6px; }
.side a.nav { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--ink-soft); text-decoration: none; font: 500 14.5px var(--sans); }
.side a.nav svg { width: 18px; height: 18px; flex: 0 0 18px; }
.side a.nav:hover { background: var(--wash); color: var(--ink); }
.side a.nav.on { background: var(--blue-wash); color: var(--blue-text); }
.side .side-foot { margin-top: auto; border-top: 1px solid var(--line-soft); padding: 12px 10px 0; }
.side .who { font: 400 11.5px var(--mono); color: var(--ink-soft); word-break: break-all; margin-bottom: 8px; }
.main { padding: 28px clamp(16px, 3vw, 36px) 64px; min-width: 0; }
.main .wrap { padding: 0; max-width: 1080px; margin: 0; }
.main .narrow { max-width: 680px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head h1 { font-size: clamp(26px, 3.4vw, 34px); margin: 0; }
.page-head .eyebrow { margin-bottom: 6px; }
.linkbox { display: inline-flex; align-items: center; gap: 10px; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 5px 5px 5px 14px; max-width: 100%; }
.linkbox code { font: 400 12.5px var(--mono); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.list-card { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.list-card + .list-card { margin-top: 10px; }
.list-card .meta { font: 400 12px var(--mono); color: var(--ink-soft); margin-top: 4px; letter-spacing: .2px; word-break: break-all; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tabs a.on { border-color: var(--ink); background: var(--ink); color: var(--paper); }

/* ---------- responsive ---------- */
@media (max-width: 920px) {
  .split { grid-template-columns: 1fr; gap: 28px; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .mock .device + .device { margin: 12px 0 0; }
  .shell { grid-template-columns: 1fr; }
  .side { z-index: 20; height: auto; flex-direction: row; align-items: center; overflow-x: auto; padding: 8px 10px; border-right: 0; border-bottom: 1px solid var(--line); gap: 2px; background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .side .brand { padding: 0 6px 0 2px; }
  .side .brand .wm, .side-h, .side .who { display: none; }
  .side a.nav { padding: 7px 10px; font-size: 13.5px; white-space: nowrap; }
  .side .side-foot { margin: 0 0 0 auto; border: 0; padding: 0 4px; }
}
@media (max-width: 680px) {
  .top nav a:not(.btn):not(.keep) { display: none; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .hero { padding-top: 36px; }
  th, td { padding: 9px 10px; }
  .card { padding: 16px; }
  .side a.nav .lbl { display: none; }
  .side a.nav { padding: 8px; }
  .main { padding-top: 20px; }
}
.card fieldset.card, .card .card { box-shadow: none; }
fieldset.card { padding: 12px 14px; border-radius: 14px; }
.day-row { display: grid; grid-template-columns: 52px minmax(0,1fr); align-items: center; gap: 10px; margin: 8px 0; }
.day-row > span { font: 600 11px var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--ink-soft); }
.choice { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
.choice label { margin: 0; display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; font-weight: 400; cursor: pointer; background: var(--paper); }
.choice label:has(input:checked) { border-color: var(--blue); background: var(--blue-wash); }
.choice label b { display: block; font-weight: 600; }
@media (max-width: 680px) { .choice { grid-template-columns: 1fr; } }
.auth { max-width: 440px; margin: 0 auto; padding: 56px 0 0; }
.auth .card { padding: 24px; }
.auth h1 { font-size: clamp(28px, 5vw, 36px); }
.auth .perks { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 6px; }
.auth .perks li { font: 400 11.5px var(--mono); letter-spacing: .6px; text-transform: uppercase; color: var(--ink-soft); }
.auth .perks li::before { content: "✓ "; color: var(--green-ink); font-weight: 700; }
.mock .device:first-child .device-body { padding-bottom: 54px; }
@media (max-width: 920px) { .mock .device:first-child .device-body { padding-bottom: 16px; } }
@media (min-width: 921px) { .shell { background: linear-gradient(90deg, var(--paper) 0 236px, var(--line) 236px 237px, transparent 237px); } .side { border-right: 0; background: transparent; } }

/* Consent banner (EEA/UK/CH visitors only; injected by src/lib/analytics.ts) */
.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50; max-width: 520px; margin: 0 auto;
  display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px;
  box-shadow: 0 18px 34px -26px rgba(22,23,46,.35); font-size: .92rem; }
.consent p { margin: 0; }

/* Waitlist: full class times */
.slots a.full { border-style: dashed; border-color: var(--amber); color: var(--amber-ink); background: var(--amber-wash); }
.slots a.full .left { color: var(--amber-ink); text-transform: uppercase; letter-spacing: .6px; }
.slots a.full:hover { background: var(--amber); color: var(--ink); border-color: var(--amber); }
.slots a.full:hover .left { color: var(--ink); }

/* Embed mode: booking pages inside the embed.js iframe. Transparent page, no outer padding, content-sized. */
html.embed, html.embed body { background: transparent; }
html.embed main { min-height: 0; padding-bottom: 8px; }
html.embed .wrap.narrow { padding-top: 12px; }
html.embed .consent { display: none; }

/* Copyable code snippet (dashboard embed card) */
.snippet { display: flex; gap: 8px; align-items: flex-start; }
.snippet pre { flex: 1; min-width: 0; margin: 0; padding: 10px 12px; background: var(--wash); border: 1px solid var(--line); border-radius: 12px;
  font: 400 12.5px/1.5 var(--mono); color: var(--ink); white-space: pre-wrap; word-break: break-all; }

/* ===================== Shortlist additions ===================== */
/* Wordmark: lowercase "shortlist", the i-dot is a gradient sparkle (founder brand kit, og.html). Stem = currentColor. */
.brand .logo { width: 30px; height: 30px; }
.brand .sl-wm { font: 800 23px var(--display); letter-spacing: -.045em; color: var(--ink); line-height: 1; }
.sl-wm .i { position: relative; display: inline-block; width: .215em; height: .53em; margin: 0 .045em; color: inherit; }
.sl-wm .i .st { position: absolute; inset: auto 0 0 0; height: .53em; background: currentColor; border-radius: .03em; }
.sl-wm .i svg { position: absolute; left: 50%; bottom: .66em; width: .4em; height: .4em; transform: translateX(-50%); }
.brand .wm span.i { color: var(--ink); }

/* Home */
.home-hero { padding-top: 64px; align-items: start; }
.home-hero h1 { font-size: clamp(32px, 4.6vw, 50px); letter-spacing: -.035em; }
.home-hero .check-form { margin-top: 22px; }
.grid-4 { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip { font: 600 11.5px var(--sans); padding: 4px 9px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); color: var(--ink-soft); }
.preview { display: block; text-decoration: none; color: inherit; padding: 22px; }
.preview-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; }
.preview h3 { margin: 0 0 2px; }
.mini-board { list-style: none; padding: 0; margin: 14px 0 12px; display: grid; gap: 10px; }
.mini-board li { display: grid; grid-template-columns: 90px 1fr 42px; gap: 10px; align-items: center; }
.mb-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.engine-dots { display: flex; flex-wrap: wrap; gap: 6px; }
.engine-dots span { font: 600 10.5px var(--mono); text-transform: uppercase; color: var(--muted-deco); }
.price-card .btn { margin-top: 12px; }
.price { font-family: var(--display); }

/* Light motion, off for people who ask for less */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.rise { animation: rise .5s ease-out both; }
.rise + .rise { animation-delay: .06s; }
.bar .fill { transform-origin: left; animation: grow .7s cubic-bezier(.2,.7,.2,1) both; }
.card.hover, a.card { transition: transform .15s ease, box-shadow .15s ease; }
a.card:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .rise, .bar .fill { animation: none; } a.card:hover { transform: none; } }

/* Leaderboard */
.stats { margin-top: 22px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.stat-l { display: block; font: 700 10.5px var(--mono); text-transform: uppercase; letter-spacing: .5px; color: var(--ink-soft); margin-bottom: 4px; }
.summary-line { font-weight: 500; color: var(--ink); }
.bar { position: relative; height: 10px; border-radius: 999px; background: var(--line-soft); overflow: hidden; min-width: 80px; }
.bar .ci { position: absolute; top: 0; bottom: 0; background: var(--blue-border); border-radius: 999px; }
.bar .fill { position: absolute; left: 0; top: 2px; bottom: 2px; background: linear-gradient(90deg, #1FB6F2, #4A5BFF 45%, #9A4DF2); border-radius: 999px; }
table.board td { vertical-align: middle; }
table.board .w-bar { min-width: 220px; }
table.board td .bar { margin-bottom: 4px; }
.heat { background: color-mix(in srgb, var(--blue) var(--h), transparent); text-align: center; }
.prompts { padding-left: 20px; display: grid; gap: 6px; }
q.prompt { quotes: "\201C" "\201D"; }
.answer { margin-bottom: 12px; }
.answer-head { gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.answer-text { white-space: pre-wrap; font-size: 14.5px; line-height: 1.55; padding: 12px 0; }
.pager { justify-content: center; gap: 14px; margin: 24px 0; }
.pill-outline.on { border-color: var(--blue); color: var(--blue-text); background: var(--blue-wash); }

/* Forms */
.cta-band .audit-form { min-width: min(100%, 320px); }
.cta-band .audit-form label { color: #C9CCE4; }
.city-form h3 { margin-top: 6px; }
.fields { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.inline-cta { margin: 18px 0; }

@media (max-width: 920px) { .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .grid-4 { grid-template-columns: 1fr; } .mini-board li { grid-template-columns: 74px 1fr 38px; } }

/* ===================== Shortlist identity (v2, 2026-10-27) =====================
   Editorial, data-first. Chalk paper, deep ink, one violet from the brand sparkle, and a highlighter
   yellow used in exactly one place: the blank in the hero sentence, where the visitor's brand goes. */
:root {
  --ink: #141833; --ink-soft: #4C516F; --muted-deco: #80849C;
  --paper: #FFFFFF; --sf2: #FAFAF7; --wash: #F4F5F1;
  --line: #E1E3DC; --line-soft: #EBECE6; --line-strong: #C6C9C0;
  --blue: #4B34D8; --blue-deep: #3722B5; --blue-wash: #EEEBFC; --blue-border: #D8D2F8; --blue-text: #4B34D8;
  --marker: #FFE45C; --marker-ink: #141833;
  --sans: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --shadow-card: none;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #ECEDF3; --ink-soft: #A6AABF; --muted-deco: #7E8299;
    --paper: #181A28; --sf2: #1C1E2D; --wash: #11121C;
    --line: #2A2C3D; --line-soft: #222433; --line-strong: #3A3D52;
    --blue: #8F7DFF; --blue-deep: #7A66F5; --blue-wash: #241F48; --blue-border: #3B3470; --blue-text: #A99BFF;
    --marker: #E8CF4A; --marker-ink: #141833;
  }
  .h-btn, .h-btn:hover { color: #141833; }
}
body { font-size: 16px; }
a { color: var(--blue-text); }
.eyebrow { font: 600 13px/1.4 var(--sans); letter-spacing: 0; text-transform: none; }
.crumbs, .foot .legal { font-family: var(--sans); letter-spacing: 0; }
.foot h4 { font: 600 14px var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); }
.card { border-radius: 12px; }

/* Header */
.top { background: color-mix(in srgb, var(--wash) 88%, transparent); }
.top nav a { font-size: 14.5px; }
.top nav a.nav-cta { color: var(--paper); background: var(--ink); margin-left: 8px; padding: 8px 16px; }
.top nav a.nav-cta:hover { background: var(--blue); color: #fff; }
@media (max-width: 680px) { .top nav a:not(.nav-cta) { display: none; } }

/* Home */
.h-wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 26px); }
.h-hero { padding: clamp(40px, 8vw, 96px) 0 clamp(36px, 6vw, 64px); border-bottom: 1px solid var(--line); }
.h-title { font: 500 clamp(17px, 1.9vw, 20px)/1.45 var(--sans); letter-spacing: 0; color: var(--ink-soft); max-width: 46ch; margin: 0 0 clamp(28px, 5vw, 48px); }
.h-asked { font-size: 15px; color: var(--ink-soft); margin: 0 0 8px; }
.h-asks { display: grid; margin-bottom: clamp(28px, 5vw, 44px); }
.h-ask { grid-area: 1 / 1; font: 700 clamp(30px, 5.2vw, 62px)/1.06 var(--display); letter-spacing: -.035em; color: var(--ink); max-width: 28ch; quotes: "\201C" "\201D"; text-wrap: balance;
  opacity: 0; animation: h-ask 15s infinite; animation-delay: calc(var(--i) * 5s); }
.h-ask:first-child { opacity: 1; }
@keyframes h-ask { 0% { opacity: 0; transform: translateY(.18em); } 4%, 30% { opacity: 1; transform: none; } 34%, 100% { opacity: 0; transform: translateY(-.12em); } }
.h-asks:has(.h-ask:nth-child(2)) .h-ask:first-child { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .h-ask { animation: none; } .h-asks .h-ask:first-child { opacity: 1; } .h-ask:not(:first-child) { display: none; }
}
.h-form { max-width: 820px; }
.h-blank { font: 800 clamp(30px, 4.6vw, 54px)/1.2 var(--display); letter-spacing: -.035em; margin: 0 0 22px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .28em; }
.h-blank label { font: inherit; margin: 0; color: inherit; display: inline; }
.h-blank input { font: inherit; letter-spacing: -.02em; width: min(100%, 8.6em); padding: 0 .18em; margin: 0; border: 0; border-radius: .12em; color: var(--marker-ink);
  background: linear-gradient(transparent 12%, var(--marker) 12%, var(--marker) 92%, transparent 92%); }
.h-blank input::placeholder { color: color-mix(in srgb, var(--marker-ink) 55%, transparent); opacity: 1; }
.h-blank input:focus { box-shadow: 0 .09em 0 0 var(--ink); }
.h-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.h-field { margin: 0; font: 500 13.5px var(--sans); color: var(--ink-soft); }
.h-field span { display: block; margin-bottom: 6px; }
.h-field input, .h-field select { border-radius: 8px; padding: 12px 12px; background: var(--paper); }
.h-btn { display: inline-block; font: 600 15.5px var(--sans); color: #fff; background: var(--blue); border: 0; border-radius: 8px; padding: 13px 20px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.h-btn:hover { background: var(--blue-deep); }
.h-note { font-size: 14px; color: var(--ink-soft); margin: 14px 0 0; max-width: 62ch; }
@media (max-width: 760px) { .h-row { grid-template-columns: 1fr; } .h-btn { width: 100%; text-align: center; } }

.h-section { padding: clamp(44px, 7vw, 80px) 0 0; }
.h-section > h2 { font-size: clamp(24px, 3vw, 32px); margin: 0 0 24px; }
.h-prose { max-width: 64ch; font-size: 17px; color: var(--ink-soft); margin-top: 28px; }
.h-meta { font-size: 14.5px; color: var(--ink-soft); margin-top: 16px; }

.h-eq { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1.15fr; align-items: start; gap: 0 clamp(10px, 2vw, 24px); }
.h-eq > div b { display: block; font: 800 clamp(52px, 8vw, 104px)/.9 var(--display); letter-spacing: -.05em; color: var(--ink); font-variant-numeric: tabular-nums; }
.h-eq > div span { display: block; font-size: 15px; color: var(--ink-soft); margin-top: 12px; max-width: 22ch; }
.h-eq > i { font: 500 clamp(30px, 4vw, 52px)/1.2 var(--display); font-style: normal; color: var(--muted-deco); }
.h-eq .h-eq-sum b { color: var(--blue); }
@media (max-width: 760px) {
  .h-eq { grid-template-columns: auto 1fr; gap: 14px 16px; align-items: baseline; }
  .h-eq > i { display: none; }
  .h-eq > div { display: contents; }
  .h-eq > div b { font-size: 52px; text-align: right; }
  .h-eq > div span { margin: 0; }
}

.h-cats { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--ink); }
.h-cats li { margin: 0; border-bottom: 1px solid var(--line); }
.h-cats a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 8px 28px; align-items: baseline; padding: 22px 0; color: inherit; text-decoration: none; }
.h-cats a:hover .hc-name { color: var(--blue-text); }
.hc-name { font: 700 clamp(19px, 2.2vw, 24px)/1.2 var(--display); letter-spacing: -.02em; }
.hc-q { color: var(--ink-soft); font-size: 15.5px; quotes: "\201C" "\201D"; }
.hc-state { font-size: 14px; color: var(--ink-soft); white-space: nowrap; }
.hc-state.on { color: var(--green-ink); font-weight: 600; }
@media (max-width: 760px) { .h-cats a { grid-template-columns: 1fr; } }

.h-prices { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--ink); }
.h-prices > div { padding: 26px 32px 30px 0; }
.h-prices > div + div { padding-left: 32px; border-left: 1px solid var(--line); }
.h-prices h3 { display: flex; justify-content: space-between; align-items: baseline; font-size: 22px; margin-bottom: 12px; }
.h-prices h3 span { font: 800 34px var(--display); letter-spacing: -.03em; }
.h-prices p { color: var(--ink-soft); max-width: 46ch; }
.h-link { font-weight: 600; }
@media (max-width: 760px) { .h-prices { grid-template-columns: 1fr; } .h-prices > div, .h-prices > div + div { padding: 24px 0; border-left: 0; } .h-prices > div + div { border-top: 1px solid var(--line); } }

.h-live .h-board { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; max-width: 760px; }
.h-live .h-board li { display: grid; grid-template-columns: 160px 1fr 52px; gap: 14px; align-items: center; margin: 0; }
.hb-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-pct { font-variant-numeric: tabular-nums; text-align: right; }
.bar .fill { background: var(--blue); }

/* Shared blocks restyled to match */
.faq-sec { padding-top: clamp(44px, 7vw, 80px); }
.faq details { border-radius: 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 0; margin: 0; }
.faq { border-top: 1px solid var(--ink); }
.faq summary { font: 600 17px var(--sans); padding: 18px 0; }
.faq summary::after { font-family: var(--sans); }
.faq details p { max-width: 68ch; }
.city-form { border-radius: 12px; }
.city-form h3 { font-size: 22px; }
.city-form .beta { font: 600 12px var(--sans); color: var(--blue-text); background: var(--blue-wash); padding: 2px 8px; border-radius: 99px; vertical-align: middle; margin-left: 6px; }
.btn { border-radius: 8px; }