/* The home page in design H (dev/landing/handover.md, section 4.1). First the board's own
   rules as the canvas has them (dev/landing/reference/pages/home.css), then its inline
   styles as classes. */
.h-hero-inner { padding: clamp(56px, 8.4vw, 120px) clamp(16px, 4vw, 40px) clamp(88px, 8vw, 116px); }
@media (max-width: 640px) { .h-hero-inner { padding-bottom: 140px; } }
.h-hero .rr-streams-pause { bottom: 40px; }
/* On touch screens the streams run without their glow. The glow is a blur over every
   moving pulse, so it is blurred again on each frame, and on an iPhone that stuttered in
   Safari and Chrome alike (reported 2026-10-27). The pulses and trails stay as drawn. It
   still stuttered without the glow (2026-10-28): the masks were drawn again on each frame
   too, which the streams' layers end (src/site/scenes.ts, lightStreams). */
@media (hover: none) and (pointer: coarse) { .h-hero .rr-streams-glow { display: none; } }
.g-card { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 18px; }
.g-card h3 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.g-card p.g-lede { margin: 4px 0 0; color: var(--text-2); font-size: 15px; }
.g-inset { margin-top: auto; position: relative; overflow: hidden; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; height: 340px; padding: 22px 22px 0; }
.g-inset::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 48px; background: linear-gradient(to bottom, transparent, var(--bg)); pointer-events: none; }
.g-two { margin: 0; font-size: clamp(28px, 3vw, 40px); line-height: 1.12; font-weight: 600; letter-spacing: -0.025em; }
.g-two span { color: var(--text-3); }
.g-faq details { border-bottom: 1px solid var(--line); }
.g-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-size: 17px; font-weight: 500; }
.g-faq summary::-webkit-details-marker { display: none; }
.g-faq .g-chev { display: inline-flex; color: var(--text-3); }
.g-faq details[open] .g-chev { transform: rotate(180deg); }
.g-faq details p { margin: 0; padding: 0 0 18px; max-width: 62ch; color: var(--text-2); }

/* The hero. */
.h-hero { position: relative; overflow: hidden; }
.h-hero-inner { position: relative; max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; }
.h-title { margin: 0; max-width: 12ch; font-size: clamp(46px, 6.6vw, 96px); line-height: 0.98; font-weight: 600; letter-spacing: -0.04em; text-wrap: balance; }
.h-title span { color: var(--text-3); }
.h-lead { margin: 0; max-width: 48ch; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.5; color: var(--text-2); }
.h-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.h-line { margin: 0; font-size: 13px; color: var(--text-2); }
.h-replay { position: relative; z-index: 1; max-width: 1240px; margin: calc(-1 * clamp(16px, 1.8vw, 24px)) auto 0; padding: 0 clamp(16px, 4vw, 40px); }
.h-replay-inner { max-width: 940px; margin: 0 auto; }
/* The replay's "Looks fixed" reply grows into its place as it is posted, so the diff's lines
   under the thread slide down with it, where the design system's keyframes only fade it in
   over a space kept for it from the start (asked for by the maintainer on 2026-11-06). Its
   row is 0fr until the reply is posted (rr-replay-5, 61% to 65%) and 1fr from then; the
   thread's gap goes with it. Without motion it is 1fr, the last frame. A change for the
   design system's ReviewReplay to take up. */
.rr-replay-grow { display: grid; grid-template-rows: 1fr; margin-top: calc(-1 * var(--space-10)); }
.rr-replay-grow > .rr-replay-step { min-height: 0; overflow: hidden; }
.rr-replay-grow > .rr-replay-step > .rr-tcomment { margin-top: var(--space-10); }
.rr-replay .rr-replay-grow { animation: rr-replay-grow 16s cubic-bezier(0.2, 0, 0, 1) infinite both; }
@keyframes rr-replay-grow { 0%, 61% { grid-template-rows: 0fr; } 65%, 97% { grid-template-rows: 1fr; } 100% { grid-template-rows: 0fr; } }
/* The room the reply takes, kept at the scene's foot until it is posted: an unseen copy of
   it, as wide as the diff's thread, that shrinks as the reply grows, so the scene's height
   never changes and nothing under it moves. Without motion it is gone, as the reply is in
   place. */
