@font-face {
  font-family: "Circular Std";
  src: url("fonts/Circular STD/CircularStd-Book.woff2") format("woff2"),
       url("fonts/Circular STD/CircularStd-Book.woff") format("woff");
  font-weight: 450;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Circular Std";
  src: url("fonts/Circular STD/CircularStd-BookItalic.woff2") format("woff2"),
       url("fonts/Circular STD/CircularStd-BookItalic.woff") format("woff");
  font-weight: 450;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Circular Std";
  src: url("fonts/Circular STD/CircularStd-Bold.woff2") format("woff2"),
       url("fonts/Circular STD/CircularStd-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Circular Std";
  src: url("fonts/Circular STD/CircularStd-BoldItalic.woff2") format("woff2"),
       url("fonts/Circular STD/CircularStd-BoldItalic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Palette: the raw brand colors. Never used directly in a rule. */
  --navy:       #2C2C4F;
  --peach:      #F7CBA0;
  --hot-pink:   #FF5182;
  --teal:       #02A99D;
  --neon-green: #43FF9C;
  --white:      #FFFFFF;
  --cream:      #F7F6ED;
  --yellow:     #F9F5B4;

  /* Roles: what a color is for. These are the names used in rules. */
  --color-text:         var(--navy);
  --color-text-on-dark: var(--cream);
  --color-bg:           var(--cream);
  --color-bg-alt:       var(--yellow);
  --color-bg-dark:      var(--navy);
  --color-accent:       var(--neon-green);
  --color-accent-alt:   var(--hot-pink);

  /* Type */
  --font-heading: "Circular Std", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Circular Std", "Helvetica Neue", Arial, sans-serif;
  --weight-heading: 700;
  --weight-body:    450;

  --text-sm:  0.9rem;
  --text-md:  1.1rem;
  --text-lg:  clamp(1.85rem, 1.52rem + 1.37vw, 2.75rem);
  --text-xl:  clamp(2.4rem, 1.9rem + 2.06vw, 3.75rem);
  --text-2xl: clamp(3.15rem, 2.41rem + 3.05vw, 5.15rem);
  --leading-tight: 1.15;
  --leading-body:  1.5;

  /* Type roles: what a size is for. These are the names used in rules. */
  --size-h1:   calc(var(--text-2xl) * 0.9);
  --hero-heading-size: calc(clamp(3rem, 0.5rem + 11vw, 8rem) * 0.8);
  --size-h2:   calc(var(--text-xl) * 0.9);
  --size-h3:   var(--text-lg);
  --size-body: var(--text-md);
  --size-lede: clamp(1.125rem, 1.06rem + 0.28vw, 1.3125rem);   /* the larger intro paragraph in the hero */
  --size-fine: var(--text-sm);   /* footer and other small print */

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;

  --measure: 60ch;

    /* Layout */
    --content-max: 85rem;   /* widest the content gets; 1360px at the default 16px font size */
    --gutter:      1.25rem; /* space between content and screen edge at 390 */
    --page-inline: max(var(--gutter), calc((100% - var(--content-max)) / 2));
    --section-pad: 4rem;    /* space above and below each section at 390 */
    --section-pad-xl: 7rem;
    --split:         38%;
    --column-pad: var(--space-xl);   /* space between the column divide and the text in the right-hand column */
    --header-height: 5rem;
}

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

body {
  min-block-size: 100svh;
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--size-body);
  line-height: var(--leading-body);
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  line-height: var(--leading-tight);
  margin-block-start: 0;
}

h1 {
  font-size: var(--size-h1);
}

h2 {
  font-size: var(--size-h2);
}

h3 {
  font-size: var(--size-h3);
}

img {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

a {
  color: inherit;
}

header {
  position: sticky;
  z-index: 5;
  inset-block-start: 0;
  inset-inline: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  block-size: var(--header-height);
  margin-block-end: calc(-1 * var(--header-height));
  padding-block: var(--gutter);
  padding-inline: var(--page-inline);
  background-color: transparent;
}

header img {
  block-size: 1.5rem;
  inline-size: auto;
}

header nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.header__logo {
  display: grid;
}

.header__logo img {
  grid-area: 1 / 1;
}

.header__logo img:last-child {
  opacity: 0;
}

header.header--logo-on-light .header__logo img:first-child {
  opacity: 0;
}

header.header--logo-on-light .header__logo img:last-child {
  opacity: 1;
}

header.header--on-light .header__link {
  color: var(--color-text);
  background-image: linear-gradient(
    to right,
    var(--color-accent) 50%,
    var(--color-text) 50%
  );
}

header.header--on-green .header__link,
header.header--on-yellow .header__link,
header.header--on-cream .header__link {
  background-image: linear-gradient(
    to right,
    var(--color-accent-alt) 50%,
    var(--color-text) 50%
  );
}

header.header--on-green .header__link::after,
header.header--on-yellow .header__link::after,
header.header--on-cream .header__link::after {
  background: var(--color-accent-alt);
}

.header__link {
  position: relative;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-text-on-dark);
  text-decoration: none;
  background-image: linear-gradient(
    to right,
    var(--color-accent) 50%,
    var(--color-text-on-dark) 50%
  );
  background-size: 200% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-position 0.5s ease;
}

.header__link::after {
  content: "";
  position: absolute;
  inset-block-start: calc(100% + 0.2rem);
  inset-inline-start: 0;
  inline-size: 0;
  block-size: 1px;
  background: var(--color-accent);
  transition: inline-size 0.5s ease;
}

.header__link:hover {
  background-position: 0 0;
}

.header__link:hover::after {
  inline-size: 100%;
}

@property --button-shift {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

.button {
  --button-size: 1.2rem;
  --button-weight: 700;
  --button-shadow: var(--cream);
  --button-from: var(--yellow);
  --button-to: var(--neon-green);
  --button-shift: 0%;
  font-size: var(--button-size);
  font-weight: var(--button-weight);
  display: inline-block;
  padding-block: 0.7rem;
  padding-inline: 1.2rem;
  border-radius: 1rem 0 1rem 0;
  background: linear-gradient(
    to bottom right,
    var(--button-from) var(--button-shift),
    var(--button-to) calc(var(--button-shift) + 100%)
  );
  box-shadow: -6px 6px 0 var(--button-shadow);
  color: var(--color-text);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition:
    --button-shift 0.5s ease,
    translate 0.12s ease,
    box-shadow 0.12s ease;
}

.button:hover {
  --button-shift: 40%;
}

.button--on-light {
  --button-shadow: var(--navy);
}

.button--secondary:hover {
  --button-shift: -40%;
}

.button--secondary {
  --button-shadow: var(--navy);
  --button-from: var(--navy);
  --button-to: var(--teal);
  color: var(--color-text-on-dark);
}

.button:active {
  animation: button-press 0.24s ease;
}

@keyframes button-press {
  50% {
    translate: 0 6px;
    box-shadow: 0 0 0 var(--button-shadow);
  }
}

@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }

  .button:active {
    animation: none;
    translate: 0 6px;
    box-shadow: 0 0 0 var(--button-shadow);
  }
}

