/* ═══════════════════════════════════════════════════════════════════════════
   ONE COST RED — the single definition, repeated here because this site has
   no stylesheet that every page loads. Values are identical everywhere; see
   polish.css for why there are three of them.

     --cost-red           text on a LIGHT surface      4.5:1
     --cost-red-on-dark   text on a DARK surface       4.5:1
     --cost-red-bar-on-dark   a BAR on a dark surface  3:1 is the bar
                              it must clear, and the looser bar buys a
                              deeper, truer red than the text one.

   The two *-auto tokens pick the right member of that set from the theme,
   so a badge on a card that goes dark stays readable without every rule
   having to say so twice.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --cost-red:#B3261E;
  --cost-red-on-dark:#F0776B;
  --cost-red-bar-on-dark:#E54B3E;
  --cost-red-auto:#B3261E;
  --cost-red-bar-auto:#B3261E;
}
:root[data-theme="dark"]{
  --cost-red-auto:var(--cost-red-on-dark);
  --cost-red-bar-auto:var(--cost-red-bar-on-dark);
}

/* ═══════════════════════════════════════════════════════════════════════════
   START HERE — the guided way into 296 rate cards
   ═══════════════════════════════════════════════════════════════════════════

   The page's own answer to "I don't know what I need" was a search box. You
   cannot search for a product whose name you have never heard, and the two
   that matter most to a first-time borrower — Loan Against Property and
   balance transfer — are exactly the two nobody outside lending can name.

   So the entry point is a question in the borrower's own words, and the
   answer sets the filter they could not have set themselves. The dark panel
   is deliberate: it reads as the start of the page rather than another row
   of controls, and it matches the hero immediately above it.
   ═══════════════════════════════════════════════════════════════════════════ */

.lf{
  --lf-ground:#082C24;
  --lf-ink:#F3FBF6;
  --lf-muted:#9FC2B1;
  --lf-mint:#9EE6BF;
  --lf-line:#9ee6bf26;
  background:var(--lf-ground);
  color:var(--lf-ink);
  padding:30px 16px 34px;
  position:relative;
  overflow:clip;
  isolation:isolate;
}
.lf::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(110% 60% at 50% -10%, #1fa46333 0%, #1fa46300 62%);
}
.lf-inner{position:relative;z-index:1;max-width:1040px;margin:0 auto;}

.lf-eyebrow{font:700 10px/1.5 var(--font-sans),sans-serif;letter-spacing:2px;color:var(--lf-mint);margin:0 0 9px;}
.lf-head h2{
  font:400 clamp(26px,4.4vw,38px)/1.12 Georgia,"Times New Roman",serif;
  letter-spacing:-1.3px;margin:0 0 9px;color:var(--lf-ink);text-wrap:balance;
}
.lf-sub{font-size:13.5px;line-height:1.65;color:var(--lf-muted);margin:0 0 22px;max-width:56ch;}

/* ── The six choices ─────────────────────────────────────────────────── */

.lf-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media(min-width:700px){ .lf-grid{grid-template-columns:repeat(3,1fr);gap:12px;} }

