/* Wavelength site styles: the product page and every circadian-health landing
   page share these tokens and components. Link AFTER /base.css (which provides
   --font-sans). Do not add page-specific CSS in individual pages; extend a
   shared component here instead.

   Type scale: a golden-ratio modular scale. The golden ratio (phi = 1.618) is
   the span; the rule of thirds divides each golden interval into three equal
   multiplicative steps, so the step ratio is the cube root of phi (~1.174).
   Three steps up from the 1rem base lands exactly on phi, and the headline is
   anchored between phi and phi-squared. Always size text with one of the --fs-*
   tokens below; do not introduce off-scale font-size values. The smallest
   (--fs-label, ~13.6px) is the accessibility floor; body copy is --fs-body. */

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

:root {
  --color-ground:         #0f0f0f;
  --color-surface:        #161616;
  --color-border:         #272727;
  --color-text-primary:   #e8e4de;
  --color-text-secondary: #b4afa8;
  --color-text-tertiary:  #7d7872;
  --color-accent:         #c8a97e;
  --color-accent-dim:     #8a7659;
  --max-width:            720px;
  --reading-width:        680px;

  --fs-label: 0.852rem;   /* phi^-1/3 step (~13.6px): labels, captions, footnotes */
  --fs-small: 1rem;       /* base (16px): secondary copy, card blurbs, FAQ answers */
  --fs-body:  1.174rem;   /* +1 step, cbrt(phi) (~18.8px): body, list items, card titles */
  --fs-lede:  1.378rem;   /* +2 steps (~22px): lede paragraph */
  --fs-title: clamp(1.618rem, 5vw, 2.618rem); /* phi to phi^2: article headline */
}

html {
  background-color: var(--color-ground);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3rem 1.5rem;
}

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

/* A soft warm glow behind the hero, nothing more. The page stays clean and dark
   so the screenshots and copy carry it. */
html { overflow-x: hidden; }

body { position: relative; }

body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 900px;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(70% 60% at 50% 0%, rgba(200, 169, 126, 0.12), transparent 70%);
}

a { color: inherit; }

/* ---- Site masthead (small, shared across landing pages) ---- */
.masthead {
  width: 100%;
  max-width: var(--reading-width);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
  text-decoration: none;
}

.masthead img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
}

.masthead .mast-name {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-primary);
}

.masthead .mast-tag {
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  color: var(--color-text-tertiary);
}

/* ---- Product page hero: centered, the running app as the dominant visual ----
   One column, everything centered so nothing can drift out of alignment. Short
   copy, then a large phone running Wavelength. No app icon: the running app is
   the identity. The scrolled feature screenshots below each add to the story. */
.hero {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  /* Break out of the 720px reading column so the phone can be large and the
     hero feels immersive. Centred on the viewport, with a safe side gutter. */
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: min(1140px, 100vw - 3rem);
  padding: clamp(2rem, 5vw, 4rem) 0 clamp(2rem, 5vw, 4rem);
}

.hero-copy { flex: 1; }

.app-name {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.hero-headline {
  font-size: clamp(2.4rem, 5.5vw, 3.6rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.028em;
  color: var(--color-text-primary);
  text-wrap: balance;
  max-width: 13ch;
  margin: 0.9rem 0 0;
}

.hero-sub {
  font-size: var(--fs-lede);
  color: var(--color-text-secondary);
  max-width: 40ch;
  margin: 1.2rem 0 0;
  line-height: 1.5;
  text-wrap: balance;
}

.hero .beta-cta { margin-top: 1.9rem; }
.hero-copy .beta-form { justify-content: flex-start; }

/* The hero phone sits on the left of the copy on wide screens (order: -1), and
   holds still (no parallax, which is reserved for the feature shots). */
.hero-shot {
  order: -1;
  flex: 0 0 50%;
  display: flex;
  justify-content: center;
  position: relative;
  overflow-x: clip; /* contain the glow horizontally so it never widens the page */
}

/* The phone appears to emit the warm light it is measuring. The glow is sized to
   fade fully to transparent before the clip edge, so it has no hard cutoff. */
.hero-shot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 135%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(206, 172, 122, 0.3), transparent 50%);
  z-index: -1;
  pointer-events: none;
}

.hero-device {
  max-width: clamp(300px, 46vw, 500px);
}

