/* tokens.css */
/* Design tokens — mirrored from the app's Sources/Design/Tokens.swift.
   Accent: PINE (#2F6B4F), chosen 2026-07-30. A cool ground makes the warm
   golden-hour photography on this page look lit rather than competing with it;
   the crimson it replaced read as promotional. The app's Tokens.swift carries
   the same value — keep the two in step.

   Note the semantic consequence: with a green brand, "keep" can no longer be a
   generic green or it would be indistinguishable from the accent. See --keep.
   Rule: no BRAND colour may be hardcoded below this file. Use the token, or an
   rgb(var(--*-rgb) / n%) variant of one. Plain `#fff` is allowed where it means
   paper or "text on a coloured ground" and carries no brand meaning. */
:root {
  /* Palette */
  --accent: #2f6b4f;
  --accent-pressed: #265741;
  --accent-deep: #17392a;
  --accent-lift: #4e9b76;
  --ink: #393336;
  --ink-soft: #5b5255;
  /* The app's --muted is #9B9799. On a screen you hold that is fine; on a web
     page it lands at 2.9:1, so the site uses a darker step of the same hue.
     Same story for --accent-text, --keep-text and --later-text: brand hues are
     kept for fills, and a darker sibling carries any text or meaningful icon. */
  --muted: #6f6a6c;
  --accent-text: #275a42;
  --keep-text: #275a42;
  --keep-strong: #2f6b4f;
  --discard-text: #a1432f;
  --later-text: #9a6800;
  --surface: #ecf2ee;
  --surface-alt: #e3efe8;
  --hairline: #d4d3d3;
  --card: #ffffff;
  --canvas: #ffffff;
  /* Keep is the brand; discard is a warm clay that cannot be mistaken for it. */
  --keep: #2f6b4f;
  --discard: #c0563f;
  --later: #f0a202;
  --on-accent: #ffffff;
  /* Tints used on the brand ground and in the device chrome. */
  --tint-blush: #dff0e5;
  --tint-error: #ffd9cd;
  --device-hi: #4a4245;
  --device-lo: #211d1f;
  --device-mid: #3a3437;
  --device-glass: #16171a;

  /* Channel triplets so alpha variants stop re-typing the hex. */
  --accent-rgb: 47 107 79;
  --keep-rgb: 47 107 79;
  --ink-rgb: 57 51 54;
  --hairline-rgb: 212 211 211;

  /* Alpha helpers for use on the brand ground */
  --white-08: rgba(255, 255, 255, 0.08);
  --white-14: rgba(255, 255, 255, 0.14);
  --white-22: rgba(255, 255, 255, 0.22);
  --white-70: rgba(255, 255, 255, 0.7);
  --white-86: rgba(255, 255, 255, 0.86);

  /* Type */
  --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fs-display: clamp(2.4rem, 1.5rem + 3.1vw, 3.9rem);
  --fs-h1: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem);
  --fs-h2: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem);
  --fs-h3: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
  --fs-lead: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.78rem;
  --lh-tight: 1.06;
  --lh-head: 1.16;
  --lh-body: 1.65;
  --track-eyebrow: 0.14em;

  /* Space */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --section-y: clamp(72px, 8vw, 128px);
  --gutter: clamp(20px, 4vw, 40px);
  --measure: 62ch;
  --container: 1180px;
  --container-narrow: 760px;

  /* Geometry */
  --r-pill: 999px;
  --r-card: 20px;
  --r-chip: 12px;
  --r-icon: 15px;
  --r-sheet: 28px;
  --r-photo: 24px;

  /* Elevation */
  --shadow-sm: 0 2px 8px rgba(57, 51, 54, 0.06);
  --shadow-card: 0 8px 18px rgba(57, 51, 54, 0.1);
  --shadow-lift: 0 18px 44px rgba(57, 51, 54, 0.16);
  --shadow-accent: 0 12px 30px rgba(47, 107, 79, 0.30);
  --ring: 0 0 0 3px rgba(47, 107, 79, 0.32);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out-back: cubic-bezier(0.34, 1.3, 0.64, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 520ms;

  /* Layers */
  --z-nav: 60;
  --z-banner: 70;
  --z-modal: 90;
}

/* Film grain used on every brand panel to kill gradient banding. */
:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

/* base.css */
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/Poppins-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/Poppins-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/Poppins-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/Poppins-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

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

/* Components set their own display, so [hidden] has to win outright. */
[hidden] {
  display: none !important;
}

html {
  /* One committed light brand ground — declared so a dark-OS visitor does not
     get UA-darkened range sliders and checkboxes on white cards. */
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

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

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--s-4);
  font-weight: 700;
  line-height: var(--lh-head);
  letter-spacing: -0.018em;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
}
h2 {
  font-size: var(--fs-h2);
}
h3 {
  font-size: var(--fs-h3);
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 var(--s-4);
  text-wrap: pretty;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--accent-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease);
}

a:hover {
  color: var(--accent-text);
}

figure {
  margin: 0;
}

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

ul,
ol {
  margin: 0 0 var(--s-4);
  padding-left: 1.2em;
}

li {
  margin-bottom: var(--s-2);
}

strong {
  font-weight: 600;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

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

.on-accent :focus-visible,
.hero :focus-visible {
  outline-color: #fff;
}

::selection {
  background: var(--accent);
  color: #fff;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% -120%;
  z-index: var(--z-modal);
  padding: var(--s-3) var(--s-5);
  background: var(--ink);
  color: #fff;
  border-radius: 0 0 var(--r-chip) var(--r-chip);
  text-decoration: none;
  transition: translate var(--dur) var(--ease);
}

.skip-link:focus {
  translate: -50% 0;
  color: #fff;
}

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

/* layout.css */
.container {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
}

.container--narrow {
  width: min(100% - var(--gutter) * 2, var(--container-narrow));
}

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section--tight {
  padding-block: clamp(48px, 5vw, 80px);
}

/* Two sections on the same ground leave a ~240px seam that reads as a
   rendering fault. Both sides must match — halving the top padding where the
   colour actually changes just puts a headline hard against the join. */
.section:not(.section--blush):not(.section--accent)
  + .section:not(.section--blush):not(.section--accent),
.section--blush + .section--blush,
.section--accent + .section--accent {
  padding-top: calc(var(--section-y) * 0.5);
}

.section--blush {
  background: var(--surface);
}

.section--accent {
  background:
    radial-gradient(95% 80% at 88% 0%, var(--accent) 0%, transparent 60%),
    linear-gradient(158deg, var(--accent-pressed) 0%, var(--accent-deep) 100%);
  color: var(--on-accent);
  isolation: isolate;
}

.section--accent::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.16;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: -1;
}

