/* Shared landing page styles (lead magnets). Same look as /skillsmasterclass:
   charcoal hero, white opt-in card with a lime offset shadow, stone content sections,
   Inter + Newsreader italic, lime #F1FF2E accents. Pages add only what is unique to them. */
*{box-sizing:border-box}
body{margin:0;background:#171717;color:#ffffff;font-family:Inter,"Segoe UI",system-ui,sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
h1,h2,h3,p{margin:0}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.serif{font-family:"Newsreader",Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;letter-spacing:-0.01em;font-size:1.04em}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;line-height:16px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#a3a3a3}
.eyebrow i{width:8px;height:8px;border-radius:50%;background:#F1FF2E;display:inline-block}
.light .eyebrow{color:#737373}
.light .eyebrow i{box-shadow:0 0 0 1px #171717}

/* Brand mark (no nav on landing pages, so visitors stay on the sign-up) */
.brandbar{padding:20px 0 0}
.brandbar a{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:#ffffff}
.brandbar img{width:36px;height:36px;border-radius:999px;object-fit:cover}
.brandbar b{font-size:18px;letter-spacing:-0.02em}
.brandbar span{font-size:13px;color:#a3a3a3}

/* Hero */
.hero{padding:48px 0 88px}
.hero .top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:64px;align-items:center}
.hero .bottom{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center;margin-top:72px}
.hero h1{font-size:52px;line-height:1.04;letter-spacing:-0.03em;font-weight:700;margin-top:18px}
.lead{font-size:18px;line-height:28px;color:#d4d4d4;margin-top:20px;max-width:560px}
.list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:18px}
.list li{display:flex;gap:12px;align-items:flex-start;color:#e5e5e5;font-size:16px;line-height:24px}
.list li b{color:#ffffff}
.light .list li{color:#404040}.light .list li b{color:#171717}
.tick{flex:0 0 22px;height:22px;border-radius:50%;background:#F1FF2E;color:#171717;display:grid;place-items:center;font-size:13px;font-weight:700;margin-top:1px}

/* Opt-in card */
.optin{background:#ffffff;color:#171717;border-radius:10px;padding:28px;box-shadow:0 30px 60px rgba(0,0,0,.45),10px 10px 0 #F1FF2E}
.optin-title{font-size:22px;line-height:28px;font-weight:700;letter-spacing:-0.02em}
.optin-sub{font-size:15px;color:#525252;margin:4px 0 18px}
.optin input{width:100%;height:50px;min-height:50px;border:1px solid #d4d4d4;border-radius:6px;padding:0 14px;font:inherit;font-size:16px;color:#171717;background:#ffffff}
.optin input:focus{outline:2px solid #171717;outline-offset:1px;border-color:#171717}
.optin .stack{display:flex;flex-direction:column;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;width:100%;height:50px;padding:0 22px;border-radius:6px;font-weight:700;font-size:16px;border:0;cursor:pointer;font-family:inherit;background:#F1FF2E;color:#171717;white-space:nowrap;text-decoration:none}
.btn:hover{background:#e4f21c}
.btn[disabled]{opacity:.7;cursor:default}
.fine{font-size:13px;line-height:19px;color:#737373;margin-top:12px}
.msg{font-size:14px;margin-top:10px;color:#b3261e}

/* Visual: cover image or a mock panel */
.cover{position:relative;width:100%}
.cover .frame{position:relative;border-radius:8px;overflow:hidden;transform:rotate(1.5deg);box-shadow:0 30px 60px rgba(0,0,0,.45),12px 12px 0 #F1FF2E}
.cover img{width:100%;height:auto}
.badge svg{width:14px;height:14px}
.badge{display:inline-flex;align-items:center;gap:8px;position:absolute;left:-14px;bottom:-14px;background:#F1FF2E;color:#171717;font-weight:700;font-size:14px;padding:10px 14px;border-radius:6px;transform:rotate(-3deg);box-shadow:0 8px 20px rgba(0,0,0,.3)}
.mock{background:#ffffff;color:#171717;border-radius:10px;overflow:hidden}
.mock .bar{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid #e5e0d8;background:#F5F0EB;font-size:13px;font-weight:600;color:#525252}
.mock .bar i{width:10px;height:10px;border-radius:50%;background:#d4d4d4;display:inline-block}
.mock .body{padding:20px}
.mock .row{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:12px 14px;border:1px solid #e5e0d8;border-radius:8px;margin-top:10px}
.mock .row:first-child{margin-top:0}
.mock .row b{font-size:15px}
.mock .row span{font-size:13px;color:#737373}
.mock .row em{font-style:normal;font-size:12px;font-weight:700;background:#F1FF2E;border-radius:4px;padding:3px 8px;white-space:nowrap}
.mock code{font-family:ui-monospace,Consolas,monospace;font-size:13px;background:#171717;color:#F1FF2E;border-radius:4px;padding:2px 7px}

/* Stone content sections */
.light{background:#F5F0EB;color:#171717}
.sec{padding:80px 0}
.sec + .sec{padding-top:0}
.sec-head{max-width:720px;display:flex;flex-direction:column;gap:14px;margin-bottom:36px}
.sec-head h2{font-size:40px;line-height:1.08;letter-spacing:-0.03em;font-weight:700}
.sec-head p{font-size:17px;line-height:27px;color:#525252}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:#ffffff;border:1px solid #e5e0d8;border-radius:8px;padding:26px;display:flex;flex-direction:column;gap:10px}
.card .num{font-size:13px;font-weight:700;color:#737373;letter-spacing:.5px}
.card .num.on{align-self:flex-start;background:#F1FF2E;color:#171717;border-radius:4px;padding:2px 8px}
.card h3{font-size:20px;line-height:1.25;letter-spacing:-0.02em}
.card p{color:#525252;font-size:15px;line-height:23px}
.card ul{margin:4px 0 0;padding-left:18px;color:#525252;font-size:15px;line-height:23px;display:flex;flex-direction:column;gap:6px}
.card code{font-family:ui-monospace,Consolas,monospace;font-size:14px;background:#171717;color:#F1FF2E;border-radius:4px;padding:2px 8px;align-self:flex-start}

/* Who */
.who{padding:72px 0}
.who .row{display:flex;gap:28px;align-items:center;max-width:860px;margin:0 auto}
.who img{width:104px;height:104px;border-radius:50%;object-fit:cover;flex:0 0 104px}
.who h2{font-size:24px;letter-spacing:-0.02em;font-weight:700}
.who p{color:#525252;font-size:16px;line-height:25px;margin-top:8px}

/* FAQ */
.faq .inner{max-width:860px;margin:0 auto}
.faq h2{font-size:24px;letter-spacing:-0.02em;font-weight:700;margin-bottom:12px}
.faq details{border-bottom:1px solid #e5e0d8;padding:14px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:16px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;color:#737373}
.faq details[open] summary::after{content:"\2212"}
.faq details p{color:#525252;margin-top:8px;line-height:25px}

/* Closing sign-up band */
.close{padding:80px 0}
.close .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:64px;align-items:center}
.close h2{font-size:40px;line-height:1.08;letter-spacing:-0.03em;font-weight:700}
.close p.lead{margin-top:16px}

footer{background:#F5F0EB;color:#737373;font-size:13px;padding:0 0 32px}
footer .wrap{border-top:1px solid #e5e0d8;padding-top:20px;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}
footer a{color:#525252;text-decoration-color:#F1FF2E;text-decoration-thickness:2px}

a:focus-visible,button:focus-visible{outline:2px solid #F1FF2E;outline-offset:2px}
@media (max-width:960px){
  .cards,.cards.four{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .hero .top,.hero .bottom,.close .wrap{grid-template-columns:1fr;gap:40px}
  .hero .bottom{margin-top:56px}
  .cover{max-width:560px}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  .hero{padding:32px 0 64px}
  .hero h1{font-size:38px}
  .lead{font-size:17px;line-height:27px}
  .optin{padding:20px}
  .badge{left:-6px;bottom:-12px}
  .sec,.close,.who{padding:56px 0}
  .sec-head h2,.close h2{font-size:30px}
  .cards,.cards.two,.cards.four{grid-template-columns:1fr}
  .who .row{flex-direction:column;align-items:flex-start;gap:18px}
}