/* The Kybalion Unlocked — thekybalionunlocked.com (v2, Sept 2026)
   Palette and type LOCKED TO THE BOOK COVER shipped 14 Sep 2026, measured off the wrap:
   cream #FBF7EE · gold #EFBE33 (UNLOCKED) · gold #F2C94C (HOW IT WORKS) · ground #08162F
   One typeface, Archivo — 800 display, 600 lockup, 500/400 text. The cover uses no serif.
   Superseded: the A+-era gold #D1B955, teal #082535 and Cinzel / Cormorant / Source Sans 3. */
:root{
  --void:#050E1E;          /* page ground behind the starfield */
  --deep:#08162F;          /* the cover's base blue */
  --glass:rgba(5,16,36,.78);
  --glass-line:rgba(239,190,51,.30);
  --gold:#EFBE33;
  --gold-lite:#F2C94C;
  --gold-dark:#A87F1C;
  --cream:#FBF7EE;
  --ivory:#FFFDF8;
  --muted:#9FB0C6;
  --display:'Archivo','Segoe UI',system-ui,sans-serif;
  --sans:'Archivo','Segoe UI',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--void);color:var(--cream);font-family:var(--sans);font-size:17px;line-height:1.6;min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:var(--gold-lite)}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:2px solid var(--gold-lite);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--gold);color:#050E1E;padding:8px 14px;z-index:99}
.skip:focus{left:8px}

/* ---------- the universe, fixed behind every page ---------- */
/* The plain blue starfield (img/starfield.jpg), the background this site used before 15 Sep. Restored 19 Sep 2026:
   Ken, "just a plain starfield", no Adam art and no glowing head. Superseded images are in img/00-superseded. */
.sky{position:fixed;inset:0;z-index:0;background:#0b1533 url(../img/starfield.jpg) center/cover no-repeat}
.sky::after{content:"";position:absolute;inset:0;mix-blend-mode:screen;background:
  radial-gradient(60% 55% at 72% 38%,rgba(90,160,255,.20),transparent 65%),
  radial-gradient(80% 80% at 18% 62%,rgba(46,98,210,.20),transparent 70%)}
#field{position:fixed;inset:0;width:100%;height:100%;z-index:1;opacity:.85;transition:opacity 1.2s;pointer-events:none}
body.playing #field{opacity:.28}
.page{position:relative;z-index:2;min-height:100vh;display:flex;flex-direction:column}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:20px;padding:12px 28px;
  background:rgba(5,18,32,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--glass-line)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;font-family:var(--display);font-weight:800;letter-spacing:.02em;font-size:16px;line-height:1.2;text-transform:uppercase}
/* Logo beside the site name (Ken, 19 Sep 2026): the sigil already used in the footer and favicon. */
.brand .logo{display:block;width:40px;height:40px;flex:none}
.brand small{display:block;font-family:var(--sans);font-weight:600;letter-spacing:.2em;font-size:10.5px;color:var(--gold);text-transform:uppercase;margin-top:3px}
.nav{margin-left:auto;display:flex;gap:24px;align-items:center}
.nav a{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#e3e8ef;text-decoration:none}
.nav a:hover,.nav a[aria-current]{color:var(--gold-lite)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sans);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  color:#08162F!important;background:linear-gradient(180deg,var(--gold-lite),var(--gold-dark));padding:12px 20px;border-radius:3px;border:0;cursor:pointer;
  box-shadow:0 0 22px rgba(239,190,51,.25);transition:transform .15s,box-shadow .25s}
.btn:hover{transform:translateY(-1px);box-shadow:0 0 34px rgba(239,190,51,.45)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:rgba(6,24,40,.6);color:var(--gold-lite)!important;border:1px solid var(--glass-line);box-shadow:none}

