/* rest.9flg.com — the restaurant product's own skin.
 *
 * Its own stylesheet rather than the calling site's, for the same reason it has
 * its own words: a restaurant owner and a call-centre manager are not the same
 * buyer. Warm, high contrast, big type — read on a phone, standing up, usually
 * between two other things.
 *
 * Served with a 30-day cache. The version string is stamped by
 * views_rest._rest_css_version(), which reads THIS file's timestamp. Change the
 * file and returning visitors get it; borrow another site's stamp and they never
 * do.
 */

:root{
  --ink:#1B1410;          /* near-black, warm */
  --ink2:#4A3F38;
  --muted:#8A7C72;
  --line:#EBE3DC;
  --soft:#FAF6F2;
  --panel:#FFFFFF;
  --bg:#FFFDFB;
  --flame:#C4441E;        /* the product colour — a tandoor, not a fire alarm */
  --flame-d:#9E3416;
  --leaf:#2F6B4F;
  --leaf-bg:#EDF6F1;
  --sun:#E9A93C;
  --sun-bg:#FDF4E4;
  --head:"Fraunces","Georgia",serif;
  --body:"Inter",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --wrap:1140px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);
     font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--flame);text-decoration:none}
a:hover{color:var(--flame-d)}
h1,h2,h3,h4{font-family:var(--head);margin:0;letter-spacing:-.02em;line-height:1.15}
h1{font-size:clamp(2rem,5.2vw,3.4rem)}
h2{font-size:clamp(1.5rem,3.4vw,2.3rem)}
h3{font-size:1.12rem}
p{margin:.65rem 0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.1rem}

