@font-face {
  font-family: "Inter";
  src: url("../vendor/fonts/inter-m1.c6cd75645889.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}


:root {
  --navy-900: #0E1F36;  
  --navy-800: #142D4D;
  --navy: #17375E;      
  --navy-600: #2D5487;
  --navy-200: #D3E0F2;
  --navy-100: #EBF1FA;
  --green: #1D8A3B;     
  --green-600: #177434; 
  --green-700: #13622C; 
  --green-800: #0F4A22;
  --green-300: #97DA9F; 
  --green-200: #C6ECCA;
  --green-100: #E7F7E8;
  --lime: #4CD640;      
  --ink: #16202E;
  --ink-2: #364152;
  --muted: #5A6472;
  --border-input: #737E90;
  --line: #E1E6ED;
  --bg: #F4F6F9;
  --surface: #FFFFFF;
  --surface-2: #EDF1F5;
  --on-dark-2: #DBDDE1;
  --on-dark-3: #BCC0C7;
  --amber-700: #8A5300;
  --amber-400: #F7C948;
  --amber-100: #FFF4DB;
  --red-700: #B42318;
  --red-100: #FEF3F2;
  --coral-200: #F9C9B6;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-display: clamp(30px, 21.4px + 2.39vw, 52px);
  --fs-h1: clamp(28px, 23.3px + 1.3vw, 40px);
  --fs-h2: clamp(24px, 20.9px + 0.87vw, 32px);
  --fs-h3: clamp(20px, 19.2px + 0.22vw, 22px);
  --fs-numeral: clamp(36px, 31.3px + 1.3vw, 48px);
  --fs-price-xl: clamp(30px, 28.4px + 0.43vw, 34px);

  --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 20px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(14,31,54,.06), 0 2px 6px rgba(14,31,54,.06);
  --shadow-2: 0 2px 4px rgba(14,31,54,.06), 0 10px 28px rgba(14,31,54,.12);
  --shadow-3: 0 16px 40px rgba(14,31,54,.18);
  --shadow-bar: 0 -1px 0 #E1E6ED, 0 -6px 20px rgba(14,31,54,.08);
  --container: 1200px;
  --gutter: 16px;
  --section-y: 48px;
}
@media (min-width: 640px) { :root { --gutter: 24px; --section-y: 64px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; --section-y: 80px; } }


*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.5; font-weight: 400; color: var(--ink);
  background: var(--bg); font-synthesis: none; -webkit-font-smoothing: antialiased;
  padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { body { padding-bottom: 0; } }

@media (max-width: 767px) { html { scroll-padding-bottom: calc(72px + env(safe-area-inset-bottom)); } }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--ink); font-family: var(--font); font-weight: 700; letter-spacing: -0.015em;
  text-wrap: balance; }
h1 { font-size: var(--fs-h1); line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); line-height: 1.2; }
h3 { font-size: var(--fs-h3); line-height: 1.27; letter-spacing: -0.01em; }
h4 { font-size: 18px; line-height: 24px; letter-spacing: -0.005em; }
h5 { font-size: 16px; line-height: 22px; letter-spacing: 0; }
h6 { font-size: 14px; line-height: 20px; letter-spacing: 0; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--green-700); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--green-800); }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.on-dark :focus-visible, .band-navy :focus-visible, .site-footer :focus-visible, .page-head :focus-visible,
.side-panel :focus-visible, .dealer :focus-visible { outline-color: var(--lime); }
::selection { background: rgba(29,138,59,.24); }
[id] { scroll-margin-top: 16px; }
.num { font-variant-numeric: tabular-nums; }
:where(a[href^="mailto:"]:not(.btn)), .addr { display: inline-block; max-width: 100%; overflow-wrap: anywhere; } 
.addr a { display: inline; } 
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0; }
.wrap { max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.screen { padding-block: 32px 56px; }
.section { padding-block: var(--section-y); }
.section.flush-top { padding-top: 0; }
.band-white { background: var(--surface); }
.band-navy { background: var(--navy-900); color: var(--on-dark-2); }
.band-navy h2, .band-navy h3 { color: #fff; }
.band-navy a { color: var(--green-300); }
.band-navy a:hover { color: #fff; }
.eyebrow, .kicker { font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--green-700); }
.on-dark .eyebrow, .band-navy .eyebrow, .page-head .eyebrow, .side-panel .eyebrow, .dealer .eyebrow { color: var(--lime); }
.lead { font-size: 18px; line-height: 28px; color: var(--ink-2); }
@media (max-width: 639px) { .lead { font-size: 17px; line-height: 26px; } }
.muted { color: var(--muted); }
.ph-duotone { line-height: 1; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }


.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px;
  border-radius: var(--r-md); border: 1.5px solid transparent; background: transparent; color: var(--ink);
  font: 600 16px/20px var(--font); text-align: center; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out; }
.btn i { font-size: 20px; }
.btn-primary { background: var(--green-600); color: #fff; }
.btn-primary:hover { background: var(--green-700); color: #fff; }
.btn-primary:active { background: var(--green-800); }
.btn-secondary { background: var(--surface); color: var(--navy); border-color: var(--navy); }
.btn-secondary:hover { background: var(--navy-100); color: var(--navy); }
.btn-on-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,.72); }
.btn-on-dark:hover { background: rgba(255,255,255,.1); color: #fff; border-color: #fff; }
.btn-ghost { background: none; color: var(--green-700); padding-inline: 4px; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 4px; }
.btn-ghost:where(:has(> i:first-child)) { text-decoration: none; } 
.btn-ghost:hover { color: var(--green-800); text-decoration: underline; }
.btn-sm { min-height: 40px; padding: 0 14px; font-size: 15px; }
.btn-lg { min-height: 56px; padding: 0 28px; font-size: 17px; }
.btn-block { width: 100%; }
.btn-locked, .btn[aria-disabled="true"] { background: var(--surface-2); color: var(--ink-2); border: 1.5px dashed var(--border-input);
  cursor: not-allowed; }
.btn[aria-disabled="true"] { pointer-events: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 479px) { .btn { white-space: normal; } }
@media (max-width: 359px) { .btn-addr { padding-inline: 16px; } .btn-addr i { display: none; } } 


.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 4px 10px;
  border-radius: var(--r-pill); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0; }
.chip i { font-size: 16px; }
.chip-green { background: var(--green-100); color: var(--green-700); }
.chip-navy { background: var(--navy); color: #fff; }
.chip-navy-soft { background: var(--navy-100); color: var(--navy); }
.chip-grey { background: var(--surface-2); color: var(--ink-2); }
.chip-amber { background: var(--amber-100); color: var(--amber-700); }
.chip-photo { background: rgba(14,31,54,.72); color: #fff; }
.chip-white { background: #fff; color: var(--ink); box-shadow: var(--shadow-1); }


.field > label, .field > .field-label { display: block; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.input, .form-stack input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]), .form-stack select,
.form-stack textarea { width: 100%; min-height: 48px; padding: 0 14px; font: 400 16px/24px var(--font); color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--border-input); border-radius: var(--r-md); caret-color: var(--green-600); }
.input { min-height: 44px; }
textarea.input, .form-stack textarea { min-height: 112px; padding: 10px 14px; resize: vertical; }
select.input, .form-stack select { appearance: none; padding-right: 40px; background: var(--surface)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23364152' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
  right 14px center / 16px no-repeat; }
.input::placeholder, .form-stack input::placeholder, .form-stack textarea::placeholder { color: var(--muted); opacity: 1; }
.input:hover, .form-stack input:hover, .form-stack select:hover, .form-stack textarea:hover { border-color: var(--ink-2); }
.input:focus-visible, .form-stack input:focus-visible, .form-stack select:focus-visible, .form-stack textarea:focus-visible {
  outline: none; border-color: var(--green-600); box-shadow: 0 0 0 3px rgba(29,138,59,.28); }
.helptext { font-size: 13px; line-height: 18px; color: var(--muted); margin-top: 6px; text-wrap: pretty; }
.errorlist { list-style: none; margin: 6px 0 0; padding: 0; font-size: 13px; line-height: 18px; color: var(--red-700);
  display: flex; flex-direction: column; gap: 4px; }
.field:has(.errorlist) input, .field:has(.errorlist) select, .field:has(.errorlist) textarea { border-color: var(--red-700); }
.form-stack > .errorlist { background: var(--red-100); border-radius: var(--r-lg); padding: 12px 14px; font-size: 14px; }
.check-line { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; min-height: 44px; padding-block: 10px;
  font-size: 15px; line-height: 22px; cursor: pointer; }
.check-line input { appearance: none; width: 24px; height: 24px; margin: 0; border: 1.5px solid var(--border-input);
  background: #fff; cursor: pointer; }
.check-line input[type=checkbox] { border-radius: var(--r-sm); }
.check-line input[type=radio] { border-radius: 50%; }
.check-line input[type=checkbox]:checked { border-color: var(--green-600); background: var(--green-600)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
  center / 18px no-repeat; }
.check-line input[type=radio]:checked { border: 7px solid var(--green-600); }
.check-line input:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 22px; }
.table th { text-align: left; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--muted); padding: 10px 12px;
  border-bottom: 1px solid var(--line); }
.table td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tbody tr:last-child td { border-bottom: 0; }


.demo-rail { background: var(--navy-900); color: #fff; font-size: 13px; line-height: 16px; font-weight: 600; text-align: center;
  padding: 8px 16px; }
.demo-rail i { color: var(--lime); margin-right: 6px; vertical-align: -2px; font-size: 16px; }
.site-header { background: var(--surface); border-bottom: 1px solid var(--line); position: relative; z-index: 30; }
.site-header .wrap { display: flex; align-items: center; gap: 32px; height: 64px; }
.brand { display: flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; flex: none; } 
.brand .emblem { width: 40px; height: 40px; }
.brand .wordmark { width: 132px; height: 31px; }
.nav { display: flex; gap: 28px; height: 100%; }
.nav a { display: flex; align-items: center; height: 100%; padding-top: 3px; border-bottom: 3px solid transparent;
  font-size: 15px; font-weight: 600; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--green-600); }
