/* ==========================================================================
   FRONTLINE21 — THE APP PAGE
   Loaded by app.html only. Everything here is built out of the existing
   tokens; no new colour, face or rhythm is introduced.

   15 September. Rebuilt with the page: the product page now runs from the
   hero through the calling, the moment, the Line Brief, daily practice, the
   code, the return, Your Frontline, the walkthrough, the questions, the
   legacy movement and the invitation. The film, value and form rules from
   14 September are kept where they still apply.
   ========================================================================== */

/* --- Shared: labels and notes ------------------------------------------------
   One restrained prototype label. It names what a piece of media is, in the
   same utility type every caption on the site uses, with a red tick for the
   current build and a grey one for the earlier build. */
.app-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 10px;
  color: var(--paper-dim);
  font-family: var(--font-text);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}

.app-label::before {
  content: '';
  width: 7px;
  height: 7px;
  flex: none;
  background: var(--f21-red);
}

.app-label--earlier::before { background: var(--paper-mute); }
.app-note .app-label { display: flex; margin: 0 0 4px; }

.app-note {
  margin: var(--stack-md) 0 0;
  max-width: 62ch;
  color: var(--paper-faint);
  font-size: var(--t-small);
  line-height: 1.55;
}

/* --- Hero ------------------------------------------------------------------
   Copy and product side by side from 1024px, the product at a size where its
   type can be read. On a phone: the title and copy first, the product
   directly under them, in reading order. */

.app-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--stack-lg);
  align-items: center;
}

.app-hero__title { margin-top: 0; }
.app-hero__deck { max-width: 32ch; }

.app-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 0;
}

@media (max-width: 1023px) {
  .page__head.app-hero { padding-top: 112px; padding-bottom: var(--stack-lg); }
  .app-hero__media { justify-self: center; }
}

@media (max-width: 480px) {
  /* Two full-width actions on a phone: the primary stays the first thing a
     thumb reaches, and neither label wraps. */
  .app-hero__actions { flex-direction: column; align-items: stretch; }
  .app-hero__actions .btn { justify-content: center; }
}

@media (min-width: 1024px) {
  .page__head.app-hero { padding-top: clamp(104px, 13vh, 150px); }
  .app-hero__grid {
    grid-template-columns: minmax(0, 660px) auto;
    justify-content: space-between;
    column-gap: clamp(40px, 6vw, 112px);
    max-width: 1240px;
  }
  .app-hero__intro { padding-bottom: var(--stack-md); }
}

/* The status line. A dot, a state and the planned platforms — the whole of
   what this page is allowed to claim about availability. */
.app-status {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--paper-faint);
  font-family: var(--font-display);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}

.cluster > .app-status { margin-top: var(--stack-md); }
.app-status__text { text-wrap: balance; }

.app-status__dot {
  width: 7px;
  height: 7px;
  flex: none;
  align-self: center;
  background: var(--f21-red);
}

/* --- Product screens ------------------------------------------------------
   A screen is shown as a screen: a hairline edge on the sunk ground, no
   device bezel, no reflection and no fake status bar. The recordings are
   browser captures at phone size, and the page does not dress them as
   anything else. */

.appshot { margin: 0; min-width: 0; }

.appshot__screen {
  aspect-ratio: 390 / 808;
  overflow: hidden;
  background: #111414;
  border: var(--border-hair);
}

.appshot__screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.appshot__cap {
  margin-top: 12px;
  color: var(--paper-faint);
  font-size: var(--t-small);
  line-height: 1.5;
}

.appshot__cap .app-label { display: flex; margin: 0 0 4px; }

/* --- Split: copy beside product --------------------------------------------- */

.app-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--stack-lg);
  align-items: center;
}

.app-split__media { justify-self: center; width: 100%; max-width: 340px; }
.app-split__media.app-pair { max-width: 560px; }

@media (min-width: 900px) {
  .app-split {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    column-gap: clamp(40px, 6vw, 112px);
  }
  .app-split--flip > .app-split__copy { order: 2; }
  .app-split--flip > .app-split__media { order: 1; }
}

.app-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 24px);
  align-items: start;
}

@media (max-width: 599px) {
  .app-pair { grid-template-columns: minmax(0, 1fr); max-width: 300px; gap: var(--stack-lg); }
  .app-split__media.app-pair { max-width: 300px; }
}

