/**
 * Erebora homepage 10x layer.
 *
 * WHY: This file intentionally loads after the reconciled v12 layers. Keeping
 * the accepted deployed baseline intact makes the redesign reviewable and
 * rollback-safe while this layer owns the inventory-first visual contract.
 */

@font-face {
    font-family: "Barlow Condensed";
    src: url("/static/fonts/barlow-condensed/barlow-condensed-800-latin.woff2") format("woff2");
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Barlow Condensed";
    src: url("/static/fonts/barlow-condensed/barlow-condensed-800-latin-ext.woff2") format("woff2");
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}

@font-face {
    font-family: "Barlow Condensed";
    src: url("/static/fonts/barlow-condensed/barlow-condensed-800-vietnamese.woff2") format("woff2");
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
        U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309,
        U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

:root {
    --erebora-cream: #f5f0e7;
    --erebora-paper: #fffdf8;
    --erebora-asphalt: #171816;
    --erebora-asphalt-2: #242521;
    --erebora-ink: #171816;
    --erebora-muted: #5f615b;
    --erebora-bronze: #8a6014;
    --erebora-gold: #d3a93b;
    --erebora-gold-light: #f4d879;
    --erebora-whatsapp: #167c45;
    --erebora-danger: #a62925;
    --erebora-dock-height: 60px;
    --bg: var(--erebora-cream);
    --bg-card: var(--erebora-paper);
    --bg-card-elevated: #ffffff;
    --ink: var(--erebora-ink);
    --ink-dim: #444640;
    --ink-muted: var(--erebora-muted);
    --cta1: var(--erebora-bronze);
    --cta2: #68450c;
    --cta-gradient: linear-gradient(180deg, var(--erebora-gold-light), var(--erebora-gold));
    --success: var(--erebora-whatsapp);
    --urgency: var(--erebora-danger);
    --ring: #c9c1b4;
    --ring-gold: rgba(138, 96, 20, 0.42);
    --erebora-paper-highlight: rgba(255, 255, 255, 0.92);
    --erebora-paper-edge: #8f826f;
    --erebora-contact-shadow: rgba(23, 24, 22, 0.18);
    --erebora-asphalt-highlight: rgba(255, 255, 255, 0.09);
    --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
    --font-heading: "Barlow Condensed", "Arial Narrow", "Roboto Condensed",
        "Noto Sans", ui-sans-serif, system-ui, sans-serif;
    --text-xs: 12px;
    --text-sm: 14px;
    --text-base: 16px;
    --container-max: 1360px;
    --mobile-bar-height: var(--erebora-dock-height);
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
}

html {
    background: var(--erebora-asphalt);
    scroll-padding-block: 12px calc(var(--erebora-dock-height) + 24px);
}

body {
    background:
        linear-gradient(rgba(23, 24, 22, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(23, 24, 22, 0.025) 1px, transparent 1px),
        var(--erebora-cream);
    background-size: 24px 24px;
    color: var(--erebora-ink);
    font-size: 16px;
    padding-block-end: calc(var(--erebora-dock-height) + env(safe-area-inset-bottom, 0px));
}

body::before {
    z-index: 0;
    opacity: 0.018;
}

body > * {
    position: relative;
}

:focus-visible {
    outline: 3px solid #145bba;
    outline-offset: 3px;
}

button,
a,
input,
select,
summary {
    scroll-margin-block: 16px calc(var(--erebora-dock-height) + 28px);
}

h1,
h2,
h3,
h4,
h5,
h6,
.btn,
.filter-btn,
.featured-price-amount,
.urgency-timer {
    font-family: var(--font-heading);
    font-weight: 800;
}

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] .btn,
html[lang="ar"] .filter-btn,
html[lang="he"] h1,
html[lang="he"] h2,
html[lang="he"] h3,
html[lang="he"] h4,
html[lang="he"] .btn,
html[lang="he"] .filter-btn,
html[lang="ja"] h1,
html[lang="ja"] h2,
html[lang="ja"] h3,
html[lang="ja"] h4,
html[lang="ja"] .btn,
html[lang="ja"] .filter-btn,
html[lang="ko"] h1,
html[lang="ko"] h2,
html[lang="ko"] h3,
html[lang="ko"] h4,
html[lang="ko"] .btn,
html[lang="ko"] .filter-btn,
html[lang="zh"] h1,
html[lang="zh"] h2,
html[lang="zh"] h3,
html[lang="zh"] h4,
html[lang="zh"] .btn,
html[lang="zh"] .filter-btn,
html[lang="th"] h1,
html[lang="th"] h2,
html[lang="th"] h3,
html[lang="th"] h4,
html[lang="th"] .btn,
html[lang="th"] .filter-btn,
html[lang="hi"] h1,
html[lang="hi"] h2,
html[lang="hi"] h3,
html[lang="hi"] h4,
html[lang="hi"] .btn,
html[lang="hi"] .filter-btn {
    font-family: "Noto Sans", ui-sans-serif, system-ui, sans-serif;
    letter-spacing: 0;
}

/* WHY: Greek uppercase labels use the fallback glyph face, where Latin
   tracking pushes the longest card action outside its real touch box. */
html[lang="el"] h1,
html[lang="el"] h2,
html[lang="el"] h3,
html[lang="el"] h4,
html[lang="el"] .btn,
html[lang="el"] .filter-btn {
    letter-spacing: 0;
}

.btn {
    min-height: 44px;
    border-radius: var(--radius-sm);
    border: 2px solid transparent;
    padding: 10px 18px;
    line-height: 1.15;
    white-space: normal;
    text-wrap: balance;
    text-transform: none;
    box-shadow: 0 3px 0 rgba(23, 24, 22, 0.28);
}

.filter-btn,
.section-title,
.featured-price-label,
.bike-card-badge,
.bike-card-stock {
    text-transform: none;
}

.btn-primary,
.btn-gold {
    background: var(--cta-gradient);
    color: #17120a;
    border-color: #6f4b0d;
    box-shadow: 0 4px 0 #6f4b0d, 0 9px 18px rgba(62, 40, 5, 0.18);
}

.btn-secondary {
    background: var(--erebora-paper);
    color: var(--erebora-ink);
    border-color: #7c756b;
}

.btn-outline {
    color: var(--erebora-asphalt);
    border-color: var(--erebora-asphalt);
}

.btn:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 rgba(23, 24, 22, 0.3);
}

