/* Splitz: trysplitz.com
   Dark only. Every size and space below comes from the token scales; no rule
   introduces a one-off px value. The homepage uses the wide `.shell` container;
   the invite and document pages keep the narrower `.wrap`. */

/* ---------- Fonts ---------- */
@font-face{font-family:'Geist';src:url('assets/fonts/Geist-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Geist';src:url('assets/fonts/Geist-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Geist';src:url('assets/fonts/Geist-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Geist';src:url('assets/fonts/Geist-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Geist';src:url('assets/fonts/Geist-Black.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('assets/fonts/GeistMono-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('assets/fonts/GeistMono-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('assets/fonts/GeistMono-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  /* Colour */
  --lime:#C8F035;
  --blue:#3B82F6;
  --green:#22C55E;
  --venmo:#3D95CE;
  --cashapp:#00D632;
  --bg:#0A1020;
  --text:#FFFFFF;
  --text-2:#9CA3AF;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.10);
  --line-button:rgba(255,255,255,.12);
  --surface:rgba(255,255,255,.05);
  --lime-fill:rgba(200,240,53,.10);
  --lime-stroke:rgba(200,240,53,.30);
  --lime-glow:0 8px 20px rgba(200,240,53,.10);
  --amber:#FBBF24;
  --bar:rgba(10,16,32,.94);

  /* Type scale, monotonic */
  --t-2xs:12px;
  --t-xs:13px;
  --t-sm:14px;
  --t-md:15px;
  --t-base:16px;
  --t-lg:17px;
  --t-xl:18px;
  --t-2xl:20px;
  --t-3xl:21px;
  --t-4xl:22px;
  --t-5xl:24px;
  --t-6xl:26px;
  --t-7xl:28px;
  --t-8xl:32px;
  --t-9xl:33px;

  /* Display steps */
  --d-cta:clamp(36px,5vw,56px);
  --d-h2:clamp(40px,5.6vw,64px);
  --d-h1:clamp(42px,6.2vw,68px);
  --d-mark:clamp(70px,12vw,200px);
  --d-icon:clamp(80px,13vw,220px);

  /* Spacing scale, 4px grid */
  --s-1:4px;
  --s-2:8px;
  --s-3:12px;
  --s-4:16px;
  --s-5:20px;
  --s-6:24px;
  --s-7:28px;
  --s-8:32px;
  --s-9:40px;
  --s-10:48px;
  --s-11:56px;
  --s-12:64px;
  --s-13:72px;
  --s-14:80px;
  --s-15:96px;

  /* Radii */
  --r-sm:12px;
  --r-md:14px;
  --r-lg:16px;
  --r-xl:20px;
  --r-2xl:24px;

  --font:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'Geist Mono','SF Mono',ui-monospace,monospace;

  --wrap:960px;
  --shell:1600px;
  --gutter:24px;
  --shell-gutter:clamp(24px,4vw,64px);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  font-family:var(--font);
  font-size:var(--t-lg);
  line-height:1.6;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,p,ul,ol{margin:0}
ul{padding:0;list-style:none}
button{font:inherit;color:inherit;border:0;background:none}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:4px}
[hidden]{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Background ----------
   A straight vertical sweep, matching AtmosphericBackground.swift as it renders
   on device: its blooms are ~3.7x the screen width, so no curve is ever visible
   and the alpha falls off linearly from top to bottom. */
.bg{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(59,130,246,.020),rgba(59,130,246,.248)),
    linear-gradient(to bottom,rgba(200,240,53,.250),rgba(200,240,53,.007));
}

/* ---------- Containers ---------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.shell{width:100%;max-width:var(--shell);margin:0 auto;padding:0 var(--shell-gutter)}

/* ================================================================
   Homepage
   ================================================================ */

/* Content scale. The approved design's sizes are kept as the base values and
   multiplied here, so the whole site can be resized from one number. Every
   page carries class="home", so all pages share this scale and palette.
   Secondary text is lightened because at this scale it falls below the
   large-text threshold and #9CA3AF measures 3.82:1 against the lightest part
   of the background sweep, where #B0B7C3 measures 4.80:1. */
.home{
  --scale:.8;
  /* Badges get their own scale so mobile can shrink them without touching
     anything else. Desktop keeps the approved sizes. */
  --badge-scale:var(--scale);
  --text-2:#B0B7C3;

  /* Floors keep the smallest labels legible on a phone once scaled. */
  --t-2xs:max(11px,calc(12px * var(--scale)));
  --t-xs:max(11.5px,calc(13px * var(--scale)));
  --t-sm:max(12px,calc(14px * var(--scale)));
  --t-md:calc(15px * var(--scale));
  --t-base:calc(16px * var(--scale));
  --t-lg:calc(17px * var(--scale));
  --t-xl:calc(18px * var(--scale));
  --t-2xl:calc(20px * var(--scale));
  --t-3xl:calc(21px * var(--scale));
  --t-4xl:calc(22px * var(--scale));
  --t-5xl:calc(24px * var(--scale));
  --t-6xl:calc(26px * var(--scale));
  --t-7xl:calc(28px * var(--scale));
  --t-8xl:calc(32px * var(--scale));
  --t-9xl:calc(33px * var(--scale));

  --d-cta:calc(clamp(36px,5vw,56px) * var(--scale));
  --d-h2:calc(clamp(40px,5.6vw,64px) * var(--scale));
  --d-h1:calc(clamp(42px,6.2vw,68px) * var(--scale));
  --d-mark:calc(clamp(70px,12vw,200px) * var(--scale));
  --d-icon:calc(clamp(80px,13vw,220px) * var(--scale));

  /* Spacing and the container take the same scale as the content, so the
     ratio of whitespace to text stays as the design intends. */
  --s-1:calc(4px * var(--scale));
  --s-2:calc(8px * var(--scale));
  --s-3:calc(12px * var(--scale));
  --s-4:calc(16px * var(--scale));
  --s-5:calc(20px * var(--scale));
  --s-6:calc(24px * var(--scale));
  --s-7:calc(28px * var(--scale));
  --s-8:calc(32px * var(--scale));
  --s-9:calc(40px * var(--scale));
  --s-10:calc(48px * var(--scale));
  --s-11:calc(56px * var(--scale));
  --s-12:calc(64px * var(--scale));
  --s-13:calc(72px * var(--badge-scale));
  --s-14:calc(80px * var(--scale));
  --s-15:calc(96px * var(--scale));
  --shell:calc(1600px * var(--scale));
  --shell-gutter:calc(clamp(24px,4vw,64px) * var(--scale));
}

/* ---------- Masthead ---------- */
.masthead{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-4);height:var(--s-14);
}
.mark{font-family:var(--font);font-weight:900;text-decoration:none;line-height:1}
a.mark{display:inline-flex;align-items:center;min-height:44px}
.mark b{color:var(--lime);font-weight:900}
.mark i{color:var(--blue);font-style:normal;font-weight:900}
.masthead .mark{font-size:var(--t-8xl);letter-spacing:-1.4px}
.masthead-links{display:flex;align-items:center;gap:var(--s-8);font-size:var(--t-5xl);font-weight:500}
.masthead-links a{color:var(--text-2);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.btn-glass{
  display:inline-flex;align-items:center;min-height:44px;height:var(--s-11);padding:0 var(--s-6);
  border-radius:var(--r-md);background:var(--surface);
  border:1px solid var(--line-button);color:var(--lime);
  font-weight:600;text-decoration:none;white-space:nowrap;
}

/* ---------- Logo row ---------- */
.logo-row{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(16px,3vw,40px);padding:var(--s-11) 0 var(--s-6);
}
.logo-row img{
  width:var(--d-icon);height:var(--d-icon);
  border-radius:22%;border:1px solid var(--line-strong);box-shadow:var(--lime-glow);
}
.logo-row .mark{font-size:var(--d-mark);letter-spacing:-.05em}

/* ---------- Sections ---------- */
.home section{padding:var(--s-14) 0}
.home #top{padding:var(--s-8) 0 var(--s-13)}
.home .cta-section{padding:var(--s-6) 0 var(--s-14);scroll-margin-top:var(--s-9)}
.h1{font-size:var(--d-h1);font-weight:900;line-height:1.02;letter-spacing:-.035em;text-wrap:balance}
.h2{font-size:var(--d-h2);font-weight:900;line-height:1.02;letter-spacing:-.035em;text-wrap:balance}
.lede{font-size:var(--t-7xl);line-height:1.45;color:var(--text-2);text-wrap:pretty}
.intro{font-size:var(--t-6xl);line-height:1.5;color:var(--text-2);text-wrap:pretty}
.body-lg{font-size:var(--t-5xl);line-height:1.5;color:var(--text-2);text-wrap:pretty}

/* ---------- Hero ---------- */
.hero{display:grid;grid-template-columns:1fr;gap:var(--s-10) var(--s-13);align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:var(--s-7);max-width:calc(820px * var(--scale))}
.hero-copy .lede{max-width:calc(760px * var(--scale))}
.hero-shot{display:flex;justify-content:center}
.hero-shot img,.split-shot img{
  width:min(70vw,calc(400px * var(--scale)));border-radius:var(--r-2xl);
  border:1px solid var(--lime-stroke);box-shadow:var(--lime-glow);
}
.split-shot{display:flex;justify-content:center}

/* ---------- Store badges ----------
   Official artwork, unmodified. Apple's SVG is the badge edge to edge; Google's
   PNG carries 41px of clear space on every side, so it is set larger and pulled
   back with negative margins to make the visible art match Apple's height.
   Do not recolour, crop, or stretch either file. */
.badges{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-6)}
.badges a{display:block;text-decoration:none}
.badges--hero .b-apple,.badges--hero .b-apple img{width:calc(216px * var(--badge-scale));height:calc(72px * var(--badge-scale))}
.badges--hero .b-google,.badges--hero .b-google img{width:calc(274px * var(--badge-scale));height:calc(106px * var(--badge-scale))}
.badges--hero .b-google{margin:calc(-17.4px * var(--badge-scale))}
.badges--cta{justify-content:center;gap:var(--s-2) var(--s-4)}
.badges--cta .b-apple,.badges--cta .b-apple img{width:calc(165px * var(--scale));height:calc(55px * var(--scale))}
.badges--cta .b-google,.badges--cta .b-google img{width:calc(211.5px * var(--scale));height:calc(81.85px * var(--scale))}
.badges--cta .b-google{margin:calc(-13.4px * var(--scale))}

/* ---------- Walkthrough ---------- */
.block{display:flex;flex-direction:column;gap:var(--s-9)}
.block-head{display:flex;flex-direction:column;gap:var(--s-4)}
.block-head .intro{max-width:calc(900px * var(--scale))}
.steps{display:grid;grid-template-columns:1fr;gap:var(--s-6);padding:0;list-style:none}
.card{
  border-radius:var(--r-xl);background:var(--surface);
  border:1px solid var(--line);overflow:hidden;
}
.step-inner{display:flex;flex-direction:column;gap:var(--s-5);padding:var(--s-6) var(--s-6) var(--s-7)}
.step-inner img{
  width:100%;aspect-ratio:400/870;object-fit:cover;object-position:top;
  border-radius:var(--r-lg);border:1px solid var(--line);
}
.step-text{display:flex;flex-direction:column;gap:var(--s-3)}
.step-text h3{font-size:var(--t-9xl);font-weight:700;line-height:1.15;letter-spacing:-.02em}

/* ---------- Features ----------
   Nine short cards, 1 -> 2 -> 3 columns, then a row of four store screens,
   each carrying its own headline. */
.features{display:grid;grid-template-columns:1fr;gap:var(--s-4);padding:0;list-style:none}
.feature{padding:var(--s-6) var(--s-6) var(--s-7);display:flex;flex-direction:column;gap:var(--s-2)}
.feature h3{font-size:var(--t-7xl);font-weight:700;line-height:1.2;letter-spacing:-.02em}
.feature p{font-size:var(--t-4xl);line-height:1.5;color:var(--text-2);text-wrap:pretty}
.shots-row{display:grid;grid-template-columns:1fr;gap:var(--s-8) var(--s-6);padding:0;list-style:none;margin-top:var(--s-4)}
.shots-row li{display:flex;flex-direction:column;align-items:center;gap:var(--s-4);text-align:center}
.shots-row img{
  width:min(70vw,calc(320px * var(--scale)));border-radius:var(--r-xl);
  border:1px solid var(--line-strong);
}
.shots-row p{font-size:var(--t-4xl);line-height:1.5;color:var(--text-2);max-width:calc(320px * var(--scale));text-wrap:pretty}

/* Numbered steps in a section's copy, lime numbers. */
.num-list{
  counter-reset:n;display:flex;flex-direction:column;gap:var(--s-4);
  padding:0;list-style:none;font-size:var(--t-5xl);color:var(--text-2);line-height:1.5;
}
.num-list li{counter-increment:n;display:flex;gap:var(--s-4)}
.num-list li::before{
  content:counter(n);flex:none;width:var(--s-8);height:var(--s-8);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--lime-fill);border:1px solid var(--lime-stroke);color:var(--lime);
  font-family:var(--mono);font-size:var(--t-xl);font-weight:700;
}

/* ---------- Accuracy ---------- */
.split{display:grid;grid-template-columns:1fr;gap:var(--s-10) var(--s-15);align-items:center}
.split-copy{display:flex;flex-direction:column;gap:var(--s-7)}
.split-head{display:flex;flex-direction:column;gap:var(--s-3)}
.dash-list{display:flex;flex-direction:column;gap:var(--s-4);font-size:var(--t-5xl);color:var(--text-2)}
.dash-list li{display:flex;gap:var(--s-3)}
.dash-list li::before{
  content:"";flex:none;width:var(--s-3);height:2px;margin-top:.75em;
  background:var(--lime);border-radius:1px;
}

/* ---------- Panels and item rows (claim page) ---------- */
.panel{border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line)}
.items{padding:var(--s-1) var(--s-4);display:flex;flex-direction:column}
.item{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);padding:var(--s-3) 0}
.item + .item{border-top:1px solid var(--line)}
.item-name{display:flex;flex-direction:column;gap:var(--s-1)}
.item-name b{font-size:var(--t-xl);font-weight:600}
.item-name span{font-family:var(--mono);font-size:var(--t-xs);color:var(--text-2)}
.item-amt{font-family:var(--mono);font-size:var(--t-xl);font-weight:500}

/* ---------- FAQ ---------- */
.qa{padding:var(--s-1) var(--s-7);display:flex;flex-direction:column}
.qa-row{padding:var(--s-5) 0;display:flex;flex-direction:column;gap:var(--s-2)}
.qa-row + .qa-row{border-top:1px solid var(--line)}
.qa-row h3{font-size:var(--t-6xl);font-weight:600;line-height:1.25}
.qa-link{color:var(--lime);text-decoration:none}
.qa-link:hover{text-decoration:underline}

/* ---------- Closing CTA ---------- */
.cta{
  border-radius:var(--r-2xl);background:var(--lime-fill);
  border:1px solid var(--lime-stroke);box-shadow:var(--lime-glow);overflow:hidden;
}
.cta-inner{
  padding:var(--s-10) var(--s-8);display:flex;flex-direction:column;
  align-items:center;text-align:center;gap:var(--s-5);
}
.cta-inner .h2{font-size:var(--d-cta);line-height:1.04}
.cta-inner .intro{max-width:calc(640px * var(--scale))}

/* ---------- Homepage footer ---------- */
.home-footer{
  border-top:1px solid var(--line);padding:var(--s-7) 0 var(--s-10);
  display:flex;flex-wrap:wrap;justify-content:space-between;
  align-items:center;gap:var(--s-4) var(--s-6);
}
.home-footer nav{display:flex;flex-wrap:wrap;gap:0 var(--s-7);font-size:var(--t-4xl);font-weight:500}
.home-footer a{color:var(--text-2);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.home-footer p{font-size:var(--t-3xl);color:var(--text-2)}

/* ================================================================
   Invite and document pages
   ================================================================ */

.doc{padding:var(--s-11) 0 var(--s-14)}
.doc h1{font-size:var(--d-h2);font-weight:900;letter-spacing:-.035em;line-height:1.02;margin-bottom:var(--s-3)}
.doc .updated{font-size:var(--t-2xl);color:var(--text-2);margin-bottom:var(--s-10)}
.doc h2{font-size:var(--t-8xl);font-weight:700;letter-spacing:-.02em;line-height:1.15;margin:var(--s-10) 0 var(--s-3)}
.doc p,.doc li{font-size:var(--t-5xl);color:var(--text-2);line-height:1.5}
.doc p{margin-bottom:var(--s-4)}
.doc ul{list-style:disc;padding-left:var(--s-6);margin-bottom:var(--s-4)}
.doc li{margin-bottom:var(--s-2)}
.doc a{color:var(--lime);text-decoration:none}
.doc a:hover{text-decoration:underline}
.doc p,.doc li{overflow-wrap:break-word}
/* Text pages keep a readable line length; tables, plan cards and screens use
   the full width. */
.doc-readable > p,.doc-readable > ul:not(.plans),.doc-readable > ol{max-width:68ch}
.doc h2[id],.doc h3[id]{scroll-margin-top:var(--s-6)}
.doc h3{font-size:var(--t-6xl);font-weight:600;letter-spacing:-.01em;line-height:1.25;margin:var(--s-8) 0 var(--s-2)}
.doc strong{color:var(--text);font-weight:600}
.doc code{font-family:var(--mono);font-size:var(--t-xl);overflow-wrap:anywhere}
.doc ol{list-style:decimal;padding-left:var(--s-6);margin-bottom:var(--s-4)}
/* Policy tables. The wrapper scrolls sideways on a phone so the page itself
   never does; the minimum width keeps three columns readable. */
.table-scroll{overflow-x:auto;margin-bottom:var(--s-6)}
.doc table{width:100%;min-width:calc(var(--wrap) * .6);border-collapse:collapse}
.doc th,.doc td{
  text-align:left;vertical-align:top;
  padding:var(--s-3) var(--s-4) var(--s-3) 0;
  border-bottom:1px solid var(--line);
  font-size:var(--t-xl);line-height:1.5;color:var(--text-2);
}
.doc th{color:var(--text);font-weight:600}
.doc td:first-child{color:var(--text)}
/* Help. The search box is hidden until its script runs, so without JavaScript
   the page is the topic list and the questions. */
.help-search{margin:var(--s-6) 0 0}
.help-search input{
  -webkit-appearance:none;appearance:none;
  width:100%;min-height:44px;padding:var(--s-3) var(--s-4);
  font:inherit;font-size:var(--t-5xl);color:var(--text);
  background:var(--surface);border:1px solid var(--line-button);border-radius:var(--r-md);
}
.help-search input::placeholder{color:var(--text-2);opacity:1}
.doc .help-status{font-size:var(--t-2xl);margin:var(--s-3) 0 0}
.doc .help-status:empty{display:none}
.doc .help-topics{
  list-style:none;padding:0;margin:var(--s-5) 0 0;
  display:flex;flex-wrap:wrap;gap:0 var(--s-6);
}
.doc .help-topics li{margin:0}
.doc .help-topics a{display:inline-flex;align-items:center;min-height:44px}

.invite{min-height:100vh;display:flex;flex-direction:column}
.invite-main{flex:1;width:100%;max-width:480px;margin:0 auto;padding:var(--s-11) var(--gutter) var(--s-14)}
.invite .eyebrow{
  font-family:var(--mono);font-size:var(--t-2xl);
  letter-spacing:2px;text-transform:uppercase;color:var(--text-2);
  margin-bottom:var(--s-3);
}
.invite h1{font-size:var(--t-9xl);font-weight:700;letter-spacing:-.02em;line-height:1.15;margin-bottom:var(--s-4)}
.invite-message{font-size:var(--t-5xl);color:var(--text-2);line-height:1.5}

.skeleton{height:22px;border-radius:6px;background:var(--surface);animation:pulse 1.5s ease-in-out infinite}
.skeleton + .skeleton{margin-top:var(--s-2);width:60%}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
@media (prefers-reduced-motion:reduce){.skeleton{animation:none}}

.balance{
  margin:var(--s-6) 0;padding:var(--s-6);
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
}
.balance-caption{font-size:var(--t-2xl);color:var(--text-2);margin-bottom:var(--s-2)}
.balance-amount{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:var(--d-cta);font-weight:700;line-height:1;letter-spacing:-.035em;
}

.code-card{
  margin:var(--s-6) 0;padding:var(--s-6);
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
}
.code-label{font-size:var(--t-2xl);color:var(--text-2);margin-bottom:var(--s-2)}
.code-row{display:flex;align-items:center;gap:var(--s-4)}
.code-value{
  flex:1;min-width:0;
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:var(--t-8xl);font-weight:700;letter-spacing:2px;
  white-space:nowrap;overflow-x:auto;scrollbar-width:none;
}
.code-value::-webkit-scrollbar{display:none}
.copy-btn{
  flex:none;min-height:44px;padding:0 var(--s-4);border-radius:var(--r-sm);
  display:inline-flex;align-items:center;gap:var(--s-2);cursor:pointer;
  border:1px solid var(--line);background:transparent;
  font-size:var(--t-2xl);font-weight:600;
}
.copy-btn svg{width:14px;height:14px;flex:none}
.code-note{font-size:var(--t-2xl);color:var(--text-2);margin-top:var(--s-4);line-height:1.5}
/* Claim code page (/c/): the code is the thing to read off the screen, so it is
   set large, centred, and in two groups of three. */
.claim-code{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:var(--d-cta);font-weight:700;line-height:1;letter-spacing:.08em;
  text-align:center;white-space:pre;padding:var(--s-2) 0;
}

.invite-stores{display:flex;flex-direction:column;align-items:center;gap:var(--s-2);margin-top:var(--s-6)}
.badge{display:block;text-decoration:none}
.badge img{width:100%;height:100%;object-fit:contain}
.badge-apple{width:132px;height:44px}
.badge-google{width:168px;height:65px}
.invite-note{font-size:var(--t-2xl);color:var(--text-2);margin-top:var(--s-4);line-height:1.5}
.invite-footer{padding:var(--s-6) var(--gutter);text-align:center;font-size:var(--t-2xl);color:var(--text-2)}
.invite-footer a{
  color:var(--text-2);text-decoration:none;margin:0 var(--s-3);
  display:inline-flex;align-items:center;min-height:44px;
}

/* ---------- Guest claim (/c/) ----------
   Someone without the app joins the receipt with a name and ticks what they
   had. Phone first: one column, 44px targets, and the running total pinned to
   the bottom of the receipt while it scrolls. */
.claim-main h1:focus{outline:none}
.claim-join{display:flex;flex-direction:column;gap:var(--s-2);margin-top:var(--s-6)}
.field-label{font-size:var(--t-2xl);font-weight:600}
.field{
  -webkit-appearance:none;appearance:none;
  width:100%;min-height:44px;padding:var(--s-3) var(--s-4);
  font:inherit;font-size:var(--t-5xl);color:var(--text);
  background:var(--surface);border:1px solid var(--line-button);border-radius:var(--r-md);
}
.field:focus-visible{outline:2px solid var(--lime);outline-offset:2px;border-radius:var(--r-md)}
.field-hint{font-size:var(--t-2xl);color:var(--text-2);line-height:1.5}
.btn-primary,.btn-quiet{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:44px;padding:0 var(--s-6);border-radius:var(--r-md);
  font-size:var(--t-5xl);font-weight:600;cursor:pointer;text-decoration:none;
}
.btn-primary{background:var(--lime);color:var(--bg)}
.btn-quiet{background:var(--surface);border:1px solid var(--line-button);color:var(--text)}
.btn-primary:focus-visible,.btn-quiet:focus-visible{border-radius:var(--r-md)}
.btn-primary[aria-disabled="true"],.btn-quiet[aria-disabled="true"]{opacity:.5;cursor:default}
.claim-join .btn-primary{margin-top:var(--s-3);width:100%}
.claim-actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-2)}
.claim-problem{font-size:var(--t-2xl);color:var(--amber);line-height:1.5}
.claim-notice{font-size:var(--t-2xl);color:var(--text-2);line-height:1.5;margin-bottom:var(--s-2)}

.home .claim-view{display:flex;flex-direction:column;gap:var(--s-4);margin-top:var(--s-2);padding:0}
.claim-host{font-size:var(--t-2xl);color:var(--text-2)}
.claim-status{font-size:var(--t-4xl);color:var(--amber);line-height:1.5}
.claim-h2{
  font-family:var(--mono);font-size:var(--t-xl);font-weight:500;
  letter-spacing:2px;text-transform:uppercase;color:var(--text-2);margin-top:var(--s-3);
}
.claim-for{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3)}
.claim-for-label{font-size:var(--t-2xl);color:var(--text-2);width:100%}
.claim-select{
  -webkit-appearance:none;appearance:none;flex:1;min-width:0;min-height:44px;
  padding:0 var(--s-9) 0 var(--s-4);border-radius:var(--r-md);
  font:inherit;font-size:var(--t-5xl);font-weight:600;color:var(--text);
  background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 1.5l3 3M3 7.5l3 3 3-3' fill='none' stroke='%23B0B7C3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right var(--s-4) center;
  border:1px solid var(--line-button);
}
.claim-select:focus-visible{border-radius:var(--r-md)}
.claim-select option{background:var(--bg);color:var(--text)}
.claim-add{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-4)}
.claim-add .field{font-size:var(--t-4xl)}