.lf-card{
  appearance:none;cursor:pointer;text-align:left;
  display:grid;gap:7px;align-content:start;
  padding:15px 14px 16px;
  border-radius:15px;
  border:1px solid var(--lf-line);
  background:linear-gradient(152deg,#0f4b3726,#0930250f);
  color:var(--lf-ink);
  min-height:118px;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  opacity:1;translate:0 0;
  transition:border-color .22s ease, background .22s ease,
             transform .22s cubic-bezier(.2,.8,.3,1.1),
             opacity .5s cubic-bezier(.2,.7,.2,1) var(--d,0s),
             translate .5s cubic-bezier(.2,.7,.2,1) var(--d,0s);
}
.lf-card.lf-pending{opacity:0;translate:0 16px;}
.lf-card:active{transform:scale(.975);}
.lf-ico{display:block;color:var(--lf-mint);}
.lf-ico svg{width:25px;height:25px;display:block;transition:transform .3s cubic-bezier(.2,.8,.3,1.3);}
.lf-name{font-size:14px;font-weight:700;line-height:1.3;}
.lf-note{font-size:11px;line-height:1.45;color:#86ad99;}

.lf-card.is-on{
  border-color:var(--lf-mint);
  background:linear-gradient(152deg,#1fa46340,#0930250f);
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.28);
}
.lf-card.is-on .lf-ico svg{transform:scale(1.16);}
.lf-card.is-on .lf-note{color:var(--lf-mint);}

/* ── The answer ──────────────────────────────────────────────────────── */

.lf-result{
  margin-top:16px;padding:16px 16px 18px;
  border-radius:15px;
  border:1px solid #9ee6bf3d;
  background:#1fa4631a;
  display:grid;gap:14px;
}
@media(min-width:760px){
  .lf-result{grid-template-columns:1fr auto auto;align-items:center;gap:20px;}
}
.lf-pop{animation:lf-pop .42s cubic-bezier(.2,.8,.3,1.05) both;}
@keyframes lf-pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.lf-result-k{margin:0 0 4px;font-size:15px;font-weight:800;color:var(--lf-ink);}
.lf-result-v{margin:0;font-size:12.5px;line-height:1.55;color:var(--lf-muted);}

.lf-spark{width:160px;height:46px;display:block;}
.lf-spark-track{fill:#9ee6bf1f;}
.lf-spark-fill{
  fill:url(#lfg);
  /* No gradient def in this SVG, so paint it with a flat ramp via CSS. */
  fill:#1FA463;
  transform:scaleX(1);transform-origin:left center;transform-box:fill-box;
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.lf-spark-dot--lo{fill:#1FA463;}
.lf-spark-dot--hi{fill:var(--cost-red-bar-auto, #B3261E);}
.lf-spark-key{
  margin:2px 0 0;display:flex;align-items:baseline;gap:6px;
  font-size:10.5px;color:#86ad99;
}
.lf-spark-key b{font-size:13px;color:#9EE6BF;font-weight:800;}
.lf-spark-key em{font-size:13px;color:#F0776B;font-style:normal;font-weight:800;margin-left:6px;}

.lf-go{
  appearance:none;border:0;cursor:pointer;
  min-height:46px;padding:0 20px;border-radius:12px;
  background:var(--lf-mint);color:#06281f;
  font:700 13.5px/1 var(--font-sans),sans-serif;
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  touch-action:manipulation;
  transition:transform .18s cubic-bezier(.2,.8,.3,1.2), filter .2s ease;
}
.lf-go:active{transform:scale(.97);}
.lf-go:hover{filter:brightness(1.04);}

.lf-skip{
  appearance:none;background:none;border:0;cursor:pointer;
  margin-top:16px;padding:10px 0;min-height:44px;
  color:var(--lf-muted);font:600 12.5px/1.4 var(--font-sans),sans-serif;
  text-decoration:underline;text-underline-offset:4px;
}
.lf-skip:hover{color:var(--lf-mint);}

.lf-card:focus-visible,.lf-go:focus-visible,.lf-skip:focus-visible{
  outline:3px solid var(--lf-mint);outline-offset:3px;
}

@media (prefers-reduced-motion:reduce){
  .lf-card,.lf-card.lf-pending{opacity:1;translate:none;transition:none;}
  .lf-card.is-on{transform:none;}
  .lf-ico svg,.lf-spark-fill,.lf-go{transition:none;}
  .lf-pop{animation:none;}
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE CHOICE CARDS — cursor motion
   ═══════════════════════════════════════════════════════════════════════════
   These had a scroll entrance and a pressed state and nothing in between:
   not one :hover rule, so on a desktop the grid was inert until clicked.

   Three things happen under the cursor, in order of how much they matter:

     1. the card lifts and its edge brightens      — "this is pressable"
     2. a soft light follows the pointer across it — "you are here"
     3. the icon does the thing it depicts         — the car pulls away,
                                                     the arrows turn, the
                                                     house settles

   All of it is behind (hover:hover) and (pointer:fine). A phone has no
   cursor, so it should not be told to paint one: on touch the entrance and
   the press state do the work, and the spotlight is never even computed.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (hover: hover) and (pointer: fine) {

  .lf-card {
    position: relative;
    overflow: hidden;
    transition:
      transform .32s cubic-bezier(.2, .8, .3, 1),
      border-color .3s ease,
      box-shadow .32s ease,
      background-color .3s ease;
  }

  /* The light under the pointer. --mx/--my are written by lf-motion.js; the
     fallback keeps it centred and invisible until the cursor arrives, so a
     card that is never hovered costs nothing but one transparent layer. */
  .lf-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .35s ease;
    background: radial-gradient(
      220px circle at var(--mx, 50%) var(--my, 50%),
      rgba(95, 217, 160, .16),
      transparent 68%);
  }

  .lf-card:hover {
    transform: translateY(-3px);
    border-color: var(--lf-mint);
    box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .55);
  }
  .lf-card:hover::after { opacity: 1; }
  .lf-card:hover .lf-name { color: #fff; }
  .lf-card:hover .lf-note { color: var(--lf-mint); }

  /* The icon acts out its own noun. Each is scoped by data-fam so the car
     never does what the house does. */
  .lf-card .lf-ico svg { transition: transform .42s cubic-bezier(.2, .8, .3, 1.25); }

  .lf-card[data-fam="new-car"]:hover .lf-ico svg,
  .lf-card[data-fam="used-car"]:hover .lf-ico svg {
    transform: translateX(4px) scale(1.1);          /* pulls away */
  }
  .lf-card[data-fam="car-refinance"]:hover .lf-ico svg {
    transform: rotate(-150deg) scale(1.08);         /* the arrows come round */
  }
  .lf-card[data-fam="home"]:hover .lf-ico svg,
  .lf-card[data-fam="lap"]:hover .lf-ico svg {
    transform: translateY(-3px) scale(1.1);         /* settles onto its plot */
  }
  .lf-card[data-fam="business"]:hover .lf-ico svg {
    transform: translateY(-2px) scale(1.12);
  }
  .lf-card[data-fam="personal"]:hover .lf-ico svg {
    transform: scale(1.14);
  }

  /* A card already chosen stays chosen-looking; hover must not outrank it. */
  .lf-card.is-on:hover { transform: translateY(-3px); border-color: var(--lf-mint); }
}

/* The entrance gains a little scale so it reads as arriving rather than
   sliding. The existing --d stagger still sets the order. */
.lf-card.lf-pending { scale: .97; }
.lf-card { transition-property: transform, border-color, box-shadow, background-color, opacity, translate, scale; }

@media (prefers-reduced-motion: reduce) {
  .lf-card.lf-pending { scale: 1; }
  .lf-card::after { display: none; }
  .lf-card:hover { transform: none; border-color: var(--lf-mint); }
  .lf-card .lf-ico svg,
  .lf-card:hover .lf-ico svg { transition: none; transform: none; }
}