:root{color-scheme:light;--ink:#101d36;--muted:#4a586d;--blue:#1b4bc6;--bright:#2455e6;--line:#dce4f1;--wash:#f3f6fd;--white:#fff;--radius:1.25rem;font:100%/1.6 system-ui,-apple-system,"Segoe UI",sans-serif;scroll-behavior:smooth}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;color:var(--ink);background:#fbfcff}
body,h1,h2,h3,p,figure,ul{margin:0}
a{color:var(--blue);text-underline-offset:.23em}
a:focus-visible,summary:focus-visible{outline:3px solid #5477f3;outline-offset:4px;border-radius:.25rem}
img{display:block;max-width:100%}
svg{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex:none}
.wrap{width:min(72rem,100% - 3rem);margin-inline:auto}
.skip{position:absolute;top:.5rem;left:.5rem;z-index:2;transform:translateY(-200%);background:#fff;padding:.75rem}
.skip:focus{transform:none}
.site-header{background:#fbfcff;border-bottom:1px solid var(--line)}
.header-inner,.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:1.4rem}
.header-inner{min-height:4.75rem}
.brand{display:inline-flex;align-items:center;gap:.65rem;font-size:1.38rem;font-weight:800;letter-spacing:-.045em;text-decoration:none;color:var(--ink);white-space:nowrap}
.brand img{border-radius:.52rem}
.brand-dot{color:var(--bright)}
nav{display:flex;align-items:center;gap:1.75rem;font-size:.925rem}
nav a,.text-link,.site-footer a:last-child{text-decoration:none;font-weight:650}
nav a{color:var(--muted)}
nav a:hover,.text-link:hover,.site-footer a:last-child:hover{text-decoration:underline}
.button{display:inline-flex;justify-content:center;align-items:center;gap:.5rem;min-height:3rem;padding:.65rem 1.12rem;color:#fff;background:var(--blue);border:1px solid transparent;border-radius:.68rem;font-weight:700;text-decoration:none;line-height:1.3}
.button:hover{background:#143da8}
.button.small{min-height:2.5rem;padding:.45rem .95rem;font-size:.9rem}
.hero{display:grid;grid-template-columns:1.02fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center;padding-block:clamp(3.5rem,8vw,6.8rem)}
.eyebrow{display:flex;align-items:center;gap:.52rem;color:var(--blue);font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;line-height:1.4}
.signal{width:.5rem;height:.5rem;background:#1caa93;border-radius:50%;box-shadow:0 0 0 3px #dbf4ef}
h1,h2,h3{line-height:1.08;letter-spacing:-.042em}
h1{margin-block:1.1rem 1.2rem;font-size:clamp(3.05rem,6.05vw,5.4rem);font-weight:810}
h1 em{display:block;color:var(--blue);font-style:normal}
h2{font-size:clamp(2rem,4.1vw,3.35rem);font-weight:780;margin-block:.6rem 1.4rem}
h3{font-size:1.42rem;font-weight:750}
.intro{color:var(--muted);font-size:clamp(1rem,1.55vw,1.16rem);max-width:34rem}
.actions{display:flex;align-items:center;gap:1.15rem;flex-wrap:wrap;margin-block:1.75rem}
.text-link{font-size:.95rem}
.hero-facts{display:flex;flex-wrap:wrap;gap:.45rem 1.2rem;list-style:none;padding:0;color:var(--muted);font-size:.85rem}
.hero-facts li{display:flex;align-items:center;gap:.4rem}
.hero-facts li::before{content:"";width:.35rem;height:.35rem;border-radius:50%;background:#1b8d81}
.preview{min-width:0}
.preview-frame{overflow:hidden;border:1px solid #d2def3;background:#fff;border-radius:1.2rem;box-shadow:0 1.3rem 3rem #254ba322}
.preview-top{display:flex;align-items:center;justify-content:space-between;gap:.65rem;background:#122343;color:#f7faff;padding:.8rem 1rem;font-weight:700;font-size:.87rem}
.preview-top i{display:inline-block;width:.5rem;height:.5rem;background:#78a0ff;border-radius:50%;margin-right:.3rem}
.preview-live{border-radius:99rem;background:#d9f6eb;color:#125c4b;padding:.22rem .55rem;font-size:.66rem;white-space:nowrap}
.preview-body{display:grid;grid-template-columns:1.2fr 1fr;gap:.85rem;padding:1rem;background:#f1f5fd}
.preview-catalog{min-width:0}
.preview-label{font-size:.6rem;font-weight:800;letter-spacing:.09em;color:var(--blue)}
.preview-title{font-size:clamp(1rem,2.5vw,1.65rem);font-weight:800;letter-spacing:-.04em;line-height:1.15;margin-block:.16rem .64rem}
.preview-search{display:flex;align-items:center;gap:.34rem;background:white;border:1px solid #dce5f4;border-radius:.46rem;padding:.36rem .5rem;color:var(--muted);font-size:.65rem}
.preview-products{display:grid;grid-template-columns:1fr 1fr;gap:.46rem;margin-top:.55rem}
.preview-products>div{display:grid;gap:.12rem;min-width:0;background:#fff;border:1px solid #dce5f4;border-radius:.5rem;padding:.46rem;font-size:.68rem;line-height:1.25}
.product-mark{display:grid;place-items:center;width:1.45rem;height:1.45rem;border-radius:.35rem;font-weight:800}
.water{background:#dfebff;color:#1748bd}.bread{background:#faecd9;color:#79480e}.milk{background:#e7f5ec;color:#24623e}.rice{background:#ece8fc;color:#5d3f99}
.preview-ticket{display:flex;flex-direction:column;gap:.55rem;min-width:0;background:#fff;border:1px solid #dce5f4;border-radius:.65rem;padding:.65rem;font-size:.66rem}
.preview-ticket-title{font-size:.82rem;font-weight:800;line-height:1.2;padding-bottom:.35rem;border-bottom:1px solid var(--line)}
.preview-ticket>div,.preview-pay{display:flex;justify-content:space-between;gap:.35rem}
.preview-total{margin-top:auto;padding-top:.35rem;border-top:1px solid var(--line);align-items:center}
.preview-total b{font-size:clamp(.9rem,2.2vw,1.25rem)}
.preview-pay{color:#fff;background:var(--blue);font-weight:700;padding:.42rem .48rem;border-radius:.4rem}
figcaption{text-align:right;margin-top:.72rem;color:var(--muted);font-size:.73rem}
.section{padding-block:clamp(3rem,6vw,5.5rem);scroll-margin-top:1rem}
.features{background:var(--wash);border-block:1px solid var(--line)}
.feature-grid,.plan-grid{display:grid;gap:1rem}
.feature-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.feature,.plan{padding:clamp(1.15rem,2.5vw,1.75rem);border:1px solid var(--line);border-radius:var(--radius);background:white}
.feature-icon{display:grid;place-items:center;width:2.7rem;height:2.7rem;margin-bottom:1rem;border-radius:.75rem;color:var(--blue);background:#e9efff}
.feature p,.plan p,.help>div>p:last-child,.faq p{color:var(--muted);margin-top:.65rem}
.plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.plan h3{font-size:clamp(1.5rem,3vw,2.25rem)}
.plan .plan-tag{display:inline-block;margin:0 0 .7rem;padding:.2rem .62rem;border-radius:99rem;color:#1b4bc6;background:#ecf1ff;font-size:.75rem;font-weight:750}
.plan ul{margin-top:1rem;padding-left:1.2rem;color:var(--muted)}
.plan ul li+li{margin-top:.3rem}
.plan-plus{background:#162749;border-color:#162749;color:white}
.plan-plus p,.plan-plus ul{color:#e1e9f8}
.plan-plus .plan-tag{background:#d8e4ff;color:#1b3d8a}
.download{display:flex;justify-content:space-between;align-items:center;gap:1.4rem;padding:clamp(1.4rem,4vw,3rem);border:1px solid #d3dff8;border-radius:var(--radius);background:#eaf0ff;scroll-margin-top:1rem}
.download h2{font-size:clamp(1.8rem,3.8vw,3rem);margin-bottom:.65rem}
.download-copy>p:last-child{max-width:33rem;color:var(--muted)}
.download-action{flex:none;text-align:center}
.download-action p,.checksum{font-size:.8rem;margin-top:.5rem}
.checksum{display:inline-block;font-weight:650}
.help{display:grid;grid-template-columns:1fr 1.35fr;gap:2rem;align-items:start}
.help h2{margin-bottom:.6rem}
.faq{display:grid;gap:.55rem}
.faq details{background:white;border:1px solid var(--line);border-radius:.7rem;padding:.85rem 1rem}
.faq summary{cursor:pointer;font-weight:700}
.site-footer{border-top:1px solid var(--line);background:var(--wash);padding-block:1.5rem}
.site-footer p{font-size:.85rem;color:var(--muted)}
.site-footer a:last-child{font-size:.9rem}
@media(max-width:55rem){.hero{gap:1.6rem}.preview-body{padding:.65rem;gap:.45rem}.feature-grid{gap:.65rem}.feature,.plan{padding:1rem}}
@media(max-width:44rem){.wrap{width:min(100% - 2rem,34rem)}.hero,.help{grid-template-columns:1fr}.hero{padding-top:2.75rem}.feature-grid,.plan-grid{grid-template-columns:1fr}.feature-grid,.plan-grid{gap:.75rem}.download{align-items:flex-start;flex-direction:column}.download-action{text-align:left}.header-inner{flex-wrap:wrap;gap:.65rem;padding-block:.7rem;min-height:0}nav{order:3;width:100%;gap:1.25rem;font-size:.87rem}.footer-inner{flex-wrap:wrap;gap:.55rem 1rem}.site-footer p{order:3;width:100%}.preview-body{padding:.85rem;gap:.7rem}}
@media(max-width:24rem){.wrap{width:calc(100% - 1.5rem)}.preview-body{gap:.4rem;padding:.5rem}.preview-ticket{padding:.45rem}.preview-products>div{padding:.32rem}.preview-top{padding:.65rem}.hero-facts{gap:.3rem .65rem}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}}