/* flowstate.build version 2: the homepage and For creators, from the website
   prototype (workspace .claude/go-to-market/website/prototype/). One dark
   ground lit by the sun's glow, real screens in upright phones, one button.
   /support, /joined and the 404 keep site.css. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/fonts/inter-latin.woff2) format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/newsreader-latin.woff2) format("woff2");
}

:root {
  --ground: #050506;
  --card: #131111;
  --line: rgba(243, 238, 231, 0.1);
  --ink: #F3EEE7;
  --ink-2: rgba(243, 238, 231, 0.74);
  --ink-3: rgba(243, 238, 231, 0.48);
  --ink-4: rgba(243, 238, 231, 0.36);
  --accent: #FF6B35;
  --display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --body: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --radius: 12px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 1.0625rem/1.6 var(--body); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
.wrap { max-width: 74rem; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
p { margin: 0; }
.eyebrow { font: 500 0.78rem/1 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.lede { color: var(--ink-2); font-size: 1.12rem; max-width: 30rem; }
section { position: relative; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* the light: Rey's grain art (brand art, 17 Oct 2026), never drawn. The grain is in the images; nothing is laid on top. */
.art-ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.hero .eyebrow { margin-bottom: 1.1rem; }

/* entrance: one soft rise, off for reduced motion */
.rise { animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.d1 { animation-delay: 0.08s; }
.d2 { animation-delay: 0.16s; }
.d3 { animation-delay: 0.24s; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 0.5rem; font: 500 0.95rem/1 var(--body); padding: 0.8rem 1.15rem; border-radius: var(--radius); text-decoration: none; border: 1px solid transparent; cursor: pointer; }
.btn-light { background: var(--ink); color: #0B0A0A; }
.badge img { height: 56px; width: auto; }
@media (min-width: 900px) { .badge img { height: 64px; } }
.badge { display: inline-block; border-radius: 9px; }
.get { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }

/* top bar */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--ground) 72%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 2rem; height: 64px; }
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.mark { width: 28px; height: 28px; border-radius: 50%; flex: none; }
.wordmark { height: 26px; width: auto; display: block; }
.nav { display: flex; gap: 1.6rem; margin-left: auto; }
.nav a { color: var(--ink-2); text-decoration: none; font-size: 0.93rem; }
.nav a:hover { color: var(--ink); }
.top .btn { padding: 0.62rem 1rem; font-size: 0.9rem; }
@media (max-width: 760px) { .nav { display: none; } .top .btn { margin-left: auto; } }

