/*
 * reels.link homepage.
 *
 * Implements design 3a from the Claude Design project "Reels.link redesign
 * brief" (Reels Link.dc.html): the SaaSland section architecture drawn in the
 * Modernist design system. Gradient bands, hard offset borders, a highlight
 * box in the headline, centered section intros.
 *
 * The design doc is a fixed 1200px canvas with inline styles. Everything here
 * is the same values expressed as classes, plus the breakpoints the canvas
 * could not carry. Tokens come from modernist.css. No hex is hardcoded that
 * the token sheet already names.
 */

/* ─── shell and shared rhythm ─────────────────────────────────────────── */

.rl-shell {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 56px;
    padding-right: 56px;
}

.rl-band {
    padding-top: 80px;
    padding-bottom: 80px;
    border-top: 2px solid var(--color-text);
}

/* The three gradient washes the design uses to separate bands. Each is a
   stack of soft radial blooms over the ground, never a linear ramp. */
.rl-grad-hero {
    background:
        radial-gradient(60% 95% at 10% 18%, var(--color-accent-200) 0, rgba(255, 224, 217, 0) 62%),
        radial-gradient(55% 85% at 84% 8%, var(--color-accent-300) 0, rgba(255, 196, 184, 0) 64%),
        radial-gradient(75% 90% at 46% 105%, var(--color-accent-100) 0, rgba(255, 242, 239, 0) 66%),
        var(--color-bg);
}

.rl-grad-examples {
    background:
        radial-gradient(60% 90% at 88% 12%, var(--color-accent-200) 0, rgba(255, 224, 217, 0) 62%),
        radial-gradient(60% 90% at 8% 90%, var(--color-accent-300) 0, rgba(255, 196, 184, 0) 64%),
        var(--color-bg);
}

.rl-grad-cta {
    background:
        radial-gradient(55% 100% at 20% 10%, var(--color-accent-300) 0, rgba(255, 196, 184, 0) 62%),
        radial-gradient(60% 100% at 82% 90%, var(--color-accent-200) 0, rgba(255, 224, 217, 0) 64%),
        var(--color-accent-100);
}

.rl-grad-panel {
    background:
        radial-gradient(65% 90% at 80% 15%, var(--color-accent-300) 0, rgba(255, 196, 184, 0) 62%),
        radial-gradient(70% 90% at 15% 85%, var(--color-accent-200) 0, rgba(255, 224, 217, 0) 64%),
        var(--color-accent-100);
}

/* Hard offset borders. The system has no radius and no soft shadow here: a
   box is a 2px rule plus a solid ink block behind it. */
.rl-box {
    border: 2px solid var(--color-text);
    background: var(--color-bg);
}

.rl-off-4 { box-shadow: 4px 4px 0 var(--color-text); }
.rl-off-5 { box-shadow: 5px 5px 0 var(--color-text); }
.rl-off-6 { box-shadow: 6px 6px 0 var(--color-text); }
.rl-off-8 { box-shadow: 8px 8px 0 var(--color-text); }
.rl-off-10 { box-shadow: 10px 10px 0 var(--color-text); }

/* Centered section intro. The design system's default is flush left, but
   design 3a centers every band intro, so this is the deliberate exception. */
.rl-intro {
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
}

.rl-intro h2 {
    font-size: 40px;
    line-height: 46px;
    letter-spacing: -0.02em;
    margin: 0;
}

.rl-intro p {
    font-size: 15.5px;
    line-height: 26px;
    color: color-mix(in srgb, var(--color-text) 72%, transparent);
    margin: 20px 0 0;
}

/* The small uppercase underlined link that closes most blocks. */
.rl-more {
    display: inline-block;
    font-weight: var(--font-heading-weight);
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-accent-700);
    text-decoration: underline;
    text-underline-offset: 5px;
    margin-top: 20px;
}

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

/* Tabular figures for every timecode and percentage. */
.rl-num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* Labels that exist for screen readers only. */
.rl-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ─── nav ─────────────────────────────────────────────────────────────── */

.rl-nav {
    border-bottom: 2px solid var(--color-text);
    background: var(--color-bg);
}

.rl-nav-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 32px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.rl-brand {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 22px;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--color-text);
    text-decoration: none;
}

.rl-nav-links {
    display: flex;
    gap: 28px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
}

.rl-nav-links a {
    color: var(--color-text);
    text-decoration: none;
}

.rl-nav-links a:hover { color: var(--color-accent); }

.rl-nav-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.rl-nav .btn,
.rl-cta-row .btn {
    padding: 9px 18px;
}

/* Every button on this page carries the hard border and offset. */
.rl-btn-hard {
    border: 2px solid var(--color-text);
    box-shadow: 3px 3px 0 var(--color-text);
}