/* --- Sections ----------------------------------------------------------- */

.app-section {
  padding-block: var(--movement-pad);
  border-top: var(--border-hair-soft);
}

.app-section--sunk { background: var(--ink-deep); }

/* The heading column and the deck column sit side by side from the medium
   map and stack on a phone. */
.app-section > .shell > .grid { row-gap: var(--stack-md); }

/* --- The calling --------------------------------------------------------- */

.app-call__copy .body { margin-top: var(--stack-md); }

/* The identity, isolated. Space does the emphasis; the rule above it is the
   line, running the width of the reading column. */
.app-identity {
  max-width: 880px;
  margin-top: var(--stack-xl);
  padding-top: var(--stack-lg);
  border-top: 2px solid var(--f21-red);
}

.app-identity__line {
  margin: 0;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 700;
  letter-spacing: var(--track-compact);
  line-height: 0.95;
  text-transform: uppercase;
  text-wrap: balance;
}

.app-identity__note { margin-top: var(--stack-md); max-width: 50ch; }

/* --- The moment ------------------------------------------------------------ */

.app-moments {
  margin: var(--cluster-gap) 0 0;
  padding: 0;
  list-style: none;
  border-top: var(--border-hair);
}

.app-moments li {
  position: relative;
  padding: 16px 0 16px 28px;
  border-bottom: var(--border-hair);
  color: var(--paper);
  font-size: var(--t-lead);
  line-height: 1.4;
  text-wrap: pretty;
}

.app-moments li::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(16px + 0.7em);
  width: 14px;
  height: 2px;
  background: var(--f21-red);
}

.cluster > .app-moments + .body { margin-top: var(--stack-md); }

/* --- The Line Brief -------------------------------------------------------- */

.app-brief__lead .body { margin-top: var(--stack-md); }

.app-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--stack-lg);
  margin: var(--stack-xl) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

@media (min-width: 560px) and (max-width: 1023px) {
  .app-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--stack-lg) var(--gutter); }
}

@media (min-width: 1024px) {
  .app-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }
}

/* The red line runs across the top of the four steps: one sequence, not four
   cards. On a phone it runs down the left edge instead. */
.app-step {
  position: relative;
  display: grid;
  gap: 18px;
  align-content: start;
}

/* On a phone each step is its text, then its screen at a size that can be
   read — never a thumbnail beside a paragraph. */
@media (max-width: 559px) {
  .app-step > .appshot { order: 2; width: 100%; max-width: 300px; }
  .app-step > .app-step__text { order: 1; }
}

.app-step__no {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 8px;
  padding-top: 12px;
  border-top: 2px solid var(--f21-red);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
}

.app-step__no span {
  color: var(--f21-red-hi);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
}

.app-step__body {
  margin: 0;
  color: var(--paper-dim);
  font-size: var(--t-small);
  line-height: 1.6;
  text-wrap: pretty;
}

.app-step__body b { color: var(--paper); font-weight: 500; }

@media (min-width: 560px) {
  .app-step { grid-template-rows: auto 1fr; }
  .app-step > .appshot { order: 2; }
  .app-step > .app-step__text { order: 1; }
  .app-step__body { min-height: 6.4em; }
}

/* --- Daily practice -------------------------------------------------------- */

.app-areas,
.app-returns {
  display: grid;
  margin: var(--cluster-gap) 0 0;
  border-top: var(--border-hair);
}

.app-areas > div,
.app-returns > div {
  display: grid;
  grid-template-columns: minmax(96px, 30%) minmax(0, 1fr);
  gap: 16px;
  padding: 13px 0;
  border-bottom: var(--border-hair);
}

.app-areas dt,
.app-returns dt {
  color: var(--paper);
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-transform: uppercase;
}

.app-areas dd,
.app-returns dd {
  margin: 0;
  color: var(--paper-dim);
  font-size: var(--t-small);
  line-height: 1.55;
  text-wrap: pretty;
}

.cluster > .app-areas + .body,
.cluster > .app-returns + .body { margin-top: var(--stack-md); }

@media (max-width: 420px) {
  .app-returns > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* The count, drawn. */
.app-meter {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--stack-lg);
  margin-top: var(--stack-xl);
  padding-top: var(--stack-lg);
  border-top: var(--border-hair);
  align-items: center;
}

