/* ==========================================================================
   iMembers — landing design system.

   Built from the supplied reference comp (warm editorial furniture landing).
   What was taken from it is the *graphic system*, not the palette:

     - a calm canvas with one generous gutter, no nested container chrome
     - a floating pill navbar that overlaps the hero media
     - a hero that is one big rounded media frame: headline bottom-left,
       supporting copy + a single CTA bottom-right
     - a two-tone accent word inside headings (the signature typographic move)
     - a "numbers" tone card beside a light card with a circle-masked photo
     - numbered process cards that stack under each other on scroll
     - a mixed light / tone / dark / photo bento for the feature grid
     - ~22-30px radii everywhere, pills at 999px, almost no shadow

   The palette is the reference's own warm-neutral world, sampled from the comp:
   cream canvas, oat cards, a tan tone card, a dark brown card, and one bronze
   accent used for the emphasised word.

   Two deliberate departures, both for contrast:
     - the tan card carries dark ink, not white. White on that tan measures
       2.8:1 in the comp, which fails even the large-text bar; dark ink on the
       same tan measures 5.9:1 and keeps the card looking identical.
     - small text and links use `--accent-ink`, a darker bronze. The display
       bronze is 3.1:1 — fine for a 44px heading, not for a 10px label.
   ========================================================================== */

:root {
  /* Surfaces */
  --canvas: #f6f3ed;
  --paper: #fffdf9;
  --tint: #ebe5db;
  --tint-deep: #ddd3c3;

  /* Tone + dark cards (reference: tan stats card / dark brown feature card) */
  --tone-a: #b09a80;
  --tone-b: #c9b8a2;
  --dark-a: #453629;
  --dark-b: #2a2018;

  /* Ink */
  --ink: #241f1a;
  --ink-soft: #655b4e;
  /* Reads on the tan cards, where translucent white does not. */
  --on-tone: #3a3128;
  --on-dark: #ffffff;
  --on-dark-soft: rgba(255, 255, 255, 0.74);

  --accent: #a9835a;
  --accent-ink: #7d5c38;

  /* Sampled from app-icon.png: the mark's dominant green is #28c888. That hue
     measures 1.7:1 on the oat card, so text uses the same hue taken deeper —
     3.2:1, which clears the large-text bar the brand word is always set at. */
  --brand: #28c888;
  --brand-ink: #149260;
  --accent-lift: #e2caa6;
  --line: rgba(36, 31, 26, 0.13);
  --line-dark: rgba(255, 255, 255, 0.18);

  /* Geometry */
  --r-xl: 30px;
  --r-md: 22px;
  --r-sm: 16px;
  --gutter: min(1200px, 100% - 56px);
  --band: clamp(84px, 9vw, 140px);
  --pad: clamp(26px, 2.9vw, 40px);

  --shadow-soft: 0 22px 60px rgba(74, 56, 34, 0.09);

  /* The brand's own faces, self-hosted from ./assets/fonts (see fonts.27064650.css).
     Hanken Grotesk carries the page; Spectral appears only where the live site
     uses a serif — the numbers card, the closing headline, the footer tagline. */
  --sans: "Hanken Grotesk", "Avenir Next", system-ui, -apple-system, sans-serif;
  --display: "Spectral", "Iowan Old Style", Georgia, serif;

  --ease: cubic-bezier(0.23, 1, 0.32, 1);
}

* { box-sizing: border-box; }

html {
  width: 100%;
  max-width: 100%;
  /* `clip`, not `hidden`: it contains bleeding decoration without creating a
     scroll container, so `position: sticky` keeps working. */
  overflow-x: clip;
  scroll-behavior: smooth;
}

body {
  width: 100%;
  max-width: 100%;
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font-family: var(--sans);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }
img { max-width: 100%; }
button, input, textarea { font: inherit; }
::selection { color: var(--ink); background: #e8dcc6; }

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

/* --------------------------------------------------------------- primitives */

h1, h2, h3 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.07;
}