.btn-secondary.rl-btn-hard { background: var(--color-bg); }
.btn-secondary.rl-tint { background: var(--color-accent-300); }

/* ─── hero ────────────────────────────────────────────────────────────── */

.rl-hero { padding: 76px 0 72px; }

.rl-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: 56px;
    align-items: start;
}

.rl-hero h1 {
    font-size: 58px;
    line-height: 64px;
    letter-spacing: -0.025em;
    margin: 0;
}

/* Direct children only: the highlight box nested inside stays inline. */
.rl-hero h1 > span { display: block; }

/* The one highlight box in the headline. */
.rl-mark {
    display: inline-block;
    background: var(--color-accent-300);
    border: 2px solid var(--color-text);
    padding: 0 12px;
    margin-left: -4px;
}

.rl-lede {
    font-size: 16.5px;
    line-height: 28px;
    color: color-mix(in srgb, var(--color-text) 82%, transparent);
    margin: 28px 0 0;
    max-width: 44ch;
}

.rl-fine {
    font-size: 13px;
    line-height: 22px;
    color: color-mix(in srgb, var(--color-text) 62%, transparent);
    margin: 18px 0 0;
}

/* Paste-a-link row: one field welded to one button inside a single box. */
.rl-paste {
    display: flex;
    margin-top: 32px;
    border: 2px solid var(--color-text);
    box-shadow: 5px 5px 0 var(--color-text);
    max-width: 440px;
    background: var(--color-bg);
}

.rl-paste input {
    flex: 1;
    min-width: 0;
    padding: 14px 16px;
    font-family: var(--font-body);
    font-size: 14.5px;
    line-height: 1.4;
    color: var(--color-text);
    background: transparent;
    border: 0;
    caret-color: var(--color-accent);
}

.rl-paste input::placeholder { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.rl-paste input:focus-visible { outline-offset: -4px; }

.rl-paste .btn {
    border: 0;
    border-left: 2px solid var(--color-text);
    padding: 14px 22px;
    flex: none;
}

/* ─── hero player mock ────────────────────────────────────────────────── */

.rl-mock {
    border: 2px solid var(--color-text);
    box-shadow: 10px 10px 0 var(--color-text);
    background: var(--color-bg);
}

.rl-mock-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 2px solid var(--color-text);
}

.rl-mock-url {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0.04em;
}

.rl-mock-meta {
    font-size: 12px;
    line-height: 1;
    color: color-mix(in srgb, var(--color-text) 60%, transparent);
    white-space: nowrap;
}

.rl-mock-stage {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--color-text);
    overflow: hidden;
}

.rl-mock-play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.rl-mock-play::before {
    content: '';
    width: 0;
    height: 0;
    border-left: 30px solid var(--color-bg);
    border-top: 19px solid transparent;
    border-bottom: 19px solid transparent;
}

.rl-mock-hud {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 16px 18px;
    background: linear-gradient(to top, rgba(32, 30, 29, 0.9), transparent);
}

/* Scrub bar split into the reel's chapters, first one played. */
.rl-mock-track {
    display: flex;
    height: 8px;
    gap: 2px;
    margin-bottom: 10px;
}

.rl-mock-track span { background: rgba(243, 242, 242, 0.4); }
.rl-mock-track span:first-child { background: var(--color-accent); }

.rl-mock-times {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.06em;
    color: var(--color-bg);
}

/* Auto columns rather than a fixed five, so a featured reel with four
   chapters divides the rail evenly instead of leaving a gap. */
.rl-mock-chapters {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    border-top: 2px solid var(--color-text);
}

/* Two shapes of cell live in this rail. The drawn fallback puts plain divs
   straight in it; the live player puts buttons inside .rl-chapter-track so the
   whole set can slide. Both need the same look, and the fallback rules must
   not reach the track itself, or the track picks up the "current chapter"
   fill and paints a band behind everything. */
.rl-mock-chapters > div:not(.rl-chapter-track) { padding: 12px; }

.rl-mock-chapters > div:not(.rl-chapter-track) + div:not(.rl-chapter-track) {
    border-left: 1px solid color-mix(in srgb, var(--color-text) 25%, transparent);
}

.rl-mock-chapters > div:not(.rl-chapter-track):first-child { background: var(--color-accent-300); }

.rl-chapter-track > button {
    display: block;
    text-align: left;
    padding: 12px;
    font: inherit;
    color: inherit;
    background: var(--color-bg);
    border: 0;
    border-left: 1px solid color-mix(in srgb, var(--color-text) 25%, transparent);
    cursor: pointer;
    transition: background 90ms linear;
}

