/* --------------------------------------------------------------- the faces
 *
 * FIGTREE, AND ONLY FIGTREE. This page shipped with Syne for display and IBM
 * Plex Mono for metadata, and it came back as "stretched and hard to read".
 * Measured, that is literally true: Syne sets the same sentence 73% wider
 * than a normal UI face, and wide-tracked uppercase mono is not something
 * anybody reads, it is something they skip.
 *
 * The @font-face lives in app.css, which every page already loads, so this
 * file only names the tokens. One variable file, 300-900, 20KB.
 */

.lp {
  /* The ground is a true charcoal rather than a blue-black, so the belts and
     the one accent are the only hues on the page. A near-neutral that is
     very slightly cool reads as chosen; a pure #121212 reads as a default. */
  --ink:      #0c0c0e;
  --ink-2:    #131317;
  --ink-3:    #1a1a20;
  --line:     #24242c;
  --line-2:   #32323c;
  --paper:    #edeef1;
  --paper-2:  #b9bac3;
  --muted:    #82838f;
  /* Used on the primary button, the focus ring, the active tab rule and the
     hover state of a link. That is the whole list, and it is deliberate —
     an accent that appears on twenty things is a background colour. */
  --accent:   #3ba8ff;
  --accent-ink: #04121f;
  --bad:      #ff6b6b;

  --display: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --body:    var(--display);
  /* Kept as a token because a handful of rules name it, but it now resolves
     to the same family — the eyebrows are distinguished by weight, size and
     tracking rather than by being a different kind of letter. */
  --mono:    var(--display);

  /* MACRO SPACE IS A TOKEN, not a number typed at each section. The page is
     built on big gaps — that is most of what separates a page that feels
     expensive from one that feels full. */
  --gap-section: clamp(68px, 7.6vw, 116px);
  --pad-card: clamp(22px, 2.4vw, 34px);
  --shell: 1180px;

  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  /* 1.6 everywhere it is running text. Set here rather than per element so
     nothing is left out. */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.lp *, .lp *::before, .lp *::after { box-sizing: border-box; }
.lp img, .lp svg { max-width: 100%; }

/* Focus is visible and it is the accent, on everything, once. */
.lp :focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px;
}

.lp-shell { width: min(var(--shell), 100% - 48px); margin-inline: auto; }
@media (max-width: 640px) { .lp-shell { width: calc(100% - 32px); } }

/* ---------------------------------------------------------------- type */
.lp h1, .lp h2, .lp h3 {
  font-family: var(--display); font-weight: 800;
  line-height: 1.02; letter-spacing: -0.02em;
  text-wrap: balance; margin: 0;
}
/* SYNE RUNS WIDE, and these were first set as if it did not.
   Measured at 1280px before this: the h1 at 92px in its 620px column wrapped
   to SIX lines, and every section heading at 54px wrapped to six or seven.
   A display face is chosen for the shape of a phrase; a phrase broken over
   seven lines has no shape. Roughly two thirds of the old sizes puts each
   heading on the two lines it was written for. */
/* 45px is a MEASURED ceiling, not a taste call. Syne 800 sets "Every round
   you roll." at 762px when it is 50px tall and 671px at 44px, and the
   headline's column is 699px — so 45px is the largest size at which the
   sentence stays on the one line it is written as. Above that it breaks
   after "round" and the two-tone second line stops reading as a second
   line. If the copy changes, re-measure; do not just raise this. */
/* RE-MEASURED FOR FIGTREE, which replaced Syne and runs ~45% narrower. At
   800/100px with this tracking it sets "Every round you roll." at ~921px,
   so the 699px column holds it on one line up to ~75px. 64px leaves ~110px
   of slack for font fallback; the 45px cap above was Syne's and had been
   leaving a third of the column empty. Same rule as before: if the copy
   changes, re-measure. */
.lp h1 { font-size: clamp(36px, 5vw, 64px); letter-spacing: -0.03em; line-height: 1.0; }
.lp h2 { font-size: clamp(25px, 2.7vw, 35px); line-height: 1.08; }
.lp h3 { font-size: 18px; line-height: 1.2; letter-spacing: -0.01em; }
.lp p  { margin: 0; text-wrap: pretty; }