.hero {
  --hero-heading-leading: var(--leading-tight);

  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  min-block-size: 100svh;
  padding-block-start: var(--header-height);
  padding-block-end: 0;
  padding-inline: var(--page-inline);
  color: var(--color-text-on-dark);
  text-align: left;
  background-color: var(--color-bg-dark);
}

.hero h1 {
  margin-block-end: var(--space-md);
  font-size: var(--hero-heading-size);
  line-height: var(--hero-heading-leading);
  color: var(--neon-green);
}

.hero p {
  max-inline-size: 60ch;
  margin-block-start: 0;
  margin-block-end: var(--space-lg);
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--size-lede);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Intro band: one line on what Artifact is, between the hero and the dollar bar ---------- */

.intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  block-size: 50svh;
  padding-block: clamp(var(--section-pad), 10vh, var(--section-pad-xl));
  padding-inline: var(--page-inline);
  background: var(--color-bg);
  color: var(--color-text);
}

.intro__eyebrow {
  margin-block: 0 var(--space-xs);
  font-family: var(--font-heading);
  font-weight: var(--weight-body);
  font-size: var(--size-body);
}

.intro h2 {
  max-inline-size: 18em;
  margin-block-end: 0;
  text-wrap: balance;
}

/* ---------- Where your ad dollar goes: the dollar bar ----------
   One pinned, full-height scene with two states: "today" and "with artifact". A dollar bar drawn to scale
   (1% of its width = 1 cent) shows where the money goes in each.
   The scene stays put while the visitor scrolls through two stretches, one per state, so everyone passes
   through "with artifact" before the page moves on. The two tabs jump to either stretch.
   Each ledger row opens in place to explain that line in the current state. Each pink piece of the bar opens that same row.
   The first time the scene comes into view it plays once: it starts as a full dollar and the four pieces break off.
   The inline script sets is-artifact, has-open-row, and is-intro on .money, is-current on the open row and its
   bar piece, and is-whole / is-fresh on the pieces during the opening animation. Everything that moves is CSS. */

