/* Qrocant — the platform's own pages (home, sign-up, terms). Brand: espresso ink, cream paper, crust amber, chili. */
:root{ --ink:#1D1A16; --paper:#FBF5EA; --card:#fff; --amber:#F2A93B; --amber-d:#d98f1c; --chili:#E4572E; --muted:#6f675b; --line:#e9dfcc; --soft:#f3ead9; --ok:#1d7a46; --bad:#b3261e;
  --disp:Fraunces,Georgia,serif; --body:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; --r:18px; --wrap:1120px; }
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--paper); color:var(--ink); font:16px/1.55 var(--body); overflow-x:hidden; }
img{ max-width:100%; } a{ color:#a4521a; } h1,h2,h3{ font-family:var(--disp); letter-spacing:-.02em; margin:0; }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 20px; }
.muted{ color:var(--muted); } .small{ font-size:13.5px; } [hidden]{ display:none !important; }

/* top bar + logo */
.nav{ position:sticky; top:0; z-index:30; background:color-mix(in srgb,var(--paper) 88%,transparent); backdrop-filter:blur(10px); border-bottom:1px solid transparent; transition:border-color .2s; }
.nav.stuck{ border-color:var(--line); }
.nav-in{ max-width:var(--wrap); margin:0 auto; padding:12px 20px; display:flex; align-items:center; gap:22px; }
.logo{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); font:700 27px/1 var(--disp); letter-spacing:-.035em; }
.logo img{ width:34px; height:34px; display:block; } .logo i{ font-style:normal; color:var(--chili); }
.nav-l{ display:flex; gap:20px; margin-left:14px; } .nav-l a{ color:var(--ink); text-decoration:none; font-weight:500; font-size:15px; opacity:.8; } .nav-l a:hover{ opacity:1; }
.nav-r{ margin-left:auto; display:flex; align-items:center; gap:10px; position:relative; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; cursor:pointer; text-decoration:none; background:var(--ink); color:#fff; font:600 16px var(--body); padding:13px 22px; border-radius:999px; transition:transform .15s, box-shadow .15s, background .15s; }
.btn:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(29,26,22,.18); }
.btn.amber{ background:var(--amber); color:var(--ink); } .btn.ghost{ background:none; color:var(--ink); box-shadow:inset 0 0 0 2px var(--ink); } .btn.sm{ padding:9px 16px; font-size:14.5px; } .btn.block{ width:100%; }
.btn:disabled{ opacity:.6; cursor:wait; transform:none; }
.link{ background:none; border:0; padding:0; font:500 15px var(--body); color:var(--ink); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.pop{ position:absolute; right:0; top:calc(100% + 10px); width:300px; background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px; box-shadow:0 18px 44px rgba(29,26,22,.16); }
.pop label{ font-size:13.5px; font-weight:600; display:block; } .pop .adr{ margin-top:6px; }

/* fields */
.fld{ display:block; font-size:13.5px; font-weight:600; margin-top:14px; }
.fld input, .inp{ width:100%; margin-top:6px; padding:12px 13px; border:1.5px solid #d9cfbc; border-radius:12px; font:400 16px var(--body); background:#fff; color:var(--ink); }
.fld input:focus, .inp:focus, .adr:focus-within{ outline:0; border-color:var(--ink); box-shadow:0 0 0 3px rgba(242,169,59,.35); }
.hint{ font-size:12.5px; color:var(--muted); font-weight:400; margin-top:5px; }
.adr{ display:flex; align-items:center; margin-top:6px; border:1.5px solid #d9cfbc; border-radius:12px; background:#fff; overflow:hidden; }
.adr input{ flex:1; min-width:0; border:0; margin:0; padding:12px 2px 12px 13px; font:600 16px var(--body); background:none; text-align:right; color:var(--ink); } .adr input:focus{ outline:0; box-shadow:none; }
.adr span{ padding:12px 13px 12px 1px; color:var(--muted); white-space:nowrap; font-size:15px; }
.adr.pre input{ text-align:left; padding-left:2px; } .adr.pre span{ padding:12px 0 12px 13px; }
.state{ font-size:13px; margin-top:6px; min-height:19px; font-weight:500; } .state.ok{ color:var(--ok); } .state.bad{ color:var(--bad); } .state button{ margin-left:6px; font-size:13px; }

/* the phone with a live demo menu */
.ph{ --m-brand:#2f5d50; --m-accent:#e07a5f; --m-paper:#fbf8f3; --m-ink:#1f2421; --m-d:Fraunces,serif; --m-b:Inter,sans-serif; --m-r:14px;
  width:300px; height:610px; border-radius:44px; background:#14110e; padding:11px; box-shadow:0 30px 70px rgba(29,26,22,.28), inset 0 0 0 2px #3a332b; position:relative; flex:none; }
.ph::before{ content:""; position:absolute; top:19px; left:50%; width:74px; height:20px; margin-left:-37px; border-radius:12px; background:#14110e; z-index:5; }
.ph-scr{ height:100%; border-radius:34px; overflow:hidden; background:var(--m-paper); color:var(--m-ink); font:13px/1.35 var(--m-b); position:relative; display:flex; flex-direction:column; transition:background .35s, color .35s; }
.ph-url{ margin:36px 12px 0; padding:6px 10px; border-radius:99px; background:color-mix(in srgb,var(--m-ink) 8%,transparent); font:500 11px Inter,sans-serif; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:.85; }
.m-head{ display:flex; align-items:center; gap:10px; padding:12px 14px 8px; }
.m-logo{ width:40px; height:40px; border-radius:calc(var(--m-r) * .8); background:var(--m-brand); color:var(--m-on); display:grid; place-items:center; font:700 15px var(--m-d); flex:none; transition:background .35s, border-radius .35s; }
.m-name{ font:700 18px/1.1 var(--m-d); display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:150px; } .m-head small{ font-size:10.5px; opacity:.65; }
.m-lang{ margin-left:auto; border:1px solid color-mix(in srgb,var(--m-ink) 22%,transparent); background:none; color:inherit; border-radius:99px; padding:4px 9px; font:600 11px Inter,sans-serif; }
.m-chips{ display:flex; gap:6px; padding:4px 14px 8px; overflow:hidden; }
.m-chips span{ padding:5px 11px; border-radius:99px; font-weight:600; font-size:11.5px; background:color-mix(in srgb,var(--m-ink) 7%,transparent); white-space:nowrap; } .m-chips span.on{ background:var(--m-brand); color:var(--m-on); }
.m-sale{ margin:0 14px 6px; padding:7px 10px; border-radius:var(--m-r); background:var(--m-accent); color:#fff; font-weight:600; font-size:11.5px; display:none; }
.m-list{ padding:0 14px; display:grid; gap:8px; }
.m-it{ display:grid; grid-template-columns:54px 1fr auto; gap:10px; align-items:center; padding:8px; border-radius:var(--m-r); background:color-mix(in srgb,var(--m-ink) 4.500%,var(--m-paper)); box-shadow:0 1px 0 color-mix(in srgb,var(--m-ink) 8%,transparent); transition:border-radius .35s; }
.m-it img{ width:54px; height:54px; object-fit:contain; border-radius:calc(var(--m-r) * .7); background:color-mix(in srgb,var(--m-brand) 12%,var(--m-paper)); padding:4px; }
.m-it b{ font:700 13.5px/1.2 var(--m-d); display:block; } .m-it small{ font-size:10.5px; opacity:.68; display:block; margin-top:2px; }
.m-pr{ text-align:right; font-weight:700; font-size:13px; white-space:nowrap; } .m-pr s{ display:none; font-weight:400; font-size:10.5px; opacity:.6; }
.m-pr em{ display:none; font-style:normal; font-size:9.5px; background:var(--m-accent); color:#fff; border-radius:99px; padding:1px 6px; margin-bottom:2px; }
.m-add{ display:none; margin:4px 0 0 auto; width:24px; height:24px; border-radius:50%; background:var(--m-brand); color:var(--m-on); place-items:center; font-weight:700; font-size:15px; line-height:1; }
.m-fab{ position:absolute; right:12px; bottom:14px; background:var(--m-brand); color:var(--m-on); border-radius:99px; padding:9px 13px; font-weight:600; font-size:11.5px; box-shadow:0 8px 18px rgba(0,0,0,.22); display:none; }
.m-cart{ position:absolute; left:10px; right:10px; bottom:12px; background:var(--m-brand); color:var(--m-on); border-radius:calc(var(--m-r) + 2px); padding:11px 13px; font-weight:600; font-size:12px; display:flex; justify-content:space-between; transform:translateY(140%); transition:transform .45s cubic-bezier(.2,.9,.3,1.2); }
.m-sheet{ position:absolute; left:0; right:0; bottom:0; background:var(--m-paper); border-radius:22px 22px 0 0; padding:16px 16px 18px; box-shadow:0 -14px 40px rgba(0,0,0,.28); transform:translateY(105%); transition:transform .5s cubic-bezier(.2,.9,.3,1.08); }
.m-sheet h4{ font:700 16px var(--m-d); margin:0 0 10px; } .m-sheet .row{ display:flex; align-items:center; gap:9px; padding:10px 11px; border-radius:var(--m-r); background:color-mix(in srgb,var(--m-ink) 6%,transparent); margin-top:7px; font-weight:600; font-size:12.5px; }
.m-sheet .row.go{ background:var(--m-brand); color:var(--m-on); justify-content:center; } .m-sheet .row i{ font-style:normal; }
.m-stars{ font-size:26px; letter-spacing:4px; color:var(--m-accent); } .m-stamps{ display:grid; grid-template-columns:repeat(5,1fr); gap:7px; margin-top:4px; }
.m-stamps i{ aspect-ratio:1; border-radius:50%; border:2px dashed color-mix(in srgb,var(--m-ink) 30%,transparent); display:grid; place-items:center; font-style:normal; font-size:15px; } .m-stamps i.on{ border:0; background:var(--m-brand); color:var(--m-on); }
.m-dim{ position:absolute; inset:0; background:rgba(0,0,0,.36); opacity:0; pointer-events:none; transition:opacity .4s; }
.m-toast{ position:absolute; left:50%; top:auto; bottom:64px; transform:translate(-50%,-30px); opacity:0; background:var(--m-ink); color:var(--m-paper); padding:9px 14px; border-radius:99px; font-weight:600; font-size:11.5px; white-space:nowrap; transition:all .4s; z-index:4; }
.ph[data-scene=call] .m-fab, .ph[data-scene=menu] .m-fab, .ph[data-scene=lang] .m-fab{ display:block; }
.ph[data-scene=lang] .m-lang{ background:var(--m-brand); color:var(--m-on); border-color:transparent; animation:pulse 1.4s infinite; }
.ph[data-scene=sale] .m-sale{ display:block; } .ph[data-scene=sale] .m-pr s, .ph[data-scene=sale] .m-pr em{ display:block; } .ph[data-scene=sale] .m-pr em{ display:inline-block; }
.ph[data-scene=order] .m-add{ display:grid; } .ph[data-scene=order].go .m-cart{ transform:none; }
.ph.sheet .m-sheet{ transform:none; } .ph.sheet .m-dim{ opacity:1; } .ph.toast .m-toast{ transform:translate(-50%,0); opacity:1; }
@keyframes pulse{ 50%{ box-shadow:0 0 0 6px color-mix(in srgb,var(--m-brand) 25%,transparent); } }
.swatches{ display:flex; flex-wrap:wrap; gap:8px; }
.swatches button{ display:inline-flex; align-items:center; gap:7px; border:1.5px solid #d9cfbc; background:#fff; border-radius:99px; padding:6px 12px 6px 7px; font:500 13.5px var(--body); cursor:pointer; color:var(--ink); }
.swatches button i{ width:18px; height:18px; border-radius:50%; box-shadow:inset -6px 0 0 var(--b); background:var(--a); } .swatches button[aria-pressed=true]{ border-color:var(--ink); box-shadow:0 0 0 1px var(--ink); font-weight:600; }

/* plans */
.per{ display:inline-flex; background:var(--soft); border-radius:99px; padding:4px; gap:2px; }
.per button{ border:0; background:none; padding:9px 16px; border-radius:99px; font:600 14px var(--body); cursor:pointer; color:var(--muted); } .per button[aria-pressed=true]{ background:#fff; color:var(--ink); box-shadow:0 2px 8px rgba(29,26,22,.1); }
.per em{ font-style:normal; color:var(--chili); font-weight:700; margin-left:4px; }
.plans{ display:grid; grid-template-columns:1fr 1fr 1.12fr; gap:16px; align-items:stretch; margin-top:26px; }
.plan{ background:#fff; border:1px solid var(--line); border-radius:22px; padding:24px 22px; display:flex; flex-direction:column; position:relative; text-align:left; }
.plan h3{ font-size:24px; } .plan .tag{ color:var(--muted); font-size:14px; margin:2px 0 14px; min-height:42px; }
.plan .pr{ font:700 46px/1 var(--disp); letter-spacing:-.03em; } .plan .pr small{ font:500 15px var(--body); letter-spacing:0; color:var(--muted); margin-left:4px; }
.plan .sub{ font-size:13px; color:var(--muted); margin:6px 0 16px; min-height:38px; }
.plan ul{ list-style:none; padding:0; margin:16px 0 0; display:grid; gap:9px; font-size:14.5px; }
.plan li{ display:grid; grid-template-columns:20px 1fr; gap:8px; } .plan li::before{ content:""; width:18px; height:18px; margin-top:2px; border-radius:50%; background:var(--soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.500l2.700 2.700L13 6.500' fill='none' stroke='%231D1A16' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain; }
.plan li.plus{ font-weight:600; } .plan li.plus::before{ background-color:var(--amber); }
.plan.best{ background:var(--ink); color:#fff; border-color:var(--ink); box-shadow:0 24px 60px rgba(29,26,22,.28); transform:translateY(-10px); }
.plan.best .tag, .plan.best .sub, .plan.best .pr small{ color:#cdc3b2; } .plan.best li::before{ background-color:#3a332b; filter:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.500l2.700 2.700L13 6.500' fill='none' stroke='%23FBF5EA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.plan.best li.plus::before{ background-color:var(--amber); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.500l2.700 2.700L13 6.500' fill='none' stroke='%231D1A16' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.plan .badge{ position:absolute; top:-13px; left:22px; background:var(--amber); color:var(--ink); font:700 12.5px var(--body); padding:5px 12px; border-radius:99px; }
.plan .why{ margin-top:14px; padding:10px 12px; border-radius:12px; background:rgba(242,169,59,.16); font-size:13.5px; color:#f6d9a4; }
.plan .btn{ margin-top:0; } .plan .foot{ margin-top:18px; display:flex; flex-direction:column; flex:1; justify-content:flex-end; }
.cmp{ width:100%; border-collapse:collapse; margin-top:18px; font-size:14.5px; background:#fff; border-radius:18px; overflow:hidden; border:1px solid var(--line); }
.cmp th, .cmp td{ padding:11px 14px; text-align:center; border-top:1px solid var(--line); } .cmp td:first-child, .cmp th:first-child{ text-align:left; }
.cmp thead th{ border-top:0; font:700 16px var(--disp); background:var(--soft); } .cmp thead th:last-child{ background:var(--ink); color:#fff; }
.cmp .grp td{ background:#faf4e8; font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); text-align:left; }
.cmp .y{ display:inline-block; width:20px; height:20px; border-radius:50%; background:var(--amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.500l2.700 2.700L13 6.500' fill='none' stroke='%231D1A16' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain; vertical-align:middle; }
.cmp .n{ color:#c9bfae; } .cmp td:last-child{ background:#fffaf0; }
.contact{ padding:16px 18px; border-radius:16px; background:var(--soft); font-size:15px; } .contact b{ display:block; }
.foot-b{ border-top:1px solid var(--line); margin-top:70px; padding:30px 0 44px; font-size:14px; color:var(--muted); }
.foot-b .wrap{ display:flex; flex-wrap:wrap; gap:14px 34px; align-items:center; } .foot-b a{ color:var(--ink); }
@media (max-width:900px){ .nav-l{ display:none; } .plans{ grid-template-columns:1fr; } .plan.best{ transform:none; order:-1; } .plan .tag, .plan .sub{ min-height:0; } .cmp{ font-size:13px; } .cmp th, .cmp td{ padding:9px 7px; } .cmp thead th{ font-size:13.5px; } }
@media (max-width:480px){ .logo{ font-size:23px; } .logo img{ width:30px; height:30px; } .nav-in{ gap:10px; padding:10px 16px; } .nav-r .link{ display:none; } }
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } }