/* =========================================================================
   Ride for Cancer 2026 — donor rewards
   Borrows the campaign's identity: BMO Ride teal, the yellow progress accent,
   heavy Roboto, pill buttons and the giant ghosted display word. Pitched darker
   than the official site because the content is two mixes, not a dashboard.
   ========================================================================= */

:root {
    --teal:      #008aab;
    --teal-lit:  #21b6da;
    --teal-deep: #06414f;
    --deep:      #062a35;
    --ink:       #04151b;
    --sun:       #f8bb15;
    --white:     #ffffff;

    --w-72: rgba(255, 255, 255, 0.72);
    --w-55: rgba(255, 255, 255, 0.55);
    --w-18: rgba(255, 255, 255, 0.18);
    --w-10: rgba(255, 255, 255, 0.10);
    --w-06: rgba(255, 255, 255, 0.06);

    --font: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --maxw: 1120px;
    --gutter: clamp(1.25rem, 5vw, 3.5rem);
    --radius: 16px;
}

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

/* Every panel on this page is toggled with the hidden attribute, and several of them
   set display in a class. Without this the class wins and the panel leaks through. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
    line-height: 1.6;
    color: var(--white);
    background:
        radial-gradient(1200px 700px at 78% -8%, rgba(0, 138, 171, 0.42), transparent 62%),
        radial-gradient(900px 600px at 6% 18%, rgba(33, 182, 218, 0.16), transparent 60%),
        linear-gradient(180deg, var(--deep) 0%, var(--ink) 58%, #020c10 100%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }
code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.92em; color: var(--sun); }

a { color: var(--teal-lit); }
a:hover, a:focus-visible { color: var(--white); }

:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; border-radius: 4px; }

::selection { background: var(--sun); color: var(--ink); }

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

.skip {
    position: absolute; left: -9999px; top: 0; z-index: 99;
    background: var(--sun); color: var(--ink); padding: 0.8rem 1.2rem;
    font-weight: 700; text-decoration: none;
}
.skip:focus { left: 0; }

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

.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.55rem; flex-wrap: wrap;
    padding: 0.85rem 2rem;
    border: 2px solid transparent; border-radius: 999px;
    font-family: var(--font); font-size: 1rem; font-weight: 900;
    text-transform: uppercase; letter-spacing: 0.02em; text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.btn:hover:not(:disabled) { transform: translateY(-2px); text-decoration: none; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn--solid { background: var(--teal); color: var(--white); border-color: var(--teal); }
.btn--solid:hover:not(:disabled) { background: var(--teal-lit); border-color: var(--teal-lit); color: var(--white); }

.btn--ghost { background: transparent; color: var(--white); border-color: var(--white); }
.btn--ghost:hover:not(:disabled) { background: var(--teal); border-color: var(--teal); color: var(--white); }

.btn--quiet {
    background: transparent; color: var(--w-72); border-color: var(--w-18);
    text-transform: none; font-weight: 700; letter-spacing: 0;
}
.btn--quiet:hover:not(:disabled) { color: var(--white); border-color: var(--white); }

.btn--sm { padding: 0.55rem 1.3rem; font-size: 0.85rem; }

.btn__meta {
    font-weight: 400; font-size: 0.78rem; text-transform: none;
    letter-spacing: 0; opacity: 0.75;
}

/* ---- chrome ------------------------------------------------------------- */

.topbar {
    position: relative; z-index: 3;
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem var(--gutter);
    max-width: var(--maxw); margin: 0 auto;
}
.topbar__brand {
    font-weight: 900; font-size: 1.05rem; letter-spacing: -0.02em;
    color: var(--white); text-decoration: none;
}
.topbar__brand span { color: var(--sun); }
.topbar__brand:hover { color: var(--white); }

.kicker {
    margin: 0 0 1rem;
    font-size: 0.78rem; font-weight: 900; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--teal-lit);
}

/* ---- hero --------------------------------------------------------------- */

/* The key box is what someone came here to use, so the nameplate and the box share
   one screen and sit in the middle of it however tall the window is. */
