/* Vyom Hospitality Suite: the platform pages (one page per module, and the hub). Tokens, the header,
   the footer, the closing band and the shared components are in assets/site.css; the illustration kit
   (.mock, .mk-*) is in assets/mock-kit.css. */
/* ── Section bar: the page's sections, its price and a demo, in reach on wide screens ─ */
.mbar{position:sticky; top:calc(64px + env(safe-area-inset-top,0px)); z-index:30; background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:saturate(1.5) blur(14px); -webkit-backdrop-filter:saturate(1.5) blur(14px); border-block:1px solid var(--border)}
.mbar .wrap{display:flex; align-items:center; gap:20px; height:52px}
.mbar-id{display:flex; align-items:center; gap:10px; font-size:15px; white-space:nowrap}
.mbar-id .mi{width:28px; height:28px; border-radius:8px; background:var(--primary-soft); color:var(--primary); display:grid; place-items:center}
.mbar-id .mi svg{width:15px; height:15px}
.mbar-links{display:flex; gap:2px; margin-inline:auto}
.mbar-links a{padding:6px 10px; border-radius:8px; font-size:14px; font-weight:500; color:var(--fg-muted); text-decoration:none; white-space:nowrap; transition:background .15s, color .15s}
.mbar-links a:hover, .mbar-links a[aria-current="true"]{background:var(--muted-bg); color:var(--fg)}
.mbar-cta{display:flex; align-items:center; gap:12px; font-size:14px; color:var(--fg-subtle); white-space:nowrap}
.mbar-cta b{color:var(--fg); font-size:15px}
.mbar-q{display:inline-flex; align-items:center; gap:10px; height:36px; padding:0 8px 0 12px; border-radius:10px; border:1px solid var(--border-strong); background:var(--surface); font-weight:600; font-size:14px; color:var(--fg); cursor:pointer; -webkit-user-select:none; user-select:none; transition:background .15s, border-color .15s}
.mbar-q:hover{background:var(--muted-bg)}
.mbar-q:has(input:checked){background:var(--primary-soft); border-color:var(--primary-line); color:var(--primary)}
.mbar-q .switch .track{width:32px; height:18px}
.mbar-q .switch .track::after{width:14px; height:14px}
.mbar-q .switch input:checked + .track::after{transform:translateX(14px)}

/* ── Hero ──────────────────────────────────────────── */
.p-hero{position:relative; padding-block:clamp(32px,5vw,64px) clamp(48px,6vw,88px); overflow:hidden}
.p-hero::before{content:''; position:absolute; inset:0; background-image:radial-gradient(var(--border-strong) 1px, transparent 1px); background-size:22px 22px; -webkit-mask-image:radial-gradient(ellipse 70% 60% at 72% 40%, #000 30%, transparent 75%); mask-image:radial-gradient(ellipse 70% 60% at 72% 40%, #000 30%, transparent 75%); opacity:.55; pointer-events:none}
.p-hero .wrap{position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,64px); align-items:center}
.p-hero-copy{display:flex; flex-direction:column; gap:20px; align-items:flex-start}
.p-hero .crumbs{margin-bottom:4px}
.p-eyebrow{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.p-eyebrow .mi{flex:none; width:36px; height:36px; border-radius:10px; background:var(--primary); color:var(--on-primary); display:grid; place-items:center}
.p-eyebrow .mi svg{width:19px; height:19px}
.p-eyebrow b{font-size:15px; font-weight:600}
.p-price{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 8px; font-size:15px; color:var(--fg-muted)}
.p-price b{font-size:24px; font-weight:700; letter-spacing:-.025em; color:var(--fg)}
.p-offer{display:flex; align-items:center; gap:8px; margin-top:-12px; font-size:14.5px; color:var(--fg-muted)}
.p-offer .badge{flex:none}
.p-hero-visual{position:relative; padding:20px 8px 28px}
.p-audience{display:flex; align-items:flex-start; gap:8px; margin-top:-6px; font-size:15px; font-weight:500; color:var(--fg-muted)}
.p-audience svg{width:17px; height:17px; margin-top:3px; color:var(--primary)}
.fgroup{scroll-margin-top:24px}

/* ── Facts strip: the India-specific points this module carries ─ */
.p-facts{padding-bottom:clamp(40px,6vw,72px)}
.p-facts ul{display:grid; grid-template-columns:repeat(var(--n,4),minmax(0,1fr)); border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); overflow:hidden}
.p-facts li{display:flex; gap:12px; padding:18px 20px; border-left:1px solid var(--border)}
.p-facts li:first-child{border-left:0}
.p-facts .pi{flex:none; width:36px; height:36px; border-radius:10px; background:var(--primary-soft); color:var(--primary); display:grid; place-items:center}
.p-facts .pi svg{width:18px; height:18px}
.p-facts b{display:block; font-size:15px; font-weight:600; line-height:1.35}
.p-facts span{display:block; font-size:14px; color:var(--fg-muted); line-height:1.45; margin-top:2px}

/* ── Sections ──────────────────────────────────────── */
/* highlights: a feature told in full beside an illustration of it, alternating sides */
.hl-list{display:flex; flex-direction:column; gap:clamp(56px,8vw,104px)}
.feat-row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:clamp(32px,5vw,72px); align-items:center}
.feat-row:nth-child(even) .hl-copy{order:2}
.hl-copy{display:flex; flex-direction:column; gap:14px}
.hl-copy h3{font-size:clamp(22px,2.2vw,28px); font-weight:700; letter-spacing:-.025em; line-height:1.2}
.hl-copy p{color:var(--fg-muted); text-wrap:pretty}
.hl-points{display:flex; flex-direction:column; gap:10px; margin-top:6px}
.hl-points li{display:grid; grid-template-columns:20px minmax(0,1fr); gap:10px; font-size:15.5px}
.hl-points svg{width:18px; height:18px; color:var(--primary); margin-top:3px}
.hl-points b{font-weight:600}
.hl-points span{color:var(--fg-muted)}

