/* ==========================================================================
   Fairsies on the app page kit: its tokens, the torn-bill hero, and the
   chapters' own pictures. Everything here is made of the app's own material:
   the Banknote palette, SF Pro at semibold with tight tracking, warm-white
   slips with scalloped tears, perforations instead of hairlines, sand initials.
   The demo bill is the app's own: Trattoria Verdi, £104.50 for four
   (ScreenshotBill.swift), split the way the app splits it.
   ========================================================================== */

body.k-page.k-fairsies {
  --k-bg: #F4EFE4;            /* Theme.cream */
  --k-bg-2: #EDE6D4;          /* Theme.sand */
  --k-ink: #1B2430;           /* Theme.ink */
  --k-ink-2: #5E5D57;         /* Theme.textSecondary, a shade deeper for small type on cream */
  --k-accent: #22395C;        /* Theme.brand, the icon's ink blue */
  --k-accent-ink: #F4EFE4;
  --k-card: #FFFDF7;          /* Theme.card */
  --k-line: rgba(27, 36, 48, .12);
  --k-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", system-ui, sans-serif;
  --k-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --fs-brand: #22395C;
  --fs-deep: #1A2D49;
  --fs-quiet: #88867C;
  --fs-sand-ink: #5A5344;
  --fs-pos: #146C46;
  --fs-neg: #A63E28;
  --fs-sep: #E4DCC8;
  --fs-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  background: var(--k-bg);
}

/* The app's type: SF Pro, semibold, tight. Its buttons are rounded rectangles, not pills. */
.k-fairsies main :where(h1, h2, h3) { font-weight: 600; letter-spacing: -0.032em; }
.k-fairsies .k-h1 { line-height: 1.0; }
.k-fairsies .k-btn { border-radius: 14px; }
.k-fairsies .k-btn-primary { background: var(--fs-brand); color: var(--k-accent-ink); }
.k-fairsies .k-btn-quiet { box-shadow: inset 0 0 0 1.5px rgba(34, 57, 92, .28); color: var(--fs-brand); }
.k-fairsies .k-btn svg { width: 18px; height: 18px; flex: none; }
.k-fairsies .k-eyebrow { color: var(--fs-quiet); letter-spacing: .12em; }
.k-fairsies .k-step-n::before { background: var(--fs-brand); }
.k-fairsies .k-pips i.is-on { background: var(--fs-brand); }

/* ---------- The hero ---------- */
.fs-hero { overflow-x: clip; }
.fs-hero-pin { width: 100%; }
.fs-hero .k-h1 { font-size: clamp(44px, min(4.7vw, 8.4svh), 76px); }
.fs-price { font-size: 17px; color: var(--k-ink); font-weight: 500; max-width: 34ch; }
.fs-hero .k-meta { max-width: 40ch; }
.fs-hero .k-actions { flex-wrap: nowrap; }
@media (max-width: 1179px) and (min-width: 900px) {
  .fs-hero .k-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fs-hero .k-actions { flex-wrap: wrap; }
}
@media (max-width: 899px) {
  .fs-hero .k-h1 { font-size: clamp(38px, 10.4vw, 48px); }
  .fs-hero .k-lockup img { width: 48px; height: 48px; border-radius: 11px; }
  .fs-hero .k-hero-head > * + * { margin-top: 18px; }
  .fs-hero .k-hero-grid { gap: 24px; }
  .fs-hero .k-actions { flex-wrap: wrap; }
}
/* Pinned for about a screen in any desktop window tall enough to hold the hero below the
   nav (a 1366x768 laptop's browser included), while the even split becomes the fair one. */
@media (min-width: 900px) and (min-height: 640px) {
  html.k-motion .fs-hero { display: block; min-height: 0; height: 195svh; padding: 0; }
  html.k-motion .fs-hero-pin { position: sticky; top: 0; height: 100svh; display: flex; align-items: center;
    padding: 100px 0 36px; box-sizing: border-box; }
}
@media (min-width: 900px) { .fs-hero .k-hero-copy > * + *, .fs-hero .k-hero-head > * + *, .fs-hero .k-hero-more > * + * { margin-top: 18px; } }
@media (min-width: 900px) and (max-height: 819px) {
  .fs-hero .k-hero-copy > * + *, .fs-hero .k-hero-head > * + *, .fs-hero .k-hero-more > * + * { margin-top: 16px; }
  .fs-hero .k-lead { font-size: 18px; }
  html.k-motion .fs-hero-pin { padding: 92px 0 24px; }
  .fs-hero .fs-stage { max-height: calc(100svh - 120px); }
}
.fs-hero .k-h1 { text-wrap: balance; }

/* The showpiece: the Trattoria Verdi bill (ScreenshotBill.swift) as four slips hanging from the
   slot on the icon's ink blue. At rest they are the even split, £26.12 or £26.13 each (the app's
   own evenly(), spare pennies in ID order); the scroll re-prints them by who had what, each as
   long as that person's share, and the app's "An even split would've cost you £4.99 more." */
.fs-show { position: relative; }
.fs-stage { position: relative; width: 100%; aspect-ratio: 1 / 0.9; max-height: calc(100svh - 140px);
  container: fsstage / size; border-radius: 30px; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(255, 255, 255, .10), transparent 60%),
    linear-gradient(180deg, #284369 0%, var(--fs-brand) 38%, var(--fs-deep) 100%);
  box-shadow: 0 50px 90px -40px rgba(27, 36, 48, .55), 0 18px 40px -22px rgba(27, 36, 48, .45), inset 0 0 0 1px rgba(255,255,255,.06); }
