/* Focus Garage — one stylesheet, no build step.
   Tokens mirror FGColor.swift in the app repo, so the site and the app cannot
   drift into two different greens.

   The layout follows the shape a product page for one app tends to take: an
   oversized headline beside a real screen, then one section per idea with the
   screen that proves it, alternating sides. What is ours is everything inside
   the frame — the palette, the type, the pixel art, and the screenshots, which
   come straight out of the simulator rather than a mockup kit. */

@font-face {
  font-family: "Departure Mono";
  src: url("../fonts/DepartureMono-Regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Surfaces — straight from FGColor */
  --shell: #1a1a1a;
  --card: #2a2a2a;
  --recessed: #222222;
  --deep: #141414;

  /* Text */
  --text: #ffffff;
  --text-secondary: #a8a8a8;
  --text-tertiary: #9a9a9a;

  /* Lines */
  --hairline: rgba(255, 255, 255, 0.07);
  --hairline-strong: rgba(255, 255, 255, 0.12);

  /* Brand */
  --brand: #4a7c59;
  --brand-text: #7fb08e;
  --amber: #e67e22;
  --amber-ambient: #f5a04b;
  --brand-glow: rgba(74, 124, 89, 0.3);
  --brand-glow-soft: rgba(127, 176, 142, 0.12);
  --amber-glow: rgba(230, 126, 34, 0.26);
  --amber-glow-soft: rgba(245, 160, 75, 0.11);

  /* The garage never changes theme — the diorama is dark, and so is this. */
  color-scheme: dark;

  --measure: 68ch;
  --page: 1120px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-panel: 28px;

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --mono: "Departure Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Organic, never linear. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

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

body {
  margin: 0;
  background: var(--shell);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  overflow-x: clip;
}

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

/* Every sprite in this app is pixel art. Smoothing turns it into mush. */
.pixel {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

a {
  color: var(--brand-text);
  text-decoration-color: rgba(127, 176, 142, 0.35);
  text-underline-offset: 3px;
  transition: color 0.25s var(--ease), text-decoration-color 0.25s var(--ease);
}

a:hover {
  color: #9fc7ac;
  text-decoration-color: currentColor;
}

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

.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: 24px;
}

/* The lamp of the app icon, hanging over the top of the page. */
.glow {
  position: absolute;
  inset: -20% 0 auto 0;
  height: 620px;
  pointer-events: none;
  background: radial-gradient(
      52% 46% at 50% 34%,
      rgba(245, 160, 75, 0.16) 0%,
      rgba(245, 160, 75, 0) 68%
    ),
    radial-gradient(
      38% 34% at 68% 12%,
      rgba(74, 124, 89, 0.14) 0%,
      rgba(74, 124, 89, 0) 70%
    );
  z-index: 0;
}

.overline {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber-ambient);
  margin: 0;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  padding-block: 18px 6px;
  background: transparent;
  transition: padding 0.35s var(--ease);
}

.site-header.is-scrolled {
  padding-block: 10px 6px;
}

.header-shell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  min-height: 64px;
  padding: 7px 9px 7px 13px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.68);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  backdrop-filter: blur(20px) saturate(130%);
  transition: background-color 0.35s var(--ease),
    border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.site-header.is-scrolled .header-shell {
  background: rgba(20, 20, 20, 0.9);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.38);
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.2vw, 30px);
}

.site-nav a {
  position: relative;
  padding-block: 10px;
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.site-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 6px;
  left: 0;
  height: 1px;
  background: var(--amber-ambient);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s var(--ease);
}

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

.site-nav a:hover::after,
.site-nav a:focus-visible::after {
  transform: scaleX(1);
}

.mobile-menu {
  display: none;
}

.site-header .wrap {
  padding-inline: 20px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text);
}

.brand img {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 1px solid var(--hairline-strong);
}

.brand > span:not(.splash) {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.header-note {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  min-width: 0;
}

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

.language-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-tertiary);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.language-switch a {
  padding: 8px 2px;
  color: var(--text-tertiary);
  text-decoration: none;
}

.language-switch a:hover,
.language-switch a:focus-visible,
.language-switch a[aria-current="page"] {
  color: var(--text);
}

.language-switch a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--amber-ambient);
  text-underline-offset: 4px;
}

.header-cta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-secondary);
}

.site-header .splash-brand {
  --tile: 44px;
}

#por-que,
#foco,
#construcao,
#revelacao,
#colecao,
#iphone,
#progresso,
#how-it-works,
#focus,
#build,
#reveal,
#collection,
#progress {
  scroll-margin-top: 104px;
}

/* ---------- The phone ----------
   Apple's official iPhone 17 Pro artwork provides the hardware silhouette and
   the exact screen mask. Screenshots stay separate so responsive sources and
   localized captures can share one calibrated device component. */

.device {
  position: relative;
  width: min(300px, 78%);
  aspect-ratio: 1350 / 2760;
  padding: 0;
  border-radius: 0;
  background: url("../img/apple-iphone-17-pro-deep-blue.png") center / 100% 100% no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 34px 45px rgba(0, 0, 0, 0.48));
}