@media (min-width: 900px) {
  .app-meter { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(40px, 6vw, 112px); }
}

.app-meter__copy .body { margin-top: var(--stack-md); }

.app-ledger {
  margin: 0;
  padding: clamp(20px, 3vw, 32px);
  background: var(--ink-raised);
  border: var(--border-hair);
}

.app-ledger__kicker { margin: 0 0 14px; }

.app-ledger__rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.app-ledger__rows li {
  display: grid;
  grid-template-columns: minmax(70px, 24%) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: var(--border-hair);
  font-size: var(--t-small);
  line-height: 1.4;
}

.app-ledger__rows li > span:first-child {
  color: var(--paper-faint);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.app-ledger__rows li > span + span { color: var(--paper); }

.app-ledger__rows b {
  color: var(--paper);
  font-family: var(--font-display);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.app-ledger__rows li.is-partial b { color: var(--paper-faint); }

.app-ledger__line {
  position: relative;
  height: 3px;
  margin-top: 22px;
  background: var(--ink-line);
}

.app-ledger__line span {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--kept) * 100%);
  background: var(--f21-red);
}

.app-ledger__count {
  margin-top: 12px;
  color: var(--paper-dim);
  font-size: var(--t-small);
  line-height: 1.5;
}

.app-ledger__count strong { color: var(--paper); font-weight: 500; }

/* LINE HELD. */
.app-held {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--stack-lg);
  align-items: center;
  margin-top: var(--stack-xl);
}

.app-held__shot { width: 100%; max-width: 300px; justify-self: center; }

@media (min-width: 720px) {
  .app-held { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); column-gap: clamp(40px, 7vw, 120px); }
}

.app-held__mark {
  margin: 0;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: 700;
  letter-spacing: var(--track-intermediate);
  line-height: 0.9;
  text-transform: uppercase;
}

.app-held__count {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 2px solid var(--f21-red);
  max-width: 22ch;
  color: var(--paper);
  font-size: var(--t-deck);
  line-height: 1.3;
}

.app-held__copy .body { margin-top: var(--stack-md); max-width: 46ch; }
.app-held__copy .body b { color: var(--paper); font-weight: 500; }

/* --- The five values ----------------------------------------------------- */

.values {
  display: grid;
  gap: 0;
  margin: var(--stack-lg) 0 0;
  padding: 0;
  list-style: none;
  border-top: var(--border-hair-soft);
}

.value {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: end;
  gap: 4px 18px;
  padding: 22px 0;
  border-bottom: var(--border-hair-soft);
}

@media (min-width: 721px) {
  .value {
    grid-template-columns: 108px max-content minmax(0, 1fr);
    align-items: center;
    gap: 0 var(--gutter);
  }
}

/* Each shield keeps its own proportion — they share one width and differ in
   height, which is the phalanx as the identity draws it. */
.value__mark {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 52px;
  color: var(--f21-red);
}

.value__mark svg {
  width: 45px;
  height: auto;
  fill: currentColor;
}

@media (min-width: 721px) {
  .value__mark { height: 74px; justify-content: flex-start; }
  .value__mark svg { width: 64px; }
}

.value__name {
  margin: 0;
  align-self: end;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 700;
  letter-spacing: var(--track-compact);
  line-height: 1.05;
  text-transform: uppercase;
}

.value__note {
  grid-column: 2 / -1;
  margin: 0;
  color: var(--paper);
  font-size: var(--t-small);
  line-height: 1.6;
  text-wrap: pretty;
}

.value__note span { display: block; color: var(--paper-faint); }

@media (min-width: 721px) {
  .value__name { align-self: center; }
  .value__note { grid-column: 3; }

  /* Subgrid hands all five rows one set of tracks, so the notes align. Where
     it is unsupported the per-row tracks above still hold. */
  .values {
    grid-template-columns: 108px max-content minmax(0, 1fr);
    column-gap: var(--gutter);
  }

  .value {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
  }
}

.app-code__note { margin-top: var(--stack-md); max-width: 60ch; color: var(--paper-faint); }

/* --- Your Frontline ------------------------------------------------------ */

.app-supports {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--gutter);
  margin: var(--stack-lg) 0 0;
  padding: 0;
  list-style: none;
  border-top: var(--border-hair);
}

