/* Research-led marketing layer. Financial components retain their own typography and tokens. */
@font-face {
  font-family: Kahu Editorial;
  src: url("./assets/source-serif-4-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
/* Handwriting, for Otis's caption and the signature on the family note. */
@font-face {
  font-family: Kahu Hand;
  src: url("./assets/caveat-latin.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
:root {
  --paper: #f8f7f3;
  --editorial-ink: #292c28;
  --editorial-muted: #62675f;
  --editorial-line: #ddded5;
  --editorial-accent: #9e3f2f;
  --editorial-tint: #ecefe5;
  --editorial-display: "Kahu Editorial", Georgia, serif;
}
:root[data-theme="dark"] {
  --paper: #121b1c;
  --editorial-ink: #f0eee5;
  --editorial-muted: #b1b9b2;
  --editorial-line: #344340;
  --editorial-accent: #f3a18a;
  --editorial-tint: #1b2a27;
}
body {
  background: var(--paper);
}
.editorial-header {
  max-width: 1280px;
  margin: 0 auto;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  position: relative;
  z-index: 30;
  color: var(--editorial-ink);
}
.editorial-header .logo {
  margin-right: auto;
}
.editorial-header .logo img {
  width: 43px;
  height: 44px;
}
.editorial-desktop-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 15px;
  font-weight: 550;
}
.editorial-desktop-nav > a,
.product-menu > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
.editorial-desktop-nav > a:after {
  position: absolute;
  bottom: 4px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--editorial-accent);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s;
}
.editorial-desktop-nav > a:hover:after,
.editorial-desktop-nav > a[aria-current]:after {
  transform: scaleX(1);
}
.product-menu > summary {
  list-style: none;
  cursor: pointer;
}
.product-menu > summary::-webkit-details-marker {
  display: none;
}
.product-menu > summary > .menu-chevron {
  display: block;
  flex-shrink: 0;
  transition: transform 0.25s;
}
.product-menu[open] > summary > .menu-chevron {
  transform: rotate(180deg);
}
.product-menu-panel {
  position: absolute;
  top: 85px;
  left: 200px;
  right: 0;
  padding: 32px 36px 0;
  background: var(--paper);
  border: 1px solid var(--editorial-line);
  border-radius: 12px;
  box-shadow: 0 25px 50px -20px #0003;
  animation: menu-arrive 0.22s ease-out;
}
.product-link-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px;
}
.product-link-groups > div > span {
  display: block;
  color: var(--editorial-muted);
  font-size: 13px;
  margin-bottom: 12px;
  font-weight: 600;
}
.product-link-groups a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  font-size: 15px;
  color: var(--editorial-ink);
  line-height: 1.6;
}
.product-link-groups a > span {
  opacity: 0;
  transition:
    opacity 0.2s,
    transform 0.2s;
  transform: translateX(-4px);
  color: var(--editorial-accent);
}
.product-link-groups a:hover > span,
.product-link-groups a:focus-visible > span {
  opacity: 1;
  transform: none;
}
.product-link-groups a[aria-current] {
  color: var(--editorial-accent);
}
.menu-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  margin-top: 24px;
  border-top: 1px solid var(--editorial-line);
  font-size: 12px;
  color: var(--editorial-muted);
}
.menu-bottom a {
  color: var(--editorial-ink);
}
.editorial-header-actions {
  display: flex;
  align-items: center;
  gap: 24px;
}
.editorial-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  background: var(--editorial-ink);
  color: var(--paper);
  padding: 15px 24px;
  min-height: 54px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  transition:
    background 0.2s,
    box-shadow 0.2s;
}
.editorial-cta svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 0.25s;
}
.editorial-cta:hover {
  background: var(--editorial-accent);
  color: var(--paper);
  box-shadow: 0 5px 12px -8px #0008;
}
.editorial-cta:hover svg {
  transform: translateX(3px);
}
.nav-cta {
  font-size: 14px;
  min-height: 44px;
  padding: 12px 17px;
  gap: 18px;
}
.editorial-mobile-menu {
  display: none;
}
.editorial-home,
.editorial-about {
  color: var(--editorial-ink);
}
.editorial-kicker {
  display: inline-flex;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.005em;
  color: var(--editorial-accent);
  margin-bottom: 20px;
  text-transform: none;
  align-items: center;
  gap: 12px;
}
.editorial-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  align-items: center;
  gap: 52px;
  padding: 54px 36px 64px;
  min-height: 515px;
}
.editorial-hero h1 {
  font-family: var(--editorial-display);
  font-weight: 400;
  font-size: clamp(48px, 5.2vw, 76px);
  line-height: 1.08;
  letter-spacing: -0.037em;
  color: var(--editorial-ink);
  text-wrap: balance;
}
.editorial-hero-copy > p {
  font-size: 19px;
  line-height: 1.8;
  max-width: 530px;
  color: var(--editorial-muted);
  margin-top: 26px;
}
.editorial-hero-actions {
  display: flex;
  align-items: center;
  gap: 25px;
  flex-wrap: wrap;
  margin-top: 30px;
}
.editorial-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--editorial-ink);
  font-size: 16px;
  line-height: 1.6;
  min-height: 44px;
  text-decoration: underline;
  text-decoration-color: var(--editorial-line);
  text-underline-offset: 6px;
  transition: text-decoration-color 0.2s;
}
.editorial-link:hover {
  text-decoration-color: var(--editorial-accent);
}
.editorial-link svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  transition: transform 0.25s;
}
.editorial-link:hover svg {
  transform: translateX(3px);
}
.hero-companion {
  text-align: center;
  align-self: center;
  position: relative;
  padding: 12px 0 20px;
}
.hero-companion:before {
  position: absolute;
  content: "";
  width: 85%;
  height: 82%;
  top: 0;
  left: 7.5%;
  background: var(--editorial-tint);
  border-radius: 48% 48% 40% 40%;
  z-index: 0;
}
.hero-companion .dog-hero-scene {
  width: 100%;
  height: 380px;
  max-width: 400px;
  margin: auto;
  position: relative;
  z-index: 1;
}
.hero-companion > span {
  display: block;
  position: relative;
  z-index: 1;
  font-family: var(--editorial-display);
  font-size: 28px;
  line-height: 1.4;
  margin-top: 0;
}
.editorial-section {
  padding: 90px 36px;
  scroll-margin-top: 24px;
}
.editorial-section-heading {
  max-width: 760px;
  margin: 0 auto 38px;
  text-align: center;
}
.editorial-section-heading h2,
.founder-copy h2,
.editorial-ending h2,
.residency-story h2 {
  font-family: var(--editorial-display);
  font-weight: 400;
  font-size: clamp(34px, 3.8vw, 52px);
  line-height: 1.15;
  letter-spacing: -0.035em;
  color: var(--editorial-ink);
}
.editorial-section-heading > p,
.editorial-section-heading > div > p {
  font-size: 18px;
  line-height: 1.8;
  color: var(--editorial-muted);
  max-width: 610px;
  margin: 22px auto 0;
}
.editorial-accounts {
  border-top: 1px solid var(--editorial-line);
  background: var(--editorial-tint);
  border-radius: 14px;
  padding-top: 64px;
  padding-bottom: 50px;
}
.editorial-accounts > .editorial-section-heading {
  max-width: none;
  text-align: left;
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  gap: 50px;
  align-items: center;
  margin-bottom: 35px;
}
.editorial-accounts .editorial-section-heading h2 {
  font-size: clamp(32px, 3.4vw, 46px);
}
.editorial-accounts .editorial-section-heading p {
  margin-left: 0;
  max-width: 575px;
}
.editorial-accounts .character-compact {
  height: 280px;
  max-width: 300px;
}
.section-followup {
  margin-top: 32px;
}
.editorial-flow {
  border-top: 1px solid var(--editorial-line);
}
.editorial-routine .editorial-section-heading {
  max-width: 790px;
}
.free-and-paid {
  border-top: 1px solid var(--editorial-line);
}
.free-and-paid .editorial-section-heading {
  max-width: 830px;
}
.free-and-paid .editorial-section-heading > p {
  max-width: 650px;
}
/* The family note: a letter, with a print of Otis beside it. */
.founder-note {
  border-top: 1px solid var(--editorial-line);
}
.founder-letter {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 80px;
  align-items: center;
  max-width: 1120px;
  margin: 0 auto;
  padding: 64px 72px;
  border-radius: 32px;
  background: var(--surface);
  box-shadow: 0 1px 2px #1d2a220f, 0 40px 80px -50px #1d2a2266;
}
[data-theme="dark"] .founder-letter {
  background: color-mix(in srgb, var(--ink) 5%, var(--surface));
  box-shadow: 0 1px 2px #0006, 0 40px 80px -40px #000c;
}
.founder-full .founder-letter {
  align-items: start;
}
.founder-photo {
  justify-self: center;
  width: min(100%, 340px);
  margin: 0;
  padding: 14px 14px 0;
  border-radius: 6px;
  background: #fbf9f4;
  box-shadow: 0 2px 4px #1d2a2214, 0 26px 50px -24px #1d2a2266;
  rotate: -3deg;
}
.founder-full .founder-photo {
  margin-top: 20px;
}
.founder-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 3px;
  object-fit: cover;
}
.founder-photo figcaption {
  padding: 14px 6px 18px;
  color: #2e3a33;
  font-family: Kahu Hand, cursive;
  font-size: 25px;
  line-height: 1.15;
  text-align: center;
}
.founder-signature > span:first-child {
  font-family: Kahu Hand, cursive;
  font-size: 48px;
  line-height: 1;
  color: var(--editorial-ink);
}
/* The name, as a dictionary entry. */
/* It opens Our story, so the guardian below takes the dividing line. */
.kahu-meaning {
  padding-top: 60px;
}
.about-hero {
  border-top: 1px solid var(--editorial-line);
  padding-top: 80px;
}
.meaning-card {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  padding: 60px 72px 56px;
  border-radius: 32px;
  background: var(--editorial-tint);
}
.meaning-word {
  margin-top: 18px;
  color: var(--editorial-ink);
  font-family: var(--editorial-display);
  font-size: clamp(64px, 9vw, 112px);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1;
}
.meaning-kind {
  margin-top: 12px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--editorial-line);
  color: var(--editorial-muted);
  font-size: 18px;
}
.meaning-kind i {
  font-family: var(--editorial-display);
  font-size: 20px;
}
.meaning-senses {
  display: grid;
  gap: 18px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: sense;
}
.meaning-senses li {
  position: relative;
  padding-left: 46px;
  color: var(--editorial-ink);
  font-family: var(--editorial-display);
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.35;
  counter-increment: sense;
}
.meaning-senses li::before {
  position: absolute;
  left: 0;
  top: 0.12em;
  color: var(--editorial-accent);
  font-family: Manrope, sans-serif;
  font-size: 0.72em;
  font-weight: 700;
  content: counter(sense) ".";
}
.meaning-senses .is-ours {
  color: var(--green);
}
/* The third sense types in over a hidden copy of itself, so its space never changes. */
.meaning-type {
  display: grid;
}
.meaning-type > span {
  grid-area: 1 / 1;
}
.meaning-ghost {
  visibility: hidden;
}
.meaning-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.12em;
  background: currentColor;
  animation: setup-caret 0.9s steps(1) infinite;
}
.meaning-note {
  max-width: 540px;
  margin-top: 30px;
  color: var(--editorial-muted);
  font-size: 16px;
  line-height: 1.7;
}
@media (max-width: 900px) {
  .founder-letter {
    grid-template-columns: 1fr;
    gap: 44px;
    padding: 44px 32px;
  }
  .founder-photo {
    width: min(100%, 280px);
  }
  .meaning-card {
    padding: 44px 32px 40px;
  }
}
@media (max-width: 600px) {
  .founder-letter {
    padding: 34px 22px 30px;
    border-radius: 24px;
  }
  .founder-photo {
    width: min(100%, 240px);
    padding: 10px 10px 0;
  }
  .founder-photo figcaption {
    padding: 10px 4px 14px;
    font-size: 21px;
  }
  .founder-signature > span:first-child {
    font-size: 42px;
  }
  .meaning-card {
    padding: 34px 22px 30px;
    border-radius: 24px;
  }
  .meaning-senses li {
    padding-left: 32px;
  }
}
.founder-copy p {
  font-size: 18px;
  line-height: 1.9;
  color: var(--editorial-muted);
  margin-top: 24px;
  max-width: 580px;
}
.founder-signature {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 26px 0 18px;
}
.founder-signature > span:last-child {
  font-size: 16px;
  color: var(--editorial-muted);
}
.editorial-ending {
  text-align: center;
  background: var(--editorial-tint);
  border-radius: 14px;
  padding: 64px 24px;
  margin: 0 0 70px;
}
.editorial-ending h2 {
  max-width: 650px;
  margin: 0 auto 30px;
}
.editorial-ending > .editorial-link {
  display: table;
  margin: 22px auto 0;
}
/* The puppy sits on the ending's floor just right of the button, pointing up at it. */
.editorial-ending:has(.ending-point) {
  padding-bottom: 0;
}
/* Our story's ending opens with the puppy holding the door open. */
.editorial-ending > .heading-picture {
  display: block;
  width: 170px;
  height: auto;
  margin: -24px auto 8px;
}
/* Your data: the globe above the EU residency heading. */
.residency-story .heading-picture {
  display: block;
  width: 150px;
  height: auto;
  margin: 0 0 8px -10px;
}
/* Bills: the puppy hangs by its paws from the story card's bottom edge, into the space before
   Subscriptions, clear of its centred heading. */
.recurring-feature {
  position: relative;
}
.bills-hang {
  position: absolute;
  z-index: 1;
  top: calc(100% - 3px);
  left: max(28px, calc(50% - 400px));
  width: 84px;
  height: auto;
  pointer-events: none;
}
.ending-point {
  display: block;
  width: 104px;
  height: auto;
  margin: 6px auto 0;
  translate: 92px 0;
}
/* The napping puppy lies along the footer's last line, above the motion control, on every page. */
.footer-bottom {
  position: relative;
}
.footer-nap {
  position: absolute;
  top: 1px;
  right: 8px;
  width: 140px;
  height: auto;
  translate: 0 -100%;
  pointer-events: none;
}
/* The footer's last row of links keeps clear of the puppy above the line. */
.footer-company {
  padding-right: 156px;
}
@media (max-width: 600px) {
  .footer-company {
    padding-right: 120px;
  }
  .plan > .plan-picture {
    height: 190px;
    margin-bottom: 20px;
  }
  .ending-point {
    width: 88px;
    translate: 78px 0;
  }
  .footer-nap {
    right: 0;
    width: 112px;
  }
}
.editorial-about-intro {
  padding: 60px 36px 80px;
  max-width: 1040px;
}
.editorial-about-intro :is(h1, h2) {
  font-family: var(--editorial-display);
  font-size: clamp(42px, 5vw, 68px);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.12;
}
.editorial-about-intro > p {
  font-size: 18px;
  color: var(--editorial-muted);
  max-width: 600px;
  line-height: 1.8;
  margin-top: 28px;
}
/* Then Otis: the words beside his print. */
.about-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 64px;
  align-items: center;
  max-width: 1160px;
}
.about-hero h2 em {
  color: inherit;
  font-style: normal;
}
.about-hero > div > p {
  max-width: 560px;
  margin-top: 28px;
  color: var(--editorial-muted);
  font-size: 18px;
  line-height: 1.8;
}
.about-hero .founder-photo {
  width: min(100%, 360px);
  rotate: 3deg;
}
/* The letter alone, where the page already opens with the print. */
.founder-letter.is-letter {
  grid-template-columns: minmax(0, 1fr);
  max-width: 820px;
}
@media (max-width: 900px) {
  .about-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }
  .about-hero .founder-photo {
    width: min(100%, 280px);
  }
}
.editorial-footer {
  max-width: 1280px;
  margin: 0 auto;
  padding: 45px 36px 30px;
  border-top: 1px solid var(--editorial-line);
  color: var(--editorial-ink);
}
.footer-top {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
}
.footer-brand .logo img {
  width: 40px;
  height: 42px;
}
.footer-brand p {
  font-family: var(--editorial-display);
  font-size: 25px;
  line-height: 1.35;
  margin: 20px 0;
}
.footer-brand > span {
  color: var(--editorial-muted);
  font-size: 15px;
}
.editorial-footer .product-link-groups {
  gap: 35px;
}
.footer-company {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  border-top: 1px solid var(--editorial-line);
  margin-top: 24px;
  padding-top: 20px;
  font-size: 15px;
}
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 14px;
  color: var(--editorial-muted);
  border-top: 1px solid var(--editorial-line);
  padding-top: 24px;
  margin-top: 42px;
}
.footer-bottom .motion-toggle {
  min-height: 44px;
  font-size: 14px;
  white-space: nowrap;
}
/* Calm marketing headings across the inner pages; charts and application UI are unchanged. */
.page-intro h1,
.about-hero h2 {
  font-family: var(--editorial-display);
  font-weight: 400;
  font-size: clamp(42px, 5.2vw, 70px);
  letter-spacing: -0.035em;
  line-height: 1.12;
  color: var(--editorial-ink);
}
.page-intro h1 em {
  color: inherit;
  font-weight: inherit;
}
.page-intro .eyebrow {
  font-size: 12px;
  letter-spacing: 0.015em;
  text-transform: none;
  color: var(--editorial-accent);
  margin-bottom: 20px;
}
.page-intro .eyebrow > span {
  display: none;
}
.page-intro > p,
.page-intro .accounts-intro-description,
.loan-intro-note > p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--editorial-muted);
}
.page-intro {
  padding-top: 55px;
  padding-bottom: 60px;
}
.residency-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
  border-top: 1px solid var(--editorial-line);
  border-bottom: 1px solid var(--editorial-line);
}
.residency-story > div > p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--editorial-muted);
  margin-top: 24px;
}
.residency-facts > div {
  padding: 22px 0;
  border-bottom: 1px solid var(--editorial-line);
}
.residency-facts > div:first-child {
  padding-top: 0;
}
.residency-facts > div:last-child {
  border: 0;
  padding-bottom: 0;
}
.residency-facts span {
  font-size: 11px;
  color: var(--editorial-muted);
  display: block;
}
.residency-facts strong {
  font-size: 17px;
  display: block;
  margin: 8px 0;
  font-weight: 600;
  color: var(--editorial-ink);
}
.residency-facts p {
  font-size: 13px;
  line-height: 1.8;
  color: var(--editorial-muted);
}
@keyframes menu-arrive {
  from {
    opacity: 0.8;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 1400px) {
  .editorial-header,
  .editorial-footer {
    margin-left: 40px;
    margin-right: 40px;
  }
  .editorial-header {
    gap: 24px;
  }
  .editorial-desktop-nav {
    gap: 24px;
  }
}
@media (max-width: 1100px) {
  .editorial-header {
    gap: 20px;
  }
  .editorial-desktop-nav {
    gap: 20px;
    font-size: 14px;
  }
  .editorial-header-actions {
    gap: 18px;
  }
  .nav-cta {
    padding: 12px 14px;
    gap: 12px;
  }
  .editorial-hero {
    gap: 30px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .editorial-hero h1 {
    font-size: 58px;
  }
  .editorial-hero-copy > p {
    font-size: 18px;
  }
  .hero-companion .dog-hero-scene {
    height: 320px;
  }
  .editorial-hero-actions {
    gap: 15px;
  }
  .editorial-section {
    padding: 75px 24px;
  }
  .product-menu-panel {
    left: 80px;
  }
  .footer-top {
    gap: 50px;
  }
  .editorial-accounts .editorial-section-heading {
    gap: 30px;
  }
}
@media (max-width: 900px) {
  .editorial-header {
    min-height: 88px;
    margin: 0 28px;
  }
  .editorial-desktop-nav {
    display: none;
  }
  .editorial-mobile-menu {
    display: block;
  }
  .editorial-mobile-menu > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    font-size: 13px;
    list-style: none;
  }
  .editorial-mobile-menu > summary::-webkit-details-marker {
    display: none;
  }
  .editorial-mobile-menu > nav {
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    background: var(--paper);
    border: 1px solid var(--editorial-line);
    border-radius: 10px;
    padding: 20px 24px;
    max-height: calc(100dvh - 110px);
    overflow: auto;
    box-shadow: 0 20px 40px -20px #0004;
    animation: menu-arrive 0.22s ease-out;
  }
  .editorial-mobile-menu > nav > a {
    display: block;
    padding: 10px 0;
    font-size: 14px;
  }
  .editorial-mobile-menu .product-link-groups {
    margin-top: 20px;
    border-top: 1px solid var(--editorial-line);
    padding-top: 24px;
    gap: 20px;
  }
  .editorial-header-actions {
    gap: 22px;
  }
  .editorial-hero {
    padding: 40px 8px 50px;
    gap: 25px;
    grid-template-columns: 1.5fr 1fr;
    min-height: 0;
  }
  .editorial-hero h1 {
    font-size: 48px;
  }
  .editorial-hero-actions {
    display: block;
  }
  .editorial-hero-actions > .editorial-link {
    display: flex;
    width: fit-content;
    margin-top: 14px;
  }
  .hero-companion .dog-hero-scene {
    height: 280px;
  }
  .hero-companion > span {
    font-size: 24px;
  }
  .editorial-section {
    padding: 65px 8px;
  }
  .editorial-accounts {
    padding: 42px 22px;
  }
  .editorial-accounts .editorial-section-heading {
    grid-template-columns: 1.7fr 1fr;
    gap: 20px;
  }
  .editorial-accounts .editorial-section-heading h2 {
    font-size: 34px;
  }
  .editorial-accounts .character-compact {
    height: 180px;
  }
  .founder-copy p {
    font-size: 17px;
  }
  .editorial-footer {
    margin: 0 28px;
    padding: 35px 0 25px;
  }
  .footer-top {
    gap: 40px;
    grid-template-columns: 1fr 2fr;
  }
  .footer-brand p {
    font-size: 22px;
  }
  .editorial-footer .product-link-groups {
    gap: 22px;
  }
  .editorial-footer .product-link-groups a {
    font-size: 15px;
  }
  .footer-company {
    gap: 22px;
  }
  .residency-story {
    gap: 45px;
  }
  .editorial-about-intro {
    padding: 45px 8px 65px;
  }
}
@media (max-width: 600px) {
  .editorial-header {
    margin: 0 20px;
    min-height: 80px;
    gap: 16px;
  }
  .editorial-header .logo img {
    width: 36px;
    height: 38px;
  }
  .editorial-header-actions {
    gap: 18px;
  }
  .nav-cta {
    display: none;
  }
  .editorial-mobile-menu > nav {
    top: 70px;
    left: 0;
    right: 0;
    padding: 18px 22px;
  }
  .editorial-mobile-menu .product-link-groups {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .editorial-mobile-menu .product-link-groups > div > span {
    margin-bottom: 6px;
  }
  .editorial-mobile-menu .product-link-groups a {
    min-height: 44px;
  }
  .editorial-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 32px 5px 38px;
    text-align: center;
  }
  .editorial-kicker {
    font-size: 14px;
    margin-bottom: 18px;
  }
  .editorial-hero h1 {
    font-size: clamp(41px, 10.4vw, 56px);
    letter-spacing: -0.045em;
    line-height: 1.08;
  }
  .editorial-hero-copy > p {
    font-size: 17px;
    line-height: 1.8;
    margin: 22px auto 0;
    max-width: 400px;
  }
  .editorial-hero-actions {
    margin-top: 25px;
  }
  .editorial-hero-actions > .editorial-link {
    margin: 13px auto 0;
    font-size: 15px;
  }
  .editorial-cta {
    font-size: 15px;
    gap: 22px;
    min-height: 52px;
  }
  .hero-companion {
    max-width: 260px;
    width: 100%;
    margin: 18px auto 0;
    padding-bottom: 4px;
  }
  .hero-companion .dog-hero-scene {
    height: 240px;
    max-width: 280px;
  }
  .hero-companion:before {
    height: 79%;
    width: 80%;
    left: 10%;
  }
  .hero-companion > span {
    font-size: 24px;
    margin-top: -4px;
  }
  .editorial-section {
    padding: 55px 4px;
  }
  .editorial-section-heading {
    margin-bottom: 28px;
    text-align: left;
  }
  .editorial-section-heading h2,
  .founder-copy h2,
  .editorial-ending h2,
  .residency-story h2 {
    font-size: 34px;
    letter-spacing: -0.035em;
    line-height: 1.15;
  }
  .editorial-section-heading > p,
  .editorial-section-heading > div > p {
    font-size: 17px;
    line-height: 1.8;
    margin-top: 20px;
  }
  .editorial-accounts {
    padding: 38px 16px;
    border-radius: 10px;
  }
  .editorial-accounts > .editorial-section-heading {
    display: block;
    margin-bottom: 22px;
  }
  .editorial-accounts .editorial-section-heading h2 {
    font-size: 31px;
  }
  .editorial-accounts .character-compact {
    height: 175px;
    margin: 20px auto 0;
    max-width: 220px;
  }
  .section-followup {
  }
  .founder-copy p {
    font-size: 17px;
    line-height: 1.85;
  }
  .editorial-ending {
    margin-bottom: 45px;
    padding: 40px 22px;
    border-radius: 10px;
  }
  .editorial-ending h2 {
    font-size: 32px;
  }
  .editorial-ending > .editorial-link {
    font-size: 15px;
  }
  .editorial-footer {
    margin: 0 20px;
    padding-top: 35px;
  }
  .footer-top {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .footer-brand p {
    font-size: 26px;
    margin: 16px 0 12px;
  }
  .editorial-footer .product-link-groups {
    grid-template-columns: 1fr 1fr;
    gap: 26px 20px;
  }
  .editorial-footer .product-link-groups a {
    font-size: 15px;
    min-height: 44px;
  }
  .footer-company {
    gap: 18px 24px;
    font-size: 15px;
  }
  .footer-bottom {
    display: block;
    margin-top: 28px;
    padding-top: 22px;
    font-size: 14px;
  }
  .footer-bottom .motion-toggle {
    margin-top: 10px;
    min-height: 44px;
  }
  .page-intro h1 {
    font-size: 44px;
    letter-spacing: -0.04em;
  }
  .page-intro {
    padding-top: 30px;
    padding-bottom: 40px;
  }
  .page-intro > p,
  .page-intro .accounts-intro-description,
  .loan-intro-note > p {
    font-size: 15px;
  }
  .residency-story {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .residency-story > div > p {
    font-size: 15px;
  }
  .editorial-about-intro {
    padding: 30px 4px 50px;
  }
  .editorial-about-intro :is(h1, h2) {
    font-size: 43px;
    line-height: 1.1;
  }
  .editorial-about-intro > p {
    font-size: 16px;
    margin-top: 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .editorial-header *,
  .editorial-home *,
  .editorial-about *,
  .editorial-footer * {
    animation: none !important;
    transition: none !important;
  }
  .editorial-link svg,
  .editorial-cta svg {
    transform: none !important;
  }
}
.hero-companion > span {
  margin-top: 16px;
  font-size: 28px;
}
@media (max-width: 600px) {
  .hero-companion > span {
    margin-top: 20px;
    font-size: 24px;
  }
}
.hero-companion .dog-stage,
.editorial-accounts .character-compact .dog-stage {
  height: 100%;
  aspect-ratio: auto;
}
.residency-facts > .editorial-kicker {
  font-size: 12px;
  color: var(--editorial-accent);
  margin-bottom: 20px;
}

.character-compact[data-character="cash-flow"] {
  width: 340px;
  max-width: 100%;
}
@media (max-width: 600px) {
  .character-compact[data-character="cash-flow"] {
    width: 280px;
  }
}
/* The yellow marker that sweeps behind what Kahu has recognised. */
.story-marked {
  position: relative;
  display: inline-block;
  isolation: isolate;
  color: var(--ink);
  font-weight: 650;
}
.story-marker {
  position: absolute;
  inset: -1px -3px;
  z-index: -1;
  border-radius: 3px;
  background: var(--story-marker);
  transform-origin: left;
}
/* A category pill: dashed while it waits for you, green once filed. */
.story-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 15px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--story-card, var(--surface));
  color: var(--ink);
  font-size: 15px;
  font-weight: 550;
  white-space: nowrap;
  transition:
    background-color 0.35s,
    border-color 0.35s,
    color 0.35s;
}
.story-tag.is-filed {
  border-color: transparent;
  background: color-mix(in srgb, var(--green) 13%, var(--story-card, var(--surface)));
  color: var(--green);
}
.story-tag.is-waiting {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--ink) 30%, var(--line));
  color: var(--muted);
}

