/*
 * The front page.
 *
 * Loaded alongside styles.css, which owns the type and the buttons. The app is
 * a tool and stays quiet; this page has one job, which is to get someone into
 * the app, so it is allowed to be larger and slower.
 *
 * It is a gallery: the boards are hung large, some of them running off the
 * edge of the wall, and everything else — type, rules, colour — is the room
 * they hang in.
 */

/*
 * Always dark, whatever the system says.
 *
 * The app follows the system because it is a workspace and someone will use it
 * at both ends of a day. This page is a wall, and photographs on a dark wall
 * light up the way they do in a gallery and never do on cream. Committing also
 * means one set of decisions made properly rather than two made halfway.
 *
 * Deeper than the app's dark theme on purpose: the app's surfaces sit 3% apart
 * in lightness, which is right for panels that must not compete with a board
 * but useless over five thousand pixels of scrolling — the bands between
 * sections simply did not register. These are far enough apart to be landmarks.
 */
html.landing { background: #100F0E; }

body.landing {
  --bg: #100F0E;
  --surface: #1B1917;
  --surface-2: #262320;
  --line: #322E29;
  --line-strong: #4C453D;
  --ink: #F5F1EA;
  --ink-2: #B9B2A7;
  --ink-3: #8B8379;
  --accent: #83C4AC;
  --accent-hover: #9BD3BE;
  --accent-soft: #21332C;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 8px 28px rgba(0, 0, 0, .45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .6);
  /* One shadow for everything hung on this wall, so four boards at four sizes
     read as four objects lit by the same lamp. */
  --hang: 0 2px 8px rgba(0, 0, 0, .5), 0 26px 60px rgba(0, 0, 0, .55);

  background: var(--bg);
  color: var(--ink);
  /* `clip`, not `hidden`: boards are meant to run off the right-hand edge, and
     `hidden` would make that a scrollbar while also turning the body into a
     scroll container and breaking the sticky bar. */
  overflow-x: clip;
}

/* ── bar ─────────────────────────────────────────────────────────── */

.lp-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px clamp(16px, 5vw, 56px);
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.lp-bar .brand { text-decoration: none; color: var(--ink); }

.lp-nav { display: flex; align-items: center; gap: clamp(10px, 2vw, 22px); }
.lp-nav a {
  font: 500 13px var(--sans);
  color: var(--ink-2);
  text-decoration: none;
}
.lp-nav a:hover { color: var(--ink); }
/* The accent is a pale green here, so the label on it has to be the dark ink,
   not white. It used to be behind a dark-mode query; the page is now always
   dark, so it always applies. */
.lp-nav .btn-primary { color: #14201C; }

/* Below this the two text links crowd the button and none of them are easy to
   hit. The button is the only one that matters on a phone. */
@media (max-width: 560px) {
  .lp-nav a:not(.btn) { display: none; }
}

/* ── hero ────────────────────────────────────────────────────────── */

/*
 * The product is the hero.
 *
 * A page for a visual tool that leads with a paragraph is asking you to take
 * its word for it. Two real boards, large, at the top — the words are there to
 * explain what you are already looking at.
 */
.lp-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.96fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 4vw, 56px);
  padding: clamp(52px, 8vw, 108px) clamp(16px, 5vw, 56px) clamp(60px, 8vw, 112px);
  max-width: 1400px;
  margin: 0 auto;
}

/* One column below this: the boards are the point, and squeezing them into a
   third of a phone screen would defeat it. */
@media (max-width: 900px) {
  .lp-hero { grid-template-columns: 1fr; text-align: center; }
  .lp-cta { justify-items: center; }
  .lp-lede { margin-inline: auto; }
}

/* Sized to hold "Describe a mood." on one line in its column — at 92px it broke
   after "a" and the opening line of the page read as three fragments. */
.lp-hero h1 {
  font: 400 clamp(40px, 5vw, 70px)/1.04 var(--serif);
  letter-spacing: -0.028em;
  margin: 0 0 22px;
  text-wrap: balance;
}

