/* Hallmark · genre: atmospheric · tone: cinematic, clear, restrained · anchor: app navy · macrostructure: Split Studio + Narrative Workflow / Long Document / Conversational FAQ · design-system: design.md · enrichment: H2 real iPhone screenshot · nav: language-only · footer: Ft5 Statement · contrast: pass (40–41) · slop: pass (42–46, 48–49) · chrome: user-directed iPhone frame exception (47) · mobile: pass (34, 49–57) · icons: pass (30) · designed-as-app */
/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4 */

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

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--line-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

main,
section,
header,
footer,
nav,
article,
aside,
figure {
  display: block;
}

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

img {
  height: auto;
}

button,
input,
textarea,
select {
  font: inherit;
}

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

a {
  color: inherit;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: var(--rule-fine);
}

a:active {
  text-decoration-thickness: var(--rule-fine);
}

:focus-visible {
  outline: var(--rule-fine) solid var(--color-focus);
  outline-offset: var(--space-2xs);
}

::selection {
  background: var(--color-accent-strong);
  color: var(--color-accent-ink);
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
  margin-block-start: 0;
}

h1,
h2,
h3 {
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 700;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.site-shell {
  width: min(calc(100% - (var(--space-md) * 2)), var(--max-page));
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  z-index: 100;
  inset-block-start: var(--space-sm);
  inset-inline-start: var(--space-sm);
  min-height: 2.75rem;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-input);
  background: var(--color-paper);
  color: var(--color-ink);
  font-weight: 700;
  transform: translateY(calc(-100% - var(--space-lg)));
  transition: transform var(--dur-micro) var(--ease-out);
}

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

/* Header */

.site-header {
  position: absolute;
  z-index: 20;
  inset: 0 0 auto;
  color: var(--color-on-night);
}

.site-header__inner {
  display: flex;
  min-height: 4.75rem;
  align-items: center;
  justify-content: flex-end;
}

.header-language {
  display: inline-flex;
  min-width: 5.75rem;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xs) var(--space-sm);
  border: var(--rule-hair) solid var(--color-on-night-rule);
  border-radius: var(--radius-input);
  background: var(--color-night-glass);
  color: var(--color-on-night);
  font-size: var(--text-sm);
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--dur-micro) var(--ease-out),
    border-color var(--dur-micro) var(--ease-out);
}

.header-language:hover {
  background: var(--color-night-raised);
}

.header-language:active {
  background: var(--color-night-soft);
}

.video-launch:disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

/* Home hero */

.home-hero {
  min-height: clamp(42rem, 82dvh, 58rem);
  padding-block: var(--space-3xl) calc(var(--space-3xl) + var(--space-lg) + var(--space-2xs));
  overflow: hidden;
  background-color: var(--color-night);
  background-image:
    linear-gradient(110deg, var(--color-night-translucent), var(--color-media-scrim-soft)),
    linear-gradient(to bottom, transparent 64%, var(--color-night-deep)),
    url("/assets/images/cinematic-background-1024.jpg");
  background-position: center;
  background-size: cover;
  color: var(--color-on-night);
}

.home-hero__grid {
  display: grid;
  min-height: clamp(26rem, 50dvh, 35rem);
  grid-template-columns: minmax(0, 7fr) minmax(17rem, 5fr);
  align-items: center;
  gap: var(--space-2xl);
}

.home-hero__copy {
  max-width: 43rem;
}

.home-hero h1 {
  margin-block-end: var(--space-md);
  color: var(--color-on-night);
  font-size: var(--text-h1);
  letter-spacing: var(--tracking-display);
  line-height: var(--line-tight);
}

.home-hero__tagline {
  max-width: 19ch;
  margin-block-end: var(--space-sm);
  color: var(--color-on-night);
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 700;
  letter-spacing: var(--tracking-heading);
  line-height: var(--line-heading);
  text-wrap: balance;
}

.home-hero__lead {
  max-width: 39rem;
  margin-block-end: var(--space-lg);
  color: var(--color-on-night-soft);
  font-size: var(--text-lead);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-block-end: var(--space-md);
}

.button-link {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-input);
  background: var(--color-accent-strong);
  color: var(--color-accent-ink);
  font-weight: 750;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--dur-micro) var(--ease-out);
}

.button-link:hover {
  background: var(--color-accent-hover);
  text-decoration: none;
}

.button-link:active {
  background: var(--color-accent-strong);
}