/* Looping feature stories: the scene on a soft canvas, the caption and dots beside it, so
   the words can be read while the scene plays. Floating cards change shape inside the
   canvas; the canvas itself never resizes. Phones stack the caption under the canvas. */
.story {
  /* Motion tokens, shared by every story: a snap for cuts, a whip for camera moves, and
     sampled springs (9.5% and 20% overshoot) for things that pop into place. */
  --ease-snap: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-whip: cubic-bezier(0.75, 0, 0.15, 1);
  --ease-pop: linear(
    0,
    0.027,
    0.098,
    0.198,
    0.314,
    0.436,
    0.556,
    0.669,
    0.77,
    0.857,
    0.93,
    0.987,
    1.031,
    1.062,
    1.081,
    1.092,
    1.095,
    1.092,
    1.085,
    1.076,
    1.065,
    1.053,
    1.042,
    1.031,
    1.022,
    1.013,
    1.007,
    1.001,
    0.997,
    0.994,
    0.992,
    0.991,
    0.991,
    0.991,
    0.992,
    0.993,
    0.994,
    0.995,
    0.996,
    0.997,
    1
  );
  --ease-bounce: linear(
    0,
    0.043,
    0.154,
    0.307,
    0.48,
    0.654,
    0.814,
    0.951,
    1.059,
    1.136,
    1.183,
    1.203,
    1.202,
    1.185,
    1.157,
    1.123,
    1.087,
    1.052,
    1.022,
    0.997,
    0.978,
    0.966,
    0.96,
    0.958,
    0.96,
    0.965,
    0.972,
    0.979,
    0.986,
    0.993,
    0.999,
    1.003,
    1.006,
    1.008,
    1.009,
    1.008,
    1.008,
    1.006,
    1.005,
    1.003,
    1
  );
  --story-marker: #f2cf73;
  --story-canvas: color-mix(in srgb, var(--editorial-ink) 5%, var(--paper));
  --story-card: var(--surface);
  --story-card-shadow: 0 1px 2px #1d2a220d, 0 22px 50px -26px #1d2a2240;
  /* One card: the caption at the top, the scene under it, and the dots in its foot, so the
     words are on screen with the picture they describe (on phones too, where a caption
     under the scene sat below the fold). */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "caption" "stage" "foot";
  max-width: 940px;
  margin: 0 auto;
  border-radius: 32px;
  background: var(--story-canvas);
}
[data-theme="dark"] .story {
  --story-marker: #7a5f18;
  --story-canvas: color-mix(in srgb, var(--editorial-ink) 4%, var(--paper));
  --story-card: color-mix(in srgb, var(--ink) 7%, var(--surface));
  --story-card-shadow: 0 1px 2px #0006, 0 22px 50px -26px #000c;
}
.story > .story-stage {
  grid-area: stage;
}
.story > .story-caption {
  display: contents;
}
.story-stage {
  position: relative;
  height: 580px;
  overflow: hidden;
  contain: layout paint;
}
.story-stage > [aria-hidden="true"],
.story-stage > [aria-hidden="true"] > div {
  height: 100%;
}
.story-caption-text {
  grid-area: caption;
  display: grid;
  max-width: 680px;
  padding: 44px 48px 0;
  text-wrap: pretty;
}
.story-foot {
  grid-area: foot;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 0 28px 24px 40px;
}
/* Every caption shares one cell and sits on the dots, so they never move. */
.story-caption-text p {
  grid-area: 1 / 1;
  align-self: end;
  margin: 0;
  color: var(--editorial-muted);
  font-size: 17px;
  line-height: 1.55;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.45s,
    transform 0.6s cubic-bezier(0.3, 0.75, 0.2, 1);
}
.story-caption-text p.is-shown {
  opacity: 1;
  transform: none;
}
.story-caption-text strong {
  display: block;
  margin-bottom: 8px;
  color: var(--editorial-ink);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
/* The complete frame's headlines run on as one paragraph, no taller than a beat's caption. */
.story-caption-text .is-summary strong {
  margin-bottom: 0;
  font-size: 24px;
  line-height: 1.3;
  text-wrap: pretty;
}
/* A segmented switch whose thumb slides to the chosen option. */
.story-switch {
  --option: 38px;
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--option);
  padding: 3px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--ink) 6%, var(--story-card));
}
.story-switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: var(--option);
  height: calc(100% - 6px);
  border-radius: 7px;
  background: var(--story-card);
  box-shadow: 0 1px 3px #1d2a2229;
}
.story-switch > span:not(.story-switch-thumb) {
  position: relative;
  padding: 4px 0;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  transition: color 0.35s;
}
.story-switch > .is-on {
  color: var(--ink);
}
.story-note {
  order: 2;
  flex-basis: 100%;
  margin: 0;
  color: var(--editorial-muted);
  font-size: 15px;
  line-height: 1.5;
}
.story-dots {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* The pill keeps the width it has while a beat plays (one stretched dot), so the pause
   button beside it never moves when the complete frame shows three plain dots. */
.story-dots ol {
  display: flex;
  justify-content: center;
  min-width: 104px;
  margin: 0;
  padding: 0 9px;
  list-style: none;
  border-radius: 99px;
  background: var(--paper);
}
.story-dots .story-beat {
  display: block;
  padding: 16px 5px;
}
/* The ink is part of the dot's own background, so the dot's rounded edge is the only edge
   there is. A separate fill scaled inside a clip (overflow or clip-path) showed a square
   sliver past the round cap while it animated on its own layer. --fill (0 to 1) is set by
   the story; the hard stop is the ink's front edge. */
.story-dots .story-beat-bar {
  --fill: 0;
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: linear-gradient(
    to right,
    var(--editorial-ink) calc(var(--fill) * 100%),
    color-mix(in srgb, var(--editorial-ink) 24%, var(--paper)) 0
  );
  transition: width 0.55s cubic-bezier(0.3, 0.75, 0.2, 1);
}
.story-dots .story-beat.is-active .story-beat-bar {
  width: 40px;
}
.story-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--editorial-ink);
  transition: background-color 0.25s;
}
.story-control:hover {
  background: color-mix(in srgb, var(--editorial-ink) 6%, var(--paper));
}
@media (prefers-reduced-motion: reduce) {
  .story-caption-text p,
  .story-dots .story-beat-bar {
    transition: none;
  }
}

/* Household story: account cards join into one card, fold into its total, then the card
   grows a line and the month's figures. */
.hh-scene {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.hh-card {
  --card-width: 460px;
}
.hh-head,
.hh-chart,
.hh-month {
  position: relative;
  overflow: hidden;
}
.hh-head-inner {
  padding: 16px 16px 10px;
}
.hh-label {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
}
.hh-stack {
  display: flex;
  padding-left: 7px;
}
.hh-stack i,
.hh-row i {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 6%, var(--story-card));
  color: color-mix(in srgb, var(--ink) 72%, var(--story-card));
}
.hh-stack i {
  width: 30px;
  height: 30px;
  margin-left: -7px;
  box-shadow: 0 0 0 2px var(--story-card);
}
.hh-stack svg {
  width: 16px;
  height: 16px;
}
.hh-total {
  display: block;
  margin-top: 6px;
  font-size: 42px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.hh-rows {
  position: relative;
}
.hh-row {
  grid-template-columns: 38px minmax(0, 1fr) auto;
  grid-template-rows: 64px;
}
.hh-row i {
  width: 38px;
  height: 38px;
}
.hh-row span:not([class]) {
  font-weight: 500;
}
.hh-row strong {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.hh-chart-inner {
  padding: 2px 16px 14px;
}
.hh-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.hh-change {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--green);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hh-since {
  display: inline-grid;
  color: var(--muted);
  font-weight: 450;
}
/* The plot keeps a gutter on the right for its euro values and room below for its dates. */
.hh-plot {
  position: relative;
  height: 156px;
  margin: 20px 56px 34px 4px;
  transition: height 0.7s cubic-bezier(0.3, 0.75, 0.2, 1);
}
.hh-gridline {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px solid var(--line);
}
.hh-gridline b {
  position: absolute;
  left: calc(100% + 12px);
  translate: 0 -50%;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hh-date {
  position: absolute;
  top: calc(100% + 12px);
  translate: -50% 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.hh-card.is-month .hh-plot {
  height: 104px;
}
.hh-plot svg {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.household-line {
  fill: none;
  stroke: var(--green);
  stroke-width: 2.5;
  stroke-linecap: round;
}
.hh-dot {
  position: absolute;
  right: 0;
  width: 10px;
  height: 10px;
  margin: -5px -5px 0 0;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--green) 20%, transparent);
}
.hh-month-inner {
  position: relative;
  padding: 16px 16px 18px;
}
.hh-month-inner:before {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 1px;
  background: var(--line);
}
.hh-card {
  --hh-autopilot: var(--violet);
  --hh-goals: var(--gold);
  --hh-left: var(--green);
}
.hh-month-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 16px;
}
.hh-month-head span {
  color: var(--muted);
  font-weight: 500;
}
.hh-month-head strong {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.hh-bar {
  display: flex;
  gap: 2px;
  height: 12px;
  margin-top: 12px;
  border-radius: 99px;
  overflow: hidden;
  background: color-mix(in srgb, var(--ink) 8%, var(--story-card));
}
.hh-bar span {
  transform-origin: left;
}
.hh-bar .is-autopilot,
.hh-part.is-autopilot i {
  background: var(--hh-autopilot);
}
.hh-bar .is-goals,
.hh-part.is-goals i {
  background: var(--hh-goals);
}
.hh-bar .is-left,
.hh-part.is-left i {
  background: var(--hh-left);
}
.hh-parts {
  margin-top: 6px;
}
.hh-part > span,
.hh-part > strong {
  padding-top: 10px;
}
.hh-part {
  overflow: hidden;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 16px;
}
.hh-part > span {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}
.hh-part i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.hh-part strong {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.hh-part.is-left {
  align-items: center;
  font-weight: 600;
}
.hh-part.is-left strong {
  color: var(--green);
  font-size: 22px;
  letter-spacing: -0.02em;
}
@media (prefers-reduced-motion: reduce) {
  .hh-plot {
    transition: none;
  }
}
@media (max-width: 900px) {
  .story-caption-text {
    padding: 36px 36px 0;
  }
  .story-caption-text strong {
    margin-bottom: 6px;
    font-size: 24px;
  }
}
@media (max-width: 600px) {
  .story {
    border-radius: 26px;
  }
  .story-caption-text {
    padding: 26px 22px 0;
  }
  .story-caption-text strong {
    font-size: 21px;
  }
  .story-caption-text .is-summary strong {
    font-size: 19px;
  }
  .story-stage {
    height: 520px;
  }
  .story-caption-text p {
    font-size: 15px;
    line-height: 1.5;
  }
  .story-foot {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 0 18px 18px;
    text-align: center;
  }
  .story-sample {
    margin-left: 0;
  }
  .story-note {
    flex-basis: auto;
    font-size: 14px;
  }
  .hh-total {
    font-size: 34px;
  }
  .hh-row {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    grid-template-rows: 58px;
  }
  .hh-row i {
    width: 34px;
    height: 34px;
  }
  .hh-head-inner,
  .hh-chart-inner,
  .hh-month-inner {
    padding-left: 14px;
    padding-right: 14px;
  }
  .hh-change {
    font-size: 13px;
  }
  .hh-chart .story-switch {
    --option: 32px;
  }
  .hh-plot {
    height: 126px;
  }
  .hh-card.is-month .hh-plot {
    height: 78px;
  }
  .hh-label {
    font-size: 14px;
  }
  .hh-month-head,
  .hh-part {
    font-size: 15px;
  }
  .hh-part.is-left strong {
    font-size: 20px;
  }
}

/* Scenes choreographed in CSS go still with the story: no transitions, no keyframes. */
.canvas-scene.is-still,
.canvas-scene.is-still * {
  transition: none !important;
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .canvas-scene,
  .canvas-scene * {
    transition: none !important;
    animation: none !important;
  }
}

/* Floating cards on a staged canvas, stacked in its middle. */
.canvas-scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 100%;
}
.story-float {
  position: relative;
  width: min(440px, 100% - 32px);
  border-radius: 24px;
  background: var(--story-card);
  box-shadow: var(--story-card-shadow);
  overflow: hidden;
}

/* Cards that start apart and join into one: each row has its own surface until the
   card's surface fades in behind them, and rules appear between the joined rows. */
.join-card {
  position: relative;
  width: min(var(--card-width, 440px), 100% - 32px);
  padding: 8px;
}
.join-surface,
.join-row-surface {
  position: absolute;
  inset: 0;
  border-radius: 26px;
  background: var(--story-card);
  box-shadow: var(--story-card-shadow);
}
.join-row {
  position: relative;
  display: grid;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
  font-size: 15px;
}
.join-row > :not(.join-row-surface, .join-row-rule) {
  position: relative;
}
.join-row-surface {
  border-radius: 18px;
}
.join-row-rule {
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 1px;
  background: var(--line);
}
@media (max-width: 600px) {
  .join-card {
    width: calc(100% - 20px);
    padding: 4px;
  }
  .join-surface {
    border-radius: 22px;
  }
  .join-row {
    gap: 12px;
    padding: 0 14px;
    font-size: 14px;
  }
}

/* Category learning: a payments card and, beside it, the rule Kahu keeps as its own box. The
   rule forms level with the first payment, watches, and jumps to the next one when it matches.
   Rows are a fixed height so the rule can line up with them (see `beside` in habits.jsx). */
.learn-scene {
  justify-content: flex-start;
  padding-top: 128px;
}
.learn-layout {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  width: calc(100% - 24px);
}
.learn-card {
  flex: none;
  width: 340px;
  padding: 0 18px;
}
.learn-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  border-bottom: 1px solid var(--line);
}
.learn-head strong {
  font-size: 18px;
  font-weight: 600;
}
.learn-head span {
  color: var(--muted);
  font-size: 15px;
}
.learn-row {
  overflow: hidden;
}
.learn-row.is-later .learn-payment {
  border-bottom: 1px solid var(--line);
}
.learn-payment {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 14px;
  height: 140px;
  padding: 18px 0;
}
.learn-logo {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 7%, var(--story-card));
  font-size: 16px;
  font-weight: 700;
}
.learn-what,
.learn-amount {
  display: grid;
  gap: 3px;
}
.learn-what strong {
  font-size: 17px;
  font-weight: 600;
}
.learn-what > span,
.learn-amount > span {
  color: var(--muted);
  font-size: 15px;
  white-space: nowrap;
}
.learn-what .story-marked {
  margin-right: 1px;
}
.learn-amount {
  justify-items: end;
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.learn-amount > span {
  font-weight: 450;
}
/* The categories run the card's full width, so two side by side never clip. */
.learn-slot {
  grid-column: 1 / -1;
  display: grid;
  min-height: 36px;
}
.learn-swap {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  gap: 10px;
  transform-origin: left center;
}
.learn-by-rule {
  color: var(--green);
  font-size: 15px;
  font-weight: 550;
  white-space: nowrap;
}
.learn-option {
  flex: none;
  overflow: hidden;
}
.learn-rule {
  --rule-y: 126;
  position: relative;
  top: calc(var(--rule-y) * 1px - 80px);
  flex: none;
  display: grid;
  align-content: center;
  gap: 10px;
  width: 216px;
  height: 160px;
  padding: 14px 16px;
  border-radius: 22px;
  background: var(--story-card);
  box-shadow: var(--story-card-shadow);
}
.learn-link {
  position: absolute;
  top: 50%;
  right: 100%;
  width: 20px;
  height: 2px;
  margin-top: -1px;
  background: var(--green);
  transform-origin: 100% 50%;
}
.learn-link::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}
.learn-rule-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 550;
}
.learn-rule p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 17px;
  font-weight: 500;
}
.learn-arrow {
  flex: none;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.learn-status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
}
.learn-status > span {
  display: inline-grid;
}
.learn-status > i {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}
/* While it watches, the rule's dot breathes: it is looking at every new payment. */
.learn-status.is-watching > i {
  animation: learn-watch 1.4s ease-in-out infinite;
}
@keyframes learn-watch {
  50% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--green) 22%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .learn-status.is-watching > i {
    animation: none;
  }
}
/* On a narrow stage the rule sits under the payments, full width, and does not travel. */
.learning-story .story-stage {
  container-type: inline-size;
}
@container (max-width: 600px) {
  .learn-scene {
    padding-top: 24px;
  }
  .learn-layout {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  .learn-card {
    width: min(360px, 100%);
  }
  .learn-rule {
    top: 0;
    width: min(360px, 100%);
    height: auto;
    grid-template-columns: auto 1fr;
    column-gap: 14px;
  }
  .learn-rule-label,
  .learn-status {
    grid-column: 1 / -1;
  }
  .learn-link {
    display: none;
  }
}
@media (max-width: 600px) {
  .learn-card {
    padding: 0 16px;
  }
  .learn-what strong,
  .learn-amount {
    font-size: 16px;
  }
  .learn-what > span,
  .learn-amount > span {
    font-size: 14px;
  }
  .learn-slot .story-tag {
    padding: 0 12px;
    font-size: 14px;
  }
}

/* Setup story: one question at a time on a sheet, each answer lifting into the account. */
.setup-story {
  scroll-margin-top: 36px;
}
.setup-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px 14px;
}
.setup-head i {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 6%, var(--story-card));
  color: color-mix(in srgb, var(--ink) 72%, var(--story-card));
}
.setup-head span {
  display: grid;
  gap: 2px;
  color: var(--muted);
  font-size: 14px;
}
.setup-head strong {
  color: var(--ink);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.setup-row {
  overflow: hidden;
}
.setup-row-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 54px;
  margin: 0 22px;
  border-top: 1px solid var(--line);
  font-size: 15px;
}
.setup-row-inner > span:first-child:not(.setup-timeline) {
  color: var(--muted);
}
.setup-row-inner > strong {
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.setup-timeline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 10px 0;
}
.setup-timeline > span {
  display: grid;
  color: var(--muted);
  font-size: 13px;
}
.setup-timeline > span:last-child {
  text-align: right;
}
.setup-timeline strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}
.setup-timeline i {
  height: 2px;
  border-radius: 2px;
  background: var(--green);
  transform-origin: left;
}
.setup-ready {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 22px;
  padding: 14px 0 20px;
  border-top: 1px solid var(--line);
  color: var(--green);
  font-size: 16px;
  font-weight: 600;
}
.setup-sheet-inner {
  position: relative;
  display: grid;
  height: 212px;
  padding: 20px 22px;
}
.setup-progress {
  position: absolute;
  top: 22px;
  right: 22px;
  display: flex;
  gap: 5px;
}
.setup-progress i {
  width: 16px;
  height: 4px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--ink) 12%, var(--story-card));
  transition: background-color 0.4s;
}
.setup-progress .is-now {
  background: color-mix(in srgb, var(--ink) 45%, var(--story-card));
}
.setup-progress .is-done {
  background: var(--green);
}
.setup-question {
  grid-area: 1 / 1;
  display: grid;
  align-content: start;
  gap: 16px;
}
.setup-question > strong {
  padding-right: 70px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.setup-tiles {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 10px;
}
.setup-tiles > span {
  display: grid;
  gap: 4px;
  padding: 16px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--ink) 5%, var(--story-card));
  box-shadow: inset 0 0 0 1.5px transparent;
  color: var(--muted);
  font-size: 13px;
  transition: box-shadow 0.4s;
}
/* The field being typed into looks focused. */
.setup-tiles > span:has(.setup-caret) {
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 45%, transparent);
}
.setup-tiles > span.is-done {
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--green) 55%, transparent);
}
.setup-tiles b {
  display: flex;
  align-items: center;
  height: 30px;
  color: var(--ink);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.setup-caret {
  width: 2px;
  height: 24px;
  margin-left: 2px;
  background: var(--ink);
  animation: setup-caret 0.9s steps(1) infinite;
}
@keyframes setup-caret {
  50% {
    opacity: 0;
  }
}
.setup-options {
  display: grid;
  gap: 6px;
}
.setup-options span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ink) 5%, var(--story-card));
  font-size: 15px;
  font-weight: 500;
  transition:
    background-color 0.4s,
    color 0.4s;
}
.setup-options .is-picked {
  background: color-mix(in srgb, var(--green) 14%, var(--story-card));
  color: var(--green);
  font-weight: 600;
}
@media (max-width: 600px) {
  .story-float {
    width: calc(100% - 20px);
    border-radius: 22px;
  }
  .setup-head {
    padding: 16px 16px 12px;
  }
  .setup-row-inner,
  .setup-ready {
    margin: 0 16px;
  }
  .setup-row-inner {
    min-height: 50px;
    font-size: 14px;
  }
  /* Tall enough for a question that wraps onto two lines above three options. */
  .setup-sheet-inner {
    height: 244px;
    padding: 16px;
  }
  .setup-progress {
    top: 20px;
    right: 16px;
  }
  .setup-question > strong {
    font-size: 18px;
  }
  .setup-tiles b {
    font-size: 20px;
  }
  .setup-tiles > span {
    padding: 14px 12px;
  }
}

