/*
 * Raqamli Yordamchi — landing, variant B ("bolder").
 * Tokens mirror web/src/styles/tokens.css ("Savdo paneli", docs/DESIGN.md §2) so the site and the panel feel like one brand.
 * Light by default; dark follows prefers-color-scheme.
 */

:root {
  color-scheme: light;
  --paper: #f4f6fb;
  --paper-2: #eef1f7;
  --card: #ffffff;
  --ink: #101b3b;
  --ink-2: #56627e;
  --ink-3: #8d97ae;
  --line: #e7ebf3;
  --line-strong: #d3d9e6;

  --cobalt: #2f5bea;
  --cobalt-hover: #2348c8;
  --cobalt-tint: #ebf0ff;
  --link: #2348c8;
  --zafar: #6d4ff5;
  --zafar-tint: #f1eeff;
  --zafar-ink: #5a3fe0;
  --amber: #f59e0b;
  --amber-tint: #fff4e2;
  --amber-ink: #ad520a; /* panel uses #b4570a (4.48:1 on amber-tint); a shade darker passes 4.5:1 for the placeholder text */
  --yashil: #178a4c;
  --yashil-tint: #e6f6ec;
  --yashil-ink: #146c3d;
  --sky: #0ea5c6;
  --sky-tint: #e2f6fb;
  --sky-ink: #0b6f86;
  --anor: #e5484d;
  --anor-tint: #fdecec;
  --anor-ink: #c0282d;
  --ig: #e1306c;
  --ig-tint: #fde7f0;
  --tg: #229ed9;
  --tg-tint: #e3f3fc;

  --nav-bg: #0d1736;
  --nav-bg-2: #0a122b;
  --nav-ink: #b9c3dd;
  --nav-line: rgb(255 255 255 / 0.09);

  --btn: #2f5bea;
  --btn-hover: #2348c8;
  --focus: #2f5bea;
  --header-bg: rgb(244 246 251 / 0.82);
  --chip-bg: rgb(255 255 255 / 0.72);
  --glow-cobalt: rgb(47 91 234 / 0.1);
  --glow-zafar: rgb(109 79 245 / 0.12);

  --shadow-card: 0 1px 2px rgb(16 27 59 / 0.04), 0 6px 20px -10px rgb(16 27 59 / 0.1);
  --shadow-raise: 0 2px 4px rgb(16 27 59 / 0.04), 0 14px 30px -12px rgb(16 27 59 / 0.2);
  --shadow-float: 0 2px 6px rgb(16 27 59 / 0.06), 0 16px 36px -10px rgb(16 27 59 / 0.22);
  --shadow-primary: 0 6px 16px -6px rgb(47 91 234 / 0.55);

  --grad: linear-gradient(120deg, #2f5bea 0%, #6d4ff5 100%);
  --grad-text: linear-gradient(100deg, #2f5bea 5%, #6d4ff5 95%);
  --hero-bg:
    radial-gradient(38rem 26rem at 92% 14%, rgb(109 79 245 / 0.22), transparent 70%),
    radial-gradient(34rem 24rem at 4% 0%, rgb(47 91 234 / 0.18), transparent 70%),
    linear-gradient(165deg, #e8eeff 0%, #efeaff 52%, #f4f6fb 100%);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper: #0b1226;
    --paper-2: #0f1830;
    --card: #131d38;
    --ink: #eaf0ff;
    --ink-2: #a9b4cf;
    --ink-3: #7380a0;
    --line: #1f2a48;
    --line-strong: #2c3a5e;

    --cobalt: #4c78ff;
    --cobalt-hover: #8fb0ff;
    --cobalt-tint: #1d2d5c;
    --link: #8fb0ff;
    --zafar: #9a85ff;
    --zafar-tint: #2b305c;
    --zafar-ink: #c9bcff;
    --amber: #fbbf24;
    --amber-tint: #363530;
    --amber-ink: #fcd07a;
    --yashil: #3dd68c;
    --yashil-tint: #19393f;
    --yashil-ink: #6be3a8;
    --sky: #38c6e3;
    --sky-tint: #193652;
    --sky-ink: #7fdcef;
    --anor: #ff6b6f;
    --anor-tint: #392a41;
    --anor-ink: #ff9a9d;
    --ig: #ff5c93;
    --ig-tint: #392746;
    --tg: #4db8f0;
    --tg-tint: #1c3655;

    --nav-bg: #080f22;
    --nav-bg-2: #060b1a;

    --focus: #8fb0ff;
    --header-bg: rgb(11 18 38 / 0.8);
    --chip-bg: rgb(19 29 56 / 0.72);
    --glow-cobalt: rgb(76 120 255 / 0.14);
    --glow-zafar: rgb(154 133 255 / 0.14);

    --shadow-card: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px -12px rgb(0 0 0 / 0.5);
    --shadow-raise: 0 2px 4px rgb(0 0 0 / 0.3), 0 16px 32px -12px rgb(0 0 0 / 0.6);
    --shadow-float: 0 2px 6px rgb(0 0 0 / 0.35), 0 18px 40px -12px rgb(0 0 0 / 0.65);
    --shadow-primary: 0 6px 18px -6px rgb(47 91 234 / 0.6);

    --grad-text: linear-gradient(100deg, #7f9dff 5%, #b3a3ff 95%);
    --hero-bg:
      radial-gradient(38rem 26rem at 92% 14%, rgb(109 79 245 / 0.3), transparent 70%),
      radial-gradient(34rem 24rem at 4% 0%, rgb(47 91 234 / 0.26), transparent 70%),
      linear-gradient(165deg, #0f1a3d 0%, #16123b 52%, #0b1226 100%);
  }
}

/* ---------- base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
h1,
h2,
h3 {
  margin: 0;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
p,
figure {
  margin: 0;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
a {
  color: var(--link);
  text-underline-offset: 3px;
}
svg {
  display: block;
}
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 8px;
}
main:focus {
  outline: none;
}
.wrap {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 24px;
}
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.i {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mark {
  flex: none;
}
.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  font-weight: 600;
  box-shadow: var(--shadow-float);
}
.skip:focus {
  top: 12px;
}
/* owner-filled placeholders: visible on purpose so nothing ships unfilled */
.ph {
  padding: 0 5px;
  border: 1px dashed currentColor;
  border-radius: 6px;
  background: var(--amber-tint);
  color: var(--amber-ink);
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- buttons, pills, chips ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 12px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.14s ease-out,
    border-color 0.14s ease-out,
    color 0.14s ease-out,
    transform 0.14s ease-out;
}
.btn:hover {
  transform: translateY(-1px);
}
.btn:active {
  transform: none;
}
.btn--primary {
  background: var(--btn);
  color: #fff;
  box-shadow: var(--shadow-primary);
}
.btn--primary:hover {
  background: var(--btn-hover);
}
.btn--ghost {
  background: var(--card);
  border-color: var(--line-strong);
  color: var(--ink);
}
.btn--ghost:hover {
  border-color: var(--cobalt);
  color: var(--link);
}
.btn--white {
  background: #fff;
  color: #2348c8;
  box-shadow: 0 10px 24px -12px rgb(10 18 43 / 0.5);
}
.btn--outline-white {
  border-color: rgb(255 255 255 / 0.55);
  color: #fff;
}
.btn--outline-white:hover {
  background: rgb(255 255 255 / 0.12);
}
.btn--lg {
  min-height: 52px;
  padding: 0 24px;
  border-radius: 14px;
  font-size: 16px;
}
.btn--sm {
  min-height: 40px;
  padding: 0 16px;
  font-size: 14.5px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  flex: none;
}
.pill .i {
  width: 14px;
  height: 14px;
}
.pill--ai {
  background: var(--zafar-tint);
  color: var(--zafar-ink);
}
.pill--cobalt {
  background: var(--cobalt-tint);
  color: var(--cobalt-hover);
}
.pill--amber {
  background: var(--amber-tint);
  color: var(--amber-ink);
}
.pill--sky {
  background: var(--sky-tint);
  color: var(--sky-ink);
}
.pill--yashil {
  background: var(--yashil-tint);
  color: var(--yashil-ink);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
}
.chip .i {
  width: 16px;
  height: 16px;
}

/* icon tiles (DESIGN.md §3.4) */
.tile {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  flex: none;
}
.tile .i {
  width: 24px;
  height: 24px;
}
.tile--cobalt { background: var(--cobalt-tint); color: var(--cobalt); }
.tile--zafar { background: var(--zafar-tint); color: var(--zafar); }
.tile--yashil { background: var(--yashil-tint); color: var(--yashil); }
.tile--amber { background: var(--amber-tint); color: var(--amber-ink); }
.tile--sky { background: var(--sky-tint); color: var(--sky-ink); }
.tile--anor { background: var(--anor-tint); color: var(--anor); }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--line);
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
}
.header__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 68px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
}
.brand .mark {
  width: 36px;
  height: 36px;
}
.brand__name span {
  color: var(--cobalt);
}
.nav ul {
  display: flex;
  gap: 2px;
}
.nav a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.14s ease-out, color 0.14s ease-out;
}
.nav a:hover {
  background: var(--paper-2);
  color: var(--ink);
}
.menu-btn {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}
.menu-btn .i {
  width: 22px;
  height: 22px;
}
.menu-btn .i-close,
.site-header.is-open .menu-btn .i-open {
  display: none;
}
.site-header.is-open .menu-btn .i-close {
  display: block;
}
@media (max-width: 999px) {
  .js .menu-btn {
    display: grid;
  }
  .js .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    padding: 8px 16px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--card);
    box-shadow: var(--shadow-float);
  }
  .js .site-header.is-open .nav {
    display: block;
  }
  .js .nav ul {
    flex-direction: column;
  }
  .js .nav a {
    min-height: 48px;
    font-size: 16px;
    color: var(--ink);
  }
  /* no JS: the menu stays visible as a scrollable row under the bar */
  html:not(.js) .header__bar {
    flex-wrap: wrap;
    height: auto;
    padding-block: 12px;
  }
  html:not(.js) .nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
  }
}
@media (max-width: 400px) {
  .brand {
    gap: 8px;
    font-size: 16px;
  }
  .brand .mark {
    width: 32px;
    height: 32px;
  }
  .header__bar {
    gap: 8px;
  }
  .header__login {
    padding: 0 12px;
  }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  overflow: hidden; /* fallback for browsers without overflow: clip (Safari < 16) */
  overflow: clip;
  margin-top: -69px;
  padding: calc(69px + 64px) 0 96px;
  background: var(--hero-bg);
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center;
  gap: 56px;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--zafar-ink);
  font-size: 14px;
  font-weight: 600;
}
.eyebrow .i {
  width: 22px;
  height: 22px;
  padding: 3px;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  stroke-width: 2;
}
.hero h1 {
  margin-top: 20px;
  font-size: clamp(2.1rem, 1.15rem + 3.4vw, 3.8rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
}
.grad {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (forced-colors: active) {
  .grad {
    background: none;
    color: CanvasText;
  }
}
.lead {
  max-width: 36em;
  margin-top: 20px;
  color: var(--ink-2);
  font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.2rem);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}
.facts li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 6px 14px 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--chip-bg);
  font-size: 14px;
  font-weight: 500;
}
.facts .i {
  width: 18px;
  height: 18px;
  color: var(--cobalt);
}
.facts .i--ig {
  color: var(--ig);
}
.facts .i--tg {
  color: var(--tg);
}

/* hero visual: phone frame with an Instagram-style Direct chat (our own drawing) */
.hero__visual {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.hero__visual::before {
  content: "";
  position: absolute;
  inset: 4% 6% 18%;
  z-index: 0;
  border-radius: 50%;
  background:
    radial-gradient(closest-side at 35% 40%, rgb(47 91 234 / 0.35), transparent),
    radial-gradient(closest-side at 70% 60%, rgb(109 79 245 / 0.35), transparent);
  filter: blur(36px);
}
.phone {
  position: relative;
  z-index: 1;
  width: min(320px, 100%);
  padding: 10px;
  border-radius: 48px;
  background: linear-gradient(155deg, #26357a 0%, #0d1736 42%, #0a122b 100%);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.1),
    0 40px 80px -32px rgb(30 40 120 / 0.6),
    0 18px 36px -18px rgb(16 27 59 / 0.5);
}
.phone::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  z-index: 3;
  width: 88px;
  height: 24px;
  margin-left: -44px;
  border-radius: 999px;
  background: #05091a;
}
.phone__tag {
  position: absolute;
  top: -15px;
  left: 50%;
  z-index: 4;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  box-shadow: var(--shadow-float);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  transform: translateX(-50%);
}
.phone__screen {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 38px;
  background: var(--paper);
}
.ig-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 54px 14px 10px;
  background: var(--card);
}
.ig-bar > .i {
  width: 20px;
  height: 20px;
  color: var(--ink);
}
.ig-avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 2px;
  border-radius: 50%;
  background: linear-gradient(45deg, #f9a03f, #e1306c 50%, #8a3ab9);
}
.ig-avatar span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 2px solid var(--card);
  border-radius: 50%;
  background: var(--paper-2);
  color: var(--ink-2);
}
.ig-avatar .i {
  width: 18px;
  height: 18px;
}
.ig-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}
.ig-who b {
  font-size: 14px;
}
.ig-who small {
  color: var(--ink-2);
  font-size: 11.5px;
}
.ig-bar .ig-actions {
  display: flex;
  gap: 12px;
  margin-left: auto;
  color: var(--ink);
}
.ig-actions .i {
  width: 20px;
  height: 20px;
}
.ai-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  margin: 0 12px 0;
  border-radius: 12px;
  background: var(--paper-2);
  font-size: 11.5px;
  font-weight: 600;
}
.ai-toggle-wrap {
  padding: 0 0 10px;
  border-bottom: 1px solid var(--line);
  background: var(--card);
}
.ai-toggle span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 28px;
  border-radius: 9px;
  color: var(--ink-2);
  white-space: nowrap;
}
.ai-toggle .on {
  background: var(--zafar-tint);
  color: var(--zafar-ink);
}
.ai-toggle .i {
  width: 14px;
  height: 14px;
}
.chat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 12px 12px;
  font-size: 13px;
  line-height: 1.42;
}
.msg {
  max-width: 84%;
  padding: 9px 12px;
  border-radius: 18px;
}
.msg--in {
  align-self: flex-start;
  border: 1px solid var(--line);
  border-bottom-left-radius: 6px;
  background: var(--card);
  box-shadow: 0 1px 2px rgb(16 27 59 / 0.05);
}
.msg--ai {
  align-self: flex-end;
  border-bottom-right-radius: 6px;
  background: var(--zafar-tint);
}
.msg b {
  font-weight: 700;
  white-space: nowrap;
}
.sig {
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  gap: 5px;
  margin-top: -3px;
  color: var(--zafar-ink);
  font-size: 11px;
  font-weight: 600;
}
.sig .mark {
  width: 14px;
  height: 14px;
}
.shot {
  align-self: flex-start;
  width: 136px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 18px;
  border-bottom-left-radius: 6px;
  background: var(--card);
}
.shot__img {
  display: grid;
  place-items: center;
  height: 118px;
  overflow: hidden;
  border-radius: 13px;
  background: linear-gradient(160deg, #dfe5f2, #c3cde3);
}
.shot__paper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 84px;
  padding: 10px 8px 12px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 8px 16px -8px rgb(16 27 59 / 0.45);
  transform: rotate(-4deg);
}
.shot__ok {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #178a4c;
  color: #fff;
}
.shot__ok .i {
  width: 12px;
  height: 12px;
  stroke-width: 2.6;
}
.shot__paper b {
  color: #101b3b;
  font-size: 9.5px;
  white-space: nowrap;
}
.shot__paper i {
  display: block;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: #e3e8f2;
}
.shot__paper i:last-child {
  width: 60%;
}
.shot__cap {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 4px 1px;
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 500;
}
.shot__cap .i {
  width: 14px;
  height: 14px;
}
.sys {
  display: flex;
  align-items: flex-start;
  align-self: center;
  gap: 6px;
  max-width: 96%;
  margin-top: 2px;
  padding: 7px 12px;
  border-radius: 14px;
  background: var(--yashil-tint);
  color: var(--yashil-ink);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
}
.sys .i {
  width: 15px;
  height: 15px;
  margin-top: 1px;
  stroke-width: 2.2;
}
.composer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 10px 14px;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink-2);
  font-size: 13px;
}
.composer .cam {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
}
.composer .cam .i {
  width: 16px;
  height: 16px;
}
.composer > span:nth-child(2) {
  flex: 1;
}
.composer > .i {
  width: 19px;
  height: 19px;
  color: var(--ink);
}
.float {
  position: absolute;
  z-index: 2;
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow-float);
  font-size: 13px;
  animation: bob 7s ease-in-out infinite alternate;
}
.float small {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 500;
}
.float b {
  font-size: 17px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.float--deal {
  top: 246px;
  left: calc(50% - 160px - 104px);
}
.float--deal b {
  color: var(--zafar-ink);
}
.float--order {
  top: 398px;
  left: calc(50% + 160px - 74px);
  animation-delay: -3.5s;
}
@media (min-width: 1180px) {
  .float {
    display: flex;
  }
}
@keyframes bob {
  from { transform: translateY(-6px); }
  to { transform: translateY(6px); }
}
.hero__note {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 330px;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.45;
}
.hero__note .i {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--zafar);
}

