/* ============================================================
   PERSONIO STATUS — CUSTOM CSS  (Voyager Design System)
   Paste the whole file into: Customize page > Custom CSS

   Rebuilt against Voyager DS:
   https://personio.atlassian.net/wiki/spaces/CKR/pages/6717931563

   Sources for every value below:
     Colour      /pages/6716489798
     Typography  /pages/6717603888
     Spacing     /pages/6715965527
     Buttons     /pages/6717079605
     Motion      /pages/6716850263

   ⚠ TWO THINGS TO RESOLVE BEFORE GO-LIVE — see notes at the
     bottom of this file (FT Regola Neue hosting, and whether
     Voyager is even in scope for Statuspage).
   ============================================================ */

/* Inter covers the UI/controls ramp. FT Regola Neue is a licensed
   brand face and is NOT on Google Fonts — it must be self-hosted.
   Until it is, headings fall back to Inter and the page still
   renders cleanly, just off-brand on the type. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ---------- Voyager tokens ---------- */
:root {
  /* Sky — primary accent (Colour › Core palette) */
  --vy-sky-5:   #EBF3FD;
  --vy-sky-10:  #D0DEFB;
  --vy-sky-20:  #A1BCF7;
  --vy-sky-50:  #1359EC;   /* primary accent */
  --vy-sky-60:  #0743C5;   /* hover / pressed */
  --vy-sky-80:  #0A2E76;

  /* Gray + Fog — text and surfaces */
  --vy-gray-5:  #F5F5F4;
  --vy-gray-10: #E6E6E5;
  --vy-gray-60: #666666;
  --vy-gray-70: #525252;
  --vy-gray-90: #262626;
  --vy-gray-95: #141414;
  --vy-fog-5:   #F4F1F2;
  --vy-fog-10:  #E9E2E5;

  /* Semantic — status components bind here FIRST, not to the
     brand palette (Colour › Semantic colours) */
  --vy-positive:       #00A679;
  --vy-positive-soft:  #E1F9E8;
  --vy-negative:       #F02B6E;
  --vy-negative-soft:  #FFE9EE;
  --vy-warning-soft:   #FFF5D0;
  --vy-info-soft:      #F0F0F0;

  /* Radii (Spacing › Border radii) */
  --vy-radius-sm:   6px;
  --vy-radius-md:  10px;   /* interactive: buttons, inputs */
  --vy-radius-lg:  16px;   /* static: cards */
  --vy-radius-xl:  24px;   /* marketing panels */
  --vy-radius-pill: 9999px;

  /* Spacing ladder (4px grid) */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
  --space-4: 16px;  --space-5: 20px;  --space-6: 24px;
  --space-8: 32px;  --space-10: 40px; --space-12: 48px;
  --space-16: 64px; --space-20: 80px;

  /* Motion (Motion › Durations & easings) */
  --vy-dur:      200ms;
  --vy-dur-fast: 120ms;
  --vy-ease:     cubic-bezier(.2, .6, .35, 1);

  /* Type (Typography › Brand ramp + UI ramp) */
  --vy-font-brand:  "FT Regola Neue", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --vy-font-ui:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --vy-h1-size:     clamp(40px, 5vw, 64px);
  --vy-h2-size:     clamp(28px, 3.5vw, 40px);
  --vy-h3-size:     clamp(22px, 2.5vw, 28px);
  --vy-h4-size:     20px;
  --vy-prose-size:  18px;
  --vy-prose-lh:    1.65;

  /* Layout */
  --vy-container: 1120px;
  --vy-gutter:    var(--space-8);
  --vy-lift:      var(--space-20);  /* band bottom padding AND content lift */

  /* Elevation: xs inputs · sm hover · md floating · lg modals */
  --vy-shadow-sm: 0 2px 8px rgba(20, 20, 20, .05);
  --vy-shadow-md: 0 12px 40px rgba(10, 46, 118, .07);
  --vy-shadow-lg: 0 24px 60px rgba(10, 46, 118, .14);
}

