/* Toviq landing page. Visual identity: v1.5 "zinc and ice" palette and IBM Plex Sans.
   Token names follow docs/v1.5-visual/design-direction.md. For this marketing page the
   owner lifted the app's banned list (motion, gradients and soft glows in the palette
   only). All motion is inside one prefers-reduced-motion: no-preference block at the end. */

/* ---- Fonts: IBM Plex Sans, self-hosted (OFL, see fonts/LICENSE-IBM-Plex-OFL.txt) ---- */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Tokens ---- */
:root {
  color-scheme: dark;

  --color-bg: #18181b;
  --color-surface: #232327;
  --color-surface-raised: #2c2c31;
  --color-border: #3a3a40;
  --color-border-field: #71717a;
  --color-text: #f4f4f5;
  --color-text-muted: #a1a1aa;
  --color-accent: #7dd3fc;
  --color-accent-hover: #a5e1fd;
  --color-on-accent: #06202e;
  --color-accent-text: #7dd3fc;
  --color-highlight: #e0f2fe;
  --color-focus: #7dd3fc;
  --color-warning: #fcd34d;

  /* Marketing-page only: soft ice glow behind the hero visual (accent at low alpha). */
  --glow-ice: rgb(125 211 252 / 0.14);
  /* Marketing-page only: soft ice background for words adapted to the client. */
  --color-mark: rgb(125 211 252 / 0.22);

  --font-sans: "IBM Plex Sans", system-ui, sans-serif;

  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  /* Marketing page: larger fluid display sizes (owner override of the app type scale). */
  --text-h2: clamp(1.75rem, 1.15rem + 2.2vw, 2.75rem);
  --text-hero: clamp(2rem, 1.1rem + 3vw, 3.25rem);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --gutter: 16px;
  --width-page: 40rem;
  --width-wide: 60rem;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;
  --touch-min: 48px;
  --row-min: 56px;

  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --section-pad: clamp(64px, 9vw, 112px);
  --header-h: 56px;
}

@media (min-width: 768px) {
  :root {
    --gutter: 24px;
    --header-h: 72px;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  overflow-wrap: break-word;
  overflow-x: clip;
}

h1,
h2,
h3,
p,
ol,
ul,
dl,
dd {
  margin: 0;
}

:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
}

a {
  color: var(--color-accent-text);
  text-underline-offset: 3px;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-2);
  z-index: 30;
  transform: translateY(-200%);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 700;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  text-decoration: none;
}

.skip-link:focus {
  transform: none;
}

.wrap {
  width: 100%;
  max-width: calc(var(--width-wide) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.prose {
  max-width: var(--width-page);
}

.icon {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-sm {
  width: 20px;
  height: 20px;
}

/* ---- Sticky header ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--color-bg);
  border-bottom: 1px solid transparent;
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-h);
}

.site-header.scrolled {
  border-bottom-color: var(--color-border);
}

.wordmark {
  font-size: var(--text-xl);
  line-height: 1.3;
  font-weight: 700;
  color: var(--color-text);
}

/* ---- Footer ---- */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-6);
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
}

.footer-line {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.footer-line .wordmark {
  font-size: var(--text-base);
  margin-right: var(--space-1);
}

.footer-line a,
.legal a {
  color: var(--color-accent-text);
}

/* ---- Legal pages (polityka-prywatnosci.html, regulamin.html) ---- */
.legal h1 {
  font-size: var(--text-h2);
  max-width: none;
  margin-bottom: var(--space-3);
}

.legal h2 {
  font-size: var(--text-xl);
  max-width: none;
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
}

.legal p,
.legal li {
  margin-bottom: var(--space-3);
}

.legal ol,
.legal ul {
  padding-left: var(--space-5);
}

.legal li > ol,
.legal li > ul {
  margin-top: var(--space-3);
}

.legal-table {
  overflow-x: auto;
}

.legal table {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--space-4);
}

.legal th,
.legal td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.legal-date {
  color: var(--color-text-muted);
}

a.wordmark {
  text-decoration: none;
}

/* ---- Type and sections ---- */
/* Display type: weight 600, tight line height, balanced lines so no heading
   ends on a lone word; body copy gets "pretty" wrapping. */
h1 {
  font-size: var(--text-hero);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.015em;
  text-wrap: balance;
  max-width: 22ch;
}

h2 {
  font-size: var(--text-h2);
  line-height: 1.16;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
  max-width: 26ch;
}

h3 {
  font-size: var(--text-lg);
  line-height: 1.35;
  font-weight: 600;
  text-wrap: balance;
}

p,
li,
dd,
summary {
  text-wrap: pretty;
}

.section {
  padding-block: var(--section-pad);
}

.on-bg {
  --panel: var(--color-surface);
  --panel-raised: var(--color-surface-raised);
  background: var(--color-bg);
}

.on-surface {
  --panel: var(--color-bg);
  --panel-raised: var(--color-surface-raised);
  background: var(--color-surface);
}

.stack > * + * {
  margin-top: var(--space-4);
}

h2 + .stack,
h2 + p,
h2 + ol,
h2 + ul,
h2 + .faq {
  margin-top: var(--space-6);
}

.lead {
  font-size: var(--text-lg);
  line-height: 1.5;
}

.tag {
  display: inline-block;
  align-self: flex-start;
  justify-self: start;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border-field);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* ---- Buttons and links ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: var(--text-base);
  line-height: 1.25;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.btn:hover {
  background: var(--color-accent-hover);
}

.btn-sm {
  padding-inline: var(--space-4);
}

.btn-lg {
  width: 100%;
  font-size: var(--text-lg);
  padding-inline: var(--space-6);
}

@media (min-width: 480px) {
  .btn-lg {
    width: auto;
  }
}

.btn-dark {
  background: var(--color-bg);
  color: var(--color-text);
}

.btn-dark:hover {
  background: var(--color-surface-raised);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  font-weight: 500;
  font-size: var(--text-lg);
}

.text-link:hover {
  text-decoration-thickness: 3px;
}

.replay {
  display: none;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding: 0 var(--space-2);
  border: 0;
  background: none;
  color: var(--color-accent-text);
  font: inherit;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.replay:hover {
  color: var(--color-accent-hover);
}

.js .replay {
  display: inline-flex;
}

/* ---- Skeleton bars (graphics inside illustrations) ---- */
.sk {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: var(--color-border-field);
}

.sk-line {
  width: var(--w, 100%);
}

.sk-head {
  width: 45%;
  height: 10px;
  background: var(--color-text-muted);
}

.sk-foot {
  width: 38%;
  background: var(--color-border-field);
  margin-top: var(--space-1);
}

.sk-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.sk-lbl {
  width: 22%;
  flex: none;
}

.sk-val {
  width: var(--w, 60%);
  height: 10px;
  background: var(--color-highlight);
}

/* ---- Hero ---- */
/* Phone: copy first, then a compact visual whose top shows under the button.
   From 900px: two columns, copy on the left, the visual on the right. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: var(--space-5) var(--space-7);
}

/* The header and the hero use the wider column, so the wordmark lines up with the headline. */
.site-header > .wrap,
.hero > .wrap {
  max-width: calc(75rem + 2 * var(--gutter));
}

.hero-grid {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}

.hero h1 {
  max-width: 22ch;
}

.h-line {
  display: block;
  text-wrap: balance;
}

.hero .lead {
  margin-top: var(--space-4);
}

.hero-cta {
  margin-top: var(--space-5);
}

.cta-note {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
}

/* The soft ice glow sits behind the visual only: one radial gradient that fades
   to nothing before the edge of its box, so it has no hard edge and is symmetric. */
.viz-wrap {
  position: relative;
}

.viz-wrap::before {
  content: "";
  position: absolute;
  inset: -4% -10%;
  z-index: -1;
  background: radial-gradient(closest-side, var(--glow-ice) 78%, transparent);
  pointer-events: none;
}

.viz {
  display: grid;
  gap: 0;
  padding: var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.viz-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.speech {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.or {
  align-self: center;
  font-size: var(--text-sm);
  line-height: 1.2;
  color: var(--color-text-muted);
}

/* Each recording is a compact row of at most two lines; the full text stays in the page. */
.bubble {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-sm);
  color: var(--color-text);
  font-size: var(--text-sm);
  line-height: 1.4;
}

.bubble > span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.bubble .icon {
  color: var(--color-accent-text);
}

.bubble::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 2px solid var(--color-highlight);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}

.viz-arrow {
  width: 24px;
  height: 24px;
  justify-self: center;
  margin: var(--space-1) auto;
  color: var(--color-accent-text);
  transform: rotate(90deg);
}

.mail-col {
  display: grid;
  gap: var(--space-2);
  align-self: center;
}

.viz-cap {
  font-weight: 500;
  color: var(--color-text);
}

.mail {
  background: var(--color-surface);
  border: 1px solid var(--color-border-field);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  font-size: 0.9375rem;
  line-height: 1.4;
}

.mail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  font-weight: 700;
  color: var(--color-text);
}

.mail-head .icon {
  color: var(--color-accent-text);
}

.mail-fixed {
  color: var(--color-text-muted);
}

.fields {
  margin-block: var(--space-1);
}

.f {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: var(--space-3);
  padding-block: var(--space-1);
}

.f dt {
  color: var(--color-text-muted);
}

.v {
  position: relative;
  display: inline-block;
  color: var(--color-highlight);
  font-weight: 700;
}

.v::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: currentColor;
  transform-origin: left center;
}

