/* OfertaAL page — overrides the AY Studio umbrella dark theme with the
   app's own light "Red / Cart-Tag" palette (mobile_app/lib/src/theme/
   app_theme.dart: primary #D71E1E, gradient #FF6A52→#E4231C→#B9121A,
   gold #F6B93B), plus a mascot hero and phone-mockup screenshots. Loads
   after the shared styles.css so these variables win — scoped to this
   page only; privacy.html/support.html keep the studio's dark theme. */
:root {
  --bg: #fff8f6;
  --bg-elev: #ffffff;
  --bg-card: #ffffff;
  --border: #f0dad3;
  --text: #1b1310;
  --muted: #6b5f5c;
  --teal: #d71e1e;
  --teal-dim: #b9121a;
  --orange: #b9121a;
  --grad: linear-gradient(135deg, #ff6a52 0%, #e4231c 55%, #b9121a 100%);
}

body { background: var(--bg); }

.site-header { background: rgba(255, 248, 246, 0.86); }
.monogram { color: #fff8f6; }
.btn-primary { color: #fff; }

/* ---- hero (mascot banner, full-bleed with a fade for text contrast) --- */
.hero-app { position: relative; padding: 0; overflow: hidden; min-height: 620px; display: flex; align-items: center; }
.hero-bg {
  position: absolute; inset: 0;
  background-image: url("images/hero-mascot.jpg");
  background-size: cover; background-position: right center;
}
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(
    90deg,
    var(--bg) 0%, var(--bg) 34%,
    rgba(255, 248, 246, 0.82) 52%,
    rgba(255, 248, 246, 0.15) 74%
  );
}
/* Keep `.wrap`'s normal centered 960px container (same as the header/
   nav above it) - a first attempt instead pinned/capped the WHOLE wrap
   to the raw viewport edge, which worked at ordinary desktop widths but
   left a huge dead gap on a wide monitor (found live: the text block
   sat nowhere near the header's own left edge). Cap the *text*, not the
   container, so it still starts exactly under "AY Studio" at any width.
   `width: 100%` is a separate fix: `.hero-app` is a flex container (for
   vertical centering), and a flex ITEM without an explicit width sizes
   to its content's unwrapped max-content width instead of 100% of the
   line - without this, dropping max-width on mobile (below) let it blow
   past the viewport (found live: headline and header nav both ran off
   the right edge). */
.hero-app .wrap { position: relative; z-index: 1; width: 100%; padding: 88px 24px; }
.hero-app .eyebrow, .hero-app h1, .hero-app .lede { max-width: 460px; }

/* ---- phone-mockup screenshot showcase ---- */
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; text-align: center; }
.shot .frame {
  max-width: 210px; margin: 0 auto 20px; border-radius: 26px; overflow: hidden;
  border: 6px solid #1b1310; box-shadow: 0 20px 44px -14px rgba(183, 20, 20, 0.28);
}
.shot .frame img { display: block; width: 100%; }
.shot h3 { margin: 0 0 6px; font-size: 19px; }
.shot p { color: var(--muted); margin: 0; font-size: 14px; }

@media (max-width: 640px) {
  .hero-app { min-height: 600px; }
  /* The mascot sits in the right third of the source image - "center"
     cropping on a narrow viewport loses him entirely (found live: just
     sky and rooftops); pushing the crop to catch him instead put his
     head right behind the headline, killing legibility (found live).
     Fix: fade to solid background well ABOVE where the text starts, so
     the mascot only occupies a clear image band up top. */
  .hero-bg { background-position: 100% 22%; }
  .hero-bg::after { background: linear-gradient(180deg, rgba(255,248,246,0) 0%, rgba(255,248,246,0.55) 40%, var(--bg) 54%); }
  .hero-app .wrap { padding: 300px 24px 40px; }
}