:root {
  --color-bg-primary: #10110c;
  --color-bg-secondary: #191b12;
  --color-surface: #fffbe8;
  --color-surface-soft: #25271b;
  --color-text-primary: #fffdf2;
  --color-text-secondary: #c8c7b8;
  --color-text-muted: #8f9184;
  --color-text-inverse: #ffffff;
  --color-ink: #17180f;
  --color-text-on-light: #17180f;
  --color-text-on-light-secondary: #65665b;
  --color-brand-primary: #ffd21f;
  --color-brand-hover: #ffe264;
  --color-brand-active: #8a6b00;
  --color-accent-blue: #9c7df5;
  --color-accent-blue-soft: #eee9ff;
  --color-accent-lime: #c8f04a;
  --color-success: #659e32;
  --color-border: #3a3c2b;
  --color-border-strong: #fffdf2;
  --color-border-on-light: #17180f;
  --color-disabled: #cfcec0;
  --color-focus: #bfa9ff;
  --color-backdrop: rgb(21 21 21 / 64%);
  --color-header: rgb(16 17 12 / 92%);
  --color-shadow: rgb(0 0 0 / 28%);

  --font-family: Inter, "Segoe UI", Arial, sans-serif;
  --font-size-h1: 44px;
  --line-height-h1: 1.02;
  --letter-spacing-h1: -0.055em;
  --font-weight-h1: 850;
  --font-size-h2: 36px;
  --line-height-h2: 1.08;
  --letter-spacing-h2: -0.045em;
  --font-weight-h2: 820;
  --font-size-h3: 20px;
  --line-height-h3: 1.18;
  --font-weight-h3: 780;
  --font-size-body-lg: 18px;
  --line-height-body-lg: 1.55;
  --font-size-body: 16px;
  --line-height-body: 1.55;
  --font-size-body-sm: 14px;
  --line-height-body-sm: 1.5;
  --font-size-caption: 12px;
  --line-height-caption: 1.4;
  --font-size-button: 14px;
  --line-height-button: 1;
  --font-weight-button: 760;
  --font-size-badge: 12px;
  --font-size-card-name: 34px;
  --font-size-micro: 11px;
  --font-size-micro-sm: 10px;
  --line-height-card-name: 1.04;
  --line-height-micro: 1.25;
  --line-height-micro-sm: 1.2;
  --line-height-badge: 1.2;
  --font-weight-badge: 760;
  --font-size-nav: 14px;
  --line-height-nav: 1.2;
  --font-weight-nav: 650;
  --letter-spacing-wide: 0.06em;
  --letter-spacing-wider: 0.08em;
  --line-height-stamp: 0.8;
  --line-height-stamp-small: 0.9;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-18: 72px;
  --space-20: 80px;
  --space-24: 96px;

  --container-xl: 1280px;
  --page-padding-desktop: 32px;
  --page-padding-tablet: 24px;
  --page-padding-mobile: 16px;
  --section-padding-lg: 36px;
  --section-padding-md: 30px;
  --section-padding-sm: 24px;
  --header-height: 72px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-3xl: 32px;
  --radius-pill: 999px;
  --border-width-default: 1px;
  --border-width-strong: 2px;
  --border-default: var(--border-width-default) solid var(--color-border);
  --shadow-sm: 0 8px 24px var(--color-shadow);
  --shadow-md: 0 20px 64px var(--color-shadow);
  --shadow-lg: 0 30px 84px rgb(0 0 0 / 34%);
  --shadow-offset: 8px 8px 0 var(--color-text-primary);

  --control-sm: 44px;
  --control-md: 48px;
  --control-lg: 56px;
  --motion-fast: 160ms;
  --motion-base: 280ms;
  --motion-slow: 420ms;
  --motion-loading: 800ms;
  --motion-ambient: 18s;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --z-header: 100;
  --z-tooltip: 160;
  --z-modal: 200;
  --z-toast: 300;
  --overlay-width-sm: 360px;
  --overlay-width-md: 720px;
  --decor-spark-lg: 240px;
  --decor-spark-sm: 180px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  text-rendering: optimizeLegibility;
}

body:has(dialog[open]) {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

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

button,
input,
textarea {
  font: inherit;
}

button {
  color: inherit;
}

h1,
h2,
h3,
p,
figure {
  margin-top: 0;
}

h1 {
  margin-bottom: var(--space-6);
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  font-weight: var(--font-weight-h1);
  letter-spacing: var(--letter-spacing-h1);
}

h2 {
  margin-bottom: var(--space-5);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  font-weight: var(--font-weight-h2);
  letter-spacing: var(--letter-spacing-h2);
}

h3 {
  margin-bottom: var(--space-3);
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  font-weight: var(--font-weight-h3);
}

p {
  margin-bottom: var(--space-5);
  color: var(--color-text-secondary);
}

[id] {
  scroll-margin-top: calc(var(--header-height) + var(--space-6));
}

.container {
  width: min(calc(100% - (var(--page-padding-desktop) * 2)), var(--container-xl));
  margin-inline: auto;
}

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

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

.skip-link {
  position: fixed;
  z-index: calc(var(--z-toast) + 1);
  top: var(--space-3);
  left: var(--space-3);
  padding: var(--space-3) var(--space-4);
  transform: translateY(-160%);
  border-radius: var(--radius-md);
  background: var(--color-text-primary);
  color: var(--color-text-inverse);
}

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

.site-header {
  position: fixed;
  z-index: var(--z-header);
  inset: 0 0 auto;
  height: var(--header-height);
  border-bottom: var(--border-default);
  background: var(--color-header);
  backdrop-filter: blur(var(--space-4));
  transition:
    box-shadow var(--motion-fast) ease,
    background-color var(--motion-fast) ease;
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-sm);
}

.header__inner {
  display: grid;
  height: 100%;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-8);
}

.brand {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  font-weight: var(--font-weight-h1);
  letter-spacing: var(--letter-spacing-h2);
}

.brand img {
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 var(--border-width-default) color-mix(in srgb, var(--color-brand-primary) 28%, transparent);
  transition: transform var(--motion-base) var(--ease-out);
}

.brand:hover img {
  transform: rotate(-3deg) scale(1.04);
}

.header__cta {
  justify-self: end;
  min-width: 170px;
  border-color: var(--color-brand-primary);
  background: var(--color-brand-primary);
  box-shadow: inset 0 0 0 var(--border-width-default) color-mix(in srgb, var(--color-surface) 12%, transparent);
  color: var(--color-ink);
}

.header__cta-short {
  display: none;
}

.button {
  position: relative;
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding-inline: var(--space-5);
  border: var(--border-width-default) solid currentColor;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--font-size-button);
  line-height: var(--line-height-button);
  font-weight: var(--font-weight-button);
  cursor: pointer;
  overflow: hidden;
  transition:
    transform var(--motion-fast) var(--ease-out),
    box-shadow var(--motion-fast) ease,
    background-color var(--motion-fast) ease,
    color var(--motion-fast) ease,
    opacity var(--motion-fast) ease;
}

.button::after {
  position: absolute;
  inset: -60% auto -60% -45%;
  width: 34%;
  transform: rotate(18deg) translateX(-220%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-surface) 58%, transparent), transparent);
  content: "";
  pointer-events: none;
  transition: transform var(--motion-slow) var(--ease-out);
}

.button:hover::after,
.button:focus-visible::after {
  transform: rotate(18deg) translateX(620%);
}

.button:hover {
  transform: translateY(calc(var(--space-1) * -1));
  box-shadow: 0 var(--space-2) 0 color-mix(in srgb, currentColor 72%, transparent);
}

