@import url("fonts.css");

/* ===========================================================================
   DAYS STRONG — the marketing site (daysstrong.com)

   Three pages, no build step, no framework, no third-party request. The whole
   site is two stylesheets, three HTML files and three font files.

   It borrows the app's own rules rather than inventing a second brand:

   - Two faces, one object. Day is the icon's cream (#f4f1e8) with ink type;
     night is near-black with the warmth kept in the type, NOT in the ground.
     Every colour reads from a token so the two can never drift apart.
   - Instruments are plates, information is print. The counter on the home page
     is a machine and gets a plate. Everything else is a printed document:
     ruled lines, hanging margins, dotted leaders, engraved small caps.
   - ONE big solid colour field per page, and then restraint. Home is amber
     (the icon's diagonal), Support is ink, Privacy is the green the app uses
     for a day that went well. Nothing else on the page competes with it.
   - No emoji. The only mark on the site is the tally, drawn as SVG.
   ======================================================================== */

/* --- tokens: NIGHT, and there is only night --------------------------------
   The site follows the APP's default face, and the app defaults to night
   (25 Aug 2026). It does NOT follow the visitor's system setting: a habit
   tracker's marketing page that arrives cream for one person and black for
   the next is two products, and the screenshots below are all night-face.
   The page would disagree with its own pictures.

   The first "warm dark" the app tried came out brown and Michael rejected it.
   The ground is near-black with only a trace of warmth; the warmth lives in
   the off-white type and in the amber. Black room, warm lamp. ----------- */

:root {
  color-scheme: dark;

  --ink: #0b0b0a;          /* the ground */
  --ink-2: #111110;
  --plate: #191817;        /* paper laid on the ground */

  --bone: #f6f1e8;         /* the type */
  --ash: #a89f93;
  --dim: #756d64;

  --t2: rgba(246, 241, 232, 0.08);
  --t3: rgba(246, 241, 232, 0.12);
  --t4: rgba(246, 241, 232, 0.18);
  --t6: rgba(246, 241, 232, 0.44);

  /* Lifted a little off the icon's amber so it does not go muddy on black. */
  --amber: #f2a516;
  --good: #56d98b;

  --glow-1: rgba(245, 166, 35, 0.08);
  --glow-2: rgba(228, 87, 46, 0.05);

  --grain-opacity: 0.05;
  --grain-blend: overlay;

  --plate-face: linear-gradient(160deg, rgba(246, 241, 232, 0.045), rgba(246, 241, 232, 0) 50%);
  --plate-shadow:
    inset 0 0 0 1.5px rgba(246, 241, 232, 0.09),
    0 3px 0 rgba(0, 0, 0, 0.4);

  /* Type knocked out of a solid amber or green field. Always the dark ground:
     both are mid-tone, so knocking out with the off-white would be weak. */
  --on-field: #0b0b0a;

  --font-display: "Big Shoulders", "Haettenschweiler", "Arial Narrow", sans-serif;
  --font-sans: "Familjen Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "Azeret Mono", ui-monospace, "SF Mono", monospace;

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

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

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

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

ul, ol { list-style: none; }

img, svg { max-width: 100%; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

/* --- the page ------------------------------------------------------------ */

body {
  min-height: 100%;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(120% 60% at 50% -10%, var(--glow-1), transparent 60%),
    radial-gradient(80% 50% at 50% 110%, var(--glow-2), transparent 70%);
  background-attachment: fixed;
}

/* Film grain — the one detail that stops a flat page reading as a template.
   Multiplies on paper, overlays on black, so it is texture on both faces. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10000;
  background: var(--plate);
  color: var(--bone);
  padding: 0.6rem 1rem;
  border-radius: 4px;
}

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 4px;
}

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

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

/* --- type ----------------------------------------------------------------
   Headings are set HARD. A condensed face at light weight looks weak, so it
   never runs below 700. -------------------------------------------------- */

.display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.005em;
  line-height: 1.02;
  text-transform: uppercase;
}

.engraved {
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}

.numerals {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
  letter-spacing: -0.03em;
}

.lede {
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--bone);
  max-width: var(--measure);
}

.prose p {
  max-width: var(--measure);
  color: var(--ash);
  margin-bottom: 1rem;
}
.prose p:last-child { margin-bottom: 0; }

.prose strong {
  color: var(--bone);
  font-weight: 600;
}

a { color: inherit; }

.link {
  color: var(--bone);
  text-decoration: none;
  border-bottom: 1px solid var(--amber);
  padding-bottom: 1px;
}
.link:hover { border-bottom-width: 2px; }

