/* Card 0022 — /wycena/ skeleton (Figma 566:8288 1440×700, 540:5037 1440×784, mobile 530:3033).
   ≥1100: two columns, each its own scroll region inside a 100dvh page (≥1440: 720 + 720; 1100–1439: 50% + 50%).
   Left (opinions, with the logo): #fff 10%, padding 56/48/56/48, content centred vertically; scrolls on its own when the
   window is lower than 700 px. Right (form): padding 56/48/56/48, centred with margin-block:auto, scrolls when taller.
   <1100: one column (logo, form, opinions), content max 624 px, normal page scroll, no sticky. */
/* JetBrains Mono: the same font file as home-v2.css (not loaded on this page); Saira and Manrope come from fonts.css. */
@font-face{font-family:'JetBrains Mono';src:url('/assets/fonts/JetBrainsMono-Variable.ttf') format('truetype');font-style:normal;font-weight:100 800;font-display:swap}
html:has(body[data-page="quote"]){background:#000}
body[data-page="quote"]{--v2-orange:#ff4c0c;--v2-lime:#cfff24;margin:0;background:#000;color:#fff;font-family:'JetBrains Mono',monospace;font-size:.875rem;line-height:1.25rem;letter-spacing:.05em}
body[data-page="quote"] *{box-sizing:border-box}
body[data-page="quote"] .skip{position:fixed;left:16px;top:16px;z-index:100;padding:12px 16px;transform:translateY(-200%);background:var(--v2-lime);color:#000;font:500 14px/20px Saira,Arial,sans-serif;letter-spacing:0}
body[data-page="quote"] .skip:focus{transform:translateY(0)}
body[data-page="quote"] :is(.skip,.v2-quote__brand,.v2-quote__form-region,.v2-quote__opinions-region):focus-visible{outline:2px solid var(--v2-lime);outline-offset:-2px}
body[data-page="quote"] :is(.skip,.v2-quote__brand):focus-visible{outline-offset:2px}

.v2-quote{display:flex;flex-direction:column;min-height:100dvh;background:#000;color:#fff}
.v2-quote__brand{display:block;align-self:flex-start;width:max-content;margin:24px max(16px,calc((100% - 624px) / 2));line-height:0}
.v2-quote__brand img{display:block;width:138px;height:44px}
.v2-quote__form-region{display:flex;flex-direction:column;padding:40px max(16px,calc((100% - 624px) / 2))}
/* 0024 r2: 24 px above the h1 keep the place of the Figma accent (not rendered yet), so h1 and the service field sit
   where Figma has them (530:2403 / 530:3033); h1 → service label 16 px. */
.v2-quote__form-inner{display:flex;flex-direction:column;gap:16px;width:100%;max-width:624px;margin-block:auto;padding-top:24px}
.v2-quote__title{margin:0;font:600 32px/40px Saira,Arial,sans-serif;letter-spacing:0;text-transform:uppercase;color:#fff}
/* The legacy global form box from styles.css (border, padding, background) does not apply here. */
.v2-quote .v2-quote__form{display:flex;flex-direction:column;gap:32px;margin:0;padding:0;border:0;background:none;box-shadow:none}
.v2-quote__opinions-region{display:flex;flex-direction:column;padding:40px max(16px,calc((100% - 624px) / 2));background:rgba(255,255,255,.1)}
.v2-quote__opinions-inner{width:100%;max-width:624px}

@media(min-width:1100px){
  .v2-quote{display:grid;grid-template-columns:minmax(0,40fr) minmax(0,60fr);grid-template-rows:auto minmax(0,1fr);height:100dvh;min-height:0;overflow:hidden}
 /* Left column: logo on top, opinions below; one shared #fff 10% background like Figma "Hero content". */
 .v2-quote__brand{grid-column:1;grid-row:1;align-self:stretch;width:auto;margin:0;padding:56px 48px 32px;background:rgba(255,255,255,.1)}
 .v2-quote__brand img{width:138px}
 .v2-quote__opinions-region{grid-column:1;grid-row:2;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 48px 56px}
 /* Logo block (56 + 44 + 32) + this inner area = 700 px: the column fits at ≥700 px and scrolls on its own below. */
 /* 0027: like Figma 563:7845 (SPACE_BETWEEN): the source line sits at the bottom, the opinions block is centred between
    the logo and the source (784: block y174, source y708); at 700 everything is tight (block y132, source y624). */
 .v2-quote__opinions-inner{display:flex;flex-direction:column;flex:1 0 auto;min-height:512px;margin-block:0}
 .v2-quote__form-region{grid-column:2;grid-row:1 / span 2;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:56px 48px;scroll-padding:56px 0}
 .v2-quote__form-inner{max-width:624px;margin-inline:auto}
}
@media(min-width:1440px){
 .v2-quote{grid-template-columns:576px 864px;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
 body[data-page="quote"] *{scroll-behavior:auto!important}
}

/* Card 0024 — fields (Figma 530:3958 / 530:4053; components like the calculator on /chiptuning/#kalkulator).
   ≥1100: rows MARKA|MODEL, ROK|GENERACJA (304 + 16 + 304 at 1440), SILNIK full width; <1100: one column like mobile. */
.v2-quote .v2-quote__form{gap:40px}
/* 0024 r2 spacing from Figma: heading → description 4 px; e-mail → consent and consent → button 40 px (mobile) / 32 px (desktop); checkbox → text 16 px. */
.v2-quote__heading+.v2-quote__intro,.v2-quote__section>legend+.v2-quote__intro,.v2-quote__heading+.v2-quote__intro[hidden]+.v2-quote__intro{margin-top:-12px}
.v2-quote__consent,.v2-quote__submit-row{margin-top:24px}
.v2-quote__section{display:flex;flex-direction:column;gap:16px;min-width:0;margin:0;padding:0;border:0}
.v2-quote__section>legend{display:contents}
.v2-quote__heading{margin:0;color:#fff;font:600 24px/32px Saira,Arial,sans-serif;letter-spacing:0;text-transform:uppercase}
.v2-quote__intro{margin:0;color:rgba(255,255,255,.7);font:300 16px/24px Manrope,Arial,sans-serif;letter-spacing:0}
.v2-quote__note{margin:0;color:rgba(255,255,255,.7);font:300 14px/20px Manrope,Arial,sans-serif;letter-spacing:0}
/* 0028: the action „Wypełnij pola ręcznie.” and „Wróć do wyboru z listy” are buttons styled as the underlined part of
   the sentence (Figma 540:4903 chars 61–82: underline, #ff4c0c). */
.v2-quote .v2-quote__manual{display:inline;margin:0;padding:0;border:0;border-radius:0;background:none;color:var(--v2-orange);font:inherit;letter-spacing:inherit;text-align:left;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.v2-quote .v2-quote__manual:hover{color:#fff}
.v2-quote .v2-quote__manual[hidden],[data-manual-offer][hidden]{display:none}
.v2-quote__status:empty{display:none}
.v2-quote__status,.v2-quote__hint{margin:0;color:rgba(255,255,255,.6);font:300 12px/16px 'JetBrains Mono',monospace;letter-spacing:.05em}
.v2-quote__rows{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.v2-quote__field{display:flex;flex-direction:column;gap:8px;min-width:0;scroll-margin-block:24px}
.v2-quote__field>label{display:block;margin:0;color:rgba(255,255,255,.6);font:300 14px/20px 'JetBrains Mono',monospace;letter-spacing:.05em;text-transform:uppercase}
.v2-quote__combo{position:relative;display:block;width:100%;height:56px}
.v2-quote__combo select,.v2-quote__input{display:block;box-sizing:border-box;width:100%;height:56px;margin:0;border:1px solid rgba(255,255,255,.1);border-radius:0;background:#1c1c1c;color:#fff;letter-spacing:0;text-transform:none}
.v2-quote__combo select{padding:8px 48px 8px 12px;appearance:none;-webkit-appearance:none;font:400 16px/24px Manrope,Arial,sans-serif;cursor:pointer}
.v2-quote__combo select:invalid,.v2-quote__combo select:has(option[value=""]:checked){color:rgba(255,255,255,.6)}
.v2-quote__combo select option{background:#1c1c1c;color:#fff}
.v2-quote__combo select:disabled{opacity:.55;cursor:default}
.v2-quote__caret{position:absolute;top:16px;right:13px;width:24px;height:24px;pointer-events:none}
.v2-quote__input{padding:8px 12px;font:400 16px/24px Manrope,Arial,sans-serif}
.v2-quote__input::placeholder{color:rgba(255,255,255,.6);opacity:1}
.v2-quote [aria-invalid="true"]{border-color:var(--v2-orange)}
.v2-quote__error,.v2-quote__send-error,.v2-quote__catalog-error{margin:0;color:var(--v2-orange);font:400 14px/20px 'JetBrains Mono',monospace;letter-spacing:.05em}
.v2-quote__error[hidden],.v2-quote__hint[hidden],.v2-quote__send-error[hidden],.v2-quote__catalog-error[hidden],.v2-quote__summary[hidden]{display:none}
.v2-quote__summary{padding:16px;border:1px solid var(--v2-orange);color:#fff;font:400 14px/20px 'JetBrains Mono',monospace;letter-spacing:.05em}
.v2-quote__summary p{margin:0 0 8px}
.v2-quote__summary ul{margin:0;padding-left:20px}
.v2-quote__summary a{color:#fff}
.v2-quote__consent{display:flex;align-items:flex-start;gap:16px;scroll-margin-block:24px}
.v2-quote__consent input,.v2-quote__system input{flex:0 0 28px;box-sizing:border-box;width:28px;min-width:28px;height:28px;min-height:0;padding:0;margin:0;border:1px solid #fff;border-radius:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer}
.v2-quote__consent input:checked,.v2-quote__system input:checked{background:var(--v2-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12'%3E%3Cpath d='M1.5 6.2l4.2 4.2 8.8-9' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center/16px 12px no-repeat;border-color:var(--v2-orange)}
.v2-quote__consent label{display:block;margin:0;color:#fff;font:300 16px/24px Manrope,Arial,sans-serif;letter-spacing:0}
.v2-quote__consent a,.v2-quote__note a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.v2-quote__submit-row{display:flex;flex-direction:column;align-items:stretch;gap:16px}
.v2-quote__submit{display:inline-flex;align-items:center;justify-content:center;gap:5px;box-sizing:border-box;min-height:56px;height:56px;padding:15px 24px;border:1px solid var(--v2-orange);border-radius:0;background:var(--v2-orange);color:#000;font:500 16px/24px Saira,Arial,sans-serif;letter-spacing:0;text-transform:uppercase;white-space:nowrap;cursor:pointer}
.v2-quote__submit img{display:block;width:16px;height:16px}
.v2-quote__submit:hover:not(:disabled){filter:brightness(1.08)}
.v2-quote__submit:disabled{cursor:progress;opacity:.75}
.v2-quote :is(select,input,button,a,.v2-quote__summary a):focus-visible{outline:2px solid var(--v2-lime);outline-offset:2px}
@media(min-width:1100px){
 .v2-quote__rows{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"make model" "year generation" "engine engine"}
 .v2-quote__rows>[data-field="make"]{grid-area:make}
 .v2-quote__rows>[data-field="model"]{grid-area:model}
 .v2-quote__rows>[data-field="year"]{grid-area:year}
 .v2-quote__rows>[data-field="generation"]{grid-area:generation}
 .v2-quote__rows>[data-field="engine"]{grid-area:engine}
 .v2-quote__submit-row{align-items:flex-start}
 .v2-quote .v2-quote__form{gap:32px}
 .v2-quote__consent,.v2-quote__submit-row{margin-top:16px}
}

/* Card 0025 — row „Dane auta z kalkulatora” with „Zmień” (copy-form-states.md §5), field style of the form. */
.v2-quote__prefill{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;border:1px solid rgba(255,255,255,.1);background:#1c1c1c}
.v2-quote__prefill[hidden]{display:none}
.v2-quote__prefill-text{min-width:0;margin:0;color:#fff;font:400 16px/24px Manrope,Arial,sans-serif;letter-spacing:0;overflow-wrap:anywhere}
.v2-quote__prefill-change{flex:none;margin:0;padding:0;border:0;background:none;color:var(--v2-orange);font:500 14px/20px Saira,Arial,sans-serif;letter-spacing:0;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* Card 0026 — „Co chciałbyś wyłączyć” (Figma 540:5285 desktop: three cards 197×102 in a row, gap 16, checkbox above the label;
   540:5399 mobile: cards 361×62 in a column, gap 16, label next to the checkbox). Card: padding 16, border 1 px #fff 15%,
   checked #fff; label Saira SemiBold 20/28. Section spacing follows the other form sections. */
.v2-quote__systems[hidden]{display:none}
.v2-quote__systems-options{display:flex;flex-direction:column;gap:16px}
.v2-quote__system{display:flex;align-items:center;gap:12px;box-sizing:border-box;margin:0;padding:16px;border:1px solid rgba(255,255,255,.15);background:transparent;color:#fff;font:600 20px/28px Saira,Arial,sans-serif;letter-spacing:0;text-transform:uppercase;cursor:pointer}
.v2-quote__system:has(input:checked){border-color:var(--v2-orange)}
/* The legacy global `label > span` colour from styles.css does not apply (Figma: #fff). */
.v2-quote .v2-quote__system>span{color:#fff;font:inherit;letter-spacing:inherit;text-transform:inherit}
.v2-quote__system:has(input:focus-visible){outline:2px solid var(--v2-lime);outline-offset:2px}
.v2-quote .v2-quote__system input:focus-visible{outline:none}
.v2-quote__systems .v2-quote__error{margin-top:-8px}
.v2-quote__note--info{margin-top:24px}
@media(min-width:1100px){
 .v2-quote__systems-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
 .v2-quote__system{flex-direction:column;align-items:flex-start}
 .v2-quote__note--info{margin-top:16px}
}

/* Card 0027 (K6): opinions in the left column (Figma 566:8290 / 566:8296 at ≥1100, 540:4291 below 1100).
   Desktop: logo block 132 + this block 512 (Hero Content 460 + 32 + source 20) + 56 = 700. Cards 342×242, gap 24; the
   window runs to the column edge, so the next card is cut by the column like in Figma. Below 1100: block under the form,
   centred heading, 342×238 cards with the active one centred (neighbours visible at both edges), pager centred.
   Pager = HomeV2Pagination with the styles of the home opinions pager (home-v2*.css is not loaded on this page). */
/* The page is the size container: 100cqw = page width = width of the one-column opinions block (bleed to its edges). */
.v2-quote{container-type:inline-size}
.v2-quote__opinions-region{position:relative}
.v2-quote .v2-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}
.v2-quote-opinions{display:flex;flex-direction:column;gap:32px}
.v2-quote-opinions__glow-clip{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.v2-quote-opinions__glow{position:absolute;left:-112px;bottom:-379px;width:397px;height:468px;border-radius:50%;background:linear-gradient(180deg,#ff4c0c,#992d07);filter:blur(147px)}
.v2-quote-opinions__main{position:relative;display:flex;flex-direction:column;gap:32px;min-width:0}
.v2-quote-opinions__head{display:flex;flex-direction:column;align-items:center;gap:24px}
.v2-quote-opinions__mark{display:flex;align-items:center;gap:7px;height:19px}
.v2-quote-opinions__mark i{display:block;width:13px;height:13px;background:var(--v2-orange)}
.v2-quote-opinions__mark i+i{width:19px;height:19px}
.v2-quote .v2-quote-opinions__title{align-self:stretch;margin:0;color:#fff;font:600 32px/40px Saira,Arial,sans-serif;letter-spacing:0;text-align:center;text-transform:uppercase}
.v2-quote-opinions__window{position:relative;overflow:hidden;margin-inline:calc((100% - 100cqw) / 2)}
/* 0027 r2 (F1): below 1100 the card is min(342, page − 51): 342 from 393 px up (Figma 540:4291, 10 px of the neighbours),
   narrower below 393 so the active card always fits whole (320 px → 269) and the 10 px peek stays. The previous card
   sits before the active one: margin = half the window − 1.5 card − gap. */
.v2-quote-opinions__track{--qo-card:min(342px,calc(100cqw - 51px));display:flex;align-items:flex-start;gap:16px;width:max-content;margin:0 0 0 calc(50% - var(--qo-card) * 1.5 - 16px);padding:0}
.v2-quote-opinion{box-sizing:border-box;flex:none;display:flex;flex-direction:column;gap:16px;width:var(--qo-card,342px);height:238px;margin:0;padding:24px;border:1px solid rgba(255,255,255,.15);background:transparent;color:#fff}
.v2-quote-opinion__reviewer{display:flex;align-items:flex-start;gap:12px;min-width:0;height:40px}
.v2-quote-opinion__avatar{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border-radius:40px;background:rgba(255,76,12,.25);color:#fff;font:600 16px/24px Saira,Arial,sans-serif;letter-spacing:0;text-transform:uppercase}
.v2-quote-opinion__who{display:flex;flex:1 1 auto;flex-direction:column;min-width:0}
.v2-quote .v2-quote-opinion__name{margin:0;overflow:hidden;color:#fff;font:600 14px/20px Saira,Arial,sans-serif;letter-spacing:0;white-space:nowrap;text-overflow:ellipsis}
.v2-quote-opinion__date{margin:0;color:rgba(255,255,255,.7);font:300 14px/20px Manrope,Arial,sans-serif;letter-spacing:0;text-transform:capitalize}
.v2-quote-opinion__rating{display:flex;gap:4px;height:20px;margin:0}
.v2-quote-opinion__star{display:block;flex:none;width:20px;height:20px}
.v2-quote-opinion__star.is-empty{opacity:.25}
.v2-quote-opinion__body{flex:none;height:96px}
.v2-quote-opinion__text{display:-webkit-box;height:96px;margin:0;overflow:hidden;color:#fff;font:300 16px/24px Manrope,Arial,sans-serif;letter-spacing:0;overflow-wrap:break-word;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4}
.v2-quote-opinion.is-clamped .v2-quote-opinion__text{height:72px;-webkit-line-clamp:3;line-clamp:3}
.v2-quote-opinion__more{display:block;width:max-content;color:var(--v2-orange);font:500 14px/24px Saira,Arial,sans-serif;letter-spacing:0;text-decoration:none;text-transform:uppercase}
.v2-quote-opinion__more[hidden]{display:none}
.v2-quote-opinion__more:hover{text-decoration:underline}
.v2-quote-opinions__source{position:relative;margin:0;color:rgba(255,255,255,.6);font:300 12px/20px Manrope,Arial,sans-serif;letter-spacing:0}
.v2-quote-opinions__source a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.v2-quote-opinions__source a:hover{color:#fff}
.v2-quote .v2-quote-opinions__pager{box-sizing:border-box;display:grid;grid-template-columns:44px 72px 44px;align-items:center;gap:20px;align-self:center;width:200px;height:44px;margin:0;padding:0}
.v2-quote .v2-quote-opinions__pager>button{box-sizing:border-box;display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:0;background:#fff;cursor:pointer}
.v2-quote .v2-quote-opinions__pager>button:disabled{opacity:.35;cursor:default}
.v2-quote .v2-quote-opinions__pager>button img{display:block;width:17px;height:15px;filter:brightness(0)}
.v2-quote .v2-quote-opinions__pager>button:first-child img{transform:rotate(180deg)}
.v2-quote .v2-quote-opinions__pager>span{display:flex;align-items:center;justify-content:flex-start;width:72px;min-width:0;margin:0;padding:0}
.v2-quote .v2-quote-opinions__pager .v2-car-dots{display:flex;align-items:center;justify-content:flex-start;gap:8px;width:72px;height:8px;margin:0;padding:0}
.v2-quote .v2-quote-opinions__pager .v2-car-dots button{display:flex;flex:0 0 8px;align-items:center;justify-content:flex-start;box-sizing:border-box;width:8px;height:8px;margin:0;padding:0;border:0;background:transparent;cursor:pointer;transition:flex-basis 520ms cubic-bezier(.22,.61,.36,1),width 520ms cubic-bezier(.22,.61,.36,1)}
.v2-quote .v2-quote-opinions__pager .v2-car-dots button.is-active{flex-basis:24px;width:24px}
.v2-quote .v2-quote-opinions__pager .v2-car-dots i{display:block;flex:0 0 8px;width:8px;height:8px;margin:0;background:rgba(255,255,255,.7);transition:flex-basis 520ms cubic-bezier(.22,.61,.36,1),width 520ms cubic-bezier(.22,.61,.36,1),background-color 520ms cubic-bezier(.22,.61,.36,1)}
.v2-quote .v2-quote-opinions__pager .v2-car-dots i.is-active{flex-basis:24px;width:24px;background:#fff}
.v2-quote :is(.v2-quote-opinions__pager button,.v2-quote-opinion__more,.v2-quote-opinions__source a):focus-visible{outline:2px solid var(--v2-lime);outline-offset:3px}
@media(min-width:1100px){
 .v2-quote-opinions{flex:1 0 auto}
 .v2-quote-opinions__main{margin-block:auto}
 .v2-quote-opinions__glow{bottom:-320px}
 .v2-quote-opinions__head{align-items:flex-start;gap:14px}
 .v2-quote-opinions__mark{gap:8px;height:16px}
 .v2-quote-opinions__mark i{width:8px;height:8px}
 .v2-quote-opinions__mark i+i{width:16px;height:16px}
 /* 1100–1279: the heading would wrap to 3 lines (line 1 = 504 px at 32 px) and push the column over 700 px; the font
    scales with the column (line height stays 40, block 110 like Figma), from 1280 it is 32 px like Figma. */
 .v2-quote .v2-quote-opinions__title{font-size:min(32px,calc((50cqw - 96px) / 16));text-align:left}
 .v2-quote-opinions__window{margin-inline:0 -48px}
 .v2-quote-opinions__track{--qo-card:342px;gap:24px;margin-left:-366px}
 .v2-quote-opinion{height:242px}
 .v2-quote-opinion__reviewer{height:44px}
 .v2-quote .v2-quote-opinion__name{font-size:16px;line-height:24px}
 .v2-quote .v2-quote-opinions__pager{align-self:flex-start}
}
@media(prefers-reduced-motion:reduce){
 .v2-quote .v2-quote-opinions__pager .v2-car-dots :is(button,i){transition:none}
}

/* Card 0028: manual mode (text inputs like the e-mail input: 56 px, #1c1c1c, #fff 10%) and the success screen. */
.v2-quote__combo[hidden],.v2-quote .v2-quote__manual-input[hidden]{display:none}
.v2-quote__form.is-manual .v2-quote__hint{display:none}
.v2-quote__success{display:flex;flex-direction:column;gap:16px}
.v2-quote__success[hidden]{display:none}
.v2-quote__success [data-quote-success-title]:focus{outline:none}
.v2-quote__success-text{margin:0;color:rgba(255,255,255,.7);font:300 16px/24px Manrope,Arial,sans-serif;letter-spacing:0}
.v2-quote__success-text a{color:#fff;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.v2-quote__success-text a:hover{color:var(--v2-orange)}

/* 0029 A3: browsers without container query units (100cqw / 50cqw above) use the viewport width instead. On this page
   the size container (.v2-quote) is the full page width, so the result is the same apart from a classic scrollbar. */
@supports not (width:1cqw){
 .v2-quote-opinions__window{margin-inline:calc((100% - 100vw) / 2)}
 .v2-quote-opinions__track{--qo-card:min(342px,calc(100vw - 51px))}
 /* 0029 F7: 100vw includes a classic scrollbar, so the bleeding window can stick out by half of it on each side; the
    opinions block clips it (hidden first for browsers without overflow:clip). */
 .v2-quote__opinions-region{overflow-x:hidden;overflow-x:clip}
 @media(min-width:1100px){
  .v2-quote-opinions__window{margin-inline:0 -48px}
  .v2-quote-opinions__track{--qo-card:342px}
  .v2-quote .v2-quote-opinions__title{font-size:min(32px,calc((50vw - 96px) / 16))}
 }
}

/* 0031d: one short-window block (<784 px high, two columns): heading 28/36, heading to cards 24 px (-8 from 32 via the
   cards' top margin), cards to pager unchanged 32 px, logo to opinions block >= 40 px, opinions column padding-bottom 16 px. */
@media(min-width:1100px) and (max-height:783px){
 .v2-quote .v2-quote-opinions__title{font:600 28px/36px Saira,Arial,sans-serif}
 .v2-quote__brand{padding:56px 48px 40px}
 .v2-quote-opinions__head+.v2-quote-opinions__window{margin-top:-8px}
 .v2-quote__opinions-region{padding-bottom:16px}
}

/* Card 0050-F1 (BOOKING_FLOW, marker data-booking-flow="1"; nothing here applies without the flag).
   Figma K1 (figma-text-map.md): labels of „Twoje dane” are T5 (JetBrains Mono Regular 400 14/20, 5 %, #fff 60 %); on mobile
   also MARKA, MODEL, GENERACJA, SILNIK use T5 (desktop vehicle labels and ROK PRODUKCJI stay T2, Light 300).
   Placeholders T16 (Manrope 400 16/24 #fff 60 %) already come from .v2-quote__input (card 0033). Manrope Light 300 comes from fonts-booking.css (review F0). */
.v2-quote[data-booking-flow] :is([data-field=name],[data-field=email],[data-field=phone])>label{font-weight:400}
@media(max-width:1099px){
 .v2-quote[data-booking-flow] :is([data-field=make],[data-field=model],[data-field=generation],[data-field=engine])>label{font-weight:400}
}

/* Card 0051-F2 (BOOKING_FLOW): loader over step 1 (Figma 637:13297 1440×784, 637:13334 393×852; figma-layout.md).
   ≥1100: logo at 48,56; block 600 wide centred in the area below the 56 px top padding (icon 40×40 B5, gap 16, title T34
   48/56 UPPER, gap 8, text T12 16/24 #fff 70 %, centred). <1100: header 92 (logo at 16,24), block at 40 below it, 361 wide
   (padding 16), title T33 40/48. Icon: B5 circle with a pulse; static with prefers-reduced-motion. */
.v2-quote-loader{position:fixed;inset:0;z-index:60;display:block;overflow:auto;background:#000;color:#fff}
.v2-quote-loader[hidden]{display:none}
.v2-quote-loader:focus{outline:none}
.v2-quote-loader__logo{position:absolute;left:16px;top:24px;display:block;width:138px;height:44px}
.v2-quote-loader__block{display:flex;flex-direction:column;align-items:center;gap:16px;box-sizing:border-box;width:100%;margin:0 auto;padding:132px 16px 40px;text-align:center}
/* Card 0069-F8: Figma ELLIPSE 637:13371 / 637:13372 = ring ⌀40, hole ⌀28 (innerRadius 0.7 → 6 px), arc 0 → 315° clockwise from
   3 o'clock (gap 315°–360°, i.e. between 1:30 and 3 o'clock), #ff4c0c, no stroke. CSS: conic-gradient from 90deg (= 3 o'clock) +
   radial mask for the hole; continuous rotation 1 s/turn; reduced motion = static ring (rule below). Only the flag-1 loader uses it. */
.v2-quote-loader__icon{display:block;flex:none;width:40px;height:40px;border-radius:50%;background:conic-gradient(from 90deg,var(--bb-b5-fill,#ff4c0c) 0deg 315deg,transparent 315deg 360deg);-webkit-mask:radial-gradient(farthest-side,transparent calc(70% - .5px),#000 70%);mask:radial-gradient(farthest-side,transparent calc(70% - .5px),#000 70%);animation:v2-quote-loader-spin 1s linear infinite}
.v2-quote-loader__texts{display:flex;flex-direction:column;gap:8px;width:100%;max-width:600px}
.v2-quote-loader__title{margin:0;font:var(--bb-t33-font,600 40px/48px Saira,Arial,sans-serif);letter-spacing:0;color:var(--bb-t33-color,#fff);text-transform:uppercase}
.v2-quote-loader__text{margin:0;font:var(--bb-t12-font,300 16px/24px Manrope,Arial,sans-serif);letter-spacing:0;color:var(--bb-t12-color,rgba(255,255,255,.7))}
.v2-quote-loader__text[hidden]{display:none}
@keyframes v2-quote-loader-spin{to{transform:rotate(360deg)}}
@media(min-width:1100px){
 .v2-quote-loader{display:flex;flex-direction:column;padding:56px 48px 0}
 .v2-quote-loader__logo{left:48px;top:56px}
 .v2-quote-loader__block{flex:1 0 auto;justify-content:center;width:600px;max-width:100%;padding:0}
 .v2-quote-loader__title{font:var(--bb-t34-font,600 48px/56px Saira,Arial,sans-serif);color:var(--bb-t34-color,#fff)}
}
@media(prefers-reduced-motion:reduce){.v2-quote-loader__icon{animation:none}}
html.v2-quote-is-loading,html.v2-quote-is-loading body{overflow:hidden}
/* Card 0073-F10 (r2): Turnstile container (flag-1 markup only). Cloudflare's interaction-only wrapper is a 0 px high block, which as a
   flex item would add the 16 px row gap above the button — a negative margin cancels it while the widget is invisible; when Cloudflare
   needs an interaction the widget gets a height, turnstile-v2.js sets data-visible and the normal gap comes back. */
.v2-quote__turnstile{display:block;margin-bottom:-16px}
.v2-quote__turnstile[data-visible]{margin-bottom:0}
/* Card 0075-F11 (BOOKING_FLOW only: every rule below is scoped to [data-booking-flow]; flag 0 is untouched).
   Wide screens (>1440): the 576 + 864 grid gives way to full-width columns 40fr/60fr (backgrounds, glow and borders reach
   the window edges). Content scales uniformly with --f11-s: 1 at 1440 → 1.25 at 2560, constant above (step 40 px ≈ 0.9 %;
   CSS cannot turn a vw length into a zoom number, so the fluid factor is a fine step table). The scale is CSS zoom on the
   content blocks (never on a 100svh box: Chrome multiplies vh inside zoom). Left content sits in a centred container of
   864 px × s (≈ 1080 at 2560); the form keeps its 624 px × s container centred in the right column.
   Opinions >1440: the window shows WHOLE cards only (1 card, 2 from 2480 px where 2 × 342 + 24 fit the container); the
   ≤1440 Figma peek (K1 530:2403: x2 Service Card 342×242 in the 624 block, cut by the Hero content clip at the column
   edge) stays as it is (AC a).
   Low windows (≥1100, height <900): the left column zooms .9 / .84 / .78 at <900 / <820 / <740 px and the form spacing
   shrinks (grafit.agency/contact pattern; heights ≥900 unchanged). */
@media(min-width:1100px){
 .v2-quote[data-booking-flow]{height:100vh;height:100svh}
}
@media(min-width:1441px){
 .v2-quote[data-booking-flow]{--f11-s:1;grid-template-columns:minmax(0,40fr) minmax(0,60fr);justify-content:normal}
 .v2-quote[data-booking-flow] :is(.v2-quote__brand,.v2-quote__opinions-region){padding-inline:max(48px,calc(50% - 432px))}
 .v2-quote[data-booking-flow] .v2-quote__opinions-inner{max-width:none}
 .v2-quote[data-booking-flow] .v2-quote-opinions__window{width:342px;max-width:100%;margin-inline:0}
 .v2-quote[data-booking-flow] .v2-quote-loader{padding:calc(56px * var(--f11-s)) calc(48px * var(--f11-s)) 0}
 .v2-quote[data-booking-flow] :is(.v2-quote-loader__logo,.v2-quote-loader__block){zoom:var(--f11-s)}
}
@media(min-width:2480px){
 .v2-quote[data-booking-flow] .v2-quote-opinions__window{width:708px}
}
@media(min-width:1480px){.v2-quote[data-booking-flow]{--f11-s:1.009}} @media(min-width:1520px){.v2-quote[data-booking-flow]{--f11-s:1.018}} @media(min-width:1560px){.v2-quote[data-booking-flow]{--f11-s:1.027}} @media(min-width:1600px){.v2-quote[data-booking-flow]{--f11-s:1.036}} @media(min-width:1640px){.v2-quote[data-booking-flow]{--f11-s:1.045}} @media(min-width:1680px){.v2-quote[data-booking-flow]{--f11-s:1.054}} @media(min-width:1720px){.v2-quote[data-booking-flow]{--f11-s:1.062}} @media(min-width:1760px){.v2-quote[data-booking-flow]{--f11-s:1.071}} @media(min-width:1800px){.v2-quote[data-booking-flow]{--f11-s:1.08}} @media(min-width:1840px){.v2-quote[data-booking-flow]{--f11-s:1.089}} @media(min-width:1880px){.v2-quote[data-booking-flow]{--f11-s:1.098}} @media(min-width:1920px){.v2-quote[data-booking-flow]{--f11-s:1.107}} @media(min-width:1960px){.v2-quote[data-booking-flow]{--f11-s:1.116}} @media(min-width:2000px){.v2-quote[data-booking-flow]{--f11-s:1.125}} @media(min-width:2040px){.v2-quote[data-booking-flow]{--f11-s:1.134}} @media(min-width:2080px){.v2-quote[data-booking-flow]{--f11-s:1.143}} @media(min-width:2120px){.v2-quote[data-booking-flow]{--f11-s:1.152}} @media(min-width:2160px){.v2-quote[data-booking-flow]{--f11-s:1.161}} @media(min-width:2200px){.v2-quote[data-booking-flow]{--f11-s:1.17}} @media(min-width:2240px){.v2-quote[data-booking-flow]{--f11-s:1.179}} @media(min-width:2280px){.v2-quote[data-booking-flow]{--f11-s:1.188}} @media(min-width:2320px){.v2-quote[data-booking-flow]{--f11-s:1.196}} @media(min-width:2360px){.v2-quote[data-booking-flow]{--f11-s:1.205}} @media(min-width:2400px){.v2-quote[data-booking-flow]{--f11-s:1.214}} @media(min-width:2440px){.v2-quote[data-booking-flow]{--f11-s:1.223}} @media(min-width:2480px){.v2-quote[data-booking-flow]{--f11-s:1.232}} @media(min-width:2520px){.v2-quote[data-booking-flow]{--f11-s:1.241}} @media(min-width:2560px){.v2-quote[data-booking-flow]{--f11-s:1.25}}
@media(min-width:1100px) and (max-height:899px){.v2-quote[data-booking-flow]{--f11-h:.9;--f11-gap:28px;--f11-pad:48px}}
@media(min-width:1100px) and (max-height:819px){.v2-quote[data-booking-flow]{--f11-h:.84;--f11-gap:24px;--f11-pad:40px}}
@media(min-width:1100px) and (max-height:739px){.v2-quote[data-booking-flow]{--f11-h:.78;--f11-gap:20px;--f11-pad:32px}}
@media(min-width:1441px),(min-width:1100px) and (max-height:899px){
 .v2-quote[data-booking-flow] :is(.v2-quote__brand,.v2-quote__opinions-region){zoom:calc(var(--f11-s,1) * var(--f11-h,1))}
 .v2-quote[data-booking-flow] .v2-quote__form-region{zoom:var(--f11-s,1)}
}
@media(min-width:1100px) and (max-height:899px){
 .v2-quote[data-booking-flow] .v2-quote__form-region{padding-block:var(--f11-pad);scroll-padding:var(--f11-pad) 0}
 .v2-quote[data-booking-flow] .v2-quote__form{gap:var(--f11-gap)}
 .v2-quote[data-booking-flow] :is(.v2-quote__section,.v2-quote__rows){gap:calc(var(--f11-gap) / 2)}
 .v2-quote[data-booking-flow] :is(.v2-quote__consent,.v2-quote__submit-row){margin-top:calc(var(--f11-gap) / 2)}
}