/* first screen: the G5 volcanic ring from the brand art, framing the phone */
.hero { overflow: hidden; padding-block: 5.5rem 6rem; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; background: linear-gradient(to bottom, rgba(5, 5, 6, 0), var(--ground)); pointer-events: none; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 2rem; position: relative; z-index: 1; }
.hero h1 { font-size: clamp(2.7rem, 6.2vw, 4.6rem); line-height: 1.02; }
.hero .copy { display: grid; gap: 1.4rem; max-width: 34rem; position: relative; z-index: 2; }
.hero .stage { position: relative; z-index: 1; display: grid; place-items: center; min-height: 600px; }
.hero .art-ring { display: block; width: calc(var(--hero-phone, 290px) * 2.43); max-width: none; height: auto; -webkit-mask-image: radial-gradient(closest-side, #000 80%, transparent 100%); mask-image: radial-gradient(closest-side, #000 80%, transparent 100%); }
.hero .stage .phone { z-index: 1; width: var(--hero-phone, 290px); }
.free { color: var(--ink-3); font-size: 0.85rem; }
@media (max-width: 860px) {
  .hero { padding-block: 2.5rem 3.5rem; }
  .hero .wrap { grid-template-columns: 1fr; text-align: left; }
  .hero .stage { min-height: 520px; margin-top: 1rem; }
}

/* phone */
.phone { width: 290px; max-width: 100%; padding: 10px; border-radius: 50px; position: relative;
  background: linear-gradient(140deg, #6C6C72 0%, #2A2A2E 18%, #141416 46%, #232326 78%, #5C5C62 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), inset 0 0 0 2.5px #0A0A0B; }
.phone .screen { position: relative; border-radius: 41px; overflow: hidden; aspect-ratio: 1320 / 2868; background: #000; }
.phone .screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* sections */
.band { padding-block: 6.5rem; }
#inside { overflow: hidden; }
.band-head { display: grid; gap: 0.9rem; margin-bottom: 3rem; max-width: 40rem; }
.band-head h2 { font-size: clamp(2.1rem, 4.2vw, 3.2rem); line-height: 1.06; }
.center { text-align: center; margin-left: auto; margin-right: auto; justify-items: center; }

/* how it works */
.row { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.step { display: grid; gap: 1.1rem; justify-items: center; align-content: start; text-align: center; }
.step .num { font: 500 0.78rem/1 var(--body); color: var(--accent); letter-spacing: 0.1em; }
.step h3 { font-size: 1.55rem; line-height: 1.15; }
.step p { color: var(--ink-3); font-size: 0.93rem; max-width: 16rem; }
.step .phone { width: 250px; }
.dots { display: none; justify-content: center; gap: 0.5rem; margin-top: 1.4rem; }
@media (max-width: 860px) {
  .row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72vw; gap: 0.9rem; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(50% - 50vw); padding: 0 14vw 0.5rem; scroll-padding-inline: 14vw; scrollbar-width: none; }
  .row::-webkit-scrollbar { display: none; }
  .step { scroll-snap-align: center; }
  .dots { display: flex; }
}
.dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; background: rgba(243, 238, 231, 0.28); cursor: pointer; transition: width 0.25s ease, background 0.25s ease; }
/* the step you are on: the same round dot, lit (Rey, 2026-10-25: dots only, no pill) */
.dots button[aria-current="true"] { background: var(--ink); }

/* inside the app */
.switch { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: max-content; margin: 0 auto; padding: 4px; border-radius: 999px; background: #151313; border: 1px solid var(--line); gap: 2px; }
.switch button { font: 500 0.92rem/1 var(--body); color: var(--ink-3); background: transparent; border: 0; padding: 0.7rem 1.1rem; border-radius: 999px; cursor: pointer; }
.switch button[aria-selected="true"] { background: var(--ink); color: #0B0A0A; }
/* your words in a card, the phone beside it overlapping the card's right edge, nothing under the phone */
.demo { position: relative; max-width: 1040px; margin: 2.5rem auto 0; padding-top: 3.5rem; min-height: 740px; }
.said { position: relative; width: 82%; min-height: 520px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.said-bar { display: flex; align-items: center; gap: 0.6rem; padding: 0.95rem 1.4rem; border-bottom: 1px solid var(--line); color: var(--ink-3); font-size: 0.82rem; letter-spacing: 0.02em; }
.said-bar .rec { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.said-bar .wave { width: 120px; height: 16px; stroke: var(--ink-3); stroke-width: 2.4; stroke-linecap: round; opacity: 0.8; }
.said-body { padding: 2.6rem 2.6rem 2.8rem; padding-right: 170px; }
.said-words { font: 400 clamp(1.1rem, 1.5vw, 1.38rem)/1.55 var(--display); color: var(--ink); }
.said-words mark { background: rgba(255, 107, 53, 0.24); color: var(--ink); padding: 0.04em 0.14em; border-radius: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.becomes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 2rem; }
.becomes .lbl { font: 500 0.72rem/1 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-right: 0.3rem; }
.becomes .chip { font-size: 0.86rem; padding: 0.45rem 0.75rem; border-radius: 10px; background: #1B1817; border: 1px solid var(--line); color: var(--ink-2); }
.demo-phone { position: absolute; top: 0; right: 0; z-index: 1; }
.demo-phone .phone { width: 300px; }
@media (max-width: 860px) {
  .demo { min-height: 0; padding-top: 0; display: flex; flex-direction: column; align-items: center; }
  .demo-phone { position: relative; order: -1; }
  .demo-phone .phone { width: 270px; }
  /* one card frame under the phone, the four cards' words stacked in it; it is as tall as the card showing,
     and while they slide home.js eases it between the two */
  .saids { display: grid; align-items: start; width: 100%; margin-top: -4.5rem; background: var(--card); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
  .said { grid-area: 1 / 1; width: auto; min-height: 0; padding-top: 4.5rem; background: none; border: 0; border-radius: 0; }
  .said-body { padding: 1.8rem 1.4rem 2rem; }
}
/* Swipe on phones and tablets (Rey, 2026-10-29): the tab's light, the phone's screen and the card's words slide
   together, and a sideways swipe on the phone or the card carries them with the finger. home.js sets --i, the
   tab showing (in fractions while it moves), and --k, each screen's and card's place; up and down still scroll
   the page. The tabs not showing are inert: slid aside here, not shown on computers. */
.switch .light { display: none; }
@media (max-width: 860px) {
  .js .demo { touch-action: pan-y pinch-zoom; }
  .js .said { transform: translateX(calc((var(--k) - var(--i)) * 100%)); will-change: transform; }
  .js .demo .screen img { transform: translateX(calc((var(--k) - var(--i)) * (100% + 12px))); will-change: transform; }
  .js .switch { position: relative; }
  .js .switch button[aria-selected="true"] { background: transparent; color: var(--ink-3); }
  /* the light: a copy of the labels in dark on cream, cut to the tab under --i (home.js measures the tabs into
     --l and --w, since a long label makes its tab wider) */
  .js .switch .light { display: grid; position: absolute; inset: 0; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 4px; background: var(--ink); pointer-events: none;
    clip-path: inset(4px calc(100% - var(--l) - var(--w)) 4px var(--l) round 999px); }
  .js .switch .light button { color: #0B0A0A; }
}
@media (min-width: 861px) { .demo [inert] { display: none; } }

/* film */
.film { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 9; max-width: 100%; background: #000; }
.film video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.film button { position: absolute; left: 2rem; bottom: 1.8rem; display: inline-flex; align-items: center; gap: 0.7rem; background: none; border: 0; color: #fff; font: 400 2rem/1 var(--display); cursor: pointer; }
.film button::before { content: ""; width: 0; height: 0; border-left: 16px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.film .shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 45%); pointer-events: none; }
/* Short laptop windows: the film and its title fit the screen together */
@media (min-width: 861px) { .film { max-width: min(100%, calc((100vh - 230px) * 16 / 9)); margin-inline: auto; } }

/* letter */
.letter-a { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 4rem; align-items: stretch; }
.letter-a .portrait { position: relative; }
.letter-a .portrait img { width: 100%; height: 100%; min-height: 34rem; object-fit: cover; border-radius: 6px; }
.letter-body { display: grid; gap: 1.15rem; max-width: 36rem; font-size: 1.06rem; color: var(--ink-2); text-wrap: pretty; }
.letter-body h2 { font-size: clamp(2.1rem, 4vw, 3rem); line-height: 1.06; color: var(--ink); margin-bottom: 0.4rem; }
.letter-body mark { color: var(--ink); background: linear-gradient(transparent 6%, rgba(255, 107, 53, 0.2) 6%, rgba(255, 107, 53, 0.2) 94%, transparent 94%); padding: 0.06em 0.2em; margin: 0 -0.1em; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background 0.8s ease; }
.letter-body mark.lit { background: linear-gradient(transparent 6%, rgba(255, 107, 53, 0.42) 6%, rgba(255, 107, 53, 0.42) 94%, transparent 94%); }
.sign-who { font-size: 0.88rem; color: var(--ink-3); margin-top: 0.6rem; }
.sign-who b { color: var(--ink); font-weight: 500; display: block; }
@media (max-width: 860px) {
  .letter-a { grid-template-columns: 1fr; gap: 2rem; }
  .letter-a .portrait img { min-height: 0; aspect-ratio: 3 / 4; height: auto; }
}

/* one line */
.oneline { overflow: hidden; padding-block: 7rem 9rem; text-align: center; }
.oneline .art-sun { display: block; width: min(380px, 78vw); height: auto; margin: 0 auto 2.6rem; -webkit-mask-image: radial-gradient(closest-side, #000 82%, transparent 100%); mask-image: radial-gradient(closest-side, #000 82%, transparent 100%); }
.oneline h2 { position: relative; line-height: 1.08; margin: 0 auto; }
/* Rey: two lines read, three get skipped. The first line never wraps on a laptop or tablet; the type scales with the window */
.oneline h2.two { max-width: none; font-size: min(4rem, 4.8vw); }
.oneline h2.two > span { display: block; }
.oneline h2.two .l1 { white-space: nowrap; }
@media (max-width: 699px) {
  .oneline h2.two { font-size: min(2.5rem, 8.6vw); }
  .oneline h2.two .l1 { white-space: normal; }
  .oneline h2.two .l1 > span { display: block; }
}
.oneline .cta { position: relative; margin-top: 2.2rem; }

/* questions */
.qs { max-width: 46rem; margin: 0 auto; border-top: 1px solid var(--line); }
.q { border-bottom: 1px solid var(--line); }
.q button { width: 100%; display: flex; justify-content: space-between; gap: 1rem; align-items: center; background: none; border: 0; color: var(--ink); text-align: left; font: 400 1.08rem/1.4 var(--body); padding: 1.25rem 0; cursor: pointer; }
.q button::after { content: "+"; font-size: 1.4rem; color: var(--ink-3); line-height: 1; transition: transform 0.25s; }
.q button[aria-expanded="true"]::after { transform: rotate(45deg); }
.q .a { color: var(--ink-2); padding: 0 2.5rem 1.4rem 0; max-width: 40rem; }
/* an answer of two paragraphs, the price one with the note from the team (Rey, 2026-10-26) */
.q div.a { display: grid; gap: 0.8rem; }

/* last button */
.close-band { background: #E2481C url("/assets/img/bg-g1-band.webp") center / cover; color: #140A05; overflow: hidden; padding-block: 8rem; text-align: center; }
@media (max-width: 600px) { .close-band { background-image: url("/assets/img/bg-g1-band-phone.webp"); } }
.close-band h2 { position: relative; font-size: clamp(2.8rem, 7vw, 5.6rem); line-height: 1; color: #120804; }
.close-band .get { position: relative; justify-content: center; margin-top: 2.4rem; }

/* for creators */
.jobs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.jobs p { border-top: 1px solid var(--line); padding-top: 1.1rem; font-family: var(--display); font-size: 1.55rem; line-height: 1.2; }
@media (max-width: 860px) { .jobs { grid-template-columns: 1fr; } }

/* footer */
footer.site { padding-block: 4rem 4.5rem; border-top: 1px solid var(--line); }
.cols { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 2rem; }
.cols h4 { margin: 0 0 0.9rem; font: 500 0.85rem/1 var(--body); color: var(--ink); }
.cols a { display: block; color: var(--ink-3); text-decoration: none; font-size: 0.9rem; margin-bottom: 0.55rem; }
.cols a:hover { color: var(--ink); }
.cols a.brand { display: flex; color: var(--ink); margin-bottom: 0; }
.signoff { font-family: var(--display); font-size: 1.1rem; line-height: 1.4; margin-top: 1rem; }
.signoff span { display: block; color: var(--ink-3); }
.signoff .last { color: var(--ink); }
/* "creators" fades from cream to orange red like the wordmark, with the wordmark's own colors (Rey, 2026-10-25) */
.signoff .ombre { display: inline; color: var(--accent); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .signoff .ombre { background: linear-gradient(90deg, #F9F5DF 0%, #F9F5DF 30%, #F9E9B7 42%, #FABD2B 52%, #FA850E 64%, #FA6905 76%, #FA4900 88%, #FA3E00 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
}
.legal { margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 0.78rem; display: grid; gap: 0.4rem; }
@media (max-width: 760px) { .cols { grid-template-columns: 1fr 1fr; } .cols > div:first-child { grid-column: 1 / -1; } }

/* What Google's homepage rule asks for, folded (Rey, 2026-09-28): the same text
   stays in the page, a native details element, readable without JavaScript. */
details.note { max-width: 40rem; margin-bottom: 0.6rem; color: var(--ink-4); line-height: 1.55; }
details.note summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; color: var(--ink-3); }
details.note summary::-webkit-details-marker { display: none; }
details.note summary::after { content: ""; width: 6px; height: 6px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 0.2s ease; }
details.note[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }
details.note summary:hover { color: var(--ink-2); }
details.note p { margin: 8px 0 0; }

/* The waitlist sheet behind every App Store button until the listing is public.
   It opens by script (assets/waitlist.js), or by #waitlist when scripts do not run. */
.sheet { position: fixed; inset: 0; z-index: 40; display: none; place-items: center; padding: 16px; }
html:not(.js) .sheet:target, .sheet.open { display: grid; }
html.sheet-open { overflow: hidden; }
.sheet .scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fade 0.25s ease both; }
.sheet .card { position: relative; width: min(100%, 24rem); padding: 32px 24px 20px; text-align: center; border-radius: 20px; background: #0f0d0d; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 rgba(255, 180, 140, 0.12), 0 30px 80px -20px rgba(0, 0, 0, 0.8); animation: sheet-up 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.sheet .icon { width: 64px; height: 64px; margin: 0 auto; border-radius: 15px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09), 0 18px 50px -14px rgba(255, 107, 53, 0.42); }
.sheet h2 { margin: 20px 0 8px; font: 400 24px/1.25 var(--display); text-wrap: balance; }
.sheet .lede { margin: 0 0 20px; max-width: none; font-size: 15px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.sheet input[type="email"], .sheet input[name="instagram"] { width: 100%; height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.04); color: var(--ink); font: 16px var(--body); }
.sheet input[type="email"]::placeholder, .sheet input[name="instagram"]::placeholder { color: var(--ink-4); }
.sheet input[name="instagram"] { margin-top: 10px; }
.sheet input[type="email"]:focus, .sheet input[name="instagram"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.18); }
.sheet button { width: 100%; height: 48px; margin-top: 10px; border: 0; border-radius: 12px; background: var(--ink); color: #0b0a0a; font: 600 16px var(--body); cursor: pointer; }
.sheet button:disabled { opacity: 0.6; cursor: default; }
.sheet .status { min-height: 20px; margin: 10px 0 0; font-size: 13px; color: #ff9566; }
.sheet .fine { margin: 12px 0 0; font-size: 12px; color: var(--ink-3); }
.sheet .fine a { color: var(--ink-3); }
.sheet .fine span { margin: 0 8px; }
.sheet .thanks { display: none; }
.sheet.done .ask { display: none; }
.sheet.done .thanks { display: block; }
/* after joining: the note from the team in its beta words, rising in with one glow of the icon (Rey, 2026-10-26) */
.sheet .thanks .lede { margin-bottom: 10px; }
.sheet .thanks .lede:last-child { margin-bottom: 0; }
.sheet.done .thanks { animation: rise 0.42s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.sheet.done .icon { animation: icon-glow 0.9s ease-out both; }
@keyframes icon-glow { 35% { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 18px 70px -6px rgba(255, 107, 53, 0.85); } }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@keyframes sheet-up { from { opacity: 0; transform: translateY(16px) scale(0.98); } }
@keyframes fade { from { opacity: 0; } }

/* Screen sizes (Rey, 21 Oct): on a phone each section's title and its key visual fit one screen */
@media (max-width: 600px) {
  .band { padding-block: 4rem; }
  .band-head { margin-bottom: 1.8rem; gap: 0.6rem; }
  .hero { padding-block: 2.2rem 2.5rem; }
  .hero .copy { gap: 1.1rem; }
  :root { --hero-phone: min(236px, 61vw); }
  .hero .stage { min-height: 0; margin-top: 2.2rem; padding-block: 1.5rem; }
  .step .phone { width: min(216px, 56vw); }
  .row { grid-auto-columns: 64vw; padding-inline: 18vw; scroll-padding-inline: 18vw; }
  .demo-phone .phone { width: min(216px, 56vw); }
  .switch { width: 100%; max-width: 26rem; }
  .switch button { padding: 0.65rem 0.2rem; }
  .saids { margin-top: -3.5rem; }
  .said { padding-top: 3.5rem; }
  .said-body { padding: 1.4rem 1.2rem 1.6rem; }
  .becomes { margin-top: 1.3rem; }
  .becomes .chip { padding: 0.38rem 0.6rem; }
  .oneline { padding-block: 4.5rem 5.5rem; }
  .oneline .art-sun { width: min(300px, 70vw); margin-bottom: 1.8rem; }
  .close-band { padding-block: 5rem; }
}
/* Type on phones (Rey, 2026-10-28, "B, quiet"): one scale for every screen under 601 px. The desktop sizes
   hit their floors on a phone and left 22 sizes, titles barely above the text and a first headline smaller
   than the last. Titles 42, 38, 30, 21; text 16 and 15; small print 14, 13, 12, 11. Section titles stay
   centred (his D2). Tablets and computers keep the sizes above. */
@media (max-width: 600px) {
  body { font-size: 0.9375rem; line-height: 1.55; }
  .eyebrow { font-size: 0.6875rem; letter-spacing: 0.14em; }
  .hero h1 { font-size: min(2.625rem, 10.8vw); line-height: 1.02; letter-spacing: -0.015em; }
  .lede { font-size: 1rem; line-height: 1.5; }
  .free { font-size: 0.8125rem; }
  .band-head h2, .letter-body h2 { font-size: min(1.875rem, 7.8vw); line-height: 1.08; }
  .step h3 { font-size: 1.3125rem; }
  .step p { font-size: 0.8125rem; line-height: 1.5; }
  .step .num { font-size: 0.6875rem; }
  .switch button { font-size: 0.75rem; }
  .said-bar { font-size: 0.75rem; }
  .said-words { font-size: 0.9375rem; line-height: 1.55; }
  .becomes .lbl { font-size: 0.6875rem; }
  .becomes .chip { font-size: 0.75rem; }
  .film button { font-size: 1.5rem; }
  .letter-body { font-size: 0.9375rem; line-height: 1.6; }
  .sign-who { font-size: 0.8125rem; }
  .oneline h2.two { font-size: min(1.875rem, 7.8vw); }
  .oneline .cta { font-size: 0.875rem; }
  .q button { font-size: 1rem; font-weight: 500; }
  .q .a { font-size: 0.9375rem; line-height: 1.6; }
  .close-band h2 { font-size: min(2.375rem, 9.8vw); line-height: 1.02; }
  .jobs p { font-size: 1.3125rem; }
  .top .btn { font-size: 0.8125rem; }
  .signoff { font-size: 1rem; }
  .cols h4 { font-size: 0.75rem; }
  .cols a { font-size: 0.875rem; }
  .legal { font-size: 0.6875rem; }
}
/* Phones and tablets: the letter's small line and title come before the portrait, so the photo is never seen without them */
@media (max-width: 860px) {
  .letter-a { gap: 1.1rem; }
  .letter-a .letter-body { display: contents; }
  .letter-a .letter-body > .eyebrow, .letter-a .letter-body > h2 { order: -2; }
  .letter-a .portrait { order: -1; margin-block: 0.4rem 0.6rem; max-width: 26rem; }
  .letter-a .letter-body > * { max-width: 36rem; }
}
@media (min-width: 601px) and (max-width: 860px) { .band { padding-block: 5rem; } }
@media (min-width: 861px) and (max-height: 760px) { .demo-phone .phone { width: 262px; } .demo { min-height: 640px; } .said { min-height: 470px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise, .sheet .card, .sheet .scrim, .sheet.done .thanks, .sheet.done .icon { animation: none; }
  .dots button, .letter-body mark { transition: none; }
}

/* The song (Rey, 2026-10-27): the wave button in the bottom left corner, after Unseen Studio's. Five cream bars
   standing still at rest (Rey's pick over Unseen's dashes); while it plays the circle stays dark and the bars rise
   and fall in the wordmark's ombre, the colours of "state" from left to right. The name shows on hover where there is a
   mouse, or for three seconds after a press (a phone keeps a tapped button in its hover state). */
.sound { position: fixed; z-index: 30; left: calc(12px + env(safe-area-inset-left, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 4px; font: 500 0.8rem/1.25 var(--body); color: var(--ink); }
.sound button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.wave-btn { position: relative; width: 52px; height: 52px; display: grid; place-items: center; flex: none; border-radius: 50%; }
.wave-btn .disc { position: absolute; inset: 6px; border-radius: 50%; background: rgba(22, 20, 19, 0.82); border: 1px solid rgba(243, 238, 231, 0.14); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background-color 0.35s ease, border-color 0.35s ease, transform 0.25s ease; }
.wave-btn:hover .disc { transform: scale(1.06); border-color: rgba(243, 238, 231, 0.3); }
.wave { position: relative; display: flex; align-items: flex-end; gap: 2px; height: 16px; }
.wave i { display: block; width: 2px; height: 16px; background: var(--ink-2); transform-origin: 50% 100%; transition: background-color 0.35s ease; }
.wave i:nth-child(1) { transform: scaleY(0.4); }
.wave i:nth-child(2) { transform: scaleY(0.75); }
.wave i:nth-child(3) { transform: scaleY(0.55); }
.wave i:nth-child(4) { transform: scaleY(1); }
.wave i:nth-child(5) { transform: scaleY(0.45); }
.sound.is-playing .wave i:nth-child(1) { background: #FAC12F; }
.sound.is-playing .wave i:nth-child(2) { background: #FAA323; }
.sound.is-playing .wave i:nth-child(3) { background: #FA770F; }
.sound.is-playing .wave i:nth-child(4) { background: #FA5B06; }
.sound.is-playing .wave i:nth-child(5) { background: #FA3B00; }
.sound .label { display: flex; align-items: center; gap: 0.4rem; height: 36px; padding: 4px 14px; border-radius: 999px; background: rgba(14, 12, 12, 0.74); border: 1px solid rgba(243, 238, 231, 0.12); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); max-width: min(240px, calc(100vw - 96px)); opacity: 0; transform: translateX(-6px); pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; }
.sound .credit { display: flex; gap: 0.35rem; min-width: 0; font-weight: 400; text-decoration: none; white-space: nowrap; }
.sound .credit span { overflow: hidden; text-overflow: ellipsis; }
.sound .credit .artist { color: var(--ink-3); }
.sound .credit .artist::before { content: "\00B7"; display: inline-block; margin-right: 0.35rem; }
.sound .credit:hover .artist, .sound .credit:focus-visible .artist { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.sound .pl-next { width: 24px; height: 24px; display: grid; place-items: center; color: var(--ink-2); flex: none; }
.sound .pl-next svg { width: 13px; height: 13px; }
.sound.show-label .label, .sound:has(:focus-visible) .label { opacity: 1; transform: none; pointer-events: auto; }
@media (hover: hover) { .sound:hover .label { opacity: 1; transform: none; pointer-events: auto; } }
@media (min-width: 1024px) { .sound { left: calc(18px + env(safe-area-inset-left, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); } }
/* the footer's last lines never sit under the button */
footer.site { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); }
.legal .soundtrack a { color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) {
  .wave-btn .disc, .wave i, .sound .label { transition: none; }
}