.opening {
    min-height: calc(100svh - 6rem); /* the topbar sits above this block */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Once unlocked the nameplate stops reserving a screen it no longer needs. */
body.is-unlocked .opening { min-height: 0; }

.hero { position: relative; overflow-x: clip; padding: clamp(1rem, 3vh, 2rem) 0 clamp(1.5rem, 3.5vh, 2.5rem); }

.hero__ghost {
    position: absolute; top: clamp(-0.5rem, 1vh, 1.5rem); left: 50%;
    transform: translateX(-50%);
    margin: 0; width: max-content;
    font-size: clamp(4.5rem, 16vw, 15rem);
    font-weight: 900; letter-spacing: -0.03em; line-height: 0.82;
    white-space: nowrap; pointer-events: none; user-select: none;
    color: transparent;
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.075);
    text-shadow: 0 0 80px rgba(0, 138, 171, 0.25);
}

.hero__inner { position: relative; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

.hero__title {
    margin: 0;
    font-size: clamp(2.3rem, 1.4rem + 4.2vw, 4.6rem);
    font-weight: 900; line-height: 0.96; letter-spacing: -0.025em;
}

/* ---- the gate ----------------------------------------------------------- */

.gate { padding: 0 var(--gutter) clamp(1.5rem, 4vh, 3rem); }

.gate__card {
    max-width: 640px; margin: 0 auto;
    padding: clamp(1.75rem, 4vw, 2.75rem);
    background: rgba(6, 42, 53, 0.72);
    border: 1px solid var(--w-18);
    border-radius: calc(var(--radius) + 6px);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(10px);
}

.gate__sub {
    margin: 0 0 1.5rem;
    max-width: 34ch;
    color: var(--white);
    font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.18rem);
    line-height: 1.5;
}

