/* Tallgrass Auto Works (demo) — a website that feels like a native iPhone app.
   References: Tesla / Rivian owner apps (dark, the car up front, round quick actions), Apple Wallet passes (the visit
   ticket), iOS sheets and floating tab bars, Paperpillar "car health" tickets, Italica "workshop status" tiles.
   One loud thing per screen: the photo hero on Home, the ticket on the booking. Everything else is quiet glass. */
/* Palettes (Nick, 09.11: no orange). Default = Champagne (recommended): warm metal on warm black.
   html[data-palette="green"] = Racing green, html[data-palette="steel"] = Ice steel. Photos are graded near-mono and
   take the palette's tint through a colour-blend layer, so every picture sits in the same colour as the accent. */
:root {
  --bg: #0a0908; --bg-2: #0e0d0b; --surface: #141310; --surface-2: #1a1915; --surface-3: #24221d;
  --glass: rgb(26 25 21 / .62); --glass-hi: rgb(255 255 255 / .06);
  --stroke: rgb(255 255 255 / .08); --stroke-2: rgb(255 255 255 / .14);
  --text: #f4f1ea; --text-2: rgb(244 241 234 / .66); --text-3: rgb(244 241 234 / .42);
  --acc: #c3a273; --acc-hi: #e8d3aa; --acc-deep: #9f7f52; --acc-ink: #1a140b; --acc-rgb: 214 186 140; --acc-glow: rgb(var(--acc-rgb) / .3);
  --mint: #8fcfae; --blue: #a9b8c9; --mint-rgb: 143 207 174; --blue-rgb: 169 184 201; --amber: #e8c98f; --red: #ef8b80;
  --paper: #f6f2ea; --ink: #14110c; --ink-2: #6a6152;
  --sheet: #100f0d;
  --tint: #c3a273; --tint-op: .32;
  --amb-1: rgb(214 186 140 / .11); --amb-2: rgb(214 186 140 / .04);
  --r-xl: 30px; --r-lg: 22px; --r-md: 16px; --r-sm: 12px;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Geist", "Segoe UI", Roboto, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Geist", "Segoe UI", Roboto, sans-serif;
  --mono: "SF Mono", "Geist Mono", ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}
html[data-palette="green"] {
  --bg: #070a09; --bg-2: #0a0f0d; --surface: #0f1513; --surface-2: #141c19; --surface-3: #1c2723;
  --glass: rgb(18 26 23 / .62);
  --text: #eef4f0; --text-2: rgb(238 244 240 / .66); --text-3: rgb(238 244 240 / .42);
  --acc: #2c7a58; --acc-hi: #4ea47f; --acc-deep: #1d573f; --acc-ink: #f1f8f3; --acc-rgb: 92 176 138; --acc-glow: rgb(var(--acc-rgb) / .3);
  --mint: #b7e4cc; --blue: #a9b8c4; --mint-rgb: 183 228 204; --blue-rgb: 169 184 196; --amber: #e3cf9a;
  --paper: #f1f4ef; --ink: #0c1410; --ink-2: #566259;
  --sheet: #0c1210; --tint: #2c7a58; --tint-op: .38;
  --amb-1: rgb(92 176 138 / .11); --amb-2: rgb(92 176 138 / .04);
}
html[data-palette="steel"] {
  --bg: #06080b; --bg-2: #090c10; --surface: #0f141a; --surface-2: #141a22; --surface-3: #1c242f;
  --glass: rgb(20 26 34 / .62);
  --text: #eef3f8; --text-2: rgb(238 243 248 / .66); --text-3: rgb(238 243 248 / .42);
  --acc: #95b2d2; --acc-hi: #d4e3f3; --acc-deep: #6d8db2; --acc-ink: #08111c; --acc-rgb: 165 192 222; --acc-glow: rgb(var(--acc-rgb) / .3);
  --mint: #86d3b4; --blue: #c2ccd7; --mint-rgb: 134 211 180; --blue-rgb: 194 204 215; --amber: #e3d3a6;
  --paper: #f1f4f8; --ink: #0a111a; --ink-2: #566273;
  --sheet: #0b0f14; --tint: #8fb0d6; --tint-op: .34;
  --amb-1: rgb(165 192 222 / .11); --amb-2: rgb(165 192 222 / .04);
}
/* the shop's mark, drawn in the palette (no orange PNGs in the UI) */
.appicon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px; background: linear-gradient(160deg, var(--acc-hi), var(--acc) 60%, var(--acc-deep)); color: var(--acc-ink); font: 800 1.25rem/1 var(--display); letter-spacing: -.02em; box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 8px 18px -8px var(--acc-glow); }
.appicon--lg { width: 64px; height: 64px; border-radius: 15px; font-size: 2rem; }
.appicon--xl { width: 92px; height: 92px; border-radius: 22px; font-size: 2.9rem; box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), 0 24px 50px -16px var(--acc-glow); }
/* photo tint: one colour across every picture */
.tinted { position: relative; }
.tinted::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--tint); mix-blend-mode: color; opacity: var(--tint-op); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font: 400 16px/1.5 var(--sans); overflow-x: hidden; -webkit-font-smoothing: antialiased; letter-spacing: -.005em; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
h1, h2, h3 { text-wrap: balance; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.ambient { position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(60% 40% at 100% 0%, var(--amb-1), transparent 70%),
              radial-gradient(50% 40% at 0% 60%, var(--amb-2), transparent 70%); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 22px; border-radius: 999px; border: 0; font: 600 1rem/1 var(--sans); letter-spacing: -.01em; cursor: pointer; white-space: nowrap; transition: transform .15s var(--ease), box-shadow .2s, background .2s; }
.btn:active { transform: scale(.97); }
.btn--sm { min-height: 42px; padding: 0 16px; font-size: .92rem; }
.btn--acc { background: linear-gradient(180deg, var(--acc-hi), var(--acc)); color: var(--acc-ink); box-shadow: 0 10px 28px -10px var(--acc-glow), inset 0 1px 0 rgb(255 255 255 / .35); }
.btn--glass { background: var(--glass-hi); color: var(--text); box-shadow: inset 0 0 0 1px var(--stroke-2); }
.btn--light { background: var(--text); color: var(--ink); }
.btn--ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--stroke-2); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .35; cursor: not-allowed; box-shadow: none; }
.round { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--glass-hi); box-shadow: inset 0 0 0 1px var(--stroke); }
svg { flex-shrink: 0; }
.round svg, .quick__ic svg, .dock__round svg, .tabs__btn svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- top bar ---------- */
.bar { position: sticky; top: 0; z-index: 30; padding-top: var(--safe-t); background: rgb(7 9 13 / .9); }
@supports (backdrop-filter: blur(1px)) { .bar { backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); background: rgb(7 9 13 / .62); } }
.bar__in { max-width: 1240px; margin: 0 auto; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; }
.bar__shop { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bar__logo { width: 40px; height: 40px; border-radius: 11px; box-shadow: 0 6px 16px -6px var(--acc-glow); }
.bar__id { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.bar__id b { font: 700 1.02rem/1.15 var(--display); letter-spacing: -.02em; }
.bar__id small { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--text-2); white-space: nowrap; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); flex-shrink: 0; }
.is-open .dot { background: var(--mint); box-shadow: 0 0 0 3px rgb(var(--mint-rgb) / .18), 0 0 10px var(--mint); }
.bar__nav { display: none; gap: 28px; font-size: .92rem; color: var(--text-2); }
.bar__nav a:hover { color: var(--text); }
.bar__right { display: flex; align-items: center; gap: 8px; }
.only-wide { display: none; }
@media (min-width: 960px) { .bar__nav { display: flex; } .only-wide { display: inline-flex; } .bar__in { height: 72px; padding: 0 28px; } }

/* ---------- home layout ---------- */
.home { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 4px 12px calc(120px + var(--safe-b)); display: grid; gap: 14px; }
@media (min-width: 960px) {
  .home { padding: 12px 28px 64px; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 20px; align-items: start; }
  .hero { grid-row: span 2; }
  .sect--services, .sect--how, .foot { grid-column: 1 / -1; }
}

