/* ============================================================
   /7-levels page - SAM design-system reskin (visual layer only).
   Layers the SAM signatures (graph-paper texture, numbered
   eyebrows, orange rules, hard-offset shadows, Archivo display
   type, navy authority bands, squared print-card corners) onto
   the existing bp- and bc- classes. No copy, layout, or markup
   structure changes; loads LAST so it wins ties.
   Self-contained: tokens defined here (sam.css is not linked
   on this page), scoped to body.seven-levels which is unique
   to /7-levels. Mirrors css/book-sam.css, the worked example.
   The 7 challenge coins stay the full-color centerpiece of
   the ladder; the cards around them carry the SAM character.
   ============================================================ */

body.seven-levels{
  --svls-navy:#0F2038;
  --svls-navy-2:#182E4E;
  --svls-navy-3:#0A1626;
  --svls-orange:#E07A3F;
  --svls-orange-2:#C9632B;
  --svls-cream:#FAF7F0;
  --svls-cream-2:#F1EBDE;
  --svls-ink:#232830;
  --svls-ink-soft:#4A5160;
  --svls-paper-line:rgba(15,32,56,.055);
  --svls-navy-line:rgba(250,247,240,.14);
  --svls-card-edge:rgba(15,32,56,.16);
  --svls-radius:6px;
  --svls-disp:"Archivo","Barlow Condensed",sans-serif;
  --svls-body:"Readex Pro",system-ui,sans-serif;

  background:var(--svls-cream);
  color:var(--svls-ink);
}
body.seven-levels main{background:var(--svls-cream)}

/* ---------- surfaces: graph paper on cream, flat on cream-2 ---------- */
body.seven-levels .bp-hero-fw,
body.seven-levels .bp-levels,
body.seven-levels .bp-anchors,
body.seven-levels .bp-cases,
body.seven-levels .bp-faq{
  background-color:var(--svls-cream);
  background-image:linear-gradient(var(--svls-paper-line) 1px,transparent 1px),linear-gradient(90deg,var(--svls-paper-line) 1px,transparent 1px);
  background-size:28px 28px;
}
body.seven-levels .bp-why,
body.seven-levels .bp-connect,
body.seven-levels .bp-compare,
body.seven-levels .bc-endorse{background:var(--svls-cream-2)}

/* ---------- navy authority bands (thesis + Amazon callout + final CTA) ---------- */
body.seven-levels .bc-manifesto-feature,
body.seven-levels .bp-package-callout,
body.seven-levels .bp-fw-cta{
  position:relative;
  background:linear-gradient(165deg,var(--svls-navy) 0%,var(--svls-navy-3) 100%);
  color:var(--svls-cream);
  border-left:none;
}
body.seven-levels .bc-manifesto-feature::before,
body.seven-levels .bp-package-callout::before,
body.seven-levels .bp-fw-cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--svls-navy-line) 1px,transparent 1px),linear-gradient(90deg,var(--svls-navy-line) 1px,transparent 1px);
  background-size:64px 64px;opacity:.18;
}

/* ---------- stage strip: light SAM polish only ---------- */
body.seven-levels .bc-stage-strip{
  background:var(--svls-cream-2);
  border-bottom:1px solid var(--svls-card-edge);
}
body.seven-levels .bc-stage-strip-prefix{color:var(--svls-orange-2)}
body.seven-levels .bc-stage-strip-step.is-active{color:var(--svls-orange-2)}

