/* FizzyPOS site styles — charcoal #19191C + orange #DF6229 (product theme) */
:root{--coal:#19191C;--coal2:#2B2B30;--primary:#DF6229;--accent:#059669;--border:#E6E1D4;--muted:#5E5A52;--ink-s:#3a3631;--sun:#FFCF3F;--fizz:#DF6229;--fizz-d:#C9521F;--paper:#FFFDF8;--mint:#059669;--mintbg:#DDF5EA;--ink:#19191C;--mute:#5E5A52;--line:#E6E1D4;
--disp:'Bricolage Grotesque',Impact,'Arial Narrow',sans-serif;--body:'Figtree',system-ui,sans-serif}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--coal);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--fizz);outline-offset:3px;border-radius:8px}
h1,h2,h3{font-family:var(--disp);font-stretch:100%;font-weight:800;line-height:.95;letter-spacing:-.015em;text-transform:uppercase}
h1{font-size:clamp(3rem,6.6vw,6rem);line-height:.98}
h2{font-size:clamp(2.2rem,4.6vw,3.8rem);line-height:1}
h3{font-size:1.7rem;font-stretch:100%}
.wrap{max-width:1560px;margin:0 auto;padding:clamp(10px,2vw,28px)}
.frame{background:var(--paper);border-radius:clamp(26px,4vw,48px);padding:0 clamp(18px,4vw,72px) clamp(18px,3.4vw,52px)}
.btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;border-radius:999px;padding:.85rem 1.5rem;font-size:1rem;transition:transform .15s,background .15s;border:2px solid transparent}
.btn:hover{transform:translateY(-2px)}
.btn-fizz{background:linear-gradient(90deg,#EFA280,#DF6229);color:#fff;box-shadow:0 6px 0 var(--fizz-d)}
.btn-fizz:hover{background:var(--fizz-d)}
.btn-fizz{color:#fff}
.btn-line{border-color:var(--coal);color:var(--coal)}
.btn-lg{padding:1.05rem 1.9rem;font-size:1.1rem}
nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.4rem 0}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--disp);font-weight:800;font-size:1.6rem;font-stretch:100%}
.brand i{width:38px;height:38px;border-radius:12px;background:var(--fizz);color:#fff;display:grid;place-items:center;font-style:normal;transform:rotate(-8deg)}
.links{display:flex;gap:2rem;font-weight:600}
.links a:hover{color:var(--fizz)}
.hero{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,3vw,3rem);align-items:center;padding:clamp(1rem,3vw,2.5rem) 0 1rem}
.hero p.lead{font-size:1.2rem;color:var(--mute);max-width:34em;margin:1.6rem 0 2rem}
.ctas{display:flex;flex-wrap:wrap;gap:1rem}
.ticks{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:2rem;font-weight:600;font-size:.95rem}
.ticks span::before{content:"✓";color:var(--mint);font-weight:800;margin-right:.4rem}
.stage{position:relative;background:var(--sun);border-radius:40px;min-height:600px;margin-top:2rem}
.pos{position:absolute;right:-6%;top:-9%;width:80%;background:#fff;border-radius:26px;box-shadow:0 30px 60px rgba(25,25,28,.28);transform:rotate(3.5deg);border:8px solid var(--coal);overflow:hidden}
.pos-h{background:var(--coal);color:#fff;display:flex;justify-content:space-between;padding:.6rem 1rem;font-size:.82rem;font-weight:600}
.pos-h b{color:var(--sun)}
.row{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;border-bottom:1px solid var(--line);font-size:.92rem;font-weight:600}
.row small{display:block;font-weight:500;color:var(--mute);font-size:.78rem}
.tag{font-size:.74rem;font-weight:700;padding:.2rem .65rem;border-radius:99px;background:#FFE7D9;color:var(--fizz-d)}
.tag.g{background:var(--mintbg);color:var(--mint)}
.pay{margin:1rem;display:flex;justify-content:space-between;align-items:center;background:var(--fizz);color:#fff;border-radius:16px;padding:.9rem 1.1rem;font-weight:700}
.pay b{font-family:var(--disp);font-stretch:100%;font-size:1.7rem}
.kds{position:absolute;left:-5%;bottom:7%;width:54%;background:var(--coal);color:#fff;border-radius:22px;padding:1rem;box-shadow:0 24px 50px rgba(25,25,28,.35);transform:rotate(-3deg)}
.kds h4{font-size:.8rem;color:var(--sun);margin-bottom:.6rem;display:flex;justify-content:space-between}
.tk{background:var(--coal2);border-left:5px solid var(--sun);border-radius:10px;padding:.55rem .8rem;margin-top:.45rem;font-size:.85rem;font-weight:600;display:flex;justify-content:space-between}
.tk em{font-style:normal;color:var(--sun)}
.tk.new{animation:drop .6s cubic-bezier(.2,1.3,.4,1)}
@keyframes drop{from{opacity:0;transform:translateY(-14px) scale(.96)}}
.off{position:absolute;right:3%;bottom:-4%;background:#fff;border-radius:20px;padding:.8rem 1.1rem;box-shadow:0 18px 40px rgba(25,25,28,.22);font-weight:700;font-size:.9rem;display:flex;gap:.7rem;align-items:center;transform:rotate(2deg)}
.off i{width:12px;height:12px;border-radius:50%;background:var(--fizz);box-shadow:0 0 0 5px #FFE7D9}
.off small{display:block;font-weight:500;color:var(--mute);font-size:.78rem}
.sec{padding:clamp(3rem,7vw,6rem) 0 0}
.head{display:flex;justify-content:space-between;align-items:end;gap:2rem;flex-wrap:wrap;margin-bottom:2.2rem}
.head p{max-width:30em;color:var(--mute)}
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.tile{border-radius:30px;padding:1.6rem;display:flex;flex-direction:column;justify-content:space-between;min-height:230px;position:relative;overflow:hidden}
.tile p{margin-top:.6rem;font-size:.98rem;max-width:26em}
.t1{grid-column:span 3;background:var(--fizz);color:#fff;min-height:300px}
.t2{grid-column:span 3;background:var(--sun)}
.t3{grid-column:span 2;background:var(--mintbg)}
.t4{grid-column:span 2;background:#FFE9B8}
.t5{grid-column:span 2;background:#FFE7D9}
.t6{grid-column:span 3;background:var(--coal);color:#fff}
.t7{grid-column:span 3;background:#ECE8DF}
.t1 p,.t6 p{color:rgba(255,255,255,.85)}
.t2 p,.t3 p,.t4 p,.t5 p,.t7 p{color:#3a3631}
.big{font-family:var(--disp);font-stretch:100%;font-weight:800;font-size:clamp(3.5rem,8vw,6.5rem);line-height:.8;opacity:.22;position:absolute;right:1rem;top:1rem}
.wide{background:var(--coal2);border-radius:44px;color:#fff;margin-top:clamp(3rem,7vw,6rem);padding:clamp(1.5rem,4vw,4rem);display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(1.5rem,4vw,4rem);align-items:center}
.wide p{color:#D6D3CC;margin-top:1.2rem}
.wide ul{list-style:none;margin-top:1.4rem;display:grid;gap:.5rem;font-weight:600}
.wide li::before{content:"✓";color:var(--sun);margin-right:.6rem}
.chart{background:var(--paper);color:var(--ink);border-radius:28px;padding:1.5rem}
.chart-t{display:flex;justify-content:space-between;align-items:center;font-weight:700}
.chart-t b{font-family:var(--disp);font-stretch:100%;font-size:2.4rem;font-weight:800}
.up{background:var(--mintbg);color:var(--mint);padding:.25rem .7rem;border-radius:99px;font-size:.85rem}
.bars{display:flex;align-items:flex-end;gap:10px;height:170px;margin:1.2rem 0 .8rem}
.bars div{flex:1;background:var(--coal);border-radius:10px 10px 4px 4px;position:relative;transform-origin:bottom;animation:grow 1s cubic-bezier(.2,.9,.3,1) both}
.bars div:nth-child(6){background:var(--fizz)}
.bars div:nth-child(7){background:var(--line)}
.bars span{position:absolute;bottom:-1.5rem;left:50%;transform:translateX(-50%);font-size:.75rem;font-weight:600;color:var(--mute)}
@keyframes grow{from{transform:scaleY(0)}}
.split{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:clamp(3rem,7vw,6rem)}
.panel{border-radius:40px;padding:clamp(1.6rem,3.5vw,3rem);position:relative;overflow:hidden;min-height:420px}
.panel p{margin-top:1rem;max-width:28em}
.pa{background:var(--sun)}
.pb{background:var(--mintbg)}
.phone{position:absolute;right:6%;bottom:-70px;width:200px;height:300px;background:#fff;border:7px solid var(--coal);border-radius:34px;padding:1rem .8rem;transform:rotate(6deg);box-shadow:0 20px 40px rgba(25,25,28,.25);font-size:.78rem;font-weight:700}
.phone div{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid var(--line)}
.phone .snap{margin-top:.8rem;background:var(--coal);color:#fff;border-radius:12px;padding:.6rem;text-align:center}
.pa p{max-width:17em}
.roles{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem;max-width:30em}
.roles span{background:#fff;border-radius:99px;padding:.45rem 1rem;font-weight:700;font-size:.9rem}
.roles span:nth-child(3n){background:var(--coal);color:#fff}
.faq{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(1.5rem,4vw,4rem);align-items:start}
details{border-bottom:2px solid var(--line);padding:1.1rem 0}
summary{cursor:pointer;font-weight:700;font-size:1.1rem;list-style:none;display:flex;justify-content:space-between;gap:1rem}
summary::after{content:"+";font-size:1.5rem;line-height:1;color:var(--fizz);transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--mute);margin-top:.7rem;max-width:40em}
.cta{margin-top:clamp(3rem,7vw,6rem);background:var(--fizz);color:#fff;border-radius:44px;padding:clamp(2rem,6vw,5rem);text-align:center}
.cta p{max-width:34em;margin:1.2rem auto 2rem;font-size:1.15rem;color:rgba(255,255,255,.9)}
.cta .btn-fizz{background:var(--coal);box-shadow:0 6px 0 #000}
.cta .btn-line{border-color:#fff;color:#fff}
footer{color:#D6D3CC;padding:2.5rem clamp(10px,2vw,28px) 1.5rem;max-width:1560px;margin:0 auto;font-size:.95rem}
.ft{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.ft .brand{color:#fff;margin-bottom:.6rem}
.fc{display:flex;gap:3rem;flex-wrap:wrap}
.fc div{display:grid;gap:.4rem;align-content:start}
.fc b{color:#fff}
.fc a:hover{color:var(--sun)}
.fb{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--coal2);font-size:.85rem}
@media(max-width:900px){
.hero,.wide,.split,.faq{grid-template-columns:1fr}
.links{display:none}
.stage{min-height:480px;margin-top:3rem}
.pos{width:88%;right:-2%}
.t1,.t2,.t6,.t7{grid-column:span 6}.t3,.t4,.t5{grid-column:span 6;min-height:190px}
.panel{min-height:480px}
}
@media(max-width:520px){.nav-demo{display:none}.kds{width:66%}.off{right:0}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- shared: skip link, mobile menu, aria-current ---------- */
.skip{position:absolute;left:-999px;top:8px;background:var(--fizz);color:#fff;padding:.6rem 1rem;border-radius:99px;z-index:9;font-weight:700}
.skip:focus{left:8px}
.links a[aria-current]{color:var(--fizz)}
.m{display:none;position:relative}
.m summary{list-style:none;cursor:pointer;font-weight:700;border:2px solid var(--ink);border-radius:99px;padding:.55rem 1rem}
.m summary::after{display:none}
.m div{position:absolute;right:0;top:3.2rem;background:var(--paper);border:2px solid var(--ink);border-radius:20px;padding:.6rem;display:grid;min-width:180px;z-index:5;box-shadow:0 20px 40px rgba(25,25,28,.2)}
.m a{padding:.6rem 1rem;font-weight:600;border-radius:12px}.m a:hover{background:#FFE7D9}
@media(max-width:900px){.m{display:block}}

/* ---------- inner pages (features, pricing, contact, blog, legal) ---------- */
.inner .container{max-width:1100px;margin:0 auto}
.inner section{padding:clamp(2.2rem,5vw,4rem) 0 0}
.text-center{text-align:center}
.page-hero{background:var(--sun);border-radius:40px;padding:clamp(2.2rem,6vw,4.5rem) 1.2rem!important;margin-top:.5rem}
.page-hero h1{font-size:clamp(2.6rem,6.4vw,5.4rem);max-width:15em;margin:.8rem auto 0}
.page-hero p{color:#3a3631;font-size:1.15rem}
.eyebrow{display:inline-block;background:#fff;border-radius:99px;padding:.3rem .95rem;font-weight:700;font-size:.9rem;color:var(--fizz-d)}
.section-head{margin-bottom:2rem;text-align:center}
.section-head h2{margin-top:.8rem}
.inner h2{font-size:clamp(2rem,4.4vw,3.2rem)}
.section-alt{background:#F6F1E6;border-radius:40px;margin-top:clamp(2.2rem,5vw,4rem);padding:clamp(2rem,5vw,4rem) clamp(1rem,3vw,3rem)!important}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,3vw,2.5rem)}
.grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.feat-card{background:#fff;border:2px solid var(--line);border-radius:28px;padding:1.6rem}
.feat-card p{color:var(--mute);font-size:.98rem}
.feat-card h3{font-size:1.5rem}
.feat-icon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:#FFE9B8;color:var(--ink);margin-bottom:1rem}
.feat-icon.orange{background:#FFE7D9;color:var(--fizz-d)}.feat-icon.green{background:var(--mintbg);color:var(--mint)}
.btn-primary{background:var(--fizz);color:#fff;box-shadow:0 6px 0 var(--fizz-d)}.btn-primary:hover{background:var(--fizz-d)}
.btn-ghost{border-color:var(--ink);color:var(--ink)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:1.6rem}
.price-feats{display:grid;gap:.55rem;margin-top:1rem}
.price-feat{display:flex;gap:.6rem;align-items:flex-start;font-weight:600;font-size:.98rem;color:var(--ink-s,#3a3631)}
.price-feat svg{flex:none;margin-top:.3rem;color:var(--mint)}
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:14px;align-items:stretch}
.price-card{background:#fff;border:2px solid var(--line);border-radius:32px;padding:2rem;display:flex;flex-direction:column;gap:.8rem}
.price-card.featured{background:var(--ink);color:#fff;border-color:var(--ink);transform:translateY(-8px)}
.price-card.featured .price-feat,.price-card.featured .price-name{color:#fff}.price-card.featured .price-desc{color:#D6D3CC}.price-card.featured .price-feat svg{color:var(--sun)}
.price-name{font-family:var(--disp);font-stretch:100%;font-weight:800;text-transform:uppercase;font-size:1.8rem;line-height:1}
.price-desc{color:var(--mute)}
.price-amt .num{font-family:var(--disp);font-stretch:100%;font-weight:800;font-size:4rem;line-height:1}
.price-amt .per{color:var(--mute);font-weight:600;margin-left:.4rem}
.price-card.featured .per{color:#D6D3CC}
.price-card .btn{margin-top:auto;justify-content:center}
.price-card.featured .btn-fizz{box-shadow:0 6px 0 #8a3711}
.mock-card{background:#fff;border:6px solid var(--ink);border-radius:26px;overflow:hidden;box-shadow:0 24px 48px rgba(25,25,28,.18)}
.mock-bar{background:var(--ink);padding:.6rem 1rem;display:flex;gap:6px}.mock-bar span{width:10px;height:10px;border-radius:50%;background:#55555c}.mock-bar span:first-child{background:var(--fizz)}
.mock-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.75rem 1rem;border-bottom:1px solid var(--line)}
.mock-row-name{font-weight:700;font-size:.92rem;color:var(--ink)}.mock-row-meta{font-size:.78rem;color:var(--mute)}
.mock-badge{font-size:.74rem;font-weight:700;padding:.2rem .65rem;border-radius:99px;background:var(--mintbg);color:var(--mint);white-space:nowrap}
.mock-badge.orange{background:#FFE7D9;color:var(--fizz-d)}.mock-badge.blue{background:var(--ink);color:var(--sun)}
.chart-card{background:#fff;border:2px solid var(--line);border-radius:28px;padding:1.5rem}
.chart-card-head{display:flex;justify-content:space-between;align-items:center}
.chart-card-head h4{font-size:.85rem;color:var(--mute)}.chart-card-total{font-family:var(--disp);font-stretch:100%;font-weight:800;font-size:2.2rem}
.chart-card-delta{background:var(--mintbg);color:var(--mint);padding:.25rem .7rem;border-radius:99px;font-size:.85rem;font-weight:700}
.chart-bars-wrap{display:flex;align-items:flex-end;gap:10px;height:160px;margin:1.2rem 0 1.8rem}
.chart-bar-col{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:.3rem}
.chart-bar{width:100%;background:var(--ink);border-radius:10px 10px 4px 4px}.chart-bar.is-muted{background:var(--line)}.chart-bar-col:nth-child(6) .chart-bar{background:var(--fizz)}
.chart-bar-lbl{font-size:.75rem;font-weight:600;color:var(--mute)}
.chart-divider{height:2px;background:var(--line);margin-bottom:.8rem}
.chart-legend-row{display:flex;gap:.6rem;align-items:center;font-size:.9rem;font-weight:600;padding:.2rem 0}.chart-legend-row span:last-child{margin-left:auto}
.chart-legend-dot{width:10px;height:10px;border-radius:50%}
.faq-item{border-bottom:2px solid var(--line);padding:1.1rem 0}
.faq-item summary{cursor:pointer;font-weight:700;font-size:1.1rem;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq-item p{color:var(--mute);margin-top:.7rem}
.cta-band{background:var(--fizz);color:#fff;border-radius:40px;padding:clamp(2rem,5vw,4rem);text-align:center}.cta-band p{color:rgba(255,255,255,.9)}
.cta-band .btn-fizz{background:#fff;color:var(--fizz-d);box-shadow:0 6px 0 #8a3711}.cta-band .btn-fizz:hover{background:var(--coal);color:#fff;box-shadow:0 6px 0 #000}
.cta-band .btn-line{border-color:#fff;color:#fff}.cta-band .btn-line:hover{background:#fff;color:var(--fizz-d)}
.feat-illus{border-radius:32px;padding:clamp(1.4rem,3.5vw,2.6rem);display:flex;align-items:center;justify-content:center;min-height:300px}
.feat-illus svg{width:100%;height:auto;max-width:420px;overflow:visible}
.feat-illus.c1{background:#DF6229}.feat-illus.c2{background:#FFD23F}.feat-illus.c3{background:#DDF5EA}.feat-illus.c4{background:#FFE9B8}.feat-illus.c5{background:#FFE7D9}.feat-illus.c6{background:#059669}.feat-illus.c7{background:#FFC9A8}
.inner input:not([type=checkbox]):not([type=hidden]),.inner select,.inner textarea{background:#fff;border:2px solid var(--line)!important;border-radius:14px!important;padding:.8rem 1rem!important;font:inherit!important;color:var(--ink);width:100%;display:block}
.inner input:focus,.inner select:focus,.inner textarea:focus{outline:3px solid var(--fizz);border-color:var(--fizz)!important}
.inner label{font-weight:700!important;font-size:.9rem!important;display:block;margin-bottom:.45rem}
.inner textarea{resize:vertical;min-height:7rem}
.inner form.feat-card{border-radius:36px;padding:clamp(1.4rem,3vw,2.4rem)!important}
.inner button.btn{cursor:pointer;font-family:inherit}
.prose,.blog-post-body{max-width:720px;margin:0 auto;padding:clamp(2rem,5vw,3.5rem) 0 0}
.prose h2,.blog-post-body h2{font-family:var(--body);font-stretch:100%;text-transform:none;font-weight:800;line-height:1.15;font-size:1.7rem;margin:2.4rem 0 .8rem;letter-spacing:-.01em}
.prose h3,.blog-post-body h3{font-family:var(--body);font-stretch:100%;text-transform:none;font-size:1.2rem;margin:1.6rem 0 .5rem}
.prose p,.blog-post-body p{margin-bottom:1.1rem;line-height:1.8;color:#3a3631}
.prose ul,.prose ol,.blog-post-body ul,.blog-post-body ol{margin:0 0 1.2rem 1.3rem;color:#3a3631;line-height:1.75}
.prose li,.blog-post-body li{margin-bottom:.45rem}
.prose a,.blog-post-body a{color:var(--fizz-d);text-decoration:underline;text-underline-offset:3px}
.blog-post-body blockquote{border-left:6px solid var(--fizz);background:#FFF4E8;border-radius:0 20px 20px 0;padding:1rem 1.4rem;margin:1.6rem 0}
.blog-post-body table{width:100%;border-collapse:collapse;margin:1.4rem 0;font-size:.95rem}.blog-post-body th,.blog-post-body td{border-bottom:2px solid var(--line);padding:.6rem;text-align:left}
.updated{font-size:.85rem;color:var(--mute);margin-bottom:1.5rem}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:14px}
.blog-card{background:#fff;border:2px solid var(--line);border-radius:30px;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,border-color .2s}
.blog-card:hover{transform:translateY(-4px);border-color:var(--fizz)}
.blog-card-img{background:var(--sun);height:130px;display:grid;place-items:center;color:var(--ink)}
.blog-card:nth-child(3n+2) .blog-card-img{background:var(--fizz);color:#fff}.blog-card:nth-child(3n) .blog-card-img{background:var(--mintbg);color:var(--mint)}
.blog-card-body{padding:1.4rem}
.card-h{font-size:1.6rem;margin:.5rem 0}
.blog-card p{color:var(--mute);font-size:.95rem}
.blog-cat{display:inline-block;background:#fff;border-radius:99px;padding:.2rem .8rem;font-weight:700;font-size:.82rem;color:var(--fizz-d)}
.blog-card .blog-cat{background:#FFE7D9}
.blog-meta{display:flex;gap:.5rem;font-size:.85rem;font-weight:600;color:var(--mute);margin-top:.8rem}
.inner>.cta-final,.inner .container.text-center:last-child{padding-bottom:0}
@media(max-width:900px){.grid-2{grid-template-columns:1fr}.price-card.featured{transform:none}}

/* ---------- bright pass: orange field, light panels, charcoal only for text ---------- */
:root{--sun:#FFD23F}
body{background:linear-gradient(160deg,#F2A27C 0%,#DF6229 50%,#C9521F 100%) fixed}
.pos{border-color:#fff}
.pos-h{background:var(--fizz)}.pos-h b{color:#fff}
.kds{background:var(--fizz)}.kds h4{color:#fff}
.tk{background:rgba(255,255,255,.22);border-left-color:#fff}.tk em{color:#fff}
.t4{background:#FFE9B8}.t6{background:var(--mint);color:#fff}.t7{background:#FFC9A8}
.wide{background:linear-gradient(135deg,#F2A27C,#DF6229)}
.wide p,.wide li{color:#fff}.wide li::before{color:var(--sun)}
.bars div{background:var(--sun)}.bars div:nth-child(6){background:var(--fizz)}.bars div:nth-child(7){background:#F0E7D3}
.chart-bar{background:var(--sun)}.chart-bar-col:nth-child(6) .chart-bar{background:var(--fizz)}
.phone{border-color:var(--fizz)}.phone .snap{background:var(--fizz)}
.mock-card{border-color:var(--fizz)}.mock-bar{background:var(--fizz)}.mock-bar span,.mock-bar span:first-child{background:rgba(255,255,255,.7)}
.mock-badge.blue{background:#FFE9B8;color:var(--ink)}
.price-card.featured{background:linear-gradient(160deg,#F2A27C,#DF6229);border-color:var(--fizz)}
.price-card.featured .price-feat svg{color:#fff}.price-card.featured .price-desc,.price-card.featured .per{color:#fff}
.price-card.featured .btn-fizz{background:#fff;color:var(--fizz-d);box-shadow:0 6px 0 #8a3711}
.m summary{border-color:var(--fizz);color:var(--fizz-d)}
footer,.fc a,.ft p{color:#fff}.fb{border-top-color:rgba(255,255,255,.35)}.fc a:hover{color:var(--sun)}
.blog-card:nth-child(3n+1) .blog-card-img{background:var(--sun)}
.stage{overflow:visible;min-height:470px;margin-top:5.5rem}
.stage svg{position:absolute;left:0;bottom:0;width:100%;height:auto;clip-path:inset(-300px 0 0 0 round 0 0 40px 40px)}
.steam{animation:rise 3.2s ease-in-out infinite}@keyframes rise{50%{transform:translateY(-8px);opacity:.25}}
.phone-svg{position:absolute;right:5%;bottom:-40px;width:min(250px,50%);height:auto;transform:rotate(5deg);filter:drop-shadow(0 10px 0 rgba(25,25,28,.0))}
@media(max-width:900px){.stage{min-height:380px}}
.tile{justify-content:flex-start;gap:1rem;min-height:0}
.tile svg{width:100%;max-width:320px;height:auto;align-self:center}
.tile>div{margin-top:auto}
.t1,.t2{min-height:0}
.t1 .h,.big{display:none}
.panel{min-height:560px}
.ml-svg{position:absolute;left:50%;transform:translateX(-50%);bottom:18px;width:min(380px,78%);height:auto}

/* ---- rev3: gradients, header button, round hero, footer ---- */
body{background:radial-gradient(900px 600px at 8% 0,#FFB27F 0,transparent 60%),radial-gradient(900px 700px at 100% 100%,#B94615 0,transparent 60%),linear-gradient(160deg,#F2A27C 0%,#DF6229 50%,#C9521F 100%) fixed}
.frame{background:radial-gradient(800px 520px at 92% 0,#FFE9B8 0,transparent 62%),radial-gradient(700px 520px at 0 45%,#FFE3D2 0,transparent 60%),linear-gradient(180deg,#FFFDF8,#FFF6EA)}
.btn-go{padding:.5rem .5rem .5rem 1.3rem;background:linear-gradient(135deg,#F7A77F 0%,#DF6229 55%,#C9521F 100%)!important;box-shadow:0 8px 22px rgba(223,98,41,.5),inset 0 1px 0 rgba(255,255,255,.55)!important;border:0;color:#fff;gap:.8rem}
.btn-go:hover{filter:brightness(1.06);box-shadow:0 12px 28px rgba(223,98,41,.6),inset 0 1px 0 rgba(255,255,255,.55)!important}
.arr{width:34px;height:34px;border-radius:50%;background:#fff;color:var(--fizz-d);display:grid;place-items:center;transition:transform .2s}
.btn-go:hover .arr{transform:translateX(3px) rotate(-45deg)}
nav .btn-line{border-color:var(--ink);padding:.7rem 1.3rem}nav .btn-line:hover{background:var(--ink);color:#fff}
.stage{background:none;min-height:0;margin-top:0;border-radius:0}
.stage svg{position:static;display:block;width:104%;margin-left:-2%;height:auto;overflow:visible;clip-path:none}
@media(max-width:900px){.stage{min-height:0}.stage svg{width:100%;margin:0}}
.t1{background:linear-gradient(145deg,#F2A27C,#DF6229)}.t2{background:linear-gradient(145deg,#FFE27A,#FFC12E)}.t3{background:linear-gradient(145deg,#E8FAF1,#BDEBD6)}.t4{background:linear-gradient(145deg,#FFF1CC,#FFDC8A)}.t5{background:linear-gradient(145deg,#FFEFE6,#FFD3B8)}.t6{background:linear-gradient(145deg,#10A67A,#047857)}.t7{background:linear-gradient(145deg,#FFD9BF,#FFB892)}
.pa{background:linear-gradient(160deg,#FFE27A,#FFBF2B)}.pb{background:linear-gradient(160deg,#E8FAF1,#A9E5CC)}
.cta{background:linear-gradient(135deg,#F2A27C,#DF6229 55%,#C9521F)}
.foot{max-width:1560px;margin:0 auto;padding:0 clamp(10px,2vw,28px) clamp(10px,2vw,28px);color:var(--ink)}
.fcard{position:relative;overflow:hidden;border-radius:clamp(26px,4vw,48px);padding:clamp(1.8rem,4vw,4rem) clamp(1.4rem,4vw,4.5rem) 0;background:radial-gradient(700px 400px at 100% 0,#FFF6CF 0,transparent 60%),linear-gradient(160deg,#FFE27A 0%,#FFC12E 60%,#FFAE3C 100%)}
.f-top{display:grid;grid-template-columns:1.1fr 1.4fr;gap:clamp(1.5rem,4vw,4rem)}
.f-brand p{max-width:22em;margin:1rem 0 1.6rem;font-size:1.15rem;font-weight:600;color:#3a3631}
.f-cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem}
.mail{font-weight:700;border-bottom:3px solid var(--fizz);padding-bottom:2px}.mail:hover{color:var(--fizz-d)}
.f-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.f-cols h4{font-family:var(--disp);font-size:1.15rem;font-weight:800;margin-bottom:.9rem}
.f-cols a{display:block;padding:.28rem 0;font-weight:600;color:#3a3631;transition:transform .15s,color .15s}.f-cols a:hover{color:var(--fizz-d);transform:translateX(4px)}
/* line-height:.78 combined with a negative bottom margin was tighter than
   this display font's actual descender extent at this huge size (up to
   18rem) — the parent .fcard's overflow:hidden then clipped the descender
   of the lowercase "y" outright, so the brand's own name rendered as
   "Fizzu" in the footer of every page. .92 leaves enough room for
   descenders to actually render; the margin is no longer negative so it
   doesn't pull the line box back up past the safe area. */
.f-word{font-family:var(--disp);font-weight:800;font-size:clamp(4.2rem,19.5vw,18rem);line-height:.92;letter-spacing:-.04em;text-align:center;margin:clamp(2rem,5vw,4rem) 0 0;background:linear-gradient(180deg,#F2A27C 0%,#DF6229 55%,#B94615 100%);-webkit-background-clip:text;background-clip:text;color:transparent;user-select:none}
.f-bot{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem 1.5rem;padding:1rem clamp(1.4rem,4vw,4.5rem);font-size:.9rem;font-weight:600;color:#fff;background:linear-gradient(0deg,rgba(150,50,10,.55),transparent)}
.totop{font-weight:700;color:#fff}.totop:hover{color:var(--ink)}
.fcard{padding-bottom:3.4rem}
@media(max-width:900px){.f-top{grid-template-columns:1fr}.f-cols{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.f-cols{grid-template-columns:1fr}}

/* ---- rev4: flat colours, crisp button, bleeding tile art ---- */
body{background:#DF6229}
.frame{background:var(--paper)}
.btn-go{background:linear-gradient(180deg,#EC7541,#DF6229)!important;box-shadow:0 5px 0 #8a3711,inset 0 1.5px 0 rgba(255,255,255,.55)!important}
.btn-go:hover{filter:none;transform:translateY(-2px);box-shadow:0 7px 0 #8a3711,inset 0 1.5px 0 rgba(255,255,255,.55)!important}
.t1{background:#DF6229}.t2{background:#FFD23F}.t3{background:#DDF5EA}.t4{background:#FFE9B8}.t5{background:#FFE7D9}.t6{background:#059669}.t7{background:#FFC9A8}
.pa{background:#FFD23F}.pb{background:#DDF5EA}.cta{background:#DF6229}
.fcard{background:#FFD23F}
.f-word{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#DF6229;-webkit-text-fill-color:#DF6229}
.f-bot{background:linear-gradient(0deg,#FFD23F 60%,rgba(255,210,63,0) 100%);padding-top:2.6rem;color:var(--ink)}.totop{color:var(--ink)}.totop:hover{color:var(--fizz-d)}
.tile{padding:0;gap:0;justify-content:flex-start}
.tile svg{width:100%;max-width:none;align-self:stretch;display:block;height:auto;margin:0}
.tile .tt{margin-top:0;padding:.6rem 1.6rem 1.7rem}
.tile .tt p{max-width:30em}
.ml-svg{width:min(430px,92%)}

/* ---- rev5: smaller, centred tile art ---- */
.tile svg{width:min(100%,330px);margin:1.6rem auto .4rem;overflow:visible;align-self:center}
.tile .tt{padding:.8rem 1.6rem 1.7rem}
.ml-svg{width:min(340px,80%)}

/* rev7: tile art size + position */
.btn{white-space:nowrap}
.tile{justify-content:flex-start}
.tile svg{display:block;overflow:visible;margin:0 auto;width:100%;max-width:340px;height:auto;padding:0}
.t1 svg,.t2 svg,.t6 svg,.t7 svg{max-width:none;width:auto;height:248px;max-width:100%}
.tile .tt{margin-top:auto;padding:1.2rem 1.7rem 1.8rem}
.tile{padding-top:1.9rem}
.t3 svg,.t4 svg,.t5 svg{margin-top:.2rem}
@media(max-width:900px){.t1 svg,.t2 svg,.t6 svg,.t7 svg{height:auto;width:100%;max-width:400px}}
@media(max-width:520px){nav{gap:.5rem}.brand{font-size:1.15rem;gap:.4rem}.brand i{width:32px;height:32px}nav>div:last-child{gap:.4rem!important}nav .btn-go{padding:.5rem .8rem;font-size:.85rem}nav .btn-go .arr{display:none}.m summary{padding:.45rem .8rem;font-size:.9rem}}
.tile .tt{margin-top:0}
.t1 svg,.t2 svg,.t6 svg,.t7 svg{height:clamp(190px,16vw,240px)}
@media(max-width:900px){.t1 svg,.t2 svg,.t6 svg,.t7 svg{height:auto;width:100%;max-width:400px}}
@media(max-width:900px){.tile svg,.t1 svg,.t2 svg,.t6 svg,.t7 svg{width:86%;max-width:360px;height:auto}}

/* ---------- enterprise presentation pass ---------- */
:root{--surface:#fffaf2;--surface-2:#f4efe5;--shadow:0 20px 60px rgba(25,25,28,.09)}
body{background:#121216;color:#222228;letter-spacing:-.005em}
.wrap{max-width:1440px;padding:clamp(8px,2vw,24px)}
.frame{background:var(--surface);border:1px solid rgba(25,25,28,.08);box-shadow:0 24px 80px rgba(0,0,0,.18);padding-left:clamp(20px,5vw,84px);padding-right:clamp(20px,5vw,84px)}
nav{min-height:76px;padding:1rem 0;border-bottom:1px solid rgba(25,25,28,.09)}
.brand{letter-spacing:-.04em}
.links{gap:1.55rem;font-size:.95rem}
.links a{color:#4b4842}
.inner{max-width:1200px;margin:0 auto}
.page-hero{padding:clamp(4rem,9vw,8rem) 0 clamp(3rem,6vw,5rem);border-bottom:1px solid var(--line)}
.page-hero h1{max-width:900px;margin:.7rem auto 0;font-size:clamp(2.8rem,6vw,5.6rem)}
.page-hero p{font-size:1.15rem;line-height:1.7;color:var(--mute)}
.eyebrow{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--fizz-d)}
.hero{padding-top:clamp(3rem,7vw,6rem);padding-bottom:clamp(3rem,7vw,6rem)}
.hero h1{max-width:680px}
.hero p.lead{font-size:clamp(1.05rem,2vw,1.3rem);line-height:1.7}
.stage{border:1px solid rgba(25,25,28,.08);box-shadow:var(--shadow);min-height:560px}
.sec{padding-top:clamp(4rem,8vw,8rem)}
.head{margin-bottom:2.8rem;align-items:start}
.head h2{max-width:620px}
.head p{font-size:1.05rem;line-height:1.75}
.bento{gap:18px}
.tile{border:1px solid rgba(25,25,28,.08);box-shadow:0 12px 30px rgba(25,25,28,.05);padding:clamp(1.4rem,2.4vw,2.2rem);min-height:260px}
.tile h3{max-width:13em;font-size:clamp(1.35rem,2.2vw,2rem);line-height:1.03}
.tile p{line-height:1.65}
.wide,.panel,.cta{box-shadow:var(--shadow);border:1px solid rgba(25,25,28,.08)}
.wide{margin-top:clamp(4rem,8vw,8rem)}
.split{gap:18px}
.panel{min-height:460px}
.cta{margin-top:clamp(4rem,8vw,8rem)}
.feat-card{box-shadow:0 12px 34px rgba(25,25,28,.06);border-color:rgba(25,25,28,.1)}
.price-feats{display:grid;gap:.7rem}
.price-feat{line-height:1.5}
.prose{max-width:800px;padding-top:clamp(3rem,6vw,5rem);padding-bottom:clamp(3rem,6vw,5rem)}
.prose p,.prose li{font-size:1rem;line-height:1.8}
.prose h2{font-size:1.9rem;margin-top:3rem}
.prose h3{font-size:1.3rem}
.prose .updated{font-size:.85rem;color:var(--mute);border-bottom:1px solid var(--line);padding-bottom:1rem}
.fcard{border-radius:34px!important}
.foot{max-width:1440px;padding-left:clamp(8px,2vw,24px);padding-right:clamp(8px,2vw,24px)}
.f-cols{gap:2.5rem}
.f-cols h4{letter-spacing:.06em;text-transform:uppercase;font-size:.75rem;color:var(--fizz-d)}
.f-bot{font-size:.8rem}
.inner form.feat-card{box-shadow:var(--shadow)}
.inner input:not([type=checkbox]):not([type=hidden]),.inner select,.inner textarea{border-color:#d8d0c1!important}
@media(max-width:900px){.frame{border-radius:24px}.page-hero{padding-top:4rem}.hero{padding-top:3rem}.head{display:block}.head p{margin-top:1rem}.stage{min-height:420px}.panel{min-height:380px}}

.capability-directory{padding:clamp(5rem,10vw,10rem) 0 0}
.directory-intro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,7vw,8rem);align-items:end;margin-bottom:clamp(3rem,7vw,6rem)}
.directory-intro h2{margin-top:.7rem}
.directory-intro p{max-width:38em;color:var(--mute);font-size:1.08rem;line-height:1.75}
.capability-group{padding:clamp(2.5rem,5vw,5rem) 0;border-top:1px solid var(--line)}
.capability-group-head{display:grid;grid-template-columns:74px minmax(0,680px);gap:1.25rem;align-items:start;margin-bottom:2rem}
.capability-number{font-family:var(--disp);font-size:1.5rem;font-weight:800;color:var(--fizz)}
.capability-group-head h3{margin-top:.45rem;font-size:clamp(1.7rem,3vw,2.7rem);line-height:1}
.capability-group-head p{margin-top:.8rem;color:var(--mute);line-height:1.65}
.capability-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.capability-grid article{background:var(--surface);padding:1.4rem;min-height:170px}
.capability-grid h4{font-family:var(--body);font-size:1rem;font-weight:800;letter-spacing:-.01em}
.capability-grid p{margin-top:.55rem;color:var(--mute);font-size:.94rem;line-height:1.65}
.capability-grid-wide{grid-template-columns:repeat(3,1fr)}
.capability-group-dark{background:var(--coal);color:#fff;padding-left:clamp(1.2rem,3vw,3rem);padding-right:clamp(1.2rem,3vw,3rem);border-radius:34px;border-top:0;margin-top:1rem}
.capability-group-dark .capability-group-head p{color:#d6d3cc}
.capability-group-dark .capability-grid{background:#49494e;border-color:#49494e}
.capability-group-dark .capability-grid article{background:var(--coal2)}
.capability-group-dark .capability-grid p{color:#d6d3cc}
.capability-group-accent{background:#fff0e7;padding-left:clamp(1.2rem,3vw,3rem);padding-right:clamp(1.2rem,3vw,3rem);border-radius:34px;border-top:0;margin-top:1rem}
.capability-group-accent .capability-grid article{background:#fff8f2}
.capability-jump{display:flex;flex-wrap:wrap;gap:.55rem;padding:1.1rem 0;border-bottom:1px solid var(--line);justify-content:center}
.capability-jump a{border:1px solid var(--line);border-radius:999px;padding:.5rem .85rem;font-size:.82rem;font-weight:700;color:var(--mute);background:var(--surface)}
.capability-jump a:first-child{color:#fff;background:var(--coal);border-color:var(--coal)}
.capability-jump a:hover{color:var(--fizz-d);border-color:var(--fizz)}
@media(max-width:900px){.directory-intro{grid-template-columns:1fr;gap:1rem}.capability-grid,.capability-grid-wide{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.capability-group-head{grid-template-columns:48px 1fr;gap:.7rem}.capability-grid,.capability-grid-wide{grid-template-columns:1fr}.capability-grid article{min-height:0}.capability-group-dark,.capability-group-accent{border-radius:24px;margin-left:-.5rem;margin-right:-.5rem}}

/* Editorial feature layout: capabilities are read as stories, not a feature matrix. */
.capability-directory{padding-top:clamp(4rem,8vw,7rem)}
.directory-intro{max-width:980px;display:block;margin-bottom:clamp(2rem,5vw,4rem)}
.directory-intro p{max-width:46em;margin-top:1rem}
.capability-group,
.capability-group-dark,
.capability-group-accent{border-radius:0;margin:0;padding:clamp(3.2rem,7vw,6.5rem) 0;background:transparent;color:var(--ink)}
.capability-group:nth-of-type(even){border-top:0}
.capability-group-dark .capability-group-head p,
.capability-group-dark .capability-grid p{color:var(--mute)}
.capability-group-head{grid-template-columns:64px minmax(0,760px);margin-bottom:2.4rem}
.capability-group-head h3{font-size:clamp(2rem,4vw,3.4rem);text-transform:none;letter-spacing:-.04em}
.capability-group-head p{font-size:1.08rem;max-width:44em}
.capability-grid,
.capability-grid-wide{display:flex;flex-wrap:wrap;gap:0;background:transparent;border:0;border-radius:0;overflow:visible}
.capability-grid article{flex:1 1 45%;background:transparent!important;border-top:1px solid var(--line);padding:1.4rem 1.7rem 1.4rem 0;min-height:0}
.capability-grid article:nth-child(even){padding-left:1.7rem;padding-right:0;border-left:1px solid var(--line)}
.capability-grid h4{font-size:1.08rem}
.capability-grid p{max-width:34em}
.capability-group-dark{background:var(--coal);color:#fff;border-radius:32px;padding-left:clamp(1.5rem,5vw,4.5rem);padding-right:clamp(1.5rem,5vw,4.5rem);margin-top:2rem}
.capability-group-dark .capability-group-head p{color:#d6d3cc}
.capability-group-dark .capability-grid article{border-color:rgba(255,255,255,.25)}
.capability-group-dark .capability-grid p{color:#d6d3cc}
.capability-group-accent{background:#fff0e7;border-radius:32px;padding-left:clamp(1.5rem,5vw,4.5rem);padding-right:clamp(1.5rem,5vw,4.5rem);margin-top:2rem}
.capability-jump{justify-content:flex-start;gap:1.3rem;padding:1.2rem 0}
.capability-jump a{border:0;border-bottom:2px solid transparent;border-radius:0;padding:.3rem 0;background:transparent;color:var(--ink)}
.capability-jump a:first-child{color:var(--fizz-d);background:transparent;border-color:var(--fizz)}
.capability-jump a:hover{color:var(--fizz-d);border-color:var(--fizz)}
.tile{border-radius:22px}
.tile .tt h3{text-transform:none;letter-spacing:-.03em}
@media(max-width:600px){
  .capability-grid article{flex-basis:100%;padding:1.2rem 0!important;border-left:0!important}
  .capability-group-dark,.capability-group-accent{border-radius:22px}
}

/* Final visual system pass. Keep the warm Fizzy palette, but use one rhythm
   for editorial pages instead of mixing legacy card treatments. */
main#main:has(.capability-jump){max-width:1180px}
main#main:has(.capability-jump)>section:not(.page-hero){padding:clamp(3rem,6vw,5.5rem) 0;border-bottom:1px solid var(--line)}
main#main:has(.capability-jump)>section:not(.page-hero) .container{max-width:1080px}
main#main:has(.capability-jump)>.page-hero{max-width:1080px;margin:0 auto}
.capability-jump{position:sticky;top:0;z-index:4;background:rgba(255,250,242,.94);backdrop-filter:blur(14px);border-bottom:1px solid rgba(25,25,28,.12);padding:.9rem 0}
.capability-jump a{font-size:.78rem;letter-spacing:.01em}
main#main:has(.capability-jump)>section:nth-of-type(2) .grid-2,
main#main:has(.capability-jump)>section:nth-of-type(3) .grid-2{gap:clamp(2rem,7vw,7rem)}
main#main:has(.capability-jump) .grid-2>div:first-child h2,
main#main:has(.capability-jump) .grid-2>div:last-child h2{max-width:14ch}
main#main:has(.capability-jump) .feat-card{min-height:290px;border:1px solid rgba(25,25,28,.1);border-radius:30px;box-shadow:0 18px 45px rgba(25,25,28,.08);display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
main#main:has(.capability-jump) .feat-card::after{content:"";position:absolute;width:170px;height:170px;border-radius:50%;right:-45px;bottom:-55px;background:rgba(255,255,255,.42);box-shadow:-35px -22px 0 rgba(223,98,41,.12)}
main#main:has(.capability-jump) .feat-card>*{position:relative;z-index:1}
main#main:has(.capability-jump) .feat-illus{min-height:330px;border:1px solid rgba(25,25,28,.1);box-shadow:0 18px 45px rgba(25,25,28,.08)}
main#main:has(.capability-jump) .price-feat{display:flex;gap:.55rem;align-items:flex-start}
main#main:has(.capability-jump) .price-feat svg{flex:0 0 auto;margin-top:.25rem;color:var(--fizz-d)}
.capability-directory{padding-top:clamp(3rem,6vw,5rem)}
.capability-group{padding:clamp(2.8rem,5vw,4.8rem) 0}
.capability-group-head{margin-bottom:1.8rem}
.capability-grid article{padding-top:1.15rem;padding-bottom:1.15rem}
.capability-group-dark,.capability-group-accent{padding-top:clamp(2.2rem,4vw,3.8rem);padding-bottom:clamp(2.2rem,4vw,3.8rem)}
.faq{padding-top:clamp(3rem,6vw,5rem)!important}
.faq>div{max-width:860px;margin-top:1.5rem}
.faq details{border-top:1px solid var(--line);padding:1.15rem 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{font-weight:800;cursor:pointer}
@media(max-width:900px){
  .capability-jump{position:static;overflow:auto;flex-wrap:nowrap;justify-content:flex-start;white-space:nowrap;margin:0 -1rem;padding-left:1rem;padding-right:1rem}
  main#main:has(.capability-jump)>section:not(.page-hero){padding:3.5rem 0}
}
@media(max-width:600px){
  .frame{padding-left:16px;padding-right:16px}
  .page-hero{padding-top:2.8rem;padding-bottom:2.6rem}
  .page-hero h1{font-size:clamp(2.2rem,10vw,3rem);line-height:1.02}
  .page-hero p{font-size:1rem!important;line-height:1.55}
  main#main:has(.capability-jump) .feat-card,.feat-illus{min-height:250px}
  .capability-group-head{grid-template-columns:42px minmax(0,1fr)}
  .capability-group-head h3{font-size:clamp(1.8rem,9vw,2.5rem)}
  .capability-group-dark,.capability-group-accent{padding-top:2.6rem;padding-bottom:2.6rem;margin-top:1.6rem}
}

/* Solutions page art and long-form composition. */
.solutions-hero .container{max-width:1180px}
.solutions-hero .container.text-center{text-align:left;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.8fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.solutions-hero-copy{min-width:0}
.solutions-hero h1{max-width:900px;margin-left:0;margin-right:auto}
.solutions-hero{padding-top:clamp(3.2rem,6vw,5.2rem);padding-bottom:clamp(2.4rem,4vw,3.8rem)}
.solutions-hero h1{font-size:clamp(2.8rem,5.2vw,5rem);line-height:1}
.solutions-hero-art{height:330px;max-width:760px;width:100%;margin:0 auto;position:relative;background:linear-gradient(145deg,#ffd23f,#ffb36b);border:1px solid rgba(25,25,28,.12);border-radius:34px;overflow:hidden;box-shadow:0 22px 50px rgba(25,25,28,.12)}
.hero-art-orbit{position:absolute;width:480px;height:480px;border:1px dashed rgba(25,25,28,.3);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}
.hero-art-orbit:before,.hero-art-orbit:after{content:"";position:absolute;border-radius:50%;background:var(--fizz);width:12px;height:12px}
.hero-art-orbit:before{left:58px;top:80px}.hero-art-orbit:after{right:80px;bottom:95px;background:var(--mint)}
.hero-art-screen,.hero-art-ticket,.hero-art-phone{position:absolute;background:#fff;border:4px solid var(--ink);box-shadow:8px 10px 0 rgba(25,25,28,.16);text-align:left}
.hero-art-screen{width:310px;left:50%;top:38px;transform:translateX(-50%) rotate(-2deg);border-radius:18px;padding:1rem 1.15rem}
.hero-art-screen span{color:var(--fizz-d);font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em}
.hero-art-screen strong{display:block;font-family:var(--disp);font-size:1.55rem;margin:.5rem 0 .8rem}
.hero-art-screen i{display:block;height:10px;background:#ffe7d9;border-radius:10px;margin:.45rem 0;width:90%}
.hero-art-screen i:nth-of-type(2){width:68%;background:#ddf5ea}.hero-art-screen i:nth-of-type(3){width:78%;background:#ffe9b8}
.hero-art-ticket{left:8%;bottom:32px;width:180px;border-radius:14px;padding:.9rem;transform:rotate(5deg)}
.hero-art-ticket b,.hero-art-phone b{display:block;font-size:.8rem;text-transform:uppercase;color:var(--mute);letter-spacing:.08em}
.hero-art-ticket span{display:block;font-weight:800;margin:.35rem 0}.hero-art-ticket em{font-style:normal;color:var(--mint);font-size:.8rem;font-weight:800}
.hero-art-phone{right:8%;bottom:24px;width:170px;border-radius:18px;padding:.9rem;transform:rotate(-6deg);background:var(--coal);color:#fff}
.hero-art-phone b{color:var(--sun)}.hero-art-phone span{display:block;color:#d6d3cc;font-size:.8rem;margin:.3rem 0}.hero-art-phone strong{font-family:var(--disp);font-size:1.55rem}
.solutions-hero + .capability-jump{margin-top:0}
main#main:has(.solutions-hero)>section:not(.page-hero) .container{width:100%}
main#main:has(.solutions-hero)>section.section-alt{background:linear-gradient(180deg,rgba(244,239,229,.5),rgba(255,250,242,0));border-top:1px solid rgba(25,25,28,.06);border-bottom:1px solid rgba(25,25,28,.06)}
main#main:has(.solutions-hero)>section.section-alt .feat-illus{order:-1}
main#main:has(.solutions-hero) .grid-2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
main#main:has(.solutions-hero) .grid-2>div{min-width:0}
main#main:has(.solutions-hero) .feat-illus{align-self:stretch}
main#main:has(.solutions-hero) .feat-illus svg{max-height:300px}
main#main:has(.solutions-hero) .capability-group-dark{background:linear-gradient(145deg,#242329,#111217);box-shadow:0 24px 60px rgba(25,25,28,.18);color:#fff}
main#main:has(.solutions-hero) .capability-group-dark .capability-group-head p{color:#d8d5ce}
main#main:has(.solutions-hero) .cta-final{padding-top:clamp(4rem,8vw,7rem)}
main#main:has(.solutions-hero) .cta-band{box-shadow:0 20px 55px rgba(223,98,41,.2)}
main#main:has(.solutions-hero)>section:not(.page-hero){padding-top:clamp(3.2rem,5vw,4.8rem);padding-bottom:clamp(3.2rem,5vw,4.8rem)}
@media(max-width:900px){
  .solutions-hero .container.text-center{grid-template-columns:1fr;gap:2rem;text-align:center}
  .solutions-hero h1{margin-left:auto}
  .solutions-hero-art{height:245px}
  .hero-art-screen{width:260px}
  main#main:has(.solutions-hero) .grid-2{grid-template-columns:1fr}
  main#main:has(.solutions-hero)>section.section-alt .feat-illus{order:initial}
  main#main:has(.solutions-hero) .feat-illus{min-height:260px}
}
@media(max-width:600px){
  .solutions-hero{padding-top:2.8rem;padding-bottom:2.6rem}
  .solutions-hero h1{font-size:clamp(2.25rem,10vw,3.1rem)}
  .solutions-hero-art{height:220px;border-radius:24px;margin-top:1.8rem}
  .hero-art-orbit{width:350px;height:350px}
  .hero-art-screen{width:215px;top:28px;padding:.7rem;font-size:.85rem}
  .hero-art-screen strong{font-size:1.15rem;margin:.35rem 0 .5rem}
  .hero-art-ticket{left:3%;bottom:20px;width:130px;padding:.65rem;font-size:.78rem}
  .hero-art-phone{right:3%;bottom:14px;width:125px;padding:.65rem}.hero-art-phone strong{font-size:1.15rem}
}

/* ---------- unified icon-card system (replaces mismatched illustrated/flat tile split) ---------- */
.icon-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px;margin-top:.5rem}
.icon-card{border-radius:24px;padding:1.7rem;display:flex;flex-direction:column;gap:.9rem;min-height:190px;transition:transform .2s ease,box-shadow .2s ease}
.icon-card:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(25,25,28,.1)}
.icon-card .ic{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.7);flex-shrink:0}
.icon-card .tt h3{font-size:1.18rem;text-transform:none;letter-spacing:-.02em;margin-bottom:.4rem;line-height:1.15}
.icon-card .tt p{font-size:.92rem;line-height:1.55;color:var(--mute);margin:0;max-width:30em}
.icon-card.ic1,.icon-card.ic2,.icon-card.ic3,.icon-card.ic4,.icon-card.ic5{background:#FFFBF7;border:1px solid rgba(25,25,28,.08)}
.icon-card.ic1 .ic,.icon-card.ic2 .ic,.icon-card.ic3 .ic,.icon-card.ic4 .ic,.icon-card.ic5 .ic{background:#F3EFE6;color:var(--coal)}
.icon-card.ic6{background:var(--coal);color:#fff}
.icon-card.ic6 .ic{background:rgba(255,255,255,.12);color:var(--sun)}
.icon-card.ic6 .tt h3{color:#fff}.icon-card.ic6 .tt p{color:#C7C3BA}
@media(max-width:560px){.icon-grid{grid-template-columns:1fr}}

/* icon-hero: large centered icon replacing the old busy scene illustrations
   in features.html's alternating sections — same color tokens as .icon-card
   so this page and the homepage read as one consistent system. */
.icon-hero{border-radius:32px;padding:clamp(1.4rem,3.5vw,2.6rem);display:flex;align-items:center;justify-content:center;min-height:300px}
.icon-hero .ic{width:120px;height:120px;border-radius:28px;display:grid;place-items:center;background:rgba(255,255,255,.7)}
.icon-hero.ic1,.icon-hero.ic2,.icon-hero.ic3,.icon-hero.ic4,.icon-hero.ic5{background:#FFFBF7;border:1px solid rgba(25,25,28,.08)}
.icon-hero.ic1 .ic,.icon-hero.ic2 .ic,.icon-hero.ic3 .ic,.icon-hero.ic4 .ic,.icon-hero.ic5 .ic{background:#F3EFE6;color:var(--coal)}
.icon-hero.ic6{background:var(--coal)}.icon-hero.ic6 .ic{background:rgba(255,255,255,.12);color:var(--sun)}
main#main:has(.capability-jump) .icon-hero{min-height:330px;border:1px solid rgba(25,25,28,.06)}

/* Give the capability directory the same pastel language as the rest of the
   page instead of stark white cards — this was the "two different pages
   stapled together" seam between the illustrated sections above and the
   plain spec-sheet list below. */
.capability-group{background:#FFFBF7;border:1px solid rgba(25,25,28,.07);border-radius:28px;padding:clamp(1.4rem,3vw,2.2rem);margin-bottom:1.4rem}
.capability-group-dark{background:var(--coal)!important;border:0!important}
.capability-group-accent{background:#FFEADB!important;border:0!important}
/* NOTE: an earlier rule sets .capability-grid article background with
   !important (flex/divider-list layout) — that wins regardless of source
   order, so article backgrounds are intentionally left alone here. The
   group-level tint above is what carries the colour. */

/* Homepage hero art — replaces the old densely-illustrated scene with the
   same simple floating-card language already used on features.html's hero,
   so both hero sections (and the rest of the site) read as one system. */
.home-hero-art{position:relative;height:460px;background:linear-gradient(145deg,#ffd23f,#ffb36b);border:1px solid rgba(25,25,28,.12);border-radius:40px;overflow:hidden;box-shadow:0 22px 50px rgba(25,25,28,.12);margin-top:2rem}
.home-hero-art .hero-art-orbit{width:640px;height:640px}
.home-hero-art .hero-art-screen{width:340px;top:60px}
.home-hero-art .hero-art-ticket{left:9%;bottom:60px}
.home-hero-art .hero-art-phone{right:9%;bottom:48px}
@media(max-width:900px){.home-hero-art{height:380px;margin-top:2.4rem}}
@media(max-width:600px){.home-hero-art{height:260px;border-radius:26px}.home-hero-art .hero-art-screen{width:230px;top:30px;padding:.75rem}.home-hero-art .hero-art-ticket{left:4%;bottom:22px;width:130px;padding:.65rem;font-size:.78rem}.home-hero-art .hero-art-phone{right:4%;bottom:16px;width:125px;padding:.65rem}}

/* Panel icon — replaces the old illustrated phone/map scenes in the
   Expenses and Multi-outlet panels with the same simple icon language used
   throughout the rest of the site. */
.panel-ic{position:absolute;right:6%;bottom:6%;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.55);display:grid;place-items:center;color:var(--ink)}
.pa .panel-ic{color:var(--fizz-d)}
.pb .panel-ic{color:var(--mint)}
@media(max-width:900px){.panel-ic{width:90px;height:90px;right:5%;bottom:5%}.panel-ic svg{width:60px;height:60px}}

/* ---------- standout differentiators (client-requested: explicitly framed
   against generic POS features, not just another feature grid) ---------- */
.standout-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.4rem 2rem;margin-top:2.2rem}
.standout-item{border-left:3px solid var(--fizz);padding-left:1.1rem}
.standout-item h4{font-family:var(--disp);font-weight:800;font-size:1.05rem;text-transform:none;letter-spacing:-.01em;margin-bottom:.45rem;line-height:1.2}
.standout-item p{font-size:.92rem;line-height:1.55;color:var(--mute);margin:0}
@media(max-width:560px){.standout-grid{grid-template-columns:1fr}}

/* ---- Redesign pass: stat bar + proof rows + product mockups (Ramp/Toast-inspired restraint) ---- */
.stat-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.6rem;background:var(--coal);border-radius:32px;padding:clamp(1.6rem,3.5vw,2.6rem) clamp(1.4rem,3vw,2.4rem);margin-top:clamp(2.5rem,5vw,4rem);color:#fff}
.stat-bar div{border-left:1px solid rgba(255,255,255,.14);padding-left:1.3rem}
.stat-bar div:first-child{border-left:0;padding-left:0}
.stat-bar b{display:block;font-family:var(--disp);font-weight:800;font-size:clamp(1.6rem,3vw,2.1rem);line-height:1}
.stat-bar span{display:block;margin-top:.4rem;font-size:.85rem;color:#C7C3BA;font-weight:600}
@media(max-width:700px){.stat-bar{grid-template-columns:1fr 1fr}.stat-bar div{border-left:0;padding-left:0}}

.proof{padding:clamp(3rem,6vw,5rem) 0;border-top:1px solid var(--line)}
.proof:first-of-type{border-top:0}
.proof .grid-2{align-items:center}
.proof-copy .eyebrow{margin-bottom:.9rem}
.proof-copy h2{margin-top:0}
.proof-copy p{margin-top:1rem;color:var(--mute);max-width:32em}
.proof-visual{background:#FFFBF7;border:1px solid rgba(25,25,28,.08);border-radius:32px;padding:clamp(2rem,5vw,3rem);min-height:360px;display:flex;align-items:center;justify-content:center}
.proof.alt .grid-2{direction:rtl}
.proof.alt .grid-2>*{direction:ltr}
@media(max-width:900px){.proof.alt .grid-2{direction:ltr}}

.mock-brands{width:100%;max-width:320px;background:#fff;border-radius:20px;box-shadow:0 20px 44px rgba(25,25,28,.12);overflow:hidden}
.mock-brands header{padding:1rem 1.2rem;font-weight:700;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;font-size:.82rem;color:var(--mute)}
.mock-brands .brow{display:flex;align-items:center;gap:.8rem;padding:.9rem 1.2rem;border-bottom:1px solid var(--line);font-weight:700;font-size:.95rem}
.mock-brands .brow:last-child{border-bottom:0}
.mock-brands .brow.active{background:#FFF1E8}
.mock-brands .dot{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:#fff;font-family:var(--disp);font-weight:800;font-size:.9rem;flex:none}
.mock-brands small{display:block;font-weight:500;color:var(--mute);font-size:.76rem;margin-top:.1rem}

.mock-wa{width:100%;max-width:290px;background:#fff;border-radius:26px;box-shadow:0 20px 44px rgba(25,25,28,.12);padding:1.2rem;border:1px solid var(--line)}
.mock-wa .wa-h{display:flex;align-items:center;gap:.6rem;font-weight:700;padding-bottom:.8rem;border-bottom:1px solid var(--line);margin-bottom:1rem;font-size:.88rem}
.mock-wa .wa-h i{width:30px;height:30px;border-radius:50%;background:#25D366;display:grid;place-items:center;color:#fff;font-style:normal;font-weight:800}
.mock-wa .bub{background:#F3EFE6;border-radius:14px;padding:.9rem 1.1rem;font-size:.88rem;font-weight:600}
.mock-wa .bub b{display:block;font-family:var(--disp);font-size:1.5rem;margin-top:.5rem;font-weight:800}
.mock-wa .paid{margin-top:.8rem;display:inline-flex;align-items:center;gap:.4rem;background:var(--mintbg);color:var(--mint);font-weight:700;font-size:.78rem;padding:.35rem .75rem;border-radius:99px}

.mock-guest{width:100%;max-width:300px;background:#fff;border-radius:24px;box-shadow:0 20px 44px rgba(25,25,28,.12);padding:1.3rem;border:1px solid var(--line)}
.mock-guest .gh{display:flex;align-items:center;gap:.8rem;margin-bottom:1.1rem}
.mock-guest .av{width:46px;height:46px;border-radius:50%;background:var(--fizz);color:#fff;display:grid;place-items:center;font-family:var(--disp);font-weight:800;flex:none}
.mock-guest .gh b{font-size:1rem}
.mock-guest .gh small{display:block;color:var(--mute);font-size:.78rem;margin-top:.15rem}
.mock-guest .tags{display:flex;flex-wrap:wrap;gap:.45rem}
.mock-guest .tag{font-size:.78rem}
.mock-guest .tag.like{background:var(--mintbg);color:var(--mint)}
.mock-guest .tag.dislike{background:#FDE2E2;color:#B3261E}

.lite-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:.5rem}
.lite-card{background:#FFFBF7;border:1px solid rgba(25,25,28,.08);border-radius:18px;padding:1.2rem;display:flex;gap:.85rem;align-items:flex-start}
.lite-card .ic{width:38px;height:38px;border-radius:10px;background:#F3EFE6;color:var(--coal);display:grid;place-items:center;flex:none}
.lite-card h4{font-size:.98rem;font-weight:700;margin-bottom:.3rem;letter-spacing:-.01em}
.lite-card p{font-size:.84rem;color:var(--mute);line-height:1.5;margin:0}
@media(max-width:560px){.lite-grid{grid-template-columns:1fr}}

.split .pa{background:#FFFBF7;border:1px solid rgba(25,25,28,.08)}
.split .pa .panel-ic{color:var(--fizz-d);background:rgba(223,98,41,.08)}
.split .pb{background:var(--coal);color:#fff}
.split .pb p{color:#C7C3BA}
.split .pb .roles span{background:rgba(255,255,255,.1);color:#fff}
.split .pb .panel-ic{color:var(--sun);background:rgba(255,255,255,.08)}

main#main>.hero .stage{background:linear-gradient(150deg,#FFD23F,#FFB36B);min-height:560px;margin-top:0;border:0;box-shadow:none;overflow:visible}
@media(max-width:900px){main#main>.hero .stage{min-height:420px}}

.split .roles{max-width:20em}

/* =========================================================================
   Full redesign pass — flat, edge-to-edge, confident (Ramp + SevenRooms
   references): kill the "framed card floating on a gradient" look, drop
   forced uppercase headlines, flatten buttons, quiet the footer.
   Uses !important only where an earlier "rev" layer set the same property
   with higher selector specificity (e.g. main#main:has(...) .frame) that
   source order alone can't beat.
   ========================================================================= */
html,body{background:#FFFEFB!important;overflow-x:hidden;max-width:100%}
.wrap{max-width:1280px!important;padding:0 clamp(16px,3vw,32px)!important}
.frame{background:transparent!important;border-radius:0!important;box-shadow:none!important;border:0!important;padding:0!important}
nav{padding:1.5rem 0!important;border-bottom:1px solid rgba(25,25,28,.08)}
.inner{padding-top:0!important}

h1,h2,h3{text-transform:none!important;letter-spacing:-.025em!important;font-weight:700!important}
h1{font-size:clamp(2.6rem,5.6vw,5rem)!important;font-weight:700!important}
h2{font-size:clamp(1.9rem,3.8vw,3.1rem)!important;font-weight:700!important}
h3{font-size:1.4rem!important;font-weight:700!important}
.f-word{text-transform:none!important}

.btn{border-radius:10px!important;box-shadow:none!important;font-weight:600!important;border:1px solid transparent}
.btn-fizz,.btn-go{background:var(--coal)!important;color:#fff!important;box-shadow:none!important}
.btn-fizz:hover,.btn-go:hover{background:#000!important;filter:none!important;transform:translateY(-1px)}
.btn-go .arr{background:rgba(255,255,255,.18)!important;color:#fff!important}
.btn-line{border-color:rgba(25,25,28,.2)!important;background:transparent!important}
.btn-line:hover{border-color:var(--coal)!important;background:transparent!important}
nav .btn-line:hover{background:transparent!important;color:var(--coal)!important}

.stage{box-shadow:none!important;border:1px solid rgba(25,25,28,.08)!important}
.eyebrow{border:1px solid rgba(25,25,28,.1);box-shadow:none}

/* quiet, flat footer — no illustrated card, modest wordmark */
.fcard{background:#F4F1E9!important;border-radius:28px!important;padding:clamp(2.2rem,4vw,3.6rem) clamp(1.4rem,4vw,3.2rem) 1.6rem!important}
.f-brand p{color:var(--mute)!important;font-weight:500!important;font-size:1rem!important}
.f-cols h4{font-size:.85rem!important;text-transform:uppercase;letter-spacing:.06em;color:var(--mute);font-weight:700!important}
.f-cols a{color:var(--ink)!important}
.mail{border-bottom-color:rgba(25,25,28,.25)!important}
.f-word{font-size:clamp(2.6rem,8vw,6rem)!important;line-height:1!important;margin-top:clamp(1.6rem,3vw,2.6rem)!important;background:none!important;-webkit-text-fill-color:initial!important;color:rgba(25,25,28,.12)!important}
.f-bot{position:static!important;background:none!important;color:var(--mute)!important;border-top:1px solid rgba(25,25,28,.1);padding:1.2rem 0 0!important;margin-top:1rem}
.totop{color:var(--mute)!important}.totop:hover{color:var(--coal)!important}

@media(max-width:900px){.wrap{padding:0 16px!important}}

/* ---- Content-architecture pass: flat Ramp-style feature list, de-duplication ---- */
.feat-list{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem 2.2rem;margin-top:1rem}
.feat-row{display:flex;flex-direction:column;gap:.7rem}
.feat-row .ic{width:40px;height:40px;border-radius:11px;background:#F3EFE6;color:var(--coal);display:grid;place-items:center;flex:none}
.feat-row h4{font-size:1.05rem;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.feat-row p{font-size:.92rem;color:var(--mute);line-height:1.55;margin:0}
@media(max-width:900px){.feat-list{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.feat-list{grid-template-columns:1fr}}

.also-strip{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.also-strip span{display:inline-flex;align-items:center;gap:.5rem;background:#FFFBF7;border:1px solid rgba(25,25,28,.08);border-radius:99px;padding:.55rem 1.05rem;font-weight:600;font-size:.88rem;color:var(--mute)}
.also-strip svg{flex:none;color:var(--coal)}

.mock-expense{width:100%;max-width:280px;background:#fff;border-radius:24px;box-shadow:0 20px 44px rgba(25,25,28,.12);padding:1.2rem;border:1px solid var(--line)}
.mock-expense .ex-top{display:flex;align-items:center;gap:.7rem;padding-bottom:.9rem;border-bottom:1px solid var(--line);margin-bottom:.9rem;font-weight:700;font-size:.9rem}
.mock-expense .ex-top i{width:32px;height:32px;border-radius:9px;background:#FFF1E8;color:var(--fizz-d);display:grid;place-items:center;font-style:normal}
.mock-expense .ex-row{display:flex;justify-content:space-between;font-size:.85rem;font-weight:600;padding:.45rem 0;border-bottom:1px dashed var(--line)}
.mock-expense .ex-row small{display:block;font-weight:500;color:var(--mute);font-size:.75rem}
.mock-expense .ex-total{margin-top:.9rem;background:var(--coal);color:#fff;border-radius:14px;padding:.8rem 1rem;display:flex;justify-content:space-between;font-weight:700}
.mock-expense .ex-total b{font-family:var(--disp);font-size:1.3rem}

/* contact/legal cards — flatten to match the rest of the flat redesign */
.feat-card{box-shadow:none!important;border:1px solid rgba(25,25,28,.1)!important;border-radius:20px!important}
.inner form.feat-card{box-shadow:none!important}
main#main:has(.capability-jump) .feat-card{box-shadow:none!important}
.feat-icon{background:#F3EFE6!important;color:var(--coal)!important}
.contact-info{border:1px solid rgba(25,25,28,.1);border-radius:20px;padding:.4rem 1.6rem}
.contact-info .ci-row{display:flex;gap:1rem;align-items:center;padding:1.3rem 0;border-bottom:1px solid rgba(25,25,28,.08)}
.contact-info .ci-row:last-child{border-bottom:0}
.contact-info .ci-row .ic{width:42px;height:42px;border-radius:11px;background:#F3EFE6;color:var(--coal);display:grid;place-items:center;flex:none}
.contact-info .ci-row h3{font-size:1rem;margin-bottom:.15rem}

/* blog cards — match the restrained neutral palette, no shadow */
.blog-card{box-shadow:none!important;border:1px solid rgba(25,25,28,.1)!important}
.blog-card-img{background:#FFFBF7!important;color:var(--coal)!important;height:110px!important}
.blog-card:nth-child(3n+2) .blog-card-img,.blog-card:nth-child(3n) .blog-card-img,.blog-card:nth-child(3n+1) .blog-card-img{background:#FFFBF7!important;color:var(--coal)!important}
.blog-card .blog-cat{background:#F3EFE6!important;color:var(--coal)!important}

/* ---- Mobile/tablet pass: the .stage mockup's fanned absolute-position cards
   are sized by percentage of .stage's own width. That's fine on desktop where
   .stage is half the hero's width, but once the hero collapses to one column
   at <=900px, .stage becomes nearly the full viewport width, so the same
   percentage offsets (right:-6%, left:-5%, etc.) bleed by a much larger
   absolute number of pixels — overflowing the viewport and overlapping the
   copy above it. Simplest robust fix: drop the fan entirely below 900px and
   stack the three cards as plain, full-width, non-overlapping blocks. ---- */
@media(max-width:900px){
  main#main>.hero .stage{background:none!important;overflow:visible;min-height:0;margin-top:1.6rem;display:flex;flex-direction:column;gap:12px}
  .stage .pos,.stage .kds,.stage .off{position:static!important;width:100%!important;max-width:100%!important;left:auto!important;right:auto!important;bottom:auto!important;top:auto!important;transform:none!important;margin:0!important}
  .stage .pos{border-radius:18px;border-width:6px}
  .stage .kds{border-radius:16px}
  .stage .off{border-radius:16px;justify-content:center}
}
@media(max-width:560px){
  .row{font-size:.82rem;padding:.6rem .8rem}
  .pay{margin:.7rem;padding:.7rem .9rem}
  .pay b{font-size:1.3rem}
  .stat-bar{grid-template-columns:1fr}
  .stat-bar div{border-left:0!important;padding-left:0!important;border-top:1px solid rgba(255,255,255,.14);padding-top:1rem}
  .stat-bar div:first-child{border-top:0;padding-top:0}
  .proof-visual{padding:1.6rem}
}

/* nav still overflows on very narrow phones even after the existing 520px
   shrink pass — collapse "Get started" to its icon only (CSS-only, no
   markup change) so brand + icon-button + Menu toggle always fit. */
@media(max-width:400px){
  nav .btn-go{font-size:0;padding:.6rem;gap:0}
  nav .btn-go .arr{display:grid!important}
}

/* dark/accent capability cards on mobile: remove the edge-bleed negative
   margin (made corners sit almost flush with the device edge, reading as
   "sharp"), round them more generously, and give the text real breathing
   room from the rounded corners instead of the desktop clamp() value. */
@media(max-width:600px){
  .capability-group-dark,.capability-group-accent{
    border-radius:28px!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-left:1.6rem!important;
    padding-right:1.6rem!important;
  }
}

/* Final, unambiguous spacing for dark/accent capability cards at every
   width — earlier layers in this file fight over padding on this element
   (it carries both .capability-group and .capability-group-dark), landing
   on the clamp()'s minimum regardless of viewport. Pin it explicitly. */
.capability-group-dark,.capability-group-accent{
  padding-top:3.2rem!important;
  padding-bottom:3.2rem!important;
  padding-left:clamp(1.6rem,4vw,3.5rem)!important;
  padding-right:clamp(1.6rem,4vw,3.5rem)!important;
  border-radius:28px!important;
}
@media(max-width:600px){
  .capability-group-dark,.capability-group-accent{
    padding-top:2.4rem!important;
    padding-bottom:2.4rem!important;
    padding-left:1.4rem!important;
    padding-right:1.4rem!important;
    border-radius:24px!important;
    margin-left:0!important;
    margin-right:0!important;
  }
}

/* .capability-grid article: the left/right-column articles had 0 padding on
   their outer edge (relying entirely on the parent card's own padding),
   which read as text touching the border, especially between columns at
   the shared divider. Give every article real padding on all four sides. */
.capability-grid article{padding:1.4rem 1.6rem!important}
.capability-grid article:nth-child(even){padding-left:1.6rem!important}
@media(max-width:600px){
  .capability-grid article{padding:1.3rem .9rem!important}
}

.f-addr{font-size:.82rem!important;font-weight:500!important;color:var(--mute)!important;margin:-1.1rem 0 1.4rem!important;max-width:26em}