/* Halves landing page. One sticky phone tells the story while the words scroll past, then four phones at the
   table for the receipt. Schibsted Grotesk is self-hosted under the SIL Open Font License
   (fonts/SchibstedGrotesk-OFL.txt), Latin subset. */

@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/schibsted-grotesk.woff2") format("woff2");
}

:root {
  --page: #F6F6F3;
  --surface: #FFFFFF;
  --ink: #0C0C0B;
  --on-ink: #FCFCFB;
  --text-2: #55544E;
  --text-3: #8B8982;
  --hair: rgba(12, 12, 11, .09);
  --hair-strong: rgba(12, 12, 11, .16);
  --line: #E4E3DD;
  --line-soft: #ECEBE6;
  --page-dot: #D3D1CA;
  --owed: #008300;
  --go: #0E8A16;
  --link: #2F5F8A;

  --mint: #E3EFE4;   --mint-ink: #2E5E3A;
  --rose: #F8E4DF;   --rose-ink: #8E3A2C;
  --amber: #F9F2E4;  --amber-ink: #4A3A16; --amber-line: #EEDFC3;
  --blue: #DCE9F2;   --blue-ink: #2B4A63;
  --orange: #F7E1D3; --orange-ink: #8A4A22;

  --app-canvas: #FCFCFB;
  --app-card: #FFFFFF;
  --app-control: #F3F3F0;
  --app-pressed: #E7E6E1;
  --glass: rgba(255, 255, 255, .76);
  --glass-edge: rgba(11, 11, 11, .07);
  --bezel: #0B0B0C;
  --tile: #0B0B0B;
  --tile-coin: #F3EFE5;
  --tile-edge: transparent;
  --cm-edge: rgba(0, 0, 0, .24);

  --ti-1: #E9EAEC; --ti-2: #96999E; --ti-3: #CED1D4;
  --glare: rgba(255, 255, 255, .09);

  --av-ink: #1C1C1A;
  --av-you: #CFD4ED; --av-bea: #EACCC6; --av-sam: #C4DCEC; --av-tom: #E8D8B2; --av-jo: #D9CFEA;

  --shadow-phone: 0 1px 2px rgba(0, 0, 0, .08), 0 16px 32px -14px rgba(22, 24, 32, .2), 0 56px 96px -36px rgba(22, 24, 32, .36);
  --shadow-card: 0 0 0 1px var(--hair), 0 1px 2px rgba(0, 0, 0, .03), 0 12px 32px -20px rgba(22, 24, 32, .14);

  --font: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --glide: cubic-bezier(.16, 1, .3, 1);
  --gutter: clamp(16px, 4vw, 48px);
  --nav-h: 64px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #16171A; --surface: #1E1F23; --ink: #F1F0ED; --on-ink: #131416; --text-2: #BCBBB4; --text-3: #898883;
    --hair: rgba(255, 255, 255, .08); --hair-strong: rgba(255, 255, 255, .16);
    --line: #34353A; --line-soft: #2A2B2F; --page-dot: #45464B; --owed: #55BF50; --link: #8FB8DC;
    --mint: #1F2E22; --mint-ink: #9FD3A6; --rose: #3A2420; --rose-ink: #F2B3A6;
    --amber: #2B2517; --amber-ink: #E9D6AE; --amber-line: #3D3524; --blue: #1E2A33; --blue-ink: #A9C8E0;
    --orange: #33241A; --orange-ink: #F0B98E;
    --app-canvas: #1A1B1E; --app-card: #222327; --app-control: #2D2E32; --app-pressed: #3A3B40;
    --glass: rgba(44, 45, 49, .78); --glass-edge: rgba(255, 255, 255, .08); --tile-edge: rgba(255, 255, 255, .16);
    --cm-edge: rgba(255, 255, 255, .14);
    --ti-1: #8A8D92; --ti-2: #3B3D41; --ti-3: #6B6E73; --glare: rgba(255, 255, 255, .05);
    --av-ink: #F0EFEC;
    --av-you: #474A52; --av-bea: #524846; --av-sam: #444B52; --av-tom: #524B3E; --av-jo: #4A4552;
    --shadow-phone: 0 0 0 1px rgba(255, 255, 255, .04), 0 24px 48px -20px rgba(0, 0, 0, .7), 0 60px 100px -40px rgba(0, 0, 0, .9);
    --shadow-card: 0 0 0 1px var(--hair), 0 16px 36px -24px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --page: #16171A; --surface: #1E1F23; --ink: #F1F0ED; --on-ink: #131416; --text-2: #BCBBB4; --text-3: #898883;
  --hair: rgba(255, 255, 255, .08); --hair-strong: rgba(255, 255, 255, .16);
  --line: #34353A; --line-soft: #2A2B2F; --page-dot: #45464B; --owed: #55BF50; --link: #8FB8DC;
  --mint: #1F2E22; --mint-ink: #9FD3A6; --rose: #3A2420; --rose-ink: #F2B3A6;
  --amber: #2B2517; --amber-ink: #E9D6AE; --amber-line: #3D3524; --blue: #1E2A33; --blue-ink: #A9C8E0;
  --orange: #33241A; --orange-ink: #F0B98E;
  --app-canvas: #1A1B1E; --app-card: #222327; --app-control: #2D2E32; --app-pressed: #3A3B40;
  --glass: rgba(44, 45, 49, .78); --glass-edge: rgba(255, 255, 255, .08); --tile-edge: rgba(255, 255, 255, .16);
  --cm-edge: rgba(255, 255, 255, .14);
  --ti-1: #8A8D92; --ti-2: #3B3D41; --ti-3: #6B6E73; --glare: rgba(255, 255, 255, .05);
  --av-ink: #F0EFEC;
  --av-you: #474A52; --av-bea: #524846; --av-sam: #444B52; --av-tom: #524B3E; --av-jo: #4A4552;
  --shadow-phone: 0 0 0 1px rgba(255, 255, 255, .04), 0 24px 48px -20px rgba(0, 0, 0, .7), 0 60px 100px -40px rgba(0, 0, 0, .9);
  --shadow-card: 0 0 0 1px var(--hair), 0 16px 36px -24px rgba(0, 0, 0, .7);
  color-scheme: dark;
}

