:root{
  --black:#0c0e0b;
  --black-2:#141713;
  --black-3:#1c201a;
  --gold:#c9a227;
  --gold-light:#e9c766;
  --gold-pale:#f7dc8f;
  --gold-dark:#8f6b14;
  --cream:#fbf6ea;
  --cream-2:#f4ecd8;
  --paper:#fffdf7;
  --ink:#1a1c17;
  --ink-soft:#3f4239;
  --muted:#6b6f62;
  --line:#e3dcc6;
  --line-dark:#2c3028;
  --white:#ffffff;
  --radius:20px;
  --radius-sm:12px;
  --shadow:0 18px 44px rgba(12,14,11,.16);
  --shadow-soft:0 8px 26px rgba(12,14,11,.09);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Public Sans", system-ui, -apple-system, Segoe UI, sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:"Bitter", Georgia, serif; line-height:1.15; margin:0; color:inherit}
p{margin:0}
a{color:inherit}
img{max-width:100%; display:block}
.wrap{width:min(1160px, calc(100% - 40px)); margin:0 auto}
.gold-text{color:var(--gold-light)}
/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(12,14,11,.97);
  border-bottom:1px solid var(--line-dark);
  backdrop-filter:blur(8px);
}
.header-inner{display:flex; align-items:center; gap:20px; padding:12px 0; position:relative}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; flex-shrink:0}
.brand-mark{width:44px; height:44px; flex-shrink:0; border-radius:10px}
.brand-name{font-family:"Bitter",serif; font-weight:800; font-size:21px; letter-spacing:.04em; color:#fff; line-height:1; display:block}
.brand-sub{font-size:10.5px; letter-spacing:.18em; color:var(--gold-light); font-weight:700; margin-top:3px; display:block}
.main-nav{display:flex; gap:2px; margin-left:auto; align-items:center; flex-wrap:nowrap}
.main-nav a{
  color:#e8e4d5; text-decoration:none; font-size:14px; font-weight:600;
  padding:8px 8px; border-radius:999px; white-space:nowrap;
}
.main-nav a:hover{background:#23271f; color:#fff}
.header-actions{display:flex; gap:9px; margin-left:8px; flex-shrink:0}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:700; font-size:15px; text-decoration:none; cursor:pointer;
  border-radius:999px; padding:11px 22px; border:1.5px solid transparent;
  transition:transform .15s ease, background .15s ease, opacity .15s ease;
  line-height:1.25; text-align:center; font-family:inherit;
}
.btn:active{transform:translateY(1px)}
.btn-gold{background:linear-gradient(180deg, var(--gold-pale), var(--gold) 55%, #b8912a); color:#191a12; border-color:#a07d1c; box-shadow:0 6px 18px rgba(201,162,39,.35)}
.btn-gold:hover{filter:brightness(1.05)}
.btn-outline-light{border-color:#4a4f42; color:#f2efe2; background:transparent}
.btn-outline-light:hover{border-color:var(--gold); color:var(--gold-light)}
.btn-dark{background:var(--black); color:#fff; border-color:var(--black)}
.btn-dark:hover{background:var(--black-3)}
.btn-outline-dark{border-color:#c9c2a6; color:var(--ink); background:transparent}
.btn-outline-dark:hover{border-color:var(--gold-dark)}
.btn-lg{padding:14px 30px; font-size:16.5px}
.nav-toggle{display:none; margin-left:auto; background:none; border:1px solid #4a4f42; color:#fff; border-radius:10px; padding:9px 13px; font-size:15px; font-weight:700; cursor:pointer}
/* ---------- Hero ---------- */
.hero{background:var(--black); color:#f4f1e4; overflow:hidden; position:relative}
.hero::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(720px 380px at 85% -60px, rgba(201,162,39,.20), transparent 65%), radial-gradient(560px 320px at -80px 110%, rgba(201,162,39,.10), transparent 60%);
  pointer-events:none;
}
.hero-inner{position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:52px; padding:56px 0 72px; align-items:center}
.hero-logo-card{
  background:var(--cream); border-radius:18px; padding:14px 22px;
  display:inline-block; margin-bottom:26px; box-shadow:var(--shadow);
}
.hero-logo-card img{height:168px; width:auto}
.hero-eyebrow{display:inline-flex; align-items:center; gap:9px; border:1px solid #3a3f33; background:#171a14; color:var(--gold-light); font-size:13px; font-weight:700; letter-spacing:.08em; padding:7px 14px; border-radius:999px}
.hero-eyebrow .dot{width:8px; height:8px; border-radius:50%; background:var(--gold)}
.hero h1{font-size:clamp(38px, 5.2vw, 58px); font-weight:800; color:#fff; margin:22px 0 18px; letter-spacing:-.01em}
.hero h1 em{font-style:normal; color:var(--gold-light)}
.hero-lede{font-size:19px; color:#d9d5c2; max-width:34em}
.hero-cta{margin-top:30px; display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.hero-note{margin-top:16px; font-size:14.5px; color:#a9ad9c}
.hero-note strong{color:#e8e4d0; font-weight:700}
/* dashboard mock */
.dash{
  background:#171a14; border:1px solid #33382c; border-radius:22px;
  box-shadow:0 30px 70px rgba(0,0,0,.5); overflow:hidden;
}
.dash-top{display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid #2b2f24; background:#12140f}
.dash-top .win-dot{width:11px; height:11px; border-radius:50%; background:#3a3f33}
.dash-top .win-dot.gold{background:var(--gold)}
.dash-title{margin-left:6px; font-weight:700; font-size:14px; color:#e8e4d0}
.dash-title span{color:#8f937f; font-weight:500}
.dash-body{padding:18px}
.dash-greeting{font-family:"Bitter",serif; font-size:19px; font-weight:700; color:#fff}
.dash-date{font-size:13px; color:#9a9e8b; margin-bottom:14px}
.dash-stats{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.stat{background:#1f231b; border:1px solid #2e3327; border-radius:14px; padding:13px 14px}
.stat .k{font-size:12px; font-weight:700; letter-spacing:.07em; color:#9a9e8b; text-transform:uppercase}
.stat .v{font-family:"Bitter",serif; font-size:24px; font-weight:800; color:#fff; margin-top:2px}
.stat .v small{font-size:14px; color:#b9bda9; font-weight:600}
.stat .s{font-size:13px; color:#b9bda9}
.stat .s b{color:var(--gold-light); font-weight:700}
.dash-list{margin-top:14px; background:#1f231b; border:1px solid #2e3327; border-radius:14px; padding:6px 14px}
.dash-row{display:flex; align-items:center; gap:11px; padding:10px 0; border-bottom:1px solid #2b2f24; font-size:14.5px; color:#ddd9c6}
.dash-row:last-child{border-bottom:0}
.dash-row .n{margin-left:auto; font-weight:800; color:#fff; background:#2e3327; border-radius:999px; padding:2px 11px; font-size:13.5px; flex-shrink:0}
.dash-row .n.alert{background:var(--gold); color:#191a12}
.check-ic{width:21px; height:21px; border-radius:50%; background:#2e4630; color:#a8d5a2; display:inline-flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; font-weight:800}
.warn-ic{width:21px; height:21px; border-radius:50%; background:#4d3d12; color:var(--gold-pale); display:inline-flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; font-weight:800}
.dash-caption{font-size:12.5px; color:#83876f; text-align:center; padding:0 18px 14px}
/* ---------- Subpage hero ---------- */
.page-hero{background:var(--black); color:#f4f1e4; position:relative; overflow:hidden}
.page-hero::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(640px 300px at 88% -60px, rgba(201,162,39,.18), transparent 65%);
  pointer-events:none;
}
.page-hero-inner{position:relative; padding:52px 0 56px; max-width:760px}
.page-hero h1{font-size:clamp(32px, 4.4vw, 46px); font-weight:800; color:#fff; margin:16px 0 14px}
.page-hero p{font-size:18.5px; color:#d9d5c2}
/* ---------- Sections shared ---------- */
section{padding:76px 0}
.section-head{max-width:720px; margin-bottom:40px}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center}
.kicker{font-size:13px; font-weight:800; letter-spacing:.14em; color:var(--gold-dark); text-transform:uppercase; margin-bottom:12px}
.on-dark .kicker{color:var(--gold-light)}
.page-hero .kicker{color:var(--gold-light)}
.section-head h2{font-size:clamp(29px, 3.8vw, 40px); font-weight:800}
.section-head p{margin-top:14px; font-size:18px; color:var(--ink-soft)}
.on-dark .section-head p{color:#c9cbb8}
.bg-cream{background:var(--cream)}
.bg-paper{background:var(--paper)}
.bg-black{background:var(--black); color:#efedde}
.bg-black h2{color:#fff}
/* ---------- What it does ---------- */
.feature-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.feature-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:28px 28px 12px; box-shadow:var(--shadow-soft)}
.feature-card-head{display:flex; align-items:center; gap:14px; margin-bottom:8px}
.feature-ic{width:46px; height:46px; border-radius:13px; background:var(--black); display:flex; align-items:center; justify-content:center; flex-shrink:0}
.feature-ic svg{width:24px; height:24px; stroke:var(--gold-light); fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.feature-card h3{font-size:21px; font-weight:700}
.feature-list{list-style:none; margin:0; padding:0}
.feature-list li{display:flex; gap:11px; padding:11px 0; border-top:1px solid #efe8d2; font-size:16px; color:var(--ink-soft)}
.feature-list li:first-child{border-top:0}
.feature-list .tick{color:var(--gold-dark); font-weight:800; flex-shrink:0}
.feature-list strong{color:var(--ink); font-weight:700}
/* billing run demo */
.demo-card{margin-top:22px; background:var(--black); color:#efedde; border-radius:var(--radius); padding:30px; box-shadow:var(--shadow)}
.demo-card h3{color:#fff; font-size:22px}
.demo-card .demo-sub{color:#b9bda9; margin-top:6px; font-size:16px; max-width:46em}
.demo-table-wrap{margin-top:20px; border:1px solid #33382c; border-radius:14px; overflow:hidden}
table{border-collapse:collapse; width:100%}
.demo-table th{background:#12140f; color:#9a9e8b; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; text-align:right; padding:11px 14px; font-weight:700}
.demo-table th:first-child{text-align:left}
.demo-table td{padding:12px 14px; text-align:right; font-size:15px; border-top:1px solid #262a20; color:#ddd9c6; font-variant-numeric:tabular-nums}
.demo-table td:first-child{text-align:left; color:#fff; font-weight:600}
.demo-table td.total{font-weight:800; color:var(--gold-light)}
.demo-foot{display:flex; gap:14px; align-items:center; margin-top:18px; flex-wrap:wrap}
.demo-status{font-size:15px; color:#b9bda9}
.demo-status b{color:var(--gold-light)}
/* ---------- Roles ---------- */
.roles-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.role-card{border-radius:var(--radius); padding:32px; border:1px solid var(--line-dark); background:var(--black-2)}
.role-card.owner{background:linear-gradient(160deg, #23200f, var(--black-2) 55%); border-color:#4d421c}
.role-tag{display:inline-block; font-size:12.5px; font-weight:800; letter-spacing:.12em; padding:5px 12px; border-radius:999px; background:#2e3327; color:#d9d5c2}
.role-card.owner .role-tag{background:var(--gold); color:#191a12}
.role-card h3{color:#fff; font-size:24px; margin:16px 0 8px}
.role-card p.lede{color:#c9cbb8; font-size:16.5px}
.role-list{list-style:none; margin:18px 0 0; padding:0}
.role-list li{display:flex; gap:11px; padding:9px 0; border-top:1px solid #2b2f24; color:#ddd9c6; font-size:16px}
.role-list li:first-child{border-top:0}
.role-list .tick{color:var(--gold-light); font-weight:800; flex-shrink:0}
.role-list .no{color:#c96f5a; font-weight:800; flex-shrink:0}
.roles-note{margin-top:22px; text-align:center; color:#a9ad9c; font-size:15.5px}
.roles-note strong{color:#e8e4d0}
/* ---------- Beginner ---------- */
.beginner-grid{display:grid; grid-template-columns:.92fr 1.08fr; gap:48px; align-items:start}
.beginner-copy p{font-size:17.5px; color:var(--ink-soft); margin-top:16px}
.beginner-copy p:first-of-type{margin-top:0}
.steps{list-style:none; margin:0; padding:0; counter-reset:step}
.steps li{display:flex; gap:18px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px; margin-bottom:14px; box-shadow:var(--shadow-soft)}
.step-num{counter-increment:step; width:40px; height:40px; border-radius:50%; background:var(--black); color:var(--gold-light); font-family:"Bitter",serif; font-weight:800; font-size:18px; display:flex; align-items:center; justify-content:center; flex-shrink:0}
.step-num::before{content:counter(step)}
.steps h3{font-size:18.5px; font-weight:700}
.steps p{color:var(--ink-soft); font-size:15.5px; margin-top:3px}
/* guide page */
.guide-block{max-width:860px; margin:0 auto 54px}
.guide-block:last-child{margin-bottom:0}
.guide-block > h2{font-size:clamp(26px, 3.4vw, 34px); font-weight:800; margin-bottom:12px}
.guide-block > p{font-size:17.5px; color:var(--ink-soft); margin-bottom:14px}
.check-list{list-style:none; margin:0; padding:0}
.check-list li{display:flex; gap:12px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px 20px; margin-bottom:10px; font-size:16.5px; color:var(--ink-soft); box-shadow:var(--shadow-soft)}
.check-list .tick{color:var(--gold-dark); font-weight:800; flex-shrink:0}
.check-list strong{color:var(--ink)}
.records-list{list-style:none; margin:0; padding:0}
.records-list li{padding:13px 0; border-top:1px solid var(--line); font-size:16.5px; color:var(--ink-soft)}
.records-list li:first-child{border-top:0}
.records-list strong{color:var(--ink)}
.glossary{margin:0}
.glossary dt{font-family:"Bitter",serif; font-weight:700; font-size:18px; margin-top:20px}
.glossary dt:first-of-type{margin-top:4px}
.glossary dd{margin:4px 0 0; color:var(--ink-soft); font-size:16.5px}
.honest-note{background:var(--cream-2); border:1.5px solid #d9cf9f; border-radius:var(--radius); padding:24px 28px; font-size:16.5px; color:var(--ink-soft)}
.honest-note strong{color:var(--ink)}
/* ---------- Pricing ---------- */
.finder{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-soft); padding:26px 28px; margin-bottom:30px; display:grid; grid-template-columns:1fr 1fr 1.2fr; gap:22px; align-items:end}
.finder label{font-size:13.5px; font-weight:700; letter-spacing:.04em; color:var(--ink-soft); display:block; margin-bottom:8px}
.finder input{
  width:100%; font:inherit; font-size:18px; font-weight:700; color:var(--ink);
  border:1.5px solid #cfc8a8; border-radius:12px; padding:12px 14px; background:#fff;
}
.finder input:focus{outline:3px solid rgba(201,162,39,.35); border-color:var(--gold-dark)}
.finder-result{background:var(--black); color:#efedde; border-radius:14px; padding:16px 20px}
.finder-result .fr-k{font-size:12.5px; font-weight:700; letter-spacing:.08em; color:#9a9e8b; text-transform:uppercase}
.finder-result .fr-v{font-family:"Bitter",serif; font-size:21px; font-weight:800; color:#fff; margin-top:2px}
.finder-result .fr-v em{font-style:normal; color:var(--gold-light)}
.finder-result .fr-s{font-size:14px; color:#b9bda9}
.price-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; align-items:stretch}
.price-card{background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius); padding:32px 28px; display:flex; flex-direction:column; box-shadow:var(--shadow-soft); position:relative}
.price-card.featured{border-color:var(--gold-dark); box-shadow:0 18px 44px rgba(143,107,20,.20)}
.price-flag{position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--gold); color:#191a12; font-size:12.5px; font-weight:800; letter-spacing:.08em; padding:5px 14px; border-radius:999px; white-space:nowrap}
.price-card h3{font-size:22px; font-weight:800}
.price-card .who{color:var(--muted); font-size:15px; margin-top:4px}
.price-line{margin:20px 0 4px; display:flex; align-items:baseline; gap:6px}
.price-line .amount{font-family:"Bitter",serif; font-size:46px; font-weight:800; line-height:1}
.price-line .per{color:var(--muted); font-weight:600}
.price-feats{list-style:none; margin:18px 0 26px; padding:18px 0 0; border-top:1px solid var(--line)}
.price-feats li{display:flex; gap:10px; padding:6px 0; font-size:16px; color:var(--ink-soft)}
.price-feats .tick{color:var(--gold-dark); font-weight:800; flex-shrink:0}
.price-card .btn{margin-top:auto; width:100%}
.btn-choose[disabled]{opacity:.38; cursor:not-allowed; filter:grayscale(.3)}
.price-under{margin-top:18px; text-align:center; font-size:16.5px; color:var(--ink-soft)}
.price-under strong{color:var(--ink)}
.terms-gate{
  margin-top:26px; background:var(--cream-2); border:1.5px solid #d9cf9f; border-radius:var(--radius);
  padding:24px 28px; display:flex; gap:16px; align-items:flex-start;
}
.terms-gate input[type="checkbox"]{width:24px; height:24px; flex-shrink:0; margin-top:2px; accent-color:#8f6b14; cursor:pointer}
.terms-gate label{font-size:17px; font-weight:600; cursor:pointer; color:var(--ink)}
.terms-gate label a{color:#7a5c10; font-weight:800; text-decoration:underline; text-underline-offset:3px}
.terms-gate .gate-hint{font-size:14.5px; color:var(--muted); font-weight:400; margin-top:4px}
/* ---------- Legal ---------- */
.legal{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:40px 44px; box-shadow:var(--shadow-soft); max-width:920px}
.legal h3{font-size:19px; font-weight:700; margin:28px 0 8px}
.legal h3:first-of-type{margin-top:6px}
.legal p, .legal li{color:var(--ink-soft); font-size:16px}
.legal p{margin-bottom:10px}
.legal ul{margin:6px 0 12px; padding-left:22px}
.legal li{margin-bottom:5px}
.legal .updated{font-size:14px; color:var(--muted)}
.legal a{color:#7a5c10; font-weight:700}
/* ---------- Footer ---------- */
footer{background:var(--black); color:#c9cbb8; padding:52px 0 40px}
.footer-inner{display:flex; gap:28px; flex-wrap:wrap; align-items:flex-start; justify-content:space-between}
.footer-brand{display:flex; gap:13px; align-items:center}
.footer-brand .brand-mark{width:40px; height:40px}
.footer-links{display:flex; gap:22px; flex-wrap:wrap}
.footer-links a{color:#c9cbb8; text-decoration:none; font-size:15px; font-weight:600}
.footer-links a:hover{color:var(--gold-light)}
.footer-bottom{margin-top:30px; padding-top:22px; border-top:1px solid #2b2f24; font-size:14px; color:#83876f; display:flex; gap:14px; flex-wrap:wrap; justify-content:space-between}
.footer-bottom a{color:#c9cbb8}
/* ---------- Responsive ---------- */
@media (max-width: 1020px){
  .main-nav{display:none}
  .main-nav.open{display:flex; position:absolute; top:100%; left:0; right:0; background:var(--black); flex-direction:column; align-items:stretch; padding:12px 20px 18px; border-bottom:1px solid var(--line-dark); gap:2px}
  .main-nav.open a{padding:11px 12px; font-size:16px}
  .nav-toggle{display:block}
  .header-actions{margin-left:0}
  .header-actions .btn-login{display:none}
  .hero-inner{grid-template-columns:1fr; gap:40px; padding:44px 0 56px}
  .feature-grid, .roles-grid{grid-template-columns:1fr}
  .beginner-grid{grid-template-columns:1fr; gap:32px}
  .price-grid{grid-template-columns:1fr; max-width:520px; margin:0 auto}
  .price-card.featured{order:-1}
  .finder{grid-template-columns:1fr 1fr}
  .finder-result{grid-column:1 / -1}
}
@media (max-width: 560px){
  body{font-size:16px}
  section{padding:56px 0}
  .wrap{width:calc(100% - 32px)}
  .brand-sub{display:none}
  .header-actions .btn{padding:9px 15px; font-size:14px}
  .hero-logo-card img{height:132px}
  .dash-stats{grid-template-columns:1fr 1fr}
  .demo-card{padding:22px 18px}
  .demo-table thead{display:none}
  .demo-table, .demo-table tbody, .demo-table tr, .demo-table td{display:block; width:100%}
  .demo-table tr{padding:10px 14px 12px; border-top:1px solid #262a20}
  .demo-table tr:first-child{border-top:0}
  .demo-table td{border-top:0; padding:3px 0; text-align:right; display:flex; justify-content:space-between; align-items:baseline; gap:14px; font-size:14.5px}
  .demo-table td::before{content:attr(data-label); color:#9a9e8b; font-size:11.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; text-align:left}
  .demo-table td:first-child{font-size:15.5px}
  .demo-table td.total{font-size:17px; border-top:1px dashed #3a3f33; margin-top:5px; padding-top:8px}
  .legal{padding:28px 22px}
  .terms-gate{padding:20px}
  .finder{grid-template-columns:1fr; padding:22px}
  .feature-card{padding:24px 20px 8px}
  .role-card{padding:26px 22px}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
}