.nav a.to-sell[aria-current="page"] { border-bottom-color: var(--navy); }
.hdr-account { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.hdr-lang { margin-left: auto; display: flex; align-items: center; gap: 6px; min-height: 44px; font-size: 14px;
  font-weight: 600; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.hdr-lang i { font-size: 18px; color: var(--green-700); }
.hdr-lang:hover { color: var(--ink); }
.hdr-lang + .hdr-account { margin-left: 0; }
.hdr-lang .lang-short { display: none; }
@media (max-width: 1199px) {  
  .hdr-lang i, .hdr-lang .lang-long { display: none; } .hdr-lang .lang-short { display: inline; }
}
.hdr-user { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); text-decoration: none; }
.hdr-user i { font-size: 32px; color: var(--navy); }
.hdr-user b { display: block; font-size: 15px; line-height: 20px; max-width: 220px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.hdr-user small { display: block; font-size: 13px; line-height: 16px; color: var(--green-700); font-weight: 600; }
.hdr-user:hover { color: var(--ink); }
.menu { margin-left: auto; }
.menu > summary { list-style: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-md);
  font-size: 26px; color: var(--ink); cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary { background: var(--surface-2); }
.menu-panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 45; background: var(--surface); box-shadow: var(--shadow-3);
  padding: 8px var(--gutter) 16px; }
.menu-panel a { display: flex; align-items: center; gap: 12px; min-height: 48px; border-bottom: 1px solid var(--line);
  color: var(--ink); font-weight: 600; text-decoration: none; }
.menu-panel a:last-child { border-bottom: 0; }
.menu-panel a i { font-size: 22px; color: var(--green-700); }
#menu-account { display: contents; }
@media (max-width: 1023px) {
  .hdr-account .btn-primary { display: none; } .nav { gap: 20px; } .site-header .wrap { gap: 20px; }
  .hdr-user b { display: none; } .hdr-user small { font-size: 15px; line-height: 20px; }  
}
@media (max-width: 767px) {
  .site-header .wrap { height: 56px; gap: 12px; }
  .nav, .hdr-account, .hdr-lang { display: none; }
  .brand .emblem { width: 34px; height: 34px; }
  .brand .wordmark { width: 112px; height: 26px; }
}
@media (min-width: 768px) { .menu { display: none; } }

.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--surface); box-shadow: var(--shadow-bar); }
.tabbar-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); max-width: 560px; margin: 0 auto;
  padding: 4px 8px calc(4px + env(safe-area-inset-bottom)); }
#tab-account { display: contents; }
.tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 56px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--muted); text-decoration: none;
  text-align: center; }
.tabbar a i { font-size: 24px; }
.tabbar a:hover { color: var(--ink); }
.tabbar a[aria-current="page"] { color: var(--green-700); }
.tabbar a[aria-current="page"]::before { content: ""; position: absolute; top: 0; width: 28px; height: 3px;
  border-radius: 0 0 3px 3px; background: var(--green-600); }
@media (min-width: 768px) { .tabbar { display: none; } }

.site-footer { background: var(--navy-900); color: var(--on-dark-2); padding: 56px 0 32px; }
.foot-grid { display: grid; gap: 32px; grid-template-columns: 1fr 1fr; }
.foot-brand { grid-column: 1 / -1; }
@media (min-width: 1024px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } .foot-brand { grid-column: auto; } }
.foot-brand img { width: 150px; height: 35px; }
.foot-brand p { margin-top: 12px; font-size: 15px; line-height: 22px; max-width: 26em; }
.foot-col h2 { font-size: 14px; line-height: 20px; font-weight: 700; color: #fff; letter-spacing: 0; margin-bottom: 8px; }
.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-col a, .foot-brand a { display: flex; align-items: center; gap: 8px; min-height: 36px; color: var(--on-dark-2);
  text-decoration: none; font-size: 15px; }
.foot-col a:hover, .foot-brand a:hover { color: #fff; text-decoration: underline; }
.foot-brand a i { font-size: 20px; color: var(--lime); }
.foot-safe { margin-top: 40px; display: grid; grid-template-columns: 32px 1fr; gap: 14px; padding: 18px 20px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-lg); }
.foot-safe > i { font-size: 30px; color: var(--lime); }
.foot-safe b { display: block; color: #fff; font-size: 16px; line-height: 24px; }
.foot-safe p { font-size: 14px; line-height: 21px; margin-top: 4px; }
.foot-legal { margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; line-height: 20px;
  color: var(--on-dark-3); display: grid; gap: 6px; }

#toasts:empty { display: none; }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(88px + env(safe-area-inset-bottom)); z-index: 50;
  width: max-content; max-width: min(92vw, 480px); background: var(--navy-900); color: #fff; padding: 14px 18px;
  border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-lg); box-shadow: var(--shadow-3); font-size: 14px;
  line-height: 20px; display: flex; gap: 10px; align-items: center; } 
.toast i { font-size: 22px; color: var(--lime); flex: none; }
.toast-error i { color: var(--amber-400); }
@media (min-width: 768px) { .toast { bottom: 24px; } }
@media (prefers-reduced-motion: no-preference) {
  @keyframes m1-toast { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
  .toast { animation: m1-toast .2s ease-out; }
}


.hero { position: relative; background: var(--navy-900); color: var(--on-dark-2); overflow: hidden; }
.hero-photo img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.hero-body { position: relative; background: var(--navy-900); border-radius: var(--r-2xl) var(--r-2xl) 0 0; margin-top: -20px;
  padding: 28px var(--gutter) 72px; }
.hero h1 { font-size: var(--fs-display); line-height: 1.1; letter-spacing: -0.025em; font-weight: 800; color: #fff; margin: 10px 0 14px; }
.hero .lead { color: var(--on-dark-2); max-width: 34em; }
.hero .actions { margin-top: 24px; }
.hero-count { margin-top: 16px; font-size: 14px; line-height: 20px; color: var(--on-dark-3); display: flex; gap: 8px; align-items: center; }
.hero-count i { color: var(--lime); font-size: 18px; }
@media (max-width: 479px) { .hero .actions .btn { flex: 1 1 100%; } }
@media (min-width: 640px) and (max-width: 1023px) { .hero-body { padding-inline: max(var(--gutter), (100% - 720px) / 2); } }
@media (min-width: 1024px) {
  .hero { min-height: 560px; display: grid; align-items: center; }
  .hero-photo { position: absolute; inset: 0; }
  .hero-photo img { height: 100%; aspect-ratio: auto; object-position: 100% 50%; }
  .hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,31,54,.94) 0%,
    rgba(14,31,54,.9) 48%, rgba(14,31,54,.5) 62%, rgba(14,31,54,.1) 76%, rgba(14,31,54,0) 86%); }
  .hero-body { background: none; margin: 0 auto; border-radius: 0; width: 100%;
    max-width: calc(var(--container) + 2 * var(--gutter)); padding: 72px var(--gutter) 120px; }
  .hero-copy { max-width: 500px; }
}
@media (min-width: 1280px) {
  .hero-photo::after { background: linear-gradient(90deg, rgba(14,31,54,.94) 0%, rgba(14,31,54,.9) 40%,
    rgba(14,31,54,.5) 52%, rgba(14,31,54,.1) 64%, rgba(14,31,54,0) 76%); }
  .hero-copy { max-width: 560px; }
}

.trust { position: relative; z-index: 2; margin-top: -48px; }
.trust-card { list-style: none; margin: 0; padding: 0; background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-2);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.trust-item { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.trust-ico { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--green-100); color: var(--green-700);
  display: grid; place-items: center; font-size: 22px; }
.trust-title { display: block; font-size: 15px; line-height: 20px; font-weight: 700; color: var(--ink); }
.trust-text { display: block; font-size: 14px; line-height: 20px; color: var(--muted); margin-top: 2px; }
@media (max-width: 639px) {
  .trust-card { grid-template-columns: 1fr; }
  .trust-item { flex-direction: row; gap: 14px; padding: 14px 16px; }
  .trust-item + .trust-item { border-top: 1px solid var(--line); }
  .trust-ico { width: 36px; height: 36px; font-size: 20px; }
  .trust-text { font-size: 13px; line-height: 18px; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .trust-item:nth-child(even) { border-left: 1px solid var(--line); }
  .trust-item:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (min-width: 1024px) {
  .trust { margin-top: -56px; }
  .trust-card { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 8px 0; }
  .trust-item { flex-direction: row; gap: 14px; padding: 18px 24px; }
  .trust-item + .trust-item { border-left: 1px solid var(--line); }
}

.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 24px; margin-bottom: 24px; }
.sec-head > .muted { font-size: 15px; line-height: 22px; }
#cars { padding-top: 56px; }

.makes { margin-bottom: 24px; }
.makes-head { display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; margin-bottom: 12px; }
.makes-head h3 { font-size: 18px; line-height: 24px; }
.makes-head .muted, .makes-head a { font-size: 14px; }

.kind-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.kind-chips .chip { min-height: 36px; text-decoration: none; }
.makes-wall { display: grid; grid-auto-flow: column dense; grid-template-rows: repeat(2, auto); grid-auto-columns: 104px; gap: 8px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 2px 2px 10px; }
.make-tile { scroll-snap-align: start; position: relative; display: grid; grid-template-rows: 36px auto auto; justify-items: center;
  align-items: center; gap: 4px; min-width: 0; padding: 12px 6px 10px; min-height: 96px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--ink); text-decoration: none;
  transition: box-shadow .15s ease-out, border-color .15s ease-out; }
