/* The relaunch homepage (RELAUNCH.md section 13, the signed-off sketch in
   tmp/design-canvas/Main.dc.html, ported to tokens). Prefixed rl- so the
   older marketing pages keep landing.css untouched until R5. Every
   entrance rests on the finished page: keyframes carry the hidden start,
   never a default (the canvas lesson, 2026-09-14). */

.rl-page {
  font-size: var(--text-base);
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}

.rl-page h1,
.rl-page h2,
.rl-page h3 {
  font-family: var(--font-display);
  font-weight: 600;
  text-wrap: balance;
}

.rl-page h1 {
  font-size: var(--text-h1);
  line-height: 0.98;
  letter-spacing: -0.04em;
  max-width: 14ch;
}

.rl-page h2 {
  font-size: var(--text-h2);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.rl-page h3 {
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.rl-page a:where(:not(.btn)) {
  color: inherit;
  text-decoration: none;
}

.rl-accent { color: var(--accent); }

.rl-wrap {
  max-width: 86rem;
  margin-inline: auto;
  padding-inline: var(--space-7);
  position: relative;
}

.rl-sec { padding-top: 8.5rem; }

.rl-lead {
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 41rem;
  text-wrap: pretty;
}

.rl-sub {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 35rem;
  text-wrap: pretty;
}

.rl-label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--ink-mute);
  line-height: 1.3;
}

.rl-ul {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1.5px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 2px;
  transition: background-size 380ms var(--ease-out), color 200ms;
}

.rl-ul:hover,
a:hover > .rl-ul {
  background-size: 100% 1.5px;
}

.rl-tlink {
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.rl-tlink:hover { color: var(--accent); }

.rl-arr {
  flex: 0 0 auto;
  transition: transform 320ms var(--ease-out);
}

a:hover > .rl-arr { transform: translateX(4px); }

.rl-alert {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--paper-card);
  border: 1px solid var(--accent);
  color: var(--accent-deep);
  font-size: var(--text-sm);
}

/* ---------- hero: the render bench ---------- */
.rl-hero {
  position: relative;
  padding: 3.75rem 0 6rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  overflow: hidden;
}

.rl-grid {
  position: absolute;
  left: 0;
  right: 0;
  top: -140px;
  bottom: 0;
  background-image: linear-gradient(var(--ink) 1px, transparent 1px), linear-gradient(90deg, var(--ink) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: 0.085;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 24%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 24%, #000 20%, transparent 75%);
  pointer-events: none;
}

.rl-hero > * { position: relative; }

.rl-hero h1 { animation: rl-rise 1s var(--ease-out) 100ms both; }
.rl-hero .rl-lead { text-align: center; animation: rl-rise 1s var(--ease-out) 240ms both; }

.rl-ctas {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  animation: rl-rise 1s var(--ease-out) 380ms both;
}

@keyframes rl-rise {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

.rl-line {
  width: 100%;
  max-width: 86rem;
  padding-inline: var(--space-7);
  margin-top: var(--space-6);
  animation: rl-rise 1.1s var(--ease-out) 520ms both;
}

.rl-axis {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 440px;
  border-bottom: 1px solid var(--ink-mute);
  padding-bottom: var(--space-3);
  text-align: left;
}

.rl-axis > div {
  position: relative;
  padding-left: 14px;
}

.rl-axis > div::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -13px;
  height: 12px;
  width: 1px;
  background: var(--ink-mute);
}

.rl-axis b {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.rl-shr { display: none; }

.rl-diagram {
  position: relative;
  margin-top: var(--space-4);
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 440px;
  align-items: center;
  height: 350px;
}

.rl-photo {
  width: 240px;
  height: 180px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper-card);
  position: relative;
  z-index: 2;
  box-shadow: 0 12px 26px -16px rgba(20, 32, 42, 0.45);
}

.rl-photo img,
.rl-result img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rl-lbl {
  position: absolute;
  left: 10px;
  bottom: 10px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  padding: 7px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  backdrop-filter: blur(6px);
  white-space: nowrap;
}

.rl-lbl.is-deep {
  background: var(--deep);
  color: #fff;
}

.rl-stream {
  position: relative;
  z-index: 1;
  height: 236px;
  overflow: hidden;
  margin: 0 -130px;
}

.rl-track {
  position: absolute;
  top: 50%;
  left: 0;
  display: flex;
  gap: 12px;
  transform: translate(0, -50%);
  will-change: transform;
}

.rl-track img {
  width: 112px;
  height: 84px;
  object-fit: cover;
  border-radius: 6px;
}


.rl-result {
  position: relative;
  z-index: 2;
  width: 440px;
  height: 330px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper-card);
  box-shadow: 0 34px 64px -30px rgba(20, 32, 42, 0.6), 0 26px 54px -22px rgba(194, 65, 12, 0.4);
}