@media (min-width: 640px) { .app-supports { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .app-supports { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.app-supports li {
  padding: 18px 0 20px;
  border-bottom: var(--border-hair);
  color: var(--paper-dim);
  font-size: var(--t-small);
  line-height: 1.55;
  text-wrap: pretty;
}

.app-supports b {
  display: block;
  margin-bottom: 6px;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: var(--t-lead);
  font-weight: 700;
  letter-spacing: var(--track-label);
  line-height: 1.2;
  text-transform: uppercase;
}

.app-supports__note { margin-top: var(--stack-md); color: var(--paper-faint); }

/* --- The film (walkthrough and hero loop) ------------------------------- */

.appfilm {
  margin: 0;
  width: 100%;
  max-width: 420px;
}

/* The hero screen is as large as the viewport allows and never taller than
   the space under the masthead, so the whole product frame and its label
   sit in the first view on a laptop. */
.app-hero__media { width: min(360px, 100%); }

@media (min-width: 1024px) {
  .app-hero__media { width: clamp(280px, calc((100vh - 250px) * 0.4827), 380px); }
}

/* The frame reserves its ratio before the poster decodes, so nothing on the
   page moves when the image or the film arrives. */
.appfilm__frame {
  position: relative;
  aspect-ratio: 9 / 16;
  width: 100%;
  background: var(--ink-deep);
  border: var(--border-hair);
}

.appfilm__frame--screen { aspect-ratio: 780 / 1616; background: #111414; }
.appfilm__frame--walk { aspect-ratio: 780 / 1688; background: #111414; }
.appfilm__frame--walk .appfilm__video { background: #111414; }

.appfilm__video {
  display: block;
  width: 100%;
  height: 100%;
  /* contain, always: nothing in the product is cropped to fit the frame. */
  object-fit: contain;
  background: #000;
}

.appfilm__frame--screen .appfilm__video { background: #111414; }
.appfilm__frame--screen .appfilm__video img { display: block; width: 100%; height: auto; }

.appfilm__fallback {
  padding: var(--stack-md);
  color: var(--paper-dim);
  font-size: var(--t-small);
}

.appfilm__play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
  border: 0;
  background: rgba(12, 15, 15, 0.58);
  color: var(--paper);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}

/* [hidden] must win over these display rules. */
.appfilm__play[hidden],
.appfilm__bar[hidden],
.appfilm__toggle[hidden] { display: none; }

.appfilm__play-glyph {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border: 1px solid var(--paper);
  background: var(--ink-deep);
  transition: background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.appfilm__play-glyph .icon {
  width: 22px;
  height: 22px;
  margin-left: 3px;
}

.appfilm__play-label {
  padding: 9px 13px 8px;
  background: var(--ink-deep);
  border: 1px solid var(--ink-line);
  font-family: var(--font-display);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.appfilm__play-label b { color: var(--paper-faint); font-weight: 700; }

.appfilm__play:hover,
.appfilm__play:focus-visible { background: rgba(12, 15, 15, 0.42); }

.appfilm__play:hover .appfilm__play-glyph,
.appfilm__play:focus-visible .appfilm__play-glyph {
  background: var(--f21-red);
  border-color: var(--f21-red);
}

.appfilm__play:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -4px;
}

.appfilm__bar {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.appfilm__bar--loop {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 44px;
}

.appfilm__bar--loop .app-label { margin: 0; }

.appfilm__restart,
.appfilm__toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 9px 14px;
  border: var(--border-hair);
  background: transparent;
  color: var(--paper-dim);
  font-family: var(--font-display);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  flex: none;
  transition: color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.appfilm__restart .icon,
.appfilm__toggle .icon { width: 14px; height: 14px; }

.appfilm__restart:hover,
.appfilm__restart:focus-visible,
.appfilm__toggle:hover,
.appfilm__toggle:focus-visible {
  color: var(--paper);
  border-color: var(--paper-faint);
}

.appfilm__note {
  margin-top: 12px;
  padding: 10px 12px;
  border-left: 2px solid var(--f21-red);
  color: var(--paper-dim);
  font-size: var(--t-small);
}

.appfilm__caption {
  margin-top: 10px;
  color: var(--paper-faint);
  letter-spacing: 0.12em;
  line-height: 1.6;
}

.appfilm__caption .app-label { display: flex; margin: 0 0 4px; }

/* The written account of the walkthrough, for anyone who would rather read it. */
.appfilm__walk {
  margin-top: var(--stack-md);
  border-top: var(--border-hair);
  border-bottom: var(--border-hair);
}

.appfilm__walk > summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--paper-dim);
  font-family: var(--font-display);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}

.appfilm__walk > summary:hover,
.appfilm__walk[open] > summary { color: var(--paper); }

.appfilm__walk-body { padding-bottom: var(--stack-sm); }

.appfilm__steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: walk;
}

.appfilm__steps li {
  counter-increment: walk;
  position: relative;
  padding: 10px 0 10px 40px;
  border-top: var(--border-hair-soft);
  color: var(--paper-dim);
  font-size: var(--t-small);
  line-height: 1.55;
}

.appfilm__steps li::before {
  content: counter(walk, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 12px;
  color: var(--f21-red-hi);
  font-family: var(--font-display);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
}

.appfilm__steps b { color: var(--paper); font-weight: 500; }

.app-demo .appfilm { justify-self: center; max-width: 360px; }

/* --- Questions ------------------------------------------------------------ */

.app-faq__list { border-top: var(--border-hair); }

.app-faq__item { border-bottom: var(--border-hair); }

.app-faq__item > summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 14px 44px 14px 0;
  color: var(--paper);
  font-size: var(--t-lead);
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}

.app-faq__item > summary::-webkit-details-marker { display: none; }

.app-faq__item > summary::after,
.app-faq__item > summary::before {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  width: 14px;
  height: 2px;
  background: var(--f21-red);
  transition: transform var(--dur-fast) var(--ease-out);
}

.app-faq__item > summary::before { transform: rotate(90deg); }
.app-faq__item[open] > summary::before { transform: rotate(0deg); }

.app-faq__item > summary:hover { color: var(--paper); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--f21-red); }

.app-faq__item > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.app-faq__item > p {
  margin: 0 0 20px;
  max-width: 58ch;
  color: var(--paper-dim);
  font-size: var(--t-body);
  line-height: 1.6;
  text-wrap: pretty;
}

/* --- The legacy movement ----------------------------------------------------
   The one place the page rises. No interface, no card: the photograph held
   dark behind the type, and the line. */

.app-legacy {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(120px, 18vh, 220px);
  border-top: var(--border-hair-soft);
  background: var(--ink);
}

.app-legacy__photo {
  margin: var(--stack-xl) 0 0;
}

.app-legacy__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 45%;
  filter: grayscale(1);
}

@media (min-width: 1024px) {
  .app-legacy__photo img { aspect-ratio: 21 / 9; }
}

.app-legacy__inner { position: relative; }

.app-legacy__title {
  max-width: 13.5ch;
  margin: var(--stack-md) 0 0;
  color: var(--paper);
}

.app-legacy__verse {
  max-width: 40rem;
  margin-top: var(--stack-lg);
}

.app-legacy__lead {
  margin: 0;
  color: var(--paper);
  font-size: var(--t-pull);
  line-height: 1.3;
  letter-spacing: -0.012em;
  max-width: 28ch;
  text-wrap: balance;
}

.app-legacy__for {
  margin: var(--stack-lg) 0 0;
  padding: 0 0 0 clamp(18px, 2vw, 30px);
  list-style: none;
  border-left: 2px solid var(--f21-red);
}

.app-legacy__for li {
  max-width: 44ch;
  color: var(--paper-dim);
  font-size: var(--t-body-lg);
  line-height: 1.55;
  text-wrap: pretty;
}

.app-legacy__for li + li { margin-top: 12px; }

.app-legacy__close {
  max-width: 18ch;
  margin: var(--stack-lg) 0 0;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 700;
  letter-spacing: var(--track-compact);
  line-height: 0.95;
  text-transform: uppercase;
  text-wrap: balance;
}

.app-legacy__aim {
  margin: var(--stack-md) 0 0;
  color: var(--paper-dim);
}

/* --- The invitation and its form ----------------------------------------- */

.app-signup__band {
  margin: var(--stack-lg) 0 0;
  max-width: 420px;
}

.app-signup__band img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: var(--border-hair);
}

.app-signup__band figcaption { margin-top: 10px; }

.app-signup__panel {
  align-self: start;
  padding: clamp(24px, 4vw, 40px);
  background: var(--ink-raised);
  border: var(--border-hair);
}

.app-signup__title { margin: 0; color: var(--paper); }

.app-signup__scope-lead { margin-top: 12px; color: var(--paper-dim); }

.app-closed {
  margin-top: var(--stack-md);
  padding-top: var(--stack-md);
  border-top: var(--border-hair);
}

.app-closed[hidden] { display: none; }

.app-closed__state {
  margin: 0;
  padding: 12px 14px;
  border-left: 2px solid var(--paper-mute);
  color: var(--paper);
  font-size: var(--t-small);
  line-height: 1.55;
}

.app-closed__meanwhile { margin-top: var(--stack-md); color: var(--paper-dim); }

.app-form { margin: var(--stack-md) 0 0; }
.app-form[hidden] { display: none; }

.field__opt {
  color: var(--paper-faint);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

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

.app-form__err {
  display: block;
  margin-top: 7px;
  color: var(--f21-red-hi);
  font-size: var(--t-small);
}

.app-form__status {
  margin: var(--stack-sm) 0 0;
  padding: 12px 14px;
  border-left: 2px solid var(--paper-mute);
  color: var(--paper-dim);
  font-size: var(--t-small);
  line-height: 1.55;
}

.app-form__status--alert { border-left-color: var(--f21-red); }

.app-form__scope {
  margin: var(--stack-sm) 0 var(--stack-md);
  max-width: 54ch;
  color: var(--paper-faint);
  line-height: 1.6;
  text-transform: none;
  letter-spacing: 0;
}

.app-form button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.app-done { margin-top: var(--stack-md); }

.app-done__title {
  margin: 0 0 var(--stack-sm);
  color: var(--paper);
}

.app-done__title:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

.app-done__note {
  margin: 0 0 var(--stack-md);
  color: var(--paper-dim);
  overflow-wrap: anywhere;
}

/* --- Reduced motion ------------------------------------------------------
   The hero loop never starts on its own under reduced motion (app-film.js),
   and the transitions below go. */
@media (prefers-reduced-motion: reduce) {
  .appfilm__play,
  .appfilm__play-glyph,
  .appfilm__restart,
  .appfilm__toggle,
  .app-faq__item > summary::before { transition: none; }
}

/* ==========================================================================
   16 SEPTEMBER — THE DAILY STAND, PRESENCE AND THE BODY
   Three feature moments inside the product argument, built from the same
   tokens. The Daily Stand's Wall is live, selectable Quantico in the printed
   red; the two feature sections open on a photograph of the life the tool
   makes room for, and the product panel comes second.
   ========================================================================== */

/* --- Concept label: the grey tick says "not a capture" -------------------- */
.app-label--concept::before { background: var(--paper-faint); }

/* --- The Daily Stand ------------------------------------------------------- */
.app-stand__lead .body { margin-top: var(--stack-md); max-width: 46ch; }

.app-stand__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--stack-lg);
  margin-top: var(--stack-lg);
  align-items: center;
}

@media (min-width: 1024px) {
  .app-stand__stage {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(40px, 5vw, 96px);
  }
}

/* The Wall. A carbon plate, the declaration centred on it at the size its
   longest line allows, the reference and its status in clean utility type.
   The five-line stack is the app composer's own. */
.app-stand__wall {
  container-type: inline-size;
  margin: 0;
  padding: clamp(28px, 5vw, 64px) clamp(20px, 4vw, 56px);
  border: var(--border-hair);
  background: var(--ink-raised);
  text-align: center;
}

.app-stand__kicker,
.app-stand__ref {
  margin: 0;
  color: var(--paper-dim);
  font-family: var(--font-display);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}

.app-stand__ref { margin-top: var(--stack-md); color: var(--paper); font-size: var(--t-small); letter-spacing: 0.08em; }
.app-stand__ref span { color: var(--paper-faint); }

.app-stand__truth {
  margin: var(--stack-md) auto 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-synthesis: none;
  font-kerning: normal;
  text-transform: uppercase;
  /* THE PRESSURE is the longest line, 7.06 em. Fallback first, then the
     measure of the plate itself. */
  font-size: clamp(32px, 9vw, 88px);
  font-size: clamp(30px, calc(100cqi / 7.5), 96px);
  line-height: var(--lead-intermediate);
  letter-spacing: var(--track-intermediate);
  /* Half an x (0.268 em) is the approved space; Quantico's own is 0.26 em. */
  word-spacing: 0.008em;
  text-wrap: initial;
}

.app-stand__truth .ink > span { display: block; white-space: nowrap; }

/* A closing mark hangs outside the measure, so the letters are centred and
   the stop sits in the margin, whole. */
.hang { margin-inline-end: -0.38em; }

.app-stand__origin {
  text-wrap: balance;
  max-width: 34ch;
  margin: 10px auto 0;
  color: var(--paper-faint);
  font-size: var(--t-small);
  line-height: 1.5;
}

.app-stand__open { margin: var(--stack-md) 0 0; }
.app-stand__open .btn[hidden] { display: none; }

.app-stand__screens { justify-self: center; width: 100%; max-width: 560px; }
@media (max-width: 599px) { .app-stand__screens { max-width: 300px; } }

.app-stand__note { max-width: none; }

/* The movement of a reading: four steps on one rule. */
.app-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--gutter);
  margin: var(--stack-lg) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: flow;
  border-top: 2px solid var(--f21-red);
}