.money {
  --money-steps: 2;           /* "today", then "with artifact" */
  --money-step-length: 80;    /* how much scrolling each state takes, in % of screen height */
  --money-ease: cubic-bezier(0.65, 0, 0.25, 1);

  /* Colors: all built from the palette roles. */
  --money-kept:      var(--color-accent);
  --money-lost:      var(--color-accent-alt);                                                   /* the piece whose row is open */
  --money-lost-quiet: color-mix(in srgb, var(--color-accent-alt) 55%, var(--color-bg-dark));   /* every other lost piece */
  --money-muted:     color-mix(in srgb, var(--color-text-on-dark) 68%, transparent);
  --money-pending:   color-mix(in srgb, var(--color-text-on-dark) 42%, transparent);            /* ledger rows before their piece breaks off */
  --money-line:      color-mix(in srgb, var(--color-text-on-dark) 20%, transparent);
  --money-stripe:    color-mix(in srgb, var(--color-bg-dark) 20%, transparent);

  /* Sizes. Several follow the screen height (vh), so the scene still fits on short screens. */
  --money-pad: clamp(3.75rem, 9vh, var(--header-height));   /* space at the top and bottom of the section */
  --money-count-size: clamp(2.1rem, 6.5vh, 2.6rem);
  --money-amt-col: 2.75rem;   /* width of one amount column in the ledger */
  --money-amt-gap: 0.5rem;

  /* The ledger keeps room for four rows plus one open row, so the scene doesn't shift as rows open and close. */
  --money-row-line: 1.5rem;                        /* height of one line of row text */
  --money-row-pad: clamp(0.25rem, 1vh, 0.6rem);    /* space above and below each row */
  --money-ledger-extra: 4.6rem;                    /* the open row's sentence, the tip, or the closing line */
  --money-ledger-room: calc(4 * (var(--money-row-line) + 2 * var(--money-row-pad) + 1px) + var(--money-ledger-extra));

  background: var(--color-bg-dark);
  color: var(--color-text-on-dark);
}

.money__track {
  block-size: calc(100vh + var(--money-steps) * var(--money-step-length) * 1vh);
  block-size: calc(100svh + var(--money-steps) * var(--money-step-length) * 1svh);
}

.money__stage {
  position: sticky;
  inset-block-start: 0;
  block-size: 100vh;
  block-size: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--money-pad);   /* same space above and below; the top also clears the site header */
  overflow: clip;
}

.money__inner {
  display: grid;
  gap: clamp(0.4rem, 1.4vh, 0.65rem);
  padding-block: clamp(0.4rem, 1.2vh, 0.75rem);
  padding-inline: var(--page-inline);
}

.money__head {
  margin-block-end: clamp(0.3rem, 1vh, 0.6rem);
}

/* The two tabs show which state the scroll has reached. Clicking one scrolls the page to that state. */
.money__tabs {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  margin-block-end: clamp(0.2rem, 0.8vh, 0.5rem);
}

.money__tab {
  appearance: none;
  margin: 0;
  padding: clamp(0.15rem, 0.6vh, 0.4rem) 0;
  border: 0;
  border-block-end: 2px solid transparent;
  background: none;
  font-family: var(--font-heading);
  font-size: var(--size-body);
  font-weight: var(--weight-heading);
  line-height: var(--leading-body);
  color: var(--money-muted);
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.money__tab[aria-pressed="true"] {
  border-block-end-color: var(--money-kept);
  color: var(--color-text-on-dark);
}

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

@media (hover: hover) {
  .money__tab:hover {
    color: var(--color-text-on-dark);
  }
}

.money__title {
  margin-block-end: 0;
  text-wrap: balance;
}

/* The bar */

.money__chart {
  container-type: inline-size;
}

.money__bar {
  display: flex;
  block-size: clamp(3rem, 9vh, 5rem);
}

.money__seg {
  position: relative;
  flex: none;
  min-inline-size: 0;
  inline-size: calc(var(--today) * 1%);
  transition: inline-size 1s var(--money-ease);
}

/* The pink pieces are buttons. Clicking one opens the matching ledger row. */
.money__seg--lost {
  appearance: none;
  block-size: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.money.is-artifact .money__seg {
  inline-size: calc(var(--artifact) * 1%);
}

.money__fill {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--money-kept);
  color: var(--color-text);
  transition: transform 0.6s var(--money-ease), background-color 0.45s ease, color 0.45s ease;
}

/* Opening breaks overlap and ease out, so each piece is still settling as the next one leaves. */
.money.is-intro .money__fill {
  transition-property: transform, background-color, color, box-shadow;
  transition-duration: 0.56s, 0.5s, 0.5s, 0.4s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1), ease, ease, ease;
}

