/* 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 promise and the reel ---------- */
.rl-hero {
  position: relative;
  padding: 5.25rem 0 6rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  overflow: hidden;
}

.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;
}

/* The tool icons under the button (BACKLOG B16): a dock of small tiles,
   each an icon over a one-word label. */
.rl-hero-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  animation: rl-rise 1s var(--ease-out) 440ms both;
}

.rl-hero-tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 64px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink-soft);
  transition: color 200ms;
}

.rl-hero-tool-ic {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--paper-card);
  border: var(--border-hard);
  color: var(--ink);
  transition: border-color 200ms, color 200ms, transform 240ms var(--ease-out);
}

.rl-hero-tool-ic .tool-icon { width: 22px; height: 22px; }
.rl-hero-tool-ic.is-more { font-size: 0.875rem; font-weight: 600; }

.rl-hero-tool:hover { color: var(--accent); }
.rl-hero-tool:hover .rl-hero-tool-ic { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }

/* The trust line under the button (BACKLOG B15). */
.rl-hero-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
  color: var(--ink-soft);
  animation: rl-rise 1s var(--ease-out) 500ms both;
}

.rl-hero-trust li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.rl-hero-trust .check-icon {
  width: 16px;
  height: 16px;
  color: var(--accent);
  stroke-width: 2.4;
}

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

/* The reel (BACKLOG B9, with B7's layout): the promise on the left and the
   reel large on the right on a wide screen, the reel straight under the
   headline below that. 4:3, the reel's own shape, so nothing is cropped. */
.rl-hero.is-reel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  grid-template-rows: 1fr auto auto auto auto auto 1fr;
  grid-template-areas: ". reel" "title reel" "lead reel" "ctas reel" "tools reel" "trust reel" ". reel";
  align-items: start;
  column-gap: var(--space-8);
  row-gap: var(--space-5);
  max-width: 86rem;
  margin-inline: auto;
  padding-inline: var(--space-7);
  text-align: left;
}

.rl-hero.is-reel h1 { grid-area: title; font-size: min(var(--text-h1), 4.5rem, 5vw); }
.rl-hero.is-reel .rl-lead { grid-area: lead; text-align: left; max-width: 34rem; }
.rl-hero.is-reel .rl-ctas { grid-area: ctas; }
.rl-hero.is-reel .rl-hero-tools { grid-area: tools; justify-content: flex-start; margin-left: -8px; }
.rl-hero.is-reel .rl-hero-trust { grid-area: trust; justify-content: flex-start; }

.rl-reel {
  grid-area: reel;
  align-self: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--deep);
  box-shadow: 0 34px 64px -30px rgba(20, 32, 42, 0.6), 0 26px 54px -22px rgba(194, 65, 12, 0.4);
  animation: rl-rise 1.1s var(--ease-out) 520ms both;
}

/* The promise's room (BACKLOG B8): a line of its own, so a longer or
   shorter room never reflows the rest of the headline. Both words share
   one grid cell as wide as the headline, aligned as the headline is; the
   room-word controller rolls one up and out as the other rises in (grid
   items are blocks, so the roll's transform applies to them). The clip
   is the row itself (the letters start well inside its top) plus the
   depth of a "g" below it, measured at 0.09em in Familjen Grotesk, so a
   word leaving or arriving never shows over the lines around it. */
.rl-promise { max-width: 17ch; }

.rl-room-word {
  display: grid;
  clip-path: inset(0 -1em -0.14em -1em);
}

.rl-room-word-now,
.rl-room-word-next {
  grid-area: 1 / 1;
}

.rl-reel-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* No backdrop-filter: at 92% white the blur never showed, and inside the
   tool cards' scroll reveal every label re-blurred each frame. The
   contact sheet dropped to about 35 fps coming into view, 60 without
   (trace, 2026-09-29; the lag an older Android felt). */
.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);
  white-space: nowrap;
}

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

/* ---------- 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).
   justify-self is stated because a grid item with an aspect-ratio sizes
   as start: the min-height came back through the ratio as a 427px width
   and ran over the labels wherever the column was narrower (1101 to
   about 1220 wide, owner report 2026-09-17). */
.rl-drop {
  position: sticky;
  top: calc(var(--header-h) + var(--space-4));
  align-self: start;
  justify-self: stretch;
  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%;
}