@media (min-width: 640px) { .app-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .app-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.app-flow li {
  counter-increment: flow;
  padding: 18px 0 20px;
  border-bottom: var(--border-hair);
  color: var(--paper-dim);
  font-size: var(--t-small);
  line-height: 1.55;
}

.app-flow b {
  display: block;
  margin-bottom: 6px;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: var(--t-lead);
  letter-spacing: var(--track-label);
  line-height: 1.2;
  text-transform: uppercase;
}

.app-flow b::before {
  content: counter(flow, decimal-leading-zero) '\00a0\00a0';
  color: var(--f21-red);
}

.app-facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--stack-sm) var(--gutter);
  margin: var(--stack-lg) 0 0;
}

@media (min-width: 640px) { .app-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .app-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.app-facts > div { padding-top: 14px; border-top: var(--border-hair); }
.app-facts dt,
.app-imports dt {
  color: var(--paper);
  font-family: var(--font-text);
  font-size: var(--t-body);
  font-weight: 500;
  line-height: 1.35;
}
.app-facts dd,
.app-imports dd {
  margin: 6px 0 0;
  color: var(--paper-dim);
  font-size: var(--t-small);
  line-height: 1.55;
  text-wrap: pretty;
}
.app-facts q { quotes: '\201C' '\201D'; color: var(--paper); }

/* --- The sample dialog ----------------------------------------------------- */
.app-sample {
  width: min(680px, calc(100vw - 24px));
  max-width: none;
  margin: auto;
  max-height: min(900px, calc(100dvh - 24px));
  padding: 0;
  border: var(--border-hair);
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
}

.app-sample[open] { display: flex; flex-direction: column; }
.app-sample::backdrop { background: rgba(9, 11, 11, 0.82); }

.app-sample__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 10px 20px;
  border-bottom: var(--border-hair);
  background: var(--ink-deep);
}

