/* ---------------------------------------------------------------------------
   Bold Shift Advisory
   Palette is locked and shared with the checklist, the companion, the book and
   the Start Here guide. Lime is brand only. Green, amber and red carry meaning
   and are never used decoratively.
   Lifted from reference/boldshift_site_mockup.html.
--------------------------------------------------------------------------- */
:root{
  --bg:#0B1020;--panel:#12192B;--navy:#0F172A;--lime:#D8FF4F;--lime-dk:#AACD26;
  --text:#F3F6FB;--muted:#98A2B3;--line:#263244;
  --green:#4ADE80;--amber:#FBBF24;--red:#F87171;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,ul{margin:0}
button,a{font:inherit;color:inherit;cursor:pointer}
a{text-decoration:none}
img{max-width:100%;height:auto}
.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--lime)}
.eyebrow.m{color:var(--muted)}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--lime);color:#0B1020;padding:10px 14px;border-radius:8px}

/* nav */
header{position:sticky;top:0;z-index:60;background:rgba(11,16,32,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:8px;padding:13px 0}
.logo{display:flex;flex-direction:column;margin-right:auto}
.logo b{font-size:15.5px;font-weight:800;letter-spacing:-.02em}
.logo span{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.logo i{color:var(--lime);font-style:normal}
.navlinks{display:none;gap:4px;align-items:center}
.navlinks a{padding:8px 12px;border-radius:8px;color:var(--muted);font-size:14px}
.navlinks a:hover{color:var(--text)}
.navlinks a.on{color:var(--lime)}
.navlinks a.btn{color:#0B1020}
.burger{background:var(--panel);border:1px solid var(--line);border-radius:9px;width:40px;height:40px;display:grid;place-items:center}
.mobmenu{display:none;border-top:1px solid var(--line);padding:8px 0 14px}
.mobmenu.on{display:block}
.mobmenu a{display:block;width:100%;text-align:left;padding:12px 4px;color:var(--muted);font-size:15px;border-bottom:1px solid rgba(38,50,68,.5)}
.mobmenu a.on{color:var(--lime)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;padding:13px 20px;font-size:14.5px;font-weight:600;border:1px solid var(--line);background:var(--panel);color:var(--text)}
.btn.primary{background:var(--lime);color:#0B1020;border-color:var(--lime);font-weight:700}
.btn.primary:hover{background:var(--lime-dk)}
/* min-height keeps small buttons on Apple's 44pt tap-target guideline. */
.btn.sm{padding:9px 14px;font-size:13px;min-height:44px}
.btn.block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.row{display:flex;gap:10px;flex-wrap:wrap}
:focus-visible{outline:2px solid var(--lime);outline-offset:2px}

/* page furniture */
section{padding:52px 0}
section.tight{padding:34px 0}
.h1{font-size:32px;line-height:1.12;font-weight:800;letter-spacing:-.03em}
.h2{font-size:24px;line-height:1.2;font-weight:800;letter-spacing:-.02em}
.lead{color:var(--muted);font-size:16px;margin-top:14px;max-width:60ch}

/* hero */
.hero{padding:44px 0 34px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;top:-160px;right:-140px;width:420px;height:420px;background:radial-gradient(circle,rgba(216,255,79,.10),transparent 70%);pointer-events:none}
.cred{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.cred span{background:var(--panel);border:1px solid var(--line);border-radius:99px;padding:7px 13px;font-size:12.5px;color:var(--muted)}
.cred span b{color:var(--text);font-weight:600}

/* two doors */
.doors{display:grid;gap:14px;margin-top:30px}
.door{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;display:flex;flex-direction:column}
.door.b2b{border-color:#33415A}
.door h3{font-size:19px;font-weight:800;letter-spacing:-.02em;margin:9px 0 8px}
.door p{color:var(--muted);font-size:14px;flex:1}
.door ul{list-style:none;padding:14px 0 18px;font-size:13.5px}
.door li{position:relative;padding-left:19px;margin-bottom:7px;color:var(--muted)}
.door li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:2px;background:var(--lime-dk)}
.claimtag{display:inline-flex;align-items:center;gap:7px;background:#152A1C;border:1px solid #25543A;color:var(--green);border-radius:99px;padding:6px 12px;font-size:11.5px;font-weight:600;align-self:flex-start}
.claimtag.alt{background:#1E2A17;border-color:#3F5220;color:var(--lime)}

/* cards / grid */
.grid{display:grid;gap:12px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px}
.course{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:19px;text-align:left;display:block;width:100%;color:var(--text)}
.course:hover{border-color:#33415A}
.course .tagline{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--lime)}
.course h3{font-size:17px;font-weight:700;letter-spacing:-.01em;margin:8px 0 7px}
.course p{color:var(--muted);font-size:13.5px}
.course .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px;padding-top:12px;border-top:1px solid var(--line)}
.course .meta span{font-size:11.5px;color:var(--muted);background:var(--navy);border:1px solid var(--line);border-radius:6px;padding:4px 8px}
.filters{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:18px}
.filters button{background:var(--panel);border:1px solid var(--line);border-radius:99px;padding:8px 14px;font-size:13px;color:var(--muted)}
.filters button.on{background:var(--lime);color:#0B1020;border-color:var(--lime);font-weight:600}

/* ebook */
.book{display:grid;gap:24px}
.cover{background:linear-gradient(160deg,#141C30,#0D1322);border:1px solid var(--line);border-radius:16px;padding:34px 26px;text-align:center}
.cover .k{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--lime);text-transform:uppercase}
.cover h3{font-size:27px;font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:14px 0}
.cover .rule{width:52px;height:3px;background:var(--lime);margin:16px auto}
.cover p{color:var(--muted);font-size:13.5px}
.cover .stamp{margin-top:20px;font-size:14px;font-weight:800}
.cover .stamp i{color:var(--lime);font-style:normal}
.price{display:flex;align-items:baseline;gap:11px;margin:6px 0 16px}
.price b{font-size:36px;font-weight:800;letter-spacing:-.03em}
.price s{color:var(--muted);font-size:17px}
.price em{font-style:normal;background:#3A2E12;color:var(--amber);border-radius:6px;padding:4px 9px;font-size:11.5px;font-weight:700}
.incl{list-style:none;padding:0;margin:16px 0}
.incl li{position:relative;padding-left:26px;margin-bottom:10px;font-size:14px}
.incl li::before{content:"\2713";position:absolute;left:0;top:-1px;color:var(--lime);font-weight:700}
.incl li small{display:block;color:var(--muted);font-size:12.5px}
.trust{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px;font-size:11.5px;color:var(--muted)}

/* definition lists / toc */
.toc{list-style:none;padding:0}
.toc li{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid rgba(38,50,68,.6);font-size:14px}
.toc li b{font-family:var(--mono);font-size:11px;color:var(--muted);flex:none;width:70px;padding-top:2px}

/* checkout modal */
.modal{position:fixed;inset:0;z-index:90;display:none}
.modal.on{display:block}
.mbg{position:absolute;inset:0;background:rgba(4,7,14,.78)}
.mpanel{position:absolute;left:0;right:0;bottom:0;max-height:92vh;overflow-y:auto;background:var(--bg);border-top:1px solid var(--line);border-radius:18px 18px 0 0;padding:22px 20px 30px}
.mpanel h3{font-size:20px;font-weight:800;letter-spacing:-.02em}
label.f{display:block;margin:14px 0}
label.f span{display:block;font-size:12.5px;font-weight:600;margin-bottom:6px}
/* 16px is not a style choice. iOS Safari zooms the whole page when you focus
   an input smaller than this, and the visitor then has to pinch back out.
   It happens on the checkout form, at the exact moment someone is paying. */
label.f input,label.f textarea{width:100%;background:var(--navy);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:12px;font-family:inherit;font-size:16px}
label.f input:focus,label.f textarea:focus{outline:none;border-color:var(--lime)}
label.f small{display:block;color:var(--muted);font-size:12px;margin-top:6px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.summary{background:var(--navy);border:1px solid var(--line);border-radius:12px;padding:14px;margin:16px 0}
.summary div{display:flex;justify-content:space-between;font-size:13.5px;margin-bottom:7px;color:var(--muted)}
.summary div.tot{margin:10px 0 0;padding-top:11px;border-top:1px solid var(--line);color:var(--text);font-weight:700;font-size:16px}
.gateway{display:flex;align-items:center;gap:11px;background:var(--navy);border:1px solid var(--line);border-radius:12px;padding:13px}
.gateway .gi{width:38px;height:38px;border-radius:9px;background:var(--lime);color:#0B1020;display:grid;place-items:center;font-weight:800;font-size:13px;flex:none}
.gateway b{display:block;font-size:13.5px}
.gateway small{color:var(--muted);font-size:11.5px}

/* notices */
.note{background:var(--navy);border-left:3px solid var(--lime);border-radius:0 10px 10px 0;padding:14px 15px;font-size:13.5px;color:var(--muted);line-height:1.6;margin-bottom:20px}
.note b{color:var(--text)}
.note.good{border-left-color:var(--green)}
.note.warn{border-left-color:var(--amber)}
.note.bad{border-left-color:var(--red)}
.quote{border-left:3px solid var(--lime);padding:4px 0 4px 16px;font-size:17px;line-height:1.5;margin:20px 0;color:var(--text)}

/* footer */
footer{border-top:1px solid var(--line);padding:34px 0;margin-top:20px;color:var(--muted);font-size:13px}
.fgrid{display:grid;gap:22px;margin-bottom:24px}
.fgrid h4{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text);margin-bottom:10px}
/* Footer links are standalone navigation, not inline prose, so they get a
   real tap target rather than the 19px they had. */
.fgrid a{display:block;padding:10px 0;color:var(--muted);min-height:44px}
.fgrid a:hover{color:var(--lime)}
.legal{border-top:1px solid var(--line);padding-top:18px;font-size:11.5px;line-height:1.6}

@media(min-width:760px){
  .navlinks{display:flex}
  .burger{display:none}
  .h1{font-size:44px}
  .h2{font-size:30px}
  .hero{padding:64px 0 48px}
  .doors{grid-template-columns:1fr 1fr}
  .grid.g2{grid-template-columns:1fr 1fr}
  .grid.g3{grid-template-columns:repeat(3,1fr)}
  .book{grid-template-columns:0.85fr 1.15fr;align-items:start}
  .fgrid{grid-template-columns:2fr 1fr 1fr 1fr}
  .mpanel{top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);width:min(520px,92vw);border-radius:18px;border:1px solid var(--line)}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}