.lp-lede {
  font: 400 clamp(15px, 1.55vw, 19px)/1.6 var(--sans);
  color: var(--ink-2);
  /* A measure, not a width: past about 68 characters the eye loses the line. */
  max-width: 44ch;
  margin: 0 0 30px;
}

.lp-cta { display: grid; gap: 10px; justify-items: start; }
.lp-cta-note { font: 400 12.5px var(--sans); color: var(--ink-3); }

/* ── the hero boards ─────────────────────────────────────────────── */

/*
 * Hung, not placed.
 *
 * These were 340px wide on a 1440px page — the strongest thing we have, shown
 * at the size of a thumbnail, with margins around it. Nothing about that says
 * "look at this". They are now half again as large and the back one runs off
 * the right-hand edge of the page, which is the difference between a picture of
 * a board and a board.
 */
.lp-boards {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(340px, 46vw, 620px);
}

.lp-board {
  display: block;
  border-radius: 3px;
  box-shadow: var(--hang);
  max-width: none;
}

/* Two boards, offset, the way you would put two sheets down on a desk. The
   tilt is small: past a couple of degrees it stops reading as paper and starts
   reading as a slideshow effect. */
.lp-board-front {
  position: relative;
  z-index: 2;
  width: clamp(230px, 27vw, 420px);
  transform: rotate(-1.6deg);
}

/* Deliberately past the edge. `overflow-x: clip` on the body means it costs no
   scrollbar, and a board that continues off the page implies more of them. */
/*
 * Past the edge, but not so far that it is a sliver.
 *
 * At -7vw four fifths of it was outside the window and the fifth left over sat
 * behind the front board — the gesture cost a whole board to make. Far enough
 * to say the page continues, close enough that you can see what it is.
 */
.lp-board-back {
  position: absolute;
  z-index: 1;
  width: clamp(250px, 30vw, 470px);
  top: 0;
  right: clamp(-96px, -3.6vw, -14px);
  transform: rotate(3.2deg);
  opacity: .97;
}

/* On a phone the back board only crowds the front one. */
@media (max-width: 620px) {
  .lp-board-back { display: none; }
  .lp-board-front { width: min(78vw, 320px); transform: none; }
}

/* ── the band under the hero ─────────────────────────────────────── */

.lp-band {
  background: var(--surface);
  border-block: 1px solid var(--line);
  padding: clamp(26px, 3.4vw, 40px) clamp(16px, 5vw, 56px);
}
.lp-band-note {
  max-width: 62ch;
  margin: 0 auto;
  font: 400 13.5px/1.6 var(--sans);
  color: var(--ink-3);
  text-align: center;
}

/* ── the ten tones ───────────────────────────────────────────────── */

/*
 * Filled by landing.js from the picker's own list.
 *
 * `auto-fit` rather than ten fixed columns: below about a thousand pixels ten
 * palettes four swatches wide stop being colour and start being stripes.
 */
.lp-tones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: clamp(8px, 1.1vw, 16px);
  max-width: 1400px;
  margin: 0 auto clamp(20px, 2.4vw, 30px);
}

.lp-tone { display: grid; gap: 8px; }

.lp-tone-bars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: clamp(26px, 3.2vw, 46px);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.lp-tone-bars span { display: block; }

