/* ============================================================
   landing.css, the marketing page: header + first hero fold.

   Deliberately SMALL. The hero's product visual is built from real Spark
   components (.ans, .ll, .composer, the zoe-widgets cards), so their styling
   already comes from molecules.css / widgets.css / vendor. This file only adds
   the page around them: the ambient layer, the 1440 column, the header, the
   two CTAs, and the frame the demo sits in.

   Nothing in here restyles a product class. The only rules that touch one are
   the few marked LOCAL FIT, which adapt a component to a page context it was
   never built for (a card outside .thread, a composer outside .dock), and they
   change geometry only, never colour, type or spacing inside the component.
   ============================================================ */

/* ---- the ambient background ---------------------------------------------
   .screen (the app's shell) is a fixed 100dvh box with overflow:hidden, which
   is right for an app and wrong for a page you scroll. So the landing page
   paints the SAME --bg / --bgfall / --grain on its own fixed layer: the
   gradient stays locked to the viewport and full-bleed at any width, while the
   1440px content column scrolls over it. */
.lp-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--bgfall);
  background-image: var(--bg);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
/* the same two-frequency grain the app uses, at the investigation-dark amount
   solved in bg-trace.css (.23). Stated here because that rule is scoped to
   `.screen::before`, which this page deliberately does not have. */
.lp-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grain) repeat;
  background-size: 330px 330px;
  mix-blend-mode: overlay;
  opacity: 0.23;
}
/* THE FOLD HAS A FLOOR. The gradient's own artwork runs out below the hero, so
   a tall fold met a flat wall of --bgfall. This is not a second background: it
   is the same fall colour easing in, so the demo sits in depth, not on a seam. */
.lp-bg::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 34vh;
  background: linear-gradient(
    180deg,
    rgba(18, 18, 21, 0) 0%,
    rgba(18, 18, 21, 0.28) 55%,
    rgba(18, 18, 21, 0.62) 100%
  );
}

/* CLIP, NOT HIDDEN. Both stop the horizontal bleed this was added for, but
   `hidden` also turns the body into a scroll container, and a sticky child
   of a scroll container sticks to THAT box rather than to the viewport the
   page is actually scrolling - which silently did nothing here and let the
   header scroll straight off the top. `clip` cuts the overflow without
   creating the container, so .lp-head can stick. */
/* THE LANDING PAGE OPTS OUT OF THE APP'S FIXED-HEIGHT SHELL. base.css sets
   html,body{height:100%} because the APP is a fixed 100dvh box with its own
   internal scrollers (.screen). This page is the opposite: one long document
   that scrolls the window. With the inherited 100% the body stayed exactly
   one viewport tall while 9000px of content overflowed it, and since a
   sticky element can only travel inside its own containing block, the
   header un-stuck after roughly one screen and rode away with the page.
   Scoped to body.lp so the app shell keeps the height it needs. */
html:has(body.lp),
body.lp {
  height: auto;
  min-height: 100%;
}
body.lp {
  background: var(--bgfall);
  overflow-x: clip;
}
.lp-main {
  position: relative;
  z-index: 1;
}

/* ---- THE HEADER STICKS ---------------------------------------------------
   It stays in flow (sticky, not fixed), so nothing below it moves and the
   hero keeps the height it was signed off with.

   THE PLATE IS NOT PAINTED UNTIL IT IS NEEDED. At the top of the page the
   header sits on the hero and any plate behind it would be a bar drawn
   across the fold, so it is fully transparent there and only fades in once
   the page has actually scrolled under it (js/landing.js sets data-lp-stuck).

   AND IT DOES NOT BRING ITS OWN COLOUR. The page runs three module grounds
   and a photoreal hero behind this bar, so a fixed tint would be wrong
   against most of them. The plate is mostly blur: it samples whatever is
   passing underneath and only deepens it, which is why the fill is low alpha
   and the saturate is above 1. What the eye reads is the page's own colour,
   one step denser, with a hairline under it. */
.lp-head {
  position: sticky;
  top: 0;
  z-index: 60;
}
.lp-head__in {
  position: relative;
  z-index: 1;
}
.lp-head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.26s var(--ease);
  background: rgba(20, 21, 25, 0.55);
  -webkit-backdrop-filter: blur(16px) saturate(155%);
  backdrop-filter: blur(16px) saturate(155%);
}
/* the hairline is its own layer so it fades on the same clock as the plate
   and never sits on the page as a line with nothing behind it */