/* --- masthead ------------------------------------------------------------
   A rule across the top, the tally on the left, the pages on the right. Not a
   floating pill, not a bar: a letterhead. ------------------------------- */

.masthead {
  border-bottom: 1px solid var(--t3);
}

.masthead .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.1rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--bone);
}

.wordmark .tally { width: 26px; height: 26px; display: block; }

.wordmark .name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
}

.pages {
  display: flex;
  gap: 1.4rem;
}

.pages a {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.pages a:hover { color: var(--bone); }
.pages a[aria-current="page"] {
  color: var(--bone);
  border-bottom-color: var(--amber);
}

@media (max-width: 26rem) {
  .pages { gap: 1rem; }
  .pages a { font-size: 0.625rem; letter-spacing: 0.1em; }
  .wordmark .name { font-size: 1.15rem; }
}

/* --- the field -----------------------------------------------------------
   ONE big solid colour per page. It is the whole of the top of the page and
   nothing else on the page is allowed to shout over it. ------------------ */

.field {
  background: var(--field);
  color: var(--on-field);
  position: relative;
  overflow: hidden;
}

.field--amber { --field: var(--amber); }
.field--ink   { --field: #17191d; --on-field: #f6f1e8; }
.field--good  { --field: var(--good); }


.field .wrap {
  padding-block: 4.5rem 4rem;
  position: relative;
  z-index: 1;
}

.field .engraved { color: color-mix(in srgb, var(--on-field) 62%, transparent); }

/* The tally, blown up and bled off the right edge — the icon used as a
   watermark rather than pasted on as a logo a second time. */
.field .watermark {
  position: absolute;
  right: -4%;
  top: 50%;
  transform: translateY(-50%);
  width: min(34rem, 46%);
  opacity: 0.13;
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 46rem) {
  .field .watermark { width: 22rem; right: -22%; opacity: 0.1; }
  .field .wrap { padding-block: 3.25rem 3rem; }
}

.field h1 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: 0.005em;
  font-size: clamp(3.4rem, 13vw, 8rem);
  margin-block: 0.35rem 0;
}

.field .field-sub {
  font-size: clamp(1.05rem, 2.6vw, 1.4rem);
  line-height: 1.4;
  max-width: 30rem;
  margin-top: 1.15rem;
  color: color-mix(in srgb, var(--on-field) 84%, transparent);
}

.field--inner h1 { font-size: clamp(2.8rem, 9vw, 5rem); }

/* --- the counter plate ---------------------------------------------------
   The one instrument on the site. Everything else is print, so this is the
   only thing that gets a plate. -------------------------------------- */

.instrument {
  margin-top: 2.75rem;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  background: var(--plate-face), var(--plate);
  color: var(--bone);
  box-shadow: var(--plate-shadow);
  border-radius: 22px;
  padding: 1.4rem 1.9rem 1.5rem;
  position: relative;
}

.instrument::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--amber) 60%, transparent), transparent);
}

.instrument .count {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
  letter-spacing: -0.04em;
  font-weight: 500;
  font-size: clamp(2.6rem, 9vw, 3.6rem);
  line-height: 1;
  color: var(--bone);
}

.instrument .count-label {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--bone);
}

.instrument .caption {
  font-size: 0.8125rem;
  color: var(--dim);
  margin-top: 0.4rem;
  max-width: 20rem;
  line-height: 1.45;
}

/* --- sections: information is print --------------------------------------
   A hanging margin. The label sits out in the left margin at engraved size
   and the text runs in a single measure beside it, the way a specification
   sheet is set. On a narrow screen the label folds above. ---------------- */

.section {
  padding-block: 4rem;
  border-bottom: 1px solid var(--t2);
}
.section:last-of-type { border-bottom: 0; }

.section > .wrap {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}

.section .rubric {
  position: sticky;
  top: 2rem;
}

.section h2 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1;
  font-size: clamp(1.9rem, 4.4vw, 2.6rem);
  margin-bottom: 1.1rem;
}

@media (max-width: 46rem) {
  .section { padding-block: 3rem; }
  .section > .wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.9rem;
  }
  .section .rubric { position: static; }
}

/* --- the ledger ----------------------------------------------------------
   Ruled lines and dotted leaders, not a stack of identical rounded cards.
   The number in the margin is the app's own numeral face. ---------------- */

.ledger { border-top: 1px solid var(--t3); }