.rl-chapter-track > button:first-child { border-left: 0; }
.rl-chapter-track > button:hover { background: var(--color-accent-200); }
.rl-chapter-track > button.is-active { background: var(--color-accent-300); }
.rl-chapter-track > button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }

.rl-chapter-track > button .rl-mock-in,
.rl-chapter-track > button .rl-mock-role { display: block; }

/* ─── the live hero player ────────────────────────────────────────────── */

/* How many chapter cells fit. JS reads this back so the slide arithmetic and
   the breakpoints can never disagree. */
.rl-demo { --rl-window: 5; }

.rl-demo-slot { min-width: 0; }

/* The stage holds four layers: the YouTube iframe, the poster facade over it,
   a transparent click surface that stands in for the play control YouTube is
   no longer drawing, and the HUD. */
.rl-demo .rl-mock-stage { display: block; }

/* The stage itself is the anchor, because neither SDK leaves our element
   alone: YouTube REPLACES the mount with an iframe of its own, and Vimeo
   appends one. Either way the class and the data attribute are gone, so the
   rule has to match any iframe on the stage. */
.rl-demo-frame,
.rl-mock-stage iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.rl-demo-start {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: var(--color-text);
    cursor: pointer;
    display: grid;
    place-items: center;
    z-index: 3;
}

.rl-demo-start:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -4px; }

.rl-demo-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* YouTube's hqdefault is 4:3 with letterbox bars. Cropping to the 16:9
       stage cuts them off rather than showing black above and below. */
    opacity: 0.72;
}

.rl-demo-start .rl-mock-play { position: relative; }
.rl-demo-start:hover .rl-mock-play::before { border-left-color: var(--color-accent-300); }

.rl-demo.is-loading .rl-demo-start { cursor: progress; }
.rl-demo.is-live .rl-demo-start { display: none; }

/* Sits over the iframe once live, so a click on the picture plays or pauses.
   Without controls there is nothing else to click. */
.rl-demo-surface {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 62px;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: none;
    z-index: 2;
}

.rl-demo.is-live .rl-demo-surface { display: block; }
.rl-demo-surface:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -4px; }

/* The HUD stays for the whole life of the player now, because YouTube is not
   drawing a bar of its own to collide with. */
.rl-demo .rl-mock-hud { z-index: 4; pointer-events: none; }
.rl-demo .rl-mock-track { pointer-events: auto; }

/* Scrub segments are real buttons: one per chapter, click to seek. */
.rl-mock-track button {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: block;
    min-width: 3px;
}

.rl-mock-track button i {
    display: block;
    height: 8px;
    background: rgba(243, 242, 242, 0.4);
    transition: background 120ms linear;
}

.rl-mock-track button.is-played i { background: var(--color-accent); }
.rl-mock-track button:hover i { background: var(--color-accent-300); }
.rl-mock-track button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Play/pause and maximize, top right of the stage. */
.rl-demo-tools {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 8px;
    z-index: 5;
    opacity: 0;
    transition: opacity 160ms linear;
}

.rl-demo.is-live .rl-demo-tools { opacity: 1; }
.rl-demo.is-max .rl-demo-tools { opacity: 1; }

.rl-demo-tool {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    padding: 0;
    cursor: pointer;
    color: var(--color-bg);
    background: rgba(32, 30, 29, 0.72);
    border: 2px solid var(--color-bg);
    transition: background 120ms linear, color 120ms linear;
}

.rl-demo-tool:hover { background: var(--color-accent); }
.rl-demo-tool:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.rl-demo-tool svg { width: 17px; height: 17px; display: block; }
.rl-demo-tool .rl-i-play,
.rl-demo-tool .rl-i-pause { fill: currentColor; }

/* One icon per state, never both. */
.rl-demo .rl-i-pause,
.rl-demo.is-playing .rl-i-play { display: none; }
.rl-demo.is-playing .rl-i-pause { display: block; }

.rl-demo .rl-i-min,
.rl-demo.is-max .rl-i-max { display: none; }
.rl-demo.is-max .rl-i-min { display: block; }

/* ─── maximize ────────────────────────────────────────────────────────── */

/* Pinned in place rather than moved. Re-parenting an iframe reloads it in
   every browser, which would restart the reel mid-sentence. */
.rl-demo.is-max {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(92vw, 1040px);
    max-height: 92vh;
    z-index: 1000;
    box-shadow: 14px 14px 0 var(--color-text);
    overflow: auto;
}

.rl-demo-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(32, 30, 29, 0.82);
}

.rl-demo-backdrop[hidden] { display: none; }
body.rl-has-max { overflow: hidden; }

