/* V27 — three complete chapters using the Device chapter's original patterned cards. */
#tool { height:calc(6 * var(--scroll-viewport)); scroll-snap-align:none; }
#installation { height:calc(3 * var(--scroll-viewport)); scroll-snap-align:none; }
#purchase { height:var(--scroll-viewport); min-height:var(--scroll-viewport); }
#tool .tool-pin, #installation .gateway-pin, #purchase .purchase-pin {
  position:sticky;top:0;width:100%;height:var(--viewport);overflow:hidden;
}
#tool-laptop, #gateway-model-canvas, #purchase-cluster {
  position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;touch-action:pan-y;
}
#tool .tool-eyebrow, #installation .gateway-copy {
  position:absolute;z-index:3;left:75%;top:50%;transform:translate(-50%,-50%);
  width:min(43vw,660px);display:grid;align-items:center;pointer-events:none;
}
#installation .gateway-copy { left:25%; }
#tool .tool-info-step,#installation .gateway-info-step {
  grid-area:1/1;min-width:0;display:flex;flex-direction:column;gap:clamp(9px,1.15vw,17px);
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(16px);
  transition:opacity .50s cubic-bezier(.2,.75,.3,1),transform .50s cubic-bezier(.2,.75,.3,1),visibility 0s linear .50s;
}
#tool .tool-info-step.active,#installation .gateway-info-step.active {
  visibility:visible;opacity:1;transform:translateY(0);pointer-events:auto;
  transition:opacity .5s cubic-bezier(.2,.75,.3,1),transform .5s cubic-bezier(.2,.75,.3,1),visibility 0s;
}
#tool .tool-info-step.slide-out-down,#installation .gateway-info-step.slide-out-down { visibility:visible;opacity:0;transform:translateY(-20px) }
#tool .tool-info-step.slide-out-up,#installation .gateway-info-step.slide-out-up { visibility:visible;opacity:0;transform:translateY(20px) }
#tool .tool-info-step.slide-in-from-top,#installation .gateway-info-step.slide-in-from-top { visibility:visible;opacity:0;transform:translateY(25px);transition:none }
#tool .tool-info-step.slide-in-from-bottom,#installation .gateway-info-step.slide-in-from-bottom { visibility:visible;opacity:0;transform:translateY(-25px);transition:none }
#tool .tour-title,#tool .tour-body,#installation .tour-title,#installation .tour-body {
  padding:clamp(13px,1.85vw,31px);max-width:100%;min-width:0;
}
#tool .tour-title h2,#installation .tour-title h2 {
  margin:0;font-size:clamp(25px,3.1vw,58px);line-height:1.1;font-weight:770;letter-spacing:-.049em;text-wrap:balance;
}
#tool .tour-body p,#installation .tour-body p {
  margin:0;color:#e1e9f6;font-size:clamp(14px,1.44vw,24px);line-height:1.48;font-weight:430;
}
#tool .tour-body p+p,#installation .tour-body p+p { margin-top:clamp(8px,1.1vh,15px); }
#tool .tour-body strong,#installation .tour-body strong { color:#fff;font-weight:700; }
#tool .tour-progress,#installation .tour-progress {
  position:absolute;top:calc(100% + 15px);left:0;width:40%;max-width:180px;height:3px;border-radius:99px;
  background:#ffffff44;overflow:hidden;pointer-events:none;
}
#tool .tour-progress-fill,#installation .tour-progress-fill {height:100%;width:100%;background:white;transform-origin:left;transform:scaleX(var(--chapter-progress,0));transition:transform .45s ease;}
#tool .tool-download-options {display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;}
#tool .tool-download-button {display:flex;flex-direction:column;align-items:flex-start;gap:8px;justify-content:center;text-align:left;min-width:0;min-height:120px;padding:13px;border-radius:12px;border:1px solid #ffffff33;background:#43414880;color:#eee;opacity:.7;cursor:not-allowed;}
#tool .tool-download-button svg {width:25px;height:25px;flex-shrink:0;fill:currentColor;}
#tool .tool-download-button .download-arrow {display:none;}
#tool .tool-download-button .download-name {font-size:clamp(14px,1.1vw,17px);font-weight:730;}
#tool .tool-download-button small {font-size:11px;color:#c1c8d4;}

