/* Today's Split pages (/todayssplit and /todayssplit/join): the app's own brand inside the Bytes Of Jord shell.
   Everything is scoped under .ts with ts- classes and --ts-* tokens so nothing clashes with site.css.
   The dark tokens key on the same html[data-theme] and prefers-color-scheme as tokens.css, so the site's toggle switches these too.
   Source of the copy and layout: marketing/landing-page/index.html in the P2PSplit project. */

.ts {
  --ts-bg: #F3F5F9;
  --ts-surface: #FFFFFF;
  --ts-ink: #121722;
  --ts-muted: #596274;
  --ts-line: #DCE1EA;
  --ts-accent: #2B67E3;
  --ts-accent-ink: #FFFFFF;
  --ts-accent-soft: #E6EEFD;
  --ts-half: #9DBBFF;
  --ts-pos: #16804A; --ts-pos-soft: #E2F3E9; --ts-neg: #C0352B; --ts-warn: #9A6210;
  --ts-c-groceries: #2E9A58; --ts-c-gas: #B87A0E; --ts-c-eating: #E0663A; --ts-c-kids: #CF6B16; --ts-c-utilities: #9F8406;
  --ts-shadow: 0 30px 60px -20px rgba(18, 23, 34, .28);
  --ts-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --ts-body: "Figtree", -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .ts {
    --ts-bg: #0D1118; --ts-surface: #161B24; --ts-ink: #E8ECF3; --ts-muted: #97A1B3; --ts-line: #2A3240;
    --ts-accent: #6E9BFF; --ts-accent-ink: #0B1222; --ts-accent-soft: #1A2847; --ts-half: #34518F;
    --ts-pos: #4CC38A; --ts-pos-soft: #123022; --ts-neg: #FF7D73; --ts-warn: #E9B04E;
    --ts-c-groceries: #4FC27F; --ts-c-gas: #F0B341; --ts-c-eating: #FF8A5E; --ts-c-kids: #FFA552; --ts-c-utilities: #E6CB45;
    --ts-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] .ts {
  --ts-bg: #0D1118; --ts-surface: #161B24; --ts-ink: #E8ECF3; --ts-muted: #97A1B3; --ts-line: #2A3240;
  --ts-accent: #6E9BFF; --ts-accent-ink: #0B1222; --ts-accent-soft: #1A2847; --ts-half: #34518F;
  --ts-pos: #4CC38A; --ts-pos-soft: #123022; --ts-neg: #FF7D73; --ts-warn: #E9B04E;
  --ts-c-groceries: #4FC27F; --ts-c-gas: #F0B341; --ts-c-eating: #FF8A5E; --ts-c-kids: #FFA552; --ts-c-utilities: #E6CB45;
  --ts-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7);
  color-scheme: dark;
}
.ts * { box-sizing: border-box; }
.ts { background: var(--ts-bg); color: var(--ts-ink); font-family: var(--ts-body); font-size: 17px; line-height: 1.55; }
.ts .ts-wrap { max-width: 1120px; margin: 0 auto; padding-inline: 20px; }
.ts h1, .ts h2, .ts h3 { font-family: var(--ts-display); margin: 0; text-wrap: balance; }
.ts h2 { font-size: clamp(30px, 4.4vw, 48px); line-height: 1.05; letter-spacing: -.02em; font-weight: 800; }
.ts h3 { font-size: 21px; line-height: 1.2; font-weight: 700; }
.ts p { margin: 0; max-width: 62ch; }
.ts .ts-muted { color: var(--ts-muted); }
.ts .ts-num { font-variant-numeric: tabular-nums; }
.ts a { color: var(--ts-accent); }
.ts :focus-visible { outline: 2px solid var(--ts-accent); outline-offset: 3px; }
.ts .ts-mark { display: flex; align-items: center; gap: 10px; font-family: var(--ts-display); font-weight: 800; font-size: 20px; text-decoration: none; color: var(--ts-ink); }
.ts .ts-links { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; font-weight: 600; font-size: 15px; }
.ts .ts-links a { color: var(--ts-ink); text-decoration: none; }
.ts .ts-links a:hover { color: var(--ts-accent); }
.ts .ts-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 700; font-size: 16px; text-decoration: none; padding: 13px 22px; border-radius: 14px; background: var(--ts-accent); color: var(--ts-accent-ink); border: 0; cursor: pointer; transition: transform 100ms linear, background 180ms cubic-bezier(.2,0,0,1); }
.ts .ts-btn:hover { transform: translateY(-1px); }
.ts .ts-btn:active { transform: translateY(0) scale(.98); }
.ts .ts-btn.ts-alt { background: var(--ts-accent-soft); color: var(--ts-accent); }
.ts .ts-btn.ts-small { padding: 9px 16px; font-size: 15px; border-radius: 12px; }
.ts .ts-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: center; padding-block: 40px 72px; }
.ts .ts-hero h1 { font-size: clamp(52px, 9vw, 112px); line-height: .92; letter-spacing: -.035em; font-weight: 800; }
.ts .ts-hero h1 .ts-split { display: inline-block; position: relative; color: var(--ts-accent); }
.ts .ts-hero .ts-lede { font-size: 20px; margin-top: 24px; color: var(--ts-muted); }
.ts .ts-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.ts .ts-fine { margin-top: 14px; font-size: 14px; color: var(--ts-muted); }
.ts .ts-stage { position: relative; display: grid; place-items: center; min-height: 560px; }
.ts .ts-disc { position: absolute; width: min(520px, 100%); aspect-ratio: 1; max-width: 100%; border-radius: 50%; background: linear-gradient(90deg, var(--ts-accent) 0 49%, transparent 49% 51%, var(--ts-half) 51% 100%); opacity: .16; }
.ts .ts-phone { position: relative; width: 300px; max-width: 100%; border-radius: 44px; background: #111622; padding: 9px; box-shadow: var(--ts-shadow); }
.ts .ts-screen { border-radius: 36px; background: var(--ts-bg); overflow: hidden; padding: 14px 12px 18px; display: grid; gap: 10px; font-size: 13px; line-height: 1.3; }
.ts .ts-sbar { display: flex; justify-content: space-between; font-weight: 700; font-size: 12px; padding: 2px 10px 4px; }
.ts .ts-ph-top { display: flex; justify-content: space-between; align-items: center; padding: 0 4px; font-weight: 700; }
.ts .ts-ph-top .ts-back { color: var(--ts-accent); font-weight: 600; }
.ts .ts-card { background: var(--ts-surface); border-radius: 14px; border: 1px solid var(--ts-line); }
.ts .ts-bal { display: flex; justify-content: space-between; align-items: center; padding: 12px; }
.ts .ts-bal b { display: block; font-size: 24px; color: var(--ts-pos); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ts .ts-bal .ts-pill { background: var(--ts-accent); color: var(--ts-accent-ink); font-weight: 700; padding: 8px 12px; border-radius: 10px; }
.ts .ts-rows .ts-r { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; gap: 9px; align-items: center; padding: 9px 11px; }
.ts .ts-rows .ts-r + .ts-r { border-top: 1px solid var(--ts-line); }
.ts .ts-ce { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; background: color-mix(in srgb, var(--ts-cat) 18%, transparent); }
.ts .ts-r .ts-t { font-weight: 600; }
.ts .ts-r .ts-s { color: var(--ts-muted); font-size: 11.5px; }
.ts .ts-r .ts-a { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.ts .ts-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ts-muted); padding: 2px 4px 0; }
.ts .ts-toast { position: absolute; right: -18px; bottom: 90px; background: var(--ts-surface); border: 1px solid var(--ts-line); border-radius: 14px; padding: 10px 14px; box-shadow: var(--ts-shadow); display: flex; gap: 10px; align-items: center; font-size: 14px; font-weight: 600; animation: ts-rise 600ms 400ms cubic-bezier(.17,.89,.32,1.12) both; }
.ts .ts-toast .ts-ok { width: 26px; height: 26px; border-radius: 50%; background: var(--ts-pos-soft); color: var(--ts-pos); display: grid; place-items: center; }
@keyframes ts-rise { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.ts section { padding-block: 72px; border-top: 1px solid var(--ts-line); }
.ts .ts-kicker { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ts-accent); margin-bottom: 14px; }
.ts .ts-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; counter-reset: s; }
.ts .ts-step { background: var(--ts-surface); border: 1px solid var(--ts-line); border-radius: 20px; padding: 24px; display: grid; gap: 10px; align-content: start; }
.ts .ts-step::before { counter-increment: s; content: counter(s); font-family: var(--ts-display); font-weight: 800; font-size: 44px; line-height: 1; color: var(--ts-accent); }
.ts .ts-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.ts .ts-feats { display: grid; gap: 18px; margin-top: 28px; }
.ts .ts-feat { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; }
.ts .ts-feat .ts-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--ts-accent-soft); display: grid; place-items: center; font-size: 20px; }
.ts .ts-feat p { font-size: 16px; color: var(--ts-muted); }
.ts .ts-feat strong { display: block; color: var(--ts-ink); font-size: 17px; }
.ts .ts-panel { background: var(--ts-surface); border: 1px solid var(--ts-line); border-radius: 22px; padding: 22px; display: grid; gap: 14px; box-shadow: var(--ts-shadow); }
.ts .ts-bline { display: grid; gap: 6px; }
.ts .ts-bline .ts-h { display: flex; justify-content: space-between; font-size: 15px; font-weight: 600; }
.ts .ts-bar { position: relative; height: 10px; border-radius: 99px; background: color-mix(in srgb, var(--ts-ink) 8%, transparent); }
.ts .ts-bar b { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--ts-accent); }
.ts .ts-bar b.ts-w { background: var(--ts-warn); }
.ts .ts-bar b.ts-o { background: repeating-linear-gradient(135deg, var(--ts-neg) 0 6px, color-mix(in srgb, var(--ts-neg) 65%, var(--ts-surface)) 6px 10px); }
.ts .ts-bar i { position: absolute; top: -4px; bottom: -4px; left: 77%; width: 2px; background: var(--ts-ink); opacity: .5; }
.ts .ts-stmt { border-top: 1px dashed var(--ts-line); padding-top: 14px; display: grid; gap: 6px; font-size: 15px; }
.ts .ts-stmt div { display: flex; justify-content: space-between; }
.ts .ts-stmt .ts-tot { font-weight: 700; border-top: 1px solid var(--ts-line); padding-top: 6px; }
.ts .ts-privacy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.ts .ts-flow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; background: var(--ts-surface); border: 1px solid var(--ts-line); border-radius: 22px; padding: 28px 22px; }
.ts .ts-dev { display: grid; justify-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.ts .ts-dev .ts-box { width: 56px; height: 96px; border-radius: 14px; border: 3px solid var(--ts-ink); display: grid; place-items: center; font-size: 22px; }
.ts .ts-pipe { display: grid; gap: 8px; justify-items: center; text-align: center; font-size: 13px; color: var(--ts-muted); }
.ts .ts-pipe .ts-line { width: 100%; height: 2px; background: repeating-linear-gradient(90deg, var(--ts-accent) 0 8px, transparent 8px 14px); animation: ts-flow 1.2s linear infinite; background-size: 28px 2px; }
@keyframes ts-flow { to { background-position: 28px 0; } }
.ts .ts-pipe code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; background: var(--ts-accent-soft); color: var(--ts-accent); padding: 4px 8px; border-radius: 8px; word-break: break-all; }
.ts .ts-checks { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.ts .ts-checks li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; }
.ts .ts-checks li::before { content: "✓"; width: 24px; height: 24px; border-radius: 50%; background: var(--ts-pos-soft); color: var(--ts-pos); display: grid; place-items: center; font-weight: 800; font-size: 13px; margin-top: 2px; }
.ts .ts-cmp-wrap { overflow-x: auto; margin-top: 32px; }
.ts table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 16px; }
.ts th, .ts td { text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--ts-line); }
.ts th { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ts-muted); }
.ts td:first-child { font-weight: 600; }
.ts td.ts-us, .ts th.ts-us { background: var(--ts-accent-soft); }
.ts .ts-y { color: var(--ts-pos); font-weight: 700; }
.ts .ts-n { color: var(--ts-muted); }
.ts .ts-faq { display: grid; gap: 10px; margin-top: 32px; max-width: 820px; }
.ts .ts-final { text-align: center; display: grid; justify-items: center; gap: 18px; padding-block: 88px; }
.ts .ts-final h2 { font-size: clamp(40px, 7vw, 80px); }
@media (max-width: 860px) {
.ts .ts-hero, .ts .ts-two, .ts .ts-privacy { grid-template-columns: minmax(0, 1fr); }
.ts .ts-steps { grid-template-columns: minmax(0, 1fr); }
.ts .ts-stage { min-height: 0; padding-block: 20px; }
.ts .ts-toast { right: 0; }
.ts .ts-links a:not(.ts-btn) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.ts *, .ts *::before, .ts *::after { animation: none !important; transition: none !important; }
}

