/* Mistri website. Clean white, one coral accent, characterful headlines, motion that can always be paused.
   Two themes: the default (white, Bricolage Grotesque + Geist + Anek Bangla) and data-theme="paper" (the first
   design: warm paper, Plus Jakarta Sans + Hind). THEME=paper in web/.env switches back. */

/* Default theme: headlines in Bricolage Grotesque (variable: optical size 24-96, weight 500-800), text in Geist,
   Bangla in Anek Bangla. All trimmed to the axes the site uses. */
@font-face { font-family: 'Bricolage'; src: url(/assets/fonts/bricolage.woff2) format('woff2'); font-weight: 500 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Geist'; src: url(/assets/fonts/geist.woff2) format('woff2'); font-weight: 400 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Anek Bangla'; src: url(/assets/fonts/anek-bangla.woff2) format('woff2'); font-weight: 400 800; font-display: swap; unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1; }
/* The taka sign alone (1 KB), so prices on English pages never pull in the whole Bangla font. */
@font-face { font-family: 'Taka Anek'; src: url(/assets/fonts/taka-anek.woff2) format('woff2'); font-weight: 400 800; font-display: swap; unicode-range: U+09F3; }

/* Just the letters of "বাংলা" and "ভাষা" (2 KB): English pages link to Bangla without loading the Bangla font. */
@font-face { font-family: 'Anek UI'; src: url(/assets/fonts/anek-ui.woff2) format('woff2'); font-weight: 400 800; font-display: swap; unicode-range: U+0982, U+09AC-09AD, U+09B2, U+09B7, U+09BE; }
:root:not([data-theme='paper']) a[hreflang='bn'] { font-family: 'Anek UI', var(--font); }

/* Paper theme fonts (only downloaded when that theme is on). */
@font-face { font-family: 'Jakarta'; src: url(/assets/fonts/jakarta-500.woff2) format('woff2'); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DC, U+2000-206F, U+2122, U+2190-2199, U+2212; }
@font-face { font-family: 'Jakarta'; src: url(/assets/fonts/jakarta-600.woff2) format('woff2'); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DC, U+2000-206F, U+2122, U+2190-2199, U+2212; }
@font-face { font-family: 'Jakarta'; src: url(/assets/fonts/jakarta-700.woff2) format('woff2'); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DC, U+2000-206F, U+2122, U+2190-2199, U+2212; }
@font-face { font-family: 'Jakarta'; src: url(/assets/fonts/jakarta-800.woff2) format('woff2'); font-weight: 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DC, U+2000-206F, U+2122, U+2190-2199, U+2212; }
@font-face { font-family: 'Taka'; src: url(/assets/fonts/taka.woff2) format('woff2'); font-weight: 500 800; font-display: swap; unicode-range: U+09F3; }
@font-face { font-family: 'Hind'; src: url(/assets/fonts/hind-500.woff2) format('woff2'); font-weight: 500; font-display: swap; unicode-range: U+0964-0965, U+0980-09FF, U+200C-200D, U+25CC; }
@font-face { font-family: 'Hind'; src: url(/assets/fonts/hind-600.woff2) format('woff2'); font-weight: 600; font-display: swap; unicode-range: U+0964-0965, U+0980-09FF, U+200C-200D, U+25CC; }
@font-face { font-family: 'Hind'; src: url(/assets/fonts/hind-700.woff2) format('woff2'); font-weight: 700 800; font-display: swap; unicode-range: U+0964-0965, U+0980-09FF, U+200C-200D, U+25CC; }

:root {
  --coral: #EB4B3A;
  --coral-deep: #C9362A;
  --coral-soft: #FEEFEC;
  --coral-ring: #F8C7C0;
  --coral-light: #FF8C7D;
  --ok: #12A06A;
  --ink: #0F1012;
  --ink-2: #3D3F45;
  --sub: #6A6D75;
  --faint: #9EA1A9;
  --line: #E8E9EC;
  --line-2: #D6D8DD;
  --paper: #FFFFFF;
  --paper-2: #F4F5F7;
  --white: #FFFFFF;
  --dark: #0C0D0F;
  --dark-2: #2A2C31;
  --on-dark: #F3F4F6;
  --shade: 16 18 24;
  --ink-rgb: 15 16 18;
  --glass: rgb(255 255 255 / .84);
  --map-street: #EBECEF;
  --map-road: #F4F5F7;
  --map-water: #E4EEF8;
  --map-ground: #F1F2F2;
  --map-lake: #D4E4F3;
  --map-main: #FBE6AE;
  --star: #F5A524;
  --font: 'Geist', 'Taka Anek', 'Anek Bangla', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Bricolage', 'Taka Anek', 'Anek Bangla', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --body-weight: 420;
  --w-semi: 520;
  --w-bold: 600;
  --w-heavy: 680;
  --h-weight: 720;
  --h1-track: -0.025em;
  --h-track: -0.02em;
  --ease: cubic-bezier(.22, .9, .24, 1);
  --spring: cubic-bezier(.3, 1.45, .45, 1);
  --shadow: 0 1px 2px rgb(var(--shade) / .06), 0 24px 60px -24px rgb(var(--shade) / .28);
  --gut: clamp(16px, 4vw, 40px);
  color-scheme: light;
}
.lang-bn {
  --font: 'Anek Bangla', 'Geist', ui-sans-serif, system-ui, sans-serif;
  --display: 'Anek Bangla', 'Bricolage', ui-sans-serif, system-ui, sans-serif;
  --body-weight: 430;
  --w-semi: 520;
  --w-bold: 600;
  --w-heavy: 660;
  --h-weight: 680;
}