/* The lost pieces sit a little lower than the green, as if broken off. */
.money__seg--lost .money__fill {
  transform: translateY(0.875rem);
  background: var(--money-lost-quiet);
  color: var(--color-text-on-dark);
  box-shadow: inset 2px 0 0 var(--color-bg-dark);
}

/* The piece whose ledger row is open, and (during the opening animation) the piece that has just broken off. */
.money__seg--lost.is-current .money__fill,
.money__seg--lost.is-fresh .money__fill {
  background: var(--money-lost);
  color: var(--color-text);
}

.money__seg--lost:focus-visible {
  outline: none;
}

.money__seg--lost:focus-visible .money__fill {
  outline: 2px solid var(--money-kept);
  outline-offset: 2px;
}

@media (hover: hover) {
  .money__seg--lost:not(.is-whole):hover .money__fill {
    background: var(--money-lost);
    color: var(--color-text);
  }
}

/* During the opening animation, a piece that hasn't broken off yet is still part of the green bar.
   It overlaps its neighbour by 1px so the dollar reads as one solid block. */
.money__seg--lost.is-whole .money__fill {
  inset-inline-start: -1px;
  transform: none;
  background: var(--money-kept);
  box-shadow: none;
}

.money__seg--lost.is-whole .money__fill b {
  opacity: 0;
}

/* Amounts inside the pieces: hidden until the bar is wide enough to hold them (see the container query below). */
.money__fill b {
  display: none;
  font-size: var(--size-fine);
  font-weight: var(--weight-heading);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: opacity 0.3s ease;
}

.money.is-intro .money__fill b {
  transition-duration: 0.4s;
}

@container (min-width: 44rem) {
  .money__fill .money__amt-today {
    display: inline;
  }

  .money.is-artifact .money__fill .money__amt-today {
    display: none;
  }

  .money.is-artifact .money__fill .money__amt-artifact {
    display: inline;
  }
}

/* The money that comes back: a striped stretch at the end of the green. */
.money__gain {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: calc(24 / 73 * 100%);
  background: repeating-linear-gradient(135deg, transparent 0 6px, var(--money-stripe) 6px 8px);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.money.is-artifact .money__gain {
  opacity: 1;
  transition-delay: 0.55s;
}

.money__under {
  position: relative;
  block-size: 1.75rem;
}

.money__gain-label {
  position: absolute;
  inset-block-start: 0.45rem;
  inset-inline-start: 49%;
  margin: 0;
  font-size: 1rem;
  font-weight: var(--weight-heading);
  line-height: 1.2;
  white-space: nowrap;
  color: var(--money-kept);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.money.is-artifact .money__gain-label {
  opacity: 1;
  transition-delay: 0.7s;
}

/* The two big figures */

.money__lower {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.65rem var(--space-xl);
}

.money__readout {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem var(--space-md);
}

.money__readout p {
  margin: 0;
}

.money__figure {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.6rem;
}

.money__count,
.money__roi-value {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--money-count-size);
  font-weight: var(--weight-heading);
  line-height: 1;
}

.money__count {
  color: var(--money-kept);
}

.money__roi {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
  text-align: end;
  transition: opacity 0.5s ease;
}

/* ROI waits until the opening animation has finished. */
.money.is-intro .money__roi {
  opacity: 0;
}

.money__roi-value {
  transition: color 0.5s ease;
}

.money__roi-value small {
  display: none;
  font-size: 0.3em;
  font-weight: var(--weight-body);
}

.money.is-artifact .money__roi-value {
  color: var(--money-kept);
}

.money.is-artifact .money__roi-value small {
  display: inline;
}

.money__roi-label {
  font-size: var(--size-fine);
  color: var(--money-muted);
}

/* The ledger */

.money__ledger-wrap {
  min-block-size: var(--money-ledger-room);
}

.money__ledger {
  list-style: none;
  margin: 0;
  padding: 0;
  border-block-start: 1px solid var(--money-line);
}

.money__ledger li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--money-amt-col) var(--money-amt-col);
  gap: 0 var(--money-amt-gap);
  align-items: baseline;
  padding-block: var(--money-row-pad);
  border-block-end: 1px solid var(--money-line);
  font-size: 1rem;
  transition: color 0.4s ease;
}