.claim-items,.claim-people{display:flex;flex-direction:column}
.claim-item{padding:var(--s-1) var(--s-3)}
.claim-item + .claim-item{border-top:1px solid var(--line)}
.claim-tick{
  display:flex;align-items:flex-start;gap:var(--s-3);width:100%;
  min-height:44px;padding:var(--s-3) var(--s-1);text-align:left;cursor:pointer;border-radius:var(--r-sm);
}
.claim-tick:focus-visible{border-radius:var(--r-sm);outline-offset:0}
.claim-tick[aria-disabled="true"]{cursor:default}
.claim-check{
  flex:none;width:var(--s-6);height:var(--s-6);margin-top:var(--s-1);border-radius:50%;
  border:2px solid var(--text-2);display:flex;align-items:center;justify-content:center;
}
.claim-check svg{width:70%;height:70%;opacity:0}
.claim-tick[aria-pressed="true"] .claim-check{background:var(--lime);border-color:var(--lime);color:var(--bg)}
.claim-tick[aria-pressed="true"] .claim-check svg{opacity:1}
.claim-tick.is-busy .claim-check{opacity:.4}
.claim-item-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--s-1)}
.claim-item-name{font-size:var(--t-4xl);font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.claim-item-who{font-size:var(--t-xl);color:var(--text-2);line-height:1.4;overflow-wrap:anywhere}
.claim-item-who.is-empty{opacity:.7}
.claim-item-amt{flex:none;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:var(--t-4xl);font-weight:500}
.claim-step{display:flex;align-items:center;gap:var(--s-2);padding:0 0 var(--s-2) calc(var(--s-6) + var(--s-4))}
.claim-step-label{flex:1;font-size:var(--t-xl);color:var(--text-2)}
.claim-step-count{min-width:var(--s-6);text-align:center;font-family:var(--mono);font-size:var(--t-4xl);font-weight:700}
.step-btn{
  width:44px;height:44px;flex:none;border-radius:50%;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--line-button);
}
.step-btn svg{width:var(--s-4);height:var(--s-4)}
.step-btn:focus-visible{border-radius:50%}
.step-btn[aria-disabled="true"]{opacity:.35;cursor:default}

