/* Quote form in the site's v2 design (Mohamed, 7 Oct 2026: "give me design preview for the quote form, you must
   understand how sensitive the form is and nothing should affect the client's journey or functions").
   LOOK ONLY. This file is the whole restyle: the form's markup, scripts, words, prices and uploads are untouched.
   It loads after the form's own inline style block, only when config/skin.php 'quote' is on, and every rule sits under
   body.quote-v2, so with the switch off the page is exactly today's page.

   Rules this file keeps (each one is a recorded ruling or a script dependency, see the delivery record):
   - no display, width, overflow, opacity or visibility override with !important (the form shows and hides with inline
     styles); no transform, filter or contain on main, .qa or its wrappers (the phone price bar is position:fixed);
   - no stacking level is changed (.qa-sheetwrap stays 60 in the view, the header 50 on this page);
   - pills, the language chip and the speed tiles stay pill-round; ONE selected recipe; pointing never looks like
     choosing (hover is grey, and only for a mouse: a finger leaves no mark behind);
   - the not-ready button stays grey, the ready button keeps its approved orange, no glow;
   - every state the script expresses with a class is written here next to its base rule;
   - text sizes are in rem, so a visitor's larger text setting still enlarges them as it does today;
   - Arabic stays in Cairo with no letter spacing; nothing below 12px; tap targets keep their 44 and 48px. */

body.quote-v2{
  --qv-navy:#101d30;--qv-deep:#0b1626;--qv-ink:#122033;--qv-paper:#f6f5f1;--qv-muted:#4c5966;--qv-soft:#5a6672;
  --qv-orange:#c7420d;--qv-orange-h:#b83a0a;--qv-accent:#f86011;--qv-on-dark:#d3dbe4;--qv-on-dark-soft:#b9c5d1;
  --qv-warm:#ffa06b;--qv-line:#e2e1da;--qv-line-2:#d9d8d1;--qv-tint:#fbf3ec;--qv-chip:#fbfaf7;
  /* the edge that marks a control: 3.6 to 1 on white */
  --qv-edge:#8a877f;--qv-edge-hover:#5f5c54;
  --qv-card-shadow:0 1px 2px rgba(16,29,48,.04),0 24px 48px -32px rgba(16,29,48,.28);
}

/* ---------- Page: warm paper band, the form sits on it as a white card ---------- */
body.quote-v2 .qa{background:var(--qv-paper);color:var(--qv-ink)}

/* ---------- Heading band: navy, heading at the start. The form card sits BELOW the band on the paper, never over
   it (Mohamed, 7 Oct 2026: "i dont like the form going on top of the hero bit"). Heights are whole pixels at the
   default text size so the band's edge stays crisp. ---------- */