/* hero: the car up front */
.hero { position: relative; border-radius: var(--r-xl); overflow: hidden; min-height: clamp(470px, 128vw, 600px); background: var(--surface); isolation: isolate; box-shadow: 0 0 0 1px var(--stroke); }
@media (min-width: 960px) { .hero { min-height: 640px; } }
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; transform: scale(1.04); animation: settle 1.6s var(--ease) both; }
.hero__media::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(180deg, rgb(7 9 13 / .35) 0%, rgb(7 9 13 / 0) 22%, rgb(7 9 13 / .2) 45%, rgb(7 9 13 / .88) 72%, rgb(7 9 13 / .97) 100%); }
@keyframes settle { from { transform: scale(1.12); } to { transform: scale(1.04); } }
.hero__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 18px 18px; }
@media (min-width: 640px) { .hero__body { padding: 32px; } }
.hero__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.hero__meta span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; font-size: .8rem; font-weight: 500; background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); }
.hero__meta span:empty { display: none; }
@supports (backdrop-filter: blur(1px)) { .hero__meta span { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } }
.hero__meta b { color: var(--amber); font-weight: 600; }
.hero__title { margin: 0; font: 800 clamp(2.5rem, 11.4vw, 4.6rem)/.95 var(--display); letter-spacing: -.045em; }
.hero__sub { margin: 12px 0 0; max-width: 30rem; color: var(--text-2); font-size: 1rem; line-height: 1.45; }
.next { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 999px; background: rgb(22 28 38 / .7); box-shadow: inset 0 0 0 1px var(--stroke-2), 0 20px 40px -20px rgb(0 0 0 / .8); }
@supports (backdrop-filter: blur(1px)) { .next { background: rgb(22 28 38 / .45); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); } }
.next__txt { display: flex; flex-direction: column; min-width: 0; }
.next__txt small { font-size: .74rem; color: var(--text-2); }
.next__txt b { font: 700 1.12rem/1.2 var(--display); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.next .btn { min-height: 48px; padding: 0 24px; }

.side { display: grid; gap: 14px; min-width: 0; }

/* quick actions, Tesla-style rounds */
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 6px 4px 2px; }
.quick > * { display: flex; flex-direction: column; align-items: center; gap: 7px; background: none; border: 0; padding: 0; cursor: pointer; font-size: .76rem; font-weight: 500; color: var(--text-2); }
.quick__ic { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--stroke), inset 0 1px 0 rgb(255 255 255 / .06); color: var(--text); transition: transform .15s var(--ease); }
.quick > *:active .quick__ic { transform: scale(.94); }
.quick__ic--acc { background: linear-gradient(180deg, var(--acc-hi), var(--acc)); color: var(--acc-ink); box-shadow: 0 10px 24px -10px var(--acc-glow); }
.quick__ic--acc svg { stroke-width: 2.1; }

/* cards */
.card { position: relative; background: linear-gradient(180deg, var(--surface-2), var(--surface)); border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--stroke), inset 0 1px 0 rgb(255 255 255 / .04); padding: 18px; min-width: 0; }
.card__title { margin: 0; font: 700 1.12rem/1.2 var(--display); letter-spacing: -.02em; }

/* bays: lanes of the shop's lifts */
.bays__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.bays__sub { margin: 3px 0 0; font-size: .82rem; color: var(--text-2); }
.live { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgb(var(--mint-rgb) / .1); color: var(--mint); font: 600 .74rem var(--mono); white-space: nowrap; }
.live i { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.bays__lanes { margin-top: 16px; display: grid; gap: 9px; }
.lane { display: grid; grid-template-columns: 46px 1fr; align-items: center; gap: 10px; }
.lane__name { font: 600 .72rem var(--mono); color: var(--text-3); }
.lane__track { position: relative; height: 30px; border-radius: 9px; background: linear-gradient(180deg, rgb(var(--mint-rgb) / .2), rgb(var(--mint-rgb) / .1)); box-shadow: inset 0 0 0 1px rgb(var(--mint-rgb) / .32); overflow: hidden; }
.lane__busy { position: absolute; top: 3px; bottom: 3px; border-radius: 6px; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--stroke-2), 0 0 0 2px var(--surface-2); }
.lane__past { position: absolute; top: 0; bottom: 0; left: 0; background: rgb(7 9 13 / .62); }
.lane__now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--acc); box-shadow: 0 0 8px var(--acc); }
.bays__axis { display: flex; justify-content: space-between; margin: 7px 0 0 56px; font: 500 .66rem var(--mono); color: var(--text-3); }
.legend { display: flex; gap: 14px; margin: 12px 0 0 56px; font-size: .72rem; color: var(--text-3); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 8px; border-radius: 3px; display: inline-block; }
.l-free { background: rgb(var(--mint-rgb) / .35); box-shadow: inset 0 0 0 1px rgb(var(--mint-rgb) / .6); }
.l-busy { background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--stroke-2); }
.legend .l-now { width: 2px; height: 10px; background: var(--acc); box-shadow: 0 0 6px var(--acc); }
.bays__chips { display: flex; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--stroke); overflow-x: auto; scrollbar-width: none; }
.bays__chips::-webkit-scrollbar { display: none; }
.chip { flex: 0 0 auto; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 0; background: var(--glass-hi); box-shadow: inset 0 0 0 1px var(--stroke-2); color: var(--text); font: 600 .9rem var(--sans); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.chip--first { background: rgb(var(--acc-rgb) / .14); box-shadow: inset 0 0 0 1px rgb(var(--acc-rgb) / .55); color: var(--acc-hi); }

/* sections */
.sect { min-width: 0; padding-top: 14px; }
.sect__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 6px; margin-bottom: 12px; }
.sect__head h2 { margin: 0; font: 700 1.45rem/1.15 var(--display); letter-spacing: -.03em; }
.sect__head p { margin: 0; font-size: .82rem; color: var(--text-3); text-align: right; }

