/* ---------------------------------------------------------------------------
   The six home pages. Five blocks in Wise's marketing order: a hero, a feature
   section with one phone and a segmented switch, the rest of the app (phones and an
   icon list), questions in plain rows towards the end, and one closing band.
   Each block owns its own top and bottom space (Wise's universal section spacing);
   the parent owns every gap between its children.
   --------------------------------------------------------------------------- */

.landing-story main > section {
  padding-block: var(--section-pad);
}

/* A block's heading and its one supporting line. */
.story-heading {
  display: grid;
  gap: var(--space-text);
  max-width: 44rem;
}

.story-heading > p {
  color: var(--muted);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
}

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

.intro {
  display: grid;
  gap: var(--space-sections);
  align-items: center;
}

.intro__copy {
  display: grid;
  justify-items: start;
  gap: var(--space-component);
  min-width: 0;
}

.intro h1 {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  max-width: 14ch;
}

:lang(th) .intro h1,
:lang(ja) .intro h1,
:lang(ko) .intro h1 {
  max-width: 18ch;
  font-size: clamp(2.375rem, 1.8rem + 2vw, 3.5rem);
}

:lang(de) .intro h1,
:lang(fr) .intro h1 {
  max-width: 18ch;
}

.intro__description {
  max-width: 34rem;
  color: var(--muted);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  text-wrap: pretty;
}

/* What Android reads, beside the first download link (product-truth, 2026-09-26). */
.intro__reading {
  max-width: 34rem;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  text-wrap: pretty;
}

.intro__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-component) var(--space-button);
}

/* The sample: a slip as a banking app saves it, then the entry it becomes. */
.slip-story {
  display: grid;
  gap: var(--space-cards);
  min-width: 0;
}

.slip-story > figcaption {
  color: var(--muted);
  font-size: var(--fs-small);
  text-align: center;
}

/* One topic in one inset panel: flat, no outline. */
.slip-story__flow {
  display: grid;
  gap: var(--space-component);
  padding: var(--space-button) var(--space-component);
  background-color: var(--inset);
  border-radius: var(--r-large);
}

.slip-story__input,
.slip-story__output {
  display: grid;
  gap: var(--space-cards);
  min-width: 0;
}

.story-label {
  display: flex;
  align-items: baseline;
  gap: var(--space-text);
  color: var(--muted);
  font-size: var(--fs-small);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.story-label span {
  color: var(--text);
  font-weight: 500;
}

.flow-arrow {
  justify-self: center;
  color: var(--muted);
  --icon-mask: var(--icon-arrow-down);
}

/* The sample slip: a picture of a bank slip, in the app's own sample-slip colours
   (palette.ts sampleSlip*, sampled from the demo slip the store videos use; SOURCE-LEDGER,
   "First run and the reading screen"). Like a photo it stays the same in light and dark,
   so it carries its own ink instead of the page's roles. River Bank is invented. It is a
   flat object: no tilt and no shadow. */
.bank-slip {
  --slip-paper: #d3eae6;
  --slip-accent: #4fbfb0;
  --slip-accent-ink: #26786e;
  --slip-ink: #3a3a3a;
  --slip-ink-muted: #686868;
  --slip-rule: #969696;
  --slip-disc: #ffffff;
  --slip-qr-paper: #f0f1f1;
  display: grid;
  gap: var(--space-component);
  padding: var(--space-component);
  background: var(--slip-paper);
  border-radius: var(--r-medium);
  color: var(--slip-ink);
  font-size: var(--fs-small);
  line-height: 1.45;
  container-type: inline-size;
}

/* Thai stacks marks above and below the line, so the Thai slip takes 1.6 throughout. */
.bank-slip:lang(th),
.bank-slip :is(p, dt, dd, span):lang(th) {
  line-height: 1.6;
}

.bank-slip__status {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-cards);
  padding-bottom: var(--space-component);
  border-bottom: 1px solid var(--slip-rule);
}