.section--accent h2,
.section--accent h3 {
  color: var(--on-accent);
}

.section--accent p {
  color: var(--white-86);
}

.section-head {
  max-width: 640px;
  margin-bottom: clamp(40px, 5vw, 64px);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--accent-text);
}

.eyebrow::before {
  content: '';
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.section-head--center .eyebrow::before {
  display: none;
}

.on-accent .eyebrow,
.section--accent .eyebrow {
  color: var(--white-86);
}

.lead {
  font-size: var(--fs-lead);
  color: var(--ink-soft);
  max-width: var(--measure);
}

.section--accent .lead {
  color: var(--white-86);
}

.section-head--center .lead {
  margin-inline: auto;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}

.split--wide-left {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}

/* components.css */
/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 52px;
  padding: 0 var(--s-6);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  box-shadow: var(--shadow-accent);
  transition:
    transform var(--dur-fast) var(--ease),
    box-shadow var(--dur) var(--ease),
    background var(--dur-fast) var(--ease);
}

.btn:hover {
  --btn-bg: var(--accent-pressed);
  color: var(--btn-fg);
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgb(var(--accent-rgb) / 34%);
}

.btn:active {
  transform: translateY(0);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--hairline);
}

.btn--ghost:hover {
  --btn-bg: transparent;
  --btn-fg: var(--accent);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}

.btn--on-accent {
  --btn-bg: #fff;
  --btn-fg: var(--accent);
  box-shadow: 0 14px 34px rgba(58, 2, 18, 0.28);
}

.btn--on-accent:hover {
  --btn-bg: #fff;
  --btn-fg: var(--accent-pressed);
}

.btn--outline-light {
  --btn-bg: transparent;
  --btn-fg: #fff;
  box-shadow: inset 0 0 0 1.5px var(--white-22);
}

.btn--outline-light:hover {
  --btn-bg: var(--white-08);
  --btn-fg: #fff;
  box-shadow: inset 0 0 0 1.5px var(--white-70);
}

.btn--sm {
  min-height: 42px;
  padding: 0 var(--s-5);
  font-size: var(--fs-small);
}

.btn--block {
  width: 100%;
}

/* Apple's badge has a fixed shape we are not allowed to restyle, so anything
   standing next to it takes the badge's geometry rather than the site's pill.
   Everywhere else the pill radius still applies. */
.hero__actions .btn {
  min-height: 58px;
  border-radius: 11px;
}

/* ---------- Store badge ---------- */
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 58px;
  padding: 0 22px 0 18px;
  border-radius: 11px;
  /* Apple's badge is black, not our ink — it is their asset, in their colour. */
  background: #000;
  color: #fff;
  text-decoration: none;
  box-shadow: var(--shadow-lift);
  transition:
    transform var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease);
}

.store-badge:hover {
  color: #fff;
  transform: translateY(-2px);
  background: #1a1a1a;
}

.store-badge__mark {
  width: 28px;
  height: 28px;
  flex: none;
  margin-top: -2px;
}

.store-badge__text {
  display: grid;
  line-height: 1.15;
  text-align: left;
}

.store-badge__text small {
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  opacity: 0.92;
}

.store-badge__text span {
  font-size: 1.28rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-top: -2px;
}

.store-badge--light {
  background: #fff;
  color: var(--ink);
}

.store-badge--light:hover {
  background: #fff;
  color: var(--ink);
}

/* ---------- Cards ---------- */
.card {
  position: relative;
  padding: clamp(20px, 2.4vw, 30px);
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  border: 1px solid rgb(var(--hairline-rgb) / 50%);
}

.card--flat {
  box-shadow: none;
  border-color: var(--hairline);
}

.card__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--s-4);
  border-radius: var(--r-icon);
  background: var(--surface-alt);
  color: var(--accent-text);
}

.card__icon svg {
  width: 26px;
  height: 26px;
}

.card h3 {
  margin-bottom: var(--s-2);
}

.card p {
  color: var(--ink-soft);
  font-size: 0.96rem;
}

/* ---------- Chips / pills ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--surface-alt);
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 500;
}

.chip svg {
  width: 16px;
  height: 16px;
  color: var(--accent-text);
}

.chip--light {
  background: var(--white-14);
  color: #fff;
  border: 1px solid var(--white-22);
}

.chip--light svg {
  color: #fff;
}

/* ---------- Device frame ---------- */
.device {
  position: relative;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1320 / 2868;
  padding: 1.8%;
  border-radius: 12.6% / 5.8%;
  background: linear-gradient(160deg, var(--device-hi) 0%, var(--device-lo) 45%, var(--device-mid) 100%);
  box-shadow:
    var(--shadow-lift),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

/* Volume and side buttons — two slivers are the difference between a phone and
   a rounded rectangle. */
.device::before,
.device::after {
  content: '';
  position: absolute;
  width: 1.5px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.22);
}

.device::before {
  left: -1px;
  top: 22%;
  height: 20%;
}

.device::after {
  right: -1px;
  top: 26%;
  height: 14%;
}

.device__screen {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  border-radius: 11.2% / 5.2%;
  background: #fff;
  /* A recessed edge — without it the screenshot looks pasted onto the frame. */
  box-shadow:
    inset 0 0 0 1.5px rgba(0, 0, 0, 0.55),
    inset 0 0 0 2.5px rgba(255, 255, 255, 0.1);
}

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

.device__notch {
  position: absolute;
  top: 1.6%;
  left: 50%;
  translate: -50% 0;
  width: 30%;
  height: 2.6%;
  border-radius: var(--r-pill);
  background: var(--device-glass);
  z-index: 2;
}

/* ---------- Accordion ---------- */
.accordion {
  border-top: 1px solid var(--hairline);
}

.accordion__item {
  border-bottom: 1px solid var(--hairline);
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  width: 100%;
  padding: var(--s-5) 0;
  background: none;
  border: 0;
  text-align: left;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease);
}

.accordion__trigger:hover {
  color: var(--accent-text);
}

.accordion__sign {
  position: relative;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition:
    background var(--dur) var(--ease),
    rotate var(--dur) var(--ease);
}

.accordion__sign::before,
.accordion__sign::after {
  content: '';
  position: absolute;
  inset: 50% 30%;
  border-top: 2px solid var(--accent);
  translate: 0 -1px;
}

.accordion__sign::after {
  rotate: 90deg;
  transition: opacity var(--dur) var(--ease);
}

.accordion__trigger[aria-expanded='true'] .accordion__sign {
  background: var(--accent);
  rotate: 180deg;
}