.claim-person{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4)}
.claim-person + .claim-person{border-top:1px solid var(--line)}
.claim-person-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--s-1)}
.claim-person-name{font-size:var(--t-4xl);font-weight:600;overflow-wrap:anywhere}
.claim-person-role{font-size:var(--t-xl);color:var(--text-2)}
.claim-person-amt{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:var(--t-4xl)}
.claim-unclaimed{
  display:flex;justify-content:space-between;gap:var(--s-3);padding:var(--s-3) var(--s-4);
  border-top:1px solid var(--line);font-size:var(--t-xl);color:var(--text-2);
}
.claim-unclaimed b{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums}
.claim-kept{margin-top:calc(var(--s-2) * -1)}
.claim-leave{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-3)}
.claim-leave-confirm{padding:var(--s-4);font-size:var(--t-4xl);width:100%}

.claim-total{
  position:sticky;bottom:0;z-index:1;
  margin:var(--s-2) calc(var(--gutter) * -1) 0;
  padding:var(--s-4) var(--gutter) calc(var(--s-4) + env(safe-area-inset-bottom));
  background:var(--bar);border-top:1px solid var(--line-strong);
  -webkit-backdrop-filter:blur(var(--s-3));backdrop-filter:blur(var(--s-3));
}
.claim-total-row{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--s-3)}
.claim-total-label{font-size:var(--t-5xl);font-weight:700}
.claim-total-amount{
  margin-left:auto;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:var(--t-8xl);font-weight:700;color:var(--lime);
}
.claim-total-detail{width:100%;font-size:var(--t-xl);color:var(--text-2)}
.claim-total-other{
  display:flex;justify-content:space-between;gap:var(--s-3);margin-top:var(--s-1);
  font-size:var(--t-xl);color:var(--text-2);
}
.claim-total-other b{font-family:var(--mono);font-weight:500}

