/* =========================================================================
   RYN Motors — Turbo Upgrade Flow Styles
   Light theme matching the gear page. Green accent: #22c55e
   Used on /turbo-upgrade-gate/ and /turbo-upgrade/ (Stage 3+).
   Mobile-first; desktop kicks in at 768px.
   ========================================================================= */

/* Astra leaves .ast-container as a flex row with justify: flex-start by
   default, which pins our pages' content (and especially the gate form)
   to the left edge on wide screens. Both Turbo pages set their own width
   constraints internally, so centering the row is what feels right. */
.ryn-turbo-page .ast-container {
    justify-content: center;
}

/* ----- Gate page ----- */

.ryn-turbo-gate {
    background-color: #ffffff;
    color: #1a1a1a;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    padding: 32px 18px 80px;
    min-height: 60vh;
}

.ryn-turbo-gate *,
.ryn-turbo-gate *::before,
.ryn-turbo-gate *::after {
    box-sizing: border-box;
}

.ryn-turbo-gate__inner {
    max-width: 480px;
    margin: 0 auto;
}

.ryn-turbo-gate__title {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0 0 8px;
    text-align: center;
    line-height: 1.15;
}

.ryn-turbo-gate__lede {
    font-size: 15px;
    line-height: 1.5;
    color: #4a4a4a;
    text-align: center;
    margin: 0 0 28px;
}

/* Notice banner — used for status messages from the submit handler */
.ryn-turbo-gate__notice {
    border-radius: 6px;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.45;
    margin: 0 0 20px;
    border: 1px solid transparent;
}

.ryn-turbo-gate__notice--info {
    background: #f0f9ff;
    border-color: #bae6fd;
    color: #075985;
}

.ryn-turbo-gate__notice--warn {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

/* Form */
.ryn-turbo-gate__form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ryn-turbo-gate__label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #1a1a1a;
    margin: 0;
}

.ryn-turbo-gate__input {
    width: 100%;
    height: 52px;
    padding: 0 14px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 16px; /* >= 16px prevents iOS auto-zoom on focus */
    background: #ffffff;
    color: #1a1a1a;
    -webkit-appearance: none;
    appearance: none;
}

.ryn-turbo-gate__input:focus {
    outline: none;
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

/* Honeypot — not display:none (some scrapers skip those) and not
   visibility:hidden (same). Move it well off-screen and shrink to a
   single pixel so real users never see, focus, or tab into it, but
   bots scraping the form structure still see and fill it. */
.ryn-turbo-gate__honeypot {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.ryn-turbo-gate__submit {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: #1a1a1a;
    color: #ffffff;
    height: 54px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 120ms ease;
    margin-top: 6px;
}

.ryn-turbo-gate__submit:hover,
.ryn-turbo-gate__submit:focus {
    background: #22c55e;
    color: #ffffff;
    outline: none;
}

.ryn-turbo-gate__submit:active {
    background: #16a34a;
}

.ryn-turbo-gate__small {
    font-size: 13px;
    color: #6b6b6b;
    text-align: center;
    margin: 16px 0 0;
}

.ryn-turbo-gate__small a {
    color: #1a1a1a;
    text-decoration: underline;
}

.ryn-turbo-gate__small a:hover {
    color: #22c55e;
}

/* Desktop tweaks — gentle, mobile design holds up well at full width. */
@media (min-width: 768px) {
    .ryn-turbo-gate {
        padding-top: 64px;
    }
    .ryn-turbo-gate__title {
        font-size: 32px;
        letter-spacing: 3px;
    }
    .ryn-turbo-gate__lede {
        font-size: 16px;
    }
}

/* =========================================================================
   Landing page (/turbo-upgrade/) — Stage 3
   Two-column on desktop, stacked on mobile. Top + bottom sticky strips
   carry the price/deposit/Reserve button so the CTA is always visible.
   ========================================================================= */

.ryn-turbo {
    background: #ffffff;
    color: #1a1a1a;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

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

/* ----- Sticky price/CTA strip ----- */

.ryn-turbo-strip {
    background: #f5f5f5;
    border-bottom: 1px solid #e4e4e4;
}

.ryn-turbo-strip--top {
    position: sticky;
    top: 0;
    z-index: 90;
}

.ryn-turbo-strip--bottom {
    margin-top: 32px;
    border-top: 1px solid #e4e4e4;
    border-bottom: 0;
}

.ryn-turbo-strip__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 18px;
    flex-wrap: wrap;
}

.ryn-turbo-strip__priceblock {
    display: flex;
    gap: 28px;
    flex: 1 1 auto;
    min-width: 0;
}

.ryn-turbo-strip__col {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    min-width: 0;
}

.ryn-turbo-strip__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #6b6b6b;
    margin-bottom: 4px;
}

.ryn-turbo-strip__value {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
}

.ryn-turbo-strip__value .woocommerce-Price-amount {
    font-weight: inherit;
}

.ryn-turbo-reserve-form {
    margin: 0;
    flex: 0 0 auto;
}

.ryn-turbo-strip__btn {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: #1a1a1a;
    color: #ffffff;
    height: 44px;
    padding: 0 22px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 120ms ease;
}

.ryn-turbo-strip__btn:hover,
.ryn-turbo-strip__btn:focus {
    background: #22c55e;
    outline: none;
}

.ryn-turbo-strip__btn:active {
    background: #16a34a;
}

/* ----- Body grid ----- */

.ryn-turbo__body {
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 18px 40px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
}

.ryn-turbo__left,
.ryn-turbo__right {
    min-width: 0;
    /* Per Caleb's mockup the right column reads bold throughout — labels,
       body copy, performance numbers. Set the weight here so descendants
       inherit unless they need an even heavier override. */
    font-weight: 700;
}

.ryn-turbo__vehicle {
    background: #ffffff;
    border: 1px solid #e4e4e4;
    border-radius: 4px;
    overflow: hidden;
}

.ryn-turbo__vehicle img {
    display: block;
    width: 100%;
    height: auto;
}

/* Selected equipment disclosure */
.ryn-turbo__equipment {
    margin-top: 12px;
    border: 1px solid #e4e4e4;
    border-radius: 4px;
    background: #ffffff;
}

.ryn-turbo__equipment summary {
    list-style: none;
    cursor: pointer;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 600;
}

.ryn-turbo__equipment summary::-webkit-details-marker { display: none; }

.ryn-turbo__equipment-toggle {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #6b6b6b;
    font-weight: 600;
}

.ryn-turbo__equipment[open] .ryn-turbo__equipment-toggle::after { content: ' ▴'; }
.ryn-turbo__equipment:not([open]) .ryn-turbo__equipment-toggle::after { content: ' ▾'; }

.ryn-turbo__equipment-list {
    list-style: none;
    margin: 0;
    padding: 0 16px 14px;
    display: grid;
    gap: 6px;
}

.ryn-turbo__equipment-list li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    border-top: 1px solid #f0f0f0;
    padding-top: 8px;
}