.device-screen {
  position: absolute;
  top: 2.5%;
  left: 5.333333%;
  width: 89.333333%;
  height: 95%;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  -webkit-mask-image: url("../img/apple-iphone-17-pro-screen-mask.png");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: url("../img/apple-iphone-17-pro-screen-mask.png");
  mask-mode: alpha;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

.device-screen picture {
  display: block;
  width: 100%;
  height: 100%;
}

.device-screen img {
  width: 100%;
  height: 100%;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

.device-lg {
  width: min(330px, 84%);
}

/* ---------- The splash ----------
   The app's launch screen, in CSS, from the same four pieces the app animates.
   The icon is never redrawn: `splash-base` is the tile with an empty opening,
   `splash-slat` is one shutter blade stacked eight times, `splash-lights` is
   the glow that switches on. Reimplementing the icon's gradient and its four
   inner shadows by hand would diverge from the PNG the App Store gets.

   Every measurement is the handoff's, in points over a 164pt tile: `--u` is
   one of those points, so the whole assembly scales by changing `--tile`. */

.splash {
  --tile: 56px;
  --u: calc(var(--tile) / 164);
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: var(--tile);
  height: var(--tile);
}

/* Slightly larger than the 48px the static icon used: at 48 the blades are
   3.8px tall and the door reads as texture instead of a door. */
.splash-brand {
  --tile: 56px;
}

.splash-base {
  position: absolute;
  display: block;
  inset: 0;
  border-radius: calc(39.42 * var(--u));
  background-image: url("../img/splash-base.png");
  background-image: image-set(
    url("../img/splash-base.webp") type("image/webp"),
    url("../img/splash-base.png") type("image/png")
  );
  background-size: 100% 100%;
}

/* The opening is what makes the blades disappear *into the roll* instead of
   sliding over the frame. Inset 23.65 sideways and 28.38 vertically, radius
   9.46 — the handoff's numbers, and the reason the last frame lands on the
   icon exactly. */
.splash-opening {
  position: absolute;
  display: block;
  left: calc(23.65 * var(--u));
  right: calc(23.65 * var(--u));
  top: calc(28.38 * var(--u));
  height: calc(107.24 * var(--u));
  border-radius: calc(9.46 * var(--u));
  overflow: hidden;
}

.splash-lights {
  position: absolute;
  display: block;
  left: calc(4.73 * var(--u));
  right: calc(4.73 * var(--u));
  bottom: calc(4.73 * var(--u));
  height: calc(27 * var(--u));
  opacity: 0;
  background-image: url("../img/splash-lights.png");
  background-image: image-set(
    url("../img/splash-lights.webp") type("image/webp"),
    url("../img/splash-lights.png") type("image/png")
  );
  background-size: 100% 100%;
}

/* The amber bloom lives *inside* the opening on purpose: the green frame takes
   no light, because the icon at rest has none on its border and the splash has
   to end identical to it. */
.splash-bloom {
  position: absolute;
  display: block;
  inset: 0;
  opacity: 0;
  background: radial-gradient(
    68% 52% at 50% 88%,
    rgba(245, 160, 75, 0.34) 0%,
    rgba(245, 160, 75, 0) 70%
  );
}

/* Eight blades, 4.73 apart, hanging from 4.73 inside the opening — the same
   slack the handoff gives them on every side. Eight of them are 137.11 tall
   against an opening of 107.24, so the shut door overflows the bottom and the
   clip does the rest. Closed is `translateY(0)`; open is -72, and that number
   is what makes the last frame land on the icon: four blades left showing,
   with the light band under them. */
.splash-door {
  position: absolute;
  left: calc(4.73 * var(--u));
  right: calc(4.73 * var(--u));
  top: calc(4.73 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(4.73 * var(--u));
  transform: translateY(0);
}

.splash-door i {
  display: block;
  height: calc(13 * var(--u));
  background-image: url("../img/splash-slat.png");
  background-image: image-set(
    url("../img/splash-slat.webp") type("image/webp"),
    url("../img/splash-slat.png") type("image/png")
  );
  background-size: 100% 100%;
}

/* The end of the timeline, as classes rather than inline styles: the door has
   to stay where it belongs when the window is resized, and `-72 * var(--u)`
   follows the tile while a pixel offset would not. */
.splash-door.is-open {
  transform: translateY(calc(-72 * var(--u)));
}

.splash-lights.is-lit,
.splash-bloom.is-lit {
  opacity: 1;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  z-index: 1;
  padding-block: 56px 72px;
  display: grid;
  gap: 48px;
  grid-template-columns: 1fr;
  align-items: center;
}

.hero-showroom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding-block: 64px 48px;
  text-align: center;
}

.hero-showroom .hero-copy {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 880px;
  min-height: 0;
  margin-top: 0;
}

.hero h1 {
  /* The one thing the page says first, at the size that admits it. */
  font-size: clamp(40px, 7.6vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 18px 0 0;
  text-wrap: balance;
}

.hero-showroom h1 {
  max-width: 13ch;
  margin-inline: auto;
  font-size: clamp(46px, 7.2vw, 82px);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.hero .lede {
  color: var(--text-secondary);
  font-size: 19px;
  max-width: 40ch;
  margin: 22px 0 0;
}

.hero-showroom .lede {
  max-width: 42ch;
  margin-inline: auto;
}

.hero-art {
  display: flex;
  justify-content: center;
  position: relative;
}

.hero-showroom .hero-art {
  width: 100%;
  margin-top: 0;
  rotate: none;
}

/* The halo behind the phone, so it does not float on flat black. */
.hero-art::before {
  content: "";
  position: absolute;
  inset: 6% -14% 2% -14%;
  border-radius: 50%;
  background: radial-gradient(
    50% 46% at 50% 50%,
    rgba(245, 160, 75, 0.18) 0%,
    rgba(74, 124, 89, 0.1) 45%,
    rgba(0, 0, 0, 0) 72%
  );
  pointer-events: none;
}

.hero-showroom .hero-art::before {
  inset: 8% 6% 0;
  background: radial-gradient(
    50% 44% at 50% 48%,
    rgba(74, 124, 89, 0.24) 0%,
    rgba(245, 160, 75, 0.11) 46%,
    rgba(0, 0, 0, 0) 74%
  );
}

.showroom-fan {
  position: relative;
  isolation: isolate;
  width: min(760px, 94vw);
  height: clamp(430px, 58vw, 650px);
  margin-top: 22px;
}

/* A low pool of light connects the fan, while each phone keeps its own
   narrative source. The field has no edge, so this remains open composition
   rather than becoming a colored hero panel. */
.showroom-fan::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -6% -10% -12%;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 34% 58% at 18% 54%,
      var(--amber-glow) 0%,
      var(--amber-glow-soft) 40%,
      transparent 74%
    ),
    radial-gradient(
      ellipse 38% 64% at 50% 52%,
      var(--brand-glow) 0%,
      var(--brand-glow-soft) 42%,
      transparent 74%
    ),
    radial-gradient(
      ellipse 31% 58% at 76% 52%,
      rgba(74, 124, 89, 0.22) 0%,
      transparent 74%
    ),
    radial-gradient(
      ellipse 34% 58% at 84% 62%,
      rgba(230, 126, 34, 0.22) 0%,
      transparent 74%
    ),
    radial-gradient(
      ellipse 76% 34% at 50% 86%,
      rgba(245, 160, 75, 0.12) 0%,
      rgba(74, 124, 89, 0.1) 42%,
      transparent 78%
    );
  filter: blur(16px);
}

.showroom-device {
  position: absolute;
  top: 34px;
  width: min(250px, 34vw);
  transform-origin: 50% 100%;
}

.showroom-device .device {
  width: 100%;
  max-width: none;
}

.showroom-device-left {
  left: 4%;
  transform: rotate(-9deg);
}

.showroom-device-center {
  top: 0;
  left: 50%;
  z-index: 2;
  width: min(300px, 41vw);
  transform: translateX(-50%);
}

.showroom-device-right {
  right: 4%;
  transform: rotate(9deg);
}

.hero-showroom.is-breathing .showroom-device-center {
  animation: showroom-breathe-center 6s ease-in-out infinite;
}

.hero-showroom.is-breathing .showroom-device-left,
.hero-showroom.is-breathing .showroom-device-right {
  animation: showroom-breathe-side 6s ease-in-out infinite;
}

@keyframes showroom-breathe-center {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}

@keyframes showroom-breathe-side {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -3px; }
}

.hero-trust {
  margin: 14px 0 0;
  color: var(--text-tertiary);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

/* ---------- Call to action ---------- */

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 34px;
}

.cta-row-centered {
  justify-content: center;
  margin-top: 30px;
}

.app-store-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 10px;
  border-radius: 16px;
  line-height: 0;
  text-decoration: none;
}

