/* Risiti website — the same "till slip" identity as the app.
   Mist page, ink slip in light; night page, paper slip in dark. One family (Instrument Sans) with condensed numerals,
   JetBrains Mono wherever something is printed on a receipt. */

/* Fonts are served from this site (SIL Open Font License, see assets/fonts/*-OFL.txt): no third-party requests. */
@font-face { font-family: "Instrument Sans"; font-style: normal; font-display: swap; font-weight: 400 700; font-stretch: 75% 100%;
  src: url(/assets/fonts/instrument-sans-latin-wdth-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-display: swap; font-weight: 400 700; font-stretch: 75% 100%;
  src: url(/assets/fonts/instrument-sans-latin-ext-wdth-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-display: swap; font-weight: 100 800;
  src: url(/assets/fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-display: swap; font-weight: 100 800;
  src: url(/assets/fonts/jetbrains-mono-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --bg: #F1F2F4; --bg-2: #E9EBEE; --surface: #FFFFFF; --raised: #F6F7F8; --well: #ECEEF1; --line: #E1E4E9; --line-2: #CDD2D9;
  --fg: #15171C; --fg-2: #464D5A; --fg-3: #636B78;
  --accent: #F2B33D; --accent-fg: #8A5A00; --on-accent: #1B1405; --accent-soft: rgba(242, 179, 61, .16);
  --in: #10A36E; --in-fg: #0B7A53; --out: #C27C06;
  --ink: #16181D; --ink-fg: #F6F4EF; --ink-fg-2: rgba(246, 244, 239, .74); --ink-fg-3: rgba(246, 244, 239, .5); --ink-line: rgba(246, 244, 239, .14); --ink-dots: rgba(246, 244, 239, .3);
  --paper: #FDFCF8; --paper-fg: #17181C; --paper-fg-2: rgba(23, 24, 28, .68); --paper-dots: rgba(23, 24, 28, .28);
  --wa: #E2F6E8; --wa-fg: #0E5A33;
  --card: 0 0 0 1px rgba(16, 24, 40, .05), 0 1px 2px rgba(16, 24, 40, .05);
  --lift: 0 0 0 1px rgba(16, 24, 40, .05), 0 18px 40px -18px rgba(16, 24, 40, .28);
  --drop: drop-shadow(0 26px 34px rgba(16, 20, 28, .2)) drop-shadow(0 2px 4px rgba(16, 20, 28, .1));
  --f: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1); --spring: cubic-bezier(.2, 1.1, .3, 1);
  --wrap: 1180px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0B0C0F; --bg-2: #101216; --surface: #15171B; --raised: #1B1E23; --well: #1F2228; --line: #24282F; --line-2: #333944;
    --fg: #F2F3F5; --fg-2: #B0B6C0; --fg-3: #8B929E;
    --accent: #F5BC4C; --accent-fg: #F7C866; --accent-soft: rgba(245, 188, 76, .13);
    --in: #2FCB85; --in-fg: #5DDDA3; --out: #E0A64A;
    --ink: #F1EDE4; --ink-fg: #17181C; --ink-fg-2: rgba(23, 24, 28, .72); --ink-fg-3: rgba(23, 24, 28, .62); --ink-line: rgba(23, 24, 28, .12); --ink-dots: rgba(23, 24, 28, .28);
    --paper: #F1EDE4;
    --wa: #12261B; --wa-fg: #8FE3B2;
    --card: 0 0 0 1px rgba(255, 255, 255, .06);
    --lift: 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 40px -18px rgba(0, 0, 0, .7);
    --drop: drop-shadow(0 26px 36px rgba(0, 0, 0, .55));
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 17px/1.55 var(--f); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
b, strong { font-weight: 600; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.ic { width: 20px; height: 20px; fill: currentColor; flex: none; }
.mono { font-family: var(--mono); }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
@media (min-width: 900px) { .wrap { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); } }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: var(--fg); color: var(--bg); text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- type ---------- */
.kicker { display: inline-flex; align-items: center; gap: 10px; font: 600 12.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); margin: 0 0 18px; }
.kicker::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--accent); }
h1, h2, h3 { margin: 0; text-wrap: balance; }
.h-display { font: 600 clamp(46px, 7vw, 84px)/.94 var(--f); font-stretch: 80%; letter-spacing: -.022em; }
.h2 { font: 600 clamp(34px, 5vw, 62px)/.98 var(--f); font-stretch: 82%; letter-spacing: -.02em; }
.h3 { font: 600 clamp(24px, 2.6vw, 32px)/1.08 var(--f); font-stretch: 88%; letter-spacing: -.012em; }
.lede { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--fg-2); max-width: 36em; margin: 20px 0 0; text-wrap: pretty; }
.section { padding: clamp(72px, 10vw, 140px) 0; position: relative; }
.section-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .kicker { justify-content: center; }
.section-head.center .lede { margin-left: auto; margin-right: auto; }

/* ---------- buttons ---------- */
.btn { appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 24px; border-radius: 16px;
  font: 600 16.5px/1 var(--f); letter-spacing: -.005em; text-decoration: none; white-space: nowrap; transition: transform .2s var(--spring), box-shadow .2s ease, background .2s ease; }
.btn .ic { width: 20px; height: 20px; transition: transform .25s var(--spring); }
.btn:hover .ic { transform: translateX(3px); }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--accent) 85%, transparent), inset 0 1px 0 rgba(255, 255, 255, .45); }
.btn-primary:hover { box-shadow: 0 18px 36px -12px color-mix(in srgb, var(--accent) 95%, transparent), inset 0 1px 0 rgba(255, 255, 255, .45); }
.btn-ghost { background: var(--surface); color: var(--fg); box-shadow: var(--card); }
.btn-ghost:hover { box-shadow: var(--lift); }
.btn-sm { height: 42px; padding: 0 16px; border-radius: 13px; font-size: 15px; }
.btn-ink { background: var(--ink-fg); color: var(--ink); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
@media (max-width: 479.98px) { .cta-row .btn { white-space: normal; height: auto; min-height: 54px; padding-block: 12px; line-height: 1.25; text-align: center; } }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .2s ease; padding-top: env(safe-area-inset-top, 0px); }
.nav.scrolled { border-bottom-color: var(--line); }
.nav-in { display: flex; align-items: center; gap: 24px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--fg); }
.brand b { font: 650 24px/1 var(--f); font-stretch: 86%; letter-spacing: -.04em; }
.glyph { width: 25px; height: 29px; flex: none; }
.glyph .p { fill: var(--accent); } .glyph .l { stroke: var(--on-accent); } .glyph .d { fill: var(--on-accent); }
.nav-links { display: none; gap: 4px; margin-left: auto; }
.nav-links a { text-decoration: none; color: var(--fg-2); font-weight: 550; font-size: 15px; padding: 9px 12px; border-radius: 10px; transition: color .15s ease, background .15s ease; }
.nav-links a:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 5%, transparent); }
.nav .btn { margin-left: auto; }
@media (min-width: 900px) { .nav-links { display: flex; } .nav .btn { margin-left: 8px; } }
.nav-signin { margin-left: auto; text-decoration: none; color: var(--fg); font-weight: 600; font-size: 15px; padding: 9px 12px; border-radius: 10px; white-space: nowrap; transition: background .15s ease; }
.nav-signin:hover { background: color-mix(in srgb, var(--fg) 6%, transparent); }
.nav-signin + .btn { margin-left: -12px; }
@media (min-width: 900px) { .nav-signin { margin-left: -8px; } .nav-signin + .btn { margin-left: -12px; } }

/* ---------- the top: what Risiti is for, the start box, and a business started and run in six steps ----------
   Nothing up here changes size while it moves: the tour is a phone of a fixed size whose screens are stacked on
   one another, its captions share one cell, and the words beside it never change. So the page never jumps. */
.top { position: relative; padding: clamp(26px, 4vw, 44px) 0 clamp(28px, 4vw, 52px); overflow: hidden; }
.top::before { content: ""; position: absolute; inset: -24% -10% auto; height: 80%; pointer-events: none; background: radial-gradient(55% 60% at 24% 34%, var(--accent-soft), transparent 70%); }
.top-in { position: relative; display: grid; gap: clamp(44px, 6vw, 64px); align-items: center; }
@media (min-width: 1020px) { .top-in { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; } }
/* wide screens: the phone fits the screen's height, so the steps and what they mean are seen with it.
   Narrower: the tour comes straight after the headline (seen on landing), and the start box after the tour. */
@media (min-width: 1020px) { .tour .tv { width: min(100%, 340px, max(260px, calc((100svh - 380px) * .555))); } }
@media (max-width: 1019.98px) {
  .top-in { gap: 0; }
  .top-copy { display: contents; }
  .top-copy > * { order: 1; }
  .top-copy > .claim, .top-copy > .facts, .top-copy > .already { order: 3; }
  .top .eyebrow { justify-self: start; }
  .tour { order: 2; margin: 34px 0 6px; }
}
.top-copy { min-width: 0; }
.top .eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 8px; border-radius: 999px; background: var(--surface); box-shadow: var(--card); font-size: 14px; font-weight: 550; color: var(--fg-2); margin-bottom: 24px; }
.eyebrow .tag { font: 600 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 6px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-fg); white-space: nowrap; }
@media (max-width: 479.98px) { .top .eyebrow { padding: 8px 14px; font-size: 13.5px; } .eyebrow .tag { display: none; } .cta-row .btn { flex: 1 1 100%; } }
.total-line { position: relative; display: inline-block; white-space: nowrap; }
.nw { white-space: nowrap; }
.total-line::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.12em; height: .11em; border-top: .028em solid var(--accent); border-bottom: .028em solid var(--accent); }
.top .lede { margin-top: 24px; }
.top .lede b { color: var(--fg); }
@media (max-width: 639.98px) { .lede-more { display: none; } }
.facts { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14.5px; color: var(--fg-2); }
.facts li { display: inline-flex; align-items: center; gap: 8px; }
.facts .ic { width: 18px; height: 18px; color: var(--in-fg); }
.already { margin: 16px 0 0; font-size: 15px; color: var(--fg-2); }
.already a { color: var(--fg); font-weight: 650; text-underline-offset: 3px; }