.button:active {
  transform: translateY(0);
  box-shadow: 0 var(--space-1) 0 color-mix(in srgb, currentColor 72%, transparent);
}

.button:focus-visible,
.text-button:focus-visible,
.modal__close:focus-visible,
.modal__prompts button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.button[disabled],
.button.is-disabled {
  border-color: var(--color-disabled);
  background: var(--color-bg-secondary);
  color: var(--color-text-muted);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.7;
}

.button.is-loading {
  pointer-events: none;
  opacity: 0.8;
}

.button.is-loading::before {
  width: var(--space-4);
  height: var(--space-4);
  border: var(--border-width-strong) solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-pill);
  content: "";
  animation: button-loading var(--motion-loading) linear infinite;
}

.button--sm {
  min-height: var(--control-sm);
}

.button--md {
  min-height: var(--control-md);
}

.button--lg {
  min-height: var(--control-lg);
}

.button--dark,
.button--primary {
  background: var(--color-ink);
  color: var(--color-text-inverse);
}

.button--yellow,
.button--secondary {
  background: var(--color-brand-primary);
  color: var(--color-ink);
}

.button--yellow:hover,
.button--secondary:hover {
  background: var(--color-brand-hover);
}

.button--yellow:active,
.button--secondary:active {
  background: var(--color-brand-active);
}

.button--outline,
.button--ghost {
  background: transparent;
}

.button--link {
  min-height: var(--control-sm);
  padding-inline: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-decoration: underline;
  text-underline-offset: var(--space-1);
}

main {
  padding-top: var(--header-height);
}

.hero {
  position: relative;
  padding-block: var(--space-12) var(--space-14);
  overflow: hidden;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
}

.hero::before,
.hero::after {
  position: absolute;
  border-radius: var(--radius-pill);
  content: "";
  pointer-events: none;
}

.hero::before {
  top: 4%;
  right: 30%;
  width: 340px;
  aspect-ratio: 1;
  background: color-mix(in srgb, var(--color-brand-primary) 22%, transparent);
  filter: blur(80px);
  animation: ambient-drift var(--motion-ambient) ease-in-out infinite alternate;
}

.hero::after {
  right: -120px;
  bottom: -180px;
  width: 420px;
  aspect-ratio: 1;
  border: var(--border-width-default) solid color-mix(in srgb, var(--color-accent-blue) 20%, transparent);
  box-shadow: 0 0 0 var(--space-10) color-mix(in srgb, var(--color-accent-blue) 4%, transparent);
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: min(620px, calc(100svh - var(--header-height) - var(--space-12)));
  grid-template-columns: minmax(0, 1.04fr) minmax(420px, 0.76fr);
  align-items: center;
  gap: var(--space-12);
}

.hero__copy {
  position: relative;
  z-index: 1;
}

.eyebrow,
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  color: var(--color-text-primary);
  font-size: var(--font-size-badge);
  line-height: var(--line-height-badge);
  font-weight: var(--font-weight-badge);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

.eyebrow span {
  width: var(--space-3);
  height: var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-brand-primary);
  box-shadow: 0 0 0 var(--space-1) color-mix(in srgb, var(--color-brand-primary) 28%, transparent);
}

.hero h1 {
  max-width: 760px;
}

.hero h1 em {
  position: relative;
  display: inline-block;
  padding-inline: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-brand-primary);
  color: var(--color-ink);
  font-style: normal;
  transform: rotate(-1.5deg);
  box-decoration-break: clone;
}

.hero__lead {
  max-width: 650px;
  margin-bottom: var(--space-8);
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-body-lg);
}

.prompt-form {
  display: grid;
  max-width: 720px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border: var(--border-default);
  border-radius: var(--radius-2xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  transition:
    border-color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease;
}

.prompt-form:focus-within {
  border-color: var(--color-focus);
  box-shadow: 0 0 0 var(--space-1) var(--color-accent-blue-soft), var(--shadow-md);
}

.prompt-form label {
  display: block;
  padding: var(--space-2) var(--space-4) 0;
  color: var(--color-text-on-light-secondary);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  font-weight: var(--font-weight-badge);
}

.prompt-form__field {
  display: grid;
  min-width: 0;
}

.prompt-form textarea {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: var(--control-lg);
  padding: var(--space-3) var(--space-4);
  overflow: hidden;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-ink);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  resize: none;
}

.hero__trust {
  display: grid;
  max-width: 720px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-6);
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-body-sm);
  font-weight: var(--font-weight-nav);
}

.hero__trust span {
  display: grid;
  min-height: 84px;
  grid-template-columns: var(--control-sm) 1fr;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--color-bg-secondary);
  transition: transform var(--motion-base) var(--ease-out), border-color var(--motion-fast) ease;
}

.hero__trust span:hover {
  transform: translateY(calc(var(--space-1) * -1));
  border-color: var(--color-brand-primary);
}

.hero__trust i {
  display: grid;
  width: var(--control-sm);
  height: var(--control-sm);
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-brand-primary);
  color: var(--color-ink);
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  font-style: normal;
  box-shadow: 0 0 0 var(--space-1) color-mix(in srgb, var(--color-brand-primary) 16%, transparent);
}

.text-button {
  display: inline-flex;
  min-height: var(--control-sm);
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-primary);
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-body-sm);
  font-weight: var(--font-weight-button);
  text-decoration: underline;
  text-decoration-color: var(--color-brand-primary);
  text-decoration-thickness: var(--border-width-strong);
  text-underline-offset: var(--space-1);
  cursor: pointer;
}

.hero__visual {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  position: relative;
  display: grid;
  width: 100%;
  max-width: 460px;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  justify-self: end;
  transform: perspective(1000px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  transition: transform var(--motion-base) var(--ease-out);
  will-change: transform;
}

.hero__media {
  position: relative;
  grid-column: 1 / -1;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border: var(--border-width-default) solid var(--color-border-strong);
  border-radius: var(--radius-3xl);
  background: var(--color-brand-primary);
  box-shadow: var(--shadow-md);
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prompt-note {
  position: static;
  display: grid;
  width: auto;
  grid-template-columns: var(--control-sm) 1fr;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  transform: none;
  border: var(--border-width-default) solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: none;
  color: var(--color-ink);
  animation: none;
}

.prompt-note__icon {
  display: grid;
  width: var(--control-sm);
  height: var(--control-sm);
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-accent-blue);
  color: var(--color-text-inverse);
}

.prompt-note p {
  min-width: 0;
  margin: 0;
  color: var(--color-ink);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  overflow-wrap: anywhere;
}

.prompt-note strong {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  text-transform: uppercase;
}

.hero__status {
  position: static;
  display: grid;
  width: auto;
  grid-template-columns: var(--control-sm) 1fr;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: var(--border-width-default) solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-bg-secondary);
  box-shadow: none;
  color: var(--color-text-primary);
}

.hero__status > span {
  display: grid;
  width: var(--control-sm);
  height: var(--control-sm);
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-brand-primary);
  color: var(--color-ink);
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  font-weight: var(--font-weight-h3);
}

.hero__status p {
  min-width: 0;
  margin: 0;
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  overflow-wrap: anywhere;
}

.hero__status strong {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-body-sm);
}

.section-heading {
  margin-bottom: var(--space-8);
}

.section-heading--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.62fr);
  align-items: end;
  gap: var(--space-16);
}

.section-heading--split h2,
.section-heading--split p,
.section-heading--center p {
  margin-bottom: 0;
}

