:root{--ink:#111;--soft:#f5eddb;--line:#e6dcc6;--mut:#6b6558;--cream:#fcf8ed}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--cream);padding-bottom:60px;-webkit-font-smoothing:antialiased}
a{color:inherit}.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
.banner{background:var(--soft);color:#444;text-align:center;padding:8px 12px;font-size:13px;border-bottom:1px solid var(--line)}
header{position:sticky;top:0;z-index:20;background:rgba(252,248,237,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:60px;gap:12px}
.brand{width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;text-decoration:none;letter-spacing:.5px}
nav{display:flex;gap:22px;font-size:14px;color:#444}nav a{text-decoration:none}nav a:hover{color:#000;text-decoration:underline;text-underline-offset:6px}
.btn{display:inline-block;border:1px solid var(--ink);border-radius:999px;padding:11px 20px;font-weight:600;font-size:14px;cursor:pointer;text-decoration:none;text-align:center;transition:.15s}
.btn-red{background:var(--ink);color:#fff}.btn-red:hover{background:#333}
.btn-wa,.btn-line{background:#fff;color:var(--ink)}.btn-wa:hover,.btn-line:hover{background:var(--soft)}
.hero{background:var(--soft);padding:64px 0 56px;border-bottom:1px solid var(--line);position:relative;overflow:hidden;isolation:isolate}
.hero h1{margin:0;font-size:clamp(44px,10vw,88px);line-height:1;font-weight:900;letter-spacing:-1.5px}
.hero .full{font-size:clamp(17px,3vw,24px);font-weight:700;margin:14px 0 4px}
.hero p{margin:0 0 26px;color:var(--mut);font-size:16px;max-width:560px}
.hero .btns{display:flex;gap:10px;flex-wrap:wrap}
section{padding:48px 0}section h2{margin:0 0 6px;font-size:28px;letter-spacing:-.4px}.sub{color:var(--mut);margin:0 0 22px}
.alt{background:var(--soft)}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 16px;font-size:14px;cursor:pointer;color:#333}.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.card .img{aspect-ratio:4/3;background:var(--soft);display:flex;align-items:center;justify-content:center;color:#b4b4ba;font-size:12px;letter-spacing:.4px}
.card .img img{width:100%;height:100%;object-fit:cover}
.card .b{padding:14px;display:flex;flex-direction:column;gap:7px;flex:1}.card h3{margin:0;font-size:18px}
.card .b>div:nth-of-type(2){color:var(--mut);font-size:14px}
.tags{display:flex;gap:6px;flex-wrap:wrap}.tag{border:1px solid var(--line);border-radius:999px;padding:2px 10px;font-size:12px;color:#555}
.price{font-weight:700}.card .btn{margin-top:auto;padding:10px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:28px}
@media(max-width:760px){.two{grid-template-columns:1fr}nav{display:none}.hero{padding:44px 0 40px}}
.box{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px}
label{display:block;font-size:13px;font-weight:600;margin:12px 0 5px;color:#333}
input,select,textarea{width:100%;padding:12px;border:1px solid #d6d6da;border-radius:10px;font:inherit;background:#fff}
input:focus,select:focus{outline:2px solid #111;outline-offset:0}
.emi-out{margin-top:14px;background:var(--soft);border-radius:10px;padding:14px;font-size:15px;line-height:1.6}.emi-out b{font-size:24px}
.msg{margin-top:10px;font-size:14px;padding:10px;border-radius:10px;display:none}.ok{background:#f1f1f2;color:#111;display:block}.err{background:#f1f1f2;color:#b00020;display:block}
.hp{position:absolute;left:-9999px;opacity:0}
footer{background:var(--cream);color:var(--mut);padding:26px 0;font-size:13px;border-top:1px solid var(--line)}
.bar{position:fixed;left:0;right:0;bottom:0;display:flex;z-index:30;border-top:1px solid var(--line)}.bar a{flex:1;text-align:center;padding:16px 6px;font-weight:700;text-decoration:none;font-size:15px}
.bar .c{background:var(--ink);color:#fff}.bar .w{background:#fff;color:var(--ink)}
iframe{width:100%;height:280px;border:0;border-radius:16px;filter:grayscale(1)}
#hlogo{margin-bottom:14px}#hlogo .logo{height:44px;width:auto;display:block}#flogo{margin-bottom:10px;touch-action:manipulation}#flogo .logo{height:30px;width:auto;display:block;cursor:default;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.vis{margin-top:8px;font-size:12px;color:var(--mut)}#vis,#fname{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.vis[hidden]{display:none}

.card .img{cursor:pointer;position:relative}.badge{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.65);color:#fff;border-radius:999px;font-size:11px;padding:2px 8px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:50;display:flex;align-items:center;justify-content:center;padding:14px}.modal[hidden]{display:none}
.mbox{background:#fff;border-radius:18px;max-width:640px;width:100%;max-height:92vh;overflow:auto;position:relative;padding:14px}
.mclose{position:absolute;right:10px;top:8px;border:0;background:#fff;font-size:30px;line-height:1;cursor:pointer;z-index:2;width:38px;height:38px;border-radius:50%}
.gmain{width:100%;aspect-ratio:4/3;object-fit:contain;background:var(--soft);border-radius:12px;display:block}
.gph{aspect-ratio:4/3;background:var(--soft);border-radius:12px;display:flex;align-items:center;justify-content:center;color:#b4b4ba;font-size:13px}
.thumbs{display:flex;gap:8px;overflow-x:auto;margin:10px 0}.thumbs img{width:64px;height:64px;object-fit:cover;border-radius:8px;border:2px solid transparent;cursor:pointer;flex:none}.thumbs img.on{border-color:#111}
.mbox h3{margin:8px 0 6px;font-size:22px}.mbox p{margin:8px 0;color:#444;line-height:1.5;white-space:pre-line}.mbtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

.fg2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}@media(max-width:420px){.fg2:not(.keep){grid-template-columns:1fr}}
.ubtns{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap}

.tagrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 26px}
.hero .tagrow p{margin:0;max-width:none}
.tagrow .ph{font-weight:800;font-size:17px;text-decoration:none;color:inherit;letter-spacing:.3px}
.btn-sky{background:#dff0fc;border-color:#a9d3f0;color:#0b4a73;padding:8px 18px}.btn-sky:hover{background:#cde7f9}
.picked{margin-top:14px;background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:14px;display:flex;align-items:center;justify-content:space-between;gap:8px}.picked[hidden]{display:none}
.picked button{border:0;background:none;font-size:22px;line-height:1;cursor:pointer;color:var(--mut)}
/* banner slideshow behind the hero */
.hero .slides{position:absolute;inset:0;z-index:-2}
.hero .slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.2s ease}.hero .slide.on{opacity:1}
.hero.has-slides{background:#111;color:#fff;border-bottom:0}
.hero.has-slides::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,8,10,.8) 0%,rgba(8,8,10,.55) 55%,rgba(8,8,10,.3) 100%)}
.hero.has-slides h1,.hero.has-slides .full{color:#fff}.hero.has-slides p{color:#e4e4e7}
.hero.has-slides #hlogo .logo{background:#fff;padding:8px 12px;border-radius:12px;height:58px;box-sizing:border-box}
.hero.has-slides .btn-red{background:#fff;color:#111;border-color:#fff}.hero.has-slides .btn-red:hover{background:#ececee}
.hero.has-slides .btn-line{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}.hero.has-slides .btn-line:hover{background:rgba(255,255,255,.14)}
.sdots{position:absolute;right:20px;bottom:16px;display:flex;gap:8px;z-index:2}
.sdots button{width:26px;height:3px;border:0;padding:0;background:rgba(255,255,255,.4);cursor:pointer;border-radius:2px}.sdots button.on{background:#fff}
@media(max-width:760px){.hero.has-slides::before{background:rgba(8,8,10,.6)}}
@media(prefers-reduced-motion:reduce){.hero .slide{transition:none}}

/* ---- bike cards: cream card with a cut corner, key points, price row and an orange button */
#grid,#usedGrid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.bcard{--bd:#ad7542;--g1:#fff4da;--g2:#ffefce;--btn:#ea4c20;--btnh:#d4400f;--sep:#d9bd8f;--mutp:#a89e86;background:var(--bd);padding:1px;clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%);filter:none}
.bin{position:relative;background:linear-gradient(180deg,var(--g1) 0%,var(--g2) 100%);clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%);padding:18px 18px 18px;display:flex;flex-direction:column;height:100%;box-sizing:border-box;font-family:"Barlow Semi Condensed","Arial Narrow",system-ui,sans-serif}
.bin .lants{position:absolute;right:10px;top:0;width:54px;height:auto;pointer-events:none}
.bimg{position:relative;height:190px;display:flex;align-items:center;justify-content:center;cursor:pointer;margin:6px 34px 8px 0}
.bimg img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply}
.bimg span{color:#b4a98f;font-size:13px}
.bin h3{margin:10px 0 8px;font-size:22px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:#161616}
.specs{margin:0 0 14px;padding-left:20px;font-size:17px;line-height:1.55;color:#222;min-height:105px}
.specs li::marker{color:#222}
.prow{display:flex;gap:0;align-items:stretch;margin-top:auto;padding-bottom:14px}
.prow .p1{flex:1;padding-right:14px;min-width:0}.prow .p2{flex:1;padding-left:16px;border-left:1px solid var(--sep);min-width:0}
.prow s{display:block;font-size:27px;font-weight:700;color:#b9ae94;text-decoration-thickness:2px}
.prow b{display:block;font-size:29px;font-weight:700;color:#111;line-height:1.15}.prow .p1.only b{font-size:27px}.prow .p1 b.cp{font-size:21px}
.prow small{display:block;font-size:14px;color:var(--mutp);line-height:1.25;margin-top:3px;text-transform:uppercase}
.prow .p2 small.og{color:#1a8f3c;text-transform:none;font-size:15px;font-weight:600}.prow .p2 small.rd{color:#d0261b;text-transform:none;font-size:15px}
.deal{display:block;box-sizing:border-box;text-align:center;text-decoration:none;border:0;background:var(--btn);color:#fff;font:700 21px "Barlow Semi Condensed","Arial Narrow",system-ui,sans-serif;letter-spacing:.3px;padding:15px 12px;cursor:pointer;width:100%;transition:.15s}
.deal:hover{background:var(--btnh)}
@media(max-width:420px){#grid,#usedGrid{grid-template-columns:1fr}.prow s,.prow b{font-size:25px}}
.bcard.used{--bd:#6f86a6;--g1:#f5f8fc;--g2:#e3ebf5;--btn:#245a9e;--btnh:#1b4a85;--sep:#b6c6dc;--mutp:#7d8ba0}
.bcard.used .lants{filter:hue-rotate(205deg) saturate(.75)}
.utag{position:absolute;left:0;top:0;background:#245a9e;color:#fff;font-weight:700;font-size:13px;letter-spacing:.8px;padding:4px 12px}
.bcard.used .specs{min-height:90px}

/* ---- orange "Get Onroad Price" card (name + mobile + Save). The little cross at the top left shows after 5 seconds. */
.opop{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:70;display:flex;align-items:center;justify-content:center;padding:16px}.opop[hidden]{display:none}
.ocard{position:relative;width:min(100%,380px);background:linear-gradient(180deg,#f46a35 0%,#e5481b 100%);color:#fff;padding:40px 22px 22px;clip-path:polygon(0 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%);box-shadow:0 10px 40px rgba(0,0,0,.35);font-family:"Barlow Semi Condensed","Arial Narrow",system-ui,sans-serif}
.ocard h3{margin:0 0 4px;font-size:26px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.ocard .obike{margin:0 0 16px;font-size:18px;opacity:.95}.ocard .obike[hidden]{display:none}
.ocard input{background:#fff;color:#111;border:0;border-radius:6px;margin:0 0 10px;padding:14px 12px;font-size:16px;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.ocard input.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;padding:0;margin:0}
.ocard input:focus{outline:3px solid #ffd2bf}
.omsg{min-height:20px;font-size:15px;margin:0 0 8px}.omsg.err{color:#fff;background:rgba(0,0,0,.28);padding:6px 10px;border-radius:6px}.omsg.ok{background:rgba(255,255,255,.22);padding:6px 10px;border-radius:6px}.omsg:empty{padding:0;background:none}
.osave{width:100%;border:0;border-radius:6px;background:#161616;color:#fff;font:700 20px "Barlow Semi Condensed","Arial Narrow",system-ui,sans-serif;letter-spacing:.6px;padding:14px;cursor:pointer}.osave:disabled{opacity:.6}.osave:hover:not(:disabled){background:#000}
.ox{position:absolute;left:8px;top:6px;width:26px;height:26px;border-radius:50%;border:0;background:rgba(255,255,255,.28);color:#fff;font-size:19px;line-height:1;cursor:pointer;padding:0;animation:oxin .4s ease}.ox[hidden]{display:none}
@keyframes oxin{from{opacity:0}to{opacity:1}}

/* ---- header strip like heromotocorp.com: taller white bar with the Hero logo + "Narendra Hero", and a clear banner under it */
header{background:#fff;border-bottom:0;box-shadow:0 2px 8px rgba(0,0,0,.09);backdrop-filter:none}
header .wrap{height:88px;max-width:1180px}
.brand2{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink);flex:none}
.brand2 .logo{height:46px;width:auto;display:block}
.brand2 #brandLogo{display:flex;align-items:center;padding-right:14px;border-right:2px solid #e6e0d2}
.bname{font-family:"Barlow Semi Condensed","Arial Narrow",system-ui,sans-serif;font-weight:700;font-size:30px;line-height:1;letter-spacing:.6px;text-transform:uppercase;white-space:nowrap}
header nav{font-size:16px;gap:24px;color:#222}header nav a{font-weight:500}
header .btn-red{padding:11px 22px!important;font-size:15px}
.bn{position:relative;width:100%;aspect-ratio:3.8/1;min-height:150px;max-height:620px;overflow:hidden;background:var(--soft)}.bn[hidden]{display:none}
.bn .slides{position:absolute;inset:0;z-index:0}
.bn .slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.2s ease}.bn .slide.on{opacity:1}
.bn .sdots{position:absolute;right:18px;bottom:14px;display:flex;gap:8px;z-index:2}
.bn .sdots button{width:26px;height:4px;border:0;padding:0;background:rgba(0,0,0,.3);cursor:pointer;border-radius:2px}.bn .sdots button.on{background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.hero{background:var(--cream);padding:22px 0;border-bottom:1px solid var(--line)}
.hero .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px}
.hero .hl{min-width:0}.hero .full{font-size:22px;font-weight:800;margin:0 0 6px;color:var(--ink)}
.hero .tagrow{margin:0}.hero .tagrow p{color:var(--mut);font-size:15px}
.hero .btns{display:flex;gap:10px;flex-wrap:wrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:760px){header .wrap{height:66px}.brand2 .logo{height:34px}.brand2{gap:10px}.brand2 #brandLogo{padding-right:10px}.bname{font-size:20px;letter-spacing:.3px}header .btn-red{padding:9px 14px!important;font-size:13px}.hero{padding:18px 0}.hero .full{font-size:19px}}
@media(max-width:600px){header .btn-red{display:none}}

/* ---- Hindi / English switch */
header .hr{display:flex;align-items:center;gap:12px}
.langbtn{display:inline-flex;align-items:center;border:2px solid #ea4c20;border-radius:999px;background:#fff;padding:0;cursor:pointer;font:600 14px/1 inherit;font-family:inherit;overflow:hidden;flex:none}
.langbtn span{padding:8px 12px;color:#ea4c20;font-weight:700;font-family:"Noto Sans Devanagari","Barlow Semi Condensed",system-ui,sans-serif}
.langbtn[data-l="en"] .le,.langbtn[data-l="hi"] .lh{background:#ea4c20;color:#fff}
html[lang="hi"] body,html[lang="hi"] button,html[lang="hi"] input,html[lang="hi"] textarea{font-family:"Noto Sans Devanagari","Barlow Semi Condensed",system-ui,sans-serif}
html[lang="hi"] .deal,html[lang="hi"] .btn{letter-spacing:0;text-transform:none}
html[lang="hi"] nav{font-size:15px}
@media(max-width:760px){.langbtn span{padding:7px 10px;font-size:13px}header .hr{gap:8px}}
/* ---- social links row (under phone / Call / WhatsApp) and Apply for Job form */
.hero .tagrow.social{margin:12px 0 0;gap:10px}.tagrow.social[hidden]{display:none}
.tagrow.social .btn-sky{padding:7px 16px;font-size:14px}
select{width:100%;padding:12px;border:1px solid #d6d6da;border-radius:10px;font:inherit;background:#fff}
textarea{resize:vertical}
header nav{white-space:nowrap;font-size:14.5px;gap:14px}@media(min-width:1121px){.bname{font-size:27px}}
@media(min-width:761px) and (max-width:1120px){header .wrap{gap:10px}header nav{font-size:13.5px;gap:11px}header .hr{gap:8px}.bname{font-size:21px;letter-spacing:.2px}.brand2{gap:8px}.brand2 .logo{height:36px}.brand2 #brandLogo{padding-right:8px}header .btn-red{padding:9px 13px!important;font-size:13px}}
html[lang="hi"] .tagrow.social .btn{letter-spacing:0}
html[lang="hi"] select{font-family:"Noto Sans Devanagari","Barlow Semi Condensed",system-ui,sans-serif}
@media(min-width:761px) and (max-width:940px){header nav{display:none}}
header .hr{flex:none}header .btn-red{white-space:nowrap}
[data-pop] .mbox{max-width:520px;padding:22px 18px 18px}[data-pop] .mbox h3{margin:0 40px 4px 0;font-size:24px}[data-pop] .mbox .sub{margin:0 0 6px;white-space:normal}.pform{margin:0}

/* ---- promo reels (picture of the reel; tap to watch on Facebook / Instagram / YouTube) */
.reels{margin:16px 0 0}.reels[hidden]{display:none}
.reels .rhead{font-weight:700;font-size:15px;margin:0 0 8px}
.reels .rrow{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.reels .rcard{flex:0 0 170px;scroll-snap-align:start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px;display:flex;flex-direction:column;gap:6px}
.reels .rpic{position:relative;display:block;border-radius:10px;overflow:hidden;background:#222;aspect-ratio:9/13}
.reels .rpic img{width:100%;height:100%;object-fit:cover;display:block}
.reels .rplay{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(0,0,0,.55);border:2px solid #fff}
.reels .rplay:after{content:"";position:absolute;left:18px;top:13px;border-left:15px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent}
.reels .rt{font-weight:600;font-size:13.5px;line-height:1.3;min-height:2.6em;overflow:hidden}
.reels .rls{display:flex;flex-wrap:wrap;align-items:center;gap:5px;font-size:12px;color:var(--mut)}
.reels .rl{background:#dff0fc;border:1px solid #a9d3f0;color:#0b4a73;border-radius:999px;padding:4px 10px;font-weight:600;text-decoration:none;font-size:12px}
.reels .rl:hover{background:#cde7f9}
@media(min-width:761px){.reels .rcard{flex-basis:190px}}
/* promo reels: full-width row under the buttons; platform tag on a card that has one link */
.hero .wrap>.reels{flex:0 0 100%;margin:8px 0 0}
.reels .rt{color:#111}
.reels .rtag{position:absolute;left:8px;top:8px;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700;color:#fff;background:#333}
.reels .rtag-facebook{background:#1877f2}.reels .rtag-instagram{background:#c13584}.reels .rtag-youtube{background:#e00}
@media(min-width:761px){.reels .rrow{gap:16px}}
/* language switch: "Choose language" label above the English / Hindi button */
.langbox{display:flex;flex-direction:column;align-items:center;gap:3px;flex:none}
.langbox .lgl{font-size:10.5px;line-height:1;font-weight:600;color:var(--mut);white-space:nowrap;font-family:"Noto Sans Devanagari","Barlow Semi Condensed",system-ui,sans-serif}
.langbtn span{padding:6px 12px;font-size:13.5px}
@media(max-width:760px){.langbtn span{padding:5px 7px;font-size:11.5px}.langbox{gap:2px}.langbox .lgl{font-size:9px;white-space:normal;text-align:center;max-width:84px;line-height:1.15}header .brand2 .logo{height:28px}header .brand2{gap:8px}header .brand2 #brandLogo{padding-right:8px}header .bname{font-size:15px;letter-spacing:.2px}header .hr{gap:6px}}

@media(max-width:380px){header .bname{font-size:13px}header .brand2 .logo{height:24px}.langbtn span{padding:5px 6px;font-size:11px}.langbox .lgl{max-width:74px}}
/* hero: phone number right after the dealer line; Call, WhatsApp and every social button together in the next line */
.hero .tagrow.first{display:block;margin:0}
.hero .tagrow.first p{display:inline}
.hero .tagrow.first .ph{display:inline-block;margin-left:6px;white-space:nowrap;vertical-align:baseline}
.hero .tagrow.links{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;align-items:center}
.hero .tagrow.links .tagrow.social{display:contents}
.hero .tagrow.links .tagrow.social[hidden]{display:none}
.hero .tagrow.links .btn{padding:7px 14px;font-size:14px;white-space:nowrap;flex:0 0 auto}
@media(max-width:560px){.hero .tagrow.links{flex-wrap:nowrap;gap:5px}.hero .tagrow.links .btn{padding:7px 9px;font-size:12.5px}}
@media(max-width:360px){.hero .tagrow.links{gap:4px}.hero .tagrow.links .btn{padding:6px 7px;font-size:11.5px}}
/* promo reels on a phone: two cards per row, the next ones go below (nothing hides on the right) */
@media(max-width:760px){.reels .rrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;overflow:visible;scroll-snap-type:none}.reels .rcard{flex:none;min-width:0}}

/* no platform name on the reel pictures */
.reels .rtag{display:none!important}