/* The eyebrow is mono and tracked wide — the one place small caps earn
   their keep, because it labels a section rather than saying anything. */
.lp-eyebrow {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
  display: block; margin-bottom: 18px;
}
.lp-lede { font-size: clamp(16px, 1.35vw, 18.5px); color: var(--paper-2); max-width: 54ch; }
.lp-note { font-size: 13.5px; color: var(--muted); line-height: 1.6; }

/* ------------------------------------------------------------ the shell */
.lp-nav {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px 0 0;
}
.lp-mark { display: flex; align-items: center; gap: 11px; }
.lp-mark b {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: var(--paper); color: var(--ink);
  font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: -.03em;
}
.lp-mark span {
  font-family: var(--display); font-weight: 700; font-size: 16.5px; letter-spacing: -.01em;
}
/* The one link in the nav. Underlined on hover rather than coloured, because
   the accent is spoken for by the button it is meant to point at. */
.lp-signin-link {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--paper-2); text-decoration: none;
  border-bottom: 1px solid var(--line-2); padding-bottom: 3px;
  transition: color .16s ease, border-color .16s ease;
}
.lp-signin-link:hover { color: var(--paper); border-bottom-color: var(--accent); }

/* Visually hidden, still read aloud. The email field has a placeholder, and
   a placeholder is not a label — it disappears the moment somebody types and
   it is not announced as one. */
.lp-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* The scroll target for "Sign in". Offset so the panel is not jammed under
   the top of the window when somebody arrives at it. */
.lp-anchor { display: block; height: 0; scroll-margin-top: 90px; }

/* ------------------------------------------------------------------ hero
 * ASYMMETRIC ON PURPOSE, and the ratio is the point: 1.25fr against 1fr with
 * a wide gutter, rather than two equal columns. Equal columns are what makes
 * a page read as a template — nothing is being emphasised, so the reader has
 * to decide what matters. */
.lp-hero { position: relative; padding: 0 0 clamp(60px, 7vw, 104px); }
.lp-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  /* The gutter is narrower than it looks like it should be, because the left
     column has to hold the headline on the two lines it was written as. */
  gap: clamp(32px, 3.4vw, 56px); align-items: center;
  /* The nav used to sit 104px down with the eyebrow 10px under it, so the
     brand and the first line of the page read as one cramped block. The
     space now goes between them. */
  margin-top: clamp(56px, 8vw, 112px);
}
@media (max-width: 940px) { .lp-hero-grid { grid-template-columns: 1fr; } }

/* `.lp-h1` alone loses to `.lp h1 { margin: 0 }` above (0,1,1 beats
   0,1,0), so this margin never applied and the lede sat flush against the
   headline. Measured on the rendered page, not assumed. */
.lp .lp-h1 { margin-bottom: 26px; }
/* The second line steps back. A two-tone headline gives the sentence a shape
   without needing a second size or a rule under it. */
.lp-h1 em { font-style: normal; color: var(--muted); }
.lp-hero .lp-lede { margin-bottom: 34px; }

/* THE DUAL CTA IS THE REAL FORM, not two buttons that scroll to one.
   Sign in and sign up are the only two things anybody can do here, and
   sending somebody to a second screen to do the thing the first screen was
   already offering is a step that exists to make a layout look tidy. */