.claim-app{margin-top:var(--s-6)}
.claim-app-title{
  font-family:var(--mono);font-size:var(--t-xl);font-weight:500;text-align:center;
  letter-spacing:2px;text-transform:uppercase;color:var(--text-2);
}
.claim-app.is-quiet{margin-top:var(--s-12);padding-top:var(--s-6);border-top:1px solid var(--line)}
.claim-app.is-quiet .invite-note{text-align:center}

/* ---------- Link pages: open in the app, QR code ----------
   Open in Splitz is a splitz:// link, which only does something on a phone
   with the app. A mouse and no touch means a computer, so it is hidden there,
   and /u/ shows a QR code of its own address instead. */
.open-app{display:flex;flex-direction:column;align-items:stretch;margin-top:var(--s-6)}
@media (hover:hover) and (pointer:fine){
  .app-only{display:none}
}
.qr-card{
  margin:var(--s-6) 0 0;padding:var(--s-6);display:flex;flex-direction:column;align-items:center;gap:var(--s-4);
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
}
.qr-code{width:calc(var(--s-15) * 2);padding:var(--s-2);background:var(--text);border-radius:var(--r-sm)}
.qr-code svg{display:block;width:100%;height:auto}
.qr-card figcaption{font-size:var(--t-2xl);color:var(--text-2);text-align:center;line-height:1.5}
.nowrap{white-space:nowrap}
.text-link{color:var(--lime);text-decoration:none}
.text-link:hover{text-decoration:underline}
.invite-message .text-link{overflow-wrap:anywhere}