/* services rail: photo cards */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: 74%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -12px; padding: 2px 18px 8px; scroll-padding-left: 18px; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
@media (min-width: 560px) { .rail { grid-auto-columns: 44%; } }
@media (min-width: 960px) { .rail { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; margin: 0; padding: 0; } }
@media (min-width: 1200px) { .rail { grid-template-columns: repeat(4, 1fr); } }
.svc { scroll-snap-align: start; text-align: left; border: 0; padding: 0; background: var(--surface); border-radius: var(--r-lg); overflow: hidden; cursor: pointer; box-shadow: inset 0 0 0 1px var(--stroke); display: flex; flex-direction: column; transition: transform .2s var(--ease); }
.svc:active { transform: scale(.98); }
.svc__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2); }
.svc__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.svc:hover .svc__img img { transform: scale(1.05); }
.svc__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgb(16 21 29 / .9)); }
.svc__len { position: absolute; top: 10px; left: 10px; z-index: 3; padding: 4px 9px; border-radius: 999px; font: 600 .72rem var(--sans); background: rgb(7 9 13 / .55); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); }
@supports (backdrop-filter: blur(1px)) { .svc__len { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } }
.svc__body { padding: 12px 14px 14px; display: grid; gap: 4px; flex: 1; align-content: start; }
.svc__name { font: 650 1.02rem/1.25 var(--display); letter-spacing: -.015em; }
.svc__desc { font-size: .84rem; color: var(--text-2); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.svc__row { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.svc__price { font-weight: 650; }
.svc__go { font-size: .82rem; font-weight: 600; color: var(--acc-hi); }

/* how it goes: a vertical tracker */
.track { list-style: none; margin: 0; padding: 4px 6px 0; display: grid; gap: 0; counter-reset: t; }
@media (min-width: 960px) { .track { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.track li { position: relative; counter-increment: t; padding: 0 0 22px 46px; }
.track li::before { content: counter(t); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 700 .85rem var(--mono); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--stroke-2); color: var(--acc-hi); }
.track li::after { content: ""; position: absolute; left: 14.5px; top: 34px; bottom: 4px; width: 1px; background: linear-gradient(var(--stroke-2), transparent); }
.track li:last-child::after { display: none; }
@media (min-width: 960px) { .track li { padding: 44px 0 0; } .track li::after { left: 40px; right: 0; top: 15px; bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, var(--stroke-2), transparent); } }
.track b { display: block; font: 650 1.02rem/1.3 var(--display); letter-spacing: -.01em; }
.track span { display: block; margin-top: 3px; font-size: .9rem; color: var(--text-2); max-width: 30rem; }

/* rating */
.rating-card { display: flex; align-items: center; gap: 16px; }
.rating-card__num { font: 800 3rem/1 var(--display); letter-spacing: -.05em; }
.stars { color: var(--amber); letter-spacing: 2px; font-size: 1.05rem; }
.rating-card p { margin: 2px 0 0; color: var(--text-2); font-size: .9rem; }

/* visit: a dark map tile */
.visit { padding: 0; overflow: hidden; }
.map { position: relative; height: 150px; background:
  linear-gradient(115deg, transparent 47%, rgb(255 255 255 / .07) 47.5%, rgb(255 255 255 / .07) 49%, transparent 49.5%),
  linear-gradient(25deg, transparent 58%, rgb(255 255 255 / .05) 58.5%, rgb(255 255 255 / .05) 60%, transparent 60.5%),
  repeating-linear-gradient(0deg, transparent 0 34px, rgb(255 255 255 / .035) 34px 35px),
  repeating-linear-gradient(90deg, transparent 0 46px, rgb(255 255 255 / .035) 46px 47px),
  radial-gradient(60% 80% at 55% 55%, #1b2430, #0f141b); }
.map::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, var(--surface-2)); }
.map__pin { position: absolute; left: 55%; top: 46%; width: 18px; height: 18px; margin: -9px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 6px rgb(var(--acc-rgb) / .25), 0 0 0 14px rgb(var(--acc-rgb) / .1), 0 0 24px var(--acc); z-index: 1; }
.visit__body { padding: 4px 18px 18px; }
.visit__addr { margin: 8px 0 14px; color: var(--text-2); }
.visit__btns { display: flex; gap: 8px; flex-wrap: wrap; }
.visit__btns .btn { flex: 1 1 140px; min-height: 48px; }
.hours { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: .92rem; }
.hours td { padding: 9px 0; border-top: 1px solid var(--stroke); color: var(--text-2); }
.hours td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.hours tr.is-today td { color: var(--text); font-weight: 600; }
.hours tr.is-today td:first-child::after { content: "Today"; margin-left: 8px; padding: 2px 7px; border-radius: 999px; font-size: .68rem; background: rgb(var(--acc-rgb) / .15); color: var(--acc-hi); vertical-align: 1px; }

/* install */
.install-card { display: flex; align-items: center; gap: 14px; background: radial-gradient(120% 140% at 0% 0%, rgb(var(--acc-rgb) / .22), transparent 55%), linear-gradient(180deg, var(--surface-2), var(--surface)); }
.install-card__icon { width: 64px; height: 64px; border-radius: 15px; box-shadow: 0 14px 30px -12px var(--acc-glow), 0 0 0 1px rgb(255 255 255 / .1); flex-shrink: 0; }
.install-card__txt { flex: 1; min-width: 0; }
.install-card p { margin: 3px 0 0; font-size: .86rem; color: var(--text-2); }
.install-card .btn { min-height: 44px; padding: 0 18px; }

.foot { padding: 18px 6px 0; font-size: .8rem; color: var(--text-3); display: grid; gap: 4px; }
.foot p { margin: 0; }
.foot b { color: var(--text-2); font-weight: 600; }
.foot a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- floating dock (phone browser) & tab bar (installed app) ---------- */
.dock, .tabs { position: fixed; z-index: 25; left: 12px; right: 12px; bottom: calc(12px + var(--safe-b)); }
.dock { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 999px; background: rgb(18 23 32 / .9); box-shadow: inset 0 0 0 1px var(--stroke-2), 0 20px 40px -12px rgb(0 0 0 / .8); }
.dock__round { width: 50px; height: 50px; border-radius: 50%; border: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--glass-hi); box-shadow: inset 0 0 0 1px var(--stroke); cursor: pointer; }
.dock__main { flex: 1; min-height: 50px; }
@media (min-width: 960px) { .dock { display: none; } }
.tabs { display: none; }
.is-app .dock { display: none; }
.is-app .tabs { display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px; border-radius: 28px; background: rgb(18 23 32 / .9); box-shadow: inset 0 0 0 1px var(--stroke-2), 0 20px 40px -12px rgb(0 0 0 / .8); }
@supports (backdrop-filter: blur(1px)) { .dock, .is-app .tabs { background: rgb(18 23 32 / .62); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); } }
.tabs__btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 54px; border: 0; border-radius: 22px; background: none; font-size: .68rem; font-weight: 600; color: var(--text-3); cursor: pointer; }
.tabs__btn.is-on { color: var(--text); background: rgb(255 255 255 / .08); }
.tabs__btn.is-on svg { stroke: var(--acc-hi); }
.tabs__badge { position: absolute; top: 5px; left: calc(50% + 7px); min-width: 17px; height: 17px; border-radius: 9px; background: var(--acc); color: var(--acc-ink); font-size: .62rem; font-weight: 800; display: flex; align-items: center; justify-content: center; padding: 0 4px; box-shadow: 0 0 0 2px var(--surface); }
.is-app .bar .only-wide { display: none; }

/* ---------- sheets ---------- */
.scrim { position: fixed; inset: 0; z-index: 40; background: rgb(0 0 0 / .55); animation: fade .25s ease both; }
@supports (backdrop-filter: blur(1px)) { .scrim { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } }
@keyframes fade { from { opacity: 0; } }
.sheet { position: fixed; z-index: 41; left: 0; right: 0; bottom: 0; top: calc(var(--safe-t) + 10px); display: flex; flex-direction: column; background: var(--sheet); color: var(--text); border-radius: 28px 28px 0 0; box-shadow: inset 0 1px 0 var(--stroke-2), 0 -20px 60px -20px rgb(0 0 0 / .8); outline: none; overflow: hidden; }
.sheet::before { content: ""; position: absolute; top: 7px; left: 50%; width: 38px; height: 5px; margin-left: -19px; border-radius: 3px; background: rgb(255 255 255 / .22); z-index: 2; }
@media (min-width: 720px) { .sheet { top: 50%; left: 50%; right: auto; bottom: auto; width: 440px; height: min(780px, 92vh); transform: translate(-50%, -50%); border-radius: 28px; box-shadow: inset 0 0 0 1px var(--stroke-2), 0 40px 100px -20px rgb(0 0 0 / .9); } .sheet::before { display: none; } }
.sheet.is-in { animation: rise .42s var(--ease) both; }
@media (min-width: 720px) { .sheet.is-in { animation: pop .3s var(--ease) both; } }
@keyframes rise { from { transform: translateY(48px); } to { transform: none; } }
@keyframes pop { from { transform: translate(-50%, -47%) scale(.98); } to { transform: translate(-50%, -50%); } }
.sheet__top { padding: 22px 18px 12px; }
.sheet__bar { display: flex; align-items: center; gap: 10px; }
.sheet__title { margin: 0; font: 700 1.35rem/1.2 var(--display); letter-spacing: -.025em; }
.sheet__sub { margin: 2px 0 0; font-size: .84rem; color: var(--text-2); }
.x { width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .09); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.x svg { width: 15px; height: 15px; stroke: var(--text-2); stroke-width: 2.6; fill: none; stroke-linecap: round; }
.back { width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .09); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text); }
.progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 14px; }
.progress i { height: 4px; border-radius: 2px; background: rgb(255 255 255 / .1); }
.progress i.on { background: linear-gradient(90deg, var(--acc-hi), var(--acc)); box-shadow: 0 0 10px -2px var(--acc-glow); }
.sheet__body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 18px 24px; overscroll-behavior: contain; }
.sheet__foot { padding: 12px 18px calc(14px + var(--safe-b)); background: var(--sheet); box-shadow: 0 -1px 0 var(--stroke); }
.sheet__sum { margin: 0 0 10px; font-size: .86rem; color: var(--text-2); min-height: 1.3em; text-align: center; }
.sheet__sum b { color: var(--text); font-weight: 600; }

/* service picker with thumbnails */
.picks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pick { width: 100%; text-align: left; display: grid; grid-template-columns: 58px 1fr auto; gap: 12px; align-items: center; padding: 8px 14px 8px 8px; border-radius: 18px; border: 0; background: var(--surface); box-shadow: inset 0 0 0 1px var(--stroke); cursor: pointer; transition: box-shadow .15s, background .15s; }
.pick img { width: 58px; height: 58px; border-radius: 13px; object-fit: cover; }
.pick__t { min-width: 0; }
.pick__name { display: block; font-weight: 650; letter-spacing: -.01em; }
.pick__meta { display: block; font-size: .8rem; color: var(--text-2); margin-top: 2px; }
.pick__price { font-weight: 650; font-size: .92rem; text-align: right; }
.pick[aria-pressed="true"] { background: rgb(var(--acc-rgb) / .1); box-shadow: inset 0 0 0 1.5px var(--acc); }