/* The two-tone accent word. `<em>` carries the emphasis semantically; the
   italic is dropped because the reference sets emphasis in colour, not slant. */
em {
  font-style: normal;
  color: var(--accent);
}

/* Emphasis set in the logo's green instead of the bronze. */
.accent-brand { color: var(--brand-ink); }

.eyebrow {
  margin: 0;
  color: var(--ink-soft);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.band {
  width: var(--gutter);
  margin-inline: auto;
  padding-block: var(--band);
}

/* Two adjacent bands would otherwise stack their padding into a ~280px hole. */
.band + .band { padding-top: 0; }

.band-head {
  max-width: 720px;
  margin-bottom: clamp(34px, 4vw, 56px);
}

.band-head h2 {
  margin-top: 14px;
  font-size: clamp(28px, 3.4vw, 44px);
}

.band-head p {
  max-width: 54ch;
  margin: 18px 0 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.65;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  /* Dark type on the tan fill, as in the reference. White would sit at 3.4:1. */
  color: var(--ink);
  background: var(--accent);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 200ms var(--ease), transform 160ms var(--ease);
}

.pill:hover { background: #b8926a; }
.pill:active { transform: scale(0.975); }
.pill svg { width: 15px; height: 15px; }

.pill-light {
  color: var(--ink);
  background: var(--paper);
}

.pill-light:hover { background: #ffffff; }

/* Reveal on scroll. Transform + opacity only, so it stays off the main thread. */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

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

/* ------------------------------------------------------------------- topbar */

/* Floating pill overlapping the hero media by half its height — the single
   most recognisable move in the reference. */
.topbar {
  position: sticky;
  top: 18px;
  z-index: 40;
  width: min(1200px, 100% - 56px);
  height: 62px;
  margin: 18px auto -31px;
  padding: 0 10px 0 22px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  border-radius: 999px;
  background: rgba(255, 253, 250, 0.9);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  box-shadow: 0 12px 34px rgba(74, 56, 34, 0.1);
}

.brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.035em;
  text-decoration: none;
}

.brand img { border-radius: 9px; }

.topbar nav { display: flex; gap: 30px; }

.topbar nav a {
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: color 180ms var(--ease);
}

.topbar nav a:hover { color: var(--ink); }
.topbar .pill { justify-self: end; }

/* --------------------------------------------------------------------- hero */

.hero {
  width: var(--gutter);
  margin: 0 auto;
  padding-top: 31px;
}

.hero-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  min-height: 460px;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: #241b12;
}

.hero-frame video,
.hero-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Two stops, not one: the top keeps the nav pill legible over bright frames,
   the bottom carries the headline. */
.hero-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(26, 19, 12, 0.42) 0%, rgba(26, 19, 12, 0) 26%),
    /* Heavy enough at the foot to keep white copy legible over the brightest
       frames of the loop — the letter and tablecloth are near-white. */
    linear-gradient(0deg,
      rgba(26, 19, 12, 0.88) 0%,
      rgba(26, 19, 12, 0.66) 22%,
      rgba(26, 19, 12, 0.32) 42%,
      rgba(26, 19, 12, 0) 64%);
}