.ledger li {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 1.25rem;
  padding-block: 1.15rem;
  border-bottom: 1px solid var(--t2);
  align-items: baseline;
}

.ledger .no {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--amber);
  letter-spacing: -0.02em;
}

.ledger h3 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1.35rem;
  line-height: 1.05;
  margin-bottom: 0.3rem;
}

.ledger p {
  color: var(--ash);
  font-size: 0.9375rem;
  max-width: var(--measure);
}

@media (max-width: 26rem) {
  .ledger li { grid-template-columns: 1.9rem minmax(0, 1fr); gap: 0.85rem; }
}

/* --- the statement -------------------------------------------------------
   Dotted leaders, a printed account. Used for the specification on the home
   page and for the facts on the privacy page. ---------------------------- */

.statement { border-top: 1px solid var(--t3); }

.statement > div {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--t2);
  font-size: 0.9375rem;
}

.statement dt {
  color: var(--ash);
  flex: 0 1 auto;
}

.statement .leader {
  flex: 1 1 auto;
  border-bottom: 1px dotted var(--t4);
  transform: translateY(-0.25rem);
  min-width: 1.5rem;
}

.statement dd {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  letter-spacing: -0.02em;
  color: var(--bone);
  text-align: right;
}

/* --- the pull quote — the honest-day promise, said once, said hard ------ */

.promise {
  border-left: 3px solid var(--amber);
  padding-left: 1.35rem;
  margin-block: 1.75rem;
  max-width: var(--measure);
}

.promise p {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--bone);
}

/* --- the ask -------------------------------------------------------------
   The App Store link. It is not live yet and must not pretend to be, so it is
   a plate with a stamped "coming soon" rather than a button that lies. --- */

.ask {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-top: 0.5rem;
}

.store {
  display: inline-flex;
  flex-direction: column;
  gap: 0.15rem;
  text-decoration: none;
  background: var(--bone);
  color: var(--ink);
  border-radius: 14px;
  padding: 0.85rem 1.5rem;
  line-height: 1.15;
}

.store[aria-disabled="true"] {
  background: transparent;
  color: var(--bone);
  box-shadow: inset 0 0 0 1.5px var(--t4);
  cursor: default;
}

.store .small {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.7;
}

.store .big {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 1.2rem;
}

.price {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.875rem;
  letter-spacing: -0.02em;
  color: var(--ash);
}
.price b { color: var(--bone); font-weight: 500; }

/* --- the FAQ — a run of questions, ruled, no accordions, no cards ------- */

.faq { border-top: 1px solid var(--t3); }

.faq > div {
  padding-block: 1.35rem;
  border-bottom: 1px solid var(--t2);
}

.faq dt {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1.2rem;
  line-height: 1.1;
  margin-bottom: 0.35rem;
}

.faq dd {
  color: var(--ash);
  font-size: 0.9375rem;
  max-width: var(--measure);
}

/* --- the contact block — one address, given plainly -------------------- */

.contact {
  margin-block: 1.5rem 0.5rem;
}

.contact a {
  font-family: var(--font-mono);
  font-size: clamp(1.05rem, 3.4vw, 1.5rem);
  letter-spacing: -0.03em;
  color: var(--bone);
  text-decoration: none;
  border-bottom: 2px solid var(--amber);
  padding-bottom: 2px;
  word-break: break-word;
}

.note {
  font-size: 0.8125rem;
  color: var(--dim);
  max-width: var(--measure);
  margin-top: 0.85rem;
}

/* --- colophon ----------------------------------------------------------- */

.colophon {
  border-top: 1px solid var(--t3);
  padding-block: 2.5rem 3.5rem;
}

.colophon .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
  align-items: center;
  justify-content: space-between;
}

.colophon .pages a { color: var(--dim); }
.colophon .pages a:hover { color: var(--bone); }

.colophon .fineprint {
  font-size: 0.75rem;
  color: var(--dim);
}

/* ==========================================================================
   THE SHOWCASE — what the app actually looks like
   ==========================================================================
   Added 26 Aug 2026. The page described the app in words and never showed it,
   which is a hard sell for something whose whole argument is how it feels to
   use. These are REAL captures of the built app on its night face, generated
   by `npm run site:shots` in the app repo from the same demo data as the App
   Store previews - so the site and the store can never advertise different
   apps.

   Deliberately NOT the App Store previews themselves: those carry a baked-in
   headline and a warm paper frame, and both would fight this page.

   Each screen gets a BENEFIT as its heading, not a feature name. "Forget a
   day. Keep the streak." tells you why you would want it; "Editable history"
   makes you work it out.
   ====================================================================== */

