/* ==========================================================================
   AutoScale Voice
   Hebrew RTL landing page. Every directional property is logical
   (margin-inline, inset-inline, padding-inline) so RTL needs no overrides.
   Type, colour, spacing and motion follow research/DESIGN-SPEC.md; the
   vertical scale follows research/POLISH-BRIEF.md section 14.
   ========================================================================== */

:root {
  /* Surfaces */
  --page:        #FFFFFF;
  --page-alt:    #FBFBFD;
  --card:        #FFFFFF;
  --hairline:    #D2D2D7;
  --footer-bg:   #F5F5F7;
  --track:       #E8E8ED;

  /* Text. --text-3 exists for the spec's third grey but is never used for
     running text: at 3.5:1 on white it fails AA, so text uses --text-2. */
  --text:        #1D1D1F;
  --text-2:      #6E6E73;
  --text-3:      #86868B;

  /* Accent. One blue for buttons, a darker blue for text-size links, and the
     same blue at 6 to 12 percent for grounds and chips. */
  --accent:      #0071E3;
  --accent-link: #0066CC;
  --accent-fill: #0071E3;
  --accent-fill-hover: #0077ED;
  --accent-tint: rgba(0, 113, 227, .08);
  --accent-tint-2: rgba(0, 113, 227, .12);
  --on-accent:   #FFFFFF;
  --focus-ring:  rgba(0, 113, 227, .3);

  /* The hero glow is the logo mark's own cyan to navy, and nothing else on
     the page uses that gradient. */
  --glow-a: rgba(25, 211, 245, .28);
  --glow-b: rgba(27, 134, 223, .16);
  --glow-c: rgba(13, 59, 140, 0);

  /* Chevron rotation. The glyphs are drawn from border-inline-end plus
     border-block-end, which in RTL resolve to the LEFT and BOTTOM borders, so
     the unrotated arrowhead points down and to the left. -45deg points it
     DOWN, 135deg points it UP. The pair inverts under :dir(ltr). */
  --chev-closed: -45deg;
  --chev-open:   135deg;

  /* Status. Both darkened on light so they pass AA as text. */
  --success:     #0A7A69;
  --error:       #B8322A;

  --shadow-card: 2px 4px 12px rgba(0, 0, 0, .08);
  --shadow-thumb: 0 3px 8px rgba(0, 0, 0, .12);
  --shadow-lift: 2px 8px 20px rgba(0, 0, 0, .12);

  /* The demo ground is dark in both themes: the spec's dark page text on
     white, the dark alt surface in dark mode. Text on it uses the dark
     theme's own greys and link blue, which is why they are fixed here. */
  --ground:       #F5F5F7;
  --ground-text:  #1D1D1F;
  --ground-text-2: #55555A;
  --link-on-ground: #0062C4;
  --player-bg:    #FFFFFF;
  --player-text:  #1D1D1F;
  --player-text-2: #6E6E73;
  --player-accent: #0071E3;
  --player-bar:   #86868B;
  --player-avatar: #F5F5F7;

  --radius:      18px;
  --radius-sm:   12px;
  --wrap:        980px;
  --wrap-wide:   1240px;
  --wrap-narrow: 692px;
  --gutter:      22px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Helvetica Neue", Helvetica, "Heebo", "Assistant", "Segoe UI", Arial, sans-serif;

  --nav-h:  44px;
  --bar-h:  60px;

  /* Motion, from the spec. */
  --ease:        cubic-bezier(0.4, 0, 0.6, 1);
  --ease-sheet:  cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --t-hover:     200ms;
  --t-reveal:    300ms;

  color-scheme: light;
}

:root:dir(ltr) {
  --chev-closed: 45deg;
  --chev-open:   -135deg;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page:      #000000;
    --page-alt:  #161617;
    --card:      #1D1D1F;
    --hairline:  #424245;
    --footer-bg: #161617;
    --track:     #2C2C2E;
    --text:      #F5F5F7;
    --text-2:    #86868B;
    --text-3:    #6E6E73;
    --accent-link: #2997FF;
    --accent-tint: rgba(41, 151, 255, .10);
    --accent-tint-2: rgba(41, 151, 255, .16);
    --focus-ring: rgba(41, 151, 255, .35);
    --success:   #0E9E88;
    --error:     #F87168;
    --shadow-card: 2px 4px 12px rgba(0, 0, 0, .4);
    --shadow-thumb: 0 3px 8px rgba(0, 0, 0, .5);
    --shadow-lift: 2px 8px 20px rgba(0, 0, 0, .5);
    --glow-a: rgba(25, 211, 245, .22);
    --glow-b: rgba(27, 134, 223, .14);
    --ground: #161617;
    --ground-text: #F5F5F7;
    --ground-text-2: #A1A1A6;
    --link-on-ground: #2997FF;
    --player-bg: #2C2C2E;
    --player-text: #F5F5F7;
    --player-text-2: #A1A1A6;
    --player-accent: #2997FF;
    --player-bar: #6E6E73;
    --player-avatar: #FFFFFF;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --page:      #000000;
  --page-alt:  #161617;
  --card:      #1D1D1F;
  --hairline:  #424245;
  --footer-bg: #161617;
  --track:     #2C2C2E;
  --text:      #F5F5F7;
  --text-2:    #86868B;
  --text-3:    #6E6E73;
  --accent-link: #2997FF;
  --accent-tint: rgba(41, 151, 255, .10);
  --accent-tint-2: rgba(41, 151, 255, .16);
  --focus-ring: rgba(41, 151, 255, .35);
  --success:   #0E9E88;
  --error:     #F87168;
  --shadow-card: 2px 4px 12px rgba(0, 0, 0, .4);
  --shadow-thumb: 0 3px 8px rgba(0, 0, 0, .5);
  --shadow-lift: 2px 8px 20px rgba(0, 0, 0, .5);
  --glow-a: rgba(25, 211, 245, .22);
  --glow-b: rgba(27, 134, 223, .14);
  --ground: #161617;
  --ground-text: #F5F5F7;
  --ground-text-2: #A1A1A6;
  --link-on-ground: #2997FF;
  --player-bg: #2C2C2E;
  --player-text: #F5F5F7;
  --player-text-2: #A1A1A6;
  --player-accent: #2997FF;
  --player-bar: #6E6E73;
  --player-avatar: #FFFFFF;
  color-scheme: dark;
}