.rl-result img { position: absolute; inset: 0; }
.rl-afters { position: absolute; inset: 0; }
.rl-after { position: absolute; inset: 0; }
/* At rest (no script) the first style shows; live, the bench controller
   sweeps each layer in by class and stacks them by z-index. */
.rl-after { clip-path: inset(0 100% 0 0); transition: clip-path 2s var(--ease-sweep); }
.rl-after.is-1 { clip-path: inset(0 0 0 0); }
.rl-bench-live .rl-after.is-1:not(.is-in) { clip-path: inset(0 100% 0 0); }
.rl-after.is-in { clip-path: inset(0 0 0 0); }
.rl-after.is-snap { transition: none; }

.rl-scan {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  left: 0;
  opacity: 0;
  background: #fff;
  box-shadow: 0 0 26px 6px rgba(255, 255, 255, 0.55);
  z-index: 4;
}

.rl-scan.is-on { animation: rl-scan 2s var(--ease-sweep) forwards; }

@keyframes rl-scan {
  0% { left: 0; opacity: 1; }
  96% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* ---------- the bench (the generator) ---------- */
.rl-start { padding-top: 4px; }

.rl-panel {
  background: var(--paper-card);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  box-shadow: var(--shadow-deep);
}

.rl-bench {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--space-7);
}

/* A photo-shaped box that follows the chips as they scroll, never the
   column's full height: stretched to the config column it overran a
   laptop screen (owner report 2026-09-15, 825px at 1280 by 720). */
.rl-drop {
  position: sticky;
  top: calc(var(--header-h) + var(--space-4));
  align-self: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
  aspect-ratio: 4 / 3;
  min-height: 20rem;
  max-height: 60vh;
  padding: var(--space-6);
  border: 1.5px dashed var(--ink-mute);
  border-radius: var(--radius-md);
  background: var(--paper);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 240ms, background 240ms;
}

.rl-drop:hover,
.rl-drop:has(input:focus-visible),
.rl-drop.is-over {
  border-color: var(--accent);
  background: #faf1eb;
}

.rl-drop input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.rl-drop .rl-big {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.875rem;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.rl-drop .btn { align-self: flex-start; pointer-events: none; }

.rl-drop-preview {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.rl-drop.has-photo > :not(.rl-drop-preview):not(input):not(.rl-drop-name) { display: none; }

.rl-drop-name {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: none;
}

.rl-drop.has-photo .rl-drop-name { display: inline-flex; }

.rl-cfg {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.rl-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

.rl-row:first-child { border-top: 0; padding-top: 0; }
.rl-row > .rl-label { padding-top: 9px; }

.rl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.rl-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--paper-card);
  cursor: pointer;
  transition: border-color 200ms, transform 240ms var(--ease-out), background 200ms, color 200ms;
}

.rl-chip:hover { border-color: var(--ink); transform: translateY(-1px); }

.rl-chip:has(:checked) {
  background: var(--deep);
  color: #fff;
  border-color: var(--deep);
}

.rl-chip:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.rl-chip .rl-tier {
  font-size: 0.6875rem;
  color: var(--accent);
}

.rl-chip:has(:checked) .rl-tier { color: var(--loud); }

.rl-detail {
  display: none;
  margin-top: var(--space-2);
}

.rl-chips:has(input[value="other"]:checked) + .rl-detail { display: block; }

.rl-tiles {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: var(--space-2);
  scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent);
}

.rl-tiles::-webkit-scrollbar { display: none; }
/* Mouse dragging (drag_controller), the strip's rules: the hand, nothing
   selected or picked up during a pull. The fade at the right edge says
   there is more where the scrollbar used to. */
