/* OverheadIQ for You — Personal Lines landing page
   Variant A (Calculator first). Design tokens from the LtL / OverheadIQ design system.
   White-label note: every brand token below is overridable at runtime by config.js. */

:root{
  /* Surfaces */
  --oiq-bg:#060A16;
  --oiq-surface:#101828;
  --oiq-glass:rgba(255,255,255,0.04);
  /* Gold */
  --oiq-gold:#D4AF37;
  --oiq-gold-light:#F0C840;
  --oiq-gold-grad:linear-gradient(135deg,#D4AF37,#F0C840);
  --oiq-on-gold:#0A0E1A;
  /* Silver / chrome */
  --oiq-text:#FFFFFF;
  --oiq-text-2:#C8D4E4;
  --oiq-muted:#8B95A1;
  /* Borders */
  --oiq-border-gold:rgba(212,175,55,0.3);
  --oiq-border-gold-soft:rgba(212,175,55,0.18);
  --oiq-border-nav:rgba(212,175,55,0.22);
  --oiq-border-silver:rgba(200,212,228,0.2);
  --oiq-border-input:rgba(200,212,228,0.25);
  --oiq-border-ghost:rgba(200,212,228,0.35);
  /* Shadows */
  --oiq-shadow-card:0 4px 28px rgba(0,0,0,0.55);
  --oiq-glow:0 0 28px rgba(212,175,55,0.45);
  --oiq-glow-strong:0 0 48px rgba(212,175,55,0.75);
  /* Depth overlays */
  --oiq-depth-gold:rgba(212,175,55,0.08);
  --oiq-depth-blue:rgba(38,83,149,0.15);
  /* Type */
  --oiq-display:"Barlow Condensed","Arial Narrow",sans-serif;
  --oiq-body:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  background:var(--oiq-bg);
  font-family:var(--oiq-body);
  color:var(--oiq-text);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--oiq-text-2);text-decoration:none}
a:hover{color:var(--oiq-text)}
img{max-width:100%}
input::placeholder{color:var(--oiq-muted)}

