/*
 * The store is the sign post; the riders bring the color.
 * Navy, teal and mint come from scantoshow.com. Overpass is a descendant of Highway Gothic,
 * the US road-sign face: riders are read from a moving car, so the store speaks in that voice.
 */

@font-face {
    font-family: Overpass;
    src: url("fonts/overpass-latin-wght.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --white: #ffffff;
    --curb: #e9edeb;
    --navy: #0d3b66;
    --frame: #1e2428;
    --navy-deep: #092e52;
    --teal: #2ca9a0;
    --mint: #a6e2d6;
    --steel: #aeb8bf;
    --muted: #4f6274;
    --hairline: #d3dad8;

    --gutter: 32px;
    --pill: 980px;
    /* A rider's hook: down from the rail and through the hole. The curl that catches the rider hangs behind it,
     * so only the wire going in shows, darkening as it passes into the hole. */
    --hook-through: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='30' viewBox='0 0 14 30'%3E%3Cpath d='M10.5 5a3.5 3.5 0 1 0-3.5 3.5V24' fill='none' stroke='%237d8a93' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M7 24V26' fill='none' stroke='%234a565e' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");

    /* Type scale: 14 / 18 / 21 / 24 / 36, display set fluidly up to 72 */
    --t-small: 14px;
    --t-body: 18px;
    --t-lead: 21px;
    --t-h3: 24px;
    --t-h2: 36px;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html, body, h1, h2, h3, p, ol, ul, li, dl, dd, dt {
    margin: 0;
    padding: 0;
}

ol, ul {
    list-style: none;
}

html {
    scroll-padding-top: 88px;
}

body {
    font-family: Overpass, system-ui, sans-serif;
    font-size: var(--t-body);
    line-height: 1.5;
    color: var(--navy);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
}

img {
    display: block;
    max-width: 100%;
}

:focus-visible {
    outline: 3px solid var(--teal);
    outline-offset: 3px;
}

.no-scroll {
    overflow: hidden;
}

/* ---------- header (same shape as scantoshow.com) ---------- */

.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px var(--gutter);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px) saturate(180%);
}

.site-header-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.headline-image {
    width: auto;
    height: 44px;
}

.site-header-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-link {
    padding: 8px 14px;
    font-size: 16px;
    font-weight: 600;
    border-radius: var(--pill);
}

.nav-link:hover {
    background: var(--curb);
}

.cart-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 8px;
    padding: 8px 18px;
    font-size: 16px;
    font-weight: 700;
    border: 2px solid var(--navy);
    border-radius: var(--pill);
}

.cart-button:hover {
    background: var(--curb);
}

.cart-count {
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: var(--pill);
    background: var(--mint);
    font-size: 14px;
    line-height: 25px;
    text-align: center;
}

.cart-count[hidden] {
    display: none;
}

/* ---------- buttons ---------- */

.pill-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 30px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--white);
    background: var(--navy);
    border-radius: var(--pill);
    white-space: nowrap;
    transition: background 0.2s;
}

.pill-button:hover {
    background: var(--navy-deep);
}

.pill-button-quiet {
    color: var(--navy);
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--navy);
}

.pill-button-quiet:hover {
    background: var(--curb);
}

.pill-button-block {
    width: 100%;
}

.add-button {
    padding: 8px 16px;
    font-size: 16px;
    font-weight: 700;
    border-radius: var(--pill);
    box-shadow: inset 0 0 0 2px var(--navy);
    white-space: nowrap;
}

.add-button:hover {
    color: var(--white);
    background: var(--navy);
}

/* ---------- hardware: hooks ---------- */

.hooks {
    position: relative;
    z-index: 1;
    height: 30px;
}

.rider-art {
    position: relative;
    display: block;
}

