/* ============================================================
   page-kit.css — bespoke, mockup-quality composed components.
   Used to rebuild pages page-by-page (hero-split with a framed
   product panel, navy stat/figure bands, feature rows). Brand
   palette only; dark used strictly as accent bands, never a page.
   ============================================================ */

/* ---- split hero: text + framed product panel ---- */
.bb-hero{display:grid;gap:36px;align-items:center}
@media(min-width:920px){.bb-hero{grid-template-columns:1fr 1.05fr;gap:60px}}
.bb-hero .bb-htext h1{font-size:clamp(40px,5.2vw,64px);line-height:1.02;margin-top:14px}
.bb-hero .bb-htext .lead{margin-top:18px;max-width:30em}
.bb-hero .hbtns{margin-top:26px}
.bb-priceline{display:flex;align-items:baseline;gap:10px;margin-top:22px;flex-wrap:wrap}
.bb-priceline b{font-family:Fraunces,Georgia,serif;font-weight:500;font-size:34px;color:var(--ink);line-height:1}
.bb-priceline span{color:var(--muted);font-size:15px}

/* framed product panel (the "screenshot in a frame" look) + ring motif */
.bb-media{position:relative;isolation:isolate}
.bb-media::before{content:none}
.bb-panel{position:relative;z-index:1;background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 30px 60px -36px rgba(14,31,51,.35);padding:22px}
.bb-panel > h2{font-size:20px;margin-bottom:14px}
@media(max-width:920px){.bb-media::before{width:320px;height:320px;right:-150px;top:-110px}}

