/*
  THE LANDING PAGE, V2, AS THE OWNER APPROVED IT (30 October 2026; the canvas
  UToKjRjo, its Main board): an ink hero with the real dashboard in a browser
  frame and Home on a phone, then bands of paper and ink in turn, each with
  real screens from the Meridian Alliance demo. Ink for the dark bands and the
  chosen role; the orange only for the buttons that start something, the
  chosen core area and the ticks.

  A FILE OF ITS OWN, LINKED BY THE PAGE THAT USES IT, NOT A MODULE. Home's
  route serves both the landing page and the signed-in Home, and a stylesheet
  imported by the landing page's code went out with Home's to every person
  opening Home on a phone: as a CSS module it put Home over the phone budget
  (scripts/check-phone-budget.mjs). Linked from the landing page
  (components/site/landing.tsx, with React's precedence, so it is in the head
  before anything is painted), it is fetched only by a visitor who sees the
  landing page. Every class is "lp-" and named in components/site/
  landing-classes.ts, which a test holds to this file.

  Its colors are the house's tokens (app/globals.css) wherever the design and
  the house agree, so the paper bands turn dark with the product; the few it
  needs of its own are named --lp-* here, with their dark answers below, and a
  test reads every pair for contrast (tests/the-landing-page-says-what-the-
  product-does). The screens themselves are light, as the product is by
  default, so their browser frames stay light in both modes. Type is in rem,
  so a reader's text size moves it.

  NO SCRIPT, as batch 2Y had it.
  1. Reveal on scroll: a section's parts rise into place as they come into
     view, by a scroll-driven animation; they are never hidden while they wait,
     and the hero's words never move at all (they are what the page paints
     first). Where the browser has no scroll timeline, or the visitor asked for
     less motion, everything is simply in place.
  2. The core tabs and the role switcher are radio buttons, each followed by
     its label; :has shows the chosen panel. A browser without :has shows
     every panel, so nothing is lost there.
*/

/* ── 0. The page's own tokens ─────────────────────────────────────────── */

.lp-page {
  --lp-ink: var(--brand-navy);
  --lp-ink-2: #13233d;
  --lp-ink-3: #1d3150;
  --lp-on-ink: #eef3fa;
  --lp-on-ink-muted: #a9b9cf;
  --lp-line-ink: #2a4064;
  --lp-orange: var(--brand-orange);
  /* Words on the orange: ink, never white (white on it is 2.6:1). */
  --lp-on-orange: #1a0d02;
  /* The phone band's ground, a breath off the page's. */
  --lp-soft: #f4f7fb;
  --lp-shadow: 0 18px 50px rgb(10 22 40 / 0.1);
  --lp-display: var(--font-landing-display), "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --lp-gutter: clamp(1rem, 4vw, 3rem);
  --lp-max: 75rem;

  flex: 1;
  background: var(--background);
  color: var(--foreground);
  font-size: 1rem;
  line-height: 1.6;
  /* The skip link focuses <main> itself; the ring belongs on what is inside it. */
  outline: none;
}

/* A section a link jumps to lands below the sticky header, not under it. */
.lp-page [id] {
  scroll-margin-top: 4.5rem;
}

/* The visitor's explicit dark choice, and the machine's when they made none (app/globals.css). */
html.dark .lp-page {
  --lp-soft: #101a2b;
  --lp-shadow: 0 18px 50px rgb(0 0 0 / 0.4);
}

@media (prefers-color-scheme: dark) {
  html:not(.light) .lp-page {
    --lp-soft: #101a2b;
    --lp-shadow: 0 18px 50px rgb(0 0 0 / 0.4);
  }
}

.lp-page h1,
.lp-page h2,
.lp-page h3 {
  font-family: var(--lp-display);
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
  letter-spacing: -0.015em;
}

.lp-page p {
  margin: 0;
}

.lp-wrap {
  width: 100%;
  max-width: var(--lp-max);
  margin-inline: auto;
  padding-inline: var(--lp-gutter);
}

.lp-band {
  padding-block: clamp(3.5rem, 8vw, 5.5rem);
}

.lp-ink {
  background: var(--lp-ink);
  color: var(--lp-on-ink);
}

.lp-soft {
  background: var(--lp-soft);
}

.lp-eyebrow {
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-foreground);
}

.lp-ink .lp-eyebrow,
.lp-hero .lp-eyebrow {
  color: var(--lp-orange);
}

