/* Showroom review repair — scoped to this page, no global consent changes. */
html body.showroom-page {
  --showroom-brand-orange:#ac411d;
}

/* Keep the privacy choice visible from arrival, but do not cover the page width. */
html body.showroom-page .cookie-notice {
  left:auto;
  right:clamp(10px,2vw,24px);
  bottom:max(10px,env(safe-area-inset-bottom,0px));
  width:min(490px,calc(100% - 20px));
  max-height:min(240px,calc(100dvh - 24px));
  margin:0;
  border:1px solid #b7a69b;
  border-radius:8px;
  box-shadow:0 10px 28px rgba(20,17,16,.22);
}
html body.showroom-page .cookie-notice__inner {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:start;
  gap:8px;
  padding:12px 14px;
}
html body.showroom-page .cookie-notice p {
  margin:0;
  font-size:.845rem;
  line-height:1.42;
}
html body.showroom-page .cookie-notice__actions {
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  align-items:center;
}
html body.showroom-page .cookie-notice__actions .cookie-consent__button {
  min-height:44px;
  padding:8px 11px;
  border-radius:4px;
  font-size:.78rem;
  line-height:1.25;
  flex:1 1 150px;
}
html body.showroom-page .cookie-notice__settings {
  min-height:44px;
  padding:7px 3px;
  font-size:.79rem;
  color:#a32d0c;
}

