/* ============================================================
   Ledger & Lead — Catalog / Sales Site
   Design tokens: the "ledger" identity already established in
   the Agent Tools Showcase sales packet — kept deliberately
   separate from any single brokerage's brand, since this site
   sells the same toolkit across many brands.
   ============================================================ */

:root{
  --ink:#1b2430;
  --ledger:#0f3d2e;
  --ledger-2:#1b5e42;
  --brass:#a9862f;
  --brass-2:#c9a53f;
  --line:#c9c2b2;
  --paper:#f6f4ee;
  --paper-card:#fffdf8;

  --remax-blue:#003da5;
  --remax-red:#dc1c2e;

  --rn-yellow:#fcce01;
  --rn-black:#382e2c;
  --rn-blue:#87dadf;

  --radius:2px;
  --shadow: 0 10px 30px -12px rgba(15,61,46,0.35);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;overflow-x:hidden;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  font-size:16px;
  line-height:1.55;
}

h1,h2,h3,.display{
  font-family:'Iowan Old Style','Palatino Linotype',Georgia,serif;
  font-weight:600;
  letter-spacing:0.01em;
  color:var(--ledger);
}

a{color:var(--ledger-2);}

.bleed{
  width:100vw; position:relative; left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw;
}

/* ---------- Top bar ---------- */
.topbar{
  background:var(--ledger);
  color:#f2efe4;
  padding:0;
  border-bottom:4px solid var(--brass);
}
.topbar-inner{
  max-width:1200px; margin:0 auto; padding:16px 24px;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
}
.brandmark{
  font-family:'Iowan Old Style',Georgia,serif;
  font-size:1.3rem; font-weight:700; color:#fff;
  letter-spacing:0.02em;
}
.brandmark span{color:var(--brass-2);}
.topnav{display:flex; gap:26px; font-size:0.92rem;}
.topnav a{color:#e7e2d2; text-decoration:none; border-bottom:1px solid transparent; padding-bottom:2px;}
.topnav a:hover{border-color:var(--brass-2);}

/* ---------- Hero ---------- */
.hero{background:var(--ledger); color:#f2efe4; padding:64px 0 78px;}
.hero-inner{max-width:1180px; margin:0 auto; padding:0 24px;}
.kicker{
  text-transform:uppercase; letter-spacing:0.14em; font-size:0.78rem;
  color:var(--brass-2); font-weight:700; margin-bottom:14px;
}
.hero h1{color:#fff; font-size:2.6rem; max-width:820px; margin:0 0 18px;}
.hero p.lead{max-width:640px; color:#d9d4c2; font-size:1.08rem; margin:0 0 26px;}
.hero-stats{display:flex; gap:36px; flex-wrap:wrap; margin-top:10px;}
.hero-stat b{display:block; font-family:'Iowan Old Style',Georgia,serif; font-size:1.7rem; color:var(--brass-2);}
.hero-stat span{font-size:0.82rem; color:#c7c2b0; text-transform:uppercase; letter-spacing:0.08em;}

/* ---------- Ledger tab selector (signature element) ---------- */
.tabset{max-width:1180px; margin:-40px auto 0; padding:0 24px; position:relative; z-index:5;}
.tabs{display:flex; gap:4px; flex-wrap:wrap;}
.tab{
  appearance:none; border:none; cursor:pointer;
  font-family:'Iowan Old Style',Georgia,serif; font-size:1rem; font-weight:700;
  padding:16px 26px 14px; border-radius:8px 8px 0 0;
  box-shadow:var(--shadow);
  transform:translateY(6px);
  transition:transform .15s ease;
  color:#fff;
}
.tab:hover{transform:translateY(2px);}
.tab.active{transform:translateY(0); box-shadow:0 4px 0 rgba(0,0,0,0.15) inset, var(--shadow);}
.tab[data-brand="dfw"]{background:linear-gradient(180deg,var(--ledger-2),var(--ledger));}
.tab[data-brand="remax"]{background:linear-gradient(180deg,#0d4fc7,var(--remax-blue));}
.tab[data-brand="rn"]{background:linear-gradient(180deg,#4c4038,var(--rn-black)); color:var(--rn-yellow);}
.tab small{display:block; font-family:Arial,sans-serif; font-weight:400; font-size:0.72rem; opacity:0.85; letter-spacing:0.03em; margin-top:2px;}

.tabpanel-wrap{
  background:var(--paper-card);
  border:1px solid var(--line);
  border-radius:0 8px 8px 8px;
  box-shadow:var(--shadow);
  padding:36px;
}
.tabpanel{display:none;}
.tabpanel.active{display:block;}

.panel-head{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:22px; border-bottom:1px solid var(--line); padding-bottom:18px;}
.panel-head h2{margin:0 0 6px; font-size:1.5rem;}
.panel-head p{margin:0; color:#5b5647; max-width:560px;}
.swatches{display:flex; gap:8px;}
.swatch{width:22px; height:22px; border-radius:3px; border:1px solid rgba(0,0,0,0.15);}

/* ---------- Package grid ---------- */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.card{
  background:#fff; border:1px solid var(--line); border-radius:6px; overflow:hidden;
  cursor:pointer; transition:transform .15s ease, box-shadow .15s ease;
  display:flex; flex-direction:column;
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow);}
.card .thumb{width:100%; aspect-ratio:16/10.5; object-fit:cover; object-position:top; display:block; border-bottom:1px solid var(--line);}
.card .cardbody{padding:16px 18px 20px;}
.card h3{font-size:1.02rem; margin:0 0 6px;}
.card p{font-size:0.87rem; color:#5b5647; margin:0;}
.tag-row{margin-top:10px; display:flex; gap:6px; flex-wrap:wrap;}
.tag{font-size:0.68rem; text-transform:uppercase; letter-spacing:0.05em; background:var(--paper); border:1px solid var(--line); padding:3px 8px; border-radius:20px; color:#6b6552;}
.btn-live{
  margin-top:14px; width:100%; background:var(--ledger); color:#fff; border:none;
  padding:10px 14px; border-radius:4px; font-size:0.85rem; font-weight:700;
  cursor:pointer; transition:background .15s ease;
}
.btn-live:hover{background:var(--ledger-2);}

/* ---------- Pricing ---------- */
.pricing-section{max-width:1180px; margin:64px auto; padding:0 24px;}
.pricing-section h2{text-align:center; font-size:1.9rem;}
.pricing-sub{text-align:center; color:#5b5647; max-width:560px; margin:0 auto 36px;}
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.price-card{background:var(--paper-card); border:1px solid var(--line); border-radius:6px; padding:30px 26px; text-align:center;}
.price-card.featured{border-color:var(--brass); box-shadow:var(--shadow); position:relative;}
.price-card.featured::before{
  content:"MOST POPULAR"; position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:var(--brass); color:#fff; font-size:0.65rem; letter-spacing:0.08em; padding:4px 12px; border-radius:20px;
}
.price-card h3{margin:0 0 4px;}
.price-amount{font-family:'Iowan Old Style',Georgia,serif; font-size:2.1rem; color:var(--ledger); margin:10px 0;}
.price-amount span{font-size:0.9rem; color:#8a836c;}
.price-card ul{list-style:none; padding:0; margin:14px 0 0; text-align:left; font-size:0.88rem; color:#4a4536;}
.price-card li{padding:6px 0; border-top:1px solid var(--line);}
.price-card li:first-child{border-top:none;}

/* ---------- CTA ---------- */
.cta-band{background:var(--ink); color:#f2efe4; text-align:center; padding:56px 24px;}
.cta-band h2{color:#fff;}
.cta-band p{color:#cfcabb; max-width:520px; margin:10px auto 24px;}
.btn{
  display:inline-block; background:var(--brass); color:#fff; text-decoration:none;
  padding:13px 30px; border-radius:4px; font-weight:700; font-size:0.92rem;
  letter-spacing:0.02em; border:none; cursor:pointer;
}
.btn:hover{background:var(--brass-2);}
.btn-ghost{background:transparent; border:1px solid #7d7867; color:#e7e2d2;}
.btn-ghost:hover{background:rgba(255,255,255,0.08); color:#fff;}

/* ---------- Footer ---------- */
footer{padding:30px 24px; text-align:center; color:#8a836c; font-size:0.82rem;}

/* ---------- Live page preview modal ---------- */
.lightbox{
  position:fixed; inset:0; background:rgba(15,20,15,0.88); z-index:100;
  display:none; align-items:center; justify-content:center; padding:26px;
}
.lightbox.open{display:flex;}
.lightbox-live-inner{
  width:100%; height:100%; max-width:1200px; background:#fff; border-radius:8px;
  overflow:hidden; box-shadow:0 30px 60px rgba(0,0,0,0.5); display:flex; flex-direction:column;
}
.lightbox-live-bar{
  background:var(--ledger); color:#fff; padding:12px 20px; display:flex;
  align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  border-bottom:3px solid var(--brass);
}
.lightbox-live-bar span:first-child{font-family:'Iowan Old Style',Georgia,serif; font-weight:700; font-size:1.05rem;}
.lightbox-live-hint{font-size:0.78rem; color:#c7c2b0;}
#lightbox-iframe{flex:1; width:100%; border:none; background:#fff;}
.lightbox-close{
  position:absolute; top:16px; right:22px; background:none; border:none; color:#fff;
  font-size:1.8rem; cursor:pointer; line-height:1; z-index:2;
}

/* ---------- Jump nav (calculators page) ---------- */
.jumpnav{
  position:sticky; top:0; z-index:20; background:var(--ledger); border-bottom:3px solid var(--brass);
  overflow-x:auto; white-space:nowrap;
}
.jumpnav-inner{max-width:1180px; margin:0 auto; padding:12px 24px; display:flex; gap:10px;}
.jumpnav a{
  color:#e7e2d2; text-decoration:none; font-size:0.85rem; padding:8px 14px;
  border-radius:20px; border:1px solid rgba(255,255,255,0.18); flex:0 0 auto;
}
.jumpnav a:hover{background:rgba(255,255,255,0.1); border-color:var(--brass-2);}

.state-notice{background:#fbf3e0; border-bottom:1px solid var(--brass-2);}
.state-notice-inner{
  max-width:1000px; margin:0 auto; padding:16px 24px;
  display:flex; align-items:flex-start; gap:14px;
}
.state-notice-icon{font-size:1.3rem; line-height:1.4; flex:0 0 auto;}
.state-notice p{margin:0; font-size:0.92rem; color:#4a4536; line-height:1.55;}
.tag-state{background:var(--brass); color:#fff; border-color:var(--brass);}

.calc-section{max-width:1000px; margin:0 auto; padding:56px 24px; scroll-margin-top:70px; border-bottom:1px solid var(--line);}
.calc-section:last-child{border-bottom:none;}
.calc-section h2{font-size:1.6rem; margin-bottom:6px;}
.calc-section .calc-sub{color:#5b5647; margin:0 0 22px;}
.calc-frame-wrap{border:1px solid var(--line); border-radius:8px; overflow:hidden; box-shadow:var(--shadow); background:#fff;}
.calc-frame-wrap iframe{width:100%; height:640px; border:none; display:block;}
.calc-placeholder{padding:40px; text-align:center; color:#5b5647;}
.calc-placeholder img{max-width:100%; border-radius:6px; margin-bottom:16px; border:1px solid var(--line);}

/* Inline calculator embeds (no iframes — each widget's CSS is scoped to its
   own #calc-embed-<slug> wrapper by build_inline_calcs.py, so multiple
   calculators can safely share one page with no style or ID collisions) */
.calc-embed-wrap{
  border:1px solid var(--line); border-radius:8px; overflow:hidden;
  box-shadow:var(--shadow); background:#fff;
}
.calc-embed{padding:16px;}

@media (max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr) !important;}
  .price-grid{grid-template-columns:1fr !important;}
  .hero h1{font-size:1.9rem;}
}
@media (max-width:600px){
  .grid{grid-template-columns:1fr !important;}
  .tabpanel-wrap{padding:20px;}
  .panel-head{flex-direction:column; align-items:flex-start;}
}

/* ---------- Order form page ---------- */
.order-wrap{max-width:900px; margin:0 auto; padding:20px 24px 70px;}
.order-step{display:flex; gap:20px; padding:34px 0; border-bottom:1px solid var(--line);}
.order-step:last-child{border-bottom:none;}
.order-step-num{
  flex:0 0 auto; width:36px; height:36px; border-radius:50%; background:var(--ledger);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:'Iowan Old Style',Georgia,serif; font-weight:700; font-size:1.05rem;
}
.order-step-body{flex:1; min-width:0;}
.order-step-body h2{font-size:1.25rem; margin:2px 0 10px;}
.order-sub{color:#5b5647; font-size:0.88rem; margin:0 0 16px;}

.tier-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.tier-card{position:relative; cursor:pointer;}
.tier-card input{position:absolute; opacity:0; pointer-events:none;}
.tier-card-inner{
  border:2px solid var(--line); border-radius:6px; padding:18px; text-align:center;
  background:#fff; transition:border-color .15s ease, box-shadow .15s ease; position:relative;
}
.tier-card input:checked + .tier-card-inner{border-color:var(--brass); box-shadow:var(--shadow);}
.tier-card-inner h3{margin:0 0 4px; font-size:1.05rem;}
.tier-price{font-family:'Iowan Old Style',Georgia,serif; font-size:1.5rem; color:var(--ledger); margin:4px 0;}
.tier-card-inner p{margin:0; font-size:0.85rem; color:#5b5647;}
.tier-badge{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:var(--brass); color:#fff; font-size:0.62rem; letter-spacing:0.06em;
  padding:3px 10px; border-radius:20px; text-transform:uppercase;
}

.page-counter{font-size:0.8rem; font-weight:400; color:var(--brass); font-family:Arial,sans-serif; margin-left:8px;}
.page-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.page-check{
  display:flex; align-items:flex-start; gap:8px; border:1px solid var(--line); border-radius:5px;
  padding:10px 12px; font-size:0.85rem; cursor:pointer; background:#fff; transition:border-color .15s ease;
}
.page-check.checked{border-color:var(--brass); background:#fffdf4;}
.page-check.disabled{opacity:0.4; cursor:not-allowed;}
.page-check input{margin-top:2px;}

.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.form-grid label, .order-step label{display:flex; flex-direction:column; gap:5px; font-size:0.85rem; color:#3a3226; font-family:Arial,sans-serif;}
.order-step input[type="text"], .order-step input[type="email"], .order-step textarea{
  border:1px solid var(--line); border-radius:4px; padding:9px 11px; font-size:0.92rem;
  font-family:Arial,sans-serif; color:var(--ink); background:#fffdf8;
}
.order-step textarea{width:100%; resize:vertical; font-family:Arial,sans-serif;}
.full-width{width:100%; margin-top:14px;}

.color-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:6px;}
.color-grid label{flex-direction:row; align-items:center; flex-wrap:wrap; gap:8px;}
.color-grid input[type="text"]{flex:1; min-width:90px;}
.color-grid input[type="color"]{width:36px; height:36px; border:1px solid var(--line); border-radius:4px; padding:0; cursor:pointer;}

.brief-output-wrap{margin-top:18px; border:1px solid var(--line); border-radius:6px; overflow:hidden;}
.brief-toolbar{
  background:var(--ledger); color:#fff; padding:9px 16px; display:flex;
  align-items:center; justify-content:space-between; font-size:0.85rem;
}
.btn-copy{background:var(--brass); color:#fff; border:none; padding:6px 14px; border-radius:4px; font-size:0.8rem; font-weight:700; cursor:pointer;}
.btn-copy:hover{background:var(--brass-2);}
.btn-copy.copied{background:#3d7a4f;}
#brief-output{
  margin:0; padding:18px; background:#fffdf8; font-family:'SF Mono','Consolas',monospace;
  font-size:0.78rem; line-height:1.6; white-space:pre-wrap; max-height:420px; overflow-y:auto;
}
.order-note{font-size:0.78rem; color:#8a836c; margin-top:10px;}
.order-confirm{
  margin-top:16px; background:#eef6ee; border:1px solid #8fbf9a; color:#1e4d2b;
  border-radius:6px; padding:16px 18px; font-size:0.92rem;
}
.order-confirm #order-confirm-headline{font-weight:700; margin-bottom:10px;}
#countdown-num{
  display:inline-block; min-width:1.2em; text-align:center; font-family:'Iowan Old Style',Georgia,serif;
  font-size:1.15em; color:var(--brass);
}
.order-confirm-step{padding:4px 0 4px 2px; font-size:0.88rem;}
.order-confirm-step.attn{font-weight:700; color:#8a4a12; background:#fdf0dd; border-radius:4px; padding:8px 10px; margin:6px 0;}

.logo-warning{
  display:none; margin:0 0 14px; padding:16px 18px; border-radius:6px;
  background:#fdeceb; border:2px solid #c0392b; color:#7a1f14;
  font-size:1rem; font-weight:800; text-align:center; letter-spacing:0.01em;
}
.logo-warning.show{display:block;}
.logo-warning.ok{
  background:#eef6ee; border-color:#8fbf9a; color:#1e4d2b; font-weight:600; font-size:0.9rem;
}

@media (max-width:760px){
  .tier-cards{grid-template-columns:1fr;}
  .page-grid{grid-template-columns:1fr 1fr;}
  .form-grid{grid-template-columns:1fr;}
  .color-grid{grid-template-columns:1fr;}
}
@media (max-width:480px){
  .page-grid{grid-template-columns:1fr;}
}

/* ---------- About page ---------- */
.about-wrap{max-width:900px; margin:0 auto; padding:10px 24px 20px;}
.about-section{padding:30px 0; border-bottom:1px solid var(--line);}
.about-section:last-child{border-bottom:none;}
.about-section h2{font-size:1.3rem; margin:0 0 12px;}
.about-section p{color:#3a3226; line-height:1.65; margin:0;}
.belief-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:16px;}
.belief-card{background:var(--paper-card); border:1px solid var(--line); border-radius:6px; padding:20px;}
.belief-card h3{font-size:1rem; margin:0 0 8px; color:var(--ledger);}
.belief-card p{font-size:0.88rem; color:#4a4536; margin:0;}

/* ---------- Legal pages (privacy) ---------- */
.legal-wrap{max-width:820px; margin:0 auto; padding:10px 24px 60px;}
.legal-section{padding:24px 0; border-bottom:1px solid var(--line);}
.legal-section:last-child{border-bottom:none;}
.legal-section h2{font-size:1.15rem; margin:0 0 10px;}
.legal-section p{color:#3a3226; line-height:1.65; margin:0 0 10px;}
.legal-section ul{margin:0 0 10px; padding-left:22px; color:#3a3226; line-height:1.7;}
.legal-section a{color:var(--ledger-2); text-decoration:underline;}

@media (max-width:760px){
  .belief-grid{grid-template-columns:1fr;}
}