/*
 * RAVL 2026 — the home page, and only the home page. PR26-744.
 *
 * The shared layer — tokens, type, buttons, cards, icons, the band shell, the nav and the footer —
 * moved to `ravl-2026.css` under PR26-743 so the other nine page epics could use it. This file now
 * holds the six compositions that exist once, on this page: the hero, the how-it-works bleed, the
 * flow strip, the safety grid, the members band and the closing band.
 *
 * LOAD ORDER IS LOAD-BEARING. `views/layouts/home-2026.hbs` links `ravl-2026.css` first and this
 * file second. Several rules below are overrides of a foundation rule at equal specificity — the
 * artwork aspect-ratios at 767 — and they only win because they come after. Do not reorder the
 * two links.
 *
 * The closing band moved OUT of this file to `ravl-2026.css` under PR26-787, when
 * /how-it-works became a second caller. It was never home page furniture; it only looked like it
 * while there was one page.
 */

/* Artwork wells, home page sizes. The shell — `.rv-art` and its 4096x2304 box — is in
   `ravl-2026.css`; these three are how wide each render is drawn on this page. */
.rv-art--problem  { max-width: 1217px; margin-top: 40px; }
.rv-art--safety   { max-width: 1066px; margin-top: 24px; }
.rv-art--members  { max-width: 1400px; margin-top: 44px; }

/* ============================================================ 01 HERO
   White full-bleed with the artwork FLOATING in it, object right of centre and type left. The
   image bleeds off the right edge, which is why the section clips.

   `min-height` rather than `height: 100vh`: on a phone the dynamic toolbar makes 100vh a moving
   target, and a hero that resizes as the address bar retracts is worse than one an inch too
   tall. */
.rv-hero {
    position: relative;
    background: var(--page);
    overflow: hidden;
}

/* The composition is drawn at exactly 1440 and placed absolutely, so it needs a 1440-wide box to
   be absolute against. Against the viewport, an 1800px monitor pulls the type column away from the
   artwork and pushes the ghost word off the side. The stage caps and centres the composition; the
   white ground still runs edge to edge, which is the part that is meant to be full-bleed. */
.rv-hero__stage {
    position: relative;
    width: 100%;
    max-width: 1440px;
    min-height: 900px;
    margin-inline: auto;
}

/* ANCHORED LEFT, BEHIND THE HEADLINE — not right, behind the artwork.

   The mockup places this at `right:-40px; top:196px` in a 1440 stage, with the render at
   `left:406px`. Measured in the browser, that leaves exactly 22px of the word showing: the render
   is opaque white and eats the other 1074px. PR26-760 states the rule that catches this — "it goes
   behind the headline row, not behind the image — the renders are opaque white and swallow
   anything under them" — so the mockup contradicts its own ticket here, and the ticket wins.

   Anchored to the left margin the word runs behind the headline and slides under the render on the
   right, which is the same relationship JOIN has with the closing band's headline. `top` centres
   it on the headline row rather than sitting above it, which is where the removal of the chapter
   marker would otherwise have left it — a stray mint fragment in empty space. */
.rv-hero__ghost {
    left: 24px;
    top: 258px;
    font-size: 250px;
    color: var(--ghost);
    z-index: 1;
}

.rv-hero__art { position: absolute; left: 406px; top: 104px; width: 1263px; z-index: 2; }
.rv-hero__art img { display: block; width: 100%; height: auto; aspect-ratio: 4096 / 2304; }

/* 275, not the design's 228. The composition places the type column against the artwork, and the
   228 figure measured to the top of the chapter marker — 13px of 11px caps plus a 34px gap above
   the headline. With the marker gone, holding 228 would pull the headline 47px up the render and
   break the alignment the mockup was drawn to. 275 puts the headline exactly where it was. */
.rv-hero__col {
    position: absolute;
    left: var(--margin);
    top: 275px;
    width: 530px;
    z-index: 3;
}

.rv-hero__lede { margin: 30px 0 0; max-width: 350px; font-size: 15px; line-height: 1.65; color: var(--body); }
.rv-hero__actions { display: flex; align-items: center; gap: 14px; margin-top: 38px; }

.rv-hero__cue {
    position: absolute;
    left: var(--margin);
    bottom: 52px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.rv-hero__cue-word { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--subtle); }
.rv-hero__cue-rule { width: 44px; height: 1px; background: var(--line); }
/* The cue arrow is the one icon on the page not in a `.rv-icon` well — it sits on the hairline
   rather than in a circle — so it names its own colour. It is `stroke="currentColor"` like every
   other icon (PR26-763); this is what currentColor resolves to. */
