:root{
  --navy-900:#152730; --navy-800:#1d3540; --navy-700:#284450; --navy-600:#3a5b68; --navy-500:#52737f; --navy-300:#8ea5ad; --navy-100:#c9d5da;
  --green-800:#3f6b45; --green-700:#5d9a62; --green-600:#6faa6e; --green-500:#83bb81; --green-400:#9dcb9b; --green-200:#c5e0c3; --green-100:#e4f1e3;
  --orange-700:#b03a0b; --orange-600:#c8430f; --orange-500:#e04c12; --orange-400:#ea7448; --orange-300:#f39a72; --orange-100:#fbe0d5;
  --cream-100:#fdf9f1; --cream-200:#f9f0dd; --cream-300:#f0e3c8;
  --mist-100:#f2f5f0; --mist-200:#e1e7de; --mist-300:#cbd4c7;
  --white:#ffffff; --grey-400:#a9b1ad; --grey-600:#6d7873;
  --border-subtle:#e6eae5; --border-default:#d5ddd3;
  --shadow-card:0 2px 10px rgba(40,68,80,.07),0 0 0 1px rgba(40,68,80,.05);
  --shadow-raised:0 10px 28px rgba(40,68,80,.16);
  --radius-md:14px; --radius-lg:20px; --radius-xl:28px; --radius-pill:999px;
  --container-max:1180px; --container-narrow:720px;
  --font-heading:'Figtree',sans-serif; --font-body:'Nunito',sans-serif;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--white);font-family:var(--font-body);color:var(--navy-700);}
img{max-width:100%;display:block;}
a{color:var(--orange-500);text-decoration:none;}
a:hover{color:var(--orange-700);}
h1,h2,h3{font-family:var(--font-heading);margin:0;}
.wrap{max-width:var(--container-max);margin:0 auto;padding:0 32px;}
.wrap-narrow{max-width:var(--container-narrow);margin:0 auto;padding:0 32px;}

/* header (tool-page variant: no green "Home" pill, plain link) */
header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.97);border-bottom:1px solid var(--border-subtle);}
.header-inner{max-width:1180px;margin:0 auto;padding:0 32px;height:76px;display:flex;align-items:center;gap:26px;}
.header-inner img.logo{height:26px;width:auto;}
nav.mainnav{display:flex;gap:22px;margin-left:8px;align-items:center;}
.mainnav a[href="/faq"]{display:none;}
.navlink{color:var(--navy-700);font-weight:700;font-size:15px;}
.navlink:hover{color:var(--green-700);}
.navtools{position:relative;}
.navtools > .navlink{display:flex;align-items:center;gap:4px;cursor:default;}
.navtools-menu{position:absolute;top:100%;left:0;margin-top:8px;background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:8px;min-width:220px;z-index:30;display:none;flex-direction:column;}
.navtools.open .navtools-menu{display:flex;}
.navtools-menu a{padding:10px 14px;border-radius:8px;font-size:14px;font-weight:700;color:var(--navy-700);}
.navtools-menu a:hover{background:var(--mist-100);color:var(--green-700);}
.header-cta{margin-left:auto;}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-pill);font-family:var(--font-body);font-weight:800;text-align:center;white-space:nowrap;border:2px solid transparent;cursor:pointer;}
.btn:hover{text-decoration:none;}
.btn-sm{padding:9px 20px;font-size:14px;}
.btn-lg{padding:15px 30px;font-size:16px;}
.btn-primary{background:var(--orange-500);color:#fff;}
.btn-primary:hover{background:var(--orange-600);color:#fff;}
.btn-outline{background:transparent;color:var(--navy-700);border-color:var(--navy-700);}
.btn-outline:hover{background:var(--navy-700);color:#fff;}
.btn-inverse{background:#fff;color:var(--navy-700);}
.btn-inverse:hover{background:var(--cream-200);color:var(--navy-700);}

/* eyebrow */
.eyebrow{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;}
.eyebrow-navy{color:var(--navy-500);}
.eyebrow-orange{color:var(--orange-500);}

/* section heading */
.section-heading{text-align:center;}
.section-heading h2{font-weight:700;font-size:30px;line-height:1.25;color:var(--navy-700);}
.section-heading h2 strong{font-weight:900;}
.section-heading.lg h2{font-size:36px;}
.section-heading.dark h2{color:#fff;}

/* real product screenshot, browser-chrome framed */
.product-shot{margin-top:40px;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-raised);border:1px solid var(--border-default);background:#fff;}
.product-shot-chrome{display:flex;gap:6px;padding:10px 14px;background:var(--mist-100);border-bottom:1px solid var(--border-default);}
.product-shot-chrome span{width:10px;height:10px;border-radius:50%;background:var(--mist-300);}
.product-shot img{display:block;width:100%;height:auto;}
.product-shot-portrait{max-width:300px;margin-left:auto;margin-right:auto;}

/* card */
.card{border-radius:var(--radius-lg);box-shadow:var(--shadow-card);}
.card-white{background:#fff;}
.card-bordered{border:1px solid var(--border-default);box-shadow:none;}
.card-mist{background:var(--mist-100);box-shadow:none;}
.card-green{background:var(--green-500);color:#fff;}
.card-navy{background:var(--navy-700);color:#fff;}

/* tool page hero */
.tool-hero{background:var(--white);padding:64px 0 52px;}
.tool-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;}
.tool-hero h1{font-weight:900;font-size:40px;line-height:1.18;letter-spacing:-0.02em;color:var(--navy-700);margin-top:16px;}
.tool-hero h1 .accent{color:var(--green-600);}
.tool-hero p.lead{font-size:16.5px;line-height:1.6;color:var(--navy-600);max-width:52ch;margin-top:18px;}
.tool-hero-ctas{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap;}
.tool-hero-visual{position:relative;width:100%;aspect-ratio:1/1;border-radius:20px;overflow:hidden;}

/* phone-frame hero (Digital Menu / Online Ordering / Loyalty Cards) */
.phone-frame-wrap{position:relative;width:100%;max-width:340px;margin:0 auto;}
.phone-frame-wrap img.frame{width:100%;display:block;}
.phone-screen{position:absolute;top:9.6%;left:14.2%;width:71.6%;height:81%;background:var(--mist-100);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;}
.phone-screen-header{padding:14px 12px 8px;text-align:center;font-family:var(--font-heading);font-weight:900;font-size:13px;color:var(--navy-700);}
.phone-screen-header span{color:var(--green-600);}
.ps-pills{display:flex;gap:6px;padding:0 10px 8px;}
.ps-pill{background:#fff;border-radius:999px;padding:4px 9px;font-size:9px;font-weight:800;color:var(--navy-600);box-shadow:0 1px 3px rgba(40,68,80,.1);}
.ps-pill.active{background:var(--green-500);color:#fff;}
.ps-item{background:#fff;border-radius:10px;margin:6px 10px;padding:8px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 1px 3px rgba(40,68,80,.08);}
.ps-item-name{font-size:9.5px;font-weight:800;color:var(--navy-700);}
.ps-item-price{font-size:9px;font-weight:800;color:var(--orange-500);}
.ps-cart-line{display:flex;justify-content:space-between;padding:6px 10px;font-size:9.5px;color:var(--navy-600);}
.ps-cart-total{display:flex;justify-content:space-between;padding:10px;margin:6px 10px 0;border-top:1px dashed var(--border-default);font-size:11px;font-weight:900;color:var(--navy-700);}
.ps-pay-btn{margin:auto 10px 12px;background:var(--orange-500);color:#fff;text-align:center;border-radius:999px;padding:8px;font-size:10px;font-weight:800;}
.ps-loyalty-title{text-align:center;font-size:10px;font-weight:800;color:var(--navy-700);margin-top:6px;}
.ps-stamps{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding:10px 14px;}
.ps-stamp{aspect-ratio:1/1;border-radius:50%;border:2px dashed var(--mist-300);display:flex;align-items:center;justify-content:center;font-size:11px;}
.ps-stamp.filled{border-style:solid;border-color:var(--green-500);background:var(--green-100);color:var(--green-700);}

/* icon-circle hero (Delivery) */
.icon-circle-hero{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--mist-100) 0%,var(--cream-200) 100%);}
.icon-circle-hero .badge{width:180px;height:180px;border-radius:50%;background:#fff;box-shadow:var(--shadow-raised);display:flex;align-items:center;justify-content:center;}
.icon-circle-hero .badge img{width:92px;height:92px;}

/* gradient photo hero (AI phone / SMS) */
.photo-hero{position:relative;width:100%;height:100%;border-radius:20px;padding:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;overflow:hidden;background-size:cover;background-position:center;}
.photo-hero.no-photo{background:linear-gradient(135deg,var(--navy-800) 0%,var(--navy-700) 55%,var(--green-800) 100%);}
.photo-hero.image-hero{padding:0;background:#fff;}
.photo-hero.image-hero::before{content:none;}
.photo-hero.image-hero .sms-hero-image{width:100%;height:100%;object-fit:contain;}
.photo-hero::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(40,68,80,.55),rgba(40,68,80,.72));}
.photo-hero.no-photo::before{content:none;}
.photo-hero > *{position:relative;z-index:1;}
.ph-icon-circle{width:64px;height:64px;border-radius:50%;background:var(--orange-500);display:flex;align-items:center;justify-content:center;}
.ph-icon-circle img{width:34px;filter:brightness(0) invert(1);}
.ph-icon-circle.navy{background:var(--navy-700);}
.ph-wave{display:flex;align-items:center;gap:5px;height:36px;}
.ph-wave span{width:4px;height:100%;background:var(--green-500);border-radius:2px;animation:wave 1s ease-in-out infinite;}
@keyframes wave{0%,100%{transform:scaleY(.4);}50%{transform:scaleY(1);}}
.ph-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:14px 18px;display:flex;align-items:center;gap:10px;max-width:280px;}
.ph-bubble{background:#fff;border-radius:18px 18px 18px 4px;box-shadow:var(--shadow-card);padding:14px 18px;max-width:270px;}
.ph-bubble .who{font-size:11px;font-weight:800;color:var(--navy-500);margin-bottom:3px;}
.ph-bubble p{font-size:13.5px;color:var(--navy-700);margin:0;line-height:1.4;}

/* feature checklist */
.feat-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0 40px;margin-top:36px;max-width:920px;margin-left:auto;margin-right:auto;background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:8px 30px;}
.feat-list.addon{border:1.5px solid var(--orange-300);}
.feat-row{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-bottom:1px solid var(--border-subtle);}
.feat-row:last-child{border-bottom:none;}
.status-mark{width:20px;height:20px;border-radius:50%;background:var(--green-500);color:#fff;flex:0 0 auto;display:flex;align-items:center;justify-content:center;margin-top:1px;}
.status-mark svg{width:11px;height:11px;}
.feat-title{font-weight:700;font-size:14.5px;color:var(--navy-700);}
.feat-sub{font-size:12.5px;color:var(--navy-500);margin-top:2px;line-height:1.4;}
.feat-eyebrow{text-align:center;font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--navy-500);margin:34px 0 4px;}
.feat-eyebrow.addon{color:var(--orange-700);}

/* benefit cards row */
.benefit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;}
.benefit-card{padding:28px;}
.benefit-card .t{font-weight:800;font-size:15.5px;color:var(--navy-700);}
.benefit-card .s{font-size:13.5px;color:var(--navy-600);margin-top:7px;line-height:1.5;}
.benefit-card .s.callout{color:var(--orange-700);font-weight:700;}

/* comparison bars */
.compare-bars{max-width:620px;margin:40px auto 0;}
.compare-bar-row{display:flex;justify-content:space-between;font-size:13px;font-weight:700;color:var(--navy-600);margin-bottom:6px;}
.compare-bar-row.mc{color:var(--navy-700);margin-top:16px;}
.compare-bar-track{height:20px;border-radius:999px;background:var(--mist-100);overflow:hidden;}
.compare-bar-fill{height:100%;border-radius:999px;}
.compare-bar-note{max-width:56ch;margin:22px auto 0;font-size:13.5px;line-height:1.6;color:var(--orange-700);font-weight:600;text-align:center;}

/* how it works */
.steps-section{background:var(--navy-700);padding:70px 0;}
.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px;margin-top:40px;}
.step{text-align:center;}
.step-num{width:42px;height:42px;border-radius:50%;background:var(--green-500);color:#fff;font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;margin:0 auto;}
.step-num.final{background:var(--orange-500);}
.step p{font-size:13.5px;color:rgba(255,255,255,.85);margin-top:13px;line-height:1.5;}

/* extra services */
.svc-card{padding:28px;}
.svc-top{display:flex;align-items:center;justify-content:space-between;}
.svc-top img{width:38px;}
.svc-ask{font-size:11px;font-weight:700;color:var(--orange-500);border:1.5px solid var(--orange-500);padding:5px 12px;border-radius:999px;}
.svc-ask:hover{background:var(--orange-500);color:#fff;}
.svc-title{font-weight:800;font-size:15.5px;color:var(--navy-700);margin-top:13px;}
.svc-desc{font-size:13.5px;color:var(--navy-600);margin-top:7px;line-height:1.5;}

/* plan mini cards */
.plan-mini-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:36px;max-width:600px;margin-left:auto;margin-right:auto;}
.plan-mini{padding:24px;}
.plan-mini .t{font-weight:800;font-size:14.5px;}
.plan-mini .s{font-size:12.5px;margin-top:6px;}

/* included-in-plan note */
.included-note{font-size:14.5px;color:var(--navy-600);margin:14px auto 0;max-width:56ch;}
.included-note strong{color:var(--orange-700);}
.see-pricing{text-align:center;margin-top:22px;font-weight:700;font-size:14.5px;}

/* final cta */
.tool-final-cta{background:var(--green-500);padding:68px 0;text-align:center;}
.tool-final-cta h2{font-weight:800;font-size:30px;color:#fff;}
.tool-final-cta .btn{margin-top:22px;}

/* footer */
footer{background:var(--navy-900);padding:56px 0 34px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;}
.footer-brand img{width:150px;}
.footer-tagline{font-size:14px;color:rgba(255,255,255,.7);margin-top:16px;max-width:34ch;}
.footer-col{display:flex;flex-direction:column;gap:10px;}
.footer-col-title{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.45);}
.footlink{color:rgba(255,255,255,.75);font-size:14px;font-weight:600;}
.footlink:hover{color:#fff;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:36px;padding-top:20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;}
.footer-bottom span{font-size:13px;color:rgba(255,255,255,.5);}
.footer-social{display:flex;gap:18px;}

@media (max-width:900px){
  nav.mainnav{display:none;}
  .tool-hero-grid{grid-template-columns:1fr;}
  .tool-hero h1{font-size:32px;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