@media (min-width: 900px) {
  .hero {
    padding-block: var(--space-6) var(--space-7);
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: var(--space-7);
  }

  .hero .lead {
    font-size: var(--text-xl);
    line-height: 1.45;
  }

  .viz {
    padding: var(--space-4);
  }

  .bubble,
  .mail {
    font-size: 1rem;
  }

  .f {
    grid-template-columns: 6.5rem 1fr;
  }
}

/* ---- Problem ---- */
.problem-grid {
  display: grid;
  gap: var(--space-6);
}

.problem-grid .stack {
  font-size: var(--text-lg);
}


.problem-grid > .stack {
  margin-top: 0;
}

.problem-grid h2 {
  max-width: 24ch;
}

.pull {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.5rem);
  line-height: 1.25;
  font-weight: 600;
  max-width: 26ch;
  color: var(--color-highlight);
  margin-top: var(--space-5);
}

@media (min-width: 900px) {
  /* The headline spans the width (three lines instead of four); the paragraph and the statement sit side by side under it. */
  .problem-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6) var(--space-8);
    align-items: start;
  }

  .problem-grid h2 {
    grid-column: 1 / -1;
  }

  .problem-grid > .stack {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: start;
  }

  .problem-grid .stack > * + * {
    margin-top: 0;
  }
}

/* ---- How it works ---- */
.steps {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-7);
}

.step {
  display: grid;
  gap: var(--space-5);
  align-content: start;
}

.art {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 232px;
  padding: var(--space-4);
  background: var(--panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.art .tag + * {
  margin-top: auto;
}

.art > :last-child {
  margin-bottom: auto;
}

.step-num {
  display: block;
  font-size: 3.5rem;
  line-height: 1;
  font-weight: 700;
  color: var(--color-accent-text);
  margin-bottom: var(--space-3);
}

.step-body p {
  font-size: var(--text-base);
}

@media (min-width: 900px) {
  .art {
    height: 296px;
  }

  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
    margin-top: var(--space-7);
  }
}

/* step 1: recording */
.rec-svg {
  display: block;
  width: 100%;
  height: auto;
}

.bar {
  fill: var(--color-accent);
  transform-box: fill-box;
  transform-origin: center;
}

.rec-btn {
  fill: var(--color-accent);
}

.ring {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.rec-icon {
  color: var(--color-on-accent);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* step 2: highlighted values */
.said {
  color: var(--color-text-muted);
  font-size: var(--text-base);
}

.hl {
  position: relative;
  display: inline-block;
  color: var(--color-highlight);
  font-weight: 700;
}

.hl::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: currentColor;
  transform-origin: left center;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 32px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-highlight);
  border-radius: var(--radius-sm);
  color: var(--color-highlight);
  font-size: var(--text-sm);
  font-weight: 500;
}

/* step 3: send or draft */
.check-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
}