.bank-slip__heading {
  display: grid;
  gap: var(--space-tight);
  padding-left: var(--space-cards);
  border-left: 4px solid var(--slip-accent);
  color: var(--slip-ink-muted);
}

.bank-slip__title {
  color: var(--slip-ink);
  font-size: var(--fs-body);
  font-weight: 600;
}

.bank-slip__badge {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--r-small);
  background: var(--slip-accent-ink);
  color: var(--slip-disc);
  font-weight: 600;
}

.bank-slip__parties {
  display: grid;
  gap: var(--space-text);
}

.bank-slip__party {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: start;
  gap: var(--space-cards);
}

.bank-slip__party p {
  overflow-wrap: anywhere;
}

.bank-slip__avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 2px solid var(--slip-accent-ink);
  border-radius: 50%;
  background: var(--slip-disc);
  color: var(--slip-accent-ink);
}

.bank-slip__avatar--shop {
  border: 1px solid var(--slip-rule);
  color: var(--slip-ink-muted);
}

.bank-slip__down {
  display: grid;
  place-items: center;
  width: 40px;
  color: var(--slip-ink-muted);
}

.bank-slip__label {
  color: var(--slip-ink-muted);
  font-size: 0.8125rem;
}

.bank-slip__name {
  font-weight: 600;
}

/* The reference spans the slip; amount and fee sit beside the QR, as on a real slip. */
.bank-slip__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-text) var(--space-cards);
  padding-top: var(--space-component);
  border-top: 1px solid var(--slip-rule);
}

.bank-slip__foot dl {
  display: contents;
}

.bank-slip__ref {
  grid-column: 1 / -1;
}

.bank-slip__foot dt {
  color: var(--slip-ink-muted);
  font-size: 0.8125rem;
}

.bank-slip__foot dd {
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.bank-slip__amount {
  font-size: var(--fs-body);
  font-weight: 600;
  white-space: nowrap;
}

.bank-slip__verify {
  grid-column: 2;
  grid-row: 2 / span 2;
  display: grid;
  justify-items: center;
  gap: var(--space-tight);
  padding: var(--space-text);
  background: var(--slip-qr-paper);
  border-radius: var(--r-small);
  color: var(--slip-ink-muted);
  font-size: 0.8125rem;
}

.bank-slip__qr {
  width: 72px;
  height: 72px;
  fill: var(--slip-ink);
  shape-rendering: crispEdges;
}

/* A narrow slip (a small phone, or large text) keeps the amount on one line by moving
   the QR under the rows. In rem, so it follows the reader's text size. */
@container (max-width: 14.5rem) {
  .bank-slip__foot {
    grid-template-columns: minmax(0, 1fr);
  }

  .bank-slip__verify {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }
}

/* The entry the slip becomes, drawn as the app draws a saved entry. */
.transaction-preview {
  display: grid;
  gap: var(--space-component);
  padding: var(--space-component);
  background-color: var(--surface);
  border-radius: var(--r-medium);
}

/* A positive prompt: a check and words, on the positive tint (§9 Prompts). */
.transaction-preview__heading {
  display: flex;
  align-items: center;
  gap: var(--space-text);
  padding: var(--space-text) var(--space-cards);
  background-color: var(--positive-tint);
  border-radius: var(--r-small);
  color: var(--text);
  font-size: var(--fs-small);
  font-weight: 600;
}

.transaction-preview__heading .icon {
  --icon-size: 20px;
  color: var(--positive);
}

.transaction-preview__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-cards);
}

.transaction-preview__row > div {
  display: grid;
  min-width: 0;
}

.transaction-preview__row strong {
  font-size: var(--fs-body);
}

.transaction-preview__money {
  font-size: var(--fs-body);
}

/* A narrow entry (beside the slip on a wide screen, or large text) puts the amount under
   the name instead of squeezing the date. */
.transaction-preview {
  container-type: inline-size;
}

