/* ====================================================================
   CFO Steer — Whitepapers shared styles
   ==================================================================== */
:root{
  --abyss:#07131F; --ink:#0C1E30; --ink-2:#13293E; --ink-3:#1B3954;
  --paper:#EDF0F2; --paper-2:#F6F7F5; --brass:#C7A24A; --brass-bright:#E2C277;
  --teal:#3AA99A; --muted-d:#93A6B6; --muted-l:#5A6B7A;
  --line-d:rgba(255,255,255,.12); --line-l:rgba(12,30,48,.14);
  --maxw:1180px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--abyss); color:var(--paper); font-family:'Inter',system-ui,sans-serif; font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
h1,h2,h3,h4{font-family:'Bricolage Grotesque','Archivo',sans-serif; font-weight:700; line-height:1.04; margin:0; letter-spacing:-.02em;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
.eyebrow{font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--brass); display:inline-flex; align-items:center; gap:10px;}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--brass); opacity:.7;}
.mono{font-family:'IBM Plex Mono',monospace;}
a:focus-visible,.btn:focus-visible,button:focus-visible{outline:2px solid var(--brass-bright); outline-offset:3px;}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:10px; font-family:'IBM Plex Mono',monospace; font-size:13px; letter-spacing:.08em; text-transform:uppercase; padding:14px 22px; border-radius:2px; transition:.25s; cursor:pointer; border:1px solid transparent;}
.btn-primary{background:var(--brass); color:var(--ink); font-weight:500;}
.btn-primary:hover{background:var(--brass-bright);}
.btn-ghost{border-color:var(--line-d); color:var(--paper);}
.btn-ghost:hover{border-color:var(--brass); color:var(--brass-bright);}
.btn .arr{transition:transform .25s;}
.btn:hover .arr{transform:translateX(4px);}

/* ========= nav (reused from main site) ========= */
header.nav{position:sticky; top:0; z-index:60; background:rgba(7,19,31,.82); backdrop-filter:blur(12px); border-bottom:1px solid var(--line-d);}
.nav-in{display:flex; align-items:center; justify-content:space-between; height:72px;}
.brand{display:flex; align-items:center; gap:12px;}
.brand svg{width:40px; height:40px;}
.brand-wm{display:flex; align-items:baseline; gap:8px; line-height:1;}
.brand-wm .c{font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:500; letter-spacing:.22em; color:var(--brass-bright); text-transform:uppercase;}
.brand-wm .s{font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:25px; letter-spacing:-.025em; color:var(--paper);}
.nav-right{display:flex;justify-content:right; align-items:center; gap:26px;}
.nav-actions{display:flex; align-items:center; gap:14px;}
.nav-links{display:flex; align-items:center; gap:26px;}
.nav-links a{font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:.06em; color:var(--muted-d); transition:color .2s;}
.nav-links a:hover, .nav-links a.active{color:var(--paper);}
.nav-cta{margin-left:0; box-shadow:0 2px 14px rgba(199,162,74,.30);}
.burger{display:none; background:none; border:0; color:var(--paper); cursor:pointer;}
/* Mobile menu CTA - hidden by default */
.mobile-book {
  display: none;
}
@media (max-width:1024px){
  .nav-links{display:none;}
  .burger{display:block;}
  .nav-cta{display:none;}
  .nav-links.open{display:flex; position:absolute; top:72px; left:auto; right:0; width:fit-content; min-width:280px; flex-direction:column; align-items:stretch; gap:0; background:var(--ink); border-bottom:1px solid var(--line-d); border-left:1px solid var(--line-d); padding:6px 0 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, .45);}
  .nav-links.open a:not(.mobile-book){display:flex; align-items:center; justify-content:flex-start; gap:8px; padding:10px 28px; font-size: 14px; letter-spacing: .06em; color: var(--muted-d);}
  .nav-links.open a:not(.mobile-book):hover {background: rgba(255, 255, 255, .04); color: var(--brass-bright); border-radius: 0;}
  .nav-links.open a:not(.mobile-book)::after {content: "→"; margin-left: 0; color: #C7A24A; font-size: 18px;}
  .mobile-book {
    display: inline-flex !important;
    align-items: center;
    align-self: flex-start;
    justify-content: flex-start;
    gap: 8px;
    width: fit-content;
    margin: 10px 24px;
    padding: 10px 20px;
    background: var(--brass);
    color: var(--ink) !important;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    border: none;
  }
  .mobile-book .arr { font-size: 18px; }
}