/* Bills story: the bills ticked one by one, the ledger payment sliding in under its bill and
   folding into it, then the paid bills folding into one line above what's still to pay. */
.bills-card {
  position: relative;
  overflow: hidden;
  width: min(450px, 100% - 32px);
  padding-bottom: 10px;
}
.bills-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 22px 8px;
}
.bills-head strong {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.bills-head > span {
  display: inline-grid;
  color: var(--muted);
  font-size: 16px;
  font-weight: 500;
}
.bills-head > span.is-on {
  color: var(--green);
  font-weight: 600;
}
.bills-settled,
.bills-row,
.bills-match,
.bills-left {
  overflow: hidden;
}
.bills-settled-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin: 6px 14px 4px;
  padding: 12px 12px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--green) 9%, var(--story-card));
  font-size: 16px;
}
.bills-settled-icons {
  display: flex;
  padding-left: 8px;
}
.bills-settled-icons > .item-icon {
  margin-left: -8px;
  box-shadow: 0 0 0 2px var(--story-card);
}
.bills-settled-inner strong {
  font-weight: 600;
  white-space: nowrap;
}
.bills-settled-inner b {
  color: var(--green);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.bills-row-inner {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  margin: 0 22px;
}
.bills-what {
  display: grid;
  gap: 2px;
}
.bills-what > strong {
  font-size: 16px;
  font-weight: 600;
}
.bills-status-slot {
  display: grid;
}
.bills-status {
  grid-area: 1 / 1;
  justify-self: start;
  color: var(--muted);
  font-size: 15px;
  white-space: nowrap;
}
.bills-status.is-paid {
  color: var(--green);
  font-weight: 550;
}
.bills-status.is-waiting {
  margin-top: 2px;
  padding: 1px 10px;
  border: 1.5px dashed color-mix(in srgb, var(--ink) 30%, var(--line));
  border-radius: 99px;
}
.bills-amount {
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.bills-match-inner {
  display: grid;
  gap: 6px;
  margin: 2px 14px 10px 78px;
  padding: 14px 16px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--ink) 5%, var(--story-card));
}
.bills-match-inner > span:first-child {
  color: var(--muted);
  font-size: 15px;
}
.bills-match-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.bills-match-line strong {
  font-weight: 600;
}
/* Electric Co's rule as a band on a stretch of euros: the payment's amount drops onto the
   scale and lands inside the band. Yellow, as everywhere, is what Kahu recognises. */
.bills-band {
  position: relative;
  height: 40px;
  margin: 2px 10px 0;
}
.bills-band::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--ink) 12%, var(--story-card));
}
.bills-band-range {
  position: absolute;
  top: 7px;
  left: calc(var(--from) * 100%);
  width: calc((var(--to) - var(--from)) * 100%);
  height: 14px;
  border-radius: 7px;
  background: var(--story-marker);
  transform-origin: center;
}
.bills-band-range b {
  position: absolute;
  top: 20px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.bills-band-range b:first-child {
  left: 0;
  translate: -50% 0;
}
.bills-band-range b:last-child {
  right: 0;
  translate: 50% 0;
}
.bills-band-dot {
  position: absolute;
  top: 5px;
  left: calc(var(--at) * 100%);
  width: 18px;
  height: 18px;
  margin-left: -9px;
  border: 3px solid var(--story-card);
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--ink) 60%, transparent);
}
.bills-scene.is-banding .bills-band-range {
  animation: bills-band-in 0.45s var(--ease-pop) 0.8s both;
}
.bills-scene.is-banding .bills-band-dot {
  animation: bills-drop 0.6s var(--ease-bounce) 1.3s both;
}
@keyframes bills-band-in {
  from {
    opacity: 0;
    scale: 0.2 1;
  }
}
@keyframes bills-drop {
  from {
    opacity: 0;
    translate: 0 -34px;
  }
  30% {
    opacity: 1;
  }
}
/* Linking by hand: a sheet slides up from the card's foot over the rows below, with three
   payments from the ledger, and the right one is picked. */
.bills-sheet {
  position: absolute;
  z-index: 2;
  left: 10px;
  right: 10px;
  bottom: 10px;
  display: grid;
  gap: 2px;
  padding: 14px 10px 10px;
  border-radius: 20px;
  background: var(--story-card);
  box-shadow:
    0 -1px 0 var(--line),
    0 -18px 40px -18px color-mix(in srgb, var(--ink) 40%, transparent);
  translate: 0 calc(100% + 20px);
  transition: translate 0.45s var(--ease-whip);
}
.bills-scene.is-picking .bills-sheet {
  translate: 0 0;
  transition: translate 0.55s var(--ease-snap) 0.15s;
}
.bills-picker-head {
  padding: 0 6px 6px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
}
.bills-picker-head b {
  color: var(--ink);
  font-weight: 600;
}
.bills-pick {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 22px;
  align-items: center;
  gap: 10px;
  padding: 6px 6px;
  border-radius: 10px;
  font-size: 15px;
}
.bills-pick > span {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-weight: 600;
  white-space: nowrap;
}
.bills-pick small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}
.bills-pick strong {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.bills-pick i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: var(--story-card);
  opacity: 0;
}
.bills-scene.is-picking .bills-pick {
  animation: story-rise 0.4s var(--ease-snap) calc(0.3s + var(--j, 0) * 0.1s) both;
}
.bills-scene.is-picking .bills-pick.is-it {
  animation:
    story-rise 0.4s var(--ease-snap) 0.3s both,
    bills-picked 0.5s var(--ease-pop) 1.4s both;
}
.bills-scene.is-picking .bills-pick.is-it i {
  animation: bills-picked-tick 0.4s var(--ease-pop) 1.5s both;
}
/* Once linked, the picked payment stays picked while the sheet slides away. */
.bills-scene.is-linked .bills-pick.is-it {
  background: color-mix(in srgb, var(--green) 14%, var(--story-card));
}
.bills-scene.is-linked .bills-pick.is-it i {
  opacity: 1;
  background: var(--green);
}
@keyframes bills-picked {
  from {
    background: transparent;
  }
  40% {
    scale: 1.04;
  }
  to {
    background: color-mix(in srgb, var(--green) 14%, var(--story-card));
  }
}
@keyframes bills-picked-tick {
  from {
    opacity: 0;
    scale: 0.4;
    background: var(--green);
  }
  to {
    opacity: 1;
    background: var(--green);
  }
}
.bills-left-inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 22px 0;
  padding: 16px 0 8px;
  border-top: 1px solid var(--line);
}
.bills-left-inner span {
  color: var(--muted);
  font-size: 16px;
  font-weight: 500;
}
.bills-left-inner strong {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) {
  .bills-card {
    width: calc(100% - 20px);
  }
  .bills-head {
    padding: 16px 16px 6px;
  }
  .bills-settled-inner {
    gap: 10px;
    margin-inline: 8px;
    font-size: 15px;
  }
  .bills-settled-icons {
    padding-left: 12px;
  }
  .bills-settled-icons > .item-icon {
    margin-left: -12px;
  }
  .bills-row-inner {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 12px;
    min-height: 52px;
    margin: 0 16px;
  }
  .bills-what > strong,
  .bills-amount {
    font-size: 15px;
  }
  .bills-status {
    font-size: 14px;
  }
  .bills-match-inner {
    margin: 2px 8px 8px;
    padding: 12px 14px;
  }
  .bills-match-line {
    font-size: 15px;
  }
  .bills-pick {
    font-size: 14px;
  }
  .bills-left-inner {
    margin-inline: 16px;
  }
  .bills-left-inner strong {
    font-size: 26px;
  }
}

/* Autopilot story: one card that changes shape. Rows sit at measured places in the card
   (rows and gaps from its top), and the card's height follows them; every move in a step
   shares one duration and one curve (--aps-move), so nothing overtakes anything else. */
.aps-scene {
  --aps-move: 0.75s cubic-bezier(0.65, 0, 0.35, 1);
  --card: min(440px, 100% - 32px);
  --pitch: 52px;
  --gap: 12px;
  --head-h: 58px;
  position: relative;
}
.aps-scene.is-total {
  --head-h: 128px;
}
.aps-card {
  position: relative;
  width: var(--card);
  height: calc(var(--head-h) + var(--rows) * var(--pitch) + var(--gaps) * var(--gap) + 10px);
  border-radius: 24px;
  background: var(--story-card);
  box-shadow: var(--story-card-shadow);
  overflow: hidden;
  transition: height var(--aps-move);
}
.aps-scene.is-entering .aps-card {
  animation: aps-rise 0.6s var(--ease-snap) both;
}
@keyframes aps-rise {
  from {
    opacity: 0;
    translate: 0 16px;
  }
}
/* The head: a small title while the payments are listed, then the monthly amount. The
   two share the head and cross over as it opens. */
.aps-head {
  position: relative;
  height: var(--head-h);
  transition: height var(--aps-move);
}
.aps-head-small,
.aps-head-total {
  position: absolute;
  inset: 0 18px;
  display: grid;
  align-content: center;
  transition: opacity 0.35s ease;
}
.aps-head-small {
  grid-auto-flow: column;
  justify-content: space-between;
  align-items: baseline;
  font-size: 17px;
  font-weight: 600;
}
.aps-head-small em {
  color: var(--muted);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
}
.aps-head-total {
  gap: 6px;
  opacity: 0;
}
.aps-scene.is-total .aps-head-small {
  opacity: 0;
}
.aps-scene.is-total .aps-head-total {
  opacity: 1;
  transition-delay: 0.3s;
}
.aps-head-total > span:first-child {
  color: var(--muted);
  font-size: 16px;
  font-weight: 500;
}
.aps-head-total > strong {
  font-size: 44px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.aps-band {
  display: flex;
  gap: 2px;
  height: 12px;
  margin-top: 8px;
  border-radius: 99px;
  overflow: hidden;
  background: color-mix(in srgb, var(--ink) 7%, var(--story-card));
}
.aps-band i {
  background: var(--category);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--ease-snap);
}
.aps-scene.is-total .aps-band i {
  transform: none;
  transition-delay: 0.5s;
}
.aps-list {
  position: relative;
}
/* A row: payments and kinds alike, placed by rows (--u) and gaps (--k) from the list top. */
.aps-row {
  position: absolute;
  top: 0;
  right: 8px;
  left: 8px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  height: var(--pitch);
  padding: 0 10px 0 8px;
  border-radius: 14px;
  font-size: 16px;
  transform: translateY(calc(var(--u) * var(--pitch) + var(--k) * var(--gap)));
  transition:
    transform var(--aps-move),
    opacity 0.3s ease,
    background-color 0.5s ease;
}
.aps-row i {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 7%, var(--story-card));
  color: var(--muted);
  transition:
    background-color 0.5s ease,
    color 0.5s ease;
}
.aps-row-name {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  font-weight: 500;
  white-space: nowrap;
}
.aps-row-name em {
  color: var(--muted);
  font-style: normal;
  font-variant-numeric: tabular-nums;
}
.aps-row > strong {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* By kind: each payment takes its kind's colour, in its icon and a soft tint. */
.aps-scene.is-sorted .aps-row i {
  background: color-mix(in srgb, var(--category) 20%, var(--story-card));
  color: color-mix(in srgb, var(--category) 72%, var(--ink));
}
/* Rows are solid, so a row passing another covers it instead of mixing their words. */
.aps-row.is-payment {
  background-color: var(--story-card);
}
.aps-scene.is-sorted .aps-row {
  background-color: color-mix(in srgb, var(--category) 9%, var(--story-card));
}
/* Folding: a kind's row rides on its first payment, above the others, and fades in over
   it while the rest close up underneath and fade. */
.aps-row.is-group {
  z-index: 1;
  opacity: 0;
}
.aps-scene.is-folded .aps-row.is-group {
  opacity: 1;
  transition-delay: 0s, 0.2s, 0s;
}
.aps-scene.is-folded .aps-row.is-payment {
  opacity: 0;
  transition-delay: 0s, 0.15s, 0s;
}
/* Once joined, the kinds' rows are the card's, with a hairline between them. */
.aps-scene.is-total .aps-row.is-group {
  background-color: var(--story-card);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: 0;
}
/* Arriving: the card rises, then the payments drop into it one after another. */
.aps-scene.is-entering .aps-row.is-payment {
  animation: aps-in 0.45s var(--ease-snap) calc(0.25s + var(--order) * 90ms) both;
}
@keyframes aps-in {
  from {
    opacity: 0;
    translate: 0 -10px;
  }
}
@media (max-width: 600px) {
  .aps-scene {
    --card: calc(100% - 20px);
    --pitch: 48px;
    --gap: 10px;
    --head-h: 52px;
  }
  .aps-scene.is-total {
    --head-h: 112px;
  }
  .aps-head-total > strong {
    font-size: 34px;
  }
  .aps-row {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 10px;
    font-size: 15px;
  }
  .aps-row i {
    width: 32px;
    height: 32px;
  }
}
@media (max-width: 359px) {
  .aps-row {
    gap: 8px;
    padding: 0 8px 0 6px;
    font-size: 14px;
  }
  .aps-row-name {
    gap: 6px;
  }
}

/* Yours or Autopilot's (Cash flow): the Autopilot story's card, with its head always open.
   Autopilot's payments turn violet and step below a gap, fold into one row, and the head
   then counts down to what is left: yours. */
.lens-scene {
  --head-h: 128px;
}
.lens-scene .aps-head-total {
  opacity: 1;
}
.lens-head-label {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 30px;
}
.lens-label-all,
.lens-label-yours {
  transition: opacity 0.35s ease;
}
.lens-label-yours {
  position: absolute;
  left: 0;
  opacity: 0;
}
.lens-scene.is-yours .lens-label-all {
  opacity: 0;
}
.lens-scene.is-yours .lens-label-yours {
  opacity: 1;
  transition-delay: 0.2s;
}
/* The app's own switch between the two views, shown once the story lands on Yours. */
.lens-switch {
  position: absolute;
  right: 0;
  display: flex;
  padding: 3px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--ink) 7%, var(--story-card));
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.lens-switch > * {
  padding: 4px 11px;
  border-radius: 99px;
}
.lens-switch b {
  background: var(--story-card);
  box-shadow: 0 1px 2px #1d2a2226;
  color: var(--ink);
}
.lens-switch span {
  color: var(--muted);
}
.lens-scene.is-yours .lens-switch {
  opacity: 1;
  transition-delay: 0.35s;
}
.lens-scene:not(.is-sorted) .lens-band {
  gap: 0;
}
.lens-scene .aps-band i {
  transform: none;
  transition: background-color 0.5s ease;
}
.lens-band .is-yours,
.lens-band .is-auto {
  background: color-mix(in srgb, var(--ink) 30%, var(--story-card));
}
.lens-scene.is-sorted .lens-band .is-auto {
  background: var(--violet);
}
.lens-scene.is-yours .lens-band .is-auto {
  background: color-mix(in srgb, var(--violet) 30%, var(--story-card));
}
.lens-scene.is-yours .lens-band .is-yours {
  background: var(--ink);
}
/* Yours stays plain; only Autopilot's rows take a colour. */
.lens-scene.is-sorted .lens-row.is-yours {
  background-color: var(--story-card);
}
.lens-scene.is-sorted .lens-row.is-yours i {
  background: color-mix(in srgb, var(--ink) 7%, var(--story-card));
  color: var(--muted);
}
/* Folding only folds Autopilot's rows; yours stay. */
.lens-scene.is-folded .lens-row.is-yours {
  opacity: 1;
}
/* Autopilot's share of "Everything else" waits under it, then steps out: yours sit above
   Autopilot's rows. */
.lens-row.is-yours {
  z-index: 1;
}
.lens-scene:not(.is-sorted) .lens-row.is-split {
  opacity: 0;
}
.lens-scene.is-entering .lens-row.is-split {
  animation: none;
}
/* Once it is yours, Autopilot's row steps back: muted words, a plain row. */
.lens-scene.is-yours .aps-row.lens-auto {
  background-color: var(--story-card);
  color: var(--muted);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: 0;
}
@media (max-width: 600px) {
  .lens-scene {
    --head-h: 112px;
  }
  .lens-switch {
    font-size: 12px;
  }
  .lens-switch > * {
    padding: 3px 9px;
  }
}

/* Installments story, in the loan story's grammar: plans as chips, the months they have left
   as stacked columns on a euro scale, and a today line that whips to each step as a plan
   ends. Violet is installments; green is paid off. */