/* day strip + times */
.days { display: flex; gap: 8px; overflow-x: auto; padding: 4px 18px 12px; margin: 0 -18px; scroll-snap-type: x proximity; scroll-padding-left: 18px; scrollbar-width: none; }
.days::-webkit-scrollbar { display: none; }
.day { flex: 0 0 auto; width: 62px; min-height: 82px; border-radius: 20px; border: 0; background: var(--surface); box-shadow: inset 0 0 0 1px var(--stroke); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; scroll-snap-align: start; }
.day span { font-size: .7rem; color: var(--text-2); font-weight: 600; }
.day b { font: 700 1.35rem/1 var(--display); letter-spacing: -.03em; }
.day small { font-size: .62rem; color: var(--mint); font-weight: 600; }
.day small.full { color: var(--text-3); }
.day[aria-pressed="true"] { background: linear-gradient(180deg, var(--acc-hi), var(--acc)); box-shadow: 0 12px 24px -12px var(--acc-glow); color: var(--acc-ink); }
.day[aria-pressed="true"] span, .day[aria-pressed="true"] small { color: inherit; opacity: .72; }
.day[disabled] { opacity: .35; cursor: not-allowed; }
.group { margin: 16px 2px 8px; font-size: .78rem; font-weight: 600; color: var(--text-3); }
.times { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (min-width: 400px) { .times { grid-template-columns: repeat(4, 1fr); } }
.time { min-height: 48px; border-radius: 14px; border: 0; background: var(--surface); box-shadow: inset 0 0 0 1px var(--stroke); font: 600 .9rem var(--sans); font-variant-numeric: tabular-nums; cursor: pointer; }
.time[aria-pressed="true"] { background: linear-gradient(180deg, var(--acc-hi), var(--acc)); color: var(--acc-ink); box-shadow: 0 10px 22px -10px var(--acc-glow); }
.empty { padding: 22px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--stroke); text-align: center; color: var(--text-2); }
.empty p { margin: 0 0 14px; }
.fine { font-size: .8rem; color: var(--text-3); margin: 14px 2px 0; line-height: 1.45; }

/* fields */
.field { display: grid; gap: 6px; margin-bottom: 12px; }
.field label { font-size: .8rem; font-weight: 600; color: var(--text-2); padding-left: 4px; }
.field input, .field textarea { width: 100%; min-height: 54px; border-radius: 16px; border: 0; background: var(--surface); box-shadow: inset 0 0 0 1px var(--stroke-2); padding: 14px 16px; font: 400 16px/1.4 var(--sans); color: var(--text); }
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); }
.field textarea { min-height: 84px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--acc), 0 0 0 4px rgb(var(--acc-rgb) / .15); }
.field .err { font-size: .8rem; color: var(--red); margin: 0; padding-left: 4px; }
.field.has-err input { box-shadow: inset 0 0 0 1.5px var(--red); }
.check { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--stroke); margin-bottom: 8px; cursor: pointer; font-size: .94rem; }
.check small { display: block; color: var(--text-3); font-size: .78rem; }
.check input { width: 22px; height: 22px; accent-color: var(--acc); flex-shrink: 0; }

/* the visit ticket (Apple Wallet pass feel) */
.ticket { position: relative; border-radius: 24px; overflow: hidden; color: var(--ink); box-shadow: 0 24px 40px -18px rgb(0 0 0 / .7); }
.ticket.is-new { animation: ticket .7s var(--ease) both; }
@keyframes ticket { from { transform: translateY(30px) rotate(-2deg); } to { transform: none; } }
.ticket__top { position: relative; padding: 18px 20px 20px; background: radial-gradient(120% 120% at 100% 0%, rgb(255 255 255 / .35) 0%, transparent 45%), linear-gradient(160deg, var(--acc-hi), var(--acc-deep) 78%); color: var(--acc-ink); }
.ticket__brand { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 700 .7rem var(--sans); letter-spacing: .08em; text-transform: uppercase; opacity: .78; }
.ticket__time { margin: 14px 0 0; font: 800 2.6rem/1 var(--display); letter-spacing: -.05em; }
.ticket__date { margin: 6px 0 0; font: 650 1.02rem var(--display); letter-spacing: -.01em; }
.ticket__svc { margin: 2px 0 0; font-size: .9rem; opacity: .78; }
.ticket__cut { position: relative; height: 0; border-top: 2px dashed rgb(11 15 21 / .25); background: var(--paper); }
.ticket__cut::before, .ticket__cut::after { content: ""; position: absolute; top: -12px; width: 24px; height: 24px; border-radius: 50%; background: var(--sheet); }
.ticket__cut::before { left: -12px; } .ticket__cut::after { right: -12px; }
.ticket__bot { margin: 0; padding: 16px 20px 18px; background: var(--paper); display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.ticket__bot dt { font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.ticket__bot dd { margin: 2px 0 0; font-weight: 650; font-size: .95rem; overflow-wrap: anywhere; }
.ticket__bot .big { font: 800 1.5rem/1 var(--display); letter-spacing: -.03em; }
.ticket__code { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid rgb(11 15 21 / .1); }
.ticket__code span { font: 600 .76rem var(--mono); color: var(--ink-2); }
.bars { height: 30px; flex: 1; max-width: 170px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px, var(--ink) 8px 11px, transparent 11px 13px); border-radius: 2px; }

/* done */
.done-head { text-align: center; padding: 4px 0 16px; }
.tick { width: 54px; height: 54px; margin: 0 auto 10px; display: block; }
.tick circle { fill: rgb(var(--mint-rgb) / .16); stroke: var(--mint); stroke-width: 1.5; }
.tick path { fill: none; stroke: var(--mint); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw .5s .25s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.done-head h3 { margin: 0; font: 800 1.6rem/1.1 var(--display); letter-spacing: -.035em; }
.done-head p { margin: 4px 0 0; color: var(--text-2); font-size: .92rem; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0 10px; }
.tile { min-height: 80px; border-radius: 20px; border: 0; background: var(--surface); box-shadow: inset 0 0 0 1px var(--stroke); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; font-size: .78rem; font-weight: 600; cursor: pointer; color: var(--text); }
.tile svg { width: 22px; height: 22px; fill: none; stroke: var(--acc-hi); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--stroke); margin-bottom: 8px; text-align: left; cursor: pointer; }
.row p { margin: 0; font-weight: 600; font-size: .95rem; }
.row small { display: block; color: var(--text-3); font-size: .78rem; font-weight: 400; }
.switch { position: relative; width: 51px; height: 31px; flex-shrink: 0; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; border-radius: 16px; background: rgb(255 255 255 / .16); transition: background .2s; }
.switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgb(0 0 0 / .35); transition: transform .25s var(--ease); }
.switch input:checked + span { background: var(--mint); }
.switch input:checked + span::after { transform: translateX(20px); }
.switch input:focus-visible + span { outline: 2px solid var(--acc); outline-offset: 2px; }
.linkish { background: none; border: 0; padding: 10px 2px; min-height: 44px; color: var(--text-2); cursor: pointer; font-size: .9rem; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.app-card { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 20px; background: radial-gradient(120% 140% at 0% 0%, rgb(var(--acc-rgb) / .2), transparent 60%), var(--surface); box-shadow: inset 0 0 0 1px var(--stroke); margin-top: 10px; text-align: left; }
.app-card img { width: 52px; height: 52px; border-radius: 12px; flex-shrink: 0; }
.app-card p { margin: 0; font-size: .82rem; color: var(--text-2); flex: 1; min-width: 0; }
.app-card b { display: block; font-size: .95rem; color: var(--text); }
.app-card .btn { flex-shrink: 0; }

/* my visit: live status tracker */
.visit-card { border-radius: 24px; background: linear-gradient(180deg, var(--surface-2), var(--surface)); box-shadow: inset 0 0 0 1px var(--stroke); padding: 16px; margin-bottom: 12px; overflow: hidden; }
.visit-card__top { display: flex; gap: 12px; align-items: center; }
.visit-card__top img { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; flex-shrink: 0; }
.visit-card__top div { flex: 1; min-width: 0; }
.visit-card h3 { margin: 4px 0 0; font: 700 1.08rem/1.25 var(--display); letter-spacing: -.02em; }
.visit-card p { margin: 2px 0 0; color: var(--text-2); font-size: .86rem; }
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 16px 0 4px; }
.steps3 div { display: grid; gap: 6px; font-size: .72rem; font-weight: 600; color: var(--text-3); }
.steps3 i { height: 5px; border-radius: 3px; background: rgb(255 255 255 / .1); }
.steps3 .on { color: var(--text); }
.steps3 .on i { background: var(--mint); box-shadow: 0 0 10px -2px var(--mint); }
.visit-card__btns { display: flex; gap: 8px; margin-top: 14px; }
.visit-card__btns .btn { flex: 1; min-height: 46px; font-size: .92rem; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: .74rem; font-weight: 700; background: rgb(255 255 255 / .08); color: var(--text-2); }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill--booked { background: rgb(var(--blue-rgb) / .14); color: var(--blue); }
.pill--in_shop { background: rgb(var(--acc-rgb) / .15); color: var(--acc-hi); }
.pill--ready { background: rgb(var(--mint-rgb) / .14); color: var(--mint); }
.pill--done { background: rgb(255 255 255 / .07); color: var(--text-3); }

