/* ARI Showcase — cover + website scenes. Layouts: overlay, split, editorial, ledger, board, band. */

/* ================= scene: site ================= */
.site-scene { gap: 0; }
.site-main { flex: 1; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; position: relative; }
.site-main .browser[hidden], .phone-wrap[hidden] { display: none; }
.phone-wrap { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.ph-status { position: absolute; left: 0; right: 0; top: 0; height: 47px; z-index: 40; background: var(--b-surface); color: var(--b-ink);
  font: 600 15px/47px var(--chrome-font); padding-left: 34px; }
.phone-screen .ws-host { position: absolute; left: 0; right: 0; bottom: 0; top: 47px; }
.browser-url .url-lock { display: inline-block; width: 9px; height: 11px; margin-right: 7px; border: 1.5px solid #8a9097; border-radius: 2px; position: relative; top: 1px; }
.browser-url .url-sug { margin-right: 8px; padding: 2px 7px; border-radius: 5px; background: #eef1f5; color: #5d6168; font-size: 11px; }

.site-side .seg { display: flex; padding: 4px; border-radius: 999px; background: var(--stage-2); border: 1px solid var(--stage-line); }
.site-side .seg button { flex: 1; min-height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--chrome-dim); font-weight: 500; font-size: 14px; }
.site-side .seg button[aria-pressed="true"] { background: var(--chrome-ink); color: var(--stage); }
.site-side .seg button:focus-visible { outline: 2px solid var(--chrome-accent); outline-offset: 2px; }
.side-checks { border-top: 1px solid var(--stage-line); padding-top: 4px; min-height: 0; overflow-y: auto; }
.side-checks summary { min-height: 40px; display: flex; align-items: center; font-weight: 600; font-size: 14px; color: var(--chrome-ink); cursor: pointer; }
.side-checks ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 9px; }
.ck { position: relative; padding-left: 20px; font-size: 13.5px; line-height: 1.45; color: #d8dbdf; }
.ck::before { content: ""; position: absolute; left: 2px; top: 6px; width: 8px; height: 8px; border-radius: 50%; }
.ck--yes::before { background: #63c08e; }
.ck--no::before { border: 1.5px solid #e2ad5b; width: 6px; height: 6px; }
.ck--info::before { background: #6b7280; height: 2px; top: 9px; border-radius: 1px; }
.side-quiet { font-size: 14px; color: var(--chrome-dim); border-left: 2px solid var(--stage-line); padding-left: 12px; }
.site-side .side-note { font-size: 13px; }

/* compare: today screenshot over the rebuilt site */
.cmp { position: absolute; left: 0; right: 0; top: 38px; bottom: 0; z-index: 30; touch-action: none; cursor: ew-resize; --x: 50%; }
.cmp[hidden] { display: none; }
.cmp-today { position: absolute; inset: 0; overflow: hidden; background: #fff; clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.cmp-today img { display: block; width: 100%; height: auto; }
.cmp.no-img .cmp-today { background: repeating-linear-gradient(45deg, #eceeed 0 12px, #f6f7f6 12px 24px); }
.cmp-handle { position: absolute; top: 0; bottom: 0; left: var(--x); width: 44px; margin-left: -22px; display: flex; align-items: center; justify-content: center; }
.cmp-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: 21px; width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.cmp-handle span { position: relative; width: 40px; height: 40px; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.3);
  background-image: linear-gradient(#9aa1ab, #9aa1ab), linear-gradient(#9aa1ab, #9aa1ab); background-size: 2px 14px; background-repeat: no-repeat; background-position: 15px 13px, 23px 13px; }
.cmp-handle:focus-visible span { outline: 3px solid var(--chrome-accent); }
.cmp-tag { position: absolute; top: 12px; z-index: 2; padding: 6px 11px; border-radius: 999px; background: rgba(16,18,20,.82); color: #fff; font: 500 12.5px/1 var(--chrome-font); pointer-events: none; }
.cmp-tag--l { left: 12px; } .cmp-tag--r { right: 12px; }
html.is-bare .cmp { top: 0; }
html.is-bare .site-side { display: none; }

@media (max-width: 700px) {
  .site-scene { gap: 8px; }
  .site-side { order: -1; flex-direction: row; flex-wrap: wrap; gap: 8px; padding: 0; }
  .site-side h2, .site-side > p, .site-side .side-note, .site-side .side-checks, .site-side .seg:first-of-type { display: none; }
  .site-side .seg { flex: 1; }
  .site-main { width: 100%; }
}

/* ================= the website ================= */
.ws-host { position: relative; height: 100%; }
.ws-scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.ws-host [hidden] { display: none !important; }
.ws { container-type: inline-size; --p: var(--b-primary); --pi: var(--b-primary-ink); --a: var(--b-accent); --s: var(--b-surface); --k: var(--b-ink);
  --soft: color-mix(in srgb, var(--p) 6%, var(--s)); --line: color-mix(in srgb, var(--k) 13%, transparent); --mut: color-mix(in srgb, var(--k) 68%, var(--s));
  --rad: 10px; --pad: 5cqi;
  background: var(--s); color: var(--k); font: 16px/1.55 var(--b-body); min-height: 100%; }
.ws * { box-sizing: border-box; }
.ws h1, .ws h2, .ws h3, .ws p, .ws ul, .ws ol, .ws dl, .ws dd, .ws blockquote { margin: 0; }
.ws button { font-family: inherit; }
.ws a { color: inherit; }
.ws :focus-visible { outline: 2.5px solid var(--p); outline-offset: 2px; }

/* nav */
.ws-nav { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 18px; padding: 12px var(--pad); min-height: 66px;
  background: color-mix(in srgb, var(--s) 93%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.ws-brand { display: inline-flex; align-items: center; min-width: 0; }
.ws-word { font: 700 19px/1.1 var(--b-display); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 44cqi; }
.ws-logo { display: block; height: 38px; width: auto; max-width: 180px; object-fit: contain; }
.ws-links { display: flex; gap: 2px; margin-left: auto; }
.ws-links button { min-height: 44px; padding: 0 12px; border: 0; background: none; color: var(--k); font-size: 14.5px; font-weight: 500; border-radius: 8px; }
.ws-navtel { flex: none; display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border-radius: var(--rad); border: 0; background: var(--p); color: var(--pi) !important;
  font: 600 14.5px/1 var(--b-body); text-decoration: none; white-space: nowrap; }

/* buttons */
.ws-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.ws-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 22px; border-radius: var(--rad); border: 1.5px solid transparent;
  font: 600 15.5px/1.1 var(--b-body); text-decoration: none; cursor: pointer; text-align: center; }
.ws-btn--main, .ws-btn--accent { background: var(--p); color: var(--pi) !important; }
.ws-btn--ghost { background: transparent; border-color: currentColor; color: inherit; }
.ws-link { color: inherit; font-weight: 600; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.ws-today { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 8px 14px; border-radius: 999px; background: var(--soft); font-size: 14px; font-weight: 500; }
.ws-today i { width: 8px; height: 8px; border-radius: 50%; background: #2f9e64; }
.ws-muted { color: var(--mut); }

/* photos and designed fallbacks */
.ws-photo { position: relative; overflow: hidden; background: var(--soft); }
.ws-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ws-photo.is-fallback { background:
  radial-gradient(110% 80% at 88% 8%, color-mix(in srgb, var(--a) 60%, transparent), transparent 62%),
  linear-gradient(150deg, color-mix(in srgb, var(--p) 88%, #fff), color-mix(in srgb, var(--p) 62%, #000)); }
.ws-photo.is-fallback::before { content: ""; position: absolute; inset: 0; opacity: .22;
  background-image: radial-gradient(circle at 1px 1px, #fff 1.2px, transparent 1.6px); background-size: 22px 22px; }
.wcat-roofing .is-fallback::before, .wcat-property .is-fallback::before { opacity: .16;
  background-image: repeating-linear-gradient(0deg, transparent 0 26px, #fff 26px 28px), repeating-linear-gradient(90deg, transparent 0 52px, #fff 52px 54px); background-size: auto; }
.wcat-auto .is-fallback::before, .wcat-transport .is-fallback::before { opacity: .14; background-image: repeating-linear-gradient(135deg, #fff 0 14px, transparent 14px 40px); background-size: auto; }
.wcat-hvac .is-fallback::before { opacity: .18; background-image: repeating-radial-gradient(circle at 80% 120%, transparent 0 22px, #fff 22px 24px); background-size: auto; }
.wcat-medspa .is-fallback::before, .wcat-salon .is-fallback::before { opacity: .2; background-image: radial-gradient(circle at 30% 70%, #fff 0 18%, transparent 19%), radial-gradient(circle at 75% 35%, #fff 0 11%, transparent 12%); background-size: 100% 100%; }
.wcat-law .is-fallback::before, .wcat-cpa .is-fallback::before, .wcat-services .is-fallback::before, .wcat-insurance .is-fallback::before { opacity: .14; background-image: repeating-linear-gradient(0deg, #fff 0 1px, transparent 1px 18px); background-size: auto; }
.wcat-grocery .is-fallback::before, .wcat-restaurant .is-fallback::before, .wcat-retail .is-fallback::before { opacity: .14;
  background-image: linear-gradient(45deg, #fff 25%, transparent 25% 75%, #fff 75%), linear-gradient(45deg, #fff 25%, transparent 25% 75%, #fff 75%); background-size: 36px 36px; background-position: 0 0, 18px 18px; }
.wcat-childcare .is-fallback::before, .wcat-education .is-fallback::before { opacity: .2; background-image: radial-gradient(circle, #fff 0 5px, transparent 6px); background-size: 46px 46px; }
.ws-fb-mark { position: absolute; left: 14px; bottom: 12px; z-index: 1; font: 500 12px/1 var(--chrome-font); color: rgba(255,255,255,.85); padding: 6px 9px; border-radius: 999px; background: rgba(0,0,0,.22); }

/* type */
.ws-h1 { font-family: var(--b-display); text-wrap: balance; overflow-wrap: anywhere; }
.ws-kicker { font-size: 15px; font-weight: 500; }
.ws-sub { font-size: 18px; line-height: 1.5; max-width: 46ch; }

/* ---------- layout: overlay (trades, property) ---------- */
.ws--overlay { --rad: 6px; }
.ws--overlay .ws-hero { position: relative; display: flex; align-items: flex-end; min-height: 580px; color: #fff; background: var(--p); }
.ws--overlay .ws-hero-bg { position: absolute; inset: 0; }
.ws--overlay .ws-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.25) 40%, rgba(0,0,0,.72) 100%); }
.ws--overlay .ws-hero-in { position: relative; z-index: 1; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 40px; align-items: end; padding: 140px var(--pad) 56px; }
.ws--overlay .ws-kicker::before { content: ""; display: block; width: 48px; height: 5px; background: var(--a); margin-bottom: 18px; }
.ws--overlay .ws-h1 { margin: 10px 0 16px; font-weight: 800; font-size: clamp(40px, 6.2cqi, 82px); line-height: .96; letter-spacing: -.025em; }
.ws--overlay .ws-sub { margin-bottom: 26px; color: rgba(255,255,255,.9); }
.ws--overlay .ws-hero .ws-btn--ghost { color: #fff; }
.ws-hero-card { background: var(--s); color: var(--k); padding: 24px; border-radius: 6px; border-top: 6px solid var(--a); box-shadow: 0 24px 60px rgba(0,0,0,.35); display: grid; gap: 12px; }
.ws-card-t { font-weight: 700; font-size: 17px; }
.ws-bigtel { font: 800 30px/1 var(--b-display); letter-spacing: -.01em; text-decoration: none; color: var(--k) !important; }
.ws-card-addr { font-size: 14px; color: var(--mut); }
.ws-hero-card .ws-today { margin: 0; justify-self: start; }
.ws--overlay .ws-svc { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.ws--overlay .ws-svc li { border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; padding: 26px 24px 30px; position: relative; }
.ws--overlay .ws-svc li::before { content: ""; display: block; width: 28px; height: 4px; background: var(--a); margin-bottom: 18px; }
.ws--overlay .ws-svc h3 { font-family: var(--b-display); font-weight: 800; font-size: 20px; letter-spacing: -.01em; }

/* ---------- layout: split (clinics, care) ---------- */
.ws--split { --rad: 14px; }
.ws--split .ws-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 5cqi; align-items: center; padding: 64px var(--pad) 80px; }
.ws--split .ws-kicker { display: inline-flex; align-items: center; gap: 10px; }
.ws--split .ws-kicker::before { content: ""; width: 12px; height: 12px; border-radius: 4px; background: var(--a); }
.ws--split .ws-h1 { margin: 16px 0 18px; font-weight: 700; font-size: clamp(38px, 5.2cqi, 66px); line-height: 1.03; letter-spacing: -.025em; }
.ws--split .ws-sub { margin-bottom: 28px; color: var(--mut); }
.ws--split .ws-hero-art { position: relative; aspect-ratio: 1 / .92; }
.ws--split .ws-hero-art .ws-photo { position: absolute; inset: 0 22px 22px 0; border-radius: 30px 30px 30px 130px; }
.ws-blob { position: absolute; right: 0; bottom: 0; width: 56%; height: 56%; border-radius: 34px; background: var(--a); }
.ws--split .ws-services { background: var(--soft); }
.ws--split .ws-svc li { background: var(--s); border: 0; border-radius: 18px; box-shadow: 0 1px 0 var(--line); }

/* ---------- layout: editorial (med spa, salon, real estate) ---------- */
.ws--editorial { --rad: 999px; }
.ws--editorial .ws-nav { background: color-mix(in srgb, var(--s) 96%, transparent); }
.ws--editorial .ws-hero { padding: 72px var(--pad) 0; }
.ws--editorial .ws-kicker { color: var(--mut); font-size: 15px; }
.ws--editorial .ws-h1 { margin-top: 18px; font-weight: 380; font-size: clamp(46px, 8cqi, 116px); line-height: .98; letter-spacing: -.035em; max-width: 15ch; }
.ws-hero-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin: 34px 0 44px; padding-top: 24px; border-top: 1px solid var(--line); }
.ws--editorial .ws-sub { color: var(--mut); }
.ws--editorial .ws-btn { padding: 0 26px; }
.ws-hero-wide { aspect-ratio: 21 / 8; border-radius: 3px; }
.ws-caption { padding: 12px 0 0; font-size: 13.5px; color: var(--mut); text-align: right; }
.ws--editorial .ws-sec h2 { font-weight: 400; font-size: clamp(32px, 4cqi, 52px); letter-spacing: -.025em; }
.ws--editorial .ws-svc { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 5cqi; }
.ws--editorial .ws-svc li { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 22px 0 26px; }
.ws--editorial .ws-svc h3 { font-family: var(--b-display); font-weight: 400; font-size: 26px; letter-spacing: -.015em; margin-bottom: 4px; }
.ws--editorial .ws-about { background: var(--s); border-top: 1px solid var(--line); }
.ws--editorial .ws-quote { font-size: 24px; line-height: 1.35; border-left: 0; padding-left: 0; }
.ws--editorial .ws-quote::before { content: "“"; display: block; font: 400 60px/0.6 var(--b-display); color: var(--a); margin: 14px 0 6px; }

/* ---------- layout: ledger (law, cpa, office counters) ---------- */
.ws--ledger { --rad: 3px; }
.ws--ledger .ws-nav { border-top: 5px solid var(--p); }
.ws--ledger .ws-hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 6cqi; padding: 84px var(--pad) 80px; border-bottom: 1px solid var(--line); }
.ws--ledger .ws-kicker { color: var(--mut); }
.ws--ledger .ws-h1 { margin: 14px 0 20px; font-weight: 400; font-size: clamp(40px, 5.4cqi, 72px); line-height: 1.04; letter-spacing: -.02em; }
.ws--ledger .ws-sub { margin-bottom: 28px; color: var(--mut); }
.ws-index { border-left: 1px solid var(--line); padding-left: 32px; align-self: end; }
.ws-index-t { font-size: 13.5px; color: var(--mut); margin-bottom: 8px; }
.ws-index ol { list-style: none; padding: 0; }
.ws-index li { border-bottom: 1px solid var(--line); }
.ws-index button { width: 100%; min-height: 54px; padding: 0; border: 0; background: none; text-align: left; font: 400 21px/1.2 var(--b-display); color: var(--k); }
.ws-index .tag-sample { margin-top: 12px; }
.ws--ledger .ws-svc { display: block; border-top: 2px solid var(--k); }
.ws--ledger .ws-svc li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 32px; padding: 22px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.ws--ledger .ws-svc h3 { font-family: var(--b-display); font-weight: 400; font-size: 23px; }
.ws--ledger .ws-about { background: var(--soft); }
.ws--ledger .ws-sec h2 { font-weight: 400; }

/* ---------- layout: board (storefronts, auto) ---------- */
.ws--board { --rad: 8px; }
.ws--board .ws-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 540px; }
.ws-sign { background: var(--p); color: var(--pi); padding: 56px var(--pad); display: flex; flex-direction: column; justify-content: center; }
.ws-sign .ws-kicker { opacity: .85; }
.ws-sign .ws-h1 { margin: 12px 0 0; font-weight: 800; font-size: clamp(40px, 5.6cqi, 76px); line-height: .95; letter-spacing: -.03em; }
.ws-sign-today { margin: 30px 0 30px; padding: 16px 20px; border-left: 8px solid var(--a); background: color-mix(in srgb, var(--pi) 10%, transparent); border-radius: 0 8px 8px 0; display: grid; gap: 4px; }
.ws-sign-today span { font-size: 13.5px; opacity: .85; }
.ws-sign-today strong { font: 700 clamp(20px, 2.6cqi, 30px)/1.15 var(--b-display); }
.ws-sign .ws-btn--main { background: var(--pi); color: var(--p) !important; }
.ws-sign .ws-btn--ghost { color: var(--pi); }
.ws--board .ws-hero-art { position: relative; min-height: 320px; }
.ws--board .ws-hero-art .ws-photo { position: absolute; inset: 0; }
.ws-sign-addr { position: absolute; left: 20px; top: 20px; right: 20px; max-width: 360px; z-index: 2; background: var(--s); color: var(--k); padding: 14px 16px; border-radius: 8px; font-weight: 600; font-size: 15px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.ws--board .ws-svc { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.ws--board .ws-svc li { background: var(--soft); border: 0; padding: 22px 20px 24px; }
.ws--board .ws-svc h3 { font-family: var(--b-display); font-weight: 800; font-size: 20px; display: inline; background: linear-gradient(transparent 62%, color-mix(in srgb, var(--a) 55%, transparent) 62%); }
.ws--board .ws-svc p { margin-top: 10px; }
.ws--board .ws-visit { background: var(--soft); }

/* ---------- layout: band (insurance, education, transport) ---------- */
.ws--band { --rad: 10px; }
.ws--band .ws-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 4cqi; align-items: end; padding: 72px var(--pad) 0; background: var(--p); color: var(--pi); }
.ws--band .ws-hero-copy { padding-bottom: 64px; }
.ws--band .ws-kicker { opacity: .85; }
.ws--band .ws-h1 { margin: 12px 0 18px; font-weight: 700; font-size: clamp(40px, 5.6cqi, 74px); line-height: 1; letter-spacing: -.03em; }
.ws--band .ws-sub { margin-bottom: 28px; opacity: .92; }
.ws--band .ws-hero .ws-btn--main { background: var(--pi); color: var(--p) !important; }
.ws--band .ws-hero .ws-btn--ghost { color: var(--pi); }
.ws--band .ws-hero-art .ws-photo { aspect-ratio: 4 / 4.4; border-radius: 18px 18px 0 0; }
.ws-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); background: var(--s); }
.ws-strip > div { padding: 22px var(--pad); border-right: 1px solid var(--line); display: grid; gap: 2px; min-width: 0; }
.ws-strip > div:first-child { border-top: 5px solid var(--a); }
.ws-strip > div:last-child { border-right: 0; }
.ws-strip span { font-size: 13px; color: var(--mut); }
.ws-strip strong { font: 700 19px/1.25 var(--b-display); overflow-wrap: anywhere; }
.ws-strip-tel { text-decoration: none; }
.ws--band .ws-svc { display: block; }
.ws--band .ws-svc li { display: flex; align-items: baseline; gap: 28px; padding: 22px 26px; border: 0; border-radius: var(--rad); }
.ws--band .ws-svc li:nth-child(odd) { background: var(--soft); }
.ws--band .ws-svc h3 { flex: 0 0 38%; font-family: var(--b-display); font-weight: 700; font-size: 20px; }

/* ---------- shared sections ---------- */
.ws-sec { padding: 76px var(--pad); }
.ws-sec h2 { font: 700 clamp(28px, 3.3cqi, 42px)/1.1 var(--b-display); letter-spacing: -.02em; }
.ws-sec h3 { font-size: 18px; font-weight: 650; line-height: 1.25; }
.ws-sec-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 30px; }
.ws-svc { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.ws-svc li { padding: 22px; border: 1px solid var(--line); border-radius: var(--rad); min-width: 0; }
.ws-svc p { margin-top: 6px; color: var(--mut); font-size: 15px; }
.ws-about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 5cqi; align-items: center; background: var(--soft); }
.ws-about:not(:has(.ws-about-photo)) { grid-template-columns: minmax(0, 1fr); }
.ws-about-in { max-width: 680px; }
.ws-about-body { margin-top: 20px; display: grid; gap: 18px; }
.ws-lead { font: 400 22px/1.4 var(--b-display); }
.ws-quote { font: 400 19px/1.45 var(--b-display); padding-left: 18px; border-left: 3px solid var(--a); }
.ws-people { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.ws-people li { display: grid; gap: 2px; }
.ws-people span { color: var(--mut); font-size: 14.5px; }
.ws-about-photo { aspect-ratio: 4 / 3; border-radius: var(--rad); }
.ws--editorial .ws-about-photo { border-radius: 3px; }

.ws-visit { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 5cqi; align-items: stretch; }
.ws-map { position: relative; min-height: 340px; border-radius: var(--rad); overflow: hidden; border: 1px solid var(--line); }
.ws--editorial .ws-map { border-radius: 3px; }
.ws-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ws-map .m-bg { fill: color-mix(in srgb, var(--p) 5%, #f1f2ee); }
.ws-map .m-park rect { fill: color-mix(in srgb, #8fbf8c 40%, #f1f2ee); }
.ws-map .m-water { fill: none; stroke: #b7d4e6; stroke-width: 26; stroke-linecap: round; }
.ws-map .m-streets line { stroke: #fff; stroke-width: 7; }
.ws-map .m-main { fill: none; stroke: color-mix(in srgb, var(--a) 70%, #fff); stroke-width: 12; }
.ws-map .m-pin path { fill: var(--p); stroke: #fff; stroke-width: 2.5; }
.ws-map .m-halo { fill: var(--p); opacity: .14; }
.ws-map .m-dot { fill: var(--pi); }
.ws-map-label { position: absolute; left: 16px; bottom: 16px; right: 16px; max-width: 340px; background: var(--s); padding: 12px 16px; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.14); display: grid; gap: 2px; font-size: 14px; }
.ws-map-label span { color: var(--mut); }
.ws-visit-info h2 { margin-bottom: 14px; }
.ws-visit-info h3 { margin: 26px 0 8px; font-size: 15px; color: var(--mut); font-weight: 600; }
.ws-addr { font-size: 18px; line-height: 1.45; }
.ws-visit-tel { margin-top: 10px; font-size: 18px; }
.ws-hours div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.ws-hours dd { text-align: right; }
.ws-hours .is-today { font-weight: 700; box-shadow: inset 4px 0 0 var(--a); padding-left: 12px; }
.ws-hours-text { font-size: 16px; }
.ws-hours-text .tag-sample { margin-left: 6px; }

.ws-request { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 5cqi; background: color-mix(in srgb, var(--p) 4%, var(--s)); border-top: 1px solid var(--line); }
.ws-req-side { display: grid; gap: 12px; align-content: start; }
.ws-req-side p { font-size: 17px; }
.ws-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.ws-field { display: grid; gap: 6px; min-width: 0; }
.ws-field--wide { grid-column: 1 / -1; }
.ws-lab { font-size: 14px; font-weight: 600; }
.ws-field input, .ws-field select, .ws-field textarea { width: 100%; min-height: 50px; padding: 0 14px; border: 1.5px solid color-mix(in srgb, var(--k) 22%, transparent); border-radius: min(var(--rad), 12px);
  background: #fff; color: #1a1a1a; font: 16px/1.3 var(--b-body); }
.ws-field textarea { padding: 12px 14px; resize: vertical; }
.ws-field [aria-invalid="true"] { border-color: #b42318; }
.ws-err { font-style: normal; font-size: 13px; color: #b42318; }
.ws-err:empty { display: none; }
.ws-form-foot { grid-column: 1 / -1; }
.ws-form-foot .ws-btn { min-width: 220px; }
.ws-done { background: #fff; color: #1a1a1a; border-radius: min(var(--rad), 16px); border: 1px solid var(--line); padding: 30px; display: grid; gap: 10px; align-content: start; justify-items: start;
  animation: ws-in .28s ease-out; }
.ws-done h3 { font: 700 24px/1.2 var(--b-display); }
.ws-done .ws-btn--ghost { margin-top: 6px; color: #1a1a1a; }
.ws-done-mark { width: 46px; height: 46px; border-radius: 50%; background: var(--p); position: relative; }
.ws-done-mark::after { content: ""; position: absolute; left: 16px; top: 11px; width: 11px; height: 19px; border: solid var(--pi); border-width: 0 3px 3px 0; transform: rotate(45deg); }
@keyframes ws-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.ws-foot { padding: 48px var(--pad) 28px; background: color-mix(in srgb, var(--k) 92%, var(--p)); color: color-mix(in srgb, var(--s) 92%, transparent); }
.ws-foot-in { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.ws-foot-in p { margin-top: 8px; font-size: 14.5px; }
.ws-foot .ws-logo { background: #fff; padding: 4px 8px; border-radius: 6px; height: 40px; }
.ws-foot-note { margin-top: 30px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14); font-size: 12.5px; opacity: .7; }

/* assistant */
.ws-chat-btn { position: absolute; right: 18px; bottom: 18px; z-index: 20; display: flex; align-items: center; gap: 10px; min-height: 50px; max-width: calc(100% - 36px); padding: 0 20px 0 16px;
  border: 0; border-radius: 999px; background: var(--b-primary); color: var(--b-primary-ink); font: 600 15px/1 var(--b-body); box-shadow: 0 12px 32px rgba(0,0,0,.28); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-chat-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--b-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--b-primary-ink) 30%, transparent); }
.ws-chat { position: absolute; right: 14px; bottom: 14px; z-index: 21; width: min(370px, calc(100% - 28px)); height: min(500px, calc(100% - 28px)); display: flex; flex-direction: column;
  background: #fff; color: #1a1a1a; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 70px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.06); font-family: var(--b-body); animation: ws-in .2s ease-out; }
.ws-chat-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 12px 12px 18px; background: var(--b-primary); color: var(--b-primary-ink); }
.ws-chat-head div { display: grid; min-width: 0; }
.ws-chat-head strong { font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-chat-head span { font-size: 12.5px; opacity: .85; }
.ws-chat-x { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--b-primary-ink) 40%, transparent); background: transparent; color: inherit; font-size: 13.5px; }
.ws-chat-log { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 8px; }
.ws-msg { max-width: 86%; padding: 10px 13px; font-size: 14.5px; line-height: 1.45; border-radius: 16px 16px 16px 5px; background: #f1f2f0; overflow-wrap: anywhere; }
.ws-msg--me { align-self: flex-end; border-radius: 16px 16px 5px 16px; background: var(--b-primary); color: var(--b-primary-ink); }
.ws-chat-chips { flex: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 10px; }
.ws-chat-chips:empty { display: none; }
.ws-chat-chips button { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid #d9dcd8; background: #fff; color: #1a1a1a; font-size: 13.5px; }
.ws-chat-in { flex: none; display: flex; border-top: 1px solid #e3e5e1; }
.ws-chat-in input { flex: 1; min-width: 0; min-height: 52px; border: 0; padding: 0 16px; font: 16px var(--b-body); color: #1a1a1a; background: #fff; }
.ws-chat-in input:focus { outline: none; }
.ws-chat-in button { min-height: 52px; padding: 0 18px; border: 0; background: none; color: #1a1a1a; font-weight: 700; }

/* ---------- narrow container: phone frame, phone viewport ---------- */
@container (max-width: 760px) {
  .ws { --pad: 22px; font-size: 16px; }
  .ws-links { display: none; }
  .ws-nav { min-height: 60px; gap: 12px; }
  .ws-navtel { margin-left: auto; padding: 0 14px; font-size: 14px; }
  .ws-word { max-width: 52cqi; font-size: 18px; }
  .ws-sec { padding: 52px var(--pad); }
  .ws-sub { font-size: 17px; }
  .ws-btn { flex: 1 1 auto; }
  .ws--overlay .ws-hero { min-height: 0; }
  .ws--overlay .ws-hero-in { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 170px var(--pad) 28px; }
  .ws--overlay .ws-h1 { font-size: clamp(36px, 11cqi, 52px); }
  .ws--split .ws-hero, .ws--ledger .ws-hero, .ws--band .ws-hero, .ws--board .ws-hero { grid-template-columns: minmax(0, 1fr); }
  .ws--split .ws-hero { padding: 36px var(--pad) 48px; gap: 32px; }
  .ws--split .ws-h1, .ws--ledger .ws-h1, .ws--band .ws-h1 { font-size: clamp(34px, 10.5cqi, 48px); }
  .ws--editorial .ws-hero { padding: 40px var(--pad) 0; }
  .ws--editorial .ws-h1 { font-size: clamp(40px, 13cqi, 60px); }
  .ws-hero-row { flex-direction: column; align-items: stretch; gap: 22px; margin: 24px 0 28px; }
  .ws-hero-wide { aspect-ratio: 4 / 3; }
  .ws--editorial .ws-svc { grid-template-columns: minmax(0, 1fr); }
  .ws--ledger .ws-hero { padding: 44px var(--pad) 44px; gap: 30px; }
  .ws-index { border-left: 0; padding-left: 0; }
  .ws--ledger .ws-svc li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .ws-sign { padding: 40px var(--pad); }
  .ws-sign .ws-h1 { font-size: clamp(36px, 11cqi, 52px); }
  .ws--board .ws-hero-art { min-height: 260px; }
  .ws--band .ws-hero { padding: 44px var(--pad) 0; gap: 0; }
  .ws--band .ws-hero-copy { padding-bottom: 32px; }
  .ws--band .ws-hero-art .ws-photo { aspect-ratio: 16 / 10; }
  .ws-strip { grid-template-columns: minmax(0, 1fr); }
  .ws-strip > div { border-right: 0; border-bottom: 1px solid var(--line); padding: 16px var(--pad); }
  .ws--band .ws-svc li { flex-direction: column; gap: 4px; padding: 18px; }
  .ws-about, .ws-visit, .ws-request { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ws-map { min-height: 240px; }
  .ws-form { grid-template-columns: minmax(0, 1fr); }
  .ws-form-foot .ws-btn { width: 100%; }
  .ws-foot-in { flex-direction: column; gap: 16px; }
  .ws-svc { grid-template-columns: minmax(0, 1fr) !important; }
  .ws-chat-btn { right: 14px; bottom: 14px; }
}

/* ================= scene: cover ================= */
.cover-scene { flex-direction: column; gap: 18px; padding: 30px 38px 22px; }
.cv-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 48px; align-items: center; }
.cv-copy { min-width: 0; }
.cv-logo { display: inline-flex; align-items: center; background: #fff; border-radius: 14px; padding: 10px 14px; margin-bottom: 28px; }
.cv-logo img { display: block; max-height: 56px; max-width: 220px; }
.cv-mono { width: 64px; height: 64px; border-radius: 18px; background: var(--b-primary); color: var(--b-primary-ink); display: grid; place-items: center;
  font: 700 24px/1 var(--b-display); margin-bottom: 28px; box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 0 0 6px color-mix(in srgb, var(--b-accent) 35%, transparent); }
.cv-for { margin: 0 0 8px; color: var(--chrome-dim); font-size: 16px; }
.cv-name { margin: 0; font: 600 clamp(38px, 5vw, 70px)/1.02 var(--b-display); letter-spacing: -.025em; color: #fff; text-wrap: balance; overflow-wrap: anywhere; }
.cv-facts { list-style: none; margin: 24px 0 28px; padding: 0; display: grid; gap: 6px; font-size: 16.5px; color: #d6d9dd; }
.cv-start { min-height: 52px; padding: 0 26px; border-radius: 999px; border: 0; background: var(--chrome-ink); color: var(--stage); font-weight: 600; font-size: 16px; }
.cv-start:focus-visible, .cv-tile:focus-visible { outline: 2px solid var(--chrome-accent); outline-offset: 3px; }
.cv-preview { min-width: 0; }
.cv-mini-wrap { position: relative; width: 100%; height: 380px; overflow: hidden; border-radius: 14px; box-shadow: 0 40px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.07); }
.cv-mini { position: absolute; left: 0; top: 0; width: 1180px; height: 760px; transform-origin: 0 0; pointer-events: none; }
.cv-mini .browser { height: 100%; border-radius: 0; box-shadow: none; }
.cv-mini .browser-view { overflow: hidden; }
.cv-tiles { flex: none; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 12px; }
.cv-tile { min-height: 84px; display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 15px 18px; border-radius: 14px; border: 1px solid var(--stage-line);
  background: var(--stage-2); box-shadow: inset 0 2px 0 color-mix(in srgb, var(--b-accent) 70%, transparent); }
.cv-tile strong { font-size: 16px; color: var(--chrome-ink); }
.cv-tile span { font-size: 13.5px; color: var(--chrome-dim); line-height: 1.4; }
@media (max-width: 700px) {
  .cover-scene { padding: 24px 16px 14px; overflow-y: auto; }
  .cv-grid { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 16px; flex: none; }
  .cv-preview { display: none; }
  .cv-name { font-size: clamp(34px, 10vw, 46px); }
  .cv-facts { margin: 18px 0 20px; font-size: 15.5px; }
  .cv-logo, .cv-mono { margin-bottom: 20px; }
  .cv-start { width: 100%; }
  .cv-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cv-tile { min-height: 76px; padding: 12px 14px; }
}
@media (min-width: 701px) and (max-width: 900px) {
  .cv-grid { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 26px; }
  .cv-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ================= v2: side by side, cover headline ================= */
.sbs-right { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; gap: 8px; width: 100%; }
.sbs-right .browser { flex: 1; min-height: 0; height: auto; }
.sbs-cap { margin: 0; flex: none; font-size: 13px; color: var(--chrome-dim); line-height: 1.35; }
.sbs-cap strong { color: var(--chrome-ink); font-weight: 600; }
.sbs-right.is-phone { display: none; }
.sbs-left { display: none; }
.site-scene.sbs-on .sbs-left { flex: 0 0 31%; min-width: 0; height: 100%; display: flex; flex-direction: column; gap: 8px; }
.site-scene:not(.sbs-on) .sbs-cap--r { display: none; }
.sbs-left .browser { flex: 1; min-height: 0; height: auto; }
.sbs-shot { background: #fff; }
.sbs-shot img { display: block; width: 100%; height: auto; }
.sbs-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 150px; overflow-y: auto; }
.sbs-checks .ck { font-size: 12.5px; line-height: 1.4; }
.site-scene.sbs-on .site-main { gap: 18px; align-items: stretch; }
.site-scene.has-sbs { flex-direction: column; gap: 10px; }
.site-scene.has-sbs .site-side { order: -1; width: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; padding: 0; }
.site-scene.has-sbs .site-side h2, .site-scene.has-sbs .site-side > p, .site-scene.has-sbs .site-side .side-note, .site-scene.has-sbs .site-side .side-checks { display: none; }
.site-scene.has-sbs .site-side .seg { flex: none; }
.site-scene.has-sbs .site-side .seg button { padding: 0 16px; min-height: 40px; }
.cv-line { margin: 14px 0 0; max-width: 24ch; font: 500 clamp(20px, 2.2vw, 28px)/1.25 var(--chrome-font); color: var(--chrome-ink); text-wrap: balance; }
.cv-line + .cv-facts { margin-top: 20px; }
@media (max-width: 700px) {
  .site-scene.sbs-on .sbs-left { display: none; }
  .site-scene.has-sbs .site-side .seg { flex: 1; }
  .site-scene.has-sbs .site-side .seg:last-of-type { display: none; }
  .site-scene .sbs-cap--r { display: none; }
}

/* ================= v4: showcase layout (restaurant, grocery, salon, retail) ================= */
.ws--showcase { --sw-dark: color-mix(in srgb, var(--p) 78%, #000); }
.ws--showcase .ws-nav { background: color-mix(in srgb, var(--s) 94%, transparent); border-bottom: 1px solid var(--line); }
.sw-hero { position: relative; overflow: hidden; display: flex; align-items: flex-end; min-height: min(78vh, 700px); background: var(--sw-dark); color: #fff; isolation: isolate; }
.sw-hero-bg { position: absolute; inset: -6% 0 -14% 0; z-index: -2; will-change: transform; }
.sw-hero-bg .ws-photo, .sw-hero-bg .ws-photo img { width: 100%; height: 100%; }
.sw-hero-bg .ws-photo img { object-fit: cover; display: block; }
.sw-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, color-mix(in srgb, var(--sw-dark) 96%, transparent) 4%, color-mix(in srgb, var(--sw-dark) 55%, transparent) 46%, color-mix(in srgb, var(--sw-dark) 8%, transparent) 100%); }
.sw-hero-in { width: 100%; padding: 12cqi var(--pad) 7cqi; display: grid; gap: 14px; justify-items: start; }
.sw-tag { font: 500 clamp(15px, 2cqi, 19px)/1.3 var(--b-body); color: color-mix(in srgb, #fff 82%, transparent); max-width: 34ch; }
.sw-name { font: 400 clamp(2.7rem, 10.5cqi, 7rem)/.94 var(--b-display); letter-spacing: -.02em; text-wrap: balance; max-width: 14ch; color: #fff; }
.ws--showcase.wcat-grocery .sw-name { font-weight: 800; letter-spacing: -.035em; text-transform: none; }
.ws--showcase.wcat-retail .sw-name { font-weight: 700; letter-spacing: -.04em; }
.sw-today { display: inline-flex; align-items: center; gap: 10px; font: 600 17px/1.2 var(--b-body); }
.sw-today i { width: 10px; height: 10px; border-radius: 50%; background: var(--a); box-shadow: 0 0 0 4px color-mix(in srgb, var(--a) 35%, transparent); }
.sw-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.sw-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: 56px; padding: 0 30px; border-radius: 999px; border: 2px solid transparent; font: 700 18px/1 var(--b-body); cursor: pointer; text-decoration: none; }
.sw-btn--main { background: #fff; color: var(--p) !important; }
.sw-btn--ghost { background: transparent; border-color: rgba(255,255,255,.75); color: #fff !important; }
.sw-btn--solid { background: var(--p); color: var(--pi) !important; min-height: 48px; padding: 0 22px; font-size: 16px; }
.sw-btn:active { transform: scale(.98); }

.ws--showcase .ws-sec { padding-block: clamp(44px, 9cqi, 92px); }
.sw-rail { padding-inline: 0 !important; }
.sw-rail-head { padding-inline: var(--pad); display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 22px; }
.sw-rail h2, .sw-menu h2, .sw-week h2, .sw-book h2 { font: 400 clamp(1.9rem, 5.2cqi, 3.2rem)/1 var(--b-display); letter-spacing: -.015em; }
.sw-note { font-size: 14px; color: var(--mut); }
.sw-track { display: flex; gap: 14px; overflow-x: auto; padding: 4px var(--pad) 18px; scrollbar-width: thin; overscroll-behavior-x: contain; }
.sw-card { position: relative; flex: 0 0 min(250px, 64cqi); min-height: 210px; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding: 22px; border-radius: 26px 26px 26px 6px; overflow: hidden; isolation: isolate; }
.sw-card::before { content: attr(data-initial); position: absolute; inset-inline-end: -6px; top: -34px; z-index: -1; font: 400 150px/1 var(--b-display); opacity: .07; pointer-events: none; }
.sw-t0 { background: color-mix(in srgb, var(--a) 26%, var(--s)); }
.sw-t1 { background: color-mix(in srgb, var(--p) 9%, var(--s)); }
.sw-t2 { background: var(--p); color: var(--pi); }
.sw-card h3 { font: 400 clamp(1.5rem, 3.2cqi, 1.9rem)/1.08 var(--b-display); max-width: 11ch; margin-top: 34px; text-wrap: balance; }
.sw-card p { font-size: 14.5px; opacity: .82; }
.sw-card-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.sw-card-foot .sw-add { margin-inline-start: auto; }
.sw-price { font: 700 20px/1.1 var(--b-body); display: grid; }
.sw-price small { font: 500 11.5px/1.3 var(--b-body); opacity: .75; }
.sw-add { width: 48px; height: 48px; border-radius: 50%; border: 2px solid currentColor; background: transparent; color: inherit; font: 400 28px/1 var(--b-body); cursor: pointer; }
.sw-add:active { background: color-mix(in srgb, currentColor 18%, transparent); }
.sw-card .tag-sample { background: color-mix(in srgb, currentColor 14%, transparent); color: inherit; }

.sw-menu ul { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 18px 56px; max-width: 920px; }
@container (min-width: 760px) { .sw-menu ul { grid-template-columns: 1fr 1fr; } }
.sw-row { display: flex; align-items: baseline; gap: 10px; }
.sw-row strong { font: 600 19px/1.25 var(--b-body); }
.sw-lead { flex: 1; border-bottom: 2px dotted color-mix(in srgb, var(--k) 30%, transparent); transform: translateY(-4px); min-width: 20px; }
.sw-menu li p { font-size: 14.5px; color: var(--mut); margin-top: 3px; }

.sw-week { display: grid; gap: 28px; align-items: center; background: color-mix(in srgb, var(--a) 22%, var(--s)); }
@container (min-width: 760px) { .sw-week { grid-template-columns: 1.1fr 1fr; } }
.sw-week-copy { display: grid; gap: 10px; justify-items: start; }
.sw-week-copy p { font-size: 18px; max-width: 28ch; }
.sw-phone { background: var(--s); border-radius: 30px; padding: 20px; display: grid; gap: 10px; box-shadow: 0 1px 0 var(--line), 0 24px 40px -24px color-mix(in srgb, var(--k) 40%, transparent); max-width: 380px; }
.sw-bubble { max-width: 88%; padding: 12px 16px; border-radius: 20px 20px 20px 5px; background: color-mix(in srgb, var(--k) 8%, var(--s)); font-size: 15.5px; }
.sw-bubble--me { justify-self: end; border-radius: 20px 20px 5px 20px; background: var(--p); color: var(--pi); font-weight: 600; }

.sw-book ul { list-style: none; padding: 0; margin: 22px 0 12px; max-width: 780px; }
.sw-book li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.sw-book li strong { font: 400 clamp(1.4rem, 3.6cqi, 2rem)/1.1 var(--b-display); }

/* order sheet */
.sw-sheet { position: absolute; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; }
.sw-back { position: absolute; inset: 0; background: rgba(10,10,12,.5); }
.sw-panel { position: relative; width: min(560px, 100%); max-height: 92%; overflow-y: auto; background: var(--s); color: var(--k); border-radius: 28px 28px 0 0; padding: 22px 22px 26px; display: grid; gap: 14px; animation: sw-up .26s ease-out both; }
@keyframes sw-up { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
.sw-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sw-head h2 { font: 400 1.9rem/1 var(--b-display); }
.sw-x { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line); background: transparent; color: inherit; font-weight: 600; cursor: pointer; }
.sw-lines { list-style: none; padding: 0; display: grid; gap: 6px; }
.sw-lines li { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 6px 0 14px; border-radius: 12px; background: var(--soft); }
.sw-lines li button { width: 44px; height: 44px; border: 0; background: none; color: inherit; font-size: 24px; cursor: pointer; }
.sw-lines .sw-empty { color: var(--mut); padding-inline: 14px; }
.sw-msgbox { white-space: pre-line; padding: 14px 16px; border-radius: 20px 20px 20px 5px; background: color-mix(in srgb, var(--k) 8%, var(--s)); font-size: 16px; }
.sw-demo { font-size: 13px; color: var(--mut); }
.sw-send { display: grid; gap: 10px; }
.sw-send button { min-height: 54px; border-radius: 999px; border: 2px solid var(--p); background: transparent; color: var(--p); font: 700 17px/1 var(--b-body); cursor: pointer; }
.sw-send button:first-child { background: var(--p); color: var(--pi); }
.sw-out p { margin: 4px 0; }

/* motion: only when the script switched it on; reduced motion and previews stay still */
.sw-motion .sw-card.sw-rv { opacity: 0; transform: translateY(22px) scale(.97); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1); transition-delay: calc(min(var(--i, 0), 6) * 70ms); }
.sw-motion .sw-rv:not(.sw-card) { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .55s ease; transition-delay: calc(min(var(--i, 0), 6) * 60ms); }
.sw-motion .sw-rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .sw-motion .sw-rv, .sw-motion .sw-card.sw-rv { opacity: 1; transform: none; transition: none; }
  .sw-hero-bg { transform: none !important; }
  .sw-panel { animation: none; }
}
@container (max-width: 760px) {
  .sw-hero { min-height: 0; }
  .sw-hero-in { padding-top: 34cqi; padding-bottom: 96px; }
  .sw-btn { flex: 1 1 100%; min-height: 52px; }
}
.sw-rail + .sw-menu, .sw-rail + .sw-week { margin-top: 0; }
.ws--showcase .sw-rail { padding-bottom: 28px; }
.ws--showcase .sw-rail + .sw-menu { padding-top: 28px; }

/* Restaurant type hero: their own dish names as a warm typographic backdrop (no stock food photo). */
.sw-hero--type .sw-hero-bg { background: radial-gradient(120% 90% at 85% 15%, color-mix(in srgb, var(--b-accent) 55%, var(--b-primary)) 0%, var(--b-primary) 55%, color-mix(in srgb, var(--b-primary) 70%, #000) 100%); }
.sw-type { position: absolute; inset: 0; display: flex; flex-wrap: wrap; align-content: center; gap: 4px 28px; padding: 6% 6% 22%; overflow: hidden; }
.sw-type span { font-family: var(--b-display); font-size: clamp(34px, 6.2vw, 84px); line-height: 1.05; letter-spacing: -.01em; color: color-mix(in srgb, var(--b-primary-ink) 16%, transparent); white-space: nowrap;
  opacity: 0; transform: translateY(14px); animation: swTypeIn .9s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(var(--i) * 90ms); }
.sw-type span:nth-child(3n+2) { font-style: italic; color: color-mix(in srgb, var(--b-accent) 45%, transparent); }
@keyframes swTypeIn { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sw-type span { opacity: 1; transform: none; animation: none; } }

/* ===== v5 heroes. Final state is the default; .hx-motion (JS, off under reduced motion) arms the start state and .hx-go plays it. ===== */
.ws { --hx-ease: cubic-bezier(.16, 1, .3, 1); --hx-io: cubic-bezier(.65, 0, .35, 1); --hx-d: 1; }
.ws[dir="rtl"] { --hx-d: -1; }
.hx-w { display: inline-block; overflow: hidden; vertical-align: top; padding: .1em 0 .16em; margin: -.1em 0 -.16em; }
.hx-w > span { display: inline-block; transition: transform .85s var(--hx-ease) calc(var(--i, 0) * 60ms + 120ms); }
.hx-motion:not(.hx-go) .hx-w > span { transform: translate3d(0, 112%, 0); }
.ws-hero { --hx-rise: translate 700ms var(--hx-ease), opacity 500ms ease-out; }
.hx-motion .ws-kicker, .hx-motion .ws-sub, .hx-motion .ws-ctas, .hx-motion .ws-hero-card, .hx-motion .ws-today, .hx-motion .hx-live, .hx-motion .hx-tiles, .hx-motion .hx-chips { transition: var(--hx-rise); }
.hx-motion .ws-sub { transition-delay: .35s; } .hx-motion .ws-ctas { transition-delay: .45s; } .hx-motion .ws-hero-card { transition-delay: .5s; } .hx-motion .hx-live { transition-delay: .6s; } .hx-motion .hx-chips { transition-delay: 1s; }
.hx-motion:not(.hx-go) :is(.ws-kicker, .ws-sub, .ws-ctas, .ws-hero-card, .ws-today, .hx-live, .hx-chips) { translate: 0 14px; opacity: 0; }

/* overlay: the photo settles, drag pans it against the card */
.ws--overlay .ws-hero { touch-action: pan-y; }
.ws--overlay .ws-hero-bg img { transform: translate3d(var(--hx-bg, 0px), 0, 0); scale: 1.05; transition: scale 1.6s var(--hx-ease); will-change: transform; }
.ws--overlay.hx-motion:not(.hx-go) .ws-hero-bg img { scale: 1.14; }
.ws--overlay .ws-hero-card { transform: translate3d(var(--hx-card, 0px), 0, 0); }
.ws--overlay .ws-hero.is-drag { cursor: grabbing; user-select: none; }

/* split: the photo mask draws in, tilts toward the finger; tap reveals the next photo from the tap point */
.ws--split .ws-hero-art { touch-action: pan-y; transform: perspective(900px) rotateX(var(--hx-rx, 0deg)) rotateY(var(--hx-ry, 0deg)); transition: transform .5s var(--hx-ease); }
.ws--split .ws-hero-art.is-drag { transition: transform 90ms linear; }
.ws--split .ws-hero-art .ws-photo { clip-path: circle(150% at calc(50% - 20% * var(--hx-d)) 72%); transition: clip-path 1.2s var(--hx-io); }
.ws--split.hx-motion:not(.hx-go) .ws-hero-art .ws-photo { clip-path: circle(0% at calc(50% - 20% * var(--hx-d)) 72%); }
.ws--split .ws-hero-art .ws-photo.hx-rv { transition: none; clip-path: none; }
.ws--split .ws-blob { transition: scale .9s var(--hx-ease), opacity .6s ease-out, border-radius 1s var(--hx-ease); transform-origin: 100% 100%; }
.ws--split.hx-motion:not(.hx-go) .ws-blob { scale: .15; opacity: 0; border-radius: 50%; }
.ws--split[dir="rtl"] .ws-blob { right: auto; left: 0; transform-origin: 0 100%; }
.ws--split[dir="rtl"] .ws-hero-art .ws-photo { inset: 0 0 22px 22px; border-radius: 30px 30px 130px 30px; }

/* editorial: lines unmask, the photo opens like a curtain, drag scrubs the film strip */
.ws--editorial .ws-hero-wide { position: relative; touch-action: pan-y; cursor: grab; clip-path: inset(0 0 0 0); transition: clip-path 1.1s var(--hx-io) .25s; }
.ws--editorial.hx-motion:not(.hx-go) .ws-hero-wide { clip-path: inset(0 50% 0 50%); }
.ws--editorial .ws-hero-wide.is-drag { cursor: grabbing; user-select: none; }
.hx-strip { position: absolute; inset: 0; display: flex; will-change: transform; }
.hx-frame { flex: 0 0 100%; height: 100%; background: var(--soft); }
.hx-frame.is-bad { background: var(--soft); }
.hx-frame img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.hx-pips { position: absolute; inset-inline-end: 16px; bottom: 14px; display: flex; gap: 6px; padding: 7px 10px; border-radius: 999px; background: rgba(0,0,0,.38); }
.hx-pips i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.55); transition: width .25s var(--hx-ease), background .2s; }
.hx-pips i.is-on { width: 18px; background: #fff; }

/* ledger: ruled lines draw across, live hours line, rows expand in place */
.ws--ledger .ws-index li { border-bottom: 0; position: relative; }
.ws--ledger .ws-index li::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: var(--line); transform-origin: 0 50%; transition: transform .9s var(--hx-io); }
.ws--ledger[dir="rtl"] .ws-index li::after { transform-origin: 100% 50%; }
.ws--ledger .ws-index li:nth-child(2)::after { transition-delay: .1s; } .ws--ledger .ws-index li:nth-child(3)::after { transition-delay: .2s; } .ws--ledger .ws-index li:nth-child(4)::after { transition-delay: .3s; } .ws--ledger .ws-index li:nth-child(5)::after { transition-delay: .4s; }
.ws--ledger.hx-motion:not(.hx-go) .ws-index li::after { transform: scaleX(0); }
.ws--ledger[dir="rtl"] .ws-index { border-left: 0; padding-left: 0; border-right: 1px solid var(--line); padding-right: 32px; }
.hx-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; text-align: start !important; cursor: pointer; }
.hx-row::after { content: "+"; font: 300 26px/1 var(--b-body, system-ui); color: var(--mut); transition: transform .25s var(--hx-ease); flex: none; }
.hx-li.is-open .hx-row::after { transform: rotate(45deg); }
.hx-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--hx-ease); }
.hx-li.is-open .hx-more { grid-template-rows: 1fr; }
.hx-more > div { overflow: hidden; min-height: 0; }
.hx-more p { margin: 2px 0 12px; color: var(--mut); font-size: 15px; line-height: 1.5; }
.hx-more .ws-btn { margin-bottom: 16px; }
.hx-live { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin: 22px 0 0; font-size: 14px; font-weight: 500; }
.hx-live > i { width: 8px; height: 8px; border-radius: 50%; background: var(--mut); flex: none; }
.hx-live.is-open > i { background: #2f9e64; animation: hxpulse 2.4s ease-out infinite; }
.hx-win { position: relative; flex: 1 1 110px; max-width: 220px; height: 6px; border-radius: 3px; background: var(--line); }
.hx-win s { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--p); opacity: .85; }
.hx-win u { position: absolute; top: -4px; width: 2px; height: 14px; margin-inline-start: -1px; background: var(--k); border-radius: 1px; }
@keyframes hxpulse { 0% { box-shadow: 0 0 0 0 rgba(47,158,100,.5); } 70%, 100% { box-shadow: 0 0 0 8px rgba(47,158,100,0); } }

/* board: departure-board tiles flip in; tap flips one to its description and a request button */
.hx-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 26px; perspective: 800px; }
.hx-tile { position: relative; min-height: 104px; cursor: pointer; transform-style: preserve-3d; transition: transform .6s var(--hx-ease); outline-offset: 3px; }
.hx-tile.is-flip { transform: rotateX(180deg); }
.hx-face { position: absolute; inset: 0; border-radius: 8px; padding: 12px 14px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.hx-front { display: flex; align-items: flex-end; background: color-mix(in srgb, var(--pi) 12%, transparent); border: 1px solid color-mix(in srgb, var(--pi) 24%, transparent); font: 700 clamp(15px, 1.7cqi, 19px)/1.15 var(--b-display); }
.hx-front::before { content: ""; position: absolute; inset: 50% 0 auto; height: 1px; background: color-mix(in srgb, var(--pi) 22%, transparent); }
.hx-back { transform: rotateX(180deg); display: flex; flex-direction: column; justify-content: space-between; gap: 8px; background: var(--pi); color: var(--p); }
.hx-back em { font-style: normal; font-size: 12.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hx-req { align-self: flex-start; padding: 7px 12px; border-radius: 999px; background: var(--p); color: var(--pi); font-weight: 650; font-size: 12.5px; cursor: pointer; }
.hx-motion .hx-tile { transition: transform .6s var(--hx-ease), opacity .3s; }
.hx-motion:not(.hx-go) .hx-tile { transform: rotateX(-95deg); opacity: 0; }
.hx-motion.hx-go .hx-tile:not(.is-flip) { transition-delay: calc(var(--i) * 110ms + 250ms), calc(var(--i) * 110ms + 250ms); }
.hx-motion .hx-tile.is-flip { transition-delay: 0s; }

/* band: the colour band wipes in, a chip strip drifts and flings */
.ws--band .ws-hero { background: transparent; position: relative; isolation: isolate; }
.ws--band .ws-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--p); transform-origin: 0 50%; transition: transform 1s var(--hx-io); }
.ws--band[dir="rtl"] .ws-hero::before { transform-origin: 100% 50%; }
.ws--band.hx-motion:not(.hx-go) .ws-hero::before { transform: scaleX(0); }
.ws--band .ws-hero-copy, .ws--band .ws-hero-art { transition: opacity .6s ease-out .35s; }
.ws--band.hx-motion:not(.hx-go) :is(.ws-hero-copy, .ws-hero-art) { opacity: 0; }
.hx-chips { background: var(--p); color: var(--pi); overflow: hidden; touch-action: pan-y; cursor: grab; padding: 20px 0; }
.hx-chips.is-drag { cursor: grabbing; user-select: none; }
.hx-chip-track { display: flex; gap: 10px; width: max-content; padding: 0 var(--pad); will-change: transform; }
.hx-chips.is-still { overflow-x: auto; }
.hx-chip { flex: none; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--pi) 38%, transparent); background: transparent; color: inherit; font: 600 15px/1 var(--b-body); white-space: nowrap; }
.hx-chip:hover { background: color-mix(in srgb, var(--pi) 14%, transparent); }
.hx-ping { animation: hxring 1.3s ease-out; }
@keyframes hxring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--a) 70%, transparent); } 100% { box-shadow: 0 0 0 16px transparent; } }

/* showcase: one slow push, three cards dealt onto it; swipe shuffles, tap opens the order sheet */
.sw-hero-bg .ws-photo img, .sw-hero-bg .sw-type { scale: 1.06; transition: scale 9s var(--hx-ease); }
.hx-motion:not(.hx-go) :is(.sw-hero-bg .ws-photo img, .sw-hero-bg .sw-type) { scale: 1; }
.hx-deck { position: absolute; inset-inline-end: var(--pad); top: 64px; width: min(268px, 42cqi); height: 148px; z-index: 2; touch-action: pan-y; }
.hx-card { position: absolute; inset: 0; border-radius: 20px 20px 20px 6px; background: #fff; color: #14171a; padding: 16px 18px; display: grid; align-content: space-between; justify-items: start; gap: 6px; cursor: pointer;
  box-shadow: 0 18px 40px rgba(0,0,0,.32); transform: translate3d(calc(var(--k) * 14px * var(--hx-d)), calc(var(--k) * -12px), 0) rotate(calc(var(--k) * 3deg * var(--hx-d))) scale(calc(1 - var(--k) * .05));
  transition: transform .42s var(--hx-ease), opacity .3s, translate .8s var(--hx-ease); transform-origin: 50% 100%; user-select: none; }
.hx-card strong { font: 400 21px/1.1 var(--b-display); }
.hx-card .sw-price { display: grid; font-weight: 700; font-size: 17px; }
.hx-card .sw-price small { font-weight: 500; font-size: 11.5px; color: #5d6168; }
.hx-card .tag-sample { background: #eceee9; color: #4a4e55; }
.hx-card:focus-visible { outline: 3px solid var(--b-accent); outline-offset: 3px; }
.hx-motion:not(.hx-go) .hx-card { translate: 0 70px; opacity: 0; }
.hx-motion.hx-go .hx-card { transition-delay: 0s, calc(var(--k) * 0ms + 0ms), calc((2 - var(--k)) * 130ms + 1100ms); }
.hx-deck.is-drag { cursor: grabbing; }
@container (max-width: 760px) {
  .hx-deck { inset-inline-start: var(--pad); inset-inline-end: auto; width: min(268px, 66cqi); height: 124px; top: 18px; bottom: auto; }
  .sw-hero-in { padding-top: 175px; padding-bottom: 96px; }
  .hx-tiles { margin-bottom: 20px; }
  .hx-front { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .ws * , .ws *::before, .ws *::after { transition: none !important; animation: none !important; } .hx-card { translate: none !important; opacity: 1 !important; } }
.hx-more .ws-btn { border: 1px solid currentColor; padding: 0 18px; min-height: 44px; font-size: 15px; background: transparent; }
.hx-tile { min-height: 120px; }
.hx-req { white-space: nowrap; }
.hx-deck { height: 124px; }
.ws--ledger .ws-index button.hx-row { color: var(--k); }

/* Board tiles: a departure-board number and a go arrow fill the top half, so a tile never looks empty. */
.hx-front { flex-direction: column; align-items: stretch; justify-content: space-between; }
.hx-top { display: flex; align-items: center; justify-content: space-between; font: 600 12px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .08em; opacity: .7; }
.hx-arrow { opacity: .8; transition: transform .25s var(--hx-ease, ease); }
.hx-tile:hover .hx-arrow, .hx-tile:focus-visible .hx-arrow { transform: translate(2px, -2px); }
.hx-name { display: block; }
[dir="rtl"] .hx-arrow { transform: scaleX(-1); }

/* v6: shop the aisles. Rows are native overflow-x (momentum, no snap, no sticky). Motion is transform and opacity only. */
.ws-host { --ai-ease: cubic-bezier(.16,1,.3,1); }
.ai-aisles { --ai-h: 112px; --ai-w: 138px; --ai-wood: color-mix(in srgb, var(--p) 16%, #d9d2c6); }
@container (min-width: 760px) { .ai-aisles { --ai-h: 132px; --ai-w: 168px; } }
.ai-search { display: flex; align-items: center; gap: 10px; margin: 0 var(--pad) 8px; min-height: 52px; padding: 0 18px; border-radius: 999px; background: var(--soft); border: 1.5px solid var(--line); max-width: 520px; color: var(--mut); transition: border-color .15s, background-color .15s; }
.ai-search:focus-within { border-color: var(--p); background: var(--s); color: var(--k); }
.ai-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 500 16px/1.2 var(--b-body); color: var(--k); min-height: 48px; }
.ai-search input::placeholder { color: var(--mut); }
.ai-row { margin-top: 26px; }
.ai-row-head { padding-inline: var(--pad); display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 10px; }
.ai-row-head h3 { font: 400 clamp(1.35rem, 3.4cqi, 1.9rem)/1.1 var(--b-display); letter-spacing: -.01em; }
.ai-track { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 6px 0 14px; touch-action: pan-x pan-y; }
.ai-track::-webkit-scrollbar { display: none; }
.ai-track:focus-visible { outline: 2px solid var(--p); outline-offset: -2px; }
.ai-run { position: relative; display: flex; gap: 6px; width: max-content; min-width: 100%; padding-inline: calc(var(--pad) - 6px) var(--pad); }
.ai-run::before { content: ""; position: absolute; inset-inline: 0; top: calc(var(--ai-h) - 4px + 6px); height: 16px; border-radius: 4px; background: linear-gradient(to bottom, color-mix(in srgb, var(--ai-wood) 60%, #fff) 0 42%, var(--ai-wood) 42% 100%); box-shadow: 0 12px 14px -8px rgba(20,16,10,.32); }
.ai-it { position: relative; z-index: 1; flex: 0 0 var(--ai-w); display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 6px 6px 0; scroll-margin-inline: var(--pad); }
.ai-it[hidden] { display: none; }
.ai-stand { position: relative; width: 100%; height: var(--ai-h); display: flex; align-items: flex-end; justify-content: center; margin-bottom: 12px; }
.ai-stand::after { content: ""; position: absolute; bottom: -3px; left: 14%; right: 14%; height: 9px; border-radius: 50%; background: radial-gradient(closest-side, rgba(20,16,10,.38), transparent); z-index: -1; }
.ai-stand img { position: relative; max-width: 96%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(20,16,10,.18)); user-select: none; -webkit-user-drag: none; pointer-events: none; }
.ai-card { position: relative; display: flex; align-items: flex-end; width: 88%; height: 82%; padding: 12px 12px 10px; border-radius: 16px 16px 3px 3px; overflow: hidden; isolation: isolate; font: 400 clamp(1.05rem, 2.4cqi, 1.3rem)/1.05 var(--b-display); text-wrap: balance; overflow-wrap: anywhere; }
.ai-card::before { content: attr(data-initial); position: absolute; inset-inline-end: -4px; top: -18px; z-index: -1; font: 400 92px/1 var(--b-display); opacity: .09; }
.ai-t0 { background: color-mix(in srgb, var(--a) 30%, var(--s)); }
.ai-t1 { background: color-mix(in srgb, var(--p) 11%, var(--s)); }
.ai-t2 { background: var(--p); color: var(--pi); }
.ai-ph { width: 62%; height: 70%; display: grid; place-items: center; border-radius: 42% 58% 46% 54% / 56% 44% 56% 44%; background: color-mix(in srgb, var(--a) 24%, var(--s)); font: 400 2.2rem/1 var(--b-display); color: color-mix(in srgb, var(--p) 70%, var(--k)); }
.ai-name { font: 600 15px/1.2 var(--b-body); max-width: 100%; text-wrap: balance; min-height: 2.4em; }
.ai-pr { display: grid; gap: 3px; justify-items: start; min-height: 2.4em; font: 700 16px/1.1 var(--b-body); }
.ai-pr small { font: 500 11.5px/1.2 var(--b-body); color: var(--mut); }
.ai-chip { font: 600 11px/1 var(--b-body); font-style: normal; padding: 4px 8px; border-radius: 999px; background: color-mix(in srgb, var(--a) 24%, var(--s)); color: var(--k); }
.ai-step { position: relative; display: inline-flex; align-items: center; width: 118px; height: 44px; margin-top: 4px; isolation: isolate; color: var(--k); }
.ai-step::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 999px; background: var(--soft); border: 1.5px solid var(--line); transform: scaleX(.38); transform-origin: right center; transition: transform .26s var(--ai-ease), background-color .15s; }
[dir="rtl"] .ai-step::before, .ws[dir="rtl"] .ai-step::before { transform-origin: left center; }
.ai-step.is-on::before { transform: none; background: var(--s); border-color: var(--p); }
.ai-step button { width: 44px; height: 44px; border: 0; background: transparent; color: inherit; font: 500 24px/1 var(--b-body); cursor: pointer; border-radius: 50%; touch-action: manipulation; transition: transform .1s ease-out, opacity .15s; }
.ai-step button:active { transform: scale(.88); }
.ai-step .ai-up { margin-inline-start: auto; background: var(--p); color: var(--pi); }
.ai-step.is-on .ai-up { background: transparent; color: inherit; }
.ai-step:not(.is-on) .ai-up { box-shadow: 0 3px 8px -2px color-mix(in srgb, var(--p) 55%, transparent); }
.ai-step .ai-dn, .ai-step .ai-n { opacity: 0; pointer-events: none; transition: opacity .15s; }
.ai-step.is-on .ai-dn, .ai-step.is-on .ai-n { opacity: 1; pointer-events: auto; }
.ai-n { flex: 1; text-align: center; font: 700 16px/1 var(--b-body); font-variant-numeric: tabular-nums; }
.ai-up:focus-visible, .ai-dn:focus-visible, .ai-pill:focus-visible, .ai-go:focus-visible { outline: 2px solid var(--a); outline-offset: 2px; }
.ai-none { padding: 30px var(--pad); color: var(--mut); font-size: 17px; }
.ai-none[hidden], .ai-row[hidden] { display: none; }
/* cart pill: anchored in the frame like the assistant bubble, on the opposite side */
.ai-pill { position: absolute; inset-inline-start: 18px; bottom: 18px; z-index: 20; display: flex; align-items: center; gap: 9px; min-height: 50px; padding: 0 8px 0 16px; border: 0; border-radius: 999px; background: var(--s); color: var(--k); font: 700 15px/1 var(--b-body); box-shadow: 0 0 0 2px var(--p), 0 12px 28px rgba(0,0,0,.24); cursor: pointer; }
.ai-pill:active { transform: scale(.97); }
.ai-count { min-width: 34px; height: 34px; padding: 0 8px; display: grid; place-items: center; border-radius: 999px; background: var(--p); color: var(--pi); font: 700 15px/1 var(--b-body); font-variant-numeric: tabular-nums; }
.ai-fly { position: absolute; z-index: 45; pointer-events: none; border-radius: 12px; overflow: hidden; transform-origin: center; }
.ai-fly img { width: 100%; height: 100%; object-fit: contain; }
.ai-fly .ai-th-t { width: 100%; height: 100%; }
/* cart drawer */
.ai-drawer { position: absolute; inset: 0; z-index: 41; display: flex; align-items: flex-end; justify-content: center; }
.ai-back { position: absolute; inset: 0; background: rgba(10,10,12,.5); animation: ai-fade .22s ease-out both; }
.ai-panel { position: relative; width: min(560px, 100%); max-height: 88%; overflow-y: auto; overscroll-behavior: contain; background: var(--s); color: var(--k); border-radius: 28px 28px 0 0; padding: 22px 20px 24px; display: grid; gap: 12px; animation: ai-up .32s var(--ai-ease) both; }
.ai-drawer.is-out .ai-panel { animation: ai-down .19s cubic-bezier(.4,0,1,1) both; }
.ai-drawer.is-out .ai-back { animation: ai-fade .19s ease-in reverse both; }
@keyframes ai-up { from { transform: translateY(36px); opacity: .5; } to { transform: none; opacity: 1; } }
@keyframes ai-down { to { transform: translateY(24px); opacity: 0; } }
@keyframes ai-fade { from { opacity: 0; } to { opacity: 1; } }
.ai-lines { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.ai-lines li { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ai-lines .sw-empty { display: block; color: var(--mut); padding: 14px 0; }
.ai-th { width: 52px; height: 52px; border-radius: 14px; background: var(--soft); display: grid; place-items: center; overflow: hidden; }
.ai-th img { width: 88%; height: 88%; object-fit: contain; }
.ai-th-t { display: grid; place-items: center; width: 100%; height: 100%; font: 400 1.4rem/1 var(--b-display); font-style: normal; background: color-mix(in srgb, var(--a) 26%, var(--s)); }
.ai-ln { display: grid; gap: 3px; min-width: 0; }
.ai-ln strong { font: 600 15.5px/1.2 var(--b-body); }
.ai-ln .ai-pr { min-height: 0; font-size: 14px; }
.ai-ls { display: grid; justify-items: end; gap: 2px; }
.ai-ls .ai-step { margin: 0; width: 112px; height: 40px; }
.ai-ls .ai-step button { width: 40px; height: 40px; }
.ai-lt { font: 700 14px/1 var(--b-body); }
.ai-tot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 8px 0 2px; font: 600 18px/1.2 var(--b-body); }
.ai-tot b { font-size: 26px; margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.ai-go { min-height: 56px; border-radius: 999px; border: 0; background: var(--p); color: var(--pi); font: 700 18px/1 var(--b-body); cursor: pointer; transition: transform .1s; }
.ai-go:active { transform: scale(.98); }
.ai-go:disabled { opacity: .45; cursor: default; }
@media (prefers-reduced-motion: reduce) {
  .ai-step::before, .ai-step button, .ai-go { transition: none; }
  .ai-panel, .ai-back, .ai-drawer.is-out .ai-panel, .ai-drawer.is-out .ai-back { animation: none; }
}
/* pill, drawer and flying thumb live in the frame host, outside .ws: carry the tokens themselves */
.ai-pill, .ai-drawer, .ai-fly { --p: var(--b-primary); --pi: var(--b-primary-ink); --a: var(--b-accent); --s: var(--b-surface); --k: var(--b-ink);
  --soft: color-mix(in srgb, var(--p) 6%, var(--s)); --line: color-mix(in srgb, var(--k) 13%, transparent); --mut: color-mix(in srgb, var(--k) 68%, var(--s)); font-family: var(--b-body); }
.ai-drawer .sw-head h2 { font: 400 1.9rem/1 var(--b-display); }
.ai-drawer .sw-x { color: var(--k); }
.ai-drawer .sw-empty { color: var(--mut); }
.ai-pill { inset-inline-start: auto; left: 18px; }
@media (max-width: 480px) { .ai-pill { left: 14px; bottom: 14px; } }

/* ---------- R7 lane g: section library (site.js kit, site-templates/README.md). Theme tokens only, no new colours ---------- */
.ws--kit { --kit-a: var(--b-primary); --ka: color-mix(in srgb, var(--kit-a) 82%, var(--k)); --ka-soft: color-mix(in srgb, var(--kit-a) 10%, var(--s));
  font-family: var(--kit-b, var(--b-body)); --pad: clamp(18px, 5cqi, 72px); }
.ws--kit h1, .ws--kit h2, .ws--kit h3 { font-family: var(--kit-d, var(--b-display)); letter-spacing: -.015em; }
.kit-caps h1, .kit-caps h2 { text-transform: uppercase; font-stretch: 85%; letter-spacing: -.01em; }
.ws--kit .ws-sec { padding: clamp(44px, 7cqi, 96px) var(--pad); }
.kit-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin-bottom: 22px; }
.kit-head h2 { font-size: clamp(26px, 4.2cqi, 44px); line-height: 1.08; }
.kit-note { color: var(--mut); font-size: 15px; flex-basis: 100%; }
.kit-fine { color: var(--mut); font-size: 13px; line-height: 1.45; }
.kit-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1.5px solid transparent;
  font: 600 15.5px/1 var(--kit-b, var(--b-body)); text-decoration: none; cursor: pointer; transition: transform .18s cubic-bezier(.2,.8,.2,1), background-color .18s; }
.kit-btn:active { transform: scale(.97); }
.kit-btn--main { background: var(--p); color: var(--pi) !important; }
.kit-btn--ghost { background: transparent; color: var(--k); border-color: color-mix(in srgb, var(--k) 28%, transparent); }
.kit-btn--soft { background: color-mix(in srgb, var(--s) 86%, transparent); color: var(--k); border-color: var(--line); }

/* announcement strip */
.kit-announce { background: var(--k); color: var(--s); font-size: 13.5px; padding: 8px var(--pad); }
.kit-announce p { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; text-align: center; }
.kit-announce i { opacity: .5; font-style: normal; }
.kit-announce a { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; font-weight: 600; }
.kit-announce svg { width: 14px; height: 14px; }
.kit-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--kit-a) 60%, var(--s)); margin-inline-end: 6px; }

/* hero: photo-led, copy on a scrim, proof strip in the first view */
.kit-hero { position: relative; min-height: 0; display: grid; isolation: isolate; color: var(--s); overflow: hidden; }
.kit-hero-art { position: absolute; inset: 0; z-index: -1; }
.kit-hero-art .ws-photo, .kit-hero-art img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
.kit-hero-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--k) 82%, transparent) 0%, color-mix(in srgb, var(--k) 55%, transparent) 55%, color-mix(in srgb, var(--k) 20%, transparent) 100%); }
.kit-hero-in { display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; gap: 28px; padding: clamp(40px, 5.5cqi, 84px) var(--pad) clamp(32px, 4cqi, 56px); }
.kit-hero--form .kit-hero-in { grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); align-items: center; }
.kit-kick { font-size: 15px; font-weight: 500; opacity: .88; margin-bottom: 12px; max-width: 52ch; }
.kit-h1 { font-size: clamp(38px, 5.6cqi, 84px); line-height: .98; color: inherit; max-width: 16ch; overflow-wrap: anywhere; }
.kit-sub { font-size: clamp(16px, 1.6cqi, 19px); max-width: 46ch; margin-top: 18px; opacity: .92; }
.kit-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.kit-hero .kit-btn--ghost { color: var(--s); border-color: color-mix(in srgb, var(--s) 55%, transparent); }
.kit-proof { list-style: none; padding: 0; margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px 0; }
.kit-proof li { display: flex; flex-direction: column; padding-inline: 0 22px; margin-inline-end: 22px; border-inline-end: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
.kit-proof li:last-child { border: 0; margin: 0; padding: 0; }
.kit-proof b { font: 700 clamp(18px, 2cqi, 24px)/1.15 var(--kit-d, var(--b-display)); }
.kit-proof span { font-size: 13px; opacity: .8; }
.kit-stars { display: block; width: 80px; height: 14px; margin: 3px 0; background: linear-gradient(90deg, var(--a) calc(var(--r) / 5 * 100%), color-mix(in srgb, currentColor 30%, transparent) 0);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 14px, transparent 14px 16.5px); mask: repeating-linear-gradient(90deg, #000 0 14px, transparent 14px 16.5px); }
.kit-lead { background: var(--s); color: var(--k); border-radius: 18px; padding: 20px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; min-width: 0; box-shadow: 0 24px 60px -24px color-mix(in srgb, var(--k) 60%, transparent); }
.kit-lead-t { font: 700 20px/1.2 var(--kit-d, var(--b-display)); }
.kit-lead label { display: grid; gap: 4px; font-size: 13px; color: var(--mut); }
.kit-lead input { width: 100%; min-width: 0; min-height: 46px; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; font: inherit; font-size: 16px; color: var(--k); background: var(--s); }
.kit-lead .kit-btn { width: 100%; }
.kit-lead-t, .kit-lead .kit-btn, .kit-lead .kit-fine, .kit-lead label:nth-of-type(3) { grid-column: 1 / -1; }
/* restaurant: dish-name type wall instead of stock food */
.kit-hero--type { color: var(--k); background: var(--ka-soft); }
.kit-hero--type .kit-hero-art::after { background: linear-gradient(90deg, var(--ka-soft) 30%, color-mix(in srgb, var(--ka-soft) 40%, transparent)); }
.kit-hero--type .kit-btn--ghost { color: var(--k); border-color: color-mix(in srgb, var(--k) 28%, transparent); }
.kit-type { position: absolute; inset: 0; display: flex; flex-wrap: wrap; align-content: center; justify-content: flex-end; gap: 0 .5em; padding: 4% 3%; overflow: hidden;
  font: 600 clamp(30px, 6.4cqi, 92px)/1.02 var(--kit-d, var(--b-display)); color: color-mix(in srgb, var(--kit-a) 34%, var(--ka-soft)); text-align: end; }
.kit-type span:nth-child(even) { font-style: italic; color: color-mix(in srgb, var(--kit-a) 52%, var(--ka-soft)); }

/* chips (estimate, picker, menu categories) */
.kit-chips, .kit-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.kit-chip { position: relative; display: inline-flex; }
.kit-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.kit-chip span, .kit-chip--b { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--s); color: var(--k); font: 500 14.5px/1.2 inherit; cursor: pointer; }
.kit-chip input:checked + span, .kit-chip--b[aria-pressed="true"] { background: var(--k); color: var(--s); border-color: var(--k); }
.kit-chip input:focus-visible + span { outline: 2.5px solid var(--p); outline-offset: 2px; }

/* estimate */
.kit-est-box { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; }
.kit-est-in { display: grid; gap: 18px; }
.kit-est-g { border: 0; padding: 0; margin: 0; min-width: 0; }
.kit-est-g legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
.kit-est.is-repair [data-g="kind"], .kit-est.is-repair [data-g="size"] { opacity: .4; pointer-events: none; }
.kit-est-out { background: var(--k); color: var(--s); border-radius: 18px; padding: 26px; display: grid; gap: 10px; align-content: start; }
.kit-est-lab { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; opacity: .7; }
.kit-est-num { font: 700 clamp(30px, 4cqi, 44px)/1.05 var(--kit-d, var(--b-display)); }
.kit-est-out .kit-fine { color: color-mix(in srgb, var(--s) 70%, transparent); }
.kit-est-out .kit-btn { justify-self: start; }

/* before / after */
.kit-ba-box { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; touch-action: pan-y; user-select: none; }
.kit-ba-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kit-ba-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--x)) 0 0); filter: grayscale(.85) contrast(.85) brightness(.8) sepia(.25); }
.kit-ba-knob { position: absolute; top: 0; bottom: 0; left: var(--x); width: 3px; margin-left: -1.5px; background: var(--s); pointer-events: none; }
.kit-ba-knob::after { content: "\2194"; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--s); color: var(--k); display: grid; place-items: center; font-size: 20px; box-shadow: 0 6px 20px -6px color-mix(in srgb, var(--k) 60%, transparent); }
.kit-ba-box input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.kit-ba-tag { position: absolute; top: 14px; padding: 5px 10px; border-radius: 999px; background: color-mix(in srgb, var(--k) 70%, transparent); color: var(--s); font-size: 12.5px; font-weight: 600; }
.kit-ba-tag--l { left: 14px; } .kit-ba-tag--r { right: 14px; }
.kit-ba .kit-fine { margin-top: 10px; }

/* concern picker */
.kit-pick { background: var(--ka-soft); }
.kit-pick-out { margin-top: 18px; max-width: 60ch; }
.kit-pick-p p { font-size: 18px; margin-bottom: 14px; }

/* menu: sticky category chips over the aisle rows */
.kit-menu .kit-cats { position: sticky; top: 66px; z-index: 4; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 10px 0; margin: 4px 0 8px; background: var(--s); }
.kit-menu .kit-cats::-webkit-scrollbar { display: none; }
.kit-menu .kit-chip--b { flex: none; }
.kit-menu .ai-row.kit-off { display: none; }
.kit-menu .ai-it { cursor: pointer; }
.kit-dish { position: absolute; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.kit-dish-back { position: absolute; inset: 0; background: color-mix(in srgb, var(--b-ink) 45%, transparent); }
.kit-dish-panel { position: relative; width: min(560px, 100%); max-height: 86%; overflow: auto; background: var(--b-surface); color: var(--b-ink); border-radius: 22px 22px 0 0; animation: kit-up .28s cubic-bezier(.16,1,.3,1); }
.kit-dish-img { aspect-ratio: 16 / 10; background: color-mix(in srgb, var(--b-primary) 8%, var(--b-surface)); }
.kit-dish-img img { width: 100%; height: 100%; object-fit: contain; }
.kit-dish-body { padding: 20px 22px 24px; display: grid; gap: 10px; }
.kit-dish-body h3 { font: 700 24px/1.15 var(--b-display); margin: 0; }
.kit-dish-body p { margin: 0; color: color-mix(in srgb, var(--b-ink) 70%, var(--b-surface)); }
.kit-dish-go { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.kit-dish .kit-btn--main { background: var(--b-primary); color: var(--b-primary-ink) !important; }
.kit-dish .kit-btn--ghost { color: var(--b-ink); border-color: color-mix(in srgb, var(--b-ink) 25%, transparent); }
@keyframes kit-up { from { transform: translateY(40px); opacity: 0; } }

/* reviews marquee: CSS only, pauses on hover and focus, still under reduced motion */
.kit-marq { overflow: hidden; mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.kit-marq-run, .kit-marq-dup { display: flex; gap: 16px; width: max-content; }
.kit-marq-run { animation: kit-marq 48s linear infinite; }
.kit-marq:hover .kit-marq-run, .kit-marq:focus-within .kit-marq-run { animation-play-state: paused; }
.kit-q { width: min(360px, 78cqi); flex: none; background: var(--ka-soft); border-radius: 16px; padding: 20px 22px; margin: 0; font-size: 16px; }
.kit-q p::before { content: "\201C"; } .kit-q p::after { content: "\201D"; }
@keyframes kit-marq { to { transform: translateX(calc(-50% - 8px)); } }

/* service area */
.kit-area { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.kit-area-map { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 10; }
.kit-area-map .ws-map-svg { width: 100%; height: 100%; display: block; }
.kit-ring { position: absolute; left: 50%; top: 50%; width: 62%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 2px dashed var(--ka); background: color-mix(in srgb, var(--kit-a) 12%, transparent); }
.kit-area-copy h2 { font-size: clamp(26px, 4cqi, 42px); margin-bottom: 12px; }
.kit-area-copy p { font-size: 18px; margin-bottom: 18px; }

/* what happens next */
.kit-steps ol { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; counter-reset: s; }
.kit-steps li { border-top: 3px solid var(--ka); padding-top: 14px; display: grid; gap: 6px; }
.kit-steps b { font: 700 30px/1 var(--kit-d, var(--b-display)); color: var(--ka); }
.kit-steps span { font-size: 17px; font-weight: 500; }

/* reveals: only after kitWire adds .kit-js (never in the cover thumbnail, never under reduced motion), no pinning */
.kit-js .ws-sec, .kit-js .kit-rv { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--i, 0) * 70ms); }
.kit-js .ws-sec.is-in, .kit-js .kit-rv.is-in { opacity: 1; transform: none; }

/* phone action bar: Call + the trade's main action, sticky at the bottom of narrow sites */
.kit-bar { display: none; }
/* lift the assistant and cart pills above the phone bar (kitWire sets .kit-narrow on the host) */
.kit-narrow .ws-chat-btn, .kit-narrow .ai-pill { bottom: 86px; }
.ws--kit .ws-navtel.kit-navcta { font-weight: 600; }
@container (max-width: 760px) {
  .kit-hero { min-height: 0; }
  .kit-hero-art::after { background: linear-gradient(180deg, color-mix(in srgb, var(--k) 35%, transparent), color-mix(in srgb, var(--k) 86%, transparent) 70%); }
  .kit-hero--type .kit-hero-art::after { background: linear-gradient(180deg, color-mix(in srgb, var(--ka-soft) 30%, transparent), var(--ka-soft) 72%); }
  .kit-type { align-content: flex-start; justify-content: flex-start; text-align: start; font-size: 44px; }
  .kit-hero--form .kit-hero-in, .kit-est-box, .kit-area { grid-template-columns: minmax(0, 1fr); }
  .kit-hero-in { padding-top: 140px; }
  .kit-h1 { font-size: clamp(36px, 11cqi, 56px); }
  .kit-ctas .kit-btn { flex: 1 1 auto; }
  .kit-proof li { padding-inline-end: 14px; margin-inline-end: 14px; }
  .ws--kit .ws-links { display: none; }
  .ws--kit .ws-navtel.kit-navcta { margin-inline-start: auto; }
  .kit-bar { display: flex; gap: 10px; position: sticky; bottom: 0; z-index: 20; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--s) 94%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--line); }
  .kit-bar a, .kit-bar button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border-radius: 14px; font: 600 16px/1 var(--kit-b, var(--b-body)); text-decoration: none; border: 1.5px solid transparent; cursor: pointer; }
  .kit-bar-call { background: var(--s); color: var(--k) !important; border-color: color-mix(in srgb, var(--k) 25%, transparent) !important; }
  .kit-bar-main { background: var(--p); color: var(--pi) !important; flex: 1.6 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .kit-marq-run { animation: none; flex-wrap: nowrap; overflow-x: auto; width: auto; }
  .kit-marq-dup { display: none; }
  .kit-dish-panel { animation: none; }
  .kit-btn { transition: none; }
}
@container (min-width: 761px) { .kit-hero--type .kit-type { inset: 0 0 0 46%; } .kit-hero--type .kit-hero-art::after { background: none; } .kit-hero--type .kit-hero-copy { max-width: 52%; } }
.kit-hero--type .kit-type { font-size: clamp(28px, 4.6cqi, 72px); }
.kit-proof { margin-top: 22px; }
@container (max-width: 760px) { .kit-ctas a.kit-btn--ghost { display: none; } .kit-hero-in { padding-top: 110px; } .kit-hero--type .kit-type { font-size: 36px; } }
@container (max-width: 760px) { .kit-hero--type .kit-type { bottom: auto; height: 118px; font-size: 30px; } .kit-hero--type .kit-hero-in { padding-top: 132px; } }

/* .ws p/ul/h2 { margin: 0 } outranks single classes, so library spacing is scoped under .ws--kit */
.ws--kit .kit-kick { margin-bottom: 12px; }
.ws--kit .kit-sub { margin-top: 18px; }
.ws--kit .kit-proof { margin-top: 30px; }
.ws--kit .kit-pick-p p { margin-bottom: 14px; }
.ws--kit .kit-area-copy h2 { margin-bottom: 12px; }
.ws--kit .kit-area-copy p { margin-bottom: 18px; }
.ws--kit .kit-ba .kit-fine { margin-top: 10px; }
.kit-tlink { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 6px; color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@container (max-width: 760px) { .kit-hero--type .kit-type { height: 104px; -webkit-mask: linear-gradient(#000 62%, transparent); mask: linear-gradient(#000 62%, transparent); } }

/* sideways tracks reuse .sw-track (the shared "scrolls sideways by design" hook); showcase trades keep .sw-hero/.sw-name hooks, restyled here */
.ws--kit .kit-marq.sw-track { display: block; padding: 0; overflow: hidden; }
.ws--kit .kit-menu .kit-cats.sw-track { gap: 8px; padding: 10px 0; overflow-x: auto; }
.ws--kit .kit-hero.sw-hero { display: grid; align-items: stretch; min-height: 0; background: none; color: var(--s); }
.ws--kit .kit-hero--type.sw-hero { color: var(--k); background: var(--ka-soft); }
.ws--kit .kit-hero.sw-hero::after { content: none; }
.ws--kit .kit-h1.sw-name { font: 700 clamp(38px, 5.6cqi, 84px)/.98 var(--kit-d, var(--b-display)); letter-spacing: -.015em; max-width: 16ch; color: inherit; text-transform: none; }
@container (max-width: 760px) { .ws--kit .kit-h1.sw-name { font-size: clamp(36px, 11cqi, 56px); } }

/* R7 lane g fixes */
/* logo contrast: a logo too close to the bar colour sits on a chip (kitWire measures it) */
.ws--kit .ws-brand.kit-logo-chip-dark { background: var(--k); padding: 5px 12px; border-radius: 8px; }
.ws--kit .ws-brand.kit-logo-chip-light { background: #fff; padding: 5px 12px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
/* phones: the assistant collapses to an icon above the action bar so it never covers the hero */
.kit-narrow .ws-chat-btn { font-size: 0; gap: 0; width: 52px; height: 52px; min-height: 52px; padding: 0; justify-content: center; right: 14px; bottom: 84px; }
.kit-narrow .ws-chat-dot { width: 16px; height: 16px; }
/* before/after example art */
.kit-ba-ph { position: absolute; inset: 0; display: grid; place-items: end start; padding: 14px 16px; }
.kit-ba-ph--b { background: linear-gradient(135deg, #8d8a85, #b9b5ad 55%, #9b978f); }
.kit-ba-ph--a { background: linear-gradient(135deg, var(--ka), color-mix(in srgb, var(--ka) 45%, #fff) 60%, var(--ka-soft)); }
.kit-ba-ph span { font: 600 13px/1 var(--kit-b, var(--b-body)); letter-spacing: .08em; text-transform: uppercase; color: #fff; opacity: .9; margin-bottom: 36px; }
.kit-ba-before { filter: none; }
/* specials price stickers */
.kit-stickers { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.kit-sticker { position: relative; display: grid; gap: 6px; align-content: start; padding: 18px 16px 16px; background: color-mix(in srgb, var(--a) 28%, #fff); color: #1a1a1a; border-radius: 6px 6px 22px 6px; box-shadow: 0 2px 0 rgba(0,0,0,.08); transform: rotate(calc((var(--i, 0) % 3 - 1) * 1.2deg)); }
.kit-sticker-name { font: 600 16px/1.25 var(--kit-b, var(--b-body)); }
.kit-sticker-price { font: 800 clamp(26px, 4cqi, 36px)/1 var(--kit-d, var(--b-display)); }
.kit-sticker-tag { font: 600 11.5px/1.2 var(--kit-b, var(--b-body)); font-style: normal; opacity: .75; }
.ws--kit .kit-specials + .sw-week { margin-top: 0; }
/* aisle rails: snap so a tile never rests half cut */
.ai-track { scroll-snap-type: x proximity; scroll-padding-inline: var(--pad); }
.ai-it { scroll-snap-align: start; }
/* reviews marquee clips at its section */
.kit-rev { overflow: hidden; }
.ws--kit .kit-marq.sw-track { max-width: 100%; min-width: 0; contain: paint; }
/* phones: two aisle tiles fit exactly between the page padding, the rest scrolls and snaps */
@container (max-width: 760px) { .ai-aisles { --ai-w: calc(50cqi - var(--pad)); } }
.kit-ba-ph--a { background: linear-gradient(135deg, color-mix(in srgb, var(--a) 70%, #fff), color-mix(in srgb, var(--a) 30%, #fff) 60%, #fff); }
/* salon kit services reuse the .sw-book hook (the showcase checks count its rows) without its row layout */
.ws--kit .ws-svc.sw-book li { display: block; }