.whatsapp-btn {
    background: #167c45;
    color: #fff;
    border-color: #0b4d2b;
    box-shadow: 0 4px 0 #0b4d2b, 0 8px 18px rgba(11, 77, 43, 0.2);
}

/* ===== Inventory-first document flow ===== */

body.inventory-first #section-hero,
body.inventory-first #section-bikes {
    display: flex;
    opacity: 1;
    transform: none;
}

body.inventory-first #section-hero:not(.active),
body.inventory-first #section-bikes:not(.active) {
    display: flex;
}

body.inventory-first .funnel-section:not(#section-hero):not(#section-bikes):not(.active) {
    display: none;
}

/* WHY: The legacy depth layer places a pale, blurred glass pane over every
   section. On the inventory-first path it washed the workshop asphalt gray
   and forced a large backdrop-filter paint over the catalog. Keep the useful
   atmospheric light, but make these two conversion surfaces opaque and fast. */
body.inventory-first #section-hero::before,
body.inventory-first #section-bikes::before {
    background: none;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#section-hero {
    min-height: 0;
    padding: 12px clamp(12px, 3vw, 32px) 14px;
    background:
        radial-gradient(circle at 13% -25%, rgba(244, 216, 121, 0.2), transparent 38%),
        linear-gradient(180deg, #292a26 0%, var(--erebora-asphalt) 100%);
    border-block-end: 4px solid var(--erebora-gold);
    color: #fffaf0;
    box-shadow:
        inset 0 1px 0 var(--erebora-asphalt-highlight),
        inset 0 -2px 0 rgba(0, 0, 0, 0.48);
}

#section-hero .section-content {
    max-width: var(--container-max);
    display: grid;
    grid-template-columns: minmax(220px, 0.8fr) minmax(300px, 480px) minmax(260px, 1fr);
    grid-template-areas:
        "title video trust"
        "review video trust";
    gap: 10px 24px;
    align-items: center;
    text-align: start;
}

.hero-title {
    grid-area: title;
    margin: 0;
    text-align: start;
}

.kicker {
    margin: 0 0 2px;
    color: #fff5dc;
    font-size: clamp(16px, 2vw, 22px);
    letter-spacing: 0.08em;
}

.headline {
    color: var(--erebora-gold-light);
    -webkit-text-fill-color: currentColor;
    background: none;
    animation: none;
    font-size: clamp(34px, 4.8vw, 72px);
    line-height: normal;
    letter-spacing: -0.015em;
    text-wrap: balance;
    text-shadow: 0 2px 0 rgba(99, 65, 9, 0.9);
}

.video-container {
    grid-area: video;
    width: 100%;
    max-width: 480px;
}

.video-shell {
    border-radius: var(--radius-sm);
    border: 2px solid #a4842d;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.18),
        8px 8px 0 #090a09;
}

.video-fullscreen-btn {
    position: absolute;
    inset-block-start: 6px;
    inset-inline-end: 6px;
    z-index: 20;
    display: grid;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    padding: 0;
    border: 2px solid #fff5dc;
    border-radius: 3px;
    background: rgba(9, 10, 9, 0.88);
    color: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 3px 0 rgba(0, 0, 0, 0.68);
    cursor: pointer;
    transition:
        transform 120ms ease,
        background-color 120ms ease,
        box-shadow 120ms ease;
}

.video-fullscreen-btn:hover {
    background: #090a09;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.32),
        0 4px 0 rgba(0, 0, 0, 0.76);
    transform: translateY(-1px);
}

