/* ============================================================
   SHIFTSIMPLE — CUSTOMER & PUBLIC PAGES (styles/pages/customer.css)
   ============================================================
   Home, the Find My Simple Deal funnel, results and vehicle cards, the
   Simple Deal receipt, education / How It Works / glossary, and the public
   dealer & lender marketing pages. Loaded on every visit (the public site
   IS the customer domain). */
  /* ---------- HOME ---------- */
  .hero{padding:64px 0 40px;}
  .hero-grid{display:grid;grid-template-columns:1.15fr 0.85fr;gap:56px;align-items:center;}
  .hero h1{font-size:clamp(38px,5.4vw,58px);line-height:1.06;}
  .hero .lede{font-size:18px;color:var(--ink-soft);margin-top:22px;max-width:480px;line-height:1.6;}
  .hero-ctas{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap;}
  .hero-quote{
    margin-top:34px;padding:16px 0 0;border-top:1px solid var(--line);
    font-size:14px;color:var(--ink-soft);max-width:440px;
  }

  .seal{
    position:relative;width:100%;max-width:340px;aspect-ratio:1;margin:0 auto;
  }
  .seal-badge{width:100%;height:100%;object-fit:contain;display:block;}

  /* ---------- "Watch a Short Video" homepage CTA — a standalone graphic
  (not one of the 57 SHIFT_HELPERS roles, no theme variants), sitting
  outside the hero-grid so it never disturbs that grid's two-column
  layout. It sits INWARD, in the open hero whitespace under the Simple
  Deal medallion (centered, nudged toward the medallion column by
  --watch-video-inset), in normal document flow between the hero grid and
  the equation cards — so it can never overlap the headline, lede, CTA,
  medallion, quote, cards or nav, and reflows safely at any width (no
  position:absolute/breakpoint math). ONE shared rule set: every theme
  (Original, Neon Blue, Emerald, Red/Black, RWB, Pink/Purple) lays it out
  identically; --watch-video-size is the single knob for its rendered
  size (roughly half of the original 210px accent). The artwork itself is
  the entire CTA/instruction per the supplied design — no separate "Watch
  Video" label is layered on top of it. */
  .watch-video-cta{
    --watch-video-size:clamp(76px,8.5vw,105px);
    --watch-video-inset:12%;
    display:flex;justify-content:center;align-items:center;margin-top:10px;
    /* The artwork is square, so this is exactly its height: the CTA row
    keeps ONE height whether it shows the artwork (helpers ON) or the
    same button's text label (helpers OFF), so nothing below it moves. */
    min-height:var(--watch-video-size);
  }
  .watch-video-cta-btn{
    display:block;background:none;border:none;padding:0;margin:0 0 0 var(--watch-video-inset);cursor:pointer;
    width:var(--watch-video-size);flex:0 0 auto;
    transition:transform .15s ease;
  }
  .watch-video-cta-btn:hover,.watch-video-cta-btn:focus-visible{transform:translateY(-3px) scale(1.035);}
  .watch-video-cta-btn img{width:100%;height:auto;display:block;object-fit:contain;}
  @media (prefers-reduced-motion: reduce){
    .watch-video-cta-btn{transition:none;}
    .watch-video-cta-btn:hover,.watch-video-cta-btn:focus-visible{transform:none;}
  }
  @media (max-width:768px){
    .watch-video-cta{--watch-video-size:clamp(66px,20vw,88px);--watch-video-inset:0;margin-top:8px;}
  }

  /* ---- "How we got here" — compact, theme-token colored (strong contrast
  in every skin: ink on the card surface), readable at phone width. ---- */
  .hwgh-h{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink);border-bottom:2px solid var(--gold);display:inline-block;padding-bottom:3px;margin-bottom:10px;}
  .hwgh-inline{margin-top:16px;border-top:1px solid var(--line);padding-top:16px;}
  /* Every column and flex child may shrink (minmax(0,1fr), min-width:0) and
  every label and value wraps inside its row: a long label or a long value
  (the modeled-APR line, Spanish labels) never widens the grid past the
  card. A value never shrinks below its longest word, so an amount such as
  "-$4,500" is never split; the label wraps instead. */
  .hwgh{min-width:0;max-width:100%;overflow-wrap:break-word;}
  .hwgh-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 22px;}
  .hwgh-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;min-width:0;border-bottom:1px solid var(--line);padding:5px 0;font-size:13.5px;color:var(--ink);}
  .hwgh-k{flex:1 1 auto;min-width:0;color:var(--ink);opacity:0.82;}
  .hwgh-v{flex:0 1 auto;max-width:62%;font-weight:600;text-align:right;overflow-wrap:break-word;}
  .hwgh-stage-line,.hwgh-gloss,.hwgh-disc{overflow-wrap:break-word;}
  .hwgh-steps{margin:12px 0 0;padding-left:20px;font-size:13.5px;line-height:1.55;color:var(--ink);}
  .hwgh-steps li{margin-bottom:4px;}
  .hwgh-note{font-size:13px;line-height:1.5;color:var(--ink);margin:10px 0 0;}
  .hwgh-stages{list-style:decimal;}
  .hwgh-stage{margin-bottom:8px;}
  .hwgh-stage-k{display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink);font-weight:600;margin-bottom:2px;}
  .hwgh-gloss{font-size:12.5px;line-height:1.6;color:var(--ink);margin:10px 0 0;}
  /* WHAT YOU REQUESTED vs WHAT YOUR DEAL SUPPORTS — side by side, stacked on phones. */
  .rvs-inline{margin-top:16px;border-top:1px solid var(--line);padding-top:16px;}
  .rvs{min-width:0;max-width:100%;overflow-wrap:break-word;}
  .rvs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
  .rvs-col{min-width:0;}
  .rvs-col{border:1px solid var(--line);border-top:3px solid var(--gold);padding:10px 12px;}
  .rvs-col.rvs-sup{border-top-color:var(--pine);}
  .rvs-h{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink);margin-bottom:6px;}
  .rvs-row{display:flex;justify-content:space-between;gap:12px;min-width:0;border-bottom:1px solid var(--line);padding:5px 0;font-size:13.5px;color:var(--ink);}
  .rvs-row:last-child{border-bottom:none;}
  .rvs-k{flex:1 1 auto;min-width:0;opacity:0.82;}
  .rvs-v{flex:0 1 auto;font-weight:600;text-align:right;overflow-wrap:break-word;}
  .rvs-why{font-size:13.5px;line-height:1.55;color:var(--ink);margin-top:10px;}
  .rvs-why p{margin:0 0 6px;}
  @media (max-width:640px){ .rvs-grid{grid-template-columns:minmax(0,1fr);} .rvs-row{font-size:13px;} }
  .hwgh-disc{font-size:12px;line-height:1.45;color:var(--ink);opacity:0.8;margin:8px 0 0;font-style:italic;}
  @media (max-width:640px){ .hwgh-grid{grid-template-columns:minmax(0,1fr);} .hwgh-row{font-size:13px;} }

  /* ---------- ENGINE (Get Matched) ---------- */
  
  
  .results{display:none;}
  .results.show{display:block;}
  
  
  
  
  
  
  

  
  
  
  
  
  
  
  
  
  
  
  
  

  /* ---------- LENDERS ---------- */
  .lender-flow{display:flex;flex-direction:column;gap:0;}
  .flow-step{display:grid;grid-template-columns:26px 1fr;gap:14px;padding:14px 0;border-top:1px solid var(--line);}
  .flow-step:last-child{border-bottom:1px solid var(--line);}
  .flow-step .arrow{color:var(--gold);font-family:'IBM Plex Mono',monospace;}
  .flow-step p{margin:0;font-size:14.5px;color:var(--ink-soft);line-height:1.5;}
  .flow-step b{color:var(--ink);}


  /* ---------- EQUATION (home) ---------- */
  .equation{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;padding:36px 0;}
  .eq-piece{background:var(--white);border:1px solid var(--line);padding:20px 26px;text-align:center;min-width:190px;}
  .eq-piece .eq-title{font-family:'Fraunces',serif;font-size:16px;font-weight:600;}
  .eq-piece .eq-sub{font-size:12.5px;color:var(--ink-soft);margin-top:4px;}
  .eq-op{font-family:'Fraunces',serif;font-size:28px;color:var(--gold);}
  .eq-result{background:var(--pine);color:var(--primary-contrast);border-color:var(--pine);}
  .eq-result .eq-sub{color:var(--on-primary-soft);}

  .sample-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px;}
  .sample-card{background:var(--white);border:1px solid var(--line);padding:18px;}
  .sample-card .veh{font-family:'Fraunces',serif;font-size:15.5px;font-weight:600;}
  .sample-card .price{font-size:13px;color:var(--ink-soft);margin-top:2px;}
  .sample-scores{display:flex;gap:8px;margin-top:12px;}
  .sample-scores span{flex:1;text-align:center;font-size:11.5px;padding:6px 4px;background:var(--paper-dim);color:var(--ink-soft);}
  .sample-scores span b{display:block;font-family:'Fraunces',serif;font-size:16px;color:var(--pine);}

  /* Appearance dropdown at the top of Build Your Simple Deal — see
  #theme-select-inline in view-engine. Inherits the shared select{} rule
  above (border/background/color already themed) but stays a compact,
  right-aligned control rather than the full-width form fields around it. */
  .theme-select-bar{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-bottom:24px;}
  .theme-select-bar label{font-size:13px;font-weight:600;color:var(--ink-soft);}
  .theme-select-bar select{width:auto;min-width:160px;padding:8px 10px;font-size:13.5px;}
  @media (max-width: 480px){
    .theme-select-bar{justify-content:space-between;}
    .theme-select-bar select{min-width:0;flex:1;max-width:200px;}
  }

  /* ---------- FUNNEL ---------- */
  .step-progress{display:flex;gap:6px;margin-bottom:10px;}
  .step-dot{flex:1;height:4px;background:var(--line);border-radius:2px;}
  .step-dot.active{background:var(--pine);box-shadow:var(--glow);}
  .step-dot.done{background:var(--gold);}
  .step-labels{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-soft);margin-bottom:26px;}
  .funnel-panel{display:none;}
  .funnel-panel.active{display:block;}
  .funnel-nav{display:flex;justify-content:space-between;margin-top:26px;gap:12px;}
  .chip-group{display:flex;flex-wrap:wrap;gap:8px;}
  .chip{padding:8px 14px;border:1.5px solid var(--line);border-radius:20px;font-size:13.5px;cursor:pointer;background:var(--white);color:var(--ink-soft);user-select:none;transition:background .12s,color .12s;}
  .chip:hover{border-color:var(--pine);}
  .chip.selected{background:var(--pine);border-color:var(--pine);color:var(--primary-contrast);box-shadow:var(--glow);}
  /* Contradiction prevention: a make picked as "preferred" is struck through and
     unclickable in "don't want" (and the mirror for colors) — see syncChipExclusivity(). */
  .chip.chip-disabled{opacity:.4;cursor:not-allowed;text-decoration:line-through;}
  /* Color pills wear the color they name; a picked one gets a check and a ring. */
  .chip.chip-swatch{background:var(--swatch);color:var(--swatch-ink);border-color:color-mix(in srgb, var(--swatch) 70%, var(--ink));font-weight:600;}
  .chip.chip-swatch:hover{border-color:var(--ink);}
  .chip.chip-swatch.selected{background:var(--swatch);color:var(--swatch-ink);border-color:var(--ink);box-shadow:0 0 0 2px var(--paper), 0 0 0 4px var(--pine);}
  .chip.chip-swatch.selected::before{content:"\2713\00a0";font-weight:700;}
  /* A pill group's own value field: kept for the engine, never shown. */
  .pill-value{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:0 !important;border:0 !important;opacity:0;pointer-events:none;overflow:hidden;clip-path:inset(50%);}
  .form-grid .field.full .chip-group{margin-top:2px;}
  .chip.chip-disabled:hover{border-color:var(--line);}
  /* Tri-state vehicle-feature chips. Must-have reads as a filled chip (same as a
     normal selection) with a check; nice-to-have is deliberately softer — a dashed
     outline with a plus — so the two states are distinguishable by shape, not only
     colour. The marker is a CSS ::before, so a language switch (which only rewrites
     textContent) never erases it. */
  .chip.chip-must{background:var(--pine);border-color:var(--pine);color:var(--primary-contrast);box-shadow:var(--glow);}
  .chip.chip-must::before{content:"\2713\00a0";font-weight:700;}
  .chip.chip-nice{background:var(--paper-dim);border:1.5px dashed var(--pine);color:var(--pine);font-weight:600;}
  .chip.chip-nice::before{content:"+\00a0";font-weight:700;}
  .feature-legend{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:0 0 12px;font-size:12.5px;color:var(--ink-soft);}
  .feature-legend-item{display:inline-flex;align-items:center;gap:6px;}
  .feature-swatch{width:15px;height:15px;border-radius:5px;display:inline-block;}
  .feature-swatch-must{background:var(--pine);border:1.5px solid var(--pine);}
  .feature-swatch-nice{background:var(--paper-dim);border:1.5px dashed var(--pine);}

  .subhead{font-size:14px;font-weight:600;color:var(--ink-soft);margin:22px 0 12px;text-transform:uppercase;letter-spacing:0.4px;}
  .subhead:first-child{margin-top:0;}
  .trade-fields{display:none;}
  .trade-fields.show{display:grid;}
  .disclaimer{font-size:12px;color:var(--ink-soft);background:var(--paper-dim);border:1px solid var(--line);padding:13px 15px;line-height:1.6;margin-top:18px;}
  /* Privacy / consent disclosure (funnel Step 3). Enlarged for legibility and
     given a proper >=44x44 CSS px tap target per WCAG 2.5.5. The visible
     checkbox stays a tidy 24px glyph, but the wrapping .consent-check <label>
     is a full 44x44 touch area that toggles the box; negative margins keep its
     layout footprint ~= the old checkbox so alignment and spacing are preserved
     and the agreement text is never pushed or overlapped. */
  .consent-box{display:flex;gap:10px;align-items:flex-start;margin:18px 0;font-size:15px;color:var(--ink-soft);line-height:1.65;}
  .consent-check{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;min-width:44px;height:44px;min-height:44px;margin:-10px 0 -10px -10px;cursor:pointer;}
  .consent-check input[type="checkbox"]{width:24px;height:24px;margin:0;accent-color:var(--pine);cursor:pointer;}
  .consent-box .consent-text{cursor:pointer;padding-top:2px;}

  .transition-screen{text-align:center;padding:70px 0;}
  .spinner{width:44px;height:44px;border:3px solid var(--line);border-top-color:var(--gold);border-radius:50%;margin:0 auto 22px;animation:spin 0.9s linear infinite;}
  @keyframes spin{to{transform:rotate(360deg);}}
  .transition-screen .t-line{font-family:'Fraunces',serif;font-size:20px;margin-bottom:6px;}
  .transition-screen .t-sub{font-size:13.5px;color:var(--ink-soft);}

  /* ---------- RESULTS / VEHICLE CARDS ---------- */
  .results-summary{background:var(--pine);color:var(--primary-contrast);padding:26px 28px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center;}
  .results-summary .rs-line{font-family:'Fraunces',serif;font-size:18px;}
  .results-summary .rs-sub{font-size:12.5px;opacity:0.75;margin-top:4px;}
  .vehicle-card{background:var(--white);border:1px solid var(--line);margin-bottom:20px;overflow:hidden;}
  .vehicle-card.liked{border-color:var(--money);}
  .vehicle-card.dismissed{opacity:0.4;}
  .photo-placeholder{
    background-color:var(--paper-dim);
    display:flex;align-items:center;justify-content:center;
  }
  /* No-photo artwork: fills the card's full width edge to edge at its own 16:9
     (the box follows the image, so nothing is cropped, squashed or letterboxed);
     caption below. */
  .photo-placeholder.vc-media.vc-no-photo{height:auto;max-height:none;display:block;padding:0;background:none;}
  .vc-no-photo-img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;}
  .vc-no-photo-copy{margin:0;padding:12px 16px 0;text-align:center;font-size:14px;line-height:1.45;color:var(--ink);}
  /* Owner-selected gentle crop: a 2:1 frame keeps photos prominent while
     showing roughly twice the vertical area of the former shallow frames.
     Crop is centered consistently, never adjusted to hide embedded branding. */
  .photo-placeholder.vc-media:not(.vc-no-photo){position:relative;height:auto;max-height:none;aspect-ratio:2/1;display:block;}
  .vc-real-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
  .vc-body{padding:24px 26px;}
  .vc-top{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;}
  .vc-title{font-family:'Fraunces',serif;font-size:22px;font-weight:600;}
  .vc-sub{font-size:13.5px;color:var(--ink-soft);margin-top:4px;}
  .vc-listing{font-size:12.5px;line-height:1.45;}
  .vc-price{font-family:'Fraunces',serif;font-size:23px;color:var(--pine);white-space:nowrap;}
  .score-pair{display:flex;gap:14px;margin-top:18px;}
  .score-chip{flex:1;border:1.5px solid var(--line);padding:14px 10px;text-align:center;}
  .score-chip .pct{font-family:'Fraunces',serif;font-size:27px;color:var(--pine);}
  .score-chip.deal .pct{color:var(--money);}
  .score-chip .lab{font-size:11px;color:var(--ink-soft);letter-spacing:0.5px;margin-top:3px;font-weight:600;}
  .why-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:5px;}
  .why-list li{font-size:13px;color:var(--ink-soft);padding-left:20px;position:relative;line-height:1.4;}
  .why-list li::before{content:'✓';position:absolute;left:0;color:var(--money);font-weight:700;}
  .card-actions{display:flex;gap:10px;margin-top:18px;}
  .card-actions .btn{flex:1;justify-content:center;}
  .liked-tag{font-size:12px;font-weight:600;color:var(--money);margin-top:16px;}

  /* ---------- Homepage intro-video modal — same .modal-backdrop family
  as the theme picker above, styled premium/cream-navy-gold rather than a
  generic black player chrome. The video's own native aspect ratio
  (1344x768) drives the frame via CSS aspect-ratio, so it fills edge to
  edge with no letterbox bars. */
  .video-modal-box{max-width:920px;width:100%;padding:0;border-radius:10px;overflow:hidden;position:relative;box-shadow:0 24px 64px rgba(18,21,26,0.4);}
  .video-modal-x{
    position:absolute;top:14px;right:14px;z-index:2;
    width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;
    background:var(--pine);color:var(--white);font-size:22px;line-height:1;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 2px 10px rgba(18,21,26,0.3);
  }
  .video-modal-x:hover,.video-modal-x:focus-visible{background:var(--gold);color:var(--pine);}
  .video-modal-frame{position:relative;width:100%;aspect-ratio:1344/768;background:#000;}
  .video-modal-frame video{width:100%;height:100%;display:block;}
  .video-modal-footer{padding:14px 22px;background:var(--white);border-top:3px solid var(--gold);font-size:13.5px;color:var(--ink-soft);}

  /* ---------- SHORTLIST BAR ---------- */
  .shortlist-panel{background:var(--white);border:1.5px solid var(--pine);padding:22px 24px;margin-top:8px;}
  .shortlist-panel h3{font-size:17px;margin-bottom:4px;}
  .shortlist-items{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);margin:14px 0;}
  .shortlist-row{background:var(--paper);padding:12px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13.5px;}
  .shortlist-row .rm{background:none;border:none;color:var(--rust);font-size:12px;font-weight:600;}

  /* ---------- EDUCATION SECTION (home) ---------- */
  .edu-io{display:flex;align-items:stretch;justify-content:center;gap:14px;flex-wrap:wrap;margin:34px 0;}
  .edu-card{background:var(--white);border:1px solid var(--line);padding:20px 22px;min-width:150px;flex:1;}
  .edu-card-title{font-family:'Fraunces',serif;font-weight:600;font-size:15px;margin-bottom:10px;letter-spacing:0.3px;}
  .edu-mini-list{list-style:none;margin:0;padding:0;font-size:13px;color:var(--ink-soft);display:flex;flex-direction:column;gap:5px;}
  .edu-mini-list li{padding-left:14px;position:relative;}
  .edu-mini-list li::before{content:'—';position:absolute;left:0;color:var(--gold);}
  .edu-result{background:var(--pine);color:var(--primary-contrast);border-color:var(--pine);display:flex;align-items:center;justify-content:center;text-align:center;}
  .edu-result .edu-card-title{color:var(--primary-contrast);margin-bottom:0;}
  .myth-box{background:var(--paper-dim);border-left:4px solid var(--gold);padding:24px 26px;margin-top:30px;}
  .myth-box .myth-q{font-family:'Fraunces',serif;font-size:19px;margin-bottom:10px;}
  .myth-box p{color:var(--ink-soft);font-size:14.5px;line-height:1.6;margin:0 0 10px;}
  .myth-box p:last-child{margin-bottom:0;}
  .myth-box .payoff{color:var(--ink);font-weight:600;}

  /* ---------- HOW IT WORKS teaser (home) + full page ---------- */
  .hiw-teaser{background:var(--white);border:1px solid var(--line);padding:28px 30px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:32px;}
  .hiw-teaser p{margin:0;font-size:14.5px;color:var(--ink-soft);max-width:520px;}

  /* ---------- "How Car Buying Actually Works" canonical lesson ---------- */
  .hiw-lesson p{margin:0 0 16px;}
  .hiw-lesson-h{font-family:'Fraunces',serif;font-weight:600;font-size:21px;color:var(--ink);margin:40px 0 14px;}
  .hiw-lesson-h:first-child{margin-top:8px;}
  .hiw-formula{font-family:'IBM Plex Mono',monospace;font-size:14px;line-height:1.7;background:var(--paper-dim);border:1px solid var(--line);border-radius:2px;padding:14px 18px;margin:0 0 16px;color:var(--ink);}
  .hiw-callout{font-family:'IBM Plex Mono',monospace;font-weight:700;letter-spacing:0.3px;font-size:14.5px;color:var(--ink);border-left:3px solid var(--gold);padding:2px 0 2px 16px;margin:0 0 16px;}

  /* ---------- Parts 1-5 — one centered reading column (the view's first
  .wrap is the 760px column Privacy/Terms use). Each Part is the overlay
  host for its helper, which sits in the page gutter beside it
  (HELPER_PLACEMENTS rail-left/rail-right) — the helper never takes a
  column, so the copy is laid out identically with helpers on or off. Reuses
  the existing .hiw-formula/.hiw-callout treatments inside each part. ---------- */
  .hiw-section{position:relative;margin:0 0 56px;}
  .hiw-compare{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 16px;}
  .hiw-compare-item{background:var(--paper-dim);border:1px solid var(--line);border-radius:2px;padding:12px 14px;font-size:13.5px;line-height:1.5;}
  .hiw-compare-item b{display:block;font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:0.4px;color:var(--gold);text-transform:uppercase;margin-bottom:4px;}
  .hiw-list{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:6px;}
  .hiw-list li{padding-left:18px;position:relative;font-size:14px;line-height:1.5;}
  .hiw-list li::before{content:'';position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--gold);}
  .hiw-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 16px;}
  .hiw-mini-grid .hiw-compare-item{grid-column:span 1;}
  @media (max-width:480px){ .hiw-mini-grid{grid-template-columns:1fr;} }
  @media (max-width:480px){ .hiw-compare{grid-template-columns:1fr;} }

  /* ---------- Form-with-art hosts (funnel Step 1 / Step 3, glossary
  intro): the form/intro owns its full column; its helper is an overlay on
  the outer rail (see HELPER_PLACEMENTS), never a column beside it. ---------- */
  .form-with-art{position:relative;display:block;}
  .form-with-art-body{min-width:0;}

  /* ---------- "How ShiftSimple Works" — six polished process cards,
  replacing the previous bare numbered list (.lender-flow is untouched
  elsewhere; this page now uses its own card grid instead). ---------- */
  .hiw-process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:52px;}
  .hiw-process-card{position:relative;background:var(--white);border:1px solid var(--line);padding:22px 18px;display:flex;flex-direction:column;align-items:center;text-align:center;}
  .hiw-process-num{font-family:'IBM Plex Mono',monospace;color:var(--gold);font-size:12px;font-weight:700;letter-spacing:0.5px;margin-bottom:6px;}
  .hiw-process-card h4{font-family:'Fraunces',serif;font-weight:600;font-size:16px;margin:0 0 8px;color:var(--ink);}
  .hiw-process-card p{margin:0;font-size:13.5px;color:var(--ink-soft);line-height:1.55;}
  @media (max-width:860px){ .hiw-process-grid{grid-template-columns:1fr 1fr;} }
  @media (max-width:560px){ .hiw-process-grid{grid-template-columns:1fr;} }

  /* ---------- FINAL CTA ---------- */
  .final-cta{background:var(--pine);color:var(--primary-contrast);padding:64px 0;text-align:center;}
  .final-cta .eyebrow{color:var(--on-primary-soft);}
  .final-cta h2{font-size:clamp(26px,4vw,36px);color:var(--primary-contrast);max-width:640px;margin:0 auto;}
  .final-cta p{color:var(--on-primary-soft);margin-top:14px;font-size:15.5px;}
  .final-cta .btn{margin-top:26px;}

  /* ---------- GLOSSARY TERM LINKS ---------- */
  .gloss-link{color:var(--pine);border-bottom:1.5px dotted var(--gold);text-decoration:none;cursor:pointer;}
  .gloss-link:hover{color:var(--gold);}

  /* ---------- CAR BUYING, TRANSLATED (glossary page) ----------
     Compact chip-index architecture: term NAMES render as small inline
     buttons; at most one definition (.gloss-detail) is ever expanded into
     the DOM at a time (see selectedGlossTermId in renderGlossary()). This
     replaced an always-fully-expanded grid of ~235 cards that made this
     page's document height dramatically larger than any other view in the
     app — see BLANKSPACE_SCROLL_BUG.md for why that mattered structurally,
     not just cosmetically. ---------- */
  .gloss-search{width:100%;max-width:440px;padding:14px 16px;border:1.5px solid var(--pine);font-size:15px;margin-top:8px;}
  .gloss-category{font-size:13px;font-weight:700;letter-spacing:0.6px;text-transform:uppercase;color:var(--gold);margin:30px 0 12px;}
  .gloss-category:first-of-type{margin-top:20px;}
  .gloss-chip-row{display:flex;flex-wrap:wrap;gap:8px;}
  .gloss-chip{font-family:inherit;font-size:13.5px;font-weight:500;color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:20px;padding:7px 14px;cursor:pointer;transition:border-color .12s,background .12s;}
  .gloss-chip:hover{border-color:var(--pine);}
  .gloss-chip:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;}
  .gloss-chip.active{background:var(--pine);border-color:var(--pine);color:var(--primary-contrast);font-weight:600;}
  .gloss-detail{background:var(--white);border:1px solid var(--line);border-left:3px solid var(--gold);padding:18px 22px;margin:10px 0 18px;scroll-margin-top:100px;}
  .gloss-detail.flash{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft);}
  .gloss-detail .g-term{font-family:'Fraunces',serif;font-size:17px;font-weight:600;margin-bottom:8px;}
  .gloss-detail .g-label{font-size:10.5px;font-weight:700;letter-spacing:0.5px;color:var(--ink-soft);text-transform:uppercase;margin-top:10px;}
  .gloss-detail .g-text{font-size:13.5px;color:var(--ink-soft);line-height:1.55;margin-top:3px;}
  .gloss-empty{padding:40px 0;color:var(--ink-soft);}

  /* ---------- Frequently Confused Terms (glossary page, always visible,
     collapsed by default) — native <details>/<summary> disclosures so
     each pair opens independently with zero custom ARIA/state. ---------- */
  .confused-terms-list{display:flex;flex-direction:column;gap:6px;}
  .confused-term-row{background:var(--paper-dim);border:1px solid var(--line);padding:12px 18px;}
  .confused-term-row[open]{padding-bottom:16px;}
  .confused-term-row .g-text{font-size:13.5px;color:var(--ink-soft);line-height:1.55;margin-top:10px;}
  .ct-pair{font-family:'Fraunces',serif;font-size:15px;font-weight:600;display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;cursor:pointer;list-style:none;}
  .ct-pair::-webkit-details-marker{display:none;}
  .ct-pair::before{content:'+';color:var(--gold);font-weight:700;width:14px;flex:none;}
  .confused-term-row[open] .ct-pair::before{content:'−';}
  .ct-neq{color:var(--gold);font-weight:700;}
  .ct-b{color:var(--ink-soft);}

  /* ---------- BIG RESULTS PAYOFF ---------- */
  .results-big{background:var(--pine);color:var(--primary-contrast);padding:40px 34px;}
  .results-big .eyebrow{color:var(--on-primary-soft);}
  .results-big .amt-big{font-family:'Fraunces',serif;font-size:clamp(34px,6vw,58px);font-weight:600;color:var(--on-primary-accent);line-height:1.05;margin-top:6px;}
  .results-big .amt-note{font-size:13.5px;opacity:var(--on-primary-note-opacity);margin-top:10px;}
  /* Negative equity, right under the range (renderEnvelopeDisplay). */
  .results-big .ne-explain{margin-top:14px;padding:12px 14px;border:1px solid rgba(241,242,237,0.28);border-radius:var(--radius);max-width:520px;}
  .results-big .ne-line{margin:0;font-size:16px;font-weight:500;line-height:1.4;color:var(--on-primary-accent);}
  .results-big .ne-line .ne-total{font-weight:700;white-space:nowrap;}
  .results-big .ne-cap{margin:6px 0 0;font-size:13px;line-height:1.45;opacity:var(--on-primary-note-opacity);}
  .results-big .count-line{margin-top:20px;padding-top:20px;border-top:1px solid rgba(241,242,237,0.2);font-size:16px;}
  .results-big .count-line b{color:var(--on-primary-accent);font-family:'Fraunces',serif;font-size:19px;}
  .results-big .count-line.count-line-secondary{margin-top:14px;padding-top:0;border-top:none;font-size:14px;opacity:0.9;}
  /* Negative-equity value position — one horizontal line under the range (wraps on narrow screens). */
  .results-big .nevp-line{margin-top:10px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:14px;line-height:1.4;}
  .results-big .nevp-k{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--on-primary-soft);}
  .results-big .nevp-eq{white-space:nowrap;}
  .results-big .nevp-eq b{color:var(--on-primary-accent);}
  .results-big .nevp-cap{font-size:12.5px;opacity:var(--on-primary-note-opacity);}
  .results-big .nevp-gap{flex-basis:100%;font-size:13.5px;line-height:1.45;font-weight:600;}
  @media (max-width:640px){ .results-big .nevp-eq{white-space:normal;} }
  .results-big .count-line .count-line-note{margin-top:8px;font-size:13.5px;line-height:1.5;opacity:0.9;}
  /* Evaluated vehicles that do not fit as entered (renderDealAlternatives):
  the same card, without match scores or lender lines, marked as not a fit,
  with the obstacle and the possible changes. Theme tokens only. */
  .deal-alts{margin-top:28px;min-width:0;}
  .deal-alts .alt-tally{font-size:14px;font-weight:600;color:var(--ink);margin:0 0 6px;overflow-wrap:break-word;}
  .deal-alts .alt-note,.deal-alts .alt-intro,.deal-alts .alt-foot{font-size:13px;line-height:1.5;color:var(--ink-soft);margin:0 0 12px;overflow-wrap:break-word;}
  .deal-alts .alt-foot{font-style:italic;}
  .deal-alts .alt-group{margin-top:18px;}
  .alt-card .vc-media{max-height:220px;}
  .alt-card .vc-head{min-width:0;flex:1 1 200px;}
  .alt-card .alt-badge{display:inline-block;margin-top:12px;padding:3px 9px;border:1px solid var(--line);font-size:11.5px;font-weight:600;letter-spacing:0.4px;color:var(--ink);background:var(--paper-dim);}
  .alt-card .alt-label{font-size:11.5px;font-weight:600;color:var(--ink-soft);margin-top:14px;letter-spacing:0.4px;}
  .alt-card .why-list li{overflow-wrap:break-word;}
  .deal-alts .alt-more{margin:0 0 12px;}
  .vehicle-card .vc-adjusted{margin-top:10px;font-weight:600;color:var(--ink);}
  .results-topbar{display:flex;justify-content:flex-end;margin-top:14px;}
  .financing-paths-summary{background:var(--white);border:1px solid var(--line);padding:22px 24px;margin-top:20px;}
  .financing-paths-summary .fp-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:1px;color:var(--gold);font-weight:600;margin-bottom:8px;}
  .financing-paths-summary .fp-headline{font-family:'Fraunces',serif;font-size:16.5px;margin-bottom:14px;}
  .fp-list{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:14px;}
  .fp-row{background:var(--paper);padding:11px 14px;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13.5px;}
  .fp-row .fp-name{font-weight:600;}
  .fp-row .fp-tag{font-size:11.5px;color:var(--ink-soft);white-space:nowrap;}
  /* A long figure (or a translated label) drops under its label on a narrow
     screen instead of pushing past the right edge. */
  .fp-row:not(.fp-note){flex-wrap:wrap;}
  @media (max-width:480px){ .fp-row .fp-tag{white-space:normal;overflow-wrap:anywhere;min-width:0;max-width:100%;} }
  .fp-row.fp-note{display:block;font-size:12.5px;color:var(--ink-soft);}
  .fp-disclaimer{font-size:12px;color:var(--ink-soft);line-height:1.5;margin:0;}

  /* ---------- REDESIGNED VEHICLE CARD MEDIA ---------- */
  .vc-media{height:190px;}

  /* ---- Page 2: Your Simple Deal (receipt) ---- */
  .sd-value{font-family:'Fraunces',serif;font-size:17px;color:var(--pine);margin-top:2px;}
  .sd-match-card{margin-bottom:16px;}

  /* Find My Simple Deal — returning customer (reference-ID recovery) first,
  then a "New customer?" heading directly above the form. */
  .returning-deal{
    background:var(--white);border:1.5px solid var(--line);border-left:6px solid var(--gold);border-radius:6px;
    padding:16px 20px 14px;margin-bottom:16px;box-shadow:0 4px 16px rgba(18,21,26,0.07);
  }
  .returning-deal-eyebrow{margin:0 0 4px;font-size:11px;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-soft);}
  .returning-deal-title{margin:0 0 4px;font-family:'Fraunces',serif;font-weight:600;font-size:clamp(18px,2.6vw,21px);line-height:1.2;color:var(--ink);}
  .returning-deal-body{margin:0 0 12px;font-size:13.5px;line-height:1.5;color:var(--ink-soft);}
  .returning-deal-form{display:grid;grid-template-columns:1fr 1.25fr auto;gap:10px;align-items:end;}
  .returning-deal-form .field{margin:0;}
  .returning-deal-btn{min-height:46px;justify-content:center;white-space:nowrap;font-weight:700;border-color:var(--accent-contrast);}
  .returning-deal-status{margin:10px 0 0;padding:10px 12px;border-radius:4px;font-size:14px;line-height:1.5;color:var(--ink);background:var(--paper-dim);}
  .returning-deal-status.is-error{border-left:4px solid var(--rust);}
  .returning-deal-status.is-success{border-left:4px solid var(--pine);}
  .returning-deal-hint{margin:8px 0 0;font-size:12px;line-height:1.5;color:var(--ink-soft);}
  .new-customer-head{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;margin:4px 0 16px;font-size:14.5px;color:var(--ink-soft);}
  .new-customer-title{font-weight:800;color:var(--ink);}
  @media (max-width:760px){
    /* Phones: a full-width band (gold top rule) rather than a padded card, so
    its inputs span the screen like every other form on the site. */
    .returning-deal{padding:12px 0 14px;border:none;border-top:4px solid var(--gold);border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;background:transparent;}
    .returning-deal-form{grid-template-columns:1fr;gap:8px;}
    .returning-deal-btn{width:100%;min-height:48px;}
  }

  /* Existing Reference ID — the nav dropdown that replaced the returning-
  customer card. The toggle is a normal nav tab with a caret; the panel is a
  viewport-fixed sheet (top/left/width set by toggleRefLookup from the
  toggle's position, so it never clips and tracks the nav at every width). */
  .nav-ref{display:inline-flex;}
  .nav-ref-toggle::after{content:"";display:inline-block;margin-left:5px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;vertical-align:middle;transition:transform .15s ease;}
  .nav-ref-toggle[aria-expanded="true"]{background:var(--pine);color:var(--primary-contrast);}
  .nav-ref-toggle[aria-expanded="true"]::after{transform:rotate(180deg);}
  .nav-ref-panel{
    position:fixed;z-index:70;top:72px;right:16px;width:min(360px,calc(100vw - 24px));
    background:var(--white);border:1.5px solid var(--line);border-left:6px solid var(--gold);border-radius:8px;
    box-shadow:0 12px 34px rgba(18,21,26,0.20);padding:16px 18px 14px;
  }
  .nav-ref-panel[hidden]{display:none;}
  .nav-ref-panel .returning-deal-eyebrow{margin:0 0 4px;}
  .nav-ref-panel .returning-deal-title{margin:0 0 4px;font-size:18px;}
  .nav-ref-panel .returning-deal-body{margin:0 0 12px;}
  .nav-ref-panel .returning-deal-form{display:grid;grid-template-columns:1fr;gap:10px;align-items:stretch;}
  .nav-ref-panel .returning-deal-btn{width:100%;min-height:46px;}

  /* Engine branded character — a small ShiftSimple character inline beside the
  "What do you want?" heading (ad-to-engine continuity). In normal flow, never
  an overlay; collapses to nothing when no character resolves. */
  .engine-step1-head{display:flex;align-items:center;gap:14px;}
  .engine-step1-head-text{flex:1 1 auto;min-width:0;}
  .engine-character{flex:0 0 auto;width:72px;height:72px;display:flex;align-items:center;justify-content:center;}
  .engine-character:empty{display:none;}
  .engine-character-img{width:72px;height:72px;object-fit:contain;display:block;}
  @media (max-width:560px){
    .engine-step1-head{gap:10px;}
    .engine-character,.engine-character-img{width:56px;height:56px;}
  }

  /* Send My Simple Deal — the final, most important action of the journey.
  A completion panel: a header band in the theme's primary colour (navy in
  the original theme) carrying the "Final step" badge and title, a gold rule,
  then a light body with the destination, the explanation and a full-width
  accent button (gold with a navy edge in the original theme; each theme's
  own --gold / --accent-contrast pair elsewhere) and the legal line. The
  button spans the panel at every width, so no width is left unused. */
  .sd-send-panel{
    position:relative;background:var(--white);border:1.5px solid var(--pine);border-radius:6px;
    overflow:hidden;box-shadow:0 10px 30px rgba(18,21,26,0.16);
  }
  .sd-send-head{background:var(--pine);color:var(--primary-contrast);padding:20px 24px 18px;border-bottom:4px solid var(--gold);}
  .sd-send-step{
    display:inline-block;margin:0 0 10px;padding:4px 11px;border-radius:999px;
    border:1.5px solid currentColor;color:var(--primary-contrast);
    font-size:11.5px;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;
  }
  .sd-send-title{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(22px,3.4vw,29px);line-height:1.2;color:var(--primary-contrast);margin:0;}
  .sd-send-dest{margin:18px 24px 6px;font-size:14.5px;font-weight:700;color:var(--ink);}
  .sd-send-explain{margin:0 24px 18px;font-size:14px;line-height:1.6;color:var(--ink-soft);}
  .sd-send-action{position:relative;padding:0 24px 20px;}
  .sd-send-btn{
    display:flex;width:100%;justify-content:center;align-items:center;text-align:center;
    min-height:68px;padding:18px 24px;font-size:19px;font-weight:800;line-height:1.25;letter-spacing:0.01em;
    border-width:2px;border-color:var(--accent-contrast);border-radius:4px;box-shadow:0 6px 18px rgba(18,21,26,0.25);
  }
  .sd-send-legal{margin:12px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-soft);text-align:center;}
  .sd-send-legal a{color:inherit;text-decoration:underline;}
  @media (min-width:641px){
    .sd-send-head{padding:24px 32px 20px;}
    .sd-send-dest{margin:22px 32px 6px;font-size:15px;}
    .sd-send-explain{margin:0 32px 20px;font-size:14.5px;}
    .sd-send-action{padding:0 32px 26px;}
    .sd-send-btn{min-height:74px;font-size:21px;}
  }
  @media (max-width:640px){
    .sd-send-head{padding:18px 16px 16px;}
    .sd-send-dest{margin:16px 16px 6px;}
    .sd-send-explain{margin:0 16px 16px;}
    .sd-send-action{padding:0 16px 18px;}
  }
  /* While the send section is on screen, the fixed language / appearance
  controls (bottom-right corner) step aside: on a phone they covered the
  right side of the button whenever it sat low on the screen, so a tap there
  hit "EN" — no visible effect, nothing sent. The class is set on those two
  controls by watchSendSectionForFloatingControls(). */
  .yields-to-send{opacity:0;visibility:hidden;pointer-events:none;}

  #customer-print-doc{display:none;}

  /* Phone-width override for .theme-select-bar (was shared with .pref-row in one
  media block); kept after the rules above so the cascade is unchanged. */
  @media (max-width:600px){ .theme-select-bar{flex-wrap:wrap;} }

  /* Tablet-and-below overrides (max-width:860px) for the rules above — kept in
  this file, after them, so the cascade is exactly what it was when they all
  lived in one shared media block. */
  @media (max-width:860px){
    .sample-grid{grid-template-columns:1fr;}
    .equation{flex-direction:column;}
    .hero-grid{grid-template-columns:1fr;}
    .seal{max-width:220px;order:-1;}
    .edu-io{flex-direction:column;}
    .vc-media{height:120px;}
    .results-big{padding:28px 22px;}
  }

  /* ---------- One last step: refine the deal (post-Full-Lead credit-history
  questions — src/customer/deal-refine.js). Same card / chip / button
  vocabulary as the rest of My Simple Deal, theme tokens only. ---------- */
  .deal-refine{border-top:3px solid var(--gold);}
  .deal-refine-title{font-family:'Fraunces',serif;font-weight:600;font-size:21px;color:var(--ink);margin:6px 0 8px;}
  .deal-refine-intro{font-size:14.5px;color:var(--ink-soft);line-height:1.6;margin:0 0 14px;max-width:640px;}
  .deal-refine-working{font-size:14px;color:var(--ink-soft);margin-top:10px;}
  .deal-refine-subhead{font-weight:600;font-size:15px;color:var(--ink);margin:18px 0 4px;}
  .deal-refine-subintro{font-size:13.5px;color:var(--ink-soft);line-height:1.55;margin:0 0 10px;max-width:640px;}
  .chip-group-stack{flex-direction:column;align-items:flex-start;}
  .chip-group-stack .chip{text-align:left;}
  #deal-refine .field input[type=number]{width:100%;max-width:220px;}
  /* The FINAL Simple Deal's deal structure (src/customer/deal-terms.js). */
  .sd-deal-terms .dt-section{margin-top:18px;border-top:1px solid var(--line);padding-top:14px;}
  .sd-deal-terms p{font-size:14px;line-height:1.55;margin:6px 0;color:var(--ink);}
  .sd-deal-terms .dt-sub{font-size:12.5px;color:var(--ink-soft);line-height:1.5;}
  .sd-deal-terms p.dt-sub{margin:4px 0;}
  .sd-deal-terms .dt-muted{color:var(--ink-soft);font-size:13px;}
  .sd-deal-terms .dt-est{font-size:12px;color:var(--ink-soft);margin-top:3px;font-style:italic;}
  .sd-deal-terms .dt-unknown{padding:10px 12px;border:1px dashed var(--line);border-radius:8px;}
  .sd-deal-terms .dt-lead-reason{font-weight:600;}
  .sd-deal-terms .dt-faster{margin:8px 0 12px;padding:8px 12px;border-left:3px solid var(--gold);}
  .sd-deal-terms .dt-faster p{margin:4px 0;font-size:13.5px;line-height:1.5;}
  .sd-deal-terms .dt-confirm{font-size:13px;color:var(--ink-soft);}
  .dt-table-wrap{overflow-x:auto;margin:10px 0 6px;-webkit-overflow-scrolling:touch;}
  .dt-table{border-collapse:collapse;font-size:13.5px;min-width:560px;width:100%;}
  .dt-table th,.dt-table td{text-align:left;padding:7px 10px 7px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink);}
  .dt-table th{font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;}
  .dt-table tr.dt-lead td{border-bottom:2px solid var(--gold);}
  .dt-table tr.dt-lead td:first-child{box-shadow:inset 3px 0 0 var(--gold);padding-left:8px;}
  .dt-badge{display:inline-block;margin-top:3px;font-size:10.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--gold);}
  @media (max-width:640px){
    .dt-table{min-width:0;}
    .dt-table thead{display:none;}
    .dt-table,.dt-table tbody,.dt-table tr,.dt-table td{display:block;width:100%;}
    .dt-table tr{border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin-bottom:10px;}
    .dt-table td{border-bottom:0;padding:3px 0;}
    .dt-table td[data-label]::before{content:attr(data-label);display:block;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;}
    .dt-table tr.dt-lead{border:2px solid var(--gold);}
    .dt-table tr.dt-lead td{border-bottom:0;}
    .dt-table tr.dt-lead td:first-child{box-shadow:none;padding-left:0;}
    .dt-table td.dt-na{display:none;}
    .dt-table .dt-badge{display:block;}
  }
  .deal-refine-footnote{font-size:13px;color:var(--ink-soft);margin-top:10px;}
  .deal-refine-compare-wrap{overflow-x:auto;margin:10px 0 4px;}
  .deal-refine-compare{border-collapse:collapse;font-size:14px;min-width:280px;}
  .deal-refine-compare th,.deal-refine-compare td{text-align:left;padding:5px 14px 5px 0;border-bottom:1px solid var(--line);color:var(--ink);}
  .deal-refine-compare th{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;}
  .deal-refine-compare tr.changed td{font-weight:600;}
  /* The FINAL Simple Deal (regenerated from the second engine pass). */
  /* FURTHER REVIEW status: an OPAQUE light panel with fixed dark text, so it
  reads the same on the navy / dark / bright primary block of EVERY theme
  (red #9b0019 on #fff4f5 ≈ 7.6:1, #1a1a1a on #fff4f5 ≈ 16:1 — WCAG AA). */
  .sd-review-banner{margin-top:10px;padding:12px 14px;border:2px solid #b00020;border-radius:8px;background:#fff4f5;color:#1a1a1a;}
  .sd-review-banner .eyebrow{color:#9b0019;}
  .sd-review-banner p{font-size:14px;line-height:1.5;margin:6px 0 0;color:#1a1a1a;}
  .results-big .sd-final-banner p{color:var(--primary-contrast);}
  /* The stage line on the dark results block: light text, never the page's soft ink. */
  .results-big .deal-stage-note{color:var(--primary-contrast);opacity:.92;}
  .deal-stage-note.is-review{color:var(--review-accent);font-weight:600;}
  .sd-under-review .sd-value{opacity:.85;}
  .sd-final-group[data-group="review"] .sd-final-group-title{color:var(--review-accent);}
  .sd-final-banner{margin-top:10px;padding:10px 14px;border:1px solid var(--gold);border-radius:8px;}
  .sd-final-banner .eyebrow{color:var(--gold);}
  .sd-final-banner p{font-size:14px;margin:4px 0 0;color:var(--ink);}
  .sd-final-changes{margin-top:14px;border-top:1px solid var(--line);padding-top:10px;}
  .sd-final-changes > summary{cursor:pointer;font-weight:600;font-size:14.5px;color:var(--ink);}
  .sd-final-group{margin-top:10px;}
  .sd-final-group-title{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;}
  /* While the second pass runs, the preliminary deal is visibly being replaced. */
  .sd-receipt.sd-regenerating > :not(#deal-refine){opacity:.35;pointer-events:none;transition:opacity .2s;}
  .deal-stage-note{font-size:13px;color:var(--ink);opacity:.85;margin:10px 0 0;}
  /* Step 2: the structure preference, asked before the first result. */
  .structure-pref{margin-top:18px;}
  .structure-pref-intro{font-size:13.5px;color:var(--ink-soft);line-height:1.55;margin:0 0 10px;max-width:640px;}
  /* Term options: an unpublished lender rate shows the labeled ShiftSimple estimate as a readable line, never a broken cell. */
  .sd-deal-terms .dt-est-main{font-size:13px;color:var(--ink);margin-top:3px;}

/* The questionnaire's save-failure state (deal-refine.js showDealFinalizationFailure): answers kept, Try again. */
.deal-refine-error{margin-top:12px;padding:12px 14px;border:1.5px solid var(--rust);border-radius:10px;font-size:14.5px;line-height:1.5;}

  /* ============================================================
     SIMPLE RESULTS — the customer results page and the Simple Deal
     ============================================================
     A softer, more rounded reading face (Figtree) for the customer's
     results only, comfortable 16–18px explanations, clear headings and
     visibly separated routes. Every colour is a theme token, so each skin
     keeps its contrast; the beige/gold/navy identity (the navy result block,
     the gold accents, the Fraunces figure) is unchanged. */
  #results, .sd-receipt{font-family:'Figtree','IBM Plex Sans',sans-serif;}
  #results .mono, .sd-receipt .mono{font-family:'IBM Plex Mono',monospace;}
  #results .results-big .amt-note{font-size:15px;line-height:1.5;}
  #results .results-big .amt-note[data-insufficient="1"]{opacity:1;font-weight:700;}
  #results .rvs, .sd-receipt .rvs{border-radius:calc(var(--radius) + 8px);}
  #results .rvs-col, .sd-receipt .rvs-col{border-radius:calc(var(--radius) + 6px);padding:12px 14px;}
  #results .rvs-row, .sd-receipt .rvs-row{font-size:15px;padding:7px 0;font-variant-numeric:tabular-nums;}
  #results .rvs-k, .sd-receipt .rvs-k{opacity:1;color:var(--ink-soft);}
  #results .rvs-why, .sd-receipt .rvs-why{font-size:15.5px;line-height:1.6;}
  @media (max-width:640px){ #results .rvs-row, .sd-receipt .rvs-row{font-size:14.5px;} }

  .deal-meaning{background:var(--card-bg);color:var(--ink);border:1px solid var(--line);border-left:6px solid var(--gold);border-radius:calc(var(--radius) + 10px);padding:24px 26px 20px;margin-top:16px;box-shadow:0 2px 10px var(--shadow);}
  .deal-meaning[data-meaning-state="WORKS"]{border-left-color:var(--money);}
  .deal-meaning[data-meaning-state="NO_ROUTE"]{border-left-color:var(--warning);}
  .deal-meaning .dm-eyebrow{font-size:12px;letter-spacing:0.12em;font-weight:500;color:var(--ink-soft);}
  .deal-meaning .dm-headline{font-family:inherit;font-size:clamp(22px,3.2vw,27px);font-weight:700;line-height:1.25;color:var(--ink);margin:8px 0 10px;letter-spacing:-0.01em;}
  .deal-meaning .dm-reason{font-size:17.5px;line-height:1.6;margin:0 0 12px;color:var(--ink);}
  .deal-meaning .dm-paynote{font-size:16px;line-height:1.55;margin:0 0 12px;color:var(--ink);}
  .deal-meaning .dm-routes-title{font-size:16.5px;font-weight:600;margin:16px 0 10px;color:var(--ink);}
  .deal-meaning .dm-routes{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
  .deal-meaning .dm-route{display:flex;gap:14px;align-items:flex-start;background:var(--paper-dim);border:1px solid var(--line);border-radius:calc(var(--radius) + 8px);padding:14px 16px;}
  .deal-meaning .dm-num{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:999px;border:2px solid var(--gold);background:var(--card-bg);color:var(--ink);font-weight:700;font-size:16px;font-variant-numeric:tabular-nums;}
  .deal-meaning .dm-route-body{min-width:0;display:block;}
  .deal-meaning .dm-route-title{display:block;font-weight:700;font-size:17.5px;line-height:1.35;color:var(--ink);}
  .deal-meaning .dm-route-detail{display:block;font-size:16px;line-height:1.55;margin-top:3px;color:var(--ink);font-variant-numeric:tabular-nums;}
  .deal-meaning .dm-cond{display:inline-block;margin-left:6px;padding:1px 9px;border:1px solid var(--ink-soft);border-radius:999px;font-size:12.5px;font-weight:600;color:var(--ink);vertical-align:2px;}
  .deal-meaning .dm-next{font-size:16px;line-height:1.55;margin:14px 0 0;color:var(--ink);}
  .deal-meaning .dm-foot{font-size:14.5px;line-height:1.5;margin:10px 0 0;color:var(--ink-soft);}
  @media (max-width:640px){
    .deal-meaning{padding:20px 16px 16px;}
    .deal-meaning .dm-reason{font-size:17px;}
    .deal-meaning .dm-route{padding:12px 12px;gap:12px;}
    .deal-meaning .dm-num{width:36px;height:36px;font-size:15px;}
  }

  /* "Don't love your results?" — the adjustment assistant above Start over
     (src/customer/adjust-assistant.js). Conversational, never an error state:
     the deal-meaning card's surface with a neutral accent. */
  .adjust-assistant{background:var(--card-bg);color:var(--ink);border:1px solid var(--line);border-radius:calc(var(--radius) + 10px);padding:22px 24px 18px;margin-top:16px;box-shadow:0 2px 10px var(--shadow);}
  .adjust-assistant .adj-title{font-size:clamp(21px,3vw,25px);font-weight:700;line-height:1.25;margin:0 0 6px;color:var(--ink);letter-spacing:-0.01em;}
  .adjust-assistant .adj-sub{font-size:16.5px;line-height:1.55;margin:0 0 14px;color:var(--ink);}
  .adjust-assistant .adj-status{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;background:var(--paper-dim);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:calc(var(--radius) + 6px);padding:10px 14px;margin:0 0 14px;font-size:15.5px;line-height:1.45;}
  .adjust-assistant .adj-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;}
  .adjust-assistant .adj-choice{display:flex;align-items:center;gap:12px;min-height:56px;width:100%;text-align:left;padding:12px 14px;border:1.5px solid var(--line);border-radius:calc(var(--radius) + 8px);background:var(--paper-dim);color:var(--ink);font:inherit;font-size:16.5px;font-weight:600;line-height:1.3;cursor:pointer;}
  .adjust-assistant .adj-choice:hover{border-color:var(--pine);}
  .adjust-assistant .adj-choice:focus-visible,.adjust-assistant .adj-pill:focus-visible,.adjust-assistant .adj-pref:focus-visible{outline:3px solid var(--gold);outline-offset:2px;}
  .adjust-assistant .adj-choice.selected{border-color:var(--pine);background:var(--card-bg);box-shadow:var(--glow);}
  .adjust-assistant .adj-choice-num{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:999px;border:2px solid var(--gold);background:var(--card-bg);font-weight:700;font-size:15px;font-variant-numeric:tabular-nums;}
  .adjust-assistant .adj-panel{margin-top:16px;border-top:1px solid var(--line);padding-top:14px;}
  .adjust-assistant .adj-prompt,.adjust-assistant .adj-line{font-size:16.5px;line-height:1.55;margin:0 0 12px;color:var(--ink);font-variant-numeric:tabular-nums;}
  .adjust-assistant .adj-pills{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px;}
  .adjust-assistant .adj-pill,.adjust-assistant .adj-pref{min-height:44px;padding:10px 16px;font-size:15.5px;font:inherit;}
  .adjust-assistant .adj-custom label{display:block;font-size:14.5px;color:var(--ink-soft);margin:4px 0 6px;}
  .adjust-assistant .adj-custom-row{display:flex;gap:8px;flex-wrap:wrap;}
  .adjust-assistant .adj-custom-row input{min-height:44px;min-width:0;flex:1 1 140px;max-width:220px;font-size:16px;padding:8px 12px;border:1.5px solid var(--line);border-radius:12px;background:var(--white);color:var(--ink);}
  .adjust-assistant .adj-fieldset{border:0;padding:0;margin:0 0 8px;}
  .adjust-assistant .adj-fieldset legend{font-size:15px;font-weight:600;margin:0 0 6px;color:var(--ink);}
  .adjust-assistant .adj-result{margin-top:12px;}
  .adjust-assistant .adj-compare{width:100%;border-collapse:collapse;margin:0 0 12px;font-size:15.5px;font-variant-numeric:tabular-nums;}
  .adjust-assistant .adj-compare th,.adjust-assistant .adj-compare td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:top;}
  .adjust-assistant .adj-compare thead th{font-size:13.5px;letter-spacing:0.04em;color:var(--ink-soft);font-weight:600;}
  .adjust-assistant .adj-compare tbody th{font-weight:600;color:var(--ink);}
  .adjust-assistant .adj-routes{margin:0 0 12px;padding-left:20px;font-size:16px;line-height:1.55;}
  .adjust-assistant .adj-routes li{margin:0 0 8px;}
  .adjust-assistant .adj-actions{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 10px;}
  .adjust-assistant .adj-actions .btn,.adjust-assistant .adj-back,.adjust-assistant .adj-pick{min-height:44px;}
  .adjust-assistant .adj-note{font-size:14.5px;line-height:1.5;margin:0 0 10px;color:var(--ink-soft);}
  .adjust-assistant .adj-foot{font-size:14px;line-height:1.5;margin:10px 0 0;color:var(--ink-soft);}
  .adjust-assistant .adj-explain dt{font-weight:700;font-size:16px;margin:12px 0 4px;color:var(--ink);}
  .adjust-assistant .adj-explain dd{margin:0;font-size:16px;line-height:1.55;color:var(--ink);font-variant-numeric:tabular-nums;}
  .adjust-assistant .adj-working{font-size:15.5px;color:var(--ink-soft);margin:0;}
  .adjust-assistant .adj-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  @media (max-width:640px){
    .adjust-assistant{padding:18px 16px 14px;}
    .adjust-assistant .adj-choices{grid-template-columns:1fr;}
    .adjust-assistant .adj-compare{font-size:14.5px;}
    .adjust-assistant .adj-compare th,.adjust-assistant .adj-compare td{padding:7px 4px;}
  }

  /* The complete breakdown: closed by default; the detail inside keeps its
     own styling. Printing opens it (src/customer/simple-deal.js). */
  .res-breakdown{margin-top:16px;border:1px solid var(--line);border-radius:calc(var(--radius) + 8px);background:var(--card-bg);color:var(--ink);}
  .res-breakdown > summary{cursor:pointer;list-style:none;padding:16px 20px;font-size:16.5px;font-weight:600;color:var(--ink);display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;}
  .res-breakdown > summary::-webkit-details-marker{display:none;}
  .res-breakdown > summary::before{content:'+';display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:999px;border:1.5px solid var(--gold);font-weight:700;line-height:1;}
  .res-breakdown[open] > summary::before{content:'–';}
  .res-breakdown .res-breakdown-hint{font-size:14.5px;font-weight:400;color:var(--ink-soft);}
  /* Closed means not laid out at all: Chromium otherwise keeps the hidden
     detail laid out at its open-state position (content-visibility:hidden
     on ::details-content), and those unpainted boxes sit on top of the
     vehicles below — the helper collision guard then sees "content" where
     the reader sees none. */
  .res-breakdown:not([open])::details-content{display:none;}
  /* The summary row hosts helper 44 while the breakdown is closed (the
     Financing Profile it belongs to is inside); once open, the profile's
     own 44 takes over. */
  .res-breakdown > summary{position:relative;}
  .res-breakdown[open] > summary > .shift-helper-slot{display:none !important;}
  .res-breakdown[open]{padding-bottom:16px;}
  .res-breakdown[open] > :not(summary){margin-left:16px;margin-right:16px;}
  /* Phones: the cards inside the breakdown keep the full card width the rest
     of the results page uses (≥ 90% of the viewport); text lines keep 16px. */
  @media (max-width:600px){ .res-breakdown[open] > .card, .res-breakdown[open] > .financing-paths-summary, .res-breakdown[open] > .disclaimer{margin-left:2px;margin-right:2px;} }
  .res-breakdown .nevp-line{margin-top:12px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:15px;line-height:1.45;color:var(--ink);}
  .res-breakdown .nevp-k{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-soft);}
  .res-breakdown .nevp-eq{white-space:nowrap;}
  .res-breakdown .nevp-cap{font-size:13.5px;color:var(--ink-soft);}
  .res-breakdown .count-line.count-line-secondary{font-size:15px;color:var(--ink);margin-top:12px;}

  /* The vehicles, classified. */
  .res-vehicles-head{font-size:18px;font-weight:600;line-height:1.45;color:var(--ink);margin:6px 0 6px;}
  .res-vehicles-head b{font-variant-numeric:tabular-nums;}
  .res-vehicles-head .count-line-note{font-size:16px;font-weight:400;line-height:1.55;margin-top:6px;color:var(--ink);}
  /* Tablet: the heading's right end is the empty corner the vehicles
     helpers (40 above it, 50 under it in the wrap-up) sit in — reserved at
     every setting so turning helpers on/off never re-wraps the heading. */
  @media (min-width:600px) and (max-width:1179px){ .res-vehicles-head{padding-right:76px;} }
  .match-count-line{color:var(--ink-soft);font-size:15px;margin:0 0 16px;}
  #results .vehicle-card .why-list li{font-size:15px;line-height:1.5;}
  #results .score-note{font-size:13.5px;line-height:1.45;color:var(--ink-soft);margin:8px 0 0;}
  #results .lm-note{font-size:13px !important;line-height:1.5;}

  /* The results-reveal helper says "Here's what fits!": not shown when no
     vehicle fits the deal as entered. */
  .shift-helper-slot[data-suppressed="1"]{display:none !important;}

/* ONE SIMPLE CUSTOMER PAGE (owner decision 2026-10-25). The results page and
   the Simple Deal (Started and Complete) carry one short explanation, "Where
   your deal stands" (#deal-meaning / #sd-deal-meaning): no "Preliminary"
   stage notes or before/after comparison, no requested-vs-supports table, no
   complete breakdown, term-options table, APR range or credit tier. The full
   financing detail stays on the dealer print-out and in staff views. */
#res-ne-explain, #res-range-note, #res-stage-note, #res-stage-note-refined,
#res-requested-vs-supports, #res-breakdown, #payment-realism-notice,
#financing-paths-summary, #fp-stretch-line,
#sd-stage-note, #sd-final-banner, #sd-final-changes, #sd-requested-vs-supports,
#sd-breakdown, #sd-deal-terms, .sd-field-apr, .sd-field-credit{display:none !important;}
.deal-meaning .dm-ne{font-size:16px;font-weight:600;line-height:1.5;margin:0 0 10px;color:var(--ink);overflow-wrap:anywhere;}
#sd-deal-meaning .dm-foot{display:none !important;}

/* Owner decision 2026-10-25: "See my Simple Deal" goes straight to the last
   step. While the final questions are open, the Simple Deal page shows only
   them (the deal appears once, completed, after the answers). */
.sd-receipt.sd-questions-first > *:not(#deal-refine):not(#sd-qf-preparing):not(#sd-send-check):not(.no-print:first-child){ display:none !important; }
.sd-receipt.sd-questions-first > .no-print:first-child > .btn:last-child{ display:none !important; }

/* ---------- SIMPLE DEAL: ONE READABLE STYLE (owner, 2026-10-26) ----------
   The deal's title block and "Your buying power" use the same look as
   "Where your deal stands": a light card with an accent edge, the page's
   plain sans-serif text, and the labels close to their figures. */
#view-simple-deal .results-big,
#view-simple-deal .sd-power{background:var(--card-bg);color:var(--ink);border:1px solid var(--line);border-radius:calc(var(--radius) + 10px);padding:24px 26px 20px;box-shadow:0 2px 10px var(--shadow);}
#view-simple-deal .results-big{border-left:6px solid var(--gold);}
#view-simple-deal .results-big .eyebrow,
#view-simple-deal .sd-power .subhead{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.12em;font-weight:500;text-transform:uppercase;color:var(--ink-soft);margin:0;}
#view-simple-deal .results-big .amt-big{font-family:inherit;font-size:clamp(22px,3.2vw,27px) !important;font-weight:700;line-height:1.25;letter-spacing:-0.01em;color:var(--ink);margin:8px 0 6px;}
#view-simple-deal .results-big .amt-note{font-size:16px;opacity:1;color:var(--ink);margin-top:4px;}
#view-simple-deal .results-big .count-line{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:14.5px;color:var(--ink-soft);}
#view-simple-deal .results-big .count-line b{font-family:inherit;font-size:15px;font-weight:700;color:var(--ink);}
#view-simple-deal .sd-power .form-grid{gap:14px 18px;margin-top:14px !important;}
#view-simple-deal .sd-power .field{gap:2px;margin:0;}
#view-simple-deal .sd-power .field label{font-size:14px;font-weight:500;color:var(--ink-soft);}
#view-simple-deal .sd-power .sd-value{font-family:inherit;font-size:17.5px;font-weight:600;line-height:1.45;color:var(--ink);margin:0;font-variant-numeric:tabular-nums;}
/* The red further-review box and the FINAL banner keep their own colors
   inside the light title card: the card's soft-ink eyebrow and the old dark
   band's light text would make them unreadable on several themes. */
#view-simple-deal .results-big .sd-review-banner .eyebrow{color:#9b0019;}
#view-simple-deal .results-big .sd-final-banner p{color:var(--ink);}
@media (max-width:640px){
  #view-simple-deal .results-big, #view-simple-deal .sd-power{padding:20px 16px 16px;}
}