/* OmniVyapaar seller-first homepage (visual-refinement pass): hero overrides, image-first business-type carousel, the
   sample storefront, capability groups with product fragments, the visual without / with comparison, seller types,
   how it works, the three-stage deal story, trust and pricing extras. Loaded after the DD31 inline sheet and dd32.css;
   every rule is scoped to these blocks. Mobile-first; no web font beyond the shell's Inter; no images beyond the
   licence-recorded photos already on the page. */

/* ---------------------------------------------------------------- hero */
.hs-h1b{display:block;margin-top:4px;font-size:.62em;font-weight:700;letter-spacing:-.01em;color:var(--dbc-slate)}
.hp-hero__after{margin-top:18px}
.hs-howlink{margin:0 0 4px}
.hp-hero__after .hp-facts{margin-top:8px}
.hs-buyer{margin:12px 0 0;font-size:14px;color:var(--dbc-slate)}
.hs-buyer a{font-weight:600;color:var(--dbc-blue-700)!important}
.hs-buyer--inv,.hs-buyer--inv a{color:#fff!important}
.hs-buyer--inv a{text-decoration:underline}
.hp-figcap--under{display:block}
.hs-hero .hp-figwrap{margin-top:22px}
.hp-slip .hs-steps{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:3px;font-size:11.5px;font-weight:600}
.hp-slip .hs-steps li{display:flex;align-items:center;gap:6px;color:var(--dbc-slate)}
.hp-slip .hs-steps li::before{content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--dbc-line)}
.hp-slip .hs-steps .done::before{background:var(--dbc-green)}
.hp-slip .hs-steps .now{color:var(--dbc-blue-700)}
.hp-slip .hs-steps .now::before{background:var(--dbc-blue);box-shadow:0 0 0 3px var(--dbc-blue-50)}
/* phones: the primary button alone under the headline; the secondary is a text link after the preview */
@media(max-width:767.98px){
  .hs-hero .hp-ctas .pub-btn--secondary{display:none}
  .hs-hero .hp-lead{margin-bottom:16px}
  .hs-hero .hp-hero__after{margin-top:16px;padding-top:14px;border-top:1px solid var(--dbc-line-soft,#EEF2F7)}
}
@media(min-width:768px){
  .hs-howlink{display:none}
  .hs-hero .hp-figrow{display:block;max-width:420px;margin:28px auto 0}
}
@media(min-width:1024px){
  .hs-hero.hp-hero__grid{grid-template-areas:"text fig" "after fig";align-items:center;row-gap:0}
  .hs-hero .hp-hero__text{grid-area:text;align-self:end}
  .hs-hero .hp-figwrap{grid-area:fig}
  .hs-hero .hp-hero__after{grid-area:after;align-self:start;margin-top:22px}
  .hs-hero .hp-figrow{max-width:none;margin:0}
}

/* ---------------------------------------------------------------- S2 industry showcase: the strip (cards: see "industry showcase" below) */
.hs-types{background:var(--dbc-surface)}
.hs-types .hp-head{margin-bottom:16px}
.ct--types{position:relative}
.ct--types .ct-item{flex-basis:74%}
@media(min-width:768px){.ct--types .ct-item{flex-basis:calc((100% - 32px)/2.4)}.ct--types .ct-ctl{position:static;margin:-4px 0 12px;justify-content:flex-end}}
@media(min-width:1024px){.ct--types .ct-item{flex-basis:calc((100% - 48px)/4)}}

/* ---------------------------------------------------------------- S2b the sample storefront */
.yd{margin:0}
.yd-frame{overflow:hidden;border:1px solid var(--dbc-line);border-radius:16px;background:#fff;box-shadow:var(--hp-shadow-card,0 12px 32px rgba(15,42,92,.12));font-family:'Inter',system-ui,sans-serif;color:var(--dbc-ink)}
.yd-chrome{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#F3F6FB;border-bottom:1px solid var(--dbc-line)}
.yd-dots{display:inline-flex;gap:5px}
.yd-dots i{width:9px;height:9px;border-radius:50%;background:#CBD5E1}
.yd-url{display:inline-flex;align-items:center;gap:6px;flex:1 1 auto;min-width:0;height:26px;padding:0 10px;border-radius:999px;background:#fff;border:1px solid var(--dbc-line);font-size:11.5px;color:var(--dbc-slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yd-cover{position:relative;aspect-ratio:16/5;min-height:96px;background:linear-gradient(135deg,#0F2A5C 0%,#1769E0 62%,#3B8BEF 100%);overflow:hidden}
.yd-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.yd-img.is-broken{visibility:hidden}
.yd-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,22,48,.12) 0%,rgba(9,22,48,.38) 100%)}
.yd-tag{position:absolute;top:10px;left:12px;z-index:2;padding:4px 10px;border-radius:999px;background:var(--dbc-amber,#F59E0B);color:#1F1300;font-size:12px;font-weight:700}
.yd-body{display:grid;gap:14px;padding:14px}
.yd-id{display:grid;grid-template-columns:auto 1fr;gap:10px 12px;align-items:start;margin-top:-34px;position:relative;z-index:2}
.yd-logo{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:14px;background:var(--dbc-blue);color:#fff;font-weight:800;font-size:18px;border:3px solid #fff;box-shadow:0 2px 8px rgba(15,42,92,.15)}
.yd-who{padding-top:30px;min-width:0}
.yd-who b{display:block;font-size:17px;font-weight:700;line-height:1.25}
.yd-tagline{display:block;font-size:13px;color:var(--dbc-slate);margin-top:2px}
.yd-meta{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:6px;font-size:11.5px;color:var(--dbc-slate)}
.yd-meta>span{display:inline-flex;align-items:center;gap:4px}
.yd-acts{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px}
.yd-acts .p,.yd-pills .p{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 11px;border:1px solid var(--dbc-line);border-radius:999px;background:#fff;font-size:12px;font-weight:600;color:var(--dbc-ink)}
.yd-acts .pub-icon,.yd-pills .pub-icon{width:13px;height:13px}
.yd-acts .p--enquire{background:var(--dbc-blue);border-color:var(--dbc-blue);color:#fff}
.yd-acts .p--whatsapp,.yd-pills .p.wa{background:var(--hp-green-ink,#16794A);border-color:var(--hp-green-ink,#16794A);color:#fff}
.yd-tabs{display:flex;gap:16px;border-bottom:1px solid var(--dbc-line);font-size:13px;font-weight:600;color:var(--dbc-slate);overflow-x:auto;scrollbar-width:none}
.yd-tabs span{padding:6px 0 8px;white-space:nowrap}
.yd-tabs .on{color:var(--dbc-blue-700);box-shadow:inset 0 -2px 0 var(--dbc-blue)}
.yd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.yd-card{border:1px solid var(--dbc-line);border-radius:10px;overflow:hidden;background:#fff}
.yd-media{position:relative;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#F1F5F9,#E2E8F0)}
.yd-media svg{width:58%;height:auto}
.yd-kind{position:absolute;top:6px;left:6px;font-size:9.5px;font-weight:600;background:#fff;color:var(--dbc-slate);border-radius:999px;padding:1px 6px}
.yd-cb{padding:7px 8px 9px}
.yd-cn{font-size:12.5px;font-weight:600;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.yd-price{margin-top:3px;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}
.yd-price--req{font-size:11px;font-weight:500;color:var(--dbc-muted)}
.yd-side{display:grid;gap:10px}
.yd-box{display:grid;gap:6px;padding:10px 12px;border:1px solid var(--dbc-line);border-radius:10px;background:var(--dbc-surface);font-size:12px;color:var(--dbc-slate);line-height:1.45}
.yd-box b{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--dbc-ink)}
.yd-box--share{grid-template-columns:52px 1fr;align-items:center}
.yd-box--share b{grid-column:1/-1}
.yd-qr{display:block;width:52px;height:52px}
.yd-qr svg{width:100%;height:100%}
.yd-pills{display:flex;flex-wrap:wrap;gap:5px}
.yd-pills .p{height:26px;padding:0 9px;font-size:11px}
.yd-cap{margin:12px auto 0;max-width:60ch;text-align:center;font-size:14px;color:var(--dbc-muted)}
.yd-facts{list-style:none;margin:16px auto 0;padding:0;display:grid;gap:8px;max-width:760px}
.yd-facts li{display:flex;align-items:flex-start;gap:8px;font-size:15px;color:var(--dbc-ink);line-height:1.45}
.yd-facts .pub-icon{flex:0 0 auto;color:var(--dbc-blue);margin-top:2px}
@media(min-width:560px){.yd-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.yd-id{grid-template-columns:auto 1fr auto;align-items:center;margin-top:-18px}.yd-acts{grid-column:auto;justify-content:flex-end}.yd-who{padding-top:0}.yd-logo{margin-top:-18px}}
@media(min-width:768px){.yd-cover{aspect-ratio:16/4}.yd-body{grid-template-columns:minmax(0,1fr) 250px;gap:18px;padding:18px}.yd-side{align-content:start}.yd-facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
@media(min-width:1024px){.yd-body{grid-template-columns:minmax(0,1fr) 280px;padding:20px 22px 22px}.yd-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.yd-who b{font-size:19px}}

/* ---------------------------------------------------------------- S3 capabilities in four groups */
.sv-grid{display:grid;gap:14px}
.sv-group{border:1px solid var(--dbc-line);border-radius:16px;background:#fff;padding:16px}
.sv-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.sv-gi{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;background:var(--dbc-blue-50);color:var(--dbc-blue-700)}
.sv-group--buyers .sv-gi{background:#E9F7EF;color:#1C7A46}
.sv-group--convert .sv-gi{background:#FFF4E0;color:#9A5B00}
.sv-group--grow .sv-gi{background:#F1ECFD;color:#5B3CC4}
.sv-gt{margin:0;font-size:18px;font-weight:700;line-height:1.3}
.sv-go{margin:2px 0 0;color:var(--dbc-slate);font-size:14.5px;line-height:1.45}
/* the product fragment */
.sv-vis{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:64px;padding:10px 12px;margin-bottom:12px;border-radius:12px;background:linear-gradient(180deg,#F4F8FE 0%,#EAF2FD 100%);font-family:'Inter',system-ui,sans-serif;font-size:11.5px;color:var(--dbc-ink)}
.svm-store{display:inline-flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--dbc-line);border-radius:8px;background:#fff}
.svm-logo{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;background:var(--dbc-blue);color:#fff;font-size:10px;font-weight:800}
.svm-tabs{display:inline-flex;gap:8px;font-weight:600;color:var(--dbc-slate)}
.svm-tabs i{font-style:normal;padding-bottom:2px}
.svm-tabs .on{color:var(--dbc-blue-700);box-shadow:inset 0 -2px 0 var(--dbc-blue)}
.svm-tiles{display:inline-flex;gap:6px}
.svm-tile{display:inline-grid;grid-template-rows:auto auto;justify-items:center;width:64px;padding:4px;border:1px solid var(--dbc-line);border-radius:8px;background:#fff}
.svm-tile svg{width:34px;height:auto}
.svm-tile i{font-style:normal;font-size:9.5px;font-weight:700;white-space:nowrap}
.svm-pill{display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 9px;border:1px solid var(--dbc-line);border-radius:999px;background:#fff;font-weight:600}
.svm-pill--wa{background:var(--hp-green-ink,#16794A);border-color:var(--hp-green-ink,#16794A);color:#fff}
.svm-row{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:6px 8px;border:1px solid var(--dbc-line);border-radius:8px;background:#fff;font-weight:600}
.svm-row>span{display:inline-flex;align-items:center;gap:5px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svm-row b{flex:0 0 auto;padding:1px 7px;border-radius:999px;background:#FFF4E0;color:#9A5B00;font-size:10.5px}
.svm-chain{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.svm-chain .pub-icon{color:var(--dbc-muted)}
.svm-st{display:inline-flex;align-items:center;padding:3px 8px;border-radius:999px;border:1px solid var(--dbc-line);background:#fff;font-size:11px;font-weight:700;color:var(--dbc-slate);white-space:nowrap}
.svm-st--info{background:var(--dbc-blue-50);border-color:#BFD3F2;color:var(--dbc-blue-700)}
.svm-st--ok{background:#E9F7EF;border-color:#BFE5CE;color:#1C7A46}
.svm-st--warn{background:#FFF4E0;border-color:#F5D9A8;color:#9A5B00}
.svm-rev{display:grid;grid-template-columns:1fr auto;gap:4px 8px;flex:1 1 150px;padding:7px 9px;border:1px solid var(--dbc-line);border-radius:8px;background:#fff;font-weight:700;font-size:11px}
.svm-rev>span:first-child{display:inline-flex;align-items:center;gap:4px}
.svm-mod{padding:1px 7px;border-radius:999px;background:#E9F7EF;color:#1C7A46;font-size:10.5px;font-weight:700}
.svm-rev i{grid-column:1/-1;display:block;height:6px;border-radius:4px;background:#DCE4EF}
.svm-rev i.s{width:60%}
.svm-an{display:grid;grid-template-columns:repeat(3,auto);gap:2px 10px;align-items:end;padding:6px 9px;border:1px solid var(--dbc-line);border-radius:8px;background:#fff;font-size:10.5px;font-weight:600;color:var(--dbc-slate)}
.svm-an span{grid-row:2}
.svm-an i{grid-row:1;display:block;width:22px;height:28px;border-radius:3px 3px 0 0;background:linear-gradient(to top,var(--dbc-blue) var(--h),#E5EDF9 var(--h));justify-self:center}
.sv-list{list-style:none;margin:0;padding:0;display:grid;gap:2px 12px}
.sv-list li{display:flex;align-items:flex-start;gap:9px;padding:8px 0;border-bottom:1px dashed var(--dbc-line-soft,#EEF2F7);font-size:14.5px;line-height:1.4}
.sv-list li:last-child{border-bottom:0}
.sv-ii{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;background:var(--dbc-surface);color:var(--dbc-ink)}
.sv-list strong{display:block;font-weight:700;color:var(--dbc-ink)}
.sv-d{display:block;color:var(--dbc-slate);font-size:13.5px}
.sv-tag{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:var(--dbc-surface);border:1px solid var(--dbc-line);font-size:11.5px;font-weight:600;color:var(--dbc-muted);vertical-align:1px}
.sv-note{margin:14px 0 0;text-align:center;color:var(--dbc-slate);font-size:15px}
@media(min-width:360px){.sv-list{grid-template-columns:1fr 1fr}.sv-list li{border-bottom:0;padding:6px 0}}
@media(min-width:768px){.sv-grid{grid-template-columns:1fr 1fr;gap:18px}.sv-group{padding:20px}.sv-vis{min-height:72px}}
@media(min-width:1024px){.sv-list li{font-size:15px}.sv-d{font-size:14px}}

/* ---------------------------------------------------------------- S4 without vs with: pictures, then paired rows */
.hs-cmp{background:var(--dbc-surface)}
.cmp{display:grid;gap:12px}
.cmp-col{border-radius:16px;padding:14px;border:1px solid var(--dbc-line);background:#fff}
.cmp-col--with{border-color:#BFD3F2;box-shadow:0 0 0 3px var(--dbc-blue-50)}
.cmp-t{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:17px;font-weight:700}
.cmp-col--without .cmp-t .pub-icon{color:#B4232A}
.cmp-col--with .cmp-t .pub-icon{color:var(--hp-green-ink,#16794A)}
.cmp-vis{position:relative;min-height:150px;border-radius:12px;padding:12px;font-family:'Inter',system-ui,sans-serif;font-size:11.5px;overflow:hidden}
.cmp-vis--w{background:#F6F7F9;display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
.cv-chat{display:grid;gap:6px;align-content:start}
.cv-b{font-style:normal;justify-self:start;max-width:100%;padding:6px 10px;border-radius:12px 12px 12px 3px;background:#fff;border:1px solid var(--dbc-line);color:var(--dbc-ink);font-weight:600}
.cv-b--r{justify-self:end;border-radius:12px 12px 3px 12px;background:#E9F7EF;border-color:#BFE5CE}
.cv-photos{position:relative;height:84px}
.cv-photos i{position:absolute;width:56px;height:56px;border-radius:8px;background:linear-gradient(160deg,#F1F5F9,#E2E8F0);border:1px solid var(--dbc-line);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(15,42,92,.08)}
.cv-photos i svg{width:60%;height:auto}
.cv-photos i:nth-child(1){left:0;top:10px;transform:rotate(-8deg)}
.cv-photos i:nth-child(2){left:34px;top:0;transform:rotate(6deg)}
.cv-photos i:nth-child(3){left:66px;top:18px;transform:rotate(-3deg)}
.cv-reg{grid-column:2;display:grid;gap:6px;padding:8px 10px;border-radius:6px;background:repeating-linear-gradient(#fff 0 17px,#EEF2F7 17px 18px);border:1px solid var(--dbc-line);font-weight:700;font-size:10.5px;color:var(--dbc-slate)}
.cv-reg i{display:block;height:5px;border-radius:3px;background:#CBD5E1;width:80%}
.cv-reg i:nth-child(3){width:55%}
.cv-reg i:nth-child(4){width:68%}
.cmp-vis--o{background:linear-gradient(180deg,#F4F8FE 0%,#EAF2FD 100%);display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.cv-dukaan{display:grid;grid-template-columns:auto 1fr;gap:4px 8px;align-items:center;padding:8px 10px;border:1px solid var(--dbc-line);border-radius:10px;background:#fff}
.cv-logo{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;background:var(--dbc-blue);color:#fff;font-size:10px;font-weight:800}
.cv-dukaan b{font-size:12px}
.cv-tiles{grid-column:1/-1;display:flex;gap:6px}
.cv-tiles i{flex:0 0 auto;width:44px;height:36px;border-radius:6px;background:linear-gradient(160deg,#F1F5F9,#E2E8F0);border:1px solid var(--dbc-line);display:flex;align-items:center;justify-content:center}
.cv-tiles i svg{width:60%;height:auto}
.cv-rows{display:grid;gap:6px}
.cv-row{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:6px 9px;border:1px solid var(--dbc-line);border-radius:8px;background:#fff;font-weight:600;color:var(--dbc-ink)}
.cv-row>span:first-child{display:inline-flex;align-items:center;gap:5px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-row b{flex:0 0 auto;padding:1px 7px;border-radius:999px;background:#FFF4E0;color:#9A5B00;font-size:10.5px}
.cv-row--chain{justify-content:flex-start;flex-wrap:wrap;gap:4px}
.cv-row--chain .pub-icon{color:var(--dbc-muted)}
.cmp-rows{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.cmp-pair{display:grid;grid-template-columns:1fr;gap:2px;padding:10px 12px;border:1px solid var(--dbc-line);border-radius:12px;background:#fff;font-size:14.5px;line-height:1.4}
.cmp-w{color:var(--dbc-slate)}
.cmp-arrow{display:none;color:var(--dbc-muted)}
.cmp-o{color:var(--dbc-ink);font-weight:600}
.cmp-note{display:flex;align-items:flex-start;justify-content:center;gap:8px;margin:14px 0 0;color:var(--dbc-slate);font-size:14.5px;text-align:left}
.cmp-note .pub-icon{flex:0 0 auto;color:#1C7A46;margin-top:2px}
@media(min-width:560px){.cmp-pair{grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}.cmp-arrow{display:inline-flex}}
@media(min-width:768px){.cmp{grid-template-columns:1fr 1fr;gap:18px}.cmp-col{padding:18px}.cmp-vis{min-height:170px}.cmp-vis--o{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:start}.cmp-rows{gap:10px}.cmp-pair{padding:12px 16px;font-size:15px}}

/* ---------------------------------------------------------------- the RFQ rule under the industry showcase */
.uc-note{display:flex;align-items:flex-start;gap:8px;max-width:760px;margin:14px auto 0;color:var(--dbc-slate);font-size:14.5px;line-height:1.5}
.uc-note .pub-icon{flex:0 0 auto;color:var(--dbc-blue);margin-top:2px}

/* ---------------------------------------------------------------- S6 how it works */
.hs-how{background:var(--dbc-surface)}
.hw-steps{list-style:none;margin:0 -16px;padding:4px 16px 10px;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 16px;overscroll-behavior-x:contain}
.hw-steps>.hw-step{flex:0 0 80%;scroll-snap-align:start}
.hw-step{position:relative;border:1px solid var(--dbc-line);border-radius:16px;background:#fff;padding:14px 16px 16px}
.hw-vis{display:flex;flex-direction:column;justify-content:center;gap:6px;min-height:118px;padding:12px;margin-bottom:12px;border-radius:12px;background:linear-gradient(180deg,#F4F8FE 0%,#EAF2FD 100%);font-family:'Inter',system-ui,sans-serif}
.hw-n{display:inline-block;font-size:13px;font-weight:800;color:var(--dbc-blue-700);letter-spacing:.06em}
.hw-t{margin:2px 0 4px;font-size:17px;font-weight:700;line-height:1.3}
.hw-d{margin:0;color:var(--dbc-slate);font-size:14.5px;line-height:1.5}
.mu{background:#fff;border:1px solid var(--dbc-line);border-radius:10px;padding:10px 12px;font-size:12px;color:var(--dbc-ink);box-shadow:0 2px 8px rgba(15,42,92,.06)}
.mu-form{display:grid;grid-template-columns:auto 1fr;gap:5px 10px;align-items:center}
.mu-l{color:var(--dbc-muted);font-size:11px}
.mu-in{padding:3px 8px;border:1px solid var(--dbc-line);border-radius:6px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mu-item{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;align-items:center}
.mu-item--b{opacity:.85}
.mu-chip{grid-row:span 2;align-self:start;padding:2px 7px;border-radius:999px;background:var(--dbc-blue-50);color:var(--dbc-blue-700);font-size:10.5px;font-weight:700}
.mu-name{font-weight:600;line-height:1.3}
.mu-price{font-weight:700;color:var(--dbc-ink)}
.mu-share{display:grid;grid-template-columns:52px 1fr;gap:6px 10px;align-items:center}
.mu-qr{grid-row:span 3;display:block;width:52px;height:52px}
.mu-qr svg{width:100%;height:100%}
.mu-p{display:inline-flex;align-items:center;gap:5px;font-weight:600;font-size:11.5px}
.mu-p .pub-icon{width:13px;height:13px}
.mu-p--wa .pub-icon{color:#1C7A46}
.mu-inbox{display:grid;gap:6px}
.mu-h{display:inline-flex;align-items:center;gap:6px;font-weight:700}
.mu-h .pub-icon{width:14px;height:14px;color:var(--dbc-blue)}
.mu-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 0;border-top:1px solid var(--dbc-line-soft,#EEF2F7)}
.mu-new{padding:1px 7px;border-radius:999px;background:#FFF4E0;color:#9A5B00;font-size:10.5px}
.mu-deal{display:grid;justify-items:start;gap:4px}
.mu-st{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:999px;font-weight:700;font-size:11.5px}
.mu-st .pub-icon{width:13px;height:13px}
.mu-st--ok{background:#E9F7EF;color:#1C7A46}
.mu-st--order{background:#FFF4E0;color:#9A5B00}
.mu-arrow{color:var(--dbc-muted);padding-left:10px}
.mu-arrow .pub-icon{width:14px;height:14px}
.hw-lanes{display:grid;gap:12px;margin-top:16px}
.hw-lane{border-radius:16px;padding:14px 16px;background:#fff;border:1px solid var(--dbc-line)}
.hw-lt{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:16px;font-weight:700}
.hw-lane--b2b .hw-lt .pub-icon{color:#9A5B00}
.hw-lane--direct .hw-lt .pub-icon{color:#1C7A46}
.hw-path{list-style:none;margin:0;padding:0;display:grid;gap:5px;counter-reset:hw}
.hw-path li{counter-increment:hw;display:flex;align-items:center;gap:10px;font-size:14.5px;line-height:1.4}
.hw-path li::before{content:counter(hw);flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--dbc-surface);border:1px solid var(--dbc-line);font-size:13px;font-weight:700;color:var(--dbc-ink)}
.hw-note{display:flex;align-items:flex-start;gap:8px;margin:14px 0 0;color:var(--dbc-slate);font-size:14px;line-height:1.55}
.hw-note .pub-icon{flex:0 0 auto;color:var(--dbc-blue);margin-top:2px}
@media(min-width:560px){.hw-steps{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0;padding:0;overflow:visible}.hw-steps>.hw-step{flex:none}}
@media(min-width:768px){.hw-lanes{grid-template-columns:1fr 1fr;gap:20px}.hw-path{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.hw-steps{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.hw-vis{min-height:136px}.hw-path{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------------------------------------------------------------- S7 the deal story (homepage micro-refinement)
   One sample deal in three stages. Below 1200 px: one swipe strip; each stage starts with a compact label that stays
   pinned at the left while its cards pass (sticky), cards snap with the next one peeking. From 1200 px: a 6-column board -
   stage 1 (one card) and stage 2 (five cards) share the first row, stage 3's three cards span the second row, so the
   section is balanced edge to edge. Colour is an accent only: neutral for the requirement, blue for the seller stage,
   green for "business happens"; each card's role chip and step number carry buyer (green) / seller (blue). */
.wf-tag{display:flex;align-items:center;justify-content:center;gap:6px;margin:-4px 0 14px;color:var(--dbc-muted);font-size:13.5px;font-weight:600;text-align:center}
.wf-strip{list-style:none;display:flex;gap:14px;margin:0 -16px;padding:4px 16px 6px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 16px;overscroll-behavior-x:contain;scrollbar-width:none}
.wf-strip::-webkit-scrollbar{display:none}
.wf-stage{--wf-accent:#334155;--wf-tint:#F1F5F9;flex:0 0 auto;display:flex;flex-direction:column;gap:7px;min-width:0}
.wf-stage--2{--wf-accent:var(--dbc-blue-700,#1557B8);--wf-tint:var(--dbc-blue-50,#EEF4FD)}
.wf-stage--3{--wf-accent:var(--hp-green-ink,#16794A);--wf-tint:#E9F7EF}
.wf-st{position:sticky;left:0;z-index:1;align-self:flex-start;display:inline-flex;align-items:center;gap:7px;margin:0;padding:3px 11px 3px 3px;border:1px solid var(--dbc-line);border-radius:999px;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.06);font-size:13.5px;line-height:1.25;white-space:nowrap}
.wf-sn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--wf-accent);font-size:12px;font-weight:800}
.wf-sname{font-weight:700}
.wf-ss{display:none;font-size:12px;font-weight:500}
.wf-cards{list-style:none;display:flex;gap:12px;margin:0;padding:0}
.wf-step{position:relative;flex:0 0 228px;scroll-snap-align:start;display:flex;flex-direction:column;border:1px solid var(--dbc-line);border-radius:14px;background:#fff;padding:10px 12px 10px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
/* a small chevron in the gap: the next step follows */
.wf-step:not(:last-child)::after,.wf-stage--1 .wf-step::after{content:"";position:absolute;top:19px;right:-10px;width:6px;height:6px;border-top:2px solid #B6C2D2;border-right:2px solid #B6C2D2;transform:rotate(45deg)}
.wf-who{display:flex;align-items:center;gap:7px;margin:0 0 3px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.wf-step--buyer .wf-who{color:#1C7A46}
.wf-step--seller .wf-who{color:var(--dbc-blue-700)}
.wf-n{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:11.5px;font-weight:800}
.wf-step--buyer .wf-n{background:#E9F7EF;color:#1C7A46;box-shadow:inset 0 0 0 1px #BFE5CE}
.wf-step--seller .wf-n{background:var(--dbc-blue-50);color:var(--dbc-blue-700);box-shadow:inset 0 0 0 1px #BFD3F2}
.wf-t{margin:0 0 8px;font-size:15px;font-weight:700;line-height:1.3}
.wf-screen{margin-top:auto;display:grid;gap:5px;padding:10px;border-radius:10px;background:var(--dbc-surface);font-family:'Inter',system-ui,sans-serif;font-size:12px;color:var(--dbc-ink)}
.ws-k{font-size:11px;font-weight:700;color:var(--dbc-muted);letter-spacing:.02em}
.ws-b{font-weight:600;line-height:1.35}
.ws-m{color:var(--dbc-slate);font-size:11.5px}
.ws-pill{justify-self:start;padding:2px 8px;border-radius:999px;background:#fff;border:1px solid var(--dbc-line);font-size:11px;font-weight:700;color:var(--dbc-slate)}
.ws-pill--new,.ws-pill--warn{background:#FFF4E0;border-color:#F5D9A8;color:#9A5B00}
.ws-pill--info{background:var(--dbc-blue-50);border-color:#BFD3F2;color:var(--dbc-blue-700)}
.ws-pill--ok{background:#E9F7EF;border-color:#BFE5CE;color:#1C7A46}
.ws-h{position:relative;padding-left:14px;font-size:11.5px;color:var(--dbc-slate)}
.ws-h::before{content:"";position:absolute;left:2px;top:5px;width:7px;height:7px;border-radius:50%;background:var(--dbc-green)}
.ws-h--end{font-weight:700;color:var(--dbc-ink)}
.ws-bars{display:grid;gap:4px}
.ws-bars i{display:block;height:7px;border-radius:4px;background:#DCE4EF}
.ws-bars i:nth-child(2){width:86%}
.ws-bars i:nth-child(3){width:58%}
@media(max-width:479.98px){.wf-tag{gap:5px;margin-bottom:10px;font-size:12.5px}.wf-tag .pub-icon{width:14px;height:14px}}
@media(min-width:480px){.wf-ss{display:inline}}
@media(max-width:1199.98px){.wf-stage--2 .wf-step:last-child::after{content:"";position:absolute;top:19px;right:-10px;width:6px;height:6px;border-top:2px solid #B6C2D2;border-right:2px solid #B6C2D2;transform:rotate(45deg)}}
@media(min-width:768px){.wf-strip{margin:0 -24px;padding:4px 24px 10px;scroll-padding:0 24px}.wf-step{flex-basis:236px}}
/* a mouse has no swipe: tablets and small laptops (768-1199 px) with a fine pointer get a thin scrollbar under the strip */
@media(min-width:768px) and (max-width:1199.98px) and (hover:hover) and (pointer:fine){.wf-strip{scrollbar-width:thin;scrollbar-color:#CBD5E1 transparent}.wf-strip::-webkit-scrollbar{display:block;height:8px}.wf-strip::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:4px}}
@media(min-width:1200px){
  .wf-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:22px 14px;margin:0;padding:0;overflow:visible}
  .wf-stage{display:grid;grid-template-rows:auto 1fr;gap:12px}
  .wf-stage--1{grid-column:1/2}
  .wf-stage--2{grid-column:2/7}
  .wf-stage--3{grid-column:1/7}
  .wf-st{position:static;align-self:stretch;display:flex;flex-wrap:wrap;gap:4px 10px;padding:0 0 10px;border:0;border-bottom:2px solid var(--wf-tint);border-radius:0;background:none;box-shadow:none;white-space:normal;min-height:38px}
  .wf-st::after{content:"";flex:1 1 auto}
  .wf-ss{display:inline-flex;align-items:center;padding:2px 9px;border-radius:999px;background:var(--wf-tint);color:var(--wf-accent)}
  .wf-stage--1 .wf-ss{display:none}
  .wf-cards{display:grid;gap:14px}
  .wf-stage--2 .wf-cards{grid-template-columns:repeat(5,minmax(0,1fr))}
  .wf-stage--3 .wf-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wf-step{flex:none}
  .wf-step:not(:last-child)::after,.wf-stage--1 .wf-step::after{right:-11px}
  /* stage 3: wide cards - role + title on the left, the screen on the right */
  .wf-stage--3 .wf-step{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-rows:auto 1fr;column-gap:14px;align-items:start}
  .wf-stage--3 .wf-who{grid-column:1}
  .wf-stage--3 .wf-t{grid-column:1;margin:0}
  .wf-stage--3 .wf-screen{grid-column:2;grid-row:1/3;margin:0}
}

/* ---------------------------------------------------------------- S8 trust, kept light */
.hs-trust{background:var(--dbc-surface)}
.tr-st{margin:0 0 10px;font-size:17px;font-weight:700;text-align:center}
.tr-signals{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:10px}
.tr-sig{display:grid;grid-template-columns:118px 1fr;gap:12px;align-items:center;border:1px solid var(--dbc-line);border-radius:14px;background:#fff;padding:12px}
.tr-sig h4{margin:0 0 2px;font-size:15.5px;font-weight:700}
.tr-sig p{margin:0;color:var(--dbc-slate);font-size:13.5px;line-height:1.45}
.tr-vis{display:flex;flex-wrap:wrap;align-content:center;align-items:center;gap:5px;min-height:76px;padding:9px;border-radius:10px;background:var(--dbc-surface);font-family:'Inter',system-ui,sans-serif;font-size:11px}
.tr-vis .hp-vchip{margin:0;font-size:10px;padding:1px 6px}
.tr-rev{display:flex;align-items:center;justify-content:space-between;width:100%;font-size:11px;font-weight:700;gap:6px}
.tr-rev>span:first-child{display:inline-flex;align-items:center;gap:4px}
.tr-mod{padding:1px 6px;border-radius:999px;background:#E9F7EF;color:#1C7A46;font-size:9.5px;white-space:nowrap}
.tr-bar{display:block;width:100%;height:6px;border-radius:4px;background:#DCE4EF}
.tr-bar--s{width:62%}
.tr-prof{display:flex;align-items:center;gap:8px;width:100%;min-width:0}
.tr-prof>span:last-child{min-width:0}
.tr-prof b{display:block;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-prof small{display:block;color:var(--dbc-muted);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-ini{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;background:var(--dbc-blue);color:#fff;font-weight:700;font-size:11px}
.tr-meta{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;color:var(--dbc-slate);white-space:nowrap}
.tr-ledger{display:grid;gap:10px;margin-bottom:14px}
.tr-col{border-radius:14px;padding:14px 16px;background:#fff;border:1px solid var(--dbc-line)}
.tr-col h3{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:16px;font-weight:700}
.tr-col h3 .pub-icon{color:#1C7A46}
.tr-col--never h3 .pub-icon{color:#B4232A}
.tr-col ul{list-style:none;margin:0;padding:0;display:grid}
.tr-col li{padding:7px 0;border-bottom:1px solid var(--dbc-line-soft,#EEF2F7);font-size:14.5px;line-height:1.4;color:var(--dbc-ink)}
.tr-col li:last-child{border-bottom:0}
@media(min-width:560px){.tr-ledger{grid-template-columns:1fr 1fr;gap:12px}}
@media(min-width:768px){.tr-signals{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}.tr-sig{grid-template-columns:1fr;align-items:start;padding:14px}.tr-vis{min-height:72px;padding:12px;font-size:12px}.tr-sig h4{margin-top:10px;font-size:16.5px}.tr-sig p{font-size:14.5px}.tr-ledger{gap:16px}}

/* ---------------------------------------------------------------- S9 pricing extras */
.pr-value{margin:16px 0 0}
.pr-value h3{margin:0 0 8px;font-size:17px;font-weight:700}
.pr-value ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pr-value li{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--dbc-ink)}
.pr-value .pub-icon{flex:0 0 auto;color:var(--dbc-green)}
.hp-inc li.is-muted{color:var(--dbc-muted)}
.hp-inc li.is-muted .pub-icon{color:var(--dbc-muted)}

/* ---------------------------------------------------------------- shared */
.ct--types .ct-list:focus-visible,.wf-strip:focus-visible,.hw-steps:focus-visible{outline:2px solid var(--dbc-blue);outline-offset:2px;border-radius:12px}
#how,#services,#use-cases,#frontPricingTab,#business-types,#your-dukaan,#workflow,#compare,#trust,#faq{scroll-margin-top:calc(var(--dbc-nav-h,64px) + 8px)}
@media(prefers-reduced-motion:reduce){.wf-strip,.ct--types .ct-list,.hw-steps{scroll-behavior:auto}}
@media(forced-colors:active){.yd-cover::after{display:none}.ty-body{background:Canvas;color:CanvasText}.ty-t,.wf-st{color:CanvasText;background:Canvas;border:1px solid CanvasText}}

/* ---------------------------------------------------------------- refinement fixes + phone compaction */
/* the stage labels keep their colours whatever the heading colour rules say */
.hs-wf h3.wf-st,.hs-wf .wf-st .wf-sname{color:var(--dbc-ink)}.hs-wf .wf-st .wf-sn{color:#fff}
@media(max-width:1199.98px){.hs-wf .wf-st .wf-ss{color:var(--dbc-muted)}}
/* the "with" picture never clips its rows: grid items may shrink */
.cv-rows,.cv-row,.cv-dukaan,.cmp-vis--o>*{min-width:0}
.cv-row--chain{overflow:hidden}
.cv-row--share>span:first-child{white-space:normal;overflow:visible;line-height:1.35}
.cv-row--chain .svm-st{font-size:10.5px;padding:2px 7px}
@media(max-width:767.98px){
  /* hero: the Lead Inbox slip overlays the phone from 360 px (as it does from 480 px in the base sheet) */
  .hs-hero .hp-figcap--under{margin-top:10px}
  /* sample storefront: four cards and the share box on phones; hours / reviews boxes return from 560 px */
  .yd-grid .yd-card:nth-child(5){display:none}
  .yd-box:not(.yd-box--share){display:none}
  .yd-body{gap:10px;padding:12px}
  .yd-facts{gap:6px}
  .yd-facts li{font-size:14px}
  /* capabilities: denser lists */
  .sv-group{padding:14px}
  .sv-head{margin-bottom:10px}
  .sv-vis{min-height:56px;padding:8px 10px;margin-bottom:8px}
  .sv-list li{font-size:13.5px;line-height:1.35;gap:7px;padding:5px 0}
  .sv-d{font-size:12.5px}
  .sv-ii{width:24px;height:24px}
  /* compare: lighter pictures, tighter pairs */
  .cmp-vis{min-height:0;padding:10px}
  .cv-photos{height:76px}
  .cmp-rows{gap:6px}
  .cmp-pair{padding:8px 12px;font-size:14px}
  /* how it works: the two buyer paths side by side from 480 px */
  .hw-lane{padding:12px 14px}
  /* trust */
  .tr-sig{padding:10px;gap:10px}
  .tr-col{padding:12px 14px}
  .tr-col li{padding:6px 0;font-size:14px}
  /* pricing: the "why it is worth trying" list repeats the page on phones; the bill carries the facts */
  .pr-value{display:none}
}
@media(min-width:360px) and (max-width:559.98px){
  .yd-grid .yd-card:nth-child(5){display:none}
}
@media(min-width:480px) and (max-width:767.98px){
  .hw-lanes{grid-template-columns:1fr 1fr;gap:12px}
  .tr-ledger{grid-template-columns:1fr 1fr}
}
@media(min-width:560px) and (max-width:767.98px){
  .yd-box:not(.yd-box--share){display:grid}
}
@media(max-width:767.98px){
  /* phones: the sample storefront keeps the one fact that appears nowhere else (the design count) */
  .yd-facts li:nth-child(n+2){display:none}
}
@media(min-width:360px) and (max-width:559.98px){
  /* phones: the two comparison pictures sit side by side, each reduced to its strongest cue */
  .cmp{grid-template-columns:1fr 1fr;gap:8px}
  .cmp-col{padding:10px}
  .cmp-t{font-size:14px;gap:6px;margin-bottom:8px}
  .cmp-t .pub-icon{width:16px;height:16px}
  .cmp-vis{padding:8px;font-size:10.5px}
  .cmp-vis--w{grid-template-columns:1fr;gap:6px}
  .cv-reg{display:none}
  .cv-photos{height:58px}
  .cv-photos i{width:42px;height:42px}
  .cv-photos i:nth-child(2){left:26px}
  .cv-photos i:nth-child(3){left:50px;top:14px}
  .cv-b{padding:4px 8px}
  .cv-dukaan{padding:6px 8px}
  .cv-tiles i{width:34px;height:28px}
  .cv-row{padding:4px 7px}
  .cv-row--share{display:none}
  .cv-row--chain .svm-st{font-size:9.5px;padding:1px 6px}
}

/* ---------------------------------------------------------------- product carousel + real product photos (visual delta) */
.hs-pc .hp-head{margin-bottom:16px}
.ct--products{position:relative}
.ct--products .ct-item{flex-basis:74%}
.pc-card{display:flex;flex-direction:column;width:100%;overflow:hidden;border:1px solid var(--dbc-line);border-radius:14px;background:#fff;box-shadow:var(--hp-shadow-card)}
.pc-media{position:relative;aspect-ratio:4/3;background:linear-gradient(160deg,#F1F5F9,#E2E8F0)}
.pc-media picture,.pc-img{position:absolute;inset:0;width:100%;height:100%}
.pc-img{object-fit:cover;display:block}
.pc-ex{position:absolute;top:10px;left:10px;z-index:1;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.94);color:var(--dbc-ink);font-size:11.5px;font-weight:700;letter-spacing:.02em;box-shadow:0 1px 3px rgba(15,42,92,.12)}
.pc-body{display:flex;flex-direction:column;gap:4px;flex:1;padding:12px 14px 14px}
.pc-cat{align-self:flex-start;padding:2px 8px;border-radius:999px;background:var(--dbc-blue-50);color:var(--dbc-blue-700);font-size:11.5px;font-weight:600}
.hs-pc .pc-t{margin:2px 0 0;min-height:2.7em;font-size:15px;line-height:1.35;font-weight:700;color:var(--dbc-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc-price{margin:0;font-size:15px;font-weight:700;color:var(--dbc-ink)}
.pc-price--req{font-size:13px;font-weight:600;color:var(--dbc-muted)}
.pc-cta{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin-top:auto;padding:6px 12px;border:1px solid var(--dbc-blue);border-radius:999px;color:var(--dbc-blue-700);font-size:13px;font-weight:600}
.pc-price+.pc-cta{margin-top:6px}
@media(min-width:768px){.ct--products .ct-item{flex-basis:calc((100% - 32px)/2.4)}.ct--products .ct-ctl{position:static;margin:-4px 0 12px;justify-content:flex-end}}
@media(min-width:1024px){.ct--products .ct-item{flex-basis:calc((100% - 48px)/4)}}
.ct--products .ct-list:focus-visible{outline:2px solid var(--dbc-blue);outline-offset:2px;border-radius:12px}
@media(prefers-reduced-motion:reduce){.ct--products .ct-list{scroll-behavior:auto}}
@media(forced-colors:active){.pc-ex,.pc-cat,.pc-cta{border:1px solid CanvasText}}
#products{scroll-margin-top:calc(var(--dbc-nav-h,64px) + 8px)}
/* the mocks show real product photos (same files as the carousel; a service keeps its icon) */
.yd-media picture{position:absolute;inset:0}
.yd-media .yd-ph{display:block;width:100%;height:100%;object-fit:cover}
.yd-kind{z-index:1}
.svm-tile picture{display:block;width:100%}
.svm-tile img{display:block;width:100%;height:40px;object-fit:cover;border-radius:5px}
.svm-th{flex:0 0 auto;width:22px;height:22px;border-radius:5px;object-fit:cover;display:block}
.svm-th--chain{width:26px;height:26px}
.cv-photos i,.cv-tiles i{overflow:hidden;padding:0}
.cv-photos i picture,.cv-tiles i picture{display:block;width:100%;height:100%}
.cv-photos i img,.cv-tiles i img{display:block;width:100%;height:100%;object-fit:cover}
.pc-price{min-height:22px;display:flex;align-items:center}
@media(max-width:767.98px){.hs-pc{padding-top:16px}.pc-body{gap:3px;padding:10px 12px 12px}.hs-pc .pc-t{font-size:14.5px}.pc-cta{padding:5px 11px;font-size:12.5px}}
.svm-tile{width:auto;min-width:64px}

/* ---------------------------------------------------------------- "One Dukaan" capability strip */
.sv-eye{display:inline-block;margin:0 0 10px;padding:4px 12px;border-radius:999px;background:#FFF4E0;color:#9A5B00;font-size:13px;font-weight:700;letter-spacing:.02em}
.sv-stats{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:960px;margin:0 auto 22px;padding:0}
.sv-stat{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--dbc-line);border-radius:14px;background:#fff;box-shadow:var(--hp-shadow-card)}
.sv-stat b{font-size:26px;line-height:1.1;font-weight:800;color:var(--dbc-blue-700);letter-spacing:-.01em}
.sv-stat .sv-rs{font-size:.7em;margin-right:1px}
.sv-stat span{font-size:13px;line-height:1.35;color:var(--dbc-slate)}
.sv-stat small{font-size:12px;font-weight:600;color:#9A5B00}
.sv-stat--big{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 10px;background:linear-gradient(135deg,#0F2A5C 0%,#1769E0 70%,#3B8BEF 100%);border:0;color:#fff}
.sv-stat--big b{font-size:40px;color:#fff}
.sv-stat--big span{font-size:16px;font-weight:600;color:#fff}
.sv-stat--big small{flex-basis:100%;color:#FFD9A0}
.sv-count{display:inline-block;margin:2px 0 0;padding:1px 8px;border-radius:999px;background:var(--dbc-blue-50);color:var(--dbc-blue-700);font-size:11.5px;font-weight:700}
@media(min-width:768px){.sv-stats{grid-template-columns:1.6fr 1fr 1fr 1fr}.sv-stat--big{grid-column:auto;flex-direction:column;flex-wrap:nowrap;gap:2px}.sv-stat--big small{flex-basis:auto}}


/* ---------------------------------------------------------------- industry showcase (business types + seller types merged)
   White card: a wide photo (17:9 band of a 16:9 crop) with the "Example" chip and the trade, the seller types, a sample storefront
   screen (two listed products, the storefront actions, one Lead Inbox line) and the deal path. Narrow cards (1024 px 4-up, small
   phones) tighten through container queries on the card body and the sample screen. */
.hs-anchor{display:block;position:relative;top:0;height:0;scroll-margin-top:calc(var(--dbc-nav-h,64px) + 8px)}
.hs-types .ct-item{min-width:0}
.hs-types .ty-card{position:relative;display:flex;flex-direction:column;width:100%;min-width:0;overflow:hidden;border:1px solid var(--dbc-line);border-radius:16px;background:#fff;color:var(--dbc-ink);box-shadow:var(--hp-shadow-card,0 8px 24px rgba(15,42,92,.12))}
.ty-media{position:relative;flex:0 0 auto;aspect-ratio:17/9;overflow:hidden;background:linear-gradient(135deg,#0F2A5C 0%,#1769E0 62%,#3B8BEF 100%)}
.ty-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,22,48,0) 42%,rgba(9,22,48,.55) 70%,rgba(9,22,48,.9) 100%);pointer-events:none}
.ty-media picture{position:absolute;inset:0}
.ty-img{width:100%;height:100%;object-fit:cover;display:block}
.ty-img.is-broken{visibility:hidden}
.ty-ex{position:absolute;top:12px;left:12px;z-index:2;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.94);color:var(--dbc-ink);font-size:12px;font-weight:700;letter-spacing:.02em}
.hs-types .ty-media .ty-t{position:absolute;left:14px;right:14px;bottom:12px;z-index:2;margin:0;font-size:19px;line-height:1.2;font-weight:700;color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.hs-types .ty-body{position:relative;z-index:2;display:flex;flex-direction:column;flex:1;gap:9px;min-width:0;padding:12px 14px 14px;container-type:inline-size}
@media(min-width:1024px){.hs-types .ty-media .ty-t{font-size:18px}.hs-types .ty-body{padding-left:12px;padding-right:12px}}
.ty-who{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.ty-who li{padding:2px 9px;border-radius:999px;background:var(--dbc-blue-50);color:var(--dbc-blue-700);font-size:12px;font-weight:600}
.ty-mock{display:flex;flex-direction:column;gap:5px;min-width:0;padding:7px;border-radius:10px;background:linear-gradient(180deg,#F4F8FE 0%,#EAF2FD 100%);font-family:'Inter',system-ui,sans-serif;font-size:11.5px;color:var(--dbc-ink);container-type:inline-size}
.ty-row{display:flex;align-items:center;gap:8px;min-width:0;padding:4px 7px;border:1px solid var(--dbc-line);border-radius:8px;background:#fff}
.ty-row picture{display:block;flex:0 0 auto}
.ty-th{flex:0 0 auto;display:block;width:30px;height:30px;border-radius:6px;object-fit:cover}
.ty-ic{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:6px;background:var(--dbc-blue-50);color:var(--dbc-blue-700)}
.ty-row b{flex:1;min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis;font-weight:600;line-height:1.3}
.ty-row i{flex:0 0 auto;font-style:normal;font-weight:700;white-space:nowrap}
/* a listed product: photo | name over price */
.hs-types .ty-row:not(.ty-row--lead){display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:8px;row-gap:1px;align-items:center}
.hs-types .ty-row:not(.ty-row--lead) picture{grid-row:span 2}
.hs-types .ty-row:not(.ty-row--lead) b{line-height:1.25}
.hs-types .ty-row:not(.ty-row--lead) i{justify-self:start;line-height:1.25}
/* the Lead Inbox line: "Lead Inbox" + a real status over the enquiry */
.ty-row--lead b{line-height:1.25;-webkit-line-clamp:3}
.ty-row--lead b small{display:flex;align-items:center;gap:5px;margin-bottom:1px;font-size:9.5px;font-weight:600;color:var(--dbc-muted)}
.ty-chip{padding:1px 7px;border-radius:999px;font-size:10.5px}
.ty-row--lead .ty-chip{padding:0 6px;font-size:9.5px;line-height:15px}
.ty-chip--info{background:#E8F1FE;color:#1756B8}
.ty-chip--new{background:#FFF4E0;color:#9A5B00}
.ty-chip--muted{padding:0;color:var(--dbc-muted);font-weight:600!important}
/* the storefront's actions (decoration, never controls) */
.ty-acts{display:flex;flex-wrap:wrap;gap:4px}
.ty-act{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:3px;padding:3px 6px;border:1px solid var(--dbc-line);border-radius:999px;background:#fff;font-size:10px;font-weight:700;white-space:nowrap;color:var(--dbc-ink)}
.ty-act svg{flex:0 0 auto;width:11px;height:11px}
.ty-act--enquire{background:var(--dbc-blue);border-color:var(--dbc-blue);color:#fff}
.ty-act--wa{background:#1A7F4B;border-color:#1A7F4B;color:#fff}
.ty-flow{display:flex;flex-wrap:wrap;align-items:center;gap:3px;margin:auto 0 0;font-size:11px;font-weight:600;color:var(--dbc-ink)}
.ty-flow .pub-icon{width:10px;height:10px;color:var(--dbc-muted)}
.ty-tag{padding:1px 6px;border-radius:999px;font-size:10.5px;font-weight:700}
.ty-tag--b2b{background:#FFF4E0;color:#9A5B00}
.ty-tag--direct{background:#E7F6EC;color:#1B7A3D}
.hs-types .uc-note{margin-top:10px}
@container (max-width:219px){.ty-flow{gap:2px;font-size:10.5px}.ty-flow .pub-icon{width:8px;height:8px}.ty-tag{padding:1px 4px}.ty-who{gap:5px}.ty-who li{padding:2px 7px;font-size:11px}}
@container (max-width:214px){.ty-act svg{display:none}.ty-acts{gap:3px}.ty-act{padding:3px 4px}.ty-row--lead .ty-ic{display:none}}
@container (max-width:190px){.ty-who li{padding:2px 6px;font-size:10.5px}}
@media(forced-colors:active){.ty-media::after{display:none}.ty-who li,.ty-tag,.ty-chip,.ty-act{border:1px solid CanvasText}}

/* ---------------------------------------------------------------- hero phone + its two cards (homepage micro-refinement)
   The phone shows the illustrative "YB Industrial Supplies" sample with the carousel's licensed product photos; every
   text in the visual is at least 11.5 px. Below 1240 px the QR & Share card and the Lead Inbox sit side by side just under
   the phone (tucked under its bottom bezel, never over its Enquire / WhatsApp / Quote bar; the Lead Inbox keeps its title,
   the product and the deal steps); under 360 px they stack.
   From 1240 px they float at the phone's lower left / right and overlap only its bezel, so no product is covered and the
   Lead Inbox stays inside the viewport. No tilt, so the three pieces line up. */
.hs-hero .hp-media picture{position:absolute;inset:0}
.hs-hero .hp-ph{width:100%;height:100%;object-fit:cover;display:block}
.hs-hero .hp-chip{z-index:1;box-shadow:0 1px 2px rgba(15,23,42,.14);font-size:11.5px;padding:1px 7px}
.hs-hero .hp-grid{-webkit-mask:linear-gradient(180deg,#000 78%,rgba(0,0,0,.3));mask:linear-gradient(180deg,#000 78%,rgba(0,0,0,.3))}
.hs-hero .hp-addr{font-size:11.5px}
.hs-hero .hp-meta{font-size:11.5px}
/* the industry on its own line, then B2B & B2C and the city: the same two lines in every font (no shift when Inter loads) */
.hs-hero .hp-meta span:first-child{flex-basis:100%}
.hs-hero .hp-tabs{gap:12px;font-size:12px}
.hs-hero .hp-price.req{font-size:12px}
.hs-hero .hp-bar span{font-size:12px}
.hs-hero .hp-slip,.hs-hero .hp-share{--hp-rot:0deg}
.hs-hero .hp-slip .r1{flex-wrap:wrap;row-gap:4px}
.hs-hero .hp-slip .r2{font-size:12px}
.hs-hero .hp-new{padding:2px 6px;font-size:11.5px}
/* the QR & Share card has one compact layout at every width: the code and its title, the three dashboard actions below */
.hs-hero .hp-share{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;align-content:start;padding:11px 10px;transform:none}
.hs-hero .hp-share .sh{display:contents}
.hs-hero .hp-share .qr{grid-column:1;grid-row:1;width:44px;height:44px}
/* English: only "QR & Share" beside the code (the "From your dashboard" words are dropped); Hindi keeps its full tag */
.hs-hero .hp-share .tag{display:block;grid-column:2;grid-row:1;align-self:center;margin:0;font-size:0;line-height:1.3}
.hs-hero .hp-share .tag span{font-size:12px;font-weight:700;color:var(--dbc-ink)}
.hs-hero .hp-share .ps{grid-column:1/-1;grid-row:2;display:flex;flex-direction:column;flex-wrap:nowrap;gap:5px}
.hs-hero .hp-share .p{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;border:1px solid var(--dbc-line);border-radius:999px;background:#fff;color:var(--dbc-ink);font-size:12px;font-weight:600;white-space:nowrap}
.hs-hero .hp-share .p .pub-icon{width:13px;height:13px;flex:0 0 auto}
.hs-hero .hp-share .p.wa{background:var(--hp-green-ink);border-color:var(--hp-green-ink);color:#fff}
@media(max-width:1239.98px){
  .hs-hero .hp-figure{width:100%;max-width:400px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:10px;align-items:start}
  .hs-hero .hp-phone{grid-column:1/-1;justify-self:center;width:var(--hp-phone-w)}
  .hs-hero .hp-slip,.hs-hero .hp-share{position:relative;inset:auto;grid-row:2;width:auto;margin:-14px 0 0;transform:none}
  .hs-hero .hp-share{grid-column:1}
  .hs-hero .hp-slip{grid-column:2;padding:11px 11px 10px}
  .hs-hero .hp-slip .hp-new,.hs-hero .hp-slip .r2{display:none}
  .hs-hero .hp-figcap{grid-column:1/-1}
  .hs-hero .hp-figcap--under{margin-top:6px}
}
@media(max-width:359.98px){
  .hs-hero .hp-figure{grid-template-columns:minmax(0,1fr);row-gap:10px}
  .hs-hero .hp-slip{grid-column:1;grid-row:2}
  .hs-hero .hp-share{grid-column:1;grid-row:3;margin:0}
  .hs-hero .hp-share .ps{flex-direction:row;flex-wrap:wrap}
}
@media(min-width:1240px){
  /* fixed widths (not text-sized), so the web-font swap does not move the cards or the caption */
  .hs-hero .hp-figure{--hp-phone-w:272px}
  .hs-hero .hp-slip{right:auto;bottom:auto;left:calc(100% - 14px);top:276px;width:176px;padding:12px 13px 11px}
  .hs-hero .hp-share{right:calc(100% - 14px);bottom:auto;left:auto;top:398px;width:176px}
  .hs-hero .hp-figcap{max-width:none}
}
@media(min-width:1240px) and (max-width:1439.98px){.hs-hero .hp-slip .r3{min-height:3em}}
@media(min-width:1440px){
  .hs-hero .hp-figure{--hp-phone-w:316px}
  .hs-hero .hp-slip{top:322px;width:202px;padding:14px 14px 12px}
  .hs-hero .hp-share{top:400px}
}
/* ---------------------------------------------------------------- product strip Pause / Play (WCAG 2.2.2) on phones:
   a round button over the top-right corner of the first card photo (a card is 74 % of the strip and its chip sits
   top-left), so it never covers a chip and adds no row */
@media(max-width:767.98px){.ct--products{position:relative}.ct--products .ct-ctl{top:12px;right:auto;left:calc(74% - 52px);z-index:2}.ct--products .sc-pp{box-shadow:0 2px 8px rgba(15,23,42,.18)}}