/* ===========================================================================
   INVICTUS landing page — 2026 redesign.

   The landing and public FAQ/legal pages load this stylesheet directly.
   Rules use `lp2-` or `.lp2`; member app, quiz and sign-in are separate.

   THEME. This page commits to one ground and does not follow `data-theme`.
   That is deliberate, and it is also the fix for the light-mode defect on
   this page: the old landing page had colours whose only definition sat in a
   dark block, so light mode rendered one theme's text on the other theme's
   ground. Here every colour is defined once, unconditionally, and the page
   looks the same whichever theme the rest of the site is in.

   NO INLINE STYLES. tests/coupling.test.js polices a `style` attribute budget
   on index.html. Everything visual lives in this file.
   ======================================================================== */

.lp2 {
  /* ground */
  --lp2-bg:        #0b0a14;
  --lp2-raised:    #0e0d19;
  --lp2-line:      #1c1a26;

  /* ink — ink-3 is 0.62 and not lower: at 11px the label text has to clear
     4.5:1 against the ground, and 0.42 (what the mock used) is 3.4:1. */
  --lp2-ink-1:     #ece7df;
  --lp2-ink-2:     rgba(236, 231, 223, 0.78);
  --lp2-ink-3:     rgba(236, 231, 223, 0.62);
  --lp2-ink-4:     rgba(236, 231, 223, 0.38);   /* decorative only, never text */

  /* accent — one action and one highlight per view */
  --lp2-acc:       #cbaafe;
  --lp2-acc-deep:  #bc91fb;
  --lp2-acc-wash:  rgba(188, 145, 251, 0.14);
  /* the quiz's pair: its primary button and its moving field are this exact
     gradient, and the founder asked for that grading back on the front door */
  --lp2-grad-a:    #a78bfa;
  --lp2-grad-b:    #7f6fe0;
  --lp2-grad:      linear-gradient(150deg, var(--lp2-grad-a), var(--lp2-grad-b));
  --lp2-on-grad:   #0b0a14;

  /* signal */
  --lp2-good:      #5eead4;
  --lp2-caution:   #ddb467;
  --lp2-bad:       #e98d8d;

  /* type */
  /* The rounded pair: Comfortaa for display, Nunito for body -- the same faces
     the film sets its lines and wordmark in, so page and picture agree. */
  --lp2-display:   "Comfortaa", ui-rounded, system-ui, sans-serif;
  --lp2-body:      "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --lp2-mono:      "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* rhythm */
  --lp2-gutter:    clamp(20px, 4vw, 48px);
  --lp2-section:   clamp(64px, 7vw, 104px);
  --lp2-max:       1280px;

  /* The browser's default 8px body margin, reset. It was never reset before
     and never showed, because the ground and the margin were the same colour.
     A photographic film at full opacity showed it as a frame around the video
     on all four sides -- and pushed the phone call to action under the fold. */
  margin: 0;
  background: var(--lp2-bg);
  color: var(--lp2-ink-1);
  font-family: var(--lp2-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

.lp2 *,
.lp2 *::before,
.lp2 *::after { box-sizing: border-box; }

.lp2 :where(a) { color: inherit; text-decoration: none; }

.lp2 :focus-visible {
  outline: 2px solid var(--lp2-acc);
  outline-offset: 3px;
}

.lp2__skip {
  position: absolute;
  left: -9999px;
}
.lp2__skip:focus {
  left: var(--lp2-gutter);
  top: 12px;
  z-index: 20;
  padding: 10px 18px;
  background: var(--lp2-raised);
  border: 1px solid var(--lp2-acc);
  color: var(--lp2-acc);
}

/* --- registers ---------------------------------------------------------- */

.lp2-label {                       /* JetBrains Mono 13 / 0.2em, uppercase */
  font-family: var(--lp2-mono);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lp2-ink-3);
  margin: 0;
}
.lp2-meta {                        /* the same register, one step down */
  font-family: var(--lp2-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lp2-ink-3);
  margin: 0;
}
.lp2-note {                        /* a sentence in the mono register */
  font-family: var(--lp2-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  line-height: 1.7;
  color: var(--lp2-ink-3);
  margin: 0;
}
.lp2-body {
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.6;
  color: var(--lp2-ink-2);
  margin: 0;
  max-width: 62ch;
}

.lp2-h1, .lp2-h2, .lp2-h3 {
  font-family: var(--lp2-display);
  font-weight: 700;
  color: var(--lp2-ink-1);
  margin: 0;
}
.lp2-h1 { font-size: clamp(38px, 5.4vw, 82px); line-height: 1.08; letter-spacing: -0.02em; max-width: 16ch; }
.lp2-h2 { font-size: clamp(28px, 3.4vw, 52px); line-height: 1.14; letter-spacing: -0.015em; }
.lp2-h3 { font-size: clamp(20px, 1.6vw, 25px); line-height: 1.24; letter-spacing: -0.005em; }

.lp2-shell {
  max-width: var(--lp2-max);
  margin-inline: auto;
  padding-inline: var(--lp2-gutter);
}

.lp2-section { padding-block: var(--lp2-section); border-top: 1px solid var(--lp2-line); }

/* --- the one action ----------------------------------------------------- */

.lp2-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 17px 34px;
  border: 0;
  border-radius: 999px;
  background: var(--lp2-grad);
  color: var(--lp2-on-grad);
  font-family: var(--lp2-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  transition: transform 0.25s cubic-bezier(.2, .7, .2, 1), opacity 0.18s ease;
}
.lp2-cta svg { display: block; }
.lp2-cta:hover,
.lp2-cta:focus-visible { transform: translateY(-1px); opacity: 0.94; }
/* A ring breathes out of the button, transform and opacity only. */
.lp2-cta::after { content: none; }
@keyframes lp2Ring { 0% { transform: scale(0.96); opacity: 0.8; } 70% { transform: scale(1.16); opacity: 0; } 100% { transform: scale(1.16); opacity: 0; } }
/* A full-width phone CTA has only a 20px gutter. Keep its decorative pulse
   within that space rather than widening the page during the animation. */
@keyframes lp2RingCompact { 0% { transform: scale(.96); opacity: .8; } 70%, 100% { transform: scale(1.04); opacity: 0; } }
@media (max-width: 400px) { .lp2-cta::after { animation-name: lp2RingCompact; } }

/* Sign-in is never a button. A returning member is not this page's job. */
.lp2-quiet {
  font-family: var(--lp2-mono);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lp2-ink-2);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.lp2-quiet:hover,
.lp2-quiet:focus-visible { color: var(--lp2-ink-1); border-bottom-color: rgba(236, 231, 223, 0.4); }

/* --- nav ---------------------------------------------------------------- */

.lp2-nav {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 3;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--lp2-gutter);
}
.lp2-nav__brand {
  font-family: var(--lp2-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.14em;
}
/* baseline, not center. .lp2-quiet carries a 1px transparent underline and 2px
   of padding for its hover state, so centring the boxes set MEMBER SIGN IN
   1.5px higher than the links beside it. On the baseline the text lines up. */
.lp2-nav__links { display: flex; align-items: baseline; gap: clamp(16px, 2.4vw, 36px); }
.lp2-nav__link {
  font-family: var(--lp2-mono);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lp2-ink-3);
  transition: color 0.18s ease;
}
.lp2-nav__link:hover, .lp2-nav__link:focus-visible { color: var(--lp2-ink-1); }
/* ABOVE THE FILM, NOT ON IT. index.html carries the nav in flow, before the
   hero: nothing sits in front of the video, chrome included, and the top of
   the loop is the man's head -- floating, LEARN and TESTING printed across his
   face at 1440. faq and terms keep the absolute version above; only the front
   door has a picture underneath its nav. */
.lp2-nav--flow { position: relative; inset: auto; }
.lp2-nav__toggle { display: none; align-items: center; gap: 12px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--lp2-line); border-radius: 999px; background: var(--lp2-raised); color: var(--lp2-ink-1); font: 14px var(--lp2-body); cursor: pointer; }
.lp2-film-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.lp2-film-controls:has(button:not([hidden])), .lp2-film-controls:has(p:not(:empty)) { margin-bottom: 24px; }
.lp2-film-controls button { cursor: pointer; background: transparent; border: 0; min-height: 44px; }
.lp2-film-controls [hidden] { display: none; }