/* ---------- display type: Archivo headers ---------- */
body.seven-levels main h1,
body.seven-levels main h2,
body.seven-levels main h3{
  font-family:var(--svls-disp);
  letter-spacing:-0.015em;
}
body.seven-levels .bp-why h2,
body.seven-levels .bp-levels h2,
body.seven-levels .bp-connect h2,
body.seven-levels .bp-anchors h2,
body.seven-levels .bp-compare h2,
body.seven-levels .bp-cases h2,
body.seven-levels .bp-package-callout h2,
body.seven-levels .bc-endorse h2,
body.seven-levels .bp-faq h2,
body.seven-levels .bc-manifesto-feature h2{
  font-family:var(--svls-disp);
  font-weight:800;text-transform:none;
  font-size:clamp(28px,3.4vw,42px);line-height:1.1;
  letter-spacing:-0.015em;
  color:var(--svls-navy);
}
body.seven-levels .bp-connect-head h2,
body.seven-levels .bp-cases-head h2{margin-top:0}
body.seven-levels main h2 .accent{color:var(--svls-orange)}
body.seven-levels .bc-manifesto-feature h2,
body.seven-levels .bp-package-callout h2{color:var(--svls-cream)}
body.seven-levels .bp-fw-cta h2{
  font-family:var(--svls-disp);
  font-weight:900;text-transform:none;
  font-size:clamp(38px,5.6vw,64px);line-height:1.06;
  letter-spacing:-0.015em;
  color:var(--svls-cream);
}

/* orange rule under the section H2s */
body.seven-levels .bp-why h2::after,
body.seven-levels .bp-levels h2::after,
body.seven-levels .bp-connect h2::after,
body.seven-levels .bp-anchors h2::after,
body.seven-levels .bp-compare h2::after,
body.seven-levels .bp-cases h2::after,
body.seven-levels .bp-package-callout h2::after,
body.seven-levels .bc-endorse h2::after,
body.seven-levels .bp-fw-cta h2::after,
body.seven-levels .bp-faq h2::after,
body.seven-levels .bc-manifesto-feature h2::after{
  content:"";display:block;width:64px;height:4px;
  background:var(--svls-orange);margin-top:22px;
}
body.seven-levels .bp-package-callout h2::after{margin-left:auto;margin-right:auto}

/* ---------- eyebrows: SAM numbered-ledger treatment ---------- */
body.seven-levels .bc-eyebrow{
  font-family:var(--svls-body);font-weight:600;font-size:13px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--svls-orange-2);
  opacity:1;display:flex;align-items:center;margin-bottom:18px;
}
body.seven-levels .bc-eyebrow .num{
  font-family:var(--svls-disp);font-weight:800;color:var(--svls-navy);
  border:1.5px solid var(--svls-navy);border-radius:3px;
  padding:1px 7px;margin-right:12px;font-size:12px;letter-spacing:.05em;
  flex:none;
}
body.seven-levels .bc-manifesto-feature .bc-eyebrow,
body.seven-levels .bp-package-callout .bc-eyebrow,
body.seven-levels .bp-fw-cta .bc-eyebrow{color:var(--svls-orange)}
body.seven-levels .bc-manifesto-feature .bc-eyebrow .num,
body.seven-levels .bp-package-callout .bc-eyebrow .num,
body.seven-levels .bp-fw-cta .bc-eyebrow .num{
  color:var(--svls-cream);border-color:var(--svls-cream);
}
body.seven-levels .bp-package-callout .bc-eyebrow{justify-content:center}

/* ---------- buttons: SAM action style, squared corners ---------- */
body.seven-levels .bc-btn{
  font-family:var(--svls-disp);font-weight:800;text-transform:none;
  letter-spacing:.01em;font-size:16px;
  padding:15px 28px;border-radius:var(--svls-radius);
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease,border-color .15s ease;
}
body.seven-levels .bc-btn--solid{
  background:var(--svls-orange);color:var(--svls-navy);
  border:1px solid var(--svls-orange);
  box-shadow:0 2px 0 var(--svls-orange-2);
}
body.seven-levels .bc-btn--solid:hover{
  background:var(--svls-orange);color:var(--svls-navy);border-color:var(--svls-orange);
  transform:translateY(-2px);box-shadow:0 5px 0 var(--svls-orange-2);
}
body.seven-levels .bc-btn--ghost{
  background:transparent;color:var(--svls-navy);
  border:1.5px solid rgba(15,32,56,.35);box-shadow:none;
}
body.seven-levels .bc-btn--ghost:hover{
  background:transparent;color:var(--svls-orange-2);border-color:var(--svls-orange);
  transform:translateY(-2px);
}
/* ghosts that sit on the navy bands */
body.seven-levels .bp-package-callout .bc-btn--ghost,
body.seven-levels .bp-fw-cta .bc-btn--ghost{
  color:var(--svls-cream);border-color:var(--svls-navy-line);
}
body.seven-levels .bp-package-callout .bc-btn--ghost:hover,
body.seven-levels .bp-fw-cta .bc-btn--ghost:hover{
  color:var(--svls-orange);border-color:var(--svls-orange);
}

