/* The /outliers landing page.
   Structure, proportions and copy come from the design; the ground, the faces
   and the marks are bonfire's. Sizes are the design's own, scaled down one step
   because the design was drawn on a 1440px light page and this one is dark —
   type on a dark ground reads heavier at the same size. */


/* ── palette ──────────────────────────────────────────────────────────────
   Dark is the default and the decided one: bonfire's ground, with bone as the
   mark. The light variant swaps the two poles — near-black becomes the mark,
   a warm off-white becomes the ground — and darkens the status colours,
   because #7FC8A9 on a light ground is 1.86:1 and unreadable.

   Every value below was measured, not guessed. Ratios are against the ground
   of their own variant.
   ───────────────────────────────────────────────────────────────────────── */

.lp {
  --lp-ground:        #0A0A0D;   /* the system's near-black                  */
  --lp-ink:           #EDEDF0;   /* 17.6:1                                   */
  --lp-muted:         #8A8A96;   /*  6.0:1                                   */
  --lp-mark:          #ECECE7;   /* bone: buttons, the thing filled in       */
  --lp-on-mark:       #0A0A0D;
  --lp-rule:          #23232B;
  --lp-surface:       #131319;   /* the closer band                          */
  --lp-field:         #131319;   /* inputs, and the cards in the diagram     */
  --lp-line:          #3A3A46;   /* card strokes, input borders              */

  --lp-band-1:        #1C1C24;   /* funnel: everything published             */
  --lp-band-2:        #2A2A34;   /* funnel: the outliers                     */
  --lp-on-band:       #EDEDF0;

  --lp-negative:      #D6453F;
  --lp-on-negative:   #0A0A0D;   /*  4.5:1 on the band                       */
  --lp-negative-wash: #1A0E0E;   /* behind the crossed-out cards             */

  --lp-positive:      #7FC8A9;
  --lp-on-positive:   #0A0A0D;   /* 10.1:1 on the band                       */

  /* The ember swipe: bonfire's highlighter, #FFC46A. On the near-black ground
     the system's 0.24 reads as a warm glow behind the words. */
  --lp-swipe:         rgb(255 196 106 / 0.24);
}

/* The light variant. Its ground and status colours come from the original
   design, which was drawn light; the faces and the structure do not change. */
.lp--light {
  --lp-ground:        #FAF9F7;
  --lp-ink:           #16161A;   /* 18.8:1                                   */
  --lp-muted:         #585A63;   /*  6.5:1 — #8A8A96 is 3.2:1 here and fails */
  --lp-mark:          #16161A;   /* the mark inverts: near-black on bone     */
  --lp-on-mark:       #FAF9F7;
  --lp-rule:          #E2E0DB;
  --lp-surface:       #F2F0EC;
  --lp-field:         #FFFFFF;   /* must not equal --lp-surface              */
  --lp-line:          #C3BDB2;

  --lp-band-1:        #16161A;   /* the bands stay dark against a light page */
  --lp-band-2:        #3A3C46;
  --lp-on-band:       #FAF9F7;

  --lp-negative:      #B03A28;   /*  5.7:1 with bone text; #D6453F is 4.2:1  */
  --lp-on-negative:   #FAF9F7;
  --lp-negative-wash: #FBF2F0;

  --lp-positive:      #2F6B4F;   /*  6.0:1 with bone text                    */
  --lp-on-positive:   #FAF9F7;

  /* Over off-white the same 0.24 is barely there, so the light variant carries
     the swipe at full strength — which is also what a highlighter pen does. */
  --lp-swipe:         rgb(255 196 106 / 0.85);
}

/* The page paints its own ground, and the body behind it has to agree or a
   dark strip shows through wherever the page is shorter than the viewport. */