.money.is-intro .money__ledger li {
  transition-duration: 0.5s;
}

/* During the opening animation, a row stays dim and its amount hidden until its piece breaks off. */
.money__ledger li.is-whole {
  color: var(--money-pending);
}

.money__ledger li.is-whole .money__amt-today {
  opacity: 0;
}

/* Each row's label is a button. Clicking it opens or closes the row. */
.money__row-name {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: start;
  cursor: pointer;
}

/* The button's click area covers the whole row. */
.money__row-name::after {
  content: "";
  position: absolute;
  inset: 0;
}

.money__row-name:focus-visible {
  outline: none;
}

.money__row-name:focus-visible::after {
  outline: 2px solid var(--money-kept);
  outline-offset: 2px;
}

@media (hover: hover) {
  .money__ledger li:hover .money__row-name {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
  }
}

.money__ledger li.is-current .money__row-name {
  font-weight: var(--weight-heading);
}

.money__ledger .money__amt-today,
.money__ledger .money__amt-artifact {
  font-weight: var(--weight-heading);
  text-align: end;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;   /* on the amounts only: in Circular this setting also widens spaces and commas */
  transition: opacity 0.4s ease, color 0.4s ease, transform 0.6s var(--money-ease);
}

.money.is-intro .money__ledger .money__amt-today {
  transition-duration: 0.45s, 0.45s, 0.56s;
  transition-timing-function: ease, ease, cubic-bezier(0.22, 1, 0.36, 1);
}

/* On "today" the amounts sit at the right edge. On "with artifact" they slide over to make room for the new column. */
.money__ledger .money__amt-today {
  transform: translateX(calc(var(--money-amt-col) + var(--money-amt-gap)));
}

.money__ledger li.is-current .money__amt-today {
  color: var(--money-lost);
}

.money__ledger .money__amt-artifact {
  opacity: 0;
}

.money.is-artifact .money__ledger .money__amt-today {
  transform: none;
  opacity: 0.55;
  font-weight: var(--weight-body);
  color: inherit;
  text-decoration: line-through;
}

.money.is-artifact .money__ledger .money__amt-artifact {
  opacity: 1;
  color: var(--money-kept);
  transition-delay: 0.4s;
}

/* The parts that open and close: a row's sentence, the tip, and the closing line. */
.money__why,
.money__tip,
.money__sum {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--money-ease);
}

.money__why {
  grid-column: 1 / -1;
}

.money__why > div,
.money__tip > div,
.money__sum > div {
  overflow: hidden;
  min-block-size: 0;
}