.lp-head::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.26s var(--ease);
  background: rgba(255, 255, 255, 0.09);
}
html[data-lp-stuck="1"] .lp-head::before,
html[data-lp-stuck="1"] .lp-head::after {
  opacity: 1;
}
/* WITHOUT backdrop-filter there is nothing to sample, so the plate has to
   carry the separation on its own and the fill goes up to compensate. */
@supports not (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  .lp-head::before {
    background: rgba(20, 21, 25, 0.9);
  }
}
@media (prefers-reduced-motion: reduce) {
  .lp-head::before,
  .lp-head::after {
    transition: none;
  }
}

/* ---- the 1440 column ----------------------------------------------------
   The CONTENT is capped; the background above is not. */
.lp-wrap {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 40px;
}

/* ---- header -------------------------------------------------------------
   16px, not 26. Ten off the top and ten off the bottom (Ameer, 4 Sep): the bar
   is sticky, so its height is a tax the visitor pays on every screen of the
   page, and at 26 it was taking more of the fold than the one row of controls
   in it needs. The row's own height is set by the 38px lockup, which does not
   move. */
.lp-head {
  padding-block: 16px;
}
.lp-head__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
/* the supplied lockup, unmodified: the file carries both the mark and the
   wordmark, so it is placed at a height and nothing is drawn beside it. */
/* 41, not 38: same reason as .authlogo img in auth.css */
.lp-logo img {
  height: 41px;
  width: auto;
}
.lp-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lp-signin {
  padding: 10px 16px;
  border-radius: var(--r-full);
  font-size: 14.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
  transition:
    color 0.14s var(--ease),
    background 0.14s var(--ease);
}
.lp-signin:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
}

/* ---- buttons ------------------------------------------------------------
   Brand orange for the primary, per the colour rule: the accent means "the one
   action", so the secondary is a glass outline and never a second filled
   button. Page furniture, not a product component, hence its own class. */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: var(--r-full);
  cursor: pointer;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition:
    background 0.16s var(--ease),
    border-color 0.16s var(--ease),
    transform 0.16s var(--ease),
    box-shadow 0.16s var(--ease),
    color 0.16s var(--ease);
}
.lp-btn--sm {
  height: 42px;
  padding: 0 20px;
  font-size: 14.5px;
}
.lp-btn--lg {
  height: 58px;
  padding: 0 34px;
  font-size: 16.5px;
}
/* THE GLOW IS THE ACCENT, NOT A COPY OF IT. The fill and the hover were always
   the tokens; the four shadows below were the literal rgba of Orange/50, which
   is the same colour written twice. They are mixed from --accent now, so the
   button cannot drift from the module's own brand value and there is no second
   place to update when the ramp moves. Identical pixels on this page, because
   the landing page is data-module="investigation" and --accent IS Orange/50. */
.lp-btn--primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 10px 30px -8px
    color-mix(in srgb, var(--accent) 55%, transparent);
}
.lp-btn--primary:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 16px 40px -10px
    color-mix(in srgb, var(--accent) 68%, transparent);
}
.lp-btn--primary:active {
  transform: translateY(0);
}
.lp-btn--lg.lp-btn--primary {
  box-shadow:
    0 14px 44px -10px color-mix(in srgb, var(--accent) 62%, transparent),
    0 0 90px -20px color-mix(in srgb, var(--accent) 45%, transparent);
}
.lp-btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  color: #fff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.lp-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.26);
  transform: translateY(-1px);
}
.lp-btn svg {
  width: 18px;
  height: 18px;
  flex: none;
}

/* ---- hero --------------------------------------------------------------- */
/* TIGHT ON PURPOSE. The fold has to carry the copy, both CTAs AND the whole
   demo including its composer, which is the one part of it Ameer specifically
   wants seen. Every gap below is the smallest that still reads as spacious at
   950px of viewport, and they all clamp down further on a shorter window. */