/* Punched holes show whatever is behind the rider. */
.rider-holes {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.rider-holes circle {
    fill: var(--behind, var(--curb));
    stroke: rgba(9, 46, 82, 0.35);
    stroke-width: 3;
}

/* Hooks run through the two outer top holes, and the weight hangs each hole's top edge on its wire. On a
 * rider that edge is 6.25% of its height down less a 3/16 in radius: 0.83% of its width. Sign panels use
 * the same ⅜ in from the edge, which on a 24 in wide panel lands at the same fraction of its width. */
.hooks::before,
.hooks::after {
    content: "";
    position: absolute;
    top: 0;
    left: calc(100% * 4 / 24 - 7px);
    width: 14px;
    height: 30px;
    background: var(--hook-through) no-repeat 0 0 / 14px 30px;
}

.hooks::after {
    left: calc(100% * 20 / 24 - 7px);
}

.swing > .rider-art {
    margin-top: calc(-5.5px - 0.83%);
}

.rider-art img {
    width: 100%;
    height: auto;
    border-radius: 3px;
    box-shadow: 0 1px 1px rgba(13, 59, 102, 0.12), 0 14px 22px -14px rgba(13, 59, 102, 0.55);
}

/* Riders swing toward and away from you around the hooks, like a sign caught by the wind. */
.swing {
    transform-origin: 50% 0;
}

@keyframes swing-gently {
    0% { transform: perspective(var(--depth, 900px)) rotateX(0); }
    13% { transform: perspective(var(--depth, 900px)) rotateX(24deg); }
    35% { transform: perspective(var(--depth, 900px)) rotateX(-15deg); }
    57% { transform: perspective(var(--depth, 900px)) rotateX(8deg); }
    77% { transform: perspective(var(--depth, 900px)) rotateX(-3deg); }
    100% { transform: perspective(var(--depth, 900px)) rotateX(0); }
}

/* ---------- index: hero ---------- */

/* A photo of riders laid out on the workbench runs edge to edge behind the hero, a little out of focus and
 * lightened so the sign and text sit forward of it. The text gets its own frosted card. */
.hero {
    --hero-photo: url("images/hero/bench-1280.webp?v=2");
    /* The same space above the frame (below the 72px header) as below its leg tips. */
    --hero-space: clamp(48px, 12svh, 136px);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: calc(72px + var(--hero-space)) var(--gutter) 0;
}

.hero::before {
    content: "";
    position: absolute;
    inset: -12px;
    z-index: -1;
    background:
        linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)),
        var(--hero-photo) center / cover no-repeat;
    filter: blur(3px);
}

@media (width > 1280px), (resolution > 1.5x) {
    .hero {
        --hero-photo: url("images/hero/bench.webp?v=2");
    }
}

/* The sign's column is as wide as the frame plus the arrows either side of it (54px each, see .hero-stage),
 * so the text sits right beside it. The text column stops at the lede's width, and the pair is centered. */
.hero-body {
    display: grid;
    grid-template-columns: calc(min(307px, max(200px, (100svh - 290px) / 2.4)) + 2 * 54px) minmax(0, 694px);
    justify-content: center;
    gap: 72px;
    padding-bottom: var(--hero-space);
}

/* Its top lines up with the frame's top. */
.hero-aside {
    align-self: start;
    padding: 28px 32px 32px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(12px);
    box-shadow: 0 18px 40px -24px rgba(13, 59, 102, 0.45);
}

.hero-lede {
    max-width: 30em;
    font-size: var(--t-lead);
    line-height: 1.45;
}