/* ---------- Help ----------
   On a wide screen the topics sit in a sticky column beside the questions,
   and the questions keep a readable line length. */
.help-layout{display:block}
.help-article{max-width:72ch}
.doc details.help-q{border-top:1px solid var(--line)}
@media (min-width:1100px){
  .help-layout{display:grid;grid-template-columns:minmax(0,1fr) calc(var(--s-15) * 3);gap:var(--s-15);align-items:start}
  .help-aside{position:sticky;top:var(--s-6);order:2;padding-top:var(--s-11)}
  .help-aside .help-topics{flex-direction:column;flex-wrap:nowrap;margin:0}
  .help-aside .help-topics a{min-height:var(--s-10)}
  .help-aside-title{
    font-family:var(--mono);font-size:var(--t-sm);font-weight:500;letter-spacing:2px;
    text-transform:uppercase;color:var(--text-2);margin-bottom:var(--s-2);
  }
  .help-inline-topics{display:none}
}
@media (max-width:1099px){
  .help-aside{display:none}
}
.help-aside a{color:var(--text-2);text-decoration:none;font-size:var(--t-2xl)}
.help-aside a:hover,.help-aside a[aria-current="true"]{color:var(--lime)}

/* ---------- Pro ---------- */
.doc .plans{display:grid;grid-template-columns:1fr;gap:var(--s-4);padding:0;list-style:none;margin:var(--s-8) 0 var(--s-4)}
.doc .plans > li{margin:0}
.plan{padding:var(--s-6) var(--s-6) var(--s-7);display:flex;flex-direction:column;gap:var(--s-3)}
.plan--pro{border-color:var(--lime-stroke);background:var(--lime-fill);box-shadow:var(--lime-glow)}
.plan h2{font-size:var(--t-8xl);font-weight:700;letter-spacing:-.02em;margin:0;line-height:1.15}
.doc .plan h2{margin:0}
.plan-price{font-size:var(--t-6xl);font-weight:700;line-height:1.3;color:var(--text)}
.doc .plan-price{margin:0;color:var(--text)}
.doc .plan-note{font-size:var(--t-2xl);margin:0}
.doc .plan ul{margin:var(--s-2) 0 0}
.doc .plan li{font-size:var(--t-3xl)}
.shot-pair{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-6);margin:var(--s-8) 0}
.shot-pair figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:var(--s-3);width:min(70vw,calc(320px * var(--scale)))}
.shot-pair img{width:100%;border-radius:var(--r-xl);border:1px solid var(--line-strong)}
.doc .shot-pair figcaption{font-size:var(--t-2xl);color:var(--text-2);text-align:center;line-height:1.5}
.doc th.yes,.doc td.yes{color:var(--text)}
@media (min-width:900px){
  .doc .plans{grid-template-columns:repeat(3,1fr)}
}