.app-store-badge {
  width: 144px;
  min-height: 40px;
  height: auto;
}

.store-text-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 10px 17px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: #f2f3ef;
  color: #171817;
  font-weight: 700;
  box-shadow: none;
}

.store-text-link:hover,
.store-text-link:focus-visible {
  color: #171817;
  background: #ffffff;
}

/* The copy is centred on the **screen**, not on the row beside a 732px phone.
   The box it centres inside starts under the header and is pulled up by the
   header's own height, so the middle it finds is the viewport's middle.

   Height-gated: on a short window that pull would put the headline behind the
   header, and normal flow is the better answer there. */
@media (min-width: 900px) and (min-height: 720px) {
  .hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100svh - 84px);
    /* A fraction of the header's height, not the whole of it: dead centre reads
       high next to a phone that runs to the bottom of the fold, so the block
       sits ~50px below the geometric middle — which is where the eye expects
       the middle to be.

       Only the copy has this margin, so only the copy moves: the phone is
       positioned from `.hero-art` and stays at 330px wide, in the same column,
       at the same top, whatever this number becomes. */
    margin-top: -10px;
  }
}

/* ---------- Story and feature sections ----------
   One idea, one screen, and the screen is on the other side of the one before
   it. Everything alternates from `.feature-flipped`, so adding a section is a
   copy-paste and a class. */

.story-problem {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding-block: 88px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  text-align: center;
}

.story-problem-copy {
  max-width: 680px;
  margin-inline: auto;
}

