/* ===========================================================================
   KEY PLEASE — keypleaseapp.com

   One idea, and the whole page is built on it rather than decorated with it.

   THE MARK IS TWO TOGGLES: cherry above with its knob to the LEFT, which is
   shut, and mint below with its knob to the RIGHT, which is open. That pair is
   the entire product in one shape: one thing asked for, one thing granted.

   REDESIGNED 5 Sep 2026. That pair used to BE the page: two full bleed bands,
   498px of them at 1280, carrying two sentences in 82px display type before
   anybody had scrolled. Michael: "see if you can slim this section down, it
   looks very big", and "don't make it look so AI-generated and basic, add
   visuals, break things down nicely, don't overkill with the amount of text."

   So the toggle pair is now an OBJECT beside the name rather than the
   architecture of the page, at about a fifth of the height, and the block
   screen is in the first frame with it. Below that the page alternates on
   purpose: an airy section with one sentence in it, then a dense one, then a
   showcase whose rail of phones changes length group to group. That varying
   rail is the rhythm, and it is the thing the page did not have. Everything
   else is still a printed document: hairline rules, hanging engraved labels,
   square corners.

   Rules taken from brand/index.html and not open to reinterpretation here:

   - CHERRY IS NEVER A VERDICT. It carries the mark, a heading or a fill. It is
     never an error, never a warning, and never means "you have failed". On this
     page cherry means one thing only: SHUT. Mint means OPEN. They are one
     object in two positions, not a red light and a green one.
   - The mark does not change colour with the theme. Only the ground behind it
     does, so the two bands are identical in light and in dark.
   - Square and hard edges are the system. 12px rounding is reserved for things
     you tap, and almost nothing on a marketing page is tappable, so almost
     nothing here is rounded. That is deliberate and is not an oversight.
   - Archivo alone. Display is the WIDTH axis at 76 and the weight at 800. That
     is not decoration: a normal width face at these sizes runs off a 390px
     phone. Body sits at the full width, 100.
   - Cherry as TEXT on the light ground is about 3.9:1 and fails. --cherry-ink
     is the re-derived value for type, and it is the only one used for words.

   No third party request. No tracking of any kind. One stylesheet, one font
   file, and the screenshots. There are thirty lines of inline JavaScript at
   the foot of index.html and the page is COMPLETE AND CORRECT WITHOUT THEM:
   all they do is let the phone shots and the drawn marks arrive as you reach
   them. No word on this page is ever hidden waiting for a script. See the
   MOVEMENT block near the foot of this file.
   ======================================================================== */

/* --- the typeface --------------------------------------------------------
   Archivo variable, subset from brand/fonts/Archivo-Variable.ttf and kept
   variable: both axes survive, because the display setting needs wdth 76 and
   the body needs wdth 100 out of the same file. SIL Open Font Licence, and the
   licence ships beside it at assets/fonts/OFL.txt.

   THE DEFAULT WEIGHT IN THIS FILE IS 600, not 400. Every rule that wants body
   weight has to say so, which is why font-variation-settings appears more often
   below than it otherwise would. ---------------------------------------- */

