@font-face { font-family: Manrope; src: url("./assets/manrope-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: Manrope; src: url("./assets/manrope-500.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: Manrope; src: url("./assets/manrope-600.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: Manrope; src: url("./assets/manrope-700.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --color-canvas: #f4f6f8;
  --color-card: #fafafa;
  --color-primary: #1c2540;
  --color-secondary: #16568c;
  --color-tertiary: #94a3b8;
  --color-inverse: #f2f4f7;
  /* Figma's normalized gradient transform, converted for each container's aspect ratio. */
  --accent-gradient: linear-gradient(var(--accent-angle, 154.94deg), #01d9ff 27.318%, #008c1c 57.192%, #cfd602 84.346%);
  --site-header-height: 90px;
  --page-gutter: 5vw;
}
@media (min-width: 1024px) { :root { --page-gutter: 6vw; } }
/* Match the measured DeepSeek Harness content container after the hero.
   W = min(viewport - 48/144/160px, 1140/1280px), centered. */
:root { --section-gutter: max(24px, calc((100vw - 1140px) / 2)); }
@media (min-width: 768px) { :root { --section-gutter: max(72px, calc((100vw - 1140px) / 2)); } }
@media (min-width: 1560px) { :root { --section-gutter: max(80px, calc((100vw - 1280px) / 2)); } }
.how-it-works, .directions, .features, .faq { --page-gutter: var(--section-gutter); }

* { box-sizing: border-box; }
body { margin: 0; background: var(--color-canvas); color: var(--color-primary); font-family: Manrope, sans-serif; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; }
button:disabled { opacity: 1; cursor: default; }
.content-line { display: block; }
/* Contain the hero (desktop min-width, mobile carousel track) so it cannot
   enlarge the mobile viewport used by the responsive sections below it. */
.hero-viewport { overflow: clip; }

.hero {
  /* Preserve the desktop composition on short screens; <1024px uses the carousel at the end of this file. */
  --layout-u: min(1.333333333px, 0.069444444vw, calc((100svh - var(--site-header-height)) / 740));
  --u: var(--layout-u);
  /* Updated 50px store badges shrink only when the hero needs to fit. */
  --store-u: min(var(--u), 1px);
  position: relative;
  isolation: isolate;
  min-width: 1024px;
  min-height: 100svh;
  padding: calc(var(--site-header-height) + 20 * var(--u)) var(--page-gutter) calc(82 * var(--u));
  overflow: clip;
}
.hero__background { position: absolute; inset: 0; z-index: -2; pointer-events: none; mask: url("./assets/hero/background-mask.svg") 0 0 / 100% 100% no-repeat; }
.hero__background-image { position: absolute; left: -7.986111%; top: -2px; width: 134.689484%; height: calc(100% + 20vw); object-fit: cover; transform: rotate(-7.777859deg); transform-origin: top left; max-width: none; }
.hero__substrates { position: absolute; z-index: -1; left: -30.069444%; top: -7.108434%; width: 155%; height: 126.746988%; background: url("./assets/hero/substrates.svg") 0 0 / 100% 100% no-repeat; pointer-events: none; }
.hero__content { position: relative; display: grid; grid-template-columns: minmax(0, 685fr) minmax(0, 591fr); gap: calc(20 * var(--u)); align-items: stretch; }
[data-content-state="loading"] .hero__content, [data-content-state="error"] .hero__content { visibility: hidden; }
.hero__downloads, .hero__heading-group, .hero__app, .hero__stores, .hero__qr-copy { display: flex; flex-direction: column; }
.hero__downloads { gap: calc(36 * var(--u)); min-width: 0; }
.hero__heading-group { gap: calc(20 * var(--u)); }
.hero__title { --title-size: min(calc(65 * var(--u)), calc(45 * var(--u) + 20px)); font-size: var(--title-size); line-height: calc(var(--title-size) + 5 * var(--u)); font-weight: 700; }
.hero__app { gap: calc(22 * var(--u)); }
.hero__app-title { font-size: calc(36 * var(--u)); line-height: calc(49 * var(--u)); font-weight: 400; letter-spacing: calc(-.4 * var(--u)); }
.hero__qr-row { display: flex; align-items: center; gap: calc(24 * var(--u)); }
.hero__qr-frame { --qr-size: clamp(calc(152 * var(--u)), calc(222 * var(--u) - 70px), calc(169.5 * var(--u))); --qr-padding: clamp(calc(6 * var(--u)), calc(18 * var(--u) - 12px), calc(9 * var(--u))); position: relative; flex: 0 0 auto; width: var(--qr-size); height: var(--qr-size); padding: var(--qr-padding); border: 2px solid transparent; border-radius: calc(16 * var(--u)); background: linear-gradient(var(--color-card), var(--color-card)) padding-box, var(--accent-gradient) border-box; }
.hero__qr { display: block; width: 100%; height: 100%; }
.hero__qr-copy { min-width: 0; gap: calc(8 * var(--u)); }
.hero__qr-copy h3 { font-size: calc(22 * var(--u)); line-height: calc(28 * var(--u)); font-weight: 600; letter-spacing: calc(-.3 * var(--u)); }
.hero__qr-copy p { color: var(--color-secondary); font-size: calc(16 * var(--u)); line-height: calc(22 * var(--u)); }
.hero__stores { gap: calc(14 * var(--u)); }
.hero__platforms { display: flex; align-items: flex-start; gap: calc(40 * var(--store-u)); }
.hero__mobile-downloads { width: calc(347 * var(--store-u)); }
.hero__desktop-downloads { width: calc(178 * var(--store-u)); }
.hero__store-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(12 * var(--store-u)); }
.store-badge { display: block; padding: 0; border: 0; background: none; width: calc(167.5 * var(--store-u)); height: calc(50 * var(--store-u)); }
.store-badge img { display: block; width: auto; height: 100%; max-width: 100%; }
.hero__desktop-stack { display: flex; flex-direction: column; gap: calc(12 * var(--store-u)); }
.desktop-badge { display: flex; align-items: center; gap: calc(12 * var(--store-u)); width: calc(178 * var(--store-u)); height: calc(50 * var(--store-u)); padding: 0 calc(12 * var(--store-u)); border: 0; border-radius: calc(6 * var(--store-u)); background: #000; color: #fff; text-align: left; }
.desktop-badge__download { position: relative; flex: 0 0 calc(18 * var(--store-u)); width: calc(18 * var(--store-u)); height: calc(21 * var(--store-u)); }
.desktop-badge__download::before { content: ""; position: absolute; left: calc(-.8 * var(--store-u)); top: 0; width: calc(19.6 * var(--store-u)); height: calc(21.8 * var(--store-u)); background: url("./assets/hero/download.svg") center / contain no-repeat; }
.desktop-badge__copy { display: flex; flex-direction: column; white-space: nowrap; font-size: calc(12 * var(--store-u)); line-height: calc(15 * var(--store-u)); font-weight: 400; }
.desktop-badge__platform { font-size: calc(18 * var(--store-u)); line-height: calc(22 * var(--store-u)); }
.desktop-badge__apple { flex: 0 0 calc(24 * var(--store-u)); width: calc(24 * var(--store-u)); height: calc(29.499 * var(--store-u)); background: url("./assets/hero/apple.svg") center / contain no-repeat; }
.desktop-badge__windows { flex: 0 0 auto; width: calc(24 * var(--store-u)); height: calc(24 * var(--store-u)); }
.hero__try { display: flex; min-width: 0; flex-direction: column; align-items: center; justify-content: center; gap: calc(30 * var(--u)); }
@media (min-width: 1024px) {
  /* Scale the whole upload composition with width, independently of the left column.
     Only constrain it when its 423-unit height would exceed the available screen. */
  .hero__try { --u: min(calc((100vw - 2 * var(--page-gutter) - 20 * var(--layout-u)) * 591 / 1276 / 600), calc((100svh - var(--site-header-height) - 102 * var(--layout-u)) / 423)); }
}
.upload-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(24 * var(--u)); width: min(100%, calc(600 * var(--u))); aspect-ratio: 600 / 423; padding: calc(38 * var(--u)) calc(32.5 * var(--u)); border-radius: calc(24 * var(--u)); background: var(--color-card); box-shadow: 0 12px 40px rgba(20, 41, 71, .12); }
.upload-card::before { content: ""; position: absolute; inset: 0; padding: 2px; border-radius: inherit; background: var(--accent-gradient); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; pointer-events: none; }
.upload-card__title { width: 100%; text-align: center; font-size: calc(22 * var(--u)); line-height: calc(28 * var(--u)); font-weight: 600; letter-spacing: -.3px; }
.upload-card__dropzone { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(18 * var(--u)); width: 100%; padding: calc(29 * var(--u) - 1px) 0 calc(23 * var(--u) - 1px); border: 1px solid transparent; border-radius: calc(16 * var(--u)); background: var(--color-canvas); text-align: center; }
/* SVG keeps the upload area's dash pattern consistent around rounded corners. */
.dashed-outline { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); color: var(--color-secondary); overflow: visible; pointer-events: none; }
.dashed-outline rect { x: .5px; y: .5px; rx: calc(15.5 * var(--u)); ry: calc(15.5 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1px; stroke-dasharray: var(--dash-step, calc(var(--outline-dash, 6) * var(--u))); }
.upload-card__cloud { position: relative; display: block; flex: 0 0 auto; width: calc(50 * var(--u)); height: calc(41 * var(--u)); }
.upload-card__cloud::before { content: ""; position: absolute; inset: calc(-1 * var(--u)); background: url("./assets/hero/upload-cloud.svg") center / contain no-repeat; }
.upload-card__instructions { display: flex; flex-direction: column; gap: calc(14 * var(--u)); width: 100%; }
.upload-card__prompt-group { display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.upload-card__prompt { font-size: calc(22 * var(--u)); line-height: calc(28 * var(--u)); font-weight: 600; letter-spacing: calc(-.3 * var(--u)); }
.upload-card__limits, .upload-card__note { color: var(--color-secondary); font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); }
.upload-card__formats { color: var(--color-tertiary); font-size: calc(14 * var(--u)); line-height: calc(18 * var(--u)); font-weight: 500; }
.upload-card__actions { display: flex; justify-content: center; gap: calc(12 * var(--u)); width: 100%; max-width: calc(412 * var(--u)); }
.upload-button { position: relative; display: flex; flex: 1 1 0; align-items: center; justify-content: center; gap: calc(10 * var(--u)); min-width: 0; height: calc(44 * var(--u)); padding: 0; border: 2px solid transparent; border-radius: 999px; appearance: none; background: linear-gradient(var(--color-primary), var(--color-primary)) padding-box, var(--accent-gradient) border-box; color: var(--color-inverse); font-size: calc(16 * var(--u)); line-height: calc(22 * var(--u)); font-weight: 600; white-space: nowrap; }
.upload-button { --accent-angle: 171.27deg; }
.upload-button--link { gap: calc(13 * var(--u)); }
.upload-button__folder { flex: 0 0 auto; width: calc(20 * var(--u)); height: calc(20 * var(--u)); background: url("./assets/hero/folder.svg") center / calc(17.33 * var(--u)) calc(14.83 * var(--u)) no-repeat; }
.upload-button__link { position: relative; flex: 0 0 auto; width: calc(16.573 * var(--u)); height: calc(16.556 * var(--u)); }
.upload-button__link::before { content: ""; position: absolute; inset: calc(-.75 * var(--u)); background: url("./assets/hero/link.svg") center / contain no-repeat; }
.upload-card__note { width: 100%; text-align: center; }
.upload-card__details { display: flex; flex-direction: column; gap: calc(6 * var(--u)); width: 100%; text-align: center; }
html { scroll-behavior: smooth; }
.hero__scroll-hint { position: absolute; left: calc(50% + 6.5 * var(--u)); bottom: calc(50 * var(--u) - 22px); display: flex; align-items: center; justify-content: center; width: max(64px, calc(49.8004 * var(--u))); height: 44px; border-radius: 8px; color: var(--color-primary); transform: translateX(-50%); }
.hero__scroll-hint:focus-visible { outline: 2px solid var(--color-secondary); outline-offset: 4px; }
.hero__chevrons { display: block; width: calc(49.8004 * var(--u)); height: calc(13.3002 * var(--u)); background: url("./assets/hero/chevrons.svg") center / contain no-repeat; animation: hero-scroll-hint-bounce 1.8s ease-in-out infinite; }
.hero[data-motion="paused"] .hero__chevrons { animation-play-state: paused; }
@keyframes hero-scroll-hint-bounce { 0%, 100% { transform: translateY(calc(1.6 * var(--u))); } 50% { transform: translateY(calc(1.6 * var(--u) + 5px)); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hero__chevrons { animation: none; transform: translateY(calc(1.6 * var(--u))); } }
.content-error { position: absolute; inset: 45% 10% auto; text-align: center; color: var(--color-primary); }

/* How it works: the card's own width scales its typography, spacing and artwork. */
.how-it-works { --section-u: clamp(.8px, .069444444vw, 1.333333333px); padding: calc(60 * var(--section-u)) var(--page-gutter); background: var(--color-canvas); }
.how-it-works__heading { display: flex; flex-direction: column; align-items: center; gap: calc(12 * var(--section-u)); margin-bottom: calc(40 * var(--section-u)); text-align: center; }
.how-it-works__heading h2 { font-size: calc(40 * var(--section-u)); line-height: 1.375; font-weight: 700; }
.how-it-works__heading > p { max-width: calc(1100 * var(--section-u)); color: #62738c; font-size: calc(24 * var(--section-u)); line-height: 1.375; }
.how-it-works__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.666666667vw, 32px); margin: 0; padding: 0; list-style: none; }
.how-step { container-type: inline-size; min-width: 0; aspect-ratio: 416 / 330; border-radius: 4.807692% / 6.060606%; box-shadow: 0 4px 6px -1px rgb(10 13 18 / 10%), 0 2px 4px -2px rgb(10 13 18 / 6%); transition: transform 320ms cubic-bezier(.4, 0, .2, 1), box-shadow 320ms ease; }
.how-card { --c: calc(100cqw / 416); --card-gradient: linear-gradient(151.03deg, #01d9ff 27.318%, #008c1c 57.192%, #cfd602 84.346%); position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; padding: calc(22 * var(--c)) calc(32 * var(--c)); overflow: hidden; border-radius: inherit; background: var(--color-card); }
.how-card::after { content: ""; position: absolute; inset: 0; z-index: 1; padding: 1px; border-radius: inherit; background: var(--card-gradient); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; pointer-events: none; }
.how-card__copy { display: flex; flex-direction: column; gap: calc(8 * var(--c)); flex: 0 0 auto; }
.how-card__number { display: flex; align-items: center; justify-content: center; width: calc(40 * var(--c)); height: calc(40 * var(--c)); border-radius: calc(12 * var(--c)); color: var(--color-inverse); background: var(--color-primary); font-size: calc(20 * var(--c)); line-height: 1.375; font-weight: 700; }
.how-card h3 { font-size: calc(28 * var(--c)); line-height: calc(32 * var(--c)); font-weight: 600; }
.how-card__copy > p { font-size: calc(16 * var(--c)); line-height: calc(22 * var(--c)); color: var(--color-secondary); }
.how-icon { display: inline-block; flex: 0 0 auto; background-position: center; background-size: contain; background-repeat: no-repeat; }
.how-card--record, .how-card--ask { padding-bottom: 0; }
.record-demo { display: flex; flex: 1; align-items: center; justify-content: flex-start; gap: calc(13.75 * var(--c)); margin: 0 calc(-5 * var(--c)) 0 calc(-1 * var(--c)); }
.record-demo__wave { display: flex; flex-direction: column; align-items: center; gap: calc(5 * var(--c)); width: calc(179 * var(--c)); font-size: calc(21 * var(--c)); line-height: calc(26 * var(--c)); letter-spacing: calc(-.3 * var(--c)); }
.how-icon--waves { width: calc(193 * var(--c)); height: calc(31.112 * var(--c)); background-image: url('./assets/how-it-works/record-waves.svg'); }
.record-demo__stop, .record-demo__pause { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 50%; }
.record-demo__stop { width: calc(80 * var(--c)); height: calc(80 * var(--c)); background: #f2504e; }
.how-icon--stop { width: calc(28 * var(--c)); height: calc(28 * var(--c)); background-image: url('./assets/how-it-works/stop.svg'); }
.record-demo__pause { margin-left: calc(1.5 * var(--c)); width: calc(56 * var(--c)); height: calc(56 * var(--c)); gap: calc(5 * var(--c)); background: var(--color-primary); }
.how-icon--pause { width: calc(5.0625 * var(--c)); height: calc(18 * var(--c)); background-image: url('./assets/how-it-works/pause-bar.svg'); }
.how-card--meeting { padding-bottom: calc(16 * var(--c)); }
.meeting-demo { display: flex; align-items: center; gap: calc(16 * var(--c)); padding: calc(12 * var(--c)) 0; }
.how-icon--record-mic { width: calc(18 * var(--c)); height: calc(22 * var(--c)); background-image: url('./assets/how-it-works/record-microphone.svg'); }
.meeting-demo__copy { display: flex; flex-direction: column; gap: calc(6 * var(--c)); min-width: 0; }
.meeting-demo__title { font-size: calc(22 * var(--c)); line-height: calc(30 * var(--c)); letter-spacing: calc(-.3 * var(--c)); white-space: nowrap; }
.meeting-demo__meta { color: var(--color-secondary); font-size: calc(18 * var(--c)); line-height: calc(25 * var(--c)); white-space: nowrap; }
.meeting-demo__folder { display: flex; align-items: center; gap: calc(12 * var(--c)); padding-top: calc(3 * var(--c)); font-size: calc(16 * var(--c)); line-height: calc(22 * var(--c)); white-space: nowrap; }
.how-icon--folder { width: calc(23.7 * var(--c)); height: calc(18.7 * var(--c)); background-image: url('./assets/how-it-works/folder.svg'); }
.ask-demo { display: flex; flex: 1; align-items: center; }
.ask-demo__bar { display: flex; align-items: center; gap: calc(8 * var(--c)); width: 100%; height: calc(56 * var(--c)); padding: 0 calc(8 * var(--c)) 0 calc(12 * var(--c)); position: relative; border-radius: calc(44 * var(--c)); background: var(--color-card); box-shadow: 0 4px 6px -1px rgb(10 13 18 / 10%), 0 2px 4px -2px rgb(10 13 18 / 6%); }
.ask-demo__bar::after { content: ""; position: absolute; inset: 0; padding: 2px; border-radius: inherit; background: linear-gradient(173.67deg, #01d9ff 27.318%, #008c1c 57.192%, #cfd602 84.346%); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; pointer-events: none; }
.how-icon--brand-mark { width: calc(32 * var(--c)); height: calc(32 * var(--c)); background-image: url('./assets/how-it-works/brand-mark.svg'); background-size: calc(29 * var(--c)) calc(30 * var(--c)); }
.ask-demo__text { flex: 1; min-width: 0; white-space: nowrap; color: var(--color-tertiary); font-size: calc(16 * var(--c)); line-height: calc(22 * var(--c)); letter-spacing: calc(-.1 * var(--c)); }
.ask-demo__brand { color: var(--color-secondary); }
.ask-demo__microphone { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: calc(42 * var(--c)); height: calc(42 * var(--c)); background: url('./assets/how-it-works/microphone-circle.svg') center / contain no-repeat; }
.how-icon--small-mic { width: calc(17 * var(--c)); height: calc(20 * var(--c)); background-image: url('./assets/how-it-works/microphone-small.svg'); }
.how-card--devices { gap: calc(10 * var(--c)); }
.devices-demo { position: relative; display: flex; align-items: center; justify-content: space-between; padding-right: calc(5 * var(--c)); height: calc(139 * var(--c)); flex: 0 0 auto; }
.devices-demo__laptop { width: calc(216 * var(--c)); height: calc(132 * var(--c)); object-fit: cover; }
.devices-demo__phone { width: calc(69 * var(--c)); height: calc(139 * var(--c)); object-fit: cover; }
.how-icon--sync { width: calc(43.25 * var(--c)); height: calc(32 * var(--c)); background-image: url('./assets/how-it-works/sync.svg'); }
.how-icon--laptop-logo { position: absolute; left: calc(81 * var(--c)); top: calc(36 * var(--c)); width: calc(54 * var(--c)); height: calc(55 * var(--c)); background-image: url('./assets/how-it-works/laptop-logo.svg'); }
.how-icon--phone-logo { position: absolute; left: calc(295 * var(--c)); top: calc(46 * var(--c)); width: calc(36 * var(--c)); height: calc(37 * var(--c)); background-image: url('./assets/how-it-works/phone-logo.svg'); }
.how-card--protected { gap: calc(6 * var(--c)); }
.protected-demo { flex: 1; display: flex; align-items: center; justify-content: center; }
.protected-demo__panel { display: flex; flex-direction: column; gap: calc(12 * var(--c)); width: calc(332 * var(--c)); height: calc(128 * var(--c)); padding: calc(16 * var(--c)) calc(18 * var(--c)); border-radius: calc(16 * var(--c)); background: var(--color-canvas); box-shadow: inset 0 0 0 1px #e2e8f0; font-size: calc(14 * var(--c)); line-height: calc(20 * var(--c)); }
.protected-demo__title { font-size: calc(18 * var(--c)); line-height: calc(22 * var(--c)); font-weight: 600; }
.protected-demo__status { display: flex; align-items: center; gap: calc(8 * var(--c)); color: var(--color-secondary); }
.how-icon--lock { width: calc(17.5 * var(--c)); height: calc(21.75 * var(--c)); background-image: url('./assets/how-it-works/lock.svg'); }
.how-card--projects .how-card__copy { width: calc(177 * var(--c)); }
.projects-demo { position: absolute; width: calc(352 * var(--c)); height: calc(331 * var(--c)); top: calc(15 * var(--c)); left: calc(234.141861 * var(--c)); transform: rotate(4.3562266deg); transform-origin: top left; filter: drop-shadow(calc(-1 * var(--c)) 0 calc(4 * var(--c)) rgb(0 0 0 / 25%)); }
.projects-demo__image { display: block; width: 100%; height: 100%; object-fit: cover; }
.how-icon--brand-logo { position: absolute; left: calc(32 * var(--c)); top: calc(273 * var(--c)); width: calc(100 * var(--c)); height: calc(24 * var(--c)); background-image: url('./assets/how-it-works/brand-logo.svg'); }
[data-content-state="loading"] .how-it-works, [data-content-state="error"] .how-it-works { visibility: hidden; }
@media (max-width: 1246px) { .how-it-works__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 818px) { .how-it-works__grid { grid-template-columns: minmax(0, 1fr); } }
.hero__qr-frame, .store-badge, .desktop-badge, .upload-card { transition: transform 320ms cubic-bezier(.4, 0, .2, 1), box-shadow 320ms ease; }
@media (hover: hover) and (pointer: fine) {
  .hero__qr-frame:hover, .how-step:hover, .store-badge:hover, .desktop-badge:hover, .upload-card:hover { transform: translateY(-6px) scale(1.02); transition: transform 580ms cubic-bezier(.18, 1.25, .35, 1), box-shadow 360ms ease-out; }
  .hero__qr-frame:hover, .how-step:hover, .upload-card:hover { box-shadow: 0 12px 25px 2px rgb(1 217 255 / 12%); }
  .store-badge:hover, .desktop-badge:hover { transform: translateY(-2px) scale(1.02); }
  .upload-card:hover { transform: translateY(-4px) scale(1.01); }
  .upload-card__dropzone .dashed-outline rect { animation: upload-dashes .8s linear infinite paused; }
  .upload-card:hover .upload-card__dropzone .dashed-outline rect { animation-play-state: running; }
}
.hero[data-motion="paused"] .upload-card .dashed-outline rect { animation-play-state: paused; }
@keyframes upload-dashes { to { stroke-dashoffset: calc(-2 * var(--dash-step)); } }
@media (prefers-reduced-motion: reduce) {
  .hero__qr-frame, .hero__qr-frame:hover, .how-step, .how-step:hover, .store-badge, .store-badge:hover, .desktop-badge, .desktop-badge:hover, .upload-card, .upload-card:hover { transition: none; }
  .hero__qr-frame:hover, .how-step:hover, .store-badge:hover, .desktop-badge:hover, .upload-card:hover { transform: none; }
  .upload-card__dropzone .dashed-outline rect { animation: none; }
}

/* The native dialog keeps the enlarged QR above clipped hero layers and traps focus. */
.hero__qr-frame { display: block; appearance: none; cursor: zoom-in; }
.hero__qr-frame[aria-expanded="true"] { visibility: hidden; transform: none; transition: none; }
.hero__qr-frame:focus-visible, .qr-viewer__qr:focus-visible { outline: 2px solid var(--color-secondary); outline-offset: 5px; }
html.qr-viewer-open, html.download-dialog-open { overflow: hidden; }
.qr-viewer-open body, .download-dialog-open body { padding-right: var(--qr-scrollbar-gap, 0px); }
.qr-viewer { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 24px; border: 0; overflow: hidden; background: rgb(10 18 34 / 60%); }
.qr-viewer[open] { display: grid; place-items: center; }
.qr-viewer::backdrop { background: transparent; }
.qr-viewer__qr { --qr-viewer-size: min(560px, 72vw, 72svh); --u: calc(var(--qr-viewer-size) / 226); position: relative; display: block; width: var(--qr-viewer-size); height: var(--qr-viewer-size); padding: calc(12 * var(--u)); border: 1px solid transparent; border-radius: calc(21.333333 * var(--u)); background: var(--color-card); box-shadow: 0 24px 80px rgb(0 0 0 / 25%); appearance: none; cursor: zoom-out; transform-origin: center; }
.qr-viewer__qr img { display: block; width: 100%; height: 100%; }

/* The full-width header settles into a quiet glass capsule on scroll. */
.site-header { position: fixed; inset: 0 var(--qr-scrollbar-gap, 0px) auto 0; z-index: 20; pointer-events: none; }
.site-header::before { content: ""; position: absolute; inset: 0; background: rgb(244 246 248 / 40%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); mask-image: linear-gradient(#000 65%, transparent); opacity: 1; transition: opacity 400ms ease; }
.site-header__bar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 28px; width: 100%; height: var(--site-header-height); margin: 0 auto; padding: 0 calc(var(--page-gutter) - 1px); border: 1px solid transparent; border-radius: 0; background: transparent; pointer-events: auto; transition: width 480ms cubic-bezier(.22, 1, .36, 1), height 480ms cubic-bezier(.22, 1, .36, 1), margin-top 480ms cubic-bezier(.22, 1, .36, 1), padding 480ms cubic-bezier(.22, 1, .36, 1), border-radius 480ms ease, border-color 400ms ease, background-color 400ms ease, box-shadow 400ms ease, backdrop-filter 400ms ease; }
.site-header__brand { display: flex; align-items: center; flex: 0 0 133px; min-height: 44px; border-radius: 6px; }
.site-header__brand img { display: block; width: 133px; height: 32px; object-fit: contain; }
.site-header__nav { min-width: 0; }
.site-header__links { display: flex; align-items: center; gap: 28px; margin: 0; padding: 0; list-style: none; }
.site-header__link { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--color-primary); text-decoration: none; white-space: nowrap; font-size: 20px; line-height: 1.4; font-weight: 500; transition: color 200ms ease, font-size 480ms ease; }
.site-header__link::after { content: ""; position: absolute; bottom: 6px; left: 0; width: 100%; height: 1px; border-radius: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 240ms cubic-bezier(.22, 1, .36, 1); }
.site-header__actions { display: flex; align-items: center; flex: 0 0 auto; }
.site-header__button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 120px; height: 44px; padding: 0 16px; border: 2px solid transparent; border-radius: 999px; background: linear-gradient(var(--color-canvas), var(--color-canvas)) padding-box, var(--accent-gradient) border-box; color: var(--color-primary); text-decoration: none; font-size: 18px; line-height: 1.4; font-weight: 600; white-space: nowrap; }
.site-header__download { background: linear-gradient(var(--color-primary), var(--color-primary)) padding-box, var(--accent-gradient) border-box; color: var(--color-inverse); }
.site-header__download-slot { flex: 0 0 auto; display: grid; grid-template-columns: 1fr; margin-right: 20px; opacity: 0; visibility: hidden; transition: opacity 240ms ease, visibility 400ms; }
/* Reserve the full slot; only a soft mask moves across the button. */
@property --download-reveal { syntax: "<length-percentage>"; inherits: false; initial-value: 0%; }
.site-header__download-clip { --download-reveal: 0%; min-width: 0; mask-image: linear-gradient(to right, #000 calc(var(--download-reveal) - 16px), transparent var(--download-reveal)); transition: --download-reveal 400ms cubic-bezier(.22, 1, .36, 1); }
.site-header.has-download .site-header__download-clip { --download-reveal: calc(100% + 16px); }
.site-header.has-download .site-header__download-slot { opacity: 1; visibility: visible; }
.site-header.is-compact::before { opacity: 0; }
.site-header.is-compact .site-header__bar { width: min(calc(100% - 48px), 1200px); height: 64px; margin-top: 12px; padding: 0 20px; border-color: rgb(255 255 255 / 75%); border-radius: 999px; background: rgb(244 246 248 / 48%); backdrop-filter: blur(16px) saturate(120%); -webkit-backdrop-filter: blur(16px) saturate(120%); box-shadow: 0 4px 24px rgb(28 37 64 / 7%), 0 0 0 1px rgb(28 37 64 / 5%); }
.site-header.is-compact .site-header__link { font-size: 18px; }
.site-header :is(a, button):focus-visible { outline: 2px solid var(--color-secondary); outline-offset: 4px; }
.site-header__link:focus-visible { color: var(--color-secondary); }
.site-header__link:focus-visible::after { transform: scaleX(1); }
#how-it-works { scroll-margin-top: 76px; }
[data-content-state="loading"] .site-header, [data-content-state="error"] .site-header { visibility: hidden; }
@media (hover: hover) and (pointer: fine) {
  .site-header__link:hover { color: var(--color-secondary); }
  .site-header__link:hover::after { transform: scaleX(1); }
  .site-header__login:hover { color: var(--color-secondary); }
}
@media (max-width: 1270px) {
  .site-header__bar { gap: 20px; }
  .site-header__links { gap: 18px; }
  .site-header__link, .site-header.is-compact .site-header__link { font-size: 16px; }
  .site-header__button { width: 108px; font-size: 16px; }
  .site-header__download-slot { margin-right: 12px; }
}
/* Keep navigation usable on narrow screens while the mobile hero is deferred. */
@media (max-width: 1023px) {
  .site-header__bar { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; height: 96px; padding: 6px var(--page-gutter); }
  .site-header__nav { grid-column: 1 / -1; grid-row: 2; overflow-x: auto; scrollbar-width: none; }
  .site-header__nav::-webkit-scrollbar { display: none; }
  .site-header__links { width: max-content; gap: 22px; }
  .site-header__link { min-height: 36px; font-size: 15px; }
  .site-header__actions { justify-self: end; }
  .site-header__button { width: 100px; height: 40px; padding: 0 12px; font-size: 15px; }
  .site-header__download-slot { margin-right: 8px; }
  .site-header.is-compact .site-header__bar { width: calc(100% - 24px); height: 96px; margin-top: 8px; padding: 6px 14px; border-radius: 24px; }
  .site-header.is-compact .site-header__link { font-size: 15px; }
  #how-it-works { scroll-margin-top: 104px; }
}
@media (max-width: 440px) {
  .site-header__brand { flex-basis: 112px; }
  .site-header__brand img { width: 112px; height: auto; }
  .site-header__button { width: 86px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header::before, .site-header__bar, .site-header__link, .site-header__link::after, .site-header__download-slot, .site-header__download-clip { transition: none; }
}
@supports not (backdrop-filter: blur(1px)) {
  .site-header.is-compact .site-header__bar { background: rgb(244 246 248 / 96%); }
}

/* Directions: compact text cards, two independent seamless conveyor rows. */
.directions { --direction-width: var(--direction-fit-width, var(--direction-base-width)); --direction-base-width: clamp(400px, 30vw, 480px); --direction-target-height: 332px; --direction-gap: 24px; --direction-padding: 16px; --direction-inner-gap: 8px; padding: 0 0 48px; background: var(--color-canvas); overflow: clip; scroll-margin-top: 76px; }
.directions__stage { padding: 28px 0 24px; }
.directions__heading { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 var(--page-gutter); margin-bottom: 34px; text-align: center; }
.directions__heading h2 { font-size: 40px; line-height: 1.2; font-weight: 700; }
.directions__heading > p { color: #62738c; font-size: 24px; line-height: 28px; }
.directions__rows { display: grid; gap: 24px; margin: -40px 0; padding-block: 40px; overflow: hidden; }
.directions__row { --row-offset: calc(var(--direction-width) * -.16); min-width: 0; outline-offset: -3px; }
.directions__row:focus-visible { outline: 2px solid var(--color-secondary); }
.directions__row--reverse { --row-offset: calc(var(--direction-width) * -.48); }
.directions__track { display: flex; width: max-content; animation: directions-drift var(--row-duration, 180s) linear infinite; animation-play-state: paused; }
.directions__group { display: flex; align-items: stretch; gap: var(--direction-gap); flex: 0 0 auto; margin: 0; padding: 0 var(--direction-gap) 0 0; list-style: none; }
.direction-card { position: relative; display: grid; grid-template-rows: auto auto auto auto; align-content: start; gap: var(--direction-inner-gap); flex: 0 0 var(--direction-width); width: var(--direction-width); padding: var(--direction-padding) calc(var(--direction-padding) + 3px); border-radius: 24px; background: var(--color-card); box-shadow: 0 4px 6px -1px rgb(10 13 18 / 10%), 0 2px 4px -2px rgb(10 13 18 / 6%); transition: box-shadow 320ms ease; font-size: 24px; line-height: 28px; }
.direction-card::before, .directions__more::before { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; background: var(--accent-gradient); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; pointer-events: none; }
.direction-card__title { height: var(--direction-title-height, auto); display: block; font-size: inherit; line-height: inherit; font-weight: 600; }
.direction-card__audience { height: var(--direction-audience-height, auto); color: var(--case-color); font-size: 13px; line-height: 18px; font-weight: 600; }
.direction-card__situation { height: var(--direction-situation-height, auto); color: #62738c; font-size: 14px; line-height: 20px; }
.direction-card__result { height: var(--direction-result-height, auto); display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; border-radius: 16px; background: var(--case-background); }
.direction-card__result-label { height: var(--direction-result-label-height, auto); color: var(--case-color); font-size: 13px; line-height: 18px; font-weight: 600; }
.direction-card__result-copy { height: var(--direction-result-copy-height, auto); color: #34415a; font-size: 14px; line-height: 20px; }
.directions[data-motion="running"] .directions__track { animation-play-state: running; }
.directions__row--reverse .directions__track { animation-direction: reverse; }
.directions .directions__row:focus-within .directions__track { animation-play-state: paused; }
@media (hover: hover) { .directions .directions__row:hover .directions__track { animation-play-state: paused; } }
@keyframes directions-drift { from { transform: translateX(var(--row-offset)); } to { transform: translateX(calc(-50% + var(--row-offset))); } }
.directions__more { position: relative; display: flex; flex-direction: column; gap: 12px; margin: 20px var(--page-gutter) 0; padding: 32px 40px; border-radius: 24px; background: var(--color-card); box-shadow: 0 12px 25px 2px rgb(1 217 255 / 12%); }
.directions__more h3 { font-size: 28px; line-height: 32px; font-weight: 600; }
.directions__more p { max-width: 1216px; color: #62738c; font-size: 18px; line-height: 1.5; }
.directions__more a { align-self: flex-start; color: var(--color-secondary); font-size: 18px; line-height: 22px; font-weight: 600; text-decoration: none; }
.directions__more a:hover { text-decoration: underline; text-underline-offset: 4px; }
.directions__more a:focus-visible { outline: 2px solid var(--color-secondary); outline-offset: 4px; }
[data-content-state="loading"] .directions, [data-content-state="error"] .directions { visibility: hidden; }
@media (min-height: 950px) and (min-width: 1024px) {
  .directions { --direction-target-height: 392px; --direction-padding: 24px; --direction-inner-gap: 14px; }
  .directions__stage { padding-top: 40px; padding-bottom: 32px; }
  .directions__heading { margin-bottom: 42px; }
  .direction-card { font-size: 26px; line-height: 30px; }
  .direction-card__audience { font-size: 14px; line-height: 20px; }
  .direction-card__situation, .direction-card__result-copy { font-size: 16px; line-height: 22px; }
}
@media (max-height: 780px) and (min-width: 1024px) {
  .directions { --direction-base-width: clamp(448px, 33.6vw, 528px); --direction-target-height: 305px; --direction-padding: 12px; --direction-inner-gap: 6px; }
  .directions__stage { padding-top: 20px; padding-bottom: 20px; }
  .directions__heading { gap: 8px; margin-bottom: 28px; }
  .directions__heading h2 { font-size: 32px; line-height: 38px; }
  .directions__heading > p { font-size: 20px; line-height: 26px; }
  .directions__rows { gap: 20px; }
  .direction-card { font-size: 22px; line-height: 26px; }
  .direction-card__result { padding: 10px 14px; }
}
@media (max-height: 740px) and (min-width: 1024px) {
  .directions { --direction-target-height: 274px; }
}
@media (max-height: 640px) and (min-width: 1024px) {
  .directions { --direction-base-width: 608px; --direction-target-height: 242px; --direction-padding: 10px; --direction-inner-gap: 6px; }
  .directions__stage { padding: 12px 0; }
  .directions__heading { gap: 6px; margin-bottom: 24px; }
  .directions__heading h2 { font-size: 30px; line-height: 36px; }
  .directions__heading > p { font-size: 18px; line-height: 24px; }
  .directions__rows { gap: 16px; }
  .direction-card { font-size: 20px; line-height: 24px; }
  .direction-card__audience, .direction-card__result-label { font-size: 12px; line-height: 16px; }
  .direction-card__situation, .direction-card__result-copy { font-size: 13px; line-height: 18px; }
  .direction-card__result { gap: 4px; padding: 8px 12px; }
}
@media (max-width: 1023px) {
  .directions { --direction-base-width: min(352px, 68.8vw); --direction-target-height: 420px; scroll-margin-top: 104px; }
  .directions__heading h2 { font-size: clamp(28px, 4vw, 36px); }
  .directions__heading > p { font-size: 18px; line-height: 26px; }
  .direction-card { font-size: 22px; line-height: 26px; }
  .directions__more { padding: 24px; }
  .directions__more h3 { font-size: 24px; line-height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .directions__row { overflow-x: auto; padding: 8px 0 24px; }
  .directions__track { animation: none; }
  .directions__group[aria-hidden="true"] { display: none; }
}

.directions__more { box-shadow: 0 4px 6px -1px rgb(10 13 18 / 10%), 0 2px 4px -2px rgb(10 13 18 / 6%); transition: transform 320ms cubic-bezier(.4, 0, .2, 1), box-shadow 320ms ease; }
@media (hover: hover) and (pointer: fine) {
  .directions__more:hover { transform: translateY(-6px) scale(1.007); box-shadow: 0 12px 25px 2px rgb(1 217 255 / 12%); transition: transform 580ms cubic-bezier(.18, 1.25, .35, 1), box-shadow 360ms ease-out; }
}
@media (prefers-reduced-motion: reduce) {
  .directions__more, .directions__more:hover { transition: none; transform: none; }
}

@media (hover: hover) and (pointer: fine) {
  .direction-card:hover { box-shadow: 0 12px 25px 2px rgb(1 217 255 / 12%); transition: box-shadow 360ms ease-out; }
}
@media (prefers-reduced-motion: reduce) { .direction-card { transition: none; } }

.direction-card__result > p { flex-shrink: 0; }

/* Center shorter copy within the shared text-slot heights. */
.direction-card__title,
.direction-card__audience,
.direction-card__situation,
.direction-card__result-label,
.direction-card__result-copy { display: flex; flex-direction: column; justify-content: center; }

/* Features: the staggered grid follows Figma 786:739 (1298-unit collage).
   Illustration layers retain the original Figma affine transforms, including skew. */
.features { --section-u: clamp(.8px, .069444444vw, 1.333333333px); padding: calc(60 * var(--section-u)) var(--page-gutter); scroll-margin-top: 76px; }
.features__heading { display: flex; flex-direction: column; align-items: center; gap: calc(12 * var(--section-u)); margin-bottom: calc(40 * var(--section-u)); text-align: center; }
.features__heading h2 { font-size: calc(40 * var(--section-u)); line-height: 1.375; font-weight: 700; }
.features__heading > p { color: #62738c; font-size: calc(24 * var(--section-u)); line-height: 1.375; }
.features__collage { --feature-gap: calc(30 * 100cqw / 1278 + 4px); container-type: inline-size; --f: calc(100cqw / 1298); }
.features__grid { --f: calc((100cqw - var(--feature-gap)) / 1248); display: grid; grid-template-columns: minmax(0, 628fr) minmax(0, 620fr); grid-template-rows: calc(525 * var(--f)) calc(133 * var(--f) - var(--feature-gap)) calc(476 * var(--f)); gap: var(--feature-gap); margin: 0 0 var(--feature-gap); }
.feature-card { position: relative; min-width: 0; padding: calc(10 * var(--f)); border-radius: calc(40 * var(--f)); clip-path: inset(0 round calc(40 * var(--f))); overflow: hidden; isolation: isolate; background: var(--color-canvas); transition: transform 580ms cubic-bezier(.22, 1, .36, 1); }
.feature-card::after { content: ""; position: absolute; z-index: 2; inset: 0; padding: 2px; border-radius: inherit; background: var(--accent-gradient); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; pointer-events: none; }
/* Keep transformed artwork inside the inner edge of the 2px outer stroke. */
.feature-card__surface { clip-path: inset(calc(2px - 10 * var(--f)) round calc(40 * var(--f) - 2px)); position: relative; width: 100%; height: 100%; border-radius: calc(32 * var(--f)); background: linear-gradient(var(--feature-angle, -44.3767deg), #1c2540 28.498%, #102e86 97.191%); color: var(--color-inverse); }
.feature-card__copy { display: flex; flex-direction: column; align-items: flex-start; gap: calc(14 * var(--f)); padding: calc(36 * var(--f)) calc(28 * var(--f)) 0; }
.feature-card h3 { font-size: calc(32 * var(--f)); line-height: calc(37 * var(--f)); font-weight: 700; }
.feature-card__copy > p { font-size: calc(20 * var(--f)); line-height: calc(25 * var(--f)); }
.feature-card img { display: block; max-width: none; pointer-events: none; }
.feature-card--record { --accent-angle: 143.8331deg; grid-column: 1; grid-row: 1 / 3; }
.feature-card--record .feature-card__copy { padding-top: calc(40 * var(--f)); }
.feature-card--record h3 { width: calc(540 * var(--f)); }
.feature-card--record .feature-card__copy > p { width: calc(261 * var(--f)); }
.feature-record-icon { --accent-angle: 145.0975deg; position: absolute; left: calc(28 * var(--f)); top: calc(258 * var(--f)); display: grid; place-items: center; width: calc(100 * var(--f)); height: calc(100 * var(--f)); border: calc(2.8 * var(--f)) solid transparent; border-radius: 50%; background: linear-gradient(var(--color-primary), var(--color-primary)) padding-box, var(--accent-gradient) border-box; box-shadow: 0 calc(10 * var(--f)) calc(18 * var(--f)) calc(3 * var(--f)) rgb(15 23 41 / 40%); }
.feature-record-icon img { width: calc(30 * var(--f)); height: calc(37 * var(--f)); }
.feature-motion { position: absolute; pointer-events: none; transition: transform 580ms cubic-bezier(.22, 1, .36, 1); transform: scale(.99); }
.feature-motion--phone { transform: scale(.99) rotate(.6deg); }
.feature-record-phone { left: calc(251.778 * var(--f)); top: calc(5.59 * var(--f)); width: calc(399.643 * var(--f)); height: calc(649.379 * var(--f)); display: grid; place-items: center; }
.feature-record-phone__image { width: calc(299.241 * var(--f)); height: calc(606.78 * var(--f)); transform: rotate(9.96deg); }
.feature-card--desktop { --accent-angle: 149.4266deg; grid-column: 2; grid-row: 1; --feature-angle: -38.1258deg; }
.feature-card--desktop .feature-card__copy { padding-top: calc(330 * var(--f)); }
.feature-laptop { z-index: 1; left: calc(-35 * var(--f)); top: calc(-23.418 * var(--f)); width: calc(600 * var(--f)); height: calc(328.418 * var(--f)); transform: translateX(calc(-3 * var(--f))) scale(.99); transform-origin: 48.5% 54%; }
.feature-laptop__image { width: 100%; height: 100%; object-fit: cover; }
.feature-card--transcript { --accent-angle: 152.1296deg; grid-column: 1; grid-row: 3; --feature-angle: -34.1011deg; }
.feature-card--transcript h3 { line-height: calc(39 * var(--f)); }
.feature-card--transcript .feature-card__copy { gap: calc(22 * var(--f)); }
.feature-checklist { display: flex; flex-direction: column; gap: calc(10 * var(--f)); width: calc(321 * var(--f)); margin: 0; padding: calc(16 * var(--f)) calc(18 * var(--f)) calc(20 * var(--f)); border-radius: calc(18 * var(--f)); background: #fffcfa; color: var(--color-primary); list-style: none; font-size: calc(20 * var(--f)); line-height: 1.35; }
.feature-checklist li { display: flex; align-items: flex-start; gap: calc(8 * var(--f)); width: calc(252 * var(--f)); }
.feature-checklist li > :first-child { flex: 0 0 calc(17 * var(--f)); color: #2961f6; line-height: calc(30 * var(--f)); }
.feature-checklist li > :last-child { flex: 1; min-width: 0; }
.feature-transcript-phone, .feature-summary-phone { inset: 0; filter: drop-shadow(calc(-3 * var(--f)) calc(-2 * var(--f)) calc(5 * var(--f)) rgb(0 0 0 / 36%)); }
.feature-transcript-phone { transform-origin: calc(477 * var(--f)) calc(328 * var(--f)); }
.feature-phone-layer { position: absolute; transform-origin: 0 0; }
.feature-transcript-phone__image { left: calc(98.009 * var(--f)); top: calc(-60.582 * var(--f)); width: calc(587.111 * var(--f)); height: calc(912.998 * var(--f)); transform: matrix(.980044, -.198781, .199593, .979879, 0, 0); }
.feature-card--summary { --accent-angle: 145.5773deg; grid-column: 2; grid-row: 2 / 4; --feature-angle: -42.4701deg; }
.feature-card--summary .feature-card__copy > p { width: calc(379 * var(--f)); }
.feature-summary-preview { position: absolute; left: calc(28 * var(--f)); top: calc(221 * var(--f)); display: flex; flex-direction: column; align-items: flex-start; gap: calc(12 * var(--f)); width: calc(374 * var(--f)); padding: calc(16 * var(--f)) calc(18 * var(--f)) calc(20 * var(--f)); border-radius: calc(18 * var(--f)); overflow: hidden; background: #fffcfa; color: #4d4855; font-size: calc(14 * var(--f)); line-height: calc(19 * var(--f)); }
.feature-summary-preview p { width: calc(508 * var(--f)); }
.feature-summary-preview__breadcrumb { color: #62738c; font-size: calc(13 * var(--f)); line-height: calc(18 * var(--f)); white-space: pre; }
.feature-summary-preview__title { color: var(--color-primary); font-size: calc(20 * var(--f)); line-height: calc(25 * var(--f)); font-weight: 600; }
.feature-summary-preview__items { display: grid; gap: calc(10 * var(--f)); }
.feature-summary-preview__label { margin-bottom: calc(4 * var(--f)); color: #2961f6; font-size: calc(13 * var(--f)); line-height: calc(18 * var(--f)); }
/* Keep the small summary screen out of a flattened, viewport-resolution filter layer.
   Render its shadow at 2x, then halve the affine matrix to retain the same geometry. */
.feature-summary-phone { filter: none; transform-style: preserve-3d; transform-origin: calc(496 * var(--f)) calc(316 * var(--f)); }
.feature-summary-phone__image { will-change: transform; backface-visibility: hidden; left: calc(419.531982 * var(--f) + 3px); top: calc(29 * var(--f) - 10px); width: calc(477.190261 * var(--f)); height: calc(1188.682646 * var(--f)); filter: drop-shadow(calc(-6 * var(--f)) calc(-4 * var(--f)) calc(10 * var(--f)) rgb(0 0 0 / 36%)); transform: matrix(.495782, .0648105, -.0607595, .4962945, 0, 0); }
.feature-card--ai { --accent-angle: 167.6015deg; height: calc(409 * var(--f)); --feature-angle: -15.8453deg; }
.feature-card--ai .feature-card__copy { gap: calc(28 * var(--f)); }
.feature-ai-label { background: linear-gradient(177.3794deg, #01d9ff 58.549%, #008c1c 69.073%, #cfd602 85.706%); background-clip: text; color: transparent; }
.feature-ai-panel { display: grid; place-items: center; transform-origin: 50% 25%; }
.feature-ai-panel--actions { left: calc(760.27 * var(--f)); top: calc(-26.84 * var(--f)); width: calc(489.849 * var(--f)); height: calc(853.254 * var(--f)); }
.feature-ai-panel--summary { left: calc(283.55 * var(--f)); top: calc(-24.27 * var(--f)); width: calc(506.91 * var(--f)); height: calc(883.969 * var(--f)); }
.feature-ai-panel__crop { position: relative; width: calc(420 * var(--f)); height: calc(819.768 * var(--f)); border-radius: calc(37 * var(--f)); transform: rotate(5deg); overflow: hidden; box-shadow: calc(-4 * var(--f)) calc(-3 * var(--f)) calc(12 * var(--f)) rgb(0 0 0 / 36%); }
.feature-ai-panel--summary .feature-ai-panel__crop { width: calc(434.54 * var(--f)); height: calc(849.328 * var(--f)); border-radius: calc(38 * var(--f)); }
.feature-ai-panel__image { position: absolute; top: -7.01%; width: 100%; height: 107.01%; }
.feature-ai-panel--summary .feature-ai-panel__image { top: -6.98%; height: 106.98%; }
[data-content-state="loading"] .features, [data-content-state="error"] .features { visibility: hidden; }
@media (hover: hover) and (pointer: fine) {
  .feature-card:hover { transform: scale(1.007); }
  .feature-card:hover .feature-motion { transform: scale(1.01); }
  .feature-card:hover .feature-motion--phone { transform: scale(1.01) rotate(-.6deg); }
  .feature-card:hover .feature-laptop { transform: translateX(calc(3 * var(--f))) scale(1.01); }
}
/* Conservative single-column fallback until the separate mobile design is supplied. */
@media (max-width: 900px) {
  .features { scroll-margin-top: 104px; }
  .features__collage { --feature-gap: calc(30 * 100cqw / 628 + 4px); --f: calc(100cqw / 628); }
  .features__grid { --f: calc(100cqw / 628); grid-template-columns: minmax(0, 1fr); grid-template-rows: none; margin-inline: 0; }
  .feature-card--record { grid-column: auto; grid-row: auto; height: calc(658 * var(--f)); }
  .feature-card--desktop { grid-column: auto; grid-row: auto; height: calc(525 * var(--f)); }
  .feature-card--transcript { grid-column: auto; grid-row: auto; height: calc(476 * var(--f)); }
  .feature-card--summary { grid-column: auto; grid-row: auto; height: calc(609 * var(--f)); }
  .feature-card--ai { --accent-angle: 140.5766deg; height: calc(740 * var(--f)); }
  .feature-ai-panel--summary { left: calc(20 * var(--f)); top: calc(350 * var(--f)); }
  .feature-ai-panel--actions { left: calc(350 * var(--f)); top: calc(360 * var(--f)); }
}
@media (prefers-reduced-motion: reduce) {
  .feature-card, .feature-card:hover, .feature-motion, .feature-card:hover .feature-motion { transform: none; transition: none; }
  .feature-summary-phone__image { will-change: auto; }
}

/* Fit the initial navigation between the shared desktop gutters. */
@media (min-width: 1024px) and (max-width: 1100px) {
  .site-header:not(.is-compact) .site-header__bar { gap: 12px; }
  .site-header:not(.is-compact) .site-header__links { gap: 12px; }
  .site-header:not(.is-compact) .site-header__link { font-size: 15px; }
}

/* FAQ: the shared section container, with the Figma 390:850 column ratio. */
.faq { display: grid; grid-template-columns: minmax(0, 390fr) minmax(0, 850fr); gap: 56px; padding: 60px var(--page-gutter); scroll-margin-top: 76px; }
.faq__title { font-size: 40px; line-height: 1.375; font-weight: 700; }
.faq__items { display: grid; gap: 12px; min-width: 0; }
.faq__item { border-radius: 16px; background: var(--color-card); transition: background-color 320ms ease; }
.faq__item.is-open { background: #e8eeff; cursor: pointer; }
.faq__question { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; padding: 24px 28px; border: 0; border-radius: 16px; background: transparent; color: var(--color-primary); font-size: 18px; line-height: 28px; font-weight: 600; text-align: start; cursor: pointer; transition: padding-bottom 380ms cubic-bezier(.22, 1, .36, 1); }
.faq__question:focus-visible { outline: 2px solid var(--color-secondary); outline-offset: 3px; }
.faq__icon { position: relative; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; background: #e8eeff; }
/* First rotate the complete plus, while fading its original horizontal stroke.
   Both directions start together; transitions also handle interrupted clicks. */
.faq__mark { position: absolute; inset: 0; transform: rotate(0deg); transition: transform 260ms ease-in-out; }
.faq__mark::before, .faq__stroke { position: absolute; top: 15px; left: 9px; width: 14px; height: 2px; border-radius: 1px; background: #2961f6; }
.faq__mark::before { content: ''; transform: rotate(90deg); }
.faq__stroke { opacity: 1; transition: opacity 220ms ease-in-out; }
.faq__item.is-open .faq__mark { transform: rotate(90deg); transition-delay: 0ms; }
.faq__item.is-open .faq__stroke { opacity: 0; transition-delay: 0ms; }
.faq__answer { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 380ms cubic-bezier(.22, 1, .36, 1), visibility 380ms; }
.faq__answer > div { min-height: 0; overflow: hidden; }
.faq__answer p { padding: 0 60px 24px 28px; color: #4f617a; font-size: 16px; line-height: 26px; }
.faq__item.is-open .faq__answer { grid-template-rows: 1fr; visibility: visible; }
/* The trigger keeps its full hit area; the answer's 16px gap follows Figma. */
.faq__item.is-open .faq__question { padding-bottom: 16px; }
@media (max-width: 1100px) {
  .faq { grid-template-columns: 1fr; gap: 32px; }
  .faq__title .content-line { display: inline; }
  .faq__title .content-line + .content-line::before { content: ' '; }
}
@media (max-width: 600px) {
  .faq { padding-block: 40px; gap: 24px; }
  .faq__title { font-size: 32px; }
  .faq__question { padding: 20px; gap: 16px; font-size: 16px; line-height: 24px; }
  .faq__answer p { padding: 0 20px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .faq__item, .faq__question, .faq__mark, .faq__stroke, .faq__answer { transition: none; }
}

/* Feedback: Figma composition with EKGroup's flat, underlined input treatment. */
.feedback { --page-gutter: var(--section-gutter); display: grid; grid-template-columns: minmax(0, 390fr) minmax(0, 850fr); gap: 56px; padding: 60px var(--page-gutter); scroll-margin-top: 76px; }
.feedback__heading h2 { font-size: 40px; line-height: 48px; font-weight: 700; }
.feedback__heading p { margin-top: 20px; font-size: 20px; line-height: 28px; color: #5c7388; }
.feedback__form { display: flex; flex-direction: column; align-items: stretch; gap: 24px; min-width: 0; }
.feedback-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; font-size: 14px; line-height: 24px; font-weight: 500; }
.feedback__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.feedback-field input, .feedback-field textarea { width: 100%; min-width: 0; height: 56px; margin: 0; padding: 16px 18px; border: 0; border-bottom: 1px solid #d4deeb; border-radius: 0; background: var(--color-card); font: 400 16px/24px Manrope, sans-serif; color: var(--color-primary); outline: none; transition: border-color 180ms, background-color 180ms; }
.feedback-field :is(input, textarea)::placeholder { color: #7a8aa1; opacity: 1; }
.feedback-field :is(input, textarea):focus { border-bottom-color: var(--color-secondary); box-shadow: 0 1px 0 var(--color-secondary); }
.feedback-field textarea { min-height: 104px; height: 104px; resize: vertical; overflow-y: hidden; }
.feedback-field.is-invalid :is(input, textarea) { background: #fff0ef; border-bottom-color: #b54a4a; }
.feedback-field.is-invalid, .feedback-field__error, .feedback__status { color: #b54a4a; }
.feedback-field__error { font-size: 13px; line-height: 20px; font-weight: 400; }
.feedback__consent > label { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 24px; color: #4f617a; cursor: pointer; }
.feedback__consent input { flex: 0 0 20px; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--color-secondary); }
.feedback__consent input:focus-visible { outline: 2px solid var(--color-secondary); outline-offset: 3px; }
.feedback__consent .is-invalid { color: #b54a4a; }
.feedback__policy { color: var(--color-secondary); }
.feedback__policy[href] { text-decoration: underline; text-underline-offset: 3px; }
.feedback__honeypot { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); }
.feedback__status { font-size: 14px; line-height: 22px; }
.feedback__submit, .feedback-success__close { align-self: flex-end; padding: 16px 28px; border: 2px solid transparent; border-radius: 99px; background: linear-gradient(var(--color-primary), var(--color-primary)) padding-box, var(--accent-gradient) border-box; color: var(--color-inverse); font-size: 16px; line-height: 22px; font-weight: 600; cursor: pointer; transition: filter 180ms; }
.feedback__submit:disabled { opacity: .65; cursor: wait; }
.feedback__submit:focus-visible, .feedback-success__close:focus-visible { outline: 2px solid var(--color-secondary); outline-offset: 4px; }
@media (hover: hover) { .feedback__submit:not(:disabled):hover, .feedback-success__close:hover { filter: brightness(1.15); } }
.feedback-success { width: 420px; padding: 0; border: 0; background: transparent; max-width: calc(100vw - 32px); color: var(--color-primary); }
.feedback-success::backdrop { background: rgb(28 37 64 / 55%); }
.feedback-success__panel { display: flex; flex-direction: column; gap: 16px; width: 100%; padding: 32px 28px; border-radius: 16px 0 16px 0; background: var(--color-card); box-shadow: 0 16px 48px rgb(28 37 64 / 18%); }
.feedback-success h2 { font-size: clamp(28px, 3vw, 36px); line-height: 1.15; font-weight: 600; letter-spacing: -.02em; }
.feedback-success p { color: #5c7388; font-size: 16px; line-height: 24px; }
.feedback-success__close { min-width: 140px; margin-top: 8px; padding: 14px 24px; border-radius: 12px 0 12px 0; font-size: 14px; }
html.feedback-success-open { overflow: hidden; }
@media (max-width: 1100px) { .feedback { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 600px) {
  .feedback { padding-block: 40px; gap: 24px; }
  .feedback__heading h2 { font-size: 32px; line-height: 40px; }
  .feedback__heading p { font-size: 18px; line-height: 26px; }
  .feedback__row { grid-template-columns: 1fr; gap: 24px; }
}
@media (prefers-reduced-motion: reduce) { .feedback-field :is(input, textarea), .feedback__submit, .feedback-success__close { transition: none; } }

/* Closing banner: exact Figma photograph with a separate readability gradient. */
.banner { --page-gutter: var(--section-gutter); padding: 20px var(--page-gutter); }
.banner__card { container-type: inline-size; position: relative; isolation: isolate; overflow: hidden; border-radius: 36px; }
.banner__image { position: absolute; z-index: -2; left: 0; top: calc(50% - 24 * 100cqw / 1296); width: 100%; height: calc(438 * 100cqw / 1296); object-fit: cover; transform: translateY(-50%); }
.banner__card::before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgb(245 247 250 / 6%) 0%, rgb(245 247 250 / 70%) 8.1313%, rgb(245 247 250 / 90%) 24.353%, rgb(245 247 250 / 30%) 51.22%, rgb(245 247 250 / 0%) 100%); }
.banner__content { --b: calc(100cqw / 1296); display: flex; flex-direction: column; align-items: flex-start; gap: calc(36 * var(--b)); padding: calc(60 * var(--b)) calc(70 * var(--b)); }
.banner__copy { display: flex; flex-direction: column; gap: calc(16 * var(--b)); }
.banner__copy h2 { font-size: calc(40 * var(--b)); font-weight: 700; line-height: 1.35; }
.banner__copy p { max-width: calc(640 * var(--b)); font-size: calc(20 * var(--b)); line-height: 1.35; }
.banner__button { flex: 0 0 auto; padding: calc(16 * var(--b)) calc(18 * var(--b)); border: calc(2.6 * var(--b)) solid transparent; border-radius: 999px; background: linear-gradient(var(--color-card), var(--color-card)) padding-box, var(--accent-gradient) border-box; color: var(--color-primary); font-size: calc(16 * var(--b)); line-height: 1.375; font-weight: 600; }
@media (max-width: 1100px) {
  .banner__content { --b: 1px; padding: 40px 32px; gap: 28px; }
  .banner__copy h2 { font-size: 32px; }
  .banner__copy p { max-width: 470px; font-size: 18px; }
  .banner__image { top: 0; height: 100%; transform: none; }
  .banner__card::before { background: linear-gradient(90deg, rgb(245 247 250 / 95%), rgb(245 247 250 / 80%) 50%, rgb(245 247 250 / 15%)); }
}
@media (max-width: 600px) {
  .banner__card { border-radius: 24px; }
  .banner__content { padding: 32px 24px; }
  .banner__copy h2 { font-size: 28px; }
  .banner__copy p { font-size: 16px; line-height: 1.5; }
  .banner__copy p .content-line { display: inline; }
  .banner__copy p .content-line + .content-line::before { content: ' '; }
  .banner__card::before { background: rgb(245 247 250 / 88%); }
  .banner__button { max-width: 100%; font-size: 14px; }
}

.site-footer { display: flex; flex-direction: column; gap: 36px; padding: 46px var(--section-gutter) 36px; }
.site-footer__brand { align-self: flex-start; display: block; line-height: 0; }
.site-footer__columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.site-footer h2 { display: flex; align-items: center; min-height: 52px; font-size: 20px; line-height: 28px; letter-spacing: -.4px; font-weight: 600; }
.site-footer__menu, .site-footer__contact-details { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.site-footer__menu ul { display: grid; grid-template-rows: repeat(3, auto); grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; gap: 12px 24px; padding: 0; margin: 0; list-style: none; }
.site-footer__menu li :is(a, button) { display: inline-flex; align-items: center; min-height: 48px; font-size: 18px; line-height: 30px; letter-spacing: -.36px; color: var(--color-primary); text-decoration: none; }
.site-footer__contacts { display: flex; flex-direction: column; gap: 30px; min-width: 0; }
.site-footer address { display: flex; flex-direction: column; gap: 12px; font-size: 18px; line-height: 30px; letter-spacing: -.36px; font-style: normal; }
.site-footer address > div { display: flex; align-items: center; flex-wrap: wrap; gap: 0 13px; min-height: 48px; }
.site-footer address a { overflow-wrap: anywhere; }
.site-footer a { color: var(--color-secondary); text-underline-offset: 3px; }
.site-footer a:focus-visible { outline: 2px solid var(--color-secondary); outline-offset: 5px; border-radius: 3px; }
.site-footer__socials { display: flex; gap: 30px; }
.site-footer__social { display: block; position: relative; width: 33px; height: 33px; }
.site-footer__social img { display: block; transform-origin: 50% 50%; transform: translateZ(0) scale(1); }
.site-footer__policies { display: flex; flex-wrap: wrap; gap: 16px 48px; font-size: 14px; line-height: 1.4; }
.site-footer__policies a { text-decoration: underline; }
.site-footer [aria-disabled="true"] { cursor: default; }
.site-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 36px; border-top: 1px solid #c1c7cd; font-size: 14px; line-height: 1.4; }
.site-footer__developer { display: flex; align-items: center; gap: 12px; }
.site-footer__developer > span { white-space: nowrap; }
.site-footer__developer a { display: block; flex: 0 0 90px; height: 32px; }
.site-footer__developer img { display: block; object-fit: contain; }
@media (hover: hover) { .site-footer__menu a:hover { color: var(--color-secondary); text-decoration: underline; } }
@media (max-width: 900px) { .site-footer__columns { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 32px; } }
@media (max-width: 600px) {
  .site-footer { gap: 28px; padding-block: 36px; }
  .site-footer__columns { grid-template-columns: 1fr; gap: 28px; }
  .site-footer__bottom { align-items: flex-start; flex-direction: column; padding-top: 28px; }
  .site-footer address { font-size: 16px; }
}

.site-footer__menu li button { padding: 0; border: 0; background: transparent; text-align: left; }
@media (min-width: 601px) and (max-width: 1100px) { .site-footer__columns { grid-template-columns: 1fr; gap: 28px; } }

.features__actions { display: flex; justify-content: center; margin-top: 32px; padding-block: 8px; }
.features__try { display: inline-flex; align-items: center; justify-content: center; width: 200px; padding: 16px; border: 2.6px solid transparent; border-radius: 999px; background: linear-gradient(var(--color-card), var(--color-card)) padding-box, var(--accent-gradient) border-box; color: var(--color-primary); font-size: 16px; line-height: 22px; font-weight: 600; text-decoration: none; }
.banner__button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.features__try:focus-visible, .banner__button:focus-visible { outline: 2px solid var(--color-secondary); outline-offset: 4px; }

/* Keep the banner crop and layout fixed while its photograph gently zooms. */
.banner__image { scale: 1; transition: scale 580ms cubic-bezier(.22, 1, .36, 1); }
.site-footer__social img { transition: transform 580ms cubic-bezier(.22, 1, .36, 1); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .banner__card:hover .banner__image { scale: 1.005; }
  .site-footer__social:hover img { transform: translateZ(0) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .banner__image, .site-footer__social img { transition: none; }
}

/* Keep feature artwork on the same compositing layers before, during and after
   hover. Fractional responsive sizes must not switch rasterization at the end. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .feature-card, .feature-motion { will-change: transform; backface-visibility: hidden; }
  .feature-card { transform: translateZ(0) scale(1); }
  .feature-card:hover { transform: translateZ(0) scale(1.007); }
}

/* The conveyor remains archived under directions_old; this is the active grid. */
#directions_old[hidden] { display: none !important; }
.directions--static { padding-block: 47px; overflow: visible; }
.directions--static > .directions__heading { margin-bottom: 40px; gap: 12px; }
.directions--static .directions__heading h2 { font-size: 40px; line-height: 48px; }
.directions--static .directions__heading > p { font-size: 24px; line-height: 28px; }
.directions__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 24px; margin-inline: var(--page-gutter); }
.direction-tile { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 22px 28px; border-radius: 24px; background: var(--color-card); color: var(--color-primary); text-decoration: none; box-shadow: 0 4px 6px -1px rgb(10 13 18 / 10%), 0 2px 4px -2px rgb(10 13 18 / 6%); transition: transform 320ms cubic-bezier(.4, 0, .2, 1), box-shadow 320ms ease; }
.direction-tile::before { content: ''; position: absolute; inset: 0; padding: 1px; border-radius: inherit; background: var(--accent-gradient); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; pointer-events: none; }
.direction-tile h3 { display: flex; align-items: center; min-height: 64px; font-size: 28px; line-height: 32px; font-weight: 600; }
.direction-tile__result { display: flex; flex-direction: column; gap: 8px; min-height: 118px; }
.direction-tile__label { font-size: 14px; line-height: 18px; font-weight: 600; }
.direction-tile__copy { font-size: 16px; line-height: 22px; color: #34415a; }
.direction-tile--browse { justify-content: space-between; }
.direction-tile--browse > span { display: flex; align-items: center; justify-content: flex-end; min-height: 64px; font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -.3px; text-align: right; }
.direction-tile--browse:focus-visible { outline: 2px solid var(--color-secondary); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .direction-tile { will-change: transform; }
  .direction-tile:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 12px 25px 2px rgb(1 217 255 / 12%); transition: transform 580ms cubic-bezier(.18, 1.25, .35, 1), box-shadow 360ms ease-out; }
}
@media (max-width: 1100px) { .directions__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 650px) {
  .directions__grid { grid-template-columns: 1fr; }
  .directions--static .directions__heading h2 { font-size: 28px; line-height: 36px; }
  .directions--static .directions__heading > p { font-size: 18px; line-height: 26px; }
}
@media (prefers-reduced-motion: reduce) { .direction-tile, .direction-tile:hover { transform: none; transition: none; will-change: auto; } }

/* Download popup, Figma 3925:15018. Reuse hero badges at their 1px design scale. */
.download-dialog { --u: 1px; --store-u: 1px; position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 24px; border: 0; overflow: auto; overscroll-behavior: contain; background: rgb(10 18 34 / 60%); color: var(--color-primary); }
.download-dialog[open] { display: flex; }
.download-dialog::backdrop { background: transparent; }
.download-dialog__panel { flex: 0 1 629px; min-width: 0; margin: auto; padding: 32px; border-radius: 24px; background: var(--color-card); }
.download-dialog__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.download-dialog__header h2 { font-size: 25px; font-weight: 500; line-height: 22px; }
.download-dialog__close { flex: 0 0 40px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--color-canvas); color: var(--color-secondary); font-size: 28px; line-height: 16px; letter-spacing: -.3px; cursor: pointer; }
.download-dialog__close:focus-visible { outline: 2px solid var(--color-secondary); outline-offset: 3px; }
.download-dialog__body { display: flex; flex-direction: column; gap: 36px; }
.download-dialog__qr { flex: 0 0 152px; width: 152px; height: 152px; display: grid; place-items: center; border: 2px solid transparent; border-radius: 16px; background: linear-gradient(var(--color-card), var(--color-card)) padding-box, var(--accent-gradient) border-box; }
.download-dialog__qr img { display: block; width: 134px; height: 134px; }
/* Conservative narrow-screen layout; no separate mobile frame was supplied. */
@media (max-width: 676px) {
  .download-dialog { padding: 16px; }
  .download-dialog__panel { padding: 24px; }
  .download-dialog .hero__platforms { flex-wrap: wrap; gap: 24px; }
  .download-dialog .hero__qr-row { flex-wrap: wrap; gap: 20px; }
  .download-dialog .hero__qr-copy .content-line { display: inline; }
  .download-dialog .hero__qr-copy .content-line + .content-line::before { content: ' '; }
  .download-dialog .hero__mobile-downloads { max-width: 100%; }
  .download-dialog .store-badge { max-width: 100%; height: auto; aspect-ratio: 167.5 / 50; }
  .download-dialog .store-badge img { width: 100%; height: auto; }
}

/* Mobile hero (<1024px): a two-slide carousel. Slide 1 is the downloads column shown large
   (no QR), slide 2 is the upload card. Desktop keeps the two-column composition above unchanged. */
.hero-carousel { display: none; }
.hero__subtitle { display: none; }
@media (max-width: 1023px) {
  .hero {
    --layout-u: 1px; --u: 1px;
    --hero-inner: calc(100vw - 2 * var(--page-gutter));
    /* All six badges share the 178-unit desktop badge width: two per row, 12 units apart. */
    --store-u: clamp(.6px, calc(var(--hero-inner) / 368), 1.15px);
    display: flex; flex-direction: column;
    min-width: 0; min-height: 100svh;
    padding: calc(96px + 12px) 0 72px;
  }
  /* The desktop photo is rotated about its top-left corner and sized from the width, so on
     tall screens its left edge swings into view as a light diagonal strip. Rotate it about
     the centre with enough overscan on every side to cover the whole hero instead. */
  .hero__background-image { left: -30%; top: -15%; width: 160%; height: 130%; transform-origin: 50% 50%; object-position: 50% 50%; }
  /* Both slides stay in the flex track, so its height is the taller slide (the upload card).
     Slides are top-aligned and the dots row follows the track: it never moves between slides. */
  .hero__content { --hero-slide: 0; flex: 0 0 auto; display: flex; align-items: flex-start; gap: 0; transform: translateX(calc(var(--hero-slide) * -100% + var(--hero-drag, 0px))); transition: transform 420ms cubic-bezier(.4, 0, .2, 1); touch-action: pan-y; }
  .hero[data-slide="1"] .hero__content { --hero-slide: 1; }
  .hero__content.is-dragging { transition: none; }
  .hero__content > .hero__downloads, .hero__content > .hero__try { flex: 0 0 100%; width: 100%; padding: 0 var(--page-gutter); }
  .hero__downloads { gap: 28px; }
  /* Slide 2 stretches to the track height (the taller slide); the dropzone takes the extra. */
  .hero__try { gap: 0; align-self: stretch; justify-content: flex-start; }
  .hero__try .upload-card { flex: 1 0 auto; }
  .hero__try .upload-card__dropzone { flex: 1 0 auto; justify-content: center; }

  /* Slide 1: the left column, large. The longest title line spans the content width
     (capped at the 80px desktop maximum on wide tablets). */
  .hero__heading-group { gap: 20px; }
  .hero__title { --title-size: clamp(26px, calc(var(--hero-inner) / 9.5), 80px); font-size: var(--title-size); line-height: 1.16; letter-spacing: -.01em; }
  /* Mobile-only subtitle (Figma reference): regular brand blue, two lines at 390. */
  .hero__subtitle { display: block; margin-top: -8px; color: var(--color-secondary); font-size: clamp(15px, 4.4vw, 20px); line-height: 1.4; font-weight: 400; }
  .hero__app { gap: 0; }
  .hero__app-title { font-size: clamp(19px, 5.4vw, 34px); line-height: 1.35; letter-spacing: -.2px; }
  .hero__qr-row { display: none; }
  .hero__platforms { flex-direction: column; align-items: center; gap: calc(12 * var(--store-u)); }
  .hero__mobile-downloads, .hero__desktop-downloads { width: calc(368 * var(--store-u)); }
  .hero__store-grid { grid-template-columns: repeat(2, calc(178 * var(--store-u))); }
  .hero__desktop-stack { flex-direction: row; }
  .store-badge, .desktop-badge { width: calc(178 * var(--store-u)); height: calc(52.5 * var(--store-u)); }
  /* Store SVGs are 167-170 wide; fill the shared width (about 2-5% stretch). */
  .store-badge img { width: 100%; height: 100%; max-width: none; object-fit: fill; }

  /* Slide 2: the upload card at its 1px design scale, with free height. */
  /* Compact spacing: the card is the taller slide and sets the dots row position. */
  .upload-card { width: min(100%, 600px); aspect-ratio: auto; padding: 20px clamp(14px, 4vw, 28px); gap: 14px; }
  .upload-card__cloud { width: 40px; height: 33px; }
  .upload-card__instructions { gap: 10px; }
  .upload-card__actions { gap: 10px; }
  .upload-card__title { font-size: clamp(18px, 5vw, 22px); line-height: 1.3; }
  .upload-card__dropzone { gap: 12px; padding: 18px 12px 16px; }
  .upload-card__prompt { font-size: clamp(17px, 4.8vw, 22px); line-height: 1.3; }
  .upload-card__actions { flex-wrap: wrap; }
  .upload-button { flex: 1 1 auto; padding: 0 18px; }

  /* Controls row: text steps at the screen edges, dots centred between them.
     Each label is always two lines (JSON array → .content-line); the arrow sits on the
     first line of the back step and the last line of the forward step. */
  /* Same soft substrates as the desktop hero, centred on the controls row so the labels stay
     legible over the photo. 1 SVG unit = 100vw / 693, so the main ellipse (rx 520) spans ~1.5 screens. */
  .hero-carousel { --substrate-u: calc(100vw / 693); position: relative; }
  .hero-carousel::before { content: ""; position: absolute; z-index: -1; left: calc(50% - 740.5 * var(--substrate-u)); top: calc(50% - 437.5 * var(--substrate-u)); width: calc(2232 * var(--substrate-u)); height: calc(1052 * var(--substrate-u)); background: url("./assets/hero/substrates.svg") 0 0 / 100% 100% no-repeat; pointer-events: none; }
  .hero-carousel { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 4px; margin-top: 16px; padding: 0 calc(var(--page-gutter) - 4px); }
  .hero-carousel__step { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; border: 0; border-radius: 8px; background: none; color: var(--color-secondary); font-size: clamp(13px, 3.6vw, 16px); line-height: 1.25; white-space: nowrap; font-weight: 600; cursor: pointer; transition: opacity 240ms ease, visibility 0s; }
  .hero-carousel__step--prev { grid-column: 1; justify-self: start; align-items: flex-start; align-items: first baseline; text-align: left; }
  .hero-carousel__step--next { grid-column: 3; justify-self: end; align-items: flex-end; align-items: last baseline; text-align: right; }
  /* The space keeps the accessible name natural ("Распознать запись"); it collapses visually. */
  .hero-carousel__step .content-line + .content-line::before { content: " "; }
  .hero-carousel__step-icon { flex: 0 0 auto; font-size: 1.15em; transition: transform 240ms ease; }
  .hero:not([data-slide="1"]) .hero-carousel__step--prev, .hero[data-slide="1"] .hero-carousel__step--next { opacity: 0; visibility: hidden; transition: opacity 240ms ease, visibility 0s linear 240ms; }
  .hero-carousel__dots { grid-column: 2; display: flex; justify-content: center; gap: 0; }
  .hero-carousel__dot { display: flex; align-items: center; justify-content: center; width: 28px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; }
  .hero-carousel__dot::before { content: ""; display: block; width: 8px; height: 8px; border-radius: 999px; background: var(--color-primary); opacity: .32; transition: width 320ms cubic-bezier(.4, 0, .2, 1), background-color 320ms, opacity 320ms; }
  .hero-carousel__dot[aria-current="true"]::before { width: 24px; background: var(--color-secondary); opacity: 1; }
  .hero-carousel__step:focus-visible, .hero-carousel__dot:focus-visible { outline: 2px solid var(--color-secondary); outline-offset: 2px; border-radius: 8px; }
  .hero__scroll-hint { bottom: 14px; }
}
@media (hover: hover) and (pointer: fine) and (max-width: 1023px) {
  .hero-carousel__step--next:hover .hero-carousel__step-icon { transform: translateX(3px); }
  .hero-carousel__step--prev:hover .hero-carousel__step-icon { transform: translateX(-3px); }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .hero__content, .hero-carousel__step, .hero-carousel__step-icon, .hero-carousel__dot::before { transition: none; }
  .hero-carousel__step-icon { transform: none !important; }
}