.money__why p,
.money__tip p,
.money__sum p {
  margin: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.money__why p {
  padding-block: 0.15rem 0.2rem;
  max-inline-size: 34rem;
  font-size: 1rem;
  color: var(--money-muted);
  text-wrap: pretty;
}

.money__ledger li.is-current .money__why {
  grid-template-rows: 1fr;
}

.money__ledger li.is-current .money__why p {
  opacity: 1;
  transition-delay: 0.15s;
}

/* Each row has two sentences: one for "today" and one for "with artifact". */
.money__why-artifact {
  display: none;
}

.money.is-artifact .money__why-today {
  display: none;
}

.money.is-artifact .money__why-artifact {
  display: block;
}

/* Under the ledger, in the room an open row would use:
   on "today" a tip that the rows can be opened, on "with artifact" the closing line.
   Both fold away while a row is open. The tip also waits for the opening animation to finish. */
.money__tip p {
  padding-block-start: 0.9rem;
  font-size: 1rem;
  color: var(--money-muted);
}

.money__sum p {
  padding-block-start: 1.75rem;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: var(--weight-heading);
  line-height: 1.2;
  text-wrap: balance;
}

.money:not(.is-artifact):not(.has-open-row):not(.is-intro) .money__tip,
.money.is-artifact:not(.has-open-row) .money__sum {
  grid-template-rows: 1fr;
}

.money:not(.is-artifact):not(.has-open-row):not(.is-intro) .money__tip p,
.money.is-artifact:not(.has-open-row) .money__sum p {
  opacity: 1;
  transition-delay: 0.3s;
}

/* The small print under the ledger */

.money__fine p {
  margin: 0;
  padding-block-start: 0.75rem;
  font-size: var(--size-fine);
  color: color-mix(in srgb, var(--color-text-on-dark) 50%, transparent);
}

/* Short phones: give the scene a little more room. */
@media (max-height: 43rem) and (max-width: 47.99rem) {
  .money__title {
    font-size: 1.75rem;
  }
}

@media (max-height: 36rem) and (max-width: 47.99rem) {
  .money__title {
    font-size: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .money__seg,
  .money__fill,
  .money__gain,
  .money__gain-label,
  .money__fill b,
  .money__tab,
  .money__roi,
  .money__roi-value,
  .money__ledger li,
  .money__ledger .money__amt-today,
  .money__ledger .money__amt-artifact,
  .money__why,
  .money__why p,
  .money__tip,
  .money__tip p,
  .money__sum,
  .money__sum p {
    transition: none;
  }
}

.stack-section {
  --stack-columns: 1fr;
  --stack-stick: sticky;
  --stack-panel-block: 100vh;
  --stack-intro-bg: var(--color-accent);
  --stack-intro-color: var(--color-text);

  container-type: inline-size;
  display: grid;
  grid-template-columns: var(--stack-columns);
  align-items: start;
  gap: 0;
  border: 0;
  padding-inline: 0;
}

.stack-text {
  container-type: inline-size;
}

.stack-intro {
  background: var(--stack-intro-bg);
  color: var(--stack-intro-color);
  padding-block: var(--section-pad);
  padding-inline: var(--gutter);
}

.stack-intro h2 {
  margin-block-end: 0;
  text-wrap: balance;
}

.stack-panel {
  position: var(--stack-stick);
  inset-block-start: 0;
  z-index: 1;
  block-size: var(--stack-panel-block);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  overflow: clip;
  padding-block: var(--section-pad);
  padding-inline: max(var(--gutter), calc((100cqi - var(--content-max)) / 2));
  background: var(--color-bg-dark);
  color: var(--color-text-on-dark);
  --stack-label-shift: 0.03;
  --stack-label: oklch(from var(--color-bg-dark) calc(l + var(--stack-label-shift)) c h);
}

.stack-section .stack-panel:nth-child(1) {
  --stack-label-size: 19.4288cqi;
}

.stack-section .stack-panel:nth-child(2) {
  z-index: 2;
  --stack-label-size: 18.8893cqi;
}

.stack-section .stack-panel:nth-child(3) {
  z-index: 3;
  --stack-label-size: 18.8679cqi;
}

.stack-section .stack-panel:nth-child(4) {
  z-index: 4;
  --stack-label-size: 18.6986cqi;
}

.stack-panel--cream {
  background: var(--color-bg);
  color: var(--color-text);
  --stack-label: oklch(from var(--color-bg) calc(l - var(--stack-label-shift)) c h);
}

.stack-panel--green {
  background: var(--neon-green);
  color: var(--navy);
  --stack-label: oklch(from var(--neon-green) calc(l - var(--stack-label-shift)) c h);
}

.stack-panel--yellow {
  background: var(--yellow);
  color: var(--navy);
  --stack-label: oklch(from var(--yellow) calc(l - var(--stack-label-shift)) c h);
}

.stack-panel .stack-panel__label {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  margin: 0;
  margin-block-start: -0.073em;
  text-align: end;
  white-space: nowrap;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--stack-label-size);
  line-height: 1;
  color: var(--stack-label);
}

.stack-panel__copy {
  position: relative;
  z-index: 1;
  max-inline-size: var(--measure);
}

.stack-panel .stack-panel__eyebrow {
  margin-block-end: var(--space-xs);
  font-family: var(--font-heading);
  font-weight: var(--weight-body);
  font-size: var(--size-body);
}

.stack-panel h3 {
  margin-block-end: calc(0.83em / 2);
  text-wrap: balance;
}

.stack-panel p {
  margin-block: 0;
  font-size: var(--size-body);
  text-wrap: pretty;
}

.stack-panel p + p {
  margin-block-start: 1em;
}

.cta {
  --cta-columns: 1fr;
  --cta-text-column: auto;

  display: grid;
  grid-template-columns: var(--cta-columns);
  background: var(--color-bg);
  color: var(--color-text);
  text-align: start;
}

.cta-text {
  grid-column: var(--cta-text-column);
  padding-block: calc(var(--section-pad-xl) * 2);
  padding-inline: var(--page-inline);
}

.cta h2 {
  margin-block-end: var(--space-md);
}

.contact {
  --contact-columns: 1fr;
  flex: 1;
  display: grid;
  grid-template-columns: var(--contact-columns);
  align-items: start;
  gap: var(--space-xl);
  padding-block-start: calc(var(--header-height) + var(--section-pad));
  padding-block-end: var(--section-pad);
  padding-inline: var(--page-inline);
  background: var(--color-bg-dark);
  color: var(--color-text-on-dark);
}

.contact h1 {
  margin-block-end: var(--space-sm);
}

.contact__intro p {
  margin-block: 0;
}

.contact form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.contact label {
  display: flex;
  flex-direction: column;
}

.contact input,
.contact textarea {
  inline-size: 100%;
  padding-block: var(--space-xs);
  padding-inline: var(--space-xs);
  border: 2px solid var(--color-text-on-dark);
  background: var(--color-bg-dark);
  color: var(--color-text-on-dark);
  font: inherit;
}

.contact button {
  border: 0;
  font-family: inherit;
}

/* ---------- About page: intro ---------- */

.about {
  padding-block-start: calc(var(--header-height) + var(--section-pad));
  padding-block-end: var(--section-pad);
  padding-inline: var(--page-inline);
  background: var(--color-bg-dark);
  color: var(--color-text-on-dark);
}

.about h1 {
  margin-block-end: var(--space-sm);
}

.about p {
  max-inline-size: var(--measure);
  margin-block: 0;
  font-size: var(--size-lede);
}

/* ---------- About page: the team ----------
   A grid of people. One column on narrow screens, five from 48rem.
   The grid is centered and no wider than the content width. */

.team {
  --team-columns: 1fr;
  flex: 1;
  padding-block: 0;
  padding-inline: var(--page-inline);
  background: var(--color-bg-dark);
  color: var(--color-text-on-dark);
}

.team ul {
  display: grid;
  grid-template-columns: var(--team-columns);
  gap: 1rem;
  margin-block: 0;
  padding-inline-start: 0;
  list-style: none;
}

.team li {
  display: flex;
  flex-direction: column;
}

/* Works for the placeholder <div> now and for a real <img> later.
   On load, each photo drops a short way into its cell. */
.team__photo {
  display: block;
  inline-size: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  margin-block-end: 0;
  background: var(--color-bg-alt);
  animation: team-photo-fall 1.3s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--team-fall, 0) * 0.08s);
}

