/*
  The logged-out landing page.

  Kept in its own file and its own token set, because it is the only screen in
  the product that is not read through a windscreen. The player is dark, dense
  and sign-brown on purpose — it is used at 70mph in daylight. This page is read
  on a sofa, and inherits none of those constraints.

  Scoping every rule under `.lp` is what makes that safe: two palettes coexist
  in one document without either one leaking, and nothing here can reach the
  player.

  Photography is referenced but not required. Each shot is a background image
  layered over a flat placeholder, so a missing file degrades to a filled panel
  rather than a broken-image icon, and the page ships complete before a single
  photo exists. Drop a JPG at the named path and it appears with no code change.
  See public/marketing/README.md for the filenames and the prompt for each.
*/

.lp {
  /* Warm paper, deep pine, sign brown. The brown is the identity anchor and is
     spent sparingly — on rules, eyebrows and the marker motif, never on a
     surface, so it still reads as a highway sign rather than a colour scheme. */
  --lp-ground: #F5F2EA;
  --lp-ground-rgb: 245, 242, 234;
  --lp-ground-2: #FFFFFF;
  --lp-ink: #16261D;
  --lp-ink-2: #4C5A52;
  --lp-muted: #77837B;
  --lp-green: #1B3E2E;
  --lp-on-green: #F3EFE4;
  --lp-sign: #6B4A2A;
  --lp-line: #E0DACC;
  --lp-shot: #DDD6C6;

  --lp-display: "Hoefler Text", "Iowan Old Style", Charter, Georgia, "Times New Roman", serif;
  --lp-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;

  background: var(--lp-ground);
  color: var(--lp-ink);
  font-family: var(--lp-sans);
  font-size: 16px;
  line-height: 1.6;
}

/*
  Three theme states, not two. An explicit choice stamps the root element; the
  default "system" setting stamps nothing at all, and there only the media query
  separates light from dark. Redefining tokens in all three keeps the toggle
  winning in both directions.
*/
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lp {
    --lp-ground: #101A15;
    --lp-ground-rgb: 16, 26, 21;
    --lp-ground-2: #16221C;
    --lp-ink: #EFEDE3;
    --lp-ink-2: #B7C1B9;
    --lp-muted: #8B958D;
    --lp-green: #2A5A42;
    --lp-on-green: #F3EFE4;
    --lp-sign: #C99465;
    --lp-line: #26302A;
    --lp-shot: #1D2822;
  }
}

:root[data-theme="dark"] .lp {
  --lp-ground: #101A15;
  --lp-ground-rgb: 16, 26, 21;
  --lp-ground-2: #16221C;
  --lp-ink: #EFEDE3;
  --lp-ink-2: #B7C1B9;
  --lp-muted: #8B958D;
  --lp-green: #2A5A42;
  --lp-on-green: #F3EFE4;
  --lp-sign: #C99465;
  --lp-line: #26302A;
  --lp-shot: #1D2822;
}

/* ---- structure ---- */

/*
  Edge to edge, and paired.

  The first build of this page was a centred 64rem column of stacked bands with
  a margin all the way round, which is the safe shape for a document and the
  wrong one here. The design runs its photography to the edges of the page and
  sets two sections side by side twice — the guide beside how it works, the
  feature columns beside the "wait, what's that" panel. Stacking them in a
  column loses the rhythm the whole layout is built on.

  So a band is full width and its own grid. Nothing is centred except the text
  inside a half.
*/
.lp-band { width: 100%; }
.lp-band--alt { background: var(--lp-ground-2); }
.lp-band--green { background: var(--lp-green); color: var(--lp-on-green); }

/** Padding for a half that holds words rather than a picture. */
.lp-pad { padding: clamp(1.5rem, 3.4vw, 2.7rem) clamp(1.25rem, 3.5vw, 3.2rem); }
.lp-in { max-width: 64rem; margin: 0 auto; }
.lp-in--wide { max-width: 82rem; }

.lp-stack { display: flex; flex-direction: column; gap: .8rem; }
.lp-stack--wide { gap: 1.15rem; }

/* ---- the marketing nav ---- */