/* ============================================================
   BLOCK 1 - HERO
   ============================================================ */
body.seven-levels .bp-hero-fw h1{
  font-family:var(--svls-disp);font-weight:900;text-transform:none;
  font-size:clamp(42px,6.4vw,84px);line-height:1.04;letter-spacing:-0.02em;
  color:var(--svls-navy);
}
body.seven-levels .bp-hero-fw h1 .accent{
  color:var(--svls-orange);
  background-image:linear-gradient(to top,rgba(224,122,63,.28) 0 .18em,transparent .18em);
  width:fit-content;
}
body.seven-levels .bp-hero-fw h1::after{
  content:"";display:block;width:64px;height:4px;
  background:var(--svls-orange);margin-top:26px;
}
body.seven-levels .bp-hero-fw-sub{
  font-family:var(--svls-body);font-style:normal;font-weight:300;
  font-size:clamp(18px,2vw,22px);line-height:1.6;
  color:var(--svls-ink-soft);opacity:1;
  margin:clamp(24px,3vw,34px) 0 0;
  max-width:52ch;padding-left:0;
}
body.seven-levels .bp-hero-fw-meta{
  font-family:var(--svls-body);font-weight:600;text-transform:uppercase;
  letter-spacing:.18em;font-size:12.5px;
  color:var(--svls-ink-soft);opacity:1;
  margin:clamp(16px,2vw,22px) 0 clamp(24px,3vw,34px);
}
body.seven-levels .bp-hero-fw-actions{padding-left:0}

/* ============================================================
   OUR THESIS (navy manifesto band)
   ============================================================ */
body.seven-levels .bc-manifesto-cover{
  filter:drop-shadow(14px 14px 0 rgba(0,0,0,.3));
  transform:rotate(-1.4deg);transition:transform .35s ease;
}
body.seven-levels .bc-manifesto-cover:hover{transform:rotate(0)}
body.seven-levels .bc-manifesto-sub{
  font-family:var(--svls-body);font-style:normal;font-weight:300;
  font-size:clamp(16.5px,1.8vw,19px);line-height:1.6;
  color:rgba(250,247,240,.82);opacity:1;
}
body.seven-levels .bc-manifesto-epi{
  border-left:3px solid var(--svls-orange);color:var(--svls-orange);
}
body.seven-levels .bc-manifesto-foot{color:rgba(250,247,240,.65);opacity:1}

/* ============================================================
   BLOCK 2 - WHY THIS EXISTS
   ============================================================ */
body.seven-levels .bp-why-text p{
  font-family:var(--svls-body);color:var(--svls-ink);opacity:1;
}
/* retire the bookish serif drop cap for the SAM read */
body.seven-levels .bp-why-text p:first-child::first-letter{
  font-family:inherit;font-style:normal;font-weight:inherit;
  font-size:inherit;float:none;line-height:inherit;
  margin:0;color:inherit;
}
body.seven-levels .bp-why-credit{
  font-family:var(--svls-body);font-style:normal;font-weight:600;
  font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--svls-ink-soft);opacity:1;
}

/* ============================================================
   BLOCK 3 - THE 7 LEVELS (print-card ladder)
   ============================================================ */
body.seven-levels .bp-levels-sub,
body.seven-levels .bp-connect-sub,
body.seven-levels .bp-cases-sub{
  font-family:var(--svls-body);font-style:normal;font-weight:300;
  font-size:clamp(16.5px,1.8vw,19px);line-height:1.6;
  color:var(--svls-ink-soft);opacity:1;
}