.text-link {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--color-accent-strong);
  font-weight: 750;
  text-decoration-line: underline;
  text-decoration-thickness: var(--rule-hair);
  text-underline-offset: 0.35em;
  white-space: nowrap;
}

.text-link::after {
  content: "→";
  text-decoration: none;
  transition: transform var(--dur-micro) var(--ease-out);
}

.text-link:hover::after {
  transform: translateX(var(--space-3xs));
}

.text-link--on-dark {
  color: var(--color-on-night);
}

.availability {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  color: var(--color-on-night-soft);
  font-size: var(--text-sm);
}

.availability__platform {
  color: var(--color-on-night-muted);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.availability strong {
  color: var(--color-on-night);
  font-weight: 650;
}

.device-proof {
  justify-self: center;
  margin-block-end: 0;
}

.device-frame {
  position: relative;
  width: min(100%, 21rem);
  margin-inline: auto;
  padding: var(--space-2xs);
  border: var(--rule-hair) solid var(--color-device-edge);
  border-radius: var(--radius-device);
  background: linear-gradient(145deg, var(--color-device-edge), var(--color-device-face));
  box-shadow: var(--shadow-device);
}

.device-frame::before {
  position: absolute;
  z-index: -1;
  inset-block-start: 22%;
  inset-inline-start: -0.68rem;
  width: 0.42rem;
  height: 4.5rem;
  border-radius: var(--radius-input) 0 0 var(--radius-input);
  background: var(--color-device-edge);
  content: "";
}

.device-frame__screen {
  overflow: hidden;
  border-radius: calc(var(--radius-device) - 0.55rem);
  background: var(--color-device-face);
}

.device-frame__screen img {
  width: 100%;
}

.device-proof figcaption,
.device-frame__caption {
  margin-block-start: var(--space-xs);
  color: var(--color-on-night-muted);
  font-size: var(--text-xs);
  text-align: center;
}

.js .home-hero__copy,
.js .device-proof {
  animation: hero-enter var(--dur-short) var(--ease-out) both;
}

.js .device-proof {
  animation-delay: var(--dur-micro);
}

@keyframes hero-enter {
  from {
    opacity: 0;
    transform: translateY(var(--space-2xs)) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Shared sections */

.section,
.sample-section,
.modes-section,
.trust-section {
  padding-block: var(--space-3xl);
}

.section-intro,
.section-heading {
  max-width: 39rem;
  margin-block-end: var(--space-xl);
}

.section-intro--wide {
  display: grid;
  max-width: none;
  grid-template-columns: minmax(0, 7fr) minmax(16rem, 5fr);
  align-items: end;
  gap: var(--space-xl);
}

.section-intro h2,
.section-heading h2,
.trust-section h2 {
  margin-block-end: var(--space-sm);
  font-size: var(--text-h2);
  letter-spacing: var(--tracking-heading);
  line-height: var(--line-heading);
}

.section-intro p,
.section-heading p {
  max-width: var(--max-copy);
  margin-block-end: 0;
  color: var(--color-ink-2);
  font-size: var(--text-lead);
}

/* Sample gallery */

.sample-section {
  background: var(--color-paper);
}

.sample-composition {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-md);
  align-items: center;
}

.video-facade {
  position: relative;
  overflow: hidden;
  margin: 0;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-media);
  background: var(--color-night);
  box-shadow: 0 1rem 2.5rem var(--color-shadow);
  isolation: isolate;
}

.video-facade:focus-within {
  outline: var(--rule-fine) solid var(--color-focus);
  outline-offset: calc(var(--rule-fine) * -1);
}

.video-facade--landscape {
  aspect-ratio: 16 / 9;
}

.video-facade--portrait {
  aspect-ratio: 9 / 16;
  grid-column: 9 / 13;
  grid-row: 1 / span 2;
}

.video-facade--primary {
  grid-column: 1 / 9;
  grid-row: 1;
}

.video-facade--secondary {
  grid-column: 2 / 8;
  grid-row: 2;
}

.video-facade::after {
  position: absolute;
  z-index: 1;
  inset: 38% 0 0;
  background: linear-gradient(to top, var(--color-media-scrim), var(--color-media-scrim-soft), transparent);
  content: "";
  pointer-events: none;
}

.video-facade__art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-long) var(--ease-out);
}

.video-facade__content {
  position: absolute;
  z-index: 2;
  inset: auto var(--space-md) var(--space-md);
  color: var(--color-on-night);
  pointer-events: none;
}

.video-facade__content span {
  display: block;
  margin-block-end: var(--space-3xs);
  color: var(--color-on-night-soft);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
}

