/*
 * NOSITE tax-office template v2. Design read: premium-consumer landing for a local tax office, Origin-style
 * editorial fintech (sky photography, light display serif with italic emphasis, mono-caps controls, dark product
 * cards, glass). Dials: variance 7, motion 7, density 3. One dark theme for the whole page (like the reference).
 * Shape rule: controls 8px, cards and panels 24-28px, the phone 56px. One accent (the lead's brand colour) on
 * progress, ticks, glows and focus; the main button is white with black mono text, as in the reference.
 * Serif: Newsreader, the closest Google face to the reference's Lyon Display (light 300 + italic).
 */
:root {
  --ink: #050505;
  --ink-2: #0b0b0c;
  --ink-3: #131315;
  --line: rgb(255 255 255 / .08);
  --line-2: rgb(255 255 255 / .16);
  --fg: #fafafa;
  --fg-2: rgb(250 250 250 / .74);
  --fg-3: rgb(250 250 250 / .56);
  --accent: #3d6fd9;
  --on-accent: #ffffff;
  --accent-lit: color-mix(in oklab, var(--accent) 55%, #ffffff);
  --accent-deep: color-mix(in oklab, var(--accent) 45%, #050505);
  --ok: #5fd39b;
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Roboto Mono", ui-monospace, Menlo, monospace;
  --r-ctl: 8px;
  --r-card: 24px;
  --r-panel: 28px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --gl: max(20px, env(safe-area-inset-left, 0px));
  --gr: max(20px, env(safe-area-inset-right, 0px));
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--fg); font: 400 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
section[id] { scroll-margin-top: 88px; }
.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding-left: var(--gl); padding-right: var(--gr); }
.center { display: grid; justify-items: center; text-align: center; gap: 24px; }
.i { width: 1.1em; height: 1.1em; flex: none; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mono { font: 400 12px/1.5 var(--mono); letter-spacing: .25px; text-transform: uppercase; color: var(--fg-3); }
.small { font-size: 14px; line-height: 1.5; color: var(--fg-3); }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 6px; }

/* ---------- type ---------- */
.h1, .h2, .h3 { font-family: var(--serif); font-weight: 300; font-optical-sizing: auto; letter-spacing: -.01em; text-wrap: balance; }
.h1 { font-size: clamp(2.9rem, 1.4rem + 5.2vw, 6rem); line-height: 1.12; }
.h2 { font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.4rem); line-height: 1.12; }
.h2--xl { font-size: clamp(2.6rem, 1.2rem + 4.6vw, 5rem); line-height: 1.04; }
.h3 { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.9rem); line-height: 1.06; }
em { font-style: italic; font-weight: 300; }
.lede { font-size: 16px; line-height: 1.55; color: var(--fg-2); max-width: 46ch; }
.split-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.split-w > span { display: inline-block; will-change: transform; }