.showcase { padding-block: 0; }

/* The feature list must NOT inherit `.section > .wrap`'s two-column rubric
   grid. It did at first, and eight articles landed in four alternating cells
   stacked on top of each other - unreadable, and invisible in any check that
   only asks for a status code. */
.showcase > .wrap.features {
  display: block;
}

.feature {
  display: grid;
  gap: 2.25rem 3.5rem;
  align-items: center;
  padding-block: 3.75rem;
  border-bottom: 1px solid var(--t2);
}

.feature:last-child { border-bottom: 0; }

@media (min-width: 48rem) {
  .feature { grid-template-columns: 1fr 1fr; gap: 2rem 4.5rem; padding-block: 5rem; }
  /* Alternate which side the phone sits on, so eight screens in a column do
     not read as a spreadsheet. */
  .feature:nth-child(even) .feature-shot { order: 2; }
}

.feature-body .rubric {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 0.85rem;
}

.feature-body h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 5.5vw, 2.9rem);
  line-height: 0.95;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--bone);
  margin-bottom: 0.9rem;
  text-wrap: balance;
}

.feature-body h3 b { color: var(--amber); font-weight: 800; }

.feature-body p {
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--ash);
  max-width: 30rem;
}

/* The phone. A plate, because a running app is an instrument - the same
   reasoning as the counter in the hero. The bezel is drawn rather than
   photographed so it stays sharp at any size and weighs nothing. */
.feature-shot {
  justify-self: center;
  width: min(100%, 17rem);
  border-radius: 2.1rem;
  padding: 0.5rem;
  background: var(--plate);
  background-image: var(--plate-face);
  box-shadow:
    inset 0 0 0 1.5px rgba(246, 241, 232, 0.10),
    0 24px 50px -24px rgba(0, 0, 0, 0.9);
}

.feature-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1.65rem;
  /* The captures already carry the app's own near-black ground; this stops a
     one-pixel light seam where the image meets the bezel. */
  background: var(--ink);
}

/* --- the store call to action ------------------------------------------- */

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 1.1rem;
  align-items: center;
  margin-top: 1.9rem;
}

.cta-note {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--on-field) 66%, transparent);
}

.section .cta-note { color: var(--dim); }


/* --- the hero stack -------------------------------------------------------
   Michael, 26 Aug 2026: fill the empty right of the hero with real phones,
   overlapping, and drop the tally watermark.

   He is right that the watermark was doing nothing. It repeated a logo that
   is already in the masthead six inches above it, and repeating a mark is not
   the same as showing a product. Three real screens say what the app is
   before a word is read.

   Sized by WIDTH, height auto - the same pattern the showcase below uses.
   An earlier version sized them by height with `width: auto` and an explicit
   aspect-ratio: the boxes measured correctly, the files were correct, no
   filter or blend was involved, and two of the three still painted as flat
   black. Rather than keep bisecting a rendering quirk, this uses the pattern
   already proven on this page.

   Fanned rather than neatly piled: a straight stack reads as a stock photo, a
   slight rotation reads as three phones put down on a desk. No opacity on the
   back two either - it muddied them against the amber and made the overlap
   look like a mistake. Depth comes from the rotation and the shadow.
   ---------------------------------------------------------------------- */

.hero-stack {
  position: absolute;
  /* Bigger, and pulled in off the right edge. Michael, 26 Aug: they were
     small and shoved into the corner, which read as an afterthought rather
     than the point. They are the product - give them the room. */
  /* Fixed widths, not percentages. A percentage here resolves against the
     full-bleed amber field, not the reading column, so "54%" became half the
     viewport and one phone filled the page. rem is predictable. */
  right: clamp(1.5rem, 7vw, 8rem);
  top: 50%;
  transform: translateY(-50%);
  width: 34rem;
  max-width: 46vw;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
  /* Above the field's own layers. At z-index 0 they were painted underneath
     and were invisible even though they had loaded and been laid out. */
  z-index: 2;
}

.hero-stack .phone {
  flex: 0 0 auto;
  width: 13.5rem;
  max-width: 19vw;
  border-radius: 1.4rem;
  padding: 0.3rem;
  background: #191817;
  box-shadow:
    inset 0 0 0 1.2px rgba(246, 241, 232, 0.16),
    0 22px 40px -16px rgba(0, 0, 0, 0.55);
}

