:root{--navy:#081426;--navy2:#0c1d35;--blue:#1554c9;--blue2:#0b65e5;--ink:#0e1726;--muted:#657083;--line:#dce3ef;--paper:#ffffff;--soft:#f3f7fc;--soft2:#eaf1fb;--shadow:0 24px 70px rgba(9,24,46,.16);--radius:18px}*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.45}a{text-decoration:none;color:inherit}.site-header{height:78px;display:flex;align-items:center;gap:34px;padding:0 42px;border-bottom:1px solid #edf1f7;background:#fff;position:sticky;top:0;z-index:10}.brand{display:flex;align-items:center;gap:12px;min-width:290px}.brand-mark{width:54px;height:54px;border:4px solid var(--navy);position:relative;display:block}.brand-mark span{position:absolute;left:10px;bottom:6px;width:34px;height:34px;background:linear-gradient(145deg,#0c2c55,#4a8ec6);clip-path:polygon(0 100%,100% 100%,73% 42%,0 0)}.brand-text strong{display:block;font-size:25px;letter-spacing:5px;line-height:1;color:var(--navy)}.brand-text em{display:block;font-style:normal;font-size:13px;letter-spacing:8px;color:var(--blue);font-weight:700}.brand-text small{display:block;color:#3f4b5d;font-size:12px;margin-top:2px}.nav{display:flex;gap:28px;align-items:center;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;flex:1;justify-content:center}.nav a:hover{color:var(--blue)}.button{display:inline-flex;align-items:center;justify-content:center;border-radius:6px;padding:14px 22px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:13px}.button-primary{background:var(--blue);color:#fff;box-shadow:0 14px 30px rgba(21,84,201,.24)}.button-secondary{border:2px solid var(--blue);color:var(--blue);background:#fff}.button-light{background:#fff;color:var(--blue);min-width:220px}.header-cta{padding:14px 24px}.hero{display:grid;grid-template-columns:41% 59%;min-height:520px;background:radial-gradient(circle at 35% 25%,#fff 0,#f6f9fd 36%,#eaf1fa 68%,#dce9f8 100%);overflow:hidden}.hero-copy{padding:70px 30px 40px 70px}.eyebrow{text-transform:uppercase;letter-spacing:.22em;font-weight:900;color:var(--blue);font-size:13px}.eyebrow.center{text-align:center}.hero h1{font-size:58px;line-height:1.02;margin:14px 0 14px;letter-spacing:.035em}.hero h1 span{color:var(--blue)}.hero-lede{font-size:18px;color:#4d5a6d;max-width:560px}.hero-actions{display:flex;gap:18px;margin:28px 0}.trust-row{display:flex;gap:22px;flex-wrap:wrap;font-weight:700;font-size:13px;color:#1d3861}.trust-row span:before{content:'✓';display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;background:#e4efff;color:var(--blue);margin-right:7px}.hero-visual{display:flex;align-items:center;justify-content:flex-start;padding:38px 34px 35px 0}.laptop{width:870px;max-width:100%;border-radius:20px;background:#07111f;padding:14px 14px 22px;box-shadow:var(--shadow);position:relative}.laptop:after{content:'';position:absolute;left:-80px;right:-80px;bottom:-18px;height:18px;border-radius:0 0 80px 80px;background:linear-gradient(90deg,#3d4654,#a1adbc,#39485c)}.browser-bar{height:32px;color:#b9c7d7;display:flex;gap:8px;align-items:center;font-size:12px;padding:0 7px}.browser-bar span{width:9px;height:9px;border-radius:50%;background:#65768b}.browser-bar strong{margin-left:10px;letter-spacing:.12em;text-transform:uppercase;font-size:10px}.config-app{background:#f5f7fb;border-radius:8px;min-height:355px;display:grid;grid-template-columns:170px 1fr 145px;gap:12px;padding:12px}.config-panel,.summary-panel{background:#fff;border-radius:8px;border:1px solid #dbe3ef;padding:14px;font-size:12px}.config-panel b,.summary-panel b{display:block;text-transform:uppercase;letter-spacing:.1em;font-size:11px;margin-bottom:10px}.config-panel label{display:block;color:#607084;font-weight:700;margin:10px 0 5px}.select{border:1px solid #d8e0ea;border-radius:5px;padding:8px}.segmented{display:flex;gap:4px}.segmented span{border:1px solid #d8e0ea;padding:7px 9px;border-radius:4px}.segmented .active{border-color:var(--blue);background:#eaf2ff}.swatches{display:flex;gap:8px}.swatches i{width:20px;height:20px;border-radius:50%;background:#111}.swatches i:nth-child(2){background:#f5f5f5;border:1px solid #ccc}.swatches i:nth-child(3){background:#8b8d90}.swatches i:nth-child(4){background:#8a5b34}.config-panel button,.summary-panel button{border:0;background:var(--blue);color:#fff;border-radius:5px;padding:10px;width:100%;font-weight:800;text-transform:uppercase;font-size:10px;margin-top:12px}.wall-demo{position:relative;background:#eef2f7;border:1px solid #cfd9e7;border-radius:8px;overflow:hidden}.wall-grid{position:absolute;inset:0;background:repeating-linear-gradient(0deg,#f8fafc 0,#f8fafc 9px,#dde5ee 10px,#dde5ee 12px)}.cabinet{position:absolute;left:22%;right:6%;bottom:26px;height:78px;background:linear-gradient(#1b1f24,#0c0e12);border-radius:3px;box-shadow:inset 0 0 0 2px #303944}.shelf{position:absolute;width:115px;height:36px;background:#62768f;border:2px solid #394a61;box-shadow:0 23px 0 -18px #e8edf3,0 25px 0 -18px #738091;color:#fff;font-size:10px;font-weight:800;text-align:center;padding-top:8px;animation:pop 7s infinite}.shelf-1{left:23%;top:58px}.shelf-2{left:48%;top:70px;animation-delay:.35s}.shelf-3{left:68%;top:105px;animation-delay:.7s}.shelf-4{left:31%;top:142px;animation-delay:1.05s}.shelf-5{left:55%;top:156px;animation-delay:1.4s}.shelf-6{left:73%;top:196px;animation-delay:1.75s}@keyframes pop{0%,7%{opacity:0;transform:scale(.88) translateY(8px)}12%,100%{opacity:1;transform:scale(1)}}.summary-panel p{margin:10px 0 1px;color:#5d6a7a}.summary-panel strong{display:block;margin:0 0 4px}.summary-panel .price{font-size:22px;color:var(--navy)}.process-strip{background:var(--navy);color:#fff;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;padding:30px 60px}.process-strip div{display:grid;grid-template-columns:56px 1fr;column-gap:15px;align-items:center}.process-strip span{grid-row:span 2;border:1px solid rgba(255,255,255,.45);width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#9cc2ff}.process-strip strong{text-transform:uppercase;letter-spacing:.08em}.process-strip p{margin:0;color:#c9d4e4;font-size:14px}.section{padding:70px 70px}.section h2{font-size:34px;line-height:1.16;margin:8px 0 26px;text-align:center}.card-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}.card{background:#fff;border:1px solid #e1e8f2;border-radius:12px;padding:26px;box-shadow:0 12px 35px rgba(9,24,46,.06)}.card h3{margin:14px 0 8px;font-size:18px}.card p{color:#5d6878;font-size:14px}.card a{color:var(--blue);font-weight:900;font-size:12px;text-transform:uppercase}.icon{width:48px;height:48px;border:2px solid var(--navy);border-radius:12px;position:relative}.icon:after{content:'';position:absolute;inset:12px;border:2px solid var(--blue);border-radius:4px}.demo-section{display:grid;grid-template-columns:32% 68%;gap:35px;align-items:center;background:linear-gradient(180deg,#f7faff,#fff)}.demo-section h2{text-align:left}.demo-copy ul{padding:0;margin:25px 0;list-style:none}.demo-copy li{margin:12px 0;color:#263246}.demo-copy li:before{content:'✓';color:#fff;background:var(--blue);border-radius:50%;font-size:11px;padding:2px 5px;margin-right:10px}.video-card{background:#fff;border:1px solid #dde6f0;border-radius:14px;padding:22px;box-shadow:var(--shadow)}.video-mockup{height:310px;border:8px solid #0d1420;border-radius:16px;position:relative;background:linear-gradient(120deg,#edf3fa,#fff);overflow:hidden}.play{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:82px;height:82px;border-radius:50%;background:rgba(8,20,38,.82);color:#fff;font-size:34px;display:flex;align-items:center;justify-content:center;padding-left:6px}.mini-wall{position:absolute;left:90px;right:80px;top:62px;bottom:55px;background:repeating-linear-gradient(0deg,#f7f9fc 0,#f7f9fc 13px,#d8e1ec 15px)}.mini-wall span{position:absolute;width:150px;height:48px;background:#61758e;border:2px solid #41536b}.mini-wall span:nth-child(1){left:40px;top:25px}.mini-wall span:nth-child(2){left:235px;top:25px}.mini-wall span:nth-child(3){left:430px;top:25px}.mini-wall span:nth-child(4){left:135px;top:100px}.mini-wall span:nth-child(5){left:330px;top:100px}.mini-wall span:nth-child(6){left:235px;top:170px}.split-section{display:grid;grid-template-columns:40% 60%;gap:40px;align-items:center}.split-section h2{text-align:left}.catalog-card{background:#fff;border:1px solid #dde6f0;border-radius:16px;padding:20px;box-shadow:var(--shadow)}.catalog-toolbar{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e5ecf5;padding-bottom:14px;color:#718096}.catalog-toolbar button{border:0;background:var(--blue);color:#fff;border-radius:5px;padding:10px 16px;font-weight:800}.catalog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}.catalog-grid i{height:105px;border-radius:12px;background:linear-gradient(135deg,#f3f7fc,#d8e4f2);border:1px solid #d7e0ec}.industries{margin:0 70px 40px;background:#f5f8fc;border:1px solid #e2eaf4;border-radius:14px;padding:24px;text-align:center}.industries p{text-transform:uppercase;letter-spacing:.12em;font-weight:900;color:#25334a}.industries div{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.industries span{background:#fff;border:1px solid #e0e8f1;border-radius:999px;padding:9px 15px;color:#334155;font-weight:700;font-size:13px}.cta-section{margin:0 70px 55px;background:var(--navy);color:#fff;border-radius:14px;padding:42px 55px;display:flex;align-items:center;justify-content:space-between}.cta-section h2{font-size:28px;margin:0 0 8px}.cta-section p{color:#c9d4e4;margin:0}.footer{border-top:1px solid #e7edf5;padding:24px 70px;display:flex;justify-content:space-between;color:#64748b}@media(max-width:1050px){.site-header{height:auto;flex-wrap:wrap;padding:18px}.nav{order:3;width:100%;justify-content:flex-start;overflow:auto}.hero{grid-template-columns:1fr}.hero-copy{padding:45px 28px}.hero h1{font-size:44px}.hero-visual{padding:0 28px 45px}.process-strip,.card-grid,.demo-section,.split-section{grid-template-columns:1fr}.card-grid{grid-template-columns:repeat(2,1fr)}.section{padding:45px 28px}.industries,.cta-section{margin-left:28px;margin-right:28px}.cta-section{display:block}.button-light{margin-top:25px}.footer{padding:24px 28px;display:block}.process-strip{padding:30px}.process-strip div{margin:10px 0}}@media(max-width:650px){.card-grid{grid-template-columns:1fr}.hero-actions{flex-direction:column}.brand-text strong{font-size:20px}.hero h1{font-size:36px}.config-app{grid-template-columns:1fr}.summary-panel{display:none}.wall-demo{min-height:280px}}

/* Hero demo animation v2: build-and-configure storyboard */
.config-app.animated-demo{
  position:relative;
  min-height:390px;
  grid-template-columns:180px 1fr 155px;
  padding-top:44px;
  overflow:hidden;
}
.demo-stepbar{
  position:absolute;
  left:14px;
  right:14px;
  top:10px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#7b8797;
}
.demo-stepbar span{
  border:1px solid #dbe3ef;
  background:#fff;
  border-radius:999px;
  padding:5px 9px;
  animation:stepPulse 12s infinite;
}
.demo-stepbar span:nth-child(2){animation-delay:3s}.demo-stepbar span:nth-child(3){animation-delay:6s}.demo-stepbar span:nth-child(4){animation-delay:9s}
@keyframes stepPulse{0%,24%{background:#1554c9;color:#fff;border-color:#1554c9}25%,100%{background:#fff;color:#7b8797;border-color:#dbe3ef}}
.animated-panel .select-shelf{animation:fieldGlow 12s infinite 2.1s}.animated-panel button{animation:buttonPulse 12s infinite 2.8s}.product-chips{display:flex;gap:4px;flex-wrap:wrap}.product-chips span{border:1px solid #d8e0ea;border-radius:999px;padding:5px 7px;font-size:10px;font-weight:800;background:#f7faff;color:#40516a}
@keyframes fieldGlow{0%,16%,46%,100%{box-shadow:none;border-color:#d8e0ea}20%,42%{box-shadow:0 0 0 3px rgba(21,84,201,.14);border-color:#1554c9}}
@keyframes buttonPulse{0%,18%,48%,100%{transform:none;filter:none}22%,44%{transform:translateY(-1px);filter:brightness(1.12)}}
.wall-demo.animated-wall{background:#f6f8fb;border-color:#cdd7e5}.animated-wall .cabinet{left:16%;right:8%;height:72px;bottom:20px;background:linear-gradient(#1a1f25,#0b0e12)}
.animated-wall .ghost{position:absolute;height:38px;border:2px dashed rgba(21,84,201,.55);border-radius:4px;opacity:0;animation:ghostPlace 12s infinite}.ghost-a{left:26%;top:78px;width:118px}.ghost-b{left:55%;top:118px;width:145px;animation-delay:1.4s!important}@keyframes ghostPlace{16%,27%{opacity:1;transform:translateY(0)}0%,15%,30%,100%{opacity:0;transform:translateY(8px)}}
.animated-wall .shelf{height:48px;border-radius:3px;background:#647790;color:#fff;padding-top:5px;box-shadow:0 33px 0 -25px #eef3f8,0 36px 0 -25px #7c8794;opacity:0;transform:translateY(10px) scale(.96);animation:shelfBuild 12s infinite}.animated-wall .shelf span{position:absolute;left:6px;right:6px;top:8px;line-height:1.05;font-size:9px;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.22)}.animated-wall .shelf i{position:absolute;bottom:12px;width:13px;height:18px;border-radius:2px;opacity:0;animation:productFade 12s infinite}.animated-wall .shelf i:nth-child(1){left:15px;background:#f0b544}.animated-wall .shelf i:nth-child(2){left:38px;background:#58a574}.animated-wall .shelf i:nth-child(3){left:62px;background:#d26b5f}.animated-wall .shelf:nth-of-type(odd) i:nth-child(1){background:#5aa0d6}.animated-wall .shelf:nth-of-type(odd) i:nth-child(2){background:#f1d37a}.animated-wall .shelf:nth-of-type(odd) i:nth-child(3){background:#98b66e}
.animated-wall .shelf-1{left:22%;top:58px;width:120px;animation-delay:2.1s}.animated-wall .shelf-2{left:49%;top:68px;width:150px;animation-delay:2.55s}.animated-wall .shelf-3{left:68%;top:124px;width:95px;animation-delay:3s}.animated-wall .shelf-4{left:28%;top:142px;width:118px;animation-delay:3.45s}.animated-wall .shelf-5{left:53%;top:172px;width:75px;animation-delay:3.9s}.animated-wall .shelf-6{left:70%;top:198px;width:98px;animation-delay:4.35s}
@keyframes shelfBuild{0%,18%{opacity:0;transform:translateY(10px) scale(.96)}25%,88%{opacity:1;transform:translateY(0) scale(1)}96%,100%{opacity:0;transform:translateY(2px) scale(.98)}}
@keyframes productFade{0%,44%{opacity:0;transform:translateY(8px)}50%,88%{opacity:.92;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(3px)}}
.demo-cursor{position:absolute;width:18px;height:18px;background:#fff;border:2px solid #0b1d35;border-radius:50% 50% 50% 0;transform:rotate(-45deg);filter:drop-shadow(0 4px 9px rgba(8,20,38,.25));animation:cursorMove 12s infinite;z-index:4}.demo-cursor:after{content:'';position:absolute;width:5px;height:5px;background:#1554c9;border-radius:50%;left:5px;top:5px}@keyframes cursorMove{0%,9%{opacity:0;left:60px;top:40px}13%{opacity:1;left:52px;top:50px}22%{left:165px;top:82px}31%{left:300px;top:118px}42%{left:365px;top:195px}55%,100%{opacity:0;left:440px;top:220px}}
.hero-demo-caption{position:absolute;left:18px;right:18px;bottom:110px;background:rgba(255,255,255,.86);backdrop-filter:blur(8px);border:1px solid #dce5f0;border-radius:999px;padding:8px 12px;text-align:center;font-size:11px;font-weight:900;color:#1a2a44;opacity:0;animation:captionIn 12s infinite 5.4s}@keyframes captionIn{0%,14%{opacity:0;transform:translateY(8px)}18%,72%{opacity:1;transform:translateY(0)}82%,100%{opacity:0;transform:translateY(8px)}}
.animated-summary{opacity:.35;transform:translateX(10px);animation:summaryIn 12s infinite}.animated-summary .price{animation:priceFlash 12s infinite}.pdf-button{background:#fff!important;color:#1554c9!important;border:1px solid #dbe3ef!important;margin-top:7px!important}.final-overlay{position:absolute;inset:44px 12px 12px 12px;background:linear-gradient(120deg,rgba(8,20,38,.92),rgba(21,84,201,.78));border-radius:9px;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;opacity:0;pointer-events:none;animation:finalReveal 12s infinite}.final-overlay strong{font-size:28px;letter-spacing:.08em}.final-overlay span{margin-top:8px;color:#dbe8ff;font-size:14px}@keyframes summaryIn{0%,45%{opacity:.35;transform:translateX(10px)}52%,88%{opacity:1;transform:translateX(0)}96%,100%{opacity:.35;transform:translateX(10px)}}@keyframes priceFlash{0%,55%{color:#081426}58%,86%{color:#1554c9}96%,100%{color:#081426}}@keyframes finalReveal{0%,76%{opacity:0;transform:scale(.985)}82%,93%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.995)}}
.demo-section .video-mockup{background:linear-gradient(120deg,#f4f8fd,#fff)}
@media(max-width:650px){.demo-stepbar{display:none}.config-app.animated-demo{padding-top:12px}.animated-wall .shelf span{font-size:8px}.final-overlay strong{font-size:20px}}

/* Hero demo animation v3: real-size shelf/product spacing pass */
.animated-panel .select-shelf::after{
  content:'  • real spacing';
  color:#1554c9;
  font-weight:900;
}
.animated-wall .ghost-a{left:39%;top:72px;width:150px;height:66px;}
.animated-wall .ghost-b{left:39%;top:154px;width:150px;height:66px;animation-delay:1.1s!important;}
.animated-wall .shelf{
  --shelf-w:110px;
  --prod-h:44px;
  width:var(--shelf-w);
  height:calc(var(--prod-h) + 13px);
  background:rgba(240,244,249,.84);
  border:1px solid rgba(82,99,121,.55);
  border-radius:4px 4px 2px 2px;
  padding:0;
  box-shadow:0 8px 16px rgba(8,20,38,.08);
  color:#1f2c3f;
}
.animated-wall .shelf::after{
  content:'';
  position:absolute;
  left:-5px;
  right:-5px;
  bottom:0;
  height:7px;
  border-radius:2px;
  background:linear-gradient(180deg,#5f6f85,#364459);
  box-shadow:0 3px 0 rgba(16,28,45,.18);
}
.animated-wall .shelf span{
  position:absolute;
  left:50%;
  top:-17px;
  transform:translateX(-50%);
  right:auto;
  width:max-content;
  max-width:150px;
  padding:3px 6px;
  border:1px solid #cfd9e7;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  color:#26364c;
  line-height:1;
  font-size:8px;
  text-shadow:none;
  box-shadow:0 3px 8px rgba(8,20,38,.08);
  white-space:nowrap;
}
.animated-wall .shelf i{
  bottom:9px;
  height:calc(var(--prod-h) - 8px);
  width:calc((var(--shelf-w) - 28px) / 4);
  min-width:12px;
  border-radius:3px 3px 1px 1px;
  border:1px solid rgba(255,255,255,.36);
}
.animated-wall .shelf i:nth-child(1){left:8px;background:#5aa0d6;}
.animated-wall .shelf i:nth-child(2){left:calc(8px + ((var(--shelf-w) - 28px) / 4) + 5px);background:#f0b544;}
.animated-wall .shelf i:nth-child(3){left:calc(8px + (((var(--shelf-w) - 28px) / 4) + 5px) * 2);background:#58a574;}
.animated-wall .shelf i:nth-child(4){left:calc(8px + (((var(--shelf-w) - 28px) / 4) + 5px) * 3);background:#d26b5f;}
.animated-wall .shelf-small i{width:30px;}
.animated-wall .shelf-small i:nth-child(1){left:10px;}
.animated-wall .shelf-small i:nth-child(2){left:50px;}
.animated-wall .shelf-narrow i{width:30px;left:15px!important;background:#f0b544!important;}
.animated-wall .shelf-wide{--shelf-w:150px;}
.animated-wall .shelf-medium{--shelf-w:110px;}
.animated-wall .shelf-small{--shelf-w:82px;}
.animated-wall .shelf-narrow{--shelf-w:58px;}
.animated-wall .prod-6{--prod-h:34px;}
.animated-wall .prod-8{--prod-h:42px;}
.animated-wall .prod-10{--prod-h:50px;}
.animated-wall .prod-12{--prod-h:60px;}
.animated-wall .shelf-1{left:39%;top:72px;animation-delay:2.1s;}
.animated-wall .shelf-2{left:39%;top:154px;animation-delay:2.65s;}
.animated-wall .shelf-3{left:18%;top:66px;animation-delay:3.25s;}
.animated-wall .shelf-4{left:68%;top:62px;animation-delay:3.8s;}
.animated-wall .shelf-5{left:23%;top:146px;animation-delay:4.35s;}
.animated-wall .shelf-6{left:73%;top:148px;animation-delay:4.9s;}
.animated-wall .shelf-7{left:20%;top:220px;animation-delay:5.45s;}
.animated-wall .shelf-8{left:76%;top:224px;animation-delay:6s;}
@keyframes cursorMove{0%,9%{opacity:0;left:60px;top:40px}13%{opacity:1;left:54px;top:52px}22%{left:235px;top:96px}31%{left:250px;top:180px}40%{left:128px;top:88px}48%{left:380px;top:85px}58%{left:135px;top:235px}66%{left:410px;top:235px}76%,100%{opacity:0;left:460px;top:250px}}
.hero-demo-caption{bottom:106px;}
.animated-summary button:first-of-type{animation:downloadPulse 12s infinite 6.9s;}
@keyframes downloadPulse{0%,55%,100%{transform:none;filter:none}60%,78%{transform:translateY(-1px);filter:brightness(1.1)}}
@media(max-width:650px){.animated-wall .shelf span{font-size:7px;top:-14px}.animated-wall .shelf{transform-origin:center bottom}}

/* Hero demo animation v4: purposeful real-size fixture layout */
.config-app.animated-demo{
  min-height:400px;
}
.wall-demo.animated-wall{
  min-height:330px;
  background:#f7f9fc;
}
.animated-wall .wall-grid{
  background:
    repeating-linear-gradient(0deg,#f9fbfd 0,#f9fbfd 10px,#dfe7f0 11px,#dfe7f0 13px),
    linear-gradient(90deg,rgba(21,84,201,.05),transparent 38%,transparent 62%,rgba(21,84,201,.04));
}
.animated-wall .cabinet{
  left:19%;
  right:10%;
  height:58px;
  bottom:18px;
  z-index:1;
}
.animated-wall .ghost{
  border:2px dashed rgba(21,84,201,.58);
  background:rgba(21,84,201,.05);
  border-radius:5px;
  z-index:2;
}
.animated-wall .ghost-a{left:242px;top:52px;width:156px;height:72px;}
.animated-wall .ghost-b{left:242px;top:135px;width:156px;height:72px;animation-delay:1.1s!important;}
.animated-wall .ghost-c{left:94px;top:67px;width:108px;height:54px;animation-delay:2.2s!important;}

.animated-wall .shelf{
  --shelf-w:140px;
  --prod-h:46px;
  width:var(--shelf-w)!important;
  height:calc(var(--prod-h) + 12px)!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible;
  z-index:3;
  transform-origin:center bottom;
}
.animated-wall .shelf::before{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:8px;
  border-radius:2px;
  background:linear-gradient(180deg,#5d6d82,#2f3b4d);
  box-shadow:0 4px 8px rgba(8,20,38,.18);
  z-index:2;
}
.animated-wall .shelf::after{
  left:4px;
  right:4px;
  bottom:8px;
  height:1px;
  background:rgba(255,255,255,.4);
  box-shadow:none;
  z-index:3;
}
.animated-wall .shelf span{
  top:-19px;
  font-size:8px;
  max-width:none;
  background:rgba(255,255,255,.96);
  border-color:#cbd6e5;
  color:#203149;
  z-index:5;
}
.animated-wall .shelf i{
  opacity:0;
  bottom:9px;
  height:var(--prod-h)!important;
  width:calc((var(--shelf-w) - 26px) / 4)!important;
  min-width:10px;
  border-radius:4px 4px 1px 1px;
  border:1px solid rgba(255,255,255,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
  animation:productFade 14s infinite;
  z-index:1;
}
.animated-wall .shelf-medium i{width:calc((var(--shelf-w) - 22px) / 3)!important;}
.animated-wall .shelf-small i{width:28px!important;}
.animated-wall .shelf-narrow i{width:26px!important;left:17px!important;}
.animated-wall .shelf i:nth-child(1){left:7px;background:#5aa0d6;}
.animated-wall .shelf i:nth-child(2){left:calc(7px + ((var(--shelf-w) - 26px) / 4) + 4px);background:#f0c15a;}
.animated-wall .shelf i:nth-child(3){left:calc(7px + (((var(--shelf-w) - 26px) / 4) + 4px) * 2);background:#6ead82;}
.animated-wall .shelf i:nth-child(4){left:calc(7px + (((var(--shelf-w) - 26px) / 4) + 4px) * 3);background:#d36c64;}
.animated-wall .shelf-medium i:nth-child(1){left:8px;background:#f0b544;}
.animated-wall .shelf-medium i:nth-child(2){left:calc(8px + ((var(--shelf-w) - 22px) / 3) + 3px);background:#75a6cf;}
.animated-wall .shelf-medium i:nth-child(3){left:calc(8px + (((var(--shelf-w) - 22px) / 3) + 3px) * 2);background:#83b66b;}
.animated-wall .shelf-small i:nth-child(1){left:8px;background:#b9cc6b;}
.animated-wall .shelf-small i:nth-child(2){left:43px;background:#db7b63;}
.animated-wall .shelf-narrow i:nth-child(1){background:#e2aa45!important;}

.animated-wall .shelf-wide{--shelf-w:156px;}
.animated-wall .shelf-medium{--shelf-w:108px;}
.animated-wall .shelf-small{--shelf-w:76px;}
.animated-wall .shelf-narrow{--shelf-w:58px;}
.animated-wall .prod-6{--prod-h:28px;}
.animated-wall .prod-8{--prod-h:38px;}
.animated-wall .prod-10{--prod-h:48px;}
.animated-wall .prod-12{--prod-h:58px;}

/* Intentional pattern: center focal column, then left/right supporting shelves. */
.animated-wall .shelf-1{left:242px!important;top:52px!important;animation-delay:2.0s!important;}
.animated-wall .shelf-2{left:242px!important;top:135px!important;animation-delay:2.65s!important;}
.animated-wall .shelf-3{left:92px!important;top:70px!important;animation-delay:3.45s!important;}
.animated-wall .shelf-4{left:430px!important;top:60px!important;animation-delay:4.25s!important;}
.animated-wall .shelf-5{left:118px!important;top:154px!important;animation-delay:5.05s!important;}
.animated-wall .shelf-6{left:464px!important;top:162px!important;animation-delay:5.85s!important;}

@keyframes shelfBuild{
  0%,13%{opacity:0;transform:translateY(10px) scale(.96)}
  19%,86%{opacity:1;transform:translateY(0) scale(1)}
  96%,100%{opacity:0;transform:translateY(2px) scale(.985)}
}
@keyframes productFade{
  0%,38%{opacity:0;transform:translateY(8px)}
  44%,86%{opacity:.95;transform:translateY(0)}
  96%,100%{opacity:0;transform:translateY(3px)}
}
@keyframes ghostPlace{
  12%,23%{opacity:1;transform:translateY(0)}
  0%,11%,26%,100%{opacity:0;transform:translateY(8px)}
}
@keyframes cursorMove{
  0%,9%{opacity:0;left:70px;top:42px}
  12%{opacity:1;left:68px;top:54px}
  22%{left:305px;top:86px}
  31%{left:305px;top:170px}
  41%{left:148px;top:96px}
  51%{left:486px;top:90px}
  61%{left:156px;top:176px}
  70%{left:492px;top:188px}
  80%,100%{opacity:0;left:505px;top:238px}
}
@keyframes stepPulse{
  0%,22%{background:#1554c9;color:#fff;border-color:#1554c9}
  23%,100%{background:#fff;color:#7b8797;border-color:#dbe3ef}
}
.demo-stepbar span:nth-child(2){animation-delay:2.9s}
.demo-stepbar span:nth-child(3){animation-delay:6.2s}
.demo-stepbar span:nth-child(4){animation-delay:9.2s}
.option-cycle{position:relative;color:transparent;display:block;min-height:16px;}
.option-cycle::after{
  content:'36" shelf / 12" product';
  color:#26364c;
  animation:optionText 14s infinite;
}
@keyframes optionText{
  0%,28%{content:'36" shelf / 12" product'}
  29%,45%{content:'24" shelf / 8" product'}
  46%,62%{content:'24" shelf / 10" product'}
  63%,78%{content:'18" shelf / 6" product'}
  79%,100%{content:'12" shelf / 6" product'}
}
.animated-summary{animation:summaryIn 14s infinite;}
.animated-summary button:first-of-type{animation:downloadPulse 14s infinite 7.2s;}
.final-overlay{animation:finalReveal 14s infinite;}
.hero-demo-caption{bottom:86px;animation:captionIn 14s infinite 6.2s;}
@media(max-width:650px){
  .animated-wall .shelf{transform-origin:left bottom;}
}

/* Hero demo animation v5: purposeful column layout with slot-based spacing */
.config-app.animated-demo{min-height:400px;}
.wall-demo.animated-wall{min-height:330px;}
.animated-wall .cabinet{
  left:18%;
  right:9%;
  bottom:12px;
  height:48px;
}

/* Keep the preview controlled: center focal column plus one right-side column. */
.animated-wall .ghost-a{left:176px!important;top:28px!important;width:156px!important;height:68px!important;}
.animated-wall .ghost-b{left:176px!important;top:106px!important;width:156px!important;height:68px!important;}
.animated-wall .ghost-c{left:176px!important;top:184px!important;width:156px!important;height:68px!important;}
.animated-wall .ghost{animation:none!important;opacity:0!important;}

.animated-wall .shelf{
  z-index:3;
  opacity:0;
  transform:translateY(8px) scale(.98);
  animation:none!important;
}
.animated-wall .shelf i{opacity:.95!important;animation:none!important;}

/* Put labels over the product layer so the top of the product determines the next shelf spacing. */
.animated-wall .shelf span{
  top:auto!important;
  left:50%!important;
  bottom:calc(9px + (var(--prod-h) / 2) - 9px)!important;
  transform:translateX(-50%)!important;
  padding:3px 6px!important;
  border-radius:5px!important;
  background:rgba(255,255,255,.94)!important;
  border:1px solid rgba(203,214,229,.9)!important;
  color:#17243a!important;
  font-size:7.5px!important;
  font-weight:900!important;
  line-height:1.05!important;
  box-shadow:0 4px 10px rgba(8,20,38,.12)!important;
  max-width:calc(var(--shelf-w) - 8px)!important;
  white-space:normal!important;
  text-align:center!important;
  z-index:6!important;
}

/* More visible difference between shelf widths and product heights. */
.animated-wall .shelf-wide{--shelf-w:156px!important;}
.animated-wall .shelf-medium{--shelf-w:108px!important;}
.animated-wall .shelf-small{--shelf-w:76px!important;}
.animated-wall .prod-6{--prod-h:28px!important;}
.animated-wall .prod-8{--prod-h:38px!important;}
.animated-wall .prod-10{--prod-h:48px!important;}
.animated-wall .prod-12{--prod-h:58px!important;}

/* Slot-like vertical rhythm: all shelves sit on clear horizontal rows. */
.animated-wall .shelf-1{left:176px!important;top:28px!important;animation:shelfOne 15s infinite!important;}
.animated-wall .shelf-2{left:176px!important;top:106px!important;animation:shelfTwo 15s infinite!important;}
.animated-wall .shelf-3{left:176px!important;top:184px!important;animation:shelfThree 15s infinite!important;}
.animated-wall .shelf-4{left:366px!important;top:48px!important;animation:shelfFour 15s infinite!important;}
.animated-wall .shelf-5{left:350px!important;top:126px!important;animation:shelfFive 15s infinite!important;}
.animated-wall .shelf-6{left:350px!important;top:202px!important;animation:shelfSix 15s infinite!important;}

@keyframes shelfOne{0%,10%{opacity:0;transform:translateY(8px) scale(.98)}13%,86%{opacity:1;transform:translateY(0) scale(1)}94%,100%{opacity:0;transform:translateY(3px) scale(.99)}}
@keyframes shelfTwo{0%,18%{opacity:0;transform:translateY(8px) scale(.98)}21%,86%{opacity:1;transform:translateY(0) scale(1)}93%,100%{opacity:0;transform:translateY(3px) scale(.99)}}
@keyframes shelfThree{0%,26%{opacity:0;transform:translateY(8px) scale(.98)}29%,86%{opacity:1;transform:translateY(0) scale(1)}92%,100%{opacity:0;transform:translateY(3px) scale(.99)}}
@keyframes shelfFour{0%,38%{opacity:0;transform:translateY(8px) scale(.98)}41%,86%{opacity:1;transform:translateY(0) scale(1)}91%,100%{opacity:0;transform:translateY(3px) scale(.99)}}
@keyframes shelfFive{0%,48%{opacity:0;transform:translateY(8px) scale(.98)}51%,86%{opacity:1;transform:translateY(0) scale(1)}90%,100%{opacity:0;transform:translateY(3px) scale(.99)}}
@keyframes shelfSix{0%,58%{opacity:0;transform:translateY(8px) scale(.98)}61%,86%{opacity:1;transform:translateY(0) scale(1)}89%,100%{opacity:0;transform:translateY(3px) scale(.99)}}

/* Cursor points deliberately: center column first, then right-side column. */
.demo-cursor{animation:cursorColumnBuild 15s infinite!important;z-index:7!important;}
@keyframes cursorColumnBuild{
  0%,7%{opacity:0;left:66px;top:45px}
  10%{opacity:1;left:254px;top:62px}
  19%{left:254px;top:140px}
  28%{left:254px;top:218px}
  40%{left:404px;top:78px}
  51%{left:404px;top:156px}
  61%{left:404px;top:232px}
  72%,100%{opacity:0;left:456px;top:260px}
}

/* Keep the completed configuration visible before the reset. */
.hero-demo-caption{bottom:74px!important;animation:captionColumnIn 15s infinite!important;}
@keyframes captionColumnIn{0%,62%{opacity:0;transform:translateY(8px)}66%,86%{opacity:1;transform:translateY(0)}94%,100%{opacity:0;transform:translateY(8px)}}
.animated-summary{animation:summaryColumnIn 15s infinite!important;}
.animated-summary button:first-of-type{animation:downloadPulse 15s infinite 10.4s!important;}
.final-overlay{animation:finalColumnReveal 15s infinite!important;}
@keyframes summaryColumnIn{0%,58%{opacity:.35;transform:translateX(10px)}64%,88%{opacity:1;transform:translateX(0)}96%,100%{opacity:.35;transform:translateX(10px)}}
@keyframes finalColumnReveal{0%,78%{opacity:0;transform:scale(.985)}82%,93%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.995)}}

.option-cycle::after{animation:optionColumnText 15s infinite!important;}
@keyframes optionColumnText{
  0%,36%{content:'36" shelf / 12" product'}
  37%,49%{content:'18" shelf / 6" product'}
  50%,58%{content:'24" shelf / 10" product'}
  59%,100%{content:'24" shelf / 8" product'}
}

/* Hero demo animation v6: balanced left / center / right columns with consistent slot spacing */
.wall-demo.animated-wall{min-height:330px;}
.animated-wall .cabinet{left:18%!important;right:9%!important;bottom:12px!important;height:48px!important;}

/* Slightly tighter visual scale so four 36-inch shelves can sit over the cabinet cleanly. */
.animated-wall .prod-6{--prod-h:24px!important;}
.animated-wall .prod-8{--prod-h:32px!important;}
.animated-wall .prod-10{--prod-h:38px!important;}
.animated-wall .prod-12{--prod-h:44px!important;}

/* Labels stay inside the product layer, leaving the top edge for visual spacing. */
.animated-wall .shelf span{
  bottom:calc(9px + (var(--prod-h) / 2) - 9px)!important;
  font-size:7.3px!important;
}

/* Purposeful build: center column first, then matching right and left support columns. */
.animated-wall .shelf-1{left:176px!important;top:24px!important;animation:shelfOne 17s infinite!important;}
.animated-wall .shelf-2{left:176px!important;top:83px!important;animation:shelfTwo 17s infinite!important;}
.animated-wall .shelf-3{left:176px!important;top:142px!important;animation:shelfThree 17s infinite!important;}
.animated-wall .shelf-4{left:176px!important;top:201px!important;animation:shelfFour 17s infinite!important;}

/* Right column: 18-inch shelf above two 24-inch shelves, aligned to a consistent slot rhythm. */
.animated-wall .shelf-5{left:366px!important;top:72px!important;animation:shelfFive 17s infinite!important;}
.animated-wall .shelf-6{left:350px!important;top:119px!important;animation:shelfSix 17s infinite!important;}
.animated-wall .shelf-7{left:350px!important;top:176px!important;animation:shelfSeven 17s infinite!important;}

/* Left column mirrors the right column. */
.animated-wall .shelf-8{left:64px!important;top:72px!important;animation:shelfEight 17s infinite!important;}
.animated-wall .shelf-9{left:48px!important;top:119px!important;animation:shelfNine 17s infinite!important;}
.animated-wall .shelf-10{left:48px!important;top:176px!important;animation:shelfTen 17s infinite!important;}

@keyframes shelfOne{0%,7%{opacity:0;transform:translateY(8px) scale(.98)}10%,86%{opacity:1;transform:translateY(0) scale(1)}94%,100%{opacity:0;transform:translateY(3px) scale(.99)}}
@keyframes shelfTwo{0%,14%{opacity:0;transform:translateY(8px) scale(.98)}17%,86%{opacity:1;transform:translateY(0) scale(1)}93%,100%{opacity:0;transform:translateY(3px) scale(.99)}}
@keyframes shelfThree{0%,21%{opacity:0;transform:translateY(8px) scale(.98)}24%,86%{opacity:1;transform:translateY(0) scale(1)}92%,100%{opacity:0;transform:translateY(3px) scale(.99)}}
@keyframes shelfFour{0%,28%{opacity:0;transform:translateY(8px) scale(.98)}31%,86%{opacity:1;transform:translateY(0) scale(1)}91%,100%{opacity:0;transform:translateY(3px) scale(.99)}}
@keyframes shelfFive{0%,38%{opacity:0;transform:translateY(8px) scale(.98)}41%,86%{opacity:1;transform:translateY(0) scale(1)}90%,100%{opacity:0;transform:translateY(3px) scale(.99)}}
@keyframes shelfSix{0%,45%{opacity:0;transform:translateY(8px) scale(.98)}48%,86%{opacity:1;transform:translateY(0) scale(1)}89%,100%{opacity:0;transform:translateY(3px) scale(.99)}}
@keyframes shelfSeven{0%,52%{opacity:0;transform:translateY(8px) scale(.98)}55%,86%{opacity:1;transform:translateY(0) scale(1)}88%,100%{opacity:0;transform:translateY(3px) scale(.99)}}
@keyframes shelfEight{0%,59%{opacity:0;transform:translateY(8px) scale(.98)}62%,86%{opacity:1;transform:translateY(0) scale(1)}87%,100%{opacity:0;transform:translateY(3px) scale(.99)}}
@keyframes shelfNine{0%,66%{opacity:0;transform:translateY(8px) scale(.98)}69%,86%{opacity:1;transform:translateY(0) scale(1)}87%,100%{opacity:0;transform:translateY(3px) scale(.99)}}
@keyframes shelfTen{0%,73%{opacity:0;transform:translateY(8px) scale(.98)}76%,86%{opacity:1;transform:translateY(0) scale(1)}87%,100%{opacity:0;transform:translateY(3px) scale(.99)}}

.demo-cursor{animation:cursorBalancedBuild 17s infinite!important;z-index:7!important;}
@keyframes cursorBalancedBuild{
  0%,5%{opacity:0;left:66px;top:45px}
  8%{opacity:1;left:254px;top:52px}
  16%{left:254px;top:111px}
  23%{left:254px;top:170px}
  30%{left:254px;top:229px}
  41%{left:404px;top:92px}
  49%{left:404px;top:141px}
  56%{left:404px;top:198px}
  63%{left:102px;top:92px}
  70%{left:102px;top:141px}
  77%{left:102px;top:198px}
  84%,100%{opacity:0;left:456px;top:260px}
}

.hero-demo-caption{bottom:74px!important;animation:captionBalancedIn 17s infinite!important;}
@keyframes captionBalancedIn{0%,72%{opacity:0;transform:translateY(8px)}76%,86%{opacity:1;transform:translateY(0)}94%,100%{opacity:0;transform:translateY(8px)}}
.animated-summary{animation:summaryBalancedIn 17s infinite!important;}
.animated-summary button:first-of-type{animation:downloadPulse 17s infinite 13.2s!important;}
.final-overlay{animation:finalBalancedReveal 17s infinite!important;}
@keyframes summaryBalancedIn{0%,70%{opacity:.35;transform:translateX(10px)}75%,88%{opacity:1;transform:translateX(0)}96%,100%{opacity:.35;transform:translateX(10px)}}
@keyframes finalBalancedReveal{0%,81%{opacity:0;transform:scale(.985)}85%,94%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.995)}}

.option-cycle::after{animation:optionBalancedText 17s infinite!important;}
@keyframes optionBalancedText{
  0%,34%{content:'36" shelf / 12" product'}
  35%,46%{content:'18" shelf / 6" product'}
  47%,62%{content:'24" shelf / 10" product'}
  63%,100%{content:'24" shelf / 8" product'}
}

/* Hero demo animation v7: 36-inch center column + 24-inch side columns only */
.wall-demo.animated-wall{min-height:330px;}
.animated-wall .cabinet{left:18%!important;right:9%!important;bottom:10px!important;height:48px!important;}

/* Keep the shelves close to the cabinet without touching it. */
.animated-wall .prod-8{--prod-h:30px!important;}
.animated-wall .prod-10{--prod-h:34px!important;}
.animated-wall .prod-12{--prod-h:38px!important;}
.animated-wall .shelf-wide{--shelf-w:156px!important;}
.animated-wall .shelf-medium{--shelf-w:108px!important;}

.animated-wall .shelf span{
  font-size:7px!important;
  line-height:1.02!important;
  padding:3px 5px!important;
  max-width:calc(var(--shelf-w) - 12px)!important;
}

/* Final pattern: five 36-inch shelves in the center, four 24-inch shelves on each side. */
.animated-wall .shelf-1{left:176px!important;top:18px!important;animation:shelfOne 19s infinite!important;}
.animated-wall .shelf-2{left:176px!important;top:68px!important;animation:shelfTwo 19s infinite!important;}
.animated-wall .shelf-3{left:176px!important;top:118px!important;animation:shelfThree 19s infinite!important;}
.animated-wall .shelf-4{left:176px!important;top:168px!important;animation:shelfFour 19s infinite!important;}
.animated-wall .shelf-11{left:176px!important;top:218px!important;animation:shelfEleven 19s infinite!important;}

.animated-wall .shelf-5{left:350px!important;top:64px!important;animation:shelfFive 19s infinite!important;}
.animated-wall .shelf-6{left:350px!important;top:113px!important;animation:shelfSix 19s infinite!important;}
.animated-wall .shelf-7{left:350px!important;top:162px!important;animation:shelfSeven 19s infinite!important;}
.animated-wall .shelf-12{left:350px!important;top:211px!important;animation:shelfTwelve 19s infinite!important;}

.animated-wall .shelf-8{left:48px!important;top:64px!important;animation:shelfEight 19s infinite!important;}
.animated-wall .shelf-9{left:48px!important;top:113px!important;animation:shelfNine 19s infinite!important;}
.animated-wall .shelf-10{left:48px!important;top:162px!important;animation:shelfTen 19s infinite!important;}
.animated-wall .shelf-13{left:48px!important;top:211px!important;animation:shelfThirteen 19s infinite!important;}

@keyframes shelfOne{0%,5%{opacity:0;transform:translateY(8px) scale(.98)}8%,86%{opacity:1;transform:translateY(0) scale(1)}94%,100%{opacity:0;transform:translateY(3px) scale(.99)}}
@keyframes shelfTwo{0%,11%{opacity:0;transform:translateY(8px) scale(.98)}14%,86%{opacity:1;transform:translateY(0) scale(1)}93%,100%{opacity:0;transform:translateY(3px) scale(.99)}}
@keyframes shelfThree{0%,17%{opacity:0;transform:translateY(8px) scale(.98)}20%,86%{opacity:1;transform:translateY(0) scale(1)}92%,100%{opacity:0;transform:translateY(3px) scale(.99)}}
@keyframes shelfFour{0%,23%{opacity:0;transform:translateY(8px) scale(.98)}26%,86%{opacity:1;transform:translateY(0) scale(1)}91%,100%{opacity:0;transform:translateY(3px) scale(.99)}}
@keyframes shelfEleven{0%,29%{opacity:0;transform:translateY(8px) scale(.98)}32%,86%{opacity:1;transform:translateY(0) scale(1)}90%,100%{opacity:0;transform:translateY(3px) scale(.99)}}
@keyframes shelfFive{0%,39%{opacity:0;transform:translateY(8px) scale(.98)}42%,86%{opacity:1;transform:translateY(0) scale(1)}89%,100%{opacity:0;transform:translateY(3px) scale(.99)}}
@keyframes shelfSix{0%,45%{opacity:0;transform:translateY(8px) scale(.98)}48%,86%{opacity:1;transform:translateY(0) scale(1)}89%,100%{opacity:0;transform:translateY(3px) scale(.99)}}
@keyframes shelfSeven{0%,51%{opacity:0;transform:translateY(8px) scale(.98)}54%,86%{opacity:1;transform:translateY(0) scale(1)}88%,100%{opacity:0;transform:translateY(3px) scale(.99)}}
@keyframes shelfTwelve{0%,57%{opacity:0;transform:translateY(8px) scale(.98)}60%,86%{opacity:1;transform:translateY(0) scale(1)}88%,100%{opacity:0;transform:translateY(3px) scale(.99)}}
@keyframes shelfEight{0%,64%{opacity:0;transform:translateY(8px) scale(.98)}67%,86%{opacity:1;transform:translateY(0) scale(1)}87%,100%{opacity:0;transform:translateY(3px) scale(.99)}}
@keyframes shelfNine{0%,69%{opacity:0;transform:translateY(8px) scale(.98)}72%,86%{opacity:1;transform:translateY(0) scale(1)}87%,100%{opacity:0;transform:translateY(3px) scale(.99)}}
@keyframes shelfTen{0%,74%{opacity:0;transform:translateY(8px) scale(.98)}77%,86%{opacity:1;transform:translateY(0) scale(1)}87%,100%{opacity:0;transform:translateY(3px) scale(.99)}}
@keyframes shelfThirteen{0%,78%{opacity:0;transform:translateY(8px) scale(.98)}81%,86%{opacity:1;transform:translateY(0) scale(1)}87%,100%{opacity:0;transform:translateY(3px) scale(.99)}}

.demo-cursor{animation:cursorV7Build 19s infinite!important;z-index:7!important;}
@keyframes cursorV7Build{
  0%,4%{opacity:0;left:66px;top:45px}
  7%{opacity:1;left:254px;top:45px}
  13%{left:254px;top:95px}
  19%{left:254px;top:145px}
  25%{left:254px;top:195px}
  31%{left:254px;top:245px}
  42%{left:404px;top:88px}
  48%{left:404px;top:137px}
  54%{left:404px;top:186px}
  60%{left:404px;top:235px}
  67%{left:102px;top:88px}
  72%{left:102px;top:137px}
  77%{left:102px;top:186px}
  82%{left:102px;top:235px}
  88%,100%{opacity:0;left:456px;top:260px}
}

.hero-demo-caption{bottom:72px!important;animation:captionV7In 19s infinite!important;}
@keyframes captionV7In{0%,73%{opacity:0;transform:translateY(8px)}78%,90%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(8px)}}
.animated-summary{animation:summaryV7In 19s infinite!important;}
.animated-summary button:first-of-type{animation:downloadPulse 19s infinite 15.1s!important;}
.final-overlay{animation:finalV7Reveal 19s infinite!important;}
@keyframes summaryV7In{0%,76%{opacity:.35;transform:translateX(10px)}81%,89%{opacity:1;transform:translateX(0)}96%,100%{opacity:.35;transform:translateX(10px)}}
@keyframes finalV7Reveal{0%,78%{opacity:0;transform:scale(.985)}82%,97%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.995)}}

.option-cycle::after{animation:optionV7Text 19s infinite!important;}
@keyframes optionV7Text{
  0%,37%{content:'36" shelf / 12" product'}
  38%,100%{content:'24" shelf / 8" product'}
}


/* v8 homepage copy and explanation section */
.demo-explainer{background:#fff;padding-top:64px;padding-bottom:66px;}
.explainer-heading{max-width:860px;margin:0 auto 30px;text-align:center;}
.explainer-heading h2{margin-bottom:14px;}
.explainer-heading p:last-child{max-width:780px;margin:0 auto;color:#566579;font-size:17px;}
.explainer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1180px;margin:0 auto;}
.explainer-grid article{background:linear-gradient(180deg,#ffffff,#f7faff);border:1px solid #dfe8f3;border-radius:14px;padding:26px;box-shadow:0 14px 36px rgba(9,24,46,.06);}
.explainer-grid span{display:inline-flex;width:42px;height:42px;align-items:center;justify-content:center;border-radius:12px;background:#eaf2ff;color:var(--blue);font-weight:900;margin-bottom:12px;}
.explainer-grid h3{font-size:19px;margin:0 0 9px;color:var(--navy);}
.explainer-grid p{margin:0;color:#5d6878;font-size:14px;}
.card-grid{grid-template-columns:repeat(5,minmax(0,1fr));}
@media(max-width:1050px){.explainer-grid{grid-template-columns:1fr}.demo-explainer{padding:45px 28px}.card-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.card-grid{grid-template-columns:1fr}}


/* v9 existing website and budget message */
.fit-section{background:linear-gradient(180deg,#f8fbff,#ffffff);display:grid;grid-template-columns:38% 62%;gap:30px;align-items:stretch;border-top:1px solid #edf2f8;border-bottom:1px solid #edf2f8;}
.fit-copy{background:#fff;border:1px solid #dfe8f3;border-radius:16px;padding:32px;box-shadow:0 14px 38px rgba(9,24,46,.06);}
.fit-copy h2{text-align:left;margin-bottom:16px;font-size:32px;}
.fit-copy p:last-child{color:#566579;font-size:16px;margin-bottom:0;}
.fit-points{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.fit-points article{background:#081426;color:#fff;border-radius:16px;padding:26px;box-shadow:0 16px 38px rgba(9,24,46,.12);}
.fit-points article:nth-child(2){background:#0c1d35;}
.fit-points article:nth-child(3){background:#123158;}
.fit-points strong{display:block;font-size:18px;line-height:1.2;margin-bottom:10px;}
.fit-points p{margin:0;color:#d7e2f0;font-size:14px;}
@media(max-width:1050px){.fit-section{grid-template-columns:1fr}.fit-points{grid-template-columns:1fr}.fit-copy h2{text-align:left}}

/* v10 responsive polish pass - keep approved v7 hero animation intact on desktop */
html{scroll-behavior:smooth;}
img,svg,video{max-width:100%;height:auto;}
body{overflow-x:hidden;}

@media(max-width:1280px){
  .site-header{padding:0 28px;gap:22px;}
  .brand{min-width:260px;}
  .nav{gap:20px;font-size:12px;}
  .header-cta{padding:13px 18px;white-space:nowrap;}
  .hero{grid-template-columns:40% 60%;}
  .hero-copy{padding:58px 22px 38px 48px;}
  .hero h1{font-size:50px;}
  .hero-visual{padding-right:22px;}
  .laptop{width:min(790px,100%);}
  .section{padding-left:48px;padding-right:48px;}
  .industries,.cta-section{margin-left:48px;margin-right:48px;}
}

@media(max-width:1100px){
  .site-header{height:auto;display:grid;grid-template-columns:1fr auto;gap:14px;padding:16px 24px;}
  .brand{min-width:0;}
  .nav{grid-column:1 / -1;order:3;width:100%;justify-content:flex-start;gap:18px;overflow-x:auto;padding:8px 0 2px;-webkit-overflow-scrolling:touch;}
  .nav a{white-space:nowrap;}
  .header-cta{justify-self:end;}
  .hero{grid-template-columns:1fr;min-height:auto;}
  .hero-copy{padding:46px 32px 24px;text-align:left;}
  .hero h1{font-size:46px;max-width:760px;}
  .hero-lede{max-width:760px;}
  .hero-visual{padding:14px 32px 54px;justify-content:center;}
  .laptop{width:min(900px,100%);}
  .process-strip{grid-template-columns:repeat(2,1fr);padding:28px 32px;gap:18px;}
  .process-strip div{margin:0;}
  .demo-section,.split-section{grid-template-columns:1fr;}
  .demo-section h2,.split-section h2{text-align:center;}
  .demo-copy{text-align:center;max-width:820px;margin:0 auto;}
  .demo-copy ul{text-align:left;display:inline-block;}
  .video-card,.catalog-card{max-width:900px;margin:0 auto;width:100%;}
  .catalog-grid{grid-template-columns:repeat(3,1fr);}
  .cta-section{align-items:flex-start;gap:24px;}
}

@media(max-width:820px){
  .site-header{grid-template-columns:1fr;}
  .header-cta{justify-self:stretch;text-align:center;width:100%;}
  .brand-mark{width:48px;height:48px;}
  .brand-text strong{font-size:22px;letter-spacing:4px;}
  .brand-text em{letter-spacing:6px;}
  .brand-text small{font-size:11px;}
  .hero-copy{padding:38px 22px 20px;}
  .eyebrow{font-size:12px;letter-spacing:.16em;}
  .hero h1{font-size:40px;letter-spacing:.015em;}
  .hero-lede{font-size:16px;}
  .hero-actions{gap:12px;flex-wrap:wrap;}
  .hero-actions .button{flex:1 1 245px;}
  .trust-row{gap:12px 18px;}
  .hero-visual{padding:6px 18px 42px;}
  .laptop{border-radius:16px;padding:10px 10px 18px;}
  .laptop:after{left:-28px;right:-28px;height:13px;bottom:-13px;}
  .browser-bar{height:28px;}
  .config-app.animated-demo{grid-template-columns:145px minmax(330px,1fr) 122px;gap:8px;padding:10px;overflow:hidden;min-height:360px;}
  .config-panel,.summary-panel{padding:10px;font-size:10px;}
  .segmented span{padding:6px 7px;}
  .product-chips{gap:3px;}
  .product-chips span{font-size:8px;padding:5px 6px;}
  .wall-demo.animated-wall{min-height:310px;}
  .section{padding:42px 22px;}
  .section h2{font-size:30px;}
  .explainer-heading p:last-child{font-size:16px;}
  .card-grid{grid-template-columns:1fr 1fr;gap:14px;}
  .card{padding:22px;}
  .fit-section{padding-top:42px;padding-bottom:42px;}
  .fit-copy{padding:26px;}
  .fit-copy h2{font-size:28px;}
  .industries{margin:0 22px 32px;padding:20px;}
  .cta-section{margin:0 22px 42px;padding:32px 26px;display:block;}
  .cta-section .button-light{margin-top:22px;width:100%;}
  .footer{padding:22px;}
}

@media(max-width:650px){
  .site-header{position:relative;padding:14px 16px;}
  .brand{gap:10px;}
  .brand-mark{width:42px;height:42px;border-width:3px;}
  .brand-mark span{left:8px;bottom:5px;width:27px;height:27px;}
  .brand-text strong{font-size:19px;letter-spacing:3px;}
  .brand-text em{font-size:11px;letter-spacing:5px;}
  .brand-text small{font-size:10px;}
  .nav{gap:16px;font-size:11px;border-top:1px solid #edf1f7;margin-top:2px;padding-top:12px;}
  .button{width:100%;padding:14px 16px;font-size:12px;}
  .hero{background:linear-gradient(180deg,#f9fbfe 0,#eef5fd 100%);}
  .hero-copy{padding:34px 18px 18px;}
  .hero h1{font-size:34px;line-height:1.06;}
  .hero-lede{font-size:15.5px;}
  .hero-actions{flex-direction:column;margin:24px 0 20px;}
  .hero-actions .button{flex:auto;}
  .trust-row{display:grid;grid-template-columns:1fr;gap:9px;font-size:13px;}
  .hero-visual{padding:0 14px 36px;}
  .laptop{padding:8px 8px 16px;border-radius:14px;box-shadow:0 18px 46px rgba(9,24,46,.18);}
  .laptop:after{left:12%;right:12%;height:10px;bottom:-10px;}
  .browser-bar strong{font-size:8px;letter-spacing:.08em;}
  .config-app.animated-demo{display:grid;grid-template-columns:1fr!important;min-height:auto;padding:8px;background:#f5f7fb;}
  .config-panel.animated-panel{display:block;order:1;}
  .config-panel.animated-panel label:nth-of-type(n+3),
  .config-panel.animated-panel .product-chips{display:none;}
  .config-panel.animated-panel .select-shelf{font-size:10px;}
  .config-panel.animated-panel button{margin-top:8px;}
  .wall-demo.animated-wall{order:2;min-height:300px;max-height:300px;width:100%;}
  .summary-panel.animated-summary{display:grid;grid-template-columns:1fr 1fr;gap:3px 10px;order:3;opacity:1!important;transform:none!important;animation:none!important;}
  .summary-panel.animated-summary b{grid-column:1 / -1;margin-bottom:4px;}
  .summary-panel.animated-summary p,.summary-panel.animated-summary strong{margin:0;}
  .summary-panel.animated-summary hr{display:none;}
  .summary-panel.animated-summary .price{font-size:18px;}
  .summary-panel.animated-summary button{grid-column:1 / -1;margin-top:8px;}
  .summary-panel.animated-summary .pdf-button{display:none;}
  .demo-cursor,.hero-demo-caption,.final-overlay{display:none!important;}
  .process-strip{grid-template-columns:1fr;padding:24px 18px;gap:14px;}
  .process-strip div{grid-template-columns:48px 1fr;}
  .process-strip span{width:42px;height:42px;}
  .section{padding:38px 18px;}
  .section h2{font-size:27px;line-height:1.16;}
  .explainer-grid,.fit-points,.card-grid{grid-template-columns:1fr!important;}
  .fit-copy{padding:22px;}
  .fit-copy h2{font-size:26px;}
  .video-mockup{height:240px;border-width:6px;}
  .mini-wall{left:24px;right:24px;top:46px;bottom:42px;}
  .catalog-grid{grid-template-columns:1fr;}
  .catalog-toolbar{gap:12px;align-items:flex-start;flex-direction:column;}
  .catalog-toolbar button{width:100%;}
  .industries{margin:0 18px 30px;padding:18px;}
  .industries div{justify-content:flex-start;}
  .industries span{font-size:12px;}
  .cta-section{margin:0 18px 34px;padding:28px 22px;}
  .cta-section h2{font-size:25px;}
  .footer{font-size:13px;}
}

@media(max-width:430px){
  .hero h1{font-size:31px;}
  .hero-lede{font-size:15px;}
  .config-app.animated-demo{padding:7px;}
  .config-panel.animated-panel{font-size:9px;}
  .wall-demo.animated-wall{min-height:270px;max-height:270px;}
  .animated-wall .wall-grid{background:repeating-linear-gradient(0deg,#f9fbfd 0,#f9fbfd 9px,#dfe7f0 10px,#dfe7f0 12px)!important;}
  .animated-wall .shelf span{font-size:6px!important;padding:2px 4px!important;}
  .section h2{font-size:25px;}
  .card h3{font-size:17px;}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important;}
}

/* v11 responsive animation layer pass
   Keep the approved desktop animation intact. At tablet/phone widths, rebuild the shelf layer
   with device-specific shelf sizes and positions so it stays centered, clear of the cabinet,
   and fully inside the laptop screen. */
@media(max-width:820px){
  .wall-demo.animated-wall{
    min-height:340px!important;
    max-height:none!important;
  }
  .animated-wall .cabinet{
    left:16%!important;
    right:8%!important;
    bottom:12px!important;
    height:48px!important;
  }
  .animated-wall .shelf-wide{--shelf-w:122px!important;}
  .animated-wall .shelf-medium{--shelf-w:84px!important;}
  .animated-wall .prod-8{--prod-h:24px!important;}
  .animated-wall .prod-10{--prod-h:29px!important;}
  .animated-wall .prod-12{--prod-h:34px!important;}
  .animated-wall .shelf span{
    font-size:6.2px!important;
    padding:2px 4px!important;
    max-width:calc(var(--shelf-w) - 10px)!important;
  }

  /* Center column: five 36-inch shelves, scaled and centered. */
  .animated-wall .shelf-1{left:calc(50% - 61px)!important;top:22px!important;}
  .animated-wall .shelf-2{left:calc(50% - 61px)!important;top:70px!important;}
  .animated-wall .shelf-3{left:calc(50% - 61px)!important;top:118px!important;}
  .animated-wall .shelf-4{left:calc(50% - 61px)!important;top:166px!important;}
  .animated-wall .shelf-11{left:calc(50% - 61px)!important;top:214px!important;}

  /* Side columns: four 24-inch shelves each, brought inward so nothing clips. */
  .animated-wall .shelf-5{left:calc(50% + 70px)!important;top:70px!important;}
  .animated-wall .shelf-6{left:calc(50% + 70px)!important;top:118px!important;}
  .animated-wall .shelf-7{left:calc(50% + 70px)!important;top:166px!important;}
  .animated-wall .shelf-12{left:calc(50% + 70px)!important;top:214px!important;}

  .animated-wall .shelf-8{left:calc(50% - 154px)!important;top:70px!important;}
  .animated-wall .shelf-9{left:calc(50% - 154px)!important;top:118px!important;}
  .animated-wall .shelf-10{left:calc(50% - 154px)!important;top:166px!important;}
  .animated-wall .shelf-13{left:calc(50% - 154px)!important;top:214px!important;}

  .demo-cursor{animation:cursorV11TabletBuild 19s infinite!important;}
  @keyframes cursorV11TabletBuild{
    0%,4%{opacity:0;left:50%;top:45px}
    7%{opacity:1;left:50%;top:48px}
    13%{left:50%;top:96px}
    19%{left:50%;top:144px}
    25%{left:50%;top:192px}
    31%{left:50%;top:240px}
    42%{left:calc(50% + 112px);top:96px}
    48%{left:calc(50% + 112px);top:144px}
    54%{left:calc(50% + 112px);top:192px}
    60%{left:calc(50% + 112px);top:240px}
    67%{left:calc(50% - 112px);top:96px}
    72%{left:calc(50% - 112px);top:144px}
    77%{left:calc(50% - 112px);top:192px}
    82%{left:calc(50% - 112px);top:240px}
    88%,100%{opacity:0;left:50%;top:270px}
  }
}

@media(max-width:650px){
  .wall-demo.animated-wall{
    min-height:340px!important;
    max-height:340px!important;
  }
  .animated-wall .cabinet{
    left:14%!important;
    right:8%!important;
    bottom:12px!important;
    height:46px!important;
  }
  .animated-wall .shelf-wide{--shelf-w:112px!important;}
  .animated-wall .shelf-medium{--shelf-w:78px!important;}
  .animated-wall .prod-8{--prod-h:22px!important;}
  .animated-wall .prod-10{--prod-h:27px!important;}
  .animated-wall .prod-12{--prod-h:32px!important;}
  .animated-wall .shelf span{font-size:5.8px!important;}

  .animated-wall .shelf-1{left:calc(50% - 56px)!important;top:24px!important;}
  .animated-wall .shelf-2{left:calc(50% - 56px)!important;top:72px!important;}
  .animated-wall .shelf-3{left:calc(50% - 56px)!important;top:120px!important;}
  .animated-wall .shelf-4{left:calc(50% - 56px)!important;top:168px!important;}
  .animated-wall .shelf-11{left:calc(50% - 56px)!important;top:216px!important;}

  .animated-wall .shelf-5{left:calc(50% + 65px)!important;top:72px!important;}
  .animated-wall .shelf-6{left:calc(50% + 65px)!important;top:120px!important;}
  .animated-wall .shelf-7{left:calc(50% + 65px)!important;top:168px!important;}
  .animated-wall .shelf-12{left:calc(50% + 65px)!important;top:216px!important;}

  .animated-wall .shelf-8{left:calc(50% - 143px)!important;top:72px!important;}
  .animated-wall .shelf-9{left:calc(50% - 143px)!important;top:120px!important;}
  .animated-wall .shelf-10{left:calc(50% - 143px)!important;top:168px!important;}
  .animated-wall .shelf-13{left:calc(50% - 143px)!important;top:216px!important;}
}

@media(max-width:430px){
  .wall-demo.animated-wall{
    min-height:320px!important;
    max-height:320px!important;
  }
  .animated-wall .cabinet{
    left:13%!important;
    right:7%!important;
    bottom:10px!important;
    height:42px!important;
  }
  .animated-wall .shelf-wide{--shelf-w:100px!important;}
  .animated-wall .shelf-medium{--shelf-w:70px!important;}
  .animated-wall .prod-8{--prod-h:20px!important;}
  .animated-wall .prod-10{--prod-h:24px!important;}
  .animated-wall .prod-12{--prod-h:28px!important;}
  .animated-wall .shelf span{
    font-size:5.2px!important;
    padding:2px 3px!important;
    max-width:calc(var(--shelf-w) - 8px)!important;
  }
  .animated-wall .shelf i{height:var(--prod-h)!important;}

  .animated-wall .shelf-1{left:calc(50% - 50px)!important;top:22px!important;}
  .animated-wall .shelf-2{left:calc(50% - 50px)!important;top:66px!important;}
  .animated-wall .shelf-3{left:calc(50% - 50px)!important;top:110px!important;}
  .animated-wall .shelf-4{left:calc(50% - 50px)!important;top:154px!important;}
  .animated-wall .shelf-11{left:calc(50% - 50px)!important;top:198px!important;}

  .animated-wall .shelf-5{left:calc(50% + 58px)!important;top:66px!important;}
  .animated-wall .shelf-6{left:calc(50% + 58px)!important;top:110px!important;}
  .animated-wall .shelf-7{left:calc(50% + 58px)!important;top:154px!important;}
  .animated-wall .shelf-12{left:calc(50% + 58px)!important;top:198px!important;}

  .animated-wall .shelf-8{left:calc(50% - 128px)!important;top:66px!important;}
  .animated-wall .shelf-9{left:calc(50% - 128px)!important;top:110px!important;}
  .animated-wall .shelf-10{left:calc(50% - 128px)!important;top:154px!important;}
  .animated-wall .shelf-13{left:calc(50% - 128px)!important;top:198px!important;}
}

@media(max-width:360px){
  .wall-demo.animated-wall{min-height:305px!important;max-height:305px!important;}
  .animated-wall .shelf-wide{--shelf-w:92px!important;}
  .animated-wall .shelf-medium{--shelf-w:64px!important;}
  .animated-wall .shelf-1,.animated-wall .shelf-2,.animated-wall .shelf-3,.animated-wall .shelf-4,.animated-wall .shelf-11{left:calc(50% - 46px)!important;}
  .animated-wall .shelf-5,.animated-wall .shelf-6,.animated-wall .shelf-7,.animated-wall .shelf-12{left:calc(50% + 53px)!important;}
  .animated-wall .shelf-8,.animated-wall .shelf-9,.animated-wall .shelf-10,.animated-wall .shelf-13{left:calc(50% - 117px)!important;}
}

/* v12 laptop breakpoint fix
   The 1366px laptop preview was still using the full desktop laptop internals, which made
   the wall area too narrow and pushed/clipped the shelf layout. This breakpoint keeps the
   desktop two-column hero, but gives the configurator screen more usable wall width by
   narrowing the side panels and slightly reducing the hero headline. */
@media (min-width:1101px) and (max-width:1450px){
  .hero{grid-template-columns:38% 62%;}
  .hero-copy{padding:54px 18px 36px 44px;}
  .hero h1{font-size:46px;line-height:1.04;letter-spacing:.025em;}
  .hero-lede{font-size:16.5px;max-width:500px;}
  .hero-actions{gap:14px;}
  .hero-actions .button{padding:13px 18px;font-size:12px;}
  .trust-row{gap:14px;font-size:12px;}
  .hero-visual{padding:30px 20px 40px 0;justify-content:center;}
  .laptop{width:min(940px,100%);}
  .config-app.animated-demo{grid-template-columns:132px minmax(470px,1fr) 118px;gap:10px;padding:10px;min-height:355px;}
  .config-panel,.summary-panel{padding:10px;font-size:10.5px;}
  .config-panel b,.summary-panel b{font-size:9.5px;}
  .segmented span{padding:6px 7px;}
  .config-panel button,.summary-panel button{font-size:9px;padding:9px;}
  .summary-panel .price{font-size:19px;}
  .product-chips{gap:3px;}
  .product-chips span{font-size:8px;padding:5px 6px;}
  .wall-demo.animated-wall{min-height:330px;}
}

/* Mid-size laptop/tablet landscape: if the browser is wide enough to keep two columns but
   the configurator screen becomes compact, scale the shelf pattern instead of letting the
   right column drift into the summary panel. */
@media (min-width:821px) and (max-width:1180px){
  .animated-wall .shelf-wide{--shelf-w:136px!important;}
  .animated-wall .shelf-medium{--shelf-w:94px!important;}
  .animated-wall .prod-8{--prod-h:26px!important;}
  .animated-wall .prod-10{--prod-h:31px!important;}
  .animated-wall .prod-12{--prod-h:35px!important;}
  .animated-wall .shelf span{font-size:6.4px!important;max-width:calc(var(--shelf-w) - 10px)!important;}

  .animated-wall .shelf-1{left:calc(50% - 68px)!important;top:22px!important;}
  .animated-wall .shelf-2{left:calc(50% - 68px)!important;top:70px!important;}
  .animated-wall .shelf-3{left:calc(50% - 68px)!important;top:118px!important;}
  .animated-wall .shelf-4{left:calc(50% - 68px)!important;top:166px!important;}
  .animated-wall .shelf-11{left:calc(50% - 68px)!important;top:214px!important;}

  .animated-wall .shelf-5{left:calc(50% + 82px)!important;top:70px!important;}
  .animated-wall .shelf-6{left:calc(50% + 82px)!important;top:118px!important;}
  .animated-wall .shelf-7{left:calc(50% + 82px)!important;top:166px!important;}
  .animated-wall .shelf-12{left:calc(50% + 82px)!important;top:214px!important;}

  .animated-wall .shelf-8{left:calc(50% - 184px)!important;top:70px!important;}
  .animated-wall .shelf-9{left:calc(50% - 184px)!important;top:118px!important;}
  .animated-wall .shelf-10{left:calc(50% - 184px)!important;top:166px!important;}
  .animated-wall .shelf-13{left:calc(50% - 184px)!important;top:214px!important;}

  .animated-wall .cabinet{left:18%!important;right:9%!important;bottom:10px!important;height:46px!important;}
}

/* Keep the phone color/spacing closer to the tablet version instead of looking like a
   completely different section. */
@media(max-width:650px){
  .hero{background:radial-gradient(circle at 50% 18%,#fff 0,#f6f9fd 42%,#eaf1fa 74%,#dce9f8 100%);}
}

/* v13 cabinet alignment fix
   The shelf columns were good, but the base cabinet was using uneven left/right offsets
   at several breakpoints. This keeps the cabinet centered under the 36-inch center column
   so the fixture reads as one intentional display on desktop, laptop, tablet, and phone. */
.animated-wall .cabinet{
  left:15%!important;
  right:15%!important;
}

@media (min-width:1101px) and (max-width:1450px){
  .animated-wall .cabinet{
    left:15%!important;
    right:15%!important;
  }
}

@media (min-width:821px) and (max-width:1180px){
  .animated-wall .cabinet{
    left:15%!important;
    right:15%!important;
  }
}

@media(max-width:820px){
  .animated-wall .cabinet{
    left:13%!important;
    right:13%!important;
  }
}

@media(max-width:650px){
  .animated-wall .cabinet{
    left:11%!important;
    right:11%!important;
  }
}

@media(max-width:430px){
  .animated-wall .cabinet{
    left:10%!important;
    right:10%!important;
  }
}

/* v14 tablet/phone animation cleanup
   Keep the desktop/laptop composition, but treat portrait tablet and phone as their own
   layouts instead of squeezing the full three-panel configurator into a narrow laptop screen. */

/* Center the base cabinet using its own width instead of uneven left/right offsets. */
.animated-wall .cabinet{
  left:50%!important;
  right:auto!important;
  width:72%!important;
  max-width:430px!important;
  transform:translateX(-50%)!important;
}

@media (min-width:821px) and (max-width:1180px){
  .animated-wall .cabinet{
    left:50%!important;
    right:auto!important;
    width:70%!important;
    max-width:390px!important;
    transform:translateX(-50%)!important;
  }
}

/* Portrait tablet: stack the configurator internals so the wall animation has room.
   This is closer to how a real responsive tool would behave on an iPad portrait view. */
@media(max-width:820px){
  .hero-visual{padding-left:22px!important;padding-right:22px!important;}
  .laptop{width:100%!important;max-width:760px!important;margin:0 auto;}
  .config-app.animated-demo{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    min-height:auto!important;
    overflow:visible!important;
  }
  .config-panel.animated-panel{order:1;}
  .wall-demo.animated-wall{
    order:2;
    width:100%!important;
    min-height:355px!important;
    max-height:none!important;
  }
  .summary-panel.animated-summary{
    order:3;
    opacity:1!important;
    transform:none!important;
    animation:none!important;
  }
  .summary-panel.animated-summary .pdf-button{display:none;}

  /* On smaller screens the final text overlay covers the layout more than it helps. */
  .final-overlay,.hero-demo-caption{display:none!important;}

  .animated-wall .cabinet{
    left:50%!important;
    right:auto!important;
    width:70%!important;
    max-width:400px!important;
    bottom:12px!important;
    transform:translateX(-50%)!important;
  }

  /* Center the shelf group and keep the side columns inside the visible wall. */
  .animated-wall .shelf-wide{--shelf-w:126px!important;}
  .animated-wall .shelf-medium{--shelf-w:88px!important;}
  .animated-wall .shelf-1{left:calc(50% - 63px)!important;top:24px!important;}
  .animated-wall .shelf-2{left:calc(50% - 63px)!important;top:75px!important;}
  .animated-wall .shelf-3{left:calc(50% - 63px)!important;top:126px!important;}
  .animated-wall .shelf-4{left:calc(50% - 63px)!important;top:177px!important;}
  .animated-wall .shelf-11{left:calc(50% - 63px)!important;top:228px!important;}

  .animated-wall .shelf-5{left:calc(50% + 76px)!important;top:75px!important;}
  .animated-wall .shelf-6{left:calc(50% + 76px)!important;top:126px!important;}
  .animated-wall .shelf-7{left:calc(50% + 76px)!important;top:177px!important;}
  .animated-wall .shelf-12{left:calc(50% + 76px)!important;top:228px!important;}

  .animated-wall .shelf-8{left:calc(50% - 164px)!important;top:75px!important;}
  .animated-wall .shelf-9{left:calc(50% - 164px)!important;top:126px!important;}
  .animated-wall .shelf-10{left:calc(50% - 164px)!important;top:177px!important;}
  .animated-wall .shelf-13{left:calc(50% - 164px)!important;top:228px!important;}
}

@media(max-width:650px){
  .hero-visual{padding-left:14px!important;padding-right:14px!important;}
  .laptop{border-radius:14px;}
  .wall-demo.animated-wall{min-height:340px!important;max-height:none!important;}
  .summary-panel.animated-summary{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:4px 12px!important;
  }
  .summary-panel.animated-summary b{grid-column:1 / -1;}
  .summary-panel.animated-summary button{grid-column:1 / -1;}
  .animated-wall .cabinet{width:72%!important;max-width:330px!important;bottom:10px!important;}
}

@media(max-width:430px){
  .wall-demo.animated-wall{min-height:325px!important;}
  .animated-wall .cabinet{width:72%!important;max-width:290px!important;bottom:10px!important;}
  .animated-wall .shelf-wide{--shelf-w:100px!important;}
  .animated-wall .shelf-medium{--shelf-w:70px!important;}

  .animated-wall .shelf-1{left:calc(50% - 50px)!important;top:22px!important;}
  .animated-wall .shelf-2{left:calc(50% - 50px)!important;top:66px!important;}
  .animated-wall .shelf-3{left:calc(50% - 50px)!important;top:110px!important;}
  .animated-wall .shelf-4{left:calc(50% - 50px)!important;top:154px!important;}
  .animated-wall .shelf-11{left:calc(50% - 50px)!important;top:198px!important;}

  .animated-wall .shelf-5{left:calc(50% + 58px)!important;top:66px!important;}
  .animated-wall .shelf-6{left:calc(50% + 58px)!important;top:110px!important;}
  .animated-wall .shelf-7{left:calc(50% + 58px)!important;top:154px!important;}
  .animated-wall .shelf-12{left:calc(50% + 58px)!important;top:198px!important;}

  .animated-wall .shelf-8{left:calc(50% - 128px)!important;top:66px!important;}
  .animated-wall .shelf-9{left:calc(50% - 128px)!important;top:110px!important;}
  .animated-wall .shelf-10{left:calc(50% - 128px)!important;top:154px!important;}
  .animated-wall .shelf-13{left:calc(50% - 128px)!important;top:198px!important;}
}

/* v15 final overlay and wide-desktop alignment cleanup
   Notes from device testing:
   - 1440 preview needed the shelf group nudged slightly right while keeping the cabinet centered.
   - The blue final overlay was appearing too strong and covering the layout. It now waits until the
     configuration is complete, sits above the shelves as a compact message, and stays readable.
   - Tablet and phone intentionally keep the overlay hidden so the small layout remains clean. */

@media (min-width:1400px) and (max-width:1600px){
  .animated-wall .shelf-1{left:204px!important;}
  .animated-wall .shelf-2{left:204px!important;}
  .animated-wall .shelf-3{left:204px!important;}
  .animated-wall .shelf-4{left:204px!important;}
  .animated-wall .shelf-11{left:204px!important;}

  .animated-wall .shelf-5{left:378px!important;}
  .animated-wall .shelf-6{left:378px!important;}
  .animated-wall .shelf-7{left:378px!important;}
  .animated-wall .shelf-12{left:378px!important;}

  .animated-wall .shelf-8{left:76px!important;}
  .animated-wall .shelf-9{left:76px!important;}
  .animated-wall .shelf-10{left:76px!important;}
  .animated-wall .shelf-13{left:76px!important;}

  .demo-cursor{animation:cursorV15WideBuild 19s infinite!important;}
  @keyframes cursorV15WideBuild{
    0%,4%{opacity:0;left:282px;top:48px}
    7%{opacity:1;left:282px;top:48px}
    13%{left:282px;top:98px}
    19%{left:282px;top:148px}
    25%{left:282px;top:198px}
    31%{left:282px;top:248px}
    42%{left:420px;top:98px}
    48%{left:420px;top:148px}
    54%{left:420px;top:198px}
    60%{left:420px;top:248px}
    67%{left:118px;top:98px}
    72%{left:118px;top:148px}
    77%{left:118px;top:198px}
    82%{left:118px;top:248px}
    88%,100%{opacity:0;left:282px;top:276px}
  }
}

@media (min-width:821px){
  .final-overlay{
    inset:auto 18% 62px 18%!important;
    min-height:74px!important;
    padding:16px 20px!important;
    border-radius:14px!important;
    background:linear-gradient(120deg,rgba(8,20,38,.94),rgba(21,84,201,.88))!important;
    box-shadow:0 18px 45px rgba(8,20,38,.28)!important;
    z-index:30!important;
    animation:finalV15Reveal 19s infinite!important;
  }
  .final-overlay strong{font-size:22px!important;line-height:1.1!important;letter-spacing:.07em!important;}
  .final-overlay span{font-size:12px!important;margin-top:6px!important;}

  @keyframes finalV15Reveal{
    0%,80%{opacity:0;transform:translateY(8px) scale(.985)}
    84%,97%{opacity:1;transform:translateY(0) scale(1)}
    100%{opacity:0;transform:translateY(4px) scale(.995)}
  }
}

@media(max-width:820px){
  .final-overlay{display:none!important;}
}

/* v16: restore the stronger full-screen final overlay and make it appear only after the layout is complete */
@media (min-width:821px){
  .config-app.animated-demo .final-overlay{
    display:flex!important;
    position:absolute!important;
    inset:12px!important;
    min-height:0!important;
    padding:28px!important;
    border-radius:8px!important;
    background:linear-gradient(120deg,rgba(8,20,38,.82),rgba(21,84,201,.70))!important;
    box-shadow:none!important;
    z-index:40!important;
    align-items:center!important;
    justify-content:center!important;
    flex-direction:column!important;
    text-align:center!important;
    color:#fff!important;
    pointer-events:none!important;
    animation:finalV16FullReveal 19s infinite!important;
  }
  .config-app.animated-demo .final-overlay strong{
    display:block!important;
    font-size:30px!important;
    line-height:1.15!important;
    letter-spacing:.12em!important;
    color:#fff!important;
    text-shadow:0 2px 12px rgba(0,0,0,.28)!important;
  }
  .config-app.animated-demo .final-overlay span{
    display:block!important;
    margin-top:12px!important;
    font-size:15px!important;
    font-weight:700!important;
    color:rgba(255,255,255,.92)!important;
    text-shadow:0 2px 10px rgba(0,0,0,.22)!important;
  }
  @keyframes finalV16FullReveal{
    0%,78%{opacity:0;transform:scale(1.005)}
    82%,97%{opacity:1;transform:scale(1)}
    100%{opacity:0;transform:scale(1.005)}
  }

  /* Hold the completed layout long enough for the overlay to appear over the finished configuration. */
  @keyframes shelfOne{0%,5%{opacity:0;transform:translateY(8px) scale(.98)}8%,96%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(3px) scale(.99)}}
  @keyframes shelfTwo{0%,11%{opacity:0;transform:translateY(8px) scale(.98)}14%,96%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(3px) scale(.99)}}
  @keyframes shelfThree{0%,17%{opacity:0;transform:translateY(8px) scale(.98)}20%,96%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(3px) scale(.99)}}
  @keyframes shelfFour{0%,23%{opacity:0;transform:translateY(8px) scale(.98)}26%,96%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(3px) scale(.99)}}
  @keyframes shelfEleven{0%,29%{opacity:0;transform:translateY(8px) scale(.98)}32%,96%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(3px) scale(.99)}}
  @keyframes shelfFive{0%,39%{opacity:0;transform:translateY(8px) scale(.98)}42%,96%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(3px) scale(.99)}}
  @keyframes shelfSix{0%,45%{opacity:0;transform:translateY(8px) scale(.98)}48%,96%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(3px) scale(.99)}}
  @keyframes shelfSeven{0%,51%{opacity:0;transform:translateY(8px) scale(.98)}54%,96%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(3px) scale(.99)}}
  @keyframes shelfTwelve{0%,57%{opacity:0;transform:translateY(8px) scale(.98)}60%,96%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(3px) scale(.99)}}
  @keyframes shelfEight{0%,64%{opacity:0;transform:translateY(8px) scale(.98)}67%,96%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(3px) scale(.99)}}
  @keyframes shelfNine{0%,69%{opacity:0;transform:translateY(8px) scale(.98)}72%,96%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(3px) scale(.99)}}
  @keyframes shelfTen{0%,74%{opacity:0;transform:translateY(8px) scale(.98)}77%,96%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(3px) scale(.99)}}
  @keyframes shelfThirteen{0%,78%{opacity:0;transform:translateY(8px) scale(.98)}81%,96%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(3px) scale(.99)}}
}

@media(max-width:820px){
  .config-app.animated-demo .final-overlay{display:none!important;}
}

/* v17 interactive landing-page configurator demo */
.interactive-demo-section{
  display:grid;
  grid-template-columns:1fr;
  gap:26px;
  align-items:start;
}
.interactive-demo-section .interactive-intro{
  max-width:960px;
  text-align:center;
  margin:0 auto;
}
.try-steps{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
.try-steps span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 13px;
  border:1px solid #dce5f0;
  border-radius:999px;
  background:#fff;
  color:#24344d;
  font-weight:900;
  font-size:13px;
  box-shadow:0 8px 24px rgba(8,20,38,.06);
}
.try-steps b{
  display:inline-grid;
  place-items:center;
  width:22px;
  height:22px;
  border-radius:999px;
  background:#1554c9;
  color:#fff;
  font-size:12px;
}
.try-demo{
  max-width:1180px;
  margin:0 auto;
  width:100%;
  border:1px solid #d8e2ef;
  border-radius:26px;
  background:linear-gradient(180deg,#ffffff,#f5f8fc);
  box-shadow:0 24px 70px rgba(8,20,38,.12);
  overflow:hidden;
}
.try-controls{
  display:grid;
  grid-template-columns:repeat(3,1fr) auto;
  gap:14px;
  padding:18px;
  background:#0b1d35;
  color:#fff;
}
.control-group label{
  display:block;
  margin-bottom:8px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#b8c7dc;
}
.demo-segments{
  display:flex;
  gap:6px;
  padding:5px;
  border-radius:14px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}
.demo-segments button,
.demo-action{
  appearance:none;
  border:0;
  border-radius:10px;
  cursor:pointer;
  font-family:inherit;
  font-weight:900;
}
.demo-segments button{
  flex:1;
  min-width:48px;
  padding:9px 10px;
  background:transparent;
  color:#dce8f8;
}
.demo-segments button.active{
  background:#fff;
  color:#0b1d35;
  box-shadow:0 8px 18px rgba(0,0,0,.16);
}
.control-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  min-width:265px;
  align-self:end;
}
.demo-action{
  padding:10px 11px;
  background:rgba(255,255,255,.12);
  color:#fff;
  border:1px solid rgba(255,255,255,.16);
}
.demo-action.primary{
  grid-column:1 / -1;
  background:#2d74ff;
  border-color:#2d74ff;
}
.try-workspace{
  display:grid;
  grid-template-columns:minmax(0,1fr) 285px;
  gap:20px;
  padding:22px;
}
.try-wall-wrap{
  min-width:0;
}
.wall-ruler{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-bottom:10px;
  color:#60708a;
  font-weight:800;
  font-size:13px;
}
.wall-ruler strong{
  color:#0b1d35;
  background:#eaf1fb;
  border:1px solid #d7e2f0;
  border-radius:999px;
  padding:6px 10px;
}
.try-wall{
  position:relative;
  min-height:500px;
  border-radius:18px;
  background:linear-gradient(180deg,#eef4fb,#f9fbfd);
  border:1px solid #d5e0ed;
  overflow:hidden;
  padding:18px 18px 82px;
}
.try-wall-active{
  position:relative;
  height:390px;
  margin:0 auto;
  border-radius:12px 12px 6px 6px;
  border:1px solid #c8d5e4;
  background:#f8fbfe;
  overflow:hidden;
  transition:width .2s ease;
  cursor:crosshair;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.try-demo[data-wall-ft="8"] .try-wall-active{width:72%;}
.try-demo[data-wall-ft="10"] .try-wall-active{width:86%;}
.try-demo[data-wall-ft="12"] .try-wall-active{width:100%;}
.try-grid{
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(0deg,#fbfdff 0,#fbfdff 11px,#dfe8f2 12px,#dfe8f2 14px),
    linear-gradient(90deg,rgba(21,84,201,.05),transparent 35%,transparent 65%,rgba(21,84,201,.04));
}
.try-cabinet{
  position:absolute;
  left:50%;
  bottom:18px;
  width:min(72%,520px);
  height:58px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,#111c2a,#07101d);
  border-radius:4px 4px 12px 12px;
  box-shadow:0 14px 28px rgba(8,20,38,.22);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
  padding:7px;
}
.try-cabinet span{
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01));
  border-radius:4px;
}
.empty-prompt{
  position:absolute;
  inset:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  flex-direction:column;
  gap:8px;
  border:2px dashed #b7c8dd;
  border-radius:14px;
  background:rgba(255,255,255,.62);
  color:#1d2c44;
  pointer-events:none;
}
.empty-prompt strong{font-size:20px;}
.empty-prompt span{max-width:420px;color:#5b6d85;font-weight:800;}
.try-shelf{
  position:absolute;
  appearance:none;
  border:0;
  background:transparent;
  cursor:pointer;
  padding:0;
  z-index:5;
  animation:tryShelfIn .18s ease-out;
}
@keyframes tryShelfIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.try-shelf::before{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:8px;
  border-radius:3px;
  background:linear-gradient(180deg,#5f6f85,#2f3d50);
  box-shadow:0 4px 10px rgba(8,20,38,.18);
}
.try-shelf::after{
  content:'';
  position:absolute;
  left:-4px;
  right:-4px;
  bottom:-4px;
  height:4px;
  border-radius:999px;
  background:rgba(8,20,38,.08);
}
.try-shelf.selected::before{
  outline:3px solid rgba(45,116,255,.25);
  outline-offset:5px;
}
.try-products{
  position:absolute;
  left:7px;
  right:7px;
  bottom:9px;
  height:var(--product-h);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:5px;
  align-items:end;
}
.try-products i{
  height:100%;
  border-radius:6px 6px 2px 2px;
  border:1px solid rgba(255,255,255,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}
.try-products i:nth-child(1){background:#5aa0d6;}
.try-products i:nth-child(2){background:#f0b544;}
.try-products i:nth-child(3){background:#58a574;}
.try-shelf.product-medium .try-products i:nth-child(1){background:#d26b5f;}
.try-shelf.product-medium .try-products i:nth-child(2){background:#7b8fd6;}
.try-shelf.product-medium .try-products i:nth-child(3){background:#f1d37a;}
.try-shelf.product-tall .try-products i:nth-child(1){background:#4f98b9;}
.try-shelf.product-tall .try-products i:nth-child(2){background:#df7b58;}
.try-shelf.product-tall .try-products i:nth-child(3){background:#94b86f;}
.try-shelf b{
  position:absolute;
  left:50%;
  bottom:calc(10px + var(--product-h) / 2);
  transform:translate(-50%,50%);
  z-index:8;
  width:max-content;
  max-width:calc(100% - 12px);
  padding:4px 7px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  color:#17263d;
  border:1px solid rgba(198,210,225,.92);
  font-size:10px;
  line-height:1;
  white-space:nowrap;
  box-shadow:0 6px 16px rgba(8,20,38,.12);
}
.try-summary{
  align-self:stretch;
  border:1px solid #dbe4ef;
  background:#fff;
  border-radius:18px;
  padding:20px;
  box-shadow:0 12px 34px rgba(8,20,38,.07);
}
.try-summary h3{
  margin:4px 0 16px;
  font-size:22px;
  color:#0b1d35;
}
.try-summary dl{margin:0 0 18px;}
.try-summary dl div{
  display:flex;
  justify-content:space-between;
  gap:16px;
  border-bottom:1px solid #edf2f7;
  padding:10px 0;
}
.try-summary dt{color:#60708a;font-weight:800;}
.try-summary dd{margin:0;color:#0b1d35;font-weight:1000;}
.demo-download{width:100%;justify-content:center;}
.micro-note{
  margin:14px 0 0;
  color:#60708a;
  font-size:12px;
  line-height:1.45;
}
.demo-guidance{
  margin:0 22px 22px;
  padding:14px 16px;
  border-radius:16px;
  background:#eaf2ff;
  color:#17345f;
  border:1px solid #cfe0ff;
  font-weight:850;
  line-height:1.45;
}
@media(max-width:980px){
  .try-controls{grid-template-columns:1fr 1fr;}
  .control-actions{grid-column:1 / -1;grid-template-columns:repeat(4,1fr);min-width:0;}
  .demo-action.primary{grid-column:auto;}
  .try-workspace{grid-template-columns:1fr;}
  .try-summary{display:grid;grid-template-columns:1fr;}
}
@media(max-width:650px){
  .try-controls{grid-template-columns:1fr;}
  .control-actions{grid-template-columns:1fr 1fr;}
  .demo-action.primary{grid-column:1 / -1;}
  .try-workspace{padding:14px;}
  .try-wall{min-height:430px;padding:12px 12px 72px;}
  .try-wall-active{height:330px;}
  .try-demo[data-wall-ft="8"] .try-wall-active,
  .try-demo[data-wall-ft="10"] .try-wall-active,
  .try-demo[data-wall-ft="12"] .try-wall-active{width:100%;}
  .empty-prompt{inset:16px;}
  .empty-prompt strong{font-size:17px;}
  .empty-prompt span{font-size:13px;}
  .try-shelf b{font-size:8px;padding:3px 5px;}
  .wall-ruler{align-items:flex-start;flex-direction:column;}
}

/* v18: working interactive demo + cleaner anchor behavior */
html{scroll-behavior:smooth;}
#demo{scroll-margin-top:96px;}
#try-demo-live{scroll-margin-top:100px;}
.try-wall-active{user-select:none;}
.try-shelf:focus-visible{outline:3px solid #2d74ff;outline-offset:4px;}
@media(max-width:980px){#demo{scroll-margin-top:135px;}}

/* v20 refined guided interactive demo */
.demo-guide-start{
  margin-top:20px;
}
.try-demo{position:relative;}
.demo-guide-panel{
  display:none;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:18px;
  align-items:center;
  padding:16px 18px;
  background:linear-gradient(180deg,#f8fbff,#edf4ff);
  border-bottom:1px solid #d6e4fb;
}
.demo-guide-panel:not([hidden]){display:grid;}
.demo-guide-copy .eyebrow{
  margin:0 0 5px;
  color:#1557d5;
}
.demo-guide-copy h3{
  margin:0 0 4px;
  color:#0b1d35;
  font-size:20px;
}
.demo-guide-copy p{
  margin:0;
  color:#3e516d;
  font-weight:800;
  line-height:1.45;
}
.demo-guide-progress{
  display:flex;
  align-items:center;
  gap:7px;
  color:#17345f;
  font-weight:900;
  white-space:nowrap;
}
.demo-guide-progress span{
  margin-right:4px;
  font-size:13px;
}
.demo-guide-progress i{
  width:9px;
  height:9px;
  border-radius:999px;
  background:#c6d6ee;
  display:block;
}
.demo-guide-progress i.active{background:#1557d5;}
.demo-guide-controls{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}
.demo-guide-controls button{
  appearance:none;
  border:1px solid #c8d8f2;
  background:#fff;
  color:#17345f;
  border-radius:999px;
  padding:8px 12px;
  font-family:inherit;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(8,20,38,.06);
}
.demo-guide-controls button[data-guide-control="next"],
.demo-guide-controls button[data-guide-control="restart"]{
  background:#1557d5;
  border-color:#1557d5;
  color:#fff;
}
.demo-guide-controls button:disabled{
  opacity:.45;
  cursor:not-allowed;
  box-shadow:none;
}
.guide-target,.guide-action{position:relative;}
.try-demo[data-guide-active="true"][data-guide-step="wall"] [data-guide="wall"],
.try-demo[data-guide-active="true"][data-guide-step="shelf"] [data-guide="shelf"],
.try-demo[data-guide-active="true"][data-guide-step="product"] [data-guide="product"],
.try-demo[data-guide-active="true"][data-guide-step="place"] [data-guide="start"],
.try-demo[data-guide-active="true"][data-guide-step="place"] [data-guide="add"],
.try-demo[data-guide-active="true"][data-guide-step="place"] [data-guide="wall-click"]{
  outline:3px solid rgba(31,94,214,.72);
  box-shadow:0 0 0 7px rgba(31,94,214,.14),0 14px 34px rgba(31,94,214,.12);
  border-radius:16px;
  z-index:4;
}
.try-demo[data-guide-active="true"][data-guide-step="place"] [data-guide="wall-click"]{
  animation:guideWallPulse 1.35s ease-in-out infinite;
}
.guide-target::after,.guide-action::after{
  content:attr(data-guide-label);
  position:absolute;
  top:-15px;
  left:16px;
  display:none;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:5px 12px;
  border-radius:999px;
  background:#1557d5;
  color:#fff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  box-shadow:0 10px 22px rgba(21,87,213,.25);
  white-space:nowrap;
  z-index:7;
  pointer-events:none;
}
.try-demo[data-guide-active="true"][data-guide-step="wall"] [data-guide="wall"]::after,
.try-demo[data-guide-active="true"][data-guide-step="shelf"] [data-guide="shelf"]::after,
.try-demo[data-guide-active="true"][data-guide-step="product"] [data-guide="product"]::after,
.try-demo[data-guide-active="true"][data-guide-step="place"] [data-guide="add"]::after,
.try-demo[data-guide-active="true"][data-guide-step="place"] [data-guide="wall-click"]::after{display:flex;}
.try-demo[data-guide-active="true"][data-guide-step="place"] [data-guide="wall-click"]::after{
  left:50%;
  transform:translateX(-50%);
  top:14px;
}
.try-demo[data-guide-active="true"][data-guide-step="place"] [data-guide="add"]::after{
  left:50%;
  transform:translateX(-50%);
}
@keyframes guideWallPulse{
  0%,100%{box-shadow:0 0 0 7px rgba(31,94,214,.12),0 12px 32px rgba(31,94,214,.1)}
  50%{box-shadow:0 0 0 11px rgba(31,94,214,.22),0 18px 42px rgba(31,94,214,.16)}
}
.try-steps span{transition:background .2s ease,border-color .2s ease,transform .2s ease;}
.demo-guidance{border-left:4px solid #1f5ed6;}
@media(max-width:900px){
  .demo-guide-panel{
    grid-template-columns:1fr;
    align-items:start;
  }
  .demo-guide-controls{justify-content:flex-start;}
}
@media(max-width:700px){
  .demo-guide-panel{
    padding:14px;
    gap:12px;
  }
  .demo-guide-copy h3{font-size:18px;}
  .demo-guide-copy p{font-size:14px;}
  .demo-guide-progress{
    flex-wrap:wrap;
  }
  .demo-guide-controls{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .demo-guide-controls button{
    border-radius:13px;
    padding:9px 10px;
  }
  .guide-target::after,.guide-action::after{font-size:10px;padding:4px 9px;top:-13px;left:10px;}
  .try-demo[data-guide-active="true"][data-guide-step="place"] [data-guide="wall-click"]::after{top:10px;}
}

/* v21 guided demo refinement: automatic guide entry, sticky controls, lower labels, and grid-aware placement cues */
#try-demo-live{scroll-margin-top:96px;}
.try-demo{overflow:visible;}
.try-controls{
  position:sticky;
  top:78px;
  z-index:45;
  box-shadow:0 16px 34px rgba(8,20,38,.22);
}
.control-group{
  padding-bottom:8px;
}
.try-demo[data-guide-active="true"][data-guide-step="wall"] [data-guide="wall"],
.try-demo[data-guide-active="true"][data-guide-step="shelf"] [data-guide="shelf"],
.try-demo[data-guide-active="true"][data-guide-step="product"] [data-guide="product"],
.try-demo[data-guide-active="true"][data-guide-step="place"] [data-guide="start"],
.try-demo[data-guide-active="true"][data-guide-step="place"] [data-guide="add"]{
  outline-offset:3px;
}
.guide-target::after,.guide-action::after{
  top:auto;
  bottom:-18px;
  left:50%;
  transform:translate(-50%,50%);
}
.try-demo[data-guide-active="true"][data-guide-step="place"] [data-guide="wall-click"]::after{
  top:auto;
  bottom:14px;
  left:50%;
  transform:translateX(-50%);
}
.try-demo[data-guide-active="true"][data-guide-step="place"] [data-guide="add"]::after{
  left:50%;
  transform:translate(-50%,50%);
}
.demo-guide-start{
  min-width:210px;
}
.try-grid{
  background:
    repeating-linear-gradient(0deg,#fbfdff 0,#fbfdff 15px,#dfe8f2 16px,#dfe8f2 18px),
    repeating-linear-gradient(90deg,rgba(21,84,201,.035) 0,rgba(21,84,201,.035) 3px,transparent 3px,transparent 32px),
    linear-gradient(90deg,rgba(21,84,201,.05),transparent 35%,transparent 65%,rgba(21,84,201,.04));
}
@media(max-width:1100px){
  .try-controls{top:118px;}
}
@media(max-width:700px){
  .try-controls{top:0;}
  .guide-target::after,.guide-action::after{top:auto;bottom:-15px;left:50%;transform:translate(-50%,50%);}
  .try-demo[data-guide-active="true"][data-guide-step="place"] [data-guide="wall-click"]::after{top:auto;bottom:10px;}
}
@media(max-width:650px){
  .try-controls{position:sticky;top:0;}
}

/* v22 guided demo direct entry + sticky guide/control bar */
#try-demo-live{scroll-margin-top:150px;}
#demo-guide-tools{scroll-margin-top:150px;}
.demo-sticky-tools{
  position:sticky;
  top:78px;
  z-index:80;
  border-radius:26px 26px 0 0;
  box-shadow:0 18px 40px rgba(8,20,38,.20);
}
.demo-sticky-tools .demo-guide-panel{
  border-radius:26px 26px 0 0;
}
.demo-sticky-tools .try-controls{
  position:relative;
  top:auto;
  z-index:1;
  box-shadow:none;
}
.demo-guide-start{display:none!important;}
.try-demo[data-guide-active="true"] .demo-sticky-tools{
  box-shadow:0 22px 46px rgba(8,20,38,.26);
}
@media(max-width:1100px){
  .demo-sticky-tools{top:118px;}
}
@media(max-width:700px){
  #try-demo-live,#demo-guide-tools{scroll-margin-top:10px;}
  .demo-sticky-tools{top:0;border-radius:18px 18px 0 0;}
  .demo-sticky-tools .demo-guide-panel{border-radius:18px 18px 0 0;}
}
@media(max-width:650px){
  .demo-sticky-tools{top:0;}
}

/* v23 compact guided demo view: keep the working v22 behavior, but make desktop preview fit better in one screen */
@media (min-width:981px){
  .demo-sticky-tools{
    top:78px;
  }
  .try-controls{
    grid-template-columns:minmax(180px,.85fr) minmax(180px,.85fr) minmax(180px,.85fr) minmax(430px,1.35fr);
    gap:12px;
    padding:14px 16px;
    align-items:end;
  }
  .control-group{
    padding-bottom:0;
  }
  .control-group label{
    margin-bottom:6px;
    font-size:11px;
  }
  .demo-segments{
    padding:4px;
    border-radius:12px;
  }
  .demo-segments button{
    padding:8px 8px;
  }
  .control-actions{
    grid-template-columns:1.15fr 1fr 1.15fr 1fr 1fr;
    gap:7px;
    min-width:0;
  }
  .demo-action,
  .demo-action.primary{
    grid-column:auto;
    padding:9px 8px;
    min-height:40px;
    font-size:12px;
    line-height:1.15;
  }
  .try-workspace{
    gap:16px;
    padding:18px 20px 16px;
    grid-template-columns:minmax(0,1fr) 270px;
  }
  .wall-ruler{
    margin-bottom:7px;
  }
  .try-wall{
    min-height:clamp(405px, calc(100vh - 318px), 500px);
    padding:14px 14px 70px;
  }
  .try-wall-active{
    height:clamp(330px, calc(100vh - 420px), 390px);
  }
  .try-cabinet{
    height:48px;
    bottom:14px;
    width:min(66%,470px);
    padding:6px;
  }
  .try-summary{
    padding:18px;
  }
  .try-summary h3{
    font-size:20px;
    margin-bottom:12px;
  }
  .try-summary dl{
    margin-bottom:14px;
  }
  .try-summary dl div{
    padding:8px 0;
  }
  .demo-download{
    padding:12px 16px;
  }
  .micro-note{
    font-size:12px;
    margin-top:12px;
  }
  .demo-guidance{
    margin:0 20px 18px;
    padding:12px 14px;
  }
}

@media (min-width:981px) and (max-width:1220px){
  .try-controls{
    grid-template-columns:repeat(3,minmax(165px,1fr));
  }
  .control-actions{
    grid-column:1 / -1;
    grid-template-columns:1.15fr 1fr 1.15fr 1fr 1fr;
  }
}

@media (min-width:981px) and (max-height:760px){
  .try-workspace{
    padding-top:14px;
  }
  .wall-ruler{
    font-size:12px;
    margin-bottom:5px;
  }
  .wall-ruler strong{
    padding:4px 9px;
  }
  .try-wall{
    min-height:clamp(390px, calc(100vh - 308px), 460px);
    padding:12px 12px 62px;
  }
  .try-wall-active{
    height:clamp(330px, calc(100vh - 400px), 370px);
  }
  .try-summary dl div{
    padding:7px 0;
  }
  .micro-note{
    line-height:1.35;
  }
}


/* v24 start position refinement: simple left / center / right placement without adding production-editor complexity */
@media (min-width:981px){
  .try-controls{
    grid-template-columns:minmax(145px,.75fr) minmax(160px,.78fr) minmax(165px,.78fr) minmax(190px,.9fr) minmax(390px,1.45fr);
  }
  .start-control .demo-segments button{
    min-width:52px;
  }
  .control-actions{
    grid-template-columns:1.08fr 1fr 1.12fr 1fr 1fr;
  }
  .try-demo[data-guide-active="true"][data-guide-step="place"] [data-guide="start"],
  .try-demo[data-guide-active="true"][data-guide-step="place"] [data-guide="add"]{
    outline:3px solid #2d74ff;
    outline-offset:3px;
  }
}
.try-demo[data-guide-active="true"][data-guide-step="place"] [data-guide="start"]::after{
  content:attr(data-guide-label);
  opacity:1;
  transform:translate(-50%,50%);
}
.try-demo[data-guide-active="true"][data-guide-step="place"] [data-guide="start"]{
  outline:3px solid #2d74ff;
  outline-offset:3px;
  border-radius:16px;
}
@media (min-width:981px) and (max-width:1220px){
  .try-controls{
    grid-template-columns:repeat(4,minmax(150px,1fr));
  }
  .control-actions{
    grid-column:1 / -1;
    grid-template-columns:1.08fr 1fr 1.12fr 1fr 1fr;
  }
}
@media(max-width:980px){
  .start-control{
    grid-column:auto;
  }
}

/* v26 compact guidance + manual placement clarity */
@media (min-width:981px){
  .demo-sticky-tools{
    top:78px;
  }
  .demo-sticky-tools .demo-guide-panel:not([hidden]){
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    gap:12px;
    align-items:center;
    padding:9px 14px;
  }
  .demo-guide-copy{
    min-width:0;
    display:flex;
    align-items:center;
    gap:10px;
  }
  .demo-guide-copy .eyebrow{
    margin:0;
    font-size:11px;
    letter-spacing:.18em;
    white-space:nowrap;
  }
  .demo-guide-copy h3{
    margin:0;
    font-size:16px;
    white-space:nowrap;
  }
  .demo-guide-copy p{
    margin:0;
    min-width:0;
    font-size:13px;
    line-height:1.25;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .demo-guide-progress{
    gap:6px;
  }
  .demo-guide-progress span{
    font-size:12px;
  }
  .demo-guide-progress i{
    width:8px;
    height:8px;
  }
  .demo-guide-controls{
    gap:6px;
  }
  .demo-guide-controls button{
    padding:7px 11px;
    font-size:12px;
  }
  .try-controls{
    padding:10px 14px;
    gap:10px;
  }
  .control-group label{
    margin-bottom:5px;
    font-size:10px;
  }
  .demo-segments button{
    padding:7px 8px;
  }
  .demo-action,
  .demo-action.primary{
    min-height:36px;
    padding:7px 8px;
    font-size:11px;
  }
  .try-workspace{
    padding:10px 18px 12px;
    gap:14px;
    grid-template-columns:minmax(0,1fr) 262px;
  }
  .wall-ruler{
    margin-bottom:5px;
    font-size:12px;
  }
  .wall-ruler strong{
    padding:4px 9px;
  }
  .try-wall{
    min-height:clamp(330px, calc(100vh - 360px), 430px);
    padding:10px 12px 58px;
  }
  .try-wall-active{
    height:clamp(260px, calc(100vh - 465px), 315px);
  }
  .try-cabinet{
    height:42px;
    bottom:10px;
    width:min(64%,440px);
  }
  .try-summary{
    padding:15px;
  }
  .try-summary h3{
    margin:2px 0 9px;
    font-size:18px;
  }
  .try-summary dl{
    margin-bottom:10px;
  }
  .try-summary dl div{
    padding:6px 0;
  }
  .demo-download{
    padding:10px 14px;
    font-size:12px;
  }
  .micro-note{
    margin-top:9px;
    line-height:1.3;
  }
  .demo-guidance{
    margin:0 18px 14px;
    padding:10px 13px;
    font-size:13px;
    line-height:1.35;
  }
}

@media (min-width:981px) and (max-height:780px){
  .demo-sticky-tools .demo-guide-panel:not([hidden]){
    padding:8px 13px;
  }
  .demo-guide-copy h3{
    font-size:15px;
  }
  .demo-guide-copy p{
    font-size:12px;
  }
  .try-controls{
    padding:9px 13px;
  }
  .try-wall{
    min-height:clamp(310px, calc(100vh - 370px), 390px);
  }
  .try-wall-active{
    height:clamp(240px, calc(100vh - 475px), 292px);
  }
  .try-summary .eyebrow{
    font-size:11px;
  }
  .try-summary h3{
    font-size:17px;
  }
}

.try-wall-active.manual-target{
  outline:3px solid rgba(45,116,255,.65);
  outline-offset:4px;
  box-shadow:0 0 0 8px rgba(45,116,255,.12), inset 0 1px 0 rgba(255,255,255,.8);
}
.try-wall-active.manual-target::after{
  content:'Click an open spot to place this shelf';
  position:absolute;
  left:50%;
  bottom:12px;
  transform:translateX(-50%);
  z-index:30;
  pointer-events:none;
  background:#1557d5;
  color:#fff;
  border-radius:999px;
  padding:8px 14px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.03em;
  box-shadow:0 12px 26px rgba(21,87,213,.28);
  white-space:nowrap;
}
@media(max-width:650px){
  .try-wall-active.manual-target::after{
    font-size:11px;
    padding:7px 11px;
    max-width:calc(100% - 24px);
    white-space:normal;
    text-align:center;
  }
}


/* v27 presentation-ready polish: messaging, CTA clarity, and project path sections */
.demo-note-card{
  max-width:760px;
  margin:18px auto 4px;
  padding:16px 18px;
  border:1px solid #dbe6f3;
  border-radius:16px;
  background:linear-gradient(180deg,#ffffff,#f7faff);
  box-shadow:0 12px 32px rgba(8,20,38,.06);
  text-align:left;
  display:grid;
  gap:5px;
}
.demo-note-card strong{
  color:#081426;
  font-size:15px;
}
.demo-note-card span{
  color:#58677b;
  font-size:14px;
}
.build-path-section{
  background:linear-gradient(180deg,#ffffff,#f6f9fe);
  border-top:1px solid #edf2f8;
  border-bottom:1px solid #edf2f8;
}
.build-path-heading{
  max-width:900px;
  margin:0 auto 30px;
  text-align:center;
}
.build-path-heading h2{
  margin-bottom:14px;
}
.build-path-heading p:last-child{
  max-width:820px;
  margin:0 auto;
  color:#566579;
  font-size:17px;
}
.build-path-grid{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}
.build-path-grid article{
  background:#ffffff;
  border:1px solid #dfe8f3;
  border-radius:16px;
  padding:24px;
  box-shadow:0 14px 36px rgba(9,24,46,.06);
}
.build-path-grid span{
  display:inline-grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:12px;
  background:#eaf2ff;
  color:#1554c9;
  font-weight:900;
  margin-bottom:14px;
}
.build-path-grid h3{
  margin:0 0 9px;
  color:#081426;
  font-size:18px;
}
.build-path-grid p{
  margin:0;
  color:#5d6878;
  font-size:14px;
}
.project-start-section{
  background:#fff;
  padding-top:58px;
  padding-bottom:58px;
}
.project-start-card{
  max-width:1180px;
  margin:0 auto;
  background:#081426;
  color:#fff;
  border-radius:20px;
  padding:34px;
  display:grid;
  grid-template-columns:42% 58%;
  gap:28px;
  align-items:center;
  box-shadow:0 24px 70px rgba(8,20,38,.14);
}
.project-start-card .eyebrow{
  color:#9cc2ff;
}
.project-start-card h2{
  color:#fff;
  text-align:left;
  margin-bottom:12px;
}
.project-start-card p{
  color:#d7e2f0;
  margin-bottom:0;
}
.project-start-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.project-start-list article{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  border-radius:16px;
  padding:24px;
}
.project-start-list strong{
  display:block;
  font-size:18px;
  margin-bottom:10px;
}
.project-start-list p{
  font-size:14px;
}
@media(max-width:1100px){
  .build-path-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .project-start-card{grid-template-columns:1fr;}
  .project-start-card h2{text-align:left;}
}
@media(max-width:650px){
  .demo-note-card{padding:14px 15px;margin-top:16px;}
  .build-path-heading p:last-child{font-size:16px;}
  .build-path-grid{grid-template-columns:1fr;}
  .project-start-section{padding-top:38px;padding-bottom:38px;}
  .project-start-card{padding:24px 20px;border-radius:18px;}
  .project-start-list{grid-template-columns:1fr;}
}


/* v28: progressive control unlocking */
.demo-segments.is-disabled{
  opacity:.54;
}
.demo-segments button:disabled,
.demo-action:disabled{
  cursor:not-allowed;
  opacity:.46;
  box-shadow:none;
}
.demo-segments button:disabled:hover,
.demo-action:disabled:hover{
  transform:none;
}
.demo-segments button:disabled{
  color:#9dafc5;
}
.demo-action.primary:disabled{
  background:rgba(255,255,255,.16);
  color:#c3d1e4;
  border-color:rgba(255,255,255,.16);
}


/* v31: completed customer-facing content below configurator */
.catalog-section{
  background:#fff;
  align-items:stretch;
}
.catalog-copy{
  align-self:center;
}
.catalog-copy h2{
  margin-bottom:16px;
}
.catalog-copy > p{
  color:#566579;
  font-size:17px;
  margin:0 0 22px;
}
.feature-list{
  display:grid;
  gap:14px;
  margin-top:24px;
}
.feature-list article{
  border:1px solid #dfe8f3;
  border-radius:14px;
  padding:18px 18px 16px;
  background:linear-gradient(180deg,#ffffff,#f8fbff);
}
.feature-list strong{
  display:block;
  color:#081426;
  font-size:16px;
  margin-bottom:6px;
}
.feature-list p{
  margin:0;
  color:#5d6878;
  font-size:14px;
}
.catalog-card-detailed{
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.catalog-card-detailed .catalog-toolbar{
  gap:18px;
}
.catalog-card-detailed .catalog-toolbar span{
  display:flex;
  align-items:center;
  min-height:42px;
  flex:1;
  border:1px solid #dce5f0;
  border-radius:999px;
  padding:0 18px;
  background:#f7faff;
  color:#5a6a80;
  font-size:14px;
}
.catalog-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.catalog-tabs span{
  border:1px solid #dfe8f3;
  background:#f8fbff;
  color:#3c4b61;
  border-radius:999px;
  padding:9px 14px;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.catalog-tabs .active{
  background:#eaf2ff;
  border-color:#bfd3f5;
  color:#1554c9;
}
.product-preview-grid{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:14px;
}
.catalog-product{
  min-height:150px;
  border:1px solid #dfe8f3;
  border-radius:16px;
  background:linear-gradient(145deg,#ffffff,#f4f8fe);
  padding:18px;
  position:relative;
  overflow:hidden;
}
.catalog-product:before{
  content:'';
  position:absolute;
  right:16px;
  top:16px;
  width:54px;
  height:42px;
  border-radius:12px;
  background:linear-gradient(135deg,#dfeaff,#ffffff);
  border:1px solid #d3e0f0;
}
.catalog-product.featured{
  grid-row:span 2;
  background:linear-gradient(145deg,#0b1b31,#1554c9);
  color:#fff;
}
.catalog-product.featured:before{
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.25);
}
.catalog-product small{
  display:block;
  color:#1554c9;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:11px;
  margin-bottom:12px;
}
.catalog-product.featured small{
  color:#9cc2ff;
}
.catalog-product strong{
  display:block;
  font-size:20px;
  color:#081426;
  margin-bottom:8px;
  max-width:75%;
}
.catalog-product.featured strong{
  color:#fff;
  font-size:25px;
  max-width:82%;
}
.catalog-product p{
  margin:0;
  color:#5d6878;
  font-size:14px;
  max-width:86%;
}
.catalog-product.featured p{
  color:#d7e5ff;
  font-size:15px;
}
.catalog-product em{
  display:inline-flex;
  margin-top:24px;
  font-style:normal;
  font-weight:900;
  color:#fff;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.24);
  border-radius:999px;
  padding:9px 13px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.quote-tray{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border:1px solid #dfe8f3;
  border-radius:16px;
  padding:16px;
  background:#f6f9fe;
}
.quote-tray span{
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:11px;
  font-weight:900;
  color:#657083;
}
.quote-tray strong{
  margin-right:auto;
  color:#081426;
}
.quote-tray button{
  border:0;
  background:#1554c9;
  color:#fff;
  border-radius:6px;
  padding:10px 14px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.catalog-features-section{
  background:linear-gradient(180deg,#f7faff,#ffffff);
  border-top:1px solid #edf2f8;
}
.compact-heading{
  margin-bottom:26px;
}
.compact-heading h2{
  margin-bottom:12px;
}
.feature-card-grid{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}
.feature-card-grid article{
  background:#fff;
  border:1px solid #dfe8f3;
  border-radius:16px;
  padding:24px;
  box-shadow:0 14px 36px rgba(9,24,46,.06);
}
.feature-card-grid span{
  display:inline-grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:12px;
  background:#eaf2ff;
  color:#1554c9;
  font-weight:900;
  margin-bottom:14px;
}
.feature-card-grid h3{
  margin:0 0 9px;
  color:#081426;
  font-size:18px;
}
.feature-card-grid p{
  margin:0;
  color:#5d6878;
  font-size:14px;
}
.project-start-card-v31{
  align-items:start;
}
.project-start-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:24px;
}
.project-start-actions .button{
  min-width:210px;
}
.dark-secondary{
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.48);
}
.project-start-list-v31{
  grid-template-columns:1fr 1fr;
}
.cta-section-v31{
  gap:28px;
}
.cta-section-v31 .eyebrow{
  color:#9cc2ff;
  margin:0 0 10px;
}
@media(max-width:1100px){
  .product-preview-grid,
  .feature-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:750px){
  .catalog-card-detailed{padding:18px;}
  .catalog-card-detailed .catalog-toolbar,
  .quote-tray{align-items:stretch;flex-direction:column;}
  .catalog-card-detailed .catalog-toolbar button,
  .quote-tray button{width:100%;}
  .product-preview-grid,
  .feature-card-grid,
  .project-start-list-v31{grid-template-columns:1fr;}
  .catalog-product.featured{grid-row:auto;}
  .catalog-product strong,
  .catalog-product.featured strong,
  .catalog-product p{max-width:100%;}
  .project-start-actions .button{width:100%;}
}


/* v33: stronger website content below the configurator */
.quote-flow-section{
  background:#fff;
  display:grid;
  grid-template-columns:48% 52%;
  gap:34px;
  align-items:center;
  border-top:1px solid #edf2f8;
}
.quote-flow-copy h2{
  text-align:left;
  margin-bottom:14px;
}
.quote-flow-copy > p{
  color:#566579;
  font-size:17px;
  margin:0 0 24px;
}
.quote-flow-steps{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.quote-flow-steps article{
  background:linear-gradient(180deg,#ffffff,#f8fbff);
  border:1px solid #dfe8f3;
  border-radius:16px;
  padding:18px;
}
.quote-flow-steps span{
  display:inline-grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:10px;
  background:#eaf2ff;
  color:#1554c9;
  font-size:12px;
  font-weight:900;
  margin-bottom:12px;
}
.quote-flow-steps strong{
  display:block;
  color:#081426;
  font-size:16px;
  margin-bottom:6px;
}
.quote-flow-steps p{
  margin:0;
  color:#5d6878;
  font-size:14px;
}
.request-preview-card{
  background:linear-gradient(145deg,#081426,#102646);
  color:#fff;
  border-radius:22px;
  padding:28px;
  box-shadow:0 24px 70px rgba(8,20,38,.18);
  border:1px solid rgba(255,255,255,.12);
}
.request-preview-header{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center;
  padding-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,.16);
}
.request-preview-header span{
  text-transform:uppercase;
  letter-spacing:.16em;
  color:#9cc2ff;
  font-size:12px;
  font-weight:900;
}
.request-preview-header strong{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  padding:9px 13px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.request-preview-body{
  display:grid;
  gap:14px;
  margin:20px 0;
}
.request-preview-body article{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  padding:18px;
}
.request-preview-body small{
  display:block;
  color:#9cc2ff;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.12em;
  margin-bottom:8px;
}
.request-preview-body strong{
  display:block;
  font-size:20px;
  margin-bottom:5px;
}
.request-preview-body p{
  margin:0;
  color:#d7e2f0;
  font-size:14px;
}
.request-preview-footer{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.request-preview-footer span{
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.08);
  border-radius:999px;
  padding:9px 12px;
  color:#e7effb;
  font-size:12px;
  font-weight:800;
}
@media(max-width:1100px){
  .quote-flow-section{grid-template-columns:1fr;}
  .quote-flow-copy h2{text-align:center;}
  .quote-flow-copy > p{text-align:center;max-width:820px;margin-left:auto;margin-right:auto;}
}
@media(max-width:750px){
  .quote-flow-steps{grid-template-columns:1fr;}
  .request-preview-card{padding:22px 18px;border-radius:18px;}
  .request-preview-header{align-items:flex-start;flex-direction:column;}
}


/* v34: interactive website sections below the configurator */
.interactive-card{
  cursor:pointer;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease;
  outline:none;
}
.interactive-card:hover,
.interactive-card:focus-visible{
  transform:translateY(-2px);
  border-color:#a8c4f4;
  box-shadow:0 18px 44px rgba(21,84,201,.12);
}
.interactive-card.is-active{
  border-color:#1554c9;
  box-shadow:0 18px 48px rgba(21,84,201,.16);
}
.interactive-detail{
  max-width:1180px;
  margin:18px auto 0;
  border:1px solid #cfe0fa;
  border-radius:18px;
  background:linear-gradient(135deg,#f8fbff,#ffffff);
  padding:22px 24px;
  box-shadow:0 14px 36px rgba(9,24,46,.06);
}
.interactive-detail h3,
.project-step-note h3{
  margin:2px 0 8px;
  color:#081426;
  font-size:20px;
}
.interactive-detail p:last-child,
.project-step-note p:last-child{
  margin:0;
  color:#566579;
}
.mini-label{
  margin:0 0 6px;
  color:#1554c9;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.16em;
}
.catalog-search-pill{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-height:42px;
  flex:1;
  border:1px solid #dce5f0;
  border-radius:999px;
  padding:0 18px;
  background:#f7faff;
  color:#66778d;
  font-size:14px;
  text-align:left;
}
.catalog-search-pill:hover,
.catalog-search-pill:focus-visible{
  border-color:#a8c4f4;
  box-shadow:0 0 0 4px rgba(21,84,201,.08);
}
.catalog-tabs button{
  border:1px solid #dfe8f3;
  background:#f8fbff;
  color:#3c4b61;
  border-radius:999px;
  padding:9px 14px;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  cursor:pointer;
}
.catalog-tabs button.active,
.catalog-tabs button:hover,
.catalog-tabs button:focus-visible{
  background:#eaf2ff;
  border-color:#bfd3f5;
  color:#1554c9;
}
.catalog-product.is-selected{
  border-color:#1554c9;
  box-shadow:0 18px 44px rgba(21,84,201,.14);
}
.catalog-product.is-selected:after{
  content:'Selected';
  position:absolute;
  right:16px;
  bottom:16px;
  background:#1554c9;
  color:#fff;
  border-radius:999px;
  padding:7px 10px;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.catalog-product.featured.is-selected:after{
  background:#fff;
  color:#1554c9;
}
.catalog-message{
  border:1px solid #dfe8f3;
  border-radius:14px;
  background:#fff;
  color:#566579;
  padding:13px 15px;
  font-size:14px;
}
.project-start-list-v31 .project-step-note{
  grid-column:1 / -1;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);
  border-radius:16px;
  padding:20px;
}
.project-step-note h3{
  color:#fff;
}
.project-step-note p:last-child{
  color:#d7e2f0;
}
.project-step-note .mini-label{
  color:#9cc2ff;
}
.project-start-card .interactive-card.is-active{
  border-color:rgba(156,194,255,.82);
  background:rgba(255,255,255,.14);
}
@media(max-width:750px){
  .interactive-detail{padding:18px;margin-top:14px;}
  .catalog-search-pill{width:100%;}
}

/* v35: keep the website header from covering content while visitors scroll */
html{
  scroll-behavior:smooth;
  scroll-padding-top:24px;
}
.site-header{
  position:relative;
  top:auto;
}
section[id]{
  scroll-margin-top:24px;
}

/* v36: clarify the sample digital catalog flow */
.catalog-intro-note{
  display:grid;
  gap:4px;
  border:1px solid #dfe8f3;
  border-radius:14px;
  background:#f7faff;
  padding:14px 16px;
  color:#566579;
  font-size:14px;
}
.catalog-intro-note strong{
  color:#081426;
  font-size:15px;
}
.catalog-card-detailed .catalog-toolbar{
  border-bottom:0;
  padding-bottom:0;
}
.catalog-product{
  cursor:pointer;
  padding-bottom:58px;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.catalog-product:hover,
.catalog-product:focus-visible{
  border-color:#9bbaf0;
  box-shadow:0 18px 44px rgba(21,84,201,.12);
  outline:none;
}
.catalog-product:before{
  content:'';
  display:flex;
  align-items:center;
  justify-content:center;
  right:16px;
  top:16px;
  width:44px;
  height:44px;
  border-radius:12px;
  background:#eef4ff;
  border:1px solid #cfddf2;
  color:#1554c9;
  font-size:22px;
  font-weight:900;
}
.catalog-product.is-selected:before{
  content:'✓';
  background:#1554c9;
  color:#fff;
  border-color:#1554c9;
}
.catalog-product.featured:before{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.28);
  color:#fff;
}
.catalog-product.featured.is-selected:before{
  background:#fff;
  color:#1554c9;
  border-color:#fff;
}
.catalog-product.is-selected:after{
  content:'In Quote';
}
.catalog-product em{
  position:absolute;
  left:18px;
  bottom:16px;
  margin-top:0;
  color:#1554c9;
  background:#eef4ff;
  border:1px solid #cfddf2;
}
.catalog-product.featured em{
  color:#fff;
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.24);
}
.catalog-product.is-selected em{
  color:#fff;
  background:#1554c9;
  border-color:#1554c9;
}
.catalog-product.featured.is-selected em{
  color:#1554c9;
  background:#fff;
  border-color:#fff;
}
.catalog-product.catalog-document{
  border-style:dashed;
}
.catalog-product.catalog-document:before{
  content:'PDF';
  font-size:11px;
  letter-spacing:.06em;
}
.catalog-product.catalog-document:after{
  content:'Document';
  position:absolute;
  right:16px;
  bottom:16px;
  background:#eef4ff;
  color:#1554c9;
  border-radius:999px;
  padding:7px 10px;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.catalog-product.catalog-document.is-selected:after{
  content:'Document';
}
.catalog-product.catalog-document.document-opened{
  border-color:#1554c9;
  box-shadow:0 18px 44px rgba(21,84,201,.16);
}
.quote-tray span{
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:900;
  color:#64748b;
  font-size:12px;
}

/* v37 service learn-more interactions */
.service-intro{
  max-width:820px;
  margin:-10px auto 28px;
  color:#56657a;
  font-size:17px;
  line-height:1.65;
}
.service-card-grid .service-card{
  display:flex;
  flex-direction:column;
  min-height:250px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.service-card-grid .service-card.is-active{
  border-color:#1d5bd1;
  box-shadow:0 16px 42px rgba(29,91,209,.14);
}
.service-card-grid .service-card p{
  flex:1;
}
.learn-more-button{
  align-self:flex-start;
  border:0;
  background:transparent;
  color:var(--blue);
  font-weight:900;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:0;
  cursor:pointer;
}
.learn-more-button:after{
  content:' →';
}
.service-card.is-active .learn-more-button{
  color:#0a2342;
}
.service-detail-panel{
  margin-top:28px;
  background:#fff;
  border:1px solid #dfe8f4;
  border-radius:22px;
  box-shadow:0 18px 48px rgba(9,24,46,.08);
  padding:28px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  gap:26px;
  align-items:stretch;
}
.service-detail-main h3{
  font-size:28px;
  line-height:1.15;
  margin:6px 0 12px;
}
.service-detail-main p{
  color:#4f5f75;
  line-height:1.65;
  margin:0 0 20px;
}
.service-detail-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.service-detail-columns div{
  background:#f7faff;
  border:1px solid #e0e8f4;
  border-radius:16px;
  padding:18px 18px 14px;
}
.service-detail-columns strong{
  display:block;
  color:#0b1628;
  margin-bottom:8px;
  font-size:14px;
}
.service-detail-columns ul{
  margin:0;
  padding-left:18px;
  color:#4f5f75;
  line-height:1.55;
}
.service-detail-columns li{
  margin:6px 0;
}
.service-sample-card{
  background:linear-gradient(145deg,#0a2342,#1d5bd1);
  color:#fff;
  border-radius:18px;
  padding:24px;
  display:flex;
  flex-direction:column;
  min-height:300px;
}
.service-sample-card span{
  color:#cfe0ff;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-weight:900;
  font-size:12px;
}
.service-sample-card h4{
  font-size:24px;
  line-height:1.15;
  margin:16px 0 10px;
}
.service-sample-card p{
  color:#e4edff;
  line-height:1.55;
  margin:0 0 18px;
}
.service-mini-list{
  display:grid;
  gap:8px;
  margin-top:auto;
}
.service-mini-list em{
  display:block;
  font-style:normal;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.22);
  border-radius:12px;
  padding:10px 12px;
  font-weight:800;
  font-size:13px;
}
.service-detail-cta{
  align-self:flex-start;
  margin-top:18px;
  background:#fff!important;
  color:#1d5bd1!important;
}
@media(max-width:1050px){
  .service-detail-panel{grid-template-columns:1fr;}
  .service-sample-card{min-height:0;}
}
@media(max-width:650px){
  .service-detail-panel{padding:20px;border-radius:18px;}
  .service-detail-columns{grid-template-columns:1fr;}
  .service-detail-main h3{font-size:24px;}
}


/* v39: restore sticky main navigation and keep anchor jumps clear of it */
html{
  scroll-behavior:smooth;
  scroll-padding-top:104px;
}
.site-header{
  position:sticky!important;
  top:0!important;
  z-index:120!important;
  background:#fff;
  box-shadow:0 10px 28px rgba(9,24,46,.06);
}
section[id],
#try-demo-live,
#demo-guide-tools,
.service-detail-panel,
.catalog-card-detailed,
.quote-flow-section,
.project-start-section,
.cta-section{
  scroll-margin-top:104px;
}
@media(max-width:1100px){
  html{scroll-padding-top:158px;}
  section[id],
  #try-demo-live,
  #demo-guide-tools,
  .service-detail-panel,
  .catalog-card-detailed,
  .quote-flow-section,
  .project-start-section,
  .cta-section{scroll-margin-top:158px;}
  .demo-sticky-tools{top:118px;}
}
@media(max-width:700px){
  html{scroll-padding-top:18px;}
  .site-header{position:relative!important;box-shadow:none;}
  section[id],
  #try-demo-live,
  #demo-guide-tools,
  .service-detail-panel,
  .catalog-card-detailed,
  .quote-flow-section,
  .project-start-section,
  .cta-section{scroll-margin-top:18px;}
}


/* v40: slower hero final overlay for readability and audited service CTA routing. */


/* v42 hero animation timing fix
   Keep the approved 19s animation cycle. Finish the build first, then show the blue overlay for about five seconds. */
@media (min-width:821px){
  .config-app.animated-demo .final-overlay{
    animation:finalV42FullReveal 19s infinite!important;
  }

  @keyframes finalV42FullReveal{
    0%,72%{opacity:0;transform:scale(1.005)}
    74%,98%{opacity:1;transform:scale(1)}
    100%{opacity:0;transform:scale(1.005)}
  }

  /* Keep the build moving briskly so visitors do not wait too long before the final message. */
  @keyframes shelfOne{0%,5%{opacity:0;transform:translateY(8px) scale(.98)}8%,98%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(3px) scale(.99)}}
  @keyframes shelfTwo{0%,10%{opacity:0;transform:translateY(8px) scale(.98)}13%,98%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(3px) scale(.99)}}
  @keyframes shelfThree{0%,15%{opacity:0;transform:translateY(8px) scale(.98)}18%,98%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(3px) scale(.99)}}
  @keyframes shelfFour{0%,20%{opacity:0;transform:translateY(8px) scale(.98)}23%,98%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(3px) scale(.99)}}
  @keyframes shelfEleven{0%,25%{opacity:0;transform:translateY(8px) scale(.98)}28%,98%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(3px) scale(.99)}}
  @keyframes shelfFive{0%,33%{opacity:0;transform:translateY(8px) scale(.98)}36%,98%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(3px) scale(.99)}}
  @keyframes shelfSix{0%,38%{opacity:0;transform:translateY(8px) scale(.98)}41%,98%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(3px) scale(.99)}}
  @keyframes shelfSeven{0%,43%{opacity:0;transform:translateY(8px) scale(.98)}46%,98%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(3px) scale(.99)}}
  @keyframes shelfTwelve{0%,48%{opacity:0;transform:translateY(8px) scale(.98)}51%,98%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(3px) scale(.99)}}
  @keyframes shelfEight{0%,54%{opacity:0;transform:translateY(8px) scale(.98)}57%,98%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(3px) scale(.99)}}
  @keyframes shelfNine{0%,58%{opacity:0;transform:translateY(8px) scale(.98)}61%,98%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(3px) scale(.99)}}
  @keyframes shelfTen{0%,62%{opacity:0;transform:translateY(8px) scale(.98)}65%,98%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(3px) scale(.99)}}
  @keyframes shelfThirteen{0%,66%{opacity:0;transform:translateY(8px) scale(.98)}69%,98%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(3px) scale(.99)}}

  @keyframes cursorV7Build{
    0%,4%{opacity:0;left:66px;top:45px}
    7%{opacity:1;left:254px;top:45px}
    12%{left:254px;top:95px}
    17%{left:254px;top:145px}
    22%{left:254px;top:195px}
    27%{left:254px;top:245px}
    35%{left:404px;top:88px}
    40%{left:404px;top:137px}
    45%{left:404px;top:186px}
    50%{left:404px;top:235px}
    56%{left:102px;top:88px}
    60%{left:102px;top:137px}
    64%{left:102px;top:186px}
    68%{left:102px;top:235px}
    72%,100%{opacity:0;left:456px;top:260px}
  }

  @keyframes captionV7In{
    0%,70%{opacity:0;transform:translateY(8px)}
    72%,88%{opacity:1;transform:translateY(0)}
    96%,100%{opacity:0;transform:translateY(8px)}
  }

  @keyframes summaryV7In{
    0%,69%{opacity:.35;transform:translateX(10px)}
    72%,98%{opacity:1;transform:translateX(0)}
    100%{opacity:.35;transform:translateX(10px)}
  }
}


/* v43 final QA and launch polish */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 112px;
}

[id] {
  scroll-margin-top: 112px;
}

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.45);
  outline-offset: 3px;
}

.launch-note {
  max-width: 1180px;
  margin: 64px auto 0;
  padding: 18px 22px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 18px;
  background: #f8fbff;
  color: #475569;
  font-size: 0.98rem;
  line-height: 1.55;
}

.launch-note strong {
  color: #0f172a;
}

.site-footer {
  margin-top: 72px;
  border-top: 1px solid rgba(148, 163, 184, 0.25);
  background: #f8fafc;
}

.footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 38px 20px 26px;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr);
  gap: 28px;
  align-items: start;
}

.footer-inner strong {
  display: block;
  color: #0f172a;
  font-size: 1.08rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.footer-inner p {
  color: #475569;
  line-height: 1.6;
  margin: 0;
  max-width: 680px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px 18px;
}

.footer-links a {
  color: #1d4ed8;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.78rem;
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}

.footer-bottom {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px 28px;
  color: #64748b;
  font-size: 0.88rem;
  line-height: 1.5;
}

@media (max-width: 980px) {
  html {
    scroll-padding-top: 88px;
  }

  [id] {
    scroll-margin-top: 88px;
  }

  .footer-inner {
    grid-template-columns: 1fr;
  }

  .footer-links {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  html {
    scroll-padding-top: 24px;
  }

  [id] {
    scroll-margin-top: 24px;
  }

  .launch-note {
    margin: 42px 16px 0;
  }

  .site-footer {
    margin-top: 48px;
  }

  .footer-inner,
  .footer-bottom {
    padding-left: 16px;
    padding-right: 16px;
  }

  .footer-links {
    flex-direction: column;
    gap: 12px;
  }
}


/* v44 catalog button functionality */
.catalog-preview-panel {
  margin-top: 16px;
  padding: 18px 20px;
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: 16px;
  background: #f8fbff;
  color: #475569;
  line-height: 1.55;
}

.catalog-preview-panel.is-active {
  border-color: rgba(37, 99, 235, 0.42);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
}

.catalog-preview-panel small {
  display: block;
  color: #1d4ed8;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.catalog-preview-panel strong {
  display: block;
  color: #0f172a;
  font-size: 1.08rem;
  margin-bottom: 6px;
}

.catalog-preview-panel p {
  margin: 0;
}

.catalog-preview-panel ul {
  margin: 12px 0 0;
  padding-left: 20px;
}

.catalog-preview-panel li {
  margin: 4px 0;
}


/* v45 catalog preview scroll and industry chip clarity */
.catalog-preview-panel {
  scroll-margin-top: 140px;
}

.industry-chip-note {
  max-width: 820px;
  margin: 10px auto 22px;
  color: #64748b;
  text-align: center;
  line-height: 1.55;
}

.industry-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #0f172a;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: default;
}

.industry-chip:hover {
  transform: none;
  box-shadow: none;
}

@media (max-width: 720px) {
  .catalog-preview-panel {
    scroll-margin-top: 32px;
  }

  .industry-chip-note {
    text-align: left;
    margin-left: 16px;
    margin-right: 16px;
  }
}


/* v46 tablet configurator QA polish
   Goal: keep the approved desktop behavior, but make the configurator usable around tablet width. */
@media (min-width: 701px) and (max-width: 980px) {
  #try-demo-live,
  #demo-guide-tools {
    scroll-margin-top: 150px;
  }

  .demo-sticky-tools {
    position: relative;
    top: auto;
    z-index: 5;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 14px 34px rgba(8,20,38,.16);
  }

  .demo-sticky-tools .demo-guide-panel:not([hidden]) {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 13px 16px;
  }

  .demo-guide-copy {
    min-width: 0;
  }

  .demo-guide-copy h3 {
    font-size: 18px;
  }

  .demo-guide-copy p {
    font-size: 14px;
    line-height: 1.35;
  }

  .demo-guide-progress,
  .demo-guide-controls {
    justify-content: flex-start;
  }

  .demo-guide-controls {
    display: flex;
    flex-wrap: wrap;
  }

  .try-controls {
    position: relative;
    top: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 14px 16px;
    box-shadow: none;
  }

  .control-group {
    min-width: 0;
    padding-bottom: 0;
  }

  .control-group label {
    margin-bottom: 6px;
    font-size: 10px;
    letter-spacing: .08em;
  }

  .demo-segments {
    min-width: 0;
    width: 100%;
  }

  .demo-segments button {
    min-width: 0;
    padding: 8px 7px;
    font-size: 13px;
    line-height: 1.12;
  }

  .control-actions {
    grid-column: 1 / -1;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
  }

  .demo-action,
  .demo-action.primary {
    grid-column: auto;
    min-width: 0;
    min-height: 38px;
    padding: 8px 8px;
    font-size: 11px;
    line-height: 1.15;
    white-space: normal;
  }

  .try-workspace {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px;
  }

  .try-wall-wrap {
    min-width: 0;
  }

  .wall-ruler {
    align-items: center;
    margin-bottom: 8px;
    font-size: 12px;
  }

  .try-wall {
    min-height: 360px;
    padding: 12px 12px 64px;
    overflow: hidden;
  }

  .try-wall-active {
    height: 285px;
    max-width: 100%;
  }

  .try-demo[data-wall-ft="8"] .try-wall-active,
  .try-demo[data-wall-ft="10"] .try-wall-active,
  .try-demo[data-wall-ft="12"] .try-wall-active {
    width: 100%;
  }

  .try-cabinet {
    height: 42px;
    bottom: 12px;
    width: min(68%, 440px);
    padding: 6px;
  }

  .try-summary {
    width: 100%;
    max-width: none;
  }

  .demo-guidance {
    margin: 0 16px 16px;
    padding: 11px 14px;
    font-size: 13px;
    line-height: 1.35;
  }
}

@media (min-width: 701px) and (max-width: 820px) {
  .try-controls {
    grid-template-columns: 1fr;
  }

  .control-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .demo-action.primary {
    grid-column: 1 / -1;
  }

  .try-wall {
    min-height: 335px;
  }

  .try-wall-active {
    height: 255px;
  }
}

/* v46 launch polish */
.catalog-preview-panel {
  scroll-margin-top: 140px;
}

.launch-note {
  scroll-margin-top: 140px;
}


/* v47 real contact email polish */
.contact-email-section {
  padding-top: 72px;
  padding-bottom: 12px;
}

.contact-email-card {
  max-width: 960px;
  margin: 0 auto;
  padding: 34px;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 26px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 22px 55px rgba(15, 23, 42, 0.08);
  text-align: center;
}

.contact-email-card h2 {
  margin: 8px auto 12px;
  max-width: 720px;
}

.contact-email-card p:not(.eyebrow) {
  max-width: 760px;
  margin: 0 auto 22px;
  color: #475569;
  line-height: 1.65;
}

.contact-email-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.footer-contact-line {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px 22px;
  color: #475569;
}

.footer-contact-line a {
  color: #1d4ed8;
  font-weight: 800;
  text-decoration: none;
}

.footer-contact-line a:hover {
  text-decoration: underline;
}

@media (max-width: 720px) {
  .contact-email-section {
    padding-top: 48px;
  }

  .contact-email-card {
    margin-left: 16px;
    margin-right: 16px;
    padding: 26px 18px;
    text-align: left;
  }

  .contact-email-link {
    width: 100%;
  }

  .footer-contact-line {
    padding-left: 16px;
    padding-right: 16px;
  }
}


/* v50 approved logo inner mark: north compass */
.brand-mark {
  position: relative;
  overflow: hidden;
}

.brand-mark::before,
.brand-mark::after {
  content: "";
  position: absolute;
  display: block;
}

/* Main compass point */
.brand-mark::before {
  left: 23%;
  top: 18%;
  width: 54%;
  height: 66%;
  background: #1f5f95;
  clip-path: polygon(50% 0, 100% 100%, 50% 76%, 0 100%);
}

/* Inner cutout keeps the mark light and directional */
.brand-mark::after {
  left: 39%;
  top: 38%;
  width: 22%;
  height: 32%;
  background: #ffffff;
  clip-path: polygon(50% 0, 100% 100%, 50% 75%, 0 100%);
}

/* Hide older interior mark elements if the original logo used child blocks. */
.brand-mark > span,
.brand-mark > i,
.brand-mark .mark-fill,
.brand-mark .brand-mark-fill {
  display: none !important;
}


/* v54 final menu scroll support */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}

#services,
#catalogs,
#contact,
#service-detail-view {
  scroll-margin-top: 110px;
}

@media (max-width: 980px) {
  html {
    scroll-padding-top: 100px;
  }

  #services,
  #catalogs,
  #contact,
  #service-detail-view {
    scroll-margin-top: 100px;
  }
}

@media (max-width: 720px) {
  html {
    scroll-padding-top: 34px;
  }

  #services,
  #catalogs,
  #contact,
  #service-detail-view {
    scroll-margin-top: 34px;
  }
}


/* v55 final menu landing tuning */
.industries {
  scroll-margin-top: 116px;
}

/* Give the catalog landing a little more breathing room under the sticky header. */
#catalogs .catalog-copy .eyebrow {
  scroll-margin-top: 132px;
}


/* v56 SEO launch cleanup: visible copyable email fallback */
.copy-email-note {
  margin: 14px 0 0;
  color: #475569;
  font-size: 0.96rem;
  line-height: 1.55;
}

.copy-email-note a {
  color: #1d4ed8;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cta-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.copy-email-note-light {
  color: rgba(255, 255, 255, 0.86);
  max-width: 320px;
}

.copy-email-note-light a {
  color: #ffffff;
}

.contact-copy-email {
  margin-top: 16px;
  margin-bottom: 0 !important;
}

@media (max-width: 720px) {
  .cta-actions {
    width: 100%;
  }
}


/* v56.5 desktop-only hero close-up correction.
   Keeps approved behavior/menu/demo intact while reducing only the first-screen top gap. */
@media (min-width: 1051px) {
  .hero-copy {
    padding-top: 10px !important;
  }

  .hero-visual {
    padding-top: 6px !important;
  }
}


/* v56.6 desktop-only first-screen alignment.
   Keeps v55 behavior and SEO cleanup while lifting only the hero preview enough for the laptop bottom edge to show on standard desktop viewports. */
@media (min-width: 1051px) {
  .hero-copy {
    transform: translateY(-8px);
  }

  .hero-visual .laptop {
    transform: translateY(-28px);
  }
}


/* v56.7 24-inch desktop hero preview balance.
   Fixes standard 24-inch/1080p desktop views where the animated shelf layout could appear shifted right or clipped near the quote panel.
   This changes only the homepage hero preview sizing/positioning and does not affect the real demo workflow, SEO, sitemap, robots, or menu landing behavior. */
@media (min-width: 1400px) and (max-width: 1700px) {
  .config-app.animated-demo {
    grid-template-columns: 155px minmax(0, 1fr) 130px !important;
    gap: 12px !important;
  }

  .config-panel.animated-panel,
  .summary-panel.animated-summary {
    padding: 12px !important;
    font-size: 11px !important;
  }

  .config-panel.animated-panel b,
  .summary-panel.animated-summary b {
    font-size: 10px !important;
  }

  .summary-panel.animated-summary .price {
    font-size: 20px !important;
  }

  .animated-wall .shelf-wide { --shelf-w: 136px !important; }
  .animated-wall .shelf-medium { --shelf-w: 94px !important; }
  .animated-wall .prod-8 { --prod-h: 26px !important; }
  .animated-wall .prod-10 { --prod-h: 31px !important; }
  .animated-wall .prod-12 { --prod-h: 35px !important; }
  .animated-wall .shelf span {
    font-size: 6.4px !important;
    max-width: calc(var(--shelf-w) - 10px) !important;
  }

  .animated-wall .shelf-1 { left: calc(50% - 68px) !important; top: 22px !important; }
  .animated-wall .shelf-2 { left: calc(50% - 68px) !important; top: 70px !important; }
  .animated-wall .shelf-3 { left: calc(50% - 68px) !important; top: 118px !important; }
  .animated-wall .shelf-4 { left: calc(50% - 68px) !important; top: 166px !important; }
  .animated-wall .shelf-11 { left: calc(50% - 68px) !important; top: 214px !important; }

  .animated-wall .shelf-5 { left: calc(50% + 82px) !important; top: 70px !important; }
  .animated-wall .shelf-6 { left: calc(50% + 82px) !important; top: 118px !important; }
  .animated-wall .shelf-7 { left: calc(50% + 82px) !important; top: 166px !important; }
  .animated-wall .shelf-12 { left: calc(50% + 82px) !important; top: 214px !important; }

  .animated-wall .shelf-8 { left: calc(50% - 184px) !important; top: 70px !important; }
  .animated-wall .shelf-9 { left: calc(50% - 184px) !important; top: 118px !important; }
  .animated-wall .shelf-10 { left: calc(50% - 184px) !important; top: 166px !important; }
  .animated-wall .shelf-13 { left: calc(50% - 184px) !important; top: 214px !important; }

  .demo-cursor { animation: cursorV567DesktopBuild 19s infinite !important; }

  @keyframes cursorV567DesktopBuild {
    0%,4% { opacity:0; left:50%; top:45px; }
    7% { opacity:1; left:50%; top:48px; }
    13% { left:50%; top:96px; }
    19% { left:50%; top:144px; }
    25% { left:50%; top:192px; }
    31% { left:50%; top:240px; }
    42% { left:calc(50% + 126px); top:96px; }
    48% { left:calc(50% + 126px); top:144px; }
    54% { left:calc(50% + 126px); top:192px; }
    60% { left:calc(50% + 126px); top:240px; }
    67% { left:calc(50% - 126px); top:96px; }
    72% { left:calc(50% - 126px); top:144px; }
    77% { left:calc(50% - 126px); top:192px; }
    82% { left:calc(50% - 126px); top:240px; }
    88%,100% { opacity:0; left:50%; top:270px; }
  }
}


/* v56.8 contained 24-inch desktop hero fit.
   Reduces only the homepage hero laptop width and outer base span on normal desktop/24-inch monitor widths.
   Keeps SEO, sitemap, robots, menu anchors, real demo behavior, and approved contact/email behavior unchanged. */
@media (min-width: 1450px) and (max-width: 1700px) {
  .hero-visual {
    padding-right: 50px !important;
    justify-content: flex-start !important;
  }

  .hero-visual .laptop {
    width: 820px !important;
    max-width: calc(100vw - 720px) !important;
    transform: translateY(-28px) !important;
  }

  .hero-visual .laptop::after {
    left: -48px !important;
    right: -48px !important;
  }

  .config-app.animated-demo {
    grid-template-columns: 150px minmax(0, 1fr) 122px !important;
    gap: 10px !important;
    padding: 10px !important;
  }

  .config-panel.animated-panel,
  .summary-panel.animated-summary {
    padding: 11px !important;
    font-size: 10.5px !important;
  }

  .summary-panel.animated-summary .price {
    font-size: 19px !important;
  }
}

@media (min-width: 1051px) and (max-width: 1449px) {
  .hero-visual .laptop::after {
    left: -45px !important;
    right: -45px !important;
  }
}


/* v56.9 mobile navigation wrap.
   Keeps v56.8 desktop/tablet hero fit intact, but prevents the mobile nav from hiding the Contact link at narrow phone widths. */
@media (max-width: 520px) {
  .site-header .nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px 12px !important;
    overflow: visible !important;
    justify-content: stretch !important;
    align-items: center !important;
    padding-top: 12px !important;
    padding-bottom: 2px !important;
  }

  .site-header .nav a {
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.2 !important;
    font-size: 10.5px !important;
    letter-spacing: .055em !important;
  }
}


/* v57 SEO service pages.
   Adds standalone service page layouts and homepage service page links while preserving v56.10 homepage behavior. */
.service-page {
  background: #fff;
}

.service-page-hero {
  padding: 74px 70px 58px;
  background: radial-gradient(circle at 18% 18%, #ffffff 0, #f6f9fd 42%, #eaf1fb 100%);
  border-bottom: 1px solid #e3ebf6;
}

.service-page-hero-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: 38px;
  align-items: center;
}

.service-page-hero h1 {
  font-size: 48px;
  line-height: 1.06;
  margin: 12px 0 16px;
  letter-spacing: .02em;
  color: var(--navy);
}

.service-page-hero p {
  color: #4d5a6d;
  font-size: 18px;
  line-height: 1.65;
  max-width: 740px;
  margin: 0;
}

.service-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.service-page-card {
  background: #fff;
  border: 1px solid #dfe8f4;
  border-radius: 22px;
  box-shadow: 0 18px 48px rgba(9,24,46,.08);
  padding: 28px;
}

.service-page-card strong {
  display: block;
  color: var(--navy);
  font-size: 18px;
  margin-bottom: 12px;
}

.service-page-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.service-page-card li {
  color: #475569;
  line-height: 1.55;
  padding: 10px 0 10px 28px;
  position: relative;
  border-top: 1px solid #eef3fa;
}

.service-page-card li:first-child {
  border-top: 0;
}

.service-page-card li:before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 10px;
  color: var(--blue);
  font-weight: 900;
}

.service-page-section {
  padding: 64px 70px;
}

.service-page-section.alt {
  background: #f7faff;
  border-top: 1px solid #edf2f8;
  border-bottom: 1px solid #edf2f8;
}

.service-page-wrap {
  max-width: 1180px;
  margin: 0 auto;
}

.service-page-section h2 {
  font-size: 34px;
  line-height: 1.16;
  margin: 8px 0 18px;
  color: var(--navy);
}

.service-page-section p {
  color: #4d5a6d;
  font-size: 16px;
  line-height: 1.7;
}

.service-two-column {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  margin-top: 28px;
}

.service-info-box {
  background: #fff;
  border: 1px solid #dfe8f4;
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 12px 34px rgba(9,24,46,.05);
}

.service-info-box h3 {
  margin: 0 0 12px;
  color: var(--navy);
  font-size: 20px;
}

.service-info-box ul,
.service-check-list {
  margin: 0;
  padding-left: 20px;
  color: #475569;
  line-height: 1.65;
}

.service-check-list li,
.service-info-box li {
  margin: 8px 0;
}

.service-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}

.service-step {
  background: #fff;
  border: 1px solid #dfe8f4;
  border-radius: 18px;
  padding: 22px;
}

.service-step span {
  display: inline-flex;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  align-items: center;
  justify-content: center;
  background: #eaf2ff;
  color: var(--blue);
  font-weight: 900;
  margin-bottom: 14px;
}

.service-step h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--navy);
}

.service-step p {
  margin: 0;
  font-size: 14px;
}

.related-services {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.related-services a {
  display: block;
  background: #fff;
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  padding: 18px;
  color: var(--navy);
  font-weight: 900;
  box-shadow: 0 10px 28px rgba(9,24,46,.05);
}

.related-services a small {
  display: block;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11px;
  margin-top: 8px;
}

.service-page-cta {
  margin-top: 28px;
  background: var(--navy);
  color: #fff;
  border-radius: 22px;
  padding: 34px;
  display: flex;
  justify-content: space-between;
  gap: 28px;
  align-items: center;
}

.service-page-cta h2 {
  color: #fff;
  margin: 0 0 8px;
  font-size: 28px;
}

.service-page-cta p {
  color: #cbd5e1;
  margin: 0;
}

.service-page-email {
  color: #cbd5e1;
  margin-top: 12px !important;
  font-size: 14px !important;
}

.service-page-email a {
  color: #fff;
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.learn-more-button {
  display: inline-flex;
}

@media (max-width: 1050px) {
  .service-page-hero,
  .service-page-section {
    padding-left: 28px;
    padding-right: 28px;
  }

  .service-page-hero-inner,
  .service-two-column {
    grid-template-columns: 1fr;
  }

  .service-steps,
  .related-services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 650px) {
  .service-page-hero {
    padding-top: 42px;
    padding-bottom: 42px;
  }

  .service-page-hero h1 {
    font-size: 34px;
  }

  .service-page-actions .button {
    width: 100%;
  }

  .service-page-section {
    padding-top: 42px;
    padding-bottom: 42px;
  }

  .service-page-section h2 {
    font-size: 27px;
  }

  .service-steps,
  .related-services {
    grid-template-columns: 1fr;
  }

  .service-page-cta {
    display: block;
    padding: 26px;
  }

  .service-page-cta .button {
    margin-top: 22px;
    width: 100%;
  }
}


/* v57-5: obvious bottom navigation buttons */
.footer-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}
.bottom-nav-utility {
  width: min(1180px, calc(100% - 48px));
  margin: 48px auto 18px;
  padding: 24px;
  border: 1px solid rgba(17, 24, 39, .10);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(239, 246, 255, .92), rgba(255, 255, 255, .98));
  box-shadow: 0 24px 60px rgba(15, 23, 42, .08);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.bottom-nav-button {
  min-width: 178px;
  min-height: 48px;
  padding: 14px 22px;
  border-radius: 12px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 13px;
  line-height: 1.1;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.bottom-nav-button:hover {
  transform: translateY(-1px);
}
.bottom-nav-home {
  background: var(--blue);
  border: 2px solid var(--blue);
  color: #fff;
  box-shadow: 0 16px 32px rgba(29, 78, 216, .22);
}
.bottom-nav-home:hover {
  background: #1747b8;
  color: #fff;
}
.bottom-nav-top {
  background: #fff;
  border: 2px solid var(--blue);
  color: var(--blue);
}
.bottom-nav-top:hover {
  background: rgba(29, 78, 216, .08);
  color: var(--blue);
}
@media (max-width: 650px) {
  .footer-actions {
    margin-top: 10px;
    gap: 14px;
  }
  .bottom-nav-utility {
    width: min(100% - 28px, 520px);
    margin-top: 36px;
    padding: 18px;
    border-radius: 18px;
  }
  .bottom-nav-button {
    width: 100%;
    min-width: 0;
  }
}


/* v57.6: phone demo gate. The full interactive configurator stays available on tablets, laptops, and desktops. */
.phone-demo-gate{display:none;background:#fff;border:1px solid #dce6f3;border-radius:18px;padding:28px;margin:0;box-shadow:0 18px 45px rgba(9,24,46,.10);text-align:left}
.phone-demo-gate h2{font-size:28px;line-height:1.15;margin:8px 0 12px;text-align:left;color:var(--ink)}
.phone-demo-gate p{color:#4c5a6d;font-size:16px;max-width:680px}
.phone-demo-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
@media(max-width:720px){
  .phone-demo-gate{display:block}
  #try-demo-live{padding:0;background:transparent;border:0;box-shadow:none}
  #try-demo-live .demo-sticky-tools,
  #try-demo-live .try-workspace,
  #try-demo-live .demo-guidance{display:none!important}
  .interactive-demo-section{padding-bottom:36px}
  .phone-demo-gate h2{font-size:24px}
  .phone-demo-actions .button{width:100%}
}