/* --------------------------------------------------------------- base --- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 25px;
  letter-spacing: -0.022em;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; }
p { margin: 0; }
img, svg { max-width: 100%; }
::selection { background: rgba(0, 113, 227, .25); }

a { color: var(--accent-link); text-decoration: none; transition: color var(--t-hover) var(--ease); }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

[id] { scroll-margin-block-start: calc(var(--nav-h) + 16px); }

.plain-list { list-style: none; margin: 0; padding: 0; }

.skip-link {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: var(--gutter);
  z-index: 200;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--hairline);
  border-radius: 980px;
  padding: 8px 16px;
  font-size: 14px;
}
.skip-link:focus { inset-block-start: 10px; }

.wrap {
  max-inline-size: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap-narrow { max-inline-size: var(--wrap-narrow); }
.wrap-wide { max-inline-size: var(--wrap-wide); }
@media (max-width: 734px) {
  .wrap { padding-inline: 6.25%; }
}

/* ------------------------------------------------------- type scale --- */

.t-hero    { font-size: 56px; line-height: 60px; letter-spacing: -0.005em; font-weight: 700; }
.t-title   { font-size: 28px; line-height: 32px; letter-spacing: 0.007em; font-weight: 700; }
.t-sub     { font-size: 28px; line-height: 31px; letter-spacing: 0.004em; font-weight: 400; }
.t-lede    { font-size: 21px; line-height: 29px; letter-spacing: 0.011em; font-weight: 400; }
.t-card    { font-size: 17px; line-height: 21px; letter-spacing: -0.022em; font-weight: 700; }
.t-small   { font-size: 14px; line-height: 18px; letter-spacing: -0.016em; }
.t-caption { font-size: 12px; line-height: 16px; letter-spacing: -0.01em; }
@media (max-width: 734px) {
  .t-hero  { font-size: 40px; line-height: 44px; letter-spacing: 0; }
  .t-sub   { font-size: 21px; line-height: 25px; letter-spacing: 0.011em; }
  .t-title { font-size: 24px; line-height: 28px; }
  .t-lede  { font-size: 19px; line-height: 25px; }
}

.title-tail { color: var(--text-2); font-weight: 400; }

/* ---------------------------------------------------------------- nav --- */

.topbar {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  block-size: var(--nav-h);
  background: color-mix(in srgb, var(--page) 80%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-block-end: 1px solid color-mix(in srgb, var(--hairline) 60%, transparent);
}
@media (prefers-reduced-transparency: reduce) {
  .topbar { background: var(--page); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.topbar-inner {
  max-inline-size: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  block-size: 100%;
  display: flex;
  align-items: center;
  gap: 24px;
}

.wordmark { display: inline-flex; align-items: center; color: var(--text); flex: 0 0 auto; transition: opacity var(--t-hover) var(--ease); }
.wordmark:hover { text-decoration: none; opacity: .72; }
.wordmark { gap: 7px; }
.logo-mark { display: block; block-size: 24px; inline-size: auto; }
.logo-word { display: block; block-size: 14px; inline-size: auto; }
.logo-voice { font-size: 17px; font-weight: 500; letter-spacing: -0.02em; color: var(--accent-link); line-height: 1; margin-inline-start: -2px; }
.logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-light { display: none; }
  :root:not([data-theme="light"]) .logo-dark  { display: block; }
}
:root[data-theme="dark"] .logo-light  { display: none; }
:root[data-theme="dark"] .logo-dark   { display: block; }
:root[data-theme="light"] .logo-light { display: block; }
:root[data-theme="light"] .logo-dark  { display: none; }

.topbar-links {
  display: flex;
  gap: 28px;
  flex: 1;
  font-size: 12px;
  letter-spacing: -0.01em;
  line-height: 1;
}
.topbar-links a { color: var(--text); opacity: 1; padding-block: 8px; }
.topbar-links a:hover { color: var(--accent-link); text-decoration: none; }
@media (max-width: 734px) { .topbar-links { display: none; } .topbar-inner { justify-content: space-between; } }

.topbar-end { margin-inline-start: auto; display: flex; align-items: center; gap: 12px; }
.topbar-end .topbar-cta { min-block-size: 30px; padding: 5px 14px; font-size: 13px; line-height: 16px; white-space: nowrap; }
@media (max-width: 734px) {
  :root { --nav-h: 56px; }
  .topbar-inner { gap: 12px; }
  .topbar-end .topbar-cta { min-block-size: 34px; padding: 7px 16px; font-size: 14px; line-height: 18px; }
}

.theme-toggle {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text);
  inline-size: 36px;
  block-size: 36px;
  display: grid;
  place-items: center;
  cursor: pointer;
  border-radius: 980px;
  transition: color var(--t-hover) var(--ease), background-color var(--t-hover) var(--ease);
}
.theme-toggle:hover { color: var(--accent-link); background: var(--accent-tint); }
.theme-toggle .glyph { inline-size: 18px; block-size: 18px; grid-area: 1 / 1; }
.glyph-sun  { fill: none; stroke: currentColor; stroke-width: 1.7; }
.glyph-moon { fill: currentColor; }

.glyph-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .glyph-sun  { display: none; }
  :root:not([data-theme="light"]) .glyph-moon { display: block; }
}
:root[data-theme="dark"] .glyph-sun  { display: none; }
:root[data-theme="dark"] .glyph-moon { display: block; }
:root[data-theme="light"] .glyph-sun  { display: block; }
:root[data-theme="light"] .glyph-moon { display: none; }

