/* ============================================================
   Aizy — public-surface stylesheet (landing / onboarding / 404 /
   email-confirm web view). Self-contained: design tokens + base
   + keyframes + responsive rules. NOT loaded on the admin console
   (that uses tailadmin.css). Fonts: Inter (UI) + Roboto Mono (nums).
   Token scales are Untitled UI; brand is overridden to cobalt.
   ============================================================ */

/* --- Color primitives ------------------------------------- */
:root {
  --base-white: #ffffff;
  --base-black: #000000;
  --base-transparent: rgba(255, 255, 255, 0);

  --brand-25:  #fcfaff; --brand-50:  #f9f5ff; --brand-100: #f4ebff;
  --brand-200: #e9d7fe; --brand-300: #d6bbfb; --brand-400: #b692f6;
  --brand-500: #9e77ed; --brand-600: #7f56d9; --brand-700: #6941c6;
  --brand-800: #53389e; --brand-900: #42307d;

  --gray-25:  #fcfcfd; --gray-50:  #f9fafb; --gray-100: #f2f4f7;
  --gray-200: #eaecf0; --gray-300: #d0d5dd; --gray-400: #98a2b3;
  --gray-500: #667085; --gray-600: #475467; --gray-700: #344054;
  --gray-800: #1d2939; --gray-900: #101828; --gray-950: #0c111d;

  --error-25:  #fffbfa; --error-50:  #fef3f2; --error-100: #fee4e2;
  --error-200: #fecdca; --error-300: #fda29b; --error-400: #f97066;
  --error-500: #f04438; --error-600: #d92d20; --error-700: #b42318;
  --error-800: #912018; --error-900: #7a271a;

  --warning-25:  #fffcf5; --warning-50:  #fffaeb; --warning-100: #fef0c7;
  --warning-200: #fedf89; --warning-300: #fec84b; --warning-400: #fdb022;
  --warning-500: #f79009; --warning-600: #dc6803; --warning-700: #b54708;
  --warning-800: #93370d; --warning-900: #7a2e0e;

  --success-25:  #f6fef9; --success-50:  #ecfdf3; --success-100: #dcfae6;
  --success-200: #abefc6; --success-300: #75e0a7; --success-400: #47cd89;
  --success-500: #17b26a; --success-600: #079455; --success-700: #067647;
  --success-800: #085d3a; --success-900: #074d31;

  --blue-50: #eff8ff; --blue-100: #d1e9ff; --blue-600: #1570ef;

  /* --- Semantic aliases ----------------------------------- */
  --text-primary:       var(--gray-900);
  --text-primary-on-brand: var(--base-white);
  --text-secondary:     var(--gray-700);
  --text-secondary-hover: var(--gray-800);
  --text-tertiary:      var(--gray-600);
  --text-tertiary-hover: var(--gray-700);
  --text-quaternary:    var(--gray-500);
  --text-disabled:      var(--gray-500);
  --text-placeholder:   var(--gray-500);
  --text-brand-primary: var(--brand-900);
  --text-brand-secondary: var(--brand-700);
  --text-brand-tertiary: var(--brand-600);
  --text-error-primary: var(--error-600);
  --text-success-primary: var(--success-600);
  --text-white:         var(--base-white);

  --bg-primary:         var(--base-white);
  --bg-primary-hover:   var(--gray-50);
  --bg-primary-alt:     var(--base-white);
  --bg-secondary:       var(--gray-50);
  --bg-secondary-hover: var(--gray-100);
  --bg-tertiary:        var(--gray-100);
  --bg-quaternary:      var(--gray-200);
  --bg-active:          var(--gray-50);
  --bg-disabled:        var(--gray-100);
  --bg-brand-primary:   var(--brand-50);
  --bg-brand-secondary: var(--brand-100);
  --bg-brand-solid:     var(--brand-600);
  --bg-brand-solid-hover: var(--brand-700);
  --bg-error-primary:   var(--error-50);
  --bg-success-primary: var(--success-50);
  --bg-overlay:         rgba(12, 17, 29, 0.7);

  --border-primary:     var(--gray-300);
  --border-secondary:   var(--gray-200);
  --border-tertiary:    var(--gray-100);
  --border-disabled:    var(--gray-300);
  --border-brand:       var(--brand-500);
  --border-brand-solid: var(--brand-600);
  --border-error:       var(--error-500);

  --fg-primary:         var(--gray-900);
  --fg-secondary:       var(--gray-700);
  --fg-tertiary:        var(--gray-600);
  --fg-quaternary:      var(--gray-500);
  --fg-quinary:         var(--gray-400);
  --fg-white:           var(--base-white);
  --fg-disabled:        var(--gray-400);
  --fg-brand-primary:   var(--brand-600);
  --fg-brand-secondary: var(--brand-500);
  --fg-error-primary:   var(--error-600);
  --fg-success-primary: var(--success-600);

  --focus-ring:         var(--brand-500);
  --focus-ring-error:   var(--error-500);

  /* --- Typography ---------------------------------------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
    Consolas, monospace;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;

  --display-2xl-size: 72px;  --display-2xl-line: 90px;  --display-2xl-tracking: -0.02em;
  --display-xl-size:  60px;  --display-xl-line:  72px;  --display-xl-tracking: -0.02em;
  --display-lg-size:  48px;  --display-lg-line:  60px;  --display-lg-tracking: -0.02em;
  --display-md-size:  36px;  --display-md-line:  44px;  --display-md-tracking: -0.02em;
  --display-sm-size:  30px;  --display-sm-line:  38px;  --display-sm-tracking: 0;
  --display-xs-size:  24px;  --display-xs-line:  32px;  --display-xs-tracking: 0;

  --text-xl-size: 20px;  --text-xl-line: 30px;
  --text-lg-size: 18px;  --text-lg-line: 28px;
  --text-md-size: 16px;  --text-md-line: 24px;
  --text-sm-size: 14px;  --text-sm-line: 20px;
  --text-xs-size: 12px;  --text-xs-line: 18px;

  /* --- Spacing & radius ---------------------------------- */
  --radius-none: 0px; --radius-xxs: 2px; --radius-xs: 4px; --radius-sm: 6px;
  --radius-md: 8px; --radius-lg: 10px; --radius-xl: 12px; --radius-2xl: 16px;
  --radius-3xl: 20px; --radius-4xl: 24px; --radius-full: 9999px;

  --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1440px;

  /* --- Elevation ----------------------------------------- */
  --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0px 1px 3px 0px rgba(16, 24, 40, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);
  --shadow-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
  --shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
  --shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
  --shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);
}

/* --- Dark theme (used by 404 / auth toggles, harmless elsewhere) --- */
[data-theme="dark"], .dark {
  --text-primary: var(--gray-50); --text-secondary: var(--gray-300);
  --text-tertiary: var(--gray-400); --text-quaternary: var(--gray-400);
  --text-placeholder: var(--gray-400);
  --bg-primary: var(--gray-950); --bg-primary-hover: var(--gray-800);
  --bg-primary-alt: var(--gray-900); --bg-secondary: var(--gray-900);
  --bg-secondary-hover: var(--gray-800); --bg-tertiary: var(--gray-800);
  --bg-quaternary: var(--gray-700); --bg-disabled: var(--gray-800);
  --border-primary: var(--gray-700); --border-secondary: var(--gray-800);
  --border-tertiary: var(--gray-800);
  --fg-primary: var(--base-white); --fg-secondary: var(--gray-300);
  --fg-tertiary: var(--gray-400); --fg-quaternary: var(--gray-400);
  --fg-quinary: var(--gray-500);
}

/* --- Aizy brand override: cobalt ramp (primary #2563eb) --- */
:root {
  --brand-25:#f5f9ff; --brand-50:#eff4ff; --brand-100:#dbe6fe; --brand-200:#bdd1fd;
  --brand-300:#93b4fa; --brand-400:#6090f6; --brand-500:#3971ed; --brand-600:#2563eb;
  --brand-700:#1d4ed8; --brand-800:#1e40af; --brand-900:#152e75;
  --shadow-focus-brand:0px 0px 0px 4px rgba(37,99,235,0.22);
  --focus-ring-shadow:rgba(37,99,235,0.22);
  --text-primary:#07182e; --text-secondary:#1f3047;
}

/* --- Base reset ------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; max-width: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg-primary);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--brand-100); color: var(--brand-900); }
input::placeholder { color: var(--text-placeholder); }

/* Type helper classes */
.tx-display-2xl { font: var(--weight-semibold) var(--display-2xl-size)/var(--display-2xl-line) var(--font-sans); letter-spacing: var(--display-2xl-tracking); }
.tx-display-xl  { font: var(--weight-semibold) var(--display-xl-size)/var(--display-xl-line) var(--font-sans); letter-spacing: var(--display-xl-tracking); }
.tx-display-lg  { font: var(--weight-semibold) var(--display-lg-size)/var(--display-lg-line) var(--font-sans); letter-spacing: var(--display-lg-tracking); }
.tx-display-md  { font: var(--weight-semibold) var(--display-md-size)/var(--display-md-line) var(--font-sans); letter-spacing: var(--display-md-tracking); }