@container (max-width: 18rem) {
  .transaction-preview__row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .transaction-preview__money {
    grid-column: 2;
  }
}

/* The category avatar: the category's fill, its glyph in the dark category ink. Its name
   is always beside it, so colour is never the only cue. */
.category-avatar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  background-color: var(--cat-grocery);
  color: var(--on-category);
}

.transaction-preview__category {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-cards);
  padding-top: var(--space-component);
  border-top: 1px solid var(--divider);
  color: var(--muted);
  font-size: var(--fs-small);
}

.category-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-text);
  min-height: 32px;
  padding: 0 var(--space-cards);
  border-radius: var(--r-pill);
  background-color: var(--inset);
  color: var(--text);
  font-weight: 500;
}

/* As the app's chosen category chip draws it: the category's 16px glyph in the text colour
   beside its name. The category's colour is on the avatar above. */
.category-chip__dot {
  display: inline-flex;
}

.story-check {
  color: var(--muted);
  font-size: var(--fs-small);
}

/* The one move on the page: once the slip is drawn, the entry it becomes fades in. */
@keyframes entry-in {
  from {
    opacity: 0;
  }
}

.slip-story__output {
  animation: entry-in var(--dur-standard) var(--ease-standard) 500ms both;
}

@media (prefers-reduced-motion: reduce) {
  .slip-story__output {
    animation: none;
  }
}

@media (min-width: 48rem) {
  .slip-story__flow {
    padding: var(--space-sections);
  }
}

@media (min-width: 62rem) {
  .intro {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--space-sections) 64px;
  }

  .landing-story main > .intro {
    padding-block: 4.5rem var(--section-pad);
  }
}

/* Wide enough for the slip and the entry side by side: input, arrow, output. */
@media (min-width: 75rem) {
  .slip-story__flow {
    grid-template-columns: minmax(0, 1.25fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-component);
  }

  .flow-arrow {
    --icon-mask: var(--icon-arrow-right);
  }
}

/* --- 2. the product, one view at a time ---------------------------------------- */

.product-story {
  display: grid;
  gap: var(--space-sections);
}

/* Wise Segmented control: two or three alike views, the chosen one in the ink with its
   selected edge and a heavier label. Full width on a phone; never full width on a desk.
   Real links underneath, so with no script each reaches its view. */
.story-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--space-tight);
  width: 100%;
  padding: var(--space-tight);
  background-color: var(--inset);
  border-radius: var(--r-pill);
}

.story-tabs a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: var(--space-tight) var(--space-cards);
  border-radius: var(--r-pill);
  color: var(--text);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: var(--lh-small);
  text-align: center;
  text-decoration: none;
  transition:
    background-color var(--dur-quick) var(--ease-standard),
    color var(--dur-quick) var(--ease-standard);
}

.story-tabs a:hover {
  background-color: var(--overlay-pressed);
}

.story-tabs a[aria-selected="true"] {
  background-color: var(--action);
  box-shadow: inset 0 0 0 2px var(--text);
  color: var(--on-action);
  font-weight: 600;
}

/* Under a light page the chosen segment's edge and fill are the same ink; in the dark
   the ring keeps the chosen segment's outline (selectedEdge). */
.story-tabs a[aria-selected="true"]:focus-visible {
  outline-offset: 2px;
}

@media (min-width: 48rem) {
  .story-tabs {
    width: auto;
    justify-self: start;
    grid-auto-columns: auto;
  }

  .story-tabs a {
    padding-inline: var(--space-button);
  }
}

.story-panels {
  display: grid;
}

.story-panel {
  display: grid;
  gap: var(--space-sections);
  align-items: center;
}

.story-panel[hidden] {
  display: none;
}

.story-panel__copy {
  display: grid;
  gap: var(--space-text);
  max-width: 28rem;
}

.story-panel__copy > p:not(.caption) {
  color: var(--muted);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
}

.story-panel__visual {
  display: grid;
  justify-items: center;
  gap: var(--space-cards);
}