.make-tile.wide { grid-column: span 2; }
.make-tile.text-only { grid-template-rows: 36px auto; }
.make-tile:hover { border-color: var(--navy-200); box-shadow: var(--shadow-1); color: var(--ink); }
.make-tile:focus-visible { outline-offset: -3px; } 
.make-tile[aria-current="true"] { border: 2px solid var(--green-600); background: var(--green-100); padding: 11px 5px 9px; }
.make-tile.is-empty { color: var(--muted); }
.make-clear { position: absolute; top: 4px; right: 8px; font-size: 16px; line-height: 1; font-weight: 700; color: var(--green-700); }
.make-logo { height: 36px; display: flex; align-items: center; justify-content: center; }
.mk { display: block; fill: currentColor; flex: none; }
.mk-text { font-size: 13px; line-height: 15px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; text-align: center; }
.make-name { max-width: 100%; font-size: 13px; line-height: 16px; font-weight: 600; text-align: center; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.make-count { font-size: 13px; line-height: 16px; font-weight: 700; color: var(--green-700); min-height: 16px; }
.makes-more { margin-top: 4px; }
.makes-more > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600;
  color: var(--green-700); cursor: pointer; }
.makes-more > summary::-webkit-details-marker { display: none; }
.makes-more > summary i { transition: transform .15s ease-out; }
.makes-more[open] > summary i { transform: rotate(180deg); }
.makes-more .makes-wall { margin-top: 4px; }
.makes-after { margin-top: 48px; }
.makes-note { margin-top: 4px; font-size: 13px; line-height: 18px; color: var(--muted); }
@media (min-width: 900px) {
  .makes-wall { grid-auto-flow: row dense; grid-template-rows: none; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    overflow: visible; }
}

.lot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
@media (min-width: 640px) { .lot-grid { gap: 24px; } }
.lot-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-1); color: inherit; text-decoration: none;
  transition: box-shadow .15s ease-out, transform .15s ease-out; }
.lot-card:hover { box-shadow: var(--shadow-2); color: inherit; }
@media (prefers-reduced-motion: no-preference) { .lot-card:hover { transform: translateY(-2px); } }
.card-photo { position: relative; aspect-ratio: 4 / 3; background: var(--surface-2); }
.card-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-photo .flags { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.card-photo .count { position: absolute; left: 12px; bottom: 12px; }
.photo-ph { display: grid; place-items: center; color: var(--navy-200); background: var(--navy-100); }
.photo-ph > i { font-size: 64px; }
.card-body { padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-title { font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-wrap: balance; }
.card-title .nobr { white-space: nowrap; } 
.specs { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.specs > span { display: inline-flex; align-items: center; gap: 5px; }
.specs i { font-size: 16px; color: var(--muted); }
.card-where { font-size: 13px; line-height: 18px; color: var(--muted); display: flex; gap: 5px; }
.card-where i { font-size: 16px; flex: none; }

.card-where span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.card-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); display: flex; align-items: flex-end;
  justify-content: space-between; gap: 8px; }
.price { font-size: 22px; line-height: 28px; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--ink); }

.price small { font-size: 13px; font-weight: 600; letter-spacing: 0; white-space: nowrap; }
.price.on-request { font-size: 18px; }
.ref { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--muted); white-space: nowrap; }

.empty { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-1); padding: 24px; display: grid; gap: 24px; }
@media (min-width: 1024px) { .empty { grid-template-columns: 1.25fr 1fr; padding: 40px; gap: 40px; } }
.empty-ico { width: 56px; height: 56px; border-radius: 50%; background: var(--green-100); color: var(--green-700); display: grid;
  place-items: center; font-size: 30px; margin-bottom: 16px; }
.empty h3 { margin-bottom: 8px; }

.empty-ways { display: grid; gap: 16px; margin-top: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.empty-way { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.empty-way h4 { font-size: 16px; line-height: 22px; }
.empty-way p { font-size: 14px; line-height: 20px; color: var(--ink-2); flex: 1; }
.empty-way .btn { align-self: flex-start; }
.empty-note { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 16px 20px; font-size: 15px; }
.checklist { background: var(--surface-2); border-radius: var(--r-lg); padding: 20px; }
.checklist h4 { margin-bottom: 12px; }
.checklist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.checklist li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; font-size: 15px; line-height: 22px; color: var(--ink-2); }
.checklist li i { font-size: 22px; color: var(--green-600); }
.checklist li b { color: var(--ink); }

.how { display: grid; gap: 32px; align-items: center; }
@media (min-width: 1024px) { .how { grid-template-columns: 5fr 7fr; gap: 64px; } }
.how-photo { position: relative; }
.how-photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-xl); }
@media (min-width: 1024px) { .how-photo img { aspect-ratio: 1 / 1; } }
.how-photo .chip-white { position: absolute; left: 16px; bottom: 16px; right: 16px; justify-content: flex-start; min-height: 44px;
  font-size: 14px; line-height: 18px; border-radius: var(--r-lg); padding: 10px 14px; }
.how-photo .chip-white i { color: var(--green-600); font-size: 22px; }
.steps { list-style: none; margin: 24px 0 0; padding: 0; }
.step { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding-bottom: 24px; }
.step:not(:last-child)::before { content: ""; position: absolute; left: 19px; top: 44px; bottom: 4px; width: 2px; background: var(--green-200); }
.step-n { width: 40px; height: 40px; border-radius: 50%; background: var(--green-600); color: #fff; font-size: 16px; line-height: 40px;
  font-weight: 800; text-align: center; }
.step h3 { font-size: 18px; line-height: 24px; margin: 8px 0 4px; }
.step p { font-size: 15px; line-height: 22px; color: var(--ink-2); }

.stats-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 32px; }
.stats-head h2 { margin-top: 10px; }
.stats-head p { max-width: 40em; margin-top: 8px; }
.stats-head > a { font-weight: 600; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.stats { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; margin: 32px 0 0; }
@media (min-width: 1024px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; } }
.stat { padding-top: 16px; border-top: 1px solid rgba(255,255,255,.16); }
.stat b { display: block; font-size: var(--fs-numeral); line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; color: var(--lime);
  font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 8px; font-size: 15px; line-height: 22px; color: var(--on-dark-2); }

.origins { display: grid; gap: 16px; }
.origin { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-1); padding: 24px; display: grid;
  grid-template-columns: 48px 1fr; gap: 16px; }
.origin-ico { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; }
.origin-ico.local { background: var(--green-100); color: var(--green-700); }
.origin h2 { font-size: 20px; line-height: 26px; letter-spacing: -0.01em; margin-bottom: 6px; }
.origin p { font-size: 15px; line-height: 22px; color: var(--ink-2); }
.origin a { display: inline-flex; gap: 6px; align-items: center; margin-top: 4px; font-weight: 600; min-height: 44px; }

.dealer { display: grid; background: var(--navy); border-radius: var(--r-2xl); overflow: hidden; color: var(--on-dark-2); }
.dealer picture, .dealer img { display: block; width: 100%; height: 100%; }
.dealer img { aspect-ratio: 16 / 9; object-fit: cover; }
.dealer-copy { padding: 28px 20px 32px; }
.dealer h2 { color: #fff; margin: 10px 0 16px; }
.dealer ul { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; }
.dealer li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; font-size: 16px; line-height: 24px; }
.dealer li i { color: var(--lime); font-size: 22px; margin-top: 1px; }
@media (min-width: 1024px) {
  .dealer { grid-template-columns: 7fr 5fr; }
  .dealer-copy { padding: 56px; order: -1; }
  .dealer img { aspect-ratio: auto; }
}


.crumbs { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-block: 16px; }
.crumbs .btn-ghost { font-weight: 600; min-height: 44px; }
.make-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line);
  border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; }
.make-link:hover { border-color: var(--navy-200); box-shadow: var(--shadow-1); color: var(--ink); }
.car-grid { display: grid; gap: 24px; padding-bottom: 48px; }
.car-grid > * { min-width: 0; }
@media (min-width: 1024px) {
  .car-grid { grid-template-columns: minmax(0, 1fr) 400px; gap: 32px 40px; align-items: start; }
  .car-gallery { grid-column: 1; grid-row: 1; }
  .buy-panel { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 24px; }
  
  .buy-panel { max-height: calc(100vh - 48px); max-height: calc(100svh - 48px); overflow-y: auto; scrollbar-width: thin; }
  .car-details { grid-column: 1; grid-row: 2; }
}

.car-details { display: flex; flex-direction: column; gap: 24px; container-type: inline-size; }
.gallery-wrap { position: relative; }
.gallery { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; border-radius: var(--r-xl);
  background: var(--surface-2); scrollbar-width: none; }
.gallery::-webkit-scrollbar { display: none; }
.gallery:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.gallery ul { display: flex; list-style: none; margin: 0; padding: 0; }
.gallery li { flex: 0 0 100%; position: relative; scroll-snap-align: start; }
.gallery a { display: block; }
.gallery a:focus-visible { outline-offset: -4px; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gallery-caption { position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px); }
.gallery-step { position: absolute; top: calc(50% - 24px); width: 48px; height: 48px; border: 0; border-radius: 50%;
  display: none; place-items: center; background: rgba(255,255,255,.92); box-shadow: var(--shadow-2); font-size: 22px;
  color: var(--ink); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .gallery-step { display: grid; } }
.gallery-prev { left: 12px; }
.gallery-next { right: 12px; }
.gallery-next i { transform: rotate(180deg); }
.gallery-note { display: flex; gap: 8px; font-size: 13px; line-height: 18px; color: var(--muted); }
.gallery-note i { flex: none; font-size: 16px; margin-top: 1px; }
@media (min-width: 1024px) { .car-details > .gallery-note:first-child { margin-top: -20px; } } 
.photo-ph.gallery-ph { aspect-ratio: 4 / 3; border-radius: var(--r-xl); position: relative; }
.photo-ph.gallery-ph > i { font-size: 96px; }
.photo-ph.gallery-ph .chip { position: absolute; left: 12px; bottom: 12px; }
@media (max-width: 1023px) {
  .car-gallery { margin-inline: calc(-1 * var(--gutter)); }
  .gallery, .photo-ph.gallery-ph { border-radius: 0; }
}

@media (max-width: 639px) { .crumbs { padding-block: 8px; } .car-grid { gap: 16px; } }

