/* ============================================================================
   landing.css - the readiness exam landing page.

   Built on portal.css for the palette and the two faces, so the page, the
   portal and the papers are visibly one product. Adds only the landing
   furniture: the navy hero, the alternating bands, the numbered steps.

   Gold stays reserved. It appears on the two call-to-action buttons and the
   pass card and nowhere else, so gold on this page always means "this is the
   thing to do".
   ========================================================================== */

body.lp{display:block}

.lp__in{max-width:1000px; margin:0 auto; padding:0 24px}
.lp__in--narrow{max-width:760px}

/* ==================================================================== hero */
.lp__hero{
  background:
    radial-gradient(1200px 600px at 50% -20%, #123B6B 0%, transparent 62%),
    linear-gradient(180deg,#0A2240 0%, #0C2C55 58%, #0A2240 100%);
  color:#fff; padding:clamp(48px,7vw,86px) 0 clamp(44px,6vw,72px);
  position:relative; overflow:hidden;
}
/* The same faint dot grid the exam cover uses, so the two read as one place. */
.lp__hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:26px 26px;
}
.lp__hero > *{position:relative}

.lp__live{
  display:inline-flex; align-items:center; gap:9px;
  border:1px solid rgba(255,255,255,.24); border-radius:999px;
  padding:7px 16px; font-size:12.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:#DCE9F8;
}
.lp__dot{
  width:8px; height:8px; border-radius:50%; background:#5BD08A;
  box-shadow:0 0 0 4px rgba(91,208,138,.22);
  animation:lp-pulse 2s ease-in-out infinite;
}
@keyframes lp-pulse{50%{opacity:.45}}
.lp__live--soon{color:#F0DFAE; border-color:rgba(212,175,90,.5)}
.lp__live--shut{color:#E4A19A; border-color:rgba(228,161,154,.45)}

.lp__h1{
  font-family:'Fraunces',Georgia,serif; font-weight:600; letter-spacing:-.02em;
  font-size:clamp(34px,6.4vw,62px); line-height:1.06; margin:20px 0 18px;
}
.lp__h1 em{font-style:italic; color:#8FC4F2}
.lp__lede{
  font-size:clamp(16px,2vw,19px); line-height:1.62; color:#B9D2EC; max-width:60ch;
}
.lp__lede b{color:#fff; font-weight:600}

.lp__cta{margin:32px 0 0}
.lp__note{margin-top:13px; font-size:13.5px; color:#8FBCE8}

/* The four numbers. Facts, not decoration, so they are set in the display
   face at a size that reads before the prose does. */
.lp__facts{
  list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px; margin:42px 0 0; padding-top:30px;
  border-top:1px solid rgba(255,255,255,.14);
}
.lp__facts b{
  display:block; font-family:'Fraunces',Georgia,serif; font-size:clamp(28px,4vw,40px);
  font-weight:700; line-height:1; color:#fff; font-variant-numeric:tabular-nums;
}
.lp__facts span{
  display:block; margin-top:6px; font-size:12px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:#8FBCE8; line-height:1.4;
}

/* =================================================================== bands */
.lp__band{padding:clamp(44px,6vw,76px) 0; background:var(--paper)}
.lp__band--white{background:#fff; border-block:1px solid var(--line)}
.lp__k{
  font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--blue);
}
.lp__h2{
  font-family:'Fraunces',Georgia,serif; font-weight:600; letter-spacing:-.015em;
  font-size:clamp(25px,3.8vw,38px); line-height:1.14; margin:10px 0 16px; color:var(--ink);
}
.lp__h2 em{font-style:italic; color:var(--blue-deep)}
.lp__p{font-size:16.5px; line-height:1.68; color:var(--ink-soft); max-width:64ch}
.lp__p + .lp__p{margin-top:14px}
.lp__p b{color:var(--ink); font-weight:600}
.lp__p--small{margin-top:20px; font-size:14.5px}

/* ============================================================== the steps */
.lp__steps{
  list-style:none; margin:32px 0 0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px;
}
.lp__steps li{
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  padding:26px 28px 24px; position:relative;
  box-shadow:var(--shadow-sm);
}
.lp__num{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:11px; margin-bottom:14px;
  background:linear-gradient(135deg,#2E86D8,#1467B3); color:#fff;
  font-family:'Fraunces',Georgia,serif; font-weight:700; font-size:18px;
}
.lp__steps h3{
  font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:21px;
  line-height:1.2; color:var(--ink); margin-bottom:7px;
}
.lp__steps p{font-size:15px; line-height:1.6; color:var(--ink-soft)}

/* ============================================== the two outcomes, opposed */
.lp__two{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:28px}
.lp__card{
  border:1px solid var(--line); border-radius:18px; padding:26px 28px;
  background:var(--card); border-top:4px solid var(--line);
}
.lp__card--pass{border-top-color:var(--gold); background:linear-gradient(180deg,#FFFDF7,#fff)}
.lp__card--fail{border-top-color:var(--red)}
.lp__ck{
  font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft);
}
.lp__card--pass .lp__ck{color:#8A6D1F}
.lp__card--fail .lp__ck{color:var(--red)}
.lp__card h3{
  font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:23px;
  line-height:1.16; color:var(--ink); margin:8px 0 9px;
}
.lp__card p{font-size:15px; line-height:1.62; color:var(--ink-soft)}

.lp__rules{margin-top:26px}

/* ============================================================ final call */
.lp__final{
  padding:clamp(48px,7vw,84px) 0; text-align:center;
  background:linear-gradient(135deg,#08203C,#123F6E);
}
.lp__fh{
  font-family:'Fraunces',Georgia,serif; font-weight:600; letter-spacing:-.015em;
  font-size:clamp(26px,4.4vw,42px); line-height:1.12; color:#fff; margin-bottom:14px;
}
.lp__fp{
  font-size:17px; line-height:1.65; color:#B9D2EC; max-width:54ch;
  margin:0 auto 30px;
}
.lp__final .lp__note{color:#8FBCE8}

.pfoot__in a{color:var(--blue)}

@media (max-width:820px){
  .lp__facts{grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 18px}
  .lp__steps{grid-template-columns:1fr}
  .lp__two{grid-template-columns:1fr}
}
@media (max-width:640px){
  .lp__in{padding:0 18px}
  .lp__steps li{padding:22px 20px}
  .btn-gold--big{width:100%; justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .lp__dot{animation:none}
}