/* ---- navy stat / figure band (dark accent, not a page) ---- */
/* !important so it beats skin section-rhythm backgrounds on rebuilt pages */
.bb-statband{background:var(--ink)!important;color:#fff}
.bb-statband .eyebrow{color:#5fb0e6}
.bb-statband h2,.bb-statband .lead{color:#fff}
.bb-stats{display:grid;gap:18px;grid-template-columns:1fr 1fr;margin-top:26px}
@media(min-width:760px){.bb-stats{grid-template-columns:repeat(4,1fr)}}
.bb-stat{border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:20px 18px;background:rgba(255,255,255,.02)}
.bb-stat .n{font-family:Fraunces,Georgia,serif;font-weight:500;font-size:22px;line-height:1.15;color:#fff}
.bb-stat .l{color:#9FB6CE;font-size:13.5px;margin-top:8px;line-height:1.45}

/* ---- tidy the pricing calculator inside the framed panel ---- */
.bb-panel{padding:26px}
.bb-panel > h2{font-size:19px;margin-bottom:18px}
.bb-panel .rate-review{display:grid;gap:20px;grid-template-columns:1fr}
.bb-panel .rate-review > div:first-child > p{font-size:13px;color:var(--muted);margin-top:10px}
.bb-panel .price-result{background:var(--sand);border:1px solid var(--line);border-radius:14px;padding:22px}
.bb-panel .price-result output{font-family:Fraunces,Georgia,serif;font-weight:500;font-size:46px;line-height:1;display:block;margin:8px 0 8px;color:var(--ink)}
.bb-panel .price-result .btn-blue{margin-top:14px}
.bb-panel .price-result span{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.bb-panel .price-result #core-breakdown{font-size:12px;color:var(--muted);margin-bottom:12px}
.bb-panel label{font-size:13px;font-weight:600;color:var(--ink);display:block;margin-bottom:6px}
.bb-panel input[type=number]{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:16px}
.bb-panel form > p{font-size:12px;color:var(--muted);margin-top:8px}

/* ============ mockup-match components ============ */
:root{--sansd:'Plus Jakarta Sans',ui-sans-serif,system-ui,sans-serif}
/* sans display headline (matches mockups that used a geometric sans) */
.bb-h-sans{font-family:var(--sansd)!important;font-weight:800;letter-spacing:-.02em;line-height:1.04}
.bb-h-sans.w700{font-weight:700}

/* centered hero */
.bb-hero-center{max-width:760px;margin:0 auto;text-align:center}
.bb-hero-center h1{font-size:clamp(42px,5.4vw,66px);margin-top:14px}
.bb-hero-center .lead{margin:18px auto 26px;max-width:34em}
.bb-hero-center .hbtns{justify-content:center}

/* 4-step stepper (bordered, like the mockup) */
.bb-steps{display:grid;grid-template-columns:1fr;border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:36px;background:#fff}
@media(min-width:720px){.bb-steps{grid-template-columns:repeat(4,1fr)}}
.bb-steps > div{padding:22px 20px;border-bottom:1px solid var(--line)}
@media(min-width:720px){.bb-steps > div{border-bottom:0;border-right:1px solid var(--line)}.bb-steps > div:last-child{border-right:0}}
.bb-steps .k{font-family:var(--sansd);font-weight:700;font-size:13px;color:var(--blue)}
.bb-steps .t{font-family:var(--sansd);font-weight:700;font-size:18px;letter-spacing:-.01em;margin:9px 0 5px}
.bb-steps p{font-size:14px;color:var(--muted)}

/* ledger table (status pills + reconcile line) */
.bb-ledgerhead{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.bb-ledgerhead .note{color:var(--muted);font-size:14px}
.bb-ledger{width:100%;border:1px solid var(--line);border-radius:14px;border-collapse:separate;border-spacing:0;overflow:hidden;font-size:15px;background:#fff}
.bb-ledger th{background:var(--sand);text-align:left;font-family:var(--sansd);font-weight:700;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding:13px 18px;border-bottom:1px solid var(--line)}
.bb-ledger td{padding:17px 20px;border-bottom:1px solid var(--line)}
.bb-ledger tr:last-child td{border-bottom:0}
.bb-ledger .r{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.bb-ledger .pname{font-weight:700}.bb-ledger .psub{font-size:12.5px;color:var(--muted)}
.bb-pill{display:inline-block;font-family:var(--sansd);font-size:11px;font-weight:700;padding:5px 13px;border-radius:999px}
.bb-pill.ok{background:#E4F6F0;color:#13795f}.bb-pill.bad{background:#FDE7E7;color:#C23636}.bb-pill.warn{background:#FEF2E2;color:#9A6514}

/* methods grid (bordered cells) */
.bb-methods{display:grid;grid-template-columns:1fr;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
@media(min-width:720px){.bb-methods{grid-template-columns:repeat(3,1fr)}}
.bb-methods > div{padding:24px;border-bottom:1px solid var(--line)}
@media(min-width:720px){.bb-methods > div{border-bottom:0;border-right:1px solid var(--line)}.bb-methods > div:last-child{border-right:0}}
.bb-methods .k{font-family:var(--sansd);font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);margin-bottom:10px}
.bb-methods h3{font-family:var(--sansd);font-weight:700;font-size:18px}
.bb-methods p{color:var(--muted);font-size:14px;margin-top:7px}

/* ============ comparison matrix (always-visible, BB column highlighted) ============ */
.bb-cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:18px;background:#fff}
.bb-cmp{width:100%;min-width:820px;border-collapse:separate;border-spacing:0;font:500 14px/1.45 var(--ui)}
.bb-cmp thead th{padding:18px 14px;vertical-align:bottom;text-align:center;font-family:var(--sansd);font-weight:700;color:var(--ink);border-bottom:1px solid var(--line)}
.bb-cmp thead th .sub{display:block;font-family:var(--ui);font-weight:500;font-size:11px;color:var(--muted);margin-top:4px}
.bb-cmp thead th:first-child{text-align:left}
.bb-cmp tbody th{position:sticky;left:0;z-index:1;text-align:left;font-weight:600;color:var(--ink);background:#fff;padding:14px 16px;border-bottom:1px solid var(--line);min-width:220px}
.bb-cmp tbody th small{display:block;font-weight:500;color:var(--muted);font-size:12px}
.bb-cmp td{padding:14px 12px;text-align:center;border-bottom:1px solid var(--line);color:var(--muted)}
.bb-cmp tbody tr:last-child th,.bb-cmp tbody tr:last-child td{border-bottom:0}
.bb-cmp .yes{color:var(--green);font-weight:700}
.bb-cmp .no{color:#c3cedb}
.bb-cmp .txt{font-size:12.5px;color:var(--muted);line-height:1.35}
/* highlighted Booking Brain column */
.bb-cmp .bbcol{background:var(--sand)}
.bb-cmp thead .bbcol{background:var(--blue);color:#fff;border-top-left-radius:14px;border-top-right-radius:14px;padding-top:14px}
.bb-cmp thead .bbcol .sub{color:#cfe3f4}
.bb-cmp thead .bbcol .tag{display:inline-block;font-family:var(--ui);font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:rgba(255,255,255,.2);padding:3px 8px;border-radius:999px;margin-bottom:7px}
.bb-cmp tbody .bbcol{color:var(--ink);font-weight:600}
.bb-cmp tbody tr:last-child .bbcol{border-bottom-left-radius:14px;border-bottom-right-radius:14px}
.bb-cmp .grouprow th{background:var(--paper);font-family:var(--sansd);font-weight:700;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);position:static}
.bb-cmp .grouprow td{background:var(--paper)}
.bb-cmp-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;font-size:12.5px;color:var(--muted)}
.bb-cmp-legend b{color:var(--green)}
.bb-cmp-note{font-size:12px;color:var(--muted);margin-top:10px;max-width:60em}

/* demoted side-panel label: a panel title that must NOT compete with the page H1 */
.bb-panel-title{font-family:var(--sansd);font-size:16px;font-weight:700;letter-spacing:.01em;color:var(--ink);margin:0 0 12px;line-height:1.3}