/* ---------- sections ---------- */
.sec {
  padding: 104px 0;
}
.sec--white {
  background: var(--card);
}
.sec__head {
  max-width: 760px;
  margin-bottom: 48px;
}
.sec__head--center {
  margin-inline: auto;
  text-align: center;
}
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--zafar-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.kicker::before {
  content: "";
  width: 20px;
  height: 3px;
  border-radius: 2px;
  background: var(--grad);
}
.sec h2 {
  margin-top: 12px;
  font-size: clamp(1.85rem, 1.25rem + 2.2vw, 2.8rem);
  letter-spacing: -0.03em;
}
.sec__lead {
  margin-top: 16px;
  color: var(--ink-2);
  font-size: clamp(1.02rem, 0.96rem + 0.25vw, 1.15rem);
}

/* problems */
#muammo {
  padding-bottom: 40px;
}
.pains {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}
.pain {
  position: relative;
  grid-column: span 2;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.pain:nth-child(-n + 2) {
  grid-column: span 3;
}
.pain__no {
  position: absolute;
  top: 22px;
  right: 24px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pain h3 {
  margin-top: 18px;
  font-size: 18px;
}
.pain p {
  margin-top: 8px;
  color: var(--ink-2);
  font-size: 15px;
}
.pains__end {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  padding: 20px 24px;
  border-radius: 20px;
  background: var(--grad);
  box-shadow: var(--shadow-primary);
  color: #fff;
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
  font-weight: 600;
  line-height: 1.4;
}
.pains__end .mark {
  width: 44px;
  height: 44px;
}

/* features bento */
.bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "inbox inbox ai ai"
    "inbox inbox bar bar"
    "rec voice trig trig"
    "ord ord cat cat";
  gap: 16px;
}
.feat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--card);
  box-shadow: var(--shadow-card);
  transition: transform 0.14s ease-out, box-shadow 0.14s ease-out;
}
.feat:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-raise);
}
.feat__top {
  display: flex;
  align-items: center;
  gap: 14px;
}
.feat h3 {
  font-size: 19px;
}
.feat p {
  color: var(--ink-2);
  font-size: 15px;
}
.feat .mini {
  margin-top: auto;
  padding-top: 8px;
}
.f-inbox {
  grid-area: inbox;
  background: radial-gradient(30rem 18rem at 100% 0%, var(--glow-cobalt), transparent 70%), var(--card);
}
.f-ai {
  grid-area: ai;
  background: radial-gradient(26rem 14rem at 100% 0%, var(--glow-zafar), transparent 70%), var(--card);
}
.f-bar {
  grid-area: bar;
  background: radial-gradient(26rem 14rem at 0% 100%, var(--glow-zafar), transparent 70%), var(--card);
}
.f-rec { grid-area: rec; }
.f-voice { grid-area: voice; }
.f-trig { grid-area: trig; }
.f-ord { grid-area: ord; }
.f-cat { grid-area: cat; }
.f-ai .mark {
  width: 48px;
  height: 48px;
}