/* ---------- Base ---------- */
body.status {
  font-family: var(--vy-font-ui) !important;
  color: var(--vy-gray-70);
  overflow-x: hidden;
}
/* Brand face carries headings; Inter carries controls and metadata */
body.status h1, body.status h2, body.status h3, body.status h4 {
  font-family: var(--vy-font-brand) !important;
  color: var(--vy-gray-95);
}

.pnio-wrap {
  width: 100%;
  max-width: var(--vy-container);
  margin: 0 auto;
  padding: 0 var(--vy-gutter);
  box-sizing: border-box;
}

/* ---------- Band + nav ---------- */
.pnio-top-band {
  /* Sky 5 → white wash replaces the old lavender gradient */
  background: radial-gradient(120% 140% at 85% 0%, var(--vy-sky-5) 0%, #FFFFFF 60%);
  padding-bottom: var(--vy-lift);
  position: relative;
  overflow: hidden;
}
.pnio-nav { height: 76px; display: flex; align-items: center; }
.pnio-nav__inner { display: flex; align-items: center; justify-content: space-between; }

/* Scoped under .pnio-top-band so the colour wins over the global
   `body.status a` rule (0,1,2) — .pnio-brand is an <a>, so without the
   extra class the wordmark inherits the Sky-blue link colour.
   gray-90 matches the footer wordmark. Paths use currentColor. */
.pnio-top-band .pnio-brand { display: inline-flex; align-items: center; color: var(--vy-gray-90); text-decoration: none; }
/* Height-locked, width auto so the ~5:1 wordmark keeps its proportions. */
.pnio-brand__mark { height: 24px; width: auto; }

.pnio-nav__links { display: flex; align-items: center; gap: var(--space-6); }
/* Scoped under .pnio-top-band so these win over the global `body.status a`
   rule (specificity 0,1,2). Without the extra class the nav link inherits
   the global Sky-blue link colour — making it look permanently active.
   Intended treatment: gray at rest, Sky on hover (matches footer links). */
.pnio-top-band .pnio-nav__link {
  font-family: var(--vy-font-ui);
  font-size: 14px;          /* Controls Medium 14/20 */
  line-height: 20px;
  font-weight: 500;
  color: var(--vy-gray-70);
  text-decoration: none;
  transition: color var(--vy-dur-fast) var(--vy-ease);
}
.pnio-top-band .pnio-nav__link:hover { color: var(--vy-sky-50); }


/* ---------- Hero ---------- */
.pnio-hero { padding-top: var(--space-8); }
.pnio-hero__inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--space-10); align-items: center; }
.pnio-hero__title {
  font-family: var(--vy-font-brand);
  font-size: var(--vy-h1-size);   /* clamp(40, 5vw, 64) — fluid per DS */
  line-height: 1.05;
  letter-spacing: -.03em;
  font-weight: 700;
  margin: 0 0 var(--space-4);
}
.pnio-hero__desc {
  font-family: var(--vy-font-brand);
  font-size: var(--vy-prose-size);   /* 18 / 1.65 prose */
  line-height: var(--vy-prose-lh);
  color: var(--vy-gray-70);
  max-width: 480px;
  margin: 0;
}
/* Optional eyebrow: 12 / 600 / .12em, uppercase (Label style) */
.pnio-hero__eyebrow {
  font-family: var(--vy-font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vy-sky-50);
  display: block;
  margin-bottom: var(--space-3);
}