@media (max-width: 760px) {
  .hero {
    flex-direction: column;
    text-align: center;
    gap: clamp(2rem, 7vw, 3rem);
  }
  .hero-copy { width: 100%; }
  .hero-shot { order: 0; flex: none; width: 100%; }
  .hero-headline { max-width: 18ch; margin-inline: auto; }
  .hero-sub { max-width: 34ch; margin-inline: auto; }
  .hero-copy .beta-form { justify-content: center; }
  .hero-device { max-width: min(84vw, 370px); }
}

/* Eyebrow label above a use-case headline (amber, tracked caps). */
.feature-eyebrow {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.9rem;
}

/* ---- How it works: three plain steps, so anyone gets it in five seconds ----
   Set on a full-bleed raised surface band so it reads as its own zone, a beat
   of calm between the hero and the colourful use cases. */
.how {
  position: relative;
  text-align: center;
  padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(3.5rem, 8vw, 6rem);
}

.how::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  pointer-events: none;
}

.how-title {
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--color-text-primary);
}

.steps {
  list-style: none;
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 1.5rem);
  margin-top: clamp(2.2rem, 5vw, 3.2rem);
  text-align: left;
}

/* Each step is a real photo with the caption BELOW it (never overlaid), so
   nothing collides with the app's own on-screen text in step 2. */
.step {
  counter-increment: step;
  display: flex;
  flex-direction: column;
}

.step-media {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  overflow: hidden;
}

.step-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Step 3 is the day planner, which lives at the bottom of the screenshot, so
   anchor its crop to the bottom (matters on the shorter mobile card). */
.step:last-child .step-photo { object-position: bottom; }

/* Numbered badge anchored to the photo's corner, tying the caption to the image. */
.step-media::before {
  content: counter(step);
  position: absolute;
  left: 0.85rem;
  bottom: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  background: rgba(8, 8, 10, 0.62);
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  font-size: var(--fs-small);
  font-weight: 600;
  backdrop-filter: blur(4px);
}

.step-text {
  padding: 1.1rem 0.1rem 0;
}

.step-head {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 0.3rem;
  text-wrap: balance;
}

.step-body {
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
  line-height: 1.45;
}

.step-head {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 0.5rem;
  text-wrap: balance;
}

.step-body {
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
  line-height: 1.5;
  max-width: 26ch;
}

@media (max-width: 640px) {
  .steps { grid-template-columns: 1fr; gap: 1.75rem; max-width: 24rem; margin-inline: auto; }
  .step-media { aspect-ratio: 4 / 3; }
}


.app-store-badge {
  display: inline-block;
  height: 40px;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}

.app-store-badge:hover { opacity: 1; }

/* ---- Beta signup ---- */
.beta-form {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.beta-input {
  font-family: inherit;
  font-size: var(--fs-small);
  padding: 0.6rem 0.95rem;
  min-width: 220px;
  color: var(--color-text-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
}

.beta-input::placeholder { color: var(--color-text-tertiary); }
.beta-input:focus { outline: none; border-color: var(--color-accent-dim); }

.beta-submit {
  font-family: inherit;
  font-size: var(--fs-small);
  font-weight: 500;
  padding: 0.6rem 1.2rem;
  color: var(--color-accent);
  background: transparent;
  border: 1px solid var(--color-accent-dim);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.beta-submit:hover { border-color: var(--color-accent); color: var(--color-text-primary); }
.beta-submit:disabled { opacity: 0.5; cursor: default; }

.beta-note,
.beta-done {
  font-size: var(--fs-label);
  color: var(--color-text-tertiary);
  margin-top: 0.85rem;
}

.beta-done { color: var(--color-accent); }

/* ---- Feature showcase: one use case per row, each with its own colour ----
   Each row pairs a full screenshot with one benefit, alternating sides. The
   dark screenshots would vanish on a flat black page, so every phone sits on a
   coloured light "stage": a wide soft wash that tints the whole row and a
   brighter glow right behind the device. The colour is the use case's identity
   (warm for travel and daylight, cool blue for sleep and night shifts), which
   also gives the long scroll rhythm. */
.features {
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 7vw, 6rem);
  padding: clamp(3rem, 7vw, 6rem) 0 3rem;
}

.feature {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}

.feature:nth-child(even) { flex-direction: row-reverse; }

/* Wide, faint, full-bleed wash tinting the whole row in the use-case colour,
   centred on the phone's side. Exactly 100vw so it never widens the page. */
.feature::before {
  content: "";
  position: absolute;
  z-index: -2;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 150%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(38% 56% at var(--wash-x, 28%) 50%, var(--wash), transparent 72%);
}

.feature:nth-child(even)::before { --wash-x: 72%; }

.feature-shot {
  position: relative;
  flex: 0 0 48%;
  display: flex;
  justify-content: center;
  overflow-x: clip; /* contain the wide glow below */
}

/* Brighter, tighter glow directly behind the device so its dark screen and
   titanium frame separate from the page. */
.feature-shot::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 46%;
  width: 132%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--glow), transparent 62%);
  pointer-events: none;
}