.inbox-mock {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
}
.f-inbox .inbox-mock {
  flex: 1;
  margin-top: 8px;
}
.im-compose {
  margin-top: auto;
}
.im-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}
.im-av {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex: none;
}
.im-av .i {
  width: 18px;
  height: 18px;
}
.im-av--ig { background: var(--ig-tint); color: var(--ig); }
.im-av--tg { background: var(--tg-tint); color: var(--tg); }
.im-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  font-size: 13px;
  line-height: 1.35;
}
.im-text b {
  font-weight: 600;
}
.im-text span {
  overflow: hidden;
  color: var(--ink-2);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.im-compose {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink-2);
  font-size: 13px;
}
.im-compose span:first-child {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.im-send {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 9px;
  background: var(--btn);
  color: #fff;
  font-weight: 600;
}
.im-send .i {
  width: 14px;
  height: 14px;
}
.live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 4px 12px 4px 10px;
  border-radius: 999px;
  background: var(--yashil-tint);
  color: var(--yashil-ink);
  font-size: 13px;
  font-weight: 600;
}
.live i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--yashil);
  box-shadow: 0 0 0 4px rgb(23 138 76 / 0.18);
}
.ladder {
  display: grid;
  gap: 8px;
}
.ladder__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  font-size: 14px;
}
.ladder__row b {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ladder__row--ai {
  border-color: transparent;
  background: var(--zafar-tint);
  color: var(--zafar-ink);
  font-weight: 600;
}
.ladder .chips {
  margin-top: 4px;
}
.checks {
  display: grid;
  gap: 6px;
  font-size: 13.5px;
}
.checks li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 10px;
  background: var(--yashil-tint);
  color: var(--yashil-ink);
  font-weight: 600;
}
.checks .i {
  width: 16px;
  height: 16px;
  stroke-width: 2.4;
}
.checks .dup {
  background: var(--anor-tint);
  color: var(--anor-ink);
}
.wave {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--cobalt-tint);
}
.wave__play {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--btn);
  color: #fff;
  flex: none;
}
.wave__play .i {
  width: 14px;
  height: 14px;
  fill: currentColor;
  stroke: none;
}
.wave__bars {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 3px;
  height: 28px;
  min-width: 0;
}
.wave__bars i {
  flex: 1;
  max-width: 4px;
  border-radius: 2px;
  background: var(--cobalt);
  opacity: 0.75;
}
.transcript {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  color: var(--ink-2);
  font-size: 13px;
}
.transcript .i {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--cobalt);
}
.flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.flow__step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  font-size: 13.5px;
  font-weight: 600;
}
.flow__step .i {
  width: 18px;
  height: 18px;
}
.flow__step:nth-child(1) .i { color: var(--amber-ink); }
.flow__step:nth-child(3) .i { color: var(--yashil); }
.flow__step:nth-child(5) .i { color: var(--ig); }
.flow > .i {
  width: 16px;
  height: 16px;
  color: var(--ink-3);
}
.week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-top: 12px;
}
.week span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 0 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
}
.week i {
  display: flex;
  gap: 3px;
  height: 6px;
}
.week i::before,
.week i::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.week .d-ok i::before { background: var(--yashil); }
.week .d-ok i::after { display: none; }
.week .d-two i::before,
.week .d-two i::after { background: var(--yashil); }
.week .d-late i::before { background: var(--anor); }
.week .d-late i::after { background: var(--yashil); }
.week .d-none i::before,
.week .d-none i::after { display: none; }
.week .today {
  border-color: transparent;
  background: var(--btn);
  color: #fff;
}
.week .today i::before,
.week .today i::after { background: #fff; }
.owner-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 500;
}
.owner-row .i {
  width: 18px;
  height: 18px;
  color: var(--ink-2);
}
.owner-row .pill {
  margin-left: auto;
}