@font-face {
  font-family: Archivo;
  src: url("assets/fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

/* --- tokens ---------------------------------------------------------------
   Light is the default and dark is a re-derivation, exactly as the app does it.
   Cherry and mint keep the same fill in both, because they are the mark.
   Anything read as text is re-derived against the ground it sits on. ------ */

:root {
  color-scheme: light dark;

  --bg: #FFF9F5;
  --surface: #F7EFE9;
  --fg: #1A1614;
  --muted: #6F635E;
  --line: rgba(26, 22, 20, 0.22);
  --line-firm: rgba(26, 22, 20, 0.55);

  --cherry: #E63946;
  --cherry-ink: #C81B28;
  --mint: #2A9D8F;
  --mint-ink: #1F736A;

  /* What is drawn on a brand fill. The knob is this, in both themes. */
  --glyph: #FFF9F5;
  /* Type knocked out of cherry or mint. Both are mid tone, so it is always the
     ink: ink on cherry is 4.3:1 and ink on mint is 5.4:1, where ground on
     cherry is only 4.0:1 and would fail. */
  --on-brand: #1A1614;

  --page: 64rem;      /* the page block */
  --measure: 34rem;   /* the reading column */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1A1614;
    --surface: #241E1B;
    --fg: #FFF9F5;
    --muted: #A69C96;
    --line: rgba(255, 249, 245, 0.22);
    --line-firm: rgba(255, 249, 245, 0.55);
    --cherry-ink: #EC5F6A;
    --mint-ink: #2FAA9B;
  }
}

/* --- reset, lightly ------------------------------------------------------ */

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

body, h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, figure, blockquote {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }
img, svg { max-width: 100%; display: block; }
html { -webkit-text-size-adjust: 100%; }

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

body {
  background: var(--bg);
  color: var(--fg);
  font-family: Archivo, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-variation-settings: "wdth" 100, "wght" 400;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
}
.skip:focus {
  left: 12px;
  top: 12px;
  z-index: 99;
  background: var(--fg);
  color: var(--bg);
  padding: 10px 16px;
}

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

.wrap {
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: 28px;
}

@media (max-width: 30rem) {
  .wrap { padding-inline: 20px; }
}

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

.display {
  font-variation-settings: "wdth" 76, "wght" 800;
  letter-spacing: -0.022em;
  line-height: 0.94;
  text-wrap: balance;
}

/* Hanging small caps. The label in the margin of a printed document, and the
   only ornament this page has below the hero.

   Where a section has a drawn mark, the mark sits ABOVE this label as its own
   <img class="figuremark">, not as a ::before on the label, so it can be swapped
   or dropped without touching the type. */
.engraved {
  font-variation-settings: "wdth" 100, "wght" 800;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.4;
}

a { color: inherit; }

.link {
  color: var(--mint-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.link:hover { text-decoration-thickness: 2px; }

/* A link standing on its own line rather than inside a sentence is a target,
   and a 19px target on a phone is a miss. Inline links in running text are
   left alone: padding them would break the line. */
.link--block {
  display: inline-block;
  padding: 13px 0;
}

strong, b { font-variation-settings: "wdth" 100, "wght" 700; }

/* ==========================================================================
   THE MASTHEAD
   ======================================================================== */

.masthead {
  padding: 22px 0 20px;
}

.masthead .wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  margin-right: auto;
}

/* The mark is used at the file, never redrawn. 40px is the floor the brand
   sheet sets for it: below that the two toggles merge into one bar. */
.wordmark img {
  width: 46px;
  height: auto;
}

.wordmark .name {
  font-variation-settings: "wdth" 76, "wght" 800;
  letter-spacing: -0.02em;
  font-size: 25px;
  line-height: 1;
}

.pages {
  display: flex;
  gap: 20px;
}

.pages a {
  font-variation-settings: "wdth" 100, "wght" 700;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  text-decoration: none;
  /* 13px of padding takes the tap target past 44px without the link looking
     like a button. A 32px target on a phone is the commonest thing an audit
     finds on a page like this. */
  padding: 13px 0;
  border-bottom: 2px solid transparent;
}
.pages a:hover { border-bottom-color: var(--fg); }
.pages a[aria-current="page"] { border-bottom-color: var(--fg); }

/* ==========================================================================
   THE FIELD — the hero, and it is now a fifth of what it was

   REDESIGNED 5 Sep 2026. It was two full-bleed bands, 498px of them at 1280,
   two sentences in 82px type, and the reader had seen nothing of the product
   by the time they had to scroll. Michael: "see if you can slim this section
   down, it looks very big."

   Now: the name, the sentence, the honest note, and art/hero-mark.svg beside
   them at its proper size. Target is the field ENDING inside 560px on a
   laptop, so the first pair of phones below is in the same screen.

   ⚠️ hero-mark.svg HAS A FLOOR OF 360px. The thread running between the two
   toggles is the idea in the drawing, and under about 300px it is a hairline.
   So the art breaks the wrap's padding on a phone and runs edge to edge, and
   under 384px the <picture> swaps in the plain mark instead. Do not "fix" the
   negative margins below by making the art smaller.

   ⚠️ IT ANIMATES ITSELF: thread, then the mint knob travelling shut to open,
   once, 1.5s, resting on the true logo, and it honours reduced motion inside
   the file. NOTHING ELSE ON THIS PAGE ANIMATES THAT IDEA. Everything in the
   MOVEMENT block near the foot of this file is pointer-driven and below the
   fold on purpose, so the two never run at once.
   ======================================================================== */

.field {
  background: var(--surface);
  /* The mark restated as an edge: shut, then open, hard cut in the middle.
     It is a mark, not a verdict, which is the only way cherry is allowed to
     be used at this width. */
  border-bottom: 4px solid transparent;
  border-image: linear-gradient(to right, var(--cherry) 0 50%, var(--mint) 50% 100%) 1;
  padding: clamp(26px, 3.4vw, 40px) 0 clamp(20px, 2.6vw, 30px);
  overflow: hidden;
}

.field__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

.field__copy { min-width: 0; }

.field h1 {
  font-variation-settings: "wdth" 76, "wght" 800;
  letter-spacing: -0.028em;
  line-height: 0.9;
  font-size: clamp(46px, 7.4vw, 84px);
  margin-top: 10px;
}

.field__sub {
  margin-top: 16px;
  max-width: 22ch;
  font-size: clamp(19px, 2.3vw, 27px);
  line-height: 1.26;
  font-variation-settings: "wdth" 100, "wght" 500;
  letter-spacing: -0.008em;
}

/* The art is the file's own artboard and is never cropped or restyled. */
.field__art img {
  width: 100%;
  height: auto;
}

/* The honest ask. No badge, because there is nothing to link to yet, and an
   imitation of Apple's badge saying a false thing is worse than our own type
   saying a true one. It is one LINE now, not a 100px black slab. */
.soon {
  margin-top: 22px;
  display: inline-block;
  border-top: 2px solid var(--fg);
  padding-top: 10px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--muted);
  max-width: 34ch;
}

.soon b { color: var(--fg); }

@media (max-width: 56rem) {
  .field__in { grid-template-columns: 1fr; gap: 22px; }
  /* Capped, or a tablet gets a 768px logo and the hero is tall again. 460 is
     comfortably above the art's 360px floor. */
  .field__art {
    display: block;
    width: min(100%, 460px);
    margin-inline: auto;
  }
}

/* PHONES GET THE COMPACT MARK, and it stays inside the column.

   hero-mark.svg has a 360px floor: below that the thread running between the
   two toggles becomes a hairline and the idea in the drawing is gone. A phone's
   reading column is narrower than that, so the art used to break out of the
   wrap and run to both edges to keep the floor. Michael, from his own phone on
   6 Sep: "the logo is way too big on the website on mobile."

   He was right, and the bleed made it worse: the toggles ran off both sides, so
   the shape was cropped as well as enormous. The swap to the plain mark was set
   at 384px, and an iPhone is 393px wide, so no phone ever got it.

   Both fixed here. The <picture> in index.html swaps at this same 34rem, so
   below it the art is the compact mark, which has no thread and therefore no
   floor. It sits in the column like everything else, left aligned to the
   sentence above it. Keep the two numbers the same. */
@media (max-width: 34rem) {
  .field__art {
    margin-inline: 0;
    width: min(100%, 236px);
    max-width: none;
  }
}

/* ==========================================================================
   SECTIONS — a printed document, but not all at the same weight

   The old page was heading, paragraph, heading, paragraph, all the way down,
   and every block carried the same mass. The rhythm now alternates on
   purpose: --air is one sentence with room around it, band--surface is a
   dense one on a different ground, and .shots is mostly picture.
   ======================================================================== */

.section {
  padding: clamp(44px, 6vw, 76px) 0;
}

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

/* A different ground rather than another rule. Two of these never touch. */
.band--surface {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section + .band--surface,
.band--surface + .section { border-top: 0; }

/* The one sentence that carries the product gets the most air on the page. */
.section--air {
  padding: clamp(44px, 5.6vw, 74px) 0;
  text-align: center;
}

.section--air .figuremark { margin-inline: auto; }
.section--air .pullquote,
.section--air .note { margin-inline: auto; }
.section--air h2 { max-width: none; margin-inline: auto; }

/* The one that carries the whole argument gets rules top and bottom. */
.section--ruled {
  border-top: 3px solid var(--fg);
  border-bottom: 3px solid var(--fg);
}

/* HEADINGS ARE TWO LINES, and the second one is the half that lands: the
   turn is what makes it read as written rather than generated. Taken from
   daysstrong.com and motorfileapp.com, where every heading is set this way. */
.section h2,
.group__copy h2 {
  font-variation-settings: "wdth" 76, "wght" 800;
  letter-spacing: -0.022em;
  line-height: 0.96;
  font-size: clamp(29px, 4.4vw, 50px);
  max-width: 18ch;
  text-wrap: balance;
  color: var(--muted);
}

.section h2 b,
.group__copy h2 b {
  font-variation-settings: "wdth" 76, "wght" 800;
  color: var(--fg);
}

.section .engraved + h2,
.group__copy .engraved + h2 { margin-top: 12px; }

/* ONE SENTENCE UNDER A HEADING, not four. This is the single biggest thing
   that was making the page read as generated, and the cap is deliberate. */
.section h2 + p,
.group__copy h2 + p {
  margin-top: 16px;
  max-width: var(--measure);
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* Two classes deep on purpose: it has to beat `.section h2 + p` above, which
   is the muted one-liner every other section gets. These two sections carry a
   fuller line instead, so the texture changes as you come down the page. */
.section .lede-line {
  margin-top: 16px;
  max-width: 46ch;
  font-size: clamp(17px, 1.9vw, 19.5px);
  line-height: 1.45;
  font-variation-settings: "wdth" 100, "wght" 500;
  color: var(--fg);
}

.pullquote {
  margin-top: 22px;
  max-width: 26ch;
  font-size: clamp(21px, 3.1vw, 34px);
  line-height: 1.22;
  font-variation-settings: "wdth" 100, "wght" 500;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.note {
  margin-top: 18px;
  color: var(--muted);
  font-size: 14.5px;
  max-width: var(--measure);
}

/* --- the ledger: how it works -------------------------------------------
   Not three cards. A ruled list with the marker hanging in the margin, and
   the markers are words rather than numbers, because 01 02 03 down the side
   of a landing page is the single most copied thing on the internet. ----- */

.ledger {
  margin-top: 28px;
  border-top: 2px solid var(--fg);
}

.ledger li {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 8px 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.ledger .when { padding-top: 4px; }

.ledger h3 {
  font-variation-settings: "wdth" 76, "wght" 800;
  letter-spacing: -0.018em;
  font-size: clamp(21px, 2.8vw, 28px);
  line-height: 1.02;
}

.ledger p {
  margin-top: 6px;
  max-width: 46ch;
  color: var(--muted);
  font-size: 15.5px;
}

@media (max-width: 42rem) {
  .ledger li { grid-template-columns: 1fr; gap: 6px; }
  .ledger .when { padding-top: 0; }
}

/* --- the drawn marks -----------------------------------------------------
   art/*.svg. They are the app's own furniture drawn small, out of one object
   (the track) and one operation (punching a hole in it). Loaded as <img>,
   which is why each file carries its own prefers-color-scheme block: an SVG
   in an <img> is a separate document and cannot inherit this page's tokens.

   THEY ARE RATIONED. A mark heads a section only where it says something the
   heading cannot, which is two places on this page and not eight. -------- */

.figuremark {
  height: clamp(64px, 8vw, 92px);
  width: auto;
  margin-bottom: 18px;
}

.stepmark {
  width: 56px;
  height: 56px;
  margin-bottom: 10px;
}

@media (max-width: 42rem) {
  .stepmark { width: 46px; height: 46px; margin-bottom: 6px; }
}

/* ==========================================================================
   THE SHOWCASE — where the rhythm comes from

   Both of Michael's other app sites are built on this and this page was not:
   a small copy block (label, two-line heading, ONE sentence) against a RAIL
   of phones whose length changes from group to group. One phone, then two,
   then one. The varying rail is the beat; identical rows of equal weight all
   the way down is what a generated page looks like.
   ======================================================================== */

.shots {
  padding: clamp(32px, 4vw, 52px) 0 clamp(26px, 3.2vw, 42px);
  border-top: 1px solid var(--line);
}

.section + .shots,
.shots + .section { border-top: 0; }

.group {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(26px, 5vw, 60px);
  align-items: center;
}

/* The first group sits directly under the field, so its copy hangs from the
   top rather than floating in the middle of a 470px phone with 130px of
   nothing above it. Every group after that is centred against its rail. */
.group--top { align-items: start; }

.group--flip .group__copy { order: 2; }
.group--flip .rail { order: 1; }

.group__copy { min-width: 0; }

.rail {
  display: grid;
  gap: clamp(14px, 2.4vw, 28px);
  align-items: end;
  min-width: 0;
}

.rail--one { grid-template-columns: minmax(0, 340px); justify-content: center; }
.rail--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Two phones read as a pair, so the second one sits a step lower: a rail of
   two at exactly the same height is a stock image, a rail of two offset is
   two people holding two phones. */
.rail--two .shot:nth-child(2) { transform: translateY(22px); }

/* --- a screen, in the drawn frame ----------------------------------------
   art/device-frame.svg is an OVERLAY with a real hole in it, so the shot
   sits behind it and only the filenames in assets/shots/ ever change.

   THE NUMBERS ARE THE FRAME'S OWN, not guesses. Its viewBox is -6 0 592 1228
   and the window is a 552 x 1200 rounded rectangle at 14, 14 inside the 0, 0
   outer box, so in the container's own percentages that is:
     left   (14 + 6) / 592
     top    14 / 1228
     size   552 / 592  by  1200 / 1228
   The window's corner radius is 67, which on a 552 x 1200 box is 12.138% of
   the width and 5.583% of the height. It has to be there: the bezel is only
   14 thick, so a square screenshot corner pokes out past the silhouette.
   ---------------------------------------------------------------------- */

.phone {
  position: relative;
  aspect-ratio: 592 / 1228;
}

.phone__screen {
  position: absolute;
  left: 3.3784%;
  top: 1.1401%;
  width: 93.2432%;
  height: 97.7199%;
  border-radius: 12.138% / 5.583%;
  object-fit: cover;
}

.phone__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.shot figcaption {
  margin-top: 12px;
  padding-left: 3.3784%;
  font-variation-settings: "wdth" 100, "wght" 800;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 52rem) {
  .group { grid-template-columns: 1fr; }
  .group--flip .group__copy { order: 1; }
  .group--flip .rail { order: 2; }
  .rail { margin-top: 28px; }
  .rail--one { grid-template-columns: minmax(0, 300px); }
  .rail--two .shot:nth-child(2) { transform: none; }
}

@media (max-width: 30rem) {
  /* Two phones side by side on a 390 phone are two 169px thumbnails, and the
     brief was to use these bigger, not smaller. So the pair stops being a row
     and becomes a step: one hanging left, the next hanging right and below
     it, each 74% of the column, which is half as wide again as the row was.
     It still reads as two people holding two phones, which is the point. */
  .rail--two { grid-template-columns: 1fr; gap: 22px; }
  .rail--two .shot { width: 74%; }
  .rail--two .shot:nth-child(2) { margin-left: auto; }
  .shot figcaption { font-size: 9.5px; letter-spacing: 0.14em; }
  .rail--two .shot:nth-child(2) figcaption { text-align: right; padding-right: 3.3784%; padding-left: 0; }
}

/* --- the category list ---------------------------------------------------
   A plain list, in one weight. No icons, no colour coding, nothing that ranks
   one of them as worse than another. THREE columns rather than two: eleven
   short words down two long columns was a wall, and this section is meant to
   be the wide, quick one between two dense ones. --------------------------- */

.tally {
  margin-top: 28px;
  border-top: 2px solid var(--fg);
  columns: 3;
  column-gap: 34px;
}

.tally li {
  break-inside: avoid;
  border-bottom: 1px solid var(--line);
  padding: 11px 0;
  font-variation-settings: "wdth" 100, "wght" 600;
  font-size: 16px;
  position: relative;
}

/* A mint edge that grows when a row is pointed at: these are the things you
   would be OPENING, and mint is the open half. Never cherry here, which would
   read as eleven things you have been told off for. */
.tally li::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: var(--mint);
  transform: scaleY(0);
  transform-origin: 50% 0;
}

@media (max-width: 48rem) {
  .tally { columns: 2; column-gap: 28px; }
}

@media (max-width: 30rem) {
  .tally { columns: 1; }
}

/* --- shut and open, as two columns ---------------------------------------
   The page's one idea, used a second time and quietly. The column of things
   that reach the keyholder is marked open, in mint. The column of things that
   never do is marked shut, in cherry. Neither is a verdict about anybody: they
   are the same two positions the mark is drawn in. ----------------------- */

.pair {
  margin-top: 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 52px);
}

.pair > div { min-width: 0; }

.pair h3 {
  font-variation-settings: "wdth" 76, "wght" 800;
  letter-spacing: -0.018em;
  font-size: clamp(20px, 2.6vw, 26px);
  line-height: 1.05;
  padding-bottom: 12px;
}

.pair .col--open h3 { border-bottom: 6px solid var(--mint); }
.pair .col--shut h3 { border-bottom: 6px solid var(--cherry); }

.pair ul { margin-top: 4px; }

.pair li {
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
  font-variation-settings: "wdth" 100, "wght" 500;
  font-size: 15.5px;
  line-height: 1.4;
}

@media (max-width: 40rem) {
  .pair { grid-template-columns: 1fr; gap: 30px; }
}

/* --- the aside: the parent case, kept secondary -------------------------- */

.aside {
  margin-top: 34px;
  border-left: 6px solid var(--fg);
  padding: 4px 0 4px 22px;
  max-width: var(--measure);
}

.aside h3 {
  font-variation-settings: "wdth" 76, "wght" 800;
  letter-spacing: -0.018em;
  font-size: clamp(21px, 2.7vw, 28px);
  line-height: 1.03;
  margin-bottom: 10px;
}

.aside p + p { margin-top: 12px; }

/* --- the statement: what it costs, in words ------------------------------ */

.statement {
  margin-top: 26px;
  border-top: 2px solid var(--fg);
  max-width: var(--measure);
}

.statement > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

/* The dotted leader has to grow, so the dt is a flex row of its own: the label,
   then the rule, and the rule takes what is left. Nesting it inside a dt that
   was not itself a flex container is why it collapsed to nothing first time. */
.statement dt {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-variation-settings: "wdth" 100, "wght" 500;
  font-size: 15.5px;
}

.statement .leader {
  flex: 1;
  min-width: 18px;
  border-bottom: 1px dotted var(--line-firm);
  transform: translateY(-4px);
}

.statement dd {
  flex: none;
  font-variation-settings: "wdth" 100, "wght" 800;
  font-size: 15.5px;
  text-align: right;
}

/* Every way out, and how long each takes. Three paragraphs of prose became
   four rows, which is the same information in a tenth of the reading. */
.statement--ways {
  margin-top: 22px;
  max-width: none;
}

/* ==========================================================================
   MOVEMENT — 5 Sep 2026

   Michael asked for animation. What he has asked for repeatedly NOT to have,
   on the other app sites, is "everything fades up as you scroll": it is the
   house style of every generated template there is, and on daysstrong.com it
   twice left real content permanently invisible when the observer misfired.

   So the rules here are:

   1. THE HERO ALREADY MOVES, and it moves on its own. art/hero-mark.svg
      animates inside the file: the thread draws, then the mint knob travels
      shut to open, once, and stops on the true logo. Nothing in this
      stylesheet touches that idea, because two things saying "shut, then
      open" at once say neither.
   2. EVERYTHING ELSE IS POINTER-DRIVEN. Objects behave like objects on a
      desk: a phone straightens when you look at it, a row lights its edge.
      Nothing moves on its own below the fold.
   3. THE ONE SCROLL REVEAL IS OBJECTS ONLY — the drawn marks and the phone
      shots, which carry no words anybody has to read. NO HEADING AND NO
      PARAGRAPH IS EVER HIDDEN. Text on this page is visible at rest, always,
      whatever happens to the script.
   4. It is opt-IN: the hiding rule is written against .js-reveal, a class
      that only exists once the script at the foot of index.html has run and
      has checked for reduced motion itself. No script, no hiding.
   ======================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* --- the reveal, and it is deliberately small ------------------------- */
  .js-reveal .reveal {
    opacity: 0;
    transform: translateY(14px);
  }

  .reveal {
    transition:
      opacity 460ms cubic-bezier(0.2, 0.8, 0.2, 1),
      transform 460ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .js-reveal .reveal.is-in {
    opacity: 1;
    transform: none;
  }

  /* The second phone of a pair is offset, so its rest state is not "none".
     Written out rather than left to the shorthand, or it snaps flat. */
  .js-reveal .rail--two .shot:nth-child(2) { transform: translateY(36px); }
  .js-reveal .rail--two .shot:nth-child(2).is-in { transform: translateY(22px); }

  @media (max-width: 52rem) {
    .js-reveal .rail--two .shot:nth-child(2) { transform: translateY(14px); }
    .js-reveal .rail--two .shot:nth-child(2).is-in { transform: none; }
  }

  /* --- a phone straightens to be read ----------------------------------- */
  .shot .phone {
    transition: transform 440ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .shot:hover .phone { transform: translateY(-10px); }

  /* --- the category rows light their open edge -------------------------- */
  .tally li::before { transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1); }
  .tally li:hover::before { transform: scaleY(1); }

  /* --- the ledger rows, and the mark on each ---------------------------- */
  .ledger .stepmark { transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1); }
  .ledger li:hover .stepmark { transform: translateX(6px); }

  /* --- the mark in the masthead ----------------------------------------- */
  .wordmark img { transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1); }
  .wordmark:hover img { transform: translateX(3px); }

  /* --- the honest ask --------------------------------------------------- */
  .soon { transition: border-color 200ms ease; }
}

/* ==========================================================================
   THE FOOT
   ======================================================================== */

.colophon {
  border-top: 3px solid var(--fg);
  padding: 30px 0 56px;
}

.colophon .wrap {
  display: flex;
  align-items: center;
  gap: 18px 24px;
  flex-wrap: wrap;
}

.colophon .fineprint {
  width: 100%;
  color: var(--muted);
  font-size: 13px;
  margin-top: 6px;
}

/* ==========================================================================
   THE LEGAL PAGES

   Same furniture, one column, and nothing brand coloured except a link. A
   privacy policy painted in a brand colour is a privacy policy that looks like
   an advert, and this one has to survive being read by a regulator.
   ======================================================================== */

.doc {
  padding: clamp(30px, 5vw, 56px) 0 0;
}

.doc .doc__head {
  border-bottom: 3px solid var(--fg);
  padding-bottom: clamp(26px, 4vw, 40px);
}

.doc h1 {
  font-variation-settings: "wdth" 76, "wght" 800;
  letter-spacing: -0.024em;
  line-height: 0.94;
  font-size: clamp(46px, 9vw, 96px);
  max-width: 12ch;
}

.doc .doc__stand {
  margin-top: 20px;
  max-width: var(--measure);
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.45;
  font-variation-settings: "wdth" 100, "wght" 500;
}

.doc .updated {
  margin-top: 18px;
}

.doc section {
  padding: clamp(32px, 4.4vw, 52px) 0;
  border-bottom: 1px solid var(--line);
}

.doc h2 {
  font-variation-settings: "wdth" 76, "wght" 800;
  letter-spacing: -0.02em;
  line-height: 0.98;
  font-size: clamp(26px, 4vw, 40px);
  max-width: 20ch;
  margin-bottom: 18px;
}

.doc h3 {
  font-variation-settings: "wdth" 100, "wght" 800;
  font-size: 17px;
  line-height: 1.35;
  margin: 26px 0 8px;
}

.doc p,
.doc li {
  max-width: var(--measure);
}

.doc p + p { margin-top: 14px; }

.doc .bullets {
  margin-top: 14px;
}

.doc .bullets li {
  padding: 9px 0 9px 22px;
  border-bottom: 1px solid var(--line);
  position: relative;
  max-width: var(--measure);
}

.doc .bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 21px;
  width: 9px;
  height: 2px;
  background: var(--fg);
}

