/* =====================================================================
   Protocolito · stack variant
   Layout language: a centred frame with dashed rails, full-width hairlines
   between blocks, and small brand-coloured markers where they cross.
   ===================================================================== */

:root {
  --bg: #ffffff;
  --tint: #faf8f6;
  --ink: #1c1917;
  --ink-2: #3d3834;
  --muted: #736c66;
  --muted-2: #6b625c;
  --line: #ebe7e3;
  --rail: #ddd7d1;
  --wine: #ad314d;
  --wine-deep: #8c1d36;
  --wine-50: #fcf2f4;
  --wine-100: #f6dde3;
  --blue: #2f6bff;
  --green: #2fb57f;
  --amber: #f0a13a;

  --frame: 1280px;
  --pad: clamp(20px, 3.8vw, 48px);
  --block: clamp(64px, 9vw, 112px);
  --nav-h: 64px;

  --font: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --brand-font: "Bagel Fat One", var(--font);

  --shadow-sm: 0 1px 2px rgba(28, 25, 23, .06), 0 1px 1px rgba(28, 25, 23, .04);
  --shadow-md: 0 1px 2px rgba(28, 25, 23, .05), 0 8px 24px -10px rgba(28, 25, 23, .18);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 8px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
[hidden] { display: none !important; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p, h1, h2, h3, h4, ol, ul, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.skip {
  position: absolute; left: 12px; top: -48px; z-index: 100;
  padding: 10px 14px; border-radius: 6px;
  background: var(--ink); color: #fff; text-decoration: none;
}
.skip:focus { top: 12px; }

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

/* ------------------------------------------------------------ frame */

.wrap {
  position: relative;
  max-width: var(--frame);
  margin-inline: auto;
  padding-inline: var(--pad);
  border-inline: 1px dashed var(--rail);
}

.blk {
  position: relative;
  border-top: 1px solid var(--line);
}

/* Markers where the hairline meets the rails. */
.blk > .wrap:first-child::before,
.blk > .wrap:first-child::after,
.band > .wrap::before,
.band > .wrap::after {
  content: "";
  position: absolute;
  top: -3.5px;
  width: 6px;
  height: 6px;
  background: var(--wine);
  z-index: 3;
}
.blk > .wrap:first-child::before,
.band > .wrap::before { left: -3.5px; }
.blk > .wrap:first-child::after,
.band > .wrap::after { right: -3.5px; }

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

.eyebrow,
.cell__eyebrow {
  font: 500 12.5px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wine);
}
.eyebrow { margin-bottom: 20px; }
.cell__eyebrow { margin-bottom: 14px; }

.display {
  font-size: clamp(40px, 5.6vw, 76px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.05em;
  text-wrap: balance;
}
.h2 {
  font-size: clamp(34px, 3.8vw, 52px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.045em;
}
.h3 {
  font-size: clamp(25px, 2.2vw, 31px);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -.035em;
}
.muted { color: var(--muted-2); }

.copy {
  margin-top: 16px;
  max-width: 34em;
  color: var(--muted);
  font-size: 17.5px;
  line-height: 1.6;
}
.fine {
  margin-top: 18px;
  max-width: 38em;
  color: var(--muted-2);
  font-size: 14px;
  line-height: 1.55;
}
.note {
  font: 400 11.5px/1 var(--mono);
  color: var(--muted-2);
  letter-spacing: .02em;
}

.checks {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}
.checks li {
  position: relative;
  padding-left: 28px;
  color: var(--ink-2);
  font-size: 16.5px;
  line-height: 1.45;
}
.checks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .32em;
  width: 13px;
  height: 7px;
  border-left: 1.7px solid var(--wine);
  border-bottom: 1.7px solid var(--wine);
  transform: rotate(-45deg);
}
.checks .checks__lead { padding-left: 0; color: var(--muted); }
.checks .checks__lead::before { display: none; }
.checks--sm { gap: 9px; }
.checks--sm li { font-size: 15px; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 22px;
  border-radius: 5px;
  font: 500 16px/1 var(--font);
  letter-spacing: -.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s, border-color .2s, box-shadow .2s, transform .2s var(--ease);
}
.btn--solid {
  background: var(--wine);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 6px 16px -8px rgba(173, 49, 77, .7);
}
.btn--solid:hover { background: var(--wine-deep); }
.btn--ghost {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.btn--ghost:hover { border-color: #d6d0ca; }
.btn--line {
  margin-top: 28px;
  height: 38px;
  padding: 0 14px;
  font-size: 15px;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.btn--line:hover { border-color: #d6d0ca; }
.btn--line .arrow { color: var(--wine); transition: transform .2s var(--ease); }
.btn--line:hover .arrow { transform: translate(2px, -2px); }
.btn--sm { height: 36px; padding: 0 14px; font-size: 15px; margin: 0; }
.btn--block { display: flex; width: 100%; margin-top: 22px; }

.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.actions--center { justify-content: center; }

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

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  max-width: var(--frame);
  height: var(--nav-h);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--wine);
  text-decoration: none;
}
.brand img { width: 26px; height: auto; }
.brand span {
  font: 400 23px/1 var(--brand-font);
  letter-spacing: -.01em;
  transform: translateY(1px);
}
.nav__links { display: flex; gap: 26px; }
.nav__links a {
  font-size: 15.5px;
  color: var(--ink-2);
  text-decoration: none;
  transition: color .2s;
}
.nav__links a:hover { color: var(--wine); }
.nav__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nav__swiss {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-right: 8px;
  font: 500 12px/1 var(--mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.nav__swiss svg { width: 15px; height: 15px; }
.nav__toggle {
  display: none;
  position: relative;
  width: 40px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
}
.nav__toggle i {
  position: absolute;
  left: 11px;
  width: 16px;
  height: 1.5px;
  background: var(--ink);
  transition: transform .25s var(--ease), top .25s var(--ease);
}
.nav__toggle i:first-of-type { top: 14px; }
.nav__toggle i:last-of-type { top: 20px; }
.nav__toggle[aria-expanded="true"] i:first-of-type { top: 17px; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] i:last-of-type { top: 17px; transform: rotate(-45deg); }
.nav__sheet {
  display: grid;
  padding: 8px var(--pad) 18px;
  border-top: 1px solid var(--line);
}
.nav__sheet[hidden] { display: none; }
.nav__sheet a {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  font-size: 17px;
}
.nav__sheet a.nav__sheet-cta { border-bottom: 0; color: var(--wine); font-weight: 500; }

/* ------------------------------------------------------------ hero */

.hero {
  position: relative;
  min-height: clamp(640px, calc(100svh - var(--nav-h) - 128px), 820px);
  overflow: hidden;
  isolation: isolate;
}
.hero__canvas,
.hero__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.hero__canvas { opacity: 0; transition: opacity .8s var(--ease); }
.hero--ready .hero__canvas { opacity: 1; }
.hero__poster { object-fit: cover; object-position: 72% 50%; display: none; }
.hero--static .hero__poster { display: block; }
.hero--static .hero__canvas { display: none; }

.hero__wrap {
  display: flex;
  align-items: center;
  min-height: inherit;
  border-inline-color: transparent;
  pointer-events: none;
}
.hero__copy {
  max-width: 600px;
  padding-block: 72px 96px;
  pointer-events: auto;
}
.hero__title {
  max-width: 9em;
  font-size: clamp(48px, 6vw, 80px);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.055em;
}
.hero__title span { display: block; }
.lede {
  margin-top: 26px;
  max-width: 25em;
  color: var(--muted);
  font-size: clamp(17px, 1.45vw, 19.5px);
  line-height: 1.55;
}
.hero__meta {
  max-width: 27em;
  margin-top: 22px;
  font: 400 12.5px/1.4 var(--mono);
  letter-spacing: .02em;
  color: var(--muted-2);
}

/* A soft white wash keeps the copy legible over the grid. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0 45% 0 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.72) 60%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}

/* ------------------------------------------------------------ logo band */

.band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band > .wrap::before,
.band > .wrap::after { top: -3.5px; }
.band__wrap {
  display: grid;
  grid-template-columns: 290px 1fr;
  padding: 0;
  height: 128px;
}
.band__wrap .band__track::after { content: none; }
.band__label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-inline: 40px;
  border-right: 1px solid var(--line);
  font: 500 14px/1.45 var(--mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.band__label small {
  margin-top: 8px;
  font-size: 10.5px;
  letter-spacing: .06em;
  color: var(--muted-2);
}
.band__track {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}
.band__list {
  display: flex;
  width: max-content;
  height: 100%;
  animation: marquee 38s linear infinite;
}
.band__track:hover .band__list { animation-play-state: paused; }
.band__list li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 216px;
  padding-inline: 34px;
  border-right: 1px solid var(--line);
  color: var(--ink);
}
.band__list img { width: 26px; height: 26px; flex: none; }
.lg { font-size: 22px; font-weight: 600; letter-spacing: -.03em; white-space: nowrap; }

@keyframes marquee { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------ statement */

.statement__wrap {
  padding-block: calc(var(--block) * 1.05) var(--block);
  text-align: center;
}
.statement--sm .statement__wrap { padding-block: var(--block) calc(var(--block) * .8); }
.statement .display { max-width: 15em; margin-inline: auto; }
.statement__sub {
  max-width: 36em;
  margin: 24px auto 0;
  color: var(--muted);
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.55;
}

/* Inline recording pill, the counterpart to Laravel's toggle. */
.rec {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .22em;
  height: .92em;
  padding: 0 .3em 0 .24em;
  margin-inline: .05em;
  vertical-align: -.1em;
  border-radius: 999px;
  background: var(--wine);
  color: #fff;
  font: 500 .38em/1 var(--mono);
  letter-spacing: .02em;
  box-shadow: 0 .35em .9em -.3em rgba(173, 49, 77, .75), 0 0 0 .08em rgba(173, 49, 77, .12);
}
.rec::after {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: -1;
  border-radius: 999px;
  background: radial-gradient(closest-side, rgba(173, 49, 77, .28), transparent);
}
.rec i {
  width: .72em;
  height: .72em;
  border-radius: 50%;
  background: #fff;
  animation: pulse-dot 1.4s ease-in-out infinite;
}
.rec b { font-weight: 500; font-variant-numeric: tabular-nums; }

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.82); }
}

/* ------------------------------------------------------------ split */

.split {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(32px, 5vw, 72px);
  padding-block: var(--block);
}
.split__copy { align-self: center; }

.split--demo { padding-bottom: 0; }
.split--demo .split__copy { align-self: start; padding-top: 12px; padding-bottom: var(--block); }

/* ------------------------------------------------------------ steps / window */

.steps {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-right: calc(var(--pad) * -1);
}
.steps::before {
  content: "";
  position: absolute;
  inset: 40px 0 0 0;
  z-index: -1;
  background: radial-gradient(60% 55% at 40% 60%, rgba(173, 49, 77, .13), transparent 70%);
  pointer-events: none;
}
.steps__tabs {
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
  gap: 4px;
  align-self: flex-start;
  margin-bottom: 18px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.steps__tabs button {
  position: relative;
  height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: color .2s, background-color .2s, box-shadow .2s;
}
.steps__tabs button:hover { color: var(--ink); }
.steps__tabs button[aria-selected="true"] {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--line), 0 2px 6px -2px rgba(28, 25, 23, .18);
}
.steps__tabs button[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 5px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--wine) var(--progress, 0%), transparent var(--progress, 0%));
  opacity: .8;
}

.window {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 460px;
  border: 1px solid var(--line);
  border-right: 0;
  border-bottom: 0;
  border-radius: 12px 0 0 0;
  background: #fff;
  box-shadow: 0 0 0 6px rgba(173, 49, 77, .05), var(--shadow-md);
  overflow: hidden;
}
.window__caption {
  padding: 14px 22px 18px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.5;
}

.caret {
  display: inline-block;
  width: 1.5px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -.15em;
  background: currentColor;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.b-w, .b-pdf {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 22px;
  padding: 0 6px;
  border-radius: 4px;
  color: #fff;
  font: 700 11px/1 var(--font);
}
.b-w { background: #185abd; }
.b-pdf { background: #c8323b; }

/* ------------------------------------------------------------ app replica */
/* Mirrors the desktop app: Windows title bar, icon rail, light ground,
   white cards and the app's own blue for primary actions. */

.app {
  --app-accent: #007cbd;
  --app-bg: #f3f5f7;
  --app-line: #e3e6ea;
  --app-ink: #1f2328;
  --app-muted: #6b7280;
  font-family: "Noto Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  color: var(--app-ink);
}
.app__titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 34px;
  padding-left: 12px;
  background: #f3f3f3;
  border-bottom: 1px solid var(--app-line);
  font-size: 12.5px;
  color: #333;
}
.app__title { display: inline-flex; align-items: center; gap: 8px; }
.app__title img { width: 12px; }
.app__winctl { display: flex; height: 100%; }
.app__winctl i { position: relative; width: 44px; height: 100%; }
.app__winctl .min::after {
  content: ""; position: absolute; left: 17px; right: 17px; top: 50%; height: 1px; background: #555;
}
.app__winctl .max::after {
  content: ""; position: absolute; left: 17px; top: 12px; width: 9px; height: 9px; border: 1px solid #555;
}
.app__winctl .close::before,
.app__winctl .close::after {
  content: ""; position: absolute; left: 16px; top: 50%; width: 12px; height: 1px; background: #555;
  transform: rotate(45deg);
}
.app__winctl .close::after { transform: rotate(-45deg); }

.app__frame { display: flex; height: 500px; }
.app__rail {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 56px;
  padding: 14px 0 12px;
  background: #fff;
  border-right: 1px solid var(--app-line);
}
.app__logo {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 10px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 2px 6px rgba(0, 0, 0, .06);
}
.app__logo img { width: 18px; }
.app__logo--lg { flex: none; width: 42px; height: 42px; margin: 0; border-radius: 11px; }
.app__logo--lg img { width: 25px; }
.app__logo--xs { width: 16px; height: 16px; margin: 0; border-radius: 4px; box-shadow: none; }
.app__logo--xs img { width: 12px; }
.app__nav {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  color: #4b5058;
  transition: background-color .3s, color .3s;
}
.app__nav svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.app__nav.is-active { background: #eef0f2; color: #111418; }
.app__nav--low { margin-top: auto; }

.app__main {
  position: relative;
  flex: 1;
  min-width: 0;
  background: var(--app-bg);
  overflow: hidden;
}
.app__screen { position: absolute; inset: 0; animation: panel-in .45s var(--ease); }
@keyframes panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.app-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 12px 32px -14px rgba(15, 23, 42, .2);
}
.field { margin-bottom: 12px; }
.field label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; }
.input {
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--app-line);
  border-radius: 9px;
  background: #fff;
  font-size: 13.5px;
  white-space: nowrap;
}
.input.is-select { justify-content: space-between; gap: 10px; }
.input.is-select::after {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid #7b818a;
  border-bottom: 1.5px solid #7b818a;
  transform: rotate(45deg) translateY(-2px);
}
.input--sm { height: 30px; padding: 0 10px; font-size: 12px; border-radius: 8px; }
.app-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.app-btn svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.app-btn--primary { background: var(--app-accent); color: #fff; box-shadow: 0 6px 14px -8px rgba(0, 124, 189, .8); }
.app-btn--ghost { background: #fff; border: 1px solid var(--app-line); color: var(--app-ink); font-weight: 500; }
.app-btn--block { display: flex; width: 100%; height: 42px; margin-top: 4px; font-size: 14px; }
.app-btn--sm { height: 30px; padding: 0 10px; font-size: 12px; border-radius: 8px; }

/* 1 · start */
.screen-start { display: grid; place-items: center; padding: 18px 236px 18px 18px; }
.start { width: min(410px, 100%); padding: 22px 22px 20px; }
.start__head { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.start__head strong { display: block; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.start__head span { display: block; font-size: 12.5px; color: var(--app-muted); line-height: 1.4; }
.start__event {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 14px;
  padding: 9px 12px;
  border-radius: 9px;
  background: #eceff2;
  font-size: 13.5px;
}
.start__event svg { flex: none; width: 17px; height: 17px; fill: none; stroke: var(--app-accent); stroke-width: 1.7; stroke-linecap: round; }
.start__event small { display: block; font-size: 11.5px; color: var(--app-muted); }
.toast {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 226px;
  padding: 10px 14px 12px;
  border-radius: 8px;
  background: #202020;
  color: #fff;
  box-shadow: 0 14px 32px -12px rgba(0, 0, 0, .55);
  animation: toast-in .6s var(--ease) 1.1s both;
}
.toast__head { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #ddd; }
.toast__head .app__logo--xs { background: #fff; }
.toast__head i { font-style: normal; color: #aaa; }
.toast__head i:first-of-type { margin-left: auto; }
.toast__head i + i { margin-left: 14px; }
.toast__title { margin-top: 10px; font-size: 13.5px; font-weight: 600; }
.toast__text { font-size: 13px; color: #d4d4d4; line-height: 1.4; }
@keyframes toast-in {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: none; }
}

/* 2 · listen */
.chat {
  position: absolute;
  left: 18px;
  top: 18px;
  bottom: 18px;
  width: 60%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
  font-size: 13px;
}
.chat__head { display: flex; flex-direction: column; padding-bottom: 10px; border-bottom: 1px solid var(--app-line); }
.chat__head span { font-weight: 600; }
.chat__head small { font-size: 11.5px; color: var(--app-muted); }
.chat__event { display: flex; gap: 8px; align-items: flex-start; color: #555; font-size: 12.5px; line-height: 1.45; }
.chat__event svg { flex: none; width: 16px; height: 16px; fill: none; stroke: #666; stroke-width: 1.5; stroke-linejoin: round; margin-top: 1px; }
.chat__time { align-self: flex-end; margin-bottom: -6px; font-size: 11.5px; color: #888; }
.chat__bubble {
  align-self: flex-end;
  max-width: 90%;
  padding: 10px 12px;
  border-radius: 8px;
  background: #e8e9f8;
  line-height: 1.45;
}
.chat__input {
  display: flex;
  align-items: center;
  height: 40px;
  margin-top: auto;
  padding: 0 12px;
  border: 1px solid var(--app-line);
  border-bottom: 2px solid #6264c9;
  border-radius: 8px;
  color: #8a8f98;
}
.recwin {
  position: absolute;
  right: 18px;
  top: 30px;
  width: 232px;
  border: 1px solid var(--app-line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 22px 44px -20px rgba(15, 23, 42, .5);
  overflow: hidden;
  animation: panel-in .5s var(--ease) .25s both;
}
.recwin__bar { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-bottom: 1px solid var(--app-line); font-size: 12px; }
.recwin__bar i { margin-left: auto; font-style: normal; color: #777; }
.recwin__body { display: flex; align-items: center; gap: 10px; padding: 14px 14px 10px; }
.recwin__body > div { flex: 1; }
.recwin__state { display: flex; align-items: center; gap: 7px; font-size: 14px; color: #666; }
.recwin__state i { width: 9px; height: 9px; border-radius: 50%; background: #e0443e; animation: pulse-dot 1.2s ease-in-out infinite; }
.recwin__time { font-size: 32px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.recwin__btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid #dcdfe3;
  border-radius: 50%;
  font-size: 11px;
  letter-spacing: -1px;
  color: #333;
}
.recwin__btn--stop { background: #e0443e; border-color: #e0443e; }
.recwin__btn--stop i { width: 13px; height: 13px; border: 2px solid #fff; border-radius: 2px; }
.recwin__level { height: 3px; margin: 0 14px 14px; border-radius: 3px; background: #eef0f2; overflow: hidden; }
.recwin__level span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #37c07a, #f2b441);
  animation: level 1.1s ease-in-out infinite alternate;
}
@keyframes level { from { width: 22%; } to { width: 78%; } }

/* 3 · name the voices */
.screen-voices { display: grid; place-items: center; padding: 16px; }
.screen-voices__bg {
  position: absolute;
  inset: 18px;
  display: grid;
  align-content: start;
  gap: 12px;
}
.screen-voices__bg span { height: 38px; border-radius: 8px; background: #efe4fd; border-left: 3px solid #c7a4f6; }
.screen-voices__bg span:nth-child(even) { background: #fdf1dc; border-left-color: #f2c26b; width: 86%; }
.screen-voices__bg span:nth-child(3n) { width: 72%; }
.screen-voices::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(35, 39, 46, .32);
  backdrop-filter: blur(1.5px);
}
.modal { position: relative; z-index: 2; width: min(460px, 100%); padding: 18px; }
.modal__head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.modal__head strong { display: block; font-size: 16px; font-weight: 600; }
.modal__head span { display: block; font-size: 12px; color: var(--app-muted); }
.modal__icon svg { width: 22px; height: 22px; fill: none; stroke: #6b7280; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.speaker {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--app-line);
  border-radius: 12px;
  background: #fafbfc;
}
.speaker__head { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; }
.speaker__head i { width: 9px; height: 9px; border-radius: 50%; }
.speaker__head small { margin-left: auto; font-size: 10.5px; font-weight: 400; color: var(--app-muted); letter-spacing: 0; }
.speaker__line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 7px 10px;
  border-radius: 9px;
  font-size: 12.5px;
  line-height: 1.4;
}
.speaker__line b {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: #fff;
  font-size: 8px;
}
.speaker--green .speaker__head i { background: #22a861; }
.speaker--green .speaker__line { background: #e4f6ec; border: 1.5px solid #8fd6ae; }
.speaker--green .speaker__line b { color: #22a861; }
.speaker--orange .speaker__head i { background: #e89a1d; }
.speaker--orange .speaker__line { background: #fdf2de; border: 1.5px solid #f3c774; }
.speaker--orange .speaker__line b { color: #e89a1d; }
.speaker__name { height: 34px; margin-top: 8px; font-size: 13px; font-weight: 500; }
.speaker__name.is-empty { color: #9aa0a8; font-weight: 400; }
.modal__foot { display: flex; justify-content: flex-end; margin-top: 12px; }

/* 4 · result */
.screen-result { background: #fff; }
.result { display: flex; flex-direction: column; height: 100%; }
.result__project {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--app-line);
  font-size: 12px;
  color: var(--app-muted);
}
.result__project .input { width: 230px; height: 30px; font-size: 12.5px; color: var(--app-ink); }
.result__cols { flex: 1; display: grid; grid-template-columns: 41% 59%; min-height: 0; }
.result__left,
.result__right { min-width: 0; overflow: hidden; }
.result__left { display: flex; flex-direction: column; gap: 8px; padding: 0 12px 12px; border-right: 1px solid var(--app-line); background: #fff; }
.result__right { padding: 0 16px 12px; }
.result__tools {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 -12px 4px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--app-line);
}
.result__right .result__tools { justify-content: flex-start; margin: 0 -16px 12px; padding: 8px 16px; }
.bubble { display: grid; grid-template-columns: 36px 1fr; column-gap: 4px; }
.bubble time { grid-row: 1 / span 2; padding-top: 16px; font-size: 10px; color: #9aa0a8; }
.bubble b { font-size: 11px; font-weight: 600; }
.bubble p {
  padding: 7px 10px;
  border: 1px solid;
  border-left-width: 3px;
  border-radius: 7px;
  font-size: 12px;
  line-height: 1.4;
}
.bubble--lilac b { color: #a77bf0; }
.bubble--lilac p { background: #f4eaff; border-color: #e2cdfc; border-left-color: #b48cf5; }
.bubble--orange b { color: #df951b; }
.bubble--orange p { background: #fdf2de; border-color: #f7dca8; border-left-color: #f2b441; }
.result__title { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.result__meta { display: flex; gap: 14px; margin-top: 4px; font-size: 11.5px; color: var(--app-muted); }
.result__meta span { display: inline-flex; align-items: center; gap: 5px; }
.result__meta svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.doc { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--app-line); }
.doc h5 { margin: 4px 0 6px; font-size: 21px; font-weight: 700; }
.doc h6 { margin: 10px 0 3px; font-size: 13.5px; font-weight: 700; }
.doc p,
.doc li { font-size: 12.5px; line-height: 1.5; color: #30343a; }
.doc ul { padding-left: 18px; list-style: disc; }

.window__captions { border-top: 1px dashed var(--line); }
.window__captions .window__caption { border-top: 0; }

/* ------------------------------------------------------------ bento */

.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  padding: 0;
}
.cell {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(32px, 4vw, 48px);
  overflow: hidden;
}
.cell--a { grid-column: span 7; border-right: 1px solid var(--line); }
.cell--b { grid-column: span 5; }
.cell--c { grid-column: span 6; border-top: 1px solid var(--line); border-right: 1px solid var(--line); }
.cell--d { grid-column: span 6; border-top: 1px solid var(--line); }
.cell .btn--line { align-self: flex-start; }
.cell__copy { position: relative; z-index: 1; }

/* A · pipeline board */
.board {
  position: relative;
  margin: 36px calc(clamp(32px, 4vw, 48px) * -1) calc(clamp(32px, 4vw, 48px) * -1);
  height: 300px;
}
.board__wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.wire path {
  fill: none;
  stroke: #d8d2cc;
  stroke-width: 1.2;
  stroke-dasharray: 3 5;
  vector-effect: non-scaling-stroke;
}
.wire .wire--faint { stroke: #ebe6e1; }
.spark { stroke: #fff; stroke-width: 2; }
.spark--wine { fill: var(--wine); }
.spark--blue { fill: var(--blue); }
.spark--amber { fill: var(--amber); }
.spark--green { fill: var(--green); }

.board__stage {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.board__status {
  position: absolute;
  bottom: calc(100% - 14px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px 0 10px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 8px 18px -8px rgba(28, 25, 23, .55);
  transition: background-color .35s;
}
.board__status-icon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff6b88;
  box-shadow: 0 0 0 3px rgba(255, 107, 136, .25);
  animation: pulse-dot 1.2s ease-in-out infinite;
}
.board[data-step="3"] .board__status { background: var(--green); }
.board[data-step="3"] .board__status-icon { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.3); animation: none; }
[data-board-status] { display: inline-block; min-width: 13ch; transition: opacity .25s; }
[data-board-status].is-swapping { opacity: 0; }

.board__plate {
  display: flex;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(250, 248, 246, .92);
  box-shadow: 0 0 0 7px rgba(250, 248, 246, .7), var(--shadow-md);
}
.board__chip,
.board__slot {
  position: relative;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.board__chip {
  display: grid;
  place-items: center;
  width: 176px;
  height: 176px;
  border-radius: 10px;
}
.board__chip img { width: 58px; filter: drop-shadow(0 6px 10px rgba(173, 49, 77, .25)); transition: transform .5s var(--ease); }
.board[data-step] .board__chip img { animation: chip-pulse 2.2s var(--ease) infinite; }
@keyframes chip-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.board__bits {
  position: absolute;
  top: 12px;
  font: 400 7.5px/1 var(--mono);
  letter-spacing: .1em;
  color: #cfc8c1;
}
.board__bits--b { top: auto; bottom: 12px; }
.board__side { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.board__slot {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 10px;
  color: #b9b1a9;
  transition: color .35s, border-color .35s, box-shadow .35s, transform .35s var(--ease);
}
.board__slot svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.board__slot.is-active {
  color: var(--wine);
  border-color: var(--wine-100);
  box-shadow: 0 0 0 4px rgba(173, 49, 77, .07), var(--shadow-md);
  transform: translateY(-2px);
}
.board__slot.is-done { color: var(--ink-2); }
.rivet {
  position: absolute;
  width: 6px;
  height: 6px;
  border: 1px solid #d5cec7;
  border-radius: 50%;
}
.rivet:nth-child(1) { top: 7px; left: 7px; }
.rivet:nth-child(2) { top: 7px; right: 7px; }
.rivet:nth-child(3) { bottom: 7px; left: 7px; }
.rivet:nth-child(4) { bottom: 7px; right: 7px; }

/* B · dialect */
.cell--b::before {
  content: "";
  position: absolute;
  inset: auto -30% -40% -30%;
  height: 70%;
  background: radial-gradient(closest-side, rgba(47, 107, 255, .09), transparent);
  pointer-events: none;
}
.dialect {
  position: relative;
  display: grid;
  gap: 0;
  margin-top: 30px;
}
/* Typing effects: the invisible full text reserves the final size. */
.typed { display: grid; }
.typed > span { grid-area: 1 / 1; }
.typed__ghost { visibility: hidden; }
.dialect__line { grid-template-columns: 40px 1fr; }
.dialect__line p { font-size: 14px; }
.dialect__wire {
  position: relative;
  height: 40px;
  margin-left: 60px;
  border-left: 1.5px dashed #d2cbc4;
}
.dialect__wire i {
  position: absolute;
  left: -5px;
  top: 0;
  width: 8.5px;
  height: 8.5px;
  border-radius: 50%;
  background: var(--wine);
  box-shadow: 0 0 0 3px rgba(173, 49, 77, .15);
  opacity: 0;
}
.dialect.is-flowing .dialect__wire i { animation: drop 0.9s var(--ease) forwards; }
@keyframes drop {
  0% { top: 0; opacity: 0; }
  20% { opacity: 1; }
  100% { top: 38px; opacity: 1; }
}
.dialect__task {
  margin-left: 40px;
  padding: 14px 14px 12px;
  border: 1px solid var(--app-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 12px 28px -16px rgba(15, 23, 42, .25);
  opacity: .25;
  transform: translateY(6px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.dialect.is-done .dialect__task { opacity: 1; transform: none; }
.dialect__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 500 11.5px/1 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wine);
}
.dialect__label span {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--wine);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
}
.task { display: flex; gap: 10px; margin-top: 10px; }
.task__check { flex: none; width: 17px; height: 17px; margin-top: 2px; border: 1.5px solid #9aa0a8; border-radius: 50%; }
.task__text { font-size: 14px; line-height: 1.4; }
.task__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; font-size: 11.5px; color: var(--app-muted); }
.task__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.chip {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: #e6f2fa;
  color: #0a6aa3;
  font-size: 11px;
  font-weight: 500;
}
.chip--muted { background: #eef0f2; color: #555b63; }
.dialect .note { margin-top: 16px; margin-left: 40px; }

/* C · template sheet */
.cell--c::before {
  content: "";
  position: absolute;
  inset: 45% -10% -30% -10%;
  background: radial-gradient(60% 60% at 30% 60%, rgba(173, 49, 77, .12), transparent 70%);
  pointer-events: none;
}
.sheet {
  position: relative;
  margin: 34px calc(clamp(32px, 4vw, 48px) * -1) calc(clamp(32px, 4vw, 48px) * -1) 0;
  padding-top: 8px;
}
.sheet__paper {
  padding: 26px 28px 22px;
  border: 1px solid var(--line);
  border-right: 0;
  border-bottom: 0;
  border-radius: 12px 0 0 0;
  background: #fff;
  box-shadow: var(--shadow-md);
}
.sheet__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--ink);
  font: 500 11.5px/1 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.sheet__logo {
  font: 700 15px/1 var(--font);
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--ink);
}
.sheet__title { margin-top: 18px; font-size: 22px; letter-spacing: -.03em; line-height: 1.2; }
.sheet__title span { font-size: 13.5px; color: var(--muted); letter-spacing: 0; }
.sheet__rows { margin-top: 18px; }
.sheet__rows li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
  font-size: 15px;
  color: var(--muted-2);
  transition: color .4s;
}
.sheet__rows li span { font: 400 12px/1 var(--mono); color: var(--muted-2); }
.sheet__rows li i {
  margin-left: auto;
  width: 18px;
  height: 18px;
  border: 1.5px solid #ddd6cf;
  border-radius: 50%;
  transition: background-color .4s, border-color .4s;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 11px;
}
.sheet__rows li.is-done { color: var(--ink); }
.sheet__rows li.is-done i {
  border-color: var(--green);
  background-color: var(--green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.sheet__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 13.5px;
  color: var(--muted);
  opacity: .35;
  transition: opacity .5s;
}
.sheet.is-done .sheet__foot { opacity: 1; }

/* D · archive chat */
.ask { position: relative; margin-top: 36px; }
.ask__panel { padding: 16px; }
.ask__top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--app-line);
  font-size: 13.5px;
  font-weight: 600;
}
.ask__top .chip { margin-left: auto; }
.ask__q { display: flex; justify-content: flex-end; margin-top: 14px; }
.ask__q span {
  max-width: 85%;
  padding: 9px 13px;
  border-radius: 14px 14px 4px 14px;
  background: var(--app-accent);
  color: #fff;
  font-size: 14px;
}
.ask__a { display: flex; gap: 10px; margin-top: 14px; }
.app__logo--sm { flex: none; width: 28px; height: 28px; margin: 0; border-radius: 8px; }
.app__logo--sm img { width: 17px; }
.ask__a p { font-size: 14px; line-height: 1.5; }
.ask__source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  background: #e6f2fa;
  color: #0a6aa3;
  font-size: 11.5px;
  font-weight: 500;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .4s, transform .4s var(--ease);
}
.ask__source svg { width: 10px; height: 10px; fill: currentColor; }
.ask.is-done .ask__source { opacity: 1; transform: none; }
.ask__input { justify-content: space-between; margin-top: 16px; color: #9aa0a8; font-size: 13px; }
.ask__send {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-right: -6px;
  border-radius: 7px;
  background: var(--app-accent);
}
.ask__send svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ask .note { margin-top: 14px; }

/* ------------------------------------------------------------ minis */

.minis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 0;
}
.mini {
  padding: 36px clamp(24px, 2.6vw, 36px) 40px;
  border-right: 1px solid var(--line);
}
.mini:last-child { border-right: 0; }
.mini svg {
  width: 26px;
  height: 26px;
  margin-bottom: 22px;
  fill: none;
  stroke: var(--wine);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Brand marks of the connected tools, in the same size and colour as the line icons. */
.mini__logos { display: flex; gap: 14px; margin-bottom: 22px; }
.mini__logos svg { width: 24px; height: 24px; margin: 0; fill: var(--wine); stroke: none; }
.mini h3 { font-size: 18px; font-weight: 500; letter-spacing: -.02em; line-height: 1.3; }
.mini p { margin-top: 8px; color: var(--muted); font-size: 15px; line-height: 1.55; }

/* ------------------------------------------------------------ calculator */

.split--calc { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.calc {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 0 0 6px rgba(173, 49, 77, .04), var(--shadow-md);
  overflow: hidden;
}
.calc__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--tint);
}
.calc__bar span { width: 10px; height: 10px; border-radius: 50%; background: #e2dcd6; }
.calc__bar p { margin-left: 10px; font-size: 14px; font-weight: 500; }
.calc__body { display: grid; gap: 22px; padding: 26px 26px 22px; }
.slider label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 15px;
  color: var(--ink-2);
}
.slider output { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.slider__ends {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font: 400 11.5px/1 var(--mono);
  color: var(--muted-2);
}
.slider input {
  --p: 50%;
  width: 100%;
  height: 22px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.slider input::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--wine) var(--p), #ebe6e1 var(--p));
}
.slider input::-moz-range-track { height: 4px; border-radius: 4px; background: #ebe6e1; }
.slider input::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--wine); }
.slider input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -8px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(28, 25, 23, .25);
}
.slider input::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(28, 25, 23, .25);
}
.calc__base { font-size: 14.5px; color: var(--muted); }
.calc__base strong { color: var(--ink); font-weight: 600; }
.calc__result {
  padding: 24px 26px 26px;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, var(--wine-50), #fff);
}
.calc__kicker { font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--wine); }
.calc__big { display: flex; align-items: baseline; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.calc__big strong {
  font-size: clamp(56px, 6vw, 80px);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .9;
  font-variant-numeric: tabular-nums;
}
.calc__big span { color: var(--muted); font-size: 16px; }
.calc__split {
  display: flex;
  margin-top: 20px;
  height: 30px;
  border-radius: 6px;
  overflow: hidden;
  font: 500 11.5px/30px var(--mono);
  white-space: nowrap;
}
.calc__split span { padding: 0 10px; overflow: hidden; text-overflow: ellipsis; }
.calc__split span:first-child { width: var(--w); background: var(--wine); color: #fff; }
.calc__split span:last-child { flex: 1; background: #efe9e4; color: var(--muted); }
.calc__money { margin-top: 16px; font-size: 15px; color: var(--muted); }
.calc__money strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ route */

.route { padding-block: 56px 48px; }
.route__track {
  position: absolute;
  left: calc(var(--pad) + 16.66%);
  right: calc(var(--pad) + 16.66%);
  top: 88px;
  height: 40px;
}
.route__track svg { width: 100%; height: 100%; overflow: visible; }
.route__track path {
  fill: none;
  stroke: #d2cbc4;
  stroke-width: 1.4;
  stroke-dasharray: 4 6;
  vector-effect: non-scaling-stroke;
}
.route__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.route__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.route__icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 0 0 6px #fff, var(--shadow-md);
}
.route__icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.route__step--swiss .route__icon { border-color: #f5c9cc; box-shadow: 0 0 0 6px #fff, 0 0 0 7px #fdeced, var(--shadow-md); }
.route__step--swiss .route__icon svg { width: 30px; height: 30px; }
.route__step strong { font-size: 18px; font-weight: 500; letter-spacing: -.02em; }
.route__step span { margin-top: 4px; color: var(--muted); font-size: 15px; }

.facts {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  padding: 0;
  border-top: 1px solid var(--line);
}
.fact {
  padding: 34px clamp(22px, 2.4vw, 32px) 38px;
  border-right: 1px solid var(--line);
}
.fact:last-child { border-right: 0; }
.fact h3 { font-size: 19px; font-weight: 500; letter-spacing: -.02em; line-height: 1.3; }
.fact p { margin-top: 10px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.fact--lead { background: var(--tint); }
.fact--lead h3 { font-size: 24px; font-weight: 400; letter-spacing: -.03em; }
.route__more { padding-block: 0 48px; border-top: 1px solid var(--line); }
.route__more .btn { max-width: 100%; height: auto; min-height: 38px; padding-block: 9px; white-space: normal; text-align: left; line-height: 1.35; }

/* ------------------------------------------------------------ pricing */

.billing {
  display: inline-flex;
  gap: 4px;
  margin-top: 32px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.billing button {
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
.billing button span {
  margin-left: 4px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--wine-50);
  color: var(--wine);
  font-size: 12px;
}
.billing button[aria-pressed="true"] {
  background: var(--ink);
  color: #fff;
}
.billing button[aria-pressed="true"] span { background: rgba(255, 255, 255, .16); color: #fff; }

.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0;
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 40px clamp(24px, 2.8vw, 40px) 44px;
  border-right: 1px solid var(--line);
}
.plan:last-child { border-right: 0; }
.plan h3 { font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
.plan__price { display: flex; align-items: baseline; gap: 8px; margin-top: 18px; }
.plan__price span { font: 500 14px/1 var(--mono); color: var(--muted); }
.plan__price strong {
  font-size: 60px;
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.plan__price em { font-style: normal; color: var(--muted); font-size: 15px; }
.plan__alt { margin-top: 8px; font-size: 13.5px; color: var(--muted-2); min-height: 1.5em; }
.plan__for { margin-top: 18px; color: var(--ink-2); font-size: 15.5px; line-height: 1.5; min-height: 4.6em; }
.plan--featured {
  background: var(--ink);
  color: #fff;
  border-right-color: var(--ink);
}
.plan--featured::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 50% at 80% 0%, rgba(173, 49, 77, .45), transparent 70%);
  pointer-events: none;
}
.plan--featured > * { position: relative; }
.plan--featured .plan__price span,
.plan--featured .plan__price em,
.plan--featured .plan__alt { color: #a9a29b; }
.plan--featured .plan__for,
.plan--featured .checks li { color: #e7e2dd; }
.plan--featured .checks .checks__lead { color: #a9a29b; }
.plan--featured .checks li::before { border-color: #ff8fa7; }
.plan__badge {
  position: absolute;
  top: 40px;
  right: clamp(24px, 2.8vw, 40px);
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--wine);
  font: 500 11px/1 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.plans .checks { margin-top: 26px; }

.addon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding-block: 32px;
  border-top: 1px solid var(--line);
  background: var(--tint);
}
.addon h3 { font-size: 22px; font-weight: 400; letter-spacing: -.03em; }
.addon p { margin-top: 6px; color: var(--muted); font-size: 15px; max-width: 40em; }
.addon .cell__eyebrow { margin: 0 0 10px; }
.addon__price { text-align: right; font-size: 15px; color: var(--muted); white-space: nowrap; }
.addon__price strong { display: block; font-size: 30px; font-weight: 400; letter-spacing: -.04em; color: var(--ink); }
.addon__price span { display: block; margin-top: 4px; font: 400 12px/1.4 var(--mono); color: var(--muted-2); }
/* Enterprise: what is included next to what we clarify on request. */
.addon .actions { margin-top: 26px; }
.enterprise__lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px clamp(24px, 4vw, 56px); margin-top: 22px; }
.enterprise__head { font-size: 15px; font-weight: 500; color: var(--ink); }
.enterprise__head span { color: var(--muted); font-weight: 400; }
.enterprise__lists .checks { margin-top: 12px; }
.checks--open li::before { top: .72em; width: 9px; height: 0; border-left: 0; border-bottom: 1.5px solid var(--muted-2); transform: none; }

/* Teams: start steps next to the plan price and the actions. */
.teams-start {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 24px clamp(24px, 4vw, 64px);
  padding-block: 32px 40px;
  border-top: 1px solid var(--line);
}
.teams-start .cell__eyebrow { margin: 0 0 12px; }
.teams-start__steps { display: grid; gap: 8px; padding-left: 1.3em; list-style: decimal; color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.teams-start__steps a,
.teams-start__price a { color: var(--wine); }
.teams-start__price { color: var(--muted); font-size: 15px; line-height: 1.5; }
.teams-start__price + .teams-start__price { margin-top: 4px; }
.teams-start__price strong { color: var(--ink); font-weight: 500; }
.teams-start .actions { margin-top: 18px; }

.plans__fine { padding-block: 22px 26px; border-top: 1px solid var(--line); }
.plans__fine p { color: var(--muted-2); font-size: 14px; max-width: 60em; }

/* ------------------------------------------------------------ recorder */

.recorder__layout { padding-block: var(--block); }
.recorder__intro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: clamp(32px, 5vw, 72px); margin-bottom: 36px; }
.recorder__details .copy { margin-top: 0; }
.recorder__gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.recorder__gallery figure { min-width: 0; margin: 0; }
.recorder__gallery img { display: block; width: 100%; height: auto; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 14px; object-fit: cover; background: #c9c1c7; box-shadow: var(--shadow-md); }
.recorder__gallery figcaption { margin-top: 10px; font: 500 12px/1.4 var(--mono); color: var(--muted); }
.recorder__caption { margin-top: 18px; font-size: 13px; line-height: 1.5; color: var(--muted-2); }

/* ------------------------------------------------------------ quotes */

.quotes {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 16px;
  padding-block: 56px;
}
.quote {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.quote--dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.quotes--pending { opacity: .35; filter: grayscale(1); pointer-events: none; user-select: none; }
.pending {
  display: inline-block; margin-right: .5em; padding: 2px 9px; border: 1px solid currentColor; border-radius: 999px;
  font: 500 11px/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; vertical-align: .15em;
}
/* Real quotes: customer logo and portrait. Cards still waiting for a quote stay greyed. */
.quote .quote__brand { align-self: flex-start; width: auto; height: 24px; }
/* Featured customer quote: large text left, cut-out portrait standing on the card's bottom edge right. */
.quotes--hero { grid-template-columns: 1fr; padding-bottom: 16px; }
.quotes--two { grid-template-columns: 1fr 1fr; padding-top: 0; }
.quote.quote--hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: end; gap: 24px; padding: 44px 0 0 48px; overflow: hidden; }
.quote--hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(45% 75% at 82% 70%, rgba(173, 49, 77, .55), transparent 70%); pointer-events: none; }
.quote--hero > * { position: relative; }
.quote__text { display: flex; flex-direction: column; gap: 28px; padding-bottom: 44px; }
.quote.quote--hero blockquote { font-size: clamp(24px, 2.5vw, 34px); line-height: 1.22; letter-spacing: -.03em; }
.quote.quote--hero figcaption { margin-top: 0; }
.quote__portrait { display: block; justify-self: end; width: 100%; max-width: 400px; height: auto; }
/* Featured layout in the half-width row: smaller text and portrait. */
.quotes--two .quote.quote--hero { padding: 32px 0 0 32px; gap: 12px; }
.quotes--two .quote__text { gap: 22px; padding-bottom: 32px; }
.quotes--two .quote.quote--hero blockquote { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.35; letter-spacing: -.02em; }
.quotes--two .quote__portrait { max-width: 240px; }
@media (max-width: 720px) {
  .quote.quote--hero { grid-template-columns: 1fr; padding: 28px 0 0 28px; }
  .quote__text { padding: 0 28px 0 0; }
  .quote__portrait { max-width: 260px; justify-self: center; }
  .quotes--two .quote__text { padding: 0 28px 0 0; }
  .quotes--two .quote__portrait { max-width: 220px; }
}
/* Higher than .reveal.is-in, which would otherwise fade the card back to full opacity. */
.quotes .quote.quote--pending { opacity: .35; filter: grayscale(1); pointer-events: none; user-select: none; }
.quote__logo {
  width: max-content;
  padding: 6px 10px;
  border: 1px dashed currentColor;
  border-radius: 6px;
  font: 500 11px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .5;
}
.quote blockquote { font-size: 19px; line-height: 1.45; letter-spacing: -.015em; }
.quote--dark blockquote { font-size: 24px; line-height: 1.35; letter-spacing: -.025em; }
.quote figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  font-size: 14px;
  color: var(--muted);
}
.quote figcaption strong { display: block; color: var(--ink); font-weight: 600; }
.quote--dark figcaption,
.quote--dark figcaption strong { color: #fff; }
.quote--dark figcaption span { color: #a9a29b; }
.quote--dark figcaption strong { color: #fff; }
.quote figcaption i {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px dashed currentColor;
  border-radius: 8px;
  font: normal 500 8.5px/1 var(--mono);
  text-transform: uppercase;
  opacity: .55;
}

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

.split--faq { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
.faq__intro { align-self: start; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary {
  position: relative;
  padding: 22px 44px 22px 0;
  font-size: 18.5px;
  letter-spacing: -.02em;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after,
.faq summary::before {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 14px;
  height: 1.5px;
  background: var(--wine);
  transition: transform .3s var(--ease);
}
.faq summary::before { transform: rotate(90deg); }
.faq details[open] summary::before { transform: rotate(0deg); }
.faq summary:hover { color: var(--wine); }
.faq details p { padding: 0 44px 24px 0; color: var(--muted); font-size: 16.5px; line-height: 1.6; }

/* ------------------------------------------------------------ cta */

.cta { overflow: hidden; }
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(30deg, transparent 0 38px, rgba(173, 164, 156, .28) 38px 39px),
    repeating-linear-gradient(150deg, transparent 0 38px, rgba(173, 164, 156, .28) 38px 39px);
  -webkit-mask-image: radial-gradient(60% 70% at 50% 50%, #000, transparent);
          mask-image: radial-gradient(60% 70% at 50% 50%, #000, transparent);
  pointer-events: none;
}
.cta__wrap { padding-block: calc(var(--block) * 1.1); text-align: center; }
.cta .display { max-width: 12em; margin-inline: auto; }

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

.foot { border-top: 1px solid var(--line); overflow: hidden; }
.foot__wrap {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 32px;
  padding-block: 56px 40px;
}
.foot__wrap::before,
.foot__wrap::after {
  content: "";
  position: absolute;
  top: -3.5px;
  width: 6px;
  height: 6px;
  background: var(--wine);
}
.foot__wrap::before { left: -3.5px; }
.foot__wrap::after { right: -3.5px; }
.foot__brand p { margin-top: 14px; color: var(--muted); font-size: 15px; }
.foot__mail { display: inline-block; margin-top: 10px; font-size: 15px; color: var(--wine); text-decoration: none; }
.foot__col { display: grid; align-content: start; gap: 10px; }
.foot__col p { font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 6px; }
.foot__col a { font-size: 15px; color: var(--ink-2); text-decoration: none; }
.foot__col a:hover { color: var(--wine); }
.foot__base {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-block: 20px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted-2);
}
.foot__word {
  margin: 0 auto -0.1em;
  max-width: var(--frame);
  padding-inline: var(--pad);
  font: 400 clamp(64px, 17vw, 236px)/1 var(--brand-font);
  letter-spacing: -.02em;
  text-align: center;
  color: var(--wine-50);
  -webkit-text-stroke: 1px var(--wine-100);
  user-select: none;
}

/* ------------------------------------------------------------ reveal */

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-text {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(5px);
  transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease);
}
.reveal-text.is-in { opacity: 1; transform: none; filter: none; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1180px) {
  .nav__swiss { display: none; }
  .nav__links { gap: 20px; }
}

@media (max-width: 1024px) {
  .nav__links { display: none; }
  .nav__toggle { display: block; }
  .nav__actions .btn--line { display: none; }

  .split,
  .split--calc,
  .split--faq { grid-template-columns: 1fr; }
  .split--demo .split__copy { padding-bottom: 8px; }
  .steps { margin-right: calc(var(--pad) * -1); }

  .cell--a, .cell--b, .cell--c, .cell--d { grid-column: span 12; border-right: 0; }
  .cell--b, .cell--c { border-top: 1px solid var(--line); }
  .sheet { margin-right: calc(clamp(32px, 4vw, 48px) * -1); }

  .minis { grid-template-columns: 1fr 1fr; }
  .mini:nth-child(2) { border-right: 0; }
  .mini:nth-child(-n+2) { border-bottom: 1px solid var(--line); }

  .facts { grid-template-columns: 1fr 1fr; }
  .fact--lead { grid-column: span 2; border-right: 0; border-bottom: 1px solid var(--line); }
  .fact:nth-child(3) { border-right: 0; }
  .fact:nth-child(4) { grid-column: span 2; border-top: 1px solid var(--line); }

  .plans { grid-template-columns: 1fr; }
  .plan { border-right: 0; border-bottom: 1px solid var(--line); }
  .plan:last-child { border-bottom: 0; }
  .plan__for { min-height: 0; }

  .quotes { grid-template-columns: 1fr; }
  .foot__wrap { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: span 2; }
}

@media (max-width: 899px) {
  .hero { min-height: 0; }
  .hero__wrap { align-items: flex-start; }
  .hero__copy { padding-block: 44px 400px; max-width: none; }
  .hero::before { inset: 0 0 42% 0; background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.75) 75%, rgba(255,255,255,0) 100%); }
  .hero__poster { object-position: 60% 100%; }


  .band__wrap { grid-template-columns: 1fr; height: auto; }
  .band__label { padding: 18px var(--pad); border-right: 0; border-bottom: 1px solid var(--line); flex-direction: row; flex-wrap: wrap; gap: 0 .5em; font-size: 12px; }
  .band__label br { display: none; }
  .band__label small { flex-basis: 100%; margin-top: 4px; }
  .band__track { height: 92px; }
  .band__list li { min-width: 180px; padding-inline: 24px; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .recorder__intro { grid-template-columns: 1fr; gap: 16px; margin-bottom: 28px; }
  .recorder__gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .recorder__gallery figure:first-child { grid-column: 1 / -1; }
  .nav__actions .btn--solid { display: none; }
  .steps__tabs { border-radius: 14px; }
  .steps__tabs button { padding: 0 12px; font-size: 14px; }
  .window { min-height: 0; }
  .app__rail { display: none; }
  .app__frame { height: 470px; }
  .app__winctl i { width: 32px; }
  .app__winctl .min::after { left: 10px; right: 10px; }
  .app__winctl .max::after { left: 11px; }
  .app__winctl .close::before,
  .app__winctl .close::after { left: 10px; }
  .toast { display: none; }
  .screen-start { padding: 14px; }
  .chat { left: 12px; right: 12px; width: auto; top: 12px; bottom: 12px; }
  .recwin { top: auto; right: 12px; bottom: 70px; width: 200px; }
  .recwin__time { font-size: 26px; }
  .result__cols { grid-template-columns: 1fr; }
  .result__left { display: none; }
  .result__right .result__tools .input { display: none; }
  .board { height: 260px; }
  .board__chip { width: 132px; height: 132px; }
  .board__slot { width: 62px; height: 62px; }
  .board__slot svg { width: 22px; height: 22px; }
  .minis { grid-template-columns: 1fr; }
  .mini { border-right: 0; border-bottom: 1px solid var(--line); }
  .mini:last-child { border-bottom: 0; }
  .facts { grid-template-columns: 1fr; }
  .fact, .fact--lead, .fact:nth-child(4) { grid-column: auto; border-right: 0; border-top: 0; border-bottom: 1px solid var(--line); }
  .fact:last-child { border-bottom: 0; }
  .route__steps { grid-template-columns: 1fr; gap: 28px; }
  .route__track { display: none; }
  .addon { flex-direction: column; align-items: flex-start; }
  .addon__price { text-align: left; }
  .enterprise__lists,
  .teams-start { grid-template-columns: 1fr; }
  .foot__wrap { grid-template-columns: 1fr; }
  .foot__brand { grid-column: auto; }
  .foot__base { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .band__list { animation: none; }
  .band__track { overflow-x: auto; }
  .reveal,
  .reveal-text { opacity: 1; transform: none; filter: none; }
}

/* Phones: the demo windows stay inside the screen instead of bleeding off the right edge. */
@media (max-width: 720px) {
  html { overflow-x: clip; }
  .steps { margin-right: 0; }
  .steps__tabs { display: grid; grid-template-columns: 1fr 1fr; align-self: stretch; }
  .steps__tabs button { padding: 0 8px; }
  .window { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
  .sheet { margin: 34px 0 0; }
  .sheet__paper { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 12px; }
  .plan > .btn + a { display: block; margin-top: 12px; text-align: center; font-size: 14px; }
}