/* ========= INDEX page ========= */
.wp-hero{padding:84px 0 56px; border-bottom:1px solid var(--line-d);}
.wp-hero h1{font-size:clamp(40px,5.5vw,68px); font-weight:800; margin-top:18px;}
.wp-hero h1 .accent{color:var(--brass);}
.wp-hero .lede{color:var(--muted-d); font-size:19px; max-width:38em; margin:22px 0 0;}
/* ===== Breadcrumb ===== */
.breadcrumb{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:50px;
  font-family:'IBM Plex Mono', monospace;
  font-size:14px;
  letter-spacing:.06em;
}

.breadcrumb a,
.breadcrumb span{
  color:var(--muted-d);
}

.breadcrumb a{
  text-decoration:none;
}

.breadcrumb a:hover{
  color:var(--paper);
}
.wp-filterbar{padding:34px 0 12px; border-bottom:1px solid var(--line-d);}
.wp-filterbar-in{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;}
.wp-filterbar .lbl{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.22em; color:var(--muted-d); margin-right:8px;}
.wp-chip{font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.06em; color:var(--paper); background:rgba(255,255,255,.04); border:1px solid var(--line-d); border-radius:2px; padding:8px 14px; cursor:pointer; transition:.2s;}
.wp-chip:hover{border-color:var(--brass); color:var(--brass-bright);}
.wp-chip.active{background:var(--brass); color:var(--ink); border-color:var(--brass);}
.wp-search{flex:1; min-width:220px; max-width:340px; margin-left:auto; display:flex; align-items:center; gap:10px; padding:8px 14px; background:rgba(255,255,255,.04); border:1px solid var(--line-d); border-radius:2px;}
.wp-search input{background:transparent; border:0; outline:0; color:var(--paper); font-family:'Inter',sans-serif; font-size:14px; width:100%;}
.wp-search input::placeholder{color:var(--muted-d);}
.wp-search svg{flex:none; color:var(--muted-d);}

.wp-list{padding:48px 0 96px;}
.wp-card{display:grid; grid-template-columns:200px 1fr auto; gap:30px; align-items:center; padding:30px 0; border-bottom:1px solid var(--line-d); cursor:pointer; transition:transform .2s, background .25s; text-decoration:none; color:inherit;}
.wp-card:hover{background:rgba(255,255,255,.02); transform:translateX(4px);}
.wp-card-meta{display:flex; flex-direction:column; gap:6px;}
.wp-card-meta .date{font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.1em; color:var(--brass-bright);}
.wp-card-meta .cat{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.2em; color:var(--teal); text-transform:uppercase;}
.wp-card-meta .read{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted-d); margin-top:2px;}
.wp-card h3{font-size:24px; font-weight:700; color:var(--paper); margin:0 0 8px;}
.wp-card p{margin:0; color:var(--muted-d); font-size:15px; line-height:1.55;}
.wp-card .go{font-family:'IBM Plex Mono',monospace; font-size:13px; letter-spacing:.1em; color:var(--brass-bright); white-space:nowrap;}
.wp-card .go::after{content:" →"; transition:transform .25s;}
.wp-card:hover .go::after{margin-left:4px;}
.wp-empty{padding:40px 0; color:var(--muted-d); font-style:italic;}

@media (max-width:760px){

  /* Breadcrumb */
  .breadcrumb{
    margin-bottom:30px;
    font-size:13px;
    gap:10px;
  }

  .wp-card{
    grid-template-columns:1fr;
    gap:10px;
  }

  .wp-card .go{
    display:none;
  }

  .wp-search{
    margin-left:0;
    width:100%;
    max-width:none;
  }
}

