/* Public platform: navigation, discovery, editorial and ownership spaces. */
.site-main { min-height: 60vh; }
.section-space { padding-block: 64px; }
.section-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; margin-bottom: 27px; }
.section-title p { margin-top: 6px; font-size: 12px; }
.section-title h2 { font-size: 28px; }
.discovery-intro { padding: 40px 0 0; }
.breadcrumb-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--color-muted); margin-bottom: 20px; }
.discovery-stage { display: grid; grid-template-columns: 1.05fr 1fr; border-radius: 16px; overflow: hidden; min-height: 420px; background: var(--color-primary-soft); }
.stage-copy { padding: 42px 40px; position: relative; }
.stage-copy .eyebrow { color: var(--color-primary); }
.stage-copy h1 { font-size: clamp(36px, 4.2vw, 60px); line-height: 1.4; letter-spacing: -.6px; }
.stage-copy h1 em { font-style: normal; position: relative; display: inline-block; }
.stage-copy h1 em::after { content: ''; display: block; height: 4px; background: var(--color-accent); width: 100%; position: absolute; bottom: 0; z-index: 0; opacity: .85; }
.stage-copy p { margin: 24px 0 28px; max-width: 390px; color: var(--color-muted); font-size: 13px; }
.stage-visual { position: relative; min-height: 380px; background: var(--color-footer); overflow: hidden; }
.stage-visual img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
.stage-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #10264be6, transparent 60%); }
.stage-caption { position: absolute; bottom: 30px; left: 28px; right: 28px; color: white; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; }
.stage-caption h2 { font-size: 22px; }
.stage-caption small { color: var(--color-on-dark); font-size: 12px; }
.stage-caption .icon { width: 30px; height: 30px; }
.quick-paths { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; }
.quick-path { display: flex; align-items: center; gap: 16px; padding: 20px; border: 1px solid var(--color-line); background: white; border-radius: 10px; transition: border-color .18s; }
.quick-path:hover { border-color: #7095d4; }
.quick-path h2 { font-size: 14px; margin-bottom: 4px; }
.quick-path p { font-size: 12px; }
.quick-path > .icon { width: 26px; height: 26px; color: var(--color-primary); }
.quick-path .path-arrow { margin-inline-start: auto; width: 16px; }
.explore-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 30px; }
.explore-note { padding: 30px; border-radius: 12px; background: var(--color-footer); color: #fff; }
.explore-note .eyebrow { color: var(--color-on-dark); }
.explore-note h3 { font-size: 26px; margin: 18px 0; }
.explore-note p { font-size: 12px; color: var(--color-on-dark); margin-bottom: 28px; }
.explore-note .icon { width: 38px; height: 38px; color: var(--color-accent); }
.car-guide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.car-guide { background: white; border: 1px solid var(--color-line); border-radius: 10px; padding: 23px; display: flex; flex-direction: column; }
.car-guide-top { display: flex; justify-content: space-between; margin-bottom: 22px; }
.car-guide-top > span { font: 800 10px Arial; letter-spacing: 2px; color: var(--color-muted); }
.car-guide h3 { font-size: 22px; margin-bottom: 8px; }
.car-guide p { font-size: 12px; margin-bottom: 23px; }
.car-guide .text-link { margin-top: auto; border-top: 1px solid var(--color-line); padding-top: 13px; justify-content: space-between; }
.knowledge-band { background: var(--color-accent-soft); }
.knowledge-layout { display: grid; grid-template-columns: 1.05fr 2fr; gap: 50px; align-items: center; }
.knowledge-layout > div > p { font-size: 12px; margin: 15px 0 22px; }
.symptom-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.symptom-item { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 9px; padding: 22px; }
.symptom-item > .icon { width: 28px; height: 28px; color: var(--color-primary); }
.symptom-item h3 { font-size: 14px; }
.symptom-item small { color: var(--color-muted); font-size: 12px; }
.editorial-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 35px; }
.editorial-feature { background: var(--color-primary-soft); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.editorial-visual { min-height: 200px; padding: 32px; background: var(--color-footer); color: #fff; display: flex; justify-content: space-between; align-items: center; }
.editorial-visual span { font: 700 48px/1.05 Arial; letter-spacing: -3px; }
.editorial-visual .icon { width: 90px; height: 90px; stroke-width: .6; color: var(--color-accent); }
.editorial-copy { padding: 28px; }
.editorial-copy h3 { font-size: 23px; margin: 12px 0; }
.editorial-copy p { font-size: 12px; margin-bottom: 22px; }
.story-list { display: grid; }
.story-row { display: grid; grid-template-columns: 45px 1fr; gap: 15px; padding: 24px 0; border-bottom: 1px solid var(--color-line); }
.story-row:first-child { padding-top: 0; }
.story-row > span { font: 32px Arial; color: #7095d4; }
.story-row h3 { font-size: 18px; margin: 9px 0; }
.story-row p { font-size: 12px; margin-bottom: 10px; }
.ownership-banner { background: var(--color-accent-soft); border-radius: 14px; padding: 44px; display: grid; grid-template-columns: 1.15fr 1fr; gap: 50px; align-items: center; }
.ownership-banner h2 { font-size: 34px; }
.ownership-banner p { font-size: 13px; margin: 16px 0 24px; }
.ownership-list { display: grid; gap: 12px; }
.ownership-list > div { display: flex; align-items: center; gap: 14px; padding: 20px; background: #ffffffa8; border-radius: 8px; font-size: 12px; }
.ownership-list span { color: var(--color-primary); font: 12px Arial; }
.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tool-card { border-top: 3px solid var(--color-accent); }
.tool-card h3 { margin: 20px 0 12px; font-size: 22px; }
.tool-card p { font-size: 12px; margin-bottom: 20px; }
.catalog-toolbar { padding: 20px; display: flex; justify-content: space-between; gap: 25px; background: white; border: 1px solid var(--color-line); border-radius: 10px; margin-bottom: 25px; }
.catalog-toolbar .search-form { width: min(530px, 75%); }
.catalog-count { font-size: 12px; align-self: center; white-space: nowrap; }
.content-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.content-card { display: flex; flex-direction: column; min-width: 0; background: white; border: 1px solid var(--color-line); border-radius: 10px; overflow: hidden; }
.content-card-top { display: flex; justify-content: space-between; align-items: center; padding: 22px 23px 0; }
.content-card-body { padding: 20px 23px; flex: 1; }
.content-card h2 { font-size: 19px; margin-bottom: 13px; }
.content-card p { font-size: 12px; }
.content-card-footer { border-top: 1px solid var(--color-line); display: flex; justify-content: space-between; gap: 12px; padding: 15px 23px; font-size: 12px; }
.catalog-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.catalog-tabs a { padding: 7px 13px; background: var(--color-primary-soft); border-radius: 5px; font-size: 12px; }
.breadcrumb { display: flex; gap: 12px; font-size: 12px; color: var(--color-muted); margin-bottom: 25px; }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 285px; gap: 45px; }
.article-heading { border-bottom: 1px solid var(--color-line); padding-bottom: 28px; margin-bottom: 30px; }
.article-heading h1 { margin-block: 18px; }
.article-heading > p { font-size: 15px; }
.article-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 25px; font-size: 12px; color: var(--color-muted); }
.article-body { font-size: 15px; line-height: 2.1; overflow-wrap: anywhere; }
.article-body p { margin-block: 20px; color: var(--color-muted); }
.article-body h2, .article-body h3 { margin-block: 28px 14px; }
.article-body a { text-decoration: underline; color: var(--color-primary); }
.article-body img { margin: 24px auto; border-radius: 8px; max-height: 480px; }
.article-body table { display: block; overflow-x: auto; }
.article-sidebar { align-self: start; display: grid; gap: 20px; }
.article-sidebar h2 { font-size: 18px; }
.article-sidebar p { font-size: 12px; margin-block: 14px 20px; }
.related-item { display: block; border-top: 1px solid var(--color-line); padding-block: 16px; margin-top: 10px; font-size: 12px; }
.auth-layout { display: grid; grid-template-columns: 1fr 460px; gap: 80px; align-items: center; min-height: 650px; }
.auth-story { padding: 35px; }
.auth-story h1 { font-size: 45px; margin: 24px 0; }
.auth-story p { max-width: 370px; font-size: 13px; }
.auth-story > .icon { width: 70px; height: 70px; stroke-width: 1; }
.auth-card h2 { font-size: 24px; margin-bottom: 25px; }
.auth-links { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 24px; font-size: 12px; }
.ownership-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 28px; }
.ownership-stats .surface { display: flex; align-items: center; gap: 18px; }
.ownership-stats strong { display: block; font: 32px Arial; margin-bottom: 5px; }
.ownership-stats small { color: var(--color-muted); }
.garage-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 25px; align-items: start; }
.vehicle-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-bottom: 22px; }
.vehicle-header h2 { font-size: 25px; margin-block: 8px; }
.vehicle-header p { font-size: 12px; }
.vehicle-header > .icon { width: 75px; height: 75px; color: #7095d4; stroke-width: 1; }
.maintenance-item { border-top: 1px solid var(--color-line); padding-block: 20px; display: flex; justify-content: space-between; gap: 20px; font-size: 12px; }
.maintenance-item small { display: block; margin-top: 4px; color: var(--color-muted); }
.maintenance-item p { font-size: 12px; margin-top: 8px; }
.vehicle-actions { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--color-line); padding-top: 20px; }
.vehicle-card .disclosure { margin-top: 20px; }
.tool-workspace { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.calculator-result { background: var(--color-primary-soft); }
.calculator-result h2 { margin-bottom: 24px; }
.result-row { display: flex; justify-content: space-between; gap: 15px; border-bottom: 1px solid var(--color-line); padding-block: 16px; font-size: 12px; }
.result-row strong { font-size: 19px; }
.tool-note { margin-top: 25px; font-size: 12px; padding-top: 20px; border-top: 1px solid var(--color-line); }
.assistant-workspace { display: grid; grid-template-columns: 310px minmax(0, 1fr); gap: 35px; }
.question-prompts { display: grid; gap: 12px; margin-top: 25px; }
.question-prompts button { padding: 14px; border: 1px solid var(--color-line); border-radius: 8px; background: white; text-align: start; font-size: 12px; }
.chat { background: white; border: 1px solid var(--color-line); border-radius: 13px; overflow: hidden; }
.chat-heading { display: flex; align-items: center; gap: 13px; padding: 20px 24px; border-bottom: 1px solid var(--color-line); }
.chat-heading small { display: block; color: var(--color-muted); }
.chat-log { height: 380px; overflow-y: auto; display: flex; flex-direction: column; align-items: flex-start; padding: 24px; gap: 15px; background: var(--color-canvas); }
.chat-message { padding: 16px 20px; border-radius: 10px; background: white; max-width: 92%; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-message-user { align-self: flex-end; background: var(--color-primary); color: white; }
.chat-message a { display: block; margin-top: 12px; text-decoration: underline; color: var(--color-primary); }
.chat-form { display: flex; gap: 12px; padding: 20px; align-items: flex-end; }
.chat-note { padding: 0 20px 17px; font-size: 12px; }
.ticket-message { margin-block: 20px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; }
.ticket-reply { padding: 22px; background: var(--color-primary-soft); border-radius: 8px; }
.news-link { overflow-wrap: anywhere; }
@media (max-width: 1080px) {
    .quick-paths { grid-template-columns: 1fr 1fr; }
    .explore-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 20px; }
    .auth-layout { gap: 35px; grid-template-columns: 1fr 1fr; }
    .garage-grid { grid-template-columns: minmax(0, 1fr) 280px; }
}
@media (max-width: 760px) {
    .section-space { padding-block: 40px; }
    .discovery-intro { padding-top: 24px; }
    .discovery-stage { grid-template-columns: 1fr; }
    .stage-copy { padding: 30px 25px; }
    .stage-copy h1 { font-size: clamp(30px, 9.5vw, 38px); }
    .stage-copy p { font-size: 12px; }
    .stage-visual { min-height: 245px; }
    .stage-caption { bottom: 22px; }
    .stage-caption h2 { font-size: 18px; }
    .quick-paths { gap: 9px; }
    .quick-path { padding: 16px 12px; gap: 9px; }
    .quick-path > .icon { width: 22px; }
    .quick-path h2 { font-size: 12px; }
    .quick-path p { font-size: 12px; }
    .quick-path .path-arrow { display: none; }
    .section-title h2 { font-size: 23px; }
    .section-title { align-items: flex-start; }
    .section-title > .text-link { font-size: 12px; flex-shrink: 0; }
    .explore-layout, .knowledge-layout, .editorial-layout, .ownership-banner, .tool-grid, .article-layout, .auth-layout, .garage-grid, .tool-workspace, .assistant-workspace { grid-template-columns: 1fr; gap: 24px; }
    .explore-note { padding: 25px; }
    .explore-note h3 { font-size: 24px; }
    .car-guide-grid { gap: 10px; }
    .car-guide { padding: 18px 15px; }
    .car-guide h3 { font-size: 17px; }
    .car-guide p { font-size: 12px; }
    .car-guide-top { margin-bottom: 15px; }
    .symptom-item { padding: 17px 13px; gap: 9px; }
    .symptom-item h3 { font-size: 12px; }
    .symptom-item > .icon { width: 23px; }
    .symptom-item small { font-size: 12px; }
    .editorial-visual { min-height: 170px; padding: 26px; }
    .editorial-visual span { font-size: 38px; }
    .ownership-banner { padding: 27px; }
    .ownership-banner h2 { font-size: 27px; }
    .content-grid { grid-template-columns: 1fr; }
    .catalog-toolbar { flex-direction: column; gap: 13px; padding: 15px; }
    .catalog-toolbar .search-form { width: 100%; }
    .catalog-count { align-self: start; }
    .auth-layout { min-height: auto; }
    .auth-story { padding: 0; }
    .auth-story h1 { font-size: 32px; margin-block: 16px; }
    .auth-story > .icon { width: 45px; height: 45px; }
    .ownership-stats { gap: 8px; }
    .ownership-stats .surface { padding: 18px 10px; display: block; }
    .ownership-stats .icon-tile { display: none; }
    .ownership-stats strong { font-size: 28px; }
    .ownership-stats small { font-size: 12px; }
    .garage-grid > aside { grid-row: 1; }
    .chat-log { height: 350px; padding: 17px; }
    .chat-form { padding: 15px; gap: 8px; }
    .chat-form .button { padding-inline: 12px; }
}

@media (max-width: 380px) {
    .breadcrumb-label { flex-wrap: wrap; gap: 8px; }
}