.video-fullscreen-btn:active {
    transform: translateY(2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 1px 0 rgba(0, 0, 0, 0.72);
    transition-duration: 34ms;
}

.video-fullscreen-btn svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.video-fullscreen-btn .fullscreen-exit-icon {
    display: none;
}

.video-fullscreen-btn.is-fullscreen .fullscreen-enter-icon {
    display: none;
}

.video-fullscreen-btn.is-fullscreen .fullscreen-exit-icon {
    display: block;
}

/* WHY: Keep both video controls comfortably tappable without stacking them
   over the same corner once the lazy YouTube player replaces the poster. */
.video-sound-btn {
    top: 6px;
    right: auto;
    left: auto;
    inset-inline-start: 6px;
    inset-inline-end: auto;
}

/* WHY: Fullscreen enlarges the existing lightweight shell instead of loading
   another player or asset, preserving the performance-first media path. */
.video-shell:fullscreen,
.video-shell:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    background: #000;
    box-shadow: none;
}

.video-shell:fullscreen::backdrop {
    background: #000;
}

.video-shell:fullscreen .video-thumb-img,
.video-shell:-webkit-full-screen .video-thumb-img {
    object-fit: contain;
    transform: none;
    background: #000;
}

.video-shell:fullscreen .video-play-btn,
.video-shell:-webkit-full-screen .video-play-btn {
    transform: none;
}

.video-thumb-img {
    transform: scale(1.035);
}

.video-play-btn {
    width: 56px;
    height: 56px;
    border: 3px solid #fff;
    background: rgba(22, 124, 69, 0.9);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        0 4px 0 #0b4d2b;
    animation: erebora-play-attention 2.8s ease-in-out infinite !important;
}

@keyframes erebora-play-attention {
    0%, 100% {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.42),
            0 4px 0 #0b4d2b,
            0 0 0 0 rgba(244, 216, 121, 0.42);
    }
    50% {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.52),
            0 4px 0 #0b4d2b,
            0 0 0 9px rgba(244, 216, 121, 0);
    }
}

.video-play-btn svg {
    width: 26px;
    height: 26px;
}

.video-play-label {
    inset-block-end: 8px;
    padding: 4px 9px;
    border-radius: 2px;
    font-size: 12px;
    animation: none;
}

.trust-bar {
    grid-area: trust;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    padding: 8px;
    gap: 6px;
    border: 2px solid #d8b94f;
    border-radius: var(--radius-sm);
    background: #20211e;
    box-shadow:
        inset 0 1px 0 var(--erebora-asphalt-highlight),
        0 4px 0 rgba(8, 9, 8, 0.42);
    backdrop-filter: none;
}

.trust-item {
    min-height: 44px;
    justify-content: center;
    color: #f7f1e5;
    font-size: 13px;
    line-height: 1.25;
    text-align: center;
}

.trust-icon {
    fill: var(--erebora-gold-light);
    opacity: 1;
    flex: 0 0 auto;
}

.trust-item-clickable {
    cursor: pointer;
}

.hero-testimonials {
    grid-area: review;
    width: 100%;
    max-width: none;
    min-height: 58px;
    margin: 0;
    padding-inline-start: 12px;
    border-inline-start: 3px solid var(--erebora-gold);
}

.hero-testimonial {
    text-align: start;
}

.hero-testimonial-stars {
    margin: 0;
    color: var(--erebora-gold-light);
    font-size: 14px;
}

.hero-testimonial-text {
    margin: 0;
    color: #fffaf0;
    font-size: 13px;
    line-height: 1.35;
}

.hero-testimonial-author {
    margin: 2px 0 0;
    color: #e8ca73;
    font-size: 12px;
}

.hero-testimonial-dots {
    display: none;
}

#section-bikes {
    min-height: 0;
    padding: 18px clamp(12px, 3vw, 32px) 48px;
    background: var(--erebora-cream);
}

#section-bikes .section-content {
    max-width: var(--container-max);
    gap: 14px;
}

body.inventory-first #section-bikes > .section-back-btn,
body.inventory-first #section-bikes .progress-indicator {
    display: none;
}

#section-bikes .section-title {
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    color: var(--erebora-asphalt);
    font-size: clamp(32px, 5vw, 58px);
    line-height: 0.95;
    letter-spacing: -0.01em;
}

/* ===== Compact, usable filters ===== */

/* WHY: Sticky search belongs to bike browsing only. This containing block
   makes it release before the FAQ and navigation, so it cannot cover their
   comparison or action targets. */
.bike-catalog {
    display: grid;
    width: 100%;
    min-width: 0;
    gap: 14px;
}

.filter-bar {
    position: sticky;
    inset-block-start: 0;
    z-index: 35;
    display: grid;
    grid-template-columns: minmax(220px, 360px) repeat(7, max-content);
    width: 100%;
    margin: 0 0 8px;
    padding: 8px;
    gap: 8px;
    justify-content: start;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    background: rgba(245, 240, 231, 0.985);
    border-block: 2px solid #746e64;
    box-shadow:
        inset 0 1px 0 var(--erebora-paper-highlight),
        0 5px 0 rgba(23, 24, 22, 0.1);
}

/* WHY: The 60px sticky filter owns the viewport's top hit region. Reserve its
   height plus breathing room whenever a bike-section control is scrolled into
   view so search never covers comparison, card, or keyboard-focus actions. */
#section-bikes button,
#section-bikes a,
#section-bikes input,
#section-bikes select,
#section-bikes summary {
    scroll-margin-block-start: 76px;
}

.bike-search-wrapper {
    width: 100%;
    max-width: none;
    margin: 0;
}

