/* =========================================================================
   LITTLE GENIUS LAB — theme stylesheet
   The tokens below are the same values the printed book is built from, so
   the site and the product cannot drift apart.
   ====================================================================== */

/* ------------------------------------------------------------- fonts --- */
@font-face{font-family:"LGL Display";src:url("../fonts/lgl-display.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"LGL Body";src:url("../fonts/lgl-body-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"LGL Body";src:url("../fonts/lgl-body-500.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"LGL Body";src:url("../fonts/lgl-body-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"LGL Body";src:url("../fonts/lgl-body-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}

/* ------------------------------------------------------------ tokens --- */
:root{
  --ink:#26313F; --ink-soft:#5C6B7E; --ink-faint:#8A97A6;
  --blue:#2F6FEB; --teal:#12A594; --coral:#FF6B4A; --sun:#FFC53D;
  --grape:#8B5CF6; --sky:#9CC9FF;
  --fur:#D2A06A; --wood:#A9713F; --stone:#AFB8C4;
  --paper:#FFFCF5; --cream:#FFF4DE; --mist:#EEF2F7; --line:#C8D0DA;
  --ghost:#E9EDF2; --white:#fff;
  --blue-95:#f4f8fe; --blue-90:#eaf1fd; --teal-92:#eefaf8; --coral-94:#fff1ee;
  --sun-90:#fff6e0; --grape-94:#f5f1fe;

  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:30px;
  --shadow-sm:0 1px 2px rgba(38,49,63,.06),0 2px 6px rgba(38,49,63,.05);
  --shadow-md:0 2px 6px rgba(38,49,63,.07),0 10px 26px rgba(38,49,63,.08);
  --shadow-lg:0 4px 12px rgba(38,49,63,.08),0 22px 48px rgba(38,49,63,.12);

  --wrap:1140px; --gut:20px;
  --step--1:clamp(.82rem,.80rem + .1vw,.88rem);
  --step-0:clamp(1rem,.96rem + .18vw,1.075rem);
  --step-1:clamp(1.13rem,1.06rem + .32vw,1.3rem);
  --step-2:clamp(1.35rem,1.2rem + .7vw,1.75rem);
  --step-3:clamp(1.55rem,1.3rem + 1.3vw,2.4rem);
  --step-4:clamp(1.8rem,1.42rem + 1.9vw,3.1rem);
  --step-5:clamp(2.05rem,1.5rem + 2.6vw,4rem);
}

/* ------------------------------------------------------------- reset --- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"LGL Body",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:var(--step-0);line-height:1.62;-webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:"LGL Display","LGL Body",system-ui,sans-serif;
  font-weight:400;line-height:1.1;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:var(--step-5)}h2{font-size:var(--step-4)}
h3{font-size:var(--step-2)}h4{font-size:var(--step-1)}
p{margin:0 0 1em}
a{color:var(--blue);text-decoration-thickness:.08em;text-underline-offset:.18em}
a:hover{color:#1f57c4}
ul,ol{padding-left:1.15em}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;
  margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:12px;top:12px;z-index:999;background:#fff;padding:10px 16px;
  border-radius:8px;box-shadow:var(--shadow-md)}

/* ------------------------------------------------------------ layout --- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap--narrow{max-width:760px}
.section{padding:clamp(48px,7vw,92px) 0}
.section--tight{padding:clamp(34px,4.5vw,58px) 0}
.section--paper{background:var(--paper)}
.section--mist{background:var(--mist)}
.section--cream{background:var(--cream)}
.section--blue{background:var(--blue-90)}
.section--ink{background:var(--ink);color:#fff}
.section--ink h2,.section--ink h3{color:#fff}
.grid{display:grid;gap:clamp(14px,2vw,24px)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.grid--6{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.stack>*+*{margin-top:var(--s,16px)}
.center{text-align:center}
.eyebrow{font-weight:700;font-size:var(--step--1);letter-spacing:.14em;
  text-transform:uppercase;color:var(--blue);margin:0 0 .6em}
.lede{font-size:var(--step-1);color:var(--ink-soft);max-width:62ch}
.center .lede{margin-inline:auto}
.muted{color:var(--ink-soft)}
.tiny{font-size:var(--step--1);color:var(--ink-soft)}

/* ------------------------------------------------------------ pieces --- */
.card{background:#fff;border:1px solid var(--ghost);border-radius:var(--r-lg);
  padding:clamp(18px,2.4vw,26px);box-shadow:var(--shadow-sm)}
.card--flat{box-shadow:none}
.card--tint{background:var(--blue-95);border-color:#dfe9fb}
.chip{display:inline-flex;align-items:center;gap:6px;font-weight:700;
  font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;background:var(--blue-90);
  color:var(--ink);border:1px solid transparent}
.chip--sun{background:var(--sun-90);border-color:#f6dfa4}
.chip--teal{background:var(--teal-92);border-color:#bfe9e3}
.chip--coral{background:var(--coral-94);border-color:#ffd3c8}
.chip--grape{background:var(--grape-94);border-color:#ddd2fb}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:"LGL Display","LGL Body",sans-serif;font-size:var(--step-1);
  line-height:1;padding:18px 32px;border-radius:999px;border:2px solid var(--ink);
  background:var(--coral);color:#fff;text-decoration:none;cursor:pointer;
  box-shadow:0 4px 0 var(--ink);transition:transform .12s ease,box-shadow .12s ease;
  min-height:56px}
.btn:hover{color:#fff;transform:translateY(2px);box-shadow:0 2px 0 var(--ink)}
.btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--ink)}
.btn--blue{background:var(--blue)}
.btn--ghost{background:#fff;color:var(--ink);box-shadow:0 4px 0 var(--ghost);
  border-color:var(--line)}
.btn--ghost:hover{color:var(--ink)}
.btn--block{width:100%}
.btn--sm{font-size:var(--step-0);padding:13px 22px;min-height:46px;box-shadow:0 3px 0 var(--ink)}

.pill-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  list-style:none;padding:0;margin:0}
.pill{display:inline-flex;align-items:center;gap:8px;background:#fff;
  border:1px solid var(--ghost);border-radius:999px;padding:8px 15px;
  font-size:var(--step--1);font-weight:600;color:var(--ink-soft)}
.pill svg{width:18px;height:18px}

.lgl-icon,.lgl-char{display:block}

/* ------------------------------------------------------------ header --- */
.site-header{position:sticky;top:0;z-index:40;background:rgba(255,252,245,.92);
  backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--ghost)}
.site-header__inner{display:flex;align-items:center;gap:18px;
  min-height:66px;padding-block:8px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);
  font-family:"LGL Display",sans-serif;font-size:1.12rem;line-height:1.05;flex:0 0 auto}
.brand svg{width:38px;height:38px;flex:0 0 auto}
.brand span small{display:block;font-family:"LGL Body",sans-serif;font-size:.62rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);font-weight:700}
.nav{margin-left:auto;display:flex;align-items:center;gap:6px}
.nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.nav a{display:block;padding:9px 13px;border-radius:999px;text-decoration:none;
  color:var(--ink);font-weight:600;font-size:.94rem}
.nav a:hover,.nav .current-menu-item>a{background:var(--blue-90)}
.nav__cta{margin-left:6px;display:flex;align-items:center;gap:6px}
/* Quieter than the buy button on purpose. A returning customer knows to look
   for it; a first-time visitor should see the price, not a login. */
.nav__signin{display:block;padding:9px 12px;border-radius:999px;text-decoration:none;
  color:var(--ink-soft);font-weight:600;font-size:.9rem;white-space:nowrap}
.nav__signin:hover{background:var(--blue-90);color:var(--ink)}
.nav-toggle{display:none;margin-left:auto;background:#fff;border:2px solid var(--ink);
  border-radius:12px;width:46px;height:46px;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:0 3px 0 var(--ink)}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--ink);
  position:relative}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;
  left:0;width:20px;height:2px;background:var(--ink)}
.nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px}
@media (max-width:900px){
  .nav-toggle{display:flex}
  .nav{position:fixed;inset:66px 0 auto 0;background:var(--paper);flex-direction:column;
    align-items:stretch;gap:0;padding:12px var(--gut) 20px;border-bottom:1px solid var(--ghost);
    box-shadow:var(--shadow-md);transform:translateY(-130%);transition:transform .2s ease;
    margin-left:0}
  .nav[data-open="true"]{transform:none}
  .nav ul{flex-direction:column;gap:2px}
  .nav a{padding:13px 12px}
  .nav__cta{margin:10px 0 0;flex-direction:column;align-items:stretch;gap:8px}
  .nav__cta .btn{width:100%}
  .nav__signin{text-align:center;border:2px solid var(--line, #c8d0da);padding:12px}
}

/* -------------------------------------------------------------- hero --- */
.hero{position:relative;overflow:hidden;background:
  linear-gradient(180deg,var(--blue-90) 0%,var(--blue-90) 58%,var(--paper) 58%)}
.hero__inner{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(24px,4vw,56px);
  align-items:center;padding:clamp(30px,5vw,60px) 0 clamp(36px,5vw,64px)}
.hero h1{margin-bottom:.32em}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero__sub{font-size:var(--step-1);color:var(--ink);max-width:46ch;margin-bottom:1.1em}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:18px}
/* The ebook's price, and only the ebook's. The little label above it is
   there because a bare figure beside a button reads as "the price of
   everything", which it is not. */
.hero__price{display:grid;grid-template-columns:auto auto auto;gap:0 10px;
  align-items:baseline;font-family:"LGL Display",sans-serif}
.hero__price small{grid-column:1/-1;font-family:"LGL Body",sans-serif;
  font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:.1em}
.hero__price b{font-size:var(--step-3);color:var(--ink);font-weight:400}
.hero__price s{color:var(--ink-faint);font-size:var(--step-1);
  font-family:"LGL Body",sans-serif}
.hero__save{font-family:"LGL Body",sans-serif;font-style:normal;font-weight:700;
  font-size:.74rem;letter-spacing:.04em;color:#0d7a5f;background:var(--teal-92);
  border:1px solid #bfe9e3;border-radius:999px;padding:3px 9px;white-space:nowrap}
.hero__art{position:relative}
.hero__book{border-radius:var(--r-md);box-shadow:var(--shadow-lg);
  border:1px solid var(--ghost);background:#fff;transform:rotate(-2deg)}
.hero__crew{display:flex;justify-content:center;gap:2px;margin-top:-26px;position:relative}
.hero__crew svg{width:clamp(48px,7vw,74px);height:auto;filter:drop-shadow(0 6px 10px rgba(38,49,63,.14))}
.hero__badge{position:absolute;right:-6px;top:-14px;background:var(--sun);
  border:2px solid var(--ink);border-radius:999px;padding:10px 16px;
  font-family:"LGL Display",sans-serif;font-size:.95rem;transform:rotate(7deg);
  box-shadow:0 3px 0 var(--ink);z-index:2}
@media (max-width:860px){
  .hero{background:linear-gradient(180deg,var(--blue-90) 0%,var(--blue-90) 74%,var(--paper) 74%)}
  .hero__inner{grid-template-columns:1fr;text-align:center;gap:26px}
  .hero__sub{margin-inline:auto}
  .hero__cta{justify-content:center}
  .hero .pill-row{justify-content:center}
  .hero__art{order:-1;max-width:330px;margin-inline:auto}
}

/* ------------------------------------------------------------- stats --- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
.stat{background:#fff;border:1px solid var(--ghost);border-radius:var(--r-md);
  padding:18px 14px;text-align:center;box-shadow:var(--shadow-sm)}
.stat b{display:block;font-family:"LGL Display",sans-serif;font-size:var(--step-3);
  line-height:1;color:var(--blue)}
.stat span{display:block;margin-top:6px;font-size:.78rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}

/* ------------------------------------------------------------- zones --- */
.zone{display:flex;gap:14px;align-items:flex-start;background:#fff;
  border:1px solid var(--ghost);border-radius:var(--r-md);padding:16px;
  box-shadow:var(--shadow-sm)}
.zone__n{flex:0 0 42px;height:42px;border-radius:999px;display:grid;place-items:center;
  font-family:"LGL Display",sans-serif;color:#fff;font-size:1.05rem}
.zone h4{margin:0 0 2px;font-size:1.02rem}
.zone p{margin:0;font-size:.88rem;color:var(--ink-soft);line-height:1.5}
.zone__icon{width:26px;height:26px;margin-top:2px;flex:0 0 26px}

/* ------------------------------------------------------------- steps --- */
.steps{counter-reset:step}
.step{position:relative;background:#fff;border:1px solid var(--ghost);
  border-radius:var(--r-lg);padding:26px 22px 22px;box-shadow:var(--shadow-sm)}
.step::before{counter-increment:step;content:counter(step);position:absolute;
  top:-18px;left:22px;width:40px;height:40px;border-radius:999px;background:var(--coral);
  color:#fff;display:grid;place-items:center;font-family:"LGL Display",sans-serif;
  font-size:1.1rem;border:2px solid var(--ink);box-shadow:0 3px 0 var(--ink)}
.step h3{margin-top:8px;font-size:var(--step-1)}
.step p{margin:0;color:var(--ink-soft);font-size:.95rem}

/* ------------------------------------------------------------- crew ---- */
.crew{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px}
.crew__item{text-align:center;background:#fff;border:1px solid var(--ghost);
  border-radius:var(--r-lg);padding:18px 14px;box-shadow:var(--shadow-sm)}
.crew__item svg{width:86px;height:86px;margin:0 auto 8px}
.crew__item b{font-family:"LGL Display",sans-serif;font-size:1.15rem;display:block}
.crew__item span{display:block;font-size:.85rem;color:var(--ink-soft);margin-top:2px}
.crew__item i{display:block;font-style:normal;margin-top:8px;font-size:.84rem;
  font-weight:600;color:var(--blue)}

/* ----------------------------------------------------------- samples --- */
.samples{position:relative}
.samples__track{display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(230px,268px);gap:16px;overflow-x:auto;
  scroll-snap-type:x mandatory;padding:6px 2px 18px;
  scrollbar-width:thin}
.samples__track::-webkit-scrollbar{height:8px}
.samples__track::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.sample{scroll-snap-align:center;background:#fff;border:1px solid var(--ghost);
  border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-sm);
  cursor:zoom-in;padding:0;text-align:left;font:inherit;color:inherit;
  transition:transform .14s ease,box-shadow .14s ease;width:100%}
.sample:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.sample img{width:100%;aspect-ratio:1/1.35;object-fit:cover;object-position:top center;
  background:var(--mist)}
.sample__meta{padding:12px 14px 14px;border-top:1px solid var(--ghost)}
.sample__meta b{display:block;font-family:"LGL Display",sans-serif;font-size:1rem;
  line-height:1.2}
.sample__meta span{display:block;font-size:.78rem;color:var(--ink-soft);margin-top:4px}
.samples__nav{display:flex;gap:8px;justify-content:center;margin-top:4px}
.samples__nav button{width:44px;height:44px;border-radius:999px;border:2px solid var(--ink);
  background:#fff;cursor:pointer;box-shadow:0 3px 0 var(--ink);font-size:1.1rem;
  display:grid;place-items:center}
.samples__nav button:active{transform:translateY(3px);box-shadow:none}

.lightbox{position:fixed;inset:0;z-index:100;background:rgba(38,49,63,.9);
  display:none;padding:16px}
.lightbox[data-open="true"]{display:grid;place-items:center}
/* The panel always fits the window: the page image shrinks to fit rather
   than pushing the caption and the arrows off the bottom of the screen. */
.lightbox__panel{background:#fff;border-radius:var(--r-lg);max-width:760px;width:100%;
  max-height:calc(100dvh - 32px);display:flex;flex-direction:column;
  overflow:hidden;position:relative;box-shadow:var(--shadow-lg)}
.lightbox__panel img{width:100%;min-height:0;flex:1 1 auto;object-fit:contain;
  object-position:center;background:var(--mist)}
.lightbox__bar{display:flex;gap:12px;align-items:center;padding:14px 16px;
  border-top:1px solid var(--ghost);flex-wrap:wrap;flex:0 0 auto;background:#fff}
.lightbox__bar b{font-family:"LGL Display",sans-serif;font-size:1.05rem}
.lightbox__close{position:absolute;top:10px;right:10px;width:44px;height:44px;
  border-radius:999px;border:2px solid var(--ink);background:#fff;cursor:pointer;
  font-size:1.2rem;line-height:1;display:grid;place-items:center;z-index:2}
.lightbox__side{display:flex;gap:8px;margin-left:auto}
.lightbox__side button{width:44px;height:44px;border-radius:999px;
  border:2px solid var(--ink);background:#fff;cursor:pointer;display:grid;place-items:center}

/* ----------------------------------------------------------- balance --- */
.balance{display:grid;gap:9px}
.balance__row{display:grid;grid-template-columns:minmax(150px,1.1fr) 3fr auto;
  gap:12px;align-items:center;font-size:.93rem}
.balance__bar{height:14px;border-radius:99px;background:var(--ghost);overflow:hidden}
.balance__bar i{display:block;height:100%;border-radius:99px}
.balance__row b{font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-soft);
  font-size:.86rem}
@media (max-width:640px){.balance__row{grid-template-columns:1fr auto;gap:4px 10px}
  .balance__bar{grid-column:1/-1}}

/* ------------------------------------------------------------ bonus ---- */
.bonus{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;
  background:#fff;border:1px solid var(--ghost);border-radius:var(--r-lg);
  padding:20px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.bonus__tag{position:absolute;top:14px;right:-34px;transform:rotate(38deg);
  background:var(--sun);color:var(--ink);font-weight:700;font-size:.68rem;
  letter-spacing:.12em;padding:5px 42px;text-transform:uppercase}
.bonus img{width:120px;border-radius:var(--r-sm);box-shadow:var(--shadow-md);
  border:1px solid var(--ghost)}
.bonus h4{margin:0 0 4px}
.bonus p{margin:0;font-size:.92rem;color:var(--ink-soft)}
.bonus__worth{display:inline-block;margin-top:8px;font-weight:700;font-size:.85rem;
  color:var(--teal)}
@media (max-width:520px){.bonus{grid-template-columns:1fr;text-align:center}
  .bonus img{margin-inline:auto;width:150px}}

/* ------------------------------------------------------------ offer ---- */
.offer{max-width:620px;margin-inline:auto;background:#fff;border:2px solid var(--ink);
  border-radius:var(--r-xl);box-shadow:0 8px 0 var(--ink);overflow:hidden}
.offer__head{background:var(--blue);color:#fff;padding:20px 24px;text-align:center}
.offer__head b{font-family:"LGL Display",sans-serif;font-size:var(--step-2);display:block}
.offer__head span{font-size:.88rem;opacity:.92}
.offer__body{padding:clamp(20px,3vw,30px)}
.offer__price{text-align:center;margin-bottom:18px}
.offer__price b{font-family:"LGL Display",sans-serif;font-size:clamp(2.6rem,9vw,3.6rem);
  line-height:1;display:block;color:var(--ink)}
.offer__price s{color:var(--ink-faint);font-size:var(--step-1)}
.offer__price i{font-style:normal;display:block;margin-top:6px;font-weight:700;
  color:var(--teal);font-size:.95rem}
.offer__list{list-style:none;padding:0;margin:0 0 22px}
.offer__list li{display:flex;gap:11px;align-items:flex-start;padding:9px 0;
  border-bottom:1px dashed var(--ghost);font-size:.97rem}
.offer__list li:last-child{border-bottom:0}
.offer__list svg{width:21px;height:21px;flex:0 0 21px;margin-top:2px}
.offer__list span{color:var(--ink-soft);display:block;font-size:.85rem}
.offer__foot{text-align:center;margin-top:14px}
.paymarks{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.paymark{border:1px solid var(--ghost);border-radius:8px;padding:6px 11px;
  font-size:.74rem;font-weight:700;color:var(--ink-soft);background:#fff;
  letter-spacing:.04em}

/* -------------------------------------------------------- guarantee ---- */
.guarantee{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;
  background:var(--sun-90);border:1px solid #f6dfa4;border-radius:var(--r-lg);
  padding:clamp(18px,2.6vw,26px)}
.guarantee svg{width:74px;height:74px}
@media (max-width:520px){.guarantee{grid-template-columns:1fr;text-align:center}
  .guarantee svg{margin-inline:auto}}

/* ---------------------------------------------------------------- faq -- */
.faq{max-width:780px;margin-inline:auto}
.faq details{background:#fff;border:1px solid var(--ghost);border-radius:var(--r-md);
  margin-bottom:10px;box-shadow:var(--shadow-sm)}
.faq summary{cursor:pointer;padding:17px 46px 17px 18px;font-weight:700;
  list-style:none;position:relative;font-size:1.02rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:18px;top:50%;
  transform:translateY(-50%);font-family:"LGL Display",sans-serif;font-size:1.3rem;
  color:var(--blue)}
.faq details[open] summary::after{content:"\2212"}
.faq .faq__a{padding:0 18px 18px;color:var(--ink-soft)}
.faq .faq__a p:last-child{margin-bottom:0}

/* ------------------------------------------------------------ footer --- */
.site-footer{background:var(--ink);color:#c9d2de;padding:clamp(36px,5vw,58px) 0 26px;
  font-size:.93rem}
.site-footer a{color:#fff;text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.site-footer h4{color:#fff;font-size:1rem;margin-bottom:.7em}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:7px}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;
  gap:clamp(18px,3vw,36px)}
@media (max-width:820px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.footer__grid{grid-template-columns:1fr}}
.footer__bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:30px;
  padding-top:18px;display:flex;gap:14px;flex-wrap:wrap;justify-content:space-between;
  font-size:.84rem;color:#98a6b6}
.footer__brand{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.footer__brand svg{width:40px;height:40px}
.footer__brand b{font-family:"LGL Display",sans-serif;font-size:1.15rem;color:#fff}

/* ------------------------------------------------------- sticky CTA ---- */
.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:50;background:#fff;
  border-top:1px solid var(--ghost);box-shadow:0 -6px 24px rgba(38,49,63,.12);
  padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));
  display:none;gap:12px;align-items:center;justify-content:space-between}
.stickybar[data-show="true"]{display:flex}
.stickybar b{font-family:"LGL Display",sans-serif;font-size:1.25rem;line-height:1}
.stickybar s{color:var(--ink-faint);font-size:.85rem;margin-left:6px}
.stickybar .btn{padding:14px 22px;min-height:50px;font-size:1rem}
@media (min-width:861px){.stickybar{display:none!important}}
body.has-stickybar{padding-bottom:78px}
@media (min-width:861px){body.has-stickybar{padding-bottom:0}}

/* ------------------------------------------------------------ misc ----- */
.whatsapp-fab{position:fixed;right:14px;bottom:86px;z-index:45;width:54px;height:54px;
  border-radius:999px;background:#25D366;display:grid;place-items:center;
  box-shadow:var(--shadow-md);border:2px solid #fff}
.whatsapp-fab svg{width:28px;height:28px}
@media (min-width:861px){.whatsapp-fab{bottom:20px}}

.notice{border-radius:var(--r-md);padding:14px 16px;border:1px solid;margin-bottom:16px;
  font-size:.95rem}
.notice--ok{background:var(--teal-92);border-color:#bfe9e3}
.notice--bad{background:var(--coral-94);border-color:#ffd3c8}

.entry-content{max-width:760px;margin-inline:auto}
.entry-content h2{margin-top:1.6em}
.entry-content h3{margin-top:1.4em}
.entry-content img{border-radius:var(--r-md)}
.entry-content blockquote{border-left:4px solid var(--sun);margin:1.4em 0;
  padding:.3em 0 .3em 18px;color:var(--ink-soft)}
.entry-content table{width:100%;border-collapse:collapse;margin:1.4em 0}
.entry-content th,.entry-content td{border:1px solid var(--ghost);padding:9px 12px;
  text-align:left}
.entry-content th{background:var(--mist)}

.postcard{background:#fff;border:1px solid var(--ghost);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.postcard img{aspect-ratio:16/9;object-fit:cover;width:100%}
.postcard__body{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1}
.postcard h3{margin:0;font-size:1.18rem}
.postcard a{text-decoration:none;color:inherit}
.postcard a:hover h3{color:var(--blue)}

.pagination{display:flex;gap:8px;justify-content:center;margin-top:30px;flex-wrap:wrap}
.pagination .page-numbers{display:grid;place-items:center;min-width:44px;height:44px;
  padding:0 12px;border-radius:999px;border:1px solid var(--ghost);background:#fff;
  text-decoration:none;font-weight:600}
.pagination .current{background:var(--blue);color:#fff;border-color:var(--blue)}

/* form fields */
.field{display:block;margin-bottom:14px}
.field span{display:block;font-weight:700;font-size:.9rem;margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;padding:13px 15px;
  border:2px solid var(--line);border-radius:12px;font:inherit;background:#fff;
  min-height:50px}
.field input:focus,.field textarea:focus{border-color:var(--blue);outline:none}
.field--check{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;
  color:var(--ink-soft)}
.field--check input{width:auto;min-height:0;margin-top:3px}

/* print */
@media print{
  .site-header,.site-footer,.stickybar,.whatsapp-fab,.samples__nav{display:none!important}
  body{background:#fff}
}

/* ---------------------------------------------------------- the Lab --- */
/* The section on the sales page that explains the screen version. Two
   columns on a desktop — what it does, and what it costs, which is nothing
   extra — stacking on a phone. */
.labpitch{display:grid;grid-template-columns:1.1fr 1fr;
  gap:clamp(18px,3vw,36px);align-items:start}
.labpitch__list{list-style:none;margin:0;padding:0}
.labpitch__list li{position:relative;padding-left:32px;margin-bottom:14px;
  font-size:var(--step-0)}
.labpitch__list li::before{content:"▸";position:absolute;left:6px;top:0;
  color:var(--teal);font-weight:800}
.labpitch__big{font-family:"LGL Display",sans-serif;
  font-size:clamp(1.25rem,2.6vw,1.6rem);line-height:1.2;margin:0 0 10px}
.labpitch__alt{margin-top:16px;padding-top:14px;
  border-top:1px dashed var(--line)}
@media (max-width:760px){.labpitch{grid-template-columns:1fr}}

/* ---------------------------------------------------------- the tiers --- */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
  gap:clamp(16px,2.2vw,24px);align-items:stretch}
.tier{display:flex;flex-direction:column;position:relative}
.tier--best{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-90)}
.tier__flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--blue);color:#fff;font-size:.68rem;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;padding:5px 14px;
  border-radius:999px;white-space:nowrap}
.tier__name{margin:6px 0 2px;font-size:1.15rem}
.tier__price{margin:0 0 16px;line-height:1}
.tier__price s{color:var(--ink-faint);font-size:1rem;margin-right:8px}
.tier__price b{font-size:clamp(1.7rem,3.4vw,2.1rem);font-weight:800}
.tier__per{font-size:.85rem;color:var(--ink-soft)}
.tier .ticks{flex:1 1 auto}
.tier__note{margin:10px 0 0;text-align:center;min-height:2.4em}
.tiers__foot{margin-top:clamp(20px,2.6vw,30px);max-width:60ch;
  margin-inline:auto}

/* ------------------------------------------------------- the countdown --- */
/* One deadline, the same for everyone, counting to a real instant. */
.lgl-clock{display:inline-flex;flex-direction:column;align-items:center;
  gap:8px;margin-top:clamp(18px,2.4vw,26px);padding:16px 24px;
  background:#fff;border:2px solid var(--line);border-radius:18px}
.lgl-clock__label{font-size:.8rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--coral)}
.lgl-clock__row{display:flex;gap:10px}
.lgl-clock__part{display:flex;flex-direction:column;align-items:center;
  min-width:56px;padding:8px 6px;background:var(--mist);border-radius:12px}
.lgl-clock__part[hidden]{display:none}
.lgl-clock__part b{font-family:"LGL Display",sans-serif;font-size:1.5rem;
  line-height:1;font-variant-numeric:tabular-nums}
.lgl-clock__part i{font-style:normal;font-size:.66rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft);margin-top:4px}
.lgl-clock__when{font-size:.78rem;color:var(--ink-soft)}
@media (max-width:420px){
  .lgl-clock{padding:14px 16px}
  .lgl-clock__part{min-width:48px}
  .lgl-clock__part b{font-size:1.25rem}
}

/* The one sentence that makes the ladder fair, given room to be read. */
.tiers__fair{max-width:64ch;margin:14px auto 0;font-size:var(--step--1);
  color:var(--ink-soft);background:var(--blue-95);border:1px dashed #cfe0fb;
  border-radius:14px;padding:12px 18px}

/* The upgrade panel: an arithmetic, not a price tag. */
.upsell{border-color:var(--blue);background:var(--blue-95)}
.upsell__sum{margin:8px 0 16px;line-height:1.9}
.upsell__sum span{display:inline-block;min-width:11em;color:var(--ink-soft)}
.upsell__sum b{font-size:1.1rem}
.upsell__off{color:var(--teal)}
.upsell__now{font-size:1.5rem}

/* The ticked list, defined in the theme because the pricing section appears
   on the sales page where the plugin's member stylesheet is not loaded. */
.ticks{list-style:none;margin:0 0 20px;padding:0}
.ticks li{position:relative;padding-left:28px;margin-bottom:10px}
.ticks li::before{content:"✓";position:absolute;left:0;top:0;font-weight:800;
  color:var(--teal)}

/* -------------------------------------------------------------- watch --- */
/* The video of the Lab, under the sample pages. Sized by aspect ratio rather
   than by a fixed height, so the box never jumps when the file loads — a
   section that grows by 300px as you scroll past it is how a visitor loses
   their place on a sales page. */
.watch{max-width:940px;margin:0 auto;border-radius:24px;overflow:hidden;
  border:3px solid var(--ink);box-shadow:0 10px 0 var(--ink);background:var(--ink);
  aspect-ratio:16/9}
.watch__v{display:block;width:100%;height:100%;border:0;object-fit:cover;background:var(--ink)}
.watch__play{display:block;width:100%;height:100%;padding:0;border:0;cursor:pointer;
  background:var(--ink) center/cover no-repeat;position:relative}
.watch__play::after{content:"";position:absolute;inset:0;background:rgba(38,49,63,.28)}
.watch__tri{position:absolute;inset:0;margin:auto;width:84px;height:84px;z-index:1;
  display:grid;place-items:center;border-radius:999px;background:#fff;color:var(--ink);
  font-size:1.9rem;padding-left:6px;box-shadow:0 6px 0 rgba(0,0,0,.25);
  transition:transform .18s ease}
.watch__play:hover .watch__tri{transform:scale(1.07)}
@media (max-width:640px){
  .watch{border-radius:18px;box-shadow:0 6px 0 var(--ink)}
  .watch__tri{width:64px;height:64px;font-size:1.5rem}
}
@media (prefers-reduced-motion:reduce){
  .watch__play:hover .watch__tri{transform:none}
}

/* --------------------------------------------------- getting started --- */
/* The tutorial page. Numbered like the three-step block on the front page,
   but tall rather than wide: this one is read top to bottom on a phone by
   somebody who is looking for one specific answer, so every step has to be
   skimmable and none of them may sit in a column beside another. */
.gs{list-style:none;counter-reset:gs;margin:26px 0 0;padding:0}
.gs__step{counter-increment:gs;position:relative;background:#fff;
  border:1px solid var(--ghost);border-radius:var(--r-lg);
  padding:26px 22px 22px;margin-bottom:18px;box-shadow:var(--shadow-sm)}
.gs__head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.gs__head h2{margin:0;font-size:var(--step-1)}
.gs__icon{flex:0 0 auto;width:40px;height:40px;border-radius:999px;
  background:var(--blue-90);display:grid;place-items:center;position:relative}
.gs__icon svg{width:22px;height:22px}
/* The number rides on the icon rather than floating over the corner, so a
   step whose heading wraps to two lines on a narrow phone cannot push the
   number off the top of its own card. */
.gs__icon::after{content:counter(gs);position:absolute;top:-8px;left:-8px;
  width:26px;height:26px;border-radius:999px;background:var(--coral);color:#fff;
  display:grid;place-items:center;font-family:"LGL Display",sans-serif;
  font-size:.82rem;border:2px solid var(--ink);box-shadow:0 2px 0 var(--ink)}
.gs__step p{color:var(--ink-soft);font-size:.96rem}
.gs__step.is-done .gs__icon{background:var(--teal-92)}
.gs__done{display:inline-block;margin:0 0 10px;font-size:.84rem;font-weight:600;
  color:var(--teal);background:var(--teal-92);border-radius:999px;padding:3px 11px}
.gs__done::before{content:"✓ "}

.gs__note{background:var(--sun-90);border-radius:var(--r-md);padding:13px 15px;
  margin:14px 0 0;font-size:.9rem;color:var(--ink-soft)}
.gs__note b{color:var(--ink);display:block;margin-bottom:2px}

.gs__list{list-style:none;margin:14px 0 0;padding:0}
.gs__list li{border-top:1px solid var(--ghost);padding:12px 0;font-size:.93rem;
  color:var(--ink-soft)}
.gs__list b{display:block;color:var(--ink);font-family:"LGL Display",sans-serif;
  font-size:1.02rem;margin-bottom:2px}

.gs__two{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.gs__door{background:var(--mist);border-radius:var(--r-md);padding:14px 15px}
.gs__door h3{margin:0 0 4px;font-size:1.02rem}
.gs__door p{margin:0;font-size:.89rem}

/* A drawing of the password card, not a screenshot of it. A screenshot would
   be stale the first time a button is reworded, and would need alt text
   repeating everything the paragraph above it already says. */
.gs__screen{display:block;background:var(--mist);border:1px dashed var(--line);
  border-radius:var(--r-md);padding:16px 16px 18px;margin:14px 0}
.gs__screen-h{display:block;font-family:"LGL Display",sans-serif;font-size:1.05rem;
  color:var(--ink);margin-bottom:10px}
.gs__screen-l{display:block;font-size:.8rem;font-weight:600;color:var(--ink-soft);
  margin-bottom:4px}
.gs__screen-i{display:block;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-sm);padding:9px 12px;color:var(--ink-faint);
  letter-spacing:.14em;margin-bottom:12px}
.gs__screen-btn{display:inline-block;background:var(--blue);color:#fff;
  border-radius:999px;padding:8px 18px;font-weight:600;font-size:.9rem}

.gs__kinds{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0}
.gs__kinds span{background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:5px 13px;font-size:.84rem;font-weight:600;color:var(--ink-soft)}
.gs__kinds span:first-child{background:var(--ink);border-color:var(--ink);color:#fff}

.gs__do{margin:16px 0 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.gs__fix{margin-top:26px}
.gs__fixlist{margin:6px 0 16px}
.gs__fixlist dt{font-weight:700;color:var(--ink);margin-top:14px;font-size:.96rem}
.gs__fixlist dd{margin:3px 0 0;color:var(--ink-soft);font-size:.92rem}
.gs__end{margin-top:22px}

.gs-now__go{display:flex;margin-top:10px;gap:8px;flex-wrap:wrap}

@media (max-width:560px){
  .gs__step{padding:22px 17px 18px}
  .gs__two{grid-template-columns:1fr}
}

/* The tutorial film on the getting-started page. A 9:16 recording, so it is
   held to a phone's width and centred rather than stretched across a laptop —
   a tall video blown up to 760px is mostly bezel. */
.gs__film{margin:24px auto 6px;max-width:320px}
.gs__film-v{display:block;width:100%;aspect-ratio:9/16;border-radius:22px;
  border:3px solid var(--ink);box-shadow:0 8px 0 var(--ink);background:var(--ink)}
.gs__film figcaption{margin-top:10px}

/* ------------------------------------------- block editor leftovers ---- */
/* WordPress's 110KB block stylesheet is dequeued in inc/enqueue.php, because
   the only core blocks this site uses are paragraph, heading and quote. The
   first two need nothing. These are the rules quote would otherwise have
   taken from it, in the theme's own terms — a quiet rule and a little air,
   rather than WordPress's heavier default. */
.wp-block-quote{margin:1.6em 0;padding:2px 0 2px 18px;
  border-left:3px solid var(--line);color:var(--ink-soft);font-style:italic}
.wp-block-quote p{margin:0 0 .6em}
.wp-block-quote p:last-child{margin-bottom:0}
.wp-block-quote cite{display:block;font-style:normal;font-size:var(--step--1);
  color:var(--ink-faint);margin-top:.4em}

/* The blog sidebar's widgets are blocks too, and these three are the only
   ones that noticed the stylesheet going. The search box is given the same
   shape as every other field on the site; the two lists lose the markers
   WordPress had already been hiding for them. */
.wp-block-search__label{display:block;font-weight:700;font-size:.9rem;margin-bottom:6px}
.wp-block-search__inside-wrapper{display:flex;gap:8px}
.wp-block-search__input{flex:1 1 auto;min-width:0;padding:11px 14px;font:inherit;
  border:2px solid var(--line);border-radius:12px;background:#fff;min-height:46px}
.wp-block-search__input:focus{border-color:var(--blue);outline:none}
.wp-block-search__button{flex:0 0 auto;padding:0 16px;min-height:46px;font:inherit;
  font-weight:600;color:var(--ink);background:var(--mist);cursor:pointer;
  border:2px solid var(--line);border-radius:12px}
.wp-block-search__button:hover{background:var(--ghost)}
.wp-block-latest-posts,.wp-block-latest-comments,
.wp-block-categories-list,.wp-block-archives-list,.wp-block-page-list{
  list-style:none;padding-left:0;margin:0}
.wp-block-latest-posts li,.wp-block-latest-comments li,
.wp-block-categories-list li,.wp-block-archives-list li,
.wp-block-page-list li{margin:0 0 .5em}
.wp-block-latest-comments li:last-child,.wp-block-latest-posts li:last-child{margin-bottom:0}
.wp-block-group{margin:0}

/* ------------------------------------------------ the way into the Lab --- */
/* Signing in lands on the grown-ups page, so this is the first thing a
   member sees there: one sentence and one button, side by side on a desktop
   and stacked on a phone, where a button beside text is a button nobody can
   read the text of. */
.labcta{display:flex;align-items:center;gap:clamp(14px,2.4vw,26px);
  flex-wrap:wrap;justify-content:space-between}
.labcta__text{flex:1 1 260px;min-width:0}
.labcta__text h2{margin:0 0 .25em;font-size:var(--step-2)}
.labcta__text p{margin:0}
.labcta__btn{flex:0 0 auto}
@media (max-width:520px){
  /* flex-basis measures the main axis, and the main axis has just turned
     vertical — left at 260px it becomes a 260px-tall block of text with the
     button pushed to the floor below it. */
  .labcta{flex-direction:column;align-items:stretch;text-align:left;gap:16px}
  .labcta__text{flex:0 1 auto}
  .labcta__btn{width:100%}
}