/* Purchase — two-panel scene with the original combined cluster + device GLBs. */
#purchase .purchase-offer {
  position:absolute;left:75%;top:50%;z-index:2;transform:translate(-50%,-50%);
  width:min(43vw,670px);display:flex;flex-direction:column;gap:clamp(9px,1vw,16px);
}
#purchase .purchase-card {min-width:0; padding:clamp(12px,1.55vw,25px);}
#purchase .purchase-title-box h1 {margin:0;line-height:1.08;font-weight:780;letter-spacing:-.05em;font-size:clamp(27px,3.2vw,58px);}
#purchase .purchase-price-row {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(8px,1vw,14px);min-width:0;}
#purchase .purchase-price-box {position:relative;min-width:0;height:clamp(205px,29vh,315px);display:grid;place-items:center;}
#purchase .purchase-amount {display:flex;align-items:center;justify-content:center;white-space:nowrap;gap:1px;font-size:clamp(53px,5.2vw,97px);font-weight:760;font-variant-numeric:tabular-nums;letter-spacing:-.07em;}
#purchase .purchase-price {display:flex;align-items:center;height:1.08em;line-height:1;overflow:hidden;}
#purchase .purchase-digit {display:block;position:relative;height:1.08em;width:.63em;overflow:hidden;}
#purchase .purchase-digit-track {display:flex;flex-direction:column;will-change:transform;}
#purchase .purchase-digit-track span {display:block;height:1em;line-height:1em;}
#purchase .purchase-currency {line-height:1;}
#purchase .purchase-price-note {position:absolute;bottom:clamp(10px,1vw,18px);left:12px;right:12px;margin:0;text-align:center;font-size:clamp(10px,1vw,14px);line-height:1.4;color:#ced6e6;}
#purchase .purchase-country-panel {height:clamp(205px,29vh,315px);display:flex;flex-direction:column;gap:9px;min-width:0;}
#purchase .purchase-country-heading {font-size:clamp(14px,1.3vw,20px);font-weight:750;flex-shrink:0;}
#purchase .purchase-country-list {overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;min-height:0;min-width:0;display:flex;flex-direction:column;gap:3px;}
#purchase .purchase-country {display:flex;align-items:center;gap:8px;flex-shrink:0;min-height:32px;padding:6px 8px;border:1px solid transparent;border-radius:9px;cursor:pointer;background:none;color:#e1e9f6;text-align:left;font:500 clamp(12px,1.12vw,16px)/1.25 system-ui,sans-serif;}
#purchase .purchase-country:hover {background:#ffffff17;}
#purchase .purchase-country[aria-pressed="true"] {border-color:#ffffff82;background:#ffffff27;color:white;}
#purchase .purchase-country-flag {font-size:1.16em;}
#purchase .purchase-button {min-height:clamp(57px,7vh,80px);border:1px solid #ffffff33;border-radius:var(--glass-radius);background:linear-gradient(115deg,#39703b4d,#40a4564d),#181a20;color:#fff;font-weight:750;font-size:clamp(18px,2vw,29px);display:flex;justify-content:center;align-items:center;gap:12px;}
#purchase .purchase-button:disabled {cursor:not-allowed;opacity:.78;}
#purchase .purchase-button svg {height:23px;width:23px;fill:none;stroke:currentColor;stroke-width:1.8;}