.hero-lede a {
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Margins are set so the gaps you see, ink to ink, come out equal: lede to price, price to buttons. */
.hero-price {
    margin-top: 46px;
    color: var(--muted);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 52px;
}

/* The arrows flank the top opening, level with the rider sliding through it. The stage keeps room for them
 * on both sides of the frame, so they never cover it. */
.hero-stage {
    --arrow: 40px;
    --arrow-gap: 14px;
    --arrow-room: calc(var(--arrow) + var(--arrow-gap));
    container-type: inline-size;
    padding-inline: var(--arrow-room);
}

/* Solid white so they hold up over the photo; navy once you point at them. */
.hero-arrow {
    position: absolute;
    z-index: 4;
    top: calc(var(--bar) + var(--rider-h) / 2);
    left: calc(var(--arrow-room) * -1);
    display: grid;
    place-items: center;
    width: var(--arrow);
    height: var(--arrow);
    border-radius: 50%;
    color: var(--navy);
    background: var(--white);
    box-shadow: 0 0 0 1px rgba(13, 59, 102, 0.16), 0 2px 5px rgba(13, 59, 102, 0.4), 0 12px 26px -5px rgba(13, 59, 102, 0.75);
    translate: 0 -50%;
    transition: background 0.15s, color 0.15s, scale 0.15s;
}

.hero-arrow + .hero-arrow {
    left: calc(var(--fw) + var(--arrow-gap));
}

.hero-arrow:hover {
    color: var(--white);
    background: var(--navy);
}

.hero-arrow:active {
    scale: 0.92;
}

/* The rider slides into a steel H-frame. Down from the top: the top bar, a rider-sized opening, a crossbar,
 * a 24 x 18 in sign panel, a bar under the panel, a second rider-sized opening, the lower bar, and the side
 * rails running on as the legs. All of it scales from the frame's width (--fw). Each opening is exactly a
 * rider tall, so the whole rider shows between the bars. */
.hero-sign {
    /* Small enough to show the whole frame, legs and all, in the window, but never under 200px: a phone held
     * sideways is too short to fit it, and would otherwise shrink the sign to nothing. */
    --fw: min(100cqw, 307px, max(200px, (100svh - 290px) / 2.4));
    --bar: calc(var(--fw) * 0.035);
    --inner: calc(var(--fw) - 2 * var(--bar));
    --rider-h: calc(var(--inner) * 600 / 2328);
    --panel: calc(var(--inner) * 18 / 24);
    --legs: calc(var(--fw) * 0.3);
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

/* Frame, panel and rider share one grid cell; each is placed down from the frame's top. */
.sign-frame,
.sign-panel,
.proof {
    grid-area: 1 / 1;
    align-self: start;
    justify-self: start;
}

/* Over the rider and panel, so its bars cover their edges. */
.sign-frame {
    position: relative;
    z-index: 3;
    box-sizing: border-box;
    width: var(--fw);
    height: calc(2 * var(--rider-h) + var(--panel) + 4 * var(--bar));
    /* Down to the leg tips, which run --legs past the frame's bottom edge. */
    margin: 0 0 var(--legs);
    border: var(--bar) solid var(--frame);
    border-radius: 2px 2px 0 0;
    pointer-events: none;
}

/* The crossbar over the panel and the bar under it. The frame's bottom border is the lower bar. */
.sign-frame::before {
    content: "";
    position: absolute;
    top: var(--rider-h);
    left: 0;
    right: 0;
    box-sizing: border-box;
    height: calc(var(--panel) + 2 * var(--bar));
    border-block: var(--bar) solid var(--frame);
}

/* The side rails run on past the lower bar as the legs, and taper to a point for pushing into the lawn.
 * Each rail and its leg are one piece from the top of the frame down, so there's no seam at the bars.
 * One polygon draws both: the pass between them runs along the top edge, so it has no area. */
.sign-frame::after {
    --tip: calc(var(--bar) * 1.4);
    content: "";
    position: absolute;
    top: calc(var(--bar) * -1);
    left: calc(var(--bar) * -1);
    right: calc(var(--bar) * -1);
    height: calc(100% + 2 * var(--bar) + var(--legs));
    background: var(--frame);
    clip-path: polygon(
        0 0, var(--bar) 0, var(--bar) calc(100% - var(--tip)), calc(var(--bar) / 2) 100%, 0 calc(100% - var(--tip)),
        0 0, calc(100% - var(--bar)) 0, 100% 0, 100% calc(100% - var(--tip)), calc(100% - var(--bar) / 2) 100%,
        calc(100% - var(--bar)) calc(100% - var(--tip)), calc(100% - var(--bar)) 0
    );
}

/* The sign slides down the rails' channels: tucked 2px into them, and 1px under the bars (which round to
 * whole pixels), so no sliver of page shows at the seams. */
.sign-panel {
    box-sizing: border-box;
    width: calc(var(--inner) + 4px);
    height: calc(var(--panel) + 2px);
    margin: calc(var(--rider-h) + 2 * var(--bar) - 1px) 0 0 calc(var(--bar) - 2px);
    padding: 0;
}

.sign-art,
.sign-art img {
    display: block;
    width: 100%;
    height: 100%;
}

.sign-art img {
    object-fit: cover;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* The rider fills the top opening, tucked 1px under the bars and rails on every side so no sliver of page
 * shows where they round to whole pixels. */
.proof {
    position: relative;
    z-index: 2;
    width: calc(var(--inner) + 2px);
    margin: calc(var(--bar) - 1px) 0 0 calc(var(--bar) - 1px);
}

/* Square, and exactly the opening's height plus the tuck. Cropping keeps the art's proportions. */
.hero .rider-art img {
    display: block;
    height: calc(var(--rider-h) + 2px);
    object-fit: cover;
    border-radius: 0;
    box-shadow: none;
}

/* Slid: the rider comes in from the right, behind the right rail, or from the left when you step back. */
.hero .slide-track {
    padding: 0;
}

.hero .mount-slide::before,
.hero .mount-slide::after {
    display: none;
}

.hero .mount-slide.is-mounted .slide-track .rider-art {
    animation-name: slide-in-right;
}

@keyframes slide-in-right {
    0% { transform: translateX(calc(100% + 4px)); }
    72% { transform: translateX(-1.2%); }
    86% { transform: translateX(0.4%); }
    100% { transform: translateX(0); }
}

.hero .mount-slide.is-mounted.from-left .slide-track .rider-art {
    animation-name: slide-in-left;
}

@keyframes slide-in-left {
    0% { transform: translateX(calc(-100% - 4px)); }
    72% { transform: translateX(1.2%); }
    86% { transform: translateX(-0.4%); }
    100% { transform: translateX(0); }
}

.rider-link {
    display: block;
}

/* ---------- index: catalog rack ---------- */

/* The racks reach a card's padding past the content edge so rails run past the cards; on narrow windows that's
 * wider than the page gutter, so clip it rather than scroll sideways. */
.curb {
    overflow-x: clip;
    background: var(--curb);
}

.catalog {
    max-width: 1264px;
    margin: 0 auto;
    padding: 72px var(--gutter) 104px;
}

.section-title {
    font-size: var(--t-h2);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.015em;
}

.rail-group + .rail-group {
    margin-top: 112px;
    padding-top: 56px;
    border-top: 2px solid var(--hairline);
}

.rail-group-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 14px;
}

.rail-group-title {
    font-size: var(--t-h3);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.rail-group-count {
    font-size: 16px;
    color: var(--muted);
}

.rail-group-blurb {
    max-width: 38em;
    margin-top: 4px;
    font-size: 16px;
    color: var(--muted);
}

.rack {
    --card-pad: 28px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 64px;
    margin: 32px calc(var(--card-pad) * -1) 0;
}

.rider-card {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Mounts differ in height; the text sits at the bottom so a row's titles line up. */
/* Just the rider, no rail, screws, bracket or holes; lined up with the mounted ones' art. */
.rider-plain {
    padding-inline: var(--card-pad, 0px);
}

/* Wraps the price and button under the name when the column is too narrow for one line. */
.rider-card-text {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-top: auto;
    padding: 20px var(--card-pad) 0;
}

.rider-card-title {
    font-size: var(--t-lead);
    font-weight: 800;
    line-height: 1.2;
}

/* The title link covers the whole card; the add button sits above it. */
.rider-card-title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.rider-card-title a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.rider-card-meta {
    font-size: 16px;
    color: var(--muted);
}

.rider-card-buy {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 16px;
}

.rider-card-price {
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
}

/* ---------- mounts: hung, screwed, slid ----------
 * Each card's hardware runs the full width of the card, so neighbours on a rail read as one rail
 * or one bracket. A lone last card carries it on across the empty column.
 */

.mount {
    position: relative;
    padding-inline: var(--card-pad, 0px);
}

.rack > .rider-card:last-child:nth-child(odd) .mount::before,
.rack > .rider-card:last-child:nth-child(odd) .mount-slide::after {
    right: -100%;
}

/* Hung: S-hooks on a rail. */
.mount-hang {
    padding-top: 2px;
}

.mount-hang::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: var(--hardware);
    box-shadow: 0 6px 10px -6px rgba(13, 59, 102, 0.45);
}

.mount-hang.is-mounted .swing {
    animation: swing-gently 1.9s cubic-bezier(.3, .6, .4, 1) var(--delay, 0ms) backwards;
}

/* Screwed: two screws straight through the rider into the wall behind it. */
.screw-frame .rider-art {
    position: relative;
}

.screw-frame .rider-art img {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 14px 22px -14px rgba(13, 59, 102, 0.6);
}

.screw {
    --turn: 20deg;
    position: absolute;
    z-index: 1;
    width: 2.1%;
    aspect-ratio: 1;
    translate: -50% -50%;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fbfcfc, #b9c2c8 55%, #78848c);
    box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.45);
    transform: rotate(var(--turn));
}

.screw::after {
    content: "";
    position: absolute;
    top: 41%;
    left: 14%;
    width: 72%;
    height: 18%;
    border-radius: 1px;
    background: #4a545b;
}

/* Two screws, through the outer holes of either the top or the bottom row. Rows of riders alternate
 * down the page (mountIntoView sets .screws-bottom). */
.screw {
    top: 6.25%;
    left: calc(100% * 4 / 24);
}

.screw + .screw {
    left: calc(100% * 20 / 24);
    --turn: 105deg;
    --order: 1;
}

.screws-bottom .screw {
    top: 93.75%;
}

.mount-screw[data-mount-on-view]:not(.is-mounted) .screw {
    opacity: 0;
}

/* Diagonals first, the way you'd square up a plate. Each screw drops in and turns down tight. */
.mount-screw.is-mounted .screw {
    animation: screw-in 0.9s cubic-bezier(.2, .7, .3, 1) calc(var(--delay, 0ms) + var(--order, 0) * 220ms) backwards;
}

@keyframes screw-in {
    0% { opacity: 0; transform: rotate(calc(var(--turn) - 1080deg)) scale(1.9); }
    18% { opacity: 1; }
    85% { transform: rotate(calc(var(--turn) - 20deg)) scale(1); }
    100% { transform: rotate(var(--turn)) scale(1); }
}

/* Slid: the rider runs along a channel, between a top and bottom lip, until it hits the stop. */
.mount-slide::before,
.mount-slide::after {
    content: "";
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    height: 12px;
    background: var(--hardware);
    pointer-events: none;
}

.mount-slide::before {
    top: 0;
    border-radius: 2px 2px 0 0;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18), 0 3px 4px -2px rgba(0, 0, 0, 0.3);
}

.mount-slide::after {
    bottom: 0;
    border-radius: 0 0 2px 2px;
    box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.18), 0 10px 16px -10px rgba(13, 59, 102, 0.6);
}