/* ---------- glass (a web approximation, with a solid fallback) ---------- */
/* in-flow glass is painted (no backdrop blur) so scrolling stays at 60 fps; real blur only on the nav and the hero */
.glass { background: linear-gradient(135deg, rgb(255 255 255 / .13), rgb(255 255 255 / .05)), rgb(20 22 28 / .55); border: 1px solid rgb(255 255 255 / .14); box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 24px 60px -30px rgb(0 0 0 / .6); }
@media (prefers-reduced-transparency: reduce) { .glass { background: #1a1b1e; -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ---------- buttons (mono caps, 8px, like the reference) ---------- */
.btn { --h: 48px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: var(--h); padding: 0 18px; border: 0; border-radius: var(--r-ctl); font: 500 12.5px/1 var(--mono); letter-spacing: .4px; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; isolation: isolate; overflow: hidden; -webkit-tap-highlight-color: transparent; transition: transform .18s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease), color .3s; }
.btn:active { transform: scale(.97); }
.btn--sm { --h: 40px; padding: 0 14px; font-size: 12px; }
.btn--block { width: 100%; }
.btn__arr { display: inline-grid; width: 14px; height: 14px; overflow: hidden; }
.btn__arr .i { grid-area: 1 / 1; width: 14px; height: 14px; transition: transform .45s var(--ease-io); }
.btn__arr .i + .i { transform: translateX(-140%); }
.btn--white { background: var(--fg); color: #050505; box-shadow: 0 10px 30px -12px rgb(255 255 255 / .35); }
.btn--white::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .9) 50%, transparent 65%), #e9e9e9; transform: translateX(-101%); transition: transform .6s var(--ease-io); }
.btn--glass { background: rgb(255 255 255 / .1); color: var(--fg); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2); }
.hero .btn--glass { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.btn--dark { background: var(--ink-3); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-2); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover .btn__arr .i:first-child { transform: translateX(140%); }
  .btn:hover .btn__arr .i + .i { transform: translateX(0); }
  .btn--white:hover::after { transform: translateX(0); }
  .btn--glass:hover { background: rgb(255 255 255 / .16); }
  .btn--dark:hover { background: #1c1c1f; }
}

/* ---------- NOSITE strip ----------
   Without JS it sits in the flow at the very top 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 fixed nav starts under it and its bar rides up with it, so the strip never covers the nav.
   The nav's own transform belongs to the GSAP intro, so the bar inside it (.nav__in) is the part that moves. */
.nosite-strip { position: relative; z-index: 31; margin: 0; padding: 8px 16px; background: #111113; color: #fff; font: 400 13px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-align: center; }
.nosite-strip a { display: inline-block; padding: 14px 4px; margin: -14px -4px; color: #c9f55b; text-decoration: none; white-space: nowrap; }   /* 44px tap area, same line height */
.nosite-strip a:hover { text-decoration: underline; text-underline-offset: 2px; }
.nosite-strip a:focus-visible { outline: 2px solid #c9f55b; outline-offset: 2px; }
.ns-pin .nosite-strip { position: fixed; top: 0; left: 0; right: 0; transition: transform .3s cubic-bezier(.23, 1, .32, 1); }
.ns-pin.ns-up .nosite-strip { transform: translateY(-100%); }
.ns-pin body { padding-top: var(--strip-h, 33px); }

/* ---------- nav: transparent over the sky, glass once the hero is gone ---------- */
.nav { position: fixed; z-index: 30; left: 0; right: 0; top: calc(var(--strip-h, 33px) + env(safe-area-inset-top, 0px)); padding: 14px var(--gr) 0 var(--gl); transition: top .4s var(--ease); }
.nav__in { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; gap: 24px; height: 60px; padding: 0 10px 0 12px; border-radius: 14px; border: 1px solid transparent; transition: background-color .4s var(--ease), border-color .4s, box-shadow .4s; }
.ns-pin .nav { pointer-events: none; }   /* the empty strip-high band under the bar never catches taps */
.ns-pin .nav__in { pointer-events: auto; transition: background-color .4s var(--ease), border-color .4s, box-shadow .4s, transform .3s cubic-bezier(.23, 1, .32, 1); }
.ns-pin.ns-up .nav__in { transform: translateY(calc(-1 * var(--strip-h, 33px))); }
@media (prefers-reduced-motion: reduce) { .ns-pin .nosite-strip, .ns-pin .nav__in { transition: none; } }
.nav.is-solid .nav__in { background: rgb(12 12 13 / .66); border-color: var(--line-2); box-shadow: 0 20px 40px -24px rgb(0 0 0 / .8); -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--fg); min-width: 0; }
.brand__mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--fg); color: #050505; font: 500 15px/1 var(--serif); flex: none; }
.brand__name { font: 500 15px/1.15 var(--sans); letter-spacing: -.01em; white-space: nowrap; }
.nav__links { display: flex; gap: 4px; margin: 0 auto; }
.nav__links a { padding: 8px 12px; border-radius: var(--r-ctl); text-decoration: none; font: 400 12px/1 var(--mono); letter-spacing: .3px; text-transform: uppercase; color: var(--fg-2); transition: color .25s, background-color .25s; }
.nav__links a:hover { color: var(--fg); background: rgb(255 255 255 / .08); }
.nav__cta { display: flex; align-items: center; gap: 8px; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: max(100svh, 860px); overflow: hidden; display: grid; grid-template-rows: auto 1fr; padding-top: 128px; isolation: isolate; }
.hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__bg img { width: 100%; height: 115%; object-fit: cover; object-position: center 30%; transform-origin: 50% 40%; will-change: transform; }
.hero__bg::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgb(10 30 70 / .28) 0%, rgb(10 30 70 / 0) 30%, rgb(5 5 5 / 0) 52%, rgb(5 5 5 / .78) 82%, #050505 100%); }
.hero__shade { position: absolute; inset: 0; z-index: 2; background: #050505; opacity: 0; }
.hero__in { display: grid; justify-items: center; text-align: center; gap: 22px; padding: 0 var(--gr) 0 var(--gl); }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 999px; background: rgb(255 255 255 / .12); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font-size: 13px; color: var(--fg); text-decoration: none; text-shadow: 0 1px 8px rgb(0 0 0 / .2); }
.chip__ex { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; margin-right: -4px; border-radius: 5px; background: rgb(0 0 0 / .28); font: 500 10px/1 var(--mono); letter-spacing: .4px; text-transform: uppercase; text-shadow: none; }
.stars { display: inline-flex; gap: 1px; color: #ffd27a; }
.stars .i { width: 13px; height: 13px; }
.dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }
.dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: ping 2.2s var(--ease) infinite; }
.is-closed .dot { background: #c9c9c9; }
.is-closed .dot::after { display: none; }
@keyframes ping { from { transform: scale(1); opacity: .6; } to { transform: scale(2.8); opacity: 0; } }
.hero .h1 { color: #fff; text-shadow: 0 2px 30px rgb(10 30 70 / .25); text-wrap: initial; }
.hero .h1 .split-w { white-space: nowrap; }
.rot { position: relative; display: inline-grid; vertical-align: top; overflow: hidden; padding: 0 .05em .12em 0; margin-bottom: -.12em; }
.rot { transition: width .55s var(--ease); }
.rot__w { grid-area: 1 / 1; white-space: nowrap; opacity: 0; justify-self: start; }
.rot__w.is-on { opacity: 1; }
.rot__w.is-in { animation: rotIn .7s var(--ease) both .12s; }
.rot__w.is-out { animation: rotOut .45s var(--ease-io) both; }
@keyframes rotIn { from { opacity: 0; transform: translateY(100%); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes rotOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-100%); filter: blur(6px); } }
.hero__sub { font-size: 16px; line-height: 1.55; color: rgb(255 255 255 / .9); max-width: 40ch; text-shadow: 0 1px 12px rgb(10 30 70 / .3); }
.hero__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 4px; }

/* the phone */
.phone { position: relative; align-self: end; justify-self: center; width: min(360px, 82vw); margin-top: 48px; margin-bottom: -150px; will-change: transform; }
.phone__frame { padding: 11px; border-radius: 58px; background: linear-gradient(160deg, #3a3b40, #121214 30%, #0b0b0c 70%, #2a2b30); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .12), 0 50px 120px -40px rgb(0 0 0 / .9), 0 0 0 1px rgb(0 0 0 / .6); }
.phone__screen { position: relative; height: 560px; border-radius: 47px; overflow: hidden; padding: 14px 16px; background: radial-gradient(120% 60% at 50% 0%, color-mix(in oklab, var(--accent) 55%, #0a1a3a) 0%, #0a1222 45%, #060708 100%); }
.phone__bar { display: flex; align-items: center; justify-content: space-between; height: 32px; padding: 0 14px 0 18px; font: 600 14px/1 var(--sans); color: #fff; }
.phone__island { width: 96px; height: 28px; border-radius: 20px; background: #000; }
.phone__sig { width: 22px; height: 10px; border-radius: 3px; border: 1.5px solid rgb(255 255 255 / .8); }
.flow { position: relative; margin-top: 22px; padding: 18px 16px 16px; border-radius: 22px; background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .16); box-shadow: inset 0 1px 0 rgb(255 255 255 / .2); }
.flow__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.flow__t { font: 300 22px/1.1 var(--serif); }
.tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: rgb(255 255 255 / .1); color: var(--fg-2); font: 400 10.5px/1 var(--mono); letter-spacing: .4px; text-transform: uppercase; }
.flow__steps { position: relative; display: grid; }
.flow__steps::before, .flow__steps::after { content: ""; position: absolute; left: 12px; top: 24px; bottom: 24px; width: 2px; border-radius: 2px; background: rgb(255 255 255 / .14); }
.flow__steps::after { background: var(--accent-lit); transform-origin: top; transform: scaleY(var(--p, 0)); transition: transform .55s var(--ease-io); }
.flow__steps li { position: relative; z-index: 1; display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: center; min-height: 54px; }
.flow__steps b { display: block; font: 500 14.5px/1.25 var(--sans); color: rgb(255 255 255 / .55); transition: color .3s; }
.flow__steps small { display: block; font-size: 12.5px; color: rgb(255 255 255 / .5); }
.flow__dot { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #10151f; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .22); color: transparent; transition: background-color .3s, box-shadow .3s, color .3s; }
.flow__dot .i { width: 14px; height: 14px; transform: scale(.5); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.flow__steps li.is-done b, .flow__steps li.is-now b { color: #fff; }
.flow__steps li.is-done .flow__dot { background: var(--accent); box-shadow: none; color: var(--on-accent); }
.flow__steps li.is-done .flow__dot .i { transform: scale(1); }
.flow__steps li.is-now .flow__dot { box-shadow: inset 0 0 0 2px var(--accent-lit); }
.flow__steps li.is-now .flow__dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-lit); animation: beat 1s var(--ease) infinite; }
.flow__steps li.is-now .flow__dot .i { display: none; }
@keyframes beat { 50% { transform: scale(.55); opacity: .5; } }
/* the stamp lands in the Replay row, under the steps, so it never covers their text */
.stamp { position: absolute; right: 16px; bottom: 14px; padding: 5px 10px; border-radius: 7px; border: 2px solid var(--ok); box-shadow: inset 0 0 0 2px rgb(5 5 5 / .4), inset 0 0 0 3.5px var(--ok); color: var(--ok); font: 500 11.5px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; transform: rotate(-5deg); opacity: 0; background: rgb(6 20 14 / .55); }
.stamp.is-on { opacity: 1; }
.replay { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 8px 0; background: none; border: 0; cursor: pointer; color: rgb(255 255 255 / .6); font: 400 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .4px; opacity: 0; transition: opacity .3s, color .2s; }
.replay.is-on { opacity: 1; }
.replay:hover { color: #fff; }
.replay .i { width: 14px; height: 14px; }
.phone__toast { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 12px 14px; border-radius: 18px; background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .14); font-size: 12.5px; color: rgb(255 255 255 / .62); opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.phone__toast.is-on { opacity: 1; transform: none; }
.phone__toast b { display: block; color: #fff; font-weight: 500; font-size: 13px; }
.phone__toast-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--accent); color: var(--on-accent); flex: none; }
.phone__toast-ic .i { width: 16px; height: 16px; }

/* ---------- sections ---------- */
.sec { position: relative; padding-block: clamp(96px, 12vw, 168px); }
.sec--tight { padding-block: clamp(64px, 8vw, 120px); }
.hero + .sec { padding-top: clamp(200px, 20vw, 260px); }

/* panel with an inner sky (what to bring) */
.panel { position: relative; overflow: hidden; border-radius: var(--r-panel); padding: clamp(40px, 6vw, 88px) clamp(20px, 5vw, 72px); isolation: isolate; will-change: transform; }
.panel--sky { background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 70%, #0b2a66) 0%, #0a1d40 38%, #070b14 72%, var(--ink-2) 100%); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 34px; justify-items: center; }
.panel__glow { position: absolute; inset: -20% -10% auto; height: 70%; z-index: -1; background: radial-gradient(50% 60% at 50% 0%, rgb(255 255 255 / .38), transparent 70%); opacity: .55; pointer-events: none; }
.panel__head { display: grid; gap: 16px; justify-items: center; text-align: center; max-width: 780px; }
.tgs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 920px; }
.tg { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 12px; border: 0; border-radius: var(--r-ctl); background: rgb(255 255 255 / .08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); color: var(--fg); font: 400 14.5px/1 var(--sans); cursor: pointer; transition: background-color .25s, box-shadow .25s, transform .18s var(--ease), color .25s; }
.tg__box { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .4); transition: background-color .25s, box-shadow .25s; }
.tg__box .i { width: 13px; height: 13px; opacity: 0; transform: scale(.5); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), opacity .15s; }
.tg[aria-pressed="true"] { background: var(--fg); color: #050505; box-shadow: none; }
.tg[aria-pressed="true"] .tg__box { background: var(--accent); box-shadow: none; color: var(--on-accent); }
.tg[aria-pressed="true"] .tg__box .i { opacity: 1; transform: none; }
.tg:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .tg:not([aria-pressed="true"]):hover { background: rgb(255 255 255 / .14); } }
.list { width: 100%; max-width: 960px; border-radius: var(--r-card); padding: 22px clamp(16px, 3vw, 30px); }
.list__head { display: flex; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--line-2); }
.list__head b { color: var(--fg); font-weight: 500; }
.list__items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.li { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; padding: 14px 6px; margin: 0 -6px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; text-align: left; cursor: pointer; color: var(--fg); transition: background-color .2s; }
.li__box { grid-row: span 2; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .3); transition: background-color .2s, box-shadow .2s; }
.li__box .i { width: 13px; height: 13px; opacity: 0; transform: scale(.5); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), opacity .15s; color: var(--on-accent); }
.li__t { font: 500 15px/1.35 var(--sans); }
.li__s { font-size: 13.5px; color: var(--fg-3); }
.li[aria-pressed="true"] .li__box { background: var(--accent); box-shadow: none; }
.li[aria-pressed="true"] .li__box .i { opacity: 1; transform: none; }
.li[aria-pressed="true"] .li__t { color: var(--fg-2); }
.list__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 18px; }
.list__foot .small { flex: 1 1 260px; }

/* carousel of product cards */
#ways .center { gap: 28px; margin-bottom: clamp(44px, 6vw, 72px); }
#ways .h2--xl { max-width: 15ch; }
.rail { position: relative; }
.rail__track { display: grid; grid-auto-flow: column; grid-auto-columns: min(400px, 82vw); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px max(var(--gl), calc((100vw - 1280px) / 2 + 20px)) 8px; scroll-padding-inline: max(var(--gl), calc((100vw - 1280px) / 2 + 20px)); scrollbar-width: none; }
.rail__track::-webkit-scrollbar { display: none; }
.card { scroll-snap-align: start; display: grid; grid-template-rows: auto auto 1fr; align-content: start; gap: 10px; padding: 14px 14px 24px; border-radius: var(--r-card); background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.card h3 { font: 500 16px/1.3 var(--sans); margin: 8px 10px 0; }
.card > p { margin: 0 10px; font-size: 14.5px; line-height: 1.5; color: var(--fg-3); }
.card .note { margin: 6px 10px 0; }
.card__ui { position: relative; height: 270px; border-radius: 16px; overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, #15161a, #0b0b0c 70%); box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; padding: 20px; }
.rail__ctl { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
.ctl { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--fg); cursor: pointer; transition: background-color .2s, transform .18s var(--ease); }
.ctl:first-child .i { transform: scaleX(-1); }
.ctl:hover { background: #1f2024; }
.ctl:active { transform: scale(.94); }

/* product UIs inside the cards (real mini components, sample content) */
.ui-hours { display: grid; grid-template-columns: 120px 1fr; gap: 20px; align-items: center; width: 100%; }
.ring { position: relative; width: 120px; height: 120px; }
.ring svg { width: 120px; height: 120px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.ring__bg { stroke: rgb(255 255 255 / .08); }
.ring__fg { stroke: var(--accent-lit); stroke-dasharray: 327; stroke-dashoffset: 327; transition: stroke-dashoffset 1.6s var(--ease); }
.ring__c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring__c b { font: 300 24px/1 var(--serif); }
.ring__c small { font: 400 10.5px/1.3 var(--mono); text-transform: uppercase; color: var(--fg-3); margin-top: 4px; }
.week { display: grid; gap: 2px; font: 400 12px/1 var(--mono); }
.week li { display: flex; justify-content: space-between; padding: 6px 8px; border-radius: 6px; color: var(--fg-3); }
.week li.is-today { background: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--fg); }
.ui-papers { position: relative; width: 210px; height: 200px; }
.paper { position: absolute; left: 0; right: 0; height: 150px; padding: 16px; border-radius: 10px; background: #f4f4f2; color: #111; box-shadow: 0 20px 40px -20px rgb(0 0 0 / .8); display: grid; align-content: start; gap: 9px; transition: transform .6s var(--ease); }
.paper .mono { color: #333; font-size: 11px; }
.paper i { display: block; height: 7px; border-radius: 4px; background: #d9d9d6; }
.paper i.short { width: 55%; }
.paper:nth-child(1) { top: 40px; transform: rotate(-7deg) translateX(-18px); }
.paper:nth-child(2) { top: 26px; transform: rotate(4deg) translateX(14px); }
.paper:nth-child(3) { top: 10px; transform: rotate(-1deg); }
.card:hover .paper:nth-child(1) { transform: rotate(-11deg) translate(-34px, 6px); }
.card:hover .paper:nth-child(2) { transform: rotate(8deg) translate(30px, 4px); }
.ui-drop { display: grid; gap: 14px; justify-items: center; width: 100%; }
.drop__tray { display: grid; place-items: center; gap: 8px; width: 150px; height: 104px; border-radius: 16px; background: linear-gradient(180deg, #1c1d21, #121215); box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), inset 0 0 0 1px var(--line); color: var(--fg-2); }
.drop__tray .i { width: 30px; height: 30px; }
.notif { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 300px; padding: 12px 14px; border-radius: 16px; font-size: 12.5px; color: var(--fg-3); }
.notif b { display: block; color: var(--fg); font-weight: 500; font-size: 13px; }
.notif__ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--accent); color: var(--on-accent); flex: none; }
.notif__ic .i { width: 15px; height: 15px; }
.ui-portal { width: 100%; max-width: 300px; display: grid; gap: 8px; }
.portal__top { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; color: var(--fg-2); }
.portal__top .mono { color: var(--fg-2); }
.portal__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border-radius: 10px; background: rgb(255 255 255 / .05); box-shadow: inset 0 0 0 1px var(--line); font: 400 12.5px/1 var(--mono); color: var(--fg-2); }
.portal__row .i { width: 15px; height: 15px; color: var(--ok); }
.portal__bar { position: relative; width: 70px; height: 4px; border-radius: 4px; overflow: hidden; }
.portal__bar i { position: absolute; inset: 0; background: var(--accent-lit); border-radius: inherit; transform-origin: left; animation: upload 2.6s var(--ease-io) infinite; }
@keyframes upload { 0% { transform: scaleX(.05); } 70%, 100% { transform: scaleX(1); } }

/* refund */
.refund { overflow: hidden; }
.refund__dots { position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgb(255 255 255 / .12) 1px, transparent 1.2px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(60% 50% at 50% 30%, #000, transparent 75%); mask-image: radial-gradient(60% 50% at 50% 30%, #000, transparent 75%); }
.refund .center { gap: 22px; margin-bottom: clamp(56px, 7vw, 96px); }
.toasts { position: relative; width: min(440px, 100%); height: 150px; margin: 10px 0 6px; }
.toast { position: absolute; left: 0; right: 0; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; text-align: left; font-size: 13.5px; color: var(--fg-3); }
.toast b { display: block; color: var(--fg); font-weight: 500; font-size: 14.5px; }
.toast > span:nth-child(2) { flex: 1; }
.toast__ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--accent); color: var(--on-accent); flex: none; }
.toast__ic .i { width: 18px; height: 18px; }
.toast__t { color: var(--fg-3); }
.toast:nth-child(1) { top: 12px; transform: scale(.94); opacity: .55; }
.toast:nth-child(2) { top: 64px; }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line-2); }
.facts li { display: grid; gap: 12px; align-content: start; padding: 28px 24px 0 0; }
.facts li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.facts li p:last-child { color: var(--fg-3); font-size: 14.5px; line-height: 1.55; }
.facts__n { font: 300 clamp(1.9rem, 1.4rem + 1.4vw, 2.7rem)/1.05 var(--serif); }
.src { margin-top: 32px; font: 400 11.5px/1.6 var(--mono); text-transform: uppercase; letter-spacing: .25px; color: var(--fg-3); }

/* services bento */
.bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tile { position: relative; overflow: hidden; border-radius: var(--r-card); min-height: 460px; isolation: isolate; }
.tile--photo img { position: absolute; inset: -12% 0; width: 100%; height: 124%; object-fit: cover; z-index: -2; will-change: transform; }
.tile--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(0 0 0 / .05) 30%, rgb(0 0 0 / .55) 100%); }
.tile__copy { position: absolute; inset: auto 0 0; display: grid; justify-items: center; text-align: center; gap: 14px; padding: 32px 28px; }
.tile__copy p { max-width: 36ch; color: rgb(255 255 255 / .88); font-size: 15px; line-height: 1.5; }
.tile--photo .h3 { color: #fff; text-shadow: 0 2px 24px rgb(0 0 0 / .25); }
.tile--ui { background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; padding: 32px; }
.ui-return, .ui-sched { width: 100%; max-width: 380px; display: grid; gap: 4px; }
.ui-return > .mono, .ui-sched > .mono { margin-bottom: 10px; }
.ret__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; border-radius: 12px; background: rgb(255 255 255 / .03); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; color: var(--fg-2); }
.ret__row + .ret__row { margin-top: 6px; }
.ret__row.is-now { background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent); color: var(--fg); }
.ret__ok { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--on-accent); }
.ret__ok .i { width: 13px; height: 13px; }
.ret__spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgb(255 255 255 / .2); border-top-color: var(--accent-lit); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ret__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.bars { display: grid; gap: 14px; }
.bars div { display: grid; gap: 6px; font-size: 13.5px; color: var(--fg-2); }
.bars i { display: block; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--accent), var(--accent-lit)); width: calc(var(--w) * 100%); transform-origin: left; }
.ui-letter { display: grid; gap: 16px; justify-items: center; width: 100%; }
.letter { position: relative; width: min(300px, 100%); padding: 22px; border-radius: 14px; display: grid; gap: 10px; transform: rotate(-2deg); }
.letter i { display: block; height: 7px; border-radius: 4px; background: rgb(255 255 255 / .14); }
.letter i.short { width: 50%; }
.letter i.hl { background: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.letter__pin { position: absolute; right: -12px; top: 64px; padding: 6px 10px; border-radius: 6px; background: var(--fg); color: #050505; transform: rotate(4deg); }
.ui-cap { font-size: 13.5px; color: var(--fg-3); max-width: 30ch; text-align: center; }
.more { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 28px; }
.more .mono { margin-right: 6px; }
.pill { height: 40px; padding: 0 16px; border: 0; border-radius: var(--r-ctl); background: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--fg); font: 400 14px/1 var(--sans); cursor: pointer; transition: background-color .2s, transform .18s var(--ease); }
.pill:hover { background: #1f2024; }
.pill:active { transform: scale(.97); }

/* trust */
.trust { position: relative; min-height: 92svh; display: grid; place-items: center; overflow: hidden; isolation: isolate; padding: 120px var(--gr) 120px var(--gl); }
.trust__bg { position: absolute; inset: 0; z-index: -1; }
.trust__bg img { position: absolute; inset: -10% 0; width: 100%; height: 120%; object-fit: cover; will-change: transform; }
.trust__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 45% at 50% 50%, rgb(5 5 5 / .62), transparent 100%), linear-gradient(180deg, #050505 0%, rgb(5 5 5 / .2) 22%, rgb(5 5 5 / .3) 60%, #050505 100%); }
.trust__in { max-width: 900px; }
.trust .lede { color: rgb(255 255 255 / .9); text-shadow: 0 1px 14px rgb(0 0 0 / .4); }
.trust .h2--xl { text-shadow: 0 2px 30px rgb(0 0 0 / .3); }
.proof { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.proof__photo { aspect-ratio: 4 / 5; border-radius: var(--r-card); background: radial-gradient(100% 80% at 50% 0%, #17181c, #0b0b0c); box-shadow: inset 0 0 0 1px var(--line); display: grid; place-content: center; justify-items: center; gap: 18px; padding: 24px; text-align: center; }
.proof__mark { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 24px; background: var(--fg); color: #050505; font: 300 48px/1 var(--serif); }
.proof__list { display: grid; gap: 4px; }
.proof__list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.proof__list li.proof__note { display: block; border: 0; }
.proof__list .i { width: 22px; height: 22px; color: var(--accent-lit); margin-top: 2px; }
.proof__list b { font: 500 16px/1.3 var(--sans); }
.proof__list p { color: var(--fg-3); font-size: 14.5px; line-height: 1.55; margin-top: 4px; }
.proof__rate { display: grid; gap: 8px; padding: 18px 0; }
.proof__n { font: 300 clamp(4rem, 3rem + 3vw, 6rem)/.9 var(--serif); }
.proof__rate p { color: var(--fg-2); }
.note { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; border: 1.5px dashed rgb(255 255 255 / .28); background: rgb(255 255 255 / .03); font-size: 13.5px; line-height: 1.45; color: var(--fg-2); text-align: left; max-width: 46ch; }
.note__k { font: 500 10.5px/1 var(--mono); letter-spacing: .6px; text-transform: uppercase; color: var(--accent-lit); }

/* booking glow panel */
.panel--glow { background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.glow { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.glow span { position: absolute; width: 90%; height: 130%; border-radius: 50%; opacity: .7; will-change: transform; }
.glow span:first-child { left: -20%; top: -70%; background: radial-gradient(closest-side, var(--accent), transparent); animation: drift 14s var(--ease-io) infinite alternate; }
.glow span:last-child { right: -25%; top: -55%; background: radial-gradient(closest-side, color-mix(in oklab, var(--accent) 50%, #7a5ad9), transparent); opacity: .45; animation: drift 18s var(--ease-io) infinite alternate-reverse; }
@keyframes drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(12%, 10%, 0) scale(1.15); } }
.book { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.book__copy { display: grid; gap: 20px; justify-items: start; padding-top: 12px; }
.office { display: grid; gap: 14px; margin-top: 16px; padding-top: 22px; border-top: 1px solid var(--line-2); width: 100%; }
.office__line { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; color: var(--fg); text-decoration: none; font-size: 15.5px; font-variant-numeric: tabular-nums; }
.office__line .i { width: 18px; height: 18px; margin-top: 2px; color: var(--accent-lit); }
a.office__line:hover span { text-decoration: underline; text-underline-offset: 4px; }
.formcard { border-radius: var(--r-card); padding: clamp(20px, 3vw, 32px); }
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field > label, .field > legend { font: 400 11.5px/1 var(--mono); letter-spacing: .3px; text-transform: uppercase; color: var(--fg-2); padding: 0; }
.field input, .field select { width: 100%; height: 52px; padding: 0 14px; border: 0; border-radius: 10px; background: rgb(0 0 0 / .35); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); color: var(--fg); font-size: 16px; -webkit-appearance: none; appearance: none; transition: box-shadow .2s, background-color .2s; }
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%23ffffff' stroke-opacity='.7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 14px; padding-right: 40px; }
.field select option { background: #111; color: #fff; }
.field input:focus, .field select:focus { outline: none; background-color: rgb(0 0 0 / .5); box-shadow: inset 0 0 0 1.5px #fff; }
.field.is-bad input { box-shadow: inset 0 0 0 1.5px #ff8a7a; }
.field__err { display: none; font-size: 13.5px; color: #ffb3a8; }
.field.is-bad .field__err { display: block; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 10px; background: rgb(0 0 0 / .35); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); }
.seg label { position: relative; }
.seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg span { display: grid; place-items: center; height: 42px; border-radius: 7px; font-size: 14px; color: var(--fg-2); transition: background-color .25s, color .25s; }
.seg input:checked + span { background: var(--fg); color: #050505; }
.seg input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
.form__note { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; font-size: 13.5px; color: var(--fg-3); }
.form__note .i { width: 16px; height: 16px; margin-top: 2px; color: var(--accent-lit); }
.done { display: grid; gap: 14px; justify-items: start; }
.done:focus { outline: none; }
.done__ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--accent); color: var(--on-accent); }
.done__ic .i { width: 26px; height: 26px; }
.done__what { font: 300 28px/1.1 var(--serif); }
.done p { color: var(--fg-2); max-width: 44ch; }

/* closing */
.close { position: relative; min-height: 86svh; display: grid; place-items: center; overflow: hidden; isolation: isolate; padding: 120px var(--gr) 120px var(--gl); }
.close__bg { position: absolute; inset: 0; z-index: -1; }
.close__bg img { position: absolute; inset: -10% 0; width: 100%; height: 120%; object-fit: cover; will-change: transform; }
.close__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #050505 0%, rgb(5 5 5 / .1) 30%, rgb(5 5 5 / .3) 80%, #050505 100%); }
.close .center { gap: 30px; }

/* footer + phone bar */
.foot { padding-block: 56px 72px; border-top: 1px solid var(--line); }
.foot__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px; }
.foot__legal { display: grid; gap: 10px; font: 400 11.5px/1.65 var(--mono); text-transform: uppercase; letter-spacing: .2px; color: var(--fg-3); }
.foot__ns { margin-top: 6px; }   /* the strip's link again, for whoever read the whole sample */
.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-transform: none; text-decoration: none; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); }
.foot__ns a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot__ns a:focus-visible { outline: 2px solid #c9f55b; outline-offset: 2px; }
.mbar { display: none; }

/* ---------- motion helpers (JS adds these only when motion is allowed) ---------- */
.js-motion [data-rise] { opacity: 0; transform: translateY(28px); }
.js-motion [data-card], .js-motion [data-tile] { opacity: 0; }
.no-motion .flow__steps::after { transition: none; }

/* ---------- tablet / phone ---------- */
@media (max-width: 500px) { :root { --strip-h: 50px; } }   /* the strip wraps to two lines; site.js measures the real height */
@media (max-width: 1100px) { .nav__links { display: none; } .nav__cta { margin-left: auto; } }
@media (max-width: 960px) {
  .book, .proof { grid-template-columns: minmax(0, 1fr); }
  .proof__photo { max-width: 320px; aspect-ratio: 1; }
  .facts { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .facts li:nth-child(3) { padding-left: 0; border-left: 0; }
  .foot__in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento .tile:nth-child(3) { order: 4; }
  .bento .tile:nth-child(4) { order: 3; }
  .tile { min-height: 380px; }
  .list__items { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  .hero .h1 { font-size: 2.55rem; }
  .nav { padding-top: 10px; }
  .nav__in { height: 54px; padding: 0 6px 0 8px; }
  .brand__name { font-size: 14px; white-space: normal; max-width: 15ch; }
  .nav__tel span, .nav__cta .btn--white { display: none; }
  .nav__tel { width: 40px; padding: 0; }
  .hero { padding-top: 112px; min-height: 0; }
  .hero__btns { width: 100%; }
  .hero__btns .btn { flex: 1 1 100%; }
  .phone { width: min(320px, 86vw); margin-bottom: -120px; }
  .phone__screen { height: 500px; }
  .hero + .sec { padding-top: 170px; }
  .panel { padding-inline: 16px; border-radius: 22px; }
  .tg { height: 40px; font-size: 13.5px; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts li, .facts li + li { padding: 22px 0 0; border-left: 0; }
  .row2 { grid-template-columns: minmax(0, 1fr); }
  .ui-hours { grid-template-columns: 96px 1fr; gap: 14px; }
  .ring, .ring svg { width: 96px; height: 96px; }
  .mbar { position: fixed; z-index: 35; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; padding: 10px var(--gr) calc(12px + env(safe-area-inset-bottom, 0px)) var(--gl); background: rgb(5 5 5 / .78); border-top: 1px solid var(--line); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); transform: translateY(110%); transition: transform .35s var(--ease); }
  .mbar.is-on { transform: none; }
  .mbar .btn { --h: 50px; width: 100%; }
}

/* ---------- phones and touch: every tap target at least 44px (hit areas grow, the look stays) ---------- */
@media (max-width: 760px), (pointer: coarse) {
  .btn--sm { --h: 44px; }
  .nav__tel { width: 44px; }
  .tg { height: 44px; }
  .ctl { width: 44px; height: 44px; }
  .pill { height: 44px; }
  .seg span { height: 44px; }
  .brand { min-height: 44px; }
  a.chip { position: relative; }
  a.chip::after { content: ""; position: absolute; inset: -6px 0; }
  .replay { position: relative; }
  .replay::after { content: ""; position: absolute; inset: -7px -8px; }
  a.office__line { padding-block: 11px; margin-block: -11px; }
}

/* the smallest phones (320): long button labels kept their full text inside the button */
@media (max-width: 360px) {
  .btn { padding: 0 12px; gap: 8px; letter-spacing: .2px; }
  .mbar { grid-template-columns: 1fr 2fr; }
}

/* ---------- reduced motion: final states, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .dot::after, .glow span { animation: none !important; }
}