:root{--logo:url("../images/dex-logo.webp")}
:root{
  --navy:#0b1726;--paper:#fbf8f1;--cream:#f4efe5;--gold:#c8a55d;--gold2:#dbc482;
  --ink:#111b24;--muted:#65717a;--line:rgba(11,23,38,.13);
  --serif:"Libre Caslon Display",Georgia,serif;--sans:"DM Sans",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit}
.wrap{width:min(1180px,calc(100% - 48px));margin:auto}
header{position:sticky;top:0;z-index:50;height:68px;display:flex;align-items:center;background:rgba(251,248,241,.94);backdrop-filter:blur(12px);border-bottom:1px solid rgba(11,23,38,.08)}
.nav{width:min(1260px,calc(100% - 40px));margin:auto;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{width:58px;height:58px;display:block;background:var(--logo) center/contain no-repeat}
.navlinks{display:flex;align-items:center;gap:22px;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.navlinks a{opacity:.72}.navlinks a:hover{opacity:1;color:#8e6c34}
.navlinks .cta{opacity:1;background:var(--navy);color:#fff;padding:10px 15px;border-radius:999px}
.hero{padding:64px 0 48px;background:linear-gradient(90deg,var(--paper) 0 61%,var(--cream) 61%)}
.heroGrid{display:grid;grid-template-columns:1.05fr .95fr;gap:42px;align-items:center}
.eyebrow{font-size:9px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:#8b6b32}
h1,h2,h3,h4,p{margin-top:0}
.hero h1{font:400 clamp(48px,6vw,86px)/.92 var(--serif);letter-spacing:-.045em;margin:12px 0 18px}
.hero h1 em{font-style:italic;color:#98743a}
.lead{max-width:650px;color:#53606a;font-size:15px;line-height:1.65}
.methodLine{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);font-size:11px;letter-spacing:.11em;font-weight:700;color:#8b6a33}
.heroImg{width:100%;aspect-ratio:16/8.7;object-fit:cover;border:1px solid var(--line);display:block}
.section{padding:54px 0;border-top:1px solid var(--line)}
.section.alt{background:var(--cream)}
.section.dark{background:var(--navy);color:#fff;border-color:rgba(255,255,255,.12)}
.sectionHead{display:grid;grid-template-columns:70px 1fr;gap:20px;margin-bottom:26px}
.num{font:400 40px/1 var(--serif);color:var(--gold)}
.sectionHead h2{font:400 clamp(34px,4vw,54px)/1 var(--serif);letter-spacing:-.03em;margin-bottom:8px}
.sectionHead p{color:#66727a;font-size:12px;line-height:1.65;max-width:700px}
.dark .sectionHead p{color:#b7c0c7}
.split{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
.visual{width:100%;display:block;border:1px solid var(--line);object-fit:cover}
.copy p{font-size:13px;line-height:1.72;color:#56636d;margin-bottom:14px}
.dark .copy p{color:#b7c1c8}
.pull{font:400 27px/1.12 var(--serif);color:#8f6d35;margin-bottom:16px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.13);border-bottom:1px solid rgba(255,255,255,.13)}
.step{padding:26px 22px;min-height:170px}
.step:not(:last-child){border-right:1px solid rgba(255,255,255,.13)}
.step b{display:block;font:400 34px/1 var(--serif);color:var(--gold2);margin-bottom:22px}
.step h3{font:400 26px/1 var(--serif);margin-bottom:8px}
.step p{font-size:11px;line-height:1.58;color:#b7c1c8;margin:0}
.exercise{background:#fffdf8;border:1px solid var(--line);display:grid;grid-template-columns:1.15fr .85fr}
.passage{padding:26px 28px;border-right:1px solid var(--line)}
.kicker{font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#8b6b32;margin-bottom:12px}
.passage p{font:400 15px/1.65 var(--serif);margin:0}
.passage strong{font-weight:400;background:linear-gradient(transparent 62%,rgba(200,165,93,.34) 62%)}
.answer{padding:26px;background:#f6f1e8}
.answer h3{font:400 23px/1.08 var(--serif);margin-bottom:14px}
.options{display:grid;gap:8px}
.opt{min-height:42px;padding:0 12px;border:1px solid rgba(11,23,38,.16);background:#fff;text-align:left;cursor:pointer;font-size:11px}
.opt.selected{border-color:#9d793b;box-shadow:inset 3px 0 0 #9d793b}
.opt.correct{background:#eef5ed;border-color:#647a65}
.opt.wrong{background:#f7eded;border-color:#9b5c52}
.verify{margin-top:12px;display:flex;gap:8px}
.verify button{min-height:39px;padding:0 14px;border:0;background:var(--navy);color:#fff;font-size:8.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.feedback{display:none;padding:18px 26px;border-top:1px solid var(--line);font-size:11px;line-height:1.58;color:#5d6871}
.feedback.show{display:block}
.supportGrid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.supportCard{border:1px solid var(--line);background:#fffdf8;overflow:hidden}
.supportCard.dark{background:var(--navy);color:#fff;border-color:var(--navy)}
.supportCard img{width:100%;aspect-ratio:16/5.3;object-fit:cover;display:block}
.supportText{padding:22px}
.supportText small{display:block;color:#8d6d35;font-size:8.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;margin-bottom:8px}
.supportCard.dark .supportText small{color:var(--gold2)}
.supportText h3{font:400 28px/1.05 var(--serif);margin-bottom:9px}
.supportText p{font-size:11px;line-height:1.62;color:#606c74;margin:0}
.supportCard.dark .supportText p{color:#b9c2c8}
.seriesTop{display:grid;grid-template-columns:1fr .8fr;gap:38px;align-items:end}
.seriesTop h2{font:400 clamp(36px,4.4vw,58px)/.98 var(--serif);margin:8px 0 0}
.seriesTop p{font-size:11.5px;line-height:1.65;color:#68737b;margin:0}
.books{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:30px}
.book{border-top:1px solid var(--line);padding-top:16px}
.bookVisual{height:260px;background:linear-gradient(#f6f1e7,#ece3d5);display:flex;align-items:flex-end;justify-content:center;padding:16px 14px 0}
.bookVisual img{max-height:242px;max-width:100%;object-fit:contain;filter:drop-shadow(0 11px 13px rgba(11,23,38,.13))}
.book h3{font:400 23px/1 var(--serif);margin:14px 0 6px}
.book p{font-size:10.5px;line-height:1.55;color:#68737b}
.seriesFoot{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px}
.seriesFoot strong{font:400 34px var(--serif);color:#98743b}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 17px;background:var(--navy);color:#fff;font-size:8.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
footer{padding:26px 0;background:var(--paper);border-top:1px solid var(--line);font-size:9px;color:#59646d}
.footerRow{display:flex;justify-content:space-between;align-items:center;gap:20px}
@media(max-width:850px){
  .heroGrid,.split,.seriesTop{grid-template-columns:1fr}
  .hero{background:var(--paper)}
  .supportGrid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}.step:not(:last-child){border-right:0;border-bottom:1px solid rgba(255,255,255,.13)}
  .exercise{grid-template-columns:1fr}.passage{border-right:0;border-bottom:1px solid var(--line)}
  .books{grid-template-columns:1fr}.bookVisual{height:360px}.bookVisual img{max-height:338px}
}
@media(max-width:620px){
  .wrap{width:min(100% - 30px,1180px)}
  .navlinks{gap:12px;font-size:8px}.navlinks a:nth-child(2){display:none}
  .hero{padding:48px 0 38px}.hero h1{font-size:48px}
  .section{padding:42px 0}
  .sectionHead{grid-template-columns:1fr;gap:8px}
  .num{font-size:30px}
  .seriesFoot,.footerRow{align-items:flex-start;flex-direction:column}
}


/* =========================================================
   MODULE 03 — BALANCED INTERACTIVE EXERCISE
   Natural-height cards; no stretched empty left column.
   ========================================================= */
#example .exercise{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  align-items:start;
  background:transparent;
  border:0;
  overflow:visible;
}
#example .passage,
#example .answer{
  align-self:start;
  height:auto;
  min-height:0;
  border:1px solid var(--line);
  background:#fffdf8;
}
#example .passage{
  padding:22px 24px;
}
#example .answer{
  padding:22px 24px;
  background:#f6f1e8;
}
#example .passage p{
  font-size:14px;
  line-height:1.58;
}
#example .answer h3{
  margin-bottom:12px;
}
#example .options{
  gap:7px;
}
#example .opt{
  min-height:39px;
}
#example .verify{
  margin-top:10px;
}
#example .feedback{
  grid-column:1 / -1;
  margin-top:0;
  border:1px solid var(--line);
  border-top:0;
  background:#fff;
  padding:16px 22px;
}
@media(max-width:850px){
  #example .exercise{
    grid-template-columns:1fr;
    gap:12px;
  }
  #example .feedback{
    grid-column:auto;
    border-top:1px solid var(--line);
  }
}


/* =========================================================
   MODULE 03 — INLINE A / B / C / D OPTIONS
   Keeps the answer area compact and balanced with passage.
   ========================================================= */
#example .options{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
}
#example .opt{
  min-height:40px;
  padding:0 8px;
  text-align:center;
  white-space:nowrap;
  font-size:10.5px;
}
#example .verify{
  margin-top:10px;
  justify-content:flex-start;
}
@media(max-width:760px){
  #example .options{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:480px){
  #example .options{
    grid-template-columns:1fr;
  }
}

/* Amazon conversion additions */
.amazonMarket{
  margin-top:24px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  border:1px solid var(--line);
  background:#fffdf8;
}
.amazonMarket small{
  display:block;
  margin-bottom:3px;
  color:#8b6b32;
  font-size:8px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
}
.amazonMarket strong{
  font:400 18px/1.05 var(--serif);
}
.amazonMarketSelect{
  min-width:245px;
  min-height:40px;
  padding:0 34px 0 12px;
  border:1px solid rgba(11,23,38,.17);
  background:#fff;
  color:var(--ink);
  font:500 10px/1 var(--sans);
}
.amazonBuy{
  margin-top:13px;
  min-height:40px;
  width:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--navy);
  background:var(--navy);
  color:#fff;
  font-size:8.5px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  transition:.2s ease;
}
.amazonBuy:hover,
.beginAmazon:hover{
  background:#182b3e;
}
.seriesFoot{
  flex-wrap:wrap;
}
.seriesFoot .beginAmazon{
  margin-left:auto;
}
.seriesFoot .btn + .btn{
  margin-left:8px;
}
@media(max-width:760px){
  .amazonMarket{
    align-items:flex-start;
    flex-direction:column;
  }
  .amazonMarketSelect{
    width:100%;
    min-width:0;
  }
  .seriesFoot .beginAmazon{
    margin-left:0;
  }
  .seriesFoot .btn + .btn{
    margin-left:0;
  }
}