.plans-story {
  --plan-light: color-mix(in srgb, var(--violet) 50%, var(--violet-light));
}
/* A shared entrance: type that rises into place as its spacing closes. */
@keyframes story-rise {
  from {
    opacity: 0;
    letter-spacing: 0.12em;
    transform: translateY(70%);
  }
}
.pl-card {
  width: min(470px, 100% - 32px);
  padding: 22px 22px 16px;
  transition: box-shadow 0.5s;
}
.pl-head {
  display: grid;
  gap: 2px;
}
.pl-head > span {
  color: var(--muted);
  font-size: 16px;
  font-weight: 500;
}
.pl-head b {
  color: color-mix(in srgb, var(--violet) 55%, var(--ink));
  font-weight: 600;
}
.pl-head strong {
  font-size: 40px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  transition: color 0.4s;
}
.pl-card.is-free .pl-head strong,
.pl-card.is-free .pl-head b {
  color: var(--green);
}
.pl-scene.is-entering .pl-head strong {
  animation: story-rise 0.8s var(--ease-snap) 0.05s both;
}
.pl-chips {
  display: grid;
  gap: 4px;
  margin-top: 14px;
}
.pl-chip {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  column-gap: 10px;
  align-items: center;
  height: 36px;
  padding: 0 12px 0 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--plan) 10%, var(--story-card));
  transition: background 0.4s;
}
.pl-chip i {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: var(--plan);
  color: var(--story-card);
  transition: background 0.4s;
}
.pl-chip strong {
  font-size: 15px;
  font-weight: 600;
}
.pl-chip > span {
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
}
.pl-chip > span b {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pl-chip.is-paid {
  background: color-mix(in srgb, var(--green) 13%, var(--story-card));
}
.pl-chip.is-paid i {
  background: var(--green);
  border-radius: 50%;
}
.pl-chip.is-paid > span {
  color: var(--green);
  font-weight: 550;
}
.pl-chip.is-paid > span b {
  color: var(--green);
}
.pl-scene.is-entering .pl-chip {
  animation: pl-stamp 0.5s var(--ease-bounce) calc(0.45s + var(--i) * 0.22s) both;
}
.pl-chip.is-ending {
  animation: pl-pop 0.55s var(--ease-pop) 0.35s both;
}
@keyframes pl-stamp {
  from {
    opacity: 0;
    scale: 1.5;
    rotate: -6deg;
  }
}
@keyframes pl-pop {
  40% {
    scale: 1.1;
  }
}
/* The plot: columns on a euro scale, its values in a gutter on the right. */
.pl-plot {
  margin-top: 18px;
}
.pl-area {
  position: relative;
  height: 150px;
  margin-right: 44px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 22%, var(--story-card));
}
.pl-gridline {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px solid var(--line);
}
.pl-gridline b {
  position: absolute;
  left: calc(100% + 10px);
  translate: 0 -50%;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.pl-columns {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 100%;
}
.pl-month {
  display: flex;
  flex: 1;
  flex-direction: column-reverse;
  height: 100%;
  transform-origin: bottom;
}
.pl-month i {
  display: block;
  flex: none;
  background: var(--plan);
  box-shadow: 0 -1.5px 0 var(--story-card);
  transition:
    opacity 0.4s,
    filter 0.4s;
}
.pl-month i:last-child {
  border-radius: 3px 3px 0 0;
}
.pl-month i:first-child {
  box-shadow: none;
}
/* Today whips to each step; the months behind it fall back, and the plan ending there
   flashes green. */
.pl-today {
  position: absolute;
  z-index: 1;
  top: -10px;
  bottom: 0;
  left: calc(var(--today) * 100%);
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--ink);
  opacity: 0;
  transition:
    left 0.45s var(--ease-whip),
    opacity 0.3s;
}
.pl-scene.is-focusing .pl-today {
  opacity: 1;
}
.pl-scene.is-focusing .pl-month.is-past i {
  opacity: 0.28;
  filter: saturate(0.3);
}
.pl-scene.is-ending-0 .pl-month i.is-last.is-plan-0,
.pl-scene.is-ending-1 .pl-month i.is-last.is-plan-1,
.pl-scene.is-ending-2 .pl-month i.is-last.is-plan-2 {
  opacity: 1;
  filter: none;
}
.pl-scene.is-ending-0 .is-last.is-plan-0,
.pl-scene.is-ending-1 .is-last.is-plan-1,
.pl-scene.is-ending-2 .is-last.is-plan-2 {
  animation: pl-flash 0.9s var(--ease-snap) 0.3s both;
}
@keyframes pl-flash {
  30% {
    background: var(--green);
  }
}
.pl-axis {
  position: relative;
  height: 22px;
  margin: 8px 44px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
}
.pl-axis span {
  position: absolute;
  left: calc(var(--at) * 100%);
  translate: -50% 0;
  white-space: nowrap;
}
.pl-axis span:first-child {
  translate: -12px 0;
}
@media (max-width: 600px) {
  .pl-card {
    width: calc(100% - 20px);
    padding: 18px 16px 14px;
  }
  .pl-head strong {
    font-size: 34px;
  }
  .pl-chip {
    height: 34px;
    padding: 0 10px 0 8px;
  }
  .pl-chip strong {
    font-size: 14px;
  }
  .pl-chip > span {
    font-size: 13px;
  }
  .pl-area {
    height: 120px;
    margin-right: 38px;
  }
  .pl-columns {
    gap: 2px;
  }
  .pl-axis {
    margin-right: 38px;
    font-size: 13px;
  }
}

/* Loan story: one card, the loan's years as bars split into principal (green) and interest
   (red, the app's terracotta), redrawn by an extra payment, and the interest it costs. */
.loan-card {
  --principal: var(--green);
  --interest: var(--coral);
  width: min(460px, 100% - 32px);
}
.loan-head {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 22px 22px 0;
}
.loan-head > span:not(.loan-extra) {
  color: var(--muted);
  font-size: 16px;
  font-weight: 500;
}
.loan-head strong {
  font-size: 40px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.loan-terms {
  font-variant-numeric: tabular-nums;
}
.loan-balance {
  transform-origin: left center;
}
.loan-scene.is-entering .loan-balance {
  animation: story-rise 0.8s var(--ease-snap) 0.05s both;
}
/* The extra payment lands on the balance: it gives under the hit and flashes green. */
.loan-scene.is-hit .loan-balance {
  animation: loan-hit 0.6s var(--ease-snap) var(--lands);
}
/* The extra payment, big: it punches in over the centre of the years, holds on the beat, then
   whips up into the balance and is gone as it lands (at --lands). --hit-x and --hit-y are the
   balance figure's centre, measured from the drop's own centre over the plot. */
.loan-card {
  position: relative;
}
.loan-drop {
  --hit-x: -93px;
  --hit-y: -144px;
  position: absolute;
  z-index: 2;
  top: 218px;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 14px 26px 12px;
  border-radius: 24px;
  background: var(--green);
  color: var(--story-card);
  box-shadow: 0 22px 44px -18px color-mix(in srgb, var(--green) 75%, transparent);
  translate: -50% -50%;
  opacity: 0;
  pointer-events: none;
}
.loan-drop strong {
  white-space: nowrap;
  font-size: 44px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.loan-drop span {
  font-size: 16px;
  font-weight: 600;
  opacity: 0.85;
}
.loan-scene.is-hit .loan-drop {
  animation:
    loan-drop-in 0.5s var(--ease-bounce) both,
    loan-drop-fly 0.4s var(--ease-whip) calc(var(--lands) - 0.4s) forwards;
}
@keyframes loan-drop-in {
  from {
    opacity: 0;
    scale: 2.2;
    rotate: -8deg;
  }
  to {
    opacity: 1;
    scale: 1;
    rotate: 0deg;
  }
}
@keyframes loan-drop-fly {
  from {
    opacity: 1;
    translate: -50% -50%;
    scale: 1;
  }
  80% {
    opacity: 1;
  }
  to {
    opacity: 0;
    translate: calc(-50% + var(--hit-x)) calc(-50% + var(--hit-y));
    scale: 0.35;
  }
}
@keyframes loan-hit {
  30% {
    color: var(--green);
    scale: 0.95;
  }
}
.loan-plot {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 150px;
  margin: 16px 22px 0;
}
.loan-year {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  transform-origin: bottom;
}
.loan-year i {
  display: block;
  flex: none;
}
.loan-year .is-interest {
  border-radius: 3px 3px 0 0;
  background: var(--interest);
}
.loan-year .is-principal {
  background: var(--principal);
  box-shadow: 0 -1.5px 0 var(--story-card);
}
/* Focus racks across the years: the rest blur back while 2027, then 2044, stays sharp,
   each with a callout of its interest. One phase, three seconds. */
.loan-scene.is-focusing .loan-year {
  animation: loan-rest 3s ease both;
}
.loan-scene.is-focusing .loan-year.is-early {
  animation-name: loan-focus-early;
}
.loan-scene.is-focusing .loan-year.is-late {
  animation-name: loan-focus-late;
}
@keyframes loan-rest {
  8%,
  92% {
    filter: blur(2.5px);
    opacity: 0.32;
  }
}
@keyframes loan-focus-early {
  0%,
  42% {
    filter: blur(0);
    opacity: 1;
  }
  52%,
  92% {
    filter: blur(2.5px);
    opacity: 0.32;
  }
}
@keyframes loan-focus-late {
  8%,
  44% {
    filter: blur(2.5px);
    opacity: 0.32;
  }
  54%,
  100% {
    filter: blur(0);
    opacity: 1;
  }
}
.loan-callout {
  position: absolute;
  top: 16%;
  left: calc(var(--at) * 100% + 10px);
  display: grid;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--story-card);
  box-shadow: var(--story-card-shadow);
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}
.loan-callout.is-late {
  right: calc((1 - var(--at)) * 100% + 10px);
  left: auto;
  text-align: right;
}
.loan-callout b {
  color: color-mix(in srgb, var(--coral) 55%, var(--ink));
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.loan-scene.is-focusing .loan-callout.is-early {
  animation: loan-call-early 3s var(--ease-snap) both;
}
.loan-scene.is-focusing .loan-callout.is-late {
  animation: loan-call-late 3s var(--ease-snap) both;
}
@keyframes loan-call-early {
  0% {
    opacity: 0;
    transform: translateX(-10px) scale(0.92);
  }
  10%,
  42% {
    opacity: 1;
    transform: none;
  }
  50%,
  100% {
    opacity: 0;
    transform: translateX(14px);
  }
}
@keyframes loan-call-late {
  0%,
  46% {
    opacity: 0;
    transform: translateX(-14px);
  }
  56%,
  92% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
  }
}
.loan-extra {
  position: absolute;
  top: 20px;
  right: 22px;
  padding: 6px 12px;
  border-radius: 99px;
  background: var(--green);
  color: var(--story-card);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--green) 70%, transparent);
}
.loan-axis {
  position: relative;
  height: 22px;
  margin: 8px 22px 0;
  color: var(--muted);
  font-size: 15px;
}
.loan-end {
  position: absolute;
  top: 0;
  display: grid;
  justify-items: end;
  transform: translateX(-100%);
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}
.loan-end > span {
  grid-area: 1 / 1;
}
.loan-end .is-was {
  opacity: 0;
}
.loan-scene.is-hit .loan-end .is-was {
  animation: loan-end-was 0.2s linear calc(var(--lands) + 0.3s) both;
}
.loan-scene.is-hit .loan-end .is-now {
  animation: story-rise 0.5s var(--ease-snap) calc(var(--lands) + 0.4s) both;
}
@keyframes loan-end-was {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.loan-key {
  display: flex;
  gap: 16px;
  margin: 10px 22px 0;
  font-size: 14px;
  font-weight: 500;
}
.loan-key span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.loan-key i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--principal);
}
.loan-key .is-interest i {
  background: var(--interest);
}
.loan-cost-inner {
  margin: 16px 22px 0;
  padding: 14px 0 20px;
  border-top: 1px solid var(--line);
}
.loan-cost-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.loan-cost-head span {
  color: var(--muted);
  font-size: 16px;
  font-weight: 500;
}
.loan-cost-head strong {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.loan-kept {
  overflow: hidden;
}
.loan-kept p {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding-top: 14px;
  color: var(--green);
}
.loan-kept span {
  display: grid;
  color: var(--muted);
  font-size: 15px;
}
.loan-kept strong {
  color: var(--green);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.loan-kept b {
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) {
  .loan-card {
    width: calc(100% - 20px);
  }
  .loan-head {
    padding: 18px 16px 0;
  }
  .loan-head strong {
    font-size: 32px;
  }
  .loan-drop {
    --hit-x: -52px;
    --hit-y: -118px;
    top: 183px;
    padding: 12px 20px 10px;
    border-radius: 20px;
  }
  .loan-drop strong {
    font-size: 36px;
  }
  .loan-drop span {
    font-size: 14px;
  }
  .loan-extra {
    top: 16px;
    right: 14px;
    padding: 4px 9px;
    font-size: 13px;
  }
  .loan-plot {
    gap: 2px;
    height: 110px;
    margin: 14px 16px 0;
  }
  .loan-axis,
  .loan-key,
  .loan-cost-inner {
    margin-left: 16px;
    margin-right: 16px;
  }
  .loan-axis,
  .loan-head span,
  .loan-cost-head span,
  .loan-kept span {
    font-size: 14px;
  }
  .loan-cost-head strong {
    font-size: 20px;
  }
  .loan-callout {
    padding: 6px 10px;
    font-size: 13px;
  }
  .loan-callout b {
    font-size: 16px;
  }
  .loan-kept strong,
  .loan-kept b {
    font-size: 17px;
  }
}

/* Import story: a printed statement drops in and is read; its lines lift into Kahu's entries,
   each takes its category in that category's colour, and then the clean ones are added while
   two wait for review. The paper keeps paper colours in both themes. */
.stm-scene {
  position: relative;
  display: grid;
  place-items: center;
}
.stm-scene > * {
  grid-area: 1 / 1;
}
.stm-paper {
  --paper: #fdfcf8;
  --paper-ink: #24272c;
  --paper-muted: #6b6f76;
  --paper-rule: #dedbd1;
  position: relative;
  width: min(440px, 100% - 36px);
  padding: 22px 24px 18px;
  border-radius: 6px;
  background: var(--paper);
  color: var(--paper-ink);
  box-shadow:
    0 1px 0 rgb(0 0 0 / 0.04),
    0 26px 50px -24px rgb(20 24 30 / 0.45);
  rotate: -1.5deg;
  transition:
    opacity 0.5s var(--ease-whip),
    scale 0.6s var(--ease-whip),
    translate 0.6s var(--ease-whip),
    filter 0.5s var(--ease-whip);
}
.stm-scene.is-app .stm-paper {
  opacity: 0;
  scale: 0.84;
  translate: 0 30px;
  filter: blur(6px);
}
.stm-scene.is-entering .stm-paper {
  animation: stm-drop 0.8s var(--ease-bounce) both;
}
@keyframes stm-drop {
  from {
    opacity: 0;
    translate: 0 -70%;
    rotate: -9deg;
    scale: 1.08;
  }
  30% {
    opacity: 1;
  }
}
.stm-letterhead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--paper-ink);
}
.stm-bank {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.stm-bank i {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: linear-gradient(135deg, #2d6cdf, #1b3f8f);
}
.stm-letterhead > span:last-child {
  display: grid;
  justify-items: end;
  color: var(--paper-muted);
  font-size: 13px;
}
.stm-letterhead b {
  color: var(--paper-ink);
  font-size: 14px;
}
.stm-holder {
  display: flex;
  justify-content: space-between;
  padding: 10px 0 12px;
  color: var(--paper-muted);
  font-size: 13px;
}
.stm-holder span:first-child {
  color: var(--paper-ink);
  font-weight: 600;
}
.stm-table {
  position: relative;
  display: grid;
}
.stm-cols,
.stm-line {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}
.stm-cols {
  padding-bottom: 6px;
  border-bottom: 1px solid var(--paper-rule);
  color: var(--paper-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.stm-cols span:last-child,
.stm-line span:last-child {
  text-align: right;
}
.stm-line {
  height: 30px;
  border-bottom: 1px dotted var(--paper-rule);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.stm-line > span:nth-child(2) {
  overflow: hidden;
}
.stm-line .is-smudged {
  filter: blur(1.1px);
  opacity: 0.75;
}
/* Reading: a scan line sweeps down and each line is marked as it passes. */
.stm-scan {
  position: absolute;
  left: -10px;
  right: -10px;
  top: 22px;
  height: 30px;
  border-radius: 4px;
  background: linear-gradient(
    180deg,
    transparent,
    color-mix(in srgb, var(--story-marker) 70%, transparent) 50%,
    transparent
  );
  opacity: 0;
  pointer-events: none;
}
.stm-scene.is-reading .stm-scan {
  animation: stm-scan 1.9s linear 0.1s both;
}
@keyframes stm-scan {
  0% {
    opacity: 1;
    translate: 0 0;
  }
  95% {
    opacity: 1;
    translate: 0 180px;
  }
  100% {
    opacity: 0;
    translate: 0 180px;
  }
}
.stm-scene.is-reading .stm-line {
  animation: stm-read 0.5s var(--ease-snap) calc(0.1s + var(--i) * 0.3s) both;
}
@keyframes stm-read {
  40% {
    background: color-mix(in srgb, var(--story-marker) 55%, transparent);
  }
}
.stm-closing {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
  font-size: 13px;
  font-weight: 700;
}
/* Kahu's entries: one row per line, its category in its own colour. */
.stm-card {
  width: min(440px, 100% - 32px);
  padding: 16px 20px 6px;
  opacity: 0;
  scale: 0.92;
  transition:
    opacity 0.35s 0.15s,
    scale 0.55s var(--ease-pop) 0.15s;
}
.stm-scene.is-app .stm-card {
  opacity: 1;
  scale: 1;
}
.stm-card-head {
  display: grid;
  gap: 2px;
  padding-bottom: 12px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
}
.stm-card-head strong {
  display: grid;
  color: var(--ink);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.stm-count {
  grid-area: 1 / 1;
  transition:
    opacity 0.3s,
    translate 0.4s var(--ease-snap);
}
.stm-count b {
  color: var(--green);
  font-weight: 600;
}
.stm-count.is-decided,
.stm-scene.is-decided .stm-count.is-read {
  opacity: 0;
  translate: 0 -8px;
}
.stm-scene.is-decided .stm-count.is-decided {
  opacity: 1;
  translate: 0 0;
}
.stm-entry {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  height: 60px;
  margin: 0 -10px;
  padding: 0 10px;
  border-top: 1px solid var(--line);
  border-radius: 12px;
  transition: background 0.4s;
}
.stm-scene.is-lifting .stm-entry {
  animation: stm-lift 0.55s var(--ease-bounce) calc(0.25s + var(--i) * 0.09s) both;
}
@keyframes stm-lift {
  from {
    opacity: 0;
    translate: 0 26px;
    scale: 0.94;
  }
}
.stm-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 14%, var(--story-card));
  transition: background 0.3s;
}
.stm-what {
  display: grid;
  justify-items: start;
  gap: 4px;
  min-width: 0;
}
.stm-what strong {
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}
.stm-tag {
  padding: 3px 10px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--cat) 18%, var(--story-card));
  color: color-mix(in srgb, var(--cat) 42%, var(--ink));
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  scale: 0.5;
  transform-origin: left center;
}
.stm-scene.is-sorted .stm-tag {
  opacity: 1;
  scale: 1;
}
.stm-scene.is-sorted .stm-dot {
  background: var(--cat);
}
.stm-scene.is-sorting .stm-tag {
  animation: stm-stamp 0.45s var(--ease-pop) calc(0.15s + var(--i) * 0.2s) both;
}
.stm-scene.is-sorting .stm-dot {
  transition-delay: calc(0.15s + var(--i) * 0.2s);
}
@keyframes stm-stamp {
  from {
    opacity: 0;
    scale: 1.6;
  }
}
.stm-amount {
  display: grid;
  justify-items: end;
  gap: 1px;
}
.stm-amount strong {
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.stm-amount strong.is-in {
  color: var(--green);
}
.stm-outcome {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  translate: 0 6px;
}
.stm-outcome.is-added {
  color: var(--green);
}
.stm-outcome.is-review {
  color: color-mix(in srgb, var(--gold) 55%, var(--ink));
}
.stm-scene.is-decided .stm-outcome {
  opacity: 1;
  translate: 0 0;
}
.stm-scene.is-deciding .stm-outcome {
  transition:
    opacity 0.3s calc(var(--i) * 0.1s),
    translate 0.4s var(--ease-snap) calc(var(--i) * 0.1s);
}
.stm-scene.is-decided .stm-entry.is-flagged {
  background: color-mix(in srgb, var(--gold) 12%, var(--story-card));
}
@media (max-width: 600px) {
  .stm-paper {
    width: calc(100% - 20px);
    padding: 16px 14px 14px;
  }
  .stm-bank {
    font-size: 15px;
  }
  .stm-letterhead > span:last-child {
    font-size: 12px;
    text-align: right;
  }
  .stm-cols,
  .stm-line {
    grid-template-columns: 46px minmax(0, 1fr) auto;
    gap: 8px;
  }
  .stm-line {
    height: 27px;
    font-size: 11.5px;
  }
  @keyframes stm-scan {
    0% {
      opacity: 1;
      translate: 0 0;
    }
    95% {
      opacity: 1;
      translate: 0 162px;
    }
    100% {
      opacity: 0;
      translate: 0 162px;
    }
  }
  .stm-scan {
    top: 20px;
    height: 27px;
  }
  .stm-card {
    width: calc(100% - 20px);
    padding: 14px 14px 4px;
  }
  .stm-entry {
    height: 56px;
    margin: 0 -6px;
    padding: 0 6px;
    gap: 10px;
  }
  .stm-what {
    gap: 3px;
  }
  .stm-what strong,
  .stm-amount strong {
    font-size: 15px;
  }
  .stm-tag {
    padding: 1px 8px;
    font-size: 13px;
  }
  .stm-outcome {
    font-size: 13px;
  }
}

/* Review story: one queue, the duplicate opening in place with both records side by side,
   then the copy removed and the purchase counted once. */
.review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px 10px;
}
.review-head strong {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.review-head > span {
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 9px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--ink) 8%, var(--story-card));
  font-size: 15px;
  font-weight: 600;
}
.review-case {
  margin: 0 22px;
  border-top: 1px solid var(--line);
}
.review-case:last-child {
  margin-bottom: 8px;
}
.review-case-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  transition: min-height 0.45s var(--ease-snap);
}
/* Each case wears its category's colour: a dot and a tinted chip, as in the import story. */
.review-cat-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cat);
}
.review-what {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.review-case-row strong {
  font-size: 16px;
  font-weight: 600;
}
.review-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  max-height: 64px;
  transition:
    max-height 0.45s var(--ease-snap),
    opacity 0.3s;
}
/* While the duplicate's evidence is open, the other cases fold to their name and amount. */
.review-case.is-quiet .review-tags {
  max-height: 0;
  opacity: 0;
}
.review-case.is-quiet .review-case-row {
  min-height: 48px;
}