.story-panel__visual .device {
  max-width: 280px;
}

.story-panel__visual figcaption {
  text-align: center;
}

/* A chosen view arrives with one short fade, nothing more. */
@keyframes view-in {
  from {
    opacity: 0;
  }
}

[data-story-panels][data-switched] .story-panel:not([hidden]) {
  animation: view-in var(--dur-quick) var(--ease-standard) both;
}

@media (prefers-reduced-motion: reduce) {
  [data-story-panels][data-switched] .story-panel:not([hidden]) {
    animation: none;
  }
}

@media (min-width: 62rem) {
  .story-panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
  }

  .story-panel__visual .device {
    max-width: 300px;
  }
}

/* The recording, behind one row that opens it (Wise Accordion). */
.tour-disclosure {
  border-top: 1px solid var(--divider);
}

.tour-disclosure__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-cards);
}

.tour-content {
  display: grid;
  justify-items: center;
  gap: var(--space-component);
  padding-bottom: var(--space-sections);
}

.tour-content p {
  max-width: 40rem;
  color: var(--muted);
  text-align: center;
}

.tour-content video {
  width: min(100%, 320px);
  border-radius: var(--r-large);
  background-color: var(--inset);
}

/* --- 3. the rest of the app ------------------------------------------------------ */

.features {
  display: grid;
  gap: var(--space-sections);
}

.feature-block {
  display: grid;
  align-content: start;
  gap: var(--space-button);
}

.feature-block > h3 {
  font-size: var(--fs-h4);
}

.feature-row {
  display: grid;
  gap: var(--space-sections);
}

@media (min-width: 62rem) {
  .features {
    gap: 4rem;
  }

  .feature-row {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 64px;
    align-items: start;
  }
}

/* Wise Icon List: a glyph on a 48 tile, a title and one line, straight on the page. One
   column on a phone, more as the page widens. The tile is the app's feature tile: the
   selected ground with the glyph in the link colour. */
.feature-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
  gap: var(--space-button) var(--space-button);
  list-style: none;
}

.feature-list li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: var(--space-component);
  row-gap: var(--space-tight);
  align-items: start;
}

.feature-list__icon {
  display: grid;
  place-items: center;
  grid-row: 1 / span 2;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--selected);
  color: var(--link);
}

.feature-list strong {
  padding-top: 2px;
  font-size: var(--fs-body);
  line-height: var(--lh-small);
}

.feature-list li > span:last-child {
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

/* --- 4. questions ------------------------------------------------------------------ */

.practical {
  display: grid;
  gap: var(--space-sections);
}

.practical__questions {
  display: grid;
  align-content: start;
  border-top: 1px solid var(--divider);
}

.answer {
  display: grid;
  justify-items: start;
  gap: var(--space-cards);
  padding-bottom: var(--space-button);
  color: var(--muted);
  max-width: var(--measure);
}

.practical__questions > .text-action {
  margin-top: var(--space-button);
}

@media (min-width: 62rem) {
  .practical {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 64px;
  }
}

/* --- 5. closing ---------------------------------------------------------------------
   One band at the very end that asks for the one action again (Wise Banner Card: end of
   page, once). A page band on the neutral ground, not a card. */
.landing-story main > .closing {
  display: grid;
  justify-items: center;
  gap: var(--space-component);
  margin-block-end: var(--section-pad);
  padding: var(--section-pad) var(--margin);
  max-width: calc(var(--page-max) - 2 * var(--margin));
  width: calc(100% - 2 * var(--margin));
  background-color: var(--inset);
  border-radius: var(--r-xlarge);
  text-align: center;
}

.closing > p:not(.caption) {
  max-width: 34rem;
  color: var(--muted);
  font-size: var(--fs-lead);
}

.closing > .store-badges {
  justify-content: center;
}

@media (max-width: 47.99rem) {
  .landing-story main > .closing {
    width: 100%;
    border-radius: 0;
  }
}