@import url('fonts.css');

:root{
  --ink:#1c3029;
  --muted:#58655e;
  --paper:#fcfaf5;
  --orange:#d64d2d;
  --line:#dedfd5;
  --serif:Georgia,serif}
*{
  box-sizing:border-box}
html{
  scroll-behavior:smooth;
  scroll-padding-top:30px}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:16px/1.6 'DM Sans',system-ui,sans-serif}
a{
  color:inherit;
  text-decoration:none}
button,input{
  font:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:3px solid var(--orange);
  outline-offset:5px}
h1,h2,h3,p{
  margin-top:0}
h1,h2,h3{
  font-family:Manrope,system-ui,sans-serif;
  line-height:1.12;
  letter-spacing:-.055em}
h1{
  font-size:clamp(46px,5.8vw,82px);
  font-weight:600;
  margin-bottom:27px}
h1 em{
  font-family:var(--serif);
  font-weight:400;
  color:var(--orange)}
h2{
  font-size:clamp(32px,4vw,51px);
  font-weight:600}
h3{
  font-size:23px;
  letter-spacing:-.035em}
p{
  color:var(--muted)}
.wrap{
  width:min(1200px,calc(100% - 80px));
  margin-inline:auto}
.site-header{
  max-width:1440px;
  margin:auto;
  min-height:95px;
  padding:24px 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  border-bottom:1px solid var(--line)}
.brand{
  font-family:Manrope,system-ui;
  font-size:26px;
  letter-spacing:-1.5px;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  gap:9px}
.brand-mark{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  background:var(--orange);
  color:white;
  border-radius:10px;
  font:italic bold 30px var(--serif);
  padding-bottom:4px}
.site-header nav,.header-actions{
  display:flex;
  align-items:center;
  gap:27px}
.site-header nav a,.header-actions>a{
  font-size:13px;
  font-weight:600}
.site-header nav a:hover,.text-link:hover{
  text-decoration:underline}
.button{
  border:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:23px;
  background:var(--orange);
  color:white;
  border-radius:7px;
  padding:17px 24px;
  line-height:1.3;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  transition:background .2s,transform .2s}
.button:hover{
  background:#b63e23;
  transform:translateY(-1px)}
.button.small{
  padding:13px 17px;
  font-size:12px}
.button.light{
  background:var(--paper);
  color:var(--ink)}
.button:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none}
.hero{
  padding-block:76px 56px;
  display:grid;
  grid-template-columns:1.07fr 1fr;
  gap:35px;
  align-items:center}
.eyebrow{
  font-size:10px;
  letter-spacing:1.7px;
  font-weight:700;
  color:var(--ink);
  margin-bottom:23px}
.hero-description{
  max-width:455px;
  font-size:17px;
  line-height:1.75}
.hero-actions{
  display:flex;
  align-items:center;
  gap:25px;
  margin-top:30px}
.text-link{
  display:inline-flex;
  gap:15px;
  font-size:13px;
  font-weight:700}
.reassurance{
  font-size:11px;
  margin-top:17px}
.audience-line{
  border-top:1px solid var(--line);
  margin-top:43px;
  padding-top:21px;
  font-size:8px;
  letter-spacing:1px;
  color:var(--muted);
  font-weight:700}
.hero-scene{
  position:relative;
  min-height:515px;
  background:#eee8db;
  border-radius:125px 125px 12px 12px;
  isolation:isolate}
.scene-label{
  position:absolute;
  top:36px;
  left:43px;
  letter-spacing:1.8px;
  line-height:1.8;
  font-size:8px;
  font-weight:700}
.coffee-art{
  position:absolute;
  right:10px;
  top:40px;
  transform:rotate(12deg);
  width:220px;
  height:215px}
