/* ============================================================
   1Way Food Service — Trade Credit (iwocaPay) page styles
   File: css/page-finance.css   ·  load AFTER css/brand.css
   Uses only the tokens declared in css/brand.css.
   Light surfaces only — no dark sections.
   ============================================================ */

.fin-anchor{scroll-margin-top:120px}

/* ---------- hero (same light band as the other subpages) ---------- */
.fin-hero{background:var(--paper-2);border-bottom:1px solid var(--line);padding:52px 0 56px}
.fin-hero .crumb{font-size:.85rem;color:var(--muted);margin-bottom:14px}
.fin-hero .crumb a:hover{color:var(--pink)}
.fin-hero-inner{display:grid;grid-template-columns:1.08fr .92fr;gap:52px;align-items:center}
.fin-brand{text-transform:none;letter-spacing:.01em;font-size:1.04em}
.fin-hero h1{font-size:clamp(2.2rem,4.6vw,3.4rem);margin-bottom:16px}
.fin-hero h1 em{font-style:normal;color:var(--pink)}
.fin-lede{font-size:1.08rem;color:var(--body);max-width:46ch;margin:0}
.fin-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.fin-small{margin:14px 0 0;font-size:.82rem;color:var(--muted)}
.fin-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.fin-chip{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-pill);padding:8px 15px;font-size:.82rem;font-weight:600;color:var(--ink)}
.fin-chip svg{width:14px;height:14px;flex:none;color:var(--pink)}

/* ---------- hero panel ---------- */
.fin-panel{background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:28px 30px 26px;box-shadow:var(--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;display:block}
.fin-panel-tag{font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.fin-panel-label{display:block;margin-top:22px;font-size:.76rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.fin-amount{display:block;margin-top:4px;font-size:clamp(2.4rem,5.4vw,3.2rem);font-weight:800;
  line-height:1.05;letter-spacing:-.02em;color:var(--ink)}
.fin-panel-min{display:block;margin-top:6px;font-size:.92rem;color:var(--muted)}
.fin-rows{margin-top:22px;display:grid;gap:9px}
.fin-row{display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--paper-2);border-radius:8px;padding:13px 15px}
.fin-row span{font-weight:600;font-size:.94rem;color:var(--ink)}
.fin-panel-note{margin:18px 0 0;font-size:.8rem;color:var(--muted);line-height:1.6}

/* badge — pink for the interest-free credit terms */
.fin-free{font-style:normal;font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:var(--pink);border-radius:var(--r-pill);padding:6px 11px;white-space:nowrap}
/* Pay now is a direct bank payment, not credit — it never wears the interest-free badge */
.fin-free.fin-free-now{background:var(--ink)}

/* ---------- section shell ---------- */
.fin-sec{padding:72px 0}
.fin-sec-tint{background:var(--paper-2)}
.fin-sec-wash{background:var(--pink-050)}
.fin-head{max-width:58ch;margin-bottom:38px}
.fin-head p{color:var(--muted);margin:0}

/* ---------- steps ---------- */
.fin-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.fin-step{background:#fff;border:1px solid var(--line);border-radius:8px;padding:26px 24px 28px}
.fin-step-num{width:34px;height:34px;border-radius:50%;background:var(--pink);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:.92rem;margin-bottom:15px}
.fin-step h3{font-size:1.05rem;margin:0 0 6px}
.fin-step p{margin:0;color:var(--muted);font-size:.93rem;line-height:1.6}

/* ---------- payment choice cards ---------- */
.fin-terms{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.fin-term{position:relative;background:#fff;border:1px solid var(--line);border-radius:8px;
  padding:30px 28px 28px;transition:transform .22s,box-shadow .22s}
.fin-term:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.fin-term .fin-free{position:absolute;top:24px;right:24px}
.fin-term-kicker{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0}
.fin-term h3{margin:10px 0 8px;font-size:1.3rem;padding-right:110px}
.fin-term p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.65}
.fin-term-meta{margin-top:18px;padding-top:15px;border-top:1px solid var(--line);
  font-size:.85rem;font-weight:600;color:var(--pink)}

/* the site's own note component, reused */
.fin-note{background:var(--pink-050);border:1px solid #F8D3E1;border-radius:10px;
  padding:18px 20px;margin-top:26px;font-size:.94rem;line-height:1.7}
.fin-note b{color:var(--pink)}
.fin-note a{color:var(--pink);font-weight:600}

/* ---------- iwoca banner spacing on this page ---------- */
.fin-banner{padding:16px 0 8px}

/* ---------- FAQ ---------- */
.fin-faq{max-width:860px}
.fin-faq details{border-bottom:1px solid var(--line)}
.fin-faq summary{cursor:pointer;list-style:none;position:relative;font-weight:600;
  font-size:1.02rem;color:var(--ink);padding:19px 40px 19px 0}
.fin-faq summary::-webkit-details-marker{display:none}
.fin-faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-size:1.5rem;font-weight:400;color:var(--pink);line-height:1}
.fin-faq details[open] summary::after{content:"\2212"}
.fin-faq summary:focus-visible{outline:2px solid var(--pink);outline-offset:3px;border-radius:6px}
.fin-faq details p{margin:0;padding:0 40px 20px 0;color:var(--muted);font-size:.96rem;line-height:1.75}
.fin-faq details a{color:var(--pink);font-weight:600}

/* ---------- closing CTA (light) ---------- */
.fin-cta-card{text-align:center;background:var(--pink-050);border:1px solid #F8D3E1;border-radius:12px;
  padding:52px 34px}
.fin-cta-card h2{margin-bottom:12px}
.fin-cta-card p.fin-cta-sub{max-width:52ch;margin:0 auto;color:var(--muted)}
.fin-cta-card .fin-actions{justify-content:center}
.fin-cta-card .fin-small{text-align:center}

/* ---------- responsive ---------- */
@media(max-width:1100px){
  .fin-steps{grid-template-columns:repeat(2,1fr)}
  .fin-terms{grid-template-columns:1fr}
  .fin-term h3{padding-right:0}
  .fin-term .fin-free{position:static;display:inline-flex;margin-bottom:10px}
}
@media(max-width:940px){
  .fin-hero-inner{grid-template-columns:1fr;gap:32px}
  .fin-sec{padding:52px 0}
}
@media(max-width:560px){
  .fin-steps{grid-template-columns:1fr}
  .fin-actions .btn{width:100%}
  .fin-cta-card{padding:38px 22px}
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .fin-term{transition:none}
  .fin-term:hover{transform:none}
}