.app-sample__bar .app-label { margin: 0; }

.app-sample__close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  border: var(--border-hair);
  background: transparent;
  color: var(--paper);
  font: 500 var(--t-small)/1 var(--font-text);
  cursor: pointer;
}
.app-sample__close .icon { width: 18px; height: 18px; }
.app-sample__close:hover { border-color: var(--paper-faint); }
.app-sample__close:focus-visible,
.app-sample [data-stand-sample-close].btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.app-sample__body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(24px, 5vw, 48px) clamp(20px, 5vw, 48px) clamp(28px, 5vw, 48px);
}

.app-sample__wall {
  margin: var(--stack-sm) 0 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 6vw, 44px);
  font-weight: 700;
  letter-spacing: var(--track-compact);
  line-height: var(--lead-compact);
  text-transform: uppercase;
  text-wrap: balance;
}
.app-sample__wall .hang { margin-inline-end: 0; }

.app-sample__origin { margin: 10px 0 0; color: var(--paper-faint); font-size: var(--t-small); }

.app-sample__h {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: var(--stack-md) 0 10px;
  color: var(--paper-dim);
  font-family: var(--font-display);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.app-sample__h::before { content: ''; width: 22px; height: 2px; background: var(--f21-red); }

.app-sample__ref { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--t-lead); letter-spacing: 0.04em; }
.app-sample__ref span { margin-left: 8px; color: var(--paper-faint); font-family: var(--font-text); font-weight: 400; letter-spacing: 0; font-size: var(--t-small); }