/*
  Its own, not the player's.

  The masthead above the app is a route line and a sign-in button, built to be
  read through a windscreen. This page is the front door and needs the things a
  front door has: a mark, a way around, and one obvious way in.
*/
.lp-nav {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  /*
    Clear of the status bar.
    This page hides the app masthead, and the masthead was the only thing
    carrying the safe-area inset — so installed to a home screen, with a
    translucent status bar above it, the clock and the battery sat on top of the
    wordmark.
  */
  padding: calc(1rem + env(safe-area-inset-top)) clamp(1.25rem, 3.5vw, 3.2rem) 1rem;
  /*
    A scrim, not a bar.
    The links sit past the point where the paper has faded into the photograph,
    so half of them were dark text on a bright sky. A fade of the ground colour
    gives them something to stand on without drawing a hard edge across the
    picture the way an opaque header would.
  */
  background: linear-gradient(
    180deg,
    rgba(var(--lp-ground-rgb), .94) 0%,
    rgba(var(--lp-ground-rgb), .72) 55%,
    rgba(var(--lp-ground-rgb), 0) 100%
  );
}
.lp-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--lp-ink);
  margin-right: auto;
}
.lp-mark {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 6px;
  background: var(--lp-sign);
  display: grid;
  place-items: center;
  flex: none;
}
.lp-wordmark {
  font-family: var(--lp-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
.lp-nav-links {
  display: flex;
  gap: clamp(1rem, 2.5vw, 2.2rem);
  /* Its own space beside the button. Without it "Plans" ran under the CTA at
     the widths where the two nearly fit. */
  margin-right: clamp(1rem, 2.5vw, 2rem);
}
.lp-nav-links a {
  color: var(--lp-ink-2);
  text-decoration: none;
  font-size: .92rem;
}
.lp-nav-links a:hover { color: var(--lp-sign); }

/*
 * Sign in, beside the CTA rather than among the section links.
 *
 * Those are hidden below the breakpoint, and this is the one control on the
 * page that a returning member needs, so it has to survive a phone. Set like a
 * nav link rather than a button: the solid CTA is the offer being made, and a
 * second button next to it reads as a second offer.
 */
.lp-signin {
  color: var(--lp-ink-2);
  text-decoration: none;
  font-size: .92rem;
  /* Two words that must not become one over two lines beside a button. */
  white-space: nowrap;
}
.lp-signin:hover { color: var(--lp-sign); }

/* ---- type ---- */

/*
  How lines are allowed to break.

  Short headings get `balance`, which spreads them evenly instead of leaving one
  word alone on the last line. Running text gets `pretty`, which only guards the
  last line and does not disturb the rest.

  It matters most where several blocks stand side by side. The four how-it-works
  captions ran to three, four, five and three lines, and four columns of
  different depths read as a mistake even when every one of them is correct.
*/
.lp .lp-head,
.lp .lp-sub,
.lp-step h3,
.lp-feature h3,
.lp-cat h3 { text-wrap: balance; }

.lp-lede,
.lp-body,
.lp-note,
.lp-step p,
.lp-feature p,
.lp-cat p,
.lp-type p { text-wrap: pretty; }

.lp-eyebrow {
  margin: 0;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--lp-sign);
}
.lp-band--green .lp-eyebrow { color: #D9B58C; }

.lp .lp-head {
  margin: 0;
  font-family: var(--lp-display);
  font-weight: 600;
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: -.015em;
  text-wrap: balance;
  color: var(--lp-ink);
}
.lp-band--green .lp-head { color: var(--lp-on-green); }

.lp .lp-sub {
  margin: 0;
  font-family: var(--lp-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 2.05vw, 1.6rem);
  line-height: 1.18;
  text-wrap: balance;
  color: var(--lp-ink);
}
.lp-band--green .lp-sub { color: var(--lp-on-green); }

.lp-lede { margin: 0; font-size: .96rem; line-height: 1.5; color: var(--lp-ink-2); max-width: 34rem; }
/* The claim, on its own line and in its own weight. */
.lp-claim {
  margin: 0;
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.4;
  color: var(--lp-ink);
}
.lp-hero .lp-body { font-size: .92rem; line-height: 1.55; }
.lp-band--green .lp-lede { color: #D6DED8; }
.lp-body { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--lp-ink-2); max-width: 34rem; }
.lp-note { margin: 0; font-size: .8rem; line-height: 1.5; color: var(--lp-muted); }
.lp-band--green .lp-note { color: #C3D0C6; }
.lp-strong { color: var(--lp-ink); font-weight: 600; }
.lp-band--green .lp-strong { color: var(--lp-on-green); }

/* ---- actions ---- */

.lp-actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.lp-btn {
  display: inline-block;
  padding: .72rem 1.4rem;
  border-radius: 3px;
  border: 1px solid transparent;
  font-family: var(--lp-sans);
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.lp-btn--solid { background: var(--lp-green); color: var(--lp-on-green); }
.lp-btn--solid:hover { background: #163526; }
.lp-btn--ghost { background: transparent; border-color: var(--lp-line); color: var(--lp-ink); }
.lp-btn--ghost:hover { border-color: var(--lp-sign); color: var(--lp-sign); }
.lp-btn--small { padding: .5rem 1.05rem; font-size: .85rem; }
.lp-band--green .lp-btn--solid { background: var(--lp-on-green); color: var(--lp-green); }
.lp-btn:focus-visible { outline: 2px solid var(--lp-sign); outline-offset: 3px; }

/* ---- photography slots ---- */

.lp-shot {
  background-color: var(--lp-shot);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 8rem;
}
.lp-shot--hero { background-image: url("/marketing/hero.jpg"); }
.lp-shot--town { background-image: url("/marketing/town.jpg"); }
.lp-shot--falls { background-image: url("/marketing/falls.jpg"); }
.lp-shot--cannon { background-image: url("/marketing/cannon.jpg"); }
.lp-shot--marker { background-image: url("/marketing/marker.jpg"); }
.lp-shot--giant { background-image: url("/marketing/giant.jpg"); }
.lp-shot--dash { background-image: url("/marketing/dash.jpg"); }
.lp-shot--window { background-image: url("/marketing/window.jpg"); }
.lp-shot--diner { background-image: url("/marketing/diner.jpg"); }
.lp-shot--feat-1 { background-image: url("/marketing/feat-1.jpg"); }
.lp-shot--feat-2 { background-image: url("/marketing/feat-2.jpg"); }
/*
  Zoomed and pinned left to cut a neighbour out of the frame.
  The supplied crop runs a fifth of the way into the panel beside it, so the
  right edge of this tile is somebody else's photograph. Trimmed here rather
  than by editing the file, so replacing the source undoes it.
*/
.lp-shot--feat-3 {
  background-image: url("/marketing/feat-3.jpg");
  background-size: 128% auto;
  background-position: left center;
}
.lp-shot--feat-4 { background-image: url("/marketing/feat-4.jpg"); }
/*
  The lower two thirds only.
  This crop carries a strip of the panel above it — a pair of legs, a Route 66
  shield and a numbered badge — over a river valley that is exactly the picture
  the tile wants. Zoomed and anchored to the bottom to leave the strip out,
  here rather than in the file, so a clean replacement undoes it.
*/
.lp-shot--feat-5 {
  background-image: url("/marketing/feat-5.jpg");
  background-size: 164%;
  background-position: center bottom;
}
/* The six categories have photographs of their own rather than borrowing one
   from a band above, which had the same picture appearing twice on one page. */
.lp-shot--cat-history { background-image: url("/marketing/cat-history.jpg"); }
.lp-shot--cat-nature { background-image: url("/marketing/cat-nature.jpg"); }
.lp-shot--cat-culture { background-image: url("/marketing/cat-culture.jpg"); }
.lp-shot--cat-weird { background-image: url("/marketing/cat-weird.jpg"); }
.lp-shot--cat-food { background-image: url("/marketing/cat-food.jpg"); }
.lp-shot--cat-interesting { background-image: url("/marketing/cat-interesting.jpg"); }

/* ---- 1. hero ---- */

/*
  One photograph across the whole band, with the paper feathered over it.

  Built first as a two-column grid with the picture in the right-hand cell,
  which gives a hard vertical seam down the middle of the page. The design has
  no seam: the photograph runs the full width, under the nav and out to both
  edges, and the cream dissolves into it somewhere past the headline. The words
  are legible because of the gradient, not because of a column boundary.
*/
.lp-hero {
  position: relative;
  display: grid;
  align-items: center;
  /*
    Proportioned like the design rather than to the window.
    The mock's hero is a shade over a third of its width, and matching that
    ratio still gave a band nearly half the height of a laptop screen — the
    mock is a whole page seen at once, so a proportion that reads as right
    there reads as tall in a window. Low enough now that the content sets the
    height and this only stops it collapsing.
  */
  min-height: clamp(17rem, 26vw, 25rem);
  background-color: var(--lp-shot);
  background-image: url("/marketing/hero.jpg");
  background-size: cover;
  /* Framed right of centre: see the note on cropping below. */
  background-position: 74% center;
}
/*
  The paper, poured over the picture from the left.
  Opaque where the headline sits, gone by the time the road is interesting.
*/
.lp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(var(--lp-ground-rgb), 1) 0%,
    rgba(var(--lp-ground-rgb), .98) 26%,
    rgba(var(--lp-ground-rgb), .82) 38%,
    rgba(var(--lp-ground-rgb), .35) 52%,
    rgba(var(--lp-ground-rgb), 0) 64%
  );
}
.lp-hero-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .8rem;
  /*
    A third of the page, as drawn.
    Left at full width the headline fell in two long lines and the paragraph
    under it ran the whole way across, which is not the shape of the design:
    there the copy sits in a narrow column, the headline breaks over three
    lines, and the picture has the rest.
  */
  max-width: min(34rem, 42%);
  /* The top clears the nav, which floats over the picture. The bottom has
     nothing to clear. */
  padding: calc(clamp(3.4rem, 5.5vw, 4.2rem) + env(safe-area-inset-top))
           clamp(1.25rem, 3.5vw, 3.2rem)
           clamp(1.2rem, 2vw, 1.8rem);
}
/* Scaled to the band. In the mock the headline is about 4% of the page width;
   at 5.4vw it was half again as large and would not fit the shorter band. */
.lp-hero .lp-head { font-size: clamp(2rem, 4.1vw, 3.3rem); }
/*
  Framed right of centre, not centre.

  The photograph is nearly two to one and the band it fills is closer to square
  on a laptop, so `cover` throws away a third of the width. Centred, the thing
  the whole page is named after — the brown sign on the right-hand verge — is
  the first thing cropped out of the picture.
*/

/*
  The sign is drawn, not photographed. It is the campaign line made an object,
  and a real one cropped out of stock photography is never the right shape.
*/
.lp-sign {
  position: absolute;
  right: 7%;
  top: 22%;
  width: min(14rem, 44%);
  background: #6B4A2A;
  border: 3px solid #F0E9DC;
  border-radius: 4px;
  padding: .8rem .7rem;
  box-shadow: 0 10px 30px rgba(20, 14, 6, .3);
  text-align: center;
  transform: rotate(-1.2deg);
}
.lp-sign p {
  margin: 0;
  font-family: var(--lp-sans);
  font-weight: 700;
  font-size: clamp(.66rem, 1.15vw, .86rem);
  letter-spacing: .045em;
  line-height: 1.35;
  color: #F6F1E6;
  text-transform: uppercase;
}
.lp-sign-icon { display: block; margin: 0 auto .35rem; }

.lp-tagline { display: flex; align-items: center; gap: .5rem; color: var(--lp-muted); font-size: .85rem; }
.lp-tagline svg { color: var(--lp-sign); flex: none; }

/* ---- 2. the problem ---- */

.lp-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}
/* The half that carries the picture never gets padding; that is what makes it
   reach the edge of the page. */
.lp-split > .lp-mosaic,
.lp-split > .lp-shot { min-height: 100%; }

.lp-types {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .8rem .7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-type { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }
.lp-type p { margin: 0; font-size: .78rem; line-height: 1.35; color: var(--lp-ink-2); }
.lp-type svg { color: var(--lp-sign); flex: none; }

/* Two rows: a wide and a tall above, three across below. */
.lp-mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1.2fr 1fr;
  gap: 4px;
}
.lp-mosaic > :nth-child(1) { grid-column: span 2; }

/* ---- 3 + 4. the guide, beside how it works ---- */

.lp-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}
/*
  Five columns of text cannot share half a page. At even weight each one landed
  about 110px wide and every sentence wrapped to eight lines; the picture beside
  them only ever needed enough room to be a picture.
*/
.lp-pair--wide { grid-template-columns: minmax(0, 1.95fr) minmax(0, 1fr); }

