/* Billing Manager — marketing site design system. Shares the app's color
   tokens/fonts (ink/paper/cedar/brass) for brand consistency between the
   marketing pages and the admin app, but defines its own layout classes
   (hero, feature-grid, cta-band, site-nav) since a landing page's shape is
   very different from the admin dashboard. */

:root{
  --ink:#101B2D; --ink-2:#182741; --ink-3:#22314D; --ink-line:rgba(255,255,255,0.12);
  --paper:#F2ECDC; --paper-2:#E7DFC7; --paper-line:rgba(16,27,45,0.14);
  --cedar:#2F5D4F; --cedar-2:#3E7A67;
  --brass:#C9A15A; --brass-light:#E1C486;
  --brick:#AE4A3B; --brick-light:#E9C9C3;
  --slate:#64758C; --cream:#EFE9D8;
  --radius:10px;
  --card-bg:#fff;
  --body-bg:var(--paper);
  --text:var(--ink);
}
:root[data-theme="dark"]{
  --paper:#161F30; --paper-2:#1E2A40; --paper-line:rgba(239,233,216,0.12);
  --card-bg:#1B2536; --body-bg:#0E1522; --text:var(--cream); --slate:#8C9BB5;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#161F30; --paper-2:#1E2A40; --paper-line:rgba(239,233,216,0.12);
    --card-bg:#1B2536; --body-bg:#0E1522; --text:var(--cream); --slate:#8C9BB5;
  }
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Inter',sans-serif; background:var(--body-bg); color:var(--text); -webkit-font-smoothing:antialiased; overflow-x:hidden;}
h1,h2,h3,h4{font-family:'Fraunces',serif; font-weight:600; line-height:1.15;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.mono{font-family:'IBM Plex Mono',monospace;}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px;}

/* ---------- Nav ---------- */
.site-nav{position:sticky; top:0; z-index:40; background:var(--body-bg); border-bottom:1px solid var(--paper-line); backdrop-filter:blur(6px);}
.site-nav .wrap{display:flex; align-items:center; justify-content:space-between; padding:14px 24px; gap:16px; flex-wrap:wrap;}
.site-logo{display:flex; align-items:center; gap:10px; font-family:'Fraunces',serif; font-weight:700; font-size:18px;}
.site-logo span{width:32px; height:32px; border-radius:7px; background:var(--cedar); color:var(--brass-light); display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace; font-size:13px;}
.site-links{display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
.site-links a{font-size:13.5px; font-weight:600; color:var(--slate); transition:color .12s;}
.site-links a:hover, .site-links a.active{color:var(--text);}
.site-nav-cta{display:flex; align-items:center; gap:10px;}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; font-weight:700; font-size:14px; padding:12px 22px; border-radius:6px; border:1px solid transparent; transition:all .12s; cursor:pointer;}
.btn-primary{background:var(--cedar); color:#fff;}
.btn-primary:hover{background:var(--cedar-2);}
.btn-brass{background:var(--brass); color:var(--ink);}
.btn-brass:hover{background:var(--brass-light);}
.btn-ghost{background:transparent; border-color:var(--paper-line); color:var(--text);}
.btn-ghost:hover{border-color:var(--cedar);}
.btn-sm{padding:9px 16px; font-size:13px;}

/* ---------- Hero ---------- */
.hero{padding:76px 0 64px;}
.hero .eyebrow{display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--cedar-2); background:var(--paper-2); padding:6px 12px; border-radius:20px; margin-bottom:20px;}
.hero h1{font-size:clamp(32px,5vw,52px); max-width:800px; margin-bottom:18px;}
.hero p.lead{font-size:18px; color:var(--slate); max-width:620px; margin-bottom:30px; line-height:1.55;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:36px;}
.hero-tagline{font-family:'Fraunces',serif; font-style:italic; font-size:20px; color:var(--cedar-2);}