@media (max-width: 479px) { .make-link .mk { max-width: 56px; } }
@media (max-width: 399px) {
  .crumbs { gap: 8px; } .crumbs .btn-ghost { padding-inline: 0; }
  .make-link { gap: 6px; padding: 0 12px; font-size: 13px; } .make-link .mk { max-width: 48px; }
}
.buy-panel { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-2); padding: 24px; display: flex;
  flex-direction: column; gap: 16px; }
.buy-panel h1 { font-size: 28px; line-height: 34px; letter-spacing: -0.02em; }
.buy-panel .nobr { white-space: nowrap; } 

@media (max-width: 479px) { .buy-panel .btn-block { padding-inline: 12px; } }
@media (max-width: 399px) { .buy-panel .btn-secondary.btn-block i, .buy-state .btn-block i { display: none; } }
@media (max-width: 639px) { .buy-panel { padding: 20px; } .buy-panel h1 { font-size: 26px; line-height: 32px; } }
@media (min-width: 1024px) { 
  .buy-panel { background: linear-gradient(var(--surface) 30%, rgba(255,255,255,0)) top / 100% 40px no-repeat local,
    linear-gradient(rgba(255,255,255,0), var(--surface) 70%) bottom / 100% 40px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(14,31,54,.16), rgba(14,31,54,0)) top / 100% 12px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(14,31,54,.16), rgba(14,31,54,0)) bottom / 100% 12px no-repeat scroll,
    var(--surface); }
}
.buy-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.buy-sub { font-size: 14px; line-height: 20px; color: var(--muted); margin-top: 6px; }
.price-xl { font-size: var(--fs-price-xl); line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  color: var(--ink); }
.price-note { font-size: 14px; line-height: 20px; color: var(--muted); margin-top: 4px; }
.price-xl.on-request { font-size: 28px; line-height: 34px; }
.buy-action, .buy-box, .buy-form { display: flex; flex-direction: column; gap: 8px; }
.buy-box { gap: 10px; }
.buy-box:not(:has(*)) { display: none; } 
.buy-note { font-size: 14px; line-height: 20px; color: var(--muted); }
.buy-closed { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 14px; border-radius: var(--r-lg);
  background: var(--surface-2); font-weight: 600; color: var(--ink-2); }
.buy-closed i { flex: none; font-size: 20px; color: var(--muted); }
.buy-closed:has(~ .buy-box .buy-state.is-ok) { display: none; } 
.buy-state { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface-2);
  font-size: 14px; line-height: 20px; color: var(--ink-2); }