.check-head .icon {
  color: var(--color-accent-text);
}

.sk-line {
  max-width: 100%;
}

.opts {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--row-min);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-field);
  border-radius: var(--radius-md);
  background: var(--panel);
  font-weight: 500;
}

.opt::before {
  content: "";
  position: absolute;
  inset: -1px;
  border: 2px solid var(--color-highlight);
  border-radius: var(--radius-md);
  opacity: 0;
}

.radio {
  position: relative;
  width: 22px;
  height: 22px;
  flex: none;
  border: 2px solid var(--color-border-field);
  border-radius: 9999px;
  display: grid;
  place-items: center;
}

.radio-dot {
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  background: var(--color-highlight);
  transform: scale(0);
}

.opt-a::before {
  opacity: 1;
}

.opt-a .radio-dot {
  transform: scale(1);
}

/* ---- Benefits ---- */
.benefits {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
}

.benefit {
  height: 100%;
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding: var(--space-5);
  background: var(--panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.benefit-text {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.b-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--color-border-field);
  border-radius: var(--radius-md);
  color: var(--color-accent-text);
}

.benefit h3 {
  font-size: var(--text-xl);
  line-height: 1.3;
}

.thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  align-self: center;
}

.thumb {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border-field);
  border-radius: var(--radius-md);
}

.thumb .sk-lbl {
  width: 28%;
}

@media (min-width: 768px) {
  .benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .benefits > li:first-child {
    grid-column: 1 / -1;
  }

  .benefit-wide {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    align-items: center;
  }
}

/* ---- Formats and team ---- */
.fmt-row {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-6);
  align-items: center;
}

.fmt-row p {
  font-size: var(--text-lg);
}

.fmt-row + .fmt-row {
  margin-top: var(--space-7);
}

.admin-viz-wrap,
.picker-wrap {
  display: grid;
  gap: var(--space-2);
}

.admin-viz {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4);
  background: var(--panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.mail-stack {
  position: relative;
  flex: none;
  width: 88px;
  height: 112px;
}

.mini {
  position: absolute;
  display: grid;
  align-content: start;
  gap: var(--space-2);
  width: 72px;
  height: 92px;
  padding: var(--space-2);
  background: var(--panel-raised);
  border: 1px solid var(--color-border-field);
  border-radius: var(--radius-sm);
}

.mini:nth-child(1) {
  left: 0;
  top: 0;
}

.mini:nth-child(2) {
  left: 8px;
  top: 8px;
}

.mini:nth-child(3) {
  left: 16px;
  top: 16px;
}

.icon-arrow {
  color: var(--color-accent-text);
}

.fmt-def {
  flex: 1;
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-3);
  background: var(--panel-raised);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
}

.def-row {
  display: grid;
  gap: var(--space-1);
}

.def-lbl {
  font-size: var(--text-sm);
  line-height: 1.3;
  color: var(--color-text);
}

.mini .sk,
.fmt .sk {
  background: var(--color-text-muted);
}

.sk-solid {
  background: var(--color-text-muted);
}

.sk-short {
  width: 55%;
}

.sk-field {
  height: 14px;
  border: 2px dashed var(--color-highlight);
  background: transparent;
  border-radius: var(--radius-sm);
}

.picker {
  padding: var(--space-4);
  background: var(--panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.quotes {
  position: relative;
  min-height: 80px;
  margin-bottom: var(--space-4);
}

.quote {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--panel-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-sm);
}

.quote .icon {
  color: var(--color-accent-text);
}

.fmt-row .quote span {
  font-size: var(--text-base);
}

.quote-b {
  opacity: 0;
}

.cards {
  display: grid;
  gap: var(--space-3);
}

.fmt-slot {
  display: grid;
}

.fmt {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--row-min);
  padding: var(--space-3) var(--space-4);
  background: var(--panel-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.fmt::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 2px solid var(--color-highlight);
  border-radius: var(--radius-md);
  opacity: 0;
  pointer-events: none;
}

.fmt > .icon {
  color: var(--color-accent-text);
}

.fmt-title {
  font-weight: 700;
  line-height: 1.3;
}

.fmt-lines {
  display: none;
}

.fmt-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-highlight);
  opacity: 0;
}

.fmt-1::after,
.fmt-1 .fmt-badge {
  opacity: 1;
}

@media (min-width: 640px) {
  .cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .fmt {
    grid-template-columns: 1fr;
    align-content: start;
    justify-items: start;
    gap: var(--space-2);
    padding: var(--space-4);
    min-height: 168px;
  }

  .fmt-lines {
    display: grid;
    gap: var(--space-2);
    width: 100%;
  }

  .fmt-badge {
    align-self: end;
  }
}

@media (min-width: 900px) {
  .fmt-row {
    grid-template-columns: 1fr 1.25fr;
    gap: var(--space-7);
  }
}

.subsection {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.subsection h3 {
  margin-bottom: var(--space-3);
  font-size: var(--text-xl);
}

.subsection p {
  font-size: var(--text-lg);
}

.link-row {
  margin-top: var(--space-4);
}

/* ---- Examples reel ---- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.reel {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding: var(--space-4);
  background: var(--panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.reel-bar {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.js .reel-bar,
.js .seg-chips {
  display: flex;
}

.seg {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.seg-chips {
  display: none;
}

.seg button {
  min-height: var(--touch-min);
  padding: 0 var(--space-4);
  border: 2px solid var(--color-border-field);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

.seg button:hover {
  background: var(--color-surface-raised);
}

.seg .tab {
  font-weight: 700;
}

.seg .tab[aria-pressed="true"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}

.seg .tab[aria-pressed="true"]:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

.seg .chip-btn[aria-pressed="true"] {
  border-color: var(--color-highlight);
  background: var(--color-surface-raised);
}

.reel-type {
  display: grid;
  gap: var(--space-4);
}

html:not(.js) .reel-type + .reel-type {
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.js .reel-type:not(.is-active),
.js .reel-type-title,
.js .variant-name {
  display: none;
}

.reel-type-title {
  font-size: var(--text-xl);
  line-height: 1.3;
}

.reel-grid {
  display: grid;
  gap: var(--space-2);
  align-items: start;
}

.variants {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.js .variants {
  gap: 0;
}

/* Only the active variant takes room, so the card sits right under its own speech
   (no height is reserved for the longest variant). */
.js .variant:not(.is-active) {
  display: none;
}

.js .reel-type.is-scene .variant {
  padding: var(--space-2) var(--space-3);
}

.variant {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--panel-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-sm);
}