.story-problem h2 {
  max-width: 14ch;
  margin: 0;
  margin-inline: auto;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.story-problem-copy > p {
  max-width: 44ch;
  margin: 20px auto 0;
  color: var(--text-secondary);
  font-size: 18px;
}

.product-intro {
  position: relative;
  z-index: 1;
  isolation: isolate;
  padding-block: 118px 104px;
  text-align: center;
}

/* The solution enters as light rather than as another surface. The problem
   section above stays quiet; this first green field starts the product story. */
.product-intro::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 10% 8% -4%;
  pointer-events: none;
  background: radial-gradient(
    ellipse 56% 60% at 50% 62%,
    var(--brand-glow-soft) 0%,
    rgba(74, 124, 89, 0.05) 44%,
    transparent 76%
  );
  filter: blur(12px);
}

.product-intro h2 {
  max-width: 17ch;
  margin: 16px auto 0;
  font-size: clamp(36px, 5.4vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.product-intro > p:not(.overline) {
  max-width: 55ch;
  margin: 22px auto 0;
  color: var(--text-secondary);
  font-size: 18px;
}

.feature {
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: grid;
  gap: 36px;
  grid-template-columns: 1fr;
  align-items: center;
  padding-block: 72px;
  border-top: 1px solid var(--hairline);
}

/* One ambient source per chapter. These fields remain transparent and
   unframed: they light the negative space without turning the section into a
   card. */
.feature-focus::before,
.feature-build::before,
.feature-reveal::before,
.feature-collection::before,
.feature-iphone::before,
.feature-progress::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -6% -16%;
  pointer-events: none;
  filter: blur(16px);
}

.feature-focus::before {
  background: radial-gradient(
    ellipse 42% 58% at 75% 52%,
    var(--brand-glow) 0%,
    var(--brand-glow-soft) 38%,
    transparent 74%
  );
}

.feature-build::before {
  background:
    radial-gradient(
      ellipse 34% 50% at 18% 48%,
      var(--brand-glow-soft) 0%,
      transparent 72%
    ),
    radial-gradient(
      ellipse 42% 58% at 34% 56%,
      var(--amber-glow) 0%,
      var(--amber-glow-soft) 38%,
      transparent 74%
    );
}

.feature-reveal::before {
  background: radial-gradient(
    ellipse 42% 58% at 75% 52%,
    var(--amber-glow) 0%,
    var(--amber-glow-soft) 38%,
    transparent 74%
  );
}

.feature-collection::before {
  background:
    radial-gradient(
      ellipse 36% 52% at 22% 48%,
      var(--brand-glow-soft) 0%,
      transparent 72%
    ),
    radial-gradient(
      ellipse 42% 58% at 39% 56%,
      var(--amber-glow) 0%,
      var(--amber-glow-soft) 38%,
      transparent 74%
    );
}

.feature-iphone::before {
  background:
    radial-gradient(
      ellipse 42% 58% at 32% 52%,
      var(--brand-glow) 0%,
      var(--brand-glow-soft) 40%,
      transparent 74%
    ),
    radial-gradient(
      ellipse 38% 52% at 70% 58%,
      var(--amber-glow) 0%,
      var(--amber-glow-soft) 38%,
      transparent 74%
    );
}

.feature-progress::before {
  background:
    radial-gradient(
      ellipse 38% 54% at 62% 48%,
      var(--brand-glow) 0%,
      var(--brand-glow-soft) 40%,
      transparent 74%
    ),
    radial-gradient(
      ellipse 34% 46% at 78% 58%,
      var(--amber-glow-soft) 0%,
      transparent 72%
    );
}

.feature h2,
.closing h2 {
  font-size: clamp(28px, 4.2vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 14px 0 0;
  text-wrap: balance;
}

/* `:not(.overline)` because the overline is a `<p>` too, and a descendant
   selector outranks the single class: without this the section labels lost
   their amber to the body colour, and picked up a paragraph's margin with it. */
.feature-copy > p:not(.overline) {
  color: var(--text-secondary);
  margin: 18px 0 0;
  max-width: 46ch;
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
  display: grid;
  gap: 12px;
}

.feature-list li {
  position: relative;
  padding-left: 26px;
  color: var(--text-secondary);
  font-size: 16px;
}

/* The dot is the app's own: a headlight in the dark. */
.feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 10px rgba(74, 124, 89, 0.7);
}

.feature-art {
  display: flex;
  justify-content: center;
  position: relative;
}

.feature-art::before {
  content: "";
  position: absolute;
  inset: 10% -8% 6% -8%;
  border-radius: 50%;
  background: radial-gradient(
    50% 44% at 50% 50%,
    rgba(74, 124, 89, 0.16) 0%,
    rgba(0, 0, 0, 0) 70%
  );
  pointer-events: none;
  filter: blur(8px);
}

.feature-focus .feature-art::before {
  background: radial-gradient(
    52% 46% at 50% 50%,
    rgba(74, 124, 89, 0.3) 0%,
    rgba(127, 176, 142, 0.1) 46%,
    transparent 72%
  );
}

.feature-build .feature-art::before {
  background:
    radial-gradient(
      44% 42% at 42% 48%,
      rgba(74, 124, 89, 0.2) 0%,
      transparent 72%
    ),
    radial-gradient(
      48% 44% at 59% 54%,
      rgba(230, 126, 34, 0.24) 0%,
      transparent 72%
    );
}

.feature-reveal .feature-art::before {
  background: radial-gradient(
    52% 46% at 50% 50%,
    rgba(230, 126, 34, 0.28) 0%,
    rgba(245, 160, 75, 0.1) 46%,
    transparent 72%
  );
}

.feature-collection .feature-art::before {
  background:
    radial-gradient(
      44% 42% at 40% 48%,
      rgba(74, 124, 89, 0.22) 0%,
      transparent 72%
    ),
    radial-gradient(
      48% 44% at 61% 54%,
      rgba(230, 126, 34, 0.24) 0%,
      transparent 72%
    );
}

.feature-progress .feature-art::before {
  background:
    radial-gradient(
      50% 44% at 48% 48%,
      rgba(74, 124, 89, 0.28) 0%,
      rgba(127, 176, 142, 0.1) 48%,
      transparent 72%
    ),
    radial-gradient(
      40% 38% at 58% 60%,
      rgba(230, 126, 34, 0.12) 0%,
      transparent 72%
    );
}

/* ---------- Paired product chapters ---------- */

.feature-pair {
  position: relative;
  z-index: 1;
  isolation: isolate;
  padding-block: 104px;
  border-top: 1px solid var(--hairline);
  text-align: center;
}

.feature-pair-copy {
  max-width: 720px;
  margin-inline: auto;
}

.feature-pair h2,
.access h2 {
  max-width: 18ch;
  margin: 14px auto 0;
  font-size: clamp(30px, 4.5vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.feature-pair-copy > p:not(.overline) {
  max-width: 58ch;
  margin: 18px auto 0;
  color: var(--text-secondary);
}

.feature-pair-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(28px, 6vw, 72px);
  width: min(780px, 100%);
  margin: 56px auto 0;
}

.feature-pair-item {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
}

.feature-pair-item .device {
  width: min(230px, 78%);
}

.feature-pair-item h3 {
  margin: 24px 0 0;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.feature-pair-item > p {
  max-width: 30ch;
  margin: 8px auto 0;
  color: var(--text-secondary);
  font-size: 15px;
}

.section-lede {
  color: var(--text-secondary);
  margin: 14px auto 0;
  max-width: 52ch;
}

/* ---------- Access ---------- */

.access {
  position: relative;
  z-index: 1;
  isolation: isolate;
  padding-block: 88px;
  border-top: 1px solid var(--hairline);
  text-align: center;
}

.access::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 8% 10%;
  background: radial-gradient(
    ellipse 62% 68% at 50% 50%,
    rgba(74, 124, 89, 0.16) 0%,
    rgba(245, 160, 75, 0.07) 44%,
    transparent 76%
  );
  filter: blur(18px);
  pointer-events: none;
}

.access .section-lede {
  max-width: 62ch;
  margin-top: 20px;
  font-size: 17px;
}

.access-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 860px;
  margin: 32px auto 0;
  padding: 0;
  list-style: none;
}

.access-points li {
  position: relative;
  display: grid;
  min-height: 84px;
  place-items: center;
  padding: 18px 18px 18px 34px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  background: rgba(42, 42, 42, 0.72);
  color: var(--text-secondary);
  font-size: 15px;
}

.access-points li::before {
  content: "";
  position: absolute;
  left: 17px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber-ambient);
  box-shadow: 0 0 12px var(--amber-glow);
}

