/* line-common.css: the shared layer for the insurance line pages (/insurance/auto, /life, /pet), hub task 136 round 2, 2026-09-27.
   Loaded after vertical-page.css on those 3 pages only. Holds the exchange-line type (typographic, never chat bubbles), the dark band,
   and the scroll-driven track used by the Auto "Policy Year" and Life "Quote to Placed" sections. Page-only rules live in line-auto/life/pet.css.
   Motion is gated in line-common.js: IntersectionObserver, document.hidden, prefers-reduced-motion (static end state). */
.ln-sec{padding:104px 0;border-bottom:1px solid var(--line);position:relative}
.ln-paper{background:#fafbf7}
.ln-dark{background:var(--dark);color:var(--dark-text);border-bottom:0}
.ln-dark .eyebrow{color:var(--dark-muted)}
.ln-dark h2{color:#fff}
.ln-dark h2 span{color:#c9d6c1}
.ln-dark .lead{color:#c3cfba}
.ln-dark .lead strong{color:#fff}
.ln-mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:12px;letter-spacing:.03em;color:#8a938d}
.ln-dark .ln-mono{color:#8f9d8c}
.ln-note{margin-top:28px;font-size:13px;line-height:1.55;color:#7f8c7a;max-width:640px}
.ln-dark .ln-note{color:#8f9d8c}

/* Exchange lines: who said it in a small label, the customer in muted lowercase, the model in ink behind a copper rule. No bubbles, no phone. */
.ln-say{margin:0;min-width:0}
.ln-say>small{display:block;font-size:11px;font-weight:550;letter-spacing:.13em;text-transform:uppercase;color:#8a938d;margin-bottom:8px}
.ln-say.cust{font-size:18px;line-height:1.45;color:#7c8380}
.ln-say.model{font-size:clamp(19px,1.55vw,22px);line-height:1.4;letter-spacing:-.02em;color:var(--ink);border-left:2px solid var(--copper);padding-left:18px}
.ln-say.event{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.5;color:#2f3a33;background:#eef3e8;border:1px solid #d3e0c8;border-radius:12px;padding:14px 16px}
.ln-say.event:before{content:"";flex:none;width:18px;height:18px;margin-top:2px;border-radius:50%;background:#2e4a36 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m5 9.2 2.6 2.6L13 6.4' fill='none' stroke='%23eef3e8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
.ln-dark .ln-say>small{color:#8f9d8c}
.ln-dark .ln-say.cust{color:#a9b6a4}
.ln-dark .ln-say.model{color:#f3f6ee}
.ln-dark .ln-say.event{background:#1d2a22;border-color:#34503c;color:#dfe9d6}
.ln-dark .ln-say.event:before{background-color:#e6ad7d;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m5 9.2 2.6 2.6L13 6.4' fill='none' stroke='%23131c17' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.ln-when{display:block;font-size:11px;font-weight:550;letter-spacing:.13em;text-transform:uppercase;color:#8a938d}
.ln-dark .ln-when{color:#8f9d8c}

/* Reveal: an item fades up the first time its sequence reaches it. Motion state classes are set by JS; with JS off or reduced motion everything shows. */
.ln-js .ln-rv{opacity:0;transform:translateY(10px);transition:opacity .48s cubic-bezier(.2,.7,.2,1),transform .48s cubic-bezier(.2,.7,.2,1)}
.ln-js .ln-rv.is-in{opacity:1;transform:none}

/* Dim reveal: lines wait at low opacity instead of hidden, so nothing jumps; they brighten when their moment comes (the lightening-words motif). */
.ln-js .ln-dim{opacity:.2;transition:opacity .6s cubic-bezier(.2,.7,.2,1)}
.ln-js .ln-dim.is-in{opacity:1}

/* ---------- The scroll track (Auto: The Policy Year, Life: Quote to Placed) ----------
   .ln-run is tall; .ln-stage sticks in the viewport while the page scrolls through the run. Scroll progress moves a copper pulse along the rail,
   stop by stop; the stop it reaches lights up, its dashed exit (where the customer leaves) fades, and its card shows the moment and the model's line.
   Run height = stage height + stops x --per, all in px, so the page length does not depend on the viewport height. */
.ln-track{padding-bottom:40px}
.ln-run{--stage:470px;--per:250px;position:relative;height:calc(var(--stage) + var(--n) * var(--per));margin-top:48px}
.ln-stage{position:sticky;top:max(90px,calc(50vh - var(--stage) / 2 + 30px));height:var(--stage)}
.ln-rail{position:relative;height:150px}
.ln-rail svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ln-rail .base{fill:none;stroke:#d5ddd6;stroke-width:2;stroke-linecap:round}
.ln-rail .alt{fill:none;stroke:#cdd5cf;stroke-width:1.5;stroke-dasharray:3 7;stroke-linecap:round}
.ln-rail .prog{fill:none;stroke:url(#ln-copper);stroke-width:3;stroke-linecap:round}
.ln-rail .glow{fill:none;stroke:#e6ad7d;stroke-width:14;stroke-linecap:round;opacity:.16;filter:blur(7px)}
.ln-rail .exit{fill:none;stroke:#c9837a;stroke-width:1.5;stroke-dasharray:4 6;stroke-linecap:round;opacity:.75;transition:opacity .48s cubic-bezier(.2,.7,.2,1),stroke .48s}
.ln-rail .exit.is-closed{opacity:.16;stroke:#9aa39d}
.ln-rail .pulse{fill:#fff;stroke:#e6ad7d;stroke-width:3;filter:drop-shadow(0 0 7px rgba(230,173,125,.9))}
.ln-rail .pulse-halo{fill:#ffbd9d;opacity:.25;transform-box:fill-box;transform-origin:center}
.ln-track.is-live .pulse-halo{animation:ln-breathe 4.5s cubic-bezier(.4,0,.2,1) infinite}
@keyframes ln-breathe{0%,100%{transform:scale(1);opacity:.25}50%{transform:scale(1.9);opacity:.06}}
.ln-stops{list-style:none;margin:0;padding:0;position:absolute;inset:0;pointer-events:none}
.ln-stop{position:absolute;top:0;transform:translateX(-50%);pointer-events:auto}
.ln-stop button{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:0;padding:0 4px}
.ln-stop .dot{width:16px;height:16px;border-radius:50%;background:#fafbf7;border:2px solid #b9c3bc;box-sizing:border-box;transition:background .3s,border-color .3s,transform .3s cubic-bezier(.2,.7,.2,1)}
.ln-stop .lab{margin-bottom:12px;font-size:14px;font-weight:500;letter-spacing:-.01em;line-height:1.25;color:#8a938d;text-align:center;white-space:nowrap;transition:color .3s}
.ln-stop.is-lit .dot{border-color:#e6ad7d;background:#e6ad7d}
.ln-stop.is-lit .lab{color:#4c5650}
.ln-stop.is-on .dot{transform:scale(1.25);background:#fff;border-color:#d9956a}
.ln-stop.is-on .lab{color:var(--ink)}
.ln-stop:first-child{transform:translateX(-8px)}
.ln-stop:first-child button{align-items:flex-start;padding-left:0}
.ln-stop:first-child .lab{text-align:left}
.ln-stop:last-child{transform:translateX(calc(-100% + 8px))}
.ln-stop:last-child button{align-items:flex-end;padding-right:0}
.ln-stop:last-child .lab{text-align:right}
.ln-stop button:focus-visible .dot{outline:2px solid var(--green);outline-offset:4px}
.ln-branch{position:absolute;transform:translateX(-50%);font-size:12px;letter-spacing:.01em;color:#8a938d;white-space:nowrap;pointer-events:none}
.ln-branch.down{color:#a8764f;font-weight:500}
.ln-legend{position:absolute;right:0;bottom:6px;display:flex;gap:22px;font-size:12px;color:#8a938d}
.ln-legend i{display:inline-block;width:22px;height:0;margin-right:8px;vertical-align:middle;border-top:2px solid #e6ad7d}
.ln-legend i.x{border-top:1.5px dashed #c9837a}
.ln-cards{list-style:none;margin:36px 0 0;padding:0;position:relative;height:calc(var(--stage) - 186px)}
.ln-card{position:absolute;inset:0 0 auto 0;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px 72px;align-items:start;opacity:0;transform:translateY(12px);transition:opacity .48s cubic-bezier(.2,.7,.2,1),transform .48s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.ln-card.is-on{opacity:1;transform:none;pointer-events:auto}
.ln-card h3{margin-top:12px;font-size:clamp(26px,2.3vw,34px);letter-spacing:-.04em;line-height:1.1}
.ln-card .moment{margin-top:14px;font-size:16px;line-height:1.6;color:var(--muted);max-width:430px}
.ln-card .talk{display:grid;gap:20px;padding-top:4px}
.ln-card .why{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);font-size:15.5px;line-height:1.55;color:#3f4943;max-width:430px}
.ln-card .why small{display:block;font-size:11px;font-weight:550;letter-spacing:.13em;text-transform:uppercase;color:#a8764f;margin-bottom:6px}
/* Reduced motion (or JS off): no sticky, the rail fully drawn, every card in a grid. */
.ln-track.is-static .ln-run{height:auto}
.ln-track.is-static .ln-stage{position:static;height:auto}
.ln-track.is-static .ln-cards{height:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 40px}
.ln-track.is-static .ln-card{position:static;opacity:1;transform:none;grid-template-columns:1fr;gap:18px;border-top:1px solid var(--line);padding-top:22px}
.ln-track.is-static .ln-card h3{font-size:24px}

@media(max-width:960px){
.ln-card{grid-template-columns:1fr;gap:22px}
.ln-track.is-static .ln-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
.ln-sec{padding:64px 0}
.ln-track{padding-bottom:24px}
.ln-run{--stage:640px;--per:190px;margin-top:32px}
.ln-stage{top:max(86px,calc(50vh - var(--stage) / 2 + 36px))}
.ln-rail{height:112px}
.ln-stop .dot{width:13px;height:13px}
.ln-stop .lab{font-size:13px;margin-bottom:10px;opacity:0;transition:none}
.ln-stop.is-on .lab{opacity:1}
.ln-stop:first-child{transform:translateX(-6px)}
.ln-stop:last-child{transform:translateX(calc(-100% + 6px))}
.ln-legend{right:auto;left:0;bottom:0;gap:16px;font-size:11.5px}
.ln-branch{font-size:11px}
.ln-branch.up{display:none}
.ln-cards{margin-top:20px;height:calc(var(--stage) - 132px)}
.ln-card h3{font-size:25px;margin-top:10px}
.ln-card .moment{font-size:15px;margin-top:10px}
.ln-card .why{margin-top:14px;padding-top:12px;font-size:14.5px}
.ln-card .talk{gap:14px}
.ln-say.cust{font-size:16px}
.ln-say.model{font-size:17.5px;padding-left:14px}
.ln-say.event{font-size:14px}
.ln-track.is-static .ln-cards{grid-template-columns:1fr;gap:32px}
}
@media(prefers-reduced-motion:reduce){
.ln-js .ln-rv,.ln-js .ln-dim{opacity:1;transform:none;transition:none}
.ln-card,.ln-stop .dot,.ln-rail .exit{transition:none}
.ln-track .pulse-halo{animation:none}
}