/* ========= PAPER pages ========= */
.paper-bg{background:var(--paper-2); color:var(--ink);}
.paper-hero{padding:64px 0 34px; border-bottom:1px solid var(--line-l); background:var(--paper);}
.paper-hero .crumbs{font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.1em; color:var(--muted-l); margin-bottom:18px;}
.paper-hero .crumbs a{color:var(--muted-l);}
.paper-hero .crumbs a:hover{color:var(--brass);}
.paper-hero .meta{display:flex; flex-wrap:wrap; align-items:center; gap:14px; font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.14em; color:var(--muted-l); margin-bottom:18px;}
.paper-hero .meta .cat{color:var(--brass); border:1px solid var(--brass); padding:4px 10px; border-radius:2px; text-transform:uppercase;}
.paper-hero h1{font-size:clamp(34px,4.8vw,54px); font-weight:800; color:var(--ink); max-width:18em;}
.paper-hero .sub{font-size:20px; color:var(--muted-l); margin-top:18px; max-width:38em; font-weight:400; line-height:1.45; font-family:'Inter',sans-serif;}

/* body content */
.paper-body{padding:48px 0 80px;}
.paper-body .col{max-width:780px;}
.paper-body p{font-size:17.5px; line-height:1.75; color:#1a3247; margin:0 0 22px;}
.paper-body p:first-of-type::first-letter{font-family:'Bricolage Grotesque',serif; font-weight:700; font-size:54px; line-height:.9; float:left; margin:6px 12px 0 0; color:var(--brass);}
.paper-body h2{font-size:28px; color:var(--ink); margin:42px 0 16px;}
.paper-body h3{font-size:20px; color:var(--ink); margin:28px 0 10px; font-weight:700;}
.paper-body ul{padding:0 0 0 22px; margin:0 0 22px; color:#1a3247; font-size:17px; line-height:1.7;}
.paper-body ul li{margin-bottom:8px;}
.paper-body ul li::marker{color:var(--brass);}
.paper-body blockquote{margin:34px 0; padding:22px 26px; border-left:3px solid var(--brass); background:#fff; font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:20px; line-height:1.5; color:var(--ink);}
.paper-body .callout{margin:32px 0; padding:22px 26px; background:var(--ink); color:var(--paper); border-radius:4px;}
.paper-body .callout .ko{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.22em; color:var(--brass-bright); text-transform:uppercase; margin-bottom:8px;}
.paper-body .callout p{color:var(--paper); margin:0; font-size:16px;}
.paper-body hr{border:0; border-top:1px solid var(--line-l); margin:42px 0;}

.paper-cta{margin-top:40px; padding:28px 30px; background:var(--ink); color:var(--paper); border-radius:4px; display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between;}
.paper-cta h4{font-size:20px; color:var(--paper); margin:0 0 4px;}
.paper-cta p{margin:0; color:var(--muted-d); font-size:14px;}

.paper-foot{padding:34px 0; border-top:1px solid var(--line-l); color:var(--muted-l); font-size:13px; display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center;}
.paper-foot .copy{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.06em;}
.paper-foot a{color:var(--brass-bright);}

/* ========= READ-ONLY PROTECTIONS for paper content ========= */
.paper-body, .paper-hero h1, .paper-hero .sub{
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
  -webkit-touch-callout:none;
}
@media print{
  body{ display:none !important; }
  html::before{
    content:"This paper is read-only. Visit cfosteer.com/whitepapers to view it.";
    display:block; padding:40px; font-family:sans-serif; font-size:14px;
  }
}

/* ========= EMAIL GATE OVERLAY ========= */
.gate{position:fixed; inset:0; z-index:100; background:rgba(7,19,31,.92); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; padding:24px 16px; overflow:hidden;}
.gate.hidden{display:none;}
.gate-card{max-width:480px; width:100%; background:var(--ink); border:1px solid var(--brass); border-radius:6px; padding:38px 36px; color:var(--paper); box-shadow:0 20px 80px rgba(0,0,0,.6); margin:auto 0;}
.gate-card .eyebrow{margin-bottom:14px;}
.gate-card h2{font-size:28px; color:var(--paper); margin:0 0 10px;}
.gate-card .desc{color:var(--muted-d); font-size:15px; margin:0 0 26px;}
.gate-card .field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px; min-width:0;}
.gate-card label{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.2em; color:var(--muted-d); text-transform:uppercase;}
.gate-card input{width:100%; background:rgba(255,255,255,.06); border:1px solid var(--line-d); border-radius:2px; padding:12px 14px; color:var(--paper); font-family:'Inter',sans-serif; font-size:15px; outline:none; transition:.2s;}
.gate-card input:focus{border-color:var(--brass);}
.gate-card .row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.gate-card .submit{width:100%; margin-top:10px; justify-content:center; border:0;}
.gate-card .small{margin-top:14px; font-size:12px; color:var(--muted-d); line-height:1.5;}
.gate-card .err{margin-top:10px; color:#ff7a7a; font-size:13px; min-height:18px;}
.gate-card .back{display:inline-block; margin-top:18px; font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.1em; color:var(--muted-d); text-decoration:none;}
.gate-card .back:hover{color:var(--paper);}
@media (max-height:740px){
  .gate{padding:16px;}
  .gate-card{padding:20px 24px; margin:auto 0;}
  .gate-card .eyebrow{display:none;}
  .gate-card h2{font-size:18px; margin:0 0 4px;}
  .gate-card .desc{margin:0 0 12px; font-size:13px; line-height:1.3;}
  .gate-card .row{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
  .gate-card .field{margin-bottom:8px; gap:4px;}
  .gate-card label{font-size:9px; letter-spacing:.1em;}
  .gate-card input{padding:8px 12px; font-size:14px;}
  .gate-card .submit{padding:10px 14px; margin-top:4px; font-size:12px;}
  .gate-card .small{margin-top:8px; font-size:10.5px; line-height:1.3;}
  .gate-card .back{margin-top:10px; font-size:11px;}
}

/* ============================================================
   MOBILE BASELINE POLISH — WHITEPAPER PAGES (v28)
   ============================================================ */
@media (max-width:760px){
  .paper-hero{padding:44px 0 24px;}
  .paper-hero h1{font-size:clamp(26px,7vw,38px);}
  .paper-hero .sub{font-size:17px;}
  .paper-body{padding:34px 0 60px;}
  .paper-body p{font-size:16.5px; line-height:1.7;}
  .paper-body p:first-of-type::first-letter{font-size:44px;}
  .paper-body h2{font-size:24px;}
  .paper-body h3{font-size:18px;}
  .paper-body ul{font-size:16px;}
  .paper-body blockquote{padding:18px 20px; font-size:17px; margin:26px 0;}
  .paper-body .callout{padding:18px 20px; margin:24px 0;}
  .paper-body .callout p{font-size:15px;}
  /* Whitepaper listing card */
  .wp-card{padding:22px 20px;}
  .wp-card h3{font-size:19px;}
  .wp-card p{font-size:14.5px;}
  /* Gate card */
  .gate-card{padding:20px 18px; max-width:100%; margin:auto 0;}
  .gate-card .eyebrow{display:none;}
  .gate-card h2{font-size:18px; margin:0 0 4px;}
  .gate-card .desc{margin:0 0 12px; font-size:13px; line-height:1.3;}
  .gate-card .row{display:grid; grid-template-columns:1fr; gap:8px;}
  .gate-card .field{margin-bottom:8px; gap:4px;}
  .gate-card label{font-size:9px; letter-spacing:.1em;}
  .gate-card input{padding:8px 12px; font-size:14px;}
  .gate-card .submit{padding:10px 14px; margin-top:4px; font-size:12px;}
  .gate-card .small{margin-top:8px; font-size:10.5px; line-height:1.3;}
  .gate-card .back{margin-top:10px; font-size:11px;}
}

@media (max-width:400px){
  .paper-hero h1{font-size:26px;}
  .paper-body p{font-size:16px;}
  .paper-body p:first-of-type::first-letter{font-size:38px;}
}