.bike-search-input,
.filter-btn {
    min-height: 44px;
    border: 2px solid #5a554d;
    border-radius: 4px;
    background: var(--erebora-paper);
    color: var(--erebora-ink);
    font-size: 15px;
    box-shadow:
        inset 0 1px 0 var(--erebora-paper-highlight),
        0 2px 0 rgba(95, 82, 63, 0.22);
}

.bike-search-input {
    padding-inline: 44px 12px;
    box-shadow:
        inset 0 2px 3px rgba(23, 24, 22, 0.08),
        inset 0 1px 0 var(--erebora-paper-highlight);
}

.bike-search-icon {
    inset-inline-start: 14px;
    left: auto;
}

.filter-btn {
    padding: 8px 14px;
}

.filter-btn.active {
    background: var(--erebora-asphalt);
    border-color: var(--erebora-asphalt);
    color: #fff;
    box-shadow:
        inset 0 1px 0 var(--erebora-asphalt-highlight),
        inset 0 -3px 0 var(--erebora-gold),
        0 3px 0 rgba(23, 24, 22, 0.38);
}

/* ===== Product-as-hero cards ===== */

.bike-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 2.5vw, 28px);
    max-width: var(--container-max);
    perspective: none;
}

.bike-card {
    min-width: 0;
    max-width: 100%;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--erebora-paper-edge);
    border-block-start: 5px solid var(--erebora-asphalt);
    border-radius: var(--radius-md);
    background: var(--erebora-paper);
    box-shadow:
        inset 0 1px 0 var(--erebora-paper-highlight),
        8px 8px 0 var(--erebora-contact-shadow);
    transform: none;
    transform-style: flat;
    opacity: 1;
    animation: none;
    cursor: default;
    /* WHY: Keep skipped cards close to their real responsive height. A fixed
       720px inner estimate made the mobile scrollbar shrink and the wide
       scrollbar grow as cards entered the viewport. */
    content-visibility: auto;
    contain-intrinsic-size:
        auto clamp(590px, calc(36vw + 320px), 835px);
}

.bike-card::before,
.bike-card::after {
    display: none;
}

.bike-card:hover {
    transform: none;
    box-shadow:
        inset 0 1px 0 var(--erebora-paper-highlight),
        8px 8px 0 var(--erebora-contact-shadow);
}

.bike-card-img-container {
    aspect-ratio: 4 / 3;
    border: 1px solid var(--erebora-asphalt);
    border-radius: 4px;
    background:
        linear-gradient(135deg, rgba(211, 169, 59, 0.16), transparent 45%),
        #ded8cc;
    /* WHY: Draw the stronger frame outside the media box so the motorcycle
       keeps every pixel of its existing mobile photo area. */
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.28),
        0 0 0 3px var(--erebora-asphalt),
        0 5px 0 var(--erebora-bronze),
        0 9px 14px rgba(23, 24, 22, 0.2);
}

.bike-card-img {
    object-position: var(--bike-image-position, center center);
    transform-origin: var(--bike-image-position, center center);
    transform:
        scale(var(--bike-image-scale, 1))
        scaleX(var(--bike-image-flip, 1));
    transition: opacity 180ms ease, transform 180ms ease;
}

.bike-card-img[data-deferred="true"] {
    opacity: 0;
}

.bike-card-img.is-loaded {
    opacity: 1;
}

.bike-card:hover .bike-card-img,
.bike-card-img:hover {
    opacity: 1;
    transform:
        scale(var(--bike-image-hover-scale, 1.08))
        scaleX(var(--bike-image-flip, 1));
}

.bike-card-badge,
.bike-card-stock {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    border-radius: 3px;
    font-size: 12px;
    letter-spacing: 0.035em;
    box-shadow: 0 2px 0 rgba(23, 24, 22, 0.28);
}

/* WHY: These are paired image labels, not directional navigation. Keep the
   value badge left and urgency right in every locale, with explicit anchors
   so long translations cannot escape the motorcycle frame. */
.bike-card-stock {
    inset-block-start: 8px;
    inset-inline-start: auto;
    left: auto;
    right: 8px;
    max-width: calc(100% - 16px);
    background: var(--erebora-danger);
}

/* WHY: Translated stock labels are separate flex items. Logical spacing keeps
   "Only 1 available!" readable in both LTR and RTL without moving the final
   punctuation away from the translated availability word. */
.bike-card-stock > [data-i18n="only"] {
    margin-inline-end: 0.28em;
}

.bike-card-stock > [data-i18n="available"] {
    margin-inline-start: 0.28em;
}

.bike-card-badge {
    inset-block-start: 8px;
    inset-inline-end: auto;
    right: auto;
    left: 8px;
    max-width: calc(100% - 16px);
}