body.quote-v2 .qa .max-w-5xl>.mb-6.text-center{
  position:relative;margin:-3rem 0 1.75rem;padding:1.875rem 0 2rem;text-align:start;color:#fff;
  background:var(--qv-navy);box-shadow:0 0 0 100vmax var(--qv-navy);clip-path:inset(0 -100vmax);
}
body.quote-v2 .qa h1{
  margin:0 0 .625rem;font-family:Poppins,Inter,sans-serif;font-weight:500;
  font-size:3.125rem;line-height:3.5rem;letter-spacing:-.042em;color:#fff;text-wrap:balance;
}
body.quote-v2 .qa h1>span{color:var(--qv-accent)} /* the word for "instant" in the brand orange (Mohamed, 7 Oct 2026: "make the word instant in our orange"); 5.4 to 1 on the navy band */
body.quote-v2 .qa .max-w-5xl>.mb-6.text-center>p{margin:0;max-width:42.5rem;font-size:1.125rem;line-height:1.75rem;color:var(--qv-on-dark)}
body.quote-v2 .qa .max-w-5xl>.mb-6.text-center>div{justify-content:flex-start;flex-wrap:wrap;gap:.375rem 1.375rem;margin:.875rem 0 0;font-size:.875rem;line-height:1.25rem;color:var(--qv-on-dark)}
/* reassurance items: small drawn dots instead of the old outline icons and the typed bullet */
body.quote-v2 .qa .max-w-5xl>.mb-6.text-center>div>span:nth-child(2){display:none}
body.quote-v2 .qa .max-w-5xl>.mb-6.text-center>div>span>svg{display:none}
body.quote-v2 .qa .max-w-5xl>.mb-6.text-center>div>span::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--qv-on-dark-soft);margin-inline-end:5px}
@media (max-width:1279px){body.quote-v2 .qa h1{font-size:2.75rem;line-height:3.125rem}}
@media (max-width:899px){body.quote-v2 .qa h1{font-size:2.375rem;line-height:2.75rem}}
@media (max-width:639px){
  body.quote-v2 .qa .max-w-5xl>.mb-6.text-center{margin-bottom:1.25rem;padding:1.5rem 0 1.5rem}
  body.quote-v2 .qa h1{margin-bottom:.5rem;font-size:2rem;line-height:2.375rem;letter-spacing:-.035em}
  body.quote-v2 .qa .max-w-5xl>.mb-6.text-center>p{font-size:1rem;line-height:1.5rem}
  body.quote-v2 .qa .max-w-5xl>.mb-6.text-center>div{gap:.25rem 1.125rem;margin-top:.75rem;font-size:.8125rem}
}
@media (max-width:374px){
  body.quote-v2 .qa .max-w-5xl>.mb-6.text-center{padding-top:1.125rem}
  body.quote-v2 .qa h1{font-size:1.75rem;line-height:2.125rem}
}

/* ---------- Resume card ---------- */
body.quote-v2 .qa .max-w-5xl>.border-s-2{position:relative;border-radius:14px;--tw-ring-color:var(--qv-line);--tw-shadow:var(--qv-card-shadow)}
body.quote-v2 .qa .max-w-5xl>.border-s-2 p{color:var(--qv-muted)}
body.quote-v2 .qa .max-w-5xl>.border-s-2 p>span{color:var(--qv-ink);font-weight:600}
body.quote-v2 .qa .max-w-5xl>.border-s-2 a{border-radius:12px;font-weight:600;--tw-shadow:0 4px 10px -6px rgba(199,66,13,.35)}

/* ---------- The form card ---------- */
body.quote-v2 .qa form>.space-y-8{position:relative;border-radius:18px;border-top-color:transparent;--tw-ring-color:var(--qv-line);--tw-shadow:var(--qv-card-shadow)}
/* the short accent bar hangs from the card's top edge (the card keeps its 2px top border, now clear) */
body.quote-v2 .qa form>.space-y-8::before{content:"";position:absolute;top:-2px;inset-inline-start:32px;width:48px;height:3px;border-radius:0 0 2px 2px;background:var(--qv-accent)}
/* the price block paints after the card, so the card's shadow falls under it, not on it */
body.quote-v2 .qa form>.mb-6{position:relative}
@media (max-width:639px){
  body.quote-v2 .qa form>.space-y-8{border-radius:16px}
  body.quote-v2 .qa form>.space-y-8::before{inset-inline-start:24px;width:40px}
}

/* section labels: same height as today, so nothing under them moves (the "Translate into" label keeps its own
   attention colour while nothing is chosen) */
body.quote-v2 .qa form label.uppercase{font-size:.75rem;line-height:1rem;font-weight:600;letter-spacing:.12em}
body.quote-v2 .qa form label.uppercase.text-gray-900{color:var(--qv-muted)}
body.quote-v2 .qa form label.uppercase>span{letter-spacing:0;color:var(--qv-soft)}

