/* ===== AI Engineer Dojo — landing page ===== */
/* Palette + type matched to the books for one cohesive family. */
:root{
  --ink:#262626; --paper:#faf8f3; --paper-2:#f4f1ea;
  --teal:#2f6f6b; --teal-deep:#245a57; --teal-soft:#e7f0ef;
  --rule:#d8d2c6; --muted:#6b675f;
  --amber:#9a6a2f; --amber-soft:#f3ead9;
  --maxw:1080px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; color:var(--ink); background:var(--paper);
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  line-height:1.6; font-size:18px; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.brand,.kick,.btn,.nav,.eyebrow,.tag,.pill{
  font-family:"Avenir Next","Helvetica Neue",Arial,sans-serif;
}
a{ color:var(--teal); }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.eyebrow{ color:var(--teal); letter-spacing:.2em; text-transform:uppercase;
  font-size:.72rem; font-weight:700; margin:0 0 .6em; }

/* ---- nav ---- */
.nav{ position:sticky; top:0; z-index:20; background:rgba(250,248,243,.9);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--rule); }
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:64px; }
.nav .brand{ font-weight:700; font-size:1.05rem; letter-spacing:.02em; color:var(--ink); text-decoration:none; }
.nav .brand b{ color:var(--teal); }
.nav .links{ display:flex; gap:26px; align-items:center; }
.nav .links a{ text-decoration:none; color:var(--muted); font-size:.92rem; font-weight:600; }
.nav .links a:hover{ color:var(--ink); }
.nav .links a.cta{ color:#fff; background:var(--teal); padding:.5em 1.1em; border-radius:8px; }
.nav .links a.cta:hover{ background:var(--teal-deep); }
@media(max-width:640px){ .nav .links a:not(.cta){ display:none; } }

/* ---- buttons ---- */
.btn{ display:inline-block; font-weight:700; font-size:1rem; text-decoration:none;
  padding:.85em 1.6em; border-radius:10px; border:2px solid var(--teal); cursor:pointer; }
.btn.primary{ background:var(--teal); color:#fff; }
.btn.primary:hover{ background:var(--teal-deep); border-color:var(--teal-deep); }
.btn.ghost{ background:transparent; color:var(--teal); }
.btn.ghost:hover{ background:var(--teal-soft); }
.btn-row{ display:flex; gap:14px; flex-wrap:wrap; }

/* ---- hero ---- */
.hero{ padding:74px 0 64px; border-bottom:1px solid var(--rule); }
.hero .grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; }
.hero h1{ font-size:3.1rem; line-height:1.05; margin:.1em 0 .35em; letter-spacing:-.01em; }
.hero .sub{ font-size:1.24rem; color:var(--muted); max-width:34ch; margin:0 0 1.6em; }
.hero .rule{ width:64px; height:4px; background:var(--teal); margin:1.1rem 0 1.4rem; border-radius:2px; }
.hero .reassure{ margin:1.4em 0 0; color:var(--muted); font-size:.92rem; }
.hero-cover{ position:relative; }
.hero-cover img{ width:100%; max-width:340px; display:block; margin:0 auto;
  border-radius:12px; box-shadow:0 24px 60px -22px rgba(38,38,38,.45); transform:rotate(-2deg); }
@media(max-width:820px){
  .hero .grid{ grid-template-columns:1fr; gap:36px; }
  .hero h1{ font-size:2.4rem; }
  .hero-cover{ order:-1; }
  .hero-cover img{ max-width:230px; transform:none; }
}

/* ---- section scaffolding ---- */
section{ padding:72px 0; }
section.alt{ background:var(--paper-2); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.section-head{ max-width:44ch; margin:0 0 2.4rem; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
h2.title{ font-size:2.05rem; line-height:1.12; margin:.1em 0 .3em; letter-spacing:-.01em; }
.section-head p{ color:var(--muted); font-size:1.08rem; margin:.3em 0 0; }

/* ---- problem list ---- */
.problem-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.problem-grid .card{ background:#fff; border:1px solid var(--rule); border-radius:12px; padding:24px; }
.problem-grid .card h3{ font-size:1.08rem; margin:.1em 0 .4em; color:var(--ink); }
.problem-grid .card p{ margin:0; color:var(--muted); font-size:.98rem; }
@media(max-width:820px){ .problem-grid{ grid-template-columns:1fr; } }

/* ---- differentiators ---- */
.diff{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px 40px; }
.diff .item{ display:flex; gap:16px; }
.diff .num{ font-family:"Avenir Next",sans-serif; font-weight:700; color:var(--teal);
  font-size:.95rem; border:2px solid var(--teal); border-radius:50%; width:2.1em; height:2.1em;
  flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
.diff h3{ font-size:1.12rem; margin:.15em 0 .3em; }
.diff p{ margin:0; color:var(--muted); font-size:1rem; }
.diff code{ font-family:"SF Mono",Menlo,Consolas,monospace; font-size:.82em; background:var(--paper-2);
  padding:.08em .4em; border-radius:4px; color:var(--teal-deep); }
@media(max-width:720px){ .diff{ grid-template-columns:1fr; } }

/* ---- free sample banner ---- */
.sample-band{ background:var(--teal); color:#fff; }
.sample-band .wrap{ display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.sample-band .eyebrow{ color:#bfe0dc; }
.sample-band h2{ color:#fff; font-size:1.9rem; margin:.1em 0 .3em; }
.sample-band p{ color:#dcebe9; margin:0; max-width:46ch; }
.sample-band .btn{ background:#fff; color:var(--teal-deep); border-color:#fff; white-space:nowrap; }
.sample-band .btn:hover{ background:var(--amber-soft); }

/* ---- track cards ---- */
.tracks{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; }
.track{ background:#fff; border:1px solid var(--rule); border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column; transition:transform .15s, box-shadow .15s; }
.track:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -20px rgba(38,38,38,.35); }
.track img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; border-bottom:1px solid var(--rule); }
.track .body{ padding:22px 22px 26px; display:flex; flex-direction:column; flex:1; }
.track .who{ color:var(--teal); font-family:"Avenir Next",sans-serif; font-weight:700;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; }
.track h3{ font-size:1.25rem; margin:.25em 0 .35em; }
.track p{ margin:0 0 1.2em; color:var(--muted); font-size:.96rem; flex:1; }
.track .price{ font-family:"Avenir Next",sans-serif; font-weight:700; font-size:1.5rem; color:var(--ink); margin-bottom:.6em; }
.track .price span{ font-size:.85rem; color:var(--muted); font-weight:600; }
.track .btn{ width:100%; text-align:center; padding:.7em 1em; }
@media(max-width:820px){ .tracks{ grid-template-columns:1fr; max-width:400px; margin:0 auto; } }

/* ---- author ---- */
.author .grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:center; }
.author .card{ background:#fff; border:1px solid var(--rule); border-radius:14px; padding:30px; }
.author blockquote{ margin:0; font-size:1.3rem; line-height:1.5; }
.author .who{ margin-top:1.2em; color:var(--muted); font-size:.98rem; }
.author .who b{ color:var(--ink); }
@media(max-width:720px){ .author .grid{ grid-template-columns:1fr; gap:24px; } }

/* ---- roadmap + email ---- */
.roadmap-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:0 0 2.4rem; padding:0; list-style:none; }
.roadmap-list li{ background:#fff; border:1px solid var(--rule); border-radius:10px; padding:14px 16px;
  font-family:"Avenir Next",sans-serif; font-size:.95rem; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.roadmap-list .pill{ font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  padding:.28em .7em; border-radius:20px; white-space:nowrap; }
.pill.live{ background:var(--teal-soft); color:var(--teal-deep); }
.pill.soon{ background:var(--paper-2); color:var(--muted); border:1px solid var(--rule); }
@media(max-width:720px){ .roadmap-list{ grid-template-columns:1fr; } }

.signup{ max-width:520px; margin:0 auto; text-align:center; }
.signup form{ display:flex; gap:10px; margin-top:1.2em; }
.signup input[type=email]{ flex:1; padding:.85em 1em; border:2px solid var(--rule); border-radius:10px;
  font-size:1rem; font-family:inherit; background:#fff; }
.signup input[type=email]:focus{ outline:none; border-color:var(--teal); }
.signup .note{ font-size:.82rem; color:var(--muted); margin-top:.8em; }
@media(max-width:520px){ .signup form{ flex-direction:column; } }

/* ---- final cta ---- */
.final{ text-align:center; }
.final h2{ font-size:2.3rem; margin:.1em 0 .3em; }
.final p{ color:var(--muted); font-size:1.15rem; margin:0 auto 1.6em; max-width:40ch; }

/* ---- footer ---- */
footer{ background:var(--ink); color:#cfcac2; padding:44px 0; font-size:.9rem; }
footer .wrap{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
footer a{ color:#e7e2da; text-decoration:none; }
footer a:hover{ color:#fff; }
footer .brand{ color:#fff; font-weight:700; }
footer .brand b{ color:#7fb3ae; }