.lp { background: var(--lp-ground); color: var(--lp-ink); }
body:has(.lp--light) { background: #FAF9F7; }

/* A landing page carries its own opening and its own colophon. The site header
   and footer would put a competing pair around them, and in the light variant
   they would still be painted for the dark one. */
.site-head, .site-foot { display: none; }

.lp {
  --pad: clamp(1.5rem, 7vw, 6.875rem);   /* the design's 110px gutter */

  /* default.hbs wraps every page in <main class="wrap">, which is 68rem wide
     with its own gutter. A landing page drawn at 1440 has to escape that, or
     the funnel loses a third of its width and the side copy wraps to five
     lines. Full-bleed out, then put the design's own gutter back inside. */
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* No rule between the hero and the funnel: the funnel is the hero's answer,
   not a separate subject. */
.lp section { border-top: 1px solid var(--lp-rule); }
.lp section:first-child,
.lp section:nth-child(2) { border-top: 0; }

.lp h1, .lp h2, .lp .lp-statement {
  font-family: var(--font-argument);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

/* The ember swipe. bonfire's second mark, and the louder one: `colour` is the
   operative phrase in a sentence and is used freely, the swipe is the section's
   one point. It never stacks with the emphasis face — leaning and shouting at
   once is two ways of saying "this bit", which cancels — so the two markers in
   the copy are mutually exclusive by construction.

   Drawn as a background rather than a positioned pseudo-element so it survives
   a phrase wrapping across lines, which the video system never has to handle.
   The insets are the system's own: 12% off the top, 4% off the bottom, and a
   small bleed past the words at each end. */
.lp mark {
  color: inherit;
  background: linear-gradient(var(--lp-swipe), var(--lp-swipe)) no-repeat;
  background-size: 100% 84%;
  background-position: 0 12%;
  padding-inline: 0.24em;
  margin-inline: -0.24em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* The emphasis face, never a whole line — a phrase inside one. */
.lp em, .lp .emph {
  font-family: var(--font-emphasis);
  font-style: italic;
  font-weight: 600;
  font-size: 1.042em;
}

.lp-label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--lp-muted);
}
.lp-label--cut  { color: var(--lp-negative); }
.lp-label--keep { color: var(--lp-positive); }

.lp-copy { font-size: clamp(1rem, 0.9rem + 0.5vw, 1.3rem); line-height: 1.58; color: var(--lp-ink); }

/* ---------- hero ---------- */
.lp-hero {
  padding: clamp(3rem, 6vw, 4.375rem) var(--pad) 3.75rem;
  display: flex; flex-direction: column; align-items: center;
  gap: 1.75rem; text-align: center;
}
.lp-hero h1 {
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.25rem);
  line-height: 1.1;
  max-width: 63rem;
}
.lp-fineprint { font-size: 0.85rem; color: var(--lp-muted); max-width: 46rem; }

/* ---------- signup form ---------- */
.lp-form { display: flex; gap: 0.625rem; width: 100%; max-width: 47.5rem; flex-wrap: wrap; }
.lp-form input[type="email"],
.lp-form input.lp-other,
.lp-form select {
  height: 3.5rem; padding: 0 1rem;
  background: var(--lp-field); color: var(--lp-ink);
  border: 1px solid var(--lp-line); border-radius: 5px;
  font: inherit; font-size: 1rem;
}
.lp-form input[type="email"] { flex: 1 1 16rem; min-width: 0; }
.lp-form select { flex: 0 1 14.5rem; cursor: pointer; }

/* The browser's blue focus ring is the one colour on this page that belongs to
   no system. Bone is the mark everywhere else, so it is the mark here too. */
.lp-form input:focus-visible,
.lp-form select:focus-visible,
.lp-form button:focus-visible {
  outline: 2px solid var(--lp-mark);
  outline-offset: 2px;
  border-color: var(--lp-mark);
}

/* Revealed by "Mine isn't here". It takes its own row at the full width of the
   form so it reads as an answer to the dropdown above it, not a fourth field. */
.lp-form input.lp-other { flex: 1 1 100%; }
.lp-form input.lp-other[hidden] { display: none; }
.lp-form button {
  height: 3.5rem; padding: 0 2rem;
  background: var(--lp-mark); color: var(--lp-on-mark);
  border: 0; border-radius: 5px;
  font: inherit; font-size: 1rem; font-weight: 700;
  white-space: nowrap; cursor: pointer;
}
.lp-form button[disabled] { opacity: 0.5; cursor: default; }
.lp-msg { min-height: 1.4em; font-size: 0.9rem; color: var(--lp-muted); }
.lp-msg--error { color: var(--lp-negative); }
.lp-hp { position: absolute; left: -9999px; }

/* ---------- funnel ---------- */
.lp-funnel-head {
  padding: clamp(3rem, 5vw, 4.5rem) var(--pad) 0.625rem;
  display: flex; flex-direction: column; align-items: center;
  gap: 0.875rem; text-align: center;
}
.lp-funnel-head h2 { font-size: clamp(1.5rem, 1rem + 2vw, 2.625rem); line-height: 1.14; max-width: 47.5rem; }

.lp-inflow { display: flex; justify-content: center; padding-top: 1.625rem; }
.lp-inflow svg { max-width: 100%; height: auto; }

.lp-rows {
  padding-inline: var(--pad);
  display: grid;
  grid-template-columns: 1fr 18.75rem 1fr;
  gap: 0 2.75rem;
  align-items: stretch;
}
.lp-side { display: flex; flex-direction: column; justify-content: center; gap: 0.625rem; padding: 1.75rem 0; }
.lp-side--right { text-align: right; align-items: flex-end; }
.lp-art { display: flex; align-items: center; padding: 1.625rem 0; }
.lp-art--right { justify-content: flex-end; }
.lp-art svg { max-width: 100%; height: auto; }

/* The funnel bands narrow toward the bone that survives. */
.lp-band { position: relative; display: flex; align-items: center; justify-content: center; min-height: 6.25rem; }
.lp-band svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lp-band span {
  position: relative;
  font-family: var(--font-argument);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.4rem, 1rem + 1.4vw, 2.5rem);
  letter-spacing: -0.02em;
}