.lp-guide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: stretch; }
/*
  The road behind, the product in front.

  The photograph supplied for this panel has a phone in it already, showing a
  map. Covering a photographed screen with a live one never lines up, so the
  road is the backdrop and the device is drawn — which also means the list is
  the running order as it actually is rather than a picture of one.
*/
.lp-guide-art {
  position: relative;
  min-height: 17.5rem;
  display: grid;
  place-items: center;
  padding: 1.6rem 1rem;
  overflow: hidden;
  background-color: #2C2A25;
  background-image: url("/marketing/hero.jpg");
  background-size: cover;
  background-position: 60% center;
}
/* Thrown out of focus so the interface reads as the subject. */
.lp-guide-art::before {
  content: "";
  position: absolute;
  inset: -2rem;
  background: inherit;
  background-position: 60% center;
  filter: blur(9px) saturate(.85) brightness(.72);
}

.lp-device {
  position: relative;
  width: min(14.5rem, 78%);
  border-radius: 1.5rem;
  padding: .5rem;
  background: #17140F;
  box-shadow: 0 18px 40px rgba(10, 8, 4, .5);
}
/*
  A screen is a fixed pane, so state the height and let the contents fit it.
  Sized by content instead, adding the player bar simply made the phone taller
  and stretched the photograph behind it — which is not what happens when you
  add a player to a phone.
*/
.lp-device-screen {
  aspect-ratio: 9 / 14;
  display: flex;
  flex-direction: column;
  border-radius: 1.1rem;
  background: #131110;
  color: #F1EDE5;
  padding: .7rem .65rem .8rem;
  font-size: .58rem;
  line-height: 1.35;
  overflow: hidden;
}
.lp-device-route { margin: 0; color: #948C7E; font-size: .52rem; }
.lp-device-head {
  margin: .15rem 0 .5rem;
  font-family: var(--lp-display);
  font-size: .82rem;
  font-weight: 600;
  color: #F1EDE5;
}
/*
  The list gives up the space, not the phone. It runs under the player and is
  faded out at the cut rather than stopped, so a clipped last row reads as more
  of the route below — which is true — instead of as a layout that overflowed.
*/
.lp-device-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, #000 78%, transparent);
}
.lp-device-item {
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr);
  gap: .4rem;
  padding: .38rem 0;
  border-top: 1px solid #302B24;
}
.lp-device-item:first-child { border-top: 0; }
.lp-device-mi {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: .5rem;
  color: #948C7E;
  padding-top: .1rem;
}
.lp-device-item b { display: block; font-size: .6rem; font-weight: 600; }
.lp-device-item em {
  display: block;
  font-style: normal;
  color: #C6BFB2;
  font-size: .53rem;
  line-height: 1.3;
  margin-top: .05rem;
}
.lp-device-meta {
  display: block;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: .48rem;
  color: #948C7E;
  margin-top: .12rem;
}
/* The player, along the bottom, as it is in the app. */
.lp-device-player {
  flex: none;
  margin: .5rem -.65rem -.8rem;
  padding: .45rem .6rem .5rem;
  border-top: 1px solid #302B24;
  background: #1C1917;
  border-radius: 0 0 1.1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.lp-device-now b { display: block; font-size: .56rem; font-weight: 600; }
.lp-device-now span { display: block; font-size: .48rem; color: #948C7E; }
.lp-device-controls { display: flex; align-items: center; gap: .4rem; }
.lp-device-key {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  border: 1px solid #4A4238;
  display: grid;
  place-items: center;
  font-size: .5rem;
  color: #C6BFB2;
}
.lp-device-key--play {
  width: 1.5rem;
  height: 1.5rem;
  border: 0;
  background: #D08650;
  color: #1B1410;
  font-size: .55rem;
}
.lp-device-progress { height: 2px; background: #302B24; border-radius: 2px; }
.lp-device-progress span {
  display: block;
  height: 100%;
  width: 38%;
  background: #D08650;
  border-radius: 2px;
}

/* The one that is playing, marked the way the player marks it. */
.lp-device-item--playing b,
.lp-device-item--playing .lp-device-meta { color: #D08650; }
/* The phone sits in the photograph rather than beside it. */
.lp-phone {
  width: min(11rem, 78%);
  aspect-ratio: 9 / 18;
  border-radius: 1.4rem;
  border: 7px solid #17140F;
  background-color: #C9C0AE;
  background-image: url("/marketing/screen.jpg");
  background-size: cover;
  background-position: center;
  box-shadow: 0 16px 34px rgba(15, 10, 4, .4);
}

.lp-checks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .4rem; }
.lp-checks li { display: flex; align-items: center; gap: .55rem; font-size: .92rem; color: var(--lp-ink-2); }
.lp-checks svg { color: var(--lp-green); flex: none; }
:root[data-theme="dark"] .lp-checks svg { color: #5FA684; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lp-checks svg { color: #5FA684; }
}

/* ---- how it works ---- */

.lp-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .8rem .6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}
.lp-step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .4rem; }
.lp-step-mark {
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: var(--lp-green);
  color: var(--lp-on-green);
  display: grid;
  place-items: center;
  position: relative;
}
/*
  The dashed rule between the marks, drawn from each one to the next.
  It is what makes four circles read as a sequence rather than four options.
*/
.lp-step:not(:last-child) .lp-step-mark::after {
  content: "";
  position: absolute;
  left: calc(100% + .3rem);
  top: 50%;
  width: calc(100% + 1.4rem);
  border-top: 1px dashed var(--lp-line);
}
/*
 * Lining figures, said explicitly.
 *
 * The display face defaults to oldstyle numerals, where a zero is an o and a
 * one is an i — so the four step numbers rendered as OI, O2, O3, O4 and read as
 * letters rather than a sequence.
 */
.lp-step-n {
  font-family: var(--lp-display);
  font-size: 1.15rem;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--lp-ink);
}
.lp-step h3 { margin: 0; font-size: .9rem; font-weight: 700; color: var(--lp-ink); line-height: 1.2; }
.lp-step p {
  margin: 0;
  font-size: .8rem;
  line-height: 1.45;
  color: var(--lp-ink-2);
  /* A measure rather than a column width. Left to fill the column the four
     captions broke at four different widths. */
  max-width: 22ch;
}