.lp-hero {
  padding-top: clamp(24px, 3.4vh, 46px);
  padding-bottom: clamp(40px, 6vh, 80px);
  text-align: center;
}
.lp-h1 {
  font-size: clamp(44px, 6.05vw, 88px);
  line-height: 1.03;
  font-weight: 800;
  letter-spacing: -0.036em;
  color: #fff;
  max-width: 16ch;
  margin-inline: auto;
  text-wrap: balance;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.25);
}
.lp-sub {
  margin-top: 16px;
  font-size: clamp(16px, 1.32vw, 19.5px);
  line-height: 1.58;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.72);
  max-width: 52ch;
  margin-inline: auto;
  text-wrap: balance;
}
.lp-ctas {
  margin-top: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

@keyframes lpRise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.lp-h1,
.lp-sub,
.lp-ctas,
.lp-stage {
  animation: lpRise 0.8s var(--ease) both;
}
.lp-sub {
  animation-delay: 0.09s;
}
.lp-ctas {
  animation-delay: 0.18s;
}
.lp-stage {
  animation-delay: 0.28s;
  animation-duration: 1s;
}

/* ============================================================
   TEMPORARY: the option switcher
   ============================================================
   TWO DIRECTIONS, NOT SEVEN (Ameer, 2 Sep). Option 1 is this page as it
   stands; Option 2 is the same page with the hero's animation removed. The
   older directions are still in the file and still reachable with ?lp=N, but
   they are no longer offered here.

   IT READS data-lp-v, WHICH IS NOT data-lp-option. See the pre-paint script
   in home.html: the page is still Option 9 internally, so that attribute
   cannot double as the label on this control.

   Deliberately styled as a small utility control rather than as navigation:
   it is scaffolding, and it should look like scaffolding. Remove this block,
   the .lp-opt markup, css/landing-v2.css and the switcher block in
   js/landing.js together when a direction is chosen. */
.lp-opt {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 26px 0 11px;
  border-radius: var(--r-full);
  cursor: pointer;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.lp-opt:hover {
  background: rgba(255, 255, 255, 0.09);
}
.lp-opt__k {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.55);
}
/* the real <select> sits invisibly over the whole control, so the native picker
   and the keyboard both work while the chrome stays ours */
.lp-opt__sel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  border: 0;
  -webkit-appearance: none;
  appearance: none;
}
.lp-opt__sel:focus-visible {
  opacity: 0;
  outline: none;
}
.lp-opt:has(.lp-opt__sel:focus-visible) {
  outline: 2px solid var(--glass-2);
  outline-offset: 2px;
}
/* the value is drawn from the attribute, so it cannot drift from the state */
.lp-opt::after {
  content: "1";
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}
html[data-lp-v="2"] .lp-opt::after {
  content: "2";
}
.lp-opt__c {
  position: absolute;
  inset-inline-end: 8px;
  width: 13px;
  height: 13px;
  color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
}

/* ============================================================
   TEMPORARY: the light-theme preview toggle
   ============================================================
   Sits beside the option switcher, same scaffolding weight. Only shown on
   the family-7 page (options 7/8/9): that is the only page this prototype
   has actually converted to a light theme (see css/landing-light.css).
   Remove this block, the .lp-theme markup and its wiring in js/landing.js
   together once a theme decision is made, same as the option switcher. */
.lp-theme {
  display: none;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  flex: none;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  transition: background 0.16s var(--ease);
}
.lp-theme:hover {
  background: rgba(255, 255, 255, 0.09);
}
.lp-theme svg {
  width: 16px;
  height: 16px;
}
html[data-lp-family="7"] .lp-theme {
  display: inline-flex;
}

.lp-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  background: rgba(29, 30, 33, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition:
    opacity 0.2s var(--ease),
    transform 0.2s var(--ease),
    visibility 0.2s,
    background 0.16s var(--ease);
}
.lp-top[data-on] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}
.lp-top:hover {
  background: rgba(45, 46, 50, 0.85);
}
.lp-top:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.lp-top svg {
  width: 16px;
  height: 16px;
}
@media (prefers-reduced-motion: reduce) {
  .lp-top {
    transform: none;
  }
}

/* which fold is on screen. Options 2 and 3 share the same centred copy; what
   differs between them is which canvas is drawing behind it. */
.lp-hero--2 {
  display: none;
}
html[data-lp-option="2"] .lp-hero--2,
html[data-lp-option="6"] .lp-hero--2,
html[data-lp-family="7"] .lp-hero--2 {
  display: flex;
}
/* Options 1 and 9 swap this fold for their own. That gate CANNOT live here:
   css/landing-full.css re-declares the family-7 rule above at the same weight
   and loads after this file, so a hide written here is overridden and both
   folds render, stacked. It lives in css/landing-di1.css, which loads last of
   the three. */
.lp-hero--alt {
  display: none;
}
/* neither has a product frame under the fold, so the floor that was drawn to
   seat one would just be a dark band across the bottom of an empty stage */
html[data-lp-option="2"] .lp-bg::before,
html[data-lp-option="6"] .lp-bg::before,
html[data-lp-family="7"] .lp-bg::before {
  display: none;
}

/* ============================================================
   OPTION 2: the copy, centred, over the animated background
   ============================================================ */
/* the canvas is fixed and full bleed, BEHIND everything: it sits above the
   ambient gradient and below the header and the copy. Hidden outright on
   Option 1 so it is never painted or measured there. */
