/* Vyom Hospitality Suite: the pricing page and the demo page. Tokens, the header, the footer, the
   closing band and the shared components (FAQ, setup cards, breadcrumb) are in assets/site.css. */

/* ── Hero: two ways to buy ── */
.pr-hero{position:relative; padding-block:clamp(28px,5vw,64px) clamp(40px,6vw,72px); overflow:hidden}
.pr-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 80% 30%, #000 25%, transparent 75%); mask-image:radial-gradient(ellipse 60% 70% at 80% 30%, #000 25%, transparent 75%); opacity:.55; pointer-events:none}
.pr-hero .wrap{position:relative; display:flex; flex-direction:column; gap:18px}
.pr-hero h1{margin-top:8px}
.pr-hero h1 .h1-main{font-size:clamp(34px,4.6vw,58px); line-height:1.04; letter-spacing:-.045em}
.plans{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:12px; max-width:920px}
.plan{position:relative; overflow:hidden; display:flex; flex-direction:column; gap:12px; padding:24px; border-radius:20px; background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow)}
.plan.best{box-shadow:var(--shadow-lg)}
.plan.best::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}
.plan > *{position:relative}
.plan-k{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:15px; font-weight:600; color:var(--fg-muted)}
.plan-amt{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px}
.plan-amt b{font-size:clamp(36px,4vw,48px); font-weight:700; letter-spacing:-.045em; line-height:1}
.plan-amt span, .plan-amt small{font-size:15px; color:var(--fg-muted)}
.plan-line{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; font-size:15px; color:var(--fg-muted)}
.plan-line s{color:var(--fg-subtle)}
.plan .btn{margin-top:auto}
.save{color:var(--success); font-weight:600}
.pr-facts{display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:6px; font-size:14.5px; color:var(--fg-muted)}
.pr-facts li{display:inline-flex; align-items:center; gap:8px}
.pr-facts svg{width:16px; height:16px; color:var(--success)}
.pr-facts a{color:var(--primary); font-weight:600}

/* ── Example setups ── */
.setups{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
@supports (grid-template-rows:subgrid){
  .setups .setup{display:grid; grid-row:span 7; grid-template-rows:subgrid; align-content:start; row-gap:10px}
}
.setup .btn[aria-pressed="true"]{background:var(--primary-soft); border-color:var(--primary-line); color:var(--primary)}

/* ── The calculator ── */
.calc{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr); gap:clamp(24px,4vw,48px); align-items:start}
.qlist .sec-head{margin-bottom:24px}
.qgroup + .qgroup{margin-top:28px}
.qgroup h3{margin-bottom:10px; font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-subtle)}
.qrow{border:1px solid var(--border); border-radius:16px; background:var(--surface); transition:border-color .2s, background .2s, box-shadow .2s}
.qrow + .qrow{margin-top:10px}
.qrow.on{border-color:var(--primary-line); box-shadow:0 0 0 1px var(--primary-line)}
.qmain{display:grid; grid-template-columns:40px minmax(0,1fr) auto auto; gap:14px; align-items:center; padding:14px 16px; cursor:pointer; -webkit-user-select:none; user-select:none}
.qtxt b{display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; font-size:16px; font-weight:600; line-height:1.3}
.qtxt small{display:block; margin-top:2px; font-size:14px; color:var(--fg-muted); line-height:1.45}
.qif{color:var(--fg); font-weight:500}
.qprice{text-align:right; white-space:nowrap}
.qprice b{display:block; font-size:17px; font-weight:700; letter-spacing:-.02em}
.qprice small{font-size:12.5px; color:var(--fg-subtle)}
.qdep{display:flex; gap:10px; margin:0 16px 12px; padding:10px 12px; border-radius:10px; background:var(--amber-soft); border:1px solid var(--amber-line); font-size:14px; color:var(--fg)}
.qdep svg{width:16px; height:16px; margin-top:2px; color:var(--amber)}
.qmore{border-top:1px solid var(--border)}
.qmore summary{display:flex; align-items:center; gap:6px; padding:10px 16px; list-style:none; cursor:pointer; font-size:14px; font-weight:600; color:var(--primary)}
.qmore summary::-webkit-details-marker{display:none}
.qmore summary svg{width:15px; height:15px; transition:transform .2s}
.qmore[open] summary svg{transform:rotate(180deg)}
.qmore ul{display:flex; flex-direction:column; gap:8px; padding:2px 16px 12px}
.qmore li{display:grid; grid-template-columns:18px minmax(0,1fr); gap:10px; font-size:14px; color:var(--fg-muted); line-height:1.5}
.qmore li svg{width:16px; height:16px; margin-top:2px; color:var(--primary)}
.qmore li b{color:var(--fg); font-weight:600}
.qworks{display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:0 16px 10px; font-size:13.5px; color:var(--fg-subtle)}
.qworks > span{margin-right:4px; font-weight:600}
.qmore > .go{margin:0 16px 14px}
/* the summary keeps pace beside the rows */
.qsum{position:sticky; top:88px}
.qsum-card{display:flex; flex-direction:column; gap:14px; padding:22px; border-radius:20px; background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-lg)}
.qsum h2{font-size:20px; letter-spacing:-.02em}
.qlines{display:flex; flex-direction:column; margin:0}
.qlines > div{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); font-size:15px}
.qlines dt{color:var(--fg-muted)}
.qlines dd{margin:0; font-weight:600; white-space:nowrap}
.qlines .off dd{color:var(--success)}
.qlines .off dd.na{color:var(--fg-subtle); font-weight:500; font-size:14px}
.qlines .tot{border-bottom:0; padding-top:14px}
.qlines .tot dt{color:var(--fg); font-weight:600}
.qlines .tot b{font-size:clamp(30px,3vw,38px); font-weight:700; letter-spacing:-.04em; line-height:1}
.qnote{margin-top:-6px; font-size:14px; color:var(--fg-subtle)}
.qmsg{display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:12px 14px; border-radius:12px; background:var(--amber-soft); border:1px solid var(--amber-line); font-size:14.5px}
.qmsg.ok{background:var(--success-soft); border-color:transparent}
.qmsg.ok p{color:var(--fg)}
.qsend{display:grid; gap:10px}
.qtools{display:flex; flex-wrap:wrap; gap:4px}
.qtools svg{width:15px; height:15px}
/* on a phone the total rides along at the foot of the screen while the rows are on it */
.qbar{position:fixed; z-index:34; left:12px; right:12px; max-width:560px; margin-inline:auto; bottom:calc(12px + env(safe-area-inset-bottom,0px)); display:none; align-items:center; justify-content:space-between; gap:12px; padding:10px 10px 10px 16px; border-radius:16px; background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-lg); transform:translateY(140%); transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.qbar.on{transform:none}
.qbar b{font-size:18px; font-weight:700; letter-spacing:-.02em}
.qbar small{font-size:13px; color:var(--fg-subtle)}
.qbar-n{display:block}

