@layer site {
/* Home page styles (design-handoff/source/Home.dc.html <style>), plus the phone-width
   fixes from spec/05 (#4 hero numbers, #5 process desk as a list). */

.pg-home .site { position: relative; }
.pg-home .em { letter-spacing: -0.01em; }

.dither { background-image: conic-gradient(#FFFFFF 25%, transparent 0 50%, #FFFFFF 0 75%, transparent 0); background-size: 6px 6px; }
.dither-teal { background-image: conic-gradient(#3796A4 25%, transparent 0 50%, #3796A4 0 75%, transparent 0); background-size: 6px 6px; }

.pathcard { transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease; }
.pathcard:hover { box-shadow: 6px 6px 0 #073A43 !important; }

.progress { position: fixed; left: 0; top: 0; width: 100%; height: 4px; background: #3796A4; transform-origin: 0 50%; transform: scaleX(0); z-index: 40; pointer-events: none; }
@keyframes rise { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: scroll()) { .progress { animation: grow linear both; animation-timeline: scroll(root); } }
@supports (animation-timeline: view()) { .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% cover 22%; } }

.drag { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
[data-win] { will-change: transform; }
.drag:active { cursor: grabbing; }
.winbtn { width: 18px; height: 18px; padding: 0; border: 1.5px solid currentColor; background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1; }
.winbtn:hover { background: rgba(255,255,255,.25); }
.seg { transition: background-color .2s ease; }
.seg:hover { outline: 2px solid #3796A4; outline-offset: 1px; }

.cta { transition: background-color .3s ease; }
.cta:hover { background: #194F57 !important; color: #FFFFFF !important; }
.cta .arr { display: inline-block; transition: transform .3s ease; }
.cta:hover .arr { transform: translateX(12px); }

.boot { animation: bootin .25s ease-out; }
@keyframes bootin { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.boot-wrap[hidden] { display: none !important; }

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .chev { transform: rotate(45deg); }

/* Window body hidden when minimized / role list collapsed (JS toggles [hidden]) */
[data-win-body][hidden], [data-role-list][hidden] { display: none !important; }

@media (max-width: 759.98px) {
  /* spec/05 fix #4: the hero numbers sit on the dithered circle at phone width.
     A white ground keeps them at ≥ 4.5:1 contrast. */
  .home-stats { background: #FFFFFF; padding: 12px 14px !important; margin-left: -14px !important; margin-right: -14px !important; }

  /* spec/05 fix #5: the six stages become a plain vertical list of the same cards
     (no dragging, no connector lines). */
  .pdesk-scroll { overflow: visible !important; border: 0 !important; background: none !important; }
  .pdesk { width: auto !important; height: auto !important; display: flex; flex-direction: column; gap: 20px; }
  .pdesk .plink { display: none; }
  .pdesk [data-win] { position: relative !important; left: auto !important; top: auto !important; width: auto !important; transform: none !important; }
  .pdesk [data-win] .drag { cursor: default; touch-action: auto; }
  .pdesk [data-win="note"] { cursor: default; touch-action: auto; }
  .pdesk-arrange { display: none !important; }
}

}