.review-cat {
  padding: 2px 10px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--cat) 18%, var(--story-card));
  color: color-mix(in srgb, var(--cat) 42%, var(--ink));
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.review-kind-slot {
  display: grid;
}
.review-kind-slot > span {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  justify-self: start;
  font-size: 13px;
  white-space: nowrap;
}
.review-kind-slot .is-kind {
  padding: 1px 9px;
  border: 1.5px dashed color-mix(in srgb, var(--ink) 30%, var(--line));
  border-radius: 99px;
  color: var(--muted);
}
.review-kind-slot .is-done {
  color: var(--green);
  font-weight: 600;
}
.review-head > span.is-clear {
  background: color-mix(in srgb, var(--green) 14%, var(--story-card));
  color: var(--green);
}
.review-head > span > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.review-case-row b {
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.review-ask {
  overflow: hidden;
}
.review-choices.is-quick > div {
  flex-wrap: wrap;
  padding-left: 22px;
}
.review-choices .is-pick {
  transition:
    background 0.3s,
    color 0.3s,
    border-color 0.3s;
}
/* The right answer is picked on the beat: it pops and turns green. */
.review-case.is-asking .is-pick {
  animation: review-pick 0.5s var(--ease-pop) 0.9s both;
}
@keyframes review-pick {
  from {
    border-color: var(--line);
    background: transparent;
    color: var(--ink);
  }
  40% {
    scale: 1.08;
  }
  to {
    border-color: transparent;
    background: color-mix(in srgb, var(--green) 22%, var(--story-card));
    color: color-mix(in srgb, var(--green) 78%, var(--ink));
  }
}
/* Once answered, the pick stays picked while its row folds away. */
.review-case.is-answered .is-pick {
  border-color: transparent;
  background: color-mix(in srgb, var(--green) 22%, var(--story-card));
  color: color-mix(in srgb, var(--green) 78%, var(--ink));
}
.review-evidence,
.review-result,
.review-choices {
  overflow: hidden;
}
.review-compare {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px 12px;
  padding: 4px 0 14px;
  font-size: 14px;
}
.review-compare > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.review-compare-row {
  display: contents;
}
.review-compare-row > span:first-child {
  color: var(--muted);
}
.review-compare .story-marked {
  margin: 0;
  font-weight: 550;
}
.review-compare .is-copy,
.review-compare .is-copy .story-marker {
  transition:
    color 0.5s,
    opacity 0.5s;
}
.review-card.is-chosen .is-copy {
  color: var(--muted);
  text-decoration: line-through;
}
.review-card.is-chosen .is-copy .story-marker {
  opacity: 0;
}
.review-choices > div {
  display: flex;
  gap: 8px;
  padding-bottom: 16px;
}
.review-choices span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 99px;
  font-size: 14px;
  font-weight: 600;
}
.review-choices .is-chosen {
  border-color: transparent;
  background: color-mix(in srgb, var(--green) 14%, var(--story-card));
  color: var(--green);
}
.review-result p {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0;
  padding: 0 0 14px 22px;
  font-size: 15px;
}
.review-result s {
  color: var(--muted);
}
.review-result strong {
  color: var(--green);
  font-size: 18px;
  font-weight: 600;
}
@media (max-width: 600px) {
  .review-head {
    padding: 16px 16px 8px;
  }
  .review-case {
    margin: 0 16px;
  }
  .review-case-row {
    min-height: 58px;
  }
  .review-compare {
    grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    font-size: 13px;
  }
  .review-compare > span {
    font-size: 12px;
  }
  .review-choices.is-quick > div {
    gap: 6px;
    padding-left: 0;
  }
  .review-choices span {
    min-height: 32px;
    padding: 0 11px;
    font-size: 13px;
    white-space: nowrap;
  }
}

/* Accounts story: the household list with one detail card under it. A single highlight
   glides down the list; the card keeps its size while the open account's details cross
   over. */
.acc-scene {
  --lr: 52px;
  --thumb: 38px;
  gap: 12px;
}
.acc-card.story-float,
.acc-detail.story-float {
  width: min(520px, 100% - 32px);
}
.acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 6px;
}
.acc-head strong {
  font-size: 19px;
  font-weight: 600;
}
.acc-head span {
  color: var(--muted);
  font-size: 14px;
}
.acc-rows {
  position: relative;
  padding: 0 8px 10px;
}
.acc-mark {
  position: absolute;
  top: 0;
  right: 8px;
  left: 8px;
  height: var(--lr);
  border-radius: 16px;
  background: color-mix(in srgb, var(--account) 14%, var(--story-card));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--account) 45%, transparent);
  opacity: 0;
  transform: translateY(calc(var(--sel) * var(--lr)));
  transition:
    transform 0.55s var(--ease-snap),
    background-color 0.4s ease,
    box-shadow 0.4s ease,
    opacity 0.3s ease;
}
.acc-scene.is-open .acc-mark {
  opacity: 1;
}
.acc-row {
  position: relative;
  display: grid;
  grid-template-columns: var(--thumb) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  height: var(--lr);
  padding: 0 12px 0 9px;
}
.acc-thumb {
  position: relative;
  width: var(--thumb);
  height: var(--thumb);
  border-radius: 12px;
  background: color-mix(in srgb, var(--account) 16%, var(--story-card));
}
.acc-object {
  position: absolute;
  inset: 8%;
  width: 84%;
  height: 84%;
  object-fit: contain;
}
.acc-what {
  display: grid;
  min-width: 0;
}
.acc-what > strong {
  font-size: 15px;
  font-weight: 600;
}
.acc-what > span {
  color: var(--muted);
  font-size: 13px;
}
.acc-value {
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.acc-value.is-quiet {
  color: var(--muted);
  font-weight: 500;
}
/* Landing: the rows rise into the list one after another. */
.acc-scene.is-entering .acc-row {
  animation: acc-rise 0.5s var(--ease-snap) calc(var(--i) * 80ms + 100ms) both;
}
@keyframes acc-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}
.acc-detail.story-float {
  display: grid;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.35s ease,
    transform 0.5s var(--ease-snap);
}
.acc-scene.is-open .acc-detail {
  opacity: 1;
  transform: none;
}
/* Every pane shares the card's one cell, so the card is always the size of the largest. */
.acc-pane {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) minmax(0, 0.8fr);
  align-items: center;
  gap: 2px 18px;
  padding: 14px 20px 14px 14px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    visibility 0s linear 0.2s;
}
.acc-pane.is-on {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.3s ease 0.15s,
    visibility 0s;
}
.acc-pane-object {
  position: relative;
  grid-row: span 2;
  width: 112px;
  height: 112px;
  border-radius: 26px;
  background: color-mix(in srgb, var(--account) 16%, var(--story-card));
}
.acc-pane-object .acc-object {
  transform: scale(0.88) translateY(6px);
  transition: transform 0.5s var(--ease-snap);
}
.acc-pane.is-on .acc-pane-object .acc-object {
  transform: none;
  transition-delay: 0.15s;
}
.acc-pane-title {
  display: grid;
  align-self: end;
}
.acc-pane-title > span {
  color: var(--muted);
  font-size: 14px;
}
.acc-pane-title > strong {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.acc-pane-value {
  align-self: start;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
/* What this kind keeps: label over value, beside the name. */
.acc-pane dl {
  grid-column: 3;
  grid-row: 1 / span 2;
  display: grid;
  gap: 12px;
  margin: 0;
  padding-left: 18px;
  border-left: 1px solid var(--line);
}
.acc-pane dl > div {
  display: grid;
  font-size: 14px;
}
.acc-pane dt {
  color: var(--muted);
  font-size: 13px;
}
.acc-pane dd {
  margin: 0;
  font-weight: 600;
}
/* Any currency (Accounts page): the accounts story's rows, each in its own currency; once
   counted, a foreign account shows its balance in the household's currency under its own, and
   the head's total counts in. Switching the household currency swaps the chip and recounts. */
.fx-head {
  display: grid;
  gap: 10px;
  padding: 16px 20px 10px;
}
.fx-home {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 14px;
}
.fx-chip {
  overflow: hidden;
  padding: 4px 12px;
  border-radius: 99px;
  background: var(--story-canvas);
  color: var(--ink);
  font-weight: 600;
}
/* A new household currency rolls up into place, like a counter turning over. */
.fx-roll {
  display: inline-block;
  animation: fx-roll 0.5s var(--ease-snap) both;
}
@keyframes fx-roll {
  from {
    opacity: 0;
    transform: translateY(0.9em);
  }
}
.fx-total {
  display: grid;
  gap: 2px;
}
.fx-count {
  color: var(--muted);
  font-size: 14px;
}
.fx-total strong {
  overflow: hidden;
  font-size: 30px;
  font-weight: 650;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.fx-scene.is-counted .fx-total strong {
  opacity: 1;
}
.fx-amounts {
  display: grid;
  justify-items: end;
}
.fx-in {
  overflow: hidden;
  min-height: 1.25em;
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 0.35s ease,
    transform 0.35s var(--ease-snap);
}
.fx-in.is-shown {
  opacity: 1;
  transform: none;
}
.fx-scene.is-still .fx-roll,
.fx-scene.is-still .fx-total strong,
.fx-scene.is-still .fx-in {
  animation: none;
  transition: none;
}
@media (max-width: 600px) {
  /* Two amounts to a row need a little more room than the accounts story's rows. */
  .acc-scene.fx-scene {
    --lr: 47px;
  }
  .fx-head {
    padding: 12px 14px 6px;
    gap: 6px;
  }
  .fx-total strong {
    font-size: 24px;
  }
  .fx-in {
    font-size: 12px;
  }
}
/* Phones: the rows keep a name and an amount; the open account's card says its kind, and
   its details sit in rows under the name. */
@media (max-width: 600px) {
  .acc-scene {
    --lr: 41px;
    --thumb: 30px;
    gap: 10px;
  }
  .acc-card.story-float,
  .acc-detail.story-float {
    width: calc(100% - 20px);
  }
  .acc-pane {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 0 12px;
    padding: 12px 14px 8px;
  }
  .acc-pane-object {
    width: 76px;
    height: 76px;
    border-radius: 20px;
  }
  .acc-pane-title > span {
    font-size: 13px;
  }
  .acc-pane-title > strong {
    font-size: 17px;
  }
  .acc-pane-value {
    font-size: 22px;
  }
  .acc-pane dl {
    grid-column: 1 / -1;
    grid-row: auto;
    gap: 0;
    margin-top: 8px;
    padding-left: 0;
    border-left: 0;
  }
  .acc-pane dl > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border-top: 1px solid var(--line);
    font-size: 13px;
  }
  .acc-pane dd {
    text-align: right;
  }
  .acc-head {
    padding: 12px 16px 4px;
  }
  .acc-head strong {
    font-size: 16px;
  }
  .acc-rows {
    padding: 0 6px 6px;
  }
  .acc-mark {
    right: 6px;
    left: 6px;
    border-radius: 12px;
  }
  .acc-row {
    gap: 10px;
    padding: 0 10px 0 6px;
  }
  .acc-thumb {
    border-radius: 9px;
  }
  .acc-what > span {
    display: none;
  }
  .acc-what > strong,
  .acc-value {
    font-size: 14px;
  }
}

@media (max-width: 359px) {
  .acc-what > strong,
  .acc-value {
    font-size: 13px;
  }
}

/* Cash flow story: the cash flow chart drawn in on a loop. Salaries pour into the household
   bar, then each destination splits off; totals count along above. */
.cfs-card {
  --flow-gap: var(--story-card);
  display: grid;
  width: min(560px, 100% - 32px);
  padding: 20px 18px 18px;
}
.cfs-totals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 0 4px 16px;
  border-bottom: 1px solid var(--line);
}
.cfs-totals > span {
  display: grid;
  gap: 2px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
}
.cfs-totals strong {
  color: var(--ink);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.cfs-totals strong {
  transition: color 0.4s;
}
.cfs-totals .is-kept strong {
  color: var(--green);
}
.cfs-diagram {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 124px;
  gap: 8px;
  height: 300px;
  margin-top: 14px;
}
.cfs-diagram svg {
  display: block;
  width: 100%;
  height: 100%;
}
.cfs-labels {
  position: relative;
}
.cfs-label {
  position: absolute;
  left: 0;
  right: 0;
  display: grid;
  translate: 0 -50%;
  font-size: 14px;
  line-height: 1.25;
}
.cfs-labels.is-in .cfs-label {
  justify-items: end;
  text-align: right;
}
.cfs-label span {
  color: var(--muted);
  font-weight: 500;
}
.cfs-label strong {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.cfs-label.is-kept span,
.cfs-label.is-kept strong {
  color: var(--green);
}
/* Opening a category. Every band but Groceries falls back; then the camera pushes into its
   node, the diagram blurs away and the Groceries panel opens from the same corner, its shops
   stamping in one after another. The totals row stays. The camera then pulls back to the
   whole month, the complete frame. */
.cfs-diagram,
.cfs-open {
  grid-area: 2 / 1;
}
.cfs-band {
  transition: opacity 0.45s var(--ease-snap);
}
.cfs-band.is-dim {
  opacity: 0.16;
}
/* Fallen back, a label greys to the muted colour: still readable, clearly not chosen. */
.cfs-label > * {
  transition: color 0.45s var(--ease-snap);
}
.cfs-label.is-dim > * {
  color: var(--muted);
  font-weight: 500;
}
.cfs-scene.is-focused .cfs-label.is-chosen {
  animation: cfs-chosen 0.6s var(--ease-pop);
}
.cfs-label.is-chosen span {
  color: var(--ink);
  font-weight: 600;
}
@keyframes cfs-chosen {
  40% {
    scale: 1.14;
  }
}
.cfs-diagram {
  transform-origin: 88% 14%;
  transition:
    opacity 0.35s var(--ease-whip),
    scale 0.5s var(--ease-whip),
    filter 0.4s var(--ease-whip);
}
.cfs-scene.is-open .cfs-diagram {
  opacity: 0;
  scale: 1.4;
  filter: blur(8px);
}
.cfs-open {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 300px;
  margin-top: 14px;
  visibility: hidden;
  opacity: 0;
  scale: 0.5;
  transform-origin: 88% 14%;
  transition:
    opacity 0.3s,
    scale 0.45s var(--ease-whip),
    visibility 0s 0.45s;
}
.cfs-scene.is-open .cfs-open {
  visibility: visible;
  opacity: 1;
  scale: 1;
  transition:
    opacity 0.3s 0.15s,
    scale 0.55s var(--ease-pop) 0.15s,
    visibility 0s 0.15s;
}
.cfs-open-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  row-gap: 2px;
  padding: 2px 4px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
}
.cfs-open-head i {
  font-style: normal;
}
.cfs-open-head b {
  color: var(--ink);
  font-weight: 600;
}
.cfs-open-head strong {
  grid-row: 1 / 3;
  grid-column: 2;
  color: var(--ink);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.cfs-shops {
  display: grid;
  align-content: start;
  margin: 0;
  padding: 6px 4px 0;
  list-style: none;
}
/* Six rows fit the 300px the diagram leaves, with the card's own padding still below the
   last one. */
.cfs-shop {
  display: grid;
  grid-template-columns: 28px auto minmax(0, 1fr) auto;
  grid-template-rows: 31px 3px;
  align-items: center;
  column-gap: 10px;
  height: 37px;
}
.cfs-shop-logo {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--coral) 20%, var(--story-card));
  color: color-mix(in srgb, var(--coral) 60%, var(--ink));
  font-size: 13px;
  font-weight: 700;
}
.cfs-shop strong {
  font-size: 15px;
  font-weight: 600;
}
.cfs-shop span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
}
.cfs-shop b {
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.cfs-shop i {
  grid-column: 2 / -1;
  height: 3px;
  border-radius: 2px;
  background: var(--coral);
  scale: var(--share) 1;
  transform-origin: left;
}
.cfs-scene.is-open .cfs-shop {
  animation: cfs-stamp 0.5s var(--ease-bounce) calc(0.4s + var(--i) * 0.11s) both;
}
.cfs-scene.is-open .cfs-shop i {
  animation: cfs-bar 0.6s var(--ease-snap) calc(0.5s + var(--i) * 0.11s) both;
}
@keyframes cfs-stamp {
  from {
    opacity: 0;
    translate: 0 14px;
    scale: 0.92;
  }
}
@keyframes cfs-bar {
  from {
    scale: 0 1;
  }
}
@media (max-width: 600px) {
  .cfs-card {
    width: calc(100% - 20px);
    padding: 16px 12px 14px;
  }
  .cfs-totals > span {
    font-size: 13px;
  }
  .cfs-totals strong {
    font-size: 17px;
  }
  /* On a phone the salaries are labelled inside their own bands, so the flow gets the
     width the left labels took and its curves are not squeezed. The bands are mint in both
     themes, so their labels are a fixed dark ink. */
  .cfs-diagram {
    grid-template-columns: minmax(0, 1fr) 92px;
    gap: 6px;
    height: 280px;
  }
  .cfs-diagram svg {
    grid-area: 1 / 1;
  }
  .cfs-labels.is-in {
    grid-area: 1 / 1;
    z-index: 1;
    width: 49%;
  }
  .cfs-labels.is-in .cfs-label {
    justify-items: center;
    text-align: center;
  }
  .cfs-labels.is-in .cfs-label > * {
    color: #10261d;
  }
  .cfs-labels.is-in .cfs-label.is-dim > * {
    color: var(--muted);
  }
  .cfs-label {
    font-size: 13px;
  }
  .cfs-label-more {
    display: none;
  }
  .cfs-open {
    height: 280px;
  }
  .cfs-open-head {
    font-size: 14px;
  }
  .cfs-open-head strong {
    font-size: 21px;
  }
  .cfs-shop {
    grid-template-rows: 28px 3px;
    height: 34px;
  }
}
@media (max-width: 359px) {
  /* The narrowest phones: the totals and every shop row stay on one line, and the total
     sits beside the heading's first line, so the six shops still fit the card. */
  .cfs-totals {
    gap: 6px;
  }
  .cfs-totals strong {
    font-size: 14px;
  }
  .cfs-open-head {
    padding-bottom: 10px;
  }
  .cfs-open-head strong {
    grid-row: 1;
    font-size: 18px;
  }
  .cfs-open-head > span:last-of-type {
    grid-column: 1 / -1;
  }
  .cfs-shop {
    grid-template-columns: 24px auto minmax(0, 1fr) auto;
    column-gap: 7px;
    white-space: nowrap;
  }
  .cfs-shop-logo {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
  .cfs-shop strong {
    font-size: 13px;
  }
  .cfs-shop b {
    font-size: 14px;
  }
  .cfs-shop span {
    font-size: 12px;
  }
}

/* Subscriptions story: the payments card becomes the subscription; what Kahu spotted is
   asked in its own card below, and "If you cancel" opens at the foot. */
.subs-card {
  width: min(450px, 100% - 32px);
  padding-bottom: 8px;
}
.subs-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 20px 22px 10px;
}
.subs-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--ink) 6%, var(--story-card));
  color: var(--muted);
  transition:
    background-color 0.4s,
    color 0.4s;
}
.subs-icon.is-on {
  background: color-mix(in srgb, var(--silver) 20%, var(--story-card));
  color: var(--silver);
}
.subs-title {
  display: grid;
}
.subs-title > span {
  display: grid;
  grid-area: 1 / 1;
  gap: 2px;
}
.subs-title strong {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.subs-title > span > span {
  color: var(--muted);
  font-size: 15px;
}
.subs-price {
  display: grid;
  justify-items: end;
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.subs-price small {
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
}
.subs-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 54px;
  padding-block: 6px;
  margin: 0 22px;
  border-top: 1px solid var(--line);
}
.subs-what {
  display: grid;
  gap: 2px;
}
.subs-what > strong {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.subs-what > span {
  color: var(--muted);
  font-size: 15px;
}
.subs-was {
  color: color-mix(in srgb, var(--coral) 55%, var(--ink));
  font-weight: 600;
}
.subs-amount {
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.subs-cancel {
  overflow: hidden;
}
.subs-cancel-inner {
  display: grid;
  gap: 10px;
  margin: 8px 14px 6px;
  padding: 16px 16px 14px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--green) 9%, var(--story-card));
}
.subs-cancel-title {
  font-size: 16px;
  font-weight: 600;
}
.subs-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 14px;
  color: var(--muted);
  font-size: 15px;
}
.subs-line strong {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.subs-line .is-good {
  color: var(--green);
}
.subs-ask {
  overflow: hidden;
}
.subs-sheet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin: 8px 14px 6px;
  padding: 16px 16px 16px 18px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--ink) 5%, var(--story-card));
}
.subs-found {
  display: grid;
  gap: 3px;
}
.subs-found strong {
  font-size: 16px;
  font-weight: 600;
}
.subs-found span {
  color: var(--muted);
  font-size: 15px;
}
.subs-found-actions {
  display: flex;
  gap: 10px;
}
.subs-found-actions b {
  padding: 9px 18px;
  border-radius: 99px;
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 15px;
  font-weight: 600;
}
.subs-found-actions .is-confirm {
  background: var(--ink);
  box-shadow: none;
  color: var(--story-card);
}
@media (max-width: 600px) {
  .subs-card {
    width: calc(100% - 20px);
  }
  .subs-head {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 12px;
    padding: 16px 16px 8px;
  }
  .subs-icon {
    width: 38px;
    height: 38px;
  }
  .subs-title strong,
  .subs-price {
    font-size: 18px;
  }
  .subs-row {
    min-height: 44px;
    margin: 0 16px;
    /* The asking sheet needs the room on a phone; the rows' line height keeps text off the
       rules. */
    padding-block: 0;
  }
  .subs-what > strong,
  .subs-what > span {
    font-size: 14px;
  }
  .subs-sheet {
    gap: 10px;
    margin: 6px 10px 4px;
    padding: 12px 14px;
  }
}

/* Goals story: the Savings account keeps its balance while goals claim shares of it in gold. */
.goals-card {
  width: min(460px, 100% - 32px);
  padding-bottom: 8px;
}
.goals-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 20px 22px 14px;
}
.goals-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--mint) 16%, var(--story-card));
  color: color-mix(in srgb, var(--mint) 70%, var(--ink));
}
.goals-title {
  display: grid;
  gap: 2px;
}
.goals-title strong {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.goals-title span {
  color: var(--muted);
  font-size: 15px;
}
.goals-balance {
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.goals-bar {
  position: relative;
  height: 18px;
  margin: 0 22px 10px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--ink) 8%, var(--story-card));
}
.goals-part {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 3px;
  box-shadow: 1px 0 0 var(--story-card);
}
.goals-part.is-0 {
  border-radius: 7px 3px 3px 7px;
}
.goals-part.is-0,
.goals-row-inner.is-0 i {
  background: var(--gold);
}
/* The goals' shades step away from the card (darker brass in light, paler in dark), so the
   last one never fades into it. */