/* The img reset's display: block outranks the hidden attribute. */
.rl-drop-preview[hidden] { display: none; }

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

/* Why a file was refused. It only shows with the zone's own copy (a
   refused file clears the photo), so it sits in the flow under the button. */
.rl-drop-notice {
  position: static;
  align-self: flex-start;
  white-space: normal;
  line-height: 1.3;
}

.rl-drop-notice[hidden] { display: none; }

.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); }

/* The padlock in a plan mark once free designs are on (option C). */
.rl-tier-lock { width: 0.85em; height: 0.85em; stroke-width: 2.4; }

.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; }
/* The fade's own width of room after the last tile, so scrolled to the
   end the last style (Hollywood Regency) clears the fade (owner report
   2026-09-24). The strip's gap adds the rest. */
.rl-tiles::after { content: ""; flex: 0 0 48px; }
/* 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-pairs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-7);
  margin-top: 4.5rem;
}

/* The trio (owner call 2026-09-16): the photo above both results, a
   drawn fork from it to each, and under each result a verdict with a
   checklist of what stayed where it was. The fork draws itself in on
   the scroll timeline where there is one; at rest it is drawn. */
.rl-source {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(100%, 30rem);
  margin: 0;
  text-align: center;
}

.rl-source figcaption {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.rl-fork {
  grid-column: 1 / -1;
  position: relative;
  height: 96px;
  margin: -1.25rem 0 -1.5rem;
  view-timeline: --rl-fork;
}

/* A quarter of the row each, so the tip lands on its column's center;
   the drawing stretches to fit and the stroke keeps its width. */
.rl-fork svg { position: absolute; top: 0; width: 25%; height: 96px; overflow: visible; }
.rl-fork .is-them { right: 50%; }
.rl-fork .is-us { left: 50%; }

.rl-fork path {
  fill: none;
  stroke: var(--ink-mute);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}

.rl-fork .is-us path { stroke: var(--accent); }

.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-main {
  position: relative;
  aspect-ratio: 4 / 3;
  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. */
/* The handwritten notes on the kitchen pair (BACKLOG B13): a word in a
   marker hand and a drawn arrow at the window, the detail that decides
   it. The system's handwriting faces (Bradley Hand on Apple devices,
   Segoe Print or Ink Free on Windows, cursive elsewhere); white with a
   soft shadow to read on any photo; never in the way of the peek. */
.rl-note {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  font-family: "Bradley Hand", "Segoe Print", "Ink Free", "Noteworthy", cursive;
  font-size: clamp(0.95rem, 0.8rem + 0.5vw, 1.2rem);
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 1px 2px rgba(15, 20, 23, 0.75), 0 0 10px rgba(15, 20, 23, 0.45);
  pointer-events: none;
  max-width: 55%;
  transition: opacity 300ms;
}

.rl-note svg {
  flex: none;
  width: 3rem;
  height: 2rem;
  fill: none;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 2px rgba(15, 20, 23, 0.7));
}

.rl-note.is-them { top: 26%; left: 47%; transform: rotate(-3deg); flex-direction: row; align-items: flex-start; }
.rl-note.is-them svg { order: -1; margin-top: 0.4rem; }
.rl-note.is-us { top: 34%; right: 9%; transform: rotate(-2deg); text-align: right; align-items: flex-start; }
.rl-note.is-us svg { margin-top: -1.1rem; }
.rl-main:hover .rl-note { opacity: 0; }

.rl-main .rl-lbl.is-hint { left: auto; right: 10px; bottom: auto; top: 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-pair figcaption { margin-top: var(--space-5); text-wrap: pretty; }

.rl-verdict {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: var(--space-3);
}

.rl-pair.is-us .rl-verdict { color: var(--accent); }

.rl-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--ink-soft);
}

.rl-checks li { position: relative; padding-left: 24px; }

.rl-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 13px;
  height: 13px;
  background: var(--ink-mute);
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 2.5l7 7M9.5 2.5l-7 7' stroke='black' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 2.5l7 7M9.5 2.5l-7 7' stroke='black' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
}

.rl-pair.is-us .rl-checks li::before {
  background: var(--accent);
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.5l3 3 6-7' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.5l3 3 6-7' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}

