/* =====================================================================
   Business Standard page: the few things that differ from the shared
   publication styles (publication.css). Built from forbes.css (9 Oct 2026):
   Forbes-only rules (cover collage, device composite, magazine card
   positions) are gone; the Business Standard additions are at the end.
   ===================================================================== */

/* hero typewriter (after the CSS-only pen by Alvaro Montoro): the first H1 line types through
   several taglines above a fixed "Business Standard?". Screen readers and search engines get the
   fixed sr-only line; the typed text is aria-hidden. One line, never wraps, so nothing jumps. */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero h1{max-width:16ch}
.hero .punchline{max-width:30ch;text-wrap:balance}
.hero .sub.what{max-width:62ch;text-wrap:balance}
.hero h1 .l1{white-space:nowrap}
.hero h1 .tw::after{content:"";display:inline-block;width:.07em;height:.82em;margin-left:.08em;vertical-align:-.06em;background:currentColor;border-radius:1px;animation:tw-blink 1s steps(1,end) infinite}
@keyframes tw-blink{50%{opacity:0}}
@media (max-width:719px){ .hero h1 .l1{font-size:var(--tw-fs,.8em)} .hero h1 em{white-space:nowrap;font-size:.94em} }
@media (prefers-reduced-motion:reduce){ .hero h1 .tw::after{animation:none;opacity:0} }

/* in-section call prompts (ncta.py): a quiet card after Industries, Formats, How and the FAQ;
   Call is the button, WhatsApp the text link. Same look on every page. */