/* ─── the sliding chapter rail ────────────────────────────────────────── */

/* Every chapter is in the DOM. The rail is the window onto them.
   Keyed off the data attribute, not an id: there are three players on the
   page now and an id cannot repeat. When this was #rl-demo-rail the two
   example cards had no clipping at all and the page overflowed by 3272px. */
[data-rl-rail] {
    display: block;
    overflow: hidden;
}

.rl-chapter-track {
    display: flex;
    transition: transform 320ms cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}

.rl-chapter-track > button {
    flex: 0 0 calc(100% / var(--rl-window));
    min-width: 0;
}

.rl-mock-track span { transition: background 120ms linear; }
.rl-mock-track span.is-played { background: var(--color-accent); }

.rl-demo-dur { display: inline; }

.rl-mock-in {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 11px;
    line-height: 1;
    margin-bottom: 8px;
}

.rl-mock-role {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 12px;
    line-height: 1.35;
}

/* ─── triptych ────────────────────────────────────────────────────────── */

.rl-triptych {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 56px;
}

.rl-triptych > div {
    padding: 0 40px;
    text-align: center;
}

.rl-triptych > div + div { border-left: 1px solid color-mix(in srgb, var(--color-text) 30%, transparent); }

.rl-glyph {
    width: 56px;
    height: 56px;
    border: 2px solid var(--color-text);
    box-shadow: 4px 4px 0 var(--color-text);
    background: var(--color-accent-200);
    margin: 0 auto 24px;
    display: grid;
    place-items: center;
}

.rl-glyph::before {
    content: '';
    width: 16px;
    height: 16px;
    background: var(--color-accent);
}

.rl-triptych h3 {
    font-size: 19px;
    line-height: 26px;
    margin: 0;
}

.rl-triptych p {
    font-size: 14.5px;
    line-height: 25px;
    color: color-mix(in srgb, var(--color-text) 75%, transparent);
    margin: 12px 0 0;
}

/* ─── split statement ─────────────────────────────────────────────────── */

.rl-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    border-top: 2px solid var(--color-text);
}

/* The two halves are full bleed, but their copy still has to line up with
   .rl-shell once the viewport is wider than the 1200px the design was drawn
   at. Same centering maths, applied as padding. */
.rl-split-say {
    padding: 72px 56px;
    padding-left: max(56px, calc((100vw - 1200px) / 2 + 56px));
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.rl-split-say h2 {
    font-size: 40px;
    line-height: 48px;
    letter-spacing: -0.02em;
    margin: 0;
    max-width: 22ch;
}

.rl-split-show { border-left: 2px solid var(--color-text); }

.rl-badges {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 380px;
    margin: 0 auto;
}

.rl-badge {
    aspect-ratio: 1;
    background: var(--color-bg);
    border: 2px solid var(--color-text);
    box-shadow: 5px 5px 0 var(--color-text);
    display: grid;
    place-items: center;
    text-align: center;
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 11px;
    line-height: 1.3;
    padding: 6px;
}

.rl-badge-lg { font-size: 12px; line-height: 1; }
.rl-badge-on { background: var(--color-accent); color: var(--color-bg); }

.rl-split-foot {
    border-top: 2px solid var(--color-text);
    padding: 24px 56px;
    padding-right: max(56px, calc((100vw - 1200px) / 2 + 56px));
    display: flex;
    align-items: center;
    gap: 20px;
}

.rl-chips { display: flex; flex: none; }

.rl-chips span {
    width: 34px;
    height: 34px;
    border: 2px solid var(--color-text);
}

.rl-chips span + span { margin-left: -8px; }
.rl-chips span:nth-child(1) { background: var(--color-accent-300); }
.rl-chips span:nth-child(2) { background: var(--color-accent-200); }
.rl-chips span:nth-child(3) { background: var(--color-accent); }

.rl-split-foot strong {
    display: block;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.4;
}

.rl-split-foot .rl-more { margin-top: 2px; }

/* ─── alternating feature rows ────────────────────────────────────────── */

.rl-feature {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 72px;
    align-items: center;
}

.rl-feature + .rl-feature { margin-top: 88px; }

.rl-feature h2 {
    font-size: 36px;
    line-height: 42px;
    letter-spacing: -0.02em;
    margin: 0;
}

.rl-feature p {
    font-size: 15.5px;
    line-height: 27px;
    color: color-mix(in srgb, var(--color-text) 78%, transparent);
    margin: 20px 0 0;
    max-width: 46ch;
}

.rl-feature p + p { margin-top: 14px; }

/* The dark editor mock. */
.rl-editor {
    border: 2px solid var(--color-text);
    box-shadow: 10px 10px 0 var(--color-text);
    background: var(--color-text);
    padding: 20px;
    display: grid;
    gap: 12px;
}

.rl-editor-label {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(243, 242, 242, 0.6);
}

.rl-editor-url {
    background: var(--color-bg);
    padding: 13px 15px;
    font-size: 14px;
    line-height: 1.4;
    color: color-mix(in srgb, var(--color-text) 75%, transparent);
    border: 2px solid var(--color-bg);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rl-editor .btn-primary {
    border: 2px solid var(--color-bg);
    box-shadow: 4px 4px 0 var(--color-bg);
}

.rl-editor-split { height: 2px; background: rgba(243, 242, 242, 0.3); margin: 6px 0; }

.rl-editor-head,
.rl-editor-row {
    display: grid;
    grid-template-columns: 60px 1fr 76px;
    gap: 12px;
}

.rl-editor-head {
    padding: 8px 2px;
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(243, 242, 242, 0.6);
}

.rl-editor-row {
    padding: 11px 2px;
    background: rgba(243, 242, 242, 0.1);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 13px;
    line-height: 1.3;
    color: var(--color-bg);
}

.rl-editor-row em { font-style: normal; color: rgba(243, 242, 242, 0.6); }

.rl-editor-add {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 2px;
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-accent-400);
}

.rl-editor-add::before {
    content: '';
    width: 10px;
    height: 10px;
    background: var(--color-accent);
}

/* The stats sketch. */
.rl-stats {
    border: 2px solid var(--color-text);
    box-shadow: 10px 10px 0 var(--color-text);
    background: var(--color-bg);
    padding: 28px;
}

.rl-stats-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
    border-bottom: 2px solid var(--color-text);
    padding-bottom: 12px;
}