.lp-cta {
  position: relative;
  background: var(--ink-2); border: 1px solid var(--line);
  border-radius: 16px; padding: var(--pad-card);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 24px 60px -30px rgba(0,0,0,.9);
}
.lp-tabs { display: flex; gap: 26px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.lp-tabs .auth-tab {
  appearance: none; background: none; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  padding: 0 0 13px; margin-bottom: -1px;
  border-bottom: 1.5px solid transparent; transition: color .18s ease;
}
.lp-tabs .auth-tab:hover { color: var(--paper-2); }
.lp-tabs .auth-tab.is-active { color: var(--paper); border-bottom-color: var(--accent); }

/* The panes app.js toggles. Kept as display rather than visibility so a
   hidden pane's fields are not tabbable. */
.lp .auth-pane, .lp .role-pane { display: none; }
.lp .auth-pane.is-active, .lp .role-pane.is-active { display: block; }

/* EVERY input type this page uses, named — and NOT wrapped in `:where()`.
   Two things went wrong here, one after the other, and both are worth the
   space.

   First the rule listed `text` and `email` and nothing else, so the gate's
   `type="password"` rendered as a bare native box beside fields that looked
   designed. Adding the type fixed that.

   Then `:where()` was used to keep the specificity low and polite, which
   handed the fields straight back to app.css: that file still carries
   `.auth-pane input` at (0,1,1) from before the landing page had its own
   stylesheet, and `:where()` had dropped this to (0,1,0). Measured — the
   inputs were painting app.css's `--surface-2` and an 11px radius, neither
   of which appears in this file.

   So: plain selectors at (0,1,1), and landing.css is linked after app.css,
   so an exact tie resolves here. The real fix is deleting app.css's dead
   landing rules, which is its own change. */
.lp-field,
.lp input[type="text"], .lp input[type="email"], .lp input[type="password"],
.lp input[type="search"], .lp input[type="url"], .lp input[type="tel"],
.lp select {
  width: 100%; font: inherit; font-size: 15.5px;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--line-2); border-radius: 10px;
  padding: 13px 14px; margin-bottom: 10px;
}
.lp input::placeholder { color: #61626d; }
.lp select { cursor: pointer; }
.lp .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 420px) { .lp .two { grid-template-columns: 1fr; gap: 0; } }

.lp .btn {
  width: 100%; font-family: var(--display); font-weight: 700; font-size: 15.5px;
  letter-spacing: -.005em; border: 1px solid transparent; border-radius: 10px;
  padding: 14px 18px; cursor: pointer; margin-top: 4px;
  transition: filter .16s ease, transform .16s ease;
}
.lp .btn.primary { background: var(--accent); color: var(--accent-ink); }
.lp .btn.primary:hover { filter: brightness(1.08); }
.lp .btn.primary:active { transform: translateY(1px); }
.lp .hint { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin: 12px 0 0; }
.lp .err { font-size: 13px; color: var(--bad); margin: 10px 0 0; }
.lp .joincode {
  font-family: var(--mono); font-size: 26px; font-weight: 500; letter-spacing: .14em;
  text-align: center; margin: 8px 0; color: var(--accent);
}

/* The fork inside "I'm new here". Two panels, not a select. */
.lp-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 18px; }
@media (max-width: 480px) { .lp-roles { grid-template-columns: 1fr; } }
.lp-roles .role {
  text-align: left; cursor: pointer; font: inherit; color: var(--muted);
  background: var(--ink); border: 1px solid var(--line-2); border-radius: 11px;
  padding: 13px 14px; transition: border-color .16s ease, color .16s ease;
}
.lp-roles .role strong {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: 14.5px; color: var(--paper-2); margin-bottom: 2px;
}
.lp-roles .role em { font-style: normal; font-size: 12px; line-height: 1.45; display: block; }
.lp-roles .role:hover { border-color: var(--line-2); color: var(--paper-2); }
.lp-roles .role.is-active { border-color: var(--accent); color: var(--paper-2); }
.lp-roles .role.is-active strong { color: var(--paper); }
.lp .code-block { margin-bottom: 4px; }