.video-facade__content h3 {
  margin-block-end: 0;
  font-size: var(--text-h3);
  letter-spacing: var(--tracking-heading);
  line-height: var(--line-heading);
}

.video-launch {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--color-on-night);
  cursor: pointer;
}

.video-launch::before {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 3.75rem;
  height: 3.75rem;
  border: var(--rule-hair) solid var(--color-on-night-rule);
  border-radius: 50%;
  background: var(--color-night-glass);
  box-shadow: 0 0 0 var(--space-2xs) var(--color-media-scrim-soft);
  content: "";
  transform: translate(-50%, -50%);
  transition: background-color var(--dur-micro) var(--ease-out);
}

.video-launch::after {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 0;
  height: 0;
  border-block: var(--space-2xs) solid transparent;
  border-inline-start: var(--space-xs) solid currentColor;
  content: "";
  transform: translate(-35%, -50%);
}

.video-launch:hover::before {
  background: var(--color-accent);
}

.video-launch:active::before {
  background: var(--color-accent-hover);
}

.video-launch:focus-visible {
  outline: 0;
}

.video-launch:focus-visible::before {
  outline: var(--rule-fine) solid var(--color-focus);
  outline-offset: var(--space-2xs);
}

.video-facade:has(.video-launch:hover) .video-facade__art {
  transform: scale(1.015);
}

.video-facade iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.video-facade--playing::after {
  display: none;
}

.sample-privacy-note {
  max-width: 48rem;
  margin: var(--space-md) 0 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

/* Product modes */

.modes-section {
  background: var(--color-paper-2);
  scroll-margin-block-start: var(--space-sm);
}

.modes-layout {
  display: grid;
  grid-template-columns: minmax(17rem, 5fr) minmax(0, 7fr);
  gap: var(--space-2xl);
  align-items: start;
}

.modes-layout .section-intro {
  position: sticky;
  inset-block-start: var(--space-lg);
  margin-block-end: 0;
}

.mode-rows {
  border-block-start: var(--rule-hair) solid var(--color-rule-strong);
}

.mode-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-md);
  padding-block: var(--space-lg);
  border-block-end: var(--rule-hair) solid var(--color-rule-strong);
}

.mode-row__icon {
  display: grid;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-icon);
  place-items: center;
}

.mode-row--blue .mode-row__icon {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.mode-row--purple .mode-row__icon {
  background: var(--color-highlight-soft);
  color: var(--color-highlight);
}

.mode-row h3 {
  margin-block-end: var(--space-2xs);
  font-size: var(--text-h3);
  letter-spacing: var(--tracking-heading);
  line-height: var(--line-heading);
}

.mode-row p {
  max-width: 45rem;
  margin-block-end: 0;
  color: var(--color-ink-2);
}

/* Trust */

.trust-section {
  background: var(--color-night-deep);
  color: var(--color-on-night);
}

.trust-section__heading {
  max-width: 46rem;
  margin-block-end: var(--space-xl);
}

.trust-kicker {
  margin-block-end: var(--space-sm);
  color: var(--color-trust);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
}

.trust-section h2 {
  color: var(--color-on-night);
}

.trust-section__heading > p:last-child {
  margin-block-end: 0;
  color: var(--color-on-night-soft);
  font-size: var(--text-lead);
}

.trust-points {
  display: grid;
  margin-block-end: 0;
  border-block: var(--rule-hair) solid var(--color-on-night-rule);
  grid-template-columns: repeat(3, 1fr);
}

.trust-points > div {
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-lg);
}

.trust-points > div + div {
  border-inline-start: var(--rule-hair) solid var(--color-on-night-rule);
}

.trust-points strong {
  color: var(--color-on-night);
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: var(--line-heading);
}

.trust-points span {
  color: var(--color-on-night-muted);
}

/* Subpage hero */

.subpage {
  background: var(--color-paper);
}

.page-hero {
  padding-block: calc(var(--space-3xl) + var(--space-md)) calc(var(--space-3xl) + var(--space-2xl));
  overflow: hidden;
  background: var(--color-night);
  color: var(--color-on-night);
}

.page-hero--how-to {
  background-image:
    linear-gradient(110deg, var(--color-night-translucent), var(--color-media-scrim-soft)),
    linear-gradient(to bottom, transparent 62%, var(--color-night-deep)),
    url("/assets/images/cinematic-background-1024.jpg");
  background-position: center;
  background-size: cover;
}

