/* The billing feature page: a public, fictional statement illustration. */
.billing-feature-page { --paper:#f3f5f1; --ink:#152e3d; --accent:#216f4b; --rule:#d5dcd6; --muted:#526572; }
.billing-feature-page header nav .button { color:#fff; padding:12px 21px; }
.billing-feature-page header nav .button:hover { color:#fff; text-decoration:none; }
.billing-hero { display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); align-items:start; gap:42px; padding:52px 0 66px; }
.billing-hero > *, .statement-heading > *, .billing-feature-grid > *, .billing-pricing > * { min-width:0; }
.billing-intro { padding-top:22px; }
.billing-intro h1 { font-size:clamp(42px,4.75vw,62px); line-height:1.05; max-width:520px; margin:18px 0 27px; }
.billing-intro .billing-lead { font-size:20px; line-height:1.6; }
.billing-intro .actions { align-items:flex-start; }
.billing-intro .billing-free { margin-bottom:0; color:var(--muted); font-size:14px; }
.statement-example { margin:0; min-width:0; }
.statement-paper { background:#fff; border:1px solid #cbd5cf; box-shadow:0 20px 44px #152e3d12; padding:30px 28px 24px; }
.statement-heading { display:flex; justify-content:space-between; gap:16px; }
.statement-logo { display:inline-flex; align-items:center; justify-content:center; min-height:44px; width:138px; border:1px dashed #82918b; padding:8px 15px; color:var(--muted); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:650; }
.statement-company p { font-size:14px; font-weight:650; line-height:1.4; margin:10px 0 2px; }
.statement-company small { font-size:11px; }
.statement-period { text-align:right; }
.statement-period h2 { font-size:29px; margin:3px 0 7px; }
.statement-period p { font:11px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; margin:0; }
.statement-tenant { font-size:14px; margin:30px 0 16px; }
.statement-opening { display:flex; align-items:center; justify-content:space-between; gap:16px; border-top:1px solid var(--rule); padding:12px 0; font-size:12px; color:var(--muted); }
.statement-opening strong { color:var(--ink); white-space:nowrap; }
.statement-transactions { border-collapse:collapse; width:100%; table-layout:fixed; color:var(--ink); font-size:12px; line-height:1.5; }
.statement-transactions th { font-size:11px; font-weight:700; text-align:left; padding:10px 0; border-bottom:1px solid var(--ink); }
.statement-transactions th:first-child { width:25%; }
.statement-transactions th:last-child { width:24%; text-align:right; }
.statement-transactions td { padding:13px 0; vertical-align:top; border-bottom:1px solid #e2e8e3; }
.statement-transactions td:first-child { padding-right:8px; color:var(--muted); font-size:10px; white-space:nowrap; }
.statement-transactions td:nth-child(2) { padding-right:8px; }
.statement-transactions td:last-child { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.statement-transactions .statement-payment { color:var(--accent); }
.statement-transactions tfoot th { border:0; font-size:14px; padding-top:17px; }
.statement-transactions tfoot td { border:0; font-size:16px; font-weight:750; padding-top:17px; }
.statement-banking { margin-top:24px; padding-top:16px; border-top:1px solid var(--rule); font-size:11px; line-height:1.6; color:var(--muted); }
.statement-banking strong { display:block; color:var(--ink); }
.statement-banking p { margin:4px 0 0; }
.statement-example figcaption { color:var(--muted); font-size:11px; line-height:1.6; margin:14px 3px 0; max-width:510px; }
.billing-section-heading h2 { max-width:710px; font-size:clamp(32px,3.8vw,44px); }
.billing-section-heading > p:not(.eyebrow) { max-width:650px; }
.billing-feature-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:32px; border-top:1px solid var(--rule); }
.billing-feature-grid article { padding:28px 30px 28px 0; border-bottom:1px solid var(--rule); }
.billing-feature-grid article:nth-child(even) { padding:28px 0 28px 30px; border-left:1px solid var(--rule); }
.billing-feature-number { display:block; color:var(--accent); font:600 12px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.06em; margin-bottom:14px; }
.billing-feature-grid h3 { font-size:25px; }
.billing-feature-grid p { font-size:16px; line-height:1.7; margin:0; }
.billing-workflow .steps p { margin:8px 0 0; font-size:16px; }
.billing-workflow .steps strong { font-size:18px; }
.billing-interest { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.7fr); gap:32px; padding:30px; background:#e8efe7; border-left:3px solid var(--accent); margin-top:34px; }
.billing-interest h3 { margin:0; }
.billing-interest p { margin:0; font-size:16px; }
.billing-feature-page .billing-pricing { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); align-items:center; gap:34px; }
.billing-pricing .eyebrow { color:#91cca8; }
.billing-pricing h2 { font-size:clamp(29px,3.5vw,39px); }
.billing-pricing p { margin-bottom:0; }
.billing-pricing .actions { margin:0; }
.billing-pricing .actions p { width:100%; font-size:13px; line-height:1.5; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media(max-width:980px) {
  .billing-hero { gap:28px; }
  .billing-intro h1 { font-size:46px; }
  .billing-intro .billing-lead { font-size:18px; }
  .statement-paper { padding:24px 20px; }
  .statement-heading { display:block; }
  .statement-period { text-align:left; margin-top:17px; }
  .statement-period h2 { font-size:27px; margin-bottom:4px; }
  .statement-tenant { margin-top:20px; }
  .statement-transactions th:first-child { width:27%; }
  .statement-transactions th:last-child { width:26%; }
}
@media(max-width:760px) {
  .billing-hero { grid-template-columns:1fr; gap:34px; padding:34px 0 46px; }
  .billing-intro { padding-top:0; }
  .billing-intro h1 { font-size:clamp(40px,7.5vw,54px); max-width:560px; }
  .statement-example { max-width:570px; width:100%; margin:auto; }
  .statement-heading { display:flex; }
  .statement-period { text-align:right; margin-top:0; }
  .billing-feature-grid { grid-template-columns:1fr; }
  .billing-feature-grid article, .billing-feature-grid article:nth-child(even) { border-left:0; padding:25px 0; }
  .billing-interest { grid-template-columns:1fr; gap:15px; padding:24px; }
  .billing-feature-page .billing-pricing { grid-template-columns:1fr; gap:24px; }
}
@media(max-width:480px) {
  .billing-feature-page header nav .button { padding:11px 17px; }
  .statement-paper { padding:22px 16px; }
  .statement-heading { display:block; }
  .statement-period { text-align:left; margin-top:17px; }
  .statement-company small { font-size:11px; }
  .statement-transactions { font-size:11px; }
  .statement-transactions th { font-size:10px; }
  .statement-transactions th:first-child { width:28%; }
  .statement-transactions th:last-child { width:29%; }
  .statement-transactions td:first-child { font-size:10px; letter-spacing:-.02em; }
  .statement-transactions tfoot th { font-size:12px; }
  .statement-transactions tfoot td { font-size:14px; }
  .statement-example figcaption { font-size:11px; }
  .billing-feature-grid h3 { font-size:23px; }
  .billing-interest { padding:20px; }
}