/* The first design: warm paper and Plus Jakarta Sans. */
:root[data-theme='paper'] {
  --coral-soft: #FDEEEB;
  --coral-ring: #F6C3BC;
  --ink: #1B1A18;
  --ink-2: #45423D;
  --sub: #6E6A64;
  --faint: #9A958D;
  --line: #E8E2D9;
  --line-2: #D5CEC3;
  --paper: #FAF7F2;
  --paper-2: #F3EEE6;
  --dark: #121110;
  --dark-2: #2B2926;
  --on-dark: #F4EEE6;
  --shade: 60 40 20;
  --ink-rgb: 27 26 24;
  --glass: rgb(250 247 242 / .84);
  --map-street: #E2DACE;
  --map-road: #F2DEB0;
  --map-water: #DCE8F0;
  --map-ground: #EFE9DF;
  --map-lake: #D5E5EE;
  --map-main: #F6E1B0;
  --font: 'Jakarta', 'Taka', 'Hind', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: var(--font);
  --body-weight: 500;
  --w-semi: 600;
  --w-bold: 700;
  --w-heavy: 800;
  --h-weight: 800;
  --h1-track: -0.05em;
  --h-track: -0.04em;
}
:root[data-theme='paper'] .lang-bn { --font: 'Hind', 'Jakarta', 'Taka', ui-sans-serif, system-ui, sans-serif; --display: var(--font); --body-weight: 500; --w-semi: 600; --w-bold: 700; --w-heavy: 800; --h-weight: 700; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-weight: var(--body-weight);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-size-adjust: from-font;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
img { height: auto; }
a { color: inherit; }
b, strong { font-weight: var(--w-bold); }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 8px; }
.wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--gut); }
.narrow { max-width: 860px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px; font-weight: var(--w-bold); }
.skip:focus { top: 12px; }
.i { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ── type ── */
h1, h2, h3, .display { font-family: var(--display); font-optical-sizing: auto; }
h1 { font-weight: var(--h-weight); letter-spacing: var(--h1-track); line-height: .96; margin: 0; }
h2 { font-weight: var(--h-weight); letter-spacing: var(--h-track); line-height: 1.04; margin: 0; font-size: clamp(2rem, 1.15rem + 3.2vw, 3.75rem); }
h3 { font-weight: var(--h-weight); letter-spacing: -0.02em; line-height: 1.15; }
.lang-bn h1, .lang-bn h2, .lang-bn h3 { letter-spacing: 0; line-height: 1.28; font-weight: var(--h-weight); }
.kicker { margin: 0; font-size: .82rem; font-weight: var(--w-heavy); letter-spacing: .1em; text-transform: uppercase; color: var(--coral); }
.lang-bn .kicker { letter-spacing: 0; text-transform: none; font-size: .95rem; }
.lede { font-size: clamp(1.06rem, .98rem + .45vw, 1.32rem); color: var(--ink-2); margin: 22px 0 0; max-width: 46ch; }

/* ── buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 999px; font: inherit; font-weight: var(--w-heavy); text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s, box-shadow .2s; white-space: nowrap; }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: .94rem; }
.btn-lg { min-height: 58px; padding: 0 28px; font-size: 1.06rem; }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #000; }
.btn-coral { background: var(--coral); color: #fff; }
.btn-coral:hover { background: var(--coral-deep); }
.btn-paper { background: var(--paper); color: var(--ink); }
.btn-paper:hover { background: #fff; }

/* ── header ── */
.top { position: sticky; top: 0; z-index: 50; background: var(--glass); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 1px 0 var(--line); }
@supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
  .page-home .top { background: transparent; box-shadow: none; backdrop-filter: none; animation: top-solid linear both; animation-timeline: scroll(); animation-range: 0 140px; }
  @keyframes top-solid { to { background: var(--glass); box-shadow: 0 1px 0 var(--line); backdrop-filter: saturate(1.4) blur(14px); } }
}
.top-in { display: flex; align-items: center; gap: 20px; height: 76px; }
.brand { text-decoration: none; display: inline-flex; }
.wordmark { font-family: 'Jakarta', sans-serif; font-weight: 800; letter-spacing: -0.055em; color: var(--coral); font-size: 1.95rem; line-height: 1; }
.brand-lg .wordmark { font-size: clamp(3.5rem, 2rem + 6vw, 7.5rem); }
.nav { margin-inline: auto; }
.nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav a { display: block; padding: 10px 14px; border-radius: 999px; font-weight: var(--w-bold); font-size: .95rem; text-decoration: none; }
.nav a:hover, .nav a[aria-current] { background: rgb(var(--ink-rgb) / .06); }
.top-act { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.lang-link { font-weight: var(--w-bold); padding: 10px 12px; text-decoration: none; border-radius: 999px; }
.lang-link:hover { background: rgb(var(--ink-rgb) / .06); }
.menu-btn { display: none; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; place-items: center; font-size: 1.1rem; }
.m-nav { inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0; padding: 88px var(--gut) 32px; background: var(--paper); color: var(--ink); }
.m-nav:popover-open { display: flex; flex-direction: column; gap: 28px; }
.m-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.m-nav ul a { display: block; padding: 12px 0; font-family: var(--display); font-size: 1.75rem; font-weight: var(--h-weight); letter-spacing: -0.03em; text-decoration: none; }
.m-close { position: absolute; top: 14px; right: var(--gut); width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; cursor: pointer; font-size: 1.1rem; color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .m-nav { transition: opacity .25s, translate .35s var(--ease), display .35s allow-discrete, overlay .35s allow-discrete; }
  .m-nav:popover-open { @starting-style { opacity: 0; translate: 0 16px; } }
}

/* ── hero ── */
.hero { position: relative; isolation: isolate; overflow: clip; margin-top: -76px; padding: calc(76px + clamp(56px, 9vw, 120px)) 0 clamp(96px, 10vw, 150px); min-height: min(100svh, 1000px); display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; }
.hero-map { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -3; mask-image: radial-gradient(ellipse 62% 58% at 50% 46%, transparent 0 34%, #000 78%); -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 46%, transparent 0 34%, #000 78%); }
.hero-map .street { fill: none; stroke: var(--map-street); stroke-width: 1.3; }
.hero-map .road { fill: none; stroke: var(--map-road); stroke-width: 7; stroke-linecap: round; }
.hero-map .river { fill: none; stroke: var(--map-water); stroke-width: 26; stroke-linecap: round; }
.hero-map .lake { fill: var(--map-water); }
@media (prefers-reduced-motion: no-preference) {
  .hero-map .street, .hero-map .road { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2.6s var(--ease) forwards; }
  .hero-map .street:nth-child(3n) { animation-delay: .25s; }
  .hero-map .street:nth-child(3n + 1) { animation-delay: .5s; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
.hero-glow { position: absolute; z-index: -2; left: 50%; top: 44%; width: min(980px, 120vw); aspect-ratio: 1.6; translate: -50% -50%; background: radial-gradient(closest-side, rgb(235 75 58 / .13), rgb(235 75 58 / .05) 55%, transparent); }
.hero-in { position: relative; text-align: center; max-width: 1100px; }
.hero h1 { font-size: clamp(2.7rem, 1rem + 5.2vw, 5.6rem); margin-top: 26px; }
.lang-bn .hero h1 { font-size: clamp(2.3rem, 1rem + 4.4vw, 4.9rem); line-height: 1.22; }
.hero h1 span, .hero h1 em { display: block; }
.hero h1 em { font-style: normal; color: var(--coral); }
.hero .lede { margin-inline: auto; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 8px 16px 8px 14px; border-radius: 999px; background: rgb(255 255 255 / .75); box-shadow: 0 0 0 1px var(--line); font-weight: var(--w-bold); font-size: .9rem; backdrop-filter: blur(8px); }
.pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgb(18 160 106 / .45); }
@media (prefers-reduced-motion: no-preference) { .pulse { animation: ping 2.2s ease-out infinite; } }
@keyframes ping { 70%, 100% { box-shadow: 0 0 0 10px rgb(18 160 106 / 0); } }
.hero-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; list-style: none; margin: 18px 0 0; padding: 0; font-size: .92rem; font-weight: var(--w-bold); color: var(--ink-2); }
.hero-trust li { display: inline-flex; align-items: center; gap: 6px; }
.hero-trust .i { color: var(--ok); stroke-width: 3; width: 1em; height: 1em; }
.popular { margin-top: 30px; }
.popular p { margin: 0 0 12px; font-size: .8rem; font-weight: var(--w-heavy); letter-spacing: .1em; text-transform: uppercase; color: var(--sub); }
.lang-bn .popular p { letter-spacing: 0; text-transform: none; font-size: .95rem; }
.hero-alt { margin: 26px 0 0; color: var(--sub); font-size: .96rem; }
.hero-alt a { font-weight: var(--w-heavy); color: var(--ink); text-underline-offset: 4px; }

/* floating tiles and bid cards around the hero */
.floaters { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.fl { position: absolute; left: var(--x); top: var(--y); translate: calc(var(--mx, 0) * var(--d) * 22px) calc(var(--my, 0) * var(--d) * 16px); rotate: var(--r); }
.fl-tile { width: clamp(88px, 8.6vw, 136px); aspect-ratio: 1; display: grid; place-items: center; padding: 14px; border-radius: 30px; background: #fff; box-shadow: 0 2px 6px rgb(var(--shade) / .06), 0 26px 50px -22px rgb(var(--shade) / .4); }
.fl-tile img { width: 100%; height: auto; }
.fl-card { display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 22px; background: #fff; box-shadow: 0 2px 6px rgb(var(--shade) / .06), 0 26px 50px -22px rgb(var(--shade) / .42); font-size: .9rem; line-height: 1.3; white-space: nowrap; }
.fl-card b { display: block; font-weight: var(--w-heavy); }
.fl-card small { display: flex; align-items: center; gap: 4px; color: var(--sub); font-weight: var(--w-semi); }
.fl-card em { font-style: normal; font-weight: var(--w-heavy); font-size: 1.15rem; margin-left: 10px; }
.fl-card .star { width: 13px; height: 13px; fill: var(--star); stroke: none; }
.fl-card .av { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--c); display: grid; place-items: center; font-weight: var(--w-heavy); font-size: .8rem; }
.fl-card .ok { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; }
.fl-card .ok .i { stroke-width: 3; }
@media (prefers-reduced-motion: no-preference) {
  /* Entrance on opacity/scale, drift on transform, parallax on translate: three properties, no conflicts. */
  .fl { animation: fl-in 1s var(--spring) both, bob 7s ease-in-out infinite alternate; animation-delay: calc(.35s + var(--i) * .08s), calc(var(--i) * -1.1s); }
  .hero.is-paused .fl, .hero.is-paused .pulse { animation-play-state: paused; }
}
@keyframes bob { from { transform: translateY(-7px) rotate(-1.2deg); } to { transform: translateY(9px) rotate(1.2deg); } }
@keyframes fl-in { from { opacity: 0; scale: .6; } }

.app-card { position: absolute; right: var(--gut); bottom: 32px; display: flex; align-items: center; gap: 14px; padding: 12px 18px 12px 12px; border-radius: 26px; background: #fff; box-shadow: var(--shadow); }
.app-card p { margin: 0; display: grid; font-size: .85rem; line-height: 1.35; max-width: 11ch; }
.app-card b { font-size: 1rem; }
.app-card span { color: var(--sub); }
.qr-code { line-height: 0; }
.app-card .qr-code svg { width: 88px; height: 88px; }
.motion { position: absolute; left: var(--gut); bottom: 32px; width: 48px; height: 48px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 0 0 1px var(--line); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.motion .i-play, .hero.is-paused .motion .i-pause { display: none; }
.hero.is-paused .motion .i-play { display: block; }
@media (prefers-reduced-motion: reduce) { .motion { display: none; } }

/* ── the "What needs fixing?" box ── */
.ask { display: block; margin: 40px auto 0; max-width: 740px; }
.ask-form { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 30px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -28px rgb(var(--shade) / .45); text-align: left; transition: box-shadow .2s; }
.ask-form:focus-within { box-shadow: 0 0 0 3px var(--coral-ring), 0 30px 60px -28px rgb(var(--shade) / .45); }
.ask-field { flex: 1; min-width: 0; }
.ask-label { display: block; font-size: .8rem; font-weight: var(--w-heavy); letter-spacing: .01em; color: var(--ink); }
.ask-input, .ask-select { display: block; width: 100%; border: 0; padding: 0 0 2px; background: transparent; color: var(--ink); font: inherit; font-size: max(1rem, 1.06rem); font-weight: var(--w-semi); }
.ask-input:focus, .ask-select:focus { outline: none; }
.ask-input::placeholder { color: var(--faint); }
.js .ask-select { display: none; }
.ask-go { flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 62px; padding: 0 28px; border: 0; border-radius: 999px; background: var(--coral); color: #fff; font: inherit; font-weight: var(--w-heavy); font-size: 1.06rem; cursor: pointer; transition: background-color .2s; }
.ask-go:hover { background: var(--coral-deep); }
.ask-go .i { stroke-width: 2.6; }
.ask-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 10px); margin: 0; padding: 8px; list-style: none; max-height: min(380px, 52vh); overflow: auto; border-radius: 26px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 40px 80px -30px rgb(var(--shade) / .5); }
.ask-list li { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; border-radius: 18px; cursor: pointer; }
.ask-list li[aria-selected='true'], .ask-list li:hover { background: var(--paper-2); }
.ask-list img { width: 44px; height: 44px; object-fit: contain; }
.ask-list .o-l { display: block; font-weight: var(--w-bold); line-height: 1.3; }
.ask-list .o-s { display: block; font-size: .82rem; color: var(--sub); }
.ask-list .o-b { font-weight: var(--w-heavy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ask-list .o-none { display: block; grid-template-columns: none; color: var(--sub); cursor: default; }
.ask-compact { margin-top: 28px; }

/* ── chips ── */
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; list-style: none; margin: 0; padding: 0; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 18px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line); font-weight: var(--w-bold); font-size: .95rem; text-decoration: none; transition: box-shadow .2s, background-color .2s; }
.chip:hover { box-shadow: 0 0 0 1.5px var(--ink); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }

/* ── sections ── */
section { scroll-margin-top: 90px; }
.story, .services, .prices, .trust, .ways, .areas { padding-block: clamp(80px, 10vw, 140px); }
.sec-head { text-align: center; max-width: 860px; margin: 0 auto clamp(40px, 5vw, 68px); }
.sec-head h2 { margin-top: 14px; }
.sec-head p { color: var(--ink-2); font-size: 1.1rem; max-width: 58ch; margin: 18px auto 0; }
.sec-left { text-align: left; margin-left: 0; }
.sec-left p { margin-left: 0; }
.more { text-align: center; margin: 28px 0 0; }
.p-two .more { text-align: left; }
.more a { display: inline-flex; align-items: center; gap: 8px; font-weight: var(--w-heavy); text-decoration: none; }
.more a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* how it works: a phone that follows the story */
.story-grid { display: grid; grid-template-columns: 1fr minmax(280px, 400px); gap: clamp(32px, 6vw, 96px); align-items: start; timeline-scope: --st1, --st2, --st3, --st4; }
.story-steps { list-style: none; margin: 0; padding: 0; }
.story-step { min-height: 74vh; display: flex; flex-direction: column; justify-content: center; padding: 24px 0; }
.story-step:nth-child(1) { view-timeline: --st1 block; }
.story-step:nth-child(2) { view-timeline: --st2 block; }
.story-step:nth-child(3) { view-timeline: --st3 block; }
.story-step:nth-child(4) { view-timeline: --st4 block; }
.num { font-size: .95rem; font-weight: var(--w-heavy); color: var(--coral); font-variant-numeric: tabular-nums; }
.story-step h3 { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3rem); letter-spacing: var(--h-track); line-height: 1.04; margin: 14px 0 14px; }
.lang-bn .story-step h3 { letter-spacing: 0; line-height: 1.3; }
.story-step p { font-size: 1.15rem; color: var(--ink-2); max-width: 38ch; margin: 0; }
.story-inline { display: none; }
.story-phone { position: sticky; top: max(96px, calc(50vh - 340px)); display: grid; place-items: center; }
.phone { position: relative; width: min(100%, 330px); aspect-ratio: 540 / 1198; padding: 11px; border-radius: 52px; background: var(--dark); box-shadow: 0 50px 100px -40px rgb(var(--shade) / .55), inset 0 0 0 2px var(--dark-2); }
.shot { position: absolute; inset: 11px; width: calc(100% - 22px); height: calc(100% - 22px); border-radius: 42px; object-fit: cover; opacity: 0; transition: opacity .45s; }
.story-grid:not([data-active]) .shot[data-n='1'], .story-grid[data-active='1'] .shot[data-n='1'], .story-grid[data-active='2'] .shot[data-n='2'], .story-grid[data-active='3'] .shot[data-n='3'], .story-grid[data-active='4'] .shot[data-n='4'] { opacity: 1; }
@supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
  .story-grid .shot { opacity: 0; transition: none; animation: shot linear both; animation-range: cover 18% cover 82%; }
  .story-grid .shot[data-n='1'] { animation-timeline: --st1; animation-range: cover 0% cover 82%; }
  .story-grid .shot[data-n='2'] { animation-timeline: --st2; }
  .story-grid .shot[data-n='3'] { animation-timeline: --st3; }
  .story-grid .shot[data-n='4'] { animation-timeline: --st4; animation-range: cover 18% cover 100%; }
  @keyframes shot { 0% { opacity: 0; } 22%, 78% { opacity: 1; } 100% { opacity: 0; } }
  .story-grid .shot[data-n='1'] { animation-name: shot-first; }
  .story-grid .shot[data-n='4'] { animation-name: shot-last; }
  @keyframes shot-first { 0%, 78% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes shot-last { 0% { opacity: 0; } 22%, 100% { opacity: 1; } }
}

/* services */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.svc-card { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 330px; padding: 28px; border-radius: 34px; background: var(--tint); text-decoration: none; overflow: hidden; transition: box-shadow .35s var(--ease), translate .35s var(--ease); }
.svc-card:hover { box-shadow: 0 30px 60px -30px rgb(var(--shade) / .4); }
@media (prefers-reduced-motion: no-preference) { .svc-card:hover { translate: 0 -4px; } .svc-card img { transition: scale .5s var(--ease), rotate .5s var(--ease); } .svc-card:hover img { scale: 1.06; rotate: -3deg; } }
.svc-card h3 { font-size: 1.6rem; margin: 0; }
.svc-from { margin: 6px 0 0; color: var(--ink-2); font-size: .95rem; }
.svc-from b { color: var(--ink); font-weight: var(--w-heavy); font-size: 1.05rem; }
.svc-card ul { list-style: none; margin: 16px 0 0; padding: 0; max-width: 58%; color: var(--ink-2); font-size: .92rem; line-height: 1.4; }
.svc-card li + li { margin-top: 6px; }
.svc-card img { position: absolute; z-index: -1; right: -4%; bottom: -3%; width: 50%; }
.svc-more { margin-top: auto; padding-top: 20px; display: inline-flex; align-items: center; gap: 6px; font-weight: var(--w-heavy); font-size: .95rem; }
.badge { position: absolute; top: 22px; right: 22px; padding: 6px 12px; border-radius: 999px; background: var(--ink); color: #fff; font-size: .75rem; font-weight: var(--w-heavy); }
.svc-grid-sm .svc-card { min-height: 250px; }

/* prices */
.prices { background: var(--paper-2); }
.prices-in { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.sec-side { text-align: left; margin: 0; position: sticky; top: 120px; min-width: 0; }
.sec-side h2 { overflow-wrap: break-word; }
.sec-side p { margin-left: 0; }
.pt-wrap { background: #fff; border-radius: 30px; padding: 6px 10px; box-shadow: 0 0 0 1px var(--line); overflow-x: auto; }
.pt { width: 100%; border-collapse: collapse; }
.pt caption { text-align: left; padding: 14px; font-weight: var(--w-heavy); }
.pt thead th, .pt thead td { text-align: left; font-size: .78rem; font-weight: var(--w-heavy); letter-spacing: .06em; text-transform: uppercase; color: var(--sub); padding: 16px 14px 10px; }
.lang-bn .pt thead th { letter-spacing: 0; text-transform: none; font-size: .9rem; }
.pt tbody tr { border-top: 1px solid var(--line); }
.pt tbody th { display: flex; align-items: center; gap: 14px; padding: 12px 14px; text-align: left; font-weight: 500; }
.pt tbody th img { width: 40px; height: 40px; object-fit: contain; flex: none; }
.pt tbody th b { display: block; font-weight: var(--w-bold); line-height: 1.3; }
.pt tbody th small { display: block; color: var(--sub); font-size: .82rem; }
.pt td { padding: 12px 14px; font-weight: var(--w-heavy); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pt-go { width: 56px; }
.pt-go a { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--paper-2); text-decoration: none; transition: background-color .2s, color .2s; }
.pt-go a:hover { background: var(--coral); color: #fff; }
.pt-note { font-size: .9rem; color: var(--sub); margin: 16px 4px 0; }

/* trust */
.trust { background: var(--ink); color: var(--on-dark); }
.trust .kicker { color: var(--coral-light); }
.trust h2 { color: #fff; }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; list-style: none; margin: 0; padding: 0; }
.trust-grid li { padding: 30px 28px; border-radius: 30px; background: rgb(255 255 255 / .05); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); }
.trust-i { width: 44px; height: 44px; color: var(--coral-light); stroke-width: 1.8; }
.trust-grid h3 { font-size: 1.3rem; margin: 20px 0 8px; color: #fff; }
.trust-grid p { margin: 0; font-size: .95rem; color: color-mix(in srgb, var(--on-dark) 72%, transparent); }
.trust-foot { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 40px 0 0; color: color-mix(in srgb, var(--on-dark) 72%, transparent); font-size: .95rem; text-align: center; }
.trust-slim { padding-block: clamp(48px, 6vw, 72px); }

/* two ways in */
.ways-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; }
.way { position: relative; display: grid; gap: 24px; padding: clamp(28px, 4vw, 48px); border-radius: 38px; background: #fff; box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.way-web { grid-template-columns: .9fr 1.1fr; align-items: center; background: var(--coral-soft); box-shadow: none; }
.way-i { width: 38px; height: 38px; color: var(--coral); stroke-width: 1.8; }
.way h3 { font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.3rem); margin: 18px 0 10px; letter-spacing: var(--h-track); }
.lang-bn .way h3 { letter-spacing: 0; }
.way p { color: var(--ink-2); margin: 0 0 24px; }
.browser { align-self: end; margin-block: 0 calc(-1 * clamp(28px, 4vw, 48px)); border-radius: 18px 18px 0 0; background: #fff; box-shadow: 0 30px 70px -20px rgb(var(--shade) / .35); overflow: hidden; }
.browser-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--paper-2); font-size: .75rem; color: var(--sub); }
.browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.browser-bar span { margin-left: 8px; padding: 3px 12px; border-radius: 999px; background: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browser-body { height: 380px; overflow: hidden; display: grid; justify-items: center; padding-top: 16px; background: linear-gradient(var(--paper), var(--paper-2)); }
.browser-body img { width: 66%; border-radius: 16px 16px 0 0; box-shadow: 0 10px 30px -10px rgb(var(--shade) / .3); }
.way-app { grid-template-columns: 1fr auto; align-items: center; }
.qr { margin: 0; text-align: center; }
.qr .qr-code { padding: 14px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.qr .qr-code svg { width: 132px; height: 132px; }
.qr figcaption { margin-top: 10px; font-size: .82rem; color: var(--sub); font-weight: var(--w-bold); }
.ways-meta, .ways-play { font-size: .88rem; color: var(--sub); margin: 12px 0 0 !important; }
.ways-soon { padding: 14px 18px; border-radius: 18px; background: var(--paper-2); }
.ways-soon b { display: block; color: var(--ink); }

/* for mistris band */
.band { background: var(--coral); color: #fff; overflow: hidden; }
.band-in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: end; padding-top: clamp(64px, 8vw, 110px); }
.band-text { padding-bottom: clamp(64px, 8vw, 110px); }
.band .kicker { color: #FFE0DA; }
.band h2 { color: #fff; margin-top: 14px; }
.band p { color: rgb(255 255 255 / .92); font-size: 1.15rem; max-width: 46ch; margin: 20px 0 30px; }
.band-img { display: block; width: 100%; max-width: 500px; justify-self: end; filter: drop-shadow(0 30px 40px rgb(80 20 10 / .35)); }

.areas .chips { max-width: 920px; margin-inline: auto; }
.areas { padding-bottom: clamp(24px, 4vw, 48px); }

/* faq */
.faq { padding-block: clamp(72px, 8vw, 120px) clamp(24px, 3vw, 40px); }
.faq h2 { text-align: center; margin-bottom: clamp(28px, 4vw, 48px); font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem); }
.faq-list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; align-items: baseline; gap: 14px; padding: 22px 4px; font-weight: var(--w-heavy); font-size: 1.12rem; line-height: 1.4; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: ''; flex: none; width: 14px; height: 14px; translate: 0 2px; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9l7 7 7-7' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; rotate: -90deg; }
.faq details[open] > summary::before { rotate: 0deg; }
.faq-a p { margin: 0 0 24px 28px; color: var(--ink-2); max-width: 64ch; }
.faq details::details-content { interpolate-size: allow-keywords; overflow: clip; contain: layout; }
.faq details:not([open])::details-content { block-size: 0; }
@media (prefers-reduced-motion: no-preference) {
  .faq summary::before { transition: rotate .2s; }
  .faq details::details-content { transition: block-size .3s ease-in-out, content-visibility .3s allow-discrete; transition-behavior: allow-discrete; }
}

/* footer */
.foot { background: var(--paper-2); padding: clamp(64px, 8vw, 110px) 0 40px; margin-top: clamp(40px, 6vw, 80px); }
.f-top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 40px; padding-bottom: 40px; border-bottom: 1px solid var(--line); }
.f-line { margin: 0 0 14px; font-size: 1.1rem; font-weight: var(--w-bold); color: var(--ink-2); }
.f-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding: 40px 0; }
.f-col h2 { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sub); margin-bottom: 14px; }
.lang-bn .f-col h2 { letter-spacing: 0; text-transform: none; font-size: .95rem; }
.f-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.f-col a { text-decoration: none; color: var(--ink-2); font-weight: var(--w-semi); }
.f-col a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.f-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 24px; border-top: 1px solid var(--line); font-size: .9rem; color: var(--sub); }
.f-bottom p { margin: 0; }
.f-bottom a { font-weight: var(--w-bold); color: var(--ink); }

/* ── inner pages ── */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; font-size: .9rem; color: var(--sub); }
.crumbs li + li::before { content: '/'; margin-right: 6px; color: var(--line-2); }
.crumbs a { text-decoration: none; font-weight: var(--w-bold); color: var(--ink-2); }
.crumbs a:hover { text-decoration: underline; }
.page-head { padding: clamp(40px, 6vw, 88px) 0 clamp(16px, 3vw, 40px); }
.page-head h1, .p-hero h1, .article-head h1 { font-size: clamp(2.4rem, 1.3rem + 4.2vw, 4.75rem); margin-top: 20px; max-width: 18ch; }
.lang-bn .page-head h1, .lang-bn .p-hero h1, .lang-bn .article-head h1 { font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.9rem); }
.page-head .ask, .p-hero .ask { margin-left: 0; }
.note { display: inline-flex; align-items: center; gap: 10px; margin: 22px 0 0; padding: 12px 18px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--line); font-size: .95rem; max-width: 72ch; }
.note-live { background: #EEF8F2; box-shadow: 0 0 0 1px rgb(18 160 106 / .3); }
.hint { font-size: .92rem; color: var(--sub); margin: 16px 0 0; }
.p-hero { background: radial-gradient(120% 90% at 85% 40%, var(--tint, var(--paper-2)) 0 45%, transparent 75%); }
.p-hero-in { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 64px); align-items: center; padding-block: clamp(40px, 6vw, 96px); }
.p-hero .chips { justify-content: flex-start; margin-top: 20px; }
.p-hero-art { position: relative; display: grid; place-items: center; }
.disc { width: min(100%, 440px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 38% 32%, #fff, var(--tint) 72%); box-shadow: 0 40px 80px -40px rgb(var(--shade) / .45), inset 0 0 0 1px rgb(255 255 255 / .6); }
.disc img { width: 72%; }
.sticker { position: absolute; left: 4%; bottom: 10%; margin: 0; display: flex; align-items: baseline; gap: 8px; padding: 12px 20px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: var(--w-bold); rotate: -6deg; box-shadow: var(--shadow); }
.sticker b { font-size: 1.35rem; font-weight: var(--w-heavy); }
.p-hero-mistri .p-hero-art img { width: 100%; max-width: 480px; }
.p-sec { padding-block: clamp(48px, 6vw, 88px); }
.p-sec h2 { font-size: clamp(1.75rem, 1.15rem + 2.1vw, 2.7rem); margin-bottom: 24px; }
.p-sec .sec-head h2 { margin-bottom: 0; }
.p-two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.tips { counter-reset: tip; list-style: none; margin: 0; padding: 0; }
.tips li { counter-increment: tip; position: relative; padding: 18px 0 18px 58px; border-bottom: 1px solid var(--line); }
.tips li::before { content: counter(tip); position: absolute; left: 0; top: 15px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--coral-soft); color: var(--coral-deep); font-weight: var(--w-heavy); }
.mini-how h2 { margin-bottom: 20px; }
.mini-how ol, .steps-row { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.steps-row { grid-template-columns: repeat(4, 1fr); }
.mini-how li, .steps-row li { padding: 22px 24px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.mini-how h3, .steps-row h3 { font-size: 1.15rem; margin: 6px 0 6px; }
.mini-how p, .steps-row p { margin: 0; font-size: .95rem; color: var(--ink-2); }
.big-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(56px, 8vw, 110px); }
.big-steps li { display: grid; grid-template-columns: 300px 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.big-steps li:nth-child(even) { grid-template-columns: 1fr 300px; }
.big-steps li:nth-child(even) img { order: 2; }
.big-steps img { width: 100%; border-radius: 40px; border: 10px solid var(--dark); box-shadow: 0 40px 80px -40px rgb(var(--shade) / .5); }
.big-steps h2 { margin: 12px 0 14px; font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.2rem); }
.big-steps p { font-size: 1.15rem; color: var(--ink-2); max-width: 40ch; margin: 0; }
.cta { background: var(--ink); color: #fff; text-align: center; padding-block: clamp(72px, 9vw, 120px); }
.cta h2 { color: #fff; font-size: clamp(2rem, 1.2rem + 3vw, 3.4rem); }
.cta p { color: rgb(255 255 255 / .74); font-size: 1.1rem; margin: 16px auto 0; max-width: 52ch; }
.guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.guide-card { display: flex; flex-direction: column; padding: 28px; border-radius: 30px; background: var(--tint, #fff); box-shadow: 0 0 0 1px var(--line); text-decoration: none; }
.guide-card img { width: 120px; }
.guide-card .wordmark { font-size: 2.4rem; }
.guide-card h2 { font-size: 1.45rem; margin: 18px 0 10px; letter-spacing: -0.025em; line-height: 1.2; }
.guide-card p { color: var(--ink-2); margin: 0 0 20px; font-size: .96rem; }
.guide-card .svc-more { margin-top: auto; }
.article-head { padding-block: clamp(40px, 6vw, 80px) 12px; }
.meta-line { color: var(--sub); font-size: .95rem; margin: 18px 0 0; }
.prose { padding-bottom: clamp(48px, 6vw, 88px); font-size: 1.12rem; }
.prose h2 { font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2rem); margin: 44px 0 10px; letter-spacing: -0.03em; }
.lang-bn .prose h2 { letter-spacing: 0; }
.prose p, .prose li { color: var(--ink-2); }
.prose ol, .prose ul { padding-left: 1.3em; }
.prose li { margin: 10px 0; padding-left: 4px; }
.prose .pt-wrap { margin: 20px 0; }
.meta { display: grid; gap: 10px; margin: 28px 0 0; }
.meta div { display: flex; gap: 12px; flex-wrap: wrap; }
.meta dt { font-weight: var(--w-heavy); }
.meta dd { margin: 0; color: var(--ink-2); }
.meta code { font-size: .8rem; word-break: break-all; }
.nf { text-align: center; padding-block: clamp(80px, 12vw, 160px); }
.nf h1 { margin-inline: auto; }
.nf .lede { margin-inline: auto; }
.nf-code { margin: 0; font-family: var(--display); font-size: clamp(5rem, 3rem + 10vw, 11rem); font-weight: var(--h-weight); color: var(--coral); letter-spacing: -0.06em; line-height: 1; }
.nf .btn { margin-top: 32px; }

/* ── responsive ── */
@media (max-width: 1180px) {
  .fl-card { display: none; }
  .app-card { display: none; }
}
@media (max-width: 1000px) {
  .nav, .lang-link { display: none; }
  .menu-btn { display: grid; }
  .svc-grid, .guide-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-grid, .steps-row { grid-template-columns: repeat(2, 1fr); }
  .prices-in, .ways-grid, .p-two { grid-template-columns: minmax(0, 1fr); }
  .sec-side { position: static; }
  .f-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .story-grid { grid-template-columns: 1fr; }
  .story-phone { display: none; }
  .story-step { min-height: 0; padding: 32px 0; border-top: 1px solid var(--line); }
  .story-inline { display: block; width: min(72vw, 280px); margin-top: 26px; border-radius: 34px; border: 8px solid var(--dark); box-shadow: 0 30px 60px -30px rgb(var(--shade) / .5); }
  .p-hero-in, .band-in { grid-template-columns: minmax(0, 1fr); }
  .p-hero-art { order: -1; }
  .disc { width: min(70vw, 320px); }
  .band-img { justify-self: center; max-width: 340px; }
  .band-text { padding-bottom: 0; }
  .big-steps li, .big-steps li:nth-child(even) { grid-template-columns: 1fr; }
  .big-steps li:nth-child(even) img { order: 0; }
  .big-steps img { max-width: 260px; }
}
@media (max-width: 760px) {
  .floaters { display: none; }
  .hero { min-height: 0; }
  .hero-map { opacity: .65; }
  .motion { display: none; }
  .way-web { grid-template-columns: 1fr; }
  .browser { display: none; }
  .way-app { grid-template-columns: 1fr; }
  .qr { display: none; }
}
@media (max-width: 640px) {
  .top-in { height: 64px; }
  .hero { margin-top: -64px; padding-top: calc(64px + 44px); }
  .top .btn-sm { padding: 0 14px; }
  .ask-form { flex-direction: column; align-items: stretch; gap: 12px; padding: 18px 18px 12px; border-radius: 30px; }
  .ask-go { justify-content: center; min-height: 56px; }
  .ask-list { top: calc(100% + 8px); }
  .svc-grid, .guide-grid, .trust-grid, .steps-row, .f-grid { grid-template-columns: 1fr; }
  .svc-card { min-height: 260px; }
  /* Quick picks scroll sideways instead of stacking six rows high. */
  .popular .chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-inline: calc(-1 * var(--gut)); padding: 2px var(--gut) 6px; scrollbar-width: none; }
  .popular .chips::-webkit-scrollbar { display: none; }
  .popular .chip { white-space: nowrap; }
  .pt tbody th img { display: none; }
  .pt-go { width: 48px; }
  .f-top { align-items: start; }
}
@media (max-width: 420px) {
  .top .btn-sm { display: none; }
}

/* ───────── App home (HOME_DESIGN=app): the homepage is the product ───────── */

/* Page transitions: the site feels like one app as you move between pages. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: .18s ease-in both vt-out; }
  ::view-transition-new(root) { animation: .42s var(--ease) both vt-in; }
}
.top { view-transition-name: top; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; translate: 0 18px; } }

.ah { position: relative; isolation: isolate; overflow: clip; margin-top: -76px; padding: calc(76px + clamp(24px, 4vw, 64px)) 0 clamp(48px, 6vw, 96px); }
.ah .hero-map { opacity: .85; }
.ah-in { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.ah-main { max-width: 620px; }

.loc { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 12px; border: 0; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line); font: inherit; font-weight: var(--w-bold); font-size: .95rem; color: var(--ink); cursor: pointer; transition: box-shadow .2s, scale .15s; }
.loc:hover { box-shadow: 0 0 0 1.5px var(--ink); }
.loc:active { scale: .97; }
.loc .loc-pin { color: var(--coral); width: 18px; height: 18px; }
.loc .loc-chev { width: 16px; height: 16px; color: var(--sub); }

.ah h1 { margin: 22px 0 0; font-size: clamp(2.7rem, 1.4rem + 4.4vw, 5.1rem); line-height: 1; letter-spacing: var(--h1-track); }
.ah-kicker { display: block; margin-bottom: 16px; font-size: clamp(.8rem, .76rem + .2vw, .95rem); line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; color: var(--coral); }
.ah-h { display: block; }
.lang-bn .ah h1 { font-size: clamp(2.3rem, 1.3rem + 3.6vw, 4.2rem); line-height: 1.2; letter-spacing: -0.01em; }
.lang-bn .ah-kicker { letter-spacing: 0; text-transform: none; font-size: 1.05rem; }
.ah-sub { margin: 18px 0 0; max-width: 46ch; color: var(--ink-2); font-size: clamp(1.02rem, .98rem + .25vw, 1.18rem); }

.ah .ask { margin: 26px 0 0; max-width: none; }
.ah .ask-form { padding: 6px 6px 6px 24px; }
.ah .ask-go { min-height: 56px; padding: 0 24px; }

/* Service tiles: 3D objects that lift and tilt toward the pointer; a tap opens the job sheet. */
.tiles { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tile { position: relative; display: grid; justify-items: center; align-content: start; gap: 1px; height: 100%; padding: 14px 8px; border-radius: 24px; background: var(--tint); text-align: center; text-decoration: none; transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .4s var(--ease), translate .35s var(--ease), box-shadow .35s var(--ease), scale .15s; }
.tile-art { display: block; width: 76px; height: 64px; }
.tile img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 10px rgb(var(--shade) / .16)); transition: translate .5s var(--spring), rotate .5s var(--spring), scale .5s var(--spring); }
.tile b { margin-top: 6px; font-size: .98rem; line-height: 1.25; }
.tile small { color: var(--ink-2); font-size: .8rem; font-weight: var(--w-semi); font-variant-numeric: tabular-nums; }
.tile:hover { box-shadow: 0 24px 44px -24px rgb(var(--shade) / .5); }
.tile:active { scale: .95; }
@media (prefers-reduced-motion: no-preference) {
  .tile { animation: tile-in .7s var(--ease) backwards; animation-delay: calc(.2s + var(--i) * 60ms); }
  .tile:hover { translate: 0 -4px; }
  .tile:hover img { translate: 0 -6px; rotate: -6deg; scale: 1.1; }
}
@keyframes tile-in { from { opacity: 0; translate: 0 18px; } }

/* The two ways in. */
.wbs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.wb { display: flex; align-items: center; gap: 12px; min-height: 66px; padding: 10px 16px; border-radius: 20px; text-decoration: none; transition: box-shadow .2s, background-color .2s, scale .15s; }
.wb:active { scale: .97; }
.wb > span { display: grid; min-width: 0; line-height: 1.25; }
.wb b { font-size: .98rem; }
.wb small { font-size: .78rem; font-weight: var(--w-semi); opacity: .72; }
.wb-i { width: 24px; height: 24px; }
.wb-go { width: 18px; height: 18px; margin-left: auto; }
.wb-web { background: var(--ink); color: #fff; }
.wb-web:hover { background: #000; }
.wb-app { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.wb-app:hover { box-shadow: 0 0 0 1.5px var(--ink); }
.ah .hero-trust { justify-content: flex-start; margin-top: 18px; }

.ah-side { position: relative; display: grid; justify-items: center; gap: 16px; }
.ah-side-k { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 7px 14px 7px 12px; border-radius: 999px; background: rgb(255 255 255 / .85); box-shadow: 0 0 0 1px var(--line); font-size: .88rem; font-weight: var(--w-bold); backdrop-filter: blur(8px); }

/* ── The example job: a phone with a map on top and a sheet below; CSS keyed off data-scene ── */
.demo { position: relative; display: grid; justify-items: center; gap: 16px; margin: 0; }
.dm-phone { width: 320px; padding: 10px; border-radius: 50px; background: var(--dark); box-shadow: 0 60px 120px -50px rgb(var(--shade) / .6), inset 0 0 0 2px var(--dark-2); }
.dm-screen { position: relative; isolation: isolate; width: 300px; height: 600px; overflow: hidden; border-radius: 40px; background: var(--map-ground); }
.dm-status { position: absolute; z-index: 8; inset: 0 0 auto; display: flex; align-items: center; height: 38px; padding: 0 28px; font-size: .78rem; font-weight: var(--w-heavy); }
.dm-status i { position: absolute; top: 9px; left: 50%; width: 76px; height: 22px; translate: -50% 0; border-radius: 999px; background: var(--dark); }
.dm-mapwrap { position: absolute; inset: 0 0 auto; height: 330px; }
.dm-map { display: block; }
.dm-ground { fill: var(--map-ground); }
.dm-lake { fill: var(--map-lake); }
.dm-river { fill: none; stroke: var(--map-lake); stroke-width: 16; stroke-linecap: round; }
.dm-st path { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; }
.dm-main { fill: none; stroke: var(--map-main); stroke-width: 9; stroke-linecap: round; }
.dm-route { fill: none; stroke: var(--coral); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
[data-scene='4'] .dm-route, [data-scene='5'] .dm-route { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s var(--ease); }
.dm-rings circle { fill: rgb(235 75 58 / .12); stroke: rgb(235 75 58 / .45); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; opacity: 0; }
[data-scene='2'] .dm-rings circle { animation: dm-ring 2.1s ease-out infinite; }
[data-scene='2'] .dm-rings circle:nth-child(2) { animation-delay: .7s; }
[data-scene='2'] .dm-rings circle:nth-child(3) { animation-delay: 1.4s; }
@keyframes dm-ring { 0% { opacity: .9; scale: .3; } 100% { opacity: 0; scale: 3.4; } }

.dm-home, .dm-pin, .dm-bike { position: absolute; top: 0; left: 0; }
.dm-home { z-index: 3; display: grid; place-items: center; width: 38px; height: 38px; translate: calc(var(--x) - 50%) calc(var(--y) - 50%); border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 5px #fff, 0 10px 20px -6px rgb(235 75 58 / .6); }
.dm-home svg { width: 19px; fill: #fff; }
[data-scene='1'] .dm-home { animation: dm-drop .8s var(--spring) .15s backwards; }
@keyframes dm-drop { from { opacity: 0; translate: calc(var(--x) - 50%) calc(var(--y) - 50% - 46px); } }
.dm-pin { z-index: 4; translate: calc(var(--x) - 50%) calc(var(--y) - 50%); opacity: 0; scale: .3; transition: opacity .3s, scale .45s var(--spring); }
.dm-pin > i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--c, #fff); font-size: .8rem; font-style: normal; font-weight: var(--w-heavy); box-shadow: 0 0 0 3px #fff, 0 8px 14px -6px rgb(var(--shade) / .5); }
.dm-pin-far > i { width: 14px; height: 14px; background: var(--ink); }
.dm-pin em { position: absolute; bottom: calc(100% + 7px); left: 50%; translate: -50% 6px; padding: 3px 8px; border-radius: 999px; background: var(--ink); color: #fff; font-size: .72rem; font-style: normal; font-weight: var(--w-heavy); white-space: nowrap; opacity: 0; transition: opacity .3s, translate .45s var(--spring); }
[data-scene='2'] .dm-pin { opacity: 1; scale: 1; transition-delay: calc(.3s + var(--i) * 160ms); }
[data-scene='3'] .dm-pin:not(.dm-pin-far) { opacity: 1; scale: 1; }
[data-scene='3'] .dm-pin em { opacity: 1; translate: -50% 0; transition-delay: calc(.5s + var(--i) * 450ms); }
.dm-bike { z-index: 5; offset-distance: 0%; offset-rotate: 0deg; opacity: 0; transition: offset-distance .01s, opacity .3s; }
.dm-bike > i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #F7DACD; font-style: normal; font-weight: var(--w-heavy); box-shadow: 0 0 0 3px var(--coral), 0 10px 18px -6px rgb(var(--shade) / .5); }
[data-scene='4'] .dm-bike { opacity: 1; offset-distance: 100%; transition: offset-distance 3s cubic-bezier(.45, .05, .3, 1) .4s, opacity .3s; }

.dm-sheet { position: absolute; z-index: 6; inset: auto 0 0; height: 296px; border-radius: 28px 28px 0 0; background: #fff; box-shadow: 0 -14px 30px -18px rgb(var(--shade) / .35); }
.dm-sheet::before { content: ''; position: absolute; top: 9px; left: 50%; width: 36px; height: 4px; translate: -50% 0; border-radius: 4px; background: var(--line); }
.dm-s { position: absolute; inset: 26px 18px 20px; display: flex; flex-direction: column; gap: 12px; opacity: 0; translate: 0 14px; transition: opacity .3s, translate .5s var(--ease); }
[data-scene='1'] .dm-s1, [data-scene='2'] .dm-s2, [data-scene='3'] .dm-s3, [data-scene='4'] .dm-s4, [data-scene='5'] .dm-s5 { opacity: 1; translate: 0; transition-delay: .12s; }
.dm-h { font-size: 1.05rem; line-height: 1.25; }
.dm-sub { color: var(--sub); font-size: .78rem; font-weight: var(--w-semi); }
.dm-av { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--c); font-style: normal; font-weight: var(--w-heavy); }

.dm-job { display: flex; align-items: center; gap: 12px; }
.dm-job img { flex: none; width: 56px; height: 48px; padding: 4px; border-radius: 14px; background: var(--paper-2); object-fit: contain; }
.dm-job > span, .dm-who > span, .dm-bid > span { display: grid; min-width: 0; line-height: 1.3; }
.dm-job b { font-size: .98rem; }
.dm-job small { color: var(--sub); font-size: .76rem; font-weight: var(--w-semi); }
.dm-usual { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 14px; border-radius: 16px; background: var(--paper); }
.dm-usual small { color: var(--sub); font-size: .78rem; font-weight: var(--w-bold); }
.dm-usual b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.dm-btn { display: grid; place-items: center; min-height: 50px; margin-top: auto; border-radius: 999px; background: var(--coral); color: #fff; font-weight: var(--w-heavy); }
[data-scene='1'] .dm-btn { animation: dm-press 2.8s ease both; }
@keyframes dm-press { 0%, 64% { scale: 1; } 72% { scale: .93; background: var(--coral-deep); } 82%, 100% { scale: 1; } }

.dm-bar { display: block; height: 6px; margin-top: 4px; overflow: hidden; border-radius: 6px; background: var(--paper-2); }
.dm-bar i { display: block; width: 100%; height: 100%; background: var(--coral); transform-origin: left; scale: 0 1; }
[data-scene='2'] .dm-bar i { scale: 1 1; transition: scale 2.4s linear; }
.dm-faces { display: flex; margin-top: 6px; }
.dm-faces .dm-av { margin-right: -8px; box-shadow: 0 0 0 3px #fff; opacity: 0; scale: .5; transition: opacity .3s, scale .45s var(--spring); }
[data-scene='2'] .dm-faces .dm-av { opacity: 1; scale: 1; transition-delay: calc(.5s + var(--i) * .4s); }

.dm-bids { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dm-bid { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line); opacity: 0; translate: 0 18px; transition: opacity .3s, translate .5s var(--spring); }
.dm-bid .dm-av { width: 34px; height: 34px; font-size: .85rem; }
.dm-bid > span { flex: 1; }
.dm-bid b { font-size: .86rem; }
.dm-bid small, .dm-who small { display: flex; align-items: center; gap: 3px; color: var(--sub); font-size: .7rem; font-weight: var(--w-semi); white-space: nowrap; }
.dm-bid em { font-size: .95rem; font-style: normal; font-weight: var(--w-heavy); font-variant-numeric: tabular-nums; }
.dm-star { width: 11px; height: 11px; fill: var(--star); stroke: none; }
[data-scene='3'] .dm-bid { opacity: 1; translate: 0; transition-delay: calc(.4s + var(--i) * .45s); }
[data-scene='3'] .dm-bid:first-child { animation: dm-pick 3.8s ease both; }
@keyframes dm-pick { 0%, 76% { background: #fff; box-shadow: 0 0 0 1px var(--line); } 84%, 100% { background: var(--coral-soft); box-shadow: 0 0 0 2px var(--coral); } }
.dm-tap { position: absolute; top: 44px; left: 58%; width: 46px; height: 46px; border-radius: 50%; background: rgb(var(--ink-rgb) / .2); opacity: 0; pointer-events: none; }
[data-scene='3'] .dm-tap { animation: dm-tap 3.8s ease both; }
@keyframes dm-tap { 0%, 72% { opacity: 0; scale: .4; } 78% { opacity: 1; scale: 1; } 88%, 100% { opacity: 0; scale: 1.7; } }

.dm-who { display: flex; align-items: center; gap: 12px; }
.dm-who b { font-size: 1rem; }
.dm-eta { display: grid; margin-left: auto; padding: 6px 10px; border-radius: 14px; background: var(--coral-soft); color: var(--coral-deep); font-size: .72rem; font-style: normal; font-weight: var(--w-heavy); line-height: 1.1; text-align: center; }
.dm-eta b { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.dm-code { display: grid; justify-items: center; gap: 8px; padding: 14px; border-radius: 18px; background: var(--paper); }
.dm-code small { color: var(--sub); font-size: .74rem; font-weight: var(--w-bold); }
.dm-code span { display: flex; gap: 8px; }
.dm-code i { display: grid; place-items: center; width: 42px; height: 50px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--line); font-size: 1.4rem; font-style: normal; font-weight: var(--w-heavy); }
[data-scene='4'] .dm-code i { animation: dm-digit .5s var(--spring) backwards .7s; }
[data-scene='4'] .dm-code i:nth-child(2) { animation-delay: .82s; }
[data-scene='4'] .dm-code i:nth-child(3) { animation-delay: .94s; }
[data-scene='4'] .dm-code i:nth-child(4) { animation-delay: 1.06s; }
@keyframes dm-digit { from { opacity: 0; translate: 0 10px; scale: .8; } }

.dm-s5 { align-items: center; justify-content: center; gap: 8px; text-align: center; }
.dm-check { width: 66px; height: 66px; }
.dm-check circle { fill: #E6F6EF; stroke: var(--ok); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; }
.dm-check path { fill: none; stroke: var(--ok); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
[data-scene='5'] .dm-check circle { stroke-dashoffset: 0; transition: stroke-dashoffset .6s var(--ease) .2s; }
[data-scene='5'] .dm-check path { stroke-dashoffset: 0; transition: stroke-dashoffset .45s var(--ease) .7s; }
.dm-stars { display: flex; gap: 4px; margin-top: 4px; }
.dm-stars i { display: grid; }
.dm-stars .i { width: 24px; height: 24px; fill: var(--line); stroke: none; transition: fill .2s, scale .45s var(--spring); }
[data-scene='5'] .dm-stars .i { fill: var(--star); scale: 1.08; transition-delay: calc(1.1s + var(--i) * .13s); }

.dm-cap { display: grid; justify-items: center; gap: 10px; max-width: 380px; text-align: center; }
.dm-steps { display: flex; gap: 2px; margin: 0; padding: 4px; list-style: none; border-radius: 999px; background: rgb(255 255 255 / .9); box-shadow: 0 0 0 1px var(--line); }
.dm-steps button { padding: 7px 11px; border: 0; border-radius: 999px; background: none; color: var(--sub); font: inherit; font-size: .78rem; font-weight: var(--w-bold); white-space: nowrap; cursor: pointer; transition: background-color .25s, color .25s; }
.dm-steps button:hover { color: var(--ink); }
.dm-steps button[aria-current='step'] { background: var(--ink); color: #fff; }
.dm-cap p { min-height: 3.2em; margin: 0; color: var(--ink-2); font-size: .95rem; }
.dm-play { position: absolute; top: 10px; right: max(0px, calc(50% - 214px)); display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--line); color: var(--ink); cursor: pointer; }
.dm-play .i { width: 18px; height: 18px; }
.dm-play .i-play, .demo.is-paused .dm-play .i-pause { display: none; }
.demo.is-paused .dm-play .i-play { display: block; }
@media (prefers-reduced-motion: reduce) {
  .demo *, .demo *::before { animation: none !important; transition-duration: .01s !important; transition-delay: 0s !important; }
  .dm-play { display: none; }
}

/* ── Rows you swipe through (Airbnb-style); a grid on wide screens ── */
.pop { padding: clamp(44px, 6vw, 84px) 0 0; }
.row-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 6px 24px; margin-bottom: 18px; }
.row-head h2 { margin: 0; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); letter-spacing: -0.03em; }
.row-head p { margin: 0; color: var(--sub); }
.row-head a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: var(--w-heavy); text-underline-offset: 4px; }
.rail { display: grid; grid-auto-columns: minmax(236px, 1fr); grid-auto-flow: column; gap: 14px; margin: 0 calc(-1 * var(--gut)); padding: 4px var(--gut) 18px; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail > li { scroll-snap-align: start; }
.pc { display: grid; grid-template-rows: auto 1fr auto; height: 100%; overflow: hidden; border-radius: 26px; background: #fff; box-shadow: 0 0 0 1px var(--line); text-decoration: none; transition: box-shadow .3s var(--ease), translate .3s var(--ease), scale .15s; }
.pc:hover { box-shadow: 0 0 0 1px var(--line), 0 26px 50px -26px rgb(var(--shade) / .45); }
.pc:active { scale: .98; }
.pc-art { display: grid; place-items: center; height: 148px; background: var(--tint); }
.pc-art img { width: 118px; transition: scale .5s var(--spring), rotate .5s var(--spring); }
.pc-txt { display: grid; padding: 14px 18px 4px; line-height: 1.3; }
.pc-txt b { font-size: 1.02rem; }
.pc-txt small { color: var(--sub); font-size: .84rem; font-weight: var(--w-semi); }
.pc-price { display: flex; align-items: center; justify-content: space-between; padding: 6px 18px 16px; font-weight: var(--w-heavy); font-variant-numeric: tabular-nums; }
.pc-price .i { width: 18px; height: 18px; color: var(--coral); }
.gc { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 20px; border-radius: 24px; background: var(--tint, #fff); box-shadow: 0 0 0 1px var(--line); text-decoration: none; transition: box-shadow .3s var(--ease), translate .3s var(--ease); }
.gc:hover { box-shadow: 0 0 0 1px var(--line), 0 26px 50px -26px rgb(var(--shade) / .45); }
.gc img { width: 80px; }
.gc .wordmark { font-size: 1.8rem; }
.gc b { font-size: 1.08rem; line-height: 1.3; }
.gc small { margin-top: auto; color: var(--sub); font-weight: var(--w-semi); }
@media (prefers-reduced-motion: no-preference) {
  .pc:hover, .gc:hover { translate: 0 -3px; }
  .pc:hover .pc-art img { scale: 1.08; rotate: -4deg; }
}
@media (min-width: 1100px) {
  .rail { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0 0 4px; overflow: visible; }
}
.how-sec { padding: clamp(56px, 8vw, 110px) 0 clamp(56px, 7vw, 96px); }

/* ── Bottom sheets (native modal <dialog>): slide up on phones, rise in the middle on desktop ── */
.sheet { width: min(560px, 100%); max-width: none; max-height: min(88svh, 780px); margin: auto auto 0; padding: 8px 20px calc(18px + env(safe-area-inset-bottom)); overflow: auto; border: 0; border-radius: 30px 30px 0 0; background: #fff; color: var(--ink); box-shadow: 0 -20px 60px -20px rgb(var(--shade) / .4); overscroll-behavior: contain; opacity: 0; transition-property: opacity, translate, display, overlay; transition-duration: .42s; transition-timing-function: var(--ease); transition-behavior: allow-discrete; }
.sheet[open] { display: flex; flex-direction: column; opacity: 1; translate: 0 0; }
@starting-style { .sheet[open] { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .sheet { translate: 0 100%; }
  .sheet[open] { translate: 0 0; }
  @starting-style { .sheet[open] { translate: 0 100%; } }
}
.sheet::backdrop { overflow: hidden; overscroll-behavior: contain; background-color: rgb(var(--ink-rgb) / 0); transition-property: background-color, display, overlay; transition-duration: .42s; transition-behavior: allow-discrete; }
.sheet[open]::backdrop { background-color: rgb(var(--ink-rgb) / .46); }
@starting-style { .sheet[open]::backdrop { background-color: rgb(var(--ink-rgb) / 0); } }
@media (prefers-reduced-motion: reduce) { .sheet, .sheet::backdrop { transition-duration: .12s; } }
@media (min-width: 761px) {
  .sheet { margin: auto; padding-bottom: 22px; border-radius: 30px; }
  @media (prefers-reduced-motion: no-preference) {
    .sheet { translate: 0 48px; }
    @starting-style { .sheet[open] { translate: 0 48px; } }
  }
}
.sheet.is-dragging { transition: none; }
.sheet-grab { flex: none; width: 44px; height: 5px; margin: 4px auto 12px; border-radius: 5px; background: var(--line-2); cursor: grab; touch-action: none; }
.sheet-head { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; touch-action: none; }
.sheet-head > div { flex: 1; min-width: 0; }
.sheet-head h2 { margin: 0; font-size: 1.45rem; letter-spacing: -0.02em; line-height: 1.2; }
.sheet-head p { margin: 4px 0 0; color: var(--sub); font-size: .9rem; line-height: 1.4; }
.sheet-head form { align-self: start; }
.sheet-art { display: grid; flex: none; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--tint, var(--paper-2)); }
.sheet-art img { width: 52px; height: 44px; object-fit: contain; }
.sheet-x { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--paper-2); color: var(--ink); cursor: pointer; }
.sheet-x .i { width: 18px; height: 18px; }
.sheet-list { display: grid; gap: 10px; min-height: 0; margin: 0; padding: 2px; border: 0; }
.job { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; box-shadow: 0 0 0 1px var(--line); cursor: pointer; transition: box-shadow .2s, background-color .2s, scale .15s; }
.job:hover { box-shadow: 0 0 0 1.5px var(--line-2); }
.job:active { scale: .985; }
.job:has(input:checked) { background: var(--paper); box-shadow: 0 0 0 2px var(--ink); }
.job:has(input:focus-visible) { outline: 3px solid var(--coral); outline-offset: 2px; }
.job input { position: absolute; opacity: 0; pointer-events: none; }
.job > span { display: grid; flex: 1; line-height: 1.3; }
.job b { font-size: 1rem; }
.job small { color: var(--sub); font-size: .86rem; font-weight: var(--w-semi); font-variant-numeric: tabular-nums; }
.tick { display: grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line-2); transition: background-color .2s, box-shadow .2s; }
.tick svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .3s var(--ease); }
.job:has(input:checked) .tick { background: var(--coral); box-shadow: none; }
.job:has(input:checked) .tick svg { stroke-dashoffset: 0; }
.sheet-foot { position: sticky; bottom: calc(-18px - env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 14px; margin-top: auto; padding: 16px 0 4px; background: #fff; }
.sheet-total { display: grid; flex: 1; margin: 0; line-height: 1.25; }
.sheet-total small { color: var(--sub); font-size: .82rem; font-weight: var(--w-bold); }
.sheet-total b { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.sheet-foot .btn[aria-disabled='true'] { opacity: .4; pointer-events: none; }
.sheet-more { display: block; margin-top: 10px; color: var(--ink-2); font-size: .9rem; font-weight: var(--w-bold); text-align: center; text-underline-offset: 4px; }

.loc-gps { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 54px; margin-bottom: 10px; padding: 0 16px; border: 0; border-radius: 16px; background: var(--coral-soft); color: var(--coral-deep); font: inherit; font-weight: var(--w-heavy); cursor: pointer; }
.loc-gps[hidden], .loc-msg[hidden] { display: none; }
.loc-msg { margin: 0 0 10px; padding: 10px 14px; border-radius: 14px; background: var(--paper); color: var(--ink-2); font-size: .88rem; }
.loc-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 2px; list-style: none; }
.loc-opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 50px; padding: 0 14px; border: 0; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--line); color: var(--ink); font: inherit; font-size: .95rem; font-weight: var(--w-bold); text-align: left; cursor: pointer; transition: box-shadow .2s, scale .15s; }
.loc-opt:hover { box-shadow: 0 0 0 1.5px var(--ink); }
.loc-opt:active { scale: .97; }
.loc-opt[aria-pressed='true'] { background: var(--coral-soft); box-shadow: 0 0 0 2px var(--coral); }
.tag { display: inline-flex; align-items: center; gap: 5px; color: var(--sub); font-size: .7rem; font-style: normal; font-weight: var(--w-heavy); }
.tag-live { color: var(--ok); }
.tag .dot { width: 7px; height: 7px; }

/* ── The dock: the two ways in, always one tap away on phones ── */
.dock { position: fixed; z-index: 60; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); left: 12px; display: none; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; border-radius: 24px; background: rgb(255 255 255 / .9); box-shadow: 0 0 0 1px var(--line), 0 20px 40px -20px rgb(var(--shade) / .5); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); transition: translate .45s var(--ease), opacity .3s, visibility .45s; }
.dock a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; border-radius: 18px; color: #fff; font-size: .98rem; font-weight: var(--w-heavy); text-decoration: none; transition: scale .15s; }
.dock a:active { scale: .96; }
.dock .i { width: 20px; height: 20px; }
.dock-web { background: var(--coral); }
.dock-app { background: var(--ink); }
.js .page-home .dock:not(.is-on) { translate: 0 calc(100% + 28px); opacity: 0; visibility: hidden; }

@media (max-width: 1000px) {
  .ah-in { grid-template-columns: minmax(0, 1fr); }
  .ah-main { max-width: 640px; }
  .ah-side { margin-top: 28px; }
}
@media (max-width: 760px) {
  .ah { margin-top: -64px; padding-top: calc(64px + 18px); }
  .ah h1 { margin-top: 16px; }
  .ah-kicker { margin-bottom: 10px; }
  .ah .ask-form { flex-direction: row; align-items: center; padding: 6px 6px 6px 20px; border-radius: 999px; }
  .ah .ask-go { min-height: 50px; padding: 0 16px; }
  .ah .ask-go span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tiles { gap: 8px; }
  .tile { padding: 12px 4px; border-radius: 20px; }
  .tile-art { width: 62px; height: 52px; }
  .tile b { font-size: .88rem; }
  .tile small { font-size: .72rem; }
  .wbs { grid-template-columns: 1fr; gap: 8px; }
  .wb { min-height: 58px; }
  .ah .hero-trust { gap: 6px 14px; font-size: .84rem; }
  .dock { display: grid; }
  body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .page-download { padding-bottom: 0; }
}
.ah-note { margin: 10px 0 0; padding: 10px 14px; max-width: 52ch; border-radius: 14px; background: rgb(255 255 255 / .85); box-shadow: 0 0 0 1px var(--line); color: var(--ink-2); font-size: .9rem; }
.ah-note[hidden] { display: none; }
.demo.is-paused * { animation-play-state: paused !important; }
.dl-now { max-width: 640px; margin-top: 26px; }
.dl-now .wb-app { order: -1; background: var(--coral); color: #fff; box-shadow: none; }
.dl-now .wb-app:hover { background: var(--coral-deep); }