.page-hero__grid {
  display: grid;
  min-height: 34rem;
  grid-template-columns: minmax(0, 7fr) minmax(16rem, 5fr);
  align-items: center;
  gap: var(--space-2xl);
}

.page-hero__copy {
  max-width: 43rem;
}

.page-hero h1 {
  max-width: 18ch;
  margin-block-end: var(--space-md);
  color: var(--color-on-night);
  font-size: var(--text-page-title);
  letter-spacing: var(--tracking-display);
  line-height: 1.02;
}

.page-hero__copy p,
.page-hero__lead {
  max-width: 42rem;
  margin-block-end: 0;
  color: var(--color-on-night-soft);
  font-size: var(--text-lead);
}

.device-frame--compact {
  width: min(100%, 18rem);
  margin-block-end: var(--space-xl);
}

.device-frame--compact .device-frame__caption {
  position: absolute;
  inset-block-start: calc(100% + var(--space-xs));
  inset-inline: calc(var(--space-lg) * -1);
  margin: 0;
}

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

.page-hero--privacy h1 {
  max-width: none;
}

.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin: var(--space-md) 0 var(--space-sm);
  color: var(--color-trust);
  font-size: var(--text-sm);
  font-weight: 750;
}

.trust-pill::before {
  width: var(--space-2xs);
  height: var(--space-2xs);
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 var(--space-3xs) var(--color-on-night-rule);
  content: "";
}

.policy-meta {
  margin-block-end: 0;
  color: var(--color-on-night-muted);
  font-size: var(--text-sm);
}

/* Workflow */

.workflow-section {
  background: var(--color-paper);
}

.workflow {
  margin: 0;
  padding: 0;
  border-block-start: var(--rule-hair) solid var(--color-rule-strong);
  list-style: none;
}

.workflow__step {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--space-md);
  padding-block: var(--space-lg);
  border-block-end: var(--rule-hair) solid var(--color-rule-strong);
}

.workflow__number {
  color: var(--color-accent-strong);
  font-family: var(--font-outlier);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
}

.workflow__body {
  display: grid;
  grid-template-columns: minmax(12rem, 4fr) minmax(0, 8fr);
  gap: var(--space-lg);
}

.workflow__body h3 {
  margin-block-end: 0;
  font-size: var(--text-h3);
  letter-spacing: var(--tracking-heading);
  line-height: var(--line-heading);
}

.workflow__body p {
  max-width: var(--max-copy);
  margin-block-end: 0;
  color: var(--color-ink-2);
}

.mode-comparison {
  background: var(--color-paper-2);
}

.mode-comparison__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl);
}

.mode-comparison__item {
  padding: var(--space-lg) 0 0;
  border-block-start: var(--space-3xs) solid var(--color-accent);
}

.mode-comparison__item--highlight {
  border-block-start-color: var(--color-highlight);
}

.mode-comparison__item h3 {
  margin-block-end: var(--space-sm);
  font-size: var(--text-h3);
  letter-spacing: var(--tracking-heading);
  line-height: var(--line-heading);
}

.mode-comparison__item > p {
  margin-block-end: var(--space-md);
  color: var(--color-ink-2);
}

.mode-facts {
  margin-block-end: 0;
  border-block-start: var(--rule-hair) solid var(--color-rule-strong);
}

.mode-facts > div {
  display: grid;
  grid-template-columns: minmax(7rem, 1fr) 2fr;
  gap: var(--space-sm);
  padding-block: var(--space-xs);
  border-block-end: var(--rule-hair) solid var(--color-rule);
}

.mode-facts dt,
.output-options dt {
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 700;
}

.mode-facts dd,
.output-options dd {
  margin: 0;
}

.output-options {
  display: grid;
  margin-block-start: var(--space-3xl);
  padding-block-start: var(--space-xl);
  border-block-start: var(--rule-hair) solid var(--color-rule-strong);
  grid-template-columns: minmax(16rem, 5fr) minmax(0, 7fr);
  gap: var(--space-2xl);
}

.output-options__intro h3 {
  margin-block-end: var(--space-sm);
  font-size: var(--text-h3);
  letter-spacing: var(--tracking-heading);
  line-height: var(--line-heading);
}

.output-options__intro p {
  margin-block-end: 0;
  color: var(--color-ink-2);
}

.output-options__list {
  margin-block-end: 0;
}

.output-options__list > div {
  display: grid;
  grid-template-columns: minmax(7rem, 1fr) 3fr;
  gap: var(--space-md);
  padding-block: var(--space-md);
  border-block-start: var(--rule-hair) solid var(--color-rule-strong);
}

