/* ============================================================
   Pallet — Landing page
   Redesign: parabolic stacks of real ShippingLabelView PNGs
   exported from the iOS app (with Metal shader output baked in).
   ============================================================ */

/* ---------- Fonts (local, from app bundle) ---------- */
@font-face {
  font-family: "Geist";
  src: url("../assets/fonts/Geist-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../assets/fonts/Geist-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../assets/fonts/Geist-SemiBold.otf") format("opentype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../assets/fonts/Geist-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../assets/fonts/Geist-Black.otf") format("opentype");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../assets/fonts/GeistMono-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../assets/fonts/GeistMono-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../assets/fonts/GeistMono-SemiBold.otf") format("opentype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../assets/fonts/GeistMono-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Pixel Circle";
  src: url("../assets/fonts/GeistPixel-Circle.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Pixel Square";
  src: url("../assets/fonts/GeistPixel-Square.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Surfaces — match DefaultTheme palette exactly */
  --bg-primary: #F2F0EA;
  --card-bg:    #FAF9F6;
  --paper-warm: #F5F2E9;

  /* Ink */
  --ink:        #0A0A0A;
  --ink-soft:   #1B1B1A;
  --content-2:  rgba(10, 10, 10, 0.55);
  --content-3:  rgba(10, 10, 10, 0.35);

  /* Lines */
  --separator:  rgba(10, 10, 10, 0.18);
  --separator-strong: rgba(10, 10, 10, 0.32);

  /* Accents */
  --accent-blue:  #2563EB;
  --accent-green: #1E8E45;
  --accent-amber: #C8741A;
  --accent-red:   #C12A2A;

  /* Spacing */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;
  --s-32: 128px;

  /* Type */
  --font-pixel: "Geist Pixel Circle", ui-monospace, monospace;
  --font-pixel-sq: "Geist Pixel Square", ui-monospace, monospace;
  --font-mono:  "Geist Mono", ui-monospace, "SFMono-Regular", monospace;
  --font-ui:    "Geist", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Radius */
  --radius-card: 12px;
  --radius-sm:   4px;

  /* Border */
  --border-thick: 2px;
  --border-thin:  1px;

  /* Shadow */
  --shadow-card:    0 8px 24px rgba(10,10,10,0.10), 0 2px 8px rgba(10,10,10,0.06);
  --shadow-floaty:  0 22px 40px rgba(10,10,10,0.18), 0 6px 14px rgba(10,10,10,0.10);
}

* , *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* Smooth scrolling for in-page anchors (the hero "Learn more" button
   anchors to #what-it-does). Wrapped in a media query so users with
   `prefers-reduced-motion: reduce` keep the default instant jump.
   `scroll-padding-top` gives the destination a comfortable buffer
   from the viewport edge instead of slamming flush at the top. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
html { scroll-padding-top: clamp(48px, 8vh, 96px); }

body {
  font-family: var(--font-ui);
  background: var(--bg-primary);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* Body becomes the containing block for the two `.side-stream`
     elements below — they anchor to the body and span its full
     scrollable height, so cards keep flowing past the hero into
     every section of the page. */
  position: relative;
  /* Subtle warm vignette so the off-white background feels like paper */
  background:
    radial-gradient(ellipse at top, rgba(245, 240, 225, 0.55), transparent 55%),
    radial-gradient(ellipse at bottom, rgba(230, 226, 215, 0.35), transparent 55%),
    var(--bg-primary);
  background-attachment: fixed;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.container {
  /* Width is the smaller of the absolute max (1200) and the
     viewport-minus-stream-gutters safe zone, so the container always
     sits squarely between the two side streams without colliding
     with them. Doing the gutter reservation as `width` instead of
     `padding` avoids the box-sizing-border-box trap where the inner
     content collapses to zero on very wide viewports (`max-width
     1200` minus 2× stream-w padding can go negative). Inside, a
     small padding gives the content breathing room from the
     container edge. */
  width: min(100% - 2 * var(--stream-w, 0px), 1200px);
  margin: 0 auto;
  padding: 0 var(--s-20);
}
@media (max-width: 1023px) { .container { padding: 0 var(--s-10); } }
@media (max-width: 767px)  {
  .container {
    width: 100%;          /* streams hidden on mobile, content uses full width */
    padding: 0 var(--s-5);
  }
}

/* ============================================================
   HERO
   ============================================================ */

.hero {
  position: relative;
  isolation: isolate;
  /* No `overflow: hidden` here any more — the side streams escape
     the hero and continue down the page, so we can't clip them.
     We cap the hero with `min(…, 1080px)` so it never stretches
     beyond a sensible "first screen" on tall viewports — otherwise
     the hero greedily eats the whole page and pushes the rest of
     the content below the fold. */
  min-height: min(100vh, 1080px);
  min-height: min(100dvh, 1080px);
  padding: clamp(96px, 14vh, 170px) var(--stream-w) clamp(80px, 12vh, 140px);
  display: grid;
  place-items: center;
}
@media (max-width: 767px) {
  .hero { padding-left: var(--s-5); padding-right: var(--s-5); }
  /* Top-header band lives above the hero on mobile (≈230 px tall).
     Subtracting that from the hero's min-height keeps `place-items:
     center` actually centering the text in the *remaining* viewport
     instead of pushing it well below the visual midpoint. */
  .hero {
    min-height: calc(100vh  - 230px);
    min-height: calc(100dvh - 230px);
  }
}
@media (max-width: 480px) {
  .hero {
    min-height: calc(100vh  - 190px);
    min-height: calc(100dvh - 190px);
  }
}

/* Soft paper grid: traced, not loud — sits underneath everything */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(10, 10, 10, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10, 10, 10, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 60% at center, rgba(0,0,0,0.95), transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at center, rgba(0,0,0,0.95), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Edge soft fades so labels dissolve gracefully out of frame */
.hero-edge-fade {
  position: absolute; top: 0; bottom: 0; width: 12vw;
  pointer-events: none; z-index: 4;
}
.hero-edge-fade--left  { left:  0; background: linear-gradient(to right, var(--bg-primary), transparent); }
.hero-edge-fade--right { right: 0; background: linear-gradient(to left,  var(--bg-primary), transparent); }
@media (max-width: 767px) { .hero-edge-fade { display: none; } }

/* Center stage (text + CTA) — z-index above piles */
.hero-stage {
  position: relative;
  z-index: 5;
  text-align: center;
  max-width: 720px;
  padding: 0 var(--s-6);
}

.hero-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--content-2);
  padding: 6px 12px;
  border: 1px solid var(--separator-strong);
  border-radius: 999px;
  background: rgba(250, 249, 246, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  margin-bottom: var(--s-8);
}

/* Pixel headline — mirrors ScreenTitleText (Geist Pixel Circle, half-pt cardinal shadows
   to thicken glyph density and fill inter-dot whitespace) */
.hero-headline {
  font-family: var(--font-pixel);
  font-weight: 400;
  font-size: clamp(2.6rem, 6.4vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: -0.005em;
  color: var(--ink);
  /* Cardinal half-pt shadows — same trick the iOS ScreenTitleText uses to bold pixel glyphs */
  text-shadow:
     0.5px 0    0 currentColor,
    -0.5px 0    0 currentColor,
     0    0.5px 0 currentColor,
     0   -0.5px 0 currentColor;
}
.hero-headline .line { display: block; }
.hero-headline .line + .line { margin-top: 0.08em; }

.hero-subheadline {
  margin: clamp(20px, 3vh, 28px) auto 0;
  max-width: 540px;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: clamp(1rem, 1.15vw, 1.13rem);
  line-height: 1.55;
  color: var(--content-2);
}

.hero-cta-row {
  margin-top: clamp(28px, 4vh, 40px);
  display: inline-flex;
  align-items: center;
  gap: var(--s-6);
  flex-wrap: wrap;
  justify-content: center;
}

/* ---------- Industrial button ---------- */
.ind-button {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.94rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 16px 26px;
  background: var(--ink);
  color: var(--bg-primary);
  border: 2px solid var(--ink);
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--ink);
  cursor: pointer;
  transition: box-shadow 0.1s ease-out, transform 0.1s ease-out, background 0.15s ease;
  text-decoration: none;
  user-select: none;
}
.ind-button:hover { box-shadow: 2px 2px 0 var(--ink); transform: translate(2px, 2px); }
.ind-button:active { box-shadow: 0 0 0 var(--ink); transform: translate(4px, 4px); }
.ind-button:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.ind-button-stamp {
  font-family: var(--font-mono);
  font-weight: 800;
  display: inline-block;
  transform: translateY(-1px);
}
.ind-button--small { padding: 12px 18px; font-size: 0.86rem; box-shadow: 3px 3px 0 var(--ink); }
.ind-button--small:hover  { box-shadow: 1.5px 1.5px 0 var(--ink); }
.ind-button--small:active { box-shadow: 0 0 0 var(--ink); }

/* ============================================================
   SHIPPING LABEL PILE — strict zone + tactile-card spec
   - Three conceptual columns: Left drop zone (0–25vw),
     Center safe zone (25–75vw, headline owns it, no cards),
     Right drop zone (75–100vw).
   - Cards are encouraged to bleed off the physical viewport edge.
   - Position chosen: `position: absolute` inside `<header class="hero">`
     so cards naturally vanish when the user scrolls past the hero
     (rather than being glued to the viewport via `fixed`, which would
     have them peeking up under the features section).
   ============================================================ */

/* ============================================================
   SIDE LABEL STREAMS — endless vertical bands of shipping-label
   cards that flank the page on both sides.

   Layout choices:
   - Each `.side-stream` is `position: absolute; top: 0; bottom: 0`
     anchored to the body, so its rendered height equals the entire
     body height. Cards inside use `top: <%>` so they distribute
     naturally across whatever the page ends up scrolling to —
     the more content the page has, the more vertical real estate
     the streams cover. No JS height calculation needed.
   - The streams are strictly outside the center safe zone:
       left stream  → x ∈ [0,             --stream-w]
       right stream → x ∈ [100vw - --stream-w, 100vw]
     The center column owns the rest. Cards never bleed off the
     viewport edge or into the center zone.
   - All cards in a stream are the SAME width (`--card-w`), driven
     by a single token. Visual variety comes from random rotation,
     vertical jitter, and z-index/shadow depth.
   - Cards are completely INERT — no hover lift, no z-shuffle, no
     pointer cursor. A buried card stays buried (real-pile physics).

   Tokens controlling the streams:
   --stream-w     : column width (vw)
   --card-w       : uniform card width (vw)
   --stream-z     : z-index baseline; sits BELOW main content layers
   ============================================================ */

:root {
  /* All cards share a single uniform width so the pile reads as a
     stack of identically-printed labels (per the user's preference).
     Stream gutter is ~1.4× the card width, giving cards room to
     offset horizontally inside the gutter — overlapping "lanes"
     rather than a single ribbon. Slimmed down from prior values so
     the central content column has comfortable room (the headline
     and feature copy need ~700-750 px to read well on desktop). */
  --stream-w:    24vw;
  --card-w:      17vw;
}

.side-stream {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--stream-w);
  /* Below all main content (which has implicit z-index 0 and
     up). Cards visually frame the page without ever obscuring
     the body copy or interactive elements. */
  z-index: 0;
  pointer-events: none;
  isolation: isolate;
  /* `visible` (not `hidden`) so rotated card corners can spill out
     of the stream's strict box without getting clipped — the body's
     `overflow-x: hidden` still keeps things tidy at the viewport
     edges. Without this, cards near the top/bottom of each stream
     and along the inner edge get hard-cropped, which the user
     called out. */
  overflow: visible;
}
/* Inner streams — sit flush at the viewport edges; cards inside fill
   the gutter the same way the single stream used to. */
.side-stream--left.side-stream--inner  { left:  0; }
.side-stream--right.side-stream--inner { right: 0; }

/* Outer streams — shifted *half their width* off-screen so the half
   facing the viewport peeks past the edge while the other half is
   clipped by the body's `overflow-x: hidden`. The outer + inner
   streams overlap inside the gutter, layering two bands of cards. */
.side-stream--left.side-stream--outer  { left:  calc(-0.5 * var(--stream-w)); }
.side-stream--right.side-stream--outer { right: calc(-0.5 * var(--stream-w)); }

.card {
  position: absolute;
  width: var(--card-w);
  /* Card height follows the image's natural ratio (`<img>` below uses
     `height: auto`). The exporter renders some labels shorter than
     others — single-line vs. multi-line addresses, with vs. without
     stacked carrier stamps — so a fixed `aspect-ratio` would leave
     transparent padding at the bottom of every shorter card. */
  cursor: default;
  user-select: none;
  border-radius: 6px;
  /* JS sets per-card:
       --rot              : −180° → +180°
       --shadow-strength  : 0..1 (climbs with z-index in pile)
       --enter-delay      : staggered fade-in delay
     and absolute positioning via `top: %` + `left: <px>` (left stream)
     or `right: <px>` (right stream). */
  rotate: var(--rot, 0deg);
  /* Flatter, tighter shadow — the pile is meant to read as labels
     pressed against each other on a desk, not floating with halos.
     One subtle close-contact shadow does the work. */
  box-shadow:
    1px 1.5px 3px
    rgba(10, 10, 10, calc(0.06 + var(--shadow-strength, 0) * 0.04));
  /* GPU compositing for cheap rotations + the wind-physics translate
     updates. `translateZ(0)` forces each card onto its own layer so
     transforms don't trigger paints, and `backface-visibility:
     hidden` prevents Safari from rasterising the back face needlessly.
     (We deliberately do NOT use `content-visibility: auto` here —
     it skips rendering for cards that are off-viewport, which makes
     the from-the-side entrance look like the cards "pop in" once
     they cross the viewport edge instead of flying smoothly.) */
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: layout paint;
}

.card img {
  display: block;
  width: 100%;
  /* Auto height — the card's box matches the image's intrinsic
     aspect, so no transparent padding ever shows at the bottom. */
  height: auto;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
  border-radius: inherit;
}

/* ---------- Side-sweep entrance ----------
   Cards whizz in from the LEFT side of the viewport for left-stream
   cards and from the RIGHT for right-stream cards, each following an
   ease-out curve that decelerates as they reach their resting spot.
   The stagger is bottom-first (assigned in JS based on each card's
   final Y%), so the page reads as filling up from the floor.

   `@property` registers each angle so `rotate` interpolates cleanly
   from spin-on-arrival back to the resting `--rot`. Without the
   registration the browser treats custom-property angles as opaque
   strings and the rotate jumps at 100%. */
@property --rot {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@property --rot-spin {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes card-fly-in {
  0% {
    opacity: 0;
    /* `--enter-from-x` is set per-card in JS:
         left-stream  → −130vw (off the left edge of the viewport)
         right-stream → +130vw (off the right edge)
       Plus a small `--enter-from-y` jitter so cards don't all enter
       on the same horizontal sight-line. */
    translate: var(--enter-from-x, -130vw) var(--enter-from-y, 0px);
    rotate: calc(var(--rot) + var(--rot-spin, 0deg));
  }
  18% { opacity: 1; }
  100% {
    opacity: 1;
    translate: 0 0;
    rotate: var(--rot);
  }
}
.card {
  opacity: 0;
  /* Snappy ease-out: the card whips across the screen quickly and
     decelerates into its resting spot, like paper carried by a gust
     and dropped onto a desk. */
  animation: card-fly-in 0.95s cubic-bezier(0.16, 0.7, 0.22, 1) forwards;
  animation-delay: var(--enter-delay, 0s);
}

/* ---------- Responsive sizing ----------
   On narrower viewports the streams shrink so the centre column
   keeps comfortable room for content. */
@media (max-width: 1279px) {
  :root {
    --stream-w:   22vw;
    --card-w:     16vw;
  }
}
@media (max-width: 1023px) {
  :root {
    --stream-w:   20vw;
    --card-w:     14vw;
  }
}

/* Mobile: hide the side streams and surface the horizontal
   `.top-header` band instead. The header lives in normal flow at
   the very top of the body so the hero pushes down beneath it; its
   cards slide in from above the viewport on load. */
@media (max-width: 767px) {
  .side-stream { display: none; }
}

/* Mobile-only horizontal bands — desktop hides them entirely. */
.top-header,
.bottom-footer { display: none; }

@media (max-width: 767px) {
  .top-header,
  .bottom-footer {
    display: block;
    position: relative;
    width: 100%;
    /* Band is sized to fully contain a card (38vw wide × ~33vw tall
       at this breakpoint, plus a comfortable margin). With the band
       at least as tall as a card, the cards inside don't overflow
       above into the page footer or below into the hero. */
    height: 230px;
    overflow: visible;
    pointer-events: none;
    z-index: 10;
  }
  .top-header .card,
  .bottom-footer .card {
    width: var(--band-card-w, 38vw);
  }
}
@media (max-width: 480px) {
  .top-header,
  .bottom-footer { height: 190px; }
  .top-header .card,
  .bottom-footer .card { --band-card-w: 44vw; }
}

/* Reduced motion — drop the entrance fade; cards remain fully inert. */
@media (prefers-reduced-motion: reduce) {
  .card {
    animation: none;
    opacity: 1;
  }
}

/* ============================================================
   STRIP / TAGLINE
   ============================================================ */
.strip-tagline {
  padding: clamp(72px, 10vh, 120px) 0;
}
.dashed-divider {
  width: 100%; height: 0;
  border: none;
  border-top: 1px dashed var(--separator-strong);
}
.tagline-text {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--content-2);
  letter-spacing: 0.01em;
  line-height: 1.7;
  padding: var(--s-12) 0;
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}

/* ============================================================
   FEATURES
   ============================================================ */

.features {
  padding: clamp(60px, 8vh, 110px) 0 clamp(80px, 12vh, 140px);
}

.section-header {
  max-width: 720px;
  margin: 0 auto var(--s-16);
  text-align: center;
}
.section-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--content-2);
  margin-bottom: var(--s-6);
}
.section-title {
  font-family: var(--font-pixel);
  font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  line-height: 0.98;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-shadow:
     0.5px 0    0 currentColor,
    -0.5px 0    0 currentColor,
     0    0.5px 0 currentColor,
     0   -0.5px 0 currentColor;
}
.section-lead {
  margin-top: var(--s-5);
  font-size: 1.05rem;
  color: var(--content-2);
  line-height: 1.6;
}

/* Single-column feature list — six rows, dashed dividers between
   them. Mirrors the ProUpgradeView's vertical feature cadence in
   the iOS app: numbered stamp, pixel-font label, calm body copy. */
.feature-list {
  list-style: none;
  margin: 0 auto;
  max-width: 720px;
  padding: 0;
  display: grid;
  gap: var(--s-12);
}

.feature-row {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--s-6);
  align-items: start;
  padding-bottom: var(--s-12);
  border-bottom: 1px dashed var(--separator-strong);
}
.feature-row:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.feature-num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--content-2);
  padding: 8px 12px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  text-align: center;
  align-self: start;
  /* Pull down a touch so the stamp aligns with the title's
     baseline, not its top edge. */
  margin-top: 4px;
}