@keyframes oiq-shimmer{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* ---------- Page shell ---------- */
.oiq-page{
  min-height:100vh;
  background:
    radial-gradient(1200px 600px at 50% -10%, var(--oiq-depth-gold), transparent 60%),
    radial-gradient(900px 500px at 85% 20%, var(--oiq-depth-blue), transparent 60%),
    var(--oiq-bg);
}
.oiq-wrap{max-width:1200px;margin:0 auto;padding-left:24px;padding-right:24px}
.oiq-wrap--narrow{max-width:820px;margin:0 auto;padding-left:24px;padding-right:24px}

/* ---------- Buttons ---------- */
.oiq-btn{
  display:inline-block;
  white-space:nowrap;
  text-align:center;
  background:var(--oiq-gold-grad);
  color:var(--oiq-on-gold);
  font-family:var(--oiq-body);
  font-weight:700;
  font-size:14px;
  line-height:1.2;
  min-height:44px;
  padding:13px 20px;
  border:1px solid transparent;
  border-radius:8px;
  box-shadow:var(--oiq-glow);
  cursor:pointer;
  transition:transform 180ms ease-out, box-shadow 180ms ease-out;
}
.oiq-btn:hover,.oiq-btn:focus-visible{
  color:var(--oiq-on-gold);
  transform:translateY(-2px);
  box-shadow:var(--oiq-glow-strong);
}
.oiq-btn:focus-visible{outline:2px solid var(--oiq-gold);outline-offset:3px}
.oiq-btn--block{display:block;width:100%;font-size:15px;padding:14px 20px;margin-top:8px}
.oiq-btn--lg{font-size:16px;padding:15px 32px}
.oiq-btn--ghost{
  background:transparent;
  color:var(--oiq-text-2);
  border:1px solid var(--oiq-border-ghost);
  font-weight:600;
  box-shadow:none;
}
.oiq-btn--ghost:hover,.oiq-btn--ghost:focus-visible{color:var(--oiq-text);box-shadow:none}

/* ---------- Nav ---------- */
.oiq-nav{
  display:flex;justify-content:space-between;align-items:center;
  max-width:1200px;margin:0 auto;padding:18px 24px;
  border-bottom:2px solid var(--oiq-border-nav);
  gap:18px;flex-wrap:wrap;
}
.oiq-nav__brand{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.oiq-wordmark{
  font-family:var(--oiq-display);font-weight:900;font-size:26px;
  letter-spacing:0.02em;white-space:nowrap;
}
.oiq-wordmark em{font-style:normal;color:var(--oiq-gold)}
.oiq-tagline{
  font-size:11px;color:var(--oiq-muted);
  letter-spacing:0.08em;text-transform:uppercase;
}

/* ---------- Hero ---------- */
.oiq-hero{
  padding-top:64px;padding-bottom:48px;
  display:grid;grid-template-columns:1.1fr 0.9fr;gap:48px;align-items:center;
}
.oiq-hero__copy{display:flex;flex-direction:column;gap:20px}
.oiq-pill{
  border:1px solid var(--oiq-border-gold);border-radius:999px;
  padding:5px 14px;font-size:12px;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--oiq-text-2);align-self:start;
}
.oiq-h1{
  font-family:var(--oiq-display);font-weight:800;
  font-size:clamp(40px,4.5vw,60px);line-height:1.1;margin:0;letter-spacing:-0.01em;
}
.oiq-lede{
  font-size:18px;line-height:1.6;color:var(--oiq-text-2);
  margin:0;max-width:480px;text-wrap:pretty;
}
.oiq-fineprint{font-size:14px;color:var(--oiq-muted);margin:0}

/* ---------- Calculator card ---------- */
.oiq-calc{
  background:var(--oiq-surface);
  border:1px solid var(--oiq-border-gold);
  border-radius:12px;padding:28px;
  box-shadow:var(--oiq-shadow-card);
  display:flex;flex-direction:column;gap:16px;
}
.oiq-calc__title{font-family:var(--oiq-display);font-weight:700;font-size:24px;margin:0}
.oiq-field{display:flex;flex-direction:column;gap:6px}
.oiq-label{font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--oiq-muted)}
.oiq-input{
  background:var(--oiq-bg);
  border:1px solid var(--oiq-border-input);
  border-radius:8px;padding:12px 14px;
  color:var(--oiq-text);font-size:16px;font-family:var(--oiq-body);
  width:100%;
}
.oiq-input:focus{outline:2px solid var(--oiq-gold);outline-offset:0}
.oiq-calc__hint{font-size:13px;color:var(--oiq-muted);margin:0}
.oiq-result{
  border-top:1px solid var(--oiq-border-gold-soft);
  padding-top:16px;display:flex;flex-direction:column;gap:8px;
}
.oiq-result__label{font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--oiq-muted)}
.oiq-result__figure{
  font-family:var(--oiq-display);font-weight:800;font-size:38px;line-height:1;
  background-image:linear-gradient(90deg,#D4AF37,#F0C840,#C8D4E4,#D4AF37);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:oiq-shimmer 5s linear infinite;
}
.oiq-result__annual{font-size:14px;color:var(--oiq-text-2)}

/* ---------- Steps ---------- */
.oiq-steps{padding-top:32px;padding-bottom:56px;display:flex;flex-direction:column;gap:20px}
.oiq-h2{font-family:var(--oiq-display);font-weight:700;font-size:32px;margin:0;text-align:center}
.oiq-sub{font-size:15px;color:var(--oiq-text-2);margin:0;text-align:center}
.oiq-chooser{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.oiq-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.oiq-card-glass{
  background:var(--oiq-glass);
  border:1px solid var(--oiq-border-gold);
  border-radius:12px;padding:24px;
  display:flex;flex-direction:column;gap:10px;
}
.oiq-step__num{font-family:var(--oiq-display);font-weight:800;font-size:30px;color:var(--oiq-gold)}
.oiq-step__title{font-family:var(--oiq-display);font-weight:700;font-size:21px;margin:0}
.oiq-step__body{font-size:14px;line-height:1.6;color:var(--oiq-text-2);margin:0}

/* ---------- Before / after ---------- */
.oiq-ba-section{padding-bottom:56px}
.oiq-ba{
  background:var(--oiq-surface);border-radius:12px;padding:32px;
  box-shadow:var(--oiq-shadow-card);
  display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;
}
.oiq-ba__copy{display:flex;flex-direction:column;gap:12px}
.oiq-ba__h2{font-family:var(--oiq-display);font-weight:700;font-size:30px;margin:0}
.oiq-ba__body{font-size:15px;line-height:1.6;color:var(--oiq-text-2);margin:0}
.oiq-ba__note{font-size:12px;color:var(--oiq-muted);margin:0}
.oiq-ba__tiles{display:flex;gap:16px}
.oiq-tile{
  flex:1;border:1px solid var(--oiq-border-silver);border-radius:12px;padding:20px;
  display:flex;flex-direction:column;gap:6px;text-align:center;
}
.oiq-tile--after{border-color:rgba(212,175,55,0.5);box-shadow:0 0 28px rgba(212,175,55,0.25)}
.oiq-tile__label{font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--oiq-muted)}
.oiq-tile--after .oiq-tile__label{color:var(--oiq-gold)}
.oiq-tile__figure{font-family:var(--oiq-display);font-weight:800;font-size:36px;color:var(--oiq-text-2)}
.oiq-tile--after .oiq-tile__figure{color:var(--oiq-gold-light)}
.oiq-tile__figure small{font-size:18px}
.oiq-tile__foot{font-size:13px;color:var(--oiq-muted)}
.oiq-tile--after .oiq-tile__foot{color:var(--oiq-text-2)}

/* ---------- FAQ ---------- */
.oiq-faq{padding-bottom:64px;display:flex;flex-direction:column;gap:16px}
.oiq-faq__item{
  background:var(--oiq-surface);
  border:1px solid var(--oiq-border-gold-soft);
  border-radius:12px;padding:20px 24px;
  display:flex;flex-direction:column;gap:6px;
}
.oiq-faq__q{font-family:var(--oiq-display);font-weight:700;font-size:20px;margin:0}
.oiq-faq__a{font-size:14px;line-height:1.6;color:var(--oiq-text-2);margin:0}

/* ---------- Testimonial + final CTA ---------- */
.oiq-close{padding-bottom:72px;display:flex;flex-direction:column;gap:24px;align-items:center}
.oiq-quote{max-width:640px;text-align:center;display:flex;flex-direction:column;gap:10px}
.oiq-quote__text{font-size:17px;line-height:1.6;color:var(--oiq-text-2);margin:0;font-style:italic}
.oiq-quote__by{font-size:13px;color:var(--oiq-muted)}
.oiq-panel{
  background:var(--oiq-glass);
  border:1px solid var(--oiq-border-gold);
  border-radius:16px;padding:40px 48px;text-align:center;
  display:flex;flex-direction:column;gap:16px;align-items:center;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.oiq-panel__h2{font-family:var(--oiq-display);font-weight:800;font-size:38px;margin:0;line-height:1.1}
.oiq-panel__sub{font-size:15px;color:var(--oiq-text-2);margin:0}

/* ---------- Footer ---------- */
.oiq-footer{
  border-top:1px solid var(--oiq-border-gold-soft);
  padding:24px;display:flex;justify-content:center;align-items:center;
  gap:12px;flex-wrap:wrap;text-align:center;
}
.oiq-footer__logo{height:34px;width:auto;border-radius:6px}
.oiq-footer__text{font-size:13px;color:var(--oiq-muted)}
.oiq-footer__text a{color:var(--oiq-muted);text-decoration:underline}
.oiq-footer__text a:hover{color:var(--oiq-text-2)}

/* ---------- Utilities ---------- */
[hidden]{display:none !important}
.oiq-sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .oiq-hero{grid-template-columns:1fr;gap:32px;padding-top:44px}
  .oiq-grid-3{grid-template-columns:1fr}
  .oiq-ba{grid-template-columns:1fr;padding:24px}
  .oiq-panel{padding:32px 24px}
  .oiq-panel__h2{font-size:32px}
  .oiq-nav{gap:12px}
  .oiq-nav__brand{gap:6px}
}
@media (max-width:520px){
  .oiq-ba__tiles{flex-direction:column}
  .oiq-tagline{display:none}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
  .oiq-btn:hover,.oiq-btn:focus-visible{transform:none}
  .oiq-result__figure{
    animation:none;
    background-image:none;
    -webkit-text-fill-color:var(--oiq-gold-light);
    color:var(--oiq-gold-light);
  }
}

/* ---------- QR codes ----------
   The GPR codes are supplied on a white field (a QR needs a light background
   to scan reliably), so they sit on their own light card rather than being
   dropped straight onto the navy. */
.oiq-qr{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  background:#FFFFFF;border-radius:12px;padding:12px;
  border:1px solid var(--oiq-border-gold);
  box-shadow:var(--oiq-shadow-card);
  text-decoration:none;
  transition:transform 180ms ease-out, box-shadow 180ms ease-out;
}
.oiq-qr:hover,.oiq-qr:focus-visible{transform:translateY(-2px);box-shadow:var(--oiq-glow)}
.oiq-qr:focus-visible{outline:2px solid var(--oiq-gold);outline-offset:3px}
.oiq-qr img{display:block;width:100%;height:auto;max-width:240px}
.oiq-qr__caption{
  font-size:12px;color:#3B4658;letter-spacing:0.04em;
  text-transform:uppercase;text-align:center;
}
.oiq-qr--sm img{max-width:150px}

/* Path CTA: the button (and, on the self-service path, its QR) side by side,
   stacking on narrow screens. Each path ends in its own button — the portal on
   the self-service side, the calendar on the "Talk to a human" side. */
.oiq-portal-cta,.oiq-book-cta{
  display:flex;justify-content:center;align-items:center;
  gap:20px;padding-top:4px;flex-wrap:wrap;
}

/* ---------- Seasonal NFL cross-sell ---------- */
.oiq-nfl-section{padding-bottom:72px}
.oiq-nfl{
  background:var(--oiq-surface);
  border:1px solid var(--oiq-border-gold-soft);
  border-radius:16px;padding:32px;
  box-shadow:var(--oiq-shadow-card);
  display:flex;align-items:center;justify-content:space-between;
  gap:32px;flex-wrap:wrap;
}
.oiq-nfl__copy{display:flex;flex-direction:column;gap:12px;align-items:flex-start;flex:1 1 320px}
.oiq-nfl__eyebrow{
  font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--oiq-gold);
}
.oiq-nfl__h2{font-family:var(--oiq-display);font-weight:700;font-size:30px;margin:0;line-height:1.15}
.oiq-nfl__body{font-size:16px;line-height:1.6;color:var(--oiq-text-2);margin:0;max-width:440px}
.oiq-nfl .oiq-qr{flex:0 0 auto}