.section-heading--split p {
  max-width: 54ch;
  justify-self: end;
  text-align: right;
}

.section-heading--center {
  max-width: 700px;
  margin-inline: auto;
  text-align: center;
}

.features {
  background: var(--color-bg-secondary);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.feature-card,
.card {
  position: relative;
  min-height: 352px;
  padding: var(--space-4);
  overflow: visible;
  border: var(--border-width-default) solid var(--color-border-on-light);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  color: var(--color-text-on-light);
  transition:
    transform var(--motion-base) var(--ease-out),
    background-color var(--motion-fast) ease;
}

.feature-card::before {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--spot-x, 24%) var(--spot-y, 18%), color-mix(in srgb, var(--color-brand-primary) 30%, transparent), transparent 42%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-base) ease;
}

.feature-card:hover::before {
  opacity: 1;
}

.feature-card:focus-visible::before {
  opacity: 1;
}

.feature-card > * {
  position: relative;
}

.feature-card:hover,
.feature-card:focus-visible {
  z-index: 1;
  transform: translateY(calc(var(--space-1) * -1));
  box-shadow: var(--shadow-sm);
}

.feature-card:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.feature-card--yellow {
  background: var(--color-surface);
}

.feature-card--blue {
  background: var(--color-surface);
}

.feature-card--ink {
  border-color: var(--color-border-on-light);
  background: var(--color-surface);
  color: var(--color-text-on-light);
}

.feature-card--ink p {
  color: var(--color-text-on-light-secondary);
}

.feature-card__visual {
  position: relative;
  height: auto;
  padding: var(--space-2);
  margin-bottom: var(--space-5);
  overflow: visible;
  aspect-ratio: 3 / 2;
  border: var(--border-width-default) solid var(--color-border-on-light);
  border-radius: var(--radius-lg);
  background: var(--color-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-surface) 42%, transparent);
}

.feature-card__visual img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--radius-lg) - var(--border-width-default));
  object-fit: contain;
  filter: saturate(0.88) hue-rotate(28deg) contrast(1.05);
  transition: transform var(--motion-slow) var(--ease-out), filter var(--motion-base) ease;
}

.feature-card:hover .feature-card__visual img,
.feature-card:focus-visible .feature-card__visual img {
  transform: scale(1.035);
  filter: saturate(0.98) hue-rotate(28deg) contrast(1.07);
}

.feature-card__visual::after {
  position: absolute;
  z-index: var(--z-tooltip);
  bottom: calc(100% + var(--space-2));
  left: 0;
  width: max-content;
  max-width: min(var(--overlay-width-sm), 72vw);
  padding: var(--space-2) var(--space-3);
  transform: translateY(var(--space-2));
  border-radius: var(--radius-sm);
  background: var(--color-ink);
  box-shadow: var(--shadow-sm);
  color: var(--color-text-inverse);
  content: attr(data-tooltip);
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-body-sm);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity var(--motion-fast) ease,
    transform var(--motion-fast) var(--ease-out),
    visibility 0s linear var(--motion-fast);
}

.feature-card:hover .feature-card__visual::after,
.feature-card:focus-visible .feature-card__visual::after {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.feature-card:nth-child(3n) .feature-card__visual::after {
  right: 0;
  left: auto;
}

.feature-card h3 {
  max-width: 280px;
  margin-bottom: var(--space-2);
}

.feature-card p {
  max-width: 34ch;
  margin-bottom: 0;
  color: var(--color-text-on-light-secondary);
}

.feature-card--ink .feature-card__visual {
  border-color: var(--color-border-on-light);
}

.transformation {
  background: var(--color-bg-secondary);
}

.transformation__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(480px, 1fr);
  align-items: center;
  gap: var(--space-12);
}

.transformation__copy {
  max-width: 480px;
}

.prompt-chip {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-block: var(--space-8);
  padding: var(--space-4);
  border: var(--border-width-default) solid var(--color-border-on-light);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--space-1) var(--space-1) 0 var(--color-brand-primary);
  color: var(--color-ink);
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-body-sm);
  font-weight: var(--font-weight-nav);
}

.prompt-chip span {
  color: var(--color-accent-blue);
}

.compare {
  --position: 52%;
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border: var(--border-width-default) solid var(--color-border-strong);
  border-radius: var(--radius-3xl);
  background: var(--color-surface);
  max-width: 430px;
  justify-self: end;
  box-shadow: var(--shadow-md);
}

.compare img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.compare__base {
  position: absolute;
  inset: 0;
}

.compare__after {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(0 0 0 var(--position));
}

.compare__after img {
  width: 100%;
}

.compare__label {
  position: absolute;
  top: var(--space-4);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  font-weight: var(--font-weight-badge);
  text-transform: uppercase;
}

.compare__label--before {
  left: var(--space-4);
}

.compare__label--after {
  right: var(--space-4);
}

.compare__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--position);
  width: var(--border-width-strong);
  transform: translateX(-50%);
  background: var(--color-surface);
  pointer-events: none;
}

.compare__line span {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: var(--control-md);
  height: var(--control-md);
  place-items: center;
  transform: translate(-50%, -50%);
  border: var(--border-width-default) solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: var(--shadow-sm);
}

.compare__line span::before,
.compare__line span::after {
  position: absolute;
  top: 50%;
  width: var(--border-width-strong);
  height: var(--space-4);
  transform: translateY(-50%);
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  content: "";
}

.compare__line span::before {
  left: var(--space-4);
}

.compare__line span::after {
  right: var(--space-4);
}

.compare input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: ew-resize;
  opacity: 0;
}

.compare:focus-within {
  outline: 3px solid var(--color-focus);
  outline-offset: var(--space-1);
}

.steps {
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  list-style: none;
}

.steps li {
  position: relative;
  min-height: 286px;
  padding: var(--space-5);
  overflow: hidden;
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface-soft);
  color: var(--color-text-primary);
  transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) ease;
}

.steps li:hover {
  transform: translateY(calc(var(--space-1) * -1));
  box-shadow: var(--shadow-sm);
}

.steps__visual {
  position: relative;
  height: 150px;
  margin-bottom: var(--space-5);
  overflow: hidden;
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 50% 54%, color-mix(in srgb, var(--color-brand-primary) 14%, transparent), transparent 42%),
    var(--color-bg-primary);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--color-text-primary) 9%, transparent),
    inset 0 0 0 var(--space-2) color-mix(in srgb, var(--color-surface-soft) 52%, transparent);
}

.steps__visual span,
.steps__visual i,
.steps__visual b {
  position: absolute;
  display: block;
  font-style: normal;
}

.steps__visual::before {
  position: absolute;
  z-index: 2;
  top: var(--space-3);
  left: var(--space-4);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-surface-soft) 88%, transparent);
  color: var(--color-text-secondary);
  content: attr(data-stage);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  font-weight: var(--font-weight-badge);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

.steps__visual span {
  inset: var(--space-10) var(--space-5) var(--space-5);
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-secondary);
  box-shadow: var(--shadow-sm);
}

.steps__visual i {
  z-index: 3;
  top: 55%;
  left: 50%;
  display: grid;
  width: var(--control-lg);
  aspect-ratio: 1;
  place-items: center;
  transform: translate(-50%, -50%);
  border: var(--border-width-default) solid var(--color-border-on-light);
  border-radius: var(--radius-xl);
  background: var(--color-brand-primary);
  color: var(--color-ink);
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  font-weight: var(--font-weight-h3);
  box-shadow:
    var(--shadow-sm),
    0 0 0 var(--space-2) color-mix(in srgb, var(--color-bg-primary) 72%, transparent);
  transition: transform var(--motion-base) var(--ease-out);
}