.variant-name {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-muted);
}

.spoken {
  font-size: var(--text-sm);
  line-height: 1.6;
}

.sv,
.val {
  color: var(--color-highlight);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.fix {
  color: var(--color-text-muted);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.wv {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 20px;
}

.wv i {
  display: block;
  width: 4px;
  height: 12px;
  border-radius: 2px;
  background: var(--color-accent);
}

.wv i:nth-child(1) { height: 8px; }
.wv i:nth-child(2) { height: 14px; }
.wv i:nth-child(3) { height: 20px; }
.wv i:nth-child(4) { height: 10px; }
.wv i:nth-child(5) { height: 16px; }
.wv i:nth-child(6) { height: 8px; }
.wv i:nth-child(7) { height: 12px; }

.rmail {
  align-self: start;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.35;
}

.rmail .f {
  padding-block: var(--space-1);
}

.rmail > p,
.rmail > .fields {
  margin-top: 5px;
}

.rm-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-border);
  font-weight: 700;
}

.rm-head .icon {
  color: var(--color-accent-text);
}

.same {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-highlight);
  border-radius: var(--radius-sm);
  color: var(--color-highlight);
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
}

.rmail .fields {
  margin-block: 0;
}

.reel-ctls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-4);
}

.js .reel-next[hidden] {
  display: none;
}

.chip-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.chip-btn[hidden] {
  display: none;
}

.chip-check {
  visibility: hidden;
  color: var(--color-accent-text);
}

.chip-btn.seen .chip-check {
  visibility: visible;
}

.rmail-col {
  display: grid;
  gap: var(--space-4);
}

/* Adapted words (marked, never struck through) and slot values. */
mark.adapted {
  padding: 0 2px;
  border-radius: var(--radius-sm);
  background: var(--color-mark);
  color: var(--color-highlight);
  font-weight: 700;
}

.ph {
  display: inline-block;
  min-width: calc(var(--w, 0) * 1ch);
  padding: 0 var(--space-1);
  border: 1px dashed var(--color-border-field);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.1;
}

.ph-miss {
  border: 2px dashed var(--color-warning);
  color: var(--color-warning);
  font-weight: 700;
}

.slot {
  display: inline-block;
  padding: 0 var(--space-1);
  border: 1px dashed var(--color-border-field);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: var(--text-sm);
}

/* A .sw word shows its final form; main.js swaps it from the base form while a run plays. */
.sw-f {
  display: none;
}

.sw[data-s="from"] > .sw-f {
  display: inline;
}

.sw[data-s="from"] > .sw-t {
  display: none;
}

.sw-a {
  display: inline-block;
}

.ad-leg {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.sp-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
}

.sp-label .n {
  display: none;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--color-highlight);
  border-radius: 9999px;
  color: var(--color-highlight);
  font-size: var(--text-sm);
}

/* "Format firmy": the base format, shown only when nothing animates. */
.fmt-base {
  display: none;
  gap: var(--space-3);
}

html:not(.js) .fmt-base {
  display: grid;
}

.js .reel-type.is-scene .fmt-base {
  display: none;
}

/* Optional-parts scene (client mail, chip 4). Without JS, and under reduced
   motion, it is a set of stacked static panels. */
.scene {
  display: grid;
  gap: var(--space-5);
}

.js .reel-type:not(.is-scene) .opt-scene,
.js .reel-type.is-scene .rm-main,
.js .reel-type.is-scene .rmail-col > .fmt-base {
  display: none;
}

.sc-title {
  font-size: var(--text-lg);
  font-weight: 700;
}

.sp-static {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.sc-note {
  padding: 6px var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.4;
  border: 2px dashed var(--color-warning);
  border-radius: var(--radius-md);
}

.sc-changes {
  color: var(--color-text-muted);
}

.live {
  display: grid;
  gap: var(--space-1);
  align-content: start;
}

.live-labels > * {
  display: none;
}

.live-labels > .lb4 {
  display: flex;
}

.sc-note-live,
.sc-ask,
.rm-inline,
.rm-collapse {
  display: none;
}

.sents > .sent {
  display: block;
}

.f.rm-collapse > dt,
.f.rm-collapse > dd {
  min-height: 0;
  margin: 0;
  overflow: hidden;
}

.rmail > .sents {
  margin-top: 5px;
}

.carry {
  position: relative;
}

.carry::after {
  content: "";
  position: absolute;
  inset: -3px -6px;
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-sm);
  opacity: 0;
  pointer-events: none;
}

.sc-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: var(--text-sm);
  font-weight: 700;
}

.sc-btn::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid var(--color-highlight);
  border-radius: var(--radius-md);
  opacity: 0;
}

.live-foot {
  display: grid;
  gap: var(--space-1);
}

.sc-ask > .ask-q {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border-field);
  border-radius: var(--radius-lg);
}

.sc-q {
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.3;
}

.sc-status {
  padding: var(--space-2) 0;
  color: var(--color-accent-text);
  font-weight: 500;
}

.reel-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.rm-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.lg {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.lg i {
  display: block;
  width: 24px;
  border-top: 3px solid var(--color-text-muted);
}

.lg i.lg-val {
  border-top-color: var(--color-highlight);
}

@media (min-width: 900px) {
  .reel {
    padding: var(--space-5);
  }

  .reel-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
    gap: var(--space-6);
  }

  .spoken {
    font-size: var(--text-lg);
  }

  .rmail {
    padding: var(--space-3) var(--space-4);
  }
}


