/* Typography aligned with Petrel Design Guidelines Overview */
.page-lead{font-size:16px;line-height:1.6;color:#57606a;margin:0 0 12px}
.page-intro{font-size:13px;line-height:1.8;color:#57606a;margin:0 0 32px}
.section-heading{font-size:18px;font-weight:700;color:#0d1117;margin:0 0 8px}
.section-text{font-size:13px;line-height:1.8;color:#57606a;margin:0 0 16px}
.feedback-primary{padding:24px;border-radius:8px;border:1px solid #d0d7de;background:#f6f8fa;margin:0 0 32px}
.feedback-primary .section-text{margin:0 0 24px}
.feedback-primary .pg-btn-primary{margin:0}
.pg-btn-primary{position:relative;z-index:0;display:inline-flex;align-items:center;justify-content:center;min-height:44px;font-size:14px;font-weight:600;line-height:1.4;padding:10px 20px;border-radius:6px;text-decoration:none;border:none;background:transparent;color:#ffffff;-webkit-font-smoothing:antialiased;isolation:isolate;transition:color .15s}
.pg-btn-primary::before{content:'';position:absolute;inset:0;border-radius:6px;background:#0062cc;border:2px solid #0062cc;z-index:-1;transition:background .15s,border-color .15s}
.pg-btn-primary:hover{color:#ffffff;text-decoration:none}
.pg-btn-primary:hover::before{background:#004ea3;border-color:#004ea3}
.pg-btn-primary:focus-visible{outline:2px solid #0062cc;outline-offset:2px}
.feedback-secondary{margin:0 0 32px;padding-top:24px;border-top:1px solid #d0d7de}
.feedback-secondary .section-heading{font-size:16px}
.contact-link{font-size:14px;font-weight:600;line-height:1.5;color:#004578;text-decoration:underline;text-underline-offset:2px}
.contact-link:hover{color:#003052}
.contact-link:focus-visible{outline:2px solid #004578;outline-offset:2px;border-radius:2px}
.process-heading{font-size:18px;font-weight:700;color:#0d1117;margin:0 0 20px}
.process-map{display:flex;align-items:stretch;gap:28px;margin:0 0 16px;padding:0;list-style:none}
.process-node{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:16px 12px;background:#f6f8fa;border:1px solid #d0d7de;border-radius:8px;position:relative;min-width:0}
.process-node:not(:last-child)::after{content:'→';position:absolute;right:-22px;top:50%;transform:translateY(-50%);font-size:18px;font-weight:600;color:#0062cc;line-height:1}
.process-node__badge{display:flex;align-items:center;justify-content:center;width:28px;height:28px;margin-bottom:10px;border-radius:50%;background:#0062cc;color:#ffffff;font-size:13px;font-weight:600;line-height:1;flex-shrink:0}
.process-node__text{margin:0;font-size:13px;line-height:1.5;color:#57606a}
.process-note{display:flex;align-items:flex-start;gap:16px;margin:20px 0 0;padding:16px 20px 16px 16px;background:#fffbeb;border:1px solid #f59e0b;border-left:4px solid #f59e0b;border-radius:6px;overflow:visible}
.process-note__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:32px;min-width:32px;height:32px;padding:2px;margin:2px 0 0;color:#b45309;overflow:visible;line-height:0}
.process-note__icon svg{display:block;width:24px;height:24px;min-width:24px;fill:currentColor;overflow:visible}
.process-note__text{margin:0;flex:1;min-width:0;font-size:13px;line-height:1.8;color:#57606a}
.process-note__text strong{display:block;margin-bottom:4px;font-size:13px;font-weight:700;color:#0d1117}
@media screen and (max-width: 768px){
  .process-map{flex-direction:column;gap:32px}
  .process-node:not(:last-child)::after{content:'↓';right:auto;top:auto;bottom:-26px;left:50%;transform:translateX(-50%)}
}
.related-pages{margin-top:32px;padding-top:20px;border-top:1px solid #d0d7de}
.related-pages h3{font-size:13px;font-weight:700;color:#0d1117;margin:0 0 10px}
.related-pages ul{margin:0;padding-left:20px;font-size:13px;line-height:1.8;color:#57606a}
.related-pages a{color:#004578;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.related-pages a:hover{color:#003052}

# Contributing

Help us keep the Petrel UX Guideline accurate and useful.
Found something missing, outdated, incorrect, or unclear? Let us know. Your feedback helps us identify where the guideline needs improvement.
Use the Microsoft Form to submit structured feedback about the Petrel UX Guideline. This is the primary channel for reporting issues and requesting new guidance.
Report an issue or request guidance
## Need to discuss something directly?

If your question needs a conversation rather than a form submission, contact the Petrel UX Guideline team.
Contact the Petrel UX Guideline team
## What happens next?

1
We review submitted feedback.
2
We identify recurring issues and requests.
3
We assess impact and relevance.
4
We use the findings to prioritize guideline updates.
Important
Not every request results in a guideline change. We focus updates on issues with the broadest impact on consistency, accessibility, and usability.
    
### Related pages

Changelog
— Recent additions and updates
Overview
— Orientation and section entry points