/* Coach'EmUp branded processenhandboek layer */
:root {
  --ph-black: #0b0b0b;
  --ph-charcoal: #121212;
  --ph-lime: #a6ee00;
  --ph-lime-2: #8fd900;
  --ph-white: #ffffff;
  --ph-paper: #f4f4f4;
  --ph-soft: #fafafa;
  --ph-line: #e6e6e6;
  --ph-muted: #4f4f4f;
  --ph-nav-bg: #f8fafc;
  --ph-nav-hover: #f1f5f9;
  --ph-danger: #dc3545;
  --ph-warn: #ff6b35;
  --ph-shadow: 0 14px 34px rgba(0, 0, 0, .08);
}

.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
body.app-shell { color: var(--ph-black) !important; background: radial-gradient(1200px 800px at 82% -10%, #fff 0%, #f1f1f1 55%, #eaeaea 100%) !important; font-family: "Montserrat", "Trebuchet MS", Arial, sans-serif !important; overflow-x: hidden !important; }
body.app-shell::before { display: none !important; }
body.app-shell .container { width: min(100%, 1240px) !important; max-width: 1240px !important; margin-inline: auto !important; padding: 24px !important; }

body.app-shell .site-header { padding: 0 !important; background: rgba(255,255,255,.94) !important; border-bottom: 1px solid var(--ph-line) !important; box-shadow: 0 10px 28px rgba(0,0,0,.04) !important; backdrop-filter: blur(10px) !important; }
body.app-shell .site-header-inner { width: min(100%, 1380px) !important; margin: 0 auto !important; padding: 10px 24px !important; display: grid !important; grid-template-columns: auto minmax(220px,1fr) minmax(0,1fr) max-content !important; grid-template-areas: "brand search nav actions" !important; gap: 10px 14px !important; align-items: center !important; overflow: visible !important; }
body.app-shell .kb-header-brand { grid-area: brand !important; }
body.app-shell .brand-link { color: var(--ph-black) !important; }
body.app-shell .brand-logo { width: 42px !important; height: 42px !important; border-radius: 8px !important; }
body.app-shell .brand-copy { max-width: 170px !important; min-width: 0 !important; }
body.app-shell .brand-subtitle { color: var(--ph-muted) !important; font-weight: 800 !important; letter-spacing: .06em !important; }
body.app-shell .brand-text { color: var(--ph-black) !important; font-weight: 900 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
body.app-shell .kb-top-search { grid-area: search !important; max-width: 440px !important; width: 100% !important; min-width: 0 !important; margin: auto !important; }
body.app-shell .kb-top-search input { min-height: 42px !important; border: 1px solid #d5d5d5 !important; border-radius: 8px !important; background: #fff !important; color: var(--ph-black) !important; font-family: inherit !important; }
body.app-shell .kb-header-actions { grid-area: actions !important; justify-self: end !important; min-width: 240px !important; }
body.app-shell #kb-primary-nav.site-nav { grid-area: nav !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 6px !important; flex-wrap: nowrap !important; min-width: max-content !important; overflow: visible !important; }
body.app-shell .profile-trigger { min-height: 42px !important; min-width: max-content !important; max-width: 280px !important; border-radius: 8px !important; overflow: visible !important; }
body.app-shell .profile-trigger-name { min-width: 0 !important; overflow: visible !important; text-overflow: clip !important; white-space: nowrap !important; }
body.app-shell #kb-primary-nav.site-nav a { min-height: 36px !important; display: inline-flex !important; align-items: center !important; gap: 7px !important; flex: 0 0 auto !important; padding: 6px 11px !important; border: 1px solid transparent !important; border-radius: 10px !important; background: transparent !important; color: #64748b !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; text-decoration: none !important; white-space: nowrap !important; overflow: visible !important; box-shadow: none !important; transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease !important; }
body.app-shell #kb-primary-nav.site-nav a span { white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; }
body.app-shell #kb-primary-nav.site-nav a:hover { border-color: #e2e8f0 !important; background: var(--ph-nav-hover) !important; color: var(--ph-black) !important; }
body.app-shell #kb-primary-nav.site-nav a:focus-visible { outline: 2px solid var(--ph-lime) !important; outline-offset: 2px !important; }
body.app-shell #kb-primary-nav.site-nav a.is-current { border-color: var(--ph-black) !important; background: var(--ph-black) !important; color: #fff !important; font-weight: 800 !important; box-shadow: 0 2px 8px rgba(0,0,0,.15) !important; }
body.app-shell #kb-primary-nav.site-nav a.is-cta { margin-left: 8px !important; border-color: var(--ph-lime) !important; background: var(--ph-lime) !important; color: var(--ph-black) !important; font-weight: 850 !important; }
body.app-shell #kb-primary-nav.site-nav a.is-cta:hover,
body.app-shell #kb-primary-nav.site-nav a.is-cta:focus-visible { border-color: var(--ph-black) !important; background: var(--ph-black) !important; color: #fff !important; }
body.app-shell #kb-primary-nav.site-nav a.is-cta.is-current { border-color: var(--ph-lime) !important; background: var(--ph-lime) !important; color: var(--ph-black) !important; box-shadow: 0 2px 10px rgba(166,238,0,.35) !important; }
body.app-shell #kb-primary-nav .site-nav-icon { width: 16px !important; height: 16px !important; flex: 0 0 16px !important; }
body.app-shell .kb-mobile-nav-toggle { display: none !important; }

body.app-shell .btn,
body.app-shell a.btn,
body.app-shell button.btn,
.btn.primary,
button.btn.primary { min-height: 48px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 11px 16px !important; border: 1px solid var(--ph-black) !important; border-radius: 8px !important; background: var(--ph-black) !important; color: #fff !important; font-family: inherit !important; font-weight: 850 !important; text-decoration: none !important; }
body.app-shell .btn:hover,
body.app-shell .btn:focus-visible { background: var(--ph-lime) !important; color: var(--ph-black) !important; border-color: var(--ph-lime) !important; transform: translateY(-1px) !important; box-shadow: 0 12px 26px rgba(0,0,0,.12) !important; }
.btn.subtle,
.ph-link-button { background: #fff !important; color: var(--ph-black) !important; border: 1px solid var(--ph-line) !important; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(166,238,0,.42) !important; outline-offset: 2px !important; }

.ph-shell { display: grid !important; gap: 24px !important; }
.ph-hero { display: grid !important; gap: 18px !important; padding: clamp(34px, 6vw, 72px) !important; border: 1px solid var(--ph-line) !important; border-radius: 8px !important; background: linear-gradient(135deg, #fff 0%, #f7faf2 60%, #edf7df 100%) !important; box-shadow: var(--ph-shadow) !important; }
.ph-hero-small { padding: clamp(28px, 4vw, 52px) !important; }
.ph-step-label,
.ph-eyebrow { width: max-content !important; display: inline-flex !important; align-items: center !important; min-height: 30px !important; padding: 6px 10px !important; border-radius: 8px !important; background: var(--ph-black) !important; color: var(--ph-lime) !important; font-size: 12px !important; font-weight: 900 !important; letter-spacing: 0 !important; text-transform: uppercase !important; }
.ph-hero h1,
.ph-article-hero h1 { max-width: 920px !important; margin: 0 !important; color: var(--ph-black) !important; font-size: clamp(2.65rem, 7vw, 5.6rem) !important; font-weight: 900 !important; line-height: .98 !important; letter-spacing: 0 !important; }
.ph-hero p,
.ph-search-heading p,
.ph-article-hero p { max-width: 760px !important; margin: 0 !important; color: var(--ph-muted) !important; font-size: 1.05rem !important; line-height: 1.65 !important; }
.ph-hero-search { position: relative !important; display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; gap: 10px !important; max-width: 930px !important; }
.ph-hero-search input,
.ph-filter-bar input,
.ph-filter-bar select,
.ph-contact-form input,
.ph-contact-form textarea,
.ph-contact-form select { width: 100% !important; min-height: 58px !important; border: 1px solid #d5d5d5 !important; border-radius: 8px !important; background: #fff !important; padding: 0 16px !important; color: var(--ph-black) !important; font: inherit !important; font-size: 1rem !important; }
.ph-hero-search button { min-height: 58px !important; border-radius: 8px !important; padding-inline: 22px !important; }
.ph-example-row { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
.ph-example-row a,
.ph-link-button { min-height: 40px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 8px 12px !important; border-radius: 8px !important; text-decoration: none !important; font-size: 13px !important; font-weight: 850 !important; }
.ph-example-row a { background: #fff !important; color: var(--ph-black) !important; border: 1px solid var(--ph-line) !important; }
.ph-example-row a:hover { border-color: var(--ph-lime) !important; background: var(--ph-lime) !important; }

.ph-section,
.ph-search-page,
.ph-article,
.ph-contact-layout { display: grid !important; gap: 18px !important; }
.ph-section { padding: 0 !important; }
.ph-section-head { display: flex !important; align-items: end !important; justify-content: space-between !important; gap: 14px !important; }
.ph-section-head h2,
.ph-search-heading h1 { margin: 8px 0 0 !important; color: var(--ph-black) !important; font-size: clamp(1.65rem, 3vw, 2.45rem) !important; font-weight: 900 !important; line-height: 1.1 !important; letter-spacing: 0 !important; }

.ph-action-grid,
.ph-role-grid,
.ph-department-grid,
.ph-process-grid,
.ph-help-choice-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important; gap: 14px !important; }
.ph-action-grid-compact { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important; }
.ph-action-card,
.ph-role-card,
.ph-department-card,
.ph-process-card,
.ph-info-card,
.ph-recommended-card,
.ph-route-steps article,
.ph-meta-panel,
.ph-link-columns section,
.ph-help-choice-grid button,
.ph-instruction-block,
.ph-detail-panel { min-width: 0 !important; border: 1px solid var(--ph-line) !important; border-radius: 8px !important; background: var(--ph-white) !important; box-shadow: 0 10px 24px rgba(0,0,0,.045) !important; }
.ph-action-card,
.ph-role-card,
.ph-department-card { display: grid !important; gap: 10px !important; align-content: start !important; min-height: 160px !important; padding: 18px !important; color: var(--ph-black) !important; text-decoration: none !important; }
.ph-action-card:hover,
.ph-role-card:hover,
.ph-department-card:hover,
.ph-process-card:hover,
.ph-help-choice-grid button:hover { transform: translateY(-2px) !important; border-color: var(--ph-lime) !important; box-shadow: 0 16px 34px rgba(0,0,0,.10) !important; }
.ph-action-icon { width: 46px !important; height: 46px !important; display: grid !important; place-items: center !important; border-radius: 8px !important; background: var(--ph-black) !important; color: var(--ph-lime) !important; font-weight: 950 !important; }
.ph-action-card.tone-danger .ph-action-icon,
.tone-danger .ph-action-icon { background: var(--ph-danger) !important; color: #fff !important; }
.ph-action-card strong,
.ph-role-card strong,
.ph-department-card strong { font-size: 1.16rem !important; line-height: 1.25 !important; color: var(--ph-black) !important; font-weight: 900 !important; }
	.ph-action-card small,
	.ph-action-card em,
	.ph-action-card p,
	.ph-role-card p,
.ph-role-card em,
.ph-department-card p,
	.ph-process-card p { color: var(--ph-muted) !important; line-height: 1.52 !important; font-style: normal !important; }
	.ph-action-card p { margin: 0 !important; font-size: .92rem !important; }
.ph-action-card em { margin-top: auto !important; color: var(--ph-black) !important; font-weight: 900 !important; }

.ph-route-steps { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)) !important; gap: 14px !important; }
.ph-route-steps article { padding: 18px !important; }
.ph-route-steps span { width: 38px !important; height: 38px !important; display: grid !important; place-items: center !important; border-radius: 8px !important; background: var(--ph-lime) !important; color: var(--ph-black) !important; font-weight: 950 !important; }
.ph-route-steps h2 { margin: 12px 0 6px !important; font-size: 1.12rem !important; font-weight: 900 !important; }
.ph-route-steps p { margin: 0 !important; color: var(--ph-muted) !important; line-height: 1.5 !important; }

.ph-process-card { display: grid !important; gap: 14px !important; padding: 20px !important; }
.ph-process-card h3 { margin: 6px 0 !important; color: var(--ph-black) !important; font-size: 1.35rem !important; font-weight: 900 !important; }
.ph-card-kicker { color: var(--ph-black) !important; font-weight: 900 !important; font-size: 12px !important; text-transform: uppercase !important; }
.ph-flow { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
.ph-flow span { display: inline-flex !important; align-items: center !important; min-height: 32px !important; padding: 6px 10px !important; border-radius: 8px !important; background: var(--ph-paper) !important; color: var(--ph-black) !important; font-size: 12px !important; font-weight: 850 !important; }
.ph-process-card ul { margin: 0 !important; padding-left: 18px !important; color: var(--ph-muted) !important; line-height: 1.65 !important; }
.ph-role-card span { width: max-content !important; color: var(--ph-black) !important; font-weight: 900 !important; }
.ph-department-card dl,
.ph-meta-panel dl { display: grid !important; gap: 10px !important; margin: 0 !important; }
.ph-department-card dt,
.ph-meta-panel dt { margin: 0 0 3px !important; color: var(--ph-muted) !important; font-size: 12px !important; font-weight: 850 !important; text-transform: uppercase !important; }
.ph-department-card dd,
.ph-meta-panel dd { margin: 0 !important; color: var(--ph-black) !important; font-weight: 750 !important; line-height: 1.4 !important; overflow-wrap: anywhere !important; }

.ph-search-heading { display: grid !important; gap: 8px !important; }
.ph-recommended-card { display: grid !important; gap: 14px !important; padding: 22px !important; border-left: 8px solid var(--ph-lime) !important; }
.ph-recommended-card h2 { margin: 0 !important; color: var(--ph-black) !important; font-size: clamp(1.5rem, 3vw, 2.35rem) !important; font-weight: 900 !important; }
.ph-recommended-card p { margin: 0 !important; color: var(--ph-muted) !important; line-height: 1.65 !important; }
.ph-result-labels { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
.ph-result-labels span { padding: 5px 8px !important; border-radius: 8px !important; background: var(--ph-black) !important; color: var(--ph-lime) !important; font-size: 12px !important; font-weight: 850 !important; }
.ph-filter-bar { display: grid !important; grid-template-columns: minmax(0,1.4fr) minmax(170px,.7fr) minmax(150px,.7fr) auto !important; gap: 10px !important; align-items: center !important; }
.ph-result-groups { display: grid !important; gap: 24px !important; }

.ph-article-hero { display: grid !important; grid-template-columns: minmax(0,1fr) minmax(300px,420px) !important; gap: 22px !important; align-items: stretch !important; padding: 28px !important; border: 1px solid var(--ph-line) !important; border-radius: 8px !important; background: #fff !important; box-shadow: var(--ph-shadow) !important; }
.ph-article-hero h1 { font-size: clamp(2rem,5vw,3.8rem) !important; line-height: 1.04 !important; }
.ph-article-facts { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
.ph-article-facts div { padding: 14px !important; border: 1px solid var(--ph-line) !important; border-radius: 8px !important; background: var(--ph-soft) !important; }
.ph-article-facts span { display: block !important; margin-bottom: 5px !important; color: var(--ph-muted) !important; font-size: 12px !important; font-weight: 850 !important; text-transform: uppercase !important; }
.ph-article-facts strong { display: block !important; color: var(--ph-black) !important; line-height: 1.35 !important; }
.ph-article-layout { display: grid !important; grid-template-columns: minmax(0,1fr) 330px !important; gap: 20px !important; align-items: start !important; }
.ph-article-main { display: grid !important; gap: 18px !important; min-width: 0 !important; }
.ph-meta-panel { position: sticky !important; top: 96px !important; display: grid !important; gap: 14px !important; padding: 18px !important; }
.ph-meta-panel h2,
.ph-meta-panel h3 { margin: 0 !important; color: var(--ph-black) !important; font-weight: 900 !important; }
.ph-meta-links { display: grid !important; gap: 8px !important; }
.ph-meta-links a { padding: 9px 10px !important; border-radius: 8px !important; background: var(--ph-paper) !important; color: var(--ph-black) !important; text-decoration: none !important; font-weight: 850 !important; }
.ph-instruction-block,
.ph-detail-panel { padding: 20px !important; }
.ph-first-block p { font-size: 1.04rem !important; line-height: 1.7 !important; color: var(--ph-muted) !important; }
.ph-step-list { display: grid !important; gap: 12px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; }
.ph-step-list li { display: grid !important; grid-template-columns: 40px minmax(0,1fr) !important; gap: 12px !important; align-items: start !important; padding: 14px !important; border: 1px solid var(--ph-line) !important; border-radius: 8px !important; background: var(--ph-soft) !important; }
.ph-step-list span { width: 40px !important; height: 40px !important; display: grid !important; place-items: center !important; border-radius: 8px !important; background: var(--ph-lime) !important; color: var(--ph-black) !important; font-weight: 950 !important; }
.ph-step-list p { margin: 0 !important; color: var(--ph-black) !important; font-weight: 700 !important; line-height: 1.55 !important; }
.ph-two-column { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 14px !important; }
.ph-info-card { padding: 18px !important; }
.ph-info-card h2 { margin: 6px 0 10px !important; color: var(--ph-black) !important; font-size: 1.2rem !important; font-weight: 900 !important; }
.ph-info-card p { margin: 0 0 8px !important; color: var(--ph-muted) !important; line-height: 1.65 !important; }
.ph-info-card.tone-warning { border-color: #ffd2be !important; background: #fff7f2 !important; }
.ph-detail-panel summary { cursor: pointer !important; font-weight: 900 !important; color: var(--ph-black) !important; }
.ph-detail-panel .page-content { margin-top: 16px !important; }
.ph-help-block { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 18px !important; padding: 20px !important; border: 1px solid var(--ph-line) !important; border-left: 8px solid var(--ph-lime) !important; border-radius: 8px !important; background: #fff !important; }
.ph-help-block h2 { margin: 6px 0 !important; color: var(--ph-black) !important; font-weight: 900 !important; }
.ph-help-block p { margin: 0 !important; color: var(--ph-muted) !important; }

.ph-link-columns { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 14px !important; }
.ph-link-columns section { display: grid !important; align-content: start !important; gap: 8px !important; padding: 18px !important; }
.ph-link-columns h3 { margin: 0 0 6px !important; color: var(--ph-black) !important; font-weight: 900 !important; }
.ph-link-columns a { padding: 8px 0 !important; color: var(--ph-black) !important; font-weight: 850 !important; text-decoration: none !important; border-bottom: 1px solid var(--ph-line) !important; }

.ph-help-choice-grid button { display: grid !important; text-align: left !important; gap: 6px !important; padding: 18px !important; cursor: pointer !important; color: var(--ph-black) !important; font-family: inherit !important; }
.ph-help-choice-grid button strong { font-size: 1.08rem !important; color: var(--ph-black) !important; font-weight: 900 !important; }
.ph-help-choice-grid button span { color: var(--ph-muted) !important; line-height: 1.45 !important; }
.ph-contact-layout { grid-template-columns: minmax(0,1fr) 330px !important; align-items: start !important; }
.ph-contact-form { display: grid !important; gap: 10px !important; padding: 20px !important; border: 1px solid var(--ph-line) !important; border-radius: 8px !important; background: #fff !important; box-shadow: var(--ph-shadow) !important; }
.ph-contact-form label { font-size: 13px !important; font-weight: 850 !important; color: var(--ph-black) !important; }
.ph-contact-form textarea { padding-top: 14px !important; min-height: 170px !important; }

body.app-shell .kb-article-grid { display: grid !important; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)) !important; gap: 14px !important; }
body.app-shell .kb-article-card { display: grid !important; gap: 10px !important; min-height: 245px !important; padding: 18px !important; border: 1px solid var(--ph-line) !important; border-radius: 8px !important; background: #fff !important; color: var(--ph-black) !important; text-decoration: none !important; box-shadow: 0 10px 24px rgba(0,0,0,.045) !important; }
body.app-shell .kb-article-card:hover,
body.app-shell .kb-article-card:focus-visible { transform: translateY(-2px) !important; border-color: var(--ph-lime) !important; box-shadow: 0 16px 34px rgba(0,0,0,.10) !important; }
body.app-shell .kb-card-type,
.type-badge { width: max-content !important; max-width: 100% !important; padding: 5px 9px !important; border-radius: 8px !important; background: var(--ph-black) !important; color: var(--ph-lime) !important; font-size: 11px !important; font-weight: 900 !important; text-transform: uppercase !important; }
body.app-shell .kb-article-card h3 { margin: 0 !important; font-size: 1.08rem !important; line-height: 1.28 !important; color: var(--ph-black) !important; font-weight: 900 !important; }
body.app-shell .kb-article-card p { margin: 0 !important; color: var(--ph-muted) !important; line-height: 1.5 !important; }
body.app-shell .kb-card-cta { color: var(--ph-black) !important; font-weight: 900 !important; }
body.app-shell .category-shell,
body.app-shell .tags-page,
body.app-shell .contact-page,
body.app-shell .kb-not-found { max-width: 1180px !important; margin-inline: auto !important; padding: 24px !important; border-radius: 8px !important; }
body.app-shell .kb-category-hero { border: 1px solid var(--ph-line) !important; border-radius: 8px !important; background: #fff !important; box-shadow: var(--ph-shadow) !important; }

/* Shared app polish: make older components match the Coach'EmUp brand too. */
body.app-shell .profile-trigger,
body.app-shell .kb-login-action {
  min-height: 44px !important;
  width: auto !important;
  min-width: max-content !important;
  max-width: 280px !important;
  border: 1px solid var(--ph-black) !important;
  border-radius: 8px !important;
  background: var(--ph-black) !important;
  color: #fff !important;
  font-family: inherit !important;
  font-weight: 850 !important;
  overflow: visible !important;
}
body.app-shell .profile-trigger-name {
  max-width: none !important;
  min-width: 0 !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}
body.app-shell .profile-trigger-caret {
  flex: 0 0 auto !important;
}
body.app-shell .profile-trigger:hover,
body.app-shell .profile-trigger:focus-visible,
body.app-shell .kb-login-action:hover,
body.app-shell .kb-login-action:focus-visible {
  border-color: var(--ph-lime) !important;
  background: var(--ph-lime) !important;
  color: var(--ph-black) !important;
}
body.app-shell .profile-panel {
  border: 1px solid var(--ph-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: var(--ph-shadow) !important;
  font-family: inherit !important;
}
body.app-shell .profile-panel-label,
body.app-shell .profile-panel-email {
  color: var(--ph-muted) !important;
}
body.app-shell .user-badge {
  border-radius: 8px !important;
  background: var(--ph-paper) !important;
  color: var(--ph-black) !important;
  font-weight: 850 !important;
}

body.app-shell .kb-breadcrumbs {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
  color: var(--ph-muted) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}
body.app-shell .kb-breadcrumbs a,
body.app-shell .kb-breadcrumbs span,
body.app-shell .kb-breadcrumbs strong {
  color: inherit !important;
  text-decoration: none !important;
}
body.app-shell .kb-breadcrumbs a:hover {
  color: var(--ph-black) !important;
  text-decoration: underline !important;
}
body.app-shell .kb-breadcrumbs strong {
  color: var(--ph-black) !important;
}

body.app-shell .search-suggest {
  border: 1px solid var(--ph-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: var(--ph-shadow) !important;
  overflow: hidden !important;
}
body.app-shell .search-suggest a {
  color: var(--ph-black) !important;
  border-bottom: 1px solid var(--ph-line) !important;
}
body.app-shell .search-suggest a:hover,
body.app-shell .search-suggest a.is-active {
  background: var(--ph-lime) !important;
  color: var(--ph-black) !important;
}
body.app-shell .search-suggest-labels {
  color: var(--ph-muted) !important;
}

body.app-shell .tag,
body.app-shell .tag-chip,
body.app-shell .tag-card,
body.app-shell .meta-pill,
body.app-shell .pill,
body.app-shell .status-badge {
  border: 1px solid var(--ph-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--ph-black) !important;
  font-weight: 850 !important;
}
body.app-shell .tag:hover,
body.app-shell .tag-chip:hover,
body.app-shell .tag-card:hover {
  border-color: var(--ph-lime) !important;
  background: var(--ph-lime) !important;
  color: var(--ph-black) !important;
}
body.app-shell .status-badge.is-published {
  border-color: var(--ph-lime) !important;
  background: var(--ph-lime) !important;
  color: var(--ph-black) !important;
}
body.app-shell .status-badge.is-draft {
  border-color: #ffd2be !important;
  background: #fff7f2 !important;
  color: var(--ph-black) !important;
}

body.app-shell .kb-category-main h1,
body.app-shell .domain-lane-head h2,
body.app-shell .manual-section-heading h2,
body.app-shell .card-header h3,
body.app-shell .tags-page h1,
body.app-shell .contact-page h1 {
  color: var(--ph-black) !important;
  font-family: inherit !important;
  font-weight: 900 !important;
}
body.app-shell .kb-category-facts div,
body.app-shell .article-overview-grid div,
body.app-shell .manual-meta-grid div,
body.app-shell .kb-aoic-strip div,
body.app-shell .domain-subcard,
body.app-shell .related-card {
  border: 1px solid var(--ph-line) !important;
  border-radius: 8px !important;
  background: var(--ph-soft) !important;
}
body.app-shell .kb-category-facts dt,
body.app-shell .article-overview-grid dt,
body.app-shell .manual-meta-grid dt,
body.app-shell .kb-aoic-strip span {
  color: var(--ph-muted) !important;
  font-weight: 850 !important;
  text-transform: uppercase !important;
}
body.app-shell .kb-category-facts dd,
body.app-shell .article-overview-grid dd,
body.app-shell .manual-meta-grid dd,
body.app-shell .kb-aoic-strip strong {
  color: var(--ph-black) !important;
  font-weight: 850 !important;
}

body.app-shell .alert {
  border: 1px solid var(--ph-lime) !important;
  border-radius: 8px !important;
  background: #f7ffe8 !important;
  color: var(--ph-black) !important;
  font-weight: 850 !important;
}
body.app-shell .kb-file-field {
  border: 1px dashed var(--ph-black) !important;
  border-radius: 8px !important;
  background: var(--ph-soft) !important;
}
body.app-shell .site-footer {
  border-top: 1px solid var(--ph-line) !important;
  background: #fff !important;
  color: var(--ph-muted) !important;
}
body.app-shell .site-footer a {
  color: var(--ph-black) !important;
  font-weight: 850 !important;
}

@media (min-width: 981px) and (max-width: 1240px) {
  body.app-shell .site-header-inner { grid-template-columns: auto minmax(220px,1fr) minmax(0,1fr) max-content !important; grid-template-areas: "brand search nav actions" !important; align-items: center !important; gap: 8px 10px !important; }
  body.app-shell .brand-copy { max-width: 135px !important; }
  body.app-shell .kb-top-search { max-width: 440px !important; }
  body.app-shell #kb-primary-nav.site-nav { justify-content: flex-start !important; min-width: 0 !important; width: 100% !important; overflow-x: auto !important; padding: 2px 0 !important; scrollbar-width: thin !important; }
  body.app-shell #kb-primary-nav.site-nav a { padding-inline: 9px !important; }
  body.app-shell #kb-primary-nav.site-nav a.is-cta { margin-left: 0 !important; }
  body.app-shell .kb-header-actions { min-width: 240px !important; }
  body.app-shell .profile-trigger { max-width: 280px !important; }
}

@media (max-width: 980px) {
  body.app-shell .site-header-inner { grid-template-columns: 1fr !important; grid-template-areas: "brand" "search" "actions" "toggle" "nav" !important; padding: 14px 16px !important; }
  body.app-shell .kb-header-actions { justify-self: stretch !important; }
  body.app-shell .kb-mobile-nav-toggle { grid-area: toggle !important; min-height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 1px solid var(--ph-line) !important; border-radius: 8px !important; background: #fff !important; color: var(--ph-black) !important; font-weight: 900 !important; }
  body.app-shell #kb-primary-nav.site-nav { display: none !important; justify-content: flex-start !important; gap: 8px !important; width: 100% !important; overflow-x: auto !important; padding: 4px 0 8px !important; scrollbar-width: thin !important; }
  body.app-shell #kb-primary-nav.site-nav.is-open { display: flex !important; }
  body.app-shell #kb-primary-nav.site-nav a { min-height: 44px !important; }
  body.app-shell #kb-primary-nav.site-nav a.is-cta { margin-left: 0 !important; }
  .ph-article-hero,
  .ph-article-layout,
  .ph-contact-layout { grid-template-columns: 1fr !important; }
  .ph-meta-panel { position: static !important; }
  .ph-filter-bar { grid-template-columns: 1fr 1fr !important; }
  .ph-link-columns,
  .ph-two-column { grid-template-columns: 1fr !important; }
}

@media (max-width: 640px) {
  body.app-shell .container { padding: 16px !important; }
  .ph-hero { padding: 26px 18px !important; }
  .ph-hero h1 { font-size: 2.55rem !important; }
  .ph-hero-search,
  .ph-filter-bar { grid-template-columns: 1fr !important; }
  .ph-section-head,
  .ph-help-block { display: grid !important; align-items: start !important; }
  .ph-action-grid,
  .ph-role-grid,
  .ph-department-grid,
  .ph-process-grid,
  .ph-help-choice-grid,
  body.app-shell .kb-article-grid { grid-template-columns: 1fr !important; }
  .ph-action-card { min-height: 132px !important; }
  .ph-article-hero { padding: 20px !important; }
  .ph-article-facts { grid-template-columns: 1fr !important; }
}

/* Compact handboek fix: minder hoogte, minder rommel, meer scanbaar. */
body.app-shell .site-header-inner {
  grid-template-columns: auto minmax(260px, 1fr) auto auto !important;
  gap: 8px 10px !important;
  padding: 8px 18px !important;
}
body.app-shell .brand-copy {
  max-width: 120px !important;
}
body.app-shell .brand-text {
  font-size: 1rem !important;
}
body.app-shell .kb-top-search {
  max-width: 520px !important;
  margin: 0 !important;
}
body.app-shell .kb-top-search input {
  min-height: 38px !important;
  font-size: 13px !important;
}
body.app-shell #kb-primary-nav.site-nav {
  gap: 4px !important;
}
body.app-shell #kb-primary-nav.site-nav a {
  min-height: 34px !important;
  padding: 5px 9px !important;
  font-size: 12px !important;
  border-radius: 8px !important;
}
body.app-shell #kb-primary-nav .site-nav-icon {
  width: 14px !important;
  height: 14px !important;
  flex-basis: 14px !important;
}
body.app-shell .kb-header-actions {
  min-width: 0 !important;
}
body.app-shell .profile-trigger {
  min-height: 38px !important;
  max-width: 220px !important;
}
body.app-shell .container {
  max-width: 1120px !important;
  padding: 18px !important;
}
.ph-shell {
  gap: 16px !important;
}
.ph-hero {
  gap: 12px !important;
  padding: clamp(22px, 4vw, 40px) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.045) !important;
}
.ph-hero h1,
.ph-article-hero h1 {
  font-size: clamp(2rem, 5vw, 3.6rem) !important;
  line-height: 1.02 !important;
}
.ph-hero p,
.ph-search-heading p,
.ph-article-hero p {
  font-size: .98rem !important;
  line-height: 1.5 !important;
}
.ph-hero-search {
  max-width: 760px !important;
}
.ph-hero-search input,
.ph-filter-bar input,
.ph-filter-bar select,
.ph-contact-form input,
.ph-contact-form textarea,
.ph-contact-form select {
  min-height: 46px !important;
}
.ph-hero-search button {
  min-height: 46px !important;
}
.ph-step-label,
.ph-eyebrow,
body.app-shell .kb-card-type,
.type-badge {
  min-height: 24px !important;
  padding: 4px 8px !important;
  font-size: 10px !important;
}
.ph-section,
.ph-search-page,
.ph-article,
.ph-contact-layout {
  gap: 12px !important;
}
.ph-section-head h2,
.ph-search-heading h1 {
  font-size: clamp(1.25rem, 2.4vw, 1.8rem) !important;
}
.ph-action-grid,
.ph-role-grid,
.ph-department-grid,
.ph-process-grid,
.ph-help-choice-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 10px !important;
}
.ph-action-card,
.ph-role-card,
.ph-department-card {
  min-height: 124px !important;
  padding: 14px !important;
  gap: 7px !important;
}
.ph-action-icon {
  width: 34px !important;
  height: 34px !important;
}
.ph-action-card strong,
.ph-role-card strong,
.ph-department-card strong {
  font-size: 1rem !important;
}
.ph-action-card small,
.ph-action-card em,
.ph-action-card p,
.ph-role-card p,
.ph-role-card em,
.ph-department-card p,
.ph-process-card p {
  font-size: .86rem !important;
  line-height: 1.35 !important;
}
.ph-process-card {
  padding: 14px !important;
  gap: 10px !important;
}
.ph-process-card h3 {
  font-size: 1.05rem !important;
}
.ph-flow {
  display: none !important;
}
.ph-route-steps {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
.ph-route-steps article {
  padding: 14px !important;
}
.ph-route-steps span {
  width: 30px !important;
  height: 30px !important;
}
.ph-route-steps h2 {
  margin: 8px 0 4px !important;
  font-size: 1rem !important;
}
.ph-link-columns {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
.ph-link-columns section {
  padding: 14px !important;
}

@media (min-width: 981px) and (max-width: 1180px) {
  body.app-shell .site-header-inner {
    grid-template-columns: auto minmax(220px, 1fr) auto !important;
    grid-template-areas: "brand search actions" "nav nav nav" !important;
  }
  body.app-shell #kb-primary-nav.site-nav {
    justify-content: flex-start !important;
    overflow-x: auto !important;
  }
}

@media (max-width: 640px) {
  .ph-route-steps,
  .ph-link-columns {
    grid-template-columns: 1fr !important;
  }
}

/* Radical handbook cleanup: homepage as a process chooser, not a card wall. */
body.app-shell .container {
  max-width: 980px !important;
}

.ph-shell {
  gap: 14px !important;
}

.ph-hero {
  border: 1px solid var(--ph-line) !important;
  background: #fff !important;
  padding: clamp(24px, 4vw, 44px) !important;
}

.ph-hero h1 {
  max-width: 760px !important;
  font-size: clamp(2.2rem, 6vw, 4.4rem) !important;
  letter-spacing: 0 !important;
}

.ph-hero p {
  max-width: 560px !important;
  color: #3f4752 !important;
}

.ph-example-row {
  gap: 8px !important;
}

.ph-example-row a {
  border-radius: 8px !important;
  background: #f4f4f4 !important;
  color: var(--ph-black) !important;
  border-color: #e3e3e3 !important;
  font-size: 12px !important;
  padding: 7px 10px !important;
}

.ph-process-start {
  gap: 10px !important;
}

.ph-process-start .ph-section-head {
  padding: 0 2px !important;
}

.ph-process-start-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

.ph-process-start-row {
  display: grid !important;
  grid-template-columns: 42px minmax(160px, .75fr) minmax(220px, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 68px !important;
  padding: 12px 14px !important;
  color: var(--ph-black) !important;
  text-decoration: none !important;
  background: #fff !important;
  border: 1px solid var(--ph-line) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

.ph-department-org {
  gap: 8px !important;
}

.ph-department-org-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

.ph-department-org-row {
  display: grid !important;
  grid-template-columns: 34px minmax(180px, .75fr) minmax(220px, 1fr) 54px !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 54px !important;
  padding: 9px 11px !important;
  color: var(--ph-black) !important;
  text-decoration: none !important;
  background: #fff !important;
  border: 1px solid var(--ph-line) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.ph-department-org-row:hover,
.ph-department-org-row:focus-visible {
  border-color: var(--ph-lime) !important;
  box-shadow: 0 0 0 3px rgba(166, 238, 0, .28) !important;
}

.ph-department-org-row .ph-action-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 7px !important;
  font-size: 13px !important;
}

.ph-department-org-row strong {
  display: block !important;
  font-size: .98rem !important;
  font-weight: 900 !important;
}

.ph-department-org-row small {
  display: block !important;
  margin-top: 2px !important;
  color: #687282 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.ph-department-org-row p {
  margin: 0 !important;
  color: #56606d !important;
  font-size: .88rem !important;
  line-height: 1.35 !important;
}

.ph-department-org-row em {
  justify-self: end !important;
  font-style: normal !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  color: var(--ph-black) !important;
}

.ph-process-start-row:hover,
.ph-process-start-row:focus-visible {
  border-color: var(--ph-lime) !important;
  box-shadow: 0 0 0 3px rgba(166, 238, 0, .28) !important;
  transform: none !important;
}

.ph-process-start-row strong {
  display: block !important;
  font-size: 1.05rem !important;
  font-weight: 900 !important;
}

.ph-process-start-row small {
  display: block !important;
  margin-top: 2px !important;
  color: #687282 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.ph-process-start-row p {
  margin: 0 !important;
  color: #3f4752 !important;
  font-size: .95rem !important;
  line-height: 1.35 !important;
}

.ph-process-start-row em {
  justify-self: end !important;
  font-style: normal !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  color: var(--ph-black) !important;
  background: var(--ph-lime) !important;
  border-radius: 999px !important;
  padding: 7px 10px !important;
}

@media (max-width: 760px) {
  .ph-process-start-row {
    grid-template-columns: 38px 1fr !important;
  }
  .ph-process-start-row p,
  .ph-process-start-row em {
    grid-column: 2 !important;
    justify-self: start !important;
  }
}

/* Readable Microsoft sign-in button. */
body.app-shell a.btn.ms {
  display: inline-flex !important;
  width: min(100%, 390px) !important;
  min-height: 64px !important;
  justify-content: flex-start !important;
  gap: 13px !important;
  padding: 11px 16px !important;
  border: 2px solid #202124 !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: #0b0b0b !important;
  box-shadow: 0 7px 18px rgba(0, 0, 0, .08) !important;
  text-align: left !important;
}

body.app-shell a.btn.ms::before,
body.app-shell a.btn.ms::after {
  display: none !important;
}

body.app-shell a.btn.ms:hover,
body.app-shell a.btn.ms:focus-visible {
  border-color: var(--ph-lime) !important;
  background: #f7ffe8 !important;
  color: #0b0b0b !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .12) !important;
}

body.app-shell a.btn.ms .ms-logo {
  display: grid !important;
  flex: 0 0 auto !important;
  grid-template-columns: 11px 11px !important;
  grid-template-rows: 11px 11px !important;
  gap: 2px !important;
}

body.app-shell a.btn.ms .ms-logo i:nth-child(1) { background: #f25022 !important; }
body.app-shell a.btn.ms .ms-logo i:nth-child(2) { background: #7fba00 !important; }
body.app-shell a.btn.ms .ms-logo i:nth-child(3) { background: #00a4ef !important; }
body.app-shell a.btn.ms .ms-logo i:nth-child(4) { background: #ffb900 !important; }

body.app-shell a.btn.ms .ms-copy,
body.app-shell a.btn.ms .ms-text,
body.app-shell a.btn.ms .ms-sub {
  display: block !important;
  color: #0b0b0b !important;
}

body.app-shell a.btn.ms .ms-text {
  font-size: .95rem !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
}

body.app-shell a.btn.ms .ms-sub {
  margin-top: 3px !important;
  color: #59616c !important;
  font-size: .76rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

/* Ultra compact process handbook. */
body.app-shell #kb-primary-nav.site-nav a {
  min-height: 32px !important;
  padding: 5px 8px !important;
}

body.app-shell .container {
  max-width: 860px !important;
  padding-top: 12px !important;
}

.ph-shell {
  gap: 10px !important;
}

.ph-hero-compact {
  display: grid !important;
  grid-template-columns: minmax(180px, .75fr) minmax(280px, 1.25fr) !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

.ph-hero-compact h1 {
  margin: 0 !important;
  font-size: clamp(1.55rem, 3.4vw, 2.35rem) !important;
  line-height: 1.05 !important;
}

.ph-hero-compact p,
.ph-hero-compact .ph-step-label,
.ph-hero-compact .ph-example-row {
  display: none !important;
}

.ph-hero-compact .ph-hero-search {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
}

.ph-hero-compact .ph-hero-search input,
.ph-hero-compact .ph-hero-search button {
  min-height: 42px !important;
}

.ph-process-start .ph-section-head {
  display: flex !important;
  align-items: center !important;
  margin-top: 2px !important;
}

.ph-process-start .ph-section-head h2 {
  font-size: 1.1rem !important;
  margin: 0 !important;
}

.ph-process-start-row {
  grid-template-columns: 34px minmax(130px, .65fr) minmax(180px, 1fr) 54px !important;
  min-height: 54px !important;
  padding: 9px 11px !important;
  gap: 10px !important;
  border-radius: 8px !important;
}

.ph-process-start-row .ph-action-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 7px !important;
  font-size: 13px !important;
}

.ph-process-start-row strong {
  font-size: .98rem !important;
}

.ph-process-start-row small {
  display: none !important;
}

.ph-process-start-row p {
  font-size: .88rem !important;
  color: #56606d !important;
}

.ph-process-start-row em {
  background: transparent !important;
  padding: 0 !important;
  color: var(--ph-black) !important;
}

@media (max-width: 760px) {
  .ph-hero-compact {
    grid-template-columns: 1fr !important;
  }
  .ph-process-start-row {
    grid-template-columns: 32px 1fr auto !important;
  }
  .ph-department-org-row {
    grid-template-columns: 32px 1fr auto !important;
  }
  .ph-process-start-row p {
    display: none !important;
  }
  .ph-department-org-row p {
    display: none !important;
  }
  .ph-process-start-row em {
    grid-column: auto !important;
  }
}

/* Organization handbook homepage. */
.ph-handbook-home,
.ph-quick-processes {
  gap: 10px !important;
}

.ph-handbook-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.ph-handbook-tile {
  display: grid !important;
  grid-template-columns: 34px 1fr auto !important;
  grid-template-areas: "icon title status" "icon text text" !important;
  align-items: start !important;
  gap: 6px 10px !important;
  min-height: 96px !important;
  padding: 12px !important;
  color: var(--ph-black) !important;
  text-decoration: none !important;
  background: #fff !important;
  border: 1px solid var(--ph-line) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.ph-handbook-tile:hover,
.ph-handbook-tile:focus-visible,
.ph-quick-process-grid a:hover,
.ph-quick-process-grid a:focus-visible {
  border-color: var(--ph-lime) !important;
  box-shadow: 0 0 0 3px rgba(166, 238, 0, .28) !important;
}

.ph-handbook-tile .ph-action-icon {
  grid-area: icon !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 7px !important;
  font-size: 12px !important;
}

.ph-handbook-tile strong {
  grid-area: title !important;
  font-size: .98rem !important;
  font-weight: 900 !important;
}

.ph-handbook-tile p {
  grid-area: text !important;
  margin: 0 !important;
  color: #56606d !important;
  font-size: .85rem !important;
  line-height: 1.35 !important;
}

.ph-handbook-tile em {
  grid-area: status !important;
  justify-self: end !important;
  white-space: nowrap !important;
  font-style: normal !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  color: #252a31 !important;
  background: #f2f4f6 !important;
  border: 1px solid #e0e4e8 !important;
  border-radius: 999px !important;
  padding: 4px 7px !important;
}

.ph-quick-process-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.ph-quick-process-grid a,
.ph-back-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 7px 10px !important;
  color: var(--ph-black) !important;
  text-decoration: none !important;
  font-size: .84rem !important;
  font-weight: 850 !important;
  background: #fff !important;
  border: 1px solid var(--ph-line) !important;
  border-radius: 8px !important;
}

.ph-back-link {
  justify-content: flex-start !important;
  width: fit-content !important;
  margin-top: -4px !important;
}

@media (max-width: 860px) {
  .ph-handbook-grid,
  .ph-quick-process-grid {
    grid-template-columns: 1fr !important;
  }
  .ph-handbook-tile {
    min-height: 76px !important;
  }
}

/* Visible handbook skin v2: make the new structure unmistakable. */
body.app-shell {
  background: #f5f6f3 !important;
}

body.app-shell .site-header {
  background: rgba(255,255,255,.96) !important;
  border-bottom: 1px solid #dedede !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.05) !important;
}

body.app-shell .container {
  max-width: 1040px !important;
}

body.app-shell .ph-shell {
  gap: 14px !important;
}

body.app-shell .ph-hero.ph-hero-compact {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  padding: 22px !important;
  background: #0b0b0b !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 12px !important;
}

body.app-shell .ph-hero.ph-hero-compact h1 {
  color: #fff !important;
  max-width: none !important;
  font-size: clamp(2rem, 5vw, 3.8rem) !important;
}

body.app-shell .ph-hero.ph-hero-compact .ph-hero-search {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 8px !important;
  max-width: 760px !important;
}

body.app-shell .ph-hero.ph-hero-compact .ph-hero-search input {
  min-height: 54px !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-size: 1rem !important;
  font-weight: 750 !important;
}

body.app-shell .ph-hero.ph-hero-compact .ph-hero-search button {
  min-height: 54px !important;
  border-radius: 10px !important;
  background: var(--ph-lime) !important;
  color: var(--ph-black) !important;
}

body.app-shell .ph-handbook-home,
body.app-shell .ph-quick-processes {
  padding: 0 !important;
  background: transparent !important;
}

body.app-shell .ph-handbook-home .ph-section-head,
body.app-shell .ph-quick-processes .ph-section-head {
  padding: 0 2px !important;
}

body.app-shell .ph-handbook-home .ph-section-head h2,
body.app-shell .ph-quick-processes .ph-section-head h2 {
  font-size: 1.2rem !important;
  font-weight: 950 !important;
}

body.app-shell .ph-handbook-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body.app-shell .ph-handbook-tile {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-height: 154px !important;
  padding: 14px !important;
  background: #fff !important;
  border: 1px solid #dedede !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

body.app-shell .ph-handbook-tile::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  height: 5px !important;
  background: var(--ph-lime) !important;
}

body.app-shell .ph-handbook-tile .ph-action-icon {
  width: 36px !important;
  height: 36px !important;
  margin-top: 4px !important;
  background: #0b0b0b !important;
  color: var(--ph-lime) !important;
}

body.app-shell .ph-handbook-tile strong {
  font-size: 1rem !important;
  line-height: 1.15 !important;
}

body.app-shell .ph-handbook-tile p {
  font-size: .82rem !important;
  line-height: 1.35 !important;
}

body.app-shell .ph-handbook-tile em {
  align-self: flex-start !important;
  margin-top: auto !important;
  background: #f4f4f4 !important;
}

body.app-shell .ph-quick-process-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

body.app-shell .ph-quick-process-grid a {
  min-height: 42px !important;
  background: #fff !important;
  border-color: #dedede !important;
}

body.app-shell .ph-quick-process-grid a:hover,
body.app-shell .ph-quick-process-grid a:focus-visible {
  background: var(--ph-lime) !important;
  color: var(--ph-black) !important;
}

@media (max-width: 980px) {
  body.app-shell .ph-handbook-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.app-shell .ph-quick-process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  body.app-shell .ph-hero.ph-hero-compact .ph-hero-search,
  body.app-shell .ph-handbook-grid,
  body.app-shell .ph-quick-process-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Radical simple start screen: direct choices and essential organization knowledge. */
body.app-shell .simple-home {
  display: grid !important;
  gap: 14px !important;
}

body.app-shell .simple-home-hero {
  display: grid !important;
  gap: 14px !important;
  padding: clamp(22px, 4vw, 42px) !important;
  background: #0b0b0b !important;
  color: #fff !important;
  border-radius: 14px !important;
}

body.app-shell .simple-home-hero h1 {
  margin: 0 !important;
  max-width: 720px !important;
  color: #fff !important;
  font-size: clamp(2rem, 6vw, 4.8rem) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

body.app-shell .simple-home-search {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 8px !important;
  max-width: 760px !important;
}

body.app-shell .simple-home-search input,
body.app-shell .simple-home-search button {
  min-height: 58px !important;
  border-radius: 10px !important;
  font-size: 1rem !important;
}

body.app-shell .simple-home-search input {
  border: 0 !important;
  padding: 0 18px !important;
  font-weight: 800 !important;
}

body.app-shell .simple-home-search button {
  background: var(--ph-lime) !important;
  color: #0b0b0b !important;
}

body.app-shell .simple-choice-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

body.app-shell .simple-choice-card {
  display: grid !important;
  gap: 8px !important;
  min-height: 168px !important;
  padding: 18px !important;
  color: #0b0b0b !important;
  text-decoration: none !important;
  background: #fff !important;
  border: 2px solid #e1e1e1 !important;
  border-radius: 12px !important;
}

body.app-shell .simple-choice-card:hover,
body.app-shell .simple-choice-card:focus-visible {
  border-color: var(--ph-lime) !important;
  box-shadow: 0 0 0 4px rgba(166,238,0,.28) !important;
}

body.app-shell .simple-choice-card span {
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  color: #0b0b0b !important;
  background: var(--ph-lime) !important;
  border-radius: 999px !important;
  font-weight: 950 !important;
}

body.app-shell .simple-choice-card strong {
  display: block !important;
  font-size: clamp(1.2rem, 2.4vw, 1.7rem) !important;
  line-height: 1.08 !important;
  font-weight: 950 !important;
}

body.app-shell .simple-choice-card small {
  color: #59616c !important;
  font-size: .95rem !important;
  line-height: 1.35 !important;
  font-weight: 750 !important;
}

body.app-shell .simple-organization {
  display: grid !important;
  gap: 10px !important;
  padding: 18px !important;
  background: #fff !important;
  border: 1px solid #dedede !important;
  border-radius: 12px !important;
}

body.app-shell .simple-section-heading {
  display: flex !important;
  align-items: end !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

body.app-shell .simple-section-heading small {
  display: block !important;
  margin-bottom: 3px !important;
  color: #59616c !important;
  font-size: .78rem !important;
  font-weight: 850 !important;
}

body.app-shell .simple-section-heading h2 {
  margin: 0 !important;
  font-size: 1.2rem !important;
  line-height: 1.2 !important;
}

body.app-shell .simple-section-heading > a {
  flex: 0 0 auto !important;
  color: #0b0b0b !important;
  font-size: .88rem !important;
  font-weight: 900 !important;
}

body.app-shell .simple-organization-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  border-top: 1px solid #e5e5e5 !important;
}

body.app-shell .simple-organization-list > a {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 2px 12px !important;
  min-height: 68px !important;
  padding: 12px 10px !important;
  color: #0b0b0b !important;
  text-decoration: none !important;
  border-bottom: 1px solid #e5e5e5 !important;
}

body.app-shell .simple-organization-list > a:nth-child(odd) {
  border-right: 1px solid #e5e5e5 !important;
}

body.app-shell .simple-organization-list strong {
  font-size: .95rem !important;
  line-height: 1.25 !important;
}

body.app-shell .simple-organization-list small {
  grid-column: 1 !important;
  color: #59616c !important;
  font-size: .82rem !important;
  line-height: 1.35 !important;
}

body.app-shell .simple-organization-list span {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
  font-weight: 950 !important;
}

body.app-shell .simple-organization-list > a:hover,
body.app-shell .simple-organization-list > a:focus-visible {
  background: #f4f4f4 !important;
  box-shadow: inset 4px 0 0 var(--ph-lime) !important;
}

body.app-shell .simple-fast {
  display: grid !important;
  gap: 8px !important;
}

body.app-shell .simple-fast h2 {
  margin: 0 !important;
  font-size: 1.2rem !important;
  font-weight: 950 !important;
}

body.app-shell .simple-fast div {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body.app-shell .simple-fast a {
  display: flex !important;
  align-items: center !important;
  min-height: 46px !important;
  padding: 10px 12px !important;
  color: #0b0b0b !important;
  text-decoration: none !important;
  background: #fff !important;
  border: 1px solid #dedede !important;
  border-radius: 10px !important;
  font-size: .92rem !important;
  font-weight: 900 !important;
}

body.app-shell .simple-fast a:hover,
body.app-shell .simple-fast a:focus-visible {
  background: var(--ph-lime) !important;
  border-color: var(--ph-lime) !important;
}

@media (max-width: 760px) {
  body.app-shell .simple-home-search,
  body.app-shell .simple-choice-grid,
  body.app-shell .simple-fast div {
    grid-template-columns: 1fr !important;
  }
  body.app-shell .simple-choice-card {
    min-height: 126px !important;
  }
  body.app-shell .simple-organization-list {
    grid-template-columns: 1fr !important;
  }
  body.app-shell .simple-organization-list > a:nth-child(odd) {
    border-right: 0 !important;
  }
  body.app-shell .simple-section-heading {
    align-items: start !important;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  body.app-shell .simple-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Placeholder-friendly reading pages. */
body.app-shell .ph-article {
  max-width: 1320px !important;
  margin-inline: auto !important;
  gap: 12px !important;
}

body.app-shell .ph-article-hero {
  display: block !important;
  padding: 20px !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

body.app-shell .ph-article-hero h1 {
  font-size: clamp(1.8rem, 4vw, 3rem) !important;
  line-height: 1.08 !important;
}

body.app-shell .ph-article-hero p {
  max-width: 1120px !important;
  font-size: .98rem !important;
  line-height: 1.5 !important;
}

body.app-shell .ph-article-layout-simple {
  display: block !important;
}

body.app-shell .ph-article-main {
  gap: 10px !important;
}

body.app-shell .ph-rich-content {
  width: 100% !important;
  color: #20252b !important;
  font-size: .98rem !important;
  line-height: 1.6 !important;
}

body.app-shell .ph-rich-content > .kb-hero {
  display: none !important;
}

body.app-shell .ph-rich-content .kb-section {
  margin: 0 0 10px !important;
  padding: 18px !important;
  background: #fff !important;
  border: 1px solid #dedede !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

body.app-shell .ph-rich-content .kb-section h2 {
  margin: 0 0 10px !important;
  color: #0b0b0b !important;
  font-size: 1.2rem !important;
  line-height: 1.25 !important;
}

body.app-shell .ph-rich-content .kb-section h3 {
  margin: 16px 0 6px !important;
  color: #20252b !important;
  font-size: 1rem !important;
}

body.app-shell .ph-rich-content p,
body.app-shell .ph-rich-content ul,
body.app-shell .ph-rich-content ol {
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}

body.app-shell .ph-rich-content li + li {
  margin-top: 5px !important;
}

body.app-shell .ph-instruction-block,
body.app-shell .ph-info-card,
body.app-shell .ph-placeholder-block,
body.app-shell .ph-detail-panel {
  padding: 16px !important;
  border: 1px solid #dedede !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.app-shell .ph-instruction-block h2,
body.app-shell .ph-info-card h2,
body.app-shell .ph-placeholder-block h2 {
  margin: 0 0 8px !important;
  font-size: 1.05rem !important;
  line-height: 1.2 !important;
}

body.app-shell .ph-instruction-block p,
body.app-shell .ph-info-card p,
body.app-shell .ph-placeholder-block p,
body.app-shell .ph-placeholder-text {
  margin: 0 !important;
  color: #59616c !important;
  line-height: 1.45 !important;
}

body.app-shell .ph-placeholder-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(460px, 1fr)) !important;
  gap: 10px !important;
}

body.app-shell .ph-step-list {
  gap: 8px !important;
}

body.app-shell .ph-step-list li {
  padding: 10px !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

body.app-shell .ph-section-head .ph-eyebrow,
body.app-shell .ph-article .tag-list,
body.app-shell .kb-article-actions {
  display: none !important;
}

body.app-shell .domain-page {
  box-shadow: none !important;
}

body.app-shell .domain-board-simple .kb-article-grid {
  grid-template-columns: 1fr !important;
}

body.app-shell .domain-board-simple .kb-article-card {
  min-height: auto !important;
}

@media (max-width: 760px) {
  body.app-shell .ph-placeholder-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Task-led process detail. */
body.app-shell .ph-article { max-width: 1320px !important; }
body.app-shell .ph-article-hero { padding: 26px 30px !important; border-left: 6px solid var(--ph-lime) !important; }
body.app-shell .ph-process-meta { display: flex !important; flex-wrap: wrap !important; gap: 10px 26px !important; margin-top: 20px !important; padding-top: 16px !important; border-top: 1px solid var(--ph-line) !important; }
body.app-shell .ph-process-meta span { display: grid !important; gap: 2px !important; min-width: 130px !important; }
body.app-shell .ph-process-meta small { color: #667085 !important; font-size: .72rem !important; font-weight: 800 !important; text-transform: uppercase !important; }
body.app-shell .ph-process-meta strong { font-size: .9rem !important; }
body.app-shell .ph-process-layout { display: grid !important; grid-template-columns: minmax(0, 1fr) 320px !important; gap: 18px !important; align-items: start !important; }
body.app-shell .ph-process-layout .ph-instruction-block { padding: 26px !important; border-top: 5px solid var(--ph-black) !important; }
body.app-shell .ph-process-layout .ph-instruction-block h2 { font-size: 1.55rem !important; }
body.app-shell .ph-process-layout .ph-step-list { position: relative !important; gap: 0 !important; margin-top: 18px !important; }
body.app-shell .ph-process-layout .ph-step-list::before { content: "" !important; position: absolute !important; top: 24px !important; bottom: 24px !important; left: 23px !important; width: 3px !important; background: #dfe6d1 !important; }
body.app-shell .ph-process-layout .ph-step-list li { position: relative !important; display: grid !important; grid-template-columns: 48px minmax(0, 1fr) !important; gap: 16px !important; align-items: start !important; padding: 15px 0 !important; border: 0 !important; background: transparent !important; }
body.app-shell .ph-process-layout .ph-step-list li > span { z-index: 1 !important; display: grid !important; width: 48px !important; height: 48px !important; place-items: center !important; border-radius: 8px !important; color: var(--ph-black) !important; background: var(--ph-lime) !important; font-size: 1rem !important; font-weight: 900 !important; }
body.app-shell .ph-process-layout .ph-step-list p { padding-top: 3px !important; color: var(--ph-black) !important; }
body.app-shell .ph-process-layout .ph-step-list p strong,
body.app-shell .ph-process-layout .ph-step-list p small { display: block !important; }
body.app-shell .ph-process-layout .ph-step-list p strong { font-size: 1.02rem !important; line-height: 1.4 !important; }
body.app-shell .ph-process-layout .ph-step-list p small { margin-top: 4px !important; color: #667085 !important; font-size: .9rem !important; line-height: 1.5 !important; }
body.app-shell .ph-process-sidebar { position: sticky !important; top: 90px !important; overflow: hidden !important; border: 1px solid #dfe3e8 !important; border-radius: 10px !important; background: #fff !important; }
body.app-shell .ph-process-sidebar section { padding: 14px 16px !important; border-bottom: 1px solid #eceff2 !important; }
body.app-shell .ph-process-sidebar h2 { margin: 0 0 5px !important; font-size: .76rem !important; text-transform: uppercase !important; }
body.app-shell .ph-process-sidebar p,
body.app-shell .ph-process-sidebar li { margin: 0 !important; color: #475467 !important; font-size: .88rem !important; line-height: 1.4 !important; }
body.app-shell .ph-process-sidebar .is-missing { background: #fff8e8 !important; border-left: 4px solid #e39a16 !important; }
body.app-shell .ph-process-open { display: flex !important; margin: 14px !important; justify-content: center !important; }
body.app-shell .ph-sidebar-help { display: flex !important; justify-content: space-between !important; gap: 12px !important; padding: 16px !important; color: var(--ph-black) !important; text-decoration: none !important; background: var(--ph-lime) !important; }
body.app-shell .ph-sidebar-help span { font-weight: 800 !important; }

@media (max-width: 900px) {
  body.app-shell .ph-process-layout { grid-template-columns: 1fr !important; }
  body.app-shell .ph-process-sidebar { position: static !important; }
}

@media (max-width: 600px) {
  body.app-shell .ph-article-hero,
  body.app-shell .ph-process-layout .ph-instruction-block { padding: 18px !important; }
  body.app-shell .ph-process-meta { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
}

/* Interactive Planner process guide. */
body.app-shell .planner-guide { overflow: visible; border: 1px solid #dfe3e8; border-radius: 12px; background: #fff; }
body.app-shell .planner-guide-heading { display: flex; justify-content: space-between; gap: 24px; align-items: end; padding: 24px 26px 18px; border-top: 6px solid var(--ph-lime); background: #fff; color: #0b0b0b; }
body.app-shell .planner-guide-heading span { color: #52606d; font-size: .75rem; font-weight: 900; text-transform: uppercase; }
body.app-shell .planner-guide-heading h2 { margin: 4px 0 0; color: #0b0b0b; font-size: 1.6rem; }
body.app-shell .planner-guide-heading p { max-width: 390px; margin: 0; color: #475467; font-size: .9rem; }
body.app-shell .planner-guide-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 12px; border-bottom: 1px solid #e7e9ec; scrollbar-width: thin; }
body.app-shell .planner-guide-tabs .kb-tab { flex: 0 0 auto; min-height: 44px; padding: 9px 14px; border: 1px solid transparent; border-radius: 8px; color: #59616c; background: #f4f5f6; }
body.app-shell .planner-guide-tabs .kb-tab.is-active { color: #0b0b0b; background: var(--ph-lime); border-color: var(--ph-lime); }
body.app-shell .planner-guide-panel { grid-template-columns: 1fr; gap: 18px; padding: 24px; }
body.app-shell .planner-guide-panel.is-active { display: grid; }
body.app-shell .planner-guide-panel[hidden] { display: none; }
body.app-shell .planner-guide-copy > span { display: inline-block; margin-bottom: 8px; padding: 5px 8px; border-radius: 5px; color: #0b0b0b; background: var(--ph-lime); font-size: .72rem; font-weight: 900; text-transform: uppercase; }
body.app-shell .planner-guide-copy h3 { margin: 0 0 10px; font-size: 1.35rem; }
body.app-shell .planner-guide-copy p { color: #475467; line-height: 1.6; }
body.app-shell .planner-guide-copy > a { display: inline-flex; margin-top: 8px; padding: 10px 14px; border-radius: 7px; color: #0b0b0b; background: var(--ph-lime); font-weight: 850; text-decoration: none; }
body.app-shell .planner-guide-note { margin-top: 16px; padding: 12px; border-left: 4px solid var(--ph-lime); background: #f4f7ee; font-size: .88rem; line-height: 1.5; }
body.app-shell .planner-guide-panel figure { min-width: 0; margin: 0; }
body.app-shell .planner-guide-panel figcaption { padding-top: 8px; color: #667085; font-size: .8rem; }
body.app-shell .planner-visual { position: relative; overflow: visible; border: 1px solid #d7dce1; border-radius: 8px; background: #fff; }
body.app-shell .planner-visual img { display: block; width: 100%; height: auto; }
body.app-shell .planner-visual.is-zoomed { max-height: 76vh; overflow: auto; border-color: #8b949e; }
body.app-shell .planner-visual.is-zoomed img { width: max(1500px, 150%); max-width: none; }
body.app-shell .planner-visual.is-zoomed .planner-hotspot { display: none; }
body.app-shell .planner-hotspot { position: absolute; left: var(--x); top: var(--y); display: grid; width: 32px; height: 32px; padding: 0; place-items: center; border: 3px solid #fff; border-radius: 50%; color: #0b0b0b; background: var(--ph-lime); box-shadow: 0 2px 9px rgba(0,0,0,.25); font-size: .75rem; font-weight: 900; cursor: pointer; }
body.app-shell .planner-hotspot:focus-visible { outline: 3px solid #0b0b0b; outline-offset: 3px; }
body.app-shell .planner-tooltip { position: absolute; z-index: 10; left: 50%; bottom: calc(100% + 8px); width: min(240px, 60vw); padding: 9px 10px; border: 1px solid #b7bec6; border-radius: 6px; color: #0b0b0b; background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.16); font-size: .78rem; font-weight: 700; line-height: 1.4; opacity: 0; pointer-events: none; transform: translateX(-50%); }
body.app-shell .planner-hotspot:hover .planner-tooltip,
body.app-shell .planner-hotspot:focus .planner-tooltip { opacity: 1; }
body.app-shell .planner-hotspot[style*="88%"] .planner-tooltip { right: 0; left: auto; transform: none; }
body.app-shell .planner-zoom-toggle { margin-top: 10px; min-height: 42px; padding: 8px 13px; border: 1px solid #c9ced4; border-radius: 7px; color: #0b0b0b; background: #fff; font-weight: 850; cursor: pointer; }
body.app-shell .planner-zoom-toggle:hover,
body.app-shell .planner-zoom-toggle:focus-visible { border-color: #0b0b0b; background: var(--ph-lime); outline: none; }
body.app-shell .planner-open-details { grid-column: 1 / -1; display: grid; gap: 22px; padding-top: 4px; }
body.app-shell .planner-open-details section { min-width: 0; }
body.app-shell .planner-open-details h4 { margin: 0 0 10px; font-size: 1.08rem; }
body.app-shell .planner-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 9px; }
body.app-shell .planner-info-grid.is-three { grid-template-columns: repeat(3, 1fr); }
body.app-shell .planner-info-grid article,
body.app-shell .planner-split-info article { padding: 14px; border: 1px solid #dfe3e8; border-radius: 8px; background: #fafbfc; }
body.app-shell .planner-info-grid strong { display: block; margin-bottom: 4px; }
body.app-shell .planner-info-grid p,
body.app-shell .planner-split-info p,
body.app-shell .planner-split-info li { margin: 0; color: #59616c; font-size: .87rem; line-height: 1.5; }
body.app-shell .planner-split-info { display: grid; grid-template-columns: .8fr 1.2fr; gap: 9px; }
body.app-shell .planner-split-info ol,
body.app-shell .planner-split-info ul { margin: 8px 0; padding-left: 20px; }
body.app-shell .planner-troubleshooting { border: 1px solid #dfe3e8; border-radius: 8px; background: #fff; }
body.app-shell .planner-troubleshooting summary { padding: 14px; font-weight: 850; cursor: pointer; }
body.app-shell .planner-troubleshooting div { padding: 0 14px 14px; }
body.app-shell .planner-troubleshooting p { margin: 8px 0 0; color: #59616c; font-size: .88rem; line-height: 1.5; }
body.app-shell .planner-routine { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
body.app-shell .planner-routine article { padding: 18px; border: 1px solid #dfe3e8; border-radius: 8px; }
body.app-shell .planner-routine strong { font-size: 1rem; }
body.app-shell .planner-routine p { margin: 6px 0 0; color: #59616c; font-size: .9rem; line-height: 1.5; }

@media (max-width: 760px) {
  body.app-shell .planner-guide-heading { display: block; padding: 20px; }
  body.app-shell .planner-guide-heading p { margin-top: 8px; }
  body.app-shell .planner-guide-panel.is-active { grid-template-columns: 1fr; padding: 16px; }
  body.app-shell .planner-routine { grid-template-columns: 1fr; }
  body.app-shell .planner-info-grid.is-three,
  body.app-shell .planner-split-info { grid-template-columns: 1fr; }
  body.app-shell .planner-tooltip { left: 0; transform: none; }
  body.app-shell .planner-visual.is-zoomed img { width: 1100px; }
}

/* Wide handbook pages without article sidebars. */
body.app-shell main.container {
  width: min(90vw, 1180px) !important;
  max-width: 1180px !important;
  padding-inline: 0 !important;
}

body.app-shell .site-header-inner {
  width: min(90vw, 1180px) !important;
  max-width: 1180px !important;
}

body.app-shell .ph-shell,
body.app-shell .ph-article {
  width: 100% !important;
  max-width: none !important;
}

body.app-shell .ph-process-layout {
  display: block !important;
  width: 100% !important;
}

body.app-shell .ph-article-main {
  width: 100% !important;
}

/* Centered reading measure for regular handbook articles. */
body.app-shell .ph-article {
  width: min(100%, 900px) !important;
  max-width: 900px !important;
  margin-inline: auto !important;
  gap: 14px !important;
}

body.app-shell .ph-article.ph-article--wide {
  width: 100% !important;
  max-width: 1180px !important;
}

body.app-shell .ph-article .kb-breadcrumbs,
body.app-shell .ph-article .ph-back-link {
  width: 100% !important;
}

body.app-shell .ph-article-hero {
  width: 100% !important;
  padding: clamp(22px, 3vw, 34px) !important;
  border: 1px solid #dedede !important;
  border-left: 5px solid var(--ph-lime) !important;
  border-radius: 10px !important;
  background: #fff !important;
}

body.app-shell .ph-article-hero > div {
  width: 100% !important;
}

body.app-shell .ph-article-hero h1 {
  max-width: 760px !important;
  margin-top: 10px !important;
  font-size: clamp(1.75rem, 3.6vw, 2.75rem) !important;
  line-height: 1.12 !important;
}

body.app-shell .ph-article-hero p {
  max-width: 720px !important;
  margin-top: 12px !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
}

body.app-shell .ph-article .ph-process-meta {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-top: 22px !important;
}

body.app-shell .ph-article .ph-process-meta span {
  min-width: 0 !important;
}

body.app-shell .ph-article .ph-process-meta strong {
  overflow-wrap: anywhere !important;
}

body.app-shell .ph-article .ph-rich-content .kb-section {
  padding: clamp(18px, 2.5vw, 26px) !important;
  border-color: #e1e1e1 !important;
}

body.app-shell .ph-article .ph-rich-content .kb-section h2 {
  padding-bottom: 9px !important;
  border-bottom: 2px solid #eef0ea !important;
  font-size: 1.25rem !important;
}

body.app-shell .ph-article .ph-rich-content p,
body.app-shell .ph-article .ph-rich-content li {
  max-width: 74ch !important;
}

@media (max-width: 760px) {
  body.app-shell main.container,
  body.app-shell .site-header-inner {
    width: calc(100% - 28px) !important;
  }

  body.app-shell .ph-article .ph-process-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.app-shell .ph-article-hero {
    padding: 20px !important;
  }
}