.output-options__list > div:last-child {
  border-block-end: var(--rule-hair) solid var(--color-rule-strong);
}

.output-options dd {
  color: var(--color-ink-2);
}

.privacy-assurance {
  margin-block-start: var(--space-3xl);
  padding: var(--space-lg);
  border-inline-start: var(--space-3xs) solid var(--color-trust);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  background: var(--color-night);
  color: var(--color-on-night);
}

.privacy-assurance h3 {
  margin-block-end: var(--space-2xs);
  color: var(--color-on-night);
  font-size: var(--text-h3);
}

.privacy-assurance p {
  max-width: var(--max-copy);
  margin-block-end: 0;
  color: var(--color-on-night-soft);
}

/* Policy document */

.policy-shell {
  display: grid;
  padding-block: var(--space-3xl);
  grid-template-columns: 14rem minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: start;
}

.policy-nav {
  position: sticky;
  inset-block-start: var(--space-lg);
  padding-block-start: var(--space-sm);
  border-block-start: var(--rule-hair) solid var(--color-rule-strong);
}

.policy-nav__title {
  margin-block-end: var(--space-xs);
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
}

.policy-nav ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.policy-nav a {
  display: inline-flex;
  min-height: 2.25rem;
  align-items: center;
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  text-decoration: none;
  white-space: nowrap;
}

.policy-nav a:hover {
  color: var(--color-accent-strong);
  text-decoration: underline;
}

.policy-document {
  width: 100%;
  max-width: var(--max-policy);
}

.policy-document__scope {
  margin-block-end: var(--space-xl);
  color: var(--color-ink-2);
  font-size: var(--text-lead);
}

.policy-document section {
  padding-block: var(--space-xl);
  border-block-start: var(--rule-hair) solid var(--color-rule-strong);
  scroll-margin-block-start: var(--space-lg);
}

.policy-document section:last-child {
  padding-block-end: 0;
}

.policy-document h2 {
  margin-block-end: var(--space-md);
  font-size: var(--text-h3);
  letter-spacing: var(--tracking-heading);
  line-height: var(--line-heading);
}

.policy-document p,
.policy-document ul {
  margin-block-end: var(--space-md);
}

.policy-document li + li {
  margin-block-start: var(--space-2xs);
}

.policy-document a {
  color: var(--color-accent-strong);
  font-weight: 650;
}

.policy-document a[href^="mailto:"] {
  display: inline-block;
  white-space: nowrap;
}

/* Support */

.page-hero--support h1 {
  max-width: none;
}

.support-document {
  padding-block: var(--space-3xl);
}

.support-summary {
  border-block: var(--rule-hair) solid var(--color-rule-strong);
}

.support-summary__item,
.faq-item {
  display: grid;
  grid-template-columns: minmax(12rem, 4fr) minmax(0, 8fr);
  gap: var(--space-xl);
}

.support-summary__item {
  padding-block: var(--space-xl);
}

.support-summary__item + .support-summary__item {
  border-block-start: var(--rule-hair) solid var(--color-rule);
}

.support-summary h2,
.support-faq h2 {
  margin-block-end: 0;
  letter-spacing: var(--tracking-heading);
  line-height: var(--line-heading);
}

.support-summary h2 {
  font-size: var(--text-h3);
}

.support-summary p {
  max-width: var(--max-copy);
  margin-block-end: var(--space-sm);
}

.support-summary p:last-child,
.faq-item dd {
  margin-block-end: 0;
}

.support-email {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  color: var(--color-accent-strong);
  font-family: var(--font-display);
  font-size: clamp(1rem, 1rem + 0.65vw, 1.4rem);
  font-weight: 700;
  white-space: nowrap;
}