/* how it works: horizontal stepper */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 23px;
  left: 60px;
  right: -16px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--cobalt), var(--zafar));
  opacity: 0.4;
}
.step__num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--grad);
  box-shadow: 0 0 0 6px var(--card), var(--shadow-primary);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  flex: none;
}
.step__card {
  flex: 1;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--paper);
}
.step__card .tile {
  width: 44px;
  height: 44px;
}
.step__card .tile .i {
  width: 22px;
  height: 22px;
}
.step h3 {
  margin-top: 16px;
  font-size: 18px;
}
.step p {
  margin-top: 8px;
  color: var(--ink-2);
  font-size: 15px;
}

/* safety: navy band, same navy as the panel sidebar */
.sec--navy {
  --focus: #8fb0ff;
  --link: #8fb0ff;
  background:
    radial-gradient(40rem 26rem at 100% 0%, rgb(109 79 245 / 0.26), transparent 70%),
    radial-gradient(36rem 24rem at 0% 100%, rgb(47 91 234 / 0.24), transparent 70%),
    linear-gradient(180deg, var(--nav-bg), var(--nav-bg-2));
  color: #eaf0ff;
}
.sec--navy .kicker {
  color: #c9bcff;
}
.sec--navy .sec__lead {
  color: var(--nav-ink);
}
.safe {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  align-items: start;
  gap: 32px;
}
.safe__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.safe__item {
  padding: 22px;
  border: 1px solid var(--nav-line);
  border-radius: 20px;
  background: rgb(255 255 255 / 0.04);
}
.safe__item h3 {
  margin-top: 14px;
  color: #fff;
  font-size: 17px;
}
.safe__item p {
  margin-top: 8px;
  color: var(--nav-ink);
  font-size: 15px;
}
.ntile {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--nav-line);
  border-radius: 50%;
  background: rgb(255 255 255 / 0.06);
}
.ntile .i {
  width: 22px;
  height: 22px;
}
.c-blue { color: #8fb0ff; }
.c-violet { color: #b3a3ff; }
.c-green { color: #3dd68c; }
.c-amber { color: #fbbf24; }
.c-sky { color: #38c6e3; }
.c-pink { color: #ff8fb3; }
.rules {
  position: sticky;
  top: 96px;
  padding: 28px;
  border: 1px solid transparent;
  border-radius: 24px;
  background:
    linear-gradient(160deg, #15215a, #0d1736) padding-box,
    linear-gradient(140deg, #5b86ff, #9a85ff 55%, rgb(255 255 255 / 0.08)) border-box;
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.6);
}
.rules__head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rules__head .mark {
  width: 44px;
  height: 44px;
}
.rules h3 {
  color: #fff;
  font-size: 20px;
}
.rules ol {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}
.rule {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px 10px 10px;
  border-radius: 14px;
  background: rgb(255 255 255 / 0.05);
  color: #eaf0ff;
  font-size: 15px;
  line-height: 1.4;
}
.rule__tag {
  display: grid;
  place-items: center;
  min-width: 64px;
  height: 40px;
  padding: 0 10px;
  border-radius: 10px;
  background: var(--grad);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex: none;
}
.rules__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  margin-top: 16px;
  font-weight: 600;
}
.rules__link .i {
  width: 18px;
  height: 18px;
}

/* pricing */
.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 30px 28px 28px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.plan::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--grad);
}
.plan h3 {
  font-size: 20px;
}
.plan__desc {
  margin-top: 6px;
  color: var(--ink-2);
  font-size: 15px;
}
.plan__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.plan__amount {
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}
.plan__per {
  color: var(--ink-2);
  font-weight: 500;
}
.plan__list {
  display: grid;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 15px;
}
.plan__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.plan__list .i {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  color: var(--yashil);
  stroke-width: 2.2;
}
.plan .btn {
  width: 100%;
  margin-top: auto;
}
/* align name, price, list and button across the three cards */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 960px) {
    .plans {
      grid-template-rows: auto auto 1fr auto;
      row-gap: 0;
    }
    .plan {
      display: grid;
      grid-row: span 4;
      grid-template-rows: subgrid;
      row-gap: 20px;
    }
  }
}
.plans__notes {
  display: grid;
  gap: 10px;
  max-width: 860px;
  margin-top: 28px;
  color: var(--ink-2);
  font-size: 14.5px;
}
.plans__notes li {
  display: flex;
  gap: 10px;
}
.plans__notes .i {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--cobalt);
}

/* FAQ */
.faq {
  display: grid;
  gap: 12px;
  max-width: 860px;
  margin-inline: auto;
}
.qa {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 18px 22px;
  border-radius: 18px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}
.qa summary::-webkit-details-marker {
  display: none;
}
.qa__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--cobalt-tint);
  color: var(--cobalt);
  flex: none;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.qa__icon .i {
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
}
.qa[open] .qa__icon {
  background: var(--zafar-tint);
  color: var(--zafar-ink);
  transform: rotate(45deg);
}
.qa__body {
  max-width: 70ch;
  padding: 0 22px 22px;
  color: var(--ink-2);
  font-size: 15.5px;
}

