/* ============================================================
   XFO.CSS — XFO Outdoor War giveaway landing page
   Extends style.css — same tokens (--navy/--orange/--white etc),
   same header/footer, same button classes. This file only adds
   the page-specific hero, briefing card, and form wrapper.
============================================================ */

/* ============================================================
   XFO HERO
============================================================ */
.xfo-hero{
  background:var(--navy);
  position:relative;
  overflow:hidden;
  padding:56px 0 64px;
}
.xfo-hero-glow{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 50% 60% at 75% 30%,rgba(232,100,12,.10) 0%,transparent 60%);
}
.xfo-partner-badge{
  display:inline-flex;align-items:center;gap:12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  padding:8px 16px 8px 8px;
  margin-bottom:24px;
}
.xfo-partner-badge img{height:28px;width:auto;display:block}
.xfo-partner-badge span{
  font-family:var(--semi);font-weight:700;font-size:11px;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--gray);
}
.xfo-hero-hed{
  font-family:var(--impact);
  font-size:clamp(34px,4.5vw,60px);
  line-height:.95;letter-spacing:-.5px;
  color:var(--white);margin-bottom:14px;
}
.xfo-hero-hed em{font-style:normal;color:var(--orange)}
.xfo-hero-sub{
  font-size:15px;line-height:1.6;color:var(--gray);
  margin-bottom:24px;
}

.xfo-hero-inner{
  max-width:var(--max);margin:0 auto;padding:0 var(--pad) 0;
  display:grid;grid-template-columns:1fr 620px;gap:24px;
  align-items:start;
  position:relative;z-index:2;
  overflow:visible;
}
.xfo-hero-left{display:flex;flex-direction:column;gap:2px;max-width:460px;padding-top:8px}

/* ── Compact hero form card ── */
.xfo-hero-form-card{
  background:#fff;
  border-radius:4px;
  padding:12px 14px;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.xfo-hero-form-fine{
  font-size:10px;line-height:1.4;color:var(--gray);
  margin-top:6px;
}

/* ── Sal, pointing at the belt ── */
.xfo-hero-sal-wrap{
  display:flex;align-items:flex-start;justify-content:center;
}
.xfo-hero-sal-img{width:100%;max-width:620px;height:auto;display:block}

/* ============================================================
   MISSION BRIEFING (rules card) — the signature element, now
   reused for Event / Prize / Rules, all three stacked. Framed
   like a briefing dossier: stamped corner tag, dashed seal
   border. Alternating background keeps three stacked navy
   sections from blurring into one.
============================================================ */
.xfo-briefing-section{background:var(--navy);padding:80px 0}
.xfo-briefing-section.alt{background:var(--navy-mid)}
.xfo-briefing-head{text-align:center;max-width:600px;margin:0 auto 40px}
.xfo-briefing-eyebrow{
  font-family:var(--semi);font-weight:700;font-size:11px;
  letter-spacing:3px;text-transform:uppercase;color:var(--orange);
  margin-bottom:14px;
}
.xfo-briefing-hed{
  font-family:var(--impact);font-size:clamp(30px,4vw,46px);
  color:var(--white);line-height:1;letter-spacing:-.3px;
}
.xfo-briefing-card{
  max-width:640px;margin:0 auto;
  background:var(--navy-mid);
  border:1px dashed rgba(232,100,12,.4);
  position:relative;
  padding:44px 40px;
}
.xfo-briefing-section.alt .xfo-briefing-card{background:var(--navy)}
.xfo-briefing-stamp{
  position:absolute;top:-14px;right:32px;
  background:var(--orange);color:#fff;
  font-family:var(--semi);font-weight:700;font-size:10px;
  letter-spacing:2px;text-transform:uppercase;
  padding:6px 14px;
  transform:rotate(2deg);
}
.xfo-briefing-item{
  display:flex;gap:20px;
  padding:18px 0;
  border-top:1px solid rgba(255,255,255,.08);
}
.xfo-briefing-item:first-child{border-top:none;padding-top:0}
.xfo-briefing-num{
  font-family:var(--semi);font-weight:700;font-size:11px;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--orange);
  flex-shrink:0;padding-top:3px;
  min-width:68px;
}
.xfo-briefing-text{font-size:15px;line-height:1.7;color:var(--gray)}
.xfo-briefing-text strong{color:var(--white)}
.xfo-briefing-text a{color:var(--orange);text-decoration:underline}
.xfo-briefing-text a:hover{color:var(--orange-lt)}