body.seven-levels .bp-level-card{
  background:var(--svls-cream);
  border:1.5px solid var(--svls-card-edge);
  border-radius:8px;
  box-shadow:10px 10px 0 rgba(15,32,56,.08);
  padding:clamp(24px,3.5vw,44px);
  margin-bottom:clamp(20px,2.6vw,30px);
  transition:transform .18s ease,box-shadow .18s ease;
}
body.seven-levels .bp-level-card:last-child{
  border-bottom:1.5px solid var(--svls-card-edge);
  margin-bottom:0;
}
body.seven-levels .bp-level-card:hover{
  padding-left:clamp(24px,3.5vw,44px);
  transform:translate(-2px,-2px);
  box-shadow:12px 12px 0 rgba(15,32,56,.12);
}
/* the coins keep the intentional copper wash (a cohesive proprietary set,
   so seven of them down the page read as one family, not seven loud badges) */
body.seven-levels .bp-level-coin{filter:sepia(1) saturate(0.6) brightness(0.95);transition:filter .2s ease}
body.seven-levels .bp-level-card:hover .bp-level-coin{
  filter:sepia(1) saturate(0.6) brightness(0.95) drop-shadow(0 2px 8px rgba(11,26,46,.18));
}
/* "Level N" marker joins the bordered-box ledger language */
body.seven-levels .bp-level-num{
  font-family:var(--svls-disp);font-weight:800;font-size:12.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--svls-navy);
  border:1.5px solid var(--svls-navy);border-radius:3px;
  padding:2px 9px;align-self:center;
}
body.seven-levels .bp-level-rank{
  font-family:var(--svls-disp);font-weight:800;text-transform:none;
  font-size:clamp(22px,2.8vw,30px);letter-spacing:-0.015em;
  color:var(--svls-navy);
}
body.seven-levels .bp-level-role{
  font-family:var(--svls-body);font-style:normal;font-weight:400;
  font-size:15.5px;color:var(--svls-ink-soft);opacity:1;
}
body.seven-levels .bp-level-desc{
  font-family:var(--svls-body);color:var(--svls-ink);opacity:1;
}
body.seven-levels .bp-level-skill{
  font-family:var(--svls-body);font-style:normal;
  font-size:15.5px;line-height:1.6;color:var(--svls-navy);
  background:rgba(224,122,63,.07);
  border-left:3px solid var(--svls-orange);
  padding:12px 18px;
  border-radius:0 var(--svls-radius) var(--svls-radius) 0;
}
body.seven-levels .bp-level-next{
  font-family:var(--svls-body);color:var(--svls-ink-soft);opacity:1;
}
body.seven-levels .bp-level-next strong{
  font-family:var(--svls-disp);font-weight:800;
  letter-spacing:.1em;font-size:12px;color:var(--svls-orange-2);
}
body.seven-levels .bp-level-cta{
  font-family:var(--svls-disp);font-weight:800;text-transform:none;
  letter-spacing:.02em;font-size:14.5px;color:var(--svls-navy);
  border-bottom:1.5px solid var(--svls-navy);
}
body.seven-levels .bp-level-card:hover .bp-level-cta{
  color:var(--svls-orange-2);border-color:var(--svls-orange);
}

/* ============================================================
   BLOCKS 4 + 4b - TIER LEDGER ROWS
   ============================================================ */