/* The number counts up to itself when the section arrives. It is in the markup
   at its final value, so this only reserves the width the animation needs. */
.step-count {
  display: inline-block;
  min-width: 2ch;
  transform-origin: left center;
}

/* ---------- About ---------- */

.about {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 24px;
  padding-block: 88px;
  border-top: 1px solid var(--hairline);
}

.about-copy {
  max-width: 760px;
}

.about h2 {
  margin: 0 0 22px;
  max-width: 680px;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.about-copy p {
  margin: 0;
  color: var(--text-secondary);
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.65;
}

.about-copy p + p {
  margin-top: 18px;
}

/* ---------- Trust ----------
   Three claims, no paragraph. Each one is either true of the app today or it
   does not belong on the page. */

.trust {
  position: relative;
  z-index: 1;
  padding-block: 64px;
  border-top: 1px solid var(--hairline);
}

.trust ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}

.trust li {
  position: relative;
  padding: 22px 0 0;
  border-top: 1px solid var(--hairline-strong);
  transition: border-color 0.35s var(--ease);
}

.trust li:hover {
  border-color: rgba(74, 124, 89, 0.55);
}

.trust-label {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-text);
  margin-bottom: 10px;
}

.trust p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 16px;
}

/* ---------- Closing ---------- */

.closing {
  position: relative;
  z-index: 1;
  isolation: isolate;
  padding-block: 76px 92px;
  border-top: 1px solid var(--hairline);
  text-align: center;
}

