/* Extracted from the design's lift-life-pages/interview-readiness.html inline <style>.
   Loaded after learning.css (compiled Tailwind). Wrapped in @layer base so these
   page styles beat Tailwind preflight (same layer, later order) but do NOT
   override the header/footer utility classes in @layer utilities. */

@layer base {

:root{
  --orange:#FF5A1F; --orange-dark:#E64A0F; --black:#111111;
  --cream:#FFF4EC; --gray:#6B7280; --border:#ECECEC; --green:#1DBF73; --red:#E5484D;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:'Inter',sans-serif; color:var(--black); background:#fff; line-height:1.5;}
h1,h2,h3,.display{font-family:'Space Grotesk',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:-0.01em;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1200px; margin:0 auto; padding:0 32px;}

.logo{display:flex; align-items:center; gap:8px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:22px;}
.logo .dot{width:16px; height:16px; background:var(--orange); border-radius:50%; display:inline-block;}
.logo .life{color:var(--orange); font-style:italic; font-weight:500;}
.signin{border:1.5px solid var(--black); padding:9px 20px; border-radius:8px; font-weight:600; font-size:14px;}

.hero{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; padding:56px 32px 40px; align-items:start;}
.eyebrow{display:flex; align-items:center; gap:8px; font-weight:600; font-size:13px; letter-spacing:.08em; color:var(--black); margin-bottom:18px;}
.eyebrow .ring{width:16px;height:16px;border-radius:50%; border:4px solid var(--orange); position:relative;}
.eyebrow .ring::after{content:"";position:absolute; inset:4px; background:var(--orange); border-radius:50%;}
h1.display{font-size:50px; line-height:1.05; margin-bottom:20px;}
.jagged{
  background:var(--black); color:#fff; padding:2px 14px; display:inline-block;
  clip-path:polygon(0% 15%,4% 0%,10% 12%,16% 0%,22% 12%,28% 0%,34% 12%,40% 0%,46% 12%,52% 0%,58% 12%,64% 0%,70% 12%,76% 0%,82% 12%,88% 0%,94% 12%,100% 0%,100% 85%,96% 100%,90% 88%,84% 100%,78% 88%,72% 100%,66% 88%,60% 100%,54% 88%,48% 100%,42% 88%,36% 100%,30% 88%,24% 100%,18% 88%,12% 100%,6% 88%,0% 100%);
}
.orange-text{color:var(--orange);}
.subtext{font-size:17px; color:#333; max-width:480px; margin-bottom:30px;}
.cta{display:inline-flex; align-items:center; gap:10px; background:var(--orange); color:#fff; font-weight:700; font-size:14px; letter-spacing:.03em; padding:16px 26px; border-radius:10px; border:none; cursor:pointer; box-shadow:0 8px 20px rgba(255,90,31,.28);}
.cta:hover{background:var(--orange-dark);}

.card{background:#fff; border:1px solid var(--border); border-radius:20px; padding:26px; box-shadow:0 20px 50px rgba(0,0,0,.06);}
.card h3{font-size:13px; margin-bottom:2px;}
.card .sub{font-size:12px; color:var(--gray); margin-bottom:18px;}

.ring-wrap{position:relative; width:130px; height:130px; margin:0 auto 20px;}
.ring-wrap svg{transform:rotate(-90deg);}
.ring-bg{stroke:#F1F1F1;}
.ring-fg{stroke:var(--orange); stroke-linecap:round;}
.ring-center{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.ring-center b{font-size:26px; font-family:'Space Grotesk';}
.ring-center span{font-size:10px; color:var(--gray);}

.mod-list{list-style:none;}
.mod-list li{display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--border);}
.mod-list li:last-child{border-bottom:none;}
.mod-list .status{width:22px;height:22px;border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; color:#fff;}
.status.done{background:var(--green);}
.status.pending{background:#F1F1F1; color:var(--gray);}
.mod-list .name{flex:1; font-size:13px; font-weight:600;}
.mod-list .go{font-size:11px; font-weight:700; color:var(--orange); border:1.5px solid var(--orange); border-radius:8px; padding:5px 10px; cursor:pointer; background:#fff;}

.modules-sec{padding:56px 32px; background:var(--cream);}
.modules-sec h2{font-size:28px; margin-bottom:8px;}
.modules-sec p.lead{color:#444; margin-bottom:30px; max-width:640px;}

.accordion{background:#fff; border-radius:14px; border:1px solid var(--border); margin-bottom:14px; overflow:hidden;}
.acc-head{display:flex; align-items:center; justify-content:space-between; padding:18px 20px; cursor:pointer;}
.acc-head .left{display:flex; align-items:center; gap:14px;}
.acc-head .idx{width:32px;height:32px;border-radius:50%; background:var(--black); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk'; font-weight:700; font-size:13px; flex-shrink:0;}
.acc-head h3{font-size:15px; text-transform:none;}
.acc-head .tag{font-size:11px; color:var(--gray); font-weight:500;}
.acc-head .arrow{font-size:16px; transition:transform .25s ease;}
.accordion.open .arrow{transform:rotate(180deg);}

.acc-body{max-height:0; overflow:hidden; transition:max-height .3s ease;}
.acc-body-inner{padding:0 20px 20px; display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.do-col, .dont-col{border-radius:12px; padding:16px;}
.do-col{background:#EFFBF4;}
.dont-col{background:#FDECEC;}
.do-col h4, .dont-col h4{font-size:12px; text-transform:uppercase; letter-spacing:.05em; margin-bottom:10px;}
.do-col h4{color:var(--green);}
.dont-col h4{color:var(--red);}
.do-col ul, .dont-col ul{list-style:none;}
.do-col li, .dont-col li{font-size:13px; margin-bottom:8px; padding-left:20px; position:relative; color:#333;}
.do-col li::before{content:"✓"; position:absolute; left:0; color:var(--green); font-weight:700;}
.dont-col li::before{content:"✕"; position:absolute; left:0; color:var(--red); font-weight:700;}
.acc-footer{grid-column:1/-1; display:flex; justify-content:flex-end;}
.start-btn{background:var(--black); color:#fff; font-size:12px; font-weight:700; padding:9px 16px; border-radius:8px; border:none; cursor:pointer;}
.start-btn:hover{background:var(--orange);}


@media(max-width:900px){
  .hero{grid-template-columns:1fr;}
  .acc-body-inner{grid-template-columns:1fr;}
  h1.display{font-size:34px;}
}

/* keep legacy headings intact under Tailwind preflight */
body h1, body h2, body h3, body h4, body h5, body h6 { font-size: revert; font-weight: revert; }
body h1, body h2, body h3, body .display {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

}