.rv-hero__cue-arrow { display: inline-flex; color: var(--accent); }

/* ============================================================ 03 HOW IT WORKS
   The page's only asymmetric section. Artwork left, bleeding 120px past the page margin; three
   equal cards down the right; headline right-justified over the CARD column.

   The bleed is the whole point — it is what stops the page settling into a rhythm of centred
   blocks — so the image is drawn 1000px wide inside a 720px well rather than being sized to fit
   it. The earlier diagonal stagger is dead: equal cards, one axis. */
.rv-how__h { max-width: 900px; margin-left: auto; text-align: right; }
.rv-how__row { display: flex; align-items: center; gap: 40px; margin-top: 52px; }

.rv-how__art { position: relative; width: 720px; flex: 0 0 720px; aspect-ratio: 720 / 563; }
.rv-how__art img {
    position: absolute;
    left: -120px;
    top: 0;
    width: 1000px;
    max-width: none;
    height: auto;
    aspect-ratio: 4096 / 2304;
}

/* The card column MUST sit above the artwork. The image is drawn 1000px wide inside a 720px well,
   so about 120px of it — opaque white, because that is the render's ground — overhangs the gap
   and lands on top of the cards. Without this the left third of all three cards is painted over
   and the section looks broken at every width above 1100. */
.rv-how__cards {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}


/* ============================================================ FLOW STRIP — PR26-771
   Paper. The page's only tonal break, taken here because this is the only band with no artwork
   in it. Arrows are drawn as ::before pseudo-elements so they are never read out. */
.rv-flow {
    position: relative;
    padding: 64px var(--margin);
    background: var(--paper);
}

.rv-flow::before {
    content: "";
    position: absolute;
    left: var(--margin);
    right: var(--margin);
    top: 0;
    height: 1px;
    background: var(--line);
}

.rv-flow__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* --subtle is 4.49:1 on --paper, which fails AA by two hundredths. The tint-safe grey is the same
   colour four steps down and clears it. */
.rv-flow__step {
    display: flex;
    align-items: center;
    gap: 22px;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--subtle-on-tint);
}

.rv-flow__step + .rv-flow__step::before {
    content: "\2192";
    font-size: 15px;
    letter-spacing: 0;
    color: var(--accent);
}

/* The last step is ink and 600 so the line resolves rather than trailing off. */
.rv-flow__step--last { font-weight: 600; color: var(--ink); }

/* ============================================================ 04 FEELING COMFORTABLE
   Four columns, each a 44px circle icon above a title and body. The circle is a hairline border
   on the page ground with an action-blue 1.5px stroke inside it — NOT a filled badge, and never a
   shield and tick (PR26-763). */
.rv-safety__lede { margin-top: 28px; max-width: 560px; }


.rv-safety__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.rv-safety__item { text-align: left; }
.rv-safety__title { margin: 20px 0 0; font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.rv-safety__body { margin: 10px 0 0; font-size: 13px; line-height: 1.65; color: var(--body); }

/* ============================================================ 05 MEMBERS */
.rv-members__copy { max-width: 820px; margin: 0 auto; }
.rv-members__copy .rv-body + .rv-body { margin-top: 22px; }

.rv-members__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin: 56px 0 0;
    padding: 0;
    list-style: none;
}

/* ============================================================================================
   BREAKPOINTS — PR26-764, the home page's half

   The shared steps are in `ravl-2026.css` at the same four widths. Two sections need a real
   treatment rather than a stack, and both are handled below: section 03's bleeding image, and
   section 04's four-column grid.
   ============================================================================================ */

@media (max-width: 1439px) {

    .rv-hero__stage { min-height: 820px; }
    .rv-hero__art { left: 34%; width: 74%; }
    .rv-hero__col { width: min(46%, 530px); }
    .rv-hero__ghost { font-size: 18vw; }

    /* The bleed scales with the well rather than staying a fixed 120px, so it keeps the same
       proportion of overhang instead of disappearing at 1200 and swallowing the margin at 900. */
    .rv-how__art { width: 52%; flex-basis: 52%; }
    .rv-how__art img { left: -17%; width: 139%; }
}