/* --- Keyframes (call demo, marquees, accordions) --------- */
@keyframes aizy-spin { to { transform: rotate(360deg); } }
@keyframes aizy-bar { 0%,100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@keyframes aizy-ping { 0% { transform: scale(1); opacity: .5; } 70%,100% { transform: scale(2.2); opacity: 0; } }
@keyframes aizy-ring { 0%,60%,100% { transform: rotate(0); } 5%,25% { transform: rotate(-13deg); } 15%,35% { transform: rotate(13deg); } 45% { transform: rotate(0); } }
@keyframes aizy-slidedown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes aizy-marq-l { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes aizy-marq-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes aizy-floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
/* recommended plan: a colour wave that travels around the border.
   The registered angle interpolates so the conic gradient's start
   rotates smoothly (a static multicolour rim where @property is unsupported). */
@property --aizy-ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes aizy-border-flow { to { --aizy-ang: 360deg; } }
/* mobile polish: button glint, floating annotations, headline shimmer, flowing timeline */
@keyframes aizy-sheen { 0% { transform: translateX(-180%) skewX(-18deg); } 55%, 100% { transform: translateX(340%) skewX(-18deg); } }
@keyframes aizy-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes aizy-bob-tilt { 0%, 100% { transform: rotate(-7deg) translateY(0); } 50% { transform: rotate(-7deg) translateY(-3px); } }
@keyframes aizy-textshimmer { to { background-position: 200% center; } }
@keyframes aizy-lineflow { to { background-position: 0 14px; } }
@keyframes aizy-pop { 0% { opacity: 0; transform: scale(.82) translateY(8px); } 100% { opacity: 1; transform: none; } }

/* Horizontal marquee track (showcase) */
.aizy-marq { display: flex; gap: 22px; width: max-content; will-change: transform; }
.aizy-marq.l { animation: aizy-marq-l 58s linear infinite; }
.aizy-marq.r { animation: aizy-marq-r 66s linear infinite; }
.aizy-marqmask:hover .aizy-marq { animation-play-state: paused; }

/* Hide marquee scrollbars */
[data-demo-track] { scrollbar-width: none; -ms-overflow-style: none; }
[data-demo-track]::-webkit-scrollbar { display: none; }

/* --- Scroll reveal (flash-free: html.reveal-js set in <head>) --- */
html.reveal-js [data-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
html.reveal-js [data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.reveal-js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .aizy-marq { animation: none !important; }
}

/* --- Hover affordances (replace the JS hover the export baked in) --- */
[style*="--hov-bg"]:hover { background: var(--hov-bg) !important; }
nav.landing-nav a:hover { color: var(--text-primary); background: var(--bg-primary-hover); }
#lang-toggle:hover { background: var(--bg-primary-hover); }
a[href="#hero-input"]:hover { transform: translateY(-1px); }
.hero-pill:focus-within { border-color: var(--brand-400); box-shadow: 0 0 0 4px rgba(37,99,235,.12), var(--shadow-md); }
.hero-pill:hover { box-shadow: var(--shadow-md); }
#hero-go:hover { background: var(--brand-700); }

/* --- Language dropdown ------------------------------------ */
.lang-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 132px;
  background: #fff; border: 1px solid var(--border-secondary); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 6px; z-index: 90; display: none; }
.lang-menu.open { display: block; animation: aizy-slidedown .18s ease both; }
.lang-menu a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius-md);
  font-size: 14px; font-weight: 600; color: var(--text-secondary); text-decoration: none; }
.lang-menu a:hover { background: var(--bg-primary-hover); }
.lang-menu a[aria-current="true"] { color: var(--brand-600); }

/* --- Responsive bento / steps (from the export) --- */
@media (max-width: 860px) {
  [data-bento] { grid-template-columns: 1fr !important; }
  [data-bento] [data-span] { grid-column: auto !important; }
}
@media (max-width: 980px) { [data-steps] { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 560px) { [data-steps] { grid-template-columns: 1fr !important; } }

/* --- Mobile (≤760px): header shows only logo + language ---
   (pricing/footer grids already collapse via their auto-fit min-widths) */
/* Centered nav is absolutely positioned — hide it before it can overlap the
   right-hand actions cluster on medium widths. */
@media (max-width: 980px) { nav.landing-nav { display: none !important; } }
@media (max-width: 760px) {
  header a[href="/account/login"]:not(.mobile-menu__login),
  header a[href="#hero-input"]:not(.mobile-menu__cta),
  header span[style*="margin: 0px 4px"] { display: none !important; }
}

/* --- Burger + mobile slide-down menu (≤980px, where the nav hides) --- */
.landing-burger { display: none; align-items: center; justify-content: center; width: 40px; height: 40px;
  border: none; background: transparent; color: var(--text-primary); border-radius: var(--radius-md); cursor: pointer; }
.landing-burger:hover { background: var(--bg-primary-hover); }
.landing-burger__close { display: none; }
.landing-burger.open .landing-burger__open { display: none; }
.landing-burger.open .landing-burger__close { display: block; }
@media (max-width: 980px) { .landing-burger { display: inline-flex; } }

.mobile-menu { display: none; position: absolute; top: 100%; left: 0; right: 0;
  background: #fff; border-bottom: 1px solid var(--border-secondary); box-shadow: var(--shadow-lg);
  padding: 6px 20px 18px; }
.mobile-menu.open { display: block; animation: aizy-slidedown .2s ease both; }
.mobile-menu__link { display: block; padding: 14px 2px; font-size: 16px; font-weight: 600;
  color: var(--text-secondary); text-decoration: none; border-bottom: 1px solid var(--border-tertiary); }
.mobile-menu__link:hover, .mobile-menu__link:active { color: var(--brand-700); }
.mobile-menu__foot { display: flex; gap: 10px; margin-top: 16px; }
.mobile-menu__login, .mobile-menu__cta { flex: 1 1 0%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; padding: 12px 10px; border-radius: var(--radius-md); text-decoration: none; white-space: nowrap; }
.mobile-menu__login { color: var(--text-secondary); background: #fff; border: 1px solid var(--border-primary); }
.mobile-menu__cta { color: #fff; background: var(--brand-600); box-shadow: 0 6px 16px -8px rgba(37,99,235,.6); }

/* ============================================================
   Hero — two-column "wow" header: gradient headline + handwritten
   annotation on the left, glass sound-vortex + live demo card on
   the right. Powers the website→onboarding funnel (#hero-input).
   ============================================================ */
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 48px; }

/* left column ------------------------------------------------ */
.hero-copy { max-width: 620px; }
.hero-badge { display: inline-flex; align-items: center; gap: 9px; padding: 6px 14px 6px 11px; margin: 0 0 24px;
  background: #fff; border: 1px solid var(--border-secondary); border-radius: 999px; box-shadow: var(--shadow-xs);
  font-size: 13px; font-weight: 600; color: var(--text-secondary); letter-spacing: -.005em; }
.hero-badge__dot { position: relative; display: inline-flex; width: 8px; height: 8px; flex-shrink: 0; }
.hero-badge__dot span:first-child { position: absolute; inset: 0; border-radius: 50%; background: var(--brand-400); animation: aizy-ping 1.8s ease-out infinite; }
.hero-badge__dot span:last-child { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-600); }

.hero-h1 { position: relative; font-weight: 800; font-size: clamp(34px, 4.6vw, 60px); line-height: 1.05; letter-spacing: -.03em;
  color: var(--text-primary); margin: 0 0 22px; text-wrap: balance; }
.hero-h1__l1 { display: block; }
.hero-h1__l2 { display: inline; }
.hero-word { font-weight: 800; }
.hero-word--grad { background: linear-gradient(96deg, #7f56d9 0%, #3971ed 60%, #2563eb 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.hero-word--blue { color: var(--brand-600); }
.hero-emwrap { position: relative; display: inline-block; }
.hero-underline { position: absolute; left: 0; right: 6px; bottom: -0.24em; width: 100%; height: 0.34em; overflow: visible;
  opacity: 0; transform: scaleX(.4); transform-origin: left center; transition: opacity .5s ease .5s, transform .7s cubic-bezier(.16,1,.3,1) .5s; }
html.reveal-js .hero-h1.in .hero-underline, html:not(.reveal-js) .hero-underline { opacity: 1; transform: scaleX(1); }

/* handwritten "важно" annotation */
.hero-annot { position: absolute; top: -0.62em; right: -0.3em; display: inline-flex; align-items: flex-start; gap: 2px;
  pointer-events: none; transform: rotate(-7deg); }
.hero-annot__word { font-family: "Caveat", cursive; font-weight: 700; font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1; color: var(--brand-600); white-space: nowrap; }
.hero-annot__arrow { width: clamp(34px, 3.8vw, 50px); height: auto; margin-top: 2px; }
/* hidden on cramped tablet widths; ≤760px it comes back with mobile placement */
@media (max-width: 1120px) and (min-width: 761px) { .hero-annot { display: none; } }

.hero-sub { font-size: clamp(16px, 1.55vw, 19px); line-height: 1.55; color: var(--text-tertiary);
  max-width: 500px; margin: 0 0 30px; text-wrap: pretty; }

/* funnel pill + secondary link */
.hero-actions { max-width: 540px; }
.hero-pill { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 18px; background: #fff;
  border: 1px solid var(--border-primary); border-radius: var(--radius-full); box-shadow: var(--shadow-sm);
  transition: box-shadow .18s, border-color .18s; }
.hero-pill__icon { display: inline-flex; color: var(--fg-quaternary); flex-shrink: 0; }
.hero-pill__input { flex: 1 1 0%; min-width: 0; border: none; outline: none; background: transparent;
  font-family: var(--font-sans); font-size: 16.5px; color: var(--text-primary); }
.hero-pill__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0;
  background: linear-gradient(180deg, #3971ed, #2563eb); color: #fff; font-size: 15px; font-weight: 650;
  padding: 12px 22px; border: none; border-radius: var(--radius-full); cursor: pointer;
  box-shadow: 0 1px 2px rgba(7,24,46,.1), 0 10px 22px -8px rgba(37,99,235,.75); white-space: nowrap; transition: filter .15s, transform .15s; }
.hero-pill__btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.hero-underrow { display: flex; align-items: center; gap: 22px; min-height: 22px; margin-top: 14px; padding-left: 4px; }
.hero-status { font-size: 14px; color: transparent; transition: color .2s; }
.hero-status:empty { display: none; }
.hero-secondary { position: relative; font-size: 15px; font-weight: 600; color: var(--text-secondary); text-decoration: none; }
.hero-secondary::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: currentColor; opacity: .35; transition: opacity .15s; }
.hero-secondary:hover { color: var(--brand-700); }
.hero-secondary:hover::after { opacity: 1; }

/* trust row */
.hero-trust { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 30px;
  font-size: 14px; font-weight: 500; color: var(--text-tertiary); }
.hero-trust__item { display: inline-flex; align-items: center; gap: 8px; }
.hero-trust__ic { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  flex-shrink: 0; border-radius: 8px; background: var(--brand-50); color: var(--brand-600); }
.hero-trust__sep { width: 1px; height: 18px; background: var(--border-secondary); }

/* right column: glass sound-vortex ---------------------------- */
.hero-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 460px; }
.hero-wave { position: relative; width: min(100%, 520px); aspect-ratio: 1 / 1; }
.hero-wave__glow { position: absolute; inset: 6% 6% 10% 6%; border-radius: 50%;
  background: radial-gradient(circle at 52% 40%, rgba(96,144,246,.55), rgba(37,99,235,.12) 55%, transparent 72%);
  filter: blur(6px); }
.hero-wave__svg { position: relative; width: 100%; height: 100%; display: block; filter: drop-shadow(0 30px 50px rgba(37,99,235,.28));
  animation: aizy-floaty 6s ease-in-out infinite; }
.hero-wave__pill { position: absolute; left: 8%; bottom: 12%; display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 14px; background: rgba(255,255,255,.85); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.7);
  border-radius: 999px; box-shadow: 0 10px 26px -12px rgba(7,24,46,.4); font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.hero-wave__eq { display: inline-flex; align-items: flex-end; gap: 2.5px; height: 15px; }
.hero-wave__eq span { width: 3px; border-radius: 2px; background: var(--brand-600); transform-origin: bottom; }
.hero-wave__eq span:nth-child(1) { height: 40%; animation: aizy-bar .9s ease-in-out -0.1s infinite; }
.hero-wave__eq span:nth-child(2) { height: 90%; animation: aizy-bar .9s ease-in-out -0.5s infinite; }
.hero-wave__eq span:nth-child(3) { height: 60%; animation: aizy-bar .9s ease-in-out -0.2s infinite; }
.hero-wave__eq span:nth-child(4) { height: 100%; animation: aizy-bar .9s ease-in-out -0.7s infinite; }
.hero-wave__eq span:nth-child(5) { height: 55%; animation: aizy-bar .9s ease-in-out -0.35s infinite; }

/* floating live demo card, overlapping the vortex */
.hero-demo { position: absolute; right: -2%; top: 8%; width: min(88%, 300px); background: #fff;
  border: 1px solid var(--border-secondary); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl);
  padding: 16px; z-index: 2; animation: aizy-floaty 6s ease-in-out infinite; animation-delay: -3s; }

/* demo-call card states (idle → connecting → on-line → ended), Live-Call design */
.dc-idle { display: flex; align-items: center; gap: 13px; }
.dc-accept { position: relative; width: 52px; height: 52px; flex-shrink: 0; border: none; border-radius: 50%;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #5b8bf5 0%, #2e6af0 45%, #1d4ed8 100%);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.45), 0 10px 22px -8px rgba(37,99,235,.8); }
.dc-accept__ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--brand-400);
  animation: aizy-ping 1.8s ease-out infinite; }