.pnio-hero__art { display: flex; justify-content: flex-end; }
.pnio-art-card {
  width: 100%;
  max-width: 320px;
  background: #fff;
  border-radius: var(--vy-radius-xl);   /* marketing panel radius */
  box-shadow: var(--vy-shadow-lg);
  overflow: hidden;
}
.pnio-art-card__bar { display: flex; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--vy-gray-10); }
.pnio-art-card__bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--vy-fog-10); }
.pnio-art-card__body { padding: var(--space-6) var(--space-6) var(--space-8); }
.pnio-art-check {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--vy-sky-5);
  color: var(--vy-sky-50);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-5);
}
.pnio-art-check svg { width: 24px; height: 24px; }
.pnio-art-lines { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-5); }
.pnio-l { height: 9px; border-radius: var(--vy-radius-sm); background: var(--vy-gray-10); display: block; }
.pnio-l1 { width: 70%; }
.pnio-l2 { width: 45%; }
.pnio-art-dot-row { display: flex; align-items: center; gap: var(--space-3); }
.pnio-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--vy-sky-50); flex: none; }
.pnio-l3 { width: 55%; }

/* ============================================================
   Statuspage content
   ============================================================ */
body.status .layout-content.status.status-index > .container {
  width: 100% !important;
  max-width: var(--vy-container) !important;
  padding: 0 var(--vy-gutter);
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  margin-top: calc(var(--vy-lift) * -1);
}

/* ---------- Status pill ----------
   Bound to SEMANTIC tokens, not the Sky accent. The DS is explicit:
   "Buttons, banners, and status components pull from these tokens
   first; the brand palette is for editorial and marketing surfaces."
   Soft weight = tinted background for inline status. */
body.status .layout-content.status.status-index .page-status {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--vy-positive-soft) !important;
  border: 0 !important;
  border-radius: var(--vy-radius-pill) !important;
  padding: var(--space-2) var(--space-4) !important;
  margin: 0 0 var(--space-6) !important;
  text-shadow: none !important;
  transition: background var(--vy-dur) var(--vy-ease);
}
/* Statuspage's own h2 margin has to be zeroed or the text sits high
   in the pill. line-height 1 + nested flex centres icon to text. */