.lp-tone b {
  font: 600 9.5px var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── the layout strip ────────────────────────────────────────────── */

/*
 * Boards, not screenshots of boards. Every card is an SVG the layout engine
 * drew a moment ago, so the front page cannot promise a composition the
 * product no longer makes.
 */
/*
 * Aligned on the baseline, not the top.
 *
 * The four are deliberately different heights — that is the whole point of the
 * section — so hanging them from a common top edge would put four different
 * amounts of empty space underneath and read as a mistake. Standing them on a
 * shared floor reads as four sheets on a desk.
 */
.lp-strip {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(16px, 2.6vw, 40px);
  margin-top: clamp(36px, 4vw, 56px);
  padding-bottom: 4px;
}

.lp-card { margin: 0; display: grid; gap: 14px; justify-items: center; }

/*
 * Sized off the window, not off a fixed ceiling.
 *
 * The four together are roughly four times as wide as they are tall — A4,
 * 16:9, square and 9:16 come to 4.05 heights side by side — so the height that
 * fits is the room available divided by that, with a margin for the gaps. Held
 * at a flat 226px they took two thirds of the space they were given and the
 * section read as a footnote.
 */
.lp-card svg,
.lp-card img {
  display: block;
  height: clamp(150px, calc((100vw - 220px) / 4.3), 340px);
  width: auto;
  border-radius: 2px;
  box-shadow: var(--hang);
}

.lp-card figcaption {
  font: 500 11px var(--sans);
  color: var(--ink-3);
  text-align: center;
}
.lp-card figcaption b {
  display: block;
  font: 500 11.5px var(--sans);
  color: var(--ink-2);
  letter-spacing: 0.02em;
}

/* ── sections ────────────────────────────────────────────────────── */

.lp-section {
  padding: clamp(56px, 8vw, 116px) clamp(16px, 5vw, 56px);
  max-width: 1080px;
  margin: 0 auto;
}

/*
 * A section header spans the section.
 *
 * The heading and its paragraph both sat in a narrow left column while the
 * content below them ran the full width, so every section opened with a third
 * of a line of type and two thirds of nothing. Setting the title against its
 * description across the measure uses that space deliberately, which is what a
 * spread does with a standfirst.
 *
 * The pair is wrapped rather than laid out by a grid on the section itself.
 * That grid sized its columns from whatever the section was wide, which in the
 * full-bleed sections is the whole window — so the standfirst landed a hundred
 *-odd pixels past the right edge of the picture underneath it. Measured here,
 * against the same 1080 as everything else, the two edges agree.
 *
 * It also keeps the header a closed box: a paragraph added later — the "not on
 * sale yet" note under the price list — cannot fall into the header's row and
 * print itself over the standfirst, which is exactly what it did.
 */
.lp-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  column-gap: clamp(28px, 5vw, 84px);
  align-items: start;
  /* No measure of its own: it takes the section's, so widening a section for a
     picture carries the header out with it and the two edges stay together. */
  max-width: none;
  margin-inline: auto;
}

/* Optically level with the cap height of a much larger serif, not its box. */
.lp-head > .lp-sub { margin-top: 0.55em; max-width: 58ch; }

@media (max-width: 820px) {
  .lp-head { grid-template-columns: 1fr; }
  .lp-head > .lp-sub { margin-top: 0; }
}

.lp-section-quiet {
  max-width: none;
  background: var(--surface);
  border-block: 1px solid var(--line);
}
.lp-section-quiet > * { max-width: 1080px; margin-inline: auto; }
/* The strip takes the room it is in. It is the one place on the page where the
   product is shown four times over, and a column measure meant for text has
   nothing to do with how wide four boards want to be. */
.lp-section-quiet > .lp-strip { max-width: none; }

.lp-section h2 {
  font: 400 clamp(28px, 3.9vw, 50px)/1.08 var(--serif);
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  /* A two-line heading should break in the middle, not leave one word alone. */
  text-wrap: balance;
}

/* The picture-led sections take a wider measure than the columns of text do.
   Set on the section, so the header travels with the picture. */
.lp-chain { max-width: 1320px; }
.lp-shot > * { max-width: 1320px; }
.lp-section-quiet > .lp-head { max-width: 1320px; }

.lp-sub {
  font: 400 15px/1.65 var(--sans);
  color: var(--ink-2);
  max-width: 54ch;
  margin: 0 0 32px;
}

.lp-section h3 {
  font: 600 15px var(--sans);
  margin: 0 0 6px;
}

.lp-section p {
  font: 400 14.5px/1.65 var(--sans);
  color: var(--ink-2);
  margin: 0;
  max-width: 46ch;
}

/* ── steps ───────────────────────────────────────────────────────── */