.lp-lede {
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  color: var(--muted-foreground);
  max-width: 62ch;
  line-height: 1.55;
}

.lp-ink .lp-lede,
.lp-hero .lp-lede {
  color: var(--lp-on-ink-muted);
}

/* "Also in this area", "Used by", "Imports": a small label above what it names. */
.lp-small {
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 1.375rem;
  border-radius: 0.75rem;
  font-weight: 650;
  font-size: 1rem;
  text-decoration: none;
  border: 1px solid transparent;
}

.lp-btnPrimary {
  background: var(--lp-orange);
  color: var(--lp-on-orange);
}

.lp-btnPrimary:hover {
  filter: brightness(1.05);
}

.lp-btnGhost {
  border-color: var(--lp-line-ink);
  color: var(--lp-on-ink);
}

.lp-btnGhost:hover {
  border-color: var(--lp-on-ink-muted);
}

/*
  THE FOCUS RING AND A CHOSEN TAB'S EDGE: the deep orange on the paper, where
  the bright one is 2.6:1 and a ring or an edge needs 3:1 (WCAG 1.4.11; the
  review of 30 October 2026), and the bright orange on the ink, where it
  reads.
*/
.lp-page :focus-visible {
  outline: 3px solid var(--accent-foreground);
  outline-offset: 2px;
}

.lp-ink :focus-visible,
.lp-hero :focus-visible {
  outline-color: var(--lp-orange);
}

/* A section's head: its eyebrow, heading and line. */
.lp-head {
  display: grid;
  gap: 0.875rem;
  max-width: 48rem;
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

.lp-headTight {
  margin-bottom: 0;
}

.lp-head h2,
.lp-final h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 750;
  line-height: 1.06;
}

.lp-ticks {
  list-style: none;
  padding: 0;
  margin: 1.125rem 0 0;
  display: grid;
  gap: 0.75rem;
}

/* A tick drawn in the orange: two borders of a turned box, no picture to fetch. */
.lp-ticks li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--foreground);
  line-height: 1.5;
}

.lp-ticks li::before {
  content: "";
  position: absolute;
  left: 0.3rem;
  top: 0.3em;
  width: 0.4375rem;
  height: 0.8125rem;
  border: solid var(--lp-orange);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

.lp-ink .lp-ticks li {
  color: var(--lp-on-ink-muted);
}

/* ── 1. Screens: a browser frame, a phone, and the picture in it ─────── */

.lp-browser {
  border-radius: 0.875rem;
  overflow: hidden;
  border: 1px solid var(--border);
  /* The screens are light, so is their frame, in both modes. */
  background: #ffffff;
  box-shadow: var(--lp-shadow);
}

.lp-ink .lp-browser,
.lp-hero .lp-browser {
  border-color: var(--lp-line-ink);
  box-shadow: 0 30px 80px rgb(0 0 0 / 0.45);
}

.lp-browserBar {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5625rem 0.75rem;
  background: #e9eef5;
}

.lp-dots {
  display: inline-flex;
  gap: 0.375rem;
}

.lp-dots i {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: #c3cddb;
}

.lp-url {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  color: #4b5a70;
  background: #ffffff;
  border-radius: 0.375rem;
  padding: 0.1875rem 0.625rem;
}

.lp-shot {
  display: block;
  width: 100%;
  height: auto;
}

.lp-phone {
  border-radius: 1.875rem;
  border: 8px solid var(--lp-ink);
  overflow: hidden;
  background: #ffffff;
  box-shadow: var(--lp-shadow);
}

/* On the ink, the phone's own edge is a shade lighter than the band, so it reads as a phone. */
.lp-ink .lp-phone,
.lp-hero .lp-phone {
  border-color: #1c2a44;
}

/* ── 2. The hero ──────────────────────────────────────────────────────── */

.lp-hero {
  background: var(--lp-ink);
  color: var(--lp-on-ink);
  padding-block: clamp(3rem, 7vw, 4.5rem) clamp(3.5rem, 8vw, 5.5rem);
  overflow: hidden;
}

.lp-heroGrid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}