/* --- hero --------------------------------------------------------------- */

/* A bounded 16:9 film frame keeps the original artwork intact and places
   captions/playback controls beside the film, above the learning journey. */
.lp2-hero { position: relative; width: calc(100% - var(--lp2-gutter) * 2); max-width: 1184px; margin: 24px auto 0; min-height: 0; display: block; }
.lp2-hero__media { position: relative; aspect-ratio: 16 / 9; border-radius: 28px; overflow: hidden; background: var(--lp2-raised); border: 1px solid var(--lp2-line); }
.lp2-hero .lp2-film-controls { min-height: 44px; margin: 0; gap: 18px; padding: 6px 4px 0; }
.lp2-hero .lp2-film-controls button { font: 600 12px var(--lp2-body); letter-spacing: .02em; text-transform: none; }
.lp2-hero__film { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Current space footage and its wordmark use a centered crop. */
/* Visible from the start: the poster is the film's first frame, and playback
   replaces it in place. No fade, because there is nothing to fade from. */
.lp2-hero__film { object-fit: contain; object-position: 50% 50%; background: var(--lp2-bg); cursor: pointer; }
.lp2-hero__film::cue { color: #fff; background: rgba(11, 10, 20, .92); font-family: "Nunito", sans-serif; font-size: clamp(16px, 1.8vw, 26px); }

/* THE FILM IS THE HERO AND NOTHING IS DRAWN ON IT. There used to be a drawn
   vector stand-in under the film that faded once it played; it read as a
   strange graphic in front of the video on load and is gone. The film's own
   poster is the still. */

/* The film box ends on cobbles at every width -- at 1920 the crop even removes
   the darkest tenth of the loop's baked bottom grade -- so a short fade runs
   the footage out into the page ground instead of stopping on a hard edge
   above the section hairline. Edge only: 96px, beneath the copy's z-index. */
.lp2-hero__media::after {
  /* No fade over native captions: their white text must stay fully legible. */
  content: none;
}

.lp2-hero__copy {
  position: relative;
  z-index: 2;
  align-self: flex-end;
  width: 100%;
  padding: 0 var(--lp2-gutter) clamp(56px, 9vw, 128px);
  max-width: calc(var(--lp2-max) + var(--lp2-gutter) * 2);
  margin-inline: auto;
}
.lp2-hero__eyebrow { color: var(--lp2-acc); margin-bottom: 30px; }
.lp2-hero .lp2-body { margin-bottom: 44px; }

/* THE GATE: one button in the middle of the poster, only while the browser is
   refusing sound. The ring breathes like the call to action does. */
.lp2-gate {
  /* low on the picture, under the wordmark, not on it (founder, 2026-09-08) */
  position: absolute; left: 50%; top: 72%; transform: translate(-50%, -50%); z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  background: none; border: 0; padding: 20px; cursor: pointer; color: var(--lp2-ink-1); font: inherit;
}
/* display:flex above would beat the UA's [hidden]; say it explicitly */
.lp2-gate[hidden] { display: none; }
.lp2-gate__ring {
  position: relative; width: 96px; height: 96px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(11, 10, 20, 0.55); border: 1.5px solid rgba(236, 231, 223, 0.7);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), border-color .3s ease;
}
.lp2-gate__ring::after { content: none; }
.lp2-gate:hover .lp2-gate__ring, .lp2-gate:focus-visible .lp2-gate__ring { transform: scale(1.06); border-color: var(--lp2-acc); }
.lp2-gate__t { font-family: var(--lp2-body); font-weight: 600; font-size: 15px; letter-spacing: 0.02em; text-shadow: 0 2px 12px rgba(11, 10, 20, 0.9); }
.lp2-gate:focus-visible { outline: 2px solid var(--lp2-acc); outline-offset: 4px; border-radius: 16px; }

/* --- the lead band and the transcript ------------------------------------
   What used to sit on the picture, beneath it instead: same eyebrow, headline,
   deck and call to action, on the page ground where they are simply text. */
.lp2-lead { padding: clamp(28px, 4vw, 52px) 0 clamp(44px, 5vw, 72px); }
.lp2-lead .lp2-hero__eyebrow { margin-bottom: 26px; }
.lp2-lead .lp2-h1 { margin-bottom: 26px; }
.lp2-lead .lp2-body { margin-bottom: 36px; }
.lp2-start { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.lp2-start > * { min-width: 0; }
.lp2-start .lp2-h1 { font-size: clamp(38px, 4.4vw, 64px); line-height: 1.2; }
.lp2-start .lp2-body { max-width: 36ch; }
.lp2-start__note { margin: 18px 0 0; font-size: 14px; color: var(--lp2-ink-3); }
.lp2-testing-next { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 22px; padding: 20px 24px; border: 1px solid var(--lp2-line); border-radius: 22px; background: var(--lp2-raised); }
.lp2-testing-next .lp2-label { margin: 0 0 6px; color: var(--lp2-acc); }
.lp2-testing-next .lp2-note { margin: 0; max-width: 76ch; font: 14px/1.5 var(--lp2-body); letter-spacing: 0; }
.lp2-testing-next > a { flex-shrink: 0; min-height: 44px; display: inline-flex; align-items: center; gap: 10px; }
#testing { scroll-margin-top: 90px; }
.lp2-next { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 26px; list-style: none; margin: 36px 0 0; padding: 26px 0 0; border-top: 1px solid var(--lp2-line); }
.lp2-next li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: baseline; padding: 0; }
.lp2-next__n { font: 12px var(--lp2-mono); color: var(--lp2-acc); }
.lp2-next h2 { margin: 0 0 6px; font: 700 15px/1.4 var(--lp2-body); }
.lp2-next p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--lp2-ink-2); }
.lp2-next svg { display: none; }
.lp2-nav > .public-language { order: 3; margin-left: 26px; }
.lp2-nav__links { margin-left: auto; }
.lp2-nav__start { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 42px; padding: 0 20px; border: 1px solid rgba(203, 170, 254, .45); border-radius: 999px; font: 600 14px var(--lp2-body); color: var(--lp2-acc); }
.lp2-nav__start:hover { background: var(--lp2-acc-wash); }
.lp2-nav[data-nav] .lp2-nav__links { gap: clamp(16px, 2vw, 28px); align-items: center; }
.lp2-nav[data-nav] .lp2-nav__link, .lp2-nav[data-nav] .lp2-quiet { letter-spacing: .08em; font-size: 12px; }
.lp2-lev { display: flex; align-items: center; gap: 28px; margin: 30px 0; padding: 24px 0; border-block: 1px solid var(--lp2-line); }
.lp2-lev div { display: grid; gap: 8px; }
.lp2-lev strong { font: 700 44px/1 var(--lp2-display); color: var(--lp2-acc); }
.lp2-lev span { font-size: 14px; color: var(--lp2-ink-2); }
.lp2-lev .lp2-lev__arrow { font-size: 30px; padding-inline: 10px; }
.lp2-tr { margin-top: 22px; max-width: 78ch; }
.lp2-tr__s {
  cursor: pointer; min-height: 44px; display: flex; align-items: center;
  font-size: 13px; color: var(--lp2-ink-3);
}
.lp2-tr__s:hover { color: var(--lp2-acc); }
.lp2-tr__l { margin: 10px 0 0; padding-left: 20px; font-size: 13.5px; line-height: 1.66; color: var(--lp2-ink-3); }
.lp2-tr__l li { margin-bottom: 7px; }