/* ----------------------------------------------------------- buttons --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-block-size: 36px;
  padding: 8px 16px;
  border: 0;
  border-radius: 980px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.022em;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: background-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease), transform var(--t-hover) var(--ease-spring), box-shadow var(--t-hover) var(--ease);
}
.btn:active { transform: scale(.97); transition-duration: 100ms; }
.btn-primary { background: var(--accent-fill); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-fill-hover); text-decoration: none; box-shadow: 0 4px 14px rgba(0, 113, 227, .28); }
.btn-primary[disabled] { opacity: .55; cursor: default; transform: none; box-shadow: none; }
.btn-secondary {
  background: transparent;
  color: var(--accent-link);
  border: 1px solid var(--accent-link);
}
.btn-secondary:hover { background: var(--accent-link); color: var(--on-accent); text-decoration: none; }
.btn-lg { min-block-size: 44px; padding: 11px 22px; }
.btn-block { inline-size: 100%; }

.link-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 44px;
  color: var(--accent-link);
  font-size: 21px;
  line-height: 29px;
  letter-spacing: 0.011em;
  font-weight: 400;
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
  transition: color var(--t-hover) var(--ease);
}
.link-action:hover { text-decoration: underline; }
.link-action.link-sm { font-size: 17px; line-height: 25px; letter-spacing: -0.022em; }
.link-on-dark { color: var(--link-on-ground); }
.chev { inline-size: 8px; block-size: 12px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------ hero --- */
/* Headline on the glow, then the dark demo ground. The ground runs to the
   section's edge so the configurator starts directly under it. */

.hero { text-align: center; }
/* The glow is clipped to the headline block, so it can never sit behind the
   line under the player or anything else that reads as body text. */
.hero-top { position: relative; overflow: hidden; }
.hero-glow {
  position: absolute;
  inset-inline: 0;
  inset-block: -180px 0;
  pointer-events: none;
  background:
    radial-gradient(60% 60% at 50% 40%, var(--glow-a) 0%, var(--glow-b) 45%, var(--glow-c) 100%);
  filter: blur(28px);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-glow { animation: breathe 7s var(--ease) infinite alternate; }
}
@keyframes breathe {
  from { opacity: .85; transform: scale(1); }
  to   { opacity: 1;   transform: scale(1.06); }
}
.hero-top > .wrap { position: relative; padding-block: 48px 40px; }
@media (min-width: 735px) { .hero-top > .wrap { padding-block: 72px 64px; } }

.hero-headline { max-inline-size: 16ch; margin-inline: auto; text-wrap: balance; }

.demo-ground {
  position: relative;
  background: var(--ground);
  color: var(--ground-text);
  padding-block: 40px;
}
@media (min-width: 735px) { .demo-ground { padding-block: 56px 64px; } }

.hero-actions {
  margin-block-start: 28px;
  display: flex;
  justify-content: center;
}
@media (max-width: 734px) { .hero-actions .btn { inline-size: 100%; } }