.ncta{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 22px;padding:16px 20px;border-radius:20px;background:var(--paper);border:1px solid var(--line)}
.ncta p{margin:0;font-size:16px;line-height:1.45;max-width:60ch}
.ncta p b{font-weight:600}
.ncta p span{color:var(--muted)}
.ncta-btns{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px}
.nlink{display:inline-flex;align-items:center;gap:7px;min-height:44px;font-weight:500;font-size:15px;color:var(--green-text);text-decoration:underline;text-underline-offset:4px}
.nlink .i{width:18px;height:18px}
.nlink:hover{text-decoration-thickness:2px}
.ncta-line{margin:18px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.ncta-line b{font-weight:600;margin-right:4px}
@media (max-width:719px){ .ncta{padding:16px} .ncta-btns{width:100%} .ncta-btns .btn{flex:1 1 auto;justify-content:center} }

/* industry cards, v2: photo on top in full view, fading into the teal panel; the text sits
   below the photo, so it never covers a face. Replaces the full-bleed overlay from publication.css. */
.ind.img{padding:0 0 20px;min-height:0;align-content:start;row-gap:10px;background:linear-gradient(180deg,#0E3942 0%,#0A2C35 100%)}
.ind.img > img{position:relative;inset:auto;display:block;width:100%;height:auto;aspect-ratio:4/3.1;object-fit:cover;object-position:50% 18%;-webkit-mask-image:linear-gradient(180deg,#000 64%,transparent 100%);mask-image:linear-gradient(180deg,#000 64%,transparent 100%)}
.ind.img::after{content:none}
.ind.img > *:not(img):not(.pill):not(.sheen){margin-inline:20px}
.ind.img .pill{position:absolute;top:14px;left:14px;z-index:3;margin:0;background:rgba(10,44,53,.55)}
.ind.img .top{margin-top:-30px;align-items:flex-end;min-height:48px}
.ind.img h3{font-size:19px;text-shadow:0 1px 12px rgba(10,44,53,.6)}
.ind.img p{font-size:14.5px;line-height:1.5}
@media (max-width:719px){ .ind.img{min-height:0} .ind.img > img{aspect-ratio:4/3.3} }

/* 100% money-back guarantee (hero pill + section) */
.hero .mbg-pill{margin:16px auto 0;display:flex;align-items:center;justify-content:center;gap:9px;width:fit-content;max-width:100%;padding:8px 16px 8px 12px;border-radius:999px;background:var(--paper-2);border:1px solid var(--line-2);color:var(--ink);font-size:15px;line-height:1.35;text-align:left}
.hero .mbg-pill .i{width:20px;height:20px;color:var(--green-text)}
.hero .mbg-pill b{font-weight:600;color:var(--green-text)}
.mbg{padding-top:0}
.mbg-card{display:grid;gap:24px;align-items:center;padding:28px 22px;border-radius:28px;background:linear-gradient(140deg,var(--deep-2) 0%,var(--deep) 70%);color:var(--deep-ink);box-shadow:var(--card-shadow)}
.mbg-seal{width:124px;height:124px;border-radius:50%;display:grid;place-content:center;justify-items:center;gap:2px;text-align:center;background:var(--lime);color:var(--lime-ink);box-shadow:0 0 0 8px rgba(201,242,107,.14)}
.mbg-seal .i{width:24px;height:24px}
.mbg-seal b{font-size:34px;line-height:1;letter-spacing:-.04em;font-weight:700}
.mbg-seal span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.mbg .eyebrow{color:var(--deep-muted)}
.mbg h2{color:var(--deep-ink);margin-top:8px;font-size:clamp(1.75rem,4.2vw,2.7rem);line-height:1.08}
.mbg h2 em{color:var(--lime)}
.mbg .lede{color:var(--deep-muted);margin-top:12px;max-width:58ch;font-size:17px;line-height:1.55}
.mbg-points{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px}
.mbg-points li{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:500;color:var(--deep-ink)}
.mbg-points .i{width:18px;height:18px;color:var(--mint)}
.mbg-ctas{margin-top:20px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px}
.mbg-ctas .nlink{color:var(--mint)}
@media (min-width:800px){.mbg-card{grid-template-columns:auto minmax(0,1fr);gap:40px;padding:40px 44px}.mbg-seal{width:160px;height:160px}.mbg-seal b{font-size:42px}}
@media (max-width:519px){.mbg-seal{width:112px;height:112px}.mbg-seal b{font-size:28px}.mbg-seal span{font-size:10px;letter-spacing:.1em}.hero .mbg-pill{font-size:14px}}

/* compact v2: on phones, long card stacks become swipe rows and "why" becomes compact rows (all text stays on the page) */
.swipe-hint{display:none}
@media (max-width:719px){
  .inds.img,.fgroups,.personas,.services,.bs-labels{grid-auto-flow:column;grid-auto-columns:82%;grid-template-columns:none;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:20px;margin-inline:-20px;padding:4px 20px 6px;scrollbar-width:none}
  .personas{grid-auto-columns:72%}
  .services{grid-auto-columns:68%}
  .inds.img::-webkit-scrollbar,.fgroups::-webkit-scrollbar,.personas::-webkit-scrollbar,.services::-webkit-scrollbar,.bs-labels::-webkit-scrollbar{display:none}
  .inds.img>*,.fgroups>*,.personas>*,.services>*,.bs-labels>*{scroll-snap-align:start}
  .inds.img>.lift-wait,.fgroups>.lift-wait,.personas>.lift-wait,.services>.lift-wait,.bs-labels>.lift-wait{opacity:1;transform:none}
  .swipe-hint{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin:6px 0 0;font-size:13px;color:var(--muted)}
  .swipe-hint .i{width:16px;height:16px}
  .why{gap:8px}
  .why div{grid-template-columns:40px minmax(0,1fr);column-gap:14px;row-gap:2px;padding:16px 18px}
  .why .ic{grid-row:span 2}
}

/* step cards keep their content at the top when stretched; three how-notes on wide screens */
.sbody{align-content:start}
@media (min-width:720px){.how-notes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.how-notes{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* other-publications strip */
.pubs2 .rows .track{gap:14px}
.pubs2 .note{padding-inline:20px}
.pubs2 .cl.pubcl{width:auto;display:flex;align-items:center;justify-content:center;min-width:150px;height:64px;padding:0 20px;border-radius:14px;background:#fff;border:1px solid #E4E9E5}
.pubs2 .cl a{text-decoration:none;color:inherit}
.pubs2 .note .nlink{min-height:auto;font-size:12px}
.pubs2 .cl img{width:var(--w);height:var(--h);max-width:none;max-height:none;object-fit:contain}
.pubs2 .head .sub{font-size:15px;color:var(--muted);max-width:52ch;margin-top:2px}
.more-btn{display:none}

/* phone v3: crisp phone layout (text stays in the page; long parts swipe or open on tap) */
@media (max-width:719px){
  section.block{padding-block:44px}
  section.block h2{font-size:30px;line-height:1.08}
  .lede{font-size:16px;line-height:1.55}
  .split{gap:12px}
  .hero .fmt-line,.hero .kw-links{display:none}
  .gp-card{display:none}
  .pub blockquote{display:none}
  .edida .pics{display:none}
  .pub dl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .about .regline{display:none}
  .statgrid div{padding:14px 14px;gap:4px}.statgrid .n{font-size:30px}.statgrid .l{font-size:13px}
  .reg div{padding:10px 16px}.reg dt{font-size:10.5px}.reg dd{font-size:15px}
  .readers,.steps,.why{display:grid;grid-auto-flow:column;grid-auto-columns:84%;grid-template-columns:none;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:20px;margin-inline:-20px;padding:4px 20px 6px;scrollbar-width:none}
  .readers::-webkit-scrollbar,.steps::-webkit-scrollbar,.why::-webkit-scrollbar{display:none}
  .readers>*,.steps>*,.why>*{scroll-snap-align:start}
  .readers>.lift-wait,.steps>.lift-wait,.why>.lift-wait{opacity:1;transform:none}
  .readers{grid-auto-columns:88%;margin-top:14px}
  .steps::before,.steps::after{display:none}
  .step{grid-template-columns:1fr;gap:10px}
  .sbody{align-content:start;height:100%}
  .why{grid-auto-columns:72%}
  .why div{grid-template-columns:1fr;padding:18px}
  .why .ic{grid-row:auto}
  .callsteps{gap:0}
  .callsteps li{padding:12px 0;border-radius:0;background:none;border-bottom:1px solid var(--line)}
  .pricenote .pn-more{display:none}
  .ncta{padding:14px 16px;gap:10px}
  .ncta p span{display:none}
  .more-box:not(.more-open){display:none}
  .more-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;margin-top:14px;border-radius:999px;border:1px solid var(--line-2);background:var(--paper);color:var(--ink);font:600 15px/1 var(--sans);cursor:pointer}
  .mbg-card{padding:22px 18px;gap:14px}
  .mbg-seal{width:84px;height:84px;box-shadow:0 0 0 5px rgba(201,242,107,.14)}
  .mbg-seal .i{width:18px;height:18px}.mbg-seal b{font-size:22px}.mbg-seal span{font-size:8.5px}
  .pubs2 .cl.pubcl{min-width:128px;height:54px;padding:0 16px}
  .pubs2 .cl img{width:calc(var(--w) * .85);height:calc(var(--h) * .85)}
}

/* =====================================================================
   Business Standard additions
   ===================================================================== */

/* ---- Logo slot: the typeset wordmark shows (no logo file is shipped; review_truth.md B2).
   To use the real logo, only once Vishal clears it, put
   <img src="assets/pub/bs-logo.png" alt="" width="512" height="60" decoding="async" onload="this.parentNode.classList.add('ok')">
   back inside each .bslogo, before .bs-wm; the onload adds .ok, which swaps them. ---- */
.bslogo{display:inline-flex;align-items:center;line-height:1}
.bslogo img{display:none;height:100%;width:auto;max-width:100%;object-fit:contain}
.bslogo.ok img{display:block}
.bslogo.ok .bs-wm{display:none}
.bs-wm{font-family:Georgia,"Times New Roman",serif;font-weight:700;letter-spacing:-.01em;white-space:nowrap;color:#0D1411;line-height:1}
/* white chip so a dark logo reads on dark sections and in dark mode */
.bs-chip{display:inline-flex;align-items:center;padding:10px 14px;border-radius:12px;background:#fff;border:1px solid #E4E9E5}
.bs-chip .bslogo{height:24px}
.bs-chip .bs-wm{font-size:21px}
.bs-chip.sm{padding:6px 9px;border-radius:9px}
.bs-chip.sm .bslogo{height:14px}
.bs-chip.sm .bs-wm{font-size:13px}

/* ---- 1. Hero stage: CSS mock-up of a labelled partner-content article, laptop + phone ---- */
.stage.devstage .bsmock{container-type:inline-size;filter:drop-shadow(0 26px 40px rgba(13,20,17,.22))}
.bsm-lap{width:86%}
.bsm-lid{background:#151917;border-radius:2.2cqw 2.2cqw .8cqw .8cqw;padding:1.5cqw 1.5cqw 1.8cqw;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.bsm-scr{aspect-ratio:16/10;background:#fff;color:#0D1411;border-radius:.6cqw;overflow:hidden;display:flex;flex-direction:column;text-align:left}
.bsm-base{position:relative;height:1.9cqw;margin:0 -4%;background:linear-gradient(#DCE1DE,#A9B2AD);border-radius:0 0 2.4cqw 2.4cqw}
.bsm-base::before{content:"";position:absolute;left:50%;top:0;width:14%;height:42%;transform:translateX(-50%);background:#949E98;border-radius:0 0 1cqw 1cqw}
.bsm-bar{display:flex;align-items:center;gap:.55cqw;padding:.9cqw 1.4cqw;background:#F1F3F2;border-bottom:1px solid #E4E9E5;font:500 1.05cqw/1 var(--mono);color:#5A6560}
.bsm-bar i{width:.8cqw;height:.8cqw;border-radius:50%;background:#CDD6D0;flex:none}
.bsm-bar span{margin-left:1cqw;padding:.45cqw 1.2cqw;border-radius:99px;background:#fff;border:1px solid #E4E9E5;flex:0 1 46%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bsm-mast{display:flex;align-items:center;justify-content:space-between;gap:2cqw;padding:1.3cqw 3cqw;border-bottom:.25cqw solid #0D1411}
.bsm-mast .bslogo{height:2.7cqw}
.bsm-mast .bs-wm{font-size:2.3cqw}
.bsm-nav{display:flex;gap:1.2cqw}
.bsm-nav i{width:4.5cqw;height:.55cqw;border-radius:3px;background:#E4E9E5}
.bsm-art{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:2.6cqw;padding:2.3cqw 3cqw 1.2cqw}
.bsm-txt{display:flex;flex-direction:column;gap:.95cqw;min-width:0}
.bsm-tag{align-self:flex-start;font:700 .95cqw/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;background:#FBF1E4;color:#8A5A14;border:1px solid #EBD3B0;border-radius:99px;padding:.5cqw 1cqw}
.bsm-h{margin:0;font:700 2.75cqw/1.13 Georgia,"Times New Roman",serif;letter-spacing:-.01em;color:#0D1411}
.bsm-h em{font-style:italic;color:#146076}
.bsm-dek{margin:0;font:400 1.2cqw/1.42 Georgia,"Times New Roman",serif;color:#3A4440}
.bsm-by{margin:0;font:500 1cqw/1.3 var(--sans);color:#5A6560}
.bsm-ln{display:block;height:.6cqw;border-radius:3px;background:#E4E9E5;flex:none}
.bsm-ln.s{width:66%}
.bsm-pic{border-radius:.6cqw;overflow:hidden;background:#0A2C35;aspect-ratio:4/4.6}
.bsm-pic img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.bsm-note{display:flex;align-items:center;gap:.8cqw;margin:0 3cqw 1.9cqw;padding:.9cqw 1.3cqw;border-radius:.5cqw;background:#F4F6F3;border-left:.35cqw solid #8A5A14;font:500 1.05cqw/1.2 var(--sans);color:#3A4440}
.bsm-note .i{width:1.35cqw;height:1.35cqw;flex:none}
.bsm-phone{position:absolute;right:0;bottom:0;width:21%;background:#151917;border-radius:3.4cqw;padding:.9cqw;box-shadow:0 0 0 1px rgba(255,255,255,.09),-1.4cqw 1.4cqw 3cqw -1cqw rgba(13,20,17,.4)}
.bsm-pscr{position:relative;aspect-ratio:9/19;background:#fff;color:#0D1411;border-radius:2.6cqw;overflow:hidden;display:flex;flex-direction:column;gap:1cqw;padding:3.4cqw 1.6cqw 1.6cqw;text-align:left}
.bsm-notch{position:absolute;top:.9cqw;left:50%;transform:translateX(-50%);width:34%;height:1.4cqw;border-radius:99px;background:#151917}
.bsm-pmast{display:flex;justify-content:center;padding-bottom:.8cqw;border-bottom:.2cqw solid #0D1411}
.bsm-pmast .bslogo{height:1.55cqw}
.bsm-pmast .bs-wm{font-size:1.4cqw}
.bsm-phone .bsm-tag{font-size:.72cqw;padding:.4cqw .7cqw}
.bsm-phone .bsm-h{font-size:1.75cqw}
.bsm-phone .bsm-pic{aspect-ratio:4/3}
.bsm-phone .bsm-ln{height:.45cqw}
/* floating proof cards: on wide screens they sit in the side gutters beside a slightly narrower
   mock, so they never cover its text; below 1000px only two stay, above the mock.
   (.stage.devstage.bsstage beats publication.css's .stage.devstage .fc.x positions) */
.stage.devstage.bsstage .fc{max-width:196px;top:auto;bottom:auto;left:auto;right:auto}
@media (min-width:1000px){
  .stage.devstage.bsstage .bsmock{width:min(68%,760px)}
  .stage.devstage.bsstage .fc.a{left:0;top:14%}
  .stage.devstage.bsstage .fc.d{left:0;top:52%}
  .stage.devstage.bsstage .fc.b{right:0;top:6%}
  .stage.devstage.bsstage .fc.c{right:0;top:58%}
}
@media (max-width:999px){
  .stage.devstage.bsstage{padding-top:80px}
  .stage.devstage.bsstage .fc{padding:9px 11px;gap:8px;max-width:190px}
  .stage.devstage.bsstage .fc .ic{width:28px;height:28px}
  .stage.devstage.bsstage .fc b{font-size:13px}
  .stage.devstage.bsstage .fc span{font-size:12px}
  .stage.devstage.bsstage .fc.a{left:0;top:0}
  .stage.devstage.bsstage .fc.b{right:0;top:0}
  .stage.devstage.bsstage .fc.c,.stage.devstage.bsstage .fc.d{display:none}
}
@media (max-width:399px){ .stage.devstage.bsstage .fc{max-width:168px} }

/* ---- 4. About Business Standard: logo chip + a short history ---- */
.pub .bs-chip,.edida .bs-chip{display:flex;width:fit-content}
.pub .bs-chip{margin-top:16px}
.pub .bs-chip .bslogo{height:30px}
.pub .bs-chip .bs-wm{font-size:26px}
.bs-hist{border-radius:26px;background:var(--paper-2);padding:26px;display:grid;gap:6px}
.bs-hist h3{font-size:20px;letter-spacing:-.02em}
.bs-hist .sub3{font-size:14px;color:var(--muted);margin:2px 0 8px}
.bs-tl{list-style:none;margin:0;padding:0;display:grid}
.bs-tl li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:baseline;padding:13px 0;border-top:1px solid var(--line)}
.bs-tl .yr{font-family:var(--serif);font-style:italic;font-size:28px;line-height:1;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.bs-tl b{display:block;font-weight:600;font-size:15.5px;line-height:1.35}
.bs-tl span{font-size:14px;color:var(--muted);line-height:1.45}
.bs-hist .cap{margin-top:6px}

/* ---- 5. How it's labelled (replaces the cover carousel) ---- */
.bs-labhead{margin-top:40px;display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap}
.bs-labhead h3{font-size:22px;letter-spacing:-.02em}
.bs-labhead p{font-size:14px;color:var(--muted);margin-top:4px;max-width:62ch}
.bs-labels{display:grid;gap:14px;margin-top:18px}
.bs-lab{border-radius:22px;background:var(--paper-2);padding:18px;display:grid;gap:10px;align-content:start}
.bs-lab h3{font-size:18px;letter-spacing:-.02em}
.bs-lab p{font-size:14.5px;color:var(--muted);line-height:1.5;margin:0}
.bs-lab .lv{border-radius:14px;background:#fff;border:1px solid #E4E9E5;padding:14px;display:grid;gap:7px;color:#0D1411}
.bs-lab .lv-tag{justify-self:start;font:700 10.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;background:#FBF1E4;color:#8A5A14;border:1px solid #EBD3B0;border-radius:99px;padding:5px 9px}
.bs-lab .lv-tag.pr{background:#EEF3F7;color:#2D4A63;border-color:#CFDCE7}
.bs-lab .lv-tag.np{background:#F3EFE6;color:#5B4B2A;border-color:#E0D6C0}
.bs-lab .lv-h{font:700 15px/1.2 Georgia,"Times New Roman",serif}
.bs-lab .lv i{display:block;height:6px;border-radius:3px;background:#E4E9E5}
.bs-lab .lv i.s{width:64%}
.bs-lab .lv-foot{margin-top:2px;padding:7px 9px;border-radius:8px;background:#F4F6F3;border-left:3px solid #8A5A14;font:500 11.5px/1.3 var(--sans);color:#3A4440}
@media (min-width:720px){ .bs-labels{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ---- 6. Readers: four personas (the fourth is an icon card, no stock photo) ---- */
@media (min-width:720px){ .personas.four{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1000px){ .personas.four{grid-template-columns:repeat(4,minmax(0,1fr))} }
.persona.noimg{background:radial-gradient(120% 80% at 85% 0%,rgba(76,187,138,.38),transparent 60%),linear-gradient(160deg,#146076 0%,#0A2C35 78%)}
.persona.noimg .pi{position:absolute;left:18px;top:18px;z-index:1;width:64px;height:64px;border-radius:18px;display:grid;place-items:center;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22)}
.persona.noimg .pi .i{width:32px;height:32px;color:#fff}
.city-list.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.city-list.c3 li{padding:10px 8px;font-size:13.5px;text-align:center}

/* ---- 8. Formats: logo chip on the photo, and a CSS newsprint panel for the print group ---- */
.fgroup .fimg .bs-chip{position:absolute;left:12px;top:12px;z-index:1}
.fimg.np{display:grid;place-items:center;background:radial-gradient(90% 90% at 30% 20%,#1D4238,#0A2C35)}
.np-page{position:relative;width:58%;aspect-ratio:3/2.25;padding:5% 6%;display:grid;grid-template-rows:auto auto auto 1fr;gap:7%;background:#F5F2EA;border-radius:3px;box-shadow:0 18px 30px -12px rgba(0,0,0,.6);transform:rotate(-3deg)}
.np-page .m{height:9px;border-radius:2px;background:#1A1F1C}
.np-page .h{height:6px;border-radius:2px;background:#5C635F;width:86%}
.np-page .h.s{width:58%}
.np-page .cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7%}
.np-page .cols i{display:block;background:repeating-linear-gradient(180deg,#B9BFBA 0 2px,transparent 2px 6px)}
.np-page .tag{position:absolute;right:6%;top:-9px;font:700 9.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;background:#FBF1E4;color:#8A5A14;border:1px solid #EBD3B0;border-radius:99px;padding:5px 8px;transform:rotate(3deg)}

/* wire release vs partner story */
.bs-compare{margin-top:22px;border-radius:24px;border:1px solid var(--line);background:var(--paper);padding:22px;display:grid;gap:16px}
.bs-compare h3{font-size:20px;letter-spacing:-.02em}
.bs-compare .cmp-head p{font-size:15px;color:var(--muted);margin:4px 0 0;max-width:66ch}
.cmp-grid{display:grid;gap:12px}
.cmp{border-radius:18px;padding:18px;background:var(--paper-2)}
.cmp.us{background:color-mix(in srgb,var(--lime) 10%,var(--paper));border:1px solid color-mix(in srgb,var(--green-text) 35%,var(--line-2))}
.cmp > b{display:block;font-size:16.5px;font-weight:600}
.cmp > b small{display:block;margin-top:2px;font-size:12.5px;font-weight:500;color:var(--muted)}
.cmp ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:9px}
.cmp li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px;font-size:14.5px;line-height:1.45;color:var(--muted)}
.cmp li .i{width:16px;height:16px;margin-top:3px;color:var(--green-text)}
.cmp li b{color:var(--ink);font-weight:600}
@media (min-width:720px){ .cmp-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
@media (max-width:719px){ .bs-compare{padding:16px} .cmp{padding:14px} }

/* ---- 9. Awards band: logo chip, look-alike warning, and a jury card in place of a cover ---- */
.edida .bs-chip{margin-bottom:14px}
.edida .deadline .i{flex:none}
.edida .pics .cap{max-width:44%;line-height:1.35}
.edida .pics .jury{position:absolute;right:0;bottom:0;width:52%;height:52%;border-radius:16px;border:4px solid var(--deep);background:radial-gradient(100% 90% at 80% 0%,rgba(241,194,125,.22),transparent 60%),linear-gradient(160deg,#1D4238,#0A2C35);display:grid;place-content:center;justify-items:center;gap:8px;padding:18px;text-align:center;box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}
.edida .pics .jury .i{width:38px;height:38px;color:#F1C27D}
.edida .pics .jury b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(22px,2.2vw,28px);line-height:1.1;color:var(--deep-ink)}
.edida .pics .jury span{font-size:13px;color:var(--deep-muted);line-height:1.4;max-width:24ch}

/* ---- proof cards (review mode only) ---- */
.proof-card .pubrow .bs-chip{padding:5px 8px}

/* phones: tighter history rows, single-column reader facts, two-column print centres */
@media (max-width:719px){
  .readers .facts{grid-template-columns:minmax(0,1fr)}
  .readers .facts div{padding:10px 12px}
  .city-list.c3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bs-hist{padding:20px}
  .bs-tl li{grid-template-columns:58px minmax(0,1fr);gap:10px;padding:11px 0}
  .bs-tl .yr{font-size:24px}
  .bs-labhead{margin-top:30px}
}

/* =====================================================================
   QA 9 Oct 2026 (review_design.md F1-F14, finding 16; review_truth.md B1)
   ===================================================================== */
/* B1. print group dropped until confirmed: three format cards, not four */
@media (min-width:1000px){ .fgroups{grid-template-columns:repeat(3,minmax(0,1fr))} }
/* F1. 360px phones: hero Call clears the sticky bar */
@media (max-width:379px){
  .hero{padding-top:20px}
  .hero .punchline{margin-top:12px}
  .hero .punchline + .sub{margin-top:10px}
  .publication-flow-title{display:none}
}
/* F2. tablets: keyword chips on one swipe line, so the hero Call sits above the sticky bar */
@media (min-width:720px) and (max-width:999px){
  .kw-links{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x proximity;margin-inline:-20px;padding:2px 20px 6px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 28px),transparent)}
  .kw-links::-webkit-scrollbar{display:none}
  .kw-links a{flex:none;scroll-snap-align:start}
}
/* F3. footer: the last legal lines clear the sticky bar (footer.xfoot's 34px beat style.css's 100px) */
@media (max-width:999px){ footer.xfoot{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))} }
/* F4. hero stage: no parallax drift below 1000px, so "Labelled as paid" never slides onto the mock */
@media (max-width:999px){ .stage.devstage.bsstage [data-speed]{translate:none} }
/* F5. 1000-1279px: narrower mock so the four proof cards stay in the side gutters */
@media (min-width:1000px) and (max-width:1279px){ .stage.devstage.bsstage .bsmock{width:58%} .stage.devstage.bsstage .fc{max-width:188px} }
/* F6. nav: one line from 1000px up */
.nav .links a{white-space:nowrap}
@media (min-width:1000px) and (max-width:1099px){ .nav-num{display:none} }
/* F7. reduced motion: hide duplicate publication logos (.pubs2 .cl.pubcl{display:flex} out-ranks .marquee .dup) */
@media (prefers-reduced-motion:reduce){ .pubs2 .cl.pubcl.dup{display:none} }
/* F8. tablets: formats in two columns, not stacked 680px cards */
@media (min-width:720px) and (max-width:999px){ .fgroups{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* F9. pills never break inside */
.bs-lab .lv-tag{white-space:nowrap}
.fgroup li.star b::after{display:inline-block;white-space:nowrap}
/* F10. tap targets */
.pubs2 .note .nlink{min-height:44px;font-size:13px}
.pubs2 .cl.pubcl > a{display:flex;align-items:center;align-self:stretch;margin-inline:-16px;padding-inline:16px}
.xfoot .flinks a{min-width:44px;justify-content:center}
/* F11. h3 line height in the Business Standard blocks */
.bs-compare h3,.bs-labhead h3,.bs-hist h3,.bs-lab h3{line-height:1.2}
/* F12. phones: shorter readers card (the CEA line repeats the publication section) */
@media (max-width:719px){ .readers .panel > .sub3[style]{display:none} }
/* F13. domain names never split at the hyphen (each visible business-standard.com is wrapped in <span class="nw">) */
.nw{white-space:nowrap}
/* F14. 360-369px phones: the hero Call label wraps; drop the visible number there (the link still dials it) */
@media (max-width:369px){ .hero .btn .num{display:none} }
/* finding 16. dark mode: the hero punchline gradient starts too dark to read; use flat mint */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .punchline b{background:none;color:var(--mint)}}
:root[data-theme="dark"] .punchline b{background:none;color:var(--mint)}
/* QA extra (9 Oct 2026): from 1000px up the floating proof cards keep still (the aura and the mock still drift),
   so "Draft approved" never slides onto the phone mock while the stage scrolls past */
@media (min-width:1000px){ .stage.devstage.bsstage .fc[data-speed]{translate:none} }

/* awards-marquee-v1 (12 Oct 2026): "we'll help you apply" strip right above About */
.awards-strip{padding:56px 0 44px;background:var(--paper-2,#f4f6f3);border-top:1px solid rgba(0,0,0,.06);border-bottom:1px solid rgba(0,0,0,.06)}
.awards-strip .aw-head{text-align:center;max-width:820px}
.awards-strip h2{margin:6px auto 10px;text-wrap:balance}
.awards-strip .aw-sub{margin:0 auto;max-width:640px;color:var(--muted,#55605a)}
.aw-marquee{margin-top:26px}
.aw-marquee .track{gap:14px;animation-duration:45s}
.aw-chip{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;padding:12px 18px;border-radius:999px;background:#fff;border:1px solid rgba(20,96,118,.18);box-shadow:0 2px 10px rgba(15,42,34,.06)}
.aw-chip .i{width:18px;height:18px;color:#1F7D3A;flex:none}
.aw-chip b{font-weight:650;color:#0F2A22}
.aw-chip span{color:#55605a;font-size:.92em}
.aw-cta{display:flex;flex-wrap:wrap;gap:14px 22px;justify-content:center;align-items:center;margin-top:24px}
.aw-wa{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:#146076;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.aw-wa .i{width:18px;height:18px}
@media (max-width:640px){.awards-strip{padding:40px 0 32px}.aw-chip{padding:10px 14px}}
@media (prefers-color-scheme:dark){.aw-chip{background:#13261f;border-color:rgba(255,255,255,.12)}.aw-chip b{color:#f3f6f4}.aw-chip span{color:#b7c6be}}

/* hero-v2 (15 Oct 2026, ported from forbes.css hero-v2 of 14 Oct): white page, faint Execlient smoke behind the
   headline, floating proof objects above 1400px / a sliding chip row below. Replaces the old punchline, format line,
   keyword links, money-back pill and CTA row. "Business Standard?" is longer than "Forbes India?" (6.92em wide in
   Instrument Serif), so on phones .l2 scales with the column: 56px max, about 49px at 390px and 45px at 360px. */
.hero{overflow:hidden}
.hero .hx{position:relative;isolation:isolate;padding:20px 0 6px}
.hx-smoke{position:absolute;left:50%;top:250px;width:760px;height:420px;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;filter:blur(60px);opacity:.55}
.hx-smoke i{position:absolute;border-radius:50%;mix-blend-mode:multiply}
.hx-smoke .s1{width:58%;height:70%;left:6%;top:12%;background:rgba(76,187,138,.22);animation:hxs1 14s ease-in-out infinite alternate}
.hx-smoke .s2{width:52%;height:64%;right:8%;top:6%;background:rgba(20,96,118,.12);animation:hxs2 17s ease-in-out infinite alternate}
.hx-smoke .s3{width:46%;height:56%;left:28%;bottom:2%;background:rgba(127,216,176,.26);animation:hxs3 12s ease-in-out infinite alternate}
.hx-smoke .s4{width:30%;height:40%;left:44%;top:22%;background:rgba(37,130,122,.12);animation:hxs1 19s ease-in-out infinite alternate-reverse}
@keyframes hxs1{0%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-18px) scale(1.12)}100%{transform:translate(-30px,20px) scale(.94)}}
@keyframes hxs2{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-46px,22px) scale(1.08)}100%{transform:translate(24px,-14px) scale(1.15)}}
@keyframes hxs3{0%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,16px) scale(.9)}100%{transform:translate(-36px,-20px) scale(1.1)}}
.hx-center{position:relative;z-index:2;max-width:760px;margin:0 auto;text-align:center}
.hero .hx h1.hx-h1{max-width:900px;margin:8px auto 0;font-weight:600;letter-spacing:-.035em;line-height:1.02;font-size:inherit;color:var(--ink)}
.hero .hx h1.hx-h1 .l1{display:block;font-size:68px;white-space:nowrap;letter-spacing:-.035em;min-height:1.02em}
.hero .hx h1.hx-h1 .l2{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:center;gap:16px;font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:96px;letter-spacing:-.01em;margin:6px 0 10px}
.hero .hx h1.hx-h1 .l2 em{display:inline;line-height:1;font-size:1em;white-space:nowrap}
.hero .hx h1.hx-h1 .l3{display:table;margin:0 auto;font-size:64px;background:#0A2C35;color:#7FD8B0;padding:4px 22px 10px;border-radius:10px;font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;letter-spacing:0}
.hx-lede{max-width:660px;margin:26px auto 0;font-size:21px;line-height:1.55;color:var(--muted)}
.hx-lede b{color:var(--ink);font-weight:600}
.hero .hx-ctas{justify-content:center;margin-top:30px}
.hx-note{margin:14px 0 0;font-size:14px;color:var(--muted)}
.hx-mini{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;margin:14px 0 0;color:var(--muted);font-size:13px}
.hx-mini span{display:inline-flex;align-items:center;gap:6px}
.hx-mini .i{width:16px;height:16px}
.hx-fl{position:absolute;z-index:1;background:#fff;border:1px solid #DCE7E1;border-radius:14px;box-shadow:0 10px 28px rgba(15,42,34,.08);animation:hxbob 7s ease-in-out infinite;color:var(--ink);text-align:left}
.hx-fl.p2,.hx-fl.p5,.hx-fl.p8{animation-duration:8.5s;animation-delay:-2s}
.hx-fl.p3,.hx-fl.p6{animation-duration:9.5s;animation-delay:-4s}
@keyframes hxbob{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-10px) rotate(var(--r,0deg))}}
.hx-chip{padding:10px 14px;font-size:14px;font-weight:600;text-transform:none;letter-spacing:0;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;border:1px solid #DCE7E1;border-radius:14px;background:#fff;color:var(--ink)}
.hx-chip .i{width:18px;height:18px}
.hx-chip.hx-ok{background:#E8F6EF;border-color:#BFE6D2;color:#145A3B}
.hx-chip.hx-tag{background:#FFF6E0;border-color:#F1DDA6;color:#6B4B05}
.hx-chip.hx-link{color:#146076;font-weight:500}
.hx-card{padding:14px;width:256px;display:flex;flex-direction:column}
.hx-card .k{align-self:flex-start;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#6B4B05;background:#FFF6E0;border-radius:6px;padding:3px 7px;font-weight:600}
.hx-card .src{font-size:12px;color:var(--muted);margin-top:8px}
.hx-card .t{font-family:"Instrument Serif",Georgia,serif;font-size:21px;line-height:1.15;margin-top:4px}
.hx-card .bars i{display:block;height:7px;border-radius:4px;background:#E7EEEA;margin-top:7px}
.hx-card .bars i:nth-child(2){width:82%}.hx-card .bars i:nth-child(3){width:64%}
.hx-g{width:240px;padding:14px 16px;display:flex;flex-direction:column}
.hx-g .q{display:flex;align-items:center;gap:8px;border:1px solid #DCE7E1;border-radius:999px;padding:7px 12px;font-size:13px;color:var(--muted)}
.hx-g .q .i{width:15px;height:15px}
.hx-g .r{margin-top:10px;font-size:12px;color:#2E7D5B}
.hx-g .h{font-size:17px;color:#1A0DAB;margin-top:2px;line-height:1.25}
.hx-g .d{font-size:12px;color:var(--muted);margin-top:4px}
.hx-li{width:210px;padding:12px 14px;display:flex;flex-direction:column}
.hx-li .row{display:flex;align-items:center;gap:10px}
.hx-li .av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#25827A,#4CBB8A);flex:none}
.hx-li .nm{display:block;font-size:13px;font-weight:600}.hx-li .sb{display:block;font-size:12px;color:var(--muted)}
.hx-li .pv{margin-top:10px;border:1px solid #DCE7E1;border-radius:10px;padding:8px 10px;font-size:12px;color:var(--muted)}
.hx-li .ic{margin-left:auto;width:20px;height:20px;color:#0A66C2}
.hx-fl.p1{left:-100px;top:10px;--r:-5deg}.hx-fl.p2{left:-110px;top:300px;--r:4deg}.hx-fl.p3{left:-70px;top:420px;--r:-3deg}.hx-fl.p4{left:-120px;top:550px;--r:3deg}
.hx-fl.p5{right:-90px;top:4px;--r:4deg}.hx-fl.p6{right:-80px;top:250px;--r:-4deg}.hx-fl.p7{right:-110px;top:370px;--r:3deg}.hx-fl.p8{right:-100px;top:570px;--r:-3deg}
.hx-rail{display:none;margin:26px -20px 0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.hx-rail .tr{display:flex;gap:10px;width:max-content;animation:hxslide 26s linear infinite}
.hx-rail .hx-chip{border-radius:999px}
@keyframes hxslide{to{transform:translateX(-50%)}}
@media (max-width:1400px){.hx-fl{display:none}.hx-rail{display:block}}
@media (max-width:760px){
 .hx-smoke{top:220px;width:440px;height:360px;filter:blur(50px)}
 .hero .hx h1.hx-h1 .l1{font-size:var(--tw-fs,38px)}
 .hero .hx h1.hx-h1 .l2{font-size:min(56px,calc((100vw - 40px) / 7.1));gap:10px;margin:4px 0 8px}
 .hero .hx h1.hx-h1 .l3{font-size:40px;padding:2px 14px 6px}
 .hx-lede{font-size:17px;margin-top:20px}
 .hero .hx-ctas{flex-direction:column;align-items:stretch}
}
@media (max-width:380px){.hero .hx h1.hx-h1 .l1{font-size:var(--tw-fs,34px)}.hero .hx h1.hx-h1 .l3{font-size:34px}}
@media (prefers-reduced-motion:reduce){.hx-smoke i,.hx-fl,.hx-rail .tr{animation:none}}
/* review 15 Oct 2026: (1) the hx cards and chips are always white, so pin their text to the light-theme ink; in dark mode --ink turns
   near-white and the plain chips became unreadable (same fix as the Vogue page). (2) 360-380px: slimmer padding keeps the call label on one
   line (it wrapped at 370px), so the number can show again from 360px, as on the Vogue and Elle Decor pages. F14's reason (the wrap) no
   longer applies to this hero; style.css still hides the number below 360px. */
.hx-fl,.hx-chip{--ink:#0D1411;--muted:#5A6560}
@media (max-width:380px){.hero .hx-ctas .btn{padding-inline:16px}}
@media (min-width:360px) and (max-width:369px){.hero .hx-ctas .btn .num{display:inline}}