/* ════════════════════════════════════════════════════════════════════════
   Live Scenario Engine — module styles.

   Written to sit INSIDE usefast.ai's existing identity, not to replace it:
   the royal-blue gradient ground, DM Sans / DM Mono, the green accent, the
   glassy panel treatment already used by the FastIQ Layer card.

   Everything is scoped under .engine so it can be lifted into the React site
   without colliding with anything there.
   ════════════════════════════════════════════════════════════════════════ */

.engine{
  --e-navy:#0A1F5C; --e-navy-2:#0F3FA0; --e-deep:#071233;
  --e-white:#F4F7FC; --e-dim:rgba(244,247,252,.70); --e-dimmer:rgba(244,247,252,.44);
  --e-line:rgba(255,255,255,.13); --e-line-2:rgba(255,255,255,.24);
  --e-green:#22C55E; --e-green-soft:rgba(34,197,94,.13);
  --e-amber:#FFB547; --e-amber-soft:rgba(255,181,71,.11);
  --e-sans:'DM Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --e-mono:'DM Mono',ui-monospace,'SF Mono','Cascadia Mono',Consolas,monospace;

  font-family:var(--e-sans);
  color:var(--e-white);
  border:1px solid var(--e-line-2);
  border-radius:14px;
  overflow:hidden;
  /* Opaque, not translucent: the module sits on a LIGHT section in the live
     page, so it must carry its own ground. A dark panel on #F2F4F8 also pulls
     the eye to the centrepiece and echoes the hero's FastIQ Layer card. */
  background:linear-gradient(168deg,#0E2A66 0%,#0A1F5C 55%,#071233 100%);
  box-shadow:0 36px 90px -46px rgba(7,18,51,.75);
}
.engine *{box-sizing:border-box}

/* ── Header ─────────────────────────────────────────────────────────────── */
.e-head{display:flex;flex-wrap:wrap;align-items:center;gap:9px 15px;
        padding:15px 20px;border-bottom:1px solid var(--e-line);background:rgba(7,18,51,.4)}
.e-head b{font-size:1rem;letter-spacing:-.022em}
.e-live{display:inline-flex;align-items:center;gap:7px;
        font:500 .64rem/1 var(--e-mono);letter-spacing:.15em;text-transform:uppercase;
        color:var(--e-green)}
.e-live i{width:6px;height:6px;border-radius:50%;background:var(--e-green);flex:none}
@media(prefers-reduced-motion:no-preference){
  .e-live i{animation:e-blip 2.2s ease-in-out infinite}}
@keyframes e-blip{0%,100%{opacity:1}50%{opacity:.3}}
.e-head .e-meta{margin-left:auto;font:.71rem/1.5 var(--e-mono);color:var(--e-dimmer)}

/* ── Controls ───────────────────────────────────────────────────────────── */
.e-controls{display:grid;gap:15px;padding:20px;border-bottom:1px solid var(--e-line);
            grid-template-columns:minmax(0,1fr)}
@media(min-width:620px){.e-controls{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:960px){.e-controls{grid-template-columns:repeat(5,minmax(0,1fr));align-items:end}}
.e-field label{display:block;margin-bottom:8px;
  font:500 .62rem/1 var(--e-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--e-dimmer)}
.e-field input,.e-field select{width:100%;font:400 .95rem/1.4 var(--e-mono);
  font-variant-numeric:tabular-nums;color:var(--e-white);background:rgba(255,255,255,.06);
  border:1px solid var(--e-line-2);border-radius:8px;padding:12px 13px;
  transition:border-color .16s ease,background .16s ease}
.e-field select{font-family:var(--e-sans);font-variant-numeric:normal}
.e-field input:focus,.e-field select:focus{outline:none;border-color:var(--e-green);
  background:rgba(255,255,255,.09)}
.e-field select option{background:#0A1F5C;color:#F4F7FC}
.e-seg{display:flex;gap:0;border:1px solid var(--e-line-2);border-radius:8px;overflow:hidden}
.e-seg button{flex:1;font:600 .84rem/1 var(--e-sans);padding:12px 8px;cursor:pointer;
  background:transparent;color:var(--e-dim);border:0;transition:background .16s ease,color .16s ease}
.e-seg button[aria-pressed="true"]{background:var(--e-green-soft);color:var(--e-green)}
.e-seg button:not([aria-pressed="true"]):hover{color:var(--e-white)}
.e-ltv{margin-top:7px;font:.68rem/1 var(--e-mono);color:var(--e-dimmer)}

/* ── Notices ────────────────────────────────────────────────────────────── */
.e-notice{display:flex;gap:11px;padding:14px 20px;border-bottom:1px solid var(--e-line);
          font:.79rem/1.6 var(--e-mono);background:var(--e-amber-soft);color:#FFD79A}
.e-notice b{color:var(--e-amber);text-transform:uppercase;letter-spacing:.1em;
            font-size:.62rem;line-height:1.9;white-space:nowrap}

/* ── The field ──────────────────────────────────────────────────────────
   Leads the result. A presentation tool cannot state how many lenders it
   evaluated, because it evaluates none — so this is the differentiating
   fact and it gets structural weight, not a footnote. */
.e-fieldbar{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 26px;
         padding:15px 20px;border-bottom:1px solid var(--e-line);background:rgba(7,18,51,.34)}
.e-fieldbar-k{font:500 .62rem/1 var(--e-mono);letter-spacing:.15em;text-transform:uppercase;
           color:var(--e-dimmer)}
.e-fieldbar-n{font:.8rem/1 var(--e-sans);color:var(--e-dim)}
.e-fieldbar-n b{font:500 1.05rem/1 var(--e-mono);font-variant-numeric:tabular-nums;
             color:var(--e-white);margin-right:5px}
.e-fieldbar-n.held b{color:var(--e-amber)}

/* ── The two questions that matter ──────────────────────────────────────
   Given more visual weight than the loan file below, because these are what
   move the conversation off rate. */
.e-ask{display:grid;gap:20px;padding:20px;border-bottom:1px solid var(--e-line);
       background:rgba(34,197,94,.055);grid-template-columns:minmax(0,1fr)}
@media(min-width:820px){.e-ask{grid-template-columns:1.15fr .85fr;gap:30px;align-items:end}}
.e-ask-item label{display:block;margin-bottom:10px;font:600 .88rem/1.35 var(--e-sans);
                  color:var(--e-white);letter-spacing:-.015em}
.e-seg.wide button{padding:13px 10px;font-size:.86rem}
.e-hold{display:flex;align-items:center;gap:14px}
.e-hold input[type=range]{flex:1;accent-color:var(--e-green);min-width:0}
.e-hold-v{font:.78rem/1 var(--e-mono);color:var(--e-dim);white-space:nowrap}
.e-hold-v b{font-size:1.3rem;color:var(--e-white);font-variant-numeric:tabular-nums}

/* ── The answer ─────────────────────────────────────────────────────────
   Headline is the borrower's outcome. Lender and rate are demoted to a
   supporting line, because the product exists to move off that ground. */
.e-decision{padding:24px 20px;border-bottom:1px solid var(--e-line);
            background:linear-gradient(180deg,rgba(34,197,94,.10),transparent 70%)}
.e-k{display:flex;align-items:center;gap:9px;
     font:500 .62rem/1.4 var(--e-mono);letter-spacing:.13em;text-transform:uppercase;
     color:var(--e-green)}
.e-tag{margin-left:auto;border:1px solid rgba(34,197,94,.45);background:rgba(34,197,94,.14);
       border-radius:4px;padding:4px 7px;font-size:.56rem;letter-spacing:.1em;
       white-space:nowrap;color:var(--e-green)}
.e-dec-name{margin:14px 0 0;font:700 clamp(1.45rem,3.2vw,2.25rem)/1.1 var(--e-sans);
            letter-spacing:-.035em;text-wrap:balance}
.e-dec-sub{margin-top:10px;font-size:1rem;line-height:1.55;color:var(--e-dim);max-width:52ch}
.e-product{margin-top:5px;font:.73rem/1.45 var(--e-mono);color:var(--e-dimmer)}

/* What the crossover deliberately does not count. */
.e-caveat{margin-top:12px;font:.7rem/1.6 var(--e-mono);color:var(--e-dimmer);max-width:78ch}

/* The horizon test — the line that ends the rate conversation. */
.e-verdict{margin-top:20px;padding:15px 17px;border-radius:10px;
           border:1px solid rgba(34,197,94,.4);background:rgba(34,197,94,.10)}
.e-verdict.fails{border-color:rgba(255,181,71,.42);background:rgba(255,181,71,.10)}
.e-verdict .k{display:block;font:500 .6rem/1 var(--e-mono);letter-spacing:.14em;
              text-transform:uppercase;color:var(--e-green);margin-bottom:8px}
.e-verdict.fails .k{color:var(--e-amber)}
.e-verdict p{font-size:.93rem;line-height:1.6;color:var(--e-dim)}
.e-verdict b{font-family:var(--e-mono);font-weight:500;font-variant-numeric:tabular-nums;
             color:var(--e-white)}

/* The four computed axes the response genuinely supports. */
.e-metrics{display:grid;gap:1px;background:var(--e-line);border:1px solid var(--e-line);
           border-radius:10px;overflow:hidden;margin-top:20px;
           grid-template-columns:minmax(0,1fr)}
@media(min-width:620px){.e-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.e-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}}
.e-metric{background:rgba(7,18,51,.5);padding:15px 16px}
.e-metric .k{display:block;font:500 .58rem/1.3 var(--e-mono);letter-spacing:.13em;
             text-transform:uppercase;color:var(--e-dimmer)}
.e-metric .v{display:block;margin-top:7px;font:500 1.02rem/1.2 var(--e-mono);
             font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.e-metric .v em{font-style:italic;font-size:.86rem;color:var(--e-amber);font-weight:400}
.e-metric .s{display:block;margin-top:5px;font:.64rem/1.45 var(--e-mono);color:var(--e-dimmer)}
.e-metric.good .v{color:var(--e-green)}
.e-metric.warn .v{color:var(--e-amber)}

/* The LO's script — the most useful thing on the page, so it is given the
   brightest treatment in the module and a one-click take. */
.e-say{margin-top:20px;border:1px solid rgba(34,197,94,.34);border-radius:10px;
       background:rgba(34,197,94,.10);padding:17px 18px}
.e-say-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:11px}
.e-say .k{font:500 .6rem/1 var(--e-mono);letter-spacing:.15em;
          text-transform:uppercase;color:var(--e-green)}
.e-say p{font-size:1.02rem;line-height:1.6;color:var(--e-white);font-style:italic;
         letter-spacing:-.008em}
.e-copy{margin-left:auto;font:600 .7rem/1 var(--e-sans);padding:8px 13px;cursor:pointer;
        color:var(--e-green);background:transparent;border:1px solid rgba(34,197,94,.45);
        border-radius:6px;transition:background .16s ease,color .16s ease}
.e-copy:hover{background:rgba(34,197,94,.18);color:#fff}

/* Rate, lender and product live here now — one quiet line, not the headline. */
.e-support{margin-top:20px;padding-top:16px;border-top:1px solid var(--e-line)}
.e-support .k{display:block;font:500 .6rem/1 var(--e-mono);letter-spacing:.14em;
              text-transform:uppercase;color:var(--e-dimmer);margin-bottom:7px}
.e-support p{font:.82rem/1.6 var(--e-mono);color:var(--e-dim)}

.e-figs{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr));
        margin-top:20px;padding-top:18px;border-top:1px solid var(--e-line)}
@media(min-width:680px){.e-figs{grid-template-columns:repeat(4,minmax(0,1fr))}}
.e-fig .k{display:block;font:.6rem/1.4 var(--e-mono);letter-spacing:.11em;
          text-transform:uppercase;color:var(--e-dimmer)}
.e-fig .v{display:block;margin-top:6px;font:500 1.16rem/1.2 var(--e-mono);
          font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.e-fig .v.credit{color:var(--e-green)}
.e-fig .v.na{color:var(--e-amber);font-style:italic;font-size:.92rem}

.e-reason{margin-top:20px;padding-left:14px;border-left:2px solid rgba(34,197,94,.45)}
.e-reason .k{display:block;font:500 .6rem/1 var(--e-mono);letter-spacing:.14em;
             text-transform:uppercase;color:var(--e-green);margin-bottom:7px}
.e-reason p{font-size:.9rem;line-height:1.62;color:var(--e-dim)}

/* ── Alternatives ───────────────────────────────────────────────────────
   Subordinate to the decision and expressed as tradeoffs against it. */
.e-alts{padding:20px}
.e-alts-k{display:block;font:500 .62rem/1 var(--e-mono);letter-spacing:.15em;
          text-transform:uppercase;color:var(--e-dimmer);margin-bottom:14px}
.e-alts ul{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--e-line);
           border:1px solid var(--e-line);border-radius:8px;overflow:hidden}
.e-alt{display:grid;gap:4px 18px;padding:14px 16px;background:rgba(7,18,51,.5);
       grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.e-alt{grid-template-columns:.85fr 1fr 1fr;align-items:baseline}}
.e-alt-k{font:.76rem/1.45 var(--e-sans);color:var(--e-dimmer)}
.e-alt-name{font-size:.92rem;font-weight:600;letter-spacing:-.015em}
.e-alt-name span{display:block;margin-top:3px;font:.7rem/1.4 var(--e-mono);
                 color:var(--e-dimmer);font-weight:400}
.e-alt-delta{font:.8rem/1.5 var(--e-mono);font-variant-numeric:tabular-nums;color:var(--e-dim)}
@media(min-width:760px){.e-alt-delta{text-align:right}}

/* Skeleton — holds the layout so results do not shift the page on arrival. */
.e-sk{background:rgba(7,18,51,.5);padding:22px 20px}
.e-sk i{display:block;border-radius:4px;background:rgba(255,255,255,.075)}
@media(prefers-reduced-motion:no-preference){
  .e-sk i{animation:e-pulse 1.35s ease-in-out infinite}}
@keyframes e-pulse{0%,100%{opacity:.5}50%{opacity:1}}

/* Empty / error — an honest statement, never a zero and never a stale figure. */
.e-empty{padding:40px 22px;text-align:center}
.e-empty p{max-width:52ch;margin:0 auto;color:var(--e-dim);font-size:.95rem;line-height:1.65}
.e-empty .t{color:var(--e-white);font-weight:600;font-size:1.04rem;margin-bottom:9px;
            letter-spacing:-.02em}

/* ── Footer, disclosure, CTA ────────────────────────────────────────────── */
.e-foot{padding:14px 20px;border-top:1px solid var(--e-line);background:rgba(7,18,51,.42);
        display:flex;flex-wrap:wrap;gap:7px 18px;justify-content:space-between;
        font:.7rem/1.6 var(--e-mono);color:var(--e-dimmer)}
.e-disc{padding:15px 20px;border-top:1px solid var(--e-line);
        font-size:.75rem;line-height:1.65;color:var(--e-dimmer)}
.e-cta{padding:20px;border-top:1px solid var(--e-line);display:flex;flex-wrap:wrap;
       align-items:center;gap:14px;background:rgba(7,18,51,.42)}
.e-cta p{margin:0;flex:1;min-width:200px;font-size:.93rem;color:var(--e-dim)}
.e-cta a{display:inline-flex;align-items:center;gap:8px;background:var(--e-green);color:#04240F;
         font:600 .9rem/1 var(--e-sans);padding:14px 22px;border-radius:8px;
         text-decoration:none;transition:background .16s ease}
.e-cta a:hover{background:#2ad96a}
.engine :focus-visible{outline:2px solid var(--e-green);outline-offset:2px}