/* dc-hero-fog.css
   Homepage hero: copy on the left, "signal from fog" animation on the right.
   Loaded only by index.php, after header2026.html, so these rules override the
   original hero rules there. Delete this file and its <link> to roll back. */

.dc-hero-wrap{
}

/* ── layout: sized for the site's 1000px column ── */
.dc-hero-wrap .dc-hero{
  grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
  gap:40px;
  align-items:center;
  padding:10px 0 48px;
}
.dc-hero-wrap .dc-hero-text{ min-width:0; }
@media (min-width:821px){
  /* lift the copy so it starts level with the top of the animation, without moving the animation */
  .dc-hero-wrap .dc-hero-text{ position:relative; top:-59px; }
}
.dc-hero-wrap .dc-title{ margin:0 0 24px; }
.dc-hero-wrap .dc-proof{ margin-top:18px; padding-top:16px; }
.dc-hero-wrap .dc-ctas{ margin-top:30px; }

/* ── animation ── */
.dc-sig{ min-width:0; width:100%; max-width:600px; justify-self:end; }
.dc-sig-canvas{ display:block; width:100%; aspect-ratio:400/380; max-width:100%; margin-top:-20px; }
.dc-sig-fallback{ display:block; width:100%; max-width:425px; height:auto; margin:0 auto; }
.dc-sig button:focus-visible{ outline:3px solid #bcd7f4; outline-offset:2px; border-radius:6px; }

/* ── timeline: sliding strip, current stage centered, edges fade to white ── */
.dc-tl{
  /* overflow:hidden is needed to clip the sliding strip, so give the pulse rings
     room inside the box: 18px of padding above, offset by a matching negative margin */
  position:relative; z-index:1; margin-top:-22px; padding:18px 0 6px; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%,#000 76%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 24%,#000 76%,transparent 100%);
  transition:opacity .7s ease;
}
.dc-tl.hide{ opacity:0; pointer-events:none; }
.dc-tl-track{ display:flex; align-items:flex-start; width:max-content; will-change:transform; }
.dc-tl-track.anim{ transition:transform .9s cubic-bezier(.65,0,.35,1); }
.dc-tl-step{
  all:unset; cursor:pointer; position:relative; display:block; flex:none;
  width:var(--iw,170px); padding:0 8px 4px; box-sizing:border-box; text-align:center;
}
.dc-tl-step::before,.dc-tl-step::after{
  content:""; position:absolute; top:10px; height:2px; background:var(--dc2-line); transition:background .4s;
}
.dc-tl-step::before{ left:0; right:50%; }
.dc-tl-step::after{ left:50%; right:0; }
.dc-tl-step:first-child::before,.dc-tl-step:last-child::after{ display:none; }
.dc-tl-step.done::before,.dc-tl-step.done::after,.dc-tl-step.on::before{ background:var(--dc2-blue); }
.dc-tl-dot{
  display:block; width:12px; height:12px; margin:5px auto 0; border-radius:50%;
  background:#fff; border:2px solid #cfd4dc; position:relative; z-index:1;
  transition:border-color .3s, background .3s, transform .4s;
}
.dc-tl-step.done .dc-tl-dot{ background:var(--dc2-blue); border-color:var(--dc2-blue); }
.dc-tl-step.next .dc-tl-dot{ border-color:var(--dc2-blue); }
.dc-tl-step.on .dc-tl-dot{ background:var(--dc2-blue); border-color:var(--dc2-blue); transform:scale(1.35); }
.dc-tl-step.on .dc-tl-dot::after{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid var(--dc2-blue); opacity:.35; animation:dcPulse 1.8s ease-out infinite;
}
@keyframes dcPulse{ 0%{ transform:scale(.6); opacity:.5; } 100%{ transform:scale(1.5); opacity:0; } }
.dc-tl-k{
  display:block; margin-top:12px; font-family:var(--font-head); font-size:var(--fs-lede); font-weight:600;
  letter-spacing:-.01em; line-height:var(--lh-snug); color:#a3a8b2; transition:color .4s;
}
.dc-tl-d{
  display:block; margin-top:3px; font-family:var(--font-body); font-size:var(--fs-small); line-height:var(--lh-snug);
  color:#b4b9c2; transition:color .4s;
}
.dc-tl-step.done .dc-tl-k{ color:var(--dc2-ink-mute); }
.dc-tl-step.next .dc-tl-k{ color:var(--dc2-ink-soft); }
.dc-tl-step.on .dc-tl-k{ color:var(--dc2-blue); }
.dc-tl-step.on .dc-tl-d{ color:var(--dc2-ink-soft); }
.dc-tl-step:hover .dc-tl-k{ color:var(--dc2-ink); }
.dc-tl-step:focus-visible{ outline:3px solid #bcd7f4; outline-offset:-3px; border-radius:8px; }

.dc-tl-foot{ display:flex; justify-content:flex-end; margin-top:10px; }
.dc-sig-pause{
  all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-head); font-size:var(--fs-label); font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--dc2-ink-mute); min-height:28px;
}
.dc-sig-pause:hover{ color:var(--dc2-blue); }
.dc-sig-pause svg{ width:9px; height:9px; fill:currentColor; }
.dc-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

@media (prefers-reduced-motion:reduce){
  .dc-tl-step.on .dc-tl-dot::after{ animation:none; }
  .dc-tl-track.anim,.dc-tl-dot,.dc-tl{ transition:none; }
}
@media (max-width:820px){
  .dc-hero-wrap .dc-hero{ grid-template-columns:1fr; gap:20px; padding:6px 0 32px; }
  .dc-sig{ max-width:480px; margin-inline:auto; justify-self:center; }
}