/* Rolltop's site (docs/PLAN-2026-10-31-rolltop-site-redesign.md): everything arriving, then put in its place.
   Dark only, on the film's claret night. Epilogue for display, DM Mono for names, dates, paths and counts, the
   system's text face for reading. #B24A60 with white is the one action colour (the app's own night action colour);
   night claret #E68A98 is for links, one headline phrase and the "you have another copy" mark; blush #EBAAB1 is the
   line and the read-text box only, never text. No red, and every verdict also carries its words.

   WCAG contrast, measured (relative luminance, 31 Oct 2026). AA asks 4.5:1 for text, 3:1 for large text and UI.
                       on ground #1A0C11   on panel #241016   on raised #2E1720   on the glow #421621
     text   #F7ECEE         16.47              15.67              14.44               13.29
     soft   #D9C3C7         11.39              10.84               9.99                9.19
     muted  #A88E94          6.30               6.00               5.53                5.09
     accent #E68A98          7.65               7.28               6.71                6.18
     white on action #B24A60 (buttons) 5.20, and on its hover #A3435A 5.99 · action against the ground 3.66 (UI 3:1)
   Graphics, not text: blush #EBAAB1 9.88 on the ground, the line at 60% 4.22, the dots that stay 2.30 (decoration,
   their count is written beside them). The glow is #7D2638 at 40% over the ground, behind the hero and the close only. */
@font-face { font-family: 'Epilogue'; src: url('fonts/Epilogue-Variable.latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'DM Mono'; src: url('fonts/DMMono-Regular.latin.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'DM Mono'; src: url('fonts/DMMono-Medium.latin.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root {
  --ground: #1A0C11; --panel: #241016; --raised: #2E1720; --line: rgba(235, 170, 177, .14); --line-strong: rgba(235, 170, 177, .26);
  --text: #F7ECEE; --soft: #D9C3C7; --muted: #A88E94;
  --accent: #E68A98; --blush: #EBAAB1; --wire: rgba(235, 170, 177, .6); --action: #B24A60; --action-hover: #A3435A;
  --glow: rgba(125, 38, 56, .4); --top: rgba(26, 12, 17, .84); --stay: rgba(217, 195, 199, .34);
  --head: 'Epilogue', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.25, .1, .25, 1);
  --out: cubic-bezier(.2, .8, .2, 1);
  --gutter: 24px;
  --wrap: min(1180px, calc(100vw - 2 * var(--gutter)));
  color-scheme: dark;
}
@media (prefers-contrast: more) {
  :root { --line: rgba(235, 170, 177, .3); --line-strong: rgba(235, 170, 177, .5); --muted: var(--soft); --wire: var(--accent); }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--ground); }
main { overflow-x: clip; }
body { margin: 0; background: var(--ground); color: var(--text); font: 17px/1.55 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--head); font-weight: 600; letter-spacing: -0.035em; line-height: 1.02; margin: 0; text-wrap: balance; }
h3 { letter-spacing: -0.025em; line-height: 1.15; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; }
s { text-decoration-thickness: 1px; }
code { font-family: var(--mono); font-size: .9em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--text); color: var(--ground); padding: 8px 12px; border-radius: 8px; z-index: 50; }
.skip:focus { left: 12px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.rt-wrap { width: var(--wrap); margin: 0 auto; }

/* Type: mono eyebrows and labels carry the structure; Epilogue carries the voice */
.rt-eyebrow, .rt-caps, .rt-label { font: 500 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.rt-eyebrow { margin-bottom: 20px; }
.rt-label { margin: 26px 0 10px; }
/* A section's head: a hairline, its name, and one reading from the demo on the right */
.rt-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 14px; border-top: 1px solid var(--line); margin-bottom: 44px; }
.rt-head .rt-eyebrow { margin: 0; }
.rt-reading { font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
section h2 { font-size: clamp(36px, 4.6vw, 64px); }
.rt-h3 { font-size: clamp(24px, 2.4vw, 32px); }
.rt-sub { color: var(--soft); font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; max-width: 620px; margin-top: 22px; }
.rt-fine { color: var(--muted); font-size: 14px; margin-top: 20px; }
.rt-mono { font: 12.5px/1.6 var(--mono); color: var(--muted); }

/* Buttons and the status line. #B24A60 is the one action colour. */
.rt-btn { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 22px; border-radius: 10px; background: var(--action); color: #fff; font: 600 15.5px var(--body); letter-spacing: -0.005em; border: 0; cursor: pointer; white-space: nowrap; transition: background .2s var(--ease); }
.rt-btn:hover { text-decoration: none; background: var(--action-hover); }
.rt-btn.small { height: 32px; padding: 0 14px; border-radius: 8px; font-size: 13px; }
.rt-status { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); font: 500 12.5px var(--mono); letter-spacing: .04em; }
.rt-status i { width: 7px; height: 7px; border-radius: 50%; flex: none; border: 1.5px solid var(--muted); }
.rt-status.review i { background: var(--blush); border-color: var(--blush); }
.rt-status.live i { background: var(--accent); border-color: var(--accent); }
.rt-actions { display: flex; align-items: center; gap: 14px 20px; flex-wrap: wrap; margin-top: 28px; }

/* Verdicts are marks with words: ● filled claret, you have another copy · ○ outlined, this may be your only copy ·
   a grey dot, your call or a private key */
.rt-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; display: inline-block; transform: translateY(-1px); }
.rt-dot.copy { background: var(--accent); }
.rt-dot.only { border: 1.5px solid var(--text); }
.rt-dot.call, .rt-dot.key { background: var(--muted); }
.rt-verdict { display: inline-flex; align-items: baseline; gap: 8px; font-weight: 500; font-size: 15px; color: var(--text); }

/* The header: the line glyph and the wordmark in Epilogue, as in the app */
.rt-top { position: fixed; inset: 0 0 auto; z-index: 20; height: 60px; display: flex; align-items: center; gap: 28px; padding: 0 max(var(--gutter), calc((100vw - 1180px) / 2)); transition: background .3s, border-color .3s; border-bottom: 1px solid transparent; }
.rt-top.solid { background: var(--top); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); border-color: var(--line); }
.rt-mark { display: inline-flex; align-items: center; gap: 10px; color: var(--text); }
.rt-mark:hover { text-decoration: none; }
.rt-mark b { font: 600 19px var(--head); letter-spacing: -0.035em; }
.rt-glyph { width: 22px; height: 22px; flex: none; }
.rt-top nav { display: flex; gap: 24px; margin-left: auto; }
.rt-top nav a { color: var(--soft); font-size: 14px; }
.rt-top nav a:hover { color: var(--text); text-decoration: none; }
.rt-top > .rt-btn, .rt-top > a:last-child:not(.rt-mark) { height: 36px; padding: 0 16px; border-radius: 9px; font-size: 13.5px; opacity: 0; pointer-events: none; transition: opacity .25s, background .2s; }
.rt-top.past > .rt-btn, .rt-top.past > a:last-child:not(.rt-mark) { opacity: 1; pointer-events: auto; }

