/* Shared, self-hosted styles. The marketing site works without JavaScript or web fonts. */
:root { color-scheme: light; --page:#faf9f6; --paper:#fff; --ink:#252821; --muted:#65685f; --line:#dddfd5; --accent:#b84423; --peach:#f3e9dc; --green:#48684d; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:2rem; }
body { margin:0; background:var(--page); color:var(--ink); font:16px/1.65 system-ui,-apple-system,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-underline-offset:4px; }
a:hover { color:var(--accent); }
a:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline:3px solid var(--accent); outline-offset:5px; border-radius:3px; }
p { margin:0 0 1.15rem; }
h1,h2,h3 { line-height:1.12; font-weight:550; letter-spacing:-.045em; text-wrap:balance; }
h1 { font-size:clamp(2.9rem,5.1vw,4.65rem); margin:1.25rem 0 1.5rem; }
h2 { font-size:clamp(2rem,3.3vw,3rem); margin:0 0 1.3rem; }
h3 { font-size:1.3rem; letter-spacing:-.025em; }
svg { display:block; max-width:100%; }
.container { width:min(1180px,calc(100% - 96px)); margin-inline:auto; }
.skip { position:absolute; top:-100px; left:1rem; background:var(--ink); color:white; padding:.7rem 1rem; z-index:5; }
.skip:focus { top:1rem; }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:2rem; min-height:100px; border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:.55rem; color:var(--ink); text-decoration:none; font-size:1.45rem; font-weight:700; letter-spacing:-.06em; }
.brand svg { width:29px; height:34px; }
.nav { display:flex; gap:2rem; align-items:center; font-size:.85rem; font-weight:550; }
.nav a { text-decoration:none; }
.nav>a:not(.button) { padding-block:6px; }
.nav a[aria-current=page] { text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:2px; }
.button { display:inline-flex; justify-content:center; align-items:center; gap:1.5rem; min-height:49px; padding:.7rem 1.2rem; border:1px solid var(--ink); border-radius:6px; background:var(--ink); color:white; font-size:.9rem; font-weight:600; text-decoration:none; transition:background .15s,transform .15s; }
.button:hover { background:#454a3c; color:white; transform:translateY(-2px); }
.button.small { min-height:40px; padding:.45rem .95rem; font-size:.82rem; }
.button.light { background:transparent; color:var(--ink); border-color:var(--line); }
.button.light:hover { background:var(--peach); }
.eyebrow { display:flex; align-items:center; gap:.55rem; font:600 .69rem/1.5 ui-monospace,"Cascadia Code",monospace; text-transform:uppercase; letter-spacing:.13em; color:var(--muted); }
.dot { width:7px; height:7px; border-radius:50%; background:var(--accent); display:inline-block; }
.hero { display:grid; grid-template-columns:1fr 1.05fr; gap:4rem; align-items:center; padding:78px 0 80px; }
.hero h1 em { font-style:normal; color:var(--accent); }
.lede { color:var(--muted); font-size:1.08rem; line-height:1.75; max-width:38rem; }
.actions { display:flex; gap:1.5rem; align-items:center; flex-wrap:wrap; margin-top:1.8rem; }
.text-link { font-size:.9rem; font-weight:600; }
.micro { font-size:.75rem; color:var(--muted); margin-top:1rem; }
.preview { position:relative; margin:0; padding:42px 0 0 22px; }
.statement { position:absolute; top:0; right:20px; width:72%; height:130px; padding:15px 23px; background:#eeeade; border:1px solid #d9d6ca; border-radius:8px; transform:rotate(5deg); font:.62rem/1.6 ui-monospace,monospace; color:#55594f; }
.statement-top { display:flex; justify-content:space-between; border-bottom:1px solid #c9c8bc; padding-bottom:8px; margin-bottom:9px; }
.preview-window { position:relative; background:var(--paper); border:1px solid #d3d6c9; border-radius:10px; box-shadow:0 20px 55px #353a2110; transform:rotate(-1.5deg); }
.preview-top { display:flex; align-items:center; justify-content:space-between; padding:15px 19px; border-bottom:1px solid var(--line); font-size:.7rem; }
.preview-brand { font-weight:750; font-size:.83rem; }
.local-badge { font-size:.63rem; color:var(--green); display:flex; gap:6px; align-items:center; }
.local-badge .dot { background:var(--green); width:5px; height:5px; }
.preview-body { padding:22px; }
.preview-heading { display:flex; align-items:center; justify-content:space-between; font-size:.73rem; }
.preview-heading strong { font-size:1.1rem; letter-spacing:-.035em; }
.preview-number { font-size:2.45rem; line-height:1.4; letter-spacing:-.05em; font-weight:550; margin:14px 0 0; }
.preview-label { color:var(--muted); font-size:.65rem; }
.chart { width:100%; height:auto; margin:14px 0 3px; }
.chart-months { display:flex; justify-content:space-between; color:var(--muted); font:.58rem ui-monospace,monospace; }
.preview-stats { margin-top:24px; padding-top:15px; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.preview-stats strong { display:block; font-size:1.3rem; font-weight:550; letter-spacing:-.025em; }
.preview-note { display:flex; align-items:center; gap:10px; padding:10px 12px; margin-top:20px; background:#f0f3eb; border-radius:5px; font-size:.64rem; color:#46573e; }
.preview figcaption { text-align:center; font:.62rem/1.5 ui-monospace,monospace; color:var(--muted); margin:20px 0 0; }
.bank-strip { border-block:1px solid var(--line); display:flex; align-items:center; gap:2rem; justify-content:space-between; padding:25px 0; }
.bank-strip p { margin:0; font-size:.75rem; color:var(--muted); max-width:160px; }
.bank-names { display:flex; align-items:center; gap:2.4rem; font-size:1.4rem; font-weight:700; letter-spacing:-.045em; }
.bank-strip a { font-size:.75rem; }
.section { padding:92px 0; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:3rem; margin-bottom:42px; }
.section-heading h2 { max-width:620px; margin:12px 0 0; }
.section-heading>p { max-width:295px; color:var(--muted); font-size:.94rem; margin:0; }
.features { display:grid; grid-template-columns:repeat(3,1fr); gap:35px; }
.feature { display:flex; flex-direction:column; border-top:1px solid var(--line); padding-top:22px; }
.feature p { color:var(--muted); font-size:.9rem; }
.feature-number { font:.75rem ui-monospace,monospace; color:var(--accent); }
.feature h3 { margin:22px 0 14px; }
.mini { height:130px; margin:23px 0 0; background:#f0f0e9; border-radius:5px; padding:19px; font-size:.7rem; }
.feature .mini { margin-top:auto; }
.mini-row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid #d9ddcf; }
.mini-row:last-child { border:0; }
.mini-transfer { display:flex; align-items:center; justify-content:space-between; height:100%; gap:8px; text-align:center; }
.mini-transfer strong { display:block; font-size:.9rem; }
.transfer-line { flex:1; border-bottom:1px solid #a4ae96; color:var(--green); padding-bottom:8px; }
.privacy-band { background:var(--peach); border-block:1px solid #e4d9cb; }
.privacy-grid { display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:center; }
.privacy-grid h2 { margin-top:15px; }
.privacy-grid p { color:#635f55; }
.privacy-points { list-style:none; padding:0; margin:0; }
.privacy-points li { display:grid; grid-template-columns:30px 1fr; padding:20px 0; border-bottom:1px solid #dacebd; gap:15px; }
.privacy-points li:last-child { border:0; }
.privacy-points span { color:var(--accent); }
.privacy-points strong { display:block; font-size:1rem; font-weight:600; margin-bottom:4px; }
.privacy-points p { font-size:.85rem; margin:0; }
.steps { counter-reset:steps; list-style:none; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.steps li { counter-increment:steps; }
.steps li:before { content:"0" counter(steps); display:block; font:.75rem ui-monospace,monospace; color:var(--accent); padding-bottom:17px; border-bottom:1px solid var(--line); }
.steps p { color:var(--muted); font-size:.9rem; }
.faq-layout { display:grid; grid-template-columns:1fr 1.5fr; gap:5rem; border-top:1px solid var(--line); }
.faq-layout h2 { margin-top:15px; }
details { border-bottom:1px solid var(--line); }
summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:1rem; cursor:pointer; padding:21px 0; font-size:.97rem; font-weight:550; }
summary::-webkit-details-marker { display:none; }
summary:after { content:"+"; font-size:1.3rem; color:var(--accent); font-weight:400; }
details[open] summary:after { content:"−"; }
details p { font-size:.9rem; color:var(--muted); padding-right:20px; }
.closing { padding:55px 35px; text-align:center; border:1px solid var(--line); border-radius:8px; background:#eeeee5; margin-bottom:75px; }
.closing h2 { margin:0 0 14px; }
.closing p { color:var(--muted); }
.site-footer { border-top:1px solid var(--line); padding:35px 0 30px; }
.footer-top { display:flex; justify-content:space-between; gap:2rem; }
.footer-top p { font-size:.8rem; color:var(--muted); margin-top:8px; }
.footer-links { display:flex; gap:25px; flex-wrap:wrap; align-content:start; font-size:.8rem; }
.footer-bottom { display:flex; justify-content:space-between; gap:1rem; font-size:.7rem; color:var(--muted); margin-top:35px; }
.page-intro { padding:65px 0 45px; max-width:780px; }
.page-intro h1 { font-size:clamp(2.5rem,4.5vw,4rem); }
.guide-step { display:grid; grid-template-columns:70px 1fr 1fr; gap:35px; border-top:1px solid var(--line); padding:45px 0; }
.guide-step>.feature-number { padding-top:9px; }
.guide-step h2 { font-size:1.9rem; }
.guide-step p { color:var(--muted); }
.callout { border:1px solid var(--line); border-left:3px solid var(--accent); background:var(--paper); padding:22px 25px; border-radius:5px; }
.callout p:last-child { margin-bottom:0; }
.guide-step .callout { font-size:.9rem; align-self:start; }
.tablewrap { overflow:auto; border:1px solid var(--line); border-radius:7px; margin-bottom:25px; }
.table-hint { display:none; }
table.support { border-collapse:collapse; width:100%; min-width:650px; font-size:.9rem; background:var(--paper); }
table.support caption { text-align:left; padding:20px; font-weight:600; }
table.support th,table.support td { text-align:left; padding:22px; border-top:1px solid var(--line); }
table.support thead th { font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; background:#efefe7; color:var(--muted); }
table.support tbody th { font-weight:650; white-space:nowrap; }
.muted { color:var(--muted); }
.document { max-width:760px; margin:0 auto; padding:60px 0 80px; }
.document h1 { font-size:clamp(2.5rem,4vw,3.8rem); }
.document h2 { font-size:1.4rem; margin:40px 0 15px; padding-top:25px; border-top:1px solid var(--line); letter-spacing:-.025em; }
.document h3 { font-size:1.1rem; margin-top:25px; }
.document li { margin:9px 0; }
.document a { color:var(--accent); }
.document .lede { margin-bottom:35px; }
.document .updated { color:var(--muted); font-size:.85rem; }
.document code { font:.85em ui-monospace,monospace; background:#eeeee5; padding:.15em .3em; overflow-wrap:anywhere; }
.document .callout { margin:25px 0; }
.document table { border-collapse:collapse; width:100%; font-size:.85rem; }
.document th,.document td { padding:10px; border:1px solid var(--line); text-align:left; overflow-wrap:anywhere; }
.document .tablewrap { max-width:100%; }
.not-found { text-align:center; padding:110px 0; max-width:600px; margin:auto; }
@media(min-width:1400px) { .hero { gap:5.5rem; } }
@media(max-width:1000px) { .container { width:calc(100% - 56px); } .hero { gap:2rem; } .nav { gap:1.2rem; } .privacy-grid { gap:3rem; } .bank-names { gap:1.5rem; } .guide-step { grid-template-columns:40px 1fr 1fr; gap:20px; } }
@media(max-width:760px) {
  .container { width:calc(100% - 40px); } .site-header { position:relative; flex-wrap:wrap; gap:15px; padding:20px 0; }
  .site-header .brand { min-height:40px; } .nav { width:100%; justify-content:flex-start; gap:24px; font-size:.75rem; }
  .nav .button { position:absolute; right:0; top:20px; font-size:.75rem; }
  .hero { grid-template-columns:1fr; padding:45px 0; gap:35px; } .hero h1 { max-width:550px; } .hero .lede { max-width:550px; }
  .preview { width:min(100%,520px); margin:auto; padding-left:10px; } .bank-strip { flex-wrap:wrap; gap:18px; } .bank-strip p { max-width:none; width:100%; }
  .bank-names { font-size:1.25rem; gap:1.6rem; } .section { padding:60px 0; } .section-heading { display:block; } .section-heading>p { max-width:100%; margin-top:20px; }
  .features { grid-template-columns:1fr; gap:35px; } .feature { display:grid; grid-template-columns:1fr 1fr; gap:0 25px; } .feature-number { grid-column:1/-1; }
  .feature h3 { margin:14px 0; } .feature p { grid-column:1; } .feature .mini { grid-column:2; grid-row:2/4; margin-top:15px; }
  .privacy-grid,.faq-layout { grid-template-columns:1fr; gap:30px; } .steps { grid-template-columns:1fr; gap:25px; }
  .steps h3 { margin:18px 0 12px; } .footer-top { flex-direction:column; } .footer-links { gap:14px 22px; }
  .guide-step { grid-template-columns:30px 1fr; } .guide-step .callout { grid-column:2; } .closing { margin-bottom:50px; padding:40px 20px; }
  .page-intro,.document { padding-top:40px; } .tablewrap { margin-inline:0; }
  .table-hint { display:block; }
}
@media(max-width:420px) { h1 { font-size:2.85rem; } .feature { display:block; } .feature .mini { margin-top:20px; } .bank-names { gap:1.2rem; } .footer-bottom { flex-direction:column; } .preview-body { padding:17px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .button { transition:none; } .button:hover { transform:none; } }