/* ---------- two columns ---------- */
.wrap{width:100%;max-width:1360px;margin:0 auto;padding:26px 28px 40px;display:grid;grid-template-columns:300px minmax(0,1fr);gap:26px;align-items:start;flex:1}
.panel{background:var(--glass);border:1px solid var(--glass-line);border-radius:8px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.side{position:sticky;top:80px;padding:18px 14px 14px;max-height:calc(100vh - 100px);overflow:auto;scrollbar-width:thin;scrollbar-color:var(--gold-dark) transparent}
.side .book{display:flex;gap:14px;align-items:center;padding:0 6px 14px;border-bottom:1px solid var(--glass-line);margin-bottom:10px;text-decoration:none}
.side .book img{width:78px;border-radius:2px;box-shadow:0 8px 22px rgba(0,0,0,.55)}
.side .book b{display:block;font-family:var(--display);font-weight:800;font-size:14.5px;line-height:1.15;color:var(--cream);text-transform:uppercase;letter-spacing:.01em}
.side .book span{display:block;font-family:var(--sans);font-weight:600;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;line-height:1.2;color:var(--gold);margin-top:4px}
.side .book em{display:block;font-style:normal;font-size:12px;letter-spacing:.06em;color:var(--muted);margin-top:6px}
.kick{font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin:6px 8px 8px}
.chap{display:flex;gap:12px;width:100%;text-align:left;background:none;border:0;border-left:2px solid transparent;color:var(--cream);
  padding:8px 10px;cursor:pointer;font:inherit;font-size:15.5px;line-height:1.35;border-radius:0 4px 4px 0;transition:background .2s,border-color .2s}
.chap:hover{background:rgba(239,190,51,.08)}
.chap[aria-current="true"]{background:rgba(239,190,51,.14);border-left-color:var(--gold-lite);color:#fff}
.chap .n{font-family:var(--display);color:var(--gold);font-size:13.5px;min-width:22px;padding-top:1px}
.side .free{display:block;margin:12px 6px 4px;text-align:center}
.pick{display:none}

/* ---------- the stage ---------- */
main{min-width:0}
.stage{container-type:inline-size;position:relative;aspect-ratio:16/9;width:100%;overflow:hidden;border-radius:8px;border:1px solid var(--glass-line);background:#06121f;box-shadow:0 24px 70px rgba(0,0,0,.5)}
.stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#06121f}
[hidden]{display:none!important}
/* The opening screen is TYPE, not a picture. The retired cover art is in img/00-superseded.
   The lockup is the cover's: THE KYBALION in cream, UNLOCKED spread to the identical measure,
   then HOW IT WORKS. The title is what gives those three words their context. */
.opening{position:absolute;inset:0;transition:opacity .7s;background:
  radial-gradient(62% 48% at 50% 22%,rgba(23,72,152,.55),transparent 72%),
  radial-gradient(86% 76% at 82% 88%,rgba(10,44,104,.50),transparent 70%),
  linear-gradient(180deg,#071328 0%,#08162F 52%,#050E1E 100%)}
.opening::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(74% 60% at 50% 46%,transparent 40%,rgba(3,10,26,.42) 100%)}
/* Two measures, set from the stage width with container queries. The divisors are the
   RENDERED advance widths of these exact strings in Archivo, measured off the live page in
   Chromium, so every line lands ON its measure at any screen size. The divisors are
   size-invariant because the tracking is set in em:
     THE KYBALION   8.1354 em  (800, -.012em)
     HOW IT WORKS   8.5174 em  (800, -.02em)
   The caption is NOT forced onto the measure: it carries an inline rule whose em margins
   are not in the text run, so a divisor cannot hold for it. It is sized and centred instead.
   --t is the title lockup's measure, --m the sell line's.
   If the wording of one of these lines changes its divisor MUST be re-measured, never guessed:
   render the page, select the element's contents and divide the text width by the font size. */
.opening .txt{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:3% 5%;overflow:hidden;
  --t:min(58cqw,470px); --m:min(82cqw,690px)}
/* the lockup — UNLOCKED spread to the exact width of THE KYBALION, as on the cover */
.lock{margin:0;width:var(--t);font-family:var(--display);font-weight:800;
  text-transform:uppercase;line-height:.96;text-shadow:0 2px 0 rgba(3,10,26,.55),0 2px 14px rgba(3,10,26,.85)}
.lock .l1{display:block;white-space:nowrap;color:var(--cream);font-size:calc(var(--t)/8.1354);letter-spacing:-.012em;margin-right:-.012em}
.lock .l2{display:flex;white-space:nowrap;justify-content:space-between;margin-top:.1em;color:var(--gold);
  font-weight:600;font-size:calc(var(--t)/8.1354*.79);line-height:1}
.opening .how{margin:.26em 0 0;width:var(--m);font-family:var(--display);font-weight:800;
  text-transform:uppercase;white-space:nowrap;color:var(--gold-lite);
  font-size:calc(var(--m)/8.5174);line-height:.96;letter-spacing:-.02em;margin-right:-.02em;
  text-shadow:0 2px 0 rgba(3,10,26,.55),0 2px 16px rgba(3,10,26,.85),0 0 38px rgba(242,201,76,.22)}
.opening .capline{margin:.85em 0 0;max-width:var(--m);font-family:var(--sans);font-weight:500;
  color:var(--cream);font-size:clamp(.6rem,1.5cqw,.92rem);letter-spacing:.22em;
  text-transform:uppercase}
.opening .capline i{font-style:normal;color:var(--gold-dark);margin:0 .55em}
.opening .what{font-size:clamp(.8rem,1.95cqw,1.06rem);line-height:1.45;color:var(--ivory);margin:.95em 0 0;max-width:46ch}
.conn{font-family:var(--sans);font-size:clamp(.82rem,2.05cqw,1.18rem);font-weight:500;color:var(--gold-lite);min-height:2.3em;margin:.85em 0 .3em}
.conn b{font-weight:600;font-family:var(--sans);font-size:.66em;letter-spacing:.24em;text-transform:uppercase;display:block;color:var(--gold);margin-bottom:.3em}
.conn i{display:inline-block;transition:opacity .6s,transform .6s}
.conn i.out{opacity:0;transform:translateY(6px)}
.opening .hint{font-size:clamp(9.5px,1.3cqw,12px);letter-spacing:.2em;text-transform:uppercase;color:#dfe6ef;font-weight:600}
@container (max-width:880px){.opening .what{display:none}}
.stage.run .opening{opacity:0;pointer-events:none}
.hold{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 8%;opacity:0;pointer-events:none;transition:opacity .6s;
  background:radial-gradient(80% 90% at 50% 38%,#0e3550 0%,#050E1E 72%)}
.stage.holding .hold{opacity:1;pointer-events:auto}
.hold .ck{font-size:12.5px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.hold h2{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(1.25rem,2.8vw,2.3rem);margin:.3em 0 .6em;color:var(--cream);line-height:1.02}
.hold ul{list-style:none;margin:0;padding:0;columns:2;column-gap:2.5em}
.hold li{font-size:clamp(.9rem,1.35vw,1.15rem);padding:.25em 0;break-inside:avoid;color:var(--ivory)}
.hold li::before{content:"✦";color:var(--gold);margin-right:.6em;font-size:.8em}
.hold .soon{margin-top:1.2em;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* ---------- under the stage ---------- */
.below{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:22px;margin-top:22px}
.card{padding:22px 24px}
.card h2,.card h3{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.005em;margin:0 0 .5em;color:var(--cream);line-height:1.08}
.card h2{font-size:1.35rem}.card h3{font-size:1.2rem}
.card p{margin:0 0 1em;color:#dfe3e6;max-width:62ch}
.buyrow{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--glass-line)}
.proof{font-size:14px;color:var(--cream);line-height:1.4}
.proof .stars{color:var(--gold-lite);letter-spacing:2px}
.proof small{display:block;color:var(--muted);font-size:12.5px}
.topics{margin:0;padding:0;list-style:none}
.topics li{padding:.2em 0;color:#e6e9ec}
.topics li::before{content:"✦";color:var(--gold);margin-right:.6em;font-size:.8em}
.kit input[type=email]{width:100%;padding:13px 14px;margin:0 0 10px;background:rgba(4,16,28,.85);border:1px solid rgba(239,190,51,.45);color:#fff;border-radius:3px;font:inherit}
.kit input::placeholder{color:#8fa0b2}
.kit .btn{width:100%}
.kit .done{display:none;padding:14px;border:1px solid var(--glass-line);border-radius:4px;background:rgba(239,190,51,.08)}
.kit.sent form{display:none}.kit.sent .done{display:block}
.fine{font-size:12.5px;color:var(--muted);margin-top:10px;line-height:1.45}

/* ---------- plain pages ---------- */
.solo{width:100%;max-width:820px;margin:0 auto;padding:40px 28px 50px;flex:1}
.solo .card{padding:34px 38px}
.solo h1{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.012em;font-size:clamp(1.7rem,3.8vw,2.5rem);margin:0 0 .4em;color:var(--cream);line-height:1.02}
.solo h2{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.01em;font-size:1.12rem;margin:1.6em 0 .5em;color:var(--gold)}
.solo p,.solo li{color:#e2e5e8;max-width:66ch}
.lede{font-family:var(--sans);font-weight:500;font-size:1.18rem;line-height:1.45;color:var(--gold-lite);margin:0 0 1em}
.author{display:grid;grid-template-columns:200px 1fr;gap:28px;align-items:start}
.author img{border-radius:6px;border:1px solid var(--glass-line)}
.field{margin:0 0 16px}
.field label{display:block;font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:12px 13px;background:rgba(4,16,28,.85);border:1px solid rgba(239,190,51,.4);color:#fff;border-radius:3px;font:inherit}
.field textarea{min-height:150px;resize:vertical}
.field select option{background:#08162F}
.err{display:none;border:1px solid rgba(220,120,110,.6);background:rgba(180,60,60,.15);color:#f3d7d2;padding:10px 12px;border-radius:3px;margin-bottom:14px}

/* ---------- footer ---------- */
.foot{position:relative;z-index:2;text-align:center;padding:18px 20px 30px;border-top:1px solid rgba(239,190,51,.14);background:rgba(4,14,24,.6)}
.foot img{width:40px;height:40px;margin:0 auto 10px;opacity:.9}
.foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin-bottom:8px}
.foot nav a{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.foot nav a:hover{color:var(--gold-lite)}
.foot small{color:#8a98a8;font-size:12.5px}

/* ---------- small screens ---------- */
@media (max-width:980px){
  .wrap{grid-template-columns:1fr;padding:16px 16px 30px;gap:16px}
  .side{display:none}
  .pick{display:block;width:100%;padding:13px 12px;font:inherit;font-size:16px;background:var(--glass);color:var(--cream);border:1px solid var(--glass-line);border-radius:6px;margin-bottom:12px}
  .below{grid-template-columns:1fr;gap:16px}
  .nav a.hide-sm{display:none}
  .top{padding:10px 16px;gap:12px}
  .brand small{display:none}
  .btn{padding:11px 14px;font-size:12px}
}
@media (max-width:640px){
  /* the stage is only about 200px tall here, so the hero carries the lockup, the sell line,
     the caption and the connection, and nothing else. The connection line wraps to three
     lines on a 360px screen, so it is sized to fit that, and the "choose a chapter" hint is
     redundant because the picker sits directly above the stage. */
  .opening .txt{padding:3% 4%;--t:min(58cqw,280px);--m:min(88cqw,420px)}
  .opening .what{display:none}
  .opening .capline{margin-top:.6em;letter-spacing:.1em}
  .conn{font-size:.82rem;min-height:3.3em;margin:.5em 0 0}
  .conn b{letter-spacing:.18em;margin-bottom:.2em}
  .opening .hint{display:none}
  .hold ul{columns:1}
  .hold li:nth-child(n+4){display:none}
  .solo{padding:20px 16px 30px}.solo .card{padding:24px 20px}
  .author{grid-template-columns:1fr}.author img{max-width:220px}
  .card{padding:20px 18px}
}
/* below 380px the stage is about 288x162: the lockup, the sell line and the proof line
   are all that fit, so the rotating connection is dropped there. */
@media (max-width:380px){.conn{display:none}}
@media (prefers-reduced-motion:reduce){#field{display:none}*{transition:none!important}}
#free-chapter{scroll-margin-top:90px}

/* the lockup letters and the inline marks are upright, not italic */
.lock .l2 i,.opening .capline i,.conn i{font-style:normal}

/* full screen fallback for the chapter player (see js/site.js, kyb:fs-on) */
body.fsframe{overflow:hidden}
body.fsframe #frame{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;height:100dvh!important;max-width:none!important;max-height:none!important;margin:0!important;border:0!important;border-radius:0!important;z-index:9999!important;background:#000}

/* ---------- Home v4 (19 Sep 2026, Ken): title at the top, one landscape player, the promise and the buttons right under it ---------- */
/* One column width for the whole home page (Ken, 19 Sep 2026: "everything the same width").
   Set by the player: as wide as the screen height allows, so the buttons stay above the fold. */
.home{--col:max(560px,min(1124px,calc((100vh - 252px) * 16 / 9)));width:100%;max-width:calc(var(--col) + 56px);margin:0 auto;padding:18px 28px 40px;flex:1}
.hero{display:flex;flex-direction:column;align-items:center}
/* Title lockup removed from the page (Ken, 19 Sep 2026); the h1 stays for search engines and screen readers. */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.title{margin:0 0 16px;display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:1;
  padding:12px 26px;border-radius:8px;background:rgba(5,14,30,.78);border:1px solid var(--glass-line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.title .tl{display:inline-flex;flex-direction:column}
.title .l1{color:var(--cream);font-size:clamp(1.5rem,3.1vw,2.35rem);letter-spacing:-.012em;white-space:nowrap}
.title .l2{display:flex;justify-content:space-between;color:var(--gold);font-weight:600;font-size:clamp(.95rem,1.95vw,1.45rem);margin-top:.12em}
.title .l2 i{font-style:normal}
.title .th{color:var(--gold-lite);font-size:clamp(2rem,4.4vw,3.35rem);letter-spacing:-.02em;white-space:nowrap;text-shadow:0 0 34px rgba(239,190,51,.35)}
.player{position:relative;width:100%;aspect-ratio:16/9;border-radius:8px;overflow:hidden;border:1px solid var(--glass-line);background:#06121f;box-shadow:0 24px 70px rgba(0,0,0,.6)}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.pitch{width:100%;margin-top:14px;padding:18px 22px;text-align:center;background:rgba(5,14,30,.86)}
.pitch .what{margin:0 auto 14px;max-width:62ch;color:var(--ivory);font-size:1.08rem;line-height:1.5}
.pitch .what strong{color:var(--gold-lite)}
.acts{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.btn.big{font-size:15px;padding:17px 30px}
button.btn{font-family:var(--sans)}
.pitch .proof{margin-top:14px;font-size:14px}
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px}
.nums div{background:rgba(5,14,30,.82);border:1px solid var(--glass-line);border-radius:8px;padding:18px 14px;text-align:center}
.nums b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,3.6vw,2.8rem);line-height:1;color:var(--gold-lite);letter-spacing:-.02em}
.nums span{display:block;margin-top:8px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--cream)}
.built{margin-top:34px;padding:22px 24px;background:rgba(5,14,30,.86)}
.built .kick{margin:0 0 14px}
.built .kick.more{margin:30px 0 14px;padding-top:24px;border-top:1px solid var(--glass-line)}
.steps.gallery{row-gap:30px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.steps figure{margin:0}
.steps img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:top;border-radius:4px;box-shadow:0 14px 40px rgba(0,0,0,.55)}
.steps figcaption{margin-top:12px;color:#dfe3e6;font-size:.98rem;line-height:1.45}
.steps figcaption b{display:block;font-family:var(--display);font-weight:800;text-transform:uppercase;color:var(--gold-lite);font-size:1rem;letter-spacing:.02em;margin-bottom:4px}
.home .below{margin-top:34px}
.home .card{background:rgba(5,14,30,.86)}
.buyrow.end{border-bottom:0;border-top:1px solid var(--glass-line);padding:18px 0 0;margin:18px 0 0}
.buyrow.end small{color:var(--muted)}
body.fsframe{overflow:hidden}
body.fsframe #frame{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;height:100dvh!important;z-index:9999!important;background:#000}
@media (max-width:980px){.home{padding:12px 12px 30px;max-width:none}.title{gap:14px;padding:10px 16px}.player,.pitch{max-width:100%}}
@media (max-width:640px){
  .title{flex-direction:column;gap:6px}
  .acts .btn{flex:1 1 100%}
  .nums{grid-template-columns:repeat(2,1fr);gap:10px;margin-top:22px}
  .steps{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:74%;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
  .steps figure{scroll-snap-align:start}
  .built{padding:18px 16px}
}

  /* ---------- AMAZON REVIEWS FLY-IN (ported from the July 2026 site, 19 Sep 2026) ---------- */
  /* Detached review card. Behaviour is set in the KSP config block near the
     bottom of this file (mode: 'toast' | 'once' | 'tab', plus mobile). */
  .ksp{
    position:fixed;z-index:70;
    width:min(348px,calc(100vw - 32px));
    padding:20px 22px 18px;
    background:linear-gradient(180deg,rgba(38,70,160,.52),rgba(11,21,51,.97));
    border:1px solid var(--glass-line);border-radius:8px;
    box-shadow:0 30px 80px -24px rgba(0,0,0,.92),inset 0 0 60px rgba(65,211,223,.05);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    opacity:0;pointer-events:none;
    transition:transform .6s cubic-bezier(.16,.84,.44,1),opacity .45s ease;
  }
  .ksp[hidden]{display:none}
  .ksp[data-mode="toast"]{left:24px;bottom:24px;transform:translateX(calc(-100% - 44px))}
  .ksp[data-mode="once"]{right:24px;bottom:24px;transform:translateY(calc(100% + 44px))}
  .ksp.in{opacity:1;pointer-events:auto}
  .ksp[data-mode].in{transform:none}   /* must out-rank the two rules above */

  .ksp-top{display:flex;align-items:baseline;gap:9px;margin-bottom:13px;flex-wrap:wrap}
  .ksp-stars{color:var(--gold);letter-spacing:2px;font-size:15px;line-height:1}
  .ksp-score{font-family:var(--display);font-weight:700;font-size:19px;color:var(--gold-lite);line-height:1}
  .ksp-meta{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.18em;
    text-transform:uppercase;color:var(--muted)}
  .ksp-swap{transition:opacity .3s ease}
  .ksp-swap.out{opacity:0}
  .ksp-quote{margin:0 0 12px;font-size:16px;line-height:1.55;color:var(--cream)}
  .ksp-attr{margin:0 0 16px;font-family:var(--sans);font-size:11px;font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .ksp-attr b{color:var(--gold-lite);font-weight:600}
  .ksp-verified{display:inline-block;margin-left:7px;padding:1px 7px;border-radius:2px;
    font-size:9.5px;letter-spacing:.12em;color:#41D3DF;border:1px solid rgba(65,211,223,.45)}
  .ksp-cta{
    display:inline-block;font-family:var(--sans);font-size:11.5px;font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;padding:11px 18px;border-radius:2px;
    color:var(--void)!important;background:linear-gradient(180deg,var(--gold-lite),var(--gold-dark));
    box-shadow:0 0 22px rgba(233,190,91,.25);transition:transform .2s,box-shadow .3s;
  }
  .ksp-cta:hover{transform:translateY(-1px);box-shadow:0 0 34px rgba(233,190,91,.5)}
  .ksp-close{
    position:absolute;top:7px;right:7px;width:32px;height:32px;border:0;background:none;
    color:var(--muted);font-size:19px;line-height:1;cursor:pointer;border-radius:3px;
    display:flex;align-items:center;justify-content:center;transition:color .2s,background .2s;
  }
  .ksp-close:hover{color:var(--gold-lite);background:rgba(233,190,91,.12)}

  /* pull-out tab variant */
  .ksp-tabwrap{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:70;display:flex;align-items:center}
  .ksp-tabwrap[hidden]{display:none}
  .ksp-tab{
    font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
    writing-mode:vertical-rl;padding:18px 11px;border:0;cursor:pointer;border-radius:3px 0 0 3px;
    color:var(--void);background:linear-gradient(90deg,var(--gold-lite),var(--gold-dark));
    box-shadow:-6px 0 24px rgba(4,9,28,.55);
  }
  .ksp-tabwrap .ksp{
    position:static;opacity:0;pointer-events:auto;transform:none;
    border-right:0;border-radius:8px 0 0 8px;
    max-width:0;width:min(340px,calc(100vw - 62px));padding-left:0;padding-right:0;overflow:hidden;
    transition:max-width .55s cubic-bezier(.16,.84,.44,1),padding .55s ease,opacity .3s ease;
  }
  .ksp-tabwrap.open .ksp{max-width:340px;padding-left:22px;padding-right:22px;opacity:1}

  @media(max-width:767px){
    .ksp[data-mode="toast"],.ksp[data-mode="once"]{
      left:12px;right:12px;bottom:12px;width:auto;padding:17px 18px 15px;
      transform:translateY(calc(100% + 30px));
    }
    .ksp-tabwrap{display:none!important}
  }

  body.fsframe .ksp,body.fsframe .ksp-tabwrap{display:none!important}

/* ---------- page viewer (Ken, 19 Sep 2026): tap a book page to read it large. js/lightbox.js ---------- */
.steps figure.zoomable{position:relative;cursor:zoom-in}
.steps figure.zoomable:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:4px}
.zoomhint{position:absolute;right:10px;top:10px;padding:6px 10px;border-radius:30px;background:rgba(5,14,30,.82);color:var(--gold-lite);
  font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--glass-line);pointer-events:none}
body.lb-open{overflow:hidden}
body.lb-open .ksp,body.lb-open .ksp-tabwrap{display:none!important}
.lb{position:fixed;inset:0;z-index:9000;background:rgba(3,8,18,.97);display:flex;flex-direction:column}
.lb[hidden]{display:none}
.lb-stage{flex:1;min-height:0;overflow:auto;display:flex;align-items:center;justify-content:center;padding:16px 72px 8px;-webkit-overflow-scrolling:touch}
.lb-img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;border-radius:3px;box-shadow:0 20px 60px rgba(0,0,0,.7);background:#fff;cursor:zoom-in}
.lb-stage.zoom{display:block;padding:16px}
.lb-stage.zoom .lb-img{max-width:none;max-height:none;margin:0 auto;cursor:zoom-out}
.lb-x{position:absolute;top:14px;right:14px;z-index:2;width:56px;height:56px;border-radius:50%;border:2px solid var(--gold);background:rgba(5,14,30,.92);
  color:#fff;font:400 38px/1 var(--sans);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 24px rgba(0,0,0,.6)}
.lb-x:hover,.lb-x:focus-visible{background:var(--gold);color:#050E1E;outline:none}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:48px;height:72px;border:1px solid var(--glass-line);border-radius:8px;
  background:rgba(5,14,30,.85);color:var(--gold-lite);font:400 44px/1 var(--sans);cursor:pointer}
.lb-prev{left:12px}.lb-next{right:12px}
.lb-nav:hover,.lb-nav:focus-visible{border-color:var(--gold);outline:none}
.lb-bar{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;padding:12px 16px 16px;border-top:1px solid var(--glass-line);background:rgba(5,14,30,.9)}
.lb-cap{margin:0;color:var(--cream);font-size:15px;max-width:52ch}
/* the caption reads exactly as it does under the page on the site: gold label on top, the words underneath */
.lb-cap{text-align:left}
.lb-cap b{display:block;color:var(--gold-lite);font-weight:800;text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px}
.lb-hint{color:var(--muted);font-size:13px}
.lb-count{color:var(--gold-lite);font:700 13px/1 var(--sans);letter-spacing:.12em}
@media (max-width:640px){
  .lb-stage{padding:70px 8px 6px}
  /* phones: the arrows sit in the bottom bar, either side of Buy on Amazon, so they never cover the page */
  .lb-nav{top:auto;bottom:14px;transform:none;width:52px;height:52px;font-size:40px}
  .lb-bar{gap:10px;padding:10px 72px 14px;min-height:80px}
  .lb-cap{font-size:13px;text-align:center}
  .lb-hint{width:100%;text-align:center}
}

/* ---- cover thumbnail in the pitch panel under the player (Ken, 19 Sep 2026) ---- */
.pitch.has-cover{display:flex;align-items:center;justify-content:center;gap:28px;text-align:left}
.pcover{flex:0 0 132px;display:block;transition:transform .2s}
.pcover:hover{transform:translateY(-2px)}
.pcover img{display:block;width:100%;height:auto;border-radius:3px;box-shadow:0 12px 34px rgba(0,0,0,.6)}
.has-cover .pbody{flex:0 1 660px;min-width:0}
.has-cover .what{margin:0 0 14px}
.has-cover .acts{justify-content:flex-start}
@media (max-width:640px){
  .pitch.has-cover{flex-direction:column;align-items:stretch;text-align:center;gap:14px}
  .pcover{flex:none;width:104px;align-self:center}
  .has-cover .pbody{flex:none}
  .has-cover .what{margin:0 auto 14px}
  .has-cover .acts{justify-content:center}
}

/* ---- Mobile funnel (Ken, 19 Sep 2026): TikTok visitors arrive on phones. On a phone the book comes first:
   cover beside the promise and the stars, then Buy on Amazon, then the video. A buy bar sits at the bottom
   of the screen once the main Buy button has scrolled away. Desktop is unchanged. ---- */
@media (max-width:640px){
  .home{padding-top:10px}
  .hero .pitch{order:-1;margin:0 0 12px;padding:14px 14px 16px}
  .pitch.has-cover{display:grid;grid-template-columns:92px 1fr;column-gap:14px;row-gap:0;align-items:center;text-align:left}
  .has-cover .pbody{display:contents}
  .pcover{width:92px;grid-column:1;grid-row:1 / span 2;align-self:start}
  .has-cover .what{grid-column:2;grid-row:1;margin:0;font-size:15px;line-height:1.45;max-width:none}
  .pitch.has-cover .proof{grid-column:2;grid-row:2;margin:8px 0 0;font-size:13px;text-align:left}
  .has-cover .acts{grid-column:1 / -1;grid-row:3;margin-top:14px;gap:10px}
  .has-cover .acts .btn.big{padding:16px 14px;font-size:15px}
  .has-cover .acts .btn.ghost{padding:12px 14px;font-size:13px}
}
.buybar{display:none}
@media (max-width:768px){
  .buybar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;align-items:center;gap:10px;
    padding:9px 12px calc(9px + env(safe-area-inset-bottom));background:rgba(4,14,26,.94);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--glass-line);
    box-shadow:0 -10px 30px rgba(0,0,0,.45);transform:translateY(110%);transition:transform .28s ease;visibility:hidden}
  body.buybar-on .buybar{transform:none;visibility:visible}
  .buybar img{width:34px;height:auto;border-radius:2px;flex:none}
  .bb-t{flex:1;min-width:0;line-height:1.25}
  .bb-t b{display:block;color:var(--cream);font-size:13px;line-height:1.2}
  .bb-t small{display:block;color:var(--muted);font-size:11px;white-space:nowrap;margin-top:2px}
  .bb-t small span{color:var(--gold-lite);letter-spacing:1px}
  .buybar .btn{padding:13px 12px;font-size:12px;letter-spacing:.1em;flex:none}
  body.buybar-on .top .btn{visibility:hidden}
  body.buybar-on .foot{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  body.buybar-on .ksp[data-mode="toast"],body.buybar-on .ksp[data-mode="once"]{bottom:calc(76px + env(safe-area-inset-bottom))}
  body.fsframe .buybar{display:none}
  /* the review pop-up sits above the bar, compact, and without its own Buy button (the bar is right under it) */
  body.buybar-on .ksp{padding:13px 16px 12px}
  body.buybar-on .ksp-top{margin-bottom:8px}
  body.buybar-on .ksp-quote{font-size:14px;line-height:1.45;margin-bottom:8px}
  body.buybar-on .ksp-attr{margin-bottom:0}
  body.buybar-on .ksp-cta{display:none}
}
@media (max-width:370px){ .bb-t small{display:none} }

/* ---------- Header lockup: THE KYBALION UNLOCKED, as on the book cover (Ken, 28 Sep 2026) ----------
   The site moved to thekybalionunlocked.com. The book's name is the biggest thing in the header; Ken McHardie sits small underneath.
   Copied from the cover lockup: THE KYBALION in cream 800; UNLOCKED in gold 600 at 0.72 of its size, spaced out to the same
   width (in Archivo THE KYBALION is 8.05 em and UNLOCKED 5.59 em, so the spacing is 0.8 em); then KEN McHARDIE as the cover prints it.
   --hf is the size of THE KYBALION and everything follows it:
     1170 px and wider: 30 px. 981-1169 px: it shrinks so the menu keeps its room (the menu needs 774 px).
     641-980 px: 30 px (the menu links are hidden there). Phones: it fills the space beside Buy on Amazon, up to 24 px,
     and the sigil is left off so the name can be bigger (the sigil stays in the footer).
   The old one-line "Ken McHardie / The Kybalion Unlocked" rules above (.brand small) no longer match anything. */
:root{--hf:30px}
.brand{--f:var(--hf);gap:14px;letter-spacing:0;text-transform:none;line-height:1}
.brand .logo{width:calc(var(--f)*1.9);height:calc(var(--f)*1.9)}
.brand .lockup{display:flex;flex-direction:column;align-items:flex-start}
.brand .k1{font-family:var(--display);font-weight:800;font-size:var(--f);line-height:.86;letter-spacing:.02em;color:var(--cream);text-transform:uppercase;white-space:nowrap}
.brand .k2{font-family:var(--display);font-weight:600;font-size:calc(var(--f)*.72);line-height:.86;letter-spacing:.8em;margin:calc(var(--f)*.2) -.8em 0 0;color:var(--gold);text-transform:uppercase;white-space:nowrap}
.brand .k3{font-family:var(--sans);font-weight:600;font-size:max(9px,calc(var(--f)*.36));line-height:1;letter-spacing:.22em;margin-top:calc(var(--f)*.27);color:#E3E8EF;white-space:nowrap}
.top{padding-top:10px;padding-bottom:10px}
/* The home page player is sized so the buttons under it stay above the fold. It used to allow 252 px for everything that is
   not the player, with a 70 px header. The header is now 21 px + the taller of the lockup (2.3 x --hf) and the Buy button (45 px), so the same 182 px + header keeps every screen as it was. */
.home{--col:max(560px,min(1124px,calc((100vh - 203px - max(2.3 * var(--hf), 45px)) * 16 / 9)))}
@media (min-width:981px) and (max-width:1169px){:root{--hf:clamp(20px,calc((100vw - 870px) / 9.97),30px)}}
@media (max-width:640px){
  :root{--hf:clamp(13px,calc((100vw - 209px) / 8.07),24px)}
  .brand .logo{display:none}
}