.feature--jetlag { --glow: rgba(228, 150, 78, 0.46); --wash: rgba(228, 150, 78, 0.16); }
.feature--sleep  { --glow: rgba(116, 130, 230, 0.42); --wash: rgba(116, 130, 230, 0.15); }
.feature--energy { --glow: rgba(232, 188, 104, 0.46); --wash: rgba(232, 188, 104, 0.16); }
.feature--shift  { --glow: rgba(82, 160, 200, 0.42); --wash: rgba(82, 160, 200, 0.15); }

/* The screenshot is pre-composited into a real iPhone 16 Pro Max frame by
   bin/frame-shot (the same tool the App Store screenshots use), so this is just
   the framed PNG with a drop shadow that follows the device silhouette. The
   subtle scroll parallax rides on the transform. */
.device-frame {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  transform: translateY(var(--py, 0));
  filter: drop-shadow(0 30px 55px rgba(0, 0, 0, 0.55));
}

.feature-text { flex: 1; }

.feature-title {
  font-size: clamp(1.55rem, 3.3vw, 2.15rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--color-text-primary);
  margin-bottom: 1rem;
  text-wrap: balance;
}

.feature-body {
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--color-text-secondary);
}

.features-note {
  font-size: var(--fs-small);
  color: var(--color-text-tertiary);
  text-align: center;
  padding: clamp(2rem, 5vw, 3.5rem) 0 1rem;
}

/* ---- Closing call to action (repeats the beta CTA partial) ---- */
.cta-close {
  text-align: center;
  padding: clamp(3.5rem, 8vw, 6rem) 0 1rem;
  margin-top: 1rem;
}

/* The app icon as the sign-off, above the final call to action. */
.cta-icon {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 16px;
  margin: 0 auto 1.4rem;
}

.cta-title {
  font-size: clamp(1.55rem, 3.4vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.15;
  color: var(--color-text-primary);
  text-wrap: balance;
  margin-bottom: 0.85rem;
}

.cta-sub {
  font-size: var(--fs-body);
  color: var(--color-text-secondary);
  max-width: 44ch;
  margin: 0 auto 1.8rem;
  line-height: 1.55;
}

/* Scroll entrance: each side fades and rises in as it enters the viewport.
   Scoped to .anim (added by JS) so content stays visible without JavaScript. */
@media (prefers-reduced-motion: no-preference) {
  .anim .feature-shot,
  .anim .feature-text {
    opacity: 0;
    transform: translateY(42px);
    transition: opacity 1.2s ease, transform 1.3s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .anim .feature.in .feature-shot { opacity: 1; transform: none; }
  .anim .feature.in .feature-text { opacity: 1; transform: none; transition-delay: 0.12s; }
}

@media (max-width: 640px) {
  .feature, .feature:nth-child(even) {
    flex-direction: column;
    text-align: center;
    gap: 1.75rem;
  }
  .feature::before,
  .feature:nth-child(even)::before { --wash-x: 50%; height: 70%; top: 38%; }
  .feature-shot { flex: none; width: 100%; }
  .device-frame { max-width: 300px; transform: none; }
}

/* ---- "Who it's for" link grid (product page -> landing pages) ---- */
.section-label {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  text-align: center;
  padding-top: 3rem;
  border-top: 1px solid var(--color-border);
}

/* A slowly drifting brick wall of topics. Columns scroll vertically at
   different speeds and pause on hover/focus; each column's tiles are duplicated
   so the loop is seamless. Tiles use margin-bottom (not flex gap) so a -50%
   translate lands exactly on the duplicate. */
.brick-wall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  height: 30rem;
  margin: 1.75rem 0 3rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}

.brick-col {
  display: flex;
  flex-direction: column;
  animation: brick-drift 95s linear infinite;
  will-change: transform;
}

.brick-col.reverse { animation-direction: reverse; animation-duration: 120s; }
.brick-col:nth-child(3) { animation-duration: 78s; }

@keyframes brick-drift {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

.brick-wall:hover .brick-col,
.brick-wall:focus-within .brick-col { animation-play-state: paused; }

.brick {
  display: block;
  margin-bottom: 0.75rem;
  padding: 1.05rem 1.2rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.brick:hover {
  border-color: var(--color-accent-dim);
  background: #1b1b1b;
  transform: translateY(-2px);
}

.brick-name {
  display: block;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: 0.3rem;
}

.brick-blurb {
  display: block;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--color-text-secondary);
}

@media (max-width: 640px) {
  .brick-wall {
    grid-template-columns: 1fr;
    height: auto;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .brick-col { animation: none; }
  .brick[aria-hidden="true"] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .brick-wall {
    height: auto;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .brick-col { animation: none; }
  .brick[aria-hidden="true"] { display: none; }
}

/* ---- Landing-page article ---- */
.article {
  width: 100%;
  max-width: var(--reading-width);
}

.breadcrumb {
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: 1.5rem;
}

.breadcrumb a { text-decoration: none; color: var(--color-text-tertiary); }
.breadcrumb a:hover { color: var(--color-text-secondary); }

.eyebrow {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 1rem;
}

.article h1 {
  font-size: var(--fs-title);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 1.25rem;
}

.lede {
  font-size: var(--fs-lede);
  line-height: 1.6;
  color: var(--color-text-primary);
  margin-bottom: 2.5rem;
}

.article h2 {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 3rem 0 1rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--color-border);
}

.article h3 {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 1.75rem 0 0.5rem;
}

.article p {
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--color-text-secondary);
  margin-bottom: 1.2rem;
}

.article p strong { color: var(--color-text-primary); font-weight: 700; }

.article a.inline {
  color: var(--color-text-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
}

.article a.inline:hover { border-color: var(--color-text-secondary); }

.article ul, .article ol {
  margin: 0 0 1.2rem 1.2rem;
  padding: 0;
}

.article li {
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--color-text-secondary);
  margin-bottom: 0.5rem;
}

/* ---- In-article screenshot figure (floated, natural aspect ratio) ---- */
.article-figure {
  float: right;
  width: 188px;
  margin: 0.35rem 0 1.25rem 1.75rem;
}

.article-figure img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
  border: 1px solid var(--color-border);
}

.article-figure figcaption {
  font-size: var(--fs-label);
  line-height: 1.5;
  color: var(--color-text-tertiary);
  text-align: center;
  margin-top: 0.6rem;
}

/* Headings clear the figure so their top rule never crosses it. */
.article h2 { clear: both; }

/* ---- FAQ ---- */
.faq details {
  border-bottom: 1px solid var(--color-border);
  padding: 1.1rem 0;
}

.faq summary {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--color-text-primary);
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 1.5rem;
}

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

.faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: -0.1rem;
  font-size: var(--fs-lede);
  color: var(--color-accent);
  transition: transform 0.15s ease;
}

.faq details[open] summary::after { content: "\2212"; }

.faq details p {
  margin: 0.75rem 0 0;
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--color-text-secondary);
}

/* ---- References ---- */
.references { margin-top: 1rem; }

.references ol { margin-left: 1.2rem; }

.references li {
  font-size: var(--fs-label);
  line-height: 1.6;
  color: var(--color-text-tertiary);
  margin-bottom: 0.6rem;
}

.references a { color: var(--color-text-secondary); text-decoration: none; border-bottom: 1px solid var(--color-border); }
.references a:hover { color: var(--color-text-primary); }

.disclaimer {
  font-size: var(--fs-label);
  line-height: 1.6;
  color: var(--color-text-tertiary);
  font-style: italic;
  margin-top: 2rem;
}

/* ---- Related topics (cross-links at article foot) ---- */
.related {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.related a {
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.related a:hover { border-color: var(--color-accent-dim); color: var(--color-text-primary); }

/* ---- Footer ---- */
.page-footer {
  width: 100%;
  max-width: var(--reading-width);
  border-top: 1px solid var(--color-border);
  padding-top: 2rem;
  margin-top: 3rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: var(--fs-label);
  color: var(--color-text-tertiary);
  letter-spacing: 0.04em;
}

.page-footer a {
  color: var(--color-text-tertiary);
  text-decoration: none;
  transition: color 0.15s ease;
}

.page-footer a:hover { color: var(--color-text-secondary); }

.footer-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

@media (max-width: 600px) {
  body { padding: 2rem 1.7rem; }
  .hero { padding: 1.5rem 0 2.5rem; }
  .feature-text { padding: 0 0.5rem; }
  .hero-sub { font-size: var(--fs-body); }
  .article-figure { float: none; width: 210px; margin: 1.5rem auto; }
}

@media (prefers-reduced-motion: reduce) {
  .app-store-badge, .brick, .related a { transition: none; }
}