/* The footer: the studio's other products, then the line glyph and the wordmark */
.rt-foot { border-top: 1px solid var(--line); padding: 48px max(var(--gutter), calc((100vw - 1180px) / 2)) 42px; }
.rt-foot .more h2 { font: 500 12px var(--mono); letter-spacing: .14em; color: var(--muted); }
.rt-foot .more a.more-app { background: var(--panel); border-color: var(--line); }
.rt-foot .more a.more-app:hover { border-color: var(--line-strong); }
.rt-foot .more .more-store { font: 12px var(--mono); letter-spacing: .02em; color: var(--muted); }
.rt-foot-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 28px; border-top: 1px solid var(--line); }
.rt-foot .rt-mark span { display: flex; flex-direction: column; gap: 3px; }
.rt-foot .rt-mark small { font: 12.5px var(--body); color: var(--muted); letter-spacing: 0; }
.rt-foot nav { display: flex; gap: 22px; flex-wrap: wrap; }
.rt-foot nav a { color: var(--soft); font-size: 14px; }
.rt-foot-fine { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-top: 24px; color: var(--muted); font-size: 12.5px; }
.rt-foot-fine a { color: var(--soft); }

/* Other pages: privacy, notify */
.rt-doc { position: relative; isolation: isolate; width: min(760px, calc(100vw - 2 * var(--gutter))); margin: 0 auto; padding: 150px 0 120px; }
.rt-doc h1 { font-size: clamp(40px, 6vw, 64px); margin-bottom: 16px; }
.rt-meta { color: var(--muted); font: 12.5px var(--mono); letter-spacing: .04em; margin-bottom: 38px; }
.rt-prose h2, .rt-prose h3 { font-size: 26px; letter-spacing: -0.025em; margin: 44px 0 12px; }
.rt-prose p, .rt-prose li { color: var(--soft); line-height: 1.65; }
.rt-prose strong { color: var(--text); }
.rt-prose p + p { margin-top: 12px; }
.rt-prose ul { list-style: none; padding: 0; margin: 10px 0; }
.rt-prose li { position: relative; padding-left: 22px; }
.rt-prose li::before { content: ''; position: absolute; left: 0; top: .78em; width: 10px; height: 1px; background: var(--muted); }
.rt-prose li + li { margin-top: 8px; }
.rt-icon { display: block; width: 76px; height: 76px; margin-bottom: 28px; border-radius: 17px; }
.rt-form { margin-top: 32px; }
.rt-form label { display: block; font: 500 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.rt-form .row { display: flex; gap: 10px; }
.rt-form input[type=email] { flex: 1; min-width: 0; height: 46px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--text); padding: 0 14px; font: 16px var(--body); }
.rt-form input[type=email]::placeholder { color: var(--muted); }
.rt-form .error { color: var(--accent); margin-top: 10px; }
.hp { position: absolute; left: -9999px; }
.rt-link { font-weight: 600; }