.dc-accept > svg { position: relative; transform-origin: center; animation: aizy-ring 1.8s ease-in-out infinite; }
.dc-spinner { width: 19px; height: 19px; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff;
  border-radius: 50%; animation: aizy-spin .8s linear infinite; }
.dc-done { width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%; background: var(--success-50);
  border: 1px solid var(--success-200); color: var(--success-600);
  display: inline-flex; align-items: center; justify-content: center; }
.dc-idle__t { display: flex; flex-direction: column; gap: 2px; flex: 1 1 0%; min-width: 0; text-align: left; }
.dc-kicker { font-size: 12px; color: var(--text-quaternary); }
.dc-name { font-size: 15.5px; font-weight: 700; color: var(--text-primary); letter-spacing: -.01em; }
.dc-hint { font-size: 12.5px; font-weight: 600; color: var(--brand-700); }
.dc-timer { flex-shrink: 0; font-family: var(--font-mono); font-size: 15px; font-weight: 700;
  color: var(--brand-600); font-variant-numeric: tabular-nums; }
.dc-call { display: flex; flex-direction: column; gap: 11px; animation: aizy-slidedown .3s ease both; }
.dc-call__hd { display: flex; align-items: center; gap: 9px; }
.dc-title { flex: 1 1 0%; font-size: 15.5px; font-weight: 750; color: var(--text-primary); letter-spacing: -.01em; }
.dc-sub { font-size: 12px; color: var(--text-quaternary); margin-top: -7px; }
.dc-biz { display: flex; align-items: center; gap: 10px; }
.dc-biz__ic { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 12px; background: linear-gradient(140deg, var(--brand-100), #ece6fd); }
.dc-biz__ic svg { stroke: var(--brand-600); }
.dc-biz__t { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; min-width: 0; }
.dc-biz__t b { font-size: 14px; font-weight: 700; color: var(--text-primary); letter-spacing: -.01em; }
.dc-ok { display: flex; align-items: center; gap: 10px; padding: 11px 13px;
  background: var(--success-50); border: 1px solid var(--success-200); border-radius: 13px; }
.dc-ok__ic { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  flex-shrink: 0; border-radius: 50%; background: var(--success-500); }
.dc-ok__t { display: flex; flex-direction: column; }
.dc-ok__t b { font-size: 13px; font-weight: 700; color: var(--success-800); }
.dc-ok__t i { font-style: normal; font-size: 12px; color: var(--success-700); }
.dc-live { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; font-size: 11px; font-weight: 700;
  color: var(--success-700); background: var(--success-50); border: 1px solid var(--success-200);
  border-radius: 999px; padding: 4px 9px; }
.dc-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--success-500); }
.dc-call__hd .dc-name { flex: 1 1 0%; min-width: 0; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-wave { display: flex; align-items: center; gap: 2.5px; height: 36px; }
.dc-wave span { flex: 1 1 0%; min-width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, #7f56d9, #2563eb); opacity: .8; transform-origin: center;
  animation: aizy-bar 1.1s ease-in-out infinite; }
.dc-msg { display: flex; align-items: flex-start; gap: 8px; }
.dc-chip { flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--brand-700);
  background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: 999px; padding: 3px 8px; }
.dc-txt { font-size: 13px; line-height: 1.45; color: var(--text-secondary); padding-top: 2px; }
.dc-msg--pending { opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.dc-msg--pending.show { opacity: 1; transform: none; }
/* end-call button — full-width danger action matching the .dc-accept polish (gradient + inset + shadow) */
.dc-hangup { margin-top: 5px; width: 100%; height: 46px; flex-shrink: 0; border: none; border-radius: 13px;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 14px; font-weight: 700; letter-spacing: -.01em; color: #fff;
  background: linear-gradient(180deg, #f4676b 0%, #e5484d 46%, #d43a3f 100%);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.28), 0 10px 22px -10px rgba(229,72,77,.75);
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease; }
.dc-hangup svg { flex-shrink: 0; }
.dc-hangup:hover { filter: brightness(1.05); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.3), 0 13px 26px -10px rgba(229,72,77,.85); }
.dc-hangup:active { transform: translateY(1px); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.2), 0 6px 14px -8px rgba(229,72,77,.7); }
.dc-hangup:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .hero-wave__svg, .hero-demo, .hero-wave__eq span, .hero-glass,
  .dc-accept__ring, .dc-accept > svg, .dc-wave span { animation: none !important; }
  .hero-underline { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-copy { max-width: none; }
  .hero-sub, .hero-actions { max-width: 560px; }
  .hero-visual { min-height: 0; order: 2; }
  .hero-wave { width: min(92%, 440px); }
  .hero-demo { right: 0; top: 6%; }
}
@media (max-width: 560px) {
  .hero-pill { flex-wrap: wrap; border-radius: 20px; padding: 12px; }
  .hero-pill__input { width: 100%; padding: 2px 4px 8px; }
  .hero-pill__btn { width: 100%; justify-content: center; }
  .hero-demo { position: static; width: 100%; margin: 18px auto 0; }
  .hero-visual { flex-direction: column; }
}

/* ============================================================
   Mobile hero (≤760px) — mockup layout: glass 3D object bleeding
   off the right edge, "важно" annotation back on, capsule CTA that
   reveals the URL pill on tap, bordered spread-out trust row.
   ============================================================ */
.hero-glass { display: none; }