.rl-stats-head strong {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.rl-stats-head span {
    font-size: 12px;
    line-height: 1;
    color: color-mix(in srgb, var(--color-text) 60%, transparent);
    white-space: nowrap;
}

.rl-note {
    font-size: 12px;
    line-height: 1.5;
    color: color-mix(in srgb, var(--color-text) 55%, transparent);
    margin-top: 20px;
}

/* The credit block that swaps under the player as the reel moves. Same
   fields template01 renders on a live reel page. */
.rl-credit {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.rl-credit-art {
    aspect-ratio: 2 / 3;
    border: 2px solid var(--color-text);
    background:
        linear-gradient(160deg, var(--color-accent-300) 0, var(--color-accent-100) 55%, var(--color-bg) 100%);
}

.rl-credit strong {
    display: block;
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 18px;
    line-height: 1.25;
}

.rl-credit p {
    font-size: 13.5px;
    line-height: 22px;
    color: color-mix(in srgb, var(--color-text) 72%, transparent);
    margin: 8px 0 0;
}

/* ─── examples ────────────────────────────────────────────────────────── */

.rl-examples {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 44px;
    margin-top: 56px;
}





/* Each example is drawn from that reel's real chapter list rather than
   screenshotted, so it cannot go stale against a player state or a cookie
   banner. Swap in an <img> here the day there is a screenshot worth using. */





















.rl-example-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    margin-top: 26px;
}

.rl-example-meta strong {
    display: block;
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 20px;
    line-height: 1.2;
}

.rl-example-meta p {
    font-size: 13.5px;
    line-height: 22px;
    color: color-mix(in srgb, var(--color-text) 68%, transparent);
    margin: 4px 0 0;
}

.rl-example-meta .rl-more { margin-top: 0; white-space: nowrap; }

/* ─── steps ───────────────────────────────────────────────────────────── */

.rl-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 56px;
}

.rl-step {
    border: 2px solid var(--color-text);
    box-shadow: 8px 8px 0 var(--color-text);
    background: var(--color-bg);
    padding: 32px;
}

.rl-step:nth-child(2) { background: var(--color-accent-100); }

.rl-step-n {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 15px;
    line-height: 1;
    background: var(--color-accent);
    color: var(--color-bg);
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 2px solid var(--color-text);
    margin-bottom: 24px;
}

.rl-step h3 {
    font-size: 21px;
    line-height: 28px;
    margin: 0;
}

.rl-step p {
    font-size: 14.5px;
    line-height: 25px;
    color: color-mix(in srgb, var(--color-text) 76%, transparent);
    margin: 10px 0 0;
}

/* ─── pricing ─────────────────────────────────────────────────────────── */

.rl-plans {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin: 56px auto 0;
    max-width: 900px;
}

.rl-plan {
    border: 2px solid var(--color-text);
    box-shadow: 10px 10px 0 var(--color-text);
    background: var(--color-bg);
    padding: 40px;
}