.rl-tiles.is-draggable { cursor: grab; }
.rl-tiles.is-dragging { cursor: grabbing; user-select: none; scroll-behavior: auto; scroll-snap-type: none; }
.rl-tiles.is-dragging label { pointer-events: none; }
.rl-tiles img { -webkit-user-drag: none; user-select: none; }

.rl-tile {
  flex: 0 0 auto;
  width: 104px;
  display: grid;
  gap: 5px;
  cursor: pointer;
  scroll-snap-align: start;
}

.rl-tile .rl-im {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 8px;
  border: 2px solid transparent;
  transition: border-color 200ms;
}

.rl-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out);
}

.rl-tile:hover img { transform: scale(1.06); }
.rl-tile:has(:checked) .rl-im { border-color: var(--accent); }

.rl-tile .rl-nm {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-soft);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rl-tile:has(:checked) .rl-nm { color: var(--ink); }

.rl-field input[type="text"] {
  width: 100%;
  padding: 0.6rem 0.8rem;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--ink);
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.rl-field input[type="text"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

/* The rows follow the chosen tool (bench_form_controller sets hidden);
   without script the :has() rule still shows the second photo for Style
   Transfer, and a hidden row or tile stays hidden. */
.rl-reference { display: none; }
.rl-cfg:has(input[name="tool"][value="styletransfer"]:checked) .rl-reference:not([hidden]) { display: grid; }
.rl-row[hidden], .rl-tile[hidden], .label-optional[hidden] { display: none; }
.rl-reference input[type="file"] { font-size: var(--text-sm); }

.rl-bench-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-2);
}

.rl-how {
  margin: var(--space-6) auto 0;
  max-width: 42rem;
  text-align: center;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* ---------- the editorial split ---------- */
.rl-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 5rem;
  align-items: start;
}

.rl-split .rl-sticky {
  position: sticky;
  top: calc(var(--header-h) + var(--space-5));
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* ---------- three ways: the ledger and the pairs ---------- */
.rl-ledger { border-top: 2px solid var(--ink); }

.rl-ledger .rl-row-l {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px;
  gap: var(--space-6);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}

.rl-ledger h3 { font-size: 1.5rem; margin-bottom: var(--space-2); }
.rl-ledger p { color: var(--ink-soft); font-size: var(--text-sm); max-width: 31rem; text-wrap: pretty; }

.rl-ledger .rl-fig {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.375rem;
  letter-spacing: -0.02em;
  text-align: right;
  color: var(--ink-mute);
}

.rl-ledger .is-win h3,
.rl-ledger .is-win .rl-fig { color: var(--accent); }

.rl-pairs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-7);
  margin-top: 4.5rem;
}

.rl-pair { position: relative; margin: 0; }

.rl-pair .rl-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.rl-pair .rl-head h3 { font-size: 1.3125rem; }
.rl-shot { position: relative; }

.rl-main {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--paper-deep);
  /* A finger on the pair peeks instead of scrolling (peek_controller). */
  touch-action: none;
}

.rl-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* No zoom on the comparison pairs (owner call 2026-09-15): the peek is
   the only motion here, so the structure reads still. */
.rl-main .rl-lbl.is-deep { bottom: auto; top: 10px; }
.rl-main .rl-lbl.is-hint { left: auto; right: 10px; opacity: 0.92; transition: opacity 300ms; }
.rl-main:hover .rl-lbl.is-hint { opacity: 0; }

.rl-peek {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.rl-peek img { width: 100%; height: 100%; object-fit: cover; }

.rl-inset {
  position: absolute;
  left: 20px;
  bottom: -22px;
  width: 32%;
  aspect-ratio: 3 / 2;
  border-radius: 8px;
  overflow: hidden;
  border: 3px solid #fff;
  box-shadow: 0 16px 34px -12px rgba(20, 32, 42, 0.55);
  background: var(--paper-deep);
}

.rl-inset img { width: 100%; height: 100%; object-fit: cover; }
.rl-inset .rl-lbl { left: 8px; bottom: 8px; }

.rl-pair figcaption {
  margin-top: var(--space-6);
  padding-left: calc(32% + 44px);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--ink-soft);
  min-height: 64px;
  text-wrap: pretty;
}