@media (max-width: 760px) {
  /* tight gap between the fixed header and the headline */
  section#top { padding: 40px 20px 48px !important; }
  .hero-badge { display: none; }
  .hero-copy { position: relative; }
  .hero-grid { gap: 34px; }

  /* glass object sits behind the copy, half off-screen to the right,
     aligned with the sub column so text never lands on it */
  .hero-glass { display: block; position: absolute; z-index: 0; top: 88px; right: max(-27vw, -160px);
    width: min(66vw, 330px); height: auto; pointer-events: none; user-select: none;
    filter: drop-shadow(0 26px 44px rgba(37,99,235,.28)); animation: aizy-floaty 7s ease-in-out infinite; }
  .hero-h1, .hero-sub, .hero-actions, .hero-trust { position: relative; z-index: 1; }

  /* headline is the hero: big, wraps into a 3-4 line cascade */
  .hero-h1 { font-size: clamp(31px, 8.8vw, 44px); line-height: 1.1; margin-bottom: 18px; }
  /* "важно" sits beside line 1 (its right half is free after the wrap),
     never above the headline where the fixed navbar would cover it */
  .hero-annot { display: inline-flex; flex-direction: row-reverse; top: -0.35em; right: 1%; align-items: flex-start; gap: 2px; }
  .hero-annot__word { font-size: 23px; }
  .hero-annot__arrow { width: 38px; transform: none; margin-top: 12px; }

  /* short sub sits fully left of the glass object */
  .hero-sub { max-width: 55%; font-size: 16px; margin-bottom: 28px; }

  /* URL funnel — clean card: filled input field + glossy capsule submit */
  .hero-pill { position: relative; z-index: 1; flex-wrap: wrap; gap: 10px; padding: 12px;
    border-radius: 26px; border-color: var(--border-secondary);
    box-shadow: 0 22px 44px -26px rgba(7,24,46,.4); }
  .hero-pill__icon { display: none; }
  .hero-pill__input { flex: 1 1 100%; width: auto; background: var(--bg-secondary);
    border: 1px solid var(--border-secondary); border-radius: 999px; padding: 13px 17px; font-size: 15.5px; }
  .hero-pill__input:focus { background: #fff; border-color: var(--brand-400); }
  .hero-pill__btn { width: 100%; background: linear-gradient(180deg, #5b8bf5 0%, #2e6af0 45%, #1d4ed8 100%);
    font-size: 15.5px; font-weight: 700; padding: 15px 22px;
    box-shadow: inset 0 1.5px 0 rgba(255,255,255,.45), inset 0 -8px 14px rgba(13,42,148,.28),
      0 14px 28px -10px rgba(37,99,235,.75); }
  .hero-underrow { padding-left: 2px; }

  /* trust row — hairline top border, plain blue icons, spread out.
     Font scales with the viewport so all three labels hold one line
     down to 360px-wide phones. */
  .hero-trust { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--border-secondary);
    justify-content: space-between; gap: 4px; font-size: clamp(10.5px, 3vw, 12.5px); white-space: nowrap; }
  .hero-trust__item { gap: 5px; }
  .hero-trust__ic { width: auto; height: auto; background: transparent; border-radius: 0; color: var(--brand-600); }
  .hero-trust__ic svg { width: 14px; height: 14px; }
  .hero-trust__sep { height: 20px; }

  /* declutter the mobile hero: drop the trust row (Пилот за 1 день /
     Ваш номер остаётся / Без карты) and the stat tiles (2 сек / 24/7 /
     98%) — they stay on desktop, hidden here only. */
  .hero-trust { display: none; }
  .hero-visual .livecall__stats { display: none; }

  /* SVG vortex replaced by the glass object; the interactive "incoming
     call" demo card stays — Aizy "calls you" right on the first screen */
  .hero-visual { display: flex; flex-direction: column; gap: 0; min-height: 0; transform: none !important; }
  .hero-wave { display: none; }
  .hero-demo { position: relative; width: 100%; margin: 20px 0 0; animation: none;
    border-radius: 18px; box-shadow: 0 20px 44px -24px rgba(7,24,46,.35); }
}

/* ============================================================
   Mobile landing sections (≤760px) — per the mobile mockup:
   "Aizy Live Call" card, benefits deco + widget chips, demo-call
   photo carousel, step mini-widgets. Everything below is hidden
   on desktop so the wide layout stays untouched.
   ============================================================ */
.ben-glass, .ben-annot, .ben-chips, .ben-tags, .ben-bar, .how-m, .cta-anno { display: none; }

/* ============================================================
   Desktop step-card widgets (#how [data-steps]) — bring the mobile
   timeline's mini-mockups onto the wide 4-up launch grid so the
   cards are as rich as the mobile version instead of an empty void
   under each title. The parent grid is hidden ≤760 (replaced there
   by the .how-m vertical timeline), so these only paint on desktop.
   ============================================================ */
.step-w { margin-top: auto; padding-top: 22px; display: flex; flex-direction: column; gap: 9px; }

/* 01 — website URL pill + recognised chips */
.step-url { display: flex; align-items: center; gap: 8px; background: var(--bg-secondary);
  border: 1px solid var(--border-secondary); border-radius: 999px; padding: 8px 12px;
  font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.step-url > svg:first-child { color: var(--fg-quaternary); flex-shrink: 0; }
.step-url i { font-style: normal; flex: 1 1 0%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step-url > svg:last-child { flex-shrink: 0; }
.step-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.step-chips i { font-style: normal; font-size: 12px; font-weight: 600; color: var(--brand-700);
  background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: 999px; padding: 5px 11px; }

/* 02 — test-call player */
.step-w--row { flex-direction: row; align-items: center; gap: 10px; background: var(--bg-secondary);
  border: 1px solid var(--border-secondary); border-radius: 14px; padding: 11px 13px; }
.step-play { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 50%; background: linear-gradient(180deg,#3971ed,#2563eb); box-shadow: 0 6px 14px -6px rgba(37,99,235,.75); }
.step-eq { display: inline-flex; align-items: flex-end; gap: 3px; flex: 1 1 0%; height: 24px; }
.step-eq i { flex: 1 1 0%; min-width: 2px; border-radius: 2px; background: linear-gradient(180deg,#7f56d9,#2563eb);
  opacity: .8; transform-origin: bottom; animation: aizy-bar 1.1s ease-in-out infinite; }
.step-eq i:nth-child(1) { height: 55%; animation-delay: -.1s; }
.step-eq i:nth-child(2) { height: 90%; animation-delay: -.6s; }
.step-eq i:nth-child(3) { height: 45%; animation-delay: -.3s; }
.step-eq i:nth-child(4) { height: 100%; animation-delay: -.8s; }
.step-eq i:nth-child(5) { height: 60%; animation-delay: -.2s; }
.step-eq i:nth-child(6) { height: 80%; animation-delay: -.5s; }
.step-eq i:nth-child(7) { height: 50%; animation-delay: -.4s; }
.step-ok { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; font-size: 12px; font-weight: 700;
  color: var(--success-700); background: var(--success-50); border: 1px solid var(--success-200); border-radius: 999px; padding: 5px 10px; }
.step-ok i { font-style: normal; }

/* 03 — mini plan card */
.step-w--plan { flex-direction: row; align-items: center; gap: 8px 10px; flex-wrap: wrap;
  background: linear-gradient(120deg, var(--brand-50), #fff); border: 1px solid var(--brand-100); border-radius: 14px; padding: 13px 15px; }
.step-plan__l { display: flex; flex-direction: column; gap: 2px; flex: 1 1 0%; min-width: 0; }
.step-plan__l b { font-size: 15px; font-weight: 750; color: var(--text-primary); }
.step-plan__l i { font-style: normal; font-size: 12px; color: var(--text-quaternary); }
.step-plan__r { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
.step-plan__r b { font-size: 16px; font-weight: 750; color: var(--brand-700); letter-spacing: -.01em; }
.step-plan__r i { font-style: normal; font-size: 11px; color: var(--text-quaternary); }
.step-plan__rec { flex: 1 1 100%; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 11.5px; font-weight: 700; color: var(--brand-700); background: #fff; border: 1px solid var(--brand-200);
  border-radius: 999px; padding: 5px 10px; }

/* 04 — fresh lead row (sits on the dark brand card); CRM badge wraps
   to its own line so the name gets the full first row */
.step-w--lead { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 9px; background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22); border-radius: 12px; padding: 11px 12px; }
.step-lead__av { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 50%; background: rgba(255,255,255,.92); color: var(--brand-700); font-size: 11px; font-weight: 700; }
.step-lead__t { display: flex; flex-direction: column; flex: 1 1 0%; min-width: 0; }
.step-lead__t b { font-size: 13.5px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step-lead__t i { font-style: normal; font-size: 11.5px; color: rgba(255,255,255,.72); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step-lead__crm { flex: 1 1 100%; display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 11.5px; font-weight: 700;
  color: #fff; background: rgba(255,255,255,.18); border-radius: 999px; padding: 6px 10px; }
.step-lead__crm svg { width: 13px; height: 13px; }
.step-lead__crm i { font-style: normal; }

/* tighten the roomy icon→title gap now that each card has a bottom widget */
#how [data-steps] > div > span[style*="margin-bottom: 46px"] { margin-bottom: 22px !important; }

/* ============================================================
   Desktop demo showcase (#showcase) — swap the scrolling niche
   marquees for the mobile photo demo cards (3-up, click-to-listen)
   so the "real calls" section matches the mobile design. Mobile
   (≤760) keeps its own scroll-carousel rules below.
   ============================================================ */
.show-marquees { display: none !important; }
.showcar-sub { display: block; font-size: 17px; line-height: 1.55; color: var(--text-tertiary); margin: 12px 0 0; }
.showcar { display: block; position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.showcar__track { display: flex; justify-content: center; gap: 26px; }
.showcar__card { flex: 0 0 300px; max-width: 300px; }
.showcar__photo { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 3 / 3.9;
  box-shadow: 0 22px 46px -24px rgba(7,24,46,.5); }
.showcar__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.showcar__listen { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px; border: none; border-radius: 999px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(6px); color: var(--brand-700);
  font-family: var(--font-sans); font-size: 13.5px; font-weight: 700; cursor: pointer;
  box-shadow: 0 8px 20px -8px rgba(7,24,46,.5); white-space: nowrap; transition: background .15s, color .15s; }
.showcar__listen:hover { background: var(--brand-600); color: #fff; }
.showcar__listen .sc-ic-pause, .showcar__listen .sc-l-stop { display: none; }
.showcar__listen.on .sc-ic-play, .showcar__listen.on .sc-l-play { display: none; }
.showcar__listen.on .sc-ic-pause, .showcar__listen.on .sc-l-stop { display: inline; }
.showcar__listen.on { background: var(--brand-600); color: #fff; }
.showcar__card h3 { font-size: 18px; font-weight: 700; color: var(--text-primary); margin: 16px 0 3px; letter-spacing: -.01em; }
.showcar__k { font-size: 13px; font-weight: 600; color: var(--brand-700); margin-bottom: 7px; }
.showcar__card p { font-size: 14px; line-height: 1.5; color: var(--text-tertiary); margin: 0; }

/* "послушайте сами" hand annotation above the cards, arrow pointing down */
.show-anno { display: inline-flex; position: absolute; right: 9%; top: -26px; z-index: 3;
  flex-direction: column; align-items: flex-end; gap: 1px; pointer-events: none; }
.show-anno i { font-family: "Caveat", cursive; font-style: normal; font-weight: 700; font-size: 22px;
  line-height: 1.05; color: var(--brand-600); transform: rotate(-4deg); }
.show-anno svg { width: 30px; height: auto; }

/* ============================================================
   Desktop hero visual (≥761) — swap the SVG vortex for the same
   glass figure the mobile hero uses, keep the floating live-demo
   card, and surface the stat tiles + "live" hand-note. Scoped to
   min-width so the mobile hero rules (earlier in the file) win ≤760.
   ============================================================ */
.hero-dglass { display: none; }
@media (min-width: 761px) {
  .hero-dglass { display: block; width: min(100%, 440px); height: auto; margin: 0 auto;
    filter: drop-shadow(0 34px 54px rgba(37,99,235,.30)); animation: aizy-floaty 6s ease-in-out infinite; }
  .hero-wave { display: none; }
  .hero-visual { flex-direction: column; gap: 22px; min-height: 500px; }

  /* 3 stat tiles under the figure (2 сек / 24/7 / 98%) */
  .hero-visual .livecall__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; max-width: 440px; }
  .hero-visual .livecall__stats > div { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center;
    background: #fff; border: 1px solid var(--border-secondary); border-radius: 16px; padding: 14px 8px; box-shadow: var(--shadow-xs); }
  .hero-visual .livecall__stats b { font-size: 22px; font-weight: 750; color: var(--brand-600); letter-spacing: -.02em; }
  .hero-visual .livecall__stats span { font-size: 12px; color: var(--text-quaternary); }

  /* "live" hand-note riding the demo card's top-left corner */
  .hero-demo .dc-note { display: inline-flex; position: absolute; top: -17px; left: 18px; z-index: 3;
    align-items: flex-start; gap: 3px; pointer-events: none; }
  .hero-demo .dc-note i { font-family: "Caveat", cursive; font-style: normal; font-weight: 700; font-size: 23px; line-height: 1;
    color: var(--brand-600); transform: rotate(-6deg); }
  .hero-demo .dc-note svg { width: 22px; height: auto; margin-top: 7px; }
}

/* Uniform section title/subtitle sizing on mobile — every section's heading
   matches (the desktop inline styles use a few different clamp values). */
@media (max-width: 760px) {
  [data-i18n="ben_title"], #showcase h2, [data-i18n="step_title"],
  [data-i18n="price_title"], [data-i18n="faq_title"], [data-i18n="cta_title"] {
    font-size: 26px !important; line-height: 1.2 !important; letter-spacing: -0.02em !important;
  }
  [data-i18n="step_sub"], [data-i18n="price_sub"], [data-i18n="cta_sub"], .showcar-sub {
    font-size: 15px !important; line-height: 1.55 !important;
  }
}

/* Pricing on mobile: trim top whitespace, compact cards, breathing recommend outline */
@media (max-width: 760px) {
  section#pricing { padding: 40px 18px 48px !important; }
  #pricing [style*="margin-top: 40px"] { margin-top: 18px !important; gap: 14px !important; }
  #pricing [style*="padding: 30px 26px"] { padding: 22px 18px !important; }
  #pricing [style*="font-size: 36px"] { font-size: 30px !important; }
  #pricing ul[style*="gap: 11px"] { gap: 9px !important; margin-bottom: 18px !important; }
  /* recommended plan — flowing gradient border (wave running around the rim) */
  #pricing [style*="border: 2px solid var(--brand-600)"] { border-color: transparent !important; }
  #pricing [style*="border: 2px solid var(--brand-600)"]::before {
    content: ""; position: absolute; inset: -2px; border-radius: 18px; padding: 2px; pointer-events: none; z-index: 0;
    background: conic-gradient(from var(--aizy-ang), #2563eb, #7f56d9, #22d3ee, #60a5fa, #2563eb);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: aizy-border-flow 4s linear infinite;
  }
  /* thinner decorative separators between sections */
  div[aria-hidden][style*="height: 56px"] { height: 34px !important; }
}

/* ── Mobile animation polish (buttons, annotations, headline, timeline) ── */
@media (max-width: 760px) {
  /* periodic light glint sweeping across the primary CTAs */
  .how-cta-wrap { position: relative; }
  .hero-pill__btn, .how-cta, .mobile-menu__cta,
  a[data-i18n="cta_btn"], a[data-i18n="foot_cta"] { position: relative; overflow: hidden; }
  .hero-pill__btn::after, .how-cta::after, .mobile-menu__cta::after,
  a[data-i18n="cta_btn"]::after, a[data-i18n="foot_cta"]::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 50%; pointer-events: none; z-index: 1;
    transform: translateX(-180%) skewX(-18deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.62), transparent);
    animation: aizy-sheen 4.5s ease-in-out infinite; }
  .how-cta::after { animation-delay: 1.2s; }
  a[data-i18n="cta_btn"]::after { animation-delay: .6s; }
  a[data-i18n="foot_cta"]::after { animation-delay: 1.8s; }

  /* handwritten annotations gently float */
  .dc-note { animation: aizy-bob 3.4s ease-in-out infinite; }
  .ben-annot { animation: aizy-bob 3.9s ease-in-out infinite; }
  .show-anno { animation: aizy-bob 3.1s ease-in-out infinite; }
  .cta-anno { animation: aizy-bob 3.6s ease-in-out infinite; }
  .hero-annot { animation: aizy-bob-tilt 3.4s ease-in-out infinite; }

  /* hero gradient word shimmers slowly */
  .hero-word--grad { background-size: 220% auto; animation: aizy-textshimmer 4.5s linear infinite; }

  /* timeline connector: dashes flow downward */
  .how-rail::after { background: repeating-linear-gradient(180deg, var(--brand-300) 0 7px, transparent 7px 14px) !important;
    animation: aizy-lineflow 1.3s linear infinite; }

  /* stat tiles pop in with a stagger when revealed */
  .livecall__stats.in > div { animation: aizy-pop .5s cubic-bezier(.2,.8,.2,1.15) both; }
  .livecall__stats.in > div:nth-child(2) { animation-delay: .09s; }
  .livecall__stats.in > div:nth-child(3) { animation-delay: .18s; }
}

@media (prefers-reduced-motion: reduce) {
  #pricing [style*="border: 2px solid var(--brand-600)"]::before,
  .hero-pill__btn::after, .how-cta::after, .mobile-menu__cta::after,
  a:has(> [data-i18n="cta_btn"])::after, a:has(> [data-i18n="foot_cta"])::after,
  .dc-note, .ben-annot, .show-anno, .cta-anno, .hero-annot,
  .hero-word--grad, .how-rail::after, .livecall__stats.in > div { animation: none !important; }
}

@media (max-width: 760px) {

  /* ── hero stat tiles (above the incoming-call card) ─────── */
  .livecall__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }

  /* handwritten "live" rides the card's top-LEFT corner: visible,
     arrow dips DOWN onto the card, out of the content's way */
  .dc-note { display: inline-flex; position: absolute; top: -15px; left: 14px; z-index: 2;
    align-items: flex-start; gap: 2px; pointer-events: none; }
  .dc-note i { font-family: "Caveat", cursive; font-style: normal; font-weight: 700; font-size: 19px;
    line-height: 1; color: var(--brand-600); transform: rotate(-6deg); }
  .dc-note svg { width: 19px; height: auto; margin-top: 6px; }
  .livecall__stats > div { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
    background: #fff; border: 1px solid var(--border-secondary); border-radius: 16px; padding: 13px 6px; }
  .livecall__stats b { font-size: 19px; font-weight: 750; color: var(--brand-600); letter-spacing: -.02em; }
  .livecall__stats span { font-size: 11.5px; color: var(--text-quaternary); }

  /* ── Benefits: compact cards (desktop inline styles are too roomy) ── */
  section:has(.ben-head) { padding: 48px 20px 56px !important; }
  .ben-head { margin-bottom: 26px !important; }
  [data-bento] { gap: 10px !important; }
  [data-bento] > div { padding: 16px 15px !important; border-radius: 16px !important; }
  [data-bento] > div > span[aria-hidden] { font-size: 38px !important; top: 13px !important; right: 15px !important; } /* 01-04 watermark */
  [data-bento] > div > span:nth-of-type(2) { width: 36px !important; height: 36px !important; margin-bottom: 10px !important; border-radius: 10px !important; } /* icon tile */
  [data-bento] > div > span:nth-of-type(2) svg { width: 18px; height: 18px; }
  [data-bento] > div > h3 { font-size: 16px !important; margin-bottom: 6px !important; }
  [data-bento] > div > p { font-size: 13px !important; line-height: 1.5 !important; }
  [data-bento] > div > div[style*="margin-top: auto"] { padding-top: 13px !important; }
  [data-bento] span[style*="font-size: 50px"] { font-size: 32px !important; } /* the big 24/7 */
  [data-bento] span[style*="font-size: 72px"] { font-size: 38px !important; }

  /* ── Benefits: header deco + card widgets ───────────────── */
  .ben-head { text-align: left !important; padding-right: 96px; }
  .ben-glass { display: block; position: absolute; top: -14px; right: -34px; width: 132px; height: auto;
    pointer-events: none; filter: drop-shadow(0 14px 24px rgba(37,99,235,.25)); animation: aizy-floaty 7s ease-in-out infinite; }
  /* annotation ABOVE the glass object, arrow pointing DOWN onto it
     (arrow tip stops a few px short of the object — no overlap) */
  .ben-annot { display: inline-flex; position: absolute; right: 22px; top: -56px; z-index: 2; align-items: flex-start; gap: 4px; pointer-events: none; }
  .ben-annot i { font-family: "Caveat", cursive; font-style: normal; font-weight: 700; font-size: 18px; line-height: 1.1;
    color: var(--brand-600); transform: rotate(-5deg); max-width: 120px; text-align: right; }
  .ben-annot svg { width: 20px; height: auto; margin-top: 10px; }

  .ben-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 16px; }
  .ben-chip { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center;
    background: var(--bg-secondary); border: 1px solid var(--border-secondary); border-radius: 12px; padding: 10px 4px; color: var(--brand-600); }
  .ben-chip span { display: flex; flex-direction: column; }
  .ben-chip b { font-size: 12px; font-weight: 700; color: var(--text-primary); }
  .ben-chip i { font-style: normal; font-size: 10.5px; color: var(--text-quaternary); }

  .ben-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
  .ben-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--text-secondary);
    background: var(--bg-secondary); border: 1px solid var(--border-secondary); border-radius: 999px; padding: 6px 10px; }
  .ben-tag svg { color: var(--brand-600); flex-shrink: 0; }

  /* «Контроль и аналитика» bar removed from card 04 on mobile */
  .ben-bar { display: none !important; }

  /* ── Demo-call photo carousel ───────────────────────────── */
  /* trim the roomy top/bottom whitespace; keep the cards themselves as-is */
  section#showcase { padding: 44px 0 48px !important; }
  section#showcase > div[style*="margin: 0px auto 36px"] { margin-bottom: 42px !important; }
  .showcar-sub { display: block; font-size: 14.5px; line-height: 1.55; color: var(--text-tertiary); margin: 12px 0 0; }
  .showcar { display: block; position: relative; z-index: 1; }
  .showcar__track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 4px 20px 10px; scrollbar-width: none; -ms-overflow-style: none; }
  .showcar__track::-webkit-scrollbar { display: none; }
  .showcar__card { flex: 0 0 72vw; max-width: 300px; scroll-snap-align: center; }
  .showcar__photo { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 3 / 4.2;
    box-shadow: 0 18px 34px -20px rgba(7,24,46,.45); }
  .showcar__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .showcar__listen { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border: none; border-radius: 999px;
    background: rgba(255,255,255,.92); backdrop-filter: blur(6px); color: var(--brand-700);
    font-family: var(--font-sans); font-size: 13px; font-weight: 700; cursor: pointer;
    box-shadow: 0 8px 20px -8px rgba(7,24,46,.5); white-space: nowrap; }
  .showcar__listen .sc-ic-pause, .showcar__listen .sc-l-stop { display: none; }
  .showcar__listen.on .sc-ic-play, .showcar__listen.on .sc-l-play { display: none; }
  .showcar__listen.on .sc-ic-pause, .showcar__listen.on .sc-l-stop { display: inline; }
  .showcar__listen.on { background: var(--brand-600); color: #fff; }
  .showcar__card h3 { font-size: 16.5px; font-weight: 700; color: var(--text-primary); margin: 14px 0 2px; letter-spacing: -.01em; }
  .showcar__k { font-size: 12.5px; font-weight: 600; color: var(--brand-700); margin-bottom: 6px; }
  .showcar__card p { font-size: 13.5px; line-height: 1.5; color: var(--text-tertiary); margin: 0; }
  /* declutter showcase on mobile: drop the section subtitle and each
     card's description — title + kicker are enough */
  .showcar-sub { display: none !important; }
  .showcar__card p { display: none !important; }
  .show-marquees { display: none !important; }
  /* Убираем полосы-разделители секций (три точки + hairlines) — на мобильном
     секции идут сплошным плавным потоком, без визуального деления. */
  .lp-secdiv { display: none !important; }
  /* "послушайте сами" — dashed arrow in the gap above the cards, pointing down */
  .show-anno { display: inline-flex; position: absolute; right: 24px; top: -38px; z-index: 3;
    flex-direction: column; align-items: flex-end; gap: 1px; pointer-events: none; }
  .show-anno i { font-family: "Caveat", cursive; font-style: normal; font-weight: 700; font-size: 18px;
    line-height: 1.05; color: var(--brand-600); transform: rotate(-4deg); }
  .show-anno svg { width: 24px; height: auto; }

  /* ── Steps: mobile vertical timeline (mockup) — replaces desktop grid ── */
  section#how { background: var(--bg-secondary) !important; padding: 44px 18px 48px !important; }
  #how [data-steps], #how [style*="margin-top: 56px"] { display: none !important; }
  .how-m { display: block; }

  /* vertical timeline: icon rail + card */
  .how-tl { display: flex; flex-direction: column; gap: 16px; margin-top: 4px; }
  .how-row { display: flex; gap: 10px; align-items: stretch; }
  .how-rail { position: relative; width: 42px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; }
  .how-rail::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: 2px; top: 76px; bottom: -20px;
    background: var(--brand-200); border-radius: 2px; }
  .how-row:last-child .how-rail::after { display: none; }
  .how-ic { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%;
    background: var(--brand-50); border: none; }
  .how-n { position: relative; z-index: 1; margin-top: 8px; font-size: 15px; font-weight: 800; color: var(--brand-600);
    letter-spacing: -.02em; font-variant-numeric: tabular-nums; background: var(--bg-secondary); padding: 1px 3px; }
  .how-card { position: relative; flex: 1 1 0%; min-width: 0; background: #fff; border: 1px solid var(--border-secondary);
    border-radius: 18px; box-shadow: 0 6px 16px -14px rgba(7,24,46,.25); padding: 15px 14px 16px; }
  .how-card h3 { font-size: 16.5px; font-weight: 700; color: var(--text-primary); letter-spacing: -.01em; margin: 0 0 5px; }
  .how-card > p { font-size: 13px; line-height: 1.5; color: var(--text-tertiary); margin: 0; }
  .how-w { margin-top: 14px; }

  /* 01 — browser bar + chips */
  .how-browser { display: flex; align-items: center; gap: 7px; background: var(--bg-secondary); border: 1px solid var(--border-secondary);
    border-radius: 12px; padding: 7px 8px; }
  .how-dots i { width: 7px; height: 7px; border-radius: 50%; }
  .how-dots i:nth-child(1) { background: #ff5f57; }
  .how-dots i:nth-child(2) { background: #febc2e; }
  .how-dots i:nth-child(3) { background: #28c840; }
  .how-dots { display: inline-flex; gap: 3.5px; flex-shrink: 0; }
  .how-addr { display: inline-flex; align-items: center; gap: 5px; flex: 1 1 0%; min-width: 0; background: #fff;
    border: 1px solid var(--border-secondary); border-radius: 999px; padding: 4px 9px; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
  .how-addr svg { color: var(--fg-quaternary); flex-shrink: 0; }
  .how-addr i { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .how-ok { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; font-size: 11px; font-weight: 700;
    color: var(--success-700); background: var(--success-50); border: 1px solid var(--success-200); border-radius: 999px; padding: 4px 7px; }
  .how-ok i { font-style: normal; }
  .how-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
  .how-chips span { font-size: 11.5px; font-weight: 600; color: var(--brand-700); background: var(--brand-50);
    border: 1px solid var(--brand-100); border-radius: 999px; padding: 5px 11px; }

  /* 02 — audio player + voice/style */
  .how-player { display: flex; align-items: center; gap: 9px; background: var(--bg-secondary); border: 1px solid var(--border-secondary);
    border-radius: 12px; padding: 9px 11px; }
  .how-play { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0;
    border-radius: 50%; background: linear-gradient(180deg, #3971ed, #2563eb); box-shadow: 0 6px 14px -6px rgba(37,99,235,.75); }
  .how-eq { display: inline-flex; align-items: center; gap: 2.5px; flex: 1 1 0%; height: 22px; }
  .how-eq i { flex: 1 1 0%; min-width: 2px; border-radius: 2px; background: linear-gradient(180deg,#7f56d9,#2563eb); opacity: .8;
    transform-origin: center; animation: aizy-bar 1.1s ease-in-out infinite; }
  .how-ok__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success-500); }
  .how-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 9px; }
  .how-meta > span { display: inline-flex; align-items: center; gap: 4px; flex: 0 1 auto; min-width: 0; font-size: 11px; font-weight: 600; color: var(--text-secondary); }
  .how-meta > span svg { flex-shrink: 0; }
  .how-meta i { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* 03 — plan card */
  .how-plan { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px;
    background: linear-gradient(120deg, var(--brand-50), #fff); border: 1px solid var(--brand-100); border-radius: 14px; padding: 13px 14px; }
  .how-plan__l { display: flex; flex-direction: column; gap: 2px; }
  .how-plan__l b { font-size: 15px; font-weight: 750; color: var(--text-primary); }
  .how-plan__l i { font-style: normal; font-size: 11.5px; color: var(--text-quaternary); }
  .how-plan__l u { text-decoration: none; font-size: 15px; font-weight: 750; color: var(--brand-700); margin-top: 3px; }
  .how-plan__l u span { font-size: 11px; font-weight: 600; color: var(--text-quaternary); }
  .how-plan__rec { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; font-size: 11.5px; font-weight: 700;
    color: var(--brand-700); background: #fff; border: 1px solid var(--brand-200); border-radius: 999px; padding: 6px 11px; box-shadow: var(--shadow-xs); }
  .how-plan__rec svg { color: var(--brand-500); }
  .how-plan__rec i { font-style: normal; }

  /* 04 — fresh lead row */
  .how-lead { display: flex; align-items: center; gap: 10px; margin-top: 14px; background: var(--bg-secondary);
    border: 1px solid var(--border-secondary); border-radius: 12px; padding: 10px 12px; }
  .how-lead__av { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0;
    border-radius: 50%; background: var(--brand-100); color: var(--brand-700); font-size: 12px; font-weight: 700; }
  .how-lead__t { display: flex; flex-direction: column; flex: 1 1 0%; min-width: 0; }
  .how-lead__t b { font-size: 13.5px; font-weight: 700; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .how-lead__t i { font-style: normal; font-size: 11.5px; color: var(--text-quaternary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .how-lead__badge { flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--success-700);
    background: var(--success-50); border: 1px solid var(--success-200); border-radius: 999px; padding: 5px 10px; }
  .how-lead__badge i { font-style: normal; }

  /* bottom CTA + trust row */
  .how-cta { position: relative; display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 40px; padding: 16px 22px;
    background: linear-gradient(180deg, #5b8bf5 0%, #2e6af0 45%, #1d4ed8 100%); color: #fff; text-decoration: none;
    font-size: 16px; font-weight: 700; letter-spacing: -.01em; border-radius: 16px;
    box-shadow: inset 0 1.5px 0 rgba(255,255,255,.45), 0 16px 30px -12px rgba(37,99,235,.75); }
  .how-cta:active { transform: translateY(1px); }
  /* "старт за 1 день" — zigzag arrow pointing down at the button */
  .cta-anno { display: inline-flex; position: absolute; top: -38px; right: 16px; z-index: 3;
    flex-direction: column; align-items: flex-end; gap: 1px; pointer-events: none; }
  .cta-anno i { font-family: "Caveat", cursive; font-style: normal; font-weight: 700; font-size: 17px;
    line-height: 1.05; color: var(--brand-600); transform: rotate(-3deg); }
  .cta-anno svg { width: 22px; height: auto; }
  .how-trust { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 16px; }
  .how-trust > span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--text-tertiary); white-space: nowrap; }
  .how-trust > span > svg { color: var(--brand-600); flex-shrink: 0; }
  .how-trust > span > span { overflow: hidden; text-overflow: ellipsis; }
}

@media (prefers-reduced-motion: reduce) {
  .livecall__wave span, .how-eq i, .step-eq i, .ben-glass { animation: none !important; }
}

/* ============================================================
   Onboarding wizard (public, account-less) — 5-step shell reusing
   the same tokens as the landing. Steps: Распознавание · Ассистент ·
   Тариф · Аккаунт · Оплата.
   ============================================================ */
.onb-body { background: var(--bg-secondary); min-height: 100vh; }

.onb-top { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--border-secondary);
  background: rgba(255,255,255,.85); backdrop-filter: blur(10px); }
.onb-top__in { max-width: 1080px; margin: 0 auto; padding: 0 32px; height: 68px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.onb-brand { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.onb-brand img { height: 30px; width: auto; display: block; }
.onb-top__actions { display: flex; align-items: center; gap: 14px; }
.onb-stepcount { font-size: 13px; font-weight: 600; color: var(--text-quaternary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.onb-testbtn { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600;
  color: var(--brand-700); background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: 8px;
  padding: 8px 14px; cursor: pointer; transition: .15s; font-family: var(--font-sans); }
.onb-testbtn:hover { background: var(--brand-100); }
.onb-top__sep { width: 1px; height: 24px; background: var(--border-secondary); }
.onb-exit { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--text-tertiary); text-decoration: none; }
.onb-exit:hover { color: var(--text-primary); }
.onb-langpill { display: inline-flex; gap: 2px; }
.onb-langpill a { font-size: 12px; font-weight: 700; color: var(--text-quaternary); text-decoration: none; padding: 4px 7px; border-radius: 6px; }
.onb-langpill a.is-active { color: var(--brand-700); background: var(--brand-50); }

/* step rail */
.onb-rail { padding: 28px 32px 4px; }
.onb-rail__in { max-width: 680px; margin: 0 auto; display: flex; align-items: flex-start; }
.onb-rail__step { flex: 1 1 0%; position: relative; display: flex; flex-direction: column; align-items: center; }
.onb-rail__line { position: absolute; top: 16px; left: -50%; width: 100%; height: 2px; border-radius: 2px; background: var(--border-primary); z-index: 0; }
.onb-rail__step.is-done .onb-rail__line, .onb-rail__step.is-active .onb-rail__line { background: var(--brand-600); }
.onb-rail__dot { position: relative; z-index: 1; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; transition: .25s; background: #fff;
  color: var(--text-quaternary); border: 2px solid var(--border-primary); font-size: 13px; font-weight: 700; }
.onb-rail__step.is-active .onb-rail__dot { color: var(--brand-700); border-color: var(--brand-600); box-shadow: var(--shadow-focus-brand); }
.onb-rail__step.is-done .onb-rail__dot { color: #fff; background: var(--brand-600); border-color: var(--brand-600); }
.onb-rail__label { margin-top: 9px; font-size: 12.5px; font-weight: 600; text-align: center; color: var(--text-quaternary); }
.onb-rail__step.is-active .onb-rail__label { color: var(--brand-700); }
.onb-rail__step.is-done .onb-rail__label { color: var(--text-tertiary); }

/* content */
.onb-main { max-width: 720px; margin: 0 auto; padding: 24px 24px 140px; }
.onb-h1 { font-weight: 700; font-size: clamp(26px, 4vw, 34px); line-height: 1.15; letter-spacing: -.02em; margin: 8px 0 8px; text-align: center; text-wrap: balance; }
.onb-sub { font-size: 16px; line-height: 1.55; color: var(--text-tertiary); margin: 0 0 28px; text-align: center; }

.onb-card { background: #fff; border: 1px solid var(--border-secondary); border-radius: var(--radius-2xl); box-shadow: var(--shadow-xs); }
.onb-card + .onb-card { margin-top: 16px; }
.onb-editrow { display: flex; align-items: center; gap: 16px; padding: 20px 22px; }
.onb-editrow + .onb-editrow { border-top: 1px solid var(--border-secondary); }
.onb-editrow__icon { width: 46px; height: 46px; border-radius: 12px; background: var(--brand-50); color: var(--brand-600);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.onb-editrow__field { flex: 1 1 0%; min-width: 0; }
.onb-editrow__label { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-quaternary); margin-bottom: 3px; }
.onb-input { width: 100%; border: none; outline: none; background: transparent; font-family: var(--font-sans);
  font-size: 18px; font-weight: 650; color: var(--text-primary); padding: 0; }
.onb-input::placeholder { color: var(--text-quaternary); font-weight: 500; }
.onb-editrow__pencil { color: var(--fg-quaternary); flex-shrink: 0; display: inline-flex; }

/* profile-collected checklist */
.onb-collected__hd { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--border-secondary); }
.onb-collected__hd .onb-editrow__icon { width: 40px; height: 40px; background: var(--brand-50); }
.onb-collected__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.onb-collected__item { display: flex; align-items: center; gap: 12px; padding: 14px 22px; }
.onb-collected__item:nth-child(odd) { border-right: 1px solid var(--border-secondary); }
.onb-collected__item:nth-child(n+3) { border-top: 1px solid var(--border-secondary); }
.onb-check { width: 22px; height: 22px; border-radius: 50%; background: var(--success-50); color: var(--success-600);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.onb-pill-lock { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; font-size: 11.5px; font-weight: 600;
  color: var(--text-quaternary); background: var(--bg-secondary); border: 1px solid var(--border-secondary); border-radius: 999px; padding: 4px 9px; }

/* buttons */
.onb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--font-sans);
  font-size: 16px; font-weight: 600; border-radius: var(--radius-md); padding: 13px 24px; cursor: pointer;
  border: 1px solid transparent; text-decoration: none; transition: background .15s, box-shadow .15s, border-color .15s; }
.onb-btn--primary { background: var(--brand-600); color: #fff; box-shadow: var(--shadow-sm); }
.onb-btn--primary:hover { background: var(--brand-700); }
.onb-btn--ghost { background: #fff; color: var(--text-secondary); border-color: var(--border-primary); }
.onb-btn--ghost:hover { background: var(--bg-primary-hover); }
.onb-btn:disabled { opacity: .6; cursor: default; }

/* sticky footer bar with the primary CTA */
.onb-footbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; border-top: 1px solid var(--border-secondary);
  background: rgba(255,255,255,.9); backdrop-filter: blur(10px); }
.onb-footbar__in { max-width: 720px; margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.onb-footbar__in.is-end { justify-content: center; }

/* voice picker (step 2) */
.onb-voicegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.onb-voice { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 1.5px solid var(--border-secondary);
  border-radius: var(--radius-xl); background: #fff; cursor: pointer; transition: .15s; }
.onb-voice:hover { border-color: var(--brand-300); }
.onb-voice input { position: absolute; opacity: 0; pointer-events: none; }
.onb-voice.is-sel { border-color: var(--brand-600); background: var(--brand-50); box-shadow: var(--shadow-focus-brand); }
.onb-voice__play { width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--brand-50); color: var(--brand-600);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; padding: 0; transition: .15s; }
.onb-voice__play:hover { background: var(--brand-100, #e0eaff); }
.onb-voice.is-sel .onb-voice__play { background: var(--brand-600); color: #fff; }
.onb-voice__ico-stop, .onb-voice__spin { display: none; }
.onb-voice__play.is-playing .onb-voice__ico-play { display: none; }
.onb-voice__play.is-playing .onb-voice__ico-stop { display: inline-block; }
.onb-voice__play.is-loading .onb-voice__ico-play, .onb-voice__play.is-loading .onb-voice__ico-stop { display: none; }
.onb-voice__play.is-loading .onb-voice__spin { display: inline-block; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent; animation: onb-spin .7s linear infinite; }
@keyframes onb-spin { to { transform: rotate(360deg); } }
.onb-voice__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.onb-voice__name { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.onb-voice__desc { font-size: 12.5px; color: var(--text-quaternary); }
.onb-label { display: block; font-size: 13px; font-weight: 600; color: var(--text-secondary); margin: 24px 0 8px; }
.onb-textarea { width: 100%; border: 1.5px solid var(--border-secondary); border-radius: var(--radius-xl); padding: 14px 16px;
  font-family: var(--font-sans); font-size: 15px; line-height: 1.5; color: var(--text-primary); resize: vertical; min-height: 96px; outline: none; }
.onb-textarea:focus { border-color: var(--brand-500); box-shadow: var(--shadow-focus-brand); }
.onb-counter { display: block; text-align: right; font-size: 12.5px; color: var(--text-quaternary); margin-top: 6px; font-variant-numeric: tabular-nums; }

/* plan cards (step 3) */
.onb-plangrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.onb-plan { position: relative; display: block; padding: 22px 20px; border: 1.5px solid var(--border-secondary);
  border-radius: var(--radius-2xl); background: #fff; cursor: pointer; transition: .15s; }
.onb-plan:hover { border-color: var(--brand-300); }
.onb-plan input { position: absolute; opacity: 0; pointer-events: none; }
.onb-plan.is-sel { border-color: var(--brand-600); box-shadow: var(--shadow-focus-brand); }
.onb-plan__name { font-size: 18px; font-weight: 700; color: var(--text-primary); }
.onb-plan__for { font-size: 13px; color: var(--text-quaternary); margin: 2px 0 14px; }
.onb-plan__price { font-size: 26px; font-weight: 700; letter-spacing: -.02em; overflow-wrap: break-word; hyphens: auto; }
/* Text prices ("Индивидуально") are far longer than "39 990 ₽" — shrink so they stay inside the card. */
.onb-plan__price--text { font-size: 19px; letter-spacing: 0; }
.onb-plan__unit { font-size: 13px; color: var(--text-quaternary); }
.onb-plan__badge { position: absolute; top: -10px; right: 14px; background: var(--brand-600); color: #fff; font-size: 11px;
  font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.onb-plan__check { position: absolute; top: 16px; right: 16px; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--border-primary); display: inline-flex; align-items: center; justify-content: center; color: transparent; }
.onb-plan.is-sel .onb-plan__check { border-color: var(--brand-600); background: var(--brand-600); color: #fff; }

/* register form (step 4) */
.onb-form { display: flex; flex-direction: column; gap: 16px; }
.onb-field { display: flex; flex-direction: column; gap: 6px; }
.onb-field > label { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.onb-control { width: 100%; border: 1.5px solid var(--border-secondary); border-radius: var(--radius-lg); padding: 12px 14px;
  font-family: var(--font-sans); font-size: 15px; color: var(--text-primary); background: #fff; outline: none; }
.onb-control:focus { border-color: var(--brand-500); box-shadow: var(--shadow-focus-brand); }
.onb-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.onb-error { color: var(--error-600); font-size: 13px; }
.onb-note { font-size: 13px; line-height: 1.5; color: var(--text-tertiary); }
/* ── 404 page ─────────────────────────────────────────────── */
.nf-btn { display: inline-flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 600;
  border-radius: 10px; text-decoration: none; box-shadow: var(--shadow-xs); transition: background .15s, border-color .15s, box-shadow .15s; }
.nf-btn--primary { background: var(--brand-600); color: #fff; padding: 13px 24px; }
.nf-btn--primary:hover { background: var(--brand-700); }
.nf-btn--ghost { background: #fff; color: var(--text-secondary); padding: 13px 22px; border: 1px solid var(--border-primary); }
.nf-btn--ghost:hover { border-color: var(--brand-300); box-shadow: var(--shadow-sm); }
.nf-card { display: flex; align-items: center; gap: 12px; padding: 13px 15px; background: #fff;
  border: 1px solid var(--border-secondary); border-radius: 12px; text-decoration: none; box-shadow: var(--shadow-xs);
  transition: border-color .15s, box-shadow .15s, transform .15s; }
.nf-card:hover { border-color: var(--brand-300); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.nf-card__icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 9px; background: var(--brand-50);
  display: inline-flex; align-items: center; justify-content: center; color: var(--brand-600); }
@media (max-width: 520px) { .nf-grid { grid-template-columns: 1fr !important; } }

.field-validation-error { color: var(--error-600); font-size: 13px; }
.input-validation-error { border-color: var(--error-500) !important; }
.validation-summary-errors { color: var(--error-600); font-size: 13px; }
.validation-summary-errors ul { margin: 0; padding-left: 18px; }

/* done / big-icon states (loading, error, complete) */
.onb-center { max-width: 560px; margin: 40px auto 0; text-align: center; }
.onb-bigicon { width: 84px; height: 84px; border-radius: 24px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 24px; }
.onb-bigicon--brand { background: var(--brand-50); color: var(--brand-600); }
.onb-bigicon--ok { background: var(--success-50); color: var(--success-600); }
.onb-bigicon--err { background: var(--error-50); color: var(--error-600); }
.onb-spinner { width: 46px; height: 46px; border: 4px solid var(--brand-100); border-top-color: var(--brand-600); border-radius: 50%; animation: aizy-spin .8s linear infinite; }
.onb-crawl { margin: 22px auto 0; max-width: 440px; text-align: left; display: flex; flex-direction: column; gap: 8px; }
.onb-crawl__line { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text-tertiary);
  padding: 9px 12px; background: #fff; border: 1px solid var(--border-secondary); border-radius: 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.onb-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 20px 0 0; }
.onb-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--text-secondary);
  background: #fff; border: 1px solid var(--border-secondary); border-radius: 999px; padding: 6px 12px; }
.onb-chip b { color: var(--brand-700); font-weight: 700; }

@media (max-width: 620px) {
  .onb-top__in { padding: 0 16px; gap: 12px; }
  .onb-testbtn span, .onb-testbtn { font-size: 0; gap: 0; padding: 8px; }
  .onb-testbtn svg { font-size: 14px; }
  .onb-rail { padding: 20px 12px 4px; }
  .onb-rail__label { font-size: 10.5px; }
  .onb-collected__grid { grid-template-columns: 1fr; }
  .onb-collected__item:nth-child(odd) { border-right: none; }
  .onb-collected__item:nth-child(2) { border-top: 1px solid var(--border-secondary); }
  .onb-row2 { grid-template-columns: 1fr; }
}

/* ============================================================
   Browser test-call modal (shared _TestCallModal) — self-contained
   styling so it works on the site.css-only onboarding shell.
   ============================================================ */
.ad-testcall { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; }
.ad-testcall[hidden] { display: none; }
.ad-testcall__backdrop { position: absolute; inset: 0; background: var(--bg-overlay); }
.ad-testcall__dialog { position: relative; z-index: 1; width: 100%; max-width: 440px; background: #fff;
  border-radius: var(--radius-2xl); box-shadow: var(--shadow-2xl); overflow: hidden; }
.ad-testcall__hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px; border-bottom: 1px solid var(--border-secondary); }
.ad-testcall__hd h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--text-primary); }
.ad-testcall__sub { font-size: 13px; color: var(--text-quaternary); }
.ad-testcall__hd-right { display: flex; align-items: center; gap: 10px; }
.ad-testcall__timer { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--text-secondary); }
.ad-testcall__x { border: none; background: transparent; font-size: 24px; line-height: 1; color: var(--text-quaternary); cursor: pointer; }
.ad-testcall__pick, .ad-testcall__body { padding: 22px; }
.ad-testcall__pickhint, .ad-testcall__pickempty { font-size: 14px; color: var(--text-tertiary); margin: 0 0 12px; }
.ad-testcall__picklist { display: flex; flex-direction: column; gap: 8px; }
.ad-testcall__orb { position: relative; width: 96px; height: 96px; margin: 8px auto 18px; border-radius: 50%;
  background: var(--brand-50); display: flex; align-items: center; justify-content: center; }
.ad-testcall__orb-core { width: 54px; height: 54px; border-radius: 50%; background: var(--brand-600); transition: transform .2s; }
.ad-testcall__orb-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--brand-300); opacity: 0; }
.ad-testcall__orb[data-state="connecting"] .ad-testcall__orb-ring,
.ad-testcall__orb[data-state="live"] .ad-testcall__orb-ring { opacity: 1; animation: aizy-ping 1.8s ease-out infinite; }
.ad-testcall__orb[data-state="live"] .ad-testcall__orb-core { animation: aizy-floaty 1.6s ease-in-out infinite; }
.ad-testcall__state { text-align: center; font-size: 14px; color: var(--text-tertiary); line-height: 1.5; }
.ad-testcall__transcript { margin-top: 16px; max-height: 210px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.ad-testcall__transcript > * { padding: 8px 12px; border-radius: 10px; background: var(--bg-secondary); }
.ad-testcall__ft { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--border-secondary); }
.ad-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 15px; font-weight: 600;
  border-radius: var(--radius-md); padding: 11px 18px; cursor: pointer; border: 1px solid transparent; }
.ad-btn svg { width: 18px; height: 18px; }
.ad-btn--primary { background: var(--brand-600); color: #fff; }
.ad-btn--primary:hover { background: var(--brand-700); }
.ad-btn--ghost { background: #fff; color: var(--text-secondary); border-color: var(--border-primary); }
.ad-btn--danger { background: var(--error-600); color: #fff; }
.ad-btn--danger:hover { background: var(--error-700); }

/* ============================================================
   Auth screens (login / register / forgot / reset / confirm …)
   Rendered inside Views/Shared/_AuthLayout.cshtml. Untitled-UI
   card on a dotted field; cobalt brand. Light-only by design.
   ============================================================ */
.auth-shell { min-height: 100vh; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.auth-dots { position: fixed; inset: 0 0 auto; height: 380px; z-index: 0; pointer-events: none;
  background-image: radial-gradient(var(--gray-200) 1.2px, transparent 1.2px); background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); opacity: .5; }

/* Topbar */
.auth-top { position: relative; z-index: 5; padding: 0 32px; }
.auth-top__in { max-width: 1080px; margin: 0 auto; height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.auth-logo { display: inline-flex; align-items: center; text-decoration: none; }
.auth-logo img { height: 32px; width: auto; display: block; }
.auth-top__ctx { display: flex; align-items: center; gap: 10px; }
.auth-top__ctx-note { font-size: 14px; color: var(--text-tertiary); font-weight: 500; }
.auth-top__ctx-btn { font-size: 14px; font-weight: 600; color: var(--brand-700); background: #fff; border: 1px solid var(--border-primary);
  border-radius: 8px; padding: 8px 16px; text-decoration: none; box-shadow: var(--shadow-xs); transition: background .15s; white-space: nowrap; }
.auth-top__ctx-btn:hover { background: var(--bg-secondary); }

/* Body + card */
.auth-main { position: relative; z-index: 3; flex: 1 1 0%; display: flex; align-items: center; justify-content: center; padding: 24px 20px 40px; }
.auth-wrap { width: 100%; max-width: 440px; }
.auth-card { background: #fff; border: 1px solid var(--border-secondary); border-radius: 20px; box-shadow: var(--shadow-md); padding: 38px 36px; }
.auth-help { text-align: center; font-size: 13px; color: var(--text-quaternary); margin: 22px 0 0; }
.auth-help a { color: var(--brand-600); text-decoration: none; font-weight: 500; }
.auth-help a:hover { text-decoration: underline; }

/* Footer */
.auth-foot { position: relative; z-index: 3; padding: 20px 32px 26px; }
.auth-foot__in { max-width: 1080px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.auth-foot__copy { font-size: 12.5px; color: var(--text-quaternary); }
.auth-foot__links { display: flex; align-items: center; gap: 16px; }
.auth-foot__links a { font-size: 12.5px; font-weight: 500; color: var(--text-tertiary); text-decoration: none; }
.auth-foot__links a:hover { color: var(--text-primary); }

/* Card head (title + lede, optional icon badge) */
.auth-head { text-align: center; margin-bottom: 26px; }
.auth-head--icon { margin-bottom: 24px; }
.auth-head h1 { font-size: 26px; font-weight: 800; letter-spacing: -.025em; margin: 0 0 6px; color: var(--text-primary); }
.auth-head p { font-size: 15px; color: var(--text-tertiary); margin: 0; text-wrap: pretty; }
.auth-head--icon p, .auth-hero p { line-height: 1.55; }
.auth-badge { display: inline-flex; width: 52px; height: 52px; border-radius: 14px; background: var(--brand-50);
  border: 1px solid var(--brand-100); align-items: center; justify-content: center; color: var(--brand-600); margin-bottom: 16px; }
.auth-badge--lg { width: 60px; height: 60px; border-radius: 16px; margin-bottom: 20px; }
.auth-badge--ok { width: 72px; height: 72px; border-radius: 50%; background: var(--success-50); border-color: var(--success-100); color: var(--success-600); margin-bottom: 20px; }
.auth-badge--err { background: var(--error-50); border-color: var(--error-200); color: var(--error-600); }

/* Success / icon hero (centered card variants) */
.auth-hero { text-align: center; }
.auth-hero h1 { font-size: 26px; font-weight: 800; letter-spacing: -.025em; margin: 0 0 8px; color: var(--text-primary); text-wrap: balance; }
.auth-hero p { font-size: 15px; color: var(--text-tertiary); margin: 0 auto; max-width: 340px; text-wrap: pretty; }
.auth-hero p.auth-hero__lede { margin-bottom: 26px; }

/* Alerts */
.auth-alert { margin: 0 0 18px; padding: 12px 14px; border-radius: 10px; font-size: 13.5px; line-height: 1.5;
  background: var(--error-50); color: var(--error-700); border: 1px solid var(--error-200); }
.auth-alert--ok { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-100); }
.auth-resendlink { margin: -8px 0 18px; }
.auth-resendlink a { font-size: 13.5px; font-weight: 600; color: var(--brand-600); text-decoration: none; }
.auth-resendlink a:hover { text-decoration: underline; }

/* Forms */
.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-field { display: block; }
.auth-label { display: block; font-size: 14px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.auth-labelrow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.auth-labelrow .auth-label { margin-bottom: 0; }
.auth-inlinelink { font-size: 13px; font-weight: 600; color: var(--brand-600); background: none; border: none; cursor: pointer; padding: 0; text-decoration: none; }
.auth-inlinelink:hover { text-decoration: underline; }
.auth-input { width: 100%; padding: 11px 14px; font-size: 16px; font-family: var(--font-sans); color: var(--text-primary);
  background: #fff; border: 1px solid var(--border-primary); border-radius: 8px; outline: none; transition: box-shadow .15s, border-color .15s; }
.auth-input::placeholder { color: var(--text-placeholder); }
.auth-input:focus { border-color: var(--brand-500); box-shadow: var(--shadow-focus-brand); }
.auth-input.input-validation-error, .auth-input[aria-invalid="true"] { border-color: var(--error-400); }
select.auth-input { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 40px; }
.auth-inputwrap { position: relative; }
.auth-inputwrap .auth-input { padding-right: 46px; }
.auth-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: none;
  background: none; color: var(--text-quaternary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 7px; }
.auth-eye:hover { color: var(--text-tertiary); background: var(--bg-secondary); }
.auth-err { display: block; margin-top: 6px; font-size: 13px; color: var(--error-600); }
.auth-err:empty { display: none; }

/* Password strength meter */
.auth-strength { display: flex; gap: 5px; margin-top: 10px; }
.auth-strength span { flex: 1 1 0%; height: 5px; border-radius: 3px; background: var(--gray-200); transition: background .2s; }

/* Buttons */
.auth-submit { display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%; white-space: nowrap;
  background: var(--brand-600); color: #fff; font-size: 16px; font-weight: 600; font-family: var(--font-sans); padding: 13px 24px;
  border: none; border-radius: 10px; cursor: pointer; text-decoration: none; box-shadow: var(--shadow-xs); transition: background .15s; }
.auth-submit:hover { background: var(--brand-700); }
.auth-submit--cta { padding: 14px 24px; }
.auth-back { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 18px;
  font-size: 14px; font-weight: 600; color: var(--text-tertiary); background: none; border: none; cursor: pointer; padding: 6px; text-decoration: none; }
.auth-back:hover { color: var(--text-primary); }
.auth-skip { display: block; width: 100%; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--text-tertiary);
  background: none; border: none; cursor: pointer; padding: 8px; text-align: center; text-decoration: none; }
.auth-skip:hover { color: var(--text-primary); }

/* Email chip + webmail shortcuts + resend row (checkmail / resetsent / magic) */
.auth-emailchip { display: inline-flex; align-items: center; gap: 9px; margin-top: 16px; padding: 10px 16px;
  background: var(--bg-secondary); border: 1px solid var(--border-secondary); border-radius: 10px;
  font-size: 14px; font-weight: 600; color: var(--text-secondary); }
.auth-emailchip svg { color: var(--text-quaternary); }
.auth-webmail { display: flex; gap: 10px; margin-top: 24px; }
.auth-webmail a { flex: 1 1 0%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px;
  font-weight: 600; color: var(--text-secondary); background: #fff; border: 1px solid var(--border-primary); border-radius: 9px;
  padding: 11px; text-decoration: none; box-shadow: var(--shadow-xs); }
.auth-webmail a:hover { background: var(--bg-secondary); }
.auth-webmail svg { color: var(--brand-600); }
.auth-rule { height: 1px; background: var(--border-secondary); margin: 22px 0 18px; }
.auth-resend { text-align: center; }
.auth-resend p { font-size: 13.5px; color: var(--text-quaternary); margin: 0; }
.auth-resend b { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.auth-resend__btn { font: inherit; font-weight: 600; color: var(--brand-600); background: none; border: none; cursor: pointer; padding: 0; }
.auth-resend__btn[disabled] { color: var(--text-quaternary); cursor: default; }

/* Divider "or" (kept for future external providers) */
.auth-or { display: flex; align-items: center; gap: 14px; margin: 20px 0; }
.auth-or span:first-child, .auth-or span:last-child { flex: 1 1 0%; height: 1px; background: var(--border-secondary); }
.auth-or__label { flex: 0 0 auto; font-size: 13px; color: var(--text-quaternary); font-weight: 500; }

/* Legal fine-print (register) */
.auth-legal { font-size: 12px; color: var(--text-quaternary); margin: 18px 0 0; line-height: 1.5; text-align: center; }
.auth-legal a { color: var(--brand-600); text-decoration: none; }
.auth-legal a:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .auth-card { padding: 28px 22px; border-radius: 16px; }
  .auth-main { padding-left: 16px; padding-right: 16px; }
  .auth-top, .auth-foot { padding-left: 18px; padding-right: 18px; }
  /* Drop the "no account yet?" lead-in so the topbar CTA never overflows a phone. */
  .auth-top__ctx-note { display: none; }
  .auth-foot__in { flex-direction: column; align-items: flex-start; gap: 10px; }
}