.hero-overlay {
  position: absolute;
  z-index: 2;
  inset: auto clamp(26px, 3.4vw, 52px) clamp(26px, 3.4vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: end;
  gap: clamp(24px, 4vw, 64px);
  color: var(--on-dark);
}

.hero-overlay h1 {
  font-size: clamp(32px, 4.2vw, 58px);
  line-height: 1.02;
}

.hero-overlay h1 em { color: var(--accent-lift); }

.hero-aside {
  max-width: 42ch;
  justify-self: end;
}

.hero-aside p {
  margin: 0 0 20px;
  color: var(--on-dark-soft);
  font-size: 14px;
  line-height: 1.62;
}

/* ------------------------------------------------------------------- ticker */

.ticker {
  margin-top: clamp(52px, 6vw, 84px);
  padding-block: 22px;
  border-block: 1px solid var(--line);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.ticker > div {
  display: flex;
  align-items: center;
  gap: 34px;
  width: max-content;
  animation: drift 46s linear infinite;
}

.ticker span {
  color: var(--ink-soft);
  font-size: 14px;
  white-space: nowrap;
}

/* `inline-block`, not the default `inline`: an inline box ignores width and
   height, which left the separators invisible. */
.ticker i {
  display: inline-block;
  margin-left: 34px;
  vertical-align: middle;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.55;
}

@keyframes drift {
  to { transform: translateX(-50%); }
}

/* --------------------------------------------------------- numbers + about */

.intro-band {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(16px, 1.6vw, 22px);
}

.stat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  min-height: 340px;
  padding: var(--pad);
  border-radius: var(--r-md);
  overflow: hidden;
  color: var(--ink);
  background: linear-gradient(150deg, var(--tone-a) 0%, var(--tone-b) 100%);
}

/* Sized in px, not ch: the 0.2em tracking makes `ch` a poor proxy and the
   label was breaking into three ragged lines instead of two. */
.stat-card .eyebrow {
  max-width: 152px;
  color: var(--on-tone);
  font-size: 11px;
  letter-spacing: 0.18em;
  line-height: 1.55;
}

.stat-mark {
  position: absolute;
  top: 26px;
  right: 24px;
  width: 104px;
  height: 70px;
  color: rgba(58, 49, 40, 0.32);
}

/* One figure per row, divided by a hairline. Side by side the columns were
   only ~180px wide, which capped the numerals and forced 11.5px labels. */
.stat-row {
  margin: 0;
  display: grid;
  gap: clamp(18px, 2vw, 26px);
}

.stat-row > div {
  min-width: 0;
  padding-top: clamp(16px, 1.8vw, 22px);
  border-top: 1px solid rgba(58, 49, 40, 0.22);
}

.stat-row dt {
  font-family: var(--display);
  font-size: clamp(40px, 4.6vw, 62px);
  font-weight: 600;
  /* Iowan Old Style defaults to oldstyle figures, which would set "50" with a
     descender next to the cap-height word beside it. */
  font-variant-numeric: lining-nums;
  letter-spacing: -0.025em;
  line-height: 1;
}

.stat-row dd {
  margin: 10px 0 0;
  max-width: 44ch;
  color: var(--on-tone);
  font-size: 14px;
  line-height: 1.5;
  /* Keeps "date" from being left alone on its own line. */
  text-wrap: pretty;
}

.about-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  align-items: center;
  min-height: 300px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--tint);
}

.about-copy { padding: var(--pad); }
.about-copy h2 { font-size: clamp(24px, 2.6vw, 34px); }

.about-copy p {
  margin: 18px 0 0;
  max-width: 44ch;
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.68;
}

/* The reference clips its photo with a large left-bulging arc running to the
   card's top, right and bottom edges. A two-axis radius reproduces it exactly,
   and unlike clip-path it stays correct at every width. */
.about-photo {
  position: relative;
  align-self: stretch;
  border-radius: 50% 0 0 50% / 50% 0 0 50%;
  overflow: hidden;
  background: var(--tint-deep);
}

.about-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ----------------------------------------------------- sticky process stack */

.steps {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 26px);
}

.step {
  position: sticky;
  /* The floating navbar ends at 80px; 112 clears it with room to spare, so a
     parked card never looks glued to the top of the window. Each card parks
     16px lower than the one before, leaving a sliver of every previous step
     visible above it.

     The section heading is deliberately NOT sticky: a pinned heading meant the
     third card slid underneath it and got cut in half. */
  top: calc(112px + var(--i) * 16px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 340px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--shadow-soft);
}

.step-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
  padding: var(--pad);
}

/* A pale ghost index, as in the reference. It is `aria-hidden` in the markup:
   at this weight it cannot reach 3:1, and the order it conveys is already in
   the DOM order and in the "Today / The promise / Someday" label below. */
.step-num {
  color: #cdbda4;
  font-size: clamp(38px, 4.4vw, 60px);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1;
}