/* ---- 5 + 6. features, beside the moment ---- */

.lp-features {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-feature {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: 0 .85rem;
  border-right: 1px solid var(--lp-line);
}
.lp-feature:last-child { border-right: 0; }
.lp-feature h3 {
  margin: 0;
  font-family: var(--lp-display);
  font-size: .98rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--lp-ink);
  text-align: center;
}
.lp-feature p { margin: 0; font-size: .76rem; line-height: 1.45; color: var(--lp-ink-2); text-align: center; max-width: 24ch; margin-inline: auto; }
.lp-feature svg { color: var(--lp-sign); align-self: center; }

/* The row of photographs under the columns, one per column. */
.lp-feature-shots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: .9rem; }
.lp-feature-shots .lp-shot { min-height: 4.5rem; aspect-ratio: 3 / 2; }

.lp-moment { position: relative; display: grid; align-items: end; min-height: 17.5rem; }
.lp-moment-panel {
  position: relative;
  background: var(--lp-ground);
  padding: 1.15rem 1.25rem;
  margin: 1.2rem;
  max-width: 20rem;
  justify-self: end;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.lp-moment-panel .lp-head { font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-style: italic; }
.lp-moment-panel p { margin: 0; font-size: .84rem; line-height: 1.5; color: var(--lp-ink-2); }

/* ---- 7. categories ---- */

.lp-cats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-cat { display: flex; flex-direction: column; }
.lp-cat .lp-shot { min-height: 4.5rem; aspect-ratio: 5 / 3; }
.lp-cat-text { padding: .55rem .2rem 0; display: flex; flex-direction: column; gap: .25rem; text-align: center; }
.lp-cat h3 {
  margin: 0;
  font-family: var(--lp-display);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--lp-ink);
}
.lp-cat p { margin: 0; font-size: .76rem; line-height: 1.4; color: var(--lp-ink-2); max-width: 26ch; margin-inline: auto; }