/* the start box: a name becomes an address, checked as it is typed */
.claim { margin-top: 30px; max-width: 620px; }
.claim-l { display: block; margin: 0 0 8px 4px; font-size: 14px; font-weight: 650; color: var(--fg-2); }
.claim-box { display: flex; gap: 8px; padding: 7px; border-radius: 22px; background: var(--surface); box-shadow: var(--lift); transition: box-shadow .2s var(--ease); }
.claim-box:focus-within { box-shadow: var(--lift), 0 0 0 3px var(--accent-soft), 0 0 0 1.5px var(--accent); }
.claim-box input { flex: 1 1 auto; min-width: 0; height: 54px; padding: 0 14px; border: 0; outline: 0; background: transparent; color: var(--fg); font: 550 18px/1 var(--f); }
.claim-box input::placeholder { color: var(--fg-3); font-weight: 450; }
.claim-box .btn { flex: none; height: 54px; border-radius: 16px; }
.claim.shake .claim-box { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@media (max-width: 560px) {
  .claim-box { flex-direction: column; padding: 8px; }
  .claim-box .btn { width: 100%; }
}
/* room for two lines is kept, so an answer that wraps moves nothing below it */
.claim-out { display: flex; flex-wrap: wrap; align-content: flex-start; align-items: center; gap: 4px 10px; margin: 14px 0 0 6px; font-size: 15px; color: var(--fg-2); min-height: 50px; }
@media (min-width: 640px) { .claim-out { min-height: 26px; } }
.co-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); flex: none; transition: background .2s; }
.co-url { font-family: var(--mono); font-size: 14.5px; color: var(--fg); overflow-wrap: anywhere; }
.co-url b { font-weight: 650; color: var(--accent-fg); }
.claim-out.ok .co-dot { background: var(--in); box-shadow: 0 0 0 4px color-mix(in srgb, var(--in) 22%, transparent); }
.claim-out.ok .co-msg { color: var(--in-fg); font-weight: 600; }
.claim-out.no .co-dot { background: #e5484d; box-shadow: 0 0 0 4px rgba(229, 72, 77, .18); }
.claim-out.no .co-msg { color: #d93d42; font-weight: 600; }
.claim-out.wait .co-dot { background: var(--accent); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.claim-ideas { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 0 6px; }
.claim-ideas button { appearance: none; border: 0; cursor: pointer; padding: 8px 12px; border-radius: 999px; background: var(--surface); box-shadow: var(--card), inset 0 0 0 1px var(--line); color: var(--fg); font: 600 13.5px/1 var(--mono); }
.claim-ideas button:hover { box-shadow: var(--card), inset 0 0 0 1.5px var(--accent); }
@keyframes caret { 50% { opacity: 0; } }

/* ---- the tour: a phone, six screens, the steps under it and what each one means ---- */
@property --glow { syntax: "<color>"; inherits: true; initial-value: #0e7490; }
.tour { --glow: #0e7490; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 12px; min-width: 0; transition: --glow 1.2s var(--ease); }
.tour[data-step="1"] { --glow: #7c3aed; } .tour[data-step="2"] { --glow: #10a36e; } .tour[data-step="3"] { --glow: #d4880b; }
.tour[data-step="4"] { --glow: #f2b33d; } .tour[data-step="5"] { --glow: #e5484d; } .tour[data-step="6"] { --glow: #2563eb; }
.tour[data-step="0"][data-set="0"] { --glow: #c2410c; } .tour[data-step="0"][data-set="2"] { --glow: #be185d; }
.tour::before { content: ""; position: absolute; left: 50%; top: 38%; width: min(150%, 640px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--glow) 24%, transparent), color-mix(in srgb, var(--glow) 8%, transparent) 55%, transparent); }
.tour > * { position: relative; }
/* the steps and captions come before the phone in the page (so the tour has its full height from its first paint,
   while the phone's long markup is still arriving) and are shown under it */
.tour > .tv { order: 1; } .tour > .tour-nav { order: 2; } .tour > .tour-caps { order: 3; }
.tv { width: min(100%, 320px); aspect-ratio: 9 / 16.2; padding: 9px; border-radius: 48px; container-type: inline-size;
  background: linear-gradient(150deg, #474b53 0%, #17191e 9%, #0f1115 50%, #17191e 91%, #474b53 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .12), inset 0 0 0 4px #0b0c0f, 0 44px 80px -34px rgba(16, 24, 40, .6), 0 14px 28px -14px rgba(16, 24, 40, .4); }
@media (prefers-color-scheme: dark) { .tv { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14), inset 0 0 0 4px #050608, 0 0 0 1px rgba(255, 255, 255, .06), 0 44px 80px -34px rgba(0, 0, 0, .9); } }
/* its buttons: volume on the left, power on the right */
.tv::before, .tv::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #2b2e34, #50545c); }
.tv::before { left: -2px; top: 22%; height: 11cqi; box-shadow: 0 15cqi 0 #3a3e45; }
.tv::after { right: -2px; top: 29%; height: 19cqi; }
.tv-sys { display: flex; align-items: center; gap: .4em; }
.tv-wifi { width: 1.2em; height: 1.2em; }
.tv-bat { position: relative; width: 1.75em; height: .86em; border-radius: .26em; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 55%, transparent); }
.tv-bat::after { content: ""; position: absolute; right: -.22em; top: 50%; width: .14em; height: .34em; border-radius: 0 .12em .12em 0; background: color-mix(in srgb, currentColor 55%, transparent); transform: translateY(-50%); }
.tv-bat i { position: absolute; left: 2.5px; top: 2.5px; bottom: 2.5px; width: 68%; border-radius: .14em; background: currentColor; }
.tv-home { position: absolute; z-index: 9; left: 50%; bottom: .55em; width: 34%; height: .36em; border-radius: 1em; background: var(--fg); opacity: .8; transform: translateX(-50%); pointer-events: none; }
.tv-in { position: relative; height: 100%; border-radius: 40px; overflow: hidden; background: var(--bg); color: var(--fg); font-size: 4.2cqi; line-height: 1.35; isolation: isolate; }
.tv-in::before { content: ""; position: absolute; z-index: 9; top: .62em; left: 50%; width: 30%; height: 1.65em; transform: translateX(-50%); border-radius: 1em; background: #000; }
.tv-in::after { content: ""; position: absolute; z-index: 9; inset: 0; pointer-events: none; background: linear-gradient(140deg, rgba(255, 255, 255, .1), transparent 34%); }
.tv-status { position: relative; z-index: 8; display: flex; align-items: center; justify-content: space-between; height: 2.9em; padding: 0 1.9em 0 2.2em; font-size: .86em; }
.tv-status b { font-weight: 650; }
.tv-sig { display: flex; align-items: flex-end; gap: 2px; height: .8em; }
.tv-sig i { width: 3px; border-radius: 1px; background: currentColor; }
.tv-sig i:nth-child(1) { height: 35%; } .tv-sig i:nth-child(2) { height: 55%; } .tv-sig i:nth-child(3) { height: 78%; } .tv-sig i:nth-child(4) { height: 100%; }

/* the screens, one on another */
.tvset { display: contents; }
.tvset[data-biz="kiosk"] { --brand: #c2410c; } .tvset[data-biz="water"] { --brand: #0e7490; } .tvset[data-biz="salon"] { --brand: #be185d; } .tvset[data-biz="yours"] { --brand: #c2410c; }
.tvs { position: absolute; inset: 2.9em 0 0; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateX(5%); transition: opacity .5s var(--ease), transform .65s var(--ease), visibility 0s .65s; }
.tvs.on { opacity: 1; visibility: visible; transform: none; transition: opacity .5s var(--ease) .08s, transform .65s var(--ease) .08s, visibility 0s; }
.tvs.was { transform: translateX(-5%); }
.tvs.snap * { transition: none !important; }
.tvh { display: flex; align-items: center; gap: .6em; padding: .45em 1.15em .75em; }
.tvh b { flex: 1; min-width: 0; font-size: 1.08em; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tvh-r { flex: none; padding: .35em .75em; border-radius: 999px; background: var(--surface); box-shadow: var(--card); font-size: .76em; font-weight: 650; color: var(--fg-2); }
.tvh-mk { flex: none; display: grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: .65em; background: var(--brand, #0e7490); color: #fff; font-size: .82em; font-weight: 750; }
.tvh-mk.riq { background: #2563eb; } .tvh-mk .ic { width: 1.3em; height: 1.3em; }
.tvh .tvh-glyph { width: 1.45em; height: 1.7em; }
.tvb { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .75em; padding: .1em 1.15em 1.3em; }
.tv-lbl, .tf small, .tv-k small, .tleft small, .tsplit small, .tweek small, .cu-due small { display: block; font-size: .7em; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--fg-3); }

/* what appears, appears when its moment comes (and is simply there with less motion, or no script) */
.tour.play [data-at] { transition: opacity .45s var(--ease), transform .6s var(--spring); }
.tour.play [data-at]:not(.in) { opacity: 0; transform: translateY(.55em); }

/* 1. start */
.tf-box { display: flex; align-items: center; height: 3.15em; margin-top: .45em; padding: 0 .95em; border-radius: 1em; background: var(--surface); box-shadow: var(--card), 0 0 0 1.5px var(--accent); font-size: 1.06em; font-weight: 650; white-space: nowrap; overflow: hidden; }
.tf-val { overflow: hidden; text-overflow: ellipsis; }
.tour.play .tf-val[data-at] { opacity: 1; transform: none; }
.tf-caret { flex: none; width: 2px; height: 1.25em; margin-left: 2px; border-radius: 1px; background: var(--accent); animation: caret 1s steps(1) infinite; }
.tf-url { display: flex; align-items: center; justify-content: space-between; gap: .6em; margin: -.2em 0 0; padding: .6em .85em; border-radius: .85em; background: var(--well); font: 500 .8em/1.2 var(--mono); }
.tf-url > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--fg-2); }
.tf-url b { color: var(--accent-fg); font-weight: 650; }
.tf-url em { flex: none; display: inline-flex; align-items: center; gap: .25em; font: 700 1.05em/1 var(--f); font-style: normal; color: var(--in-fg); }
.tf-url .ic { width: 1.2em; height: 1.2em; }
.tv-chips { display: flex; flex-wrap: wrap; gap: .45em; margin-top: -.3em; }
.tc { display: inline-flex; align-items: center; gap: .4em; padding: .5em .8em; border-radius: 999px; background: var(--surface); box-shadow: var(--card), inset 0 0 0 1.5px color-mix(in srgb, var(--in) 50%, transparent); font-size: .84em; font-weight: 650; }
.tc .ic { width: 1.2em; height: 1.2em; color: var(--in-fg); }
.tour.play .tc[data-at]:not(.in) { transform: scale(.7); }
.tv-go { display: flex; align-items: center; justify-content: center; gap: .5em; height: 3.2em; margin-top: .4em; border-radius: 1em; background: var(--accent); color: var(--on-accent); font-weight: 700; box-shadow: 0 1em 1.6em -1em var(--accent); }
.tv-go .ic { width: 1.2em; height: 1.2em; }
.tour.play .tv-go[data-at]:not(.in) { opacity: .45; transform: none; }
.tour.play .tv-go.in { animation: press .5s var(--ease); }
@keyframes press { 40% { transform: scale(.94); } }
.tvp { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 86%; display: flex; flex-direction: column; align-items: center; gap: .5em; padding: 1.2em 1.2em 1.5em; text-align: center; border-radius: 1.7em 1.7em 0 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 20%, var(--surface)), var(--surface) 52%); box-shadow: 0 -1.2em 2.6em -1em rgba(10, 30, 40, .4); }
.tour.play .tvp[data-at] { transition: transform .8s var(--spring); }
.tour.play .tvp[data-at]:not(.in) { opacity: 1; transform: translateY(104%); }
.tvp::before { content: ""; width: 2.6em; height: .3em; margin-bottom: .3em; border-radius: 1em; background: var(--line-2); }
.tvp-live { display: inline-flex; align-items: center; gap: .45em; font-size: .78em; font-weight: 700; color: var(--in-fg); }
.tvp-live i { width: .55em; height: .55em; border-radius: 50%; background: var(--in); animation: ping 1.6s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--in) 60%, transparent); } 80%, 100% { box-shadow: 0 0 0 .55em transparent; } }
.tvp-mk { display: grid; place-items: center; width: 2.9em; height: 2.9em; margin-top: .45em; border-radius: .85em; background: var(--brand); color: #fff; font-size: 1.32em; font-weight: 750; box-shadow: 0 0 0 .28em color-mix(in srgb, var(--brand) 16%, transparent), 0 .9em 1.4em -.7em var(--brand); }
.tvp-name { margin-top: .3em; font-size: 1.55em; line-height: 1.08; font-weight: 750; font-stretch: 86%; letter-spacing: -.02em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.tvp-kind { display: inline-flex; align-items: center; gap: .25em; font-size: .8em; color: var(--fg-2); }
.tvp-kind .ic { width: 1.2em; height: 1.2em; color: var(--brand); }
.tvp-btn { display: inline-flex; align-items: center; gap: .45em; margin-top: .55em; padding: .75em 1.25em; border-radius: 999px; background: var(--brand); color: #fff; font-size: .9em; font-weight: 700; box-shadow: 0 .8em 1.4em -.8em var(--brand); }
.tvp-btn .ic { width: 1.2em; height: 1.2em; }
.tvp-sell { display: grid; grid-template-columns: 1fr 1fr; gap: .45em; width: 100%; margin-top: .9em; text-align: left; }
.tvp-sell span { display: flex; flex-direction: column; gap: .35em; padding: .65em .75em; border-radius: .9em; background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); }
.tvp-sell b { font-size: .8em; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tvp-sell i { font-style: normal; font-size: 1.05em; font-weight: 700; font-stretch: 84%; font-variant-numeric: tabular-nums; }
.tvp-url { display: flex; align-items: center; gap: .4em; max-width: 100%; margin-top: auto; padding: .65em .95em; border-radius: .9em; background: var(--well); font: 500 .8em/1.2 var(--mono); color: var(--fg-2); }
.tvp-url > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tvp-url b { color: var(--fg); font-weight: 650; }
.tvp-url .ic { flex: none; width: 1.2em; height: 1.2em; color: var(--brand); }

/* 2 and 3: money in, money out */
.tv-k { display: flex; flex-direction: column; gap: .15em; padding: .8em 1em .85em; border-radius: 1.05em; background: var(--surface); box-shadow: var(--card); }
.tv-kv { font-size: 1.95em; line-height: 1.04; font-weight: 700; font-stretch: 80%; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.in-k .tv-kv { color: var(--in-fg); } .out-k .tv-kv { color: var(--out); }
.tin { position: relative; height: 4.75em; flex: none; }
.msg { position: absolute; left: 0; right: 0; top: 0; padding: .6em .85em .65em; border-radius: 1.05em 1.05em 1.05em .3em; background: var(--surface); box-shadow: var(--lift); font-size: .86em; }
.msg.wa { background: var(--wa); }
.msg-h { display: flex; align-items: center; gap: .4em; font-size: .84em; font-weight: 700; color: var(--fg-3); }
.msg.wa .msg-h { color: var(--wa-fg); } .msg.sms .msg-h .ic { color: var(--in-fg); }
.msg-h em { margin-left: auto; font-style: normal; font-weight: 600; opacity: .7; }
.msg-h .ic { width: 1.3em; height: 1.3em; }
.msg p { margin: .3em 0 0; font: 500 .94em/1.35 var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg.photo { display: flex; align-items: center; gap: .75em; }
.ph { position: relative; flex: none; width: 2.6em; height: 3.3em; border-radius: .3em; overflow: hidden; background: var(--paper); box-shadow: 0 0 0 1px var(--line), 0 .4em .8em -.4em rgba(0, 0, 0, .35); transform: rotate(-4deg);
  background-image: repeating-linear-gradient(180deg, transparent 0 .42em, rgba(23, 24, 28, .2) .42em .5em); background-size: 70% 100%; background-repeat: no-repeat; background-position: 50% .5em; }
.ph i { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--accent); box-shadow: 0 0 .6em var(--accent); animation: scanPh 1.1s ease-in-out infinite alternate; }
@keyframes scanPh { to { transform: translateY(3.1em); } }
.ph-t { min-width: 0; flex: 1; }
.tour:not(.play) .tin .msg { display: none; }
.tv-filed { position: absolute; inset: 0; width: fit-content; height: fit-content; margin: auto; display: inline-flex; align-items: center; gap: .4em; padding: .55em 1em; border-radius: 999px; background: color-mix(in srgb, var(--in) 14%, var(--surface)); color: var(--in-fg); font-size: .82em; font-weight: 700; white-space: nowrap; }
.tv-filed.out-f { background: color-mix(in srgb, var(--out) 14%, var(--surface)); color: var(--out); }
.tv-filed .ic { width: 1.25em; height: 1.25em; }
.tour.play .msg[data-at]:not(.in) { transform: translateY(-.7em) scale(.96); }
.tour.play .msg.in.out { opacity: 0; transform: translateY(2.2em) scale(.9); transition-duration: .35s, .45s; }
.trs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; flex: none; min-height: 0; overflow: hidden; border-radius: 1.05em; background: var(--surface); box-shadow: var(--card); }
.tr { display: grid; grid-template-rows: 1fr; flex: none; }
.tr-in { min-height: 0; overflow: hidden; }
.tr-row { display: flex; align-items: center; gap: .7em; padding: .6em .9em; box-shadow: inset 0 1px 0 var(--line); }
.tr:first-child .tr-row { box-shadow: none; }
.tr.was .tr-row { opacity: .68; }
.tour.play .tr[data-at] { transition: grid-template-rows .55s var(--ease); }
.tour.play .tr[data-at]:not(.in) { opacity: 1; transform: none; grid-template-rows: 0fr; }
.tour.play .tr.in .tr-row { animation: rowLit 1.8s var(--ease); }
@keyframes rowLit { 0%, 25% { background: color-mix(in srgb, var(--accent) 20%, transparent); } }
.tr-av { flex: none; display: grid; place-items: center; width: 2.35em; height: 2.35em; border-radius: 50%; background: var(--well); color: var(--fg-2); font-weight: 700; font-size: .9em; }
.tr-av.cat { border-radius: .75em; background: color-mix(in srgb, var(--out) 15%, transparent); color: var(--out); }
.tr-av .ic { width: 1.35em; height: 1.35em; }
.tr-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.28; }
.tr-t b { font-size: .92em; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-t small { font-size: .74em; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-v { flex: none; font-size: .95em; font-weight: 700; font-variant-numeric: tabular-nums; }
.tr-v.up { color: var(--in-fg); } .tr-v.dn { color: var(--out); }
.tsplit { flex: none; padding: .8em 1em .85em; border-radius: 1.05em; background: var(--surface); box-shadow: var(--card); }
.tsp-bar { display: flex; gap: 3px; height: .75em; margin-top: .55em; }
.tsp-bar i { display: block; border-radius: 3px; transform-origin: left; transition: transform .9s var(--ease); }
.tsp-bar i { flex: var(--f, 1); }
.tsp-bar i:nth-child(1) { background: var(--out); }
.tsp-bar i:nth-child(2) { background: color-mix(in srgb, var(--out) 50%, var(--surface)); transition-delay: .12s; }
.tsp-bar i:nth-child(3) { background: var(--line-2); transition-delay: .24s; }
.tour.play .tsplit:not(.in) .tsp-bar i { transform: scaleX(0); }
.tsp-leg { display: flex; flex-wrap: wrap; gap: .25em .9em; margin-top: .55em; font-size: .74em; color: var(--fg-2); }
.tsp-leg i { display: inline-block; width: .7em; height: .7em; margin-right: .35em; border-radius: .2em; vertical-align: -.04em; }
.tsp-leg span:nth-child(1) i { background: var(--out); } .tsp-leg span:nth-child(2) i { background: color-mix(in srgb, var(--out) 50%, var(--surface)); } .tsp-leg span:nth-child(3) i { background: var(--line-2); }

/* 4. what's left */
.tleft { --u: #5ddda3; --d: #f5bc4c; display: flex; flex-direction: column; gap: .15em; padding: .95em 1.05em 1em; border-radius: 1.15em; background: var(--ink); color: var(--ink-fg); box-shadow: var(--lift); }
@media (prefers-color-scheme: dark) { .tleft { --u: #0b7a53; --d: #8a5a00; } }
.tleft small { color: var(--ink-fg-3); }
.tv-kv.big { font-size: 2.75em; font-stretch: 76%; }
.tl-eq { display: flex; flex-wrap: wrap; gap: .2em .5em; margin-top: .25em; font-size: .8em; font-weight: 650; }
.tl-eq .up { color: var(--u); } .tl-eq .dn { color: var(--d); } .tl-m { color: var(--ink-fg-3); }
.tbars { list-style: none; margin: -.2em 0 0; padding: 0; display: flex; flex-direction: column; gap: .55em; }
.tbars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3em .6em; font-size: .84em; }
.tbars span { color: var(--fg-2); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbars b { font-variant-numeric: tabular-nums; }
.tbars i { grid-column: 1 / -1; height: .55em; border-radius: 99px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--in))); transform-origin: left; transition: transform .9s var(--ease); }
.tbars i { width: var(--w, 100%); }
.tour.play .tbars li:not(.in) i { transform: scaleX(0); }
.tweek { padding: .8em .9em .6em; border-radius: 1.05em; background: var(--surface); box-shadow: var(--card); }
.tweek svg { display: block; width: 100%; height: auto; margin-top: .45em; overflow: visible; }
.tw-area { fill: color-mix(in srgb, var(--accent) 20%, transparent); transition: opacity .8s var(--ease) .5s; }
.tw-line { fill: none; stroke: var(--accent-fg); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; transition: stroke-dashoffset 1.3s var(--ease); }
.tw-dot { fill: var(--accent-fg); stroke: var(--surface); stroke-width: 2.5; transition: opacity .3s ease 1.1s; }
.tour.play .tweek:not(.in) .tw-line { stroke-dashoffset: 1; }
.tour.play .tweek:not(.in) .tw-area, .tour.play .tweek:not(.in) .tw-dot { opacity: 0; }
.tw-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-top: .25em; font-size: .66em; text-align: center; color: var(--fg-3); }
.tw-days .on { color: var(--fg); font-weight: 700; }

/* 5. customers: when each one usually buys, and who is late */
.tal { display: flex; align-items: center; gap: .55em; padding: .6em .85em; border-radius: .95em; background: color-mix(in srgb, #e5484d 11%, var(--surface)); color: #c42a30; font-size: .84em; }
@media (prefers-color-scheme: dark) { .tal { color: #ff8f93; } }
.tal .ic { width: 1.35em; height: 1.35em; }
.cu { padding: .95em 1.05em 1.05em; border-radius: 1.15em; background: var(--surface); box-shadow: var(--lift); }
.cu-top { display: flex; align-items: center; gap: .7em; }
.cu-av { flex: none; display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 50%; background: #7c3aed; color: #fff; font-size: .95em; font-weight: 750; }
.cu-t { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.cu-t b { font-size: 1.05em; }
.cu-t small { font-size: .76em; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cu-r { margin: .75em 0 .5em; font-size: .9em; color: var(--fg-2); }
.cu-r b { color: var(--fg); }
.cu-dots { position: relative; display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); align-items: center; justify-items: center; height: 1.6em; }
.cu-dots::before { content: ""; position: absolute; left: 3%; right: 3%; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--line); }
.cu-dots i { position: relative; width: .36em; height: .36em; border-radius: 50%; background: var(--line-2); }
.cu-dots i.b { width: 1em; height: 1em; background: var(--in); box-shadow: 0 0 0 .2em color-mix(in srgb, var(--in) 20%, transparent); }
.cu-dots i.x { width: 1em; height: 1em; background: var(--surface); box-shadow: inset 0 0 0 2.5px #e5484d; }
.cu-dots i.x.in, .tour:not(.play) .cu-dots i.x { animation: late 1.3s ease-in-out infinite; }
@keyframes late { 50% { box-shadow: inset 0 0 0 2.5px #e5484d, 0 0 0 .38em rgba(229, 72, 77, .2); } }
.cu-dots i.t { width: .62em; height: .62em; background: var(--fg); }
.tour.play .cu-dots i[data-at]:not(.in) { transform: scale(0); }
.cu-ax { display: flex; justify-content: space-between; margin-top: .2em; font-size: .66em; color: var(--fg-3); }
.cu-late { display: flex; align-items: center; gap: .45em; margin: .75em 0 0; font-size: .86em; color: var(--fg-2); }
.cu-late b { color: #d3363b; }
@media (prefers-color-scheme: dark) { .cu-late b { color: #ff8f93; } }
.cu-late .ic { flex: none; width: 1.3em; height: 1.3em; color: #e5484d; }
.cu-acts { display: flex; gap: .5em; margin-top: .8em; }
.cu-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: .4em; height: 2.65em; border-radius: .9em; background: var(--fg); color: var(--bg); font-size: .88em; font-weight: 700; }
.cu-btn.wa { background: var(--wa); color: var(--wa-fg); }
.cu-btn .ic { width: 1.25em; height: 1.25em; }
.cu-due { display: flex; flex-direction: column; gap: .4em; padding: .75em .95em; border-radius: 1.05em; background: var(--surface); box-shadow: var(--card); font-size: .86em; }
.cu-due span { display: flex; justify-content: space-between; gap: .6em; color: var(--fg-3); }
.cu-due span b { color: var(--fg); font-weight: 650; }

/* 6. RouteIQ: tomorrow's trip */
.rq-map { flex: none; border-radius: 1.15em; overflow: hidden; background: color-mix(in srgb, #2563eb 7%, var(--surface)); box-shadow: var(--card); }
.rq-map svg { display: block; width: 100%; height: auto; }
.rq-rd { fill: none; stroke: color-mix(in srgb, var(--fg) 10%, transparent); stroke-width: 7; stroke-linecap: round; }
.rq-p { fill: none; stroke: #2563eb; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.tour.play .rq-p { transition: stroke-dashoffset 2.6s cubic-bezier(.45, .05, .3, 1); }
.tour.play .tvs:not(.on) .rq-p, .tour.play .tvs.snap .rq-p { stroke-dashoffset: 1; }
.rq-pin circle { fill: var(--surface); stroke: #2563eb; stroke-width: 3.2; }
.rq-pin.f circle { fill: #2563eb; stroke: var(--surface); }
.rq-pin text { font: 700 11.5px/1 var(--f); fill: var(--fg); text-anchor: middle; paint-order: stroke; stroke: color-mix(in srgb, #2563eb 7%, var(--surface)); stroke-width: 4px; stroke-linejoin: round; }
.rq-pin { transform-box: fill-box; transform-origin: 50% 50%; }
.tour.play .rq-pin[data-at]:not(.in) { transform: scale(.3); }
.rq-st { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4em; }
.rq-st li { display: flex; align-items: center; gap: .65em; padding: .5em .75em; border-radius: .9em; background: var(--surface); box-shadow: var(--card); font-size: .88em; }
.rq-st b { flex: none; display: grid; place-items: center; width: 1.75em; height: 1.75em; border-radius: 50%; background: #2563eb; color: #fff; font-size: .8em; }
.rq-st span { flex: 1; min-width: 0; font-weight: 650; }
.rq-st small { color: var(--fg-3); font-size: .82em; white-space: nowrap; }
.rq-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4em; }
.rq-sum span { display: flex; flex-direction: column; gap: .1em; padding: .55em .7em; border-radius: .9em; background: var(--ink); color: var(--ink-fg); }
.rq-sum small { font-size: .64em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-fg-3); }
.rq-sum b { font-size: .9em; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 2. connect: what the business already uses flows into Risiti; Risiti reads it; the month bursts out */
.tour { --c-wa: #10A36E; --c-sms: #0284C7; --c-pb: #EA580C; --c-zl: #7C3AED; --c-ca: #65A30D; --c-photo: #64748B; --cx-in: #3DD68C; --cx-out: #F5B841; --cx-good: #5DDDA3; }
@media (prefers-color-scheme: dark) { .tour { --c-sms: #38BDF8; --c-zl: #A78BFA; --c-ca: #A3E635; --c-photo: #94A3B8; --cx-in: #0E9F6E; --cx-out: #B7791F; --cx-good: #0B7A53; } }
.k-zl { --c: var(--c-zl); } .k-ca { --c: var(--c-ca); }
.tvc .tvb { position: relative; gap: .7em; justify-content: center; padding-bottom: 2.4em; }
.cx { position: relative; width: 100%; aspect-ratio: 300 / 250; flex: none; }
.cx-w { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cx-w path { fill: none; stroke-linecap: round; }
.cx-p { stroke: color-mix(in srgb, var(--c) 40%, transparent); stroke-width: 2; stroke-dasharray: 1; }
.tour.play .cx-p[data-at] { transition: stroke-dashoffset .9s var(--ease); }
.tour.play .cx-p[data-at]:not(.in) { opacity: 1; transform: none; stroke-dashoffset: 1; }
.tour.play .cx-p.soon[data-at] { transition: opacity .6s ease; }
.tour.play .cx-p.soon[data-at]:not(.in) { opacity: 0; stroke-dashoffset: 0; }
.cx-fl path { stroke: var(--c); stroke-width: 2.8; stroke-dasharray: 2 13; }
.tour.play .tvs.on .cx-fl path { animation: cxFlow .75s linear infinite; }
@keyframes cxFlow { to { stroke-dashoffset: -15; } }
.tour.play .cx-fl[data-at]:not(.in) { transform: none; }
.cx-orb { position: absolute; z-index: 1; left: 50%; top: 50%; width: 25%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 32%, #2b2517, #15171c 72%); box-shadow: 0 0 0 1px rgba(245, 188, 76, .45), 0 0 2.4em -.2em rgba(245, 188, 76, .55); }
.cx-orb .glyph { width: 42%; height: auto; }
.cx-orb i { position: absolute; inset: -13%; border-radius: 50%; border: 1.5px dashed rgba(245, 188, 76, .5); }
.tour.play .tvs.on .cx-orb i { animation: spin 12s linear infinite; }
.tour.play .tvs.on .cx-orb { animation: cxBeat 1.5s ease-in-out infinite; }
@keyframes cxBeat { 50% { box-shadow: 0 0 0 1px rgba(245, 188, 76, .8), 0 0 3.4em .3em rgba(245, 188, 76, .6); } }
.cx-s { position: absolute; z-index: 2; width: 37%; height: 26%; display: flex; align-items: center; gap: .45em; padding: 0 .45em; border-radius: .95em; background: var(--surface); box-shadow: var(--card), 0 .6em 1.1em -.8em rgba(16, 24, 40, .35); font-size: .86em; }
.cx-s.l1, .cx-s.r1 { top: 2%; } .cx-s.l2, .cx-s.r2 { top: 37%; } .cx-s.l3, .cx-s.r3 { top: 72%; }
.cx-s.l1, .cx-s.l2, .cx-s.l3 { left: 0; } .cx-s.r1, .cx-s.r2, .cx-s.r3 { right: 0; }
.cx-i { flex: none; display: grid; place-items: center; width: 2.15em; height: 2.15em; border-radius: .7em; background: color-mix(in srgb, var(--c) 15%, transparent); color: var(--c); }
.cx-i .ic { width: 1.3em; height: 1.3em; }
.cx-n { min-width: 0; display: grid; justify-items: start; gap: .1em; line-height: 1.15; }
.cx-n b { max-width: 100%; font-size: .96em; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-n small { font-size: .78em; color: var(--fg-3); }
.cx-n em { padding: .14em .5em; border-radius: 99px; background: var(--accent-soft); color: var(--accent-fg); font: 700 .82em/1.3 var(--f); font-style: normal; letter-spacing: .02em; }
.cx-s.soon { background: color-mix(in srgb, var(--surface) 55%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--fg) 14%, transparent); }
.cx-s.soon .cx-i { filter: grayscale(1); opacity: .6; }
.cx-s.soon .cx-n b { color: var(--fg-2); }
.cx-p.soon { stroke: color-mix(in srgb, var(--fg) 22%, transparent); stroke-dasharray: .012 .028; }
.tour.play .cx-s[data-at]:not(.in) { transform: scale(.6); }
.tour.play .cx-s.in:not(.soon) { animation: cxHot 1.2s var(--ease); }
@keyframes cxHot { 0%, 45% { box-shadow: var(--card), 0 0 0 .28em color-mix(in srgb, var(--c) 32%, transparent); } }
.cx-read { margin: 0; display: flex; align-items: center; justify-content: center; gap: .45em; font-size: .86em; color: var(--fg-2); }
.cx-read i { width: .55em; height: .55em; border-radius: 50%; background: var(--accent); }
.tour.play .cx-read i { animation: pulse 1s infinite; }
.cx-read b { color: var(--fg); font-variant-numeric: tabular-nums; }
/* the burst: the sources fall into Risiti, which flashes, and the month opens out of it */
.tour.play .cx.out .cx-s { opacity: 0; transition: transform .5s cubic-bezier(.5, 0, .75, 0), opacity .35s ease .15s; }
.tour.play .cx.out .cx-s.l1 { transform: translate(85%, 135%) scale(.2); } .tour.play .cx.out .cx-s.l2 { transform: translate(85%, 0) scale(.2); } .tour.play .cx.out .cx-s.l3 { transform: translate(85%, -135%) scale(.2); }
.tour.play .cx.out .cx-s.r1 { transform: translate(-85%, 135%) scale(.2); } .tour.play .cx.out .cx-s.r2 { transform: translate(-85%, 0) scale(.2); } .tour.play .cx.out .cx-s.r3 { transform: translate(-85%, -135%) scale(.2); }
.tour.play .cx.out .cx-s.soon { transform: none; opacity: 0; transition: opacity .3s ease; }
.tour.play .cx.out .cx-w { opacity: 0; transition: opacity .3s ease; }
.tour.play .cx.out .cx-orb { opacity: 0; transform: translate(-50%, -50%) scale(1.7); transition: transform .6s var(--spring) .2s, opacity .35s ease .5s; }
.tour.play .cx.out { transform: none; }
.tour.play .cx-read.out { opacity: 0; transform: none; }
.cxb { position: absolute; z-index: 3; inset: 0 1.15em 2.4em; display: flex; flex-direction: column; justify-content: center; gap: .6em; transform-origin: 50% 42%; }
.tour.play .cxb[data-at] { transition: opacity .3s ease .25s, transform .95s cubic-bezier(.17, 1.4, .4, 1) .25s; }
.tour.play .cxb[data-at]:not(.in) { opacity: 0; transform: scale(.4); transition: none; }
.tour:not(.play) .cx, .tour:not(.play) .cx-read { display: none; }
.tour:not(.play) .cxb { position: static; }
.cx-burst { position: absolute; z-index: 4; left: 50%; top: 42%; width: 0; height: 0; pointer-events: none; }
.cx-burst i { position: absolute; left: -.32em; top: -.32em; width: .64em; height: .64em; border-radius: 50%; background: var(--accent); opacity: 0; }
.cx-burst i:nth-child(3n+2) { background: #10a36e; width: .5em; height: .5em; } .cx-burst i:nth-child(3n) { background: #0284c7; border-radius: .12em; }
.tour.play .cxb.in .cx-burst i { animation: cxPop 1.05s cubic-bezier(.12, .75, .3, 1) .2s both; }
@keyframes cxPop { 0% { opacity: 1; transform: rotate(var(--a)) translateX(0) scale(1.2); } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--r)) scale(.3); } }
.cx-burst i:nth-child(1) { --a: 0deg; --r: 9em; } .cx-burst i:nth-child(2) { --a: 26deg; --r: 7em; } .cx-burst i:nth-child(3) { --a: 51deg; --r: 10em; } .cx-burst i:nth-child(4) { --a: 77deg; --r: 8em; }
.cx-burst i:nth-child(5) { --a: 103deg; --r: 9.5em; } .cx-burst i:nth-child(6) { --a: 129deg; --r: 7.5em; } .cx-burst i:nth-child(7) { --a: 154deg; --r: 10em; } .cx-burst i:nth-child(8) { --a: 180deg; --r: 8.5em; }
.cx-burst i:nth-child(9) { --a: 206deg; --r: 9em; } .cx-burst i:nth-child(10) { --a: 231deg; --r: 7em; } .cx-burst i:nth-child(11) { --a: 257deg; --r: 10em; } .cx-burst i:nth-child(12) { --a: 283deg; --r: 8em; }
.cx-burst i:nth-child(13) { --a: 309deg; --r: 9.5em; } .cx-burst i:nth-child(14) { --a: 334deg; --r: 7.5em; }
.cxd { position: relative; background: var(--ink); color: var(--ink-fg); border-radius: 1.2em 1.2em .3em .3em; padding: .85em .9em 1.25em; box-shadow: var(--lift);
  -webkit-mask: radial-gradient(circle at 50% 100%, transparent .32em, #000 .36em) 50% 100% / .82em 100% repeat-x; mask: radial-gradient(circle at 50% 100%, transparent .32em, #000 .36em) 50% 100% / .82em 100% repeat-x; }
.cxd-h { display: flex; justify-content: space-between; align-items: center; margin: 0; font-size: .8em; font-weight: 600; color: var(--ink-fg-2); }
.cxd-live { display: inline-flex; align-items: center; gap: .35em; color: var(--cx-good); font: 700 .82em/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.cxd-live i { width: .5em; height: .5em; border-radius: 50%; background: var(--cx-good); }
.cxd-tw { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: .55em; border-radius: .8em; box-shadow: inset 0 0 0 1px var(--ink-line); background: color-mix(in srgb, var(--ink-fg) 5%, transparent); }
.cxd-tw > span { position: relative; min-width: 0; display: grid; gap: .15em; padding: .5em .45em .55em .75em; }
.cxd-tw > span::before { content: ""; position: absolute; left: 0; top: .6em; bottom: .6em; width: .22em; border-radius: 0 .2em .2em 0; background: var(--cx-in); }
.cxd-tw > .out::before { background: var(--cx-out); }
.cxd-tw > span + span { box-shadow: -1px 0 0 var(--ink-line); }
.cxd-tw small { font-size: .72em; font-weight: 600; color: var(--ink-fg-2); }
.cxd-tw b { font-size: 1.22em; font-weight: 700; font-stretch: 76%; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cxd-bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .28em; margin-top: .6em; }
.cxd-bars span { display: grid; grid-template-rows: 2em 1.1em; row-gap: .14em; }
.cxd-bars i { display: block; border-radius: .14em; transition: transform .7s var(--ease); }
.cxd-bars .u { align-self: end; background: var(--cx-in); transform-origin: 50% 100%; }
.cxd-bars .o { align-self: start; background: var(--cx-out); transform-origin: 50% 0; }
.cxd-bars .u.q1 { height: 10%; } .cxd-bars .u.q2 { height: 20%; } .cxd-bars .u.q3 { height: 30%; } .cxd-bars .u.q4 { height: 40%; } .cxd-bars .u.q5 { height: 50%; } .cxd-bars .u.q6 { height: 60%; } .cxd-bars .u.q7 { height: 70%; } .cxd-bars .u.q8 { height: 80%; } .cxd-bars .u.q9 { height: 90%; } .cxd-bars .u.q10 { height: 100%; }
.cxd-bars .o.q1 { height: 10%; } .cxd-bars .o.q2 { height: 20%; } .cxd-bars .o.q3 { height: 30%; } .cxd-bars .o.q4 { height: 40%; } .cxd-bars .o.q5 { height: 50%; } .cxd-bars .o.q6 { height: 60%; }
.tour.play .cxb:not(.in) .cxd-bars i { transform: scaleY(0); }
.tour.play .cxb.in .cxd-bars span:nth-child(n+4) i { transition-delay: .5s; } .tour.play .cxb.in .cxd-bars span:nth-child(n+7) i { transition-delay: .65s; } .tour.play .cxb.in .cxd-bars span:nth-child(n+10) i { transition-delay: .8s; }
.tour.play .cxb.in .cxd-bars span:nth-child(-n+3) i { transition-delay: .35s; }
.cxd-left { display: flex; align-items: baseline; gap: .5em; margin: .6em 0 0; padding-top: .5em; border-top: 3px double var(--ink-dots); }
.cxd-left span { font-size: .86em; font-weight: 700; white-space: nowrap; }
.cxd-left i { flex: 1; min-width: .5em; border-bottom: 2px dotted var(--ink-dots); transform: translateY(-.3em); }
.cxd-left b { font-size: 1.75em; font-weight: 700; font-stretch: 76%; letter-spacing: -.015em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cxd-keep { margin: .3em 0 0; text-align: right; font-size: .76em; color: var(--ink-fg-2); }
.cxd-keep b { color: var(--ink-fg); }
.cxd-pill { margin: 0; display: flex; align-items: center; gap: .5em; padding: .6em .8em; border-radius: .95em; font-size: .86em; box-shadow: var(--card); }
.cxd-pill .ic { flex: none; width: 1.3em; height: 1.3em; }
.cxd-pill.bad { background: color-mix(in srgb, #e5484d 11%, var(--surface)); color: #c42a30; }
.cxd-pill.due { background: color-mix(in srgb, var(--accent) 15%, var(--surface)); color: var(--fg); }
.cxd-pill.due .ic { color: var(--accent-fg); }
@media (prefers-color-scheme: dark) { .cxd-pill.bad { color: #ff8f93; } }
.cu-due em { font-style: normal; }

/* the businesses to see it for, above the phone */
.tour-biz { display: flex; align-items: center; gap: 4px; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 5px; border-radius: 999px; background: var(--surface); box-shadow: var(--card); }
.tour-biz::-webkit-scrollbar { display: none; }
@media (max-width: 420px) { .tour-biz:has(.tb.yours:not([hidden])) .tb-x { display: none; } }
.tb-l { padding: 0 6px 0 10px; font-size: 13px; font-weight: 600; color: var(--fg-3); white-space: nowrap; }
.tour-biz:has(.tb.yours:not([hidden])) .tb-l { display: none; }
.tb { appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 13px; border-radius: 999px; background: transparent; color: var(--fg-2); font: 650 13.5px/1 var(--f); white-space: nowrap; transition: background .25s var(--ease), color .25s var(--ease); }
.tb:hover { color: var(--fg); }
.tb .ic { width: 17px; height: 17px; }
.tb.on { background: var(--fg); color: var(--bg); }
.tb.yours.on { background: var(--accent); color: var(--on-accent); }
@media (max-width: 420px) { .tb-l, .tb .ic { display: none; } .tb { padding: 0 12px; } }

/* RouteIQ for a shop or a salon: who to expect, what to have ready, who to remind */
.riq-k .tv-kv { color: #2563eb; }
@media (prefers-color-scheme: dark) { .riq-k .tv-kv { color: #7aa7ff; } }
.tv-ks { font-size: .76em; color: var(--fg-3); }
.ex-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 1.05em; background: var(--surface); box-shadow: var(--card); }
.ex-list li { display: flex; align-items: center; gap: .7em; padding: .6em .9em; box-shadow: inset 0 1px 0 var(--line); }
.ex-list li:first-child { box-shadow: none; }
.ex-list time { flex: none; width: 3.2em; font: 600 .78em/1 var(--mono); color: #2563eb; }
@media (prefers-color-scheme: dark) { .ex-list time { color: #7aa7ff; } }
.ex-list span { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.28; }
.ex-list b { font-size: .9em; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-list small { font-size: .74em; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-list em { flex: none; padding: .25em .55em; border-radius: 999px; background: color-mix(in srgb, #e5484d 13%, transparent); color: #c42a30; font: 700 .7em/1 var(--f); font-style: normal; text-transform: uppercase; letter-spacing: .05em; }
@media (prefers-color-scheme: dark) { .ex-list em { color: #ff8f93; } }
.ready { padding: .8em 1em .85em; border-radius: 1.05em; background: var(--ink); color: var(--ink-fg); }
.ready small { display: block; font-size: .7em; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-fg-3); }
.ready div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4em; margin-top: .45em; }
.ready span { display: flex; flex-direction: column; font-size: .78em; color: var(--ink-fg-2); }
.ready span b { font-size: 1.75em; line-height: 1.05; font-weight: 700; font-stretch: 80%; color: var(--ink-fg); font-variant-numeric: tabular-nums; }
.tal.soft { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--fg); }
.tal.soft .ic { color: var(--accent-fg); }
.tv-go.wa { background: #25a35a; color: #fff; box-shadow: 0 1em 1.6em -1em #25a35a; }

/* the steps, and what each one means */
.tour-nav { display: flex; gap: 4px; width: min(100%, 540px); }
.tn { flex: 1 1 0; min-width: 0; appearance: none; border: 0; background: none; cursor: pointer; display: flex; flex-direction: column; gap: 8px; padding: 10px 0 6px; color: var(--fg-3); font: 650 12px/1.2 var(--f); letter-spacing: -.005em; text-align: center; border-radius: 10px; }
.tn:hover { color: var(--fg); }
.tn-bar { display: block; height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--fg) 13%, transparent); overflow: hidden; }
.tn-bar i { display: block; height: 100%; border-radius: inherit; background: var(--fg); transform-origin: left; transform: scaleX(var(--p, 0)); }
.tn.on, .tn.done { color: var(--fg); }
.tn.done .tn-bar i, .tour:not(.play) .tn.on .tn-bar i { transform: none; }
.tn-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 420px) { .tn-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .tn { padding: 14px 0; } }
.tour-caps { display: grid; width: min(100%, 440px); text-align: center; }
.tcap { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .45s var(--ease), transform .55s var(--ease), visibility 0s .55s; }
.tcap.on { opacity: 1; visibility: visible; transform: none; transition: opacity .45s var(--ease) .1s, transform .55s var(--ease) .1s, visibility 0s; }
.tcap h2 { margin: 4px 0 0; font: 650 clamp(22px, 2.2vw, 26px)/1.12 var(--f); font-stretch: 88%; letter-spacing: -.012em; }
.tcap p:last-child { margin: 8px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--fg-2); text-wrap: pretty; }
@media (prefers-reduced-motion: reduce) { .tf-caret, .ph i, .tvp-live i, .cu-dots i.x, .cx-fl path, .cx-orb, .cx-orb i { animation: none !important; } }

/* ---------- problem: receipt stubs ---------- */
.stubs { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .stubs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .stubs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }
.stub { position: relative; padding: 26px 22px 24px; background: var(--surface); box-shadow: var(--card); transform: rotate(var(--r, 0deg)); transition: transform .4s var(--spring), box-shadow .3s ease;
  -webkit-mask: radial-gradient(circle at 50% 0, transparent 5px, #000 5.5px) 50% 0 / 14px 51% repeat-x, radial-gradient(circle at 50% 100%, transparent 5px, #000 5.5px) 50% 100% / 14px 51% repeat-x;
  mask: radial-gradient(circle at 50% 0, transparent 5px, #000 5.5px) 50% 0 / 14px 51% repeat-x, radial-gradient(circle at 50% 100%, transparent 5px, #000 5.5px) 50% 100% / 14px 51% repeat-x; }
.stub:nth-child(6n+1) { --r: -1.4deg; } .stub:nth-child(6n+2) { --r: 1.1deg; } .stub:nth-child(6n+3) { --r: -.7deg; }
.stub:nth-child(6n+4) { --r: .9deg; } .stub:nth-child(6n+5) { --r: -1deg; } .stub:nth-child(6n+6) { --r: 1.3deg; }
.stub:hover { transform: rotate(0deg) translateY(-3px); }
.stub-n { font: 600 12px/1 var(--mono); letter-spacing: .1em; color: var(--fg-3); }
.stub h3 { margin: 16px 0 12px; font: 600 22px/1.15 var(--f); font-stretch: 90%; letter-spacing: -.01em; }
.stub p { margin: 0; padding-top: 12px; border-top: 1.5px dashed var(--line-2); font: 500 12.5px/1.55 var(--mono); color: var(--fg-3); }
.stub .faded { opacity: .45; filter: blur(.3px); }
.turn { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: clamp(40px, 6vw, 72px); font: 600 clamp(22px, 3vw, 32px)/1.1 var(--f); font-stretch: 88%; letter-spacing: -.012em; text-align: center; }
.turn .ic { width: 28px; height: 28px; color: var(--accent-fg); transform: rotate(90deg); }

/* ---------- how it works ---------- */
.how { background: var(--bg-2); }
.steps { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); counter-reset: step; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }
.step { background: var(--surface); border-radius: 26px; padding: 26px; box-shadow: var(--card); display: grid; gap: 14px; align-content: start; }
.step .num { font: 600 13px/1 var(--mono); letter-spacing: .1em; color: var(--accent-fg); }
.step h3 { font: 600 clamp(26px, 2.4vw, 30px)/1.08 var(--f); font-stretch: 86%; letter-spacing: -.012em; }
.step p { margin: 0; color: var(--fg-2); font-size: 17px; line-height: 1.55; }
.mini { margin-top: 6px; border-radius: 18px; background: var(--raised); box-shadow: 0 0 0 1px var(--line); padding: 16px; display: grid; gap: 9px; font: 500 13.5px/1.45 var(--mono); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px; border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); font: 600 14px/1 var(--f); color: var(--fg-2); }
.chip .ic { width: 16px; height: 16px; color: var(--fg-3); }
.row { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.row span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.row i { flex: 1; min-width: 8px; border-bottom: 1.5px dotted var(--line-2); transform: translateY(-4px); }
.row b { font-weight: 600; white-space: nowrap; }
.row .ok { width: 16px; height: 16px; color: var(--in-fg); align-self: center; }
.row.dup span, .row.dup b { text-decoration: line-through; color: var(--fg-3); }
.row .tag { flex: none; overflow: visible; font: 600 10.5px/1 var(--mono); padding: 4px 6px; border-radius: 6px; background: var(--well); color: var(--fg-3); text-transform: uppercase; letter-spacing: .04em; align-self: center; }
.in-c { color: var(--in-fg); } .out-c { color: var(--out); }
.mini.slipmini { background: var(--ink); color: var(--ink-fg); box-shadow: none; padding: 16px 16px 20px; border-radius: 16px 16px 4px 4px;
  -webkit-mask: radial-gradient(circle at 50% 100%, transparent 4.5px, #000 5px) 50% 100% / 12px 100% repeat-x; mask: radial-gradient(circle at 50% 100%, transparent 4.5px, #000 5px) 50% 100% / 12px 100% repeat-x; }
.slipmini .row i { border-bottom-color: var(--ink-dots); }
.slipmini .row span { color: var(--ink-fg-2); }
.slipmini .big { display: flex; align-items: baseline; justify-content: space-between; margin-top: 6px; padding-top: 10px; border-top: 3px double var(--ink-dots); }
.slipmini .big span { font-weight: 700; letter-spacing: .1em; font-size: 11.5px; }
.slipmini .big b { font: 650 32px/1 var(--f); font-stretch: 76%; font-variant-numeric: tabular-nums; }
/* the three steps play by themselves while they are on screen: each one lights up in turn, its files arrive, its
   lines are filed, its total counts up (demos.js); with less motion they are simply shown */
.st-top { display: flex; align-items: center; gap: 14px; }
.st-bar { flex: 1; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.st-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.how .step { transition: box-shadow .5s var(--ease), transform .6s var(--spring); }
.steps.auto .step.on { box-shadow: var(--lift), 0 0 0 2px color-mix(in srgb, var(--accent) 70%, transparent); transform: translateY(-4px); }
.steps.auto .step.on .st-bar i { animation: stBar var(--dur, 3s) linear forwards; }
.steps.auto .step.done .st-bar i { transform: none; }
@keyframes stBar { to { transform: none; } }
.steps.auto .mini :is(.chip, .row, .big) { transition: opacity .45s var(--ease), transform .6s var(--spring); }
.steps.auto .mini :is(.chip, .row, .big):not(.in) { opacity: 0; transform: translateY(8px) scale(.97); }
.steps.auto .row.in .ok { animation: okIn .5s var(--spring) .2s both; }
@keyframes okIn { from { transform: scale(0); } }
.steps.auto .row.dup.in .tag { animation: okIn .55s var(--spring) .35s both; }
.steps.auto .chip.in .ic { color: var(--accent-fg); }

/* ---------- showcase ---------- */
.window { position: relative; border-radius: 22px; overflow: hidden; background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 40px 80px -40px rgba(16, 24, 40, .45); }
.window img { width: 100%; height: auto; }
/* phones get the phone version of Home, in a phone frame */
@media (max-width: 639.98px) {
  .window { width: min(300px, 78vw); margin: 0 auto; border-radius: 46px; padding: 9px; background: #0E0F12; box-shadow: 0 0 0 1.5px #2A2D34, 0 40px 70px -30px rgba(10, 14, 22, .55); }
  .window img { border-radius: 37px; }
}
.window-cap { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-top: 22px; color: var(--fg-3); font-size: 14.5px; }
.window-cap span { display: inline-flex; align-items: center; gap: 8px; }
.window-cap i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; background: var(--fg); }
.window-cap .k-in { background: var(--in); } .window-cap .k-out { background: var(--accent); }
.shot-fig { margin: 0; }
.feature { display: grid; gap: clamp(36px, 5vw, 72px); align-items: center; margin-top: clamp(80px, 11vw, 150px); }
@media (min-width: 960px) { .feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .feature.flip .f-copy { order: 2; } }
.f-copy { max-width: 520px; }
.f-copy .h3 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.02; font-stretch: 82%; }
.f-copy p { color: var(--fg-2); margin: 18px 0 0; font-size: 18px; }
.ticks { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 2px; }
.ticks li { display: flex; align-items: baseline; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 16px; color: var(--fg-2); }
.ticks li:last-child { border-bottom: 1px solid var(--line); }
.ticks .ic { width: 18px; height: 18px; color: var(--in-fg); align-self: center; }
.ticks b { color: var(--fg); }
.devices { position: relative; display: flex; justify-content: center; align-items: flex-end; min-height: 420px; }
.phone { position: relative; width: min(300px, 74vw); border-radius: 46px; padding: 9px; background: #0E0F12; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset, 0 0 0 1.5px #2A2D34, 0 40px 70px -30px rgba(10, 14, 22, .55); flex: none; }
.phone img { border-radius: 37px; width: 100%; height: auto; aspect-ratio: 390 / 844; object-fit: cover; background: var(--bg); }
.phone.back { position: absolute; width: min(250px, 60vw); transform: translate(-46%, -36px) rotate(-5deg); opacity: .98; }
.phone.back + .phone { transform: translateX(22%); }
@media (max-width: 520px) { .phone.back { display: none; } .phone.back + .phone { transform: none; } }
.quote-slip { margin-top: 26px; display: inline-block; background: var(--ink); color: var(--ink-fg); padding: 14px 18px 18px; border-radius: 12px 12px 3px 3px; font: 500 13.5px/1.55 var(--mono);
  -webkit-mask: radial-gradient(circle at 50% 100%, transparent 4.5px, #000 5px) 50% 100% / 12px 100% repeat-x; mask: radial-gradient(circle at 50% 100%, transparent 4.5px, #000 5px) 50% 100% / 12px 100% repeat-x; }
.quote-slip span { display: block; color: var(--ink-fg-3); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; }


/* ---------- the stage: the flow, and every kind of business ----------
   One calm stage that follows the theme: a soft day stage in the light theme, a night one in the dark (and the demo
   sheet always dark). Glowing wires, a slow aurora behind, gold for money. */
.night { --n-bg: #E8EBF0; --n-fg: #14161B; --n-fg-2: #454C59; --n-fg-3: #5B6370; --n-line: rgba(16, 24, 40, .08); --n-line-2: rgba(16, 24, 40, .14);
  --n-card: rgba(255, 255, 255, .6); --n-card-2: #FFFFFF; --n-tile: #FFFFFF; --n-msg: #F0F2F5; --n-dot: rgba(16, 24, 40, .26); --n-chip: rgba(16, 24, 40, .055); --n-chip-2: rgba(16, 24, 40, .1);
  --n-face: #FFFFFF; --n-face-2: #FCFCFD; --n-lift: 0 1px 2px rgba(16, 24, 40, .05), 0 16px 34px -22px rgba(16, 24, 40, .32); --n-dash: #F3F4F6;
  --n-dash-shadow: 0 50px 90px -46px rgba(16, 24, 40, .5), 0 0 90px -40px rgba(242, 179, 61, .4);
  --gold: #F2B33D; --gold-fg: #8A5A00; --good: #0B7A53; --bad: #C8343A; --peek-good: #5DDDA3;
  --c-wa: #0FA36B; --c-sms: #0284C7; --c-stmt: #7C3AED; --c-pb: #EA580C; --c-social: #DB2777; --c-photo: #64748B; --c-mk: #CA8A04; --c-hand: #64748B;
  position: relative; isolation: isolate; overflow: hidden; background: var(--n-bg); color: var(--n-fg); padding: clamp(72px, 10vw, 140px) 0; }
@media (prefers-color-scheme: dark) {
  .night { --n-bg: #101318; --n-fg: #F3F1EA; --n-fg-2: rgba(243, 241, 234, .74); --n-fg-3: rgba(243, 241, 234, .52); --n-line: rgba(255, 255, 255, .08); --n-line-2: rgba(255, 255, 255, .15);
    --n-card: rgba(255, 255, 255, .035); --n-card-2: rgba(255, 255, 255, .065); --n-tile: rgba(20, 23, 29, .82); --n-msg: rgba(0, 0, 0, .28); --n-dot: rgba(255, 255, 255, .22); --n-chip: rgba(255, 255, 255, .065); --n-chip-2: rgba(255, 255, 255, .1);
    --n-face: rgba(255, 255, 255, .05); --n-face-2: rgba(255, 255, 255, .02); --n-lift: 0 0 0 0 transparent; --n-dash: linear-gradient(180deg, #1B1E24, #13151A);
    --n-dash-shadow: 0 40px 80px -40px rgba(0, 0, 0, .85), 0 0 90px -40px rgba(245, 188, 76, .35);
    --gold: #F5BC4C; --gold-fg: #F5BC4C; --good: #34D399; --bad: #F87171; --peek-good: #0B7A53;
    --c-wa: #34D399; --c-sms: #38BDF8; --c-stmt: #A78BFA; --c-pb: #FB923C; --c-social: #F472B6; --c-photo: #CBD5E1; --c-mk: #FACC15; --c-hand: #94A3B8;
    color-scheme: dark; box-shadow: inset 0 1px 0 var(--n-line), inset 0 -1px 0 var(--n-line); }
}
.demo { --n-bg: #0D0F13; --n-fg: #F3F1EA; --n-fg-2: rgba(243, 241, 234, .74); --n-fg-3: rgba(243, 241, 234, .52); --n-line: rgba(255, 255, 255, .08); --n-line-2: rgba(255, 255, 255, .15);
  --n-card: rgba(255, 255, 255, .035); --n-card-2: rgba(255, 255, 255, .065); --n-msg: rgba(0, 0, 0, .28); --n-chip: rgba(255, 255, 255, .065);
  --gold: #F5BC4C; --gold-fg: #F5BC4C; --good: #34D399; --bad: #F87171;
  --c-wa: #34D399; --c-sms: #38BDF8; --c-stmt: #A78BFA; --c-pb: #FB923C; --c-social: #F472B6; --c-photo: #CBD5E1; --c-mk: #FACC15; --c-hand: #94A3B8; color-scheme: dark; }
.night::before { content: ""; position: absolute; inset: -20% -15%; z-index: -1; pointer-events: none;
  background: radial-gradient(38% 32% at 18% 28%, rgba(52, 211, 153, .10), transparent 70%), radial-gradient(34% 30% at 82% 72%, rgba(245, 188, 76, .11), transparent 70%), radial-gradient(30% 28% at 62% 16%, rgba(56, 189, 248, .08), transparent 70%); }
.motion .night::before { animation: aurora 28s ease-in-out infinite alternate; }
@keyframes aurora { from { transform: translate3d(-2%, -1%, 0) scale(1); } to { transform: translate3d(2.5%, 2%, 0) scale(1.08); } }
.night .kicker { color: var(--n-fg-3); }
.night .lede { color: var(--n-fg-2); }
.k-wa { --c: var(--c-wa); } .k-sms { --c: var(--c-sms); } .k-stmt { --c: var(--c-stmt); } .k-pb { --c: var(--c-pb); }
.k-social { --c: var(--c-social); } .k-photo { --c: var(--c-photo); } .k-mk { --c: var(--c-mk); } .k-hand { --c: var(--c-hand); }

/* the flow: sources → Risiti → dashboard. Wires are drawn by demos.js between the boxes, whatever the layout. */
.fl-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 64px; }
.fl-wires { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.fl-wires .w { fill: none; stroke: var(--n-line-2); stroke-width: 1.5; transition: stroke .5s ease; }
.fl-wires .w.hot { stroke: color-mix(in srgb, var(--c, var(--gold)) 70%, transparent); }
.fl-wires .w2 { fill: none; stroke: var(--n-dot); stroke-width: 1.5; stroke-dasharray: 1.5 11; stroke-linecap: round; }
.motion .fl-wires .w2 { animation: wire 1.4s linear infinite; }
@keyframes wire { to { stroke-dashoffset: -12.5; } }
.fl-wires .pk { fill: var(--c, var(--gold)); }
.fl-wires .pk-h { fill: var(--c, var(--gold)); opacity: .22; }
.fl-srcs { position: relative; z-index: 1; width: 100%; max-width: 560px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) and (max-width: 999.98px) { .fl-srcs { max-width: none; grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fl-src { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 10px; padding: 12px; border-radius: 18px; background: var(--n-tile);
  box-shadow: inset 0 0 0 1px var(--n-line), var(--n-lift); transition: box-shadow .4s ease, transform .45s var(--spring); }
.fl-src.hot { transform: translateY(-2px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 60%, transparent), 0 0 0 4px color-mix(in srgb, var(--c) 12%, transparent), 0 18px 40px -20px var(--c); }
.fl-src-ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
.fl-src-ic .ic { width: 19px; height: 19px; }
.fl-src-t { display: grid; gap: 3px; min-width: 0; }
.fl-src-t b { font: 600 14px/1.15 var(--f); }
.fl-src-t small { font-size: 11.5px; color: var(--n-fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-src-msg { grid-column: 1 / -1; margin-top: 9px; padding: 8px 9px 0; border-bottom: 8px solid transparent; border-radius: 10px; background: var(--n-msg); font: 500 11px/1.45 var(--mono); color: var(--n-fg-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(2 * 1.45em + 16px); transition: color .3s ease; }
.fl-src.hot .fl-src-msg { color: var(--n-fg); }
.fl-src-msg.swap { animation: msgIn .45s var(--ease); }
@keyframes msgIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* phones: four small source tiles in a row; the message being read shows under Risiti instead */
.fl-raw { display: none; }
@media (max-width: 639.98px) {
  .fl-srcs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
  .fl-src { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 7px; padding: 11px 4px 10px; border-radius: 15px; }
  .fl-src-ic { width: 32px; height: 32px; border-radius: 11px; }
  .fl-src-t b { font-size: 11.5px; line-height: 1.2; }
  .fl-src-t small, .fl-src-msg { display: none; }
  .fl-raw { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 330px; margin: 0 0 10px; padding: 8px 10px 0; border-bottom: 8px solid transparent; border-radius: 10px; background: var(--n-msg);
    font: 500 11px/1.45 var(--mono); color: var(--n-fg-2); min-height: calc(2 * 1.45em + 16px); }
  .fl-raw.swap { animation: msgIn .45s var(--ease); }
  .fl-verb { margin-top: 28px; }
}
.fl-core { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; }
.fl-orb { position: relative; width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 32%, #2B2517, #15171C 72%);
  box-shadow: 0 0 0 1px rgba(245, 188, 76, .4), 0 0 60px -6px rgba(245, 188, 76, .42), inset 0 1px 0 rgba(255, 255, 255, .1); }
.fl-orb .glyph { width: 40px; height: 46px; position: relative; z-index: 1; }
.fl-ring { position: absolute; inset: -11px; border-radius: 50%; border: 1.5px dashed rgba(245, 188, 76, .38); }
.fl-ring.r2 { inset: -24px; border: 1.5px solid rgba(245, 188, 76, .08); border-top-color: rgba(245, 188, 76, .6); }
.motion .fl-ring { animation: spin 22s linear infinite; }
.motion .fl-ring.r2 { animation-duration: 5s; }
@keyframes spin { to { transform: rotate(360deg); } }
.fl-orb.pulse { animation: orb .8s var(--ease); }
@keyframes orb { 40% { box-shadow: 0 0 0 1px rgba(245, 188, 76, .9), 0 0 110px 4px rgba(245, 188, 76, .6), inset 0 1px 0 rgba(255, 255, 255, .1); transform: scale(1.06); } }
.fl-verb { margin: 30px 0 10px; font: 600 11.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-fg); min-height: 1.3em; }
.fl-verb.swap { animation: msgIn .4s var(--ease); }
.fl-ticket { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 300px; min-height: 58px; align-content: flex-start; }
.tk { display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border-radius: 8px; font: 600 11.5px/1 var(--mono); background: var(--n-card-2); box-shadow: inset 0 0 0 1px var(--n-line-2); color: var(--n-fg); white-space: nowrap; }
.tk.amt { color: var(--gold-fg); } .tk.to { color: var(--good); } .tk.out { color: var(--c-pb); } .tk.skip { color: var(--c-mk); }
.fl-ticket.new .tk { animation: tkIn .5s var(--spring) both; }
.fl-ticket.new .tk:nth-child(2) { animation-delay: .07s; } .fl-ticket.new .tk:nth-child(3) { animation-delay: .14s; } .fl-ticket.new .tk:nth-child(4) { animation-delay: .21s; }
@keyframes tkIn { from { opacity: 0; transform: translateY(6px) scale(.92); } to { opacity: 1; transform: none; } }
/* the dashboard the flow ends in: the app's home screen in small (sales, expenses and what is left on the slip),
   then where the sales came from, the latest payments and what Risiti noticed */
.fl-dash { --fd-in: #3DD68C; --fd-out: #F5B841; --fd-thumb: rgba(246, 244, 239, .16); --fd-flash: #F5BC4C;
  position: relative; z-index: 1; width: 100%; max-width: 400px; display: grid; gap: 11px; padding: 14px; border-radius: 30px; background: var(--n-dash); box-shadow: 0 0 0 1px var(--n-line-2), var(--n-dash-shadow); }
@media (prefers-color-scheme: dark) { .fl-dash { --fd-in: #0E9F6E; --fd-out: #B7791F; --fd-thumb: #FFFFFF; --fd-flash: #8A5A00; } }
.fd-head { display: flex; align-items: center; gap: 10px; padding: 2px 4px 0; }
.fd-mk { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #fff; background: linear-gradient(150deg, #5CCDFA, #0E7490); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 8px 16px -10px #0E7490; }
.fd-mk .ic { width: 21px; height: 21px; }
.fd-t { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.fd-t small { font-size: 12px; color: var(--n-fg-3); }
.fd-t b { font: 650 17px/1.2 var(--f); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-live { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px; border-radius: 999px; background: color-mix(in srgb, var(--good) 13%, transparent); color: var(--good); font: 600 11.5px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.fd-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 60%, transparent); }
.motion .fd-live i { animation: live 1.8s ease-out infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 60%, transparent); } 80%, 100% { box-shadow: 0 0 0 8px transparent; } }
.fd-slip { background: var(--ink); color: var(--ink-fg); border-radius: 20px 20px 5px 5px; padding: 13px 13px 20px;
  -webkit-mask: radial-gradient(circle at 50% 100%, transparent 4.5px, #000 5px) 50% 100% / 12px 100% repeat-x; mask: radial-gradient(circle at 50% 100%, transparent 4.5px, #000 5px) 50% 100% / 12px 100% repeat-x; }
.fd-sh { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-fg-2); }
.fd-seg { display: inline-flex; padding: 2px; border-radius: 9px; background: var(--ink-line); }
.fd-seg span { padding: 4px 8px; border-radius: 7px; font-size: 11.5px; font-weight: 600; }
.fd-seg .on { background: var(--fd-thumb); color: var(--ink-fg); }
.fd-twin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 10px; border-radius: 15px; background: color-mix(in srgb, var(--ink-fg) 5%, transparent); box-shadow: inset 0 0 0 1px var(--ink-line); }
.fd-tw { position: relative; min-width: 0; display: grid; gap: 5px; padding: 11px 10px 12px 15px; }
.fd-tw::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--fd-in); }
.fd-tw.out::before { background: var(--fd-out); }
.fd-tw + .fd-tw { box-shadow: -1px 0 0 var(--ink-line); }
.fd-k { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-fg-2); }
.fd-k i { width: 8px; height: 8px; border-radius: 2.5px; background: var(--fd-in); }
.fd-tw.out .fd-k i { background: var(--fd-out); }
.fd-tw b { font: 650 clamp(24px, 2.4vw, 30px)/1 var(--f); font-stretch: 76%; letter-spacing: -.015em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fd-tw small { font-size: 11.5px; color: var(--ink-fg-3); white-space: nowrap; }
.fd-left { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 3px double var(--ink-dots); }
.fd-left span { font-size: 14px; font-weight: 650; white-space: nowrap; }
.fd-left i { flex: 1; min-width: 10px; border-bottom: 2px dotted var(--ink-dots); transform: translateY(-5px); }
.fd-left b { font: 650 clamp(30px, 3vw, 38px)/1 var(--f); font-stretch: 76%; letter-spacing: -.015em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fd-keep { margin: 6px 0 0; text-align: right; font-size: 12.5px; color: var(--ink-fg-2); }
.fd-keep b { color: var(--ink-fg); }
.fd-tw b.bump, .fd-left b.bump { animation: fdBump .6s var(--spring); }
@keyframes fdBump { 30% { transform: translateY(-2px); color: var(--fd-flash); } }
@keyframes bump { 30% { color: var(--gold); transform: translateY(-2px); } }
.fd-card { display: grid; gap: 10px; padding: 13px 14px; border-radius: 18px; background: var(--n-card-2); box-shadow: inset 0 0 0 1px var(--n-line), var(--n-lift); }
.fd-ch { margin: 0; display: flex; justify-content: space-between; gap: 8px; font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--n-fg-3); }
.fd-bars { display: grid; gap: 9px; }
.fd-bar { display: grid; grid-template-columns: minmax(0, 116px) minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 13px; color: var(--n-fg-2); }
.fd-bar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-bar i { height: 8px; border-radius: 99px; background: var(--n-chip); overflow: hidden; }
.fd-bar em { display: block; height: 100%; width: var(--w, 40%); border-radius: 99px; background: linear-gradient(90deg, #B7791F, var(--gold)); transition: width .9s var(--spring); }
.fd-bar b { min-width: 4.5em; text-align: right; font: 600 12.5px/1 var(--mono); color: var(--n-fg); font-variant-numeric: tabular-nums; }
.fd-bar.hot span { color: var(--n-fg); }
.fd-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.fd-feed li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 5px 0; font-size: 13px; color: var(--n-fg-2); }
.fd-feed li:nth-child(n+4) { display: none; }
.fd-feed time { font: 500 11.5px/1 var(--mono); color: var(--n-fg-3); }
.fd-feed span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-feed b { font: 600 13px/1 var(--mono); color: var(--good); }
.fd-feed li.out b { color: var(--c-pb); }
.fd-feed li.new { animation: rowIn .55s var(--spring); }
@keyframes rowIn { from { opacity: 0; transform: translateY(-8px); background: color-mix(in srgb, var(--gold) 20%, transparent); } to { opacity: 1; transform: none; } }
.fd-insight { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px; border-radius: 16px; background: color-mix(in srgb, var(--ins, var(--bad)) 11%, var(--n-card-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ins, var(--bad)) 30%, transparent); font-size: 13.5px; line-height: 1.4; color: var(--n-fg); }
.fd-insight .ic { width: 18px; height: 18px; color: var(--ins, var(--bad)); margin-top: 1px; }
.fd-insight.good { --ins: var(--good); } .fd-insight.gold { --ins: var(--gold-fg); }
.fd-insight.swap { animation: msgIn .5s var(--ease); }
@media (min-width: 1000px) {
  .fl-stage { grid-template-columns: minmax(0, 300px) minmax(0, 1fr) minmax(0, 390px); align-items: center; row-gap: 0; min-height: 540px; }
  .fl-srcs { grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: none; }
  .fl-dash { justify-self: end; }
  .fl-verb { margin-top: 34px; }
}

/* ---------- every kind of business: cards, each with a day to watch ---------- */
.biz .h2 { max-width: 14em; }
.biz .section-head { max-width: 820px; }
.bz-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .bz-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1080px) { .bz-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }
.bz.feat { grid-column: 1 / -1; }
@media (max-width: 719.98px) { .bz.wide { grid-column: 1 / -1; } }
@media (min-width: 1080px) { .bz.feat { grid-column: span 2; grid-row: span 2; } .bz.wide { grid-column: span 2; } }
.bz { --tint: #9AA3B2; --tint-fg: color-mix(in srgb, var(--tint) 58%, #101318); min-width: 0; }
@media (prefers-color-scheme: dark) { .bz { --tint-fg: var(--tint); } }
.t-water { --tint: #38BDF8; } .t-shop { --tint: #F59E0B; } .t-market { --tint: #22C55E; } .t-food { --tint: #FB923C; } .t-bar { --tint: #A78BFA; } .t-beauty { --tint: #F472B6; }
.t-pharm { --tint: #2DD4BF; } .t-hard { --tint: #A3B1C6; } .t-agro { --tint: #84CC16; } .t-fash { --tint: #FB7185; } .t-elec { --tint: #818CF8; } .t-whole { --tint: #D6A15B; }
.t-online { --tint: #C084FC; } .t-serv { --tint: #22D3EE; } .t-trans { --tint: #F87171; } .t-other { --tint: #F5BC4C; }
.bz-card { position: relative; height: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px; border-radius: 22px; overflow: hidden;
  background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--tint) 17%, transparent), transparent 62%), linear-gradient(180deg, var(--n-face), var(--n-face-2));
  box-shadow: inset 0 0 0 1px var(--n-line), var(--n-lift); transition: transform .4s var(--spring), box-shadow .35s ease; }
.bz-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .06) 45%, transparent 60%); transform: translateX(-100%); transition: transform .9s var(--ease); }
.bz-card:hover, .bz-card:has(:focus-visible) { transform: translateY(-4px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 50%, transparent), 0 26px 50px -24px color-mix(in srgb, var(--tint) 60%, transparent); }
.bz-card:hover::after { transform: translateX(100%); }
.bz-card:has(:focus-visible) { outline: 2.5px solid var(--gold); outline-offset: 3px; }
.bz-ic { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; color: var(--tint-fg); background: color-mix(in srgb, var(--tint) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 32%, transparent); }
.bz-ic .ic { width: 24px; height: 24px; }
.bz-name { font: 600 21px/1.15 var(--f); font-stretch: 88%; letter-spacing: -.01em; margin: 6px 0 0; }
.bz-name a { color: inherit; text-decoration: none; }
.bz-name a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 22px; }
.bz-name a:focus-visible { outline: none; }
.bz-line { margin: 0; color: var(--n-fg-2); font-size: 15.5px; line-height: 1.45; text-wrap: pretty; }
.bz-srcs { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; }
.bz-srcs > span { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--n-chip); font: 600 12.5px/1 var(--f); color: var(--n-fg-2); white-space: nowrap; }
.bz-srcs > span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.bz-go { position: relative; z-index: 2; appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 15px 0 6px; border-radius: 999px; background: var(--n-chip);
  color: var(--n-fg); font: 600 14px/1 var(--f); transition: background .25s ease; }
.bz-go:focus-visible { outline: 2.5px solid var(--gold); outline-offset: 2px; }
.bz-go .ic { width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: var(--tint); color: #0D0F13; transition: transform .3s var(--spring); }
.bz-card:hover .bz-go { background: color-mix(in srgb, var(--tint) 24%, transparent); }
.bz-card:hover .bz-go .ic { transform: scale(1.1); }
.bz.feat .bz-card { padding: 22px; gap: 12px; }
.bz.feat .bz-ic { width: 54px; height: 54px; border-radius: 17px; }
.bz.feat .bz-ic .ic { width: 28px; height: 28px; }
.bz.feat .bz-name { font-size: clamp(24px, 2.6vw, 34px); font-stretch: 82%; }
.bz.feat .bz-line { font-size: 16px; max-width: 30em; }
.bz.feat .bz-go { height: 44px; font-size: 15px; padding-right: 18px; }
.bz.feat .bz-go .ic { width: 32px; height: 32px; padding: 5px; }
.bz-peek { align-self: stretch; margin: 6px 0 4px; padding: 14px 16px 18px; border-radius: 12px 12px 3px 3px; background: var(--ink); color: var(--ink-fg); font: 500 12.5px/1.55 var(--mono); display: grid; gap: 1px;
  -webkit-mask: radial-gradient(circle at 50% 100%, transparent 4.5px, #000 5px) 50% 100% / 12px 100% repeat-x; mask: radial-gradient(circle at 50% 100%, transparent 4.5px, #000 5px) 50% 100% / 12px 100% repeat-x; }
.bz-peek .row i { border-bottom-color: var(--ink-dots); }
.bz-peek .row b { color: var(--ink-fg); }
.bz-note { display: flex; align-items: center; gap: 7px; margin: 8px 0 0; padding-top: 9px; border-top: 1.5px dashed var(--ink-dots); font-weight: 600; color: var(--peek-good); }
.bz-note .ic { width: 16px; height: 16px; }
@media (min-width: 1080px) { .bz.feat .bz-peek { max-width: 420px; } }
/* each card's day, live: today's sales and what is left, the week in bars, the latest payment (demos.js plays it) */
.bz-live { container-type: inline-size; align-self: stretch; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; margin: 4px 0 0; padding: 12px 13px 11px; border-radius: 16px; background: var(--n-card-2); box-shadow: inset 0 0 0 1px var(--n-line); }
.bz.feat .bz-live { max-width: 460px; }
.bl-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 600 10.5px/1.2 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--n-fg-3); }
.bl-h > span:first-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bl-on { flex: none; display: inline-flex; align-items: center; gap: 5px; color: var(--good); }
.bl-on i { width: 6px; height: 6px; border-radius: 50%; background: var(--good); }
.motion .bl-on i { animation: live 1.8s ease-out infinite; }
.bl-m { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: end; gap: 14px; }
@container (max-width: 239.98px) { .bl-m { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; } .bl-sp { display: none; } .bl-f b { font-size: 18px; } }
.bl-f { display: grid; gap: 3px; min-width: 0; }
.bl-f small { font-size: 11.5px; font-weight: 600; color: var(--n-fg-3); }
.bl-f b { display: inline-block; font: 650 21px/1 var(--f); font-stretch: 80%; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bl-f b.bump { animation: blBump .6s var(--spring); }
@keyframes blBump { 30% { transform: translateY(-2px); color: var(--gold-fg); } }
.bl-sp { justify-self: end; width: 100%; max-width: 64px; height: 26px; overflow: visible; }
.bl-sp rect { fill: color-mix(in srgb, var(--tint) 34%, transparent); }
.bl-sp rect.now { fill: var(--tint); }
.bl-t { margin: 0; display: flex; align-items: baseline; gap: 10px; padding-top: 9px; border-top: 1px dashed var(--n-line-2); font-size: 13px; color: var(--n-fg-2); }
.bl-t span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bl-t em { flex: none; font: 600 13px/1 var(--mono); font-style: normal; color: var(--good); }
.bl-t.out em { color: var(--c-pb); }
.bl-t.swap { animation: blIn .5s var(--spring); }
@keyframes blIn { from { opacity: 0; transform: translateY(7px); } }
.bz-acts { margin-top: auto; padding-top: 4px; align-self: stretch; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.bz-more { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 650; color: var(--tint-fg); }
.bz-more .ic { width: 18px; height: 18px; transition: transform .3s var(--spring); }
.bz-card:hover .bz-more .ic { transform: translateX(3px); }
.bz-pages { margin-top: clamp(28px, 5vw, 48px); display: grid; gap: 10px; max-width: 980px; }
.bz-pages-h { margin: 0; font: 600 clamp(19px, 2.2vw, 24px)/1.2 var(--f); font-stretch: 88%; letter-spacing: -.01em; }
.bz-pages-line { margin: 0; max-width: 62ch; color: var(--n-fg-2); font-size: 15px; line-height: 1.5; text-wrap: pretty; }
.bz-pages-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bzp { --sw: #9AA3B2; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 16px 6px 10px; border-radius: 999px; text-decoration: none; color: var(--n-fg);
  background: var(--n-chip); box-shadow: inset 0 0 0 1px var(--n-line-2); transition: background .2s ease, box-shadow .2s ease; }
.bzp::before { content: ""; width: 22px; height: 22px; border-radius: 7px; background: var(--sw); flex: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.bzp b { font-weight: 600; font-size: 14.5px; }
.bzp span { color: var(--n-fg-3); font-size: 13px; }
.bzp:hover { background: var(--n-chip-2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sw) 70%, transparent); }
.bzp:focus-visible { outline: 2.5px solid var(--gold); outline-offset: 3px; }
.sw-mawingu { --sw: #1d5fd6; } .sw-glow-by-zuri { --sw: #9a6a43; } .sw-spice-and-soul { --sw: #a3311d; } .sw-bodago { --sw: #f5b700; }
.sw-afyamed { --sw: #138a5e; } .sw-duka-yetu { --sw: #0e7c3a; } .sw-jengapro { --sw: #d9480f; } .sw-siasasmart { --sw: #26336e; }
.bz-tells { list-style: none; margin: 4px 0 6px; padding: 0; display: none; gap: 8px; align-self: stretch; max-width: 460px; }
.bz-tells li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; padding: 11px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.4; color: var(--n-fg-2);
  background: color-mix(in srgb, var(--tone, var(--gold)) 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone, var(--gold)) 28%, transparent); }
.bz-tells li.bad { --tone: var(--bad); }
.bz-tells b { color: var(--n-fg); font-weight: 600; }
.bz-tells .ic { width: 18px; height: 18px; color: var(--tone, var(--gold)); margin-top: 1px; }
@media (min-width: 1080px) { .bz-tells { display: grid; } }
@media (max-width: 479.98px) {
  .bz-card { padding: 14px; gap: 8px; border-radius: 20px; }
  .bz-ic { width: 40px; height: 40px; border-radius: 13px; } .bz-ic .ic { width: 21px; height: 21px; }
  .bz-name { font-size: 16.5px; }
  .bz-line { font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .bz:not(.feat):not(.wide) .bz-srcs { display: none; }
  .bz-go { height: 34px; font-size: 13px; padding-right: 12px; } .bz-go .ic { width: 24px; height: 24px; }
  .bz-live { padding: 10px; gap: 7px; }
  .bl-f b { font-size: 17px; } .bl-t { font-size: 12px; padding-top: 7px; } .bl-h > span:first-child { font-size: 0; } .bl-h > span:first-child::before { content: "Today"; font-size: 10.5px; }
  .bz-acts { flex-direction: column; align-items: flex-start; } .bz-more { font-size: 13px; }
  .bz.feat .bz-line { -webkit-line-clamp: unset; display: block; }
}

/* ---------- the demo: a day at the business, played in a sheet ---------- */
html:has(.demo[open]) { overflow: hidden; }
.demo { position: fixed; inset: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: var(--n-fg); overflow: hidden; }
.demo[open] { display: grid; place-items: center; }
.demo::backdrop { background: rgba(4, 5, 7, .74); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.dm { position: relative; width: min(1140px, calc(100% - 32px)); height: min(820px, calc(100% - 32px)); display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  background: radial-gradient(70% 50% at 0% 0%, color-mix(in srgb, var(--tint) 13%, transparent), transparent 70%), #0F1217; border-radius: 28px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 50px 120px -30px rgba(0, 0, 0, .9); }
.motion .demo[open] .dm { animation: dmIn .5s var(--spring); }
@keyframes dmIn { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 719.98px) { .dm { width: 100%; height: 100%; border-radius: 0; padding-top: env(safe-area-inset-top, 0px); } }
.dm-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 18px 20px 12px; }
.dm-ic { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; color: var(--tint); background: color-mix(in srgb, var(--tint) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 32%, transparent); }
.dm-ic .ic { width: 24px; height: 24px; }
.dm-kind { margin: 0 0 3px; font: 600 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--n-fg-3); }
.dm-ttl h3 { font: 600 clamp(20px, 2.4vw, 26px)/1.1 var(--f); font-stretch: 86%; letter-spacing: -.01em; }
.dm-x { appearance: none; border: 0; cursor: pointer; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: rgba(255, 255, 255, .07); color: var(--n-fg); }
.dm-x:hover { background: rgba(255, 255, 255, .12); }
.dm-steps { list-style: none; margin: 0; padding: 0 20px; display: flex; gap: 8px; }
.dm-steps li { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; font: 600 12.5px/1 var(--f); color: var(--n-fg-3); transition: color .3s ease; }
.dm-steps b { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 11px/1 var(--mono); background: var(--n-card-2); color: var(--n-fg-3); transition: background .3s ease, color .3s ease; }
.dm-steps span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-steps li.on { color: var(--n-fg); } .dm-steps li.on b { background: var(--tint); color: #0D0F13; }
.dm-steps li.done b { background: color-mix(in srgb, var(--good) 22%, transparent); color: var(--good); }
.dm-prog { margin: 12px 20px 0; height: 3px; border-radius: 3px; background: var(--n-card-2); overflow: hidden; }
.dm-prog i { display: block; height: 100%; width: var(--p, 0%); background: linear-gradient(90deg, var(--tint), var(--gold)); border-radius: 3px; transition: width .6s var(--ease); }
.dm-body { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px 20px; overflow-y: auto; overscroll-behavior: contain; align-content: start; }
@media (min-width: 900px) { .dm-body { grid-template-columns: minmax(0, 290px) minmax(0, 1fr) minmax(0, 340px); overflow: hidden; align-content: stretch; } .dm-col { overflow-y: auto; min-height: 0; } }
.dm-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dm-h { margin: 0; font: 600 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--n-fg-3); }
.dm-conns { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dm-conns li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 14px; background: var(--n-card); box-shadow: inset 0 0 0 1px var(--n-line); font-size: 13px; animation: msgIn .4s var(--ease); }
.dm-conns .ci { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
.dm-conns .ci .ic { width: 17px; height: 17px; }
.dm-conns b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-conns small { display: block; color: var(--n-fg-3); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-conns .st { font: 600 10.5px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--n-fg-3); white-space: nowrap; }
.dm-conns li.ok .st { color: var(--good); }
.dm-msgs { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.dm-msg { padding: 10px 11px; border-radius: 14px 14px 14px 4px; background: color-mix(in srgb, var(--c) 9%, rgba(255, 255, 255, .03)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent); animation: msgIn .45s var(--ease); }
.dm-msg .mh { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font: 600 11px/1 var(--f); color: var(--c); }
.dm-msg .mh time { margin-left: auto; font: 500 10.5px/1 var(--mono); color: var(--n-fg-3); }
.dm-msg p { margin: 0; font: 500 12px/1.5 var(--mono); color: var(--n-fg); overflow-wrap: anywhere; }
.dm-msg.cur { box-shadow: inset 0 0 0 1.5px var(--c), 0 10px 30px -14px var(--c); }
.dm-msg.dup p { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--c-mk) 70%, transparent); color: var(--n-fg-2); }
.dm-card { display: grid; gap: 14px; padding: 18px; border-radius: 22px; background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02)); box-shadow: inset 0 0 0 1px var(--n-line-2); }
.dm-raw { position: relative; margin: 0; min-height: 3em; padding: 12px 13px; border-radius: 14px; background: rgba(0, 0, 0, .3); font: 500 13px/1.55 var(--mono); color: var(--n-fg-2); overflow-wrap: anywhere; overflow: hidden; }
.dm-raw mark { background: color-mix(in srgb, var(--gold) 26%, transparent); color: var(--n-fg); border-radius: 4px; padding: 0 2px; }
.dm-raw.scan::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -40%; background: linear-gradient(90deg, transparent, rgba(245, 188, 76, .22), transparent); animation: scan .9s var(--ease) forwards; }
@keyframes scan { to { left: 100%; } }
.dm-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 8px; min-height: 58px; }
.dm-fields:empty::before { content: "Reading…"; grid-column: 1 / -1; align-self: center; padding: 6px 2px; font: 600 11.5px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--n-fg-3); }
.motion .dm-fields:empty::before { animation: breathe 1.2s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .35; } }
.fld { display: grid; gap: 4px; padding: 9px 10px; border-radius: 12px; background: var(--n-card-2); box-shadow: inset 0 0 0 1px var(--n-line); animation: tkIn .45s var(--spring) both; }
.fld small { font: 600 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--n-fg-3); }
.fld b { font: 600 14px/1.25 var(--f); color: var(--n-fg); overflow-wrap: anywhere; }
.fld.amt b { color: var(--gold); font-variant-numeric: tabular-nums; } .fld.out b { color: var(--c-pb); } .fld.flag { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-mk) 45%, transparent); } .fld.flag b { color: var(--c-mk); }
.dm-filed { margin: 0; min-height: 22px; display: flex; align-items: center; gap: 8px; font: 600 13.5px/1.3 var(--f); color: var(--good); }
.dm-filed .ic { width: 18px; height: 18px; flex: none; }
.dm-filed.dup { color: var(--c-mk); } .dm-filed.out { color: var(--c-pb); }
.dm-filed.swap { animation: msgIn .4s var(--ease); }
.dm-tally { margin: 2px 4px 0; font: 600 11.5px/1.4 var(--mono); letter-spacing: .02em; color: var(--n-fg-3); min-height: 1.4em; }
.dm-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dm-kpis > div:first-child { grid-column: 1 / -1; }
.dm-kpis > div:first-child b { font-size: clamp(30px, 3.4vw, 36px); }
.dm-kpis > div { padding: 11px 11px 12px; border-radius: 14px; background: var(--n-card); box-shadow: inset 0 0 0 1px var(--n-line); display: grid; gap: 6px; min-width: 0; }
.dm-kpis span { font: 600 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--n-fg-3); }
.dm-kpis b { font: 650 clamp(18px, 2vw, 22px)/1 var(--f); font-stretch: 78%; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-kpis .k-left { background: color-mix(in srgb, var(--gold) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 30%, transparent); }
.dm-kpis .k-left b { color: var(--gold); }
.dm-kpis b.bump { animation: bump .6s var(--spring); }
.dm-bars { display: grid; gap: 9px; padding: 13px; border-radius: 16px; background: var(--n-card); box-shadow: inset 0 0 0 1px var(--n-line); }
.dm-by { margin: 0 0 2px; font: 600 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--n-fg-3); }
.dm-bar { display: grid; grid-template-columns: minmax(0, 100px) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 12.5px; color: var(--n-fg-2); }
.dm-bar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-bar i { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.dm-bar em { display: block; height: 100%; width: var(--w, 0%); border-radius: 99px; background: linear-gradient(90deg, color-mix(in srgb, var(--tint) 70%, #000), var(--tint)); transition: width .9s var(--spring); }
.dm-bar b { font: 600 12px/1 var(--mono); color: var(--n-fg); font-variant-numeric: tabular-nums; min-width: 4.8em; text-align: right; }
.dm-bar.hot span { color: var(--n-fg); }
.dm-latest { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dm-latest li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 6px 2px; border-bottom: 1px solid var(--n-line); font-size: 12.5px; color: var(--n-fg-2); animation: rowIn .55s var(--spring); }
.dm-latest li:nth-child(n+5) { display: none; }
.dm-latest time { font: 500 11px/1 var(--mono); color: var(--n-fg-3); }
.dm-latest span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-latest b { font: 600 12.5px/1 var(--mono); color: var(--n-fg); }
.dm-latest li.out b { color: var(--c-pb); }
.dm-ins { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dm-ins li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 11px; align-items: start; padding: 12px; border-radius: 16px; background: color-mix(in srgb, var(--ins, var(--gold)) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ins, var(--gold)) 32%, transparent); animation: insIn .6s var(--spring) both; }
.dm-ins li.bad { --ins: var(--bad); } .dm-ins li.good { --ins: var(--good); }
.dm-ins .ic { width: 20px; height: 20px; color: var(--ins, var(--gold)); margin-top: 1px; }
.dm-ins b { display: block; font: 600 14px/1.3 var(--f); color: var(--n-fg); }
.dm-ins small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--n-fg-2); }
@keyframes insIn { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.dm-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 20px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--n-line); background: rgba(10, 12, 15, .6); }
.dm-foot .btn-ghost { background: rgba(255, 255, 255, .07); color: var(--n-fg); box-shadow: none; }
.dm-foot .btn-ghost:hover { background: rgba(255, 255, 255, .12); }
.dm-foot .dm-start { margin-left: auto; }
.dm-foot .ic { width: 18px; height: 18px; }
.dm-foot .btn:hover .ic { transform: none; }
.dm.ended .dm-replay { background: var(--tint); color: #0D0F13; }
/* phones: one column, the message and what Risiti read on top, the dashboard under it */
@media (max-width: 899.98px) {
  .dm-head { padding: 14px 16px 10px; } .dm-ic { width: 40px; height: 40px; border-radius: 13px; }
  .dm-steps, .dm-body { padding-left: 16px; padding-right: 16px; } .dm-prog { margin-left: 16px; margin-right: 16px; }
  .dm-steps span { font-size: 12px; }
  .dm-conns { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  .dm-conns::-webkit-scrollbar { display: none; }
  .dm-conns li { flex: none; grid-template-columns: auto auto; padding: 6px 10px 6px 6px; border-radius: 999px; }
  .dm-conns li small, .dm-conns .st { display: none; }
  .dm-conns .ci { width: 24px; height: 24px; border-radius: 50%; } .dm-conns .ci .ic { width: 14px; height: 14px; }
  .dm-conns li.ok b::after { content: " ✓"; color: var(--good); }
  .dm-msgs { margin: 0; } .dm-msgs .dm-msg:not(:first-child) { display: none; }
  .dm-src .dm-h, .dm-read .dm-h { display: none; }
  .dm-card { padding: 14px; gap: 10px; border-radius: 18px; }
  .dm-raw { display: none; }
  .dm-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 0; }
  .fld { padding: 8px 9px; } .fld b { font-size: 13px; }
  .dm-foot { flex-wrap: nowrap; padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); gap: 6px; }
  .dm-foot .btn { height: 44px; padding: 0 13px; font-size: 14.5px; border-radius: 14px; }
  .dm-foot .dm-pause, .dm-foot .dm-replay { width: 44px; padding: 0; flex: none; }
  .dm-foot .dm-pause > span, .dm-foot .dm-replay > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dm-foot .nx-sep, .dm-foot .nx-name { display: none; }
  .dm-foot .dm-start { flex: 1 1 auto; }
  .dm-conns { -webkit-mask: linear-gradient(90deg, #000 82%, transparent); mask: linear-gradient(90deg, #000 82%, transparent); }
  .dm-tally { margin-top: -2px; }
}

/* ---------- privacy ---------- */
.priv-grid { display: grid; gap: clamp(36px, 5vw, 64px); align-items: start; }
@media (min-width: 960px) { .priv-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.priv-points { display: grid; gap: 18px; margin-top: 30px; }
.pp { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; }
.pp .ic-box { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--surface); box-shadow: var(--card); color: var(--fg); }
.pp h3 { font: 600 18px/1.25 var(--f); margin: 2px 0 4px; }
.pp p { margin: 0; color: var(--fg-2); font-size: 15.5px; }
.ledger { background: var(--paper); color: var(--paper-fg); border-radius: 6px 6px 0 0; padding: 30px 26px 34px; font: 500 13.5px/1.7 var(--mono); filter: var(--drop);
  -webkit-mask: radial-gradient(circle at 50% 100%, transparent 6px, #000 6.5px) 50% 100% / 16px 100% repeat-x; mask: radial-gradient(circle at 50% 100%, transparent 6px, #000 6.5px) 50% 100% / 16px 100% repeat-x; }
.ledger h3 { text-align: center; font: 700 14px/1.3 var(--mono); letter-spacing: .14em; margin: 0; }
.ledger .r-sub { margin-bottom: 14px; }
.ledger .lrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 9px 0; border-top: 1.5px dashed var(--paper-dots); }
.ledger .lrow span { color: var(--paper-fg); }
.ledger .lrow b { font-weight: 700; text-align: right; }
.ledger .lrow small { grid-column: 1 / -1; color: var(--paper-fg-2); font-size: 12px; line-height: 1.5; }
.ledger .stamp { display: inline-block; margin-top: 16px; padding: 6px 10px; border: 2px solid #0B7A53; color: #0B7A53; border-radius: 6px; font-weight: 700; letter-spacing: .12em; transform: rotate(-4deg); font-size: 12px; }
.ledger .stamp-row { text-align: center; }
.ledger-note { margin: 18px 4px 0; font-size: 15px; color: var(--fg-3); }
.ledger-note a { color: var(--fg-2); text-decoration-color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 2px; }

/* ---------- install ---------- */
.install { background: var(--bg-2); }
.inst-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .inst-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }
.inst { background: var(--surface); border-radius: 24px; padding: 24px; box-shadow: var(--card); }
.inst-h { display: flex; align-items: center; gap: 12px; }
.inst-h .ic-box { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--well); }
.inst-h b { font-size: 18px; }
.inst ol { margin: 18px 0 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 10px; }
.inst li { counter-increment: s; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; font-size: 15.5px; color: var(--fg-2); }
.inst li::before { content: counter(s); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-fg); font: 700 12.5px/1 var(--mono); }
.inst li .ic { width: 17px; height: 17px; vertical-align: -3px; margin: 0 2px; }
.inst li a { color: var(--fg); font-weight: 600; text-decoration-color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.offline { display: flex; align-items: center; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 30px; color: var(--fg-2); font-size: 15.5px; text-align: center; }
.offline .ic { color: var(--fg-3); }

/* ---------- faq ---------- */
.faq-list { max-width: 860px; margin: 0 auto; display: grid; gap: 12px; }
.faq-list details { background: var(--surface); border-radius: 20px; box-shadow: var(--card); transition: box-shadow .2s ease; }
.faq-list details[open] { box-shadow: var(--lift); }
.faq-list summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 20px 22px; font: 600 18px/1.3 var(--f); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary .q { font: 700 12px/1 var(--mono); color: var(--accent-fg); letter-spacing: .06em; }
.faq-list summary .ic { color: var(--fg-3); transition: transform .25s var(--spring); }
.faq-list details[open] summary .ic { transform: rotate(180deg); }
.faq-list .a { padding: 0 22px 22px 56px; color: var(--fg-2); font-size: 16px; }
.faq-list .a p { margin: 0 0 10px; } .faq-list .a p:last-child { margin: 0; }
@media (max-width: 560px) { .faq-list .a { padding-left: 22px; } }

/* ---------- final call ---------- */
#faq { padding-bottom: 0; }
.final { padding: clamp(64px, 8vw, 110px) 0 clamp(80px, 10vw, 140px); }
.final-slip { position: relative; max-width: 880px; margin: 0 auto; text-align: center; background: var(--ink); color: var(--ink-fg); padding: clamp(40px, 6vw, 72px) clamp(22px, 5vw, 64px) clamp(52px, 7vw, 84px); border-radius: 32px 32px 8px 8px; filter: var(--drop);
  -webkit-mask: radial-gradient(circle at 50% 100%, transparent 7px, #000 7.5px) 50% 100% / 20px 100% repeat-x; mask: radial-gradient(circle at 50% 100%, transparent 7px, #000 7.5px) 50% 100% / 20px 100% repeat-x; }
.final-slip .kicker { color: var(--ink-fg-3); justify-content: center; }
.final-slip p { color: var(--ink-fg-2); max-width: 32em; margin: 18px auto 0; font-size: 18px; }
.final-slip .cta-row { justify-content: center; }
.final-slip .btn-ghost { background: transparent; color: var(--ink-fg); box-shadow: 0 0 0 1.5px var(--ink-line); }
.final-lines { max-width: 420px; margin: 34px auto 0; font: 500 13px/1.6 var(--mono); color: var(--ink-fg-2); display: grid; gap: 2px; text-align: left; }
.final-lines .row i { border-bottom-color: var(--ink-dots); }
.final-lines .row b { color: var(--ink-fg); }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); padding: 44px 0 calc(40px + env(safe-area-inset-bottom, 0px)); color: var(--fg-3); font-size: 14.5px; }
.foot-grid { display: grid; gap: 28px; }
@media (min-width: 800px) { .foot-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; } }
.foot p { margin: 12px 0 0; max-width: 30em; }
.foot-links { display: flex; flex-wrap: wrap; gap: 10px 22px; }
@media (min-width: 800px) { .foot-links { justify-content: flex-end; } }
.foot-links a { color: var(--fg-2); text-decoration: none; font-weight: 550; }
.foot-links a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.thanks { margin-top: 34px; padding-top: 22px; border-top: 1.5px dashed var(--line-2); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; font: 500 12.5px/1.4 var(--mono); letter-spacing: .06em; }
.thanks .code { height: 22px; width: 160px; background: repeating-linear-gradient(90deg, var(--fg-3) 0 2px, transparent 2px 4px, var(--fg-3) 4px 5px, transparent 5px 8px, var(--fg-3) 8px 11px, transparent 11px 12px); opacity: .6; }

/* ---------- legal pages ---------- */
.doc { padding: clamp(36px, 6vw, 72px) 0 clamp(72px, 9vw, 120px); }
.doc-head { max-width: 760px; margin: 0 auto 36px; }
.doc-head .h2 { font-size: clamp(40px, 6vw, 68px); }
.doc-head .meta { margin-top: 16px; font: 500 13px/1.5 var(--mono); color: var(--fg-3); letter-spacing: .02em; }
.doc-body { max-width: 760px; margin: 0 auto; background: var(--surface); border-radius: 28px; box-shadow: var(--card); padding: clamp(24px, 4.6vw, 52px); }
.doc-body h2 { font: 600 24px/1.2 var(--f); font-stretch: 90%; letter-spacing: -.01em; margin: 40px 0 12px; scroll-margin-top: 90px; }
.doc-body h2:first-child { margin-top: 0; }
.doc-body h3 { font: 600 18px/1.3 var(--f); margin: 24px 0 8px; }
.doc-body p, .doc-body li { color: var(--fg-2); font-size: 16.5px; line-height: 1.65; }
.doc-body p { margin: 0 0 14px; }
.doc-body ul { margin: 0 0 16px; padding-left: 22px; }
.doc-body li { margin: 6px 0; }
.doc-body li::marker { color: var(--accent-fg); }
.doc-body a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.doc-body .short { background: var(--raised); box-shadow: 0 0 0 1px var(--line); border-radius: 20px; padding: 20px 22px 8px; margin: 0 0 8px; }
.doc-body .short h2 { margin-top: 0; font-size: 19px; }
.doc-toc { max-width: 760px; margin: 0 auto 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.doc-toc a { text-decoration: none; font-size: 13.5px; font-weight: 600; color: var(--fg-2); padding: 7px 12px; border-radius: 999px; background: var(--surface); box-shadow: var(--card); }
.doc-toc a:hover { color: var(--fg); }

/* ---------- 404 ---------- */
.void { min-height: 70vh; display: grid; place-items: center; padding: 60px 0; text-align: center; }
.void .ledger { max-width: 380px; margin: 0 auto 30px; text-align: left; }
.void h1 { text-align: center; font: 700 14px/1.3 var(--mono); letter-spacing: .14em; margin: 0; }
.void .ledger .r-sub { margin-bottom: 14px; }
.void .big { font: 650 72px/1 var(--f); font-stretch: 76%; letter-spacing: -.02em; text-align: center; margin: 18px 0 0; padding-top: 14px; border-top: 3px double var(--paper-fg); }
.void .stamp.void-stamp { border-color: #B42318; color: #B42318; font-size: 18px; padding: 6px 14px; transform: rotate(-8deg); }
.void-note { margin: 0 0 4px; color: var(--fg-2); }
.void .cta-row { justify-content: center; margin-top: 22px; }
.void + .foot .thanks { margin-top: 0; }

/* ---------- motion ---------- */
.reveal { transition: opacity .7s var(--ease), transform .8s var(--ease); }
.motion .reveal:not(.in) { opacity: 0; transform: translateY(18px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .stub { transform: none; }
}
@media print { .nav, .skip { display: none; } }

/* ============================================================
   The pages beyond the start: each kind of business (/for/), each part of Risiti (/features/) and the blog
   (content/render.mjs draws them). They share the start's slip, type and colours.
   ============================================================ */
.kicker .ic { width: 16px; height: 16px; color: var(--accent-fg); }
.kicker:has(.ic)::before { display: none; }
.crumbs { padding-top: 18px; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font: 500 13px/1.4 var(--mono); color: var(--fg-3); }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line-2); }
.crumbs a { color: var(--fg-2); text-decoration: none; }
.crumbs a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current] { color: var(--fg-3); }
@media (max-width: 559.98px) { .crumbs li:last-child { display: none; } .crumbs li:nth-last-child(2)::after { content: ""; } }

.sub-top { padding: clamp(28px, 5vw, 64px) 0 clamp(36px, 6vw, 80px); }
.sub-top-in { display: grid; gap: clamp(36px, 5vw, 64px); align-items: center; }
@media (min-width: 960px) { .sub-top-in { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } .sub-top-in.one { grid-template-columns: minmax(0, 1fr); } }
.sub-top-in.one .sub-copy { max-width: 900px; }
.sub-copy .h-display { font-size: clamp(42px, 6.4vw, 80px); text-wrap: balance; }
.sub-copy .lede { max-width: 34em; }


.sub-steps, .sub-points, .sub-faq, .sub-read, .sub-others, .hub, .blog-list { padding: clamp(48px, 7vw, 96px) 0; }
.sub-steps .section-head, .sub-points .section-head { margin-bottom: clamp(26px, 4vw, 44px); }
.steps { list-style: none; margin: 0; padding: 0; }
.pts { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .pts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .pts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.pt { background: var(--surface); border-radius: 24px; padding: 24px; box-shadow: var(--card); display: grid; gap: 10px; align-content: start; }
.pt .ic-box, .hub-card .ic-box, .trade-cta .ic-box { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-fg); }
.pt .ic-box .ic, .hub-card .ic-box .ic, .trade-cta .ic-box .ic { width: 24px; height: 24px; }
.pt h3 { margin: 6px 0 0; font: 600 21px/1.15 var(--f); font-stretch: 90%; letter-spacing: -.01em; }
.pt p { margin: 0; color: var(--fg-2); font-size: 16px; }
.sub-more { margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 10px 26px; color: var(--fg-3); font-size: 15.5px; }
.post .meta { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.sub-more a { color: var(--fg); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.tradelinks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.tradelinks a { display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 16px 0 12px; border-radius: 14px; background: var(--surface); box-shadow: var(--card); text-decoration: none; font-weight: 600; font-size: 15px; color: var(--fg); transition: box-shadow .2s ease; }
.tradelinks a:hover { box-shadow: var(--lift); }
.tradelinks .ic { color: var(--accent-fg); }
.sub-others .section-head { margin-bottom: 18px; }

/* the two lists */
.hub-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 680px) { .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .hub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.hub-card a { height: 100%; display: grid; gap: 10px; align-content: start; padding: 24px; border-radius: 24px; background: var(--surface); box-shadow: var(--card); text-decoration: none; color: inherit; transition: box-shadow .2s ease, transform .2s var(--ease); }
.hub-card a:hover { box-shadow: var(--lift); transform: translateY(-2px); }
.hub-card h2 { margin: 6px 0 0; font: 600 23px/1.12 var(--f); font-stretch: 88%; letter-spacing: -.012em; }
.hub-card p { margin: 0; color: var(--fg-2); font-size: 15.5px; }
.hub-card .go { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-weight: 600; font-size: 15px; color: var(--accent-fg); }
.hub-card .go .ic { width: 18px; height: 18px; }

/* the blog: cards, a post, sharing */
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.card a { height: 100%; display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; padding: 24px; border-radius: 24px; background: var(--surface); box-shadow: var(--card); text-decoration: none; color: inherit; transition: box-shadow .2s ease, transform .2s var(--ease); }
.card a:hover { box-shadow: var(--lift); transform: translateY(-2px); }
.card-k { font: 600 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-fg); }
.card h3 { margin: 4px 0 0; font: 600 23px/1.14 var(--f); font-stretch: 88%; letter-spacing: -.012em; text-wrap: balance; }
.card p { margin: 0; color: var(--fg-2); font-size: 15.5px; }
.card-m { display: flex; gap: 14px; font: 500 12.5px/1.4 var(--mono); color: var(--fg-3); }
.tag-row { margin-top: 26px; }
.sub-top + .blog-list { padding-top: 0; }
.tag-row .chip { text-decoration: none; height: 36px; padding: 0 14px; font-size: 13.5px; }
.tag-sec { margin-top: clamp(40px, 6vw, 72px); scroll-margin-top: 90px; }
.tag-list { margin: 14px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.tag-list a { color: var(--fg); font-weight: 550; text-underline-offset: 3px; }
.post .doc-head .h2 { font-size: clamp(36px, 5.4vw, 60px); text-wrap: balance; }
.post-lede { margin: 18px 0 0; font-size: clamp(18px, 1.7vw, 21px); line-height: 1.5; color: var(--fg-2); text-wrap: pretty; }
.post-body { font-size: 17.5px; }
.post-body p, .post-body li { font-size: 17.5px; line-height: 1.7; }
.post-body h2 { font-size: 28px; margin-top: 46px; }
.post-body h3 { font-size: 20px; margin-top: 30px; }
.post-body ol { margin: 0 0 16px; padding-left: 24px; }
.post-body ol li::marker { color: var(--accent-fg); font-weight: 700; font-family: var(--mono); font-size: .9em; }
.post-body blockquote { margin: 22px 0; padding: 16px 20px; border-radius: 16px; background: var(--accent-soft); border-left: 4px solid var(--accent); }
.post-body blockquote p { margin: 0 0 8px; color: var(--fg); }
.post-body blockquote p:last-child { margin: 0; }
.post-body hr { border: 0; border-top: 1.5px dashed var(--line-2); margin: 34px 0; }
.post-body strong { color: var(--fg); }
.post-body h2#sources + ul li { font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }
.tbl { overflow-x: auto; margin: 18px 0 24px; border-radius: 16px; box-shadow: 0 0 0 1px var(--line); }
.tbl table { width: 100%; border-collapse: collapse; font-size: 15px; }
.tbl th, .tbl td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl th { background: var(--raised); font-weight: 650; color: var(--fg); white-space: nowrap; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.post-foot { max-width: 760px; margin: 22px auto 0; }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.share span { font: 600 12.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); margin-right: 6px; }
.share a { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 12px; background: var(--surface); box-shadow: var(--card); text-decoration: none; font-weight: 600; font-size: 14.5px; color: var(--fg); }
.share a:hover { box-shadow: var(--lift); }
.share .share-wa { background: var(--wa); color: var(--wa-fg); box-shadow: none; }
.post-trade { padding: 0 0 clamp(20px, 3vw, 40px); }
.trade-cta { max-width: 760px; margin: 0 auto; display: flex; align-items: center; gap: 16px; padding: 20px 22px; border-radius: 22px; background: var(--surface); box-shadow: var(--card); text-decoration: none; color: inherit; transition: box-shadow .2s ease; }
.trade-cta:hover { box-shadow: var(--lift); }
.trade-cta > span:nth-child(2) { flex: 1; min-width: 0; display: grid; gap: 3px; }
.trade-cta b { font-size: 18px; }
.trade-cta small { color: var(--fg-2); font-size: 14.5px; }
.trade-cta > .ic { color: var(--fg-3); }

/* the foot, in columns */
.foot-cols { display: grid; gap: 26px 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 800px) { .foot-grid:has(.foot-cols) { grid-template-columns: minmax(0, .8fr) minmax(0, 2.2fr); } .foot-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.foot-col h3 { margin: 0 0 12px; font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot-col a { color: var(--fg-2); text-decoration: none; font-weight: 550; font-size: 14.5px; }
.foot-col a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.thanks a { color: inherit; }

.foot-social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.foot-social a { display: inline-flex; align-items: center; height: 36px; padding: 0 13px; border-radius: 11px; background: var(--surface); box-shadow: var(--card); color: var(--fg); text-decoration: none; font-weight: 600; font-size: 14px; }
.foot-social a:hover { box-shadow: var(--lift); }

/* ============================================================
   The app's home screen, for a made-up business of each kind (content/dash.mjs draws it, site/dash.js plays it):
   a window on a computer, the app's own screen on a phone. Light theme: the ink slip on a mist screen; dark theme:
   the paper slip on a night screen, as in the app. The window's own width decides its layout (container queries).
   ============================================================ */
.t-edu { --tint: #60A5FA; }
.ad { --ad-win: #F7F8FA; --ad-rail: #EEF0F3; --ad-out-fg: #9A6100; --ad-bad: #E5484D; --ad-bad-fg: #C2292E; --ad-blue: #2563EB; --ad-badge: #D3292F; --ad-badge-fg: #FFFFFF;
  --ad-s-in: #3DD68C; --ad-s-out: #F5B841; --ad-s-good: #5BE0A3; --ad-s-bad: #FF8F86; --ad-thumb: rgba(246, 244, 239, .16); --ad-flash: #F5BC4C;
  position: relative; isolation: isolate; margin: 0; }
@media (prefers-color-scheme: dark) {
  .ad { --ad-win: #101216; --ad-rail: #0C0E11; --ad-out-fg: #F2B84B; --ad-bad: #FF6B61; --ad-bad-fg: #FF8A82; --ad-blue: #7AA7FF;
    --ad-s-in: #0E9F6E; --ad-s-out: #B7791F; --ad-s-good: #087047; --ad-s-bad: #B42328; --ad-thumb: #FFFFFF; --ad-flash: #8A5A00; --ad-badge: #FF8A82; --ad-badge-fg: #0B0C0F; }
}
/* the business's colour glows behind the window */
.ad::before { content: ""; position: absolute; z-index: -1; left: 8%; right: 8%; top: 4%; height: 60%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--tint) 34%, transparent), transparent); filter: blur(40px); opacity: .8; }
.ad-win { container: adwin / inline-size; position: relative; overflow: hidden; border-radius: 26px; background: var(--ad-win); color: var(--fg); font-size: 15px; line-height: 1.4;
  box-shadow: 0 0 0 1px var(--line), 0 70px 120px -60px rgba(16, 24, 40, .5), 0 26px 50px -30px rgba(16, 24, 40, .28); }
@media (prefers-color-scheme: dark) { .ad-win { box-shadow: 0 0 0 1px var(--line-2), 0 70px 120px -50px rgba(0, 0, 0, .9); } }
.ad-win p { margin: 0; }
.ad-win ul { list-style: none; margin: 0; padding: 0; }
.ad-win .ic { width: 20px; height: 20px; }

/* the window's bar, the rail and the phone's tab bar */
.ad-bar { display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--surface); font-size: 13px; color: var(--fg-3); }
.ad-lights { display: flex; gap: 7px; flex: none; }
.ad-lights i { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; }
.ad-lights i:nth-child(2) { background: #FEBC2E; } .ad-lights i:nth-child(3) { background: #28C840; }
.ad-title { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; color: var(--fg-2); }
.ad-title > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-title .glyph { width: 14px; height: 17px; }
.ad-sync { flex: none; display: inline-flex; align-items: center; gap: 6px; }
.ad-win .ad-sync .ic { width: 17px; height: 17px; color: var(--in); }
.ad-screen { display: grid; grid-template-columns: minmax(0, 1fr); }
.ad-rail { display: none; }
@container adwin (min-width: 1000px) {
  .ad-screen { grid-template-columns: 214px minmax(0, 1fr); }
  .ad-rail { display: flex; flex-direction: column; gap: 3px; padding: 18px 12px 16px; border-right: 1px solid var(--line); background: var(--ad-rail); }
}
.ad-brand { display: flex; align-items: center; gap: 9px; padding: 2px 10px 16px; font: 700 21px/1 var(--f); letter-spacing: -.025em; }
.ad-brand .glyph { width: 21px; height: 25px; }
.ad-shop { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 9px 10px; border-radius: 14px; background: var(--surface); box-shadow: var(--card); }
.ad-sn { flex: 1; min-width: 0; display: grid; gap: 1px; line-height: 1.25; }
.ad-sn b { font-size: 14px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-sn small { font-size: 12px; color: var(--fg-3); }
.ad-win .ad-shop > .ic { width: 16px; height: 16px; color: var(--fg-3); }
.ad-rl { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: 12px; color: var(--fg-2); font-size: 14.5px; font-weight: 550; }
.ad-rl.on { background: var(--surface); color: var(--fg); box-shadow: var(--card); }
.ad-rl.on .ic { color: var(--accent-fg); }
.ad-rl em, .ad-tabs em { display: grid; place-items: center; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 99px; background: var(--ad-badge); color: var(--ad-badge-fg); font: 700 11.5px/1 var(--f); font-style: normal; }
.ad-rl em { margin-left: auto; }
.ad-rf { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 14px 10px 2px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--fg-3); }
.ad-win .ad-rf .ic { width: 16px; height: 16px; color: var(--in); }
.ad-tabs { display: none; }
@container adwin (max-width: 699.98px) {
  .ad-bar { display: none; }
  .ad-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; padding: 8px 4px 12px; border-top: 1px solid var(--line); background: var(--surface); }
}
.ad-tabs > span { position: relative; display: grid; justify-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--fg-3); }
.ad-win .ad-tabs .ic { width: 22px; height: 22px; }
.ad-tabs .on { color: var(--fg); } .ad-tabs .on .ic { color: var(--accent-fg); }
.ad-tabs .ad-fab { justify-self: center; width: 46px; height: 46px; border-radius: 16px; place-content: center; background: var(--accent); color: var(--on-accent); box-shadow: 0 10px 20px -10px var(--accent); }
.ad-tabs em { position: absolute; top: -5px; left: calc(50% + 6px); }

/* the shop's mark: its colour, its kind's icon */
.ad-mk { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: #fff;
  background: linear-gradient(150deg, color-mix(in srgb, var(--tint) 72%, #fff) 0%, color-mix(in srgb, var(--tint) 70%, #000) 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 10px 20px -12px var(--tint); }
.ad-win .ad-mk .ic { width: 24px; height: 24px; }
.ad-mk.sm { width: 32px; height: 32px; border-radius: 10px; }
.ad-win .ad-mk.sm .ic { width: 18px; height: 18px; }

/* the home screen */
.ad-main { min-width: 0; display: grid; gap: 14px; align-content: start; padding: 18px 14px 20px; }
@container adwin (min-width: 700px) { .ad-main { gap: 16px; padding: 24px 26px 28px; } }
.ad-head { display: grid; gap: 2px; min-width: 0; }
.ad-date { font-size: 13px; color: var(--fg-3); }
.ad-hi { margin-top: 6px !important; font-size: 15px; color: var(--fg-2); }
.ad-name { display: flex; align-items: center; gap: 12px; min-width: 0; margin-top: 4px !important; }
.ad-name b { min-width: 0; font: 650 clamp(24px, 2.4cqi + 14px, 36px)/1.05 var(--f); font-stretch: 86%; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-win .ad-name > .ic { flex: none; color: var(--fg-3); }
.ad-live { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: var(--wa); color: var(--wa-fg); font-size: 14px; font-weight: 600; }
.ad-live i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--in); }
.motion .ad-live i, .motion .ad-pulse i { animation: ping 1.6s infinite; }
.ad-live span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-live b { font: 700 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }

.ad-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "slip" "side" "feed" "by" "notes"; }
.ad-slipw { grid-area: slip; min-width: 0; filter: var(--drop); }
.ad-side { grid-area: side; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.ad-by { grid-area: by; } .ad-feed { grid-area: feed; } .ad-notes { grid-area: notes; }
@container adwin (min-width: 700px) {
  .ad-grid { gap: 16px; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-template-areas: "slip side" "by feed" "notes feed"; }
  .ad-side { gap: 16px; } .ad-side .ad-alert { flex: 1; }
}

/* the month on the slip */
.ad-slip { position: relative; background: var(--ink); color: var(--ink-fg); border-radius: 24px 24px 6px 6px; padding: 18px 16px 26px;
  -webkit-mask: radial-gradient(circle at 50% 100%, transparent 6px, #000 6.5px) 50% 100% / 17px 100% repeat-x; mask: radial-gradient(circle at 50% 100%, transparent 6px, #000 6.5px) 50% 100% / 17px 100% repeat-x; }
@container adwin (min-width: 700px) { .ad-slip { padding: 22px 24px 32px; } }
.ad-sh { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ad-sh > span:first-child { font-size: 15px; font-weight: 550; color: var(--ink-fg-2); }
.ad-seg { display: inline-flex; padding: 3px; border-radius: 11px; background: var(--ink-line); }
.ad-seg span { padding: 6px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-fg-2); }
.ad-seg .on { background: var(--ad-thumb); color: var(--ink-fg); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.ad-twin { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 14px; border-radius: 20px; overflow: hidden;
  background: color-mix(in srgb, var(--ink-fg) 5%, transparent); box-shadow: inset 0 0 0 1px var(--ink-line); }
.ad-tw { position: relative; min-width: 0; display: grid; gap: 8px; align-content: start; padding: 16px 14px 16px 20px; }
.ad-tw::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 4px; border-radius: 0 4px 4px 0; background: var(--ad-s-in); }
.ad-tw.out::before { background: var(--ad-s-out); }
.ad-tw + .ad-tw { box-shadow: -1px 0 0 var(--ink-line); }
.ad-k { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 13px; color: var(--ink-fg-2); }
.ad-k i { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--ad-s-in); }
.ad-tw.out .ad-k i { background: var(--ad-s-out); }
.ad-k b { font-size: 15px; font-weight: 650; color: var(--ink-fg); }
.ad-k small { font-size: 12px; color: var(--ink-fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-v { display: grid; gap: 4px; min-width: 0; white-space: nowrap; }
.ad-v small, .ad-tv small { font-size: 13px; font-weight: 600; color: var(--ink-fg-3); }
.ad-v b { display: inline-block; font: 650 clamp(24px, 8.4cqi, 52px)/.95 var(--f); font-stretch: 75%; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ad-twin.long .ad-v b { font-size: clamp(20px, 7.3cqi, 46px); }
@container (max-width: 399.98px) { .ad-k small { display: none; } }
.ad-m { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 12.5px; color: var(--ink-fg-2); }
.ad-m b { color: var(--ink-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ad-d { display: inline-flex; align-items: center; gap: 1px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ad-win .ad-d .ic { width: 15px; height: 15px; }
.ad-slip .ad-d.good { color: var(--ad-s-good); } .ad-slip .ad-d.bad { color: var(--ad-s-bad); }
.ad-chart { display: block; width: 100%; height: auto; margin-top: 18px; overflow: visible; }
.ad-chart .b { transform-box: fill-box; transform-origin: 50% 100%; }
.ad-chart .b.in { fill: var(--ad-s-in); }
.ad-chart .b.out { fill: var(--ad-s-out); transform-origin: 50% 0; }
.ad-chart .b.now { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ad-s-in) 70%, transparent)); }
.ad-chart .b.out.now { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ad-s-out) 70%, transparent)); }
.ad.go .ad-chart .b.grow { animation: ad-pop .7s var(--ease); }
@keyframes ad-pop { 40% { opacity: .55; } }
.ad-base { stroke: var(--ink-dots); stroke-width: 1.5; stroke-dasharray: 2 4; }
.ad-ax { display: flex; justify-content: space-between; margin-top: 8px; font: 500 11.5px/1 var(--mono); color: var(--ink-fg-3); }
.ad-tot { display: grid; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 3px double var(--ink-dots); }
.ad-tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-width: 0; }
.ad-tk { display: grid; gap: 3px; font-size: 16px; font-weight: 650; white-space: nowrap; }
.ad-tk small { font-size: 12px; font-weight: 500; color: var(--ink-fg-3); }
.ad-tr > i { flex: 1; min-width: 16px; border-bottom: 2px dotted var(--ink-dots); transform: translateY(-6px); }
.ad-tv { margin-left: auto; display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.ad-tv b { display: inline-block; font: 650 clamp(30px, 3cqi + 14px, 48px)/1 var(--f); font-stretch: 76%; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.ad-ts { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--ink-fg-2); }
.ad-ts b { color: var(--ink-fg); font-weight: 650; }
.ad-ts > span { display: inline-flex; align-items: center; gap: 5px; }
.ad-tw.bump .ad-v b, .ad-tot.bump .ad-tv b { animation: ad-bump .7s var(--spring); }
@keyframes ad-bump { 30% { transform: translateY(-3px); color: var(--ad-flash); } }

/* the cards beside and under it */
.ad-card { min-width: 0; border-radius: 20px; background: var(--surface); box-shadow: var(--card); padding: 16px; }
@container adwin (min-width: 700px) { .ad-card { padding: 18px 20px; } }
.ad-ch { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px !important; font-size: 15.5px; font-weight: 650; }
.ad-ch > span { font-size: 12.5px; font-weight: 600; color: var(--fg-3); }
.ad-alert { --tone: var(--ad-bad); --tone-fg: var(--ad-bad-fg); display: flex; flex-direction: column; gap: 12px;
  background: color-mix(in srgb, var(--tone) 6%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 24%, transparent); }
.ad-alert.gold { --tone: var(--accent); --tone-fg: var(--accent-fg); }
.ad-ah { display: flex; align-items: flex-start; gap: 12px; }
.ad-aic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: color-mix(in srgb, var(--tone) 15%, transparent); color: var(--tone-fg); }
.ad-win .ad-aic .ic { width: 22px; height: 22px; }
.ad-at { display: grid; gap: 4px; min-width: 0; }
.ad-at b { font-size: 18px; line-height: 1.2; font-weight: 650; color: var(--tone-fg); letter-spacing: -.01em; }
.ad-at small { font-size: 13.5px; line-height: 1.4; color: var(--fg-2); }
.ad-al { display: grid; }
.ad-al li { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--tone) 16%, var(--line)); }
.ad-av { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #7C3AED; color: #fff; font-size: 13px; font-weight: 700; }
.ad-av.a1 { background: #0E7490; } .ad-av.a2 { background: #C2410C; }
.ad-an { flex: 1; min-width: 0; display: grid; gap: 2px; line-height: 1.3; }
.ad-an b { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-an small { font-size: 12.5px; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-al em { --p: var(--ad-bad); --pf: var(--ad-bad-fg); flex: none; padding: 6px 9px; border-radius: 99px; background: color-mix(in srgb, var(--p) 14%, transparent); color: var(--pf); font: 700 11.5px/1 var(--f); font-style: normal; white-space: nowrap; }
.ad-al em.due, .ad-al em.gold { --p: var(--accent); --pf: var(--accent-fg); } .ad-al em.good { --p: var(--in); --pf: var(--in-fg); }
.ad-acts { display: flex; gap: 8px; margin-top: auto; }
.ad-alert.gold .ad-acts { display: none; }
.ad-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; height: 42px; border-radius: 12px; background: var(--fg); color: var(--bg); font-size: 14px; font-weight: 650; }
.ad-btn.wa { background: var(--wa); color: var(--wa-fg); }
.ad-win .ad-btn .ic { width: 18px; height: 18px; }
.ad-next { display: flex; align-items: center; gap: 14px; }
.ad-nic { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: color-mix(in srgb, var(--ad-blue) 13%, transparent); color: var(--ad-blue); }
.ad-win .ad-nic .ic { width: 24px; height: 24px; }
.ad-nt { flex: 1; min-width: 0; display: grid; gap: 3px; }
.ad-nt small { font: 600 11.5px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); }
.ad-nt b { font-size: 16.5px; line-height: 1.25; font-weight: 650; }
.ad-nt span { font-size: 13.5px; color: var(--fg-2); }
.ad-win .ad-next > .ic { flex: none; color: var(--fg-3); }
.ad-by ul { display: grid; gap: 13px; }
.ad-by li { display: grid; grid-template-columns: minmax(0, 1fr) auto 3.2em; gap: 7px 10px; align-items: baseline; font-size: 14px; }
.ad-bn { min-width: 0; color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-by b { font-weight: 650; font-variant-numeric: tabular-nums; }
.ad-by small { text-align: right; font-size: 12.5px; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.ad-by i { grid-column: 1 / -1; height: 9px; border-radius: 99px; background: var(--well); overflow: hidden; }
.ad-by em { display: block; height: 100%; width: var(--w, 40%); border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--tint) 55%, var(--in)), var(--tint)); transition: width 1s var(--spring); }
.ad-by li.hot b { animation: ad-hot 1.2s var(--ease); }
@keyframes ad-hot { 0%, 30% { color: var(--in-fg); } }
.ad-pulse { display: inline-flex; align-items: center; gap: 6px; font: 700 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.ad-ch > .ad-pulse { color: var(--in-fg); font-size: 11px; }
.ad-pulse i { width: 7px; height: 7px; border-radius: 50%; background: var(--in); }
.ad-fl { display: grid; transition: opacity .4s ease; }
.ad-fl li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.ad-fl li:first-child { border-top: 0; }
.ad-fl time { font: 500 12px/1 var(--mono); color: var(--fg-3); }
.ad-fl span { min-width: 0; display: grid; gap: 2px; line-height: 1.3; }
.ad-fl b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-fl small { font-size: 12.5px; color: var(--fg-3); }
.ad-fl em { font: 650 15px/1 var(--f); font-style: normal; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--in-fg); }
.ad-fl li.out em { color: var(--ad-out-fg); }
.ad-fl li.new { animation: ad-row .8s var(--spring); }
@keyframes ad-row { from { opacity: 0; transform: translateY(-12px); background: color-mix(in srgb, var(--accent) 24%, transparent); } }
.ad.rewind .ad-fl { opacity: 0; }
.ad-notes ul { display: grid; gap: 14px; }
@container adwin (min-width: 700px) { .ad-notes ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ad-notes li { display: flex; align-items: flex-start; gap: 11px; }
.ad-ni { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-fg); }
.ad-win .ad-ni .ic { width: 19px; height: 19px; }
.ad-notes li > span:last-child { display: grid; gap: 2px; min-width: 0; line-height: 1.35; }
.ad-notes b { font-size: 14.5px; font-weight: 600; }
.ad-notes small { font-size: 13px; color: var(--fg-2); }
.ad-cap { max-width: 66ch; margin: 20px auto 0; text-align: center; font-size: 14.5px; line-height: 1.55; color: var(--fg-3); text-wrap: pretty; }
.ad-cap b { color: var(--fg-2); font-weight: 600; }

/* it plays when it comes on screen (site/dash.js); if the script never comes, it shows itself after a moment */
.motion .ad:not(.go) .ad-v b, .motion .ad:not(.go) .ad-tv b { opacity: 0; animation: ad-show 0s linear 3s forwards; }
.motion .ad:not(.go) .ad-chart .b { transform: scaleY(0); animation: ad-show 0s linear 3s forwards; }
.motion .ad:not(.go) .ad-by em { width: 0; animation: ad-showw 0s linear 3s forwards; }
@keyframes ad-showw { to { width: var(--w, 40%); } }
.ad-by em.w5 { --w: 5%; } .ad-by em.w10 { --w: 10%; } .ad-by em.w15 { --w: 15%; } .ad-by em.w20 { --w: 20%; } .ad-by em.w25 { --w: 25%; } .ad-by em.w30 { --w: 30%; } .ad-by em.w35 { --w: 35%; } .ad-by em.w40 { --w: 40%; } .ad-by em.w45 { --w: 45%; } .ad-by em.w50 { --w: 50%; } .ad-by em.w55 { --w: 55%; } .ad-by em.w60 { --w: 60%; } .ad-by em.w65 { --w: 65%; } .ad-by em.w70 { --w: 70%; } .ad-by em.w75 { --w: 75%; } .ad-by em.w80 { --w: 80%; } .ad-by em.w85 { --w: 85%; } .ad-by em.w90 { --w: 90%; } .ad-by em.w95 { --w: 95%; } .ad-by em.w100 { --w: 100%; }
@keyframes ad-show { to { opacity: 1; transform: none; } }
.ad.go .ad-chart .b { animation: ad-rise .8s var(--ease) both; animation-delay: calc(var(--i, 0) * 24ms + .1s); }
@keyframes ad-rise { from { transform: scaleY(0); } }
.ad.go .ad-al li { animation: ad-in .6s var(--spring) both; animation-delay: calc(.7s + var(--i, 0) * .15s); }
@keyframes ad-in { from { opacity: 0; transform: translateX(16px); } }

/* on a page for a kind of business: the words, then the screen */
.sub-top.has-dash { padding-bottom: clamp(26px, 4vw, 44px); }
.sub-dash { padding: 0 0 clamp(56px, 8vw, 104px); }