@media (min-width: 900px) { .fs-stage { min-height: 430px; aspect-ratio: 1 / 1; } }
@media (max-width: 899px) { .fs-stage { aspect-ratio: 1 / 0.94; max-height: 62svh; border-radius: 24px; } .fs-hero .k-hero-grid { grid-template-columns: minmax(0, 1fr); } }
/* the slot the paper comes out of */
.fs-slot { position: absolute; left: 4cqw; right: 4cqw; top: 0; height: 2.1cqh; border-radius: 0 0 10px 10px; z-index: 5;
  background: linear-gradient(180deg, #0E1726, #172741); box-shadow: 0 6px 14px rgba(0,0,0,.35), inset 0 -1px 0 rgba(255,255,255,.08); }

/* A slip: the paper (scaled to its length), its torn foot and its share (moved to the length),
   so nothing but transforms change as it grows or shrinks. --l is its length, 100 = Sam's £35.95. */
.fs-slips { position: absolute; inset: 0; z-index: 3; }
.fs-slip { --l: var(--fair); --u: 0.8cqh; position: absolute; top: 0; width: 21.6cqw; height: calc(100 * var(--u));
  filter: drop-shadow(0 1.2cqh 1.4cqh rgba(5, 12, 24, .38)); }
.fs-slip:nth-child(1) { left: 3.4cqw; }
.fs-slip:nth-child(2) { left: 27.4cqw; }
.fs-slip:nth-child(3) { left: 51.4cqw; }
.fs-slip:nth-child(4) { left: 75.4cqw; }
.fs-slip-bg { position: absolute; left: 0; right: 0; top: 0; height: calc(100 * var(--u) + 4cqh); background: #FFFDF7;
  transform: translateY(calc(var(--l) * var(--u) - 100%));
  -webkit-mask: radial-gradient(circle at 50% 100%, transparent 0.7cqh, #000 0.75cqh) bottom / 2.16cqw 1.5cqh repeat-x,
                linear-gradient(#000, #000) top / 100% calc(100% - 1.45cqh) no-repeat;
          mask: radial-gradient(circle at 50% 100%, transparent 0.7cqh, #000 0.75cqh) bottom / 2.16cqw 1.5cqh repeat-x,
                linear-gradient(#000, #000) top / 100% calc(100% - 1.45cqh) no-repeat; }
.fs-slip > p, .fs-slip > ul, .fs-s-foot { position: absolute; left: 1.6cqw; right: 1.6cqw; margin: 0; color: var(--k-ink); font: 400 1.85cqh/1.25 var(--k-text); }
.fs-s-head { top: 4cqh; display: flex; align-items: center; gap: .8cqw; padding-bottom: 1.3cqh; border-bottom: 0.25cqh dashed #D9D1BE;
  font: 600 2.15cqh/1 var(--k-text) !important; letter-spacing: -0.01em; }
.fs-av { width: 3.7cqh; height: 3.7cqh; border-radius: 50%; display: grid; place-items: center; flex: none;
  font: 700 1.6cqh/1 var(--k-text); background: #EDE6D4; color: var(--fs-sand-ink); }
.fs-av.is-you { background: var(--fs-brand); color: #F4EFE4; }
.fs-s-even { top: 11.2cqh; display: grid; grid-template-columns: 1fr auto; column-gap: .5cqw; }
.fs-s-even > span { grid-column: 1 / -1; }
.fs-s-even em { font-style: normal; color: var(--fs-quiet); font-size: 1.6cqh; white-space: nowrap; }
.fs-s-even b { grid-column: 2; font-weight: 600; font-variant-numeric: tabular-nums; font-size: 1.75cqh; }
.fs-s-lines { top: 11.2cqh; list-style: none; padding: 0; display: grid; gap: 1.05cqh; }
.fs-s-lines li { display: grid; grid-template-columns: 1fr auto; column-gap: .5cqw; }
.fs-s-lines li > span { grid-column: 1 / -1; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-s-lines em { font-style: normal; color: var(--fs-quiet); font-size: 1.6cqh; white-space: nowrap; }
.fs-s-lines li > b { grid-column: 2; font-weight: 600; font-variant-numeric: tabular-nums; font-size: 1.75cqh; }
.fs-s-foot { top: 0; transform: translateY(calc(var(--l) * var(--u) - 100% - 1.8cqh)); border-top: 0.25cqh dashed #D9D1BE; padding-top: 1.1cqh; }
.fs-s-who { display: none; }
.fs-s-total { display: flex; justify-content: space-between; align-items: baseline; gap: .6cqw; margin: 0; }
.fs-s-total span { font-size: 1.45cqh; color: var(--fs-quiet); white-space: nowrap; }
.fs-s-total b { position: relative; display: block; height: 1.15em; overflow: hidden; font: 600 3.1cqh/1.1 var(--k-text); letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums; }
.fs-s-total b i { display: block; font-style: normal; }
.fs-s-total b i:first-child { display: none; }

/* the line the app prints under the shares: green is spent only on a bill that adds up */
.fs-tally { position: absolute; left: 3.4cqw; right: 3.4cqw; bottom: 3.2cqh; z-index: 4; display: flex; justify-content: space-between;
  align-items: center; gap: 2cqw; background: #F4EFE4; border-radius: 1.6cqh; padding: 1.5cqh 2.2cqw;
  font: 500 1.95cqh/1.2 var(--k-text); color: var(--fs-quiet); box-shadow: 0 1cqh 2.4cqh rgba(5,12,24,.3); }
.fs-tally > span { position: relative; display: block; height: 1.2em; overflow: hidden; flex: 1; }
.fs-tally > span i { display: block; font-style: normal; white-space: nowrap; color: var(--k-ink); }
.fs-tally > span i:first-child { display: none; }
.fs-tally b { color: var(--fs-pos); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* A phone's composition: four slips with the initial, the name and the share at each foot,
   so they read even when the stage's top has scrolled under the nav */
@container fsstage (max-width: 560px) {
  .fs-slip { width: 21.4cqw; --u: 0.76cqh; }
  .fs-slip:nth-child(1) { left: 2.6cqw; } .fs-slip:nth-child(2) { left: 26.6cqw; }
  .fs-slip:nth-child(3) { left: 50.6cqw; } .fs-slip:nth-child(4) { left: 74.6cqw; }
  .fs-s-head, .fs-s-lines { display: none !important; }
  .fs-s-even { top: 7cqh; left: 1.2cqw; right: 1.2cqw; display: block; text-align: center; }
  .fs-s-even > span, .fs-s-even b { display: none; }
  .fs-s-even em { white-space: normal; font-size: max(11px, 3cqh); line-height: 1.3; }
  .fs-s-foot { border: 0; padding: 0; text-align: center; transform: translateY(calc(var(--l) * var(--u) - 100% - 2.6cqh)); }
  .fs-s-who { display: grid; justify-items: center; gap: .9cqh; margin: 0 0 1.2cqh; font: 600 max(12px, 3.3cqh)/1.1 var(--k-text); color: var(--k-ink); }
  .fs-s-who .fs-av { width: max(22px, 6.6cqh); height: max(22px, 6.6cqh); font-size: max(11px, 2.9cqh); }
  .fs-s-total { justify-content: center; border-top: 0.35cqh dashed #D9D1BE; padding-top: 1.3cqh; }
  .fs-s-total span { display: none; }
  .fs-s-total b { font-size: max(15px, 4.4cqh); }
  .fs-tally { font-size: max(12px, 3.2cqh); padding: 2cqh 3.6cqw; bottom: 3cqh; left: 2.6cqw; right: 2.6cqw; border-radius: 2.4cqh; }
  .fs-tally { flex-direction: column; justify-content: center; gap: .6cqh; text-align: center; }
  .fs-tally > span { flex: none; width: 100%; font-size: max(12px, 3.2cqh); }
}

/* Motion: without it (or without JavaScript) the slips rest split by who had what, the
   finished state. With it they start as the even split and the scroll re-prints them. */
html.k-motion .fs-slip { --l: var(--even); }
html.k-motion .fs-s-lines li { opacity: 0; }
html:not(.k-motion) .fs-s-even { display: none; }
html.k-motion .fs-s-total b i:first-child, html.k-motion .fs-tally > span i:first-child { display: block; }

/* The restaurant's paper bill (beside the phone, and in the viewfinder), the paper drawn behind its type */
.fs-paper { position: relative; color: #23262B; font: 500 2.55cqh/1.25 var(--fs-mono); padding: 6.2cqh 3.2cqw 4.4cqh; isolation: isolate; }
.fs-paper::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #FFFEFA;
  -webkit-mask: radial-gradient(circle at 50% 100%, transparent 0.75cqh, #000 0.8cqh) bottom / 2.2cqw 1.6cqh repeat-x,
                linear-gradient(#000, #000) top / 100% calc(100% - 1.55cqh) no-repeat;
          mask: radial-gradient(circle at 50% 100%, transparent 0.75cqh, #000 0.8cqh) bottom / 2.2cqw 1.6cqh repeat-x,
                linear-gradient(#000, #000) top / 100% calc(100% - 1.55cqh) no-repeat; }
.fs-paper p, .fs-paper li { display: flex; justify-content: space-between; gap: 1cqw; margin: 0; white-space: nowrap; }
.fs-r-name { justify-content: center !important; font-weight: 800; font-size: 3.05cqh; letter-spacing: .02em; margin-bottom: 1.4cqh !important; }
.fs-r-meta { color: #4A4D52; }
.fs-r-rule { height: 0; border-top: 0.32cqh dashed #8F9298; margin: 1.6cqh 0 !important; opacity: .7; }
.fs-paper ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25cqh; }
.fs-paper ul + p, .fs-paper p + ul, .fs-paper p + p:not(.fs-r-rule) { margin-top: 1.25cqh !important; }
.fs-paper li { position: relative; }
.fs-r-total { font-weight: 800; font-size: 2.7cqh; margin-top: .4cqh !important; }
.fs-r-foot { justify-content: center !important; color: #6B6E73; font-size: 1.9cqh; margin-top: 2.2cqh !important; }
/* ---------- Chapters ---------- */
.fs-ch { position: relative; }
.k-fairsies .k-scene .k-steps .k-h2 { font-size: clamp(34px, 3.9vw, 60px); }
.fs-visual { gap: clamp(20px, 3vw, 48px); }

/* Drawn screens, on the app's 440-point grid (one point = 100cqw / 440) */
.k-device-screen { container-type: inline-size; }
.fs-scr { position: absolute; inset: 0; background: #F4EFE4; color: var(--k-ink); font-family: var(--k-text);
  font-size: 3.4cqw; display: flex; flex-direction: column; opacity: 0; transition: opacity .45s ease; }
html:not(.k-motion) .fs-scr { display: none; }
.fs-sb { height: 13.6cqw; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 2.4cqw 9cqw 0 10.2cqw;
  font: 600 4cqw/1 var(--k-text); letter-spacing: -0.01em; box-sizing: border-box; }
.fs-sb i { display: flex; gap: 1.4cqw; align-items: center; }
.fs-sb i::before { content: ""; width: 4.4cqw; height: 2.6cqw; background: linear-gradient(90deg, #111 0 18%, transparent 18% 27%, #111 27% 45%, transparent 45% 54%, #111 54% 72%, transparent 72% 81%, #111 81%);
  -webkit-mask: linear-gradient(0deg, #000 30%, transparent 30%) 0 0 / 25% 100%; }
.fs-sb i::after { content: ""; width: 6.8cqw; height: 3.1cqw; border-radius: 1cqw; background: #34C759; box-shadow: inset 0 0 0 .4cqw rgba(0,0,0,.08); }

/* The reading screen (ReadingReceiptView), lines landing as they're read */
.fs-read-nav { height: 9.1cqw; flex: none; display: flex; justify-content: space-between; align-items: center; padding: 0 4.55cqw;
  color: var(--fs-brand); font-size: 3.86cqw; letter-spacing: -0.02em; }
.fs-read-nav span { opacity: 0; transition: opacity .3s ease; }
.fs-read-head { text-align: center; padding: 2.3cqw 4.55cqw 5cqw; }
.fs-read-head b { display: block; font: 600 5cqw/1.2 var(--k-text); letter-spacing: -0.02em; height: 6cqw; position: relative; }
.fs-read-head b span { position: absolute; left: 0; right: 0; transition: opacity .25s ease; }
.fs-read-head b span + span { opacity: 0; }
.fs-read-head small { display: block; font-size: 2.95cqw; color: var(--fs-quiet); margin-top: 1.36cqw; height: 4cqw; font-variant-numeric: tabular-nums; position: relative; }
.fs-read-head small span { position: absolute; left: 0; right: 0; opacity: 0; }
.fs-read-slip { width: 58.6cqw; margin: 0 auto; background: #FFFDF7; padding-top: 5.45cqw; flex: 1 1 auto; overflow: hidden; position: relative; }
.fs-read-slip ol { list-style: none; margin: 0; padding: 0; }
.fs-read-slip li { display: flex; justify-content: space-between; padding: 2.95cqw 5cqw; font-size: 3.41cqw; letter-spacing: -0.01em;
  border-top: .23cqw dashed #E4DCC8; font-variant-numeric: tabular-nums; opacity: 0; }
.fs-read-slip li:first-child { border-top: 0; padding-top: 0; }
.fs-read-slip li.is-tail { color: #6B6A63; }
.fs-read-slip li.is-total { color: var(--k-ink); font-weight: 600; }
.fs-read-slip li.is-gap { margin-top: 1.8cqw; }
.fs-read-sweep { position: absolute; left: 0; right: 0; top: 0; height: 27cqw; pointer-events: none;
  background: linear-gradient(180deg, rgba(34,57,92,0) 0%, rgba(34,57,92,.05) 55%, rgba(34,57,92,.16) 92%, rgba(34,57,92,.5) 100%); }
.fs-read-foot { flex: none; text-align: center; padding: 4.5cqw 4.55cqw 6cqw; }
.fs-read-foot p { font-size: 2.73cqw; color: var(--fs-quiet); margin: 0; }
.fs-read-foot b { display: grid; place-items: center; height: 12.3cqw; margin-top: 3.2cqw; border-radius: 3.2cqw; background: var(--fs-brand);
  color: #F4EFE4; font: 600 3.86cqw/1 var(--k-text); letter-spacing: -0.02em; opacity: 0; }

/* The paper beside the phone, with the read head running down it */
.fs-till { position: relative; width: clamp(200px, 17vw, 280px); flex: none; transform: rotate(-2.4deg); }
.fs-till .fs-paper { font-size: clamp(11px, 0.86vw, 13.5px); padding: 22px 18px 26px; filter: drop-shadow(0 22px 26px rgba(27,36,48,.22)); }
.fs-till .fs-paper::before { -webkit-mask: radial-gradient(circle at 50% 100%, transparent 5px, #000 5.5px) bottom / 15px 11px repeat-x, linear-gradient(#000,#000) top / 100% calc(100% - 10.5px) no-repeat;
          mask: radial-gradient(circle at 50% 100%, transparent 5px, #000 5.5px) bottom / 15px 11px repeat-x, linear-gradient(#000,#000) top / 100% calc(100% - 10.5px) no-repeat; }
.fs-till .fs-paper ul + p, .fs-till .fs-paper p + ul, .fs-till .fs-paper p + p:not(.fs-r-rule) { margin-top: 6px !important; }
.fs-till .fs-r-name { font-size: 1.25em; margin-bottom: 8px !important; }
.fs-till .fs-r-rule { border-top-width: 1.5px; margin: 10px 0 !important; }
.fs-till .fs-paper ul { gap: 6px; }
.fs-till .fs-r-total { font-size: 1.12em; }
.fs-till .fs-r-foot { font-size: .86em; margin-top: 12px !important; }
.fs-till li, .fs-till .fs-r-sub, .fs-till .fs-r-svc, .fs-till .fs-r-total { transition: color .2s ease; }
.fs-till-head { position: absolute; left: -10px; right: -10px; top: 0; height: 3px; border-radius: 2px; z-index: 2;
  background: #6E8FC4; box-shadow: 0 0 14px 4px rgba(110,143,196,.55), 0 -30px 40px 4px rgba(110,143,196,.14); opacity: 0; }

/* Scenes on a phone: the strip under the caption */
.fs-strip span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; background: #FFFDF7;
  box-shadow: 0 0 0 1px var(--k-line); font-size: 13px; color: var(--k-ink); font-variant-numeric: tabular-nums; }
.fs-strip span b { font-weight: 600; }
html.k-motion .fs-strip span { opacity: .0; }
.fs-strip .fs-av { width: 20px; height: 20px; font-size: 10px; }

/* The assign screen (AssignView), tapped through the way a table does it */
.fs-as-nav { height: 9.1cqw; flex: none; display: flex; justify-content: space-between; align-items: center; padding: 0 4.55cqw;
  color: var(--fs-brand); font-size: 3.86cqw; letter-spacing: -0.02em; }
.fs-as-title { padding: 2.7cqw 4.55cqw 0; }
.fs-as-title b { display: block; font: 700 6.36cqw/1.15 var(--k-text); letter-spacing: -0.03em; }
.fs-as-title small { display: block; position: relative; height: 4.6cqw; margin-top: 1.6cqw; font-size: 3.18cqw; color: #6B6A63; }
.fs-as-title small span { position: absolute; left: 0; right: 0; opacity: 0; white-space: nowrap; }
.fs-as-title small em { font-style: normal; color: var(--fs-neg); font-weight: 600; }
.fs-as-bar { margin: 3cqw 4.55cqw 0; background: #FFFDF7; border-radius: 4.1cqw; padding: 2.7cqw 3cqw 2.4cqw; display: flex; align-items: center; gap: 2.3cqw; }
.fs-as-bar .fs-p { width: 13.2cqw; text-align: center; }
.fs-as-bar .fs-p i { display: grid; place-items: center; width: 9.8cqw; height: 9.8cqw; margin: 0 auto; border-radius: 50%; font: 600 3.64cqw/1 var(--k-text);
  font-style: normal; background: #EDE6D4; color: #8E8778; transition: background-color .2s ease, color .2s ease; }
.fs-as-bar .fs-p.is-on i { background: var(--fs-brand); color: #F4EFE4; }
.fs-as-bar .fs-p small { display: block; margin-top: 1.2cqw; font-size: 2.5cqw; color: var(--fs-quiet); font-variant-numeric: tabular-nums; height: 3.2cqw; position: relative; }
.fs-as-bar .fs-p.is-on small { color: var(--k-ink); font-weight: 600; }
.fs-as-bar .fs-done { margin-left: auto; width: 12.3cqw; height: 12.3cqw; border-radius: 3.6cqw; background: var(--fs-brand); display: grid; place-items: center; }
.fs-as-bar .fs-done::after { content: ""; width: 4.6cqw; height: 2.4cqw; border: solid #F4EFE4; border-width: 0 0 .7cqw .7cqw; transform: translateY(-.6cqw) rotate(-45deg); }
.fs-as-items { margin: 2.7cqw 4.55cqw 0; background: #FFFDF7; border-radius: 4.1cqw; list-style: none; padding: 0; }
.fs-as-items li { padding: 3.2cqw 3.6cqw 3.1cqw; border-top: .23cqw dashed #E4DCC8; display: grid; grid-template-columns: 1fr auto; row-gap: 1.3cqw; }
.fs-as-items li:first-child { border-top: 0; }
.fs-as-items li > span { font-size: 3.86cqw; letter-spacing: -0.02em; transition: color .2s ease; }
.fs-as-items li > b { font-weight: 400; font-size: 3.86cqw; font-variant-numeric: tabular-nums; }
.fs-as-items .fs-who { grid-column: 1 / -1; position: relative; height: 4.6cqw; }
.fs-as-items .fs-who > * { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 1.6cqw; opacity: 0; white-space: nowrap; }
.fs-as-items .fs-who .fs-un { color: var(--fs-neg); font-size: 2.73cqw; top: .7cqw; }
.fs-as-items .fs-who q { quotes: none; display: flex; }
.fs-as-items .fs-who q i { width: 4.55cqw; height: 4.55cqw; border-radius: 50%; display: grid; place-items: center; font: 600 2.3cqw/1 var(--k-text);
  font-style: normal; background: #EDE6D4; color: var(--fs-sand-ink); box-shadow: 0 0 0 .34cqw #FFFDF7; margin-right: -1.36cqw; }
.fs-as-items .fs-who em { font-style: normal; font-size: 2.73cqw; color: var(--fs-quiet); margin-left: 1.6cqw; }
.fs-as-items li.is-unclaimed > span { color: var(--fs-quiet); }

/* Beside the phone: the four running totals, big */
.fs-totals { display: grid; gap: 14px; width: clamp(220px, 19vw, 300px); flex: none; }
.fs-total { display: flex; align-items: center; gap: 14px; background: #FFFDF7; border-radius: 18px; padding: 14px 18px;
  box-shadow: 0 0 0 1px var(--k-line), 0 14px 30px -20px rgba(27,36,48,.35); transition: box-shadow .25s ease; }
.fs-total .fs-av { width: 38px; height: 38px; font-size: 14px; }
.fs-total span { font-size: 17px; color: var(--k-ink); }
.fs-total b { margin-left: auto; font: 600 clamp(22px, 1.9vw, 28px)/1.1 var(--k-text); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.fs-total b > i { position: absolute; right: 0; top: 0; font-style: normal; opacity: 0; }
.fs-total.is-on { box-shadow: 0 0 0 2px var(--fs-brand), 0 14px 30px -20px rgba(27,36,48,.35); }
.fs-sum { margin-top: 4px; padding: 12px 18px; border-radius: 14px; border: 1.5px dashed rgba(27,36,48,.22); font-size: 15px; color: var(--fs-quiet); }
.fs-sum b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fs-sum > i { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 10px; font-style: normal; }
html.k-motion .fs-sum > i { opacity: 0; }
.fs-sum > i.is-ok b { color: var(--fs-pos); }
.fs-sum > i.is-left b { color: var(--fs-neg); }

/* ---------- Bands ---------- */
.fs-band { position: relative; overflow-x: clip; }
.fs-band .k-band-grid { min-height: min(100svh, 980px); padding: var(--k-sec) 0; box-sizing: border-box; }
.fs-band-dark { background: var(--fs-brand); color: #F4EFE4; }
.fs-band-dark :is(h2, .k-h2) { color: #FFFDF7 !important; }
.fs-band-dark .k-body, .fs-band-dark .k-lead { color: rgba(244, 239, 228, .82); }
.fs-band-dark .k-eyebrow { color: rgba(244, 239, 228, .62); }
.fs-band-sand { background: var(--k-bg-2); }
.fs-band .k-h2 { max-width: 13ch; }
.fs-band .k-body { max-width: 40ch; font-size: clamp(18px, 1.3vw, 21px); }

/* Shared plates: each line from the bill splitting into its people's portions */
.fs-shares { display: grid; gap: clamp(16px, 2.2vw, 26px); width: 100%; max-width: 620px; justify-self: center; }
.fs-line { position: relative; }
.fs-line-whole { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 22px; background: #FFFDF7; color: var(--k-ink);
  border-radius: 14px; font-size: clamp(17px, 1.35vw, 21px); box-shadow: 0 16px 34px -20px rgba(0,0,0,.5); position: relative; z-index: 2; }
.fs-line-whole span { letter-spacing: -0.02em; }
.fs-line-whole b { font-weight: 600; font-variant-numeric: tabular-nums; }
.fs-line-whole q { quotes: none; display: flex; margin-left: auto; margin-right: 14px; }
.fs-line-whole q i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 11px/1 var(--k-text); font-style: normal;
  background: #EDE6D4; color: var(--fs-sand-ink); box-shadow: 0 0 0 2px #FFFDF7; margin-right: -6px; }
.fs-line-whole q i.is-you { background: var(--fs-brand); color: #F4EFE4; }
.fs-parts { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; margin-top: 8px; }
.fs-part { background: rgba(255, 253, 247, .1); border: 1px dashed rgba(244,239,228,.38); border-radius: 12px; padding: 10px 12px 11px;
  display: grid; gap: 4px; color: #F4EFE4; }
.fs-part span { display: flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(244,239,228,.78); white-space: nowrap; }
.fs-part span .fs-av { width: 22px; height: 22px; font-size: 10px; }
.fs-part b { font: 600 clamp(18px, 1.5vw, 23px)/1.1 var(--k-text); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.fs-part small { font-size: 12.5px; color: rgba(244,239,228,.62); }
.fs-part.is-penny b::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #E8C77A; margin-left: 6px; vertical-align: middle; }
@media (max-width: 899px) {
  .fs-line-whole { padding: 13px 16px; }
  .fs-line-whole q i { width: 22px; height: 22px; font-size: 10px; }
  .fs-part { padding: 8px 9px 9px; }
  .fs-part span { font-size: 12.5px; gap: 6px; }
  .fs-part small { display: none; }
  .fs-parts { gap: 6px; }
}

/* Service per head, not per steak (the charges card and the four service slices) */
.fs-svc { width: 100%; max-width: 600px; justify-self: center; display: grid; gap: 14px; }
.fs-svc-card { background: #FFFDF7; border-radius: 22px; box-shadow: 0 0 0 1px var(--k-line), 0 30px 60px -36px rgba(27,36,48,.5); overflow: hidden; }
.fs-svc-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px; padding: 20px 24px; }
.fs-svc-row + .fs-svc-row { border-top: 1.5px dashed #E4DCC8; }
.fs-svc-row > span { font-size: clamp(18px, 1.4vw, 21px); letter-spacing: -0.02em; }
.fs-svc-row > b { font-weight: 400; font-size: clamp(18px, 1.4vw, 21px); font-variant-numeric: tabular-nums; }
.fs-svc-row > small { grid-column: 1; font-size: 14px; color: var(--fs-quiet); position: relative; height: 1.4em; }
.fs-svc-row > small i { position: absolute; left: 0; top: 0; white-space: nowrap; font-style: normal; }
.fs-svc-row > em { grid-column: 2; grid-row: 1 / 3; font-style: normal; }
.fs-switch { width: 52px; height: 31px; border-radius: 16px; background: #E4DCC8; position: relative; display: block; }
.fs-switch::after { content: ""; position: absolute; left: 2px; top: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,.2); transform: translateX(var(--knob, 0px)); }
.fs-switch i { position: absolute; inset: 0; border-radius: 16px; background: var(--fs-brand); opacity: var(--on, 0); }
.fs-slices { display: grid; gap: 10px; }
.fs-slice { display: grid; grid-template-columns: 30px 64px 1fr 72px; align-items: center; gap: 12px; font-size: 16px; }
.fs-slice .fs-av { width: 30px; height: 30px; font-size: 12px; }
.fs-slice > span { color: var(--k-ink); }
.fs-slice > u { height: 14px; border-radius: 7px; background: rgba(34,57,92,.12); position: relative; overflow: hidden; text-decoration: none; }
.fs-slice > u i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--fs-brand); border-radius: 7px; transform-origin: 0 50%; transform: scaleX(var(--w, .25)); }
.fs-slice > b { position: relative; height: 1.3em; font-weight: 600; font-variant-numeric: tabular-nums; overflow: hidden; }
.fs-slice > b i { position: absolute; right: 0; top: 0; font-style: normal; }
.fs-svc-note { font-size: 14px; color: var(--fs-quiet); display: flex; justify-content: space-between; padding: 0 4px; }
.fs-svc-note b { color: var(--fs-pos); font-weight: 600; }

/* Send it: the group chat line, then one slip each */
.fs-chat { width: clamp(240px, 21vw, 320px); flex: none; display: grid; gap: 14px; align-content: center; }
.fs-bubble { justify-self: end; max-width: 100%; background: #34C759; color: #fff; border-radius: 20px 20px 6px 20px; padding: 12px 15px;
  font-size: 15px; line-height: 1.35; box-shadow: 0 16px 30px -20px rgba(27,36,48,.5); }
.fs-bubble b { font-weight: 600; }
.fs-minislips { display: flex; gap: 8px; justify-content: flex-end; }
.fs-mini { width: 31%; background: #FFFDF7; border-radius: 3px; padding: 10px 9px 12px; display: grid; gap: 6px; justify-items: center;
  box-shadow: 0 0 0 1px var(--k-line), 0 14px 30px -20px rgba(27,36,48,.45); font-size: 13px;
  -webkit-mask: radial-gradient(circle at 50% 100%, transparent 3.5px, #000 4px) bottom / 11px 8px repeat-x, linear-gradient(#000,#000) top / 100% calc(100% - 7.5px) no-repeat;
          mask: radial-gradient(circle at 50% 100%, transparent 3.5px, #000 4px) bottom / 11px 8px repeat-x, linear-gradient(#000,#000) top / 100% calc(100% - 7.5px) no-repeat; }
.fs-mini .fs-av { width: 26px; height: 26px; font-size: 11px; }
.fs-mini b { font: 600 17px/1 var(--k-text); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.fs-mini small { font-size: 11px; color: var(--fs-quiet); letter-spacing: .08em; text-transform: uppercase; }

/* Nothing kept: the payoff tears up and away, the front prints beneath */
.fs-tear { position: relative; width: min(100%, 420px); height: clamp(430px, 62svh, 560px); justify-self: center; overflow: hidden; border-radius: 26px;
  background: #F4EFE4; box-shadow: 0 40px 80px -40px rgba(0,0,0,.6); }
.fs-front { position: absolute; inset: 0; display: grid; justify-items: center; align-content: center; gap: 18px; padding: 24px; }
.fs-front-slip { width: 62%; background: #FFFDF7; padding: 18px 18px 20px; color: var(--k-ink); font-size: 14px; display: grid; gap: 7px;
  -webkit-mask: radial-gradient(circle at 50% 100%, transparent 4px, #000 4.5px) bottom / 13px 9px repeat-x, radial-gradient(circle at 50% 0, transparent 4px, #000 4.5px) top / 13px 9px repeat-x, linear-gradient(#000,#000) center / 100% calc(100% - 17px) no-repeat;
          mask: radial-gradient(circle at 50% 100%, transparent 4px, #000 4.5px) bottom / 13px 9px repeat-x, radial-gradient(circle at 50% 0, transparent 4px, #000 4.5px) top / 13px 9px repeat-x, linear-gradient(#000,#000) center / 100% calc(100% - 17px) no-repeat; }
.fs-front-slip .fs-mark { width: 34px; justify-self: center; }
.fs-front-slip > small { justify-self: center; font-size: 11px; letter-spacing: .14em; color: var(--fs-quiet); text-transform: uppercase; margin-bottom: 4px; }
.fs-front-slip p { display: flex; justify-content: space-between; margin: 0; position: relative; }
.fs-front-slip p span, .fs-front-slip p b { font-weight: 400; }
.fs-front-slip p.is-total b { font-weight: 600; }
.fs-front-slip p::before, .fs-front-slip p::after { content: ""; position: absolute; top: 50%; height: 6px; margin-top: -3px; background: #EDE6D4; opacity: var(--ghost, 0); }
.fs-front-slip p::before { left: 0; width: 46%; }
.fs-front-slip p::after { right: 0; width: 18%; }
.fs-front-slip p > * { opacity: var(--ink, 1); }
.fs-front-slip hr { border: 0; border-top: 1.5px dashed #E4DCC8; margin: 4px 0; width: 100%; }
.fs-front > p { margin: 0; font-size: 13px; color: var(--fs-quiet); text-align: center; }
.fs-front > b { font: 600 15px/1 var(--k-text); background: var(--fs-brand); color: #F4EFE4; width: 82%; text-align: center; padding: 15px 0; border-radius: 12px; }
.fs-sheet { position: absolute; inset: 0; background: #F4EFE4; padding: 34px 26px 24px; display: grid; align-content: start; gap: 10px; z-index: 2;
  box-shadow: 0 14px 40px rgba(0,0,0,.25); will-change: transform; }
.fs-sheet::after { content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 18px;
  background: radial-gradient(circle at 50% 0, #F4EFE4 6px, transparent 6.5px) 0 0 / 18px 18px repeat-x; }
.fs-sheet small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--fs-quiet); }
.fs-sheet > b { font: 600 clamp(54px, 5vw, 68px)/1 var(--k-text); letter-spacing: -0.045em; color: var(--k-ink); }
.fs-sheet > p { margin: 0; font-size: 13.5px; color: #6B6A63; line-height: 1.4; }
.fs-sheet ul { list-style: none; margin: 8px 0 0; padding: 4px 16px; background: #FFFDF7; border-radius: 16px; }
.fs-sheet li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1.5px dashed #EFE9DB; font-size: 15px; color: var(--k-ink); }
.fs-sheet li:first-child { border-top: 0; }
.fs-sheet li b:not(.fs-av) { margin-left: auto; font: 600 19px/1 var(--k-text); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.fs-sheet .fs-av { width: 28px; height: 28px; font-size: 11px; }
.fs-sheet > em { font-style: normal; display: flex; justify-content: space-between; font-size: 12.5px; color: var(--fs-quiet); padding: 0 4px; }
.fs-sheet > em b { color: var(--fs-pos); font-weight: 600; }

/* ---------- The rest: tiles with their own pictures ---------- */
.fs-rest .k-h2 { max-width: 16ch; }
.k-fairsies .k-tile { box-shadow: 0 0 0 1px var(--k-line); }
.fs-tile-art { margin-top: auto; }
.fs-menu { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 18px; align-items: start; }
.fs-menu-row { background: #F4EFE4; border-radius: 14px; padding: 14px 16px; display: grid; gap: 8px; }
.fs-menu-row p { display: flex; justify-content: space-between; margin: 0; font-size: 16px; color: var(--k-ink); }
.fs-menu-row q { quotes: none; display: flex; }
.fs-menu-row q i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 600 9.5px/1 var(--k-text); font-style: normal;
  background: #EDE6D4; color: var(--fs-sand-ink); box-shadow: 0 0 0 2px #F4EFE4; margin-right: -5px; }
.fs-menu-row small { font-size: 12.5px; color: var(--fs-quiet); margin-left: 12px; }
.fs-menu-list { list-style: none; margin: 0; padding: 4px 0; background: rgba(250, 248, 243, .96); border-radius: 14px;
  box-shadow: 0 0 0 1px var(--k-line), 0 24px 40px -22px rgba(27,36,48,.45); }
.fs-menu-list li { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; font-size: 15.5px; color: var(--k-ink); }
.fs-menu-list li + li { border-top: 1px solid rgba(27,36,48,.08); }
.fs-menu-list li.is-red { color: #C2382B; }
.fs-menu-list svg { width: 17px; height: 17px; }
@media (max-width: 599px) { .fs-menu { grid-template-columns: 1fr; } }
.fs-chipline { display: flex; flex-wrap: wrap; gap: 8px; }
.fs-chipline span { padding: 7px 11px; border-radius: 10px; background: #F4EFE4; font-size: 14px; font-variant-numeric: tabular-nums; }
.fs-chipline span.is-strong { background: var(--fs-brand); color: #F4EFE4; font-weight: 600; }
.fs-alert { background: rgba(244, 241, 234, .98); border-radius: 16px; box-shadow: 0 0 0 1px var(--k-line); text-align: center; overflow: hidden; }
.fs-alert b { display: block; font-weight: 600; font-size: 15.5px; padding: 14px 14px 2px; }
.fs-alert small { display: block; font-size: 12.5px; color: #55545F; padding: 0 14px 10px; }
.fs-alert span { display: block; margin: 0 14px 12px; text-align: left; background: #fff; border-radius: 7px; padding: 6px 9px; font-size: 14px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.fs-alert p { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-top: 1px solid rgba(0,0,0,.1); }
.fs-alert p i { font-style: normal; padding: 11px; color: #2E6BD9; font-size: 15px; }
.fs-alert p i + i { border-left: 1px solid rgba(0,0,0,.1); font-weight: 600; }
.fs-payline { background: #FFFDF7; border-radius: 4px; padding: 14px 16px; font-size: 14px; color: var(--k-ink); display: grid; gap: 8px; box-shadow: 0 0 0 1px var(--k-line); }
.fs-payline p { margin: 0; display: flex; justify-content: space-between; }
.fs-payline small { color: var(--fs-quiet); font-size: 12.5px; }
.fs-payline em { font-style: normal; color: var(--fs-brand); font-weight: 600; }
.fs-sample { background: #FFFDF7; padding: 12px 14px; border-radius: 4px; box-shadow: 0 0 0 1px var(--k-line); display: grid; gap: 5px; font-size: 14px; }
.fs-sample p { margin: 0; display: flex; justify-content: space-between; }
.fs-sample small { text-align: center; font-size: 10.5px; letter-spacing: .14em; color: var(--fs-quiet); text-transform: uppercase; margin-bottom: 2px; }
.fs-sample p.is-you { font-weight: 600; }

/* ---------- Compare teaser, plans, questions ---------- */
.fs-compare { background: var(--k-bg-2); }
.fs-compare .k-teaser li b { font-weight: 600; letter-spacing: -0.02em; }
.fs-compare .k-teaser li { background: #F4EFE4; box-shadow: none; }
.fs-compare .k-teaser li.is-others { background: transparent; box-shadow: inset 0 0 0 1.5px var(--k-line); }
.fs-plans .k-plans { align-items: start; }
.k-fairsies .k-plan { border-radius: 4px; background: #FFFDF7; position: relative; padding-bottom: 46px;
  -webkit-mask: radial-gradient(circle at 50% 100%, transparent 7px, #000 7.5px) bottom / 22px 15px repeat-x, linear-gradient(#000,#000) top / 100% calc(100% - 14.5px) no-repeat;
          mask: radial-gradient(circle at 50% 100%, transparent 7px, #000 7.5px) bottom / 22px 15px repeat-x, linear-gradient(#000,#000) top / 100% calc(100% - 14.5px) no-repeat; }
.k-fairsies .k-plan.k-plus { background: var(--fs-brand); color: #F4EFE4; }
.k-fairsies .k-plan .k-h3 { font-size: clamp(24px, 2vw, 30px); }
.k-fairsies .k-plan-price { font-weight: 600; letter-spacing: -0.04em; font-family: var(--k-display); }
.k-fairsies .k-plan-sub { margin: 0; color: var(--k-ink-2); font-size: 16px; }
.k-fairsies .k-plan.k-plus .k-plan-sub { color: rgba(244,239,228,.78); }
.k-fairsies .k-plan ul { gap: 0; border-top: 1.5px dashed #E4DCC8; margin-top: 24px; }
.k-fairsies .k-plan.k-plus ul { border-top-color: rgba(244,239,228,.25); }
.k-fairsies .k-plan li { padding: 12px 0 12px 0; display: flex; justify-content: space-between; gap: 18px; border-bottom: 1.5px dashed #E4DCC8; }
.k-fairsies .k-plan.k-plus li { border-bottom-color: rgba(244,239,228,.25); }
.k-fairsies .k-plan li::before { display: none; }
.k-fairsies .k-plan li b { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.k-fairsies .k-plan .fs-plan-foot { margin-top: 18px; font-size: 15px; color: var(--k-ink-2); }
.k-fairsies .k-plan.k-plus .fs-plan-foot { color: rgba(244,239,228,.78); }
.fs-faq .k-faq summary { font-weight: 500; }

/* ---------- The close ---------- */
.fs-close { background: var(--fs-brand); color: #F4EFE4; overflow-x: clip; }
.fs-close .k-h2 { color: #FFFDF7; max-width: 15ch; }
.fs-close .k-lockup b { color: #FFFDF7; }
.fs-close .k-lockup span { color: rgba(244,239,228,.75); }
.fs-close .k-btn-primary { background: #F4EFE4; color: var(--fs-brand); }
.fs-close .k-subnav { justify-content: center; margin-top: 40px; }
.fs-close .k-subnav a { color: #F4EFE4; box-shadow: inset 0 0 0 1.5px rgba(244,239,228,.3); }
.fs-close .k-subnav a[aria-current="page"] { background: #F4EFE4; color: var(--fs-brand); }
.fs-close .fs-meta { margin-top: 22px; color: rgba(244,239,228,.7); font-size: 15px; }

/* ---------- Child pages ---------- */
.k-fairsies .k-sub-hero { background: var(--k-bg-2); }
.k-fairsies .k-sub-hero .k-h1 { max-width: 18ch; }
.k-fairsies .k-sub-hero .fs-updated { margin-top: 18px; }
.k-fairsies .k-doc .k-note { background: #FFFDF7; padding: 26px 28px; border-radius: 22px; }
.k-fairsies .k-doc .k-note h2 { margin-top: 0; font-size: clamp(24px, 2.2vw, 30px); }
.k-fairsies .k-doc .k-note p { color: var(--k-ink); }
/* the page's own contents list: beside the text on a wide screen, folded above it on a narrow one */
.fs-doc .k-wrap { max-width: 1160px; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(40px, 5vw, 72px); align-items: start; }
.fs-doc-col { min-width: 0; max-width: 780px; }
.fs-doc-col > :first-child, .fs-doc-col > .fs-toc-m + * { margin-top: 0; }
.fs-doc-col > .fs-toc-m + h2 { margin-top: 0; }
.fs-toc { position: sticky; top: 110px; font-size: 15px; line-height: 1.35; }
.k-doc .fs-toc ol { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.fs-toc a, .fs-toc-m a { color: var(--k-ink-2) !important; text-decoration: none !important; }
.fs-toc a:hover, .fs-toc-m a:hover { color: var(--fs-brand) !important; }
.fs-toc-title { font: 600 12px/1.2 var(--k-text); letter-spacing: .12em; text-transform: uppercase; color: var(--fs-quiet) !important; margin: 0; }
.fs-toc-m { display: none; }
.fs-toc-m details { background: #FFFDF7; border-radius: 18px; padding: 16px 20px; box-shadow: 0 0 0 1px var(--k-line); margin-bottom: 28px; }
.fs-toc-m summary { cursor: pointer; font-weight: 600; color: var(--k-ink); }
.k-doc .fs-toc-m ol { margin: 12px 0 2px; padding-left: 1.2em; gap: 8px; }
@media (max-width: 1099px) {
  .fs-doc .k-wrap { display: block; max-width: 860px; }
  .fs-toc { display: none; }
  .fs-toc-m { display: block; }
}
.k-fairsies .k-doc .k-faq { margin-top: 18px; }
.k-fairsies .k-doc .k-faq summary { padding: 18px 40px 18px 0; }
.k-fairsies .k-doc .fs-limits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.k-fairsies .k-doc .fs-limits > div { background: #FFFDF7; border-radius: 18px; padding: 18px 20px; box-shadow: 0 0 0 1px var(--k-line); }
.k-fairsies .k-doc .fs-limits h3 { margin-top: 0 !important; }
@media (max-width: 759px) { .k-fairsies .k-doc .fs-limits { grid-template-columns: 1fr; } }
.k-fairsies .k-doc .fs-form { margin: 18px 0 22px; padding: 22px; background: #FFFDF7; border-radius: 22px; box-shadow: 0 0 0 1px var(--k-line); }
.k-fairsies .k-doc em.em-ui { font-style: normal; font-weight: 600; color: var(--k-ink); }
/* the compare page's table: Fairsies' own column in the app's tint */
.k-fairsies .k-table td.is-us { background: rgba(34, 57, 92, .07); }
.k-fairsies .k-table thead th { border-bottom-color: var(--fs-brand); }
.k-fairsies .k-compare-lists > div { background: #FFFDF7; }

/* Without motion every picture rests in its finished state */
html:not(.k-motion) .fs-sheet { display: none; }
html:not(.k-motion) .fs-slice > b i:first-child, html:not(.k-motion) .fs-svc-row small i:first-child:not(:only-child) { display: none; }
html.k-motion .fs-slice > b i + i, html.k-motion .fs-svc-row small i + i { opacity: 0; }
.fs-slice > b i + i, .fs-svc-row small i + i { position: absolute; }
html:not(.k-motion) .fs-slice > b i, html:not(.k-motion) .fs-svc-row small i { position: static; }

/* On a phone the extras beside the device don't fit: each scene's strip carries them instead */
@media (max-width: 899px) {
  .fs-till, .fs-totals, .fs-chat { display: none; }
  .k-fairsies .k-stage-grid, .k-fairsies .k-scene.k-flip .k-stage-grid { grid-template-columns: minmax(0, 1fr); }
  .k-fairsies .k-band-grid { grid-template-columns: minmax(0, 1fr); }
}

/* The long-bill tile: two pages of the app's ghost lines joining into one bill */
.fs-pages { display: grid; gap: 10px; }
.fs-pages > div { background: #FFFDF7; padding: 12px 14px; box-shadow: 0 0 0 1px var(--k-line); display: grid; gap: 8px; }
.fs-pages > div + div { border-top: 2px dashed #D9D1BE; margin-top: -10px; }
.fs-pages i { display: flex; justify-content: space-between; }
.fs-pages i::before, .fs-pages i::after { content: ""; height: 6px; background: #EDE6D4; }
.fs-pages i::before { width: var(--n, 52%); }
.fs-pages i::after { width: var(--p, 17%); }
.k-fairsies .fs-pages p { margin: 2px 0 0; display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; color: var(--k-ink); }
.fs-pages > b { justify-self: start; font: 600 14px/1 var(--k-text); color: var(--fs-brand); padding: 10px 14px; border-radius: 10px; background: #F4EFE4; }

/* Phones: the strip's totals keep their width as they change, so the caption block never re-wraps;
   and the parts of a drawn screen below the screen's edge (the phone is cropped there) are left out */
.fs-strip-totals span { width: 74px; justify-content: space-between; box-sizing: border-box; padding: 5px 8px; }
@media (max-width: 899px) {
  .fs-read-foot, .fs-as-items li.fs-as-add { visibility: hidden; }
}
@media (max-width: 899px) and (max-height: 640px) {
  .fs-as-items li:nth-child(n+5) { visibility: hidden; }   /* below the edge of a short phone's crop */
}

/* the share's foot: whose share on one line, the figure under it */
.fs-s-total { display: grid !important; grid-template-columns: 1fr; row-gap: .5cqh; }
.fs-s-total b { justify-self: end; }

/* The status bar, as the captures have it */
.fs-sb .fs-sbi { width: 17.6cqw; height: 3.2cqw; color: #111; }
.fs-sb-light { color: #F4EFE4; }
.fs-sb-light .fs-sbi { color: #F4EFE4; }

/* The camera (CaptureView): the dark room, the hint, the brackets, the receipt settling into
   them until Vision outlines it, Cancel, the shutter and the library door */
.fs-cam { background: #11161F; color: #F4EFE4; }
.fs-cam::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(90% 60% at 50% 46%, #3a332c 0%, #241f1b 55%, #14120f 100%); }
.fs-cam > * { position: relative; }
.fs-cam-hint { text-align: center; padding: 2.3cqw 4.5cqw 0; }
.fs-cam-hint b { display: block; font: 600 3.4cqw/1.25 var(--k-text); letter-spacing: -0.01em; }
.fs-cam-hint small { display: block; font-size: 2.73cqw; color: rgba(244,239,228,.65); margin-top: .7cqw; }
.fs-cam-view { position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
.fs-br { position: absolute; width: 5.9cqw; height: 5.9cqw; border: solid rgba(244,239,228,.7); border-width: 0; }
.fs-br-tl { left: 10%; top: 16%; border-left-width: .68cqw; border-top-width: .68cqw; border-top-left-radius: .8cqw; }
.fs-br-tr { right: 10%; top: 16%; border-right-width: .68cqw; border-top-width: .68cqw; border-top-right-radius: .8cqw; }
.fs-br-bl { left: 10%; top: calc(72% - 5.9cqw); border-left-width: .68cqw; border-bottom-width: .68cqw; border-bottom-left-radius: .8cqw; }
.fs-br-br { right: 10%; top: calc(72% - 5.9cqw); border-right-width: .68cqw; border-bottom-width: .68cqw; border-bottom-right-radius: .8cqw; }
.fs-cam-paper { position: absolute; left: 17%; width: 66%; top: 19%; transform-origin: 50% 50%; will-change: transform; }
.fs-cam-paper .fs-paper { font-size: 2.7cqw; padding: 4.5cqw 3.4cqw 5cqw; filter: drop-shadow(0 2cqw 2.6cqw rgba(0,0,0,.55)); }
.fs-cam-paper .fs-paper::before { background: #F6F3EC; }
.fs-cam-paper .fs-r-name { font-size: 1.15em; margin-bottom: 1.4cqw !important; }
.fs-cam-paper .fs-r-rule { border-top-width: .3cqw; margin: 1.6cqw 0 !important; }
.fs-cam-paper .fs-paper ul { gap: 1.1cqw; }
.fs-cam-paper .fs-paper ul + p, .fs-cam-paper .fs-paper p + ul, .fs-cam-paper .fs-paper p + p:not(.fs-r-rule) { margin-top: 1.1cqw !important; }
.fs-cam-paper .fs-r-total { font-size: 1.05em; }
.fs-cam-outline { position: absolute; inset: -1cqw; border: .57cqw solid #F4EFE4; border-radius: .6cqw; background: rgba(244,239,228,.07); opacity: 0; }
.fs-cam-controls { position: absolute !important; left: 0; right: 0; bottom: 5cqw; height: 16.4cqw; display: flex; align-items: center; justify-content: space-between; padding: 0 4.5cqw; }
.fs-cam-controls span { font-size: 3.86cqw; letter-spacing: -0.02em; }
.fs-cam-controls svg { width: 6cqw; height: 6cqw; }
.fs-shutter { position: absolute; left: 50%; top: 0; width: 16.4cqw; height: 16.4cqw; transform: translateX(-50%); border-radius: 50%;
  box-shadow: inset 0 0 0 .8cqw #F4EFE4; }
.fs-shutter::after { content: ""; position: absolute; inset: 1.6cqw; border-radius: 50%; background: #F4EFE4; }

/* The send scene's strip on a phone: the one line for the group chat, then the three shares */
.fs-strip .fs-strip-bubble { flex-basis: 100%; background: #34C759; color: #fff; border-radius: 14px 14px 4px 14px; box-shadow: none; padding: 7px 10px; line-height: 1.3; }

@media (max-width: 899px) {
  /* copy before its picture on a phone, whichever side the picture takes on a desktop */
  .fs-band .k-band-grid > .k-stack { order: -1; }
}
html.k-motion .fs-s-total b i + i, html.k-motion .fs-tally > span i + i { opacity: 0; }

html.k-motion .fs-scr.fs-cam { opacity: 1; }
/* the even line: "The bill" and its share on one row, "a quarter of £104.50" under them */
.fs-s-even > span { grid-column: 1; grid-row: 1; }
.fs-s-even b { grid-column: 2; grid-row: 1; }
.fs-s-even em { grid-column: 1 / -1; grid-row: 2; }

/* ---------- The hero, round 3: the even split itemised ----------
   At rest every slip lists every line of the bill at a quarter (the app's own penny split, so
   You £26.12, Priya £26.13, Sam £26.12, Tom £26.13); as each slip starts to move, the lines its
   person didn't have lift off, the ones they did turn to their whole or shared amounts and close
   up, and the paper draws to that person's share. One scale throughout: Sam's £35.95 reaches
   down to the tally. */
.fs-slip { --u: 0.89cqh; width: 22.4cqw; }
.fs-slip:nth-child(1) { left: 2.4cqw; }
.fs-slip:nth-child(2) { left: 26.4cqw; }
.fs-slip:nth-child(3) { left: 50.4cqw; }
.fs-slip:nth-child(4) { left: 74.4cqw; }
.fs-slip > .fs-s-head { top: 3.6cqh; }
.fs-slip > .fs-s-lines { top: 11cqh; display: block; gap: 0; }
.fs-s-lines li { display: block; position: relative; height: 5.9cqh; }
.fs-s-lines li > span { display: block; font-size: 1.9cqh; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-s-lines li > s { display: block; position: relative; height: 2.4cqh; margin-top: .25cqh; overflow: hidden; text-decoration: none; }
.fs-s-lines li > s > i { display: flex; justify-content: space-between; align-items: baseline; gap: .5cqw; height: 2.4cqh; font-style: normal; }
.fs-s-lines li > s em { font-style: normal; color: var(--fs-quiet); font-size: 1.6cqh; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fs-s-lines li > s b { font-weight: 600; font-size: 1.85cqh; font-variant-numeric: tabular-nums; flex: none; }
.fs-s-mini { display: none; }
.fs-tally { bottom: 2.4cqh; }
/* still state, and no motion: the fair split; with motion the slips start at a quarter of everything */
html:not(.k-motion) .fs-s-lines li[data-keep="0"] { display: none; }
html:not(.k-motion) .fs-s-lines li > s > i:first-child:not(:only-child) { display: none; }
html.k-motion .fs-s-lines li { opacity: 1; }
html.k-motion .fs-s-lines li > s > i + i { opacity: 0; }

@container fsstage (max-width: 560px) {
  .fs-slip { --u: 0.8cqh; width: 21.4cqw; }
  .fs-slip:nth-child(1) { left: 2.6cqw; } .fs-slip:nth-child(2) { left: 26.6cqw; }
  .fs-slip:nth-child(3) { left: 50.6cqw; } .fs-slip:nth-child(4) { left: 74.6cqw; }
  .fs-slip > .fs-s-lines { display: none !important; }
  .fs-s-mini { display: block; position: absolute; left: 1.4cqw; right: 1.4cqw; top: 5cqh; }
  .fs-s-mini p { position: absolute; left: 0; right: 0; top: 0; margin: 0; display: grid; gap: 1.4cqh; }
  .fs-s-mini i { display: block; font-style: normal; line-height: 1.2; }
  .fs-s-mini span { display: block; font-size: max(10px, 2.9cqh); color: var(--k-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fs-s-mini b { display: block; font-size: max(10px, 2.9cqh); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--k-ink); }
  .fs-s-mini .fs-more { font-size: max(10px, 2.7cqh); color: var(--fs-quiet); }
  .fs-tally { bottom: 3cqh; }
}
html:not(.k-motion) .fs-s-mini p:first-child { display: none; }
html.k-motion .fs-s-mini p + p { opacity: 0; }