.gate__form { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.gate__form input {
    flex: 1 1 16rem; min-width: 0;
    padding: 0.85rem 1.2rem;
    font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1rem;
    color: var(--white); background: rgba(0, 0, 0, 0.35);
    border: 2px solid var(--w-18); border-radius: 999px;
    transition: border-color 0.2s ease;
}
.gate__form input::placeholder { color: rgba(255, 255, 255, 0.35); }
.gate__form input:focus { border-color: var(--teal-lit); outline: none; }
.gate__form--slim { margin-top: 1.1rem; }

.gate__error, .gate__busy { margin: 1rem 0 0; font-size: 0.92rem; }
.gate__error { color: var(--sun); font-weight: 700; }
.gate__busy { color: var(--w-55); }
.gate.is-busy .gate__card { opacity: 0.75; }

.gate__alt { margin-top: 1.75rem; border-top: 1px solid var(--w-10); padding-top: 1.25rem; }
.gate__alt summary {
    cursor: pointer; font-weight: 700; font-size: 0.92rem; color: var(--w-72);
    list-style: none;
}
.gate__alt summary::-webkit-details-marker { display: none; }
.gate__alt summary::before { content: '+ '; color: var(--teal-lit); font-weight: 900; }
.gate__alt[open] summary::before { content: '– '; }
.gate__alt summary:hover { color: var(--white); }
.gate__alt-body { padding-top: 1.1rem; }
.gate__alt-body > p { margin: 0 0 1.1rem; font-size: 0.9rem; color: var(--w-55); }
.gate__alt-row { display: flex; gap: 0.7rem; flex-wrap: wrap; }

.amber {
    display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: flex-start;
    margin-top: 1.25rem; padding: 1.1rem;
    background: rgba(0, 0, 0, 0.3); border: 1px solid var(--w-10); border-radius: var(--radius);
}
.amber__qr { flex: 0 0 148px; width: 148px; background: #fff; padding: 8px; border-radius: 10px; }
.amber__qr svg { width: 100%; height: auto; display: block; }
.amber__body { flex: 1 1 15rem; min-width: 0; }
.amber__body p { margin: 0 0 0.8rem; font-size: 0.88rem; color: var(--w-72); }
.amber__links { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.amber__hint { font-size: 0.8rem !important; color: var(--w-55) !important; margin-bottom: 0 !important; }

/* ---- the vault ---------------------------------------------------------- */

.vault { padding: clamp(1rem, 4vh, 2rem) var(--gutter) clamp(4rem, 10vh, 7rem); }
.vault:focus { outline: none; }

.vault__head { max-width: var(--maxw); margin: 0 auto clamp(2.5rem, 6vh, 4rem); }
.vault__title { margin: 0 0 0.8rem; font-size: clamp(2rem, 1.5rem + 2.6vw, 3.4rem); font-weight: 900; letter-spacing: -0.025em; }
.vault__note { margin: 0 0 1.4rem; max-width: 52ch; color: var(--w-72); }

.decks { max-width: var(--maxw); margin: 0 auto; display: grid; gap: clamp(3rem, 8vh, 6rem); }

/* ---- a deck ------------------------------------------------------------- */

.deck {
    display: grid;
    grid-template-columns: minmax(300px, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
}
@media (max-width: 860px) { .deck { grid-template-columns: 1fr; } }

/* When the WebGL deck mounts, the CSS scene steps aside rather than being deleted —
   it is the fallback if the model or the context is lost. */
.deck--3d .scene { display: none; }
.deck__stage canvas { display: block; width: 100%; height: 100%; }

.deck__stage {
    position: relative; aspect-ratio: 1.02; width: 100%;
    /* A camera, so a square footprint foreshortens to a trapezoid that is wider at
       the front. Orthographic projection keeps a rectangle rectangular, which is
       what made the slab read flat. */
    perspective: 1250px;
    perspective-origin: 50% 0%;
    /* A zoom on the whole rendered scene. Scaling here rather than resizing the parts
       keeps every depth — and so the sleeve-to-record ratio — exactly as measured. */
    transform: scale(0.95);
}

/* Axonometric, not perspective: no `perspective` property anywhere in here, so the
   browser projects orthographically and parallel edges stay parallel. The scene is
   the deck's surface seen front-on and tilted back — anything lying on it needs no
   transform of its own, anything standing up counter-rotates by the same angle. */
.scene {
    position: absolute; inset: 0;
    transform-style: preserve-3d;
    /* The nudge is screen-space, applied after the projection, so it holds at any size. */
    transform: translateY(1%) rotateX(56deg);
}

/* ---- the sleeve on display ---------------------------------------------- */

/* Stood on its bottom edge and turned back to face the camera, which cancels the
   scene's tilt exactly and leaves the artwork a true, unsheared square. */
.sleeve {
    position: absolute;
    left: 10%; bottom: 47%;
    width: 54.6%; aspect-ratio: 1; /* renders the same width as the record */
    margin: 0;
    transform-origin: 50% 100%;
    /* The tilt is cancelled so the artwork stays a true square; the rotateZ is the
       slight counter-clockwise lean, applied in the screen plane. */
    transform: rotateX(-56deg) rotateZ(-4deg);
    transform-style: preserve-3d;
}

.sleeve__art {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 2px;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.12),
        0 30px 60px rgba(0, 0, 0, 0.65);
}

/* The open edge of the card sleeve, along the left. */
.sleeve__edge {
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 3.5%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 70%);
    border-radius: 2px 0 0 2px;
}

.sleeve__gloss {
    position: absolute; inset: 0;
    border-radius: 2px; pointer-events: none;
    background: linear-gradient(118deg,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0.03) 26%,
        rgba(255, 255, 255, 0) 48%);
}

/* Lies on the surface at the foot of the sleeve. No filter: a filter would give the
   element its own rendering context and flatten it out of the 3D scene. */
.sleeve__shadow {
    position: absolute;
    left: 7%; bottom: 43%;
    width: 60%; height: 6%;
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 50%,
        rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 44%, transparent 72%);
    pointer-events: none;
}

/* ---- the deck ------------------------------------------------------------ */

/* The footprint is wider than it is deep, so the tilt reads as a shallow slab
   rather than a squashed square. */
.turntable {
    position: absolute;
    left: 15%; top: 52%;
    width: 68%; aspect-ratio: 1.24;
    transform-style: preserve-3d;
    transform: translateZ(1.35rem);
}