.lp-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(24px, 3vw, 48px);
  margin: clamp(34px, 4vw, 52px) 0 0;
  padding: 0;
}

/* A rule over each column, the way a spread separates standing items. Three
   blocks of grey body text with nothing above them read as documentation. */
.lp-steps > li,
.lp-facts > div {
  border-top: 1px solid var(--line-strong);
  padding-top: 18px;
}

/* A numeral, not a badge. Set in the display serif at the size of a heading it
   becomes part of the typography instead of a small green sticker. */
.lp-step-n {
  display: block;
  margin-bottom: 10px;
  font: 400 clamp(28px, 3vw, 40px)/1 var(--serif);
  color: var(--accent);
  font-variant-numeric: lining-nums;
}

/* ── the three steps, playing ────────────────────────────────────── */

.lp-demo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
  margin-top: clamp(32px, 4vw, 48px);
  padding: clamp(20px, 2.6vw, 34px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* A fixed floor, so the section does not jump when the loop restarts and the
     board is momentarily empty. */
  min-height: clamp(280px, 30vw, 420px);
}
@media (max-width: 760px) {
  .lp-demo { grid-template-columns: 1fr; }
}

.lp-demo-panel { display: grid; align-content: start; gap: 9px; }

.lp-demo-label {
  font: 600 9.5px var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.lp-demo-label-2 { margin-top: 6px; }

.lp-demo-brief {
  font: 400 clamp(15px, 1.5vw, 18px)/1.45 var(--serif);
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  margin: 0;
  max-width: none;
  min-height: 3.4em;
}

/* The cursor is the whole reason the typing reads as typing. */
.lp-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 1px;
  vertical-align: -0.14em;
  background: var(--accent);
  animation: demo-caret 1.05s step-end infinite;
}
@keyframes demo-caret { 50% { opacity: 0; } }

.lp-demo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 22px;
  opacity: 0;
  transition: opacity .35s ease;
}
.lp-demo-chips.is-in { opacity: 1; }

.lp-demo-queries {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.lp-demo-queries li {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 9px;
  align-items: baseline;
  font: 400 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink-2);
  padding: 6px 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .3s ease, transform .3s ease;
}
.lp-demo-queries li.is-in { opacity: 1; transform: none; }

/* Blocks and photograph share one cell, so the second resolves over the first
   without the section changing height. */
.lp-demo-board {
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity .3s ease;
}
.lp-demo-board.is-in { opacity: 1; }
.lp-demo-board > * { grid-area: 1 / 1; }

.lp-demo-blocks svg,
.lp-demo-photo {
  display: block;
  width: auto;
  max-width: 100%;
  height: clamp(200px, 24vw, 340px);
  border-radius: 2px;
  box-shadow: var(--hang);
}

.lp-demo-photo {
  opacity: 0;
  transition: opacity .7s ease;
}
.lp-demo-photo.is-in { opacity: 1; }

@keyframes demo-tile {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
}

/* Captions for what is playing above them, so the step you are watching is
   the one that is lit. */
.lp-steps-compact { margin-top: clamp(28px, 3vw, 40px); }
.lp-steps-compact > li {
  transition: border-color .3s ease, opacity .3s ease;
  opacity: 0.62;
}
.lp-steps-compact > li.is-on { opacity: 1; border-top-color: var(--accent); }
.lp-steps-compact .lp-step-n { transition: color .3s ease; }

/* ── brief → queries → board ─────────────────────────────────────── */

/* The board at the end carries more weight than it did — it is the result, and
   at 0.85fr it was the smallest thing in a row about how it gets made. */
.lp-chain-flow {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) auto minmax(0, 1.05fr) auto minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(14px, 2vw, 32px);
  margin-top: clamp(36px, 4vw, 56px);
}

/* The arrows only mean anything on a row. Stacked, the order does the work. */
@media (max-width: 940px) {
  .lp-chain-flow { grid-template-columns: 1fr; gap: 28px; }
  .lp-chain-arrow { display: none; }
}