.rr-replay-room { display: grid; grid-template-rows: 0fr; margin-top: calc(-1 * var(--space-12)); visibility: hidden; }
.rr-replay-room > .rr-diff { min-height: 0; overflow: hidden; border-top-width: 0; border-bottom-width: 0; }
.rr-replay-room .rr-diff-thread { padding-top: 0; padding-bottom: 0; border-top-width: 0; border-bottom-width: 0; }
.rr-replay-room .rr-diff-thread > div { padding-top: var(--space-10); }
.rr-replay .rr-replay-room { animation: rr-replay-room 16s cubic-bezier(0.2, 0, 0, 1) infinite both; }
@keyframes rr-replay-room { 0%, 61% { grid-template-rows: 1fr; } 65%, 97% { grid-template-rows: 0fr; } 100% { grid-template-rows: 1fr; } }

/* The sections. */
.g-section { max-width: 1240px; margin: 0 auto; padding: clamp(88px, 10vw, 128px) clamp(16px, 4vw, 40px) 0; display: flex; flex-direction: column; gap: 28px; }
.g-two-how { max-width: 26ch; }
.g-two-data { max-width: 24ch; }
.g-caption { margin: 0; font-size: 13px; color: var(--text-3); }
.g-lede code, .g-faq code { font-family: var(--font-mono); font-size: 14px; }

/* The numbers (H3, decided by the maintainer on 2026-11-06): under the replay, with a
   two-tone heading as the other sections have; their definitions at the page's foot. */
.g-two-numbers { max-width: 24ch; }
.g-section.g-definitions { padding-top: 72px; }

/* Fast, without being shallow. */
.g-two-fast { max-width: 24ch; }
.g-fast-lede { margin: 0; max-width: 62ch; font-size: 17px; color: var(--text-2); }
.g-fast-lede code { font-family: var(--font-mono); font-size: 15px; }

/* From the push to the fix: the cards. */
.g-cards { display: flex; flex-wrap: wrap; gap: 12px; }
.g-card-wide { flex: 2 1 560px; }
.g-card-check { flex: 1 1 320px; }
.g-card-third { flex: 1 1 300px; }
.g-card-check .g-inset { display: flex; flex-direction: column; gap: 12px; }
.g-mono { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.75; color: var(--text-2); display: flex; flex-direction: column; }
.g-mono-strong { color: var(--text); }
.g-mono-major { color: var(--major); }

/* Built for the way agents push. */
.g-agents { display: flex; flex-wrap: wrap; gap: 40px 64px; align-items: center; }
.g-agents-text { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.g-eyebrow { margin: 0; font-size: 13px; font-weight: 500; color: var(--text-3); }
.g-agents-lede { margin: 0; font-size: 17px; color: var(--text-2); max-width: 46ch; }
.g-agents-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.g-agents-scene { flex: 1 1 480px; min-width: 0; }

/* Your code and data. */
.g-section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 32px; }
.g-points { display: flex; flex-wrap: wrap; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.g-point { flex: 1 1 260px; min-width: 0; padding: 24px; display: flex; flex-direction: column; gap: 10px; background: var(--surface); }
.g-point-icon { color: var(--text-2); }
.g-point strong { font-weight: 600; }
.g-point > span:last-child { color: var(--text-2); font-size: 15px; }

/* Choose how to start. */
.g-plans { display: flex; flex-wrap: wrap; gap: 12px; }
.g-plan { flex: 1 1 420px; padding: 28px; gap: 14px; }
.g-plan h3 { font-size: 22px; }
.g-plan p { margin: 0; color: var(--text-2); }
.g-plan p.g-plan-note { font-size: 14px; color: var(--text-3); }
.g-plan-action { margin-top: 8px; }

/* Questions. */
.g-faq-section { flex-direction: row; flex-wrap: wrap; gap: 24px 48px; }
.g-faq-title { flex: 1 1 320px; }
.g-faq { flex: 2 1 560px; min-width: 0; border-top: 1px solid var(--line); }

/* Get started. */
.g-start { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: clamp(72px, 9vw, 128px) clamp(16px, 4vw, 40px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.g-start-title { margin: 0; font-size: clamp(36px, 4.6vw, 64px); line-height: 1.04; font-weight: 600; letter-spacing: -0.035em; text-wrap: balance; }
.g-start p { margin: 0; color: var(--text-2); }
.g-start-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.g-start p.g-start-trial { font-size: 13px; }