.closing::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -20% -18% -38%;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 46% 62% at 35% 54%,
      rgba(74, 124, 89, 0.24) 0%,
      var(--brand-glow-soft) 40%,
      transparent 74%
    ),
    radial-gradient(
      ellipse 46% 62% at 65% 56%,
      rgba(230, 126, 34, 0.22) 0%,
      var(--amber-glow-soft) 40%,
      transparent 74%
    );
  filter: blur(20px);
}

.closing h2 {
  max-width: 20ch;
  margin-inline: auto;
}

.closing-note {
  margin: 18px 0 0;
  color: var(--text-tertiary);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------- Long-form pages ---------- */

.doc {
  position: relative;
  z-index: 1;
  padding-block: 44px 88px;
  max-width: var(--measure);
}

.doc h1 {
  font-size: clamp(30px, 5vw, 42px);
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin: 12px 0 8px;
}

.doc h2 {
  font-size: 21px;
  letter-spacing: -0.01em;
  margin: 44px 0 10px;
}

.doc h3 {
  font-size: 17px;
  margin: 26px 0 8px;
}

.doc p,
.doc li {
  color: var(--text-secondary);
}

.doc li {
  margin-bottom: 8px;
}

.doc strong {
  color: var(--text);
  font-weight: 600;
}

.updated {
  color: var(--text-tertiary);
  font-size: 14px;
  margin: 0;
  font-family: var(--mono);
}

/* A claim worth not burying: what the app does not do. */
.callout {
  background: var(--recessed);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin: 28px 0;
}

.callout p {
  margin: 0;
}

/* ---------- Footer ---------- */

.site-footer {
  position: relative;
  z-index: 1;
  isolation: isolate;
  border-top: 1px solid var(--hairline);
  padding-block: 34px 52px;
  color: var(--text-tertiary);
  font-size: 14px;
}

.site-footer::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -70px 0 auto;
  height: 190px;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 38% 100% at 38% 0%,
      rgba(74, 124, 89, 0.1) 0%,
      transparent 74%
    ),
    radial-gradient(
      ellipse 38% 100% at 62% 0%,
      rgba(230, 126, 34, 0.08) 0%,
      transparent 74%
    );
}

.footer-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

.footer-group {
  min-width: 0;
}

.site-footer .footer-label {
  margin: 0 0 10px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-footer .footer-handle {
  margin: 0 0 12px;
  color: var(--text-tertiary);
  font-size: 13px;
}

.footer-social-links,
.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
}

.footer-social-link {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.footer-social-link svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.footer-social-link,
.footer-email,
.footer-legal-links a {
  color: var(--text-tertiary);
  transition: color 180ms ease;
}

.footer-social-link:hover,
.footer-email:hover,
.footer-legal-links a:hover,
.footer-social-link:focus-visible,
.footer-email:focus-visible,
.footer-legal-links a:focus-visible {
  color: var(--brand);
}

.footer-social-link:focus-visible,
.footer-email:focus-visible,
.footer-legal-links a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
  border-radius: 2px;
}

.site-footer .footer-copyright {
  margin: 30px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  font-size: 13px;
}

.site-footer .footer-trademark {
  max-width: 62ch;
  margin: 30px 0 0;
  color: var(--text-tertiary);
  font-size: 12px;
}

/* ---------- Motion ----------
   Elements start hidden only when JS is there to reveal them. Without the
   `js` class on <html> the page renders fully — a broken CDN must not blank
   the site — and that class is set by an inline script in <head>, so the
   hidden state exists before the first paint rather than being applied to
   something already on screen.

   Section content owns both ends of its transition in CSS. The section itself
   stays still so its large blurred ambient layer does not get rerasterized on
   every animation frame. */

.js .js-reveal > * {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 700ms var(--ease),
    transform 700ms var(--ease);
}

.js .js-reveal.is-revealed > * {
  opacity: 1;
  transform: translateY(0);
}

