/* =====================================================================
   Jong marketplace - "Open Hours" design language
   White cards on a cool morning grey, one working blue, hairlines not
   shadows. The ຈອງ lacquer-and-gold chip and the dark "Tonight" band are
   the only evening moments. Implements the same class names the app's
   JS renders against - token NAMES are kept, VALUES are remapped.
   ===================================================================== */

:root{
  /* brand bridge */
  --lacquer:#0A0F0C;
  --gold:#C6A45C;

  /* Open Hours core */
  --ink:#101828;            /* was forest ink */
  --ink-2:#0C1220;          /* dark bands (strip, footer, band) */
  --paper:#F2F4F7;          /* was warm paper → neutral wash (booked slots) */
  --paper-2:#FFFFFF;
  --card:#FFFFFF;
  --canvas:#F4F6FA;

  --emerald:#067647;        /* semantic: confirmed / success text */
  --emerald-deep:#12B76A;
  --teal:#1D4FC7;           /* service-line accent → deep blue */
  --coral:#F79009;
  --champagne:#2563EB;      /* semantic: selection & primary → working blue */
  --gold-leaf:#8FB4F2;      /* quiet blue (was gold thread) */
  --champagne-soft:#EAF1FE; /* selection wash */

  --blue:#2563EB;
  --blue-deep:#1D4FC7;
  --blue-soft:#EAF1FE;
  --blue-100:#D7E4FC;
  --blue-200:#8FB4F2;
  --amber:#F79009;

  --text:#101828;
  --muted:#667085;
  --faint:#98A2B3;
  --line:#E4E9F1;
  --line-strong:#D5DCE8;
  --line-ink:rgba(255,255,255,.08);
  --danger:#B42318;

  --radius:16px;
  --shadow:0 1px 2px rgba(16,24,40,.05);
  --shadow-lg:0 12px 32px rgba(16,24,40,.12);
  --sans:'Plus Jakarta Sans','Noto Sans Lao',system-ui,sans-serif;
  --serif:'Plus Jakarta Sans','Noto Sans Lao',system-ui,sans-serif; /* serif retired */
  --lao-serif:'Noto Serif Lao',serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);background:var(--canvas);color:var(--text);line-height:1.55;font-size:16px;-webkit-font-smoothing:antialiased}
img,svg{display:block}
button{font-family:inherit;cursor:pointer}
input,select{font-family:inherit;font-size:16px}
a{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px}
::selection{background:var(--champagne-soft)}

/* retired Weaver's Hem ornaments */
body::after{content:none}
.hem,.hem-v{display:none}

/* same container as the business page, so the two front doors sit on the same
   measure: past ~1440px the page stops widening instead of stretching its rows */
.wrap{width:100%;max-width:1440px;margin:0 auto;padding-inline:clamp(24px,5vw,80px)}
@media(max-width:600px){.wrap{padding-inline:22px}}
.serif{font-family:var(--sans)}
.kicker{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-200);font-weight:800}
.kicker.dark{color:var(--blue)}

/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:10px;
  padding:12px 20px;font-weight:700;font-size:14.5px;text-decoration:none;
  transition:transform .15s ease,box-shadow .15s ease,background .15s}
.btn:active{transform:scale(.98)}
.btn-gold{background:var(--blue);color:#fff}
.btn-gold:hover{background:var(--blue-deep)}
.btn-emerald{background:var(--blue);color:#fff}
.btn-emerald:hover{background:var(--blue-deep)}
.btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}
.btn-ghost:hover{border-color:rgba(255,255,255,.8)}
.btn-ghost-dark{background:var(--card);color:var(--ink);border:1px solid var(--line-strong)}
.btn-ghost-dark:hover{background:var(--paper)}
.btn-block{width:100%}
.btn:disabled{opacity:.55;cursor:not-allowed}

/* ============ NAV - white topbar ============ */
.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;height:64px;gap:14px}
.logo{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;cursor:pointer;background:none;border:none;padding:0}
.logo .en{font-weight:800;font-size:20px;letter-spacing:-.02em}
.logo .lo{font-family:var(--lao-serif);color:var(--gold);font-size:14px;font-weight:700;
  background:var(--lacquer);border-radius:9px;padding:5px 9px;line-height:1;
  box-shadow:inset 0 0 0 1px rgba(198,164,92,.35)}
.nav-links{display:flex;gap:24px;margin-left:18px;color:var(--muted);font-size:14.5px;font-weight:600}
.nav-links button,.nav-links a{background:none;border:none;color:inherit;font:inherit;padding:0;text-decoration:none}
.nav-links button:hover,.nav-links a:hover{color:var(--ink)}
.nav-links a[aria-current="page"]{color:var(--ink)}
.nav .btn-ghost{color:var(--ink);border-color:var(--line-strong)}
.nav .btn-ghost:hover{border-color:var(--ink);background:var(--paper)}
.nav-cta{display:flex;gap:10px;align-items:center;margin-left:auto}
.nav-cta .btn{white-space:nowrap}
/* owner entry point - matches the language switcher's pill treatment so the
   two read as one control cluster on the right of the bar */
.nav-pill{display:inline-flex;align-items:center;gap:7px;border-radius:999px;
  background:rgba(255,255,255,.92);border:1px solid rgba(16,24,40,.14);
  padding:7px 15px;font:800 12.5px/1.2 var(--sans);color:#344054;
  text-decoration:none;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.nav-pill:hover{background:rgba(16,24,40,.07);color:var(--ink);border-color:rgba(16,24,40,.22)}
.nav-pill[aria-current="page"]{background:var(--ink);color:#fff;border-color:var(--ink)}
@media(max-width:560px){.nav-pill{display:none}}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--lacquer);color:var(--gold);font-weight:800;
  display:flex;align-items:center;justify-content:center;border:none;font-size:15px}