/* Base */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
::selection { background: var(--ink); color: var(--on-ink); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4, h5, p, ul, ol, figure, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
svg { flex: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sprite symbol[id^="i-"], svg use[href^="#i-"] { fill: none; }
svg:has(> use[href^="#i-"]) { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

.icon-tile { display: block; }
.icon-tile rect { fill: var(--tile); stroke: var(--tile-edge); stroke-width: 3; }
.icon-tile path, .icon-tile use { fill: var(--tile-coin); }

/* Card marks, after the app's CardMark: height is 0.64 of the width, corners 0.13, and a chip in the card's ink
   at 38%. Colours are the app's card faces; no bank's name or logo ever appears. */

.cm {
  --w: 20px; --face: #FF4F40; --cink: #FFFFFF;
  position: relative; display: inline-block; flex: none; vertical-align: middle;
  width: var(--w); height: calc(var(--w) * .64);
  border-radius: calc(var(--w) * .13);
  background: var(--face);
  box-shadow: inset 0 0 0 .5px var(--cm-edge);
  overflow: hidden;
}
.cm::before {
  content: ""; position: absolute;
  left: calc(var(--w) * .11); top: calc(var(--w) * .128);
  width: calc(var(--w) * .21); height: calc(var(--w) * .1536);
  border-radius: calc(var(--w) * .04);
  background: var(--cink); opacity: .38;
}
.cm-coral { --face: #FF4F40; --cink: #FFFFFF; }
.cm-plat {
  --face: #C6CACF; --cink: #23262B;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .55) 46%, rgba(255, 255, 255, 0) 60%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 1px, rgba(0, 0, 0, .015) 1px 2px),
    linear-gradient(160deg, #D7DADD 0%, #B9BDC2 38%, #CDD0D4 62%, #AFB3B8 100%);
}
.cm-blue { --face: #006FCF; --cink: #FFFFFF; }
.cm-gold { --face: #CBA65B; --cink: #2B2110; background: linear-gradient(160deg, #D8B66E, #C29C50 60%, #CFAB62); }
.cm-teal { --face: #14233C; --cink: #25C9B9; }
.cm-black { --face: #191C1F; --cink: #FFFFFF; }
.cm-lime { --face: #9FE870; --cink: #163300; }
.cm-navy { --face: #00395D; --cink: #00AEEF; }
.cm-red { --face: #DB0011; --cink: #FFFFFF; }
/* A light pass across the metal, once on arrival and again on hover. */
.cm-plat::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .7) 50%, transparent 62%) -160% 0 / 260% 100% no-repeat;
}
.sheen .cm-plat::after { animation: sheen 1.8s var(--glide) 1.2s both; }
.sheen:hover .cm-plat::after { animation: sheen-again 1.2s var(--glide) both; }
@keyframes sheen { to { background-position: 160% 0; } }
@keyframes sheen-again { from { background-position: -160% 0; } to { background-position: 160% 0; } }
.cm em {
  position: absolute; left: calc(var(--w) * .11); bottom: calc(var(--w) * .07);
  font: 600 calc(var(--w) * .085)/1 var(--ui); font-style: normal; letter-spacing: .06em;
  color: var(--cink); opacity: .8; font-variant-numeric: tabular-nums;
}
.cm-teal em, .cm-navy em { opacity: 1; }

/* Buttons and links */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 38px; padding: 0 17px; border-radius: 999px;
  background: var(--ink); color: var(--on-ink);
  font: 600 14.5px/1 var(--font); letter-spacing: -.005em; text-decoration: none; white-space: nowrap;
  transition: transform .4s var(--glide), box-shadow .4s var(--glide);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .45); }
.btn:active { transform: scale(.97); }

.stores { display: flex; flex-wrap: wrap; gap: 10px; }
.store {
  display: inline-flex; align-items: center; gap: 12px;
  height: 56px; padding: 0 24px 0 19px; border-radius: 999px;
  text-decoration: none;
  transition: transform .45s var(--glide), box-shadow .45s var(--glide);
}
.store svg { width: 21px; height: 21px; stroke-width: 1.75; }
.store span { display: flex; flex-direction: column; font-size: 17.5px; font-weight: 600; line-height: 1.1; letter-spacing: -.012em; }
.store small { font-size: 11.5px; font-weight: 500; letter-spacing: .01em; opacity: .66; }
.store:hover { transform: translateY(-2px); }
.store:active { transform: scale(.97); }
.store-ink { background: var(--ink); color: var(--on-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }
.store-ink:hover { box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .5); }
.store-line { color: var(--ink); background: var(--surface); box-shadow: 0 0 0 1px var(--hair-strong); }

.web-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 20px;
  font-size: 15.5px; font-weight: 500; color: var(--text-2); text-decoration: none;
}
.web-link svg { width: 15px; height: 15px; transition: transform .4s var(--glide); }
.web-link:hover { color: var(--ink); }
.web-link:hover svg { transform: translateX(3px); }

/* Nav: frosted, sticky, with a hairline once the page moves. */

.nav {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--page) 76%, transparent);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
  backdrop-filter: saturate(1.8) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color .4s, background-color .4s;
}
.nav.scrolled { border-bottom-color: var(--hair); }
.nav-in { display: flex; align-items: center; gap: 24px; height: var(--nav-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.brand .icon-tile { width: 28px; height: 28px; }
.brand b { font-size: 19px; font-weight: 700; letter-spacing: -.025em; }
.nav-links { display: flex; align-items: center; gap: 2px; margin: 0 auto; }
.nav-links a {
  position: relative; padding: 8px 12px; border-radius: 999px;
  font-size: 14.5px; font-weight: 500; color: var(--text-2); text-decoration: none; white-space: nowrap;
  transition: color .25s, background-color .25s;
}
.nav-links a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.nav-end { display: flex; align-items: center; gap: 18px; flex: none; }
.quiet-link { font-size: 14.5px; font-weight: 500; color: var(--text-2); text-decoration: none; white-space: nowrap; transition: color .25s; }
.quiet-link:hover { color: var(--ink); }

.menu { position: relative; display: none; }
.menu summary {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  list-style: none; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--hair-strong);
  transition: background-color .25s;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.burger { position: relative; width: 16px; height: 10px; }
.burger i { position: absolute; left: 0; right: 0; height: 1.6px; border-radius: 1px; background: var(--ink); transition: transform .35s var(--glide), top .35s var(--glide); }
.burger i:first-child { top: 0; }
.burger i:last-child { top: 8.4px; }
.menu[open] .burger i:first-child { top: 4.2px; transform: rotate(45deg); }
.menu[open] .burger i:last-child { top: 4.2px; transform: rotate(-45deg); }
.menu-panel {
  position: absolute; right: 0; top: calc(100% + 12px);
  width: min(300px, calc(100vw - 32px));
  padding: 8px; border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--hair), 0 24px 48px -20px rgba(0, 0, 0, .3);
  animation: menu-in .35s var(--glide) both;
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.menu-panel a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-radius: 12px;
  font-size: 16px; font-weight: 500; text-decoration: none;
}
.menu-panel a:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.menu-panel a svg { width: 15px; height: 15px; color: var(--text-3); }
.menu-panel hr { margin: 6px 14px; border: 0; border-top: 1px solid var(--hair); }

@media (max-width: 1099px) {
  .nav-links { display: none; }
  .menu { display: block; }
  .nav-end { margin-left: auto; gap: 10px; }
}
@media (max-width: 1099px) and (min-width: 641px) { .nav-end .quiet-link { margin-right: 6px; } }
@media (max-width: 640px) { .nav-end .quiet-link { display: none; } }

/* The story: words on the left; one phone on a full-width stage that stays put over the right-hand column. */

.story { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 400px; column-gap: clamp(48px, 7vw, 120px); }
.story-text { grid-column: 1; grid-row: 1; min-width: 0; }
.block { min-height: 96vh; display: flex; flex-direction: column; justify-content: center; padding-block: 72px; }
.hero { min-height: calc(100vh - var(--nav-h)); padding-block: 56px 72px; }

.announce {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 10px; max-width: 100%;
  margin-bottom: 36px; padding: 5px 14px 5px 5px; border-radius: 999px;
  background: var(--surface); box-shadow: 0 0 0 1px var(--hair), 0 1px 2px rgba(0, 0, 0, .04);
  font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--text-2); text-decoration: none;
  transition: box-shadow .4s var(--glide), color .25s;
}
.announce b { flex: none; padding: 4px 9px; border-radius: 999px; background: var(--ink); color: var(--on-ink); font-size: 12px; font-weight: 600; letter-spacing: .01em; }
.announce svg { width: 14px; height: 14px; color: var(--text-3); transition: transform .4s var(--glide), color .25s; }
.announce:hover { color: var(--ink); box-shadow: 0 0 0 1px var(--hair-strong), 0 6px 18px -10px rgba(0, 0, 0, .25); }
.announce:hover svg { transform: translateX(3px); color: var(--ink); }

h1 {
  max-width: 10.5ch;
  font-size: clamp(50px, 6.8vw, 98px);
  font-weight: 650;
  line-height: .95;
  letter-spacing: -.052em;
}
.lede { max-width: 30ch; margin: 30px 0 40px; font-size: clamp(19px, 1.55vw, 21.5px); line-height: 1.45; letter-spacing: -.008em; color: var(--text-2); }

.hero-cards {
  display: flex; align-items: center; gap: 14px;
  max-width: 440px; margin-top: 44px; padding-top: 22px;
  border-top: 1px solid var(--hair);
  font-size: 15px; color: var(--text-2);
}
.duo { position: relative; flex: none; width: 48px; height: 32px; }
.duo .cm { --w: 34px; position: absolute; }
.duo .cm-coral { right: 0; top: 0; }
.duo .cm-plat { left: 0; bottom: 0; box-shadow: 0 0 0 2px var(--page), inset 0 0 0 .5px var(--cm-edge); overflow: visible; }
.duo .cm-plat::after { border-radius: inherit; }
.duo .cm { transition: transform .5s var(--glide); }
.hero-cards:hover .cm-coral { transform: translate(3px, -2px) rotate(4deg); }
.hero-cards:hover .cm-plat { transform: translate(-2px, 1px) rotate(-3deg); }

.kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; font-size: 13.5px; font-weight: 500; letter-spacing: .005em; color: var(--text-3); }
.kicker span { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.kicker::before { content: ""; order: 1; width: 28px; height: 1px; background: var(--hair-strong); }
.kicker em { order: 2; font-style: normal; }

.step > h2, .qhead h2 {
  max-width: 13ch;
  font-size: clamp(38px, 4.4vw, 62px);
  font-weight: 650;
  line-height: 1.0;
  letter-spacing: -.046em;
}
.step > p:not(.kicker), .qhead p { max-width: 31ch; margin-top: 24px; font-size: clamp(18px, 1.45vw, 20.5px); line-height: 1.48; color: var(--text-2); }

/* While the script runs, the step at the middle of the screen is in focus. */
.js .story .block > :not(.slot) { transition: opacity .7s var(--glide); }
@media (min-width: 960px) {
  .js .story .block:not(.on) > :not(.slot) { opacity: .2; }
  .js .story-text { transition: opacity .55s var(--glide); }
  .js .story.quad .story-text { opacity: 0; pointer-events: none; }
  .js .story .rx-block { min-height: 150vh; }
}

.story-phone { grid-column: 1 / -1; grid-row: 1; position: relative; pointer-events: none; }
.stage { position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); --z: 1.04; --qs: .8; }
@media (max-height: 820px) { .stage { --z: .94; } }
@media (max-height: 740px) { .stage { --z: .84; } }
@media (max-height: 660px) { .stage { --z: .74; } }
.mainp {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 3;
  width: 400px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px;
}
.mainp .phone {
  margin-block: calc(310px * (var(--z) - 1));
  transform: scale(var(--z));
  transition: transform 1s var(--glide);
}
.js .story.quad .mainp .phone { transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(var(--qs)); }
.below { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; transition: opacity .4s; }
.js .story.quad .below { opacity: 0; }
.ph-cap { height: 18px; font-size: 13px; font-weight: 500; color: var(--text-3); opacity: 0; transition: opacity .5s; }
.phone[data-scene="4"] + .below .ph-cap { opacity: 1; }

.dots { display: flex; align-items: center; gap: 6px; height: 6px; }
.dots i { width: 6px; height: 6px; border-radius: 999px; background: var(--page-dot); transition: width .6s var(--glide), background-color .3s; }
.dots i.on { width: 22px; background: var(--ink); }

/* The receipt step on wide screens: Alex's phone shrinks into the end of a row and Bea's, Sam's and Tom's slide
   out from behind it. The script measures the row; without it these stay hidden. */
.qp, .qcap, .qhead { display: none; }
.js .qp, .js .qhead { display: block; }
.js .qcap { display: flex; }
.qp {
  position: absolute; left: 0; top: 0; z-index: 2;
  transform-origin: 0 0;
  transform: translate(var(--hx, 0px), var(--y, 0px)) scale(calc(var(--qs) * .92));
  opacity: 0; visibility: hidden;
  transition: transform .9s var(--glide), opacity .35s ease, visibility 0s linear .9s;
}
.js .story.quad .qp {
  transform: translate(var(--x, 0px), var(--y, 0px)) scale(var(--qs));
  opacity: 1; visibility: visible;
  transition: transform 1s var(--glide) var(--d), opacity .5s ease var(--d), visibility 0s;
}
.qp-bea { --d: .16s; } .qp-sam { --d: .1s; } .qp-tom { --d: .04s; }
.qcap {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  transform: translate(var(--x, 0px), var(--y, 0px)) translateX(-50%) translateY(6px);
  font-size: 14px; font-weight: 600; letter-spacing: -.005em;
  opacity: 0; transition: opacity .3s, transform .6s var(--glide);
}
.qcap small { font-size: 14px; font-weight: 500; color: var(--text-3); }
.js .story.quad .qcap { opacity: 1; transform: translate(var(--x, 0px), var(--y, 0px)) translateX(-50%); transition: opacity .6s ease .45s, transform .8s var(--glide) .45s; }
.qhead {
  position: absolute; left: 0; right: 0; top: var(--hy, 40px);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .3s, transform .6s var(--glide), visibility 0s linear .6s;
}
.js .story.quad .qhead { opacity: 1; visibility: visible; transform: none; transition: opacity .7s ease .2s, transform .9s var(--glide) .2s, visibility 0s; }
.qhead .kicker { margin-bottom: 18px; }
.qhead-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; }
.qhead h2 { max-width: 12ch; font-size: clamp(34px, 3.4vw, 50px); }
.qhead p { max-width: 40ch; margin: 0 0 4px; font-size: clamp(16px, 1.25vw, 18px); }

.slot { display: none; }

/* Phone: a 300 × 620 frame. A titanium edge, a black bezel, a hint of glass over the screen. */

.phone {
  position: relative;
  width: 300px; height: 620px;
  padding: 7px;
  border: 2px solid transparent;
  border-radius: 52px;
  background:
    linear-gradient(var(--bezel), var(--bezel)) padding-box,
    linear-gradient(152deg, var(--ti-1) 0%, var(--ti-2) 16%, var(--ti-3) 34%, var(--ti-2) 52%, var(--ti-3) 70%, var(--ti-2) 86%, var(--ti-1) 100%) border-box;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), var(--shadow-phone);
  flex: none;
}
.phone::before, .phone::after {
  content: ""; position: absolute; width: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--ti-2), var(--ti-1) 60%, var(--ti-3));
}
.phone::before { left: -4.5px; top: 118px; height: 26px; box-shadow: 0 48px 0 0 var(--ti-2), 0 96px 0 0 var(--ti-2); }
.phone::after { right: -4.5px; top: 172px; height: 70px; background: linear-gradient(270deg, var(--ti-2), var(--ti-1) 60%, var(--ti-3)); }
.screen {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
  border-radius: 43px;
  background: var(--app-canvas);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: -.005em;
  isolation: isolate;
}
.screen::after {
  content: ""; position: absolute; inset: 0; z-index: 30; pointer-events: none; border-radius: inherit;
  background: linear-gradient(118deg, var(--glare) 0%, transparent 34%, transparent 70%, color-mix(in srgb, var(--glare) 50%, transparent) 100%);
}
.screen svg:has(> use[href^="#i-"]) { stroke-width: 1.9; }