.team li:nth-child(2) { --team-fall: 1; }
.team li:nth-child(3) { --team-fall: 2; }
.team li:nth-child(4) { --team-fall: 3; }
.team li:nth-child(5) { --team-fall: 4; }
.team li:nth-child(6) { --team-fall: 5; }
.team li:nth-child(7) { --team-fall: 6; }
.team li:nth-child(8) { --team-fall: 7; }
.team li:nth-child(9) { --team-fall: 8; }
.team li:nth-child(10) { --team-fall: 9; }
.team li:nth-child(11) { --team-fall: 10; }

@keyframes team-photo-fall {
  from {
    opacity: 0;
    translate: 0 -1rem;
  }
}

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

/* Name and position sit flush under the photo. */
.team__details {
  display: flex;
  flex-direction: column;
  padding-block: var(--space-sm);
  /*padding-inline: var(--space-sm);*/
  /*background: var(--color-bg);*/
  color: var(--color-text-on-dark);
}

.team h2 {
  margin-block-end: 0;
  font-size: var(--size-lede);
}

.team li p {
  max-inline-size: 100%;
  margin-block: var(--space-xs) 0;
  font-weight: var(--weight-body);
}

.legal {
  --legal-measure: 42rem;

  padding-block-start: calc(var(--header-height) + var(--section-pad));
  padding-block-end: var(--section-pad);
  padding-inline: var(--page-inline);
  background: var(--color-bg);
  color: var(--color-text);
}

.legal__copy {
  max-inline-size: var(--legal-measure);
}

.legal h1 {
  margin-block-end: var(--space-sm);
}

.legal h2 {
  margin-block: var(--space-lg) var(--space-xs);
  font-size: 1.5rem;
}

.legal p {
  margin-block: 0 var(--space-sm);
}

.legal ul {
  margin-block: 0 var(--space-sm);
  padding-inline-start: 1.25rem;
}

.legal li + li {
  margin-block-start: var(--space-xs);
}

.legal strong {
  font-weight: var(--weight-heading);
}

.legal a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.legal address {
  font-style: normal;
}

.legal address p {
  margin-block: 0;
}

footer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding-block: var(--section-pad);
  padding-block-end: calc(var(--section-pad) + 19 / 78 * 100% - 50px);
  padding-inline: var(--page-inline);
  background: var(--navy);
  color: var(--color-text-on-dark);
  text-align: center;
  overflow: hidden;
}