@media (max-width: 1099px) {
    /* THE HERO STOPS BEING TWO ABSOLUTE COLUMNS. Below this width there is not enough room for
       type beside the artwork without the render's white margin pushing the subject off-screen,
       so it becomes a normal flow: type, then image. */
    .rv-hero__stage {
        display: flex;
        flex-direction: column;
        min-height: 0;
        max-width: none;
        padding: calc(var(--nav-h) + 48px) var(--margin) 64px;
    }

    /* `order` rather than moving the markup: the artwork stays before the headline in the DOM so
       the LCP image is discovered as early as possible, but it reads BELOW the type, which is the
       order the copy is written in — headline, then the picture that illustrates it. */
    .rv-hero__col { order: 1; position: static; width: 100%; max-width: 620px; }
    .rv-hero__lede { max-width: 460px; }

    .rv-hero__art {
        order: 2;
        position: static;
        width: 100%;
        max-width: 760px;
        margin: 40px auto 0;
    }

    /* Still behind the HEADLINE row, never behind the image (PR26-760) — which means it has to
       move up with the type when the two swap places. Below 1100 the hero is normal flow, type
       first and image second, so the ghost goes back to the right edge: there is no artwork
       beside the headline to hide behind. */
    .rv-hero__ghost { top: calc(var(--nav-h) + 64px); bottom: auto; left: auto; right: -4%; font-size: 20vw; }
    .rv-hero__cue { display: none; }

    /* SECTION 03, tablet. The cards go under the image rather than beside it — at this width a
       720px well and a card column both fit only by making the cards too narrow to hold a
       sentence. The bleed survives, and is the thing that keeps the section asymmetric: the image
       still runs past the left page margin. */
    .rv-how__row { flex-direction: column; align-items: stretch; gap: 44px; }
    .rv-how__h { max-width: none; }

    .rv-how__art {
        width: auto;
        flex-basis: auto;
        aspect-ratio: auto;
        margin-left: calc(var(--margin) * -1);
        margin-right: calc(var(--margin) * -0.5);
    }

    .rv-how__art img { position: static; width: 100%; max-width: none; }

    .rv-how__cards { flex-direction: row; gap: 16px; }
    .rv-how__cards .rv-card { flex: 1 1 0; }

    /* SECTION 04, tablet: four columns to two. Three would leave an orphan. */
    .rv-safety__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }

    .rv-members__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

}

@media (max-width: 767px) {
    .rv-flow { padding: 44px var(--margin); }


    /* The ghost words are decoration and must never widen the page. Clipped by the section's
       `overflow: hidden`, and pulled down in size so they stay behind the headline row rather
       than colliding with it. */
    .rv-hero__ghost { font-size: 26vw; top: calc(var(--nav-h) + 44px); }

    .rv-hero__stage { padding-top: calc(var(--nav-h) + 32px); }
    .rv-hero__actions { flex-direction: column; align-items: stretch; gap: 12px; }
    .rv-hero__actions .rv-btn { width: 100%; }

    /* The portrait crops are 4:5, a different composition rather than a smaller one, so the
       aspect-ratio has to change with them or the reserved box is wrong and the page shifts.
       `.rv-art img` is handled by the same rule in `ravl-2026.css`. */
    .rv-hero__art img,
    .rv-how__art img { aspect-ratio: 2400 / 3000; }

    .rv-hero__art { max-width: 460px; margin-top: 32px; }
    .rv-art--problem, .rv-art--safety, .rv-art--members { max-width: 460px; margin-top: 32px; }

    /* SECTION 03, phone. The image goes full-bleed to both screen edges. That is the small-screen
       form of the desktop bleed — the composition is on white and the page is white, so it reads
       as the artwork touching the edges rather than as a photograph in a box. */
    .rv-how__h { text-align: left; }
    .rv-how__row { gap: 32px; }
    .rv-how__art { margin-inline: calc(var(--margin) * -1); max-width: none; }
    .rv-how__art img { margin-inline: auto; max-width: 460px; }
    .rv-how__cards { flex-direction: column; gap: 14px; }

    /* SECTION 04, phone. NOT a four-high stack of blocks — the icon moves beside the text so each
       item is one row, which roughly halves the section's height and keeps the four reading as a
       set rather than as four separate claims. The 44px circle is unchanged, so the target is. */
    .rv-safety__grid { grid-template-columns: 1fr; gap: 28px; }
    .rv-safety__item {
        display: grid;
        grid-template-columns: 44px 1fr;
        column-gap: 16px;
        align-items: start;
    }
    .rv-safety__item .rv-icon { grid-row: 1 / span 2; }
    .rv-safety__title { margin: 10px 0 0; grid-column: 2; }
    .rv-safety__body { grid-column: 2; }

    .rv-members__cards { grid-template-columns: 1fr; gap: 14px; }
    .rv-members__copy .rv-body + .rv-body { margin-top: 18px; }


    /* The flow strip wraps rather than shrinking below 11px. */
    .rv-flow__list { gap: 10px 16px; }
    .rv-flow__step { gap: 16px; font-size: 11px; letter-spacing: 0.18em; }
}

@media (max-width: 419px) {
    .rv-flow__step { font-size: 10.5px; }
}