/* Reserve page (preview). Dark and quiet: no cards, hairlines instead of boxes, one white button.
   The picture stays beside the choices; the price lives in a bar that follows you. */
:root{
  color-scheme:dark;
  --bg:#07080a;
  --ink:#f5f5f7;
  --ink-2:rgba(245,245,247,.72);
  --muted:rgba(245,245,247,.5);
  --line:rgba(255,255,255,.12);
  --line-2:rgba(255,255,255,.28);
  --amber:#f5a623;
  --blue:#4a9eff;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
body.has-bar{padding-bottom:110px}
img{display:block;max-width:100%}
a{color:inherit;text-underline-offset:3px}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3,h4,.pill,b{font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Header */
.top{display:flex;align-items:center;justify-content:space-between;padding:22px clamp(20px,4vw,56px)}
.top img{height:34px;width:auto}
.top-lock{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted)}

/* 1. Hero: the headline sits on the empty silhouette, inset from the sides */
.hero{--logo-row:clamp(64px,6vw,84px)}
.hero-wrap{padding:0 clamp(16px,4vw,56px)}
:root{--cols:minmax(0,2.2fr) minmax(340px,1fr);--col-gap:clamp(36px,5vw,84px)}
.hero-grid{max-width:1560px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,5vw,56px)}
@media (min-width:1000px){.hero-grid{grid-template-columns:var(--cols);align-items:center;column-gap:var(--col-gap)}}
.hero-card{
  position:relative;width:100%;margin:0;border-radius:clamp(22px,3vw,36px);overflow:hidden;
  background:#020203;
  --feat-h:104px;
  height:clamp(580px,calc(100svh - var(--logo-row) - 250px),840px);
  padding:0 clamp(20px,5vw,72px);text-align:center;
  box-shadow:0 0 0 1px rgba(255,255,255,.07);
}
/* the bedroom photo fills the card; the feature list sits on a dark fade at its foot */
.hero-card::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("../hero-bg-fallback.jpg") 47% 60%/cover no-repeat;
}
/* the main heading: centred, outside the card */
.hero-title{
  max-width:30ch;margin:clamp(4px,1.2vw,16px) auto clamp(22px,3vw,40px);text-align:center;
  font-size:clamp(28px,3.7vw,50px);font-weight:700;letter-spacing:-0.045em;line-height:1.03;
}
.hero-title .dim{color:inherit}
.grad{background:linear-gradient(90deg,#4a9eff 0%,#f5a623 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.hero-logo{display:flex;align-items:center;width:max-content;height:var(--logo-row);margin:0;padding:0 clamp(20px,3vw,40px);line-height:0}
.hero-logo img{height:clamp(46px,4.4vw,64px);width:auto}
@media (max-width:640px){
  .hero-card{--feat-h:176px;min-height:600px}
}
.features{
  list-style:none;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 16px;
  position:absolute;z-index:2;left:0;right:0;bottom:0;margin:0;
  padding:26px clamp(20px,2.4vw,36px) 28px;text-align:left;
  background:linear-gradient(to top,rgba(2,2,3,.96) 55%,rgba(2,2,3,0));
}
.features li{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:500;color:var(--ink);line-height:1.3}
.features svg{flex:none;color:var(--ink-2)}
@media (max-width:980px){.features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.features{grid-template-columns:1fr}}

/* The offer: right of the hero card */
.offer{padding:0 clamp(4px,1vw,12px)}
@media (min-width:1000px){.offer{padding:0}}
.offer h2{font-size:clamp(24px,2.3vw,32px);font-weight:700;letter-spacing:-0.03em;line-height:1.1}
.offer form{margin-top:30px;display:grid;gap:22px;max-width:460px}
.offer .pill{justify-self:start;height:44px;padding:0 24px;font-size:15px}
.offer-done{margin-top:28px;max-width:460px}
.offer-hi{font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;font-size:17px;font-weight:600;color:var(--ink-2)}
.offer-code{margin-top:14px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;border:1.5px dashed var(--line-2);border-radius:18px}
.offer-code b{font-size:clamp(18px,1.9vw,24px);font-weight:700;letter-spacing:.05em;word-break:break-all}
.copy{height:40px;padding:0 18px;border-radius:999px;border:1.5px solid var(--line-2);font-weight:600;font-size:14px;transition:background .2s,border-color .2s;flex:none}
.copy:hover{border-color:#fff}
.copy.done{background:#fff;color:#07080a;border-color:#fff}
.offer-note{margin-top:14px;color:var(--ink-2);font-size:15px;max-width:42ch}

/* 2. Reserve: stage left, choices right */
.reserve{
  max-width:calc(1560px + 2 * clamp(16px,4vw,56px));margin:clamp(72px,10vw,130px) auto 0;padding:0 clamp(16px,4vw,56px);
  display:grid;grid-template-columns:minmax(0,1fr);gap:0;
  grid-template-areas:"stage" "config";
}
@media (min-width:1000px){
  .reserve{grid-template-columns:var(--cols);column-gap:var(--col-gap);grid-template-areas:"stage config";align-items:start}
  .stage-col{justify-self:start;width:min(100%,700px,max(440px,calc((100vh - 140px) * .8 + 98px)))}
}
.stage-col{grid-area:stage;align-self:start}
.stage{position:relative;margin:0;aspect-ratio:4/5;border-radius:28px;overflow:hidden;background:#060606} /* the colour of the bed pictures' background */
@media (min-width:980px){.stage-col{position:sticky;top:28px}}
@media (min-width:1000px){.stage{aspect-ratio:1/1}} /* square on wide screens, so the picture, its thumbnails and the price bar all fit on screen at once (4:5 is taller than the screen) */
@media (max-width:979px){.stage-col{margin:36px 0 8px}}
.stage-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s var(--ease),transform 1.2s var(--ease);transform:scale(1.03)}
.stage-img.on{opacity:1;transform:scale(1)}
#bedLabels{transition:opacity .4s}
@media (max-width:560px){#bedLabels{font-size:40px}}

.gate h2{font-size:clamp(28px,3.4vw,44px);font-weight:700;letter-spacing:-0.035em;line-height:1.05}
.lede{margin-top:12px;color:var(--ink-2);max-width:40ch;font-size:15px}
.gate form{margin-top:26px;display:grid;gap:20px;max-width:460px}
.f{display:grid;gap:4px}
.f span{font-size:12px;letter-spacing:0;text-transform:none;color:var(--muted);font-weight:500}
.f input{
  background:transparent;border:0;border-bottom:1.5px solid var(--line-2);border-radius:0;color:var(--ink);
  font-size:22px;font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;font-weight:500;padding:8px 0 10px;outline:none;transition:border-color .2s;
}
.f input:focus{border-color:#fff}
.f input.bad{border-color:#ff8a8a}
.f-msg{font-size:13px;color:#ff8a8a;margin-top:-10px}
.f-msg:empty{display:none}
.pill{
  display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 30px;border-radius:999px;
  background:#fff;color:#07080a;font-weight:600;font-size:16px;letter-spacing:-0.01em;transition:transform .2s var(--ease),background .2s;
}
.pill:hover{background:#e9edf3;transform:translateY(-1px)}
.gate .pill{justify-self:start}

/* The choices */
.config{grid-area:config;position:relative;margin-top:44px}
@media (min-width:980px){.config{margin-top:0}}
.step{padding:34px 0 40px;border-top:1px solid var(--line)}
.step:first-child{border-top:0;padding-top:6px}
.step h3{font-size:28px;font-weight:700;letter-spacing:-0.03em;line-height:1.1}
.step-sub{margin-top:6px;color:var(--muted);font-size:15px}

/* Size: one dropdown, spacious, with the price in every option */
.pick{position:relative;margin-top:24px}
.pick-label{display:block;margin-bottom:10px;font-size:12px;letter-spacing:0;text-transform:none;color:var(--muted);font-weight:500}
.pick-btn{
  width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto 16px;align-items:center;gap:18px;text-align:left;
  padding:22px 24px;border:1.5px solid var(--line-2);border-radius:20px;background:rgba(255,255,255,.04);
  transition:border-color .2s,background .2s;
}
.pick-btn:hover,.pick-btn[aria-expanded="true"]{border-color:#fff;background:rgba(255,255,255,.06)}
.pick-main{display:block;min-width:0}
.pick-main b,.pick-opt b{display:block;font-size:22px;font-weight:700;letter-spacing:-0.025em;line-height:1.2}
.pick-main em,.pick-opt em{display:block;margin-top:4px;font-style:normal;font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:14px;color:var(--muted)}
.pick-price{font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;font-size:22px;font-weight:700;letter-spacing:-0.025em;font-variant-numeric:tabular-nums}
.pick-chev{color:var(--ink-2);transition:transform .25s var(--ease)}
.pick-btn[aria-expanded="true"] .pick-chev{transform:rotate(180deg)}
.pick-list{
  position:absolute;left:0;right:0;top:calc(100% + 10px);z-index:6;list-style:none;padding:10px;
  background:#101216;border:1.5px solid var(--line-2);border-radius:22px;box-shadow:0 24px 60px rgba(0,0,0,.6);outline:none;
}
.pick-opt{
  display:block;padding:18px 20px;border-radius:14px;cursor:pointer;
  color:var(--ink-2);outline:none;
}
.pick-opt:hover,.pick-opt:focus-visible{background:rgba(255,255,255,.07);color:#fff}
.pick-opt[aria-selected="true"]{background:rgba(255,255,255,.1);color:#fff}
.pick-opt b{font-size:20px}
@media (max-width:480px){.pick-btn{padding:18px 18px;gap:12px}.pick-main b,.pick-price{font-size:19px}.pick-opt{padding:16px 16px}}

/* Add-ons: editorial rows, not cards */
.addons{margin-top:20px;border-top:1px solid var(--line)}
.addon{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}
.addon h4{font-size:19px;font-weight:600;letter-spacing:-0.02em;line-height:1.2}
.addon .lead{display:block;margin-top:4px;color:var(--ink);font-size:15px}
.addon-act{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.addon-price{font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;font-weight:600;font-size:16px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.add{
  width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line-2);display:flex;align-items:center;justify-content:center;
  transition:background .25s var(--ease),border-color .25s;position:relative;
}
.add::before,.add::after{content:"";position:absolute;background:#fff;border-radius:2px;transition:transform .3s var(--ease),background .2s,width .3s var(--ease),height .3s var(--ease)}
.add::before{width:14px;height:1.8px}.add::after{width:1.8px;height:14px}
.add:hover{border-color:#fff}
.add[aria-pressed="true"]{background:#fff;border-color:#fff}
.add[aria-pressed="true"]::before,.add[aria-pressed="true"]::after{background:#07080a}
/* the plus turns into a tick */
.add[aria-pressed="true"]::before{width:7px;height:2px;transform:translate(-3.5px,2.5px) rotate(45deg)}
.add[aria-pressed="true"]::after{width:2px;height:13px;transform:translate(3px,0) rotate(40deg)}


/* Your Remster: plain lines */
.lines{margin-top:18px;display:grid;gap:10px}
.lines div{display:flex;justify-content:space-between;gap:16px;font-size:16px;color:var(--ink-2)}
.lines dd{color:var(--ink);font-variant-numeric:tabular-nums}
.lines .total{margin-top:6px;padding-top:16px;border-top:1px solid var(--line);color:var(--ink)}
.lines .total dt{font-weight:600}
.lines .total dd{font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;font-weight:700;font-size:30px;letter-spacing:-0.03em}
.due{margin-top:22px;padding:20px 22px;border-radius:18px;background:rgba(255,255,255,.05)}
.due div{display:flex;justify-content:space-between;align-items:baseline}
.due span{color:var(--ink-2);font-size:15px}
.due b{font-size:24px;font-weight:700;letter-spacing:-0.03em}
.due p{margin-top:8px;font-size:14px;color:var(--muted)}
.due p span{font-size:inherit;color:var(--ink-2)}

/* 3. Promises */
.promises{
  max-width:1240px;margin:clamp(72px,10vw,130px) auto 0;padding:48px clamp(20px,4vw,56px) 0;border-top:1px solid var(--line);
  display:grid;grid-template-columns:1fr;gap:34px;
}
@media (min-width:760px){.promises{grid-template-columns:repeat(3,1fr);gap:48px}}
.promises svg{color:var(--ink-2);margin-bottom:14px}
.promises h4{font-size:18px;font-weight:600;letter-spacing:-0.02em}
.promises p{color:var(--muted);font-size:15px;margin-top:2px}

.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;max-width:1240px;margin:clamp(64px,9vw,110px) auto 0;padding:0 clamp(20px,4vw,56px) 32px;font-size:13px;color:var(--muted)}

/* The bar that follows you */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:20;background:rgba(7,8,10,.82);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);border-top:1px solid var(--line);animation:rise .5s var(--ease)}
@keyframes rise{from{transform:translateY(100%)}to{transform:none}}
.bar-in{max-width:1240px;margin:0 auto;padding:14px clamp(20px,4vw,56px);display:flex;align-items:center;justify-content:space-between;gap:20px}
.bar-left{display:flex;align-items:center;gap:14px;min-width:0}
.bar-thumb{width:48px;height:48px;border-radius:12px;object-fit:cover;flex:none;background:#0b0c10}
.bar-sum{min-width:0}
.bar-sum b{display:block;font-size:19px;font-weight:700;letter-spacing:-0.02em;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-price{font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;font-size:26px;font-weight:700;letter-spacing:-0.03em;font-variant-numeric:tabular-nums}
.bar-act{display:flex;align-items:center;gap:22px;flex:none}
@media (max-width:640px){.bar-in{gap:10px;padding:12px 16px}.bar-left{gap:10px;flex:1;min-width:0}.bar-thumb{width:40px;height:40px;border-radius:10px}.bar-sum b{font-size:16px}.bar-price{font-size:19px}.bar-act{gap:10px}.pill{height:44px;padding:0 18px;font-size:15px}}
@media (min-width:980px){.bar-thumb{display:none}}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none !important;animation:none !important}}

/* ---- Phones: smaller type and tighter spacing so the page reads in a few swipes ---- */
@media (max-width:640px){
  body{font-size:15px}
  .hero{--logo-row:56px}
  .hero-logo img{height:34px}
  .hero-wrap{padding:0 16px}
  .hero-title{font-size:25px;max-width:20ch;margin:0 auto 18px;letter-spacing:-0.035em}
  .hero-card{height:420px;min-height:0;--feat-h:0px;border-radius:22px}
  .hero-card::after{background-position:46% 62%}
  .features{grid-template-columns:1fr 1fr;gap:8px 10px;padding:34px 16px 16px}
  .features li{font-size:12px;gap:8px}
  .features svg{width:17px;height:17px}
  .offer{padding:0 4px}
  .offer h2{font-size:23px}
  .offer form{margin-top:18px;gap:14px}
  .f input{font-size:18px;padding:6px 0 8px}
  .f span{font-size:11px}
  .offer .pill{height:42px;font-size:14px;padding:0 20px}
  .offer-hi{font-size:15px}
  .offer-code{padding:14px 16px}
  .offer-code b{font-size:17px}
  .offer-note{font-size:14px}
  .reserve{margin-top:40px;padding:0 16px}
  .stage{margin:20px 0 4px;border-radius:22px}
  .config{margin-top:24px}
  .step{padding:24px 0 26px}
  .step h3{font-size:22px}
  .step-sub{font-size:14px}
  .pick{margin-top:18px}
  .pick-btn{padding:16px 18px;border-radius:16px}
  .pick-main b,.pick-price{font-size:18px}
  .pick-main em{font-size:13px}
  .pick-opt{padding:14px 16px}
  .pick-opt b{font-size:17px}
  .addons{margin-top:14px}
  .addon{padding:16px 0;gap:14px}
  .addon h4{font-size:17px}
  .addon .lead{font-size:14px}
  .addon-price{font-size:15px}
  .add{width:36px;height:36px}
  .lines{gap:8px}
  .lines div{font-size:15px}
  .lines .total dd{font-size:26px}
  .due{padding:16px 18px;border-radius:16px}
  .due b{font-size:21px}
  .due p{font-size:13px}
  .promises{margin-top:44px;padding:30px 16px 0;gap:22px}
  .promises h4{font-size:16px}
  .promises p{font-size:14px}
  .foot{margin-top:36px}
}

/* Floating labels on the bed picture */
.stage-labels{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s var(--ease);z-index:2}
.stage-labels.on{opacity:1} /* the names on the bed pictures are always shown */
.stage-labels svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.stage-labels line{stroke:rgba(255,255,255,.7);stroke-width:1.2;stroke-linecap:round}
.lbl-dot{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.22),0 0 14px rgba(255,255,255,.55)}
.lbl{
  position:absolute;transform:translateX(-50%);white-space:nowrap;padding:6px 13px;border-radius:999px;
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;font-size:12.5px;font-weight:600;letter-spacing:-0.005em;line-height:1.2;color:#f5f5f7;
  background:rgba(14,15,19,.62);border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 6px 22px rgba(0,0,0,.45);
}
.lbl.up{transform:translate(-50%,-100%)}
.lbl.down{transform:translate(-50%,0)}
@media (max-width:640px){.lbl{font-size:11px;padding:5px 10px}.lbl-dot{width:8px;height:8px;margin:-4px 0 0 -4px}}

/* Dual User and Warranty: their own sections, with points and one toggle */
.points{list-style:none;margin-top:16px;display:grid;gap:11px}
.points li{position:relative;padding-left:22px;color:var(--ink-2);font-size:15px;line-height:1.5}
.points li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,#4a9eff,#f5a623)}
.feature-act{margin-top:22px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.toggle{
  height:46px;padding:0 24px;border-radius:999px;border:1.5px solid var(--line-2);font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;font-weight:600;font-size:15px;
  color:var(--ink);transition:background .25s var(--ease),border-color .25s,color .25s;
}
.toggle:hover{border-color:#fff}
.toggle .t-on{display:none}
.toggle[aria-pressed="true"]{background:#fff;border-color:#fff;color:#07080a}
.toggle[aria-pressed="true"] .t-off{display:none}
.toggle[aria-pressed="true"] .t-on{display:inline}
@media (max-width:640px){.points li{font-size:14px}.toggle{height:42px;padding:0 20px;font-size:14px}}

/* ---- Every section is a card ---- */
.config-inner{display:grid;gap:34px}
.step{
  padding:30px 30px 32px;border:0;border-radius:28px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  box-shadow:0 18px 50px -28px rgba(0,0,0,.9);
}
.step:first-child{padding-top:30px;border-top:0}
.step h3{font-size:26px}
.cards-js .step{opacity:0;transform:translateY(34px);transition:opacity .7s var(--ease),transform .8s var(--ease)}
.cards-js .step.in{opacity:1;transform:none}
.step .addons{border-top:0;margin-top:12px}
.step .addon:first-child{padding-top:14px}
.step .addon:last-child{border-bottom:0;padding-bottom:4px}
.step .due{background:rgba(255,255,255,.06)}
@media (max-width:640px){
  .config-inner{gap:22px}
  .step,.step:first-child{padding:22px 20px 24px;border-radius:22px}
  .step h3{font-size:21px}
}

.step h3{text-wrap:balance}

/* Add-on cards: each one is a small card that lights up while its picture is shown */
.step .addon{padding:16px 18px;margin-top:12px;border:0;border-radius:18px;background:rgba(255,255,255,.05)}
.step .addon:first-child{padding-top:16px}
.step .addon:last-child{padding-bottom:16px;border-bottom:0}
.step .addons{border-top:0}


/* Remster Duo, warranty options, membership */
.opt-l{display:flex;flex-direction:column;gap:2px}
.opt-l b{font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;font-size:17px;font-weight:700;letter-spacing:-0.02em}
.opt-note{margin-top:14px;font-size:13.5px;color:var(--muted)}
.plans{list-style:none;margin-top:16px;display:grid;gap:10px}
.plans li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font-size:15px;color:var(--ink-2)}
.plans s{color:var(--muted);text-decoration-thickness:1.5px;text-decoration-color:rgba(255,255,255,.55)}
.member-note{margin-top:16px;font-size:14px;color:var(--ink)}
.member .step-sub{margin-top:4px}
@media (max-width:640px){.opt-l b{font-size:15.5px}.plans li{font-size:14px}}


/* ---- The picture carousel: the bed first, then every picture that goes with what you choose ---- */
.thumbs-row{display:flex;align-items:center;gap:12px;margin-top:14px}
.nav-btn{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--line-2);color:var(--ink);transition:border-color .2s,background .2s}
.nav-btn:hover{border-color:#fff}
.nav-btn:active{background:rgba(255,255,255,.1)}
.thumbs{flex:1;min-width:0;display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:3px 2px}
.thumbs::before,.thumbs::after{content:"";margin:auto} /* centres the strip while it fits, scrolls from the left once it doesn't */
.thumbs::-webkit-scrollbar{display:none}
.thumb{
  flex:none;width:64px;aspect-ratio:1/1;background:#060606;padding:0;border-radius:10px;overflow:hidden;scroll-snap-align:center;
  border:1.5px solid transparent;opacity:.55;transition:opacity .25s,border-color .25s,transform .25s var(--ease);
}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb:hover{opacity:.9}
.thumb.on{opacity:1;border-color:#fff}
.thumb.new{animation:thumb-in .7s var(--ease)}
@keyframes thumb-in{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.08);opacity:1}100%{transform:none}}
@media (max-width:640px){.thumb{width:56px}.thumbs-row{gap:8px}.nav-btn{width:36px;height:36px}}
@media (prefers-reduced-motion:reduce){.thumb.new{animation:none}}
/* Wide screens: the thumbnails stand in a column to the left of the picture, with up and down arrows at its ends. The picture is as tall as
   the screen allows (the column is as tall as the picture), so the whole carousel is on screen at once. */
@media (min-width:1000px){
  .stage-col{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:34px;grid-template-areas:"rail stage"}
  .stage-col .stage{grid-area:stage}
  .thumbs-row{grid-area:rail;flex-direction:column;margin:0;gap:10px;contain:size;min-height:0}
  /* only one arrow, at the foot of the column, with no circle around it (up is the thumbnails, swipe or the arrow keys) */
  .thumbs-row #stagePrev{display:none}
  .thumbs-row .nav-btn{align-self:center;width:44px;height:30px;border:0;border-radius:8px;color:var(--ink-2);transition:color .2s}
  .thumbs-row .nav-btn:hover{color:#fff}
  .thumbs-row .nav-btn:active{background:none}
  .thumbs-row .nav-btn svg{transform:rotate(90deg)}
  .thumbs{flex-direction:column;overflow-x:hidden;overflow-y:auto;scroll-snap-type:y proximity;padding:2px 3px;width:100%}
  .thumb{width:100%}
}

/* ---- One type scale and one spacing step for the whole page ----
   Every gap between blocks is --gap; every button uses the same font, weight and size; text fields are compact.
   Inputs stay at 16px or more on phones so iOS Safari does not zoom in when one is tapped. */
:root{--gap:clamp(20px,2.4vw,32px)}
.pill,.toggle,.copy{font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;font-weight:600;font-size:15px;letter-spacing:-0.01em}
.pill{height:48px;padding:0 26px}
.pill.wide{width:100%;height:52px}
.toggle{height:40px;padding:0 20px;min-width:96px;white-space:nowrap}
.copy{height:40px}
/* a chosen option reads "Remove", so the button turns quiet and the card it belongs to gets a thin outline instead */
.toggle[aria-pressed="true"]{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.55);color:var(--ink)}
.addon:has(.toggle[aria-pressed="true"]){box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}
.step.feature:has(.toggle[aria-pressed="true"]){box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4),0 18px 50px -28px rgba(0,0,0,.9)}

.offer h2,.step h3{font-size:26px;letter-spacing:-0.03em;line-height:1.15}
.offer form{margin-top:16px;gap:14px}
.f{gap:2px}
.f span{font-size:11.5px}
.f input{font-size:17px;line-height:1.25;padding:4px 0 6px}
.f-msg{margin-top:-6px}
.offer-done{margin-top:16px}

/* spacing: hero heading, hero card, offer, picture and every card are one --gap apart */
.hero-title{margin-bottom:var(--gap)}
.hero-grid{gap:var(--gap)}
.reserve{margin-top:calc(var(--gap) * 2)}
.config-inner{gap:var(--gap)}
.step-sub{margin-top:4px}
.points{margin-top:12px}
.feature-act{margin-top:16px}
.addons{margin-top:4px}

/* Order summary: membership line, the due-today box with a thin outline, and the Continue button */
.lines .member-line s{color:var(--muted);text-decoration-thickness:1.5px}
.lines .member-line em{display:block;font-style:normal;font-weight:600;font-size:13px;color:var(--amber)}
.step .due,.due{margin-top:16px;padding:14px 18px;border-radius:16px;background:transparent;border:1px solid rgba(255,255,255,.6)}
.due p{margin-top:4px}
.summary .pill.wide{margin-top:16px}
.bar{cursor:pointer}

@media (max-width:999px){
  .stage-col{margin:0}
  .stage{margin:0}
  .config{margin-top:var(--gap)}
  .reserve{margin-top:var(--gap)}
  /* the page settles on one card at a time while scrolling: picture, size, Duo, add-ons, warranty, summary */
  html:has(#reserve){scroll-snap-type:y proximity;scroll-padding:12px 0 96px}
  .stage-col,.config .step{scroll-snap-align:start}
}
@media (max-width:640px){
  .offer h2,.step h3{font-size:22px}
  .offer form{margin-top:14px;gap:12px}
  .f input{font-size:16px}
  .f span{font-size:11px}
  .pill{height:46px;padding:0 22px}
  .pill.wide{height:50px}
  .toggle{height:38px;padding:0 16px;min-width:88px;font-size:14px}
  .offer .pill{height:44px;font-size:15px}
  .step,.step:first-child{padding:20px 18px 22px}
  .bar .pill{height:44px;padding:0 18px;font-size:15px}
  .due{padding:12px 16px}
}
.f input::placeholder{color:rgba(245,245,247,.32)}

/* Privacy line above Continue */
.privacy-note{display:flex;gap:8px;align-items:flex-start;margin-top:14px;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.privacy-note svg{flex:none;margin-top:1px;color:var(--ink-2)}
.privacy-note b{font-family:inherit;font-weight:600;color:var(--ink)}
.offer-fine{font-size:12.5px;color:var(--muted);margin-top:-4px}

/* ======================================================================================================================
   Pre-order page, round 2: the offer first on phones, a plain bottom bar, pictures on the Duo and add-on cards, roomier
   cards, one-line promises, questions by topic and the reels
   ====================================================================================================================== */

/* The offer: on phones it comes first, as its own highlighted card, above the bedroom picture */
.offer h2 .grad{white-space:nowrap}
@media (max-width:999px){
  .hero-grid{display:flex;flex-direction:column;gap:18px}
  .offer{order:-1;padding:22px 20px 22px;border-radius:24px;border:1px solid rgba(255,255,255,.2);
    background:linear-gradient(160deg,rgba(245,166,35,.17),rgba(74,158,255,.09) 75%);box-shadow:0 22px 60px -34px rgba(245,166,35,.55)}
  .hero-card{order:1}
  .offer form{max-width:none}
  .offer .pill{justify-self:stretch;width:100%}
}
@media (max-width:640px){
  .hero-title{font-size:23px;margin-bottom:16px}
  .offer h2{font-size:22px}
  .hero-card{height:330px}
  .features{padding-top:28px}
}

/* The bar that follows you: small type, no picture, one plain name */
.bar-thumb{display:none !important}
.bar-sum b{font-size:15px;font-weight:600;letter-spacing:-0.01em}
.bar-price{font-size:20px}
@media (max-width:640px){.bar-sum b{font-size:14px}.bar-price{font-size:17px}.bar-in{padding:10px 16px}}

/* A small picture on the right of a card (Duo, add-ons): tap it to see that picture above */
.card-pic{position:relative;display:block;flex:none;padding:0;border-radius:16px;overflow:hidden;background:#060606;border:1.5px solid var(--line-2);transition:border-color .2s,transform .25s var(--ease)}
.card-pic img{display:block;width:100%;height:100%;object-fit:cover}
.card-pic:hover{border-color:#fff}
.card-pic:active{transform:scale(.97)}
.card-pic.missing{display:none}
.step.has-pic{display:grid;grid-template-columns:minmax(0,1fr) 104px;column-gap:18px;grid-template-areas:"h pic" "pts pic" "act act";align-items:start}
.step.has-pic>h3{grid-area:h}
.step.has-pic>.card-pic{grid-area:pic;width:104px;height:104px;margin-top:2px}
.step.has-pic>.points{grid-area:pts}
.step.has-pic>.feature-act{grid-area:act}
.step .addon{display:grid;grid-template-columns:minmax(0,1fr) 84px;grid-template-areas:"txt pic" "act pic";gap:12px 16px;align-items:center;padding:16px}
.addon-txt{grid-area:txt;min-width:0}
.step .addon .addon-act{grid-area:act;flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
.step .addon .card-pic{grid-area:pic;width:84px;height:84px}
@media (max-width:640px){
  .step.has-pic{grid-template-columns:minmax(0,1fr) 88px;column-gap:14px}
  .step.has-pic>.card-pic{width:88px;height:88px}
  .step .addon{grid-template-columns:minmax(0,1fr) 76px;padding:14px}
  .step .addon .card-pic{width:76px;height:76px}
}

/* Roomy cards on phones */
@media (max-width:640px){
  .config-inner{gap:30px}
  .step,.step:first-child{padding:26px 20px 28px;border-radius:24px}
  .points{gap:12px}
  .feature-act{margin-top:20px}
  .step .addon{margin-top:14px}
  .stage-col{margin-bottom:10px}
  .config{margin-top:30px}
}

/* After Continue: promises in one line on phones */
@media (max-width:759px){
  .promises{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:30px 10px 0;text-align:center}
  .promises>div{display:flex;flex-direction:column;align-items:center}
  .promises svg{width:20px;height:20px;margin-bottom:8px}
  .promises h4{font-size:12px;line-height:1.25;font-weight:600}
  .promises p{display:none}
}

/* Questions, by topic */
.faq,.reels{max-width:760px;margin:clamp(56px,8vw,100px) auto 0;padding:0 clamp(16px,4vw,32px)}
.faq h2,.reels h2{font-size:clamp(22px,2.4vw,28px);font-weight:700;letter-spacing:-0.03em;line-height:1.15;text-align:center}
.faq-topics{margin-top:20px;display:grid;gap:12px}
.faq-topic{border-radius:20px;background:rgba(255,255,255,.05);overflow:hidden}
.faq-topic-btn{width:100%;display:flex;align-items:center;gap:12px;padding:20px 20px;text-align:left;font-family:'Inter',system-ui,-apple-system,sans-serif;font-weight:600;font-size:16px}
.faq-topic-btn span{flex:1}
.faq-chev{flex:none;color:var(--ink-2);transition:transform .25s var(--ease)}
.faq-topic-btn[aria-expanded="true"] .faq-chev{transform:rotate(180deg)}
.faq-topic-body{padding:0 14px 10px}
details.faq-q{border-top:1px solid var(--line);padding:16px 6px;color:var(--ink-2);font-size:14.5px;line-height:1.6}
details.faq-q summary{cursor:pointer;color:var(--ink);font-weight:500;list-style:none;display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
details.faq-q summary::-webkit-details-marker{display:none}
details.faq-q summary::after{content:"+";flex:none;color:var(--muted);font-size:18px;line-height:1.2}
details.faq-q[open] summary::after{content:"\2013"}
details.faq-q p{margin-top:10px}
details.faq-q strong{color:var(--ink);font-weight:600}

/* Our journey: reels stacked on top of each other */
.reels{max-width:420px;overflow-x:clip}
.reel-deck{position:relative;width:min(100%,290px);aspect-ratio:9/14;margin:26px auto 0}
.reel{position:absolute;inset:0;border-radius:22px;overflow:hidden;background:#0b0c10;border:1px solid var(--line-2);cursor:pointer;
  --i:0;transform:translateY(calc(var(--i) * -14px)) scale(calc(1 - var(--i) * .055));opacity:calc(1 - var(--i) * .28);z-index:calc(10 - var(--i));
  transition:transform .45s var(--ease),opacity .45s var(--ease);box-shadow:0 22px 50px -28px rgba(0,0,0,.9)}
.reel.leaving{transform:translateX(-125%) rotate(-9deg);opacity:0}
.reel.no-anim{transition:none}
.reel img{width:100%;height:100%;object-fit:cover}
.reel-fade{position:absolute;inset:0;background:linear-gradient(to top,rgba(2,2,3,.92),rgba(2,2,3,0) 58%)}
.reel-cap{position:absolute;left:16px;right:16px;bottom:56px;font-size:14px;font-weight:600;line-height:1.35}
.reel-link{position:absolute;left:16px;bottom:16px;font-size:12.5px;font-weight:600;padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-decoration:none;color:var(--ink)}
.reel-hint{margin-top:22px;text-align:center;font-size:13px;color:var(--muted)}

/* ---- Type scale, round 3: smaller headings and numbers on every screen (Inter throughout) ---- */
.hero-title{font-size:clamp(24px,3.1vw,40px);letter-spacing:-0.035em}
.offer h2,.step h3{font-size:22px;letter-spacing:-0.025em}
.pick-main b,.pick-price{font-size:19px}
.pick-opt b{font-size:17px}
.pick-main em,.pick-opt em{font-size:13px}
.addon h4{font-size:16px}
.addon .lead{font-size:14px}
.lines div{font-size:15px}
.lines .total dd{font-size:24px}
.due b{font-size:20px}
.opt-l b{font-size:15.5px}
.points li{font-size:14px}
.features li{font-size:13.5px}
.promises h4{font-size:16px}
.promises p{font-size:14px}
.faq h2,.reels h2{font-size:clamp(20px,2.2vw,26px)}
.f input{font-size:16px}
@media (max-width:640px){
  .hero-title{font-size:22px}
  .offer h2,.step h3{font-size:20px}
  .pick-main b,.pick-price{font-size:17px}
  .lines .total dd{font-size:22px}
}


/* ---- Round 4: white bottom bar, + and - buttons, offer after the hero picture, add-on card rows, feature marquee, promise subheads ---- */
.bar{background:rgba(255,255,255,.97);-webkit-backdrop-filter:none;backdrop-filter:none;border-top:1px solid rgba(0,0,0,.1);color:#07080a}
.bar-sum b,.bar-price{color:#07080a}
.bar .pill{background:#07080a;color:#fff}
.bar .pill:hover{background:#1b1d22}

.toggle{width:40px;min-width:0;height:40px;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:22px;font-weight:500;line-height:1}
.toggle .t-off,.toggle .t-on{display:block;line-height:1;margin-top:-1px}
.toggle .t-on{display:none}
.toggle[aria-pressed="true"] .t-off{display:none}
.toggle[aria-pressed="true"] .t-on{display:block}
@media (max-width:640px){.toggle{width:38px;height:38px;min-width:0;padding:0;font-size:21px}}

/* add-on cards: row 1 = name and line, picture on the right; row 2 = price on the left, the + or - under the picture */
.step .addon{grid-template-columns:minmax(0,1fr) 84px;grid-template-areas:"txt pic" "price act";gap:10px 16px;align-items:center}
.step .addon .addon-act{display:contents}
.step .addon .addon-price{grid-area:price;align-self:center}
.step .addon .toggle{grid-area:act;justify-self:center}
.step .addon .card-pic{grid-area:pic;align-self:start}
@media (max-width:640px){.step .addon{grid-template-columns:minmax(0,1fr) 76px}}

/* the offer follows the bedroom picture on phones, plain (no coloured $200) */
@media (max-width:999px){.offer{order:2}.hero-card{order:1}}

/* the feature line flows right to left on phones */
.feat-track{display:contents}
.features .feat-clone{display:none}
@media (max-width:640px){
  .features{display:block;overflow:hidden;position:static;left:auto;right:auto;bottom:auto;margin:0;padding:14px 0;background:none;border-radius:0;-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
  .feat-track{display:flex;flex-wrap:nowrap;gap:26px;width:max-content;animation:featflow 26s linear infinite}
  .features li,.features .feat-clone{display:flex;flex:none;white-space:nowrap}
  .features li{font-size:13px}
  @keyframes featflow{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 13px))}}
}
@media (prefers-reduced-motion:reduce){.feat-track{animation:none;overflow-x:auto}}

/* promises on phones: the sub line is shown too */
@media (max-width:759px){
  .promises p{display:block;font-size:10.5px;line-height:1.35;margin-top:3px;color:var(--muted)}
  .promises h4{font-size:11.5px}
}
.reels{margin-top:clamp(40px,6vw,80px)}

/* ---- Round 5 ---- */
.toggle[aria-pressed="false"]{background:#fff;border-color:#fff;color:#07080a}
.toggle[aria-pressed="false"]:hover{background:#e9edf3}
@media (max-width:640px){
  .features{padding:34px 0 38px}
  .hero-grid{gap:26px}
  .offer{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035));box-shadow:0 18px 50px -28px rgba(0,0,0,.9);border:0;border-radius:24px;padding:34px 22px 30px}
}

/* ---- Round 7: $199 today first, the offer in the order summary, the whole gallery in the hero card on phones ---- */
.hero-sub{max-width:44ch;margin:-6px auto clamp(18px,2.4vw,30px);text-align:center;color:var(--ink-2);font-size:clamp(14px,1.5vw,17px)}
.step .due.due-top{margin-top:14px;padding:18px 20px;border:0;background:rgba(255,255,255,.07)}
.due-top span{color:var(--ink);font-size:15px;font-weight:600}
.due-top b{font-size:40px;line-height:1;letter-spacing:-0.04em}
.due-top p{margin-top:8px}
.summary .lines{margin-top:18px}
.lines .total{color:var(--ink-2)}
.lines .total dt{font-weight:500}
.lines .total dd{font-size:17px;font-weight:600;letter-spacing:-0.01em;color:var(--ink-2)}
.bar-price small{margin-left:5px;font-size:.52em;font-weight:600;letter-spacing:0;opacity:.7}
@media (max-width:640px){
  .hero-card.has-stage{height:auto;min-height:0;padding:0;background:none;box-shadow:none;border-radius:0;overflow:visible}
  .hero-card.has-stage::after,.hero-card.has-stage .ph-slot{display:none}
  .hero-card.has-stage .stage-col{margin:0}
  .hero-card.has-stage .stage{margin:0}
  .due-top b{font-size:34px}
}

/* ---- Round 8: coupon below the full price, the bar with the total, X posts as a stack ---- */
.coupon{margin-top:14px}
.coupon-label{display:block;font-size:15px;font-weight:600;color:var(--ink-2)}
.coupon-row{display:flex;gap:10px;margin-top:10px}
.coupon-row input{flex:1;min-width:0;height:44px;padding:0 14px;border-radius:12px;border:1.5px solid var(--line-2);background:transparent;color:var(--ink);font:inherit;font-size:16px;text-transform:uppercase}
.coupon-row input:focus{outline:none;border-color:var(--blue)}
.coupon-row .pill{height:44px;padding:0 20px;font-size:15px}
.coupon-note{margin-top:10px;font-size:14px;color:#8fd9a8}
.coupon-note.bad{color:#ffb3b3}
.bar-sum small{display:block;margin-top:1px;font-size:12px;font-weight:500;color:#5b6068;font-variant-numeric:tabular-nums}
.bar-price{font-size:25px}
.bar-price small{font-size:.5em;opacity:.8}
@media (max-width:640px){.bar-price{font-size:22px}.bar-sum small{font-size:11.5px}}
.xposts{max-width:420px;margin:clamp(40px,6vw,80px) auto 0;padding:0 16px}
.xdeck{display:grid;padding-right:72px}
.xpost{grid-area:1/1;display:flex;flex-direction:column;gap:10px;padding:22px 22px 18px;border-radius:24px;background:#16181d;border:1px solid var(--line);color:inherit;text-decoration:none;
  transform-origin:0 50%;transform:translateX(calc(var(--i) * 34px)) scale(calc(1 - var(--i) * .07));z-index:calc(10 - var(--i));
  transition:transform .35s var(--ease),opacity .35s var(--ease),background .35s var(--ease)}
.xpost[data-pos="1"],.xpost[data-pos="2"],.xpost[data-pos="3"]{background:#121419}
.xpost[data-pos="4"]{opacity:0;pointer-events:none}
.xpost header{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
.xpost header b{font-size:15px;font-weight:700;letter-spacing:-0.01em}
.xpost header span{font-size:13px;color:var(--muted)}
.xpost p{font-size:15px;line-height:1.5;color:var(--ink)}
.xpost footer{margin-top:auto;padding-top:10px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;color:var(--muted)}
.xpost footer span{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);font-weight:600}
.xnav{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}
.xpost img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;margin-top:2px}
.config-inner{grid-template-columns:minmax(0,1fr)}
.coupon-row input{width:100%}
/* the posts are pictures only */
.xpost{padding:0;gap:0;background:none;border:0;border-radius:24px;overflow:hidden}
.xpost img{margin:0;border-radius:24px;aspect-ratio:4/3;height:100%}
.xpost[data-pos="1"] img,.xpost[data-pos="2"] img,.xpost[data-pos="3"] img{filter:brightness(.6)}
.xpost img{transition:filter .35s var(--ease)}
/* the + buttons and the small pictures share one right edge on every card */
@media (max-width:640px){
  .step .feature-act{padding-right:14px}
  .step.has-pic>.card-pic{justify-self:end;margin-right:14px}
  .step .addon .toggle{justify-self:end}
}
.xpost{position:relative}
.xbadge{position:absolute;top:12px;right:12px;z-index:2;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;display:grid;place-items:center;box-shadow:0 0 0 1px rgba(255,255,255,.22)}

/* the + / - buttons: the signs are drawn, so they sit exactly in the middle of the circle; every + shares one right edge at any width */
.toggle .t-off,.toggle .t-on{position:relative;display:block;width:14px;height:14px;margin:0;font-size:0;line-height:0}
.toggle .t-on{display:none}
.toggle[aria-pressed="true"] .t-off{display:none}
.toggle[aria-pressed="true"] .t-on{display:block}
.toggle .t-off::before,.toggle .t-on::before{content:"";position:absolute;left:0;top:50%;width:14px;height:2px;margin-top:-1px;border-radius:1px;background:currentColor}
.toggle .t-off::after{content:"";position:absolute;top:0;left:50%;width:2px;height:14px;margin-left:-1px;border-radius:1px;background:currentColor}
.step .feature-act{padding-right:14px}
.step.has-pic>.card-pic{justify-self:end;margin-right:14px}
.step .addon{padding-right:14px}
.step .addon .toggle{justify-self:end}

/* ---- Round 9 ---- */
/* the bottom bar: "Your Remster" small and quiet, the total bold */
.bar-sum b{font-size:12px;font-weight:500;letter-spacing:0;color:#5b6068}
.bar-sum small{font-size:15px;font-weight:700;letter-spacing:-0.01em;color:#07080a}
@media (max-width:640px){.bar-sum b{font-size:11.5px}.bar-sum small{font-size:14px}}
/* the posts after the FAQs: bigger, clearer, arrows in the middle on their own line */
.xposts{max-width:680px;padding:0 10px}
.xdeck{padding-right:52px}
.xpost{transform:translateX(calc(var(--i) * 26px)) scale(calc(1 - var(--i) * .05))}
.xpost[data-pos="1"] img,.xpost[data-pos="2"] img,.xpost[data-pos="3"] img{filter:brightness(.78)}
.xnav{justify-content:center;gap:14px;margin-top:14px}
.xnav .nav-btn{width:44px;height:44px}
/* the offer card has its background at every screen width */
.offer{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035));box-shadow:0 18px 50px -28px rgba(0,0,0,.9);border:0;border-radius:24px;padding:34px 22px 30px}
@media (min-width:1000px){.offer{padding:38px 36px 36px}}

/* ---- Round 10: the stack shows at every width and the front card is centred ---- */
.xposts{max-width:none;padding:0 8px}
.xdeck{--peek:12px;max-width:640px;margin:0 auto;padding:0 calc(var(--peek) * 2)}
.xpost{transform-origin:0 50%;transform:translateX(calc(var(--i) * var(--peek))) scale(1, calc(1 - var(--i) * .07))}
@media (min-width:760px){.xdeck{--peek:24px;max-width:860px}}
.xnav{max-width:860px;margin-left:auto;margin-right:auto}
@media (max-width:759px){.xposts{padding:0 4px}.xdeck{--peek:10px}}

/* no page-level scroll snapping: it pulled the page down past the title whenever you scrolled up near the hero */
html:has(#reserve){scroll-snap-type:none}
.stage-col,.config .step{scroll-snap-align:none}

/* ---- Round 12: code discount line, the offer pop-up, captions on the stack ---- */
.lines .disc dd{color:#8fd9a8}
.coupon-note button{margin-left:8px;font-size:14px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.offer-pop{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(0,0,0,.68);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.offer-pop[hidden]{display:none}
.offer-pop-in{width:min(460px,100%);max-height:calc(100dvh - 36px);overflow:auto;border-radius:24px}
.offer-pop .offer{margin:0;background:#17191f;box-shadow:0 30px 80px -30px #000}
.xhandle{position:absolute;top:14px;left:14px;z-index:2;font-size:11.5px;font-weight:600;letter-spacing:0;color:#fff;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:4px 10px;border-radius:999px;box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.xcap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:40px 18px 14px;font-size:15px;font-weight:600;line-height:1.2;color:#fff;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,0));border-radius:0 0 24px 24px}