.slide-track {
    margin-inline: calc(var(--card-pad, 0px) * -1);
    padding: 8px var(--card-pad, 0px);
    overflow: clip;
}

.mount-slide[data-mount-on-view]:not(.is-mounted) .slide-track .rider-art {
    transform: translateX(calc(-100% - var(--card-pad, 0px) - 4px));
}

.mount-slide.is-mounted .slide-track .rider-art {
    animation: slide-in 1.1s cubic-bezier(.45, 0, .2, 1) var(--delay, 0ms) backwards;
}

@keyframes slide-in {
    0% { transform: translateX(calc(-100% - var(--card-pad, 0px) - 4px)); }
    72% { transform: translateX(1.2%); }
    86% { transform: translateX(-0.4%); }
    100% { transform: translateX(0); }
}

/* ---------- index: how riders work ---------- */

.steps {
    max-width: 1264px;
    margin: 0 auto;
    padding: 96px var(--gutter);
}

.steps-lede {
    max-width: 34em;
    margin-top: 14px;
    font-size: var(--t-lead);
    line-height: 1.45;
}

.steps-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
    margin-top: 48px;
}

.steps-list img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 4px;
}

.step-title {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-top: 20px;
    font-size: var(--t-lead);
    font-weight: 800;
    line-height: 1.2;
}