.goals-card {
  --goal-tone: #5a3d0c;
}
[data-theme="dark"] .goals-card {
  --goal-tone: #fff;
}
.goals-part.is-1,
.goals-row-inner.is-1 i {
  background: color-mix(in srgb, var(--gold) 70%, var(--goal-tone));
}
.goals-part.is-2,
.goals-row-inner.is-2 i {
  background: color-mix(in srgb, var(--gold) 40%, var(--goal-tone));
}
.goals-row,
.goals-foot,
.goals-line.is-plan {
  overflow: hidden;
}
.goals-row-inner {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding-block: 6px;
  margin: 0 22px;
  border-top: 1px solid var(--line);
}
.goals-row-inner i {
  width: 12px;
  height: 12px;
  border-radius: 4px;
}
.goals-what {
  display: grid;
  gap: 2px;
}
.goals-what strong {
  font-size: 16px;
  font-weight: 600;
}
.goals-what span {
  color: var(--muted);
  font-size: 15px;
}
.goals-pace {
  display: grid;
  justify-items: end;
  gap: 2px;
}
.goals-pace strong {
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.goals-pace span {
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
}
.goals-foot-inner {
  display: grid;
  gap: 10px;
  margin: 8px 14px 6px;
  padding: 14px 16px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--ink) 5%, var(--story-card));
}
.goals-line {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: var(--muted);
  font-size: 16px;
}
.goals-line strong {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.goals-line.is-plan strong {
  color: var(--green);
}
@media (max-width: 600px) {
  .goals-card {
    width: calc(100% - 20px);
  }
  .goals-head {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 12px;
    padding: 16px 16px 12px;
  }
  .goals-icon {
    width: 38px;
    height: 38px;
  }
  .goals-title strong,
  .goals-balance {
    font-size: 18px;
  }
  .goals-title span,
  .goals-what span {
    font-size: 14px;
  }
  .goals-pace span {
    font-size: 13px;
  }
  .goals-bar {
    margin: 0 16px 8px;
  }
  .goals-row-inner {
    min-height: 48px;
    margin: 0 16px;
  }
  .goals-foot-inner {
    margin: 6px 10px 4px;
    padding: 12px 14px;
  }
}

/* Household story: people as monogram badges in their own colours, the household as a grey
   house; accounts take an owner, a payment remembers who paid, income splits by person. */
.people-card {
  width: min(460px, 100% - 32px);
  padding-bottom: 8px;
}
.people-head {
  display: grid;
  gap: 12px;
  padding: 20px 22px 12px;
}
.people-head > strong {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.people-who {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.people-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 5px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--ink) 5%, var(--story-card));
  font-size: 15px;
  font-weight: 600;
}
.people-badge {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--person);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.people-badge.is-household {
  background: color-mix(in srgb, var(--ink) 14%, var(--story-card));
  color: var(--muted);
}
.people-badge svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.people-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 50px;
  margin: 0 22px;
  border-top: 1px solid var(--line);
}
.people-account {
  font-size: 16px;
  font-weight: 600;
}
.people-what {
  display: grid;
  gap: 2px;
}
.people-what strong {
  font-size: 16px;
  font-weight: 600;
}
.people-what span {
  color: var(--muted);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.people-owner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
}
.people-extra {
  overflow: hidden;
}
.people-pay,
.people-income {
  display: grid;
  gap: 10px;
  margin: 8px 14px 6px;
  padding: 16px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--ink) 5%, var(--story-card));
}
.people-pay {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.people-amount {
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.people-paid {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 15px;
}
.people-choice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 99px;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
  font-weight: 600;
}
.people-choice.is-on {
  padding-left: 4px;
  background: var(--story-card);
  box-shadow: inset 0 0 0 2px var(--person);
}
[data-theme="dark"] .people-choice.is-on {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--person) 70%, #fff);
}
.people-choice .people-badge {
  width: 22px;
  height: 22px;
  font-size: 11px;
}
.people-income > strong {
  font-size: 16px;
  font-weight: 600;
}
.people-split {
  display: flex;
  gap: 3px;
  height: 14px;
}
.people-split i {
  display: block;
  border-radius: 5px;
  background: var(--person);
}
.people-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: 15px;
}
.people-line > span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}
.people-line b {
  color: var(--muted);
  font-weight: 500;
}
.people-line strong {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.people-line .people-badge {
  width: 22px;
  height: 22px;
  font-size: 11px;
}
@media (max-width: 600px) {
  .people-card {
    width: calc(100% - 20px);
  }
  .people-head {
    padding: 16px 16px 10px;
  }
  .people-row {
    min-height: 44px;
    margin: 0 16px;
  }
  .people-who {
    gap: 6px;
  }
  .people-chip {
    gap: 6px;
    padding: 4px 10px 4px 4px;
    font-size: 14px;
  }
  .people-chip .people-badge {
    width: 22px;
    height: 22px;
    font-size: 11px;
  }
  .people-what span,
  .people-owner {
    font-size: 14px;
  }
  .people-pay,
  .people-income {
    margin: 6px 10px 4px;
    padding: 12px 14px;
  }
}

/* Autopilot history story: one row per month. What repeats lands first, in Autopilot's violet,
   and stacks into a steady wall; everyday spending swings out beside it in mint. */
.rh-card {
  width: min(540px, 100% - 32px);
  padding: 22px 24px 18px;
}
.rh-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
}
.rh-when {
  display: inline-grid;
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 16px;
  font-weight: 500;
}
.rh-figure {
  display: grid;
  gap: 2px;
}
.rh-figure > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
}
.rh-figure i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.rh-figure strong {
  display: block;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rh-figure.is-repeat i,
.rh-bar .is-repeat {
  background: var(--violet);
}
.rh-figure.is-everyday i,
.rh-bar .is-everyday {
  background: var(--mint);
}
/* The rows sit on a euro scale: gridlines up the plot, their values along the bottom. */
.rh-plot {
  --label: 40px;
  position: relative;
  display: grid;
  gap: 9px;
  margin-top: 22px;
  padding-bottom: 28px;
}
.rh-tick {
  position: absolute;
  top: -6px;
  bottom: 22px;
  left: calc(var(--label) + (100% - var(--label)) * var(--at));
  border-left: 1px solid var(--line);
}
.rh-tick b {
  position: absolute;
  bottom: -24px;
  left: 0;
  translate: -50% 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rh-tick:first-child b {
  translate: 0 0;
}
.rh-row {
  position: relative;
  display: grid;
  grid-template-columns: var(--label) minmax(0, 1fr);
  align-items: center;
  height: 20px;
}
.rh-month {
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  transition: color 0.3s;
}
.rh-row.is-now .rh-month {
  color: var(--ink);
  font-weight: 600;
}
.rh-bar {
  display: flex;
  height: 100%;
}
.rh-bar i {
  display: block;
  flex: none;
  height: 100%;
}
.rh-bar .is-repeat {
  border-radius: 6px 2px 2px 6px;
}
.rh-bar .is-everyday {
  margin-left: 2px;
  border-radius: 2px 6px 6px 2px;
}
@media (max-width: 600px) {
  .rh-card {
    width: calc(100% - 20px);
    padding: 16px 16px 12px;
  }
  .rh-head {
    gap: 8px 14px;
  }
  .rh-figure strong {
    font-size: 20px;
  }
  .rh-plot {
    --label: 34px;
    gap: 7px;
  }
  .rh-row {
    height: 17px;
  }
  .rh-tick b {
    font-size: 13px;
  }
}

/* Round 7 homepage: readable type, promises, feature tiles and plans with small loops. */
.editorial-kicker::before {
  width: 22px;
  height: 1.5px;
  background: currentColor;
  opacity: 0.55;
  content: "";
}
.promises {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0 36px;
}
.promises > a {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  border-radius: 20px;
  background: var(--editorial-tint);
  color: var(--editorial-muted);
  font-size: 15px;
  line-height: 1.5;
  transition:
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.3s;
}
.promises > a:hover {
  transform: translateY(-3px);
  background: color-mix(in srgb, var(--editorial-accent) 7%, var(--editorial-tint));
}
.promises strong {
  display: block;
  margin-bottom: 2px;
  color: var(--editorial-ink);
  font-size: 17px;
  font-weight: 600;
}
.promise-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--editorial-accent);
}
.promise-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.section-followup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 14px 24px;
  border-radius: 99px;
  background: var(--paper);
  color: var(--editorial-ink);
  font-size: 16px;
  font-weight: 600;
}
.section-followup svg,
.direction-go svg {
  width: 18px;
  height: 18px;
  transition: transform 0.25s;
}
.section-followup:hover svg {
  transform: translateX(4px);
}
/* The way back to the Autopilot cards (on Home or the Autopilot page), on pages opened from
   them: it stays at the bottom corner while the page is explored. */
.back-pill {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 20px 12px 16px;
  border-radius: 99px;
  background: var(--editorial-ink);
  color: var(--paper);
  box-shadow: 0 12px 30px -12px #0008;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.back-pill svg {
  width: 18px;
  height: 18px;
  rotate: 180deg;
  transition: transform 0.25s;
}
.back-pill:hover svg {
  transform: translateX(4px);
}
.has-back-pill body {
  padding-bottom: 84px;
}
@media (prefers-reduced-motion: no-preference) {
  .back-pill {
    animation: back-pill-in 0.4s var(--ease-snap) 0.3s both;
  }
}
@keyframes back-pill-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}
@media (max-width: 600px) {
  .back-pill {
    bottom: 16px;
    left: 16px;
  }
}
.plans {
  --tile: color-mix(in srgb, var(--editorial-ink) 4%, var(--paper));
  display: grid;
  gap: 24px;
}
.plan {
  display: flex;
  flex-direction: column;
  padding: 12px 12px 30px;
  border-radius: 28px;
  background: var(--tile);
  color: var(--editorial-ink);
}
.plan > :not(.loop-art) {
  margin-inline: 18px;
}
/* Each plan opens with the owner's picture of what it means: the puppy asleep at home, and two
   puppies on a string telephone. */
.plan > .plan-picture {
  align-self: center;
  width: auto;
  height: 220px;
  margin-bottom: 26px;
}
.plan-kind {
  margin-bottom: 10px;
  color: var(--editorial-accent);
  font-size: 15px;
  font-weight: 600;
}
.plan h3 {
  font-family: var(--editorial-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.plan p {
  margin-top: 12px;
  color: var(--editorial-muted);
  font-size: 17px;
  line-height: 1.65;
}
.free-and-paid .editorial-section-heading {
  max-width: 830px;
}
.plans {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 1060px;
  margin: 56px auto 0;
}
.plan.is-free {
  background: var(--editorial-tint);
}
.plan h3 {
  font-size: 36px;
}
.plan ul {
  display: grid;
  gap: 12px;
  margin: 24px 0 30px;
  padding: 0;
  list-style: none;
}
.plan li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 17px;
}
.plan li:before {
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--green) 15%, transparent);
  color: var(--green);
  font-size: 13px;
  font-weight: 700;
  content: "✓" / "";
}
.plan-when {
  align-self: flex-start;
  margin-top: auto;
  padding: 9px 16px;
  border-radius: 99px;
  background: var(--paper);
  font-size: 14px;
  font-weight: 600;
}
/* The plans' looping pictures, on the Free & paid page (Home's plan cards show the owner's
   pictures instead). */
/* The pictures: one card or device, drawn in CSS. The finished frame is the resting style;
   the loop runs only while the picture plays (in view, motion on). */
.loop-art {
  --art-card: var(--surface);
  --art-shadow: 0 1px 2px #1d2a220f, 0 12px 26px -16px #1d2a2240;
  position: relative;
  display: grid;
  place-items: center;
  height: 220px;
  margin-bottom: 26px;
  overflow: hidden;
  border-radius: 20px;
  background: var(--paper);
  color: var(--ink);
}
[data-theme="dark"] .loop-art {
  --art-card: color-mix(in srgb, var(--ink) 8%, var(--surface));
  --art-shadow: 0 1px 2px #0006, 0 12px 26px -16px #000a;
}
.loop-art.is-playing *,
.loop-art.is-playing *:after {
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.art-local,
.art-sync {
  grid-auto-flow: column;
  align-items: end;
  justify-content: center;
  padding-bottom: 34px;
}
.art-phone {
  position: relative;
  display: grid;
  align-content: start;
  gap: 8px;
  width: 86px;
  height: 150px;
  padding: 26px 10px 10px;
  border-radius: 20px;
  background: var(--art-card);
  box-shadow: var(--art-shadow), inset 0 0 0 2px color-mix(in srgb, var(--ink) 12%, transparent);
}
.art-notch {
  position: absolute;
  top: 9px;
  left: 50%;
  width: 26px;
  height: 5px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--ink) 14%, transparent);
  transform: translateX(-50%);
}
.art-row {
  height: 16px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--cat) 22%, var(--art-card));
  box-shadow: inset 4px 0 0 var(--cat);
}
.art-phone .art-row:nth-child(2) { animation-name: art-pop-0; }
.art-phone .art-row:nth-child(3) { animation-name: art-pop-1; }
.art-phone .art-row:nth-child(4) { animation-name: art-pop-2; }
.art-badge {
  position: absolute;
  left: calc(50% + 22px);
  bottom: 26px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px 8px 11px;
  border-radius: 99px;
  background: var(--editorial-ink);
  color: var(--paper);
  font-size: 13px;
  font-weight: 700;
}
.is-playing .art-badge {
  animation-name: art-pop-3;
}
.art-sync {
  --bridge: 84px;
  --screen: 150px;
  gap: 0;
}
.art-bridge {
  position: relative;
  align-self: center;
  width: var(--bridge);
  height: 32px;
}
.art-bridge svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: color-mix(in srgb, var(--ink) 22%, transparent);
  stroke-width: 2;
  stroke-dasharray: 3 5;
  stroke-linecap: round;
}
.art-pulse {
  position: absolute;
  top: 18px;
  left: -5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--green) 22%, transparent);
  opacity: 0;
}
.is-playing .art-pulse {
  animation-name: art-pulse;
  animation-timing-function: linear;
}
.art-laptop {
  display: grid;
  justify-items: center;
  /* The base is 36px wider than the screen; tuck its overhang under the arc so the arc
     meets the screen itself. */
  margin-left: -18px;
}
.art-laptop > div {
  display: grid;
  align-content: start;
  gap: 8px;
  width: var(--screen);
  height: 100px;
  padding: 14px;
  border-radius: 10px 10px 3px 3px;
  background: var(--art-card);
  box-shadow: var(--art-shadow), inset 0 0 0 2px color-mix(in srgb, var(--ink) 12%, transparent);
}
.art-laptop > span {
  width: calc(var(--screen) + 36px);
  height: 9px;
  border-radius: 2px 2px 8px 8px;
  background: color-mix(in srgb, var(--ink) 16%, var(--art-card));
}
.art-laptop .art-row:nth-child(1) { animation-name: art-pop-4; }
.art-laptop .art-row:nth-child(2) { animation-name: art-pop-5; }
.art-laptop .art-row:nth-child(3) { animation-name: art-pop-6; }
@keyframes art-pulse {
  0%,
  44% {
    opacity: 0;
    transform: translate(0, 0);
  }
  46% {
    opacity: 1;
    transform: translate(0, 0);
  }
  52% {
    transform: translate(calc(var(--bridge) / 2 - 2px), -14px);
  }
  58% {
    opacity: 1;
    transform: translate(calc(var(--bridge) - 2px), 0);
  }
  60%,
  100% {
    opacity: 0;
    transform: translate(calc(var(--bridge) - 2px), 0);
  }
}
@keyframes art-pop-0 {
  0%,
  14% {
    opacity: 0;
    transform: translateY(-10px) scale(0.9);
  }
  19% {
    opacity: 1;
    transform: scale(1.06);
  }
  23%,
  88% {
    opacity: 1;
    transform: none;
  }
  96%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes art-pop-1 {
  0%,
  24% {
    opacity: 0;
    transform: translateY(-10px) scale(0.9);
  }
  29% {
    opacity: 1;
    transform: scale(1.06);
  }
  33%,
  88% {
    opacity: 1;
    transform: none;
  }
  96%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes art-pop-2 {
  0%,
  34% {
    opacity: 0;
    transform: translateY(-10px) scale(0.9);
  }
  39% {
    opacity: 1;
    transform: scale(1.06);
  }
  43%,
  88% {
    opacity: 1;
    transform: none;
  }
  96%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes art-pop-3 {
  0%,
  46% {
    opacity: 0;
    transform: translateY(-10px) scale(0.9);
  }
  51% {
    opacity: 1;
    transform: scale(1.06);
  }
  55%,
  88% {
    opacity: 1;
    transform: none;
  }
  96%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes art-pop-4 {
  0%,
  60% {
    opacity: 0;
    transform: translateY(-10px) scale(0.9);
  }
  65% {
    opacity: 1;
    transform: scale(1.06);
  }
  69%,
  88% {
    opacity: 1;
    transform: none;
  }
  96%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes art-pop-5 {
  0%,
  66% {
    opacity: 0;
    transform: translateY(-10px) scale(0.9);
  }
  71% {
    opacity: 1;
    transform: scale(1.06);
  }
  75%,
  88% {
    opacity: 1;
    transform: none;
  }
  96%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes art-pop-6 {
  0%,
  72% {
    opacity: 0;
    transform: translateY(-10px) scale(0.9);
  }
  77% {
    opacity: 1;
    transform: scale(1.06);
  }
  81%,
  88% {
    opacity: 1;
    transform: none;
  }
  96%,
  100% {
    opacity: 0;
    transform: none;
  }
}
/* On the paid plan's deep green surface. */
.plan.is-paid .loop-art {
  --ink: #1d2a22;
  --art-card: #fbfaf5;
  --art-shadow: 0 1px 2px #0004, 0 14px 30px -14px #000c;
  background: #ffffff0d;
  box-shadow: inset 0 0 0 1px #ffffff12;
}
.plan.is-paid .art-bridge svg {
  stroke: #f4f1e855;
}
.plan.is-paid .art-badge {
  background: #efbd63;
  color: #1d2a22;
}
@media (max-width: 600px) {
  .loop-art {
    height: 200px;
    margin-bottom: 22px;
  }
  .art-sync {
    --bridge: 40px;
    --screen: 118px;
  }
}
@media (max-width: 359px) {
  /* Doubled class: this must beat the 600px sizes, which come later in the file. */
  .art-sync.art-sync {
    --bridge: 26px;
    --screen: 96px;
  }
}
/* The Free & paid page: the plans follow the intro closely. */
.free-and-paid-page {
  padding-top: 0;
}
.free-and-paid-page .plans {
  margin-top: 0;
}
/* Sharing, free and paid: a heading over the story that shows both. */
.share-head {
  grid-column: 1 / -1;
  margin: 48px auto 8px;
  text-align: center;
}
.share-head h2 {
  font-family: var(--editorial-display);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.share-head p {
  margin-top: 12px;
  color: var(--editorial-muted);
  font-size: 18px;
}
/* The paid plan sits on a deep, lit surface in both themes, so the extras read as the step up
   rather than a second grey tile. */
.plan.is-paid {
  background:
    radial-gradient(90% 60% at 88% 0%, #dfab5540, transparent 70%),
    linear-gradient(165deg, #24433c, #14231f);
  box-shadow:
    0 44px 80px -44px #14231fcc,
    inset 0 0 0 1px #ffffff17;
  color: #f4f1e8;
}
.plan.is-paid .plan-kind {
  color: #efbd63;
}
.plan.is-paid p {
  color: #cfd8d0;
}
.plan.is-paid li:before {
  background: #efbd6329;
  color: #efbd63;
}
.plan.is-paid .plan-when {
  background: #ffffff17;
}
/* Sharing story: Alex's Kahu and Sam's side by side. Free, a copy crosses once and is checked
   before it is combined; paid, changes cross on their own and the bank fills in both. */
.share-ways {
  max-width: 1060px;
  margin: 24px auto 0;
}
.share-scene {
  gap: 18px;
  padding: 24px 0;
}
.share-ways-pills {
  display: flex;
  gap: 6px;
  padding: 5px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--ink) 6%, var(--story-card));
  font-size: 14px;
  font-weight: 600;
}
.share-ways-pills span {
  padding: 7px 14px;
  border-radius: 99px;
  color: var(--muted);
  transition: background 0.3s, color 0.3s;
}
.share-ways-pills .is-on {
  background: var(--story-card);
  color: var(--ink);
  box-shadow: 0 1px 3px #1d2a2222;
}
.share-scene.is-paid .share-ways-pills .is-on {
  background: #1f3a33;
  color: #f4f1e8;
}
.share-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
  align-items: start;
  width: min(620px, 100% - 32px);
}
.share-kahu.story-float {
  width: auto;
  padding-bottom: 8px;
}
.share-kahu-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 10px;
}
.share-kahu-head > span {
  display: grid;
}
.share-kahu-head strong {
  font-size: 16px;
  font-weight: 600;
}
.share-count {
  color: var(--muted);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.share-badge {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--person);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.share-kahu-head .share-badge {
  width: 32px;
  height: 32px;
  font-size: 14px;
}
.share-row,
.share-extra {
  overflow: hidden;
}
.share-row-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin: 0 8px;
  padding: 0 8px;
  border-radius: 12px;
  transition: background 0.6s;
}
.share-row-inner.is-new {
  background: color-mix(in srgb, var(--gold) 16%, var(--story-card));
}
.share-what {
  display: grid;
  min-width: 0;
}
.share-what strong {
  font-size: 15px;
  font-weight: 600;
}
.share-what span {
  color: var(--muted);
  font-size: 13px;
}
.share-amount {
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.share-check {
  display: grid;
  gap: 4px;
  margin: 8px 8px 4px;
  padding: 14px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--ink) 5%, var(--story-card));
}
.share-check strong {
  font-size: 15px;
  font-weight: 600;
}
.share-check span {
  color: var(--muted);
  font-size: 14px;
}
.share-check b {
  justify-self: start;
  margin-top: 8px;
  padding: 7px 16px;
  border-radius: 99px;
  background: var(--editorial-ink);
  color: var(--paper);
  font-size: 14px;
}
.share-export {
  margin: 8px 16px 8px;
  padding: 9px 12px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
.share-bridge {
  position: relative;
  align-self: center;
  display: grid;
  place-items: center;
  height: 100%;
}
.share-token {
  position: absolute;
  z-index: 1;
  padding: 7px 12px;
  border-radius: 10px;
  background: var(--gold);
  color: #1d2a22;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 10px 24px -10px #1d2a2288;
}
/* Swapping copies: the two pass each other on their own lanes. */
.share-token.is-high {
  translate: 0 -26px;
}
.share-token.is-low {
  translate: 0 26px;
}
.share-token.is-sync {
  border-radius: 99px;
  background: var(--green);
  color: #fff;
}
[data-theme="dark"] .share-token.is-sync {
  color: #10201b;
}
.share-result {
  padding: 8px 16px;
  border-radius: 99px;
  background: var(--editorial-ink);
  color: var(--paper);
  font-size: 14px;
  font-weight: 700;
}
@media (max-width: 600px) {
  .share-pair {
    grid-template-columns: minmax(0, 1fr) 10px minmax(0, 1fr);
    width: calc(100% - 20px);
  }
  .share-kahu-head {
    padding: 12px 10px 8px;
    gap: 8px;
  }
  .share-kahu-head strong {
    font-size: 14px;
  }
  .share-count {
    font-size: 13px;
  }
  /* Narrow: each row keeps who entered it, with the amount under the name and no date
     (a payment from the bank still says so). */
  .share-row-inner {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 8px;
    min-height: 40px;
    margin: 0 4px;
    padding: 3px 6px;
  }
  .share-row-inner > .share-badge {
    grid-row: span 2;
    width: 20px;
    height: 20px;
    font-size: 10px;
  }
  .share-what {
    display: contents;
  }
  .share-what span:not(.is-bank) {
    display: none;
  }
  .share-what .is-bank {
    grid-column: 2;
    font-size: 12px;
  }
  .share-what strong,
  .share-amount {
    font-size: 13px;
    line-height: 1.3;
  }
  .share-amount {
    grid-column: 2;
    color: var(--muted);
    font-weight: 500;
  }
  .share-scene {
    gap: 12px;
    padding: 12px 0;
  }
  .share-kahu-head .share-badge {
    width: 28px;
    height: 28px;
  }
  .share-check {
    margin: 6px 4px 2px;
    padding: 10px;
  }
  .share-check span {
    font-size: 13px;
  }
  .share-export {
    margin: 6px 8px;
    font-size: 13px;
  }
  .share-ways-pills {
    font-size: 13px;
  }
}
/* The narrowest phones: the heads keep one line each, and the buttons too. */
@media (max-width: 359px) {
  .share-pair {
    grid-template-columns: minmax(0, 1fr) 6px minmax(0, 1fr);
    width: calc(100% - 12px);
  }
  .share-kahu-head {
    gap: 6px;
    padding: 10px 8px 6px;
  }
  .share-kahu-head .share-badge {
    width: 22px;
    height: 22px;
    font-size: 11px;
  }
  .share-kahu-head strong {
    font-size: 13px;
    white-space: nowrap;
  }
  .share-count {
    font-size: 12px;
  }
  .share-export {
    margin: 6px;
    padding: 8px 4px;
    font-size: 12px;
    white-space: nowrap;
  }
  .share-check {
    padding: 8px;
  }
  .share-check span {
    font-size: 12px;
  }
}
/* Autopilot's parts (Home and the Autopilot hub): one card per part in its kind's colour,
   each a link to its page. */
.ap-parts {
  max-width: 1060px;
  margin: 40px auto 0;
  /* The way back from a part's page lands with the cards in the middle of the screen: the
     margin is half the screen less half the cards' height (208px in a row, 528px or 512px
     stacked) and the page's 25px scroll padding. It places the browser's own jump close;
     the App effect then centres the cards exactly. */
  scroll-margin-top: max(0px, 50vh - 25px - 104px);
}
@media (max-width: 1000px) {
  .ap-parts {
    scroll-margin-top: max(0px, 50vh - 25px - 264px);
  }
}
@media (max-width: 600px) {
  .ap-parts {
    scroll-margin-top: max(0px, 50vh - 25px - 256px);
  }
}
.ap-parts ul {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ap-parts a {
  display: grid;
  align-content: start;
  gap: 4px;
  height: 100%;
  padding: 20px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--part) 10%, var(--paper));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--part) 22%, transparent);
  color: var(--editorial-ink);
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s;
}
.ap-parts a:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--part) 40%, transparent),
    0 24px 44px -30px #1d2a2266;
}
.ap-part-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--part) 24%, var(--paper));
  color: color-mix(in srgb, var(--part) 55%, var(--editorial-ink));
}
.ap-parts strong {
  font-size: 18px;
  font-weight: 600;
}
.ap-part-count {
  color: var(--editorial-muted);
  font-size: 15px;
}
.ap-part-amount {
  display: grid;
  margin-top: 14px;
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.ap-part-amount small {
  color: var(--editorial-muted);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
}
.editorial-autopilot .section-followup {
  margin-top: 28px;
}
/* The month's sum on the Autopilot hub: income at the top, the parts as its terms, and safe
   to spend at the foot, in green. */
.ap-sum {
  display: grid;
  gap: 20px;
  max-width: 1060px;
  margin: 0 auto;
  padding: 26px 28px 28px;
  border-radius: 28px;
  background: color-mix(in srgb, var(--editorial-ink) 4%, var(--paper));
}
.ap-sum .ap-parts {
  margin: 0;
  scroll-margin-top: max(0px, 50vh - 25px - 117px);
}
@media (max-width: 1000px) {
  .ap-sum .ap-parts {
    scroll-margin-top: max(0px, 50vh - 25px - 363px);
  }
}
@media (max-width: 600px) {
  .ap-sum .ap-parts {
    scroll-margin-top: max(0px, 50vh - 25px - 210px);
  }
}
.ap-sum-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
}
.ap-sum-line span {
  color: var(--editorial-muted);
  font-size: 17px;
  font-weight: 500;
}
.ap-sum-line strong {
  font-family: var(--editorial-display);
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.ap-sum-line.is-result {
  padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, var(--editorial-ink) 12%, transparent);
}
.ap-sum-line.is-result span {
  color: var(--editorial-ink);
  font-weight: 600;
}
.ap-sum-line.is-result strong {
  color: var(--green);
}
@media (max-width: 1000px) {
  .ap-parts ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ap-parts li:last-child {
    grid-column: 1 / -1;
  }
}
@media (max-width: 600px) {
  /* Narrow: each part is one row, icon and name on the left, the amount on the right. */
  .ap-parts ul {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .ap-parts a {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 14px;
    row-gap: 0;
    padding: 14px 16px;
    border-radius: 18px;
  }
  .ap-part-icon {
    grid-row: span 2;
    width: 38px;
    height: 38px;
    margin: 0;
  }
  .ap-parts strong {
    font-size: 16px;
  }
  .ap-part-count {
    grid-column: 2;
    font-size: 14px;
  }
  .ap-part-amount {
    grid-column: 3;
    grid-row: 1 / span 2;
    margin: 0;
    font-size: 16px;
    text-align: right;
  }
  .ap-part-amount small {
    font-size: 13px;
  }
  .ap-sum {
    gap: 16px;
    padding: 20px 14px;
    border-radius: 22px;
  }
  .ap-sum-line {
    padding: 0 6px;
  }
  .ap-sum-line span {
    font-size: 15px;
  }
  .ap-sum-line strong {
    font-size: 26px;
  }
}
.editorial-ending > p {
  max-width: 520px;
  margin: -12px auto 32px;
  color: var(--editorial-muted);
  font-size: 18px;
  line-height: 1.7;
}

@media (max-width: 1100px) {
  .promises {
    margin: 0 24px;
  }
}
@media (max-width: 900px) {
  .promises {
    margin: 0;
    gap: 10px;
  }
  .promises > a {
    flex-direction: column;
    align-items: flex-start;
    padding: 18px;
  }
  .plans {
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
  }
}
@media (max-width: 600px) {
  .promises {
    grid-template-columns: 1fr;
  }
  .promises > a {
    flex-direction: row;
    align-items: center;
    padding: 16px;
  }
  .plan {
    border-radius: 22px;
    padding: 10px 10px 26px;
  }
  .plan > :not(.loop-art) {
    margin-inline: 12px;
  }
  .plan h3 {
    font-size: 30px;
  }
  .editorial-ending > p {
    font-size: 17px;
  }
}

/* Whose example a story shows, as a label rather than a footnote: once per page. A later
   story's label hides when an earlier section already has one, except labels that say what
   the demo does (`is-kept`, such as "Nothing is uploaded"). */
section:has(.story-sample) ~ section .story-sample:not(.is-kept) {
  display: none;
}
/* In the story card's foot: the dots lead, the label sits at the far end. */
.story-sample {
  display: inline-flex;
  align-items: center;
  order: 1;
  gap: 9px;
  margin-left: auto;
  color: var(--editorial-muted);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.story-sample:before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--editorial-accent);
  content: "";
}