/* ── The launch offer ── */
.offer-wrap{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:20px clamp(28px,5vw,64px); align-items:start}
.offer-wrap .eyebrow{color:var(--amber)}
.offer-wrap h2{margin-top:10px}
.terms{display:flex; flex-direction:column; gap:12px}
.terms li{display:grid; grid-template-columns:20px minmax(0,1fr); gap:12px; font-size:16px; text-wrap:pretty}
.terms svg{width:18px; height:18px; margin-top:4px; color:var(--success)}
.multi{grid-column:2; display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border-radius:14px; background:var(--surface); border:1px solid var(--border); font-size:15px; color:var(--fg-muted)}
.multi svg{width:20px; height:20px; margin-top:2px; color:var(--primary)}

/* ── The demo page ── */
.demo-page{padding-top:clamp(20px,3vw,32px)}
.demo-page .crumbs{margin-bottom:16px}
.demo-page h1{font-size:clamp(32px,4vw,50px)}
.demo-mods{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.demo-mods a{display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:14px; align-items:center; padding:16px; text-decoration:none; transition:border-color .2s}
.demo-mods a:hover{border-color:var(--primary-line)}
.demo-mods b{display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-weight:600}
.demo-mods small{display:block; font-size:14px; color:var(--fg-muted)}
.demo-mods .price{font-weight:700; white-space:nowrap}
.demo-mods .price small{display:inline; font-weight:500; color:var(--fg-subtle); margin-left:2px}
.demo-more{display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; margin-top:24px}

/* ── Responsive ── */
@media (max-width:1080px){
  .setups{grid-template-columns:repeat(2,minmax(0,1fr))}
  .calc{grid-template-columns:minmax(0,1fr)}
  .qsum{position:static}
}
@media (max-width:940px){
  .offer-wrap{grid-template-columns:minmax(0,1fr)}
  .multi{grid-column:auto}
}
@media (max-width:1080px){
  .qbar{display:flex}
}
@media (max-width:640px){
  .plans, .setups, .demo-mods{grid-template-columns:minmax(0,1fr)}
  .qmain{grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"txt sw" "price sw"; row-gap:4px; padding:14px}
  .qmain .mi{display:none}
  .qtxt{grid-area:txt}
  .qprice{grid-area:price; text-align:left}
  .qprice b{display:inline; font-size:16px}
  .qmain .switch{grid-area:sw}
  .qsum-card{padding:18px}
  .demo-mods a{grid-template-columns:minmax(0,1fr) auto}
  .demo-mods .mi{display:none}
}
/* a printed quote: the modules picked and the total, on one page */
@media print{
  .announce, .top, .pr-hero, #setups, #offer, #faq, .close-band, .foot, .qbar, .qtools, .qsend, .qmore, .qmsg, .qdep, .qrow:not(.on){display:none!important}
  .calc{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .qsum{position:static}
  .qsum-card, .qrow{box-shadow:none}
  .section{padding-block:16px}
}