.accordion__trigger[aria-expanded='true'] .accordion__sign::before,
.accordion__trigger[aria-expanded='true'] .accordion__sign::after {
  border-color: #fff;
}

.accordion__trigger[aria-expanded='true'] .accordion__sign::after {
  opacity: 0;
}

.accordion__panel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--dur) var(--ease);
}

/* Only collapse once JS is there to open it again — otherwise a no-JS visitor
   gets an FAQ that cannot be read. */
.js .accordion__panel {
  grid-template-rows: 0fr;
}

.js .accordion__panel[data-open='true'] {
  grid-template-rows: 1fr;
}

.accordion__panel > div {
  overflow: hidden;
}

.accordion__panel p {
  max-width: var(--measure);
  padding-bottom: var(--s-5);
  color: var(--ink-soft);
}


/* nav.css */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-nav);
  padding-block: var(--s-4);
  transition:
    background var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    padding var(--dur) var(--ease);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  color: #fff;
  font-weight: 700;
  font-size: 1.06rem;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.nav__brand img {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__links li {
  margin: 0;
}

.nav__links a {
  position: relative;
  color: var(--white-86);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  padding-block: 6px;
}

.nav__links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  scale: 0 1;
  transform-origin: left;
  transition: scale var(--dur) var(--ease);
}

.nav__links a:hover,
.nav__links a[aria-current='true'] {
  color: #fff;
}

.nav__links a:hover::after,
.nav__links a[aria-current='true']::after {
  scale: 1 1;
}

.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--white-14);
  color: #fff;
}

.nav__toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 4px auto;
  border-radius: 2px;
  background: currentColor;
  transition:
    translate var(--dur) var(--ease),
    rotate var(--dur) var(--ease),
    opacity var(--dur-fast) var(--ease);
}

.nav__toggle[aria-expanded='true'] span:nth-child(1) {
  translate: 0 6px;
  rotate: 45deg;
}
.nav__toggle[aria-expanded='true'] span:nth-child(2) {
  opacity: 0;
}
.nav__toggle[aria-expanded='true'] span:nth-child(3) {
  translate: 0 -6px;
  rotate: -45deg;
}

/* Scrolled / inner-page state */
.nav.is-solid {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 var(--hairline);
}

.nav.is-solid .nav__brand {
  color: var(--ink);
}

.nav.is-solid .nav__links a {
  color: var(--ink-soft);
}

.nav.is-solid .nav__links a:hover,
.nav.is-solid .nav__links a[aria-current='true'] {
  color: var(--accent);
}

.nav.is-solid .nav__toggle {
  background: var(--surface-alt);
  color: var(--ink);
}

/* Mobile drawer */
.nav__drawer {
  display: none;
}

@media (max-width: 960px) {
  .nav__links,
  .nav__cta {
    display: none;
  }

  .nav__toggle {
    display: block;
  }

  .nav__drawer {
    display: grid;
    position: fixed;
    inset: 76px var(--gutter) auto;
    z-index: var(--z-nav);
    gap: var(--s-2);
    padding: var(--s-5);
    border-radius: var(--r-sheet);
    background: #fff;
    box-shadow: var(--shadow-lift);
    opacity: 0;
    translate: 0 -12px;
    /* visibility, not just pointer-events: a closed drawer must leave the tab
       order too, or a keyboard user hits eight invisible stops. */
    visibility: hidden;
    transition:
      opacity var(--dur) var(--ease),
      translate var(--dur) var(--ease),
      visibility 0s linear var(--dur);
  }

  .nav__drawer[data-open='true'] {
    opacity: 1;
    translate: 0 0;
    visibility: visible;
    transition-delay: 0s;
  }

  .nav__drawer a {
    padding: var(--s-3) var(--s-2);
    color: var(--ink);
    font-weight: 500;
    text-decoration: none;
    border-radius: 10px;
  }

  .nav__drawer a:hover {
    background: var(--surface);
    color: var(--accent);
  }

  .nav__drawer .btn {
    margin-top: var(--s-2);
  }
}

/* hero.css */
.hero {
  position: relative;
  isolation: isolate;
  padding-top: clamp(128px, 15vh, 176px);
  padding-bottom: clamp(72px, 9vw, 120px);
  overflow: hidden;
  /* The lighter lift is confined to the top right, behind the device, where no
     text sits. Everything the copy occupies is pulled toward --accent-deep so
     white body text clears 4.5:1 rather than the 3.3:1 the flat accent gave. */
  background:
    radial-gradient(70% 55% at 84% 4%, var(--accent-lift) 0%, transparent 62%),
    radial-gradient(125% 115% at -5% 80%, var(--accent-deep) 0%, transparent 72%),
    linear-gradient(160deg, var(--accent) 0%, var(--accent-pressed) 42%, var(--accent-deep) 100%);
  color: #fff;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--grain);
  opacity: 0.15;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Faint scattered photo corners — the "loose pile" motif, drawn not imported. */
.hero__scatter {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* Real photographs, dropped like a pile of prints — the thing the headline is
   about, rather than four empty outlines. */
.hero__scatter i {
  position: absolute;
  display: block;
  width: 150px;
  aspect-ratio: 3 / 4;
  padding: 7px 7px 26px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 40px rgba(58, 2, 18, 0.32);
}

.hero__scatter img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
  opacity: 0.92;
}

.hero__scatter i:nth-child(1) {
  top: 8%;
  left: -5%;
  width: 168px;
  rotate: -13deg;
}
.hero__scatter i:nth-child(2) {
  top: 58%;
  left: -2%;
  width: 132px;
  rotate: 8deg;
}
.hero__scatter i:nth-child(3) {
  top: 4%;
  right: 3%;
  width: 178px;
  rotate: 11deg;
}
/* Both bottom prints bleed past the section edge. Stopping inside it reads as a
   clipping bug, and the trust strip is content that decoration must not sit on. */
.hero__scatter i:nth-child(4) {
  bottom: -26%;
  right: 16%;
  width: 146px;
  rotate: -7deg;
}
.hero__scatter i:nth-child(5) {
  bottom: -18%;
  left: 22%;
  width: 118px;
  rotate: 16deg;
}

/* Behind the copy they would fight the headline, so they sit further back. */
.hero__scatter i:nth-child(2),
.hero__scatter i:nth-child(5) {
  opacity: 0.6;
}

/* Areas rather than DOM order: the copy reads title → lead → CTA on a phone,
   while the device still sits in the right column on a desktop. */
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  grid-template-areas:
    'title stage'
    'copy  stage';
  grid-template-rows: auto auto;
  column-gap: clamp(32px, 5vw, 72px);
  align-content: center;
}