/* --- the idea ----------------------------------------------------------- */

.lp2-split {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(32px, 4.5vw, 64px);
  align-items: center;
}
.lp2-split .lp2-label { margin-bottom: 26px; }
.lp2-split .lp2-h2 { margin-bottom: 28px; }
.lp2-chart { width: 100%; height: auto; display: block; }

/* --- the hub: hairlines are 1px grid gaps, never borders ---------------- */

.lp2-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.lp2-card {
  background: rgba(20, 18, 32, 0.66);
  border: 1px solid rgba(236, 231, 223, 0.07);
  border-radius: 22px;
  padding: 46px 38px 54px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 268px;
}
.lp2-card__top { display: flex; justify-content: space-between; align-items: center; }
.lp2-chip {
  font-family: var(--lp2-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 5px 11px;
  border: 1px solid currentColor;
}
.lp2-chip--live { color: var(--lp2-good); }
.lp2-chip--soon { color: var(--lp2-ink-3); }
.lp2-card .lp2-body { font-size: 17px; }

.lp2-hub__intro { margin-bottom: 76px; }
.lp2-hub__intro .lp2-label { margin-bottom: 26px; }
.lp2-hub__intro .lp2-h2 { margin-bottom: 20px; max-width: 20ch; }

/* --- what you get: hairline-divided rows -------------------------------- */

.lp2-rows { display: flex; flex-direction: column; }
.lp2-row {
  display: grid;
  grid-template-columns: 2fr 4fr 6fr;
  gap: clamp(24px, 4.5vw, 64px);
  align-items: baseline;
  padding-block: 44px;
  border-top: 1px solid var(--lp2-line);
}
.lp2-row__n {
  font-family: var(--lp2-display);
  font-weight: 600;
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: -0.02em;
  color: var(--lp2-acc);
}
.lp2-row__h { font-family: var(--lp2-display); font-weight: 400; font-size: clamp(18px, 1.5vw, 22px); letter-spacing: -0.01em; }
.lp2-row .lp2-body { font-size: 18px; }

/* --- close -------------------------------------------------------------- */

.lp2-close { padding-top: clamp(96px, 13vw, 190px); text-align: center; border-top: 1px solid var(--lp2-line); }
.lp2-close__mark {
  font-family: var(--lp2-display);
  font-weight: 700;
  
  /* Sized to run the width of the container, not to a fixed px value: this is
     the ending, and it should reach both edges on every viewport. */
  font-size: clamp(44px, 13.8vw, 210px);
  letter-spacing: 0.07em;
  text-indent: 0.07em;   /* puts the trailing letter-space back on the left */
  line-height: 1;
  margin: 0;
}
.lp2-close .lp2-body { margin: 40px auto 52px; max-width: 46ch; }
.lp2-foot {
  margin-top: clamp(64px, 10vw, 150px);
  border-top: 1px solid var(--lp2-line);
  padding-block: 30px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

/* --- responsive --------------------------------------------------------- */

@media (max-width: 1100px) {
  .lp2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp2-split { grid-template-columns: 1fr; }
  .lp2-row { grid-template-columns: 1fr 5fr; }
  .lp2-row__b { grid-column: 2; }
}

@media (max-width: 760px) {
  .lp2-nav__links > .lp2-nav__link { display: none; }
  .lp2-nav__links > .lp2-quiet { display: inline-block; }
  .lp2-grid { grid-template-columns: 1fr; }
  .lp2-card { min-height: 0; padding: 34px 24px 38px; }

  .lp2-row { grid-template-columns: 1fr; gap: 10px; padding-block: 30px; }
  .lp2-row__b { grid-column: 1; }
  .lp2-proof { padding: 40px 22px; }
  .lp2-foot { flex-direction: column; gap: 10px; }

}

/* Keep the whole film on small screens without a tall letterboxed stage.
   This also brings the first onboarding action into the first phone view. */
@media (max-width: 900px) {
  .lp2-hero { display: block; min-height: 0; }
  .lp2-hero__media { position: relative; inset: auto; height: auto; aspect-ratio: 16 / 9; }
  .lp2-hero__film { object-position: 50% 50%; }
  .lp2-hero__media::after { height: 32px; }
  .lp2-gate { top: auto; bottom: 10px; transform: translateX(-50%); flex-direction: row; gap: 10px; padding: 4px 10px; white-space: nowrap; }
  .lp2-gate__ring { width: 38px; height: 38px; }
  .lp2-gate__ring svg { width: 20px; height: 20px; }
  .lp2-gate__t { font-size: 13px; }
  /* Measured at 390x844 with the nav in flow above the film: the call to
     action ends at 839, above the fold. */
  .lp2-hero__copy { padding-top: 28px; }
  .lp2-hero .lp2-h1 { margin-bottom: 24px; }
  .lp2-hero .lp2-body { margin-bottom: 32px; }
}

/* --- the shoal ---------------------------------------------------------------
   One canvas, fixed behind everything; landing-2026.js draws the school of
   specks on it. The film is opaque so it never shows through the hero. */
#lp2field { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; contain: strict; }
.lp2-shoal { position: absolute; inset: 0; display: block; }
.lp2-nav--flow, .lp2-hero, .lp2-lead, .lp2 > main, .lp2-close { position: relative; z-index: 1; }

/* --- the orb ----------------------------------------------------------------
   The pop-up behind each artefact: a rounded card inside a gradient ring, on a
   dimmed page. Opens with a scale and fade, transform and opacity only. */
/* overflow visible, not the dialog's default auto: the ring sits 1px outside
   the box and the default put a scrollbar on both axes (founder, 2026-09-15). */
.lp2-orb { border: 1px solid rgba(167, 139, 250, .55); border-radius: 30px; padding: 0; background: var(--lp2-raised); max-width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); color: var(--lp2-ink-1); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--lp2-acc) var(--lp2-raised); }
.lp2-orb::backdrop { background: rgba(6, 6, 12, 0.72); }
.lp2-orb[open] .lp2-orb__card { animation: lp2Orb .45s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes lp2Orb { from { opacity: 0; transform: scale(.94) translateY(10px); } to { opacity: 1; transform: none; } }
.lp2-orb__card { position: relative; border-radius: 29px; background: rgba(14, 13, 24, 0.97); padding: 40px 42px 44px; }
.lp2-orb__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.lp2-orb__body p { font-size: 17px; line-height: 1.6; color: var(--lp2-ink-2); margin: 16px 0 0; }
.lp2-orb__cta { margin-top: 30px; }
.lp2-orb__close { position: absolute; top: 14px; right: 16px; width: 40px; height: 40px; border: 0; border-radius: 999px; background: transparent; color: var(--lp2-ink-3); font: 400 26px/1 var(--lp2-body); cursor: pointer; }
.lp2-orb__close:hover { color: var(--lp2-ink-1); }
.lp2-card[role="button"] { cursor: pointer; }
@media (max-width: 760px) { .lp2-orb__card { padding: 30px 24px 34px; } }

/* --- get in touch ------------------------------------------------------- */
.lp2-contact .lp2-label { margin-bottom: 26px; }
.lp2-contact .lp2-h2 { margin-bottom: 18px; }
.lp2-contact__mail { margin: 34px 0 64px; }
.lp2-contact__link { font-family: var(--lp2-display); font-weight: 700; font-size: clamp(26px, 4vw, 56px); letter-spacing: -0.01em; color: var(--lp2-ink-1); border-bottom: 2px solid rgba(167, 139, 250, 0.6); transition: color .18s ease, border-color .18s ease; }
.lp2-contact__link:hover, .lp2-contact__link:focus-visible { color: var(--lp2-grad-a); border-bottom-color: var(--lp2-grad-a); }
.lp2-contact__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.lp2-contact__grid .lp2-h3 { margin-bottom: 12px; }
.lp2-contact__grid .lp2-body { font-size: 17px; }
.lp2-contact__where { margin-top: 64px; }
@media (max-width: 760px) { .lp2-contact__grid { grid-template-columns: 1fr; } }

/* --- reveal on scroll ---------------------------------------------------
   landing-2026.js adds .lp2-reveal to every [data-reveal] element and is-in as
   it enters the viewport. Without JS, or under prefers-reduced-motion, neither
   class is ever added and everything is simply there. Opacity and transform
   only: both composite, nothing lays out, nothing filters. */
.lp2-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.lp2-reveal:not(.is-in) { transition-duration: 0s; }
.lp2-reveal.is-in { opacity: 1; transform: none; }
.lp2-grid .lp2-card:nth-child(2) { transition-delay: .08s; }
.lp2-grid .lp2-card:nth-child(3) { transition-delay: .16s; }
.lp2-grid .lp2-card:nth-child(4) { transition-delay: .24s; }
.lp2-rows .lp2-row:nth-child(2) { transition-delay: .06s; }
.lp2-rows .lp2-row:nth-child(3) { transition-delay: .12s; }
.lp2-rows .lp2-row:nth-child(4) { transition-delay: .18s; }

/* THE IDEA'S FIGURE. Structure is drawn in ink at low alpha; the curve is the
   one violet thing, glowing by a second, wide, faint stroke underneath rather
   than a filter. It draws itself as the chart scrolls in (pathLength="1" makes
   the dash maths unit-free), the area fills behind it, and the crossing marker
   and label arrive once the line has. All of it gated on .lp2-reveal, so that
   without the script the figure is simply complete. The pointer drives a
   scrubber -- a hairline and a dot on the curve, no readout -- via .is-hot. */
.lp2-chart__grid line { stroke: rgba(236, 231, 223, 0.07); stroke-width: 1; }
.lp2-chart__axis { stroke: rgba(236, 231, 223, 0.5); stroke-width: 1.6; }
.lp2-chart__ticks line { stroke: rgba(236, 231, 223, 0.32); stroke-width: 1.2; }
.lp2-chart__xtick { font-family: var(--lp2-mono); font-size: 11px; letter-spacing: 2px; fill: rgba(236, 231, 223, 0.55); }
.lp2-chart__xtick--now { fill: var(--lp2-ink-1); }
.lp2-chart__one { stroke: rgba(236, 231, 223, 0.4); stroke-width: 1.4; stroke-dasharray: 8 12; }
.lp2-chart__tick, .lp2-chart__band, .lp2-chart__axislabel, .lp2-chart__label { font-family: var(--lp2-mono); font-size: 12px; letter-spacing: 2.4px; fill: rgba(236, 231, 223, 0.62); }
.lp2-chart__tick--one { fill: var(--lp2-ink-1); font-size: 14px; }
.lp2-chart__band { fill: rgba(203, 170, 254, 0.85); font-size: 11px; }
.lp2-chart__band--dim { fill: rgba(236, 231, 223, 0.42); }
.lp2-chart__label { fill: var(--lp2-grad-a); }
.lp2-chart__drop { stroke: rgba(167, 139, 250, 0.6); stroke-width: 1.2; stroke-dasharray: 4 6; }
.lp2-chart__ring { fill: none; stroke: rgba(167, 139, 250, 0.7); stroke-width: 2; transform-box: fill-box; transform-origin: center; transition: transform .45s cubic-bezier(.2, .7, .2, 1), opacity .6s ease 1.6s; }
.lp2-chart.is-in .lp2-chart__ring { animation: lp2Pulse 2.8s ease-in-out 2.2s infinite; }
@keyframes lp2Pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }
.lp2-chart__dotc { fill: var(--lp2-ink-1); }
.lp2-chart__cursor { stroke: rgba(236, 231, 223, 0.35); stroke-width: 1; opacity: 0; transition: opacity .25s ease; }
.lp2-chart__dot { fill: var(--lp2-acc); opacity: 0; transition: opacity .25s ease; }
.lp2-chart.is-hot .lp2-chart__cursor, .lp2-chart.is-hot .lp2-chart__dot { opacity: 1; }
.lp2-chart__note { margin-top: 18px; max-width: 60ch; }
.lp2-chart.lp2-reveal .lp2-chart__curve { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.4, 0, .2, 1) .25s; }
.lp2-chart.lp2-reveal:not(.is-in) .lp2-chart__curve { transition-duration: 0s; transition-delay: 0s; }
.lp2-chart.is-in .lp2-chart__curve { stroke-dashoffset: 0; }
.lp2-chart.is-in .lp2-chart__glow { animation: lp2Glow 3.2s ease-in-out 2.2s infinite alternate; }
@keyframes lp2Glow { from { stroke-opacity: 0.16; } to { stroke-opacity: 0.5; } }
.lp2-chart.lp2-reveal .lp2-chart__area { opacity: 0; transition: opacity 1.2s ease 1s; }
.lp2-chart.is-in .lp2-chart__area { opacity: 1; }
.lp2-chart.lp2-reveal .lp2-chart__mark { opacity: 0; transition: opacity .6s ease 1.6s; }
.lp2-chart.is-in .lp2-chart__mark { opacity: 1; }

