/* Teleshop landing site. No JavaScript, no frameworks, no external requests.
   Fonts: Mona Sans (headings) and Inter (body), both SIL OFL 1.1, self-hosted in /fonts. */

@font-face {
  font-family: "Mona Sans";
  src: url("fonts/mona-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --bg-soft: #f6f9fc;
  --surface: #ffffff;
  --surface-2: #f5f8fc;
  --raised: #ffffff;
  --hl: inset 0 1px 0 rgba(255, 255, 255, 0);
  --glass: rgba(255, 255, 255, .78);
  --tint: #eef6fd;
  --ink: #0a1628;
  --text: #3c4a5e;
  --muted: #5a6a80;
  --line: #e4eaf2;
  --line-2: #d3dce8;
  --accent: #2aabee;
  --accent-ink: #0b6fc6;
  /* text on the translucent accent-soft chips (5.4:1 on surface-2) */
  --accent-ink-strong: #0a5fae;
  --accent-soft: rgba(42, 171, 238, .12);
  --grad: linear-gradient(140deg, #45bdf6, #1279d0);
  /* deep enough for white text (4.6:1 or better) */
  --grad-deep: linear-gradient(140deg, #1378c8, #0a5aa8);
  --btn: #0d72cc;
  --btn-hover: #0a63b3;
  --btn-ink: #ffffff;
  --dot: rgba(20, 60, 110, .12);
  --shadow-1: 0 1px 2px rgba(16, 34, 66, .06), 0 2px 6px rgba(16, 34, 66, .04);
  --shadow-2: 0 1px 1px rgba(16, 34, 66, .03), 0 4px 10px -2px rgba(16, 34, 66, .06), 0 18px 36px -14px rgba(16, 34, 66, .12);
  --shadow-3: 0 2px 4px rgba(16, 34, 66, .04), 0 20px 40px -14px rgba(16, 34, 66, .18), 0 56px 110px -36px rgba(16, 60, 120, .30);
  --glow: rgba(42, 171, 238, .42);
  --radius: 24px;
  /* two card-title sizes only */
  --h3: 20px;
  --h3-lg: clamp(24px, 1.2rem + .6vw, 28px);
  --display: "Mona Sans", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Telegram mockup (Day theme) */
  --tg-wall: #d9e7f2;
  --tg-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23305a80' stroke-opacity='.075' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 24l18-7-4 17-5-4-3 4v-5z'/%3E%3Ccircle cx='88' cy='22' r='6'/%3E%3Cpath d='M60 64h12M66 58v12'/%3E%3Cpath d='M16 88c6-6 14-6 20 0'/%3E%3Crect x='84' y='82' width='18' height='15' rx='3'/%3E%3Cpath d='M89 82v-3a4 4 0 0 1 8 0v3'/%3E%3Cpath d='M100 52l3 5 5 1-4 3 1 5-5-3-5 3 1-5-4-3 5-1z'/%3E%3C/g%3E%3C/svg%3E");
  --tg-bar: rgba(247, 248, 250, .96);
  --tg-line: rgba(60, 80, 110, .16);
  --tg-in: #ffffff;
  --tg-out: linear-gradient(180deg, #1a76cc, #1262b5);
  --tg-out-end: #1262b5;
  --tg-text: #111a24;
  --tg-muted: #6c7a89;
  --tg-time: #8a96a3;
  --tg-accent: #2787d8;
  --tg-kb: rgba(255, 255, 255, .94);
  --tg-kb-text: #1c74c7;
  --tg-field: #ffffff;
  --tg-home: #0b0d10;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #070f1e;
    --bg-soft: #0a1427;
    --surface: #101e36;
    --surface-2: #15253f;
    --raised: #1c2f4e;
    --hl: inset 0 1px 0 rgba(255, 255, 255, .06);
    --glass: rgba(7, 15, 30, .72);
    --tint: rgba(42, 171, 238, .08);
    --ink: #eef3fb;
    --text: #b3c0d3;
    --muted: #8e9db3;
    --line: rgba(148, 180, 225, .14);
    --line-2: rgba(148, 180, 225, .22);
    --accent-ink: #5cc2f7;
    --accent-ink-strong: #5cc2f7;
    --accent-soft: rgba(42, 171, 238, .16);
    --btn: #2aabee;
    --btn-hover: #4cbaf3;
    --btn-ink: #03121f;
    --dot: rgba(170, 210, 255, .10);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-2: 0 1px 1px rgba(0, 0, 0, .25), 0 10px 30px -12px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .05);
    --shadow-3: 0 2px 4px rgba(0, 0, 0, .3), 0 30px 60px -20px rgba(0, 0, 0, .6), 0 60px 120px -40px rgba(10, 80, 160, .35);
    --glow: rgba(42, 171, 238, .38);

    --tg-wall: #0e1621;
    --tg-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.04' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 24l18-7-4 17-5-4-3 4v-5z'/%3E%3Ccircle cx='88' cy='22' r='6'/%3E%3Cpath d='M60 64h12M66 58v12'/%3E%3Cpath d='M16 88c6-6 14-6 20 0'/%3E%3Crect x='84' y='82' width='18' height='15' rx='3'/%3E%3Cpath d='M89 82v-3a4 4 0 0 1 8 0v3'/%3E%3Cpath d='M100 52l3 5 5 1-4 3 1 5-5-3-5 3 1-5-4-3 5-1z'/%3E%3C/g%3E%3C/svg%3E");
    --tg-bar: rgba(23, 33, 43, .97);
    --tg-line: rgba(255, 255, 255, .08);
    --tg-in: #182533;
    --tg-out: linear-gradient(180deg, #3a6a9a, #2b5278);
    --tg-out-end: #2b5278;
    --tg-text: #f2f5f8;
    --tg-muted: #8b9cad;
    --tg-time: #7d8e9f;
    --tg-accent: #6ab3f3;
    --tg-kb: #22364a;
    --tg-kb-text: #e8f1fa;
    --tg-field: #0f1a24;
    --tg-home: #f2f5f8;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.6 var(--body);
  font-feature-settings: "cv11", "ss03";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
  .btn:hover .i, .btn:active { transform: none; }
  .back:hover .i { transform: scaleX(-1); }
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; color: var(--ink); font-family: var(--display); font-weight: 600; line-height: 1.25; }
h3 { text-wrap: balance; }
p { margin: 0; }
a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: 6px; }
/* Commands and codes: Inter with tabular figures instead of a heavy system monospace */
code, .num { font-family: var(--body); font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: 0; }
.nowrap { white-space: nowrap; }
::selection { background: rgba(42, 171, 238, .25); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 12px 18px; border-radius: 12px; background: var(--ink); color: var(--bg);
  font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding-inline: 24px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border-radius: 999px;
  font: 600 15px/1 var(--body); letter-spacing: -.005em;
  text-decoration: none; white-space: nowrap;
  transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease, color .2s ease;
}
.btn .i { width: 18px; height: 18px; stroke-width: 2.2; transition: transform .2s ease; }
.btn:hover .i { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn-lg { min-height: 52px; padding: 0 26px; font-size: 16px; }
.btn-block { width: 100%; }
.btn-primary {
  background: var(--btn); color: var(--btn-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(13, 100, 190, .25), 0 10px 22px -8px rgba(13, 114, 204, .6);
}
.btn-primary:hover { background: var(--btn-hover); }
@media (prefers-color-scheme: dark) {
  .btn-primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 6px 16px -8px rgba(42, 171, 238, .45); }
  .btn-primary:focus-visible { outline-color: #eef3fb; }
}
.btn-secondary { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-1); }
.btn-secondary:hover { box-shadow: inset 0 0 0 1px var(--accent), var(--shadow-1); }
.btn-light { background: #ffffff; color: #0a5aa6; box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 12px 26px -10px rgba(0, 20, 60, .55); }
.btn-light:hover { background: #eef7ff; }
.btn-ghost { background: rgba(255, 255, 255, .1); color: #ffffff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); }
.btn-ghost:hover { background: rgba(255, 255, 255, .18); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line);
}
.bar { display: flex; align-items: center; gap: 28px; height: 72px; }
.brand {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  color: var(--ink); text-decoration: none;
  font: 650 20px/1 var(--display); letter-spacing: -.02em;
}
.brand-mark { flex: none; width: 32px; height: 32px; filter: drop-shadow(0 4px 8px rgba(18, 121, 208, .28)); }
.nav { display: flex; gap: 2px; margin: 0 auto; }
.nav a, .signin {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px;
  color: var(--text); font-weight: 500; font-size: 15px; text-decoration: none;
  transition: color .2s, background-color .2s;
}
.nav a:hover, .signin:hover { color: var(--ink); background: var(--surface-2); }
.bar-end { display: flex; align-items: center; gap: 6px; }
/* Mobile menu without JS: a :target panel. Following any link changes the target, so the
   panel closes by itself; "Close" targets the header. The scroll margins below equal each
   target's offset from the top of the sticky header, so opening or closing never scrolls. */
.menu-btn, .menu-panel, .menu-dd { display: none; }
.site-header { scroll-margin-top: -88px; }
/* header links sit 14px below the top: without this, scroll-padding-top would scroll to "reveal" them on focus */
.site-header a { scroll-margin-top: -74px; }

@media (max-width: 900px) {
  .nav, .signin { display: none; }
  .bar { justify-content: space-between; }
  .menu-btn {
    display: grid; place-items: center; flex: none;
    width: 44px; height: 44px; border-radius: 14px;
    background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2);
  }
  .menu-btn:hover { background: var(--surface-2); }
  .menu-close, #menu:target ~ .menu-open { display: none; }
  #menu:target ~ .menu-close { display: grid; }
  .burger, .burger::before, .burger::after {
    display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink);
  }
  .burger { position: relative; }
  .burger::before, .burger::after { content: ""; position: absolute; left: 0; }
  .burger::before { top: -6px; }
  .burger::after { top: 6px; }
  .menu-close .burger { background: transparent; }
  .menu-close .burger::before { transform: translateY(6px) rotate(45deg); }
  .menu-close .burger::after { transform: translateY(-6px) rotate(-45deg); }
  .menu-panel {
    position: absolute; top: calc(100% + 8px); left: 16px; right: 16px;
    padding: 8px; border-radius: 20px;
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-3);
    scroll-margin-top: -8px;
  }
  #menu:target { display: grid; }
  /* the 404 page uses a <details> menu with the same look */
  .menu-dd { display: block; }
  .menu-dd > summary { list-style: none; cursor: pointer; }
  .menu-dd > summary::-webkit-details-marker { display: none; }
  .menu-dd[open] > .menu-panel { display: grid; }
  .menu-dd[open] .burger { background: transparent; }
  .menu-dd[open] .burger::before { transform: translateY(6px) rotate(45deg); }
  .menu-dd[open] .burger::after { transform: translateY(-6px) rotate(-45deg); }
  .menu-panel a {
    display: flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: 12px;
    color: var(--ink); font-weight: 500; text-decoration: none;
  }
  .menu-panel a:hover { background: var(--surface-2); }
}
@media (min-width: 601px) and (max-width: 900px) {
  /* tablets: a dropdown under the button, not a full-width sheet */
  .menu-panel { left: auto; right: 24px; width: 300px; }
}
@media (max-width: 900px) and (prefers-color-scheme: dark) {
  /* a light rim, like the other floating cards: black shadows vanish on navy */
  .menu-panel { background: var(--raised); border-color: transparent; box-shadow: 0 0 0 1px rgba(160, 200, 255, .16), 0 24px 48px -16px rgba(0, 0, 0, .8); }
  .menu-panel a:hover { background: rgba(148, 180, 225, .1); }
}
@media (min-width: 1001px) {
  /* centre the nav on the page, not between the logo and the buttons */
  .bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .nav { margin: 0; justify-self: center; }
  .bar > .brand { justify-self: start; }
  .bar-end { justify-self: end; }
}

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; overflow: visible; overflow-x: clip; padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 6vw, 96px); }
.aurora {
  position: absolute; inset: -10% -10% 0 -10%; z-index: -2; pointer-events: none;
  /* the hero no longer clips vertically: keep the aurora out of the glass header */
  clip-path: inset(9.1% 0 0 0);
  background:
    radial-gradient(38% 42% at 76% 40%, rgba(42, 171, 238, .26), transparent 70%),
    radial-gradient(26% 30% at 94% 12%, rgba(110, 190, 255, .30), transparent 70%),
    radial-gradient(30% 34% at 58% 78%, rgba(90, 150, 255, .14), transparent 70%),
    radial-gradient(36% 28% at 8% -4%, rgba(42, 171, 238, .12), transparent 70%);
}
.hero::before, .page-head::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(var(--dot) 1px, transparent 1.3px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(55% 60% at 72% 36%, #000 0%, transparent 78%);
  mask-image: radial-gradient(55% 60% at 72% 36%, #000 0%, transparent 78%);
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; z-index: -1;
  background: linear-gradient(transparent, var(--bg));
}
@media (prefers-color-scheme: dark) {
  .aurora {
    background:
      radial-gradient(38% 42% at 76% 40%, rgba(42, 171, 238, .24), transparent 70%),
      radial-gradient(26% 30% at 94% 10%, rgba(60, 140, 255, .14), transparent 70%),
      radial-gradient(30% 34% at 56% 80%, rgba(40, 90, 220, .16), transparent 70%),
      radial-gradient(36% 28% at 8% -4%, rgba(42, 171, 238, .12), transparent 70%);
  }
}

.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px; }
.hero-copy { max-width: 600px; }
.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 5px 16px 5px 5px; border-radius: 999px;
  background: var(--glass); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-1);
  color: var(--text); font-size: 14px; font-weight: 500;
}
.kicker-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--grad); color: #fff; }
.kicker-ico .i { width: 15px; height: 15px; stroke-width: 2.1; }
.hero h1 {
  margin-top: 24px;
  /* capped so "Order and pay / before you arrive." stays on two lines in the desktop column */
  font-size: clamp(2.6rem, 1.15rem + 4.1vw, 4.4rem);
  line-height: 1.0; letter-spacing: -.034em;
  text-wrap: balance;
}
.lead {
  margin-top: 24px; max-width: 33em;
  font-size: clamp(1.075rem, 1rem + .4vw, 1.3rem); line-height: 1.55;
  text-wrap: pretty;
}
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.cta-row.center { justify-content: center; }
.demo-note {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 20px; max-width: 31em;
  color: var(--muted); font-size: 14px; line-height: 1.5;
}
.demo-note .i { width: 18px; height: 18px; margin-top: 1px; color: var(--accent-ink); }

/* ---------- Phone mockup (sized in em: the .mock font-size scales the whole thing) ----------
   Phone on the left; the owner's card overlaps the phone's right edge (beside the product
   card and the order summary, where the chat is empty, and above the customer's screenshot),
   so every customer bubble stays visible. */
.hero-art { margin: 0; position: relative; }
.mock {
  --ox: 25.5em; --oy: 10.4em; --ow: 25em;
  position: relative; isolation: isolate;
  display: grid; width: calc(var(--ox) + var(--ow)); margin-left: auto;
  font-size: 10px; line-height: 1.3;
  font-family: var(--body);
  -webkit-user-select: none; user-select: none;
}
.mock::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -10% -12% -10% -14%;
  background:
    radial-gradient(closest-side at 36% 50%, var(--glow), transparent),
    radial-gradient(closest-side at 72% 36%, rgba(90, 150, 255, .26), transparent);
  filter: blur(36px);
}
.phone {
  grid-area: 1 / 1; justify-self: start;
  position: relative; width: 32em; height: 67.6em;
  padding: .85em; border-radius: 5.4em;
  background: linear-gradient(150deg, #39414d 0%, #14181e 22%, #0b0d11 60%, #262c35 100%);
  box-shadow:
    inset 0 0 0 .14em #4a525e,
    inset 0 0 0 .5em #0a0c0f,
    0 .2em .4em rgba(10, 20, 40, .12),
    0 3em 6em -2em rgba(20, 80, 160, .28),
    0 6em 10em -4em rgba(42, 171, 238, .30);
}
.phone::before, .phone::after { content: ""; position: absolute; width: .32em; border-radius: .2em; background: #1d2229; }
.phone::before { left: -.26em; top: 11em; height: 3em; box-shadow: 0 5em 0 #1d2229, 0 10.5em 0 #1d2229; }
.phone::after { right: -.26em; top: 17em; height: 9em; }
@media (prefers-color-scheme: dark) {
  .phone { box-shadow: inset 0 0 0 .14em #5a6472, inset 0 0 0 .5em #0a0c0f, 0 0 0 .1em rgba(160, 200, 255, .12), 0 3em 6em -2em rgba(0, 0, 0, .6), 0 7em 12em -4em rgba(10, 80, 170, .35); }
}
.screen {
  position: relative; height: 100%; overflow: hidden;
  display: flex; flex-direction: column;
  border-radius: 4.6em;
  background: var(--tg-pattern) 0 0 / 8.5em 8.5em, var(--tg-wall);
  color: var(--tg-text);
}
.island { position: absolute; z-index: 5; top: 1.05em; left: 50%; width: 9.4em; height: 2.75em; margin-left: -4.7em; border-radius: 2em; background: #000; }
.status {
  display: flex; align-items: center; justify-content: space-between;
  height: 4.6em; padding: .5em 2.3em 0 3.1em;
  background: var(--tg-bar);
}
.clock { font-size: 1.5em; font-weight: 600; letter-spacing: -.01em; }
.status-ico { display: flex; align-items: center; gap: .55em; }
.status-ico svg:nth-child(1) { width: 1.7em; height: 1.15em; }
.status-ico svg:nth-child(2) { width: 1.6em; height: 1.2em; }
.status-ico svg:nth-child(3) { width: 2.6em; height: 1.2em; }
.tg-head {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: .1em 1.1em .75em; background: var(--tg-bar);
  border-bottom: .1em solid var(--tg-line);
}
.tg-back { display: inline-flex; align-items: center; gap: .35em; color: var(--tg-accent); font-size: 1.55em; }
.tg-back svg { width: .6em; height: 1em; }
.tg-title { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.tg-title b { font-size: 1.55em; font-weight: 600; letter-spacing: -.01em; }
.tg-title span { font-size: 1.2em; color: var(--tg-muted); }
.tg-ava {
  justify-self: end; display: grid; place-items: center;
  width: 2.3em; height: 2.3em; border-radius: 50%;
  font-size: 1.6em; font-weight: 600; color: #fff;
  background: linear-gradient(160deg, #72c9f8, #2b8de0);
}
.tg-ava.sm { width: 2em; height: 2em; font-size: 1.5em; justify-self: start; }

.tg-chat {
  flex: 1; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; gap: .36em;
  padding: .7em .75em .6em;
  font-size: 1.27em; line-height: 1.3;
}
.tg-chat > * { flex: none; }
.msg {
  position: relative; max-width: 82%;
  padding: .5em .75em .45em; border-radius: 1.25em;
  background: var(--tg-in);
  box-shadow: 0 .06em .1em rgba(20, 40, 70, .14);
  display: flex; flex-direction: column;
}
.msg.in { align-self: flex-start; }
.msg.out { align-self: flex-end; }
.msg.tail.in { border-bottom-left-radius: .3em; }
.msg.tail.in::before {
  content: ""; position: absolute; left: -.55em; bottom: 0; width: .9em; height: 1.05em;
  background: var(--tg-in);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 11'%3E%3Cpath d='M9 0v11H0c3.2 0 6-2.6 7-6.2C7.6 2.6 8.2.9 9 0z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 11'%3E%3Cpath d='M9 0v11H0c3.2 0 6-2.6 7-6.2C7.6 2.6 8.2.9 9 0z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
}
.msg time, .cap time { color: var(--tg-time); font-size: .74em; white-space: nowrap; }
.msg b { font-weight: 600; }
.msg > b:first-child { margin-bottom: .1em; }
.has-photo { width: 80%; padding: 0; overflow: hidden; }
.photo svg { width: 100%; height: auto; }
.cap { display: flex; flex-direction: column; padding: .4em .75em .4em; }
.cap > span:not(.row) { color: var(--tg-muted); font-size: .88em; }
.cap .row { display: flex; justify-content: space-between; align-items: flex-end; margin-top: .1em; }
.kb { align-self: flex-start; width: 80%; margin-top: -.12em; }
.kb-btn {
  display: block; padding: .48em; border-radius: .85em; text-align: center;
  background: var(--tg-kb); color: var(--tg-kb-text); font-weight: 600; font-size: .9em;
  box-shadow: 0 .06em .1em rgba(20, 40, 70, .12);
}
.line { display: flex; justify-content: space-between; gap: 1.4em; font-size: .9em; }
.line.total { margin-top: .25em; padding-top: .25em; border-top: .08em solid var(--tg-line); font-weight: 600; }
.meta-line { display: flex; justify-content: space-between; align-items: flex-end; gap: .8em; color: var(--tg-muted); font-size: .86em; }
.meta-line time { font-size: .86em; }

/* The payment screenshot, drawn as a small "image" of a banking app (no tiny fake text) */
.media { padding: 0; background: none; box-shadow: none; }
.rcpt {
  display: flex; flex-direction: column; align-items: center;
  width: 10.4em; padding: .75em .75em 1.9em; border-radius: 1.1em;
  background: linear-gradient(#ffffff, #f1f5f9); color: #172230;
  box-shadow: 0 .1em .25em rgba(20, 40, 70, .2), inset 0 0 0 .06em rgba(20, 40, 70, .08);
  font-size: .84em; line-height: 1.2;
}
.rcpt > * { flex-shrink: 0; }
.rcpt-bar { display: flex; justify-content: space-between; width: 100%; margin-bottom: .65em; }
.rcpt-bar i { display: block; width: 2.2em; height: .38em; border-radius: .3em; background: #d6dde6; }
.rcpt-bar i + i { width: 1.1em; }
.rcpt-ok { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: #1fae5b; box-shadow: 0 .2em .5em -.1em rgba(31, 174, 91, .55); }
.rcpt-ok svg { width: 1.45em; height: 1.45em; }
.rcpt-title { margin-top: .5em; font-size: .86em; font-weight: 600; white-space: nowrap; }
.rcpt-tbar { display: block; width: 62%; height: .5em; margin-top: .6em; border-radius: .3em; background: #bfe6cf; }
.rcpt-amt { margin: .08em 0 .5em; font-size: 1.45em; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rcpt-ln { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: .42em 0; border-top: .08em solid #e3e8ee; }
.rcpt-ln i { display: block; width: 2.4em; height: .38em; border-radius: .3em; background: #dfe5ec; }
.rcpt-ln i + i { width: 3.4em; background: #c5ced9; }
.media .rcpt-ln + .rcpt-ln { display: none; }
.media-time {
  position: absolute; right: .55em; bottom: .55em;
  display: inline-flex; align-items: center; gap: .2em;
  padding: .15em .5em; border-radius: 1em;
  background: rgba(10, 20, 30, .55); color: #fff; font-size: .7em;
}
.media-time svg { width: 1.3em; height: 1.3em; flex: none; }
.code-line { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.2em; }
.code-msg .code {
  margin-top: .15em; padding: 0 .3em; border-radius: .3em;
  background: rgba(42, 171, 238, .14); color: var(--tg-text);
  font-size: 1.45em; font-weight: 700; line-height: 1.3; letter-spacing: .06em; font-variant-numeric: tabular-nums;
}

.tg-input {
  display: flex; align-items: center; gap: .65em;
  padding: .7em .9em .55em; background: var(--tg-bar);
  border-top: .1em solid var(--tg-line);
}
.tg-menu {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .5em .85em; border-radius: 1.6em;
  background: #3a95e6; color: #fff; font-size: 1.25em; font-weight: 600;
}
.tg-menu i { display: block; width: .8em; height: .1em; background: #fff; box-shadow: 0 -.25em 0 #fff, 0 .25em 0 #fff; border-radius: .1em; }
.tg-field {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between;
  padding: .45em .8em; border-radius: 1.6em;
  background: var(--tg-field); box-shadow: inset 0 0 0 .08em var(--tg-line);
  color: var(--tg-time); font-size: 1.3em;
}
.tg-field svg { width: 1.15em; height: 1.15em; transform: rotate(45deg); }
.tg-mic { color: var(--tg-muted); }
.tg-mic svg { width: 2.4em; height: 2.4em; }
.home-bar { position: relative; height: 2.1em; background: var(--tg-bar); }
.home-bar::after { content: ""; position: absolute; left: 50%; top: .65em; width: 12em; height: .45em; margin-left: -6em; border-radius: 1em; background: var(--tg-home); }

/* Owner's view card */
.owner { grid-area: 1 / 1; align-self: start; position: relative; z-index: 3; width: var(--ow); margin: var(--oy) 0 0 var(--ox); }
.owner-label {
  position: absolute; z-index: 2; right: 1.2em; top: -1.8em;
  display: inline-flex; align-items: center; gap: .4em;
  padding: .4em .85em .4em .6em; border-radius: 2em;
  background: var(--raised); color: var(--accent-ink);
  box-shadow: inset 0 0 0 .08em var(--line-2), var(--shadow-1), var(--hl);
  font-size: 1.25em; font-weight: 600;
}
.owner-label svg { width: 1.2em; height: 1.2em; }
.owner-card {
  border-radius: 2.2em; overflow: hidden;
  background: var(--tg-pattern) 0 0 / 8.5em 8.5em, var(--tg-wall);
  box-shadow: 0 0 0 .1em rgba(20, 50, 90, .08), 0 .6em 1.4em rgba(16, 34, 66, .10), 0 3.2em 6em -1.6em rgba(16, 60, 130, .45);
  color: var(--tg-text);
}
@media (prefers-color-scheme: dark) {
  /* a lighter panel with a blue rim, so it separates from the phone screen it covers */
  .owner-card {
    background: var(--tg-pattern) 0 0 / 8.5em 8.5em, #15222f;
    box-shadow: 0 0 0 .1em rgba(160, 200, 255, .22), 0 0 4em -1em rgba(42, 171, 238, .35), 0 2.4em 4.8em -1em rgba(0, 0, 0, .85);
  }
}
.owner-head { display: flex; align-items: center; gap: .8em; padding: .8em 1.2em; background: var(--tg-bar); border-bottom: .1em solid var(--tg-line); }
@media (prefers-color-scheme: dark) { .owner-head { background: #1d2c3b; } }
.owner-head .tg-title { align-items: flex-start; }
.owner-head .tg-title b { font-size: 1.4em; }
.owner-head .tg-title span { font-size: 1.1em; }
/* A photo with a caption, as Telegram shows it: the screenshot fills the top of the bubble,
   the caption sits underneath and the time ends the caption */
.owner-msg {
  display: flex; flex-direction: column; overflow: hidden;
  margin: 1em 1em 0; border-radius: 1.5em;
  background: var(--tg-in); box-shadow: 0 .06em .14em rgba(20, 40, 70, .14);
}
.owner-photo {
  height: 8em; overflow: hidden;
  display: flex; justify-content: center;
  background: linear-gradient(#e9eef4, #dfe6ee);
}
.rcpt.thumb {
  /* natural height: the 8em photo frame crops the bottom, nothing is squashed */
  align-self: flex-start;
  width: 13em; padding: .9em 1em 0; border-radius: 0;
  font-size: 1em; box-shadow: 0 0 1.2em rgba(20, 40, 70, .12);
}
.thumb .rcpt-bar { margin-bottom: .55em; }
.thumb .rcpt-amt { margin: .25em 0 .4em; font-size: 1.4em; }
.owner-text { display: flex; flex-direction: column; gap: .08em; padding: .55em .9em .5em; font-size: 1.16em; line-height: 1.3; min-width: 0; }
.owner-text b { font-weight: 600; margin-bottom: .1em; }
.owner-text span { color: var(--tg-muted); font-size: .92em; }
.owner-text .strong { color: var(--tg-text); font-weight: 600; }
.owner-text time { align-self: flex-end; color: var(--tg-time); font-size: .72em; margin-top: -1.3em; }
.owner-kb { display: grid; grid-template-columns: 1fr 1fr; gap: .4em; padding: .4em 1em 1em; }
.okb {
  display: flex; align-items: center; justify-content: center; gap: .4em;
  padding: .62em .4em; border-radius: .95em;
  background: var(--tg-kb); color: var(--tg-kb-text);
  font-size: 1.2em; font-weight: 600; white-space: nowrap;
  box-shadow: 0 .06em .12em rgba(20, 40, 70, .12);
}
.okb.ok { grid-column: 1 / -1; }
.okb svg, .tgbtn svg { width: 1.2em; height: 1.2em; flex: none; }
.ok svg { color: #1fae5b; }
.short svg { color: #f0a020; }
.fake svg { color: #e5484d; }

/* ---------- Sections ---------- */
.section { position: relative; padding: clamp(72px, 7.5vw, 112px) 0; }
/* two untinted sections in a row: don't double the gap */
#why + .pricing-sec { padding-top: clamp(32px, 4vw, 56px); }
.section.tint { background: var(--bg-soft); border-block: 1px solid var(--line); }
.sec-head { max-width: 760px; margin-bottom: clamp(44px, 5vw, 68px); }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head.center .sec-lead { margin-inline: auto; }
.eyebrow { margin-bottom: 16px; color: var(--accent-ink); font-size: 15px; font-weight: 600; letter-spacing: -.005em; }
.section h2 {
  font-size: clamp(2rem, 1.2rem + 2vw, 2.9rem);
  line-height: 1.08; letter-spacing: -.028em; text-wrap: balance;
}
.sec-lead { margin-top: 20px; max-width: 36em; font-size: clamp(1.05rem, 1rem + .3vw, 1.22rem); line-height: 1.6; text-wrap: pretty; }

.card, .step, .why-card {
  position: relative; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-2);
}

/* Illustrated panel at the top of step and why cards */
.step-art, .why-art {
  position: relative; overflow: hidden;
  display: grid; place-items: center; height: 196px; margin-bottom: 26px;
  border-radius: 16px;
  background: radial-gradient(90% 80% at 50% 0%, rgba(42, 171, 238, .16), transparent 70%), var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.step-art::before, .why-art::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(var(--dot) 1px, transparent 1.3px); background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent 80%);
  mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent 80%);
}
.step-art > *, .why-art > * { position: relative; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  background: var(--raised); color: var(--accent-ink); font-size: 12.5px; font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-1), var(--hl);
}

/* How it works: four cards on a numbered rail */
.steps {
  list-style: none; margin: 0; padding: 64px 0 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;
}
.step { padding: 10px 10px 30px; }
.step > h3, .step > p { margin-inline: 16px; }
.step-n {
  position: absolute; top: -64px; left: 10px;
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--surface); color: var(--accent-ink);
  box-shadow: inset 0 0 0 1.5px rgba(42, 171, 238, .55), 0 0 0 5px var(--accent-soft), var(--shadow-1);
  font: 650 16px/1 var(--display); font-variant-numeric: tabular-nums;
}
.step:last-child .step-n { background: var(--grad-deep); color: #fff; box-shadow: 0 0 0 5px var(--accent-soft), 0 8px 18px -8px rgba(18, 121, 208, .7); }
.step:not(:last-child)::after {
  content: ""; position: absolute; top: -44px; left: 64px; width: calc(100% - 44px); height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), rgba(42, 171, 238, .18));
}
.step h3 { font-size: var(--h3); line-height: 1.25; letter-spacing: -.018em; }
.step p { margin-top: 10px; font-size: 15.5px; line-height: 1.6; text-wrap: pretty; }
.aside-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 32px; color: var(--muted); font-size: 15px; }
.aside-note .i { width: 18px; height: 18px; margin-top: 3px; color: var(--accent-ink); }

/* step art: QR */
.qr-wrap { display: grid; justify-items: center; gap: 12px; }
.qr-card {
  padding: 10px; border-radius: 16px; background: #fff; color: #0a1628;
  box-shadow: 0 1px 2px rgba(16, 34, 66, .08), 0 12px 24px -10px rgba(16, 34, 66, .3);
  transform: rotate(-3deg);
}
.qr { width: 88px; height: 88px; }
.qr-dot { fill: #1886dc; }
/* step art: pickup time */
.pick { display: grid; gap: 6px; width: 84%; max-width: 230px; font-size: 12.5px; }
.pick-q { margin-bottom: 2px; padding: 7px 10px; border-radius: 12px 12px 12px 4px; background: var(--raised); color: var(--ink); box-shadow: var(--shadow-1), var(--hl); font-weight: 500; }
.pick-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pick-btn {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 7px 8px; border-radius: 10px;
  background: var(--raised); color: var(--accent-ink); font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(16, 34, 66, .06), var(--hl);
}
.pick-btn.on { background: var(--btn); color: var(--btn-ink); box-shadow: 0 6px 14px -6px rgba(13, 114, 204, .7); }
.pick-btn .i { width: 14px; height: 14px; stroke-width: 2.6; }
/* step art: bank */
.bankcard {
  display: grid; gap: 3px; width: 84%; max-width: 230px; padding: 14px 16px; border-radius: 16px;
  background: var(--raised); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-2), var(--hl);
  margin-top: -22px;
}
.bank-k { color: var(--muted); font-size: 11.5px; }
.bank-name { color: var(--ink); font-size: 14.5px; font-weight: 600; }
.bank-acc { display: flex; align-items: center; justify-content: space-between; color: var(--ink); font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.bank-acc .i { width: 16px; height: 16px; color: var(--accent-ink); }
.sent-chip {
  position: absolute; right: 18px; bottom: 16px;
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 14px 14px 4px 14px;
  background: var(--tg-out); color: #fff; font-size: 12.5px; font-weight: 600;
  box-shadow: 0 8px 18px -8px rgba(20, 110, 200, .7);
}
.sent-chip .i { width: 15px; height: 15px; }
.sent-chip .ticks { width: 16px; height: 16px; stroke-width: 2.2; }
/* step art: code */
.codebox { display: grid; justify-items: center; gap: 10px; }
.code-k { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.digits { display: flex; gap: 8px; }
.digits i {
  display: grid; place-items: center; width: 44px; height: 54px; border-radius: 12px;
  background: var(--raised); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-2), var(--hl);
  font: 700 26px/1 var(--display); font-style: normal; font-variant-numeric: tabular-nums;
}
.digits i:nth-child(2) { box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 4px var(--accent-soft), var(--shadow-2), var(--hl); }

/* For shop owners */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.card { padding: clamp(26px, 3vw, 40px); overflow: hidden; }
.card h3 { font-size: var(--h3); line-height: 1.25; letter-spacing: -.018em; }
.card p { font-size: 15.5px; line-height: 1.6; text-wrap: pretty; }
.card-copy p { margin-top: 10px; max-width: 34em; }
.b-actions { grid-column: 1 / -1; }
.b-dash { grid-column: span 7; display: flex; flex-direction: column; }
.b-codes { grid-column: span 5; display: flex; flex-direction: column; }
.b-cmds { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 32px; align-items: center; }
.actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.action { padding: 4px 32px 4px 0; }
.action + .action { padding-left: 32px; border-left: 1px solid var(--line); }
.action h3 { margin-top: 22px; }
.action p { margin-top: 8px; }
.tgbtn {
  /* the same Telegram inline keys as in the hero's owner card */
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 11.2em; padding: 10px 18px; border-radius: 12px;
  background: var(--surface); color: var(--tg-kb-text);
  box-shadow: inset 0 0 0 1px var(--line-2), 0 1px 2px rgba(20, 40, 70, .10);
  font-size: 15.5px; font-weight: 600;
}
@media (prefers-color-scheme: dark) {
  .tgbtn { background: var(--tg-kb); box-shadow: inset 0 0 0 1px rgba(160, 200, 255, .12), 0 1px 2px rgba(0, 0, 0, .3); }
}
.tgbtn svg { width: 20px; height: 20px; }
.card .callout {
  display: flex; gap: 14px; align-items: flex-start;
  margin-top: 32px; padding: 18px 20px; border-radius: 16px;
  background: var(--tint); box-shadow: inset 0 0 0 1px var(--accent-soft);
  font-size: 15px;
}
.callout .i { width: 22px; height: 22px; color: var(--accent-ink); margin-top: 1px; }
.callout strong { color: var(--ink); font-weight: 600; }
.callout-t { max-width: 75ch; }

.browser {
  margin-top: auto;
  border-radius: 14px; overflow: hidden;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-2);
  font-size: 13px;
}
.b-dash .card-copy { margin-bottom: 32px; }
.browser-bar { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.dots { display: flex; gap: 6px; }
.dots i { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.url { margin: 0 auto; padding: 4px 14px; border-radius: 8px; background: var(--raised); box-shadow: inset 0 0 0 1px var(--line), var(--hl); color: var(--muted); font-size: 12px; }
.browser-body { display: grid; grid-template-columns: 132px minmax(0, 1fr); min-height: 236px; }
.side { display: grid; align-content: start; gap: 2px; padding: 14px 10px; border-right: 1px solid var(--line); }
.side-item { padding: 7px 10px; border-radius: 8px; color: var(--muted); font-weight: 500; }
.side-item.on { background: var(--accent-soft); color: var(--accent-ink-strong); font-weight: 600; }
.table { padding: 8px 18px; }
.tr {
  display: grid; grid-template-columns: .55fr 1fr .8fr .9fr 1.15fr; align-items: center; gap: 8px;
  padding: 12px 2px; border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.tr:last-child { border-bottom: 0; }
.tr.th { padding: 8px 2px; color: var(--muted); font-size: 12px; font-weight: 600; }
.tr .num { color: var(--ink); letter-spacing: .06em; }
.st { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-style: normal; font-weight: 600; }
.st.paid { background: var(--accent-soft); color: var(--accent-ink-strong); }
.st.done { background: var(--surface-2); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }

.mini-chat {
  flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; margin-top: auto;
  padding: 22px 18px; border-radius: 18px;
  background: var(--tg-pattern) 0 0 / 80px 80px, var(--tg-wall);
  font-size: 14.5px; line-height: 1.35;
}
.b-codes .card-copy { margin-bottom: 26px; }
.mc { position: relative; display: inline-flex; align-items: flex-end; gap: 10px; max-width: 92%; padding: 9px 12px 8px; border-radius: 16px; box-shadow: 0 1px 1px rgba(20, 40, 70, .14); }
.mc time { font-size: 11px; font-weight: 400; }
.mc::before {
  content: ""; position: absolute; bottom: 0; width: 10px; height: 13px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 11'%3E%3Cpath d='M9 0v11H0c3.2 0 6-2.6 7-6.2C7.6 2.6 8.2.9 9 0z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 11'%3E%3Cpath d='M9 0v11H0c3.2 0 6-2.6 7-6.2C7.6 2.6 8.2.9 9 0z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
}
.mc.out { align-self: flex-end; background: var(--tg-out); color: #fff; border-bottom-right-radius: 4px; }
.mc.out::before { right: -6px; background: var(--tg-out-end); transform: scaleX(-1); }
.mc.out time { display: inline-flex; align-items: center; gap: 3px; color: #ffffff; }
.mc.out time .i { width: 15px; height: 15px; stroke-width: 2.2; color: rgba(255, 255, 255, .9); }
.mc.in { align-self: flex-start; background: var(--tg-in); color: var(--tg-text); border-bottom-left-radius: 4px; align-items: center; }
.mc.in::before { left: -6px; background: var(--tg-in); }
.mc.in time { color: var(--tg-time); align-self: flex-end; }
.mc.in svg { width: 18px; height: 18px; color: #1fae5b; flex: none; }
.mc-list { display: grid; grid-template-columns: auto auto; column-gap: 12px; row-gap: 1px; }
.mc-list b { grid-column: 1 / -1; font-weight: 600; margin-bottom: 2px; }
.mc-list span { grid-column: 1; color: var(--tg-muted); font-size: 13.5px; }
.mc-list time { grid-column: 2; grid-row: 3; }

.cmds-head p { margin-top: 8px; }
.cmds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; }
.cmds div { display: grid; align-content: start; gap: 10px; padding: 16px 18px 18px; border-radius: 16px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.cmds dt code { display: inline-block; padding: 4px 10px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-ink-strong); font-size: 14px; }
.cmds dd { margin: 0; font-size: 14.5px; line-height: 1.5; }

/* Why Teleshop */
.why { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.flow-card { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .66fr) minmax(0, 1.34fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.flow-copy h3 { font-size: var(--h3-lg); letter-spacing: -.025em; }
.flow-copy p { margin-top: 12px; max-width: 30em; font-size: 16px; }
.flow {
  position: relative; padding: clamp(22px, 3vw, 36px); border-radius: 20px;
  background: radial-gradient(80% 90% at 70% 30%, rgba(42, 171, 238, .14), transparent 70%), var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
  container: flow / inline-size;
}
.flow-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.node {
  display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 16px;
  background: var(--raised); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-2), var(--hl);
}
.node-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); flex: none; }
.node-ico .i { width: 21px; height: 21px; }
.node-main .node-ico { background: var(--grad); color: #fff; box-shadow: 0 8px 18px -8px rgba(18, 121, 208, .7); }
.node-main { box-shadow: inset 0 0 0 1px rgba(42, 171, 238, .45), 0 0 0 4px var(--accent-soft), var(--shadow-2), var(--hl); }
.node-t { display: grid; line-height: 1.3; }
.node-t b { color: var(--ink); font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.node-t span { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.pipe { position: relative; min-width: 120px; height: 2px; margin: 0 14px 0 10px; background: linear-gradient(90deg, rgba(42, 171, 238, .25), var(--accent)); border-radius: 2px; }
.pipe::after {
  content: ""; position: absolute; right: -2px; top: 50%; width: 9px; height: 9px; margin-top: -5px;
  border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); transform: rotate(45deg);
}
.pipe-label {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  padding: 5px 12px; border-radius: 999px; white-space: nowrap;
  background: var(--raised); color: var(--accent-ink); font-size: 12.5px; font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-1), var(--hl);
}
.flow-side {
  display: flex; align-items: center; gap: 12px; margin-top: 24px; padding: 12px 16px 12px 12px;
  border-radius: 14px; border: 1px dashed var(--line-2); color: var(--muted); font-size: 13.5px; line-height: 1.45;
}
.flow-side b { color: var(--ink); font-weight: 600; }
.flow-mark { width: 30px; height: 30px; flex: none; }
@container flow (max-width: 599px) {
  .flow-row { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .node { width: min(100%, 360px); }
  .node-t b, .node-t span { white-space: normal; }
  .pipe { min-width: 0; width: 2px; height: 64px; margin: 6px 0 10px 31px; background: linear-gradient(180deg, rgba(42, 171, 238, .25), var(--accent)); }
  .pipe::after { right: auto; left: 50%; top: auto; bottom: -1px; margin: 0 0 0 -5px; transform: rotate(135deg); }
  .pipe-label { left: 18px; bottom: auto; top: 50%; transform: translateY(-50%); }
}

.why-card { padding: 10px 10px 30px; }
.why-card > h3, .why-card > p { margin-inline: 18px; }
.why-art { margin-bottom: 24px; }
.why-card h3 { font-size: var(--h3); letter-spacing: -.018em; }
.why-card p { margin-top: 10px; font-size: 15.5px; line-height: 1.6; text-wrap: pretty; }
/* why art: a statement with nothing taken off */
.ledger {
  display: grid; width: 82%; max-width: 250px; padding: 4px 16px; border-radius: 16px;
  background: var(--raised); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-2), var(--hl);
  font-size: 13px;
}
.lg-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; }
.lg-row span:last-child { font-variant-numeric: tabular-nums; }
.lg-row + .lg-row { border-top: 1px solid var(--line); }
.lg-zero span:last-child { padding: 1px 8px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-ink-strong); font-weight: 600; }
.lg-row.lg-total { border-top: 1.5px dashed var(--line-2); color: var(--ink); font-weight: 650; }
/* why art: the shop's own bot */
.botcard {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  width: 84%; max-width: 260px; margin-top: -26px; padding: 14px; border-radius: 18px;
  background: var(--raised); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-2), var(--hl);
}
.bc-ava {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(160deg, #72c9f8, #2b8de0); color: #fff;
  font: 650 20px/1 var(--display);
}
.bc-t { display: grid; min-width: 0; line-height: 1.3; }
.bc-t b { color: var(--ink); font-size: 15px; font-weight: 600; }
.bc-t span { overflow: hidden; color: var(--muted); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.bc-tag { align-self: start; padding: 2px 8px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-ink-strong); font-size: 11.5px; font-weight: 600; }
.bc-lang { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); }
.bc-lang .i { width: 15px; height: 15px; }
/* why art: the trial on a timeline */
.trial { display: grid; gap: 12px; width: 86%; max-width: 280px; }
.tl-track {
  display: flex; align-items: center; gap: 6px; padding: 4px;
  border-radius: 999px; background: var(--raised); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-2), var(--hl);
}
.tl-free {
  flex: 1; display: grid; place-items: center; height: 30px; border-radius: 999px;
  background: var(--grad-deep); color: #fff; font-size: 12.5px; font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
.tl-next {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--accent-ink);
}
.tl-next .i { width: 15px; height: 15px; fill: currentColor; stroke-width: 1; }
.tl-marks { display: flex; justify-content: space-between; padding: 0 40px 0 4px; }
.tl-marks span { display: grid; color: var(--muted); font-size: 12px; line-height: 1.35; }
.tl-marks span:last-child { text-align: right; }
.tl-marks b { color: var(--ink); font-size: 13px; font-weight: 600; }

/* Pricing */
.pricing-sec .wrap { position: relative; }
.pricing-sec .wrap::before {
  content: ""; position: absolute; left: 50%; top: 58%; width: min(900px, 90%); height: 420px; z-index: 0;
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(42, 171, 238, .26), transparent);
  filter: blur(30px);
}
.price-card {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  max-width: 940px; margin: 0 auto; border-radius: 28px; overflow: hidden;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(150deg, rgba(42, 171, 238, .7), rgba(42, 171, 238, .12) 35%, var(--line) 60%, rgba(42, 171, 238, .45)) border-box;
  box-shadow: var(--shadow-3);
}
.price-main {
  padding: clamp(30px, 4.5vw, 52px);
  background: radial-gradient(120% 90% at 0% 0%, var(--tint), transparent 65%);
  border-right: 1px solid var(--line);
}
.plan { color: var(--accent-ink); font: 600 15px/1.4 var(--body); letter-spacing: 0; }
.price-big { margin-top: 14px; color: var(--ink); font: 600 clamp(2.5rem, 1.6rem + 3.4vw, 4rem)/1 var(--display); letter-spacing: -.04em; }
.price-then { margin-top: 16px; font-size: 17px; }
.price-then strong { color: var(--ink); font-weight: 600; }
.price-then .star { display: inline-block; width: 20px; height: 20px; margin-right: 4px; vertical-align: -3px; fill: var(--accent-ink); stroke: var(--accent-ink); stroke-width: 1; }
.price-main .btn { margin-top: 32px; }
.fine { margin-top: 18px; color: var(--muted); font-size: 13.5px; line-height: 1.55; text-wrap: pretty; }
.price-list { padding: clamp(30px, 4.5vw, 52px); }
.list-title { color: var(--ink); font: 600 15px/1.4 var(--body); letter-spacing: 0; }
.checks { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 14px; }
.checks li { display: flex; align-items: flex-start; gap: 12px; font-size: 15.5px; line-height: 1.45; }
.checks .i { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); stroke-width: 3; }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 88px); align-items: start; }
.faq-head { position: sticky; top: 120px; margin-bottom: 0; }
.faq { display: grid; gap: 12px; max-width: 820px; }
.faq details {
  border-radius: 18px; background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1);
  transition: box-shadow .2s ease;
}
.faq details[open] { box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-2); }
.faq summary {
  position: relative; list-style: none; cursor: pointer;
  min-height: 64px; padding: 20px 64px 20px 24px;
  color: var(--ink); font: 600 17px/1.45 var(--body); letter-spacing: -.011em;
  border-radius: 18px; text-wrap: balance;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: ""; position: absolute; right: 18px; top: 50%; width: 32px; height: 32px; margin-top: -16px;
  border-radius: 50%; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color .2s ease;
}
.faq summary::after {
  content: ""; position: absolute; right: 30px; top: 50%; width: 8px; height: 8px; margin-top: -6px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform .25s ease, margin .25s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; border-color: var(--accent-ink); }
.faq details[open] summary::before, .faq summary:hover::before { background: var(--accent-soft); }
.ans { padding: 0 64px 22px 24px; }
.ans p { max-width: 68ch; font-size: 15.5px; line-height: 1.65; text-wrap: pretty; }
.ans p + p { margin-top: 12px; }

/* Final CTA */
.cta-sec { padding-top: clamp(72px, 8vw, 112px); }
.cta-panel {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(56px, 8vw, 104px) clamp(24px, 5vw, 64px);
  border-radius: 32px; text-align: center; color: #ffffff;
  background:
    radial-gradient(50% 70% at 12% 0%, rgba(120, 210, 255, .22), transparent 70%),
    radial-gradient(45% 70% at 100% 100%, rgba(6, 40, 110, .55), transparent 70%),
    linear-gradient(135deg, #1173c9 0%, #0b5fb5 45%, #0a4f9c 100%);
  box-shadow: 0 30px 60px -24px rgba(13, 100, 200, .55), inset 0 1px 0 rgba(255, 255, 255, .25);
}
@media (prefers-color-scheme: dark) {
  .cta-panel {
    background:
      radial-gradient(50% 70% at 12% 0%, rgba(80, 190, 255, .30), transparent 70%),
      radial-gradient(45% 70% at 100% 100%, rgba(2, 20, 60, .6), transparent 70%),
      linear-gradient(135deg, #1173c9 0%, #0b5aab 45%, #08397a 100%);
    box-shadow: 0 0 0 1px rgba(120, 190, 255, .2), 0 30px 60px -30px rgba(20, 120, 230, .28), inset 0 1px 0 rgba(255, 255, 255, .14);
  }
}
.cta-glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
  background-size: 44px 44px; background-position: center;
  -webkit-mask-image: radial-gradient(60% 70% at 50% 40%, #000, transparent 80%);
  mask-image: radial-gradient(60% 70% at 50% 40%, #000, transparent 80%);
}
.cta-panel h2 { max-width: 15em; margin: 0 auto; color: #ffffff; }
.cta-panel > p { max-width: 34em; margin: 20px auto 0; color: #ffffff; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.6; text-wrap: balance; }
.cta-panel .cta-row { margin-top: 36px; }
.cta-panel .cta-note { max-width: 46em; margin-top: 22px; font-size: 14px; color: rgba(255, 255, 255, .96); text-wrap: balance; }
.cta-panel :focus-visible { outline-color: #ffffff; }

/* ---------- Footer ---------- */
.site-footer { padding: 72px 0 40px; border-top: 1px solid var(--line); background: var(--bg); }
.foot-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); gap: 48px; }
.foot-brand p { color: var(--muted); font-size: 15px; }
.foot-brand .by { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 18px; }
.girar { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink); font-weight: 600; text-decoration: none; }
.girar img { width: 24px; height: 24px; border-radius: 50%; }
@media (prefers-color-scheme: dark) { .girar img { box-shadow: 0 0 0 1px rgba(148, 180, 225, .25); } }
.girar:hover span { text-decoration: underline; text-underline-offset: 3px; }
.foot-brand a[href^="mailto"] { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); text-decoration: none; }
.foot-brand a[href^="mailto"]:hover { color: var(--ink); text-decoration: underline; }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.foot-h { margin: 0 0 2px; color: var(--ink); font: 600 14px/1.4 var(--body); letter-spacing: 0; }
.foot-cols ul { list-style: none; margin: 0; padding: 0; }
.foot-cols a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; color: var(--muted); font-size: 15px; text-decoration: none; }
.foot-cols a:hover, .foot-cols a[aria-current] { color: var(--ink); }
.foot-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 14px;
}

/* ---------- Inner pages (privacy, 404) ---------- */
.page-head { position: relative; isolation: isolate; overflow: clip; padding: clamp(48px, 7vw, 88px) 0 clamp(36px, 4vw, 52px); border-bottom: 1px solid var(--line); }
.page-head .aurora {
  background:
    radial-gradient(34% 70% at 82% 10%, rgba(42, 171, 238, .20), transparent 70%),
    radial-gradient(30% 60% at 4% 0%, rgba(42, 171, 238, .10), transparent 70%);
}
.page-head::before { -webkit-mask-image: radial-gradient(45% 90% at 80% 20%, #000, transparent 78%); mask-image: radial-gradient(45% 90% at 80% 20%, #000, transparent 78%); }
.back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--text); font-size: 15px; font-weight: 500; text-decoration: none; }
.back .i { width: 18px; height: 18px; color: var(--accent-ink); transform: scaleX(-1); transition: transform .2s ease; }
.back:hover { color: var(--ink); }
.back:hover .i { transform: scaleX(-1) translateX(3px); }
.page-head h1 { margin-top: 18px; font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem); line-height: 1.02; letter-spacing: -.04em; }
.updated { margin-top: 16px; color: var(--muted); font-size: 15px; }

.page-body { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 68ch); gap: clamp(40px, 6vw, 96px); padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(80px, 9vw, 120px); }
.toc { position: sticky; top: 104px; align-self: start; }
.toc-h { margin-bottom: 8px; color: var(--ink); font-size: 13px; font-weight: 600; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line-2); }
.toc a { display: flex; align-items: center; min-height: 44px; margin-left: -1px; padding: 4px 0 4px 16px; border-left: 2px solid transparent; color: var(--muted); font-size: 14px; line-height: 1.35; text-decoration: none; text-wrap: balance; }
.toc a:hover { border-left-color: var(--accent); color: var(--ink); }

.prose { min-width: 0; font-size: 17px; line-height: 1.75; }
.prose > * + * { margin-top: 16px; }
.prose h2 { margin-top: 56px; padding-top: 4px; font-size: clamp(1.5rem, 1.25rem + .8vw, 1.85rem); line-height: 1.2; letter-spacing: -.025em; scroll-margin-top: 96px; }
.prose h3 { margin-top: 32px; font-size: 1.2rem; letter-spacing: -.015em; }
.prose h2 + *, .prose h3 + * { margin-top: 12px; }
.prose h2 + h3 { margin-top: 22px; }
.prose ul { margin-bottom: 0; padding-left: 0; list-style: none; }
.prose li { position: relative; padding-left: 26px; }
.prose li + li { margin-top: 10px; }
.prose li::before { content: ""; position: absolute; left: 6px; top: .72em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose .summary {
  margin-top: 0; padding: 22px 24px; border-radius: 18px;
  background: var(--tint); box-shadow: inset 0 0 0 1px var(--accent-soft);
}

.nf { position: relative; isolation: isolate; overflow: clip; padding: clamp(72px, 12vw, 152px) 0; text-align: center; }
.nf .aurora {
  background:
    radial-gradient(40% 50% at 50% 30%, rgba(42, 171, 238, .22), transparent 70%),
    radial-gradient(30% 40% at 80% 80%, rgba(90, 150, 255, .12), transparent 70%);
}
.nf-chat {
  display: flex; flex-direction: column; gap: 8px; width: min(100%, 360px); margin: 0 auto 44px; padding: 20px 18px;
  border-radius: 22px; background: var(--tg-pattern) 0 0 / 80px 80px, var(--tg-wall); box-shadow: var(--shadow-2);
  text-align: left; font-size: 15px; line-height: 1.4;
}
.nf-chat .mc { padding: 10px 14px 9px; }
.nf h1 { font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem); line-height: 1.02; letter-spacing: -.04em; }
.nf-text { max-width: 30em; margin: 18px auto 0; font-size: 18px; text-wrap: balance; }
@media (prefers-color-scheme: dark) {
  .nf-chat { box-shadow: 0 0 0 1px rgba(160, 200, 255, .14), 0 24px 48px -20px rgba(0, 0, 0, .7); }
}

/* ---------- Responsive ---------- */
@media (min-width: 1200px) {
  .hero { padding-top: clamp(40px, 5vw, 72px); }
  .mock { font-size: 11px; }
}
@media (min-width: 1001px) {
  /* split section header: title on the left, lead on the right, sharing a baseline */
  .sec-head:not(.center):not(.faq-head) {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end;
    max-width: none;
  }
  .sec-head:not(.center):not(.faq-head) > * { grid-column: 1 / span 7; grid-row: 2; }
  .sec-head:not(.center):not(.faq-head) > .eyebrow { grid-row: 1; }
  .sec-head:not(.center):not(.faq-head) > .sec-lead { grid-column: 8 / -1; margin-top: 0; padding-bottom: .2em; }
  .b-cmds { grid-template-columns: minmax(0, 1.1fr) minmax(0, 2.6fr); }
  .cmds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* the callout spans the whole card: statement on the left, detail on the right */
  .callout-t { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 40px; max-width: none; }
}
@media (min-width: 1001px) and (max-width: 1199px) {
  .hero-grid { gap: 32px; }
  /* the mockup keeps its size; the headline scales with what is left so it stays on two lines */
  .hero h1 { font-size: min(4.4rem, calc((100vw - 600px) / 7.8)); }
  .lead { font-size: 1.1rem; }
}
@media (max-width: 1199px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 84px; }
  .step:nth-child(2n)::after { display: none; }
  .flow-card { grid-template-columns: minmax(0, 1fr); }
}
/* step cards side by side share rows (art, title, text), so every text starts at the same height.
   The parent gap would be spread into the subgrid rows, so card rows are spaced with a margin. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 601px) {
    .steps { row-gap: 0; }
    .step { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
  }
  @media (min-width: 601px) and (max-width: 1199px) {
    .step:nth-child(n+3) { margin-top: 84px; }
  }
}
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 64px; }
  .hero-copy { max-width: 680px; margin: 0 auto; text-align: center; }
  .hero-copy .lead { margin-inline: auto; }
  .cta-row { justify-content: center; }
  .demo-note { display: block; max-width: 34em; margin-inline: auto; text-align: center; text-wrap: balance; }
  .demo-note .i { display: inline-block; margin: 0 6px 0 0; vertical-align: -4px; }
  .mock { margin: 0 auto; }
  .b-dash, .b-codes { grid-column: 1 / -1; }
  .b-cmds { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .cmds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why-card:last-child { grid-column: 1 / -1; }
  .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .faq-head { position: static; }
  .foot-top { grid-template-columns: minmax(0, 1fr); }
  .page-body { grid-template-columns: minmax(0, 68ch); }
  .toc { display: none; }
  /* one column: centre the glow and the dot grid on the phone, not beside the headline */
  .aurora {
    background:
      radial-gradient(48% 30% at 50% 74%, rgba(42, 171, 238, .24), transparent 70%),
      radial-gradient(40% 18% at 82% 6%, rgba(110, 190, 255, .20), transparent 70%);
  }
  .hero::before {
    -webkit-mask-image: radial-gradient(60% 45% at 50% 70%, #000 0%, transparent 78%);
    mask-image: radial-gradient(60% 45% at 50% 70%, #000 0%, transparent 78%);
  }
}
@media (max-width: 1000px) and (prefers-color-scheme: dark) {
  .aurora {
    background:
      radial-gradient(48% 30% at 50% 74%, rgba(42, 171, 238, .22), transparent 70%),
      radial-gradient(40% 18% at 82% 6%, rgba(60, 140, 255, .14), transparent 70%);
  }
}
@media (min-width: 601px) and (max-width: 1000px) {
  /* the third why card spans both columns: lay it out sideways */
  .why-card:last-child { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr; column-gap: 16px; padding-bottom: 10px; }
  .why-card:last-child .why-art { grid-row: 1 / -1; margin: 0; }
  .why-card:last-child h3 { grid-row: 2; grid-column: 2; }
  .why-card:last-child p { grid-row: 3; grid-column: 2; }
}
@media (max-width: 860px) {
  .actions { grid-template-columns: minmax(0, 1fr); }
  .action { padding: 0 0 26px; }
  .action + .action { padding: 26px 0; border-left: 0; border-top: 1px solid var(--line); }
  .action:last-child { padding-bottom: 0; }
  .price-card { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .price-main { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (min-width: 601px) and (max-width: 860px) {
  /* one action per row, laid out sideways: button | heading + text */
  .action { display: grid; grid-template-columns: 190px minmax(0, 1fr); column-gap: 24px; align-items: start; }
  .action .tgbtn { grid-row: 1 / span 2; justify-self: start; }
  .action h3, .action p { grid-column: 2; }
  .action h3 { margin-top: 2px; }
}
@media (max-width: 600px) {
  .wrap { padding-inline: 20px; }
  .bar { gap: 12px; }
  .hero { padding: 40px 0 24px; }
  .hero-grid { gap: 44px; }
  .aurora {
    background:
      radial-gradient(60% 30% at 50% 72%, rgba(42, 171, 238, .24), transparent 70%),
      radial-gradient(50% 20% at 80% 8%, rgba(110, 190, 255, .22), transparent 70%),
      radial-gradient(60% 20% at 10% 40%, rgba(42, 171, 238, .10), transparent 70%);
  }
  /* Mockup: the owner's card hangs off the phone's lower right, below the customer's
     screenshot and beside the pickup-code bubble, so all four steps stay visible */
  .mock { --ox: 18em; --oy: 54.6em; --ow: 23em; font-size: min(9.4px, calc((100vw - 40px) / 41)); }
  .mock::before {
    inset: 0 6% 4% 0;
    background:
      radial-gradient(52% 38% at 44% 44%, var(--glow), transparent 75%),
      radial-gradient(40% 22% at 72% 84%, rgba(90, 150, 255, .22), transparent 75%);
  }
  .steps { padding-top: 0; grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .step-n { position: relative; top: auto; left: auto; z-index: 1; width: 38px; height: 38px; margin: -45px 0 14px 16px; background: var(--surface); font-size: 15px; }
  .step:last-child .step-n { background: var(--grad-deep); }
  .step::after { display: none; }
  .step-art, .why-art { height: 184px; margin-bottom: 22px; }
  .pick { gap: 5px; margin-top: -14px; }
  .pick-q, .pick-btn { padding-block: 6px; }
  .why { grid-template-columns: minmax(0, 1fr); }
  .flow { padding: 16px; }
  .flow-side { align-items: flex-start; padding: 12px; }
  .mini-chat { padding: 16px 12px 16px 16px; }
  .mc { max-width: 100%; }
  .browser-body { grid-template-columns: minmax(0, 1fr); }
  .side { display: none; }
  .tr { grid-template-columns: .6fr .9fr 1fr 1.25fr; }
  .tr > span:nth-child(2) { display: none; }
  .cmds { grid-template-columns: minmax(0, 1fr); }
  .cmds div { padding: 14px 16px; gap: 8px; }
  .site-footer { padding-top: 48px; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-cols > div:first-child { grid-row: span 2; }
  .faq summary { padding-left: 20px; }
  .ans { padding: 0 24px 22px 20px; }
  .card { border-radius: 22px; }
  .card .callout { gap: 12px; padding: 18px; }
  .callout .i { width: 20px; height: 20px; }
  /* the statement on its own balanced lines, the detail underneath */
  .callout strong { display: block; margin-bottom: 4px; text-wrap: balance; }
  .cta-panel .cta-row { flex-direction: column; align-items: stretch; max-width: 300px; margin-inline: auto; }
  .prose { font-size: 16px; }
  .nf .cta-row { flex-direction: column; align-items: stretch; max-width: 300px; margin-inline: auto; }
}
@media (max-width: 400px) {
  .faq summary { font-size: 16px; padding: 18px 56px 18px 18px; }
  .faq summary::before { right: 12px; }
  .faq summary::after { right: 24px; }
  .ans { padding: 0 20px 20px 18px; }
  .hero .cta-row { flex-direction: column; align-items: stretch; max-width: 320px; margin-inline: auto; }
  .kicker { gap: 8px; padding-right: 12px; font-size: 13px; }
  .kicker-ico { width: 24px; height: 24px; }
  .kicker-ico .i { width: 13px; height: 13px; }
}
@media (max-width: 380px) {
  .bar-end .btn { padding: 0 16px; }
  .card { padding: 20px; }
  .price-main, .price-list { padding: 24px; }
  .mc-list { grid-template-columns: minmax(0, 1fr); }
  .mc-list time { grid-column: 1; grid-row: auto; justify-self: end; margin-top: -2px; }
}
@media (max-width: 380px), (min-width: 601px) and (max-width: 680px) {
  /* narrow why cards: keep the bot's name on one line and its handle whole */
  .botcard { width: 94%; gap: 10px; padding: 12px; }
  .bc-ava { width: 40px; height: 40px; font-size: 18px; }
}
@media (max-width: 355px) {
  .price-then { font-size: 16px; }
}
@media (max-width: 340px) {
  .brand span { font-size: 18px; }
  .kicker { white-space: nowrap; padding-left: 12px; }
  .kicker-ico { display: none; }
}

/* Browsers without container queries: the flow diagram goes vertical on small screens */
@supports not (container-type: inline-size) {
  @media (max-width: 600px) {
    .flow-row { grid-template-columns: minmax(0, 1fr); }
    .node-t b, .node-t span { white-space: normal; }
    .pipe { min-width: 0; width: 2px; height: 64px; margin: 6px 0 10px 31px; background: linear-gradient(180deg, rgba(42, 171, 238, .25), var(--accent)); }
    .pipe::after { right: auto; left: 50%; top: auto; bottom: -1px; margin: 0 0 0 -5px; transform: rotate(135deg); }
    .pipe-label { left: 18px; bottom: auto; top: 50%; transform: translateY(-50%); }
  }
}

/* ---------- Windows contrast themes ---------- */
@media (forced-colors: active) {
  /* the burger lines are backgrounds, which forced colours would erase */
  .burger, .burger::before, .burger::after { forced-color-adjust: none; background: CanvasText; }
  .menu-close .burger, .menu-dd[open] .burger { background: transparent; }
  /* outlines drawn with box-shadow disappear: give them real borders */
  .menu-btn, .btn, .faq details, .kicker, .chip { border: 1px solid CanvasText; }
}

/* ---------- Motion (CSS only, off for reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: rise .8s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-copy > :nth-child(2) { animation-delay: .06s; }
  .hero-copy > :nth-child(3) { animation-delay: .14s; }
  .hero-copy > :nth-child(4) { animation-delay: .22s; }
  .hero-copy > :nth-child(5) { animation-delay: .3s; }
  .phone { animation: rise-phone 1s cubic-bezier(.2, .7, .2, 1) .1s both; }
  .owner { animation: slide-owner .8s cubic-bezier(.2, .7, .2, 1) .35s both; }
  .mock::before { animation: glow-in 1.2s ease both; }
  @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes rise-phone { from { opacity: 0; transform: translateY(40px) scale(.97); } to { opacity: 1; transform: none; } }
  @keyframes slide-owner { from { opacity: 0; transform: translate(24px, 16px); } to { opacity: 1; transform: none; } }
  @keyframes glow-in { from { opacity: 0; } to { opacity: 1; } }

  @supports (animation-timeline: view()) {
    .reveal {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 28%;
    }
    @keyframes reveal { from { opacity: .55; transform: translateY(36px) scale(.985); } to { opacity: 1; transform: none; } }
  }
}