:root {
  color-scheme: light dark;
  --page: #d5dadd;
  --page-deep: #c4cbd0;
  --paper: #edf0f1;
  --paper-bright: #f6f7f7;
  --ink: #17191c;
  --ink-soft: #272b2f;
  --muted: #4f565d;
  --quiet: #586067;
  --accent: #b7443a;
  --accent-dark: #98372f;
  --accent-ink: #fffaf8;
  --dark: #121416;
  --dark-soft: #1c1f22;
  --edge-light: rgb(255 255 255 / 60%);
  --edge-dark: rgb(26 30 34 / 12%);
  --shadow: rgb(36 42 46 / 18%);
  --focus: #8c312a;
  --glass: rgb(231 234 236 / 84%);
  --glass-strong: rgb(239 241 242 / 93%);
  --glass-edge: rgb(255 255 255 / 58%);
  --glass-hover: #e2e6e8;
  --card: #dfe4e6;
  --card-alt: #d7dde0;
  --card-edge: rgb(255 255 255 / 68%);
  --card-sheen: rgb(255 255 255 / 42%);
  --hairline: rgb(29 33 36 / 16%);
  --hairline-strong: rgb(29 33 36 / 22%);
  --sheen: rgb(255 255 255 / 46%);
  --section-space: clamp(104px, 10vw, 168px);
  --shell: min(1280px, calc(100% - 64px));
  --ease-out: cubic-bezier(0.32, 0.72, 0, 1);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif;
  --layer-header: 30;
  --layer-skip: 40;
  --hero-recede: rgb(214 219 222 / 26%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #111315;
    --page-deep: #0a0c0d;
    --paper: #1a1d20;
    --paper-bright: #22262a;
    --ink: #f3f4f5;
    --ink-soft: #dfe3e5;
    --muted: #b3b9be;
    --quiet: #99a0a6;
    --accent: #df675b;
    --accent-dark: #ed7568;
    --accent-ink: #17191b;
    --edge-light: rgb(255 255 255 / 12%);
    --edge-dark: rgb(0 0 0 / 44%);
    --shadow: rgb(0 0 0 / 46%);
    --focus: #ff8a7e;
    --glass: rgb(23 26 29 / 84%);
    --glass-strong: rgb(26 29 32 / 93%);
    --glass-edge: rgb(255 255 255 / 13%);
    --glass-hover: #262b2f;
    --hero-recede: rgb(13 15 17 / 32%);
    --card: #21262a;
    --card-alt: #1c2125;
    --card-edge: rgb(255 255 255 / 9%);
    --card-sheen: rgb(255 255 255 / 5%);
    --hairline: rgb(255 255 255 / 13%);
    --hairline-strong: rgb(255 255 255 / 20%);
    --sheen: rgb(255 255 255 / 6%);
  }
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;
  overflow-x: clip;
  color: var(--ink);
  background: var(--page);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.nav-open {
  overflow: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
}

:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--focus);
}

#main:focus {
  outline: 0;
}

[hidden] {
  display: none !important;
}

.section-shell {
  width: var(--shell);
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: var(--layer-skip);
  padding: 10px 14px;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 8px;
  transform: translateY(-180%);
  transition: transform 240ms var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: fixed;
  inset: 18px 0 auto;
  z-index: var(--layer-header);
  pointer-events: none;
}

.nav-shell {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: min(1160px, calc(100% - 40px));
  min-height: 64px;
  margin-inline: auto;
  padding: 6px 7px 6px 14px;
  border: 1px solid var(--glass-edge);
  border-radius: 20px;
  background: var(--glass);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 76%), 0 12px 28px rgb(43 49 54 / 12%);
  backdrop-filter: blur(18px) saturate(122%);
  -webkit-backdrop-filter: blur(18px) saturate(122%);
  pointer-events: auto;
  transition: background-color 240ms ease, border-color 240ms ease;
}

.site-header.is-scrolled .nav-shell {
  background: var(--glass-strong);
  border-color: var(--glass-edge);
}

.brand,
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  min-height: 44px;
  font-weight: 680;
  letter-spacing: -0.025em;
}

.brand-logo {
  display: contents;
}

.brand img {
  width: 44px;
  height: 44px;
  border-radius: 11px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 27px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 570;
}

.nav-links a,
.footer-links a {
  transition: color 180ms ease;
}

.nav-action,
.primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  min-height: 50px;
  padding: 0 22px;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 24%), 0 3px 5px rgb(89 34 29 / 14%);
  font-size: 15px;
  font-weight: 680;
  line-height: 1;
  transition: background-color 180ms ease, box-shadow 180ms ease;
}

.nav-action {
  justify-self: end;
}

.nav-toggle {
  display: none;
  min-width: 44px;
  min-height: 44px;
}

@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover,
  .footer-links a:hover {
    color: var(--ink);
  }

  .nav-action:hover,
  .primary-action:hover {
    background: var(--accent-dark);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%), 0 2px 4px rgb(89 34 29 / 12%);
  }
}

.home-hero {
  position: relative;
  min-height: 100dvh;
  overflow: clip;
  isolation: isolate;
}

.hero-metal {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background:
    linear-gradient(107deg, transparent 22%, rgb(255 255 255 / 18%) 43%, transparent 62%),
    radial-gradient(ellipse 68% 60% at 18% -8%, rgb(255 255 255 / 76%) 0%, transparent 68%),
    radial-gradient(ellipse 54% 76% at 108% 20%, rgb(49 58 64 / 31%) 0%, transparent 74%),
    linear-gradient(128deg, #778189 0%, #d7dcde 27%, #f2f3f3 48%, #9ca5ab 73%, #e4e7e8 100%);
}

.hero-metal::before,
.hero-metal::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
}

.hero-metal::before {
  background: repeating-linear-gradient(0deg, rgb(255 255 255 / 3%) 0 1px, rgb(22 28 32 / 2%) 1px 2px, transparent 2px 6px);
  opacity: 0.52;
}

.hero-metal::after {
  background:
    linear-gradient(to bottom, transparent 62%, rgb(213 218 221 / 82%) 88%, var(--page) 100%),
    radial-gradient(ellipse 90% 78% at 50% 36%, transparent 36%, rgb(25 30 34 / 14%) 100%);
}

.hero-signal {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  transition: opacity 260ms var(--ease-out);
}

.hero-signal-three {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms var(--ease-out);
}

.home-hero.has-three-signal .hero-signal {
  opacity: 0;
}

.home-hero.has-three-signal .hero-signal-three {
  opacity: 1;
}

.hero-signal path {
  fill: none;
  stroke: rgb(255 255 255 / 48%);
  stroke-width: 4;
  vector-effect: non-scaling-stroke;
}

/*
  The hero's only background motif: one line leaving the dictation mic (JS
  redraws it on resize) and landing exactly where the page-long story line
  begins, so scrolling reads as following that signal down the page.
*/
.hero-signal {
  color: #a73e35;
}

.hero-signal .hero-signal-accent {
  stroke: url(#hero-signal-fade);
  stroke-linecap: round;
  stroke-width: clamp(4px, 0.5vw, 8px);
  vector-effect: non-scaling-stroke;
}


.hero-shell {
  position: relative;
  --hero-copy-offset: 0;
  width: var(--shell);
  min-height: 100dvh;
  margin-inline: auto;
  padding: clamp(132px, 16vh, 180px) 0 54px;
}

.hero-heading {
  position: relative;
  z-index: 4;
  width: min(820px, 64vw);
  margin-left: var(--hero-copy-offset);
}

.hero-heading h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(64px, 8.2vw, 126px);
  font-weight: 720;
  letter-spacing: -0.075em;
  line-height: 0.89;
  text-wrap: balance;
}

.hero-heading h1 span {
  display: block;
}

.hero-heading h1 span:last-child {
  margin-left: 0;
}

/*
  One gesture for the whole hero: the same short rise on the same curve, a beat
  apart, in the order the eye should take them. The headline used to animate
  clip-path and transform together, which showed the type through a window that
  was itself moving — glyph fragments, then a blurred double, before it settled
  — and the two lines were staggered, so it read as two stages. It is one
  element now, and nothing but opacity and a small rise, which keeps the type
  crisp the whole way. The artifacts carry their own rotations and the parallax
  shift, so they rise with `translate`, which composes rather than overwrites.
*/
@media (prefers-reduced-motion: no-preference) {
  .hero-heading h1,
  .hero-lead,
  .hero-artifacts .hero-chat-fragment,
  .hero-artifacts .hero-dictation,
  .hero-artifacts .hero-note-fragment,
  .hero-artifacts .hero-keyboard-fragment {
    animation: hero-enter 480ms var(--ease-out) both;
  }

  .hero-lead {
    animation-delay: 80ms;
  }

  .hero-artifacts .hero-chat-fragment {
    animation-delay: 140ms;
  }

  .hero-artifacts .hero-dictation {
    animation-delay: 180ms;
  }

  .hero-artifacts .hero-note-fragment {
    animation-delay: 230ms;
  }

  .hero-artifacts .hero-keyboard-fragment {
    animation-delay: 280ms;
  }

  /* The line joins the button to the pill, so it arrives once both are there. */
  .hero-signal {
    animation: hero-signal-enter 700ms var(--ease-out) 300ms both;
  }
}