.support-note {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.support-faq {
  margin-block-start: var(--space-3xl);
}

.support-faq > h2 {
  margin-block-end: var(--space-xl);
  font-size: var(--text-h2);
}

.faq-list {
  margin-block-end: 0;
  padding: 0;
  border-block-start: var(--rule-hair) solid var(--color-rule-strong);
}

.faq-item {
  padding-block: var(--space-lg);
  border-block-end: var(--rule-hair) solid var(--color-rule-strong);
}

.faq-item dt {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 700;
  letter-spacing: var(--tracking-heading);
  line-height: var(--line-heading);
}

.faq-item dd {
  color: var(--color-ink-2);
}

.faq-item a {
  color: var(--color-accent-strong);
  font-weight: 650;
  white-space: nowrap;
}

/* Not found */

.not-found-document {
  max-width: var(--max-policy);
}

.not-found-section {
  padding-block: var(--space-xl);
  border-block-start: var(--rule-hair) solid var(--color-rule-strong);
  scroll-margin-block-start: var(--space-lg);
}

.not-found-section:last-child {
  border-block-end: var(--rule-hair) solid var(--color-rule-strong);
}

.not-found-section h2 {
  margin-block-end: var(--space-sm);
  font-size: var(--text-h3);
  letter-spacing: var(--tracking-heading);
  line-height: var(--line-heading);
}

.not-found-section p {
  max-width: var(--max-copy);
  margin-block-end: var(--space-md);
  color: var(--color-ink-2);
}

.not-found-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}

/* Footer */

.site-footer {
  padding-block: var(--space-2xl) var(--space-lg);
  background: var(--color-night-deep);
  color: var(--color-on-night);
}

.site-footer__statement {
  max-width: 24ch;
  margin-block-end: var(--space-xl);
  color: var(--color-on-night);
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.75rem);
  font-weight: 700;
  letter-spacing: var(--tracking-heading);
  line-height: 1.05;
  text-wrap: balance;
}

.site-footer__meta {
  display: grid;
  padding-block-start: var(--space-md);
  border-block-start: var(--rule-hair) solid var(--color-on-night-rule);
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: var(--space-lg);
}

.site-footer__name {
  font-family: var(--font-display);
  font-weight: 700;
  white-space: nowrap;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs) var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__links a {
  display: inline-flex;
  min-height: 2.25rem;
  align-items: center;
  color: var(--color-on-night-muted);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.site-footer__links a:where(:hover, [aria-current="page"]) {
  color: var(--color-on-night);
}

.site-footer__copyright {
  margin: 0;
  color: var(--color-on-night-muted);
  font-size: var(--text-xs);
  white-space: nowrap;
}

/* Responsive */

@media (min-width: 48rem) {
  .site-shell {
    width: min(calc(100% - (var(--space-lg) * 2)), var(--max-page));
  }
}

@media (max-width: 56rem) {
  .home-hero {
    min-height: auto;
    padding-block: var(--space-3xl) calc(var(--space-3xl) + var(--space-lg) + var(--space-2xs));
  }

  .home-hero__grid,
  .page-hero__grid,
  .modes-layout,
  .output-options {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-hero__grid,
  .page-hero__grid {
    min-height: auto;
    gap: var(--space-xl);
  }

  .home-hero__copy {
    max-width: 39rem;
  }

  .device-proof,
  .page-hero .device-frame {
    width: min(72vw, 20rem);
  }

  .section-intro--wide {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--space-sm);
  }

  .modes-layout .section-intro {
    position: static;
  }

  .workflow__body {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xs);
  }

  .policy-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
  }

  .policy-nav {
    position: static;
  }

  .policy-nav ol {
    columns: 2;
    column-gap: var(--space-md);
  }
}

@media (max-width: 48rem) {
  .section,
  .sample-section,
  .modes-section,
  .trust-section,
  .policy-shell,
  .support-document {
    padding-block: var(--space-2xl);
  }

  .support-summary__item,
  .faq-item {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-sm);
  }

  .sample-composition {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
  }

  .video-facade--primary,
  .video-facade--secondary,
  .video-facade--portrait {
    grid-column: 1;
    grid-row: auto;
  }

  .video-facade--portrait {
    width: min(68vw, 20rem);
    justify-self: center;
  }

  .trust-points,
  .mode-comparison__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .trust-points > div + div {
    border-block-start: var(--rule-hair) solid var(--color-on-night-rule);
    border-inline-start: 0;
  }

  .mode-comparison__grid {
    gap: var(--space-xl);
  }

  .site-footer__meta {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-sm);
  }

  .site-footer__links {
    justify-content: flex-start;
  }
}

@media (max-width: 36rem) {
  .home-hero__tagline {
    max-width: 16ch;
  }

  .hero-actions {
    align-items: stretch;
  }

  .availability {
    align-items: flex-start;
    flex-direction: column;
    gap: 0;
  }

  .mode-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .workflow__step {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xs);
  }

  .mode-facts > div,
  .output-options__list > div {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2xs);
  }

  .policy-nav ol {
    columns: 1;
  }
}

@media (hover: none) {
  .button-link:hover,
  .video-facade:has(.video-launch:hover) .video-facade__art {
    transform: none;
  }
}

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

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