.saucer{
  position:absolute;
  top:15px;
  right:0;
  width:205px;
  height:205px;
  background:radial-gradient(circle at 35% 28%,#fdfcf8,#ded6c8 75%);
  border:1px solid #d6cbb8;
  border-radius:50%;
  box-shadow:10px 17px 20px #4d3e251a}
.cup{
  width:140px;
  height:140px;
  margin:28px;
  border:12px solid #faf8f1;
  border-radius:50%;
  box-shadow:4px 10px 13px #493b2733;
  position:relative;
  background:#b4783c}
.cup:after{
  content:'';
  position:absolute;
  right:-44px;
  top:32px;
  width:35px;
  height:25px;
  border:9px solid #faf8f1;
  border-radius:12px;
  z-index:-1}
.coffee{
  border-radius:50%;
  height:100%;
  display:grid;
  place-items:center;
  background:radial-gradient(ellipse,#bc8050,#8e572b);
  font:88px/1 Georgia;
  color:#f2d8a5;
  transform:rotate(-25deg)}
.coffee-art>span{
  position:absolute;
  top:225px;
  left:60px;
  font:italic 13px var(--serif);
  white-space:nowrap}
.menu-preview{
  position:absolute;
  left:35px;
  top:104px;
  width:257px;
  background:#fffdf9;
  border-radius:12px;
  padding:23px;
  box-shadow:0 15px 45px #43392824;
  transform:rotate(-5deg)}
.mini-brand{
  font-size:8px;
  font-weight:700;
  letter-spacing:1px;
  border-bottom:1px solid var(--line);
  padding-bottom:15px}
.menu-preview h2{
  font:italic 34px/1.1 var(--serif);
  letter-spacing:-1px;
  margin:20px 0}
.menu-label{
  font-size:8px;
  letter-spacing:1px;
  font-weight:700;
  color:var(--muted)}
.preview-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:13px 0;
  border-bottom:1px solid #e9e6de;
  font-size:10px}
.preview-row small{
  display:block;
  font-size:8px;
  color:var(--muted)}
.preview-total{
  background:var(--ink);
  color:white;
  font-size:9px;
  border-radius:6px;
  padding:12px;
  margin-top:20px;
  display:flex;
  justify-content:space-between}
.kitchen-preview{
  position:absolute;
  bottom:46px;
  right:16px;
  background:white;
  box-shadow:0 9px 25px #3d3c2420;
  padding:19px 17px;
  border-radius:10px;
  display:flex;
  gap:12px;
  align-items:center;
  font-size:11px}
.kitchen-preview small{
  display:block;
  font-size:9px;
  color:var(--muted);
  margin-top:3px}
.order-dot{
  background:#b0c4a0;
  width:10px;
  height:10px;
  border-radius:50%}
.status-pill{
  background:#f6e8ca;
  color:#785518;
  padding:5px 8px;
  border-radius:5px;
  font-size:9px}
.scene-footnote{
  position:absolute;
  bottom:4px;
  width:100%;
  text-align:center;
  font-size:9px}
.value-strip{
  border-block:1px solid var(--line);
  padding:23px 0}
.value-strip .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  font-size:12px}
.value-strip span:first-child{
  font-family:var(--serif);
  font-style:italic;
  font-size:19px}
.section{
  padding-block:100px}
.section>p:not(.eyebrow){
  max-width:460px}
.steps-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
  margin-top:42px}
.steps-grid article{
  border-top:1px solid var(--line);
  padding-top:20px}
.step-number{
  font-size:9px;
  letter-spacing:1.4px;
  color:var(--muted)}
.step-icon{
  width:46px;
  height:46px;
  background:#efeade;
  border-radius:13px;
  font-size:29px;
  display:grid;
  place-items:center;
  margin:24px 0}
.steps-grid p,.business-card p{
  font-size:14px;
  line-height:1.8}
.preview-section{
  background:#e6ecdf;
  padding:75px 0}
.preview-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  align-items:center}
.preview-layout>div>p:not(.eyebrow){
  max-width:365px}
.interactive-demo{
  background:var(--paper);
  border:1px solid #d3dbca;
  border-radius:14px;
  padding:27px;
  box-shadow:0 17px 40px #1c30290c}
.demo-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  font-size:9px;
  letter-spacing:1px;
  font-weight:700}
.demo-heading span{
  background:#edf1e8;
  padding:6px;
  letter-spacing:0}
.demo-options{
  display:flex;
  gap:8px;
  margin:25px 0}
.demo-options button{
  background:transparent;
  color:var(--ink);
  border:1px solid #bfc7b5;
  border-radius:30px;
  padding:8px 13px;
  font-size:11px;
  cursor:pointer}
.demo-options button[aria-pressed=true]{
  background:var(--ink);
  color:white}
.demo-order{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin:25px 0}
.demo-order h3{
  font-size:23px;
  max-width:240px;
  margin:9px 0}
.demo-order p{
  font-size:12px;
  margin:0}
.demo-order>strong{
  align-self:center;
  font-size:21px}
.demo-send{
  width:100%;
  background:var(--ink);
  font-size:12px}