/* Round 7 inner pages: the homepage's readable labels and serif headings on every page. */
.eyebrow,
.page-intro .eyebrow,
.next-page .eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  color: var(--editorial-accent);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.005em;
  text-transform: none;
}
.eyebrow > span {
  display: none;
}
.eyebrow::before {
  width: 22px;
  height: 1.5px;
  flex: none;
  background: currentColor;
  opacity: 0.55;
  content: "";
}
.page-intro h1 em,
.story-section h2 em {
  font-style: normal;
}
.story-section .section-heading h2 {
  font-family: var(--editorial-display);
  font-weight: 400;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.12;
  letter-spacing: -0.035em;
  color: var(--editorial-ink);
}
.story-section .section-heading h2 em {
  color: var(--editorial-muted);
  font-weight: inherit;
}
.section-heading > p {
  max-width: 400px;
  color: var(--editorial-muted);
  font-size: 18px;
  line-height: 1.7;
}
/* A section picture beside its heading: between the heading and its paragraph on a computer,
   above the heading on a phone. Over a centred heading it sits above the kicker. */
.editorial-section-heading > .heading-picture {
  display: block;
  width: 150px;
  height: auto;
  margin: 0 auto 4px;
}
.section-heading > .heading-picture {
  flex: none;
  width: 170px;
  height: auto;
  margin-bottom: -10px;
}
@media (max-width: 1100px) {
  .section-heading > .heading-picture {
    width: 140px;
  }
}
@media (max-width: 900px) {
  .section-heading:has(> .heading-picture) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    align-items: end;
  }
  .section-heading > .heading-picture {
    grid-column: 1 / -1;
    order: -1;
    margin: 0 0 -24px -8px;
  }
}
@media (max-width: 600px) {
  .section-heading:has(> .heading-picture) {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .section-heading > .heading-picture {
    width: 128px;
    margin-bottom: -8px;
  }
  .editorial-section-heading > .heading-picture {
    width: 128px;
    margin: 0 0 4px -8px;
  }
  .editorial-ending > .heading-picture {
    width: 136px;
    margin-top: -16px;
  }
  .residency-story .heading-picture {
    width: 128px;
  }
  .bills-hang {
    left: auto;
    right: 18px;
    width: 60px;
  }
  .recurring-feature + .subs-section {
    padding-top: 100px;
  }
}
.next-page p:not(.eyebrow) {
  font-family: var(--editorial-display);
  font-size: clamp(30px, 3.4vw, 44px);
  letter-spacing: -0.03em;
}

/* Cash flow: the page intro and the month heading. */
.cf-intro {
  grid-template-columns: minmax(0, 1fr) 500px;
}
.character-compact[data-character="cash-flow"] {
  width: 500px;
  max-width: 100%;
}
.cf-month .editorial-section-heading {
  margin-bottom: 28px;
}
@media (max-width: 1100px) {
  .cf-intro {
    grid-template-columns: minmax(0, 1fr) 400px;
  }
}
@media (max-width: 900px) {
  .cf-intro {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
  .character-compact[data-character="cash-flow"] {
    width: 320px;
  }
}
@media (max-width: 600px) {
  .eyebrow,
  .page-intro .eyebrow,
  .next-page .eyebrow {
    font-size: 14px;
    margin-bottom: 16px;
  }
  .section-heading > p {
    font-size: 17px;
  }
  .next-page p:not(.eyebrow) {
    font-size: 28px;
  }
  .cf-intro {
    grid-template-columns: 1fr;
  }
  .character-compact[data-character="cash-flow"] {
    width: 300px;
  }
}

/* Help & support: one question form, then quick answers. */
.support-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 30px;
  margin-top: 34px;
}
.support-ask,
.support-answers {
  padding: 40px 36px 90px;
  scroll-margin-top: 24px;
}
.ask-card {
  max-width: 860px;
  margin: 0 auto;
  padding: 40px 44px 44px;
  border-radius: 28px;
  background: var(--surface);
  box-shadow: 0 1px 2px #1d2a220f, 0 24px 50px -34px #1d2a2259;
  color: var(--editorial-ink);
}
[data-theme="dark"] .ask-card {
  background: color-mix(in srgb, var(--ink) 6%, var(--surface));
  box-shadow: 0 1px 2px #0006, 0 24px 50px -30px #000c;
}
.ask-topics {
  margin: 0 0 30px;
  padding: 0;
  border: 0;
}
.ask-topics legend,
.ask-card label > span,
.inbox-reply > span {
  display: block;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 600;
}
.ask-card small {
  margin-left: 8px;
  color: var(--editorial-muted);
  font-size: 15px;
  font-weight: 400;
}
.ask-topics > div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ask-topics label {
  position: relative;
}
.ask-topics input {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.ask-topics label span {
  cursor: pointer;
}
.ask-topics label span {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin: 0;
  padding: 11px 20px;
  border: 1.5px solid var(--editorial-line);
  border-radius: 99px;
  font-size: 16px;
  font-weight: 600;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s,
    transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.ask-topics label:hover span {
  border-color: var(--editorial-muted);
}
.ask-topics input:checked + span {
  border-color: var(--editorial-ink);
  background: var(--editorial-ink);
  color: var(--paper);
}
.ask-topics input:active + span {
  transform: scale(0.97);
}
.ask-topics input:focus-visible + span {
  outline: 3px solid var(--editorial-accent);
  outline-offset: 3px;
}
.ask-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 22px;
}
.ask-card input:not([type="radio"]),
.ask-card textarea,
.inbox-reply textarea {
  display: block;
  width: 100%;
  min-height: 54px;
  padding: 14px 16px;
  border: 1.5px solid var(--editorial-line);
  border-radius: 14px;
  background: var(--paper);
  color: var(--editorial-ink);
  font: inherit;
  font-size: 17px;
  line-height: 1.55;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.ask-card textarea,
.inbox-reply textarea {
  resize: vertical;
}
.ask-card textarea {
  min-height: 150px;
}
.ask-card input:not([type="radio"]):focus,
.ask-card textarea:focus,
.inbox-reply textarea:focus {
  border-color: var(--editorial-ink);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--editorial-accent) 22%, transparent);
  outline: none;
}
.ask-card ::placeholder,
.inbox-reply ::placeholder {
  color: var(--editorial-muted);
  opacity: 1;
}
.ask-help {
  margin-top: 10px;
  color: var(--editorial-muted);
  font-size: 15px;
}
.ask-turnstile.is-shown {
  margin-top: 20px;
}
.ask-send {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: 30px;
}
.ask-send p {
  color: var(--editorial-muted);
  font-size: 15px;
}
.ask-error {
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--coral) 14%, transparent);
  font-size: 16px;
}
.ask-card button.editorial-cta {
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.ask-done {
  display: grid;
  justify-items: center;
  padding: 56px 44px;
  text-align: center;
  animation: ask-done-in 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.ask-done h3 {
  max-width: 560px;
  font-family: var(--editorial-display);
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.15;
  outline: none;
}
.ask-done p {
  max-width: 480px;
  margin: 14px 0 30px;
  color: var(--editorial-muted);
  font-size: 17px;
  line-height: 1.65;
}
.ask-done-mark {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: 24px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--green) 15%, transparent);
  color: var(--green);
}
.ask-done-mark svg {
  width: 36px;
  height: 36px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 20;
  animation: ask-done-tick 0.6s 0.2s cubic-bezier(0.65, 0, 0.35, 1) backwards;
}
@keyframes ask-done-in {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
}
/* The puppy waits beside Send with its paper plane; once the question is sent, the plane flies
   across the thank-you once, in the band above the check mark so it never crosses the text. */
.ask-send-puppy {
  width: 132px;
  height: auto;
  margin: -28px -8px -20px auto;
}
.ask-done {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
}
.ask-done-plane {
  position: absolute;
  left: 0;
  top: 12px;
  width: 104px;
  height: auto;
  opacity: 0;
  pointer-events: none;
  animation: ask-plane 1.9s 0.2s cubic-bezier(0.45, 0, 0.3, 1) both;
}
@keyframes ask-plane {
  0% { opacity: 0; transform: translate(-110px, 34px) rotate(8deg); }
  12%,
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(100cqw, -30px) rotate(-10deg); }
}
@keyframes ask-done-tick {
  from { stroke-dashoffset: 20; }
}
.answer-list {
  display: grid;
  gap: 12px;
  max-width: 860px;
  margin: 0 auto;
}
.answer-list details {
  border-radius: 22px;
  background: color-mix(in srgb, var(--editorial-ink) 4%, var(--paper));
  transition: background 0.25s;
}
.answer-list details[open] {
  background: var(--editorial-tint);
}
.answer-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 72px;
  padding: 20px 26px;
  cursor: pointer;
  font-family: var(--editorial-display);
  font-size: 22px;
  letter-spacing: -0.015em;
  list-style: none;
}
.answer-list summary::-webkit-details-marker {
  display: none;
}
.answer-list summary::after {
  flex: none;
  width: 12px;
  height: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  content: "";
}
.answer-list details[open] summary::after {
  transform: translateY(3px) rotate(225deg);
}
.answer-list details p {
  max-width: 680px;
  padding: 0 26px 26px;
  color: var(--editorial-muted);
  font-size: 17px;
  line-height: 1.7;
}
.answer-list a {
  color: var(--editorial-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Question inbox (not linked from the site). */
.inbox-intro > p:not(.eyebrow) {
  max-width: 620px;
  font-size: 18px;
  line-height: 1.7;
  color: var(--editorial-muted);
}
.inbox {
  padding: 0 0 90px;
}
.inbox-views {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}
.inbox-views button,
.inbox-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 18px;
  border: 1.5px solid var(--editorial-line);
  border-radius: 99px;
  background: transparent;
  color: var(--editorial-ink);
  cursor: pointer;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.inbox-views button:hover,
.inbox-button:hover:not(:disabled) {
  border-color: var(--editorial-muted);
}
.inbox-views button[aria-pressed="true"],
.inbox-button.is-primary:not(:disabled) {
  border-color: var(--editorial-ink);
  background: var(--editorial-ink);
  color: var(--paper);
}
.inbox-views b {
  min-width: 26px;
  padding: 1px 8px;
  border-radius: 99px;
  background: color-mix(in srgb, currentColor 14%, transparent);
  font-size: 14px;
  text-align: center;
}
.inbox-button:disabled {
  color: var(--editorial-muted);
  cursor: default;
}
.inbox-button.is-quiet {
  margin-left: auto;
  border-color: transparent;
  color: var(--editorial-muted);
}
.inbox-list {
  display: grid;
  gap: 16px;
}
.inbox-question {
  padding: 26px 28px 28px;
  border-radius: 24px;
  background: var(--surface);
  box-shadow: 0 1px 2px #1d2a220f, 0 18px 40px -32px #1d2a2259;
  color: var(--editorial-ink);
}
[data-theme="dark"] .inbox-question {
  background: color-mix(in srgb, var(--ink) 6%, var(--surface));
}
.inbox-question header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 16px;
  font-size: 15px;
}
.inbox-topic {
  color: var(--editorial-accent);
  font-weight: 600;
}
.inbox-status {
  padding: 3px 12px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--editorial-ink) 8%, transparent);
  font-weight: 600;
}
.inbox-status.is-new {
  background: color-mix(in srgb, var(--gold) 26%, transparent);
}
.inbox-status.is-answered {
  background: color-mix(in srgb, var(--green) 18%, transparent);
}
.inbox-question time {
  margin-left: auto;
  color: var(--editorial-muted);
}
.inbox-question h2 {
  font-family: var(--editorial-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.015em;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.inbox-from {
  margin-top: 10px;
  color: var(--editorial-muted);
  font-size: 16px;
  overflow-wrap: anywhere;
}
.inbox-reply {
  display: block;
  margin-top: 22px;
}
.inbox-reply textarea {
  min-height: 96px;
}
.inbox-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.inbox-empty {
  display: grid;
  justify-items: start;
  gap: 12px;
  padding: 44px 40px;
  border-radius: 24px;
  background: color-mix(in srgb, var(--editorial-ink) 4%, var(--paper));
  color: var(--editorial-muted);
  font-size: 17px;
}
.inbox-empty h2 {
  color: var(--editorial-ink);
  font-family: var(--editorial-display);
  font-size: 34px;
  font-weight: 400;
  letter-spacing: -0.03em;
}
.inbox-empty > div {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}
@media (max-width: 600px) {
  .support-ask,
  .support-answers {
    padding: 24px 0 64px;
  }
  .ask-card {
    padding: 26px 20px 28px;
    border-radius: 22px;
  }
  .ask-fields {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .ask-topics label span {
    min-height: 44px;
    padding: 9px 16px;
    font-size: 15px;
  }
  .ask-send .editorial-cta {
    width: 100%;
  }
  .ask-send-puppy {
    order: -1;
    width: 112px;
    margin: -8px 0 -6px;
  }
  .ask-done {
    padding: 40px 20px;
  }
  .answer-list summary {
    min-height: 64px;
    padding: 18px 20px;
    font-size: 19px;
  }
  .answer-list details p {
    padding: 0 20px 22px;
    font-size: 16px;
  }
  .inbox-question {
    padding: 22px 20px 24px;
  }
  .inbox-question time {
    margin-left: 0;
    flex-basis: 100%;
  }
  .inbox-question h2 {
    font-size: 21px;
  }
  .inbox-button.is-quiet {
    margin-left: 0;
  }
  .inbox-empty {
    padding: 30px 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ask-done,
  .ask-done-mark svg {
    animation: none;
  }
  .ask-done-plane {
    left: auto;
    right: 24px;
    top: 24px;
    width: 84px;
    opacity: 1;
    animation: none;
  }
}

/* Your data, Loans and Review: tiles in place of the numbered small print. */
.loan-choice,
.review-rules,
.data-route,
.data-answers {
  padding: 0 36px;
}
.page-intro > p,
.page-intro > div > p:not(.eyebrow),
.page-intro .accounts-intro-description,
.loan-intro-note > p {
  font-size: 18px;
}
.loan-fact {
  display: grid;
  gap: 2px;
  margin-top: 26px;
}
.loan-fact span {
  color: var(--editorial-muted);
  font-size: 15px;
}
.loan-fact b {
  color: var(--editorial-ink);
  font-family: var(--editorial-display);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.page-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  max-width: 1120px;
  margin: 0 auto;
}
.page-tiles article {
  display: flex;
  flex-direction: column;
  padding: 30px 30px 32px;
  border-radius: 28px;
  background: color-mix(in srgb, var(--editorial-ink) 4%, var(--paper));
  color: var(--editorial-ink);
}
.page-tiles article:nth-child(2) {
  background: var(--editorial-tint);
}
.page-tiles h3,
.bandit-story h2 {
  font-family: var(--editorial-display);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.page-tiles p {
  flex: 1;
  margin: 12px 0 0;
  color: var(--editorial-muted);
  font-size: 17px;
  line-height: 1.65;
}
/* A tile's picture, at its top left: Review's three show the tile's idea. */
.page-tiles .tile-picture {
  width: 132px;
  height: auto;
  margin: -14px 0 6px -14px;
}
/* Try your own number: one card, the controls on top and the two results side by side
   below, then a line comparing them. Both modes share this shape and every part has a fixed
   size, so dragging, typing or switching changes words and bars, never the layout. */
.loan-ways {
  max-width: 980px;
  margin: 0 auto;
  border-radius: 32px;
  background: var(--surface);
  box-shadow: 0 1px 2px #1d2a220f, 0 24px 50px -34px #1d2a2259;
  color: var(--editorial-ink);
}
[data-theme="dark"] .loan-ways {
  background: color-mix(in srgb, var(--ink) 6%, var(--surface));
  box-shadow: 0 1px 2px #0006, 0 24px 50px -30px #000c;
}
/* The puppy sits on the card's top right corner, its legs hanging over the card's top padding,
   clear of the amount; 74.7% is where its seat is in the picture. */
.loan-ways {
  position: relative;
}
.loan-sit {
  position: absolute;
  top: 0;
  right: 40px;
  width: 96px;
  height: auto;
  translate: 0 -74.7%;
  pointer-events: none;
}
/* Below 1100px the paragraph above reaches over the corner, so the card leaves room for the
   puppy's 90px above its edge (68px on a phone). */
@media (max-width: 1100px) {
  .loan-ways {
    margin-top: 100px;
  }
}
@media (max-width: 900px) {
  .loan-ways .loan-try-controls {
    padding-top: 40px;
  }
}
.loan-try-controls {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 18px 32px;
  padding: 32px 36px 24px;
}
.loan-try-controls .tabs > button {
  min-height: 44px;
  padding: 8px 18px;
  font-size: 16px;
}
.loan-try-amount {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px 16px;
}
.loan-try-amount > span:first-child {
  color: var(--editorial-muted);
  font-size: 17px;
  white-space: nowrap;
}
.loan-try-field {
  display: inline-flex;
  align-items: baseline;
  padding-bottom: 2px;
  border-bottom: 2px solid color-mix(in srgb, var(--editorial-ink) 25%, transparent);
  font-family: var(--editorial-display);
  font-size: 46px;
  line-height: 1.1;
}
.loan-try-field:focus-within {
  border-color: var(--green);
}
.loan-try-field input {
  width: 6.2ch;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
  outline: none;
}
.loan-try-range {
  grid-column: 1 / -1;
  width: 100%;
  height: 32px;
  margin: 4px 0 0;
  background: none;
  cursor: pointer;
  appearance: none;
}
.loan-try-range::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 99px;
  background: linear-gradient(
    to right,
    var(--green) calc(var(--at) * 100%),
    color-mix(in srgb, var(--editorial-ink) 12%, transparent) 0
  );
}
.loan-try-range::-moz-range-track {
  height: 8px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--editorial-ink) 12%, transparent);
}
.loan-try-range::-moz-range-progress {
  height: 8px;
  border-radius: 99px;
  background: var(--green);
}
.loan-try-range::-webkit-slider-thumb {
  width: 28px;
  height: 28px;
  margin-top: -10px;
  border: 3px solid var(--surface);
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 2px 8px #1d2a2240;
  appearance: none;
}
.loan-try-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 3px solid var(--surface);
  border-radius: 50%;
  background: var(--green);
}
.loan-try-range:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 4px;
  border-radius: 8px;
}
.loan-try-scale {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  margin: -10px 0 0;
  color: var(--editorial-muted);
  font-size: 14px;
}
.loan-try-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--editorial-line);
}
/* A result: what the way keeps, how much it changes (one line each, at any amount), the
   bar, then two lines of words with their room reserved. --loan-way is registered so a
   result that changes meaning with the mode also changes colour smoothly. */
