/* Access One: desktop-only layout layer (>=1100px). Mobile and tablet are untouched. */
.dk-trust,.dk-fl,.dk-blob{display:none}
@media (min-width:1100px){
  .w{max-width:1200px;padding:0 48px}
  /* hero: copy left, live demo right */
  .hero{padding:56px 0 0;background:radial-gradient(900px 500px at 85% 20%,#e8f0fe 0,rgba(232,240,254,0) 70%)}
  .dk-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;text-align:left}
  .dk-copy h1{font-size:64px;letter-spacing:-.035em}
  .dk-copy .lede{margin-left:0;font-size:19px;max-width:30em}
  .dk-copy .ctas{justify-content:flex-start}
  .dk-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;list-style:none;margin:40px 0 0;padding:26px 0 0;border-top:1px solid var(--rule)}
  .dk-trust li{font-size:13.5px;color:var(--muted);line-height:1.4}
  .dk-trust b{display:block;font:500 20px/1.2 var(--head);color:var(--ink);margin-bottom:4px}
  .dk-vis{position:relative;padding:40px 0 30px}
  .dk-vis .stage{max-width:420px;height:350px;margin:0 auto}
  .dk-vis .rail{max-width:420px}
  .dk-blob{display:block;position:absolute;inset:0 -20px;background:linear-gradient(135deg,#1a73e8 0,#4285f4 45%,#34a853 100%);border-radius:36px;opacity:.09;transform:rotate(-3deg)}
  .dk-fl{display:flex;position:absolute;z-index:3;align-items:center;gap:12px;background:#fff;border:1px solid #dadce0;border-radius:16px;padding:12px 16px;box-shadow:0 2px 6px rgba(60,64,67,.12),0 12px 32px rgba(60,64,67,.14);font-size:14px;text-align:left;animation:dkFloat 6s ease-in-out infinite}
  .dk-fl b{display:block;font:500 14.5px/1.2 var(--head)} .dk-fl small{color:var(--muted);font-size:12.5px}
  .dk-ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;font-weight:700}
  .dk-ic.wa{background:var(--wa)} .dk-ic.ok{background:#e6f4ea;color:var(--gr)}
  .dk-f1{top:-18px;left:-84px}
  .dk-f2{bottom:-44px;right:-80px;flex-direction:column;align-items:stretch;width:200px;animation-delay:-2s}
  .dk-f3{bottom:120px;left:-124px;animation-delay:-4s}
  .dk-bars{display:flex;align-items:flex-end;gap:6px;height:56px;margin-top:8px}
  .dk-bars i{flex:1;height:var(--h);background:linear-gradient(var(--blue),#8ab4f8);border-radius:4px 4px 2px 2px;transform-origin:bottom;animation:dkGrow 3.2s ease-in-out infinite alternate}
  .dk-bars i:nth-child(2n){animation-delay:-.8s}.dk-bars i:nth-child(3n){animation-delay:-1.6s}
  @keyframes dkFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
  @keyframes dkGrow{from{transform:scaleY(.82)}to{transform:scaleY(1)}}
  .ticker{margin-top:64px}

  /* content sections: heading column left, visual right */
  #leak .w,#loopsec .w,#who .w,#h48 .w{display:grid;grid-template-columns:5fr 7fr;column-gap:72px;align-items:start;text-align:left}
  #leak .w>.lab,#leak .w>h2,#leak .w>.lede,#loopsec .w>.lab,#loopsec .w>h2,#loopsec .w>.lede,#who .w>.lab,#who .w>h2,#who .w>.lede,#h48 .w>.lab,#h48 .w>h2,#h48 .w>.lede{grid-column:1;justify-self:start}
  #leak .lede,#loopsec .lede,#who .lede,#h48 .lede{margin-left:0}
  #leak .leak,#loopsec .learn,#who .who{grid-column:2;grid-row:1 / span 4;margin:0;max-width:none}
  #leak .leak{grid-template-columns:1fr 1fr;align-self:center}
  #loopsec .learn{align-self:center}
  #loopsec .legend2{grid-column:2;justify-content:flex-start}
  #who .who{grid-template-columns:1fr;gap:14px;align-self:center}
  #who .who .panel{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
  #who .who .panel h3{width:180px;margin:0}
  #who .who .panel span{margin:0}
  /* speed band: text left, big counter right */
  #h48 .hrs,#h48 .bar48,#h48 .ticks{grid-column:2;width:100%;max-width:none}
  #h48 .hrs{grid-row:1 / span 3;font-size:180px;text-align:right;margin:0}
  #h48 .bar48{grid-row:3;margin:10px 0}
  #h48 .ticks{grid-row:4}
  /* what you get: left-aligned header, 4 across */
  #get .w{text-align:left}
  #get .lede{margin-left:0}
  #get .get{grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px}
  #get .mini{height:120px}
  /* closing CTA: split */
  #close .w{display:grid;grid-template-columns:1.2fr .8fr;column-gap:64px;align-items:center;text-align:left}
  #close h2,#close .lede{grid-column:1;margin-left:0}
  #close .ctas{grid-column:2;grid-row:1 / span 2;justify-content:flex-end}
}
@media (min-width:1100px) and (prefers-reduced-motion:reduce){.dk-fl,.dk-bars i{animation:none}}