.lp-chain-step { display: grid; gap: 10px; align-content: start; }

.lp-chain-label {
  font: 600 9.5px var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.lp-brief {
  font: 400 clamp(15px, 1.5vw, 17px)/1.5 var(--serif);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin: 0;
  max-width: none;
}

.lp-read { display: flex; flex-wrap: wrap; gap: 5px; }

.lp-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 500 11px var(--sans);
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 3px 9px;
}
.lp-chip i { width: 8px; height: 8px; border-radius: 100px; }

.lp-chain-arrow {
  font-size: 20px;
  color: var(--ink-3);
  opacity: 0.5;
  justify-self: center;
}

.lp-queries {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 5px;
}
.lp-queries li {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 10px;
  align-items: baseline;
  font: 400 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink-2);
  padding: 7px 11px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.lp-role {
  font: 600 9.5px var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.lp-chain-out img {
  display: block;
  width: 100%;
  border-radius: 2px;
  box-shadow: var(--hang);
}

/* ── the editor ──────────────────────────────────────────────────── */

/* `auto` on the sides, not 0. The full-bleed sections centre their children,
   and a shorthand that zeroed the side margins pulled the picture 200px left of
   the header standing over it. */
.lp-screenshot { margin: 40px auto 0; }
.lp-screenshot img {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--hang);
}
/* Held to the same measure as the header above it. The extra hundred pixels it
   used to take made the picture and the words that introduce it disagree about
   where the section ends. */

/* ── facts ───────────────────────────────────────────────────────── */

/*
 * Two by two, not three across.
 *
 * Four items in an auto-fit grid put three on one row and left the fourth
 * hanging alone under a column of white space, which reads as a mistake rather
 * than as a list of four.
 */
.lp-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(26px, 3.4vw, 52px);
  margin-top: clamp(34px, 4vw, 52px);
}
@media (max-width: 700px) { .lp-facts { grid-template-columns: 1fr; } }

/*
 * Each claim shows itself first.
 *
 * These were four paragraphs in a row — the section where a reader stops. The
 * picture goes above the words and the words get shorter, so the section can be
 * understood at a glance and read only if it earns it.
 */
.lp-fact { display: grid; align-content: start; }
.lp-fact h3 { margin-top: 16px; }

.lp-fact-art {
  display: grid;
  place-items: center;
  min-height: clamp(150px, 17vw, 220px);
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

/* The shot list, set as the queries it really is. */
.lp-shotlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
  width: 100%;
}
.lp-shotlist li {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 8px;
  align-items: baseline;
  font: 400 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink-2);
  padding: 5px 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

/* A board with the colours read back out of it. */
.lp-swatchboard { margin: 0; display: grid; gap: 10px; justify-items: center; }
.lp-swatchboard img {
  display: block;
  height: clamp(110px, 12vw, 156px);
  width: auto;
  border-radius: 2px;
  box-shadow: var(--hang);
}
.lp-swatches {
  display: flex;
  width: 100%;
  max-width: 260px;
  height: 16px;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.lp-swatches span { flex: 1; }

/* The engines, cycling. */
#fact-layouts svg {
  display: block;
  height: clamp(120px, 13vw, 170px);
  width: auto;
  max-width: 100%;
  border-radius: 2px;
  box-shadow: var(--hang);
  animation: fact-swap .45s ease;
}
@keyframes fact-swap { from { opacity: 0; transform: scale(.97); } }
@media (prefers-reduced-motion: reduce) { #fact-layouts svg { animation: none; } }

/* Where the pictures come from. */
.lp-sources {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  align-items: end;
}
.lp-sources > div { display: grid; gap: 8px; justify-items: center; }
.lp-sources img {
  display: block;
  height: clamp(78px, 8.5vw, 116px);
  width: auto;
  max-width: 100%;
  border-radius: 2px;
  box-shadow: var(--hang);
}
.lp-sources b {
  font: 600 9.5px var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ── pricing ─────────────────────────────────────────────────────── */

/* The two cards take the measure rather than sitting in the left two thirds of
   it — capped at 720 they left the same band of nothing down the right that the
   header used to. */
.lp-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 16px;
}

/* The shorter card still stretches to the taller one's height, so its button
   would otherwise sit halfway up with a hand's width of nothing beneath it.
   `auto` above the button spends that space before it instead, and the two
   buttons land on one line. */
.lp-plan {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* A card the colour of the page behind it is not a card. */
  background: var(--surface);
}
.lp-plan.is-pro { border-color: var(--accent); background: var(--accent-soft); }

.lp-price {
  font: 400 26px var(--serif);
  color: var(--ink);
  margin: 0;
}

.lp-blurb { font-size: 13.5px; }

.lp-features {
  list-style: none;
  margin: 6px 0 14px;
  padding: 0;
  display: grid;
  gap: 6px;
  font: 400 13.5px/1.45 var(--sans);
  color: var(--ink-2);
}
.lp-features li { padding-left: 18px; position: relative; }
.lp-plan > .btn { margin-top: auto; }
.lp-features li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 100px;
  background: var(--accent);
  opacity: 0.55;
}

