/* line-auto.css: bespoke sections on /insurance/auto only (hub task 136 round 2, 2026-09-27). The Policy Year track lives in line-common.css.
   Add-On Attach: the driver's question types itself, a copper wire draws to the filed add-on it matches (the scenario-thread motif), the model's line follows.
   (Round 3: the Order to Delivery section and its styles were removed at Guy's request.) */

/* ---------- Add-On Attach ---------- */
.la-ask{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:40px 132px;align-items:start;margin-top:64px}
.la-wire{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.la-wire-path{fill:none;stroke:url(#la-copper);stroke-width:2;stroke-linecap:round}
.la-q{position:relative;min-width:0;display:flex;flex-direction:column;min-height:100%}
.la-qs{list-style:none;margin:22px 0 0;padding:0;position:relative;height:330px}
.la-qa{position:absolute;inset:0 0 auto 0;display:grid;gap:30px;opacity:0;transform:translateY(10px);transition:opacity .48s cubic-bezier(.2,.7,.2,1),transform .48s cubic-bezier(.2,.7,.2,1)}
.la-qa.is-on{opacity:1;transform:none}
.la-qa .la-typed{font-size:clamp(30px,2.9vw,44px);line-height:1.12;letter-spacing:-.045em;color:#5b645e;min-height:2.3em}
.la-qa .la-typed.is-typing:after{content:"";display:inline-block;width:2px;height:.9em;margin-left:4px;vertical-align:-.08em;background:#d9956a;animation:la-caret 1s steps(1) infinite}
@keyframes la-caret{50%{opacity:0}}
.la-qa .model{opacity:0;transform:translateY(8px);transition:opacity .48s cubic-bezier(.2,.7,.2,1),transform .48s cubic-bezier(.2,.7,.2,1);max-width:560px}
.la-qa .model.is-in{opacity:1;transform:none}
.la-ticks{list-style:none;margin:auto 0 0;padding:28px 0 0;display:flex;gap:6px}
.la-ticks li{width:28px;height:3px;border-radius:3px;background:#dfe5e1;transition:background .3s}
.la-ticks li.is-on{background:#e6ad7d}
.la-cover{min-width:0}
.la-chips{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.la-chip{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:minmax(0,1fr);gap:2px;padding:15px 20px;border:1px solid var(--line);border-radius:14px;background:#fff;transition:border-color .36s cubic-bezier(.2,.7,.2,1),background .36s,box-shadow .36s,transform .36s cubic-bezier(.2,.7,.2,1)}
.la-chip strong{font-size:18px;font-weight:500;letter-spacing:-.02em;color:#8a938d;transition:color .36s}
.la-chip .d{font-size:14px;line-height:1.45;color:#a0a8a2;transition:color .36s}
.la-chip.is-done{border-color:#ecd3bd}
.la-chip.is-done strong{color:var(--ink)}
.la-chip.is-done .d{color:var(--muted)}
.la-chip.is-on{border-color:#e6ad7d;background:#fff8f2;box-shadow:0 10px 28px -18px rgba(185,120,70,.55);transform:translateX(-4px)}
.la-chip.is-on strong{color:var(--ink)}
.la-chip.is-on .d{color:#4c5650}
.la-chip:hover strong{color:var(--ink)}
.la-chip:focus-visible{outline:2px solid var(--green);outline-offset:3px}

@media(max-width:1100px){.la-ask{gap:40px 72px}}
@media(max-width:960px){
.la-ask{grid-template-columns:1fr;gap:36px}
.la-wire{display:none}
.la-qs{height:300px}
.la-chips{grid-template-columns:repeat(2,minmax(0,1fr))}
.la-chip.is-on{transform:none}
}
@media(max-width:760px){
.la-ask{margin-top:40px}
.la-qs{height:300px;margin-top:16px}
.la-qa{gap:20px}
.la-qa .la-typed{font-size:28px}
.la-chips{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.la-chip{padding:11px 12px;gap:4px;align-content:start}
.la-chip strong{font-size:15px;line-height:1.25}
.la-chip .d{display:none}
}
@media(prefers-reduced-motion:reduce){
.la-qa,.la-qa .model,.la-chip{transition:none}
.la-qa .la-typed:after{display:none}
}