/* ============ Wildfire Incident Commander — site styles ============ */
/* The same light layout as idseason.spaikz.com (white page, photo collage with floating cards, stats strip, numbered
   steps, one dark photo band, plan cards, FAQ, gradient finish, navy footer), recoloured for the game: fire orange, ember red and amber on a light page. Shared by the
   landing page and the privacy / terms / support pages. */
:root {
  --bg: #ffffff; --bg2: #f5f6fc; --line: #e4e7f2;
  --navy: #0b0f1a; --text: #141a2e; --muted: #5b6380;
  --blue: #ff6a1a; --violet: #d9420f; --teal: #f59e0b; --gold: #d4af37;
  --grad: linear-gradient(105deg, #e8380d 0%, #ff7a1a 50%, #f5a623 100%);
  --btn: linear-gradient(115deg, #ff7a1a, #d9330c);
  --shadow: 0 1px 2px rgba(11,15,26,.06), 0 12px 32px rgba(11,15,26,.08);
  --maxw: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, .brand-name, .num { font-family: "Space Grotesk", Inter, sans-serif; letter-spacing: -.02em; color: var(--navy); }
a { color: inherit; }
img { max-width: 100%; display: block; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--navy); color: #fff; padding: 10px 16px; }
.skip-link:focus { left: 0; }
.eyebrow { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--violet); }
.eyebrow::before { content: ''; width: 22px; height: 3px; background: var(--grad); border-radius: 2px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; border-radius: 12px; font-weight: 700; text-decoration: none; font-size: 15.5px; transition: transform .15s, box-shadow .2s; }
.btn:hover { transform: translateY(-2px); }
.btn-p { background: var(--btn); color: #fff; box-shadow: 0 10px 24px rgba(217,51,12,.3); }
.btn-p:hover { box-shadow: 0 14px 30px rgba(217,51,12,.38); }
.btn-s { border: 1.5px solid #cdd3e6; color: var(--navy); background: #fff; }
.btn-s:hover { border-color: var(--violet); color: var(--violet); }

/* nav (also on the legal pages) */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 30; background: rgba(255,255,255,.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .25s, box-shadow .25s; }
.nav.scrolled { border-color: var(--line); box-shadow: 0 4px 18px rgba(11,15,26,.06); }
.nav-in { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; height: 68px; display: flex; align-items: center; gap: 22px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.brand-mark { width: 32px; height: 32px; border-radius: 9px; }
.brand-mark-sm { width: 24px; height: 24px; border-radius: 6px; }
.brand-name { font-weight: 700; font-size: 19px; }
.nav-links { display: flex; gap: 24px; align-items: center; font-size: 14.5px; font-weight: 500; }
.nav-links a { text-decoration: none; color: var(--muted); }
.nav-links a:hover { color: var(--violet); }
.nav-links a.btn-p { color: #fff; padding: 10px 18px; font-size: 14px; }
.nav-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: #fff; cursor: pointer; padding: 0; }
.nav-toggle span { width: 16px; height: 2px; background: var(--navy); border-radius: 2px; }
@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .nav-links { display: none; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: #fff; border-bottom: 1px solid var(--line); padding: 6px 22px 18px; box-shadow: 0 12px 24px rgba(11,15,26,.08); }
  .nav.open .nav-links { display: flex; }
  .nav-links a { padding: 12px 0; }
  .nav-links a.btn-p { margin-top: 8px; }
}

/* hero */
.hero { position: relative; overflow: hidden; padding: 130px 0 80px; background: radial-gradient(900px 500px at 85% 10%, rgba(255,106,26,.13), transparent 60%), radial-gradient(800px 500px at 10% 90%, rgba(245,166,35,.12), transparent 60%), linear-gradient(180deg, #fff6ee, #fff); }
.hero::before { content: ''; position: absolute; inset: 0; opacity: .5; background-image: linear-gradient(rgba(217,66,15,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(217,66,15,.05) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(180deg, #000, transparent 85%); -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); }
.hero .wrap { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 52px; align-items: center; }
.hero h1 { font-size: clamp(38px, 5.4vw, 64px); line-height: 1.05; margin: 18px 0; }
.hero h1 .h1-name { display: block; font-size: .6em; letter-spacing: -.015em; line-height: 1.1; margin-bottom: 12px; color: var(--navy); }
@media (max-width: 420px) { .brand-name { font-size: 16px; } }
.lead { font-size: clamp(17px, 1.6vw, 19.5px); color: #3d4562; max-width: 600px; margin: 0 0 30px; }
.ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.trust { display: flex; gap: 30px; flex-wrap: wrap; margin-top: 36px; color: var(--muted); font-size: 14px; }
.trust b { display: block; color: var(--navy); font: 700 28px "Space Grotesk", sans-serif; }
.collage { position: relative; height: 560px; }
.ph { position: absolute; border-radius: 24px; overflow: hidden; box-shadow: 0 24px 60px rgba(11,15,26,.24); border: 6px solid #fff; background: #ddd; }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph1 { width: 62%; aspect-ratio: 4 / 5; right: 0; top: 0; }
.ph2 { width: 44%; aspect-ratio: 4 / 5; left: 0; bottom: 0; }
.ph .tag { position: absolute; left: 12px; top: 12px; background: rgba(11,15,26,.72); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .04em; padding: 4px 10px; border-radius: 999px; }
.float { position: absolute; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; box-shadow: 0 18px 40px rgba(11,15,26,.16); font-size: 13.5px; color: var(--navy); animation: bob 6s ease-in-out infinite; }
.float small { color: var(--muted); display: block; font-size: 12px; }
.float b { font: 700 15px "Space Grotesk", sans-serif; }
.f1 { left: 4%; top: 6%; }
.f2 { right: -2%; bottom: 8%; animation-delay: -3s; }
.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; margin-top: 6px; background: #ffedd5; color: #c2410c; }
.pill.ok { background: #dcfce7; color: #15803d; }
.arrow { position: absolute; left: 38%; bottom: 30%; width: 70px; height: 40px; color: var(--violet); }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (max-width: 920px) { .hero .wrap { grid-template-columns: 1fr; } .collage { height: 470px; } }
@media (max-width: 520px) { .collage { height: 380px; } .f2 { display: none; } }

/* store badges (official artwork, unaltered). Google's PNG has padding built in, so it's drawn larger and pulled in */
.stores { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 22px; }
.store { display: inline-flex; position: relative; }
.store img { height: 46px; width: auto; }
.store.gp img { height: 68px; margin: -11px -10px; }
.soon-note { font-size: 13px; font-weight: 600; color: var(--muted); }
.stores.on-dark { justify-content: center; margin-top: 26px; }
.stores.on-dark .soon-note { color: #eef0ff; width: 100%; text-align: center; }
@media (max-width: 560px) { .stores .soon-note { width: 100%; } }

/* sections */
section { padding: 96px 0; }
.sec-alt { background: var(--bg2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
h2 { font-size: clamp(30px, 3.8vw, 46px); line-height: 1.1; margin: 14px 0 16px; }
.sub { color: var(--muted); font-size: 18px; max-width: 680px; }
.center { text-align: center; }
.center .sub { margin: 0 auto; }
.strip { padding: 34px 0; background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.strip .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.num { font-size: clamp(30px, 3.6vw, 42px); font-weight: 700; line-height: 1.2; }
.strip span { color: var(--muted); font-size: 14px; }
@media (max-width: 700px) { .strip .wrap { grid-template-columns: repeat(2, 1fr); } }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split .photo { border-radius: 26px; overflow: hidden; aspect-ratio: 4 / 5; box-shadow: 0 24px 60px rgba(11,15,26,.18); }
.split .photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } .split .photo { aspect-ratio: 16 / 10; } }
.pains { display: grid; gap: 14px; margin-top: 26px; }
.pain { display: flex; gap: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow); }
.pain .ic { flex: 0 0 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: #fff1e6; font-size: 19px; }
.pain b { display: block; font-family: "Space Grotesk", sans-serif; font-size: 16.5px; color: var(--navy); }
.pain span { color: var(--muted); font-size: 14.5px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 46px; text-align: left; }
.step { padding: 28px 24px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); position: relative; overflow: hidden; }
.step::after { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--grad); }
.step .n { font: 700 15px "Space Grotesk", sans-serif; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--btn); color: #fff; margin-bottom: 16px; }
.step h3 { margin: 0 0 8px; font-size: 21px; }
.step p { margin: 0; color: var(--muted); font-size: 15px; }
@media (max-width: 880px) { .steps { grid-template-columns: 1fr; } }

/* poster gallery */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 46px; }
.gallery figure { margin: 0; }
.gallery img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; box-shadow: 0 20px 44px rgba(11,15,26,.2); transition: transform .25s; }
.gallery figure:hover img { transform: translateY(-6px) rotate(-.6deg); }
.gallery figcaption { margin-top: 12px; text-align: left; }
.gallery figcaption b { display: block; font: 700 17px "Space Grotesk", sans-serif; color: var(--navy); }
.gallery figcaption span { color: var(--muted); font-size: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 30px; }
.chips span { font-size: 13.5px; color: var(--muted); border: 1px solid var(--line); background: #fff; padding: 6px 14px; border-radius: 999px; }
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(2, 1fr); } }

/* feature cards */
.feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 46px; text-align: left; }
.feat { border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); padding: 24px; }
.feat .ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: #fff1e6; font-size: 21px; }
.feat h3 { margin: 16px 0 6px; font-size: 20px; }
.feat p { margin: 0; color: var(--muted); font-size: 14.5px; }
@media (max-width: 960px) { .feats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .feats { grid-template-columns: 1fr; } }

/* photo band (the one dark section) */
.band { position: relative; padding: 130px 0; overflow: hidden; color: #fff; }
.band-bg { position: absolute; inset: 0; background: url("/shots/fight.webp") center 35%/cover; }
.band-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,8,4,.95), rgba(20,8,4,.62)); }
.band .wrap { position: relative; }
.band h2 { max-width: 720px; color: #fff; }
.band .eyebrow { color: #ffb547; }
.band .sub { color: #d5dbee; }
.band-points { display: grid; grid-template-columns: repeat(3, minmax(0, 260px)); gap: 18px; margin-top: 30px; }
.band-points div { border-left: 3px solid #ffb547; padding-left: 14px; color: #d5dbee; font-size: 15px; }
.band-points b { display: block; color: #fff; font: 700 17px "Space Grotesk", sans-serif; }
@media (max-width: 760px) { .band-points { grid-template-columns: 1fr; } }

/* pricing */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 46px auto 0; max-width: 900px; text-align: left; }
.plan { border-radius: 24px; padding: 30px 28px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); position: relative; }
.plan.pro { border: 2px solid var(--violet); box-shadow: 0 20px 50px rgba(217,66,15,.18); }
.plan.pro::before { content: 'Best value'; position: absolute; top: -13px; left: 26px; background: var(--btn); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px; }
.plan h3 { margin: 0; font-size: 22px; }
.plan .price { font: 700 34px "Space Grotesk", sans-serif; margin: 10px 0 4px; color: var(--navy); }
.plan .price small { font-size: 14px; color: var(--muted); font-weight: 500; }
.plan .save { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #dcfce7; color: #15803d; font-size: 12px; font-weight: 700; vertical-align: 4px; }
.plan ul { list-style: none; padding: 0; margin: 20px 0 26px; }
.plan li { padding: 7px 0 7px 30px; position: relative; font-size: 15px; color: #2a3150; }
.plan li::before { content: '✓'; position: absolute; left: 0; top: 8px; width: 20px; height: 20px; border-radius: 50%; background: #dcfce7; color: #15803d; font-size: 12px; display: grid; place-items: center; font-weight: 800; }
.plan .btn { width: 100%; }
.fine { margin: 18px auto 0; font-size: 13px; color: var(--muted); max-width: 720px; }
.fine a { color: var(--muted); }
@media (max-width: 760px) { .plans { grid-template-columns: 1fr; } }

/* faq */
.faq { max-width: 820px; margin: 40px auto 0; }
.faq details { border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; background: #fff; margin-bottom: 10px; }
.faq summary { cursor: pointer; font: 600 17.5px "Space Grotesk", sans-serif; list-style: none; display: flex; justify-content: space-between; gap: 16px; color: var(--navy); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--violet); font-size: 24px; line-height: 1; }
.faq details[open] summary::after { content: '–'; }
.faq p { color: var(--muted); margin: 12px 0 0; font-size: 15.5px; }

/* final call to action */
.final { position: relative; padding: 130px 0; text-align: center; overflow: hidden; color: #fff; }
.final-bg { position: absolute; inset: 0; background: url("/shots/fight.webp") center 60%/cover; }
.final-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(150,30,8,.93), rgba(217,66,15,.88) 55%, rgba(245,140,30,.85)); }
.final .wrap { position: relative; }
.final h2 { font-size: clamp(34px, 4.6vw, 56px); max-width: 860px; margin: 14px auto 18px; color: #fff; }
.final .eyebrow { color: #fff; }
.final .eyebrow::before { background: #fff; }
.final .btn-p { background: #fff; color: #c2410c; box-shadow: 0 14px 30px rgba(0,0,0,.18); }
.final .note { margin-top: 18px; color: #eef0ff; font-size: 14px; }

/* footer (also on the legal pages) */
.footer { background: var(--navy); padding: 34px 0; color: #a9b1cc; font-size: 13.5px; }
.footer-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; display: flex; gap: 14px 26px; flex-wrap: wrap; align-items: center; }
.footer-brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 600; }
.footer-tag { margin: 0 auto 0 0; }
.footer a { color: #d3d9ee; }
.footer-links { display: flex; flex-wrap: wrap; gap: 16px; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.copyright { max-width: var(--maxw); margin: 10px auto 0; padding: 0 22px; color: #7f88a8; font-size: 12.5px; }

/* legal + support pages */
.doc { max-width: 760px; margin: 0 auto; padding: 118px 22px 70px; }
.doc h1 { font-size: clamp(32px, 5vw, 46px); line-height: 1.1; margin: 0 0 8px; }
.doc .updated { color: var(--muted); margin: 0 0 30px; }
.doc h2 { font-size: 22px; margin: 36px 0 10px; }
.doc p, .doc li { color: #353c58; }
.doc a { color: #c2410c; }
.doc ul, .doc ol { padding-left: 22px; }
.doc li { margin: 6px 0; }
.doc .box { background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; padding: 18px 22px; margin: 18px 0; }
.doc .box p { margin: 0; }
.doc table { width: 100%; border-collapse: collapse; font-size: .93rem; margin: 14px 0; }
.doc th, .doc td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; color: #353c58; }
.doc th { color: var(--navy); font-weight: 600; }

/* phones */
@media (max-width: 560px) {
  .hero { padding: 100px 0 48px; }
  .ctas .btn { width: 100%; }
  .trust { gap: 20px; } .trust b { font-size: 24px; }
  section { padding: 64px 0; } .sub { font-size: 16.5px; }
  .plan { padding: 24px 20px; } .final { padding: 96px 0; } .band { padding: 90px 0; }
  .step { padding: 22px 18px; } .feat { padding: 20px; }
}
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .45s ease, transform .45s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } .float { animation: none; } }

/* phone screenshots: tall frames, not the poster gallery's 4:5 */
.gallery.phones img { aspect-ratio: 430 / 932; object-position: top; border-radius: 26px; border: 6px solid #15110e; }
.ph.phone { aspect-ratio: 430 / 932; border-color: #15110e; border-radius: 30px; }
.ph1.phone { width: 50%; right: 4%; top: 0; }
.ph2.phone { width: 40%; left: 2%; bottom: 0; }
.collage { height: 600px; }
@media (max-width: 920px) { .collage { height: 560px; } }
@media (max-width: 520px) { .collage { height: 470px; } }

/* the crew */
.crew { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; text-align: left; }
.crew figure { margin: 0; }
.crew img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 16px; box-shadow: var(--shadow); }
.crew figcaption { margin-top: 8px; }
.crew figcaption b { display: block; font: 700 15.5px "Space Grotesk", sans-serif; color: var(--navy); }
.crew figcaption span { color: var(--muted); font-size: 13px; }
.crew-label { margin: 34px 0 0; text-align: left; font: 700 14px Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--violet); }
@media (max-width: 860px) { .crew { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .crew { grid-template-columns: repeat(2, 1fr); } }
.free-card { max-width: 640px; margin: 40px auto 0; text-align: left; }