/* 1. Hero: left-aligned and editorial, a claret glow behind it, then the arrivals track full-bleed underneath */
.rt-hero { position: relative; padding: clamp(112px, 14vh, 150px) 0 0; overflow: hidden; }
.rt-hero::before { content: ''; position: absolute; inset: -20% -10% 35% 30%; background: radial-gradient(50% 50% at 60% 40%, var(--glow), rgba(125, 38, 56, 0) 70%); pointer-events: none; }
.rt-hero-text { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
.rt-hero-text > .rt-eyebrow { grid-column: 1 / -1; }
.rt-hero h1 { grid-column: 1 / span 8; font-size: clamp(44px, 6.4vw, 92px); line-height: .98; letter-spacing: -0.045em; }
.rt-hero h1 em { display: block; font-style: normal; color: var(--accent); }
.rt-hero-side { grid-column: 9 / -1; padding-bottom: 8px; }
.rt-lede { color: var(--soft); font-size: 18px; line-height: 1.5; max-width: 620px; }
.rt-price-line { margin-top: 16px; color: var(--muted); font-size: 14px; }
.rt-price-line span { display: block; margin-top: 4px; font: 12.5px var(--mono); }
.js [data-in] { opacity: 0; transform: translateY(14px); animation: rise .9s var(--out) forwards; animation-delay: calc(var(--d) * 110ms + 120ms); }
@keyframes rise { to { opacity: 1; transform: none; } }

/* The arrivals track: one ruled row an arrival, the rules running the width of the page. The blush line runs from an
   open ring at where it came from, through the name it arrived with, to the filled dot at its name or its verdict. */
.rt-arrivals { position: relative; margin: clamp(52px, 7vh, 76px) 0 0; }
.rt-track { width: var(--wrap); margin: 0 auto; }
.rt-track-cap { display: flex; gap: 18px; align-items: baseline; font: 500 11.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.rt-track-cap b { font-weight: 500; color: var(--soft); }
.rt-rows { position: relative; }
.rt-rows::before { content: ''; position: absolute; top: 0; left: calc(50% - 50vw); width: 100vw; height: 1px; background: var(--line); }
.rt-arrival { position: relative; display: grid; grid-template-columns: 64px 104px minmax(300px, 1fr) minmax(0, 1.05fr); column-gap: 18px; align-items: center; min-height: 35px; padding: 4px 0; }
.rt-arrival::after { content: ''; position: absolute; bottom: 0; left: calc(50% - 50vw); width: 100vw; height: 1px; background: var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.rt-a-on, .rt-a-by { font: 500 11.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.rt-a-by { color: var(--soft); }
.rt-a-wire { display: flex; align-items: center; min-width: 0; }
.rt-a-wire i { flex: none; display: block; }
.rt-a-wire .ring { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--blush); }
.rt-a-wire .seg { height: 1.5px; background: var(--wire); flex: 1 1 0; min-width: 14px; transform-origin: 0 50%; }
.rt-a-wire .seg.first { flex: 0 0 16px; }
.rt-a-wire .end { width: 9px; height: 9px; border-radius: 50%; background: var(--blush); }
.rt-a-old { position: relative; padding: 0 10px; font: 12.5px/1.3 var(--mono); color: var(--soft); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rt-arrival.shot .rt-a-old { color: var(--muted); }
.rt-arrival.shot .rt-a-old::after { content: ''; position: absolute; left: 10px; right: 10px; top: 52%; height: 1px; background: currentColor; transform-origin: 0 50%; }
.rt-a-to { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 15px; line-height: 1.3; min-width: 0; }
.rt-a-to b { font-weight: 600; }
.rt-a-to > span { color: var(--muted); font-size: 14px; }
.rt-arrival.dl .rt-a-to b { font-weight: 500; }
.rt-arrival.dl .rt-dot.only + b { color: var(--text); }

.rt-arrivals-cap { display: grid; grid-template-columns: 228px minmax(0, 1fr) minmax(0, .9fr); gap: 0 40px; align-items: start; margin-top: 22px; }
.rt-cap-why { display: flex; flex-direction: column; gap: 6px; }
.rt-cap-why .rt-verdict { font-size: 14px; }
.rt-cap-what { font-size: 16px; line-height: 1.5; }
.rt-cap-what span:not(.rt-file) { color: var(--soft); }
.rt-file { font-family: var(--mono); font-size: .9em; }
.rt-cap-foot { color: var(--muted); font-size: 14px; line-height: 1.55; }

/* Resolving, once, when the track is in view: top to bottom, each line draws from its ring to its dot, a
   screenshot's old name is struck, and its name or verdict settles. 360 ms a part, eased out. Without script,
   or with Reduce Motion, every row is simply resolved. */
.rt-arrivals { --t0: .55s; --step: 120ms; }
@media (prefers-reduced-motion: no-preference) {
  .js .rt-arrival .rt-a-old { animation: arrive .5s var(--out) both; animation-delay: calc(var(--i) * 40ms); }
  .js .rt-arrival .seg { animation: draw .36s var(--out) both; animation-delay: calc(var(--t0) + var(--i) * var(--step)); }
  .js .rt-arrival .seg:not(.first) { animation-delay: calc(var(--t0) + var(--i) * var(--step) + 80ms); }
  .js .rt-arrival .end { animation: fill .3s var(--out) both; animation-delay: calc(var(--t0) + var(--i) * var(--step) + 300ms); }
  .js .rt-arrival.shot .rt-a-old::after { animation: draw .3s var(--out) both; animation-delay: calc(var(--t0) + var(--i) * var(--step) + 120ms); }
  .js .rt-arrival.shot .rt-a-old { animation: arrive .5s var(--out) both, strike .3s var(--out) both; animation-delay: calc(var(--i) * 40ms), calc(var(--t0) + var(--i) * var(--step) + 120ms); }
  .js .rt-arrival .rt-a-to { animation: settle .36s var(--out) both; animation-delay: calc(var(--t0) + var(--i) * var(--step) + 320ms); }
  .js .rt-arrivals-cap { animation: fade-in .5s var(--out) both; animation-delay: calc(var(--t0) + 10 * var(--step) + 400ms); }
  .js .rt-arrivals :is(.rt-a-old, .seg, .end, .rt-a-old::after, .rt-a-to), .js .rt-arrivals-cap, .js .rt-arrival.shot .rt-a-old::after { animation-play-state: paused; }
  .js .rt-arrivals.go :is(.rt-a-old, .seg, .end, .rt-a-to), .js .rt-arrivals.go .rt-arrivals-cap, .js .rt-arrivals.go .rt-arrival.shot .rt-a-old::after { animation-play-state: running; }
}
@keyframes arrive { from { opacity: 0; transform: translateX(-10px); } }
@keyframes draw { from { transform: scaleX(0); } }
@keyframes fill { from { opacity: 0; transform: scale(.4); } }
@keyframes strike { from { color: var(--soft); } }
@keyframes settle { from { opacity: 0; transform: translateX(-8px); } }
@keyframes fade-in { from { opacity: 0; } }

@media (max-width: 1100px) {
  .rt-hero h1, .rt-hero-side { grid-column: 1 / -1; }
  .rt-hero-side { margin-top: 26px; padding: 0; max-width: 620px; }
  .rt-arrival { grid-template-columns: 58px 92px minmax(260px, 1fr) minmax(0, 1fr); column-gap: 14px; }
  .rt-arrivals-cap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 32px; }
  .rt-cap-foot { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .rt-arrival.wide-only { display: none; }
  .rt-arrival { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 6px; padding: 12px 0 13px; }
  .rt-a-on { grid-column: 1; }
  .rt-a-by { grid-column: 2; }
  .rt-a-wire, .rt-a-to { grid-column: 1 / -1; }
  .rt-a-old { font-size: 11.5px; padding: 0 8px; }
  .rt-a-wire .seg.first { flex-basis: 10px; }
  .rt-a-to { font-size: 15px; padding-left: 0; }
  .rt-arrivals-cap { grid-template-columns: minmax(0, 1fr); }
  .rt-cap-why { display: none; }
}
@media (max-width: 600px) {
  .rt-actions { flex-direction: column; align-items: flex-start; gap: 14px; }
  .rt-track-cap { flex-direction: column; gap: 2px; }
}

/* A picture with the line its name was read from: Vision's box, in blush */
.rt-pic { position: relative; border-radius: 8px; overflow: hidden; background: #fff; line-height: 0; }
.rt-pic img { display: block; width: 100%; height: auto; }
.rt-hl { position: absolute; border: 1.5px solid #C06A75; border-radius: 3px; background: rgba(192, 106, 117, .12); }
.rt-also { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; }
.rt-also > span { font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
.rt-also i { font: normal 12.5px/1.5 var(--mono); padding: 2px 10px; border-radius: 11px; border: 1px solid var(--line-strong); color: var(--soft); }
.rt-to-line { display: inline-block; flex: none; width: 28px; height: 1.5px; background: var(--wire); position: relative; vertical-align: middle; }
.rt-to-line::after { content: ''; position: absolute; right: -3px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--blush); }

/* 2. Named from its own text: one specimen at large scale, the rename ledger, then the rule row */
.rt-named { padding: 140px 0 150px; }
.rt-named-head h2 { max-width: 11em; }
.rt-specimen { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; margin: 72px 0 0; }
.rt-pic.big { border-radius: 12px; box-shadow: 0 50px 110px -30px rgba(0, 0, 0, .7), 0 0 0 1px var(--line-strong); }
.rt-pic.big .rt-hl { border-width: 2.5px; border-radius: 5px; background: rgba(192, 106, 117, .14); }
.rt-specimen figcaption .rt-caps { font-size: 11px; }
.rt-spec-old { font: 13.5px/1.4 var(--mono); color: var(--muted); margin: 8px 0 34px; overflow-wrap: anywhere; }
.rt-spec-read { color: var(--accent); }
.rt-spec-new { margin: 10px 0 22px; }
.rt-spec-new b { display: block; font: 600 clamp(40px, 4.4vw, 60px)/1 var(--head); letter-spacing: -0.04em; }
.rt-spec-new span { display: block; margin-top: 12px; color: var(--soft); font: 15px var(--mono); }
.rt-spec-to { display: flex; align-items: center; gap: 14px; margin-top: 26px; font: 13px var(--mono); color: var(--soft); }
.rt-spec-to .rt-to-line { width: 44px; }

.rt-renames { margin-top: 110px; }
.rt-renames-cols, .rt-renames li { display: grid; grid-template-columns: minmax(0, 5fr) 48px minmax(0, 7fr); gap: 18px; align-items: baseline; }
.rt-renames-cols { padding-bottom: 10px; font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.rt-renames-cols span:last-child { grid-column: 3; }
.rt-renames li { padding: 15px 0; border-top: 1px solid var(--line); }
.rt-renames li:last-child { border-bottom: 1px solid var(--line); }
.rt-renames s { font: 13px/1.4 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.rt-renames .rt-to-line { width: 40px; align-self: center; }
.rt-renames li > span { font-size: 17px; line-height: 1.35; }
.rt-renames li > span b { font-weight: 600; }
.rt-renames li > span span { color: var(--muted); font: 13px var(--mono); white-space: nowrap; }

/* A rule row: hairline tops, a statement and its reason */
.rt-rule-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 100px; }
.rt-rule-row li { border-top: 2px solid var(--line-strong); padding-top: 18px; }
.rt-rule-row b { display: block; font: 600 21px/1.2 var(--head); letter-spacing: -0.02em; }
.rt-rule-row span { display: block; color: var(--soft); font-size: 15px; line-height: 1.5; margin-top: 10px; }

/* The box draws on the picture, then the name settles */
@media (prefers-reduced-motion: no-preference) {
  .js .rt-specimen .rt-hl { opacity: 0; transform: scale(1.08); }
  .js .rt-specimen.seen .rt-hl { opacity: 1; transform: none; transition: opacity .36s var(--out) .5s, transform .36s var(--out) .5s; }
  .js .rt-specimen .rt-spec-old s { text-decoration-color: transparent; }
  .js .rt-specimen.seen .rt-spec-old s { text-decoration-color: currentColor; transition: text-decoration-color .3s var(--out) .8s; }
  .js .rt-specimen :is(.rt-spec-read, .rt-spec-new, .rt-also, .rt-spec-to) { opacity: 0; transform: translateY(6px); }
  .js .rt-specimen.seen :is(.rt-spec-read, .rt-spec-new, .rt-also, .rt-spec-to) { opacity: 1; transform: none; transition: opacity .4s var(--out) 1s, transform .4s var(--out) 1s; }
  .js .rt-specimen.seen :is(.rt-also, .rt-spec-to) { transition-delay: 1.15s; }
}
@media (max-width: 900px) {
  .rt-named { padding: 100px 0; }
  .rt-specimen { grid-template-columns: minmax(0, 1fr); gap: 34px; margin-top: 48px; }
  .rt-renames { margin-top: 80px; }
  .rt-renames-cols { display: none; }
  .rt-renames li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .rt-renames .rt-to-line { display: none; }
  .rt-rule-row { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 72px; }
}

/* 3. Where it came from: the line at editorial scale, down the left, its verdict at the foot; four more beside it */
.rt-from { padding: 40px 0 150px; }
.rt-from-head h2 { max-width: 11em; }
.rt-from-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; margin-top: 72px; align-items: start; }
.rt-path-file { font: 500 clamp(19px, 1.8vw, 24px)/1.3 var(--mono); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.rt-path-detail { color: var(--soft); font-size: 16px; margin-top: 10px; }
.rt-path-detail .rt-mono { display: block; margin-bottom: 4px; }
.rt-path-detail b { color: var(--text); font-weight: 600; }
.rt-path-line { position: relative; margin: 44px 0 0; display: grid; gap: 40px; }
.rt-path-line li { position: relative; padding-left: 52px; display: grid; gap: 6px; }
.rt-path-line li::before { content: ''; position: absolute; left: 0; top: 7px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--blush); box-sizing: border-box; z-index: 1; background: var(--ground); }
.rt-path-line li.here::before { background: var(--blush); left: -1px; top: 6px; width: 20px; height: 20px; }
.rt-path-line li:not(:last-child)::after { content: ''; position: absolute; left: 8px; top: 25px; bottom: -47px; width: 2px; background: var(--wire); transform-origin: top; }
.rt-path-line b { font: 600 clamp(26px, 2.8vw, 38px)/1.1 var(--head); letter-spacing: -0.035em; overflow-wrap: anywhere; }
.rt-path-line li.site b { font: 500 clamp(19px, 2vw, 27px)/1.25 var(--mono); letter-spacing: -0.02em; }
.rt-path-line span { font: 13px/1.5 var(--mono); color: var(--muted); }
.rt-path-verdict { margin: 46px 0 0 52px; padding-top: 20px; border-top: 1px solid var(--line-strong); }
.rt-path-verdict .rt-verdict { font: 600 22px/1.25 var(--head); letter-spacing: -0.02em; }
.rt-path-verdict .rt-dot { width: 10px; height: 10px; }
.rt-path-verdict p { color: var(--soft); margin-top: 8px; font-size: 16px; }
@media (prefers-reduced-motion: no-preference) {
  .js .rt-path .rt-path-line li::after { transform: scaleY(0); }
  .js .rt-path .rt-path-line li.here::before { opacity: 0; transform: scale(.4); }
  .js .rt-path.seen .rt-path-line li::after { transform: none; transition: transform .36s var(--out) calc(.35s + var(--i) * .3s); }
  .js .rt-path.seen .rt-path-line li.here::before { opacity: 1; transform: none; transition: opacity .3s var(--out) 1s, transform .3s var(--out) 1s; }
}

.rt-beside { border-top: 1px solid var(--line); }
.rt-beside li { padding: 22px 0 24px; border-bottom: 1px solid var(--line); }
.rt-beside-by { display: flex; align-items: center; gap: 12px; font: 500 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.rt-beside-by .rt-a-wire { width: 54px; flex: none; }
.rt-beside-file { font: 15px/1.4 var(--mono); margin-top: 10px; overflow-wrap: anywhere; }
.rt-beside-say { margin-top: 8px; font-size: 15px; line-height: 1.5; }
.rt-beside-say .rt-verdict { font-size: 15px; margin-right: 8px; }
.rt-beside-say span:not(.rt-verdict) { color: var(--soft); }

/* 4. The verdicts: each under its own rule, filled claret, ink, and grey for your call and a private key */
.rt-verdicts-h { margin-top: 130px; max-width: 16em; }
.rt-verdict-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.rt-verdict-row li { border-top: 2px solid var(--line-strong); padding-top: 18px; }
.rt-verdict-row li.copy { border-color: var(--accent); }
.rt-verdict-row li.only { border-color: var(--text); }
.rt-verdict-row li.key { border-top-style: dashed; }
.rt-verdict-row p { display: flex; align-items: baseline; gap: 10px; }
.rt-verdict-row b { font: 600 21px/1.2 var(--head); letter-spacing: -0.02em; }
.rt-verdict-row span { display: block; color: var(--soft); font-size: 15px; line-height: 1.5; margin-top: 10px; }
.rt-verdict-row span.rt-mono { color: var(--muted); font-size: 12.5px; margin-top: 14px; }
@media (max-width: 1000px) {
  .rt-from-grid { grid-template-columns: minmax(0, 1fr); gap: 64px; }
  .rt-verdict-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
}
@media (max-width: 600px) {
  .rt-from { padding-bottom: 100px; }
  .rt-path-line li { padding-left: 40px; }
  .rt-path-verdict { margin-left: 0; }
  .rt-verdicts-h { margin-top: 90px; }
  .rt-verdict-row { grid-template-columns: minmax(0, 1fr); }
}

/* 5. Where they came from: three numerals, each with a hairline bar of its kinds, the rest in a mono row, the rules
   as one sentence-shaped card; then every app and site it knows, as a dense mono index */
.rt-sources { padding: 40px 0 150px; }
.rt-sources h2 { max-width: 12em; }
.rt-big { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 64px; }
.rt-num { display: flex; align-items: baseline; gap: 16px; }
.rt-num b { font: 600 clamp(96px, 11.5vw, 170px)/.86 var(--head); letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
.rt-num span { font: 500 13px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.rt-kinds-bar { display: flex; gap: 3px; width: calc(var(--of) * 100%); margin-top: 26px; }
.rt-kinds-bar i { height: 2px; background: var(--blush); }
.rt-kinds-bar i.k1 { opacity: .62; }
.rt-kinds-bar i.k2 { opacity: .36; }
.rt-kinds-bar i.rest { background: var(--line-strong); }
.rt-kinds { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 12px 0 0; }
.rt-kinds div { display: flex; gap: 7px; font: 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rt-kinds dd { margin: 0; color: var(--soft); }
.rt-big-what { color: var(--soft); font-size: 15.5px; margin-top: 16px; max-width: 22em; }
@media (prefers-reduced-motion: no-preference) {
  .js .rt-big .rt-kinds-bar { transform: scaleX(0); transform-origin: 0 50%; }
  .js .rt-big.seen .rt-kinds-bar { transform: none; transition: transform .4s var(--out) .4s; }
}
.rt-src-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: 56px; align-items: start; margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--line); }
.rt-small { display: flex; flex-wrap: wrap; gap: 12px 34px; }
.rt-small span { display: inline-flex; align-items: baseline; gap: 10px; font: 500 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.rt-small b { font: 600 34px/1 var(--head); letter-spacing: -0.04em; color: var(--text); text-transform: none; }
.rt-rule-card { padding: 24px 26px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.rt-rule-card .rt-caps { font-size: 11px; margin-bottom: 14px; letter-spacing: .14em; }
.rt-rule-say { font: 500 clamp(21px, 2vw, 27px)/1.3 var(--head); letter-spacing: -0.02em; color: var(--soft); }
.rt-rule-say b { color: var(--text); font-weight: 600; }
.rt-rule-say .rt-to-line { width: 34px; margin: 0 10px 0 4px; }
.rt-rule-say.second { font-size: 17px; margin-top: 10px; }
.rt-rule-say.second .rt-to-line { width: 22px; }
.rt-rule-note { color: var(--muted); font-size: 14px; margin-top: 16px; }

.rt-index { margin-top: 130px; }
.rt-index-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
.rt-index-head h3 { grid-column: 1 / span 5; font-size: clamp(28px, 2.8vw, 38px); }
.rt-index-head .rt-sub { grid-column: 7 / -1; margin: 0; font-size: 16px; }
.rt-board { margin-top: 44px; columns: 4 220px; column-gap: 24px; padding-top: 22px; border-top: 1px solid var(--line-strong); }
.rt-board dl { break-inside: avoid; margin: 0 0 26px; }
.rt-board dt { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--line); font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.rt-board dt span:last-child { color: var(--accent); letter-spacing: .06em; }
.rt-board dd { margin: 0; font: 12.5px/1.95 var(--mono); color: var(--soft); overflow-wrap: anywhere; }
.rt-board dl.sites dd { line-height: 1.5; padding: 3px 0; }
@media (max-width: 900px) {
  .rt-big { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .rt-src-foot, .rt-index-head { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .rt-index-head > * { grid-column: 1 !important; }
  .rt-index { margin-top: 90px; }
  .rt-sources { padding-bottom: 100px; }
}
@media (max-width: 600px) {
  .rt-board { columns: 2 140px; column-gap: 16px; }
  .rt-board dd { font-size: 11.5px; }
  .rt-rule-card { padding: 20px; }
}

/* 6. Apply: a statement, Downloads as a fine full-bleed field of 273 dots (259 stay, 14 settle into claret as it
   comes into view), the run as a mono ledger, then the three lines and watching */
.rt-apply { padding: 40px 0 150px; }
.rt-apply-head h2 { font-size: clamp(48px, 7vw, 104px); line-height: .98; letter-spacing: -0.05em; max-width: 10em; }
.rt-apply-head h2 em { font-style: normal; color: var(--accent); }
.rt-apply-head .rt-sub { margin-top: 30px; }
.rt-field { margin: 90px 0 0; }
.rt-field-cap { display: flex; gap: 18px; align-items: baseline; font: 500 11.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.rt-field-cap b { font-weight: 500; color: var(--soft); }
.rt-dots { --cols: 91; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); row-gap: 14px; padding: 26px var(--gutter); margin-top: 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rt-dots i, .rt-legend i { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--stay); justify-self: center; }
.rt-dots i.m, .rt-legend i.m { background: var(--accent); }
.rt-legend { display: flex; gap: 22px; margin-top: 14px; font: 12px var(--mono); color: var(--muted); }
.rt-legend span { display: inline-flex; align-items: center; gap: 8px; }
@media (prefers-reduced-motion: no-preference) {
  .js .rt-field .rt-dots i.m { background: var(--stay); }
  .js .rt-field.seen .rt-dots i.m { background: var(--accent); transition: background-color .3s var(--out) calc(.5s + var(--k) * 70ms); }
}
.rt-run-ledger { margin: 64px 0 0; max-width: 860px; }
.rt-run-ledger div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 24px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--line); }
.rt-run-ledger div:last-child { border-bottom: 1px solid var(--line); }
.rt-run-ledger dt { font: 500 11.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.rt-run-ledger dd { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; font: 14px/1.5 var(--mono); color: var(--soft); }
.rt-run-ledger dd b { font: 600 19px/1.3 var(--head); letter-spacing: -0.015em; color: var(--text); }
.rt-apply .rt-rule-row { margin-top: 90px; }

.rt-watch { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: start; margin-top: 130px; padding-top: 40px; border-top: 1px solid var(--line); }
.rt-watch .rt-sub { font-size: 17px; }
.rt-shortcuts { margin: 32px 0 0; }
.rt-shortcuts dt { margin-bottom: 8px; font-size: 11px; }
.rt-shortcuts dd { margin: 0; display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid var(--line); }
.rt-shortcuts b { font-weight: 600; }
.rt-shortcuts span { color: var(--soft); font-size: 15px; }
.rt-menu { padding: 22px 24px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.rt-menu-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.rt-menu-head b { font: 600 19px var(--head); letter-spacing: -0.015em; }
.rt-menu-head span { font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.rt-menu li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); }
.rt-menu li b { font-weight: 600; font-size: 15px; line-height: 1.35; }
.rt-menu .rt-fine { margin-top: 14px; font-size: 13.5px; }
@media (max-width: 1100px) { .rt-dots { --cols: 39; row-gap: 12px; } }
@media (max-width: 900px) {
  .rt-apply { padding-bottom: 100px; }
  .rt-watch { grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 90px; }
}
@media (max-width: 600px) {
  .rt-dots { --cols: 21; row-gap: 11px; }
  .rt-run-ledger div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .rt-field-cap { flex-direction: column; gap: 2px; }
}

/* 8. How it looks: a numbered list beside one framed screen that changes as you scroll (wide screens, with motion).
   Without script, with Reduce Motion, or on a phone, each step simply shows its own screen. */
.rt-looks { padding: 40px 0 120px; }
.rt-looks-in { width: var(--wrap); margin: 0 auto; }
.rt-looks-text h2 { max-width: 10em; }
.rt-looks-steps { margin: 40px 0 0; }
.rt-looks-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; padding: 18px 0; border-top: 1px solid var(--line); }
.rt-looks-steps .n { font: 500 12.5px var(--mono); color: var(--accent); padding-top: 6px; }
.rt-looks-steps h3 { font-size: 22px; }
.rt-looks-steps p { color: var(--soft); font-size: 15px; margin-top: 6px; max-width: 34em; }
.rt-look-pic { grid-column: 1 / -1; margin-top: 16px; }
.rt-looks-pic { display: none; }
.rt-win { position: relative; border-radius: 12px; overflow: hidden; background: var(--panel); box-shadow: 0 0 0 1px var(--line-strong), 0 50px 110px -20px rgba(0, 0, 0, .65); line-height: 0; }
.rt-win img { display: block; width: 100%; height: auto; }
@media (min-width: 901px) {
  .rt-looks-steps li { grid-template-columns: 44px minmax(0, 1fr) minmax(0, 2fr); gap: 0 32px; padding: 26px 0; }
  .rt-looks-steps li > div:not(.rt-look-pic) { grid-column: 2; }
  .rt-look-pic { grid-column: 3; grid-row: 1; margin: 0; }
}
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .js .rt-looks { height: 420vh; padding: 0; }
  .js .rt-looks-in { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; gap: 56px; padding: 84px 0 30px; }
  .js .rt-looks-text { flex: 0 0 34%; }
  .js .rt-looks-text h2 { font-size: clamp(34px, 3.6vw, 50px); }
  .js .rt-looks-text .rt-sub { font-size: 15.5px; margin-top: 16px; }
  .js .rt-looks-steps { margin-top: 26px; }
  .js .rt-looks-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 12px; padding: 12px 0; opacity: .38; transition: opacity .4s var(--out); }
  .js .rt-looks-steps li.on { opacity: 1; }
  .js .rt-looks-steps h3 { font-size: 19px; }
  .js .rt-looks-steps p { font-size: 14px; margin-top: 3px; }
  .js .rt-look-pic { display: none; }
  .js .rt-looks-pic { display: block; flex: 1; }
  .js .rt-looks-pic .rt-win { aspect-ratio: 1.6; }
  .js .rt-looks-pic img { position: absolute; inset: 0; height: 100%; opacity: 0; transition: opacity .4s var(--out); }
  .js .rt-looks-pic img.on { opacity: 1; }
}

/* 9. The film, in its claret frame: the night the rest of the page is built in */
.rt-film { position: relative; padding: 40px 0 150px; }
.rt-film::before { content: ''; position: absolute; inset: 120px 0 40px; background: radial-gradient(60% 55% at 50% 55%, var(--glow), rgba(125, 38, 56, 0) 70%); pointer-events: none; }
.rt-film .rt-wrap { position: relative; }
.rt-film-frame { position: relative; margin-top: 48px; border-radius: 18px; overflow: hidden; background: var(--panel); box-shadow: 0 0 0 1px var(--line-strong), 0 60px 140px -50px #000; }
.rt-film video { display: block; width: 100%; aspect-ratio: 16 / 10; background: var(--panel); }
.rt-film video.tall { aspect-ratio: 9 / 16; }
.rt-film-frame:has(video.tall) { max-width: 420px; margin-inline: auto; }
.rt-play { position: absolute; inset: 0; margin: auto; width: 92px; height: 92px; border-radius: 50%; border: 0; cursor: pointer; color: #fff; background: var(--action); display: grid; place-items: center; box-shadow: 0 18px 50px rgba(0, 0, 0, .5), 0 0 0 10px rgba(178, 74, 96, .2); transition: transform .25s var(--out), background .2s; }
.rt-play:hover { transform: scale(1.05); background: var(--action-hover); }
.rt-play svg { width: 32px; height: 32px; margin-left: 4px; }

/* 10. Private, the price, questions, and the close: the line returns, from Desktop and Downloads to a name and a place */
.rt-private { padding: 40px 0 150px; }
.rt-promises li { font: 600 clamp(40px, 5.8vw, 86px)/1 var(--head); letter-spacing: -0.05em; }
.rt-promises li:last-child { color: var(--accent); }
.js .rt-private .rt-promises li { opacity: 0; transform: translateY(14px); }
.js .rt-private.seen .rt-promises li { animation: rise .8s var(--out) forwards; animation-delay: calc(var(--i) * 240ms); }
.rt-private .rt-sub { margin-top: 40px; }
.rt-price { padding: 20px 0 150px; }
.rt-price h2 { max-width: 13em; }
.rt-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 48px; }
.rt-plan { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 28px 30px; display: flex; flex-direction: column; }
.rt-plan.main { border-color: rgba(230, 138, 152, .5); background: linear-gradient(180deg, rgba(230, 138, 152, .07), rgba(230, 138, 152, 0) 60%), var(--panel); }
.rt-plan.main .rt-caps { color: var(--accent); }
.rt-plan .amount { font: 600 56px/1.05 var(--head); letter-spacing: -0.04em; margin: 12px 0 20px; }
.rt-plan .amount em { font: 500 12.5px var(--mono); color: var(--muted); font-style: normal; margin-left: 10px; letter-spacing: .12em; text-transform: uppercase; }
.rt-plan ul { margin: 0 0 26px; border-top: 1px solid var(--line); }
.rt-plan li { position: relative; padding: 10px 0 10px 22px; font-size: 15.5px; border-bottom: 1px solid var(--line); }
.rt-plan li::before { content: ''; position: absolute; left: 0; top: 50%; width: 10px; height: 1px; background: var(--muted); }
.rt-plan.main li::before { background: var(--blush); }
.rt-plan .rt-btn { margin-top: auto; align-self: flex-start; }
.rt-faq { padding: 20px 0 140px; }
.rt-faq-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.rt-faq-grid > div:first-child { grid-column: 1 / span 4; }
.rt-faq-grid > div:last-child { grid-column: 6 / -1; }
.rt-qs details, .rt-new details { border-top: 1px solid var(--line); padding: 18px 0; }
.rt-qs details:last-child { border-bottom: 1px solid var(--line); }
.rt-qs summary, .rt-new summary { cursor: pointer; font: 600 19px/1.35 var(--head); letter-spacing: -0.015em; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.rt-qs summary::-webkit-details-marker, .rt-new summary::-webkit-details-marker { display: none; }
.rt-qs summary::after { content: '+'; color: var(--muted); font: 400 18px var(--mono); }
.rt-qs details[open] summary::after { content: '−'; }
.rt-qs details p { color: var(--soft); margin-top: 10px; max-width: 40em; }
.rt-new { padding: 0 0 100px; }
.rt-new summary span { font: 12.5px var(--mono); color: var(--muted); }
.rt-new details div { color: var(--soft); margin-top: 8px; }
.rt-end { position: relative; padding: 120px 0 0; overflow: hidden; }
.rt-end::before { content: ''; position: absolute; inset: 0 0 -20%; background: radial-gradient(45% 55% at 50% 45%, var(--glow), rgba(125, 38, 56, 0) 70%); pointer-events: none; }
.rt-end-text { position: relative; text-align: center; }
.rt-end h2 { font-size: clamp(44px, 6.4vw, 92px); max-width: 11em; margin: 0 auto; letter-spacing: -0.05em; }
.rt-end .rt-actions { justify-content: center; }
.rt-return { position: relative; margin: 100px 0 0; padding-bottom: 80px; }
.rt-return-line { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rt-return-line::before { content: ''; position: absolute; left: calc(50% - 50vw); width: 100vw; top: 6px; height: 1px; background: var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.rt-return-line li { position: relative; display: grid; gap: 4px; padding-top: 30px; }
.rt-return-line li::before { content: ''; position: absolute; left: 0; top: 0; width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--blush); background: var(--ground); box-sizing: border-box; z-index: 1; }
.rt-return-line li.here::before { background: var(--blush); width: 15px; height: 15px; top: -1px; }
.rt-return-line li:not(:last-child)::after { content: ''; position: absolute; left: 13px; right: 0; top: 5.5px; height: 2px; background: var(--wire); transform-origin: 0 50%; }
.rt-return-line b { font: 600 22px/1.2 var(--head); letter-spacing: -0.02em; }
.rt-return-line span { font: 12.5px var(--mono); color: var(--muted); }
.rt-return-line li.here { justify-items: start; }
@media (prefers-reduced-motion: no-preference) {
  .js .rt-return .rt-return-line li::after { transform: scaleX(0); }
  .js .rt-return .rt-return-line li.here::before { opacity: 0; transform: scale(.4); }
  .js .rt-return.seen .rt-return-line li::after { transform: none; transition: transform .4s var(--out) calc(.3s + var(--i) * .4s); }
  .js .rt-return.seen .rt-return-line li.here::before { opacity: 1; transform: none; transition: opacity .3s var(--out) 1.1s, transform .3s var(--out) 1.1s; }
}
.rt-doc::before { content: ''; position: absolute; inset: -40px 0 auto; height: 520px; background: radial-gradient(50% 50% at 50% 30%, var(--glow), rgba(125, 38, 56, 0) 70%); pointer-events: none; z-index: -1; }

/* Sections that rise in */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--out), transform .9s var(--out); }
.js [data-reveal].seen { opacity: 1; transform: none; }

@media (max-width: 900px) {
  :root { --gutter: 20px; }
  .rt-top nav { display: none; }
  .rt-top > .rt-btn, .rt-top > a:last-child:not(.rt-mark) { margin-left: auto; }
  .rt-faq-grid { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .rt-faq-grid > div { grid-column: 1 !important; }
  .rt-film { padding: 20px 0 100px; }
  .rt-looks { padding: 20px 0 90px; }
  .rt-private, .rt-price, .rt-faq { padding-bottom: 100px; }
  .rt-end { padding-top: 100px; }
}
@media (max-width: 600px) {
  :root { --gutter: 16px; }
  body { font-size: 16px; }
  .rt-head .rt-reading { white-space: normal; text-align: right; }
  .rt-looks-steps li { grid-template-columns: 34px minmax(0, 1fr); }
  .rt-play { width: 76px; height: 76px; }
  .rt-plans { grid-template-columns: 1fr; }
  .rt-plan { padding: 24px 22px; }
  .rt-end .rt-actions { flex-direction: column; align-items: center; }
  .rt-return-line b { font-size: 17px; }
  .rt-return-line span { font-size: 11.5px; }
  .rt-form .row { flex-direction: column; }
  .rt-form input[type=email] { flex: none; width: 100%; }
  .rt-foot-fine { flex-direction: column; }
}

/* Reduce Motion: every section shows its final state, and changes are instant */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-in], .js [data-reveal], .js .rt-private .rt-promises li { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .rt-btn, .rt-play, .rt-top { transition: none; }
}