.plinth {
    position: absolute; inset: 0;
    border-radius: 2.5% / 3.5%;
    background: linear-gradient(168deg, #26282d 0%, #17181b 52%, #101114 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* Hinged down from the front edge and stood vertical, which is the slab's thickness. */
.plinth__face {
    position: absolute;
    left: 0; right: 0; top: 100%;
    height: 1.35rem; /* matches the slab's lift, so the face closes the gap exactly */
    transform-origin: 50% 0;
    transform: rotateX(-56deg);
    border-radius: 0 0 4px 4px;
    background: linear-gradient(180deg, #202126 0%, #131417 60%, #0b0b0d 100%);
    box-shadow: 0 26px 46px rgba(0, 0, 0, 0.6);
}

/* Square box inside the slab: the platter is a circle in it and the tonearm's
   geometry is measured against it. */
.platter-area {
    position: absolute;
    left: 9%; top: 7%;
    height: 86%; aspect-ratio: 1;
    transform-style: preserve-3d;
}

.platter {
    position: absolute; inset: 0;
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        inset 0 0 60px rgba(0, 0, 0, 0.8);
    isolation: isolate;
    transform: translateZ(0.35rem);
}

/* Contact shadow where the record meets the slab. */
.platter::after {
    content: '';
    position: absolute; inset: -3%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0.55) 62%, transparent 78%);
    transform: translateZ(-0.34rem);
    z-index: -1;
}

.platter__disc {
    position: absolute; inset: 0;
    border-radius: 50%;
    background:
        repeating-radial-gradient(circle at 50% 50%,
            rgba(255, 255, 255, 0.045) 0 1px,
            rgba(0, 0, 0, 0) 1px 4px),
        radial-gradient(circle at 50% 50%, #1b1b1e 0 34%, #121215 34% 72%, #0a0a0c 72% 100%);
    animation: rfc-spin 1.8s linear infinite;
    animation-play-state: paused;
}
.deck.is-playing .platter__disc { animation-play-state: running; }

@keyframes rfc-spin { to { transform: rotate(360deg); } }

.platter__grooves {
    position: absolute; inset: 12%;
    border-radius: 50%;
    background: repeating-radial-gradient(circle at 50% 50%,
        rgba(255, 255, 255, 0.07) 0 1px,
        rgba(0, 0, 0, 0.25) 1px 3px);
    opacity: 0.55;
}

.platter__label {
    position: absolute; inset: 31%;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 0 20px rgba(0, 0, 0, 0.4);
}

.platter__spindle {
    position: absolute; left: 50%; top: 50%;
    width: 2.6%; height: 2.6%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, #f4f4f4, #9a9a9a);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.9);
}

/* Static: light does not travel with the record. */
.platter__sheen {
    position: absolute; inset: 0;
    border-radius: 50%; pointer-events: none;
    background: conic-gradient(from 210deg at 50% 50%,
        rgba(255, 255, 255, 0) 0deg,
        rgba(255, 255, 255, 0.10) 28deg,
        rgba(33, 182, 218, 0.07) 58deg,
        rgba(255, 255, 255, 0) 108deg,
        rgba(255, 255, 255, 0) 200deg,
        rgba(255, 255, 255, 0.07) 234deg,
        rgba(255, 255, 255, 0) 300deg);
    mix-blend-mode: screen;
}

/* Anchored at the pivot and swung as one piece. At rest the needle clears the
   record; playing, it sits in the outer groove. */
.tonearm {
    position: absolute; right: 2%; top: 2%;
    width: 6%; height: 58%;
    transform: translateZ(0.7rem) rotate(-6deg);
    transform-origin: 50% 7%;
    transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.55));
}
.deck.is-playing .tonearm { transform: translateZ(0.7rem) rotate(8deg); }

