.support-guide { padding-bottom: 32px; }
.support-guide section { scroll-margin-top: 76px; }
.guide-hero { border-bottom: 1px solid var(--line); }
.guide-hero .hero-title { max-width: 850px; }
.guide-caveat { max-width: 790px; margin: 20px 0 0; color: var(--text-muted); font-size: .92rem; }
.guide-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 26px; }
.guide-jump a { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: .9rem; }
.guide-jump a:hover, .guide-jump a:focus-visible { border-color: var(--accent); }
.guide-flow { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; padding: 0; list-style: none; counter-reset: guide-flow; }
.guide-flow li { position: relative; padding: 30px 12px 12px; min-height: 130px; border: 1px solid var(--line); border-radius: 12px; background: rgba(22,217,90,.055); font-size: .86rem; }
.guide-flow li::before { counter-increment: guide-flow; content: counter(guide-flow); position: absolute; top: 9px; left: 12px; color: var(--accent); font-weight: 800; }
.guide-flow strong { display: block; margin-bottom: 6px; color: var(--accent); }
.guide-section { margin: 34px 0; }
.guide-section-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 15px; }
.guide-section-heading h2 { margin: 0 0 4px; }
.guide-section-heading p { margin: 0; color: var(--text-muted); }
.guide-role { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border: 1px solid var(--accent); border-radius: 50%; color: var(--accent); font-weight: 800; }
.guide-process-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.guide-process { position: relative; display: flex; flex-direction: column; gap: 9px; padding: 18px 18px 18px 58px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.guide-number { position: absolute; top: 18px; left: 18px; display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: var(--accent); color: var(--bg); font-weight: 800; }
.guide-process h3, .guide-process p { margin: 0; }
.guide-process p { color: var(--text-muted); }
.guide-process small { display: block; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); color: var(--accent); font-size: .88rem; }
.guide-screens { margin-top: 34px; }
.guide-screen-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; max-width: 980px; margin-top: 18px; }
.guide-screen-card { margin: 0; min-width: 0; border: 1px solid var(--line); border-radius: 15px; overflow: hidden; background: rgba(0,0,0,.16); }
.guide-screen-wrap { position: relative; background: #082744; }
.guide-screen-wrap img { display: block; width: 100%; height: auto; }
.guide-pin { position: absolute; display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid white; border-radius: 50%; background: var(--accent); color: #07301d; font-size: 14px; font-weight: 800; box-shadow: 0 2px 10px #061a32; }
.pin-manager-people { top: 18%; left: 86%; } .pin-manager-projects { top: 26%; left: 86%; } .pin-manager-hours { top: 78%; left: 86%; }
.pin-web-workers { top: 11%; left: 11%; } .pin-web-projects { top: 11%; left: 27%; } .pin-web-timesheet { top: 78%; left: 34%; }
.pin-invite-email { top: 50%; left: 31%; } .pin-invite-name { top: 50%; left: 66%; } .pin-invite-manager { top: 59%; left: 35%; } .pin-invite-send { top: 67%; left: 55%; }
.pin-project-crew { top: 47%; left: 24%; } .pin-project-worker { top: 61%; left: 16%; } .pin-project-shift { top: 75%; left: 73%; }
.pin-housing-room { top: 50%; left: 18%; } .pin-housing-occupied { top: 63%; left: 26%; } .pin-housing-available { top: 73%; left: 23%; }
.pin-fleet-vehicle { top: 63%; left: 13%; } .pin-fleet-seats { top: 63%; left: 34%; } .pin-fleet-add { top: 24%; left: 91%; }
.pin-task-new { top: 59%; left: 39%; } .pin-task-sent { top: 75%; left: 84%; }
.guide-screen-card figcaption { display: grid; gap: 7px; padding: 14px; color: var(--text-muted); font-size: .88rem; }
.guide-screen-card figcaption strong { color: var(--text); font-size: 1rem; }
.guide-close { margin-top: 30px; border-color: rgba(22,217,90,.44); background: linear-gradient(135deg,rgba(22,217,90,.13),var(--surface)); }
.guide-walkthrough { margin-top: 22px; }
.guide-walkthrough .guide-role { width:64px; height:64px; font-size:.75rem; white-space:nowrap; }
.guide-chapter-nav { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 8px; }
.guide-chapter-nav a { padding:8px 12px; border:1px solid var(--line); border-radius:999px; background:rgba(22,217,90,.06); font-weight:700; font-size:.86rem; }
.guide-chapter-nav a:hover,.guide-chapter-nav a:focus-visible { border-color:var(--accent); }
.guide-chapter { display:grid; grid-template-columns:46px minmax(0,1fr); gap:15px; padding:28px 0; border-top:1px solid var(--line); scroll-margin-top:76px; }
.guide-chapter-number { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--accent); color:#052319; font-weight:900; }
.guide-chapter-body { min-width:0; }
.guide-chapter h3 { margin:4px 0 12px; font-size:1.35rem; }
.guide-chapter p { margin:0 0 14px; line-height:1.65; }
.guide-chapter code { padding:1px 5px; border:1px solid var(--line); border-radius:4px; overflow-wrap:anywhere; }
.guide-outcome { padding:11px 14px; border-left:3px solid var(--accent); border-radius:0 9px 9px 0; background:rgba(22,217,90,.07); color:var(--text); }
.guide-example,.guide-detail { padding:11px 14px; border:1px solid var(--line); border-radius:9px; background:rgba(255,255,255,.04); }
.guide-inline-shot { max-width:980px; margin:18px 0; border:1px solid var(--line); border-radius:13px; overflow:hidden; background:var(--surface); }
.guide-compact-shot { max-width:625px; }
.guide-inline-shot .guide-screen-wrap { line-height:0; }
.guide-inline-shot a { display:block; }
.guide-inline-shot img { display:block; width:100%; height:auto; }
.guide-inline-shot figcaption { padding:11px 14px; color:var(--text-muted); font-size:.92rem; line-height:1.5; }
.guide-inline-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; align-items:start; }
.guide-walkthrough .guide-inline-pair { grid-template-columns:1fr; }
.guide-inline-pair .guide-inline-shot { margin:8px 0 16px; }
.guide-inline-shot .guide-pin { pointer-events:none; line-height:1; }
.guide-pin-a { top:14%; left:5%; } .guide-pin-b { top:2%; left:36%; } .guide-pin-c { top:42%; left:18%; }
.guide-pin-d { top:20%; left:83%; } .guide-pin-e { top:51%; left:22%; }
.guide-pin-f { top:57%; left:17%; } .guide-pin-g { top:85%; left:31%; }
.guide-pin-h { top:46%; left:10%; } .guide-pin-i { top:62%; left:14%; } .guide-pin-j { top:68%; left:68%; }
.guide-pin-k { top:29%; left:42%; } .guide-pin-l { top:55%; left:22%; } .guide-pin-m { top:69%; left:22%; }
.guide-pin-n { top:25%; left:89%; } .guide-pin-o { top:57%; left:14%; } .guide-pin-p { top:60%; left:39%; } .guide-pin-q { top:75%; left:54%; }
.guide-pin-r { top:46%; left:20%; }
.guide-pin-s { top:33%; left:12%; } .guide-pin-t { top:40%; left:27%; } .guide-pin-u { top:53%; left:23%; }
.guide-pin-v { top:43%; left:18%; } .guide-pin-w { top:68%; left:19%; } .guide-pin-x { top:82%; left:12%; }
.guide-pin-y { top:70%; left:56%; } .guide-pin-z { top:68%; left:86%; }
.guide-pin-aa { top:43%; left:10%; } .guide-pin-ab { top:57%; left:22%; } .guide-pin-ac { top:88%; left:18%; }
.guide-mobile-note { padding:18px; border:1px solid var(--line); border-radius:13px; background:rgba(22,217,90,.06); }
.guide-mobile-note h3 { margin:0 0 8px; }
.guide-mobile-note p { margin:0; line-height:1.6; }
@media (max-width: 760px) { .guide-flow { grid-template-columns: repeat(2,minmax(0,1fr)); } .guide-screen-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 560px) { .guide-flow, .guide-process-grid, .guide-screen-grid, .guide-inline-pair { grid-template-columns: 1fr; } .guide-flow li { min-height: 0; } .guide-screen-card { max-width: 360px; margin-inline: auto; } .guide-process { padding-right: 14px; } .guide-chapter { grid-template-columns:1fr; gap:5px; } .guide-inline-shot .guide-pin { width:22px; height:22px; font-size:11px; } }