@media (max-width: 960px) {
  .lp-heroGrid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.lp-heroText {
  display: grid;
  gap: 1.375rem;
}

.lp-hero h1 {
  font-size: clamp(2.5rem, 5.4vw, 4.125rem);
  font-weight: 750;
  line-height: 1.02;
  letter-spacing: -0.02em;
}

/* The heading's last sentence, on a line of its own. */
.lp-line {
  display: block;
}

.lp-hero .lp-lede {
  font-size: clamp(1.0625rem, 1.7vw, 1.1875rem);
  color: #c5d0e0;
}

.lp-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.lp-fine {
  font-size: 0.875rem;
  color: var(--lp-on-ink-muted);
}

/* Units at any depth: the top one solid, a chevron between each, the last dashed. A wrap may end a line on a chevron, never start one hanging. */
.lp-depth {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
}

.lp-depth li {
  padding: 0.3125rem 0.625rem;
  border-radius: 999px;
  border: 1px solid var(--lp-line-ink);
  color: var(--lp-on-ink);
}

.lp-depth .lp-depthSep {
  padding: 0;
  border: 0;
  color: var(--lp-orange);
}

.lp-hero .lp-depthTop {
  background: var(--lp-orange);
  border-color: var(--lp-orange);
  color: var(--lp-on-orange);
  font-weight: 700;
}

.lp-hero .lp-depthMore {
  border-style: dashed;
  color: var(--lp-on-ink-muted);
}

.lp-heroVisual {
  position: relative;
  padding-bottom: 2.5rem;
  padding-right: 0.5rem;
  min-width: 0;
}

/* Home on a phone, beside the dashboard and a little over it. */
.lp-heroPhone {
  position: absolute;
  right: -0.25rem;
  bottom: 0;
  width: 10.5rem;
  border-width: 7px;
  border-radius: 1.625rem;
}

@media (max-width: 600px) {
  .lp-heroPhone {
    width: 6.75rem;
    border-width: 5px;
    border-radius: 1.125rem;
  }
}

/* "Strategy — System — Structure": each dash drawn as a short line, its words kept for a screen reader. */
.lp-dash {
  position: relative;
  display: inline-block;
  width: 1.375rem;
  height: 2px;
  margin: 0 0.625rem;
  vertical-align: middle;
  background: var(--lp-orange);
  color: var(--lp-on-orange);
}

.lp-dash > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── 3. The numbers ───────────────────────────────────────────────────── */

.lp-strip {
  border-bottom: 1px solid var(--border);
  background: var(--card);
}

.lp-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.25rem 1.75rem;
  padding-block: 1.75rem;
  /* Only the list's own top and bottom: .lp-wrap centres the strip on the page's
     width, and a whole `margin: 0` here undid it, pinning the numbers to the left edge. */
  margin-block: 0;
}

@media (max-width: 860px) {
  .lp-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.lp-stat {
  margin: 0;
}

.lp-stat dt {
  display: block;
  font-family: var(--lp-display);
  font-size: clamp(1.625rem, 3vw, 2.125rem);
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.lp-stat dd {
  margin: 0.125rem 0 0;
  font-size: 0.9375rem;
  color: var(--muted-foreground);
  line-height: 1.4;
}

/* ── 3½. Every module, by strategy, system and structure ──────────────── */

/*
  THREE ROWS, ONE FOR EACH S (the owner, 30 October 2026): the columns were
  uneven and left empty space. Each row is a card: its panel on the ink at
  the left, its modules filling the width; a short orange line joins one row
  to the next, under the panels. On a phone the panel stands above its
  modules.
*/
.lp-s3Stack {
  display: flex;
  flex-direction: column;
}

.lp-s3Row {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--border);
  border-radius: 1rem;
  overflow: hidden;
  background: var(--card);
}

.lp-s3Head {
  flex: 0 0 17.5rem;
  max-width: 100%;
  padding: 1.625rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.lp-s3Head h3 {
  font-size: 1.75rem;
  font-weight: 750;
  line-height: 1.1;
}

.lp-s3Kicker {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-foreground);
}

.lp-ink .lp-s3Kicker {
  color: var(--lp-orange);
}

.lp-s3Follow {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--muted-foreground);
}

.lp-ink .lp-s3Follow {
  color: var(--lp-on-ink-muted);
}

.lp-s3Body {
  flex: 1 1 35rem;
  min-width: 0;
  padding: 1.375rem;
  margin: 0;
  align-content: start;
}

@media (max-width: 700px) {
  .lp-s3Head {
    flex-basis: 100%;
  }
}