.hero__title {
  grid-area: title;
}
.hero__copy {
  grid-area: copy;
}
.hero__stage {
  grid-area: stage;
}

.hero h1 {
  max-width: 19ch;
  font-size: var(--fs-display);
  letter-spacing: -0.03em;
  margin-bottom: var(--s-5);
  text-wrap: balance;
}

.hero h1 em {
  display: block;
  font-style: normal;
  color: var(--tint-blush);
}

.hero__lead {
  max-width: 46ch;
  font-size: var(--fs-lead);
  color: var(--white-86);
  margin-bottom: var(--s-4);
}

.hero__lead strong {
  color: var(--on-accent);
  font-weight: 600;
}

.hero__lead--second {
  margin-bottom: var(--s-6);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  font-size: var(--fs-small);
  color: var(--white-86);
}

.hero__meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.hero__meta svg {
  width: 15px;
  height: 15px;
}

/* Device + floating proof chips */
.hero__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 480px;
}

.hero__stage .device {
  max-width: 300px;
  rotate: -3deg;
  animation: hero-float 8s var(--ease) infinite;
}

.hero__chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
  box-shadow: var(--shadow-lift);
  font-size: 0.85rem;
  line-height: 1.25;
  white-space: nowrap;
}

.hero__chip b {
  display: block;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
}

.hero__chip small {
  color: var(--muted);
  font-size: 0.72rem;
}

.hero__chip svg {
  width: 26px;
  height: 26px;
  flex: none;
}

.hero__chip--freed {
  top: 14%;
  right: -2%;
  animation: hero-float 8s var(--ease) -2.6s infinite;
}

.hero__chip--freed svg {
  color: var(--keep);
}

.hero__chip--streak {
  bottom: 16%;
  left: -4%;
  animation: hero-float 8s var(--ease) -5.3s infinite;
}

.hero__chip--streak svg {
  color: var(--later);
}

@keyframes hero-float {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -12px;
  }
}

/* Trust strip riding the bottom of the hero */
.hero__trust {
  margin-top: clamp(48px, 6vw, 72px);
  padding-top: var(--s-5);
  border-top: 1px solid var(--white-22);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) clamp(20px, 4vw, 56px);
  align-items: center;
}

.hero__trust p {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  color: var(--white-86);
  font-size: 0.9rem;
  font-weight: 500;
}

.hero__trust svg {
  width: 18px;
  height: 18px;
  flex: none;
  opacity: 0.9;
}

/* sections.css */
/* ---------- Steps ---------- */
.steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
}

.step {
  position: relative;
  counter-increment: step;
  padding-top: var(--s-6);
}

.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent-text);
}

.step::after {
  content: '';
  position: absolute;
  top: 8px;
  left: 34px;
  right: -20px;
  height: 1px;
  background: linear-gradient(90deg, var(--hairline), transparent);
}

.step:last-child::after {
  display: none;
}

.step h3 {
  margin-bottom: var(--s-2);
}

.step p {
  color: var(--ink-soft);
  max-width: 34ch;
}

/* ---------- Full-bleed photograph ----------
   The one place on the page where a photo is the argument rather than a
   thumbnail. Text sits in the dark left third; the scrim is graded so the
   headline clears 4.5:1 wherever the image lands. */
.fullbleed {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: clamp(420px, 56vw, 640px);
  overflow: hidden;
  background: var(--ink);
}

.fullbleed img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 50%;
}

/* Positioned, not just a grid item: the image above is absolutely positioned,
   so a static pseudo-element paints *underneath* it and the scrim does nothing. */
.fullbleed::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      100deg,
      rgb(var(--ink-rgb) / 94%) 0%,
      rgb(var(--ink-rgb) / 86%) 34%,
      rgb(var(--ink-rgb) / 62%) 62%,
      rgb(var(--ink-rgb) / 30%) 88%
    ),
    linear-gradient(0deg, rgb(var(--ink-rgb) / 45%), rgb(var(--ink-rgb) / 18%) 55%);
}

/* The only person in the garden frame is at the far left of the plate; hold
   that edge through the cover-crop at every width. */
#why img {
  object-position: 8% 50%;
}

.fullbleed__body {
  position: relative;
  grid-area: 1 / 1;
  z-index: 2;
  display: grid;
  align-content: center;
  padding-block: var(--s-8);
}

.fullbleed__body > div {
  max-width: 46ch;
  color: var(--on-accent);
}

.fullbleed h2 {
  color: var(--on-accent);
  font-size: clamp(1.9rem, 1.1rem + 2.9vw, 4rem);
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.fullbleed p {
  color: var(--white-86);
  font-size: var(--fs-lead);
  margin: 0;
}

.fullbleed .eyebrow {
  color: var(--on-accent);
}

/* The date the photograph carries — set in type rather than burned into the
   raster, so it scales, translates and can be read out. */
.fullbleed__stamp {
  margin-top: var(--s-5);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--tint-blush);
}

/* ---------- Feature grid ---------- */
.features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

.feature {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.4vw, 30px);
  border-radius: var(--r-card);
  background: var(--card);
  border: 1px solid var(--hairline);
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.feature:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--shadow-lift);
}

.feature__icon {
  background: #fff;
}

.feature__icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin-bottom: var(--s-4);
  border-radius: var(--r-icon);
  background: var(--surface-alt);
  color: var(--accent-text);
}

.feature__icon svg {
  width: 24px;
  height: 24px;
}

.feature h3 {
  margin-bottom: var(--s-2);
  font-size: 1.08rem;
}

.feature p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* One card carries the idea the whole product rests on, so it gets the room.
   Two columns of a three-column grid keeps the rows square. */
.feature--wide {
  grid-column: span 2;
  background: var(--surface-alt);
  border-color: transparent;
}

.feature.feature--wide h3 {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
  line-height: 1.15;
  max-width: 24ch;
}

.feature.feature--wide p {
  font-size: 1.05rem;
  max-width: 46ch;
}

.feature--wide .feature__icon {
  background: #fff;
}

/* The rest of the capability list, demoted to one line — it belongs on the page
   but it is not why anyone installs this. */
.features__note {
  max-width: 62ch;
  margin: clamp(28px, 3vw, 40px) auto 0;
  text-align: center;
  font-size: 0.94rem;
  color: var(--muted);
}

/* ---------- Screens rail ---------- */
.screens {
  display: flex;
  gap: clamp(20px, 3vw, 40px);
  overflow-x: auto;
  /* Break out of the container to the full viewport, so the rail reads as a
     rail and physically separates the two card grids around it. */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding: var(--s-2) max(var(--gutter), calc(50vw - var(--container) / 2)) var(--s-7);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* `safe` so that when the rail does overflow the first item is still
     reachable rather than clipped off the start. */
  justify-content: safe center;
}