.rl-plan-included { background: var(--color-accent-200); }

.rl-price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.rl-price b {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 60px;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--color-accent);
}

.rl-plan-included .rl-price b { color: var(--color-text); }

.rl-price span {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

.rl-plan h3 {
    font-size: 21px;
    line-height: 28px;
    margin: 26px 0 0;
}

.rl-plan > p {
    font-size: 14.5px;
    line-height: 25px;
    color: color-mix(in srgb, var(--color-text) 76%, transparent);
    margin: 8px 0 0;
}

.rl-ticks {
    display: grid;
    gap: 10px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}

.rl-ticks li {
    display: grid;
    grid-template-columns: 14px 1fr;
    gap: 12px;
    align-items: start;
    font-size: 14px;
    line-height: 22px;
}

.rl-ticks li::before {
    content: '';
    width: 10px;
    height: 10px;
    background: var(--color-accent);
    margin-top: 6px;
}

.rl-plan-included .rl-ticks li::before { background: var(--color-text); }

.rl-plan .btn { margin-top: 30px; border: 2px solid var(--color-text); box-shadow: 4px 4px 0 var(--color-text); }
.rl-plan .btn-secondary { background: var(--color-bg); }

/* ─── faq and tools ───────────────────────────────────────────────────── */

.rl-faq {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    max-width: 1000px;
    margin: 48px auto 0;
}

.rl-faq div {
    border: 2px solid var(--color-text);
    box-shadow: 6px 6px 0 var(--color-text);
    background: var(--color-bg);
    padding: 28px;
}

.rl-faq h3 { font-size: 17px; line-height: 25px; margin: 0; }

.rl-faq p {
    font-size: 14.5px;
    line-height: 25px;
    color: color-mix(in srgb, var(--color-text) 76%, transparent);
    margin: 8px 0 0;
}

.rl-tools {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    margin-top: 48px;
}

.rl-tool {
    border: 2px solid var(--color-text);
    box-shadow: 6px 6px 0 var(--color-text);
    background: var(--color-bg);
    padding: 28px;
    color: var(--color-text);
    text-decoration: none;
    display: block;
}

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

.rl-tool-host {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent-700);
    margin-bottom: 16px;
}

.rl-tool h3 { font-size: 18px; line-height: 25px; margin: 0; }

.rl-tool p {
    font-size: 13.5px;
    line-height: 23px;
    color: color-mix(in srgb, var(--color-text) 75%, transparent);
    margin: 8px 0 0;
}

/* ─── closing call to action ──────────────────────────────────────────── */

.rl-cta { padding: 88px 0; text-align: center; }

.rl-cta h2 {
    font-size: 48px;
    line-height: 54px;
    letter-spacing: -0.025em;
    margin: 0 auto;
    max-width: 22ch;
}

.rl-cta p {
    font-size: 16px;
    line-height: 27px;
    color: color-mix(in srgb, var(--color-text) 78%, transparent);
    margin: 24px auto 0;
    max-width: 46ch;
}

.rl-cta-row {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 36px;
}

.rl-cta-row .btn { padding: 14px 26px; box-shadow: 5px 5px 0 var(--color-text); }

/* ─── footer ──────────────────────────────────────────────────────────── */

.rl-footer {
    padding: 64px 0 36px;
    border-top: 2px solid var(--color-text);
    background: var(--color-bg);
}

.rl-footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr));
    gap: 48px;
}

.rl-footer-brand {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 22px;
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: 18px;
}

.rl-footer-grid > div > p {
    font-size: 14px;
    line-height: 24px;
    color: color-mix(in srgb, var(--color-text) 70%, transparent);
    margin: 0;
    max-width: 34ch;
}

.rl-footer h2 {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 55%, transparent);
    margin: 0 0 16px;
}

.rl-footer-links {
    display: grid;
    gap: 10px;
    font-size: 14px;
    line-height: 1.4;
}

.rl-footer-links a { color: var(--color-text); text-decoration: none; }
.rl-footer-links a:hover { color: var(--color-accent); text-decoration: underline; text-underline-offset: 4px; }