/* ---------- 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 .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 .rl-lbl { transition: opacity 320ms; z-index: 3; }
.rl-cmp .rl-lbl.is-b { opacity: 0; }

.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;
}

/* The wipe rides :hover on a pointer and the tapped is-before class on
   touch, never both (the rooms below split the same way). iOS keeps
   :hover on the last tapped card until a tap lands elsewhere, so one
   shared rule left tapped cards stuck on the photo, a second tap doing
   nothing, and the title in the accent (owner's phone, 2026-09-16). */
@media (hover: hover) {
.rl-cmp:hover .rl-aft { clip-path: inset(0 0 0 100%); }
.rl-cmp:hover .rl-edge { left: 100%; opacity: 1; }
.rl-cmp:hover .rl-lbl.is-a { opacity: 0; }
.rl-cmp:hover .rl-lbl.is-b { opacity: 1; }
.rl-tool:hover .rl-nm { color: var(--accent); }
}

@media (hover: none) {
.rl-cmp.is-before .rl-aft { clip-path: inset(0 0 0 100%); }
.rl-cmp.is-before .rl-edge { left: 100%; opacity: 1; }
.rl-cmp.is-before .rl-lbl.is-a { opacity: 0; }
.rl-cmp.is-before .rl-lbl.is-b { opacity: 1; }
}

.rl-tier {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  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; }

/* The homepage's roles (BACKLOG B14): a compact grid of small cards,
   four across; the /for hub keeps the long list above. */
.rl-roles-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.rl-role {
  display: block;
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--paper-card);
  border: var(--border-hard);
  transition: border-color 200ms, transform 240ms var(--ease-out);
}

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

.rl-role h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  font-size: 1.25rem;
  transition: color 200ms;
}

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

.rl-role.is-start { background: var(--deep); border-color: var(--deep); color: #fff; }
.rl-role.is-start p { color: #cfd7df; }
.rl-role.is-start:hover { border-color: var(--accent); }

.rl-role p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* ---------- 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); }

/* ---------- styles: the catalog (BACKLOG B10) ---------- */
.rl-styles {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-5) var(--space-3);
}

.rl-style-tile { display: block; }

.rl-style-tile .rl-im {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--tint);
}

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

.rl-style-tile:hover img { transform: scale(1.06); }

.rl-style-tile .rl-nm {
  display: block;
  margin-top: 8px;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.3;
  text-wrap: balance;
  transition: color 200ms;
}

.rl-style-tile:hover .rl-nm { color: var(--accent); }
.rl-styles-all { display: none; }

/* ---------- section heads: title left, a line or link right ---------- */
.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;
}

/* ---------- 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-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-band .rl-u path { animation: rl-draw linear both; animation-timeline: view(); animation-range: entry 20% entry 70%; }
  .rl-fork path { animation: rl-draw-fork linear both; animation-timeline: --rl-fork; animation-range: cover 0% cover 32%; }
}

@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-draw { from { stroke-dashoffset: 220; } to { stroke-dashoffset: 0; } }
@keyframes rl-draw-fork { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

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

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .rl-roles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rl-styles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .rl-wrap { padding-inline: var(--space-6); }
  .rl-hero.is-reel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "title" "reel" "lead" "ctas" "tools" "trust";
    justify-items: center;
    text-align: center;
    padding-inline: var(--space-6);
  }
  /* The 5vw cap is for the promise beside the reel; stacked, it would
     shrink the headline to body size on a phone. */
  .rl-hero.is-reel h1 { font-size: var(--text-h1); }
  .rl-hero.is-reel .rl-lead { text-align: center; }
  .rl-hero.is-reel .rl-hero-tools { justify-content: center; margin-left: 0; }
  .rl-hero.is-reel .rl-hero-trust { justify-content: center; }
  .rl-reel { max-width: 44rem; }
  .rl-sec { padding-top: 6.5rem; }
  .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-roles-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .rl-role { padding: var(--space-4); }
  .rl-page { font-size: 1rem; }
  .rl-page h3 { font-size: 1.25rem; }
  .rl-wrap { padding-inline: var(--space-5); }
  .rl-hero.is-reel { padding-inline: var(--space-5); }
  .rl-hero { padding: calc(var(--space-7) + var(--space-5)) 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-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-pairs { grid-template-columns: minmax(0, 1fr); gap: 3.5rem; margin-top: var(--space-7); }
  .rl-source { width: 100%; }
  .rl-fork { display: none; }
  .rl-pair .rl-head { display: block; }
  .rl-pair .rl-head .rl-label { display: block; margin-top: 4px; }
  .rl-pair figcaption { margin-top: var(--space-4); }
  .rl-verdict { font-size: 1.375rem; }
  .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-styles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4) var(--space-2); }
  .rl-style-tile.is-extra { display: none; }
  .rl-style-tile .rl-nm { font-size: 0.8125rem; }
  .rl-styles-all { display: block; margin: var(--space-5) 0 0; }
  .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-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; }

