/* FindInvaders palette, sampled from the native app icon */
:root {
  --ink: #251f1b;
  --green: #e45722;
  --lime: #fff066;
  --cream: #fff8e9;
  --muted: #786d62;
}

.app-icon {
  width: 27px;
  height: 27px;
  border-radius: 7px;
  margin-right: 7px;
  vertical-align: -8px;
}

.brand > span:not(.pixel) { color: #df4c2d; }
.eyebrow { color: #c74420; }
.eyebrow i { background: #e95b23; }
.hero h1 em, h2 em { color: #dd4b28; }
.app-button { background: #df4e1e; }
.hero-rating { margin: 22px 0 0; color: #7d6755; font-size: 11px; font-weight: 700; }
.hero-rating span { color: #e69c20; letter-spacing: 1px; margin-right: 5px; }
.app-button { background: none; padding: 0; border-radius: 0; line-height: 0; }
.app-store-badge { display: block; height: 44px; width: auto; }
.final-link { display: inline-block; background: #df4e1e; border-radius: 7px; color: #fff; font-size: 14px; font-weight: 800; padding: 14px 20px; text-decoration: none; }
.final-link span { margin-left: 8px; }
.hero-visual { background: #ffe5a7; }
.ring { border-color: rgba(205, 87, 29, .28); }
.score-card .tiny { color: #df4e1e; }
.proof { background: #33251d; }
.proof p span, .dots, .community h2 em, .text-link { color: #fff06b; }
.text-link { border-bottom-color: #fff06b; }
.feature-map { background: #e55b2a; }
.feature-dark { background: #33251d; }
.feature-route { background: #f5b95a; }
@media (min-width: 761px) {
  .feature > div { position: relative; z-index: 1; max-width: 44%; }
  .feature-map img { width: 46%; right: 3%; }
  .feature-dark img { width: 44%; right: 3%; }
  .feature-route img { width: 46%; right: 3%; }
}
.reviews { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 25px 0 110px; }
.reviews-heading { grid-row: span 2; padding: 36px 30px 30px 0; }
.reviews-heading h2 { font-size: clamp(38px, 4.1vw, 56px); }
.review-link { margin-top: 28px; color: #df4e1e; border-color: #df4e1e; }
.rating-card { display: flex; align-items: center; gap: 28px; padding: 30px 35px; background: #33251d; color: #fff; border-radius: 12px; }
.rating-number { font-size: 82px; line-height: .9; letter-spacing: -6px; font-weight: 800; }
.rating-meta { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: #e8ded2; }
.rating-meta strong { font-size: 13px; color: #fff; }
.rating-meta span { color: #d5c3b0; }
.stars { color: #f3b52c; letter-spacing: 3px; font-size: 17px; line-height: 1; }
.review-grid { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.review-card { margin: 0; min-height: 205px; padding: 28px 30px; background: #fffdf7; border: 1px solid #f0e3ce; border-radius: 12px; }
.review-card blockquote { margin: 20px 0 24px; color: #43382f; font-size: 15px; line-height: 1.65; }
.review-card figcaption { display: flex; justify-content: space-between; color: #8a7a6a; font-size: 11px; }
.review-card figcaption strong { color: #362b24; }
.rating-note { grid-column: 1 / -1; margin: -3px 0 0; color: #938475; font-size: 10px; }
.collection-visual { background: #ffe7b8; }
.glow { background: #ffd46d; }
.collection-copy li b { color: #e45722; }
.community { background: #33251d; }
.community .eyebrow { color: #ffd881; }
.faq { display: grid; grid-template-columns: .78fr 1.22fr; gap: 80px; padding: 105px 0; }
.faq-intro h2 { font-size: clamp(38px, 4.2vw, 57px); }
.faq-intro > p:last-child { max-width: 300px; color: #786d62; font-size: 14px; line-height: 1.7; margin-top: 22px; }
.faq-list { border-top: 1px solid #e7d9c5; }
.faq details { border-bottom: 1px solid #e7d9c5; padding: 0; }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; color: #30251e; cursor: pointer; font-size: 15px; font-weight: 800; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary span { color: #df4e1e; font-size: 24px; font-weight: 400; transition: transform .2s ease; }
.faq details[open] summary span { transform: rotate(45deg); }
.faq details p { max-width: 590px; margin: -5px 35px 22px 0; color: #786d62; font-size: 13px; line-height: 1.7; }
.widget-banner { display: grid; grid-template-columns: 150px 1fr .8fr; gap: 30px; align-items: center; margin-top: 70px; min-height: 330px; padding: 28px 42px; background: #ffedbd; border: 1px solid #f2d68e; border-radius: 13px; overflow: hidden; }
.widget-banner .eyebrow { margin-bottom: 11px; }
.widget-banner h2 { font-size: clamp(30px, 3.3vw, 44px); }
.widget-phone { align-self: end; width: 144px; height: 276px; overflow: hidden; border: 5px solid #251f1b; border-radius: 24px; box-shadow: 0 16px 28px rgba(111, 65, 20, .22); }
.widget-phone img { display: block; width: 100%; }
.widget-copy { margin: 0; color: #6f5c4d; font-size: 14px; line-height: 1.7; }
.cta-mark { width: 64px; height: 64px; object-fit: cover; border-radius: 17px; display: block; margin: 0 auto 20px; }
.apple-credit { display: block; flex-basis: 100%; margin-top: 18px; color: #9a8b7b; font-size: 9px; line-height: 1.5; }
footer { flex-wrap: wrap; }
.mobile-cta { display: none; }

@media (max-width: 760px) {
  .app-icon { width: 24px; height: 24px; vertical-align: -7px; }
  .widget-banner { grid-template-columns: 92px 1fr; gap: 18px; min-height: 235px; margin-top: 48px; padding: 20px 25px; }
  .widget-phone { width: 89px; height: 192px; border-width: 4px; border-radius: 17px; }
  .widget-copy { grid-column: 1 / -1; }
  .reviews { grid-template-columns: 1fr; padding-bottom: 75px; }
  .reviews-heading { grid-row: auto; padding: 15px 0; }
  .rating-card { padding: 27px; }
  .rating-number { font-size: 70px; }
  .review-grid { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; gap: 30px; padding: 75px 0; }
  body { padding-bottom: 76px; }
  .mobile-cta { position: fixed; z-index: 20; right: 0; bottom: 0; left: 0; display: block; padding: 11px 17px; background: rgba(255, 248, 233, .94); border-top: 1px solid #e8d8bf; backdrop-filter: blur(12px); }
  .mobile-cta a { display: block; min-height: 48px; padding: 14px 20px; border-radius: 8px; background: #df4e1e; color: #fff; font-size: 14px; font-weight: 800; text-align: center; text-decoration: none; }
  .mobile-cta span { margin-left: 8px; }
}

/* ---------------------------------------------------------------
   Shared primitives added alongside the SEO pass
   --------------------------------------------------------------- */

/* <picture> must not introduce a box of its own: the layout rules below
   position the <img> itself, sometimes absolutely inside a .feature card. */
picture { display: contents; }

/* Every <img> now carries width/height attributes so the browser can
   reserve space (no layout shift); height:auto keeps them fluid. */
img { max-width: 100%; height: auto; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: #251f1b;
  color: #fff8e9;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

:where(a, summary, details):focus-visible {
  outline: 2px solid #df4e1e;
  outline-offset: 3px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------------------------------------------------------------
   "What is an Invader hunt?" — plain-language context for readers
   arriving from search, and the quick-facts table.
   --------------------------------------------------------------- */

.about { display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; align-items: start; padding: 95px 0 5px; }
.about h2 { font-size: clamp(36px, 4vw, 54px); }
.about-copy p:not(.eyebrow) { max-width: 560px; margin: 22px 0 0; color: #6f5c4d; font-size: 15px; line-height: 1.75; }
.about-copy b { color: #dd4b28; font-weight: 800; }

.facts { margin: 8px 0 0; display: grid; gap: 0; border-top: 1px solid #e7d9c5; }
.facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 22px; padding: 13px 0; border-bottom: 1px solid #e7d9c5; }
.facts dt { font: 500 11px 'DM Mono', monospace; letter-spacing: 1.1px; text-transform: uppercase; color: #a08d78; white-space: nowrap; }
.facts dd { margin: 0; text-align: right; color: #30251e; font-size: 13px; font-weight: 700; }

.footer-links { display: flex; align-items: center; gap: 20px; }
.footer-links a { color: var(--ink); font-weight: 700; text-decoration: none; }
.footer-links a:first-child { color: #8a7a6a; font-weight: 600; }

@media (max-width: 760px) {
  .about { grid-template-columns: 1fr; gap: 34px; padding: 62px 0 0; }
  .facts { margin-top: 0; }
  .footer-links { gap: 16px; }
}

/* ---------------------------------------------------------------
   Language switcher and suggestion banner
   --------------------------------------------------------------- */

.nav-right { display: flex; align-items: center; gap: 18px; }

.lang-switch { display: flex; align-items: center; gap: 2px; padding: 3px; background: #f5e9d2; border-radius: 8px; }
.lang-switch a {
  padding: 5px 9px;
  border-radius: 6px;
  color: #8a7a6a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-decoration: none;
}
.lang-switch a[aria-current] { background: #fffdf7; color: #251f1b; box-shadow: 0 1px 3px rgba(90, 60, 20, .14); }
.lang-switch a:not([aria-current]):hover { color: #251f1b; }

/* Fixed, so revealing the banner never shifts the page. The explicit
   [hidden] rule is required: the display below would otherwise beat the
   browser default for the hidden attribute. */
.lang-suggest {
  position: fixed;
  z-index: 30;
  right: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: min(430px, calc(100% - 40px));
  padding: 13px 13px 13px 18px;
  background: #fffdf7;
  border: 1px solid #eeddc2;
  border-radius: 12px;
  box-shadow: 0 14px 38px rgba(90, 55, 15, .18);
}
.lang-suggest[hidden] { display: none; }
.lang-suggest p { margin: 0; color: #4a3d33; font-size: 13px; line-height: 1.45; }
.lang-suggest > a {
  flex: none;
  padding: 9px 14px;
  border-radius: 7px;
  background: #df4e1e;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.lang-suggest-close {
  flex: none;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: #a08d78;
  font-family: inherit;
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}
.lang-suggest-close:hover { background: #f4e8d5; color: #4a3d33; }

@media (max-width: 760px) {
  .nav-right { gap: 11px; }
  .lang-switch { padding: 2px; }
  .lang-switch a { padding: 4px 7px; font-size: 10px; }
  /* Clears the sticky download bar, which is 76px of padding on <body>. */
  .lang-suggest { right: 12px; left: 12px; bottom: 86px; max-width: none; gap: 10px; padding: 11px 11px 11px 15px; }
  .lang-suggest p { font-size: 12px; }
  .lang-suggest > a { padding: 8px 12px; font-size: 11px; }
}

/* ---------------------------------------------------------------
   Cookie consent banner
   --------------------------------------------------------------- */

/* Full width along the bottom so it reads as a site-level notice rather than a
   toast. Fixed, so revealing it shifts nothing. The [hidden] rule is required:
   the display below would otherwise beat the browser default. */
.consent {
  position: fixed;
  z-index: 40;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  padding: 16px clamp(18px, 4vw, 44px);
  background: #33251d;
  color: #f1e6d7;
  box-shadow: 0 -10px 34px rgba(40, 22, 5, .22);
}
.consent[hidden] { display: none; }
.consent-copy { max-width: 720px; }
.consent-copy strong { display: block; margin-bottom: 4px; font-size: 13px; color: #fff; }
.consent-copy p { margin: 0; font-size: 12px; line-height: 1.6; color: #d5c6b4; }
.consent-copy a { color: #ffd881; }

/* CNIL expects refusing to be no harder than accepting: same size, same place,
   both plainly buttons. */
.consent-actions { display: flex; flex: none; gap: 10px; }
.consent-actions button {
  min-width: 104px;
  padding: 11px 18px;
  border: 1px solid #6d5847;
  border-radius: 8px;
  background: none;
  color: #f1e6d7;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.consent-actions button:hover { border-color: #a58a70; background: rgba(255, 255, 255, .05); }
.consent-actions .consent-accept { border-color: #df4e1e; background: #df4e1e; color: #fff; }
.consent-actions .consent-accept:hover { background: #ea5a29; border-color: #ea5a29; }

/* Reopen link in the footer, styled to match the anchors beside it. */
.consent-reopen {
  padding: 0;
  border: 0;
  background: none;
  color: #8a7a6a;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.consent-reopen:hover { color: var(--ink); }

/* The cookie banner owns the bottom of the screen until it is answered. */
:root[data-consent="pending"] .mobile-cta { display: none; }

@media (max-width: 760px) {
  .consent { flex-direction: column; align-items: stretch; gap: 13px; padding: 15px 17px calc(15px + env(safe-area-inset-bottom)); }
  .consent-copy p { font-size: 11.5px; }
  .consent-actions button { flex: 1; min-width: 0; padding: 13px 12px; }
}

/* ---------------------------------------------------------------
   Legal pages (privacy)
   --------------------------------------------------------------- */

.legal { max-width: 720px; padding: 30px 0 90px; }
.legal h1 { font-size: clamp(38px, 5vw, 58px); line-height: 1; letter-spacing: -2.5px; margin: 0 0 8px; font-weight: 800; }
.legal h2 { font-size: 19px; letter-spacing: -.4px; margin: 44px 0 0; font-weight: 800; }
.legal p, .legal li { color: #6f5c4d; font-size: 14px; line-height: 1.75; }
.legal p { margin: 14px 0 0; }
.legal-lede { font-size: 15px; }
.legal ul { margin: 12px 0 0; padding-left: 20px; }
.legal li { margin: 7px 0; }
.legal a { color: #df4e1e; }
.legal b, .legal strong { color: #30251e; }
.legal code { padding: 2px 6px; border-radius: 4px; background: #f3e7d3; color: #4a3d33; font: 500 12px 'DM Mono', monospace; }
.legal-updated { margin-top: 44px; padding-top: 18px; border-top: 1px solid #e7d9c5; color: #a08d78; font-size: 12px; }

.legal-dl { margin: 14px 0 0; border-top: 1px solid #e7d9c5; }
.legal-dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 11px 0; border-bottom: 1px solid #e7d9c5; }
.legal-dl dt { flex: none; font: 500 11px 'DM Mono', monospace; letter-spacing: 1.1px; text-transform: uppercase; color: #a08d78; }
.legal-dl dd { margin: 0; text-align: right; color: #30251e; font-size: 13px; font-weight: 700; }

/* Feature cards on narrow screens.
   The screenshots are 441x960, so at any usable width they are taller than the
   card and cover the copy. Above 761px the rule further up constrains the text
   to 44% and the image sits beside it; below that there was no such constraint
   and the image sat on top of the heading. Stack them instead: copy across the
   top, screenshot cropped along the bottom. */
@media (max-width: 760px) {
  .feature { min-height: 430px; }
  .feature > div { position: relative; z-index: 1; max-width: 100%; }
  .feature p { max-width: 100%; }
  /* Sized by height, not by a percentage width: these are 441x960, so a
     percentage width makes the height balloon as the card grows — at 760px the
     same rule produced a 707px image inside a 430px card. */
  .feature img,
  .feature-map img,
  .feature-dark img,
  .feature-route img {
    width: auto;
    height: 320px;
    right: 6%;
    left: auto;
    bottom: -90px;
    border-radius: 20px;
  }
}