.buy-state.is-ok { background: var(--green-100); }
.buy-state form { margin: 0; }
.buy-state .btn-ghost { align-self: flex-start; padding-inline: 0; }
.buy-state-title { font-size: 15px; line-height: 20px; font-weight: 700; color: var(--ink); }
.buy-state-title i { font-size: 20px; vertical-align: -4px; margin-right: 8px; }
.buy-state.is-ok .buy-state-title, .buy-state-title.is-ok { color: var(--green-700); }
.buy-state-meta { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--muted); }
.buy-state-amount { font-size: 22px; line-height: 28px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.buy-label { font-size: 14px; line-height: 20px; font-weight: 600; }
.offer-row { display: flex; flex-wrap: wrap; gap: 8px; }
.offer-row .input { flex: 999 1 160px; min-height: 48px; }
.offer-row .btn { flex: 1 0 auto; } 
.svc { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.svc li { border-bottom: 1px solid var(--line); }
.svc a, .svc .row, .svc summary { display: grid; grid-template-columns: 24px 1fr auto; gap: 12px; align-items: center; min-height: 56px;
  padding: 10px 0; color: var(--ink); text-decoration: none; font-size: 14px; line-height: 20px; }
.svc .row { grid-template-columns: 24px 1fr; }
.svc .lead-ico { font-size: 22px; color: var(--green-700); }
.svc .caret { font-size: 18px; color: var(--muted); }
.svc b { display: block; font-size: 15px; font-weight: 600; }
.svc .svc-text { display: block; color: var(--muted); }
.svc a:hover b, .svc summary:hover b { text-decoration: underline; }
.svc summary { list-style: none; cursor: pointer; }
.svc summary::-webkit-details-marker { display: none; }
.svc summary .caret { color: var(--green-700); transition: transform .15s ease-out; }
.svc details[open] summary .caret { transform: rotate(180deg); }
.svc details p { margin: 0 0 8px 36px; font-size: 14px; line-height: 21px; color: var(--ink-2); }
.svc details p:last-child { margin-bottom: 14px; }
.panel-legal { font-size: 13px; line-height: 18px; color: var(--muted); }
.facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 640px) { .facts { gap: 12px; } }
@container (min-width: 640px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fact { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px 14px; display: grid;
  grid-template-columns: 22px 1fr; gap: 2px 10px; align-items: center; align-content: center; } 
.fact i { grid-row: span 2; font-size: 22px; color: var(--green-700); }
.fact small { font-size: 13px; line-height: 16px; color: var(--muted); }
.fact b { font-size: 16px; line-height: 20px; overflow-wrap: anywhere; text-wrap: pretty; }
.card-box { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-1); padding: 20px; }
@media (min-width: 640px) { .card-box { padding: 32px; } }
.card-box > h2 { font-size: 24px; line-height: 30px; margin-bottom: 16px; }
.report-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.report-head h2 { font-size: 24px; line-height: 30px; }
.report-head p { font-size: 14px; color: var(--muted); margin-top: 4px; }
.grade-wrap { display: flex; align-items: center; gap: 14px; }
.grade-wrap p { font-size: 14px; line-height: 20px; color: var(--ink-2); max-width: 12em; margin: 0; }
.grade { --g: 0; width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: conic-gradient(var(--green-600) calc(var(--g) / 5 * 360deg), var(--surface-2) 0); }
.grade > div { width: 78px; height: 78px; border-radius: 50%; background: var(--surface); display: grid; place-content: center;
  text-align: center; }
.grade b { display: block; font-size: 30px; line-height: 30px; font-weight: 800; color: var(--green-700); }
.grade small { display: block; font-size: 12px; line-height: 14px; font-weight: 600; color: var(--muted); }
.report-cols { display: grid; gap: 32px; }
.report-cols > * { min-width: 0; } 
@container (min-width: 700px) { .report-cols { grid-template-columns: 1fr 1fr; } }
.report h3 { font-size: 18px; line-height: 24px; margin-bottom: 12px; }
.report h4 { font-size: 15px; line-height: 20px; margin: 24px 0 10px; }
.report-side { display: grid; gap: 28px; align-content: start; }
.report-note { margin-top: 8px; font-size: 13px; line-height: 18px; color: var(--muted); }
.carmap { list-style: none; margin: 0; display: grid; grid-template-columns: 1fr 1.4fr 1fr; grid-template-rows: repeat(6, auto); gap: 4px;
  max-width: 320px; padding: 10px; border: 2px solid var(--ink-2); border-radius: 56px 56px 36px 36px; }
.pnl { position: relative; min-height: 48px; border-radius: 8px; padding: 6px 4px; font-size: 12px; line-height: 15px; font-weight: 600;
  text-align: center; display: grid; place-items: center; color: var(--ink); border: 1.5px solid transparent; }
.pnl.ok { background: var(--green-100); border-color: #5FC06F; }
.pnl.scratch { background: #FDE7A9; border-color: #B7791F; }
.pnl.dent { background: var(--coral-200); border-color: #C4502B; }
.pnl.repaint { background: var(--navy-200); border-color: #4A72A8; }
.pnl .mark { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: #fff;
  font-size: 12px; line-height: 20px; font-weight: 800; }
.pnl.front { border-radius: 40px 40px 8px 8px; }
.pnl.rear { border-radius: 8px 8px 28px 28px; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 12px 0 0; font-size: 13px; line-height: 18px; color: var(--ink-2);
  list-style: none; padding: 0; }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.legend .sw { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid; }

.panel-list { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 14px; line-height: 20px; }
.panel-list li { display: flex; align-items: center; gap: 8px; }
.panel-list .sw { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid; flex: none; }
.sw.ok { background: var(--green-100); border-color: #5FC06F; }
.sw.scratch { background: #FDE7A9; border-color: #B7791F; }
.sw.dent { background: var(--coral-200); border-color: #C4502B; }
.sw.repaint { background: var(--navy-200); border-color: #4A72A8; }
.damage-strip { list-style: none; margin: 0; padding: 0 0 4px; display: flex; gap: 12px; overflow-x: auto; }
.damage-strip li { flex: none; width: 160px; }
.damage-strip a { display: block; border-radius: var(--r-md); }
.damage-strip a:focus-visible { outline-offset: -3px; } 
.damage-strip img { width: 160px; height: 120px; object-fit: cover; border-radius: var(--r-md); background: var(--surface-2); }
.damage-strip span { display: block; margin-top: 6px; font-size: 13px; line-height: 18px; color: var(--ink-2); }
.tyres { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tyre { display: grid; grid-template-columns: 96px 1fr 64px; gap: 12px; align-items: center; font-size: 14px; }
.bar { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: 4px; background: var(--green-600); }
.tyre.low .bar span { background: var(--amber-400); }
.tyre b { text-align: right; font-variant-numeric: tabular-nums; }
.tyre.low b { color: var(--amber-700); }
.checks { list-style: none; margin: 0; padding: 0; }
.checks li { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; min-height: 40px;
  border-bottom: 1px solid var(--line); font-size: 15px; }
.checks i { font-size: 20px; color: var(--green-600); }
.checks b { font-size: 13px; color: var(--green-700); }
.checks .adv i, .checks .adv b { color: var(--amber-700); }
.checks .na i, .checks .na b { color: var(--muted); }
.docs { background: var(--surface-2); border-radius: var(--r-lg); padding: 16px 20px; display: grid; gap: 12px; margin-top: 28px; }
.report .docs h3 { margin: 0; }
.docs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px 24px; }
@container (min-width: 600px) { .docs ul { grid-template-columns: 1fr 1fr; } }
.docs li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; }
.docs li i { font-size: 22px; color: var(--green-600); }
.docs li.not-ok i { color: var(--amber-700); }
.docs li b { display: block; font-size: 15px; line-height: 20px; }
.docs li span { display: block; font-size: 13px; line-height: 18px; color: var(--muted); }
.quote { margin: 28px 0 0; border-left: 4px solid var(--green-600); background: var(--surface-2); border-radius: 0 var(--r-lg) var(--r-lg) 0;
  padding: 16px 20px; }
.quote blockquote { margin: 0; }
.quote p { font-size: 17px; line-height: 26px; color: var(--ink); }
.quote figcaption { margin-top: 8px; font-size: 13px; line-height: 18px; color: var(--muted); }
.spec-table { display: grid; grid-template-columns: 1fr; margin: 0; }
@container (min-width: 640px) { .spec-table { grid-template-columns: 1fr 1fr; column-gap: 32px; } }
.spec-table div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.spec-table dt { color: var(--muted); }
.spec-table dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--surface); box-shadow: var(--shadow-bar);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: calc(68px + env(safe-area-inset-bottom));
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); }
.buybar-price { flex: none; } 
.buybar .p { font-size: 18px; line-height: 22px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.buybar small { display: block; font-size: 12px; line-height: 16px; color: var(--muted); font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.buybar .btn { flex: 0 1 auto; }
@media (max-width: 399px) { .buybar .btn { padding-inline: 12px; font-size: 15px; } .buybar .btn i { display: none; } }
@media (min-width: 1024px) { .buybar { display: none; } }

@media (max-width: 1023px) {
  body:has(> .buybar) { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  html:has(body > .buybar) { scroll-padding-bottom: calc(76px + env(safe-area-inset-bottom)); } 
}
@media (min-width: 768px) and (max-width: 1023px) {
  body:has(> .buybar) .toast { bottom: calc(88px + env(safe-area-inset-bottom)); }
}



.page-head { background: var(--navy-900); color: var(--on-dark-2); padding-block: 48px 56px; }
.page-head h1 { color: #fff; margin: 10px 0 12px; max-width: 18em; }
.page-head .lead { color: var(--on-dark-2); max-width: 40em; }
.page-head .actions { margin-top: 24px; }
.page-head a:not(.btn) { color: var(--green-300); }
.page-head a:not(.btn):hover { color: #fff; }
.page-head .updated { margin-bottom: 12px; font-size: 14px; line-height: 20px; color: var(--on-dark-3); }
.head-note { display: flex; gap: 8px; max-width: 40em; margin-top: 16px; font-size: 15px; line-height: 22px; }
.head-note i { flex: none; font-size: 20px; color: var(--lime); margin-top: 1px; }
.page-head-grid { display: grid; gap: 32px; align-items: center; }
.page-head-grid > * { min-width: 0; }
.page-head-grid picture, .page-head-grid img { display: block; width: 100%; }
@media (min-width: 1024px) {
  .page-head { padding-block: 64px 72px; }
  .page-head-grid { grid-template-columns: 7fr 5fr; gap: 56px; }
  .page-head-grid img { border-radius: var(--r-xl); aspect-ratio: 4 / 3; object-fit: cover; }
}
@media (max-width: 1023px) { .page-head-grid picture { display: none; } }
@media (max-width: 479px) { .page-head .actions .btn { flex: 1 1 100%; } }
.page-head.has-summary { padding-bottom: 72px; }
@media (min-width: 1024px) { .page-head.has-summary { padding-bottom: 80px; } }
.summary { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: -32px 0 0;
  position: relative; z-index: 2; }
@media (min-width: 1024px) { .summary { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.summary li { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-2); padding: 16px; }
.summary li > b { display: block; font-size: 22px; line-height: 28px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink);
  font-variant-numeric: tabular-nums; text-wrap: balance; }
.summary li > span { display: block; font-size: 14px; line-height: 20px; color: var(--muted); margin-top: 4px; }
.summary .nobr { white-space: nowrap; }
@media (max-width: 399px) { .summary li { padding: 14px 12px; } .summary li > b { font-size: 20px; line-height: 26px; } }
@media (max-width: 319px) { .summary { grid-template-columns: minmax(0, 1fr); } } 


.doc { display: grid; gap: 24px; padding-block: 32px 64px; }
.doc > * { min-width: 0; }
@media (min-width: 1024px) { .doc { grid-template-columns: 240px minmax(0, 720px); gap: 64px; padding-block: 48px 80px; } }
.toc { align-self: start; }
@media (min-width: 1024px) { .toc { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; } }
.toc-title { font-size: 13px; line-height: 16px; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; border-left: 2px solid var(--line); }
.toc a { display: block; padding: 6px 0 6px 14px; margin-left: -2px; border-left: 2px solid transparent; color: var(--ink-2);
  font-size: 14px; line-height: 20px; font-weight: 600; text-decoration: none; text-wrap: balance; }
.toc a:hover, .toc a[aria-current="true"] { color: var(--ink); border-left-color: var(--green-600); }
.toc a:focus-visible { outline-offset: -3px; }
@media (min-width: 1024px) and (pointer: coarse) { .toc a { padding-block: 12px; } }
@media (max-width: 1023px) {
  .toc { margin-inline: calc(-1 * var(--gutter)); }
  .toc-title { padding-inline: var(--gutter); }
  .toc ol { display: flex; overflow-x: auto; border: 0; gap: 8px; padding: 2px var(--gutter) 6px; scrollbar-width: none; }
  .toc ol::-webkit-scrollbar { display: none; }
  .toc li { flex: none; }
  .toc a { display: flex; align-items: center; min-height: 44px; padding: 0 16px; margin: 0; border: 1px solid var(--line);
    border-radius: var(--r-pill); background: var(--surface); white-space: nowrap; }
  .toc a:hover, .toc a[aria-current="true"] { border-color: var(--green-600); }
}


.prose { max-width: 720px; font-size: 17px; line-height: 28px; }
.prose h2 { font-size: 26px; line-height: 32px; margin: 40px 0 12px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 20px; line-height: 26px; margin: 28px 0 8px; }
.prose p, .prose li, .prose dd { font-size: 17px; line-height: 28px; color: var(--ink); }
.prose p + p { margin-top: 14px; }
.prose ul, .prose ol { padding-left: 22px; margin: 12px 0; display: grid; gap: 8px; }
.prose li > ul { margin: 8px 0 0; }
.prose li::marker { color: var(--green-600); font-weight: 700; }
.updated { font-size: 14px; line-height: 20px; color: var(--muted); }
@media (max-width: 639px) {
  .prose p, .prose li, .prose dd { font-size: 16px; line-height: 26px; }
  .prose h2 { font-size: 22px; line-height: 28px; }
}
.prose .ticks { list-style: none; padding: 0; gap: 10px; }
.ticks li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; }
.ticks li > i { font-size: 22px; color: var(--green-600); margin-top: 3px; }
.prose .features { list-style: none; padding: 0; gap: 12px; margin-top: 16px; }
@media (min-width: 768px) { .prose .features { grid-template-columns: 1fr 1fr; } }
.features li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px;
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.features li > i, .topics dt i { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px;
  height: 40px; border-radius: 50%; font-size: 22px; background: var(--green-100); color: var(--green-700); }
.prose .features p { font-size: 15px; line-height: 22px; color: var(--ink-2); }
.features b { display: block; margin-bottom: 2px; font-size: 16px; line-height: 22px; color: var(--ink); }
.prose .steps { display: block; padding: 0; margin: 20px 0 0; }
.prose .step p { padding-top: 7px; font-size: 16px; line-height: 26px; color: var(--ink-2); }
.prose .step b { color: var(--ink); }
.topics { display: grid; gap: 12px; margin: 16px 0 0; }
@media (min-width: 768px) { .topics { grid-template-columns: 1fr 1fr; } }
.topics > div { padding: 16px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.topics dt { display: flex; align-items: center; gap: 12px; font-size: 17px; line-height: 24px; font-weight: 700; color: var(--ink); }
.prose .topics dd { margin: 10px 0 0; font-size: 15px; line-height: 22px; color: var(--ink-2); }

.fact-box { margin: 16px 0 0; padding: 16px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.prose .fact-box .fact-lead { font-size: 17px; line-height: 26px; font-weight: 600; }
.prose .fact-box .fact-now { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; margin-top: 12px;
  padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); font-size: 15px; line-height: 23px; }
.fact-now i { font-size: 20px; color: var(--green-700); margin-top: 2px; }
.fact-box dl { margin: 12px 0 0; }
.fact-box dl > div { display: grid; gap: 2px 16px; padding: 10px 0; border-top: 1px solid var(--line); }
.fact-box dl > div:last-child { padding-bottom: 0; }
@media (min-width: 640px) { .fact-box dl > div { grid-template-columns: 8.5em minmax(0, 1fr); } }
.fact-box dt { font-size: 14px; line-height: 23px; font-weight: 700; color: var(--muted); }
.prose .fact-box dd { margin: 0; font-size: 15px; line-height: 23px; color: var(--ink); }
.terms-doc { padding: 20px; background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-1); }
@media (min-width: 640px) { .terms-doc { padding: 32px; } }
.terms-doc + .terms-doc { margin-top: 24px; }
.prose .terms-doc h2 { margin-bottom: 8px; }
.terms-doc .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.prose .terms-doc ol { gap: 12px; }
.prose .terms-doc li { font-size: 16px; line-height: 26px; padding-left: 4px; }
.prose .table { border-collapse: separate; border-spacing: 0; margin: 16px 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); }
.prose .table th:first-child, .prose .table td:first-child { padding-left: 16px; }
.prose .table th:last-child, .prose .table td:last-child { padding-right: 16px; }
@media (max-width: 639px) {
  .table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; }
  .table-stack tr { padding: 12px 16px; }
  .table-stack tr + tr { border-top: 1px solid var(--line); }
  .prose .table.table-stack td { padding: 0; border: 0; }
  .table-stack td + td { margin-top: 8px; }
  .table-stack td::before { content: attr(data-label); display: block; font-size: 13px; line-height: 18px; font-weight: 600;
    color: var(--muted); }
}


.receipt { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin: 12px 0 16px; }
.receipt > div { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 16px; padding: 14px 16px; }
.receipt > div + div { border-top: 1px solid var(--line); }
.receipt > div:not(.sum) + .sum { border-top: 2px solid var(--ink); }
.receipt dt { font-size: 15px; line-height: 22px; color: var(--ink-2); }
.prose .receipt dd { margin: 0; font-size: 15px; line-height: 22px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.receipt .sum dt, .prose .receipt .sum dd { font-weight: 800; color: var(--ink); }
@media (max-width: 479px) { .receipt > div { flex-wrap: wrap; } .receipt dt { flex: 1 1 100%; } .prose .receipt dd { margin-left: auto; } }


.callout { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; background: var(--amber-100); border-radius: var(--r-lg);
  padding: 16px 18px; margin: 16px 0; }
.callout > i { font-size: 28px; color: var(--amber-700); }
.callout b { display: block; font-size: 17px; line-height: 24px; margin-bottom: 4px; color: var(--ink); }
.callout p, .prose .callout p, .prose .callout li { font-size: 15px; line-height: 23px; }
.callout p:has(> .addr) { text-wrap: balance; } 
.prose .callout ul { margin: 8px 0; gap: 4px; }
.callout .actions { margin-top: 16px; }


.faq { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-1); overflow: hidden; margin: 16px 0; }
.faq details + details { border-top: 1px solid var(--line); }
.faq summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: 12px; align-items: center;
  min-height: 56px; padding: 12px 16px; font-size: 17px; line-height: 24px; font-weight: 600; cursor: pointer; text-wrap: balance;
  transition: background-color .15s ease-out; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: var(--bg); }
.faq summary:focus-visible { outline-offset: -3px; }
.faq summary i { font-size: 24px; color: var(--green-700); transition: transform .15s ease-out; }
.faq details[open] summary i { transform: rotate(45deg); }
.faq .answer { padding: 0 16px 16px; }
.faq .answer p, .faq .answer li { font-size: 16px; line-height: 26px; color: var(--ink-2); }


.cta-card { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-1); padding: 24px; margin-top: 48px;
  display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between; }
.prose .cta-card h3 { margin: 0; font-size: 20px; line-height: 26px; }
.prose .cta-card p { font-size: 16px; line-height: 24px; color: var(--ink-2); }
@media (max-width: 479px) { .cta-card .actions { width: 100%; } .cta-card .actions .btn { flex: 1 1 100%; } }



.form-page { display: grid; gap: 24px; padding-block: 32px 64px; }
.form-page > * { min-width: 0; }
@media (min-width: 1024px) { .form-page { grid-template-columns: minmax(0, 600px) minmax(0, 1fr); gap: 48px; align-items: start;
  padding-block: 48px 80px; } }
@media (max-width: 639px) { .form-page { gap: 16px; padding-block: 24px 48px; } }
.form-page.single { grid-template-columns: minmax(0, 440px); justify-content: center; }
.form-page.single.wide { grid-template-columns: minmax(0, 560px); }
.form-card { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-1); padding: 20px; }
@media (min-width: 640px) { .form-card { padding: 32px; } }
.form-card h1 { margin: 8px 0; }
.form-card > h1:first-child { margin-top: 0; }
.form-page.single:not(.wide) .form-card h1 { font-size: clamp(28px, 25.6px + .65vw, 34px); line-height: 1.18; } 
.form-card .intro { color: var(--muted); font-size: 16px; line-height: 24px; overflow-wrap: break-word; }
.form-card .intro b { color: var(--ink-2); font-weight: 600; }
.form-card .nobr { display: inline-block; max-width: 100%; overflow-wrap: anywhere; } 
.form-card .form-stack { margin-top: 24px; }

.form-card .after { margin-top: 24px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 15px; line-height: 22px;
  display: grid; }
.form-card .after > p { padding-block: 11px; }
.form-card .after > p > a { padding-block: 11px; } 
.form-card .after form { margin: 0; }
.form-card .after .btn-ghost { min-height: 44px; padding: 0; border: 0; font-size: 15px; font-weight: 400;
  text-underline-offset: 3px; } 
.form-note { font-size: 13px; line-height: 20px; color: var(--muted); }


.form-stack { display: flex; flex-direction: column; gap: 18px; }
.form-stack fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.form-stack legend { font-size: 14px; font-weight: 600; margin-bottom: 6px; padding: 0; }
.form-stack .btn-block { margin-top: 6px; }

.form-stack :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]), select, textarea):hover {
  border-color: var(--ink-2); }
.form-stack :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]), select,
  textarea)[aria-invalid="true"] { border-color: var(--red-700); }