.screens::-webkit-scrollbar {
  display: none;
}

.screens__item {
  flex: 0 0 auto;
  width: min(72vw, 264px);
  scroll-snap-align: center;
  text-align: center;
}

.screens__item .device {
  margin-inline: auto;
  margin-bottom: var(--s-4);
  transition: transform var(--dur) var(--ease);
}

.screens__item:hover .device {
  transform: translateY(-8px);
}

.screens__item p {
  margin: 0;
  min-height: 2.6em;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-soft);
}

.rail-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
}

.rail-btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-card);
  transition:
    background var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

.rail-btn:hover:not(:disabled) {
  background: var(--accent);
  color: #fff;
}

.rail-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.rail-btn svg {
  width: 18px;
  height: 18px;
}

.rail-dots {
  display: flex;
  gap: 7px;
}

/* 8px dots inside a 26px hit area — WCAG 2.2 target size without the visual
   weight of a 26px dot. */
.rail-dots button {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  background: none;
  display: grid;
  place-items: center;
}

.rail-dots button::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--hairline);
  transition:
    width var(--dur) var(--ease),
    background var(--dur) var(--ease);
}

.rail-dots button[aria-current='true']::before {
  width: 22px;
  background: var(--accent);
}

/* ---------- Stat band ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 40px);
  text-align: center;
}

.stat b {
  display: block;
  font-size: clamp(2.6rem, 1.4rem + 3.6vw, 4.2rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Direct child only — the counter <span> lives inside <b> and must not pick up
   the label rule, which is what shrank the numbers to caption size. */
.stat > span {
  display: block;
  margin-top: var(--s-3);
  font-size: 0.9rem;
  color: var(--on-accent);
  max-width: 22ch;
  margin-inline: auto;
}

.stat b span {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  display: inline;
  margin: 0;
}

/* ---------- Promise list (privacy) ---------- */
.promises {
  display: grid;
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.promises li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--s-4);
  margin: 0;
  align-items: start;
}

.promises svg {
  width: 26px;
  height: 26px;
  color: var(--keep-text);
  margin-top: 2px;
}

.promises b {
  display: block;
  margin-bottom: 2px;
}

.promises p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* Permissions: set on the ground with hairline rows rather than inside yet
   another bordered card — the page already has enough of those. */
.permissions h3 {
  padding-bottom: var(--s-4);
  border-bottom: 2px solid var(--ink);
  font-size: 1.05rem;
}

.permissions dl {
  margin: 0;
}

.permissions dl > div {
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--hairline);
}

.permissions dt {
  font-weight: 600;
  margin-bottom: 2px;
}

.permissions dd {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.94rem;
}

/* ---------- Roadmap ---------- */
.roadmap {
  display: grid;
  gap: var(--s-4);
}

.roadmap__item {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: var(--s-5);
  align-items: baseline;
  padding: var(--s-5) 0;
  border-top: 1px solid var(--hairline);
}

.roadmap__item:last-child {
  border-bottom: 1px solid var(--hairline);
}

.roadmap__when {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.roadmap__item p {
  margin: var(--s-1) 0 0;
  color: var(--ink-soft);
  max-width: var(--measure);
}

/* A short note in a human voice. No card, no icon, no border — the only thing
   marking it is a rule and a hanging quote mark. */
.note {
  position: relative;
  padding-left: clamp(20px, 4vw, 56px);
  border-left: 2px solid var(--accent);
}

.note p {
  font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.15rem);
  color: var(--ink);
  max-width: 60ch;
}

.note__sign {
  margin-top: var(--s-5);
  font-size: var(--fs-eyebrow) !important;
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--muted) !important;
}

/* ---------- Download band ---------- */
.download {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.qr-card {
  display: grid;
  justify-items: center;
  gap: var(--s-4);
  padding: var(--s-6);
  border-radius: var(--r-sheet);
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
  box-shadow: var(--shadow-lift);
  text-align: center;
}

.qr-card img {
  width: 168px;
  height: 168px;
  border-radius: 12px;
}

.qr-card p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.copy-link {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  padding: 10px 10px 10px 16px;
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* Pre-launch stand-in for the QR card: what the visitor actually wants to know
   is what happens after they hand over an address. */
.next-card {
  padding: clamp(24px, 3vw, 34px);
  border-radius: var(--r-sheet);
  background: var(--white-14);
  border: 1px solid var(--white-22);
  backdrop-filter: blur(12px);
}

.next-card h3 {
  margin-bottom: var(--s-4);
  color: #fff;
  font-size: 1.1rem;
}

.next-card ol {
  margin: 0 0 var(--s-4);
  padding-left: 1.2em;
  color: #fff;
}

.next-card li {
  margin-bottom: var(--s-3);
  font-size: 0.94rem;
}

.next-card li::marker {
  color: rgba(255, 255, 255, 0.6);
  font-weight: 700;
}

.next-card p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--white-86);
}

.next-card a {
  color: #fff;
}

.copy-link code {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: inherit;
}

/* demo.css */
/* ---------- Try-it swipe deck ---------- */
.try {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  grid-template-areas:
    'deck copy'
    'deck after';
  gap: clamp(32px, 5vw, 72px);
  align-content: center;
}

.try > :nth-child(1) {
  grid-area: deck;
  align-self: center;
}
.try > :nth-child(2) {
  grid-area: copy;
  align-self: end;
}
.try__after {
  grid-area: after;
  align-self: start;
}

.deck {
  position: relative;
  width: min(100%, 380px);
  margin-inline: auto;
  aspect-ratio: 3 / 4;
}

.deck__card {
  position: absolute;
  inset: 0;
  border-radius: var(--r-photo);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-lift);
  cursor: grab;
  user-select: none;
  will-change: transform;
  /* pan-y, not none: horizontal drags reach us (keep / tin) while the browser
     keeps vertical scrolling. Owning the vertical axis too would make the deck
     — which is most of a phone screen — a place the page cannot be scrolled
     past. "Later" stays available on its own button, which is how the copy
     describes it on touch. */
  touch-action: pan-y;
  transition:
    transform var(--dur) var(--ease),
    opacity var(--dur) var(--ease);
}

.deck__card[data-dragging='true'] {
  cursor: grabbing;
  transition: none;
}

.deck__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.deck__date {
  position: absolute;
  inset: auto 0 0;
  padding: 48px var(--s-5) var(--s-5);
  background: linear-gradient(transparent, rgba(20, 15, 17, 0.72));
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  pointer-events: none;
}