@media (max-width:860px){
  .oiq-nfl{flex-direction:column;align-items:center;text-align:center;padding:24px}
  .oiq-nfl__copy{align-items:center}
  .oiq-nfl__h2{font-size:26px}
}

/* Divider between the two booking routes in the final panel. Neither is
   subordinate — one books the intro call, the other starts the savings
   straight away — so both keep the primary button treatment. */
.oiq-or{
  font-size:12px;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--oiq-muted);
}
.oiq-panel .oiq-btn{max-width:100%;white-space:normal}

/* ---------- Lead capture modal (2026-09-03) ----------
   One short form before a visitor leaves for the vendor, so the partner whose
   tag brought them gets credited. Same tokens as the rest of the page. */
.oiq-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px}
.oiq-modal[hidden]{display:none}
.oiq-modal__backdrop{position:absolute;inset:0;background:rgba(6,10,22,0.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.oiq-modal__dialog{
  position:relative;width:100%;max-width:440px;max-height:calc(100vh - 32px);overflow:auto;
  background:var(--oiq-surface);border:1px solid var(--oiq-border-gold);border-radius:16px;
  padding:32px 28px 24px;box-shadow:var(--oiq-glow);
}
.oiq-modal__close{
  position:absolute;top:10px;right:12px;background:none;border:0;color:var(--oiq-muted);
  font-size:26px;line-height:1;cursor:pointer;padding:6px 10px;border-radius:8px;
}
.oiq-modal__close:hover,.oiq-modal__close:focus-visible{color:var(--oiq-text);outline:2px solid var(--oiq-gold);outline-offset:0}
.oiq-modal__h2{font-family:var(--oiq-display);font-weight:800;font-size:30px;margin:0 0 8px;line-height:1.1}
.oiq-modal__sub{font-size:14px;color:var(--oiq-text-2);margin:0 0 20px}
.oiq-modal__form{display:flex;flex-direction:column;gap:14px}
.oiq-modal__optional{text-transform:none;letter-spacing:0;color:var(--oiq-muted)}
.oiq-modal__hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.oiq-modal__error{font-size:13px;color:#F4B4B4;margin:0}
.oiq-modal__fineprint{font-size:12px;color:var(--oiq-muted);margin:4px 0 0;text-align:center}
.oiq-input[aria-invalid="true"]{border-color:#F4B4B4}
body.oiq-modal-open{overflow:hidden}

/* The wordmark wraps on phones: the page names are longer now. */
@media (max-width:560px){
  .oiq-wordmark{white-space:normal;font-size:22px;line-height:1.1}
}