.steps__visual b {
  z-index: 1;
  border-radius: var(--radius-sm);
}

.steps__visual--upload span {
  transform: rotate(-2deg);
  background: linear-gradient(145deg, color-mix(in srgb, var(--color-accent-blue) 58%, var(--color-bg-secondary)), var(--color-bg-secondary));
}

.steps__visual--upload b {
  inset: var(--space-14) var(--space-6) var(--space-8) 30%;
  transform: rotate(4deg);
  border: var(--border-width-default) solid var(--color-border);
  background: color-mix(in srgb, var(--color-surface-soft) 92%, var(--color-brand-primary));
  box-shadow: var(--space-2) var(--space-2) 0 color-mix(in srgb, var(--color-brand-primary) 82%, transparent);
}

.steps__visual--prompt span::before,
.steps__visual--prompt span::after {
  position: absolute;
  left: var(--space-4);
  height: var(--space-2);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-text-primary) 24%, transparent);
  content: "";
}

.steps__visual--prompt span::before {
  top: var(--space-5);
  width: 58%;
  box-shadow: 0 var(--space-5) 0 color-mix(in srgb, var(--color-text-primary) 16%, transparent);
}

.steps__visual--prompt span::after {
  right: var(--space-4);
  bottom: var(--space-4);
  width: 34%;
  background: var(--color-brand-primary);
}

.steps__visual--prompt i {
  right: auto;
  left: 50%;
  transform: translate(-50%, -50%);
}

.steps__visual--prompt b {
  right: var(--space-8);
  bottom: var(--space-8);
  width: var(--space-14);
  height: var(--space-2);
  background: var(--color-accent-blue);
}

.steps__visual--result span {
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 24%, color-mix(in srgb, var(--color-surface) 80%, transparent), transparent 24%),
    linear-gradient(145deg, color-mix(in srgb, var(--color-accent-blue) 78%, var(--color-bg-secondary)), var(--color-brand-primary));
}

.steps__visual--result span::after {
  position: absolute;
  inset: 12% 18%;
  transform: rotate(7deg);
  border: var(--border-width-default) solid color-mix(in srgb, var(--color-text-primary) 45%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-surface) 86%, transparent);
  content: "";
}

.steps__visual--result i {
  background: var(--color-brand-primary);
}

.steps__visual--result b {
  display: none;
}

.steps li:hover .steps__visual i {
  transform: translate(-50%, -50%) scale(1.08) rotate(3deg);
}

.steps p {
  max-width: 34ch;
  margin-bottom: 0;
}

.business-card {
  overflow: hidden;
  background: var(--color-surface);
  color: var(--color-ink);
}

.business-card__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(520px, 1fr);
  align-items: center;
  gap: var(--space-12);
}

.business-card__copy {
  max-width: 490px;
}

.business-card__copy p {
  color: var(--color-ink);
}

.business-card .section-kicker {
  color: var(--color-ink);
}

.card-stage {
  position: relative;
  min-height: 390px;
  perspective: 1200px;
}

.mini-card {
  position: absolute;
  display: flex;
  width: min(78%, 486px);
  aspect-ratio: 1.75;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  isolation: isolate;
  padding: var(--space-8);
  border: var(--border-width-default) solid var(--color-border-on-light);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  transition:
    transform 680ms var(--ease-out),
    box-shadow 680ms var(--ease-out);
}

.mini-card--back {
  top: var(--space-5);
  right: 0;
  transform: rotate(5deg);
  background:
    radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--color-surface) 94%, transparent) 0 7%, transparent 7.4%),
    linear-gradient(
      128deg,
      var(--color-ink) 0 42%,
      color-mix(in srgb, var(--color-brand-primary) 84%, var(--color-ink)) 42.4% 62%,
      color-mix(in srgb, var(--color-surface) 94%, var(--color-brand-primary)) 62.4% 71%,
      color-mix(in srgb, var(--color-accent-blue) 82%, var(--color-ink)) 71.4% 100%
    );
  color: var(--color-text-inverse);
}

.mini-card--back::before {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 76% 72%, color-mix(in srgb, var(--color-brand-primary) 72%, transparent) 0 16%, transparent 16.5%),
    radial-gradient(circle at 92% 54%, color-mix(in srgb, var(--color-surface) 52%, transparent) 0 25%, transparent 25.5%),
    linear-gradient(112deg, transparent 0 52%, color-mix(in srgb, var(--color-ink) 22%, transparent) 52.4% 61%, transparent 61.4%);
  content: "";
}

.mini-card--back::after {
  position: absolute;
  right: -14%;
  bottom: -66%;
  z-index: -1;
  width: 78%;
  aspect-ratio: 1;
  border: 0;
  border-radius: 44% 56% 48% 52%;
  background: conic-gradient(
    from 214deg,
    var(--color-brand-primary),
    color-mix(in srgb, var(--color-surface) 90%, var(--color-brand-primary)),
    var(--color-accent-blue),
    var(--color-brand-primary)
  );
  box-shadow: inset 0 0 0 var(--space-3) color-mix(in srgb, var(--color-surface) 38%, transparent);
  transform: rotate(-14deg);
  content: "";
}

.mini-card--back strong {
  width: fit-content;
  max-width: 76%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-ink) 78%, transparent);
  box-shadow: inset 0 0 0 var(--border-width-default) color-mix(in srgb, var(--color-text-inverse) 18%, transparent);
}

.mini-card--front {
  bottom: var(--space-8);
  left: 0;
  transform: rotate(-3.5deg);
  background:
    radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--color-brand-primary) 86%, var(--color-surface)) 0 12%, transparent 12.4%),
    linear-gradient(
      132deg,
      var(--color-surface) 0 49%,
      var(--color-accent-blue-soft) 49.4% 65%,
      color-mix(in srgb, var(--color-brand-primary) 78%, var(--color-surface)) 65.4% 80%,
      color-mix(in srgb, var(--color-surface) 88%, var(--color-brand-primary)) 80.4% 100%
    );
  color: var(--color-ink);
}

.mini-card--front::before {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, var(--color-brand-primary) 0 var(--space-2), transparent var(--space-2)),
    radial-gradient(circle at 72% 94%, color-mix(in srgb, var(--color-accent-blue) 62%, transparent) 0 22%, transparent 22.5%),
    radial-gradient(circle at 86% 82%, color-mix(in srgb, var(--color-brand-primary) 48%, transparent) 0 31%, transparent 31.5%);
  content: "";
}

.mini-card--front::after {
  position: absolute;
  inset: var(--space-3);
  z-index: -1;
  border: var(--border-width-default) solid color-mix(in srgb, var(--color-ink) 14%, transparent);
  border-radius: calc(var(--radius-xl) - var(--space-2));
  content: "";
}

.mini-card > * {
  position: relative;
  z-index: 1;
}

.card-stage:hover .mini-card--back {
  transform: rotate(7deg) translate(6px, -6px);
  box-shadow: var(--shadow-lg);
}

.card-stage:hover .mini-card--front {
  transform: rotate(-1deg) translate(-6px, -8px);
  box-shadow: var(--shadow-lg);
}

.mini-card strong {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-h2);
}

.mini-card__role {
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  font-weight: var(--font-weight-badge);
  letter-spacing: var(--letter-spacing-wider);
}

.mini-card__back-head,
.mini-card__front-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.mini-card__back-head {
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  font-weight: var(--font-weight-badge);
  letter-spacing: var(--letter-spacing-wider);
}