/* --- the pointer on the artefacts ---------------------------------------
   Violet only where the pointer is. A card carries a radial wash centred on
   --mx / --my, which the script updates on pointermove, and lifts 2px; the
   idea's crossing ring swells under the pointer; a row's heading takes the
   accent. Nothing here animates a filter or a shadow. */
.lp2-card, .lp2-tile, .lp2-news__item { position: relative; overflow: hidden; }
.lp2-card > *, .lp2-tile > *, .lp2-news__item > * { position: relative; }
/* stronger than it was (founder, 2026-09-08: "I liked that") and on every
   plate: the four cards, the tiles, the press pictures and the face */
.lp2-card::before, .lp2-tile::before, .lp2-news__item::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 3;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(167, 139, 250, 0.30), rgba(127, 111, 224, 0.10) 45%, transparent 72%);
  transition: opacity .35s ease;
}
.lp2-card .lp2-h3, .lp2-tile .lp2-h3, .lp2-row__h { transition: color .25s ease; }
@media (hover: hover) {
  .lp2-card, .lp2-tile { transition: opacity .7s ease, transform .5s cubic-bezier(.2, .7, .2, 1); }
  .lp2-card.is-in:hover, .lp2-card:not(.lp2-reveal):hover, .lp2-tile.is-in:hover, .lp2-tile:not(.lp2-reveal):hover { transform: translateY(-2px); }
.lp2-card:hover::before, .lp2-tile:hover::before, .lp2-news__item:hover::before { opacity: 1; }
  .lp2-card:hover .lp2-h3, .lp2-tile:hover .lp2-h3, .lp2-row:hover .lp2-row__h { color: var(--lp2-acc); }
  .lp2-chart:hover .lp2-chart__ring { transform: scale(1.18); }
}