.rl-colophon {
    border-top: 2px solid var(--color-text);
    margin-top: 48px;
    padding-top: 20px;
    font-size: 13px;
    line-height: 1.5;
    color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

.rl-colophon a { color: inherit; }

/* ─── the example players ─────────────────────────────────────────────── */

/* Same component as the hero, one size down: fewer chapter cells fit, and the
   offset shadow scales with the card so it does not overpower it. */
.rl-demo-sm { --rl-window: 3; }
.rl-demo-sm { box-shadow: 8px 8px 0 var(--color-text); }
.rl-demo-sm .rl-mock-bar { padding: 10px 13px; }
.rl-demo-sm .rl-mock-url { font-size: 12px; }
.rl-demo-sm .rl-mock-meta { font-size: 11px; }
.rl-demo-sm .rl-chapter-track > button { padding: 10px; }
.rl-demo-sm .rl-mock-in { font-size: 10px; margin-bottom: 6px; }
.rl-demo-sm .rl-mock-role { font-size: 11px; }
.rl-demo-sm .rl-mock-times { font-size: 11px; }

/* The examples grid holds player cards now, not fixed-ratio poster boxes. */
.rl-examples > div { min-width: 0; }

/* ═══ hover ═══════════════════════════════════════════════════════════════
   Every hard offset shadow moves on hover, which is the whole character of
   this style. Two directions, and the difference carries meaning:

     - anything you can click PRESSES. It slides down-right by exactly its own
       offset and the shadow collapses to nothing, so the element lands where
       its shadow was. Nothing moves on the page around it, because the travel
       and the shadow cancel out.
     - a card you cannot click LIFTS instead. It rises up-left and the shadow
       grows to meet it. Same vocabulary, opposite sign, and it never invites a
       click that does nothing.

   Timing matches the reference: a fifth of a second, no bounce.
   ═════════════════════════════════════════════════════════════════════ */

.rl-btn-hard,
.rl-plan .btn,
.rl-paste,
.rl-tool,
.rl-demo-tool,
.rl-step,
.rl-plan,
.rl-faq div,
.rl-panel,
.rl-glyph,
.rl-badge,
.rl-stats {
    transition: transform 200ms ease, box-shadow 200ms ease, background-color 120ms linear;
}

/* Deliberately NOT in that list, and with no hover of their own: the hero
   player, the two example players, and the chapter editor beside "Paste a
   link, mark the scenes". Those four read as screens rather than as controls,
   and nudging a screen you are about to press play on is the wrong signal. */

/* --- pressed: links and buttons ------------------------------------- */

.rl-btn-hard:hover,
.rl-btn-hard:focus-visible {
    transform: translate(3px, 3px);
    box-shadow: 0 0 0 var(--color-text);
}

.rl-plan .btn:hover,
.rl-plan .btn:focus-visible {
    transform: translate(4px, 4px);
    box-shadow: 0 0 0 var(--color-text);
}

.rl-cta-row .btn:hover,
.rl-cta-row .btn:focus-visible {
    transform: translate(5px, 5px);
    box-shadow: 0 0 0 var(--color-text);
}

.rl-tool:hover {
    transform: translate(6px, 6px);
    box-shadow: 0 0 0 var(--color-text);
}

/* The paste row presses as one piece, field and button together. */
.rl-paste:focus-within,
.rl-paste:hover {
    transform: translate(5px, 5px);
    box-shadow: 0 0 0 var(--color-text);
}

/* --- lifted: cards that are not links -------------------------------- */

.rl-step:hover {
    transform: translate(-3px, -3px);
    box-shadow: 11px 11px 0 var(--color-text);
}

.rl-plan:hover {
    transform: translate(-3px, -3px);
    box-shadow: 13px 13px 0 var(--color-text);
}

.rl-faq div:hover {
    transform: translate(-3px, -3px);
    box-shadow: 9px 9px 0 var(--color-text);
}

.rl-panel:hover {
    transform: translate(-3px, -3px);
    box-shadow: 13px 13px 0 var(--color-text);
}

.rl-stats:hover {
    transform: translate(-3px, -3px);
    box-shadow: 13px 13px 0 var(--color-text);
}

/* The three feature glyphs and the capability badges are small, so they move
   less or the motion reads as a jump. */
.rl-triptych > div:hover .rl-glyph {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--color-text);
}

.rl-badge:hover {
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 var(--color-text);
}

/* Nobody asked for motion they cannot turn off. */
@media (prefers-reduced-motion: reduce) {
    .rl-btn-hard,
    .rl-plan .btn,
    .rl-paste,
    .rl-tool,
    .rl-demo-tool,
    .rl-step,
    .rl-plan,
    .rl-faq div,
    .rl-panel,
    .rl-glyph,
    .rl-badge,
    .rl-stats,
    .rl-chapter-track {
        transition: none !important;
    }

    .rl-btn-hard:hover, .rl-plan .btn:hover, .rl-cta-row .btn:hover,
    .rl-tool:hover, .rl-paste:hover, .rl-step:hover, .rl-plan:hover,
    .rl-faq div:hover, .rl-panel:hover, .rl-stats:hover, .rl-badge:hover,
    .rl-triptych > div:hover .rl-glyph {
        transform: none;
    }
}