@property --loan-way {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
.loan-result {
  display: grid;
  align-content: start;
  min-width: 0;
  padding: 30px 36px 32px;
  transition: --loan-way 0.35s;
}
.loan-result + .loan-result {
  border-left: 1px solid var(--editorial-line);
}
.loan-result.is-shorten {
  --loan-way: var(--green);
}
.loan-result.is-reduce_payment {
  --loan-way: var(--brass);
}
.loan-result.is-interest {
  --loan-way: var(--coral-deep);
}
.loan-result-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--editorial-muted);
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}
.loan-result-kicker::before {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--loan-way);
  content: "";
}
.loan-result h3 {
  display: grid;
  margin: 14px 0 0;
  font-family: var(--editorial-display);
  font-weight: 400;
  letter-spacing: -0.025em;
}
.loan-result-figure {
  color: var(--editorial-ink);
  font-size: clamp(30px, 3.3vw, 40px);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  white-space: nowrap;
}
.loan-result-phrase {
  color: var(--editorial-muted);
  font-size: clamp(22px, 2.2vw, 26px);
  line-height: 1.25;
}
.loan-result > p {
  min-height: calc(3lh + 4px);
  margin: 22px 0 0;
  color: var(--editorial-muted);
  font-size: 17px;
  line-height: 1.55;
  text-wrap: pretty;
}
.loan-result > p strong {
  display: block;
  margin-top: 4px;
  color: var(--editorial-ink);
  font-weight: 600;
}
.loan-try-verdict {
  display: grid;
  place-items: center;
  min-height: calc(2lh + 44px);
  margin: 0;
  padding: 0 36px;
  border-top: 1px solid var(--editorial-line);
  color: var(--editorial-muted);
  font-size: 17px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  text-align: center;
  text-wrap: balance;
}
/* One bar to one scale per way: the solid part is what is still paid, the pale part is what
   the extra takes away. The callout rides the edge between them. Both parts are the bar's
   own background, so its rounded ends are the only edges (a fill scaled inside a clip leaks
   past the round corners while it animates). --track is registered so it can transition. */
@property --track {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}
/* Clipped sideways only: the callout's block slides left past the bar's start, empty. */
.loan-track {
  margin: 24px 0 0;
  overflow-x: clip;
  transition: --track 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.loan-track-mark {
  display: block;
  transform: translateX(calc(var(--track) * 100% - 100%));
  text-align: right;
}
.loan-track-mark b {
  display: inline-block;
  padding-bottom: 6px;
  color: var(--editorial-ink);
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.loan-track-bar {
  display: block;
  height: 30px;
  border-radius: 8px;
  background:
    linear-gradient(to right, var(--loan-way) calc(var(--track) * 100%), transparent 0),
    repeating-linear-gradient(
      135deg,
      color-mix(in srgb, var(--loan-way) 30%, transparent) 0 6px,
      color-mix(in srgb, var(--loan-way) 12%, transparent) 6px 12px
    );
}
.loan-track-axis {
  display: flex;
  justify-content: space-between;
  margin: 8px 0 0;
  color: var(--editorial-muted);
  font-size: 14px;
}
@media (prefers-reduced-motion: reduce) {
  .loan-result,
  .loan-track {
    transition: none;
  }
}
@media (max-width: 900px) {
  .loan-try-controls {
    grid-template-columns: minmax(0, 1fr);
  }
  .loan-try-amount {
    justify-content: space-between;
  }
  .loan-try-results {
    grid-template-columns: minmax(0, 1fr);
  }
  .loan-result + .loan-result {
    border-top: 1px solid var(--editorial-line);
    border-left: 0;
  }
  .loan-result-figure {
    font-size: 36px;
  }
}
@media (max-width: 600px) {
  .loan-ways {
    margin-top: 78px;
    border-radius: 24px;
  }
  .loan-try-controls {
    gap: 16px;
    padding: 22px 20px 20px;
  }
  .loan-sit {
    right: 22px;
    width: 72px;
  }
  /* The label always sits on its own line, whichever mode names it. */
  .loan-try-amount {
    display: grid;
    justify-items: start;
  }
  .loan-try-field {
    font-size: 38px;
  }
  .loan-result {
    padding: 24px 20px 26px;
  }
  .loan-result-figure {
    font-size: 30px;
  }
  .loan-result-phrase {
    font-size: 22px;
  }
  .loan-result > p {
    font-size: 16px;
  }
  .loan-try-verdict {
    min-height: calc(3lh + 36px);
    padding: 0 20px;
    font-size: 16px;
  }
}
/* The narrowest phones wrap one more line. */
@media (max-width: 400px) {
  .loan-result > p {
    min-height: calc(4lh + 4px);
  }
}
/* Your data: export, import and combine, as tiles with the app's own labels on top. */
.data-own {
  padding: 0 36px;
}
.own-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}
.own-chips b {
  padding: 7px 13px;
  border-radius: 99px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--editorial-line);
  color: var(--editorial-ink);
  font-size: 14px;
  font-weight: 600;
}
.own-chips .is-new {
  background: color-mix(in srgb, var(--green) 14%, var(--paper));
  box-shadow: none;
  color: color-mix(in srgb, var(--green) 75%, var(--ink));
}
/* Your data story: three stops on one route, each saying what is there now. A token runs the
   route between stops when something travels; the AI reader dims while it is not used. */
.data-card {
  --icon: 58px;
  --gap: 18px;
  --route: 2px dashed color-mix(in srgb, var(--ink) 22%, transparent);
  width: min(500px, 100% - 32px);
  padding: 28px;
}
.data-stop {
  display: grid;
  grid-template-columns: var(--icon) minmax(0, 1fr);
  column-gap: var(--gap);
  row-gap: 4px;
}
/* The icon, then the route running down the rest of the stop to the next link. */
.data-rail {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.data-stop:not(:last-child) .data-rail::after {
  flex: 1;
  border-left: var(--route);
  content: "";
}
.data-stop-icon {
  display: grid;
  place-items: center;
  width: var(--icon);
  height: var(--icon);
  border-radius: 18px;
  background: color-mix(in srgb, var(--ink) 6%, var(--story-card));
  color: var(--green);
  transition:
    box-shadow 0.35s var(--at, 0s),
    opacity 0.4s;
}
.data-stop.is-busy .data-stop-icon {
  box-shadow: inset 0 0 0 2px var(--green);
}
/* Idle, only the icon fades; the words stay readable. */
.data-stop.is-idle .data-stop-icon {
  opacity: 0.45;
}
.data-stop-icon svg,
.data-says svg,
.data-token svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.data-stop-name {
  color: var(--ink);
  font-size: 23px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  transition: color 0.4s;
}
.data-stop.is-idle .data-stop-name {
  color: var(--muted);
}
/* Every line shares one cell; as something arrives (--at), the old one fades out quickly and
   the new one fades in just after, so the two never overlap. */
.data-says {
  display: grid;
  align-items: start;
}
.data-says > span {
  grid-area: 1 / 1;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.45;
  text-wrap: balance;
  opacity: 0;
  transition: opacity 0.15s var(--at, 0s);
}
.data-says > .is-shown {
  opacity: 1;
  transition: opacity 0.3s calc(var(--at, 0s) + 0.15s);
}
.data-says > .is-kept {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--green);
  font-weight: 600;
}
/* A link between stops: the route, which turns green while a token runs it, and what may
   travel along it, which steps aside while the token passes. */
.data-link {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 72px;
  padding-left: calc(var(--icon) + var(--gap));
}
.data-link::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--icon) / 2 - 1px);
  border-left: var(--route);
  content: "";
  transition: border-color 0.3s;
}
.data-link.is-running::before {
  border-color: var(--green);
}
.data-link-label {
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  text-wrap: balance;
  transition: opacity 0.2s;
}
.data-link.is-running .data-link-label {
  opacity: 0;
}
/* Something travelling: a green pill, named, with its glyph on the route. Its run spans the
   link less the pill, so moving the run by its own height carries the pill end to end. */
.data-run {
  position: absolute;
  top: 0;
  left: calc(var(--icon) / 2 - 17px);
  height: calc(100% - 34px);
  animation: data-run-down 1s var(--ease-whip) 0.1s both;
}
.data-run.is-late {
  animation-delay: 1.1s;
}
.data-run.is-up {
  animation-name: data-run-up;
}
.data-token {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding-right: 14px;
  border-radius: 99px;
  background: var(--green);
  box-shadow: 0 0 0 4px var(--story-card);
  color: var(--story-card);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}
.data-token i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
}
@keyframes data-run-down {
  from { transform: translateY(0); opacity: 0; }
  15%, 85% { opacity: 1; }
  to { transform: translateY(100%); opacity: 0; }
}
@keyframes data-run-up {
  from { transform: translateY(100%); opacity: 0; }
  15%, 85% { opacity: 1; }
  to { transform: translateY(0); opacity: 0; }
}
@media (max-width: 600px) {
  .data-card {
    --icon: 46px;
    --gap: 14px;
    width: calc(100% - 20px);
    padding: 20px 18px;
  }
  .data-stop-icon {
    border-radius: 15px;
  }
  .data-stop-name {
    font-size: 19px;
  }
  .data-says > span {
    font-size: 16px;
    line-height: 1.4;
  }
  .data-link {
    min-height: 66px;
  }
  .data-link-label {
    font-size: 14px;
  }
}
.bandit-story h2 {
  font-size: clamp(40px, 4.6vw, 60px);
  line-height: 1.1;
}
.bandit-story h2 em {
  color: var(--editorial-muted);
}
.bandit-story h2 + p {
  margin-top: 18px;
}
.bandit-story p.bandit-tag {
  margin-top: 8px;
  color: var(--editorial-muted);
  font-size: 16px;
}
.residency-facts > div {
  padding: 22px 24px;
  border: 0;
  border-radius: 22px;
  background: color-mix(in srgb, var(--editorial-ink) 4%, var(--paper));
}
.residency-facts > div + div {
  margin-top: 12px;
}
.residency-facts > div:first-child,
.residency-facts > div:last-child {
  padding: 22px 24px;
}
.residency-facts > .editorial-kicker {
  font-size: 15px;
}
.residency-facts span {
  font-size: 15px;
}
.residency-facts strong {
  font-family: var(--editorial-display);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.015em;
}
.residency-facts p {
  font-size: 16px;
  line-height: 1.65;
}
.residency-story > div > p {
  font-size: 18px;
}
@media (max-width: 900px) {
  .page-tiles {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 620px;
  }
}
@media (max-width: 600px) {
  .page-intro > p,
  .page-intro > div > p:not(.eyebrow),
  .page-intro .accounts-intro-description,
  .loan-intro-note > p {
    font-size: 16px;
  }
  .loan-choice,
  .review-rules,
  .data-route,
  .data-own,
  .data-answers {
    padding: 0;
  }
  .loan-fact b {
    font-size: 24px;
  }
  .page-tiles article {
    padding: 24px 22px 26px;
    border-radius: 22px;
  }
  .page-tiles h3 {
    font-size: 28px;
  }
  .bandit-story p:not(.eyebrow),
  .security-boundaries dd,
  .residency-story > div > p {
    font-size: 16px;
  }
  .security-boundaries dt {
    font-size: 18px;
  }
  .residency-facts > div,
  .residency-facts > div:first-child,
  .residency-facts > div:last-child {
    padding: 20px;
  }
  .residency-facts strong {
    font-size: 21px;
  }
}

/* Find Otis: on every page the dog peeks over the top edge of one card, just the top of his
   head and an eye. Hover or focus and he looks up a little; say hello and he hops. The spot
   is a 1px line right above the card, so he sits on its edge at any width. */
.otis-spot {
  position: relative;
  z-index: 2;
  height: 1px;
  margin-bottom: -1px;
}
/* Over a story he peeks along the story card's own width, which is narrower than the
   section on wide screens. */
.otis-spot:has(+ .story) {
  max-width: 940px;
  margin-inline: auto;
}
.otis {
  position: absolute;
  bottom: 0;
  left: calc(var(--at) * 100%);
  width: 44px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  overflow: hidden;
  cursor: pointer;
  translate: -50% 0;
}
.otis img {
  display: block;
  width: 44px;
  height: 45px;
  translate: 0 11px;
  transition: translate 0.35s var(--ease-snap, ease);
}
.otis:hover img,
.otis:focus-visible img {
  translate: 0 3px;
}
.otis:focus-visible {
  outline: 2px solid var(--editorial-ink);
  outline-offset: 3px;
  border-radius: 6px;
}
.otis img.is-hello {
  animation: otis-hello 0.7s var(--ease-snap, ease);
}
@keyframes otis-hello {
  30% {
    translate: 0 0;
    rotate: -9deg;
  }
  60% {
    translate: 0 2px;
    rotate: 6deg;
  }
}
.otis-note {
  position: absolute;
  bottom: 34px;
  left: clamp(150px, calc(var(--at) * 100%), calc(100% - 150px));
  max-width: 300px;
  padding: 9px 15px;
  border-radius: 99px;
  background: var(--editorial-ink);
  color: var(--paper);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  width: max-content;
  translate: -50% 0;
  pointer-events: none;
}
.otis-note:empty {
  display: none;
}
@media (max-width: 900px) {
  .otis {
    left: calc(var(--at-phone) * 100%);
  }
  .otis-note {
    left: 50%;
    max-width: min(300px, 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .otis img {
    transition: none;
  }
  .otis img.is-hello {
    animation: none;
  }
}
/* The treat as a popup, on the find that completes the twelve, wherever that is. */
.otis-win {
  width: min(560px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  padding: 0;
  border: 0;
  border-radius: 28px;
  background: var(--surface);
  color: var(--editorial-ink);
  box-shadow: 0 40px 90px -30px #000a;
}
.otis-win::backdrop {
  background: #1d2a2299;
}
.otis-win-card {
  display: grid;
  justify-items: center;
  gap: 24px;
  padding: 32px 32px 36px;
  text-align: center;
}
.otis-win img {
  width: min(280px, 100%);
  height: auto;
  border-radius: 22px;
}
.otis-win .editorial-section-heading {
  margin: 0;
  text-align: center;
}
.otis-win .editorial-section-heading > p {
  margin-top: 14px;
  font-size: 16px;
}
.otis-win[open] {
  animation: otis-win-in 0.45s var(--ease-snap, ease);
}
.otis-win[open]::backdrop {
  animation: otis-win-fade 0.3s ease;
}
@keyframes otis-win-in {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.94);
  }
}
@keyframes otis-win-fade {
  from {
    opacity: 0;
  }
}
@media (max-width: 600px) {
  .otis-win-card {
    padding: 24px 20px 28px;
  }
  .otis-win img {
    width: min(200px, 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .otis-win[open],
  .otis-win[open]::backdrop {
    animation: none;
  }
}
/* A few more of Otis: a pile of prints on Our story. Each tap sends the top print out to
   the side and under the pile; only the top three show, each turned a little. */
/* The section runs the full width (its padding centres the content), so a print sliding out
   is clipped at the screen edge instead of widening the page. */
.otis-stack-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: center;
  gap: 72px;
  overflow-x: clip;
}
@media (min-width: 901px) {
  .otis-stack-section {
    padding-inline: max(36px, calc((100% - 928px) / 2));
  }
}
.otis-stack-section .editorial-section-heading {
  margin: 0;
  text-align: left;
}
.otis-stack-section .editorial-section-heading > p {
  margin-left: 0;
}
.otis-stack-controls {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 22px;
}
.otis-stack-controls button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}
.otis-stack-controls span {
  color: var(--editorial-muted);
  font-variant-numeric: tabular-nums;
}
.otis-stack {
  display: grid;
  width: 100%;
  cursor: pointer;
}
.otis-print {
  grid-area: 1 / 1;
  margin: 0;
  padding: 14px 14px 0;
  border-radius: 6px;
  background: #fbf9f4;
  box-shadow: 0 2px 4px #1d2a2214, 0 26px 50px -24px #1d2a2266;
  z-index: calc(20 - var(--depth));
  opacity: clamp(0, 3 - var(--depth), 1);
  transform: translateY(calc(var(--depth) * 5px)) rotate(var(--turn));
  transition:
    transform 0.35s ease,
    opacity 0.35s ease;
}
.otis-stack:hover .otis-print:not([aria-hidden]) {
  transform: translateY(-4px) rotate(var(--turn));
}
.otis-print img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 3px;
  object-fit: cover;
}
.otis-print figcaption {
  padding: 12px 6px 16px;
  color: #2e3a33;
  font-family: Kahu Hand, cursive;
  font-size: 24px;
  line-height: 1.15;
  text-align: center;
}
.otis-print.is-leaving {
  animation: otis-print-leave 0.6s ease;
}
@keyframes otis-print-leave {
  0%,
  49% {
    z-index: 30;
    opacity: 1;
  }
  45% {
    translate: 78% -4%;
    rotate: 9deg;
  }
  51%,
  100% {
    z-index: 0;
  }
}
@media (max-width: 900px) {
  .otis-stack-section {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 40px;
  }
  .otis-stack-section .editorial-section-heading {
    text-align: center;
  }
  .otis-stack-section .editorial-section-heading > p {
    margin-left: auto;
  }
  .otis-stack-controls {
    justify-content: center;
  }
  .otis-stack {
    width: min(100%, 280px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .otis-print {
    transition: none;
  }
  .otis-print.is-leaving {
    animation: none;
  }
}

/* Error pages (WEB-60). The 404 is the Help & support intro (the footer below carries the ways
   on); the maintenance page is the logo, the theme control and one message with its picture,
   centred in the window's height. */
.maintenance {
  min-height: calc(100vh - 100px);
  min-height: calc(100svh - 100px);
  align-content: center;
  padding-bottom: 120px;
}
.maintenance > div > p:not(.eyebrow) {
  margin-bottom: 34px;
}
@media (max-width: 700px) {
  .maintenance {
    padding-bottom: 96px;
  }
}
/* Legal notice and Privacy: one readable column under the intro. */
.legal-text {
  max-width: 720px;
  padding: 0 0 90px;
  color: var(--editorial-muted);
  font-size: 17px;
  line-height: 1.7;
}
.legal-text h2 {
  margin: 40px 0 10px;
  color: var(--editorial-ink);
  font-family: var(--editorial-display);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.015em;
}
.legal-text a {
  color: var(--editorial-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.legal-details {
  display: grid;
  margin: 0 0 36px;
  border-top: 1px solid var(--editorial-line);
}
.legal-details > div {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 4px 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--editorial-line);
}
.legal-details dt {
  color: var(--editorial-muted);
  font-size: 15px;
}
.legal-details dd {
  margin: 0;
  color: var(--editorial-ink);
}
@media (max-width: 600px) {
  .legal-text {
    font-size: 16px;
  }
  .legal-details > div {
    grid-template-columns: 1fr;
  }
}