/* The raw voice: a feeling, never the argument. */
.lp-delivery {
  padding: 1.625rem var(--pad) 5.5rem;
  display: flex; justify-content: center; text-align: center;
}
.lp-delivery span {
  font-family: "Permanent Marker", var(--font-argument);
  font-size: clamp(1.3rem, 1rem + 1.4vw, 2.125rem);
  color: var(--lp-positive);
  transform: rotate(-1.5deg);
}

/* ---------- statements ---------- */
.lp-statements {
  padding: clamp(3.5rem, 6vw, 5.375rem) var(--pad);
  display: flex; flex-direction: column; align-items: center; gap: 3.25rem; text-align: center;
}
.lp-statements .lp-statement { font-size: clamp(1.25rem, 0.9rem + 1.5vw, 2.125rem); line-height: 1.35; max-width: 56rem; color: var(--lp-muted); font-weight: 400; }
.lp-statements .lp-lead { color: var(--lp-ink); font-size: clamp(2rem, 1.2rem + 3.4vw, 4rem); line-height: 1.12; max-width: 56rem; }

/* ---------- closer ---------- */
.lp-closer {
  background: var(--lp-surface);
  padding: clamp(3rem, 5vw, 5rem) var(--pad);
  display: flex; flex-direction: column; align-items: center; gap: 2rem;
}
.lp-closer .lp-statement { font-size: clamp(1.4rem, 1rem + 2vw, 2.625rem); line-height: 1.22; max-width: 53.75rem; text-align: center; }
.lp-colophon { font-size: 0.8rem; color: var(--lp-muted); }
/* The footer links are the only links on these pages, and they are the ones a
   regulator looks for. Underlined, so they read as links. */
.lp-colophon a { color: var(--lp-ink); text-decoration: underline; text-decoration-color: var(--lp-line); text-underline-offset: 3px; }
.lp-colophon a:hover { text-decoration-color: currentColor; }

/* ── narrow screens ───────────────────────────────────────────────────────
   The form stacks, and the funnel becomes a rail.

   Full width, the funnel stops working: each band tapers by a few percent of a
   390px screen, so the narrowing is invisible, and consecutive bands merge into
   one black shape with the copy stranded somewhere after it. Standing the
   funnel in a narrow column on the left restores both — the taper is obvious
   at 5rem wide, and each stage's copy sits beside its own band instead of
   below an unrelated one.
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 48rem) {
  /* Three controls side by side leaves each too narrow to read. */
  .lp-form { flex-direction: column; align-items: stretch; }
  .lp-form input[type="email"],
  .lp-form input.lp-other,
  .lp-form select,
  .lp-form button { width: 100%; flex: 0 0 auto; }
}

@media (max-width: 60rem) {
  .lp-rows {
    /* Wider on a tablet, where there is room, without ever getting so wide
       that the copy column is squeezed. */
    grid-template-columns: clamp(5rem, 11vw, 8rem) 1fr;
    column-gap: clamp(1.25rem, 3vw, 2rem);
    row-gap: 0;
    align-items: stretch;
  }

  .lp-side, .lp-side--right {
    text-align: left;
    align-items: flex-start;
    padding: 1.25rem 0;
  }

  /* Both are decoration rather than argument. The scattered cards read as
     input pouring into the funnel's mouth only while the funnel is centred
     under them; against a rail on the left they are a floating cluster
     attached to nothing. */
  .lp-art,
  .lp-inflow { display: none; }

  /* The bands stack into one continuous rail; the copy runs alongside. Rows are
     placed explicitly because the desktop order alternates sides, and one band
     answers to two blocks of copy. */
  .lp-band { min-height: 0; }
  .lp-rows > :nth-child(2)  { grid-area: 1 / 1; }   /* processed  */
  .lp-rows > :nth-child(1)  { grid-area: 1 / 2; }
  .lp-rows > :nth-child(5)  { grid-area: 2 / 1; }   /* outliers   */
  .lp-rows > :nth-child(6)  { grid-area: 2 / 2; }
  .lp-rows > :nth-child(8)  { grid-area: 3 / 1; }   /* filtered   */
  .lp-rows > :nth-child(7)  { grid-area: 3 / 2; }
  .lp-rows > :nth-child(11) { grid-area: 4 / 1; }   /* kept       */
  .lp-rows > :nth-child(10) { grid-area: 4 / 2; }
  .lp-rows > :nth-child(14) { grid-area: 5 / 1; }   /* the neck   */
  .lp-rows > :nth-child(12) { grid-area: 5 / 2; }
  .lp-rows > :nth-child(13),
  .lp-rows > :nth-child(15) { display: none; }      /* desktop spacers */

  /* The figure has to fit the rail, so it gives up the display size it has on
     desktop. The shape carries the drama here; the copy carries the detail. */
  .lp-band span { font-size: clamp(1rem, 2.2vw, 1.4rem); letter-spacing: -0.01em; }

}