:root{
  --btn-bg:#012b11;
  --btn-bg-hover:#073a1b;
  --btn-bg-active:#001f0c;
  --btn-border:#0b3a1c;

  --bg0:#040806;
  --bg1:#07110c;
  --panel:rgba(255,255,255,.06);
  --stroke:rgba(255,255,255,.12);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.72);
  --muted2:rgba(255,255,255,.56);
  --accent1:#14b8a6;
  --accent2:#60a5fa;
  --accent3:#f59e0b;
  --radius:18px;
  --shadow: 0 14px 46px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(20,184,166,.18), transparent 60%),
    radial-gradient(900px 450px at 50% 10%, rgba(96,165,250,.12), transparent 62%),
    radial-gradient(900px 450px at 50% 28%, rgba(245,158,11,.08), transparent 68%),
    linear-gradient(180deg, var(--bg1), var(--bg0));
}
a{color:inherit; text-decoration:none}
a:hover{opacity:.95}

.wrap{max-width:1120px; margin:0 auto; padding:24px}
header{
  position:sticky; top:0; z-index:10;
  backdrop-filter:saturate(140%) blur(10px);
  background: rgba(4,8,6,.68);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  /* Tighten vertical height (keep logo size unchanged) */
  gap:16px; padding:2px 18px;
}
.brand{
  display:flex; align-items:center; gap:12px; min-width: 240px;
}
.brand img{height:144px; width:auto; filter: drop-shadow(0 10px 18px rgba(0,0,0,.5));}
.brand .t{display:flex; flex-direction:column; line-height:1.05}
.brand .t b{font-size:14px; letter-spacing:.06em}
.brand .t span{font-size:12px; color:var(--muted2)}
.links{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.links a{
  padding:8px 12px; border-radius:999px; border:1px solid transparent;
  color:var(--muted); font-size:13px;
}
.links a[aria-current="page"]{border-color:rgba(255,255,255,.12); background:rgba(255,255,255,.06); color:var(--text)}
.links a:hover{background:rgba(255,255,255,.06); color:var(--text)}

.card{
  padding:18px;
  background:var(--panel);
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.card.solidPanel{
  background: rgba(255,255,255,.10);
}

.hero{padding:48px 24px; display:grid; gap:22px; align-items:center}
.heroGrid{display:grid; grid-template-columns: 1.2fr .8fr; gap:22px}
@media (max-width: 860px){ .heroGrid{grid-template-columns:1fr} }
.heroGrid.oneCol{grid-template-columns:1fr}
.heroQuick{display:grid; gap:16px; margin-top:18px; grid-template-columns:repeat(3,minmax(0,1fr))}
.heroQuickItem{
  display:flex; flex-direction:column; gap:10px;
  align-items:flex-start;
  padding:16px 16px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--stroke);
  border-radius:14px;
}
.heroQuickItem .btn{margin-top:auto}
.heroQuickText{display:flex; flex-direction:column}
@media (max-width: 1020px){
  .heroQuick{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 680px){
  .heroQuick{grid-template-columns:1fr}
  .heroQuickItem .btn{width:100%}
}
.heroQuickTitle{font-weight:700; letter-spacing:.01em}
.heroQuickDesc{color:var(--muted); margin-top:4px; line-height:1.45}
.hKicker{color:var(--muted2); font-size:13px; letter-spacing:.16em; text-transform:uppercase}
.hTitle{font-size:44px; letter-spacing:-.02em; margin:8px 0 0}
@media (max-width: 520px){ .hTitle{font-size:34px} }
.hSub{color:var(--muted); margin:10px 0 0; max-width:58ch; line-height:1.55}
.ctaRow{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:12px;
  border:1px solid var(--btn-border);
  background:var(--btn-bg);
  color:var(--text);
  font-weight:600; font-size:14px;
}
.btn.primary{
  background:var(--btn-bg);
  border-color:var(--btn-border);
}
.btn.ghost{background:transparent}
.btn.disabled, .btn[aria-disabled="true"]{opacity:.55; cursor:not-allowed; pointer-events:none}
.btn.disabled:hover, .btn[aria-disabled="true"]:hover{transform:none; background:var(--btn-bg)}
.btn:hover{background:var(--btn-bg-hover); transform: translateY(-1px); transition: transform .12s ease, background .12s ease}

.pillRow{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.pill{
  font-size:12px; color:var(--muted);
  padding:6px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
}
.section{margin:28px 0}
.section h2{margin:0 0 10px; font-size:22px}
.section p{margin:0; color:var(--muted); line-height:1.55}

.grid3{display:grid; gap:14px; grid-template-columns:repeat(3,1fr)}
@media (max-width: 920px){ .grid3{grid-template-columns:1fr} }
.tile{padding:18px; display:flex; flex-direction:column}
.tile .ctaRow{margin-top:auto}
.tile h3{margin:0 0 6px; font-size:16px}
.tile p{margin:0; color:var(--muted2); line-height:1.5}

/* Challenge + Fun pages use "pin-cta" cards; give them the same
   bottom-left CTA placement behavior as .tile cards (Start Here). */
.pin-cta{display:flex; flex-direction:column}
/* Inset pinned CTA buttons on Challenge/Fun cards so they match Start Here spacing */
.card.pin-cta{padding:18px}
.pin-cta .ctaRow{margin-top:auto; justify-content:flex-start}

.booksGrid{display:grid; gap:16px; grid-template-columns:repeat(2,1fr)}
@media (max-width: 920px){ .booksGrid{grid-template-columns:1fr} }
.bookCard{padding:16px; display:grid; gap:12px}
.bookTop{display:grid; grid-template-columns: 160px 1fr; gap:14px; align-items:start}
@media (max-width: 520px){ .bookTop{grid-template-columns: 130px 1fr} }
.cover{
  width:160px; height:auto; border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 16px 44px rgba(0,0,0,.52);
}
.bookMeta h3{margin:0 0 6px; font-size:18px}
.bookMeta p{margin:0; color:var(--muted2); line-height:1.55}
.badgeRow{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.badge{font-size:11px; color:var(--muted); padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10)}
.buyRow{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}

/* Books buyRow layout */
.booksGrid .buyRow{display:flex; flex-wrap:wrap; gap:10px}
.booksGrid .buyRow .btn{flex:1 1 calc(50% - 10px)}
.booksGrid .buyRow .btn:nth-child(3){flex:1 1 100%}
@media (max-width: 520px){.booksGrid .buyRow .btn{flex:1 1 100%}}

/* Match Book One button stack to Book Two (full-width vertical buttons) */
.booksGrid > .bookCard:nth-child(1) .buyRow .btn{flex:1 1 100%}



/* Match Book Two button stack to Book One (full-width vertical buttons) */
.booksGrid > .bookCard:nth-child(2) .buyRow .btn{flex:1 1 100%}


/* Match Book Three button stack to Book Two (full-width vertical buttons) */
.booksGrid > .bookCard:nth-child(3) .buyRow .btn{flex:1 1 100%}
footer{
  margin-top:40px;
  padding:26px 0 40px;
  color: var(--muted2);
  border-top: 1px solid rgba(255,255,255,.08);
}
.small{font-size:12px; color:var(--muted2)}
.hr{height:1px; background:rgba(255,255,255,.08); margin:18px 0}

form{display:grid; gap:10px}
label{font-size:13px; color:var(--muted)}
input, textarea{
  font: inherit; padding:10px 12px; border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.18);
  color:var(--text);
}
textarea{min-height:140px; resize:vertical}
.notice{font-size:12px; color:var(--muted2); line-height:1.5}
.hidden{display:none !important}


.brand-tagline{
  margin:0.5rem auto 0.75rem;
  text-align:center;
  font-size:0.9rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.7);
}

.brand-tagline .flip-s{
  display:inline-block;
  transform:scaleX(-1);
}

.card p{margin:0 0 12px 0; color:var(--muted); line-height:1.55}

.card p:last-child{margin-bottom:0}

.fadeOut{
  height:64px;
  margin-top:-64px;
  background:linear-gradient(to bottom, rgba(0,0,0,0), var(--bg0));
}


/* Scrollable excerpt box (keeps the card size, lets the text scroll) */
.excerptScroll{
  max-height: 420px;
  overflow-y: auto;
  padding-right: 10px;
}
@media (max-width: 700px){
  .excerptScroll{ max-height: 55vh; }
}

/* Characters page */
.cardsGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:18px;
}
@media (max-width: 980px){
  .cardsGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .cardsGrid{ grid-template-columns: 1fr; }
}
.characterCard img{
  /* Reduce character portrait size ~50% while keeping a centered layout */
  width:50%;
  height:auto;
  display:block;
  margin:0 auto;
  border-radius:18px;
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
}
.characterName{
  margin:14px 0 6px;
  font-size:18px;
  font-weight:700;
}
.characterHook{ color: rgba(255,255,255,.78); }
.characterLine{ margin-top:10px; color: rgba(255,255,255,.82); font-style: italic; }

.btn:active{background:var(--btn-bg-active)}
.btn:focus{outline:2px solid rgba(255,255,255,.18); outline-offset:2px}


/* Book Five centering */
.booksGrid .bookCard.book5{grid-column:1 / -1; justify-self:center; max-width: 720px; width:100%}


/* Rights row layout */
.rightsRow{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap}
.rightsRow .muted{margin:0; max-width: 560px}
.rightsRow .btn{white-space:nowrap}

@media (min-width: 900px){
  .rightsRow{flex-wrap:nowrap}
  .rightsRow .muted{max-width:none; white-space:nowrap}
}