/* ============ Army Now — /start landing page ============
   Brand tokens pulled from eng.army-now.com */
:root{
  --navy:#0A1929;
  --navy-2:#0E1F33;
  --slate:#23303E;
  --slate-line:#3B4754;
  --gold:#D4AF37;
  --gold-dk:#b8962b;
  --white:#ffffff;
  --muted:#9FB0C3;
  --radius:12px;
  --radius-in:8px;
  --maxw:1140px;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  font-family:"Outfit",-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--navy);
  color:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Playfair Display",Georgia,serif;line-height:1.15;font-weight:700}
a{color:inherit;text-decoration:none}
.gold{color:var(--gold)}
.muted{color:var(--muted);font-weight:400}
.center{text-align:center}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;width:100%;text-align:center;
  padding:15px 26px;border-radius:50px;font-weight:600;font-size:1rem;
  cursor:pointer;border:1px solid transparent;transition:transform .15s ease,filter .15s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--gold);color:var(--navy)}
.btn--primary:hover{filter:brightness(1.06)}
.btn--secondary{background:var(--slate);color:var(--white);border-color:var(--slate-line)}
.btn--secondary:hover{border-color:var(--gold)}

.eyebrow{
  text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;font-weight:600;
  color:var(--gold);margin-bottom:14px;
}
.section__title{font-size:2rem;margin-bottom:18px}

/* ---------- header ---------- */
.site-header{
  display:flex;align-items:center;justify-content:space-between;
  max-width:var(--maxw);margin:0 auto;padding:18px 24px;
}
.brand{display:flex;align-items:center;gap:10px}
.brand__logo{height:42px;width:auto}
.brand__name{font-family:"Outfit";font-weight:700;letter-spacing:.05em;font-size:1.15rem}
.header__cta{
  background:transparent;border:1px solid var(--slate-line);color:var(--white);
  padding:10px 20px;border-radius:50px;font-weight:600;font-size:.9rem;transition:border-color .15s;
}
.header__cta:hover{border-color:var(--gold);color:var(--gold)}

/* ---------- hero ---------- */
.hero{
  max-width:var(--maxw);margin:0 auto;padding:40px 24px 60px;
  display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;
}
.hero__title{font-size:3rem;margin-bottom:20px;font-weight:800}
.hero__sub{font-size:1.12rem;color:#D8E0EA;margin-bottom:22px}
.hero__points{list-style:none;display:grid;gap:10px}
.hero__points li{position:relative;padding-left:30px;color:#CDD7E3}
.hero__points li::before{
  content:"★";color:var(--gold);position:absolute;left:0;top:1px;font-size:.95rem;
}

/* ---------- opt-in card ---------- */
.optin{
  background:linear-gradient(180deg,var(--navy-2),#0c2034);
  border:1px solid var(--slate-line);border-radius:var(--radius);
  padding:28px;box-shadow:0 24px 60px rgba(0,0,0,.45);position:relative;
}
.optin__cover{
  width:118px;border-radius:6px;box-shadow:0 10px 26px rgba(0,0,0,.5);
  position:absolute;top:-34px;right:24px;border:1px solid rgba(212,175,55,.35);
}
.optin__title{font-size:1.6rem;margin-bottom:6px;padding-right:120px}
.optin__lead{color:var(--muted);font-size:.96rem;margin-bottom:18px;padding-right:120px}
.form{display:grid;gap:7px}
.form__label{font-size:.85rem;font-weight:500;color:#C6D2DF;margin-top:6px}
.form__input{
  width:100%;background:var(--slate);color:var(--white);
  border:1px solid var(--slate-line);border-radius:var(--radius-in);
  padding:13px 14px;font-family:inherit;font-size:1rem;transition:border-color .15s;
}
.form__input::placeholder{color:#6E7E90}
.form__input:focus{outline:none;border-color:var(--gold)}
select.form__input{appearance:none;cursor:pointer}
.form .btn{margin-top:14px}
.form__micro{font-size:.78rem;color:var(--muted);text-align:center;margin-top:10px}
.form__error{color:#F6896F;font-size:.85rem;text-align:center;min-height:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* success */
.success{text-align:center;display:grid;gap:12px}
.success__check{
  width:64px;height:64px;border-radius:50%;background:rgba(74,222,128,.15);
  color:#4ADE80;font-size:2rem;display:flex;align-items:center;justify-content:center;
  margin:4px auto;border:2px solid #4ADE80;
}
.success .optin__title,.success .optin__lead{padding-right:0}

/* ---------- trust strip ---------- */
.trust{
  background:var(--slate);border-top:1px solid var(--slate-line);border-bottom:1px solid var(--slate-line);
  display:flex;flex-wrap:wrap;justify-content:center;gap:14px 56px;padding:26px 24px;
}
.trust__item{display:flex;flex-direction:column;align-items:center}
.trust__num{font-family:"Playfair Display",serif;font-size:1.7rem;font-weight:800;color:var(--gold)}
.trust__lab{font-size:.82rem;color:var(--muted);letter-spacing:.03em}

/* ---------- what's inside ---------- */
.inside{
  max-width:var(--maxw);margin:0 auto;padding:70px 24px;
  display:grid;grid-template-columns:.85fr 1.15fr;gap:54px;align-items:center;
}
.inside__img img{width:100%;max-width:340px;border-radius:8px;
  box-shadow:0 20px 50px rgba(0,0,0,.5);border:1px solid rgba(212,175,55,.25);display:block;margin:0 auto}
.checklist{list-style:none;display:grid;gap:14px;margin-bottom:26px}
.checklist li{position:relative;padding-left:34px;color:#D2DCE7}
.checklist li::before{
  content:"✓";position:absolute;left:0;top:0;color:var(--navy);background:var(--gold);
  width:22px;height:22px;border-radius:50%;font-size:.8rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.inside__text .btn{max-width:300px}

/* ---------- expert ---------- */
.expert{max-width:760px;margin:0 auto;padding:30px 24px 80px;text-align:center}
.expert__body{color:#CDD7E3;font-size:1.08rem;margin-bottom:26px}
.expert__ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.expert__ctas .btn{width:auto;min-width:230px}

/* ---------- footer ---------- */
.site-footer{
  background:var(--slate);border-top:1px solid var(--slate-line);
  padding:40px 24px;text-align:center;display:grid;gap:14px;
}
.footer__logo{height:54px;margin:0 auto 6px}
.footer__tag{color:var(--gold);font-size:.95rem}
.footer__links{display:flex;gap:24px;justify-content:center;flex-wrap:wrap}
.footer__links a{color:#C6D2DF;font-size:.92rem;transition:color .15s}
.footer__links a:hover{color:var(--gold)}
.footer__contact{color:var(--muted);font-size:.9rem}
.footer__contact a{color:var(--gold)}
.footer__disclaimer{color:#6E7E90;font-size:.78rem;max-width:680px;margin:6px auto 0;line-height:1.5}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .hero{grid-template-columns:1fr;gap:34px;padding-top:24px}
  .hero__title{font-size:2.3rem}
  .inside{grid-template-columns:1fr;gap:34px;padding:50px 24px}
  .inside__img{order:2}
  .optin__cover{width:92px;top:-28px}
  .optin__title,.optin__lead{padding-right:96px}
  .section__title{font-size:1.7rem}
}
@media (max-width:460px){
  .hero__title{font-size:1.95rem}
  .brand__name{display:none}
  .optin{padding:22px}
  .optin__cover{position:static;display:block;margin:0 auto 14px;width:120px}
  .optin__title,.optin__lead{padding-right:0;text-align:center}
}
