/* Role journeys and connected-workday diagrams.
   HTML/CSS keeps every flow step responsive, accessible, and directly linked. */

.product-journey-hero { padding-bottom: 18px; }
.product-hero-copy { max-width: 850px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.hero-actions .mini-button {
  min-height: 42px; padding: 10px 16px; display: inline-flex; align-items: center;
  justify-content: center; text-decoration: none; font-size: 13px;
}

.workflow-section,
.connected-workday {
  border: 1px solid var(--border-default);
  border-radius: 20px;
  background: var(--surface-card);
  box-shadow: 0 12px 34px rgba(16, 27, 58, .07);
  overflow: hidden;
}
.workflow-section-head { padding: 26px 26px 18px; }
.workflow-section-head h2 { margin: 4px 0 8px; font-size: clamp(22px, 3vw, 30px); letter-spacing: -.5px; }
.workflow-section-head p { margin: 0; max-width: 850px; color: var(--text-secondary); font-size: 14px; line-height: 1.6; }
.workflow-kicker,
.workflow-eyebrow {
  display: inline-block; color: var(--brand-indigo-700); font-size: 11px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
}

.workflow-role-tabs {
  display: flex; gap: 6px; overflow-x: auto; padding: 0 20px 14px;
  border-bottom: 1px solid var(--border-default); scrollbar-width: none;
}
.workflow-role-tabs::-webkit-scrollbar { display: none; }
.workflow-role-tab {
  flex: 1 0 170px; min-height: 68px; padding: 10px 14px; border: 1px solid transparent;
  border-radius: 14px; background: var(--surface-muted); color: var(--text-primary);
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.workflow-role-tab:hover { border-color: var(--border-brand); background: var(--brand-lavender-50); }
.workflow-role-tab[aria-selected="true"] {
  background: var(--brand-indigo-700); color: var(--text-inverse); border-color: var(--brand-indigo-700);
  box-shadow: 0 8px 20px rgba(16, 27, 58, .12);
}
.workflow-role-tab:focus-visible { outline: 3px solid var(--focus-outline); outline-offset: 2px; }
.workflow-tab-icon {
  width: 38px; height: 38px; border-radius: 50%; background: var(--surface-card);
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.workflow-tab-icon img { width: 26px; height: 26px; object-fit: contain; }

.workflow-panel { padding: 24px 26px 28px; }
.workflow-panel[hidden] { display: none; }
.workflow-panel-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 22px;
}
.workflow-panel-head h3 { margin: 4px 0 7px; font-size: 21px; }
.workflow-panel-head p { margin: 0; max-width: 720px; color: var(--text-secondary); font-size: 14px; line-height: 1.55; }
.workflow-panel-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; flex: 0 0 auto; }
.workflow-panel-actions .mini-button { text-decoration: none; min-height: 40px; display: inline-flex; align-items: center; }

.workflow-track-wrap {
  overflow-x: auto; padding: 8px 3px 16px; scrollbar-width: thin;
  scrollbar-color: var(--border-brand) transparent;
}
.workflow-track {
  display: flex; align-items: stretch; gap: 34px; width: max-content; min-width: 100%;
}
.workflow-step {
  position: relative; width: 176px; min-height: 158px; padding: 18px 16px 16px;
  border: 1px solid var(--border-default); border-radius: 16px; background: var(--surface-card);
  color: var(--text-primary); text-decoration: none; display: flex; flex-direction: column; gap: 7px;
  box-shadow: 0 5px 16px rgba(16, 27, 58, .06); transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.workflow-step:hover {
  transform: translateY(-3px); border-color: var(--border-brand); box-shadow: 0 10px 24px rgba(16, 27, 58, .1);
}
.workflow-step:focus-visible { outline: 3px solid var(--focus-outline); outline-offset: 3px; }
.workflow-step:not(:last-child)::after {
  content: ""; position: absolute; right: -25px; top: 50%; width: 16px; height: 2px;
  background: var(--border-brand); transform: translateY(-50%);
}
.workflow-step:not(:last-child)::before {
  content: ""; position: absolute; right: -25px; top: calc(50% - 5px);
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
  border-left: 8px solid var(--border-brand);
}
.workflow-step-number {
  width: 30px; height: 30px; border-radius: 50%; background: var(--brand-lavender-100);
  color: var(--brand-indigo-700); font-size: 12px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.workflow-step strong { font-size: 14px; line-height: 1.35; }
.workflow-step > span:last-child { color: var(--text-secondary); font-size: 12px; line-height: 1.5; }

.workflow-branches { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border-subtle); }
.workflow-branches h4 { margin: 0 0 12px; font-size: 13px; }
.workflow-branch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.workflow-branch {
  min-height: 92px; border: 1px dashed var(--border-brand); border-radius: 13px;
  background: var(--brand-lavender-50); padding: 13px 14px; text-decoration: none; color: var(--text-primary);
  display: flex; flex-direction: column; gap: 5px;
}
.workflow-branch:hover { border-style: solid; background: var(--brand-lavender-100); }
.workflow-branch:focus-visible { outline: 3px solid var(--focus-outline); outline-offset: 2px; }
.workflow-branch strong { font-size: 13px; }
.workflow-branch span { color: var(--text-secondary); font-size: 12px; line-height: 1.45; }

.connected-workday { margin: 26px 0; padding-bottom: 18px; background: var(--brand-lavender-50); }
.connected-track { padding: 0 26px 8px; box-sizing: border-box; }
.connected-step { background: var(--surface-card); }
.connected-product {
  display: inline-flex; align-self: flex-start; padding: 3px 8px; border-radius: 999px;
  background: var(--brand-lavender-100); color: var(--brand-indigo-700) !important;
  font-size: 10px !important; font-weight: 800;
}

#workflows, #whats-new, #guides, #use, #deploy, #troubleshoot { scroll-margin-top: 220px; }

@media (max-width: 900px) {
  .workflow-panel-head { flex-direction: column; }
  .workflow-panel-actions { justify-content: flex-start; }
  .workflow-branch-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .workflow-section-head { padding: 20px 16px 14px; }
  .workflow-role-tabs { padding: 0 12px 12px; }
  .workflow-role-tab { flex-basis: 156px; min-height: 62px; padding: 9px 11px; }
  .workflow-tab-icon { width: 34px; height: 34px; }
  .workflow-tab-icon img { width: 23px; height: 23px; }
  .workflow-panel { padding: 20px 16px 22px; }
  .workflow-panel-actions { width: 100%; }
  .workflow-panel-actions .mini-button { flex: 1 1 180px; justify-content: center; }
  .workflow-track-wrap { overflow: visible; padding-bottom: 4px; }
  .workflow-track { width: 100%; min-width: 0; flex-direction: column; gap: 28px; }
  .workflow-step { width: auto; min-height: 0; padding: 16px 16px 16px 58px; }
  .workflow-step-number { position: absolute; left: 16px; top: 16px; }
  .workflow-step:not(:last-child)::after {
    left: 30px; right: auto; top: auto; bottom: -23px; width: 2px; height: 16px;
    transform: none;
  }
  .workflow-step:not(:last-child)::before {
    left: 25px; right: auto; top: auto; bottom: -28px;
    border-left: 6px solid transparent; border-right: 6px solid transparent;
    border-top: 8px solid var(--border-brand); border-bottom: 0;
  }
  .workflow-branch-grid { grid-template-columns: 1fr; }
  .connected-track { padding: 0 16px 8px; }
  #workflows, #whats-new, #guides, #use, #deploy, #troubleshoot { scroll-margin-top: 130px; }
}

/* TWO-PATH PROFESSIONAL REVAMP */
.path-choice,.journey-section,.role-page-journeys{margin:30px 0;border:1px solid var(--border-subtle);border-radius:22px;background:var(--surface-card);box-shadow:0 10px 28px rgba(16,27,58,.06);overflow:hidden}
.path-choice-head,.journey-section-head{padding:28px 30px 18px}.path-choice-head h2,.journey-section-head h2{margin:5px 0 8px}.path-choice-head p,.journey-section-head p{max-width:900px;margin:0;color:var(--text-secondary);line-height:1.7}
.path-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:0 30px 30px}.path-choice-card{position:relative;min-height:190px;padding:24px;border:1px solid var(--border-subtle);border-radius:18px;text-decoration:none;color:var(--text-primary);background:linear-gradient(145deg,var(--surface-card),var(--brand-lavender-50));display:flex;flex-direction:column;gap:9px;transition:.16s ease}.path-choice-card:hover{transform:translateY(-3px);border-color:var(--border-brand);box-shadow:0 12px 26px rgba(16,27,58,.1)}.path-choice-card>span{font-size:12px;font-weight:800;color:var(--brand-indigo-700)}.path-choice-card strong{font-size:24px}.path-choice-card p{margin:0;color:var(--text-secondary);line-height:1.6}.path-choice-card em{margin-top:auto;font-style:normal;font-weight:700;color:var(--brand-indigo-700)}
.journey-family{padding:24px 30px 30px;border-top:1px solid var(--border-subtle)}.journey-family-head{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;margin-bottom:18px}.journey-family-head h3{margin:4px 0 7px}.journey-family-head p{max-width:780px;margin:0;color:var(--text-secondary);line-height:1.65}.journey-outcome{min-width:220px;max-width:280px;border-left:3px solid var(--brand-indigo-700);padding:8px 0 8px 14px;display:flex;flex-direction:column;gap:4px}.journey-outcome span{font-size:12px;color:var(--text-secondary);line-height:1.45}
.task-stage-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.task-stage-card{position:relative;min-height:175px;padding:18px;border:1px solid var(--border-subtle);border-radius:16px;text-decoration:none;color:var(--text-primary);display:flex;flex-direction:column;gap:8px;background:var(--surface-card);transition:.16s ease}.task-stage-card:hover{transform:translateY(-2px);border-color:var(--border-brand);box-shadow:0 10px 22px rgba(16,27,58,.08)}.task-stage-number{position:absolute;right:15px;top:14px;font-weight:800;color:var(--brand-indigo-700)}.task-stage-role{font-size:10px;text-transform:uppercase;letter-spacing:.07em;font-weight:800;color:var(--text-secondary);padding-right:28px}.task-stage-card strong{font-size:15px;line-height:1.4}.task-stage-card>span:not(.task-stage-number):not(.task-stage-role){font-size:12px;color:var(--text-secondary);line-height:1.55}.task-stage-card em{font-style:normal;font-size:11px;font-weight:700;color:var(--brand-indigo-700);margin-top:auto}
.role-foundation-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0 22px}.role-foundation-card{padding:15px 16px;border:1px solid var(--border-subtle);border-radius:13px;background:var(--brand-lavender-50);display:flex;flex-direction:column;gap:5px}.role-foundation-card strong{font-size:12px}.role-foundation-card span{font-size:12px;color:var(--text-secondary);line-height:1.5}
.role-product-journeys{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;padding:0 30px 30px}.role-product-journey{min-height:165px;padding:20px;border:1px solid var(--border-subtle);border-radius:16px;text-decoration:none;color:var(--text-primary);display:flex;flex-direction:column;gap:8px;background:var(--surface-card);transition:.16s ease}.role-product-journey:hover{transform:translateY(-2px);border-color:var(--border-brand);box-shadow:0 10px 22px rgba(16,27,58,.08)}.role-product-kicker{font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:800;color:var(--brand-indigo-700)}.role-product-journey strong{font-size:16px;line-height:1.4}.role-product-journey>span:not(.role-product-kicker){font-size:12px;color:var(--text-secondary);line-height:1.5}.role-product-journey em{margin-top:auto;font-size:12px;font-style:normal;font-weight:700;color:var(--brand-indigo-700)}
#by-task,#by-role,#whats-new,#guides,#troubleshoot{scroll-margin-top:220px}
@media(max-width:900px){.task-stage-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.journey-family-head{flex-direction:column}.journey-outcome{max-width:none}.role-product-journeys{grid-template-columns:1fr}}
@media(max-width:600px){.path-choice-grid,.task-stage-grid,.role-foundation-grid{grid-template-columns:1fr}.path-choice-head,.journey-section-head,.journey-family{padding-left:16px;padding-right:16px}.path-choice-grid,.role-product-journeys{padding-left:16px;padding-right:16px}.path-choice-card{min-height:170px}.task-stage-card{min-height:145px}#by-task,#by-role,#whats-new,#guides,#troubleshoot{scroll-margin-top:130px}}


/* ================================================================
   SaaS experience layer — keeps exactly two paths: By Task / By Role
   ================================================================ */
html[data-product] { --product-accent: var(--experience-violet); --product-soft: var(--experience-violet-soft); }
html[data-product="mrounds"] { --product-accent: #6d28d9; --product-soft: #f5f3ff; }
html[data-product="imaintenance"] { --product-accent: #2563eb; --product-soft: #eff6ff; }
html[data-product="ipermits"] { --product-accent: #c2415d; --product-soft: #fff1f2; }
html[data-product="digital-work-instructions"] { --product-accent: #0f766e; --product-soft: #f0fdfa; }
html[data-product="mworkorder"] { --product-accent: #4f46e5; --product-soft: #eef2ff; }
html[data-product="minventory"] { --product-accent: #15803d; --product-soft: #f0fdf4; }
html[data-product="minspections"] { --product-accent: #b45309; --product-soft: #fffbeb; }
html[data-product="massettag"] { --product-accent: #0891b2; --product-soft: #ecfeff; }

html[data-product] .product-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
html[data-product] .product-hero::after {
  content: "";
  position: absolute;
  inset: auto -8% -60% 45%;
  height: 240px;
  border-radius: 999px;
  background: radial-gradient(circle, color-mix(in srgb, var(--product-accent) 22%, transparent), transparent 68%);
  z-index: -1;
  pointer-events: none;
}
html[data-product] .product-mark,
html[data-product] .release-badge,
html[data-product] .workflow-kicker { color: var(--product-accent); }

.path-choice {
  border-color: color-mix(in srgb, var(--product-accent) 18%, var(--border-subtle));
  background: linear-gradient(180deg, var(--surface-card), color-mix(in srgb, var(--product-soft) 45%, white));
}
.path-choice-grid { align-items: stretch; }
.path-choice-card {
  overflow: hidden;
  border-width: 1px;
  background: var(--surface-card);
}
.path-choice-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: var(--experience-blue);
}
.path-choice-card:nth-child(2)::before { background: var(--experience-violet); }
.path-choice-card:nth-child(1) { background: linear-gradient(145deg, white, var(--experience-blue-soft)); }
.path-choice-card:nth-child(2) { background: linear-gradient(145deg, white, var(--experience-violet-soft)); }
.path-choice-card:nth-child(1) > span,
.path-choice-card:nth-child(1) em { color: var(--experience-blue); }
.path-choice-card:nth-child(2) > span,
.path-choice-card:nth-child(2) em { color: var(--experience-violet); }
.path-choice-card strong { letter-spacing: -.02em; }
.path-choice-card em::after { content: "  →"; }
.path-onboarding-note {
  margin: -8px 30px 30px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px dashed color-mix(in srgb, var(--product-accent) 30%, var(--border-default));
  border-radius: 14px;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--product-soft) 70%, white);
  font-size: 13px;
}
.path-onboarding-note strong { color: var(--text-primary); }
.path-onboarding-note span:last-child { white-space: nowrap; }

.journey-section,
.workflow-section.role-journeys { border-color: var(--border-subtle); }
.journey-section-head,
.workflow-section-head {
  position: relative;
  border-bottom: 1px solid var(--border-subtle);
  background: linear-gradient(90deg, color-mix(in srgb, var(--product-soft) 85%, white), white 70%);
}
.journey-section-head::before,
.workflow-section-head::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--product-accent);
}

.journey-family {
  position: relative;
  border-top: 0;
  border-bottom: 1px solid var(--border-subtle);
}
.journey-family:last-child { border-bottom: 0; }
.journey-family::before {
  content: "";
  position: absolute;
  inset: 18px auto 18px 0;
  width: 4px;
  border-radius: 999px;
  background: var(--journey-accent, var(--experience-blue));
}
.journey-family:nth-of-type(1) { --journey-accent: var(--experience-blue); --journey-soft: var(--experience-blue-soft); }
.journey-family:nth-of-type(2) { --journey-accent: var(--experience-violet); --journey-soft: var(--experience-violet-soft); }
.journey-family:nth-of-type(3) { --journey-accent: var(--experience-teal); --journey-soft: var(--experience-teal-soft); }
.journey-family:nth-of-type(4) { --journey-accent: var(--experience-amber); --journey-soft: var(--experience-amber-soft); }
.journey-family:nth-of-type(5) { --journey-accent: var(--experience-coral); --journey-soft: var(--experience-coral-soft); }
.journey-family-head { gap: 20px; }
.journey-family-head .workflow-eyebrow { color: var(--journey-accent); }
.journey-outcome {
  border-color: color-mix(in srgb, var(--experience-green) 24%, var(--border-default));
  background: var(--experience-green-soft);
}
.journey-outcome strong { color: var(--experience-green); }
.journey-head-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.journey-guide-button {
  border: 1px solid color-mix(in srgb, var(--journey-accent) 35%, var(--border-default));
  border-radius: 11px;
  padding: 9px 13px;
  color: var(--journey-accent);
  background: white;
  font-weight: 700;
  cursor: pointer;
}
.journey-guide-button:hover { background: var(--journey-soft); }
.journey-progress-label { font-size: 12px; color: var(--text-muted); align-self: center; }

.task-stage-card {
  --stage-accent: var(--experience-blue);
  --stage-soft: var(--experience-blue-soft);
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--stage-accent) 18%, var(--border-default));
  background: linear-gradient(165deg, white 35%, var(--stage-soft));
}
.task-stage-card:nth-child(6n+1) { --stage-accent: var(--experience-blue); --stage-soft: var(--experience-blue-soft); }
.task-stage-card:nth-child(6n+2) { --stage-accent: var(--experience-cyan); --stage-soft: var(--experience-cyan-soft); }
.task-stage-card:nth-child(6n+3) { --stage-accent: var(--experience-violet); --stage-soft: var(--experience-violet-soft); }
.task-stage-card:nth-child(6n+4) { --stage-accent: var(--experience-teal); --stage-soft: var(--experience-teal-soft); }
.task-stage-card:nth-child(6n+5) { --stage-accent: var(--experience-green); --stage-soft: var(--experience-green-soft); }
.task-stage-card:nth-child(6n+6) { --stage-accent: var(--experience-coral); --stage-soft: var(--experience-coral-soft); }
.task-stage-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--stage-accent);
}
.task-stage-card:hover { border-color: var(--stage-accent); box-shadow: 0 14px 28px color-mix(in srgb, var(--stage-accent) 14%, transparent); }
.task-stage-number { background: var(--stage-accent); color: white; }
.task-stage-role, .task-stage-card em { color: var(--stage-accent); }
.task-stage-card[data-complete="true"] { opacity: .78; }
.task-stage-card[data-complete="true"]::after {
  content: "✓";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: white;
  background: var(--experience-green);
  font-weight: 800;
}