.deck__stamp {
  position: absolute;
  top: var(--s-5);
  padding: 8px 16px;
  border-radius: var(--r-pill);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
  pointer-events: none;
}

.deck__stamp--keep {
  right: var(--s-5);
  background: var(--keep);
  rotate: 8deg;
}

.deck__stamp--tin {
  left: var(--s-5);
  background: var(--discard);
  rotate: -8deg;
}

.deck__empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: var(--s-3);
  padding: var(--s-6);
  border-radius: var(--r-photo);
  border: 1.5px dashed var(--hairline);
  background: var(--card);
  text-align: center;
}

.deck__empty b {
  font-size: 1.3rem;
}

.deck__empty p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* Without JS the buttons cannot do anything, so they are not offered. */
.deck-controls,
.deck-hint {
  display: none;
}

.js .deck-hint {
  display: block;
}

.deck-nojs {
  margin-top: var(--s-5);
  text-align: center;
  font-size: var(--fs-small);
  color: var(--muted);
}

.js .deck-nojs {
  display: none;
}

.js .deck-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-6);
}

.deck-btn {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border: 0;
  border-radius: 50%;
  background: var(--card);
  box-shadow: var(--shadow-card);
  color: var(--ink);
  transition:
    transform var(--dur-fast) var(--ease-out-back),
    box-shadow var(--dur) var(--ease);
}

.deck-btn:hover:not(:disabled) {
  transform: scale(1.08);
  box-shadow: var(--shadow-lift);
}

.deck-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.deck-btn svg {
  width: 26px;
  height: 26px;
}

.deck-btn--tin {
  background: var(--discard);
  color: #fff;
  box-shadow: 0 12px 30px rgba(192, 86, 63, 0.3);
}

.deck-btn--keep {
  background: var(--keep-strong);
  color: #fff;
  box-shadow: 0 12px 30px rgb(var(--keep-rgb) / 30%);
}

.deck-btn--later {
  width: 50px;
  height: 50px;
  color: var(--later-text);
}

.deck-btn--later svg {
  width: 22px;
  height: 22px;
}

@media (hover: none) and (pointer: coarse) {
  .deck-hint__keys {
    display: none;
  }
}

.deck-hint {
  margin-top: var(--s-4);
  text-align: center;
  font-size: var(--fs-small);
  color: var(--muted);
}

/* One line, not three bordered boxes: at rest those boxes read "0 / 0 / 0"
   at the exact midpoint of the page, which looks broken rather than empty. */
.tally {
  margin: var(--s-5) 0 var(--s-6);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--hairline);
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.tally b {
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.try__capture {
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: var(--r-card);
  background: var(--card);
  border: 1px solid var(--hairline);
}

.try__capture > p {
  font-size: 0.98rem;
  color: var(--ink-soft);
  margin-bottom: var(--s-4);
}

.form--inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-3);
  align-items: start;
}

.form--inline .form__status,
.form--inline .hp {
  grid-column: 1 / -1;
}

.form--inline .btn {
  white-space: nowrap;
}

/* ---------- Storage estimator ---------- */
.estimator {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding: clamp(26px, 3.4vw, 44px);
  border-radius: var(--r-sheet);
  background: var(--card);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--hairline);
}

.field {
  margin-bottom: var(--s-5);
}

.field:last-child {
  margin-bottom: 0;
}

.field__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
  font-size: 0.92rem;
  font-weight: 500;
}

.field__value {
  font-weight: 700;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}

input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--surface);
  outline-offset: 6px;
}

input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  border: 4px solid #fff;
  box-shadow: var(--shadow-accent);
  cursor: grab;
}

input[type='range']::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  border: 4px solid #fff;
  cursor: grab;
}

.estimate {
  display: grid;
  gap: var(--s-2);
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--r-card);
  background:
    radial-gradient(100% 80% at 85% 0%, var(--accent) 0%, transparent 62%),
    linear-gradient(155deg, var(--accent-pressed) 0%, var(--accent-deep) 100%);
  color: #fff;
  text-align: center;
}

.estimate b {
  font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}

/* Direct child only — see the same note on .stat > span. */
.estimate > span {
  font-size: 0.95rem;
  color: var(--on-accent);
}

.estimate b span {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

.estimate small {
  display: block;
  margin-top: var(--s-3);
  font-size: 0.78rem;
  color: var(--white-86);
  line-height: 1.55;
}

/* pricing.css */
.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  /* stretch, not start — otherwise .plan .btn { margin-top: auto } has no
     column height to push against and the three CTAs land at three heights. */
  align-items: stretch;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.6vw, 34px);
  border-radius: var(--r-card);
  background: var(--card);
  border: 1px solid var(--hairline);
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.plan:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}

.plan--featured {
  border-color: transparent;
  box-shadow:
    0 0 0 2px var(--accent),
    var(--shadow-lift);
}

.plan__flag {
  position: absolute;
  top: -13px;
  left: 50%;
  translate: -50% 0;
  padding: 5px 14px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.plan__name {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s-3);
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
}

.plan__price b {
  font-size: clamp(2rem, 1.5rem + 1.4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

.plan__price span {
  font-size: 0.9rem;
  color: var(--muted);
}

.plan__note {
  margin-bottom: var(--s-5);
  font-size: 0.88rem;
  color: var(--ink-soft);
  min-height: 2.4em;
}

.plan__list {
  margin: 0 0 var(--s-6);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s-3);
}

.plan__list li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--s-3);
  margin: 0;
  font-size: 0.94rem;
  color: var(--ink-soft);
  align-items: start;
}

.plan__list svg {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  color: var(--keep-text);
}

.plan__list li[data-off] svg {
  color: var(--muted);
}

.plan__list li[data-off] {
  color: var(--muted);
}

.plan .btn {
  margin-top: auto;
}

.plan__footnote {
  margin-top: var(--s-3);
  font-size: 0.76rem;
  color: var(--muted);
  text-align: center;
}

/* Never-paywalled promise sits directly under the plans, on purpose. */
.pledge {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--s-5);
  align-items: center;
  margin-top: clamp(32px, 4vw, 48px);
  padding: clamp(22px, 2.6vw, 32px);
  border-radius: var(--r-card);
  background: var(--surface-alt);
}

.pledge__mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  color: var(--accent-text);
}

.pledge__mark svg {
  width: 28px;
  height: 28px;
}

.pledge b {
  display: block;
  margin-bottom: 2px;
}

.pledge p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
  max-width: var(--measure);
}