/* ---------- tools: the contact sheet ---------- */
.rl-tools-head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 5rem;
  align-items: end;
  margin-bottom: 3.5rem;
}

.rl-tools {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6) var(--space-5);
  padding-bottom: 3.5rem;
}

.rl-tools > :nth-child(4n+2),
.rl-tools > :nth-child(4n+4) { translate: 0 52px; }

.rl-tool { margin: 0; }

.rl-cmp {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  background: var(--paper-deep);
}

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

.rl-cmp .rl-aft {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1100ms var(--ease-sweep);
}

.rl-cmp:hover .rl-aft,
.rl-cmp.is-before .rl-aft { clip-path: inset(0 0 0 100%); }

.rl-cmp .rl-edge {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: #fff;
  box-shadow: 0 0 16px 4px rgba(255, 255, 255, 0.45);
  opacity: 0;
  transition: left 1100ms var(--ease-sweep), opacity 200ms;
  z-index: 2;
}

.rl-cmp:hover .rl-edge,
.rl-cmp.is-before .rl-edge { left: 100%; opacity: 1; }
.rl-cmp .rl-lbl { transition: opacity 320ms; z-index: 3; }
.rl-cmp .rl-lbl.is-b { opacity: 0; }
.rl-cmp:hover .rl-lbl.is-a, .rl-cmp.is-before .rl-lbl.is-a { opacity: 0; }
.rl-cmp:hover .rl-lbl.is-b, .rl-cmp.is-before .rl-lbl.is-b { opacity: 1; }

.rl-tool .rl-nm {
  margin-top: var(--space-4);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  font-size: 1rem;
  font-weight: 600;
  transition: color 200ms;
}

.rl-tool:hover .rl-nm { color: var(--accent); }

.rl-tier {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--accent);
  border: 1px solid rgba(194, 65, 12, 0.4);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  line-height: 1.2;
}

.rl-tool p {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  margin-top: var(--space-1);
  text-wrap: pretty;
}

/* ---------- built for: the index ---------- */
.rl-roles { border-top: 2px solid var(--ink); }

.rl-roles a {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) 28px;
  gap: var(--space-5);
  align-items: baseline;
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--line);
  transition: transform 380ms var(--ease-out);
}

.rl-roles a:hover { transform: translateX(8px); }
.rl-roles h3 { font-size: 1.875rem; letter-spacing: -0.02em; transition: color 200ms; }
.rl-roles a:hover h3 { color: var(--accent); }
.rl-roles p { font-size: var(--text-sm); color: var(--ink-soft); }

.rl-roles .rl-arr {
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 240ms, transform 380ms var(--ease-out);
  color: var(--accent);
  align-self: center;
}

.rl-roles a:hover .rl-arr { opacity: 1; transform: none; }

/* ---------- styles: the count and the strip ---------- */
.rl-dark {
  background: var(--deep);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 3.75rem 4rem;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: center;
}

.rl-dark .rl-big {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(5rem, 4rem + 5vw, 10.5rem);
  line-height: 0.88;
  letter-spacing: -0.05em;
  color: var(--loud);
}

.rl-dark .rl-cap {
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
  margin-top: var(--space-3);
}

.rl-dark p {
  font-size: 1.25rem;
  line-height: 1.5;
  color: #dfe5eb;
  max-width: 30rem;
  text-wrap: pretty;
}