.bike-card-name {
    margin: 0;
    color: var(--erebora-asphalt);
    font-size: clamp(23px, 3vw, 34px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: 0;
    text-align: start;
    text-wrap: balance;
}

.bike-card-pricing {
    margin: 0;
    text-align: start;
}

.bike-card-featured-price {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    grid-template-areas:
        "label label"
        "price period"
        "market market";
    align-items: end;
    justify-content: start;
    gap: 0 8px;
    padding: 10px 12px;
    border: 1px solid #66501b;
    border-inline-start: 6px solid var(--erebora-gold);
    border-radius: 3px;
    background: var(--erebora-asphalt);
    color: #fff;
    box-shadow:
        inset 0 1px 0 var(--erebora-asphalt-highlight),
        inset 0 -2px 0 rgba(0, 0, 0, 0.46),
        0 3px 0 rgba(23, 24, 22, 0.18);
}

.featured-price-label {
    grid-area: label;
    color: var(--erebora-gold-light);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.featured-price-amount {
    grid-area: price;
    color: #fff;
    font-size: clamp(34px, 5vw, 52px);
    line-height: 0.95;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    unicode-bidi: isolate;
}

.featured-market-price,
.rate-tier-market,
.rate-tier-price,
.calc-price-big,
.calc-market-amount,
.savings-value,
.savings-total-value {
    direction: ltr;
    unicode-bidi: isolate;
}

.featured-price-period {
    grid-area: period;
    align-self: end;
    color: #fff5dc;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}

.featured-market-price {
    grid-area: market;
    color: #c8c3b8;
    font-size: 14px;
}

.bike-card-savings {
    margin: 8px 0 0;
    background: #167c45;
    border-radius: 3px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        0 2px 0 #0b4d2b;
}

.bike-card-buttons {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 10px;
    margin: 10px 0 0;
}

.bike-card-buttons .btn {
    min-height: 48px;
    padding: 8px 10px;
    font-size: 16px;
}

.bike-card-rate-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 10px 0 0;
}

.rate-tier {
    display: grid;
    gap: 3px;
    align-content: start;
    padding: 8px;
    border: 1px solid #c9c1b4;
    background: #f3eee5;
    box-shadow: inset 0 1px 0 var(--erebora-paper-highlight);
}

.rate-tier-label {
    color: var(--erebora-muted);
    font-size: 13px;
}

.rate-tier-prices {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
}

.rate-tier-market {
    font-size: 12px;
}

.rate-tier-price {
    color: var(--erebora-ink);
    font-size: 15px;
    font-weight: 800;
}

.quick-faq-section {
    border: 1px solid #9f906f;
    border-radius: 4px;
    background: #e9e1d3;
}

.quick-faq-grid {
    gap: 8px;
}

.quick-faq-item {
    min-height: 64px;
    border: 1px solid #c6baaa;
    border-radius: 3px;
    background: var(--erebora-paper);
}

/* ===== Deeper funnel sections ===== */

#section-calculator,
#section-trust,
#section-faq {
    padding: 24px clamp(12px, 3vw, 32px) 48px;
    background: var(--erebora-cream);
}

#section-calculator .section-content,
#section-trust .section-content,
#section-faq .section-content {
    gap: 20px;
}

.progress-indicator {
    margin: 0;
}

.section-title {
    border-radius: 4px;
    background: var(--erebora-asphalt);
    color: var(--erebora-gold-light);
}

.calculator-card,
.benefit-card,
.testimonial-card,
.faq-item,
.included-section,
.guarantees-section {
    border-radius: var(--radius-md);
    background: var(--erebora-paper);
    box-shadow: 6px 6px 0 rgba(23, 24, 22, 0.11);
    backdrop-filter: none;
}

.calc-date-input,
.calc-promo-input,
.calc-promo-btn {
    min-height: 44px;
}

.calc-promo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.calc-promo-input {
    min-width: 0;
}

.urgency-banner {
    margin: 0;
    border: 2px solid #641916;
    border-radius: 4px;
    background: var(--erebora-danger);
    box-shadow: 0 4px 0 #641916;
    animation: none;
}

.faq-question {
    min-height: 52px;
}

/* ===== Dialogs and focus ===== */

dialog.modal {
    position: fixed;
    inset: 0;
    width: min(94vw, 1040px);
    max-width: none;
    max-height: min(92dvh, 900px);
    margin: auto;
    padding: 0;
    border: 0;
    background: transparent;
    backdrop-filter: none;
    opacity: 1;
    visibility: visible;
    overflow: visible;
}

/* WHY: Legacy .modal sets display:flex, which otherwise overrides the native
   closed-dialog state and leaves an invisible page-blocking hit target. */
dialog.modal:not([open]),
dialog.exit-popup:not([open]) {
    display: none;
}

dialog.modal[open] {
    display: block;
    opacity: 1;
    visibility: visible;
}

dialog.modal::backdrop {
    background: rgba(8, 9, 8, 0.78);
}

dialog.modal .modal-content {
    width: 100%;
    max-height: min(92dvh, 900px);
    overflow: auto;
    transform: none;
}

dialog.exit-popup {
    position: fixed;
    inset: 0;
    width: min(92vw, 520px);
    max-height: min(88dvh, 680px);
    margin: auto;
    padding: 0;
    border: 2px solid #6b4b0e;
    border-block-start: 8px solid var(--erebora-gold);
    border-radius: var(--radius-md);
    background:
        radial-gradient(circle at 50% -20%, rgba(244, 216, 121, 0.28), transparent 42%),
        var(--erebora-paper);
    color: var(--erebora-ink);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.72),
        14px 14px 0 rgba(0, 0, 0, 0.36);
    overflow: auto;
}