/* final CTA */
.cta__card {
  --focus: #fff;
  position: relative;
  overflow: hidden;
  padding: clamp(32px, 5vw, 64px);
  border-radius: 32px;
  background:
    radial-gradient(30rem 20rem at 100% 0%, rgb(255 255 255 / 0.2), transparent 70%),
    linear-gradient(120deg, #2f5bea 0%, #5a3fe0 62%, #6d4ff5 100%);
  box-shadow: 0 30px 60px -30px rgb(47 91 234 / 0.65);
  color: #fff;
}
.cta__card h2 {
  position: relative;
  max-width: 17em;
  margin: 0;
  font-size: clamp(1.85rem, 1.25rem + 2.2vw, 2.8rem);
  letter-spacing: -0.03em;
}
.cta__card p {
  position: relative;
  max-width: 40em;
  margin-top: 16px;
  color: #fff;
  font-size: clamp(1.02rem, 0.96rem + 0.3vw, 1.15rem);
}
.cta__card .actions {
  position: relative;
  margin-top: 28px;
}
.cta__mark {
  position: absolute;
  right: -36px;
  bottom: -48px;
  width: 260px;
  height: 260px;
  opacity: 0.16;
}

/* footer */
.footer {
  --focus: #8fb0ff;
  padding: 64px 0 28px;
  background: linear-gradient(180deg, var(--nav-bg), var(--nav-bg-2));
  color: var(--nav-ink);
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
  gap: 32px;
}
.footer .brand {
  color: #fff;
}
.footer .brand__name span {
  color: #8fb0ff;
}
.footer__about {
  max-width: 30em;
  margin-top: 14px;
  font-size: 15px;
}
.footer h2 {
  color: #8d97b8;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.footer ul {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  font-size: 15px;
}
.footer li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer li .i {
  width: 18px;
  height: 18px;
  color: #8fb0ff;
}
.footer a {
  color: #dbe4ff;
  text-decoration: none;
}
.footer ul a {
  display: inline-block;
  padding: 4px 0;
}
.footer a:hover {
  text-decoration: underline;
}
.footer .ph {
  background: rgb(251 191 36 / 0.12);
  color: #fcd07a;
}
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 32px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--nav-line);
  color: #8d97b8;
  font-size: 13.5px;
}
.footer__bottom p:last-child {
  max-width: 46em;
}

