/* KoozWorks Modern v2 — progressive enhancement, 2026-08-29 */
:root{
  --kw-gold:#e5b247;
  --kw-gold-soft:#f2d38b;
  --kw-green:#0e4a39;
  --kw-deep:#03110e;
  --kw-cream:#f4f0e8;
  --kw-radius-xl:28px;
}

/* Global modern polish */
body{overflow-x:hidden}
.site-header{box-shadow:0 10px 36px rgba(0,0,0,.08)}
.btn,.nav-contact,.product-tile,.card,.glass-card,.support-card,.plan{will-change:transform}
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;inset:-80% -30%;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-120%) rotate(8deg);transition:transform .6s ease;pointer-events:none;z-index:-1}
.btn:hover::after{transform:translateX(120%) rotate(8deg)}
.card,.glass-card,.product-tile,.plan,.support-card{transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,border-color .28s ease}
@media (hover:hover){
  .card:hover,.plan:hover,.support-card:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(11,33,25,.13)}
}

/* Subtle grain only on selected dark sections */
.modern-grain{position:relative;isolation:isolate}
.modern-grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.08;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");z-index:-1}

/* DDD showcase */
.ddd-modern-showcase{padding:108px 0;background:radial-gradient(circle at 78% 8%,rgba(229,178,71,.12),transparent 30%),linear-gradient(180deg,#041612 0%,#061e18 100%);color:#fff;overflow:hidden}
.ddd-modern-showcase .section-head h2,.ddd-feature-explorer h2,.ddd-stack-section h2{color:#fff}
.ddd-modern-showcase .section-head p,.ddd-feature-explorer .section-head p,.ddd-stack-section .section-head p{color:#b8c7c1}
.ddd-bento{display:grid;grid-template-columns:1.15fr .85fr .8fr;grid-template-rows:260px 220px;gap:18px;margin-top:38px}
.ddd-bento-card{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:24px;background:linear-gradient(145deg,rgba(12,54,42,.96),rgba(2,16,13,.94));box-shadow:0 24px 58px rgba(0,0,0,.27);transform-style:preserve-3d;isolation:isolate}
.ddd-bento-card::before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,70%) var(--my,20%),rgba(229,178,71,.17),transparent 52%);opacity:.7;pointer-events:none;z-index:2}
.ddd-bento-card img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .45s ease;filter:saturate(.94) contrast(1.01)}
.ddd-bento-card:hover img{transform:scale(1.035);filter:saturate(1.03) contrast(1.03)}
.ddd-bento-label{position:absolute;left:16px;right:16px;bottom:16px;z-index:3;display:flex;align-items:flex-end;justify-content:space-between;gap:14px;padding:15px 16px;border:1px solid rgba(255,255,255,.13);border-radius:15px;background:rgba(2,17,14,.78);backdrop-filter:blur(14px);box-shadow:0 14px 30px rgba(0,0,0,.22)}
.ddd-bento-label strong{display:block;font-size:1rem;color:#fff}
.ddd-bento-label span{font-size:.84rem;color:#bdcbc5}
.ddd-bento-card.hero{grid-row:1/3}
.ddd-bento-card.wide{grid-column:2/4}

/* Layered screen stack */
.ddd-stack-section{padding:108px 0;background:#f5f1e9;overflow:hidden}
.ddd-stack-section .section-head h2{color:#13211c}
.ddd-stack-section .section-head p{color:#64716c}
.ddd-stack-stage{position:relative;min-height:650px;margin-top:46px;perspective:1500px;display:grid;place-items:center}
.ddd-stack-card{position:absolute;width:min(78vw,980px);aspect-ratio:16/10;border:1px solid rgba(255,255,255,.2);border-radius:24px;background:#071b17;padding:12px;box-shadow:0 45px 90px rgba(2,15,12,.28);transform-origin:center center;transition:filter .25s ease}
.ddd-stack-card img{width:100%;height:100%;object-fit:cover;object-position:top center;border-radius:15px}
.ddd-stack-card:nth-child(1){z-index:3;transform:translate3d(0,30px,70px) rotateX(5deg) rotateZ(-1.8deg)}
.ddd-stack-card:nth-child(2){z-index:2;transform:translate3d(70px,-5px,0) rotateX(7deg) rotateZ(3deg)}
.ddd-stack-card:nth-child(3){z-index:1;transform:translate3d(-65px,-38px,-60px) rotateX(8deg) rotateZ(-5deg)}
.ddd-stack-caption{position:absolute;left:28px;bottom:28px;padding:11px 14px;border-radius:12px;background:rgba(2,15,12,.88);color:#fff;font-weight:800;border:1px solid rgba(229,178,71,.26);backdrop-filter:blur(12px)}
@media (hover:hover){
 .ddd-stack-stage:hover .ddd-stack-card:nth-child(1){transform:translate3d(0,110px,90px) rotateX(1deg) rotateZ(0)}
 .ddd-stack-stage:hover .ddd-stack-card:nth-child(2){transform:translate3d(150px,-60px,0) rotateX(3deg) rotateZ(5deg)}
 .ddd-stack-stage:hover .ddd-stack-card:nth-child(3){transform:translate3d(-150px,-85px,-40px) rotateX(3deg) rotateZ(-6deg)}
 .ddd-stack-card{transition:transform .6s cubic-bezier(.16,1,.3,1),filter .3s ease}
}

/* Interactive feature explorer */
.ddd-feature-explorer{padding:110px 0;background:linear-gradient(180deg,#03110e,#061b16);color:#fff}
.ddd-explorer{display:grid;grid-template-columns:310px minmax(0,1fr);gap:24px;margin-top:42px;align-items:stretch}
.ddd-tabs{display:flex;flex-direction:column;gap:9px;padding:13px;border-radius:22px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);align-self:start;position:sticky;top:120px}
.ddd-tab{appearance:none;border:0;text-align:left;padding:17px 18px;border-radius:14px;background:transparent;color:#b8c6c1;font-weight:800;cursor:pointer;transition:background .2s ease,color .2s ease,transform .2s ease;position:relative}
.ddd-tab span{display:block;margin-top:4px;font-size:.78rem;font-weight:500;color:#869790}
.ddd-tab[aria-selected="true"]{background:linear-gradient(110deg,rgba(21,92,69,.86),rgba(9,58,44,.84));color:#fff;box-shadow:inset 3px 0 var(--kw-gold),0 10px 22px rgba(0,0,0,.18)}
.ddd-tab[aria-selected="true"] span{color:#c8d4cf}
.ddd-tab-progress{height:2px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden;margin:4px 9px 10px}
.ddd-tab-progress i{display:block;height:100%;width:0;background:var(--kw-gold);transform-origin:left}
.ddd-device{position:relative;min-width:0;border:1px solid rgba(255,255,255,.13);border-radius:25px;background:#071713;box-shadow:0 34px 75px rgba(0,0,0,.35);overflow:hidden}
.ddd-windowbar{height:42px;display:flex;align-items:center;gap:8px;padding:0 16px;border-bottom:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,#0b2420,#071713)}
.ddd-windowbar i{width:9px;height:9px;border-radius:50%;background:#6b7d76}.ddd-windowbar i:nth-child(1){background:#e1b149}.ddd-windowbar i:nth-child(2){background:#3e8e6d}.ddd-windowbar i:nth-child(3){background:#6f857c}
.ddd-windowbar span{margin-left:auto;color:#8ca097;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.ddd-media-frame{position:relative;aspect-ratio:16/10;background:#ebe9e4;overflow:hidden}
.ddd-media-frame img{width:100%;height:100%;object-fit:contain;object-position:top center;background:#f6f4f1}
.ddd-feature-copy{padding:22px 24px 24px;border-top:1px solid rgba(255,255,255,.08)}
.ddd-feature-copy h3{margin:0 0 6px;color:#fff;font-size:1.42rem}.ddd-feature-copy p{margin:0;color:#b7c5c0}
.ddd-hotspot{position:absolute;left:var(--x);top:var(--y);width:24px;height:24px;border-radius:50%;transform:translate(-50%,-50%);border:2px solid #fff;background:var(--kw-gold);box-shadow:0 0 0 0 rgba(229,178,71,.55);animation:kwPulse 2s infinite;cursor:pointer;z-index:4}
.ddd-hotspot::after{content:"";position:absolute;inset:6px;border-radius:50%;background:#073126}
.ddd-tooltip{position:absolute;left:calc(var(--x) + 18px);top:calc(var(--y) + 18px);z-index:5;width:min(260px,42%);padding:12px 13px;border-radius:12px;background:rgba(2,18,15,.94);border:1px solid rgba(229,178,71,.35);box-shadow:0 16px 40px rgba(0,0,0,.3);color:#fff;font-size:.82rem;line-height:1.45;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .18s ease,transform .18s ease}
.ddd-hotspot:focus + .ddd-tooltip,.ddd-hotspot:hover + .ddd-tooltip,.ddd-hotspot.active + .ddd-tooltip{opacity:1;transform:none}
@keyframes kwPulse{0%{box-shadow:0 0 0 0 rgba(229,178,71,.48)}70%{box-shadow:0 0 0 12px rgba(229,178,71,0)}100%{box-shadow:0 0 0 0 rgba(229,178,71,0)}}

/* Global reveal hooks — content remains visible without JS */
[data-kw-reveal]{opacity:1;transform:none}
.kw-motion-ready [data-kw-reveal]{opacity:0;transform:translateY(18px)}
.kw-motion-ready [data-kw-reveal].kw-revealed{opacity:1;transform:none}

/* Homepage: real current-beta preview */
.dashboard-preview.modern-preview{position:relative;overflow:hidden;border-radius:22px}
.dashboard-preview.modern-preview::after{content:"Current beta";position:absolute;right:16px;bottom:16px;padding:8px 11px;border-radius:999px;background:rgba(2,18,15,.84);border:1px solid rgba(229,178,71,.34);color:#f5d78f;font-size:.74rem;font-weight:850;text-transform:uppercase;letter-spacing:.08em;backdrop-filter:blur(10px)}

@media(max-width:1050px){
 .ddd-bento{grid-template-columns:1fr 1fr;grid-template-rows:auto}.ddd-bento-card{min-height:260px}.ddd-bento-card.hero{grid-row:auto}.ddd-bento-card.wide{grid-column:1/-1}
 .ddd-explorer{grid-template-columns:1fr}.ddd-tabs{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.ddd-tab-progress{grid-column:1/-1}
 .ddd-stack-stage{min-height:560px}.ddd-stack-card{width:min(88vw,850px)}
}
@media(max-width:700px){
 .ddd-modern-showcase,.ddd-stack-section,.ddd-feature-explorer{padding:74px 0}
 .ddd-bento{grid-template-columns:1fr}.ddd-bento-card,.ddd-bento-card.wide{grid-column:auto;min-height:260px}.ddd-bento-label{left:12px;right:12px;bottom:12px}
 .ddd-tabs{grid-template-columns:1fr}.ddd-tab-progress{grid-column:auto}
 .ddd-stack-stage{min-height:430px}.ddd-stack-card{width:94vw;padding:7px;border-radius:17px}.ddd-stack-card img{border-radius:11px}.ddd-stack-caption{left:14px;bottom:14px;font-size:.78rem}
 .ddd-stack-card:nth-child(1){transform:translate3d(0,50px,50px) rotateZ(-1deg)}.ddd-stack-card:nth-child(2){transform:translate3d(28px,0,0) rotateZ(3deg)}.ddd-stack-card:nth-child(3){transform:translate3d(-26px,-34px,-30px) rotateZ(-4deg)}
 .ddd-windowbar{height:36px}.ddd-media-frame{aspect-ratio:4/3}.ddd-feature-copy{padding:18px}.ddd-hotspot{width:22px;height:22px}.ddd-tooltip{width:min(230px,68%)}
}
@media(prefers-reduced-motion:reduce){
 .ddd-hotspot{animation:none}.ddd-bento-card img,.ddd-stack-card,.btn::after{transition:none!important}
 .kw-motion-ready [data-kw-reveal]{opacity:1!important;transform:none!important}
}

/* KoozWorks Modern v2.1 — dramatic showcase pass, 2026-08-29 */

/* The homepage DDD preview must always show the complete application frame. */
.dashboard-preview.modern-preview{
  overflow:visible;
  background:#071713;
  transform-style:preserve-3d;
  box-shadow:0 34px 90px rgba(0,0,0,.46);
}
.dashboard-preview.modern-preview img{
  display:block;
  width:100%;
  height:auto !important;
  min-height:0 !important;
  object-fit:contain !important;
  object-position:center !important;
  border-radius:21px;
  background:#f5f3ee;
}
@media (hover:hover){
  .dashboard-preview.modern-preview:hover{
    transform:perspective(1300px) translateY(-14px) scale(1.025) rotateX(1deg) rotateY(0deg);
    border-color:rgba(229,178,71,.62);
    box-shadow:0 42px 110px rgba(0,0,0,.56),0 0 0 1px rgba(229,178,71,.16);
  }
}

/* Full screenshot hover/tap viewer. Desktop hover is non-blocking; touch becomes a dismissible modal. */
.kw-popout-layer{
  position:fixed;inset:0;z-index:5000;display:grid;place-items:center;
  padding:clamp(18px,3vw,46px);opacity:0;visibility:hidden;pointer-events:none;
  background:rgba(1,10,8,.72);backdrop-filter:blur(18px) saturate(120%);
  transition:opacity .2s ease,visibility .2s ease;
}
.kw-popout-layer.open{opacity:1;visibility:visible}
.kw-popout-shell{
  position:relative;display:flex;flex-direction:column;max-width:min(94vw,1680px);max-height:91vh;
  border:1px solid rgba(255,255,255,.22);border-radius:24px;background:#061713;
  box-shadow:0 55px 160px rgba(0,0,0,.68),0 0 0 1px rgba(229,178,71,.16);
  overflow:hidden;transform:perspective(1500px) scale(.84) rotateX(7deg) rotateY(-4deg);
  opacity:.15;transition:transform .42s cubic-bezier(.16,1,.3,1),opacity .28s ease;
}
.kw-popout-layer.open .kw-popout-shell{transform:perspective(1500px) scale(1) rotateX(0) rotateY(0);opacity:1}
.kw-popout-bar{height:42px;display:flex;align-items:center;gap:8px;padding:0 16px;background:linear-gradient(180deg,#0c2821,#071713);border-bottom:1px solid rgba(255,255,255,.1);flex:0 0 auto}
.kw-popout-bar i{width:9px;height:9px;border-radius:50%;background:#678078}.kw-popout-bar i:first-child{background:#e5b247}.kw-popout-bar i:nth-child(2){background:#3f936f}.kw-popout-bar span{margin-left:8px;color:#d9e3df;font-size:.78rem;font-weight:800;letter-spacing:.04em}
.kw-popout-shell img{display:block;max-width:100%;width:auto;height:auto;max-height:calc(91vh - 84px);object-fit:contain;background:#f5f3ee;margin:auto}
.kw-popout-caption{padding:10px 16px 12px;color:#cbd8d3;font-size:.8rem;background:#061713;border-top:1px solid rgba(255,255,255,.08);text-align:center;flex:0 0 auto}
.kw-popout-close{display:none;position:absolute;right:10px;top:7px;z-index:2;width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(2,15,12,.88);color:#fff;font-size:18px;line-height:1;cursor:pointer}
.kw-popout-layer.touch-open{pointer-events:auto}.kw-popout-layer.touch-open .kw-popout-close{display:grid;place-items:center}
[data-kw-popout],[data-kw-dynamic-popout]{cursor:zoom-in}
.ddd-bento-card[data-kw-popout]::after{content:"Hover to expand";position:absolute;right:18px;top:18px;z-index:4;padding:7px 10px;border-radius:999px;background:rgba(2,16,13,.8);border:1px solid rgba(229,178,71,.3);color:#f4d58a;font-size:.67rem;font-weight:850;letter-spacing:.06em;text-transform:uppercase;opacity:0;transform:translateY(-5px);transition:.2s ease;backdrop-filter:blur(10px)}
@media (hover:hover){.ddd-bento-card[data-kw-popout]:hover::after{opacity:1;transform:none}}

/* Bento cards feel like objects, not flat thumbnails. */
@media (hover:hover){
  .ddd-bento-card{transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease,border-color .3s ease;will-change:transform}
  .ddd-bento-card:hover{transform:translateY(-14px) scale(1.025);border-color:rgba(229,178,71,.48);box-shadow:0 38px 85px rgba(0,0,0,.44),0 0 38px rgba(229,178,71,.08)}
  .ddd-bento-card:hover img{transform:scale(1.08);filter:saturate(1.06) contrast(1.04)}
}

/* Homepage product cards: deeper hover plus a camera-flash / lens-sweep moment over the logo. */
.home-product-tile{position:relative;overflow:hidden;transform-style:preserve-3d;isolation:isolate}
.home-product-tile .product-logo-media{position:relative;overflow:hidden;transform:translateZ(20px)}
.home-product-tile .product-logo-media::before{
  content:"";position:absolute;left:50%;top:48%;width:10px;height:10px;border-radius:50%;z-index:3;pointer-events:none;
  background:#fff;opacity:0;box-shadow:0 0 18px 7px rgba(255,255,255,.75),0 0 50px 22px rgba(229,178,71,.42),0 0 95px 45px rgba(72,202,153,.16);
}
.home-product-tile .product-logo-media::after{
  content:"";position:absolute;z-index:2;inset:-25% -70%;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.05) 46%,rgba(255,245,208,.72) 50%,rgba(255,255,255,.09) 54%,transparent 58%);
  transform:translateX(-55%) rotate(4deg);
}
@media (hover:hover){
 .home-product-tile:hover{transform:perspective(1200px) translateY(-22px) scale(1.035) rotateX(2.2deg);border-color:rgba(229,178,71,.58);box-shadow:0 46px 92px rgba(2,20,15,.34),0 0 38px rgba(229,178,71,.12)}
 .home-product-tile:hover .product-logo-media img{transform:scale(1.055);filter:brightness(1.07) saturate(1.06);transition:transform .55s cubic-bezier(.16,1,.3,1),filter .3s ease}
 .home-product-tile:hover .product-logo-media::before{animation:kwCameraFlash .78s ease-out 1}
 .home-product-tile:hover .product-logo-media::after{animation:kwLensSweep .95s cubic-bezier(.2,.75,.2,1) 1}
}
@keyframes kwCameraFlash{0%{opacity:0;transform:scale(.3)}18%{opacity:.92;transform:scale(1)}40%{opacity:.32;transform:scale(4)}100%{opacity:0;transform:scale(8)}}
@keyframes kwLensSweep{0%{opacity:0;transform:translateX(-55%) rotate(4deg)}18%{opacity:.9}100%{opacity:0;transform:translateX(55%) rotate(4deg)}}

/* More assertive section entrances. Motion/GSAP progressively enhance these. */
.kw-motion-ready [data-kw-reveal]{opacity:0;transform:translateY(64px) scale(.955) rotateX(5deg);transform-origin:center bottom}
.kw-motion-ready [data-kw-reveal].kw-revealed{opacity:1;transform:none}

/* Accessible focus treatment for screenshot objects. */
[data-kw-popout]:focus-visible,[data-kw-dynamic-popout]:focus-visible{outline:3px solid var(--kw-gold);outline-offset:4px}

@media(max-width:700px){
 .kw-popout-layer{padding:10px}.kw-popout-shell{max-width:98vw;max-height:88vh;border-radius:16px}.kw-popout-shell img{max-height:calc(88vh - 82px)}
 .ddd-bento-card[data-kw-popout]::after{display:none}
 .home-product-tile:hover{transform:none}
}
@media(prefers-reduced-motion:reduce){
 .kw-popout-shell,.ddd-bento-card,.home-product-tile,.home-product-tile .product-logo-media img{transition:none!important;animation:none!important}
 .home-product-tile .product-logo-media::before,.home-product-tile .product-logo-media::after{display:none}
}

/* KoozWorks Modern v2.2 — screenshot truth + horizontal story, 2026-08-29 */

/* Screenshots are screenshots: never fake chrome, never crop the full image, never round screenshot corners. */
.dashboard-preview.modern-preview{border-radius:0!important;overflow:visible!important;background:transparent!important;box-shadow:none!important;cursor:zoom-in}
.dashboard-preview.modern-preview::after{display:none!important}
.dashboard-preview.modern-preview img{display:block!important;width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important;object-position:center!important;border-radius:0!important;background:#fff;box-shadow:0 34px 90px rgba(0,0,0,.42)}
@media (hover:hover){.dashboard-preview.modern-preview:hover{transform:perspective(1300px) translateY(-18px) scale(1.04) rotateX(1.5deg)!important;box-shadow:none!important}}

/* Persistent screenshot lightbox — complete original aspect, click/tap to open, X to close. */
.kw-popout-layer{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;padding:clamp(14px,2vw,30px);opacity:0;visibility:hidden;pointer-events:none;background:rgba(0,7,6,.88);backdrop-filter:blur(18px) saturate(110%);transition:opacity .22s ease,visibility .22s ease}
.kw-popout-layer.open{opacity:1;visibility:visible;pointer-events:auto}
.kw-popout-shell{position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto;max-width:96vw;max-height:94vh;background:#06130f;border:1px solid rgba(229,178,71,.34);box-shadow:0 60px 180px rgba(0,0,0,.72);overflow:visible;transform:perspective(1600px) scale(.82) rotateX(8deg);opacity:.2;transition:transform .42s cubic-bezier(.16,1,.3,1),opacity .24s ease}
.kw-popout-layer.open .kw-popout-shell{transform:none;opacity:1}
.kw-popout-shell img{display:block;max-width:94vw;max-height:calc(94vh - 58px);width:auto;height:auto;object-fit:contain;border-radius:0!important;background:#fff;margin:auto}
.kw-popout-titlebar{min-height:48px;display:flex;align-items:center;padding:10px 58px 10px 16px;color:#d9e3df;font-size:.84rem;font-weight:800;letter-spacing:.02em;border-top:1px solid rgba(255,255,255,.09);background:#06130f}
.kw-popout-close{position:absolute;right:-14px;top:-14px;z-index:4;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.3);background:#071b17;color:#fff;font-size:28px;line-height:1;cursor:pointer;box-shadow:0 12px 28px rgba(0,0,0,.45)}
.kw-popout-close:hover{background:#123d31;border-color:rgba(229,178,71,.7)}

/* Practice DDD lightbox carousel navigation */
.kw-popout-prev,.kw-popout-next{position:absolute;top:50%;z-index:5;width:54px;height:76px;display:grid;place-items:center;transform:translateY(-50%);border:1px solid rgba(255,255,255,.28);background:rgba(4,22,18,.86);color:#fff;font-size:48px;font-weight:300;line-height:1;cursor:pointer;box-shadow:0 18px 44px rgba(0,0,0,.44);backdrop-filter:blur(8px);transition:transform .18s ease,background .18s ease,border-color .18s ease}
.kw-popout-prev{left:-70px}.kw-popout-next{right:-70px}
.kw-popout-prev:hover,.kw-popout-next:hover{background:#0d3b2f;border-color:rgba(229,178,71,.8);transform:translateY(-50%) scale(1.08)}
.kw-popout-prev[hidden],.kw-popout-next[hidden]{display:none!important}
@media(max-width:1120px){.kw-popout-prev{left:8px}.kw-popout-next{right:8px}.kw-popout-prev,.kw-popout-next{width:46px;height:64px;background:rgba(2,15,12,.9)}}
@media(max-width:700px){.kw-popout-prev,.kw-popout-next{width:42px;height:58px;font-size:40px}.kw-popout-prev{left:4px}.kw-popout-next{right:4px}}
[data-kw-popout]{cursor:zoom-in}
[data-kw-popout]:focus-visible{outline:3px solid var(--kw-gold);outline-offset:4px}

/* Bento is now explanatory, not a miniature gallery. Cropped detail is deliberate; full screenshot opens on click. */
.ddd-bento-v3{grid-template-columns:1.12fr .88fr .88fr;grid-template-rows:290px 250px 250px}
.ddd-bento-v3 .ddd-bento-card{display:flex;flex-direction:column;padding:14px;overflow:hidden}
.ddd-bento-v3 .ddd-bento-card.hero{grid-row:1/3}
.ddd-bento-v3 .ddd-bento-card.wide{grid-column:2/4}
.ddd-bento-visual{position:relative;min-height:0;flex:1;display:grid;place-items:center;overflow:hidden;background:#f7f5f1;border:1px solid rgba(255,255,255,.08)}
.ddd-bento-visual img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;border-radius:0!important}
.ddd-bento-visual.nav-visual img{object-fit:cover;object-position:left top}
.ddd-bento-v3 .ddd-bento-label{position:static;margin-top:12px;flex:0 0 auto;border-radius:12px;padding:14px 15px;background:rgba(2,17,14,.82)}
.ddd-bento-v3 .ddd-bento-label strong{font-size:1.03rem}.ddd-bento-v3 .ddd-bento-label span{display:block;margin-top:4px;line-height:1.4}
.ddd-bento-card[data-kw-popout]::after{content:"Click to inspect";position:absolute;right:25px;top:25px;z-index:5;padding:7px 10px;border-radius:999px;background:rgba(2,16,13,.82);border:1px solid rgba(229,178,71,.35);color:#f4d58a;font-size:.66rem;font-weight:850;letter-spacing:.06em;text-transform:uppercase;opacity:0;transform:translateY(-5px);transition:.2s ease;backdrop-filter:blur(10px)}
@media (hover:hover){.ddd-bento-card[data-kw-popout]:hover::after{opacity:1;transform:none}.ddd-bento-card:hover{transform:translateY(-15px) scale(1.025);border-color:rgba(229,178,71,.55);box-shadow:0 40px 90px rgba(0,0,0,.46),0 0 45px rgba(229,178,71,.08)}}

/* Stack: show authentic screens with square corners; perspective belongs to the cards, not the screenshots. */
.ddd-stack-card{overflow:visible;padding:12px;border-radius:22px}
.ddd-stack-card img{object-fit:contain!important;object-position:center!important;border-radius:0!important;background:#f7f5f1}

/* Horizontal scroll story — same displayed height, natural widths, never cropped. */
.ddd-scroll-story{position:relative;padding:100px 0 90px;background:radial-gradient(circle at 78% 18%,rgba(229,178,71,.11),transparent 33%),linear-gradient(180deg,#03110e,#061d17);color:#fff;overflow:hidden}
.ddd-scroll-intro{margin-bottom:28px}.ddd-scroll-intro h2{color:#fff;max-width:800px;font-size:clamp(2.2rem,4.4vw,4.8rem);line-height:.98;margin:.15em 0 .3em}.ddd-scroll-intro p{max-width:820px;color:#b9c7c1;font-size:1.04rem}
.ddd-scroll-viewport{width:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;overscroll-behavior-inline:contain;scrollbar-width:thin;scrollbar-color:rgba(229,178,71,.65) rgba(255,255,255,.08)}
.ddd-scroll-track{display:flex;align-items:center;gap:34px;width:max-content;padding:28px max(32px,calc((100vw - 1400px)/2 + 36px)) 42px;will-change:transform}
.ddd-scroll-shot{appearance:none;border:0;background:transparent;padding:0;flex:0 0 auto;display:flex;flex-direction:column;gap:14px;text-align:left;color:#fff;scroll-snap-align:center;cursor:zoom-in;transform-origin:center center;transition:transform .35s cubic-bezier(.16,1,.3,1),filter .3s ease;filter:saturate(.94)}
.ddd-scroll-shot img{display:block;height:clamp(330px,56vh,610px);width:auto;max-width:none;object-fit:contain;border-radius:0!important;background:#fff;box-shadow:0 34px 80px rgba(0,0,0,.46),0 0 0 1px rgba(255,255,255,.1)}
.ddd-scroll-shot span{display:block;max-width:min(75vw,680px);padding-left:2px}.ddd-scroll-shot strong{display:block;color:#fff;font-size:1rem}.ddd-scroll-shot small{display:block;margin-top:3px;color:#9fb0a9;font-size:.84rem;line-height:1.4}
@media (hover:hover){.ddd-scroll-shot:hover{transform:translateY(-18px) scale(1.035);filter:saturate(1.04)}.ddd-scroll-shot:hover img{box-shadow:0 48px 110px rgba(0,0,0,.6),0 0 42px rgba(229,178,71,.1)}}
.ddd-scroll-viewport.kw-pinned{overflow:hidden;scroll-snap-type:none}

/* Homepage cards: keep the centered flash, remove the sweeping streak entirely. */
.home-product-tile .product-logo-media::after{display:none!important;content:none!important;animation:none!important}
.home-product-tile .product-logo-media::before{width:14px;height:14px;box-shadow:0 0 22px 9px rgba(255,255,255,.9),0 0 62px 30px rgba(229,178,71,.5),0 0 118px 58px rgba(92,220,169,.2)}
@media (hover:hover){.home-product-tile:hover .product-logo-media::before{animation:kwCameraFlashV3 .92s ease-out 1}}
@keyframes kwCameraFlashV3{0%{opacity:0;transform:scale(.2)}10%{opacity:1;transform:scale(.85)}24%{opacity:.95;transform:scale(1.5)}45%{opacity:.4;transform:scale(5)}100%{opacity:0;transform:scale(10)}}

/* Stronger scroll choreography. */
.kw-motion-ready [data-kw-reveal]{opacity:0;transform:translateY(92px) scale(.93) rotateX(7deg);transform-origin:center bottom}
.kw-motion-ready [data-kw-reveal].kw-revealed{opacity:1;transform:none}

@media(max-width:1050px){
 .ddd-bento-v3{grid-template-columns:1fr 1fr;grid-template-rows:auto}.ddd-bento-v3 .ddd-bento-card,.ddd-bento-v3 .ddd-bento-card.hero,.ddd-bento-v3 .ddd-bento-card.wide{grid-row:auto;grid-column:auto;min-height:360px}.ddd-bento-v3 .ddd-bento-card.wide{grid-column:1/-1}
 .ddd-scroll-shot img{height:clamp(300px,46vh,470px)}
}
@media(max-width:700px){
 .ddd-bento-v3{grid-template-columns:1fr}.ddd-bento-v3 .ddd-bento-card,.ddd-bento-v3 .ddd-bento-card.wide{grid-column:auto;min-height:350px}.ddd-bento-card[data-kw-popout]::after{display:none}
 .ddd-scroll-story{padding:74px 0}.ddd-scroll-track{gap:18px;padding:18px 18px 30px}.ddd-scroll-shot img{height:auto;width:min(88vw,720px);max-width:88vw}.ddd-scroll-shot span{max-width:88vw}.ddd-scroll-viewport{scroll-snap-type:x mandatory}
 .kw-popout-layer{padding:8px}.kw-popout-shell{max-width:98vw;max-height:92vh}.kw-popout-shell img{max-width:96vw;max-height:calc(92vh - 52px)}.kw-popout-close{right:6px;top:6px;width:40px;height:40px}.kw-popout-titlebar{padding-right:54px}
}
@media(prefers-reduced-motion:reduce){.ddd-scroll-shot,.kw-popout-shell,.home-product-tile .product-logo-media::before{animation:none!important;transition:none!important}}


/* Practice DDD bottom showcase — replaces the oversized pinned screenshot story */
.ddd-practice-showcase{padding:110px 0 96px;background:radial-gradient(circle at 82% 12%,rgba(229,178,71,.13),transparent 30%),linear-gradient(180deg,#03110e,#061d17);color:#fff;overflow:hidden}
.ddd-practice-showcase .section-head h2{color:#fff}.ddd-practice-showcase .section-head p{color:#bdcac5}
.ddd-practice-stage{margin-top:38px;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(340px,.65fr);gap:24px;align-items:stretch}
.ddd-practice-main{min-width:0;background:#071713;border:1px solid rgba(255,255,255,.12);box-shadow:0 28px 70px rgba(0,0,0,.28);display:grid;place-items:center;overflow:hidden}
.ddd-practice-main img{display:block;width:100%;height:auto;object-fit:contain;border-radius:0}
.ddd-practice-steps{display:grid;grid-template-columns:1fr;gap:12px}
.ddd-practice-step{appearance:none;width:100%;border:1px solid rgba(255,255,255,.12);background:linear-gradient(145deg,rgba(12,54,42,.95),rgba(3,20,16,.96));color:#fff;padding:10px;display:grid;grid-template-columns:118px minmax(0,1fr);gap:14px;align-items:center;text-align:left;cursor:pointer;box-shadow:0 12px 26px rgba(0,0,0,.18);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.ddd-practice-step:hover,.ddd-practice-step:focus-visible{transform:translateX(-8px) scale(1.02);border-color:rgba(229,178,71,.55);box-shadow:0 18px 36px rgba(0,0,0,.28)}
.ddd-practice-step b{display:block;font-size:.98rem;margin-bottom:4px}.ddd-practice-step small{display:block;color:#b9c8c2;line-height:1.4}
.ddd-practice-thumb{display:block;width:118px;aspect-ratio:16/10;background-image:url('/kw-cinematic-assets/img/ddd-modern/training.webp');background-repeat:no-repeat;background-size:330% auto;border:1px solid rgba(229,178,71,.22)}
.ddd-practice-thumb.practice-banner{background-position:59% 25%}.ddd-practice-thumb.practice-tour{background-position:88% 49%}.ddd-practice-thumb.practice-property{background-position:1% 49%}.ddd-practice-thumb.practice-tools{background-position:1% 92%}
.ddd-practice-hint{margin:18px 0 0;color:#aebdb7;font-size:.9rem}.ddd-practice-hint strong{color:var(--kw-gold-soft)}

/* Focused tutorial zoom inside the authentic screenshot viewer. */
.kw-popout-shell.kw-focused{overflow:hidden}
.kw-popout-shell.kw-focused [data-kw-popout-image]{max-width:none!important;max-height:none!important;width:calc(var(--focus-scale,1.6) * min(86vw,1600px));height:auto;transform-origin:var(--focus-x,50%) var(--focus-y,50%);transform:translate(calc((50% - var(--focus-x,50%)) * .42),calc((50% - var(--focus-y,50%)) * .42)) scale(var(--focus-scale,1.6));transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.kw-popout-full{position:absolute;right:58px;top:11px;z-index:4;border:1px solid rgba(255,255,255,.22);background:rgba(3,25,20,.92);color:#fff;border-radius:8px;padding:8px 11px;font:700 .78rem/1 inherit;cursor:pointer}
.kw-popout-full:hover{border-color:rgba(229,178,71,.6);color:var(--kw-gold-soft)}

@media(max-width:980px){.ddd-practice-stage{grid-template-columns:1fr}.ddd-practice-steps{grid-template-columns:1fr 1fr}.ddd-practice-step{grid-template-columns:96px 1fr}.ddd-practice-thumb{width:96px}.ddd-practice-step:hover{transform:translateY(-4px) scale(1.01)}}
@media(max-width:640px){.ddd-practice-showcase{padding:72px 0}.ddd-practice-steps{grid-template-columns:1fr}.ddd-practice-step{grid-template-columns:86px 1fr}.ddd-practice-thumb{width:86px}.kw-popout-full{right:52px;top:8px;padding:7px 9px}.kw-popout-shell.kw-focused [data-kw-popout-image]{width:calc(var(--focus-scale,1.45) * 92vw)}}

/* Practice DDD v2 — Property Overview plus real walkthrough tour tiles */
.ddd-practice-stage-tiles{grid-template-columns:minmax(0,1.08fr) minmax(520px,.92fr);align-items:start;gap:30px}
.ddd-practice-overview{position:sticky;top:112px;padding:0;border:1px solid rgba(255,255,255,.14);cursor:pointer;text-align:left;display:block;overflow:hidden;background:#061713;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.ddd-practice-overview:hover,.ddd-practice-overview:focus-visible{transform:translateY(-5px);border-color:rgba(229,178,71,.55);box-shadow:0 30px 75px rgba(0,0,0,.38)}
.ddd-practice-overview img{width:100%;height:auto;display:block;border-radius:0}
.ddd-practice-main-caption{display:block;padding:18px 20px 20px;background:linear-gradient(180deg,#073126,#031713);color:#fff;border-top:1px solid rgba(255,255,255,.1)}
.ddd-practice-main-caption b{display:block;font-size:1.08rem;margin-bottom:4px}.ddd-practice-main-caption small{display:block;color:#b9c8c2;line-height:1.48;font-size:.9rem}
.ddd-tour-tile-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:start}
.ddd-tour-tile{appearance:none;border:1px solid rgba(255,255,255,.12);background:linear-gradient(145deg,rgba(10,45,36,.96),rgba(3,19,16,.98));color:#fff;padding:0;text-align:left;cursor:pointer;overflow:hidden;box-shadow:0 14px 30px rgba(0,0,0,.2);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.ddd-tour-tile:hover,.ddd-tour-tile:focus-visible{transform:translateY(-7px) scale(1.018);border-color:rgba(229,178,71,.6);box-shadow:0 22px 44px rgba(0,0,0,.34)}
.ddd-tour-tile img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;background:#f8f6f1;border-radius:0}
.ddd-tour-tile>span{display:block;padding:12px 13px 14px}.ddd-tour-tile b{display:block;font-size:.9rem;line-height:1.28;margin-bottom:4px}.ddd-tour-tile small{display:block;color:#afbeb8;font-size:.76rem;line-height:1.42}
@media(max-width:1180px){.ddd-practice-stage-tiles{grid-template-columns:1fr}.ddd-practice-overview{position:relative;top:auto;max-width:1000px;margin-inline:auto}.ddd-tour-tile-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){.ddd-tour-tile-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ddd-tour-tile-grid{grid-template-columns:1fr}.ddd-tour-tile b{font-size:.98rem}.ddd-tour-tile small{font-size:.82rem}}


/* 2026-08-29 product motion + custom software + contact fallback */
.products-page .page-hero{min-height:calc(100svh - 94px);display:flex;align-items:center}
.products-page .product-catalog{perspective:1400px;perspective-origin:50% 42%}
.products-page .product-catalog .product-tile{transform-style:preserve-3d;backface-visibility:hidden;will-change:transform,opacity}
@media(max-width:760px){.products-page .page-hero{min-height:auto;padding-top:88px;padding-bottom:88px}}
.custom-software-hero{min-height:72vh;display:flex;align-items:center;background:radial-gradient(circle at 72% 35%,rgba(229,178,71,.1),transparent 28%),linear-gradient(135deg,#061914,#03110e);color:#fff}
.custom-software-hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:72px;align-items:center}
.custom-software-hero h1{max-width:900px}.custom-software-mark{display:grid;place-items:center;padding:26px}.custom-software-mark img{width:min(100%,560px);filter:drop-shadow(0 34px 70px rgba(0,0,0,.45))}
.custom-software-grid .glass-card{min-height:270px}.confidentiality-section{border-top:1px solid rgba(229,178,71,.18);border-bottom:1px solid rgba(229,178,71,.18)}
.custom-software-closing{display:flex;justify-content:space-between;gap:40px;align-items:center}.custom-software-closing>div{max-width:820px}
@media(max-width:900px){.custom-software-hero-grid{grid-template-columns:1fr}.custom-software-mark{order:-1}.custom-software-mark img{width:min(82vw,430px)}.custom-software-closing{display:grid}}
.kw-email-fallback{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;padding:24px;background:rgba(0,9,7,.76);backdrop-filter:blur(12px);opacity:0;pointer-events:none;transition:opacity .2s ease}
.kw-email-fallback.open{opacity:1;pointer-events:auto}.kw-email-dialog{position:relative;width:min(560px,94vw);padding:34px;border:1px solid rgba(229,178,71,.36);background:linear-gradient(145deg,#08221b,#03130f);color:#fff;box-shadow:0 40px 120px rgba(0,0,0,.58)}
.kw-email-dialog h2{margin:0 0 10px;font-size:clamp(1.7rem,4vw,2.45rem)}.kw-email-dialog p{color:#c7d3ce}.kw-email-address{display:flex;gap:10px;align-items:center;justify-content:space-between;margin:22px 0 8px;padding:14px 16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);font-weight:800;overflow-wrap:anywhere}.kw-email-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.kw-email-close{position:absolute;right:12px;top:9px;border:0;background:transparent;color:#fff;font-size:32px;cursor:pointer}.kw-email-copy{cursor:pointer}.kw-email-note{font-size:.84rem!important;color:#94a79f!important}

/* 2026-08-29 Products hero refresh + site-wide readability pass */
:root{
  --paper-muted:#27332e;
}
body{font-size:17px}

/* Products page: a different room in the same glass-house world. */
.products-page .page-hero{
  min-height:calc(100svh - 94px);
  display:flex;
  align-items:center;
  background:
    linear-gradient(90deg,rgba(2,15,12,.97) 0%,rgba(2,15,12,.91) 25%,rgba(2,15,12,.63) 38%,rgba(2,15,12,.18) 57%,rgba(2,15,12,0) 72%),
    url('/kw-cinematic-assets/img/products-hero-office.jpg?v=20260829-office2');
  background-size:cover;
  background-position:center right;
}
.products-page .page-hero::after{
  background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.12));
}
.products-page .page-hero .container{max-width:1400px}
.products-page .page-hero h1{max-width:720px;text-shadow:0 2px 24px rgba(0,0,0,.25)}
.products-page .page-hero .lead{max-width:660px;color:#f2f6f4;font-size:1.34rem;line-height:1.62;text-shadow:0 2px 16px rgba(0,0,0,.28)}
.products-page .page-hero .eyebrow{color:#f1c968}

/* Make small light-page copy noticeably easier to read. */
.section:not(.dark) p,
.section:not(.dark) li,
.section:not(.dark) .section-head>p,
.section:not(.dark) .lead,
.card p,
.support-card p,
.contact-card p,
.plan,
.faq p,
.prose p,
.prose li,
.product-tile-body p{
  color:#27332e;
}
.section:not(.dark) p,
.card p,
.support-card p,
.contact-card p,
.product-tile-body p,
.prose p,
.prose li{font-size:1.06rem;line-height:1.68}
.section:not(.dark) .section-head>p{font-size:1.16rem;line-height:1.65}
.section:not(.dark) .lead{font-size:1.22rem}
.breadcrumbs{font-size:1rem}
.footer-bottom{font-size:.94rem}

/* Keep dark areas light and readable after the global contrast pass. */
.section.dark p,.section.dark li,.dark-section p,.featured-dark p,.closing-band p,
.site-footer p,.site-footer li,.product-card p{color:#c7d2cd}

/* The custom software page used white glass-card headings on a light section. */
.custom-software-grid .glass-card{
  background:#fff;
  border-color:rgba(19,33,28,.14);
  box-shadow:0 18px 44px rgba(11,33,25,.09);
}
.custom-software-grid .glass-card h3{color:#13211c;font-size:1.5rem}
.custom-software-grid .glass-card p{color:#27332e!important;font-size:1.06rem;line-height:1.68}
.custom-software-grid .glass-card>span{color:#8a641e}
.custom-software-page .section:not(.dark) h2,
.custom-software-page .section:not(.dark) h3{color:#102019}
.custom-software-page .custom-software-closing p{color:#27332e}

@media(max-width:1000px){
  .products-page .page-hero{
    min-height:82svh;
    background-position:62% center;
    background:
      linear-gradient(90deg,rgba(2,15,12,.97) 0%,rgba(2,15,12,.9) 42%,rgba(2,15,12,.48) 68%,rgba(2,15,12,.18) 100%),
      url('/kw-cinematic-assets/img/products-hero-office.jpg?v=20260829-office2');
    background-size:cover;
  }
}
@media(max-width:760px){
  body{font-size:16.5px}
  .products-page .page-hero{
    min-height:74svh;
    padding-top:92px;
    padding-bottom:78px;
    background-position:66% center;
  }
  .products-page .page-hero .lead{font-size:1.16rem}
}


/* 2026-08-29 FIX: readable copy on dark product/card surfaces site-wide */
.product-tile,
.product-tile-body{
  color:#fff;
}
.product-tile p,
.product-tile-body p,
.clean-product-catalog .product-tile p,
.home-product-tile .product-tile-body p,
.idea-product .product-tile-body p{
  color:#c9d5d0 !important;
}
.product-tile h3,
.product-tile-body h3{
  color:#fff !important;
}
.product-tile .product-kicker,
.product-kicker{
  color:var(--gold-soft) !important;
}
.product-tile .tile-arrow,
.tile-arrow{
  color:var(--gold) !important;
}

/* Other explicitly dark cards keep light copy. */
.section.dark .card p,
.section.dark .support-card p,
.section.dark .contact-card p,
.dark-section .card p,
.featured-dark .card p,
.glass-card p,
.product-card p{
  color:#c7d3ce !important;
}
.section.dark .card h3,
.section.dark .support-card h3,
.section.dark .contact-card h3,
.dark-section .card h3,
.featured-dark .card h3,
.glass-card h3,
.product-card h3{
  color:#fff !important;
}