/* ---------- the bench's guide (owner call 2026-09-16) ---------- */
/* Two beats (guide_controller sets data-guide on the form). Until a photo
   exists the drop zone breathes with a ring in the accent, the one lit
   thing in the panel. The moment the photo lands one line sweeps down
   the option rows, room to tool to style, and ends on the button, which
   turns loud with the halo breathing under it (the hero pill's own
   light, a size down from the footer's sun). A tool that still needs a
   note or a second photo holds the ring on that row instead and the
   button stays ink. Reduced motion: the rings stand still, no sweep, no
   bloom; the colour flip carries the signal. Everything here animates
   paint or the compositor, never layout. */
/* The drop zone's ring: the ladder's orbit and the Pro card's rim,
   joined. A comet circles the edge at rest (a registered angle, so it
   animates); as the pointer approaches, guide_controller sets --rl-near
   (0 far, 1 at the box, the horizon's rule) and --bx/--by, the ring
   lights up on the side nearest the pointer, and a blurred spotlight
   behind the box follows it, bleeding past the edge for the bloom (no
   mask on it: a mask cuts a blur to a hard edge). The dashed line stays
   the drop affordance; the ring lives just outside it, so the zone no
   longer clips its edges (the preview keeps the corners on its own). */
@property --rl-comet {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.rl-drop { overflow: visible; isolation: isolate; }
.rl-drop-preview { border-radius: inherit; }

.rl-drop::before,
.rl-drop::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 500ms ease;
}

/* The ring: the pointer's light over the comet, masked to a 2.5px band. */
.rl-drop::before {
  inset: -4px;
  padding: 2.5px;
  border-radius: calc(var(--radius-md) + 4px);
  --rl-comet: 0deg;
  background:
    radial-gradient(300px circle at var(--bx, 50%) var(--by, -40%),
      rgb(255 215 194 / var(--rl-near, 0)),
      rgb(226 90 31 / var(--rl-near, 0)) 22%,
      rgb(226 90 31 / calc(var(--rl-near, 0) * 0.4)) 48%,
      transparent 70%),
    conic-gradient(from var(--rl-comet),
      rgba(194, 65, 12, 0.2) 0deg, rgba(194, 65, 12, 0.2) 190deg,
      rgba(226, 90, 31, 0.55) 292deg, rgba(226, 90, 31, 1) 336deg,
      var(--loud) 352deg, rgba(194, 65, 12, 0.2) 360deg);
  -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;
}

/* The spotlight: soft, behind the content, brightest under the pointer. */
.rl-drop::after {
  inset: -6px;
  border-radius: calc(var(--radius-md) + 6px);
  background: radial-gradient(340px circle at var(--bx, 50%) var(--by, 50%),
    rgb(226 90 31 / calc(var(--rl-near, 0) * 0.34)),
    rgb(255 215 194 / calc(var(--rl-near, 0) * 0.22)) 35%,
    transparent 70%);
  filter: blur(26px);
}

/* The photo first (BACKLOG B12, 2026-09-24): with the guide running and
   no photo yet, the drop zone stands alone in a panel its own width and
   the option rows wait under it, the button and its line still there (a
   click opens the chooser). The photo brings the rows back with the
   sweep. Without script the page shows everything (no is-guided). */
.draft-form.is-guided[data-guide="photo"] {
  grid-template-columns: minmax(0, 1fr);
  /* The panel hugs the drop zone (owner, 2026-09-24: the box's height
     was right, the white card around it was the waste); the photo
     widens it back to the two columns. */
  max-width: calc(46rem + 2 * var(--space-7));
  margin-inline: auto;
}
.draft-form.is-guided[data-guide="photo"] .rl-drop { position: relative; top: auto; align-items: center; text-align: center; }
.draft-form.is-guided[data-guide="photo"] .rl-drop .btn { align-self: center; }
.draft-form.is-guided[data-guide="photo"] .rl-cfg > .rl-row { display: none; }