@media(orientation:portrait) {
  #tool .tool-eyebrow,#installation .gateway-copy {
    left:50%;width:min(90vw,640px);transform:translate(-50%,-50%);
  }
  #tool .tool-eyebrow {top:74%;}
  #installation .gateway-copy {top:25%;}
  #tool-laptop {top:0;bottom:auto;height:50%;}
  #tool .tour-title,#tool .tour-body,#installation .tour-title,#installation .tour-body {padding:clamp(11px,3vw,18px);border-radius:clamp(13px,3.5vw,20px);}
  #tool .tour-title h2,#installation .tour-title h2 {font-size:clamp(24px,7vw,42px);}
  #tool .tour-body p,#installation .tour-body p {font-size:clamp(13px,3.55vw,18px);line-height:1.43;}
  #tool .tour-body p+p,#installation .tour-body p+p {margin-top:8px;}
  #tool .tour-body,#installation .tour-body {max-height:min(36vh,300px);overflow-y:auto;overscroll-behavior:contain;}
  #tool .tool-info-step,#installation .gateway-info-step {gap:9px;}
  #tool .tool-download-button {min-height:85px;padding:9px;}
  #tool .tool-download-button svg {width:20px;height:20px;}
  #tool .tour-progress,#installation .tour-progress {top:calc(100% + 12px);}
  #purchase .purchase-offer {left:50%;top:74%;width:min(90vw,620px);transform:translate(-50%,-50%);gap:9px;}
  #purchase .purchase-title-box h1 {font-size:clamp(24px,6vw,38px);}
  #purchase .purchase-card {padding:clamp(9px,2.7vw,15px);border-radius:16px;}
  #purchase .purchase-price-row {gap:7px;}
  #purchase .purchase-price-box,#purchase .purchase-country-panel {height:clamp(136px,19vh,205px);}
  #purchase .purchase-amount {font-size:clamp(46px,12vw,79px);}
  #purchase .purchase-price-note {font-size:clamp(9px,2.5vw,12px);bottom:7px;left:5px;right:5px;}
  #purchase .purchase-country-heading {font-size:clamp(12px,3.4vw,17px);}
  #purchase .purchase-country {font-size:clamp(11px,2.9vw,15px);min-height:30px;padding:5px;gap:5px;}
  #purchase .purchase-button {min-height:48px;font-size:clamp(16px,4.4vw,22px);}
}
@media(orientation:portrait) and (max-height:720px) {
  #tool .tool-eyebrow {top:72%;}
  #installation .gateway-copy {top:33%;}
  #tool .tour-title h2,#installation .tour-title h2 {font-size:clamp(21px,6.4vw,32px);}
  #tool .tour-body p,#installation .tour-body p {font-size:clamp(11px,3.2vw,15px);line-height:1.32;}
  #tool .tour-title,#tool .tour-body,#installation .tour-title,#installation .tour-body {padding:10px 12px;}
  #purchase .purchase-offer {top:73%;}
  #purchase .purchase-price-box,#purchase .purchase-country-panel {height:clamp(125px,18vh,175px);}
}
@media(orientation:landscape) and (max-height:570px) {
  #tool .tool-eyebrow,#installation .gateway-copy {top:53%;width:min(43vw,660px);}
  #tool .tour-title,#tool .tour-body,#installation .tour-title,#installation .tour-body {padding:clamp(8px,1.15vw,14px);border-radius:12px;}
  #tool .tour-title h2,#installation .tour-title h2 {font-size:clamp(19px,2.65vw,29px);}
  #tool .tour-body p,#installation .tour-body p {font-size:clamp(10px,1.4vw,14px);line-height:1.34;}
  #tool .tour-progress,#installation .tour-progress {top:calc(100% + 6px);}
  #tool .tool-download-button {min-height:65px;gap:2px;}
  #purchase .purchase-offer {top:53%;width:min(42vw,610px);gap:6px;}
  #purchase .purchase-title-box h1 {font-size:clamp(19px,3vw,33px);}
  #purchase .purchase-card {padding:8px 12px;}
  #purchase .purchase-price-box,#purchase .purchase-country-panel {height:clamp(90px,26vh,155px);}
  #purchase .purchase-amount {font-size:clamp(37px,5.2vw,68px);}
  #purchase .purchase-price-note {font-size:10px;bottom:5px;}
  #purchase .purchase-country-heading {font-size:13px;}
  #purchase .purchase-country {min-height:25px;padding:3px 6px;font-size:12px;}
  #purchase .purchase-button {min-height:38px;font-size:17px;}
}
@media(prefers-reduced-motion:reduce) {
  #tool .tool-info-step,#installation .gateway-info-step,#tool .tour-progress-fill,#installation .tour-progress-fill {transition:none!important;}
}