@media (prefers-reduced-motion: no-preference) {
  .hero-headline { animation: rise 500ms var(--ease-spring) both; animation-delay: 60ms; }
  .demo-ground > .wrap { animation: rise 500ms var(--ease-spring) both; animation-delay: 160ms; }
  .js .reveal { opacity: 0; transform: translateY(20px); transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
  .js .reveal.is-in { opacity: 1; transform: none; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------- sections --- */

.section { padding-block: 56px; }
@media (min-width: 735px) { .section { padding-block: 88px; } }
.section-alt { background: var(--page-alt); }

.section-head { text-align: center; }
.section-head .t-lede { margin-block-start: 12px; margin-inline: auto; max-inline-size: 56ch; color: var(--text-2); text-wrap: pretty; }

/* ------------------------------------------------------------- cards --- */

.card {
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--hairline) 70%, transparent);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: var(--shadow-card);
}
.card-title { display: block; }
.card-text  { margin-block-start: 8px; color: var(--text-2); display: block; text-wrap: pretty; }

/* ------------------------------------------------------- capabilities --- */
/* One row of seven, each a line icon over a three-word label. Wraps to a
   grid of two on a phone. */

.caps {
  margin-block-start: 32px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 735px) { .caps { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
@media (min-width: 1000px) { .caps { grid-template-columns: repeat(7, 1fr); } }
.cap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 22px 12px;
  text-align: center;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--hairline) 70%, transparent);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 600;
  color: var(--text);
  transition: transform var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease);
}
.cap:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--text-3); }
.cap svg { inline-size: 24px; block-size: 24px; fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cap span { text-wrap: balance; }
@media (max-width: 734px) { .caps .cap:last-child { grid-column: span 2; } }

/* ------------------------------------------------------------- chips --- */
/* Shared by the form's radio groups and the verticals row. 44px tall pills,
   accent tint when chosen. */

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips-center { justify-content: center; margin-block-start: 32px; }
.chip, .chip-btn {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding: 10px 18px;
  border-radius: 980px;
  border: 1px solid var(--hairline);
  background: var(--card);
  color: var(--text);
  font-family: inherit;
  font-size: 17px;
  line-height: 20px;
  letter-spacing: -0.022em;
  cursor: pointer;
  position: relative;
  transition: border-color var(--t-hover) var(--ease), background-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease), transform var(--t-hover) var(--ease);
}
.chip:hover, .chip-btn:hover { border-color: var(--text-3); background: var(--accent-tint); }
.chip input {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.chip:has(input:checked), .chip-btn[aria-checked="true"] {
  border-color: var(--accent);
  background: var(--accent-tint-2);
  color: var(--accent-link);
  font-weight: 600;
  box-shadow: 0 0 0 1px var(--accent);
}
.chip:has(input:focus-visible), .chip-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.chips-field { border: 0; margin: 0 0 20px; padding: 0; min-inline-size: 0; }
.chips-field legend { padding: 0; margin-block-end: 8px; }

/* --------------------------------------------------------- verticals --- */

.bubble-row {
  margin-block-start: 24px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  justify-content: center;
}
.bubble-avatar {
  flex: 0 0 auto;
  inline-size: 32px;
  block-size: 32px;
  border-radius: 980px;
  background: var(--card);
  border: 1px solid var(--hairline);
  display: grid;
  place-items: center;
}
.bubble-avatar img { inline-size: 18px; block-size: 18px; display: block; }
.bubble {
  max-inline-size: 52ch;
  padding: 14px 18px;
  border-radius: 20px;
  border-end-end-radius: 6px;
  background: var(--accent-tint-2);
  color: var(--text);
  font-size: 19px;
  line-height: 27px;
  letter-spacing: 0.011em;
  text-wrap: pretty;
  text-align: start;
}

/* ------------------------------------------------------------ player --- */
/* A voice-note pill: 64px tall, play control at the inline start, the real
   waveform with caption and duration across the middle, the AutoScale mark
   in a round avatar at the far end. Lives on the dark ground. */

.player {
  display: flex;
  align-items: center;
  gap: 12px;
  inline-size: 100%;
  block-size: 64px;
  padding-inline: 10px 12px;
  border-radius: 980px;
  background: var(--player-bg);
  color: var(--player-text);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .10);
}
@media (max-width: 734px) {
  .player { gap: 10px; padding-inline: 10px 12px; }
  .player-avatar { inline-size: 36px; block-size: 36px; }
  .player-avatar img { inline-size: 22px; block-size: 22px; }
}

.play-btn {
  flex: 0 0 auto;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 980px;
  border: 0;
  background: var(--accent-fill);
  color: var(--on-accent);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color var(--t-hover) var(--ease), transform var(--t-hover) var(--ease-spring), box-shadow var(--t-hover) var(--ease);
}
.play-btn:hover { background: var(--accent-fill-hover); transform: scale(1.04); box-shadow: 0 0 0 6px rgba(0, 113, 227, .18); }
.play-btn:active { transform: scale(.94); transition-duration: 100ms; }
.play-btn:focus-visible { outline: 2px solid var(--player-text); outline-offset: 3px; }
.play-btn .glyph { inline-size: 20px; block-size: 20px; fill: currentColor; grid-area: 1 / 1; }
.glyph-play { margin-inline-start: 2px; }
.glyph-pause { display: none; }
.player.is-playing .glyph-play  { display: none; }
.player.is-playing .glyph-pause { display: block; }