/* A source link inside body copy: underlined, ink, accent on hover. */
.lp2-src { color: var(--lp2-ink-1); border-bottom: 1px solid rgba(236, 231, 223, 0.35); transition: color .18s ease, border-color .18s ease; }
.lp2-src:hover, .lp2-src:focus-visible { color: var(--lp2-acc); border-bottom-color: var(--lp2-acc); }
.lp2-why__h2 { max-width: 24ch; margin-bottom: 56px; }

/* --- why it matters: four tiles with figures --------------------------
   Same hairline grid as the hub. The figures are HTML, not SVG, so their type
   stays real-size at every width; bar widths are modifier classes because the
   markup carries no inline styles. Bars grow on reveal by transform only. */
.lp2-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.lp2-tile { background: rgba(20, 18, 32, 0.66); border: 1px solid rgba(236, 231, 223, 0.07); border-radius: 22px; padding: 46px 38px 50px; display: flex; flex-direction: column; gap: 18px; min-height: 300px; }
.lp2-tile--wide, .lp2-tile--goal { grid-column: 1 / -1; }
.lp2-tile .lp2-body { font-size: 17px; }
.lp2-fig { margin-bottom: 10px; }
.lp2-fig__k { font-family: var(--lp2-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lp2-ink-3); margin: 0 0 12px; }
.lp2-fig__row { display: flex; align-items: center; gap: 18px; margin-bottom: 30px; }
.lp2-fig__row:last-child { margin-bottom: 0; }
.lp2-fig__track { flex: 1 1 auto; height: 10px; border-radius: 999px; background: rgba(236, 231, 223, 0.08); position: relative; overflow: hidden; }
.lp2-fig__bar { display: block; height: 100%; border-radius: 999px; background: var(--lp2-grad); transform-origin: left center; position: relative; overflow: hidden; }
.lp2-fig__bar::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0) 100%); animation: lp2Sweep 3.6s ease-in-out 3s infinite; }
@keyframes lp2Sweep { 0% { transform: translateX(0); } 60%, 100% { transform: translateX(350%); } }
.lp2-fig__bar--six { width: 100%; }
.lp2-fig__bar--five { width: 83.3%; }
.lp2-fig__v { font-family: var(--lp2-display); font-weight: 700; font-size: 17px; letter-spacing: 0; color: var(--lp2-ink-1); margin: 0; white-space: nowrap; }
.lp2-fig__v--dim { font-family: var(--lp2-mono); font-weight: 400; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lp2-ink-3); white-space: normal; text-align: right; }
.lp2-fig__life { display: flex; height: 10px; border-radius: 999px; background: rgba(236, 231, 223, 0.08); overflow: hidden; gap: 3px; }
.lp2-fig__bar--well { width: 86.8%; }
.lp2-fig__lost { display: block; width: 13.2%; height: 100%; border-radius: 999px; background: rgba(236, 231, 223, 0.22); }
.lp2-fig__legend { display: flex; justify-content: space-between; gap: 16px; margin-top: 14px; }
.lp2-fig--cite { border-top: 1px solid var(--lp2-line); padding-top: 18px; }
.lp2-fig__cite { font-family: var(--lp2-mono); font-size: 12.5px; letter-spacing: 0.04em; color: var(--lp2-ink-1); margin: 0 0 12px; }
.lp2-fig__cite--dim { color: var(--lp2-ink-3); }
.lp2-tile__num { font-family: var(--lp2-display); font-weight: 700;  font-size: clamp(44px, 8.5vw, 132px); letter-spacing: 0.03em; line-height: 1; margin: 0 0 8px; font-variant-numeric: tabular-nums; color: var(--lp2-ink-1); }
.lp2-tile--goal { padding-block: 64px; }

/* --- the community tile: the ten million, and the poll ---------------------- */
/* The two columns are fixed shares of the tile: with bare fr tracks the lead
   column stretched to fit "10,000,000" as it counted, so the poll column
   squeezed and the whole tile reflowed under the numeral (founder,
   2026-09-09: "the animation is broken"). minmax(0, …) pins them, and the
   numeral is sized to its own column (container units) so ten digits with
   separators always fit on one line. */
