/* ─────────────────────────────────────────────────────────────────────────────
   bookr-example.css — styles for the inert "see your business" showcase
   (examples.html hub + example.html mock booking page).
   All-blue Bookr palette (black + grey spectrum + --blue/--blue2). Booking-page
   component styles mirror business.html so the mock looks like the real product.
   Reuses .bk-skel (bookr-shared.css) for image loading. Never touches the live page.
   ───────────────────────────────────────────────────────────────────────────── */

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
:root {
  --ink:#0A0A0F; --paper:#FAFAF8; --blue:#2563EB; --blue2:#3B82F6;
  --sand:#8E8E8C;
  --border:rgba(250,250,248,.08); --border2:rgba(250,250,248,.14);
  --faint:rgba(250,250,248,.04); --surface:rgba(250,250,248,.06);
  --muted:rgba(250,250,248,.52); --dim:rgba(250,250,248,.42);
  --font:"Geist",ui-sans-serif,system-ui; --mono:"Geist Mono",ui-monospace;
  --accent:#2563EB;
}
html { background:var(--ink); color:var(--paper); font-family:var(--font); -webkit-font-smoothing:antialiased; scrollbar-gutter:stable; overflow-x:hidden; }
body { min-height:100svh; display:flex; flex-direction:column; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
svg.ico { vertical-align:middle; flex-shrink:0; }

/* nav */
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 24px; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:50; background:rgba(10,10,15,.85); backdrop-filter:blur(14px); }
.logo { display:inline-flex; align-items:center; gap:8px; }
.logo-icon-img { width:26px; height:26px; border-radius:6px; }
.logo-word { font-size:16px; font-weight:700; letter-spacing:-.04em; }
.nav-link { font-size:13px; font-weight:500; color:var(--muted); padding:6px 12px; border-radius:7px; }
.nav-link:hover { color:var(--paper); background:var(--faint); }
.nav-cta { font-size:13px; font-weight:600; color:#fff; background:var(--blue); padding:7px 14px; border-radius:8px; }
.nav-cta:hover { background:var(--blue2); }
main { flex:1; width:100%; }

/* ── Preview banner ─────────────────────────────────────────────────────────── */
.preview-banner { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; padding:9px 16px; text-align:center; background:rgba(37,99,235,.10); border-bottom:1px solid rgba(37,99,235,.22); font-size:12.5px; color:var(--paper); }
.preview-banner .pb-dot { width:6px; height:6px; border-radius:50%; background:var(--blue2); }
.preview-banner strong { font-weight:600; } .preview-banner a { color:var(--blue2); font-weight:600; }

/* ── Control bar + dropdowns ────────────────────────────────────────────────── */
.ctrl-bar { position:sticky; top:56px; z-index:40; background:rgba(10,10,15,.94); backdrop-filter:blur(14px); border-bottom:1px solid var(--border); padding:14px 24px; }
.ctrl-inner { display:flex; gap:16px; flex-wrap:wrap; max-width:1040px; margin:0 auto; }
.ctrl-field { display:flex; flex-direction:column; gap:5px; }
.ctrl-lbl { font-family:var(--mono); font-size:10px; color:var(--dim); letter-spacing:.06em; text-transform:uppercase; }
.dd { position:relative; }
.dd-btn { display:flex; align-items:center; gap:9px; min-width:208px; padding:10px 12px; border-radius:11px; background:var(--surface); border:1px solid var(--border2); font-size:14px; font-weight:600; color:var(--paper); transition:border-color .15s; }
.dd-btn:hover { border-color:rgba(250,250,248,.24); }
.dd.open .dd-btn { border-color:var(--blue); }
.dd-ico { display:inline-flex; color:var(--blue2); }
.dd-cur { flex:1; text-align:left; white-space:nowrap; }
.dd-chev { display:inline-flex; color:var(--dim); transition:transform .2s; }
.dd.open .dd-chev { transform:rotate(180deg); }
.dd-menu { display:none; position:absolute; top:calc(100% + 6px); left:0; min-width:100%; width:max-content; max-width:280px; background:#14141a; border:1px solid var(--border2); border-radius:12px; padding:6px; z-index:70; box-shadow:0 14px 44px rgba(0,0,0,.55); }
.dd.open .dd-menu { display:block; animation:bkFadeUp .15s ease; }
.dd-opt { display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; border-radius:8px; font-size:14px; font-weight:500; color:var(--paper); text-align:left; }
.dd-opt:hover { background:var(--faint); }
.dd-opt.sel { color:var(--blue2); }
.dd-opt .dd-ico { color:var(--muted); }
.dd-opt.sel .dd-ico { color:var(--blue2); }
.dd-opt-main { flex:1; display:flex; flex-direction:column; gap:1px; }
.dd-opt-sub { font-family:var(--mono); font-size:11px; color:var(--muted); font-weight:400; }
.dd-tick { display:inline-flex; margin-left:auto; }

/* ── Feature annotation badges ──────────────────────────────────────────────── */
.feat-note { display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.02em; padding:3px 8px; border-radius:6px; margin-top:8px; background:rgba(37,99,235,.14); color:var(--blue2); border:1px solid rgba(37,99,235,.30); }
.feat-note.locked { background:var(--faint); color:var(--muted); border-color:var(--border2); }
.feat-note.add { background:rgba(37,99,235,.14); color:var(--blue2); border-color:rgba(37,99,235,.32); }
.locked-block { padding:22px 18px; border-radius:12px; text-align:center; background:var(--faint); border:1px dashed var(--border2); color:var(--muted); font-size:13px; line-height:1.6; }
.locked-block .ico { margin-bottom:8px; }
.locked-block strong { color:var(--paper); }

/* ── Skeleton image wrapper (reuses .bk-skel from bookr-shared.css) ──────────── */
.bk-skel.imgw { display:block; position:relative; overflow:hidden; background:rgba(250,250,248,.06); }
.bk-skel.imgw img { display:block; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .4s ease; }
.bk-skel.imgw.loaded img { opacity:1; }
.bk-skel.imgw.loaded::after { display:none; }
.bk-skel.imgw.imgerr { background:linear-gradient(135deg,#1a1a20,#0f0f14); }
.bk-skel.imgw.imgerr img { display:none; }
.bk-skel.imgw.imgerr::after { display:none; }

/* ── Booking layout ─────────────────────────────────────────────────────────── */
.booking-wrap { max-width:1040px; margin:0 auto; padding:30px 24px 40px; display:grid; grid-template-columns:340px 1fr; gap:40px; align-items:start; }
@media (max-width:860px) { .booking-wrap { grid-template-columns:1fr; gap:28px; } }
.book-col { min-width:0; }

/* Profile sidebar */
.biz-card { position:sticky; top:150px; }
@media (max-width:860px) { .biz-card { position:static; } }
.biz-cover { width:100%; height:130px; border-radius:14px; overflow:hidden; border:1px solid rgba(250,250,248,.08); margin-bottom:-32px; background:linear-gradient(135deg,#1a1a20,#0f0f14); }
.biz-cover .imgw { width:100%; height:100%; }
.biz-logo { width:64px; height:64px; border-radius:16px; background:linear-gradient(135deg,#2563EB,#3B82F6); border:1px solid rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:18px; font-weight:700; margin-bottom:14px; color:#fff; position:relative; z-index:1; }
.biz-name { font-size:22px; font-weight:700; letter-spacing:-.03em; margin-bottom:4px; line-height:1.15; }
.biz-tag { font-size:13px; color:var(--muted); margin-bottom:14px; }
.biz-desc { font-size:13px; color:var(--paper); line-height:1.55; margin-top:2px; margin-bottom:14px; opacity:.85; }
.biz-meta { display:flex; flex-direction:column; gap:7px; margin-bottom:14px; }
.biz-row { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); }
.biz-rating { display:flex; align-items:center; gap:6px; margin-bottom:14px; }
.biz-rating-num { font-size:13px; font-weight:600; color:var(--paper); }
.biz-rating-count { font-size:12px; color:var(--muted); }
.biz-demand { display:inline-flex; align-items:center; gap:7px; margin-bottom:14px; padding:5px 11px; border-radius:20px; background:rgba(37,99,235,.10); border:1px solid rgba(37,99,235,.30); font-size:12.5px; font-weight:600; color:var(--blue2); }
.biz-demand-dot { width:6px; height:6px; border-radius:50%; background:#3B82F6; box-shadow:0 0 0 0 rgba(59,130,246,.6); animation:bizPulse 2s infinite; }
@keyframes bizPulse { 0%{box-shadow:0 0 0 0 rgba(59,130,246,.5);} 70%{box-shadow:0 0 0 6px rgba(59,130,246,0);} 100%{box-shadow:0 0 0 0 rgba(59,130,246,0);} }
.biz-amenities { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.biz-amenity { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:20px; background:var(--faint); border:1px solid var(--border2); font-size:11.5px; color:var(--muted); line-height:1; }
.biz-social { display:flex; gap:6px; flex-wrap:wrap; margin-top:14px; }
.biz-social a { width:32px; height:32px; border-radius:8px; background:var(--faint); border:1px solid var(--border2); display:flex; align-items:center; justify-content:center; color:var(--muted); transition:all .15s; }
.biz-social a:hover { background:rgba(37,99,235,.12); color:var(--blue2); border-color:rgba(37,99,235,.3); }
.biz-sub-title { font-family:var(--mono); font-size:10px; color:var(--dim); letter-spacing:.06em; text-transform:uppercase; margin-bottom:8px; }
.biz-hours-block, .biz-location, .biz-reviews, .biz-faq { margin-top:16px; padding-top:16px; border-top:1px solid var(--border); }
.biz-hours-row { display:flex; justify-content:space-between; font-size:12px; color:var(--muted); padding:2px 0; }
.biz-hours-row.today { color:var(--paper); font-weight:500; }
.biz-map { position:relative; height:118px; border-radius:10px; border:1px solid var(--border2); overflow:hidden; display:flex; align-items:center; justify-content:center; background:#101016; }
.biz-map-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(250,250,248,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(250,250,248,.05) 1px,transparent 1px); background-size:22px 22px; }
.biz-map .ico { position:relative; z-index:1; filter:drop-shadow(0 3px 7px rgba(0,0,0,.6)); }
.biz-address-line { font-size:12.5px; color:var(--paper); margin-top:10px; line-height:1.5; }
.biz-directions { display:flex; gap:6px; margin-top:10px; }
.biz-directions a { flex:1; display:flex; align-items:center; justify-content:center; gap:5px; padding:8px; border-radius:8px; background:var(--faint); border:1px solid var(--border2); color:var(--paper); font-size:11.5px; font-weight:500; transition:all .15s; }
.biz-directions a:hover { border-color:rgba(37,99,235,.45); color:var(--blue2); }
.biz-review { padding:10px 0; border-bottom:1px dashed var(--border); }
.biz-review:last-child { border-bottom:none; }
.biz-review-stars { display:flex; gap:1px; margin-bottom:4px; }
.biz-review-text { font-size:12px; color:var(--paper); line-height:1.5; opacity:.9; margin-bottom:3px; }
.biz-review-meta { font-size:10px; color:var(--dim); font-family:var(--mono); }
.biz-review-reply { margin-top:7px; padding:8px 10px; background:rgba(37,99,235,.06); border-left:2px solid var(--blue); border-radius:5px; font-size:11.5px; color:var(--paper); line-height:1.5; opacity:.92; }
.biz-review-reply-label { font-family:var(--mono); font-size:9px; color:var(--blue2); letter-spacing:.06em; text-transform:uppercase; margin-bottom:2px; display:block; }
.biz-arrival { display:flex; gap:8px; margin-top:16px; padding:12px; border-radius:10px; background:rgba(37,99,235,.06); border:1px solid rgba(37,99,235,.18); font-size:12.5px; color:var(--paper); line-height:1.5; }
.biz-arrival .ico { flex-shrink:0; margin-top:1px; }
.powered-by { margin-top:20px; padding-top:16px; border-top:1px solid var(--border); display:flex; justify-content:center; }
.pb-badge { display:inline-flex; align-items:center; gap:8px; padding:7px 15px; border-radius:22px; background:var(--faint); border:1px solid var(--border2); transition:border-color .18s, background .18s, transform .18s; }
.pb-badge:hover { border-color:rgba(37,99,235,.4); background:rgba(37,99,235,.06); transform:translateY(-1px); }
.pb-label { font-size:11px; color:var(--dim); font-weight:500; letter-spacing:.01em; }
.pb-logo { width:20px; height:20px; border-radius:6px; display:block; }
.pb-word { font-size:13.5px; font-weight:700; letter-spacing:-.03em; color:var(--paper); }

/* Accordion (Photos + FAQ) */
.acc { margin-top:16px; padding-top:14px; border-top:1px solid var(--border); }
.acc-head { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; padding:2px 0; font-size:13px; font-weight:600; color:var(--paper); text-align:left; }
.acc-head-l { display:flex; align-items:center; gap:7px; }
.acc-count { font-family:var(--mono); font-size:11px; color:var(--dim); background:var(--faint); border:1px solid var(--border2); border-radius:5px; padding:1px 6px; }
.acc-chev { display:inline-flex; transition:transform .2s; }
.acc.open .acc-chev { transform:rotate(180deg); }
.acc-body { display:none; padding-top:12px; }
.acc.open .acc-body { display:block; animation:bkFadeUp .2s ease; }
.biz-faq .acc.faq-item { margin-top:0; padding-top:0; border-top:none; border-bottom:1px solid var(--border); }
.biz-faq .acc.faq-item:last-child { border-bottom:none; }
.biz-faq .faq-q { padding:10px 0; }
.faq-a { font-size:12.5px; color:var(--muted); line-height:1.55; padding-bottom:11px; }
.biz-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
.biz-gallery .imgw { aspect-ratio:1; border-radius:6px; cursor:pointer; transition:opacity .15s; }
.biz-gallery .imgw:hover { opacity:.85; }

/* ── Plan panel ─────────────────────────────────────────────────────────────── */
.plan-panel { border:1px solid var(--border2); border-radius:14px; padding:16px 18px; margin-bottom:22px; background:linear-gradient(180deg,rgba(37,99,235,.06),transparent); }
.pp-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.pp-title { font-size:15px; font-weight:700; letter-spacing:-.02em; }
.pp-tag { font-size:12px; color:var(--muted); margin-top:2px; }
.pp-cta { display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600; color:var(--blue2); white-space:nowrap; }
.pp-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px 18px; }
@media (max-width:560px) { .pp-grid { grid-template-columns:1fr; } }
.pp-row { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--paper); }
.pp-row.off { color:var(--dim); }
.pp-row strong { font-weight:600; }

/* Step bar */
.step-bar { display:flex; align-items:center; margin-bottom:24px; }
.sb-pip { display:flex; align-items:center; flex:1; }
.sb-pip:last-child { flex:0; }
.sb-circle { width:24px; height:24px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:10px; font-weight:600; border:1px solid var(--border2); color:var(--dim); background:var(--faint); transition:all .2s; }
.sb-circle.done { background:var(--blue); border-color:var(--blue); color:#fff; }
.sb-circle.active { background:var(--blue); border-color:var(--blue); color:#fff; }
.sb-line { flex:1; height:1px; background:var(--border); margin:0 6px; }
.sb-line.done { background:var(--blue); }

.panel { display:none; }
.panel.active { display:block; animation:bkFadeUp .3s ease; }
.panel h2 { font-size:20px; font-weight:700; letter-spacing:-.025em; margin-bottom:6px; }
.panel p.sub { font-size:13px; color:var(--muted); margin-bottom:22px; }

/* Services */
.svc-list { display:flex; flex-direction:column; gap:8px; }
.svc-card { display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:12px; background:var(--faint); border:1px solid var(--border2); cursor:pointer; transition:all .15s; }
.svc-card:hover { border-color:rgba(250,250,248,.22); background:rgba(250,250,248,.06); }
.svc-card.selected { border-color:var(--blue); background:rgba(37,99,235,.08); }
.svc-body { flex:1; min-width:0; }
.svc-name { font-size:14px; font-weight:600; letter-spacing:-.01em; }
.svc-meta { display:flex; align-items:center; gap:5px; font-size:12px; color:var(--muted); margin-top:2px; }
.svc-desc { font-size:12px; color:var(--muted); margin-top:3px; line-height:1.45; opacity:.85; }
.svc-price { font-family:var(--mono); font-size:15px; font-weight:600; flex-shrink:0; }
.svc-check { width:18px; height:18px; border-radius:50%; border:1px solid var(--border2); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.svc-check .ico { opacity:0; }
.svc-card.selected .svc-check { background:var(--blue); border-color:var(--blue); }
.svc-card.selected .svc-check .ico { opacity:1; }

/* Staff picker */
.staff-head { font-family:var(--mono); font-size:11px; color:var(--dim); letter-spacing:.06em; text-transform:uppercase; margin:4px 0 10px; }
.staff-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.staff-chip { display:inline-flex; align-items:center; gap:8px; padding:7px 13px 7px 7px; border-radius:24px; background:var(--faint); border:1px solid var(--border2); font-size:13px; font-weight:600; color:var(--muted); transition:all .15s; }
.staff-chip:hover { color:var(--paper); border-color:rgba(250,250,248,.24); }
.staff-chip.selected { background:rgba(37,99,235,.10); border-color:var(--blue); color:var(--paper); }
.staff-ava { width:26px; height:26px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:10px; font-weight:700; background:var(--surface); border:1px solid var(--border2); color:var(--paper); }
.staff-chip.selected .staff-ava { background:var(--blue); border-color:var(--blue); color:#fff; }

/* Class timetable */
.class-list { display:flex; flex-direction:column; gap:18px; }
.class-day-label { font-family:var(--mono); font-size:11px; color:var(--dim); letter-spacing:.06em; text-transform:uppercase; margin-bottom:8px; padding-bottom:6px; border-bottom:1px solid var(--border); }
.class-day-label.today { color:var(--blue2); }
.class-card { display:flex; align-items:flex-start; gap:14px; padding:14px 16px; border-radius:12px; background:var(--faint); border:1px solid var(--border2); cursor:pointer; transition:all .15s; margin-bottom:8px; }
.class-card:hover:not(.full) { border-color:rgba(37,99,235,.4); background:rgba(37,99,235,.05); }
.class-card.selected { border-color:var(--blue); background:rgba(37,99,235,.08); }
.class-card.full { opacity:.7; }
.class-time { font-family:var(--mono); font-size:13px; font-weight:600; width:60px; flex-shrink:0; padding-top:1px; }
.class-body { flex:1; min-width:0; }
.class-name { font-size:14.5px; font-weight:600; letter-spacing:-.01em; line-height:1.2; }
.class-meta { font-size:12px; color:var(--muted); margin-top:3px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.class-meta .dot { color:var(--dim); }
.class-price { font-family:var(--mono); font-size:13px; font-weight:600; flex-shrink:0; padding-top:1px; }
.class-spots { font-family:var(--mono); font-size:10.5px; padding:2px 7px; border-radius:4px; letter-spacing:.04em; white-space:nowrap; }
.class-spots.open  { background:rgba(37,99,235,.16); color:var(--blue2); }
.class-spots.tight { background:var(--faint); color:var(--muted); border:1px solid var(--border2); }
.class-spots.full  { background:var(--faint); color:var(--dim); }

/* Waitlist modal */
.wl-overlay { display:none; position:fixed; inset:0; background:rgba(10,10,15,.72); backdrop-filter:blur(6px); z-index:500; align-items:center; justify-content:center; padding:20px; }
.wl-overlay.open { display:flex; }
.wl-modal { background:#14141a; border:1px solid var(--border2); border-radius:18px; padding:26px; width:100%; max-width:420px; }
.wl-modal-title { font-size:18px; font-weight:700; letter-spacing:-.025em; margin-bottom:4px; }
.wl-modal-sub { font-size:13px; color:var(--muted); margin-bottom:20px; line-height:1.5; }

/* Calendar */
.cal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.cal-month { font-size:15px; font-weight:600; }
.cal-nav { display:flex; gap:4px; }
.cal-nav-btn { width:30px; height:30px; border-radius:7px; display:flex; align-items:center; justify-content:center; background:var(--faint); border:1px solid var(--border2); color:var(--muted); transition:all .15s; }
.cal-nav-btn:hover:not(:disabled) { background:rgba(250,250,248,.08); color:var(--paper); }
.cal-nav-btn:disabled { opacity:.3; cursor:not-allowed; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-dh { text-align:center; font-family:var(--mono); font-size:10px; color:var(--dim); padding:6px 0; letter-spacing:.04em; text-transform:uppercase; }
.cal-day { aspect-ratio:1; display:flex; align-items:center; justify-content:center; border-radius:8px; font-size:13px; font-weight:500; color:var(--muted); cursor:pointer; transition:all .15s; }
.cal-day.empty { cursor:default; }
.cal-day.past { color:var(--dim); cursor:not-allowed; opacity:.4; }
.cal-day.closed { color:var(--dim); cursor:not-allowed; opacity:.45; text-decoration:line-through; }
.cal-day.available { background:var(--faint); border:1px solid var(--border); color:var(--paper); }
.cal-day.available:hover { background:rgba(37,99,235,.12); border-color:rgba(37,99,235,.3); }
.cal-day.selected { background:var(--blue); color:#fff; border-color:var(--blue); }
.cal-day.today.available { border-color:rgba(37,99,235,.55); }

/* Time slots */
.times-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-family:var(--mono); font-size:11px; color:var(--dim); letter-spacing:.06em; text-transform:uppercase; margin:18px 0 10px; }
.times-pop { font-family:var(--mono); font-size:10px; color:var(--blue2); background:rgba(37,99,235,.12); border:1px solid rgba(37,99,235,.28); border-radius:5px; padding:2px 7px; text-transform:none; letter-spacing:0; }
.times-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
@media (max-width:600px) { .times-grid { grid-template-columns:repeat(3,1fr); } }
.time-slot { padding:10px 0; border-radius:8px; background:var(--faint); border:1px solid var(--border); font-family:var(--mono); font-size:12px; font-weight:500; color:var(--paper); transition:all .15s; }
.time-slot:hover { background:rgba(37,99,235,.12); border-color:rgba(37,99,235,.3); }
.time-slot.selected { background:var(--blue); color:#fff; border-color:var(--blue); }

/* Forms */
.field { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.label { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--muted); font-weight:500; }
.input, .textarea { width:100%; background:var(--surface); border:1px solid var(--border2); border-radius:10px; padding:12px 14px; font-family:var(--font); font-size:14px; color:var(--paper); transition:border-color .15s, box-shadow .15s; }
.input::placeholder, .textarea::placeholder { color:rgba(250,250,248,.4); }
.input:focus, .textarea:focus { outline:none; border-color:rgba(37,99,235,.55); box-shadow:0 0 0 3px rgba(37,99,235,.1); }
.input:disabled { opacity:.7; }
.textarea { min-height:70px; resize:vertical; line-height:1.5; }
.field-hint { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--dim); margin-top:-1px; }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:560px) { .row2 { grid-template-columns:1fr; } }

/* Voucher / consent / policy / privacy */
.voucher { margin-bottom:14px; }
.voucher-row { display:flex; gap:8px; }
.voucher-row .input { flex:1; }
.voucher-btn { white-space:nowrap; padding:12px 16px; display:inline-flex; align-items:center; gap:6px; }
.voucher-btn:disabled { color:var(--blue2); opacity:1; }
.voucher-ok { display:flex; align-items:center; gap:5px; font-size:12px; color:var(--blue2); margin-top:8px; }
.consent { display:flex; gap:9px; align-items:flex-start; font-size:12.5px; color:var(--muted); line-height:1.5; margin-bottom:12px; cursor:pointer; }
.consent-box { margin-top:1px; accent-color:#2563EB; width:15px; height:15px; flex-shrink:0; }
.consent-sub { color:var(--dim); }
.consent.policy { color:var(--paper); }
.consent a { color:var(--blue2); font-weight:500; }
.privacy-line { font-size:11px; color:var(--dim); line-height:1.5; margin-top:12px; }
.privacy-line a { color:var(--blue2); }

/* Summary chip */
.summary-chip { display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--surface); border:1px solid var(--border2); border-radius:10px; margin-bottom:18px; font-size:13px; flex-wrap:wrap; }
.summary-chip strong { color:var(--paper); }
.summary-chip .pip { display:inline-flex; align-items:center; gap:4px; font-family:var(--mono); font-size:11px; color:var(--dim); }

/* Buttons */
.actions { display:flex; gap:10px; margin-top:18px; }
.btn-p { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:13px 22px; border-radius:11px; background:var(--blue); color:#fff; font-size:14px; font-weight:600; transition:filter .15s, opacity .15s; flex:1; }
.btn-p:hover:not(:disabled) { filter:brightness(1.1); }
.btn-p:disabled { opacity:.5; cursor:not-allowed; }
.btn-s { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:13px 20px; border-radius:11px; background:var(--faint); border:1px solid var(--border2); font-size:14px; font-weight:500; color:var(--paper); }
.btn-s:hover { background:rgba(250,250,248,.08); }
.trust-line { display:flex; align-items:center; gap:6px; justify-content:center; margin-top:14px; font-family:var(--mono); font-size:11px; color:var(--dim); }

/* Price breakdown */
.price-breakdown { border:1px solid var(--border2); border-radius:12px; overflow:hidden; margin-bottom:18px; font-size:13px; }
.pb-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--border); }
.pb-row:last-child { border-bottom:none; }
.pb-row.total { background:var(--surface); font-weight:600; font-size:14px; }
.pb-label { display:flex; align-items:center; gap:7px; color:var(--muted); flex-wrap:wrap; }
.pb-row.total .pb-label { color:var(--paper); }
.pb-val { font-family:var(--mono); }
.pb-row.total .pb-val { color:var(--paper); font-size:15px; }
.pb-tag { font-family:var(--mono); font-size:9.5px; color:var(--dim); background:var(--faint); border:1px solid var(--border); border-radius:4px; padding:1px 6px; letter-spacing:.02em; }

/* Pay block */
.pay-block { border:1px solid var(--border2); border-radius:12px; padding:14px; margin-bottom:18px; background:rgba(250,250,248,.02); }
.pay-tabs { display:flex; gap:6px; margin-bottom:12px; }
.pay-tab { flex:1; display:flex; align-items:center; justify-content:center; gap:7px; padding:10px; border:1px solid var(--border2); border-radius:9px; background:transparent; font-size:13px; font-weight:500; color:var(--muted); cursor:default; opacity:.65; }
.pay-tab.selected { background:var(--surface); color:var(--paper); border-color:rgba(250,250,248,.22); opacity:1; }
.pay-mock-card { border:1px dashed var(--border2); border-radius:9px; padding:14px; display:flex; flex-direction:column; gap:8px; }
.pay-mock-row { display:flex; gap:8px; }
.pay-mock-line { background:rgba(250,250,248,.05); height:30px; border-radius:6px; flex:1; }
.pay-soon-note { display:flex; align-items:center; justify-content:center; gap:5px; font-family:var(--mono); font-size:10px; color:var(--dim); margin-top:10px; letter-spacing:.04em; }
.cash-note { display:flex; gap:8px; align-items:flex-start; font-size:12.5px; color:var(--muted); margin-bottom:14px; padding:11px 12px; background:var(--faint); border:1px solid var(--border); border-radius:9px; line-height:1.5; }
.cash-note .ico { flex-shrink:0; margin-top:1px; }

/* Confirmation */
.confirm-screen { max-width:560px; margin:0 auto; text-align:center; animation:bkFadeUp .35s ease; }
.confirm-check { width:76px; height:76px; border-radius:50%; margin:0 auto 18px; display:flex; align-items:center; justify-content:center; background:rgba(37,99,235,.14); border:1px solid rgba(37,99,235,.4); animation:confirmPop .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes confirmPop { 0%{ transform:scale(.4); opacity:0; } 100%{ transform:scale(1); opacity:1; } }
.confirm-title { font-size:24px; font-weight:700; letter-spacing:-.025em; margin-bottom:6px; }
.confirm-sub { font-size:14px; color:var(--muted); line-height:1.55; margin-bottom:22px; }
.confirm-sub strong { color:var(--paper); }
.confirm-card { text-align:left; border:1px solid var(--border2); border-radius:14px; overflow:hidden; margin-bottom:18px; }
.confirm-card-head { display:flex; align-items:center; gap:12px; padding:16px; background:var(--surface); border-bottom:1px solid var(--border); }
.confirm-logo { width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:13px; font-weight:700; background:linear-gradient(135deg,#2563EB,#3B82F6); color:#fff; }
.cc-name { font-weight:700; font-size:14px; }
.cc-city { font-size:12px; color:var(--muted); }
.confirm-ref { margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--blue2); background:rgba(37,99,235,.1); border:1px solid rgba(37,99,235,.28); border-radius:6px; padding:3px 8px; }
.confirm-row { display:flex; justify-content:space-between; gap:14px; padding:11px 16px; border-bottom:1px solid var(--border); font-size:13px; }
.confirm-row:last-child { border-bottom:none; }
.confirm-row .cr-k { color:var(--muted); }
.confirm-row .cr-v { color:var(--paper); font-weight:500; text-align:right; }
.confirm-row.total .cr-v { font-family:var(--mono); }
.confirm-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:18px; }
.confirm-actions .btn-s, .confirm-actions .btn-p { flex:1; min-width:150px; }
.confirm-note { font-family:var(--mono); font-size:11px; color:var(--dim); line-height:1.6; padding-top:14px; border-top:1px solid var(--border); }

footer { display:block; border-top:1px solid var(--border); padding:18px; text-align:center; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.footer-link { font-family:var(--mono); font-size:11px; color:var(--sand); }

/* Toast */
.toast { position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px); z-index:600; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; max-width:90vw; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast-inner { display:flex; align-items:center; gap:10px; padding:12px 18px; background:#16161c; border:1px solid var(--border2); border-radius:12px; font-size:13px; color:var(--paper); box-shadow:0 8px 30px rgba(0,0,0,.45); }
.toast-inner a { display:inline-flex; align-items:center; gap:4px; color:var(--blue2); font-weight:600; white-space:nowrap; }

/* ════════════════════════════════════════════════════════════════════════════
   Hub page (examples.html)
   ════════════════════════════════════════════════════════════════════════════ */
.hub-wrap { max-width:1040px; margin:0 auto; padding:56px 24px 50px; }
.hub-head { text-align:center; margin-bottom:40px; }
.hub-eyebrow { display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; color:var(--blue2); letter-spacing:.08em; text-transform:uppercase; margin-bottom:12px; }
.hub-title { font-size:34px; font-weight:700; letter-spacing:-.03em; line-height:1.1; margin-bottom:14px; }
@media (max-width:560px){ .hub-title { font-size:27px; } }
.hub-sub { font-size:15px; color:var(--muted); line-height:1.6; max-width:560px; margin:0 auto; }
.hub-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:16px; }
.hub-card { display:flex; flex-direction:column; border-radius:16px; overflow:hidden; background:var(--faint); border:1px solid var(--border2); transition:border-color .18s, transform .18s, background .18s; }
.hub-card:hover { border-color:rgba(37,99,235,.45); transform:translateY(-3px); background:var(--surface); }
.hub-card-cover { height:120px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,rgba(37,99,235,.22),#0f0f14); color:#fff; }
.hub-card-body { padding:18px 18px 20px; }
.hub-card-name { font-size:17px; font-weight:700; letter-spacing:-.02em; margin-bottom:4px; }
.hub-card-tag { font-size:13px; color:var(--muted); line-height:1.5; margin-bottom:14px; }
.hub-card-cta { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--blue2); }
.hub-card:hover .hub-card-cta { gap:9px; }
.hub-note { text-align:center; margin-top:30px; font-size:13px; color:var(--dim); line-height:1.6; }
.hub-note strong { color:var(--muted); }
.hub-section-title { text-align:center; font-size:24px; font-weight:700; letter-spacing:-.025em; margin:54px 0 8px; }
.hub-section-sub { text-align:center; font-size:14px; color:var(--muted); margin-bottom:6px; }

/* Comparison table */
.cmp-wrap { overflow-x:auto; border:1px solid var(--border2); border-radius:16px; margin-top:24px; }
.cmp-table { width:100%; border-collapse:collapse; min-width:720px; font-size:13px; }
.cmp-table th, .cmp-table td { padding:11px 14px; text-align:center; border-bottom:1px solid var(--border); }
.cmp-table thead th { position:sticky; top:0; background:#101015; }
.cmp-feat { text-align:left !important; color:var(--muted); font-weight:500; white-space:nowrap; }
.cmp-plan { vertical-align:top; }
.cmp-plan-name { font-size:14px; font-weight:700; }
.cmp-plan-price { font-family:var(--mono); font-size:13px; color:var(--blue2); margin-top:2px; }
.cmp-plan-price span { color:var(--dim); }
.cmp-pop-badge { display:inline-block; margin-top:6px; font-family:var(--mono); font-size:9px; letter-spacing:.05em; text-transform:uppercase; color:#fff; background:var(--blue); border-radius:5px; padding:2px 7px; }
.cmp-plan.pop, .cmp-cell.pop { background:rgba(37,99,235,.07); }
.cmp-val { font-family:var(--mono); font-size:12.5px; color:var(--paper); }
.cmp-no { opacity:.5; }
.cmp-table tbody tr:last-child td { border-bottom:none; }

/* Animations + a11y */
@keyframes bkFadeUp { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } }
:focus-visible { outline:2px solid var(--blue2); outline-offset:2px; border-radius:4px; }