dialog.exit-popup::backdrop {
    background: rgba(8, 9, 8, 0.78);
}

dialog.exit-popup .exit-popup-content {
    width: 100%;
    max-height: none;
    padding: 34px 22px 24px;
    border: 0;
    border-radius: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.54), transparent 38%),
        var(--erebora-paper);
    box-shadow: none;
    transform: none;
}

dialog.exit-popup[open] .exit-popup-content {
    transform: none;
}

.modal-close,
.bike-selector-close {
    z-index: 30;
    width: 44px;
    height: 44px;
    border: 2px solid var(--erebora-asphalt);
    border-radius: 3px;
    background: var(--erebora-paper);
    color: var(--erebora-asphalt);
}

.exit-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.08em 0.18em;
    font-size: clamp(36px, 8vw, 58px);
    line-height: 1;
    text-align: center;
}

.exit-title-gift {
    width: 0.72em;
    height: 0.72em;
    flex: 0 0 auto;
    color: var(--erebora-danger);
    filter: drop-shadow(0 3px 0 rgba(23, 24, 22, 0.22));
    transform: rotate(-4deg);
}

.exit-subtitle {
    color: #0f6237;
    font-size: clamp(25px, 6vw, 38px);
    line-height: 1;
}

.exit-popup .btn {
    width: 100%;
    min-height: 52px;
}