.lp2-community { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.lp2-community__lead { min-width: 0; container-type: inline-size; }
.lp2-community .lp2-h3 { margin: 18px 0 12px; }
.lp2-community .lp2-tile__num { margin-bottom: 8px; font-size: min(clamp(44px, 8.5vw, 132px), 17.5cqw); white-space: nowrap; }
.lp2-poll { margin: 0; }
.lp2-poll fieldset { margin: 0; padding: 0; min-width: 0; border: 0; }
.lp2-poll fieldset[hidden], .lp2-poll__edit[hidden] { display: none; }
.lp2-poll__q { font-family: var(--lp2-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lp2-ink-3); margin: 0 0 12px; }
.lp2-poll__q + .lp2-poll__row { margin-bottom: 26px; }
.lp2-poll__hint { text-transform: none; letter-spacing: 0; font-family: var(--lp2-body); font-size: 13px; color: var(--lp2-ink-3); margin-left: 6px; }
.lp2-poll__row { display: flex; flex-wrap: wrap; gap: 8px; }
.lp2-chipbtn { position: relative; }
.lp2-chipbtn input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.lp2-chipbtn span {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid rgba(236, 231, 223, 0.18); color: var(--lp2-ink-2);
  font-family: var(--lp2-body); font-weight: 600; font-size: 14px;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform .2s ease;
}
.lp2-chipbtn:hover span { border-color: rgba(167, 139, 250, 0.6); }
.lp2-chipbtn input:checked + span { background: var(--lp2-grad); border-color: transparent; color: var(--lp2-on-grad); }
.lp2-chipbtn input:focus-visible + span { outline: 2px solid var(--lp2-acc); outline-offset: 3px; }
.lp2-chipbtn input:disabled + span { opacity: 0.4; }
.lp2-poll__send { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.lp2-poll__email { flex: 1 1 260px; }
.lp2-poll__email input {
  width: 100%; min-height: 48px; padding: 0 18px; border-radius: 999px; box-sizing: border-box;
  background: rgba(236, 231, 223, 0.05); border: 1px solid rgba(236, 231, 223, 0.18); color: var(--lp2-ink-1);
  font-family: var(--lp2-body); font-size: 15px;
}
.lp2-poll__email input::placeholder { color: var(--lp2-ink-3); }
.lp2-poll__email input:focus-visible { outline: 2px solid var(--lp2-acc); outline-offset: 2px; border-color: transparent; }
.lp2-poll__go { min-height: 48px; }
.lp2-poll__go::after { display: none; }
.lp2-poll__note { margin: 14px 0 0; font-size: 14px; color: var(--lp2-ink-2); min-height: 1.4em; }
.lp2-poll__consent { margin: 12px 0 0; color: var(--lp2-ink-3); font-size: 12px; line-height: 1.5; }
.lp2-poll__edit { margin-top: 12px; min-height: 44px; padding: 8px 0; border: 0; background: transparent; cursor: pointer; }
.lp2-poll fieldset:disabled { opacity: .7; }
.lp2-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 900px) { .lp2-community { grid-template-columns: 1fr; } }
/* growth on reveal, gated so the no-script page shows full bars */
.lp2-tile.lp2-reveal .lp2-fig__bar { transform: scaleX(0); transition: transform 2.8s cubic-bezier(.16, 1, .3, 1) .4s; }
.lp2-tile.lp2-reveal:not(.is-in) .lp2-fig__bar { transition-duration: 0s; transition-delay: 0s; }
.lp2-tile.is-in .lp2-fig__bar { transform: scaleX(1); }
.lp2-tile.lp2-reveal .lp2-fig__lost { opacity: 0; transition: opacity .6s ease 1.5s; }
.lp2-tile.is-in .lp2-fig__lost { opacity: 1; }

/* Phones: after the tile rules so source order cannot undo it. The chart's
   type is in SVG units, so it is set larger here to land at about 10px on a
   350px-wide figure; the long band labels and the rotated axis label go. */
@media (max-width: 760px) {
  .lp2-tiles { grid-template-columns: 1fr; }
  .lp2-tile { min-height: 0; padding: 34px 24px 38px; }
  .lp2-fig__legend { flex-direction: column; gap: 6px; }
  .lp2-fig__v--dim { text-align: left; }
  .lp2-chart__band, .lp2-chart__axislabel { display: none; }
  .lp2-chart__tick, .lp2-chart__label { font-size: 26px; letter-spacing: 3px; }
  .lp2-chart__ring { r: 40px; }
}
#why .lp2-label { margin-bottom: 26px; }

/* --- advisor review, 2026-09-07 ------------------------------------------
   Placed last so nothing above can undo it (the field block sets the nav
   back to position: relative). */

/* THE NAV STAYS. Sticky, on a dark glass so it reads over the film and the
   page alike; the film still starts under it, nothing is drawn on the film. */
.lp2-nav--flow {
  position: sticky; top: 0; z-index: 6;
  background: rgba(11, 10, 20, 0.72);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(236, 231, 223, 0.06);
}
/* an in-page link lands under the sticky nav, not behind it */
.lp2-lead, .lp2-section, .lp2-close { scroll-margin-top: 72px; }

/* THE END CARD. On the film's own last frame, only once it has ended. */
.lp2-hero__end {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 22px;
  text-align: center; padding: 0 24px clamp(28px, 9vh, 96px);
  background: none; pointer-events: none;
  visibility: hidden; opacity: 0;
  transition: opacity .9s ease, visibility 0s linear .9s;
}
.lp2-hero__end > * { pointer-events: auto; }
.lp2-hero__media.is-ended .lp2-hero__end { visibility: visible; opacity: 1; transition: opacity .9s ease; }
.lp2-hero__again { background: none; border: 0; border-bottom: 1px solid transparent; cursor: pointer; color: var(--lp2-ink-3); min-height: 44px; }
.lp2-hero__again:hover, .lp2-hero__again:focus-visible { color: var(--lp2-ink-1); border-bottom-color: rgba(236, 231, 223, 0.4); }
@media (max-width: 900px) {
  .lp2-hero__end { top: auto; bottom: 10px; padding: 0 12px; flex-direction: row; justify-content: center; align-items: center; gap: 12px; }
  .lp2-hero__end .lp2-cta { font-size: 12px; padding: 12px 16px; gap: 8px; }
  .lp2-hero__again { font-size: 10px; letter-spacing: .05em; }
}

/* THE STRIP. The offer's loop as one quiet line of five words with a dot
   travelling it and turning back; it sits under the intro copy, and the four
   cards follow with room. */
.lp2-hub__intro .lp2-body { max-width: 62ch; }
.lp2-strip { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 0; list-style: none; margin: 38px 0 0; padding: 0 0 22px; max-width: 900px; }
.lp2-strip__s { font-family: var(--lp2-mono); font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lp2-ink-2); display: flex; align-items: center; }
.lp2-strip__s + .lp2-strip__s::before { content: ""; display: inline-block; width: 34px; height: 1px; margin: 0 14px; background: rgba(236, 231, 223, 0.28); }
.lp2-strip__back { font-family: var(--lp2-body); font-size: 20px; color: var(--lp2-acc); margin-left: 16px; line-height: 1; }
.lp2-strip::after { content: ""; position: absolute; left: 0; bottom: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--lp2-grad); box-shadow: 0 0 12px rgba(167, 139, 250, 0.8); animation: lp2Strip 8s ease-in-out infinite alternate; }
@keyframes lp2Strip { from { left: 0; } to { left: calc(100% - 8px); } }
.lp2-strip::before { content: ""; position: absolute; left: 0; right: 0; bottom: 9px; height: 1px; background: rgba(236, 231, 223, 0.1); }