.js [data-motion="hero"] > *,
.js [data-motion="stage"],
.js .splash,
.js .brand > span:not(.splash) {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .js .js-reveal > *,
  .js [data-motion="hero"] > *,
  .js [data-motion="stage"],
  .js .splash,
  .js .brand > span:not(.splash) {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .showroom-fan {
    transform: none !important;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 760px) {
  .site-header {
    padding-block: 12px 6px;
  }

  .site-header .wrap {
    padding-inline: 12px;
  }

  .header-shell {
    position: relative;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    min-height: 60px;
    padding: 7px;
  }

  .site-nav {
    display: none;
  }

  .header-actions > .language-switch {
    display: none;
  }

  .mobile-menu {
    position: static;
    display: block;
    order: -1;
  }

  .mobile-menu summary {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 14px;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.045);
    cursor: pointer;
    list-style: none;
  }

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

  .mobile-menu summary:focus-visible {
    outline: 2px solid var(--amber-ambient);
    outline-offset: 2px;
  }

  .mobile-menu-icon,
  .mobile-menu-icon::before,
  .mobile-menu-icon::after {
    width: 16px;
    height: 1.5px;
    border-radius: 999px;
    background: currentColor;
    transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
  }

  .mobile-menu-icon {
    position: relative;
  }

  .mobile-menu-icon::before,
  .mobile-menu-icon::after {
    content: "";
    position: absolute;
    left: 0;
  }

  .mobile-menu-icon::before {
    transform: translateY(-5px);
  }

  .mobile-menu-icon::after {
    transform: translateY(5px);
  }

  .mobile-menu[open] .mobile-menu-icon {
    background: transparent;
  }

  .mobile-menu[open] .mobile-menu-icon::before {
    transform: rotate(45deg);
  }

  .mobile-menu[open] .mobile-menu-icon::after {
    transform: rotate(-45deg);
  }

  .mobile-menu-panel {
    position: absolute;
    z-index: 4;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 22px;
    background: rgba(20, 20, 20, 0.96);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.48);
    -webkit-backdrop-filter: blur(22px) saturate(125%);
    backdrop-filter: blur(22px) saturate(125%);
  }

  .mobile-menu-nav {
    display: grid;
  }

  .mobile-menu-nav a {
    display: flex;
    min-height: 48px;
    align-items: center;
    padding-inline: 14px;
    border-bottom: 1px solid var(--hairline);
    color: var(--text-secondary);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
  }

  .mobile-menu-nav a:hover,
  .mobile-menu-nav a:focus-visible {
    color: var(--text);
  }

  .mobile-language-switch {
    display: flex;
    min-height: 48px;
    align-items: center;
    gap: 8px;
    padding-inline: 14px;
    color: var(--text-tertiary);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.08em;
  }

  .mobile-language-switch a {
    color: inherit;
    text-decoration: none;
  }

  .mobile-language-switch a:hover,
  .mobile-language-switch a:focus-visible,
  .mobile-language-switch a[aria-current="page"] {
    color: var(--text);
  }

  .mobile-language-switch a[aria-current="page"] {
    text-decoration: underline;
    text-decoration-color: var(--amber-ambient);
    text-underline-offset: 4px;
  }

  .brand {
    min-width: 0;
    gap: 8px;
  }

  .site-header .splash-brand {
    --tile: 42px;
  }

  .brand > span:not(.splash) {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
  }

  .header-cta {
    font-size: 10px;
  }

  .site-header .store-text-link {
    min-height: 44px;
    padding-inline: 13px;
  }

  .header-actions {
    gap: 9px;
  }

  .language-switch {
    gap: 4px;
    font-size: 9px;
  }

  .hero-showroom {
    padding-block: 38px 26px;
  }

  .hero-showroom .hero-copy {
    padding-inline: 2px;
  }

  .hero-showroom h1 {
    max-width: 12ch;
    margin-top: 14px;
    font-size: clamp(38px, 10.8vw, 48px);
    line-height: 1.04;
  }

  .hero-showroom .lede {
    max-width: 34ch;
    margin-top: 18px;
    font-size: 16px;
    line-height: 1.55;
  }

  .hero-showroom .cta-row {
    margin-top: 22px;
  }

  .hero-showroom .hero-trust {
    margin-top: 10px;
  }

  .hero-showroom .hero-art {
    isolation: isolate;
  }

  .hero-showroom .hero-art::before {
    z-index: 0;
    inset: -4% -24% -12%;
    border-radius: 46%;
    background:
      radial-gradient(
        ellipse 46% 58% at 50% 40%,
        var(--brand-glow) 0%,
        var(--brand-glow-soft) 42%,
        transparent 74%
      ),
      radial-gradient(
        ellipse 30% 48% at 15% 58%,
        var(--amber-glow) 0%,
        transparent 72%
      ),
      radial-gradient(
        ellipse 30% 48% at 85% 58%,
        rgba(74, 124, 89, 0.28) 0%,
        transparent 72%
      ),
      radial-gradient(
        ellipse 72% 30% at 50% 88%,
        rgba(245, 160, 75, 0.18) 0%,
        transparent 76%
      );
    filter: blur(18px);
    opacity: 0.94;
  }

  .showroom-fan {
    z-index: 1;
    flex: 0 0 100vw;
    width: 100vw;
    height: min(520px, 133vw);
    margin-top: 18px;
    overflow: visible;
  }

  .showroom-fan::before {
    inset: 0 2% -8%;
    filter: blur(12px);
    opacity: 0.5;
  }

  .showroom-device {
    top: 84px;
    width: min(152px, 39vw);
  }

  .showroom-device-left {
    left: 3%;
    transform: rotate(-8deg);
  }

  .showroom-device-center {
    top: 0;
    z-index: 2;
    width: min(238px, 61vw);
  }

  .showroom-device-right {
    right: 3%;
    transform: rotate(8deg);
  }

  .story-problem {
    padding-block: 70px;
  }

  .product-intro {
    padding-block: 82px 74px;
  }

  .product-intro::before {
    inset: 18% -4% 0;
  }

  .product-intro > p:not(.overline) {
    font-size: 17px;
  }

  .about {
    gap: 18px;
    padding-block: 64px;
  }

  .feature {
    padding-block: 76px;
  }

  .feature-pair {
    padding-block: 82px;
  }

  .feature-pair-grid {
    grid-template-columns: 1fr;
    gap: 52px;
    margin-top: 42px;
  }

  .feature-pair-item .device {
    width: min(260px, 78%);
  }

  .access {
    padding-block: 72px;
  }

  .access-points {
    grid-template-columns: 1fr;
    max-width: 430px;
  }

  .access-points li {
    min-height: 68px;
  }

  .feature-focus::before,
  .feature-build::before,
  .feature-reveal::before,
  .feature-collection::before,
  .feature-iphone::before,
  .feature-progress::before {
    inset: 30% -8% -2%;
    filter: blur(12px);
  }

  .feature-focus::before {
    background: radial-gradient(
      ellipse 68% 44% at 50% 72%,
      rgba(74, 124, 89, 0.24) 0%,
      var(--brand-glow-soft) 42%,
      transparent 76%
    );
  }

  .feature-build::before {
    background:
      radial-gradient(
        ellipse 58% 42% at 42% 68%,
        rgba(74, 124, 89, 0.15) 0%,
        transparent 76%
      ),
      radial-gradient(
        ellipse 58% 42% at 58% 74%,
        rgba(230, 126, 34, 0.2) 0%,
        transparent 76%
      );
  }

  .feature-reveal::before {
    background: radial-gradient(
      ellipse 68% 44% at 50% 72%,
      rgba(230, 126, 34, 0.22) 0%,
      var(--amber-glow-soft) 42%,
      transparent 76%
    );
  }

  .feature-collection::before {
    background:
      radial-gradient(
        ellipse 58% 42% at 42% 68%,
        rgba(74, 124, 89, 0.15) 0%,
        transparent 76%
      ),
      radial-gradient(
        ellipse 58% 42% at 58% 74%,
        rgba(230, 126, 34, 0.2) 0%,
        transparent 76%
      );
  }

  .feature-progress::before {
    background:
      radial-gradient(
        ellipse 60% 42% at 44% 68%,
        rgba(74, 124, 89, 0.22) 0%,
        var(--brand-glow-soft) 42%,
        transparent 76%
      ),
      radial-gradient(
        ellipse 48% 38% at 58% 74%,
        rgba(230, 126, 34, 0.12) 0%,
        transparent 76%
      );
  }

  .closing::before {
    inset: -8% -8% -24%;
    filter: blur(14px);
  }

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

  .footer-social-link,
  .footer-email,
  .footer-legal-links a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
  }
}