.offer-teaser {
    position: fixed;
    inset-inline-start: 12px;
    inset-block-end: calc(var(--erebora-dock-height) + env(safe-area-inset-bottom, 0px) + 12px);
    z-index: 185;
    display: none;
    align-items: stretch;
    max-width: min(320px, calc(100vw - 24px));
    border: 2px solid #6f4b0d;
    border-radius: 4px;
    background: linear-gradient(180deg, #ffe79b 0%, var(--erebora-gold-light) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.58),
        7px 7px 0 rgba(23, 24, 22, 0.3);
}

.offer-teaser.show {
    display: flex;
}

.offer-teaser-open {
    min-height: 48px;
    padding: 8px 12px;
    color: #17120a;
    font-weight: 800;
}

.offer-teaser-dismiss {
    width: 48px;
    min-height: 48px;
    border-inline-start: 1px solid #6f4b0d;
    color: #17120a;
    font-size: 22px;
}

.modal,
.bike-selector-modal {
    z-index: 210;
}

.modal-content,
.bike-selector-content {
    border: 2px solid #6e6558;
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, #fffefa 0%, #f5eee2 100%);
    box-shadow:
        inset 0 1px 0 var(--erebora-paper-highlight),
        12px 12px 0 rgba(23, 24, 22, 0.3);
}

.bike-detail-modal .modal-content {
    padding-block-start: 56px;
}

.bike-detail-modal .modal-close {
    position: sticky;
    inset-block-start: 8px;
    inset-inline-start: calc(100% - 52px);
    margin-block-end: -44px;
}

.comparison-table th {
    position: sticky;
    inset-block-start: 0;
    z-index: 2;
    background: var(--erebora-asphalt);
    color: var(--erebora-gold-light);
}

/* ===== One reserved conversion dock ===== */

.mobile-whatsapp-bar {
    right: auto;
    left: auto;
    /* WHY: physical fallbacks must precede logical insets so LTR/RTL mapping
       remains the final placement authority for the two sibling dock segments. */
    inset-inline-start: 0;
    inset-inline-end: 64px;
    inset-block-end: 0;
    height: calc(var(--erebora-dock-height) + env(safe-area-inset-bottom, 0px));
    padding-block-end: env(safe-area-inset-bottom, 0px);
    background: #167c45;
    border-block-start: 2px solid #0b4d2b;
    box-shadow: 0 -4px 12px rgba(23, 24, 22, 0.2);
}

.mobile-whatsapp-bar a {
    min-height: var(--erebora-dock-height);
    padding-inline: 12px;
    color: #fff;
    animation: none;
    font-size: 16px;
    letter-spacing: 0;
}

.claude-chat-widget {
    right: auto;
    left: auto;
    inset-inline-end: 0;
    inset-block-end: 0;
    bottom: 0;
    width: 64px;
    height: calc(var(--erebora-dock-height) + env(safe-area-inset-bottom, 0px));
    padding-block-end: env(safe-area-inset-bottom, 0px);
    background: var(--erebora-asphalt);
    border-block-start: 2px solid #080908;
    border-inline-start: 1px solid #514d45;
    z-index: var(--z-sticky);
}

@media (min-width: 768px) {
    /* WHY: Desktop/tablet keep one compact conversion dock so it cannot cover
       the hero CTA; fixed widths make chat and WhatsApp exact sibling segments. */
    .mobile-whatsapp-bar {
        inset: auto auto 0 0;
        width: 320px;
    }

    .claude-chat-widget {
        inset: auto auto 0 320px;
    }

    [dir="rtl"] .mobile-whatsapp-bar {
        inset: auto 0 0 auto;
    }

    [dir="rtl"] .claude-chat-widget {
        inset: auto 320px 0 auto;
    }
}

.claude-chat-trigger {
    width: 100%;
    height: var(--erebora-dock-height);
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    padding: 4px;
    border: 0;
    border-radius: 0;
    background: var(--erebora-asphalt);
    color: #fff;
    box-shadow: none;
}

.claude-chat-trigger .chat-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.chat-live-dot {
    width: 13px;
    height: 13px;
}

.social-proof {
    inset-inline-start: 12px;
    inset-block-end: calc(var(--erebora-dock-height) + env(safe-area-inset-bottom, 0px) + 12px);
    left: auto;
    bottom: auto;
    max-width: min(300px, calc(100vw - 24px));
    border: 1px solid #827867;
    border-radius: 4px;
    background: linear-gradient(180deg, #fffefa 0%, #f3ede2 100%);
    box-shadow:
        inset 0 1px 0 var(--erebora-paper-highlight),
        7px 7px 0 rgba(23, 24, 22, 0.2);
}

.social-proof-close {
    inset-inline-start: auto;
    inset-inline-end: 4px;
    inset-block-start: 4px;
    left: auto;
    width: 44px;
    height: 44px;
}

.footer {
    padding-block-end: 32px;
    border-block-start: 6px solid var(--erebora-gold);
    background: var(--erebora-asphalt);
}

.footer-col h4,
.footer-col p,
.footer-col a,
.footer-bottom p {
    color: #f7f1e5;
}

.footer-col h4 {
    color: var(--erebora-gold-light);
}

.footer .btn-outline {
    border-color: #d8cba9;
    color: #fff;
}

/* ===== Responsive continuity ===== */

@media (max-width: 1023px) {
    #section-hero .section-content,
    #section-hero .section-content[style] {
        /* WHY: The reconciled legacy layer still applies a 100dvh mobile hero
           through 768px. Reset it before defining this compact tablet grid so
           the first motorcycle remains visible at the shared breakpoint. */
        height: auto;
        max-height: none;
        overflow: visible;
        justify-content: normal;
        padding-block: 0;
        grid-template-columns: minmax(0, 1fr) minmax(220px, 340px);
        grid-template-areas:
            "title video"
            "trust video"
            "review video";
    }

    .trust-bar {
        grid-template-columns: 1fr;
    }

    .trust-item {
        min-height: 30px;
        justify-content: flex-start;
        text-align: start;
    }

    .bike-grid {
        gap: 18px;
    }
}

@media (max-width: 767px) {
    :root {
        --erebora-dock-height: 58px;
        --mobile-video-width: clamp(176px, 48vw, 230px);
    }

    #section-hero {
        padding: 8px 12px 10px;
    }

    #section-hero .section-content,
    #section-hero .section-content[style] {
        height: auto;
        max-height: none;
        padding: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(--mobile-video-width);
        grid-template-areas:
            "title video"
            "trust trust"
            "review review";
        gap: 7px 10px;
        align-items: center;
    }

    .hero-title {
        padding-inline-end: 0;
    }

    .kicker {
        font-size: 13px;
        line-height: 1.1;
        letter-spacing: 0.055em;
    }

    .headline {
        font-size: clamp(34px, 11vw, 44px);
        /* WHY: Let the loaded Barlow/Noto face own its vertical metrics. A
           fixed ratio clipped ink in Chromium and cannot safely cover all 26
           locale fallbacks without shrinking the brand headline. */
        line-height: normal;
    }

    .video-container {
        width: var(--mobile-video-width);
    }

    .video-shell {
        max-height: none;
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.18),
            4px 4px 0 #080908;
    }

    .video-fullscreen-btn,
    .video-sound-btn {
        inline-size: 32px;
        block-size: 32px;
        min-width: 32px;
        min-height: 32px;
    }

    .video-fullscreen-btn svg,
    .video-sound-btn svg {
        width: 16px;
        height: 16px;
    }

    .video-play-btn {
        width: 44px;
        height: 44px;
        transform: translateX(-12px);
    }

    html[dir="rtl"] .video-play-btn {
        transform: translateX(12px);
    }

    .video-play-label {
        display: none;
    }

    .trust-bar {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: 4px;
        gap: 3px;
    }

    .trust-item {
        min-height: 36px;
        justify-content: center;
        gap: 3px;
        font-size: 10px;
        text-align: center;
    }

    .trust-icon {
        width: 13px;
        height: 13px;
    }

    .hero-testimonials {
        min-height: 48px;
        margin: 0;
        padding-inline-start: 7px;
        overflow: hidden;
    }

    .hero-testimonial-stars {
        font-size: 11px;
    }

    .hero-testimonial-text {
        display: -webkit-box;
        overflow: hidden;
        font-size: 11px;
        line-height: 1.25;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .hero-testimonial-author {
        display: none;
    }

    .btn-hero-cta {
        min-height: 48px;
        padding: 6px;
        font-size: 14px;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.48),
            inset 0 -2px 0 rgba(55, 35, 4, 0.2),
            3px 3px 0 #080908;
    }

    #section-bikes {
        padding: 12px 10px 32px;
    }

    #section-bikes .section-content {
        gap: 10px;
    }

    #section-bikes .section-title {
        align-self: flex-start;
        padding-inline: 2px;
        font-size: 34px;
    }

    .filter-bar {
        width: calc(100% + 20px);
        margin-inline: -10px;
        padding-inline: 10px;
        grid-template-columns: minmax(210px, calc(100vw - 20px)) repeat(7, max-content);
    }

    .bike-grid {
        /* WHY: A bare 1fr keeps an automatic min-content floor. The long
           pricing/card content then widened a 300px mobile grid to 738px. */
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .bike-grid > .bike-card.bike-card-centered {
        width: 100%;
    }

    .bike-card {
        width: 100%;
        padding: 8px;
        box-shadow:
            inset 0 1px 0 var(--erebora-paper-highlight),
            5px 5px 0 var(--erebora-contact-shadow);
        contain-intrinsic-size:
            auto clamp(600px, calc(25vw + 520px), 625px);
    }

    .bike-card-name {
        font-size: 27px;
    }

    .featured-price-amount {
        font-size: clamp(34px, 11vw, 46px);
    }

    .bike-card-buttons {
        gap: 8px;
    }

    .bike-card-buttons .btn {
        min-height: 48px;
        font-size: 15px;
    }

    .quick-faq-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quick-faq-item {
        min-width: 0;
    }

    .quick-faq-content span {
        overflow-wrap: anywhere;
    }

    .section-nav {
        gap: 10px;
    }

    .section-nav > * {
        flex: 1 1 180px;
    }

    .calculator-card {
        width: 100%;
        max-width: none;
        padding: 14px;
    }

    .calc-date-row {
        overflow: visible;
    }

    .calc-date-field {
        max-width: none;
    }

    .modal-content {
        width: calc(100vw - 20px);
        max-height: calc(100dvh - 32px);
    }

    .mobile-whatsapp-bar {
        inset-inline-end: 58px;
    }

    .claude-chat-widget {
        width: 58px;
    }

    .social-proof.show + .offer-teaser.show,
    .social-proof.show ~ .offer-teaser.show {
        inset-block-end: calc(var(--erebora-dock-height) + env(safe-area-inset-bottom, 0px) + 92px);
    }
}