.demo-send:hover{
  background:#304b3d}
.demo-result{
  border-top:1px dashed #c9cebf;
  margin-top:20px;
  padding-top:17px;
  min-height:66px;
  font-size:12px;
  color:var(--muted)}
.demo-result.sent{
  color:#245234}
.business-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:40px}
.business-card{
  padding:29px;
  border-radius:11px;
  background:#ece8db;
  display:flex;
  flex-direction:column}
.business-card.restaurant{
  background:#f0dfd5}
.business-card.group{
  background:#e1e7df}
.business-symbol{
  font-size:46px;
  line-height:1;
  margin:8px 0 34px;
  color:#6e8060}
.business-card .eyebrow{
  font-size:9px;
  margin-bottom:16px}
.business-card a{
  font-size:12px;
  font-weight:700;
  margin-top:auto;
  padding-top:15px}
.business-card h3{
  font-size:25px}
.pricing-section{
  padding:85px 0;
  background:#f0ede4}
.pricing-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:115px;
  align-items:center}
.pricing-layout>div>p{
  max-width:390px}
.group-note{
  border-top:1px solid #d8d8cc;
  margin-top:38px;
  padding-top:30px;
  max-width:390px}
.group-note h3{
  font-size:20px}
.group-note p{
  font-size:14px}
.price-card{
  background:var(--paper);
  border:1px solid #dddccf;
  border-radius:13px;
  padding:36px;
  box-shadow:0 15px 50px #32392508}
.price-card-top{
  display:flex;
  justify-content:space-between;
  align-items:center}
.price-card-top .eyebrow{
  margin:0}
.trial-tag{
  font-size:11px;
  background:#e2ebd9;
  color:#344e29;
  padding:6px 10px;
  border-radius:4px}
.price{
  font-size:72px;
  line-height:1.1;
  letter-spacing:-4px;
  font-family:Manrope,system-ui;
  font-weight:600;
  color:var(--ink);
  margin:27px 0 5px}
.price-unit{
  font:14px 'DM Sans',system-ui;
  letter-spacing:0;
  margin-left:10px}
.price-caption{
  font-size:12px}
.feature-list{
  padding:22px 0 15px;
  border-top:1px solid var(--line);
  list-style:none;
  margin:23px 0}
.feature-list li{
  font-size:13px;
  margin-bottom:12px}
.feature-list li:before{
  content:'✓';
  color:var(--orange);
  margin-right:12px}
.price-card>.button{
  width:100%}
.price-card .fine{
  font-size:10px;
  margin:16px 0 0;
  line-height:1.8}
.faq-section{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:65px}
.faq-list details{
  border-bottom:1px solid var(--line);
  padding:18px 0}
.faq-list details:first-child{
  border-top:1px solid var(--line)}
.faq-list summary{
  cursor:pointer;
  font-size:14px;
  font-weight:600;
  list-style:none;
  display:flex;
  justify-content:space-between;
  gap:20px}
.faq-list summary:after{
  content:'+';
  font-size:21px;
  line-height:1}
.faq-list details[open] summary:after{
  content:'−'}
.faq-list details p{
  font-size:13px;
  line-height:1.8;
  margin:17px 22px 0 0}
.closing-cta{
  background:var(--ink);
  color:var(--paper);
  border-radius:14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  padding:55px 60px}
.closing-cta h2{
  margin-bottom:0}
.closing-cta .eyebrow{
  color:#c7d4bd}
.closing-cta p:not(.eyebrow){
  font-size:11px;
  color:#ced8c9;
  margin:15px 0 0}
.site-footer{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:25px;
  padding-block:37px}
.site-footer p{
  font-size:11px;
  margin:0}
.site-footer>div{
  display:flex;
  gap:25px;
  font-size:11px}
.site-footer .legal-links{
  display:flex;
  flex-wrap:wrap;
  gap:6px 18px;
  font-size:11px}
.skip-link{
  position:absolute;
  top:-100px;
  left:20px;
  padding:12px;
  background:white;
  z-index:20}
.skip-link:focus{
  top:12px}
.form-layout{
  min-height:calc(100vh - 95px);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:start;
  padding-block:70px;
  max-width:1040px}
.form-layout h1{
  font-size:54px}
.form-card{
  background:white;
  border:1px solid var(--line);
  padding:32px;
  border-radius:13px}
.field{
  margin-bottom:18px}
.field label{
  display:block;
  font-size:12px;
  font-weight:700;
  margin-bottom:6px}
.field input{
  width:100%;
  border:1px solid #bfc7bd;
  border-radius:6px;
  padding:11px 12px;
  background:#fffefb;
  color:var(--ink)}
.field small{
  font-size:11px;
  color:var(--muted);
  display:block;
  margin-top:5px}
.form-card .button{
  width:100%}
.form-note{
  font-size:11px;
  margin-top:16px}
.alert{
  border-radius:7px;
  padding:15px;
  margin-bottom:20px;
  font-size:13px}
.alert.error{
  background:#fbe6df;
  color:#8b2e19}
.alert.success{
  background:#e1eed9;
  color:#234f32}
.billing-wrap{
  max-width:780px;
  padding-block:55px}
.billing-card{
  background:white;
  border:1px solid var(--line);
  border-radius:12px;
  padding:30px;
  margin-bottom:24px}
.billing-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px}
.billing-meta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin:25px 0}
.billing-meta dt{
  font-size:11px;
  color:var(--muted)}
.billing-meta dd{
  margin:5px 0 0;
  font-weight:600}
.fine{
  font-size:12px}
.button.secondary{
  background:var(--ink)}

@media(max-width:1050px){
  .site-header nav{
  gap:14px}
.site-header{
  padding-inline:25px}
.header-actions{
  gap:16px}
.hero-actions{
  flex-wrap:wrap;
  gap:15px}
.hero-scene{
  min-height:470px}
.menu-preview{
  left:15px;
  top:90px;
  width:235px}
.coffee-art{
  right:0;
  transform:scale(.8) rotate(12deg);
  transform-origin:top right}
.kitchen-preview{
  right:8px;
  bottom:43px;
  font-size:10px;
  gap:8px}
.preview-layout,.pricing-layout{
  gap:50px}
.business-card{
  padding:24px}
.wrap{
  width:calc(100% - 50px)}
}

@media(max-width:760px){
  .site-header{
  min-height:80px;
  padding:18px 20px}
.site-header nav{
  display:none}
.brand{
  font-size:22px}
.header-actions{
  gap:14px}
.header-actions .button{
  font-size:10px;
  padding:12px}
.header-actions>a{
  font-size:11px}
.wrap{
  width:calc(100% - 40px)}
.hero{
  grid-template-columns:1fr;
  padding-top:44px;
  gap:38px}
.eyebrow{
  font-size:9px;
  letter-spacing:1.2px}
h1{
  font-size:57px}
.hero-description{
  font-size:16px}
.hero-actions{
  gap:20px}
.hero-scene{
  max-width:470px;
  width:100%;
  margin:auto;
  min-height:455px;
  border-radius:85px 85px 12px 12px}
.menu-preview{
  left:28px;
  top:88px}
.coffee-art{
  right:12px;
  transform:scale(.88) rotate(12deg)}
.kitchen-preview{
  right:15px}
.audience-line{
  margin-top:29px}
.value-strip .wrap{
  flex-wrap:wrap;
  justify-content:center;
  gap:9px 22px;
  font-size:10px}
.value-strip span:first-child{
  width:100%;
  text-align:center;
  font-size:18px;
  margin-bottom:8px}
.section{
  padding-block:65px}
.steps-grid{
  grid-template-columns:1fr;
  gap:26px}
.steps-grid article{
  display:grid;
  grid-template-columns:55px 1fr;
  gap:10px 18px}
.step-number{
  grid-column:1/-1}
.step-icon{
  grid-row:2/4;
  margin:8px 0}
.steps-grid h3{
  margin:10px 0 0}
.steps-grid p{
  margin:0;
  grid-column:2}
.preview-section{
  padding-block:55px}
.preview-layout,.pricing-layout,.faq-section,.form-layout{
  grid-template-columns:1fr;
  gap:30px}
.interactive-demo{
  padding:22px}
.business-grid{
  grid-template-columns:1fr}
.business-symbol{
  margin:0 0 22px}
.business-card{
  padding:29px}
.pricing-section{
  padding-block:55px}
.price-card{
  padding:28px}
.faq-section{
  gap:15px}
.closing-cta{
  padding:35px 27px;
  display:block}
.closing-cta h2{
  margin-bottom:28px}
.closing-cta .button{
  width:100%;
  font-size:12px}
.site-footer{
  flex-wrap:wrap;
  gap:20px}
.site-footer>div{
  width:100%}
.form-layout{
  padding-block:40px}
.form-layout h1{
  font-size:42px}
.form-card{
  padding:25px}
.billing-meta{
  grid-template-columns:1fr}
.billing-wrap h1{
  font-size:43px}
}
@media(prefers-reduced-motion:reduce){
  html{
  scroll-behavior:auto}
*,*:before,*:after{
  transition:none!important;
  animation:none!important}
}