.feature-body {
  /* Slot for the title + paragraph stack. */
}

.feature-title {
  font-family: var(--font-pixel-sq);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.4vw, 2.05rem);
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 var(--s-4);
  text-shadow:
     0.25px 0     0 currentColor,
    -0.25px 0     0 currentColor,
     0     0.25px 0 currentColor,
     0    -0.25px 0 currentColor;
}

.feature-text {
  font-family: var(--font-ui);
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--content-2);
  max-width: 56ch;
}

@media (max-width: 767px) {
  .feature-row {
    grid-template-columns: 1fr;
    gap: var(--s-4);
  }
  .feature-num {
    justify-self: start;
    margin-top: 0;
  }
}

/* ============================================================
   CLOSING CTA
   ============================================================ */

.cta-footer { padding: clamp(60px, 8vh, 110px) 0 clamp(80px, 12vh, 140px); }
.cta-inner {
  text-align: center;
  /* Sized to comfortably host "Track everything." and "Miss nothing."
     on their own lines at the cta-headline's clamp-capped 4.2rem
     font size. Lives INSIDE `.container` (separate element) so its
     max-width is content-only and doesn't collide with the
     container's stream-aware padding under `box-sizing: border-box`. */
  max-width: 720px;
  margin: 0 auto;
}
.cta-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--content-2);
  margin-bottom: var(--s-5);
}
.cta-headline {
  font-family: var(--font-pixel);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  line-height: 0.98;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-shadow:
     0.5px 0    0 currentColor,
    -0.5px 0    0 currentColor,
     0    0.5px 0 currentColor,
     0   -0.5px 0 currentColor;
}
.cta-headline .line { display: block; }
.cta-description {
  margin-top: var(--s-6);
  font-size: 1.05rem;
  color: var(--content-2);
  line-height: 1.6;
}

/* (signup form removed — closing CTA is now decorative-only) */

/* ============================================================
   FOOTER
   ============================================================ */

.page-footer { padding: var(--s-8) 0 var(--s-16); }
.footer-grid {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-6);
  padding-top: var(--s-12);
  flex-wrap: wrap;
}
.footer-mark {
  font-family: var(--font-pixel);
  font-size: 1.7rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-shadow:
     0.5px 0    0 currentColor,
    -0.5px 0    0 currentColor,
     0    0.5px 0 currentColor,
     0   -0.5px 0 currentColor;
}
.footer-tagline {
  margin-top: var(--s-2);
  font-family: var(--font-mono);
  font-size: 0.84rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--content-2);
}
.footer-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.footer-meta-line {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--content-3);
}
@media (max-width: 540px) {
  .footer-grid { flex-direction: column; align-items: flex-start; }
  .footer-meta { align-items: flex-start; }
}