/* ---------- Upload ---------- */
/* phone button */
body.quote-v2 .qa form .sm\:hidden>button.bg-gray-900{height:3.25rem;border-radius:12px;background-color:var(--qv-navy);font-size:1rem;font-weight:600;--tw-shadow:0 0 #0000}
body.quote-v2 .qa form .sm\:hidden>button.bg-gray-900:active{background-color:var(--qv-deep)}
/* laptop drop zone: idle, hover, dragging (the script swaps these class sets) */
body.quote-v2 .qa form [role="button"][tabindex="0"]{border-radius:14px}
body.quote-v2 .qa form [role="button"][tabindex="0"].border-gray-400{border-color:#9d9a8f;background-color:var(--qv-chip);background-image:none}
body.quote-v2 .qa form [role="button"][tabindex="0"].bg-orange-50{border-color:var(--qv-orange);background-color:var(--qv-tint)}
body.quote-v2 .qa form [role="button"][tabindex="0"]>div:first-child{width:auto;height:auto;margin-bottom:.625rem;background-color:transparent}
body.quote-v2 .qa form [role="button"][tabindex="0"]>div:first-child>svg{width:1.75rem;height:1.75rem;color:var(--qv-orange)}
body.quote-v2 .qa form [role="button"][tabindex="0"]>p.text-base{font-size:1.0625rem;line-height:1.45;font-weight:500;color:var(--qv-ink)}
body.quote-v2 .qa form [role="button"][tabindex="0"]>p.text-base>span{color:var(--qv-ink)}
body.quote-v2 .qa form [role="button"][tabindex="0"]>p.text-xs{margin-top:.5rem;font-size:.8125rem;line-height:1.5;color:var(--qv-soft)}
/* file rows */
body.quote-v2 .qa form .space-y-2>.bg-gray-50{border-radius:12px;background-color:var(--qv-paper);--tw-ring-color:var(--qv-line-2)}
body.quote-v2 .qa form .space-y-2>.bg-gray-50 .text-gray-800{color:var(--qv-ink)}
body.quote-v2 .qa form .space-y-2>.bg-gray-50 .text-gray-500{color:var(--qv-soft)}
body.quote-v2 .qa form .space-y-2>.bg-gray-50 .bg-gray-100{background-color:#ebe8e2;color:var(--qv-ink)}
body.quote-v2 .qa form .space-y-2>.bg-gray-50 .bg-orange-50{background-color:#fff;box-shadow:inset 0 0 0 1px rgba(199,66,13,.35);color:var(--qv-orange-h)}
body.quote-v2 .qa form .space-y-2>.bg-gray-50 .bg-gray-200{background-color:#e6e3dc}
/* quiet white buttons: "Add another document", "Try again" */
body.quote-v2 .qa form button.ring-gray-400{border-radius:12px;color:var(--qv-ink);--tw-ring-color:var(--qv-edge);--tw-shadow:0 0 #0000}
body.quote-v2 .qa form button.ring-gray-400>svg{color:var(--qv-orange)}
/* word count instead of a file */
body.quote-v2 .qa form .flex-col>button.underline{color:var(--qv-ink);text-decoration-color:rgba(199,66,13,.55);text-decoration-thickness:1px;text-underline-offset:4px}
body.quote-v2 .qa form .flex-col>button.underline:hover{color:var(--qv-orange)}
body.quote-v2 .qa form .max-w-\[240px\]>span{color:var(--qv-muted)}
body.quote-v2 .qa form .max-w-\[240px\]>p{color:var(--qv-muted)}
body.quote-v2 .qa form input[inputmode="numeric"]{border-radius:12px;background-color:#fff;color:var(--qv-ink);--tw-ring-color:var(--qv-edge);--tw-shadow:0 0 #0000}
body.quote-v2 .qa form input[inputmode="numeric"]:focus{--tw-ring-color:var(--qv-orange)}
body.quote-v2 .qa form input[inputmode="numeric"]+div{color:#6b7682}
body.quote-v2 .qa input::placeholder,body.quote-v2 .qa-sheet input::placeholder{color:#6b7682;opacity:1}

/* ---------- Notices in the amber family (reading, mixed documents, guidance, email message) ---------- */
body.quote-v2 .qa .bg-amber-50{border-radius:12px;border-color:#efd5a5;background-color:#fdf6ec}
body.quote-v2 .qa .bg-amber-50.border-amber-500{border-color:#dfb46a}
body.quote-v2 .qa .bg-amber-50,body.quote-v2 .qa .bg-amber-50 .text-amber-900{color:#6f420a}
body.quote-v2 .qa .bg-amber-50 svg{color:#c77a0d}

/* ---------- Choices: language chip, target pills, speed tiles ----------
   Shapes stay pill-round (his ruling). Not chosen: quiet paper with a firm warm-grey edge. Chosen: the one warm recipe.
   Pointing with a mouse: a darker grey edge on a grey fill, never orange. On a touch screen there is no hover look at
   all, so a pill that was tapped off returns to rest and never looks marked. */
body.quote-v2 .qa .tpills button,
body.quote-v2 .qa .langchip,
body.quote-v2 .qa .seg button{background:var(--qv-chip);box-shadow:inset 0 0 0 1.5px var(--qv-edge)}
body.quote-v2 .qa .tpills button{color:var(--qv-ink)}
body.quote-v2 .qa .langchip{color:var(--qv-soft)}
body.quote-v2 .qa .seg button .t{color:var(--qv-ink)}
body.quote-v2 .qa .seg button .d{color:var(--qv-soft)}
body.quote-v2 .qa .tpills button.on,
body.quote-v2 .qa .langchip.set,
body.quote-v2 .qa .seg button.on{background:var(--qv-tint);box-shadow:inset 0 0 0 2px var(--qv-orange);color:#9a3412}
body.quote-v2 .qa .seg button.on .t{color:#9a3412}
body.quote-v2 .qa .langchip>svg{color:var(--qv-soft)}
@media (hover:hover) and (pointer:fine){
  body.quote-v2 .qa form [role="button"][tabindex="0"].border-gray-400:hover{border-color:var(--qv-orange);background-color:#fff}
  body.quote-v2 .qa form button.ring-gray-400:hover{background-color:#fff;--tw-ring-color:var(--qv-ink)}
  body.quote-v2 .qa form button[type="submit"].bg-gradient-to-r:not(:disabled):hover{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}
  body.quote-v2 .qa .tpills button:not(.on):not(:disabled):hover,
  body.quote-v2 .qa .langchip:not(.set):not(:disabled):hover,
  body.quote-v2 .qa .seg button:not(.on):not(:disabled):hover{background:#f1efea;box-shadow:inset 0 0 0 1.5px var(--qv-edge-hover)}
  body.quote-v2 .qa .tpills button.on:not(:disabled):hover,
  body.quote-v2 .qa .langchip.set:not(:disabled):hover,
  body.quote-v2 .qa .seg button.on:not(:disabled):hover{background:#f6e7da;box-shadow:inset 0 0 0 2px var(--qv-orange)}
}

/* keyboard focus: the site's darker orange, which holds on white and on the paper page (chosen pills keep their own
   dark ring from the form's style block) */
body.quote-v2 .qa button:focus-visible,body.quote-v2 .qa a:focus-visible,body.quote-v2 .qa-sheet button:focus-visible{outline-color:var(--qv-orange)}

/* ---------- Price panel ---------- */
body.quote-v2 .qa .qa-pricereveal{border-radius:16px;border-top-color:var(--qv-line);border-right-color:var(--qv-line);border-bottom-color:var(--qv-line);--tw-shadow:0 1px 2px rgba(16,29,48,.04),0 20px 40px -30px rgba(16,29,48,.3)}
/* Arabic: the accent edge moves to the reading side (the view writes a physical left border inline) */
html[dir="rtl"] body.quote-v2 .qa .qa-pricereveal{border-left:1px solid var(--qv-line)!important;border-right:3px solid var(--qv-accent)}
body.quote-v2 .qa .qa-pricereveal p.text-4xl{font-family:Poppins,Inter,sans-serif;font-weight:600;letter-spacing:-.035em;color:var(--qv-ink);font-variant-numeric:tabular-nums}
body.quote-v2 .qa .qa-pricereveal p.text-2xl{color:var(--qv-soft)}
body.quote-v2 .qa .qa-pricereveal p.text-xs.text-gray-500{color:var(--qv-soft)}
body.quote-v2 .qa .qa-pricereveal p.text-xs.text-gray-500>span{color:var(--qv-ink)}
body.quote-v2 .qa .qa-pricereveal button[aria-controls="qa-breakdown"]{color:var(--qv-orange)}
body.quote-v2 .qa .qa-pricereveal button[aria-controls="qa-breakdown"]:hover{color:var(--qv-orange-h)}
body.quote-v2 .qa #qa-breakdown .border-gray-100{border-color:var(--qv-line)}
body.quote-v2 .qa #qa-breakdown .text-gray-600{color:var(--qv-muted)}
body.quote-v2 .qa #qa-breakdown .text-gray-900{color:var(--qv-ink);border-color:var(--qv-line-2)}
body.quote-v2 .qa #qa-breakdown .text-gray-500{color:var(--qv-soft)}
body.quote-v2 .qa .qa-pricereveal>div:last-child{border-color:var(--qv-line)}
body.quote-v2 .qa .qa-pricereveal>div:last-child>p{font-size:.75rem;color:var(--qv-soft)}

/* ---------- The main button: four skins set by the script ---------- */
body.quote-v2 .qa form button[type="submit"]{border-radius:12px;font-weight:600;letter-spacing:-.01em}
/* not ready, and reading a document: quiet grey with a firm edge, never a dimmed orange */
body.quote-v2 .qa form button[type="submit"].bg-gray-100{background-color:#eceae4;color:var(--qv-muted);--tw-ring-color:#c2bfb5}
/* ready, and sending: his approved orange with a soft shadow at rest, no glow; a mouse gets today's plain grey lift
   (written out in the mouse-only block below, because the rule here out-ranks the page's own hover utility) */
body.quote-v2 .qa form button[type="submit"].bg-gradient-to-r{--tw-shadow:0 4px 10px -6px rgba(199,66,13,.35)}
body.quote-v2 .qa form button[type="submit"]+p{color:var(--qv-soft)}

/* ---------- Under the form: trust line, email-me row ---------- */
body.quote-v2 .qa .max-w-5xl>.mt-4.flex{color:var(--qv-muted)}
body.quote-v2 .qa .max-w-5xl>.mt-4.flex svg{color:#9aa1a9}
body.quote-v2 .qa #email-quote-label{color:var(--qv-muted)}
body.quote-v2 .qa #email-quote-input{min-height:3rem;border-width:1.5px;border-radius:12px;background-color:#fff;font-size:1rem;color:var(--qv-ink);transition:border-color .18s,box-shadow .18s}
body.quote-v2 .qa #email-quote-input.border-gray-300{border-color:var(--qv-edge)}
body.quote-v2 .qa #email-quote-input.border-red-500{border-color:#b42318}
body.quote-v2 .qa #email-quote-input:focus{border-color:var(--qv-orange);box-shadow:0 0 0 4px rgba(199,66,13,.16)}
body.quote-v2 .qa .emailrow-stack>button{min-height:3rem;border-radius:12px;border-color:var(--qv-navy);background-color:var(--qv-navy);font-weight:600;color:#fff}
body.quote-v2 .qa .emailrow-stack>button:hover{border-color:#1b2d47;background-color:#1b2d47}
/* the 16px field text needs the room: stack the row a little earlier than today */
@media (max-width:430px){
  body.quote-v2 .qa .emailrow-stack{flex-direction:column}
  body.quote-v2 .qa .emailrow-stack>button{width:100%}
}

/* ---------- "Prefer to talk to someone?": a navy strip ---------- */
body.quote-v2 .qa .max-w-5xl>.mt-10.bg-gray-50{padding:1.75rem 2rem;border-radius:16px;background-color:var(--qv-navy);color:#fff}
body.quote-v2 .qa .max-w-5xl>.mt-10.bg-gray-50>div:first-child{display:none}
body.quote-v2 .qa .max-w-5xl>.mt-10.bg-gray-50 h3{font-family:Poppins,Inter,sans-serif;font-weight:600;font-size:1.375rem;line-height:1.3;letter-spacing:-.02em;color:#fff}
body.quote-v2 .qa .max-w-5xl>.mt-10.bg-gray-50 p{margin-top:.25rem;font-size:1rem;line-height:1.55;color:var(--qv-on-dark)}
body.quote-v2 .qa .max-w-5xl>.mt-10.bg-gray-50 a{font-size:1rem;color:#fff}
body.quote-v2 .qa .max-w-5xl>.mt-10.bg-gray-50 a:hover{color:var(--qv-warm)}
body.quote-v2 .qa .max-w-5xl>.mt-10.bg-gray-50 a>svg{color:var(--qv-on-dark)}
body.quote-v2 .qa .max-w-5xl>.mt-10.bg-gray-50 a:focus-visible{outline-color:#ff914e}
/* narrow tablets: text above, links below, as on phones (side by side it squeezes the text into a thin column) */
@media (min-width:640px) and (max-width:767px){
  body.quote-v2 .qa .max-w-5xl>.mt-10.bg-gray-50{flex-direction:column;align-items:flex-start}
}
@media (max-width:639px){body.quote-v2 .qa .max-w-5xl>.mt-10.bg-gray-50{padding:1.5rem 1.25rem}}

/* ---------- Three reassurance cards: the short rule instead of the old icon tiles ---------- */
body.quote-v2 .qa .max-w-5xl>.grid>.bg-white.ring-1{padding:1.625rem 1.5rem 1.5rem;border-radius:16px;--tw-ring-color:var(--qv-line)}
body.quote-v2 .qa .max-w-5xl>.grid>.bg-white.ring-1>div:first-child{display:none}
body.quote-v2 .qa .max-w-5xl>.grid>.bg-white.ring-1>h3{font-family:Poppins,Inter,sans-serif;font-weight:600;font-size:1.1875rem;line-height:1.3;letter-spacing:-.02em;color:var(--qv-ink)}
body.quote-v2 .qa .max-w-5xl>.grid>.bg-white.ring-1>h3::before{content:"";display:block;width:28px;height:3px;border-radius:2px;background:var(--qv-accent);margin-bottom:1rem}
body.quote-v2 .qa .max-w-5xl>.grid>.bg-white.ring-1>p{margin-top:.5rem;font-size:.9375rem;line-height:1.6;color:var(--qv-muted)}

/* ---------- Phone price bar ---------- */
body.quote-v2 .qa .fixed.bottom-0{border-color:var(--qv-line);--tw-shadow:0 -10px 24px -14px rgba(16,29,48,.3)}
body.quote-v2 .qa .fixed.bottom-0 p.text-xl{font-family:Poppins,Inter,sans-serif;font-weight:600;letter-spacing:-.03em;color:var(--qv-ink);font-variant-numeric:tabular-nums}
body.quote-v2 .qa .fixed.bottom-0 p.truncate{font-size:.75rem;color:var(--qv-soft)}
body.quote-v2 .qa .fixed.bottom-0 p.truncate>span{color:var(--qv-ink)}
/* a long label (French, Welsh, German with a typed word count) wraps to two lines instead of squeezing the price away */
body.quote-v2 .qa .fixed.bottom-0 button{height:auto;min-height:2.75rem;max-width:62%;padding-block:.375rem;border-radius:12px;font-weight:600;line-height:1.2;white-space:normal;text-wrap:balance;--tw-shadow:0 4px 10px -6px rgba(199,66,13,.35)}
@media (max-width:374px){body.quote-v2 .qa .fixed.bottom-0 button{max-width:66%;padding-inline:.75rem}}

/* ---------- Language sheets (they live on body, outside .qa) ---------- */
body.quote-v2 .qa-sheetback{background:rgba(11,22,38,.55)}
body.quote-v2 .qa-sheet{border-color:var(--qv-line);border-radius:18px;box-shadow:0 24px 50px -18px rgba(16,29,48,.38)}
body.quote-v2 .qa-sheet>div:first-child{border-color:var(--qv-line)}
body.quote-v2 .qa-sheet>div:first-child p{font-family:Poppins,Inter,sans-serif;font-weight:600;font-size:1.125rem;line-height:1.3;letter-spacing:-.02em;color:var(--qv-ink)}
body.quote-v2 .qa-sheet input[type="text"]{min-height:3rem;padding-inline:.875rem;border-radius:12px;font-size:1rem;color:var(--qv-ink);--tw-ring-color:var(--qv-edge)}
body.quote-v2 .qa-sheet input[type="text"]:focus{--tw-ring-color:var(--qv-orange)}
body.quote-v2 .qa-sheet .qa-slist button{border-radius:10px;font-size:.9375rem}
body.quote-v2 .qa-sheet .qa-slist button.text-gray-700{color:var(--qv-ink)}
body.quote-v2 .qa-sheet .qa-slist button.bg-orange-50{background-color:var(--qv-tint)}
body.quote-v2 .qa-sheet .qa-slist button.text-gray-700:hover{background-color:transparent}
@media (hover:hover) and (pointer:fine){
  body.quote-v2 .qa-sheet .qa-slist button.text-gray-700:hover{background-color:var(--qv-paper)}
  body.quote-v2 .qa-sheet .qa-slist button.bg-orange-50:hover{background-color:var(--qv-tint)}
}
/* the typed tick becomes the site's drawn tick (the script still shows and hides the same element) */
body.quote-v2 .qa-sheet .qa-slist button>span:last-child{
  display:inline-block;flex:none;width:18px;height:18px;font-size:0;line-height:0;background-color:var(--qv-orange);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* high-contrast mode paints its own colours: give the typed tick back there */
@media (forced-colors:active){
  body.quote-v2 .qa-sheet .qa-slist button>span:last-child{width:auto;height:auto;font-size:inherit;line-height:inherit;background-color:transparent;-webkit-mask:none;mask:none}
}
body.quote-v2 .qa-sheet p.text-gray-500{color:var(--qv-soft)}

/* ---------- The two notices the script can open (too many files, file too large) ---------- */
body.quote-v2>div.fixed.inset-0.bg-black{background-color:rgba(11,22,38,.55)}
body.quote-v2>div.fixed.inset-0.bg-black>div{border-radius:18px}
body.quote-v2>div.fixed.inset-0.bg-black>div>div:first-child{width:auto;height:auto;background-color:transparent}
body.quote-v2>div.fixed.inset-0.bg-black>div>div:first-child>svg{width:1.875rem;height:1.875rem}
body.quote-v2>div.fixed.inset-0.bg-black>div>h3{font-family:Poppins,Inter,sans-serif;font-weight:600;font-size:1.25rem;line-height:1.3;letter-spacing:-.02em;color:var(--qv-ink)}
body.quote-v2>div.fixed.inset-0.bg-black>div>p{color:var(--qv-muted)}
body.quote-v2>div.fixed.inset-0.bg-black>div>.bg-orange-50{border-radius:12px;border-color:#ecd9c8;background-color:var(--qv-tint)}
body.quote-v2>div.fixed.inset-0.bg-black>div>.bg-orange-50 p{color:#7a2e0e}
body.quote-v2>div.fixed.inset-0.bg-black>div>button{min-height:3rem;border-radius:12px;background-color:var(--qv-orange);font-weight:600}
body.quote-v2>div.fixed.inset-0.bg-black>div>button:hover{background-color:var(--qv-orange-h)}

/* ---------- Arabic: Cairo everywhere this file names a face, no letter spacing ---------- */
html[dir="rtl"] body.quote-v2 .qa,
html[dir="rtl"] body.quote-v2 .qa-sheetwrap,
html[dir="rtl"] body.quote-v2>div.fixed.inset-0.bg-black{letter-spacing:0}
html[dir="rtl"] body.quote-v2 .qa :is(button,input,label,a,p,span,h3),
html[dir="rtl"] body.quote-v2 .qa-sheetwrap :is(button,input){letter-spacing:0}
html[dir="rtl"] body.quote-v2 .qa .max-w-5xl>.mt-10.bg-gray-50 h3,
html[dir="rtl"] body.quote-v2 .qa .max-w-5xl>.grid>.bg-white.ring-1>h3,
html[dir="rtl"] body.quote-v2 .qa-sheet>div:first-child p,
html[dir="rtl"] body.quote-v2>div.fixed.inset-0.bg-black>div>h3{font-family:Cairo,Inter,Tahoma,sans-serif;font-weight:700;letter-spacing:0;line-height:1.45}
html[dir="rtl"] body.quote-v2 .qa h1{font-family:Cairo,Inter,Tahoma,sans-serif;font-weight:700;letter-spacing:0;font-size:2.875rem;line-height:4.125rem}
@media (max-width:1279px){html[dir="rtl"] body.quote-v2 .qa h1{font-size:2.5rem;line-height:3.625rem}}
@media (max-width:899px){html[dir="rtl"] body.quote-v2 .qa h1{font-size:2.125rem;line-height:3.125rem}}
@media (max-width:639px){html[dir="rtl"] body.quote-v2 .qa h1{font-size:1.75rem;line-height:2.625rem}}
@media (max-width:374px){html[dir="rtl"] body.quote-v2 .qa h1{font-size:1.625rem;line-height:2.375rem}}
html[dir="rtl"] body.quote-v2 .qa .qa-pricereveal p.text-4xl,
html[dir="rtl"] body.quote-v2 .qa .fixed.bottom-0 p.text-xl{font-family:Cairo,Inter,Tahoma,sans-serif;font-weight:700;letter-spacing:0}
html[dir="rtl"] body.quote-v2 .qa form label.uppercase{font-size:.875rem;font-weight:700;letter-spacing:0}
html[dir="rtl"] body.quote-v2 .qa form button[type="submit"]{letter-spacing:0;font-weight:700}
html[dir="rtl"] body.quote-v2 .qa .emailrow-stack>button,
html[dir="rtl"] body.quote-v2 .qa .fixed.bottom-0 button,
html[dir="rtl"] body.quote-v2>div.fixed.inset-0.bg-black>div>button{font-weight:700}

/* ---------- Languages without capitals or with long words ---------- */
html:is([lang="de"],[lang="zh"]) body.quote-v2 .qa form label.uppercase{letter-spacing:.06em}
html:is([lang="de"],[lang="cy"]) body.quote-v2 .qa h1{hyphens:auto;hyphenate-limit-chars:10 4 4;overflow-wrap:break-word}
/* the navy strip's heading wraps by whole words (the site's own rule would hyphenate it now that it is larger) */
html:is([lang="de"],[lang="cy"]) body.quote-v2 .qa .max-w-5xl>.mt-10.bg-gray-50 h3{hyphens:manual;text-wrap:balance}

@media (prefers-reduced-motion:reduce){body.quote-v2 .qa #email-quote-input{transition:none}}