.ryn-turbo__equipment-title {
    color: #6b6b6b;
}

.ryn-turbo__equipment-selection {
    color: #1a1a1a;
    font-weight: 600;
    text-align: right;
}

/* ----- Right column header ----- */

.ryn-turbo__title {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0 0 8px;
    line-height: 1.1;
}

.ryn-turbo__model-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.ryn-turbo__year {
    background: #e9e9e9;
    color: #1a1a1a;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 2px;
    letter-spacing: 1px;
}

.ryn-turbo__model {
    font-size: 14px;
    color: #6b6b6b;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

/* ----- Details card ----- */

.ryn-turbo-card {
    background: var(--ast-global-color-6);
    padding: 20px;
    border-radius: 10px;
}

.ryn-turbo-card__title {
    text-align: center;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e4e4e4;
}

.ryn-turbo-card__list {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

.ryn-turbo-card__list dt {
    font-weight: 700;
    margin-top: 10px;
    display: inline;
}

.ryn-turbo-card__list dt:first-child {
    margin-top: 0;
}

.ryn-turbo-card__list dd {
    display: inline;
    margin: 0 0 0 4px;
    color: #4a4a4a;
    font-weight: 400;
}

.ryn-turbo-card__list dd::after {
    content: '';
    display: block;
    margin-bottom: 8px;
}

/* ----- Performance comparison ----- */

.ryn-turbo__perf-title {
    margin: 32px 0 0;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    line-height: 0;
}

.ryn-turbo__perf-sub {
    color: #6b6b6b;
    margin: 0 0 14px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.1;
}

.ryn-turbo-perf {
    border-top: 1px solid #e4e4e4;
}

.ryn-turbo-perf__row {
    display: grid;
    grid-template-columns: 130px 1fr 1fr;
    border-bottom: 1px solid #e4e4e4;
    align-items: center;
}

.ryn-turbo-perf__row--head .ryn-turbo-perf__cell {
    background: transparent;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.ryn-turbo-perf__shot {
    display: block;
    max-width: 100%;
    width: 140px;
    height: auto;
    object-fit: contain;
}

.ryn-turbo-perf__variant {
    display: block;
    text-align: center;
    line-height: 1.2;
}

.ryn-turbo-perf__cell {
    padding: 12px 8px;
    font-size: 14px;
    text-align: center;
}

.ryn-turbo-perf__cell--label {
    text-align: left;
    color: #6b6b6b;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.ryn-turbo-perf__row .ryn-turbo-perf__cell:nth-child(2) {
    font-weight: 400;
}

.ryn-turbo-perf__row--head .ryn-turbo-perf__variant {
    font-weight: 700;
}

/* ----- Desktop layout ----- */

@media (min-width: 900px) {
    .ryn-turbo__body {
        grid-template-columns: minmax(0, 1.2fr) minmax(380px, 1fr);
        gap: 40px;
        padding: 36px 24px 60px;
    }
    .ryn-turbo__title {
        font-size: 34px;
    }
    .ryn-turbo-strip__btn {
        height: 48px;
        padding: 0 28px;
    }
    .ryn-turbo-strip__value {
        font-size: 20px;
    }
}

/* Phone tweaks — keep sticky strip compact */
@media (max-width: 600px) {
    .ryn-turbo-strip__inner {
        padding: 10px 14px;
    }
    .ryn-turbo-strip__priceblock {
        gap: 18px;
    }
    .ryn-turbo-strip__value {
        font-size: 15px;
    }
    .ry