/* Sub-nav under the sticky site header (76px tall) */
.ts-subnav { position: sticky; top: 76px; z-index: 15; background: color-mix(in srgb, var(--ts-bg) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--ts-line); }
.ts-subnav .ts-wrap { display: flex; align-items: center; gap: 20px; min-height: 60px; }
.ts-subnav .ts-mark { font-size: 18px; flex: 1; min-width: 0; }
.ts .ts-links a.ts-btn, .ts .ts-links a.ts-btn:hover { color: var(--ts-accent-ink); }
.ts [id] { scroll-margin-top: 152px; }
.ts .ts-mark svg { flex-shrink: 0; }
.ts .ts-crumb { font-family: var(--font-mono); font-size: 12px; color: var(--ts-muted); padding-top: 28px; display: flex; gap: 8px; }
.ts .ts-crumb a { color: var(--ts-muted); }
.ts .ts-hero { padding-top: 24px; }
.ts .ts-soon { display: inline-flex; align-items: center; padding: 13px 22px; border-radius: 14px; border: 1px dashed var(--ts-line); color: var(--ts-muted); font-weight: 600; font-size: 16px; }
.ts .ts-final .ts-cta { justify-content: center; }

/* FAQ: a custom chevron instead of the hanging browser marker, so questions line up with the answers */
.ts details { background: var(--ts-surface); border: 1px solid var(--ts-line); border-radius: 16px; }
.ts summary { cursor: pointer; font-weight: 700; padding: 18px 24px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.ts summary::-webkit-details-marker { display: none; }
.ts summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--ts-muted); border-bottom: 2px solid var(--ts-muted); transform: rotate(45deg) translate(-2px, -2px); transition: transform 180ms cubic-bezier(.2,0,0,1); flex-shrink: 0; }
.ts details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.ts details p { padding: 0 24px 20px; color: var(--ts-muted); }