/* helper chat */
.chat { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.msg { max-width: 86%; padding: 11px 15px; border-radius: 22px; font-size: .96rem; line-height: 1.42; animation: msg .3s var(--ease) both; }
@keyframes msg { from { transform: translateY(8px); } }
.msg--bot { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--stroke); border-bottom-left-radius: 8px; align-self: flex-start; }
.msg--me { background: linear-gradient(180deg, var(--acc-hi), var(--acc)); color: var(--acc-ink); font-weight: 500; border-bottom-right-radius: 8px; align-self: flex-end; }
.msg__slots { display: grid; gap: 6px; margin-top: 10px; }
.msg__slot { min-height: 48px; border-radius: 16px; border: 0; background: rgb(255 255 255 / .05); box-shadow: inset 0 0 0 1px var(--stroke-2); text-align: left; padding: 0 6px 0 14px; font: 600 .9rem var(--sans); font-variant-numeric: tabular-nums; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.msg__slot b { padding: 8px 14px; border-radius: 999px; background: linear-gradient(180deg, var(--acc-hi), var(--acc)); color: var(--acc-ink); font-size: .8rem; }
.msg__act { margin-top: 10px; }
.msg__act .btn { min-height: 42px; font-size: .88rem; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.chips button { min-height: 38px; padding: 0 14px; border-radius: 999px; border: 0; background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px var(--stroke-2); cursor: pointer; font-size: .84rem; font-weight: 500; }
.typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 14px 16px; border-radius: 22px; border-bottom-left-radius: 8px; background: var(--surface-2); }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-2); animation: blink 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.ask { display: flex; gap: 8px; padding: 6px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--stroke-2); }
.ask input { flex: 1; min-height: 44px; border: 0; background: transparent; padding: 0 12px; font: 400 16px var(--sans); color: var(--text); min-width: 0; }
.ask input::placeholder { color: var(--text-3); }
.ask input:focus { outline: none; }
.ask:focus-within { box-shadow: inset 0 0 0 1.5px var(--acc); }
.ask button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: linear-gradient(180deg, var(--acc-hi), var(--acc)); cursor: pointer; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.ask svg { width: 19px; height: 19px; fill: none; stroke: var(--acc-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ask-note { margin: 8px 0 0; font-size: .72rem; color: var(--text-3); text-align: center; }
.bot-head { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.bot-head img { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; }

/* install guide */
.inst-hero { text-align: center; padding: 6px 0 4px; }
.inst-hero img { width: 92px; height: 92px; border-radius: 22px; margin: 0 auto; box-shadow: 0 24px 50px -16px var(--acc-glow), 0 0 0 1px rgb(255 255 255 / .12); }
.inst-hero b { display: block; margin-top: 12px; font: 700 1.1rem var(--display); }
.inst-hero p { margin: 4px auto 0; max-width: 300px; font-size: .88rem; color: var(--text-2); }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--stroke); margin: 18px 0 14px; }
.seg button { min-height: 40px; border: 0; border-radius: 10px; background: none; cursor: pointer; font-weight: 600; font-size: .84rem; color: var(--text-2); }
.seg button[aria-selected="true"] { background: var(--surface-3); color: var(--text); box-shadow: 0 2px 8px rgb(0 0 0 / .35), inset 0 0 0 1px var(--stroke); }
.how { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: how; }
.how li { counter-increment: how; display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: center; padding: 14px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--stroke); font-size: .93rem; line-height: 1.45; }
.how li::before { content: counter(how); width: 30px; height: 30px; border-radius: 50%; background: rgb(var(--acc-rgb) / .15); color: var(--acc-hi); display: flex; align-items: center; justify-content: center; font: 700 .85rem var(--mono); }
.how b { font-weight: 650; }
.how .ico { display: inline-flex; vertical-align: -5px; width: 22px; height: 22px; margin: 0 2px; padding: 2px; border-radius: 6px; background: rgb(var(--blue-rgb) / .14); }
.how .ico svg { width: 18px; height: 18px; fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.inst-ok { padding: 16px; border-radius: 18px; background: rgb(var(--mint-rgb) / .1); color: var(--mint); margin-top: 16px; text-align: center; font-weight: 600; }

/* toast: an iOS notification banner */
.toast { position: fixed; z-index: 60; left: 50%; top: calc(var(--safe-t) + 10px); transform: translateX(-50%); width: min(420px, calc(100% - 20px)); display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 22px; background: rgb(28 34 46 / .95); box-shadow: inset 0 0 0 1px var(--stroke-2), 0 20px 50px -10px rgb(0 0 0 / .8); font-size: .9rem; font-weight: 600; animation: drop .4s var(--ease) both; }
@supports (backdrop-filter: blur(1px)) { .toast { background: rgb(28 34 46 / .72); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); } }
.toast::before { content: "T"; width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font: 800 1.1rem var(--display); background: linear-gradient(180deg, var(--acc-hi), var(--acc)); color: var(--acc-ink); }
@keyframes drop { from { transform: translate(-50%, -24px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .tick path { stroke-dashoffset: 0; }
}

.hero__media::after, .svc__img::after { z-index: 2; }

/* ======================= v6: v3 is the base again (Nick, 09.11) =======================
   + palettes Blue (from v5) and Graphite, a palette switcher, the garage logo in the palette,
   + the visit pass from v5 in the palette's colours, light/depth details, a living install guide. */
html[data-palette="blue"] {
  --bg: #0b1522; --bg-2: #0e1a2a; --surface: #122031; --surface-2: #17283d; --surface-3: #1f3350;
  --glass: rgb(30 48 72 / .62);
  --text: #f1f4f9; --text-2: rgb(214 225 242 / .66); --text-3: rgb(214 225 242 / .42);
  --acc: #6da2f7; --acc-hi: #8bb6fb; --acc-deep: #4f86e8; --acc-ink: #0c1a33; --acc-rgb: 109 162 247; --acc-glow: rgb(var(--acc-rgb) / .3);
  --mint: #8ed8c0; --blue: #b8c6d8; --amber: #f2d08f; --mint-rgb: 142 216 192; --blue-rgb: 184 198 216;
  --paper: #eef3fb; --ink: #0b1426; --ink-2: #5f6b82;
  --sheet: #1d232d; --tint: #5b8ee6; --tint-op: .34;
  --amb-1: rgb(110 160 240 / .16); --amb-2: rgb(110 160 240 / .05);
}
html[data-palette="graphite"] {
  --bg: #08080a; --bg-2: #0c0c0e; --surface: #121214; --surface-2: #18181b; --surface-3: #222226;
  --glass: rgb(24 24 27 / .62);
  --text: #f5f5f7; --text-2: rgb(245 245 247 / .64); --text-3: rgb(245 245 247 / .4);
  --acc: #d9dbe0; --acc-hi: #ffffff; --acc-deep: #9fa3ab; --acc-ink: #0b0b0d; --acc-rgb: 225 227 232; --acc-glow: rgb(var(--acc-rgb) / .22);
  --mint: #9fdcc4; --blue: #b7bcc6; --amber: #e8d4a8; --mint-rgb: 159 220 196; --blue-rgb: 183 188 198;
  --paper: #f4f4f6; --ink: #0b0b0d; --ink-2: #5d6068;
  --sheet: #111113; --tint: #9aa0aa; --tint-op: .12;
  --amb-1: rgb(255 255 255 / .07); --amb-2: rgb(255 255 255 / .02);
}

/* the garage logo, drawn in each palette */
:root { --logo: url("../icons/garage/garage-bay-champagne.svg"); }
html[data-palette="green"] { --logo: url("../icons/garage/garage-bay-green.svg"); }
html[data-palette="steel"] { --logo: url("../icons/garage/garage-bay-steel.svg"); }
html[data-palette="blue"] { --logo: url("../icons/garage/garage-bay-blue.svg"); }
html[data-palette="graphite"] { --logo: url("../icons/garage/garage-bay-graphite.svg"); }
.appicon, .bar__logo { background: var(--logo) center / cover no-repeat !important; color: transparent !important; font-size: 0 !important; box-shadow: 0 10px 24px -12px var(--acc-glow), 0 0 0 1px rgb(255 255 255 / .06) !important; }
.toast::before { content: "" !important; background: var(--logo) center / cover no-repeat !important; }

/* light, depth, detail */
body::after { content: ""; position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: .055; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"); }
.card, .svc, .hero { box-shadow: inset 0 0 0 1px var(--stroke), inset 0 1px 0 rgb(255 255 255 / .07), 0 28px 60px -32px rgb(0 0 0 / .85) !important; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(60% 45% at 85% 8%, rgb(var(--acc-rgb) / .22), transparent 70%), radial-gradient(120% 80% at 50% 120%, rgb(0 0 0 / .55), transparent 60%); }
.hero__body { z-index: 2; }
.hero__media img { animation: settle 1.6s var(--ease) both, drift 22s ease-in-out 1.6s infinite alternate; }
@keyframes drift { from { transform: scale(1.04) translate3d(0, 0, 0); } to { transform: scale(1.09) translate3d(-1.5%, -1%, 0); } }
.hero::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / .09), transparent); transform: skewX(-12deg); animation: sweep 2.4s 1.2s var(--ease) 1 both; }
@keyframes sweep { from { left: -60%; } to { left: 130%; } }
.svc { transition: transform .35s var(--ease), box-shadow .35s; }
@media (hover: hover) { .svc:hover { transform: translateY(-4px); } }
.svc__img::after { background: linear-gradient(180deg, rgb(0 0 0 / 0) 40%, rgb(0 0 0 / .55)), radial-gradient(80% 60% at 70% 0%, rgb(var(--acc-rgb) / .14), transparent 70%); }
.lane__track { box-shadow: inset 0 0 0 1px rgb(var(--mint-rgb) / .35), 0 0 18px -8px rgb(var(--mint-rgb) / .9); }
.btn--acc { position: relative; overflow: hidden; }
.btn--acc::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(255 255 255 / .22), transparent 55%); pointer-events: none; border-radius: inherit; }