@media (max-width: 359px) {
    :root {
        --mobile-video-width: 160px;
    }

    .trust-item {
        font-size: 9px;
    }

    .headline {
        font-size: 32px;
    }

    .bike-card-buttons {
        grid-template-columns: 1fr;
    }

    .quick-faq-grid {
        grid-template-columns: 1fr;
    }

    .mobile-whatsapp-bar a {
        font-size: 14px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) and (max-height: 520px) and (orientation: landscape) {
    #section-hero {
        padding-block: 6px 8px;
    }

    #section-hero .section-content,
    #section-hero .section-content[style] {
        /* WHY: Common phone-landscape CSS viewports are wider than the mobile
           breakpoint but only about 390px tall. Use the compact three-column
           composition so a motorcycle—not an oversized hero—owns the fold. */
        grid-template-columns: minmax(220px, 0.9fr) minmax(200px, 280px) minmax(220px, 0.9fr);
        grid-template-areas:
            "title video trust"
            "review video trust";
        gap: 4px 14px;
    }

    .kicker {
        font-size: 14px;
        line-height: 1.1;
    }

    .headline {
        font-size: clamp(32px, 4.5vw, 40px);
    }

    .video-container {
        max-width: 280px;
    }

    .trust-bar {
        padding: 2px 5px;
        gap: 0;
    }

    .trust-item {
        min-height: 22px;
        gap: 4px;
        font-size: 10.5px;
        line-height: 1.1;
    }

    .trust-icon {
        width: 12px;
        height: 12px;
    }

    .hero-testimonials {
        min-height: 0;
        padding-inline-start: 8px;
    }

    .hero-testimonial-stars {
        font-size: 11px;
    }

    .hero-testimonial-text {
        display: -webkit-box;
        overflow: hidden;
        font-size: 11px;
        line-height: 1.2;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .hero-testimonial-author {
        margin-block-start: 1px;
        font-size: 10px;
    }

    .btn-hero-cta {
        min-height: 48px;
        padding: 5px 8px;
        font-size: 15px;
    }

    #section-bikes {
        padding-block-start: 6px;
    }

    #section-bikes .section-content {
        gap: 6px;
    }

    #section-bikes .section-title {
        font-size: 32px;
    }

    .filter-bar {
        margin-block-end: 0;
        padding-block: 6px;
    }
}

@media (max-width: 767px) and (max-height: 520px) and (orientation: landscape) {
    #section-hero .section-content {
        grid-template-columns: minmax(220px, 0.8fr) minmax(190px, 280px) minmax(240px, 1fr);
        grid-template-areas:
            "title video trust"
            "review video trust";
    }

    .hero-testimonials {
        min-height: 42px;
    }

    .trust-item {
        min-height: 30px;
    }
}

/* Static content and controls remain usable without decorative motion. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation: none !important;
    }

    /* WHY: The play cue intentionally uses an !important animation, so its
       class specificity must be matched for reduced-motion users. */
    .video-play-btn {
        animation: none !important;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .btn:hover {
        transform: translateY(-1px);
    }

    .bike-card:hover {
        border-color: #67582f;
    }
}