/* Vyom Hospitality Suite: the home page. Tokens, header, footer, the closing band and the shared
   components are in assets/site.css; the illustration kit (.mock, .mk-*) in assets/mock-kit.css. */

/* ── Hero: the category, the promise, and the product screen by screen ── */
.hero{position:relative; padding-block:clamp(28px,5vw,72px) clamp(48px,6vw,96px); overflow:hidden}
.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 60% 70% at 75% 45%, #000 25%, transparent 75%); mask-image:radial-gradient(ellipse 60% 70% at 75% 45%, #000 25%, transparent 75%); opacity:.6; pointer-events:none}
.hero .wrap{position:relative; display:grid; grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr); gap:clamp(32px,5vw,64px); align-items:center}
.hero-copy{display:flex; flex-direction:column; gap:20px; align-items:flex-start}
.hero h1 .h1-main{font-size:clamp(34px,4.5vw,60px); line-height:1.02; letter-spacing:-.045em}
.hero .lead{max-width:56ch}
.hero-cta{gap:12px}
.hero-wa{margin-top:-6px; font-size:14.5px; color:var(--fg-subtle)}
.hero-wa a{color:var(--fg); font-weight:600; text-underline-offset:3px; white-space:nowrap}
.hero-visual{position:relative; padding:8px 0 16px}
.hpanel{position:relative; isolation:isolate; padding:12px; border-radius:24px; background:color-mix(in srgb, var(--primary-soft) 60%, var(--surface)); border:1px solid var(--primary-line); box-shadow:var(--shadow-lg)}
.hpanel::after{content:''; position:absolute; z-index:-1; left:-56px; bottom:-64px; width:220px; height:220px; background:var(--primary); opacity:.08; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 6l7 13 7-13' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 6l7 13 7-13' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; pointer-events:none}
.htabs-row{display:flex; align-items:center; gap:8px; margin-bottom:12px}
.htabs{display:flex; gap:4px; flex:1; min-width:0; overflow-x:auto; scrollbar-width:none}
.htabs::-webkit-scrollbar{display:none}
.htabs button{flex:none; height:34px; padding:0 12px; border-radius:999px; border:1px solid transparent; background:transparent; font-weight:600; font-size:14px; color:var(--fg-muted); white-space:nowrap; transition:background .15s, color .15s, border-color .15s}
.htabs button:hover{color:var(--fg)}
.htabs button[aria-selected="true"]{background:var(--surface); border-color:var(--border); color:var(--fg); box-shadow:var(--shadow-sm)}
.htabs button:focus-visible{outline-offset:-3px}
.hpause{flex:none; width:34px; height:34px; border-radius:50%; border:1px solid var(--border); background:var(--surface); color:var(--fg-muted); display:grid; place-items:center}
.hpause:hover{color:var(--fg)}
.hpause svg{width:14px; height:14px}
.hpause .i-play, .hpause[aria-pressed="true"] .i-pause{display:none}
.hpause[aria-pressed="true"] .i-play{display:block}
.hpanels{display:grid}
.hp{grid-area:1 / 1; min-width:0; visibility:hidden; opacity:0; transform:translateY(6px); transition:opacity .35s, transform .35s, visibility 0s .35s}
.hp.on{visibility:visible; opacity:1; transform:none; transition:opacity .35s, transform .35s}
.hp .mock{box-shadow:var(--shadow)}
.hcap{margin-top:10px; padding:0 6px; font-size:14px; line-height:1.45; color:var(--fg-muted); min-height:2.9em}
.hcap b{color:var(--fg); font-weight:600}
.hcap a{color:var(--primary); font-weight:600; white-space:nowrap}
.hrooms{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px}
.hrooms span{display:flex; flex-direction:column; gap:1px; padding:7px 8px; border-radius:9px; border:1px solid var(--border); background:var(--bg-subtle); min-width:0}
.hrooms b{font-size:13.5px; font-weight:700}
.hrooms small{font-size:11px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hrooms .ok small{color:var(--success)} .hrooms .bad small{color:var(--danger)} .hrooms .warn small{color:var(--amber)} .hrooms .pri small{color:var(--primary)}
.hpipe{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; font-size:11px; font-weight:600; color:var(--fg-subtle)}
.hpipe span{padding-top:6px; border-top:3px solid var(--border); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hpipe .d{border-color:var(--primary); color:var(--fg)} .hpipe .c{border-color:var(--primary); color:var(--primary)}
.hprices{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 16px; font-size:13px}
.hprices span{display:flex; justify-content:space-between; gap:8px; padding-bottom:6px; border-bottom:1px dashed var(--border); min-width:0}
.hprices small{color:var(--fg-muted); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mk-total .saves{display:block; color:var(--success); font-weight:600}
.float{position:absolute; z-index:3; display:flex; align-items:center; gap:10px; padding:10px 14px 10px 10px; border-radius:14px; background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-lg); font-size:14px; font-weight:600; white-space:nowrap}
.float small{display:block; font-size:12.5px; font-weight:500; color:var(--fg-subtle)}
.float .fi{width:32px; height:32px; border-radius:9px; display:grid; place-items:center; background:var(--success-soft); color:var(--success)}
.float .fi svg{width:16px; height:16px}
.float.f2{right:-28px; bottom:-14px}
.float.f2 .fi{background:var(--primary-soft); color:var(--primary)}

/* ── The India facts: a quiet strip of links ── */
.facts{padding-block:26px 28px; border-block:1px solid var(--border)}
.facts .eyebrow{display:flex; justify-content:center; text-align:center; margin-bottom:14px}
.facts ul{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px}
.facts a{display:flex; align-items:center; gap:10px; height:100%; padding:8px; border-radius:12px; text-decoration:none; transition:background .15s}
.facts a:hover{background:var(--muted-bg)}
.facts .fi{flex:none; width:34px; height:34px; border-radius:10px; background:var(--primary-soft); color:var(--primary); display:grid; place-items:center}
.facts .fi svg{width:17px; height:17px}
.facts b{display:block; font-size:14px; font-weight:600; line-height:1.3}
.facts small{display:block; font-size:12.5px; color:var(--fg-subtle); line-height:1.35}

/* ── Who it's for ── */
.segs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.seg-cards{display:contents}
.seg-head{grid-row:span 2; display:flex; flex-direction:column; gap:14px; padding:4px 12px 4px 0}
.seg-head .go{margin-top:4px}

/* ── The platform, as a bento on a dark band ── */
.bento{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:16px}
.bc{position:relative; display:flex; flex-direction:column; gap:10px; padding:22px; border-radius:20px; background:var(--surface); border:1px solid var(--border); transition:border-color .2s}
.bc:hover{border-color:var(--border-strong)}
.bc.s8{grid-column:span 8; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); grid-template-rows:auto auto auto auto auto 1fr; column-gap:28px; align-content:start}
.bc.s8 > *{grid-column:1}
.bc.s8 > .bc-top{grid-column:1 / -1}
.bc.s8 .bc-mock{grid-column:2; grid-row:2 / span 5; align-self:center; margin:0}
.bc.s6{grid-column:span 6}
.bc.s4{grid-column:span 4}
.bc.s3{grid-column:span 3}
.bc.hot{border-color:var(--primary-line); background:linear-gradient(180deg, color-mix(in srgb, var(--primary) 18%, var(--surface)), var(--surface) 55%)}
.bc-top{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.bc-top .mi{width:32px; height:32px; border-radius:9px; background:var(--primary-soft); color:var(--primary); display:grid; place-items:center}
.bc-top .mi svg{width:17px; height:17px}
.bc .bc-name{margin-bottom:-4px; font-weight:600; font-size:14.5px; color:var(--fg-muted)}
.bc-points{display:flex; flex-direction:column; gap:7px; margin-top:4px; font-size:14.5px}
.bc-points li{display:grid; grid-template-columns:18px minmax(0,1fr); gap:10px}
.bc-points svg{width:16px; height:16px; margin-top:3px; color:var(--primary)}
.bc-price{margin-left:auto; font-weight:700; font-size:14.5px; white-space:nowrap}
.bc-price small{font-weight:500; font-size:13px; color:var(--fg-subtle)}
.bc h3{font-size:clamp(19px,1.8vw,24px); font-weight:700; letter-spacing:-.025em; line-height:1.2}
.bc.s3 h3{font-size:17px; letter-spacing:-.015em}
.bc > p{font-size:15px; color:var(--fg-muted)}
.bc-mock{margin-top:6px; box-shadow:none}
.bc-mock .mock-body{padding:12px 14px 14px; gap:10px}
.bc-strip{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:2px; font-size:13px; font-weight:500; color:var(--fg-muted)}
.bc-strip svg{width:14px; height:14px}
.bc-links{display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:auto; padding-top:6px}
.bc .go{display:inline-block}
.bc .go svg{margin-left:6px; vertical-align:-2px}
.bc .go.alt{position:relative; z-index:2; color:var(--fg-muted)}
.bc .go.alt:hover{color:var(--fg)}
.bento-foot{margin-top:28px; gap:16px 28px}
.stretch::after{content:''; position:absolute; inset:0; border-radius:inherit}

/* ── Venue CRM: the new module ── */
.venue{position:relative; overflow:hidden; overflow:clip; background:linear-gradient(180deg, var(--primary-soft), var(--bg) 62%); border-block:1px solid var(--primary-line)}
.venue::before{content:''; position:absolute; right:-150px; top:-120px; width:420px; height:420px; background:var(--primary); opacity:.05; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 6l7 13 7-13' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 6l7 13 7-13' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; pointer-events:none}
.venue .wrap{position:relative}
.v-head{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:clamp(28px,5vw,64px); align-items:end}
.v-copy{display:flex; flex-direction:column; gap:16px; align-items:flex-start}
.v-copy .eyebrow{flex-wrap:wrap; color:var(--primary)}
.v-copy h2{font-size:clamp(30px,3.8vw,50px)}
.v-works{display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:14px; color:var(--fg-subtle)}
.v-works > span{margin-right:4px; font-weight:600}
.v-cta{gap:10px}
.v-cta2{gap:10px 18px; margin-top:-4px}
.v-wa{font-size:14.5px; font-weight:600; color:var(--wa); text-underline-offset:3px}
.v-feats{display:flex; flex-direction:column}
.v-feats li{display:grid; grid-template-columns:36px minmax(0,1fr); gap:12px; padding:14px 0; border-top:1px solid var(--primary-line)}
.v-feats b{display:block; font-weight:600; font-size:15.5px}
.v-feats li > span > span{display:block; font-size:14.5px; color:var(--fg-muted); line-height:1.5}
.vi{width:36px; height:36px; border-radius:10px; background:var(--surface); border:1px solid var(--primary-line); color:var(--primary); display:grid; place-items:center; flex:none}
.vi svg{width:18px; height:18px}
/* the pipeline, driven by the demo below it */
.pipe{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); margin-top:clamp(32px,4vw,48px)}
.pipe li{position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--fg-muted); text-align:center}
.pipe li + li::before{content:''; position:absolute; top:17px; right:50%; width:100%; height:2px; background:var(--primary-line); transition:background .3s}
.pipe li.done + li::before{background:var(--primary)}
.pipe i{position:relative; z-index:1; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--surface); border:2px solid var(--primary-line); color:var(--primary); transition:background .3s, border-color .3s, color .3s, box-shadow .3s}
.pipe i svg{width:16px; height:16px}
.pipe li.done{color:var(--fg)}
.pipe li.done i{background:var(--primary); border-color:var(--primary); color:var(--on-primary)}
.pipe li[aria-current="step"]{color:var(--primary)}
.pipe li[aria-current="step"] i{border-color:var(--primary); box-shadow:0 0 0 5px color-mix(in srgb, var(--primary) 18%, transparent)}
.pipe-now{display:none; margin-top:10px; text-align:center; font-size:14px; font-weight:600; color:var(--primary)}
.v-try{display:flex; align-items:center; gap:12px; margin:30px 0 14px; font-size:15.5px; color:var(--fg-muted)}
.v-try b{color:var(--fg)}
.v-foot{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 24px; margin-top:22px}