@media (max-width: 359px) {
  .brand > span:not(.splash) {
    display: none;
  }

  .header-actions {
    gap: 6px;
  }

  .site-header .store-text-link {
    padding-inline: 10px;
    font-size: 9px;
  }
}

/* ---------- Wider screens ---------- */

@media (min-width: 700px) {
  .trust ul {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 900px) {
  /* Tight, because everything under it is reaching for the middle of the first
     fold and every pixel here pushes the headline down. Desktop only: on a
     phone the fold is not something the hero can be centred in anyway, and the
     header there is a header, not a margin to be won back. */
  .site-header {
    padding-block: 20px 4px;
  }

  .hero:not(.hero-showroom) {
    grid-template-columns: 1.05fr 0.95fr;
    padding-block: 20px 72px;
    gap: 56px;
    /* The first fold, minus the header, with the row centred inside it — so the
       headline, the lede and the CTA sit in the middle of the screen instead of
       hanging from its top. `svh` and not `vh`: on iOS `vh` is the *largest*
       viewport, which puts the bottom of this under the URL bar.

       `min-height`, never `height`: on a short window the content is taller than
       the fold and simply flows past it, which is the correct failure. */
    min-height: calc(100svh - 84px);
    /* Rows packed to the top: the copy and the phone are positioned on their
       own below, because they no longer want the same vertical anchor. */
    align-content: start;
  }

  .hero:not(.hero-showroom) .hero-copy {
    align-self: start;
  }

  /* The phone keeps the lower seat it always had — the copy is what moved. */
  .hero:not(.hero-showroom) .hero-art {
    align-self: start;
    margin-top: 58px;
  }

  .hero-showroom {
    min-height: auto;
    padding-block: 72px 54px;
  }

  .hero-showroom .hero-art {
    align-self: auto;
    margin-top: 0;
  }

  .story-problem {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-block: 112px;
  }

  .feature {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    padding-block: 96px;
  }

  /* The screen changes sides; the copy always reads first in the DOM, so the
     order is a visual decision and never a reading-order one. */
  .feature-flipped .feature-copy {
    order: 2;
  }

  .feature-flipped .feature-art {
    order: 1;
  }

  /* A hair off-axis, the way a phone sits in a hand.

     `rotate` and not `transform: rotate(...)`: the wrapper is what Motion
     translates on entrance, and an inline `transform` overwrites a `transform`
     declared here — which is why the hero phone was standing up straight. The
     individual properties (`rotate`, `translate`, `scale`) compose with
     `transform` instead of replacing it, so the tilt survives the animation and
     stays put when reduced motion skips the animation entirely. */
  .hero:not(.hero-showroom) .hero-art {
    rotate: -2.5deg;
  }

  .feature-art {
    rotate: 1.5deg;
  }

  .feature-flipped .feature-art {
    rotate: -1.5deg;
  }
}