.player-mid {
  flex: 1;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wave {
  block-size: 28px;
  cursor: pointer;
  touch-action: none;
  display: block;
  border-radius: 4px;
}
.wave:focus-visible { outline: 2px solid var(--player-text); outline-offset: 4px; }
.wave svg { display: block; inline-size: 100%; block-size: 28px; overflow: visible; }
.wave-bars rect { fill: var(--player-bar); }
.wave-played rect { fill: var(--player-accent); }
.wave rect { transform-box: fill-box; transform-origin: 50% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .js .wave rect { transform: scaleY(0.04); }
  .js .wave.is-ready rect {
    animation: bar-rise 300ms var(--ease-spring) both;
    animation-delay: calc(var(--i) * 4ms);
  }
}
@keyframes bar-rise {
  from { transform: scaleY(0.04); }
  to   { transform: scaleY(1); }
}

.player-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
}
.player-caption { color: var(--player-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-inline-size: 0; }
.player-time {
  flex: 0 0 auto;
  color: var(--player-accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#time-elapsed { display: none; }
.player.is-playing #time-elapsed, .player.has-progress #time-elapsed { display: inline; }
.player.is-playing #time-total, .player.has-progress #time-total { display: none; }

.player-avatar {
  flex: 0 0 auto;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 980px;
  background: var(--player-avatar);
  display: grid;
  place-items: center;
}
.player-avatar img { inline-size: 24px; block-size: 24px; display: block; }

.player-foot {
  margin-block-start: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  flex-wrap: wrap;
  text-align: start;
}
.player-line { color: var(--ground-text-2); font-size: 17px; line-height: 25px; flex: 1 1 260px; }
.player-foot .link-action { min-block-size: 32px; flex: 0 0 auto; }

.transcript {
  margin-block-start: 16px;
  border-block-start: 1px solid rgba(255, 255, 255, .12);
  padding-block-start: 20px;
  display: grid;
  gap: 12px;
  text-align: start;
}
.transcript[hidden] { display: none; }
.line { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: baseline; }
.line-who { font-weight: 700; color: var(--ground-text-2); }
.line-noa .line-who { color: var(--player-accent); }
.line-text { color: var(--ground-text); text-wrap: pretty; }
.line-dani .line-text { color: var(--ground-text-2); }

/* -------------------------------------------------------- configurator --- */

.steps { margin-block-start: 32px; display: grid; gap: 40px; }

.step { border-block-start: 1px solid var(--hairline); padding-block-start: 28px; transition: border-color var(--t-reveal) var(--ease); scroll-margin-block-start: calc(var(--nav-h) + var(--bar-h) + 16px); }
@media (max-width: 734px) { .step { scroll-margin-block-start: calc(var(--nav-h) + 12px); } }
.step.is-open { border-color: var(--accent); }

.step-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.step.is-locked .step-title { color: var(--text-2); }
.step.is-done .step-title { font-size: 21px; line-height: 29px; letter-spacing: 0.011em; font-weight: 600; }
.step-change { flex: 0 0 auto; font-size: 17px; line-height: 25px; letter-spacing: -0.022em; }

.step-summary { margin-block-start: 4px; color: var(--text-2); }
.step-body { margin-block-start: 24px; }
.step-body[hidden], .step-summary[hidden], .step-change[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .step-body { animation: fade-in var(--t-reveal) var(--ease) both; }
}
@keyframes fade-in { from { opacity: .56; } to { opacity: 1; } }

.tiles { display: grid; gap: 16px; }
@media (min-width: 735px) {
  .tiles { gap: var(--gutter); }
  .tiles-2 { grid-template-columns: 1fr 1fr; }
  .tiles-3 { grid-template-columns: repeat(3, 1fr); }
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  inline-size: 100%;
  min-block-size: 96px;
  padding: 20px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--text);
  font-family: inherit;
  font-size: 17px;
  line-height: 21px;
  letter-spacing: -0.022em;
  text-align: start;
  cursor: pointer;
  transition: border-color var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease), transform var(--t-hover) var(--ease), background-color var(--t-hover) var(--ease);
}
.tile:hover { border-color: var(--text-3); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.tile:active { transform: translateY(0) scale(.99); transition-duration: 100ms; }
.tile[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 0 6px var(--accent-tint), 0 6px 24px rgba(0, 113, 227, .16); }
.tile[aria-checked="true"]:hover { box-shadow: 0 0 0 1px var(--accent), 0 0 0 6px var(--accent-tint), var(--shadow-lift); }
.tile[aria-checked="true"] .tile-name { font-weight: 600; }
.tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.tile[disabled] { cursor: default; background: var(--page-alt); border-style: dashed; color: var(--text-2); }
.tile[disabled]:hover { border-color: var(--hairline); transform: none; box-shadow: none; }
.tile[disabled]:active { transform: none; }

.tile-icon {
  display: grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  border-radius: 10px;
  background: var(--accent-tint);
  margin-block-end: 8px;
}
.tile-icon svg { inline-size: 22px; block-size: 22px; fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tile[disabled] .tile-icon { background: var(--track); }
.tile[disabled] .tile-icon svg { stroke: var(--text-2); }

/* Selected: a filled accent check in the corner, scaled in over 200ms. */
.tile::after {
  content: "";
  position: absolute;
  inset-block-start: 14px;
  inset-inline-end: 14px;
  inline-size: 20px;
  block-size: 20px;
  border-radius: 980px;
  background: var(--accent-fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.2l3 3 6-6.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
  opacity: 0;
  transform: scale(.6);
  transition: opacity var(--t-hover) var(--ease), transform var(--t-hover) var(--ease-spring);
}
.tile[aria-checked="true"]::after { opacity: 1; transform: none; }
.tile-row { padding-inline-end: 28px; }

/* One line that stays hidden until hover, focus or selection. The space is
   reserved so nothing around the tile moves. */
.tile-hint {
  display: block;
  margin-block-start: 6px;
  min-block-size: 18px;
  color: var(--accent-link);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity var(--t-hover) var(--ease), transform var(--t-hover) var(--ease);
}
.tile-hint:empty { display: none; }
.tile:hover .tile-hint, .tile:focus-visible .tile-hint, .tile[aria-checked="true"] .tile-hint { opacity: 1; transform: none; }

.badge {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid var(--accent-link);
  border-radius: 980px;
  color: var(--accent-link);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.02em;
  font-weight: 600;
  vertical-align: middle;
  white-space: nowrap;
}
.tile-lead { display: inline-flex; align-items: center; gap: 8px; min-inline-size: 0; }

.tile-name { font-weight: 600; }
.tile-row { display: flex; align-items: baseline; justify-content: space-between; inline-size: 100%; gap: 12px; }
.tile-sub { color: var(--text-2); font-size: 14px; line-height: 18px; letter-spacing: -0.016em; }
.tile-desc { margin-block-start: 8px; color: var(--text-2); text-wrap: pretty; }
.tile-price { color: var(--text); font-size: 14px; line-height: 18px; letter-spacing: -0.016em; font-variant-numeric: tabular-nums; }
.tile-price strong { font-size: 17px; font-weight: 600; }
.tile-was { text-decoration: line-through; color: var(--text-2); }
.tile-save { color: var(--success); font-size: 14px; line-height: 18px; letter-spacing: -0.016em; }
.tile[disabled] .tile-price { color: var(--text-2); }

.soon {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 980px;
  background: var(--track);
  color: var(--text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 600;
  vertical-align: middle;
}

.combo { display: flex; align-items: center; gap: 12px; inline-size: 100%; }
.combo-agent {
  flex: 1;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--accent-tint);
  color: var(--text);
  text-align: center;
  font-weight: 600;
}
.combo-plus { flex: 0 0 auto; inline-size: 28px; block-size: 28px; color: var(--text-2); }
.combo-plus svg { inline-size: 28px; block-size: 28px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; fill: none; }

/* summary */
.summary {
  position: relative;
  padding: 30px;
  border-radius: var(--radius);
  background: var(--page-alt);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-card);
}
.summary-mark {
  position: absolute;
  inset-block-start: 22px;
  inset-inline-end: 24px;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 980px;
  background: var(--card);
  border: 1px solid var(--hairline);
  display: grid;
  place-items: center;
}
.summary-mark img { inline-size: 24px; block-size: 24px; display: block; }
.summary-rows { display: grid; margin: 0; }
.summary-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-block: 14px;
  border-block-end: 1px solid var(--hairline);
}
.summary-row:first-child { padding-inline-end: 52px; }
.summary-row dt { color: var(--text-2); }
.summary-row dd { margin: 0; text-align: end; }
.summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-block: 20px 4px;
}
.summary-total-label { color: var(--text-2); }
.summary-price { font-size: 28px; line-height: 32px; font-weight: 700; letter-spacing: 0.007em; font-variant-numeric: tabular-nums; }
.summary-price small { font-size: 17px; font-weight: 400; color: var(--text-2); margin-inline-start: 6px; letter-spacing: -0.022em; }
.summary-fine { margin-block-start: 14px; color: var(--text-2); font-size: 14px; line-height: 18px; letter-spacing: -0.016em; text-wrap: pretty; }
.summary-cta { margin-block-start: 22px; display: flex; justify-content: flex-end; }
@media (max-width: 734px) { .summary-cta .btn { inline-size: 100%; } }

/* sticky bar */
body { position: relative; }
.bar-track { position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 1px; block-size: 1px; pointer-events: none; visibility: hidden; }
.bar {
  position: fixed;
  inset-inline: 0;
  inset-block-start: var(--nav-h);
  z-index: 95;
  block-size: var(--bar-h);
  background: color-mix(in srgb, var(--page) 72%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-block-end: 1px solid var(--hairline);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease-sheet), visibility 0s linear var(--t-reveal);
}
@media (prefers-reduced-transparency: reduce) {
  .bar { background: var(--page); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.bar.is-on { transform: none; opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.bar-inner {
  max-inline-size: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  block-size: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.bar-name { font-weight: 600; }
.bar-end { display: flex; align-items: center; gap: 16px; }
.bar-price { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bar-price span { display: inline-block; }
@media (max-width: 734px) {
  .bar { inset-block-start: auto; inset-block-end: var(--consent-h, 0px); border-block-end: 0; border-block-start: 1px solid var(--hairline); transform: translateY(8px); }
  .bar.is-on { transform: none; }
  .bar-inner { padding-inline: 6.25%; }
  .has-bar body { padding-block-end: calc(var(--consent-h, 0px) + var(--bar-h)); }
}
@media (prefers-reduced-motion: reduce) {
  .bar { transform: none; transition: opacity var(--t-reveal) var(--ease); }
}

/* -------------------------------------------------------------- form --- */

.apply[hidden] { display: none; }
.form-card { margin-block-start: 32px; }
@media (max-width: 734px) { .form-card { padding: 22px 18px; } }

/* The two one-line memos above the fields: the configurator choices, and
   the remembered identity. Each carries its own שינוי. */
.memo-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding: 12px 16px;
  margin-block-end: 20px;
  border-radius: var(--radius-sm);
  background: var(--accent-tint);
  color: var(--text);
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.016em;
}
.memo-line[hidden] { display: none; }
.memo-line .link-action { min-block-size: 32px; font-size: 15px; line-height: 20px; }
.memo-line strong { font-weight: 600; }

.field { margin-block-end: 20px; }
.field label { display: block; margin-block-end: 7px; font-weight: 400; }
.req { color: var(--error); margin-inline-start: 2px; }
.opt { color: var(--text-2); font-size: 14px; letter-spacing: -0.016em; margin-inline-start: 6px; }

.field input[type="text"],
.field input[type="tel"] {
  inline-size: 100%;
  font-size: 17px;
  line-height: 20px;
  letter-spacing: -0.022em;
  font-family: inherit;
  color: var(--text);
  background: var(--page);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  min-block-size: 44px;
  appearance: none;
  transition: border-color var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease);
}
.field input:hover { border-color: var(--text-3); }
.field input:focus-visible {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--focus-ring);
}
.field input[aria-invalid="true"] { border-color: var(--error); }

.form-grid { display: grid; gap: 0 var(--gutter); }
@media (min-width: 735px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.form-grid[hidden] { display: none; }

.field-check { display: flex; align-items: flex-start; gap: 11px; margin-block-end: 10px; }
.field-check input {
  flex: 0 0 auto;
  inline-size: 20px;
  block-size: 20px;
  margin: 2px 0 0;
  accent-color: var(--accent-fill);
  cursor: pointer;
}
.field-check label { margin: 0; color: var(--text-2); font-size: 14px; line-height: 20px; letter-spacing: -0.016em; cursor: pointer; }
.consent-note { color: var(--text-2); font-size: 14px; line-height: 18px; letter-spacing: -0.016em; margin-block-end: 22px; }

.field-error, .form-error { color: var(--error); font-size: 14px; line-height: 18px; letter-spacing: -0.016em; margin-block-start: 7px; }
.field-error[hidden] { display: none; }
.form-error { margin-block-start: 14px; text-align: center; }
.form-error:empty { margin-block-start: 0; }
.form-error:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.form-error a { color: var(--error); text-decoration: underline; }

/* Off screen rather than display:none, so bots fill it and humans never see it. */
.hp { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Space held from first paint so the submit button never jumps when the widget arrives. */
.turnstile-slot { margin-block-end: 18px; display: flex; justify-content: center; min-block-size: 72px; }

.form-actions { display: flex; justify-content: flex-end; }
@media (max-width: 734px) {
  .form-actions {
    position: sticky;
    inset-block-end: calc(var(--consent-h, 0px) + 8px);
    padding-block: 8px;
    background: color-mix(in srgb, var(--card) 88%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .form-actions .btn { inline-size: 100%; }
  /* The sticky price bar sits at the bottom on a phone; the submit button
     sticks just above it, never behind it. */
  .has-bar .form-actions { inset-block-end: calc(var(--consent-h, 0px) + var(--bar-h) + 8px); }
}

.form-success { text-align: center; padding-block: 8px; }
.form-success[hidden] { display: none; }
.success-text { margin-block-start: 10px; color: var(--text-2); }
.form-success .btn { margin-block-start: 24px; }

/* ---------------------------------------------------------- timeline --- */
/* Four points on one accent line at desktop, a stacked rail on a phone. */

.timeline {
  margin-block-start: 32px;
  display: grid;
  gap: 24px;
  position: relative;
  padding-inline-start: 28px;
}
.timeline::before {
  content: "";
  position: absolute;
  inset-block: 8px;
  inset-inline-start: 7px;
  inline-size: 2px;
  background: var(--accent);
  opacity: .5;
}
.tl-item { position: relative; }
.tl-item::before {
  content: "";
  position: absolute;
  inset-block-start: 4px;
  inset-inline-start: -28px;
  inline-size: 16px;
  block-size: 16px;
  border-radius: 980px;
  background: var(--page);
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 4px var(--accent-tint);
}
.tl-item p { margin-block-start: 6px; color: var(--text-2); text-wrap: pretty; }
@media (min-width: 735px) {
  .timeline { grid-template-columns: repeat(4, 1fr); gap: 22px; padding-inline-start: 0; padding-block-start: 32px; }
  .timeline::before { inset-block: auto; inset-block-start: 7px; inset-inline: 8px; block-size: 2px; inline-size: auto; }
  .tl-item::before { inset-block-start: -32px; inset-inline-start: 0; }
}

/* -------------------------------------------------------------- faq --- */

.faq { margin-block-start: 32px; border-block-start: 1px solid var(--hairline); }
.faq-item { border-block-end: 1px solid var(--hairline); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding-block: 16px;
  padding-inline-end: 36px;
  position: relative;
  font-size: 19px;
  line-height: 27px;
  letter-spacing: 0.011em;
  font-weight: 400;
  transition: color var(--t-hover) var(--ease);
}
.faq-item summary:hover { color: var(--accent-link); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  position: absolute;
  inset-inline-end: 8px;
  inset-block-start: 25px;
  inline-size: 10px;
  block-size: 10px;
  border-inline-end: 1.5px solid var(--text-2);
  border-block-end: 1.5px solid var(--text-2);
  transform: rotate(var(--chev-closed));
  transform-origin: 50% 50%;
}
@media (prefers-reduced-motion: no-preference) { .faq-item summary::after { transition: transform var(--t-hover) var(--ease); } }
.faq-item[open] summary::after { transform: rotate(var(--chev-open)); }
.faq-body { padding-block-end: 18px; color: var(--text-2); max-inline-size: 66ch; text-wrap: pretty; }

/* ------------------------------------------------------------ footer --- */

.footer {
  background: var(--footer-bg);
  border-block-start: 1px solid var(--hairline);
  padding-block: 18px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  color: var(--text-2);
}
.footer > .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
.footer .logo-mark { block-size: 22px; } .footer .logo-word { block-size: 13px; } .footer .logo-voice { font-size: 16px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; flex: 1; }
.footer-links a { display: inline-flex; align-items: center; min-block-size: 28px; color: var(--text-2); }
.footer-links a:hover { color: var(--accent-link); text-decoration: underline; }
.footer-copy { margin: 0; white-space: nowrap; }
@media (max-width: 734px) { .footer > .wrap { gap: 8px 16px; } .footer-links { flex-basis: 100%; order: 3; } }

/* ------------------------------------------------------- legal pages --- */

.legal { padding-block: 56px 80px; }
.legal h1 { font-size: 40px; line-height: 44px; margin-block-end: 8px; }
.legal h2 { font-size: 21px; line-height: 29px; font-weight: 600; margin-block: 36px 12px; }
.legal p, .legal li { color: var(--text-2); text-wrap: pretty; }
.legal p { margin-block-end: 12px; }
.legal ul { margin: 0 0 12px; padding-inline-start: 22px; }
.legal li { margin-block-end: 6px; }
.legal .updated { font-size: 14px; }
.legal a { text-decoration: underline; }
.legal .back { display: inline-block; margin-block-start: 40px; }
.legal .card { border: 1px solid var(--hairline); }

/* ---------------------------------------------------- consent banner --- */
/* Fixed to the bottom; the page reserves its exact height underneath
   (--consent-h, measured by app.js) at the END of the document so nothing
   already painted moves. */

.consent {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 150;
  background: var(--card);
  border-block-start: 1px solid var(--hairline);
  padding-block: 14px;
  padding-inline: var(--gutter);
  box-shadow: var(--shadow-card);
}
.consent[hidden] { display: none; }
.consent-inner { max-inline-size: var(--wrap); margin-inline: auto; display: flex; flex-direction: column; gap: 12px; }
.consent-text { color: var(--text-2); font-size: 14px; line-height: 20px; letter-spacing: -0.016em; text-wrap: pretty; }
.consent-text a { text-decoration: underline; }
.consent-actions { display: flex; gap: 10px; }
.consent-actions .btn { flex: 1 1 0; min-inline-size: 0; }
@media (min-width: 735px) {
  .consent-inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
  .consent-actions { flex: 0 0 auto; }
  .consent-actions .btn { flex: 0 0 auto; }
}
.has-consent-banner body { padding-block-end: var(--consent-h, 0px); }

/* ---------------------------------------------------- reduced motion --- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero-headline, .demo-ground > .wrap, .hero-glow, .step-body { animation: none; }
  .wave rect { transform: none; }
  .btn:active, .tile:active, .play-btn:active, .play-btn:hover, .tile:hover, .cap:hover { transform: none; }
  .tile::after, .tile-hint { transform: none; }
}

/* Native tap targets. Every action is at least 44px tall on phone, and the
   primary action of each section runs full width where a thumb expects it. */
@media (max-width: 734px) {
  .btn:not(.topbar-cta):not(.player-btn) { min-block-size: 44px; }
  .summary-cta .btn, .form-actions .btn, .hero-actions .btn { inline-size: 100%; }
  .bar-inner { padding-block: 10px; }
  .bar-end { flex: 1; justify-content: space-between; gap: 12px; }
  #bar-next { flex: 1; max-inline-size: 220px; }
  #transcript-toggle, #config-change, .link-action.link-sm { min-block-size: 44px; display: inline-flex; align-items: center; padding-inline: 8px; margin-inline: -8px; }
  .consent-actions .btn { inline-size: 100%; }
}
@media (min-width: 735px) {
  .summary-cta .btn, .form-actions .btn { min-inline-size: 200px; }
}

.hero-sub { margin: 14px auto 0; max-inline-size: 30ch; text-align: center; font-size: 19px; line-height: 25px; letter-spacing: -0.02em; color: var(--text-2); text-wrap: balance; }
@media (min-width: 735px) { .hero-sub { font-size: 21px; line-height: 27px; } }