.doc .bullets li:first-child { border-top: 1px solid var(--line); }

/* Two column rows: the thing, and what happens to it. */
.doc .rows {
  margin-top: 16px;
  border-top: 2px solid var(--fg);
  max-width: 46rem;
}

.doc .rows > div {
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: 6px 26px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.doc .rows dt {
  font-variation-settings: "wdth" 100, "wght" 700;
  font-size: 15.5px;
}

.doc .rows dd {
  color: var(--muted);
  font-size: 15.5px;
  max-width: none;
}

@media (max-width: 42rem) {
  .doc .rows > div { grid-template-columns: 1fr; }
}

/* A quiet panel. Never cherry: on a legal page a coloured panel reads as a
   warning, and nothing here is telling anybody off. */
.doc .panel {
  background: var(--surface);
  border-left: 6px solid var(--fg);
  padding: 20px 22px;
  margin: 22px 0;
  max-width: 46rem;
}

.doc .panel .engraved { margin-bottom: 10px; }
.doc .panel p { max-width: none; font-size: 15.5px; }
.doc .panel p + p { margin-top: 10px; }

.doc .aside-note {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  color: var(--muted);
  font-size: 14.5px;
  max-width: var(--measure);
}

/* An onward link, set as a ruled row rather than a card. */
.doclink {
  display: block;
  text-decoration: none;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-top: -1px;
  padding: 14px 0;
  max-width: 46rem;
}

.doclink:hover { background: var(--surface); }

.doclink .t {
  font-variation-settings: "wdth" 100, "wght" 800;
  font-size: 16.5px;
  color: var(--mint-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.doclink .m {
  color: var(--muted);
  font-size: 14.5px;
  margin-top: 3px;
}

.doc .foot {
  padding: 34px 0 0;
}