:root {
  color-scheme: light;
  --ink: #25342f;
  --muted: #73817a;
  --line: #dce3d9;
  --paper: #fffefa;
  --forest: #28614f;
  --forest-dark: #1e4f40;
  --moss: #82947b;
  --clay: #bd7658;
  --cream: #f4f2e9;
  --serif: Georgia, 'Times New Roman', serif;
  font-family: 'Avenir Next', 'Helvetica Neue', Arial, 'Noto Sans SC', sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--cream); color: var(--ink); font-size: 14px; line-height: 1.6; }
button, input { font: inherit; }
button { color: inherit; }
[hidden] { display: none !important; }

.page-shell { max-width: 1280px; margin: 0 auto; padding: 0 6.3%; }
.topbar { height: 76px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #dce1d5; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-size: 11px; font-weight: 700; letter-spacing: .15em; }
.brand-mark { width: 33px; height: 33px; display: grid; place-items: center; border: 1px solid var(--forest); border-radius: 50%; color: var(--forest); font: 20px var(--serif); }
.brand-name small { display: block; margin-top: 2px; color: #87938b; font-size: 8px; font-weight: 500; letter-spacing: .22em; }
.local-badge { display: flex; align-items: center; gap: 8px; color: #718078; font-size: 10px; }
.local-badge span { width: 7px; height: 7px; border-radius: 50%; background: #579377; box-shadow: 0 0 0 3px #deebe0; }

.hero { min-height: 290px; display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 46px; padding: 34px 0 25px; }
.hero-copy { padding: 12px 0 6px; }
.eyebrow { margin: 0 0 10px; color: var(--forest); font-size: 9px; font-weight: 700; letter-spacing: .22em; }
.hero h1 { margin: 0; font-size: clamp(31px, 3.7vw, 45px); line-height: 1.27; font-weight: 600; letter-spacing: -.045em; }
.hero h1 em { color: var(--forest); font: 400 1.06em/1.15 var(--serif); letter-spacing: -.02em; }
.hero-copy>p:not(.eyebrow) { max-width: 360px; margin: 15px 0 12px; color: #728078; font-size: 12px; line-height: 1.8; }
.hero-caption { color: #929b91; font-size: 9px; letter-spacing: .04em; }
.hero-art { position: relative; align-self: stretch; min-height: 220px; overflow: hidden; border-radius: 6px; }
.hero-art svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.art-stamp { position: absolute; right: 15px; bottom: 12px; color: #f9f3e4; font: 9px/1.4 var(--serif); letter-spacing: .16em; text-align: right; text-shadow: 0 1px 5px #425945; }

.progress { display: flex; align-items: center; gap: 10px; padding: 16px 0 18px; border-top: 1px solid #dce1d5; border-bottom: 1px solid #dce1d5; }
.progress-step { display: flex; align-items: center; gap: 8px; padding: 5px 0; border: 0; background: none; color: #9aa39a; cursor: default; }
.progress-step span { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid #cbd3c8; border-radius: 50%; font-size: 9px; }
.progress-step b { font-size: 10px; font-weight: 500; white-space: nowrap; }
.progress-step.active { color: var(--forest); }
.progress-step.active span, .progress-step.completed span { border-color: var(--forest); background: var(--forest); color: white; }
.progress-step.completed { color: #526b5e; cursor: pointer; }
.progress>i { height: 1px; flex: 1; min-width: 14px; background: #d9dfd5; }

.discovery-panel { max-width: 900px; min-height: 360px; margin: 0 auto; }
.discovery-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 20px 0; }
.discovery-choice { min-height: 43px; padding: 9px 13px; border: 1px solid #dce2d8; border-radius: 4px; background: var(--paper); color: #52645a; cursor: pointer; text-align: left; }
.discovery-choice:hover, .discovery-choice.selected { border-color: var(--forest); background: #e8efe6; color: var(--forest-dark); }
.discovery-choice.selected::after { content: " ✓"; font-weight: 700; }
.discovery-fields { display: grid; gap: 10px; }
.discovery-number, .priority-select { display: grid; gap: 6px; color: #66766d; font-size: 11px; }
.discovery-number input, .priority-select select, .filter-select input, .filter-select select, .discovery-fields textarea { width: 100%; min-height: 39px; padding: 8px 10px; border: 1px solid #dce2d8; border-radius: 3px; background: var(--paper); color: var(--ink); }
.discovery-fields textarea { min-height: 70px; resize: vertical; }
.discovery-actions { justify-content: flex-end; }
.discovery-filters { grid-template-columns: 1fr; }
.discovery-filter-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.filter-select { display: grid; gap: 5px; color: #66766d; font-size: 10px; }
#question-count { margin-left: auto; color: var(--muted); font-size: 10px; }

.step-panel { padding: 30px 0 36px; animation: appear .3s ease-out; }
@keyframes appear { from { opacity: .6; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.section-heading { margin-bottom: 22px; }
.section-heading .eyebrow { margin-bottom: 6px; }
.section-heading h2 { margin: 0; font-size: 25px; line-height: 1.4; letter-spacing: -.035em; font-weight: 600; }
.section-heading>p:last-child { margin: 6px 0 0; color: #78847d; font-size: 11px; }

.choice-grid { display: grid; gap: 11px; }
.vision-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choice-card { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; text-align: left; border: 1px solid #dfe4db; border-radius: 5px; background: var(--paper); cursor: pointer; transition: border-color .16s, background .16s, transform .16s, box-shadow .16s; }
.choice-card:hover { transform: translateY(-2px); border-color: #aebead; box-shadow: 0 6px 16px rgba(52, 78, 58, .07); }
.vision-card { min-height: 112px; padding: 14px 13px; }
.choice-card[aria-pressed="true"] { border-color: #6f9681; background: #f2f6ee; box-shadow: inset 0 0 0 1px #6f9681; }
.choice-card>span:nth-child(2) { display: block; min-width: 0; padding-right: 10px; }
.choice-card b { display: block; font-size: 12px; font-weight: 600; line-height: 1.5; }
.choice-card small { display: block; margin-top: 3px; color: #87928a; font-size: 9px; line-height: 1.5; }
.choice-illustration { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; }
.choice-illustration svg { width: 35px; height: 28px; fill: none; stroke: #55775e; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.choice-illustration.sage { background: #e3ecdc; }
.choice-illustration.apricot { background: #f3e7d5; }
.choice-illustration.apricot svg { stroke: #a2754f; }
.choice-illustration.blue { background: #e1ebeb; }
.choice-illustration.blue svg { stroke: #587f83; }
.choice-illustration.rose { background: #f1e1dc; }
.choice-illustration.rose svg { stroke: #9a6558; }
.choice-illustration.lilac { background: #eae6ef; }
.choice-illustration.lilac svg { stroke: #756a86; }
.choice-illustration.sand { background: #ede9dc; }
.choice-illustration.sand svg { stroke: #897f64; }
.checkmark { position: absolute; top: 8px; right: 9px; width: 17px; height: 17px; display: grid; place-items: center; border: 1px solid #d9dfd8; border-radius: 50%; color: transparent; font-size: 10px; }
.choice-card[aria-pressed="true"] .checkmark { border-color: var(--forest); background: var(--forest); color: white; }

.evidence-boundary { display: flex; align-items: flex-start; gap: 9px; margin: 17px 0 0; padding: 11px 13px; border-left: 2px solid #b68a60; background: #f7f1e4; color: #786d5e; font-size: 10px; line-height: 1.65; }
.evidence-boundary>span { flex: none; width: 15px; height: 15px; display: grid; place-items: center; border: 1px solid #ab8e68; border-radius: 50%; font: 10px var(--serif); }
.wizard-actions { display: flex; align-items: center; gap: 10px; margin-top: 22px; }
.wizard-actions>span:first-child { flex: 1; }
.text-button { padding: 9px 8px; border: 0; background: transparent; color: #62766a; cursor: pointer; font-size: 10px; }
.text-button:hover { color: var(--forest-dark); text-decoration: underline; }
.primary-button { min-width: 132px; height: 41px; display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 0 14px; border: 0; border-radius: 3px; background: var(--forest); color: white; cursor: pointer; font-size: 11px; font-weight: 600; transition: background .16s, transform .16s; }
.primary-button:hover { transform: translateY(-1px); background: var(--forest-dark); }
.primary-button span { font-size: 17px; font-weight: 400; }
.primary-button:disabled { opacity: .6; cursor: wait; transform: none; }

.experience-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 0 38px; padding: 2px 0; }
.experience-group { min-width: 0; margin: 0; padding: 16px 0 17px; border: 0; border-bottom: 1px solid #dfe3d9; }
.experience-group legend { width: 100%; padding: 0; margin-bottom: 11px; font-size: 12px; font-weight: 600; }
.experience-group legend span, .distance-field>span:first-child>b { margin-right: 9px; color: #a2a99e; font: 10px var(--serif); letter-spacing: .08em; }
.pill-options { display: flex; flex-wrap: wrap; gap: 7px; }
.pill-options button { min-height: 33px; padding: 6px 12px; border: 1px solid #dce2d8; border-radius: 18px; background: #fffefa; color: #6d7b72; cursor: pointer; font-size: 10px; transition: all .15s; }
.pill-options button:hover { border-color: #9caf9f; color: var(--forest); }
.pill-options button[aria-pressed="true"] { border-color: var(--forest); background: #e8efe6; color: var(--forest-dark); box-shadow: inset 0 0 0 1px var(--forest); }
.distance-field { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 0 9px; }
.distance-field>span:first-child { font-size: 12px; font-weight: 600; }
.distance-field small { display: block; margin: 4px 0 0 24px; color: #869189; font-size: 9px; font-weight: 400; }
.distance-input, .height-input, .money-input { display: flex; align-items: center; background: #fffefa; border: 1px solid #dbe1d8; border-radius: 3px; }
.distance-input { width: 190px; height: 38px; }
.distance-input input, .height-input input { width: 100%; min-width: 0; height: 36px; padding: 0 10px; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 11px; }
.distance-input span, .height-input span { flex: none; padding: 0 10px; color: #87928a; font-size: 10px; }
.distance-input:focus-within, .height-input:focus-within, .money-input:focus-within { border-color: #779681; box-shadow: 0 0 0 3px rgba(40, 97, 79, .08); }

.conditions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.condition-card { min-width: 0; min-height: 142px; margin: 0; padding: 15px 16px; border: 1px solid #dfe4db; border-radius: 4px; background: var(--paper); }
.condition-card> b, .condition-card legend>b, .mode-panel>div:first-child>b { display: block; margin: 5px 0 9px; font-size: 13px; font-weight: 600; }
.condition-number { display: block; color: #99a198; font-size: 9px; letter-spacing: .06em; }
.condition-card small, .condition-card legend small, .mode-panel small { display: block; color: #87928a; font-size: 9px; font-weight: 400; line-height: 1.55; }
.budget-card .money-input { height: 37px; margin-top: 9px; }
.money-input>span { padding: 0 9px; color: #728078; font-size: 11px; }
.money-input input { width: 100%; height: 35px; min-width: 0; padding: 0 9px 0 0; border: 0; outline: 0; background: transparent; font-size: 11px; }
.budget-card>small, .height-card>small { margin-top: 6px; }
.condition-card legend { padding: 0; }
.condition-card .compact { margin-top: 12px; }
.pill-options.compact { gap: 6px; }
.pill-options.compact button { min-height: 30px; padding: 5px 10px; font-size: 9px; }
.height-input { height: 37px; margin-top: 9px; }
.mode-panel { display: grid; grid-template-columns: .72fr 1.28fr; gap: 20px; margin-top: 15px; padding: 16px; border: 1px solid #dfe4db; border-radius: 4px; background: #f9faf5; }
.mode-panel>div:first-child>b { margin: 3px 0 4px; font-size: 12px; }
.mode-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mode-option { position: relative; display: flex; gap: 8px; align-items: flex-start; padding: 10px; border: 1px solid #dfe4db; border-radius: 3px; background: var(--paper); cursor: pointer; }
.mode-option.selected { border-color: #86a08d; background: #f0f5ee; }
.mode-option input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.radio-dot { flex: none; width: 14px; height: 14px; margin-top: 2px; border: 1px solid #adb8ad; border-radius: 50%; background: white; }
.mode-option.selected .radio-dot { border: 4px solid var(--forest); }
.mode-option>span:last-child>b { display: block; font-size: 10px; }
.mode-option>span:last-child>small { margin-top: 3px; font-size: 8px; }
.form-error { margin: 12px 0 0; color: #a44832; font-size: 10px; }

.results-panel { max-width: 920px; margin: 0 auto; }
.results-heading { margin-bottom: 18px; }
.expectation-summary { margin-bottom: 12px; padding: 13px 15px; border: 1px solid #dce3d7; border-radius: 4px; background: #edf1e7; }
.expectation-summary h3 { margin: 0 0 7px; font-size: 10px; color: #5e7164; }
.expectation-summary p { margin: 0; color: #34443a; font-size: 10px; line-height: 1.7; }
.expectation-summary small { display: block; margin-top: 7px; color: #8a7760; font-size: 9px; }
.results-content { min-height: 120px; padding-top: 14px; }
.result-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; padding: 12px 14px; border: 1px solid #dce4d9; border-radius: 3px; background: #f9faf5; }
.result-summary strong { font-size: 12px; }
.result-summary span { color: #7d8980; font-size: 9px; text-align: right; }
.candidate-card { margin-bottom: 10px; padding: 17px 18px; border: 1px solid #dfe4db; border-radius: 4px; background: var(--paper); }
.candidate-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.candidate-top h3 { margin: 0; font-size: 14px; }
.config-name { margin: 3px 0 0; color: #77847b; font-size: 10px; }
.price { flex: none; color: var(--forest); font-size: 18px; font-weight: 700; letter-spacing: -.03em; text-align: right; }
.price-label { display: block; margin-top: 3px; color: #9a7053; font-size: 8px; font-weight: 500; letter-spacing: 0; }
.candidate-facts { display: grid; grid-template-columns: 100px 1fr; gap: 8px 10px; margin: 13px 0 0; padding-top: 12px; border-top: 1px solid #edf0e9; font-size: 10px; }
.candidate-facts dt { color: #879188; }
.candidate-facts dd { min-width: 0; margin: 0; color: #35453b; overflow-wrap: anywhere; }
.fact-list, .source-links { display: flex; flex-wrap: wrap; gap: 5px; }
.fact-chip { padding: 3px 7px; border-radius: 2px; background: #eff3e9; color: #42694f; font-size: 9px; }
.fact-chip em { padding-right: 4px; color: #829085; font-style: normal; }
.source-chip { padding: 3px 7px; border: 1px solid #dbe3d8; border-radius: 2px; color: #60756a; font-size: 9px; }
.source-chip button { padding: 0; border: 0; background: transparent; color: inherit; cursor: help; font: inherit; }
.unknown-box, .notice-box, .no-match-box, .error-box { margin-top: 10px; padding: 11px 12px; border-radius: 3px; font-size: 10px; line-height: 1.65; }
.unknown-box { border: 1px solid #e3e7df; background: #f7f8f4; color: #737f76; }
.unknown-box strong { font-weight: 600; }
.blocker-list { margin: 6px 0 0; padding-left: 16px; }
.notice-box { border: 1px solid #e8e0cc; background: #f8f3e7; color: #796f58; }
.no-match-box { margin-top: 0; padding: 22px; border: 1px solid #e0e5dc; background: var(--paper); text-align: center; }
.no-match-box strong { display: block; font-size: 15px; }
.no-match-box p { max-width: 540px; margin: 7px auto 0; color: #7a867e; font-size: 10px; }
.no-match-box .blocker-list { display: inline-block; text-align: left; color: #6e7971; }
.error-box { border: 1px solid #efd1c5; background: #fff0eb; color: #8c4f37; }
.loading-state { display: grid; justify-items: center; padding: 34px 16px; color: #758278; text-align: center; }
.loading-spinner { width: 30px; height: 30px; border: 2px solid #ced9cd; border-top-color: var(--forest); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.results-actions { padding-top: 10px; border-top: 1px solid #dce1d5; }
.site-footer { display: flex; justify-content: space-between; padding: 15px 0 20px; border-top: 1px solid #dce1d5; color: #879289; font-size: 9px; letter-spacing: .03em; }

@media (max-width: 900px) {
  .page-shell { padding: 0 4.5%; }
  .hero { grid-template-columns: .9fr 1.1fr; gap: 25px; }
  .vision-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mode-panel { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 650px) {
  .page-shell { padding: 0 18px; }
  .topbar { height: 64px; }
  .local-badge { font-size: 0; }
  .local-badge span { margin-right: 3px; }
  .hero { grid-template-columns: 1fr; gap: 17px; padding: 29px 0 21px; }
  .hero h1 { font-size: 34px; }
  .hero-copy>p:not(.eyebrow) { margin: 10px 0 6px; }
  .hero-art { min-height: 185px; }
  .progress { gap: 5px; padding: 13px 0; }
  .progress-step { gap: 5px; }
  .progress-step span { width: 23px; height: 23px; font-size: 8px; }
  .progress-step b { font-size: 8px; }
  .progress>i { min-width: 5px; }
  .step-panel { padding: 24px 0 30px; }
  .section-heading h2 { font-size: 22px; }
  .vision-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .vision-card { min-height: 116px; flex-direction: column; align-items: flex-start; gap: 7px; padding: 11px; }
  .choice-illustration { width: 38px; height: 38px; }
  .choice-illustration svg { width: 29px; height: 24px; }
  .choice-card b { font-size: 10px; }
  .choice-card small { font-size: 8px; }
  .experience-groups { grid-template-columns: 1fr; }
  .discovery-options, .discovery-filter-controls { grid-template-columns: 1fr; }
  .distance-field { grid-column: auto; }
  .conditions-grid { grid-template-columns: 1fr; }
  .condition-card { min-height: 126px; }
  .mode-options { grid-template-columns: 1fr; }
  .wizard-actions { gap: 4px; flex-wrap: wrap; }
  .text-button { padding: 8px 5px; font-size: 9px; }
  .primary-button { min-width: 112px; }
  .candidate-facts { grid-template-columns: 82px 1fr; }
  .candidate-card { padding: 14px 13px; }
}
@media (max-width: 390px) {
  .page-shell { padding: 0 14px; }
  .vision-grid { grid-template-columns: 1fr; }
  .vision-card { min-height: 85px; flex-direction: row; align-items: center; padding: 10px 12px; }
  .progress-step b { font-size: 7px; }
  .progress { gap: 3px; }
  .progress-step { gap: 4px; }
  .candidate-top { gap: 8px; }
  .price { font-size: 16px; }
  .site-footer { gap: 14px; font-size: 8px; }
}

/* V0.4 landing page */
:root {
  color-scheme: light;
  --ink: #111214;
  --muted: #6e7075;
  --line: #e6e7e9;
  --paper: #fff;
  --forest: #1b1c1f;
  --forest-dark: #3d3f43;
  --cream: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, 'Noto Sans SC', sans-serif;
}

html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { background: #fff; color: var(--ink); font-size: 15px; }
.page-shell { max-width: 1440px; padding: 0 6.7%; }
.topbar { position: sticky; z-index: 5; top: 0; height: 68px; gap: 22px; border-color: #ededee; background: rgba(255, 255, 255, .94); backdrop-filter: blur(16px); }
.brand { gap: 9px; font-size: 10px; letter-spacing: .12em; }
.brand-mark { width: 31px; height: 31px; border-color: #1b1c1f; color: #1b1c1f; }
.brand-name small { color: #898b90; font-size: 8px; }
.main-nav { display: flex; align-items: center; gap: clamp(16px, 3vw, 38px); }
.main-nav a { color: #4e5055; font-size: 12px; text-decoration: none; transition: color .18s ease; }
.main-nav a:hover { color: #111214; }
.hero { min-height: 560px; grid-template-columns: .86fr 1.14fr; gap: 5%; padding: 74px 0 68px; }
.hero-copy { padding: 0; }
.eyebrow { color: #777a80; font-size: 10px; letter-spacing: .17em; }
.hero h1 { max-width: 560px; font-size: clamp(42px, 5vw, 68px); line-height: 1.18; font-weight: 600; letter-spacing: -.055em; }
.hero-copy>p:not(.eyebrow) { max-width: 390px; margin: 20px 0 28px; color: #6b6d72; font-size: 16px; line-height: 1.85; }
.hero-actions { display: flex; align-items: center; gap: 12px; }
.hero-actions .primary-button, .hero-actions .secondary-button { min-width: 132px; height: 43px; justify-content: center; border-radius: 22px; font-size: 13px; text-decoration: none; }
.hero-actions .primary-button { background: #161719; }
.hero-actions .primary-button:hover { background: #3b3d40; }
.secondary-button { display: inline-flex; align-items: center; gap: 13px; padding: 0 17px; border: 1px solid #d9dade; background: white; color: #24262a; transition: background .18s, border-color .18s, transform .18s; }
.secondary-button:hover { transform: translateY(-1px); border-color: #b8babf; background: #f8f8f9; }
.hero-art { position: relative; align-self: center; width: 100%; min-width: 0; margin: 0; overflow: hidden; border-radius: 10px; background: #eeedef; }
.hero-art img { display: block; width: 100%; aspect-ratio: 1.5; object-fit: cover; transition: transform .65s cubic-bezier(.2,.7,.2,1); }
.hero-art:hover img { transform: scale(1.025); }
.hero-art figcaption { position: absolute; right: 12px; bottom: 10px; padding: 5px 9px; border-radius: 4px; background: rgba(255,255,255,.82); color: #686a6e; font-size: 10px; backdrop-filter: blur(8px); }
.model-section { padding: 58px 0 72px; border-top: 1px solid #eeeeef; }
.model-heading { margin-bottom: 30px; }
.section-heading h2, .ask-copy h2, .about-section h2 { font-size: clamp(28px, 3.4vw, 43px); line-height: 1.25; letter-spacing: -.045em; }
.model-heading>p:last-child { margin-top: 9px; font-size: 13px; }
.product-rail { display: flex; gap: 18px; overflow-x: auto; padding: 4px 2px 18px; scroll-snap-type: x mandatory; scrollbar-color: #c9cace #f3f3f4; scrollbar-width: thin; }
.product-card { flex: 0 0 min(37%, 410px); min-width: 300px; overflow: hidden; scroll-snap-align: start; border: 1px solid #e9e9eb; border-radius: 10px; background: #fff; box-shadow: 0 2px 10px rgba(20, 22, 26, .035); transition: transform .22s ease, box-shadow .22s ease; }
.product-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(20, 22, 26, .09); }
.product-card>img { display: block; width: 100%; aspect-ratio: 1.48; object-fit: cover; background: #ededef; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.product-card:hover>img { transform: scale(1.025); }
.product-copy { padding: 18px 20px 20px; }
.product-kicker { margin: 0 0 5px; color: #8a8b90; font-size: 9px; font-weight: 600; letter-spacing: .15em; }
.product-copy h3 { margin: 0 0 12px; font-size: 22px; font-weight: 600; letter-spacing: -.035em; }
.model-power, .model-price { margin: 4px 0; color: #4e5055; font-size: 12px; }
.price-note, .catalog-disclaimer { color: #888a8f; font-size: 10px; line-height: 1.7; }
.price-note { margin: 5px 0 14px; }
.model-details { border-top: 1px solid #ededee; color: #33353a; font-size: 12px; }
.model-details summary { padding: 12px 0 2px; color: #3d5ea8; cursor: pointer; list-style-position: inside; }
.model-configurations { padding-top: 8px; }
.configuration-record { padding: 11px 0; border-bottom: 1px solid #eeeef0; }
.configuration-record h4 { margin: 0 0 4px; font-size: 12px; font-weight: 600; }
.configuration-record p { margin: 3px 0; color: #696b70; font-size: 10px; line-height: 1.65; overflow-wrap: anywhere; }
.configuration-record .configuration-price { color: #24262a; font-size: 12px; font-weight: 600; }
.configuration-record .configuration-source { color: #8b8d92; }
.catalog-disclaimer { margin: 11px 2px 0; }
.ask-section { display: grid; grid-template-columns: .78fr 1.22fr; gap: 8%; padding: 60px 6%; border-radius: 12px; background: #f5f5f7; }
.ask-copy h2 { margin: 9px 0 12px; }
.ask-copy>p:last-child { color: #6f7176; font-size: 13px; }
.ask-form textarea { display: block; width: 100%; min-height: 106px; resize: vertical; padding: 16px; border: 1px solid #dedfe2; border-radius: 8px; outline: 0; background: #fff; color: #17181b; font: inherit; font-size: 13px; transition: border-color .18s, box-shadow .18s; }
.ask-form textarea:focus { border-color: #8a8c92; box-shadow: 0 0 0 3px rgba(0,0,0,.05); }
.question-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }
.question-chips button { padding: 8px 11px; border: 1px solid #dedfe2; border-radius: 18px; background: #fff; color: #515359; cursor: pointer; font-size: 10px; transition: border-color .18s, background .18s, transform .18s; }
.question-chips button:hover { transform: translateY(-1px); border-color: #b9bbc0; background: #fafafa; }
.chat-scope { display: flex; align-items: center; gap: 12px; color: #6e7075; font-size: 11px; }
.chat-scope select { max-width: 100%; padding: 7px 10px; border: 1px solid #dedfe2; border-radius: 6px; background: white; font: inherit; }
.chat-privacy { color: #77797f; font-size: 10px; line-height: 1.7; }
.chat-tools { display: flex; gap: 14px; margin-top: 12px; }
.chat-tools button { padding: 5px 0; border: 0; background: none; color: #45619a; cursor: pointer; font: inherit; font-size: 11px; }
.chat-tools button:disabled { opacity: .5; cursor: wait; }
.chat-messages { display: grid; gap: 12px; margin-top: 18px; max-height: 620px; overflow-y: auto; overflow-wrap: anywhere; }
.chat-question, .chat-answer, .chat-error { margin: 0; padding: 14px 16px; border-radius: 8px; font-size: 12px; white-space: pre-wrap; }
.chat-question { background: #e7e8ec; color: #303238; }
.chat-answer { border: 1px solid #e3e4e7; background: white; color: #45474c; }
.chat-answer p { margin: 8px 0 0; }
.chat-label { color: #77797f; font-size: 10px; }
.chat-source { display: block; margin-top: 8px; color: #888b90; font-size: 9px; }
.chat-error { background: #fff0ec; color: #944b36; }
.ask-submit-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.ask-submit-row p { margin: 0; color: #77797f; font-size: 10px; line-height: 1.6; }
.ask-submit-row .primary-button { flex: none; min-width: 132px; justify-content: center; border-radius: 22px; background: #161719; }
.about-section { max-width: 760px; margin: 0 auto; padding: 88px 0 82px; text-align: center; }
.about-section h2 { margin: 8px 0 14px; }
.about-section>p:last-child { color: #707278; font-size: 13px; line-height: 1.9; }
.legacy-tools { margin: 0 0 48px; border: 1px solid #e8e8ea; border-radius: 8px; background: #fafafa; }
.legacy-tools>summary { padding: 15px 18px; color: #686a70; cursor: pointer; font-size: 12px; }
.legacy-content { padding: 0 20px 20px; }
.legacy-note { color: #797b81; font-size: 11px; }
.legacy-tools .progress { margin-top: 14px; }
.site-footer { border-color: #ededee; color: #898b90; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; clip-path: inset(50%); }
[data-reveal].reveal-ready { opacity: 0; transform: translateY(14px); transition: opacity .65s ease, transform .65s ease; }
[data-reveal].reveal-ready.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 800px) {
  .page-shell { padding: 0 5%; }
  .hero { min-height: 0; grid-template-columns: 1fr; gap: 28px; padding: 54px 0 50px; }
  .hero-copy { max-width: 650px; }
  .hero-art { width: min(100%, 760px); }
  .product-card { flex-basis: min(70%, 390px); }
  .ask-section { grid-template-columns: 1fr; gap: 20px; padding: 38px 6%; }
}
@media (max-width: 560px) {
  html { scroll-padding-top: 12px; }
  .page-shell { padding: 0 18px; }
  .topbar { height: 60px; gap: 10px; }
  .brand { gap: 6px; font-size: 8px; letter-spacing: .08em; }
  .brand-mark { width: 27px; height: 27px; font-size: 17px; }
  .brand-name small { font-size: 7px; letter-spacing: .13em; }
  .main-nav { gap: 13px; }
  .main-nav a { font-size: 10px; white-space: nowrap; }
  .hero { gap: 22px; padding: 44px 0 38px; }
  .hero h1 { font-size: clamp(37px, 10vw, 49px); }
  .hero-copy>p:not(.eyebrow) { margin: 14px 0 20px; font-size: 14px; }
  .hero-art, .product-card { border-radius: 8px; }
  .hero-art img { aspect-ratio: 1.2; object-fit: cover; }
  .hero-art figcaption { max-width: calc(100% - 18px); font-size: 8px; }
  .model-section { padding: 42px 0 48px; }
  .section-heading h2, .ask-copy h2, .about-section h2 { font-size: 30px; }
  .model-heading { margin-bottom: 20px; }
  .product-rail { gap: 12px; margin-right: -18px; padding-right: 18px; }
  .product-card { flex-basis: 84%; min-width: min(84%, 290px); }
  .product-copy { padding: 15px; }
  .ask-section { margin: 0 -4px; padding: 30px 20px; }
  .ask-submit-row { align-items: flex-start; flex-direction: column; }
  .about-section { padding: 58px 4px; }
  .legacy-content { padding: 0 12px 16px; }
  .site-footer { flex-direction: column; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-reveal].reveal-ready { opacity: 1; transform: none; }
}

/* Progressive exploration, batch A. Legacy tool styles remain available. */
.exploration-page { background:#f8f8f6; color:#202321; font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; margin:0; }
.exploration-page [hidden] { display:none !important; }
.exploration-page button { font:inherit; cursor:pointer; }
.explore-header,.explore-footer { max-width:1440px; margin:auto; padding:28px 5%; display:flex; justify-content:space-between; align-items:center; }
.explore-header a { color:inherit; text-decoration:none; font-size:18px; font-weight:650; letter-spacing:2px; }
.explore-header a span { display:block; font-size:10px; letter-spacing:3px; margin-top:5px; font-weight:400; }
.explore-header>span,.explore-footer { font-size:12px; color:#71776f; }
.explore-panel { max-width:1440px; padding:65px 5% 55px; margin:auto; animation:explore-in .4s ease both; }
.explore-step { font-size:11px; letter-spacing:2px; color:#687466; margin-bottom:22px; }
.exploration-page h1,.exploration-page h2 { font-size:clamp(34px,4.8vw,70px); letter-spacing:-2px; line-height:1.18; font-weight:600; margin:0; }
.explore-intro { color:#73796f; font-size:16px; margin:22px 0 45px; }
.scene-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.scene-tile { border:0; border-radius:18px; padding:26px 18px 22px; text-align:left; transition:transform .25s,box-shadow .25s; color:#344338; }
.scene-tile:hover { transform:translateY(-6px); box-shadow:0 18px 35px #283a2b12; }
.scene-tile svg { width:100%; height:auto; margin:12px 0 32px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linejoin:round; stroke-linecap:round; }
.scene-tile svg circle { fill:#ffffff35; }
.scene-tile span { display:flex; justify-content:space-between; font-size:19px; font-weight:500; }
.scene-tile b { font-weight:400; opacity:.6; }
.city { background:#e7e9e2; }.weekend { background:#dce5da; }.journey { background:#e6e6dd; }.sport { background:#e0e6e8; }
.scene-bottom { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:26px; }
.scene-bottom p,.explore-footnote { color:#777d74; font-size:11px; line-height:1.8; }
.scene-bottom p span { display:block; }
.explore-link { background:none; border:0; padding:12px 0; color:#344a36; font-size:14px; }
.back-link { margin-bottom:25px; }
.explore-model-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.explore-model-card[data-product-id="vapor"] { order:0; }
.explore-model-card[data-product-id="vapor-super-light"] { order:1; }
.explore-model-card[data-product-id="nomad"] { order:2; }
.explore-model-card[data-product-id="oi"] { order:3; }
.explore-model-card { position:relative; overflow:hidden; border:1px solid transparent; background:#fff; padding:0 0 28px; border-radius:20px; text-align:center; color:#202321; transition:border-color .2s,transform .2s; }
.explore-model-card:hover { transform:translateY(-3px); }
.explore-model-card[aria-pressed="true"] { border-color:#3e6045; box-shadow:0 0 0 2px #3e6045; }
.explore-model-card img { display:block; width:100%; height:clamp(200px,28vw,370px); object-fit:contain; }
.explore-model-card h3 { font-size:23px; margin:16px 12px 10px; font-weight:550; }
.concept-label { font-size:10px; color:#7e847a; letter-spacing:1px; }
.model-visual { position:relative; isolation:isolate; }
.model-caption { position:absolute; inset:auto 0 0; display:flex; justify-content:center; align-items:center; padding:42px 10px 22px; color:white; background:linear-gradient(transparent,#162019b8); font-size:clamp(13px,1.3vw,19px); line-height:1.8; font-weight:500; }
.caption-letter { display:inline-block; position:relative; transform-origin:center; transition:transform .18s ease,color .18s ease; }
@media(hover:hover) and (pointer:fine) { .caption-letter:hover { transform:translateY(-3px) scale(1.4); color:#e0f6c7; z-index:1; } }
@media(prefers-reduced-motion:reduce) { .caption-letter:hover { transform:none; } }
.model-select-label { font-size:12px; color:#4e6650; }
.model-height { font-size:12px; color:#73796f; margin:0 8px 16px; line-height:1.6; }
.model-next { padding:28px 0 8px; text-align:center; }
.explore-primary { border:0; border-radius:30px; background:#2b4331; color:white; padding:15px 28px; font-size:14px; }
#selected-model { font-size:15px; }#config-notice { font-size:13px; color:#64715f; }
.explore-footnote { margin-top:28px; text-align:center; }
.exploration-page :focus-visible { outline:3px solid #668c65; outline-offset:5px; }
.exploration-page h1:focus,.exploration-page h2:focus { outline:none; }
@keyframes explore-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:700px) { .explore-header { padding:22px 6%; }.explore-header>span { display:none; }.explore-panel { padding:36px 6%; }.scene-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.scene-tile { padding:10px 15px 20px; }.scene-tile svg { margin:8px 0 12px; }.scene-tile span { font-size:16px; }.scene-bottom { align-items:flex-start; flex-direction:column; gap:4px; }.explore-model-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.explore-model-card img { height:clamp(130px,32vw,230px); }.explore-model-card h3 { font-size:16px; overflow-wrap:anywhere; }.model-caption { flex-wrap:wrap; padding:24px 8px 12px; font-size:11px; }.explore-footer span:last-child { display:none; }.explore-intro { margin-bottom:30px; } }
@media(prefers-reduced-motion:reduce) { .explore-panel { animation:none; }.exploration-page * { transition:none !important; scroll-behavior:auto !important; } }

/* Immersive brand entry. Images can be replaced without changing the carousel. */
.brand-home { position:relative; width:100%; min-height:100svh; height:100vh; height:100svh; overflow:hidden; background:#283b35; color:#fff; isolation:isolate; }
.hero-backgrounds,.hero-shade { position:absolute; inset:0; z-index:-1; }
.hero-background { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.2s ease; }
.hero-background[data-active="true"] { opacity:1; }
.hero-shade { background:linear-gradient(90deg,#0b171acc,transparent 85%),linear-gradient(0deg,#0b171a99,transparent 40%); }
.hero-nav { position:absolute; top:0; left:0; padding:38px 5%; display:flex; flex-direction:column; gap:20px; }
.hero-nav>span { font-size:22px; letter-spacing:2px; font-weight:600; }
.hero-nav button,.hero-arrows button,.hero-dot { border:0; color:inherit; background:transparent; }
.hero-nav button { padding:0; text-align:left; font-size:13px; letter-spacing:1px; }
.hero-nav button:hover { text-decoration:underline; text-underline-offset:6px; }
.brand-slogan { position:absolute; left:8%; top:44%; transform:translateY(-50%); }
.brand-slogan>p { font-size:10px; letter-spacing:4px; opacity:.65; margin:0 0 28px; }
.brand-slogan h1 { font-size:clamp(45px,6.5vw,100px); letter-spacing:-3px; line-height:1.16; font-weight:500; margin:0 0 25px; }
.brand-slogan>span { font-size:clamp(14px,1.4vw,20px); opacity:.8; letter-spacing:1px; }
.hero-bottom { position:absolute; left:8%; right:6%; bottom:75px; display:flex; align-items:flex-end; justify-content:space-between; gap:32px; }
.hero-scene>span { font-size:25px; font-weight:500; letter-spacing:3px; }.hero-scene p { font-size:13px; opacity:.7; margin:13px 0 0; letter-spacing:2px; }
.hero-controls { display:flex; align-items:center; gap:25px; }.hero-controls>span { font-size:11px; letter-spacing:2px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.hero-progress { display:flex; gap:7px; }.hero-dot { position:relative; width:42px; height:44px; padding:0; }
.hero-dot::after { content:''; position:absolute; height:2px; left:0; right:0; top:21px; background:#ffffff45; transition:background .3s; }.hero-dot[aria-current="true"]::after { background:#fff; }
.hero-arrows { display:flex; align-items:center; gap:5px; }.hero-arrows button { min-width:44px; min-height:44px; padding:10px; font-size:16px; }.hero-arrows #hero-pause { font-size:12px; }
.hero-disclaimer { position:absolute; left:8%; bottom:24px; font-size:10px; opacity:.58; letter-spacing:.5px; }
.exploration-page .hero-nav :focus-visible,.exploration-page .hero-controls :focus-visible { outline-color:#fff; }
@media(max-width:700px) { .hero-nav { padding:28px 7%; gap:16px; }.brand-slogan { left:7%; top:43%; }.brand-slogan h1 { letter-spacing:-2px; }.brand-slogan>p { font-size:8px; letter-spacing:2px; }.hero-bottom { left:7%; right:7%; bottom:75px; flex-direction:column; align-items:stretch; gap:20px; }.hero-scene>span { font-size:22px; }.hero-scene p { margin-top:6px; }.hero-controls { gap:12px; justify-content:space-between; }.hero-dot { width:25px; }.hero-arrows { gap:0; }.hero-arrows button { padding:6px; min-width:36px; }.hero-disclaimer { left:7%; right:7%; font-size:9px; bottom:20px; }.hero-background { object-position:65% center; } }
@media(prefers-reduced-motion:reduce) { .hero-background { transition:none; } }

.hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; }
#video-status { font-size:12px; color:#ffffffb3; }

/* STEP 02: sourced versions; no structural image transformations or recoloring. */
.explore-model-card { background:radial-gradient(ellipse at 50% 15%,#fff,#f3f5f1 80%); }
.explore-model-card[data-selected="true"] { border-color:#3e6045; box-shadow:0 0 0 2px #3e6045; }
@media(hover:hover) and (pointer:fine) { .explore-model-card:hover,.explore-model-card:focus-within { transform:translateY(-4px) scale(1.015); box-shadow:0 16px 45px #243c2918; } }
.garage-controls { padding:8px 24px 18px; }
.garage-fit { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; font-size:12px; }
.garage-fit select { font:inherit; border:1px solid #b9b9b3; border-radius:6px; padding:3px 6px; background:transparent; color:inherit; }
.garage-options { display:flex; flex-wrap:wrap; justify-content:center; gap:7px; }
.garage-option,.garage-select { background:transparent; border:1px solid #ccd5ca; border-radius:20px; padding:7px 13px; font-size:12px; }
.garage-option[aria-pressed="true"] { background:#304a37; color:#fff; border-color:#304a37; }
.garage-select { color:#304a37; padding:9px 22px; background:#fff; }
.garage-configuration { font-size:13px; margin:14px 0 4px; }
.garage-price { font-size:13px; margin:4px 0 14px; color:#3e6045; }
.garage-label,.garage-single { font-size:12px; color:#5e6e60; }
.garage-color-status,.garage-image-note { font-size:11px; line-height:1.7; color:#7b8379; margin:12px 0; }
.garage-sources { font-size:11px; color:#7b8379; overflow-wrap:anywhere; }.garage-sources summary { cursor:pointer; }.garage-sources p { text-align:left; }
@media(max-width:700px) { .garage-controls { padding:8px 10px 12px; }.garage-option { padding:6px 9px; font-size:11px; }.garage-configuration,.garage-price { font-size:12px; } }

/* A shared showroom: transforms act on the bike images, never on the layout. */
#explore-models { position:relative; isolation:isolate; background:radial-gradient(ellipse at 50% 12%,#f9f9f6 0,#e3e4df 58%,#d6d9d2 100%); border-radius:24px; padding:36px 28px 24px; gap:28px 36px; }
#explore-models::before { content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:linear-gradient(0deg,#a9b3a52b,transparent 70%); pointer-events:none; }
#explore-models .explore-model-card { border:0; border-radius:0; background:none; box-shadow:none; overflow:visible; padding:0; margin:0; transform:none; transition:none; min-width:0; }
#explore-models .model-visual { position:relative; overflow:visible; cursor:pointer; padding:22px 30px 30px; }
#explore-models .model-visual::before { content:''; position:absolute; inset:-8% -3%; z-index:-1; background:radial-gradient(ellipse at 50% 40%,#fffef5ed,transparent 66%); opacity:0; transition:opacity .6s ease; pointer-events:none; }
#explore-models .model-visual::after { content:''; position:absolute; left:17%; right:17%; bottom:8px; height:25px; border-radius:50%; background:radial-gradient(ellipse,#25352855,transparent 70%); opacity:.3; transform:scale(.85); transition:opacity .6s,transform .6s; pointer-events:none; }
#explore-models .model-visual img { position:relative; z-index:1; height:210px; width:100%; object-fit:contain; transform:scale(1); transform-origin:50% 70%; opacity:1; transition:transform .65s cubic-bezier(.2,.75,.2,1),opacity .6s ease; will-change:transform; }
#explore-models .garage-bike-layer { position:absolute; inset:0; transform:scale(1); transform-origin:50% 100%; opacity:1; transition:transform .65s cubic-bezier(.2,.75,.2,1),opacity .6s ease; }
#explore-models[data-focused]:not([data-focused=""]) .explore-model-card:not([data-focused="true"]) .garage-bike-layer { transform:scale(.86); opacity:.42; }
#explore-models .explore-model-card[data-focused="true"] { z-index:2; }
#explore-models .explore-model-card[data-focused="true"] .garage-bike-layer { transform:translateY(-12px) scale(1.2); opacity:1; }
#explore-models .explore-model-card[data-focused="true"] .model-visual::before { opacity:1; }
#explore-models .explore-model-card[data-focused="true"] .model-visual::after { transform:scale(1.2); opacity:1; }
#explore-models .model-caption { z-index:3; inset:auto 0 -8px; background:none; color:#344a36; padding:0; opacity:0; transform:translateY(8px); transition:opacity .4s ease,transform .4s ease; font-size:14px; pointer-events:none; }
#explore-models .explore-model-card h3 { font-size:20px; margin:15px 0 6px; opacity:.55; transform:translateY(4px); transition:opacity .4s,transform .4s; }
#explore-models .explore-model-card[data-focused="true"] h3,#explore-models .explore-model-card[data-focused="true"] .model-caption { opacity:1; transform:translateY(0); }
#explore-models .model-height { margin-bottom:8px; }.garage-dock { grid-column:1 / -1; order:10; display:grid; border-top:1px solid #304a3720; padding-top:20px; }
.garage-dock>.garage-panel,.garage-dock>.garage-hint { grid-area:1 / 1; }
.garage-panel { opacity:0; visibility:hidden; pointer-events:none; transform:translateY(8px); transition:opacity .3s ease,transform .3s ease,visibility .3s; text-align:center; }
.garage-panel[data-active="true"] { opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }
.garage-panel>h3 { font-size:20px; margin:0 0 12px; }.garage-hint { align-self:center; justify-self:center; color:#6e7a6a; font-size:13px; }
#explore-models[data-focused]:not([data-focused=""]) .garage-hint { opacity:0; pointer-events:none; }
.garage-panel .garage-controls { max-width:640px; margin:auto; }.garage-panel .garage-image-note { margin-bottom:6px; }
@media(max-width:700px) { #explore-models { padding:22px 8px; gap:18px 6px; }#explore-models .model-visual { padding:18px 7px 25px; }#explore-models .model-visual img { height:125px; }#explore-models .model-caption { font-size:10px; flex-wrap:wrap; line-height:1.6; bottom:-4px; }#explore-models .explore-model-card h3 { font-size:14px; }#explore-models .model-height { font-size:10px; }#explore-models .concept-label { font-size:9px; }.garage-hint { font-size:11px; text-align:center; } }
@media(prefers-reduced-motion:reduce) { #explore-models img,#explore-models .model-visual::before,#explore-models .model-visual::after,#explore-models .model-caption,#explore-models h3,.garage-panel { transition:none; } }
#model-page { padding-top:24px; }#model-page>h1 { font-size:clamp(30px,3.5vw,50px); }#model-page>.explore-intro { margin:16px 0 28px; }
@media(min-width:1000px) { #explore-models { grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px 12px; padding:34px 20px 22px; }#explore-models .model-visual { padding:20px 8px 30px; }#explore-models .model-visual img { height:175px; }#explore-models .model-caption { font-size:11px; flex-wrap:wrap; line-height:1.6; }#explore-models .explore-model-card h3 { font-size:17px; } }

/* Transparent, explicitly synthetic bike layers share one continuous floor. */
#explore-models .model-visual { height:245px; }
#explore-models .model-visual .garage-bike-image { position:absolute; left:0; top:0; width:100%; height:auto; padding:0; transform-origin:0 0; opacity:1; transition:opacity .3s ease-in-out; }
#explore-models .garage-bike-image[data-visible="false"] { opacity:0 !important; }
#explore-models .model-visual::after { bottom:24px; left:12%; right:12%; height:28px; }
#explore-models .model-visual::before { inset:-20% -15%; }
#explore-models .model-caption { bottom:-3px; }
#explore-models .garage-controls { padding:4px 16px 10px; }
#explore-models .garage-options { margin:10px 0; }
.garage-record { font-size:12px; color:#627060; margin:12px 0 6px; }
.garage-demo-note { font-size:10px; color:#7a8275; text-align:center; line-height:1.7; margin:16px 0 0; }
.garage-next-status { min-height:20px; font-size:12px; color:#3c5d42; text-align:center; }
@media(min-width:1000px) { #explore-models .model-visual { height:235px; } }
@media(max-width:700px) { #explore-models .model-visual { height:155px; }#explore-models .model-visual .garage-bike-image { padding:8px 1px 25px; }.garage-record { font-size:11px; }.garage-demo-note { font-size:9px; } }
@media(prefers-reduced-motion:reduce) { #explore-models .model-visual .garage-bike-image,#explore-models .garage-bike-layer { transition:none; } }
#explore-models[data-panel]:not([data-panel=""]) .garage-hint { opacity:0; pointer-events:none; }
#explore-models .garage-demo-note { position:absolute; top:9px; left:18px; right:18px; margin:0; pointer-events:none; font-size:9px; }

/* One photographed showroom: wall, perspective floor and staggered vehicle layers. */
#model-page { max-width:1600px; padding:12px 3% 24px; }#model-page>.explore-step { display:none; }#model-page>h1 { font-size:clamp(27px,3vw,42px); }#model-page>.explore-intro { margin:10px 0 18px; }
#explore-models { display:block; width:100%; height:calc(100svh - 210px); min-height:780px; padding:0; overflow:hidden; border-radius:22px; background:linear-gradient(180deg,#c7c6c1 0%,#b8b7b1 22%,#b4b3ad 22.15%,#d0cec8 100%); }
#explore-models::before { inset:22% 0 0; border-radius:0; background:radial-gradient(ellipse at 48% 10%,#ffffff24,transparent 64%),linear-gradient(180deg,#3535320c,transparent 30%); transform:none; opacity:1; }
#explore-models::after { content:''; position:absolute; top:0; left:0; right:0; height:22%; pointer-events:none; z-index:-1; background:radial-gradient(ellipse 65% 160% at 32% -40%,#f9f9f1a6,transparent 80%); border-bottom:1px solid #68686214; box-shadow:0 9px 28px #3f3f370c; }
#explore-models .explore-model-card { position:absolute; width:43%; max-width:500px; transform-origin:50% 80%; }
#explore-models .explore-model-card[data-product-id="vapor"] { left:3%; top:6%; transform:scale(.84); z-index:2; }
#explore-models .explore-model-card[data-product-id="vapor-super-light"] { left:53%; top:11%; transform:scale(.84); z-index:1; }
#explore-models .explore-model-card[data-product-id="nomad"] { width:47%; left:1%; top:37%; transform:scale(.96); z-index:4; }
#explore-models .explore-model-card[data-product-id="oi"] { width:47%; left:50%; top:42%; transform:scale(.96); z-index:3; }
#explore-models .explore-model-card[data-focused="true"] { z-index:10; }
#explore-models .model-visual { height:auto; aspect-ratio:1.85; padding:0; }
#explore-models .model-visual .garage-bike-image { padding:0; -webkit-box-reflect:below 2px linear-gradient(transparent 84%,#00000012); }
#explore-models .model-visual::after { left:5%; right:5%; bottom:0; height:18px; background:radial-gradient(ellipse,#27282473 0%,#393a3324 38%,transparent 74%); opacity:.7; filter:blur(2px); }
#explore-models .model-visual::before { background:radial-gradient(ellipse at 50% 55%,#fbfbef73,transparent 68%); }
#explore-models .concept-label,#explore-models .model-height { display:none; }
#explore-models .model-caption { display:none; }#explore-models .explore-model-card h3 { font-size:15px; margin:0; color:#44483b; letter-spacing:.3px; }
#explore-models .garage-dock { position:absolute; z-index:15; left:50%; bottom:5%; transform:translateX(-50%); width:min(760px,90%); padding:16px 22px; border:1px solid #fff9eaa6; border-radius:22px; background:#fffdf2d9; backdrop-filter:blur(18px); box-shadow:0 20px 60px #5147351a; }
#explore-models .garage-panel { display:none; }
#explore-models .garage-panel[data-active="true"] { display:grid; grid-template-columns:1fr 1.1fr auto; column-gap:16px; align-items:center; text-align:left; }
#explore-models .garage-panel>h3 { grid-column:1; grid-row:1; }
#explore-models .garage-panel-keywords { grid-column:1; grid-row:2; margin:4px 0 0; }
#explore-models .garage-panel .garage-controls { grid-column:2; grid-row:1 / 3; padding:0; }
#explore-models .garage-panel .garage-select { grid-column:3; grid-row:1 / 3; width:auto; white-space:nowrap; }
#explore-models[data-panel]:not([data-panel=""]) .garage-hint { display:none; }
#explore-models .garage-next-status:empty { display:none; }
#explore-models .garage-sources[open] { position:absolute; bottom:100%; left:0; right:0; max-height:230px; }
.garage-panel-keywords { font-size:12px; color:#77806d; margin:2px 0 15px; }.garage-panel>h3 { margin:0 0 6px; }
#explore-models .garage-controls { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; padding:0 0 14px; }
.garage-choice { position:relative; min-width:120px; font-size:12px; color:#465440; border:1px solid #a7ae992e; border-radius:12px; background:#ffffff69; }
.garage-choice>summary { cursor:pointer; list-style:none; padding:10px 12px; }.garage-choice>summary::after { content:'⌄'; margin-left:10px; color:#9ba18f; }
.garage-color-picker { min-width:130px; flex:1; text-align:left; }
.garage-color-label { display:block; color:#687064; font-size:10px; line-height:1.5; }
#explore-models .garage-color-picker .garage-options { justify-content:flex-start; gap:4px; margin:4px 0 0; }
#explore-models .garage-color-picker .garage-color { padding:5px 8px; font-size:11px; }
#explore-models .garage-color-picker .garage-paint-color { width:25px; height:25px; padding:0; border:2px solid #fff; border-radius:50%; box-shadow:0 0 0 1px #8f958b66; }
#explore-models .garage-paint-color[aria-pressed="true"] { box-shadow:0 0 0 2px #304a37; }
.frame-paint-note { display:block; margin-top:5px; color:#72776e; font-size:9px; }
#explore-models [data-product-id="nomad"] .garage-bike-layer { isolation:isolate; }
#explore-models .garage-frame-paint { position:absolute; pointer-events:none; z-index:2; transform-origin:0 0; background-size:100% 100%; background-repeat:no-repeat; opacity:0; transition:opacity .3s ease-in-out; }
@media(prefers-reduced-motion:reduce) { #explore-models .garage-frame-paint { transition:none; } }
.garage-choice .garage-options { position:absolute; z-index:30; top:calc(100% + 4px); left:0; width:250px; margin:0 !important; padding:12px; background:#fffef8; border:1px solid #d9ddcd; border-radius:14px; box-shadow:0 12px 30px #3846311f; }
.garage-choice:nth-child(2) .garage-options { left:auto; right:0; }
#explore-models .garage-sources { width:100%; margin:4px 0; font-size:10px; }.garage-photo-status { font-size:10px; line-height:1.7; }
#explore-models .garage-select { background:#334c39; color:white; border:0; width:100%; padding:13px 22px; }
#explore-models .garage-demo-note { top:auto; left:22px; right:22px; bottom:12px; text-align:left; font-size:9px; color:#716d60; }
#explore-models .garage-next-status { font-size:10px; margin:8px 0 0; }
.garage-hint { min-height:180px; align-content:center; font-size:12px; }
.garage-hint { min-height:32px; }
@media(min-width:1000px) { #explore-models { min-height:820px; } }
@media(max-width:700px) { #model-page { padding:10px 3%; }#model-page>h1 { font-size:27px; }#explore-models { min-height:880px; height:110svh; }#explore-models .explore-model-card { width:68% !important; }#explore-models .explore-model-card[data-product-id="vapor"] { left:8%; top:10%; }#explore-models .explore-model-card[data-product-id="vapor-super-light"] { left:25%; top:27%; }#explore-models .explore-model-card[data-product-id="nomad"] { left:8%; top:44%; }#explore-models .explore-model-card[data-product-id="oi"] { left:25%; top:61%; }#explore-models .model-visual { height:auto; }#explore-models .explore-model-card h3 { font-size:12px; }#explore-models .garage-dock { width:auto; left:5%; right:5%; bottom:4%; transform:none; padding:15px; }#explore-models .garage-panel[data-active="true"] { grid-template-columns:1fr auto; }#explore-models .garage-panel .garage-controls { grid-column:1 / -1; grid-row:3; margin-top:10px; }#explore-models .garage-panel .garage-select { grid-column:2; grid-row:1 / 3; font-size:11px; padding:10px; }#explore-models .garage-demo-note { bottom:9px; font-size:8px; }.garage-choice { min-width:110px; }.garage-choice .garage-options { width:220px; } }
#explore-models .explore-model-card h3 { opacity:0; }#explore-models .explore-model-card[data-focused="true"] h3 { opacity:1; }
.garage-choice .garage-options { top:auto; bottom:calc(100% + 6px); }#explore-models .garage-sources[open] { max-height:190px; overflow:auto; padding:8px; border-radius:10px; background:#ffffff70; }

/* Selected-model benefits share the photo focus; paint layers remain unchanged. */
#explore-models .garage-selling-points { display:none; position:absolute; left:calc(100% + 18px); top:6%; width:clamp(180px,18vw,240px); padding:18px 20px; border:1px solid #ffffff80; border-radius:18px; background:#f9faf3e8; color:#293d2e; text-align:left; pointer-events:none; }
#explore-models .explore-model-card[data-focused="true"] .garage-selling-points { display:block; }
#explore-models [data-product-id="vapor-super-light"] .garage-selling-points,
#explore-models [data-product-id="oi"] .garage-selling-points { left:auto; right:calc(100% + 18px); }
#explore-models .garage-selling-title { margin:0 0 12px; font-size:12px; letter-spacing:.04em; color:#647060; }
#explore-models .garage-selling-points ul { list-style:none; padding:0; margin:0; display:grid; gap:9px; }
#explore-models .garage-selling-points li { font-size:clamp(22px,2vw,28px); font-weight:600; line-height:1.4; }
@media(max-width:700px) {
  /* Keep every touch target and the controls in flow, so a tall dock cannot cover Oi!. */
  #explore-models { display:flex; flex-direction:column; align-items:stretch; gap:24px; height:auto; min-height:0; padding:40px 12px 24px; overflow:visible; }
  #explore-models .explore-model-card { position:relative; left:auto !important; top:auto !important; width:84% !important; align-self:flex-start; }
  #explore-models [data-product-id="vapor-super-light"],
  #explore-models [data-product-id="oi"] { align-self:flex-end; }
  #explore-models .garage-selling-points { position:static; width:auto; margin:18px 0 0; padding:14px 18px; }
  #explore-models .garage-selling-points ul { gap:5px; }
  #explore-models .garage-selling-points li { font-size:22px; }
  #explore-models .garage-dock { position:relative; left:auto; right:auto; bottom:auto; transform:none; width:100%; margin-top:8px; padding:15px; }
  #explore-models .garage-sources[open] { position:static; }
  #explore-models .garage-choice .garage-options { position:static; width:auto; }
  #explore-models .garage-demo-note { position:static; order:11; margin:0 4px; }
}