/* ---- Examples reel on phones (up to 640 px) ----
   One stage: the format card on top and the live speech as a chat bubble under it, so
   the visitor watches both fill in together. Controls are compact: a one-row segmented
   control for the two mail types, one scrollable row of chips, one row of buttons under
   the stage. The fixed-height card and the 3-line bubble (the part that scrolls) are in
   the motion block below, so that without motion everything is shown in full. */
@media (max-width: 640px) {
  .js .reel {
    gap: var(--space-2);
    margin-top: var(--space-5);
    padding: var(--space-3);
  }

  .js .reel-bar {
    display: contents;
  }

  .js .reel > .seg {
    order: 1;
  }

  .js .reel > .seg-chips {
    order: 2;
  }

  .js .reel > .reel-type {
    order: 3;
  }

  .js .reel-ctls {
    order: 4;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
  }

  .js .reel > .reel-foot {
    order: 5;
  }

  /* Segmented control: two joined buttons in one 48 px row. */
  .js .reel > .seg:not(.seg-chips) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }

  .js .seg .tab {
    padding: 0 var(--space-2);
    font-size: var(--text-sm);
    line-height: 1.2;
  }

  .js .seg .tab:first-child {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
  }

  .js .seg .tab:last-child {
    margin-left: -2px;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
  }

  .js .seg .tab[aria-pressed="true"] {
    position: relative;
    z-index: 1;
  }

  /* Chips: one row that scrolls sideways, with a fade at the edge that has more. */
  .js .seg-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--space-3);
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--space-3));
    padding: 6px var(--space-3);
    margin-block: -6px;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--space-3), #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--space-3), #000 calc(100% - 28px), transparent);
  }

  .js .seg-chips.at-start {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }

  .js .seg-chips.at-end {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--space-3));
    mask-image: linear-gradient(to right, transparent, #000 var(--space-3));
  }

  .js .seg-chips.at-start.at-end {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .js .seg-chips::-webkit-scrollbar {
    display: none;
  }

  .js .seg-chips button {
    flex: none;
    scroll-snap-align: start;
    padding: 0 var(--space-3);
    font-size: var(--text-sm);
    white-space: nowrap;
  }

  .js .reel-ctls .replay {
    justify-content: flex-start;
    gap: var(--space-1);
    padding: 0 var(--space-1);
    font-size: var(--text-sm);
    white-space: nowrap;
  }

  .js .reel-ctls .reel-next {
    justify-content: flex-end;
  }

  .js .reel-foot {
    gap: var(--space-1) var(--space-3);
  }

  .js .rm-legend {
    flex-direction: column;
    gap: 2px;
    font-size: 0.8125rem;
  }

  .js .reel-type {
    gap: 0;
  }

  .js .reel-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .js .rmail-col {
    order: 1;
  }

  .js .variants {
    order: 2;
  }

  /* The speech is a chat bubble under the card, with a small tail pointing up to it. */
  .js .variant {
    position: relative;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-3);
    border-radius: var(--radius-lg);
  }

  .js .reel-type.is-scene .variant {
    padding: var(--space-4) var(--space-3);
  }

  .js .variant::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 22px;
    width: 10px;
    height: 10px;
    background: var(--panel-raised);
    border-top: 1px solid var(--color-border);
    border-left: 1px solid var(--color-border);
    transform: rotate(45deg);
  }

  .js .variant .wv {
    gap: 2px;
    margin-top: 1px;
  }

  .js .variant .wv i {
    width: 3px;
  }

  .js .spoken {
    font-size: var(--text-sm);
    line-height: 1.5;
  }
}

/* ---- Audience ---- */
.lead-stack {
  font-size: var(--text-lg);
}

.soon {
  padding: var(--space-4) var(--space-5);
  border: 2px dashed var(--color-border-field);
  border-radius: var(--radius-md);
}

/* ---- FAQ ---- */
.faq {
  display: grid;
  gap: var(--space-2);
  max-width: var(--width-page);
}

.faq details {
  background: var(--panel);
  border: 1px solid var(--color-border-field);
  border-radius: var(--radius-md);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--row-min);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-lg);
  line-height: 1.4;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary:hover {
  background: var(--color-surface-raised);
  border-radius: var(--radius-md);
}

.faq details[open] > summary .icon {
  transform: rotate(180deg);
}

.faq .answer {
  padding: 0 var(--space-4) var(--space-4);
}

/* ---- Final CTA: full-bleed ice section ---- */
.final {
  position: relative;
  overflow-x: clip;
  background: linear-gradient(135deg, var(--color-accent), var(--color-highlight));
  color: var(--color-on-accent);
}

.final h2 {
  font-size: clamp(2rem, 1.1rem + 3.4vw, 3.5rem);
  max-width: 20ch;
}

.final .stack {
  max-width: var(--width-page);
  font-size: var(--text-lg);
}

.final .btn {
  margin-top: var(--space-5);
}

.final .wrap {
  position: relative;
}

.final-rings {
  position: absolute;
  right: -120px;
  top: 50%;
  width: 480px;
  height: 480px;
  margin-top: -240px;
  fill: none;
  stroke: var(--color-on-accent);
  stroke-width: 2;
  opacity: 0.16;
}

@media (min-width: 900px) {
  .final-rings {
    right: -6%;
    width: 560px;
    height: 560px;
    margin-top: -280px;
    opacity: 0.22;
  }
}

/* ---- Demo form (#umow-demo) ---- */
.demo h2 {
  font-size: var(--text-h2);
  margin-bottom: var(--space-5);
}

html:not(.js) .demo-form {
  display: none;
}

.demo-form {
  display: grid;
  gap: var(--space-4) var(--space-5);
  max-width: var(--width-page);
}

.demo-form[hidden] {
  display: none;
}

@media (min-width: 641px) {
  .demo-form {
    grid-template-columns: 1fr 1fr;
  }

  .df-wide {
    grid-column: 1 / -1;
  }
}