body.seven-levels .bp-tier-range{
  font-family:var(--svls-disp);font-weight:800;
  letter-spacing:.1em;font-size:14.5px;color:var(--svls-orange-2);
}
body.seven-levels .bp-tier-title{
  font-family:var(--svls-disp);font-weight:700;text-transform:none;
  letter-spacing:-0.01em;font-size:clamp(19px,2.2vw,24px);
  color:var(--svls-navy);
}
body.seven-levels .bp-tier-desc{
  font-family:var(--svls-body);color:var(--svls-ink);opacity:1;
}
body.seven-levels .bp-anchors-intro p,
body.seven-levels .bp-anchors-foot p{
  font-family:var(--svls-body);color:var(--svls-ink);opacity:1;
}
body.seven-levels .bp-anchors-foot p:last-child{
  font-family:var(--svls-body);font-style:normal;opacity:1;
}
/* the inline-styled "Common questions" h3 joins the display face */
body.seven-levels .bp-anchors-intro h3[style]{
  font-family:var(--svls-disp)!important;
  font-weight:800!important;
  text-transform:none!important;
  letter-spacing:-0.015em!important;
  font-size:clamp(20px,2.4vw,26px)!important;
  color:var(--svls-navy)!important;
}
body.seven-levels .bp-anchors-intro a{
  color:var(--svls-orange-2);border-bottom:1px solid rgba(224,122,63,.5);
  text-decoration:none;
}
body.seven-levels .bp-anchors-intro a:hover{
  color:var(--svls-orange);border-color:var(--svls-orange);
}

/* ============================================================
   BLOCK 4c - COMPARISON (print cards)
   ============================================================ */
body.seven-levels .bp-compare-card{
  background:var(--svls-cream);
  border:1.5px solid var(--svls-card-edge);
  border-radius:8px;
  box-shadow:7px 7px 0 rgba(15,32,56,.08);
}
body.seven-levels .bp-compare-name{
  font-family:var(--svls-disp);font-weight:800;
  letter-spacing:.12em;font-size:13px;color:var(--svls-orange-2);
}
body.seven-levels .bp-compare-frame-name{
  font-family:var(--svls-disp);font-weight:800;text-transform:none;
  letter-spacing:-0.015em;font-size:clamp(20px,2.2vw,25px);
  color:var(--svls-navy);
}
body.seven-levels .bp-compare-meta{
  font-family:var(--svls-body);font-style:normal;font-size:14.5px;
  color:var(--svls-ink-soft);opacity:1;
  border-bottom:1px dashed var(--svls-card-edge);
}
body.seven-levels .bp-compare-body p{
  font-family:var(--svls-body);color:var(--svls-ink);opacity:1;
}
body.seven-levels .bp-compare-body p strong{color:var(--svls-navy)}

/* ============================================================
   BLOCK 5 - CASE STUDIES (print cards)
   ============================================================ */