.mini-card__back-head i {
  display: block;
  width: var(--control-sm);
  height: var(--space-3);
  border: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(
    90deg,
    var(--color-brand-primary) 0 36%,
    transparent 36% 44%,
    var(--color-accent-blue) 44% 72%,
    transparent 72% 80%,
    var(--color-surface) 80% 100%
  );
  font-style: normal;
}

.mini-card__back-head i::after {
  content: none;
}

.mini-card__monogram {
  display: grid;
  flex: 0 0 var(--space-14);
  width: var(--space-14);
  aspect-ratio: 1;
  place-items: center;
  border: var(--border-width-default) solid var(--color-ink);
  border-radius: var(--radius-lg);
  background: var(--color-ink);
  box-shadow: var(--space-1) var(--space-1) 0 var(--color-brand-primary);
  color: var(--color-text-primary);
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  font-weight: var(--font-weight-h1);
}

.mini-card__signal {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
}

.mini-card__signal span {
  width: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-brand-primary);
}

.mini-card__signal span:nth-child(1) { height: var(--space-3); }
.mini-card__signal span:nth-child(2) { height: var(--space-6); }
.mini-card__signal span:nth-child(3) { height: var(--space-12); }

.mini-card--front > p {
  max-width: 21ch;
  margin: 0;
  color: var(--color-text-on-light-secondary);
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-body-sm);
}

.mini-card__name {
  display: grid;
  width: max-content;
  max-width: 100%;
  gap: var(--space-1);
}

.mini-card__motif {
  position: absolute;
  right: -16%;
  bottom: -58%;
  z-index: 0;
  width: 72%;
  aspect-ratio: 1;
  border: 0;
  border-radius: 46% 54% 42% 58%;
  background: conic-gradient(
    from 198deg,
    color-mix(in srgb, var(--color-brand-primary) 88%, transparent),
    color-mix(in srgb, var(--color-surface) 78%, transparent),
    color-mix(in srgb, var(--color-accent-blue) 78%, transparent),
    color-mix(in srgb, var(--color-brand-primary) 88%, transparent)
  );
  box-shadow: inset 0 0 0 var(--space-3) color-mix(in srgb, var(--color-surface) 42%, transparent);
  opacity: 0.82;
  transform: rotate(12deg);
}

.mini-card__motif::before,
.mini-card__motif::after {
  position: absolute;
  border-radius: 50%;
  content: "";
}

.mini-card__motif::before {
  inset: var(--space-5);
  border: 0;
  background: color-mix(in srgb, var(--color-surface) 64%, transparent);
}

.mini-card__motif::after {
  inset: var(--space-10);
  border: var(--border-width-strong) solid color-mix(in srgb, var(--color-ink) 24%, transparent);
  background: color-mix(in srgb, var(--color-accent-blue) 38%, transparent);
}

.mini-card__name strong {
  font-size: var(--font-size-card-name);
  line-height: var(--line-height-card-name);
  letter-spacing: -0.04em;
}

.mini-card__name > span {
  color: var(--color-brand-active);
  font-size: var(--font-size-micro-sm);
  line-height: var(--line-height-micro-sm);
  font-weight: var(--font-weight-badge);
  letter-spacing: var(--letter-spacing-wider);
}

.mini-card__footer {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  font-weight: var(--font-weight-badge);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

.mini-card__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  margin-top: auto;
  padding-bottom: var(--space-1);
  white-space: nowrap;
}

.mini-card__brand {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-ink);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-button);
  letter-spacing: var(--letter-spacing-wide);
}

.card-stage__note {
  position: absolute;
  right: var(--space-5);
  bottom: 0;
  padding: var(--space-2) var(--space-3);
  transform: rotate(1deg);
  border: var(--border-width-default) solid var(--color-border-on-light);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  font-weight: var(--font-weight-badge);
}

.use-cases {
  background: var(--color-bg-secondary);
}

.use-cases__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.use-cases__list article {
  display: grid;
  min-height: 190px;
  grid-template-columns: 148px 1fr;
  align-content: center;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4);
  border: var(--border-width-default) solid var(--color-border-on-light);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  color: var(--color-ink);
  transition:
    transform var(--motion-base) var(--ease-out),
    box-shadow var(--motion-base) ease;
}

.use-cases__list article:hover {
  transform: translateY(calc(var(--space-1) * -1));
  box-shadow: var(--shadow-sm);
}

.use-cases__list h3,
.use-cases__list p {
  min-width: 0;
  margin-bottom: 0;
  overflow-wrap: anywhere;
}

.use-cases__list p {
  max-width: 54ch;
  margin-top: var(--space-2);
  color: var(--color-text-on-light-secondary);
}

.use-cases__art {
  position: relative;
  min-height: 0;
  aspect-ratio: 3 / 2;
  grid-row: 1 / span 2;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-bg-secondary);
}

.use-cases__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.88) hue-rotate(28deg) contrast(1.04);
  transition: transform var(--motion-slow) var(--ease-out), filter var(--motion-base) ease;
}

.use-cases__list article:hover .use-cases__art img {
  transform: scale(1.035);
  filter: saturate(1) hue-rotate(28deg) contrast(1.06);
}

.use-cases__art img[src*="use-portrait"] {
  filter: saturate(0.96) contrast(1.02);
}

.use-cases__list article:hover .use-cases__art img[src*="use-portrait"] {
  filter: saturate(1.02) contrast(1.04);
}

.faq {
  background: var(--color-surface);
  color: var(--color-ink);
}

.faq p {
  color: var(--color-text-on-light-secondary);
}

.faq .section-kicker {
  color: var(--color-ink);
}

.faq__grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.62fr) minmax(0, 1fr);
  gap: var(--space-12);
}

.faq__intro {
  align-self: start;
}

.faq__intro p {
  max-width: 40ch;
}

.faq__items {
  border-top: var(--border-width-default) solid var(--color-border-strong);
}

.faq details {
  border-bottom: var(--border-width-default) solid var(--color-border-strong);
}

.faq summary {
  display: grid;
  min-height: 84px;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-6);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: var(--font-weight-h3);
  cursor: pointer;
  list-style: none;
}

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

.faq summary span {
  display: grid;
  width: var(--control-sm);
  height: var(--control-sm);
  place-items: center;
  border: var(--border-width-default) solid var(--color-border-on-light);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  transition:
    transform var(--motion-base) var(--ease-out),
    background-color var(--motion-fast) ease;
}

.faq details[open] summary span {
  transform: rotate(45deg);
  background: var(--color-brand-primary);
}

.faq details p {
  max-width: 64ch;
  padding: 0 var(--space-16) var(--space-6) 0;
}

.final-cta {
  overflow: hidden;
  background: var(--color-ink);
  color: var(--color-text-inverse);
}

.final-cta__inner {
  position: relative;
  display: grid;
  min-height: 300px;
  grid-template-columns: minmax(0, 1fr) 220px auto;
  align-items: center;
  gap: var(--space-16);
  padding-block: var(--space-10);
}

.motion-ready .reveal-item {
  transform: translateY(var(--space-6));
  filter: blur(5px);
  opacity: 0;
  transition:
    transform 720ms var(--ease-out),
    filter 720ms var(--ease-out),
    opacity 560ms ease;
}

.motion-ready .reveal-item.is-visible {
  transform: translateY(0);
  filter: blur(0);
  opacity: 1;
}

.motion-ready .feature-card:nth-child(2),
.motion-ready .steps li:nth-child(2),
.motion-ready .use-cases__list article:nth-child(2),
.motion-ready .faq details:nth-child(2) {
  transition-delay: 70ms;
}