/* the visit pass from v5, in the palette */
.ticket { color: var(--text); background: linear-gradient(160deg, rgb(255 255 255 / .1), rgb(255 255 255 / .03)); box-shadow: inset 0 0 0 1px var(--stroke-2), inset 0 1px 0 rgb(255 255 255 / .12), 0 30px 60px -30px rgb(0 0 0 / .9); }
.ticket__top { color: var(--text); background: radial-gradient(100% 120% at 100% 0%, rgb(var(--acc-rgb) / .32), transparent 60%); padding: 20px 22px 22px; }
.ticket__brand { opacity: 1; color: var(--text-3); font: 500 .74rem var(--sans); letter-spacing: .02em; text-transform: none; }
.ticket__time { margin-top: 16px; font: 700 2.6rem/1 var(--display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.ticket__date { margin-top: 8px; font: 500 1.02rem var(--display); color: var(--text); }
.ticket__svc { color: var(--text-2); opacity: 1; }
.ticket__cut { border-top: 1px dashed var(--stroke-2); background: none; }
.ticket__cut::before, .ticket__cut::after { top: -11px; width: 22px; height: 22px; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--stroke-2); }
.ticket__bot { background: none; padding: 18px 22px 20px; gap: 14px 16px; }
.ticket__bot dt { font: 400 .72rem var(--sans); letter-spacing: 0; text-transform: none; color: var(--text-3); }
.ticket__bot dd { font-weight: 500; color: var(--text); }
.ticket__bot .big { font: 700 1.5rem/1 var(--display); color: var(--acc-hi); }
.ticket__code { border-top: 1px solid var(--stroke); }
.ticket__code span { color: var(--text-3); }
.bars { background: repeating-linear-gradient(90deg, rgb(255 255 255 / .75) 0 2px, transparent 2px 4px, rgb(255 255 255 / .75) 4px 5px, transparent 5px 8px, rgb(255 255 255 / .75) 8px 11px, transparent 11px 13px); opacity: .8; }

/* palette switcher */
.pal-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; background: conic-gradient(#c3a273 0 20%, #2c7a58 0 40%, #95b2d2 0 60%, #6da2f7 0 80%, #d9dbe0 0); box-shadow: inset 0 0 0 3px var(--bg), inset 0 0 0 4px rgb(255 255 255 / .2); }
.pal-pop { position: absolute; right: 12px; top: calc(100% + 8px); z-index: 35; display: grid; gap: 4px; padding: 8px; min-width: 210px; border-radius: 20px; background: rgb(22 24 30 / .94); box-shadow: inset 0 0 0 1px var(--stroke-2), 0 24px 50px -16px rgb(0 0 0 / .9); }
@supports (backdrop-filter: blur(1px)) { .pal-pop { background: rgb(22 24 30 / .72); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); } }
.pal-pop p { margin: 4px 8px 6px; font-size: .74rem; color: var(--text-3); }
.pal-pop button { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 10px; border: 0; border-radius: 12px; background: none; cursor: pointer; font-size: .9rem; color: var(--text); text-align: left; }
.pal-pop button[aria-pressed="true"] { background: rgb(255 255 255 / .08); }
.pal-pop i { width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2); }
.bar__right { position: relative; }