@media(max-width:820px){.nav-links{display:none}}
@media(max-width:520px){.nav-cta .btn-ghost{display:none}}

/* ============ HERO - That Luang at first light ============ */
.hero{position:relative;background:linear-gradient(180deg,#FFFFFF,var(--canvas) 78%);color:var(--ink);overflow:hidden;border-bottom:1px solid var(--line)}
.hero-art,.hero-scrim{display:block;position:absolute;inset:0;pointer-events:none}
.hero-art{background:url("../assets/hero/that-luang-morning-v1.webp") right center/cover no-repeat;transform:scale(1.002)}
.hero-scrim{background:
  linear-gradient(90deg,rgba(247,250,255,.24) 0%,rgba(247,250,255,.78) 37%,rgba(247,250,255,.82) 62%,rgba(247,250,255,.12) 100%),
  linear-gradient(180deg,rgba(255,255,255,.10) 52%,rgba(247,250,255,.62) 100%)}
.hero-in{position:relative;z-index:1;padding-block:84px 62px;text-align:center}
.hero .kicker{color:var(--blue)}
.hero h1{font-weight:800;font-size:clamp(32px,5.6vw,58px);letter-spacing:-.03em;line-height:1.06;margin:16px auto 14px;max-width:17ch}
.hero h1 em{font-style:normal;color:var(--blue)}
/* Rolling headline word — same six words as the business page, but this hero
   sets the word mid-sentence rather than on its own line, so every rule here is
   scoped to .hero-h1. business.html loads this sheet and its own, and an
   unscoped .roll leaked an indent into that page's headline. */
.hero-h1{max-width:20ch}
.hero-h1 .h1-pre:empty{display:none}
.hero-h1 .roll{display:inline-grid;justify-items:start;vertical-align:baseline;color:var(--blue);
  margin-inline-start:.28em;overflow:hidden;height:auto;position:static;
  /* the slot widens faster than the word fades in, so a longer incoming word is
     never caught half-clipped once it is legible */
  transition:width .18s ease-out}
.hero-h1 .roll span{display:block;position:static;grid-area:1/1;opacity:0;transform:translateY(.5em);
  white-space:nowrap;transition:opacity .34s ease,transform .34s ease}
.hero-h1 .roll span.on{opacity:1;transform:none}
.hero-h1 .roll span.out{opacity:0;transform:translateY(-.5em)}
/* Lao and Thai lead with the rolling noun, so the gap moves to the other side */
html[lang="lo"] .hero-h1 .roll,html[lang="th"] .hero-h1 .roll{margin-inline-start:0}
html[lang="lo"] .hero-h1 .h1-post,html[lang="th"] .hero-h1 .h1-post{margin-inline-start:.28em}
@media(prefers-reduced-motion:reduce){.hero-h1 .roll span,.hero-h1 .roll{transition:none}}
.hero .sub{color:var(--muted);max-width:52ch;margin:0 auto 34px;font-size:16.5px}

/* search bar */
.search{display:grid;grid-template-columns:1.4fr 1fr .9fr auto;gap:0;max-width:820px;margin:0 auto;
  background:var(--card);border:1px solid var(--line-strong);
  border-radius:16px;padding:8px;box-shadow:0 12px 36px rgba(16,24,40,.08);text-align:left;transition:box-shadow .16s}
.search:focus-within{box-shadow:0 12px 36px rgba(16,24,40,.10),0 0 0 3px var(--blue-soft)}
.search .cell{padding:8px 16px;border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:center}
.search .cell:last-of-type{border-right:none}
.search label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:800}
.search input,.search select{border:none;background:none;color:var(--text);font-weight:600;padding:2px 0;width:100%;outline:none}
.search input::placeholder{color:var(--faint)}
.search .btn{margin:0;border-radius:11px}
/* Supporting facts, not a second control. The search panel above is already a
   bordered white container, so repeating that treatment three times under it
   put secondary information at the same weight as the page's main control.
   These read as one quiet status line: no boxes, no shadow, hairline dividers
   in the house idiom, and one type size below the sub-headline. */
.hero-proof{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;
  gap:8px 0;margin:18px auto 0;color:var(--muted);font-size:13px;font-weight:600}
.hero-proof span{display:inline-flex;align-items:center;gap:6px;padding:0 16px;line-height:1.45}
.hero-proof span+span{border-left:1px solid var(--line-strong)}
/* the counts are the live data, so they get weight and figures that line up */
.hero-proof b{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}
/* which city the listings belong to: scope rather than a count, so it keeps the
   row's single accent and the only icon */
.hero-city{color:var(--blue-deep)}
.hero-city svg{width:14px;height:14px;fill:none;stroke:var(--blue);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:600px){
  /* stacked, so a wrapped line never begins with a divider */
  .hero-proof{flex-direction:column;gap:7px}
  .hero-proof span{padding:0}
  .hero-proof span+span{border-left:0}
}
@media(max-width:720px){
  .hero-art{background-position:78% center}
  .hero-scrim{background:linear-gradient(180deg,rgba(247,250,255,.72),rgba(247,250,255,.84))}
  .search{grid-template-columns:1fr;border-radius:18px;gap:2px}
  .search .cell{border-right:none;border-bottom:1px solid var(--line);padding:10px 14px}
  .search .cell:last-of-type{border-bottom:none}
  .search .btn{width:100%}
  .hero-in{padding-block:64px 48px}
}

/* tonight strip - the one evening moment (brand bridge) */
.hero .strip{position:relative}
.strip{background:var(--lacquer);border-top:1px solid var(--line-ink);border-bottom:none;
  display:flex;align-items:center;overflow:hidden}
.strip .tag{flex:none;background:var(--blue);color:#fff;font-weight:800;font-size:11.5px;letter-spacing:.16em;
  padding:9px 14px;margin:10px 0 10px 20px;border-radius:8px}
.marquee{flex:1;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-in{display:flex;gap:44px;width:max-content;padding:14px 0;animation:slide 42s linear infinite}
.marquee-in span{color:#9AA3B2;font-size:14px;white-space:nowrap}
.marquee-in b{color:#fff;font-weight:700}
.marquee-in i{color:var(--blue-200);font-style:normal;font-variant-numeric:tabular-nums;font-weight:700}
@keyframes slide{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee-in{animation:none;flex-wrap:wrap;width:auto;padding:12px 16px}}

/* ============ SECTIONS ============ */
.section{padding-block:104px;position:relative}
@media(max-width:600px){.section{padding-block:76px}}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:36px}
.section-head h2{font-weight:800;font-size:clamp(24px,3.2vw,32px);letter-spacing:-.025em;margin:6px 0 0;line-height:1.12}
.section-head p{color:var(--muted);margin:6px 0 0;max-width:48ch;font-size:14.5px}

/* category tiles - photographic horizontal rail */
.cats{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(210px,18vw,260px);gap:16px;overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-padding-inline:12px;overscroll-behavior-inline:contain;padding:8px 12px 20px;
  margin:-4px 0 -20px;scrollbar-width:thin;scrollbar-color:var(--blue-200) transparent}
.cats::-webkit-scrollbar{height:7px}
.cats::-webkit-scrollbar-track{background:transparent}
.cats::-webkit-scrollbar-thumb{background:var(--blue-200);border-radius:999px}
.cat{position:relative;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5;color:var(--ink);
  text-align:left;padding:0;background:var(--card);box-shadow:var(--shadow);scroll-snap-align:start;scroll-snap-stop:always;
  transition:transform .2s,box-shadow .2s,border-color .2s}
.cat:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--blue-200)}
.cat.on{border-color:var(--blue);box-shadow:0 0 0 3px rgba(43,107,232,.16),var(--shadow-lg);transform:translateY(-3px)}
.cat.on .cat-count{background:var(--blue);border-color:var(--blue);color:#fff}
.cat:focus-visible{outline:3px solid rgba(43,107,232,.28);outline-offset:3px}
.cat::after{content:none}
.cat-count{position:absolute;top:12px;right:12px;z-index:1;background:var(--blue-soft);color:var(--blue-deep);
  border:1px solid rgba(255,255,255,.72);box-shadow:0 2px 8px rgba(16,24,40,.08);
  border-radius:999px;padding:5px 9px;font-size:11px;font-weight:800}
.artfill{position:absolute;inset:0;overflow:hidden;background:linear-gradient(160deg,var(--blue-soft),#F7FAFF 70%)}
.artfill svg{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);width:56%;height:56%;
  stroke:var(--blue-200);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s ease}
.cat-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .3s ease}
.cat:hover .cat-photo{transform:scale(1.045);filter:saturate(1.05) contrast(1.02)}
.cat:hover .artfill svg,.card:hover .artfill svg{transform:translate(-50%,-50%) scale(1.06)}
@media(prefers-reduced-motion:reduce){
  .cat:hover .artfill svg,.card:hover .artfill svg{transform:translate(-50%,-50%)}
  .cat:hover .cat-photo{transform:none}
}
.cat .lab{position:absolute;z-index:1;left:0;right:0;bottom:0;padding:70px 16px 15px;
  background:linear-gradient(transparent,rgba(255,255,255,.94) 42%,#fff 70%);pointer-events:none}
.cat .lab b{font-size:16px;display:block;line-height:1.25;letter-spacing:-.015em}
.cat .lab .cat-meta{display:block;margin-top:2px;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat .lab .cat-price{display:block;margin-top:7px;color:var(--blue-deep);font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums}
.cat-more{isolation:isolate;border-color:var(--blue-100);background:
  radial-gradient(circle at 82% 12%,rgba(255,255,255,.7),transparent 30%),
  linear-gradient(145deg,#EAF2FF 0%,#CFE0FF 50%,#AFCBFA 100%);color:var(--blue-deep)}
.cat-more::before{content:"";position:absolute;z-index:-1;width:160px;height:160px;right:-54px;top:-44px;border-radius:50%;
  border:30px solid rgba(255,255,255,.38);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.cat-more::after{content:"";position:absolute;z-index:-1;inset:0;opacity:.28;background-image:
  radial-gradient(circle,rgba(29,79,199,.35) 1px,transparent 1.5px);background-size:18px 18px;
  mask-image:linear-gradient(135deg,transparent 25%,#000 90%)}
.cat-more:hover::before{transform:translate(-14px,18px) scale(1.12)}
.cat-more-icon{position:absolute;top:22px;right:20px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.88);box-shadow:0 8px 24px rgba(29,79,199,.14);font-size:24px;line-height:1;
  transition:transform .3s ease,background .3s ease}
.cat-more:hover .cat-more-icon{transform:translateX(5px) rotate(-8deg);background:#fff}
.cat-more-copy{position:absolute;left:18px;right:18px;bottom:18px}
.cat-more-copy b{display:block;font-size:20px;line-height:1.18;letter-spacing:-.025em}
.cat-more-copy span{display:block;margin-top:7px;color:#476CA8;font-size:12.5px;line-height:1.45}
@media(max-width:600px){
  .cats{grid-auto-columns:min(78vw,260px);gap:12px;padding-inline:10px;scroll-padding-inline:10px}
}

/* availability results merged into the category browser */
/* no container of its own: the collection headings and their card rows sit
   straight on the page, and the section rules between them do the dividing.
   Kept only as the scroll anchor for category and search jumps. */
.availability{margin-top:52px;scroll-margin-top:84px}
.availability-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px}
.availability-head h3{font-size:clamp(22px,2.7vw,29px);line-height:1.15;letter-spacing:-.025em;margin:6px 0 0}
.availability-head p{color:var(--muted);margin:6px 0 0;font-size:14px}
.availability-all{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--blue-100);border-radius:999px;
  padding:9px 14px;background:#fff;color:var(--blue-deep);font-size:13px;font-weight:800;white-space:nowrap}
.availability-all:hover{border-color:var(--blue-200);background:var(--blue-soft)}
.results-head,.market-collection-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px}
.results-head h3,.market-collection-head h3{font-size:clamp(20px,2.4vw,26px);line-height:1.15;letter-spacing:-.025em;margin:0}
.results-head p,.market-collection-head p{color:var(--muted);margin:5px 0 0;font-size:13.5px}
.results-back{display:inline-flex;align-items:center;gap:7px;border:0;background:none;color:var(--blue);font-weight:800;font-size:12.5px;padding:0;margin-bottom:10px}
/* whitespace separates the rows, not a rule: the heading plus its own card row
   already reads as one block, the way the large travel sites stack theirs */
.market-collection+.market-collection{margin-top:52px}
.collection-cards{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,360px);gap:16px;overflow-x:auto;
  padding:3px 3px 14px;scroll-snap-type:x proximity;overscroll-behavior-inline:contain;
  scrollbar-width:thin;scrollbar-color:var(--blue-200) transparent}
.collection-cards::-webkit-scrollbar{height:7px}
.collection-cards::-webkit-scrollbar-track{background:transparent}
.collection-cards::-webkit-scrollbar-thumb{background:var(--blue-200);border-radius:999px}
.collection-cards .card{scroll-snap-align:start}
.results-back:hover{color:var(--blue-deep)}
.merged-empty{text-align:center;padding:42px 20px 26px}
.merged-empty .empty-pill{display:inline-flex;padding:6px 10px;border-radius:999px;background:var(--blue-soft);
  color:var(--blue-deep);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.merged-empty h3{margin:14px 0 8px;font-size:22px}
.merged-empty p{max-width:480px;margin:0 auto 20px;color:var(--muted);line-height:1.6}
@media(max-width:600px){
  .availability{margin-top:38px}
  .availability-head{align-items:flex-start;flex-direction:column}
  .results-head,.market-collection-head{align-items:flex-start;flex-direction:column}
  .collection-cards{grid-auto-columns:minmax(260px,86vw)}
}

/* venue cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,390px));gap:18px;justify-content:start}
@media(max-width:920px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid{grid-template-columns:1fr}}
.card{background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  border:1px solid var(--line);transition:transform .2s,box-shadow .2s,border-color .2s;cursor:pointer;position:relative;text-align:left;padding:0}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--blue-200)}
/* 4:3 rather than a fixed 150px band: at full card width the old letterbox
   read as a stretched image */
.card .art{aspect-ratio:4/3;position:relative;border-bottom:1px solid var(--line)}
.badge{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.92);color:var(--blue-deep);
  font-size:10.5px;font-weight:800;letter-spacing:.08em;padding:5px 9px;border-radius:7px;border:1px solid var(--blue-100)}
.fav{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  background:rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center}
.fav svg{width:17px;height:17px;fill:none;stroke:var(--muted);stroke-width:2}
.fav.on svg{fill:var(--danger);stroke:var(--danger)}
.card .body{padding:15px 17px 17px}
.card .row1{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.card h3{margin:0;font-size:16px;font-weight:800;letter-spacing:-.01em}
.stars{color:var(--amber);font-weight:800;font-size:13.5px;white-space:nowrap}
.stars small{color:var(--muted);font-weight:600}
.card .meta{color:var(--muted);font-size:13.5px;margin:3px 0 10px}
.service-line{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:11px;margin-top:9px;
  color:var(--muted);font-size:12.5px}
.service-line b{color:var(--teal);white-space:nowrap}
.card .row2{display:flex;justify-content:space-between;align-items:center;padding-top:10px}
.price{font-weight:800;font-variant-numeric:tabular-nums}
.price small{color:var(--muted);font-weight:600}
.instant{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--emerald)}
.instant svg{width:13px;height:13px;fill:var(--emerald-deep)}
.empty{padding:60px 0;text-align:center;color:var(--muted)}

/* slim owner funnel above the footer - one line, not a second dark slab */
.cta-strip{background:var(--blue-soft);border-top:1px solid var(--blue-100)}
.cta-strip-in{display:flex;align-items:center;justify-content:center;gap:16px;
  padding-block:22px;flex-wrap:wrap;text-align:center}
.cta-strip p{margin:0;font-size:15.5px;font-weight:600;color:var(--blue-deep)}
.cta-strip-link{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-weight:800;font-size:14.5px;color:var(--blue);border-bottom:2px solid transparent;transition:border-color .15s}
.cta-strip-link:hover{border-bottom-color:var(--blue)}

/* dark band - the shop-window moment */
.band{background:var(--lacquer);color:#fff;position:relative;overflow:hidden}
.band::before,.band::after{content:none}
.band-in{position:relative;padding-block:78px;z-index:2}
.band h2{font-weight:800;font-size:clamp(26px,3.8vw,40px);letter-spacing:-.025em;margin:14px 0 12px;line-height:1.1;max-width:22ch}
.band p.lead{color:#AEB6C4;max-width:56ch;font-size:16.5px;margin:0 0 28px}
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 26px;margin:34px 0}
@media(max-width:820px){.feat{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.feat{grid-template-columns:1fr}}
.feat div{display:flex;gap:12px;align-items:flex-start}
.feat svg{width:21px;height:21px;stroke:var(--blue-200);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;margin-top:2px}
.feat b{display:block;font-size:14.5px}
.feat span{color:#8D96A6;font-size:13px}
.gold-rule{width:56px;height:3px;border-radius:2px;background:var(--blue);border:none;margin:0}
.band .kicker{color:var(--gold)}

/* footer */
footer{background:var(--ink-2);color:#8D96A6;padding:64px 0 28px;position:relative}
footer::before{content:none}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px;margin-bottom:34px}
@media(max-width:760px){.foot{grid-template-columns:1fr 1fr}}
footer h4{color:#fff;font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 12px}
footer button,.foot-link{display:block;background:none;border:none;color:#8D96A6;padding:5px 0;font-size:14px;text-align:left;text-decoration:none}
footer button:hover,.foot-link:hover{color:#fff}
footer .logo .en{color:#fff}
.foot-base{border-top:1px solid var(--line-ink);padding-top:22px;display:flex;justify-content:space-between;gap:12px;font-size:13px;flex-wrap:wrap}
.foot-base span:last-child{color:var(--blue-200)!important}

/* ============ VENUE VIEW ============ */
.venue-page{padding-top:18px;padding-bottom:48px}
.venue-crumbs{display:flex;align-items:center;gap:10px;min-width:0;margin:0 0 16px;color:var(--faint);font-size:13px}
.venue-crumbs button{border:0;background:none;color:var(--blue);font-weight:700;padding:0}
.venue-crumbs b{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.venue-gallery{position:relative;height:430px}
.venue-gallery button{border:0;padding:0;overflow:hidden;background:var(--paper);position:relative}
.gallery-main{display:block;width:100%;height:100%;border-radius:18px;cursor:pointer;touch-action:pan-y}
.gallery-slides{position:absolute;inset:0;display:block}
.gallery-slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease,transform .25s ease}
.gallery-slides img.is-active{opacity:1}
.gallery-main:hover .gallery-slides img.is-active{transform:scale(1.015)}
@media(prefers-reduced-motion:reduce){.gallery-slides img{transition:none}}
.gallery-status{position:absolute;left:16px;bottom:16px;z-index:2;display:inline-flex;gap:7px;align-items:center;background:rgba(16,24,40,.78);color:#fff;border-radius:8px;padding:7px 11px;font:700 12px/1 var(--sans)}
.gallery-all{position:absolute!important;right:16px;bottom:16px!important;display:inline-flex;align-items:center;gap:8px;padding:9px 13px!important;background:rgba(255,255,255,.96)!important;border-radius:9px!important;font-weight:800;color:var(--ink);box-shadow:var(--shadow)}
.venue-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:22px;align-items:start;margin-top:0}
.venue-content{display:grid;gap:16px;min-width:0}
.venue-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);scroll-margin-top:86px;min-width:0;max-width:100%}
.venue-card h2{font-size:17px;letter-spacing:-.015em;margin:0}
.venue-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:26px 0 8px;flex-wrap:wrap}
.venue-intro .venue-head{padding:0}
.venue-head h1{font-weight:800;font-size:clamp(26px,3.8vw,38px);letter-spacing:-.028em;margin:0;line-height:1.08}
.venue-head .meta{color:var(--muted);margin-top:6px}
.venue-badges{display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.venue-badges span{border-radius:999px;background:#ECFDF3;color:var(--emerald);padding:5px 9px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.venue-badges span+span{background:#FFF7E8;color:#B54708}
.venue-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.rating-pill,.venue-action{display:inline-flex;align-items:center;justify-content:center;min-height:38px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 12px;font-size:13px;font-weight:800;text-decoration:none}
.rating-pill{border:0;background:#FFF7E8;color:#B54708}
.venue-action:hover{background:var(--paper)}
.venue-action.on{color:var(--blue);border-color:var(--blue-200);background:var(--blue-soft)}
.venue-description{margin:14px 0 0;color:#475467;font-size:14.5px;max-width:92ch}
.section-head{display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap;margin-bottom:16px}
.section-head h2{display:flex;align-items:center;gap:9px}
.section-head h2 small{font-size:12px;color:var(--faint);font-weight:700;letter-spacing:0}
.free-tag,.option-count{border-radius:999px;padding:4px 9px;background:#ECFDF3;color:var(--emerald);text-transform:uppercase;font-size:10px;font-weight:800;letter-spacing:.05em}
.facility-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.facility-item{border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;gap:11px;align-items:center;min-width:0;min-height:66px;background:#fff}
.facility-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;background:linear-gradient(145deg,#F5F8FF,#E9F1FF);border:1px solid #D9E5FF;box-shadow:0 4px 12px rgba(37,99,235,.08)}
.facility-icon img{display:block;width:21px;height:21px}
.facility-item b{display:block;font-size:12.5px;line-height:1.2}
.facility-item small{display:block;color:var(--faint);font-size:10.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.step-dot{width:27px;height:27px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--blue);color:#fff;font-size:13px;flex:none}
.month-picker{position:relative;border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:12px;font-weight:800;color:#475467;cursor:pointer}
.month-picker input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.date-rail{display:grid;grid-template-columns:repeat(7,minmax(70px,1fr));gap:8px;margin-bottom:19px;overflow-x:auto;padding:2px;max-width:100%}
.date-card{border:1px solid var(--line);border-radius:12px;background:#fff;padding:10px 6px;text-align:center;min-height:78px}
.date-card span,.date-card small{display:block}
.date-card span{font-size:10px;color:var(--faint);font-weight:800;text-transform:uppercase}
.date-card b{display:block;font-size:20px;line-height:1.25;margin:2px 0}
.date-card small{font-size:10px;color:var(--emerald);font-weight:800}
.date-card.on{border:2px solid var(--blue);background:var(--blue-soft);color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.08)}
.date-card.full small{color:var(--danger)}
.slots-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px;font-size:13px;flex-wrap:wrap}
.slots-head .legend{margin:0}
.legend-selected{background:var(--blue)}
.legend-available{background:#fff;border:1px solid var(--line)}
.legend-booked{background:var(--paper)}
.booking-controls{display:flex;align-items:center;gap:18px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:16px;margin-top:16px}
.booking-controls b{font-size:12px;color:var(--muted)}
.booking-controls>div{display:flex;align-items:center;gap:9px}
.segmented{display:inline-flex;background:var(--paper);border-radius:10px;padding:3px;max-width:100%;overflow-x:auto}
.segmented button{border:0;background:none;border-radius:8px;padding:7px 12px;font-size:12px;font-weight:800;color:var(--muted)}
.segmented button.on{background:#fff;color:var(--blue);box-shadow:var(--shadow)}
.stepper{display:inline-grid!important;grid-template-columns:34px 36px 34px;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.stepper button{height:34px;border:0;background:#fff;color:var(--blue);font-size:20px}
.stepper button:disabled{color:var(--faint);cursor:not-allowed}
.stepper strong{text-align:center;font-size:13px}
.peak-note{margin:0 0 0 auto;color:var(--faint);font-size:11.5px}
.service-list{display:grid;gap:10px}
.service-option{width:100%;border:1px solid var(--line);border-radius:13px;background:#fff;padding:16px 18px;text-align:left;display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:12px;align-items:start}
.service-option:hover{border-color:var(--blue-200)}
.service-option.on{border:2px solid var(--blue);background:rgba(234,241,254,.48)}
.service-radio{width:20px;height:20px;border:2px solid var(--line-strong);border-radius:50%;margin-top:2px}
.service-option.on .service-radio{border:6px solid var(--blue)}
.service-main{min-width:0}
.service-title{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.service-title b{font-size:15px}
.service-title em{font-style:normal;border-radius:999px;background:#FFF7E8;color:#B54708;padding:3px 8px;font-size:9px;font-weight:800;text-transform:uppercase}
.service-meta{display:flex;gap:16px;color:var(--faint);font-size:11.5px;margin-top:5px;flex-wrap:wrap}
.service-benefits{grid-column:2/4;border-top:1px dashed var(--line);padding-top:10px;margin-top:1px;display:flex;gap:13px;align-items:center;flex-wrap:wrap;color:#344054;font-size:11.5px;font-weight:700}
.service-benefits small{color:var(--emerald);font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.service-price{font-size:16px;font-weight:800;white-space:nowrap}
.service-price small{color:var(--faint);font-size:10px}
.venue-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.venue-info-grid p{color:var(--muted);font-size:13px;margin:13px 0 0}
.map-card{height:155px;border:1px dashed var(--line-strong);border-radius:12px;background:linear-gradient(135deg,var(--blue-soft),#fff);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;margin-top:15px;color:var(--blue)}
.map-card span{font-size:29px}.map-card b{font-size:13px}
.know-list{list-style:none;padding:0;margin:15px 0 0;display:grid;gap:12px}
.know-list li{padding-left:25px;position:relative;color:#475467;font-size:13px}
.know-list li::before{content:"✓";position:absolute;left:0;color:var(--emerald);font-weight:900}
.review-summary{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:18px;align-items:end;border-bottom:1px solid var(--line);padding-bottom:17px}
.review-summary>strong{font-size:42px;line-height:1;color:var(--ink)}
.review-summary div{display:flex;justify-content:space-between;gap:8px;font-size:12px}
.review-summary div b{color:var(--muted)}
.review-quotes{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:17px}
.review-quote{font-size:13px;color:#475467}.review-quote b{display:block;color:var(--ink);margin-bottom:5px}
.booking-aside{min-width:0;align-self:stretch}
.booking-summary{position:sticky;top:82px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:20px}
.summary-price{display:flex;align-items:baseline;gap:6px}.summary-price strong{font-size:26px;letter-spacing:-.03em}.summary-price span{color:var(--faint);font-size:11px;font-weight:700}
.cancel-note{color:var(--emerald);font-size:11.5px;font-weight:800;margin:3px 0 18px}
.summary-selections{display:grid;gap:8px}
.summary-selections button{width:100%;border:1px solid var(--line);background:#fff;border-radius:11px;padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left}
.summary-selections span{min-width:0}.summary-selections small{display:block;color:var(--faint);font-size:9.5px;text-transform:uppercase;font-weight:800;letter-spacing:.07em}.summary-selections b{display:block;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.summary-selections i{font-style:normal;color:var(--faint)}
.summary-free{background:#F8FAFC;border:1px solid var(--line);border-radius:11px;padding:12px;margin-top:11px}.summary-free>small{color:var(--emerald);font-weight:800;text-transform:uppercase;letter-spacing:.06em}.summary-free ul{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:5px}.summary-free li{font-size:11.5px;font-weight:700;padding-left:17px;position:relative}.summary-free li::before{content:"✓";position:absolute;left:0;color:var(--emerald)}
.summary-costs{margin:13px 0}.summary-costs p{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:7px 0;font-size:11.5px;color:var(--muted)}.summary-costs b{color:var(--ink)}.summary-costs .summary-total{border-top:1px solid var(--line);padding-top:11px;margin-top:11px;color:var(--ink);font-size:14px;font-weight:800}.summary-total b{font-size:20px}
.booking-summary .btn+.btn{margin-top:8px}.instant-note{text-align:center;color:var(--faint);font-size:10.5px;margin:11px 0 0}
.gallery-overlay{align-items:center;padding:24px}.gallery-dialog{position:relative;width:min(1100px,96vw);height:min(760px,88vh);background:#0C1220;border-radius:18px;overflow:hidden}.gallery-dialog>img{width:100%;height:100%;object-fit:contain}.gallery-dialog .x{z-index:2;background:rgba(255,255,255,.92)}.gallery-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:64px;border:0;border-radius:10px;background:rgba(255,255,255,.92);font-size:36px}.gallery-prev{left:16px}.gallery-next{right:16px}.gallery-dialog-count{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);background:rgba(16,24,40,.8);color:#fff;border-radius:999px;padding:7px 13px;font-size:12px;font-weight:800}
.pill{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:8px 14px;font-size:13px;font-weight:700}
.book-panel{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--line);
  padding:26px;margin:24px 0 100px}
.flow-label{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:800;margin:26px 0 12px}
.flow-label:first-child{margin-top:0}
.opt{border:1.5px solid var(--line-strong);background:var(--card);border-radius:12px;padding:11px 15px;font-weight:700;font-size:14px;
  display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;transition:all .15s;text-align:left}
.opt small{color:var(--muted);font-weight:600;font-size:12.5px}
.opt:hover{border-color:var(--blue-200)}
.opt.on{border-color:var(--blue);background:var(--blue-soft);color:var(--blue-deep)}
.opt.on small{color:var(--blue-deep)}
.optrow{display:flex;gap:10px;flex-wrap:wrap}
.date-in{border:1.5px solid var(--line-strong);border-radius:12px;padding:11px 15px;font-weight:700;background:var(--card)}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:8px}
.slots>p{grid-column:1/-1;margin:4px 0}
.slot{border:1px solid var(--line-strong);background:var(--card);border-radius:10px;padding:12px 4px;text-align:center;font-weight:700;
  font-size:14px;font-variant-numeric:tabular-nums;transition:all .12s}
.slot:hover{border-color:var(--blue);background:var(--blue-soft)}
.slot.on{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:800}
.slot.off{background:var(--paper);color:var(--faint);border-color:transparent;text-decoration:line-through;cursor:not-allowed}
.legend{display:flex;gap:18px;color:var(--muted);font-size:13px;margin-top:14px;flex-wrap:wrap}
.legend i{width:14px;height:14px;border-radius:4px;display:inline-block;vertical-align:-2px;margin-right:6px}

/* sticky summary */
.staybar{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--ink);color:#fff;
  box-shadow:0 -12px 30px rgba(16,24,40,.28)}
.staybar-in{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0}
.staybar .sum{min-width:0}
.staybar .sum b{font-size:16px;font-variant-numeric:tabular-nums}
.staybar .sum span{display:block;color:#9AA3B2;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(min-width:981px){#view-venue .staybar{display:none!important}}
@media(max-width:1120px){
  .venue-layout{grid-template-columns:minmax(0,1fr) 320px}
  .facility-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:980px){
  .venue-layout{grid-template-columns:1fr}
  .booking-aside{display:none}
  .venue-gallery{height:360px}
}
@media(max-width:700px){
  .venue-page{padding-top:12px;padding-bottom:90px}
  .venue-gallery{height:270px}
  .gallery-main{border-radius:14px}
  .venue-card{padding:18px}.venue-head{display:block}.venue-actions{justify-content:flex-start;margin-top:14px}
  .venue-info-grid,.review-quotes{grid-template-columns:1fr}
  .review-summary{grid-template-columns:1fr 1fr}.review-summary>strong{grid-column:1/-1}
  .date-rail{grid-template-columns:repeat(7,74px)}
  .booking-controls #v-res-wrap{width:100%;min-width:0}
  .booking-controls #v-res-wrap .segmented{flex:1;min-width:0}
  .service-option{padding:14px;grid-template-columns:24px minmax(0,1fr)}.service-price{grid-column:2}.service-benefits{grid-column:2}
}
@media(max-width:480px){
  .facility-grid{grid-template-columns:1fr 1fr}.facility-item{padding:9px 8px;gap:8px;min-height:58px}.facility-icon{width:34px;height:34px;border-radius:10px}.facility-icon img{width:18px;height:18px}.facility-item small{display:none}
  .booking-controls{align-items:flex-start}.peak-note{width:100%;margin:0}
  .venue-action{padding:7px 10px}.venue-intro .venue-head h1{font-size:25px}
  .gallery-status{left:10px;bottom:10px}.gallery-all{right:10px!important;bottom:10px!important}
  .gallery-overlay{padding:0}.gallery-dialog{width:100vw;height:100vh;border-radius:0}
}

/* ============ SHEET / MODAL ============ */
.overlay{position:fixed;inset:0;background:rgba(16,24,40,.5);backdrop-filter:blur(3px);z-index:80;
  display:flex;align-items:flex-end;justify-content:center}
@media(min-width:640px){.overlay{align-items:center}}
.sheet{background:var(--card);width:100%;max-width:520px;max-height:92vh;overflow:auto;
  border-radius:20px 20px 0 0;padding:26px 24px 30px;position:relative}
@media(min-width:640px){.sheet{border-radius:20px}}
.sheet h3{font-size:21px;font-weight:800;letter-spacing:-.02em;margin:0 0 4px}
.sheet .sub{color:var(--muted);font-size:14px;margin:0 0 20px}
.x{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:none;background:var(--paper);
  font-size:16px;font-weight:700;color:var(--muted)}
.x:hover{background:var(--line)}
.f-label{font-weight:700;font-size:13px;margin:16px 0 6px;display:block;color:#475467}
.f-in{width:100%;border:1.5px solid var(--line-strong);border-radius:10px;padding:12px 14px;font-weight:600;background:var(--card);color:var(--ink)}
.f-in:focus{border-color:var(--blue);outline:none}
.f-err{color:var(--danger);font-size:13.5px;min-height:18px;margin-top:6px;font-weight:600}
.paychoice{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.summ{background:var(--canvas);border:1px solid var(--line);border-radius:12px;padding:16px;font-size:14.5px;margin-bottom:6px}
.summ b{font-weight:800}
.summ .amt{font-size:19px;font-weight:800;color:var(--ink);margin-top:6px;font-variant-numeric:tabular-nums}
.qr-box{border:2px solid var(--blue);border-radius:14px;overflow:hidden;max-width:230px;margin:14px auto}
.qr-box .t{background:var(--blue);color:#fff;font-weight:800;font-size:12.5px;text-align:center;padding:8px}
.qr-ph{aspect-ratio:1;background:repeating-conic-gradient(var(--ink) 0% 25%,#fff 0% 50%) 50%/14px 14px;position:relative}
.qr-ph b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.qr-ph b span{background:#fff;color:var(--blue-deep);font-size:12px;font-weight:800;padding:5px 9px;border-radius:6px}
.file-line{display:flex;align-items:center;gap:10px;border:1.5px dashed var(--line-strong);border-radius:12px;padding:12px 14px;cursor:pointer}
.file-line b{background:var(--blue-soft);color:var(--blue-deep);border-radius:999px;padding:7px 14px;font-size:13px}
.file-line span{color:var(--muted);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;border:1.5px solid var(--line-strong);
  background:var(--card);border-radius:10px;padding:13px;font-weight:700;font-size:15px}
.gbtn:hover{background:var(--canvas)}
.or{display:flex;align-items:center;gap:14px;color:var(--faint);font-size:12px;margin:18px 0;letter-spacing:.1em}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.tabs2{display:grid;grid-template-columns:1fr 1fr;background:var(--paper);border-radius:12px;padding:5px;margin-bottom:20px}
.tabs2 button{border:none;background:none;border-radius:9px;padding:10px;font-weight:800;font-size:14px;color:var(--muted)}
.tabs2 button.on{background:var(--card);color:var(--blue-deep);box-shadow:0 2px 8px rgba(16,24,40,.08)}
.success-ic{width:60px;height:60px;border-radius:50%;background:#ECFDF3;display:flex;align-items:center;justify-content:center;margin:6px auto 14px}
.success-ic svg{width:28px;height:28px;stroke:var(--emerald);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ref{font-weight:800;font-size:17px;background:var(--blue-soft);border:1.5px dashed var(--blue-200);border-radius:12px;
  padding:12px;text-align:center;letter-spacing:.05em;margin:10px 0 16px;color:var(--blue-deep);font-variant-numeric:tabular-nums}

/* ============ DASHBOARD ============ */
.dash-note{background:var(--blue-soft);color:var(--blue-deep);font-weight:700;font-size:13px;text-align:center;padding:10px;border-bottom:1px solid var(--blue-100)}
.dash-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;padding:30px 0 8px;flex-wrap:wrap}
.dash-head h1{font-size:clamp(24px,3.2vw,30px);font-weight:800;letter-spacing:-.025em;margin:0}
.dash-head p{color:var(--muted);margin:4px 0 0;font-size:14px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:20px 0}
@media(max-width:640px){.stats{grid-template-columns:1fr}}
.stat{background:var(--card);border-radius:var(--radius);padding:18px 20px;border:1px solid var(--line);box-shadow:var(--shadow)}
.stat b{font-size:27px;font-weight:800;letter-spacing:-.03em;display:block;font-variant-numeric:normal;line-height:1.1}
.stat span{color:var(--muted);font-size:13px;font-weight:600}
.panel{background:var(--card);border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow);padding:22px;margin:0 0 14px}
.panel h3{margin:0 0 4px;font-size:15.5px;font-weight:800;letter-spacing:-.01em}
.panel .hint{color:var(--muted);font-size:13px;margin:0 0 16px}
.sched div{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
.sched div:last-child{border-bottom:none}
.sched b{font-variant-numeric:tabular-nums}
.sched span{color:var(--muted)}
.svc-row{display:grid;grid-template-columns:1.4fr .6fr .9fr auto;gap:12px;align-items:center;
  padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
.svc-row:last-child{border-bottom:none}
.svc-row .f-in{padding:9px 12px}
.svc-row small{color:var(--muted)}
.tgl{width:42px;height:24px;border-radius:999px;border:none;background:var(--line-strong);position:relative;transition:background .15s}
.tgl::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;
  box-shadow:0 1px 2px rgba(16,24,40,.25);transition:left .15s}
.tgl.on{background:var(--emerald-deep)}
.tgl.on::after{left:21px}
@media(max-width:620px){.svc-row{grid-template-columns:1fr .8fr auto}.svc-row .dur{display:none}
  .svc-row>*{min-width:0}.svc-row .f-in{padding:9px 8px;font-size:14px}}
@media(max-width:520px){.sched div{flex-wrap:wrap;row-gap:2px}.sched div b:first-child{width:100%}}

/* pricing cards on business page */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
@media(max-width:860px){.tiers{grid-template-columns:1fr}}
.tier{background:var(--card);border-radius:var(--radius);padding:26px;border:1px solid var(--line);box-shadow:var(--shadow);position:relative}
.tier.hot{border:2px solid var(--blue);box-shadow:0 12px 32px rgba(37,99,235,.14)}
.tier .tag2{position:absolute;top:-12px;left:24px;background:var(--blue);color:#fff;font-size:11px;
  font-weight:800;letter-spacing:.12em;padding:5px 12px;border-radius:7px}
.tier h3{margin:0;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tier .pr{font-size:31px;font-weight:800;letter-spacing:-.03em;margin:10px 0 2px}
.tier .pr small{font-size:13px;color:var(--muted);font-weight:600;letter-spacing:0}
.tier ul{list-style:none;padding:0;margin:18px 0 22px}
.tier li{padding:7px 0 7px 26px;position:relative;font-size:14px;color:#475467}
.tier li::before{content:"✓";position:absolute;left:0;color:var(--emerald);font-weight:800}

/* toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;
  padding:13px 22px;border-radius:12px;font-weight:700;font-size:14px;box-shadow:var(--shadow-lg);opacity:0;
  transition:all .25s;z-index:99;pointer-events:none;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}