/* All Tuned owner companion: a quiet white canvas with a little personality. */
.auth-policy-links {display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin-top:24px;}
.auth-policy-links:empty {display:none;}
.auth-policy-links a {display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:3px;}
.policy-nav {display:flex;flex-wrap:wrap;gap:6px 20px;margin-block:20px 28px;}
.policy-nav a {min-height:44px;display:inline-flex;align-items:center;text-decoration:underline;text-underline-offset:3px;}
.plain-page [id] {scroll-margin-top:110px;}
.plain-page details>summary {min-height:44px;padding-block:10px;cursor:pointer;font-weight:600;}
:root {
    --ink: #303348;
    --muted: #62677a;
    --subtle: #62677a;
    --line: #e9e7ef;
    --canvas: #fbfbfd;
    --card: #fff;
    --nav: #fff;
    --nav-soft: #f5f2fb;
    --green: #7468bd;
    --green-dark: #5e519f;
    --green-soft: #f0ecfb;
    --purple: #b27899;
    --purple-soft: #faedf4;
    --amber: #b58a50;
    --amber-soft: #fcf1e0;
    --coral: #c17570;
    --coral-soft: #fbece8;
    --mint: #e7f3ee;
    --mint-ink: #477563;
    --lavender: #eeebfa;
    --peach: #fcf0e6;
    --shadow: 0 8px 30px rgba(52, 45, 79, .035);
    --radius: 22px;
}