.app-sample__verses {
  margin: 14px 0 0;
  padding: 0 0 0 18px;
  border-left: var(--border-hair);
}

.app-sample__verses p,
.app-sample__prose p {
  margin: 0 0 12px;
  color: var(--paper-dim);
  font-size: var(--t-body);
  line-height: 1.65;
  text-wrap: pretty;
}
.app-sample__verses sup { color: var(--paper-faint); font-size: 0.7em; }

.app-sample__prayer { margin: 0; font-size: var(--t-lead); font-style: italic; line-height: 1.55; }
.app-sample__action { margin: 0; font-size: var(--t-lead); font-weight: 500; line-height: 1.45; }
.app-sample__question { margin: 0; font-size: var(--t-lead); line-height: 1.45; }

.app-sample__foot { margin: var(--stack-lg) 0 0; padding-top: var(--stack-sm); border-top: var(--border-hair); color: var(--paper-faint); font-size: var(--t-small); line-height: 1.55; }
.app-sample__actions { margin: var(--stack-sm) 0 0; }

/* --- Presence and the body -------------------------------------------------- */
.app-feature { padding-top: 0; }

.app-feature__photo {
  position: relative;
  margin: 0 0 var(--stack-lg);
}

.app-feature__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 40%;
  filter: grayscale(1);
}

