/* ============================================================
   page-skins.css — four visual skins layered on the existing
   Booking Brain design system. One skin per page via a body class:
     .skin-editorial  light, serif-led, a navy figure band
     .skin-ledger     light, hairline-bordered, structured, navy close
     (dark is used only as accent bands — KPI bands and CTAs — never a whole page)
     .skin-tint       light, pale blue/mint tinted section rhythm
   Brand tokens only (--ink navy, --blue, --sand, --line, --muted).
   Additive + defensive; never touches the ::before orbit/ring motifs.
   ============================================================ */

/* shared: a touch more presence on inner heroes, consistent across skins */
body[class*="skin-"] main > section:first-of-type h1{font-size:clamp(40px,5.2vw,64px);line-height:1.02}
body[class*="skin-"] .eyebrow{font-weight:700}

/* ---- a reusable "rings" accent we can drop on dark/tint bands ---- */
.skin-rings{position:relative;isolation:isolate;overflow:hidden}
.skin-rings > *{position:relative;z-index:1}
.skin-rings::after{content:none}

/* =========================================================
   1) EDITORIAL — light, serif-forward, one navy figure band
   ========================================================= */
.skin-editorial main > section:nth-of-type(even){background:var(--sand)}
.skin-editorial .report-metrics,
.skin-editorial .pricing-figure,
.skin-editorial .stat-band{background:var(--ink);color:#fff;border-radius:18px;padding:28px 26px}
.skin-editorial .report-metrics > div{background:transparent!important;border:1px solid rgba(255,255,255,.2)!important;box-shadow:none!important}
.skin-editorial .report-metrics span{color:#9FB6CE}
.skin-editorial .report-metrics strong{color:#fff}
/* bright-blue closing CTA */
.skin-editorial .editorial-close,
.skin-editorial .agency-end,
.skin-editorial .finance-close{background:var(--blue)!important;color:#fff}
.skin-editorial .editorial-close h2,.skin-editorial .agency-end h2,.skin-editorial .finance-close h2,
.skin-editorial .editorial-close h3,.skin-editorial .agency-end h3{color:#fff}
.skin-editorial .editorial-close p,.skin-editorial .agency-end p,.skin-editorial .finance-close p,
.skin-editorial .editorial-close .lead,.skin-editorial .agency-end .lead{color:rgba(255,255,255,.82)}
.skin-editorial .editorial-close .btn-blue,.skin-editorial .agency-end .btn-blue,.skin-editorial .finance-close .btn-blue{background:#fff;color:var(--blue)}
.skin-editorial .editorial-close .btn-outline,.skin-editorial .agency-end .btn-outline,.skin-editorial .finance-close .btn-outline{border-color:rgba(255,255,255,.45);color:#fff;background:transparent}

/* =========================================================
   2) LEDGER — light, hairline-bordered, structured, navy close
   ========================================================= */
.skin-ledger .card,
.skin-ledger .product-grid > article,
.skin-ledger .product-steps article,
.skin-ledger .motif-cards > *{border:1px solid var(--line)!important;border-radius:10px!important;box-shadow:none!important;background:#fff}
.skin-ledger .product-grid{gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.skin-ledger .product-grid > article{border-radius:0!important;border:0!important;border-right:1px solid var(--line)!important}
.skin-ledger .eyebrow{letter-spacing:.12em}
.skin-ledger table{font-variant-numeric:tabular-nums}
.skin-ledger .editorial-close,.skin-ledger .agency-end,.skin-ledger .finance-close{background:var(--ink)!important;color:#fff}
.skin-ledger .editorial-close h2,.skin-ledger .agency-end h2,.skin-ledger .finance-close h2,
.skin-ledger .editorial-close h3,.skin-ledger .agency-end h3{color:#fff}
.skin-ledger .editorial-close p,.skin-ledger .agency-end p,.skin-ledger .finance-close p,
.skin-ledger .editorial-close .lead,.skin-ledger .agency-end .lead{color:#9FB6CE}
.skin-ledger .editorial-close .btn-blue,.skin-ledger .agency-end .btn-blue,.skin-ledger .finance-close .btn-blue{background:var(--blue);color:#fff}
.skin-ledger .editorial-close .btn-outline,.skin-ledger .agency-end .btn-outline,.skin-ledger .finance-close .btn-outline{border-color:rgba(255,255,255,.45);color:#fff}

/* (removed) full-page dark skin — dark is used only as accent bands now */

/* =========================================================
   4) TINT — light, pale blue / mint section rhythm, soft cards
   ========================================================= */
.skin-tint main > section:nth-of-type(4n+2){background:var(--sand)}
.skin-tint main > section:nth-of-type(4n+3){background:#EAF6F1}
.skin-tint main > section:nth-of-type(4n){background:#F3ECFB}
.skin-tint .card,
.skin-tint .product-grid > article,
.skin-tint .motif-cards > *{border:0!important;border-radius:22px!important;box-shadow:0 20px 44px -26px rgba(16,42,67,.32)!important}
.skin-tint main > section:first-of-type{background:linear-gradient(150deg,#E7F0FB,#fff 62%)}
.skin-tint .editorial-close,.skin-tint .agency-end,.skin-tint .finance-close{background:#E7F0FB!important;color:var(--ink)}
/* light tint close: dark text (base .editorial-close is white-on-navy) */
.skin-tint .editorial-close h2,.skin-tint .editorial-close h3,.skin-tint .agency-end h2,.skin-tint .finance-close h2{color:var(--ink)}
.skin-tint .editorial-close p,.skin-tint .editorial-close .lead,.skin-tint .agency-end p,.skin-tint .finance-close p{color:var(--muted)}
.skin-tint .editorial-close .eyebrow,.skin-tint .agency-end .eyebrow{color:var(--blue)}
.skin-tint .editorial-close .btn-outline,.skin-tint .agency-end .btn-outline,.skin-tint .finance-close .btn-outline{color:var(--ink);border-color:var(--line);background:#fff}
.skin-tint .editorial-close .btn-blue,.skin-tint .agency-end .btn-blue,.skin-tint .finance-close .btn-blue{background:var(--blue);color:#fff}

/* ---------- mobile: keep rhythm but calm the tints ---------- */
@media(max-width:760px){
  .skin-rings::after{width:320px;height:320px;right:-170px;top:-120px;opacity:.7}
}