/* ---------- header ---------- */
.bar{position:sticky;top:0;z-index:40;background:rgba(255,253,251,.94);
     backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar .in{display:flex;align-items:center;justify-content:space-between;gap:1rem;
         padding:.7rem 0}
.logo{font-family:var(--head);font-weight:700;font-size:1.22rem;color:var(--ink);
      display:flex;align-items:center;gap:.5rem}
.logo i{width:11px;height:11px;border-radius:3px;background:var(--flame);display:block}
.nav{display:flex;gap:.2rem;align-items:center;flex-wrap:wrap}
.nav a{color:var(--ink2);font-size:.92rem;padding:.45rem .7rem;border-radius:8px}
.nav a:hover{background:var(--soft);color:var(--ink)}
.nav a.on{color:var(--flame);font-weight:600}
.btn{display:inline-block;font-family:var(--body);font-size:.94rem;font-weight:600;
     padding:.62rem 1.15rem;border-radius:10px;border:1px solid var(--line);
     background:var(--panel);color:var(--ink);cursor:pointer;text-align:center}
.btn.solid{background:var(--flame);border-color:var(--flame);color:#fff}
.btn.solid:hover{background:var(--flame-d);border-color:var(--flame-d);color:#fff}
.btn.ghost{background:transparent}
.btn.big{font-size:1.02rem;padding:.8rem 1.5rem}
.burger{display:none;font-size:1.4rem;background:none;border:0;cursor:pointer;
        color:var(--ink);padding:.2rem .4rem}

/* ---------- hero ---------- */
.hero{padding:3.2rem 0 2.4rem;background:
      radial-gradient(900px 380px at 15% -10%,var(--sun-bg),transparent),
      radial-gradient(700px 340px at 92% 0%,#FBEDE8,transparent)}
.hero .eyebrow{display:inline-block;font-size:.76rem;letter-spacing:.09em;
     text-transform:uppercase;color:var(--flame);font-weight:700;
     background:#FBEDE8;padding:.32rem .7rem;border-radius:99px;margin-bottom:.9rem}
.hero p.lede{font-size:1.14rem;color:var(--ink2);max-width:44rem}
.hero .acts{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.4rem}
.ticks{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.3rem;font-size:.88rem;
       color:var(--ink2)}
.ticks span::before{content:"✓";color:var(--leaf);font-weight:700;margin-right:.35rem}

/* ---------- sections ---------- */
section{padding:2.8rem 0;border-top:1px solid var(--line)}
section.tint{background:var(--soft)}
.shead{max-width:44rem;margin-bottom:1.6rem}
.shead p{color:var(--ink2)}

.grid{display:grid;gap:.9rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(238px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;
      padding:1.15rem}
.card h3{margin-bottom:.35rem}
.card p{color:var(--ink2);font-size:.94rem;margin:.3rem 0 0}
.card .ic{width:38px;height:38px;border-radius:10px;background:#FBEDE8;
          display:flex;align-items:center;justify-content:center;margin-bottom:.7rem}
.card .ic svg{width:21px;height:21px;stroke:var(--flame);fill:none;stroke-width:1.7;
              stroke-linecap:round;stroke-linejoin:round}
.card .n{font-family:var(--head);font-size:1.5rem;color:var(--flame);line-height:1}

/* pills */
.pills{display:flex;flex-wrap:wrap;gap:.5rem}
.pills span{background:var(--panel);border:1px solid var(--line);border-radius:99px;
            padding:.4rem .95rem;font-size:.88rem;color:var(--ink2)}

/* trust — checkable facts, never invented logos */
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.8rem}
.trust div{background:var(--panel);border:1px solid var(--line);border-radius:12px;
           padding:.9rem 1rem}
.trust b{display:block;font-family:var(--head);font-size:1.05rem}
.trust span{font-size:.84rem;color:var(--muted)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}
.stats div{text-align:center}
.stats b{display:block;font-family:var(--head);font-size:2.3rem;color:var(--flame);
         line-height:1.05}
.stats span{font-size:.82rem;color:var(--muted)}

/* showcase — words beside a drawing of the actual screen */
.show{display:grid;grid-template-columns:1fr 1fr;gap:1.8rem;align-items:center}
.screen{background:var(--panel);border:1px solid var(--line);border-radius:14px;
        overflow:hidden;box-shadow:0 18px 42px -26px rgba(27,20,16,.5)}
.screen .top{background:var(--ink);color:#fff;padding:.55rem .9rem;font-size:.82rem;
             display:flex;justify-content:space-between;align-items:center}
.screen .rows{padding:.55rem}
.screen .row{display:flex;justify-content:space-between;align-items:center;gap:.6rem;
             padding:.5rem .6rem;border-bottom:1px solid var(--line);font-size:.86rem}
.screen .row:last-child{border-bottom:0}
.screen .row b{font-weight:600}
.screen .row .sub{color:var(--muted);font-size:.78rem;display:block}
.chip{font-size:.72rem;padding:.15rem .55rem;border-radius:99px;white-space:nowrap;
      border:1px solid var(--line);background:var(--soft);color:var(--ink2)}
.chip.ok{background:var(--leaf-bg);border-color:#BFDCCC;color:var(--leaf)}
.chip.busy{background:#FBEDE8;border-color:#F0CDC1;color:var(--flame)}
.chip.idle{background:var(--sun-bg);border-color:#F1DDB4;color:#8A6410}

/* ---------- feature catalogue (market) ----------
 * The full list of what the software does, searchable. Tiles carry a status
 * because the list is deliberately longer than the software: green = a person
 * can press it today, amber = the backend is still being written. The two
 * colours must stay obviously different at arm's length on a phone, which is
 * why one is a filled pill and not two shades of the same grey. */
.mkbar{display:flex;flex-direction:column;gap:.7rem;margin-bottom:1.1rem}
.mksearch input{width:100%;font:inherit;font-size:.95rem;padding:.7rem .95rem;
                border:1px solid var(--line);border-radius:10px;background:var(--panel);
                color:var(--ink)}
.mksearch input:focus{outline:2px solid var(--flame);outline-offset:1px;border-color:var(--flame)}
.mkcats{display:flex;gap:.4rem;flex-wrap:wrap}
.mkcats button{font:inherit;font-size:.84rem;padding:.38rem .8rem;border-radius:99px;
               border:1px solid var(--line);background:var(--panel);color:var(--ink2);
               cursor:pointer}
.mkcats button:hover{border-color:var(--flame);color:var(--flame)}
.mkcats button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.mkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:.8rem}
.mktile{background:var(--panel);border:1px solid var(--line);border-radius:12px;
        padding:1rem 1.05rem}
.mktile[hidden]{display:none}
.mktop{display:flex;justify-content:space-between;align-items:center;gap:.5rem;
       margin-bottom:.5rem}
.mkcat{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.mkst{font-size:.7rem;padding:.15rem .55rem;border-radius:99px;white-space:nowrap;
      border:1px solid transparent;font-weight:600}
.mkst.live{background:var(--leaf-bg);border-color:#BFDCCC;color:var(--leaf)}
.mkst.build{background:var(--sun-bg);border-color:#F1DDB4;color:#8A6410}
.mktile h3{font-size:1.02rem}
.mktile p{font-size:.88rem;color:var(--ink2);margin:.4rem 0 0}
.mktile .mklink{font-size:.85rem}
.mknone{margin-top:1rem;color:var(--muted)}
/* Read by a screen reader, never seen. The search box needs a label and the
 * placeholder is not one. */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
    white-space:nowrap}

/* pricing */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}
.tier{background:var(--panel);border:1px solid var(--line);border-radius:14px;
      padding:1.3rem;display:flex;flex-direction:column}
.tier.top{border-color:var(--flame);box-shadow:0 0 0 3px #FBEDE8}
.tier .badge{position:relative;top:-.4rem;font-size:.7rem;text-transform:uppercase;
             letter-spacing:.08em;color:var(--flame);font-weight:700}
/* The price row carries its own unit as plain words ("₹999 per restaurant /
 * month") rather than markup inside the row. Markup inside a translated string
 * is a trap: the overlay translates the whole field, tags and all. So the size
 * has to survive a long line instead of relying on a <small>. */
.tier .amt{font-family:var(--head);font-size:1.55rem;line-height:1.25;margin:.3rem 0}
.tier ul{list-style:none;padding:0;margin:.8rem 0 1.1rem;font-size:.92rem;
         color:var(--ink2)}
.tier li{padding:.28rem 0 .28rem 1.3rem;position:relative}
.tier li::before{content:"✓";position:absolute;left:0;color:var(--leaf);font-weight:700}
.tier .btn{margin-top:auto}

/* faq */
details{background:var(--panel);border:1px solid var(--line);border-radius:12px;
        padding:.85rem 1.05rem;margin-bottom:.6rem}
details summary{cursor:pointer;font-weight:600;list-style:none}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";float:right;color:var(--flame);font-weight:700}
details[open] summary::after{content:"–"}
details p{color:var(--ink2);font-size:.94rem}

/* cta + talk panel */
.cta{background:var(--ink);color:#fff;border-radius:16px;padding:2rem 1.6rem;
     text-align:center}
.cta h2{color:#fff}
.cta p{color:#D8CEC6;max-width:38rem;margin:.6rem auto 1.2rem}
.cta .btn{background:#fff;border-color:#fff;color:var(--ink)}
/* Two buttons on a dark band: the first is the filled white one, anything after
 * it is an outline so the band still has ONE obvious next step. */
.cta .acts{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.cta .acts .btn:not(.solid){background:transparent;color:#fff;border-color:#6E5C52}
.cta .acts .btn:not(.solid):hover{border-color:#fff}
.panel{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;align-items:start}
form.talk{background:var(--panel);border:1px solid var(--line);border-radius:14px;
          padding:1.2rem}
form.talk label{display:block;font-size:.74rem;text-transform:uppercase;
                letter-spacing:.05em;color:var(--muted);margin:.55rem 0 .2rem}
form.talk input,form.talk textarea{width:100%;font:inherit;font-size:.94rem;
     padding:.6rem .7rem;border:1px solid var(--line);border-radius:9px;
     background:var(--bg);color:var(--ink)}
form.talk .hp{position:absolute;left:-9999px}
.said{background:var(--leaf-bg);border:1px solid #BFDCCC;color:var(--leaf);
      border-radius:10px;padding:.7rem .9rem;margin-bottom:.8rem;font-size:.92rem}

/* prose */
.prose{max-width:44rem}
.prose p{color:var(--ink2)}

/* footer */
footer{border-top:1px solid var(--line);background:var(--soft);padding:2.2rem 0 1.4rem;
       margin-top:1rem}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:1.4rem}
footer h4{font-family:var(--body);font-size:.72rem;text-transform:uppercase;
          letter-spacing:.08em;color:var(--muted);margin:0 0 .5rem}
footer ul{list-style:none;padding:0;margin:0}
footer li{padding:.16rem 0}
footer a{color:var(--ink2);font-size:.92rem}
footer .fine{border-top:1px solid var(--line);margin-top:1.4rem;padding-top:.9rem;
             font-size:.82rem;color:var(--muted);display:flex;
             justify-content:space-between;gap:.8rem;flex-wrap:wrap}

/* ---------- phone ----------
 * The product is used standing up on a phone, so the SITE had better work
 * standing up on a phone. Nothing here is allowed to scroll sideways. */
@media (max-width:900px){
  .show,.panel{grid-template-columns:1fr}
  footer .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  .burger{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--panel);
       border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;
       padding:.5rem .8rem 1rem;gap:0}
  .nav.open{display:flex}
  .nav a{padding:.65rem .4rem;border-bottom:1px solid var(--line)}
  .bar .in{position:relative}
  .hero{padding:2.2rem 0 1.8rem}
  section{padding:2.1rem 0}
  footer .cols{grid-template-columns:1fr}
}