/* ---------- Responsive ---------- */
/* Four walkthrough cards go 1 -> 2 -> 4, so a row is never left with an orphan. */
@media (min-width:700px){
  .steps,.features,.shots-row{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1000px){
  .hero,.split{grid-template-columns:repeat(2,1fr)}
  .features{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:1200px){
  .steps,.shots-row{grid-template-columns:repeat(4,1fr)}
}
/* Below the two-column breakpoint the four cards stack, which made the
   walkthrough 40% of a 9-screen page. As a swipe carousel it is one card tall.
   The 86% width leaves a sliver of the next card visible, which is what tells
   someone there is more to swipe. */
@media (max-width:699px){
  .steps{
    display:flex;
    grid-template-columns:none;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* bleed to the screen edges so a card can sit flush while scrolling */
    margin-inline:calc(var(--shell-gutter) * -1);
    padding-inline:var(--shell-gutter);
    scroll-padding-inline:var(--shell-gutter);
  }
  .steps::-webkit-scrollbar{display:none}
  .steps > .card{flex:0 0 86%;scroll-snap-align:start}

  /* The four screens under the features swipe the same way. */
  .shots-row{
    display:flex;grid-template-columns:none;overflow-x:auto;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-inline:calc(var(--shell-gutter) * -1);
    padding-inline:var(--shell-gutter);
    scroll-padding-inline:var(--shell-gutter);
  }
  .shots-row::-webkit-scrollbar{display:none}
  .shots-row > li{flex:0 0 66%;scroll-snap-align:start}
  .shots-row img{width:100%}

  /* 0.82 of the content scale fits both badges on one row down to 360px.
     Declared on .home, not :root: .home is where --badge-scale is defined, and
     a value on the closer element wins. */
  .home{--badge-scale:calc(var(--scale) * .82)}
}

@media (max-width:640px){
  .masthead{height:var(--s-12)}
  .masthead .mark{font-size:var(--t-6xl)}
  .masthead-links{gap:var(--s-4);font-size:var(--t-xl)}
  .btn-glass{height:var(--s-10);padding:0 var(--s-4)}
  .lede{font-size:var(--t-5xl)}
  .intro,.body-lg,.dash-list{font-size:var(--t-2xl)}
  .step-text h3{font-size:var(--t-7xl)}
  .qa-row h3{font-size:var(--t-4xl)}
  .home-footer nav{gap:var(--s-5);font-size:var(--t-xl)}
  .home-footer p{font-size:var(--t-lg)}
  .qa{padding:var(--s-1) var(--s-5)}
}
@media (max-width:520px){
  :root{--gutter:20px}
  .nav-wide{display:none !important}
  .masthead .mark{font-size:var(--t-5xl)}
  .masthead-links{gap:var(--s-3);font-size:var(--t-lg)}
  .btn-glass{height:var(--s-9);padding:0 var(--s-3);font-size:var(--t-md)}
}