/* ---------- Sections ---------- */
.section{padding:56px 0;}
.section-head{max-width:640px; margin-bottom:36px;}
.section-head .kicker{font-family:'IBM Plex Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--brass); margin-bottom:10px; display:block;}
.section-head h2{font-size:clamp(24px,3.4vw,34px); margin-bottom:12px;}
.section-head p{color:var(--slate); font-size:15.5px; line-height:1.6;}

/* ---------- Feature grid ---------- */
.feature-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px;}
.feature-card{background:var(--card-bg); border:1px solid var(--paper-line); border-radius:var(--radius); padding:22px 24px;}
.feature-card h3{font-size:16px; margin-bottom:10px; font-family:'Inter',sans-serif; font-weight:700;}
.feature-card ul{list-style:none;}
.feature-card li{position:relative; padding-left:20px; margin-bottom:9px; font-size:14px; color:var(--slate); line-height:1.5;}
.feature-card li:last-child{margin-bottom:0;}
.feature-card li::before{content:'✓'; position:absolute; left:0; top:0; color:var(--cedar-2); font-weight:700;}

/* ---------- Audience / pill list ---------- */
.pill-row{display:flex; flex-wrap:wrap; gap:10px;}
.pill{background:var(--paper-2); border:1px solid var(--paper-line); padding:9px 16px; border-radius:20px; font-size:13.5px; font-weight:600;}

/* ---------- Callout / why-choose ---------- */
.callout-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px;}
.callout-card{padding:20px; border-left:3px solid var(--brass); background:var(--paper-2); border-radius:0 var(--radius) var(--radius) 0;}
.callout-card .num{font-family:'Fraunces',serif; font-size:26px; color:var(--cedar-2); margin-bottom:6px;}
.callout-card p{font-size:13.5px; color:var(--slate);}

/* ---------- Steps (How It Works) ---------- */
.steps{counter-reset:step; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px;}
.step{position:relative; padding:22px 20px 20px; background:var(--card-bg); border:1px solid var(--paper-line); border-radius:var(--radius);}
.step::before{counter-increment:step; content:counter(step); display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:var(--cedar); color:#fff; font-family:'IBM Plex Mono',monospace; font-size:13px; margin-bottom:14px;}
.step p{font-size:14px; color:var(--slate); line-height:1.5;}

/* ---------- Industry cards (home page grid to sub-pages) ---------- */
.industry-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px;}
.industry-card{display:block; background:var(--card-bg); border:1px solid var(--paper-line); border-radius:var(--radius); padding:24px; transition:border-color .12s, transform .12s;}
.industry-card:hover{border-color:var(--cedar); transform:translateY(-2px);}
.industry-card .ic{font-size:26px; margin-bottom:12px;}
.industry-card h3{font-size:16px; margin-bottom:6px; font-family:'Inter',sans-serif; font-weight:700;}
.industry-card p{font-size:13.5px; color:var(--slate); line-height:1.5;}
.industry-card .go{margin-top:12px; font-size:12.5px; font-weight:700; color:var(--cedar-2);}

/* ---------- CTA band ---------- */
.cta-band{background:var(--ink); color:var(--cream); border-radius:16px; padding:52px 40px; text-align:center; margin:20px 0;}
.cta-band h2{color:#fff; font-size:clamp(22px,3vw,30px); margin-bottom:12px;}
.cta-band p{color:rgba(239,233,216,.7); margin-bottom:26px; font-size:15px;}
.cta-band .hero-actions{justify-content:center;}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--paper-line); padding:40px 0 30px; margin-top:40px;}
.site-footer .wrap{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:24px;}
.site-footer .foot-links{display:flex; gap:20px; flex-wrap:wrap;}
.site-footer .foot-links a{font-size:13px; color:var(--slate);}
.site-footer .foot-links a:hover{color:var(--text);}
.site-footer .copyright{font-size:12.5px; color:var(--slate); margin-top:20px; width:100%;}

@media (max-width:640px){
  .hero{padding:52px 0 40px;}
  .cta-band{padding:36px 22px;}
  .site-nav .site-links{order:3; width:100%; justify-content:flex-start; gap:16px; overflow-x:auto; padding-bottom:4px;}
}