/* glassfrog.ai — landing page styles. Static, no build step. */

:root {
  color-scheme: dark;
  --bg: #0E0C0A;           /* warm black family (colour review 2026-09-01, 4A): hue ~70°, lightness unchanged */
  --bg-rgb: 14, 12, 10;    /* same colour for rgba() scrims and overlays */
  --bg-2: #17140F;
  --future-bg: #0A0806;
  --glass-rgb: 24, 18, 14; /* hero glass base over the footage (6A): cards, ticker, pause button */
  --ink: #F3EFE7;
  --ink-soft: #B9B3A8;
  --ink-mute: #7E786E;
  --mint: #7EFFD4;        /* Glassfrog Pro accent (technology site); the mint ramp is OKLCH hue 169° (3A) */
  --mint-45: #016540;     /* light-ground eyebrows and arrows (6.3:1 on parchment) */
  --mint-35: #004634;     /* light-ground focus ring (2D; 9.7:1 on parchment) */
  --clay-300: #D9A08A;    /* Lillypad accent on dark grounds: the Lillypad site's #BF7B63 lifted to L .78 (7A) */
  --clay-deep: #9C5C46;   /* Lillypad hover fill on light strips (11B) */
  --parchment: #F6F1E6;   /* Lillypad ground */
  --ink-dark: #1E1B17;
  --ink-dark-soft: #5E574C;
  --line: rgba(255,255,255,.10);
  --line-dark: rgba(30,27,23,.12);
  --sans: 'Manrope', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --nav-h: 72px;
  --invite-h: 50px;        /* the "What is Glassfrog" threshold band; the hero gives up this much of the first view (76 → 50, user: a third less) */
  --radius: 18px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--mint); color: var(--bg); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; border-radius: 4px; }
.light a:focus-visible, .light button:focus-visible { outline-color: var(--mint-35); }   /* mint is 1.1:1 on parchment (2D) */

.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--mint); color: var(--bg); padding: 8px 14px; border-radius: 8px; font-weight: 600; }
.skip:focus { left: 8px; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }

.eyebrow {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mint);
}
.light .eyebrow { color: var(--mint-45); }
.mono { font-family: var(--mono); }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px; border-radius: 999px;
  font-weight: 600; font-size: .95rem; text-decoration: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn.ghost { border: 1px solid rgba(255,255,255,.35); color: var(--ink); background: rgba(var(--bg-rgb), .25); backdrop-filter: blur(6px); }
.btn.ghost:hover { border-color: var(--mint); color: var(--mint); }
.light .btn.ghost { border-color: rgba(30,27,23,.3); color: var(--ink-dark); background: transparent; backdrop-filter: none; }
.light .btn.ghost:hover { border-color: var(--ink-dark); background: var(--ink-dark); color: var(--parchment); }

/* ---------- header ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 clamp(20px, 4vw, 48px);
  color: var(--ink);
  background: transparent;
  transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled { background: rgba(var(--bg-rgb), .82); backdrop-filter: blur(12px); border-color: var(--line); }

.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand-word { font-weight: 700; letter-spacing: -.02em; font-size: 1.2rem; }
.brand-tld { color: var(--mint); font-weight: 500; }

.menu { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px); }
.menu a { text-decoration: none; font-weight: 500; font-size: .95rem; color: rgba(243,239,231,.85); transition: color .2s; }
.menu a:hover { color: var(--mint); }

.burger { display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.burger span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s ease, opacity .25s ease; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .burger { display: flex; }
  .menu {
    position: fixed; inset: var(--nav-h) 0 0 0;
    flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px;
    padding: 0 28px 10vh;
    background: rgba(var(--bg-rgb), .96); backdrop-filter: blur(16px);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
  }
  .menu.open { opacity: 1; transform: none; pointer-events: auto; }
  .menu a { font-size: 2rem; font-weight: 600; letter-spacing: -.02em; padding: 6px 0; }
  body.menu-open { overflow: hidden; }
  body.menu-open .nav { background: rgba(var(--bg-rgb), .96); }
}

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden;
  /* film + ticker + the invite band fill the opening view; vh first as the fallback for browsers without svh */
  min-height: calc(100vh - var(--invite-h));
  min-height: calc(100svh - var(--invite-h));
  display: flex; flex-direction: column;
  background: var(--bg);
}
/* main.js sets .full when the hero's own content is too tall for the band to fit as well: the hero then takes the
   whole window and the band starts at the fold (the ticker's existing rule), instead of showing a clipped sliver */