/* forms.css */
.form {
  display: grid;
  gap: var(--s-4);
}

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

.form label {
  display: block;
  margin-bottom: var(--s-2);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink);
}

.form input[type='text'],
.form input[type='email'],
.form select,
.form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  transition:
    border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}

.form textarea {
  min-height: 148px;
  resize: vertical;
}

.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

.form input[aria-invalid='true'],
.form textarea[aria-invalid='true'] {
  border-color: var(--accent);
}

.form__error {
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--accent-text);
  min-height: 1em;
}

/* The waitlist form sits on the crimson band, so its chrome has to invert. */
.section--accent .form label {
  color: #fff;
}

.section--accent .form__error {
  color: var(--tint-error);
}

.section--accent .form input {
  border-color: transparent;
}

.section--accent .form input:focus {
  box-shadow: 0 0 0 3px var(--white-70);
}

.section--accent .form__status[data-state='error'] {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.section--accent .form__status[data-state='ok'] {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.section--accent .form__status[data-state='sending'] {
  background: rgba(255, 255, 255, 0.12);
  color: var(--white-86);
}

.form__consent {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--s-3);
  align-items: start;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.form__consent input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--accent);
}

.form__consent[data-invalid] {
  color: var(--accent-text);
}

.form__consent[data-invalid] input {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.form__status {
  padding: var(--s-4) var(--s-5);
  border-radius: 14px;
  font-size: 0.92rem;
  display: none;
}

.form__status[data-state='ok'] {
  display: block;
  background: rgb(var(--keep-rgb) / 12%);
  color: #1d7d4f;
}

.form__status[data-state='error'] {
  display: block;
  background: var(--surface-alt);
  color: var(--accent-pressed);
}

.form__status[data-state='sending'] {
  display: block;
  background: var(--surface);
  color: var(--ink-soft);
}

/* Honeypot — never shown, never focusable by tab order. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Cookie / analytics consent ---------- */
.consent {
  position: fixed;
  z-index: var(--z-banner);
  inset: auto var(--gutter) var(--gutter) auto;
  width: min(400px, calc(100vw - var(--gutter) * 2));
  padding: var(--s-5);
  border-radius: var(--r-sheet);
  background: #fff;
  box-shadow: var(--shadow-lift);
  border: 1px solid var(--hairline);
  translate: 0 140%;
  visibility: hidden;
  transition:
    translate var(--dur-slow) var(--ease),
    visibility 0s linear var(--dur-slow);
}

.consent[data-open='true'] {
  translate: 0 0;
  visibility: visible;
  transition-delay: 0s;
}

.consent p {
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.consent__actions {
  display: flex;
  gap: var(--s-3);
}

.consent__actions .btn {
  flex: 1;
}

/* ---------- Smart install bar (mobile) ---------- */
.installbar {
  position: fixed;
  z-index: var(--z-banner);
  inset: auto 0 0;
  display: none;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--gutter);
  padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  box-shadow: 0 -1px 0 var(--hairline);
  translate: 0 110%;
  visibility: hidden;
  transition:
    translate var(--dur-slow) var(--ease),
    visibility 0s linear var(--dur-slow);
}

.installbar[data-open='true'] {
  translate: 0 0;
  visibility: visible;
  transition-delay: 0s;
}

.installbar img {
  width: 42px;
  height: 42px;
  border-radius: 11px;
}

.installbar div {
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}

.installbar b {
  display: block;
  font-size: 0.92rem;
}

.installbar small {
  color: var(--muted);
  font-size: 0.75rem;
}

.installbar__close {
  border: 0;
  background: none;
  color: var(--muted);
  padding: var(--s-2);
  line-height: 0;
}

.installbar__close svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 960px) {
  .installbar {
    display: flex;
  }
}

/* prose.css */
/* Legal + support pages: inner pages get a light nav and a document layout. */
.page-head {
  padding-top: clamp(112px, 14vh, 156px);
  padding-bottom: clamp(32px, 5vw, 56px);
  background: var(--surface);
}

.page-head h1 {
  margin-bottom: var(--s-3);
}

.page-head p {
  color: var(--ink-soft);
  max-width: var(--measure);
}

.page-head .eyebrow {
  color: var(--accent-text);
}

.prose {
  max-width: 70ch;
}

.prose h2 {
  margin-top: clamp(40px, 5vw, 56px);
  font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.6rem);
}

.prose h2:first-child {
  margin-top: 0;
}

.prose h3 {
  margin-top: var(--s-6);
  font-size: 1.05rem;
}

.prose p,
.prose li {
  color: var(--ink-soft);
}

.prose ul {
  padding-left: 1.1em;
}

.prose li::marker {
  color: var(--accent-text);
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--s-5);
  font-size: 0.92rem;
}

.prose th,
.prose td {
  padding: var(--s-3) var(--s-4);
  text-align: left;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}

.prose th {
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
}

.prose td {
  color: var(--ink-soft);
}

.table-scroll {
  overflow-x: auto;
}

.callout {
  padding: var(--s-5);
  margin-bottom: var(--s-5);
  border-radius: var(--r-card);
  background: var(--surface-alt);
  border-left: 3px solid var(--accent);
}

.callout p {
  margin: 0;
  color: var(--ink);
  font-size: 0.95rem;
}

.toc {
  position: sticky;
  top: 110px;
  align-self: start;
  padding: var(--s-5);
  border-radius: var(--r-card);
  background: var(--surface);
  font-size: 0.9rem;
}

.toc b {
  display: block;
  margin-bottom: var(--s-3);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s-2);
}

.toc li {
  margin: 0;
}

.toc a {
  color: var(--ink-soft);
  text-decoration: none;
}

.toc a:hover {
  color: var(--accent-text);
}

.doc-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 72ch);
  justify-content: center;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

/* Press kit asset grid */
.assets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--s-4);
}

.asset {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--r-card);
  border: 1px solid var(--hairline);
  background: var(--card);
  text-align: center;
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-decoration: none;
}

.asset:hover {
  border-color: var(--accent);
  color: var(--accent-text);
}

.asset__thumb {
  display: grid;
  place-items: center;
  padding: var(--s-4);
  border-radius: var(--r-chip);
  background: var(--surface);
  min-height: 120px;
}

.asset__thumb img {
  max-height: 120px;
  width: auto;
  border-radius: 8px;
}

/* 404 */
.notfound {
  display: grid;
  place-items: center;
  min-height: 72vh;
  text-align: center;
  padding-top: 100px;
}

.notfound__code {
  font-size: clamp(4rem, 2rem + 9vw, 8rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--accent);
}