.motion-ready .feature-card:nth-child(3),
.motion-ready .steps li:nth-child(3),
.motion-ready .use-cases__list article:nth-child(3),
.motion-ready .faq details:nth-child(3) {
  transition-delay: 140ms;
}

.motion-ready .feature-card:nth-child(4),
.motion-ready .use-cases__list article:nth-child(4),
.motion-ready .faq details:nth-child(4) {
  transition-delay: 210ms;
}

.motion-ready .feature-card:nth-child(5) {
  transition-delay: 280ms;
}

.motion-ready .feature-card:nth-child(6) {
  transition-delay: 350ms;
}

.final-cta h2 {
  margin-bottom: 0;
  color: var(--color-text-inverse);
}

.final-cta .section-kicker {
  color: var(--color-brand-primary);
}

.final-cta__action {
  position: relative;
  z-index: 1;
  text-align: center;
}

.final-cta__action p {
  margin: var(--space-4) 0 0;
  color: var(--color-text-inverse);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
}

.final-cta__art {
  position: relative;
  width: 180px;
  aspect-ratio: 1;
  justify-self: center;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-accent-blue) 18%, transparent);
  box-shadow: 0 0 0 var(--space-6) color-mix(in srgb, var(--color-accent-blue) 8%, transparent);
}

.final-cta__art span,
.final-cta__art i,
.final-cta__art b {
  position: absolute;
  border-radius: var(--radius-pill);
  content: "";
}

.final-cta__art span {
  inset: var(--space-6);
  border: var(--border-width-default) solid var(--color-brand-primary);
  animation: portal-spin 12s linear infinite;
}

.final-cta__art span::before {
  position: absolute;
  top: calc(var(--space-2) * -1);
  left: 50%;
  width: var(--space-4);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: var(--radius-pill);
  background: var(--color-brand-primary);
  content: "";
}

.final-cta__art i {
  inset: var(--space-12);
  background: var(--color-accent-blue);
}

.final-cta__art b {
  inset: var(--space-16);
  background: var(--color-brand-primary);
}

.site-footer {
  padding-block: var(--space-10) var(--space-5);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
}

.tool-page {
  padding-top: var(--header-height);
}

.tool-hero {
  padding-block: var(--space-12);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
}

.tool-hero__grid {
  display: grid;
  min-height: 500px;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 0.7fr);
  align-items: center;
  gap: var(--space-12);
}

.tool-hero__copy {
  max-width: 680px;
}

.tool-hero__lead {
  max-width: 58ch;
  margin-bottom: var(--space-8);
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-body-lg);
}

.tool-hero__art {
  position: relative;
  margin: 0;
  display: grid;
  min-height: 0;
  overflow: visible;
  gap: var(--space-3);
  border: 0;
  background: transparent;
  box-shadow: none;
}

.tool-hero__art > img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--radius-3xl);
  object-fit: cover;
  filter: saturate(0.9) hue-rotate(28deg) contrast(1.05);
  transition: transform var(--motion-slow) var(--ease-out), filter var(--motion-base) ease;
}

.tool-hero__art:hover > img {
  transform: scale(1.025);
  filter: saturate(1) hue-rotate(28deg) contrast(1.07);
}

.tool-hero__art > img[src*="tool-generation-v2"],
.tool-hero__art > img[src*="tool-photo-editing-v"] {
  filter: saturate(1) contrast(1.04);
}

.tool-hero__art:hover > img[src*="tool-generation-v2"],
.tool-hero__art:hover > img[src*="tool-photo-editing-v"] {
  filter: saturate(1.06) contrast(1.06);
}

.tool-hero__prompt {
  position: static;
  display: grid;
  grid-template-columns: var(--control-sm) 1fr;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: var(--border-width-default) solid color-mix(in srgb, var(--color-surface) 62%, transparent);
  border-radius: var(--radius-lg);
  background: var(--color-bg-secondary);
}

.tool-hero__prompt span {
  display: grid;
  width: var(--control-sm);
  height: var(--control-sm);
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-brand-primary);
  color: var(--color-ink);
}

.tool-hero__prompt p {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-body-sm);
}

.tool-hero__accent {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  width: var(--space-12);
  aspect-ratio: 1;
  border-radius: var(--radius-pill);
  border: var(--space-1) solid var(--color-brand-primary);
  box-shadow: inset 0 0 0 var(--space-2) color-mix(in srgb, var(--color-bg-primary) 72%, transparent);
  animation: accent-breathe 5s ease-in-out infinite;
}

.tool-details {
  background: var(--color-bg-secondary);
}

.tool-details__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.tool-detail-card {
  position: relative;
  min-height: 180px;
  padding: var(--space-5);
  overflow: hidden;
  border: var(--border-width-default) solid var(--color-border-on-light);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  color: var(--color-ink);
  text-align: center;
  transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) ease;
}

.tool-detail-card::after {
  position: absolute;
  right: calc(var(--space-8) * -1);
  bottom: calc(var(--space-8) * -1);
  width: var(--space-20);
  aspect-ratio: 1;
  border: var(--space-3) solid color-mix(in srgb, var(--color-accent-blue) 18%, transparent);
  border-radius: var(--radius-pill);
  content: "";
}

.tool-detail-card:hover {
  transform: translateY(calc(var(--space-1) * -1));
  box-shadow: var(--shadow-sm);
}

.tool-detail-card span {
  display: grid;
  width: var(--control-lg);
  aspect-ratio: 1;
  margin: 0 auto var(--space-6);
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-brand-primary);
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
}

.tool-detail-card:nth-child(2) span {
  background: var(--color-accent-blue);
  color: var(--color-text-inverse);
}

.tool-detail-card:nth-child(3) span {
  background: var(--color-ink);
  color: var(--color-brand-primary);
}

.tool-detail-card p {
  margin-bottom: 0;
  color: var(--color-text-on-light-secondary);
}

.tool-flow {
  background: var(--color-bg-primary);
}

.tool-flow__list {
  position: relative;
  display: grid;
  margin: 0;
  padding: var(--space-3);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--radius-2xl);
  background: var(--color-surface-soft);
  list-style: none;
}

.tool-flow__list::before {
  display: none;
}

.tool-flow__list li {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 150px;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: center;
  gap: var(--space-4);
  padding: var(--space-5);
  overflow: hidden;
  border: var(--border-width-default) solid color-mix(in srgb, var(--color-border) 78%, transparent);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 50% 22%, color-mix(in srgb, var(--color-brand-primary) 10%, transparent), transparent 34%),
    var(--color-bg-secondary);
  text-align: center;
  transition: transform var(--motion-base) var(--ease-out), background-color var(--motion-fast) ease;
}

.tool-flow__list li:hover {
  transform: translateY(calc(var(--space-1) * -1));
  background: color-mix(in srgb, var(--color-bg-secondary) 82%, var(--color-brand-primary));
}

.tool-flow__list li > span {
  display: grid;
  width: var(--control-lg);
  height: var(--control-lg);
  place-items: center;
  border: var(--border-width-default) solid var(--color-border-on-light);
  border-radius: var(--radius-xl);
  background: var(--color-brand-primary);
  color: var(--color-ink);
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  font-weight: var(--font-weight-h3);
  box-shadow:
    var(--shadow-sm),
    0 0 0 var(--space-2) var(--color-surface-soft);
  transition: transform var(--motion-base) var(--ease-out);
}

.tool-flow__list li:nth-child(2) > span {
  background: var(--color-accent-blue);
  color: var(--color-text-inverse);
}

