/* ============================================================
   Alaska Frozen — Trade Credit (iwocaPay) page.
   File: css/page-finance.css   Namespace: .fin-*
   Load AFTER css/brand.css so the tokens resolve:
     <link rel="stylesheet" href="css/page-finance.css?v=1">

   Only brand.css tokens are used (--accent, --ink, --ink-2, --line,
   --muted, --paper-2, --shadow, --font). The cold "ice" wash lives in
   wow.css, which only the homepage loads, so it is re-declared locally
   on .fin-main rather than assumed.

   House rules: white ground, one accent, minimal copy.
   ============================================================ */

.fin-main{--fin-ice:#F2F8FC;--fin-ice-2:#E4EFF7;
  --fin-shadow:0 40px 90px -60px rgba(10,60,100,.55)}

/* ---- hero --------------------------------------------------------------- */
.fin-hero{background:linear-gradient(180deg,#fff 0%,var(--fin-ice) 100%);
  border-bottom:1px solid var(--line);padding:44px 0 70px}
.fin-hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:52px;align-items:center}
.fin-hero-copy{min-width:0}
.fin-hero .crumb{margin-bottom:14px}
.fin-title{font-size:clamp(2.1rem,5.2vw,3.7rem);line-height:1.02;letter-spacing:-.035em;
  font-weight:800;margin:0 0 16px;max-width:12ch}
.fin-title em{font-style:normal;color:var(--accent)}
.fin-lede{font-size:17px;color:var(--ink-2);max-width:40ch;margin:0 0 26px}
.fin-actions{display:flex;gap:12px;flex-wrap:wrap}
.fin-small{font-size:12.5px;color:var(--muted);margin:16px 0 0}

/* eligibility chips — facts, not marketing */
.fin-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px 10px;
  margin:26px 0 0;padding:24px 0 0;border-top:1px solid var(--line)}
.fin-chips li{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;
  color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 14px}
.fin-chips li::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--accent);flex:none}

/* ---- the panel beside the headline -------------------------------------- */
.fin-panel{background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:24px 26px 22px;box-shadow:var(--fin-shadow)}
.fin-panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-bottom:16px;border-bottom:1px solid var(--line)}
.fin-panel-head img{height:20px;width:auto}
.fin-panel-tag{font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--muted)}
.fin-panel-label{font-size:12px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--muted);margin:20px 0 8px}
.fin-amount{display:block;font-size:clamp(1.9rem,4vw,2.7rem);font-weight:800;letter-spacing:-.04em;
  line-height:1;color:var(--accent)}
.fin-panel-sub{font-size:13.5px;color:var(--muted);margin:10px 0 0}
.fin-rows{margin-top:18px;border-top:1px solid var(--line)}
.fin-row{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 0;border-bottom:1px solid var(--line);font-size:14.5px;font-weight:600;color:var(--ink)}
.fin-panel-note{font-size:12px;color:var(--muted);margin:14px 0 0;line-height:1.55}

/* interest-free badge — the accent tint; the plain badge is deliberately
   neutral because "Pay now" is not credit and must not read as an offer */
.fin-tag{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;color:var(--accent);background:var(--accent-050);
  border-radius:999px;padding:5px 11px;white-space:nowrap;flex:none}
.fin-tag-plain{color:var(--muted);background:var(--paper-2);border:1px solid var(--line)}

/* ---- sections ----------------------------------------------------------- */
.fin-sec{padding:76px 0}
.fin-sec-alt{background:var(--paper-2);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}

/* ---- how it works: the homepage's numbered chain, laid out as a row ------ */
.fin-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.fin-step{border-top:2px solid var(--accent);padding:18px 14px 0 0}
.fin-step b{display:block;font-size:12px;font-weight:800;letter-spacing:1.4px;
  color:var(--accent);margin-bottom:10px}
.fin-step h3{font-size:16px;letter-spacing:-.015em;margin:0 0 6px}
.fin-step p{font-size:13.5px;color:var(--muted);margin:0;line-height:1.6}

/* ---- the three payment choices ------------------------------------------ */
.fin-terms{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.fin-term{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:24px 22px 22px;transition:border-color .25s,box-shadow .25s,transform .25s}
.fin-term:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-2px)}
.fin-term .fin-tag{display:inline-block;margin-bottom:14px}
.fin-term-kicker{font-size:11.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--muted);margin:0 0 4px}
.fin-term h3{font-size:18px;letter-spacing:-.02em;margin:0 0 8px}
.fin-term > p{font-size:14px;color:var(--ink-2);margin:0;line-height:1.6}
.fin-term-meta{margin-top:14px !important;padding-top:12px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--muted)}
.fin-note{max-width:70ch;margin:32px auto 0;text-align:center;font-size:13.5px;color:var(--muted)}
.fin-note a{color:var(--accent);font-weight:600}
.fin-note a:hover{color:var(--accent-600)}

/* ---- FAQ ---------------------------------------------------------------- */
.fin-faq{max-width:840px;margin:0 auto;border-top:1px solid var(--line)}
.fin-faq details{border-bottom:1px solid var(--line)}
.fin-faq summary{list-style:none;cursor:pointer;position:relative;
  padding:18px 44px 18px 0;font-size:15.5px;font-weight:600;color:var(--ink)}
.fin-faq summary::-webkit-details-marker{display:none}
.fin-faq summary:hover{color:var(--accent)}
.fin-faq summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}
.fin-faq summary::after{content:"";position:absolute;right:10px;top:24px;width:9px;height:9px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg);transition:transform .25s ease}
.fin-faq details[open] summary::after{top:28px;transform:rotate(-135deg)}
.fin-faq details p{margin:0 0 20px;max-width:66ch;font-size:14.5px;color:var(--muted)}
.fin-faq details a{color:var(--accent);font-weight:600}

/* ---- closing CTA -------------------------------------------------------- */
.fin-cta{background:var(--fin-ice);border-top:1px solid var(--line);
  padding:86px 0;text-align:center}
.fin-cta h2{font-size:clamp(1.8rem,4.2vw,2.9rem);letter-spacing:-.035em;font-weight:800;
  margin:0 0 10px}
.fin-cta > .wrap > p{color:var(--muted);margin:0 0 26px}
.fin-cta .fin-actions{justify-content:center}
.fin-cta .fin-small{text-align:center}

/* ---- responsive --------------------------------------------------------- */
@media(max-width:1000px){
  .fin-steps{grid-template-columns:repeat(2,1fr);gap:24px}
  .fin-terms{grid-template-columns:1fr}
}
@media(max-width:880px){
  .fin-hero{padding:32px 0 48px}
  .fin-hero-grid{grid-template-columns:1fr;gap:32px}
  .fin-panel{order:2}
  .fin-sec{padding:52px 0}
  .fin-cta{padding:58px 0}
}
@media(max-width:520px){
  .fin-steps{grid-template-columns:1fr;gap:20px}
  .fin-actions .btn{width:100%}
}

/* motion: .rise is revealed by js/motion-fx.js, with a 3s net in js/app.js.
   Nothing on this page may end up permanently invisible, so no element here
   carries a resting state of its own that hides it. */
@media(prefers-reduced-motion:reduce){
  .fin-term,.fin-faq summary::after{transition:none}
  .fin-term:hover{transform:none}
}