.app-feature--body .app-feature__photo img { object-position: 62% 50%; }

@media (min-width: 768px) {
  .app-feature__photo img { aspect-ratio: 16 / 9; object-position: 60% 22%; }
  .app-feature--body .app-feature__photo img { object-position: 40% 30%; }
}

@media (min-width: 1024px) {
  .app-feature__photo img { aspect-ratio: 21 / 9; }
}

/* The photograph settles into the ground rather than stopping at an edge. */
.app-feature__photo::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 28%;
  background: linear-gradient(to bottom, rgba(18, 22, 22, 0), var(--ink));
  pointer-events: none;
}
.app-section--sunk .app-feature__photo::after { background: linear-gradient(to bottom, rgba(12, 15, 15, 0), var(--ink-deep)); }

.app-feature__shot { max-width: 360px; }
.app-feature__fine { margin-top: var(--stack-md); color: var(--paper-faint); font-size: var(--t-small); line-height: 1.6; max-width: 52ch; }
.app-split__copy > .deck { margin-top: var(--stack-md); }
.app-split__copy > .deck + .body { margin-top: var(--stack-sm); }

.app-benefits {
  margin: var(--stack-md) 0 0;
  padding: 0;
  list-style: none;
  border-top: var(--border-hair);
}

.app-benefits li {
  position: relative;
  padding: 14px 0 16px 28px;
  border-bottom: var(--border-hair);
  color: var(--paper-dim);
  font-size: var(--t-small);
  line-height: 1.55;
}

.app-benefits li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 22px;
  width: 14px;
  height: 2px;
  background: var(--f21-red);
}

.app-benefits b,
.app-imports dt { display: block; margin-bottom: 4px; color: var(--paper); font-family: var(--font-text); font-size: var(--t-body); font-weight: 500; }

.app-imports {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: var(--stack-md) 0 0;
  border-top: var(--border-hair);
}
.app-imports > div { padding: 14px 0 16px; border-bottom: var(--border-hair); }

.app-supports-wrap { margin-top: var(--stack-xl); scroll-margin-top: 96px; }
.app-supports__title { margin: 0; color: var(--paper); }
.app-supports-wrap .app-supports { margin-top: var(--stack-md); }
html.has-sample { overflow: hidden; }
.app-stand__ref span { white-space: nowrap; }
.app-stand__ver { margin-left: 0.25em; }
@media (max-width: 479px) {
  .app-stand__sep { display: none; }
  .app-stand__ver { display: block; margin: 4px 0 0; }
}