body {font-size: 16px; line-height: 1.5;}
button, input, select, textarea {font-family: var(--font);}
a, button, input, select, textarea, summary {outline-offset: 4px;}
a:focus-visible, button:focus-visible, summary:focus-visible {outline: 3px solid #7663a6;}
button svg, a svg {flex-shrink: 0;}
button:disabled {opacity: .55; cursor: not-allowed;}
.sidebar {background: #fff; border-right: 1px solid var(--line); padding: 28px 16px 18px; overflow-y: auto;}
.brand {color: #37334c; letter-spacing: -1.2px; white-space: nowrap; flex-shrink: 0;}
.brand-mark {background: #a598d6; border-radius: 12px; flex-shrink: 0;}
.main-nav {margin-top: 25px;}
.nav-label {color: #656174; font-size: 10px; margin-top: 21px; letter-spacing: 1.7px;}
.nav-item {min-height: 45px; color: #777386; border-radius: 12px; padding: 10px 13px; font-size: 14px;}
.nav-item svg {width: 19px; height: 19px;}
.nav-item:hover {background: #f7f5fc; color: #66559e;}
.nav-item.active {color: #66569f; background: #f0ebfb; box-shadow: none;}
.sidebar-card {margin-top: 28px; background: #f6f2fd; border-color: #ebe4f6; padding: 18px; flex-shrink: 0;}
.sidebar-card-icon {background: #e7def6; color: #7866ad;}
.sidebar-card strong {font-size: 14px; color: #514568;}
.sidebar-card > span:not(.sidebar-card-icon) {color: #877b98; font-size: 12px;}
.sidebar-card a {color: #7662a7; font-size: 12px;}
.sidebar-card:after {border-color: #d4c6eb;}
.sidebar-user {border-color: var(--line); margin-top: auto; flex-shrink: 0;}
.sidebar-user strong {font-size: 13px;}
.sidebar-user small {font-size: 11px; color: var(--muted);}
.avatar {background: #e4ddf3; color: #65567f;}
.topbar {height: 80px; background: rgba(255,255,255,.94); border-color: var(--line);}
.topbar-title span {font-size: 16px;}
.topbar-title small {color: var(--muted); font-size: 12px;}
.topbar .icon-button:hover {background: #f1edfa; color: #66599e;}
.vehicle-switcher select {max-width: 260px; height: 42px; font-size: 13px; border-color: var(--line); border-radius: 12px; background: #fff;}
.main-content {max-width: 1700px; margin-inline: auto; padding-top: 34px;}
.app-footer {background: #fff; border-color: var(--line); font-size: 12px; color: var(--muted);}
.page-intro {margin-bottom: 28px; align-items: center;}
.page-intro h1 {font-size: clamp(28px, 3vw, 39px); letter-spacing: -1.5px; line-height: 1.2; margin: 10px 0;}
.page-intro p {font-size: 15px; max-width: 680px; line-height: 1.65;}
.eyebrow, .card-kicker {font-size: 10px; letter-spacing: 1.6px; font-weight: 700;}
.eyebrow {color: #8670b5;}
.eyebrow i {background: #b9aadf;}
.button {min-height: 44px; border-radius: 12px; padding: 11px 17px; font-size: 13px; line-height: 1.3;}
.button-primary {background: #7566b6; box-shadow: 0 5px 13px #7566b61a;}
.button-primary:hover {background: #6454a1; box-shadow: 0 7px 18px #7566b625;}
.button-secondary {border-color: #e4dfed; color: #666076; background: #fff;}
.button-secondary:hover {border-color: #c6badd; background: #faf8ff;}
.button-ghost {background: #f4f2f8; color: #625a72;}
.button-small {min-height: 36px; padding: 8px 12px; font-size: 12px;}
.button-saved {background: #edf5f0; color: #416d55; border-color: #dae9df;}
.card {border-color: var(--line); border-radius: 22px; box-shadow: var(--shadow);}
.card-header {padding: 24px 25px 0;}
.card-header h2 {font-size: 19px; line-height: 1.4;}
.card-header > a:not(.button) {font-size: 12px;}
.card-subtitle {font-size: 13px; line-height: 1.6;}
.card-kicker {color: #93859f;}
.section-row {gap: 15px;}
.section-row h2 {font-size: 24px; letter-spacing: -.8px;}
.section-row > span {font-size: 12px; text-align: right;}
.alert {font-size: 14px; padding: 15px 18px; border-radius: 14px;}
.empty-list-card, .empty-page, .empty-garage {padding: 36px; border-color: var(--line); box-shadow: var(--shadow);}
.empty-list-card p {max-width: 480px; line-height: 1.7;}
.large-icon {background: #ede7f7; color: #917cc0;}
.mini-empty strong {font-size: 15px;}
.mini-empty span, .mini-empty small {font-size: 13px;}

/* At-a-glance ownership, followed by the deeper details. */
.companion-hero {display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 32px; margin-bottom: 24px; overflow: hidden; border: 1px solid #ebe5f5; border-radius: 26px; background: linear-gradient(110deg, #f4effc, #fcfaff 58%, #f1f7f4);}
.companion-hero h1, .companion-hero h2 {margin: 10px 0; font: 800 clamp(29px, 3.2vw, 43px)/1.17 var(--display); letter-spacing: -1.6px;}
.companion-hero p {max-width: 620px; margin: 0; color: #81778e; font-size: 15px; line-height: 1.7;}
.companion-hero > div {min-width: 0;}
.companion-hero .eyebrow {color: #8f79b4;}
.companion-hero-photo {width: 175px; height: 145px; object-fit: cover; border-radius: 20px;}
.companion-actions {display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-bottom: 28px;}
.companion-actions > a, .quick-action {display: flex; align-items: center; gap: 12px; min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; font-size: 13px; font-weight: 700; color: #5b546c; transition: .2s;}
.companion-actions > a:hover, .quick-action:hover {background: #faf8ff; border-color: #d4c6ea; transform: translateY(-2px);}
.dashboard-actions > .button-primary {background: #7566b6; color: #fff; border-color: #7566b6;}
.dashboard-actions > .button-primary:hover {background: #6454a1; border-color: #6454a1;}
.companion-actions svg, .quick-action svg {width: 21px; height: 21px; color: #8976b9; flex: 0 0 auto;}
.companion-actions strong, .companion-actions small {display: block;}
.companion-actions small {margin-top: 2px; color: #94899f; font-size: 11px; font-weight: 500;}
.companion-hero > div:first-child {flex: 1;}
.companion-hero h2 {font-size: clamp(25px,2.4vw,33px); letter-spacing: -1px;}
.companion-hero .companion-actions {width: 335px; flex: 0 0 335px; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 0; gap: 10px;}
.companion-hero .companion-actions > a {min-height: 52px; padding: 14px; font-size: 12px; justify-content: center; text-align: center;}
.companion-hero .companion-actions > .button-primary {background: #7566b6; color: #fff; border-color: #7566b6;}
.companion-hero .companion-actions > .button-primary:hover {background: #6454a1; border-color: #6454a1;}
.companion-section {margin: 30px 0;}
.companion-section > h2 {font: 800 23px var(--display); letter-spacing: -.6px;}
.insight-grid {display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin-bottom: 24px;}
.insight-card {min-width: 0; padding: 22px; border: 1px solid #e9e4f2; border-radius: 20px; background: #f7f4fc;}
.insight-card:nth-child(2) {background: #f0f7f3; border-color: #e3eee7;}
.insight-card:nth-child(3) {background: #fff5ed; border-color: #f2e7dc;}
.insight-card h3 {font: 700 16px var(--display); margin: 10px 0 7px;}
.insight-card p {color: var(--muted); font-size: 13px; line-height: 1.6; margin: 0;}
.insight-card a {display: inline-block; margin-top: 13px; color: #75629f; font-size: 12px; font-weight: 700;}
.insight-card > strong {display: block; font: 800 26px var(--display);}
.ownership-progress {display: flex; align-items: center; gap: 12px; padding-top: 20px; color: #8b7f9b; font-size: 12px;}
.ownership-progress span {display: flex; align-items: center; gap: 7px;}
.ownership-progress span + span {padding-left: 12px; border-left: 1px solid #ded5e9;}
.ownership-progress i {height: 1px; min-width: 24px; flex: 1; background: #dcd2ea;}
.metric-grid {grid-template-columns: repeat(4, minmax(0,1fr)); gap: 15px; margin-bottom: 24px;}
.metric-card {border-radius: 20px; padding: 22px; min-height: 182px; box-shadow: none;}
.metric-featured {background: #f0f7f3; border-color: #deebe3;}
.metric-icon {background: #e6f1ea; color: #698b76; border-radius: 12px;}
.metric-icon.purple {background: #f0eafa; color: #9480b7;}
.metric-icon.amber {background: #fff1de; color: #b38e5d;}
.metric-icon.coral {background: #f9e9ec; color: #c08a99;}
.metric-card > strong {font-size: clamp(24px, 2.4vw, 32px);}
.metric-card > strong small {font-size: 12px;}
.metric-label {font-size: 13px;}
.metric-foot {font-size: 11px; color: var(--muted); line-height: 1.6;}
.trend-pill {font-size: 10px;}
.dashboard-grid {gap: 20px; margin-bottom: 24px;}
.legend, .cost-legend {font-size: 11px; color: var(--muted);}
.legend-peach {background: #dba57e;}
.history-pagination {display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 20px 24px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted);}
.comparison-note {font-size: 11px; line-height: 1.65;}
.benchmark-list > div > span {font-size: 12px;}
.schedule-row {padding-block: 16px;}
.schedule-name strong {font-size: 14px;}
.schedule-name small {font-size: 12px; white-space: normal;}
.status-badge {font-size: 10px; padding: 5px 8px;}
.status-badge.soon {color: #94621c;}
.table-wrap th {font-size: 10px; padding-top: 20px; color: var(--muted);}
.table-wrap td {font-size: 13px; padding-block: 16px;}
.table-wrap tbody tr:hover {background: #fdfcff;}
.primary-cell span:last-child small, .block-muted {font-size: 11px; color: var(--muted);}
.mpg-estimate {color: var(--muted);}
.unit {color: var(--muted);}
.detail-chips {flex-wrap: wrap;}
.detail-chips span, .detail-chips a {font-size: 10px; color: var(--muted);}
.table-action {width: 32px; height: 32px; color: var(--muted);}
.timeline-main p, .timeline-note {font-size: 12px; color: var(--muted);}
.timeline-main h3 {font-size: 15px;}
.timeline-date small, .timeline-meta small, .type-label {font-size: 11px; color: var(--muted);}
.recommendations-card .recommendation-grid {grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));}
.recommendation-item {padding: 23px;}
.recommendation-item p {height: auto; min-height: 0; font-size: 12px; line-height: 1.6;}
.due-facts small {font-size: 11px;}
.due-facts strong {font-size: 13px;}
.rule-actions {flex-wrap: wrap;}
.rule-actions button, .rule-actions a {font-size: 12px; padding: 7px 10px;}
.guidance-note {font-size: 12px;}
.care-metrics small {font-size: 12px;}
.care-metrics strong {font-size: 16px;}
.logging-guide {background: #f1ecfa;}
.logging-guide .card-kicker {color: #65567f;}
.logging-guide p {font-size: 13px; color: var(--muted);}
.guide-steps span {font-size: 11px; color: var(--muted);}
.guide-steps i {color: #65567f;}
.logging-guide:after {border-color: #d8cbea;}

/* A garage of cars, not a list of assets. */
.garage-grid {gap: 22px;}
.vehicle-card {border-radius: 23px; box-shadow: var(--shadow);}
.vehicle-card:hover {transform: translateY(-4px); box-shadow: 0 18px 35px rgba(65,53,90,.07);}
.vehicle-art {height: 210px; background: #edf3ef;}
.vehicle-art-2 {background: #f0ebf9;}
.vehicle-art-3 {background: #fbefe3;}
.vehicle-art-4 {background: #eaf1f7;}
.vehicle-art svg {width: 77%; max-width: 330px; stroke: #85a28e; stroke-width: 1.3;}
.vehicle-art-2 svg {stroke: #a091c2;}
.vehicle-art-3 svg {stroke: #c5a384;}
.vehicle-art-4 svg {stroke: #8ca6c1;}
.vehicle-year {top: 16px; left: 16px; font-size: 11px; background: rgba(255,255,255,.9);}
.vehicle-ownership-status {position: absolute; right: 14px; top: 16px; z-index: 3; padding: 5px 9px; border-radius: 20px; color: #55715f; background: #fafffbea; font-size: 10px; font-weight: 700;}
.vehicle-ownership-status.is-sold {color: #735388; background: #fbf5ffed;}
.vehicle-card-body {padding: 23px;}
.vehicle-type-tag {font-size: 10px; font-weight: 700; padding: 5px 8px; color: #65567f; background: #f4eff8; letter-spacing: .7px;}
.vehicle-card h2 {font-size: 25px; line-height: 1.3; margin: 14px 0 5px; letter-spacing: -.8px; overflow-wrap: anywhere;}
.vehicle-card p {height: auto; min-height: 39px; font-size: 13px; line-height: 1.55;}
.vehicle-chapter-dates {font-size: 11px; color: var(--muted); margin-top: 8px;}
.vehicle-facts {gap: 10px; margin-block: 19px; padding-block: 16px;}
.vehicle-facts small {font-size: 10px; color: var(--muted);}
.vehicle-facts strong {font-size: 12px;}
.vehicle-card-actions {gap: 10px;}
.vehicle-card-link {font-size: 13px; justify-content: flex-start; gap: 9px;}
.vehicle-edit-link {font-size: 11px; padding: 7px 10px; color: #65567f;}
.vehicle-quick-links {display: flex; flex-wrap: wrap; gap: 8px 15px; margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line);}
.vehicle-quick-links a {color: #65567f; font-size: 11px;}
.vehicle-quick-links a:hover {color: #68549c; text-decoration: underline;}
.add-vehicle-card {min-height: 430px; border-color: #e0d8ec; background: #fcfafe; color: #65567f;}
.add-vehicle-card > span {background: #f0e9f8; color: #a28bbb; width: 56px; height: 56px; border-radius: 18px;}
.add-vehicle-card strong {font: 700 17px var(--display);}
.add-vehicle-card small {font-size: 13px;}
.add-vehicle-card:hover {border-color: #bcaad7; color: #796197; background: #faf6ff;}
.garage-empty {min-height: 430px; background: radial-gradient(ellipse at 50% 20%, #f4effb, transparent 60%), #fff;}
.vehicle-form-chapter {display: flex; align-items: flex-start; gap: 12px; margin-top: 12px; padding-top: 22px; border-top: 1px solid var(--line);}
.vehicle-form-chapter > span {display: grid; width: 31px; height: 31px; flex-shrink: 0; place-items: center; border-radius: 10px; background: #f0eafb; color: #9a85bc; font-size: 11px;}
.vehicle-form-chapter h3 {margin: 0 0 3px; font: 700 15px var(--display);}
.vehicle-form-chapter p {margin: 0; color: var(--muted); font-size: 12px;}

/* Forms stay familiar, generously sized, and friendly to a phone keyboard. */
.field {font-size: 13px; gap: 8px;}
.field small {font-size: 11px; color: var(--muted);}
.input-prefix i, .input-suffix i {color: var(--muted);}
.field input, .field select, .field textarea {font-size: 16px; background: #fdfcfe; border-color: #e4dfeb; border-radius: 11px;}
.field input, .field select {height: 46px;}
.field input:focus, .field select:focus, .field textarea:focus {border-color: #7663a6; box-shadow: 0 0 0 3px #eee8f8;}
.field input::placeholder, .field textarea::placeholder {color: var(--muted); opacity: 1;}
.field input[type=file] {height: auto; min-height: 46px; padding: 10px; font-size: 13px;}
.form-grid {gap: 20px 18px;}
.modal-header h2 {font-size: 25px;}
.modal-header p {font-size: 13px;}
.modal-close {width: 36px; height: 36px; background: #f4eff9; color: #8e7da6;}
.modal-panel {box-shadow: 0 25px 90px #21152c30;}
.draft-notice {display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 14px;margin-bottom:20px;border-radius:12px;background:#f1eefb;color:#5b5575;font-size:13px;line-height:1.5;flex-shrink:0;}
.draft-notice > span {flex:1 1 200px;}
.log-details {flex-shrink:0;}
.log-details > summary {cursor:pointer;min-height:44px;font-weight:700;color:#45435d;}
.log-details > summary small {font-weight:400;margin-left:8px;color:#757387;}
.log-details[open] > summary {margin-bottom:20px;}
.quick-full-tank {display:flex;align-items:center;gap:10px;min-height:44px;margin-top:12px;font-size:15px;}
.quick-full-tank input {width:20px;height:20px;accent-color:#877ab8;}
.reminder-preview {padding:20px 28px;display:grid;gap:16px;}
.reminder-preview-item {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding:16px;border:1px solid #e9e3f1;border-radius:14px;}
.reminder-preview-item > div {min-width:0;flex:1 1 220px;overflow-wrap:anywhere;}
.reminder-preview-item form {display:flex;flex-wrap:wrap;gap:8px;align-items:end;}
.reminder-preview-item small {display:block;color:#706c80;line-height:1.6;}
.modal-backdrop {background: #2a203952; backdrop-filter: blur(7px);}
.modal-actions {border-top-color: #e9e3f1;}
.check-card strong {font-size: 13px;}
.check-card small {font-size: 12px;}
.check-card input:focus-visible + span, .privacy-toggle input:focus-visible + span {outline: 3px solid #7663a6; outline-offset: 3px;}
.upload-field strong {font-size: 13px;}
.upload-field small {font-size: 11px; color: var(--muted);}
.live-value-note {align-items: flex-start;}
.live-value-note strong {font-size: 12px;}
.live-value-note span {font-size: 12px; line-height: 1.6; color: var(--muted);}
.settings-form, .import-form {padding: 26px;}
.storage-summary p {margin-top: 0;}
.storage-meter {display: block; width: 100%; height: 14px; margin: 12px 0 16px; accent-color: #879acf;}
.storage-meter::-webkit-meter-bar {background: #eeedf4; border: 0; border-radius: 10px;}
.storage-meter::-webkit-meter-optimum-value {background: #a2b6df; border-radius: 10px;}
.profile-photo-row > small {font-size: 12px; color: var(--muted);}
.privacy-toggle strong {font-size: 14px;}
.privacy-toggle small, .privacy-explainer p, .import-help p, .import-tip p {font-size: 13px;}
.driving-mix-header p, .driving-mix-labels span {font-size: 12px;}
.driving-mix-header > strong small {font-size: 11px;}
.ownership-ledger-top small, .ownership-ledger-top span {font-size: 11px;}
.ownership-cost-table > div {font-size: 12px; min-height: 42px;}
.ownership-cost-table > div:first-child {font-size: 10px;}
.ownership-stat-grid small, .high-low-list > div {font-size: 11px;}
.ownership-stat-grid strong {font-size: 20px;}
.ownership-stat-grid em {font-size: 11px;}
.valuation-footer > div strong, .valuation-footer > div span, .valuation-actions > small {font-size: 11px;}

/* The enthusiast community: discovery, context, and saved garages. */
.community-hero {max-width: 850px; margin: 12px auto 30px; padding: 17px 10px 5px;}
.community-hero h1 {font-size: clamp(31px, 4vw, 49px); line-height: 1.16; letter-spacing: -1.7px; margin: 18px 0;}
.community-hero h1 em {font-style: normal; color: #a38abd;}
.community-hero p {max-width: 640px; margin-inline: auto; font-size: 15px; line-height: 1.7;}
.community-hero-tags {display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 23px;}
.community-hero-tags span {padding: 6px 11px; background: #f2edf9; color: #9c85b0; border-radius: 20px; font-size: 11px;}
.community-hero-tags span:nth-child(2) {background: #edf5ef; color: #80a18b;}
.community-hero-tags span:nth-child(3) {background: #fdf0e6; color: #b89b80;}
.community-filters {display: block; max-width: none; margin: 0 0 32px; padding: 22px; border-radius: 20px; box-shadow: var(--shadow);}
.community-filter-primary {display: grid; grid-template-columns: 1fr 1fr 1fr auto; align-items: end; gap: 12px;}
.community-filters label {min-width: 0; gap: 7px;}
.community-filters label > span {font-size: 11px; text-transform: none; color: #656174;}
.community-filters input, .community-filters select {width: 100%; min-width: 0; height: 44px; font-size: 14px; padding-inline: 12px; border: 1px solid #ebe5f1; border-radius: 10px; background: #faf8fd; color: #655c75;}
.community-filters input:focus, .community-filters select:focus {outline: 2px solid #7663a6; outline-offset: 1px;}
.community-filter-secondary {display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 15px; margin-top: 18px; padding-top: 15px; border-top: 1px solid #f0ecf5;}
.community-more-filters {flex: 1; min-width: 0;}
.community-more-filters summary {display: flex; justify-content: space-between; align-items: center; max-width: 245px; cursor: pointer; list-style: none; padding: 7px 0; font-size: 12px; color: #65567f; font-weight: 600;}
.community-more-filters summary::-webkit-details-marker {display: none;}
.community-more-filters summary span {font-size: 18px; line-height: 1; transition: .2s;}
.community-more-filters[open] summary span {transform: rotate(45deg);}
.community-filter-details {display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; padding-top: 18px;}
.community-filter-details p {grid-column: 1 / -1; margin: 0; color: #968b9e; font-size: 11px; line-height: 1.7;}
.community-filters .community-sort {display: flex; flex-direction: row; align-items: center; gap: 8px;}
.community-sort select {width: 190px; height: 34px; border: 0; font-size: 12px; background: #fff;}
.filter-clear {padding: 7px 0; color: #65567f; font-size: 12px;}
.community-layout {grid-template-columns: minmax(0,1fr) 300px; gap: 25px;}
.community-layout > div, .community-aside {min-width: 0;}
.community-tabs {display: flex; gap: 5px; margin: 18px 0 12px;}
.community-tabs a {font-size: 12px; padding: 8px 14px; color: #65567f; border: 1px solid transparent; border-radius: 20px;}
.community-tabs a.active {color: #65567f; background: #f0eafb; border-color: #e8dff6;}
.community-method-note {color: #8e8598; font-size: 11px; line-height: 1.7; max-width: 650px; margin: 0 0 20px;}
.community-vehicle-grid {gap: 18px;}
.community-vehicle-grid > article {border-radius: 20px; box-shadow: none; transition: .2s;}
.community-vehicle-grid > article:hover {box-shadow: 0 13px 28px #4934600a; transform: translateY(-3px);}
.community-photo {height: 200px; overflow: hidden; background: #efebf7;}
.discovery-color-2 .community-photo {background: #edf4ef;}
.discovery-color-3 .community-photo {background: #fbf0e6;}
.community-photo svg {width: 77%; max-width: 310px; stroke: #a597be; stroke-width: 1.4;}
.discovery-color-2 .community-photo svg {stroke: #91ac9a;}
.discovery-color-3 .community-photo svg {stroke: #c1a88f;}
.community-photo > span {font-size: 10px; top: 14px; left: 14px; border-radius: 20px; padding: 5px 9px;}
.community-vehicle-body {min-width: 0; padding: 21px; overflow-wrap: anywhere;}
.community-vehicle-body > small {color: #a297ad; font-size: 11px;}
.community-vehicle-body h3 {font-size: 25px; line-height: 1.35; letter-spacing: -.7px; margin-top: 4px; margin-bottom: 19px;}
.community-vehicle-body h3 > span {display: block; margin-top: 4px; color: #a89cac; font: 500 11px var(--font); letter-spacing: 0;}
.community-vehicle-body > .community-card-metrics {align-items: center; gap: 12px;}
.community-card-metrics > strong {font-size: 27px !important; color: #5d526e;}
.community-card-metrics strong em {font-size: 10px !important; color: var(--muted);}
.community-card-metrics > span {text-align: right; font-size: 10px !important;}
.community-card-metrics > span b {display: block; font-size: 15px; color: #82708d;}
.community-vehicle-body p {font-size: 11px; line-height: 1.7; color: #a093ab;}
.community-sample {padding-bottom: 12px; border-bottom: 1px solid #f0ebf4;}
.community-computer {color: #9a88a5 !important; margin-bottom: 12px !important;}
.community-owner-link {display: flex; align-items: center; gap: 9px; padding-top: 9px; font-size: 12px !important; color: #8c7b9c !important;}
.community-owner-link > span:nth-child(2) {flex: 1; min-width: 0; overflow-wrap: anywhere;}
.community-owner-link svg {width: 16px; height: 16px;}
.owner-monogram {display: grid; width: 29px; height: 29px; flex: 0 0 auto; place-items: center; border-radius: 9px; background: #f1eafa; color: #65567f; font-size: 9px;}
.garage-save-form {margin-top: 15px;}
.garage-save-form .button {width: 100%;}
.profile-save {margin-top: 18px;}
.community-aside {display: flex; flex-direction: column; gap: 18px;}
.leaderboard-card {border-radius: 20px; box-shadow: none;}
.leaderboard-card header {padding: 23px; background: #faf7fd; border-bottom: 1px solid #f0ebf5;}
.leaderboard-card header h2 {font-size: 20px; letter-spacing: -.5px; line-height: 1.35; margin: 7px 0 10px;}
.leaderboard-card header p {font-size: 12px; color: #a090ab; line-height: 1.6; margin: 0;}
.leaderboard-card ol {padding-inline: 18px; padding-bottom: 9px;}
.leaderboard-card li {grid-template-columns: 19px minmax(0,1fr) auto; gap: 8px; padding: 16px 0;}
.leaderboard-card li:first-child {border-top: 0;}
.leaderboard-card li > b {font-size: 10px; color: var(--muted);}
.leaderboard-card li > a strong {font-size: 11px;}
.leaderboard-card li > a small {font-size: 10px;}
.leaderboard-card li > em {font-size: 12px;}
.leader-avatar {background: #ede6f8; color: #65567f;}
.community-invite {padding: 25px; background: #eff6f1; border: 1px solid #e4ede7; border-radius: 20px;}
.community-invite .card-kicker {color: #86a58f;}
.community-invite h3 {font: 700 22px/1.35 var(--display); color: #66846e; margin: 12px 0; letter-spacing: -.6px;}
.community-invite p {font-size: 13px; color: #8da193; line-height: 1.7;}
.community-invite a {color: #416d55; font-size: 12px; font-weight: 700;}
.community-invite small {display: block; font-size: 10px; margin-top: 16px; color: #92a699; line-height: 1.65;}
.empty-community {padding: 50px 28px; border-style: solid; background: #fff;}
.empty-community-icon {display: grid; width: 62px; height: 62px; margin: 0 auto 18px; place-items: center; border-radius: 20px; background: #f0ebf9; color: #b6a2d1;}
.empty-community-icon svg {width: 28px; height: 28px;}
.empty-community h3 {font: 700 25px var(--display); margin: 0 0 12px;}
.empty-community p {max-width: 360px; margin: 0 auto 20px; font-size: 14px; line-height: 1.7;}

/* A welcoming front door. Product concepts below contain no invented owner data. */
.marketing-body {background: #fff;}
.marketing-nav {height: 94px; max-width: 1380px;}
.marketing-nav nav a, .marketing-signin {font-size: 14px;}
.marketing-brand .brand-mark {border-radius: 12px; font-size: 20px;}
.marketing-hero {max-width: 1380px; min-height: 700px; grid-template-columns: 1fr 1.02fr; gap: 70px; padding-top: 60px; padding-bottom: 95px;}
.marketing-eyebrow {font-size: 10px; letter-spacing: 2px; color: #a18bb5;}
.hero-copy h1 {font-size: clamp(55px, 6vw, 80px); letter-spacing: -4.3px; line-height: 1.04; margin: 22px 0 26px;}
.hero-copy h1 em {color: #b69bc8;}
.hero-copy > p {font-size: 17px; line-height: 1.85; max-width: 510px; color: #91839e;}
.hero-actions {gap: 20px; flex-wrap: wrap;}
.hero-button {font-size: 13px; padding: 15px 19px; min-height: 51px;}
.hero-link {font-size: 12px; color: #9c83b2;}
.hero-trust {gap: 17px; font-size: 10px; color: #a69bac; flex-wrap: wrap;}
.hero-trust i {color: #a7bea9; margin-right: 4px;}
.ownership-preview {position: relative; min-width: 0; overflow: hidden; padding: 20px; border: 1px solid #ece5f2; border-radius: 28px; background: #fff; box-shadow: 0 22px 75px #6f518514; transform: rotate(1.5deg);}
.preview-top {display: flex; align-items: center; gap: 10px; color: #9a87ab; font-size: 11px; padding-bottom: 20px;}
.preview-mark {display: grid; width: 29px; height: 29px; place-items: center; border-radius: 10px; background: #c0a6d4; color: #fff; font: 800 19px var(--display);}
.preview-private {display: flex; align-items: center; gap: 5px; margin-left: auto; font-size: 9px; color: #b1a4bb;}
.preview-private svg {width: 12px; height: 12px;}
.preview-car {position: relative; overflow: hidden; padding: 29px 15px 22px; border-radius: 20px; background: #f3edf9; text-align: center;}
.preview-car > svg {position: relative; z-index: 2; width: 96%; height: auto; stroke: #b09ac4; stroke-width: 2;}
.car-body {fill: #fff;}
.car-window {fill: #e2d8ed;}
.car-wheel {fill: #c7b4d7; stroke: #fff; stroke-width: 4;}
.car-hub {fill: #fff; stroke: none;}
.car-shadow {fill: #e3d8ed; stroke: none;}
.preview-orbit {position: absolute; border: 1px solid #e5d9ed; border-radius: 50%;}
.orbit-a {width: 290px; height: 290px; top: -75px; right: -60px;}
.orbit-b {width: 390px; height: 390px; top: -125px; right: -110px;}
.preview-car-caption {position: relative; z-index: 2; margin-top: 14px;}
.preview-car-caption span {display: block; font-size: 10px; color: #ad96bf;}
.preview-car-caption strong {display: block; margin-top: 5px; font: 700 23px var(--display); color: #8c719f; letter-spacing: -.7px;}
.preview-chapters {display: flex; align-items: center; gap: 9px; padding: 23px 6px;}
.preview-chapters span {display: flex; align-items: center; gap: 7px; color: #9f8eac; font-size: 9px; white-space: nowrap;}
.preview-chapters b {display: grid; width: 23px; height: 23px; border-radius: 50%; place-items: center; background: #f3eef9; color: #b098c3; font-size: 8px;}
.preview-chapters i {flex: 1; height: 1px; background: #ece6f1;}
.preview-tools {display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border-top: 1px solid #f1ebf5; padding-top: 20px;}
.preview-tools > div {display: flex; align-items: center; gap: 10px;}
.preview-tool-icon {display: grid; width: 39px; height: 39px; place-items: center; border-radius: 13px; flex-shrink: 0;}
.preview-tool-icon svg {width: 19px; height: 19px;}
.preview-tool-icon.mint {background: #edf5ef; color: #9ab59f;}
.preview-tool-icon.peach {background: #fdf1e7; color: #cfb096;}
.preview-tools strong {display: block; font-size: 11px; color: #9986a9;}
.preview-tools small {display: block; margin-top: 3px; font-size: 9px; color: #b6a8bf;}
.marketing-proof {background: #fcfafe; border-color: #f2edf7; color: #a191ad; font-size: 13px; gap: 30px; padding-block: 27px;}
.marketing-proof > span {color: #b9adbf;}
.marketing-proof i {background: #d9c7e4;}
.feature-section {padding-block: 110px;}
.section-heading {max-width: 760px;}
.section-heading h2 {font-size: clamp(32px,4vw,46px); letter-spacing: -1.8px; line-height: 1.18; color: #594768; margin-block: 15px;}
.section-heading p {color: #a492af; font-size: 16px;}
.feature-grid {gap: 23px;}
.feature-card {min-height: 355px; border: 0; padding: 29px; border-radius: 23px;}
.feature-card.lavender {background: #f1ebfa;}
.feature-card.peach {background: #fff2e8;}
.feature-card.mint {background: #edf5ef;}
.feature-number {font-size: 9px; color: #aa92bd; letter-spacing: 1px; top: 26px;}
.feature-icon {margin-top: 44px; width: 43px; height: 43px; border-radius: 14px; color: #ad96c4; background: #ffffffaa;}
.peach .feature-icon {color: #c7a585;}
.mint .feature-icon {color: #95b09a;}
.feature-card h3 {font-size: 24px; letter-spacing: -.7px; color: #866d97; margin-top: 23px;}
.feature-card p {font-size: 13px; color: #9f89ad; line-height: 1.8;}
.feature-card.peach h3 {color: #b18e6f;}
.feature-card.peach p {color: #bea38b;}
.feature-card.mint h3 {color: #7f9c85;}
.feature-card.mint p {color: #96af9c;}
.feature-tags {display: flex; flex-wrap: wrap; gap: 6px; margin-top: 23px;}
.feature-tags span {padding: 5px 8px; border: 1px solid #ffffff99; border-radius: 6px; background: #ffffff70; color: #a58eb6; font-size: 9px;}
.peach .feature-tags span {color: #ba9c83;}
.mint .feature-tags span {color: #92a899;}
.ownership-promise {display: grid; grid-template-columns: 1fr 1fr; gap: 100px; max-width: 1182px; margin: 0 auto 110px; padding: 55px; background: #fbf9fd; border-radius: 27px; border: 1px solid #f2edf7;}
.ownership-promise h2 {font: 800 31px/1.2 var(--display); color: #816a94; letter-spacing: -1.1px; margin: 16px 0;}
.ownership-promise p {font-size: 13px; line-height: 1.8; color: #a18fac;}
.ownership-promise ol {list-style: none; padding: 0; margin: 0;}
.ownership-promise li {display: flex; align-items: flex-start; gap: 16px; padding-block: 15px;}
.ownership-promise li > span {display: grid; width: 32px; height: 32px; flex-shrink: 0; place-items: center; border: 1px solid #e8dcf0; border-radius: 11px; background: #f4eef9; color: #b39bc4; font-size: 10px;}
.ownership-promise li strong {font: 700 16px var(--display); color: #947ca7;}
.ownership-promise li p {margin: 4px 0 0; font-size: 12px;}
.home-community {background: #f8f5fc;}
.home-community-grid > a {border-color: #eee6f4; border-radius: 18px; padding: 21px;}
.home-community-grid small {font-size: 10px;}
.home-community-grid h3 {font-size: 18px;}
.home-community-grid > a > span:last-child {font-size: 10px;}
.marketing-cta {background: #f3edf9; padding-block: 100px;}
.marketing-cta h2 {color: #8e73a4; font-size: clamp(38px,5vw,61px); letter-spacing: -2.2px;}
.marketing-cta p {font-size: 15px; color: #a18aaf; line-height: 1.8;}
.marketing-footer {background: #fff; border-color: #f0eaf5; color: #ac9eb8;}
.marketing-body .community-hero {margin-top: 45px; padding-inline: 24px;}
.marketing-body .community-filters {max-width: 1152px; margin-inline: auto;}
.marketing-body .community-layout {max-width: 1200px; margin-bottom: 80px;}
.public-profile-hero > div {min-width: 0; flex: 1;}
.public-profile-hero h1 {font-size: clamp(31px,4vw,45px); overflow-wrap: anywhere;}
.public-profile-hero p {line-height: 1.7; overflow-wrap: anywhere;}
.public-profile-hero small {color: var(--muted);}
.public-profile-hero form {flex: 0 0 auto; max-width: 100%;}
.public-avatar img {width: 100%; height: 100%; object-fit: cover;}
.public-profile-stats small {font-size: 12px; color: var(--muted);}
.public-garage {background: #faf7fd;}
.public-vehicle-grid {grid-template-columns: repeat(2,minmax(0,1fr));}
.public-vehicle-grid > article {min-width: 0; grid-template-columns: minmax(0,.45fr) minmax(0,.55fr); border-color: #e9e0f1;}
.public-vehicle-grid > article > div {min-width: 0; overflow-wrap: anywhere;}
.public-vehicle-photo {min-width: 0; min-height: 0; height: 260px;}
.public-vehicle-photo svg {max-width: 260px; max-height: 150px;}
.public-vehicle-grid dl {grid-template-columns: repeat(2,minmax(0,1fr));}
.public-vehicle-grid dl > div {min-width: 0;}
.public-vehicle-grid small {font-size: 11px; color: var(--muted);}
.public-vehicle-grid p {font-size: 13px;}
.public-vehicle-grid dt {font-size: 10px; color: var(--muted);}
.public-vehicle-grid dd {font-size: 15px;}

/* Ownership ledger, journey, and the record an owner can take with them. */
.ownership-stats {display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 15px; margin-bottom: 24px;}
.ownership-stat {padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: #fff;}
.ownership-stat:nth-child(1) {background: #f1edf9; border-color: #e9e1f4;}
.ownership-stat:nth-child(2) {background: #edf5ef; border-color: #e1ece5;}
.ownership-stat span, .ownership-stat small, .ownership-stat strong {display: block;}
.ownership-stat > span {color: #93849f; font-size: 12px;}
.ownership-stat strong {font: 800 28px var(--display); margin-top: 11px; letter-spacing: -.8px;}
.ownership-stat small {font-size: 11px; color: #a296ab; margin-top: 8px; line-height: 1.6;}
.journal-toolbar {display: flex; flex-wrap: wrap; align-items: end; gap: 14px; margin-bottom: 24px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: #fff;}
.journal-toolbar .field {flex: 1; min-width: 130px;}
.journal-toolbar .button {flex-shrink: 0;}
.journal-timeline {position: relative; padding: 6px 25px; background: #fff;}
.journal-note {margin: -5px 0 24px; padding: 16px 20px; border-radius: 14px; background: #f7f3fc; font-size: 12px; color: #786788; line-height: 1.8;}
.journal-note a {color: #765b93; text-decoration: underline; text-underline-offset: 3px;}
.journal-actions {display: flex; flex-wrap: wrap; align-items: center; gap: 9px;}
.journal-card {overflow: hidden;}
.journal-event-date strong, .journal-event-date small {display: block;}
.journal-event-date strong {font-size: 12px; font-weight: 700;}
.journal-event-date small {font-size: 10px; margin-top: 3px;}
.journal-event {display: grid; grid-template-columns: 95px 40px minmax(0,1fr) auto; gap: 18px; align-items: start; padding: 24px 0; border-bottom: 1px solid #f0eaf5;}
.journal-event:last-child {border-bottom: 0;}
.journal-event > time, .journal-event-date {color: var(--muted); font-size: 12px; padding-top: 9px;}
.journal-event-icon {display: grid; width: 38px; height: 38px; place-items: center; border-radius: 13px; background: #f0e9fa; color: #9574ac; font-size: 17px;}
.journal-event-kind {color: #65567f; font-size: 10px; text-transform: uppercase; letter-spacing: .9px;}
.journal-event-fuel .journal-event-icon {background: #edf5ef; color: #6e9177;}
.journal-event-maintenance .journal-event-icon {background: #fff1e7; color: #b28f70;}
.journal-event-expense .journal-event-icon {background: #f3eafa; color: #9c77af;}
.journal-event-body {min-width: 0; padding-top: 2px;}
.journal-event-body h3 {font: 700 16px var(--display); margin: 0 0 6px; overflow-wrap: anywhere;}
.journal-event-body p {color: #a391ae; font-size: 12px; margin: 4px 0; line-height: 1.65;}
.journal-event-body small {font-size: 11px; color: #af9fba;}
.journal-event-body a {font-size: 12px; color: #735388; font-weight: 600;}
.journal-event-body h3 a {font: inherit; color: inherit;}
.journal-event-body h3 {margin-top: 5px;}
.journal-event-notes {margin-top: 9px;}
.journal-event-notes summary {font-size: 11px; color: #9580a4; cursor: pointer;}
.journal-event-notes p {white-space: normal; overflow-wrap: anywhere; max-width: 650px;}
.journal-event-value > a {display: block; margin-top: 7px; font: 600 11px var(--font); color: #735388;}
.journal-event-value {font: 700 15px var(--display); padding-top: 8px; text-align: right; white-space: nowrap;}
.journal-event-value small {display: block; color: #b1a3ba; font: 500 10px var(--font); margin-top: 5px;}
.journal-pagination {display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-top: 23px; font-size: 12px; color: #a18dac;}
.journal-card > .journal-pagination, .log-card > .journal-pagination {padding: 0 24px 22px;}
.journal-export {display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 25px; padding: 25px; background: #faf7fd;}
.journal-export > div {min-width: 0;}
.journal-export h2 {font: 700 20px var(--display); margin: 7px 0;}
.journal-export p {max-width: 580px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.8;}
.expense-category-grid {display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 25px;}
.expense-category {padding: 17px; border: 1px solid #ede5f4; border-radius: 15px; background: #fff;}
.expense-category > span, .expense-category > small {display: block; color: #a38fae; font-size: 12px;}
.expense-category > strong {display: block; margin-top: 8px; font: 700 18px var(--display); color: #826a95;}
.report-sheet {max-width: 1100px; margin-inline: auto; padding: 42px; border: 1px solid var(--line); border-radius: 23px; background: #fff; box-shadow: var(--shadow);}
.report-header {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 25px; padding-bottom: 28px; border-bottom: 1px solid var(--line);}
.report-header h1, .report-header h2 {font: 800 30px/1.2 var(--display); letter-spacing: -1px; margin: 9px 0;}
.report-header p {font-size: 14px; color: var(--muted); margin: 6px 0;}
.report-header img {width: 180px; height: 135px; object-fit: cover; border-radius: 15px;}
.report-summary {display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin: 27px 0;}
.report-summary > div, .report-summary > article {padding: 20px; background: #f8f5fb; border-radius: 14px;}
.report-summary small, .report-summary span {display: block; color: #a591b2; font-size: 11px;}
.report-summary strong {display: block; margin-top: 7px; font: 800 18px var(--display);}
.report-section {margin-top: 32px;}
.report-section h2 {font: 700 20px var(--display); margin-bottom: 16px;}
.report-section p {font-size: 13px; color: #9e8ca8; line-height: 1.75;}
.report-table {width: 100%; border-collapse: collapse; font-size: 12px;}
.report-table th {padding: 12px 10px; text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: #65567f; border-bottom: 1px solid #e8deef;}
.report-table td {padding: 14px 10px; border-bottom: 1px solid #f0eaf5; vertical-align: top; overflow-wrap: anywhere;}
.report-table small {display: block; margin-top: 4px; color: #aa96b5; font-size: 11px;}
.report-actions {display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 auto 25px; max-width: 1100px;}
.report-header > div > small {display: block; margin-top: 5px; font-size: 11px; color: var(--muted);}
.report-picker {padding: 27px; max-width: 650px;}
.report-picker form {display: flex; align-items: end; gap: 15px;}
.report-picker .field {flex: 1;}
.check-line {display: flex; align-items: center; gap: 9px; font-size: 13px; color: #807089; cursor: pointer;}
.check-line input {width: 17px; height: 17px; accent-color: #9f87b6;}
.report-options {justify-content: flex-start;}
.report-footer {margin-top: 35px; padding-top: 23px; border-top: 1px solid var(--line);}
.report-footer strong {font: 700 14px var(--display); color: #9178a2;}
.report-footer p {max-width: 730px; font-size: 11px; color: #a08cad; line-height: 1.8;}
.report-disclaimer {font-size: 11px !important;}
.report-history {table-layout: fixed;}
.report-history th:first-child {width: 18%;}
.report-history th:nth-child(2) {width: 47%;}
.report-history th:nth-child(3) {width: 19%;}
.report-history th:nth-child(4) {width: 16%;}
.report-section > .report-table:not(.report-history) th {width: 70%;}

/* Keep pastel surfaces soft while text remains comfortably readable. */
.eyebrow, .card-kicker, .marketing-eyebrow, .feature-number {color: #725d82;}
.hero-copy h1 em {color: #aa86bf;}
.hero-copy > p, .hero-trust, .section-heading p, .marketing-cta p, .ownership-promise p,
.feature-card p, .feature-card.peach p, .feature-card.mint p,
.community-hero p, .community-method-note, .community-filter-details p,
.community-vehicle-body > small, .community-vehicle-body p,
.community-vehicle-body h3 > span, .leaderboard-card header p,
.community-invite p, .community-invite small, .community-invite .card-kicker,
.journal-event-body p, .journal-event-body small, .journal-event-value small,
.ownership-stat small, .report-section p, .report-footer p, .report-table small {color: #655d73;}
.feature-card h3 {color: #785b8c;}
.feature-card.peach h3 {color: #97734f;}
.feature-card.mint h3 {color: #5d8167;}
.feature-tags span {color: #84689a;}
.peach .feature-tags span {color: #9b785b;}
.mint .feature-tags span {color: #64806c;}
.hero-link, .community-owner-link, .community-computer {color: #735388 !important;}
.preview-top, .preview-tools strong {color: #826795;}
.preview-private, .preview-tools small, .preview-car-caption span, .preview-chapters span {color: #90789e;}
.community-hero-tags span {color: #8a709f;}
.community-hero-tags span:nth-child(2) {color: #61856c;}
.community-hero-tags span:nth-child(3) {color: #9c795d;}
.community-invite h3 {color: #47705a;}
.report-summary span, .report-summary small, .ownership-stat > span {color: #65567f;}
.card-header > div > p:not(.card-subtitle) {margin: 5px 0 0; font-size: 12px; color: var(--muted);}
.public-profile-hero form {margin-top: 18px;}

@media (max-width: 1350px) {
    .garage-grid {grid-template-columns: repeat(2,minmax(0,1fr));}
    .community-layout {grid-template-columns: minmax(0,1fr) 270px; gap: 18px;}
    .community-vehicle-grid {grid-template-columns: 1fr;}
    .companion-actions {grid-template-columns: repeat(2,minmax(0,1fr));}
    .metric-grid {grid-template-columns: repeat(2,minmax(0,1fr));}
    .marketing-hero {gap: 40px;}
    .marketing-body .community-vehicle-grid {grid-template-columns: repeat(2,minmax(0,1fr));}
    .home-community-grid {grid-template-columns: 1fr;}
    .ownership-promise {margin-inline: 34px; gap: 45px;}
}
@media (max-width: 1050px) {
    .community-layout {grid-template-columns: 1fr;}
    .community-vehicle-grid {grid-template-columns: repeat(2,minmax(0,1fr));}
    .community-aside {display: grid; grid-template-columns: 1fr 1fr; align-items: start;}
    .community-filter-primary {grid-template-columns: 1fr 1fr;}
    .insight-grid {grid-template-columns: 1fr;}
    .companion-hero {align-items: flex-start; flex-direction: column;}
    .companion-hero .companion-actions {width: 100%; flex-basis: auto; grid-template-columns: repeat(4,minmax(0,1fr));}
    .ownership-stats {grid-template-columns: repeat(2,minmax(0,1fr));}
    .marketing-hero {grid-template-columns: 1fr 1fr; min-height: 620px;}
    .hero-copy h1 {font-size: 61px;}
    .hero-copy > p {font-size: 15px;}
    .preview-private {display: none;}
    .preview-chapters {gap: 5px;}
    .preview-chapters span {font-size: 8px; gap: 5px;}
    .preview-tools {gap: 8px;}
    .preview-tools > div {gap: 7px;}
    .preview-tools small {font-size: 8px;}
    .feature-grid {grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px;}
    .feature-card {padding: 22px;}
    .feature-card:last-child {grid-column: auto;}
    .feature-card h3 {font-size: 21px;}
    .feature-number {right: 22px; font-size: 8px;}
    .feature-tags {gap: 4px;}
    .public-vehicle-grid {grid-template-columns: 1fr;}
}
@media (max-width: 900px) {
    .sidebar {width: 265px;}
    .topbar-title {display: block; margin-right: auto; margin-left: 10px;}
    .topbar-title small {display: none;}
    .topbar {padding-inline: 20px; height: 70px;}
    .main-content {padding: 27px 25px 45px;}
    .companion-hero {padding: 28px;}
    .community-hero {margin-top: 0;}
    .marketing-hero {grid-template-columns: 1fr; gap: 50px; max-width: 760px; padding-top: 40px; padding-bottom: 75px;}
    .hero-copy {max-width: 610px;}
    .hero-copy h1 {font-size: 68px;}
    .hero-copy > p {font-size: 17px;}
    .ownership-preview {max-width: 590px; width: 100%; justify-self: center;}
    .preview-private {display: flex;}
    .preview-chapters span {font-size: 10px;}
    .preview-tools small {font-size: 10px;}
    .preview-tools strong {font-size: 12px;}
    .feature-grid {grid-template-columns: 1fr;}
    .feature-card {min-height: 285px; padding: 30px;}
    .feature-card h3 {font-size: 25px;}
    .feature-card p {max-width: 100%;}
    .feature-icon {margin-top: 32px;}
    .feature-number {font-size: 9px;}
    .feature-tags span {font-size: 10px;}
    .ownership-promise {padding: 34px; gap: 30px;}
    .ownership-promise h2 {font-size: 28px;}
    .marketing-body .community-filters {margin-inline: 24px;}
    .expense-category-grid {grid-template-columns: repeat(2,minmax(0,1fr));}
}
@media (max-width: 640px) {
    .topbar {height: 65px; padding-inline: 12px; gap: 5px;}
    .lower-grid {grid-template-columns: minmax(0, 1fr);}
    .lower-grid > .card {min-width: 0;}
    .topbar-title {max-width: 115px; margin-left: 4px;}
    .topbar-title span {font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
    .topbar-actions {gap: 6px;}
    .vehicle-switcher select {height: 37px; min-width: 0; max-width: 123px; padding-left: 30px; font-size: 11px;}
    .vehicle-switcher svg {left: 9px; width: 14px;}
    .topbar-actions .button {min-height: 37px; padding: 8px;}
    .main-content {padding: 24px 17px 40px;}
    .page-intro {gap: 18px;}
    .page-intro h1 {font-size: 29px;}
    .page-intro p {font-size: 14px;}
    .page-intro .button {align-self: flex-start;}
    .page-intro .intro-actions .button {align-self: stretch;}
    .card-header {padding: 20px 18px 0; gap: 10px; flex-wrap: wrap;}
    .card-header h2 {font-size: 18px;}
    .card-subtitle {font-size: 12px;}
    .card {border-radius: 19px;}
    .companion-hero {padding: 25px 21px; border-radius: 22px; margin-bottom: 18px; align-items: flex-start; flex-direction: column; gap: 18px;}
    .companion-hero h1, .companion-hero h2 {font-size: 30px; letter-spacing: -1.1px;}
    .companion-hero p {font-size: 13px;}
    .companion-actions {gap: 9px; margin-bottom: 22px;}
    .companion-actions > a, .quick-action {padding: 13px; gap: 9px; border-radius: 14px; font-size: 12px;}
    .companion-actions small {font-size: 10px;}
    .companion-hero .companion-actions {grid-template-columns: repeat(2,minmax(0,1fr));}
    .companion-hero .companion-actions > a {min-height: 48px; font-size: 12px;}
    .companion-actions svg {width: 18px; height: 18px;}
    .companion-section {margin-top: 25px;}
    .insight-card {padding: 19px;}
    .ownership-progress {gap: 7px; font-size: 10px; flex-wrap: wrap;}
    .ownership-progress span + span {padding-left: 7px;}
    .ownership-progress i {min-width: 10px;}
    .metric-grid {gap: 10px; grid-template-columns: repeat(2,minmax(0,1fr));}
    .metric-card {padding: 16px; min-height: 173px; border-radius: 17px;}
    .metric-head {margin-bottom: 14px; gap: 5px;}
    .metric-icon {width: 31px; height: 31px; border-radius: 10px;}
    .metric-icon svg {width: 17px; height: 17px;}
    .metric-card > strong {font-size: 25px; letter-spacing: -.8px;}
    .metric-card > strong small {font-size: 10px;}
    .metric-label {font-size: 11px;}
    .metric-foot {font-size: 10px;}
    .trend-pill {font-size: 8px;}
    .garage-grid {grid-template-columns: 1fr; gap: 18px;}
    .vehicle-art {height: 205px;}
    .vehicle-card-body {padding: 21px;}
    .vehicle-card h2 {font-size: 26px;}
    .vehicle-facts strong {font-size: 13px;}
    .add-vehicle-card {min-height: 215px;}
    .garage-empty {padding: 30px 22px;}
    .empty-list-card p {font-size: 14px;}
    .community-hero {padding: 8px 0 0; margin-bottom: 26px; text-align: left;}
    .community-hero .eyebrow {justify-content: flex-start;}
    .community-hero h1 {font-size: 32px; letter-spacing: -1px;}
    .community-hero p {font-size: 13px;}
    .community-hero-tags {justify-content: flex-start; gap: 5px; margin-top: 18px;}
    .community-hero-tags span {font-size: 9px; padding: 5px 8px;}
    .community-filters {padding: 17px; margin-bottom: 26px; border-radius: 17px;}
    .community-filter-primary {gap: 12px;}
    .community-filter-primary > label:first-child {grid-column: 1 / -1;}
    .community-filter-primary > button {grid-column: 1 / -1;}
    .community-filters input, .community-filters select {font-size: 16px;}
    .community-filter-secondary {gap: 12px; flex-direction: column;}
    .community-more-filters {width: 100%;}
    .community-more-filters summary {max-width: none; font-size: 12px;}
    .community-filter-details {grid-template-columns: 1fr 1fr;}
    .community-filter-details > label:nth-child(5) {grid-column: 1 / -1;}
    .community-filters .community-sort {width: 100%; justify-content: space-between;}
    .community-sort select {width: 200px; font-size: 12px;}
    .community-layout, .community-vehicle-grid, .marketing-body .community-vehicle-grid {grid-template-columns: 1fr;}
    .community-layout {gap: 24px;}
    .section-row {align-items: center;}
    .section-row h2 {font-size: 22px;}
    .section-row > span {font-size: 10px;}
    .community-method-note {font-size: 11px;}
    .community-method-note {font-size: 12px;}
    .community-vehicle-body p, .community-vehicle-body > small {font-size: 12px;}
    .community-owner-link {font-size: 13px !important;}
    .community-invite p, .leaderboard-card header p {font-size: 13px;}
    .community-card-metrics > span {font-size: 11px !important;}
    .community-photo {height: 210px;}
    .community-aside {display: flex;}
    .community-vehicle-body {padding: 22px;}
    .leaderboard-card li > a strong {font-size: 13px;}
    .leaderboard-card li > em {font-size: 13px;}
    .leaderboard-card header h2 {font-size: 23px;}
    .community-invite h3 {font-size: 23px;}
    .modal-header h2 {font-size: 23px;}
    .modal-header p {font-size: 12px;}
    .modal-form {padding-top: 22px;}
    .modal-form > .form-grid, .modal-form > .form-section {flex-shrink: 0;}
    .modal-actions {padding-top: 16px;}
    .modal-actions .button {font-size: 13px;}
    .form-grid {gap: 19px;}
    .live-value-note strong, .live-value-note span {font-size: 12px;}
    .settings-form, .import-form {padding: 20px;}
    .marketing-nav {height: 76px; padding-inline: 20px;}
    .marketing-nav .brand {font-size: 25px;}
    .marketing-nav .button {min-height: 40px; padding: 10px 12px; font-size: 11px;}
    .marketing-hero {padding: 32px 23px 55px; gap: 35px;}
    .hero-copy h1 {font-size: 53px; letter-spacing: -2.8px; margin-block: 19px 22px;}
    .hero-copy > p {font-size: 15px; line-height: 1.8;}
    .marketing-eyebrow {font-size: 9px; letter-spacing: 1.5px;}
    .hero-actions {gap: 18px; flex-direction: column; align-items: flex-start; margin-top: 25px;}
    .hero-button {font-size: 13px;}
    .hero-trust {gap: 9px 12px; font-size: 9px; margin-top: 23px;}
    .ownership-preview {transform: none; border-radius: 22px; padding: 15px;}
    .preview-top {font-size: 10px; padding-bottom: 15px;}
    .preview-private {font-size: 8px;}
    .preview-car {padding: 21px 7px 20px;}
    .preview-car-caption strong {font-size: 21px;}
    .preview-chapters {padding: 18px 1px; gap: 5px;}
    .preview-chapters span {font-size: 8px; gap: 4px;}
    .preview-chapters b {width: 18px; height: 18px; font-size: 7px;}
    .preview-tools {padding-top: 15px; gap: 5px;}
    .preview-tool-icon {width: 31px; height: 31px; border-radius: 10px;}
    .preview-tool-icon svg {width: 16px; height: 16px;}
    .preview-tools strong {font-size: 9px;}
    .preview-tools small {font-size: 8px;}
    .marketing-proof {gap: 19px; padding: 22px; font-size: 11px; white-space: nowrap;}
    .feature-section, .home-community {padding: 70px 23px;}
    .section-heading {margin-bottom: 30px;}
    .section-heading h2 {font-size: 32px; letter-spacing: -1.3px;}
    .section-heading p {font-size: 14px;}
    .feature-grid {gap: 17px;}
    .feature-card {padding: 28px;}
    .feature-card h3 {font-size: 24px;}
    .feature-card p {font-size: 13px;}
    .ownership-promise {grid-template-columns: 1fr; padding: 28px; margin: 0 23px 70px; gap: 18px;}
    .ownership-promise h2 {font-size: 28px;}
    .ownership-promise p {font-size: 13px;}
    .ownership-promise li {padding-block: 12px;}
    .home-community-grid > a {grid-template-columns: 70px 1fr auto; gap: 5px 11px; padding: 15px;}
    .community-car-thumb {width: 70px; height: 70px;}
    .home-community-grid h3 {font-size: 16px;}
    .home-community-grid strong {font-size: 20px;}
    .home-community-grid small, .home-community-grid > a > span:last-child {font-size: 9px;}
    .marketing-cta {padding: 75px 24px;}
    .marketing-cta h2 {font-size: 42px; letter-spacing: -1.5px;}
    .marketing-cta p {font-size: 14px;}
    .marketing-footer {padding: 28px 24px;}
    .marketing-body .community-hero {margin-top: 23px; padding-inline: 22px;}
    .marketing-body .community-filters {margin-inline: 22px;}
    .marketing-body .community-layout {padding-inline: 22px;}
    .ownership-stats {gap: 10px;}
    .ownership-stat {padding: 17px; border-radius: 17px;}
    .ownership-stat > span {font-size: 11px;}
    .ownership-stat strong {font-size: 23px;}
    .ownership-stat small {font-size: 10px;}
    .journal-toolbar {padding: 17px; gap: 12px;}
    .journal-toolbar .field {flex-basis: 100%;}
    .journal-toolbar .button {flex: 1;}
    .journal-timeline {padding: 0 18px;}
    .journal-event {grid-template-columns: 32px minmax(0,1fr) auto; gap: 11px; padding-block: 22px;}
    .journal-event > time, .journal-event-date {grid-column: 2 / -1; font-size: 11px; padding-top: 0;}
    .journal-event-icon {grid-column: 1; grid-row: span 2; width: 31px; height: 31px; font-size: 14px; border-radius: 10px;}
    .journal-event-body {grid-column: 2;}
    .journal-event-body h3 {font-size: 14px;}
    .journal-event-body p {font-size: 12px;}
    .journal-event-value {grid-column: 3; font-size: 12px; padding-top: 2px;}
    .journal-pagination {font-size: 11px; flex-wrap: wrap;}
    .journal-event-date strong, .journal-event-date small {display: inline; margin-right: 5px;}
    .journal-actions {width: 100%;}
    .journal-actions .button {flex: 1;}
    .journal-export {align-items: flex-start; flex-direction: column; gap: 20px; padding: 22px;}
    .history-pagination {padding: 18px; flex-wrap: wrap;}
    .expense-category {padding: 15px;}
    .report-sheet {padding: 24px 18px; border-radius: 19px;}
    .report-header {align-items: flex-start; flex-direction: column;}
    .report-header h1, .report-header h2 {font-size: 25px;}
    .report-header p {font-size: 12px;}
    .report-header img {width: 100%; height: 185px;}
    .report-summary {grid-template-columns: 1fr; gap: 10px;}
    .report-summary > div, .report-summary > article {padding: 17px;}
    .report-table {font-size: 11px;}
    .report-table td, .report-table th {padding: 10px 6px;}
    .report-table th {font-size: 9px;}
    .report-actions .button {flex: 1;}
    .report-picker {padding: 22px;}
    .report-picker form {align-items: stretch; flex-direction: column;}
    .report-options {align-items: flex-start;}
    .report-options .check-line {width: 100%;}
}
@media (max-width: 380px) {
    .main-content {padding-inline: 14px;}
    .topbar-title {max-width: 93px;}
    .preview-private {display: none;}
    .community-hero h1 {font-size: 30px;}
    .hero-copy h1 {font-size: 47px;}
    .metric-card {padding: 14px;}
    .metric-card > strong {font-size: 22px;}
    .companion-actions > a {gap: 6px; font-size: 11px;}
    .companion-actions small {font-size: 9px;}
}
@media (max-width: 640px) {
    .timeline-row {grid-template-columns: 14px 46px minmax(0,1fr) 46px; gap: 10px;}
    .timeline-marker {grid-column: 1; grid-row: 1 / span 2;}
    .timeline-date {grid-column: 2; grid-row: 1 / span 2;}
    .timeline-main {grid-column: 3; grid-row: 1;}
    .timeline-meta {display: block; grid-column: 3; grid-row: 2; text-align: left;}
    .timeline-row > .row-actions {grid-column: 4; grid-row: 1 / span 2;}
}
/* A direct, configured contact remains available without an account. */
/* Authentication guidance is content, not decorative fine print. */
.auth-panel .auth-fineprint {color: #645d73; font-size: 14px; line-height: 1.6;}
.auth-panel .field small, .auth-panel .auth-heading p {color: #645d73; font-size: 14px; line-height: 1.6;}
.auth-panel .alert {font-size: 14px; line-height: 1.6;}
.auth-panel .auth-switch {color: #645d73; font-size: 14px; line-height: 1.5;}
.auth-panel .auth-switch a {display: inline-flex; align-items: center; min-height: 44px; padding-block: 10px;}
.auth-panel .password-wrap input {padding-right: 52px;}
.auth-panel .password-wrap button {top: 1px; right: 1px; width: 44px; height: 44px; border-radius: 9px; color: #645d73;}
.auth-panel .password-wrap button:focus-visible {outline: 3px solid #655093; outline-offset: -3px;}
/* A real native file input keeps photo selection available to keyboard users. */
.profile-photo-control {position: relative; min-height: 46px; overflow: hidden;}
.profile-photo-control input[type="file"] {position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer;}
.profile-photo-control:focus-within {outline: 3px solid #655093; outline-offset: 3px;}
/* Keep monetary values together; one wide card is clearer than clipped totals. */
.report-scroll-hint {display: none;}
/* A focusable scroll region exposes the full log without changing its columns. */
.fuel-scroll-hint {margin: 0; padding: 0 24px 16px; font-size: 13px; color: var(--muted);}
.fuel-history-scroll {overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;}
.fuel-history-scroll:focus-visible {outline: 3px solid var(--green-dark); outline-offset: -3px;}
/* These existing totals form one quiet summary, rather than four tinted cards. */
.ownership-stats.ownership-summary {gap: 0; border-block: 1px solid var(--line); background: var(--card);}
.ownership-stats.ownership-summary > .ownership-stat {min-width: 0; padding: 20px; border: 0; border-radius: 0; background: var(--card); box-shadow: none;}
.ownership-summary > .ownership-stat + .ownership-stat {border-left: 1px solid var(--line);}
.ownership-summary .ownership-stat > span {font-size: 13px; color: var(--muted);}
.ownership-summary .ownership-stat small {font-size: 12px; color: var(--muted);}
.ownership-summary .ownership-stat strong {overflow-wrap: anywhere;}
html[data-theme="dark"] .ownership-stats.ownership-summary > .ownership-stat {background: var(--card) !important; border-color: var(--line) !important; box-shadow: none;}
@media screen and (max-width: 1050px) and (min-width: 641px) {
    .ownership-summary > .ownership-stat:nth-child(3) {border-left: 0;}
    .ownership-summary > .ownership-stat:nth-child(n+3) {border-top: 1px solid var(--line);}
}
@media screen and (max-width: 640px) {
    .ownership-stats {grid-template-columns: repeat(auto-fit,minmax(min(100%,200px),1fr));}
    .ownership-stat {min-width: 0;}
    .ownership-stat strong {overflow-wrap: anywhere;}
    .ownership-stats.ownership-summary {grid-template-columns: minmax(0, 1fr);}
    .ownership-stats.ownership-summary > .ownership-stat {display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 15px 16px; border-left: 0;}
    .ownership-summary > .ownership-stat + .ownership-stat {border-top: 1px solid var(--line);}
    .ownership-summary .ownership-stat > span {flex: 1 1 120px; min-width: 0; overflow-wrap: anywhere;}
    .ownership-summary .ownership-stat strong {flex: 0 1 auto; min-width: 0; max-width: 100%; margin: 0; font-size: 23px;}
    .ownership-summary .ownership-stat small {flex: 1 1 100%; margin: 0;}
    .ownership-summary .ownership-stat .metric-inline-link {flex: 1 1 100%;}
    .journal-export .journal-actions > .button {flex: 1 1 10em; min-width: min(100%, 10em); max-width: 100%; white-space: normal; overflow-wrap: anywhere;}
    .report-history-scroll {max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;}
    .report-section .report-scroll-hint {display: block; margin: 12px 0; color: #645d73; font-size: 13px;}
    .report-history-scroll:focus-visible {outline: 3px solid #655093; outline-offset: 3px;}
    .report-history-scroll .report-history {min-width: 560px; font-size: 13px;}
    .report-history-scroll .report-history th {font-size: 11px; color: #645d73;}
    .report-history-scroll .report-history td, .report-history-scroll .report-history th {padding: 12px 10px;}
    .report-history-scroll .report-history td:first-child,
    .report-history-scroll .report-history td:nth-child(3),
    .report-history-scroll .report-history td:nth-child(4) {overflow-wrap: normal;}
}
@media (max-width: 520px) {
    .public-vehicle-grid > article {grid-template-columns: minmax(0,1fr);}
    .public-vehicle-photo {height: 200px;}
}
.auth-panel .support-contact, .support-intro .support-contact {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px;
    margin: 12px 0 0; color: #645d73; font-size: 14px; line-height: 1.5;
}
.auth-panel .support-contact {justify-content: center; text-align: center;}
.support-contact a {
    display: inline-block; max-width: 100%; min-width: 0; min-height: 44px;
    padding: 11px 0; color: #655093; font-weight: 600; overflow-wrap: anywhere;
    text-decoration: underline; text-underline-offset: 3px;
}
.auth-panel .support-contact a:focus-visible, .support-intro .support-contact a:focus-visible {
    outline: none; border: 0; box-shadow: none;
    color: #49366d; text-decoration-thickness: 3px; text-underline-offset: 5px;
}

/* Standalone secondary actions keep a comfortable phone hit area. Inline
   links inside explanatory text retain their normal reading flow. */
.public-profile-missing > span {color: #65567f;}
@media screen {
    .community-more-filters summary, .community-sort select {scroll-margin-top: 100px;}
}
@media screen and (max-width: 900px) {
    .button-small {min-width: 44px; min-height: 44px; font-size: 14px;}
    .profile-photo-control {min-height: 46px;}
    .community-filters .community-sort select {height: 44px; min-height: 44px; font-size: 16px;}
    .community-more-filters summary {min-height: 44px;}
    .filter-clear, .community-tabs a, .app-footer a {
        display: inline-flex; align-items: center; gap: 4px; min-width: 44px; min-height: 44px;
    }
}

/* Valuation availability and account-wide allowances stay readable on phones. */
.valuation-footer > div {min-width: 0;}
.valuation-actions {max-width: 420px;}
.valuation-actions > small {color: #62677a; font-size: 13px; line-height: 1.5;}
.valuation-actions > .refresh-limit {max-width: 100%; color: #70475e !important; font-size: 13px !important; line-height: 1.5; text-align: left; overflow-wrap: anywhere;}

.auth-remember {display:flex;align-items:center;gap:12px;min-height:44px;cursor:pointer;color:var(--ink);font-size:15px;line-height:1.5;}
.auth-remember input {width:20px;height:20px;flex:0 0 20px;margin:0;accent-color:var(--green);}
.auth-remember input:focus-visible {outline:2px solid var(--green);outline-offset:3px;}
.auth-remember-choice > small {display:block;margin:2px 0 0 32px;color:var(--muted);font-size:13px;line-height:1.5;}

@media print {
    .sidebar, .topbar, .app-footer, .report-actions, .mobile-backdrop, .modal {display: none !important;}
    .app-body, .app-shell, .app-content, .main-content {display: block; width: 100%; min-height: 0; max-width: none; margin: 0; padding: 0; background: #fff;}
    .report-sheet {max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; color: #111;}
    .report-header {break-inside: avoid;}
    .report-summary {grid-template-columns: repeat(4,1fr);}
    .report-section h2 {break-after: avoid;}
    .report-table tr {break-inside: avoid;}
    .report-table thead {display: table-header-group;}
    .report-sheet a {color: inherit; text-decoration: none;}
    .report-sheet p, .report-sheet small, .report-table th, .report-summary small, .report-summary span {color: #555;}
    @page {size: auto; margin: 16mm;}
}