/* V28 — progress tracks centered under the entire pair of story cards. */
#tool .tour-progress, #installation .tour-progress {
  left:50%;transform:translateX(-50%);width:clamp(120px,28%,210px);max-width:none;
}
/* Platform downloads are genuinely independent patterned cards, never nested in the description. */
#tool .tool-download-options {margin-top:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(9px,1.15vw,17px);}
#tool .tool-download-button {
  min-height:clamp(100px,12vh,158px);border:1px solid var(--glass-stroke);
  padding:clamp(12px,1.55vw,21px);border-radius:var(--glass-radius);
  background:var(--glass-bg);opacity:1;color:#f5f5fa;
}
#tool .tool-download-button::before {
  content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  background:url("../assets/textures/box_background.png") center / 1100px auto no-repeat;
  filter:brightness(0) saturate(100%) invert(40%);opacity:.15;
}
#tool .tool-download-button .download-name {font-size:clamp(16px,1.5vw,23px)}
#tool .tool-download-button small {font-size:clamp(11px,1vw,14px);color:#b9bfca}
#tool .tool-download-button svg {width:clamp(24px,2vw,32px);height:clamp(24px,2vw,32px)}
/* Scrollable country list without its decorative scrollbar: scrolling still works. */
#purchase .purchase-country-list {scrollbar-width:none;-ms-overflow-style:none;}
#purchase .purchase-country-list::-webkit-scrollbar {display:none;width:0;height:0;}
#purchase .purchase-country {font-size:clamp(14px,1.24vw,18px);min-height:clamp(39px,4.4vh,49px);gap:clamp(9px,1vw,14px);padding:7px 10px;}
#purchase .purchase-country-flag {font-size:1.43em;line-height:1;}
/* Slightly larger centered counter, each digit fades softly at the reel edges. */
#purchase .purchase-amount {font-size:clamp(63px,5.9vw,110px);letter-spacing:-.09em;gap:0;}
#purchase .purchase-digit {width:.61em;height:1.09em;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 87%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 87%,transparent 100%);
}
#purchase .purchase-price {height:1.11em;}
#purchase .purchase-price-note {font-size:clamp(10px,1vw,14px);}
@media (orientation:portrait){
  #tool .tool-download-options {gap:9px;}
  #tool .tool-download-button {min-height:85px;padding:12px;gap:5px;}
  #tool .tool-download-button .download-name {font-size:clamp(14px,3.6vw,20px);}
  #purchase .purchase-country {font-size:clamp(13px,3.45vw,17px);min-height:clamp(40px,5.5vh,52px);padding:6px 8px;gap:8px;}
  #purchase .purchase-country-flag {font-size:1.42em;}
  #purchase .purchase-amount {font-size:clamp(46px,14vw,78px);}
  /* Less of the portrait screen is reserved for the 3D product. */
  #purchase-cluster {height:45%;bottom:auto;}
  #purchase .purchase-offer {top:70%;}
}
@media (orientation:portrait) and (max-height:720px){
  #purchase-cluster {height:41%;}
  #purchase .purchase-offer {top:69%;}
  #purchase .purchase-amount {font-size:clamp(44px,13.5vw,72px);}
  #purchase .purchase-country {min-height:38px;font-size:clamp(12px,3.3vw,16px)}
}
@media (orientation:landscape) and (max-height:570px){
  #purchase .purchase-country {min-height:29px;font-size:12px;padding:4px 7px;}
  #purchase .purchase-amount {font-size:clamp(40px,5.5vw,70px);}
  #tool .tool-download-button {min-height:70px;padding:9px;}
}