.tool-flow__list li:nth-child(3) > span {
  background: var(--color-surface);
}

.tool-flow__list li:hover > span {
  transform: scale(1.08) rotate(3deg);
}

.tool-flow__list h3 {
  margin-bottom: var(--space-2);
}

.tool-flow__list p {
  max-width: 30ch;
  margin-bottom: 0;
}

.tool-guidance {
  background: var(--color-bg-secondary);
}

.tool-guidance__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.tool-guidance__card {
  min-height: 152px;
  padding: var(--space-5);
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-bg-primary);
}

.tool-guidance__card span {
  display: inline-flex;
  margin-bottom: var(--space-4);
  color: var(--color-brand-primary);
  font-size: var(--font-size-badge);
  line-height: var(--line-height-badge);
  font-weight: var(--font-weight-badge);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

.tool-guidance__card p {
  margin-bottom: 0;
  color: var(--color-text-secondary);
}

.tool-discovery {
  background: var(--color-bg-primary);
}

.tool-discovery__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  align-items: start;
  gap: var(--space-8);
}

.tool-faq__items,
.tool-related__links {
  display: grid;
  gap: var(--space-3);
}

.tool-faq__item {
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-soft);
}

.tool-faq__item summary {
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  font-weight: var(--font-weight-h3);
}

.tool-faq__item p {
  margin: 0;
  padding: 0 var(--space-5) var(--space-5);
  color: var(--color-text-secondary);
}

.tool-related {
  padding: var(--space-6);
  border: var(--border-width-default) solid var(--color-border-on-light);
  border-radius: var(--radius-2xl);
  background: var(--color-surface);
  color: var(--color-ink);
}

.tool-related h2 {
  margin-bottom: var(--space-6);
}

.tool-related__link {
  display: grid;
  min-height: var(--control-lg);
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width-default) solid var(--color-border-on-light);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-surface) 84%, var(--color-brand-primary));
  font-weight: var(--font-weight-button);
  transition: transform var(--motion-fast) var(--ease-out), background-color var(--motion-fast) ease;
}

.tool-related__link:hover {
  transform: translateX(var(--space-1));
  background: var(--color-brand-primary);
}

.not-found {
  display: grid;
  min-height: calc(100svh - var(--header-height));
  place-items: center;
  padding-top: calc(var(--header-height) + var(--section-padding-lg));
  padding-bottom: var(--section-padding-lg);
}

.not-found__card {
  max-width: 760px;
  padding: var(--space-10);
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--radius-2xl);
  background: var(--color-surface-soft);
  text-align: center;
}

.not-found__code {
  display: block;
  margin-bottom: var(--space-4);
  color: var(--color-brand-primary);
  font-size: var(--font-size-badge);
  line-height: var(--line-height-badge);
  font-weight: var(--font-weight-badge);
  letter-spacing: var(--letter-spacing-wider);
}

.not-found__card p {
  max-width: 52ch;
  margin-inline: auto;
  color: var(--color-text-secondary);
}

.not-found__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
}

.tool-bottom {
  background: var(--color-brand-primary);
  color: var(--color-ink);
  color: var(--color-text-inverse);
}

.tool-bottom__inner {
  display: grid;
  min-height: 260px;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-8);
  padding-block: var(--space-10);
}

.tool-bottom h2 {
  max-width: 720px;
  margin-bottom: 0;
  color: var(--color-ink);
}

.tool-bottom .section-kicker {
  color: var(--color-ink);
}

.tool-footer__meta {
  margin-top: 0;
}

.footer__main {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(480px, 1.5fr) auto;
  align-items: start;
  gap: var(--space-10);
}

.brand--footer {
  margin-bottom: var(--space-4);
}

.footer__links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
}

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

.footer__links strong {
  margin-bottom: var(--space-2);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

.footer__links a {
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-body-sm);
  transition: color var(--motion-fast) ease;
}

.footer__links a:hover,
.footer__links a:focus-visible {
  color: var(--color-text-primary);
}

.footer__main p {
  max-width: 360px;
  margin-bottom: 0;
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-body-sm);
}

.footer__main > nav {
  display: grid;
  gap: var(--space-3);
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-body-sm);
}

.footer__main > nav a:hover {
  text-decoration: underline;
  text-underline-offset: var(--space-1);
}

.footer__meta {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: var(--border-default);
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
}

.modal {
  z-index: var(--z-modal);
  width: min(calc(100% - (var(--page-padding-mobile) * 2)), var(--overlay-width-md));
  max-width: none;
  padding: 0;
  transform: translateY(var(--space-6)) scale(0.98);
  border: 0;
  border-radius: var(--radius-2xl);
  background: transparent;
  color: var(--color-ink);
  opacity: 0;
  transition:
    opacity var(--motion-base) ease,
    transform var(--motion-base) var(--ease-out);
}

.modal::backdrop {
  background: transparent;
  backdrop-filter: blur(0);
  transition:
    background-color var(--motion-base) ease,
    backdrop-filter var(--motion-base) ease;
}

.modal.is-open {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.modal.is-open::backdrop {
  background: var(--color-backdrop);
  backdrop-filter: blur(var(--space-1));
}

.modal.is-closing {
  transform: translateY(var(--space-4)) scale(0.985);
  opacity: 0;
}

.modal__panel {
  position: relative;
  padding: var(--space-10);
  border: var(--border-width-default) solid var(--color-border-on-light);
  border-radius: inherit;
  background: var(--color-bg-primary);
  box-shadow: var(--shadow-md);
}

.modal__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  display: grid;
  width: var(--control-sm);
  height: var(--control-sm);
  padding: 0;
  place-items: center;
  border: var(--border-width-default) solid var(--color-border-on-light);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  cursor: pointer;
  transition:
    transform var(--motion-fast) var(--ease-out),
    background-color var(--motion-fast) ease;
}

.modal__close:hover {
  transform: rotate(8deg);
  background: var(--color-brand-primary);
}

.modal__panel h2 {
  max-width: 560px;
}

.modal__prompts {
  display: grid;
  gap: var(--space-3);
  margin-block: var(--space-8);
}

.modal__prompts button {
  padding: var(--space-4);
  border: var(--border-width-default) solid var(--color-border-on-light);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-ink);
  text-align: left;
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-body-sm);
  cursor: pointer;
  transition:
    transform var(--motion-fast) var(--ease-out),
    background-color var(--motion-fast) ease;
}

.modal__prompts button:hover {
  transform: translateX(var(--space-1));
  background: var(--color-brand-primary);
}

.modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.toast-region {
  position: fixed;
  z-index: var(--z-toast);
  top: calc(var(--header-height) + var(--space-4));
  right: var(--page-padding-desktop);
  display: grid;
  width: min(calc(100% - (var(--page-padding-mobile) * 2)), var(--overlay-width-sm));
  pointer-events: none;
}

.toast {
  display: grid;
  grid-template-columns: var(--control-sm) 1fr;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  transform: translateY(calc(var(--space-3) * -1)) scale(0.98);
  border: var(--border-width-default) solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-bg-secondary);
  box-shadow: var(--shadow-md);
  color: var(--color-text-primary);
  opacity: 0;
  transition:
    opacity var(--motion-base) ease,
    transform var(--motion-base) var(--ease-out);
}

.toast.is-visible {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.toast__icon {
  display: grid;
  width: var(--control-sm);
  height: var(--control-sm);
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-brand-primary);
  color: var(--color-ink);
  font-weight: var(--font-weight-h1);
}

.toast__message {
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-body-sm);
  font-weight: var(--font-weight-button);
}