/* ============================================================
   BACK-TO-TOP CTA BAND
============================================================ */
.xfo-cta-band{background:var(--orange);padding:56px 0}
.xfo-cta-band-hed{
  font-family:var(--impact);font-size:clamp(26px,3.5vw,38px);
  color:#fff;margin-bottom:22px;letter-spacing:.2px;
}
.xfo-cta-band .btn-primary{background:#fff;color:var(--orange)}
.xfo-cta-band .btn-primary:hover{background:var(--off)}

/* The Brevo form box, styled for the white hero card —
.xfo-giveaway-form{max-width:100%}
.xfo-giveaway-form #sib-form-container{background:transparent}
.xfo-giveaway-form #sib-container{
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  max-width:100% !important;
  padding:0 !important;
  text-align:left !important;
  font-family:var(--body) !important;
}
.xfo-giveaway-form .sib-form{background:transparent !important}
.xfo-giveaway-form .form__entry{margin-bottom:6px}
.xfo-giveaway-form .entry__label{
  font-family:var(--semi) !important;font-weight:700 !important;
  font-size:9px !important;letter-spacing:1.5px !important;
  text-transform:uppercase !important;color:var(--navy) !important;
  margin-bottom:4px !important;display:block;
}
.xfo-giveaway-form input.input,
.xfo-giveaway-form select.input{
  background:var(--off) !important;
  border:1.5px solid var(--gray-lt) !important;
  border-radius:2px !important;
  color:var(--text) !important;
  font-family:var(--body) !important;font-size:13px !important;
  padding:9px 12px !important;width:100% !important;outline:none !important;
}
.xfo-giveaway-form input.input::placeholder{color:var(--gray) !important}
.xfo-giveaway-form .entry__specification{display:none !important}
.xfo-giveaway-form .sib-sms-input-wrapper{display:flex;gap:6px}

/* CONFIRMED via DevTools element picker — this is the real structure
   Brevo's main.js builds at runtime:
     .sib-sms-select (flex row, whole widget)
       .sib-sms-select__title (flag icon + "United States" text) — hide this
       .sib-sms-select__number-input (the real phone input) — must stay visible
   The earlier .sib-sms-select rule hid the parent, taking the real
   input down with it. Targeting only __title fixes that. */
.xfo-giveaway-form .sib-sms-select__title{display:none !important}
.xfo-giveaway-form .sib-sms-select__number-input{flex:1 !important;width:100% !important}
.sib-sms-select__list{display:none !important}

.xfo-giveaway-form .sib-form-block{padding:5px 0 !important}
.xfo-giveaway-form .sib-form-block__button{
  background:var(--orange) !important;color:#fff !important;
  font-family:var(--semi) !important;font-weight:700 !important;
  font-size:12px !important;letter-spacing:1.2px !important;
  text-transform:uppercase !important;border-radius:2px !important;
  border:none !important;width:100%;padding:11px 20px !important;
  cursor:pointer;transition:background .2s,transform .15s;
}
.xfo-giveaway-form .sib-form-block__button:hover{
  background:var(--orange-lt) !important;transform:translateY(-1px);
}
.xfo-giveaway-form .entry__error{font-size:11px !important}

/* ============================================================
   RESPONSIVE
============================================================ */
@media(max-width:960px){
  .xfo-hero-inner{grid-template-columns:1fr;padding-bottom:40px}
  .xfo-hero-left{max-width:400px;margin:0 auto}
  .xfo-hero-sal-wrap{order:2;max-width:260px;margin:24px auto 0}
}
@media(max-width:600px){
  .xfo-hero{padding-top:40px}
  .xfo-hero-hed{font-size:clamp(32px,9vw,48px)}
  .xfo-hero-left{max-width:100%}
  .xfo-briefing-card{padding:32px 24px}
  .xfo-briefing-section{padding:56px 0}
  .xfo-briefing-item{flex-direction:column;gap:4px}
  .xfo-cta-band{padding:40px 0}
}