.container { max-width: 1360px; margin: 0 auto; padding: 0 var(--gutter); }
/* Navbar cart icon — opens the reservation drawer. The count badge is hidden
when the cart is empty so the icon does not advertise "0 units". */
.cart-icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: transparent; border: 1px solid transparent; color: var(--text-muted); border-radius: 10px; cursor: pointer; font-family: inherit; transition: color .16s var(--ease-out-quart), background-color .16s var(--ease-out-quart), border-color .16s var(--ease-out-quart); margin-left: 4px; }
.cart-icon-btn:hover { color: var(--text-primary); background: rgba(255,255,255,0.04); border-color: var(--border-default); }
.cart-icon-btn[aria-expanded="true"] { color: var(--text-primary); background: rgba(255,255,255,0.05); border-color: var(--border-default); }
.cart-icon-count { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--brand); color: var(--text-primary); font-family: var(--font-mono); font-size: 10px; font-weight: 500; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px rgba(0,0,0,0.9); pointer-events: none; }
.cart-icon-count[hidden] { display: none; }
/* ---------------------------------------------------------------------------
Reservation drawer — right-aligned slide-in modeled after the Aerosound
template. Opens from the navbar cart icon, dims the page, and shows the
same cart state as the hero configurator. State is one source of truth:
drawer steppers and hero steppers both mutate the same alpha/pro counts.
--------------------------------------------------------------------------- */
.cart-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .25s var(--ease-out-quart); z-index: 80; }
.cart-overlay.is-open { opacity: 1; pointer-events: auto; }
.cart-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100dvw); max-width: 100%; background: var(--bg-canvas); border-left: 1px solid var(--border-default); box-shadow: -24px 0 60px -28px rgba(0,0,0,0.7); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .32s var(--ease-out-quint); z-index: 90; }
.cart-drawer.is-open { transform: translateX(0); }
.cart-drawer-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--border-default); }
.cart-drawer-title { display: inline-flex; align-items: baseline; gap: 10px; }
.cart-drawer-title h2 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.005em; }
.cart-drawer-title .cart-drawer-count { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--text-tertiary); }
.cart-drawer-close { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: 10px; color: var(--text-muted); cursor: pointer; transition: color .15s var(--ease-out-quart), background-color .15s var(--ease-out-quart), border-color .15s var(--ease-out-quart); }
.cart-drawer-close:hover { color: var(--text-primary); background: rgba(255,255,255,0.04); border-color: var(--border-default); }
/* Scrollable middle — line items or the empty state. */
.cart-drawer-body { flex: 1; overflow-y: auto; padding: 8px 0; }
.cart-drawer-empty { padding: 56px 22px; text-align: center; color: var(--text-muted); }
.cart-drawer-empty p { font-size: var(--text-ui); line-height: 1.55; }
.cart-drawer-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cart-drawer-item { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; padding: 20px 22px; border-bottom: 1px solid var(--border-default); }
.cart-drawer-item:last-child { border-bottom: none; }
.cart-item-media { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; background: var(--surface-card); border: 1px solid var(--border-default); }
.cart-item-media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cart-item-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cart-item-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; min-width: 0; }
.cart-item-name-wrap { min-width: 0; }
.cart-item-name { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-ui); font-weight: 600; color: var(--text-primary); letter-spacing: -0.005em; }
.cart-item-price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--text-primary); white-space: nowrap; }
.cart-item-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 4px; }
.cart-item-qty { display: inline-flex; align-items: center; gap: 4px; background: oklch(10.5% 0.009 290); border: 1px solid rgba(0,0,0,0.62); box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset; border-radius: 10px; padding: 3px; }
.cart-item-qty button { width: 40px; height: 40px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.08); background: linear-gradient(180deg, oklch(25% 0.012 290), oklch(18% 0.011 290)); color: var(--text-primary); font-family: var(--font-mono); font-size: 16px; cursor: pointer; transition: border-color .15s var(--ease-out-quart), color .15s var(--ease-out-quart); }
.cart-item-qty button:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.cart-item-qty button:disabled { opacity: 0.4; cursor: not-allowed; }
.cart-item-qty .cart-item-qty-value { min-width: 28px; text-align: center; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 14px; color: var(--text-primary); }
.cart-item-remove { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: transparent; border: 1px solid transparent; color: var(--text-muted); cursor: pointer; transition: color .15s var(--ease-out-quart), border-color .15s var(--ease-out-quart); }
.cart-item-remove svg { width: 22px; height: 22px; flex-shrink: 0; }
.cart-item-remove:hover { color: var(--text-primary); border-color: var(--border-default); }
/* Sticky drawer footer — totals and the Reserve CTA. */
.cart-drawer-footer { padding: 18px 22px 22px; border-top: 1px solid var(--border-default); background: var(--bg-canvas); display: flex; flex-direction: column; gap: 10px; }
.cart-drawer-totals { display: flex; flex-direction: column; gap: 6px; }
.cart-drawer-row { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; font-size: var(--text-ui); }
.cart-drawer-row .label { color: var(--text-muted); }
.cart-drawer-row .value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-primary); white-space: nowrap; }
/* Deposit row — emphasis comes from weight and size, not from ruby. Keep the
brand color reserved for the primary Reserve action so the page has one
unambiguous climax (cart-drawer-cta), not two competing red elements. */
.cart-drawer-row.is-deposit .label { color: var(--text-primary); font-weight: 600; }
.cart-drawer-row.is-deposit .value { color: var(--text-primary); font-size: 1.05rem; font-weight: 600; }
/* "Remaining balance is invoiced before shipment" is the value prop of the
deposit model — promote it from fineprint to body-legible weight. */
.cart-drawer-fineprint { font-size: 13px; line-height: 1.5; color: var(--text-muted); margin-top: 4px; }
.cart-drawer-status { font-size: 13px; line-height: 1.5; padding: 10px 12px; border-radius: 10px; margin-top: 4px; }
.cart-drawer-status.is-canceled { color: var(--text-muted); background: color-mix(in oklab, var(--text-primary) 5%, var(--surface-raised)); border: 1px solid var(--border-default); }
.cart-drawer-status.is-error { color: var(--text-primary); background: color-mix(in oklab, var(--brand) 8%, var(--surface-raised)); border: 1px solid color-mix(in oklab, var(--brand) 35%, var(--border-default)); }
.cart-drawer-status a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; }
.cart-drawer-status a:hover { color: var(--text-primary); }
.cart-drawer-cta { width: 100%; min-height: 50px; border-radius: 12px; font-size: 15px; font-weight: 500; margin-top: 6px; }
/* Disabled state must remain legible — the CTA label states the next-step
affordance ("Choose at least one model"), so it cannot be near-invisible. */
/* Trust/policy line under the Reserve CTA — short reassurance for the click. */
.cart-drawer-trust { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--border-default); font-size: 12px; line-height: 1.5; color: var(--text-tertiary); }
.cart-drawer-trust strong { font-weight: 500; color: var(--text-muted); }
.cart-drawer-trust a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; }
.cart-drawer-trust a:hover { color: var(--text-primary); }
@media (max-width: 480px) {
.cart-drawer { left: 0; right: 0; width: 100dvw; border-left: 0; }
.cart-drawer-item { grid-template-columns: 56px minmax(0, 1fr); padding: 16px 18px; }
.cart-item-media { width: 56px; height: 56px; }
.cart-drawer-header { padding: 16px 18px; }
.cart-drawer-footer { padding: 16px 18px 20px; }
}
/* Top navigation — solid on subpages, no scroll-driven fade. */
nav.top { position: sticky; top: 0; left: 0; right: 0; z-index: 50; padding: 20px 32px; display: flex; justify-content: space-between; align-items: center; background: rgba(0,0,0,0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-default); }
.wordmark { display: inline-flex; align-items: center; width: 132px; min-height: 44px; }
.wordmark img { display: block; width: 100%; height: auto; }
.nav-links { display: flex; gap: 18px; align-items: center; }
.nav-links a { color: var(--text-muted); text-decoration: none; font-size: 14px; transition: color .16s var(--ease-out-quart); min-height: 44px; display: inline-flex; align-items: center; }
.nav-links a:hover { color: var(--text-primary); }
@media (max-width: 620px) {
nav.top { padding: 16px 20px; }
.nav-links a.nav-secondary { display: none; }
}
@media (max-width: 420px) {
.nav-links { gap: 8px; }
}
main { display: block; }
.reveal { opacity: 0; transform: translateY(18px); filter: blur(8px); transition: opacity .7s var(--ease-out-expo), transform .7s var(--ease-out-expo), filter .7s var(--ease-out-expo); transition-delay: calc(var(--reveal-delay, 0) * 70ms); }
.reveal.in-view { opacity: 1; transform: translateY(0); filter: blur(0); }
/* ---------------------------------------------------------------------------
Product hero — Aerosound-style split: product visual on the left, the
reservation configurator (copy + model cards + Reserve CTA) on the right.
--------------------------------------------------------------------------- */
/* Aerosound-style product page: a single two-column grid. The sticky cube
lives in the left column while the entire long content stream — copy,
model cards, summary, CTA, AND the detail accordion (Specs / Reservation
details / Delivery / Service) — flows down the right column. This lets
the start of the Specs accordion sit within reach of the fold. */
.product-page { padding: 0; }
.product-page .container { max-width: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; align-items: start; }
/* Left column — product stage. The left grid cell stretches to the full row
height and is floored at one viewport, so its canvas background fills the
column even after the cube has scrolled out of view. */
.hero-stage {
align-self: stretch;
min-height: calc(100vh - var(--product-nav-height, 85px));
background: var(--bg-canvas);
}
/* The cube frame sits in normal document flow, vertically centered within the
first viewport-height of the left column. It scrolls up and out of view with
the page as you scroll down — it is not pinned and does not linger. Because
it lives in its own grid column and is top-anchored (align-items: start on
the grid), opening or closing an accordion in the right column can never
move it: no "ride the bottom" jump, no fixed-position workaround needed. */
.hero-stage-inner {
min-height: calc(100vh - var(--product-nav-height, 85px));
display: flex;
align-items: center;
justify-content: center;
padding: clamp(28px, 3.4vw, 56px);
}
.cube-wrap { width: min(43vw, 620px); aspect-ratio: 1136 / 976; position: relative; flex: 0 0 auto; }
.cube-wrap picture, .cube-wrap canvas, .cube-poster { width: 100%; height: 100%; display: block; background: transparent; image-rendering: auto; }
.cube-wrap picture { position: relative; z-index: 1; }
.cube-poster { object-fit: contain; opacity: 1; transition: opacity .25s ease-out; }
.cube-wrap canvas { position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none; transition: opacity .25s ease-out; }
.cube-wrap.ready canvas { opacity: 1; }
.cube-wrap.ready .cube-poster { opacity: 0; }
/* Right column — the configurator. Showroom poster register: a quiet column
with one primary ruby action and otherwise restrained supporting text. */
.hero-content { grid-column: 2; padding: clamp(48px, 5vw, 96px) clamp(28px, 3.6vw, 72px) clamp(32px, 3vw, 56px); display: flex; flex-direction: column; }
.hero-kicker { margin-bottom: clamp(12px, 1.3vw, 16px); }
.hero-content h1 { font-family: var(--font-sans); font-weight: 300; font-size: clamp(2.75rem, 5.4vw + 0.4rem, 5.5rem); line-height: 0.96; letter-spacing: -0.035em; max-width: 14ch; margin-top: 0; color: var(--text-primary); }
.hero-content h1 .hero-price-accent { color: var(--brand); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -0.04em; }
.hero-subcopy { margin-top: clamp(16px, 1.8vw, 22px); max-width: 48ch; font-size: var(--text-lead); line-height: 1.58; color: var(--text-muted); }
/* Showroom poster cards — one active model detail at a time, matching the
1IN-0 visual direction with a title block, spec ladder, deposit row, and
shared primary Pre-order CTA. The Pro card uses gold accent spec values
so it reads as the more capable tier at a glance. */
.model-cards { margin-top: clamp(28px, 3vw, 38px); display: flex; flex-direction: column; gap: clamp(22px, 2.6vw, 30px); }
/* Badge toggle — Apple-chip style. Both product badges sit in a row; the
selected one shows in full color while the other desaturates and dims, so
the active tier reads at a glance. The badge art itself carries the model
name, so the buttons need no extra text label. */
.model-badges { display: flex; align-self: flex-start; gap: 16px; }
.model-badge {
appearance: none;
padding: 0;
width: 120px;
height: 120px;
border-radius: 0;
border: none;
background: transparent;
cursor: pointer;
line-height: 0;
/* Desaturated + dimmed by default; the selected state lifts it to color. */
filter: grayscale(1) brightness(0.62);
opacity: 0.6;
transition: filter .2s var(--ease-out-quart), opacity .2s var(--ease-out-quart);
}
.model-badge img { width: 100%; height: 100%; display: block; }
.model-badge:hover { filter: grayscale(0.55) brightness(0.82); opacity: 0.85; }
.model-badge[aria-selected="true"] {
filter: none;
opacity: 1;
}
.model-badge:focus-visible { outline: 3px solid color-mix(in oklab, var(--brand) 80%, white); outline-offset: 3px; }
/* Detail block — no card. The chosen model's name, specs, price, and CTA sit
in open space so they breathe. The accent var drives the gold Pro spec
values; default keeps base values in primary text. */
.model-detail {
--detail-accent: var(--text-primary);
display: flex;
flex-direction: column;
gap: clamp(18px, 2vw, 22px);
}
.model-detail.is-pro { --detail-accent: var(--pro); }
.model-detail-head { display: flex; flex-direction: column; gap: 8px; }
.model-detail-head h3 { font-size: clamp(1.625rem, 2.4vw, 1.875rem); font-weight: 600; color: var(--text-primary); letter-spacing: -0.02em; line-height: 1.1; }
.model-detail-tagline {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 400;
color: #8b8799;
line-height: 1.5;
max-width: 42ch;
}
/* Spec ladder — open rows with a single hairline between each, no card edge. */
.model-spec-ladder { display: flex; flex-direction: column; }
.model-spec-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
padding: 12px 0;
border-top: 1px solid var(--border-default);
}
.model-spec-row:last-child { border-bottom: 1px solid var(--border-default); }
.model-spec-row .spec-label {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 400;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-tertiary);
flex-shrink: 0;
}
.model-spec-row .spec-value {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
color: var(--text-primary);
text-align: right;
min-width: 0;
overflow-wrap: anywhere;
}
.model-spec-row .spec-value.is-accent { color: var(--detail-accent); }
/* Price + CTA — in flow, no footer strip. */
.model-detail-foot { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.model-detail-price-row { display: flex; align-items: baseline; gap: 10px; }
.model-detail-price {
font-family: var(--font-mono);
font-size: 1.75rem;
font-weight: 500;
color: var(--text-primary);
letter-spacing: -0.02em;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.model-detail-price-suffix {
font-family: var(--font-mono);
font-size: 9px;
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-tertiary);
}
/* "Pre-order" CTA — page-specific sizing on the shared primary button spec. */
.model-detail-cta {
min-width: 260px;
max-width: 360px;
min-height: 50px;
padding: 12px 32px;
font-size: 15px;
}
/* "View full specs" — quiet link below the spec ladder; opens the manifest
modal. Sits closer to the ladder than the detail gap so it reads as part of
the spec block, not a standalone control. */
.specs-link {
align-self: flex-end;
margin-top: -8px;
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 40px;
padding: 12px 0;
background: none;
border: none;
cursor: pointer;
font-family: var(--font-mono);
font-size: var(--text-label);
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--brand);
transition: color .15s var(--ease-out-quart);
}
.specs-link:hover { color: var(--brand-hover); text-decoration: underline; text-underline-offset: 3px; }
.specs-link svg { width: 11px; height: 11px; }
/* Full-specs modal — centered dialog listing the complete build manifest.
Shares the dim/blur backdrop language with the cart drawer. */
.specs-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .22s var(--ease-out-quart); z-index: 95; }
.specs-overlay.is-open { opacity: 1; pointer-events: auto; }
.specs-modal { position: fixed; top: 50%; left: 50%; width: min(560px, calc(100vw - 32px)); max-height: min(80vh, 760px); transform: translate(-50%, -47%); opacity: 0; pointer-events: none; display: flex; flex-direction: column; overflow: hidden; background: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: 18px; box-shadow: 0 40px 90px -30px rgba(0,0,0,0.8); transition: opacity .22s var(--ease-out-quart), transform .26s var(--ease-out-quint); z-index: 100; }
.specs-modal.is-open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }
.specs-modal-header { flex-shrink: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 24px 16px; border-bottom: 1px solid var(--border-default); }
.specs-modal-title h2 { font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.01em; }
.specs-modal-sub { display: block; margin-top: 5px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-tertiary); }
.specs-modal-close { flex-shrink: 0; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: 10px; color: var(--text-muted); cursor: pointer; transition: color .15s var(--ease-out-quart), background-color .15s var(--ease-out-quart), border-color .15s var(--ease-out-quart); }
.specs-modal-close:hover { color: var(--text-primary); background: rgba(255,255,255,0.04); border-color: var(--border-default); }
.specs-modal-body { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 4px 24px; -webkit-overflow-scrolling: touch; }
.specs-list { list-style: none; margin: 0; padding: 0; }
.specs-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border-default); }
.specs-row:last-child { border-bottom: none; }
.specs-row-name { font-size: var(--text-ui); color: var(--text-primary); }
.specs-row-qty { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--text-tertiary); white-space: nowrap; }
.specs-modal-foot { flex-shrink: 0; padding: 16px 24px 20px; border-top: 1px solid var(--border-default); font-size: 12px; line-height: 1.5; color: var(--text-tertiary); }
/* Fineprint — sits below the cards as one uniform disclosure block. Ship
window, refundability, and shipping notes share a single size and color;
wording matches the homepage FAQ + JSON-LD commitment for late 2026. */
.hero-fineprint { margin-top: clamp(28px, 3vw, 40px); max-width: 60ch; }
.hero-fineprint-text { font-size: 13px; line-height: 1.6; color: var(--text-muted); }
@media (max-width: 900px) {
.product-page .container { grid-template-columns: 1fr; gap: 0; }
/* Single column on mobile: drop the viewport-height floor so the cube
stacks inline above the configurator at its natural height. */
.hero-stage { min-height: 0; }
.hero-stage-inner { min-height: 0; padding: clamp(28px, 6vw, 48px) var(--gutter) clamp(28px, 5vw, 40px); }
.cube-wrap { width: min(420px, 78%); }
.hero-content { padding: clamp(36px, 5vw, 56px) 0 clamp(40px, 4vw, 64px); }
.hero-content h1 { max-width: 20ch; }
.hero-subcopy { max-width: 58ch; }
}
@media (max-width: 540px) {
.model-detail-cta { align-self: stretch; max-width: none; min-width: auto; }
}
/* ---------------------------------------------------------------------------
Product detail accordion — Specs, Reservation details, Delivery, Service.
Lives inside the right column of the product page so the sticky cube on
the left stays anchored while the accordion is scrolled through.
--------------------------------------------------------------------------- */
.details-accordion { margin-top: clamp(20px, 2.4vw, 32px); }
.accordion { border-top: 1px solid var(--border-default); }
.accordion-item { border-bottom: 1px solid var(--border-default); }
.accordion-q { width: 100%; background: none; border: none; color: var(--text-primary); font-family: inherit; font-size: 17px; font-weight: 500; letter-spacing: -0.005em; text-align: left; padding: 18px 6px 18px 0; display: flex; justify-content: space-between; align-items: center; cursor: pointer; gap: 20px; transition: background-color .18s var(--ease-out-quart); }
.accordion-q:hover, .accordion-q:focus-visible { background: color-mix(in oklab, var(--brand) 5%, transparent); }
.accordion-q .plus { color: var(--brand); font-family: var(--font-mono); font-size: 24px; transition: transform .35s var(--ease-out-quart); flex-shrink: 0; line-height: 1; transform-origin: center; }
.accordion-q:hover .plus, .accordion-q:focus-visible .plus { transform: scale(1.16); }
.accordion-item.open .accordion-q .plus { transform: rotate(45deg); }
.accordion-a[hidden] { display: none; }
.accordion-a-inner { padding: 2px 0 28px; }
/* Panel content helpers. */
.panel-intro { font-size: 15px; line-height: 1.62; max-width: 68ch; color: var(--text-muted); }
.panel-intro + .panel-list, .panel-intro + .steplist { margin-top: 22px; }
.panel-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.panel-list li { display: grid; grid-template-columns: 16px 1fr; gap: 12px; font-size: 15px; line-height: 1.55; color: var(--text-muted); }
.panel-list li::before { content: ""; width: 14px; height: 14px; margin-top: 4px; flex-shrink: 0; background: var(--brand); -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; }
.panel-list strong { color: var(--text-primary); font-weight: 600; }
/* Numbered process list for the reservation timeline. */
.steplist { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steplist li { display: grid; grid-template-columns: 30px 1fr; gap: 14px; padding: 16px 0; border-top: 1px solid var(--border-default); }
.steplist li:first-child { border-top: none; padding-top: 0; }
.steplist li::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-family: var(--font-mono); font-size: 12px; color: var(--brand); padding-top: 2px; }
.steplist strong { display: block; color: var(--text-primary); font-weight: 600; font-size: 15px; }
/* Direct child only — nested .js-deposit-amount spans must stay inline so the
deposit number wraps with the rest of the sentence instead of forcing a
break onto its own line. */
.steplist .step-body > span { display: block; margin-top: 4px; color: var(--text-muted); font-size: 14px; line-height: 1.55; }
.panel-note { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border-default); font-size: 13px; line-height: 1.55; color: var(--text-tertiary); }
.panel-note a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; }
.panel-note a:hover { color: var(--text-primary); }
/* Technical specs comparison table — lives inside the Specs accordion panel. */
/* .specs-table styles removed with the Specs accordion item. */
/* Footer — shared with index.html. */
footer { padding: var(--section-pad-y) var(--gutter) 44px; border-top: 1px solid var(--border-default); background: var(--surface-raised); }
.footer-inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(280px, 1fr) auto; gap: 56px; align-items: start; }
.footer-brand { max-width: 430px; }
.footer-brand p { margin-top: 18px; font-size: 14px; color: var(--text-muted); }
.footer-nav { display: grid; grid-template-columns: repeat(3, minmax(140px, 1fr)); gap: 36px 52px; }
.footer-group h2 { margin: 0 0 14px; font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-tertiary); }
.footer-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.footer-group a { color: var(--text-muted); text-decoration: none; font-size: 14px; line-height: 1.4; transition: color .15s; min-height: 44px; display: inline-flex; align-items: center; }
.footer-group a:hover { color: var(--text-primary); }
.footer-bottom { max-width: 1240px; margin: 48px auto 0; padding-top: 22px; border-top: 1px solid color-mix(in oklab, var(--border-default) 82%, transparent); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer-bottom p { font-size: 12px; color: var(--text-tertiary); }
@media (max-width: 760px) {
footer { padding: var(--section-pad-y) 20px 36px; }
.footer-inner { grid-template-columns: 1fr; gap: 40px; }
.footer-bottom { margin-top: 40px; align-items: flex-start; flex-direction: column; }
}
@media (max-width: 420px) { .footer-nav { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation: none !important; transition: none !important; }
.reveal { opacity: 1; transform: none; filter: none; }
.btn:hover { transform: none; }
}