.lp-flow {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: none;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}
/* OPTION 5 IS OPTION 2'S TOP FOLD, EXACTLY. Not a copy of it: the same
   section, the same canvas, the same rules, with option 5 added to every
   gate that option 2 already passes. A duplicated hero would be a second
   thing to keep in step, and the brief is that the two are identical. */
html[data-lp-option="2"] .lp-flow,
html[data-lp-option="6"] .lp-flow,
html[data-lp-family="7"] .lp-flow {
  display: block;
  opacity: 1;
}

/* THE FOLD IS THE COPY. Centred in what is left of the viewport under the
   header, with nothing else in it. */
/* NO `display` HERE. This rule sits after the show/hide gate above, so a
   display of its own silently un-hid the fold on every other option: Option 1
   and Option 4 were both rendering Option 2's hero underneath their own. The
   gate owns display; this owns everything else. */
/* THE FOLD'S GEOMETRY BELONGS TO ALL THREE HEROES. Options 1 and 3 write
   their own copy into their own section rather than swapping strings into the
   shared one, but the SHAPE of the fold is the same fold: full height,
   centred, the same padding. Naming only .lp-hero--2 here left the two new
   ones collapsing to the height of their own text, so the logo strip climbed
   into the fold. Only one of the three is ever displayed. */
.lp-hero--2,
.lp-hero--alt,
.lp-hero--o3 {
  position: relative;
  min-height: calc(100dvh - 90px);
  align-items: center;
  justify-content: center;
  padding-block: clamp(40px, 8vh, 110px);
  text-align: center;
}
/* THE COPY MUST WIN. The animation is background, so a soft well of the page's
   own fall colour sits between it and the text: dense enough at the centre to
   guarantee contrast on the heading, gone by the edges so the motion still
   reaches the corners of the screen. */
/* FIXED to the viewport, not inset on the section. As an absolutely positioned
   child with a negative inset it bled past the page and widened the document
   at every width; and the thing it is shielding, the canvas, is viewport fixed
   too, so the well belongs in the same coordinate space. z-index:-1 inside
   .lp-main's stacking context puts it above the canvas and below the copy. */
.lp-hero--2::before,
.lp-hero--alt::before,
.lp-hero--o3::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 40% 44% at 50% 46%,
    rgba(18, 20, 27, 0.72) 0%,
    rgba(18, 20, 27, 0.4) 46%,
    rgba(18, 20, 27, 0) 76%
  );
}
/* ---- OPTION 2 ONLY: the hand-off into fold 2 ---------------------------
   Fold 2 is a plain dark ground with no animation behind it, so the blend
   between the two has to happen HERE, in the fold that still has the
   animation, rather than as a fade at the top of fold 2 - a fade there is a
   band of still-visible motion inside the section that is supposed to have
   none (Ameer, 25 Aug: "do not place any additional background animation
   behind the box"). The canvas sinks into the dark across the last third of
   THIS fold, and fold 2 then starts fully opaque from its first pixel.

   Scoped to Option 2: .lp-hero--2 is shared with Option 3, which keeps its
   film running all the way down. */
html[data-lp-option="2"] .lp-hero--2::after,
html[data-lp-option="6"] .lp-hero--2::after,
/* THE HAND OFF BELONGS TO WHICHEVER FOLD IS ON SCREEN. It fades the last
   38vh of the fold into the page's own ground so the logo strip under it
   arrives out of the fold rather than butting against it. Naming only
   .lp-hero--2 left Options 1, 3 and 9 with a hard edge across the bottom of
   the hero, because their folds are different sections. */
html[data-lp-family="7"] .lp-hero--alt::after,
html[data-lp-family="7"] .lp-hero--o3::after,
html[data-lp-family="7"] .lp-hero--2::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 38vh;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(20, 21, 25, 0) 0%,
    rgba(20, 21, 25, 0.72) 58%,
    #141519 100%
  );
}
.lp-hero2__in {
  position: relative;
}
/* a step up from Option 1's scale: this fold has nothing else in it, so the
   type is the whole picture and can afford the room */
html[data-lp-option="2"] .lp-h1,
html[data-lp-option="6"] .lp-h1,
html[data-lp-family="7"] .lp-h1 {
  font-size: clamp(46px, 6.6vw, 96px);
  max-width: 15ch;
}
html[data-lp-option="2"] .lp-sub,
html[data-lp-option="6"] .lp-sub,
html[data-lp-family="7"] .lp-sub {
  margin-top: 22px;
  font-size: clamp(16px, 1.4vw, 20.5px);
}
html[data-lp-option="2"] .lp-ctas,
html[data-lp-option="6"] .lp-ctas,
html[data-lp-family="7"] .lp-ctas {
  margin-top: 38px;
}