.workflow-role-tabs {
  gap: 10px;
  padding: 18px 24px;
  background: var(--surface-muted);
  border-bottom: 1px solid var(--border-subtle);
}
.workflow-role-tab {
  --role-accent: var(--experience-violet);
  border-color: color-mix(in srgb, var(--role-accent) 22%, var(--border-default));
  background: white;
}
.workflow-role-tab:nth-child(4n+1) { --role-accent: var(--experience-blue); }
.workflow-role-tab:nth-child(4n+2) { --role-accent: var(--experience-violet); }
.workflow-role-tab:nth-child(4n+3) { --role-accent: var(--experience-teal); }
.workflow-role-tab:nth-child(4n+4) { --role-accent: var(--experience-amber); }
.workflow-role-tab[aria-selected="true"] {
  color: white;
  border-color: var(--role-accent);
  background: var(--role-accent);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--role-accent) 24%, transparent);
}
.workflow-role-tab[aria-selected="true"] img { filter: brightness(0) invert(1); }
.workflow-panel { background: white; }
.workflow-panel-head { background: linear-gradient(110deg, var(--product-soft), white 72%); }
.role-foundation-card:nth-child(1) { background: var(--experience-blue-soft); border-color: #bfdbfe; }
.role-foundation-card:nth-child(2) { background: var(--experience-teal-soft); border-color: #99f6e4; }
.role-foundation-card:nth-child(3) { background: var(--experience-amber-soft); border-color: #fde68a; }
.workflow-step {
  --step-accent: var(--experience-blue);
  --step-soft: var(--experience-blue-soft);
  border-color: color-mix(in srgb, var(--step-accent) 18%, var(--border-default));
  background: linear-gradient(165deg, white, var(--step-soft));
}
.workflow-step:nth-child(6n+1) { --step-accent: var(--experience-blue); --step-soft: var(--experience-blue-soft); }
.workflow-step:nth-child(6n+2) { --step-accent: var(--experience-cyan); --step-soft: var(--experience-cyan-soft); }
.workflow-step:nth-child(6n+3) { --step-accent: var(--experience-violet); --step-soft: var(--experience-violet-soft); }
.workflow-step:nth-child(6n+4) { --step-accent: var(--experience-teal); --step-soft: var(--experience-teal-soft); }
.workflow-step:nth-child(6n+5) { --step-accent: var(--experience-green); --step-soft: var(--experience-green-soft); }
.workflow-step:nth-child(6n+6) { --step-accent: var(--experience-coral); --step-soft: var(--experience-coral-soft); }
.workflow-step-number { background: var(--step-accent); color: white; }
.workflow-step:hover { border-color: var(--step-accent); }
.workflow-branches { border-top-color: #fde68a; background: var(--experience-amber-soft); }
.workflow-branches h4 { color: var(--experience-amber); }
.workflow-branch { background: white; border-color: #fde68a; }
.workflow-branch:hover { border-color: var(--experience-amber); }

/* Guided journey drawer */
.journey-drawer-backdrop {
  position: fixed; inset: 0; z-index: 95; background: rgba(15, 23, 42, .48);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.journey-drawer-backdrop[data-open="true"] { opacity: 1; pointer-events: auto; }
.journey-drawer {
  position: fixed; inset: 0 0 0 auto; z-index: 100; width: min(520px, 100vw);
  transform: translateX(102%); transition: transform .24s ease;
  display: flex; flex-direction: column; background: white; box-shadow: -24px 0 70px rgba(15, 23, 42, .24);
}
.journey-drawer[data-open="true"] { transform: translateX(0); }
.journey-drawer-head { padding: 22px 24px 16px; border-bottom: 1px solid var(--border-subtle); background: linear-gradient(135deg, var(--product-soft), white); }
.journey-drawer-topline { display: flex; justify-content: space-between; gap: 16px; align-items: start; }
.journey-drawer h2 { margin: 4px 0 6px; font-size: 23px; }
.journey-drawer p { margin: 0; color: var(--text-secondary); }
.journey-drawer-close { border: 0; background: var(--surface-muted); border-radius: 10px; width: 38px; height: 38px; cursor: pointer; font-size: 22px; }
.journey-progress { margin-top: 16px; }
.journey-progress-track { height: 8px; border-radius: 999px; background: var(--border-subtle); overflow: hidden; }
.journey-progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--product-accent), var(--experience-green)); transition: width .2s ease; }
.journey-progress-text { margin-top: 7px; font-size: 12px; color: var(--text-muted); }
.journey-drawer-body { overflow: auto; padding: 18px 24px 28px; }
.journey-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.journey-check-item { display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: start; padding: 14px; border: 1px solid var(--border-default); border-radius: 14px; background: white; }
.journey-check-item[data-complete="true"] { background: var(--experience-green-soft); border-color: #bbf7d0; }
.journey-check-item input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--experience-green); }
.journey-check-copy strong { display: block; margin-bottom: 3px; }
.journey-check-copy span { display: block; color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.journey-check-link { font-weight: 700; color: var(--product-accent); text-decoration: none; white-space: nowrap; font-size: 13px; }
.journey-drawer-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
body.journey-drawer-open { overflow: hidden; }

/* Homepage and role-page differentiation */
.product-grid .browse-card, .role-product-card { position: relative; overflow: hidden; }
.product-grid .browse-card::before, .role-product-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--experience-violet); }
a[href*="mrounds.html"].browse-card::before, a[href*="mrounds.html"].role-product-card::before { background:#6d28d9; }
a[href*="imaintenance.html"].browse-card::before, a[href*="imaintenance.html"].role-product-card::before { background:#2563eb; }
a[href*="ipermits.html"].browse-card::before, a[href*="ipermits.html"].role-product-card::before { background:#c2415d; }
a[href*="digital-work-instructions.html"].browse-card::before, a[href*="digital-work-instructions.html"].role-product-card::before { background:#0f766e; }
a[href*="mworkorder.html"].browse-card::before, a[href*="mworkorder.html"].role-product-card::before { background:#4f46e5; }
a[href*="minventory.html"].browse-card::before, a[href*="minventory.html"].role-product-card::before { background:#15803d; }
a[href*="minspections.html"].browse-card::before, a[href*="minspections.html"].role-product-card::before { background:#b45309; }
a[href*="massettag.html"].browse-card::before, a[href*="massettag.html"].role-product-card::before { background:#0891b2; }

@media (max-width: 760px) {
  .path-onboarding-note { margin-left: 16px; margin-right: 16px; flex-direction: column; align-items: flex-start; }
  .path-onboarding-note span:last-child { white-space: normal; }
  .journey-family::before { inset: 12px auto 12px 0; }
  .journey-check-item { grid-template-columns: 24px 1fr; }
  .journey-check-link { grid-column: 2; }
  .workflow-role-tabs { padding: 14px 16px; }
}

/* Product-specific first-use onboarding within the existing two-path model. */
.path-onboarding-note { align-items: center; }
.path-onboarding-copy { min-width: 0; }
.path-onboarding-kicker { display:block; margin-bottom:4px; color:var(--product-accent); font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.path-onboarding-copy strong { display:block; font-size:15px; }
.path-onboarding-copy p { margin:4px 0 0; max-width:70ch; color:var(--text-secondary); line-height:1.5; }
.path-onboarding-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; flex:0 0 auto; }
.path-onboarding-actions .mini-button { white-space:nowrap; }
.journey-family,.workflow-panel { scroll-margin-top:210px; }
@media(max-width:760px){
  .path-onboarding-actions { width:100%; justify-content:flex-start; }
  .path-onboarding-actions .mini-button { white-space:normal; text-align:left; }
  .journey-family,.workflow-panel { scroll-margin-top:120px; }
}