/* footer.css */
.footer {
  padding-block: clamp(56px, 7vw, 88px) var(--s-6);
  background: var(--ink);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.92rem;
}

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 0.9fr));
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(32px, 4vw, 56px);
}

.footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  margin-bottom: var(--s-4);
}

.footer__brand img {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

.footer__blurb {
  max-width: 34ch;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.9rem;
}

.footer__heading {
  margin-bottom: var(--s-4);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s-3);
}

.footer li {
  margin: 0;
}

.footer a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
}

.footer a:hover {
  color: #fff;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-3) var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.68);
}

.footer__bottom p {
  margin: 0;
}

.footer__legalnote {
  max-width: 62ch;
  margin-top: var(--s-3);
  font-size: 0.76rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
}

/* motion.css */
/* Scroll-reveal. Elements start hidden only when JS is present, so a
   no-JS visitor gets the full page immediately. */
.js [data-reveal] {
  opacity: 0;
  translate: 0 18px;
  transition:
    opacity var(--dur-slow) var(--ease),
    translate var(--dur-slow) var(--ease);
}

.js [data-reveal].is-in {
  opacity: 1;
  translate: 0 0;
}

.js [data-reveal-stagger] > * {
  opacity: 0;
  translate: 0 18px;
  transition:
    opacity var(--dur-slow) var(--ease),
    translate var(--dur-slow) var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}

.js [data-reveal-stagger].is-in > * {
  opacity: 1;
  translate: 0 0;
}

/* Progress bar for the reading position on long pages. */
.scrollbar-progress {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: var(--z-nav);
  height: 3px;
  width: 100%;
  transform-origin: left;
  scale: var(--progress, 0) 1;
  background: var(--accent);
  pointer-events: none;
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .js [data-reveal],
  .js [data-reveal-stagger] > * {
    opacity: 1;
    translate: none;
  }

  .hero__stage .device,
  .hero__chip {
    animation: none;
  }
}

/* responsive.css */
@media (max-width: 1080px) {
  .footer__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* Below this the stage is too narrow for the chips to sit beside the phone
   rather than on top of its controls. The trust strip carries the same facts. */
@media (max-width: 1100px) {
  .hero__chip {
    display: none;
  }

  /* Both strips wrap 3-then-1 at this width, twice, 40px apart. A two-column
     grid turns two accidents into one rhythm. */
  .hero__trust {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* At two columns the last card is orphaned; let it take the row. Scoped so it
   can never leak into the one-column layout, where a span-2 on a one-column
   grid makes the browser invent a second column and the section collapses. */
@media (min-width: 641px) and (max-width: 960px) {
  .feature:last-child:nth-child(even) {
    grid-column: span 2;
  }
}

@media (max-width: 960px) {
  .hero__inner,
  .split,
  .split--wide-left,
  .try,
  .download,
  .estimator {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__inner {
    gap: var(--s-8);
  }

  /* Single column, and the claim comes first — a marketing hero that opens with
     a phone mockup pushes the value proposition and the CTA below the fold. */
  .hero__inner {
    grid-template-areas:
      'title'
      'copy'
      'stage';
    grid-template-rows: auto;
  }

  .hero__stage {
    min-height: 0;
    margin-top: var(--s-6);
  }

  /* Explain the demo, then show it, then show what it did. The counters are the
     payoff and must sit below the deck, not above it where a swipe scrolls them
     off the top of the screen. */
  .try {
    display: flex;
    flex-direction: column;
    gap: var(--s-6);
  }

  .try > :nth-child(1) {
    order: 2;
  }
  .try > :nth-child(2) {
    order: 1;
  }
  .try__after {
    order: 3;
  }

  /* The install bar appears from here down, so the space it needs does too. */
  body[data-installbar='true'] .footer {
    padding-bottom: 96px;
  }

  body[data-installbar='true'] .consent {
    bottom: calc(var(--gutter) + 76px + env(safe-area-inset-bottom));
  }

  .hero__stage .device {
    max-width: 216px;
    rotate: 0deg;
  }

  .hero__chip--freed {
    top: 2%;
    right: 0;
  }

  .hero__chip--streak {
    bottom: 2%;
    left: 0;
  }

  .hero__scatter {
    display: none;
  }

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

  .toc {
    position: static;
  }

  /* .steps stays at three: two columns always orphans the third. */
  .features,
  .plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feature--wide {
    grid-column: span 2;
  }



  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-6);
  }

  .step::after {
    display: none;
  }
}

@media (max-width: 960px) {
  /* The horizontal scrim is sized for a desktop copy column that stops a third
     of the way across; from here down the paragraph is full width and runs
     straight into the clear band, so the scrim has to go vertical with it. */
  .fullbleed::after {
    background: linear-gradient(
      0deg,
      rgb(var(--ink-rgb) / 88%) 0%,
      rgb(var(--ink-rgb) / 74%) 55%,
      rgb(var(--ink-rgb) / 38%) 100%
    );
  }

  .fullbleed p {
    color: #fff;
  }

}

@media (max-width: 640px) {
  :root {
    --fs-lead: 1.02rem;
  }

  .features,
  .steps,
  .plans,
  .form__row,
  .form--inline {
    grid-template-columns: minmax(0, 1fr);
  }

  .feature--wide,
  .feature:last-child:nth-child(even) {
    grid-column: auto;
  }

  /* Let the next screenshot peek so the rail reads as a rail. */
  .screens__item {
    width: min(78vw, 264px);
  }

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

  .hero__actions .btn,
  .hero__actions .store-badge {
    width: 100%;
  }

  .hero__actions .store-badge {
    justify-content: center;
  }

  .roadmap__item {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-2);
  }

  .pledge {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-4);
  }

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

}

@media (prefers-contrast: more) {
  .card,
  .feature,
  .plan {
    border-color: var(--ink-soft);
  }

  .hero__lead,
  .section--accent p,
  .stat span {
    color: #fff;
  }
}

@media print {
  .nav,
  .installbar,
  .consent,
  .scrollbar-progress,
  .hero__scatter,
  .device,
  .deck,
  .deck-controls,
  .fullbleed picture,
  .fullbleed img,
  .rail-controls {
    display: none !important;
  }

  .fullbleed {
    min-height: 0;
    background: none;
  }

  .fullbleed::after {
    display: none;
  }

  .fullbleed h2,
  .fullbleed p,
  .fullbleed .eyebrow,
  .fullbleed__stamp {
    color: var(--ink) !important;
  }

  .hero::after,
  .section--accent::after,
  .hero__chip {
    display: none !important;
  }

  .hero,
  .section--accent {
    background: none !important;
    color: var(--ink) !important;
  }
}