/* United Legal: Quick Check (concept A). One question per screen, in the hero. Scoped under .ula-qa; every class is qa-*.
   Uses only the tokens in ula-core.css. No WebGL, no libraries. */
/* overflow-anchor: none: when the result widens the card and the headline column reflows, Chrome's scroll anchoring would
   otherwise "compensate" by throwing the page; the widget scrolls deliberately instead (reveal, Start over, Back). */
.ula-qa { position: relative; color: #fff; font-family: var(--f-text); overflow-anchor: none; }
.ula-qa * { -webkit-tap-highlight-color: transparent; }
.qa-wrap { container-type: inline-size; container-name: qa; }

/* ---------------------------------------------------------------- Hero shell */
.qa-hero { padding: clamp(32px, 4vw, 56px) clamp(16px, 4vw, 40px) clamp(44px, 6vw, 80px); scroll-margin-top: 96px; }
.is-embedded .qa-hero { padding-top: clamp(48px, 6vw, 88px); } /* the showcase's sticky concept nav sits over the first lines otherwise */
.qa-hero__in { position: relative; z-index: 1; max-width: 1360px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: clamp(28px, 4vw, 64px); align-items: start; transition: grid-template-columns .55s var(--ease-out); }
/* The left column sticks while the (much taller) result scrolls: the hero uses overflow: clip, so the viewport is the scrollport. */
/* --qa-top is measured by the widget (sticky header, plus the showcase's top-docked pill): the column always clears the chrome. */
.qa-left { min-width: 0; display: grid; gap: 18px; align-content: start; align-self: start; position: sticky; top: var(--qa-top, 104px); }
.qa-eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 600 clamp(16px, 1.5vw, 20px)/1 var(--f-head); letter-spacing: .06em; text-transform: uppercase; color: var(--lemon); animation: ula-rise .7s var(--ease-out) both; }
.qa-eyebrow::before { content: ""; width: 28px; height: 3px; border-radius: 3px; background: var(--lemon); }
.qa-h1 { font: 700 clamp(40px, 5vw, 76px)/1.02 var(--f-head); color: #fff; text-wrap: balance; letter-spacing: -.005em; animation: ula-rise .8s .08s var(--ease-out) both; }
.qa-h1 em { font-style: normal; color: var(--lemon); }
.qa-lede { font: 500 clamp(15px, 1.4vw, 18px)/1.6 var(--f-text); color: #C9D3E6; max-width: 560px; text-wrap: pretty; animation: ula-rise .8s .16s var(--ease-out) both; }
.qa-lede b { color: #fff; font-weight: 600; }
.qa-trust { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; animation: ula-rise .8s .22s var(--ease-out) both; }
.qa-trust li { display: inline-flex; align-items: center; gap: 8px; font: 600 15px/1 var(--f-text); color: #E4ECF7; }
.qa-trust .i { width: 21px; height: 21px; padding: 3px; border-radius: 50%; background: rgba(249, 233, 0, .16); stroke-width: 3; color: var(--lemon); }

/* Tow-truck art with beacons and pointer parallax */
.qa-art { position: relative; width: 100%; max-width: 580px; aspect-ratio: 3 / 2; margin: 0 0 -8%; justify-self: start; transform: translate3d(calc(var(--px, 0) * 14px), calc(var(--py, 0) * 8px), 0) rotate(calc(var(--px, 0) * -.6deg)); transition: transform .6s var(--ease-out), max-width .55s var(--ease-out); animation: qa-art-in 1.1s .25s var(--ease-out) both; will-change: transform; }
.qa-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(3, 10, 40, .55)); }
.qa-art__glow { position: absolute; left: 12%; right: 12%; bottom: 6%; height: 18%; border-radius: 50%; background: radial-gradient(closest-side, rgba(249, 233, 0, .28), transparent); filter: blur(6px); pointer-events: none; }
.qa-beacon { position: absolute; left: 16.3%; top: 22.7%; width: 7%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; mix-blend-mode: screen; background: radial-gradient(circle, rgba(255, 196, 64, .95) 0%, rgba(255, 140, 0, .55) 32%, rgba(255, 140, 0, 0) 70%); animation: qa-beacon 1.2s ease-in-out infinite; }
.qa-beacon + .qa-beacon { left: 30.3%; top: 23%; animation-delay: .6s; }
@keyframes qa-beacon { 0%, 100% { opacity: .1; transform: translate(-50%, -50%) scale(.75); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); } }
@keyframes qa-art-in { from { opacity: 0; transform: translate3d(-40px, 10px, 0); } }

/* Floating lemon light orbs behind everything (pure CSS, screen blend) */
.qa-orbs { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.qa-orb { position: absolute; border-radius: 50%; mix-blend-mode: screen; filter: blur(30px); opacity: .55; animation: qa-orb 18s ease-in-out infinite alternate; }
.qa-orb:nth-child(1) { width: min(320px, 60cqi); height: min(320px, 60cqi); left: 30cqi; top: 0; background: radial-gradient(circle, rgba(249, 233, 0, .22), transparent 65%); }
.qa-orb:nth-child(2) { width: min(240px, 46cqi); height: min(240px, 46cqi); left: 2cqi; bottom: 0; background: radial-gradient(circle, rgba(109, 181, 255, .3), transparent 65%); animation-duration: 23s; animation-delay: -6s; }
.qa-orb:nth-child(3) { width: min(180px, 36cqi); height: min(180px, 36cqi); right: 4cqi; bottom: 20%; background: radial-gradient(circle, rgba(249, 233, 0, .18), transparent 65%); animation-duration: 15s; animation-delay: -11s; }
@keyframes qa-orb { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(2cqi, -30px, 0) scale(1.08); } }
.qa-vignette { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(3, 10, 40, .55)); }

