/* Rainglass · the website. Direction: the name as a monument (tasteskill seed 1850499705), in the brand's
   own type (Figtree) and colours: OLED black, warm white, the amber of the glass A, cyan only in the
   hall's light. */

:root {
  --bg: #010101;
  --surface: #0d0e11;
  --surface-2: #17191d;
  --ink: #f1f0ee;
  --muted: #a9adb4;
  --accent: #f0b65c;
  --accent-hover: #f7c87d;
  --accent-ink: #160e02;
  --inv-bg: #ebeae6;
  --inv-ink: #080808;
  --inv-muted: #4a4c50;

  --font: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --font-head: "Outfit", "Figtree", ui-sans-serif, system-ui, sans-serif; /* the logo's face: wordmark and headings */
  --font-display: var(--font);
  --font-text: var(--font);

  --step-small: 0.875rem;
  --step-body: clamp(1.0625rem, 0.95rem + 0.25vw, 1.4rem);
  --step-head: clamp(1.5rem, 1.2rem + 0.7vw, 2.75rem);
  --step-h3: clamp(1.25rem, 1.05rem + 0.3vw, 1.625rem);
  --step-display: clamp(3.5rem, 1.2rem + 6vw, 8.25rem);
  --step-monument: clamp(7.9rem, 20.2vw, 26.6rem); /* Outfit 800: 1.4% wider than the Figtree it was tuned on */

  --margin: clamp(1rem, 2vw, 1.75rem);
  --gutter: clamp(1rem, 1.6vw, 1.5rem);
  --section: clamp(6rem, 11vw, 12rem);
  --pad: clamp(5rem, 9vw, 9.5rem);
  --edge: max(var(--margin), calc((100vw - 1760px) / 2));
  --band: #0c0d10;
  --plate: #15171b;
  --step-title: clamp(2.375rem, 1rem + 4.4vw, 5.5rem);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--step-body);
  line-height: 1.55; font-kerning: normal; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, p, figure, dl, dd, ul, ol, blockquote { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 600; text-wrap: balance; }
.plan-name, .plan-figure { font-family: var(--font-head); }
p { text-wrap: pretty; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* a section a link jumped to holds focus so Tab carries on from there, but isn't drawn as a control */
:is(section, footer)[tabindex="-1"]:focus { outline: none; }
.wrap { padding-inline: var(--margin); }

.head { font-size: var(--step-head); line-height: 1.12; letter-spacing: -0.015em; font-weight: 600; }

.skip { position: absolute; left: var(--margin); top: -100px; z-index: 50; background: var(--accent); color: var(--accent-ink); padding: 12px 18px; font-weight: 600; text-decoration: none; }
.skip:focus { top: var(--margin); }

/* buttons: one shape for the page, a flat rectangle */
.button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0 1.6rem;
  background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: var(--step-body);
  text-decoration: none; white-space: nowrap;
  transition: background-color 180ms ease, transform 140ms var(--ease-out);
}
.button:hover { background: var(--accent-hover); }
.button:active { transform: scale(0.97); }
.button-ink { background: var(--inv-ink); color: var(--inv-bg); }
.button-ink:hover { background: #2a2b2e; }

.link { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.25em; text-decoration-thickness: 0.07em; transition: text-decoration-color 180ms ease, color 180ms ease; }
.link:hover { text-decoration-color: currentColor; }
.link-plain { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; transition: color 180ms ease; }

/* ---------- the bar ---------- */
.bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-top: var(--margin); padding-inline: var(--edge); font-size: var(--step-body);
}
/* The name as the logo draws it: a light geometric face (single-storey a and g), slate blue into gold, the apps' RainglassBrand.NameFrom/NameTo
   lifted a touch for the black page. Falls back to plain ink where text can't be clipped. */
.wordmark { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.wordmark img { width: 32px; height: auto; filter: drop-shadow(0 1px 6px rgba(217, 186, 126, 0.18)); }
.wordmark span {
  font-family: var(--font-head); font-weight: 500; font-size: 1.3rem; line-height: 1;
  letter-spacing: 0.01em; color: var(--ink);
  padding-block: 0.08em 0.16em; /* room for the g's tail inside the clipped fill */
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .wordmark span {
    background: linear-gradient(90deg, #8aa1c2 0%, #b3b1a6 52%, #e3c48a 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
}
.wordmark:hover span, .wordmark:focus-visible span { filter: brightness(1.15); }
.bar-links { display: flex; gap: clamp(1rem, 2.4vw, 2.25rem); }
.bar-links a { color: var(--ink); text-decoration-thickness: 0.07em; }

/* ---------- the dock: the bar again, fixed, once the hall is behind you ----------
   Away while the hall is on screen (the hall has its own bar), then fixed at the top with the section you're in
   lit and a hairline of how far down the page you are. On a phone it tucks up while you read down and comes back
   as soon as you scroll up; there the links are one Menu button. */
html { scroll-padding-top: 4.5rem; }
.dock {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  background: rgba(1, 1, 1, 0.8); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  transition: transform 360ms var(--ease-out), opacity 240ms ease;
}
.dock[data-state="away"], .dock[data-state="tucked"] { transform: translateY(-100%); opacity: 0; }
.dock-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 3.75rem; padding-inline: var(--edge); }
.dock-links { display: flex; gap: clamp(1.25rem, 2.2vw, 2.25rem); font-size: 1rem; }
.dock-links a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--muted); }
.dock-links a:hover, .dock-links a[aria-current] { color: var(--ink); }
.dock-links a[aria-current] { text-decoration-color: var(--accent); }
.dock-menu, .menu-close {
  display: none; align-items: center; min-height: 2.75rem; padding: 0 1.1rem; font-weight: 600; font-size: 1rem;
  background: var(--surface-2); color: var(--ink); transition: background-color 180ms ease;
}
.dock-menu:hover, .menu-close:hover { background: #22252a; }
.dock-progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent);
  transform-origin: 0 50%; transform: scaleX(var(--read, 0));
}

/* the menu: the whole page as a list, over everything */
.menu {
  position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--bg); color: var(--ink); overflow: auto; overscroll-behavior: contain;
}
.menu[open] { display: flex; flex-direction: column; }
.menu::backdrop { background: rgba(0, 0, 0, 0.6); }
html:has(.menu[open]) { overflow: hidden; }
.menu-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.75rem; padding-inline: var(--margin); }
.menu-title { font-size: var(--step-small); color: var(--muted); }
.menu .menu-close { display: inline-flex; }
ol.menu-list { padding: 0.5rem var(--margin) 2rem; counter-reset: part; }
.menu-list a {
  display: flex; align-items: baseline; gap: 0.9rem; min-height: 3.4rem; padding-block: 0.35rem; text-decoration: none;
  font-size: clamp(1.625rem, 1rem + 3vw, 2.5rem); line-height: 1.15; letter-spacing: -0.025em; font-weight: 600; color: var(--muted);
  transition: color 180ms ease;
}
.menu-list a::before { counter-increment: part; content: counter(part, decimal-leading-zero); font-size: var(--step-small); font-weight: 500; letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--muted); }
.menu-list a:hover, .menu-list a[aria-current] { color: var(--ink); }
.menu-list a[aria-current]::before { color: var(--accent); }
.menu-foot { margin-top: auto; padding: 1rem var(--margin) 1.5rem; }
.menu-foot a { display: inline-flex; align-items: center; min-height: 2.75rem; }
@media (prefers-reduced-motion: no-preference) {
  .menu[open] { animation: menu-in 320ms var(--ease-out); }
  .menu[open] .menu-list li { animation: rise 420ms var(--ease-out) both; animation-delay: calc(60ms + var(--n, 0) * 28ms); }
}
@keyframes menu-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 959px) {
  .dock-links { display: none; }
  .dock-menu { display: inline-flex; }
}

