@font-face { font-family: Bricolage; src: url('/assets/bricolage-grotesque.ttf') format('truetype'); font-style: normal; font-weight: 200 800; font-display: swap; }
:root { color-scheme: light; --paper:#F1F3F4; --ink:#16202A; --petrol:#0C5B6C; --tape:#C22E63; --muted:#4D5A63; --line:#CBD3D8; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:32px; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.65 system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-underline-offset:.25em; }
a:focus-visible { outline:3px solid var(--tape); outline-offset:5px; border-radius:2px; }
button,a { -webkit-tap-highlight-color:transparent; }
.wrap { width:min(1184px,calc(100% - 112px)); margin-inline:auto; }
.wordmark { display:inline-block; font:800 44px/1 Bricolage,sans-serif; letter-spacing:-2.6px; text-decoration:none; }
.wordmark span,.receipt-wordmark span { color:var(--tape); }
.site-header { padding-block:32px; display:flex; justify-content:space-between; align-items:center; }
.site-header nav { display:flex; gap:34px; align-items:center; font-size:14px; font-weight:550; }
.site-header nav a { text-decoration:none; }
.site-header nav a:hover { color:var(--petrol); text-decoration:underline; }
.language { padding-left:30px; border-left:1px solid var(--line); }
.language span { margin-left:6px; }
.hero { display:grid; grid-template-columns:1.2fr 1fr; gap:36px; align-items:center; min-height:670px; padding-block:44px 68px; }
.eyebrow { color:var(--muted); font-size:11px; font-weight:650; letter-spacing:.13em; margin:0 0 25px; }
.tiny-tape { display:inline-block; width:23px; height:5px; border-radius:2px; background:var(--tape); margin-right:12px; vertical-align:middle; }
.hero h1 { margin:0; font:800 clamp(48px,5.55vw,78px)/1.06 Bricolage,sans-serif; font-variation-settings:'opsz' 72,'wdth' 95; letter-spacing:-.045em; }
.hero h1 > span { color:var(--petrol); }
.hero-body { color:var(--muted); font-size:18px; line-height:1.75; max-width:440px; margin:30px 0; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:30px; border:1px solid var(--petrol); padding:14px 24px; border-radius:999px; background:var(--petrol); color:white; text-decoration:none; font-size:15px; font-weight:650; transition:background .2s,transform .2s; }
.button:hover { background:#084454; transform:translateY(-2px); }
.platform { margin-top:19px; color:var(--muted); font-size:12px; }
.receipt-scene { position:relative; margin:0; min-height:548px; display:flex; align-items:center; justify-content:center; padding-bottom:40px; }
.receipt-halo { position:absolute; width:430px; height:430px; max-width:100%; border-radius:50%; background:#DFEBEE; }
.receipt-halo::after { content:''; position:absolute; border:1px solid #CDDFE4; border-radius:50%; inset:-20px; }
.receipt-paper { position:relative; width:335px; background:white; transform:rotate(-5deg); filter:drop-shadow(0 20px 20px #16202A15) drop-shadow(0 2px 2px #16202A10); }
.receipt-paper::after { content:''; position:absolute; top:100%; left:0; width:100%; height:10px; background:linear-gradient(135deg,white 25%,transparent 25%) -5px 0/20px 20px,linear-gradient(225deg,white 25%,transparent 25%) -5px 0/20px 20px; }
.receipt-inner { padding:28px 24px 24px 29px; border-left:4px solid #C22E6380; margin:12px 0 12px 12px; }
.receipt-wordmark { display:block; text-align:center; font:800 39px/1 Bricolage,sans-serif; letter-spacing:-2px; }
.receipt-heading { font:600 12px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.12em; text-align:center; margin:25px 0 5px; }
.receipt-sub { font:10px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; color:#6B7982; text-align:center; margin:0 0 25px; }
.receipt-lines { border-block:1px dashed #B9C5CA; padding-block:19px; margin:0; font:11px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; }
.receipt-lines > div { display:flex; justify-content:space-between; gap:8px; margin-bottom:15px; }
.receipt-lines > div:last-child { margin-bottom:0; }
.receipt-lines dt { display:flex; align-items:center; gap:8px; }
.receipt-lines dd { margin:0; white-space:nowrap; }
.dot { width:6px; height:6px; border-radius:50%; flex:none; }
.blue { background:#2878E2; }.amber { background:#E7A008; }.coral { background:#F56038; }.green { background:#10AE7C; }
.receipt-sum { display:flex; justify-content:space-between; align-items:baseline; margin-block:20px 18px; font:600 15px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace; }
.receipt-sum strong { font-size:23px; }
.budget-track { height:6px; border-radius:3px; background:#D5E4E8; overflow:hidden; }
.budget-track span { display:block; width:68%; height:100%; border-radius:3px; background:var(--petrol); }
.receipt-budget { font:10px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; margin:10px 0 18px; }
.barcode { height:27px; width:116px; margin:0 auto; opacity:.55; background:repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 4px,var(--ink) 4px 6px,transparent 6px 8px,var(--ink) 8px 9px,transparent 9px 14px); }
.receipt-example { text-align:center; font:9px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; color:#6B7982; margin:9px 0 0; }
.read-tag { position:absolute; right:-9px; bottom:89px; display:flex; gap:12px; align-items:center; background:#FFF; border:1px solid #E3E9EC; padding:15px 19px; border-radius:14px; box-shadow:0 10px 30px #16202A0A; transform:rotate(4deg); }
.check { width:31px; height:31px; display:grid; place-items:center; border-radius:50%; background:#DBF1E8; color:#1F6A50; font-weight:700; }
.read-tag strong { display:block; font:650 15px/1.5 Bricolage,sans-serif; }
.read-tag div > span { display:block; color:var(--muted); font-size:10px; }
.receipt-scene figcaption { position:absolute; bottom:0; font-size:12px; color:var(--muted); }
.proof { display:flex; justify-content:space-between; gap:20px; padding-block:26px; border-block:1px solid var(--line); font-size:13px; color:var(--muted); }
.proof span { display:flex; align-items:center; gap:11px; }
.proof i { font-style:normal; color:var(--petrol); }
.how { padding-block:103px 110px; }
.display { white-space:pre-line; font:700 clamp(35px,4vw,52px)/1.12 Bricolage,sans-serif; font-variation-settings:'opsz' 72; letter-spacing:-.035em; margin:0; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:64px; margin-top:62px; }
.step-number { color:var(--tape); font:500 13px/1 ui-monospace,SFMono-Regular,Consolas,monospace; }
.steps h3 { font:650 25px/1.3 Bricolage,sans-serif; letter-spacing:-.02em; margin:21px 0 12px; }
.steps p { color:var(--muted); font-size:15px; line-height:1.8; margin:0; }
.privacy-band { background:var(--petrol); color:#FFF; position:relative; }
.privacy-band::before { content:''; position:absolute; top:-9px; left:0; width:100%; height:10px; background:linear-gradient(45deg,var(--petrol) 25%,transparent 25%) -5px 0/20px 20px,linear-gradient(-45deg,var(--petrol) 25%,transparent 25%) -5px 0/20px 20px; }
.privacy-content { display:grid; grid-template-columns:1fr 1fr; gap:95px; padding-block:72px; align-items:center; }
.privacy-content .eyebrow { color:#BBDFE6; }
.privacy-copy p { color:#E4F0F3; font-size:17px; line-height:1.8; margin:0 0 24px; }
.text-link { display:inline-flex; align-items:center; gap:20px; font-size:14px; font-weight:600; }
.closing { display:flex; align-items:center; justify-content:space-between; gap:36px; padding-block:95px; }
.closing .text-link { color:var(--petrol); }
.site-footer { border-top:1px solid var(--line); padding-block:35px 40px; display:flex; justify-content:space-between; gap:30px; }
.site-footer .wordmark { font-size:34px; }
.site-footer p { font-size:12px; color:var(--muted); margin:12px 0 0; }
.footer-links { display:flex; flex-wrap:wrap; justify-content:flex-end; align-content:center; align-items:center; gap:16px 25px; max-width:520px; font-size:12px; color:var(--muted); }
.footer-links a { text-decoration:none; }.footer-links a:hover { text-decoration:underline; }
.font-license { width:100%; text-align:right; font-size:10px; }
.skip { position:absolute; top:-100px; left:16px; background:white; padding:12px; z-index:3; }.skip:focus { top:16px; }
@media(min-width:1400px) { .hero { padding-block:60px 84px; } }
@media(max-width:1050px) { .wrap { width:calc(100% - 64px); } .hero { gap:18px; } .hero h1 { font-size:56px; } .receipt-paper { width:310px; } .receipt-inner { padding-inline:20px; } .read-tag { right:-8px; } .receipt-halo { width:340px; height:340px; } .steps { gap:35px; } }
@media(max-width:760px) { .wrap { width:calc(100% - 44px); } .site-header { padding-block:24px; } .site-header nav { gap:23px; font-size:13px; } .how-nav { display:none; }.language { padding-left:20px; } .hero { grid-template-columns:1fr; padding-top:45px; padding-bottom:36px; gap:35px; }.hero-copy { max-width:520px; }.hero h1 { font-size:clamp(45px,8.7vw,64px); }.hero-body { font-size:17px; margin-top:24px; }.hero .eyebrow { font-size:9px; }.receipt-scene { min-height:533px; max-width:450px; width:100%; margin:auto; }.receipt-paper { width:320px; }.read-tag { right:0; bottom:78px; }.proof { flex-direction:column; align-items:flex-start; gap:14px; padding-block:25px; }.how { padding-block:66px 75px; }.steps { grid-template-columns:1fr; gap:33px; margin-top:42px; }.steps article { display:grid; grid-template-columns:40px 1fr; column-gap:12px; }.step-number { grid-row:1/3; padding-top:9px; }.steps h3 { margin:0 0 9px; }.steps p { grid-column:2; }.privacy-content { grid-template-columns:1fr; gap:30px; padding-block:57px; }.privacy-copy p { font-size:16px; }.closing { flex-direction:column; align-items:flex-start; padding-block:64px; gap:28px; }.site-footer { flex-direction:column; gap:28px; }.footer-links { justify-content:flex-start; }.font-license { text-align:left; }.site-footer .wordmark { font-size:34px; } }
@media(max-width:370px) { .wordmark { font-size:38px; }.hero h1 { font-size:42px; }.receipt-paper { width:280px; }.receipt-inner { padding:23px 17px; }.receipt-lines { font-size:10px; }.receipt-sub { font-size:9px; }.receipt-heading { font-size:11px; }.receipt-sum strong { font-size:21px; }.receipt-scene { min-height:500px; }.read-tag { padding:12px; right:-6px; }.receipt-halo { width:275px; height:275px; }.receipt-halo::after { inset:-10px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.button { transition:none; }.button:hover { transform:none; } }