/* Under the panels' middle, from one row to the next. */
.lp-s3Joint {
  width: 2px;
  height: 1.625rem;
  margin-left: calc(8.75rem - 1px);
  background: var(--lp-orange);
  color: var(--lp-on-orange);
}

/* Strategy: its modules as cards, each with what it is for. */
.lp-s3Items {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(8.75rem, 100%), 1fr));
  gap: 0.75rem;
}

.lp-s3Items li {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.875rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  background: var(--background);
}

.lp-s3Items b {
  font-weight: 650;
}

.lp-s3Items span {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--muted-foreground);
}

/* System: its six groups across the width. */
.lp-s3Groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15.625rem, 100%), 1fr));
  gap: 1.25rem 1.5rem;
}

/* Structure: people and accountability beside the roles. */
.lp-s3Pair {
  display: flex;
  flex-wrap: wrap;
  gap: 1.125rem 1.75rem;
}

.lp-s3Pair > .lp-s3Group {
  flex: 1 1 18.75rem;
  min-width: 0;
}

.lp-s3Group {
  display: grid;
  gap: 0.5rem;
  align-content: start;
}

.lp-s3GroupName {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.lp-s3Chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-s3Chips li {
  font-size: 0.875rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.5rem;
  background: var(--muted);
  border: 1px solid var(--border);
  color: var(--foreground);
}

/* Two even columns of whole-width chips (system's groups, structure's people): they line up, at any width. */
.lp-s3Grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lp-s3Grid2 li {
  display: flex;
  align-items: center;
  font-size: 0.84375rem;
  line-height: 1.3;
  padding: 0.4375rem 0.625rem;
}

/* The built-in roles: pills of the ink. */
.lp-s3Roles li {
  border-radius: 999px;
  background: var(--lp-ink);
  border-color: var(--lp-line-ink);
  color: var(--lp-on-ink);
}

.lp-s3Note {
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

/* ── 4. The core tabs and the role switcher: radios, with no script ───── */

/*
  Positioned, so the radios and words it hides out of sight stay inside it:
  with no positioned box above them, they sat where they would have been in
  the core's row that scrolls on a phone, and widened the whole page to 986
  pixels.
*/
.lp-choices {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

/*
  The radio itself is read and focused, never seen: its label is the tab. At
  the middle of its tab (.lp-tab, below), so when a phone's Previous or Next
  chooses an area out of the row's sight, the row scrolls that area's whole
  card into the middle of its view, not half of it.
*/
.lp-choices input {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/*
  NO SCROLL MARGIN ON A RADIO. Every [id] on the page keeps 4.5rem clear of
  the sticky header for a link that jumps to it, and the radios have ids for
  their labels; with that margin on a hidden radio, Chrome scrolled the page
  on every choice to put the 1-pixel radio in the middle of the screen,
  however much of its card was already showing. No link jumps to a radio.
  Two classes and an element, past .lp-page [id].
*/
.lp-page .lp-choices input {
  scroll-margin: 0;
}

/*
  EACH TAB IS ITS RADIO AND ITS LABEL IN A BOX OF THEIR OWN, and that box is
  what the list lays out. A radio hidden as position: absolute, with no top or
  left, sits where it would have been, and a flex container puts every such
  child at its own start: with the radios straight inside the fieldset, all
  nine core areas' radios sat at the top of the list, so choosing 07, 08 or 09
  focused a radio off the screen and the browser scrolled the page up to it
  (the owner's screenshots, 30 October 2026). Positioned, the box holds its
  radio at its own card, already on the screen. A grid, so the label fills it,
  a pill's line adds nothing under it, and a line cut with an ellipsis can be
  narrower than its words.
*/
.lp-tab {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.lp-choices legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.lp-choices input:focus-visible + label {
  outline: 3px solid var(--accent-foreground);
  outline-offset: 2px;
}

/*
  The core: the nine areas down the left, the chosen one's screen and words to
  the right. The list is 19.5rem, two more than it was, so most areas' short
  line fits on its one line whole.
*/
.lp-core {
  display: grid;
  grid-template-columns: minmax(0, 19.5rem) minmax(0, 1fr);
  gap: 1.75rem clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

@media (max-width: 900px) {
  .lp-core {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*
  COMPACT, SO ALL NINE FIT BESIDE THE PANEL ON A LAPTOP (the owner, 30 October
  2026): each card a name and one short line, 57 pixels where it was 93, and
  the nine with their three headings 634 where they were 1,027. Not sticky:
  every panel is taller than the list, so a sticky list was pushed up and down
  by the panel's end, and the card under the pointer moved when one was chosen.
*/
.lp-pillars {
  flex-direction: column;
  gap: 0.375rem;
}

.lp-pillar {
  position: relative;
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
  min-height: 44px;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  cursor: pointer;
  user-select: none;
}

.lp-pillar:hover {
  background: var(--card);
}

/* Strategy, System, Structure: the S each run of tabs sits under. Two classes deep, past .lp-page p's margin. */
.lp-pillars .lp-pillarGroup {
  margin: 0.375rem 0 0 0.25rem;
  font-size: 0.6875rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-foreground);
}

.lp-pillars legend + .lp-pillarGroup {
  margin-top: 0;
}

.lp-pillarNum {
  font-family: var(--lp-display);
  font-weight: 700;
  font-size: 0.9375rem;
  padding-top: 0.125rem;
  color: var(--muted-foreground);
}

.lp-pillarText {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
  min-width: 0;
}

.lp-pillarName {
  font-weight: 650;
  font-size: 1rem;
  line-height: 1.3;
}

/* One line, cut with an ellipsis where it is longer: its title shows it whole, and a screen reader reads every word. */
.lp-pillarShort {
  font-size: 0.8125rem;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--muted-foreground);
}

.lp-choices input:checked + .lp-pillar {
  background: var(--card);
  border-color: var(--accent-foreground);
  box-shadow: 0 6px 18px rgb(10 22 40 / 0.06);
}

.lp-choices input:checked + .lp-pillar .lp-pillarNum {
  color: var(--accent-foreground);
}

/*
  ON A PHONE THE NINE AREAS ARE ONE ROW THAT SCROLLS INSIDE ITSELF, each its
  number and name: nine stacked cards would push the chosen screen a whole
  phone's height down. The short line stays for a screen reader.

  AND IT SAYS IT SCROLLS (the owner, 30 October 2026: he could not tell).
  - A peek: each area is at least 1/1.4 of the row (1/2.4 on a tablet), and
    the row rests with an area at its start, so the next one is always cut
    at the edge, never ending cleanly. Strategy, System and Structure sit
    above their first area, taking no room in the row, where a name between
    two areas could fill the edge instead.
  - Fades: the right edge fades while there is more to the right, and the
    left once scrolled (below, by the row's own scroll, where the browser
    can; elsewhere the right edge alone, over the row's end padding).
*/
@media (max-width: 900px) {
  .lp-pillars {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.5rem;
    padding: 1.25rem 2rem 0.375rem 0;
    scrollbar-width: thin;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: 2rem;
    --lp-fade-start: 0px;
    --lp-fade-end: 2rem;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--lp-fade-start), #000 calc(100% - var(--lp-fade-end)), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--lp-fade-start), #000 calc(100% - var(--lp-fade-end)), transparent);
  }
  .lp-pillars .lp-tab {
    flex: none;
    min-width: calc((100% - 0.5rem) / 1.4);
    scroll-snap-align: start;
  }
  .lp-pillar {
    align-items: center;
    padding: 0.5rem 0.875rem;
    border-radius: 999px;
  }
  /* Above its first area: no width in the row, so the area starts where it stands. */
  .lp-pillars .lp-pillarGroup {
    flex: 0 0 0;
    width: 0;
    align-self: flex-start;
    position: relative;
    top: -1.125rem;
    margin: 0 -0.5rem 0 0;
    text-indent: 0.875rem;
    white-space: nowrap;
    font-size: 0.6875rem;
    line-height: 1rem;
  }
  .lp-pillarShort {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (max-width: 900px) {
  /*
    THE ROW STAYS IN SIGHT under the site's header while the panel is read, so
    Previous and Next under the screen never move the page: a choice focuses
    its radio, and a radio scrolled out of sight was scrolled back into the
    middle of the screen, hundreds of pixels. A block, not a grid, around it:
    a grid would hold it to its own row. Its own ground, so what scrolls
    under it is hidden; its edges' fades are the row's, inside it.
  */
  .lp-core {
    display: block;
  }
  .lp-pillarsBar {
    position: sticky;
    top: calc(4.25rem + 1px);
    z-index: 2;
    margin-bottom: 1.25rem;
    background: var(--background);
    box-shadow: 0 1px 0 var(--border);
  }
}

/* A tablet: two areas and part of a third. */
@media (min-width: 601px) and (max-width: 900px) {
  .lp-pillars .lp-tab {
    min-width: calc((100% - 1rem) / 2.4);
  }
}

/*
  The fades follow the row's own scroll: the left one grows over its first
  2rem, the right one goes over its last 2rem. A custom property is only
  eased between values once it is registered.
*/
@property --lp-fade-start {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --lp-fade-end {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@keyframes lp-fade-start {
  from {
    --lp-fade-start: 0px;
  }
  to {
    --lp-fade-start: 2rem;
  }
}

@keyframes lp-fade-end {
  from {
    --lp-fade-end: 2rem;
  }
  to {
    --lp-fade-end: 0px;
  }
}

.lp-panel {
  display: grid;
  gap: 1.5rem;
  min-width: 0;
}

/*
  THE PHONE'S PAGER, under the screen (components/site/landing Pager): the
  areas either side, each a label for its radio, at least 44 pixels tall.
  Shown on a phone only, where :has switches the panels (section 4's end).
*/
.lp-pager {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: -0.75rem;
  font-size: 0.875rem;
  line-height: 1.3;
}

/* Previous and Next share what the count leaves, evenly, so the count stays in the middle; an empty side keeps its half. */
.lp-pager > :first-child,
.lp-pager > :last-child {
  flex: 1 1 0;
  min-width: 0;
}

.lp-pagerPrev,
.lp-pagerNext {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

.lp-pagerNext {
  justify-content: flex-end;
  text-align: end;
}

.lp-pagerPrev:hover,
.lp-pagerNext:hover {
  background: var(--card);
}

.lp-pagerAt {
  color: var(--muted-foreground);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.lp-panelBody {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
}

.lp-panelBody > :first-child {
  flex: 1 1 20rem;
  min-width: 0;
}

.lp-panelBody h3 {
  font-size: clamp(1.375rem, 2.2vw, 1.625rem);
  font-weight: 700;
  line-height: 1.15;
}

.lp-aside {
  flex: 1 1 13.75rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.lp-who {
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* A second screen beside the chips: smaller, with a line saying what it shows. */
.lp-extra {
  margin: 0.75rem 0 0;
  display: grid;
  gap: 0.5rem;
}

.lp-extra figcaption {
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.lp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
  padding: 0;
  list-style: none;
}

.lp-chips li {
  font-size: 0.875rem;
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
  background: var(--muted);
  border: 1px solid var(--border);
  color: var(--foreground);
}

/* Ink with the ink's own line, so on a dark page they keep their edge. */
.lp-chipsInk li {
  background: var(--lp-ink);
  border-color: var(--lp-line-ink);
  color: var(--lp-on-ink);
}

/* The roles: seven pills, then the chosen one's words beside its screen. */
.lp-roleTabs {
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.lp-pill {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--foreground);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}

.lp-choices input:checked + .lp-pill {
  background: var(--foreground);
  color: var(--background);
  border-color: var(--foreground);
}

.lp-rolePanel {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 2rem clamp(2rem, 4vw, 3rem);
  align-items: center;
}

@media (max-width: 900px) {
  .lp-rolePanel {
    grid-template-columns: minmax(0, 1fr);
  }
}

.lp-rolePanel h3 {
  font-size: clamp(1.5rem, 2.6vw, 1.75rem);
  font-weight: 700;
  line-height: 1.15;
}

.lp-roleShot {
  display: flex;
  justify-content: center;
  min-width: 0;
}

.lp-roleShot > .lp-browser {
  width: 100%;
}

.lp-phoneLarge {
  width: 17.5rem;
  max-width: 100%;
  border-width: 9px;
  border-radius: 2.125rem;
}

/* Panels are hidden only where :has can show the chosen one. */
@supports selector(:has(*)) {
  .lp-panel,
  .lp-rolePanel {
    display: none;
  }

  .lp-tabbed:has(input[value="0"]:checked) [data-i="0"],
  .lp-tabbed:has(input[value="1"]:checked) [data-i="1"],
  .lp-tabbed:has(input[value="2"]:checked) [data-i="2"],
  .lp-tabbed:has(input[value="3"]:checked) [data-i="3"],
  .lp-tabbed:has(input[value="4"]:checked) [data-i="4"],
  .lp-tabbed:has(input[value="5"]:checked) [data-i="5"],
  .lp-tabbed:has(input[value="6"]:checked) [data-i="6"],
  .lp-tabbed:has(input[value="7"]:checked) [data-i="7"],
  .lp-tabbed:has(input[value="8"]:checked) [data-i="8"] {
    display: grid;
  }

  /* The pager is a phone's: a computer has the whole list beside the screen. */
  @media (min-width: 901px) {
    .lp-pager {
      display: none;
    }
  }
}

/* ── 5. Words beside a picture: units, the phone, moving in ───────────── */

.lp-split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 3rem);
  align-items: center;
}

@media (max-width: 900px) {
  .lp-split {
    grid-template-columns: minmax(0, 1fr);
  }
}

.lp-splitWide {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: start;
}

/* Beside three phones or two rows of chips, a heading a size down keeps to three lines. */
.lp-splitWide .lp-head h2 {
  font-size: clamp(1.875rem, 3.2vw, 2.5rem);
}

@media (max-width: 900px) {
  .lp-splitWide {
    grid-template-columns: minmax(0, 1fr);
  }
}

.lp-steps {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.125rem;
}

.lp-steps li {
  display: flex;
  gap: 0.875rem;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--lp-on-ink-muted);
}

.lp-steps b {
  color: var(--lp-on-ink);
  font-weight: 650;
}

.lp-stepNum {
  flex: none;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  border: 1px solid var(--lp-orange);
  color: var(--lp-orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
}

.lp-phones {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Three across in the wide column (3 x 192 + 2 x 16 = 608px of its 634). */
.lp-phones > li {
  width: 12rem;
  max-width: calc(50% - 0.75rem);
}

.lp-moving {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  min-width: 0;
}

/* ── 7. The stores, in words ──────────────────────────────────────────── */

.lp-stores {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 1.125rem 0 0;
  padding: 0;
  list-style: none;
}

.lp-store {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 44px;
  padding: 0 0.875rem;
  border-radius: 0.625rem;
  background: var(--lp-ink);
  color: var(--lp-on-ink);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

.lp-storeSoon {
  color: var(--lp-orange);
  font-weight: 700;
}

/* ── 8. Security, and the close ───────────────────────────────────────── */

.lp-trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: 1.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-trust li {
  border: 1px solid var(--lp-line-ink);
  background: var(--lp-ink-2);
  border-radius: 0.875rem;
  padding: 1.375rem;
  display: grid;
  gap: 0.5rem;
  align-content: start;
}

.lp-trust h3 {
  font-family: inherit;
  font-size: 1.125rem;
  font-weight: 650;
  letter-spacing: 0;
  color: var(--lp-on-ink);
}

.lp-trust p {
  color: var(--lp-on-ink-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.lp-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  margin-top: 1.25rem;
  font-size: 0.875rem;
}

.lp-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--lp-on-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.lp-final {
  max-width: 56rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.375rem;
  text-align: center;
}

.lp-final h2 {
  font-size: clamp(2rem, 4.4vw, 3.375rem);
  line-height: 1.04;
}

.lp-final .lp-cta {
  justify-content: center;
}

/* ── 9. Movement, only for a visitor who has not asked for less ───────── */

/*
  A RISE, NEVER A FADE FROM NOTHING (batch 2Y). What is below the fold is drawn
  as it is, only lower, until it comes into view: a full-page screenshot, a
  printout, a crawler's render and a site-reputation reviewer all see every
  word. A transform shifts no layout, so it costs no layout shift either.
*/
@keyframes lp-rise {
  from {
    transform: translateY(20px);
  }
  to {
    transform: none;
  }
}

/* The hero's screens, once, as the page opens: from faint, never from nothing. */
@keyframes lp-arrive {
  from {
    opacity: 0.4;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* The core row's fades, by its own scroll (section 4). */
  @supports (animation-timeline: scroll()) {
    @media (max-width: 900px) {
      .lp-pillars {
        animation: lp-fade-start linear both, lp-fade-end linear both;
        animation-timeline: scroll(self inline);
        animation-range: 0px 2rem, calc(100% - 2rem) 100%;
      }
    }
  }
  @supports (animation-timeline: view()) {
    .lp-reveal {
      animation: lp-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
  }
  .lp-enter {
    animation: lp-arrive 0.6s ease-out 0.15s both;
  }
}