.tonearm__pivot {
    position: absolute; left: 50%; top: 7%;
    width: 150%; aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, #f2f2f3, #b9babd 42%, #6c6d71 100%);
    box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.45);
}
.tonearm__pivot::after {
    content: ''; position: absolute; inset: 32%;
    border-radius: 50%;
    background: linear-gradient(160deg, #46474c, #202126);
}

.tonearm__rod {
    position: absolute; left: 50%; top: 7%;
    width: 30%; height: 84%;
    transform: translateX(-50%);
    border-radius: 999px;
    background: linear-gradient(90deg, #5f6064 0%, #ececed 42%, #a9aaae 68%, #6c6d71 100%);
}

.tonearm__head {
    position: absolute; left: 50%; bottom: 0;
    width: 150%; height: 10%;
    transform: translateX(-52%) rotate(-7deg);
    border-radius: 3px 3px 6px 6px;
    background: linear-gradient(165deg, #3a3b41, #131417);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.tonearm__head::after {
    content: ''; position: absolute; left: 12%; bottom: -34%;
    width: 8%; height: 40%;
    background: linear-gradient(180deg, #d7d8da, #8d8e92);
}

/* ---- deck info ---------------------------------------------------------- */

.deck__kicker {
    margin: 0 0 0.6rem;
    font-size: 0.78rem; font-weight: 900; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--w-55);
}
.deck__no { color: var(--sun); }

.deck__title {
    margin: 0 0 1rem;
    font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
    font-weight: 900; line-height: 1; letter-spacing: -0.025em;
}
.deck__blurb { margin: 0 0 1.8rem; max-width: 48ch; color: var(--w-72); }

.transport { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.6rem; }

.transport__play {
    flex: 0 0 auto;
    width: 60px; height: 60px; padding: 0;
    display: grid; place-items: center;
    border: 2px solid var(--white); border-radius: 50%;
    background: transparent; color: var(--white);
    font-size: 1.05rem; line-height: 1; cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.transport__play:hover { background: var(--teal); border-color: var(--teal); transform: scale(1.05); }
.deck.is-playing .transport__play { background: var(--sun); border-color: var(--sun); color: var(--ink); }
.transport__icon { display: block; transform: translateX(0.06em); letter-spacing: 0.1em; }
.deck.is-playing .transport__icon { transform: none; }

.transport__track { flex: 1 1 auto; min-width: 0; }

.groove {
    position: relative; height: 10px;
    border-radius: 999px; cursor: pointer;
    background: repeating-linear-gradient(90deg,
        rgba(255, 255, 255, 0.10) 0 1px,
        rgba(255, 255, 255, 0.03) 1px 3px);
    box-shadow: inset 0 0 0 1px var(--w-10);
    touch-action: none;
}
.groove__fill {
    position: absolute; left: 0; top: 0; bottom: 0; width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--teal), var(--sun));
}
.groove__thumb { display: none; }

.transport__time {
    display: flex; justify-content: space-between; gap: 1rem;
    margin: 0.5rem 0 0;
    font-size: 0.78rem; font-variant-numeric: tabular-nums; color: var(--w-55);
}
.transport__status { flex: 1 1 auto; text-align: center; color: var(--sun); }

.deck--no-preview .transport__play { opacity: 0.5; }
.deck--no-preview .groove { opacity: 0.4; pointer-events: none; }

.deck__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 2rem; }
.deck__actions .btn { flex-direction: column; gap: 0.15rem; padding-block: 0.7rem; }

.deck__artist {
    margin: 0; padding-top: 1.5rem;
    border-top: 1px solid var(--w-10);
    max-width: 52ch;
}
.deck__artist-name {
    margin: 0 0 0.3rem;
    font-size: 0.8rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase;
}
.deck__artist-name span { color: var(--w-55); font-weight: 400; letter-spacing: 0.04em; }
.deck__artist-name span::before { content: ' · '; }
.deck__artist-note { margin: 0; font-size: 0.88rem; line-height: 1.55; color: var(--w-55); font-style: italic; }

/* ---- footer ------------------------------------------------------------- */

.foot {
    max-width: var(--maxw); margin: 0 auto;
    padding: 2.5rem var(--gutter) 4rem;
    border-top: 1px solid var(--w-10);
    font-size: 0.85rem; color: var(--w-55);
}
.foot p { margin: 0 0 0.6rem; }
.foot__fine { max-width: 62ch; opacity: 0.8; }

/* ---- motion ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .platter__disc { animation: none; }
    .tonearm, .btn, .transport__play { transition: none; }
    .btn:hover:not(:disabled) { transform: none; }
}

/* On a short window the nameplate gives way rather than pushing the key box under
   the fold. Centring only helps once the pair actually fits. */
@media (max-height: 780px) {
    .hero__title { font-size: clamp(1.9rem, 1.2rem + 2.8vw, 3.1rem); }
    .hero { padding-block: 0.5rem 1.25rem; }
    .kicker { margin-bottom: 0.65rem; }
    .gate__card { padding: clamp(1.4rem, 3vw, 2.1rem); }
    .gate__sub { margin-bottom: 1.2rem; }
    .gate__alt { margin-top: 1.4rem; padding-top: 1.1rem; }
}