/* ---------------------------------------------------------------- The card */
/* Anchored to the top of its column (align-self: start): the card only ever grows downward, so the question heading never jumps. */
.qa-right { min-width: 0; display: grid; gap: 14px; align-content: start; justify-self: end; align-self: start; width: 100%; max-width: 560px; margin-top: 6px; transition: max-width .55s var(--ease-out); }
.qa-right--solo { justify-self: stretch; max-width: none; }
.qa-card { position: relative; container-type: inline-size; container-name: qa-card; padding: 20px clamp(18px, 5cqi, 28px) 18px; overflow: clip; transform: perspective(1200px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: transform .35s var(--ease-out), box-shadow .45s; animation: qa-card-in .9s .2s var(--spring-soft) both; will-change: transform; outline: none; }
.qa-card--card { animation: none; }
@keyframes qa-card-in { from { opacity: 0; transform: perspective(1200px) translate3d(0, 28px, 0) scale(.96); } }
.qa-sheen { position: absolute; inset: 0; pointer-events: none; z-index: 0; border-radius: inherit; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 40%), rgba(255, 255, 255, .13), transparent 46%); opacity: 0; transition: opacity .4s; }
@media (hover: hover) { .qa-card:hover .qa-sheen { opacity: 1; } }
.qa-head, .qa-trayslot, .qa-stage, .qa-foot, .qa-legal { position: relative; z-index: 1; }
.qa-foot.is-empty { display: none; }