body.seven-levels .bp-case-card{
  background:var(--svls-cream);
  border:1.5px solid var(--svls-card-edge);
  border-radius:8px;
  box-shadow:7px 7px 0 rgba(15,32,56,.08);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
body.seven-levels .bp-case-card:hover{
  border-color:var(--svls-card-edge);
  transform:translate(-2px,-2px);
  box-shadow:9px 9px 0 rgba(15,32,56,.12);
}
body.seven-levels .bp-case-tag{
  font-family:var(--svls-disp);font-weight:800;
  letter-spacing:.14em;font-size:12px;color:var(--svls-orange-2);
}
body.seven-levels .bp-case-stat{
  font-family:var(--svls-disp);font-weight:900;
  letter-spacing:-0.02em;color:var(--svls-navy);
}
body.seven-levels .bp-case-title{
  font-family:var(--svls-disp);font-weight:700;text-transform:none;
  letter-spacing:-0.01em;font-size:clamp(19px,2.1vw,23px);
  color:var(--svls-navy);
}
body.seven-levels .bp-case-desc{
  font-family:var(--svls-body);color:var(--svls-ink-soft);opacity:1;
}
body.seven-levels .bp-case-cta{
  font-family:var(--svls-disp);font-weight:800;text-transform:none;
  letter-spacing:.02em;font-size:14.5px;color:var(--svls-navy);
  border-bottom:1.5px solid var(--svls-navy);
}
body.seven-levels .bp-case-card:hover .bp-case-cta{
  color:var(--svls-orange-2);border-color:var(--svls-orange);
}

/* ============================================================
   BLOCK 5a - SIGNED PACKAGE CALLOUT (navy band)
   ============================================================ */
body.seven-levels .bp-package-callout{text-align:center}
body.seven-levels .bp-package-callout-img{
  filter:drop-shadow(14px 14px 0 rgba(0,0,0,.3));
}
body.seven-levels .bp-package-callout .bp-fw-cta-sub{
  font-family:var(--svls-body);font-style:normal;font-weight:300;
  font-size:clamp(16.5px,1.8vw,19px);line-height:1.6;
  color:rgba(250,247,240,.78);opacity:1;
  max-width:60ch;margin:clamp(24px,3vw,32px) auto clamp(28px,4vw,40px);
  padding-left:0;
}
body.seven-levels .bp-package-callout .bp-fw-cta-sub em{font-style:italic}

/* ============================================================
   BLOCK 5b - ENDORSEMENTS (print cards)
   ============================================================ */
body.seven-levels .bc-endorse-card{
  background:var(--svls-cream);
  border:1.5px solid var(--svls-card-edge);
  border-top:1.5px solid var(--svls-card-edge);
  border-left:5px solid var(--svls-orange);
  border-radius:8px;
  box-shadow:8px 8px 0 rgba(15,32,56,.08);
  padding:clamp(24px,3vw,34px) clamp(22px,2.8vw,32px);
  gap:16px;
}
body.seven-levels .bc-endorse-photo{
  border:3px solid var(--svls-navy);filter:none;
}
body.seven-levels .bc-endorse-quote{
  font-family:var(--svls-disp);font-style:normal;font-weight:600;
  font-size:clamp(17px,1.9vw,21px);line-height:1.42;
  color:var(--svls-navy);
}
body.seven-levels .bc-endorse-quote::before,
body.seven-levels .bc-endorse-quote::after{content:none}
body.seven-levels .bc-endorse-cite{
  font-family:var(--svls-body);text-transform:none;letter-spacing:0;
}
body.seven-levels .bc-endorse-name{
  font-family:var(--svls-disp);font-weight:700;font-size:15.5px;
  color:var(--svls-navy);letter-spacing:0;
}
body.seven-levels .bc-endorse-role{
  font-size:13.5px;letter-spacing:0;color:var(--svls-ink-soft);opacity:1;
}

/* ============================================================
   BLOCK 6 - FINAL CTA (navy authority band)
   ============================================================ */
body.seven-levels .bp-fw-cta-sub{
  font-family:var(--svls-body);font-style:normal;font-weight:300;
  font-size:clamp(17px,1.9vw,20px);line-height:1.6;
  color:rgba(250,247,240,.78);opacity:1;
  max-width:54ch;padding-left:0;
  margin:clamp(24px,3vw,34px) 0 clamp(30px,4vw,44px);
}
body.seven-levels .bp-fw-cta-actions{padding-left:0}

/* ============================================================
   BLOCK 7 - FAQ (ledger rows on graph paper)
   ============================================================ */
body.seven-levels .bp-faq-item h3{
  font-family:var(--svls-disp);font-weight:700;text-transform:none;
  letter-spacing:-0.01em;font-size:clamp(18px,2vw,22px);
  color:var(--svls-navy);
}
body.seven-levels .bp-faq-item p{
  font-family:var(--svls-body);color:var(--svls-ink);opacity:1;
}
body.seven-levels .bp-faq-item p a{
  color:var(--svls-orange-2);border-bottom:1px solid rgba(224,122,63,.5);
}
body.seven-levels .bp-faq-item p a:hover{
  color:var(--svls-orange);border-color:var(--svls-orange);
}

/* ---------- small screens ---------- */
@media (max-width:480px){
  body.seven-levels .bp-level-card,
  body.seven-levels .bp-level-card:hover{padding:22px 18px}
  body.seven-levels .bp-level-card{box-shadow:7px 7px 0 rgba(15,32,56,.08)}
  body.seven-levels .bc-manifesto-cover{transform:rotate(0)}
  body.seven-levels .bc-manifesto-cover,
  body.seven-levels .bp-package-callout-img{
    filter:drop-shadow(9px 9px 0 rgba(0,0,0,.25));
  }
}