body.status .layout-content.status.status-index .page-status .status {
  display: inline-flex !important;
  align-items: center !important;
  font-family: var(--vy-font-ui) !important;
  color: var(--vy-positive) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  top: 0 !important;
}
body.status .layout-content.status.status-index .page-status .status:before {
  content: "\f05d";                 /* FontAwesome check-circle-o, already loaded by Statuspage */
  font-family: FontAwesome;
  font-weight: 400;
  font-size: 15px;
  line-height: 1;
  margin-right: var(--space-2);
  position: relative;
  top: -0.5px;
}
/* Degraded / maintenance → Warning soft */
body.status .layout-content.status.status-index .page-status.status-minor,
body.status .layout-content.status.status-index .page-status.status-maintenance { background: var(--vy-warning-soft) !important; }
body.status .layout-content.status.status-index .page-status.status-minor .status,
body.status .layout-content.status.status-index .page-status.status-maintenance .status { color: #7A5B00 !important; }
/* Major / critical → Negative */
body.status .layout-content.status.status-index .page-status.status-major,
body.status .layout-content.status.status-index .page-status.status-critical { background: var(--vy-negative-soft) !important; }
body.status .layout-content.status.status-index .page-status.status-major .status,
body.status .layout-content.status.status-index .page-status.status-critical .status { color: var(--vy-negative) !important; }

body.status .layout-content.status.status-index .page-status .last-updated-stamp {
  font-family: var(--vy-font-ui) !important;
  font-size: 12px !important;       /* Label Small */
  color: var(--vy-gray-60) !important;
  float: none !important;
  top: 0 !important;
  margin-left: var(--space-3);
}

/* ---------- Components card ---------- */
body.status .layout-content.status.status-index .components-section { margin-bottom: var(--space-12); }
body.status .layout-content.status.status-index .components-uptime-link {
  font-family: var(--vy-font-ui);
  font-size: 12px;
  color: var(--vy-gray-60);
  margin-bottom: var(--space-3);
}
body.status .layout-content.status.status-index .components-container {
  background: #fff;
  border: 1px solid var(--vy-gray-10) !important;
  border-radius: var(--vy-radius-lg);        /* 16px card radius */
  box-shadow: var(--vy-shadow-md);
  overflow: hidden;
}
body.status .layout-content.status.status-index .components-container .component-container {
  border: 0 !important;
  border-bottom: 1px solid var(--vy-gray-10) !important;
  border-radius: 0 !important;
  padding: var(--space-5) var(--space-6) !important;   /* gap-xlarge card padding */
}
body.status .layout-content.status.status-index .components-container .component-container:last-child { border-bottom: 0 !important; }
body.status .layout-content.status.status-index .components-container .component-inner-container .name {
  font-family: var(--vy-font-brand) !important;   /* Heading H5 (product) 16/20 */
  font-size: 16px !important;
  line-height: 20px !important;
  font-weight: 600 !important;
  color: var(--vy-gray-95) !important;
}
body.status .layout-content.status.status-index .components-container .component-inner-container.status-green .component-status,
body.status .layout-content.status.status-index .components-container .component-inner-container.status-green .icon-indicator {
  color: var(--vy-positive) !important;
  font-family: var(--vy-font-ui) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* Group toggle — soft Sky square, interactive radius.
   Sized to sit alongside the 16/20 name: 22px keeps it close to the
   text cap-height rather than towering over it. */
body.status .layout-content.status.status-index .group-parent-indicator {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  margin-right: var(--space-3);
  border-radius: var(--vy-radius-sm);
  background: var(--vy-sky-5);
  color: var(--vy-sky-50) !important;
  vertical-align: middle;
  transition: background var(--vy-dur-fast) var(--vy-ease);
}
body.status .layout-content.status.status-index .group-parent-indicator:before {
  content: "+" !important;
  font-family: var(--vy-font-ui) !important;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}
body.status .layout-content.status.status-index .group-parent-indicator.fa-minus-square-o:before { content: "\2013" !important; }
body.status .layout-content.status.status-index .group-parent-indicator:hover { background: var(--vy-sky-10); }

/* Align child component names under the parent group name. Statuspage
   indents .child-components-container by default; zero that, then push
   the child row right by exactly the toggle button + its gap
   (22px button + var(--space-3)) so the text columns line up. */
body.status .layout-content.status.status-index .components-container .child-components-container {
  padding-left: 0 !important;
  margin-left: 0 !important;
}
body.status .layout-content.status.status-index .components-container .child-components-container .component-inner-container {
  padding-left: calc(22px + var(--space-3)) !important;
}

/* ---------- Scheduled maintenance ---------- */
/* Stack title + scheduled-for date vertically inside the h3,
   so the date sits left-aligned above the updates blurb. */
.scheduled-maintenance .incident-title {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: var(--space-1) !important;
}
/* Remove the pull-right float and style the date as a compact label */
.scheduled-maintenance .incident-title small.pull-right {
  float: none !important;
  display: block !important;
  text-align: left !important;
  font-family: var(--vy-font-ui) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--vy-gray-60) !important;
  letter-spacing: .01em !important;
}

/* ---------- Incidents ---------- */
body.status .layout-content.status.status-index .incidents-list .status-day .date {
  font-family: var(--vy-font-brand) !important;
  font-size: 20px !important;        /* H4 */
  font-weight: 600 !important;
  letter-spacing: -.02em;
  color: var(--vy-gray-95) !important;
}
body.status .layout-content.status.status-index .incidents-list .incident-title a {
  font-family: var(--vy-font-brand) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--vy-gray-95) !important;
  transition: color var(--vy-dur-fast) var(--vy-ease);
}
body.status .layout-content.status.status-index .incidents-list .incident-title a:hover { color: var(--vy-sky-50) !important; }
/* History page (/history): the <a> itself is .incident-title, so the
   index selector above (which expects a nested <a>) doesn't catch it.
   Give it the same brand-face heading treatment and put it on its own
   line above the resolved message. */