/* how it works: three steps on a line */
.steps{position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,3vw,32px); counter-reset:step}
.steps::before{content:''; position:absolute; top:22px; left:calc(100% / 6); right:calc(100% / 6); height:2px; background:linear-gradient(90deg, var(--primary-line), var(--primary), var(--primary-line))}
.step{position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; padding:0 6px}
.step i{position:relative; z-index:1; width:46px; height:46px; border-radius:50%; background:var(--primary); color:var(--on-primary); display:grid; place-items:center; font-style:normal; font-weight:700; font-size:16px; box-shadow:0 0 0 6px var(--bg)}
.step h3{margin-top:6px}
.step p{font-size:15px; color:var(--fg-muted); max-width:34ch}

/* everything in the module: the full catalogue, group by group */
.fgroups{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start}
.fgroups.one{grid-template-columns:minmax(0,1fr)}
.fgroup{padding:22px 24px 10px}
.fgroup h3{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding-bottom:12px; border-bottom:1px solid var(--border)}
.fgroup h3 span{font-size:13px; font-weight:500; color:var(--fg-subtle)}
.flist li{display:grid; grid-template-columns:20px minmax(0,1fr); gap:12px; padding:12px 0; border-bottom:1px solid var(--border)}
.flist li:last-child{border-bottom:0}
.flist svg{width:18px; height:18px; color:var(--primary); margin-top:2px}
.flist b{display:block; font-size:15.5px; font-weight:600}
.flist span{display:block; font-size:14.5px; color:var(--fg-muted); margin-top:2px; line-height:1.5}
.fgroups.one .flist{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:32px}
.fgroups.one .flist li:nth-last-child(2):nth-child(odd){border-bottom:0}

/* works with: the other modules this one connects to */
.works{display:grid; grid-template-columns:repeat(var(--cols,3),minmax(0,1fr)); gap:14px}
.work{position:relative; display:flex; flex-direction:column; gap:10px; padding:20px; text-decoration:none; transition:border-color .2s, box-shadow .25s}
.work:hover{border-color:var(--border-strong); box-shadow:var(--shadow)}
.work .top-row{display:flex; justify-content:space-between; align-items:center}
.work .mi{width:40px; height:40px; border-radius:11px; background:var(--primary-soft); color:var(--primary); display:grid; place-items:center}
.work .mi svg{width:20px; height:20px}
.work p{font-size:14.5px; color:var(--fg-muted); line-height:1.5}
.work .go{margin-top:auto; display:inline-flex; align-items:center; gap:4px; font-size:14px; font-weight:600; color:var(--primary)}
.work .go svg{width:15px; height:15px; transition:transform .2s}
.work:hover .go svg{transform:translateX(2px)}

/* where it fits: the home page's four steps, with this module lit */
.fits-wrap{margin-top:36px}
.fits-wrap > .kicker{margin-bottom:12px}
.fits{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:12px; border-radius:var(--radius); border:1px dashed var(--border-strong); counter-reset:fit}
.fits li{display:flex; flex-direction:column; gap:6px; padding:10px; border-radius:12px}
.fits li.here{background:var(--primary-soft)}
.fits li > p{font-size:13px; font-weight:600; color:var(--fg-subtle); counter-increment:fit}
.fits li > p::before{content:counter(fit) ' · '}
.fchip{display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:9px; border:1px solid var(--border); background:var(--surface); font-size:13.5px; font-weight:600; text-decoration:none; transition:border-color .15s}
.fchip .code{min-width:40px}
a.fchip:hover{border-color:var(--primary-line)}
.fchip.on{border-color:var(--primary); box-shadow:0 0 0 2px var(--primary-line); color:var(--primary)}
.fchip.static{border-style:dashed; background:transparent; font-weight:500; color:var(--fg-muted)}
/* the next and previous module */
.pager{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:12px; margin-top:clamp(40px,5vw,64px)}
.pager a{display:flex; flex-direction:column; gap:2px; padding:14px 18px; border-radius:14px; border:1px solid var(--border); background:var(--surface); text-decoration:none; transition:border-color .15s, box-shadow .2s}
.pager a:hover{border-color:var(--border-strong); box-shadow:var(--shadow)}
.pager small{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--fg-subtle)}
.pager small svg{width:14px; height:14px}
.pager a[rel="prev"] small svg{transform:rotate(180deg)}
.pager a:nth-child(2){align-items:center; text-align:center; justify-content:center}
.pager a[rel="next"]{align-items:flex-end; text-align:right}
.pager b{font-size:15.5px; font-weight:600}

