/* trysplitz.com marketing pages: home, receipts, groups, pro, compare, help.
   Invite, claim, profile, and legal pages keep styles.css. */
@font-face{font-family:'Geist';src:url('/assets/fonts/Geist-Regular.woff2') format('woff2');font-weight:400;font-display:swap}@font-face{font-family:'Geist';src:url('/assets/fonts/Geist-Medium.woff2') format('woff2');font-weight:500;font-display:swap}@font-face{font-family:'Geist';src:url('/assets/fonts/Geist-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}@font-face{font-family:'Geist';src:url('/assets/fonts/Geist-Bold.woff2') format('woff2');font-weight:700;font-display:swap}@font-face{font-family:'Geist';src:url('/assets/fonts/Geist-Black.woff2') format('woff2');font-weight:900;font-display:swap}@font-face{font-family:'Geist Mono';src:url('/assets/fonts/GeistMono-Regular.woff2') format('woff2');font-weight:400;font-display:swap}@font-face{font-family:'Geist Mono';src:url('/assets/fonts/GeistMono-Medium.woff2') format('woff2');font-weight:500;font-display:swap}@font-face{font-family:'Geist Mono';src:url('/assets/fonts/GeistMono-Bold.woff2') format('woff2');font-weight:700;font-display:swap}:root{--font-sans:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--font-mono:'Geist Mono','SF Mono',ui-monospace,monospace}
:root{--lime:#C8F035;--blue:#3B82F6;--bg:#0A1020;--t2:#BCC4D0;--line:rgba(255,255,255,.08);--card:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));--cardline:rgba(255,255,255,.08)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:#fff;font-family:var(--font-sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--lime);text-decoration:none}a:hover{color:#fff}h1,h2,h3,h4,p,ul,ol{margin:0}
.bgsweep{position:fixed;inset:0;z-index:-1;background:linear-gradient(to bottom,rgba(59,130,246,.02),rgba(59,130,246,.248)),linear-gradient(to bottom,rgba(200,240,53,.25),rgba(200,240,53,.007))}
.wrap{max-width:1200px;margin-left:auto;margin-right:auto;padding:0 clamp(20px,4vw,48px)}
.top{position:sticky;top:0;z-index:40;background:rgba(10,16,32,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.navrow{display:flex;align-items:center;gap:32px;height:72px}
.mark{display:inline-flex;align-items:center;gap:10px;font:900 30px var(--font-sans);letter-spacing:-1.1px;color:#fff}.mark img{width:38px;height:38px;border-radius:10px}.mark:hover{color:#fff}.mark b{color:var(--lime);font-weight:900}.mark i{color:var(--blue);font-style:normal}
.links{display:flex;gap:4px;margin-left:auto}.links a{color:#D6DBE3;font:500 15px var(--font-sans);padding:8px 14px;border-radius:99px}.links a:hover{color:#fff;background:rgba(255,255,255,.06)}.links a.on{color:#fff;background:rgba(255,255,255,.10)}
.menu{display:none}.menu summary{list-style:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;cursor:pointer;color:#fff;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}.menu summary::-webkit-details-marker{display:none}.menu .x,.menu[open] .bars{display:none}.menu[open] .x{display:block}.mlinks{position:absolute;left:0;right:0;top:100%;display:flex;flex-direction:column;padding:8px clamp(20px,4vw,48px) 16px;background:var(--bg);border-bottom:1px solid var(--line)}.mlinks a{color:#D6DBE3;font:500 18px var(--font-sans);padding:14px 0;border-bottom:1px solid var(--line)}.mlinks a:last-child{border-bottom:0}.mlinks a:hover{color:#fff}.mlinks a.on{color:var(--lime)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:14px;font:600 16px var(--font-sans);padding:14px 22px;white-space:nowrap}
.btn-lime{background:var(--lime);color:#0A1020}.btn-lime:hover{color:#0A1020;filter:brightness(1.06)}.btn.sm{padding:10px 16px;font-size:15px;border-radius:12px}
.btn-ghost{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:#fff}.btn-ghost:hover{background:rgba(255,255,255,.10)}
.eyebrow{font:600 14px var(--font-mono);letter-spacing:2px;text-transform:uppercase;color:var(--lime)}
.pill{display:inline-flex;align-items:center;gap:8px;font:600 14px var(--font-mono);letter-spacing:1px;text-transform:uppercase;color:var(--lime)}
.h1{font:900 clamp(40px,5.2vw,68px) var(--font-sans);letter-spacing:-.04em;line-height:1;text-wrap:balance}.h1 em,.h2 em{font-style:normal;color:var(--lime)}
.h2{font:900 clamp(30px,3.5vw,46px) var(--font-sans);letter-spacing:-.035em;line-height:1.04;text-wrap:balance}
.lede{font:400 clamp(18px,1.55vw,20px) var(--font-sans);color:var(--t2);line-height:1.55;text-wrap:pretty;max-width:620px}
.badges{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
section{margin-top:clamp(88px,10vw,140px)}
.shead{display:flex;flex-direction:column;gap:16px;margin-bottom:48px;max-width:760px}.shead.c{margin-left:auto;margin-right:auto;text-align:center;align-items:center}
.card{background:var(--card);box-shadow:inset 0 0 0 1px var(--cardline);border-radius:24px}
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;margin-top:clamp(40px,6vw,80px)}
.lockup{display:flex;align-items:center;gap:14px;font:900 52px var(--font-sans);letter-spacing:-2px}.lockup img{width:64px;height:64px;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.4)}.lockup b{color:var(--lime);font-weight:900}.lockup i{color:var(--blue);font-style:normal}
.h1.h1-tagline{font-size:clamp(46px,6vw,80px)}.sub1{font:700 clamp(20px,1.9vw,25px) var(--font-sans);letter-spacing:-.3px;color:#fff;margin-top:-6px}
.hero .copy{display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.hnote{display:flex;flex-wrap:wrap;gap:8px 20px;font:500 15px var(--font-sans);color:var(--t2)}.hnote span{display:inline-flex;gap:8px;align-items:center}
.stage{position:relative;height:640px}.stage .a{position:absolute;left:2%;top:50px;z-index:1}.stage .b{position:absolute;right:4%;top:0;z-index:2}
.chip{position:absolute;z-index:5;display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:16px;background:#121a2c;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 18px 44px rgba(0,0,0,.5);font:600 15px var(--font-sans);white-space:nowrap}.chip b{font:700 15px var(--font-mono);color:var(--lime)}
.paths{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.path{color:#fff;position:relative;overflow:hidden;padding:40px 40px 0;display:flex;flex-direction:column;gap:14px;min-height:640px}
.path h3{font:800 28px var(--font-sans);letter-spacing:-.03em;line-height:1.05}.path p{color:var(--t2)}
.path .meta{display:flex;flex-wrap:wrap;gap:8px}.path .meta span{font:600 13px var(--font-sans);color:#E5E9EF}.path .meta span + span::before{content:"·";margin-right:8px;color:var(--lime)}
.path .more{font:600 16px var(--font-sans);color:var(--lime)}.path:hover{color:#fff}.path:hover .more{color:#fff}
.path .pv{position:relative;align-self:center;margin-top:auto;padding:12px 0 40px}
.path.lime{background:rgba(200,240,53,.08);box-shadow:inset 0 0 0 1px rgba(200,240,53,.35)}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tile{padding:28px;border-radius:22px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);display:flex;flex-direction:column;gap:10px}
.tile .ti{width:44px;height:44px;border-radius:12px;background:rgba(200,240,53,.10);display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.tile h3{font:700 19px var(--font-sans);letter-spacing:-.2px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.tile p{font-size:16px;color:var(--t2);line-height:1.5}
.tag{font:500 11px var(--font-mono);letter-spacing:1px;padding:3px 8px;border-radius:99px;background:var(--lime);color:#0A1020}
.feat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}.feat.rev .fcopy{order:2}
.fcopy{display:flex;flex-direction:column;gap:20px}.fvis{display:flex;justify-content:center;position:relative;min-height:600px;align-items:center}
.checks{list-style:none;padding:0;display:flex;flex-direction:column;gap:12px;margin-top:4px}.checks li{display:flex;gap:12px;align-items:flex-start}.checks svg{margin-top:5px}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:960px;margin:0 auto}
.vcard{padding:28px 30px;border-radius:24px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);display:flex;flex-direction:column;gap:4px}.vcard.on{background:rgba(200,240,53,.10);box-shadow:inset 0 0 0 1.5px rgba(200,240,53,.55)}
.vt{font:800 24px var(--font-sans)}.vsub{font-size:16px;color:var(--t2);margin-bottom:10px}
.prow{display:flex;align-items:center;gap:12px;padding:7px 0}.pn{flex:1;font:600 17px var(--font-sans)}.pa{font:700 19px var(--font-mono)}.vcard.on .pa{color:var(--lime)}.prow.dim .pa{color:var(--t2)}
.vfoot{margin-top:12px;padding-top:14px;border-top:1px solid rgba(255,255,255,.10);font-size:16px;color:var(--t2)}.vfoot b{color:#fff;font-family:var(--font-mono)}
.band{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:center;padding:56px;border-radius:28px;background:rgba(59,130,246,.12);box-shadow:inset 0 0 0 1px var(--cardline)}
.band .checks{margin-top:0}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.plan{padding:32px;display:flex;flex-direction:column;gap:12px;border-radius:24px;background:var(--card);box-shadow:inset 0 0 0 1px var(--cardline)}
.plan.pro{background:rgba(200,240,53,.10);box-shadow:inset 0 0 0 1.5px rgba(200,240,53,.5)}
.plan .pt{display:flex;align-items:center;gap:10px;font:800 22px var(--font-sans)}.plan .pp{font:900 48px var(--font-sans);letter-spacing:-1.5px;line-height:1}.plan .pp small{font:600 17px var(--font-sans);color:var(--t2);letter-spacing:0}
.plan .ps{font-size:15px;color:var(--t2);min-height:48px}.plan .opts{display:flex;flex-wrap:wrap;gap:12px 24px}.plan .opts div{display:flex;flex-direction:column;gap:6px}.plan .opts b{font:900 40px var(--font-sans);letter-spacing:-1.2px;line-height:1}@media (max-width:520px){.plan .opts b{font-size:34px}.plan .opts{gap:12px 20px}}.plan .opts span{font:600 15px var(--font-sans);color:var(--t2)}.plan ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:11px;margin:8px 0 20px;flex:1}.plan li{display:flex;gap:10px;font-size:16px;line-height:1.4}.plan li svg{margin-top:3px}
.plan .btn{width:100%}
.tbl{border-radius:22px;overflow:hidden;background:var(--card);box-shadow:inset 0 0 0 1px var(--cardline)}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:17px 24px;font-size:16px;vertical-align:top}
thead th{font:600 13px var(--font-mono);letter-spacing:1.5px;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.03)}thead th.hl{color:var(--lime)}
tbody tr{border-top:1px solid var(--line)}tbody th{font-weight:600;width:28%}td.y{font-weight:600}td.n{color:#fff}
.phero{margin-top:clamp(56px,7vw,96px);display:flex;flex-direction:column;gap:22px;align-items:flex-start;max-width:900px}
.phero.c{align-items:center;text-align:center;margin-left:auto;margin-right:auto}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.step{position:relative;overflow:hidden;padding:32px 28px;display:flex;flex-direction:column;gap:12px}
.step .n{font:500 13px var(--font-mono);letter-spacing:1.6px;color:var(--lime)}.step h3{font:800 24px var(--font-sans);letter-spacing:-.5px}.step p{color:var(--t2);font-size:16px}
.step .sv{position:absolute;left:50%;transform:translateX(-50%);top:210px}
.receipt{width:270px;background:linear-gradient(180deg,#F8F5EE,#EFEBE1);color:#2b2b2b;border-radius:3px;padding:20px 20px 22px;font:400 12.5px var(--font-mono);line-height:1.3;box-shadow:0 24px 60px rgba(0,0,0,.55);transform:rotate(-2deg)}
.r-h{text-align:center;font:700 16px var(--font-mono);letter-spacing:1.2px;color:#1a1a1a}.r-s{text-align:center;font-size:10px;color:#8a8478;margin:3px 0 10px}
.r-d{border-top:1px dashed #c9c2b2;margin:8px 0}.r-d.s{border-top:1px solid #2b2b2b}.r-row{display:flex;flex-wrap:wrap;justify-content:space-between;padding:3px 6px;margin:0 -6px;border-radius:4px}.r-row.on{background:rgba(200,240,53,.6)}
.r-row em{flex-basis:100%;font-style:normal;font:700 10.5px var(--font-sans);color:#34400c}.r-row.f{font-size:11px;color:#6f6a5e}.r-row.t{font:700 14px var(--font-mono);color:#1a1a1a}
.math{padding:6px 0}.mr{display:grid;grid-template-columns:minmax(0,1fr) auto 92px;gap:16px;align-items:baseline;padding:13px 22px}.mr+.mr{border-top:1px solid var(--line)}.mr i{font:500 13px var(--font-mono);font-style:normal;color:var(--t2);text-align:right}.mr b{font:700 17px var(--font-mono);text-align:right}.mr.t{font-weight:700}.mr.t b{color:var(--lime);font-size:21px}
.methods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.method{padding:24px;border-radius:20px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);display:flex;gap:16px;align-items:flex-start}
.method .mi{flex:0 0 46px;height:46px;border-radius:14px;background:rgba(200,240,53,.10);display:flex;align-items:center;justify-content:center;font:800 16px var(--font-mono);color:var(--lime)}
.method h3{font:700 19px var(--font-sans);margin-bottom:4px}.method p{font-size:16px;color:var(--t2);line-height:1.5}
.nights{padding:28px}.nights h3{font:800 22px var(--font-sans)}.nights .sub{color:var(--t2);font-size:15px;margin:4px 0 18px}
.nrow{display:grid;grid-template-columns:120px 1fr 90px;gap:14px;align-items:center;padding:9px 0}.nrow .nm{display:flex;gap:10px;align-items:center;font-weight:600}
.dots{display:flex;gap:6px}.dots i{width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center}.dots i.on{background:rgba(200,240,53,.85)}
.nrow b{font:700 18px var(--font-mono);text-align:right;color:var(--lime)}
.ntot{display:flex;justify-content:space-between;border-top:1px solid var(--line);margin-top:10px;padding-top:14px;color:var(--t2);font-size:15px}.ntot b{color:#fff;font-family:var(--font-mono)}
.simp{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center}
.flow{padding:24px;border-radius:20px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);display:flex;flex-direction:column;gap:12px}
.flow .fl{display:flex;align-items:center;gap:10px;font-weight:600}.flow .fl b{margin-left:auto;font-family:var(--font-mono)}.flow .cap{font:500 13px var(--font-mono);letter-spacing:1.4px;color:var(--t2);text-transform:uppercase}
.flow.on{background:rgba(200,240,53,.10);box-shadow:inset 0 0 0 1.5px rgba(200,240,53,.5)}.flow.on .fl b{color:var(--lime)}
.timeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;counter-reset:s}
.tstep{padding:26px;border-radius:20px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);display:flex;flex-direction:column;gap:10px}
.tstep::before{counter-increment:s;content:counter(s);width:36px;height:36px;border-radius:50%;background:var(--lime);color:#0A1020;font:800 16px var(--font-sans);display:flex;align-items:center;justify-content:center}
.tstep h3{font:700 18px var(--font-sans)}.tstep p{font-size:15px;color:var(--t2);line-height:1.5}
.fine{font-size:14px;color:var(--t2);margin-top:18px;max-width:900px}
.search{display:flex;align-items:center;gap:12px;width:min(640px,100%);padding:16px 20px;border-radius:16px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:var(--t2);font-size:17px}
.topics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.topic{padding:22px;border-radius:18px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);display:flex;flex-direction:column;gap:6px;color:#fff}.topic:hover{color:#fff;background:rgba(255,255,255,.07)}
.topic .ti{width:40px;height:40px;border-radius:11px;background:rgba(200,240,53,.10);display:flex;align-items:center;justify-content:center;margin-bottom:8px}.topic b{font:700 17px var(--font-sans)}.topic span{font-size:14px;color:var(--t2)}
.helpgrid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:48px;align-items:start}
.side{position:sticky;top:100px;display:flex;flex-direction:column;gap:2px}.side a{color:var(--t2);font-size:15px;padding:8px 12px;border-radius:10px}.side a:hover{color:#fff;background:rgba(255,255,255,.05)}.side a.on{color:#fff;background:rgba(255,255,255,.08)}
.hsec{margin-bottom:48px}.hsec h2{font:800 28px var(--font-sans);letter-spacing:-.5px;margin-bottom:16px}
.acc{border-radius:20px;background:var(--card);box-shadow:inset 0 0 0 1px var(--cardline);overflow:hidden}
.acc details+details{border-top:1px solid var(--line)}.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:20px 24px;font:600 18px var(--font-sans)}.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";color:var(--lime);font-weight:700;font-size:22px;line-height:1}.acc details[open] summary::after{content:"−"}.acc details p,.acc .ans p{padding:0 24px 18px;color:var(--t2);max-width:760px}.acc .ans ul,.acc .ans ol{padding:0 24px 18px 46px;color:var(--t2);display:flex;flex-direction:column;gap:6px}.acc .ans a{color:var(--lime)}.acc .ans a:hover{color:#fff}.acc details[hidden]{display:none}.hsec[hidden]{display:none}.hsec{scroll-margin-top:96px}.acc summary{scroll-margin-top:96px}
.search input{flex:1;min-width:0;background:none;border:0;outline:0;color:#fff;font:400 17px var(--font-sans)}.search input::placeholder{color:var(--t2)}.search:focus-within{box-shadow:inset 0 0 0 1.5px rgba(200,240,53,.6)}
.hnone{padding:20px 24px;border-radius:16px;background:rgba(255,255,255,.05);color:var(--t2);margin-bottom:24px}
.stuck{padding:32px;display:flex;flex-direction:column;gap:12px;align-items:flex-start;scroll-margin-top:96px}.stuck h2{font:800 26px var(--font-sans)}.stuck p{color:var(--t2)}.stuck p a{color:var(--lime)}
.ctaband{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;padding:clamp(36px,5vw,64px);border-radius:28px;background:rgba(200,240,53,.10);box-shadow:inset 0 0 0 1px rgba(200,240,53,.40)}
.foot{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px;margin-top:96px;padding-top:56px;padding-bottom:40px;border-top:1px solid var(--line)}
.fcol{display:flex;flex-direction:column;gap:10px}.fcol h4{font:600 14px var(--font-sans);color:#fff;margin-bottom:4px}.fcol a{color:var(--t2);font-size:15px}.fcol a:hover{color:#fff}.fcol.brand .mark{font-size:34px}.fcol.brand .mark img{width:44px;height:44px}.fcol.brand p{color:#fff;font:700 20px var(--font-sans);letter-spacing:-.3px;margin-top:6px}.fcol.brand p em{font-style:normal;color:var(--lime)}
.fbar{grid-column:1/-1;border-top:1px solid var(--line);padding-top:24px;color:var(--t2);font-size:14px}
.mocknote{position:fixed;right:16px;bottom:16px;z-index:50;padding:8px 12px;border-radius:10px;background:#C8F035;color:#0A1020;font:600 12px var(--font-sans)}
.receiptstage{display:flex;align-items:center;justify-content:center;gap:28px}
@media (max-width:1060px){.hero,.feat,.band,.paths,.simp{grid-template-columns:minmax(0,1fr)}.feat.rev .fcopy{order:0}.tiles,.methods,.plans,.steps{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.topics{grid-template-columns:repeat(2,minmax(0,1fr))}.timeline{grid-template-columns:1fr 1fr}.helpgrid{grid-template-columns:1fr}.side{display:none}.links{display:none}.navrow{gap:12px}.navrow .btn{margin-left:auto}.menu{display:block}.foot{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.tiles,.methods,.plans,.steps,.vs,.topics,.timeline{grid-template-columns:minmax(0,1fr)}.stage{transform:scale(.62);transform-origin:top left;height:420px;width:160%}.fvis{transform:scale(.75);min-height:450px}.receiptstage{flex-direction:column}}
.shotimg{display:block;height:auto;filter:drop-shadow(0 30px 50px rgba(0,0,0,.45))}.av{display:inline-flex;align-items:center;justify-content:center;flex:none;border-radius:50%;font-family:var(--font-sans);font-weight:700;line-height:1}
@media (max-width:520px){.nights{padding:20px}.nrow{grid-template-columns:96px minmax(0,1fr) auto;gap:10px}}
.nowrap{white-space:nowrap}
/* The tagline keeps "not friendships." on one line, so it is sized from its own column. */
.hero .copy{container-type:inline-size}.h1.h1-tagline{font-size:clamp(34px,12.4cqi,80px)}
@media (max-width:420px){.btn{white-space:normal;text-align:center}}

/* Splitz vs Splitwise, four plans. Fixed layout so the four plan columns are even;
   on phones the table scrolls sideways inside its card with the feature column pinned. */
.cmp4{overflow-x:auto;position:relative}
.cmp4 table{table-layout:fixed;min-width:780px}
.cmp4 col.c-feat{width:30%}
.cmp4 thead th{text-align:center}
.cmp4 thead th:first-child{text-align:left}
.cmp4 thead th.us{color:var(--lime)}
.cmp4 td{text-align:center;vertical-align:middle;color:#fff}
.cmp4 td.us{background:rgba(200,240,53,.05)}
.cmp4 td.t{font-size:14px;line-height:1.4}
.cmp4 td.us .ck{color:var(--lime)}
.cmp4 td.them .ck{color:#fff}
.cmp4 td.x .no{color:var(--t2)}
.cmp4 tbody th span{display:block;font-weight:400;font-size:14px;color:var(--t2);margin-top:2px}
.cmp4 tr.sec th{font:600 13px var(--font-mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--lime);background:rgba(255,255,255,.03);padding-top:14px;padding-bottom:14px}
@media (max-width:820px){.cmp4 tbody th:first-child,.cmp4 thead th:first-child{position:sticky;left:0;z-index:1;background:#141c2e}.cmp4 tr.sec th{position:static}}
.cmp-more{margin-top:20px;font-size:16px;color:var(--t2);line-height:1.6;max-width:900px}
.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}
@media (max-width:820px){.cmp4 table{min-width:660px}.cmp4 col.c-feat{width:156px}.cmp4 th,.cmp4 td{padding:14px 12px}.cmp4 td.t{font-size:13px}}
.step .sv{position:static;transform:none;align-self:center;margin-top:auto;padding-top:12px}
/* Rows where Splitz does more than Splitwise: a lime edge, a lit label, brighter Splitz cells. */
.cmp4 tr.win th[scope="row"]{box-shadow:inset 4px 0 0 var(--lime);background:rgba(200,240,53,.07)}
.cmp4 tr.win td{background:rgba(200,240,53,.05)}
.cmp4 tr.win td.us{background:rgba(200,240,53,.16);font-weight:700}
@media (max-width:820px){.cmp4 tr.win th[scope="row"]{background:#1d2a2a}}
/* Phones: each row stacks, the feature on its own line and the four plans beneath it,
   under plan names that stay pinned below the site header while the table is in view. */
@media (max-width:640px){.tbl.cmp4{overflow:visible;overflow:clip}.cmp4 table{min-width:0;display:block}.cmp4 colgroup{display:none}.cmp4 thead,.cmp4 tbody{display:block}.cmp4 tr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}.cmp4 thead{position:sticky;top:72px;z-index:2;background:#141c2e;box-shadow:0 1px 0 var(--line)}.cmp4 thead th{background:none;padding:12px 4px;font-size:11px;letter-spacing:1px;line-height:1.35}.cmp4 thead th:first-child{display:none}.cmp4 tbody th,.cmp4 tbody th:first-child{grid-column:1/-1;width:auto;position:static;background:none;padding:16px 16px 6px}.cmp4 tr.sec th{padding:14px 16px}.cmp4 td{display:flex;justify-content:center;align-items:flex-start;padding:6px 4px 16px}.cmp4 td.t{font-size:13px;line-height:1.35}.cmp4 tr.win{box-shadow:inset 4px 0 0 var(--lime);background:rgba(200,240,53,.05)}.cmp4 tr.win th[scope="row"]{box-shadow:none;background:none}.cmp4 tr.win td{background:none}.cmp4 tr.win td.us,.cmp4 td.us{background:none}.cmp4 tr.win td.us{color:var(--lime)}}