body.status .incident-history .incident-container a.incident-title {
  display: block;
  font-family: var(--vy-font-brand) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--vy-gray-95) !important;
  margin-bottom: var(--space-1);
  transition: color var(--vy-dur-fast) var(--vy-ease);
}
body.status .incident-history .incident-container a.incident-title:hover { color: var(--vy-sky-50) !important; }
/* Status pill for the history page. The condensed history template has
   no status-word element (the homepage gets its "Completed/Resolved"
   from .update strong, which doesn't exist here), so we synthesise one
   as a ::before on the message line. The history list only holds
   finalised incidents, so the title's impact-* class is a safe proxy:
   maintenance → Completed (Sky), any incident impact → Resolved (green).
   Uses :has() to read the sibling title's class — supported across all
   current browsers; if it ever fails, maintenance items simply read
   "Resolved" rather than breaking. */
body.status .incident-history .incident-container .message.incident-body::before {
  content: "Resolved";
  display: inline-block;
  font-family: var(--vy-font-ui);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: 4px var(--space-2);
  margin-right: var(--space-2);
  border-radius: var(--vy-radius-pill);
  vertical-align: middle;
  background: var(--vy-positive-soft);
  color: var(--vy-positive);
}
body.status .incident-history .incident-container:has(a.incident-title.impact-maintenance) .message.incident-body::before {
  content: "Completed";
  background: var(--vy-sky-5);
  color: var(--vy-sky-50);
}
/* Hide verbose update text — target .updates-container (actual Statuspage HTML),
   works on both the index page and the /history page */
/* Hide ALL update types by default, then show only Resolved / Completed */
.incident-container .updates-container .update { display: none !important; }
.incident-container .updates-container .update.resolved,
.incident-container .updates-container .update.completed {
  display: block !important;
  margin-bottom: 4px !important;
}
/* Hide the verbose text and stray <br> on those rows */
.incident-container .updates-container .update.resolved .whitespace-pre-wrap,
.incident-container .updates-container .update.completed .whitespace-pre-wrap { display: none !important; }
.incident-container .updates-container .update.resolved br,
.incident-container .updates-container .update.completed br { display: none !important; }
/* Status pill — same treatment as the /history page. Here the status
   word ("Resolved"/"Completed") already exists as the <strong>, so we
   just restyle it into a pill rather than synthesising one. These
   selectors aren't scoped to .status-index, but the history template
   has no .updates-container, so they only ever hit the homepage. */
.incident-container .updates-container .update.resolved strong,
.incident-container .updates-container .update.completed strong {
  display: inline-block;
  font-family: var(--vy-font-ui) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
  padding: 4px var(--space-2) !important;
  margin-right: var(--space-2) !important;
  border-radius: var(--vy-radius-pill) !important;
  vertical-align: middle;
}
.incident-container .updates-container .update.resolved strong {
  background: var(--vy-positive-soft) !important;
  color: var(--vy-positive) !important;
}
.incident-container .updates-container .update.completed strong {
  background: var(--vy-sky-5) !important;
  color: var(--vy-sky-50) !important;
}
/* In-progress / active states — deliberately MUTED so an ongoing
   incident reads calm, not alarming. Same pill shape, soft neutral
   fill (no strong amber/red). Covers both the homepage .updates-container
   and any other .update context (e.g. incident detail). */
.incident-container .update.investigating strong,
.incident-container .update.identified strong,
.incident-container .update.monitoring strong,
.incident-container .update.in_progress strong,
.incident-container .update.verifying strong,
.incident-container .update.scheduled strong {
  display: inline-block;
  font-family: var(--vy-font-ui) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
  padding: 4px var(--space-2) !important;
  margin-right: var(--space-2) !important;
  border-radius: var(--vy-radius-pill) !important;
  vertical-align: middle;
  background: var(--vy-gray-5) !important;
  color: var(--vy-gray-70) !important;
}

/* ---------- Hide injected elements ---------- */
/* Powered by Atlassian Statuspage footer.
   NOTE: scope the href matches to .page-footer. Statuspage renders
   incident title links as ABSOLUTE urls (…statuspage.io/incidents/…)
   on the /history page, so an unscoped a[href*="statuspage.io"] also
   hides every incident title there — which is exactly the bug this
   scoping fixes. */