/* Join page */
.ts.ts-join-page { min-height: calc(100vh - 77px - 73px); display: grid; place-items: center; padding: 48px 0 64px; }
.ts .ts-join-card { width: min(560px, calc(100% - 32px)); background: var(--ts-surface); border: 1px solid var(--ts-line); border-radius: 28px; box-shadow: var(--ts-shadow); padding: 36px; display: grid; gap: 22px; }
.ts .ts-join-card .ts-mark { font-size: 20px; }
.ts .ts-join-card h1 { font-size: clamp(30px, 6vw, 40px); line-height: 1.05; letter-spacing: -.02em; font-weight: 800; }
.ts .ts-join-card .ts-lede { color: var(--ts-muted); font-size: 17px; margin-top: 12px; }
.ts .ts-join-steps { display: grid; gap: 18px; counter-reset: j; }
.ts .ts-join-step { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; align-items: start; }
.ts .ts-join-step::before { counter-increment: j; content: counter(j); width: 36px; height: 36px; border-radius: 50%; background: var(--ts-accent-soft); color: var(--ts-accent); display: grid; place-items: center; font-family: var(--ts-display); font-weight: 800; }
.ts .ts-join-step h2 { font-size: 18px; font-weight: 700; letter-spacing: 0; line-height: 1.3; margin: 6px 0 8px; }
.ts .ts-join-step p { font-size: 15px; color: var(--ts-muted); }
.ts .ts-join-step .ts-cta { margin-top: 12px; gap: 10px; }
.ts a.ts-store { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 16px; border-radius: 12px; background: var(--ts-ink); color: var(--ts-bg); text-decoration: none; font-weight: 600; font-size: 14px; line-height: 1.15; }
.ts a.ts-store small { display: block; font-size: 10.5px; font-weight: 500; opacity: .8; }
.ts a.ts-store svg { width: 22px; height: 22px; flex-shrink: 0; }
.ts .ts-code { display: flex; align-items: center; gap: 10px; border: 1px dashed var(--ts-line); border-radius: 14px; padding: 8px 8px 8px 14px; background: var(--ts-bg); margin-top: 12px; }
.ts .ts-code code { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; color: var(--ts-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts .ts-copied { color: var(--ts-pos); font-weight: 600; font-size: 14px; margin-top: 8px; min-height: 1.4em; }
.ts .ts-join-note { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-size: 14px; color: var(--ts-muted); border-top: 1px solid var(--ts-line); padding-top: 18px; }
.ts .ts-join-note svg { color: var(--ts-pos); margin-top: 2px; }
.ts .ts-join-note.ts-warn-note svg { color: var(--ts-warn); }
.ts .ts-qr-box { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; background: var(--ts-bg); border-radius: 18px; padding: 18px; }
.ts .ts-qr-box h2 { margin-top: 0; }
.ts .ts-qr { width: 148px; height: 148px; background: #fff; border-radius: 12px; padding: 8px; display: grid; place-items: center; }
.ts .ts-qr svg { width: 100%; height: 100%; display: block; }
.ts [hidden] { display: none !important; }
.ts-join-foot { border-top: 1px solid var(--border); font-size: 14px; }
.ts-join-foot .wrap { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap; padding-top: 16px; padding-bottom: 16px; }
.ts-join-foot nav { display: flex; gap: 20px; flex-wrap: wrap; }
.ts-join-foot a { color: var(--muted); }

@media (max-width: 640px) {
.ts .ts-join-card { padding: 24px; border-radius: 22px; }
.ts.ts-join-page { padding-top: 24px; }
.ts .ts-qr-box { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
}