/* The screen is a BACKGROUND, not an <img>.
   As an <img> these three loaded (complete, correct naturalWidth), laid out at
   the right size, carried no filter, blend or opacity - and still painted flat
   black, while the identical files rendered correctly in the showcase further
   down the same page. Rather than keep bisecting that, the screen is painted
   by the box itself, which is a different paint path and simply works. */
.hero-stack .phone .screen {
  display: block;
  width: 100%;
  aspect-ratio: 804 / 1854;
  border-radius: 1.15rem;
  background-color: #0b0b0a;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
}

.hero-stack .phone--a { transform: rotate(-8deg); margin-right: -13%; z-index: 1; }
.hero-stack .phone--c { transform: rotate(7deg);  margin-right: -13%; z-index: 2; }
.hero-stack .phone--b { transform: scale(1.1);    z-index: 3; }

/* Below a laptop there is no room beside the headline, and three overlapping
   phones at that size are a smudge. The showcase underneath shows every screen
   properly, so this is decoration and decoration goes first. */
@media (max-width: 61rem) {
  .hero-stack { display: none; }
}

/* ==========================================================================
   FIXES, 26 Aug 2026 — from Michael reading the live page
   ====================================================================== */

/* 1. The page block was 60rem centred, which on a 1600px+ screen left a
   quarter of the window empty down the left and pushed everything into the
   middle-right. Widen the block on large screens so the column starts where
   the eye expects it and the hero phones have room beside it. The READING
   measure (--measure) is untouched: prose still wraps at 34rem, because a
   wider page block must not become a wider line of text. */
@media (min-width: 75rem) {
  :root { --page: 76rem; }
}

/* 2. There was no base `.rubric` rule at all - only `.section .rubric`, which
   set position and nothing else. So "The app" rendered as plain body copy
   while the rubrics inside the showcase, which had their own rule, looked
   right. One definition now, and both use it. */
.rubric {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}

.field .rubric { color: color-mix(in srgb, var(--on-field) 60%, transparent); }

/* 3. "Coming to the App Store" was a near-invisible outline: transparent
   background with a faint off-white border, sitting on the amber field. It
   read as a smudge rather than a control. On a colour field it now gets the
   solid dark ground and light type, so it looks like the button it will
   become when there is a real link to point at. */
.field .store[aria-disabled="true"] {
  background: var(--on-field);
  color: #f6f1e8;
  box-shadow: none;
}

.field .store[aria-disabled="true"] .small {
  color: color-mix(in srgb, #f6f1e8 62%, transparent);
}

/* --- symmetry, 26 Aug 2026 ------------------------------------------------
   Michael: the phones sat much closer to the right edge than the headline sat
   to the left. They were pinned to the VIEWPORT with `right: clamp(...)`,
   while the headline is pinned to the CONTENT COLUMN, so the two gutters could
   never match at any window width.

   Now the stack is offset by the column's own gutter - the same expression the
   .wrap uses to centre itself - so the space either side is equal by
   construction rather than by a number that happened to look right on one
   screen. ------------------------------------------------------------- */
.hero-stack {
  right: max(1.5rem, calc((100% - var(--page)) / 2 + 1.5rem));
}

/* The showcase heading was in the two-column section grid, which put "THE APP"
   in a narrow sticky column of its own, stranded away from "SEE IT" and
   floating with nothing under it. Rubric and heading belong together. */
.showcase > .wrap:first-of-type {
  display: block;
}

.showcase > .wrap:first-of-type .rubric {
  position: static;
  margin-bottom: 0.5rem;
}

/* The first feature was inheriting a full 5rem of top padding on top of the
   section's own padding under the heading, leaving a void between "See it"
   and the first phone big enough to look like something had failed to load.
   The heading and the thing it introduces should sit together. */
.showcase > .wrap:first-of-type {
  margin-bottom: -1rem;
}

.showcase .feature:first-child {
  padding-top: 1.75rem;
}

@media (min-width: 48rem) {
  .showcase .feature:first-child { padding-top: 2.5rem; }
}

/* The price was set in small, low-contrast mono and disappeared into the
   amber. That is the wrong thing to whisper: "£4.99 once" against rivals
   charging every year is the strongest sentence on the page. Bigger, in the
   page's own sans, at full contrast, with the number carrying the weight. */
.field .cta-note {
  font-family: var(--font-sans);
  font-size: 1.02rem;
  letter-spacing: 0;
  color: var(--on-field);
}

.field .cta-note b {
  font-weight: 700;
}

@media (min-width: 48rem) {
  .field .cta-note { font-size: 1.12rem; }
}