/* pricing and questions */
.p-buy{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(24px,4vw,48px); align-items:start}
.price-card{position:sticky; top:134px; display:flex; flex-direction:column; gap:16px; padding:24px; border-radius:18px; background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow)}
.price-card .amt{display:flex; align-items:baseline; gap:8px}
.price-card .amt b{font-size:clamp(36px,4vw,46px); font-weight:700; letter-spacing:-.04em; line-height:1}
.price-card .per{font-size:15px; color:var(--fg-subtle); font-weight:500}
.price-card ul{display:flex; flex-direction:column; gap:8px; font-size:15px}
.price-card li{display:grid; grid-template-columns:18px minmax(0,1fr); gap:10px}
.price-card li svg{width:17px; height:17px; color:var(--success); margin-top:3px}
.offer{display:flex; gap:12px; padding:12px 14px; border-radius:12px; background:var(--amber-soft); border:1px solid var(--amber-line); font-size:14.5px}
.offer svg{width:18px; height:18px; color:var(--amber); margin-top:2px}
.offer b{color:var(--amber)}
.price-card .actions{display:grid; gap:10px}
.price-card .actions .btn{width:100%}
/* the platform hub: every module on one page */
.hub-group{margin:32px 0 12px; font-size:15px; font-weight:600; letter-spacing:0; color:var(--fg-subtle)}
.hub-group:first-child{margin-top:0}
.hub{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.hub a{display:grid; grid-template-columns:48px minmax(0,1fr) auto; gap:16px; align-items:start; padding:22px; text-decoration:none; transition:border-color .2s, box-shadow .25s}
.hub a:hover{border-color:var(--border-strong); box-shadow:var(--shadow)}
.hub .mi{width:48px; height:48px; border-radius:13px; background:var(--primary-soft); color:var(--primary); display:grid; place-items:center}
.hub .mi svg{width:22px; height:22px}
.hub h3{font-size:19px; letter-spacing:-.02em; line-height:1.3}
.hub p{font-size:15px; color:var(--fg-muted); margin-top:4px}
.hub .price{font-size:15px; font-weight:700; white-space:nowrap}
.hub .price span{display:block; font-size:13px; font-weight:500; color:var(--fg-subtle); text-align:right}

/* the section bar sits under the header on wide screens: anchors, focus and the facts strip leave room for it */
@media (min-width:941px){
  html:has(.mbar){scroll-padding-top:132px}
  .p-facts{padding-top:clamp(20px,3vw,32px)}
}
/* until about 1100px there isn't room for the section links as well as the price and the switch */
@media (min-width:941px) and (max-width:1100px){
  .mbar-links{display:none}
  .mbar-cta{margin-left:auto}
}
.mbar-id{min-width:0}
.mbar-id b{overflow:hidden; text-overflow:ellipsis}

/* ── Responsive ────────────────────────────────────── */
@media (max-width:1080px){
  .p-facts ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p-facts li:nth-child(odd){border-left:0}
  .p-facts li:nth-child(n+3){border-top:1px solid var(--border)}
}
@media (max-width:940px){
  .mbar{display:none}
  .fits{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p-hero .wrap, .feat-row, .p-buy{grid-template-columns:minmax(0,1fr)}
  .feat-row:nth-child(even) .hl-copy{order:0}
  .price-card{position:static}
  .fgroups, .fgroups.one .flist{grid-template-columns:minmax(0,1fr)}
  .works{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fgroups.one .flist li:nth-last-child(2):nth-child(odd){border-bottom:1px solid var(--border)}
  .hub{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .p-facts ul{grid-template-columns:minmax(0,1fr)}
  .p-facts li{border-left:0!important; border-top:1px solid var(--border)}
  .p-facts li:first-child{border-top:0}
  .steps{grid-template-columns:minmax(0,1fr); gap:28px}
  .steps::before{top:0; bottom:0; left:22px; right:auto; width:2px; height:auto; background:linear-gradient(180deg, var(--primary), var(--primary-line))}
  .step{display:grid; grid-template-columns:46px minmax(0,1fr); text-align:left; gap:4px 16px; align-items:start; padding:0}
  .step i{grid-row:span 2}
  .step h3{margin-top:10px}
  .works, .fits{grid-template-columns:minmax(0,1fr)}
  .pager{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .pager a:nth-child(2){grid-column:1 / -1; order:3}
  .hub a{grid-template-columns:40px minmax(0,1fr); padding:18px}
  .hub .mi{width:40px; height:40px}
  .hub .price{grid-column:2}
  .hub .price span{text-align:left; display:inline; margin-left:6px}
}
@media print{
  .mbar{display:none}
  .price-card{position:static}
}