/* First show why there are two interfaces, with actual saved screenshots. */
.showroom-journey {
  background:#f0ede7;
  color:#242424;
  padding:clamp(47px,6vw,76px) 0;
  border-bottom:1px solid #d8d1c9;
}
.showroom-journey .showroom-kicker { color:#a32d0c; }
.showroom-journey__head {
  display:grid;
  grid-template-columns:minmax(0,1.16fr) minmax(260px,.7fr);
  gap:clamp(18px,4vw,42px);
  align-items:end;
  margin-bottom:25px;
}
html body.showroom-page .showroom-journey__head h2 {
  color:#242424;
  font:800 clamp(2rem,3.6vw,3.25rem)/1.16 var(--font-display,system-ui);
  letter-spacing:-.035em;
  margin:13px 0 0;
  text-wrap:balance;
}
.showroom-journey__head >p {font-size:1rem;line-height:1.55;color:#49423c;margin:0}
.showroom-journey__screens {display:grid;grid-template-columns:1fr 1fr;gap:18px}
.showroom-journey__screen {margin:0;min-width:0;border:1px solid #c2b9ae;background:#fffdf9}
.showroom-journey__screen a {display:block;overflow:hidden;background:#fff}
.showroom-journey__screen img {display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.showroom-journey__screen figcaption {
  display:grid;
  gap:4px;
  padding:13px 15px 15px;
  border-top:1px solid #d8d1c9;
}
.showroom-journey__screen figcaption span {font-size:.72rem;letter-spacing:.1em;color:#8b3719;font-weight:850}
.showroom-journey__screen figcaption strong {font-size:.95rem;line-height:1.4;color:#262321}
.showroom-journey__bottom {display:flex;gap:20px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-top:20px}
.showroom-journey__bottom p {margin:0;max-width:69ch;color:#504942;line-height:1.55;font-size:.95rem}
.showroom-journey__bottom .showroom-button {border-color:#a44628;color:#772e15;min-width:205px}
.showroom-journey__bottom .showroom-button:hover {color:#51200f;border-color:#51200f}

/* A simple functional jump rail reduces the need to scroll the whole page. */
html body.showroom-page .showroom-quicknav {
  position:sticky;
  top:0;
  z-index:110;
  border-bottom:1px solid #cbbfb4;
  background:#fbf7f0;
  color:#25211e;
}
.showroom-quicknav__inner {
  display:flex;
  align-items:center;
  gap:clamp(10px,2.5vw,30px);
  min-height:52px;
  overflow-x:auto;
  scrollbar-width:thin;
}
.showroom-quicknav__inner span {font-size:.68rem;font-weight:900;letter-spacing:.12em;color:#873819;white-space:nowrap}
.showroom-quicknav__inner a {
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  min-height:44px;
  padding:10px 2px;
  color:#3c3029;
  font-size:.84rem;
  font-weight:850;
  text-decoration:none;
  text-underline-offset:5px;
}
.showroom-quicknav__inner a:hover,
.showroom-quicknav__inner a:focus-visible {color:#8b3519;text-decoration:underline}

/* Less vertical fatigue without changing content hierarchy. */
html body.showroom-page .workshop-section {
  padding-top:clamp(52px,6vw,79px);
  padding-bottom:clamp(57px,7vw,88px);
}
html body.showroom-page .workshop-section__head {margin-bottom:30px}
html body.showroom-page .demo-specimen__body {padding-top:16px}
html body.showroom-page .demo-specimen__body>p {margin-top:9px;line-height:1.55}
html body.showroom-page .demo-specimen__tags {margin-top:11px}
html body.showroom-page .demo-specimen__actions {margin-top:15px}
html body.showroom-page :is(.workshop-section,.scope-lab) {scroll-margin-top:65px}
.showroom-tier-cta {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  border-top:1px solid currentColor;
  padding-top:22px;
  margin-top:37px;
}
.showroom-tier-cta>div{max-width:62ch}
.showroom-tier-cta strong{font:800 1.12rem/1.4 var(--font-body,sans-serif)}
.showroom-tier-cta p{font-size:.92rem;line-height:1.55;margin:7px 0 0;opacity:.93}
html body.showroom-page .workshop-section--ink .showroom-tier-cta{border-color:#7a736e;color:#faf7f0}
html body.showroom-page .workshop-section--paper .showroom-tier-cta{border-color:#bbb2a9;color:#242424}
.showroom-tier-cta .showroom-button{color:inherit;border-color:currentColor}
html body.showroom-page .scope-sheet {border-top-color:#a34423}
.showroom-page .scope-sheet__feedback {
  margin:0 0 12px;
  color:#843418;
  font-size:.78rem;
  font-weight:850;
  letter-spacing:.035em;
  line-height:1.55;
}
.showroom-page .scope-sheet[data-current-package="automation"]{border-top-color:#672e1a}
.showroom-page .scope-sheet[data-current-package="extended"]{border-top-color:#9b4422}
.showroom-page .scope-sheet[data-current-package="business"]{border-top-color:#a65a37}
.showroom-page .showroom-preview-fallback {
  display:grid;
  place-items:center;
  aspect-ratio:16/10;
  padding:24px;
  background:#efe7de;
  color:#492f21;
  font-size:.91rem;
  font-weight:800;
  line-height:1.55;
  text-align:center;
}
@media(max-width:720px){
  .showroom-journey__head{grid-template-columns:1fr}
  .showroom-journey__screens{grid-template-columns:1fr;gap:13px}
  .showroom-journey__bottom{align-items:stretch}
  .showroom-journey__bottom .showroom-button{width:100%}
  .showroom-quicknav__inner{width:calc(100% - 24px);gap:17px}
  .showroom-tier-cta .showroom-button{width:100%}
  html body.showroom-page .workshop-section{padding-top:48px;padding-bottom:55px}
  html body.showroom-page .cookie-notice {right:10px;left:10px;bottom:max(8px,env(safe-area-inset-bottom,0px));width:calc(100% - 20px);max-height:min(230px,calc(100dvh - 16px))}
  html body.showroom-page .cookie-notice__inner {padding:10px 12px;gap:7px}
  html body.showroom-page .cookie-notice p{font-size:.80rem;line-height:1.36}
  html body.showroom-page .cookie-notice__actions {display:grid;grid-template-columns:1fr 1fr;gap:6px}
  html body.showroom-page .cookie-notice__actions .cookie-consent__button {width:100%;min-width:0;min-height:44px;padding:7px 5px;font-size:.72rem}
  html body.showroom-page .cookie-notice__settings {grid-column:1/-1;min-height:32px;padding:4px 1px;font-size:.76rem}
}
@media(prefers-reduced-motion:reduce){html body.showroom-page .showroom-quicknav{scroll-behavior:auto}}

/* 2026-10-10: Lock showroom cards to a predictable responsive preview geometry. */
html body.showroom-page .specimen-grid {
  display:grid;
  min-width:0;
  gap:clamp(20px,2vw,30px);
}
html body.showroom-page .specimen-grid--three {
  grid-template-columns:repeat(3,minmax(0,1fr));
}
html body.showroom-page .specimen-grid--two {
  grid-template-columns:repeat(2,minmax(0,1fr));
}
html body.showroom-page .specimen-grid > .demo-specimen {
  min-width:0;
  max-width:100%;
}
html body.showroom-page .demo-specimen__window {
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  overflow:hidden;
}
html body.showroom-page .demo-specimen__window > img {
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  aspect-ratio:16 / 10;
  object-fit:cover;
  object-position:top center;
}
html body.showroom-page .demo-specimen__body {
  min-width:0;
  overflow-wrap:break-word;
}
@media (max-width:1020px) {
  html body.showroom-page .specimen-grid--three {grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:720px) {
  html body.showroom-page .specimen-grid--three,
  html body.showroom-page .specimen-grid--two {grid-template-columns:minmax(0,1fr);}
}