/* the stage caption, bottom centre: it names what the background is doing, so
   the sequence reads as an explanation and not as an ambient texture */
.lp-stagerail {
  margin-top: clamp(44px, 7vh, 86px);
  min-height: 18px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  transition: opacity 0.6s var(--ease);
}

@media (max-width: 620px) {
  .lp-hero--2 {
    min-height: calc(100dvh - 74px);
    padding-block: 32px;
  }
  html[data-lp-option="2"] .lp-h1,
  html[data-lp-option="6"] .lp-h1,
  html[data-lp-family="7"] .lp-h1 {
    font-size: clamp(38px, 10.5vw, 54px);
  }
  .lp-stagerail {
    margin-top: 38px;
    font-size: 10.5px;
  }
  /* the word goes, the number stays: the header has three controls and a
     lockup to fit, and "Option" is the part you can read off the chevron */
  .lp-opt__k {
    display: none;
  }
  .lp-opt {
    padding: 0 24px 0 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lp-flow {
    transition: none;
  }
  .lp-stagerail {
    transition: none;
  }
}

/* THE HERO HANDS OVER WITHOUT A LINE. The fade under the fold is a straight
   ramp that stops when it reaches the page ground, and a straight ramp meeting
   a flat one changes SLOPE in a single step. That corner is what showed as a
   soft band cut off just above the brand strip (Ameer, 26 Aug: "something is
   getting cut on the top before the heading"): not a colour difference, a Mach
   band at the end of the ramp.

   Smoothstep, the same curve the chapter feathers use, so the hero's last light
   arrives at the ground with zero slope and there is nothing to catch.
   Family 7 only: options 2 and 6 keep the fade they were signed off with. */
html[data-lp-family="7"] .lp-hero--alt::after,
html[data-lp-family="7"] .lp-hero--o3::after,
html[data-lp-family="7"] .lp-hero--2::after {
  background: linear-gradient(
    180deg,
    rgba(20, 21, 25, 0) 0%,
    rgba(20, 21, 25, 0.043) 12.5%,
    rgba(20, 21, 25, 0.156) 25%,
    rgba(20, 21, 25, 0.32) 37.5%,
    rgba(20, 21, 25, 0.5) 50%,
    rgba(20, 21, 25, 0.68) 62.5%,
    rgba(20, 21, 25, 0.844) 75%,
    rgba(20, 21, 25, 0.957) 87.5%,
    rgba(20, 21, 25, 1) 100%
  );
}

/* ============================================================
   THE HERO'S VOICE, AND ITS QUIETER BUTTON
   ============================================================
   These two blocks lived in css/landing-film.css, which was Option 5's file.
   Option 5 is gone and the decisions it made were adopted by everything that
   is left, so they live here now, next to the hero they act on. There is one
   copy of each and every remaining option is on it.

   THE HEADLINE, IN THE LIGHTER VOICE: the same headline at the same size, at
   500 rather than 800 and with the tracking eased off (Ameer, 25 Aug: "make
   'Ask your business data anything' a little sleeker, not this thick"). */
html[data-lp-option="2"] .lp-h1,
html[data-lp-option="6"] .lp-h1,
html[data-lp-family="7"] .lp-h1 {
  font-weight: 500;
  letter-spacing: -0.03em;
}
html[data-lp-option="2"] .lp-sub,
html[data-lp-option="6"] .lp-sub,
html[data-lp-family="7"] .lp-sub {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.66);
}

/* NO GLOW UNDER THE CTA. The fill was always right: it paints Orange/50
   exactly, straight off --accent, which is Brand Primary. What made it read as
   the wrong orange was the halo around it, not the button: the shared
   .lp-btn--primary carries a large brand-tinted drop shadow, and 36px below the
   pill it was washing the ground to rgb(87,48,23). Take the halo away and the
   pill reads as the flat brand colour it always was.

   NOT ON OPTION 2, which still carries the glow. That is where it was before
   these rules moved, and moving a file is not a licence to change what it
   decided. */
html[data-lp-option="6"] .lp-btn--primary,
html[data-lp-option="6"] .lp-btn--primary:hover,
html[data-lp-option="6"] .lp-btn--lg.lp-btn--primary,
html[data-lp-family="7"] .lp-btn--primary,
html[data-lp-family="7"] .lp-btn--primary:hover,
html[data-lp-family="7"] .lp-btn--lg.lp-btn--primary {
  box-shadow: none;
}