/* ═══ breakpoints ═════════════════════════════════════════════════════════
   The design doc is a fixed 1200px canvas. Everything below is the part it
   could not express.
   ═════════════════════════════════════════════════════════════════════ */

@media (max-width: 1080px) {
    .rl-shell { padding-left: 36px; padding-right: 36px; }
    .rl-band { padding-top: 64px; padding-bottom: 64px; }
    .rl-hero { padding: 56px 0; }
    .rl-hero-grid { gap: 40px; }
    .rl-hero h1 { font-size: 46px; line-height: 52px; }
    .rl-intro h2, .rl-split-say h2 { font-size: 34px; line-height: 40px; }
    .rl-cta h2 { font-size: 38px; line-height: 44px; }
    .rl-feature { gap: 48px; }
    .rl-feature h2 { font-size: 30px; line-height: 36px; }
    .rl-split-say { padding: 56px 36px; }
    .rl-split-foot { padding: 24px 36px; }
    .rl-triptych > div { padding: 0 24px; }
    .rl-tools { grid-template-columns: repeat(2, 1fr); }
    .rl-demo { --rl-window: 3; }
    .rl-mock-chapters > div:nth-child(n + 4) { display: none; }
}

@media (max-width: 860px) {
    .rl-nav-inner { grid-template-columns: auto 1fr; row-gap: 16px; }
    .rl-nav-links { grid-column: 1 / -1; order: 3; flex-wrap: wrap; gap: 20px; }
    .rl-nav-actions { order: 2; }

    .rl-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
    .rl-triptych { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .rl-triptych > div { padding: 0; }
    .rl-triptych > div + div {
        border-left: 0;
        border-top: 1px solid color-mix(in srgb, var(--color-text) 30%, transparent);
        padding-top: 40px;
    }

    .rl-split { grid-template-columns: minmax(0, 1fr); }
    .rl-split-show { border-left: 0; border-top: 2px solid var(--color-text); }

    /* Flip the second feature row so the mock always follows its copy. */
    .rl-feature { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .rl-feature-flip > div:first-child { order: 2; }
    .rl-feature p { max-width: none; }

    .rl-examples { grid-template-columns: minmax(0, 1fr); gap: 48px; }
    .rl-steps { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .rl-plans { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .rl-faq { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .rl-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
}

@media (max-width: 560px) {
    .rl-shell { padding-left: 20px; padding-right: 20px; }
    .rl-band { padding-top: 48px; padding-bottom: 48px; }
    .rl-hero { padding: 40px 0 48px; }
    .rl-hero h1 { font-size: 34px; line-height: 40px; }
    .rl-mark { padding: 0 8px; }
    .rl-lede { font-size: 15.5px; line-height: 26px; }
    .rl-intro h2, .rl-split-say h2 { font-size: 27px; line-height: 33px; }
    .rl-cta { padding: 56px 0; }
    .rl-cta h2 { font-size: 29px; line-height: 35px; }
    .rl-feature h2 { font-size: 25px; line-height: 31px; }

    .rl-paste { flex-direction: column; }
    .rl-paste .btn { border-left: 0; border-top: 2px solid var(--color-text); }

    .rl-demo { --rl-window: 2; }
    .rl-mock-chapters > div:nth-child(n + 3) { display: none; }
    .rl-mock-bar { flex-direction: column; align-items: flex-start; gap: 6px; }

    .rl-split-say { padding: 40px 20px; }
    .rl-split-foot { padding: 20px; flex-wrap: wrap; }
    .rl-grad-panel { padding: 32px 20px !important; }

    .rl-badges { gap: 12px; }
    .rl-badge { font-size: 9.5px; box-shadow: 3px 3px 0 var(--color-text); }
    .rl-badge-lg { font-size: 10px; }

    .rl-editor { padding: 14px; }
    .rl-editor-head, .rl-editor-row { grid-template-columns: 48px 1fr 52px; gap: 8px; font-size: 12px; }
    .rl-stats { padding: 20px; }
    .rl-stats-head { flex-direction: column; align-items: flex-start; gap: 4px; }
    .rl-credit { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; }

    
    

    .rl-step, .rl-plan, .rl-faq div, .rl-tool { padding: 24px; }
    .rl-price b { font-size: 46px; }
    .rl-tools { grid-template-columns: minmax(0, 1fr); }

    .rl-example-meta { flex-direction: column; gap: 10px; }
    .rl-example-meta .rl-more { margin-top: 4px; }

    .rl-footer-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }

    /* Offsets that big look broken on a narrow screen. */
    .rl-off-10, .rl-mock, .rl-editor, .rl-stats, .rl-plan, 
}

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}