.hero.full { min-height: 100vh; min-height: 100svh; }
.hero-video, .hero-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-poster { display: none; background: url(media/poster-v11.jpg) center/cover no-repeat; }
.hero.static .hero-video { display: none; }
.hero.static .hero-poster { display: block; }
.hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(var(--bg-rgb), .62) 0%, rgba(var(--bg-rgb), .18) 38%, rgba(var(--bg-rgb), .15) 60%, rgba(var(--bg-rgb), .85) 100%),
    linear-gradient(to right, rgba(var(--bg-rgb), .40), transparent 55%);
}

/* lede top-left, product cards bottom-right */
.hero-grid {
  position: relative; flex: 1;
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  padding: calc(var(--nav-h) + 6vh) clamp(20px, 4vw, 48px) 0;
}
.lede {
  /* three fixed lines: Understand / your body like / never before */
  font-size: clamp(2.5rem, 6vw, 5.4rem);
  font-weight: 500; letter-spacing: -.035em; line-height: 1.02;
  text-shadow: 0 2px 30px rgba(0,0,0,.5);
}

/* product cards */
.products {
  align-self: flex-end;
  display: flex; flex-direction: column; gap: 12px;
  width: min(100%, 520px);
  padding-bottom: 22px;
}
.card {
  --accent: var(--mint);               /* Glassfrog Pro card */
  position: relative;
  display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; column-gap: 16px; align-items: start;
  padding: 14px 18px 14px 14px;
  background: rgba(var(--glass-rgb), .72); backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: var(--ink);
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.card.lillypad { --accent: var(--clay-300); }  /* Lillypad hue, lifted for the dark card (7A) */
.card:hover, .card:focus-visible { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: rgba(var(--glass-rgb), .85); transform: translateY(-2px); }
.card-media { width: 84px; height: 84px; border-radius: 10px; overflow: hidden; background: #000; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-body { display: flex; flex-direction: column; min-width: 0; }
.card-body .eyebrow { line-height: 1.4; margin-bottom: 3px; color: var(--accent); }
.card-title { font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.card-tag { margin-top: 4px; font-size: .9rem; color: var(--ink-soft); line-height: 1.35; text-wrap: balance; }
/* note: balance gives up if the tag contains nowrap child spans — hyphenated words are held together with U+2060 in the HTML instead */
.card-arrow { align-self: center; font-size: 1.5rem; color: var(--accent); transition: transform .25s ease; }
.card:hover .card-arrow { transform: translateX(4px); }

/* the line that doesn't fit: a hairline strip inside the card; scrolls (looping) only on hover */
.marquee {
  display: block; overflow: hidden; white-space: nowrap;
  margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: .76rem; letter-spacing: .02em; color: var(--accent);
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
          mask-image: linear-gradient(90deg, #000 88%, transparent);
}
/* 16 s is the Lillypad line's pace; main.js rescales every line's duration to its width so all scroll at the same px/s */
.marquee .track { display: inline-block; animation: slide 16s linear infinite; animation-play-state: paused; will-change: transform; }
.card:hover .marquee .track, .card:focus-visible .marquee .track { animation-play-state: running; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ticker: hover to scroll, as in the reference */
.ticker {
  position: relative; z-index: 2;
  border-top: 1px solid var(--line);
  background: rgba(var(--glass-rgb), .78); backdrop-filter: blur(10px);
  overflow: hidden; white-space: nowrap;
  font-family: var(--mono); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(243,239,231,.85);
  padding: 13px 0;
}
.ticker .track { display: inline-block; animation: slide 60s linear infinite; animation-play-state: paused; will-change: transform; }
.ticker:hover .track { animation-play-state: running; }
.ticker i { display: inline-block; width: 3.5em; }   /* plain gap between phrases, no separator glyph */

/* touch devices have no hover: let the loops run on their own */
@media (hover: none) {
  .marquee .track, .ticker .track { animation-play-state: running; }
}

.pause-btn {
  position: absolute; left: 18px; bottom: 64px; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35); background: rgba(var(--glass-rgb), .5); color: #fff;
  cursor: pointer; backdrop-filter: blur(6px);
  display: grid; place-items: center;
}
.pause-btn:hover { background: rgba(var(--glass-rgb), .8); }
.pause-btn[hidden] { display: none; }   /* the display:grid above would otherwise beat the hidden attribute the script relies on */
.pause-btn .ic-play { display: none; }
.pause-btn.paused .ic-play { display: block; }
.pause-btn.paused .ic-pause { display: none; }

@media (max-width: 960px) {
  .hero-grid { padding-top: calc(var(--nav-h) + 3vh); gap: 32px; }
  .products { width: 100%; align-self: stretch; }
  .pause-btn { bottom: auto; top: calc(var(--nav-h) + 8px); right: 16px; left: auto; }
}
@media (max-width: 520px) {
  .card { grid-template-columns: 68px minmax(0, 1fr) auto; column-gap: 12px; padding: 12px 14px 12px 12px; }
  .card-media { width: 68px; height: 68px; }
  .card-title { font-size: 1.15rem; }
}

/* ---------- the threshold: film above, reading page below ---------- */
/* "What is Glassfrog ↓" is the first line of the reading page, pulled up into the opening view. It sits on the
   ground of the section it leads to (one surface once you arrive), in the page's reading type, at the reading
   column's left edge so it lines up with the heading below. On screen at page-open whenever the hero content
   fits; below the fold with the ticker when it does not. */
.invite { height: var(--invite-h); background: var(--future-bg); display: flex; align-items: center; }
.invite .wrap { width: 100%; }
.invite a {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 1.2rem; font-weight: 500; letter-spacing: -.01em;
  color: rgba(243,239,231,.85); text-decoration: none;
  transition: color .2s ease;
}
.invite a i { font-style: normal; color: var(--mint); transition: transform .25s ease; }
.invite a:hover, .invite a:focus-visible { color: var(--mint); }
.invite a:hover i, .invite a:focus-visible i { transform: translateY(3px); }

/* ---------- sections ---------- */
.sec { padding: clamp(72px, 10vw, 128px) 0; }
.sec.dark { background: var(--bg); color: var(--ink); }
.sec.light { background: var(--parchment); color: var(--ink-dark); }
.sec-head { max-width: 760px; }
.sec h2 {
  margin-top: 14px;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  font-weight: 600; letter-spacing: -.03em; line-height: 1.12;
  text-wrap: balance;
}
.sec .sub { margin-top: 18px; font-size: 1.1rem; color: var(--ink-soft); max-width: 60ch; text-wrap: pretty; }
.light .sub { color: var(--ink-dark-soft); }

/* recurring product strip between sections */
.ctas { padding: 22px 0; }
.ctas.dark { background: var(--bg); color: var(--ink); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ctas.light { background: var(--parchment); color: var(--ink-dark); border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.ctas-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.ctas-label { font-family: var(--mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; margin-right: 8px; }
.ctas.dark .ctas-label { color: var(--ink-soft); }         /* 1A: per-ground label colour (ink-mute was 3.9:1 on parchment) */
.ctas.light .ctas-label { color: var(--ink-dark-soft); }
.ctas .btn { padding: 9px 18px; font-size: .9rem; }
.ctas .btn small { font-size: .8rem; font-weight: 500; opacity: .7; }
.ctas .btn i { font-style: normal; color: var(--mint); }
.ctas.light .btn i { color: var(--mint-45); }
/* 11B: each strip button previews the world it leads to. Light strips: Lillypad fills clay-deep,
   Glassfrog Pro fills ink-dark with mint text (user). Dark strips: Lillypad hovers clay-300, Pro hovers mint. */
.ctas.light .btn.to-lillypad:hover { background: var(--clay-deep); border-color: var(--clay-deep); color: var(--parchment); }
.ctas.light .btn.to-lillypad:hover i { color: var(--parchment); }
.ctas.light .btn.to-pro:hover { background: var(--ink-dark); border-color: var(--ink-dark); color: var(--mint); }
.ctas.light .btn.to-pro:hover i { color: var(--mint); }
.ctas.dark .btn.to-lillypad:hover { border-color: var(--clay-300); color: var(--clay-300); }
.ctas.dark .btn.to-lillypad:hover i { color: var(--clay-300); }
main > .ctas:last-child { border-bottom: 0; }   /* the footer brings its own hairline */

/* dark→light transitions (user pick, 2026-09-02, option A): the dark block above casts a soft shadow
   onto the top of a light section, the dark block below onto the bottom of its light strip, so the
   parchment reads as a page set into the dark frame. Nothing at the light section→light strip seam. */
.sec.light { box-shadow: inset 0 30px 44px -30px rgba(0,0,0,.6); }
.ctas.light { box-shadow: inset 0 -24px 36px -24px rgba(0,0,0,.5); border-top-color: rgba(30,27,23,.10); }

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.chips li { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-dark); background: rgba(255,255,255,.45); font-size: .9rem; font-weight: 500; }

/* contactless: the waveform-bed photo as a full-bleed background, text on the darker left */
.sec.dark.contactless { position: relative; overflow: hidden; min-height: 72vh; display: flex; align-items: center; }
.contactless-bg { position: absolute; inset: 0; }
.contactless-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.contactless-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right, rgba(var(--bg-rgb), .90) 0%, rgba(var(--bg-rgb), .62) 42%, rgba(var(--bg-rgb), .12) 100%),
    linear-gradient(to bottom, rgba(var(--bg-rgb), .45), transparent 28%, transparent 72%, rgba(var(--bg-rgb), .55));
}
.contactless .wrap { position: relative; z-index: 1; width: 100%; }
.contactless .sec-head { max-width: 600px; }
.contactless .chips li { border-color: var(--line); background: rgba(255,255,255,.08); color: var(--ink); backdrop-filter: blur(4px); }

/* why */
.why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.why-grid article { padding: 28px; border-radius: var(--radius); background: rgba(255,255,255,.55); border: 1px solid var(--line-dark); }
.why-grid h3 { margin-top: 12px; font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.why-grid p:last-child { margin-top: 10px; color: var(--ink-dark-soft); font-size: .98rem; }

/* team */
.team { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }   /* five across on a wide window, then 4 / 3 / 2 / 1 */
.team li { padding: 22px 20px; border-radius: var(--radius); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; background: var(--bg-2); }
.team .avatar { display: block; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; margin-bottom: 12px; box-shadow: 0 0 0 1px var(--line); }   /* headshots: 216 px squares, eyes near 42 % from the top, graded to one warm-neutral set */
.team .avatar img { width: 100%; height: 100%; object-fit: cover; }
.team strong { color: var(--ink); font-size: 1.05rem; letter-spacing: -.01em; line-height: 1.2; }
.team .role { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mint); margin-top: 2px; }
.team p { margin-top: 8px; font-size: .9rem; line-height: 1.5; color: var(--ink-soft); }
/* team on the light ground */
.light .team li { background: rgba(255,255,255,.55); border-color: var(--line-dark); }
.light .team .avatar { box-shadow: 0 0 0 1px var(--line-dark); }   /* hairline ring keeps light photo edges off the parchment */
.light .team strong { color: var(--ink-dark); }
.light .team .role { color: var(--mint-45); }
.light .team p { color: var(--ink-dark-soft); }

/* future — the one place the glass frog appears */
.sec.dark.future { position: relative; overflow: hidden; background: var(--future-bg); }   /* .sec.dark outranked the old .future rule, so its ground never applied */
.future-frog {
  /* Belongs to a bubble (the MRI bubble; the top bubble once the grid is one column). Fixed size — it does
     not shrink with the page (user) — at the milestone's 820×667. Centre sits 0.908 W right of the bubble's
     left edge and 0.24 W below its top (a touch higher than the measured 0.385 W, per the user's screenshot),
     so the frog keeps its place against the bubble and rides off-screen to the right on narrow viewports. */
  position: absolute; z-index: 0; left: 90.84%; top: 0; margin-top: 105px;   /* vertical anchor fixed in px so it does not drift as the bubble narrows (user) */
  width: 820px; max-width: none; height: 667px;
  transform: translate(-50%, -50%) rotate(-12deg);
  opacity: .55; pointer-events: none;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 55% 55% at 50% 50%, #000 40%, transparent 100%);
          mask-image: radial-gradient(ellipse 55% 55% at 50% 50%, #000 40%, transparent 100%);
}
.future-frog.frog-first { display: none; }
.future .wrap { position: relative; z-index: 1; }
.future-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 44px; max-width: 900px; }
/* Room for the whole frog to the right of the bubbles (user): the grid narrows with the window so the frog —
   fixed 820 px wide, centred 0.908 W right of the MRI bubble's left edge, visible to ~309 px right of its centre
   at the reference layout — never runs past the viewport edge. Solved from the reference geometry at 1270 px. */
.future-grid { max-width: min(900px, calc((100vw + 402px) / 1.908 + 24px)); }   /* 402 = 418 − 16: 100vw counts a classic scrollbar, the layout does not */
@media (max-width: 1180px) {
  .future-grid { max-width: calc((200% + 2 * clamp(20px, 4vw, 48px) - 666px) / 1.908 + 24px); }
}
/* placed after the grid rules above so it wins the cascade at equal specificity */
@media (max-width: 960px) {   /* one column: below this the two bubbles would be too thin once the frog is given its room */
  /* one column: the room for the frog on the right shrinks with the window (user) — from ~212 px at the
     960 px switch (the room the two-column layout left there) to nothing at the 560 px phone breakpoint. */
  .future-grid { grid-template-columns: 1fr; max-width: calc(100% - 0.53 * (100vw - 560px)); }
  .future-frog.frog-second { display: none; }
  .future-frog.frog-first { display: block; }
}
@media (max-width: 560px) {
  .future-grid { max-width: none; }
}
.future h2 { margin-top: 0; }   /* no eyebrow above it */
.future .sec-head { max-width: 900px; }   /* lets "Breakthrough Technology • Human Mission." sit on one line at desktop widths */
/* glass-overs made more transparent (user 2026-09-01, first try) so the frog's insides read through them */
.future-grid article { position: relative; padding: 28px; border-radius: var(--radius); border: 1px solid var(--line); }
/* the glass is a pseudo-element so the frog can sit beneath it inside the same bubble */
.future-grid article::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(var(--bg-rgb), .45); backdrop-filter: blur(6px); z-index: 1; }
.future-grid article > :not(.future-frog) { position: relative; z-index: 2; }
.future-grid h3 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
.future-grid p { margin-top: 10px; color: var(--ink-soft); }

/* footer */
.footer { background: var(--bg); color: var(--ink-soft); border-top: 1px solid var(--line); padding: 40px 0; }
.foot-grid { display: grid; grid-template-columns: auto 1fr auto; gap: 24px 40px; align-items: center; }
.footer nav { display: flex; flex-wrap: wrap; gap: 20px; }
.footer nav a { text-decoration: none; font-weight: 500; font-size: .92rem; }
.footer nav a:hover { color: var(--mint); }
.footer .brand-word { color: var(--ink); }
.fine { font-size: .78rem; max-width: 34ch; line-height: 1.5; text-align: right; }

@media (max-width: 860px) {
  .why-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .fine { text-align: left; max-width: none; }
}
@media (max-width: 560px) {
  .why-grid { grid-template-columns: 1fr; }
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* The strips simply never scroll: one clipped line under the same fade, exactly the desktop resting state.
     (Until 2026-09-03 they were unwrapped into multi-line blocks here — an iPhone with Reduce Motion on showed
     the ticker as six lines of text; see DECISIONS.) */
  .marquee .track, .ticker .track { animation: none; }
  .marquee .track span:not(:first-child), .ticker .track span:not(:first-child) { display: none; }
  .card, .card-arrow, .btn, .invite a, .invite a i { transition: none; }
}