:root { --ink:#122f36; --muted:#52686f; --teal:#006b70; --teal-dark:#005257; --line:#dce5e7; --soft:#f1f6f6; --error:#9d2323; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html { scroll-behavior:auto; }
body { margin:0; background:#f7f9fa; color:var(--ink); font-family:Arial,Helvetica,sans-serif; font-size:16px; line-height:1.5; }
a { color:var(--teal); text-underline-offset:3px; }
button,input,select { font:inherit; }
button,a,input,select,summary { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.65; }
:focus-visible { outline:3px solid #00888e; outline-offset:4px; }
.wrap { width:calc(100% - 48px); max-width:1248px; margin-inline:auto; }
.skip { position:fixed; top:8px; left:16px; z-index:20; padding:12px; background:white; transform:translateY(-160%); }
.skip:focus { transform:none; }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:80px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; flex-shrink:0; min-height:64px; padding-block:8px; }
.brand img { display:block; width:176px; max-width:100%; height:auto; }
.site-header nav { display:flex; gap:24px; flex-wrap:wrap; }
.site-header nav a { display:flex; align-items:center; min-height:44px; font-weight:700; text-decoration:none; }
.site-header nav [aria-current] { color:var(--ink); border-bottom:2px solid var(--teal); }
.preview-note { margin-top:14px; margin-bottom:16px; font-size:13px; color:var(--muted); }
.intro { margin-block:24px; max-width:740px; }
.eyebrow { color:var(--teal); font-size:13px; font-weight:700; letter-spacing:.045em; margin:0 0 8px; }
h1 { font-size:clamp(28px,3vw,38px); letter-spacing:-.025em; line-height:1.15; margin:0 0 12px; }
h2 { font-size:24px; line-height:1.25; margin:0 0 12px; }
h3 { font-size:20px; line-height:1.3; margin:0; }
p { margin:0 0 12px; }
.intro>p:last-child { color:var(--muted); margin:0; }
.filters { padding:16px; border:1px solid var(--line); border-radius:12px; background:white; display:grid; grid-template-columns:minmax(200px,2fr) minmax(140px,1fr) minmax(140px,1fr) auto; gap:12px; align-items:end; }
label { display:flex; flex-direction:column; gap:6px; font-size:14px; font-weight:700; min-width:0; }
input,select { width:100%; min-width:0; min-height:46px; padding:10px 12px; color:var(--ink); border:1px solid #a6bcc2; border-radius:6px; background:white; font-size:16px; }
input:disabled { color:var(--muted); background:var(--soft); cursor:not-allowed; }
.button { min-height:46px; padding:10px 16px; border:1px solid var(--teal); border-radius:7px; display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; font-weight:700; line-height:1.35; text-align:center; transition:background-color 150ms ease; }
.primary { background:var(--teal); color:white; }
.primary:hover { background:var(--teal-dark); }
.secondary { background:white; color:var(--teal); }
.secondary:hover { background:var(--soft); }
.text-button { background:transparent; color:var(--teal); border:0; min-height:44px; padding:8px; text-decoration:underline; text-underline-offset:3px; }
.results-header { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-block:12px; min-height:44px; }
.results-header p { margin:0; font-size:14px; color:var(--muted); }
.cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:stretch; }
.model-card { min-width:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:white; display:flex; flex-direction:column; }
.model-media { position:relative; display:grid; place-items:center; width:100%; aspect-ratio:16/10; background:#fff; border-bottom:1px solid var(--line); overflow:hidden; }
.model-media img, .model-media .media-framed-asset { display:block; object-fit:contain; width:var(--image-width,88%); height:var(--image-height,85%); max-width:94%; max-height:90%; transform:scale(var(--subject-scale,1)); }
.model-card .tag { position:absolute; left:14px; top:14px; padding:5px 9px; border-radius:5px; background:#edf6f6; color:var(--teal-dark); font-size:12px; line-height:1.35; font-weight:700; max-width:calc(100% - 28px); }
.model-card-body { padding:18px; display:flex; flex-direction:column; gap:14px; flex:1; }
.model-identity { display:grid; gap:3px; }
.model-identity h2 { font-size:22px; line-height:1.3; margin:0; overflow-wrap:anywhere; }
.model-identity p { margin:0; color:var(--muted); font-size:14px; }
.price-line { margin:0; font-size:14px; display:flex; gap:4px 10px; flex-wrap:wrap; align-items:baseline; }
.price-line strong { font-size:18px; color:var(--ink); }
.price-line small { color:var(--muted); }
.measure-list { margin:0; padding:10px 12px; background:var(--soft); border-radius:6px; }
.measure-row { display:flex; justify-content:space-between; align-items:baseline; gap:8px; padding-block:4px; font-size:14px; }
.measure-row dt { overflow-wrap:anywhere; }
.measure-row dd { margin:0; font-size:18px; font-weight:700; text-align:right; }
.measure-row dd small { display:block; font-size:12px; font-weight:400; color:var(--muted); }
.offer-summaries { display:grid; gap:8px; }
.offer-summary-list { padding:4px 14px; border:1px solid var(--line); border-radius:8px; }
.offer-summary-list .measure-row { padding-block:11px; gap:12px; }
.offer-summary-list .measure-row+.measure-row { border-top:1px solid var(--line); }
.measure-caption { display:block; margin-top:3px; color:var(--muted); font-size:12px; font-weight:400; }
.offer-summary-list .measure-row dd { flex-shrink:0; }
.offer-note { color:var(--muted); font-size:13px; margin:0; }
.model-card .offer-note { align-self:start; }
.card-actions { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; margin-top:auto; padding-top:12px; border-top:1px solid var(--line); }
.card-actions .text-button { padding-inline:10px; }
.unconfirmed { margin:0; color:var(--muted); font-size:14px; }
.empty,.error { padding:24px; border:1px solid var(--line); border-radius:10px; background:white; }
.error { color:var(--error); }
.back-link { display:inline-flex; align-items:center; min-height:44px; margin-block:16px; }
.detail-heading { margin-block:8px 24px; }
.detail-heading h1 { margin:0; }
.detail-hero { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:32px; align-items:start; background:white; border:1px solid var(--line); border-radius:12px; padding:24px; }
.detail-hero .model-media { border:0; aspect-ratio:16/10; }
.detail-summary { display:grid; gap:14px; }
.detail-summary .price-line strong { font-size:24px; }
.detail-section { margin-block:24px; padding:24px; border:1px solid var(--line); border-radius:10px; background:white; }
.offer-choice { margin-block:12px; border-bottom:1px solid var(--line); padding-bottom:12px; }
.offer-choice>label { display:grid; grid-template-columns:24px minmax(0,1fr); align-items:start; gap:12px; font-size:16px; font-weight:400; }
.offer-choice input { width:20px; min-height:20px; margin:3px 0; accent-color:var(--teal); }
.offer-choice ul { margin:10px 0 0 36px; padding-left:20px; color:var(--muted); font-size:14px; }
.offer-choice .measure-list { margin-top:10px; }
.offer-choice strong { display:block; }
.offer-choice .offer-note { display:block; }
.sources summary { min-height:44px; cursor:pointer; font-weight:700; }
.reference-queue summary { min-height:44px; cursor:pointer; font-weight:700; }
.reference-queue p { margin-top:12px; color:var(--muted); font-size:14px; }
.reference-queue li { margin-block:12px; font-size:14px; }
.sources ul { margin:12px 0; padding-left:20px; }
.sources li { margin-block:8px; overflow-wrap:anywhere; font-size:14px; }
.application-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.application-grid label small { font-weight:400; }
.consent { display:flex; flex-direction:row; align-items:flex-start; gap:10px; font-weight:400; font-size:14px; margin-block:18px; }
.consent input { width:22px; min-height:22px; margin-top:2px; flex-shrink:0; accent-color:var(--teal); }
.form-status { margin-top:12px; color:var(--muted); }
.field-error { color:var(--error); font-weight:400; font-size:13px; }
dialog { border:1px solid var(--line); border-radius:12px; color:var(--ink); max-width:480px; width:calc(100% - 32px); max-height:calc(100dvh - 32px); padding:0; }
dialog::backdrop { background:rgba(12,30,36,.45); }
.dialog-body { padding:24px; display:grid; gap:18px; }
.dialog-body header { display:flex; gap:12px; justify-content:space-between; align-items:center; }
.dialog-body h2,.dialog-body p { margin:0; }
.dialog-body p { font-size:14px; color:var(--muted); }
.site-footer { margin-top:32px; padding-block:24px; color:var(--muted); font-size:13px; border-top:1px solid var(--line); }
@media (max-width:1050px) { .cards { grid-template-columns:repeat(2,minmax(0,1fr)); } .filters { grid-template-columns:minmax(0,2fr) minmax(0,1fr); } }
@media (max-width:720px) { .wrap { width:calc(100% - 32px); } .site-header { flex-wrap:wrap; gap:8px; padding-block:12px; } .site-header nav { gap:16px; } .preview-note { font-size:12px; } .intro { margin-block:20px; } .detail-hero { grid-template-columns:minmax(0,1fr); padding:16px; gap:20px; } .detail-section { padding:16px; } .application-grid { grid-template-columns:minmax(0,1fr); } }
@media (max-width:600px) { .cards { grid-template-columns:minmax(0,1fr); gap:16px; } .filters { gap:12px; } .search-label { grid-column:1/-1; } .filters>#extra-filters { grid-column:1/-1; } .model-card-body { padding:16px; } .measure-row { flex-wrap:wrap; } .measure-row dd { text-align:left; } .brand img { width:152px; } .site-header nav { width:100%; gap:12px 24px; } .site-header nav a { font-size:14px; } }
@media (prefers-reduced-motion:reduce) { * { transition:none!important; scroll-behavior:auto!important; } }