.sb { position: absolute; inset: 0 0 auto; height: 48px; z-index: 6; }
.sb-time { position: absolute; left: 34px; top: 17px; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
.sb-island { position: absolute; left: 50%; top: 10px; width: 88px; height: 26px; translate: -50% 0; border-radius: 14px; background: #000; }
.sb-icons { position: absolute; right: 26px; top: 19px; display: flex; align-items: center; gap: 5px; }
.sb-signal { width: 16px; height: 11px; fill: var(--ink); }
.sb-wifi { width: 15px; height: 15px; stroke-width: 2.6 !important; margin-top: -2px; }
.sb-batt { position: relative; width: 24px; height: 12px; border-radius: 4px; border: 1.2px solid color-mix(in srgb, var(--ink) 40%, transparent); }
.sb-batt i { position: absolute; inset: 1.5px; right: 5px; border-radius: 2px; background: var(--ink); }
.sb-batt::after { content: ""; position: absolute; right: -3.5px; top: 3px; width: 2px; height: 4px; border-radius: 0 1px 1px 0; background: color-mix(in srgb, var(--ink) 40%, transparent); }

.sc { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.sc.on, .phone[data-scene="0"] .sc-home, .phone[data-scene="1"] .sc-feed, .phone[data-scene="2"] .sc-bills,
.phone[data-scene="3"] .sc-couple, .phone[data-scene="4"] .sc-noapp, .phone[data-scene="5"] .sc-rx { opacity: 1; visibility: visible; transition: opacity .5s ease .1s, visibility 0s; }

/* Pieces of the app */

.av {
  display: inline-grid; place-items: center; flex: none; position: relative;
  width: 20px; height: 20px; border-radius: 50%;
  font: 600 8.5px/1 var(--ui); letter-spacing: .02em; color: var(--av-ink);
}
.av-22 { width: 22px; height: 22px; font-size: 9px; }
.av-28 { width: 28px; height: 28px; font-size: 10.5px; }
.av-30 { width: 30px; height: 30px; font-size: 11px; }
.av-34 { width: 34px; height: 34px; font-size: 12px; }
.av-you { background: var(--av-you); }
.av-bea { background: var(--av-bea); }
.av-sam { background: var(--av-sam); }
.av-tom { background: var(--av-tom); }
.av-jo { background: var(--av-jo); }

.badge { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--app-control); color: var(--ink); }
.badge svg { width: 16px; height: 16px; }
.dest-b { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; }
.dest-b svg { width: 16px; height: 16px; }
.dest-b.blue { background: var(--blue); color: var(--blue-ink); }
.dest-b.quiet { background: var(--app-control); color: var(--ink); }
.faces { display: flex; }
.faces .av { box-shadow: 0 0 0 2px var(--app-card); }
.faces .av + .av { margin-left: -5px; }
.rule { display: block; height: 1px; background: var(--line-soft); }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 9px 0 7px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.chip svg { width: 13px; height: 13px; }
.chip .av { width: 18px; height: 18px; font-size: 8px; }
.chip.blue { background: var(--blue); color: var(--blue-ink); }
.chip.orange { background: var(--orange); color: var(--orange-ink); }
.chip.rose { background: var(--rose); color: var(--rose-ink); padding-left: 3px; }
.chip.quiet { background: var(--app-control); color: var(--text-2); }
.chip.dashed { color: var(--text-3); box-shadow: inset 0 0 0 1.5px var(--line); padding-left: 9px; }

.push {
  position: absolute; left: 8px; right: 8px; top: 8px; z-index: 7;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px 10px 10px;
  border-radius: 22px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: 0 0 0 .5px var(--glass-edge), 0 10px 30px -10px rgba(0, 0, 0, .25);
  color: var(--ink);
}
.push .icon-tile { width: 34px; height: 34px; flex: none; }
.push-text { display: flex; flex-direction: column; min-width: 0; flex: 1; font-size: 12.5px; line-height: 1.3; }
.push-top { display: flex; justify-content: space-between; gap: 8px; }
.push-top b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.push-top small { font-size: 12px; color: var(--text-2); }
.push-card { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 11.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.push-card .cm { --w: 18px; }

.ap { position: absolute; inset: 50px 16px 0; display: flex; flex-direction: column; }
.ap-head { display: flex; align-items: center; justify-content: space-between; height: 38px; margin-top: 4px; }
.ap-title { font-size: 28px; font-weight: 700; letter-spacing: -.025em; }
.ap-nav { display: flex; align-items: center; gap: 8px; height: 32px; margin-top: 4px; }
.ap-back { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--glass); box-shadow: 0 0 0 .5px var(--glass-edge), 0 4px 12px -6px rgba(0, 0, 0, .25); }
.ap-back svg { width: 17px; height: 17px; stroke-width: 2.4 !important; }
.ap-crumb { font-size: 13px; color: var(--text-2); }
.ap-day { margin: 14px 0 2px; font-size: 13px; font-weight: 600; color: var(--text-2); }

.tabbar { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; gap: 8px; z-index: 5; }
.tabs, .tab-plus {
  height: 56px; border-radius: 999px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: 0 0 0 .5px var(--glass-edge), 0 8px 20px -10px rgba(0, 0, 0, .25);
}
.tabs { flex: 1; display: flex; align-items: center; justify-content: space-around; padding: 0 6px; }
.tab { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 9.5px; font-weight: 600; color: var(--text-2); }
.tab svg { width: 19px; height: 19px; }
.tab.on { color: var(--ink); }
.tab-plus { width: 56px; display: grid; place-items: center; }
.tab-plus svg { width: 22px; height: 22px; stroke-width: 2.2 !important; }

/* Every loop runs only while its scene has `run`, and freezes with `paused`. Without `run` each scene shows
   its still frame, which is also what reduced motion and no script see. */
.sc.run * { animation-iteration-count: infinite; animation-fill-mode: both; animation-timing-function: var(--glide); }
.paused, .paused * { animation-play-state: paused !important; }
@keyframes shimmer { to { background-position: -150% 0; } }

/* Scene 0: Home. A payment on the silver card arrives, Halves works out it was the Lisbon trip, it's swiped in;
   a coffee on the coral card is swiped left and kept personal. 0–6% the banner drops, 6–18% the card works out
   where it belongs, 30–41% swiped right, 41–46% the balance moves, 56–69% the coffee goes left, 70–94% done. */

.hx-hero { position: relative; display: flex; flex-direction: column; margin-top: 10px; padding: 14px 16px 15px; border-radius: 22px; background: var(--mint); }
.hx-label { font-size: 13px; font-weight: 600; color: var(--mint-ink); }
.hx-amt { position: relative; height: 36px; font-size: 31px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.hx-amt span { position: absolute; left: 0; top: 0; }
.hx-a2 { opacity: 0; }
.hx-plus {
  position: absolute; right: 14px; top: 14px;
  padding: 4px 9px; border-radius: 999px;
  background: var(--app-card); color: var(--owed);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  opacity: 0;
}
.hx-pills { display: flex; gap: 6px; margin-top: 12px; }
.hx-pills span {
  flex: 1; display: grid; place-items: center; height: 32px; border-radius: 999px;
  background: var(--app-card); box-shadow: 0 0 0 .5px var(--line), 0 2px 6px -2px rgba(0, 0, 0, .1);
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.hx-sec { display: flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 17px; font-weight: 700; letter-spacing: -.015em; }
.hx-count { position: relative; width: 20px; height: 20px; }
.hx-count b { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--on-ink); font-size: 11px; font-weight: 700; }
.hx-count .hc1 { opacity: 0; }

.deck { position: relative; height: 186px; margin-top: 12px; }
.dc {
  position: absolute; left: 0; right: 0; top: 0; height: 172px;
  padding: 14px;
  border-radius: 26px;
  background: var(--app-card);
  box-shadow: 0 0 0 .5px var(--line), 0 12px 24px -14px rgba(0, 0, 0, .3);
  transform-origin: 50% 100%;
}
.dc-pret { transform: translateY(14px) scale(.93); }
.dc-top { display: flex; align-items: center; gap: 10px; }
.dc-name { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.dc-name b { font-size: 14.5px; font-weight: 600; letter-spacing: -.012em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-name small { font-size: 12px; color: var(--text-2); }
.dc-amt { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dc-amt .cm { --w: 18px; }
.dc-body { position: relative; margin-top: 14px; height: 96px; }
.dc-think, .dc-sorted { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; }
.dc-static { position: static; margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.dc-think { opacity: 0; }
.dc-ai { font-size: 12.5px; color: var(--text-2); }
.shim {
  display: block; height: 10px; border-radius: 5px;
  background: linear-gradient(90deg, var(--app-control) 30%, var(--app-canvas) 50%, var(--app-control) 70%) 0 0 / 300% 100%;
  animation: shimmer 1.6s linear infinite;
}
.shim-a { width: 78%; }
.shim-b { width: 48%; }
.dest { display: flex; align-items: center; gap: 10px; }
.dest b { flex: 1; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.dest-lock { width: 15px; height: 15px; color: var(--text-3); }
.dc p { font-size: 12.5px; color: var(--text-2); }
.owed { color: var(--owed); font-weight: 600; }
.stamp { position: absolute; top: -10px; padding: 6px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; opacity: 0; }
.stamp-add { left: 14px; background: var(--go); color: #fff; transform: rotate(-5deg); }
.stamp-personal { right: 14px; background: var(--ink); color: var(--on-ink); transform: rotate(5deg); }
.caught { position: absolute; inset: 22px 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; opacity: 0; }
.caught-tick { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: 50%; background: var(--ink); color: var(--on-ink); }
.caught-tick svg { width: 20px; height: 20px; stroke-width: 3 !important; }
.caught b { font-size: 16px; font-weight: 600; }
.caught span { font-size: 12.5px; color: var(--text-2); }
.deck-acts { display: flex; gap: 6px; margin-top: 8px; }
.da { flex: 1; display: grid; place-items: center; height: 36px; border-radius: 999px; background: var(--app-control); font-size: 12.5px; font-weight: 600; white-space: nowrap; }

.sc-home.run * { animation-duration: 12s; animation-delay: -1.2s; }
.sc-home.run .push { animation-name: hx-push; }
.sc-home.run .dc-tab { animation-name: hx-tab; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
.sc-home.run .dc-pret { animation-name: hx-pret; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
.sc-home.run .dc-think { animation-name: hx-think; animation-timing-function: ease; }
.sc-home.run .dc-tab .dc-sorted { animation-name: hx-sorted; }
.sc-home.run .stamp-add { animation-name: hx-stamp-add; }
.sc-home.run .stamp-personal { animation-name: hx-stamp-personal; }
.sc-home.run .da-add { animation-name: hx-da-add; animation-timing-function: ease; }
.sc-home.run .da-personal { animation-name: hx-da-personal; animation-timing-function: ease; }
.sc-home.run .hx-a1 { animation-name: hx-a1; }
.sc-home.run .hx-a2 { animation-name: hx-a2; }
.sc-home.run .hx-plus { animation-name: hx-plus; }
.sc-home.run .hx-hero { animation-name: hx-hero; }
.sc-home.run .hc2 { animation-name: hx-hc2; }
.sc-home.run .hc1 { animation-name: hx-hc1; }
.sc-home.run .caught { animation-name: hx-caught; }
.sc-home.run .shim { animation: shimmer 1.6s linear infinite; }

@keyframes hx-push {
  0%, 2% { transform: translateY(-150%); opacity: 0; }
  7%, 22% { transform: none; opacity: 1; }
  27%, 100% { transform: translateY(-150%); opacity: 0; }
}
@keyframes hx-tab {
  0%, 3% { transform: translateY(-14px) scale(.97); opacity: 0; }
  7% { transform: none; opacity: 1; }
  29% { transform: none; }
  32% { transform: translateX(20px) rotate(2deg); }
  36% { transform: translateX(62px) rotate(5deg); opacity: 1; }
  42% { transform: translateX(400px) rotate(20deg); opacity: 1; }
  42.5%, 100% { transform: translateX(400px) rotate(20deg); opacity: 0; }
}
@keyframes hx-pret {
  0%, 3% { transform: translateY(14px) scale(.93); opacity: 0; }
  8%, 40% { transform: translateY(14px) scale(.93); opacity: 1; }
  47%, 57% { transform: none; }
  60% { transform: translateX(-20px) rotate(-2deg); }
  64% { transform: translateX(-62px) rotate(-5deg); opacity: 1; }
  70% { transform: translateX(-400px) rotate(-20deg); opacity: 1; }
  70.5%, 100% { transform: translateX(-400px) rotate(-20deg); opacity: 0; }
}
@keyframes hx-think { 0%, 15% { opacity: 1; } 18%, 60% { opacity: 0; } 62%, 100% { opacity: 1; } }
@keyframes hx-sorted { 0%, 16% { opacity: 0; transform: translateY(6px); } 21%, 60% { opacity: 1; transform: none; } 62%, 100% { opacity: 0; transform: translateY(6px); } }
@keyframes hx-stamp-add { 0%, 31% { opacity: 0; transform: rotate(-5deg) scale(.8); } 34%, 41% { opacity: 1; transform: rotate(-5deg) scale(1); } 42%, 100% { opacity: 0; transform: rotate(-5deg) scale(1); } }
@keyframes hx-stamp-personal { 0%, 59% { opacity: 0; transform: rotate(5deg) scale(.8); } 62%, 69% { opacity: 1; transform: rotate(5deg) scale(1); } 70%, 100% { opacity: 0; transform: rotate(5deg) scale(1); } }
@keyframes hx-da-add { 0%, 31% { background: var(--app-control); color: var(--ink); } 34%, 41% { background: var(--go); color: #fff; } 45%, 100% { background: var(--app-control); color: var(--ink); } }
@keyframes hx-da-personal { 0%, 59% { background: var(--app-control); } 62%, 69% { background: var(--app-pressed); } 73%, 100% { background: var(--app-control); } }
@keyframes hx-a1 { 0%, 41% { opacity: 1; transform: none; } 43%, 96% { opacity: 0; transform: translateY(-12px); } 99%, 100% { opacity: 1; transform: none; } }
@keyframes hx-a2 { 0%, 42.5% { opacity: 0; transform: translateY(12px); } 45.5%, 95% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(12px); } }
@keyframes hx-plus { 0%, 41% { opacity: 0; transform: translateY(6px) scale(.9); } 45%, 56% { opacity: 1; transform: none; } 62%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes hx-hero { 0%, 41% { transform: none; } 44% { transform: scale(1.025); } 49%, 100% { transform: none; } }
@keyframes hx-hc2 { 0%, 41% { opacity: 1; transform: none; } 43%, 97% { opacity: 0; transform: scale(.6); } 100% { opacity: 1; transform: none; } }
@keyframes hx-hc1 { 0%, 41% { opacity: 0; transform: scale(.6); } 44%, 69% { opacity: 1; transform: none; } 71%, 100% { opacity: 0; transform: scale(.6); } }
@keyframes hx-caught { 0%, 70% { opacity: 0; transform: scale(.92); } 75%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }

/* Scene 1: card payments. Rows arrive at the top, show Sorting, then the group they belong to (script).
   Each row carries the mark of the card it came from: coral for one, silver for the other. */

.pf { flex: 1; overflow: hidden; margin-top: 2px; }
.pr {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; column-gap: 12px; align-items: center;
  height: 64px; border-bottom: 1px solid var(--line-soft); overflow: hidden;
}
.pr-name { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pr-name b { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-chip { position: relative; display: flex; height: 24px; }
.pr-amt { align-self: start; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; margin-top: 12px; font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pr-card { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; color: var(--text-3); letter-spacing: .01em; }
.pr-card .cm { --w: 18px; }
.sorting {
  position: absolute; left: 0; top: 0; width: 76px; height: 24px; border-radius: 999px;
  display: grid; place-items: center;
  font-size: 11.5px; font-weight: 600; color: var(--text-3);
  background: linear-gradient(90deg, var(--app-control) 30%, var(--app-card) 50%, var(--app-control) 70%) 0 0 / 300% 100%;
  animation: shimmer 1.4s linear infinite;
  transition: opacity .2s;
}
.pr .chip { transform-origin: 0 50%; transition: opacity .35s, transform .5s var(--glide); }
.pr:not(.done) .chip { opacity: 0; transform: scale(.85); }
.pr.done .sorting { opacity: 0; }
.pr.enter { animation: pr-in .7s var(--glide) both; }
.pr.leave { animation: pr-out .5s ease both; }
@keyframes pr-in { from { height: 0; opacity: 0; transform: translateY(-16px); } }
@keyframes pr-out { to { height: 0; opacity: 0; } }

/* Scene 2: Flat 4B's bills. Rent adds itself; Electricity gets its amount from the bank and asks first.
   0–31% Rent, 36–74% Electricity, 95–100% back to the start. */

.bl { margin-top: 4px; }
.ap-plus { margin-left: auto; }
.b-amt .quiet { color: var(--text-2); font-weight: 500; }
.b {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; column-gap: 12px; align-items: center;
  margin: 0 -10px; padding: 12px 10px; border-radius: 18px;
}
.b + .b { margin-top: 2px; }
.b-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.b-name b { font-size: 14.5px; font-weight: 600; }
.b-name small { font-size: 12px; color: var(--text-2); white-space: nowrap; }
.b-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.b-amt { position: relative; height: 19px; min-width: 64px; font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.b-amt i, .b-state i { position: absolute; right: 0; top: 0; font-style: normal; white-space: nowrap; }
.b-amt .v1 { opacity: 0; color: var(--text-2); font-weight: 500; }
.b-state { position: relative; height: 16px; min-width: 64px; font-size: 12px; color: var(--text-2); }
.b-state .added { display: inline-flex; align-items: center; gap: 3px; color: var(--mint-ink); font-weight: 600; }
.b-state .added svg { width: 12px; height: 12px; stroke-width: 3 !important; }
.st-due, .st-wait, .elec .added { opacity: 0; }
.st-review { color: var(--amber-ink); font-weight: 600; }
.elec { background: var(--amber); }
.b-acts { grid-column: 1 / -1; display: flex; gap: 8px; height: 44px; overflow: hidden; padding-top: 10px; }
.bt {
  flex: 1; display: grid; place-items: center; height: 34px; border-radius: 999px;
  background: var(--app-card); font-size: 12.5px; font-weight: 600;
  box-shadow: 0 0 0 .5px var(--line), 0 2px 6px -2px rgba(0, 0, 0, .1);
}
.bt-ink { background: var(--ink); color: var(--on-ink); box-shadow: none; }
.b-push1, .b-push2 { opacity: 0; transform: translateY(-150%); }

.sc-bills.run * { animation-duration: 12s; }
.sc-bills.run .b-push1 { animation-name: bp1; }
.sc-bills.run .b-push2 { animation-name: bp2; }
.sc-bills.run .rent { animation-name: b-flash; animation-timing-function: ease; }
.sc-bills.run .rent .st-due { animation-name: b-before-12; }
.sc-bills.run .rent .added { animation-name: b-after-12; }
.sc-bills.run .elec .v1, .sc-bills.run .elec .st-wait { animation-name: b-before-41; }
.sc-bills.run .elec .v2 { animation-name: b-after-41; }
.sc-bills.run .elec .st-review { animation-name: b-review; }
.sc-bills.run .elec .added { animation-name: b-elec-added; }
.sc-bills.run .elec { animation-name: b-cream; animation-timing-function: ease; }
.sc-bills.run .b-acts { animation-name: b-acts; }
.sc-bills.run .elec .bt-ink { animation-name: b-press; animation-timing-function: ease; }

@keyframes bp1 { 0%, 5% { opacity: 0; transform: translateY(-150%); } 10%, 27% { opacity: 1; transform: none; } 32%, 100% { opacity: 0; transform: translateY(-150%); } }
@keyframes bp2 { 0%, 35% { opacity: 0; transform: translateY(-150%); } 40%, 58% { opacity: 1; transform: none; } 63%, 100% { opacity: 0; transform: translateY(-150%); } }
@keyframes b-flash { 0%, 12% { background: transparent; } 15%, 22% { background: var(--mint); } 30%, 100% { background: transparent; } }
@keyframes b-before-12 { 0%, 12% { opacity: 1; } 14%, 95% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes b-after-12 { 0%, 12% { opacity: 0; transform: translateY(4px); } 14.5%, 95% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes b-before-41 { 0%, 41% { opacity: 1; } 43%, 95% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes b-after-41 { 0%, 41% { opacity: 0; transform: translateY(4px); } 43.5%, 95% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes b-review { 0%, 41% { opacity: 0; } 43.5%, 70% { opacity: 1; } 72%, 100% { opacity: 0; } }
@keyframes b-elec-added { 0%, 70% { opacity: 0; transform: translateY(4px); } 72.5%, 95% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes b-cream { 0%, 41% { background: transparent; } 44%, 70% { background: var(--amber); } 75%, 100% { background: transparent; } }
@keyframes b-acts { 0%, 42% { height: 0; padding-top: 0; opacity: 0; } 47%, 70% { height: 44px; padding-top: 10px; opacity: 1; } 75%, 100% { height: 0; padding-top: 0; opacity: 0; } }
@keyframes b-press { 0%, 63% { transform: none; filter: none; } 65% { transform: scale(.93); filter: brightness(1.6); } 68%, 100% { transform: none; filter: none; } }

/* Scene 3: a couple's split. The amount is typed and the couple's 60 / 40 fills in by itself.
   10–22% typing, 26–32% the shares fill in, 52% Add split, 56–86% the toast, 94–100% back to the start. */

.cm-bar { display: grid; grid-template-columns: 32px 1fr 32px; align-items: center; height: 32px; margin-top: 4px; }
.cm-bar b { text-align: center; font-size: 15px; font-weight: 600; }
.cm-in { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 13px; color: var(--text-2); }
.cm-in b { color: var(--ink); font-weight: 600; }
.cm-in .faces .av { box-shadow: 0 0 0 2px var(--app-canvas); }
.cm-box { margin-top: 12px; padding: 14px 16px 16px; border-radius: 22px; background: var(--app-card); box-shadow: 0 0 0 .5px var(--line), 0 10px 22px -16px rgba(0, 0, 0, .3); }
.cm-desc { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; }
.cm-desc .cm { --w: 18px; margin-left: auto; }
.cm-amt { position: relative; height: 44px; margin-top: 12px; font-size: 38px; font-weight: 700; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.cm-amt i { position: absolute; left: 0; top: 0; font-style: normal; opacity: 0; }
.cm-amt .a0 { color: var(--text-3); }
.cm-amt .a4 { opacity: 1; }
.cm-def {
  display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 12px;
  border-radius: 12px; background: var(--app-control); color: var(--text-2);
}
.cm-def svg { width: 15px; height: 15px; color: var(--ink); }
.cm-def span { flex: 1; display: flex; flex-direction: column; font-size: 12px; line-height: 1.3; }
.cm-def span b { font-size: 13.5px; color: var(--ink); font-weight: 600; }
.cm-def em { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.cm-sec { margin-top: 20px; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.cp { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; height: 56px; border-bottom: 1px solid var(--line-soft); }
.cp-n { display: flex; flex-direction: column; }
.cp-n b { font-size: 14.5px; font-weight: 600; }
.cp-n small { font-size: 12px; color: var(--text-2); }
.cp-v { position: relative; min-width: 70px; height: 19px; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cp-v i { position: absolute; right: 0; top: 0; font-style: normal; }
.cp-v .z { opacity: 0; color: var(--text-3); }
.cm-btn {
  position: absolute; left: 16px; right: 16px; bottom: 26px;
  display: grid; place-items: center; height: 50px; border-radius: 999px;
  background: var(--ink); color: var(--on-ink); font-size: 15px; font-weight: 600;
}
.toast {
  position: absolute; left: 16px; right: 16px; bottom: 22px; z-index: 6;
  display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 18px;
  border-radius: 20px; background: var(--ink); color: var(--on-ink);
  box-shadow: 0 16px 32px -14px rgba(0, 0, 0, .5);
  opacity: 0;
}
.toast > svg { width: 18px; height: 18px; stroke-width: 2.6 !important; }
.toast span { display: flex; flex-direction: column; font-size: 13.5px; }
.toast b { font-weight: 600; }
.toast small { font-size: 12.5px; opacity: .72; }
.gl { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--glass); box-shadow: 0 0 0 .5px var(--glass-edge), 0 4px 12px -6px rgba(0, 0, 0, .25); }
.gl svg { width: 16px; height: 16px; stroke-width: 2.4 !important; }

.sc-couple.run * { animation-duration: 10s; animation-timing-function: ease; }
.sc-couple.run .a0 { animation-name: cm-a0; }
.sc-couple.run .a1 { animation-name: cm-a1; }
.sc-couple.run .a2 { animation-name: cm-a2; }
.sc-couple.run .a3 { animation-name: cm-a3; }
.sc-couple.run .a4 { animation-name: cm-a4; }
.sc-couple.run .cp-v .z { animation-name: cm-z; }
.sc-couple.run .cp-v .v { animation-name: cm-v; animation-timing-function: var(--glide); }
.sc-couple.run .cp + .cp .cp-v .v { animation-name: cm-v2; }
.sc-couple.run .cm-def { animation-name: cm-def; }
.sc-couple.run .cm-btn { animation-name: cm-btn; }
.sc-couple.run .toast { animation-name: cm-toast; animation-timing-function: var(--glide); }

@keyframes cm-a0 { 0%, 9.5% { opacity: 1; } 10%, 94% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes cm-a1 { 0%, 9.5% { opacity: 0; } 10%, 13.5% { opacity: 1; } 14%, 100% { opacity: 0; } }
@keyframes cm-a2 { 0%, 13.5% { opacity: 0; } 14%, 17.5% { opacity: 1; } 18%, 100% { opacity: 0; } }
@keyframes cm-a3 { 0%, 17.5% { opacity: 0; } 18%, 21.5% { opacity: 1; } 22%, 100% { opacity: 0; } }
@keyframes cm-a4 { 0%, 21.5% { opacity: 0; } 22%, 93% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes cm-z { 0%, 26% { opacity: 1; } 28%, 94% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes cm-v { 0%, 26% { opacity: 0; transform: translateY(6px); } 30%, 93% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }
@keyframes cm-v2 { 0%, 28% { opacity: 0; transform: translateY(6px); } 32%, 93% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }
@keyframes cm-def { 0%, 23% { background: var(--app-control); } 26%, 32% { background: var(--mint); } 38%, 100% { background: var(--app-control); } }
@keyframes cm-btn { 0%, 49% { transform: none; filter: none; opacity: 1; } 51% { transform: scale(.96); filter: brightness(1.6); opacity: 1; } 54% { transform: none; filter: none; opacity: 1; } 56%, 87% { opacity: 0; } 91%, 100% { opacity: 1; } }
@keyframes cm-toast { 0%, 53% { opacity: 0; transform: translateY(14px) scale(.96); } 57%, 86% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: translateY(6px); } }

/* Scene 4: Tom's phone, without the app. Alex's invite lands in the group chat; Tom taps it and it opens in the
   browser at app.usehalves.com: sign in, pick the name Alex typed in for them, and their splits are there.
   5% the invite arrives, 14% Tom replies, 21% Alex answers, 28% Tom taps the link, 31–35% the browser opens,
   44% Continue, 47–50% Which name, 57% Tom, 61–64% the trip, 65–83% the toast, 93–97% back to the chat.
   The still frame is the browser on Which name, with Tom chosen. */

.chat { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--app-canvas); }
.ch-head {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 32px auto minmax(0, 1fr); align-items: center; column-gap: 10px;
  padding: 52px 14px 10px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  border-bottom: .5px solid var(--glass-edge);
}
.ch-head .ap-back { box-shadow: none; background: transparent; }
.ch-faces { position: relative; width: 36px; height: 34px; }
.ch-faces .av { position: absolute; box-shadow: 0 0 0 2px var(--app-canvas); }
.ch-faces .av:nth-child(1) { left: 0; top: 0; }
.ch-faces .av:nth-child(2) { right: 0; bottom: 0; }
.ch-title { display: flex; flex-direction: column; min-width: 0; }
.ch-title b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.ch-title small { font-size: 11.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-body { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 12px 10px; overflow: hidden; }
.ch-day { align-self: center; margin-bottom: 4px; font-size: 11px; font-weight: 500; color: var(--text-3); }
.msg { flex: none; display: flex; align-items: flex-end; gap: 6px; max-width: 86%; margin-top: 8px; max-height: 240px; overflow: hidden; }
.msg > div { display: flex; flex-direction: column; min-width: 0; }
.msg small { margin: 0 0 3px 12px; font-size: 10.5px; font-weight: 500; color: var(--text-3); }
.bub { padding: 8px 12px; border-radius: 18px; background: var(--app-control); font-size: 13px; line-height: 1.32; }
.msg.out { align-self: flex-end; }
.msg.out .bub { background: var(--ink); color: var(--on-ink); }
.msg .av { margin-bottom: 1px; }
.msg-gap { width: 22px; flex: none; }
.bub-link { position: relative; width: 196px; padding: 4px; }
.lp { display: block; overflow: hidden; border-radius: 14px; background: var(--app-card); box-shadow: 0 0 0 .5px var(--line); }
.lp-img { display: flex; align-items: center; justify-content: center; gap: 8px; height: 74px; background: #0B0B0B; color: #F3EFE5; font: 700 17px/1 var(--font); letter-spacing: -.02em; }
.lp-img .icon-tile { width: 30px; height: 30px; }
.lp-img .icon-tile rect { fill: #0B0B0B; stroke: rgba(255, 255, 255, .2); }
.lp-img .icon-tile use { fill: #F3EFE5; }
.lp-meta { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px 9px; }
.lp-meta b { font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.lp-meta small { margin: 0; font-size: 11px; color: var(--text-3); }
.bub-link p { padding: 7px 8px 4px; font-size: 12.5px; line-height: 1.32; }
.bub-link u { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; word-break: break-all; }
.ch-input { display: flex; align-items: center; gap: 8px; padding: 6px 12px 30px; }
.ch-field { flex: 1; height: 34px; padding: 0 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); display: flex; align-items: center; font-size: 13px; color: var(--text-3); }
.ch-send { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--app-control); color: var(--text-3); }
.ch-send svg { width: 16px; height: 16px; stroke-width: 2.4 !important; }
.ntap { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--ink); opacity: 0; pointer-events: none; z-index: 4; }
.ntap-link { left: 50%; top: 50%; }

.br { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; background: var(--app-canvas); box-shadow: 0 -10px 30px -10px rgba(0, 0, 0, .25); }
.br-top { position: relative; padding: 50px 12px 8px; background: var(--app-control); }
.br-url { display: flex; align-items: center; justify-content: center; gap: 5px; height: 34px; border-radius: 12px; background: var(--app-card); box-shadow: 0 0 0 .5px var(--line); font-size: 13.5px; font-weight: 500; letter-spacing: -.01em; }
.br-url svg { width: 11px; height: 11px; color: var(--text-2); stroke-width: 2.6 !important; }
.br-url .br-re { position: absolute; right: 22px; width: 13px; height: 13px; color: var(--text-3); }
.br-load { position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; border-radius: 1px; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); opacity: 0; }
.br-page { position: relative; flex: 1; overflow: hidden; }
.br-tools { display: flex; align-items: center; justify-content: space-around; height: 64px; padding: 0 10px 18px; border-top: .5px solid var(--line); background: var(--app-control); color: var(--text-2); }
.br-tools svg { width: 18px; height: 18px; }
.br-tools .dim { color: var(--text-3); opacity: .6; }

.jp { position: absolute; inset: 0; padding: 18px 16px; display: flex; flex-direction: column; }
.jp .icon-tile { width: 38px; height: 38px; }
.jp h5 { font-size: 20px; font-weight: 700; line-height: 1.12; letter-spacing: -.025em; }
.jp > p { margin-top: 6px; font-size: 12px; line-height: 1.38; color: var(--text-2); }
.jp-a { opacity: 0; }
.jp-a h5 { margin-top: 14px; }
.inv { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 11px 12px; border-radius: 16px; background: var(--app-card); box-shadow: 0 0 0 .5px var(--line), 0 6px 16px -12px rgba(0, 0, 0, .3); }
.inv > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.inv small { font-size: 11px; color: var(--text-2); }
.inv b { font-size: 14px; font-weight: 600; }
.jb { position: relative; display: grid; place-items: center; height: 38px; margin-top: 8px; border-radius: 999px; font-size: 13px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--line); }
.jb:first-of-type { margin-top: 16px; }
.jb-ink { background: var(--ink); color: var(--on-ink); box-shadow: none; }
.jb-text { box-shadow: none; color: var(--text-2); }
.jb .ntap { left: 50%; top: 50%; }
.jp-b .crumb { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); }
.jp-b .crumb svg { width: 14px; height: 14px; stroke-width: 2.4 !important; }
.jp-b h5 { margin-top: 12px; }
.nm { position: relative; display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: 16px; background: var(--app-card); box-shadow: 0 0 0 .5px var(--line); }
.nm:first-of-type { margin-top: 16px; }
.nm > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.nm b { font-size: 14px; font-weight: 600; }
.nm small { font-size: 11px; color: var(--text-2); }
.nm-tick { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--on-ink); }
.nm-tick svg { width: 12px; height: 12px; stroke-width: 3 !important; }
.nm-tom { box-shadow: 0 0 0 1.5px var(--ink); }
.nm-not { justify-content: center; color: var(--text-2); font-size: 13px; font-weight: 600; box-shadow: none; background: transparent; }
.nm .ntap { left: 40%; top: 50%; }
.jp-b .note { margin-top: auto; padding: 10px 12px; border-radius: 12px; background: var(--app-control); font-size: 11.5px; line-height: 1.35; color: var(--text-2); }
.jp-c { opacity: 0; }
.gp-head { display: flex; align-items: center; gap: 10px; }
.gp-head b { flex: 1; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.gp-bal { display: flex; flex-direction: column; margin-top: 14px; padding: 13px 15px; border-radius: 20px; background: var(--rose); }
.gp-bal span { font-size: 12.5px; font-weight: 600; color: var(--rose-ink); }
.gp-bal b { font-size: 28px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.gp-sec { margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.gp-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; height: 54px; border-bottom: 1px solid var(--line-soft); }
.gp-row .badge { width: 30px; height: 30px; }
.gp-row .badge svg { width: 14px; height: 14px; }
.gp-row > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.gp-row b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-row small { font-size: 11.5px; color: var(--text-2); }
.gp-row em { display: flex; flex-direction: column; align-items: flex-end; font-style: normal; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.gp-row em small { font-weight: 400; }
.jtoast { position: absolute; left: 14px; right: 14px; bottom: 12px; display: flex; align-items: center; gap: 9px; height: 48px; padding: 0 14px; border-radius: 16px; background: var(--ink); color: var(--on-ink); font-size: 12.5px; box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .5); opacity: 0; }
.jtoast svg { width: 16px; height: 16px; stroke-width: 2.6 !important; }
.jtoast b { font-weight: 600; }

.sc-noapp.run * { animation-duration: 18s; animation-timing-function: cubic-bezier(.33, 1, .68, 1); }
.sc-noapp.run .m-link { animation-name: na-m-link; }
.sc-noapp.run .m-tom { animation-name: na-m-tom; }
.sc-noapp.run .m-alex { animation-name: na-m-alex; }
.sc-noapp.run .lp { animation-name: na-lp; }
.sc-noapp.run .ntap-link { animation-name: na-tap28; }
.sc-noapp.run .br { animation-name: na-br; animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
.sc-noapp.run .br-load { animation-name: na-load; animation-timing-function: ease-out; }
.sc-noapp.run .jp-a { animation-name: na-a; }
.sc-noapp.run .jp-b { animation-name: na-b; }
.sc-noapp.run .jp-c { animation-name: na-c; }
.sc-noapp.run .jb .ntap { animation-name: na-tap44; }
.sc-noapp.run .jb-ink { animation-name: na-press44; animation-timing-function: ease; }
.sc-noapp.run .nm .ntap { animation-name: na-tap57; }
.sc-noapp.run .nm-tom { animation-name: na-pick; animation-timing-function: ease; }
.sc-noapp.run .nm-tick { animation-name: na-tick; }
.sc-noapp.run .jtoast { animation-name: na-toast; }

@keyframes na-m-link { 0%, 5% { max-height: 0; margin-top: 0; opacity: 0; transform: translateY(12px); } 8.5%, 88% { max-height: 240px; margin-top: 8px; opacity: 1; transform: none; } 89%, 100% { max-height: 0; margin-top: 0; opacity: 0; } }
@keyframes na-m-tom { 0%, 14% { max-height: 0; margin-top: 0; opacity: 0; transform: translateY(12px); } 16.5%, 88% { max-height: 60px; margin-top: 8px; opacity: 1; transform: none; } 89%, 100% { max-height: 0; margin-top: 0; opacity: 0; } }
@keyframes na-m-alex { 0%, 21% { max-height: 0; margin-top: 0; opacity: 0; transform: translateY(12px); } 23.5%, 88% { max-height: 60px; margin-top: 8px; opacity: 1; transform: none; } 89%, 100% { max-height: 0; margin-top: 0; opacity: 0; } }
@keyframes na-lp { 0%, 28% { transform: none; filter: none; } 29.5% { transform: scale(.97); filter: brightness(.94); } 31.5%, 100% { transform: none; filter: none; } }
@keyframes na-tap28 { 0%, 27.5% { opacity: 0; transform: scale(.4); } 28.5% { opacity: .2; transform: scale(.7); } 31.5%, 100% { opacity: 0; transform: scale(1.6); } }
@keyframes na-br { 0%, 31% { transform: translateY(104%); opacity: 1; } 35.5%, 93% { transform: none; opacity: 1; } 97% { transform: none; opacity: 0; } 97.5%, 100% { transform: translateY(104%); opacity: 0; } }
@keyframes na-load {
  0%, 33% { transform: scaleX(0); opacity: 1; } 36.5% { transform: scaleX(1); opacity: 1; } 37.5% { transform: scaleX(1); opacity: 0; }
  37.6%, 46.5% { transform: scaleX(0); opacity: 1; } 49.5% { transform: scaleX(1); opacity: 1; } 50.5% { transform: scaleX(1); opacity: 0; }
  50.6%, 60.5% { transform: scaleX(0); opacity: 1; } 63.5% { transform: scaleX(1); opacity: 1; } 64.5%, 100% { transform: scaleX(1); opacity: 0; }
}
@keyframes na-a { 0%, 47% { opacity: 1; transform: none; } 50%, 100% { opacity: 0; transform: translateX(-24px); } }
@keyframes na-b { 0%, 47% { opacity: 0; transform: translateX(24px); } 50.5%, 61% { opacity: 1; transform: none; } 64%, 100% { opacity: 0; transform: translateX(-24px); } }
@keyframes na-c { 0%, 61% { opacity: 0; transform: translateX(24px); } 64.5%, 100% { opacity: 1; transform: none; } }
@keyframes na-tap44 { 0%, 43.5% { opacity: 0; transform: scale(.4); } 44.5% { opacity: .22; transform: scale(.7); } 47.5%, 100% { opacity: 0; transform: scale(1.6); } }
@keyframes na-press44 { 0%, 44% { transform: none; } 45% { transform: scale(.97); } 47%, 100% { transform: none; } }
@keyframes na-tap57 { 0%, 56.5% { opacity: 0; transform: scale(.4); } 57.5% { opacity: .2; transform: scale(.7); } 60.5%, 100% { opacity: 0; transform: scale(1.6); } }
@keyframes na-pick { 0%, 57% { box-shadow: 0 0 0 .5px var(--line); } 58.5%, 100% { box-shadow: 0 0 0 1.5px var(--ink); } }
@keyframes na-tick { 0%, 57.5% { opacity: 0; transform: scale(.4); } 59.5% { opacity: 1; transform: scale(1.12); } 61%, 100% { opacity: 1; transform: none; } }
@keyframes na-toast { 0%, 65% { opacity: 0; transform: translateY(14px) scale(.96); } 68.5%, 82% { opacity: 1; transform: none; } 85.5%, 100% { opacity: 0; transform: translateY(6px); } }

/* Scene 5: the receipt, on four phones at once. Picks, in percent of the loop: Bea 10 and 13, Sam 24 and 27,
   Tom 38 and 41, Alex 52 and 55; done at 14, 28, 42 and 56; added at 60. Each phone highlights its own taps,
   and every pick lands on every receipt at the same moment. */

.rx { position: absolute; inset: 52px 14px 14px; display: flex; flex-direction: column; }
.rx-title { margin-top: 10px; font-size: 21px; font-weight: 700; letter-spacing: -.025em; }
.rx-sub { margin-top: 2px; font-size: 12px; color: var(--text-2); }
.rx-status { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; height: 32px; }
.rx-faces { display: flex; gap: 4px; }
.ck { position: absolute; right: -3px; bottom: -3px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px var(--app-canvas); }
.ck::after { content: ""; position: absolute; left: 5px; top: 2.6px; width: 3px; height: 6px; border: solid var(--on-ink); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.roll { position: relative; width: 108px; height: 18px; }
.roll b { position: absolute; right: 0; top: 0; font-size: 12.5px; font-weight: 600; white-space: nowrap; opacity: 0; }
.roll .s4 { opacity: 1; }
.rcpt { margin-top: 10px; padding: 11px 12px 10px; border-radius: 18px; background: var(--app-card); box-shadow: 0 0 0 .5px var(--line), 0 10px 22px -14px rgba(0, 0, 0, .25); }
.rcpt-head { display: flex; justify-content: space-between; margin-bottom: 2px; font: 600 9.5px/1.4 var(--ui); letter-spacing: .1em; color: var(--text-3); }
.it { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto 50px; grid-template-areas: "name claim price"; align-items: center; gap: 8px; height: 46px; margin: 0 -6px; padding: 0 6px; border-radius: 10px; }
.it-name { grid-area: name; display: flex; flex-direction: column; min-width: 0; font-size: 13px; font-weight: 500; line-height: 1.25; white-space: nowrap; }
.it-name small { font-size: 10.5px; font-weight: 400; color: var(--text-2); }
.it-price { grid-area: price; justify-self: end; font-size: 13px; font-variant-numeric: tabular-nums; }
.claim { grid-area: claim; position: relative; display: flex; flex-direction: row-reverse; min-width: 22px; height: 22px; }
.claim .av { box-shadow: 0 0 0 2px var(--app-card); }
.claim .av + .av { margin-right: -6px; }
.empty { position: absolute; right: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; border: 1.5px dashed var(--text-3); opacity: 0; }
.tap { position: absolute; right: 64px; top: 50%; width: 38px; height: 38px; margin-top: -19px; border-radius: 50%; background: var(--ink); opacity: 0; pointer-events: none; }
.rcpt-total { display: flex; justify-content: space-between; margin-top: 4px; padding-top: 8px; border-top: 1.5px dashed var(--line); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.share { position: relative; height: 42px; margin-top: 12px; }
.share span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 999px; background: var(--app-control); font-size: 13px; color: var(--text-2); }
.share b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.share-a { opacity: 0; }
.rx-added {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  height: 46px; border-radius: 999px;
  background: var(--ink); color: var(--on-ink);
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
.rx-added svg { width: 15px; height: 15px; stroke-width: 2.6 !important; }

.sc-rx.run * { animation-duration: 11s; }
.sc-rx.run .c14 { animation-name: on14; } .sc-rx.run .c28 { animation-name: on28; } .sc-rx.run .c42 { animation-name: on42; } .sc-rx.run .c56 { animation-name: on56; }
.sc-rx.run .o14 { animation-name: off14; } .sc-rx.run .o28 { animation-name: off28; } .sc-rx.run .o42 { animation-name: off42; } .sc-rx.run .o56 { animation-name: off56; }
.sc-rx.run .f10 { animation-name: on10; } .sc-rx.run .f13 { animation-name: on13; } .sc-rx.run .f24 { animation-name: on24; } .sc-rx.run .f27 { animation-name: on27; }
.sc-rx.run .f38 { animation-name: on38; } .sc-rx.run .f41 { animation-name: on41; } .sc-rx.run .f52 { animation-name: on52; } .sc-rx.run .f55 { animation-name: on55; }
.sc-rx.run .e10 { animation-name: empty10; } .sc-rx.run .e13 { animation-name: empty13; } .sc-rx.run .e24 { animation-name: empty24; } .sc-rx.run .e38 { animation-name: empty38; }
.sc-rx.run .t10 { animation-name: tap10; } .sc-rx.run .t13 { animation-name: tap13; } .sc-rx.run .t24 { animation-name: tap24; } .sc-rx.run .t27 { animation-name: tap27; }
.sc-rx.run .t38 { animation-name: tap38; } .sc-rx.run .t41 { animation-name: tap41; } .sc-rx.run .t52 { animation-name: tap52; } .sc-rx.run .t55 { animation-name: tap55; }
.sc-rx.run .me-10 { animation-name: me10; } .sc-rx.run .me-13 { animation-name: me13; } .sc-rx.run .me-24 { animation-name: me24; } .sc-rx.run .me-27 { animation-name: me27; }
.sc-rx.run .me-38 { animation-name: me38; } .sc-rx.run .me-41 { animation-name: me41; } .sc-rx.run .me-52 { animation-name: me52; } .sc-rx.run .me-55 { animation-name: me55; }
.sc-rx.run .s0 { animation-name: roll0; } .sc-rx.run .s1 { animation-name: roll1; } .sc-rx.run .s2 { animation-name: roll2; } .sc-rx.run .s3 { animation-name: roll3; } .sc-rx.run .s4 { animation-name: roll4; }
.sc-rx.run .rx-added { animation-name: added; }

@keyframes on10 { 0%, 9.5% { opacity: 0; transform: scale(.3); } 11.5% { opacity: 1; transform: scale(1.15); } 13%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes on13 { 0%, 12.5% { opacity: 0; transform: scale(.3); } 14.5% { opacity: 1; transform: scale(1.15); } 16%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes on14 { 0%, 13.5% { opacity: 0; transform: scale(.3); } 15.5% { opacity: 1; transform: scale(1.15); } 17%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes on24 { 0%, 23.5% { opacity: 0; transform: scale(.3); } 25.5% { opacity: 1; transform: scale(1.15); } 27%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes on27 { 0%, 26.5% { opacity: 0; transform: scale(.3); } 28.5% { opacity: 1; transform: scale(1.15); } 30%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes on28 { 0%, 27.5% { opacity: 0; transform: scale(.3); } 29.5% { opacity: 1; transform: scale(1.15); } 31%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes on38 { 0%, 37.5% { opacity: 0; transform: scale(.3); } 39.5% { opacity: 1; transform: scale(1.15); } 41%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes on41 { 0%, 40.5% { opacity: 0; transform: scale(.3); } 42.5% { opacity: 1; transform: scale(1.15); } 44%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes on42 { 0%, 41.5% { opacity: 0; transform: scale(.3); } 43.5% { opacity: 1; transform: scale(1.15); } 45%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes on52 { 0%, 51.5% { opacity: 0; transform: scale(.3); } 53.5% { opacity: 1; transform: scale(1.15); } 55%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes on55 { 0%, 54.5% { opacity: 0; transform: scale(.3); } 56.5% { opacity: 1; transform: scale(1.15); } 58%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes on56 { 0%, 55.5% { opacity: 0; transform: scale(.3); } 57.5% { opacity: 1; transform: scale(1.15); } 59%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes off14 { 0%, 13.5% { opacity: 1; } 15%, 96% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes off28 { 0%, 27.5% { opacity: 1; } 29%, 96% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes off42 { 0%, 41.5% { opacity: 1; } 43%, 96% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes off56 { 0%, 55.5% { opacity: 1; } 57%, 96% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes empty10 { 0%, 10% { opacity: 1; } 11%, 96% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes empty13 { 0%, 13% { opacity: 1; } 14%, 96% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes empty24 { 0%, 24% { opacity: 1; } 25%, 96% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes empty38 { 0%, 38% { opacity: 1; } 39%, 96% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes tap10 { 0%, 8.5% { opacity: 0; transform: scale(.4); } 9.5% { opacity: .22; transform: scale(.7); } 12.5%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes tap13 { 0%, 11.5% { opacity: 0; transform: scale(.4); } 12.5% { opacity: .22; transform: scale(.7); } 15.5%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes tap24 { 0%, 22.5% { opacity: 0; transform: scale(.4); } 23.5% { opacity: .22; transform: scale(.7); } 26.5%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes tap27 { 0%, 25.5% { opacity: 0; transform: scale(.4); } 26.5% { opacity: .22; transform: scale(.7); } 29.5%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes tap38 { 0%, 36.5% { opacity: 0; transform: scale(.4); } 37.5% { opacity: .22; transform: scale(.7); } 40.5%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes tap41 { 0%, 39.5% { opacity: 0; transform: scale(.4); } 40.5% { opacity: .22; transform: scale(.7); } 43.5%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes tap52 { 0%, 50.5% { opacity: 0; transform: scale(.4); } 51.5% { opacity: .22; transform: scale(.7); } 54.5%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes tap55 { 0%, 53.5% { opacity: 0; transform: scale(.4); } 54.5% { opacity: .22; transform: scale(.7); } 57.5%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes me10 { 0%, 9% { background: transparent; } 10.5%, 16% { background: var(--amber); } 22%, 100% { background: transparent; } }
@keyframes me13 { 0%, 12% { background: transparent; } 13.5%, 19% { background: var(--amber); } 25%, 100% { background: transparent; } }
@keyframes me24 { 0%, 23% { background: transparent; } 24.5%, 30% { background: var(--amber); } 36%, 100% { background: transparent; } }
@keyframes me27 { 0%, 26% { background: transparent; } 27.5%, 33% { background: var(--amber); } 39%, 100% { background: transparent; } }
@keyframes me38 { 0%, 37% { background: transparent; } 38.5%, 44% { background: var(--amber); } 50%, 100% { background: transparent; } }
@keyframes me41 { 0%, 40% { background: transparent; } 41.5%, 47% { background: var(--amber); } 53%, 100% { background: transparent; } }
@keyframes me52 { 0%, 51% { background: transparent; } 52.5%, 58% { background: var(--amber); } 64%, 100% { background: transparent; } }
@keyframes me55 { 0%, 54% { background: transparent; } 55.5%, 61% { background: var(--amber); } 67%, 100% { background: transparent; } }
@keyframes roll0 { 0%, 13.5% { opacity: 1; transform: none; } 15%, 96% { opacity: 0; transform: translateY(-8px); } 98%, 100% { opacity: 1; transform: none; } }
@keyframes roll1 { 0%, 13.5% { opacity: 0; transform: translateY(8px); } 15%, 27.5% { opacity: 1; transform: none; } 29%, 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes roll2 { 0%, 27.5% { opacity: 0; transform: translateY(8px); } 29%, 41.5% { opacity: 1; transform: none; } 43%, 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes roll3 { 0%, 41.5% { opacity: 0; transform: translateY(8px); } 43%, 55.5% { opacity: 1; transform: none; } 57%, 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes roll4 { 0%, 55.5% { opacity: 0; transform: translateY(8px); } 57%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes added { 0%, 59% { opacity: 0; transform: translateY(16px); } 63%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(8px); } }

/* Small phones for the receipt step on narrow screens: the same receipt, simpler and set larger for its size. */
.quad-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; width: 100%; max-width: 380px; margin: 0 auto; }
.qfig { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
.qfig figcaption { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.qfig figcaption small { font-size: 13.5px; font-weight: 500; color: var(--text-3); }
.phone.mini { width: 100%; max-width: 180px; height: auto; aspect-ratio: 300 / 620; padding: 4.5px; border-width: 1.5px; border-radius: 30px; zoom: 1 !important; }
.phone.mini::before, .phone.mini::after { display: none; }
.mini .screen { border-radius: 25px; }
.mini .sb { height: 26px; }
.mini .sb-time { left: 15px; top: 7px; font-size: 9px; }
.mini .sb-island { top: 5px; width: 42px; height: 13px; border-radius: 7px; }
.mini .sb-icons { right: 11px; top: 8px; transform: scale(.6); transform-origin: 100% 0; }
.mini .rx { inset: 28px 7px 7px; }
.mini .ap-nav, .mini .rcpt-head, .mini .it-name small, .mini .rx-tap, .mini .add-w { display: none; }
.mini .rx-title { margin-top: 2px; font-size: 12.5px; letter-spacing: -.015em; }
.mini .rx-sub { margin-top: 1px; font-size: 9.5px; }
.mini .rx-status { height: 22px; margin-top: 6px; }
.mini .rx-faces { gap: 3px; }
.mini .rx-faces .av { width: 16px; height: 16px; font-size: 6px; }
.mini .ck { width: 7px; height: 7px; right: -4px; bottom: -3px; box-shadow: 0 0 0 1.5px var(--app-canvas); }
.mini .ck::after { left: 2.3px; top: 1.1px; width: 1.6px; height: 3.2px; border-width: 0 1px 1px 0; }
.mini .roll { width: 62px; height: 13px; }
.mini .roll b { font-size: 9px; }
.mini .rcpt { margin: 6px 0 6px; padding: 4px 6px 6px; border-radius: 12px; }
.mini .it { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name price" "claim claim"; row-gap: 3px; column-gap: 4px; height: 38px; margin: 0 -4px; padding: 0 4px; border-radius: 8px; align-content: center; }
.mini .it-name { font-size: 9.5px; overflow: hidden; text-overflow: ellipsis; display: block; }
.mini .it-price { font-size: 9.5px; }
.mini .claim { justify-self: start; min-width: 14px; height: 14px; }
.mini .claim .av { width: 14px; height: 14px; font-size: 6px; box-shadow: 0 0 0 1.5px var(--app-card); }
.mini .claim .av + .av { margin-right: -4px; }
.mini .empty { width: 14px; height: 14px; border-width: 1px; left: 0; right: auto; }
.mini .tap { right: auto; left: 30%; width: 28px; height: 28px; margin-top: -14px; }
.mini .rcpt-total { margin-top: 2px; padding-top: 5px; font-size: 9.5px; border-top-width: 1px; }
.mini .share { height: 24px; margin-top: auto; }
.mini .share span { font-size: 9.5px; gap: 4px; }
.mini .rx-added { height: 24px; font-size: 9px; gap: 4px; }
.mini .rx-added svg { width: 10px; height: 10px; }

/* Sections after the story */

.section { padding-block: clamp(112px, 13vw, 184px) 0; scroll-margin-top: calc(40px - clamp(112px, 13vw, 184px)); }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 24px 64px; }
.section h2 {
  max-width: 15ch;
  font-size: clamp(36px, 4.2vw, 58px);
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -.045em;
}
.section-lede { max-width: 36ch; font-size: clamp(17.5px, 1.4vw, 19.5px); line-height: 1.5; color: var(--text-2); }
.section .kicker { margin-bottom: 22px; }
.not-found .section-lede { margin-top: 20px; }

/* Cards */
.cards-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 48px 64px; margin-top: 64px; }
.wallet {
  position: relative; overflow: hidden;
  height: 300px; border-radius: 28px;
  background: var(--surface); box-shadow: var(--shadow-card);
}
.wallet .cm {
  --w: 148px; --r: 0deg;
  position: absolute; left: 50%; bottom: 112px; margin-left: calc(var(--w) / -2);
  transform-origin: 50% 300%; transform: rotate(var(--r));
  box-shadow: 0 0 0 3px var(--surface), 0 10px 24px -14px rgba(0, 0, 0, .45), inset 0 0 0 .5px var(--cm-edge);
  transition: transform .8s var(--glide);
}
.wallet .cm:nth-child(1) { --r: -24deg; } .wallet .cm:nth-child(2) { --r: -18deg; } .wallet .cm:nth-child(3) { --r: -12deg; }
.wallet .cm:nth-child(4) { --r: -6deg; } .wallet .cm:nth-child(6) { --r: 6deg; } .wallet .cm:nth-child(7) { --r: 12deg; }
.wallet .cm:nth-child(8) { --r: 18deg; } .wallet .cm:nth-child(9) { --r: 24deg; }
.wallet:hover .cm { transform: rotate(calc(var(--r) * 1.15)) translateY(-6px); }
.facts { display: grid; gap: 0; }
.facts li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-top: 1px solid var(--hair); }
.facts li:last-child { border-bottom: 1px solid var(--hair); }
.facts b { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.facts span { font-size: 16px; line-height: 1.5; color: var(--text-2); }

/* Groups */
.types { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 56px; }
.types li { display: flex; flex-direction: column; padding: 22px 22px 26px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-card); transition: transform .5s var(--glide), box-shadow .5s var(--glide); }
.types li:hover { transform: translateY(-3px); }
.types i { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 26px; border-radius: 12px; }
.types i svg { width: 18px; height: 18px; }
.types b { display: block; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.types span { display: block; margin-top: 6px; font-size: 15.5px; line-height: 1.45; color: var(--text-2); }
.t-blue { background: var(--blue); color: var(--blue-ink); }
.t-orange { background: var(--orange); color: var(--orange-ink); }
.t-rose { background: var(--rose); color: var(--rose-ink); }
.t-amber { background: var(--amber); color: var(--amber-ink); box-shadow: inset 0 0 0 1px var(--amber-line); }
.t-mint { background: var(--mint); color: var(--mint-ink); }

/* Compare: a switch, then plain rows on a white card. Splitwise's answer in grey, Halves' in ink. */
.cmp { position: relative; margin-top: 48px; padding: clamp(20px, 3vw, 36px) clamp(20px, 3.4vw, 44px) clamp(10px, 1.6vw, 20px); border-radius: 26px; background: var(--surface); box-shadow: var(--shadow-card); }
.cmp input { position: absolute; opacity: 0; pointer-events: none; }
.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--app-control); }
.seg label {
  padding: 8px 18px; border-radius: 999px; cursor: pointer;
  font-size: 14.5px; font-weight: 600; color: var(--text-2);
  transition: background-color .25s, color .25s, box-shadow .25s;
}
#plan-free:checked ~ .seg label[for="plan-free"], #plan-paid:checked ~ .seg label[for="plan-paid"] {
  background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 .5px var(--line);
}
#plan-free:focus-visible ~ .seg label[for="plan-free"], #plan-paid:focus-visible ~ .seg label[for="plan-paid"] { outline: 2px solid var(--ink); outline-offset: 2px; }
#plan-free:checked ~ table .p, #plan-paid:checked ~ table .f { display: none; }

.ctable { width: 100%; margin-top: 28px; border-collapse: collapse; font-size: 16.5px; }
.ctable th, .ctable td { padding: 16px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft); font-weight: 400; }
.ctable tbody tr:last-child > * { border-bottom: 0; }
.ctable thead > tr > * { padding-top: 0; padding-bottom: 14px; border-bottom-color: var(--hair-strong); font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.ctable thead th.h { color: var(--ink); }
.ctable tbody th { padding-right: 24px; }
.ctable td { width: 25%; padding-right: 16px; color: var(--text-3); }
.ctable td.h { color: var(--ink); font-weight: 600; }
.ctable small { display: block; font-size: 13.5px; font-weight: 400; color: var(--text-3); }
.ctable td.h small { color: var(--text-2); }

.import { max-width: 860px; margin-top: 36px; font-size: 17.5px; color: var(--text-2); }
.import b { color: var(--ink); font-weight: 600; }
.fine { max-width: 860px; margin-top: 16px; font-size: 13px; line-height: 1.55; color: var(--text-3); }

/* Questions */
.faq { margin-top: 48px; padding: 6px clamp(20px, 3.4vw, 40px); border-radius: 26px; background: var(--surface); box-shadow: var(--shadow-card); }
.faq details + details { border-top: 1px solid var(--line-soft); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font-size: 18.5px; font-weight: 600; letter-spacing: -.012em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 20px; height: 20px; color: var(--text-3); transition: transform .4s var(--glide); }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq p { max-width: 62ch; padding-bottom: 24px; font-size: 16.5px; color: var(--text-2); }

/* Download */
.get { padding-block: clamp(128px, 15vw, 210px); text-align: center; }
.get .icon-tile { width: 64px; height: 64px; margin: 0 auto 32px; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .18)); }
.get h2 { font-size: clamp(42px, 5.6vw, 76px); font-weight: 650; line-height: 1; letter-spacing: -.05em; }
.get p { margin: 18px 0 36px; font-size: 19px; color: var(--text-2); }
.get .stores { justify-content: center; }

.foot { padding-block: 40px 56px; border-top: 1px solid var(--hair); font-size: 14px; color: var(--text-3); }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.foot a { text-decoration: none; color: var(--text-2); }
.foot .brand { color: var(--ink); }
.foot a:hover { color: var(--ink); }
.foot-legal { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px 20px; padding-top: 20px; border-top: 1px solid var(--hair); }

/* Phones and small tablets: no sticky stage. Each step gets its own phone under its words (the script copies
   the scenes into the slots), and the receipt step gets four small phones. Without the script the one phone
   sits after the story. */

@media (max-width: 959px) {
  .story { display: block; }
  .block, .hero { min-height: 0; }
  .hero { padding-block: 40px 24px; }
  .step { padding-block: 80px 8px; }
  .story-phone { display: flex; justify-content: center; padding-top: 56px; pointer-events: auto; }
  .stage { position: static; height: auto; }
  .mainp { position: static; width: auto; }
  .mainp .phone { transform: none; margin-block: 0; }
  .js .story-phone { display: none; }
  .js .slot { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 44px; }
  .slot > .phone { zoom: .9; }
  .slot-cap { font-size: 13px; font-weight: 500; color: var(--text-3); }
  .section-head, .cards-row { grid-template-columns: 1fr; }
  .types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .types li:last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  :root { --nav-h: 60px; }
  body { font-size: 17px; }
  .nav-in { gap: 12px; }
  .announce { margin-bottom: 28px; font-size: 13.5px; }
  .announce .wide { display: none; }
  h1 { font-size: clamp(46px, 13.4vw, 62px); }
  .lede { margin: 22px 0 32px; }
  .store { height: 54px; padding: 0 20px 0 16px; }
  .store span { font-size: 16.5px; }
  .hero-cards { margin-top: 36px; font-size: 14.5px; }
  .wallet { height: 220px; border-radius: 22px; }
  .wallet .cm { --w: 96px; bottom: 76px; }
  .wallet .cm em { display: none; }
  .facts li { grid-template-columns: 1fr; gap: 4px; }
  .types { grid-template-columns: 1fr; gap: 10px; margin-top: 40px; }
  .types li { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 14px; padding: 18px; }
  .types i { margin: 0; }
  .types li > div { flex: 1; min-width: 0; }
  .types span { margin-top: 2px; font-size: 15px; }
  .cmp { padding: 18px 16px 6px; border-radius: 22px; }
  .ctable { font-size: 14.5px; }
  .ctable thead th { font-size: 12.5px; }
  .ctable tbody th { padding-right: 10px; width: 42%; }
  .ctable td { width: 29%; padding-right: 8px; }
  .ctable small { font-size: 12px; }
  .seg label { padding: 8px 14px; font-size: 14px; }
  .faq { padding: 2px 18px; border-radius: 22px; }
  .faq summary { font-size: 16.5px; }
  .faq p { font-size: 15.5px; }
  .get .stores { flex-direction: column; align-items: center; }
  .foot-in { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 380px) {
  .slot > .phone { zoom: .82; }
  .quad-grid { gap: 20px 10px; }
}

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