footer::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  aspect-ratio: 78 / 19;
  margin-block-end: -20px;
  background-image: url("images/logo_wht.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0.05;
  pointer-events: none;
}

footer div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  order: 2;
  text-align: center;
}

footer p {
  margin-block: 0;
  margin-inline: 0;
  font-size: var(--size-fine);
}

footer .footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: var(--space-sm);
  row-gap: var(--space-xs);
  font-size: var(--size-fine);
}

footer .footer__legal a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

footer .button {
  order: 1;
  margin-block-end: calc(var(--space-sm) * 2);
}

footer img {
  block-size: 2rem;
  inline-size: auto;
}

@media (min-width: 48rem) {
  .hero {
    padding-block: var(--section-pad);
  }

  .money {
    --money-count-size: min(var(--text-2xl), 9vh);
    --money-amt-col: 3.25rem;
    --money-amt-gap: 0.75rem;
    --money-row-line: 1.65rem;
    --money-ledger-extra: 3.6rem;
  }

  .money__inner {
    gap: clamp(0.7rem, 2.6vh, 2rem);
    padding-block: clamp(0.75rem, 3vh, 2.5rem);
  }

  .money__lower {
    row-gap: clamp(0.7rem, 2.4vh, 2rem);
  }

  .money__under {
    block-size: 2rem;
  }

  .money__gain-label {
    font-size: var(--size-body);
  }

  .money__roi {
    flex-direction: row;
    align-items: baseline;
    gap: 0.6rem;
  }

  .money__roi-label {
    font-size: var(--size-body);
    color: inherit;
  }

  .money__ledger li {
    font-size: var(--size-body);
  }

  .money__sum p {
    font-size: 1.3rem;
  }

  footer {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  footer::after {
    margin-block-end: -50px;
  }

  footer div,
  footer .button {
    order: 0;
  }

  footer div {
    align-items: start;
    text-align: start;
  }

  footer .footer__legal {
    justify-content: start;
  }

  footer .button {
    margin-block-end: 0;
  }

  .stack-section .stack-panel:nth-child(1) {
    --stack-label-size: calc(var(--stack-panel-block) / 5.147);
  }

  .stack-section .stack-panel:nth-child(2) {
    --stack-label-size: calc(var(--stack-panel-block) / 5.294);
  }

  .stack-section .stack-panel:nth-child(3) {
    --stack-label-size: calc(var(--stack-panel-block) / 5.3);
  }

  .stack-section .stack-panel:nth-child(4) {
    --stack-label-size: calc(var(--stack-panel-block) / 5.348);
  }

  .stack-panel .stack-panel__label {
    inset-block-start: 0;
    inset-inline-start: 0;
    inset-inline-end: auto;
    margin-block-start: 0;
    inline-size: max-content;
    text-align: start;
    transform-origin: left top;
    transform: translateX(calc(100cqi - 0.927em)) rotate(-90deg) translateX(-100%) translateY(-0.073em);
  }

  .team {
    --team-columns: repeat(5, 1fr);
  }
}

@media (min-width: 64rem) {
  .hero {
    --hero-heading-leading: 1em;
  }

  /* On wide screens the amount, ROI, and ledger share one wide right-hand column. The left column stays empty.
     That column is measured from the screen edge, same as the panels below, so the ledger text lines up with theirs.
     A closing column the width of the page padding keeps the ledger off the right edge, in line with the bar. */
  .money__inner {
    padding-inline: 0;
  }

  .money__head,
  .money__chart {
    padding-inline: var(--page-inline);
  }

  .money__lower {
    grid-template-columns: var(--split) var(--column-pad) minmax(0, 1fr) var(--page-inline);
    column-gap: 0;
    row-gap: var(--space-sm);
    align-items: start;
  }

  .money__readout,
  .money__ledger-wrap,
  .money__fine {
    grid-column: 3;
  }

  .stack-section {
    --stack-columns: var(--split) 1fr;
  }

  .stack-intro {
    align-self: stretch;
    padding-block: 0;
    padding-inline: 0;
  }

  .stack-intro__inner {
    position: sticky;
    inset-block-start: 0;
    block-size: var(--stack-panel-block);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-inline-start: max(var(--gutter), calc((100cqi - var(--content-max)) / 2));
    padding-inline-end: var(--space-lg);
  }

  .stack-panel,
  .cta-text {
    padding-inline-start: var(--column-pad);
  }

  .cta {
    --cta-columns: var(--split) 1fr;
    --cta-text-column: 2;
  }

  .contact {
    --contact-columns: 1fr 1fr;
  }
}