/* referrals.css: page-specific rules for /referrals, loaded after site.css.
   A quiet page: hero (photo far plane + two SVG planes), section rhythm,
   the four small components this page needs that aren't in the shared
   system (numbered steps, a principles list, a fit callout, the closing
   CTA band). The one page device is the count-up on the existing "5%"
   term (site.js drives it via .count[data-target]); nothing else moves
   beyond the standard line reveals. */

/* Skip link: .skip-link now styled by the shared site.css; markup only
   kept here. */

/* A narrower reading measure than the 1280px shared .wrap, for the
   text-heavy sections below the hero. Applied to the section's direct
   children, not the .wrap.measure box itself: the box stays at .wrap's
   own width/position (spine at the page's left edge, same as the nav and
   footer), and only the content inside it narrows for readability. Fixes
   the page running three different left edges (nav/footer at x=80, the
   old .measure box centred its 720px column at x=360). h2 is left alone;
   its own max-width (30ch, site.css) already controls its wrap width. */
.measure > .steps,
.measure > .principles,
.measure > .fit,
.measure > p {
  max-width: 720px;
}

/* -------------------------------------------------------------- hero
   far = the generated photo (envelope, lime wax seal, lower-left; the
   open dark area sits top and right, where the headline goes). mid = a
   faint cyan horizon arc, clearing the sub's last line by 50px+ at every
   width (measured). near = a dark arc along the very bottom edge of the
   hero. A navy scrim sits over the upper two-thirds only, so the H1
   stays above 4.5:1 regardless of what is behind it. The copy sits flush
   left on the page's own spine (x=80 at 1440, matching the nav/footer
   and every section below), not pushed right to dodge the envelope: the
   envelope sits low in the frame, so horizontal position doesn't matter
   -- only keeping the copy block (now including the hero-act button)
   clear of it vertically does. min-height is taller than the old fixed
   660px specifically to buy that clearance: object-fit: cover reveals
   more of the photo's height as the box grows, which pushes the
   lower-sitting envelope further down the frame, away from the copy
   above it (measured at each breakpoint, not guessed). */
.hero.planes {
  position: relative; overflow: hidden;
  min-height: 780px;
  display: flex; align-items: flex-start;
}
.hero .plane-far {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover;
}
.hero .hero-scrim {
  position: absolute; left: 0; right: 0; top: 0; z-index: 1;
  height: 68%;
  background: linear-gradient(180deg, rgba(10,14,26,.94) 0%, rgba(10,14,26,.9) 48%, rgba(10,14,26,.68) 68%, rgba(10,14,26,.2) 88%, rgba(10,14,26,0) 100%);
  pointer-events: none;
}
.hero .plane-mid {
  z-index: 1; height: 220px; top: auto; bottom: 0;
}
.hero .plane-mid svg { display: block; width: 100%; height: 100%; }
.hero .plane-near { z-index: 2; height: 56px; }
.hero-inner {
  position: relative; z-index: 3;
  width: min(1280px, 92%); margin: 0 auto;
  /* 68px top: nav bottom (84px) to eyebrow top lands at ~96px, matching
     the homepage's hero rhythm (nav bottom to eyebrow), not the old
     150px that left a 178px dead gap. */
  padding: 68px 0 64px;
}
.hero-copy { max-width: 620px; }
.hero .sub {
  margin-top: 22px;
  font-size: 18px; line-height: 1.55; color: var(--text);
}
.hero-act { margin-top: 30px; }
@media (max-width: 860px) {
  .hero.planes { min-height: 720px; }
  .hero-inner { padding: 56px 0 56px; }
  .hero .plane-mid { height: 160px; }
}
@media (max-width: 600px) {
  .hero.planes { min-height: min(92vh, 740px); }
  .hero-inner { padding: 48px 0 44px; }
  .hero .sub { font-size: 16px; }
  .hero .plane-mid { height: 120px; }
  .hero-act { margin-top: 24px; }
}

/* ---------------------------------------------------- section rhythm */
section { padding: 56px 0; }
section.rule { border-top: 1px solid var(--border); }
section h2 { margin-bottom: 28px; }
@media (max-width: 600px) {
  section { padding: 40px 0; }
  section h2 { margin-bottom: 20px; }
}

/* ---------------------------------------------------- numbered steps */
/* align-items: start (not the grid default stretch): each card sizes to
   its own content, so growing card 03 (the stat-figure) no longer pulls
   card 04 taller than its text needs -- card 04 was carrying a 174px hole
   under `align-items: stretch`. */
.steps { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.step {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 26px 24px 24px;
}
.step .num {
  display: block; margin-bottom: 14px;
  font: 500 13px/1 'JetBrains Mono', monospace; letter-spacing: 1px;
  color: var(--cyan);
}
.step h3 {
  margin: 0 0 10px; font: 600 18px/1.3 Inter, sans-serif; color: var(--text);
}
.step p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--text-dim); }
@media (max-width: 640px) { .steps { grid-template-columns: 1fr; } }

/* The one page device: the existing "5%" reward figure, pulled onto its
   own line at display size so it reads as a real number, not body text.
   The digit still counts up once on view via site.js's .count primitive;
   only its size and line placement change here. */
.stat-figure {
  display: block;
  margin: 8px 0 6px;
  font: 700 56px/1.1 'JetBrains Mono', monospace;
  color: var(--cyan);
}
@media (max-width: 600px) {
  .stat-figure { font-size: 40px; margin: 6px 0 4px; }
}

/* -------------------------------------------------------- principles */
.principles { list-style: none; display: grid; gap: 16px; }
.principles li {
  position: relative; padding-left: 26px;
  font-size: 16px; line-height: 1.6; color: var(--text-dim);
}
.principles li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 9px; height: 9px; border-radius: 2px; background: var(--cyan);
}
.principles li b { color: var(--text); font-weight: 600; }

/* ---------------------------------------------------------- who fits */
.fit {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 24px;
}
.fit p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text-dim); }
.fit p b { color: var(--text); font-weight: 600; }

/* ------------------------------------------------------------ CTA band
   The hero now carries the one lime control; this repeat of the same
   label/link goes .btn-outline (cyan, ghost) per the shared-system rule
   -- never two lime controls in one view. Centred, the one deliberate
   change of anchor on the page. */
.cta-band { text-align: center; }
.cta-band p { margin: 0 0 20px; font-size: 16px; color: var(--text-dim); }