/* the demo: the client's link and the venue's CRM */
.builder{background:var(--surface); border:1px solid var(--border); border-radius:22px; box-shadow:var(--shadow-lg)}
.builder .card-head{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:0 20px; border-bottom:1px solid var(--border)}
.utabs{display:flex; gap:22px; min-width:0}
.utab{position:relative; border:0; background:none; padding:15px 0 14px; font-weight:600; font-size:15px; color:var(--fg-subtle); white-space:nowrap}
.utab[aria-selected="true"]{color:var(--fg)}
.utab[aria-selected="true"]::after{content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; border-radius:2px; background:var(--primary)}
.utab .dot{display:inline-block; width:8px; height:8px; margin-left:6px; border-radius:50%; background:var(--success); vertical-align:2px}
.pbar{display:flex; align-items:center; gap:8px; height:42px; padding:0 14px; border-bottom:1px solid var(--border); background:var(--bg-subtle); font-size:13px; font-weight:500; color:var(--fg-subtle)}
.pbar svg{width:14px; height:14px; color:var(--success)}
.pbar > span:not(.badge){flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pbar.app i{width:10px; height:10px; border-radius:50%; background:var(--border-strong)}
.pbar.app i + span{margin-left:4px}
.pbar .badge{height:22px; font-size:12px}
.pane-body{padding:18px 20px 20px; display:flex; flex-direction:column; gap:18px}
.pv-intro{display:flex; flex-direction:column; gap:2px}
.pv-from{font-size:13px; font-weight:500; color:var(--fg-subtle)}
.pv-title{font-size:20px; font-weight:700; letter-spacing:-.02em; line-height:1.3}
.pv-sub{font-size:14.5px; color:var(--fg-muted)}
.pv-locked{display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:12px; background:var(--success-soft); color:var(--success); font-weight:600; font-size:14.5px}
.pv-locked svg{width:17px; height:17px; flex:none}
#client-body.locked :is(#pkgs, .dishes, .addons, .slider, .field){opacity:.5}
.flabel{display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:14px; font-weight:600; margin-bottom:8px}
.flabel span{font-weight:500; color:var(--fg-subtle); font-size:13.5px}
.link-btn{border:0; background:none; padding:0; font:inherit; font-weight:600; font-size:13.5px; color:var(--primary); cursor:pointer}
.link-btn:hover{text-decoration:underline}
.hint-chev{width:13px; height:13px; vertical-align:-2px; color:var(--primary)}
/* a radio group with a sliding thumb */
.seg{position:relative; display:inline-flex; gap:2px; padding:3px; border-radius:12px; background:var(--muted-bg); border:1px solid var(--border); max-width:100%}
.seg button{position:relative; z-index:1; border:0; background:transparent; height:34px; padding:0 14px; border-radius:9px; font-weight:600; font-size:14px; color:var(--fg-muted); white-space:nowrap; transition:color .2s}
.seg button[aria-checked="true"]{color:var(--fg)}
.seg .thumb{position:absolute; z-index:0; top:0; left:0; width:0; height:0; border-radius:9px; background:var(--surface); box-shadow:var(--shadow-sm), 0 0 0 1px var(--border); transition:transform .3s cubic-bezier(.3,.9,.3,1), width .3s cubic-bezier(.3,.9,.3,1), height .3s cubic-bezier(.3,.9,.3,1)}
.seg.full{display:flex; width:100%}
.seg.full button{flex:1; min-width:0}
.seg.tall button{height:auto; white-space:normal; padding:9px 10px; display:flex; flex-direction:column; align-items:flex-start; gap:1px; text-align:left}
.seg.tall button span{font-size:13px; font-weight:500; color:var(--fg-subtle)}
.pn{display:flex; align-items:center; gap:6px; font-weight:inherit}
.pp, .pt{font-style:normal}
.nw{font-style:normal; white-space:nowrap}
.pp-hint{display:none}
/* the dishes: untick to drop, a picker to swap */
.dishes{border:1px solid var(--border); border-radius:12px; overflow:hidden}
.dish{display:flex; align-items:center; gap:12px; padding:9px 12px; border-top:1px solid var(--border); cursor:pointer; position:relative; -webkit-user-select:none; user-select:none; font-size:14.5px; font-weight:500}
.dish:first-child{border-top:0}
.dish:hover{background:var(--bg-subtle)}
.dish input{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}
.dish .cb{width:18px; height:18px; border-radius:5px; border:1.5px solid var(--input); display:grid; place-items:center; flex:none; transition:background .15s, border-color .15s}
.dish .cb svg{width:12px; height:12px; color:#fff; opacity:0}
.dish input:checked + .cb{background:var(--primary); border-color:var(--primary)}
.dish input:checked + .cb svg{opacity:1}
.dish input:focus-visible + .cb{outline:2px solid var(--ring); outline-offset:2px}
.dish .nm{flex:1; min-width:0}
.dish .pr{font-size:13.5px; color:var(--fg-subtle); white-space:nowrap}
.dish:has(input[data-dish]:not(:checked)) .nm{color:var(--fg-subtle); text-decoration:line-through}
.dish .swap{position:relative; display:inline-flex; align-items:center; max-width:100%; vertical-align:middle}
.dish select{-webkit-appearance:none; appearance:none; max-width:100%; border:0; border-bottom:1.5px dashed var(--primary-line); border-radius:0; background:transparent; font:inherit; color:inherit; padding:1px 20px 1px 0; text-overflow:ellipsis; cursor:pointer}
.dish select:focus-visible{outline:2px solid var(--ring); outline-offset:2px; border-radius:4px}
.dish .swap svg{position:absolute; right:1px; width:15px; height:15px; color:var(--primary); pointer-events:none}
.dish:has(input[data-dish]:not(:checked)) select{color:var(--fg-subtle); text-decoration:line-through}
/* until the visitor tries something, the first dish asks to be touched */
.builder:not(.tried) .dish:first-child{animation:nudge 1.8s ease-in-out 1s 3}
@keyframes nudge{50%{background:var(--primary-soft)}}
.addons{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
.addon{display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"nm sw" "pr sw"; align-items:center; column-gap:8px; padding:9px 12px; border:1px solid var(--border); border-radius:10px; font-size:14px; font-weight:500; cursor:pointer; -webkit-user-select:none; user-select:none; transition:background .15s, border-color .15s}
.addon .an{grid-area:nm; line-height:1.35}
.addon small{grid-area:pr; color:var(--fg-subtle); font-size:13px; transition:color .15s}
.addon .switch{grid-area:sw}
.addon:has(input:checked){background:var(--primary-soft); border-color:var(--primary-line)}
.addon:has(input:checked) small{color:var(--primary)}
.addon .switch .track{width:32px; height:18px}
.addon .switch .track::after{width:14px; height:14px}
.addon .switch input:checked + .track::after{transform:translateX(14px)}
.slider{display:flex; flex-direction:column; gap:6px}
.slider .flabel{align-items:center}
.slider output{min-width:64px; text-align:center; font-weight:700; font-size:15px; padding:2px 10px; border-radius:999px; background:var(--primary-soft); color:var(--primary)}
.qty{display:flex; align-items:center; gap:6px}
.qty-btn{width:32px; height:32px; border-radius:50%; border:1px solid var(--border-strong); background:var(--surface); color:var(--fg); display:grid; place-items:center; box-shadow:var(--shadow-sm); transition:background .15s, opacity .15s, transform .1s}
.qty-btn:hover{background:var(--muted-bg)}
.qty-btn:active{transform:scale(.92)}
.qty-btn[aria-disabled="true"]{opacity:.4; cursor:default; transform:none}
.qty-btn svg{width:14px; height:14px}
input[type="range"]{-webkit-appearance:none; appearance:none; width:100%; height:22px; background:transparent}
input[type="range"]::-webkit-slider-runnable-track{height:6px; border-radius:6px; background:linear-gradient(var(--primary),var(--primary)) 0/var(--fill,20%) 100% no-repeat, var(--muted-bg)}
input[type="range"]::-moz-range-track{height:6px; border-radius:6px; background:var(--muted-bg)}
input[type="range"]::-moz-range-progress{height:6px; border-radius:6px; background:var(--primary)}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none; width:20px; height:20px; margin-top:-7px; border-radius:50%; background:#fff; border:2px solid var(--primary); box-shadow:var(--shadow)}
input[type="range"]::-moz-range-thumb{width:18px; height:18px; border-radius:50%; background:#fff; border:2px solid var(--primary)}
input[type="range"]:focus-visible{outline:none}
input[type="range"]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--primary-soft), 0 0 0 6px var(--ring)}
input[type="range"]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px var(--primary-soft), 0 0 0 6px var(--ring)}
/* the totals and the send button */
.pv-dock{display:contents}
.stats{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; transition:background .2s, border-color .2s, box-shadow .2s}
.stat{padding:12px 14px; border-radius:12px; border:1px solid var(--border); background:var(--bg-subtle)}
.stat small{display:block; font-size:13px; font-weight:500; color:var(--fg-subtle)}
.stat b{display:block; font-size:clamp(20px,2.2vw,26px); letter-spacing:-.03em; line-height:1.2; overflow-wrap:anywhere}
.stat.hl{background:var(--primary-soft); border-color:var(--primary-line)}
.stat.hl small{color:var(--primary)}
.stat .was-v{display:block; font-size:12.5px; font-weight:500; color:var(--fg-subtle)}
#pv-send.done{background:var(--success-soft); border-color:transparent; color:var(--success); cursor:default}
/* the venue's side */
.leads{display:flex; flex-direction:column; border:1px solid var(--border); border-radius:12px; overflow:hidden; font-size:13.5px}
.leads li{display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:10px; align-items:center; padding:8px 12px; border-top:1px solid var(--border); color:var(--fg-subtle)}
.leads li:first-child{border-top:0}
.leads li.on{background:var(--primary-soft); color:var(--fg-muted)}
.leads b{font-weight:600; color:var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.leads .mk-chip.ok{background:var(--success-soft); color:var(--success)}
.crm-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.badge.ok{background:var(--success-soft); border-color:transparent; color:var(--success)}
.crm-status{display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:12px; background:var(--bg-subtle); border:1px solid var(--border); font-size:14.5px; font-weight:500; color:var(--fg-muted)}
.crm-status.new{background:var(--primary-soft); border-color:var(--primary-line); color:var(--fg)}
.crm-status.ok{background:var(--success-soft); border-color:transparent; color:var(--success)}
.crm-status b{font-weight:600}
.crm-status svg{width:18px; height:18px; flex:none}
.crm-status.new svg{color:var(--primary)}
.hall-grid{width:calc(100% + 12px); margin:-6px; border-collapse:separate; border-spacing:6px; table-layout:fixed; font-size:12.5px}
.hall-grid th{padding:0; font-size:12.5px; font-weight:600; color:var(--fg-subtle); text-align:left}
.hall-grid tr > :first-child{width:92px}
.hall-grid td{padding:7px 9px; border-radius:8px; border:1px solid var(--border); background:var(--bg-subtle); font-weight:600; line-height:1.35; vertical-align:top}
.hall-grid td:empty{border:0; background:none; padding:0}
.hall-grid .free{color:var(--success)}
.hall-grid .booked{color:var(--fg-subtle); background:var(--muted-bg)}
.hall-grid .hold{background:var(--amber-soft); border-color:var(--amber-line); color:var(--amber)}
.hall-grid .booked.mine{background:var(--primary-soft); border-color:var(--primary-line); color:var(--primary)}
.changes{border:1px solid var(--border); border-radius:12px; overflow:hidden}
.changes:empty{display:none}
.changes li{display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:center; gap:12px; padding:10px 14px; border-top:1px solid var(--border)}
.changes li:first-child{border-top:0}
.changes .ci{width:30px; height:30px; border-radius:8px; display:grid; place-items:center; background:var(--muted-bg); color:var(--fg-muted)}
.changes .ci svg{width:15px; height:15px}
.changes .ci.add{background:var(--success-soft); color:var(--success)}
.changes .ci.swap, .changes .ci.pkg{background:var(--primary-soft); color:var(--primary)}
.changes small{display:block; font-size:12.5px; font-weight:500; color:var(--fg-subtle)}
.changes b{display:block; font-size:14.5px; font-weight:600; line-height:1.4}
.changes .d{font-size:14px; font-weight:600; color:var(--fg-muted); white-space:nowrap}
.changes .d.same{font-size:12.5px; font-weight:500; color:var(--fg-subtle)}
.changes-empty{padding:14px; border-radius:12px; border:1px dashed var(--border-strong); text-align:center; font-size:14.5px; color:var(--fg-muted)}
.cmp{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.results{display:flex; flex-direction:column; gap:6px}
.results li{display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px; background:var(--success-soft); color:var(--success); font-weight:600; font-size:14px}
.results svg{width:16px; height:16px; flex:none}
.crm-actions{display:flex; flex-wrap:wrap; gap:10px}
.crm-actions .btn{flex:1 1 auto}

/* ── How it fits together ── */
.flow{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
.fcol{position:relative; display:flex; flex-direction:column; gap:8px; padding:18px; border-radius:18px; border:1px solid var(--border); background:var(--surface); box-shadow:var(--shadow-sm)}
.fcol + .fcol::before{content:''; position:absolute; left:-17px; top:33px; width:16px; height:2px; background:var(--primary-line)}
.fstep{display:flex; align-items:center; gap:10px; margin-bottom:4px; font-weight:700; font-size:17px; letter-spacing:-.01em}
.fstep i{width:30px; height:30px; border-radius:50%; background:var(--primary); color:var(--on-primary); display:grid; place-items:center; font-style:normal; font-size:14px}
.fchip{display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px; border:1px solid var(--border); background:var(--bg-subtle); font-size:14px; font-weight:600; text-decoration:none; transition:border-color .15s, color .15s}
a.fchip:hover{border-color:var(--primary-line); color:var(--primary)}
.fchip .code{min-width:46px}
.fchip.static{border-style:dashed; background:transparent; color:var(--fg-muted); font-weight:500}
.fnote{margin-top:4px; font-size:14px; color:var(--fg-muted); line-height:1.5}
.fevent{margin-top:auto; display:flex; gap:8px; align-items:baseline; padding:8px 10px; border-radius:10px; background:var(--primary-soft); color:var(--primary); font-size:13px; font-weight:600; line-height:1.4}
.fevent small{font-family:var(--mono); font-size:11px}
.handoff{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; margin-top:28px; font-size:14px; color:var(--fg-muted)}
.handoff b{margin-right:4px; font-weight:600; color:var(--fg)}

/* ── Why Vyom ── */
.why4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
.why4 li{display:flex; flex-direction:column; gap:10px; padding:22px}
.why4 .num{font-variant-numeric:normal; font-size:40px; font-weight:700; line-height:1; letter-spacing:-.04em; color:transparent; -webkit-text-stroke:1.2px var(--primary)}
.why4 h3{font-size:18px; letter-spacing:-.02em}
.why4 p{font-size:15px; color:var(--fg-muted)}
.why4 .codes, .why4 .go{margin-top:auto}
.controls{margin-top:24px; padding:22px; border-radius:20px; border:1px dashed var(--border-strong); background:var(--surface)}
.controls h3{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; margin-bottom:14px; font-size:17px}
.controls h3 small{font-size:13.5px; font-weight:500; color:var(--fg-subtle)}
.controls ul{display:flex; flex-wrap:wrap; gap:8px}
.controls li{display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:999px; border:1px solid var(--border); background:var(--bg-subtle); font-size:14px; font-weight:500}
.controls li svg{width:15px; height:15px; color:var(--primary)}
.controls .code{font-size:11px}

/* ── Pricing at a glance ── */
.pteaser{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(28px,5vw,64px); align-items:start}
.pteaser .sec-head{margin-bottom:28px}
.bars{display:flex; flex-direction:column; gap:12px; margin-bottom:28px}
.bar-row{display:grid; grid-template-columns:200px minmax(0,1fr) auto; gap:14px; align-items:center; font-size:14.5px; font-weight:500; color:var(--fg-muted)}
.bar-row b{font-size:17px; font-weight:700; color:var(--fg); white-space:nowrap}
.bar-row b small{font-size:13px; font-weight:500; color:var(--fg-subtle)}
.bar{display:block; height:14px; border-radius:999px; background:var(--muted-bg); overflow:hidden}
.bar > i{display:block; height:100%; width:var(--w); border-radius:inherit; background:var(--fg-subtle)}
.bar-row.offer > span{color:var(--amber); font-weight:600}
.bar-row.offer .bar > i{background:var(--primary)}
.plist-cap{margin-bottom:6px; font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-subtle)}
.plist{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:28px}
.plist li{display:flex}
.plist a{flex:1; display:grid; grid-template-columns:minmax(0,1fr) 64px 72px; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--border); text-decoration:none; font-size:14.5px; font-weight:500}
.plist a:hover span{color:var(--primary)}
.plist i{height:6px; border-radius:6px; background:linear-gradient(90deg, var(--primary) var(--w), var(--muted-bg) var(--w))}
.plist b{text-align:right; font-weight:700}
.suite-card{position:relative; overflow:hidden; display:flex; flex-direction:column; gap:14px; padding:26px; border-radius:24px; box-shadow:var(--shadow-lg)}
.suite-card::after{content:''; position:absolute; right:-70px; top:-90px; width:260px; height:260px; background:radial-gradient(closest-side, color-mix(in srgb, var(--primary) 32%, transparent), transparent); pointer-events:none}
.suite-card > *{position:relative}
.suite-card .badge{align-self:flex-start}
.suite-card h3{font-size:16px; font-weight:600; color:var(--fg-muted)}
.sc-amt{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px}
.sc-amt b{font-size:clamp(40px,4.4vw,54px); letter-spacing:-.045em; line-height:1}
.sc-amt span{font-size:15px; color:var(--fg-muted)}
.sc-was{display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; font-size:15px; color:var(--fg-subtle)}
.save{color:var(--success); font-weight:600}
.suite-card ul{display:flex; flex-direction:column; gap:8px; font-size:15px}
.suite-card li{display:grid; grid-template-columns:18px minmax(0,1fr); gap:10px}
.suite-card li svg{width:17px; height:17px; margin-top:3px; color:var(--success)}
.sc-actions{display:grid; gap:10px; margin-top:4px}

/* ── Questions ── */
.faq-more{margin-top:24px; text-align:center}

/* ── Responsive ── */
@media (max-width:1180px){
  .float{display:none}
}
@media (max-width:1080px){
  .facts ul{grid-template-columns:repeat(3,minmax(0,1fr))}
  .segs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .seg-head{grid-row:auto; grid-column:1 / -1; padding:0}
  .bc.s8, .bc.s4{grid-column:span 12}
  .bc.s3{grid-column:span 6}
  .bc.s4{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:24px; align-content:start}
  .bc.s4 > *{grid-column:1}
  .bc.s4 > .bc-top{grid-column:1 / -1}
  .bc.s4 .bc-mock{grid-column:2; grid-row:2 / span 5; align-self:center; margin:0}
  .why4, .flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fcol:nth-child(odd)::before{display:none}
  .plist{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:940px){
  .hero .wrap, .v-head, .pteaser{grid-template-columns:minmax(0,1fr)}
  .hero-visual{max-width:640px}
  .v-head{align-items:start}
  /* the demo: one side at a time, on tabs */
  .pane-body{padding:16px 16px 18px}
  .stats{position:relative; z-index:3; padding:7px; margin:-8px; border:1px solid transparent; border-radius:18px}
  .pv-dock.stuck .stats{position:sticky; bottom:calc(10px + env(safe-area-inset-bottom,0px)); background:var(--surface); border-color:var(--border); box-shadow:var(--shadow-lg)}
  #crm-back{display:inline-flex}
}
/* wide screens: the proposal shows both ends at once, the venue's side keeping pace beside the client's */
@media (min-width:941px){
  .builder{display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); align-items:start}
  .builder > .card-head{display:none}
  .pane.client{border-right:1px solid var(--border)}
  .pane.client .pbar{border-top-left-radius:22px}
  .pane.crm .pbar{border-top-right-radius:22px}
  .pane.crm{position:sticky; top:88px; max-height:calc(100vh - 104px); overflow-y:auto; overscroll-behavior:contain; border-top-right-radius:22px}
  #crm-back{display:none}
  .pv-dock{display:grid; gap:10px; position:relative; z-index:3; padding:8px; margin:-9px; border:1px solid transparent; border-radius:20px; transition:background .2s, border-color .2s, box-shadow .2s}
  .pv-dock.stuck{position:sticky; bottom:16px; background:var(--surface); border-color:var(--border); box-shadow:var(--shadow-lg)}
  .pv-dock .ft-word{display:none}
}
@media (min-width:941px) and (max-height:900px){
  .pane.crm .leads li:not(.on), .pane.crm > .pane-body > .fine:last-child{display:none}
}
@media (min-width:941px) and (max-width:1179px){
  .htabs{gap:2px; -webkit-mask-image:linear-gradient(90deg, #000 88%, transparent); mask-image:linear-gradient(90deg, #000 88%, transparent)}
  .htabs button{padding:0 9px; font-size:13.5px}
  .hrooms{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hprices{grid-template-columns:minmax(0,1fr)}
}
@media (min-width:1180px){
  .pv-dock{grid-template-columns:minmax(0,.8fr) minmax(0,1.1fr) auto}
  .pv-dock .btn{white-space:nowrap}
  .pv-dock .stats{display:contents}
  .pv-dock .btn{height:auto; padding-inline:16px}
}
@media (max-width:640px){
  .hero{padding-top:20px}
  .hero-copy{gap:16px}
  .hero .lead .nm{display:none}
  .hero-cta{width:100%}
  .hero-cta .btn{flex:1 1 140px}
  .hpanel{padding:8px; border-radius:20px}
  .htabs{-webkit-mask-image:linear-gradient(90deg, #000 82%, transparent); mask-image:linear-gradient(90deg, #000 82%, transparent)}
  .hrooms{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hprices{grid-template-columns:minmax(0,1fr)}
  .hprices span:nth-child(n+5){display:none}
  .hpipe{font-size:10px}
  .hpanel::after{display:none}
  .facts ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts a{padding:6px 4px; gap:8px}
  .facts .fi{width:30px; height:30px}
  .why4, .flow{grid-template-columns:minmax(0,1fr)}
  /* the setups slide sideways on a phone, the next one peeking in */
  .segs{display:block}
  .seg-head{margin-bottom:20px}
  .seg-cards{display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; margin-inline:calc(-1 * var(--gutter)); padding:4px var(--gutter) 12px; scroll-padding-inline:var(--gutter)}
  .seg-cards::-webkit-scrollbar{display:none}
  .seg-cards .setup{flex:0 0 84%; scroll-snap-align:start}
  .bc-points, .bc.s3 > p, .bc.s8 .bc-mock{display:none}
  .fcol{flex-direction:row; flex-wrap:wrap; align-items:center; gap:6px; padding:16px}
  .fstep{flex:0 0 100%}
  .fchip{padding:6px 9px; font-size:13.5px}
  .fchip .code{min-width:0}
  .fnote{flex:0 0 100%}
  .fevent{flex:0 0 100%; margin-top:2px}
  .why4 li{padding:18px; gap:8px}
  .why4 .num{font-size:30px}
  .v-feats{display:none}
  .fcol + .fcol::before{display:none}
  .bc.s3, .bc.s6{grid-column:span 12}
  .bc.s8, .bc.s4{display:flex}
  .bc{padding:18px}
  .v-cta{width:100%}
  .v-cta .btn{flex:1 1 100%}
  .pipe li span{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  .pipe i{width:28px; height:28px}
  .pipe i svg{width:13px; height:13px}
  .pipe li + li::before{top:13px}
  .pipe-now{display:block}
  .v-try{margin-top:20px; font-size:15px}
  .builder{border-radius:18px}
  .builder .card-head{padding:0 16px}
  .seg.tall button{padding:9px 10px; gap:3px}
  .pn{flex-direction:column; align-items:flex-start; gap:5px; line-height:1.3}
  .pp, .ft-word{display:none}
  .pp-hint{display:inline}
  .dish{min-height:48px; padding:10px 14px; font-size:15px}
  .dish .cb{width:20px; height:20px}
  .addon{grid-template-areas:"nm nm" "pr sw"; align-items:end; row-gap:6px; padding:10px 12px; border-radius:12px}
  .stats{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
  .stat{padding:8px 12px}
  .stat b{font-size:20px}
  .leads li:not(.on){display:none}
  .bar-row{grid-template-columns:minmax(0,1fr) auto; row-gap:6px}
  .bar-row .bar{grid-column:1 / -1; grid-row:2}
  .suite-card{padding:22px; border-radius:20px}
}
@media (max-width:400px){
  .stat{padding:8px 10px}
  .stat b{font-size:18px}
  .slider .flabel{flex-wrap:wrap; row-gap:8px}
  .qty{margin-left:auto}
}
/* touch screens: bigger targets for the steppers, the slider and the restore link */
@media (pointer:coarse){
  .dish select{padding-block:10px; margin-block:-10px}
  .qty-btn{width:44px; height:44px}
  .qty-btn svg{width:16px; height:16px}
  .flabel .link-btn{padding:12px 8px; margin:-12px -8px}
  input[type="range"]{height:32px}
  input[type="range"]::-webkit-slider-runnable-track{height:8px}
  input[type="range"]::-webkit-slider-thumb{width:28px; height:28px; margin-top:-10px}
  input[type="range"]::-moz-range-thumb{width:24px; height:24px}
}
@media print{
  .hp{visibility:visible!important; opacity:1!important; position:static}
  .hpanels{display:block}
  .hp:not(.on){display:none}
  .builder{display:none}
}