/* ---------- touch: every control a finger can find ---------- */
@media (pointer: coarse) {
  .wordmark, .bar-links a, .close-links a, .close-links button { display: inline-flex; align-items: center; min-height: 2.75rem; }
  /* the corner of Home is a picture of the TV at its own scale; its buttons reach further than they look */
  .g-item { position: relative; }
  .g-item::after { content: ""; position: absolute; inset: -0.75rem 0; }
}

/* ---------- the hall ---------- */
.hall { position: relative; background: var(--bg); }
.hall-stage { position: relative; height: 100svh; min-height: 560px; overflow: clip; isolation: isolate; }
.hall-poster, .hall-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hall-canvas { opacity: 0; transition: opacity 900ms var(--ease-soft); }
.hall.gl-ready .hall-canvas { opacity: 1; }

/* The monument: white letters in a near-black field, multiplied over the hall, so the hall shows
   only through the letters. Without script it works the same over the still picture. */
.knock {
  position: absolute; inset: 0; z-index: 2; background: #101113; mix-blend-mode: multiply; overflow: hidden;
  transform-origin: 50% 80%;
}
/* a faint warm glass in the letters, added to the hall before the cut-out, so every letter reads */
.glass { position: absolute; inset: 0; z-index: 1; mix-blend-mode: screen; overflow: hidden; transform-origin: 50% 80%; pointer-events: none; }
.glass .monument { color: #2d2822; }
.glass-word::before { content: "Rainglass"; }
/* The word can't be selected: a selection colour drawn inside the multiplied cut-out darkens the hall and pulls the
   two stacked copies apart (2026-11-07). Screen readers still read the h1. */
.knock, .glass, .monument { -webkit-user-select: none; user-select: none; }
.monument::selection, .monument *::selection { background: transparent; color: inherit; }
/* Two copies of the word stacked exactly (the glass span and the h1 cut-out): the face is set here, on the shared
   class, so both are Outfit and their edges meet. */
.monument {
  position: absolute; left: calc(var(--margin) - 8vw); bottom: calc(var(--step-monument) * -0.075);
  font-family: var(--font-head); font-size: var(--step-monument); line-height: 0.8; font-weight: 800; letter-spacing: -0.05em;
  text-transform: uppercase; white-space: nowrap; color: #fff;
}
/* rain on the glass, once, when the page opens (js/rain.js): above the cut-out, under the words */
.hall-rain { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.hero-copy { position: absolute; z-index: 3; top: calc(var(--margin) + 6.5rem); left: 0; padding-inline: var(--edge); max-width: calc(44ch + 2 * var(--edge)); }
.hero-line { font-family: var(--font-head); font-size: clamp(2.25rem, 1.4rem + 2.6vw, 4.25rem); line-height: 1.05; letter-spacing: -0.01em; font-weight: 500; max-width: 16ch; padding-bottom: 0.08em; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-line { background: linear-gradient(90deg, #8aa1c2 0%, #b3b1a6 50%, #e3c48a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; width: fit-content; }
}
.hero-sub { margin-top: 1.1rem; font-size: var(--step-head); line-height: 1.25; max-width: 36ch; }
.hero-soon { margin-top: 1.25rem; }
.hero-soon span { display: block; }
.hero-copy .button { margin-top: 1.75rem; }

.beats { position: absolute; z-index: 3; left: var(--edge); bottom: 13svh; width: min(34ch, 36vw); }
.beat { position: absolute; left: 0; bottom: 0; width: 100%; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity 380ms ease, transform 520ms var(--ease-out), visibility 0s linear 380ms; pointer-events: none; }
.beat.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 380ms ease, transform 520ms var(--ease-out), visibility 0s; }
.beat-title { font-size: var(--step-head); line-height: 1.12; letter-spacing: -0.015em; }
.beat-line { margin-top: 0.75rem; }
.beat-count { position: absolute; z-index: 3; left: var(--edge); bottom: calc(13svh - 2.4rem); font-size: var(--step-small); color: var(--muted); opacity: 0; transition: opacity 300ms ease; }
.hall.has-beat .beat-count { opacity: 1; }
.hall:not(.is-live) .beats, .hall:not(.is-live) .beat-count { display: none; }
.hall.is-live .hall-rest { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hall.is-live .hall-rest img { display: none; }

/* the finished composition: the rooms as pictures */
.hall-rest { padding-block: calc(var(--section) / 2); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem var(--gutter); }
.hall-rest .head { grid-column: 1 / -1; }
.room img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--surface); }
.room figcaption { margin-top: 1rem; max-width: 52ch; }

/* ---------- Home, working: the square plate ---------- */
.showcase { position: relative; z-index: 1; background: var(--bg); }
.plate { aspect-ratio: 1; width: 100%; }
.split.showcase-split { align-items: stretch; }
.split.showcase-split > .s-media { grid-column: 1 / span 7; }
.split.showcase-split > .s-text { display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; padding-block: 0.25rem; }
.tabs { display: flex; gap: 1.75rem; font-size: 1.125rem; }
.tab { min-height: 2.75rem; color: var(--muted); font-weight: 500; padding: 0.4rem 0; transition: color 180ms ease; }
.tab[aria-selected="true"] { color: var(--ink); font-weight: 600; }
.tab:hover { color: var(--ink); }
.showcase-text p { max-width: 34ch; }
.cells { display: grid; grid-template-columns: 1fr 1fr; }
.cell { min-height: 72px; padding: 0 1.25rem; text-align: left; font-weight: 600; background: var(--surface-2); color: var(--ink); transition: background-color 180ms ease, transform 140ms var(--ease-out); }
.cell:hover { background: #22252a; }
.cell:active { transform: scale(0.985); }
.cell-ink { background: var(--ink); color: var(--bg); }
.cell-ink:hover { background: #ffffff; }

/* the TV inside the plate: a square crop of a 16:9 Home, drawn in units of its height */
.tv {
  --glass: rgba(38, 40, 46, 0.62);
  /* a sideways swipe moves along the row (main.js); an up-and-down one still scrolls the page */
  position: relative; width: 100%; height: 100%; overflow: hidden; background: #000; container-type: size; touch-action: pan-y;
  font-family: var(--font); color: #fff;
}
.tv-backdrop { position: absolute; top: 0; right: -77.8cqh; width: 177.8cqh; height: 100cqh; max-width: none; object-fit: cover; object-position: 70% 40%; }
.tv-backdrop-next { opacity: 0; transition: opacity 420ms ease; }
.tv-backdrop-next.is-on { opacity: 1; }
.tv-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.62) 38%, rgba(0, 0, 0, 0.08) 78%), /* taste-skill-ignore: the launcher's own neutral scrim over its backdrop */
    linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.35) 34%, rgba(0, 0, 0, 0) 52%); /* taste-skill-ignore: same scrim, from the foot */
}
.tv-top { position: absolute; top: 6cqh; left: 4.4cqh; right: -40cqh; display: flex; align-items: center; gap: 9cqh; }
.tv-search { width: 6cqh; height: 6cqh; border-radius: 50%; background: var(--glass); }
.tv-tabs { display: flex; gap: 0.5cqh; padding: 0.6cqh; border-radius: 4cqh; background: var(--glass); margin-left: 22cqh; }
.tv-tab { padding: 1.1cqh 2.6cqh; font-size: 2.2cqh; font-weight: 500; color: rgba(255, 255, 255, 0.78); border-radius: 3cqh; white-space: nowrap; transition: background-color 240ms ease, color 240ms ease; }
.tv-tab.is-on { background: #fff; color: #0a0a0a; font-weight: 600; }
.tv-hero { position: absolute; left: 4.4cqh; top: 18cqh; width: 62cqh; }
.tv-chip { display: inline-block; font-size: 1.9cqh; font-weight: 500; padding: 0.7cqh 1.8cqh; border: 0.25cqh solid rgba(255, 255, 255, 0.8); border-radius: 3cqh; }
.tv-title { margin-top: 2.4cqh; font-size: 8.4cqh; line-height: 0.95; font-weight: 800; letter-spacing: -0.03em; text-transform: uppercase; }
.tv-meta { margin-top: 2.2cqh; font-size: 2.2cqh; color: rgba(255, 255, 255, 0.86); display: flex; align-items: center; gap: 1.2cqh; }
.tv-badge { font-size: 1.5cqh; font-weight: 700; padding: 0.15cqh 0.8cqh; border: 0.2cqh solid rgba(255, 255, 255, 0.75); border-radius: 0.6cqh; }
.tv-synopsis { margin-top: 1.8cqh; font-size: 2.2cqh; line-height: 1.4; color: rgba(255, 255, 255, 0.86); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tv-buttons { margin-top: 2.8cqh; display: flex; gap: 1.6cqh; align-items: center; }
.tv-play { display: inline-flex; align-items: center; height: 5.6cqh; padding: 0 3cqh 0 2.6cqh; border-radius: 3cqh; background: var(--glass); font-size: 2.2cqh; font-weight: 600; }
.tv-play::before { content: ""; width: 0; height: 0; margin-right: 1.4cqh; border-left: 1.5cqh solid #fff; border-top: 0.95cqh solid transparent; border-bottom: 0.95cqh solid transparent; }
.tv-round { width: 5.6cqh; height: 5.6cqh; border-radius: 50%; background: var(--glass); display: grid; place-items: center; font-size: 2.2cqh; font-weight: 700; font-style: italic; }
.tv-row {
  --shift: 0px;
  position: absolute; left: 4.4cqh; bottom: 7cqh; display: flex; column-gap: 2.4cqh;
  transform: translateX(var(--shift)); transition: transform 420ms var(--ease-out);
}
.tv-card { position: relative; flex: 0 0 31cqh; text-align: left; color: #fff; border-radius: 1.2cqh; outline: none; transition: transform 300ms var(--ease-out); transform-origin: 50% 40%; }
.tv-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 1.2cqh; background: #111; }
.tv-card[aria-current="true"] { transform: scale(1.07); }
.tv-card[aria-current="true"] img { outline: 0.4cqh solid #fff; outline-offset: 0.35cqh; }
.tv-card:not([aria-current="true"]):hover { transform: scale(1.03); }
.tv-card:focus-visible img { outline-color: var(--accent); }
.tv-bar { position: absolute; left: 2cqh; right: 2cqh; top: calc(31cqh * 9 / 16 - 2.6cqh); height: 0.6cqh; border-radius: 1cqh; background: rgba(255, 255, 255, 0.28); overflow: hidden; }
.tv-bar span { display: block; height: 100%; background: #3fd28a; }
.tv-name { display: block; margin-top: 1.7cqh; font-size: 2.2cqh; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-sub { display: block; margin-top: 0.4cqh; font-size: 1.8cqh; color: rgba(255, 255, 255, 0.72); white-space: nowrap; }

/* ---------- chapters: one system for everything after Home ----------
   One 12-column grid, read in thirds: running text starts at column 1, 5 or 9 and nowhere else. Every chapter
   opens with its title, at one size. A picture and its words are an 8 + 4 split, flipped from one to the next;
   lists run three across (two beside a title). Alternate chapters step up one tone, which separates them
   without a line. */
.chapter { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-content: start; padding-block: var(--pad); padding-inline: var(--edge); }
.chapter-flush { padding-block: 0; }
.band { background: var(--band); }
.c-title { grid-column: 1 / -1; margin-bottom: clamp(2.5rem, 4.5vw, 4.5rem); font-size: var(--step-title); line-height: 1; letter-spacing: -0.035em; font-weight: 600; }
.c-title.tight { margin-bottom: 1.25rem; }
/* The section titles as the logo sets its name: Outfit 500, open spacing, slate blue into gold (the wordmark's
   stops). The fill spans the words only (fit-content), so a short title still runs from blue to gold. */
.c-title, .live-title { font-weight: 500; letter-spacing: -0.01em; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .c-title, .live-title {
    background: linear-gradient(90deg, #8aa1c2 0%, #b3b1a6 50%, #e3c48a 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    width: fit-content; padding-bottom: 0.08em; /* the g and y keep their tails inside the fill */
  }
}
.lead { font-size: var(--step-head); line-height: 1.2; letter-spacing: -0.012em; font-weight: 500; text-wrap: balance; }
.lead + p { margin-top: 1.25rem; }
ul.wrap { padding-inline: var(--edge); }

/* a picture and its words: 8 columns and 4, the words flipped to the left in every second one */
.split { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; padding-block: 2rem; }
.split + .split { margin-top: calc(clamp(4rem, 7vw, 7rem) - 4rem); }
.split > .s-media { grid-column: 1 / span 8; grid-row: 1; min-width: 0; margin: 0; }
.split > .s-text { grid-column: 9 / -1; grid-row: 1; min-width: 0; padding-left: clamp(0rem, 1.2vw, 1.5rem); }
.split.flip > .s-media { grid-column: 5 / -1; }
.split.flip > .s-text { grid-column: 1 / span 4; padding-left: 0; padding-right: clamp(0rem, 1.2vw, 1.5rem); }
.s-text > p { max-width: 40ch; }
.s-text h3, .facts h3, .facts dt { font-size: var(--step-h3); line-height: 1.25; font-weight: 600; }
.s-text h3 + p { margin-top: 0.6rem; }

/* a title on the left with its content in the two columns beside it */
.chapter-side .side-title { grid-column: 1 / span 4; align-self: start; position: sticky; top: calc(var(--margin) * 2); }
.chapter-side .c-title { margin-bottom: 1.5rem; }
.side-body { grid-column: 5 / -1; min-width: 0; }

/* lists: three across, or two beside a title, or one in a split's words */
.facts { --cols: 3; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gutter); row-gap: clamp(2rem, 3.5vw, 3.5rem); }
.facts p, .facts dd { margin: 0.5rem 0 0; max-width: 40ch; }
.side-body.facts { --cols: 2; }
.s-text.facts, .s-text .facts { --cols: 1; row-gap: 1.75rem; }
.s-text > .facts { margin-top: 2.25rem; }

/* screenshots: one crop, one caption */
.shot img, .shot video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--plate); }
.shot figcaption { margin-top: 0.75rem; max-width: 52ch; font-size: var(--step-small); color: var(--muted); }
.shot figcaption strong { color: var(--ink); font-weight: 600; }
.shot-card { position: relative; aspect-ratio: 16 / 9; background: var(--plate); }
.shot.shot-card img { position: absolute; inset: 5% 0; margin-inline: auto; width: auto; height: 90%; aspect-ratio: 760 / 718; object-fit: contain; background: none; }

/* ---------- Intelligent features: the six names, the family word set back ---------- */
ul.smart-list { grid-column: 1 / -1; display: grid; row-gap: clamp(1.75rem, 2.6vw, 2.5rem); }
.smart-list li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: baseline; }
.smart-list h3 { grid-column: 1 / span 8; font-size: clamp(1.75rem, 1.1rem + 1.6vw, 2.75rem); line-height: 1.1; letter-spacing: -0.02em; font-weight: 600; }
.smart-list h3 span { color: var(--muted); font-weight: 500; }
.smart-list p { grid-column: 9 / -1; max-width: 40ch; }

/* ---------- Intelligent Search: asking about what's playing, then the rest ---------- */
.asks-title { font-size: var(--step-h3); line-height: 1.25; font-weight: 600; }
.asks { margin-top: 1.5rem; display: grid; gap: 1.5rem; }
.ask dt { font-size: var(--step-h3); line-height: 1.25; letter-spacing: -0.01em; font-weight: 500; }
.ask dd { margin: 0.4rem 0 0; }
.search-note { margin-top: 2rem; color: var(--muted); }


/* the in-player question panel, as the film player draws it: top right over the paused picture */
.ask-shot { position: relative; overflow: hidden; container-type: inline-size; background: #000; font-family: var(--font); color: #fff; }
.ask-frame { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; filter: brightness(0.62); }
.ask-panel {
  position: absolute; top: 4.5%; right: 3.5%; width: 47.9%;
  padding: 1.9cqw; border-radius: 1.7cqw; background: rgba(28, 30, 35, 0.86);
  display: grid; gap: 1.05cqw; align-content: start;
}
.ask-head { display: flex; justify-content: space-between; align-items: center; font-size: 2.05cqw; font-weight: 600; }
.ask-pill { font-size: 1.35cqw; font-weight: 600; padding: 0.55cqw 1.3cqw; border-radius: 3cqw; background: rgba(255, 255, 255, 0.12); }
.ask-field { font-size: 1.4cqw; color: rgba(255, 255, 255, 0.6); padding: 1.05cqw 1.25cqw; border-radius: 1cqw; background: rgba(255, 255, 255, 0.07); }
.ask-ideas { display: flex; flex-wrap: wrap; gap: 0.75cqw; }
.ask-idea { font-size: 1.3cqw; font-weight: 500; padding: 0.6cqw 1.2cqw; border-radius: 3cqw; background: rgba(255, 255, 255, 0.1); }
.ask-idea.is-on { background: #f1f0ee; color: #0b0b0b; }
.ask-q { margin-top: 0.5cqw; font-size: 1.3cqw; color: rgba(255, 255, 255, 0.62); }
.ask-a { font-size: 1.6cqw; line-height: 1.45; }

.glance-stage { position: relative; aspect-ratio: 4 / 3; overflow: hidden; container-type: size; background: #000; font-family: var(--font); color: #fff; }
.g-ground { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.45) saturate(0.9); }
.g-ico { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.12em; }
.g-bar { position: absolute; top: 4.5cqh; left: 3.5cqw; right: 3.5cqw; display: flex; align-items: center; gap: 2.2cqw; font-size: 2.15cqw; }
.g-search { display: grid; place-items: center; width: 5.6cqw; height: 5.6cqw; border-radius: 50%; background: rgba(38, 40, 46, 0.7); font-size: 2.6cqw; }
.g-item { font: inherit; color: #fff; display: inline-flex; align-items: center; gap: 0.7cqw; padding: 0.9cqw 1.4cqw; border-radius: 3cqw; white-space: nowrap; transition: background-color 200ms ease, color 200ms ease; }
.g-item:hover { background: rgba(255, 255, 255, 0.12); }
.g-item[aria-expanded="true"] { background: #f1f0ee; color: #0b0b0b; }
.g-ticker b { color: #ff5a4f; font-weight: 700; font-size: 0.8em; letter-spacing: 0.02em; }
.g-item[aria-expanded="true"] b { color: #c62a20; }
.g-ticker i { font-style: normal; opacity: 0.8; font-size: 0.9em; }
.g-tabs { display: none; }
.g-tabs span { padding: 0.75cqw 1.5cqw; border-radius: 3cqw; color: rgba(255, 255, 255, 0.78); }
.g-tabs .is-on { background: #fff; color: #0b0b0b; font-weight: 600; }
.g-status { display: flex; align-items: center; gap: 0.6cqw; margin-left: auto; }
.g-sep { width: 0.2cqw; height: 2.8cqw; background: rgba(255, 255, 255, 0.4); }
.g-avatar { width: 5.6cqw; height: 5.6cqw; border-radius: 50%; background: #4a5a6a; }
.g-card {
  position: absolute; top: 15cqh; width: 40cqw; padding: 2.4cqw 2.6cqw; border-radius: 2.2cqw;
  background: rgba(30, 32, 37, 0.88); font-size: 1.75cqw; display: none; gap: 1.5cqw;
}
.g-card.is-open { display: grid; }
.g-scores { left: 10cqw; }
.g-weathercard { right: 13cqw; }
.g-coming { right: 3.5cqw; }
.g-row { display: flex; justify-content: space-between; align-items: center; gap: 1cqw; }
.g-top { font-size: 1.5cqw; color: rgba(255, 255, 255, 0.72); text-transform: none; }
.g-live { color: #ff5a4f; font-weight: 700; }
.g-match { display: grid; grid-template-columns: 1fr auto auto auto 1fr; align-items: center; gap: 1.2cqw; font-size: 1.9cqw; font-weight: 600; }
.g-match .g-team:last-child { text-align: right; }
.g-crest { display: grid; place-items: center; width: 4.2cqw; height: 4.2cqw; border-radius: 50%; background: rgba(255, 255, 255, 0.14); font-size: 1.15cqw; font-weight: 700; }
.g-score { font-size: 3.4cqw; font-weight: 600; font-variant-numeric: tabular-nums; }
.g-small { font-size: 1.45cqw; color: rgba(255, 255, 255, 0.72); }
.g-centre { text-align: center; }
.g-sub { font-size: 1.3cqw; color: rgba(255, 255, 255, 0.6); margin-top: 0.6cqw; }
.g-pill { justify-self: start; font-size: 1.45cqw; font-weight: 600; padding: 0.8cqw 1.5cqw; border-radius: 3cqw; background: rgba(255, 255, 255, 0.12); }
.g-temp { font-size: 5cqw; line-height: 1; font-weight: 500; }
.g-hours { display: grid; grid-template-columns: repeat(5, 1fr); text-align: center; gap: 0.4cqw; padding-block: 1.2cqw; }
.g-hours span { display: grid; justify-items: center; gap: 0.5cqw; font-size: 1.45cqw; }
.g-hours i { font-style: normal; color: rgba(255, 255, 255, 0.72); font-size: 1.3cqw; }
.g-hours .g-ico { font-size: 2.2cqw; }
.g-days { display: grid; gap: 0.9cqw; }
.g-days p { display: grid; grid-template-columns: 4.6cqw 2.6cqw 3.4cqw 1fr 3.4cqw; align-items: center; gap: 0.8cqw; font-size: 1.5cqw; }
.g-days i { font-style: normal; }
.g-days span:nth-of-type(1) { color: rgba(255, 255, 255, 0.6); text-align: right; }
.g-range { position: relative; height: 0.55cqw; border-radius: 1cqw; background: rgba(255, 255, 255, 0.14); }
.g-range span { position: absolute; top: 0; bottom: 0; left: calc(var(--a) * 100%); right: calc((1 - var(--b)) * 100%); border-radius: 1cqw; background: #f0b65c; }
.g-credit { font-size: 1.2cqw; color: rgba(255, 255, 255, 0.5); }
.g-date { font-size: 2.2cqw; font-weight: 600; }
.g-list { list-style: none; margin: 0; padding: 1.2cqw 0 0; display: grid; gap: 1.6cqw; }
.g-list li { display: grid; grid-template-columns: 2cqw 7cqw 1fr; gap: 1.2cqw; align-items: start; font-size: 1.6cqw; }
.g-list .g-ico { font-size: 1.7cqw; color: rgba(255, 255, 255, 0.72); margin-top: 0.2cqw; }
.g-when, .g-what { display: grid; gap: 0.2cqw; }
.g-when i, .g-what span { font-style: normal; color: rgba(255, 255, 255, 0.55); }
.g-what b, .g-when b { font-weight: 500; }

/* ---------- Intelligent Connect ---------- */
.connect { padding-block: var(--pad); }
.connect-head { align-items: start; }
.connect-lead { grid-column: 1 / span 8; }
.connect-body { grid-column: 9 / -1; max-width: 40ch; }
.connect .facts { margin-top: clamp(3rem, 5vw, 4.5rem); }
/* Everything in step: the row in the devices chapter that ties the screens together. */
.together { grid-column: 1 / -1; padding-block: clamp(3rem, 5vw, 4.5rem) 2rem; }
.together-title { font-size: var(--step-h3); line-height: 1.25; font-weight: 600; color: var(--muted); margin-bottom: clamp(1.5rem, 2.5vw, 2.25rem); }
.together-lead { max-width: 52ch; font-size: var(--step-head); line-height: 1.25; margin: -0.5rem 0 clamp(2rem, 3.5vw, 3rem); }
/* What works where: features down the side, devices across the top. It scrolls sideways inside its own box on a
   small screen, with the feature names held at the left. */
.where { grid-column: 1 / -1; padding-block: 1rem 2rem; }
.where-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.where-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.where-table { width: 100%; min-width: 46rem; border-collapse: collapse; font-size: 0.9375rem; }
.where-table th, .where-table td { padding: 0.85rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.where-table thead th { font-family: var(--font-head); font-weight: 500; font-size: 1rem; color: var(--muted); vertical-align: bottom; }
.where-table tbody th { font-weight: 500; width: 34%; position: sticky; left: 0; background: var(--bg); }
.where-table td.yes { color: var(--ink); }
.where-table td.no { color: rgba(255, 255, 255, 0.32); }
.where-table td.part { color: var(--muted); }
.where-table td.soon { color: #e3c48a; }
.where-hint { display: none; }
@media (max-width: 767px) {
  .where-hint { display: block; margin: -0.75rem 0 1rem; color: var(--muted); font-size: 0.875rem; }
  .where-scroll { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .where-table { min-width: 40rem; font-size: 0.875rem; }
  .where-table tbody th { width: 10rem; }
}
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Works with: four names set large in the logo's face, a line under each. */
.works { grid-column: 1 / -1; padding-top: clamp(4rem, 7vw, 7rem); }
.works-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2.5rem; }
.works-name { font-family: var(--font-head); font-size: clamp(2rem, 1.3rem + 2vw, 3.5rem); line-height: 1; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 0.9rem; }
.works-logo img { display: block; height: 1em; width: auto; } /* Plex's logo, its own colours, about the height of the names beside it */
.works-list p:not(.works-name) { color: var(--muted); max-width: 30ch; }
.works > .fine { margin-top: 2.5rem; }
@media (max-width: 1100px) { .works-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .works-list { grid-template-columns: 1fr; } }
/* Get Rainglass: a card for each place to get it. */
.plans .c-title { grid-column: 1 / -1; }
.store-cards { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gutter); }
.store-card { display: flex; flex-direction: column; gap: 0.6rem; padding: clamp(1.25rem, 2vw, 1.75rem); border-radius: 18px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.store-for { color: var(--muted); font-size: var(--step-small); }
.store-name { font-family: var(--font-head); font-size: clamp(1.5rem, 1.1rem + 1vw, 2.1rem); line-height: 1.1; font-weight: 500; }
/* The store badges at one visible height (44 px). Google's PNG is 250 tall with its badge in the middle 168, so it's
   drawn 65 px tall and its transparent margin (41/250) pulled in. Clear space around Apple's: a quarter of 44. */
.store-badge { display: flex; align-items: center; min-height: 44px; padding-block: 11px 4px; }
.store-badge img { display: block; width: auto; }
.badge-apple { height: 44px; }
.badge-google { height: 65.5px; margin: -10.7px 0 -10.7px -10.7px; }
.store-own { display: flex; align-items: center; gap: 0.6rem; }
.store-own img { width: 34px; height: 34px; flex: none; }
.store-link { color: inherit; text-decoration: none; }
.store-link:hover, .store-link:focus-visible { text-decoration: underline; text-decoration-thickness: 0.06em; }
.store-line { color: var(--muted); font-size: 1rem; line-height: 1.45; }
.store-status { margin-top: auto; padding-top: 0.75rem; font-weight: 600; font-size: var(--step-small); letter-spacing: 0.02em; }
.store-status.is-soon { color: #e3c48a; }
.store-status.is-out { color: #8aa1c2; }
.store-status.is-later { color: var(--muted); }
.plans > .fine { grid-column: 1 / -1; margin-top: 2rem; }
@media (max-width: 1280px) { .store-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .store-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .store-cards { grid-template-columns: 1fr; } }
/* Ask Rainglass anything: the lead line and the six things its AI does, above the Ask about this demo. */
.ai-lead { grid-column: 1 / span 8; font-size: var(--step-head); line-height: 1.25; max-width: 40ch; margin: -1rem 0 clamp(2.5rem, 4vw, 3.5rem); }
.ai-facts { grid-column: 1 / -1; margin-bottom: clamp(3rem, 5vw, 5rem); }
@media (max-width: 767px) { .ai-lead { grid-column: 1 / -1; } }
.soon-tag { display: inline-block; margin-left: 0.4em; padding: 0.15em 0.55em; border: 1px solid currentColor; border-radius: 999px; font-family: var(--font); font-size: 0.55em; font-weight: 600; letter-spacing: 0.04em; vertical-align: 0.3em; opacity: 0.75; }
.connect-stage { position: relative; margin-top: 3.5rem; overflow: hidden; container-type: inline-size; background: #000; font-family: var(--font); color: #fff; }
.ic-ground { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 45%; filter: brightness(0.85); }
.ic-card { position: absolute; border-radius: 1.2cqw; background: rgba(24, 26, 31, 0.86); }
.ic-steps { left: 3cqw; bottom: 3.4cqw; width: 30cqw; padding: 1.4cqw 1.6cqw; display: grid; gap: 0.75cqw; }
.ic-name { font-size: 0.95cqw; font-weight: 600; color: rgba(255, 255, 255, 0.55); letter-spacing: 0.02em; }
.ic-step { display: flex; align-items: center; gap: 0.9cqw; font-size: 1.25cqw; }
.ic-mark { position: relative; flex: none; width: 1.3cqw; height: 1.3cqw; border-radius: 50%; }
/* the finished state: a tick for what checked out, a ring on what's still running */
.ic-mark::after { content: ""; position: absolute; left: 0.42cqw; top: 0.18cqw; width: 0.38cqw; height: 0.7cqw; border-right: 0.2cqw solid #3fd28a; border-bottom: 0.2cqw solid #3fd28a; transform: rotate(45deg); }
.ic-run .ic-mark::after { content: none; }
.ic-run .ic-mark { border: 0.2cqw solid rgba(255, 255, 255, 0.25); border-top-color: #fff; }
.ic-offer { left: 50%; bottom: 3.4cqw; width: 36cqw; transform: translateX(-12%); padding: 1.5cqw 1.8cqw; display: grid; gap: 0.8cqw; }
.ic-title { font-size: 1.5cqw; font-weight: 600; }
.ic-body { font-size: 1.25cqw; color: rgba(255, 255, 255, 0.8); }
.ic-pills { display: flex; gap: 0.7cqw; margin-top: 0.4cqw; }
.ic-pill { font-size: 1.15cqw; font-weight: 600; padding: 0.55cqw 1.3cqw; border-radius: 3cqw; background: rgba(255, 255, 255, 0.12); }
.ic-pill.is-on { background: #f1f0ee; color: #0b0b0b; }
/* the stall plays out once as the stage comes into view: checks tick in turn, then the offer rises */
@media (prefers-reduced-motion: no-preference) {
  .js .connect-stage .ic-step .ic-mark::after { opacity: 0; transition: opacity 240ms ease; transition-delay: calc(600ms + var(--n) * 650ms); }
  .js .connect-stage .ic-step .ic-mark { border: 0.2cqw solid rgba(255, 255, 255, 0.25); border-top-color: #fff; animation: ic-spin 900ms linear infinite; }
  .js .connect-stage.is-playing .ic-step:not(.ic-run) .ic-mark { border-color: transparent; animation: none; transition: border-color 200ms ease; transition-delay: calc(600ms + var(--n) * 650ms); }
  .js .connect-stage.is-playing .ic-step:not(.ic-run) .ic-mark::after { opacity: 1; }
  .js .connect-stage .ic-step { opacity: 0.35; transition: opacity 300ms ease; transition-delay: calc(300ms + var(--n) * 650ms); }
  .js .connect-stage.is-playing .ic-step { opacity: 1; }
  .js .connect-stage .ic-offer { opacity: 0; transform: translate(-12%, 1.5cqw); transition: opacity 500ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: 3200ms; }
  .js .connect-stage.is-playing .ic-offer { opacity: 1; transform: translate(-12%, 0); }
  .js .connect-stage.is-done .ic-step .ic-mark { animation-play-state: paused; }
}
@keyframes ic-spin { to { transform: rotate(360deg); } }

/* ---------- the player: small proofs beside text ---------- */
.player .lead { grid-column: 1 / span 8; margin-bottom: clamp(2.5rem, 4.5vw, 4.5rem); }
.proofs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: clamp(3rem, 5vw, 4.5rem); }
.proof-text { margin-top: 1.25rem; }
.proof-text h3 { font-size: var(--step-h3); line-height: 1.25; font-weight: 600; }
.proof-text p { margin-top: 0.5rem; max-width: 36ch; }
.proof-text p + p { color: var(--muted); }

.panel { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--surface); font-family: var(--font); color: #fff; }
.panel img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.ui-card { position: absolute; top: 14px; right: 14px; display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 12px; background: rgba(22, 24, 28, 0.82); font-size: 0.875rem; }
.ui-card-name { font-weight: 600; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.72); }
.ui-card-line { font-weight: 600; }
.panel-dialogue, .panel-audio { padding: 14px; display: grid; gap: 6px; align-content: center; }
.ui-row { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 12px 16px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); font-size: 0.9375rem; font-weight: 500; }
.ui-row span:last-child { color: rgba(255, 255, 255, 0.72); }
.ui-row.is-picked { background: #f3f1ec; color: #0b0b0b; }
.ui-row.is-picked span:last-child { color: #2b2c30; }
.ui-skip { position: absolute; right: 16px; bottom: 16px; padding: 10px 18px; border-radius: 999px; background: #f3f1ec; color: #0b0b0b; font-weight: 600; font-size: 0.9375rem; }
.panel-ends { padding: 22px 18px 18px; display: grid; align-content: center; }
.ui-time { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9375rem; font-weight: 600; }
.ui-ends { color: var(--accent); font-variant-numeric: tabular-nums; }
.ui-progress { margin-top: 16px; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.18); overflow: hidden; }
.ui-progress span { display: block; height: 100%; background: #fff; }
.ui-time-small { margin-top: 10px; font-weight: 500; font-size: 0.875rem; color: rgba(255, 255, 255, 0.72); font-variant-numeric: tabular-nums; }
.ui-next { position: absolute; right: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; background: rgba(22, 24, 28, 0.86); font-size: 0.875rem; }
.ui-next-label { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.72); font-weight: 600; }
.ui-next-name { font-weight: 600; }
.ui-next-play { margin-top: 8px; align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: #f3f1ec; color: #0b0b0b; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Live TV: the pinned title, its screens passing ---------- */
.live { position: relative; padding-top: var(--pad); background: var(--band); }
.live-pin { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; z-index: 2; pointer-events: none; }
.live-title { font-size: var(--step-display); line-height: 0.9; text-align: center; max-width: 6ch; }
/* the screens pass beside the title, two to a screen, never behind it */
.live-run {
  position: relative; z-index: 1; margin-top: -100svh; padding-top: 8svh; padding-bottom: var(--pad); padding-inline: var(--edge);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 7svh; align-items: start;
}
.portrait { width: 100%; }
.p1 { grid-column: 1 / span 4; grid-row: 1; }
.p2 { grid-column: 9 / span 4; grid-row: 1; margin-top: 8svh; }
.p3 { grid-column: 1 / span 4; grid-row: 2; }
.p4 { grid-column: 9 / span 4; grid-row: 2; margin-top: 8svh; }
.portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--surface); }
.p3 img { aspect-ratio: 4 / 3; }
.portrait figcaption { margin-top: 1rem; max-width: 300px; display: grid; gap: 0.2rem; }
.p-name { font-weight: 600; font-size: 1.125rem; }
.p-role { font-size: var(--step-small); color: var(--muted); }
.p-line { margin-top: 0.5rem; }

/* ---------- devices: figures beside a picture ---------- */
.split-text-wide > .s-text { grid-column: 1 / span 8; padding-left: 0; }
.split-text-wide > .s-media { grid-column: 9 / -1; }
.figure-list { display: grid; gap: 1.75rem; }
.figure-row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--gutter); align-items: baseline; }
.figure-row dt { grid-column: 1 / span 2; text-align: right; font-size: var(--step-head); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; white-space: nowrap; }
.figure-row dd { grid-column: 3 / -1; margin: 0; max-width: 44ch; }
.needs .figure-row dt { font-family: var(--font-head); }
.devices-photo { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--plate); }
/* Rainglass Server: its own window beside the words, the two downloads, the fine print. */
.split.computer { margin-top: clamp(3rem, 6vw, 6rem); }
.split.computer h3 + p, .split.computer p + p { margin-top: 1rem; }
.computer-shot { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06); }
/* The phone apps: three iPhone screens side by side, the middle one raised a little. */
.phone-trio { display: flex; justify-content: center; align-items: center; gap: clamp(0.75rem, 2vw, 2rem); }
.phone-trio img { flex: 0 1 30%; min-width: 0; width: 30%; height: auto; border-radius: clamp(14px, 2.4vw, 34px); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08); }
.phone-trio img:nth-child(2) { transform: translateY(-6%); }
.split > .phone-trio { max-width: 820px; margin-inline: auto; }
.downloads { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.button-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(241, 240, 238, 0.35); }
.button-line:hover { background: rgba(241, 240, 238, 0.08); }
.fine { margin-top: 1rem; color: var(--muted); font-size: var(--step-small); }
/* Set up by an AI assistant: the conversation as it happens, the command each step ran written under it. */
.split.assistant { margin-top: clamp(4rem, 8vw, 8rem); }
.split.assistant h3 + p, .split.assistant p + p { margin-top: 1rem; }
.agent-chat {
  display: grid; gap: 1.1rem; padding: clamp(1.25rem, 2.6vw, 2.5rem); border-radius: 14px; background: var(--plate);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
  font-size: clamp(0.9375rem, 0.85rem + 0.3vw, 1.125rem); line-height: 1.5;
}
.agent-you { justify-self: end; max-width: 30em; padding: 0.7em 1.05em; border-radius: 1.1em 1.1em 0.35em 1.1em; background: rgba(241, 240, 238, 0.1); }
.agent-turn { display: grid; gap: 0.8rem; max-width: 40em; }
.agent-step { display: grid; grid-template-columns: 1.1em minmax(0, 1fr); column-gap: 0.7em; }
.agent-tick { grid-row: 1 / span 2; position: relative; height: 1.1em; margin-top: 0.2em; }
.agent-tick::after { content: ""; position: absolute; left: 0.36em; top: 0.08em; width: 0.32em; height: 0.64em; border-right: 2px solid #3fd28a; border-bottom: 2px solid #3fd28a; transform: rotate(45deg); }
.agent-step code, .faq code { font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace; font-size: 0.82em; }
.agent-step code { grid-column: 2; display: block; margin-top: 0.2rem; color: var(--muted); overflow-wrap: anywhere; }
.agent-step code span { white-space: nowrap; } /* a flag and its value stay together */
.agent-say { color: var(--ink); }

/* ---------- plans: the names are the heading, the answer beside them ---------- */
.plans { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding-block: var(--pad); padding-inline: var(--edge); align-items: start; }
.plan-names { grid-column: 1 / span 4; display: flex; flex-direction: column; align-items: flex-start; }
.plan-name {
  position: relative; font-size: var(--step-title); line-height: 1.1; letter-spacing: -0.035em; font-weight: 600; white-space: nowrap;
  color: var(--muted); text-align: left; padding-left: 0.5em; transition: color 200ms ease;
}
.plan-name::before { content: ""; position: absolute; left: 0.04em; top: 0.52em; width: 0.26em; height: 0.26em; border-radius: 50%; background: var(--ink); opacity: 0; transform: scale(0.4); transition: transform 300ms var(--ease-out), opacity 200ms ease; }
.plan-name[aria-selected="true"] { color: var(--ink); }
.plan-name[aria-selected="true"]::before { opacity: 1; transform: none; }
.plan-name:hover { color: var(--ink); }
.plan-stage { grid-column: 5 / -1; padding-top: 0.3rem; transition: opacity 200ms ease; }
.plan-stage.is-swapping { opacity: 0; }
.plan-figure { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25em 1rem; }
#plan-figure { font-size: var(--step-title); line-height: 1.1; letter-spacing: -0.035em; font-weight: 600; }
.plan-text { margin-top: 1.75rem; max-width: 40ch; }

/* ---------- questions ---------- */
.faq-list { display: grid; gap: 0.75rem; }
/* the padding sits on the summary, so the whole row is the thing you press */
.faq details { padding: 0 1.25rem; margin-inline: calc(min(1.25rem, var(--margin)) * -1); transition: background-color 240ms ease; }
.faq details[open] { background: var(--surface); padding-bottom: 1.5rem; }
.faq summary { list-style: none; cursor: pointer; padding-block: 0.9rem; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; font-size: var(--step-head); line-height: 1.25; letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 0.42em; height: 0.42em; margin-right: 0.2em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-0.12em) rotate(45deg); transition: transform 240ms var(--ease-out); }
.faq details[open] summary::after { transform: translateY(0.1em) rotate(225deg); }
.faq summary:hover { color: #fff; }
.faq details p { margin-top: 1rem; max-width: 48ch; }

/* ---------- the close: the name, inverted, cut by the foot of the page ---------- */
.close { position: relative; min-height: 100svh; background: var(--inv-bg); color: var(--inv-ink); overflow: hidden; display: flex; flex-direction: column; }
.close-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding-inline: var(--edge); padding-top: calc(var(--section) * 0.55); }
.close-ask { grid-column: 1 / 8; }
.close-title { font-size: var(--step-display); line-height: 0.95; letter-spacing: -0.04em; font-weight: 600; max-width: 10ch; }
.close-soon { margin-top: 1.5rem; font-size: var(--step-head); line-height: 1.25; max-width: 26ch; color: var(--inv-ink); }
.close-links { grid-column: 10 / 13; display: grid; gap: 0.6rem; align-content: start; padding-top: 0.6rem; }
.close-links a:hover, .close-links button:hover { color: #000; text-decoration-thickness: 0.12em; }
.close-links button { font-size: inherit; padding: 0; text-align: left; }
.close-legal { padding-inline: var(--edge); margin-top: auto; display: flex; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; font-size: var(--step-small); color: var(--inv-muted); padding-top: 4rem; padding-bottom: 1rem; }
/* the company line: required on the site, kept on a row of its own */
.close-owner { flex-basis: 100%; }
/* The name across the foot, in the logo's face. Sized from the width so all nine letters fit inside the footer
   (which clips): RAINGLASS in Outfit 800 at this tracking is about 5.3 em wide. */
.close-name {
  font-family: var(--font-head);
  font-size: calc((100vw - 2 * var(--margin)) / 5.45); line-height: 0.8; font-weight: 800; letter-spacing: -0.055em; text-transform: uppercase; white-space: nowrap;
  margin-left: calc(var(--margin) - 0.06em); margin-bottom: -0.17em; color: var(--inv-ink); transform-origin: 50% 100%;
}

/* a picture that settles from a slight scale stays inside its frame */
[data-reveal="shutter"] { overflow: clip; }

/* ---------- entrances ----------
   Each part rises into place as it comes into view, tied to the scroll where the browser can do that
   and fired once by script where it can't. Nothing starts below 35% opacity, so the page reads before,
   during and without any of it. */
@media (prefers-reduced-motion: no-preference) {
  .js.sda [data-reveal] {
    animation: enter linear both; animation-timeline: view();
    animation-range: entry calc(var(--i, 0) * 5%) cover calc(16% + var(--i, 0) * 5%);
  }
  .js.sda [data-reveal="shutter"] { animation-name: open; animation-range: entry 0% cover 24%; }
  .js.sda [data-reveal="shutter"] > img, .js.sda [data-reveal="shutter"] > video { animation: settle linear both; animation-timeline: view(); animation-range: entry 0% cover 34%; }

  .js.no-sda [data-reveal] { opacity: 0.35; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
  .js.no-sda [data-reveal].is-in { opacity: 1; transform: none; }
  .js.no-sda [data-reveal="shutter"] { opacity: 1; transform: none; clip-path: inset(0 0 40% 0); transition: clip-path 900ms var(--ease-out); }
  .js.no-sda [data-reveal="shutter"].is-in { clip-path: inset(0); }

  .js .hero-copy > * { animation: rise 900ms var(--ease-out) both; }
  .js .hero-copy > :nth-child(2) { animation-delay: 90ms; }
  .js .hero-copy > :nth-child(3) { animation-delay: 180ms; }
}
@keyframes enter { from { opacity: 0.35; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes open { from { clip-path: inset(0 0 40% 0); } to { clip-path: inset(0); } }
@keyframes settle { from { transform: scale(1.05); } to { transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ?poster: the hall alone, for its still picture */
.poster .knock, .poster .glass, .poster .hero-copy, .poster .bar, .poster .beats, .poster .beat-count { display: none; }
.poster .hall-canvas { opacity: 1; transition: none; }

/* ---------- tablet ---------- */
@media (max-width: 1100px) {
  /* the thirds need width: below this a chapter is one column, the picture and then its words */
  .chapter { display: block; }
  .chapter-flush { display: grid; }
  .c-title { margin-bottom: 2.25rem; }
  .c-title.tight { margin-bottom: 1rem; }
  .split:not(.showcase-split) { display: block; }
  .split + .split { margin-top: 1rem; }
  .split:not(.showcase-split) > .s-text { margin-top: 2rem; padding: 0; max-width: 60ch; }
  .split.showcase-split > .s-media { grid-column: 1 / span 6; }
  .split.showcase-split > .s-text { grid-column: 7 / -1; padding-left: 0; }
  .chapter-side .side-title { position: static; }
  .side-body { margin-top: 2.5rem; }
  .facts, .side-body.facts, .s-text.facts, .s-text .facts { --cols: 2; }
  .proofs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .smart-list li { display: block; }
  .smart-list p { margin-top: 0.6rem; }
  .player .lead, .connect-lead { grid-column: 1 / -1; max-width: 30ch; }
  .connect-body { grid-column: 1 / -1; margin-top: 1.5rem; }
  .devices-photo { width: min(100%, 22rem); margin-top: 3rem; }
  .split.computer > .s-media { grid-column: 1 / -1; grid-row: 1; }
  .split.computer > .s-text { grid-column: 1 / -1; grid-row: 2; }
  .plan-names { grid-column: 1 / span 6; }
  .plan-stage { grid-column: 7 / -1; }
  /* no pin on narrower screens: the title heads the section and the screens follow in two columns */
  .live-pin { position: static; height: auto; display: block; padding-inline: var(--margin); }
  .live-title { text-align: left; max-width: none; }
  .live-run { margin-top: 3rem; padding-top: 0; row-gap: 4rem; }
  .p1, .p3 { grid-column: 1 / span 6; }
  .p2, .p4 { grid-column: 7 / span 6; margin-top: 10rem; }
  .close { min-height: 0; }
  .close-legal { padding-top: 6rem; }
}

/* ---------- phone: its own composition ---------- */
@media (max-width: 767px) {
  /* the links take their own row under the wordmark, clear of the monument on the right */
  .bar { flex-wrap: wrap; row-gap: 0.85rem; }
  .bar-links { flex-basis: 100%; gap: 1.1rem; font-size: var(--step-small); }
  .monument {
    writing-mode: vertical-rl; left: auto; right: calc(var(--step-monument) * -0.2); bottom: auto; top: 50%;
    font-size: 34vw; line-height: 0.8; transform: translateY(-50%);
  }
  .hero-copy { top: calc(var(--margin) + 6.5rem); max-width: 58vw; }
  .hero-line { font-size: 2.25rem; line-height: 1.05; }
  .hero-sub { font-size: 1.125rem; line-height: 1.35; margin-top: 0.75rem; }
  .hero-copy .button { margin-top: 1.5rem; padding: 0 1.2rem; }
  .beats { left: var(--margin); right: var(--margin); width: auto; bottom: 9svh; }
  .beat-count { bottom: calc(9svh - 2.2rem); }

  .hall-rest { grid-template-columns: 1fr; }

  /* the picture of Home comes first, then the tabs, the words and the buttons */
  .showcase-split { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
  .split.showcase-split > .s-media, .split.showcase-split > .s-text { grid-column: 1; }
  .split.showcase-split > .showcase-side { display: contents; }
  .tabs { order: 2; font-size: 1.0625rem; gap: 1.4rem; }
  .plate { order: 1; }
  .showcase-text { order: 3; }
  .cells { order: 4; grid-template-columns: 1fr; }
  .cell { min-height: 60px; }

  .facts, .side-body.facts, .s-text.facts, .s-text .facts { --cols: 1; }
  .proofs { grid-template-columns: 1fr; }
  .connect-body { margin-top: 1rem; }
  .asks { gap: 1.75rem; }

  /* on a phone the panels leave the picture and sit under it, at reading size */
  .ask-shot { container-type: normal; }
  .ask-panel { position: static; width: auto; padding: 18px; border-radius: 0; gap: 12px; background: #16181c; }
  .ask-head { font-size: 1.125rem; }
  .ask-pill, .ask-idea { font-size: 0.875rem; padding: 6px 12px; border-radius: 999px; }
  .ask-field { font-size: 0.9375rem; padding: 10px 12px; border-radius: 10px; }
  .ask-ideas { gap: 8px; }
  .ask-q { font-size: 0.875rem; margin-top: 4px; }
  .ask-a { font-size: 1rem; }
  .glance-stage { aspect-ratio: 3 / 4; }
  .g-bar { font-size: 3.4cqw; gap: 2cqw; top: 3cqh; }
  .g-tabs { display: none; }
  .g-search, .g-avatar { width: 8cqw; height: 8cqw; }
  .g-card { left: 4cqw; right: 4cqw; width: auto; top: 13cqh; font-size: 3.4cqw; gap: 2.6cqw; padding: 4.5cqw; border-radius: 4cqw; }
  .g-top, .g-small, .g-pill, .g-hours span, .g-days p { font-size: 3cqw; }
  .g-sub, .g-hours i, .g-credit { font-size: 2.7cqw; }
  .g-match { font-size: 3.4cqw; }
  .g-crest { width: 8cqw; height: 8cqw; font-size: 2.2cqw; }
  .g-score { font-size: 6cqw; }
  .g-temp { font-size: 10cqw; }
  .g-hours .g-ico { font-size: 4.4cqw; }
  .g-days p { grid-template-columns: 9cqw 5cqw 7cqw 1fr 7cqw; }
  .g-range { height: 1.1cqw; }
  .g-date { font-size: 4.4cqw; }
  .g-list li { grid-template-columns: 4cqw 14cqw 1fr; font-size: 3.3cqw; gap: 2.4cqw; }
  .g-list .g-ico { font-size: 3.4cqw; }
  .connect-stage { margin-top: 2.5rem; container-type: normal; }
  .ic-ground { aspect-ratio: 4 / 3; }
  .ic-card { position: static; transform: none; width: auto; border-radius: 0; background: #16181c; }
  .ic-steps { padding: 16px 18px; gap: 10px; }
  .ic-name { font-size: 0.8125rem; }
  .ic-step { font-size: 0.9375rem; gap: 10px; }
  .ic-mark { width: 16px; height: 16px; }
  .ic-mark::after { left: 5px; top: 2px; width: 5px; height: 9px; border-right-width: 2px; border-bottom-width: 2px; }
  .ic-run .ic-mark { border-width: 2px; }
  .ic-offer { padding: 16px 18px; gap: 8px; border-top: 0; margin-top: 2px; }
  .ic-title { font-size: 1.0625rem; }
  .ic-body { font-size: 0.9375rem; }
  .ic-pill { font-size: 0.875rem; padding: 6px 12px; border-radius: 999px; }
  .ic-pills { flex-wrap: wrap; gap: 8px; }
  .js .connect-stage .ic-offer, .js .connect-stage.is-playing .ic-offer { transform: none; }

  .figure-row { grid-template-columns: 88px minmax(0, 1fr); column-gap: 1rem; }
  .figure-row dt { grid-column: 1; font-size: 1.5rem; }
  .needs .figure-row { grid-template-columns: 96px minmax(0, 1fr); }
  .needs .figure-row dt { font-size: 1.125rem; white-space: normal; text-align: left; }
  .figure-row dd { grid-column: 2; }
  .devices-photo { width: 56%; margin: 3rem 0 0 auto; }
  .downloads .button { flex: 1 1 100%; }

  .plans { display: block; }
  .plan-stage { margin-top: 2.5rem; padding-top: 0; }
  .plan-stage .button { width: 100%; }

  .faq details { margin-inline: calc(var(--margin) * -1); padding-inline: var(--margin); }
  .faq summary { font-size: 1.125rem; }

  .live-run { display: block; margin-top: 2.5rem; padding-bottom: calc(var(--section) / 2); }
  .portrait { width: 72%; margin-top: 0; }
  .portrait + .portrait { margin-top: 48px; }
  .p2, .p4 { margin-left: auto; }

  .close-top { display: block; }
  .close-title { font-size: var(--step-display); }
  .close-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 2.5rem; font-size: 0.9375rem; }
}