/* Home page + live demos (counter, label studio, key map). Copied from the approved mock. */
/* Hero */
.hero { max-width: var(--wrap); margin: 2.2rem auto 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 2.5rem; align-items: start; }
.hero-copy { padding-top: 1.2rem; display: grid; gap: 1.3rem; min-width: 0; }
.hero h1 { font-size: var(--step-4); font-weight: 800; }
.hero h1 .hl { background: linear-gradient(transparent 62%, var(--marigold) 62%, var(--marigold) 92%, transparent 92%); padding-inline: .1em; }
.hero .lede { font-size: var(--step-1); color: var(--ink-2); max-width: 34em; }
.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .7rem; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; font-size: .88rem; font-weight: 500; }
.chip svg { width: 15px; height: 15px; }
.made { font-size: .88rem; color: var(--ink-3); }
@media (max-width: 920px) { .hero { grid-template-columns: minmax(0, 1fr); } }

/* Counter demo */
.counter { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 30px 60px -30px rgba(29,30,34,.35); overflow: hidden; min-width: 0; }
.counter-bar { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; border-bottom: 1px solid var(--line); background: #FAFBFC; font-size: .85rem; color: var(--ink-2); flex-wrap: wrap; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--paid); box-shadow: 0 0 0 3px var(--paid-soft); }
.counter-bar .shop { font-weight: 600; color: var(--ink); }
.counter-bar .right { margin-left: auto; display: flex; gap: .35rem; align-items: center; }
.counter-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 248px); }
.pick { padding: .9rem; display: grid; gap: .7rem; align-content: start; min-width: 0; }
.search { display: flex; align-items: center; gap: .5rem; border: 1.5px solid var(--line); border-radius: 12px; padding: .55rem .7rem; background: var(--surface); }
.search:focus-within { border-color: var(--ink); }
.search input { border: 0; outline: 0; flex: 1; min-width: 0; font: 500 .95rem/1.2 var(--body); background: transparent; color: var(--ink); }
html[lang="hi"] .search input { font-family: var(--deva); }
.hint { font-size: .8rem; color: var(--ink-3); }
.hint b { color: var(--ink-2); font-weight: 600; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .5rem; }
.tile { text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: .55rem .6rem; cursor: pointer; display: grid; gap: .2rem; font: inherit; color: inherit; position: relative; }
.tile:hover { border-color: var(--ink-3); }
.tile.match { border-color: var(--ink); box-shadow: 0 0 0 2px var(--marigold); }
.tile .nm { font-weight: 600; font-size: .86rem; line-height: 1.25; padding-right: 2.1rem; }
.tile .hi { font-family: var(--deva); font-size: .78rem; color: var(--ink-3); }
.tile .pr { font: 700 .85rem/1 var(--mono); }
.tile .code { position: absolute; top: .45rem; right: .5rem; font: 500 .65rem/1 var(--mono); color: var(--ink-3); }
.tile .incart { position: absolute; bottom: .45rem; right: .5rem; background: var(--marigold); font: 700 .68rem/1 var(--mono); padding: .2rem .35rem; border-radius: 5px; }