/* ---------- responsive ---------- */
@media (max-width: 1023px) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "inbox inbox"
      "ai bar"
      "rec voice"
      "trig trig"
      "ord cat";
  }
  .safe {
    grid-template-columns: minmax(0, 1fr);
  }
  .rules {
    position: static;
  }
}
@media (max-width: 959px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 56px;
  }
  .pains {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pain,
  .pain:nth-child(-n + 2) {
    grid-column: span 1;
  }
  .pain:last-child {
    grid-column: span 2;
  }
  .plans {
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
    margin-inline: auto;
  }
  .steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .step {
    flex-direction: row;
    gap: 16px;
  }
  .step:not(:last-child)::before {
    top: 60px;
    bottom: -12px;
    left: 23px;
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, var(--cobalt), var(--zafar));
  }
}
@media (max-width: 767px) {
  .footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .cta__mark {
    display: none;
  }
}
@media (max-width: 640px) {
  .wrap {
    padding-inline: 16px;
  }
  .sec {
    padding: 72px 0;
  }
  .hero {
    padding: calc(69px + 40px) 0 72px;
  }
  .sec__head {
    margin-bottom: 36px;
  }
  .actions .btn {
    flex: 1 1 auto;
  }
  .pains,
  .safe__list {
    grid-template-columns: minmax(0, 1fr);
  }
  .pain:last-child {
    grid-column: auto;
  }
  .pains__end {
    align-items: flex-start;
    padding: 18px;
  }
  .bento {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "inbox" "ai" "bar" "rec" "voice" "trig" "ord" "cat";
  }
  .feat,
  .plan,
  .rules {
    padding: 20px;
  }
  .inbox-mock {
    padding: 8px;
  }
  .pill .long {
    display: none;
  }
  .qa summary {
    padding: 16px 16px 16px 18px;
    font-size: 16px;
  }
  .qa__body {
    padding: 0 18px 18px;
  }
  .cta__card {
    padding: 32px 24px;
    border-radius: 24px;
  }
}
/* phones: the comment-trigger flow no longer fits in one row, so stack it with downward arrows */
@media (max-width: 520px) {
  .flow {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .flow > .i {
    margin-left: 18px;
    transform: rotate(90deg);
  }
}
/* very narrow phones (< 360px): keep the header bar and the big buttons inside the screen */
@media (max-width: 359px) {
  .wrap {
    padding-inline: 12px;
  }
  .brand {
    gap: 6px;
    font-size: 15px;
  }
  .brand .mark {
    width: 28px;
    height: 28px;
  }
  .menu-btn {
    width: 40px;
    height: 40px;
  }
  .btn--lg {
    padding-inline: 16px;
    white-space: normal;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}