.step-body h3 { font-size: clamp(23px, 2.5vw, 32px); }

.step-body p {
  margin: 16px 0 0;
  max-width: 42ch;
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.68;
}

.step-when {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--accent-ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.step-when i {
  width: 20px;
  height: 1px;
  background: currentColor;
}

.step-photo {
  position: relative;
  overflow: hidden;
  background: var(--tint);
}

.step-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ------------------------------------------------------------------ stories */

.story-grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.5vw, 20px);
}

.story-card { min-width: 0; }

.story-frame {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: #241b12;
}

.story-frame img,
.story-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(26, 19, 12, 0.5) 0%, rgba(26, 19, 12, 0) 42%);
  pointer-events: none;
}

/* The whole frame is the hit area, but the control itself sits in the bottom
   corner: these are portraits, and a disc in the middle lands on the face. */
.story-toggle {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: end start;
  padding: 12px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.story-play {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--ink);
  background: rgba(255, 253, 250, 0.94);
  box-shadow: 0 8px 24px rgba(26, 19, 12, 0.28);
  transition: transform 180ms var(--ease), opacity 220ms var(--ease);
}

.story-play svg { width: 18px; height: 18px; }

.story-toggle:hover .story-play { transform: scale(1.06); }
.story-toggle:active .story-play { transform: scale(0.96); }

/* While it plays the control fades back and returns on hover, so the frame is
   not permanently covered by a button. */
.story-toggle.is-playing .story-play { opacity: 0; }
.story-toggle.is-playing:hover .story-play,
.story-toggle.is-playing:focus-visible .story-play { opacity: 1; }

.story-length {
  position: absolute;
  z-index: 3;
  right: 12px;
  bottom: 12px;
  padding: 4px 9px;
  border-radius: 999px;
  color: var(--on-dark);
  background: rgba(26, 19, 12, 0.5);
  backdrop-filter: blur(6px);
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.story-card h3 {
  margin: 16px 0 0;
  font-size: 16px;
  letter-spacing: -0.025em;
}

.story-card p {
  margin: 7px 0 0;
  color: var(--ink-soft);
  font-size: 12.5px;
  line-height: 1.55;
}

/* -------------------------------------------------------------------- bento */

.bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.6vw, 22px);
}

/* Row height is set by the tallest tile in the row, so a short tile always has
   slack. Centring the block turns that slack into symmetric breathing space
   instead of a hole under the copy. */
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 270px;
  padding: var(--pad);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--tint);
}

.tile h3 { font-size: clamp(19px, 1.8vw, 24px); }

.tile p {
  margin: 14px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.66;
}

.tile-mark {
  width: 38px;
  height: 38px;
  margin-bottom: 20px;
  color: var(--accent);
}

.tile-mark svg { width: 100%; height: 100%; }

/* The privacy tile is the loudest claim on the page, so it gets the dark
   treatment and two columns. */
.tile-dark {
  grid-column: span 2;
  /* This one is full of copy — it reads from the top, not centred. */
  justify-content: flex-start;
  color: var(--on-dark);
  background: linear-gradient(145deg, var(--dark-a) 0%, var(--dark-b) 100%);
}

.tile-dark .tile-mark { color: var(--accent-lift); }
.tile-dark .eyebrow { margin-bottom: 12px; color: var(--accent-lift); }
.tile-dark h3 { font-size: clamp(26px, 2.8vw, 40px); }

/* One measure running the full width of the card. Bumped a size and opened up
   the leading, because the line is long. */
.tile-dark p {
  max-width: none;
  color: var(--on-dark-soft);
  font-size: 16px;
  line-height: 1.75;
}

.tile-fine {
  margin-top: 14px;
  max-width: none;
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  line-height: 1.6;
}

.tile-tone {
  color: var(--ink);
  background: linear-gradient(150deg, var(--tone-a) 0%, var(--tone-b) 100%);
}

.tile-tone .tile-mark { color: rgba(58, 49, 40, 0.78); }
.tile-tone p { color: var(--on-tone); }