.form-stack :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]), select, textarea):focus-visible {
  border-color: var(--green-600); }
.errorlist li { display: flex; gap: 6px; align-items: flex-start; }
.errorlist li > i { flex: none; font-size: 16px; margin-top: 1px; }
.check-field .check-line { font-weight: 600; padding-block: 8px; }
.check-line:hover input { border-color: var(--ink-2); }
.check-line input[aria-invalid="true"] { border-color: var(--red-700); }
.check-field .errorlist { margin-top: 0; padding-left: 36px; }

.terms-box { max-height: 240px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px;
  scrollbar-width: thin;
  background: linear-gradient(var(--bg) 30%, rgba(244,246,249,0)) top / 100% 32px no-repeat local,
    linear-gradient(rgba(244,246,249,0), var(--bg) 70%) bottom / 100% 32px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(14,31,54,.14), rgba(14,31,54,0)) top / 100% 10px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(14,31,54,.14), rgba(14,31,54,0)) bottom / 100% 10px no-repeat scroll,
    var(--bg); }
.terms-box h2, .terms-box h3 { font-size: 16px; line-height: 22px; letter-spacing: 0; }
.terms-box .muted { font-size: 13px; line-height: 18px; margin-top: 2px; }
.terms-box ol { margin: 10px 0 0; padding-left: 22px; display: grid; gap: 8px; font-size: 14px; line-height: 21px; color: var(--ink-2); }
.terms-box li { padding-left: 2px; }
.terms-box li::marker { color: var(--muted); font-weight: 600; }
.terms-more > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px;
  padding: 10px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); font-size: 15px;
  line-height: 22px; font-weight: 600; color: var(--ink); cursor: pointer; transition: border-color .15s ease-out; }
.terms-more > summary::-webkit-details-marker { display: none; }
.terms-more > summary:hover { border-color: var(--navy-200); }
.terms-more > summary i { flex: none; font-size: 20px; color: var(--green-700); transition: transform .15s ease-out; }
.terms-more[open] > summary { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.terms-more[open] > summary i { transform: rotate(180deg); }
.terms-more > .terms-box { border-top: 0; border-radius: 0 0 var(--r-lg) var(--r-lg); }


.drop-zone { position: relative; display: flex; min-height: 76px; border: 1.5px dashed var(--border-input);
  border-radius: var(--r-lg); background: var(--bg); transition: border-color .15s ease-out, background-color .15s ease-out; }
.drop-zone > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 30px; color: var(--navy);
  pointer-events: none; }
.drop-zone:hover { border-color: var(--ink-2); background: var(--surface); }
.drop-zone:focus-within { border-color: var(--green-600); box-shadow: 0 0 0 3px rgba(29,138,59,.28); }
.field:has(.errorlist) .drop-zone { border-color: var(--red-700); }
.drop-zone:has(input[required]:valid) { border-style: solid; border-color: var(--green-600); background: var(--green-100); } 
.drop-zone:has(input[required]:valid) > i { color: var(--green-700); }
.drop-zone input[type=file] { flex: 1; min-width: 0; padding: 14px 14px 14px 56px; border-radius: inherit;
  font: 400 15px/22px var(--font); color: var(--ink-2); cursor: pointer; }
.drop-zone input[type=file]:focus-visible { outline: none; }
.drop-zone input[type=file]::file-selector-button { margin-right: 12px; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--navy);
  border-radius: var(--r-md); background: var(--surface); color: var(--navy); font: 600 15px/20px var(--font); cursor: pointer;
  transition: background-color .15s ease-out; }
.drop-zone input[type=file]::file-selector-button:hover { background: var(--navy-100); }
@media (max-width: 399px) { .drop-zone > i { display: none; } .drop-zone input[type=file] { padding-left: 14px; } } 


.side-panel { background: var(--navy-900); color: var(--on-dark-2); border-radius: var(--r-xl); padding: 28px; }
@media (min-width: 1024px) { .side-panel { position: sticky; top: 24px; } }
@media (max-width: 639px) { .side-panel { padding: 24px 20px; } }
.side-panel h2 { color: #fff; font-size: 22px; line-height: 28px; margin: 10px 0 20px; }
.side-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.side-steps li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; align-items: start; }
.side-steps .n { width: 36px; height: 36px; border-radius: 50%; background: var(--lime); color: var(--navy-900); font-size: 16px;
  line-height: 36px; font-weight: 800; text-align: center; }
.side-steps b { display: block; color: #fff; font-size: 16px; line-height: 22px; }
.side-steps div > span { display: block; margin-top: 2px; font-size: 14px; line-height: 20px; }


.state-card { display: flex; flex-direction: column; align-items: center; text-align: center; }
.state-card .intro { max-width: 30em; }
.state-card .after { align-self: stretch; }
.state-card .actions { justify-content: center; margin-top: 24px; }
.state-card > .btn-block { margin-top: 24px; }
.state-card .empty-ico.is-warn { background: var(--amber-100); color: var(--amber-700); }
@media (max-width: 479px) { .state-card .actions { align-self: stretch; } .state-card .actions .btn { flex: 1 1 100%; } }



.back { margin: -8px 0 12px -4px; min-height: 44px; font-weight: 600; }
.desk-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px;
  margin-bottom: 24px; }