/* Road progress: asphalt bar, dashed center line, lemon car, tow truck at the end. --carw/--truckw size the vehicles (smaller on narrow cards). */
.qa-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; margin-bottom: 16px; }
.qa-road { position: relative; height: 44px; --carw: 56px; --truckw: 74px; }
.qa-road__bar { position: absolute; left: 0; right: 0; bottom: 7px; height: 12px; border-radius: 99px; background: linear-gradient(#1B2C6E, #0A1640); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .55), 0 0 0 1px rgba(204, 225, 246, .14); overflow: hidden; }
.qa-road__bar::after { content: ""; position: absolute; left: 0; right: -17px; top: 5px; height: 2px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .55) 0 8px, transparent 8px 17px); background-position: var(--dash, 0) 0; transition: background-position .7s var(--ease-out); }
/* While the car moves the center line scrolls under it (two whole 17px periods in the 760ms window, so it ends where it started) and the rear wheel kicks up two lemon dust puffs. */
.is-moving .qa-road__bar::after { animation: qa-dash .38s linear 2; }
@keyframes qa-dash { to { transform: translateX(-17px); } }
.qa-car::before, .qa-car::after { content: ""; position: absolute; left: -4px; bottom: 3px; width: 7px; height: 7px; border-radius: 50%; background: rgba(249, 233, 0, .55); opacity: 0; pointer-events: none; }
.is-moving .qa-car::before { animation: qa-puff .55s ease-out; }
.is-moving .qa-car::after { animation: qa-puff .55s .16s ease-out; }
@keyframes qa-puff { 0% { opacity: .9; transform: translate(0, 0) scale(.5); } 100% { opacity: 0; transform: translate(-20px, -12px) scale(1.8); } }
.qa-road__fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p, 0) * 100%); background: linear-gradient(90deg, rgba(249, 233, 0, .4), var(--lemon)); box-shadow: 0 0 16px rgba(249, 233, 0, .65); transition: width .7s var(--ease-out); }
.qa-car { position: absolute; left: calc(var(--p, 0) * (100% - var(--carw) - var(--truckw) + 12px)); bottom: 12px; width: var(--carw); height: calc(var(--carw) / 2); transition: left .7s var(--ease-out), transform .7s var(--spring-soft); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .45)) drop-shadow(0 0 8px rgba(249, 233, 0, .45)); }
.qa-car svg { width: 100%; height: 100%; overflow: visible; }
.qa-car__wheel { transform-box: fill-box; transform-origin: center; }
.is-moving .qa-car__wheel { animation: qa-spin .36s linear 2; }
@keyframes qa-spin { to { transform: rotate(360deg); } }
.qa-car__beam { opacity: 0; transition: opacity .3s; }
.is-moving .qa-car__beam { opacity: 1; }
.qa-truck { position: absolute; right: 0; bottom: 11px; width: var(--truckw); height: calc(var(--truckw) * .43); color: #9CC9FF; opacity: .9; transition: opacity .4s, color .4s; }
.qa-truck svg { width: 100%; height: 100%; overflow: visible; }
.qa-truck__beacon { fill: #FFB020; transform-box: fill-box; transform-origin: center; }
.is-done .qa-truck { opacity: 1; color: #fff; }
.is-done .qa-truck__beacon { animation: qa-beacon-mini .5s ease-in-out 4, qa-beacon-mini 1s 2s ease-in-out infinite; } /* a quick double flash while the car loads, then a slow idle blink */
@keyframes qa-beacon-mini { 50% { opacity: .2; transform: scale(.7); } }
.is-done .qa-car { transform: translate(calc(var(--truckw) * .54), -7px) scale(.8); } /* loaded onto the flatbed */

/* Step dial (number inside a 7-segment ring) and the good-signs count pill */
.qa-meta { display: flex; align-items: center; gap: 10px; }
.qa-signs-pill { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px 0 8px; border-radius: 99px; background: rgba(249, 233, 0, .12); border: 1px solid rgba(249, 233, 0, .45); color: var(--lemon); font: 700 15px/1 var(--f-head); letter-spacing: .02em; white-space: nowrap; animation: ula-pop .5s var(--spring) both; }
.qa-signs-pill .i { width: 14px; height: 14px; stroke-width: 2.2; fill: var(--lemon); }
.qa-signs-pill.is-pulse { animation: qa-pulse .55s var(--spring); }
@keyframes qa-pulse { 35% { transform: scale(1.22); background: rgba(249, 233, 0, .34); } }
/* Every earned sign floats a "+1" (or "+2") off the count pill (the JS writes data-plus). */
.qa-signs-pill.is-pulse::after { content: attr(data-plus); position: absolute; right: -6px; top: -10px; font: 700 12px/1 var(--f-head); color: var(--lemon); pointer-events: none; animation: qa-plus .75s ease-out forwards; }
@keyframes qa-plus { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-16px); } }
.qa-step { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--f-text); letter-spacing: .08em; text-transform: uppercase; color: #C9D3E6; white-space: nowrap; font-variant-numeric: tabular-nums; }
.qa-dial { position: relative; width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto; }
.qa-ring { position: absolute; inset: 0; width: 44px; height: 44px; transform: rotate(-90deg); }
.qa-ring circle { fill: none; stroke-width: 4; }
.qa-ring__track { stroke: rgba(204, 225, 246, .24); }
.qa-ring__seg { stroke: var(--lemon); stroke-dasharray: 0 999; transition: stroke-dasharray .45s var(--ease-out); transition-delay: calc(var(--i, 0) * 55ms); }
.qa-ring__seg.is-lit { stroke-dasharray: var(--seg) 999; filter: drop-shadow(0 0 2px rgba(249, 233, 0, .5)); }
.qa-dial__n { position: relative; display: grid; place-items: center; min-width: 20px; font: 700 18px/1 var(--f-head); letter-spacing: 0; color: #fff; }
.qa-dial__n .i { width: 18px; height: 18px; stroke-width: 3; color: var(--lemon); }
.is-glow .qa-ring { filter: drop-shadow(0 0 6px rgba(249, 233, 0, .9)); animation: qa-glow 1.6s ease-in-out infinite alternate; }
@keyframes qa-glow { to { filter: drop-shadow(0 0 12px rgba(249, 233, 0, 1)); } }

/* Stage + screens (3D slide/tilt transitions, animated height) */
.qa-stage { position: relative; height: var(--h, auto); transition: height .35s var(--ease-out); perspective: 1200px; touch-action: pan-y; } /* pan-y keeps the swipe-back gesture ours */
.qa-stage.no-anim { transition: none; }
.qa-stage.is-switching { overflow: clip; overflow-clip-margin: 32px; } /* an outgoing, taller screen must not paint over the footer */
.qa-screen { position: absolute; left: 0; top: 0; width: 100%; transform-origin: 50% 50%; transition: transform .5s var(--ease-out), opacity .28s; will-change: transform, opacity; }
.qa-screen.is-enter { transform: translateX(60px) rotateY(-8deg); opacity: 0; transition: none; }
.qa-screen.is-enter-back { transform: translateX(-60px) rotateY(8deg); opacity: 0; transition: none; }
/* The outgoing screen fades faster than it slides, so it never prints through the incoming tiles (no double exposure). */
.qa-screen.is-out { transform: translateX(-60px) rotateY(8deg); opacity: 0; pointer-events: none; transition-duration: .32s, .18s; }
.qa-screen.is-out-back { transform: translateX(60px) rotateY(-8deg); opacity: 0; pointer-events: none; transition-duration: .32s, .18s; }
.qa-q { font: 700 clamp(26px, 6cqi, 34px)/1.08 var(--f-head); color: #fff; text-wrap: balance; }
.ula-qa .qa-q:focus, .ula-qa .ula-res h5:focus { outline: none; } /* headings receive focus programmatically for screen readers; they are not controls */
.qa-hint { margin-top: 6px; font: 500 13.5px/1.5 var(--f-text); color: #C9D3E6; text-wrap: pretty; }
.qa-hint b { color: #fff; }

/* Answer tiles */
.qa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.qa-grid--1 { grid-template-columns: 1fr; }
.qa-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qa-tile { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 11px; align-items: center; min-height: 72px; padding: 10px 12px 10px 11px; border-radius: 18px; border: 1.5px solid rgba(204, 225, 246, .16); background: rgba(255, 255, 255, .05); color: #fff; text-align: left; cursor: pointer; transition: transform .25s var(--spring-soft), border-color .2s, background .2s, box-shadow .25s; animation: qa-tile-in .6s var(--spring-soft) both; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes qa-tile-in { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.qa-tile--v { grid-template-columns: 1fr; justify-items: start; gap: 10px; padding: 12px 12px 11px; min-height: 108px; align-content: start; }
/* A two-option screen (Yes / No) gets two generous tiles instead of two small ones in a big empty stage. */
.qa-grid--2:has(> .qa-tile:nth-child(2):last-child) .qa-tile { min-height: 100px; grid-template-columns: 54px minmax(0, 1fr); gap: 13px; padding: 12px 14px 12px 13px; }
.qa-grid--2:has(> .qa-tile:nth-child(2):last-child) .qa-tile__ic { width: 54px; height: 54px; border-radius: 16px; }
.qa-grid--2:has(> .qa-tile:nth-child(2):last-child) .qa-tile__ic .i { width: 28px; height: 28px; }
.qa-grid--2:has(> .qa-tile:nth-child(2):last-child) .qa-tile__l { font-size: 15.5px; }
.qa-tile__ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, .08); color: var(--sky-2); transition: background .25s, color .25s, transform .3s var(--spring); }
.qa-tile--v .qa-tile__ic { width: 42px; height: 42px; border-radius: 12px; color: var(--c, var(--sky-2)); background: color-mix(in srgb, var(--c, var(--sky-2)) 18%, transparent); }
.qa-tile__ic .i { width: 26px; height: 26px; }
.qa-tile--v .qa-tile__ic .i { width: 23px; height: 23px; }
.qa-tile__t { display: grid; gap: 2px; min-width: 0; }
.qa-tile--v .qa-tile__t { padding-right: 22px; } /* room for the check mark */
.qa-tile__l { font: 600 14.5px/1.2 var(--f-text); text-wrap: balance; }
.qa-tile--v .qa-tile__l { font-size: 13.5px; }
.qa-tile__s { font: 500 12px/1.3 var(--f-text); color: #C9D3E6; text-wrap: balance; }
/* Keycaps sit on the icon's corner (so the label keeps its full width) and only show once the pointer is on the card or a key was used. */
.qa-key { position: absolute; left: 4px; top: 4px; width: 20px; height: 20px; border-radius: 6px; border: 1px solid rgba(204, 225, 246, .3); background: rgba(5, 13, 43, .72); color: #C9D3E6; font: 600 11px/18px var(--f-text); text-align: center; opacity: 0; transition: opacity .25s; box-shadow: inset 0 -1.5px 0 rgba(0, 0, 0, .45); }
.qa-tile--v .qa-key { left: auto; top: 8px; right: 8px; }
@media (hover: hover) { .has-keys:hover .qa-key, .has-keys:focus-within .qa-key, .has-keys.keys-used .qa-key { opacity: .85; } }
/* One-time keyboard tip under the first question (desktop, after 2.5 s without a click or key) */
.qa-tip { margin-top: 12px; font: 500 12.5px/1.5 var(--f-text); color: #C9D3E6; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; animation: ula-rise .5s var(--ease-out) both; }
.qa-tip kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px; border: 1px solid rgba(204, 225, 246, .3); background: rgba(5, 13, 43, .72); font: 600 11px/1 var(--f-text); color: #fff; box-shadow: inset 0 -1.5px 0 rgba(0, 0, 0, .45); }
@media (hover: hover) {
  .qa-tile:hover { border-color: rgba(249, 233, 0, .55); background: rgba(255, 255, 255, .08); transform: translateY(-2px); }
  .qa-tile:hover .qa-tile__ic { transform: scale(1.05); }
}
.qa-tile:active { transform: scale(.97); }
.qa-tile.is-on { border-color: var(--lemon); background: rgba(249, 233, 0, .1); box-shadow: 0 0 0 1px var(--lemon), 0 10px 28px rgba(249, 233, 0, .12); }
.qa-tile.is-on .qa-tile__ic { background: var(--lemon); color: var(--navy); transform: scale(1.06); }
.qa-tile.is-on .qa-key { border-color: var(--lemon); color: var(--lemon); }
.qa-tile.is-pick { animation: qa-pick .42s var(--spring); }
@keyframes qa-pick { 40% { transform: scale(.96); } 100% { transform: scale(1); } }
.qa-tile__check { position: absolute; right: 10px; bottom: 10px; width: 20px; height: 20px; border-radius: 50%; background: var(--lemon); color: var(--navy); display: grid; place-items: center; transform: scale(0); transition: transform .35s var(--spring); }
.qa-tile__check .i { width: 13px; height: 13px; stroke-width: 3.2; }
.qa-tile.is-on .qa-tile__check { transform: scale(1); }
.qa-tile.is-dim { opacity: .55; }

/* Footer row: back / continue / start over */
.qa-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; min-height: 50px; }
.qa-back, .qa-reset, .qa-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border: 0; background: none; color: #C9D3E6; font: 600 13.5px/1 var(--f-text); cursor: pointer; border-radius: 10px; transition: color .2s, background .2s, opacity .3s, transform .3s var(--ease-out); }
.qa-back .i, .qa-reset .i { width: 18px; height: 18px; stroke-width: 2.2; }
@media (hover: hover) { .qa-back:hover, .qa-reset:hover, .qa-link:hover { color: #fff; background: rgba(255, 255, 255, .07); } }
.qa-back[hidden] { display: none; }
.qa-back.is-ghost { opacity: 0; pointer-events: none; transform: translateX(-6px); }
.qa-next { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 22px 0 24px; border-radius: 99px; border: 2px solid rgba(204, 225, 246, .22); background: rgba(255, 255, 255, .06); color: #C9D3E6; font: 600 19px/1 var(--f-head); letter-spacing: .03em; text-transform: uppercase; cursor: pointer; transition: transform .3s var(--spring-soft), background .25s, color .25s, border-color .25s, box-shadow .3s; }
.qa-next .i { width: 20px; height: 20px; stroke-width: 2.4; transition: transform .3s var(--spring-soft); }
.qa-next.is-ready { background: var(--lemon); border-color: var(--lemon); color: var(--navy); box-shadow: 0 12px 30px rgba(249, 233, 0, .28); animation: qa-alive .6s var(--spring); }
@keyframes qa-alive { 50% { transform: scale(1.05); } }
@media (hover: hover) { .qa-next.is-ready:hover { transform: translateY(-2px); filter: brightness(1.04); } .qa-next.is-ready:hover .i { transform: translateX(3px); } }
.qa-next:active { transform: scale(.97); }
.qa-next--ghost { background: transparent; border-color: rgba(204, 225, 246, .3); color: #E4ECF7; box-shadow: none; } /* "Skip for now" on the vehicle screen */
@media (hover: hover) { .qa-next--ghost:hover { background: rgba(255, 255, 255, .06); border-color: rgba(204, 225, 246, .5); color: #fff; } }
.qa-foot__l, .qa-foot__r { display: flex; align-items: center; gap: 4px; }
.qa-foot__r { gap: 8px; justify-content: flex-end; }
.qa-legal { margin-top: 12px; font: 500 11.5px/1.4 var(--f-text); color: #93A0BC; text-align: center; text-wrap: balance; }

/* Vehicle screen */
.qa-veh { display: grid; gap: 10px; margin-top: 16px; }
.qa-veh__row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; }
.qa-field { display: grid; gap: 6px; min-width: 0; }
.qa-field > span { font: 600 11px/1 var(--f-text); letter-spacing: .08em; text-transform: uppercase; color: #C9D3E6; }
.qa-select, .qa-input { width: 100%; height: 50px; border-radius: 12px; border: 1.5px solid rgba(204, 225, 246, .2); background: rgba(255, 255, 255, .07); color: #fff; padding: 0 14px; font: 500 16px var(--f-text); transition: border-color .2s, background .2s, box-shadow .2s; } /* 16px: no iOS focus zoom */
.qa-select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9D3E6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; cursor: pointer; text-overflow: ellipsis; }
.qa-select option, .qa-select optgroup { color: var(--navy); background: #fff; font-weight: 500; }
.qa-select:disabled { opacity: .5; cursor: default; }
.qa-select.is-loading { background-image: none; }
.qa-select:focus, .qa-input:focus { outline: none; border-color: var(--lemon); background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 4px rgba(249, 233, 0, .22); }
.qa-input::placeholder { color: rgba(201, 211, 230, .6); }
.qa-input.is-bad { border-color: var(--red); animation: ula-shake .4s; }
.qa-field--busy { position: relative; }
.qa-field--busy::after { content: ""; position: absolute; right: 14px; bottom: 15px; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(204, 225, 246, .3); border-top-color: var(--lemon); animation: ula-spin .8s linear infinite; }
.qa-vin-toggle { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--sky-2); font: 600 13px/1 var(--f-text); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(109, 181, 255, .4); }
.qa-vin-toggle .i { width: 16px; height: 16px; stroke-width: 2.2; }
.qa-vin { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; animation: ula-rise .4s var(--ease-out) both; }
.qa-vin .qa-input { font: 600 16px/1 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; }
.qa-vin .qa-input::placeholder { text-transform: none; letter-spacing: 0; font: 500 14px var(--f-text); color: rgba(201, 211, 230, .6); }
.qa-vin__btn { height: 50px; padding: 0 18px; border-radius: 12px; border: 0; background: var(--sky-2); color: var(--navy); font: 600 17px/1 var(--f-head); letter-spacing: .03em; text-transform: uppercase; cursor: pointer; transition: transform .25s var(--spring-soft), filter .2s; white-space: nowrap; }
.qa-vin__btn:disabled { opacity: .5; cursor: default; }
@media (hover: hover) { .qa-vin__btn:not(:disabled):hover { filter: brightness(1.08); transform: translateY(-1px); } }
.qa-vin__count { font: 500 12px/1 var(--f-text); color: #C9D3E6; font-variant-numeric: tabular-nums; }
.qa-vin__count.is-ok { color: var(--lemon); }
.qa-msg { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .06); font: 500 12.5px/1.45 var(--f-text); color: #DCE6F5; }
.qa-msg .i { width: 18px; height: 18px; color: var(--sky-2); margin-top: 1px; }
.qa-msg--bad .i { color: #FFB4B4; }
.qa-recwrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease-out); }
.qa-recwrap.is-open { grid-template-rows: 1fr; }
.qa-recwrap > div { overflow: hidden; min-height: 0; }
.qa-recwrap.is-open > div { animation: ula-rise .5s var(--ease-out) both; }
.qa-recwrap .ula-rec { margin-top: 6px; }
.ula-qa .ula-rec__car { font-size: 20px; }
.ula-qa .ula-rec__stats b { font-size: 30px; }
.ula-qa .ula-rec--loading { padding: 16px; }

/* Result */
/* Reveal: a soft lemon light sweeps across the glass in a single pass (.qa-wipe.is-run) while the card flashes once (.is-flash);
   the result screen fades and slides in underneath, so the band is light passing over glass, not a panel hiding a swap. */
.qa-wipe { position: absolute; top: -2px; bottom: -2px; left: -30%; width: 46%; z-index: 6; background: linear-gradient(100deg, transparent 0, rgba(249, 233, 0, .18) 25%, rgba(255, 241, 77, .8) 50%, rgba(249, 233, 0, .18) 75%, transparent 100%); filter: blur(3px); mix-blend-mode: screen; transform: translateX(-100%); pointer-events: none; }
.qa-wipe.is-run { animation: qa-wipe .78s cubic-bezier(.45, 0, .2, 1) forwards; }
@keyframes qa-wipe { to { transform: translateX(230%); } }
.qa-card.is-flash { box-shadow: var(--shadow-deep), inset 0 1px 0 var(--glass-hi), 0 0 0 2px var(--lemon), 0 0 60px rgba(249, 233, 0, .35); }
.qa-card.is-flash .qa-badge { box-shadow: 0 0 0 6px rgba(249, 233, 0, .25), 0 10px 30px rgba(249, 233, 0, .45); }
.qa-res { display: grid; gap: 24px; }
.qa-res__main, .qa-res__side { min-width: 0; }
.qa-res__side { display: grid; gap: 18px; align-content: start; animation: ula-rise .6s .3s var(--ease-out) both; }
.qa-res__eyebrow { display: flex; align-items: center; gap: 8px; font: 600 11.5px/1 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: #C9D3E6; animation: ula-rise .5s var(--ease-out) both; }
.qa-res__eyebrow .i { width: 16px; height: 16px; color: var(--lemon); }
/* The badge lands like a rubber stamp (qa-stamp) and catches the light every few seconds (qa-glint on ::after). */
.qa-badge { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 18px 8px 8px; border-radius: 99px; background: var(--lemon); color: var(--navy); font: 700 19px/1 var(--f-head); letter-spacing: .04em; text-transform: uppercase; animation: qa-stamp .65s .06s var(--spring) both; box-shadow: 0 10px 30px rgba(249, 233, 0, .25); transition: box-shadow .45s; }
@keyframes qa-stamp { from { opacity: 0; transform: scale(1.6) rotate(-7deg); } 60% { opacity: 1; transform: scale(.96) rotate(1deg); } to { transform: none; } }
.qa-badge::after { content: ""; position: absolute; top: -40%; bottom: -40%; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-18deg); pointer-events: none; animation: qa-glint 5s 1.4s ease-in-out infinite; }
@keyframes qa-glint { 0%, 18% { transform: translateX(0) skewX(-18deg); } 42%, 100% { transform: translateX(550%) skewX(-18deg); } }
.qa-badge i { width: 32px; height: 32px; border-radius: 50%; background: var(--navy); color: var(--lemon); display: grid; place-items: center; }
.qa-badge i .i { width: 18px; height: 18px; stroke-width: 2.8; }
.qa-badge--possible { background: var(--sky-2); box-shadow: 0 10px 30px rgba(109, 181, 255, .25); }
.qa-badge--possible i { color: var(--sky-2); }
.qa-badge--harder { background: #fff; box-shadow: 0 10px 30px rgba(255, 255, 255, .15); }
.qa-badge--harder i { color: #fff; }
.qa-res__body { margin-top: 14px; animation: ula-rise .6s .18s var(--ease-out) both; }
.ula-qa .ula-res__label { display: none; }
.ula-qa .ula-res h5 { font-size: clamp(24px, 6cqi, 30px); margin: 0 0 8px; }
.ula-qa .ula-res > p { color: #D8DEEA; }
.ula-qa .ula-res__signs { margin-top: 14px; }
/* The verdict builds: chips land one after another, then the honest row, the notes, the numbered steps and the fee line (the JS sets --i). */
.ula-qa .ula-res__signs .ula-chip { animation-delay: calc(.25s + var(--i, 0) * 55ms); }
.ula-qa .ula-res__notes li { animation: ula-rise .5s calc(.6s + var(--i, 0) * 60ms) var(--ease-out) both; }
.ula-qa .ula-next li { animation: ula-rise .5s calc(.7s + var(--i, 0) * 70ms) var(--ease-out) both; }
.ula-qa .ula-res__fees { animation: ula-rise .5s 1s var(--ease-out) both; }
/* The honest line about the guideline numbers (and the direct-notice caveat): a quiet info row, not a warning. Two rows read as one box. */
.qa-res__honest { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(109, 181, 255, .08); border: 1px solid rgba(109, 181, 255, .2); font: 500 13px/1.5 var(--f-text); color: #DCE6F5; animation: ula-rise .5s .5s var(--ease-out) both; }
.qa-res__honest:has(+ .qa-res__honest) { border-bottom: 0; border-radius: 12px 12px 0 0; padding-bottom: 8px; }
.qa-res__honest + .qa-res__honest { margin-top: 0; border-top: 1px solid rgba(109, 181, 255, .18); border-radius: 0 0 12px 12px; padding-top: 8px; }
.qa-res__honest + .qa-res__honest .i { visibility: hidden; }
.qa-res__honest .i { width: 18px; height: 18px; color: var(--sky-2); margin-top: 1px; }
.ula-qa .ula-res__notes { gap: 4px; margin-top: 12px; }
.ula-qa .ula-res__notes li { background: none; border-left: 2px solid var(--sky-2); border-radius: 0; padding: 3px 0 3px 12px; }
.ula-qa .ula-res__notes li::before { display: none; }
/* "What to do now" cap over the three steps (the same cap Case Chat uses) */
.ula-qa .ula-res > .qa-res__cap { display: flex; align-items: center; gap: 8px; margin: 16px 0 -6px; font: 600 11px/1 var(--f-text); letter-spacing: .1em; text-transform: uppercase; color: var(--lemon); animation: ula-rise .5s .65s var(--ease-out) both; }
.ula-qa .qa-res__cap .i { width: 16px; height: 16px; stroke-width: 2; }
/* The callback form always comes first in the side column, in every layout; the records card is the proof under it. */
.qa-res__form { order: 1; padding-top: 20px; border-top: 1px solid rgba(204, 225, 246, .16); }
.qa-res__rec { order: 2; border-top: 1px solid rgba(204, 225, 246, .16); padding-top: 18px; }
.qa-res__form h3 { font: 700 clamp(24px, 6cqi, 30px)/1.05 var(--f-head); color: #fff; text-wrap: balance; }
.qa-res__form > p { margin: 6px 0 14px; font: 500 13.5px/1.5 var(--f-text); color: #C9D3E6; text-wrap: pretty; }
.qa-res__form .ula-submit { font-size: 25px; }
.ula-qa .ula-form input[type=text], .ula-qa .ula-form input[type=tel], .ula-qa .ula-form input[type=email] { font-size: 16px; } /* no iOS focus zoom */
/* Wide cards: the result reads as a dashboard, records card and form beside the verdict */
@container qa-card (min-width: 640px) {
  .qa-res { grid-template-columns: minmax(0, 1fr) 316px; gap: 28px; align-items: start; }
  .qa-res__side .ula-form__row { grid-template-columns: 1fr; }
  .qa-res__side .ula-rec__stats div { padding: 10px 10px; }
  .qa-res__side .ula-rec__stats b { font-size: 28px; }
  .qa-res__side .ula-rec__stats span { font-size: 11.5px; white-space: nowrap; }
  /* Beside the verdict the form needs no divider above it (the submit button lands inside the first fold). */
  .qa-res__form { border-top: 0; padding-top: 0; }
  .qa-res__form h3 { font-size: 26px; }
}

/* Good-signs tray: under the card on wide layouts */
.qa-tray { display: grid; gap: 8px; padding: 0 6px; min-height: 0; }
/* The tray is there from the first screen: a dim label and a dashed ghost chip teach the mechanic before the first answer. */
.qa-tray__label { display: flex; align-items: center; gap: 8px; font: 600 11.5px/1 var(--f-text); letter-spacing: .1em; text-transform: uppercase; color: #C9D3E6; opacity: .55; transition: opacity .4s; }
.qa-tray__label .i { width: 15px; height: 15px; color: var(--lemon); }
.qa-tray.has-signs .qa-tray__label { opacity: 1; }
.qa-tray__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.qa-tray .ula-chip { font-size: 12.5px; }
.ula-qa .qa-chip--ghost { background: transparent; border: 1px dashed rgba(249, 233, 0, .35); color: #93A0BC; animation: none; }
.ula-qa .qa-chip--ghost .i { color: rgba(249, 233, 0, .6); stroke-width: 2.2; }
.qa-tray.has-signs .qa-chip--ghost { display: none; }
.qa-tray .ula-chip.is-leaving { animation: qa-chip-out .3s var(--ease-out) forwards; }
@keyframes qa-chip-out { to { opacity: 0; transform: scale(.6); } }
/* Narrow cards (phones): the JS moves the tray into the card head (.qa-trayslot) as a one-line chip scroller, count pill first.
   The row keeps its height from the start (label as placeholder) so the question never shifts when the first chip lands. */
.qa-tray--inline { display: flex; align-items: center; gap: 0; height: 30px; padding: 0 2px; margin: -2px 0 12px; overflow: hidden; }
.qa-tray--inline .qa-tray__label { display: none; } /* the ghost chip is the placeholder on phones */
.qa-tray--inline .qa-signs-pill { flex: 0 0 auto; height: 28px; font-size: 14px; }
/* Newest chip first (the JS prepends and scrolls to the start), older ones fade out to the right: no torn chip beside the pill. */
.qa-tray--inline .qa-tray__list { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 5px; padding: 2px 8px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 6px, #000 calc(100% - 24px), transparent); }
.qa-tray--inline .qa-tray__list::-webkit-scrollbar { display: none; }
.qa-tray--inline .ula-chip { flex: 0 0 auto; font-size: 11.5px; padding: 4px 9px 4px 7px; white-space: nowrap; }

/* Mobile call pill (hero mode, during the quiz): docked bottom-right, hidden by the JS whenever the card's footer is on screen.
   --qa-raise (measured by the widget) lifts it above a bottom-docked page nav such as the showcase's A/B/C pill on phones. */
.qa-callbar { position: fixed; left: auto; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px) + var(--qa-raise, 0px)); z-index: 60; display: none; align-items: center; gap: 8px; min-height: 54px; padding: 0 20px 0 16px; border-radius: 99px; background: var(--lemon); color: var(--navy); text-decoration: none; box-shadow: 0 16px 40px rgba(3, 10, 40, .45), 0 0 0 1px rgba(255, 255, 255, .3) inset; transform: translateY(calc(140% + var(--qa-raise, 0px))); transition: transform .5s var(--spring-soft); }
.qa-callbar.is-show { transform: none; }
.qa-callbar .i { width: 22px; height: 22px; stroke-width: 2.4; }
.qa-callbar b { font: 700 21px/1 var(--f-head); letter-spacing: .02em; white-space: nowrap; }
.qa-callbar span { display: none; }
@media (max-width: 760px) { .qa-callbar.is-on { display: flex; } }

/* ---------------------------------------------------------------- Container queries */
/* Wide hero: at the result the card widens into a two-column dashboard (see @container qa-card min-width: 640px) */
@container qa (min-width: 1180px) {
  .is-result .qa-hero__in { grid-template-columns: minmax(380px, 1fr) minmax(0, 780px); } /* the headline column keeps at least 380px */
  .is-result .qa-right:not(.qa-right--solo) { max-width: 780px; }
}
/* Two-column hero at the result: the sticky headline column must fit the viewport (eyebrow, 3-line headline, lede, smaller art)
   and the grid area must reach 96px below the card, so the column is never pushed up off the screen while the form is filled. */
@container qa (min-width: 981px) {
  .is-result .qa-art { max-width: 380px; margin-bottom: 0; }
  .is-embedded.is-result .qa-art { max-width: 240px; } /* the showcase frame gives the headline column less width (4-line headline), so the art gives back the height */
  .is-result .qa-trust { display: none; }
  .is-result .qa-right:not(.qa-right--solo) { margin-bottom: 96px; }
  .is-result .qa-hero { padding-bottom: 0; }
}
@container qa (min-width: 981px) and (max-width: 1180px) {
  .is-result .qa-art { max-width: 300px; } /* single-column result on a laptop: the card is much taller, so the column is shorter still */
}
@container qa (max-width: 1180px) {
  /* Laptop (1100x800): the 3x3 problems grid runs about 40px shorter (tighter tiles, smaller icon boxes) so Continue stays above the fold */
  .qa-grid { margin-top: 14px; gap: 8px; }
  .qa-tile--v { min-height: 96px; padding: 10px 10px 9px; gap: 8px; }
  .qa-tile--v .qa-tile__ic { width: 38px; height: 38px; border-radius: 11px; }
  .qa-tile--v .qa-tile__ic .i { width: 21px; height: 21px; }
  .qa-tile--v .qa-tile__l { line-height: 1.15; }
}
@container qa (max-width: 980px) {
  /* Stack: eyebrow, headline, lede, THE CARD, trust line, art. The left column dissolves into the grid so the card can move up. */
  .qa-hero__in { grid-template-columns: minmax(0, 1fr); gap: 16px; justify-items: center; }
  .qa-left { display: contents; }
  .qa-eyebrow { order: 0; }
  .qa-h1 { order: 1; text-align: center; max-width: 760px; }
  .qa-lede { order: 2; text-align: center; max-width: 620px; }
  .qa-right:not(.qa-right--solo) { order: 3; justify-self: center; max-width: 620px; margin-top: 8px; } /* card mode takes its host's width */
  .qa-trust { order: 4; justify-content: center; margin-top: 18px; }
  .qa-art { order: 5; max-width: 460px; justify-self: center; margin: -2% 0 -10%; }
}
@container qa (max-width: 560px) {
  /* Phones: the quiz is the point, so it must start above the fold: tighter top, two-line headline, one-sentence lede */
  .qa-hero { padding-top: 22px; padding-bottom: 64px; }
  .is-embedded .qa-hero { padding-top: 40px; }
  .qa-hero__in { gap: 10px; }
  .qa-eyebrow { font-size: 15px; }
  .qa-h1 { font-size: clamp(30px, 9.2cqi, 38px); }
  .qa-lede { font-size: 14.5px; line-height: 1.5; }
  .qa-lede__more { display: none; }
  .qa-right { margin-top: 4px; }
  .qa-card { padding-left: 16px; padding-right: 16px; }
  .qa-trust { gap: 6px 14px; }
  .qa-trust li { font-size: 13px; }
  .qa-trust .i { width: 19px; height: 19px; }
  .qa-art { max-width: 340px; margin: -4% 0 -12%; }
}
@container qa-card (min-width: 440px) {
  .qa-stage { min-height: 232px; } /* a two-tile screen does not collapse the card below the four-tile height */
  /* The two-option screen (Yes / No) gets two tall tiles that fill that height exactly (34 + 26 + 18 + 150 = 228), instead of two small tiles over a void. */
  .qa-grid--2:has(> .qa-tile:nth-child(2):last-child) { gap: 12px; }
  .qa-grid--2:has(> .qa-tile:nth-child(2):last-child) .qa-tile { min-height: 150px; grid-template-columns: 1fr; justify-items: start; align-content: end; gap: 14px; padding: 16px 16px 14px; }
  .qa-grid--2:has(> .qa-tile:nth-child(2):last-child) .qa-tile__ic { width: 60px; height: 60px; border-radius: 18px; }
  .qa-grid--2:has(> .qa-tile:nth-child(2):last-child) .qa-tile__ic .i { width: 30px; height: 30px; }
  .qa-grid--2:has(> .qa-tile:nth-child(2):last-child) .qa-tile__l { font-size: 17px; }
  .qa-grid--2:has(> .qa-tile:nth-child(2):last-child) .qa-key { left: auto; right: 10px; top: 10px; }
}
@container qa-card (max-width: 440px) {
  .qa-road { --carw: 48px; --truckw: 64px; }
  .qa-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qa-tile--v { min-height: 96px; }
  /* The ninth problem tile would sit alone beside an empty cell: it spans the row as a horizontal tile instead */
  .qa-grid--3 > .qa-tile:nth-child(9):last-child { grid-column: 1 / -1; grid-template-columns: 44px minmax(0, 1fr); align-items: center; justify-items: stretch; align-content: center; min-height: 66px; padding: 10px; gap: 11px; }
  .qa-grid--3 > .qa-tile:nth-child(9):last-child .qa-tile__ic { width: 44px; height: 44px; }
  .qa-tile:not(.qa-tile--v) { grid-template-columns: 44px minmax(0, 1fr); padding: 10px; min-height: 66px; }
  .qa-tile:not(.qa-tile--v) .qa-tile__ic { width: 44px; height: 44px; }
  .qa-tile:not(.qa-tile--v) .qa-tile__l { font-size: 14px; }
  .qa-grid--2:has(> .qa-tile:nth-child(2):last-child) .qa-tile { min-height: 88px; }
  .qa-tile--v { padding: 10px 10px 9px; gap: 8px; }
  .qa-tile--v .qa-tile__l { font-size: 13px; }
  .qa-foot .qa-reset span { display: none; }
  .qa-foot .qa-reset { min-width: 44px; justify-content: center; padding: 0 12px; } /* icon only, still a 44px target */
  .qa-veh__row { grid-template-columns: 96px minmax(0, 1fr); }
  .qa-step { font-size: 11.5px; }
  .qa-next { padding: 0 16px 0 18px; font-size: 17px; }
  .ula-res__signs { gap: 4px; }
  .ula-res__signs .ula-chip { font-size: 11.5px; padding: 5px 7px 5px 6px; gap: 4px; } /* two chips per row on a phone */
  .ula-res__signs .ula-chip .i { width: 13px; height: 13px; }
}
@container qa-card (max-width: 360px) {
  .qa-grid { grid-template-columns: 1fr; }
  .qa-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qa-vin { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ula-qa *, .ula-qa *::before, .ula-qa *::after { animation: none !important; transition: none !important; }
  .qa-card { transform: none; }
  .qa-beacon { opacity: .5; }
  .qa-art { transform: none; }
}