.bill { border-left: 1px solid var(--line); background: var(--ground); padding: .9rem; display: grid; gap: .6rem; align-content: start; min-width: 0; }
.receipt { background: var(--paper); padding: .85rem .8rem 1.1rem; font: 500 .74rem/1.45 var(--mono); color: var(--ink); position: relative; box-shadow: 0 1px 0 var(--line); min-height: 220px;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 7px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 7px repeat-x;
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - 7px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 7px repeat-x; }
.receipt .rh { text-align: center; border-bottom: 1px dashed var(--ink-3); padding-bottom: .45rem; margin-bottom: .45rem; }
.receipt .rh b { font-size: .82rem; }
.r-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem; }
.r-line .q { color: var(--ink-3); }
.r-line button { border: 0; background: none; padding: 0 .2rem; cursor: pointer; color: var(--ink-3); font: inherit; }
.r-line button:hover { color: var(--plus); }
.r-sum { border-top: 1px dashed var(--ink-3); margin-top: .45rem; padding-top: .4rem; display: grid; gap: .1rem; }
.r-total { font-size: .95rem; font-weight: 700; border-top: 1px solid var(--ink); margin-top: .3rem; padding-top: .3rem; }
.r-empty { color: var(--ink-3); text-align: center; padding: 1.4rem 0; font-family: var(--body); font-size: .85rem; }
.stamp { position: absolute; right: .5rem; top: 2.6rem; border: 2px solid var(--paid); color: var(--paid); font: 800 .8rem/1 var(--mono); padding: .3rem .45rem; border-radius: 6px; transform: rotate(-8deg); background: rgba(255,254,250,.85); animation: stamp .35s ease-out; }
@keyframes stamp { from { transform: rotate(-8deg) scale(1.6); opacity: 0; } to { transform: rotate(-8deg) scale(1); opacity: 1; } }
.pay { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
.pay button { border: 1px solid var(--line); background: var(--surface); border-radius: 9px; padding: .45rem; font: 600 .8rem/1 var(--body); cursor: pointer; color: var(--ink); }
.pay button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.complete { width: 100%; justify-content: center; background: var(--paid); border-color: var(--paid); color: #fff; padding: .8rem .6rem; font-size: .92rem; }
.complete:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.complete kbd { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.35); }
.counter-foot { display: flex; gap: .9rem; flex-wrap: wrap; padding: .6rem 1rem; border-top: 1px solid var(--line); font-size: .78rem; color: var(--ink-2); background: #FAFBFC; }
.counter-foot span { display: inline-flex; gap: .3rem; align-items: center; }
.demo-note { font-size: .78rem; color: var(--ink-3); padding: .55rem 1rem .8rem; }
@media (max-width: 640px) { .counter-body { grid-template-columns: minmax(0, 1fr); } .bill { border-left: 0; border-top: 1px solid var(--line); } }

/* Sections */
section.block { max-width: var(--wrap); margin: 5.5rem auto 0; display: grid; gap: 2rem; }
.head { display: grid; gap: .8rem; max-width: 46rem; }
.head h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 800; }
.head p { color: var(--ink-2); font-size: var(--step-1); }

/* Trust strip */
.trust { max-width: var(--wrap); margin: 3.5rem auto 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.trust div { padding: 1.1rem 1.2rem; display: grid; gap: .25rem; border-left: 1px solid var(--line); }
.trust div:first-child { border-left: 0; }
.trust b { font: 700 1.05rem/1.2 var(--display); }
html[lang="hi"] .trust b { font-family: var(--deva); }
.trust span { color: var(--ink-2); font-size: .9rem; }
@media (max-width: 820px) { .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } .trust div:nth-child(3) { border-left: 0; } .trust div:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 420px) { .trust { grid-template-columns: minmax(0, 1fr); } .trust div { border-left: 0; } .trust div + div { border-top: 1px solid var(--line); } }

/* Features */
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.feature { background: var(--surface); padding: 1.5rem 1.4rem; display: grid; gap: .6rem; align-content: start; }
.feature .ico { width: 42px; height: 42px; border-radius: 11px; background: var(--marigold-soft); display: grid; place-items: center; }
.feature .ico svg { width: 22px; height: 22px; }
.feature h3 { font-size: 1.2rem; font-weight: 700; }
html[lang="hi"] .feature h3 { font-size: 1.25rem; }
.feature p { color: var(--ink-2); font-size: .95rem; }
.feature .proof { font: 500 .78rem/1.4 var(--mono); color: var(--ink-3); }
@media (max-width: 900px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .features { grid-template-columns: minmax(0, 1fr); } }

/* Keys */
.keys { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: center; background: var(--ink); color: #fff; border-radius: 22px; padding: clamp(1.5rem, 4vw, 3rem); }
.keys .head p { color: #C9CCD3; }
.keys .eyebrow { color: #C9CCD3; }
.keymap { display: grid; gap: .55rem; }
.keyrow { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); gap: .8rem; align-items: center; padding: .7rem .9rem; border: 1px solid #383A42; border-radius: 12px; transition: background .2s, border-color .2s; }
.keyrow.on { background: #2A2C33; border-color: var(--marigold); }
.keyrow kbd { justify-self: start; font-size: .82rem; padding: .35rem .55rem; background: #2A2C33; color: #fff; border-color: #4A4D57; }
.keyrow span { color: #E6E7EA; }
@media (max-width: 820px) { .keys { grid-template-columns: minmax(0, 1fr); } }

/* Label studio */
.studio { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 1.5rem; align-items: start; }
.studio-form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem; display: grid; gap: .9rem; }
.roll { background: repeating-linear-gradient(90deg, #E9EBEF 0 1px, transparent 1px 16px), #F0F1F4; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1rem; display: grid; gap: .8rem; justify-items: center; }
.roll-strip { background: #D9DCE2; padding: .7rem; border-radius: 6px; display: flex; gap: .7rem; max-width: 100%; overflow-x: auto; }
/* Laid out like the app's printed label (Desktop lib/labels/labelSheet.ts): everything centred —
   shop, item name, bars, code digits, then the price on its own line. */
.label { width: 228px; aspect-ratio: 38 / 25; max-width: 100%; background: #fff; border-radius: 6px; padding: 6px 9px 5px; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto; justify-items: center; text-align: center; gap: 1px; box-shadow: 0 1px 2px rgba(0,0,0,.12); flex: none; color: #000; }
.label .l-shop { font: 700 9px/1.1 var(--body); text-transform: uppercase; letter-spacing: .05em; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.label .l-name { font: 800 13px/1.15 var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.label svg { width: 100%; height: 100%; min-height: 22px; display: block; }
.label .l-code { font: 600 8.5px/1 var(--mono); letter-spacing: .12em; }
.label .l-price { font: 800 13px/1.1 var(--mono); }
.roll-cap { font: 500 .8rem/1.4 var(--mono); color: var(--ink-2); text-align: center; }
@media (max-width: 860px) { .studio { grid-template-columns: minmax(0, 1fr); } }

/* Solutions */
.tabs { display: flex; flex-wrap: wrap; gap: .5rem; }
.tabs button { border: 1.5px solid var(--line); background: var(--surface); border-radius: 999px; padding: .55rem 1rem; font: 600 .92rem/1 var(--body); cursor: pointer; color: var(--ink-2); }
html[lang="hi"] .tabs button { font-family: var(--deva); }
.tabs button[aria-selected="true"] { border-color: var(--ink); color: var(--ink); background: var(--marigold-soft); }
.panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.2rem, 3vw, 2rem); }
.panel h3 { font-size: 1.5rem; }
.panel p { color: var(--ink-2); margin-top: .6rem; }
.panel ul { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: .55rem; }
.panel li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: .5rem; }
.panel li::before { content: ""; width: 12px; height: 12px; margin-top: .4rem; border-radius: 3px; background: var(--marigold); }
.sample { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; align-self: start; }
.sample table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.sample th, .sample td { padding: .55rem .8rem; text-align: left; border-bottom: 1px solid var(--line); }
.sample th { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); background: #FAFBFC; }
.sample td.n { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sample caption { caption-side: bottom; padding: .5rem .8rem; font-size: .78rem; color: var(--ink-3); text-align: left; }
@media (max-width: 760px) { .panel { grid-template-columns: minmax(0, 1fr); } }

/* Compare */
.compare-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.compare { width: 100%; border-collapse: collapse; min-width: 560px; }
.compare th, .compare td { padding: .9rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { font: 700 .95rem/1.2 var(--display); }
html[lang="hi"] .compare thead th { font-family: var(--deva); }
.compare thead th.us { background: var(--marigold-soft); }
.compare td.us { background: #FFFBEA; font-weight: 600; }
.compare td:first-child { font-weight: 600; width: 30%; }
.compare td.them { color: var(--ink-2); }
.compare tr:last-child td { border-bottom: 0; }

/* Offline */
.offline { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: center; }
.timeline { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem; display: grid; gap: .2rem; }
.tl { display: grid; grid-template-columns: 4.2rem 18px minmax(0, 1fr); gap: .7rem; align-items: start; padding: .55rem 0; }
.tl time { font: 600 .82rem/1.4 var(--mono); color: var(--ink-3); }
.tl i { width: 12px; height: 12px; border-radius: 50%; margin-top: .3rem; background: var(--paid); box-shadow: 0 0 0 4px var(--paid-soft); }
.tl i.off { background: var(--plus); box-shadow: 0 0 0 4px #FCE4E2; }
.tl i.bk { background: var(--marigold); box-shadow: 0 0 0 4px var(--marigold-soft); }
.tl span { font-size: .95rem; }
@media (max-width: 820px) { .offline { grid-template-columns: minmax(0, 1fr); } }


/* Licence + contact */
.licence { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; }
.lic-card { background: var(--surface); border: 1.5px solid var(--ink); border-radius: 18px; padding: clamp(1.3rem, 3vw, 2rem); display: grid; gap: 1rem; align-content: start; }
.lic-card h3 { font-size: 1.6rem; }
.lic-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.lic-card li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: .5rem; }
.lic-card li svg { width: 18px; height: 18px; margin-top: .2rem; color: var(--paid); }
.lic-card .price { font: 700 1.05rem/1.4 var(--body); padding: .8rem 1rem; background: var(--marigold-soft); border-radius: 10px; }
html[lang="hi"] .lic-card .price { font-family: var(--deva); }
@media (max-width: 820px) { .licence { grid-template-columns: minmax(0, 1fr); } }

a.feature { text-decoration: none; color: inherit; transition: background .15s; }
a.feature:hover { background: #FFFBEA; }
.studio .btn, .faq + .btn { justify-self: start; }
/* Brand tagline pill above the hero headline */
.hero-tag { justify-self: start; position: relative; display: inline-block; background: var(--marigold-soft); border: 1px solid #F3D97A; border-radius: 999px; padding: .42rem 1rem .42rem 2.6rem; font-weight: 600; font-size: 1.02rem; line-height: 1.35; color: var(--ink); }
.hero-tag::before { content: "+"; position: absolute; left: .4rem; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 1.65rem; height: 1.65rem; border-radius: 50%; background: var(--marigold); color: var(--plus); font-weight: 800; font-size: 1.15rem; line-height: 1; }
.hero-tag b { font-weight: 800; }