/* Photo tile: image behind, copy pinned to the bottom. */
.tile-photo {
  grid-column: span 2;
  justify-content: flex-end;
  min-height: 320px;
  color: var(--on-dark);
  background: #241b12;
}

.tile-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tile-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(26, 19, 12, 0.84) 0%, rgba(26, 19, 12, 0.22) 55%, rgba(26, 19, 12, 0) 100%);
}

/* `:not(img)` matters: the image is a direct child too, and lifting it to
   z-index 2 put it above the ::after scrim, leaving the copy to rely on
   whatever happened to be in the photo behind it. */
.tile-photo > :not(img):not(.edge-light) { position: relative; z-index: 2; }
.tile-photo p { max-width: 46ch; color: var(--on-dark-soft); }

/* Format list inside the "every format" tile. */
.formats {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.formats li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: start;
  gap: 13px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.formats li:first-child { padding-top: 0; border-top: 0; }

.formats li > span:first-child {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: var(--accent-ink);
  background: rgba(169, 131, 90, 0.14);
}

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

.formats strong {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.formats small {
  display: block;
  margin-top: 3px;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.5;
}

/* ---------------------------------------------------------------- manifesto */

.manifesto {
  width: var(--gutter);
  margin-inline: auto;
  padding-block: clamp(70px, 8vw, 120px);
  text-align: center;
}

.manifesto blockquote {
  max-width: 22ch;
  margin: 0 auto;
  font-size: clamp(28px, 3.8vw, 50px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.manifesto p {
  margin: 24px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
  letter-spacing: 0.02em;
}

/* ------------------------------------------------------------------ closing */

/* The amber-to-terracotta card from the live site.
   The base ramp is pitched so its lightest stop still clears 4.5:1 against
   white (the live block's golden midtone measures ~3.4:1, which the body copy
   fails). The gold comes back as a corner bloom that fades out well before the
   centred text — same warmth, no unreadable band. */
.closing {
  position: relative;
  width: var(--gutter);
  margin: 0 auto clamp(56px, 6vw, 92px);
  padding: clamp(60px, 7.5vw, 112px) var(--pad);
  border-radius: var(--r-xl);
  overflow: hidden;
  color: var(--on-dark);
  background:
    radial-gradient(105% 84% at 0% -12%,
      rgba(236, 176, 62, 0.9) 0%,
      rgba(236, 176, 62, 0.2) 19%,
      rgba(236, 176, 62, 0) 36%),
    linear-gradient(128deg, #b45420 0%, #a33d19 50%, #8b2a14 100%);
  text-align: center;
}

.closing h2 {
  max-width: 19ch;
  margin: 18px auto 0;
  font-family: var(--display);
  font-size: clamp(34px, 4.6vw, 62px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

/* The second sentence turns italic rather than changing hue — that is how the
   live block sets the emphasis. */
.closing h2 em {
  font-style: italic;
  color: #f7e6cd;
}

.closing > p {
  max-width: 44ch;
  margin: 22px auto 36px;
  color: rgba(255, 255, 255, 0.93);
  font-size: 15px;
  line-height: 1.6;
}

/* Opaque cream, not translucent white: at 50% over the terracotta this 9px
   label measured 2.4:1. */
.closing .eyebrow { color: #fff7ea; }

/* ------------------------------------------------------------- store badges */

.store-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.closing .store-row { align-items: center; }

.badge-list {
  /* Apple asks for at least 40px onscreen; 52 keeps the lockup comfortable and
     gives Google's wider artwork room to match on height. */
  --badge-h: 52px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: inherit;
  align-items: center;
  /* Clear space: at least a quarter of the badge height on every side. */
  gap: 16px;
}

.closing .badge-list { justify-content: center; }

.badge-slot { display: flex; }
.badge-link { display: flex; text-decoration: none; }

/* No hover transform anywhere on a badge — Apple's guidelines forbid modifying
   or animating the artwork. */
.badge-art { display: block; width: auto; }

/* Apple's SVG is 119.664x40 with no built-in clear space. Google's PNG is
   646x250, but its artwork is only 564x168 — Google bakes its own quarter-height
   clear space into the file. Scaling Google by 646/434 = 1.488 therefore makes
   the two *visible* lockups the same height, and padding the Apple badge by a
   quarter of its height gives it the clear space Google already has.

   In the React version these heights were inline styles on each <img>; here they
   have to be stated in CSS, or the badges render at their natural sizes and
   Google's comes out five times too big. */
.badge-slot:nth-child(1) .badge-art {
  height: var(--badge-h);
  padding: 0 13px;
  margin: 0 -13px;
}

.badge-slot:nth-child(2) .badge-art {
  height: calc(var(--badge-h) * 1.488);
}

/* Stand-in until Huawei's own artwork can be exported from AppGallery Connect
   — deliberately not a redrawn AppGallery badge. */
.badge-provisional {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: var(--badge-h);
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}

.badge-provisional small {
  color: var(--ink-soft);
  font-size: 8.5px;
  letter-spacing: 0.04em;
}

.badge-provisional strong {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.light-buttons .badge-provisional {
  border-color: var(--line-dark);
  background: rgba(255, 255, 255, 0.07);
}

.light-buttons .badge-provisional small { color: rgba(255, 255, 255, 0.88); }
.light-buttons .badge-provisional strong { color: var(--on-dark); }

.badge-note {
  margin: 0;
  color: var(--ink-soft);
  font-size: 11.5px;
  letter-spacing: 0.02em;
}

/* 0.55 white over the terracotta measured 3.0:1 for this 11.5px line. */
.light-buttons .badge-note { color: rgba(255, 255, 255, 0.86); }

/* ------------------------------------------------------- cursor edge glow */

/* Ported from the live site's border-glow.115cddb8.js + its stylesheet. `--edge-proximity`
   (0-100) and `--cursor-angle` are written by the pointermove handler in
   border-glow.tsx; everything below is the original's own maths. */
.border-glow-card {
  --edge-proximity: 0;
  --cursor-angle: 45deg;
  --edge-sensitivity: 30;
  --glow-padding: 34px;
  --glow-color: hsl(35deg 90% 58% / 100%);
  --glow-color-50: hsl(35deg 90% 58% / 50%);
  --glow-color-40: hsl(35deg 90% 58% / 40%);
  --glow-color-30: hsl(35deg 90% 58% / 30%);
  --glow-color-20: hsl(35deg 90% 58% / 20%);
  --glow-color-10: hsl(35deg 90% 58% / 10%);
}

/* `:where()` contributes no specificity on purpose: a plain static card still
   gets a containing block, but `.step { position: sticky }` keeps winning.
   A bare `.border-glow-card { position: relative }` came later in the sheet at
   equal specificity and silently un-stuck the whole process stack. */
:where(.border-glow-card) { position: relative; }

.border-glow-card > .edge-light {
  position: absolute;
  /* Sits above the card's own media but below its copy, because every card
     here bleeds a photo or a gradient to its edge. */
  z-index: 1;
  inset: calc(var(--glow-padding) * -1);
  border-radius: inherit;
  pointer-events: none;
  mask-image: conic-gradient(
    from var(--cursor-angle) at center,
    black 2.5%, transparent 10%, transparent 90%, black 97.5%);
  opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
  mix-blend-mode: plus-lighter;
  transition: opacity 0.25s ease-out;
}

/* Slower on the way out, so leaving a card fades rather than snaps. */
.border-glow-card:not(:hover) > .edge-light {
  opacity: 0;
  transition: opacity 0.75s ease-in-out;
}

.border-glow-card > .edge-light::before {
  content: "";
  position: absolute;
  inset: var(--glow-padding);
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px var(--glow-color),
    inset 0 0 3px 0 var(--glow-color-50),
    inset 0 0 6px 0 var(--glow-color-40),
    inset 0 0 15px 0 var(--glow-color-30),
    inset 0 0 25px 2px var(--glow-color-20),
    inset 0 0 50px 2px var(--glow-color-10),
    0 0 3px 0 var(--glow-color-50),
    0 0 6px 0 var(--glow-color-40),
    0 0 15px 0 var(--glow-color-30),
    0 0 25px 2px var(--glow-color-20),
    0 0 50px 2px var(--glow-color-10);
}

/* ------------------------------------------------------------------- footer */


/* Three-part row, as on the live site: copyright left, links centred, the
   serif tagline right. */
.site-footer {
  width: var(--gutter);
  margin: 0 auto;
  padding: 34px 0 52px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px 32px;
}

.footer-copy {
  grid-column: 1;
  justify-self: start;
}

.footer-tagline {
  grid-column: 3;
  justify-self: end;
  margin: 0;
  color: var(--ink-soft);
  font-family: var(--display);
  font-size: 15px;
  font-style: italic;
}

.site-footer nav {
  grid-column: 2;
  justify-self: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 24px;
}

.site-footer nav a {
  color: var(--ink-soft);
  font-size: 13px;
  text-decoration: none;
  transition: color 180ms var(--ease);
}

.site-footer nav a:hover { color: var(--ink); }

.site-footer small {
  grid-column: 1 / -1;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.6;
}

.footer-legal {
  display: block;
  max-width: 96ch;
  margin-top: 10px;
  /* Solid, not translucent: at 78% this 10px block measured 3.7:1. */
  color: var(--ink-soft);
  font-size: 10px;
  line-height: 1.55;
}

/* -------------------------------------------------------------- legal pages */

/* These pages keep the live site's own markup verbatim — it is published legal
   text and is not something to re-tag for styling convenience. */
.legal {
  width: min(760px, 100% - 48px);
  margin: clamp(28px, 4vw, 56px) auto 0;
  padding: clamp(30px, 4vw, 56px);
  border-radius: var(--r-md);
  background: var(--paper);
  box-shadow: var(--shadow-soft);
}

.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 22px;
  color: var(--accent-ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.legal-back:hover { color: var(--ink); }

.legal-head h1 {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.legal-meta { margin: 0; color: var(--ink-soft); font-size: 14px; }

.legal-important {
  margin: 24px 0 4px;
  padding: 18px 20px;
  border: 1px solid rgba(169, 131, 90, 0.28);
  border-radius: 16px;
  background: rgba(169, 131, 90, 0.09);
  font-size: 15px;
  line-height: 1.62;
}

.legal h2 {
  margin: 34px 0 12px;
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.legal h3 {
  margin: 22px 0 8px;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
}

.legal p,
.legal li {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.72;
}

.legal p { margin: 0 0 12px; }
.legal ul, .legal ol { margin: 0 0 14px; padding-left: 20px; }
.legal li { margin-bottom: 7px; }
.legal a { color: var(--accent-ink); }

.legal-contact {
  margin-top: 26px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--tint);
}

.legal-contact .lbl { margin-bottom: 4px; color: var(--ink-soft); font-size: 12px; }
.legal-contact .email { color: var(--accent-ink); font-size: 16px; font-weight: 700; }

.legal-foot {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.6;
}

.legal-foot .cr { display: block; margin-top: 6px; }

/* --------------------------------------------------------------- responsive */

@media (max-width: 1040px) {
  .intro-band,
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .tile-dark,
  .tile-photo { grid-column: span 2; }

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



@media (max-width: 760px) {
  :root {
    --gutter: calc(100% - 32px);
    --r-xl: 22px;
    --r-md: 18px;
  }

  .topbar {
    width: calc(100% - 32px);
    height: 58px;
    margin-bottom: -29px;
    padding: 0 8px 0 16px;
    grid-template-columns: 1fr auto;
  }

  /* The link row is the first thing to go: the logo and the CTA carry the bar
     on a phone, and every destination is reachable from the footer. */
  .topbar nav { display: none; }

  .hero { padding-top: 29px; }

  .hero-frame {
    aspect-ratio: 3 / 4;
    min-height: 0;
  }

  /* On a phone the headline, the paragraph and the button stack into roughly
     the lower half of the frame, so the scrim has to climb much higher than it
     does on the 16:9 desktop crop. */
  .hero-frame::after {
    background:
      linear-gradient(180deg, rgba(26, 19, 12, 0.44) 0%, rgba(26, 19, 12, 0) 20%),
      linear-gradient(0deg,
        rgba(26, 19, 12, 0.93) 0%,
        rgba(26, 19, 12, 0.8) 32%,
        rgba(26, 19, 12, 0.52) 56%,
        rgba(26, 19, 12, 0.14) 80%,
        rgba(26, 19, 12, 0) 100%);
  }

  .hero-overlay {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    inset: auto 20px 22px;
  }

  .hero-overlay h1 { font-size: clamp(30px, 8.4vw, 42px); }

  .hero-aside { justify-self: start; }
  .hero-aside p { font-size: 13.5px; }

  .intro-band,
  .bento,
  .story-grid { grid-template-columns: minmax(0, 1fr); }

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

  /* The arc flips to the bottom edge of the photo once the card stacks. */
  .about-photo {
    order: -1;
    min-height: 220px;
    border-radius: 0 0 50% 50% / 0 0 34% 34%;
  }

  .stat-card { min-height: 0; gap: 34px; }
  .stat-mark { width: 68px; height: 46px; }

  /* Sticky stacking is a desktop affordance — on a phone the cards simply
     flow, otherwise each one holds the viewport on the way past. */
  .step {
    position: static;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .step-photo { order: -1; aspect-ratio: 16 / 10; }

  .tile-dark,
  .tile-photo { grid-column: span 1; }

  .site-footer {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    gap: 18px;
  }

  .site-footer nav,
  .footer-copy,
  .footer-tagline {
    grid-column: 1;
    justify-self: start;
    justify-content: flex-start;
  }

  .legal { width: calc(100% - 32px); }

  .badge-list { --badge-h: 46px; gap: 12px; }
}

/* ----------------------------------------------------------- legal accents */

/* The subtitle rule under a legal <h1>, and the small print some pages close
   with. Both are markup the published legal pages already carry. */

.legal .subtitle {
  padding-left: 14px;
  border-left: 3px solid var(--accent);
}

.legal .muted { font-size: 13.5px; }

/* ------------------------------------------------------------ support page */

/* support.html shipped with markup for a hero, a contact card and a topic grid
   that had no rules behind them, so those blocks rendered as bare text on the
   legal card. They are described here in the same vocabulary as the landing:
   tint blocks, 22px radii, one bronze pill. */

.support-page { width: min(880px, 100% - 48px); }

.support-hero { text-align: center; }

.support-icon {
  display: block;
  margin: 0 auto 18px;
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
}

.support-hero .eyebrow { margin-bottom: 10px; }
.support-hero .legal-meta { max-width: 52ch; margin-inline: auto; }

.support-contact-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 30px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--tint);
}

.support-contact-card p { margin: 0; }

.support-contact-card .lbl {
  margin-bottom: 4px;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.support-contact-card .email {
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.support-mail-button {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  /* Dark ink on the tan fill, matching .pill — white measures 3.4:1 here. */
  color: var(--ink);
  background: var(--accent);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background 200ms var(--ease), transform 160ms var(--ease);
}

.support-mail-button:hover { background: #b8926a; }
.support-mail-button:active { transform: scale(0.975); }

.support-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
  margin: 30px 0 6px;
}

.support-grid article {
  padding: 24px;
  border-radius: var(--r-md);
  background: var(--tint);
}

.support-grid span {
  display: block;
  margin-bottom: 12px;
  color: #cdbda4;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1;
}

/* The card headings sit a step under the section headings the page already
   uses, so the grid reads as one block rather than four new sections. */
.support-grid h2 {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.support-grid p { margin: 0; font-size: 14px; }

@media (max-width: 700px) {
  .support-grid { grid-template-columns: minmax(0, 1fr); }

  .support-contact-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .support-mail-button { width: 100%; justify-content: center; }
}