.step-number {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding-top: 3px;
    border-radius: 50%;
    font-size: 16px;
    color: var(--white);
    background: var(--navy);
    transform: translateY(-2px);
}

.steps-cta {
    display: flex;
    justify-content: center;
    margin-top: 56px;
}

/* ---------- product page ---------- */

.product {
    max-width: 1264px;
    margin: 0 auto;
    padding: 104px var(--gutter) 0;
}

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: var(--t-small);
    color: var(--muted);
}

.breadcrumbs a:hover {
    color: var(--navy);
    text-decoration: underline;
}

.product-stage {
    margin-top: 28px;
}

.stage-flat {
    max-width: 1040px;
}

.hero,
.product-stage {
    --behind: var(--white);
}

.stage-flat .rider-art {
    cursor: zoom-in;
}

.stage-flat .rider-zoom {
    overflow: hidden;
    border-radius: 3px;
    box-shadow: 0 1px 1px rgba(13, 59, 102, 0.12), 0 14px 22px -14px rgba(13, 59, 102, 0.55);
}

.stage-flat .rider-zoom img {
    box-shadow: none;
}

.stage-flat .rider-zoom-inner {
    position: relative;
    transition: transform 0.3s;
}

.stage-flat .rider-art.is-zoomed {
    cursor: zoom-out;
}

.stage-flat .rider-art.is-zoomed .rider-zoom-inner {
    transform: scale(2.2);
}

.product-body {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: "head buy" "more buy";
    grid-template-rows: auto 1fr;
    column-gap: 64px;
    margin-top: 56px;
    padding: 0 0 96px 28px;
}

.product-head {
    grid-area: head;
}

.product-more {
    grid-area: more;
}

.product-title {
    font-size: clamp(42px, 5vw, 60px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}

.product-subtitle {
    margin-top: 10px;
    font-size: var(--t-lead);
    color: var(--muted);
}

.product-description {
    max-width: 34em;
    margin-top: 24px;
}

.product-section-title {
    margin-top: 48px;
    font-size: var(--t-body);
    font-weight: 800;
}

.siblings {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.siblings a {
    display: block;
    font-size: var(--t-small);
    color: var(--muted);
}

.siblings img {
    width: 100%;
    height: auto;
    margin-bottom: 8px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px var(--hairline);
}

.siblings a:hover {
    color: var(--navy);
    text-decoration: underline;
}

.spec-list {
    margin-top: 14px;
    border-top: 1px solid var(--hairline);
}

.spec-list div {
    display: grid;
    grid-template-columns: 9em minmax(0, 1fr);
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--hairline);
    font-size: 16px;
}

.spec-list dt {
    color: var(--muted);
}

.buy-box {
    grid-area: buy;
    position: sticky;
    top: 104px;
    align-self: start;
    padding: 32px;
    border-radius: 16px;
    background: var(--curb);
}

.buy-price {
    font-size: var(--t-h3);
    font-weight: 400;
    line-height: 1.1;
    color: var(--muted);
}

.buy-price strong {
    font-weight: 800;
    color: var(--navy);
}

.buy-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.buy-row .pill-button {
    flex: 1;
    padding-inline: 20px;
}

.stepper {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    border-radius: var(--pill);
    background: var(--white);
    box-shadow: inset 0 0 0 1px var(--hairline);
}

.stepper button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 48px;
    font-size: 20px;
    border-radius: var(--pill);
}

.stepper button:hover {
    background: var(--curb);
}

.stepper span {
    min-width: 24px;
    font-weight: 700;
    text-align: center;
}

.stepper-small button {
    width: 34px;
    height: 34px;
    font-size: 17px;
}

.buy-now {
    display: block;
    margin-top: 16px;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.not-found {
    max-width: 34em;
    padding: 64px 0 120px;
}

.not-found p {
    margin: 12px 0 28px;
    color: var(--muted);
}

/* ---------- cart drawer ---------- */

.cart-drawer {
    position: fixed;
    inset: 0;
    z-index: 50;
    visibility: hidden;
    transition: visibility 0.35s;
}

.cart-drawer.is-open {
    visibility: visible;
}

.cart-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(13, 59, 102, 0.35);
    opacity: 0;
    transition: opacity 0.35s;
}

.cart-drawer.is-open .cart-backdrop {
    opacity: 1;
}

.cart-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: min(440px, 100vw);
    background: var(--white);
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(.2, .8, .2, 1);
}

.cart-drawer.is-open .cart-panel {
    transform: none;
}

.cart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--hairline);
}

.cart-head h2 {
    font-size: var(--t-h3);
    font-weight: 800;
}