@media (max-width: 1023px) {
  :root {
    --section-padding-lg: var(--section-padding-md);
  }

  .container {
    width: min(calc(100% - (var(--page-padding-tablet) * 2)), var(--container-xl));
  }

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

  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.72fr);
    gap: var(--space-10);
  }

  .prompt-form {
    grid-template-columns: 1fr;
  }

  .prompt-form .button {
    width: 100%;
  }

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

  .feature-card:nth-child(3n) .feature-card__visual::after {
    right: auto;
    left: 0;
  }

  .feature-card:nth-child(even) .feature-card__visual::after {
    right: 0;
    left: auto;
  }

  .transformation__grid,
  .business-card__grid {
    gap: var(--space-12);
  }

  .business-card__grid {
    grid-template-columns: 1fr;
  }

  .business-card__copy {
    max-width: 620px;
  }

  .card-stage {
    width: min(100%, 680px);
    justify-self: center;
  }

  .faq__grid {
    gap: var(--space-12);
  }

  .footer__main {
    grid-template-columns: 1fr;
  }

  .footer__links {
    max-width: 760px;
  }
}

@media (max-width: 767px) {
  :root {
    --font-size-h1: 30px;
    --line-height-h1: 1.08;
    --letter-spacing-h1: -0.04em;
    --font-size-h2: 26px;
    --line-height-h2: 1.14;
    --letter-spacing-h2: -0.035em;
    --font-size-body-lg: 16px;
    --line-height-body-lg: 1.55;
    --header-height: 64px;
    --section-padding-lg: var(--section-padding-sm);
  }

  .container {
    width: min(calc(100% - (var(--page-padding-mobile) * 2)), var(--container-xl));
  }

  .brand {
    gap: var(--space-2);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
  }

  .brand img {
    width: 36px;
    height: 36px;
  }

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

  .header__cta-full {
    display: none;
  }

  .header__cta-short {
    display: inline;
  }

  .hero {
    padding-block: var(--section-padding-lg) var(--space-10);
  }

  .hero__grid {
    display: flex;
    min-height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-12);
  }

  .hero__lead {
    max-width: none;
  }

  .hero__trust {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .hero__trust span {
    min-height: var(--control-lg);
  }

  .hero__visual {
    width: 100%;
    max-width: 500px;
    grid-template-columns: minmax(0, 1fr);
    align-self: flex-start;
    justify-self: auto;
  }

  .prompt-note {
    width: 100%;
  }

  .hero__status {
    width: 100%;
  }

  .section-heading--split {
    display: block;
  }

  .section-heading--split > div {
    margin-bottom: var(--space-4);
  }

  .section-heading--split p {
    text-align: left;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .feature-card:nth-child(even) .feature-card__visual::after {
    right: auto;
    left: 0;
  }

  .feature-card {
    min-height: 0;
  }

  .transformation__grid,
  .business-card__grid,
  .faq__grid {
    grid-template-columns: 1fr;
  }

  .transformation__grid {
    gap: var(--space-10);
  }

  .transformation__copy {
    max-width: none;
  }

  .compare {
    justify-self: center;
    box-shadow: var(--space-2) var(--space-2) 0 var(--color-brand-primary);
  }

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

  .steps li {
    min-height: 250px;
    padding: var(--space-4);
  }

  .card-stage {
    min-height: 336px;
  }

  .mini-card {
    width: 82%;
    aspect-ratio: 1.42;
    padding: var(--space-5);
  }

  .mini-card strong {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
  }

  .mini-card--front > p {
    max-width: none;
    font-size: var(--font-size-micro);
    line-height: var(--line-height-micro);
  }

  .mini-card__meta {
    display: grid;
    gap: var(--space-1);
    padding-bottom: 0;
    font-size: var(--font-size-micro-sm);
    line-height: var(--line-height-micro-sm);
  }

  .use-cases__list article {
    grid-template-columns: 126px minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-3);
  }

  .use-cases__list {
    grid-template-columns: 1fr;
  }

  .use-cases__list p {
    grid-column: 2;
  }

  .use-cases__art {
    min-height: 0;
  }

  .faq__grid {
    gap: var(--space-10);
  }

  .faq details p {
    padding-right: 0;
  }

  .final-cta__inner {
    min-height: 360px;
    grid-template-columns: 1fr;
    align-content: center;
    gap: var(--space-8);
  }

  .final-cta__action {
    text-align: left;
  }

  .final-cta__art {
    position: absolute;
    right: calc(var(--space-10) * -1);
    bottom: calc(var(--space-10) * -1);
    width: 160px;
    opacity: 0.72;
  }

  .footer__main {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .footer__links {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .footer__meta {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-2);
  }

  .tool-hero {
    padding-block: var(--section-padding-lg);
  }

  .tool-hero__grid {
    min-height: auto;
    grid-template-columns: 1fr;
  }

  .tool-hero__art {
    min-height: 0;
  }

  .tool-details__grid {
    grid-template-columns: 1fr;
  }

  .tool-guidance__grid,
  .tool-discovery__grid {
    grid-template-columns: 1fr;
  }

  .tool-flow__list {
    grid-template-columns: 1fr;
  }

  .tool-flow__list::before {
    display: none;
  }

  .tool-bottom__inner {
    min-height: 300px;
    grid-template-columns: 1fr;
    align-content: center;
  }

  .not-found__card {
    padding: var(--space-6);
  }

  .not-found__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .modal__panel {
    padding: var(--space-16) var(--space-5) var(--space-5);
  }

  .modal__actions {
    display: grid;
  }

  .modal__actions .button {
    width: 100%;
  }

  .toast-region {
    right: var(--page-padding-mobile);
    left: var(--page-padding-mobile);
    width: auto;
  }
}

@media (max-width: 479px) {
  .use-cases__list article {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: var(--space-3);
    padding: var(--space-4);
  }

  .use-cases__art {
    width: 100%;
    grid-row: auto;
  }

  .use-cases__list p {
    grid-column: auto;
    margin-top: 0;
  }
}

@media (max-width: 359px) {
  .brand span {
    max-width: 72px;
    overflow: hidden;
  }

  .header__cta {
    padding-inline: var(--space-3);
  }

  .hero__media {
    border-radius: var(--radius-xl);
  }

  .card-stage {
    min-height: 330px;
  }

  .mini-card {
    width: 88%;
    aspect-ratio: 1.38;
    padding: var(--space-4);
  }

  .mini-card--front {
    bottom: var(--space-6);
  }

  .mini-card__front-head {
    gap: var(--space-2);
  }

  .mini-card__monogram {
    flex-basis: var(--control-sm);
    width: var(--control-sm);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .modal::backdrop {
    transition-duration: 0.01ms !important;
  }

  .motion-ready .reveal-item {
    transform: none;
    filter: none;
    opacity: 1;
  }
}

@keyframes ambient-drift {
  to {
    transform: translate3d(90px, 40px, 0) scale(1.16);
  }
}

@keyframes portal-spin {
  to {
    transform: rotate(1turn);
  }
}

@keyframes note-float {
  50% {
    transform: rotate(1deg) translateY(calc(var(--space-2) * -1));
  }
}

@keyframes stamp-pulse {
  50% {
    transform: rotate(-3deg) scale(1.05);
  }
}

@keyframes accent-breathe {
  50% {
    transform: scale(1.08) rotate(8deg);
    box-shadow: inset 0 0 0 var(--space-2) color-mix(in srgb, var(--color-accent-blue) 68%, transparent);
  }
}

@keyframes button-loading {
  to {
    transform: rotate(1turn);
  }
}