.desk-head > div { min-width: 0; max-width: 100%; }
.desk-head h1 { margin-top: 8px; overflow-wrap: break-word; }
.desk-head .intro { margin-top: 10px; max-width: 62ch; font-size: 17px; line-height: 26px; color: var(--ink-2); }
.desk-head .intro b { color: var(--ink); }
.desk-head .sub { margin-top: 6px; font-size: 15px; line-height: 22px; color: var(--muted); overflow-wrap: anywhere; }
.desk-meta, .desk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.desk-meta { margin-top: 12px; }
.desk-actions form { margin: 0; }
.desk-stack { display: grid; gap: 24px; }
.desk-stack > * { min-width: 0; }
.card { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-1); padding: 20px; }
@media (min-width: 640px) { .card { padding: 24px 28px; } }

.card-head { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 14px; align-items: start; }
.card-head > .card-intro, .card-head > .btn { grid-column: 1 / -1; }
.card-head > .btn { justify-self: start; margin-top: 8px; }
@media (min-width: 640px) {
  .card-head { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .card-head > .card-intro { grid-column: 2; }
  .card-head > .btn { grid-column: 3; grid-row: 1; margin-top: 0; }
}
.card-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 22px;
  background: var(--green-100); color: var(--green-700); }
.card-ico.navy { background: var(--navy-100); color: var(--navy); }
.card-ico.amber { background: var(--amber-100); color: var(--amber-700); }
.card-head h2 { font-size: 22px; line-height: 28px; padding-top: 6px; }
.card-intro { margin-top: 4px; max-width: 75ch; font-size: 15px; line-height: 22px; color: var(--muted); }
.card-intro b { color: var(--ink); }
.rows { margin-top: 16px; border-top: 1px solid var(--line); }
.desk-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 24px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.desk-row:last-child { border-bottom: 0; padding-bottom: 0; }
.card > .desk-row:first-child { padding-top: 0; }
.visit-title { margin-top: 8px; }

.desk-row.has-thumb { grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; }
@media (min-width: 640px) { .desk-row.has-thumb { grid-template-columns: 96px minmax(0, 1fr); column-gap: 20px; } }
.desk-row.has-thumb > .row-head { align-self: center; }
.desk-row.has-thumb > .row-body, .desk-row > .row-side { grid-column: 1 / -1; }
.row-body > :first-child { margin-top: 0; }
@media (min-width: 1024px) {
  .desk-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .desk-row > .row-side { grid-column: auto; justify-content: flex-end; }
  .desk-row > .row-side.col { width: 300px; align-items: flex-start; }
  .desk-row.has-thumb { grid-template-columns: 96px minmax(0, 1fr) auto; grid-template-rows: auto 1fr; gap: 6px 20px; }
  .desk-row.has-thumb > .thumb { grid-row: 1 / span 2; }
  .desk-row.has-thumb > .row-head { align-self: start; }
  .desk-row.has-thumb > .row-body { grid-column: 2; align-self: start; }
  .desk-row.has-thumb > .row-side { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
}
.thumb { aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; display: grid; place-items: center; align-self: start;
  background: var(--navy-100); color: var(--navy-200); font-size: 32px; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.row-ref { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--muted); }
.row-title { display: block; font-size: 17px; line-height: 24px; font-weight: 700; color: var(--ink); overflow-wrap: break-word; }
a.row-title { text-decoration: none; }
a.row-title:hover { color: var(--green-700); text-decoration: underline; }
.row-text { margin-top: 4px; font-size: 15px; line-height: 22px; color: var(--ink-2); }
.row-text b, .row-text .num { color: var(--ink); }
.row-text .num, .progress-list .num, .status .num, .pay-into .num { white-space: nowrap; }
.row-meta { margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--muted); overflow-wrap: anywhere; }
.row-side { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.row-side.col { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; }
.row-side form { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.row-side form.inline-field { align-items: stretch; } 
.row-side .btn-ghost { padding-inline: 0; }
.row-side .row-form { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; width: 100%; } 
.row-form .check-line { padding-block: 4px; font-size: 14px; line-height: 20px; }
.row-form .inline-field { align-self: stretch; }
.inline-field { display: flex; flex-wrap: wrap; gap: 8px; }
.inline-field .input { flex: 1 1 160px; width: auto; min-width: 0; }
.inline-field .btn { flex: none; }

@media (max-width: 767px) {
  .desk-row .btn-sm { min-height: 44px; }
  .desk-row > .row-side:not(.col) > form { flex: 1 1 100%; }
  .desk-row > .row-side.col { align-items: stretch; }
  .desk-row > .row-side > .btn-primary, .desk-row > .row-side > form:not(.inline-field) > .btn:not(.btn-ghost) { flex: 1 1 auto; }
  .row-side .row-form > .btn { align-self: stretch; }
}
.empty-line { margin-top: 12px; color: var(--muted); }

.status { display: inline-flex; align-items: flex-start; gap: 6px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink-2); }
.status i { flex: none; font-size: 18px; margin-top: 1px; }
.status.ok { color: var(--green-700); }
.status.todo { color: var(--amber-700); }
.status.wait { color: var(--navy); }
.status.bad { color: var(--red-700); }
.status.off { color: var(--muted); }
p.status { display: flex; margin-top: 8px; }
.progress-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.progress-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.progress-list i { font-size: 18px; margin-top: 1px; color: var(--muted); }
.progress-list .done i { color: var(--green-600); }
.progress-list b { color: var(--ink); }
.pay-into { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; margin-top: 12px; padding: 12px 14px;
  border-radius: var(--r-lg); background: var(--surface-2); font-size: 14px; line-height: 21px; color: var(--ink-2); }
.pay-into > i { font-size: 22px; color: var(--navy); }
.pay-into b { color: var(--ink); }
.pay-into .chip { margin-left: 4px; vertical-align: 1px; }

.notice { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 16px;
  border-radius: var(--r-lg); background: var(--navy-100); font-size: 15px; line-height: 22px; color: var(--ink-2); }
.notice > i { font-size: 24px; color: var(--navy); }
.notice > div { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.notice b { color: var(--ink); }
.notice form { margin: 0; }
.notice .btn-ghost { padding-inline: 0; min-height: 44px; }
.notice.amber { background: var(--amber-100); }
.notice.amber > i { color: var(--amber-700); }
.notice.red { background: var(--red-100); }
.notice.red > i { color: var(--red-700); }
.notice.demo { background: var(--surface); border: 1.5px dashed var(--border-input); }
.notice.demo > i { color: var(--muted); }
.card-head + .notice { margin-top: 16px; }
.pay-into + .row-meta, .notice + .row-meta { margin-top: 10px; }
.desk-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.desk-note > i { font-size: 26px; color: var(--navy); }
.desk-note p { flex: 1 1 200px; } 


.pay-grid { display: grid; gap: 16px; align-items: start; }
.pay-grid > * { min-width: 0; }
.pay-main { display: grid; gap: 16px; }
@media (min-width: 1024px) { .pay-grid { grid-template-columns: minmax(0, 1fr) 400px; gap: 32px 40px; } }

@media (min-width: 1024px) and (min-height: 800px) { .pay-aside { position: sticky; top: 24px; } }
.pay-status { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 319px) { .pay-status { gap: 10px; } } 
.pay-status > div { overflow-wrap: break-word; } 
.pay-status p + p { margin-top: 6px; }
.pay-ref { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--muted); }
.pay-state { font-size: 20px; line-height: 26px; font-weight: 700; color: var(--ink); margin-top: 2px; text-wrap: balance; }
.pay-state.ok { color: var(--green-700); }
.pay-text { font-size: 15px; line-height: 22px; color: var(--ink-2); }
.pay-text i { font-size: 18px; vertical-align: -3px; margin-right: 4px; color: var(--navy); }
.pay-small { font-size: 14px; line-height: 20px; color: var(--muted); }
.pay-way { display: grid; gap: 16px; }
.pay-way .card-head h2 { font-size: 20px; line-height: 26px; padding-top: 7px; }
.pay-facts { margin: 0; border: 1px solid var(--line); border-radius: var(--r-lg); }
.pay-facts > div { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 2px 16px; align-items: baseline; padding: 12px 16px; }
.pay-facts > div + div { border-top: 1px solid var(--line); }
.pay-facts dt { font-size: 14px; line-height: 20px; color: var(--muted); }
.pay-facts dd { margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.pay-facts .big { font-size: 20px; line-height: 26px; font-weight: 800; letter-spacing: .01em; }
@media (max-width: 419px) { .pay-facts > div { grid-template-columns: minmax(0, 1fr); } }
.pay-way > .btn, .pay-way > form { justify-self: start; }
@media (max-width: 479px) {
  .pay-way > .btn, .pay-way form > .btn { flex: 1 1 100%; width: 100%; }
  .pay-way > .btn, .pay-way > form { justify-self: stretch; }
}
.pay-aside { display: grid; gap: 16px; }
.pay-aside .callout { margin: 0; }
.pay-aside .callout p { font-size: 14px; line-height: 21px; }
.pay-aside .callout b { display: inline; margin: 0; font-size: inherit; line-height: inherit; }
.pay-aside form { margin: 0; }
.pay-aside .btn-ghost { padding-inline: 0; }
.pay-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; font-size: 15px;
  line-height: 22px; color: var(--ink-2); }
.pay-row + .pay-row, .pay-note + .pay-row { border-top: 1px solid var(--line); }
.pay-row:first-child, .split + .pay-row { padding-top: 0; }
.pay-row > .num { font-weight: 600; color: var(--ink); white-space: nowrap; }
.pay-row.due { color: var(--ink); font-size: 17px; font-weight: 700; }
.pay-row.due > .num { font-size: 24px; line-height: 30px; font-weight: 800; letter-spacing: -0.01em; }
.pay-row .key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; background: var(--green-600); }
.pay-row .key.m1 { background: var(--navy); }

@media (max-width: 319px) { .pay-row { flex-wrap: wrap; gap: 2px 12px; } .pay-row > .num { margin-left: auto; } }
.pay-sum .pay-note { margin-top: -6px; padding-bottom: 12px; font-size: 13px; line-height: 19px; color: var(--muted); }
.pay-sum .split { margin: 0 0 16px; }
.pay-points { display: grid; gap: 8px; font-size: 14px; line-height: 21px; color: var(--ink-2); }