.rl-dark .rl-tlink { color: #fff; margin-top: var(--space-5); }
.rl-dark .rl-tlink:hover { color: var(--loud); }

.rl-strip-wrap {
  margin-top: var(--space-5);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
}

.rl-strip {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 6px 0 8px;
}

.rl-strip::-webkit-scrollbar { display: none; }
/* Mouse dragging (drag_controller): the hand says so, and nothing in the
   strip may be selected or picked up while a pull is on. */
.rl-strip.is-draggable { cursor: grab; }
.rl-strip.is-dragging { cursor: grabbing; user-select: none; scroll-behavior: auto; }
.rl-strip.is-dragging a { pointer-events: none; }
.rl-strip img { -webkit-user-drag: none; user-select: none; }
.rl-strip a { flex: 0 0 200px; display: block; }
.rl-strip .rl-im { border-radius: var(--radius-sm); overflow: hidden; }
.rl-strip img { width: 200px; height: 150px; object-fit: cover; transition: transform 900ms var(--ease-out); }
.rl-strip a:hover img { transform: scale(1.06); }
.rl-strip .rl-nm { display: block; margin-top: 10px; font-size: var(--text-sm); font-weight: 500; transition: color 200ms; }
.rl-strip a:hover .rl-nm { color: var(--accent); }

/* ---------- more rooms ---------- */
.rl-latest-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

/* ---------- more rooms: the mosaic ---------- */
/* One wide room, two stacked beside it, three below. Each render sits
 over the photo it came from; hover (or a tap where there is no
 hover) sweeps the photo in under the scan line, the hero's device
 in reverse. Captions ride the image so every tile is pure picture
 and the rows line up. */
.rl-rooms {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-auto-rows: 250px;
gap: var(--space-4);
}

.rl-room {
position: relative;
margin: 0;
border-radius: var(--radius-md);
overflow: hidden;
background: var(--tint);
cursor: pointer;
}

.rl-room img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1200ms var(--ease-out);
}

.rl-room-photo {
position: absolute;
inset: 0;
z-index: 2;
clip-path: inset(0 100% 0 0);
transition: clip-path 900ms var(--ease-sweep);
}

.rl-room .rl-scan { z-index: 4; }

.rl-room figcaption {
position: absolute;
left: 12px;
bottom: 12px;
z-index: 3;
display: flex;
gap: 8px;
align-items: baseline;
padding: 8px 12px;
border-radius: var(--radius-pill);
background: rgba(15, 20, 23, 0.72);
color: #fff;
font-size: var(--text-sm);
line-height: 1;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}

.rl-room figcaption b { font-weight: 600; }
.rl-room figcaption span { color: #cfd7df; }

.rl-room .rl-room-hint {
left: auto;
right: 12px;
bottom: 12px;
z-index: 3;
background: #fff;
color: var(--ink);
opacity: 0;
transform: translateY(6px);
transition: opacity 300ms, transform 300ms var(--ease-out);
}

.rl-room.is-a { grid-column: 1 / 9; grid-row: 1 / 3; }
.rl-room.is-b { grid-column: 9 / 13; grid-row: 1; }
.rl-room.is-c { grid-column: 9 / 13; grid-row: 2; }
.rl-room.is-d, .rl-room.is-e, .rl-room.is-f { grid-column: span 4; grid-row: 3; }

@media (hover: hover) {
.rl-room:hover .rl-room-photo { clip-path: inset(0 0 0 0); }
.rl-room:hover .rl-scan { animation: rl-scan 900ms var(--ease-sweep) forwards; }
.rl-room:hover .rl-room-hint { opacity: 1; transform: none; }
.rl-room:hover img { transform: scale(1.02); }
}

@media (hover: none) {
.rl-room.is-before .rl-room-photo { clip-path: inset(0 0 0 0); }
.rl-room.is-before .rl-scan { animation: rl-scan 900ms var(--ease-sweep) forwards; }
.rl-room.is-before .rl-room-hint { opacity: 1; transform: none; }
}

/* ---------- answers ---------- */
.rl-faq { border-top: 2px solid var(--ink); }

.rl-faq > div {
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--space-6);
}

.rl-faq h3 { font-size: 1.3125rem; transition: color 200ms; }
.rl-faq > div:hover h3 { color: var(--accent); }
.rl-faq p { color: var(--ink-soft); font-size: var(--text-sm); max-width: 35rem; text-wrap: pretty; }

/* ---------- the close: the horizon ---------- */
/* Full bleed, the deep sky, the ground in the footer's ink so the
   footer carries on below it. horizon_controller paints the arc, the
   rim and the sun on the canvas; without WebGL the ::before stands in
   with a still horizon: the ground as a great circle with a lit rim. */