/* ---------- living install guide ---------- */
.inst { display: grid; gap: 18px; justify-items: center; }
.ip { position: relative; width: 206px; height: 410px; border-radius: 40px; padding: 9px; background: linear-gradient(145deg, #3a3d44, #121316 40%, #2a2d33); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14), 0 30px 60px -24px rgb(0 0 0 / .9); }
.ip__screen { position: relative; width: 100%; height: 100%; border-radius: 32px; overflow: hidden; background: var(--bg); }
.ip__notch { position: absolute; top: 8px; left: 50%; width: 70px; height: 20px; margin-left: -35px; border-radius: 12px; background: #000; z-index: 9; }
.ip__layer { position: absolute; inset: 0; transition: transform .55s var(--ease), opacity .4s; }
/* the website in the browser */
.ip__site { padding: 40px 12px 0; background: var(--bg); }
.ip__site { padding-top: 36px; }
.ip__site .h { display: flex; align-items: center; gap: 7px; font: 700 .72rem var(--display); }
.ip__site .h i { width: 20px; height: 20px; border-radius: 6px; background: var(--logo) center / cover; }
.ip__hero { margin-top: 10px; height: 128px; border-radius: 16px; background: linear-gradient(180deg, rgb(255 255 255 / .02), rgb(0 0 0 / .55)), url("../img/bay.webp") center / cover; display: flex; align-items: flex-end; padding: 10px; }
.ip__hero b { font: 800 .95rem/1 var(--display); letter-spacing: -.03em; }
.ip__site .ln { height: 8px; margin-top: 10px; border-radius: 4px; background: rgb(255 255 255 / .08); }
.ip__site .ln.s { width: 60%; }
.ip__site .cta { margin-top: 12px; height: 26px; border-radius: 13px; background: linear-gradient(180deg, var(--acc-hi), var(--acc)); }
/* safari bottom bar */
.ip__bar { top: auto; height: 74px; padding: 8px 10px 0; background: rgb(28 28 30 / .92); border-top: 1px solid rgb(255 255 255 / .08); }
.ip__url { height: 24px; border-radius: 8px; background: rgb(255 255 255 / .1); font: 500 .58rem var(--sans); color: rgb(255 255 255 / .75); display: flex; align-items: center; justify-content: center; }
.ip__icons { display: flex; justify-content: space-between; padding: 9px 8px 0; color: #4c8dff; }
.ip__icons svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* share sheet */
.ip__sheet { top: auto; height: 300px; border-radius: 18px 18px 0 0; background: #1c1c1e; transform: translateY(105%); padding: 12px 10px; }
.ip__sheet .app { display: flex; gap: 8px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid rgb(255 255 255 / .08); }
.ip__sheet .app i { width: 30px; height: 30px; border-radius: 8px; background: var(--logo) center / cover; }
.ip__sheet .app b { display: block; font-size: .66rem; color: #fff; }
.ip__sheet .app span { font-size: .56rem; color: rgb(255 255 255 / .5); }
.ip__sheet .rnd { display: flex; gap: 10px; padding: 10px 2px; }
.ip__sheet .rnd i { width: 34px; height: 34px; border-radius: 50%; background: rgb(255 255 255 / .1); }
.ip__row { display: flex; justify-content: space-between; align-items: center; height: 32px; padding: 0 10px; margin-top: 5px; border-radius: 9px; background: rgb(255 255 255 / .07); font-size: .62rem; color: #fff; transition: background .25s; }
.ip__row svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 1.8; }
/* add to home screen dialog */
.ip__dialog { background: #1c1c1e; transform: translateY(105%); padding: 40px 10px 0; }
.ip__dialog .top { display: flex; justify-content: space-between; align-items: center; font-size: .62rem; color: #4c8dff; }
.ip__dialog .top b { color: #fff; font-size: .64rem; }
.ip__dialog .top span:last-child { font-weight: 700; padding: 3px 8px; border-radius: 7px; transition: background .25s; }
.ip__dialog .card2 { display: flex; gap: 10px; align-items: center; margin-top: 16px; padding: 10px; border-radius: 12px; background: rgb(255 255 255 / .07); }
.ip__dialog .card2 i { width: 40px; height: 40px; border-radius: 10px; background: var(--logo) center / cover; }
.ip__dialog .card2 b { display: block; font-size: .7rem; color: #fff; }
.ip__dialog .card2 span { font-size: .56rem; color: rgb(255 255 255 / .45); }
/* home screen */
.ip__home { padding: 46px 14px 0; background: radial-gradient(90% 60% at 30% 0%, rgb(var(--acc-rgb) / .45), transparent 70%), radial-gradient(80% 60% at 100% 100%, rgb(var(--acc-rgb) / .25), transparent 70%), #101218; opacity: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 8px; align-content: start; }
.ip__app { display: grid; justify-items: center; gap: 4px; font-size: .5rem; color: rgb(255 255 255 / .85); }
.ip__app i { width: 40px; height: 40px; border-radius: 10px; background: rgb(255 255 255 / .14); }
.ip__app.me i { background: var(--logo) center / cover; box-shadow: 0 8px 18px -6px rgb(0 0 0 / .8); }
.ip__app.me { transform: scale(0); opacity: 0; }
/* the finger tap */
.ip__tap { position: absolute; z-index: 10; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: rgb(255 255 255 / .55); box-shadow: 0 0 0 6px rgb(255 255 255 / .18); opacity: 0; left: var(--tx, 50%); top: var(--ty, 50%); transition: left .5s var(--ease), top .5s var(--ease); }
.ip.tapping .ip__tap { animation: tap .9s ease-out 1; }
@keyframes tap { 0% { opacity: 0; transform: scale(1.4); } 25% { opacity: 1; transform: scale(1); } 45% { transform: scale(.82); } 100% { opacity: 0; transform: scale(1.1); } }
/* steps of the iPhone story */
.ip[data-step="0"] { --tx: 59%; --ty: 90%; }
.ip[data-step="1"] { --tx: 55%; --ty: 80.5%; }
.ip[data-step="2"] { --tx: 86%; --ty: 9.5%; }
.ip[data-step="3"] { --tx: 84%; --ty: 31%; }
.ip[data-step="1"] .ip__sheet, .ip[data-step="2"] .ip__sheet { transform: none; }
.ip[data-step="1"] .ip__row.hl { background: rgb(var(--acc-rgb) / .35); }
.ip[data-step="2"] .ip__dialog { transform: none; }
.ip[data-step="2"] .ip__dialog .top span:last-child { background: rgb(76 141 255 / .25); }
.ip[data-step="3"] .ip__home { opacity: 1; }
.ip[data-step="3"] .ip__app.me { animation: popin .7s .25s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes popin { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.ip[data-step="3"] .ip__bar, .ip[data-step="3"] .ip__site { opacity: 0; }
/* android: menu from the top, install dialog in the middle */
.ip[data-os="android"] .ip__bar { top: 30px; bottom: auto; height: 40px; border-top: 0; border-bottom: 1px solid rgb(255 255 255 / .08); display: flex; align-items: center; gap: 8px; padding: 0 10px; }
.ip[data-os="android"] .ip__bar .ip__url { flex: 1; }
.ip[data-os="android"] .ip__icons { display: none; }
.ip[data-os="android"] .ip__dots { display: block; width: 3px; height: 13px; background: radial-gradient(circle, #fff 1.4px, transparent 1.6px) 0 0 / 3px 4.5px; }
.ip__dots { display: none; }
.ip[data-os="android"] .ip__site { padding-top: 80px; }
.ip[data-os="android"] .ip__sheet { top: 64px; right: 8px; left: auto; bottom: auto; width: 150px; height: auto; border-radius: 12px; transform: scale(.6); transform-origin: top right; opacity: 0; padding: 6px; background: #2a2b30; }
.ip[data-os="android"] .ip__sheet .app, .ip[data-os="android"] .ip__sheet .rnd { display: none; }
.ip[data-os="android"][data-step="1"] .ip__sheet { transform: none; opacity: 1; }
.ip[data-os="android"][data-step="2"] .ip__sheet { opacity: 0; }
.ip[data-os="android"] .ip__dialog { inset: auto 14px; top: 34%; height: auto; padding: 14px; border-radius: 18px; background: #2a2b30; transform: scale(.85); opacity: 0; }
.ip[data-os="android"][data-step="2"] .ip__dialog { transform: none; opacity: 1; }
.ip[data-os="android"] .ip__dialog .top { order: 2; }
.ip[data-os="android"][data-step="0"] { --tx: 92%; --ty: 10.5%; }
.ip[data-os="android"][data-step="1"] { --tx: 70%; --ty: 21%; }
.ip[data-os="android"][data-step="2"] { --tx: 78%; --ty: 53%; }
/* computer: a browser window */
.ip[data-os="desktop"] { width: 300px; height: 210px; border-radius: 14px; padding: 6px; }
.ip[data-os="desktop"] .ip__screen { border-radius: 9px; }
.ip[data-os="desktop"] .ip__notch { display: none; }
.ip[data-os="desktop"] .ip__bar { top: 0; bottom: auto; height: 30px; padding: 4px 8px; display: flex; align-items: center; gap: 6px; border-top: 0; border-bottom: 1px solid rgb(255 255 255 / .08); }
.ip[data-os="desktop"] .ip__bar .ip__url { flex: 1; height: 20px; justify-content: space-between; padding: 0 8px; }
.ip[data-os="desktop"] .ip__icons, .ip[data-os="desktop"] .ip__dots, .ip[data-os="desktop"] .ip__sheet { display: none; }
.ip[data-os="desktop"] .ip__site { padding: 40px 12px 0; }
.ip[data-os="desktop"] .ip__hero { height: 70px; }
.ip[data-os="desktop"] .ip__dialog { inset: 34px 10px auto auto; width: 170px; height: auto; padding: 10px; border-radius: 12px; background: #2a2b30; transform: scale(.8); transform-origin: top right; opacity: 0; }
.ip[data-os="desktop"][data-step="1"] .ip__dialog { transform: none; opacity: 1; }
.ip[data-os="desktop"] .ip__home { padding: 0; display: block; background: var(--bg); }
.ip[data-os="desktop"] .ip__home .win { position: absolute; inset: 22px 30px; border-radius: 10px; background: var(--surface); box-shadow: 0 0 0 1px var(--stroke-2), 0 20px 40px -10px #000; transform: scale(.6); opacity: 0; transition: all .5s var(--ease); }
.ip[data-os="desktop"][data-step="2"] .ip__home { opacity: 1; }
.ip[data-os="desktop"][data-step="2"] .ip__home .win { transform: none; opacity: 1; }
.ip[data-os="desktop"][data-step="2"] .ip__site, .ip[data-os="desktop"][data-step="2"] .ip__bar { opacity: 0; }
.ip[data-os="desktop"][data-step="0"] { --tx: 88%; --ty: 9%; }
.ip[data-os="desktop"][data-step="1"] { --tx: 82%; --ty: 50%; }
.ip__home .win { display: none; }
.ip[data-os="desktop"] .ip__home .win { display: block; }
.ip[data-os="desktop"] .ip__home .ip__app { display: none; }
.ip__inst { width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .7); position: relative; }
.ip__inst::after { content: ""; position: absolute; left: 4px; top: 3px; width: 4px; height: 5px; border: solid rgb(255 255 255 / .8); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.ip[data-os="desktop"][data-step="0"] .ip__inst { box-shadow: inset 0 0 0 1.5px var(--acc-hi), 0 0 10px var(--acc); }
.steps-live { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 6px; counter-reset: sl; }
.steps-live li { counter-increment: sl; display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; color: var(--text-3); font-size: .9rem; transition: background .3s, color .3s; }
.steps-live li::before { content: counter(sl); width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 700 .76rem var(--mono); background: rgb(255 255 255 / .06); transition: background .3s, color .3s; }
.steps-live li.on { color: var(--text); background: rgb(255 255 255 / .05); }
.steps-live li.on::before { background: linear-gradient(180deg, var(--acc-hi), var(--acc)); color: var(--acc-ink); }
.steps-live b { color: inherit; }
@media (prefers-reduced-motion: reduce) { .ip__tap { display: none; } .hero__media img { animation: none; } }

/* ======================= fonts (Nick 09.11: "шрифты должны быть классные") =======================
   A (recommended): Archivo, set wide, for headings + Geist for text and numbers.
   B: Bricolage Grotesque + Instrument Sans.  C: Unbounded + Manrope.  All Google Fonts, open licences. */
html[data-font="a"] { --display: "Archivo", "Arial Narrow", system-ui, sans-serif; --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; }
html[data-font="b"] { --display: "Bricolage Grotesque", system-ui, sans-serif; --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif; }
html[data-font="c"] { --display: "Unbounded", system-ui, sans-serif; --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; }
html[data-font] body { font-family: var(--sans); letter-spacing: 0; }
html[data-font] :is(button, input, textarea, select) { font-family: var(--sans); }

/* headings: the display face, tuned per pair for big sizes */
:is(.hero__title, .sect__head h2, .card__title, .sheet__title, .done-head h3, .rating-card__num, .ticket__time, .bar__id b, .gate__title, .ohdr__title, .next__txt b, .svc__name, .track b, .pick__name, .visit-card h3, .inst-hero b, .daytitle b, .block h2) { font-family: var(--display); }
html[data-font="a"] :is(.hero__title, .sect__head h2, .rating-card__num, .ticket__time, .gate__title, .ohdr__title) { font-stretch: 118%; font-weight: 800; letter-spacing: -.028em; }
html[data-font="a"] .hero__title { font-size: clamp(2.3rem, 10.4vw, 4.4rem); line-height: .94; }
html[data-font="a"] :is(.card__title, .sheet__title, .done-head h3, .bar__id b, .next__txt b, .svc__name, .track b, .pick__name, .visit-card h3, .daytitle b, .block h2) { font-stretch: 108%; font-weight: 700; letter-spacing: -.012em; }
html[data-font="b"] :is(.hero__title, .sect__head h2, .rating-card__num, .ticket__time, .gate__title, .ohdr__title) { font-weight: 800; letter-spacing: -.035em; font-optical-sizing: auto; }
html[data-font="b"] :is(.card__title, .sheet__title, .done-head h3, .bar__id b, .next__txt b, .svc__name, .track b, .pick__name, .visit-card h3, .daytitle b, .block h2) { font-weight: 700; letter-spacing: -.02em; }
html[data-font="c"] :is(.hero__title, .sect__head h2, .rating-card__num, .ticket__time, .gate__title, .ohdr__title) { font-weight: 700; letter-spacing: -.035em; }
html[data-font="c"] .hero__title { font-size: clamp(2.1rem, 9.4vw, 3.9rem); line-height: 1; }
html[data-font="c"] .ticket__time { font-size: 2.25rem; }
html[data-font="c"] :is(.card__title, .sheet__title, .done-head h3, .bar__id b, .next__txt b, .svc__name, .track b, .pick__name, .visit-card h3, .daytitle b, .block h2) { font-weight: 600; letter-spacing: -.02em; }

/* numbers line up: time, prices, the pass code, the bay board */
:is(.ticket__time, .ticket__bot dd, .ticket__code span, .svc__price, .svc__len, .pick__price, .pick__meta, .time, .day b, .chip, .next__txt b, .hours td, .live, .rating-card__num, .nums b, .blk .t, .kv dd, .msg__slot span, .wstrip__days b) { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; }
.ticket__code span, .live, .lane__name, .bays__axis { font-family: var(--sans); letter-spacing: .02em; }
.ticket__brand { font-family: var(--sans); letter-spacing: .06em; text-transform: uppercase; font-size: .66rem; }

/* logo switcher (Nick 09.11): Bay (default) or Car in the bay, in every palette */
html[data-logo="car"] { --logo: url("../icons/garage/garage-car-in-champagne.svg"); }
html[data-logo="car"][data-palette="green"] { --logo: url("../icons/garage/garage-car-in-green.svg"); }
html[data-logo="car"][data-palette="steel"] { --logo: url("../icons/garage/garage-car-in-steel.svg"); }
html[data-logo="car"][data-palette="blue"] { --logo: url("../icons/garage/garage-car-in-blue.svg"); }
html[data-logo="car"][data-palette="graphite"] { --logo: url("../icons/garage/garage-car-in-graphite.svg"); }
.pal-pop .lg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 2px 4px; }
.pal-pop .lg-row button { flex-direction: column; justify-content: center; gap: 6px; min-height: 86px; padding: 8px 4px; font-size: .78rem; text-align: center; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); }
.pal-pop .lg-row button[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--acc); background: rgb(255 255 255 / .06); }
.pal-pop .lg-row i { width: 46px; height: 46px; border-radius: 11px; box-shadow: none; background-size: cover; }
.pal-pop .lg-row .lg-bay { background-image: url("../icons/garage/garage-bay-champagne.svg"); }
.pal-pop .lg-row .lg-car { background-image: url("../icons/garage/garage-car-in-champagne.svg"); }
.lg-o { display: grid; grid-template-columns: repeat(2, minmax(0, 150px)); gap: 8px; }
.lg-o button { display: grid; justify-items: center; gap: 8px; padding: 12px 8px; border: 0; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--stroke); cursor: pointer; font-size: .86rem; color: var(--text); }
.lg-o button[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--acc); }
.lg-o img { width: 56px; height: 56px; }

/* the NOSITE owner strip on a CRM preview link (#nsb, fixed at the bottom): dock and tab bar ride above it, a sheet covers it */
.has-nsb .dock, .has-nsb .is-app .tabs, .has-nsb .tabs { bottom: calc(var(--nsb-h, 0px) + 10px); }
html.sheet-open .nsb { visibility: hidden; }
html.has-nsb body.site { padding-bottom: calc(var(--nsb-h, 130px) + 96px); }
@media (min-width: 960px) { html.has-nsb body.site { padding-bottom: calc(var(--nsb-h, 90px) + 24px); } }

/* CRM preview bits (a real shop's own facts): the sample-day note, long names, the owner app card, the rating's link */
.bays__note { margin: 12px 2px 0; font-size: .76rem; line-height: 1.4; color: var(--text-3); }
.hero__title { overflow-wrap: anywhere; }
.hero__title--long { font-size: clamp(1.9rem, 7.6vw, 3.4rem); letter-spacing: -.03em; }
.rating-card p a { color: var(--acc-hi); text-decoration: none; white-space: nowrap; }
.owner-card img.install-card__icon { border-radius: 15px; }
.foot p + p { margin-top: 4px; }

/* ---------- NOSITE sample strip (nosite.online/sites/tallgrass-auto/) ----------
   Without JS it sits in the normal flow above the sticky top bar and scrolls away.
   With site.js (html.ns-pin) it is pinned to the top: it slides up while you scroll down and comes back as soon as you
   scroll up (html.ns-up), so the way back to nosite.online is one flick away. The top bar sits under it and rides up
   with it, so the strip never covers the bar. --ns-h is its height (it wraps to two lines on small phones).
   The link's tap area is 44px tall (padding with an equal negative margin, so the strip stays slim). */
.nosite-strip { position: relative; z-index: 1; margin: 0; padding: calc(8px + var(--safe-t)) 16px 8px; background: #111113; color: #fff; font: 400 13px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: 0; text-align: center; -webkit-font-smoothing: antialiased; }
.nosite-strip a { display: inline-block; padding: 14px 12px; margin: -14px -12px; color: #c9f55b; text-decoration: none; white-space: nowrap; }
.nosite-strip a:hover { text-decoration: underline; text-underline-offset: 2px; }
.nosite-strip a:focus-visible { outline: 2px solid #c9f55b; outline-offset: -11px; }
.ns-pin .nosite-strip { position: fixed; top: 0; left: 0; right: 0; z-index: 31; transition: transform .3s cubic-bezier(.23, 1, .32, 1); }
.ns-pin.ns-up .nosite-strip { transform: translateY(-100%); }
.ns-pin body { padding-top: var(--ns-h, 0px); }
.ns-pin .bar { top: var(--ns-h, 0px); transition: transform .3s cubic-bezier(.23, 1, .32, 1); }
.ns-pin.ns-up .bar { transform: translateY(calc(-1 * var(--ns-h, 0px))); }
@media (prefers-reduced-motion: reduce) { .ns-pin .nosite-strip, .ns-pin .bar { transition: none; } }
/* the same link at the end of the page, for whoever read the whole sample */
.foot .foot__ns { margin-top: 12px; }
.foot .foot__ns a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: #111113; color: #c9f55b; font: 500 14px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: 0; text-decoration: none; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); }
.foot .foot__ns a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot .foot__ns a:focus-visible { outline: 2px solid #c9f55b; outline-offset: 2px; }
.bar__shop { min-height: 44px; }
.foot a.foot__owner { display: inline-block; padding: 13px 0; margin: -13px 0; }