/* ===========================================================================
   Module pages (invoices / expenses) — shared blocks
   =========================================================================== */

/* ---- page hero (smaller than home) ---- */
.page-hero { padding-block: 64px 56px; background: linear-gradient(180deg,#fff, var(--surface)); }
.page-hero .wrap { max-width: 880px; text-align: center; }
.page-hero .eyebrow { justify-content: center; }
.page-hero h1 { font-size: clamp(34px, 5vw, 54px); line-height: 1.08; letter-spacing: -.02em; }
.page-hero .lead { margin-inline: auto; max-width: 640px; }
.page-hero .hero-cta { justify-content: center; }
.page-hero .brand-line { display: inline-flex; align-items: center; gap: 10px; margin-block-end: 18px; }
.page-hero .brand-line .icon-box { width: 44px; height: 44px; margin: 0; border-radius: 12px; }
.page-hero .brand-line .icon-box svg { width: 23px; height: 23px; }
.page-hero .brand-line .nm { font-family: var(--font-head); font-weight: 600; font-size: 22px; color: var(--ink-900); }

/* ---- threshold timeline ---- */
.tl { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; margin-block-start: 12px; position: relative; }
.tl::before { content: ""; position: absolute; inset-block-start: 26px; inset-inline: 12%; height: 2px; background: linear-gradient(90deg, var(--blue-300), var(--blue-600)); border-radius: 2px; }
.tl-node { text-align: center; position: relative; padding-inline: 12px; }
.tl-dot { width: 54px; height: 54px; border-radius: 50%; background: #fff; border: 2px solid var(--line-strong); display: grid; place-items: center; margin: 0 auto 16px; position: relative; z-index: 2; font-family: var(--font-head); font-weight: 600; color: var(--ink-400); font-size: 13px; }
.tl-node--active .tl-dot { border-color: var(--blue-600); background: var(--blue-600); color: #fff; box-shadow: var(--shadow-blue); }
.tl-amt { font-family: var(--font-head); font-weight: 600; font-size: 26px; color: var(--ink-900); }
.tl-node--active .tl-amt { color: var(--blue-700); }
.tl-when { font-size: 14.5px; color: var(--ink-400); margin-block-start: 4px; }

/* ---- split feature block (text + visual) ---- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split--flip .split-text { order: 2; }
.split-text h2 { font-size: clamp(26px, 3.4vw, 36px); }
.split-text .lead { font-size: 18px; }

/* ---- API flow diagram ---- */
.flow { display: grid; gap: 16px; }
.flow-step { display: flex; align-items: flex-start; gap: 18px; padding: 20px 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); position: relative; }
.flow-num { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--blue-50); color: var(--blue-700); font-family: var(--font-mono); font-weight: 500; display: grid; place-items: center; font-size: 15px; }
.flow-step h3 { font-size: 17px; margin-block-end: 3px; }
.flow-step p { font-size: 15px; color: var(--ink-400); }
.flow-step--ok .flow-num { background: var(--green-100); color: var(--green-600); }
.flow-step--err { border-color: #f3d9c4; }
.flow-step--err .flow-num { background: var(--amber-100); color: var(--amber-600); }

/* ---- code / terminal card ---- */
.code-card { background: #0e1c30; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); direction: ltr; }
.code-head { display: flex; align-items: center; gap: 8px; padding: 14px 18px; background: #0a1626; border-bottom: 1px solid rgba(255,255,255,.07); }
.code-dot { width: 11px; height: 11px; border-radius: 50%; }
.code-dot.r { background: #ff5f57; } .code-dot.y { background: #febc2e; } .code-dot.g { background: #28c840; }
.code-file { margin-inline-start: 12px; font-family: var(--font-mono); font-size: 13px; color: #6f87a8; }
.code-body { padding: 20px 22px; font-family: var(--font-mono); font-size: 13.5px; line-height: 1.8; color: #c3d3ea; overflow-x: auto; }
.code-body .k { color: #6fb3ff; } .code-body .s { color: #7fd6a6; } .code-body .n { color: #f2b76b; } .code-body .c { color: #5b7390; }
.code-body .key { color: #8bb6ff; }

/* ---- highlight cards row ---- */
.hl-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.hl-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 24px; }
.hl-card .stat-num { font-size: 34px; color: var(--blue-700); }
.hl-card p { font-size: 14.5px; color: var(--ink-400); margin-block-start: 6px; }

/* ---- info callout ---- */
.callout { display: flex; gap: 16px; padding: 22px 24px; border-radius: var(--r-md); background: var(--blue-50); border: 1px solid var(--blue-100); }
.callout .ci { flex: none; width: 38px; height: 38px; border-radius: 10px; background: #fff; color: var(--blue-600); display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.callout .ci svg { width: 20px; height: 20px; }
.callout h4 { font-size: 16px; color: var(--ink-900); margin-block-end: 4px; }
.callout p { font-size: 15px; color: var(--ink-500); }
.callout--amber { background: var(--amber-100); border-color: #f3e2bf; }
.callout--amber .ci { color: var(--amber-600); }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: 36px; }
  .split--flip .split-text { order: 0; }
  .hl-row { grid-template-columns: 1fr; }
  .tl-amt { font-size: 21px; }
}

/* ---- friendly approval card (replaces dev JSON snippet) ---- */
.approve-card { background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); padding:34px; }
.approve-check { width:58px; height:58px; border-radius:50%; background:var(--green-100); color:var(--green-600); display:grid; place-items:center; margin-block-end:18px; }
.approve-check svg { width:30px; height:30px; }
.approve-title { font-family:var(--font-head); font-weight:600; font-size:21px; color:var(--ink-900); line-height:1.25; }
.approve-meta { font-size:15px; color:var(--ink-400); }

/* ---- send-to-customer card (email / WhatsApp) ---- */
.send-card { background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); padding:26px; }
.send-doc { display:flex; align-items:center; gap:14px; padding:16px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); }
.send-doc-ic { width:44px; height:44px; border-radius:11px; background:var(--blue-50); color:var(--blue-600); display:grid; place-items:center; flex:none; }
.send-doc-ic svg { width:22px; height:22px; }
.send-doc-name { font-family:var(--font-head); font-weight:600; color:var(--ink-900); font-size:15.5px; }
.send-doc-sub { font-size:13px; color:var(--ink-300); font-family:var(--font-mono); }
.send-doc .send-status { margin-inline-start:auto; display:inline-flex; align-items:center; gap:6px; font-family:var(--font-head); font-weight:500; font-size:13px; color:var(--green-600); background:var(--green-100); padding:5px 11px; border-radius:var(--r-pill); white-space:nowrap; }
.send-doc .send-status svg { width:13px; height:13px; }
.send-channels { display:flex; gap:12px; margin-block-start:16px; }
.send-ch { flex:1; display:flex; align-items:center; justify-content:center; gap:9px; padding:13px; border-radius:var(--r-md); font-family:var(--font-head); font-weight:500; font-size:15px; box-shadow:inset 0 0 0 1px var(--line-strong); color:var(--ink-700); background:#fff; }
.send-ch svg { width:19px; height:19px; }
.send-ch.wa { color:#1f9d55; }
.send-ch.em { color:var(--blue-600); }