/* IN THE PRESS. Three linked plates in the cards' own skin. */
.lp2-news__h2 { margin-bottom: 40px; max-width: 20ch; }
.lp2-news { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
/* the paper's own header, kept whole and legible on a light plate */
.lp2-news__pic--paper { background: #f6f3ee; }
.lp2-news__item .lp2-news__pic--paper img { object-fit: contain; object-position: 50% 0; padding: 12px 14px 0; box-sizing: border-box; }   /* outranks the cover rule above */
.lp2-news__item {
  display: flex; flex-direction: column; gap: 16px;
  background: rgba(20, 18, 32, 0.66); border: 1px solid rgba(236, 231, 223, 0.07); border-radius: 22px;
  padding: 40px 34px 46px; color: inherit;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1), border-color .3s ease;
}
.lp2-news__item:hover, .lp2-news__item:focus-visible { transform: translateY(-2px); border-color: rgba(167, 139, 250, 0.55); }
.lp2-news__item .lp2-meta { color: var(--lp2-acc); }
/* the pictures: the publishers' own, sized to the card; the magazine cover is
   shown whole on a plate rather than cropped */
.lp2-news__item { padding-top: 0; overflow: hidden; }
.lp2-news__pic { display: block; margin: -1px -35px 14px; aspect-ratio: 16 / 10; background: rgba(236, 231, 223, 0.04); overflow: hidden; }
.lp2-news__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp2-news__pic--cover { background: radial-gradient(ellipse at 50% 40%, rgba(167, 139, 250, 0.22), rgba(20, 18, 32, 0) 70%); }
.lp2-news__pic--cover img { object-fit: contain; padding: 18px 0 0; }
.lp2-news__item .lp2-meta:first-of-type { margin-top: 12px; }

/* HEALTHSPAN. A connected-health preview, not a biological-age clock.
   Keep the original page ground/shoal. The instrument is a translucent surface,
   not a replacement section background. Values and units are always visible. */
#younger { position: relative; overflow: clip; }
#younger.lp2-section { padding-block: clamp(72px, 8vw, 110px); }
.lp2-healthspan {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px clamp(32px, 6vw, 96px); align-items: center;
}
.lp2-healthspan__copy { position: relative; z-index: 2; }
.lp2-healthspan__copy .lp2-h2 { margin-top: 20px; max-width: 15ch; font-size: clamp(36px, 4.4vw, 64px); }
.lp2-healthspan__copy .lp2-body { margin-top: 26px; max-width: 35ch; }
.lp2-healthspan__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 32px 0 0; }
.lp2-healthspan__stats div { padding-top: 14px; border-top: 1px solid rgba(236, 231, 223, .13); }
.lp2-healthspan__stats dt { max-width: 16ch; font-family: var(--lp2-mono); font-size: 11px; line-height: 1.5; letter-spacing: .04em; text-transform: uppercase; color: var(--lp2-ink-3); }
.lp2-healthspan__stats dd { margin: 10px 0 0; font-family: var(--lp2-display); font-size: 23px; line-height: 1; font-weight: 650; color: var(--lp2-ink-1); }
.lp2-healthspan__stats div:last-child dd { color: var(--lp2-acc); }
.lp2-healthspan__source { margin-top: 18px; }
.lp2-healthspan__qualities { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 28px 0; }
.lp2-healthspan__qualities li { padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(203, 170, 254, .24); color: var(--lp2-acc); font-size: 15px; }
.lp2-age { --age-youth: 0; width: 100%; max-width: 560px; margin: 0 auto; }
.lp2-age__head { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.lp2-age__head h3 { margin: 0; font: 600 15px/1.5 var(--lp2-body); color: var(--lp2-ink-2); }
.lp2-age__portrait { position: relative; width: 100%; max-width: 440px; aspect-ratio: 440 / 560; margin: 10px auto 0; isolation: isolate; mask-image: linear-gradient(#000 0%, #000 84%, transparent 100%); -webkit-mask-image: linear-gradient(#000 0%, #000 84%, transparent 100%); }
.lp2-age__portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.lp2-age__young { opacity: var(--age-youth); }
.lp2-age__control { max-width: 440px; margin: 4px auto 0; }
.lp2-age__control[hidden] { display: none; }
.lp2-age__control > label { display: block; font-size: 14px; color: var(--lp2-ink-2); margin-bottom: 8px; }
.lp2-age__control input { display: block; width: 100%; min-height: 32px; margin: 0; accent-color: var(--lp2-acc); cursor: pointer; }
.lp2-age__ends { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--lp2-ink-2); font-size: 13px; }
.lp2-age__ends button { border: 0; background: none; padding: 10px; min-height: 44px; cursor: pointer; color: var(--lp2-acc); font: 600 13px var(--lp2-body); }
.lp2-age figcaption { max-width: 440px; margin: 12px auto 0; font-size: 12px; line-height: 1.6; color: var(--lp2-ink-3); }

/* On the page ground, like the chart above it: no plate, no border, and the
   drawing in the page's ink rather than a colour (founder, 2026-09-21). */
.lp2-agent { --agent-learn: 0; position: relative; min-width: 0; width: 100%; margin: 0; grid-column: 1 / -1; display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px 48px; padding: clamp(24px, 3vw, 44px); border: 1px solid rgba(203, 170, 254, .16); border-radius: 28px; background: var(--lp2-raised); }
.lp2-agent__head, .lp2-agent__caption { grid-column: 1 / -1; }
.lp2-agent__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 0 6px; }
.lp2-agent__head h3 { margin: 0; color: var(--lp2-ink-1); font: 600 20px/1.25 var(--lp2-display); letter-spacing: -.02em; }
.lp2-agent__badge { flex-shrink: 0; padding: 5px 8px; border: 1px solid rgba(236, 231, 223, .14); border-radius: 100px; color: var(--lp2-ink-2); font: 9px var(--lp2-mono); letter-spacing: .1em; text-transform: uppercase; }
.lp2-agent__stage { display: grid; grid-template-columns: 176px minmax(0, 1fr) 128px; align-items: center; gap: 0 6px; padding: 8px 0 4px; }
.lp2-agent__devices { display: grid; grid-auto-rows: 60px; align-items: center; list-style: none; margin: 0; padding: 0; }
.lp2-agent__devices li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lp2-agent__devices svg { flex: 0 0 auto; width: 22px; height: 22px; fill: none; stroke: var(--lp2-ink-2); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.lp2-agent__devices span { display: grid; min-width: 0; }
.lp2-agent__devices b { font: 600 13px/1.2 var(--lp2-body); color: var(--lp2-ink-1); }
.lp2-agent__devices small { font: 9px/1.5 var(--lp2-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--lp2-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp2-agent__flow { display: block; width: 100%; height: 300px; overflow: visible; }
.lp2-agent__routes path { fill: none; stroke: rgba(236, 231, 223, .22); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
/* Colour lives in the data (founder, 2026-09-22): each device's stream has its
   own hue -- the pulse full, the route a faint tint of it -- while the core and
   the words stay in ink. Five hues from the page's own palette. */
.lp2-agent { --s1: #78c9ff; --s2: #cbaafe; --s3: #5eead4; --s4: #ddb467; --s5: #e98d8d; }
.lp2-agent__packet { filter: drop-shadow(0 0 6px currentColor); }
.lp2-agent__packets circle:nth-child(1) { fill: var(--s1); color: var(--s1); }
.lp2-agent__packets circle:nth-child(2) { fill: var(--s2); color: var(--s2); }
.lp2-agent__packets circle:nth-child(3) { fill: var(--s3); color: var(--s3); }
.lp2-agent__packets circle:nth-child(4) { fill: var(--s4); color: var(--s4); }
.lp2-agent__packets circle:nth-child(5) { fill: var(--s5); color: var(--s5); }
.lp2-agent__routes path:nth-child(1) { stroke: var(--s1); stroke-opacity: .32; }
.lp2-agent__routes path:nth-child(2) { stroke: var(--s2); stroke-opacity: .32; }
.lp2-agent__routes path:nth-child(3) { stroke: var(--s3); stroke-opacity: .32; }
.lp2-agent__routes path:nth-child(4) { stroke: var(--s4); stroke-opacity: .32; }
.lp2-agent__routes path:nth-child(5) { stroke: var(--s5); stroke-opacity: .32; }
.lp2-agent__devices li:nth-child(1) svg { stroke: var(--s1); }
.lp2-agent__devices li:nth-child(2) svg { stroke: var(--s2); }
.lp2-agent__devices li:nth-child(3) svg { stroke: var(--s3); }
.lp2-agent__devices li:nth-child(4) svg { stroke: var(--s4); }
.lp2-agent__devices li:nth-child(5) svg { stroke: var(--s5); }
.lp2-agent__core { position: relative; width: 120px; height: 120px; display: grid; place-items: center; align-content: center; gap: 2px; text-align: center; }
.lp2-agent__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.lp2-agent__track { fill: none; stroke: rgba(236, 231, 223, .16); stroke-width: 1.6; }
.lp2-agent__learn { fill: none; stroke: var(--lp2-ink-1); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - 100 * var(--agent-learn)); transition: stroke-dashoffset 1.2s cubic-bezier(.2, .7, .2, 1); }
.lp2-agent__mark { position: relative; font-size: 20px; line-height: 1; color: var(--lp2-ink-1); animation: lp2AgentBreathe 3.2s ease-in-out infinite; }
.lp2-agent__name { position: relative; font: 600 10px var(--lp2-body); letter-spacing: .18em; color: var(--lp2-ink-1); }
.lp2-agent__name b { color: var(--lp2-ink-2); }
.lp2-agent__state { position: relative; font: 9px var(--lp2-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--lp2-ink-3); }
.lp2-agent[data-agent-state="familiar"] .lp2-agent__state { color: var(--lp2-ink-1); }
@keyframes lp2AgentBreathe { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.12); opacity: 1; } }
.lp2-agent__patterns { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; align-content: center; }
.lp2-agent__patterns li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 18px 0 18px 14px; border-bottom: 1px solid var(--lp2-line); border-left: 2px solid transparent; align-items: baseline; font: 15px/1.45 var(--lp2-body); color: var(--lp2-ink-2); transition: border-color .6s ease, color .6s ease; }
.lp2-agent__patterns li.is-on { border-left-color: var(--lp2-acc); color: var(--lp2-ink-1); }
.lp2-agent__when { font: 9px/1.8 var(--lp2-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--lp2-ink-3); }
.lp2-agent__patterns li.is-on .lp2-agent__when { color: var(--lp2-ink-1); }
.lp2-agent__caption { padding: 14px 0 0; }
.lp2-agent__caption p { margin: 0; font: 11px var(--lp2-mono); letter-spacing: .06em; color: var(--lp2-ink-3); }
.lp2-agent__method { margin-top: 8px; }
.lp2-agent__method summary { cursor: pointer; font: 11px var(--lp2-mono); letter-spacing: .06em; color: var(--lp2-ink-3); }
.lp2-agent__method p { margin: 8px 0 0; font: 12px/1.6 var(--lp2-body); letter-spacing: 0; color: var(--lp2-ink-3); }
@media (max-width: 1050px) {
  .lp2-healthspan { gap: 36px; }
  .lp2-agent { grid-template-columns: 1fr; }
  .lp2-healthspan__copy { max-width: 620px; }
  .lp2-healthspan__copy .lp2-h2 { max-width: none; font-size: clamp(36px, 6vw, 56px); }
  .lp2-healthspan__copy .lp2-h2 br { display: none; }
  .lp2-healthspan__copy .lp2-body { max-width: 50ch; margin-top: 18px; }
  .lp2-healthspan__stats { max-width: 380px; margin-top: 22px; }
}
@media (max-width: 760px) {
  .lp2-healthspan { grid-template-columns: 1fr; }
  .lp2-start { grid-template-columns: 1fr; gap: 34px; }
  .lp2-testing-next { align-items: flex-start; flex-direction: column; padding: 20px; gap: 12px; }
  .lp2-start .lp2-h1 { font-size: clamp(36px, 9vw, 48px); }
  .lp2-next { gap: 14px; margin-top: 24px; padding-top: 20px; }
  .lp2-next li { grid-template-columns: 1fr; gap: 6px; }
  .lp2-next p { display: none; }
  .lp2-next h2 { font-size: 13px; }
  .lp2-agent { gap: 16px; padding: 24px 20px; }
  .lp2-age__head { flex-wrap: wrap; gap: 8px; }
  .lp2-healthspan__copy .lp2-h2 { font-size: 38px; }
  .lp2-agent__head { flex-wrap: wrap; gap: 8px; }
  .lp2-agent__head h3 { font-size: 20px; }
  .lp2-agent__stage { grid-template-columns: 1fr; justify-items: center; gap: 14px; }
  .lp2-agent__devices { grid-auto-rows: auto; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; gap: 6px; }
  .lp2-agent__devices li { flex-direction: column; text-align: center; gap: 6px; }
  .lp2-agent__devices small { display: none; }
  .lp2-agent__flow { display: none; }
  .lp2-agent__patterns li { grid-template-columns: 1fr; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp2-agent__packets { display: none; }
  .lp2-agent__mark { animation: none; }
  .lp2-agent__learn, .lp2-agent__patterns li { transition: none; }
}
@media (max-width: 760px) {
  .lp2-news__pic { margin-inline: -25px; }
}
.lp2-news__item .lp2-h3 { font-size: clamp(20px, 1.7vw, 26px); }
.lp2-news__item .lp2-body { font-size: 17px; }
.lp2-news__note { margin-top: 22px; }
#news .lp2-label { margin-bottom: 26px; }

/* the real chart's year ticks, in the mono the other ticks use */
.lp2-chart__xtick { font-family: var(--lp2-mono); font-size: 12px; letter-spacing: 2px; fill: rgba(236, 231, 223, 0.55); }
.lp2-chart__xtick--now { fill: var(--lp2-ink-1); }

@media (max-width: 1100px) {
  .lp2-news { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp2-news__pic { aspect-ratio: 16 / 7; }
}
@media (max-width: 760px) {
  .lp2-news { grid-template-columns: 1fr; }
  .lp2-chart__xtick { font-size: 24px; letter-spacing: 2px; }
  .lp2-chart__xtick--tight { display: none; }   /* 2000 sat on 2023 at 390 */
  .lp2-chart__label { font-size: 22px; }
  .lp2-news__item { padding: 32px 24px 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .lp2 *, .lp2 *::before, .lp2 *::after { transition-duration: 0.01ms !important; animation: none !important; }
}

/* Only the front-door nav is enhanced; shared legal-page headers keep their
   existing layout. No-JS visitors still receive all links in normal flow. */
@media (max-width: 1100px) {
  .lp2-nav[data-nav] { flex-wrap: wrap; height: auto; min-height: 64px; gap: 0; }
  .lp2-nav[data-nav] .lp2-nav__links { flex-basis: 100%; flex-wrap: wrap; gap: 12px 24px; padding-block: 12px 20px; }
  .lp2-nav[data-nav] .lp2-nav__links > a { display: block; min-height: 44px; align-content: center; }
  .lp2-nav.is-enhanced { z-index: 6; height: 64px; flex-wrap: nowrap; }
  .lp2-nav.is-enhanced .lp2-nav__toggle { display: inline-flex; }
  .lp2-nav > .public-language { order: 0; margin-left: auto; margin-right: 12px; }
  .lp2-nav.is-enhanced .lp2-nav__links { display: none; position: absolute; inset: 100% 0 auto; padding: 16px var(--lp2-gutter) 24px; background: var(--lp2-raised); border-bottom: 1px solid var(--lp2-line); max-height: calc(100dvh - 64px); overflow: auto; }
  .lp2-nav.is-enhanced.is-open .lp2-nav__links { display: grid; gap: 2px; }
}
@media (max-width: 400px) {
  .lp2-nav[data-nav] .lp2-nav__brand { font-size: 17px; letter-spacing: .13em; }
  .lp2-nav[data-nav] > .public-language { margin-right: 8px; }
  .lp2-nav[data-nav] .lp2-nav__toggle { width: 44px; flex-shrink: 0; justify-content: center; padding: 8px; }
  .lp2-nav__toggle [data-pi18n="landing.menu"] {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}