/* V30 — restore the approved purchase proportions; no V29 optimizations. */
#tool [data-page-index="5"] .tool-download-options {margin-top:0;}
#purchase .purchase-offer {width:min(43vw,670px);gap:clamp(11px,1.25vw,20px);}
#purchase .purchase-price-row {grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:clamp(8px,.9vw,14px);}
#purchase .purchase-title-box h1 {font-size:clamp(37px,4vw,64px);line-height:1.08;letter-spacing:-.045em;text-wrap:balance;}
#purchase .purchase-price-box,#purchase .purchase-country-panel {height:clamp(210px,29vh,315px);}
#purchase .purchase-amount {font-size:clamp(70px,7.6vw,119px);letter-spacing:-.085em;}
#purchase .purchase-price-note {bottom:clamp(12px,1.4vw,19px);}
#purchase .purchase-button {
  min-height:clamp(72px,10vh,108px);
  padding:clamp(12px,1.6vw,24px);font-size:clamp(24px,3vw,42px);
}
#purchase .purchase-button svg {width:clamp(28px,3vw,44px);height:clamp(28px,3vw,44px);}
/* Mobile portrait: a centered 3D product showcase immediately above the offer.
   Use the actual visible height; don't leave an unbounded blank region. */
@media (orientation:portrait) and (max-width:700px) {
  #purchase .purchase-pin {display:block;}
  #purchase-cluster {
    top:clamp(78px,10svh,130px);bottom:auto;
    height:clamp(240px,37svh,360px);
    left:0;right:0;width:100%;
  }
  #purchase .purchase-offer {
    top:auto;bottom:clamp(22px,4.5svh,51px);left:50%;
    width:min(90vw,590px);transform:translateX(-50%);
    gap:clamp(8px,1.15svh,13px);
  }
  #purchase .purchase-card {padding:clamp(11px,3.3vw,18px);border-radius:clamp(16px,4vw,22px);}
  #purchase .purchase-title-box h1 {font-size:clamp(30px,8.45vw,49px);line-height:1.08;}
  #purchase .purchase-price-row {grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:clamp(8px,2vw,13px);}
  #purchase .purchase-price-box,#purchase .purchase-country-panel {height:clamp(160px,24svh,235px);}
  #purchase .purchase-price-box {overflow:hidden;}
  #purchase .purchase-amount {font-size:clamp(58px,18.5vw,94px);}
  #purchase .purchase-price-note {font-size:clamp(10px,2.7vw,13px);bottom:clamp(9px,1.5svh,15px);left:6px;right:6px;}
  #purchase .purchase-country-panel {padding:clamp(11px,2.8vw,16px) 8px;gap:9px;}
  #purchase .purchase-country-heading {font-size:clamp(14px,4vw,20px);}
  #purchase .purchase-country {font-size:clamp(14px,3.8vw,18px);min-height:clamp(37px,5svh,49px);}
  #purchase .purchase-button {min-height:clamp(64px,9.1svh,83px);font-size:clamp(19px,5.1vw,29px);gap:11px;}
  #purchase .purchase-button svg {width:clamp(26px,6.3vw,35px);height:clamp(26px,6.3vw,35px);}
}
@media (orientation:portrait) and (max-width:700px) and (max-height:720px) {
  #purchase-cluster {top:clamp(62px,9svh,100px);height:clamp(205px,33svh,255px);}
  #purchase .purchase-offer {bottom:clamp(12px,2svh,25px);gap:7px;}
  #purchase .purchase-title-box h1 {font-size:clamp(26px,7.6vw,40px);}
  #purchase .purchase-price-box,#purchase .purchase-country-panel {height:clamp(135px,22svh,170px);}
  #purchase .purchase-amount {font-size:clamp(50px,17vw,72px);}
  #purchase .purchase-country {min-height:35px;font-size:clamp(12px,3.6vw,16px);}
  #purchase .purchase-button {min-height:54px;font-size:clamp(17px,4.8vw,23px);}
}
@media (orientation:portrait) and (min-width:701px) {
  #purchase .purchase-price-row {grid-template-columns:minmax(0,3fr) minmax(0,2fr);}
  #purchase .purchase-title-box h1 {font-size:clamp(36px,6.5vw,62px);}
  #purchase .purchase-button {min-height:clamp(68px,9vh,100px);font-size:clamp(23px,4vw,36px);}
}
@media (orientation:landscape) and (max-height:570px) {
  #purchase .purchase-price-box,#purchase .purchase-country-panel {height:clamp(95px,28vh,160px);}
  #purchase .purchase-amount {font-size:clamp(42px,5.7vw,75px);}
  #purchase .purchase-title-box h1 {font-size:clamp(22px,3.1vw,40px);}
  #purchase .purchase-button {min-height:clamp(38px,8vh,60px);font-size:clamp(17px,2.5vw,25px);}
}