/* ---- plans ---- */

.lp-plans { width: 100%; border-collapse: collapse; font-size: .86rem; }
.lp-plans th, .lp-plans td { padding: .55rem .7rem; text-align: left; border-bottom: 1px solid var(--lp-line); }
.lp-plans thead th {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lp-muted);
  white-space: nowrap;
}
.lp-plans tbody th { font-weight: 400; color: var(--lp-ink-2); }
.lp-plans td { text-align: center; width: 7rem; color: var(--lp-ink); }
.lp-plans .no { color: var(--lp-muted); }
.lp-plans .yes { color: var(--lp-sign); font-weight: 700; }
.lp-scroll { overflow-x: auto; }

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

/*
  One photograph across the whole width with three things standing on it: the
  claim at the left, the product in the middle, the invitation at the right.
*/
.lp-close {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 3vw, 2.6rem) clamp(1.25rem, 3.5vw, 3.2rem);
  background-color: #16241C;
  position: relative;
}
/* Kept, and doing nothing while the ground is flat. It is what makes the words
   hold the moment a photograph is dropped in behind them. */
.lp-close::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(12,20,15,.55) 0%, rgba(12,20,15,.25) 55%, rgba(12,20,15,.5) 100%);
}
.lp-close > * { position: relative; }
.lp-close .lp-head, .lp-close .lp-sub { color: #F6F2E8; }
.lp-close p { color: #D8DED6; }
.lp-close .lp-note { color: #B9C3BA; }
/*
  The plans table, on the dark ground.
  It stands where the mock puts a phone, because it answers the question the
  invitation beside it provokes — and because a table nobody scrolls to is a
  table nobody reads.
*/
.lp-plans-panel {
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.lp-plans-panel .lp-sub { color: #F6F2E8; font-size: 1.35rem; text-align: center; }
.lp-close .lp-plans { font-size: .78rem; }
.lp-close .lp-plans th,
.lp-close .lp-plans td { border-bottom: 1px solid rgba(246, 242, 232, .16); padding: .28rem .5rem; }
.lp-close .lp-plans thead th { color: rgba(246, 242, 232, .55); font-size: .62rem; }
.lp-close .lp-plans tbody th { color: #D8DED6; font-weight: 400; }
.lp-close .lp-plans td { width: 4.5rem; }
.lp-close .lp-plans .yes { color: #E8C79B; font-weight: 700; }
.lp-close .lp-plans .no { color: rgba(246, 242, 232, .35); }

.lp-foot {
  border-top: 1px solid var(--lp-line);
  padding: 1.2rem 1.25rem calc(1.2rem + env(safe-area-inset-bottom));
  text-align: center;
  background: var(--lp-ground);
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.lp-legal {
  margin: 0;
  font-size: .74rem;
  color: var(--lp-muted);
}
.lp-legal a { color: var(--lp-sign); text-decoration: none; }
.lp-legal a:hover { text-decoration: underline; }

/*
  The body reserves 11rem for the pinned player, and the app masthead is built
  for a windscreen. Neither belongs on the front door.
*/
body:has(#landing:not([hidden])) { padding-bottom: 0; }
body:has(#landing:not([hidden])) .mast { display: none; }

/* ---- narrow ---- */

@media (max-width: 60rem) {
  .lp-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 0; }
  .lp-feature { border-right: 0; }
  .lp-feature-shots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-pair { grid-template-columns: minmax(0, 1fr); }
  .lp-types { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 46rem) {
  .lp-split,
  .lp-guide,
  .lp-close { grid-template-columns: minmax(0, 1fr); }
  /* On a phone the picture is behind the words rather than beside them, so the
     paper has to cover the whole band or the headline sits on a mountain. */
  .lp-hero { min-height: 0; padding-top: calc(3.5rem + env(safe-area-inset-top)); }
  /*
    The column is a third of the page only while there is a picture beside it.
    Left at 42% on a phone the text had 164px to live in, which broke the
    headline over six lines and turned the paragraph into a ribbon.
  */
  .lp-hero-copy {
    max-width: none;
    padding-top: 1rem;
    padding-bottom: 2rem;
  }
  .lp-hero .lp-head { font-size: clamp(1.9rem, 8.5vw, 2.6rem); }
  /* Side by side while they fit, which at this size they do. */
  .lp-hero .lp-actions .lp-btn { flex: 0 1 auto; }
  /*
    The paper stays under the words the whole way down.
    Fading to just over half by the bottom left the tagline sitting on the road
    surface, which is the one line on this band nobody could read.
  */
  .lp-hero::before {
    background: linear-gradient(
      180deg,
      rgba(var(--lp-ground-rgb), .96) 0%,
      rgba(var(--lp-ground-rgb), .93) 70%,
      rgba(var(--lp-ground-rgb), .86) 100%
    );
  }
  .lp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-step .lp-step-mark::after { display: none; }
  .lp-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-nav-links { display: none; }
  /* Only the CTA grows. Letting the sign-in link stretch too would make two
     equal-width controls out of a primary and a quiet link. */
  .lp-btn { flex: 1 1 auto; text-align: center; }
  .lp-signin { flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .lp * { transition: none !important; animation: none !important; }
}

/*
  The price beside the Premium column head. A block, so it sits under the word
  rather than stretching the column — the table is already tight enough on a
  phone that an inline price pushed the feature names into two lines each.
*/
.lp-price {
  display: block;
  font-family: var(--lp-display);
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: 400;
  font-size: .82em;
  opacity: .75;
  margin-top: .1rem;
}
.lp-price:empty { display: none; }

/* The buy affordance under the plans table. */
.lp-plans-act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .9rem;
  margin-top: .9rem;
}
.lp-plans-act .lp-note { margin: 0; }

/* ------------------------------------------------------- two ways in ---
 *
 * The two modes, side by side and given equal weight, because they are equally
 * the product. Stated columns rather than auto-fit: with two cards auto-fit
 * either packs them both or orphans one depending on a few pixels of gutter,
 * and an orphaned card reads as one that failed to load.
 */
.lp-ways {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.2rem, 3vw, 2.6rem);
  align-items: start;
}
.lp-way {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.lp-way-head {
  font-family: var(--lp-display);
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  font-weight: 600;
  margin: .2rem 0 0;
  line-height: 1.2;
}
/* Which plan it needs, said on the card. Small and uppercase so it reads as a
   label rather than as a second heading competing with the name of the mode. */
.lp-way-note {
  margin: 0;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lp-sign);
}

/*
  The drawings.

  Both sit in the same box at the same scale so the shapes can be compared,
  which is the entire job: a cone of road ahead against a line with two ends.
  The stroke weights are stated here rather than on the elements so the pair
  cannot drift apart when one is edited.
*/
.lp-way-art {
  background: var(--lp-ground);
  border: 1px solid var(--lp-line);
  border-radius: 4px;
  padding: .6rem;
  /* Capped, because a column on a wide screen is 550px and the drawing then
     becomes a third of a metre of mostly empty paper. It is a diagram of a
     shape, and the shape is legible small. */
  width: 100%;
  max-width: 20rem;
}
.lp-way-art svg { display: block; width: 100%; height: auto; }

.lp-way-road { stroke: var(--lp-ink-2); stroke-width: 2.2; }
/* Where they have already been. Present so the car is plainly partway along a
   road rather than parked at the start of one. */
.lp-way-behind { stroke: var(--lp-line); stroke-width: 2.2; }
/* The road carrying on past what has been asked about. */
.lp-way-far { stroke: var(--lp-muted); stroke-width: 2.2; stroke-dasharray: 4 5; }
/*
  The ten miles being looked at. The road path drawn a second time underneath
  itself, thick and faint, rather than a separate outlined shape — so the band
  cannot drift off the road when either is edited, and it reads as attention
  paid to a stretch instead of as a second road beside the first.
*/
.lp-way-window {
  stroke: rgba(107, 74, 42, .16);
  stroke-width: 15;
  stroke-linecap: round;
}
.lp-way-pin { fill: var(--lp-sign); stroke: none; }
/* Where the driver is. Open, so it is plainly a position and not a place. */
.lp-way-here { fill: var(--lp-ground); stroke: var(--lp-green); stroke-width: 2.4; }
.lp-way-heading { stroke: var(--lp-green); stroke-width: 2.4; }
.lp-way-flag { stroke: var(--lp-green); stroke-width: 2.2; }

@media (max-width: 46rem) {
  /* Stacked, and the drawings shrink: at full width on a phone the fan is
     three inches of mostly empty paper between two paragraphs. */
  .lp-ways { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .lp-way-art { max-width: 15rem; }
}

/*
  The paid half of a card whose tag says free.

  Set apart from the note above it so the two are not read as one paragraph,
  and marked in sign brown so it is plainly the upgrade rather than more of the
  same. It says "Premium" in the sentence as well as in the colour, because a
  colour is not a label.
*/
.lp-way-more {
  margin: .15rem 0 0;
  padding-top: .5rem;
  border-top: 1px solid var(--lp-line);
  font-size: .82rem;
  line-height: 1.5;
  color: var(--lp-ink-2);
}
.lp-way-more b {
  color: var(--lp-sign);
  font-weight: 600;
}