.page-footer .atlassian-logo,
.page-footer .powered-by,
.page-footer a[href*="atlassian.com/software/statuspage"],
.page-footer a[href*="statuspage.io"] { display: none !important; }

/* Subscribe / updates button and dropdown — hide globally, not just in nav */
.updates-dropdown-container { display: none !important; }

/* "Stay informed / get proactive updates" subscription section.
   Statuspage uses several class names depending on page and version. */
.subscription-public-signup,
.subscription-section,
.subscription-banner,
.page-subscribe,
.subscribe-section,
.hero-subscribe,
[class*="subscription"],
[class*="subscribe"] { display: none !important; }

/* ---------- Links ---------- */
body.status .layout-content.status .page-footer { padding-top: var(--space-6); }
body.status a,
body.status .history-footer-link {
  color: var(--vy-sky-50);
  transition: color var(--vy-dur-fast) var(--vy-ease);
}
body.status a:hover,
body.status .history-footer-link:hover { color: var(--vy-sky-60); }

/* Visible focus ring — Sky, for keyboard nav */
body.status a:focus-visible,
body.status button:focus-visible,
body.status .show-updates-dropdown:focus-visible {
  outline: 2px solid var(--vy-sky-50);
  outline-offset: 2px;
  border-radius: var(--vy-radius-sm);
}

/* Respect reduced-motion (Accessibility page is "coming soon";
   this is the safe default until it lands) */
@media (prefers-reduced-motion: reduce) {
  body.status *, .pnio-top-band * { transition: none !important; animation: none !important; }
}

/* ============================================================
   Tablet (<= 900px)
   ============================================================ */
@media (max-width: 900px) {
  :root { --vy-gutter: var(--space-6); --vy-lift: var(--space-16); }
  .pnio-hero__inner { grid-template-columns: 1fr; gap: var(--space-8); }
  .pnio-hero__art { justify-content: flex-start; }
  .pnio-art-card { max-width: 300px; }
}

/* ============================================================
   Mobile (<= 600px)
   ============================================================ */
@media (max-width: 600px) {
  :root { --vy-gutter: var(--space-5); --vy-lift: var(--space-12); }
  .pnio-nav { height: 64px; }
  .pnio-nav__link { display: none; }
  .pnio-nav__links { gap: var(--space-3); }
  .pnio-brand__mark { height: 20px; }
  .pnio-hero { padding-top: var(--space-6); }
  .pnio-hero__desc { font-size: 16px; }
  .pnio-hero__art { display: none; }
  body.status .layout-content.status.status-index .components-container .component-container { padding: var(--space-4) !important; }
}

/* ============================================================
   OPEN ITEMS
   ------------------------------------------------------------
   1. FT REGOLA NEUE IS NOT LOADED. It's a licensed brand face,
      not available on Google Fonts. Until it's self-hosted, every
      heading falls back to Inter — functional but off-brand.
      Two things needed: the webfont files, and confirmation the
      licence permits serving them on the Statuspage domain
      (a third-party Atlassian host, not personio.com). Request
      via a design ticket:
      https://personio.atlassian.net/jira/software/c/projects/ED/form/1094

   2. VOYAGER'S SCOPE DOESN'T LIST STATUSPAGE. The DS defines
      itself as the language for Help Center, Academy, and
      Community. Statuspage is a fourth surface. Applying Voyager
      here is a reasonable extension (Statuspage sits next to the
      Help Center in the support journey) but it should be
      confirmed with Petrus Gerryts, and per Ground rules it needs
      a design ticket + QA before it ships.

   3. SENTENCE CASE. Ground rules say sentence case for headings,
      buttons, page titles, and labels. The header HTML currently
      reads "Personio Status" — decide with design whether that's
      a proper noun or should become "Personio status".

   4. SELECTOR DRIFT. Statuspage's class names are stable but not
      contractually guaranteed. Verify each block against the live
      preview after pasting; expect minor tweaks.
   ============================================================ */