.rl-horizon {
  position: relative;
  margin-top: 8.5rem;
  min-height: 600px;
  background: var(--deep);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

.rl-horizon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 80%;
  width: 340vw;
  height: 340vw;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--footer);
  box-shadow: 0 -1px 0 0 rgba(255, 215, 194, 0.45), 0 -30px 90px rgba(194, 65, 12, 0.35);
  z-index: 0;
}

.rl-horizon-sky { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; display: block; }
.rl-horizon-sky[hidden] { display: none; }

.rl-horizon-inner {
  position: relative;
  z-index: 2;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  text-align: center;
  padding: 4rem var(--space-6) 13rem;
}

.rl-horizon h2 { color: #fff; max-width: 54rem; font-size: clamp(2.25rem, 1.6rem + 2.8vw, 4rem); text-shadow: 0 2px 30px rgba(11, 18, 25, 0.5); }
.rl-horizon .rl-u { position: relative; display: inline-block; color: var(--loud); }
.rl-horizon .rl-u svg { position: absolute; left: 0; right: 0; bottom: -12px; width: 100%; height: 16px; overflow: visible; }
.rl-horizon .rl-u path { stroke: var(--accent); stroke-width: 3; stroke-linecap: round; fill: none; stroke-dasharray: 220; stroke-dashoffset: 0; }

/* Over the sky the halo is the full peach bloom; on the light page it stays low (buttons.css). */
.rl-horizon .rl-halo::before { inset: -70px -60px; background: radial-gradient(closest-side, rgba(255, 215, 194, 0.55), rgba(237, 107, 36, 0.2) 50%, transparent 100%); filter: blur(22px); }

/* The footer is the ground: no gap between the horizon and it. */
body:has(.rl-horizon) .site-footer { margin-top: 0; }

.rl-fine {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 14px rgba(20, 32, 42, 0.6);
  display: flex;
  gap: var(--space-2) var(--space-6);
  flex-wrap: wrap;
  justify-content: center;
}

/* ---------- effects: the glow, the smoke, the grain, the rim, the peek ---------- */
.rl-glow { --gx: 84%; --gy: 18%; --tx: 84%; --ty: 18%; }

.rl-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(300px circle at var(--gx) var(--gy), rgba(194, 65, 12, 0.55), rgba(194, 65, 12, 0) 62%), radial-gradient(460px circle at var(--tx) var(--ty), rgba(194, 65, 12, 0.3), rgba(194, 65, 12, 0) 62%);
  animation: rl-breathe 6s ease-in-out infinite;
}