/* V30 final proportions: prevent the disabled checkout CTA becoming taller than the price box. */
@media (orientation:landscape) and (min-height:571px){
  #purchase .purchase-title-box h1 {font-size:clamp(43px,5vw,75px);}
  #purchase .purchase-button {min-height:clamp(70px,8vh,104px);font-size:clamp(22px,2.7vw,36px);}
}
@media (orientation:portrait) and (max-width:700px){
  #purchase .purchase-title-box h1 {font-size:clamp(29px,9.5vw,51px);}
}


/* V31 — the reference Purchase geometry: 3:2 COLUMN widths; the right
   Shipping card sets the ROW HEIGHT via a true 1:1 aspect ratio.
   Both cards have identical top/bottom edges, on every viewport. */
#purchase .purchase-price-row {
  grid-template-columns:minmax(0,3fr) minmax(0,2fr);
  grid-template-rows:auto;
  align-items:stretch;
}
#purchase .purchase-country-panel {
  aspect-ratio:1 / 1;
  width:100%;
  height:auto !important;
  min-height:0 !important;
  overflow:hidden;
  align-self:start;
}
#purchase .purchase-price-box {
  height:100% !important;
  min-height:0 !important;
  align-self:stretch;
  overflow:hidden;
}
@media (orientation:portrait) and (max-width:700px) {
  /* Keep the 318€ completely inside the price card, even on a 320px phone.
     The left card must not force the 1:1 shipping card to grow taller. */
  #purchase .purchase-amount {font-size:clamp(42px,15.2vw,83px);}
  #purchase .purchase-price-note {font-size:clamp(9px,2.55vw,12px);line-height:1.25;bottom:clamp(6px,1.2vw,11px);}
}
@media (orientation:portrait) and (max-width:360px) {
  #purchase .purchase-card {padding:clamp(7px,2.45vw,12px);}
  #purchase .purchase-country-panel {gap:5px;}
  #purchase .purchase-country-heading {font-size:clamp(12px,3.8vw,15px);}
  #purchase .purchase-amount {font-size:clamp(40px,15vw,55px);}
}

/* V31 — genuine CSS snap points for every Tool/Installation chapter on desktop.
   Mobile retains the separate deliberate touch controller (native snap disabled). */
#tool, #installation {position:relative;}
#tool .chapter-snap-marker, #installation .chapter-snap-marker {
  position:absolute;
  top:calc(var(--stage) * var(--scroll-viewport));
  left:0;
  width:1px;
  height:1px;
  pointer-events:none;
  scroll-snap-align:start;
  scroll-snap-stop:normal;
}
@media (pointer:coarse), (hover:none) {
  #tool .chapter-snap-marker, #installation .chapter-snap-marker {scroll-snap-align:none;}
}