/* Under the cards, in the flow — not in the header's row on top of the
   standfirst, which is where the section grid used to put it. */
.lp-note { margin: 18px 0 0; }

/*
 * The close.
 *
 * It was a heading and a button standing in the same dark as everything above
 * them, which reads as the page running out rather than ending. A wash of the
 * accent rising from the bottom edge gives the last line somewhere to arrive.
 */
.lp-final {
  text-align: center;
  max-width: none;
  padding-block: clamp(76px, 10vw, 156px);
  background:
    radial-gradient(120% 116% at 50% 118%, color-mix(in oklab, var(--accent) 15%, transparent), transparent 64%),
    var(--surface);
  border-block: 1px solid var(--line);
}
.lp-final h2 {
  font-size: clamp(32px, 5.2vw, 66px);
  margin-bottom: 14px;
}
.lp-final-note {
  margin: 0 auto 30px;
  max-width: none;
  color: var(--ink-3);
}

/* ── footer ──────────────────────────────────────────────────────── */

.lp-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px clamp(20px, 4vw, 48px);
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(28px, 3.4vw, 44px) clamp(16px, 5vw, 56px) clamp(40px, 5vw, 64px);
  font: 400 12.5px var(--sans);
  color: var(--ink-3);
}
.lp-foot .brand { text-decoration: none; color: var(--ink); }
.lp-foot a { color: var(--ink-2); text-decoration: none; }
.lp-foot a:hover { color: var(--ink); }

.lp-foot-links { display: flex; gap: clamp(14px, 2vw, 26px); }
/* Last on a wide row, first to drop under the other two when the row breaks —
   it is the licence note, not navigation. */
.lp-foot-credit { flex: 1 1 320px; text-align: right; }
@media (max-width: 700px) { .lp-foot-credit { text-align: left; } }

/* ── legal pages ─────────────────────────────────────────────────── */

/*
 * A document, not a landing section. One measure, generous line height,
 * headings that divide rather than sell. These pages get read twice — once by
 * a person deciding whether to trust the tool, once by a platform reviewer
 * deciding whether to approve it — and both read fast.
 */
.legal {
  max-width: 68ch;
  margin: 0 auto;
  padding: clamp(40px, 7vw, 88px) clamp(18px, 5vw, 32px) clamp(64px, 10vw, 120px);
  font: 400 15.5px/1.75 var(--sans);
  color: var(--ink-2);
}
.legal h1 { font: 400 clamp(30px, 5vw, 42px)/1.15 var(--serif); color: var(--ink); margin: 0; letter-spacing: -0.015em; }
.legal-updated { font-size: 13px; color: var(--ink-3); margin: 10px 0 34px; }
.legal h2 { font: 600 16px/1.3 var(--sans); color: var(--ink); margin: 36px 0 10px; }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 14px; padding-left: 1.2em; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.legal strong { color: var(--ink); font-weight: 600; }