.icon-button {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.icon-button:hover {
    background: var(--curb);
}

.cart-lines {
    flex: 1;
    overflow-y: auto;
    padding: 0 24px;
}

.cart-line {
    display: flex;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid var(--hairline);
}

.cart-line-art {
    flex: 0 0 128px;
    padding-top: 4px;
}

.cart-line-art img {
    width: 100%;
    height: auto;
    border-radius: 2px;
    box-shadow: 0 0 0 1px var(--hairline);
}

.cart-line-body {
    flex: 1;
    min-width: 0;
}

.cart-line-title {
    font-weight: 800;
}

.cart-line-meta {
    font-size: var(--t-small);
    color: var(--muted);
}

.cart-line-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}

.cart-line-price {
    font-weight: 700;
}

.cart-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 40px 0;
    color: var(--muted);
}

.cart-foot {
    padding: 20px 24px 24px;
    border-top: 1px solid var(--hairline);
}

.cart-foot:empty {
    display: none;
}

.cart-total {
    display: flex;
    justify-content: space-between;
    font-size: var(--t-lead);
    font-weight: 800;
}

.cart-note {
    margin: 6px 0 18px;
    font-size: var(--t-small);
    color: var(--muted);
}

.toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 12px 12px 14px;
    font-size: 16px;
    line-height: 1.35;
    color: var(--white);
    background: var(--navy);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(13, 59, 102, 0.35);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 140%);
    transition: transform 0.4s cubic-bezier(.2, .8, .2, 1), opacity 0.3s, visibility 0.4s;
}

.toast.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.toast img {
    width: 96px;
    height: auto;
    border-radius: 2px;
}

.toast strong {
    display: block;
}

.toast button {
    padding: 8px 14px;
    font-weight: 700;
    white-space: nowrap;
    border-radius: var(--pill);
    background: rgba(255, 255, 255, 0.16);
}

.toast button:hover {
    background: rgba(255, 255, 255, 0.28);
}

/* ---------- footer (same as scantoshow.com) ---------- */

.site-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 10px;
    padding: 20px 24px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted);
    text-align: center;
}

.site-footer a {
    font-weight: 600;
    color: var(--navy);
}

.site-footer a:hover {
    text-decoration: underline;
}

.site-footer-separator {
    color: var(--steel);
}

/* ---------- responsive ---------- */

@media screen and (width <= 1000px) {
    /* One column: the stage is the full width, so keep the frame (and the arrows either side of it) centered. */
    .hero-sign {
        width: var(--fw);
        margin-inline: auto;
    }

    :root {
        --gutter: 24px;
    }

    .headline-image {
        height: 30px;
    }

    .nav-link-wide {
        display: none;
    }

    .hero-body {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .product-body {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "head" "buy" "more";
        row-gap: 32px;
    }

    .buy-box {
        position: static;
    }

    .steps-list {
        grid-template-columns: minmax(0, 1fr);
        max-width: 520px;
    }

    .site-footer {
        flex-direction: column;
    }

    .site-footer-separator {
        display: none;
    }
}

@media screen and (width <= 760px) {
    .steps {
        padding-bottom: 48px;
    }

    /* A quarter smaller than its 42px floor. */
    .product-title {
        font-size: 32px;
    }

    /* Half the desktop gaps between the lede, price and buttons. */
    .hero-price {
        margin-top: 23px;
    }

    .hero-actions {
        margin-top: 26px;
    }

    :root {
        --t-body: 17px;
        --t-lead: 19px;
        --t-h2: 30px;
    }

    .hero {
        --hero-space: 24px;
    }

    .rack {
        --card-pad: 0px;
        grid-template-columns: minmax(0, 1fr);
        row-gap: 48px;
    }

    .rack > .rider-card:last-child:nth-child(odd) .mount::before,
    .rack > .rider-card:last-child:nth-child(odd) .mount-slide::after {
        right: 0;
    }

    .rail-group + .rail-group {
        margin-top: 72px;
        padding-top: 40px;
    }

    .rider-card-text {
        align-items: center;
    }

    /* Every design costs the same; the hero says so once. */
    .rider-card-price {
        display: none;
    }

    .product {
        padding-top: 88px;
    }

    .product-body {
        padding-left: 0;
    }

    .spec-list div {
        grid-template-columns: 7em minmax(0, 1fr);
    }

    .buy-box {
        padding: 24px;
    }
}

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