.df-field {
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.df-field label {
  font-weight: 600;
}

.df-optional {
  font-weight: 400;
  color: var(--color-text-muted);
}

.df-field input,
.df-field textarea {
  font: inherit;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border-field);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  min-height: var(--touch-min);
  width: 100%;
}

.df-field textarea {
  resize: vertical;
}

.df-field [aria-invalid="true"] {
  border-color: var(--color-warning);
}

.df-error,
.df-status {
  color: var(--color-warning);
  font-size: var(--text-sm);
}

.df-status {
  margin-top: var(--space-3);
}

.df-info {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
}

.df-info a {
  color: var(--color-accent-text);
}

.df-thanks {
  font-size: var(--text-lg);
  max-width: var(--width-page);
}

/* The honeypot: off-screen for people, there for bots (spec §3.4). */
.df-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.btn[disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* ---- Motion ----
   Every transition and animation lives inside this block. Under
   prefers-reduced-motion: reduce (and without JS) nothing moves and every
   graphic stays in its final state. Hidden-initial states exist only under
   .js. Animate transform and opacity (a few small colour changes). */
@media (prefers-reduced-motion: no-preference) {
  /* A scene's visual always shows its finished state at rest. When the scene
     starts, its pieces replay from a dimmed state (never from nothing). */
  @keyframes rise {
    from { opacity: 0.3; transform: translateY(12px); }
  }
  @keyframes soft {
    from { opacity: 0.3; }
  }
  @keyframes slide-l {
    from { opacity: 0.3; transform: translateX(-16px); }
  }
  @keyframes fade {
    from { opacity: 0; }
  }
  @keyframes draw-x {
    from { transform: scaleX(0); }
  }
  @keyframes ring-pulse {
    0% { opacity: 0; }
    25%, 70% { opacity: 1; }
    100% { opacity: 0; }
  }
  @keyframes badge-pulse {
    50% { transform: scale(1.15); }
  }
  @keyframes pop {
    from { opacity: 0; transform: scale(0.85); }
  }
  @keyframes bar-wave {
    0% { transform: scaleY(0.2); }
    50% { transform: scaleY(1); }
    100% { transform: scaleY(1); }
  }
  @keyframes ring-out {
    0% { opacity: 0.6; transform: scale(1); }
    100% { opacity: 0; transform: scale(2); }
  }
  @keyframes hl-on {
    from { color: var(--color-text-muted); }
  }
  @keyframes sel-a {
    0%, 22% { opacity: 1; }
    28%, 72% { opacity: 0; }
    80%, 100% { opacity: 1; }
  }
  @keyframes sel-b {
    0%, 22% { opacity: 0; }
    28%, 72% { opacity: 1; }
    80%, 100% { opacity: 0; }
  }
  @keyframes dot-a {
    0%, 22% { transform: scale(1); }
    28%, 72% { transform: scale(0); }
    80%, 100% { transform: scale(1); }
  }
  @keyframes dot-b {
    0%, 22% { transform: scale(0); }
    28%, 72% { transform: scale(1); }
    80%, 100% { transform: scale(0); }
  }
  @keyframes quote-b {
    0%, 4% { opacity: 0; }
    10%, 44% { opacity: 1; }
    50%, 100% { opacity: 0; }
  }
  @keyframes quote-a {
    0%, 50% { opacity: 0; }
    58%, 100% { opacity: 1; }
  }
  @keyframes fmt-early {
    0%, 8% { opacity: 0; transform: none; }
    14%, 44% { opacity: 1; transform: translateY(-4px); }
    50%, 100% { opacity: 0; transform: none; }
  }
  @keyframes fmt-late {
    0%, 52% { opacity: 0; transform: none; }
    60%, 100% { opacity: 1; transform: translateY(-4px); }
  }
  @keyframes lift-early {
    0%, 8% { transform: none; }
    14%, 44% { transform: translateY(-4px); }
    50%, 100% { transform: none; }
  }
  @keyframes lift-late {
    0%, 52% { transform: none; }
    60%, 100% { transform: translateY(-4px); }
  }

  /* Hover and focus feedback */
  .btn,
  .bubble,
  .benefit,
  .b-icon,
  .text-link,
  .replay,
  .faq summary,
  .faq summary .icon,
  .site-header {
    transition:
      transform 180ms var(--ease-out),
      background-color 180ms var(--ease-out),
      border-color 180ms var(--ease-out),
      color 180ms var(--ease-out);
  }

  .btn:hover {
    transform: translateY(-2px);
  }

  .btn:active {
    transform: none;
  }

  .text-link .icon {
    transition: transform 180ms var(--ease-out);
  }

  .text-link:hover .icon {
    transform: translateX(4px);
  }

  .benefit:hover {
    transform: translateY(-4px);
    border-color: var(--color-accent);
  }

  .benefit:hover .b-icon {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-on-accent);
  }

  .bubble:hover {
    border-color: var(--color-accent);
  }

  /* Scroll reveal: block fades up once. */
  .js [data-reveal] {
    transition:
      opacity 600ms var(--ease-out) var(--d, 0s),
      transform 600ms var(--ease-out) var(--d, 0s);
  }

  /* A block the visitor has already scrolled past shows at once, without the transition. */
  .js [data-reveal].settled {
    transition: none;
  }

  .js [data-reveal]:not(.in-view) {
    opacity: 0;
    transform: translateY(24px);
  }

  /* Scenes: pieces marked data-a are hidden until the scene is in view,
     then play their own animation once. */
  .js [data-scene].in-view [data-a] {
    animation-name: var(--anim, rise);
    animation-duration: var(--dur, 500ms);
    animation-delay: var(--d, 0s);
    animation-timing-function: var(--ease-out);
    animation-fill-mode: both;
  }

  /* Hero: values appear and get underlined one after another. */
  .js .viz.in-view .v::after {
    animation: draw-x 400ms var(--ease-out) calc(var(--d, 0s) + 300ms) both;
  }

  /* Hero: after the card is filled, each bubble is highlighted in turn
     (--hi) while the "Ten sam mail" badge pulses, once per bubble. */
  .js .viz.in-view .same {
    animation:
      pop 300ms var(--ease-out) 3.1s both,
      badge-pulse 500ms ease-in-out 3.4s 3;
  }

  .js .viz.in-view .bubble::after {
    animation: ring-pulse 500ms ease-in-out var(--hi, 3.4s) both;
  }

  /* Step 1: waveform plays three times, rings pulse three times (about 3.7 s). */
  .js .step.in-view .bar {
    animation: bar-wave 1.2s ease-in-out var(--d, 0s) 3 both;
  }

  .js .step.in-view .ring {
    animation: ring-out 1.2s ease-out 0s 3 both;
  }

  .js .step.in-view .ring-2 {
    animation-delay: 0.4s;
  }

  /* Step 2: values highlighted in turn, then checked. */
  .js .step.in-view .hl {
    animation: hl-on 400ms var(--ease-out) var(--d) both;
  }

  .js .step.in-view .hl::after {
    animation: draw-x 400ms var(--ease-out) var(--d) both;
  }

  .js .step.in-view .chip {
    animation: pop 350ms var(--ease-out) var(--d) both;
  }

  /* Step 3: the choice moves from "Wyślij" to the draft and back (about 4.4 s). */
  .js .step.in-view .opt-a::before { animation: sel-a 4s ease-in-out 0.4s both; }
  .js .step.in-view .opt-b::before { animation: sel-b 4s ease-in-out 0.4s both; }
  .js .step.in-view .opt-a .radio-dot { animation: dot-a 4s ease-in-out 0.4s both; }
  .js .step.in-view .opt-b .radio-dot { animation: dot-b 4s ease-in-out 0.4s both; }

  /* Format picker: recognises the materials format, then the montaż format (about 4.7 s). */
  .js .picker.in-view .quote-b { animation: quote-b 4.4s ease-in-out 0.3s both; }
  .js .picker.in-view .quote-a { animation: quote-a 4.4s ease-in-out 0.3s both; }
  .js .picker.in-view .fmt-3::after,
  .js .picker.in-view .fmt-3 .fmt-badge { animation: fmt-early 4.4s ease-in-out 0.3s both; }
  .js .picker.in-view .fmt-1::after,
  .js .picker.in-view .fmt-1 .fmt-badge { animation: fmt-late 4.4s ease-in-out 0.3s both; }
  .js .picker.in-view .fmt-3 { animation: lift-early 4.4s ease-in-out 0.3s both; }
  .js .picker.in-view .fmt-1 { animation: lift-late 4.4s ease-in-out 0.3s both; }

  /* Examples reel: one variant at a time plays once (about 4 s): words appear,
     spoken values get underlined, the same email fills field by field, then
     "Ten sam mail" pops in. Delays are set per variant by main.js (--wd, --hd,
     --sd on the speech, --d on email values, --bd on the panel). */
  @keyframes sv-on {
    from { text-decoration-color: transparent; }
  }
  @keyframes fix-on {
    from { text-decoration-color: transparent; color: var(--color-text); }
  }

  .seg button {
    transition:
      background-color 180ms var(--ease-out),
      border-color 180ms var(--ease-out),
      color 180ms var(--ease-out);
  }

  /* At rest the speech is fully visible; only the badge waits for the play. */
  .js .reel-type.is-armed .same {
    opacity: 0;
  }

  .js .reel-type.is-armed .ad-leg {
    opacity: 0;
  }

  .js .reel-type.is-armed .sv,
  .js .reel-type.is-armed .fix {
    text-decoration-color: transparent;
  }

  .js .reel-type.is-playing .w {
    animation: fade 320ms var(--ease-out) var(--wd, 0s) both;
  }

  .js .reel-type.is-playing .sv {
    animation: sv-on 480ms var(--ease-out) var(--hd, 0s) both;
  }

  .js .reel-type.is-playing .fix {
    animation: fix-on 480ms var(--ease-out) var(--sd, 0s) both;
  }

  .js .reel-type.is-playing .same {
    animation: pop 640ms var(--ease-out) var(--bd, 5s) both;
  }

  .js .reel-type.is-playing .variant.is-active .wv i {
    animation: bar-wave 1200ms ease-in-out calc(var(--bi, 0) * 96ms) 3 both;
  }

  /* Client mail: slot values and adapted words swap in place (main.js sets
     data-s on .sw and the classes below, on a timer that the pause button
     also holds). Opacity and a few pixels of movement only. */
  @keyframes sw-in {
    from { opacity: 0; transform: translateY(6px); }
  }
  @keyframes sw-out {
    to { opacity: 0; transform: translateY(-4px); }
  }
  @keyframes soft-pulse {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
  }
  @keyframes status {
    0%, 80% { opacity: 1; }
    100% { opacity: 0; }
  }
  @keyframes pressed {
    40% { transform: scale(0.95); }
    100% { transform: scale(0.97); }
  }

  .js .reel-type .sw.sw-in {
    animation: sw-in 420ms var(--ease-out) both;
  }

  .js .reel-type .sw.sw-out {
    animation: sw-out 220ms ease-in both;
  }

  .js .reel-type.is-playing .ad-leg {
    animation: fade 480ms var(--ease-out) var(--ad-end, 9s) both;
  }

  /* Optional-parts scene: main.js moves it through data-step 1 to 4. Step 2 waits for the button. */
  .js .sp-static {
    display: none;
  }

  .js .sc-title {
    display: none;
  }

  .js .sp-label .n {
    display: inline-grid;
  }

  .js .opt-scene[data-step="1"] .live-labels > .lb1,
  .js .opt-scene[data-step="2"] .live-labels > .lb2,
  .js .opt-scene[data-step="3"] .live-labels > .lb3,
  .js .opt-scene[data-step="4"] .live-labels > .lb4 {
    display: flex;
  }

  .js .live-labels > .lb4 {
    display: none;
  }

  @media (max-width: 899px) {
    .js .reel-grid {
      position: relative;
    }

    .js .opt-scene .live-labels {
      position: absolute;
      top: var(--space-2);
      right: var(--space-3);
      z-index: 1;
    }
  }

  .js .opt-scene[data-step="1"] .sc-note-live {
    display: block;
  }

  /* Phones: the stage. The card has a fixed height and scrolls inside (main.js moves it to
     the slot or sentence that is changing); the speech is a bubble of three lines whose
     newest words are kept in view. Only with motion: without it the card and the speech
     are shown in full, in the normal flow. */
  @media (max-width: 640px) {
    .js .reel-grid {
      --card-h: clamp(300px, calc(100svh - 330px), 408px);
      --bub-h: 97px;
    }

    .js .rm-main,
    .js .opt-scene .live .sc-card {
      max-height: var(--card-h);
      overflow-y: auto;
      padding-top: 0;
      scroll-behavior: smooth;
    }

    .js .rm-main > .rm-head,
    .js .opt-scene .live .sc-card > .rm-head {
      position: sticky;
      top: 0;
      z-index: 2;
      padding-top: var(--space-2);
      background: var(--color-surface);
    }

    .js .spoken {
      position: relative;
      height: calc(3 * 1.5em);
      overflow-y: auto;
      scrollbar-width: none;
      scroll-behavior: smooth;
    }

    .js .spoken::-webkit-scrollbar {
      display: none;
    }

    .js .spoken.is-over {
      -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18px);
      mask-image: linear-gradient(to bottom, transparent, #000 18px);
    }

    /* The step label sits over the card header; the note, the question and the status
       replace the bubble while they are shown, so the stage never grows. */
    .js .opt-scene .live-labels {
      z-index: 3;
    }

    .js .opt-scene .live-foot {
      display: none;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 3;
      height: var(--bub-h);
      align-content: center;
      background: var(--panel);
    }

    .js .opt-scene.blinking .live-foot,
    .js .opt-scene[data-step="2"] .live-foot,
    .js .opt-scene[data-step="3"] .live-foot {
      display: grid;
    }

    .js .opt-scene[data-step="1"] .sc-note-live {
      display: none;
    }

    .js .opt-scene.blinking[data-step="1"] .sc-note-live {
      display: block;
    }

    .js .opt-scene[data-step="4"] .live-labels {
      display: none;
    }

    .js .opt-scene .live-labels .sp-label {
      font-size: var(--text-sm);
    }

    .js .opt-scene .sc-btn {
      min-height: 36px;
    }

    .js .opt-scene .sc-status {
      padding: 0;
      text-align: center;
    }
  }

  .js .opt-scene .rm-collapse {
    display: grid;
    grid-template-rows: 1fr;
  }

  .js .opt-scene .rm-collapse > .in {
    min-height: 0;
    overflow: hidden;
  }

  .js .opt-scene .f.rm-collapse {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    grid-template-rows: 1fr;
  }

  .js .opt-scene .rm-inline {
    display: inline-block;
    padding-left: 0.28em;
    max-width: 30em;
    overflow: hidden;
    vertical-align: bottom;
    white-space: nowrap;
  }

  .js .opt-scene .rm-collapse,
  .js .opt-scene .rm-inline {
    transition:
      grid-template-rows 380ms var(--ease-out),
      max-width 380ms var(--ease-out),
      padding 380ms var(--ease-out),
      opacity 300ms var(--ease-out),
      visibility 0s linear 380ms;
  }

  .js .opt-scene .rm-collapse.gone {
    grid-template-rows: 0fr;
    opacity: 0;
    visibility: hidden;
  }

  .js .opt-scene .f.rm-collapse.gone {
    padding-block: 0;
  }

  .js .opt-scene .rm-inline.gone {
    max-width: 0;
    padding-left: 0;
    opacity: 0;
    visibility: hidden;
  }

  .js .opt-scene[data-step="2"] .sc-ask,
  .js .opt-scene[data-step="3"] .sc-ask {
    display: block;
  }

  .js .opt-scene .sc-ask > * {
    display: none;
  }

  .js .opt-scene[data-step="2"] .sc-ask > .ask-q {
    display: grid;
  }

  .js .opt-scene[data-step="3"] .sc-ask > .sc-status {
    display: block;
  }

  .js .opt-scene .sc-same {
    display: inline-flex;
    visibility: hidden;
  }

  .js .opt-scene[data-step="4"] .sc-same {
    visibility: visible;
  }

  .js .opt-scene .sc-leg {
    display: none;
  }

  .js .opt-scene[data-step="4"] .sc-leg {
    display: block;
  }

  /* After the dictation: the sentences (the report: the line) that carry an empty variable pulse for 3 s. */
  .js .reel-type.is-playing .opt-scene.blinking .carry::after {
    animation: soft-pulse 1000ms ease-in-out 3;
  }

  .js .reel-type .sw-v.sw-in {
    animation-duration: 300ms;
  }

  .js .reel-type .opt-scene .sw-r.sw-in {
    animation-duration: 600ms;
  }

  /* Step 2: the question is on screen for 2.5 s, then its button presses itself. */
  .js .reel-type.is-playing .opt-scene[data-step="2"] .sc-btn {
    animation: pressed 600ms var(--ease-out) 1500ms both;
  }

  .js .reel-type.is-playing .opt-scene[data-step="2"] .sc-btn::after {
    animation: ring-pulse 900ms ease-in-out 1500ms both;
  }

  .js .reel-type.is-playing .opt-scene[data-step="3"] .sc-status {
    animation: status 1000ms ease-out both;
  }

  .js .reel-type.is-playing .opt-scene[data-step="4"] .sc-same {
    animation: pop 480ms var(--ease-out) 200ms both;
  }

  .js .reel-type.is-playing .opt-scene[data-step="4"] .sc-leg {
    animation: fade 480ms var(--ease-out) 500ms both;
  }


  /* Pause control: freezes the running variant. Must stay last in this block. */
  .js .reel.is-paused .reel-type.is-playing *,
  .js .reel.is-paused .reel-type.is-playing *::before,
  .js .reel.is-paused .reel-type.is-playing *::after {
    animation-play-state: paused;
  }
}

@media (prefers-reduced-motion: reduce) {
  .replay,
  .js .replay {
    display: none;
  }

  .js .reel-type:not(.is-scene) .fmt-base {
    display: grid;
  }
}