.rl-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.6;
  background-image: radial-gradient(circle, rgba(255, 215, 194, 0.9) 1px, transparent 1.6px);
  background-size: 22px 22px;
  background-position: 11px 11px;
  -webkit-mask-image: radial-gradient(280px circle at var(--gx) var(--gy), #000, transparent 72%);
  mask-image: radial-gradient(280px circle at var(--gx) var(--gy), #000, transparent 72%);
}

.rl-glow > * { position: relative; z-index: 1; }
.rl-glow.no-dots::after { display: none; }

@keyframes rl-breathe {
  0%, 100% { opacity: 0.78; }
  50% { opacity: 1; }
}

.rl-neb {
  border-radius: 50%;
  filter: url(#rl-smoke);
  pointer-events: none;
  mix-blend-mode: screen;
  aspect-ratio: 1;
}

.rl-glow > .rl-neb { position: absolute; z-index: 0; }
.rl-neb.is-1 { width: 70%; left: -18%; top: -22%; background: radial-gradient(circle, rgba(194, 65, 12, 0.85), rgba(194, 65, 12, 0) 62%); animation: rl-neb1 14s ease-in-out infinite alternate; }
.rl-neb.is-2 { width: 80%; right: -30%; top: 14%; background: radial-gradient(circle, rgba(255, 215, 194, 0.42), rgba(255, 215, 194, 0) 60%); animation: rl-neb2 19s ease-in-out infinite alternate; }
.rl-neb.is-3 { width: 65%; left: 12%; bottom: -34%; background: radial-gradient(circle, rgba(150, 48, 10, 0.95), rgba(150, 48, 10, 0) 60%); animation: rl-neb3 16s ease-in-out infinite alternate; }

@keyframes rl-neb1 { to { transform: translate(22%, 16%) scale(1.18); } }
@keyframes rl-neb2 { to { transform: translate(-20%, 24%) scale(0.9); } }
@keyframes rl-neb3 { to { transform: translate(14%, -20%) scale(1.14); } }

.rl-grain {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.09;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

.rl-glow > .rl-grain { position: absolute; z-index: 0; }

.rl-rim {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 215, 194, 0.75), rgba(255, 215, 194, 0.18) 40%, rgba(255, 215, 194, 0.08));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.rl-glow > .rl-rim { position: absolute; z-index: 2; }

/* ---------- the sign-in dialog ---------- */
.rl-dialog {
  border: 0;
  border-radius: var(--radius-lg);
  padding: 0;
  width: min(26rem, calc(100vw - 2rem));
  background: var(--paper-card);
  color: var(--ink);
  box-shadow: var(--shadow-deep);
}

.rl-dialog::backdrop {
  background: rgba(15, 20, 23, 0.55);
  backdrop-filter: blur(4px);
}

.rl-dialog-body {
  padding: var(--space-6);
  display: grid;
  gap: var(--space-4);
}

.rl-dialog h2 { font-size: 1.75rem; }
.rl-dialog .rl-sub { max-width: none; }

.rl-dialog-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper-card);
  color: var(--ink);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

/* ---------- scroll: reveals ride the scroll timeline where the browser has one ---------- */
@supports (animation-timeline: view()) {
  .rl-rv { animation: rl-rv linear both; animation-timeline: view(); animation-range: entry 0% entry 32%; }
  .rl-rv-x { animation: rl-rvx linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
  .rl-dark .rl-big { animation: rl-pop linear both; animation-timeline: view(); animation-range: entry 10% entry 65%; }
  .rl-grid { animation: rl-bgdrift linear both; animation-timeline: scroll(root); animation-range: 0 900px; }
  .rl-band .rl-u path { animation: rl-draw linear both; animation-timeline: view(); animation-range: entry 20% entry 70%; }
}

@keyframes rl-rv { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes rl-rvx { from { opacity: 0; transform: translateX(-64px); } to { opacity: 1; transform: none; } }
@keyframes rl-pop { from { opacity: 0; transform: scale(0.86); } to { opacity: 1; transform: none; } }
@keyframes rl-bgdrift { to { transform: translateY(-160px); } }
@keyframes rl-draw { from { stroke-dashoffset: 220; } to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .rl-page *, .rl-page *::before, .rl-page *::after { animation: none !important; transition: none !important; }
  .rl-after:not(.is-1), .rl-scan { display: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .rl-wrap, .rl-line { padding-inline: var(--space-6); }
  .rl-sec { padding-top: 6.5rem; }
  .rl-axis, .rl-diagram { grid-template-columns: 180px minmax(0, 1fr) 360px; }
  .rl-diagram { height: 300px; }
  .rl-photo { width: 180px; height: 135px; }
  .rl-result { width: 360px; height: 270px; }
  .rl-stream { height: 190px; }
  .rl-track img { width: 96px; height: 72px; }
  .rl-split, .rl-tools-head { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .rl-split .rl-sticky { position: static; }
  .rl-bench { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .rl-drop { position: relative; top: auto; aspect-ratio: auto; min-height: 240px; max-height: none; }
  .rl-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-bottom: 2.75rem; }
  .rl-tools > :nth-child(n) { translate: none; }
  .rl-tools > :nth-child(3n+2) { translate: 0 40px; }
  .rl-pairs { gap: var(--space-6); }
  .rl-dark { padding: var(--space-7); }
  .rl-roles a { grid-template-columns: 210px minmax(0, 1fr) 28px; }
  .rl-roles h3 { font-size: 1.625rem; }
  .rl-band { padding: 4.5rem var(--space-6); }
}

@media (max-width: 720px) {
  .rl-page { font-size: 1rem; }
  .rl-page h3 { font-size: 1.25rem; }
  .rl-wrap, .rl-line { padding-inline: var(--space-5); }
  .rl-hero { padding: var(--space-7) 0 3.75rem; gap: var(--space-5); }
  .rl-lead { font-size: 1.125rem; }
  .rl-hero .rl-lead { font-size: 1.0625rem; }
  .rl-ctas { flex-direction: column; gap: var(--space-4); }
  .rl-line { margin-top: var(--space-6); }
  .rl-axis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
  .rl-axis > div { padding-left: 8px; }
  .rl-axis b { font-size: 0.8125rem; margin-bottom: 0; white-space: nowrap; }
  .rl-axis .rl-label { display: none; }
  .rl-lng { display: none; }
  .rl-shr { display: inline; }
  .rl-diagram { grid-template-columns: 120px minmax(0, 1fr); grid-template-rows: auto auto; height: auto; gap: var(--space-4); margin-top: var(--space-6); }
  .rl-photo { width: 120px; height: 90px; }
  .rl-stream { height: 90px; margin: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
  .rl-track { gap: 8px; }
  .rl-track img { width: 72px; height: 54px; }
  .rl-result { grid-column: 1 / -1; width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .rl-panel { padding: var(--space-5); border-radius: var(--radius-md); }
  .rl-bench { gap: var(--space-5); }
  .rl-drop { padding: var(--space-5); min-height: 190px; }
  .rl-drop .rl-big { font-size: 1.5rem; }
  .rl-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .rl-row > .rl-label { padding-top: 0; }
  .rl-bench-foot { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .rl-bench-foot .btn { width: 100%; }
  .rl-how { margin-top: var(--space-5); font-size: 1rem; }
  .rl-sec { padding-top: 4.75rem; }
  .rl-split { gap: var(--space-6); }
  .rl-ledger .rl-row-l { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding: var(--space-5) 0; }
  .rl-ledger .rl-fig { text-align: left; font-size: 1.125rem; }
  .rl-pairs { grid-template-columns: minmax(0, 1fr); gap: 3.5rem; margin-top: var(--space-7); }
  .rl-inset { width: 38%; left: 12px; bottom: -18px; }
  .rl-pair figcaption { padding-left: 0; margin-top: 34px; min-height: 0; }
  .rl-dark { grid-template-columns: minmax(0, 1fr); padding: var(--space-6) var(--space-5); gap: var(--space-5); }
  .rl-dark p { font-size: 1.0625rem; }
  .rl-strip { gap: 10px; }
  .rl-strip a { flex: 0 0 150px; }
  .rl-strip img { width: 150px; height: 112px; }
  .rl-strip .rl-nm { font-size: 0.8125rem; }
  .rl-tools-head { margin-bottom: var(--space-6); }
  .rl-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); padding-bottom: var(--space-5); }
  .rl-tools > :nth-child(n) { translate: none; }
  .rl-tools > :nth-child(2n) { translate: 0 24px; }
  .rl-tool .rl-nm { font-size: var(--text-sm); flex-wrap: wrap; gap: 6px; }
  .rl-tool p { font-size: var(--text-xs); }
  .rl-roles a { grid-template-columns: minmax(0, 1fr) 24px; gap: 4px var(--space-3); padding: var(--space-4) 0; }
  .rl-roles h3 { font-size: 1.5rem; grid-column: 1; grid-row: 1; }
  .rl-roles p { grid-column: 1; grid-row: 2; }
  .rl-roles .rl-arr { grid-column: 2; grid-row: 1 / span 2; }
  .rl-rooms { grid-auto-rows: auto; gap: var(--space-3); }
  .rl-room { grid-column: 1 / -1 !important; grid-row: auto !important; aspect-ratio: 4 / 3; }
  .rl-faq > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding: var(--space-5) 0; }
  .rl-horizon { min-height: 520px; margin-top: 6rem; }
  .rl-horizon-inner { min-height: 520px; padding: 3rem var(--space-5) 11rem; gap: var(--space-5); }
}

.rl-defs { position: absolute; width: 0; height: 0; }
.rl-peek.is-1 { clip-path: url(#rl-peek-1); }
.rl-peek.is-2 { clip-path: url(#rl-peek-2); }

/* The hidden radios inside the chips and tiles are absolutely positioned;
   anchoring them to their label keeps them inside the scroller, so a tile
   far down the strip never widens the page. */
.rl-chip, .rl-tile { position: relative; }

/* The global margin reset would pin the dialog to the corner. */
.rl-dialog { margin: auto; }