/* ------------------------------------------------------------- the phone */
.lp-shot { display: grid; place-items: center; padding-top: 6px; }
.lp-phone {
  width: min(258px, 100%); border-radius: 30px; padding: 9px;
  background: linear-gradient(170deg, #26262e, #101014);
  border: 1px solid var(--line-2);
  box-shadow: 0 44px 90px -38px rgba(0,0,0,.95);
}
.lp-screen { background: var(--ink); border-radius: 23px; padding: 15px 13px 18px; }
.lp-ps-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.lp-ps-head span:first-child {
  font-family: var(--display); font-weight: 700; font-size: 14px;
}
.lp-ps-belt { width: 26px; height: 6px; border-radius: 2px; background: var(--b, #6b46c1); }
.lp-ps-card { border: 1px solid var(--line); border-radius: 11px; overflow: hidden; margin-bottom: 13px; }
.lp-ps-thumb { position: relative; aspect-ratio: 16/9; background: #15151b; }
.lp-ps-thumb svg { width: 100%; height: 100%; display: block; }
.lp-ps-dur {
  position: absolute; right: 7px; bottom: 6px; font-family: var(--mono);
  font-size: 9.5px; background: rgba(0,0,0,.7); padding: 1px 5px; border-radius: 4px;
}
.lp-ps-meta { padding: 8px 10px 9px; }
.lp-ps-meta strong { display: block; font-family: var(--display); font-weight: 700; font-size: 12.5px; }
.lp-ps-meta span { font-size: 10.5px; color: var(--muted); }
.lp-ps-bar { margin-bottom: 9px; }
.lp-ps-bar i {
  display: block; height: 5px; border-radius: 3px; background: var(--line-2); margin-bottom: 4px;
}
.lp-ps-bar i::after { content: ""; display: block; height: 100%; border-radius: 3px; background: var(--accent); width: var(--w); }
.lp-ps-bar em { font-style: normal; font-family: var(--mono); font-size: 9.5px; color: var(--muted); }

/* --------------------------------------------------------- the belt rail
 * The only real colour on the page, and it is the sport's own. A rail rather
 * than five objects on a shelf: it reads as a scale, which is what a belt
 * order is. */
.lp-belts { display: flex; gap: 0; margin-top: clamp(44px, 6vw, 76px); border-radius: 3px; overflow: hidden; }
.lp-belts i { display: block; height: 7px; flex: 1; background: var(--b); }
.lp-belts i:last-child { position: relative; }
.lp-belts i:last-child::after {
  content: ""; position: absolute; inset: 0 0 0 auto; width: 26%; background: #b3202e;
}

/* --------------------------------------------------------------- sections */
.lp-section { padding-block: var(--gap-section); }
.lp-section + .lp-section { padding-top: 0; }
/* A px measure, not `ch`. `ch` resolves against THIS element's font — the
   body face — while the thing inside it is a display heading three times the
   size, so 46ch produced a 416px box holding 54px type. That is how a
   heading ends up seven lines tall. */
.lp-head { max-width: 640px; margin-bottom: clamp(30px, 3.4vw, 52px); }
.lp-head h2 { margin-bottom: 16px; }

/* ------------------------------------------------------------------ quote
 * Set large and given a whole section, because it is the one piece of the
 * page that is not us talking about ourselves. */
.lp-quote { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: clamp(52px, 6.5vw, 96px); }
.lp-quote blockquote { margin: 0; max-width: 660px; }
.lp-quote p {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(26px, 3.3vw, 44px); line-height: 1.1; letter-spacing: -.02em;
  margin-bottom: 26px;
}
.lp-quote cite { font-style: normal; font-size: 13px; color: var(--muted); display: block; line-height: 1.6; }
.lp-quote cite em { font-style: italic; color: var(--paper-2); }

/* ------------------------------------------------------------------ bento
 * A real bento: the spans are not decoration, they are how much each cell
 * has to say. The wide cell carries the coach's case, which is the longest
 * and the one a buyer reads; the tall cell carries the breakdown, which is
 * a picture rather than a paragraph. */
.lp-bento {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px; grid-auto-rows: minmax(0, auto);
}
.lp-cell {
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 16px;
  padding: var(--pad-card); position: relative; overflow: hidden;
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.lp-cell:hover { border-color: var(--line-2); background: var(--ink-3); transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .lp-cell:hover { transform: none; } }
.lp-cell h3 { margin-bottom: 11px; }
.lp-cell p { font-size: 14.5px; color: var(--muted); }
.lp-cell .lp-ico { width: 22px; height: 22px; color: var(--paper-2); margin-bottom: 18px; display: block; }
.lp-cell .lp-ico svg { width: 100%; height: 100%; display: block; }

.lp-cell.is-wide  { grid-column: span 2; }
.lp-cell.is-tall  { grid-column: span 2; grid-row: span 2; }
@media (max-width: 900px) {
  .lp-bento { grid-template-columns: repeat(2, 1fr); }
  .lp-cell.is-tall { grid-row: span 1; }
}
@media (max-width: 560px) {
  .lp-bento { grid-template-columns: 1fr; }
  .lp-cell.is-wide, .lp-cell.is-tall { grid-column: span 1; }
}

/* The breakdown inside the tall cell — the real position keys, so the page
   is not promising a screen that does not exist. */
.lp-tracks { margin-top: 22px; display: grid; gap: 15px; }
.lp-track { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: baseline; }
.lp-track b { font-family: var(--body); font-weight: 500; font-size: 13.5px; color: var(--paper-2); }
.lp-track span {
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.lp-track i { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--line-2); display: block; }
.lp-track i::after { content: ""; display: block; height: 100%; border-radius: 2px; background: var(--paper-2); width: var(--w); }
.lp-track.is-bottom i::after { background: #d99a3f; }
.lp-track.is-top i::after { background: var(--accent); }

/* --------------------------------------------------------------- the steps
 * NUMBERED BECAUSE IT IS ACTUALLY A SEQUENCE. The numbers carry information
 * — you cannot mark a round before the camera has cut it — which is the only
 * reason to number anything. */
.lp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 40px); counter-reset: s; list-style: none; padding: 0; margin: 0; }
@media (max-width: 860px) { .lp-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .lp-steps { grid-template-columns: 1fr; } }
.lp-steps li { counter-increment: s; border-top: 1px solid var(--line-2); padding-top: 18px; }
.lp-steps li::before {
  content: "0" counter(s);
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .12em;
  color: var(--accent); display: block; margin-bottom: 14px;
}
.lp-steps strong { display: block; font-family: var(--display); font-weight: 700; font-size: 17px; margin-bottom: 8px; }
.lp-steps p { font-size: 14px; color: var(--muted); }

/* -------------------------------------------------------------- cameras */
.lp-cams { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 860px) { .lp-cams { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- final CTA
 * Distraction-free: one heading, one line, one button, and no navigation
 * out of it. */
.lp-final {
  text-align: center; padding-block: clamp(84px, 10vw, 150px);
  border-top: 1px solid var(--line);
}
.lp-final h2 { max-width: 620px; margin-inline: auto; margin-bottom: 20px; }
.lp-final .lp-lede { margin-inline: auto; margin-bottom: 34px; text-align: center; }
.lp-final .lp-go {
  display: inline-block; width: auto; text-decoration: none;
  padding: 16px 38px; font-size: 16.5px;
}

/* ----------------------------------------------------------------- footer */
.lp-foot {
  border-top: 1px solid var(--line); padding: 34px 0 60px;
  display: flex; justify-content: space-between; gap: 26px; flex-wrap: wrap;
}
.lp-foot p { font-size: 13px; color: var(--muted); max-width: 46ch; line-height: 1.6; }
.lp-foot strong { color: var(--paper-2); font-weight: 600; }

/* ------------------------------------------------------- the background
 * A mat in one-point perspective, drawn rather than fetched. It is the one
 * piece of scenery this product can honestly claim — it is the room the
 * whole thing happens in — and it is the "dynamic background element" the
 * hero is composed around. Masked out before it reaches any text. */
.lp-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.lp-bg svg { position: absolute; left: 50%; bottom: -8%; width: 168%; transform: translateX(-50%); }
.lp-hero > .lp-shell { position: relative; z-index: 1; }

/* ------------------------------------------------------- password sign-in
 * The "email me a link instead" route sits under the button as a sentence
 * rather than as a second button. Two buttons of equal weight make somebody
 * choose before they know the difference; a sentence is the escape hatch
 * being available without being offered. */
.lp-alt { margin-top: 14px; }
.lp-linkish {
  background: none; border: 0; padding: 0; font: inherit;
  color: var(--paper-2); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--line-2);
}
.lp-linkish:hover { color: var(--paper); text-decoration-color: var(--accent); }
#password-gym { margin-top: 2px; }

/* ------------------------------------------------------ the password gate
 * A whole screen rather than a dialog, so it gets a screen's proportions. */
.lp-gate {
  min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
  max-width: 560px; padding-block: 56px; gap: 0;
}
.lp-gate .lp-mark { margin-bottom: clamp(28px, 5vh, 52px); }
.lp-gate h1 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 18px; }
.lp-gate .lp-lede { margin-bottom: 30px; }
.lp-gate-label { display: block; font-size: 13.5px; color: var(--muted); margin-bottom: 9px; }
.lp-gate-label strong { color: var(--paper-2); font-weight: 600; }
.lp-gate-note { margin-top: 22px; }
.lp-gate-note a { color: var(--paper-2); text-underline-offset: 3px; }
.lp-gate-note a:hover { color: var(--accent); }

/* --------------------------------------------------------- touches, v2
 * Matching the signed-in app: the eyebrow is the same pill as the app's, the
 * sign-in panel carries a single accent hairline, and the phone shows the
 * app as it now looks — the newest round large with a Watch button — rather
 * than an icon standing in for footage.
 */
.lp-hero .lp-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content;
  padding: 6px 12px; border-radius: 999px; margin-bottom: 22px;
  color: var(--accent); background: rgba(59,168,255,.08);
  border: 1px solid rgba(59,168,255,.24);
}
.lp-hero .lp-eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px var(--accent);
}
.lp-cta::before {
  content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .7;
}
.lp-cta { box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 30px 80px -34px rgba(59,168,255,.28), 0 24px 60px -30px rgba(0,0,0,.9); }

.lp-phone { width: min(276px, 100%); transform: rotate(-2deg); }
.lp-ps-h { margin-top: 0; font-family: var(--display); font-weight: 800; font-size: 17px; line-height: 1.05; letter-spacing: -.03em; margin: 2px 0 12px; }
.lp-ps-h em { display: block; font-style: normal; color: var(--muted); }
.lp-ps-card { background: #17171c; box-shadow: 0 10px 24px -14px rgba(0,0,0,.9); }
.lp-ps-thumb .lp-ps-play {
  position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%; background: rgba(255,255,255,.18); display: grid; place-items: center;
  backdrop-filter: blur(3px);
}
.lp-ps-play::after {
  content: ""; margin-left: 2px; border-left: 9px solid #fff;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
.lp-ps-meta .lp-ps-pill {
  display: inline-block; font-family: var(--mono); font-size: 8px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
  border: 1px solid rgba(59,168,255,.3); background: rgba(59,168,255,.08);
  border-radius: 999px; padding: 2px 7px; margin-bottom: 5px;
}
.lp-ps-meta .lp-ps-watch {
  display: block; width: fit-content; margin-top: 8px; font-size: 10px; font-weight: 700;
  background: var(--accent); color: var(--accent-ink); border-radius: 999px; padding: 5px 11px;
}
.lp-ps-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 13px; }
.lp-ps-mini span {
  aspect-ratio: 16/10; border-radius: 7px; border: 1px solid var(--line);
  background: linear-gradient(180deg, #2a2b31 0 34%, #5d6068 34% 100%);
  position: relative; overflow: hidden;
}
.lp-ps-mini span::after {
  content: ""; position: absolute; left: 40%; bottom: 26%; width: 20%; height: 12%;
  border-radius: 40%; background: #34363d;
}
@media (max-width: 940px) { .lp-phone { transform: none; } }
@media (prefers-reduced-motion: reduce) { .lp-phone { transform: none; } }
.lp-ps-head { justify-content: flex-end; margin-bottom: 6px; }

/* ------------------------------------------------------------- revision 3
 * The coach's cell runs the full width now that the bento has six cells:
 * two rows of two beside the tall breakdown, then this one underneath. */
.lp-cell.is-full { grid-column: 1 / -1; }
.lp-cell.is-full p { max-width: 78ch; }

/* Questions. Native <details>, so it opens without JavaScript and is a
   keyboard control for free. The heading sits beside the list on a wide
   screen, which is how a short FAQ avoids a lonely column of text. */
.lp-faq-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
@media (max-width: 860px) { .lp-faq-wrap { grid-template-columns: 1fr; } }
.lp-faq { border-top: 1px solid var(--line); }
.lp-faq details { border-bottom: 1px solid var(--line); }
.lp-faq summary {
  list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative;
  font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--paper);
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px;
  margin-top: -7px; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted);
  transform: rotate(45deg); transition: transform .2s ease;
}
.lp-faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.lp-faq summary:hover { color: var(--accent); }
.lp-faq details p { color: var(--paper-2); font-size: 15.5px; max-width: 62ch; padding: 0 0 22px; }
@media (prefers-reduced-motion: reduce) { .lp-faq summary::after { transition: none; } }

/* The quote is the one big line on the page that is not about the product. */
.lp-quote { text-align: center; }
.lp-quote blockquote { margin-inline: auto; max-width: 820px; }
.lp-quote p { font-size: clamp(30px, 4.4vw, 58px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }