@import url('./fonts.css');
/* foodistro.pl – shared site styles */
:root{--ink:#161A17;--ink2:#3F4741;--muted:#5B615C;--line:#E3DFD6;--ground:#F2F0EA;--paper:#FBFAF7;--white:#FFFFFF;--saffron:#F0B23E;--saffron-soft:#FCEFD2;--saffron-ink:#7A4B00;--pine:#17392C;--pine-soft:#E3ECE6;--ok:#1E6B43;--ok-soft:#E3F1E8}
body{margin:0;background:var(--paper)}
.site{font-family:'Schibsted Grotesk',system-ui,sans-serif;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
.site *{box-sizing:border-box}
.site a{color:var(--pine)}
.site a:hover{color:#0E251C}
.site button,.site input,.site select,.site textarea{font-family:inherit}
.site button{cursor:pointer}
.site :focus-visible{outline:3px solid var(--saffron);outline-offset:3px}
.mono{font-family:'IBM Plex Mono',monospace}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.sec{padding:104px 0}
.sec-sm{padding:64px 0}
.sec-ground{background:var(--ground)}
.sec-dark{background:var(--ink);color:#FFFFFF}
.sec-dark .lead,.sec-dark .muted{color:#C4CAC5}
.sec-saffron{background:var(--saffron);color:var(--ink)}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 16px}
.sec-dark .eyebrow{color:#9AA29C}
.h1{font-size:clamp(42px,6.2vw,84px);line-height:1.0;font-weight:800;letter-spacing:-.045em;margin:0}
.h2{font-size:clamp(32px,4.2vw,54px);line-height:1.05;font-weight:800;letter-spacing:-.035em;margin:0}
.h3{font-size:22px;line-height:1.25;font-weight:700;letter-spacing:-.01em;margin:0}
.dot{display:inline-block;width:.2em;height:.2em;border-radius:50%;background:var(--saffron);margin-left:.04em}
.lead{font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:var(--ink2);margin:20px 0 0;max-width:640px}
.muted{color:var(--muted)}
.small{font-size:14px;line-height:1.5}
.head{max-width:760px;margin-bottom:48px}
.head.center{margin-left:auto;margin-right:auto;text-align:center}
.head.center .lead{margin-left:auto;margin-right:auto}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 24px;border-radius:999px;font-size:16px;font-weight:700;text-decoration:none;border:0;line-height:1;white-space:nowrap}
.site a.btn-primary,.btn-primary{background:var(--saffron);color:var(--ink)}
.site a.btn-primary:hover,.btn-primary:hover{background:#E5A42A;color:var(--ink)}
.site a.btn-dark,.btn-dark{background:var(--ink);color:#FFFFFF}
.site a.btn-dark:hover,.btn-dark:hover{background:#2A322D;color:#FFFFFF}
.site a.btn-ghost,.btn-ghost{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.sec-dark a.btn-ghost{color:#FFFFFF;border-color:#5B615C}
.btn-sm{min-height:42px;padding:0 18px;font-size:14px}
.link-arrow{font-weight:700;text-decoration:none}
.link-arrow:hover{text-decoration:underline}
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:64px;align-items:center}
.split.rev>:first-child{order:2}
.card{background:var(--white);border:1px solid var(--line);border-radius:24px;padding:28px}
.card-g{background:var(--ground);border-radius:24px;padding:28px}
.card-link{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:var(--ink);transition:transform .15s,border-color .15s}
.site a.card-link{color:var(--ink)}
.card-link:hover{transform:translateY(-3px);border-color:var(--ink)}
.icon{width:52px;height:52px;border-radius:16px;background:var(--ground);display:flex;align-items:center;justify-content:center;color:var(--ink);flex:0 0 auto}
.icon.sf{background:var(--saffron)}
.icon.dk{background:var(--ink);color:var(--saffron)}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;border-radius:999px;padding:4px 10px;background:var(--ground);color:var(--ink2);white-space:nowrap}
.badge.soon{background:var(--saffron-soft);color:var(--saffron-ink)}
.badge.ok{background:var(--ok-soft);color:var(--ok)}
.badge.pro{background:var(--ink);color:var(--saffron)}
.ticks{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-direction:column;gap:12px}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-size:17px;line-height:1.45}
.ticks li::before{content:"";flex:0 0 auto;width:22px;height:22px;margin-top:1px;border-radius:50%;background:var(--pine) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat}
.sec-dark .ticks li::before{background-color:var(--saffron)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:20px;counter-reset:st}
.step{position:relative;padding-top:56px}
.step::before{counter-increment:st;content:counter(st,decimal-leading-zero);position:absolute;top:0;left:0;font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:600;width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--saffron);display:flex;align-items:center;justify-content:center}
.price{font-family:'IBM Plex Mono',monospace;font-weight:600;letter-spacing:-.03em}
.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th{text-align:left;font-size:13px;font-weight:600;color:var(--muted);padding:12px 16px;background:var(--ground)}
.tbl td{padding:14px 16px;border-top:1px solid var(--line);vertical-align:top}
.tbl-box{background:var(--white);border:1px solid var(--line);border-radius:20px;overflow:auto}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--white);border-radius:999px;padding:10px 18px;font-size:15px;font-weight:600}
.field{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;color:var(--ink2)}
.field input,.field select,.field textarea{min-height:52px;border:1px solid #CFC9BD;border-radius:14px;padding:0 16px;font-size:16px;background:#FFFFFF;color:var(--ink);font-weight:400}
.field textarea{padding:14px 16px;min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 3px var(--saffron-soft)}
.req{color:#8A1C12}
.check{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.45;color:var(--ink2)}
.check input{width:20px;height:20px;margin-top:1px;accent-color:var(--pine);flex:0 0 auto}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;text-align:left;background:transparent;border:0;border-top:1px solid var(--line);padding:22px 0;font-size:19px;font-weight:700;color:var(--ink)}
.faq-a{font-size:17px;line-height:1.6;color:var(--ink2);padding:0 0 22px;max-width:820px;margin:0}
/* mini product mockups */
.mock{background:#22282A;border-radius:22px;padding:12px;box-shadow:0 30px 60px -20px rgba(22,26,23,.35)}
.mock-in{background:var(--ground);border-radius:12px;overflow:hidden;display:flex}
.mk-rail{width:9%;background:var(--ink);display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 0}
.mk-rail i{display:block;width:55%;aspect-ratio:1;border-radius:6px;background:#2F3832}
.mk-rail i:first-child{background:var(--saffron)}
.mk-main{flex:1;padding:12px;display:flex;flex-direction:column;gap:8px;min-width:0}
.mk-tabs{display:flex;gap:6px}
.mk-tabs b{height:18px;border-radius:6px;background:#FFFFFF;flex:0 0 22%}
.mk-tabs b:first-child{background:var(--ink)}
.mk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;flex:1}
.mk-grid b{background:#FFFFFF;border-radius:8px;min-height:42px;position:relative}
.mk-grid b::after{content:"";position:absolute;left:8px;bottom:8px;width:40%;height:5px;border-radius:3px;background:#D3CEC3}
.mk-order{width:38%;background:#FFFFFF;padding:12px;display:flex;flex-direction:column;gap:7px}
.mk-line{height:8px;border-radius:4px;background:#ECE9E2}
.mk-line.s{width:60%}
.mk-total{margin-top:auto;height:16px;border-radius:5px;background:var(--ink);width:50%;align-self:flex-end}
.mk-btns{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mk-btns b{height:22px;border-radius:7px;background:var(--saffron)}
.mk-btns b:last-child{background:var(--pine)}
.kds{background:#0F1210;border-radius:12px;padding:10px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.tk{background:#FFFFFF;border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:6px;min-height:150px}
.tk-h{display:flex;justify-content:space-between;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;color:var(--ink)}
.tk-bar{height:6px;border-radius:3px;background:var(--saffron)}
.tk.late .tk-bar{background:#B42318}
.tk.done{opacity:.55}
.tk-l{font-size:11px;line-height:1.3;color:var(--ink2)}
.phone{width:240px;border-radius:36px;background:#22282A;padding:10px;box-shadow:0 30px 60px -20px rgba(22,26,23,.4)}
.phone-in{border-radius:28px;overflow:hidden;background:var(--paper);aspect-ratio:9/19;display:flex;flex-direction:column}
.kiosk{width:300px;border-radius:26px;background:#22282A;padding:14px 14px 40px;box-shadow:0 30px 60px -20px rgba(22,26,23,.4);position:relative}
.kiosk::after{content:"";position:absolute;left:50%;bottom:12px;transform:translateX(-50%);width:60px;height:14px;border-radius:5px;background:#3A443D}
.kiosk-in{border-radius:12px;overflow:hidden;aspect-ratio:9/16;display:flex;flex-direction:column}
.browser{background:#FFFFFF;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 30px 60px -24px rgba(22,26,23,.3)}
.browser-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--ground);border-bottom:1px solid var(--line)}
.browser-bar i{width:10px;height:10px;border-radius:50%;background:#D3CEC3}
.browser-bar span{margin-left:10px;flex:1;background:#FFFFFF;border-radius:8px;padding:4px 10px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted)}
.ph{background:repeating-linear-gradient(135deg,#EADFCB 0 12px,#E4D7BF 12px 24px);display:flex;align-items:center;justify-content:center;color:#7A6F5C;font-size:12px}
@media (max-width:900px){.split{grid-template-columns:minmax(0,1fr);gap:40px}.split.rev>:first-child{order:0}.sec{padding:72px 0}.hide-m{display:none !important}}
.navl{padding:10px 12px;border-radius:10px;font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap}
.site a.navl{color:var(--ink)}
.site a.navl:hover{background:var(--ground)}
.site a.navl.on{background:var(--ink);color:#FFFFFF}
.drop a{display:block;padding:12px 14px;border-radius:12px;text-decoration:none}
.site .drop a{color:var(--ink)}
.drop a:hover{background:var(--ground)}
.foot a{text-decoration:none;font-size:15px;line-height:2}
.site .foot a{color:#C4CAC5}
.site .foot a:hover{color:#FFFFFF}
.show-l{display:none !important}
@media (max-width:1100px){.hide-l{display:none !important}.show-l{display:flex !important}}

html{scroll-behavior:smooth}body{overflow-x:clip}main{display:contents}.component{display:contents}.skip{position:fixed;top:-100px;left:20px;z-index:100;background:#F0B23E;padding:16px;border-radius:12px;color:#161A17}.skip:focus{top:10px}.server-error{color:#8A1C12;background:#FDE8E6;padding:14px;border-radius:12px}.honeypot{position:absolute;left:-10000px;width:1px;height:1px}img{max-width:100%}input,select,textarea{min-width:0}.foot a{color:#C4CAC5}.foot a:hover{color:white}@media(max-width:900px){.split{grid-template-columns:1fr!important}.wrap{padding:0 20px}.card{padding:24px!important}.price{font-size:clamp(32px,9vw,64px)!important}}@media(max-width:600px){.h1{font-size:42px}.row .btn{white-space:normal;text-align:center;line-height:1.3}.wrap>div[style*="height: 80px"]{gap:12px}.hide-l{display:none!important}.sec{padding:56px 0}.foot .wrap>div{gap:24px!important}.show-l{margin-left:auto}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}
.split>*{min-width:0}.mock{max-width:100%}.mock [style*="grid-template-columns: 1fr 1fr"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}@media(max-width:600px){.mock [style*="padding: 18px 20px"]{padding:14px 10px!important}}
@media(max-width:600px){.mock .mono[style*="font-size: 36px"]{font-size:22px!important;gap:6px!important}.mock .mono[style*="font-size: 52px"]{font-size:32px!important}}
[hidden]{display:none!important}.field-label{display:block;line-height:1.5}.field-label .req{display:inline;white-space:nowrap}.site .foot a.btn-primary,.site .foot a.btn-primary:hover{color:#161A17}.site .foot a.btn-dark{color:#fff}.form-error{color:#8A1C12;background:#FDE8E6;padding:14px;border-radius:12px}.site button[data-action][aria-checked=true],.site button[data-action][aria-selected=true],.site button[data-action][aria-pressed=true]{background:#161A17!important;color:#fff!important;border-color:#161A17!important}.site button[data-action][aria-checked=false],.site button[data-action][aria-selected=false],.site button[data-action][aria-pressed=false]{background:#fff!important;color:#161A17!important}.site a.navl[aria-current=page]{background:#161A17;color:#fff}.price-line{display:flex;justify-content:space-between;gap:12px;font-size:15px;border-top:1px solid #2F3832;padding-top:10px}.price-line>span:first-child{color:#C4CAC5}

/* Pricing: keep comparison and service prices inside a phone viewport. */
@media (max-width: 640px) {
  .pricing-page .tbl { table-layout: fixed; min-width: 0; font-size: 14px; line-height: 1.5; }
  .pricing-page .tbl th, .pricing-page .tbl td { padding: 12px 10px; overflow-wrap: anywhere; }
  .pricing-page .plan-comparison th:first-child { width: 48%; }
  .pricing-page .plan-comparison th:not(:first-child) { width: 26% !important; }
  .pricing-page .plan-comparison th:not(:first-child),
  .pricing-page .plan-comparison td:not(:first-child) { padding: 12px 4px; text-align: center; }
  .pricing-page .tbl .badge { max-width: 100%; padding: 4px 5px; white-space: normal; justify-content: center; text-align: center; line-height: 1.4; }
  .pricing-page .tbl:not(.plan-comparison) td:first-child { width: 66%; }
  .pricing-page .tbl:not(.plan-comparison) td:last-child { width: 34%; white-space: normal !important; }
}

/* Over-counter menu screen preview. */
.menu-display-preview { min-width: 0; }
.menu-display { container-type: inline-size; border: 10px solid #22282A; border-radius: 18px; overflow: hidden; background: #17392C; color: #fff; box-shadow: 0 28px 45px -30px #161A1799; }
.menu-display-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; border-bottom: 1px solid #FFFFFF24; }
.menu-display-top strong { font-size: clamp(11px, 3cqi, 17px); letter-spacing: .04em; }
.menu-display-top > span { color: #F0B23E; font-size: 10px; letter-spacing: .15em; }
.menu-display-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.menu-display-promo { position: relative; min-width: 0; padding: 20px 16px; background: #F0B23E; color: #161A17; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.menu-display-tag { font-size: clamp(9px, 2.2cqi, 12px); font-weight: 700; }
.menu-display-promo > strong { font-size: clamp(16px, 5cqi, 28px); line-height: 1.1; letter-spacing: -.04em; }
.menu-display-price { font-size: clamp(16px, 4.2cqi, 24px); font-weight: 700; white-space: nowrap; }
.menu-display-burger { display: flex; flex-direction: column; gap: 4px; width: min(100%, 100px); padding: 4px 0; animation: menu-burger-float 5s ease-in-out infinite; }
.menu-display-burger i { display: block; height: 12px; border-radius: 7px; background: #744027; }
.menu-display-burger i:first-child { height: 35px; background: #C98124; border-radius: 60px 60px 6px 6px; box-shadow: inset 0 4px 0 #E9A544; }
.menu-display-burger i:nth-child(2) { height: 6px; background: #498647; }
.menu-display-burger i:nth-child(3) { height: 6px; background: #FFE18B; }
.menu-display-burger i:last-child { height: 13px; background: #C98124; }
.menu-display-list { min-width: 0; padding: 20px 16px; }
.menu-display-list > span { display: block; color: #D0E1D4; font-size: clamp(9px, 2.1cqi, 12px); margin-bottom: 6px; }
.menu-display-list > div { border-bottom: 1px solid #FFFFFF24; padding: 13px 0; display: flex; flex-direction: column; gap: 5px; }
.menu-display-list > div:last-child { border: 0; }
.menu-display-list strong { font-size: clamp(11px, 2.7cqi, 15px); }
.menu-display-list div > span { font-size: clamp(9px, 2cqi, 11px); color: #D0E1D4; line-height: 1.4; }
.menu-display-list b { color: #F0B23E; font-size: clamp(12px, 3cqi, 17px); white-space: nowrap; }
.menu-display-bottom { text-align: center; background: #0F241C; padding: 12px; font-size: clamp(9px, 2.2cqi, 12px); color: #D0E1D4; }
@keyframes menu-burger-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } }
@media (max-width: 400px) { .menu-display { border-width: 7px; } .menu-display-top { padding: 12px; } .menu-display-promo, .menu-display-list { padding: 16px 10px; } .menu-display-burger { width: 72px; } }
@media (max-width: 480px) { [data-counter-note="menu"] { flex-direction: column; align-items: flex-start !important; } [data-counter-note="menu"] > div:last-child { align-self: flex-end; } }
@media (prefers-reduced-motion: reduce) { .menu-display-burger { animation: none; } }

/* A sample order moves from the POS to the kitchen and owner report. */
.order-demo .head { max-width: 780px; }
.order-demo-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.order-demo-steps button { font: inherit; font-weight: 700; border: 0; border-bottom: 3px solid #D8D6CD; background: transparent; color: #5B615C; padding: 14px 4px; text-align: left; cursor: pointer; }
.order-demo-steps button span { font-family: 'IBM Plex Mono', monospace; font-size: 12px; margin-right: 10px; }
.order-demo-steps button[aria-pressed="true"] { border-color: #17392C; color: #17392C; }
.order-demo-screens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.order-demo-screen { min-width: 0; border: 1px solid #DCDDD4; border-radius: 22px; background: #fff; overflow: hidden; transition: border-color .25s, box-shadow .25s, transform .25s; }
.order-demo-screen.is-current { border-color: #17392C; box-shadow: 0 12px 30px -18px #17392C88; transform: translateY(-3px); }
.order-demo-bar { display: flex; align-items: center; gap: 8px; background: #17392C; color: #fff; padding: 16px; }
.order-demo-bar h3 { font-size: 13px; margin: 0; flex: 1; }
.order-demo-bar > .mono { font-size: 12px; }
.order-demo-light { width: 7px; height: 7px; background: #F0B23E; border-radius: 50%; flex-shrink: 0; }
.order-demo-content { padding: 22px 18px 18px; display: flex; flex-direction: column; gap: 20px; min-height: 350px; }
.order-demo-label { font-size: 12px; font-weight: 600; color: #5B615C; }
.order-demo-product { display: flex; align-items: center; gap: 12px; }
.order-demo-product strong { display: block; font-size: 14px; line-height: 1.4; }
.order-demo-product span { display: block; font-size: 12px; color: #5B615C; margin-top: 4px; }
.order-demo-burger { width: 64px; padding: 12px 8px; background: #FCEFD2; border-radius: 14px; flex-shrink: 0; display: flex; flex-direction: column; gap: 3px; }
.order-demo-burger i { display: block; height: 6px; border-radius: 3px; background: #744027; }
.order-demo-burger i:first-child { height: 19px; border-radius: 30px 30px 3px 3px; background: #D99732; }
.order-demo-burger i:nth-child(2) { background: #55924B; height: 4px; }
.order-demo-burger i:nth-child(3) { background: #F0B23E; height: 4px; }
.order-demo-burger i:last-child { background: #D99732; height: 8px; }
.order-demo-receipt { font-size: 13px; }
.order-demo-receipt > div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; }
.order-demo-receipt .mono { white-space: nowrap; }
.order-demo-receipt .order-demo-total { border-top: 1px dashed #D8D6CD; margin-top: 8px; padding-top: 16px; font-size: 17px; }
.order-demo-state { margin-top: auto; font-size: 12px; line-height: 1.5; color: #17392C; padding: 10px 12px; background: #EAF1E8; border-radius: 10px; }
.order-demo-kitchen { background: #F4F3EF; }
.order-demo-ticket { border-radius: 12px; padding: 16px; background: #fff; border-top: 5px solid #F0B23E; box-shadow: 0 5px 15px #161A1708; }
.order-demo-ticket > div { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; margin-bottom: 20px; }
.order-demo-ticket > strong { font-size: 14px; }
.order-demo-ticket p { font-size: 13px; line-height: 1.6; color: #5B615C; margin: 10px 0 20px; }
.order-demo-ticket-note { font-size: 11px; color: #5B615C; }
.order-demo-report { gap: 14px; background: #F4F3EF; }
.order-demo-sales { min-width: 0; border-radius: 12px; background: #17392C; color: #fff; padding: 14px; display: flex; flex-direction: column; gap: 5px; min-height: 104px; }
.order-demo-sales > span:first-child { font-size: 12px; color: #D8E7DA; }
.order-demo-sales > strong { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.3; white-space: nowrap; }
.order-demo-increase { font-size: 11px; color: #F6CA73; }
.order-demo-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.order-demo-metrics > div { min-width: 0; padding: 10px; background: #fff; border-radius: 10px; }
.order-demo-metrics span { display: block; font-size: 10px; color: #5B615C; margin-bottom: 4px; }
.order-demo-metrics strong { font-size: 15px; white-space: nowrap; }
.order-demo-chart { display: flex; align-items: flex-end; gap: 8px; height: 44px; padding: 4px 8px 0; }
.order-demo-chart i { flex: 1; height: 35%; background: #D5DED3; border-radius: 4px 4px 0 0; }
.order-demo-chart i:nth-child(2n) { height: 55%; }
.order-demo-chart i:nth-child(3n) { height: 75%; }
.order-demo-chart i:last-child { height: 65%; background: #17392C; transform: scaleY(.65); transform-origin: bottom; transition: transform .6s; }
.order-demo[data-stage="2"] .order-demo-chart i:last-child { transform: scaleY(1); background: #D99B2D; }
.order-demo-controls { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 28px; }
.order-demo-controls p { font-size: 15px; line-height: 1.6; color: #5B615C; margin: 0; max-width: 480px; }
.order-demo-controls .btn { flex-shrink: 0; font-size: 14px; }
.order-demo button:focus-visible { outline: 3px solid #B16A00; outline-offset: 4px; }
@media (max-width: 1000px) { .order-demo-controls { align-items: flex-start; flex-direction: column; } .order-demo-controls p { max-width: none; } }
@media (max-width: 700px) {
  .order-demo-steps { gap: 8px; }
  .order-demo-steps button { font-size: 12px; line-height: 1.5; }
  .order-demo-steps button span { display: block; margin: 0 0 4px; }
  .order-demo-screens { grid-template-columns: minmax(0, 1fr); }
  .order-demo.is-interactive .order-demo-screen:not(.is-current) { display: none; }
  .order-demo-screen.is-current { transform: none; }
  .order-demo-content { min-height: 340px; }
  .order-demo-controls .btn { width: 100%; white-space: normal; }
  .order-demo-controls p { min-height: 72px; }
}
@media (prefers-reduced-motion: reduce) { .order-demo-screen, .order-demo-chart i { transition: none; } }

/* Product illustrations use their own typography, independent of marketing prices. */
.browser, .mock, .phone, .kiosk { min-width: 0; max-width: 100%; }
.card[style*="minmax(280px"] { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)) !important; }
.browser-bar span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browser .price { font-size: 16px !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dashboard-preview { container-type: inline-size; }
.dashboard-preview-main, .dashboard-preview-stats > div { min-width: 0; }
.dashboard-preview-sidebar { flex-shrink: 0; }
[data-variant-host="styles"] { container-type: inline-size; }
@container (max-width: 460px) {
  .dashboard-preview-layout { min-height: 320px !important; }
  .dashboard-preview-sidebar { width: 44px !important; padding: 14px 7px !important; }
  .dashboard-preview-main { padding: 12px !important; gap: 10px !important; }
  .dashboard-preview-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .dashboard-preview-stats > div:first-child { grid-column: 1 / -1; }
  .dashboard-preview .price { font-size: clamp(14px, 5cqi, 20px) !important; line-height: 1.3; }
}
@container (max-width: 400px) {
  [data-variant-host="styles"] > div:nth-child(2) > div:first-child { flex-wrap: wrap; gap: 10px; padding: 14px !important; }
  [data-variant-host="styles"] [style*="grid-template-columns: repeat(3"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; padding: 12px 14px 18px !important; }
  [data-variant-host="styles"] [style*="grid-template-columns: repeat(3"] > div { min-width: 0; overflow-wrap: anywhere; }
  [data-variant-host="styles"] .mono { white-space: nowrap; }
}
@media (max-width: 600px) {
  .mock { padding: 9px; border-radius: 18px; }
  .mock .price { font-size: clamp(16px, 4.5vw, 24px) !important; white-space: nowrap; }
  .mock-in .mk-main, .mock-in .mk-order { padding: 8px; gap: 6px; }
  .mock-in .mk-grid { gap: 4px; }
  .mock-in .mk-grid b { min-height: 28px; }
  .mock-in .mk-grid b::after { left: 5px; bottom: 5px; height: 4px; }
  .kds { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px; gap: 8px; }
  .tk { min-width: 0; min-height: 140px; }
  .tk-h { flex-wrap: wrap; gap: 4px 6px; }
  .tk-h span { white-space: nowrap; }
  .tk-l { overflow-wrap: anywhere; }
  .kiosk, .phone { flex-shrink: 1; }
}