.draft-form[data-guide="photo"] .rl-drop {
  border-color: rgba(194, 65, 12, 0.5);
  box-shadow: 0 0 0 1px rgba(226, 90, 31, 0.12), 0 0 56px -6px rgb(226 90 31 / calc(0.18 + 0.4 * var(--rl-near, 0)));
}

/* The comet turns only while the zone is on screen (guide_controller sets
   .is-in-view) and three times, then rests on the lit ring: turning a
   gradient's angle repaints the zone every frame, which a slow phone
   feels as lag through the whole page (2026-09-25, traced: it and the
   peek's shapes were all of the homepage's idle repainting). */
.draft-form[data-guide="photo"] .rl-drop::before { opacity: 1; animation: rl-comet 6s linear 3 paused; }
.draft-form[data-guide="photo"] .rl-drop.is-in-view::before { animation-play-state: running; }
.draft-form[data-guide="photo"] .rl-drop::after { opacity: 1; }
.draft-form[data-guide="photo"] .rl-drop.is-over { --rl-near: 1; }

@keyframes rl-comet { to { --rl-comet: 360deg; } }

/* The line: the hero's scan turned on its side. It travels the column's
   height (--rl-cfg-h, set by the controller) so it lands on the button. */
.rl-cfg { position: relative; }

.rl-cfg::after {
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  top: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent) 18%, var(--loud) 50%, var(--accent) 82%, transparent);
  box-shadow: 0 0 22px 4px rgba(226, 90, 31, 0.4);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  will-change: transform;
}

.draft-form[data-guide="sweep"] .rl-cfg::after { animation: rl-guide-sweep 700ms var(--ease-sweep) forwards; }

@keyframes rl-guide-sweep {
  0% { transform: translateY(0); opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(var(--rl-cfg-h, 100%)); opacity: 0; }
}

/* The button when everything is set: loud, a bloom as it turns, the halo
   breathing beneath it. */
.rl-bench-foot .rl-halo { flex-shrink: 0; }

.draft-form[data-guide="ready"] .rl-bench-foot .rl-halo::before {
  opacity: 0.8;
  transform: scale(1);
  animation: rl-guide-halo 3.6s ease-in-out infinite;
}

@keyframes rl-guide-halo {
  0%, 100% { opacity: 0.5; transform: scale(0.94); }
  50% { opacity: 0.95; transform: scale(1.08); }
}

.draft-form[data-guide="ready"] .rl-bench-foot .btn { animation: rl-guide-bloom 900ms var(--ease-out); }

@keyframes rl-guide-bloom {
  0% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 0 rgba(237, 107, 36, 0.55); }
  100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 26px rgba(237, 107, 36, 0); }
}

/* The row the tool still needs: the note where it is the instruction,
   the second photo for Style Transfer. */
.rl-row[data-guide-missing] .rl-field > input {
  border-color: var(--accent);
  animation: rl-guide-field 3.2s ease-in-out 3;
}

.rl-reference[data-guide-missing] input[type="file"] {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
}

@keyframes rl-guide-field {
  0%, 100% { box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.06); }
  50% { box-shadow: 0 0 0 6px rgba(194, 65, 12, 0.16); }
}

@media (prefers-reduced-motion: reduce) {
  .draft-form[data-guide="photo"] .rl-drop::before,
  .draft-form[data-guide="photo"] .rl-drop::after,
  .rl-row[data-guide-missing] .rl-field > input,
  .draft-form[data-guide="ready"] .rl-bench-foot .rl-halo::before,
  .draft-form[data-guide="ready"] .rl-bench-foot .btn,
  .draft-form[data-guide="sweep"] .rl-cfg::after { animation: none; }

  .rl-row[data-guide-missing] .rl-field > input { box-shadow: 0 0 0 4px rgba(194, 65, 12, 0.12); }
  .draft-form[data-guide="ready"] .rl-bench-foot .rl-halo::before { opacity: 0.7; transform: none; }
}