@keyframes hero-enter {
  from {
    opacity: 0;
    translate: 0 18px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes hero-signal-enter {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.hero-lead {
  position: absolute;
  top: clamp(390px, 53vh, 560px);
  left: var(--hero-copy-offset);
  z-index: 5;
  display: grid;
  gap: 24px;
  width: min(390px, 31vw);
}

.hero-lead p {
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(17px, 1.4vw, 21px);
  letter-spacing: -0.02em;
  line-height: 1.42;
  text-wrap: pretty;
}

.hero-voice-link {
  position: absolute;
  right: clamp(34px, 5vw, 76px);
  bottom: clamp(52px, 7vh, 82px);
  z-index: 5;
  color: var(--accent-dark);
  font-size: 15px;
  font-weight: 660;
  transition: color 180ms ease;
}

.hero-voice-link span,
.voice-action span {
  display: inline-block;
  margin-left: 5px;
  transition: transform 180ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .hero-voice-link:hover,
  .voice-action:hover {
    color: var(--accent-dark);
  }

  .hero-voice-link:hover span,
  .voice-action:hover span {
    transform: translate(2px, -2px);
  }
}

.hero-platform-note {
  position: absolute;
  left: 0;
  bottom: 46px;
  z-index: 5;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.hero-artifacts {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  --hero-shift: 0px;
  transform: translate3d(0, var(--hero-shift), 0);
}

.hero-dictation,
.hero-keyboard-fragment,
.hero-chat-fragment,
.hero-note-fragment {
  position: absolute;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 19%), 0 18px 34px rgb(34 39 43 / 20%);
}

.hero-dictation {
  top: 12%;
  right: 13%;
  display: grid;
  grid-template-columns: 40px 1fr 44px;
  align-items: center;
  gap: 13px;
  width: clamp(320px, 30vw, 460px);
  height: 66px;
  padding: 10px;
  color: #eff1f2;
  background: linear-gradient(180deg, #24282b, #0f1113);
  border-radius: 18px;
  transform: rotate(-5deg);
}

.hero-dictation > img {
  border-radius: 9px;
}

.hero-dictation-mic,
.voice-control-mic {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: #a73e35;
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 24%), 0 2px 5px rgb(0 0 0 / 28%);
}

.hero-dictation-mic img,
.voice-control-mic img,
.keyboard-mic img {
  filter: brightness(0) invert(1);
}

.hero-keyboard-fragment,
.hero-chat-fragment,
.hero-note-fragment {
  overflow: hidden;
  color: #edf0f1;
  background: linear-gradient(150deg, #2a2e32, #111315 70%);
  border-radius: 24px;
}

.hero-keyboard-fragment {
  right: 4%;
  bottom: 11%;
  width: clamp(330px, 32vw, 470px);
  padding: 14px;
  transform: rotate(4deg);
}

/*
  Keyboard fragment: the rewrite is the message, so it gets the type size.
  The chips name the tool that did it, and the key row sits underneath at low
  opacity — enough to say "keyboard", not enough to compete for the read.
*/
.hero-rewrite {
  display: grid;
  gap: 7px;
  margin: 0 0 13px;
}

.hero-rewrite s {
  color: #939aa0;
  font-size: 12px;
  text-decoration-color: rgb(183 68 58 / 72%);
  text-decoration-thickness: 1.5px;
}

.hero-rewrite b {
  color: #f1f3f4;
  font-size: 15px;
  font-weight: 580;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.hero-tool-row {
  display: flex;
  gap: 7px;
  color: #c1c6ca;
  font-size: 11px;
}

.hero-tool-row span {
  padding: 6px 10px;
  background: #292d31;
  border-radius: 8px;
  white-space: nowrap;
}

.hero-tool-row .is-active {
  color: #fdf2f0;
  background: #a73e35;
}

.hero-key-row {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 5px;
  margin-top: 14px;
  opacity: 0.4;
}

.hero-key-row b {
  display: grid;
  place-items: center;
  height: 26px;
  background: #474c50;
  border-radius: 6px;
  box-shadow: 0 2px 0 #25282b;
  font-size: 10px;
  font-weight: 520;
}

.hero-chat-fragment {
  top: 37%;
  right: -5%;
  width: clamp(270px, 25vw, 380px);
  padding: 18px 20px;
  transform: rotate(5deg);
}

.fragment-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  color: #9da4aa;
  font-size: 11px;
}

.fragment-bar span:first-child {
  display: inline-flex;
  align-items: center;
}

/*
  Chat fragment: Visual Chat answers with pictures, so the hero shows pictures.
  Three tiles, one word each. They are graded down to the page's cool two-colour
  palette — at full chroma they are the only saturated pixels above the fold and
  they beat the headline to the eye, which is backwards for a supporting piece.
  The Chat section below shows the same places in full colour; that is the payoff.
*/
.hero-place-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.hero-place-row span {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.hero-place-row img {
  display: block;
  width: 100%;
  height: clamp(64px, 6.4vw, 88px);
  border-radius: 10px 3px 10px 3px;
  outline: 1px solid rgb(255 255 255 / 10%);
  outline-offset: -1px;
  object-fit: cover;
  filter: saturate(0.45) brightness(0.88);
}

.hero-place-row b {
  overflow: hidden;
  color: #e6eaec;
  font-size: 11px;
  font-weight: 560;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-note-fragment {
  right: 29%;
  bottom: 4%;
  width: clamp(250px, 22vw, 340px);
  padding: 18px 20px 21px;
  color: #222629;
  background: #eef0f1;
  transform: rotate(-3deg);
}

.hero-note-fragment .fragment-bar {
  margin-bottom: 0;
  color: #697077;
}

/*
  Notes fragment: the one-second story is voice becoming text, so the
  waveform sits directly above the line it turned into.
*/
.hero-note-wave {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 34px;
  margin: 12px 0;
  padding: 0 12px;
  background: #e0e4e6;
  border-radius: 9px;
}

.hero-note-wave i {
  width: 3px;
  height: var(--h);
  min-height: 5px;
  background: #7e878e;
  border-radius: 99px;
}

.hero-note-fragment p {
  margin: 0;
  color: #3d444a;
  font-size: 13px;
  letter-spacing: -0.01em;
  line-height: 1.42;
}

.story-surface {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(ellipse 34% 19% at 82% 10%, rgb(255 255 255 / 40%), transparent 75%),
    radial-gradient(ellipse 30% 22% at 16% 55%, rgb(117 125 131 / 11%), transparent 76%),
    linear-gradient(180deg, var(--page), #e1e5e7 38%, #d2d8db 72%, var(--page));
  isolation: isolate;
}

.story-surface::before {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: repeating-linear-gradient(0deg, rgb(255 255 255 / 2%) 0 1px, rgb(40 46 51 / 1.5%) 1px 2px, transparent 2px 7px);
  content: "";
  opacity: 0.58;
  pointer-events: none;
}

.story-signal {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.story-signal path {
  fill: none;
  stroke-linecap: round;
  stroke-width: clamp(4px, 0.5vw, 8px);
  vector-effect: non-scaling-stroke;
}

.story-signal-base {
  stroke: rgb(255 255 255 / 44%);
}

/*
  Dashing this line was unreliable: vector-effect: non-scaling-stroke moves the
  dash pattern into screen space, and preserveAspectRatio="none" scales x and y
  by different amounts, so a dash offset never matched the path's own units and
  the red front drifted behind the reader. A straight horizontal cut is exact —
  --story-progress is simply how far down the surface the reader has got.
*/
.story-signal-progress {
  stroke: rgb(157 60 51 / 52%);
  clip-path: inset(0 0 calc((1 - var(--story-progress, 0)) * 100%) 0);
}

.chapter-copy h2,
.chat-heading-row h2,
.notes-heading-row h2,
.voice-copy h2,
.device-heading h2,
.closing-copy h2 {
  margin: 0;
  font-weight: 680;
  letter-spacing: -0.058em;
  line-height: 0.98;
  text-wrap: balance;
}

.chat-heading-row > p,
.notes-heading-row > p,
.device-heading p {
  max-width: 520px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(17px, 1.55vw, 21px);
  line-height: 1.5;
  text-wrap: pretty;
}

.product-chapter {
  padding: var(--section-space) 0;
  scroll-margin-top: 92px;
}

.chapter-copy {
  position: relative;
  z-index: 2;
}

.chapter-copy h2,
.chat-heading-row h2,
.notes-heading-row h2 {
  font-size: clamp(48px, 6vw, 86px);
}

.chapter-copy > p {
  max-width: 570px;
  margin: 28px 0 0;
  color: var(--muted);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.54;
  text-wrap: pretty;
}

.chapter-copy .chapter-fact {
  margin-top: 22px;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 650;
}

.keyboard-chapter .section-shell {
  position: relative;
  min-height: 880px;
}

.keyboard-copy {
  width: 48%;
}

.keyboard-stage {
  --keyboard-top: #202326;
  --keyboard-bottom: #111315;
  --keyboard-key: #42474b;
  --keyboard-key-ink: #f2f4f5;
  --keyboard-tool: #2a2e32;
  position: relative;
  width: min(850px, 70vw);
  min-height: 700px;
  margin: -100px 0 0 auto;
}

.keyboard-surface {
  position: absolute;
  top: 226px;
  right: 0;
  z-index: 2;
  width: min(720px, 90%);
  padding: 14px 15px 18px;
  color: var(--keyboard-key-ink);
  background:
    linear-gradient(150deg, rgb(255 255 255 / 6%), transparent 38%),
    linear-gradient(180deg, var(--keyboard-top), var(--keyboard-bottom));
  border-radius: 26px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 13%), 0 24px 48px rgb(40 46 51 / 20%);
  transition: color 360ms ease, background 360ms ease;
}

.keyboard-toolbar {
  display: grid;
  grid-template-columns: 34px repeat(3, 1fr) 36px;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: color-mix(in srgb, var(--keyboard-key-ink) 80%, transparent);
  font-size: 12px;
}

.keyboard-toolbar > span:not(.auri-key):not(.keyboard-mic) {
  padding: 8px 9px;
  text-align: center;
  background: var(--keyboard-tool);
  border-radius: 8px;
}

.auri-key img {
  border-radius: 7px;
}

.auri-key-light {
  display: none;
}

.keyboard-stage[data-theme="light"] .auri-key-light {
  display: block;
}

.keyboard-stage[data-theme="light"] .auri-key-dark {
  display: none;
}

.keyboard-mic {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: var(--accent);
  border-radius: 50%;
}

.keyboard-row {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
  margin-top: 7px;
}

.keyboard-row-middle {
  grid-template-columns: repeat(9, 1fr);
  padding-inline: 22px;
}

.keyboard-row-bottom {
  grid-template-columns: 1.45fr repeat(7, 1fr) 1.45fr;
}

.keyboard-row-space {
  grid-template-columns: 1.2fr 0.9fr 5fr 1.5fr;
}

.keyboard-row kbd {
  display: grid;
  place-items: center;
  min-width: 0;
  height: 52px;
  padding: 0 5px;
  color: var(--keyboard-key-ink);
  background: var(--keyboard-key);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 13%), 0 3px 0 color-mix(in srgb, var(--keyboard-bottom) 75%, black);
  font-family: inherit;
  font-size: 15px;
  font-weight: 510;
}

.keyboard-row-space kbd {
  height: 45px;
  font-size: 12px;
}

.theme-selector {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 4;
  width: min(560px, 76%);
  padding: 18px;
  background: var(--glass-strong);
  border-radius: 22px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 80%), 0 18px 32px rgb(58 64 69 / 14%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.theme-selector-copy {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 13px;
  font-size: 13px;
}

.theme-selector-copy span {
  color: var(--muted);
}

.theme-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.theme-option {
  position: relative;
  min-height: 82px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 11px;
  background-position: center;
  background-size: cover;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.theme-option::after {
  position: absolute;
  inset: auto 0 0;
  height: 45%;
  background: linear-gradient(to top, rgb(12 14 16 / 72%), transparent);
  content: "";
}

.theme-option span {
  position: absolute;
  left: 9px;
  bottom: 7px;
  z-index: 1;
  color: white;
  font-size: 10px;
}

.theme-option.is-active {
  box-shadow: inset 0 0 0 3px var(--accent);
}

.theme-default { background: linear-gradient(135deg, #1d2125, #484f55); }
.theme-light { background-image: url("/images/home-v2/theme-auri-light.jpg"); }
.theme-dark { background-image: url("/images/home-v2/theme-auri-dark.jpg"); }
.theme-november { background-image: url("/images/home-v2/theme-november-dark.jpg"); }

.keyboard-stage[data-theme="light"] {
  --keyboard-top: #e4eaed;
  --keyboard-bottom: #aebec6;
  --keyboard-key: rgb(248 251 252 / 75%);
  --keyboard-key-ink: #243039;
  --keyboard-tool: rgb(255 255 255 / 48%);
}

.keyboard-stage[data-theme="dark"] {
  --keyboard-top: #131822;
  --keyboard-bottom: #02050b;
  --keyboard-key: rgb(25 34 48 / 90%);
  --keyboard-key-ink: #eff8ff;
  --keyboard-tool: rgb(34 44 61 / 86%);
}

.keyboard-stage[data-theme="november"] {
  --keyboard-top: #4f2c60;
  --keyboard-bottom: #171126;
  --keyboard-key: rgb(80 58 100 / 90%);
  --keyboard-key-ink: #fff7ff;
  --keyboard-tool: rgb(60 42 78 / 90%);
}

.keyboard-stage[data-theme="light"] .keyboard-surface {
  background-image: linear-gradient(rgb(229 236 239 / 72%), rgb(174 190 198 / 82%)), url("/images/home-v2/theme-auri-light.jpg");
  background-size: cover;
}

.keyboard-stage[data-theme="dark"] .keyboard-surface {
  background-image: linear-gradient(rgb(5 8 14 / 68%), rgb(4 6 12 / 82%)), url("/images/home-v2/theme-auri-dark.jpg");
  background-size: cover;
}

.keyboard-stage[data-theme="november"] .keyboard-surface {
  background-image: linear-gradient(rgb(26 14 38 / 56%), rgb(23 17 38 / 78%)), url("/images/home-v2/theme-november-dark.jpg");
  background-size: cover;
}

.chat-heading-row,
.notes-heading-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.65fr);
  gap: clamp(60px, 10vw, 150px);
  align-items: end;
  margin-bottom: clamp(58px, 7vw, 96px);
}

.visual-answer {
  display: grid;
  grid-template-columns: minmax(240px, 0.46fr) minmax(0, 1.54fr);
  align-items: start;
  gap: clamp(42px, 7vw, 100px);
}

.visual-query {
  padding-top: 76px;
}

.visual-query span {
  color: var(--quiet);
  font-size: 13px;
}

.visual-query p {
  max-width: 300px;
  margin: 13px 0 0;
  color: var(--ink-soft);
  font-size: clamp(19px, 2vw, 27px);
  font-weight: 560;
  letter-spacing: -0.025em;
  line-height: 1.3;
}

.visual-screen {
  min-height: 600px;
  overflow: hidden;
  color: #ebedef;
  background:
    radial-gradient(ellipse 55% 70% at 102% -5%, rgb(181 67 57 / 12%), transparent 70%),
    linear-gradient(145deg, #262a2e, #121416 68%);
  border-radius: 34px 12px 34px 12px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%), 0 32px 60px rgb(45 51 56 / 22%);
}

.visual-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  padding: 12px 18px;
  color: #aeb4ba;
  background: rgb(5 7 9 / 28%);
  font-size: 13px;
}

.visual-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #e9ebed;
  font-weight: 620;
}

.visual-brand img {
  border-radius: 7px;
}

.visual-summary {
  padding: clamp(34px, 5vw, 66px) clamp(30px, 5vw, 68px) 20px;
}

.visual-summary p {
  max-width: 760px;
  margin: 0;
  color: #f4f5f6;
  font-size: clamp(25px, 3.1vw, 44px);
  font-weight: 590;
  letter-spacing: -0.04em;
  line-height: 1.13;
}

.visual-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 40px;
  background: rgb(255 255 255 / 8%);
}

.visual-plan-grid article {
  min-height: 230px;
  padding: 28px;
  background: #171a1d;
}

.plan-number {
  color: #c86056;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.visual-plan-grid h3 {
  margin: 54px 0 9px;
  font-size: 19px;
  letter-spacing: -0.025em;
}

.visual-plan-grid p {
  margin: 0;
  color: #9fa5aa;
  font-size: 14px;
  line-height: 1.5;
}

.visual-next,
.visual-back {
  border: 0;
  cursor: pointer;
}

.visual-next {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 21px 28px 23px;
  color: #f1f2f3;
  background: #9a3b33;
  font-weight: 650;
  text-align: left;
  transition: background-color 180ms ease;
}

.visual-next span {
  transition: transform 180ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .visual-next:hover {
    background: #87332d;
  }

  .visual-next:hover span {
    transform: translate(2px, -2px);
  }
}

.visual-screen-detail {
  padding-bottom: 34px;
}

.visual-back {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 10px;
  color: #e9ebed;
  background: transparent;
  border-radius: 7px;
}

.detail-layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(280px, 1.2fr);
  gap: clamp(30px, 5vw, 70px);
  padding: clamp(42px, 6vw, 78px);
}

.detail-checklist h3 {
  margin: 0 0 28px;
  font-size: 28px;
  letter-spacing: -0.035em;
}

.detail-checklist label {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  align-items: start;
  margin: 18px 0;
  color: #c3c7ca;
  font-size: 14px;
}

.detail-checklist input {
  accent-color: var(--accent);
}

.detail-chart {
  align-self: center;
  padding: 28px;
  background: #0e1012;
  border-radius: 18px;
}

.detail-chart div {
  display: grid;
  grid-template-columns: 68px 1fr 34px;
  gap: 14px;
  align-items: center;
  margin: 22px 0;
  color: #aeb4b9;
  font-size: 12px;
}

.detail-chart b {
  color: #d5d9dc;
  font-weight: 560;
  text-align: right;
}

.detail-chart i {
  display: block;
  width: var(--w);
  height: 28px;
  background: #9c3d34;
  border-radius: 5px;
}

.notes-workbench {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  gap: clamp(28px, 5vw, 60px);
  padding-bottom: 108px;
}

.note-editor,
.voice-note {
  min-width: 0;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 68%), 0 28px 50px rgb(48 54 59 / 17%);
}

.note-editor {
  min-height: 690px;
  overflow: hidden;
  color: #202326;
  background: #f3f4f4;
  border-radius: 10px 30px 10px 30px;
}

.note-toolbar {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 62px;
  padding: 12px 20px;
  color: #686f75;
  background: #e4e7e8;
  box-shadow: inset 0 -1px 0 rgb(31 36 40 / 8%);
  font-size: 13px;
}

.note-toolbar strong {
  margin-right: auto;
  color: #282c30;
}

.note-page {
  width: min(650px, calc(100% - 68px));
  margin: 56px auto;
}

.note-page h3 {
  margin: 0;
  font-size: clamp(34px, 4vw, 52px);
  letter-spacing: -0.045em;
  line-height: 1;
}

.note-page .note-date {
  margin: 12px 0 38px;
  color: var(--quiet);
  font-size: 13px;
}

.note-page h4 {
  margin: 34px 0 10px;
  font-size: 17px;
}

.note-page p,
.note-page li {
  color: #535a60;
  font-size: 15px;
  line-height: 1.65;
}

.note-page ul {
  padding-left: 20px;
}

.voice-note {
  align-self: start;
  margin-top: 74px;
  padding: 24px;
  color: #eceef0;
  background: linear-gradient(150deg, #282c30, #121416 70%);
  border-radius: 28px 9px 28px 9px;
}

.voice-note-head {
  display: flex;
  align-items: center;
  gap: 13px;
}

.voice-note-head > div {
  display: grid;
}

.voice-note-head span:last-child {
  color: #989fa5;
  font-size: 12px;
}

.voice-note-mark {
  width: 16px;
  height: 27px;
  margin-inline: 5px 6px;
  opacity: 0.82;
}

.voice-note-wave {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 68px;
  margin: 24px 0 16px;
}

.voice-note-wave i {
  width: 4px;
  height: var(--h);
  min-height: 6px;
  background: #aeb4b8;
  border-radius: 99px;
}

.voice-transcript {
  margin: 0;
  color: #bcc1c5;
  font-size: 14px;
  line-height: 1.56;
}

.transform-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 26px 0 14px;
}

.transform-controls button {
  min-height: 44px;
  padding: 0 11px;
  border: 0;
  color: #aeb4b8;
  background: #2b3034;
  border-radius: 7px;
  font-size: 12px;
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease;
}

.transform-controls button.is-active {
  color: #fff;
  background: #8f3831;
}

.transform-output {
  min-height: 112px;
  padding: 16px;
  color: #d9dcde;
  background: #0e1012;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-line;
}

.import-strip {
  position: absolute;
  right: 4%;
  bottom: 0;
  left: 4%;
  display: grid;
  grid-template-columns: auto repeat(4, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 84px;
  padding: 16px 20px;
  background: var(--glass-strong);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 80%), 0 17px 34px rgb(49 55 60 / 13%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.import-strip > span {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--quiet);
  font-size: 13px;
}

.import-strip i {
  display: inline-block;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  background-color: var(--accent-dark);
  font-style: normal;
  -webkit-mask: var(--source-icon) center / contain no-repeat;
  mask: var(--source-icon) center / contain no-repeat;
}

.source-mic {
  --source-icon: url("/images/home-v2/import-microphone.png");
  width: 23px;
}

.source-wave {
  --source-icon: url("/images/home-v2/import-waveform.png");
  width: 18px;
}

.source-play {
  --source-icon: url("/images/home-v2/import-play.png");
  width: 29px;
}

.source-doc {
  --source-icon: url("/images/home-v2/import-richtext.png");
  width: 17px;
}

.voice-chapter {
  position: relative;
  min-height: 1060px;
  padding: var(--section-space) 0;
  overflow: hidden;
  color: #f0f2f3;
  background: #111315;
  scroll-margin-top: 92px;
  isolation: isolate;
}

.voice-backdrop-picture {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.voice-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.46;
  filter: saturate(0.55) contrast(1.07) brightness(0.62);
}

.voice-chapter::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgb(13 15 17 / 92%) 0%, rgb(13 15 17 / 62%) 48%, rgb(13 15 17 / 18%) 100%),
    linear-gradient(to bottom, #111315 0%, transparent 18%, transparent 80%, #111315 100%);
  content: "";
}

.voice-layout {
  position: relative;
  min-height: 760px;
}

.voice-copy {
  width: min(560px, 46%);
}

.voice-product-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 42px;
  border-radius: 15px;
}

.voice-copy h2 {
  font-size: clamp(52px, 6.2vw, 90px);
}

.voice-copy p {
  max-width: 510px;
  margin: 30px 0 25px;
  color: #b7bdc1;
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.55;
  text-wrap: pretty;
}

.voice-action {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #ed776c;
  font-weight: 660;
}

.voice-control {
  position: absolute;
  top: 120px;
  right: 2%;
  display: grid;
  grid-template-columns: 46px 1fr 50px;
  align-items: center;
  gap: 16px;
  width: min(540px, 44vw);
  min-height: 76px;
  padding: 12px;
  color: #f0f2f3;
  background: linear-gradient(180deg, #262a2e, #0d0f11);
  border-radius: 22px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 13%), 0 22px 46px rgb(0 0 0 / 38%);
}

.voice-control > img {
  border-radius: 11px;
}

.voice-control-mic {
  width: 50px;
  height: 50px;
}

.watch-proof {
  position: absolute;
  right: 4%;
  bottom: 0;
  display: grid;
  grid-template-columns: minmax(210px, 320px) minmax(180px, 1fr) auto;
  align-items: center;
  gap: 22px;
  width: min(780px, 72%);
  min-height: 190px;
  padding: 18px;
  background: rgb(18 20 22 / 82%);
  border-radius: 12px 28px 12px 28px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 11%), 0 22px 48px rgb(0 0 0 / 34%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.watch-proof > img {
  width: 100%;
  height: 154px;
  object-fit: cover;
  border-radius: 8px 18px 8px 18px;
}

.watch-proof > span {
  display: grid;
  gap: 6px;
}

.watch-proof small {
  color: #aab0b5;
  line-height: 1.45;
}

.watch-proof b {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  color: #fff;
  background: #9b3b33;
  border-radius: 50%;
  font-size: 12px;
}

.device-chapter {
  padding: var(--section-space) 0;
  background:
    radial-gradient(ellipse 42% 80% at 100% 12%, var(--sheen), transparent 78%),
    var(--page);
}

.device-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(60px, 10vw, 150px);
  align-items: start;
}

.device-heading h2 {
  font-size: clamp(48px, 5.8vw, 82px);
}

.device-heading p {
  margin-top: 28px;
}

.device-map {
  margin: 0;
}

.device-map div {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 26px;
  padding: 31px 0 35px;
  border-bottom: 1px solid var(--hairline);
}

.device-map div:first-child {
  padding-top: 6px;
}

.device-map dt {
  color: var(--ink);
  font-weight: 670;
}

.device-map dd {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.closing-section {
  padding: clamp(90px, 9vw, 140px) 0;
  color: #f0f2f3;
  background:
    linear-gradient(116deg, rgb(255 255 255 / 5%), transparent 35%),
    repeating-linear-gradient(0deg, rgb(255 255 255 / 2%) 0 1px, transparent 1px 6px),
    #181b1e;
}

.closing-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  gap: clamp(70px, 12vw, 170px);
  align-items: end;
}

.closing-copy > img {
  margin-bottom: 44px;
  border-radius: 18px;
}

.closing-copy h2 {
  max-width: 780px;
  font-size: clamp(52px, 6.5vw, 92px);
}

.closing-copy p {
  max-width: 520px;
  margin: 27px 0 30px;
  color: #aeb4b9;
  font-size: 18px;
  line-height: 1.5;
}

.closing-voice-link {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 20px;
  align-items: center;
  padding: 30px 0;
  border-top: 1px solid rgb(255 255 255 / 13%);
  border-bottom: 1px solid rgb(255 255 255 / 13%);
}

.closing-voice-link span {
  grid-column: 1;
  color: #92999f;
  font-size: 13px;
}

.closing-voice-link strong {
  grid-column: 1;
  font-size: 20px;
}

.closing-voice-link b {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: #df6a5e;
  font-size: 24px;
  transition: transform 180ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .closing-voice-link:hover b {
    transform: translate(3px, -3px);
  }
}

.site-footer {
  padding: 34px 0 38px;
  color: #b5babf;
  background: #101214;
}

.footer-layout {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 30px;
}

.footer-brand img {
  border-radius: 8px;
}

.footer-links {
  display: flex;
  gap: 26px;
  font-size: 13px;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-inline: -4px;
  padding-inline: 4px;
}

.footer-layout > p {
  justify-self: end;
  margin: 0;
  color: #7f878d;
  font-size: 12px;
}

@media (max-width: 1120px) {
  :root {
    --shell: min(100% - 48px, 1040px);
  }

  .hero-heading {
    width: 70vw;
  }

  .hero-chat-fragment {
    display: none;
  }

  .hero-note-fragment {
    right: 18%;
  }

  .keyboard-stage {
    width: 76vw;
  }

  .watch-proof {
    width: 76%;
  }
}

@media (max-width: 900px) {
  .home-hero,
  .hero-shell {
    min-height: max(100dvh, 940px);
  }

  :root {
    --section-space: 100px;
    --shell: calc(100% - 40px);
  }

  .nav-shell {
    grid-template-columns: 1fr auto auto;
    border-radius: 18px;
  }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  .nav-toggle-mark {
    position: relative;
    width: 18px;
    height: 12px;
  }

  .nav-toggle-mark::before,
  .nav-toggle-mark::after {
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 99px;
    content: "";
    transition: transform 220ms var(--ease-out), top 220ms var(--ease-out);
  }

  .nav-toggle-mark::before { top: 2px; }
  .nav-toggle-mark::after { top: 9px; }

  .nav-toggle[aria-expanded="true"] .nav-toggle-mark::before {
    top: 6px;
    transform: rotate(45deg);
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle-mark::after {
    top: 6px;
    transform: rotate(-45deg);
  }

  .nav-links {
    position: absolute;
    top: 72px;
    right: 20px;
    left: 20px;
    display: none;
    padding: 18px;
    color: var(--ink);
    background: var(--glass-strong);
    border-radius: 15px;
    box-shadow: inset 0 1px 0 white, 0 18px 34px rgb(39 45 49 / 18%);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav-links.is-open {
    display: flex;
  }

  .nav-links a {
    padding: 14px 12px;
    border-bottom: 1px solid var(--hairline);
  }

  .nav-links a:last-child {
    border-bottom: 0;
  }

  .hero-heading {
    width: 82vw;
  }

  .hero-heading h1 span:last-child {
    margin-left: 0;
  }

  .hero-lead {
    left: var(--hero-copy-offset);
    width: min(360px, 45vw);
  }

  .hero-dictation {
    right: 2%;
  }

  .hero-keyboard-fragment {
    right: -11%;
    width: 440px;
  }

  .hero-note-fragment {
    display: none;
  }

  .chat-heading-row,
  .notes-heading-row,
  .device-layout,
  .closing-layout {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .chat-heading-row > p,
  .notes-heading-row > p {
    margin-left: 18vw;
  }

  .keyboard-chapter .section-shell {
    min-height: 1030px;
  }

  .keyboard-copy {
    width: 80%;
  }

  .keyboard-stage {
    width: 100%;
    margin-top: 40px;
  }

  .visual-answer {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .visual-query {
    padding-top: 0;
  }

  .visual-query p {
    max-width: 520px;
  }

  .notes-workbench {
    grid-template-columns: 1fr;
    padding-bottom: 128px;
  }

  .voice-note {
    width: 72%;
    margin: -126px 0 0 auto;
  }

  .import-strip {
    right: 0;
    left: 0;
    grid-template-columns: repeat(4, 1fr);
  }

  .import-strip strong {
    display: none;
  }

  .voice-chapter {
    min-height: 1160px;
  }

  .voice-copy {
    width: 68%;
  }

  .voice-control {
    top: 430px;
    right: 0;
    width: 70%;
  }

  .watch-proof {
    right: 0;
    width: 88%;
  }

  .device-map {
    margin-left: 15vw;
  }

  .closing-voice-link {
    max-width: 560px;
  }

  .footer-layout {
    grid-template-columns: auto 1fr;
  }

  .footer-links {
    justify-self: end;
  }

  .footer-layout > p {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

@media (max-width: 640px) {
  :root {
    --section-space: 78px;
    --shell: calc(100% - 32px);
  }

  .site-header {
    top: 10px;
  }

  .nav-shell {
    width: calc(100% - 20px);
    min-height: 58px;
    padding: 5px 6px 5px 9px;
  }

  .brand {
    gap: 8px;
    font-size: 14px;
  }

  .brand img {
    width: 38px;
    height: 38px;
    border-radius: 9px;
  }

  .nav-toggle-label {
    display: none;
  }

  .nav-action {
    min-height: 44px;
    padding-inline: 15px;
    border-radius: 10px;
    font-size: 13px;
  }

  .home-hero {
    min-height: 900px;
  }

  .hero-shell {
    min-height: 900px;
    padding-top: 124px;
  }

  .hero-heading {
    width: 100%;
  }

  .hero-heading h1 {
    font-size: clamp(48px, 15vw, 60px);
    line-height: 0.92;
  }

  .hero-heading h1 span {
    white-space: nowrap;
  }

  .hero-heading h1 span:last-child {
    margin-left: 0;
  }

  .hero-lead {
    top: 278px;
    left: 0;
    width: 88%;
  }

  .hero-lead p {
    max-width: 340px;
    font-size: 17px;
  }

  .hero-artifacts {
    top: 44px;
  }

  .hero-dictation {
    top: 47%;
    right: -20%;
    width: 370px;
    transform: rotate(-5deg) scale(0.82);
  }

  .hero-keyboard-fragment {
    right: -40%;
    bottom: 7%;
    width: 430px;
    transform: rotate(4deg) scale(0.84);
  }

  .hero-voice-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    top: 514px;
    right: 0;
    bottom: auto;
    left: auto;
  }

  .hero-platform-note {
    display: none;
  }

  .chapter-copy h2,
  .chat-heading-row h2,
  .notes-heading-row h2,
  .voice-copy h2,
  .device-heading h2,
  .closing-copy h2 {
    font-size: clamp(43px, 13vw, 64px);
  }

  .chat-heading-row > p,
  .notes-heading-row > p {
    margin-left: 0;
  }

  .product-chapter {
    padding-block: 86px;
  }

  .keyboard-chapter .section-shell {
    min-height: 830px;
  }

  .keyboard-copy {
    width: 100%;
  }

  .keyboard-stage {
    min-height: 570px;
  }

  .keyboard-surface {
    top: 168px;
    right: -18%;
    width: 115%;
    padding: 10px;
    border-radius: 19px;
    transform: scale(0.82);
    transform-origin: right top;
  }

  .theme-selector {
    right: 0;
    bottom: 0;
    left: auto;
    width: 92%;
    padding: 13px;
  }

  .theme-options {
    gap: 6px;
  }

  .theme-option {
    min-height: 62px;
  }

  .theme-option span {
    display: none;
  }

  .visual-screen {
    min-height: 0;
    border-radius: 24px 8px 24px 8px;
  }

  .visual-summary {
    padding: 30px 22px 18px;
  }

  .visual-summary p {
    font-size: 26px;
  }

  .visual-plan-grid {
    grid-template-columns: 1fr;
    margin-top: 20px;
  }

  .visual-plan-grid article {
    min-height: 150px;
    padding: 22px;
  }

  .visual-plan-grid h3 {
    margin-top: 26px;
  }

  .detail-layout {
    grid-template-columns: 1fr;
    padding: 28px 22px;
  }

  .note-editor {
    min-height: 610px;
  }

  .note-toolbar {
    gap: 15px;
  }

  .note-page {
    width: calc(100% - 36px);
    margin: 38px auto;
  }

  .note-page h3 {
    font-size: 36px;
  }

  .voice-note {
    width: 94%;
    margin: -72px 0 0 auto;
  }

  .notes-workbench {
    padding-bottom: 230px;
  }

  .import-strip {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    min-height: 144px;
  }

  .import-strip > span {
    font-size: 12px;
  }

  .voice-chapter {
    min-height: 1150px;
  }

  .voice-copy {
    width: 100%;
  }

  .voice-product-icon {
    margin-bottom: 30px;
  }

  .voice-control {
    top: 505px;
    right: -18%;
    width: 112%;
    transform: scale(0.82);
    transform-origin: right top;
  }

  .watch-proof {
    right: 0;
    bottom: 18px;
    grid-template-columns: 1fr auto;
    gap: 16px;
    width: 100%;
    padding: 13px;
  }

  .watch-proof > img {
    grid-column: 1 / -1;
    height: 190px;
  }

  .watch-proof b {
    width: 48px;
    height: 48px;
  }

  .device-map {
    margin-left: 0;
  }

  .device-map div {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .closing-section {
    padding-block: 78px;
  }

  .closing-copy > img {
    width: 64px;
    height: 64px;
    margin-bottom: 30px;
  }

  .footer-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .footer-links,
  .footer-layout > p {
    justify-self: start;
  }

  .footer-links {
    flex-wrap: wrap;
    gap: 17px 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .hero-artifacts {
    transform: none !important;
  }
}

/* Product-fidelity revision */
.hero-lead {
  top: clamp(360px, 49vh, 510px);
  gap: 27px;
  width: min(500px, 40vw);
}

.keyboard-chapter .section-shell {
  min-height: 990px;
}

.keyboard-copy {
  width: 51%;
}

.keyboard-stage {
  --keyboard-top: #1d1e20;
  --keyboard-bottom: #0b0c0d;
  --keyboard-key: #3a3b3d;
  --keyboard-key-ink: #f4f4f5;
  --keyboard-tool: #929399;
  position: relative;
  width: min(980px, 78vw);
  min-height: 820px;
  margin: -84px 0 0 auto;
}

.keyboard-device {
  position: absolute;
  top: 0;
  right: 0;
  width: min(720px, 80%);
  min-height: 760px;
  padding: 24px 16px 18px;
  overflow: hidden;
  color: var(--keyboard-key-ink);
  background: #050506;
  border: 7px solid #35373a;
  border-bottom-width: 10px;
  border-radius: 72px 72px 34px 34px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 13%), 0 26px 42px rgb(40 45 49 / 18%);
}

.keyboard-status {
  display: flex;
  justify-content: space-between;
  padding: 3px 28px 0;
  color: #f3f3f4;
  font-size: 13px;
  font-weight: 680;
  letter-spacing: 0.01em;
}

.keyboard-status-icons {
  display: flex;
  align-items: center;
  gap: 7px;
}

.status-cellular {
  display: flex;
  align-items: flex-end;
  gap: 1.5px;
  width: 14px;
  height: 10px;
}

.status-cellular b {
  width: 2.4px;
  background: currentColor;
  border-radius: 1px 1px 0 0;
}

.status-cellular b:nth-child(1) { height: 3px; }
.status-cellular b:nth-child(2) { height: 5px; }
.status-cellular b:nth-child(3) { height: 7px; }
.status-cellular b:nth-child(4) { height: 10px; }

.status-wifi {
  position: relative;
  display: block;
  width: 14px;
  height: 10px;
  overflow: hidden;
}

.status-wifi::before,
.status-wifi::after {
  position: absolute;
  left: 50%;
  border: 1.7px solid currentColor;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  content: "";
  transform: translateX(-50%) rotate(45deg);
}

.status-wifi::before {
  top: -4px;
  width: 13px;
  height: 13px;
}

.status-wifi::after {
  top: 1px;
  width: 6px;
  height: 6px;
}

.status-battery {
  position: relative;
  display: block;
  width: 18px;
  height: 9px;
  border: 1.4px solid currentColor;
  border-radius: 2.5px;
}

.status-battery::before {
  position: absolute;
  inset: 1.2px;
  background: currentColor;
  border-radius: 1px;
  content: "";
}

.status-battery::after {
  position: absolute;
  top: 2px;
  right: -3px;
  width: 1.8px;
  height: 3.5px;
  background: currentColor;
  border-radius: 0 1px 1px 0;
  content: "";
}

.writing-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  margin: 72px -5px 30px;
}

.writing-tools button {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  min-height: 56px;
  padding: 7px 18px 8px;
  color: #fff;
  background: #73747a;
  border-radius: 28px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 52%), 0 2px 3px rgb(0 0 0 / 24%);
  font-size: 15px;
  font-weight: 390;
  line-height: 1.15;
}

.writing-tools img {
  width: 25px;
  height: 25px;
  object-fit: contain;
}

.writing-tools .dark-tool-icon {
  filter: invert(1);
}

.keyboard-composer {
  display: grid;
  grid-template-columns: 46px 1fr 28px;
  gap: 10px;
  align-items: center;
  margin: 0 34px 16px;
  color: #77797d;
}

.composer-add {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: #f3f3f4;
  background: #171719;
  border-radius: 50%;
  font-size: 28px;
  font-weight: 250;
}

.composer-field {
  min-height: 42px;
  padding: 10px 16px;
  background: #171719;
  border-radius: 22px;
  font-size: 14px;
}

.composer-mic {
  display: grid;
  place-items: center;
}

.composer-mic img {
  opacity: 0.4;
  filter: brightness(0) invert(1);
}

.keyboard-surface {
  position: static;
  top: auto;
  right: auto;
  width: 100%;
  padding: 17px 14px 15px;
  color: var(--keyboard-key-ink);
  background:
    linear-gradient(150deg, rgb(255 255 255 / 5%), transparent 38%),
    linear-gradient(180deg, var(--keyboard-top), var(--keyboard-bottom));
  border-radius: 28px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%);
  transform: none;
  transform-origin: center;
  transition: color 360ms ease, background 360ms ease;
}

.keyboard-toolbar {
  display: grid;
  grid-template-columns: 42px repeat(3, 1fr) 42px;
  align-items: center;
  gap: 0;
  min-height: 52px;
  margin: 0 0 10px;
  color: var(--keyboard-key-ink);
  font-size: 15px;
}

.keyboard-toolbar > span:not(.auri-key):not(.keyboard-mic) {
  min-width: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  text-align: center;
}

.keyboard-toolbar > span + span:not(.keyboard-mic) {
  border-left: 1px solid color-mix(in srgb, var(--keyboard-key-ink) 22%, transparent);
}

.auri-key img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}

.keyboard-mic img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.keyboard-mic {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #76e5ef;
  background: color-mix(in srgb, var(--keyboard-bottom) 74%, transparent);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--keyboard-key-ink) 8%, transparent);
}

.keyboard-mic img {
  filter: brightness(0) saturate(100%) invert(88%) sepia(25%) saturate(976%) hue-rotate(142deg) brightness(99%) contrast(88%);
}

.keyboard-row {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 6px;
  margin-top: 7px;
}

.keyboard-row-middle {
  grid-template-columns: repeat(9, minmax(0, 1fr));
  padding-inline: 21px;
}

.keyboard-row-bottom {
  grid-template-columns: 1.35fr repeat(7, minmax(0, 1fr)) 1.35fr;
}

.keyboard-row-space {
  grid-template-columns: 1.1fr 0.8fr 4.6fr 1.45fr;
}

.keyboard-row kbd {
  display: grid;
  place-items: center;
  min-width: 0;
  height: 51px;
  padding: 0 4px;
  color: var(--keyboard-key-ink);
  background: var(--keyboard-key);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%), 0 3px 0 color-mix(in srgb, var(--keyboard-bottom) 75%, black);
  font-family: inherit;
  font-size: 15px;
  font-weight: 510;
}

.keyboard-row-space kbd {
  height: 44px;
  font-size: 11px;
}

.theme-selector {
  position: absolute;
  right: auto;
  bottom: 8px;
  left: 0;
  z-index: 4;
  width: min(540px, 64%);
  padding: 18px;
  background: var(--glass-strong);
  border-radius: 20px 20px 8px 20px;
  box-shadow: inset 0 1px 0 white, 0 16px 26px rgb(55 61 66 / 13%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.keyboard-stage[data-theme="light"] .keyboard-surface,
.keyboard-stage[data-theme="dark"] .keyboard-surface,
.keyboard-stage[data-theme="november"] .keyboard-surface {
  background-position: center;
  background-size: cover;
}

.visual-answer {
  display: grid;
  grid-template-columns: minmax(220px, 0.36fr) minmax(0, 1.64fr);
  gap: clamp(34px, 5vw, 76px);
  align-items: center;
}

.visual-query {
  padding-top: 0;
}

.visual-focus-controls {
  display: grid;
  margin-top: 38px;
}

.visual-focus-controls button {
  display: flex;
  align-items: center;
  min-height: 45px;
  padding: 0;
  color: var(--quiet);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 14px;
  text-align: left;
  transition: color 180ms ease, padding-left 220ms var(--ease-out);
}

.visual-focus-controls button.is-active {
  color: var(--ink);
  font-weight: 680;
}

@media (hover: hover) and (pointer: fine) {
  .visual-focus-controls button:hover {
    color: var(--ink);
  }
}

.visual-query .visual-caption {
  max-width: 270px;
  margin-top: 26px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 470;
  line-height: 1.5;
}

.voice-live-preview {
  position: absolute;
  top: 132px;
  right: -2%;
  width: min(700px, 50vw);
  overflow: hidden;
  background: #17172f;
  border-radius: 22px;
  box-shadow: 0 24px 38px rgb(0 0 0 / 28%);
  transform: rotate(1.5deg);
}

.voice-live-preview video {
  width: 100%;
  height: auto;
}

.voice-live-preview button {
  position: absolute;
  right: 12px;
  bottom: 10px;
  min-width: 88px;
  min-height: 44px;
  padding: 0 12px;
  color: #d9dcdf;
  background: rgb(13 14 27 / 84%);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 630;
  transition: background-color 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .voice-live-preview button:hover {
    background: rgb(6 7 15 / 92%);
  }
}

.device-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(48px, 7vw, 108px);
  align-items: center;
}

.device-showcase {
  position: relative;
  min-height: 520px;
}

.device-family {
  position: absolute;
  top: 50%;
  left: 0;
  width: 92%;
  transform: translateY(-50%);
}

.device-map {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 72px);
  margin: 18px 0 0;
  margin-left: 0;
}

.device-map div,
.device-map div:first-child {
  display: block;
  padding: 0;
  border: 0;
}

.device-map dt {
  margin-bottom: 10px;
}

@media (max-width: 1120px) {
  .hero-lead {
    width: min(480px, 46vw);
  }

  .keyboard-stage {
    width: 84vw;
  }

  .keyboard-device {
    width: 82%;
  }

  .writing-tools button {
    font-size: 13px;
  }
}

@media (max-width: 900px) {
  .hero-lead {
    top: 350px;
    left: var(--hero-copy-offset);
    width: min(470px, 52vw);
  }

  .keyboard-chapter .section-shell {
    min-height: 1120px;
  }

  .keyboard-copy {
    width: 78%;
  }

  .keyboard-stage {
    width: 100%;
    margin-top: 42px;
  }

  .keyboard-device {
    width: 88%;
  }

  .theme-selector {
    width: 62%;
  }

  .visual-answer {
    grid-template-columns: 1fr;
  }

  .visual-query {
    display: grid;
    grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
    column-gap: 40px;
    align-items: start;
  }

  .visual-query > span,
  .visual-query > p:first-of-type {
    grid-column: 1;
  }

  .visual-focus-controls {
    grid-column: 2;
    grid-row: 1 / span 3;
    grid-template-columns: repeat(5, auto);
    align-self: end;
    gap: 18px;
    margin: 0;
  }

  .visual-focus-controls button {
    min-height: 44px;
  }

  .visual-query > .visual-caption {
    grid-column: 1;
  }

  .voice-live-preview {
    top: 430px;
    right: -10%;
    width: 78%;
  }

  .device-layout {
    grid-template-columns: 1fr;
  }

  .device-showcase {
    min-height: 510px;
  }
}

@media (max-width: 640px) {
  .home-hero,
  .hero-shell {
    min-height: 980px;
  }

  .hero-lead {
    top: 286px;
    left: 0;
    gap: 20px;
    width: 100%;
  }

  .keyboard-chapter .section-shell {
    min-height: 1010px;
  }

  .keyboard-copy {
    width: 100%;
  }

  .keyboard-stage {
    min-height: 740px;
  }

  .keyboard-device {
    top: 12px;
    right: -4%;
    width: 112%;
    min-height: 760px;
    transform: scale(0.84);
    transform-origin: right top;
  }

  .writing-tools button {
    grid-template-columns: 26px 1fr;
    padding-inline: 13px;
  }

  .writing-tools img {
    width: 22px;
    height: 22px;
  }

  .theme-selector {
    right: 0;
    bottom: 4px;
    left: auto;
    width: 96%;
    padding: 13px;
  }

  .visual-query {
    display: block;
  }

  .visual-focus-controls {
    display: flex;
    gap: 3px;
    margin-top: 25px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .visual-focus-controls::-webkit-scrollbar {
    display: none;
  }

  .visual-focus-controls button {
    flex: 0 0 auto;
    min-width: 64px;
    justify-content: center;
    padding-inline: 7px;
  }

  .visual-focus-controls button.is-active {
    padding-inline: 7px;
    color: var(--accent-dark);
  }

  .visual-query .visual-caption {
    max-width: 100%;
  }

  .voice-live-preview {
    top: 490px;
    right: -20%;
    width: 122%;
    transform: rotate(1deg);
  }

  .voice-live-preview button {
    right: 18%;
  }

  .device-showcase {
    min-height: 340px;
  }

  .device-family {
    width: 100%;
  }

  .device-map {
    grid-template-columns: 1fr;
    gap: 27px;
    margin-top: 12px;
  }
}

/* Interactive product restoration */
.download-picker {
  position: relative;
  width: max-content;
}

.download-picker-nav {
  justify-self: end;
}

.download-trigger {
  border: 0;
  cursor: pointer;
}

.download-trigger .download-chevron {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 10px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 180ms var(--ease-out);
}

.download-trigger[aria-expanded="true"] .download-chevron {
  transform: translateY(4px) rotate(225deg);
}

.download-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 50;
  width: 332px;
  padding: 7px;
  color: var(--ink);
  background: var(--glass-strong);
  border-radius: 18px 18px 6px 18px;
  box-shadow: inset 0 1px 0 #fff, 0 12px 24px rgb(38 43 47 / 18%);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
}

.download-menu a {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
  align-items: center;
  min-height: 72px;
  padding: 10px 12px;
  border-radius: 12px;
  transition: background-color 160ms ease;
}

.download-menu a + a {
  margin-top: 2px;
}

.download-menu a:hover,
.download-menu a:focus-visible {
  background: var(--glass-hover);
}

.download-menu a:focus-visible {
  outline-width: 2px;
  outline-offset: -2px;
  box-shadow: none;
}

.download-menu a > span:last-child {
  display: grid;
  gap: 3px;
}

.download-menu strong {
  font-size: 14px;
  letter-spacing: -0.015em;
}

.download-menu small {
  color: var(--quiet);
  font-size: 12px;
  line-height: 1.3;
}

.download-platform {
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 720;
  letter-spacing: -0.01em;
}

.download-picker-hero .download-menu {
  right: auto;
  left: 0;
}

.download-picker-closing .download-menu {
  top: auto;
  right: 0;
  bottom: calc(100% + 12px);
}

.hero-lead {
  top: clamp(360px, 49vh, 510px);
  gap: 25px;
  width: min(500px, 40vw);
}

.download-picker-hero .primary-action {
  min-width: 132px;
}

/*
  The pill leads the cluster: it is the only interactive artifact and the only
  one that demonstrates what the headline promises, so it takes the middle at
  full width. The px floor keeps it clear of the Chat card on short viewports,
  where a bare percentage collapses the gap.
*/
.hero-artifacts .hero-dictation {
  top: clamp(342px, 46%, 560px);
  right: 0;
  grid-template-columns: 40px minmax(0, 1fr) 44px;
  width: clamp(460px, 44vw, 660px);
  height: 80px;
  padding: 10px 12px;
  border: 0;
  border-radius: 20px 20px 7px 20px;
  pointer-events: auto;
  cursor: pointer;
  transform: rotate(2deg);
  transition:
    background-color 220ms ease,
    opacity 240ms var(--ease-out),
    translate 240ms var(--ease-out);
}

.hero-artifacts .hero-dictation:hover {
  background: linear-gradient(180deg, #2e3235, #121416);
}

.hero-dictation-copy {
  position: relative;
  display: grid;
  min-width: 0;
  gap: 2px;
  text-align: left;
}

.hero-dictation-copy strong {
  overflow: hidden;
  color: #f4f5f5;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.015em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-dictation-copy small {
  overflow: hidden;
  color: #9ea5aa;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
  The demo swaps both lines mid-sequence — raw transcript to polished text, and
  the state line to the two payoff lines — so both crossfade rather than cut.
*/
.hero-dictation-copy strong,
.hero-dictation-copy small {
  transition: opacity 150ms var(--ease-out);
}

/* The transcript is the live one; hold it at full strength while it streams. */
.hero-dictation[data-state="listening"] .hero-dictation-copy > strong {
  color: #ffffff;
}

.hero-dictation[data-state="done"] .hero-dictation-mic {
  background: #31373b;
}

/*
  Chat sits above the pill as the furthest layer — smaller, and on desktop
  veiled and dimmed (see the min-width block below). The px floor clears the
  header.
*/
.hero-artifacts .hero-chat-fragment {
  top: clamp(116px, 13%, 172px);
  right: 4%;
  width: clamp(300px, 28vw, 410px);
  padding: 17px 18px 19px;
  border-radius: 26px 8px 26px 8px;
  background: linear-gradient(145deg, #24292d, #121517 72%);
  transform: rotate(-2deg);
}

.hero-chat-prompt {
  margin: 11px 0 13px;
  color: #f0f2f3;
  font-size: 16px;
  font-weight: 580;
  letter-spacing: -0.025em;
}

.hero-artifacts .hero-keyboard-fragment {
  right: -2%;
  bottom: -3%;
  width: clamp(350px, 34vw, 500px);
  padding: 15px;
  border-radius: 25px 25px 7px 25px;
  transform: rotate(1.6deg);
}

.hero-artifacts .hero-note-fragment {
  right: 31%;
  bottom: 7%;
  width: clamp(250px, 23vw, 340px);
  padding: 16px 17px 18px;
  border-radius: 9px 24px 9px 24px;
  transform: rotate(-1.4deg);
}

.hero-artifacts .hero-chat-fragment,
.hero-artifacts .hero-keyboard-fragment,
.hero-artifacts .hero-note-fragment {
  transition: opacity 240ms var(--ease-out);
}

.hero-artifacts.is-dictation-focused .hero-chat-fragment,
.hero-artifacts.is-dictation-focused .hero-keyboard-fragment,
.hero-artifacts.is-dictation-focused .hero-note-fragment {
  opacity: 0.46;
}

.keyboard-stage {
  padding-bottom: 38px;
}

.visual-answer {
  grid-template-columns: minmax(220px, 0.34fr) minmax(0, 1.66fr);
  gap: clamp(34px, 5vw, 76px);
  align-items: center;
}

.visual-screen {
  min-height: 650px;
  color: #e9ecee;
  background: linear-gradient(145deg, #172032, #090c14 68%);
  border-radius: 34px 9px 34px 9px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 11%), 0 26px 42px rgb(43 47 55 / 18%);
}

.visual-topbar {
  min-height: 64px;
  padding: 10px 22px;
  color: #8ecfd4;
  background: rgb(5 7 12 / 30%);
}

.visual-topbar strong {
  color: #f4f5f6;
  font-size: 15px;
}

.visual-prompt {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  width: min(470px, calc(100% - 44px));
  margin: 20px 22px 0 auto;
  padding: 13px 15px;
  color: #eaf8f8;
  background: #3e7980;
  border-radius: 18px 18px 5px 18px;
  font-size: 13px;
}

.visual-prompt b {
  color: #8fe1e5;
  font-size: 9px;
}

.visual-panel {
  padding: 24px 25px 30px;
}

.visual-trip-card,
.visual-peek,
.visual-detail-panel {
  background: #151d2b;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 7%);
}

.visual-trip-card {
  grid-row: 1 / span 2;
  padding: 20px;
  border-radius: 20px 6px 20px 6px;
}

.visual-trip-card > p {
  margin: 0 0 16px;
  color: #8ee1e5;
  font-size: 17px;
  font-weight: 630;
}

.visual-place-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.visual-place-grid article {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.place-art {
  display: block;
  height: 94px;
  background:
    linear-gradient(165deg, transparent 0 55%, rgb(7 12 18 / 54%) 56%),
    linear-gradient(135deg, #7b8e83, #344650 62%, #1c2730);
  border-radius: 12px 4px 12px 4px;
}

.place-yosemite {
  background:
    linear-gradient(165deg, transparent 0 50%, rgb(7 12 18 / 56%) 51%),
    linear-gradient(145deg, #a8ada2, #566263 48%, #202c32);
}

.place-monterey {
  background:
    linear-gradient(165deg, transparent 0 52%, rgb(7 12 18 / 55%) 53%),
    linear-gradient(140deg, #7797a0, #3c626d 53%, #1a2830);
}

.visual-place-grid strong {
  overflow: hidden;
  color: #e6f8f8;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visual-place-grid small {
  color: #82929d;
  font-size: 10px;
}

.visual-peek {
  display: grid;
  align-content: space-between;
  min-width: 0;
  padding: 18px;
  border-radius: 7px 20px 7px 20px;
}

.visual-peek span {
  color: #8ee1e5;
  font-size: 13px;
  font-weight: 620;
}

.visual-peek strong {
  color: #f2f4f5;
  font-size: 25px;
  letter-spacing: -0.04em;
}

.visual-peek small {
  color: #83909a;
  font-size: 10px;
}

.visual-peek-movies {
  grid-column: 2 / -1;
}

.visual-detail-panel {
  min-height: 443px;
  margin: 24px 25px 30px;
  padding: 26px;
  border-radius: 20px 6px 20px 6px;
}

.visual-detail-heading {
  display: grid;
  gap: 5px;
  margin-bottom: 25px;
}

.visual-detail-heading span {
  color: #7e929f;
  font-size: 11px;
}

.visual-detail-heading strong {
  color: #8ee1e5;
  font-size: 25px;
  letter-spacing: -0.035em;
}

.visual-place-grid-large .place-art {
  height: 146px;
}

.visual-recommendation {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 20px;
  margin-top: 28px;
  padding-top: 19px;
  border-top: 1px solid rgb(255 255 255 / 8%);
  color: #91a0aa;
  font-size: 12px;
}

.visual-recommendation b {
  color: #e7f6f6;
}

.visual-compare-table {
  display: grid;
  grid-template-columns: 90px repeat(3, 1fr);
  align-items: center;
  overflow: hidden;
  border-radius: 16px 5px 16px 5px;
  background: #0c121d;
}

.visual-compare-table > * {
  min-height: 72px;
  padding: 16px 12px;
  border-bottom: 1px solid rgb(255 255 255 / 7%);
  font-size: 12px;
  text-align: center;
}

.visual-compare-table > span {
  color: #7f8c96;
  text-align: left;
}

.visual-compare-table > b {
  color: #b9c5cc;
}

.visual-compare-table > strong {
  color: #8ee1e5;
  font-size: 19px;
}

.visual-ingredient-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.visual-ingredient-grid > span {
  display: grid;
  gap: 4px;
  min-height: 104px;
  padding: 13px;
  background: #202a3e;
  border-radius: 13px 4px 13px 4px;
  font-size: 21px;
}

.visual-ingredient-grid b {
  color: #dceff0;
  font-size: 12px;
}

.visual-ingredient-grid small {
  color: #82909b;
  font-size: 10px;
}

.visual-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 20px;
  color: #8ee1e5;
  text-align: center;
}

.visual-steps small {
  color: #8a98a2;
  font-size: 9px;
}

.visual-movie-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.visual-movie-grid article {
  display: grid;
  gap: 7px;
}

.visual-movie-grid i {
  display: grid;
  place-items: end start;
  height: 180px;
  padding: 14px;
  color: #e9e6da;
  background: linear-gradient(145deg, #45372f, #151a22 65%);
  border-radius: 14px 4px 14px 4px;
  font-size: 18px;
  font-style: normal;
  font-weight: 730;
  letter-spacing: -0.04em;
  line-height: 0.92;
}

.visual-movie-grid article:nth-child(2) i {
  background: linear-gradient(145deg, #756e60, #292a2b 65%);
}

.visual-movie-grid article:nth-child(3) i {
  background: linear-gradient(145deg, #193746, #0b1219 68%);
}

.visual-movie-grid strong {
  color: #e9f7f7;
  font-size: 12px;
}

.visual-movie-grid small {
  color: #82909a;
  font-size: 10px;
}

.visual-composer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  min-height: 54px;
  margin: 0 25px 23px;
  padding: 0 16px;
  color: #66737e;
  background: #090d15;
  border-radius: 17px 17px 6px 17px;
  font-size: 12px;
}

.visual-composer b {
  color: #8ee1e5;
  font-size: 11px;
}

.voice-live-preview {
  top: 138px;
  right: -1%;
  width: min(650px, 48vw);
  overflow: visible;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  transform: rotate(1.5deg);
}

.voice-live-preview .voice-control {
  position: relative;
  top: auto;
  right: auto;
  z-index: 2;
  width: 100%;
  min-height: 82px;
  border: 0;
  cursor: pointer;
}

.voice-control-copy {
  position: relative;
  display: grid;
  gap: 2px;
  min-width: 0;
  text-align: left;
}

.voice-control-copy strong {
  overflow: hidden;
  color: #f0f2f3;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-control-copy small {
  overflow: hidden;
  color: #9aa1a6;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-live-preview[data-state="done"] .voice-control-mic {
  background: #3b4246;
}

.voice-transformation {
  display: grid;
  gap: 0;
  width: 86%;
  margin: -3px 0 0 auto;
  overflow: hidden;
  color: #d9dddf;
  background: rgb(15 17 19 / 91%);
  border-radius: 5px 5px 22px 8px;
  box-shadow: 0 16px 28px rgb(0 0 0 / 24%);
}

.voice-transformation p {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 14px;
  margin: 0;
  padding: 16px 18px;
  font-size: 12px;
  line-height: 1.45;
}

.voice-transformation p + p {
  border-top: 1px solid rgb(255 255 255 / 8%);
}

.voice-transformation span {
  color: #7e858a;
  font-size: 10px;
}

.voice-transformation s {
  color: #888f94;
  text-decoration-color: #b9564c;
}

.voice-transformation strong {
  color: #f1f3f4;
  font-weight: 560;
}

.device-layout {
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(48px, 7vw, 108px);
  align-items: center;
}

.device-showcase {
  position: relative;
  min-height: 0;
}

.device-family {
  position: static;
  width: 100%;
  transform: none;
}

.device-map {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 72px);
  margin: 42px 0 0;
}

.device-map div,
.device-map div:first-child {
  display: block;
  padding: 0;
  border: 0;
}

.closing-layout {
  align-items: center;
}

.download-picker-closing {
  justify-self: end;
}

.download-picker-closing .primary-action {
  min-width: 142px;
}

@media (max-width: 1120px) {
  .hero-artifacts .hero-dictation {
    right: 1%;
  }

  .hero-artifacts .hero-chat-fragment {
    display: block;
    right: 4%;
  }

  .hero-artifacts .hero-note-fragment {
    right: 32%;
  }

  .visual-trip-card {
    grid-row: 1 / span 3;
  }

  .visual-peek-movies {
    grid-column: auto;
  }
}

@media (max-width: 900px) {
  .hero-artifacts .hero-dictation {
    top: 38%;
    right: 2%;
    width: 50vw;
  }

  .hero-artifacts .hero-chat-fragment {
    top: 54%;
    right: 2%;
    width: 48vw;
  }

  .hero-artifacts .hero-keyboard-fragment {
    right: 2%;
    bottom: 3%;
    width: 44vw;
  }

  .hero-artifacts .hero-note-fragment {
    right: 30%;
    bottom: 4%;
    width: 34vw;
  }

  .visual-answer {
    grid-template-columns: 1fr;
  }

  .visual-query {
    display: grid;
    grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
    column-gap: 40px;
    align-items: start;
  }

  .voice-live-preview {
    top: 430px;
    right: -4%;
    width: 78%;
  }

  .device-layout {
    grid-template-columns: 1fr;
  }

  .device-showcase {
    width: min(820px, 100%);
    margin: 10px auto 0;
  }
}

@media (max-width: 640px) {
  .nav-shell {
    grid-template-columns: 1fr auto auto;
  }

  .download-picker-nav .download-menu {
    position: fixed;
    top: 76px;
    right: 10px;
    width: min(332px, calc(100vw - 20px));
  }

  .home-hero,
  .hero-shell {
    min-height: 1080px;
  }

  .hero-lead {
    top: 292px;
    left: 0;
    gap: 20px;
    width: 100%;
  }

  .hero-lead p {
    width: 100%;
  }

  .hero-artifacts {
    top: 0;
  }

  .hero-artifacts .hero-dictation {
    top: 46%;
    right: 0;
    width: 95%;
    transform: rotate(-2deg);
  }

  .hero-artifacts .hero-chat-fragment {
    top: 60%;
    right: 0;
    width: 93%;
    transform: rotate(2deg);
  }

  .hero-artifacts .hero-chat-fragment .hero-chat-prompt {
    font-size: 14px;
  }

  /*
    A single narrow column has room for three artifacts, not four. Notes drops
    out here the same way it does on tablets, rather than sliding half off the
    edge with its label cut in two.
  */
  .hero-artifacts .hero-note-fragment {
    display: none;
  }

  .hero-artifacts .hero-keyboard-fragment {
    right: 0;
    bottom: 3%;
    width: 89%;
    transform: rotate(2deg);
  }

  .hero-platform-note {
    display: none;
  }

  .keyboard-chapter .section-shell {
    min-height: 930px;
  }

  .keyboard-stage {
    min-height: 800px;
    margin-top: 26px;
    padding-bottom: 0;
  }

  .keyboard-device {
    top: 0;
    right: -4%;
  }

  .theme-selector {
    bottom: 0;
  }

  .visual-query {
    display: block;
  }

  .visual-screen {
    min-height: 640px;
    border-radius: 24px 7px 24px 7px;
  }

  .visual-tools {
    display: none;
  }

  .visual-prompt {
    width: calc(100% - 28px);
    margin: 14px 14px 0 auto;
  }

  .visual-panel {
    padding: 15px 14px 20px;
  }

  .visual-trip-card {
    grid-column: 1 / -1;
    grid-row: auto;
    padding: 15px;
  }

  .visual-trip-card > p {
    font-size: 15px;
  }

  .place-art {
    height: 70px;
  }

  .visual-peek {
    padding: 13px;
  }

  .visual-peek-movies {
    grid-column: 1 / -1;
  }

  .visual-detail-panel {
    min-height: 470px;
    margin: 15px 14px 20px;
    padding: 18px;
  }

  .visual-place-grid-large {
    grid-template-columns: 1fr;
  }

  .visual-place-grid-large article {
    grid-template-columns: 104px 1fr;
    align-items: center;
  }

  .visual-place-grid-large .place-art {
    grid-row: 1 / span 2;
    height: 68px;
  }

  .visual-recommendation {
    grid-template-columns: 1fr;
    gap: 6px;
    margin-top: 18px;
  }

  .visual-compare-table {
    grid-template-columns: 65px repeat(3, minmax(72px, 1fr));
    overflow-x: auto;
  }

  .visual-compare-table > * {
    padding: 12px 6px;
    font-size: 10px;
  }

  .visual-compare-table > strong {
    font-size: 14px;
  }

  .visual-ingredient-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .visual-steps {
    gap: 3px;
  }

  .visual-movie-grid i {
    height: 130px;
    padding: 9px;
    font-size: 13px;
  }

  .visual-composer {
    margin-inline: 14px;
  }

  .voice-live-preview {
    top: 430px;
    right: 0;
    width: 100%;
    transform: rotate(1deg);
  }

  .voice-live-preview .voice-control {
    transform: none;
  }

  .voice-transformation {
    width: 88%;
  }

  .voice-transformation p {
    grid-template-columns: 58px 1fr;
    gap: 9px;
    padding: 13px 14px;
  }

  .voice-chapter {
    min-height: 1330px;
  }

  .voice-layout {
    min-height: 1080px;
  }

  .device-showcase {
    min-height: 0;
    margin-top: 8px;
  }

  .device-family {
    width: 112%;
    max-width: none;
    margin-left: -6%;
  }

  .device-map {
    grid-template-columns: 1fr;
    gap: 27px;
    margin-top: 24px;
  }

  .closing-layout {
    gap: 30px;
  }

  .download-picker-closing {
    justify-self: start;
  }

  .download-picker-closing .download-menu {
    right: auto;
    left: 0;
    width: min(332px, calc(100vw - 32px));
  }
}

/*
  Hierarchy in the artifact cluster: the dictation pill leads, Chat supports,
  and Keyboard and Notes sit further back — smaller, softer shadows, and a
  page-coloured veil so they read as depth rather than as four equal exhibits.
*/
.hero-artifacts .hero-keyboard-fragment {
  right: 5%;
  bottom: 5%;
  width: clamp(270px, 25vw, 355px);
}

.hero-artifacts .hero-note-fragment {
  right: 32%;
  bottom: 12%;
  width: clamp(225px, 20vw, 295px);
}

.hero-artifacts .hero-keyboard-fragment,
.hero-artifacts .hero-note-fragment {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 13%), 0 12px 24px rgb(34 39 43 / 14%);
}

/*
  Stacking follows the same ladder: what leads sits in front, and the receded
  pieces are the ones that get occluded. Without this the last card in the
  markup covers the rewrite that is the whole point of the keyboard fragment.
*/
.hero-artifacts .hero-dictation {
  z-index: 4;
}

.hero-artifacts .hero-keyboard-fragment {
  z-index: 3;
}

.hero-artifacts .hero-note-fragment {
  z-index: 2;
}

.hero-artifacts .hero-chat-fragment {
  z-index: 1;
}

.hero-artifacts .hero-keyboard-fragment::after,
.hero-artifacts .hero-note-fragment::after {
  position: absolute;
  inset: 0;
  background: var(--hero-recede);
  content: "";
  pointer-events: none;
}

/*
  Desktop-only depth. Below 901px the artifacts are a stacked column: there is
  nothing behind anything, so a veiled, dimmed Chat card would just read as
  faded rather than far away.
*/
@media (min-width: 901px) {
  .hero-artifacts .hero-dictation {
    height: 88px;
  }

  .hero-artifacts .hero-chat-fragment {
    opacity: 0.85;
  }

  .hero-artifacts .hero-chat-fragment::after {
    position: absolute;
    inset: 0;
    background: var(--hero-recede);
    content: "";
    pointer-events: none;
  }
}

.keyboard-stage {
  min-height: 850px;
}

.keyboard-device {
  width: min(520px, 60%);
  min-height: 850px;
  border-radius: 78px 78px 38px 38px;
}

.visual-detail-lead {
  max-width: 470px;
  margin: -14px 0 22px;
  color: #91a0aa;
  font-size: 12px;
  line-height: 1.5;
}

.place-art {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.place-art::before,
.place-art::after {
  position: absolute;
  inset: 0;
  content: "";
}

.place-art::before {
  z-index: -2;
  background: linear-gradient(180deg, rgb(255 255 255 / 18%), transparent 52%);
}

.place-napa {
  background:
    radial-gradient(circle at 74% 25%, #d9cfae 0 6%, transparent 7%),
    linear-gradient(160deg, transparent 0 48%, #596755 49% 63%, #29352d 64%),
    linear-gradient(150deg, #a5b6ae, #687f73 55%, #26332e);
}

.place-napa::after {
  top: 54%;
  z-index: -1;
  background: repeating-linear-gradient(102deg, rgb(218 198 137 / 35%) 0 2px, transparent 2px 10px);
  transform: perspective(80px) rotateX(54deg) scale(1.3);
}

.place-yosemite {
  background:
    linear-gradient(132deg, transparent 0 38%, #6a7471 39% 54%, transparent 55%),
    linear-gradient(46deg, transparent 0 49%, #3a4847 50% 67%, transparent 68%),
    linear-gradient(180deg, #aeb9b5, #728682 55%, #253336);
}

.place-yosemite::after {
  top: 68%;
  z-index: -1;
  background: linear-gradient(180deg, #53675c, #1f2c29);
}

.place-monterey {
  background:
    radial-gradient(ellipse at 70% 75%, rgb(230 235 223 / 38%) 0 3%, transparent 4%),
    linear-gradient(166deg, transparent 0 49%, #617a78 50% 57%, #354b4d 58% 64%, #1e2b31 65%),
    linear-gradient(180deg, #8eaaa9, #557a7e 55%, #20343c);
}

.place-monterey::after {
  top: 61%;
  z-index: -1;
  background: repeating-linear-gradient(175deg, transparent 0 8px, rgb(232 238 229 / 18%) 9px 10px);
}

.device-showcase {
  display: grid;
  align-items: center;
}

.device-family {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1726 / 911;
  margin: 0 auto;
  object-fit: contain;
}

@media (max-width: 1120px) {
  .hero-artifacts .hero-keyboard-fragment {
    right: 4%;
    bottom: 5%;
    width: 27vw;
  }

  .hero-artifacts .hero-note-fragment {
    right: 32%;
    bottom: 12%;
    width: 21vw;
  }

  .keyboard-device {
    width: min(520px, 64%);
  }
}

@media (max-width: 900px) {
  .hero-artifacts .hero-keyboard-fragment {
    right: 2%;
    bottom: 3%;
    width: 44vw;
  }

  /*
    Below this width the artifacts stack instead of overlapping, so the veil
    has no depth to sell — it just makes the card look faded.
  */
  .hero-artifacts .hero-keyboard-fragment::after,
  .hero-artifacts .hero-note-fragment::after {
    display: none;
  }

  .hero-artifacts .hero-note-fragment {
    right: 31%;
    bottom: 13%;
  }

  .keyboard-device {
    right: 2%;
    width: min(520px, 68%);
  }

  .visual-focus-controls {
    grid-template-columns: repeat(4, auto);
  }
}

@media (max-width: 640px) {
  .hero-artifacts .hero-keyboard-fragment {
    right: 0;
    bottom: 3%;
    width: 89%;
  }

  .keyboard-stage {
    min-height: 810px;
  }

  .keyboard-device {
    top: 0;
    right: 50%;
    width: min(410px, 107%);
    min-height: 760px;
    border-radius: 66px 66px 34px 34px;
    transform: translateX(50%);
  }

  .visual-detail-lead {
    margin-top: -12px;
  }

  .device-family {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-left: 0;
  }
}

/* Auri Voice's live top-edge waveform */
.hero-artifacts .hero-dictation,
.voice-live-preview .voice-control {
  overflow: visible;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  isolation: isolate;
}

.hero-artifacts .hero-dictation:hover {
  background: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .voice-live-preview .voice-control:hover {
    background: transparent;
  }
}

.wave-pill-chrome {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 7px 7px rgb(0 0 0 / 25%));
}

.wave-pill-surface,
.wave-pill-outline,
.wave-pill-rim {
  vector-effect: non-scaling-stroke;
}

.wave-pill-surface {
  transition: none;
}

.wave-pill-outline {
  fill: none;
  stroke-width: 1;
}

.wave-pill-rim {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wave-pill-rim-haze {
  stroke-width: 4.5;
  opacity: 0.22;
  filter: blur(2.5px);
}

.wave-pill-rim-line {
  stroke-width: 2;
}

.hero-artifacts .hero-dictation > img,
.hero-artifacts .hero-dictation > .hero-dictation-copy,
.hero-artifacts .hero-dictation > .hero-dictation-mic,
.voice-live-preview .voice-control > img,
.voice-live-preview .voice-control > .voice-control-copy,
.voice-live-preview .voice-control > .voice-control-mic {
  position: relative;
  z-index: 2;
  transform: translateY(6px);
}

.hero-dictation:focus-visible,
.voice-control:focus-visible {
  outline: none;
  box-shadow: none;
}

.hero-dictation:focus-visible .hero-dictation-mic,
.voice-control:focus-visible .voice-control-mic {
  outline: 2px solid rgb(145 227 235 / 88%);
  outline-offset: 3px;
}

/* iPhone-proportioned Auri Keyboard demo */
.keyboard-stage {
  --phone-width: min(430px, 62%);
  position: relative;
  display: block;
  width: 100%;
  min-height: 0;
  margin: 0;
}

.keyboard-device {
  position: relative;
  top: auto;
  right: auto;
  display: flex;
  flex-direction: column;
  width: var(--phone-width);
  height: auto;
  min-height: 0;
  margin-left: auto;
  aspect-ratio: 393 / 852;
  padding: 24px 12px 15px;
  overflow: hidden;
  background: #050506;
  border: 7px solid #36383b;
  border-bottom-width: 7px;
  border-radius: 70px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 13%), 0 28px 44px rgb(40 45 49 / 18%);
  transform: none;
}

.keyboard-status {
  flex: none;
  padding: 3px 23px 0;
}

.keyboard-message-thread {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  padding: 32px 18px 18px;
  flex-direction: column;
  justify-content: flex-end;
  gap: 9px;
  color: #ececef;
  font-size: 12px;
  line-height: 1.35;
}

.keyboard-message-thread span {
  width: max-content;
  max-width: 78%;
  padding: 9px 12px;
}

.keyboard-message-incoming {
  align-self: flex-start;
  background: #242427;
  border-radius: 15px 15px 15px 4px;
}

.keyboard-message-outgoing {
  align-self: flex-end;
  background: #315f78;
  border-radius: 15px 15px 4px 15px;
}

.writing-tools {
  flex: none;
  gap: 10px 12px;
  margin: 0 -2px 22px;
}

.writing-tools button {
  grid-template-columns: 29px minmax(0, 1fr);
  min-height: 44px;
  padding: 7px 13px 8px;
  font-size: 13px;
  white-space: nowrap;
}

.writing-tools img {
  width: 22px;
  height: 22px;
}

.keyboard-composer {
  flex: none;
  grid-template-columns: 42px minmax(0, 1fr) 25px;
  gap: 8px;
  margin: 0 22px 14px;
}

.composer-add {
  width: 40px;
  height: 40px;
  font-size: 25px;
}

.composer-field {
  min-height: 40px;
  padding: 10px 14px;
}

.keyboard-surface {
  flex: none;
  padding: 14px 10px 12px;
  border-radius: 26px;
}

.keyboard-toolbar {
  grid-template-columns: 38px repeat(3, 1fr) 38px;
  min-height: 46px;
  margin-bottom: 8px;
  font-size: 13px;
}

.auri-key img,
.keyboard-mic img {
  width: 31px;
  height: 31px;
}

.keyboard-mic {
  width: 38px;
  height: 38px;
  color: var(--accent-ink);
  background: var(--accent);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 34%),
    0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}

.keyboard-mic img {
  filter: brightness(0) invert(1);
}

.keyboard-row {
  gap: 5px;
  margin-top: 6px;
}

.keyboard-row-middle {
  padding-inline: 17px;
}

.keyboard-row kbd {
  height: 47px;
  border-radius: 7px;
  font-size: 13px;
}

.keyboard-row-space kbd {
  height: 41px;
  font-size: 10px;
}

.keyboard-safe-area {
  position: relative;
  display: block;
  flex: none;
  min-height: 22px;
  padding: 8px 0 6px;
}

.keyboard-safe-area::after {
  position: absolute;
  right: 50%;
  bottom: 4px;
  width: 112px;
  height: 4px;
  background: #f4f4f5;
  border-radius: 3px;
  content: "";
  transform: translateX(50%);
}

.theme-selector {
  position: absolute;
  top: auto;
  right: calc(var(--phone-width) - 66px);
  bottom: 42px;
  left: auto;
  z-index: 4;
  width: min(520px, 78%);
  border-radius: 20px 20px 8px 20px;
}

@media (max-width: 1120px) {
  .keyboard-stage {
    --phone-width: min(400px, 68%);
  }
}

@media (max-width: 900px) {
  .keyboard-stage {
    --phone-width: min(380px, 86%);
  }

  .keyboard-device {
    margin-inline: auto;
  }

  .theme-selector {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    width: var(--phone-width);
    margin: 18px auto 0;
    border-radius: 20px;
  }
}

@media (max-width: 640px) {
  .story-signal {
    -webkit-mask-image: linear-gradient(90deg, transparent 0 68%, rgb(0 0 0 / 12%) 78%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0 68%, rgb(0 0 0 / 12%) 78%, #000 100%);
  }

  .keyboard-chapter .section-shell {
    min-height: 0;
  }

  .keyboard-stage {
    --phone-width: min(352px, 100%);
    min-height: 0;
    margin-top: 8px;
  }

  .keyboard-device {
    top: auto;
    right: auto;
    width: var(--phone-width);
    min-height: 0;
    margin-inline: auto;
    padding: 20px 10px 12px;
    border-radius: 61px;
    transform: none;
  }

  .keyboard-status {
    padding-inline: 18px;
  }

  .keyboard-message-thread {
    padding: 22px 14px 14px;
    font-size: 11px;
  }

  .writing-tools {
    gap: 9px 10px;
    margin-right: -1px;
    margin-bottom: 18px;
    margin-left: -1px;
  }

  .writing-tools button {
    grid-template-columns: 25px minmax(0, 1fr);
    min-height: 40px;
    padding-inline: 10px;
    font-size: 12px;
  }

  .writing-tools img {
    width: 20px;
    height: 20px;
  }

  .keyboard-composer {
    grid-template-columns: 38px minmax(0, 1fr) 22px;
    margin: 0 14px 13px;
  }

  .composer-add {
    width: 37px;
    height: 37px;
  }

  .composer-field {
    min-height: 37px;
    padding: 9px 13px;
    font-size: 12px;
  }

  .keyboard-surface {
    padding: 12px 8px 10px;
    border-radius: 23px;
  }

  .keyboard-toolbar {
    grid-template-columns: 35px repeat(3, 1fr) 35px;
    min-height: 42px;
    margin-bottom: 6px;
    font-size: 12px;
  }

  .auri-key img,
  .keyboard-mic img {
    width: 29px;
    height: 29px;
  }

  .keyboard-mic {
    width: 35px;
    height: 35px;
  }

  .keyboard-row {
    gap: 4px;
    margin-top: 5px;
  }

  .keyboard-row-middle {
    padding-inline: 14px;
  }

  .keyboard-row kbd {
    height: 43px;
    padding-inline: 2px;
    font-size: 12px;
  }

  .keyboard-row-space kbd {
    height: 38px;
    font-size: 9px;
  }

  .keyboard-safe-area {
    min-height: 20px;
    padding: 6px 0 4px;
  }

  .keyboard-safe-area::after {
    width: 100px;
  }

  .theme-selector {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    width: var(--phone-width);
    margin: 16px auto 0;
  }
}

/* Trust and social proof */
.hero-social-proof {
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: 100%;
  color: var(--muted);
  font-size: 12px;
  font-weight: 580;
  line-height: 1.2;
}

.hero-social-proof > span {
  white-space: nowrap;
}

.hero-social-proof .hero-rating {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.hero-social-proof strong {
  color: var(--ink);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.hero-rating > span {
  color: var(--accent-dark);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.hero-social-proof i {
  width: 1px;
  height: 14px;
  background: var(--hairline-strong);
}

.trust-chapter {
  padding: clamp(94px, 9vw, 144px) 0 var(--section-space);
  background:
    radial-gradient(ellipse 44% 38% at 92% 4%, var(--sheen), transparent 76%),
    var(--paper);
}

.privacy-strip {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(360px, 1.18fr) auto;
  gap: clamp(34px, 5vw, 76px);
  align-items: center;
  padding: clamp(36px, 4vw, 58px);
  overflow: hidden;
  background:
    linear-gradient(115deg, var(--card-sheen), transparent 44%),
    var(--card-alt);
  border: 1px solid var(--card-edge);
  border-radius: 12px 34px 12px 34px;
  box-shadow: inset 0 1px 0 var(--card-edge);
  scroll-margin-top: 104px;
}

.privacy-heading {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.privacy-signal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 44px;
  height: 56px;
  color: var(--accent-dark);
}

.privacy-signal i {
  width: 3px;
  height: var(--h);
  background: currentColor;
  border-radius: 99px;
}

.privacy-heading span,
.reviews-heading > span {
  display: block;
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 710;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.privacy-heading h2 {
  margin: 5px 0 0;
  color: var(--ink);
  font-size: clamp(30px, 3vw, 43px);
  font-weight: 690;
  letter-spacing: -0.052em;
  line-height: 1;
  text-wrap: balance;
}

.privacy-strip > p {
  max-width: 670px;
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.62;
  text-wrap: pretty;
}

.privacy-strip > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--accent-dark);
  font-size: 14px;
  font-weight: 680;
  white-space: nowrap;
}

.privacy-strip > a span {
  transition: transform 180ms var(--ease-out);
}

.reviews-layout {
  display: grid;
  grid-template-columns: minmax(250px, 0.65fr) minmax(0, 1.35fr);
  gap: clamp(54px, 9vw, 132px);
  align-items: start;
  margin-top: clamp(90px, 10vw, 150px);
}

.reviews-heading h2 {
  max-width: 470px;
  margin: 16px 0 0;
  font-size: clamp(43px, 5vw, 72px);
  font-weight: 710;
  letter-spacing: -0.065em;
  line-height: 0.98;
  text-wrap: balance;
}

.reviews-heading > p {
  margin: 24px 0 0;
  color: var(--quiet);
  font-size: 12px;
}

.reviews-carousel {
  min-width: 0;
}

.carousel-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hairline);
}

.carousel-toolbar > p {
  margin: 0;
  color: var(--quiet);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 680;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.carousel-controls {
  display: flex;
  gap: 8px;
}

.carousel-control {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0 0 2px;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  cursor: pointer;
  font-size: 21px;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms var(--ease-out);
}

.carousel-control:active:not(:disabled) {
  transform: scale(0.96);
}

.carousel-control:disabled {
  cursor: default;
  opacity: 0.32;
}

.review-viewport {
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.review-viewport::-webkit-scrollbar {
  display: none;
}

.review-track {
  display: flex;
  gap: 18px;
}

.review-slide {
  display: flex;
  flex: 0 0 84%;
  min-width: 0;
  min-height: 510px;
  margin: 0;
  padding: clamp(30px, 3vw, 42px);
  background:
    linear-gradient(135deg, var(--card-sheen), transparent 44%),
    var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 10px 28px 10px 28px;
  box-shadow: inset 0 1px 0 var(--card-edge);
  flex-direction: column;
  scroll-snap-align: start;
}

.review-slide:nth-child(even) {
  background:
    linear-gradient(225deg, var(--card-sheen), transparent 44%),
    var(--card-alt);
  border-radius: 28px 10px 28px 10px;
}

.review-stars {
  color: var(--accent-dark);
  font-size: 11px;
  letter-spacing: 0.13em;
}

.review-slide h3 {
  margin: 16px 0 0;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 720;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.review-slide > p {
  margin: 30px 0 40px;
  color: var(--ink-soft);
  font-size: clamp(18px, 1.55vw, 22px);
  font-weight: 560;
  letter-spacing: -0.024em;
  line-height: 1.48;
  text-wrap: pretty;
}

.review-slide footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin-top: auto;
  color: var(--quiet);
  font-size: 12px;
}

.review-slide cite {
  color: var(--ink-soft);
  font-style: normal;
  font-weight: 700;
}

@media (hover: hover) and (pointer: fine) {
  .privacy-strip > a:hover span {
    transform: translate(2px, -2px);
  }

  .carousel-control:hover:not(:disabled) {
    color: var(--accent-ink);
    background: var(--accent-dark);
    border-color: var(--accent-dark);
  }
}

@media (max-width: 1000px) {
  .privacy-strip {
    grid-template-columns: minmax(250px, 0.8fr) minmax(0, 1.2fr);
  }

  .privacy-strip > a {
    grid-column: 2;
    margin-top: -28px;
  }
}

@media (max-width: 760px) {
  .hero-social-proof {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .hero-social-proof i {
    display: none;
  }

  .hero-social-proof .hero-members {
    flex-basis: 100%;
  }

  .trust-chapter {
    padding-top: 78px;
  }

  .privacy-strip,
  .reviews-layout {
    grid-template-columns: 1fr;
  }

  .privacy-strip > a {
    grid-column: auto;
    margin-top: -10px;
  }

  .reviews-layout {
    gap: 42px;
    margin-top: 88px;
  }
}

@media (max-width: 520px) {
  .hero-social-proof {
    max-width: 310px;
  }

  .privacy-strip {
    gap: 28px;
    padding: 30px 24px 32px;
    border-radius: 10px 25px 10px 25px;
  }

  .privacy-heading {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 14px;
  }

  .privacy-signal {
    width: 36px;
    height: 48px;
  }

  .privacy-heading h2 {
    font-size: 31px;
  }

  .review-track {
    gap: 12px;
  }

  .review-slide {
    flex-basis: 92%;
    min-height: 550px;
    padding: 30px 26px 32px;
  }

  .review-slide > p {
    margin-top: 26px;
    font-size: 18px;
    line-height: 1.48;
  }
}

/* Product-faithful Visual Chat answers */
.visual-screen {
  display: flex;
  min-height: 720px;
  flex-direction: column;
}

.visual-detail-panel {
  min-height: 522px;
  margin-bottom: 16px;
  background:
    radial-gradient(circle at 100% 0%, rgb(83 94 151 / 16%), transparent 40%),
    #151d2b;
}

.visual-detail-panel:not([hidden]) {
  animation: visual-answer-enter 280ms var(--ease-out) both;
}

@keyframes visual-answer-enter {
  from { transform: translateY(6px); }
  to { transform: translateY(0); }
}

.visual-detail-heading {
  margin-bottom: 18px;
}

.visual-detail-heading strong {
  color: #82e2e7;
  font-size: 23px;
}

.visual-place-grid-large {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.visual-place-grid-large article {
  align-content: start;
}

.visual-place-grid-large img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px 4px 12px 4px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%);
}

.visual-place-grid-large strong {
  font-size: 11px;
  white-space: normal;
}

.visual-answer-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 16px;
  margin-top: 22px;
  padding-top: 17px;
  border-top: 1px solid rgb(255 255 255 / 8%);
}

.visual-answer-notes-title {
  grid-column: 1 / -1;
  color: #82e2e7;
  font-size: 14px;
}

.visual-answer-notes p {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 8px;
  margin: 0;
  color: #8fa0ad;
  font-size: 10px;
  line-height: 1.45;
}

.visual-answer-notes p > b {
  color: #82e2e7;
  font-size: 15px;
  font-weight: 560;
}

.visual-answer-notes p span,
.visual-cook-steps p span {
  display: grid;
  gap: 3px;
}

.visual-answer-notes p strong {
  color: #d9f3f4;
  font-size: 11px;
}

.visual-compare-lead,
.visual-movie-lead {
  max-width: 620px;
  margin: 0 0 19px;
  color: #a6cfd2;
  font-size: 13px;
}

.visual-compare-heading,
.visual-recipe-heading {
  grid-template-columns: 36px 1fr;
  gap: 1px 10px;
  align-items: center;
  margin-bottom: 18px;
}

.visual-compare-heading > span,
.visual-recipe-heading > span {
  grid-row: 1 / span 2;
  color: #82e2e7;
  font-size: 24px;
}

.visual-compare-heading small,
.visual-recipe-heading small {
  color: #6f94a2;
  font-size: 11px;
}

.visual-compare-table > strong {
  display: grid;
  place-items: center;
  gap: 5px;
}

.visual-compare-table > strong small {
  color: #8c99a3;
  font-size: 9px;
  font-weight: 560;
}

.visual-compare-table > strong small.is-best {
  color: #65d891;
}

.visual-footnote {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  margin: 16px 0 0;
  padding-top: 15px;
  color: #8b9ba7;
  border-top: 1px solid rgb(255 255 255 / 8%);
  font-size: 10px;
  line-height: 1.45;
}

.visual-footnote b {
  color: #d9f3f4;
}

.visual-subhead {
  display: block;
  margin: 0 0 10px;
  color: #d9f3f4;
  font-size: 12px;
}

.visual-ingredient-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
}

.visual-ingredient-grid > span {
  min-height: 91px;
  padding: 10px;
  font-size: 18px;
}

.visual-ingredient-grid b {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visual-cook-title {
  margin-top: 17px;
}

.visual-cook-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.visual-cook-steps p {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 8px;
  min-height: 68px;
  margin: 0;
  padding: 10px;
  color: #82909b;
  background: #202a3e;
  border-radius: 11px 4px 11px 4px;
  font-size: 9px;
  line-height: 1.4;
}

.visual-cook-steps p > b {
  color: #82e2e7;
  font-size: 12px;
}

.visual-cook-steps p strong {
  color: #dceff0;
  font-size: 10px;
}

.visual-movie-lead em {
  color: #e7f7f8;
}

.visual-movie-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.visual-movie-grid article {
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  min-width: 0;
  padding: 9px;
  background: #20283a;
  border-radius: 14px 5px 14px 5px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 7%);
}

.visual-movie-grid img {
  display: block;
  width: 116px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 9px 3px 9px 3px;
}

.visual-movie-grid article > span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.visual-movie-grid strong {
  overflow: hidden;
  color: #82e2e7;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visual-movie-grid small {
  color: #84a7b4;
}

.visual-movie-grid i {
  display: block;
  height: auto;
  padding: 0;
  color: #8b99a5;
  background: transparent;
  border-radius: 0;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.35;
}

.visual-movie-grid article:nth-child(2) i,
.visual-movie-grid article:nth-child(3) i,
.visual-movie-grid article:nth-child(4) i {
  background: transparent;
}

.visual-quick-pick {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: 12px 18px;
  align-items: center;
  margin-top: 18px;
  padding-top: 16px;
  color: #91a0aa;
  border-top: 1px solid rgb(255 255 255 / 8%);
  font-size: 10px;
}

.visual-quick-pick > strong {
  color: #82e2e7;
  font-size: 13px;
}

.visual-quick-pick p {
  margin: 0;
}

.visual-quick-pick p b {
  display: block;
  color: #d9f3f4;
  font-size: 10px;
}

.visual-composer {
  flex: none;
  margin-top: auto;
}

@media (max-width: 900px) {
  .visual-place-grid-large {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .visual-screen {
    min-height: 820px;
  }

  .visual-detail-panel {
    min-height: 650px;
  }

  .visual-detail-heading strong {
    font-size: 20px;
  }

  .visual-place-grid-large {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .visual-place-grid-large article {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
  }

  .visual-place-grid-large img {
    grid-row: auto;
    height: auto;
  }

  .visual-answer-notes {
    grid-template-columns: 1fr;
  }

  .visual-answer-notes-title {
    grid-column: auto;
  }

  .visual-compare-lead,
  .visual-movie-lead {
    margin-top: 0;
    font-size: 11px;
  }

  .visual-compare-table {
    grid-template-columns: 62px repeat(3, minmax(82px, 1fr));
  }

  .visual-footnote {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .visual-ingredient-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .visual-ingredient-grid > span {
    min-height: 82px;
  }

  .visual-cook-steps {
    grid-template-columns: 1fr;
  }

  .visual-cook-steps p {
    min-height: 0;
  }

  .visual-movie-grid {
    grid-template-columns: 1fr;
  }

  .visual-movie-grid article {
    grid-template-columns: 102px minmax(0, 1fr);
  }

  .visual-movie-grid img {
    width: 102px;
  }

  .visual-quick-pick {
    grid-template-columns: 1fr 1fr;
  }

  .visual-quick-pick > strong {
    grid-column: 1 / -1;
  }
}

/*
  System dark mode. Page chrome follows the tokens above; this block re-mixes the
  surfaces that are painted as gradients. Product mockups — the keyboard, the phone
  screens, the Notes and Voice panels — keep their shipped colours, because they
  stand in for the app itself rather than for the page.
*/
@media (prefers-color-scheme: dark) {
  .hero-metal {
    background:
      linear-gradient(107deg, transparent 22%, rgb(255 255 255 / 8%) 43%, transparent 62%),
      radial-gradient(ellipse 68% 60% at 18% -8%, rgb(188 200 210 / 22%) 0%, transparent 68%),
      radial-gradient(ellipse 54% 76% at 108% 20%, rgb(0 0 0 / 52%) 0%, transparent 74%),
      linear-gradient(128deg, #15181a 0%, #2f353a 27%, #434a50 48%, #1f2428 73%, #101315 100%);
  }

  .hero-metal::before {
    background: repeating-linear-gradient(0deg, rgb(255 255 255 / 4%) 0 1px, rgb(0 0 0 / 7%) 1px 2px, transparent 2px 6px);
    opacity: 0.6;
  }

  .hero-metal::after {
    background:
      linear-gradient(to bottom, transparent 62%, rgb(17 19 21 / 84%) 88%, var(--page) 100%),
      radial-gradient(ellipse 90% 78% at 50% 36%, transparent 36%, rgb(0 0 0 / 38%) 100%);
  }

  .hero-signal path {
    stroke: rgb(255 255 255 / 26%);
  }

  .hero-signal {
    color: #e07b6f;
  }

  .story-surface {
    background:
      radial-gradient(ellipse 34% 19% at 82% 10%, rgb(255 255 255 / 6%), transparent 75%),
      radial-gradient(ellipse 30% 22% at 16% 55%, rgb(0 0 0 / 32%), transparent 76%),
      linear-gradient(180deg, var(--page), #171a1c 38%, #1c2023 72%, var(--page));
  }

  .story-surface::before {
    background: repeating-linear-gradient(0deg, rgb(255 255 255 / 3%) 0 1px, rgb(0 0 0 / 5%) 1px 2px, transparent 2px 7px);
  }

  .story-signal-base {
    stroke: rgb(255 255 255 / 20%);
  }

  .story-signal-progress {
    stroke: rgb(223 103 91 / 64%);
  }

  /*
    In light mode the trust chapter is a pale panel lifted off the page. Dark mode
    turned that into a grey slab between two near-black sections, with hard seams
    top and bottom. The section takes the page colour instead and the cards do the
    lifting, which is the same relationship read the other way up.
  */
  .trust-chapter {
    background:
      radial-gradient(ellipse 44% 38% at 92% 4%, var(--sheen), transparent 76%),
      var(--page);
  }

  /* The light-mode inner highlights read as glare once the glass sits on a dark page. */
  .nav-shell,
  .site-header.is-scrolled .nav-shell {
    box-shadow: inset 0 1px 0 var(--edge-light), 0 12px 28px var(--edge-dark);
  }

  .theme-selector {
    box-shadow: inset 0 1px 0 var(--edge-light), 0 16px 26px var(--edge-dark);
  }

  .import-strip {
    box-shadow: inset 0 1px 0 var(--edge-light), 0 17px 34px var(--edge-dark);
  }

  .download-menu {
    box-shadow: inset 0 1px 0 var(--edge-light), 0 12px 24px var(--edge-dark);
  }

  .privacy-strip,
  .review-slide {
    box-shadow: inset 0 1px 0 var(--card-edge), 0 18px 34px var(--edge-dark);
  }

  /* Artwork drop-shadows are tuned for a pale backdrop and vanish on a dark one. */
  .hero-dictation,
  .hero-keyboard-fragment,
  .hero-chat-fragment,
  .hero-note-fragment {
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 14%), 0 18px 34px var(--edge-dark);
  }

  .keyboard-device {
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 13%), 0 28px 44px var(--edge-dark);
  }

  .visual-screen {
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 11%), 0 26px 42px var(--edge-dark);
  }

  .note-editor,
  .voice-note {
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%), 0 28px 50px var(--edge-dark);
  }

  /*
    The Notes mockups ship in the app's light theme. Left alone they would be the
    only white panels on the page, and they sit right beside the dark Voice note —
    so they follow the system too, the way Notes itself does.
  */
  .note-editor {
    color: #eceef0;
    background: #16191b;
  }

  .note-toolbar {
    color: #9aa1a7;
    background: #1e2225;
    box-shadow: inset 0 -1px 0 rgb(255 255 255 / 7%);
  }

  .note-toolbar strong {
    color: #eceef0;
  }

  .note-page p,
  .note-page li {
    color: #a9b0b6;
  }

  .note-page .note-date {
    color: #868d94;
  }

  .hero-note-fragment {
    color: #edf0f1;
    background: linear-gradient(150deg, #23272a, #14171a 72%);
  }

  .hero-note-fragment .fragment-bar {
    color: #9aa1a7;
  }

  .hero-note-wave {
    background: #1f2326;
  }

  .hero-note-wave i {
    background: #767e84;
  }

  .hero-note-fragment p {
    color: #a9b0b6;
  }

}

@media (prefers-color-scheme: dark) and (max-width: 900px) {
  .nav-links {
    box-shadow: inset 0 1px 0 var(--edge-light), 0 18px 34px var(--edge-dark);
  }
}

/*
  Keyboard chapter: copy beside a right-aligned phone,
  theme dock overlapping the phone it recolors.
*/
.keyboard-chapter .section-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  align-items: center;
  column-gap: clamp(24px, 4vw, 56px);
  min-height: 0;
}

.keyboard-copy {
  width: auto;
  max-width: none;
  padding-top: 0;
}

.keyboard-stage {
  --phone-width: min(430px, 62%);
  position: relative;
  display: block;
  width: 100%;
  min-height: 0;
  margin: 0;
}

.keyboard-device {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  width: var(--phone-width);
  min-height: 0;
  margin-left: auto;
  transform: none;
}

.keyboard-surface {
  position: static;
  top: auto;
  right: auto;
  width: 100%;
  transform: none;
}

.theme-selector {
  position: absolute;
  top: auto;
  right: calc(var(--phone-width) - 66px);
  bottom: 42px;
  left: auto;
  z-index: 4;
  width: min(520px, 78%);
  border-radius: 20px 20px 8px 20px;
}

@media (max-width: 900px) {
  .keyboard-chapter .section-shell {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    min-height: 0;
  }

  .keyboard-copy {
    width: auto;
    max-width: none;
    padding-top: 0;
  }

  .keyboard-stage {
    --phone-width: min(380px, 86%);
    margin-top: 8px;
  }

  .keyboard-device {
    margin-inline: auto;
  }

  .theme-selector {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    width: var(--phone-width);
    margin: 18px auto 0;
    border-radius: 20px;
  }
}

.writing-tools button {
  border: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
  transition:
    transform 160ms var(--ease-out),
    box-shadow 180ms var(--ease-out),
    background-color 180ms ease;
}

.writing-tools button.is-active {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 52%), 0 0 0 2px var(--accent);
}

.writing-tools button:focus-visible,
.keyboard-mic:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
}

.keyboard-mic {
  border: 0;
  padding: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.keyboard-mic:active,
.writing-tools button:active {
  transform: scale(0.98);
}

.keyboard-stage[data-keyboard-state="listening"] .keyboard-mic {
  animation: keyboard-mic-listen 1100ms var(--ease-out) infinite;
}

.keyboard-message-outgoing:empty {
  display: none;
}

.keyboard-message-outgoing {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out), filter 420ms var(--ease-out);
}

.keyboard-message-outgoing.is-in {
  opacity: 1;
  transform: none;
}

.keyboard-message-outgoing.is-polishing {
  filter: brightness(1.18);
}

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

@keyframes keyboard-mic-listen {
  50% {
    transform: scale(0.92);
  }
}

@media (max-width: 640px) {
  .keyboard-stage {
    --phone-width: min(352px, 100%);
  }

  .keyboard-device {
    width: var(--phone-width);
    margin-inline: auto;
    transform: none;
  }

  .keyboard-surface {
    top: auto;
    right: auto;
    width: 100%;
    transform: none;
  }

  .theme-selector {
    width: var(--phone-width);
  }
}

/*
  Keyboard chapter, second pass. The keyboard has to earn its place before the
  AI is worth anything, so the copy column now carries the spec strip, the mode
  rail, and the layout and language switches, and the demo keys carry the proof:
  the swipe trail is drawn over the real <kbd> boxes and the rows re-letter
  themselves, so every claim in the copy is visible on the phone beside it.
*/
.keyboard-switches {
  display: grid;
  gap: 12px;
  margin-top: 30px;
}

.switch-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

.switch-label {
  min-width: 112px;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 680;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.switch-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.switch-chips button {
  padding: 7px 13px;
  color: var(--ink-soft);
  background: var(--glass);
  border: 0;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--hairline);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 560;
  line-height: 1.1;
  appearance: none;
  -webkit-appearance: none;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms var(--ease-out),
    transform 150ms var(--ease-out);
}

.switch-chips button.is-active {
  color: var(--accent-ink);
  background: var(--accent);
  box-shadow: none;
}

.switch-chips button:active {
  transform: scale(0.97);
}

.switch-chips button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .switch-chips button:not(.is-active):hover {
    background: var(--glass-hover);
    box-shadow: inset 0 0 0 1px var(--hairline-strong);
  }
}

.keyboard-keeper {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  align-items: baseline;
  gap: 8px 18px;
  margin: clamp(44px, 5vw, 72px) 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--hairline);
}

.keyboard-keeper blockquote {
  margin: 0;
  color: var(--ink);
  font-size: clamp(21px, 2.1vw, 30px);
  font-weight: 640;
  letter-spacing: -0.032em;
  line-height: 1.18;
}

.keyboard-keeper figcaption {
  display: flex;
  align-items: center;
  color: var(--quiet);
  font-size: 13px;
}

.keyboard-keeper cite {
  color: var(--muted);
  font-style: normal;
  font-weight: 650;
}

.keyboard-keeper figcaption span::before {
  margin: 0 8px;
  content: "·";
}

/* Rows are flexible so any layout or script can re-letter them. */
.keyboard-surface {
  position: relative;
}

.keyboard-row {
  display: flex;
}

.keyboard-row kbd {
  flex: 1 1 0;
  min-width: 0;
  transition:
    background-color 170ms ease,
    box-shadow 170ms ease,
    transform 150ms var(--ease-out);
}

.keyboard-row-bottom kbd.key-wide {
  flex: 1.35 1 0;
}

.keyboard-row-space kbd:nth-child(1) { flex: 1.1 1 0; }
.keyboard-row-space kbd:nth-child(2) { flex: 0.8 1 0; }
.keyboard-row-space kbd:nth-child(3) { flex: 4.6 1 0; }
.keyboard-row-space kbd:nth-child(4) { flex: 1.45 1 0; }

/* Half a key of inset per key the home row is short, the way iOS sets it. */
.keyboard-row-middle {
  padding-inline: calc((var(--kb-row1, 10) - var(--kb-row2, 9)) / var(--kb-row1, 10) * 50%);
}

.keyboard-surface[data-dir="rtl"] .keyboard-row {
  flex-direction: row-reverse;
}

.keyboard-row kbd.is-hit {
  background: color-mix(in srgb, var(--keyboard-key) 58%, white);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 26%),
    0 1px 0 color-mix(in srgb, var(--keyboard-bottom) 75%, black);
  transform: translateY(2px);
}

.swipe-trail {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: 0;
  pointer-events: none;
}

.swipe-trail.is-live {
  opacity: 1;
}

.swipe-trail path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.swipe-trail-line {
  stroke-width: 8;
}

.swipe-trail-glow {
  opacity: 0.5;
  stroke-width: 18;
  filter: blur(7px);
}

.swipe-trail-dot {
  fill: rgb(255 255 255 / 20%);
  stroke: rgb(255 255 255 / 60%);
  stroke-width: 1.5;
}

.composer-field {
  overflow: hidden;
  white-space: nowrap;
}

.composer-field.is-typed {
  color: #f3f3f4;
}

.composer-field.is-clipped {
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 22px);
  mask-image: linear-gradient(to right, transparent 0, black 22px);
}

@media (max-width: 900px) {
  .keyboard-keeper {
    margin-top: 40px;
  }
}

@media (max-width: 640px) {
  .switch-row {
    gap: 6px 10px;
  }

  .switch-label {
    min-width: 0;
    flex-basis: 100%;
  }

  .switch-chips button {
    padding: 6px 11px;
    font-size: 12px;
  }
}

.switch-row.is-muted .switch-label,
.switch-row.is-muted .switch-chips {
  opacity: 0.45;
}

/*
  Below 1280 the stage column narrows enough that the theme dock reaches into
  the copy column and lands on the layout and language chips. It drops under
  the phone instead, the way it already does on small screens.
*/
@media (min-width: 901px) and (max-width: 1279px) {
  /*
    With the dock below the phone rather than across it, the phone can have the
    whole column. At 68% it was down to 289px, too narrow for the aspect ratio
    to leave the message thread any height.
  */
  .keyboard-stage {
    --phone-width: min(410px, 100%);
  }

  .theme-selector {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: var(--phone-width);
    margin: 18px 0 0 auto;
    border-radius: 20px;
  }
}

/* The mic press before the listening pulse takes over. */
.keyboard-mic.is-tapped {
  transform: scale(0.84);
  transition: transform 120ms var(--ease-out);
}

/*
  The phone keeps an iPhone aspect ratio, so a narrow phone is a short phone and
  the message thread is the only part that can give. It clips at the top like a
  real thread rather than painting bubbles over the status bar.
*/
.keyboard-message-thread {
  overflow: hidden;
}