/* ForecastsPro landing — the home page's own styles.
 *
 * Loaded after site.css and seats.css on / only (site.css keeps its size budget). Tokens only,
 * no inline styles (the CSP).
 */

/* The hero (owner, 31 October 2026). Wider than 640 px: the real dashboard capture with the
   phone capture beside it, as released on 25 October 2026 (site.css). Phones: the phone
   version of the owner's illustration of the app with demo data, full width inside the
   gutter, with no pill on it (the caption says "Demo data"). Each <picture> swaps in a 1x1
   placeholder on the screen that hides it, so a visitor downloads only their own hero. The
   caption names the picture shown: its two halves take turns. */
.stage-mobile, .caption-phone { display: none; }
.caption-wide { display: contents; }
@media (max-width: 640px) {
  .stage { margin-top: 32px; }
  .stage .device-browser, .device-phone, .caption-wide { display: none; }
  .stage-devices { padding-bottom: 0; }
  .stage-mobile { display: block; }
  .caption-phone { display: contents; }
  .stage-mobile img {
    width: 100%;
    height: auto;
    -webkit-mask-image: var(--lp-fade-x), var(--lp-fade-hero);
    -webkit-mask-composite: source-in;
    mask-image: var(--lp-fade-x), var(--lp-fade-hero);
    mask-composite: intersect;
  }
  /* The illustration is darker than the page except at its bottom: the page darkens softly
     towards it (the blue glow outlined its faded edges). No edge: it reaches zero inside its
     own box (closest-side). */
  .stage::before {
    top: -10%;
    width: min(1500px, 130vw);
    height: 96%;
    background: radial-gradient(closest-side at 50% 50%, rgba(9, 10, 14, 0.8), rgba(9, 10, 14, 0.55) 55%,
                rgba(9, 10, 14, 0.22) 80%, rgba(9, 10, 14, 0));
  }
}

/* The closing call to action, "Paper first. Stay in control." (owner, 24 October 2026: "one of
   the new designs near the footer next to a section"). The network illustration sits beside
   the copy from 1000 px (narrower, the copy's column would stack its two buttons) and above it
   on narrower screens, phones included since 30 October 2026 (their hero shows the app
   illustration now, not this picture). It has no box: its see-through WebP fades out at the
   sides and the bottom. Lazy: it loads only when it is near. */
.final-cta { display: grid; grid-template-columns: minmax(0, 1fr); }
.final-art { grid-row: 1; width: min(320px, 100%); margin: -8px auto 4px; }
.final-art img {
  width: 100%;
  height: auto;
  -webkit-mask-image: var(--lp-fade-x), linear-gradient(rgba(0, 0, 0, 0), #000 4%, #000 85%, rgba(0, 0, 0, 0));
  -webkit-mask-composite: source-in;
  mask-image: var(--lp-fade-x), linear-gradient(rgba(0, 0, 0, 0), #000 4%, #000 85%, rgba(0, 0, 0, 0));
  mask-composite: intersect;
}
@media (min-width: 641px) {
  .final-art { width: min(440px, 100%); }
}
/* Side by side: the copy is left-aligned in the first column, the picture centred on it in the
   second; a soft glow sits behind the picture. */
@media (min-width: 1000px) {
  .final-cta {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(24px, 4vw, 56px);
    text-align: left;
    background:
      radial-gradient(ellipse 42% 62% at 76% 52%, rgba(88, 101, 242, 0.18), transparent 70%),
      radial-gradient(ellipse 70% 90% at 50% 0%, rgba(88, 101, 242, 0.32), transparent 70%),
      var(--bg-base);
  }
  .final-copy { grid-column: 1; grid-row: 1; }
  .final-cta .brand-mark { margin: 0 0 20px; }
  .final-cta .section-lead { margin-left: 0; margin-right: 0; }
  .final-cta .cta-row { justify-content: flex-start; }
  /* The drawing sits a little above the middle of its picture (the bottom fade needs room):
     nudged down so it centres on the copy. */
  .final-art { grid-column: 2; width: 100%; margin: 0; transform: translateY(5%); }
}