/* Angler — 90 · closing CTA + footer.
   The page ends on still water: one full-bleed photograph of the shallows, one scrim,
   no parallax. What used to be here — evening sky gradient, two lake plates climbing
   past each other at +0.20/-0.28, the horizontal alpha mask that killed the duplicate
   bear, and the bottom fade that dissolved the near plate into the footer — is all
   gone. A shore climbing over the copy is motion; this section is meant to be the
   quietest thing on the page.
   Only `transparent` appears outside the token set, and only as an alpha stop. */

/* ---------------------------------------------------------------- the scene */

/* No overflow:hidden any more — that clipped the oversized parallax plates, and the
   only thing in here now is an inset:0 image that cannot overflow. */
.cta {
  position: relative;
  isolation: isolate;
  /* Tall again. It is not a band of water any more — it is the page's closing block,
     and it holds the last headline and the last download button. Cursor gives theirs
     roughly two thirds of the viewport with the copy centred in it. */
  height: clamp(560px, 74vh, 820px);
  display: grid;
  place-content: center;
  /* Ground under the image: the footer's colour, so the seam at the bottom of the
     section is a colour meeting itself, not an edge. */
  background: var(--lake-deep);
  color: var(--paper);
}

/* The photograph. object-fit: cover, so it is never stretched at any aspect; the
   width/height attributes only describe its intrinsic size for layout stability.
   object-position 52%/58% is a measured crop, not a default — see the scrim note. */
.cta__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 58%;
  /* saturate matches the house treatment on the hero plates. brightness only nips the
     surface glints — the raw image reaches 250+ in the reflections, and every point
     taken off the top here is a point the scrim above does not have to spend. */
  filter: saturate(0.88) brightness(0.94);
  pointer-events: none;
}

/* The scrim, in two parts on one pseudo-element. The radial well is back because the
   copy is back — it is what buys the headline its contrast without flattening the
   whole picture.
   1. A radial well under the copy column. Radii in px, not %, because the thing it has
      to cover is in px too: a percentage ellipse is too narrow at 768 and swallows the
      entire photograph at 2560.
   2. A vertical ramp. Opaque for the first few pixels so the meeting with #faq's cream
      is one clean horizontal edge rather than a strip of surface glare butting into
      it; opaque again at the bottom so the image hands off to the footer's flat
      --lake-deep with no visible join. */
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(720px 340px at 50% 50%,
      color-mix(in srgb, var(--lake-deep) 76%, transparent) 0%,
      color-mix(in srgb, var(--lake-deep) 70%, transparent) 44%,
      color-mix(in srgb, var(--lake-deep) 26%, transparent) 74%,
      transparent 100%),
    linear-gradient(to bottom,
      var(--lake-deep) 0%,
      color-mix(in srgb, var(--lake-deep) 34%, transparent) 9%,
      color-mix(in srgb, var(--lake-deep) 8%, transparent) 46%,
      color-mix(in srgb, var(--lake-deep) 40%, transparent) 84%,
      var(--lake-deep) 100%);
}

/* ---------------------------------------------------------------- the copy */

.cta__copy {
  position: relative;
  z-index: 2;
  text-align: center;
  padding-inline: var(--gutter);
}

/* Cursor sets theirs around 96px at 1600 and lets it own the block. Fraunces carries
   more weight per pixel than their grotesk, so this tops out a little under that. */
.cta__h {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.5rem, 5.8vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.024em;
  color: var(--paper);
}

.cta__act { margin-top: clamp(28px, 3.4vw, 44px); }
/* Bigger than the page's default pill — it is the last thing on the page and Cursor's
   equivalent is a large target. min-height, not padding-block, so the 44px floor is a
   no-op rather than a second size. */
.cta__btn {
  gap: 10px;
  min-height: 56px;
  padding: 0 30px;
  font-size: 17px;
}
.cta__apple { height: 19px; width: auto; margin-top: -2px; }

/* ---------------------------------------------------------------- footer */

/* Solid --lake-deep, not the image. The footer's smallest type is 10.5px letterspaced
   caps and its links are 15px — carrying those over dithered water needs a scrim
   heavy enough that no photograph survives underneath it. Better an honest flat
   ground that the image's own deep water fades into. Measured on the flat: links
   7.3:1, tag 6.3:1, section heads 5.3:1, bottom bar 5.3:1. */
/* Solid --lake-deep, not the image. Its type is small and carrying that over dithered
   water needs a scrim heavy enough that no photograph survives underneath it anyway —
   better an honest flat ground that the plate's own deep water fades into.
   One row now. The plate above carries the closing pitch and the download, so all the
   footer still owes is wayfinding and a legal line; the old Product/Resources/Legal
   block spent 377px restating an eight-link nav under three headings. */
.foot {
  position: relative;
  background: var(--lake-deep);
  color: color-mix(in srgb, var(--paper) 72%, var(--lake-deep));
  padding-block: 20px;
  font-size: 15px;
}

.foot__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px clamp(20px, 3vw, 40px);
}

.foot__id {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.foot__mark {
  flex: none;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.28rem;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--paper);
}

.foot__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px clamp(14px, 1.6vw, 24px);
}
.foot__links a {
  /* padding-block, not a bare line box: 8+8 either side of a 21px line clears the 36px
     the row can afford while keeping the whole label as the target, not just glyphs. */
  padding-block: 8px;
  font-size: 14.5px;
  color: color-mix(in srgb, var(--paper) 72%, var(--lake-deep));
  transition: color 0.15s var(--ease-nav);
}
/* No href: these pages do not exist yet, and href="#" sent the reader to the top of
   the page instead. pointer-events kills the hover affordance too — an interactive
   cue for a destination that isn't there is worse than a dead label.
   52%, not 46%: at 46 these measured 3.90:1 on --lake-deep. WCAG exempts inactive
   controls, but "exempt" is not "legible" and these are labels a reader is meant to
   read and understand as not-yet-built. 52% measures 4.55:1 and still reads as a
   clear step down from the live links beside them at 7.27:1. */
.foot__links a[data-todo] {
  pointer-events: none;
  color: color-mix(in srgb, var(--paper) 52%, var(--lake-deep));
}
@media (hover: hover) and (pointer: fine) {
  .foot__links a:hover {
    color: var(--paper);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
  }
}

.foot__meta {
  flex: none;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--paper) 58%, var(--lake-deep));
}

/* ---------------------------------------------------------------- narrow */

@media (max-width: 860px) {
  /* Stacked and centred rather than three things fighting for one line. */
  .foot__row { flex-direction: column; justify-content: center; text-align: center; }
  .foot__id { align-items: center; }
  .foot__links { justify-content: center; }
  .foot { padding-block: 26px; }
}

@media (max-width: 720px) {
  /* Portrait: cover now crops the 1.79:1 image hard on the HORIZONTAL — about two
     thirds of its width is off-screen — so the crop point moves right to keep the
     trout and the perch in frame instead of a slab of bare stone. The px radial needs
     no override; at this width it is already wider than the viewport, which is
     correct — the copy column is the full width here. */
  /* the crop drifts right on narrow: at 52% a portrait viewport cuts the fish in half */
  .cta { height: clamp(440px, 62vh, 560px); }
  .cta__bg { object-position: 62% 54%; }
}