.form-cols { display: grid; gap: 16px; align-items: start; }
@media (min-width: 1024px) { .form-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.form-cols > .card { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.form-cols h2, .card > h2 { font-size: 20px; line-height: 26px; }
.form-cols h2:not(:first-of-type) { margin-top: 12px; padding-top: 24px; border-top: 1px solid var(--line); }
@media (max-width: 639px) { .form-cols .btn-lg, .card > form > .btn-lg { width: 100%; } }
@media (max-width: 479px) { .form-cols .btn-lg { padding-inline: 16px; } } 
.choice-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 8px; }
.choice-tiles .check-line { align-items: center; min-height: 56px; padding: 0 14px; border: 1.5px solid var(--line);
  border-radius: var(--r-md); background: var(--surface); font-weight: 600; }
.choice-tiles .check-line:has(input:checked) { border: 2px solid var(--green-600); background: var(--green-100); padding: 0 13.5px; }
.desk-help { font-size: 14px; line-height: 20px; color: var(--muted); }


.photo-progress { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  margin-bottom: 16px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--navy-100); color: var(--ink); }
.photo-progress > b { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; line-height: 22px; }
.photo-progress > b i { font-size: 22px; color: var(--navy); }
.photo-progress > span { flex: 1 1 260px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.photo-progress.is-complete { background: var(--green-100); }
.photo-progress.is-complete > b i { color: var(--green-700); }
@media (max-width: 479px) { .photo-progress > .btn { flex: 1 1 100%; } }
.inspect-form { display: flex; flex-direction: column; gap: 16px; }
.inspect-form fieldset { min-width: 0; margin: 0; padding: 16px; border: 0; border-radius: var(--r-xl); background: var(--surface);
  box-shadow: var(--shadow-1); }
@media (min-width: 640px) { .inspect-form fieldset { padding: 24px 28px; } }
.inspect-form legend { float: left; width: 100%; margin: 0 0 4px; padding: 0; font-size: 18px; line-height: 24px; font-weight: 700;
  color: var(--ink); }
.inspect-form legend + * { clear: both; }
.inspect-form legend:not(:has(+ .helptext)) { margin-bottom: 12px; } 
.inspect-form fieldset > .helptext { margin: 0 0 4px; font-size: 14px; line-height: 20px; }
.inspect-form > .errorlist { background: var(--red-100); border-radius: var(--r-lg); padding: 12px 14px; font-size: 14px; }
.check-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.check-row:last-child { border-bottom: 0; padding-bottom: 0; }
.check-row .q { font-size: 16px; line-height: 22px; font-weight: 600; }
.check-row .helptext { margin-top: 2px; }
.check-row .errorlist { grid-column: 1 / -1; margin: 0; }
@media (min-width: 600px) { .check-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; } }
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (min-width: 600px) { .choice { grid-template-columns: repeat(2, 116px); } }
.choice label { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 12px;
  border: 1.5px solid var(--border-input); border-radius: var(--r-md); background: var(--surface); font-weight: 600; cursor: pointer;
  transition: background-color .15s ease-out, border-color .15s ease-out; }
.choice input { appearance: none; flex: none; width: 20px; height: 20px; margin: 0; border: 1.5px solid var(--border-input);
  border-radius: 50%; background: #fff; cursor: pointer; }
.choice input:checked { border: 6px solid var(--green-600); }
.choice label:hover { border-color: var(--ink-2); }
.choice label:has(input:checked) { border: 2px solid var(--green-600); background: var(--green-100); color: var(--green-800); }
.choice label:has(input[value="fail"]:checked) { border-color: var(--red-700); background: var(--red-100); color: var(--red-700); }
.choice input[value="fail"]:checked { border-color: var(--red-700); }
.choice input:focus-visible { outline: none; }
.choice label:has(input:focus-visible) { outline: 3px solid var(--green); outline-offset: 2px; }
.panel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; margin-top: 8px; }
.panel-grid .field > label { margin-bottom: 4px; }
.panel-grid .input { min-height: 48px; }
.panel-grid select:has(option[value="scratch"]:checked) { background-color: #FDE7A9; border-color: #B7791F; }
.panel-grid select:has(option[value="dent"]:checked) { background-color: var(--coral-200); border-color: #C4502B; }
.panel-grid select:has(option[value="repaint"]:checked) { background-color: var(--navy-200); border-color: #4A72A8; }
.mech-list { display: grid; margin-top: 4px; }
@media (min-width: 640px) { .mech-list { grid-template-columns: 1fr 1fr; column-gap: 24px; } }
.mech-list .check-line { min-height: 48px; align-items: center; padding-block: 8px; font-size: 16px; }
.inspect-form fieldset.form-stack legend { margin-bottom: 0; }
.inspect-form > .btn { align-self: flex-start; }
@media (max-width: 639px) { .inspect-form > .btn, .photo-end .btn { width: 100%; } }


.photo-locked { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; margin-bottom: 16px; padding: 14px 16px;
  border-radius: var(--r-lg); background: var(--navy-100); font-weight: 600; }
.photo-locked i { font-size: 24px; color: var(--navy); }
.photo-tips { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.photo-tips > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px;
  font-weight: 700; cursor: pointer; }
.photo-tips > summary::-webkit-details-marker { display: none; }
.photo-tips > summary > i:first-child { font-size: 22px; color: var(--navy); }
.photo-tips > summary > .caret { margin-left: auto; font-size: 18px; color: var(--green-700); transition: transform .15s ease-out; }
.photo-tips[open] > summary > .caret { transform: rotate(180deg); }
.photo-tips ul { margin: 0; padding: 0 16px 16px 36px; display: grid; gap: 8px; font-size: 15px; line-height: 22px; color: var(--ink-2); }
.photo-tips li::marker { color: var(--green-600); }
.shot-list { list-style: none; margin: 16px 0 24px; padding: 0; display: grid; gap: 12px; }
@media (min-width: 1024px) { .shot-list { grid-template-columns: 1fr 1fr; } }
.shot { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.shot.is-done { border-color: var(--green-200); }
.shot-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 16px; line-height: 22px; font-weight: 700; }
.shot-title > i { font-size: 20px; color: var(--green-600); }
.shot .helptext { margin-top: 4px; font-size: 14px; line-height: 20px; }
.shot-photos { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.shot-photo { margin: 0; flex: none; width: 136px; display: flex; flex-direction: column; gap: 4px; }
.shot-photo a { display: block; border-radius: var(--r-md); }
.shot-photo a:focus-visible { outline-offset: -3px; } 
.shot-photo img { width: 136px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); background: var(--surface-2); }
.shot-photo figcaption { font-size: 13px; line-height: 18px; color: var(--ink-2); overflow-wrap: anywhere; }
.shot-photo form { margin: auto 0 0; } 
.shot-remove { min-height: 44px; padding-inline: 2px; font-size: 14px; color: var(--red-700); }
.shot-remove:hover { color: var(--red-700); }
.shot-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.shot > .shot-form { margin-top: auto; } 
.shot-note { flex: 1 1 100%; }
.shot-take { position: relative; overflow: hidden; flex: 1 1 100%; min-height: 52px; }
@media (min-width: 640px) { .shot-note { flex: 1 1 220px; } .shot-take { flex: 0 0 auto; } }
.shot-take input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.shot-take:focus-within { outline: 3px solid var(--green); outline-offset: 2px; }
.shot.is-busy .shot-take, .shot.is-busy .shot-remove { opacity: .55; pointer-events: none; }
.shot-status { flex-basis: 100%; margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--green-700); }
.shot-status:empty { display: none; }
.shot-status.is-error { color: var(--red-700); }
.photo-end { display: flex; flex-wrap: wrap; gap: 12px; }


.owner-block { margin-top: 40px; }
.owner-block > h2 { font-size: 24px; line-height: 30px; }
.owner-block > .muted { margin-top: 6px; max-width: 75ch; font-size: 15px; line-height: 22px; }
.owner-list { display: grid; gap: 12px; margin-top: 16px; }
.owner-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 16px; background: var(--surface);
  border-radius: var(--r-xl); box-shadow: var(--shadow-1); }
@media (min-width: 640px) { .owner-card { padding: 20px 24px; } }
.owner-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.owner-card b.owner-what, .owner-title > b { font-size: 17px; line-height: 24px; }
.owner-figure { font-size: 18px; line-height: 26px; font-weight: 600; }
.owner-figure b { font-weight: 800; }
.owner-text { font-size: 15px; line-height: 22px; color: var(--ink-2); }
.owner-small { font-size: 14px; line-height: 20px; color: var(--muted); }
.owner-problem { display: flex; gap: 8px; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--red-700); }
.owner-problem i { flex: none; font-size: 20px; margin-top: 1px; }
.owner-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.owner-form .input { flex: 1 1 220px; width: auto; min-height: 56px; }

@media (max-width: 479px) {
  .owner-form .btn { flex: 1 1 auto; }
  .owner-form > input[type=hidden] + .btn-primary { flex-basis: 100%; }
  .owner-form .input { flex: 1 1 100%; min-width: 0; }
}
.owner-figure .nowrap { white-space: nowrap; }
.owner-photos { display: flex; gap: 8px; overflow-x: auto; align-items: flex-start; padding-bottom: 4px; }
.owner-photos figure { margin: 0; flex: none; width: 128px; }
.owner-photos a { display: block; border-radius: var(--r-md); }
.owner-photos a:focus-visible { outline-offset: -3px; } 
.owner-photos img { width: 128px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); background: var(--surface-2); }
.owner-photos figcaption { margin-top: 4px; font-size: 13px; line-height: 18px; color: var(--ink-2); overflow-wrap: anywhere; }
.owner-log { margin-top: 16px; padding-block: 8px; }
.owner-log > div { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 2px 12px; padding: 10px 0; font-size: 14px;
  line-height: 20px; color: var(--ink-2); }
.owner-log > div + div { border-top: 1px solid var(--line); }
.owner-log time { color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 479px) { .owner-log > div { grid-template-columns: minmax(0, 1fr); } }