@charset "UTF-8";

/* ==========================================================================
   pluscloud 2026 — Zendesk Help Center theme
   Built to feel like one product together with pluscloud.nl.
   All design tokens are lifted from the live website (Essentials / pixfort).

   Contents
   01  Tokens
   02  Reset & base
   03  Typography
   04  Layout
   05  Buttons
   06  Forms
   07  Top bar
   08  Header & navigation
   09  Search
   10  Hero
   11  Icons  <- map icons to category / section IDs here
   12  Category cards
   13  Sidebar navigation tree
   14  Breadcrumbs & sub navigation
   15  Category & section pages
   16  Article page
   17  Article content (WYSIWYG)
   18  Table of contents
   19  Voting, sharing, following
   20  Comments
   21  Search results
   22  Requests & ticket form
   23  Service catalog & approvals
   24  Community
   25  Profile & subscriptions
   26  Notifications & status labels
   27  Pagination
   28  Footer
   31  Search palette
   32  Home page effects
   29  Motion
   30  Accessibility, print & motion
   ========================================================================== */


/* 01 — TOKENS ============================================================= */

:root {
  /* Colors from the theme settings */
  --pc-primary: #000000;
  --pc-on-primary: #FFFFFF;
  --pc-accent: #ED8269;
  --pc-heading: #000000;
  --pc-text: #4B4B4F;
  --pc-link: #000000;
  --pc-link-hover: #ED8269;
  --pc-link-visited: #6E6E73;
  --pc-bg: #FFFFFF;
  --pc-surface: #FAFAFA;
  --pc-border: #E4E4E7;

  /* Derived greys — the zinc scale used on the website */
  --pc-gray-50: #FAFAFA;
  --pc-gray-100: #F4F4F5;
  --pc-gray-200: #E4E4E7;
  --pc-gray-300: #D4D4D8;
  --pc-gray-400: #A1A1AA;
  --pc-gray-500: #71717A;
  --pc-gray-600: #52525B;
  --pc-gray-700: #3F3F46;
  --pc-gray-800: #27272A;
  --pc-gray-900: #18181B;

  /* Status colors */
  --pc-green: #1F7A4D;
  --pc-red: #D93B30;
  --pc-amber: #B4690E;
  --pc-blue: #1274E7;

  /* Signature gradient from the website */
  --pc-gradient: linear-gradient(100deg, #716CFF 0%, #F269FF 52%, #FFCB34 100%);
  --pc-gradient-soft: linear-gradient(160deg, #EEEDFF 0%, #FBEEFF 45%, #FFF6E2 100%);

  /* Typography */
  --pc-font-heading: 'Google Sans', 'Product Sans', Manrope, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --pc-font-body: Manrope, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --pc-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --pc-article-size: calc(18 * 1px);

  /* Rhythm */
  --pc-radius-sm: 6px;
  --pc-radius-normal: .3rem;
  --pc-radius: 10px;
  --pc-btn-h: 43px;             /* the call-to-action's height: 9 + 25.2 + 9 */
  --pc-radius-lg: 16px;
  --pc-radius-xl: 24px;
  --pc-radius-pill: 999px;

  --pc-container: 1420px;      /* measured: content is 1380 wide inside 20px gutters */
  --pc-hero-inset: 20px;       /* measured: the hero block is the viewport minus 40 */
  --pc-radius-hero: 15px;      /* measured: the same radius as the floating header */
  /* One gutter for the whole theme. The header floats 22.5px from the edge and
     pads inwards by the remainder, so its logo lines up with page content. */
  --pc-gutter: 20px;           /* flat on the website at every width, not a clamp */
  --pc-reading: 44rem;          /* comfortable measure for knowledge articles */
  --pc-sidebar: 280px;
  --pc-toc: 240px;

  /* Shadows — carried over from pixfort */
  --pc-shadow-sm: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 5px rgba(0, 0, 0, .06);
  --pc-shadow: 0 2px 6px rgba(0, 0, 0, .05), 0 8px 19px rgba(0, 0, 0, .07);
  --pc-shadow-lg: 0 4px 8px rgba(0, 0, 0, .04), 0 24px 35px rgba(0, 0, 0, .09);

  /* Motion, lifted from the website: one signature ease, 0.4s as the default.
     The header uses its own slightly softer curve over 0.6s. */
  --pc-ease: cubic-bezier(.165, .84, .44, 1);
  --pc-band-wash-light: linear-gradient(96deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .74) 46%, rgba(255, 255, 255, .34) 100%);
  --pc-band-wash-flat: rgba(255, 255, 255, .86);
  --pc-ease-header: cubic-bezier(.365, .84, .44, 1);
  --pc-transition: all .4s var(--pc-ease);

  --pc-radius-header: 15px;

  --pc-header-h: 68px;
}


/* 02 — RESET & BASE ====================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--pc-header-h) + 24px);
}

/* The carousel runs at overflow:visible so a card can lean out past the
   content rail, the way it does on the website — which then pushes the page
   wider and hands you a horizontal scrollbar. Set on both elements: on body
   alone it does not reliably reach the viewport. `clip` rather than `hidden`,
   because hidden turns the element into a scroll container and that breaks
   position:sticky inside it. */
html,
body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--pc-bg);
  color: var(--pc-text);
  font-family: var(--pc-font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; vertical-align: middle; }
svg { flex-shrink: 0; }

hr {
  height: 1px;
  border: 0;
  background: var(--pc-border);
  margin: 2.5rem 0;
}

::selection { background: rgba(113, 108, 255, .18); }

:focus-visible {
  outline: 2px solid var(--pc-link);
  outline-offset: 2px;
  border-radius: 4px;
}


/* 03 — TYPOGRAPHY ========================================================= */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--pc-font-heading);
  color: var(--pc-heading);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -.03em;
  margin: 0 0 .5em;
}
/* Measured on pluscloud.nl: h1 is the only heading at 600. */
h1 { font-weight: 600; }

h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); }
h4 { font-size: 1.1875rem; }
h5 { font-size: 1.0625rem; }
h6 { font-size: .9375rem; }

p { margin: 0 0 1.15em; }

a {
  color: var(--pc-link);
  text-decoration: none;
  transition: color .2s var(--pc-ease);
}
a:hover { color: var(--pc-link-hover); text-decoration: underline; text-underline-offset: 3px; }

strong, b { font-weight: 700; color: var(--pc-heading); }

small, .pc-small { font-size: .8125rem; }

.pc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--pc-font-heading);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--pc-gray-500);
  margin: 0 0 .6rem;
}

.pc-lead {
  font-size: 1.0625rem;
  color: var(--pc-gray-600);
  line-height: 1.7;
}

.pc-muted { color: var(--pc-gray-500); }
/* Zendesk's callouts put a link inside muted text; it still has to read as one. */
.pc-muted a { color: var(--pc-heading); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.pc-muted a:hover { color: var(--pc-link-hover); }


/* 04 — LAYOUT ============================================================= */

.pc-container {
  width: 100%;
  max-width: var(--pc-container);
  margin-inline: auto;
  padding-inline: var(--pc-gutter);
}

.pc-container--narrow { max-width: 1080px; }

.pc-main {
  display: block;
  min-height: 50vh;
  /* The header floats, so every page needs air beneath it. */
  padding-block: 1.5rem 5rem;
}

.pc-section { margin-block: clamp(2.5rem, 5vw, 4.5rem); }
.pc-section:last-child { margin-bottom: 0; }

.pc-page-head { margin-bottom: 2rem; }
.pc-page-head h1 { margin-bottom: .35rem; }
.pc-page-head-desc {
  font-size: 1.0625rem;
  color: var(--pc-gray-600);
  max-width: 60ch;
  margin: 0;
}

/* Two and three column work surfaces */
.pc-layout {
  display: grid;
  gap: clamp(1.75rem, 3vw, 3.25rem);
  align-items: start;
  /* minmax(0,…) rather than 1fr: a wide cell must not push the track out. */
  grid-template-columns: minmax(0, 1fr);
}
.pc-layout > * { min-width: 0; }

@media (min-width: 1024px) {
  .pc-layout--sidebar { grid-template-columns: var(--pc-sidebar) minmax(0, 1fr); }
  .pc-layout--article { grid-template-columns: var(--pc-sidebar) minmax(0, 1fr); }
}

@media (min-width: 1200px) {
  .pc-layout--article { grid-template-columns: var(--pc-sidebar) minmax(0, 1fr) var(--pc-toc); }

  /* The title runs across the reading column and the contents rail together,
     which puts the follow and AI buttons out at the edge of the page rather
     than halfway across it — and leaves the rail to start level with the
     article's first line instead of beside its title. */
  .pc-layout--article > .pc-article-header { grid-column: 2 / -1; grid-row: 1; }
  .pc-layout--article > .pc-article { grid-column: 2; grid-row: 2; }
  .pc-layout--article > .pc-toc-col { grid-column: 3; grid-row: 2; }
  .pc-layout--article > .pc-tree-col { grid-row: 1 / 3; }
  /* The gap between the two rows is the layout's, which is meant for columns;
     the header carries its own rhythm below the title. */
  .pc-layout--article { row-gap: 0; }

  /* An article without headings has no contents list, and script.js hides it.
     The layout then drops back to two columns instead of holding the width
     open for an empty rail. */
  .pc-layout--article:has(.pc-toc[hidden]) {
    grid-template-columns: var(--pc-sidebar) minmax(0, 1fr);
  }
  .pc-layout--article:has(.pc-toc[hidden]) .pc-toc-col { display: none; }

  /* With the rail gone the prose keeps its reading measure, so it is centred
     in the space rather than leaving all the air on one side. */
  .pc-layout--article:has(.pc-toc[hidden]) .pc-article { margin-inline: auto; }
}

/* Sticky columns need a full-height grid item to travel within, otherwise the
   column is only as tall as its own content and scrolls away with the page. */
.pc-tree-col, .pc-toc-col { align-self: stretch; }

.pc-sticky {
  position: sticky;
  top: calc(var(--pc-header-h) + 20px);
  max-height: calc(100vh - var(--pc-header-h) - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--pc-gray-300) transparent;
}
.pc-sticky::-webkit-scrollbar { width: 6px; }
.pc-sticky::-webkit-scrollbar-thumb { background: var(--pc-gray-300); border-radius: 3px; }
.pc-sticky::-webkit-scrollbar-track { background: transparent; }

.pc-card {
  background: var(--pc-bg);
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius-lg);
  padding: 1.5rem;
}

.pc-panel {
  background: var(--pc-surface);
  border-radius: var(--pc-radius-lg);
  padding: clamp(1.25rem, 3vw, 2rem);
}


/* 05 — BUTTONS ============================================================ */

.pc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  /* Measured on the website. The call-to-action is set in the body font at
     600, not the heading font — and the letter-spacing follows the typeface
     (-.01em for Manrope, -.03em for Google Sans) rather than the component. */
  font-family: var(--pc-font-body);
  font-size: 14px;
  font-weight: 600;
  /* An absolute value, because the website's button inherits the body's
     -0.16px rather than recomputing it at 14px. */
  letter-spacing: -.16px;
  line-height: 1.8;
  padding: 9px 18px;            /* var(--pc-btn-h) tall, as on the website */
  border-radius: var(--pc-radius);
  border: 0;                    /* a transparent border still added 2px */
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: var(--pc-transition);
}
.pc-btn:hover { text-decoration: none; transform: translateY(-1px); }
.pc-btn:active { transform: translateY(0); }

.pc-btn--primary {
  background: var(--pc-primary);
  color: var(--pc-on-primary);
}
.pc-btn--primary:hover {
  color: var(--pc-on-primary);
  box-shadow: var(--pc-shadow);
}

/* The website's second button: a translucent black fill, no border, and the
   heading font one step lighter. 39px tall. */
.pc-btn--secondary,
.pc-btn--outline {
  font-family: var(--pc-font-heading);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.5;
  padding: 9px 18px;
  background: rgba(0, 0, 0, .1);
  border-color: transparent;
  color: var(--pc-heading);
}
.pc-btn--secondary:hover,
.pc-btn--outline:hover { background: rgba(0, 0, 0, .16); color: var(--pc-heading); }

/* On a dark or photographic ground the fill flips rather than disappearing. */
body:has(.pc-cinema) .pc-btn--outline {
  background: rgba(255, 255, 255, .12);
  color: #fff;
}
body:has(.pc-cinema) .pc-btn--outline:hover { background: rgba(255, 255, 255, .2); color: #fff; }

.pc-btn--ghost { background: transparent; color: var(--pc-gray-600); padding-inline: .5rem; }
.pc-btn--ghost:hover { color: var(--pc-heading); background: var(--pc-gray-100); }

/* The hero-sized button: heading font at 16px, 49px tall. */
.pc-btn--lg {
  font-family: var(--pc-font-heading);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.8;
  padding: 10px 24px;
}
/* The small pill, 32px tall. */
.pc-btn--sm {
  font-family: var(--pc-font-heading);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.3;
  padding: 8px 12px;
}
.pc-btn--block { display: flex; width: 100%; }

/* A row of form buttons. On the website two buttons side by side always
   share a height, so the shorter role grows to the call-to-action's. */
.pc-form-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.pc-form-actions .pc-btn { min-height: var(--pc-btn-h); }

/* Zendesk sometimes emits a bare <input type=submit> — normalise it */
input[type="submit"]:not(.pc-btn),
button.button:not(.pc-btn),
.button:not(.pc-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--pc-font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.16px;
  line-height: 1.8;
  padding: 9px 18px;
  border-radius: var(--pc-radius);
  border: 0;
  background: var(--pc-primary);
  color: var(--pc-on-primary);
  cursor: pointer;
  transition: var(--pc-transition);
}
input[type="submit"]:not(.pc-btn):hover,
button.button:not(.pc-btn):hover,
.button:not(.pc-btn):hover { box-shadow: var(--pc-shadow); text-decoration: none; color: var(--pc-on-primary); }


/* 06 — FORMS ======================================================== */

input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], input[type="url"], input[type="number"],
textarea, select {
  width: 100%;
  font-family: var(--pc-font-body);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--pc-heading);
  background: var(--pc-bg);
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius);
  padding: .625rem .875rem;
  transition: border-color .2s var(--pc-ease), box-shadow .2s var(--pc-ease);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--pc-gray-500);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .06);
}
textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }

label { display: block; font-weight: 600; font-size: .875rem; color: var(--pc-heading); margin-bottom: .35rem; }

.form-field { margin-bottom: 1.25rem; }
.form-field .nesty-input { border-radius: var(--pc-radius); }


/* 07 — TOP BAR =========================================================== */

/* Scrolls away with the page, exactly as on pluscloud.nl.
   Measured there: 41px tall, 14px Manrope 600 on a flat 16px line-height —
   the strip is set tight, not on the body's 1.8. */
.pc-topbar {
  height: 41px;
  display: flex;
  align-items: center;
  font-size: 14px;
  line-height: 16px;
  position: relative;
  z-index: 6100;                /* above the header, so the account menu shows */
}

/* The website closes the strip with a hairline across the content width. */
.pc-topbar > .pc-container { height: 100%; display: flex; align-items: center; }

.pc-topbar-inner {
  height: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}

/* 13px between the label and the icons it introduces. */
.pc-topbar-group { display: flex; align-items: center; gap: 13px; }

.pc-topbar a {
  display: inline-flex;
  align-items: center;
  gap: 5px;                     /* the website's icon margin-right */
  color: var(--pc-heading);
  font-weight: 600;
  font-size: 14px;
  line-height: 16px;
  padding-block: 5px;           /* 28px tall, as on the website */
  transition: opacity .4s var(--pc-ease);
}
.pc-topbar a:hover { opacity: .6; text-decoration: none; }

/* Black, like every other label in the strip — the grey read as disabled. */
.pc-topbar-label { color: var(--pc-heading); font-weight: 600; }

/* The status label carries the same colour as its icon. */
.pc-topbar-status { color: #1F7A4D; }

/* The hairline the website draws between the two right-hand items. */
.pc-topbar-group--end { gap: 20px; }
.pc-topbar-group--end > * + * { position: relative; }
.pc-topbar-group--end > * + *::before {
  content: "";
  position: absolute;
  inset-inline-start: -20px;
  top: 50%;
  height: 16px;
  width: 1px;
  transform: translateY(-50%);
  background: var(--pc-border);
}

/* The account menu, in the slot the website uses for its Support link. It is
   a <button> here rather than a link, so it repeats the strip's type. */
.pc-topbar-account {
  max-width: 26ch;
  font-family: var(--pc-font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.16px;
  line-height: 16px;
  color: var(--pc-heading);
}
.pc-topbar-dropdown .pc-topbar-account {
  gap: 5px;
  padding: 5px 0;
  background: none;
  border: 0;
  /* .pc-dropdown-toggle is declared later and would otherwise win. */
  font-family: var(--pc-font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.16px;
  line-height: 16px;
}
.pc-topbar-dropdown .pc-topbar-account:hover { background: none; opacity: .6; }
/* The strip sits below the header, so its menu has to outrank it. */
.pc-topbar-dropdown { position: relative; z-index: 6100; }
.pc-topbar-dropdown .pc-dropdown-menu { inset-inline-end: 0; }
.pc-topbar-account > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pc-social { display: inline-flex; gap: 16px; }
.pc-social a { color: var(--pc-heading); padding-block: 0; }
.pc-social a:hover { opacity: 1; }

/* Status indicator, links to status.pluscloud.nl. The website uses the
   duotone status icon here rather than a dot, so this theme does too.
   Its colour is set with the icon defaults in section 36. */

@media (max-width: 767px) {
  /* With the social group gone, space-between would strand the account on the
     left and its menu would open off the screen. */
  .pc-topbar-group--social { display: none; }
  .pc-topbar-group--end { margin-inline-start: auto; }

  /* It used to be position:fixed here, which resolved top:100% against the
     viewport and dropped the menu off the bottom of the screen. Anchored to
     the button again, with a cap so it cannot run past the gutter. */
  .pc-topbar-dropdown .pc-dropdown-menu {
    inset-inline-start: auto;
    inset-inline-end: 0;
    min-width: 0;
    width: max-content;
    max-width: calc(100vw - var(--pc-gutter) * 2);
  }
}


/* 08 — HEADER & NAVIGATION ===============================================
   The header is a floating, frosted pill that shrinks and fixes itself on
   scroll — the same behaviour and geometry as pluscloud.nl:
     rest     75px tall, in flow, no shadow
     scrolled 65px tall, fixed, 20px from the top, soft shadow
   ======================================================================== */

.pc-header-wrap { position: relative; z-index: 200; }

/* Reserves the header's height when it detaches, so the page does not jump. */
.pc-header-spacer { display: none; }
.pc-header-wrap.is-scroll .pc-header-spacer { display: block; height: 75px; }

.pc-header {
  position: relative;
  height: 75px;
  border-radius: var(--pc-radius-header);
  margin-inline: auto;
  /* Measured on the website at four widths: the bar is min(1380, 100vw − 20)
     and centred, in both states. That is 20px wider than the content column
     below it (which sits in 20px gutters), and identical to it once the
     viewport passes 1420. */
  width: min(calc(var(--pc-container) - var(--pc-gutter) * 2), calc(100vw - var(--pc-gutter)));
  top: 0;
  transition:
    height .6s var(--pc-ease-header),
    top .6s var(--pc-ease-header),
    box-shadow .6s var(--pc-ease-header);
  z-index: 6050;
}

/* The frosted layer belongs to the floating state only. At rest the website's
   bar has no background at all — it sits straight on the page. */
.pc-header::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background .6s var(--pc-ease-header);
}

.pc-header-wrap.is-scroll .pc-header {
  position: fixed;
  top: 20px;
  inset-inline: 0;
  height: 65px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .15);
}

.pc-header-wrap.is-scroll .pc-header::before {
  background: rgba(255, 255, 255, .8);
  backdrop-filter: saturate(1.8) blur(20px);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
}

.pc-header-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  height: 100%;
  /* Nothing at rest, so the logo lands exactly on the content rail. Once the
     bar becomes a pill the website insets its contents by 15px. */
  padding-inline: 0;
  transition: padding .6s var(--pc-ease-header);
}

.pc-header-wrap.is-scroll .pc-header-inner { padding-inline: 15px; }
/* The website lets the call-to-action sit 5px proud of that inset, so it ends
   10px from the pill's edge rather than 15. */
.pc-header-wrap.is-scroll .pc-header-actions > .pc-btn--primary { margin-inline-end: -5px; }

.pc-logo { display: inline-flex; align-items: center; gap: .625rem; flex-shrink: 0; }
.pc-logo img { height: 30px; width: auto; }
.pc-logo span {
  font-family: var(--pc-font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--pc-heading);
}
.pc-logo:hover { text-decoration: none; }

/* Names the place. A light weight after a hairline reads as a suffix to the
   wordmark rather than a second brand competing with it — the same lockup
   documentation sites use. */
.pc-logo .pc-logo-suffix,
.pc-logo-suffix {
  display: inline-flex;
  align-items: center;
  font-family: var(--pc-font-body);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -.17px;
  color: var(--pc-gray-500);
  white-space: nowrap;
}
/* No rule between the two: the weight difference already separates them, and
   a divider read as though two brands were being joined. */
.pc-logo .pc-logo-suffix { margin-inline-start: 10px; }

/* The links that leave the help center. The arrow is the only thing that
   separates them from the sections above; the type stays identical. */
.pc-nav-out .pc-ico-out {
  margin-inline-start: 4px;
  color: var(--pc-gray-400, var(--pc-gray-500));
  transition: var(--pc-transition);
}
.pc-nav a:hover .pc-ico-out { color: inherit; }

/* 20px between items, measured on the website. */
.pc-nav { display: flex; align-items: center; gap: 20px; margin-inline-start: .75rem; }
/* Measured from the website: Manrope 16/600, 8px padding, no pill. */
.pc-nav a {
  position: relative;
  font-family: var(--pc-font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--pc-heading);
  padding: .5rem;
  transition: opacity .4s var(--pc-ease);
}
.pc-nav a:hover { opacity: .6; text-decoration: none; }

/* Measured on the website: a 10px pill of rgba(0,0,0,.1) sitting 12px either
   side of the label and 10px above and below it. The negative margin keeps the
   row from shifting when an item becomes current. */
.pc-nav a[aria-current="page"] {
  background: rgba(0, 0, 0, .1);
  border-radius: var(--pc-radius);
  padding: 5px 12px;            /* a 39px pill inside the 45px row */
  margin: 3px -4px;
}
.pc-nav a[aria-current="page"]:hover { opacity: 1; }

/* Heading of a details panel beside the main column. */
.pc-aside-title { font-size: .9375rem; margin-bottom: 1rem; }

/* A label with nothing in it should not leave a mark. */
.pc-badge:empty { display: none; }

/* The menu {{actions}} emits — post moderation, comment moderation — is a
   bare <button> with no class of its own, only its popup role. The theme's
   own toggles all carry a class, so this reaches Zendesk's and not ours. */
button[aria-haspopup="true"]:not([class]):not([data-follower-count]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--pc-radius);
  background: none;
  color: var(--pc-gray-500);
  cursor: pointer;
  transition: var(--pc-transition);
}
button[aria-haspopup="true"]:not([class]):not([data-follower-count]):hover {
  background: rgba(0, 0, 0, .06);
  color: var(--pc-heading);
}

/* {{actions}} emits a wrapper around a bare <button>, so the button itself is
   what needs the styling. */
.pc-profile-actions { margin-inline-start: auto; }
.pc-profile-actions button {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--pc-font-heading);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.5;
  min-height: var(--pc-btn-h);
  padding: 9px 18px;
  border: 0;
  border-radius: var(--pc-radius);
  background: rgba(0, 0, 0, .1);
  color: var(--pc-heading);
  cursor: pointer;
  transition: var(--pc-transition);
}
.pc-profile-actions button:hover { background: rgba(0, 0, 0, .16); }

/* Follow / unfollow, which Zendesk renders class-less. */
[data-follower-count] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--pc-font-heading);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.5;
  min-height: var(--pc-btn-h);
  padding: 9px 18px;
  border: 0;
  border-radius: var(--pc-radius);
  background: rgba(0, 0, 0, .1);
  color: var(--pc-heading);
  cursor: pointer;
  transition: var(--pc-transition);
}
[data-follower-count]:hover { background: rgba(0, 0, 0, .16); }
[data-follower-count][aria-pressed="true"] { background: var(--pc-primary); color: var(--pc-on-primary); }
[data-follower-count][aria-pressed="true"]:hover { opacity: .85; }

/* --- Category menu ------------------------------------------------------
   Hangs off the knowledge-base item so the nav shows the real content.
*/

.pc-nav-item { position: relative; display: inline-flex; }

.pc-nav-trigger { display: inline-flex; align-items: center; gap: .25rem; }

/* The website marks a nav item that opens a submenu with this caret. */
.pc-nav-caret {
  color: var(--pc-gray-400);
  transition: transform .4s var(--pc-ease), color .4s var(--pc-ease);
}
.pc-nav-item.is-open .pc-nav-caret { transform: rotate(180deg); color: var(--pc-heading); }

.pc-nav-menu {
  position: absolute;
  top: calc(100% + .75rem);
  inset-inline-start: -1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .25rem 1.5rem;
  min-width: 460px;
  padding: 1rem;
  background: var(--pc-bg);
  border-radius: var(--pc-radius-lg);
  box-shadow: var(--pc-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all .4s var(--pc-ease);
  z-index: 350;
}
.pc-nav-item.is-open .pc-nav-menu { opacity: 1; visibility: visible; transform: none; }

/* A hover bridge, so the menu does not close in the gap under the trigger. */
.pc-nav-menu::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -.75rem;
  height: .75rem;
}

.pc-nav-col { min-width: 0; }

.pc-nav-col-head {
  display: flex !important;
  align-items: center;
  gap: .5rem;
  padding: .375rem .5rem !important;
  border-radius: var(--pc-radius-sm);
  font-family: var(--pc-font-heading) !important;
  font-size: .9375rem !important;
  font-weight: 600 !important;
  letter-spacing: -.02em !important;
  color: var(--pc-heading) !important;
}
.pc-nav-col-head .pc-icon { width: 17px; height: 17px; color: var(--pc-gray-500); }
.pc-nav-col-head:hover { background: var(--pc-gray-100); opacity: 1 !important; }
.pc-nav-col-head:hover .pc-icon { color: var(--pc-heading); }

.pc-nav-sub {
  display: block !important;
  padding: .3125rem .5rem .3125rem 2rem !important;
  border-radius: var(--pc-radius-sm);
  font-family: var(--pc-font-body) !important;
  font-size: .8125rem !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  color: var(--pc-gray-600) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pc-nav-sub:hover { background: var(--pc-gray-100); color: var(--pc-heading) !important; opacity: 1 !important; }

@media (max-width: 1099px) {
  .pc-nav-menu { display: none; }
}

.pc-header-actions { display: flex; align-items: center; gap: .5rem; margin-inline-start: auto; }

/* The thin rule between navigation and actions, as on the website. */
.pc-header-divider {
  width: 1px;
  height: 27px;
  background: rgba(0, 0, 0, .1);
  flex-shrink: 0;
  margin-inline: .25rem;
}

/* --- Search trigger ------------------------------------------------------ */

/* The website's is a bare glyph, not a field or a pill: 18px icon inside
   18px of padding, 54x51. The ⌘K shortcut still works, it is just no longer
   advertised in the bar. */
.pc-search-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 51px;
  padding-inline: 18px;
  border: 0;
  border-radius: var(--pc-radius);
  background: none;
  color: var(--pc-gray-600);
  cursor: pointer;
  transition: var(--pc-transition);
}
.pc-search-toggle .pc-kbd-hint { display: none; }
.pc-search-toggle:hover { color: var(--pc-heading); }

.pc-kbd-hint {
  font-family: var(--pc-font-body);
  font-size: .6875rem;
  font-weight: 600;
  color: var(--pc-gray-500);
  background: var(--pc-gray-100);
  border-radius: 4px;
  padding: .125rem .3125rem;
  line-height: 1.4;
}

@media (max-width: 1099px) {
  .pc-nav, .pc-header-divider, .pc-header-actions .pc-hide-mobile { display: none; }
  .pc-floating-search { width: calc(100vw - 20px); }
}

/* Ask AI — a quiet button that picks up the signature gradient on hover. */
.pc-ask-ai {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  white-space: nowrap;
  font-family: var(--pc-font-heading);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.4;
  padding: .5rem .875rem;
  border-radius: var(--pc-radius);
  border: 1px solid var(--pc-border);
  color: var(--pc-heading);
  background: var(--pc-bg);
  position: relative;
  overflow: hidden;
  transition: var(--pc-transition);
}
.pc-ask-ai::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pc-gradient);
  opacity: 0;
  transition: opacity .4s var(--pc-ease);
}
.pc-ask-ai:hover { color: var(--pc-heading); text-decoration: none; border-color: transparent; }
.pc-ask-ai:hover::before { opacity: .14; }
.pc-ask-ai > * { position: relative; }

/* Below this width the action cluster gets crowded, so Ask AI steps aside;
   it stays available in the mobile menu. */
@media (max-width: 1200px) {
  .pc-ask-ai { display: none; }
}

/* Between 1200 and 1400 the row is tight enough that the shortcut badge is
   what has to give, rather than Ask AI or the sign-in link. */
@media (max-width: 1399px) {
  .pc-kbd-hint { display: none; }
}

/* User menu */
.pc-dropdown { position: relative; }
.pc-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--pc-radius);
  padding: .3125rem .5rem;
  cursor: pointer;
  font-family: var(--pc-font-heading);
  font-size: .875rem;
  font-weight: 500;
  color: var(--pc-heading);
  transition: var(--pc-transition);
}
.pc-dropdown-toggle:hover { background: rgba(0, 0, 0, .05); }
/* The initials sit on the wrapper; the photo covers them when there is one.
   Zendesk hands out a grey generic silhouette for accounts without a photo,
   which the script strips so the initials show through. */
.pc-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--pc-primary);
  color: var(--pc-on-primary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  overflow: hidden;
}
.pc-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.pc-dropdown-toggle .pc-nav-caret { transition: transform .4s var(--pc-ease); color: var(--pc-gray-500); }
.pc-dropdown-toggle[aria-expanded="true"] .pc-nav-caret { transform: rotate(180deg); }

.pc-dropdown-menu {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + .75rem);
  min-width: 230px;
  background: var(--pc-bg);
  border-radius: var(--pc-radius-lg);
  box-shadow: var(--pc-shadow-lg);
  padding: .375rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all .4s var(--pc-ease);
  z-index: 300;
}
.pc-dropdown-menu.is-open { opacity: 1; visibility: visible; transform: none; }

/* Several account links only render for some sign-in methods, so the rule
   above them must not be left hanging on its own. */
.pc-dropdown-separator:last-child,
.pc-dropdown-separator:first-child,
.pc-dropdown-separator + .pc-dropdown-separator { display: none; }
/* Buttons as well as links: Zendesk's own account helpers are a mix of the
   two — `contact_details` and `change_password` render a <button>, the rest
   render <a> — and a bare button in here arrived with the browser's grey face
   and 2px border, sitting in the list like a stray form control. */
.pc-dropdown-menu a,
.pc-dropdown-menu button {
  display: block;
  width: 100%;
  padding: .5rem .75rem;
  border: 0;
  border-radius: var(--pc-radius-sm);
  background: none;
  font-family: inherit;
  font-size: .875rem;
  font-weight: 500;
  line-height: inherit;
  text-align: start;
  color: var(--pc-gray-700);
  cursor: pointer;
}
.pc-dropdown-menu a:hover,
.pc-dropdown-menu button:hover { background: var(--pc-gray-100); color: var(--pc-heading); text-decoration: none; }
.pc-dropdown-separator { height: 1px; background: var(--pc-border); margin: .375rem .25rem; }
/* Zendesk's account helpers render nothing when they do not apply — sign out
   is absent under SSO — and the rule meant to sit above one then hangs off the
   bottom of the menu on its own. */
.pc-dropdown-separator:last-child { display: none; }

/* Mobile menu */
.pc-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: transparent;
  border: 0;
  border-radius: var(--pc-radius);
  cursor: pointer;
  color: var(--pc-heading);
  transition: var(--pc-transition);
}
.pc-menu-toggle:hover { background: rgba(0, 0, 0, .05); }

/* Declared after the base rule so it actually wins. */


/* The website's mobile menu takes the whole screen from the very top rather
   than hanging under the header, so the page behind it never half-shows. */
.pc-mobile-nav {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--pc-bg);
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .35s var(--pc-ease), transform .35s var(--pc-ease), visibility .35s;
  z-index: 6200;
  overscroll-behavior: contain;
}

/* Logo where the logo was, close where the burger was. Measured on the
   website: a compact 48px bar — logo 126x40 at x=20, the X 15px in from the
   right — with the first menu item starting flush at y=48. */
.pc-mobile-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex: none;
  height: 48px;
  padding-inline: var(--pc-gutter);
}
/* 40px tall, as on the website, so it sits inside the 48px bar. */
.pc-mobile-bar .pc-logo { height: 40px; }
.pc-mobile-bar .pc-logo img { max-height: 40px; }
.pc-mobile-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--pc-radius);
  background: none;
  color: var(--pc-heading);
  cursor: pointer;
}
/* -5px puts the 44px hit area's edge on the website's 15px inset without
   shrinking it below the touch minimum. */
.pc-mobile-close { margin-inline-end: -5px; }
.pc-mobile-close:hover { background: rgba(0, 0, 0, .05); }

.pc-mobile-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 var(--pc-gutter) 2rem;
}

/* The website does not lock the page while its menu is open — the panel sits
   in the header and the content stays where it was. */
body.pc-menu-open .pc-topbar { z-index: 1; }
.pc-mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; }
/* Measured on the website's own mobile menu: the same Manrope 16/600 as the
   desktop nav, black, 10px of vertical padding, and no rules between the
   items — the spacing does the separating. */
.pc-mobile-nav a:not(.pc-btn) {
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: 10px 0;
  font-family: var(--pc-font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.8;              /* 10 + 29 + 10 = the website's 49px pitch */
  letter-spacing: -.16px;
  color: var(--pc-heading);
}
.pc-mobile-nav a:not(.pc-btn):hover { opacity: .6; text-decoration: none; }
/* Left-aligned and only as wide as its label, as on the website. */
.pc-mobile-nav .pc-btn { margin-top: 1.75rem; align-self: flex-start; width: auto; }

@media (max-width: 1099px) {
  .pc-menu-toggle { display: inline-flex; }

  /* Below the website's own switch point the header stops being a floating
     pill: measured there it is a full-bleed white bar, square corners, 8px of
     padding around a 40px logo — 56px in total, at rest and when scrolled.
     The menu is a panel inside that bar rather than a screen-filling overlay,
     so the page keeps its scroll position behind it. */
  .pc-header {
    width: 100%;
    height: auto;
    padding-block: 8px;
    border-radius: 0;
  }
  /* The website's mobile bar keeps the page's own 20px rail. */
  .pc-header-inner { height: 40px; padding-inline: var(--pc-gutter); }
  .pc-header-wrap.is-scroll .pc-header {
    top: 0;
    height: auto;
    border-radius: 0;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .15);
  }
  .pc-header-wrap.is-scroll .pc-header-inner { padding-inline: var(--pc-gutter); }
  /* Solid rather than frosted, as on the website's mobile bar. */
  .pc-header-wrap.is-scroll .pc-header::before,
  body.pc-menu-open .pc-header::before {
    background: var(--pc-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  body.pc-menu-open .pc-header { box-shadow: 0 1px 5px rgba(0, 0, 0, .15); }
  .pc-header-wrap.is-scroll .pc-header-spacer { height: 56px; }

  /* In flow inside the header, so opening it grows the bar the way the
     website's does. Hidden outright when closed — a merely invisible panel
     would still hold its height open. */
  .pc-mobile-nav {
    /* Relative rather than static: the header paints its white backing in an
       absolutely positioned ::before, which would otherwise cover the panel. */
    position: relative;
    inset: auto;
    display: none;
    background: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
    z-index: auto;
  }
  .pc-mobile-nav.is-open { display: block; }

  /* The header's own logo and toggle stay in view, so the drawer's copy of
     them is redundant. */
  .pc-mobile-bar { display: none; }

  .pc-mobile-body {
    /* This help center's menu carries more than the website's six items, so
       it keeps its own scroll for the case where it outgrows the screen. */
    /* At rest the bar hangs below the 41px strip; once it detaches it starts
       at the top. Either way the panel stays on screen and scrolls itself. */
    max-height: calc(100dvh - 41px - 56px);
    overflow-y: auto;
    padding: 0 var(--pc-gutter) 8px;
  }

  /* The burger becomes the close button, as on the website. */
  .pc-header-wrap.is-scroll .pc-mobile-body { max-height: calc(100dvh - 56px); }

  /* Everything the strip carried now lives in the menu, so on a phone it is
     only a second row of the same things. The website has no strip here at
     all. */
  .pc-topbar { display: none; }

  /* The accordion under Knowledge base. The website indents its children 25px
     and drops them to 500 against the parent's 600. */
  .pc-mobile-row { display: flex; align-items: center; justify-content: space-between; }
  .pc-mobile-row > a { flex: 1; }
  .pc-mobile-expand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-inline-end: -10px;
    border: 0;
    background: none;
    color: var(--pc-heading);
    cursor: pointer;
  }
  .pc-mobile-expand[aria-expanded="true"] .pc-nav-caret { transform: rotate(180deg); }
  .pc-mobile-expand .pc-nav-caret { transition: transform .3s var(--pc-ease); }
  .pc-mobile-sub[hidden] { display: none; }
  /* Scoped under .pc-mobile-nav to outrank the general menu-item rule. */
  .pc-mobile-nav .pc-mobile-sub a {
    display: block;
    padding: 8px 0 8px 25px;
    font-family: var(--pc-font-body);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -.16px;
    color: var(--pc-heading);
  }
  .pc-mobile-nav .pc-mobile-sub a:hover { opacity: .6; text-decoration: none; }

  /* Status and language close the menu, set apart from the navigation above. */
  .pc-mobile-utils {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--pc-gray-100);
  }
  .pc-mobile-nav a.pc-mobile-util,
  .pc-mobile-util .pc-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border: 0;
    background: none;
    font-family: var(--pc-font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.14px;
    color: var(--pc-gray-600);
    cursor: pointer;
  }
  .pc-mobile-nav a.pc-mobile-util:hover { opacity: .6; text-decoration: none; }
  /* Opens upward and inside the screen rather than off the right edge. */
  .pc-mobile-utils .pc-dropdown-menu {
    inset-inline: 0 auto;
    top: auto;
    bottom: calc(100% + .5rem);
    min-width: 0;
    width: max-content;
    max-width: calc(100vw - var(--pc-gutter) * 2);
  }

  .pc-menu-toggle .pc-ico-close { display: none; }
  .pc-menu-toggle[aria-expanded="true"] .pc-ico-burger { display: none; }
  .pc-menu-toggle[aria-expanded="true"] .pc-ico-close { display: block; }
}


/* 09 — SEARCH ============================================================ */

.pc-search { position: relative; width: 100%; }

.pc-search input[type="search"] {
  width: 100%;
  height: 60px;
  font-size: 1.0625rem;
  font-weight: 500;
  padding-inline: 3.25rem 1.5rem;
  border-radius: var(--pc-radius-pill);
  border: 1px solid transparent;
  background: var(--pc-bg);
  box-shadow: var(--pc-shadow);
  /* A long placeholder — Zendesk's own is a full question — fades out on the
     narrowest phones instead of being cut mid-letter. */
  text-overflow: ellipsis;
  -webkit-appearance: none;
  appearance: none;
  transition: box-shadow .4s var(--pc-ease), transform .4s var(--pc-ease);
}
.pc-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.pc-search input[type="search"]:focus {
  box-shadow: var(--pc-shadow-lg);
  border-color: transparent;
  transform: translateY(-2px);
}
.pc-search input[type="search"]::placeholder { color: var(--pc-gray-400); font-weight: 500; }

.pc-search .pc-search-icon {
  position: absolute;
  inset-inline-start: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--pc-gray-500);
  pointer-events: none;
  z-index: 2;
  transition: color .4s var(--pc-ease);
}
.pc-search:focus-within .pc-search-icon { color: var(--pc-heading); }

/* Compact variant, used in the floating header panel and scoped bands. */
.pc-search--sm input[type="search"] {
  height: 46px;
  font-size: .9375rem;
  padding-inline: 2.75rem 1rem;
  border-radius: var(--pc-radius);
  box-shadow: none;
  background: var(--pc-gray-100);
}
.pc-search--sm input[type="search"]:focus {
  background: var(--pc-bg);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .06);
  transform: none;
}
.pc-search--sm .pc-search-icon { inset-inline-start: .9375rem; }

/* Scoped search band on category and section pages: part of the page header,
   full width of the content column, not an afterthought in the sub-nav. */
.pc-scoped-search {
  margin-top: 1.5rem;
  max-width: 520px;
}

/* Zendesk instant search dropdown */
.search-results-column,
.instant-search-results {
  position: absolute;
  z-index: 250;
  width: 100%;
  margin-top: .5rem;
  background: var(--pc-bg);
  border-radius: var(--pc-radius-lg);
  box-shadow: var(--pc-shadow-lg);
  overflow: hidden;
  list-style: none;
  padding: .375rem;
}
.search-results-column li a,
.instant-search-results li a {
  display: block;
  padding: .625rem .75rem;
  border-radius: var(--pc-radius-sm);
  color: var(--pc-gray-700);
  font-size: .9375rem;
}
.search-results-column li a:hover,
.instant-search-results li a:hover { background: var(--pc-gray-100); color: var(--pc-heading); text-decoration: none; }

/* 10 — HERO ==============================================================
   Left aligned, like every heading on pluscloud.nl. No eyebrow, no centring:
   the title and the search field share one edge so the eye has a single
   starting point.
   ======================================================================== */

/* The hero is the full width of the page, not of the column.
   Measured on pluscloud.nl/2026-go at 1920: the block is the viewport minus a
   20px inset on each side, radius 15, and the content inside it is still held
   at 1400. The band below carries the inset so the section itself needs no
   viewport units — which keeps it honest on a machine with classic
   scrollbars, where 100vw is wider than what you can see. */
.pc-heroband { padding-inline: var(--pc-hero-inset); }

.pc-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--pc-radius-hero);
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4rem);
  isolation: isolate;
}

.pc-hero-wrap {
  width: 100%;
  max-width: calc(var(--pc-container) - var(--pc-gutter) * 2);
  margin-inline: auto;
}

/* One column by default; a photo turns it into the site's text-left,
   visual-right composition. */
.pc-hero-grid { position: relative;
}
.pc-hero-inner { max-width: 46rem; }

@media (min-width: 960px) {
  .pc-hero-grid.has-visual {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 38%);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
  }
  .pc-hero-grid.has-visual .pc-hero-inner { max-width: none; }
  .pc-hero-grid.has-visual .pc-hero-sub,
  .pc-hero-grid.has-visual .pc-hero-search,
  .pc-hero-grid.has-visual .pc-popular { max-width: none; }
}

.pc-hero-visual {
  border-radius: var(--pc-radius);
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .06), 0 24px 48px rgba(76, 40, 130, .18);
  aspect-ratio: 4 / 3;
}
.pc-hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 959px) {
  .pc-hero-visual { display: none; }
}

/* A tinted base, so the blobs deepen an already-coloured field rather than
   washing over white. Matches the saturation of the hero on pluscloud.nl. */
.pc-hero--gradient { background: linear-gradient(115deg, #E7E2FB 0%, #F3E6FA 42%, #FDEDDF 78%, #FEF6E4 100%); }

/* --- Drifting mesh gradient ---------------------------------------------
   Four large blurred blobs in the brand colours, each on its own slow loop,
   so the field keeps shifting without ever repeating visibly. Sits behind
   the content and never touches text contrast.
*/

.pc-hero-mesh {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
}

.pc-blob {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(64px);
  will-change: transform;
}

.pc-blob--1 {
  width: 72%; aspect-ratio: 1;
  top: -34%; left: -18%;
  background: radial-gradient(circle, rgba(113, 108, 255, .95), rgba(113, 108, 255, .25) 55%, rgba(113, 108, 255, 0) 72%);
  animation: pc-drift-1 26s ease-in-out infinite;
}
.pc-blob--2 {
  width: 64%; aspect-ratio: 1;
  top: -26%; left: 24%;
  background: radial-gradient(circle, rgba(242, 105, 255, .8), rgba(242, 105, 255, .2) 55%, rgba(242, 105, 255, 0) 72%);
  animation: pc-drift-2 32s ease-in-out infinite;
}
.pc-blob--3 {
  width: 78%; aspect-ratio: 1;
  bottom: -46%; right: -20%;
  background: radial-gradient(circle, rgba(255, 196, 74, .9), rgba(255, 196, 74, .25) 55%, rgba(255, 196, 74, 0) 72%);
  animation: pc-drift-3 29s ease-in-out infinite;
}
.pc-blob--4 {
  width: 58%; aspect-ratio: 1;
  bottom: -34%; left: 10%;
  background: radial-gradient(circle, rgba(255, 128, 106, .7), rgba(255, 128, 106, .18) 55%, rgba(255, 128, 106, 0) 72%);
  animation: pc-drift-4 35s ease-in-out infinite;
}

@keyframes pc-drift-1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(18%, 12%, 0) scale(1.14); }
  66%      { transform: translate3d(6%, -8%, 0) scale(.94); }
}
@keyframes pc-drift-2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  40%      { transform: translate3d(-16%, 16%, 0) scale(1.1); }
  70%      { transform: translate3d(10%, 6%, 0) scale(.9); }
}
@keyframes pc-drift-3 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  35%      { transform: translate3d(-14%, -14%, 0) scale(1.16); }
  75%      { transform: translate3d(-4%, 6%, 0) scale(.95); }
}
@keyframes pc-drift-4 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  45%      { transform: translate3d(20%, -10%, 0) scale(1.12); }
  80%      { transform: translate3d(-8%, 4%, 0) scale(.92); }
}

/* A whisper of grain stops the blur from banding on large screens. */
.pc-hero--gradient::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .22;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* Full-bleed photo hero.
   No scrim: measured against this photo, black type scores 4.2-7.4 contrast
   across the frame, while white drops to 2.8 and fails. So the type stays
   dark and the photo stays exactly as shot. */
.pc-hero--image {
  background-size: cover;
  background-position: center;
  min-height: clamp(24rem, 34vw, 30rem);
  display: flex;
  align-items: center;
}
.pc-hero--image .pc-hero-grid { width: 100%; }

/* Belt and braces: a photo must never sit under the drifting blobs. */
.pc-hero--image .pc-hero-mesh { display: none; }

/* Narrow screens crop horizontally, so anchor on the quiet left of the frame
   and keep the type off the faces. */
@media (max-width: 1023px) {
  .pc-hero--image {
    background-position: left center;
    min-height: clamp(20rem, 62vw, 26rem);
  }
}

/* The field is the one thing people came to use: solid, never frosted. */
.pc-hero--image .pc-search input[type="search"] {
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .12), 0 20px 44px rgba(0, 0, 0, .2);
}
.pc-hero--image .pc-search input[type="search"]::placeholder { color: var(--pc-gray-500); }

/* Over a photograph the two-tone heading needs its quiet half lifted: 40%
   black measures fine on a flat background but not on this one. */
.pc-js .pc-hero--image [data-pc-emphasis] > span { color: rgba(0, 0, 0, .72); }

/* Chips get a touch more body so they hold up over a photograph. */
.pc-hero--image .pc-popular a {
  background: rgba(255, 255, 255, .88);
  color: var(--pc-heading);
}
.pc-hero--image .pc-popular a:hover { background: #fff; }

.pc-hero h1 {
  /* With no supporting copy the heading carries the hero on its own. */
  margin: 0 0 2rem;
  font-size: clamp(2.25rem, 1.3rem + 4vw, 4.75rem);
  line-height: 1.04;
  letter-spacing: -.038em;
}
.pc-hero-sub + .pc-hero-search { margin-top: 0; }
.pc-hero h1:has(+ .pc-hero-sub) { margin-bottom: .625rem; }

.pc-hero-sub {
  font-size: clamp(1rem, .95rem + .35vw, 1.1875rem);
  line-height: 1.6;
  color: rgba(0, 0, 0, .66);
  max-width: 40ch;
  margin: 0 0 2rem;
}

.pc-hero-search { max-width: 34rem; }

.pc-hero-search .pc-search input[type="search"] {
  height: 64px;
  font-size: 1.0625rem;
  padding-inline: 3.5rem 1.5rem;
  border-radius: var(--pc-radius);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .05), 0 18px 40px rgba(76, 40, 130, .16);
}
.pc-hero-search .pc-search input[type="search"]:focus {
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .05), 0 22px 50px rgba(76, 40, 130, .22);
}

@media (max-width: 400px) {
  .pc-search input[type="search"],
  .pc-hero-search .pc-search input[type="search"] {
    font-size: 1rem;
    padding-inline: 2.75rem 1rem;
  }
  .pc-search .pc-search-icon { inset-inline-start: 1rem; }
}

.pc-hero-search .pc-search .pc-search-icon { inset-inline-start: 1.375rem; }

.pc-search-kbd {
  position: absolute;
  inset-inline-end: 1.125rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  background: var(--pc-gray-100);
  color: var(--pc-gray-500);
}
@media (max-width: 640px) { .pc-search-kbd { display: none; } }

.pc-popular {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: 1.125rem;
  max-width: 34rem;
}

.pc-popular a {
  font-size: .8125rem;
  font-weight: 600;
  padding: .375rem .75rem;
  border-radius: var(--pc-radius-pill);
  background: rgba(255, 255, 255, .72);
  color: var(--pc-gray-700);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: var(--pc-transition);
}
.pc-popular a:hover {
  background: var(--pc-bg);
  color: var(--pc-heading);
  text-decoration: none;
  transform: translateY(-2px);
}



/* 11 — ICONS ============================================================= */
/*
   Icons are loaded as CSS masks so they inherit the theme color
   automatically. Map an icon to a category or section by adding its ID to the
   list below. The ID is in the category URL:
   /hc/nl/categories/202759347-Wildix  ->  202759347

   The available icons are defined at the bottom of this block as --ico-*.
*/

.pc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background-color: var(--pc-app-bg, currentColor);
  background-image: var(--pc-app-logo, none);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: var(--pc-app-mask, var(--pc-ico, var(--ico-book))) center / contain no-repeat;
  mask: var(--pc-app-mask, var(--pc-ico, var(--ico-book))) center / contain no-repeat;
  /* Only artwork uses these: a glyph is a mask, so it has nothing to round. */
  border-radius: var(--pc-app-radius, 0);
  box-shadow: var(--pc-app-ring, none);
}

.pc-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--pc-app-badge, var(--pc-gray-100));
  color: var(--pc-heading);
  transition: var(--pc-transition);
}
.pc-icon-badge .pc-icon { width: var(--pc-app-fill, 24px); height: var(--pc-app-fill, 24px); }

.pc-icon-badge--sm { width: 34px; height: 34px; border-radius: 10px; }
.pc-icon-badge--sm .pc-icon { width: var(--pc-app-fill, 18px); height: var(--pc-app-fill, 18px); }

/* --- App logos ----------------------------------------------------------
   The icons above are monochrome glyphs: .pc-icon paints currentColor through
   a mask, so the shape takes the text colour. An app logo is artwork in full
   colour, and putting it through that mask would flatten it to a silhouette.

   A section that shows a logo therefore sets --pc-app-* variables instead of
   the usual --pc-ico. They are read by .pc-icon and its badge, so this needs
   no extra class and no template change:

     [data-sec="123456"] {
       --pc-app-logo: url("https://204432.apps.zdusercontent.com/.../logo.png");
       --pc-app-mask: none;          /* paint the artwork, not a silhouette  */
       --pc-app-bg: transparent;
       --pc-app-badge: transparent;  /* drop the disc the glyph sits in      */
       --pc-app-fill: 100%;          /* artwork fills the badge              */
       --pc-app-radius: 10%;         /* and rounds like a Marketplace icon   */
       --pc-app-ring: inset 0 0 0 1px rgba(17, 17, 13, .11);
     }

   Everything that does not set them keeps the glyph behaviour unchanged. */

/* --- Mapping per category ID ------------------------------------------- */

[data-cat="200127867"] { --pc-ico: var(--ico-pluscloud); }   /* General         */
[data-cat="200205526"] { --pc-ico: var(--ico-zendesk); }     /* Zendesk         */
[data-cat="202764288"] { --pc-ico: var(--ico-grid); }        /* Zendesk Apps    */
[data-cat="202759347"] { --pc-ico: var(--ico-headset); }     /* Wildix          */
[data-cat="10400562010898"] { --pc-ico: var(--ico-workflow); }  /* Make            */
[data-cat="360002007553"] { --pc-ico: var(--ico-lock); }     /* Internal        */


/* --- App logos per section ID -------------------------------------------
   Ten sections under Zendesk Apps are apps we publish. The mapping below
   makes .pc-icon paint the listing's own logo instead of a
   monochrome glyph — which covers the section's own header and every place it
   appears in an overview, because they all key off the same [data-sec].

   The URL carries a content hash, so it cannot be built from the app id. Both
   the logo and the ratings in script.js come from GET /api/v2/apps.json on
   pluscloud.zendesk.com (large_icon, rating.average, rating.total_count);
   tools/refresh-marketplace.js prints both blocks again.
------------------------------------------------------------------------ */

[data-sec="7612509874962"] { --pc-app-logo: url("https://213652.apps.zdusercontent.com/213652/assets/1770956698-93bcf0d9173f8349ebeeed997273f660/logo.png"); }    /* Unique Ticket Field */
[data-sec="7612213238162"] { --pc-app-logo: url("https://207611.apps.zdusercontent.com/207611/assets/1771308444-2869a3f2f787ed7b56d320e1348b3113/logo.png"); }    /* Campaign Magic */
[data-sec="7484722185874"] { --pc-app-logo: url("https://858065.apps.zdusercontent.com/858065/assets/1770891513-7e8490c5044b36812cce8e6be2735523/logo.png"); }    /* Embed */
[data-sec="360004884639"] { --pc-app-logo: url("https://215286.apps.zdusercontent.com/215286/assets/1771399242-73759af21a82cd8d9080b91767279f57/logo.png"); }    /* Knowledge Share */
[data-sec="360004884619"] { --pc-app-logo: url("https://214411.apps.zdusercontent.com/214411/assets/1770957101-3b5ffe93153981ed0bf6fa5a488e5e7c/logo.png"); }    /* Knowledge Capture Actions */
[data-sec="360004835160"] { --pc-app-logo: url("https://215572.apps.zdusercontent.com/215572/assets/1771310477-125d27e43995f95c1bdf910b3f6431bb/logo.png"); }    /* Campfire */
[data-sec="360004878539"] { --pc-app-logo: url("https://260767.apps.zdusercontent.com/260767/assets/1771411484-fc26c20eee4a81f4cb6c0e091bbcd39b/logo.png"); }    /* Holidays */
[data-sec="360004050820"] { --pc-app-logo: url("https://254503.apps.zdusercontent.com/254503/assets/1770890853-41f18850607c8d7918c8c3294a228e40/logo.png"); }    /* Internal Note */
[data-sec="360003051980"] { --pc-app-logo: url("https://195415.apps.zdusercontent.com/195415/assets/1773204191-8f42d697ac67b3d388ba5a8a73ce77e9/logo.png"); }    /* Macro Date */
[data-sec="360004658034"] { --pc-app-logo: url("https://204432.apps.zdusercontent.com/204432/assets/1771577569-3012edac2bc91041deeac06f30d110fa/logo.png"); }    /* Google My Business */
[data-sec="360001722654"] { --pc-app-logo: url("https://225017.apps.zdusercontent.com/225017/assets/1773117320-5ea9b0b041e42fd5bd92eda2fc8332ab/logo.png"); }    /* Wildix for Zendesk */
[data-sec="18074816611218"] { --pc-app-logo: url("https://985462.apps.zdusercontent.com/985462/assets/1770696474-36fbdf633444aeeb57e5551f6b80fbe9/logo.png"); }    /* Click to Dial */
[data-sec="5222343486994"] { --pc-app-logo: url("https://858307.apps.zdusercontent.com/858307/assets/1770890174-0c913e0619eb5d8710ec782d8ab8db60/logo.png"); }    /* Toolbox */
[data-sec="5263333942418"] { --pc-app-logo: url("https://222176.apps.zdusercontent.com/222176/assets/1771484191-e6f86ee424fd8e6777fde8e9ce81c29a/logo.png"); }    /* Ticket Field Magic */

/* The same ten, given the Marketplace's own icon treatment: the artwork fills
   the badge edge to edge instead of floating in a disc, with the 6px-on-60px
   rounding and hairline border a listing page uses. */
[data-sec="7612509874962"],
[data-sec="7612213238162"],
[data-sec="7484722185874"],
[data-sec="360004884639"],
[data-sec="360004884619"],
[data-sec="360004835160"],
[data-sec="360004878539"],
[data-sec="360004050820"],
[data-sec="360003051980"],
[data-sec="360004658034"],
[data-sec="18074816611218"],
[data-sec="5222343486994"],
[data-sec="5263333942418"],
[data-sec="360001722654"] {
  --pc-app-mask: none;               /* artwork, not a silhouette */
  --pc-app-bg: transparent;
  --pc-app-badge: transparent;       /* no disc behind it */
  /* 84 rather than the Marketplace's own 60. Title plus rating line measures
     72px, so a badge at 60 — or at 72 — ended exactly level with the text at
     both ends, which reads as stretched between them rather than centred
     beside them. At 84 the artwork encloses the text with 6px to spare. */
  --pc-app-badge-size: 84px;
  --pc-app-fill: 100%;
  --pc-app-radius: 10%;
  --pc-app-ring: inset 0 0 0 1px rgba(17, 17, 13, .11);
}


/* --- Banner photographs per ID -----------------------------------------
   Upload the file under Theme settings → Navigation → Banner image 1–6, then
   point the category or section ID at that slot here. Anything unmapped keeps
   the brand gradient. Add --pc-band-pos when a photo needs a different crop.
------------------------------------------------------------------------ */

[data-cat="202759347"] {                                     /* Wildix          */
  --pc-band-img: url("");
  --pc-band-wash: var(--pc-band-wash-light);
  --pc-band-min: 200px;
}

/* --- Mapping per section ID --------------------------------------------
   Every section in the knowledge base as it stands today. Add a line when
   a new one appears; anything unmapped falls back to the book.
------------------------------------------------------------------------ */

[data-sec="360004703419"] { --pc-ico: var(--ico-phone); } /* Bellen */
[data-sec="360004729239"] { --pc-ico: var(--ico-users); } /* Collega's */
[data-sec="360004729279"] { --pc-ico: var(--ico-book); }  /* Telefoonboek */
[data-sec="360004692360"] { --pc-ico: var(--ico-chart); } /* Geschiedenis & CDRview */
[data-sec="360004692380"] { --pc-ico: var(--ico-chat); }  /* Voicemail */
[data-sec="360004729299"] { --pc-ico: var(--ico-grid); }  /* Web CRM */
[data-sec="360004729319"] { --pc-ico: var(--ico-settings); }/* Instellingen */
[data-sec="360004692560"] { --pc-ico: var(--ico-users); } /* Video Conferentie */
[data-sec="115003856008"] { --pc-ico: var(--ico-chat); }  /* Collaboration */
[data-sec="30013126286226"] { --pc-ico: var(--ico-chat); }/* Collaboration 7 */
[data-sec="360004692540"] { --pc-ico: var(--ico-settings); }/* WMS / Beheer PBX */
[data-sec="360004870479"] { --pc-ico: var(--ico-settings); }/* WMS Beheer */
[data-sec="360004862139"] { --pc-ico: var(--ico-doc); }   /* Facturatie */
[data-sec="360004692520"] { --pc-ico: var(--ico-workflow); }/* Integraties */
[data-sec="360001722654"] { --pc-ico: var(--ico-lifebuoy); }/* Wildix for Zendesk */
[data-sec="360004846039"] { --pc-ico: var(--ico-chart); } /* Rapportages met Explore */
[data-sec="360004692500"] { --pc-ico: var(--ico-phone); } /* Hardware toestellen */
[data-sec="360004713700"] { --pc-ico: var(--ico-phone); } /* Bestellen hardware */
[data-sec="360004786400"] { --pc-ico: var(--ico-phone); } /* W-Air Headset */
[data-sec="360004692480"] { --pc-ico: var(--ico-grid); }  /* Extensies */
[data-sec="360004729359"] { --pc-ico: var(--ico-sparkles); }/* Functies */
[data-sec="360004692400"] { --pc-ico: var(--ico-grid); }  /* Functietoetsen */
[data-sec="360004729339"] { --pc-ico: var(--ico-users); } /* Persoonlijk */
[data-sec="360004692420"] { --pc-ico: var(--ico-chat); }  /* Chat / Presence */
[data-sec="360004692440"] { --pc-ico: var(--ico-users); } /* Contact Center */
[data-sec="360004729399"] { --pc-ico: var(--ico-phone); } /* Web Phone */
[data-sec="360004692460"] { --pc-ico: var(--ico-doc); }   /* Agenda */
[data-sec="360004865279"] { --pc-ico: var(--ico-shield); }/* Reguleringen */
[data-sec="360004821400"] { --pc-ico: var(--ico-phone); } /* Telefoonnummers */
[data-sec="360004904779"] { --pc-ico: var(--ico-question); }/* Probleemoplossen */
[data-sec="360004692580"] { --pc-ico: var(--ico-doc); }   /* Technische Documentatie */
[data-sec="4764258485138"] { --pc-ico: var(--ico-lifebuoy); }/* Zendesk Support */
[data-sec="200493787"] { --pc-ico: var(--ico-users); }    /* Agents */
[data-sec="200367057"] { --pc-ico: var(--ico-book); }     /* Algemeen */
[data-sec="360004658034"] { --pc-ico: var(--ico-grid); }  /* Google My Business */
[data-sec="360004861800"] { --pc-ico: var(--ico-lifebuoy); }/* Support */
[data-sec="5222343486994"] { --pc-ico: var(--ico-rocket); }/* Power Tools */
[data-sec="7484722185874"] { --pc-ico: var(--ico-grid); } /* Embed */
[data-sec="115003856028"] { --pc-ico: var(--ico-chart); } /* Wallboard */
[data-sec="207100507"] { --pc-ico: var(--ico-grid); }     /* Kite */
[data-sec="360004835160"] { --pc-ico: var(--ico-chat); }  /* Campfire */
[data-sec="360004878539"] { --pc-ico: var(--ico-doc); }   /* Holidays */
[data-sec="360004884639"] { --pc-ico: var(--ico-book); }  /* Knowledge Share */
[data-sec="360004884619"] { --pc-ico: var(--ico-sparkles); }/* Knowledge Capture */
[data-sec="360003051980"] { --pc-ico: var(--ico-workflow); }/* Macro Date */
[data-sec="360004837119"] { --pc-ico: var(--ico-sparkles); }/* Wat is er nieuw */
[data-sec="360005580520"] { --pc-ico: var(--ico-shield); }/* pluscloud Care Packages */
[data-sec="360005254599"] { --pc-ico: var(--ico-rocket); }/* pluscloud Professional Services */

/* --- Icons per section ---------------------------------------------------
   Every top-level section, so no card falls back to the generic book. The
   glyph is picked for what the section is about rather than for the words in
   its title: "Tickets" is an inbox, "Automation and routing" a bolt. Sections
   that are one of our Marketplace apps carry their real artwork instead; that
   mapping is the block below, and it wins because it sets --pc-app-logo.
------------------------------------------------------------------------ */

/* Zendesk */
[data-sec="38407769894802"] { --pc-ico: var(--ico-g-flag); }          /* Getting started */
[data-sec="38407808550802"] { --pc-ico: var(--ico-g-inbox); }         /* Tickets */
[data-sec="38407792118418"] { --pc-ico: var(--ico-g-lightning-bolt); }/* Automation and routing */
[data-sec="38407778299666"] { --pc-ico: var(--ico-g-speech-bubble-conversation); }/* Channels */
[data-sec="38407786471954"] { --pc-ico: var(--ico-g-book-open); }     /* Knowledge base and Help Center */
[data-sec="38407812670866"] { --pc-ico: var(--ico-g-bot-sparkle); }   /* AI */
[data-sec="38407793712658"] { --pc-ico: var(--ico-g-bar-chart); }     /* Reporting with Explore */
[data-sec="38407823983890"] { --pc-ico: var(--ico-g-check-badge); }   /* Quality Assurance */
[data-sec="38407838214674"] { --pc-ico: var(--ico-g-user-group); }    /* Workforce Management */
[data-sec="38407798714002"] { --pc-ico: var(--ico-g-shield); }        /* Administration and security */
[data-sec="38407812047378"] { --pc-ico: var(--ico-g-user-circle); }   /* Users and access */
[data-sec="38407839439762"] { --pc-ico: var(--ico-g-plug); }          /* Integrations */
[data-sec="38407825027346"] { --pc-ico: var(--ico-g-lightbulb); }     /* How we do it */
[data-sec="38407829032850"] { --pc-ico: var(--ico-g-headset); }       /* pluscloud services */
[data-sec="360004904779"] { --pc-ico: var(--ico-g-lifesaver); }       /* Troubleshooting */
[data-sec="360005254599"] { --pc-ico: var(--ico-g-gear); }            /* pluscloud Professional Services */
[data-sec="360005580520"] { --pc-ico: var(--ico-g-box-3d); }          /* pluscloud Care Packages */
[data-sec="200493777"]   { --pc-ico: var(--ico-g-gear); }             /* Administrator */
[data-sec="200493787"]   { --pc-ico: var(--ico-g-headset); }          /* Agents */
[data-sec="4764258485138"] { --pc-ico: var(--ico-g-zendesk); }        /* Zendesk Support */
[data-sec="4764296502674"] { --pc-ico: var(--ico-g-growth-chart); }   /* Zendesk Explore */
[data-sec="4764303924754"] { --pc-ico: var(--ico-g-book-closed); }    /* Zendesk Guide */
[data-sec="4764306382866"] { --pc-ico: var(--ico-g-speech-bubble-plain); }/* Zendesk Messaging */

/* Wildix */
[data-sec="38392428384658"] { --pc-ico: var(--ico-g-flag); }          /* Getting started */
[data-sec="38392418595730"] { --pc-ico: var(--ico-g-mobile-phone); }  /* Devices and hardware */
[data-sec="360004692500"] { --pc-ico: var(--ico-g-mobile-phone); }    /* Hardware devices */
[data-sec="38392456953490"] { --pc-ico: var(--ico-g-phone-call-out); }/* Calling, numbers and trunks */
[data-sec="360004821400"] { --pc-ico: var(--ico-g-number); }          /* Phone numbers */
[data-sec="38392448234258"] { --pc-ico: var(--ico-g-microphone-on); } /* AI and transcription */
[data-sec="38392433670418"] { --pc-ico: var(--ico-g-bar-chart); }     /* Analytics and reporting */
[data-sec="38392465170194"] { --pc-ico: var(--ico-g-gear); }          /* System administration (WMS) */
[data-sec="360004692540"] { --pc-ico: var(--ico-g-database); }        /* WMS / Manage PBX */
[data-sec="38392472280722"] { --pc-ico: var(--ico-g-credit-card); }   /* Licensing and subscription plans */
[data-sec="360004692520"] { --pc-ico: var(--ico-g-plug); }            /* Integrations */
[data-sec="360004692580"] { --pc-ico: var(--ico-g-file-document); }   /* Technical Documentation */
[data-sec="360004692600"] { --pc-ico: var(--ico-g-mobile-phone); }    /* Mobile Apps */
[data-sec="360004837119"] { --pc-ico: var(--ico-g-sparkle); }         /* What's new */
[data-sec="360004865279"] { --pc-ico: var(--ico-g-clipboard-check); } /* Regulations */
[data-sec="115003856008"] { --pc-ico: var(--ico-g-user-group); }      /* Collaboration */
[data-sec="30013126286226"] { --pc-ico: var(--ico-g-user-group); }    /* Collaboration 7 */
[data-sec="25704330562194"] { --pc-ico: var(--ico-g-megaphone); }     /* x-hoppers */
[data-sec="25704331382290"] { --pc-ico: var(--ico-g-speech-bubble-conversation); }/* x-bees */

/* General */
[data-sec="200367057"]   { --pc-ico: var(--ico-g-info); }             /* General */
[data-sec="200494887"]   { --pc-ico: var(--ico-g-database); }         /* Systeminformation */
[data-sec="360004861800"] { --pc-ico: var(--ico-g-lifesaver); }       /* Support */
[data-sec="360004862139"] { --pc-ico: var(--ico-g-credit-card); }     /* Invoicing */

/* Internal */
[data-sec="29424407589138"] { --pc-ico: var(--ico-g-shield); }        /* Governance */

/* Zendesk Apps that have no Marketplace listing of their own */
[data-sec="18074714738066"] { --pc-ico: var(--ico-g-clock); }         /* Adherence */
[data-sec="7313067222930"] { --pc-ico: var(--ico-pluscloud); }        /* pluscloud App */
[data-sec="7429732495250"] { --pc-ico: var(--ico-g-email); }          /* CC'd */


/* --- Icon set ----------------------------------------------------------- */

:root {
  --ico-book: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 20'%3E%3Cg stroke='none' stroke-width='1.75' fill='none' fill-rule='evenodd'%3E%3Cpath d='M9.40548472,4.44731587 C10.1313724,3.49044092 11.3579961,3.05872262 12.5231864,3.35002019 L21.2425356,5.5298575 C21.9436835,5.70514446 22.2330635,6.54345473 21.7893522,7.11394061 L14.7893522,16.1139406 C14.5510297,16.4203552 14.1569107,16.5611628 13.7783789,16.4751329 L4.85053621,14.4460777 C4.79990911,14.4345715 4.74815385,14.4287643 4.69623569,14.4287643 C4.31171534,14.4287643 4,14.7404796 4,15.125 L4,15.656488 C4,16.1227133 4.32217898,16.5270767 4.77662384,16.6312203 L13.9993506,18.7447618 C14.3735372,18.8305129 14.7637835,18.6944896 15.0035955,18.3947245 L20.2191312,11.875305 C20.5641407,11.444043 21.1934331,11.3741216 21.624695,11.7191312 C22.055957,12.0641407 22.1258784,12.6934331 21.7808688,13.124695 L16.5653331,19.6441146 C15.845897,20.5434098 14.6751582,20.9514798 13.5525982,20.6942265 L4.32987153,18.5806849 C2.96653694,18.2682541 2,17.0551638 2,15.656488 L2,15.125 C2,14.5522731 2.17857187,14.021254 2.48307554,13.5845825 L2.555,13.487 L2.61347131,13.4006394 L9.40548472,4.44731587 Z' fill='%23000'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  --ico-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 20'%3E%3Cg stroke='none' stroke-width='1.75' fill='none' fill-rule='evenodd'%3E%3Cpath d='M6.4818028,2.61492338 L6.31069583,2.64028108 L3.89859237,3.07567882 C2.99390168,3.23893492 2.32357352,4.00387794 2.27626567,4.91696423 L2.27497315,5.07572089 C2.72475899,14.7033055 8.99989499,21.1266064 18.5631402,21.7069687 L18.9347796,21.7264848 C19.9011195,21.7692845 20.7448763,21.0953294 20.9156483,20.1494551 L21.3595539,17.6902182 C21.6293426,16.1955891 20.6364132,14.7652459 19.1417841,14.4954573 L18.9694886,14.4699618 L16.7297563,14.2107138 L16.5305485,14.1949555 C15.8009677,14.1638427 15.0855975,14.42448 14.5456466,14.9242048 L13.773,15.638 L13.5478144,15.5250899 C11.2446863,14.3298128 9.45162815,12.5678444 8.31593158,10.3079607 L8.227,10.125 L8.91453373,9.49014228 C9.55835891,8.89401968 9.8790717,8.02645403 9.77780465,7.15489336 L9.53081443,5.02915784 C9.35552555,3.52052409 7.99043655,2.4396345 6.4818028,2.61492338 Z' fill='%23000'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  --ico-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 20'%3E%3Cg stroke='none' stroke-width='1.75' fill='none' fill-rule='evenodd'%3E%3Cpath d='M19,3 C20.6568542,3 22,4.34314575 22,6 L22,15 C22,16.6568542 20.6568542,18 19,18 L9.60555128,18 C9.40812629,18 9.2151186,18.058438 9.05085108,18.1679497 L5.10940039,20.7955835 C4.19034302,21.4082884 2.94860433,21.1599407 2.33589941,20.2408833 C2.11687605,19.9123483 2,19.5263329 2,19.1314829 L2,6 C2,4.34314575 3.34314575,3 5,3 Z M16.8479983,11.2200011 C16.555288,10.7516645 15.9383376,10.6092914 15.4700011,10.9020017 C13.1276047,12.3659994 10.8723953,12.3659994 8.52999894,10.9020017 C8.06166241,10.6092914 7.44471203,10.7516645 7.1520017,11.2200011 C6.85929136,11.6883376 7.00166453,12.305288 7.47000106,12.5979983 C10.460938,14.4673339 13.539062,14.4673339 16.5299989,12.5979983 C16.9983355,12.305288 17.1407086,11.6883376 16.8479983,11.2200011 Z' fill='%23000'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  --ico-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 20'%3E%3Cg stroke='none' stroke-width='1.75' fill='none' fill-rule='evenodd'%3E%3Cpath d='M15.5,2 C17.9852814,2 20,4.01471863 20,6.5 C20,8.98528137 17.9852814,11 15.5,11 L8.5,11 C6.01471863,11 4,8.98528137 4,6.5 C4,4.01471863 6.01471863,2 8.5,2 Z M8.5,4 C7.11928813,4 6,5.11928813 6,6.5 C6,7.88071187 7.11928813,9 8.5,9 C9.88071187,9 11,7.88071187 11,6.5 C11,5.11928813 9.88071187,4 8.5,4 Z M8.5,22 C6.01471863,22 4,19.9852814 4,17.5 C4,15.0147186 6.01471863,13 8.5,13 L15.5,13 C17.9852814,13 20,15.0147186 20,17.5 C20,19.9852814 17.9852814,22 15.5,22 Z M15.5,15 C14.1192881,15 13,16.1192881 13,17.5 C13,18.8807119 14.1192881,20 15.5,20 C16.8807119,20 18,18.8807119 18,17.5 C18,16.1192881 16.8807119,15 15.5,15 Z' fill='%23000'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  --ico-lifebuoy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 20'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23000' fill-opacity='.25' d='M12,2 C17.5228475,2 22,6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 Z M12,9 C10.3431458,9 9,10.3431458 9,12 C9,13.6568542 10.3431458,15 12,15 C13.6568542,15 15,13.6568542 15,12 C15,10.3431458 13.6568542,9 12,9 Z'%3E%3C/path%3E%3Cpath fill='%23000' d='M5.67307337,4.25557784 L9.24457759,7.8270941 C10.0346158,7.30437114 10.9817631,7 12,7 C13.0191177,7 13.9670227,7.30489793 14.7574722,7.82845106 L18.3289229,4.25721107 C18.8461092,4.68045971 19.3201138,5.15450362 19.74332,5.67172611 L16.1722356,9.2435648 C16.6953687,10.0338063 17,10.9813279 17,12 C17,13.0191072 16.6951083,13.9670032 16.1715651,14.7574478 L19.7427889,18.3289229 C19.3197173,18.8458929 18.8458929,19.3197173 18.3289229,19.7427889 L14.7574722,16.1715489 C13.9670227,16.6951021 13.0191177,17 12,17 C10.9817631,17 10.0346158,16.6956289 9.24457759,16.1729059 L5.67307337,19.7444222 C5.15599228,19.3214812 4.68204704,18.8477777 4.2588448,18.3309187 L7.82977665,14.7594725 C7.30541261,13.9686221 7,13.0199775 7,12 C7,10.9804576 7.30515208,10.0321874 7.82910565,9.24153975 L4.25830553,5.66973999 C4.68164441,5.15262479 5.15577264,4.67869846 5.67307337,4.25557784 Z M12,9 C10.3431458,9 9,10.3431458 9,12 C9,13.6568542 10.3431458,15 12,15 C13.6568542,15 15,13.6568542 15,12 C15,10.3431458 13.6568542,9 12,9 Z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  /* Zendesk's own mark, the four relationshapes taken from their logo file
     and cropped to the mark's bounds. Painted through the mask like every
     other glyph, so it takes the card's text colour instead of arriving as
     a second brand colour on the page. */
  --ico-zendesk: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='80.3%200%20202.4%20153.4'%3E%20%3Cg%20fill='%23000'%3E%20%3Cpath%20d='M173.8%2040.5v112.9H80.3z'/%3E%20%3Cpath%20d='M173.8%200c0%2025.8-20.9%2046.7-46.7%2046.7S80.3%2025.8%2080.3%200h93.5z'/%3E%20%3Cpath%20d='M189.2%20153.4c0-25.8%2020.9-46.7%2046.7-46.7%2025.8%200%2046.7%2020.9%2046.7%2046.7h-93.4z'/%3E%20%3Cpath%20d='M189.2%20112.9V0h93.5z'/%3E%20%3C/g%3E%3C/svg%3E");
  /* Wildix publishes no mark I could get hold of, so this stays a glyph:
     a headset says business telephony where the plain handset said nothing
     the phone icon elsewhere did not already say. */
  --ico-headset: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%20%3Cg%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%20%3Cpath%20d='M4%2C13%20v-1%20a8%2C8%200%200%201%2016%2C0%20v1'/%3E%20%3Crect%20x='2'%20y='12'%20width='4'%20height='6'%20rx='2'/%3E%20%3Crect%20x='18'%20y='12'%20width='4'%20height='6'%20rx='2'/%3E%20%3Cpath%20d='M20%2C18%20v1%20a2%2C2%200%200%201%20-2%2C2%20h-4'/%3E%20%3C/g%3E%3C/svg%3E");
  /* The house mark, redrawn as a vector: the logo file is an export with
     raster images inside it, so nothing clean could be lifted out. */
  --ico-pluscloud: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%20%3Cg%20fill='%23000'%3E%20%3Cpath%20d='M7%2C20%20a4.6%2C4.6%200%200%201%20-0.4%2C-9.18%20A6.2%2C6.2%200%200%201%2018.3%2C11.6%20a4.2%2C4.2%200%200%201%20-0.5%2C8.4%20z'/%3E%20%3Cpath%20d='M3.4%2C3.4%20h1.7%20v1.7%20h1.7%20v1.7%20h-1.7%20v1.7%20h-1.7%20v-1.7%20h-1.7%20v-1.7%20h1.7%20z'/%3E%20%3C/g%3E%3C/svg%3E");
  --ico-rocket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 20'%3E%3Cg stroke='none' stroke-width='1.75' fill='none' fill-rule='evenodd'%3E%3Cpath d='M12.1563385,2.46312451 C12.6934542,1.61908551 14,1.99955253 14,3 L13.9993775,8.99920415 L18,9 C18.7515146,9 19.2210556,9.79015911 18.8981107,10.4404907 L18.8436615,10.5368755 L11.8436615,21.5368755 C11.3065458,22.3809145 10,22.0004475 10,21 L9.99937753,14.9992042 L6,15 C5.24848545,15 4.77894445,14.2098409 5.10188932,13.5595093 L5.15633851,13.4631245 L12.1563385,2.46312451 Z' fill='%23000'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  --ico-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 20'%3E%3Cg stroke='none' stroke-width='1.75' fill='none' fill-rule='evenodd'%3E%3Cpath d='M15.5,2 C17.9852814,2 20,4.01471863 20,6.5 C20,8.98528137 17.9852814,11 15.5,11 L8.5,11 C6.01471863,11 4,8.98528137 4,6.5 C4,4.01471863 6.01471863,2 8.5,2 Z M8.5,4 C7.11928813,4 6,5.11928813 6,6.5 C6,7.88071187 7.11928813,9 8.5,9 C9.88071187,9 11,7.88071187 11,6.5 C11,5.11928813 9.88071187,4 8.5,4 Z M8.5,22 C6.01471863,22 4,19.9852814 4,17.5 C4,15.0147186 6.01471863,13 8.5,13 L15.5,13 C17.9852814,13 20,15.0147186 20,17.5 C20,19.9852814 17.9852814,22 15.5,22 Z M15.5,15 C14.1192881,15 13,16.1192881 13,17.5 C13,18.8807119 14.1192881,20 15.5,20 C16.8807119,20 18,18.8807119 18,17.5 C18,16.1192881 16.8807119,15 15.5,15 Z' fill='%23000'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  --ico-sparkles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 20'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23000' fill-opacity='.25' d='M6.09475842,12.3251027 L5.24,14.146 L3.34896627,14.4352335 L3.23730777,14.4584991 C2.51511382,14.6507245 2.24290004,15.567277 2.78424449,16.122113 L4.182,17.554 L3.8499252,19.5890088 L3.83802332,19.6952254 C3.79131343,20.4645293 4.62186699,21.0114735 5.32067095,20.6251842 L7,19.696 L8.67932905,20.6251842 L8.77534237,20.6721422 C9.48403883,20.9750609 10.2786207,20.3770585 10.1500748,19.5890088 L9.817,17.554 L11.2157555,16.122113 L11.2909009,16.0363105 C11.7517985,15.4480179 11.4173168,14.5523111 10.6510337,14.4352335 L8.759,14.146 L7.90524158,12.3251027 C7.54532354,11.5582991 6.45467646,11.5582991 6.09475842,12.3251027 Z M16.0947584,12.3251027 L15.24,14.146 L13.3489663,14.4352335 L13.2373078,14.4584991 C12.5151138,14.6507245 12.2429,15.567277 12.7842445,16.122113 L14.182,17.554 L13.8499252,19.5890088 L13.8380233,19.6952254 C13.7913134,20.4645293 14.621867,21.0114735 15.3206709,20.6251842 L17,19.696 L18.6793291,20.6251842 L18.7753424,20.6721422 C19.4840388,20.9750609 20.2786207,20.3770585 20.1500748,19.5890088 L19.817,17.554 L21.2157555,16.122113 L21.2909009,16.0363105 C21.7517985,15.4480179 21.4173168,14.5523111 20.6510337,14.4352335 L18.759,14.146 L17.9052416,12.3251027 C17.5453235,11.5582991 16.4546765,11.5582991 16.0947584,12.3251027 Z'%3E%3C/path%3E%3Cpath fill='%23000' d='M11.0947584,3.82510273 L10.24,5.646 L8.34896627,5.93523347 L8.23730777,5.95849908 C7.51511382,6.15072452 7.24290004,7.067277 7.78424449,7.62211303 L9.182,9.054 L8.8499252,11.0890088 L8.83802332,11.1952254 C8.79131343,11.9645293 9.62186699,12.5114735 10.3206709,12.1251842 L12,11.196 L13.6793291,12.1251842 L13.7753424,12.1721422 C14.4840388,12.4750609 15.2786207,11.8770585 15.1500748,11.0890088 L14.817,9.054 L16.2157555,7.62211303 L16.2909009,7.53631051 C16.7517985,6.94801794 16.4173168,6.0523111 15.6510337,5.93523347 L13.759,5.646 L12.9052416,3.82510273 C12.5453235,3.05829909 11.4546765,3.05829909 11.0947584,3.82510273 Z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  /* A card, for the billing page. Same weight and viewBox as the rest. */
  /* --- Zendesk Garden -------------------------------------------------
     The filled 16px set from @zendeskgarden/svg-icons 8.4.0, prefixed g- so
     it is obvious at a glance which icons are Zendesk's and which are the
     website's own. Filled rather than stroked on purpose: the pixfort glyphs
     above are solid shapes, and a stroked icon beside them reads as lighter
     even at the same size. `currentColor` is written out as black because a
     mask has no colour context to inherit from. */
  --ico-g-flag: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20focusable%3D%22false%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20d%3D%22M2.5%2015.5V.5%22%2F%3E%20%3Cpath%20fill%3D%22%23000%22%20d%3D%22M13.29%209H4V1h9.29c.41%200%20.77.24.92.62s.07.8-.22%201.09L11.71%205%2014%207.29A1.002%201.002%200%200113.29%209z%22%2F%3E%20%3C%2Fsvg%3E");
  --ico-g-inbox: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20focusable%3D%22false%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20fill%3D%22%23000%22%20d%3D%22M5%2010v2h6v-2h4V1c0-.55-.45-1-1-1H2c-.55%200-1%20.45-1%201v9h4zm-.5-7h7c.28%200%20.5.22.5.5s-.22.5-.5.5h-7c-.28%200-.5-.22-.5-.5s.22-.5.5-.5zm0%202h7c.28%200%20.5.22.5.5s-.22.5-.5.5h-7c-.28%200-.5-.22-.5-.5s.22-.5.5-.5zm0%202h7c.28%200%20.5.22.5.5s-.22.5-.5.5h-7c-.28%200-.5-.22-.5-.5s.22-.5.5-.5zm7.5%204v1c0%20.55-.45%201-1%201H5c-.55%200-1-.45-1-1v-1H1v4c0%20.55.45%201%201%201h12c.55%200%201-.45%201-1v-4h-3z%22%2F%3E%20%3C%2Fsvg%3E");
  --ico-g-lightning-bolt: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20focusable%3D%22false%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20fill%3D%22%23000%22%20d%3D%22M4.41%2015.89c-.15%200-.27-.05-.37-.11-.32-.22-.4-.67-.21-1.2L6.24%208H4.5c-.3%200-.55-.13-.7-.36-.16-.23-.17-.54-.05-.84l2.57-6c.2-.45.71-.8%201.18-.8h5.17c.29%200%20.55.13.7.36.16.24.17.54.05.84L10.33%207h1.84c.37%200%20.66.17.78.47.08.21.14.63-.42%201.15l-7.29%206.87c-.34.3-.61.4-.83.4z%22%2F%3E%20%3C%2Fsvg%3E");
  --ico-g-speech-bubble-conversation: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20focusable%3D%22false%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20fill%3D%22%23000%22%20d%3D%22M9%200H3.16C2.03%200%20.93.56.38%201.54A2.97%202.97%200%20001%205.22v3.07c0%20.45.54.67.85.35L4.5%206h4.38c1.45%200%202.78-.98%203.06-2.4C12.31%201.68%2010.85%200%209%200zm4%207H7.12c-1.45%200-2.79.98-3.06%202.4A3.004%203.004%200%20007%2013h4.5l2.65%202.65a.5.5%200%2000.85-.35v-3.07c.63-.56%201-1.37%201-2.22A3.01%203.01%200%200013%207z%22%2F%3E%20%3C%2Fsvg%3E");
  --ico-g-book-open: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20focusable%3D%22false%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20fill%3D%22%23000%22%20d%3D%22M15.2%201.2C11.81.51%208.84%201.8%208%202.22%207.16%201.8%204.19.51.8%201.2c-.46.09-.8.51-.8.99v11.7c0%20.29.13.57.35.76.23.19.54.27.84.22%203.01-.54%205.64.61%206.37.97.14.07.29.1.44.1.15%200%20.3-.03.44-.1.73-.36%203.36-1.51%206.37-.97.3.05.61-.03.84-.22.23-.19.35-.46.35-.76V2.19c0-.48-.34-.9-.8-.99zM3.01%203.75c1.09.02%202.19.2%203.29.53a.75.75%200%2001-.22%201.47c-.07%200-.15-.01-.22-.03-.96-.3-1.93-.45-2.87-.47a.749.749%200%2001-.74-.76c.01-.42.36-.72.76-.74zm0%203c1.09.02%202.19.2%203.29.53a.75.75%200%2001-.22%201.47c-.07%200-.15-.01-.22-.03-.96-.3-1.93-.45-2.87-.47a.749.749%200%2011.02-1.5zm3.79%204.47a.76.76%200%2001-.94.5c-.96-.29-1.93-.45-2.87-.47a.762.762%200%2001-.74-.76c.01-.41.36-.74.76-.74%201.09.02%202.19.2%203.29.53.39.12.62.54.5.94zm6.29.03c-.95.02-1.91.17-2.87.47a.76.76%200%2001-.94-.5c-.12-.4.1-.82.5-.94%201.09-.33%202.2-.51%203.28-.53h.01c.41%200%20.74.33.75.74.02.41-.31.75-.73.76zm0-3c-.94.02-1.91.17-2.87.47a.76.76%200%2001-.94-.5c-.12-.4.1-.81.5-.94%201.1-.33%202.2-.51%203.28-.53h.01c.41%200%20.74.33.75.74.02.41-.31.75-.73.76zm0-3c-.94.02-1.91.17-2.87.47a.76.76%200%2001-.94-.5c-.12-.4.1-.81.5-.94%201.1-.33%202.2-.51%203.28-.53h.01c.41%200%20.74.33.75.74.02.41-.31.75-.73.76z%22%2F%3E%20%3C%2Fsvg%3E");
  --ico-g-bot-sparkle: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20focusable%3D%22false%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20fill%3D%22%23000%22%20d%3D%22M.279%203.53A.398.398%200%200%200%200%203.914c0%20.174.115.327.279.382l1.021.327c.46.158.83.53.984.988l.344%201.026a.4.4%200%200%200%20.382.273c.17%200%20.323-.114.377-.278a7.43%207.43%200%200%200%20.12-.379c.134-.449.303-1.013.585-1.253.237-.282.784-.444%201.23-.577a6.26%206.26%200%200%200%20.403-.127c.367-.104.367-.66%200-.764l-1.027-.323a1.575%201.575%200%200%201-.978-.982l-.333-1.043c-.104-.365-.66-.365-.765%200L2.3%202.21c-.222.767-1.004%201.007-1.7%201.22-.11.033-.218.066-.321.1ZM7%204h-.003c-.031.483-.322%201.043-.955%201.244a7.837%207.837%200%200%201-.416.131l-.013.004c-.153.046-.292.087-.424.133a2.198%202.198%200%200%200-.301.124.579.579%200%200%200-.05.029l-.034.041-.042.036a.597.597%200%200%200-.032.053c-.037.071-.08.172-.127.305a9.677%209.677%200%200%200-.133.423l-.008.026c-.039.13-.084.282-.131.413a1.403%201.403%200%200%201-1.32.947%201.401%201.401%200%200%201-1.332-.956L1.5%206.418v.037a1.5%201.5%200%200%200%200%203V15a1%201%200%200%200%201%201h11a1%201%200%200%200%201-1V9.545a1.5%201.5%200%200%200%200-3V5a1%201%200%200%200-1-1H9V2.727A.727.727%200%200%200%208.273%202h-.546A.727.727%200%200%200%207%202.727V4Zm-.453%205a1%201%200%201%201-2%200%201%201%200%200%201%202%200Zm4.976%200a1%201%200%201%201-2%200%201%201%200%200%201%202%200ZM10%2012v1H6v-1h4Z%22%2F%3E%20%3C%2Fsvg%3E");
  --ico-g-bar-chart: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20focusable%3D%22false%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20fill%3D%22%23000%22%20d%3D%22M15.037%2016.001%2012.963%2016c-.532-.001-.963-.449-.963-1.003V1.002c0-.554.431-1.003.963-1.002l2.078.001c.53%200%20.959.448.959%201v13.998c0%20.553-.431%201.002-.963%201.002ZM3.043%2016H.957C.428%2016%200%2015.554%200%2015.003V7.997C0%207.446.428%207%20.957%207h2.086c.529%200%20.957.446.957.997v7.006c0%20.551-.428.997-.957.997Zm5.999%200H6.958A.958.958%200%200%201%206%2015.042V4.958C6%204.429%206.43%204%206.958%204h2.084c.529%200%20.958.43.958.958v10.084c0%20.529-.43.958-.958.958Z%22%2F%3E%20%3C%2Fsvg%3E");
  --ico-g-check-badge: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20focusable%3D%22false%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20fill%3D%22%23000%22%20d%3D%22M6.102%201.579a1.977%201.977%200%20012.67-.116l.126.116%201.037%201.037%201.47.002c.99%200%201.81.727%201.955%201.677l.017.152.005.148-.001%201.467%201.04%201.04c.69.691.763%201.766.218%202.537l-.103.133-.115.126-1.04%201.036.001%201.472c0%20.99-.727%201.81-1.677%201.954l-.152.017-.148.005-1.471-.001-1.036%201.04a1.979%201.979%200%2001-2.537.218l-.133-.102-.126-.116-1.04-1.04-1.468.001c-.99%200-1.81-.727-1.954-1.677l-.017-.151-.005-.148-.002-1.471L.579%209.898A1.977%201.977%200%2001.36%207.36l.103-.132.115-.126%201.038-1.04.002-1.469c0-.99.727-1.81%201.677-1.954l.151-.017.148-.005%201.469-.002%201.04-1.037zm4.043%204.41l-.085.071L6.5%209.62%204.94%208.06a.628.628%200%2000-.88%200%20.63.63%200%2000-.071.795l.071.085%202%202a.625.625%200%2000.804.065l.076-.065%204-4a.61.61%200%20000-.88.63.63%200%2000-.795-.071z%22%2F%3E%20%3C%2Fsvg%3E");
  --ico-g-user-group: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20focusable%3D%22false%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cg%20fill%3D%22%23000%22%3E%20%3Ccircle%20cx%3D%2211%22%20cy%3D%226%22%20r%3D%223%22%2F%3E%20%3Ccircle%20cx%3D%224.5%22%20cy%3D%223.5%22%20r%3D%222.5%22%2F%3E%20%3Cpath%20d%3D%22M15.45%2015H6.53c-.14%200-.28-.06-.37-.17s-.14-.25-.12-.39C6.3%2011.91%208.44%2010%2010.99%2010c2.55%200%204.68%201.91%204.96%204.45.02.14-.03.28-.12.39s-.24.16-.38.16zm-8.12-5H1.67c-.16%200-.31-.08-.41-.21a.53.53%200%2001-.06-.46A3.508%203.508%200%20014.5%207c1.48%200%202.81.94%203.3%202.34.05.15.03.32-.06.46-.09.12-.25.2-.41.2z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E");
  --ico-g-shield: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20focusable%3D%22false%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20fill%3D%22%23000%22%20d%3D%22M8%2016c-.06%200-.12-.01-.18-.03C7.75%2015.94%201%2013.25%201%205V3c0-.21.13-.39.32-.47l6.5-2.5c.12-.04.24-.04.36%200l6.5%202.5c.19.08.32.26.32.47v2c0%208.25-6.75%2010.94-6.82%2010.97-.06.02-.12.03-.18.03z%22%2F%3E%20%3C%2Fsvg%3E");
  --ico-g-user-circle: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20focusable%3D%22false%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20fill%3D%22%23000%22%20d%3D%22M8%200C3.6%200%200%203.6%200%208s3.6%208%208%208%208-3.6%208-8-3.6-8-8-8zm0%203c1.4%200%202.5%201.1%202.5%202.5S9.4%208%208%208%205.5%206.9%205.5%205.5%206.6%203%208%203zm3.7%209H4.3c-.3%200-.4-.3-.3-.5C4.7%2010%206.2%209%208%209s3.3%201%204%202.5c.1.2-.1.5-.3.5z%22%2F%3E%20%3C%2Fsvg%3E");
  --ico-g-plug: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20focusable%3D%22false%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20fill%3D%22%23000%22%20d%3D%22M12.854.146a.5.5%200%2001.057.638l-.057.07L9.707%204%2012%206.293l3.146-3.147a.5.5%200%2001.765.638l-.057.07L12.707%207l1.147%201.146a.5.5%200%2001-.638.765l-.07-.057-.308-.309-.06.084-.07.078-3.058%203.057c-.87.87-2.256.91-3.172.119l-.128-.119-.704-.704-4.792%204.794a.5.5%200%2001-.765-.638l.057-.07%204.793-4.793-.703-.703a2.334%202.334%200%2001-.119-3.172l.119-.128%203.057-3.057a.959.959%200%2001.162-.131l-.309-.308a.5.5%200%2001.638-.765l.07.057L9%203.293%2012.146.146a.5.5%200%2001.708%200z%22%2F%3E%20%3C%2Fsvg%3E");
  --ico-g-lightbulb: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20focusable%3D%22false%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20fill%3D%22%23000%22%20d%3D%22M2%206.455C2%203.44%204.465%201%207.5%201S13%203.44%2013%206.455a5.45%205.45%200%2001-3%204.86V13H5v-1.686a5.45%205.45%200%2001-3-4.86zM8%208h.5c.667%200%20.667-1%200-1h-2c-.667%200-.667%201%200%201H7v2c0%20.667%201%20.667%201%200V8zm-3%206h5v.727C10%2015.43%209.43%2016%208.727%2016H6.273C5.57%2016%205%2015.43%205%2014.727V14z%22%2F%3E%20%3C%2Fsvg%3E");
  --ico-g-headset: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20focusable%3D%22false%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20fill%3D%22%23000%22%20d%3D%22M9.968%202.404A5%205%200%200%200%203%207h.33c.37%200%20.67.285.67.625v3.75c0%20.35-.3.625-.67.625H2c-1.11%200-2-.844-2-1.875v-1.25C0%207.833.902%207%202%207a6%206%200%200%201%2012%200c1.11%200%202%20.844%202%201.875v1.25C16%2011.167%2015.098%2012%2014%2012h-.1c-.393%201.452-1.452%202.209-2.405%202.59a5.52%205.52%200%200%201-.519.177%201.5%201.5%200%201%201-.164-.995%204.38%204.38%200%200%200%20.312-.111c.697-.279%201.392-.768%201.726-1.661h-.18c-.37%200-.67-.285-.67-.625v-3.75c0-.35.3-.625.67-.625H13a4.999%204.999%200%200%200-3.032-4.596Z%22%2F%3E%20%3C%2Fsvg%3E");
  --ico-g-lifesaver: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20focusable%3D%22false%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20fill%3D%22%23000%22%20d%3D%22M13.68%203.21l-2.53%202.53c-.16.16-.18.41-.07.61.27.49.42%201.05.42%201.65%200%20.6-.15%201.16-.42%201.65-.11.2-.09.45.07.61l2.53%202.53c.21.21.57.2.75-.04A7.983%207.983%200%200016%208c0-1.78-.59-3.42-1.57-4.75a.494.494%200%2000-.75-.04zM5.73%204.85c.16.16.41.18.61.07.5-.27%201.06-.42%201.66-.42.6%200%201.16.15%201.66.42.2.11.45.09.61-.07l2.53-2.53c.21-.21.2-.57-.04-.75A8.036%208.036%200%20008%200C6.22%200%204.58.59%203.25%201.57c-.24.18-.26.54-.04.75l2.52%202.53zm4.54%206.3a.512.512%200%2000-.61-.07c-.5.27-1.06.42-1.66.42-.6%200-1.16-.15-1.66-.42a.512.512%200%2000-.61.07L3.2%2013.68c-.21.21-.2.57.04.75C4.58%2015.41%206.22%2016%208%2016c1.78%200%203.42-.59%204.75-1.57.24-.18.25-.54.04-.75l-2.52-2.53zm-5.42-.88c.16-.16.18-.41.07-.61C4.65%209.16%204.5%208.6%204.5%208c0-.6.15-1.16.42-1.66.11-.2.09-.45-.07-.61L2.32%203.21c-.21-.21-.57-.2-.75.04A7.983%207.983%200%20000%208c0%201.78.59%203.42%201.57%204.75.18.24.54.25.75.04l2.53-2.52z%22%2F%3E%20%3C%2Fsvg%3E");
  --ico-g-gear: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20focusable%3D%22false%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20fill%3D%22%23000%22%20d%3D%22M14%208c0-.42-.04-.83-.13-1.22l1.42-1.04c.18-.13.26-.37.18-.58-.31-.8-.74-1.54-1.27-2.19a.51.51%200%2000-.59-.14L12%203.54c-.61-.55-1.33-.97-2.12-1.23L9.68.54A.499.499%200%20009.27.1C8.86.04%208.43%200%208%200c-.43%200-.85.03-1.26.1-.22.03-.39.22-.41.44l-.2%201.76c-.8.26-1.51.68-2.12%201.23L2.4%202.82a.52.52%200%2000-.6.13C1.27%203.6.84%204.34.53%205.14c-.08.21%200%20.45.18.58l1.42%201.04C2.05%207.16%202%207.58%202%208c0%20.42.04.83.13%201.22L.71%2010.26c-.18.13-.26.37-.18.58.31.8.74%201.54%201.27%202.19.14.17.39.23.59.14L4%2012.46c.61.55%201.33.97%202.12%201.23l.19%201.76c.02.22.19.41.41.44a7.806%207.806%200%20002.54.01c.22-.03.39-.22.41-.44l.2-1.76c.8-.26%201.51-.68%202.12-1.23l1.61.71c.2.09.45.04.59-.13.53-.65.96-1.39%201.27-2.19.08-.21%200-.45-.18-.58l-1.42-1.04c.09-.4.14-.82.14-1.24zm-6%202c-1.1%200-2-.9-2-2s.9-2%202-2%202%20.9%202%202-.9%202-2%202z%22%2F%3E%20%3C%2Fsvg%3E");
  --ico-g-box-3d: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20focusable%3D%22false%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20fill%3D%22%23000%22%20d%3D%22M14.47%203.42l-6-3.23a1%201%200%2000-.95%200l-6%203.23c-.32.17-.52.51-.52.88v7.4c0%20.37.2.71.53.88l6%203.23a1.005%201.005%200%2000.95%200l6-3.23c.32-.17.52-.51.52-.88V4.3c0-.37-.2-.71-.53-.88zm-.67%201.63L8.5%207.94v6.56c0%20.28-.22.5-.5.5s-.5-.22-.5-.5V7.94L2.2%205.05a.637.637%200%2001-.25-.85c.17-.3.55-.41.85-.25L8%206.79l5.2-2.84c.3-.17.68-.05.85.25.16.3.05.68-.25.85z%22%2F%3E%20%3C%2Fsvg%3E");
  --ico-g-zendesk: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20focusable%3D%22false%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20fill%3D%22%23000%22%20d%3D%22M14.667%200C15.403%200%2016%20.597%2016%201.333v13.334c0%20.736-.597%201.333-1.333%201.333H1.333A1.333%201.333%200%20010%2014.667V1.333C0%20.597.597%200%201.333%200h13.334zM7.615%206.348L3%2011.5h4.615V6.348zm3.077%203.02c-1.214%200-2.217.878-2.302%201.98l-.005.152H13c0-1.173-1.038-2.132-2.308-2.132zM13%204.5H8.385v5.152L13%204.5zm-5.385%200H3c0%201.173%201.038%202.132%202.308%202.132%201.214%200%202.217-.878%202.302-1.98l.005-.152z%22%2F%3E%20%3C%2Fsvg%3E");
  --ico-g-growth-chart: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20focusable%3D%22false%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20fill%3D%22%23000%22%20d%3D%22M1%200a1%201%200%200%200-1%201v14a1%201%200%200%200%201%201h14a1%201%200%200%200%201-1V1a1%201%200%200%200-1-1H1Zm11.635%205c.2%200%20.363.163.363.364v2.758a.364.364%200%200%201-.62.257l-1.025-1.025-2.5%202.5a.5.5%200%200%201-.707%200L6.5%208.207l-2.646%202.647a.5.5%200%201%201-.708-.707l3-3a.5.5%200%200%201%20.708%200L8.5%208.792l2.146-2.146L9.619%205.62A.364.364%200%200%201%209.876%205h2.759Z%22%2F%3E%20%3C%2Fsvg%3E");
  --ico-g-book-closed: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20focusable%3D%22false%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20d%3D%22M2.5%201.5s0-1%201-1H12s.5%200%20.5.5v1.5%22%2F%3E%20%3Cpath%20fill%3D%22%23000%22%20d%3D%22M13%202H3.5c-.4%200-.5-.3-.5-.5H2v13c0%201.1.9%201.5%201.5%201.5H13c.6%200%201-.4%201-1V3c0-.6-.4-1-1-1zm-2.5%208h-5c-.3%200-.5-.2-.5-.5s.2-.5.5-.5h5c.3%200%20.5.2.5.5s-.2.5-.5.5zm0-3h-5c-.3%200-.5-.2-.5-.5s.2-.5.5-.5h5c.3%200%20.5.2.5.5s-.2.5-.5.5z%22%2F%3E%20%3C%2Fsvg%3E");
  --ico-g-speech-bubble-plain: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20focusable%3D%22false%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20fill%3D%22%23000%22%20d%3D%22M15%200H1C.45%200%200%20.45%200%201v9.96c0%20.55.45%201%201%201h2v3.34c0%20.45.54.67.85.35l3.69-3.69H15c.55%200%201-.45%201-1V1c0-.55-.45-1-1-1z%22%2F%3E%20%3C%2Fsvg%3E");
  --ico-g-mobile-phone: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20focusable%3D%22false%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Crect%20width%3D%229%22%20height%3D%2215%22%20x%3D%223.5%22%20y%3D%22.5%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20rx%3D%22.5%22%20ry%3D%22.5%22%2F%3E%20%3Cpath%20fill%3D%22%23000%22%20d%3D%22M3.5.5h9V2h-9zm0%2012.5v2.5h9V13zm6%202h-3a.5.5%200%20010-1h3a.5.5%200%20010%201zM5%203h6v9H5z%22%2F%3E%20%3C%2Fsvg%3E");
  --ico-g-phone-call-out: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20focusable%3D%22false%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20fill%3D%22%23000%22%20d%3D%22M10.293%2010.293a1%201%200%20011.414%200l2%202a1%201%200%20010%201.414l-1.232%201.232a3.5%203.5%200%2001-4.95%200L1.061%208.475a3.5%203.5%200%20010-4.95l1.232-1.232a1%201%200%20011.414%200l2%202a1%201%200%20010%201.414L4.414%207%209%2011.586l1.293-1.293zM13.5%209a.47.47%200%2001-.35-.15l-6-6a.474.474%200%2001-.11-.54c.08-.19.26-.31.46-.31H13c.55%200%201%20.45%201%201v5.5c0%20.2-.12.38-.31.46-.06.03-.13.04-.19.04z%22%2F%3E%20%3C%2Fsvg%3E");
  --ico-g-number: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20focusable%3D%22false%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M2.5%205.5h12m-13%205h12m-1.5-9l-3%2013m-2-13l-3%2013%22%2F%3E%20%3C%2Fsvg%3E");
  --ico-g-microphone-on: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20focusable%3D%22false%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cg%20fill%3D%22%23000%22%3E%20%3Crect%20width%3D%226%22%20height%3D%2212%22%20x%3D%225%22%20rx%3D%223%22%20ry%3D%223%22%2F%3E%20%3Cpath%20d%3D%22M7%2013h2v3H7z%22%2F%3E%20%3C%2Fg%3E%20%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20d%3D%22M3.5%206.5V9a4.5%204.5%200%20009%200V6.5%22%2F%3E%20%3C%2Fsvg%3E");
  --ico-g-database: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20focusable%3D%22false%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20fill%3D%22%23000%22%20d%3D%22M2%203v10.5C2%2015.14%205.02%2016%208%2016s6-.86%206-2.5V3C14-.28%202-.28%202%203zm10.94%209.48c-1.08.64-2.93%201.02-4.94%201.02-2.08%200-3.96-.4-5.03-1.08a.513.513%200%2001-.16-.69c.15-.23.46-.3.69-.16.91.58%202.63.93%204.5.93%201.81%200%203.51-.34%204.43-.88.23-.14.54-.06.68.18.15.23.07.54-.17.68zm0-4C11.85%209.12%2010.01%209.5%208%209.5c-2.08%200-3.96-.4-5.03-1.08a.513.513%200%2001-.16-.69.5.5%200%2001.69-.15c.91.57%202.63.92%204.5.92%201.81%200%203.51-.34%204.43-.88.24-.14.54-.06.68.18.15.23.07.54-.17.68zm0-4C11.85%205.12%2010.01%205.5%208%205.5c-2.08%200-3.96-.4-5.03-1.08a.513.513%200%2001-.16-.69.5.5%200%2001.69-.15c.91.57%202.63.92%204.5.92%201.81%200%203.51-.34%204.43-.88.24-.14.54-.06.68.18.15.23.07.54-.17.68z%22%2F%3E%20%3C%2Fsvg%3E");
  --ico-g-credit-card: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20focusable%3D%22false%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20fill%3D%22%23000%22%20d%3D%22M15%202H1c-.6%200-1%20.4-1%201v10c0%20.6.4%201%201%201h14c.6%200%201-.4%201-1V3c0-.6-.4-1-1-1zM1%207V5h14v2H1z%22%2F%3E%20%3C%2Fsvg%3E");
  --ico-g-file-document: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20focusable%3D%22false%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20fill%3D%22%23000%22%20d%3D%22M10%203.5v-3c0-.28-.22-.5-.5-.5H2c-.55%200-1%20.45-1%201v14c0%20.55.45%201%201%201h12c.55%200%201-.45%201-1V5.5c0-.28-.22-.5-.5-.5h-3c-.83%200-1.5-.67-1.5-1.5zM4.5%207h7c.28%200%20.5.25.5.53s-.22.47-.5.47h-7c-.28%200-.5-.19-.5-.47S4.22%207%204.5%207zm7%205h-7c-.27%200-.5-.22-.5-.5s.23-.5.5-.5h7c.28%200%20.5.22.5.5s-.22.5-.5.5zm0-2h-7c-.27%200-.5-.22-.5-.5s.23-.5.5-.5h7c.28%200%20.5.22.5.5s-.22.5-.5.5zM11%20.5V3c0%20.55.45%201%201%201h2.5c.45%200%20.67-.54.35-.85l-3-3C11.54-.17%2011%20.06%2011%20.5z%22%2F%3E%20%3C%2Fsvg%3E");
  --ico-g-sparkle: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20focusable%3D%22false%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20fill%3D%22%23000%22%20d%3D%22M2.499%2011a.5.5%200%200%201%20.477.348l.256.797a1.01%201.01%200%200%200%20.63.633l.789.248a.5.5%200%200%201%20.001.954l-.79.252a1.007%201.007%200%200%200-.63.633l-.252.787a.5.5%200%200%201-.95.008l-.266-.79a1.034%201.034%200%200%200-.636-.639l-.781-.252a.5.5%200%200%201-.002-.95l.794-.26a1.023%201.023%200%200%200%20.636-.634l.248-.786A.5.5%200%200%201%202.5%2011ZM1%207.513a1%201%200%200%201%20.69-.953l2.583-.844a3.95%203.95%200%200%200%202.465-2.457l.808-2.56A1%201%200%200%201%209.452.695l.832%202.598a3.906%203.906%200%200%200%202.448%202.453l2.569.811a1%201%200%200%201%20.004%201.906l-2.572.823a3.896%203.896%200%200%200-2.449%202.454l-.82%202.565a1%201%200%200%201-1.9.014l-.866-2.567v-.002A3.971%203.971%200%200%200%204.24%209.284l-2.547-.821A1%201%200%200%201%201%207.513Z%22%2F%3E%20%3C%2Fsvg%3E");
  --ico-g-clipboard-check: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20focusable%3D%22false%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20fill%3D%22%23000%22%20d%3D%22M14%202h-.5c-.28%200-.5.22-.5.5V5c0%20.55-.45%201-1%201H4c-.55%200-1-.45-1-1V2.5c0-.28-.22-.5-.5-.5H2c-.55%200-1%20.45-1%201v12c0%20.55.45%201%201%201h12c.55%200%201-.45%201-1V3c0-.55-.45-1-1-1Zm-2.06%207.19-4.5%204.5a.62.62%200%200%201-.44.18.62.62%200%200%201-.44-.18l-2-2a.628.628%200%200%201%200-.88c.24-.24.64-.24.88%200L7%2012.37l4.06-4.06c.24-.24.64-.24.88%200%20.25.24.25.64%200%20.88ZM8%200C5.79%200%204%201.79%204%204v1h8V4c0-2.21-1.79-4-4-4Z%22%2F%3E%20%3C%2Fsvg%3E");
  --ico-g-megaphone: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20focusable%3D%22false%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20fill%3D%22%23000%22%20d%3D%22M5%204.002h5.586L14.293.295C14.923-.335%2016%20.11%2016%201.002v14c0%20.89-1.077%201.337-1.707.707l-3.707-3.707H8v2a2%202%200%2011-4%200v-2a4%204%200%20010-8h1z%22%2F%3E%20%3C%2Fsvg%3E");
  --ico-g-info: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20focusable%3D%22false%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20fill%3D%22%23000%22%20d%3D%22M7.5%2016C3.36%2016%200%2012.64%200%208.5%200%204.36%203.36%201%207.5%201S15%204.36%2015%208.5c0%204.14-3.36%207.5-7.5%207.5zM7%2012.5c0%20.28.22.5.5.5s.5-.22.5-.5V8c0-.28-.22-.5-.5-.5S7%207.72%207%208v4.5zM7.5%204c-.55%200-1%20.45-1%201s.45%201%201%201%201-.45%201-1-.45-1-1-1z%22%2F%3E%20%3C%2Fsvg%3E");
  --ico-g-clock: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20focusable%3D%22false%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20fill%3D%22%23000%22%20d%3D%22M8%200C3.59%200%200%203.59%200%208s3.59%208%208%208%208-3.59%208-8-3.59-8-8-8zm3%209H7.5c-.28%200-.5-.22-.5-.5V3c0-.28.22-.5.5-.5s.5.22.5.5v5h3c.28%200%20.5.22.5.5s-.22.5-.5.5z%22%2F%3E%20%3C%2Fsvg%3E");
  --ico-g-email: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20focusable%3D%22false%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20fill%3D%22%23000%22%20d%3D%22M15%202H1c-.55%200-1%20.45-1%201v10c0%20.55.45%201%201%201h14c.55%200%201-.45%201-1V3c0-.55-.45-1-1-1zM4.94%209.94l-3%203c-.12.12-.28.18-.44.18s-.32-.06-.44-.18a.628.628%200%20010-.88l3-3c.24-.24.64-.24.88%200%20.25.24.25.64%200%20.88zm10%203c-.12.12-.28.18-.44.18s-.32-.06-.44-.18l-3-3a.628.628%200%20010-.88c.24-.24.64-.24.88%200l3%203c.25.24.25.64%200%20.88zm0-9L8.8%2010.09c-.22.22-.51.33-.8.33s-.58-.11-.8-.33L1.06%203.94c-.24-.24-.24-.64%200-.88s.64-.24.88%200L8%209.12l6.06-6.06c.24-.24.64-.24.88%200%20.25.24.25.64%200%20.88z%22%2F%3E%20%3C%2Fsvg%3E");

  --ico-card: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 20'%3E%3Cg stroke='none' fill='none' fill-rule='evenodd'%3E%3Cpath d='M19,4 C20.6568542,4 22,5.34314575 22,7 L22,17 C22,18.6568542 20.6568542,20 19,20 L5,20 C3.34314575,20 2,18.6568542 2,17 L2,7 C2,5.34314575 3.34314575,4 5,4 L19,4 Z M20,11 L4,11 L4,17 C4,17.5522847 4.44771525,18 5,18 L19,18 C19.5522847,18 20,17.5522847 20,17 L20,11 Z M9,14 C9.55228475,14 10,14.4477153 10,15 C10,15.5522847 9.55228475,16 9,16 L6,16 C5.44771525,16 5,15.5522847 5,15 C5,14.4477153 5.44771525,14 6,14 L9,14 Z M19,6 L5,6 C4.44771525,6 4,6.44771525 4,7 L4,9 L20,9 L20,7 C20,6.44771525 19.5522847,6 19,6 Z' fill='%23000'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  --ico-chart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 20'%3E%3Cg stroke='none' stroke-width='1.75' fill='none' fill-rule='evenodd'%3E%3Cpath d='M21,18 C21.5522847,18 22,18.4477153 22,19 C22,19.5522847 21.5522847,20 21,20 L3,20 C2.44771525,20 2,19.5522847 2,19 C2,18.4477153 2.44771525,18 3,18 L21,18 Z M18.0715233,4.62860932 C18.2888018,4.08541318 18.9239378,3.8439349 19.4472136,4.10557281 L21.4472136,5.10557281 C21.9411921,5.35256206 22.1414164,5.9532351 21.8944272,6.4472136 C21.6474379,6.94119209 21.0467649,7.14141644 20.5527864,6.89442719 L19.524,6.38 L15.9284767,15.3713907 C15.6628179,16.0355376 14.8180349,16.2039284 14.3165287,15.730435 L14.2317787,15.6401844 L10.041,10.612 L7.8,13.6 C7.45921237,14.0543835 6.81655146,14.1287336 6.3825205,13.7867701 L6.29289322,13.7071068 L5.155,12.57 L3.83205029,14.5547002 C3.54758015,14.9814054 2.99191943,15.1189526 2.54606632,14.8911422 L2.4452998,14.8320503 C1.98577112,14.5256978 1.86159725,13.9048285 2.16794971,13.4452998 L4.16794971,10.4452998 C4.51799128,9.92023744 5.26088958,9.84667601 5.70710678,10.2928932 L6.892,11.477 L9.2,8.4 C9.56145343,7.91806209 10.2543381,7.86879575 10.6810702,8.26751358 L10.7682213,8.3598156 L14.694,13.07 L18.0715233,4.62860932 Z' fill='%23000'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  --ico-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 20'%3E%3Cg stroke='none' stroke-width='1.75' fill='none' fill-rule='evenodd'%3E%3Cpath d='M16.5,15 C19.17181,15 21.0363637,16.3067743 21.946115,18.8571744 C22.141373,19.4045614 21.7818711,20 21.2561229,20 L17.6032053,20.0015595 C17.9761728,19.770881 18.1735886,19.2441257 18,18.75 C17.4169527,17.0903366 16.5020682,15.8695392 15.2831546,15.0996923 C15.6675078,15.0333038 16.0734672,15 16.5,15 Z M9.4,14 C12.995278,14 15.5042846,15.5681291 16.7284767,18.6286093 C16.9912224,19.2854737 16.5074646,20 15.8,20 L3,20 C2.2925354,20 1.80877755,19.2854737 2.07152331,18.6286093 C3.29571539,15.5681291 5.80472199,14 9.4,14 Z M17,8.5 C18.6568542,8.5 20,9.84314575 20,11.5 C20,13.1568542 18.6568542,14.5 17,14.5 C15.3431458,14.5 14,13.1568542 14,11.5 C14,9.84314575 15.3431458,8.5 17,8.5 Z M9.5,4 C11.9852814,4 14,6.01471863 14,8.5 C14,10.9852814 11.9852814,13 9.5,13 C7.01471863,13 5,10.9852814 5,8.5 C5,6.01471863 7.01471863,4 9.5,4 Z' fill='%23000'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  --ico-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 20'%3E%3Cg stroke='none' stroke-width='1.75' fill='none' fill-rule='evenodd'%3E%3Cpath d='M12,2 C14.7614237,2 17,4.23857625 17,7 L17,9 C18.6568542,9 20,10.3431458 20,12 L20,19 C20,20.6568542 18.6568542,22 17,22 L7,22 C5.34314575,22 4,20.6568542 4,19 L4,12 C4,10.3431458 5.34314575,9 7,9 L7,7 C7,4.23857625 9.23857625,2 12,2 Z M12,4 C10.3431458,4 9,5.34314575 9,7 L9,9 L15,9 L15,7 C15,5.34314575 13.6568542,4 12,4 Z' fill='%23000'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  --ico-workflow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 20'%3E%3Cg stroke='none' stroke-width='1.75' fill='none' fill-rule='evenodd'%3E%3Cpath d='M12,2 C17.5228475,2 22,6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 Z M14.8284271,6.34314575 C14.4379028,5.95262146 13.8047379,5.95262146 13.4142136,6.34314575 L11.7633593,7.99225253 L11.057191,7.28595479 C10.6666667,6.8954305 10.0335017,6.8954305 9.6429774,7.28595479 L8.93587061,7.99306157 C7.22546866,9.70346353 7.01329609,12.3447459 8.29935291,14.2860962 L7.05025253,15.5355339 C6.65972824,15.9260582 6.65972824,16.5592232 7.05025253,16.9497475 C7.44077682,17.3402718 8.0739418,17.3402718 8.46446609,16.9497475 L9.71381133,15.7005858 C11.6551703,16.9867106 14.2965093,16.7745585 16.0069384,15.0641294 L16.7140452,14.3570226 L16.7972338,14.2628153 C17.1022587,13.8705241 17.0745292,13.303293 16.7140452,12.942809 L16.0063593,12.2352525 L17.6568542,10.5857864 C18.0473785,10.1952621 18.0473785,9.56209717 17.6568542,9.17157288 C17.26633,8.78104858 16.633165,8.78104858 16.2426407,9.17157288 L14.5923593,10.8212525 L13.1783593,9.40725253 L14.8284271,7.75735931 C15.2189514,7.36683502 15.2189514,6.73367004 14.8284271,6.34314575 Z' fill='%23000'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  --ico-folder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 20'%3E%3Cg stroke='none' stroke-width='1.75' fill='none' fill-rule='evenodd'%3E%3Cpath d='M12.158,1.99985574 L12.0670681,5.33047268 C12.0326126,6.59132237 12.5275881,7.74270758 13.430233,8.57199956 C14.2577125,9.33223446 15.4415577,9.82944684 16.9023594,9.83397324 L20,9.48185574 L20,19 C20,20.5976809 18.75108,21.9036609 17.1762728,21.9949073 L17,22 L7,22 C5.34314575,22 4,20.6568542 4,19 L4,5 C4,3.34314575 5.34314575,2 7,2 L12.158,1.99985574 Z M15,16 L9,16 C8.44771525,16 8,16.4477153 8,17 C8,17.5522847 8.44771525,18 9,18 L15,18 C15.5522847,18 16,17.5522847 16,17 C16,16.4477153 15.5522847,16 15,16 Z M15,12 L9,12 C8.44771525,12 8,12.4477153 8,13 C8,13.5522847 8.44771525,14 9,14 L15,14 C15.5522847,14 16,13.5522847 16,13 C16,12.4477153 15.5522847,12 15,12 Z M10,8 L9,8 C8.44771525,8 8,8.44771525 8,9 C8,9.55228475 8.44771525,10 9,10 L10,10 C10.5522847,10 11,9.55228475 11,9 C11,8.44771525 10.5522847,8 10,8 Z M13.1575342,2.04139734 C13.2658873,2.07358346 13.36867,2.12410422 13.4611918,2.19143358 C15.7543017,3.86016124 18.3103085,6.19070456 19.7808487,8.02875833 C19.8863255,8.16059563 19.9561047,8.31620564 19.984961,8.48069238 L16.8497931,8.83352199 C16.6926645,8.85119054 16.5344957,8.85788948 16.3764358,8.85357014 C14.4971601,8.80221482 13.0153378,7.23712913 13.0666932,5.35785341 L13.1575342,2.04139734 Z' fill='%23000'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  --ico-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 20'%3E%3Cg stroke='none' stroke-width='1.75' fill='none' fill-rule='evenodd'%3E%3Cpath d='M17,2 C18.6568542,2 20,3.34314575 20,5 L20,19 C20,20.6568542 18.6568542,22 17,22 L7,22 C5.34314575,22 4,20.6568542 4,19 L4,5 C4,3.34314575 5.34314575,2 7,2 Z M11,14 L9,14 C8.44771525,14 8,14.4477153 8,15 C8,15.5522847 8.44771525,16 9,16 L11,16 C11.5522847,16 12,15.5522847 12,15 C12,14.4477153 11.5522847,14 11,14 Z M15,10 L9,10 C8.44771525,10 8,10.4477153 8,11 C8,11.5522847 8.44771525,12 9,12 L15,12 C15.5522847,12 16,11.5522847 16,11 C16,10.4477153 15.5522847,10 15,10 Z M15,6 L9,6 C8.44771525,6 8,6.44771525 8,7 C8,7.55228475 8.44771525,8 9,8 L15,8 C15.5522847,8 16,7.55228475 16,7 C16,6.44771525 15.5522847,6 15,6 Z' fill='%23000'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  --ico-question: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 20'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' d='M12,21 C16.9705627,21 21,16.9705627 21,12 C21,7.02943725 16.9705627,3 12,3 C7.02943725,3 3,7.02943725 3,12 C3,16.9705627 7.02943725,21 12,21 Z M9.23442906,8.34588052 C9.65172439,7.21754298 10.5,6.5 12,6.5 C13.5,6.5 15,7.46516767 15,9.14061234 C15,10.816057 13.4422563,11.0517653 12.4150842,12.5 C12,13.1452509 12,13.8888093 12,14.5 M12,17.5 L12,17.45'%3E%3C/path%3E%3C/svg%3E");
  --ico-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h11M9.5 4l4 4-4 4'/%3E%3C/svg%3E");
  --ico-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 20'%3E%3Cg stroke='none' stroke-width='1.75' fill='none' fill-rule='evenodd'%3E%3Cpath d='M17,2 C18.6568542,2 20,3.34314575 20,5 L20,19 C20,20.6568542 18.6568542,22 17,22 L7,22 C5.34314575,22 4,20.6568542 4,19 L4,5 C4,3.34314575 5.34314575,2 7,2 Z M11,14 L9,14 C8.44771525,14 8,14.4477153 8,15 C8,15.5522847 8.44771525,16 9,16 L11,16 C11.5522847,16 12,15.5522847 12,15 C12,14.4477153 11.5522847,14 11,14 Z M15,10 L9,10 C8.44771525,10 8,10.4477153 8,11 C8,11.5522847 8.44771525,12 9,12 L15,12 C15.5522847,12 16,11.5522847 16,11 C16,10.4477153 15.5522847,10 15,10 Z M15,6 L9,6 C8.44771525,6 8,6.44771525 8,7 C8,7.55228475 8.44771525,8 9,8 L15,8 C15.5522847,8 16,7.55228475 16,7 C16,6.44771525 15.5522847,6 15,6 Z' fill='%23000'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  --ico-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
  --ico-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 20'%3E%3Cg stroke='none' stroke-width='1.75' fill='none' fill-rule='evenodd'%3E%3Cpath d='M13.5634821,2.93337268 C14.8163776,2.3055572 16.3584496,2.75084422 17.0761964,3.97770856 C17.199703,4.1888218 17.2937385,4.41584355 17.3556857,4.65245552 L17.4094124,4.83270851 C17.7069918,5.72074428 18.4334076,6.40498463 19.3475445,6.64431428 L19.5102246,6.69235757 C20.8439973,7.13196931 21.6226069,8.53954487 21.2620296,9.9167962 C21.2000823,10.1534082 21.1060468,10.3804299 20.9825402,10.5915432 L20.8875322,10.7681792 C20.4758308,11.6042112 20.5075002,12.5964578 20.9825402,13.4084568 L21.0666273,13.5634821 C21.6944428,14.8163776 21.2491558,16.3584496 20.0222914,17.0761964 C19.8111782,17.199703 19.5841564,17.2937385 19.3475445,17.3556857 L19.1672915,17.4094124 C18.2792557,17.7069918 17.5950154,18.4334076 17.3556857,19.3475445 L17.3076424,19.5102246 C16.8680307,20.8439973 15.4604551,21.6226069 14.0832038,21.2620296 C13.8465918,21.2000823 13.6195701,21.1060468 13.4084568,20.9825402 L13.2318208,20.8875322 C12.3957888,20.4758308 11.4035422,20.5075002 10.5915432,20.9825402 L10.4365179,21.0666273 C9.18362237,21.6944428 7.64155044,21.2491558 6.92380362,20.0222914 C6.80029701,19.8111782 6.70626152,19.5841564 6.64431428,19.3475445 L6.59058765,19.1672915 C6.2930082,18.2792557 5.5665924,17.5950154 4.65245552,17.3556857 L4.48977539,17.3076424 C3.15600267,16.8680307 2.37739306,15.4604551 2.73797044,14.0832038 C2.79991768,13.8465918 2.89395317,13.6195701 3.01745978,13.4084568 L3.11246779,13.2318208 C3.52416917,12.3957888 3.49249984,11.4035422 3.01745978,10.5915432 L2.93337268,10.4365179 C2.3055572,9.18362237 2.75084422,7.64155044 3.97770856,6.92380362 C4.1888218,6.80029701 4.41584355,6.70626152 4.65245552,6.64431428 L4.83270851,6.59058765 C5.72074428,6.2930082 6.40498463,5.5665924 6.64431428,4.65245552 L6.69235757,4.48977539 C7.13196931,3.15600267 8.53954487,2.37739306 9.9167962,2.73797044 C10.1534082,2.79991768 10.3804299,2.89395317 10.5915432,3.01745978 L10.7681792,3.11246779 C11.6042112,3.52416917 12.5964578,3.49249984 13.4084568,3.01745978 Z M15.7071068,9.29289322 C15.3165825,8.90236893 14.6834175,8.90236893 14.2928932,9.29289322 L11,12.585 L9.70710678,11.2928932 C9.31658249,10.9023689 8.68341751,10.9023689 8.29289322,11.2928932 C7.90236893,11.6834175 7.90236893,12.3165825 8.29289322,12.7071068 L10.2928932,14.7071068 C10.6834175,15.0976311 11.3165825,15.0976311 11.7071068,14.7071068 L15.7071068,10.7071068 C16.0976311,10.3165825 16.0976311,9.68341751 15.7071068,9.29289322 Z' fill='%23000'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  --ico-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 20'%3E%3Cg stroke='none' stroke-width='1.75' fill='none' fill-rule='evenodd'%3E%3Cpath d='M10.9909908,2.29849837 C11.6434814,2.06546602 12.3565186,2.06546602 13.0090092,2.29849837 L18.0090092,4.08421266 C19.2029881,4.51063369 20,5.64159751 20,6.90943839 L20,14.9561463 C20,16.2479507 19.3761373,17.4602341 18.3249528,18.2110802 L13.7437146,21.4833932 C12.700622,22.2284593 11.299378,22.2284593 10.2562854,21.4833932 L5.67504723,18.2110802 C4.62386274,17.4602341 4,16.2479507 4,14.9561463 L4,6.90943839 C4,5.64159751 4.79701191,4.51063369 5.99099081,4.08421266 Z M11.9013987,7.08332095 L8.22639871,12.583321 L8.17470814,12.6728611 C7.93626514,13.1579974 8.28587983,13.75 8.85,13.75 L10.725,13.75 L10.725,16.5 C10.725,17.2416497 11.6865614,17.5333373 12.0986013,16.916679 L15.7736013,11.416679 L15.8252919,11.3271389 C16.0637349,10.8420026 15.7141202,10.25 15.15,10.25 L13.275,10.25 L13.275,7.5 C13.275,6.75835031 12.3134386,6.46666268 11.9013987,7.08332095 Z' fill='%23000'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  --ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 20'%3E%3Cg stroke='none' stroke-width='1.75' fill='none' fill-rule='evenodd'%3E%3Cpath d='M12,2 C17.5228475,2 22,6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 Z M16.7071068,8.29289322 C16.3165825,7.90236893 15.6834175,7.90236893 15.2928932,8.29289322 L10.5,13.085 L8.70710678,11.2928932 C8.31658249,10.9023689 7.68341751,10.9023689 7.29289322,11.2928932 C6.90236893,11.6834175 6.90236893,12.3165825 7.29289322,12.7071068 L9.79289322,15.2071068 C10.1834175,15.5976311 10.8165825,15.5976311 11.2071068,15.2071068 L16.7071068,9.70710678 C17.0976311,9.31658249 17.0976311,8.68341751 16.7071068,8.29289322 Z' fill='%23000'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  --ico-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 20'%3E%3Cg stroke='none' stroke-width='1.75' fill='none' fill-rule='evenodd'%3E%3Cpath d='M13.0090092,2.29849837 L18.0090092,4.08421266 C19.2029881,4.51063369 20,5.64159751 20,6.90943839 L20,14.9561463 C20,16.2479507 19.3761373,17.4602341 18.3249528,18.2110802 L13.7437146,21.4833932 C12.700622,22.2284593 11.299378,22.2284593 10.2562854,21.4833932 L5.67504723,18.2110802 C4.62386274,17.4602341 4,16.2479507 4,14.9561463 L4,6.90943839 C4,5.64159751 4.79701191,4.51063369 5.99099081,4.08421266 L10.9909908,2.29849837 C11.6434814,2.06546602 12.3565186,2.06546602 13.0090092,2.29849837 Z M12,4.1212516 C11.8854147,4.12105075 11.7731685,4.14287329 11.6636636,4.1819822 L6.6636636,5.96769648 C6.26567064,6.10983683 6,6.48682477 6,6.90943839 L6,14.9561463 C6,15.6020485 6.31193137,16.2081902 6.83752361,16.5836133 L11.4187618,19.8559263 C11.5908266,19.9788297 11.7983986,20.0531305 12,20.0543916 L12,4.1212516 Z' fill='%23000'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}


/* 12 — CATEGORY CARDS ====================================================
   The website's card language, measured rather than guessed: 10px radius,
   flat — no border, no resting shadow — and filled with a tint instead.
   Slides there are 323x450, so these are tall and have real presence.
   The signature gradient sits dormant inside each card and blooms on hover.
   ======================================================================== */

.pc-cards {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
}

.pc-card-link {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: .875rem;
  height: 100%;
  padding: 1.75rem;
  border: 0;
  border-radius: var(--pc-radius);
  background: var(--pc-gray-100);
  color: inherit;
  transition: background .4s var(--pc-ease), transform .4s var(--pc-ease);
}

/* The gradient bloom. Sits behind the content and only wakes on hover. */
.pc-card-link::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block-start: -55%;
  inset-inline-end: -45%;
  width: 85%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--pc-gradient);
  filter: blur(46px);
  opacity: 0;
  transform: scale(.8);
  transition: opacity .5s var(--pc-ease), transform .5s var(--pc-ease);
}

.pc-card-link:hover {
  text-decoration: none;
  background: var(--pc-bg);
  transform: translateY(-4px);
  box-shadow: var(--pc-shadow);
}
.pc-card-link:hover::before { opacity: .55; transform: scale(1.15) translate(-6%, 8%); }

/* Icon: a circle, as on the website, filling in on hover. */
.pc-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--pc-app-badge, rgba(0, 0, 0, .06));
  color: var(--pc-heading);
  flex-shrink: 0;
  transition: var(--pc-transition);
}
.pc-icon-badge .pc-icon { width: var(--pc-app-fill, 22px); height: var(--pc-app-fill, 22px); }

.pc-icon-badge--sm { width: 36px; height: 36px; }
.pc-icon-badge--sm .pc-icon { width: var(--pc-app-fill, 18px); height: var(--pc-app-fill, 18px); }

.pc-card-link:hover .pc-icon-badge {
  background: var(--pc-app-badge, var(--pc-heading));
  color: var(--pc-bg);
  transform: scale(1.05);
}

.pc-card-link > span:not([class]) { display: block; }

.pc-card-title {
  display: block;
  font-family: var(--pc-font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.25;
  color: var(--pc-heading);
  margin: 0;
}

.pc-card-desc {
  display: block;
  margin-top: .375rem;
  font-size: .9375rem;
  color: var(--pc-gray-600);
  line-height: 1.55;
}

/* Pinned to the bottom with an arrow that leans in on hover. */
.pc-card-meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: auto;
  padding-top: 1rem;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--pc-gray-500);
  transition: color .4s var(--pc-ease);
}
.pc-card-meta::after {
  content: "";
  width: 15px;
  height: 15px;
  margin-inline-start: auto;
  background-color: currentColor;
  -webkit-mask: var(--ico-arrow-right) center / contain no-repeat;
  mask: var(--ico-arrow-right) center / contain no-repeat;
  transition: transform .4s var(--pc-ease);
}
.pc-card-meta-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pc-card-link:hover .pc-card-meta { color: var(--pc-heading); }
.pc-card-link:hover .pc-card-meta::after { transform: translateX(4px); }

/* Tall variant for the home page row, echoing the site's 323x450 slides. */
/* A floor, not a fixed height: the slides already stretch to the tallest
   card, so this only stops a row of description-less categories collapsing
   into a thin strip. 300px left a chasm between the title and the meta. */
.pc-card-link--tall { min-height: 200px; }

/* Compact list of subsections inside a card */
.pc-card-sublist { list-style: none; margin: .25rem 0 0; padding: 0; }
.pc-card-sublist li { margin-bottom: .25rem; }
.pc-card-sublist a { font-size: .875rem; color: var(--pc-gray-600); }
.pc-card-sublist a:hover { color: var(--pc-heading); }

@media (prefers-reduced-motion: reduce) {
  .pc-card-link:hover { transform: none; }
  .pc-card-link:hover::before { transform: scale(1.05); }
}


/* --- Carousel ------------------------------------------------------------
   Drag-scrollable row of cards. Uses native overflow with scroll-snap, so
   trackpad and touch momentum come for free; the pointer drag is the only
   part that needs JS. Arrow buttons match the website's: 48px circles with a
   hairline border and a soft shadow.
*/

.pc-carousel { position: static; }

/* The arrows centre on the cards, so they belong to the track's own box —
   the dots underneath must not drag their midpoint down. */
.pc-carousel-stage { position: relative; }

/* Matches the website: four cards and a 30px gap on a desktop, three at
   tablet width, one on a phone — all measured, not guessed. These live on
   .pc-carousel alone, because that is what the breakpoints below change; a
   second copy on the stage would shadow them at every width. */
.pc-carousel { --pc-slides: 4; --pc-slide-gap: 30px; }

/* Moved by transform, not by scrolling — see the note in initCarousels. The
   website runs the whole carousel at overflow:visible, so nothing clips: a
   card enters from the screen edge and the one folding away leans out past
   the rail. */
.pc-carousel-track {
  display: flex;
  gap: var(--pc-slide-gap);
  list-style: none;
  margin: 0;
  padding: .25rem 0;
  overflow: visible;
  cursor: grab;
  will-change: transform;
  transition-property: transform;
  transition-duration: 0ms;
  /* The website's wrapper transitions on plain `ease` over its 600ms. */
  transition-timing-function: ease;
  touch-action: pan-y;
}

/* The fold turns the card in three dimensions, so the card needs its own 3D
   context; the perspective itself is set per slide from its width, as on the
   website. */
.pc-carousel-track > * > * { transform-style: preserve-3d; will-change: transform, opacity; }
.pc-carousel-track.is-dragging { cursor: grabbing; }
.pc-carousel-track.is-dragging a { pointer-events: none; }

.pc-carousel-track > li {
  flex: 0 0 calc((100% - (var(--pc-slides) - 1) * var(--pc-slide-gap)) / var(--pc-slides));
  min-width: 0;
}
.pc-carousel-track > li > .pc-card-link { height: 100%; }

@media (max-width: 1023px) { .pc-carousel { --pc-slides: 3; --pc-slide-gap: 20px; } }
@media (max-width: 767px)  { .pc-carousel { --pc-slides: 1; --pc-slide-gap: 20px; } }



/* --- navigation ---------------------------------------------------------
   The website hangs the arrows 25px outside the track, centred on the cards.
   A direction with nothing left to reach fades out instead of greying out.
------------------------------------------------------------------------ */

.pc-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .1);
  background: var(--pc-bg);
  color: var(--pc-heading);
  box-shadow: 0 1px 5px rgba(0, 0, 0, .15);
  cursor: pointer;
  transition: opacity .3s var(--pc-ease), box-shadow .3s var(--pc-ease);
}
/* 25px outside, as on the website — but only where there is room beside the
   content. Below that the arrow would hang past the viewport edge and the page
   would scroll sideways, so it stops flush with the gutter. */
.pc-carousel-btn--prev { inset-inline-start: calc(-1 * var(--pc-gutter)); }
.pc-carousel-btn--next { inset-inline-end: calc(-1 * var(--pc-gutter)); }
@media (min-width: 1440px) {
  .pc-carousel-btn--prev { inset-inline-start: -25px; }
  .pc-carousel-btn--next { inset-inline-end: -25px; }
}
/* On a phone one card fills the track, so an arrow sitting in the gutter
   lands on top of the card. Swiping and the dots do the job there. */
@media (max-width: 767px) {
  .pc-carousel-btn { display: none; }
}

.pc-carousel-btn--prev .pc-ico { transform: rotate(180deg); }

.pc-carousel-btn:hover:not(:disabled) { opacity: .8; }
.pc-carousel-btn:disabled { opacity: 0; pointer-events: none; }

/* Nothing to scroll at all: no arrows, no dots. */
.pc-carousel.is-static .pc-carousel-btn,
.pc-carousel.is-static .pc-carousel-dots { display: none; }

/* --- dots ---------------------------------------------------------------- */

.pc-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}
.pc-carousel-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--pc-heading);
  opacity: .4;
  cursor: pointer;
  transition: opacity .3s var(--pc-ease);
}
.pc-carousel-dots button:hover { opacity: .5; }
.pc-carousel-dots button[aria-selected="true"] { opacity: .6; }

@media (prefers-reduced-motion: reduce) {
  .pc-carousel-track { scroll-behavior: auto; }
}


/* --- Page band ----------------------------------------------------------
   The filled header that opens a category, a section or a community topic.
   One implementation, so those pages read as the same product.
------------------------------------------------------------------------ */

.pc-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  flex-wrap: wrap;
  padding: 1.75rem;
  margin-bottom: 1.75rem;
  min-height: var(--pc-band-min, auto);
  border-radius: var(--pc-radius);
  background: var(--pc-gradient-soft);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* The photograph, if this page's ID is mapped to one below. It sits on its own
   layer so the brand gradient still shows when no file is set or the file
   fails to load. */
.pc-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--pc-band-img, none);
  background-size: cover;
  background-position: var(--pc-band-pos, center);
}

/* A wash rather than a scrim: the type stays black, the picture keeps its
   colour. Only painted when a photograph is actually mapped. */
.pc-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pc-band-wash, none);
}

.pc-band-body { display: flex; align-items: center; gap: 1rem; min-width: 0; flex: 1 1 20rem; }

.pc-band-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pc-app-badge-size, 54px);
  height: var(--pc-app-badge-size, 54px);
  border-radius: 50%;
  background: var(--pc-app-badge, rgba(255, 255, 255, .7));
  color: var(--pc-heading);
  flex-shrink: 0;
}
.pc-band-icon .pc-icon { width: var(--pc-app-fill, 26px); height: var(--pc-app-fill, 26px); }

.pc-band h1 { margin: 0; font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem); }
.pc-band-desc {
  margin: .25rem 0 0;
  font-size: .9375rem;
  color: var(--pc-gray-700);
  max-width: 52ch;
}

.pc-band-aside { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }
.pc-band-search { width: min(320px, 100%); }
.pc-band-search input[type="search"] { background: #fff; border-color: transparent; box-shadow: var(--pc-shadow-sm); }



@media (max-width: 640px) {
  .pc-band { padding: 1.25rem; }
  .pc-band--washed::after, .pc-band::after { background: var(--pc-band-wash-flat, var(--pc-band-wash, none)); }
  .pc-band-icon { width: 44px; height: 44px; }
  .pc-band-icon .pc-icon { width: var(--pc-app-fill, 22px); height: var(--pc-app-fill, 22px); }
  .pc-band-aside, .pc-band-search { width: 100%; }
}


/* --- Section map ---------------------------------------------------------
   The category page shows every section as one panel, side by side, so a deep
   area like Wildix stays scannable instead of becoming a long scroll.
*/

.pc-panels {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  /* Stretch, not start: with cards left at their natural height a row of three
     ended at three different places and the "open section" links stepped down
     the page. */
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pc-panel-item {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border-radius: var(--pc-radius);
  background: var(--pc-gray-100);
  transition: background .4s var(--pc-ease);
}
.pc-panel-item:hover { background: var(--pc-gray-200); }

/* The link sits at the foot of the card whatever the card above it holds, so
   a row of cards reads as a row rather than as three separate columns. */
.pc-panel-item .pc-see-all { margin-top: auto; padding-top: .5rem; }

.pc-panel-head {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .5rem;
}
.pc-panel-head h2 {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.02em;
  margin: 0;
}
.pc-panel-head h2 a { color: var(--pc-heading); }
.pc-panel-head h2 a:hover { text-decoration: none; opacity: .7; }

.pc-panel-desc {
  font-size: .875rem;
  line-height: 1.5;
  color: var(--pc-gray-600);
  margin: 0 0 .75rem;
}

/* Subsections read as a quiet index line, not as a second list of links. */
.pc-panel-subs {
  display: flex;
  flex-wrap: wrap;
  gap: .3125rem;
  list-style: none;
  margin: 0 0 .875rem;
  padding: 0;
}
.pc-panel-subs a {
  display: inline-block;
  font-size: .75rem;
  font-weight: 600;
  padding: .1875rem .5rem;
  border-radius: var(--pc-radius-pill);
  background: var(--pc-bg);
  color: var(--pc-gray-600);
}
.pc-panel-subs a:hover { color: var(--pc-heading); text-decoration: none; }

/* Inside a panel the article rows are tighter than on a section page. */
.pc-article-list--tight li { border-bottom: 0; }
.pc-article-list--tight a {
  padding: .3125rem .5rem;
  margin-inline: -.5rem;
  font-size: .875rem;
}
.pc-article-list--tight a:hover { background: var(--pc-bg); }

/* A dark closing panel, the way inner pages on the website use a black card. */
.pc-panel-item--dark {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  background: var(--pc-gray-900);
  color: rgba(255, 255, 255, .75);
}
.pc-panel-item--dark .pc-panel-head { margin-bottom: 0; }
.pc-panel-item--dark .pc-panel-desc { margin: 0; }
.pc-panel-item--dark > div:first-child { flex: 1 1 auto; }
.pc-panel-item--dark:hover { background: #000; }
.pc-panel-item--dark h2 { color: #fff; }
.pc-panel-item--dark .pc-panel-desc { color: rgba(255, 255, 255, .7); }
.pc-panel-item--dark .pc-icon-badge { background: rgba(255, 255, 255, .12); color: #fff; }

/* The band that closes an article. Same treatment as the one on a category
   page, with a field that opens a new conversation instead of only a link. */
.pc-article-cta { margin-top: 2rem; }
.pc-article-cta:target,
.pc-article-cta.is-called { background: #000; }

/* The messenger's own composer: one pill, the field inside it, and a round
   send button on the end. Same shape as the box the conversation opens with,
   so this reads as the first line of that conversation rather than as a form
   that happens to sit here. */
.pc-article-ask {
  display: flex;
  align-items: center;
  gap: .5rem;
  /* Its own line, across the whole panel. Sharing the row with the heading left
     it floating at half width in a wide dark box, which read as an afterthought
     rather than as the thing the panel is asking you to do. */
  flex: 1 1 100%;
  min-width: 16rem;
  padding: 5px 5px 5px 1rem;
  border-radius: var(--pc-radius-pill);
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .08);
  transition: var(--pc-transition);
}
.pc-article-ask:focus-within {
  border-color: rgba(255, 255, 255, .6);
  background: rgba(255, 255, 255, .14);
}
.pc-article-ask input {
  flex: 1 1 auto;
  min-width: 0;
  height: 36px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font-family: var(--pc-font-body);
  font-size: 15px;
}
.pc-article-ask input:focus { outline: none; }
.pc-article-ask input::placeholder { color: rgba(255, 255, 255, .55); }
.pc-article-ask button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--pc-gray-900);
  cursor: pointer;
  transition: var(--pc-transition);
}
.pc-article-ask button:hover { background: rgba(255, 255, 255, .85); }

.pc-panel-item--dark .pc-btn { margin: 0; flex-shrink: 0; }

/* --- Take this article to an assistant --------------------------------
   The button reads as an action rather than as navigation, so it carries a
   border of its own instead of the bare dropdown toggle the topbar uses. */
.pc-aimenu-toggle {
  /* It stands next to the follow button, so it has to be a button's height:
     the dropdown toggle's own padding left it at 32 against that one's 43. */
  min-height: var(--pc-btn-h);
  padding: 0 14px;
  gap: .375rem;
  border-color: var(--pc-border);
  letter-spacing: -.16px;
}
/* Open or hovered, it fills rather than darkening its outline — a border that
   changes colour under the cursor reads as a second, heavier button. */
.pc-aimenu-toggle:hover,
.pc-aimenu-toggle[aria-expanded="true"] { background: var(--pc-gray-100); }
.pc-aimenu-toggle .pc-ico-chev { transition: transform .3s var(--pc-ease); opacity: .6; }
.pc-aimenu-toggle[aria-expanded="true"] .pc-ico-chev { transform: rotate(180deg); }

.pc-aimenu-menu { min-width: 268px; }

.pc-aimenu-item {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  width: 100%;
  padding: .5rem .625rem;
  border: 0;
  border-radius: var(--pc-radius);
  background: none;
  text-align: start;
  cursor: pointer;
  color: var(--pc-heading);
  font-family: inherit;
  transition: var(--pc-transition);
}
.pc-aimenu-item:hover { background: var(--pc-gray-100); }

.pc-aimenu-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--pc-border);
  color: var(--pc-gray-700);
}
.pc-aimenu-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pc-aimenu-label {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--pc-font-heading);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: -.01em;
}
.pc-aimenu-sub { font-size: .75rem; color: var(--pc-gray-500); }

/* Confirmation in place: a copy that says nothing looks like a copy that
   failed. Reverted by script.js after a moment. */
.pc-aimenu-item.is-done .pc-aimenu-label { color: var(--pc-ok, #1f7a4d); }

@media (max-width: 599px) {
  .pc-aimenu-toggle span:not(.pc-aimenu-label) { display: none; }
  .pc-aimenu-menu { inset-inline-end: auto; inset-inline-start: 0; }
}

.pc-btn--invert { background: #fff; color: var(--pc-gray-900); }
.pc-btn--invert:hover { background: #fff; color: #000; box-shadow: var(--pc-shadow); }

.pc-panel-item .pc-see-all {
  margin-top: 1rem;
  padding-top: .875rem;
  font-size: .8125rem;
}


/* 13 — SIDEBAR NAVIGATION TREE ============================================== */

.pc-tree-nav {
  font-size: .875rem;
}

.pc-tree-heading {
  font-family: var(--pc-font-heading);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--pc-gray-500);
  margin: 0 0 .75rem;
  padding-inline-start: .5rem;
}

.pc-tree, .pc-tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pc-tree ul {
  margin-inline-start: .6875rem;
  padding-inline-start: .6875rem;
  border-inline-start: 1px solid var(--pc-border);
}

.pc-tree li { margin: 1px 0; }

.pc-tree-row {
  display: flex;
  align-items: center;
  gap: .125rem;
  border-radius: var(--pc-radius-sm);
  transition: background .18s var(--pc-ease);
}
.pc-tree-row:hover { background: var(--pc-gray-100); }

.pc-tree a {
  flex: 1;
  min-width: 0;
  display: block;
  padding: .375rem .5rem;
  color: var(--pc-gray-600);
  font-weight: 500;
  line-height: 1.45;
  border-radius: var(--pc-radius-sm);
}
.pc-tree a:hover { color: var(--pc-heading); text-decoration: none; }

.pc-tree a.is-current {
  color: var(--pc-heading);
  font-weight: 700;
  background: var(--pc-gray-100);
}

.pc-tree-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-inline-end: -2px;
  border: 0;
  background: transparent;
  border-radius: 4px;
  color: var(--pc-gray-400);
  cursor: pointer;
  flex-shrink: 0;
}
.pc-tree-toggle:hover { color: var(--pc-heading); background: var(--pc-gray-200); }
.pc-tree-toggle svg { transition: transform .2s var(--pc-ease); }
.pc-tree-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }

.pc-tree-children { display: none; }
.pc-tree-children.is-open { display: block; }

.pc-tree-cat > .pc-tree-row > a {
  font-family: var(--pc-font-heading);
  font-weight: 600;
  color: var(--pc-heading);
  letter-spacing: -.01em;
}

/* Mobile variant: collapsible above the content */
.pc-tree-mobile-toggle { display: none; }

@media (max-width: 1023px) {
  .pc-tree-wrap {
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius-lg);
    overflow: hidden;
  }
  .pc-tree-mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: .875rem 1rem;
    background: var(--pc-gray-50);
    border: 0;
    cursor: pointer;
    font-family: var(--pc-font-heading);
    font-size: .9375rem;
    font-weight: 600;
    color: var(--pc-heading);
  }
  .pc-tree-mobile-toggle svg { transition: transform .2s var(--pc-ease); }
  .pc-tree-mobile-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .pc-tree-nav { display: none; padding: 1rem; }
  .pc-tree-nav.is-open { display: block; }
  .pc-tree-heading { display: none; }
  .pc-sticky { position: static; max-height: none; overflow: visible; }
}


/* 14 — BREADCRUMBS & SUB NAVIGATION ========================================== */

.pc-subnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--pc-border);
  margin-bottom: 2rem;
}

.pc-subnav .pc-search { max-width: 320px; }

.breadcrumbs { margin: 0; padding: 0; }
.breadcrumbs ol, ol.breadcrumbs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem;
  margin: 0;
  padding: 0;
  font-size: .8125rem;
}
.breadcrumbs li {
  display: inline-flex;
  align-items: center;
  color: var(--pc-gray-500);
  max-width: 26ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.breadcrumbs li + li::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-inline: .25rem;
  background-color: var(--pc-gray-300);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 3l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 3l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
  flex-shrink: 0;
}
.breadcrumbs a { color: var(--pc-gray-500); font-weight: 500; }
.breadcrumbs a:hover { color: var(--pc-heading); }
.breadcrumbs li:last-child { color: var(--pc-gray-700); font-weight: 600; }


/* 15 — CATEGORY & SECTION PAGES ========================================== */

.pc-section-group { margin-bottom: 2.75rem; }

.pc-section-group-head {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .875rem;
}
.pc-section-group-head h2 {
  font-size: 1.25rem;
  margin: 0;
}
.pc-section-group-head h2 a { color: var(--pc-heading); }
.pc-section-group-head h2 a:hover { color: var(--pc-link); text-decoration: none; }

.pc-article-list { list-style: none; margin: 0; padding: 0; }

.pc-article-list li {
  border-bottom: 1px solid var(--pc-gray-100);
}
.pc-article-list li:last-child { border-bottom: 0; }

.pc-article-list a {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .8125rem .75rem;
  margin-inline: -.75rem;
  border-radius: var(--pc-radius);
  color: var(--pc-gray-700);
  font-size: .9375rem;
  font-weight: 500;
  transition: var(--pc-transition);
}
.pc-article-list a:hover {
  background: var(--pc-gray-50);
  color: var(--pc-heading);
  text-decoration: none;
}
.pc-article-list a::before {
  content: "";
  width: 16px; height: 16px;
  flex-shrink: 0;
  background-color: var(--pc-gray-300);
  -webkit-mask: var(--ico-doc) center / contain no-repeat;
  mask: var(--ico-doc) center / contain no-repeat;
}
.pc-article-list a:hover::before { background-color: var(--pc-heading); }

.pc-article-list .pc-flag {
  margin-inline-start: auto;
  flex-shrink: 0;
  display: inline-flex;
  color: var(--pc-gray-400);
}

.pc-see-all {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  margin-top: .75rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--pc-link);
}

.pc-empty {
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--pc-gray-500);
  background: var(--pc-surface);
  border-radius: var(--pc-radius-lg);
}
.pc-empty h3 { color: var(--pc-gray-700); font-size: 1.0625rem; }


/* 16 — ARTICLE PAGE ====================================================== */

.pc-article { max-width: var(--pc-reading); }

.pc-article-header { margin-bottom: 1.75rem; }

.pc-article-header h1 {
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  line-height: 1.15;
  margin-bottom: .75rem;
}

.pc-article-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .375rem 1rem;
  font-size: .8125rem;
  color: var(--pc-gray-500);
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--pc-border);
}
.pc-article-meta-author { display: inline-flex; align-items: center; gap: .5rem; }
.pc-article-meta img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.pc-article-meta .pc-dot { color: var(--pc-gray-300); }

.pc-article-actions { margin-inline-start: auto; display: flex; align-items: center; gap: .5rem; }

.pc-article-footer {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--pc-border);
}

.pc-related { margin-top: 3rem; }
.pc-related h2 { font-size: 1.125rem; margin-bottom: .75rem; }


/* 17 — ARTICLE CONTENT (WYSIWYG) ============================================
   Covers the markup the Zendesk editor generates: images, tables, code
   blocks, notes/callouts, accordions and content blocks.
   ========================================================================== */

.pc-article-body {
  font-size: var(--pc-article-size);
  line-height: 1.8;
  color: var(--pc-gray-700);
  overflow-wrap: break-word;
  min-width: 0;
}

.pc-article-body > *:first-child { margin-top: 0; }

.pc-article-body h1,
.pc-article-body h2,
.pc-article-body h3,
.pc-article-body h4,
.pc-article-body h5,
.pc-article-body h6 {
  margin: 2.25em 0 .65em;
  scroll-margin-top: calc(var(--pc-header-h) + 24px);
}
.pc-article-body h2 { font-size: 1.5em; }
.pc-article-body h3 { font-size: 1.235em; }
.pc-article-body h4 { font-size: 1.06em; }

/* Anchor link revealed on heading hover */
.pc-heading-anchor {
  opacity: 0;
  margin-inline-start: .4rem;
  font-weight: 400;
  color: var(--pc-gray-300);
  text-decoration: none;
  transition: opacity .2s;
}
.pc-article-body h2:hover .pc-heading-anchor,
.pc-article-body h3:hover .pc-heading-anchor,
.pc-article-body h4:hover .pc-heading-anchor { opacity: 1; }

.pc-article-body p { margin: 0 0 1.2em; }

.pc-article-body a { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.pc-article-body a:visited { color: var(--pc-link-visited); }
.pc-article-body a:hover { text-decoration-thickness: 2px; }

.pc-article-body ul,
.pc-article-body ol { margin: 0 0 1.3em; padding-inline-start: 1.5rem; }
.pc-article-body li { margin-bottom: .5em; }
.pc-article-body li > ul,
.pc-article-body li > ol { margin: .5em 0 0; }
.pc-article-body li::marker { color: var(--pc-gray-400); }

/* Collapse the empty paragraphs the editor leaves behind */
.pc-article-body p:empty { display: none; }

.pc-article-body blockquote {
  margin: 1.75em 0;
  padding: .25rem 0 .25rem 1.25rem;
  border-inline-start: 3px solid var(--pc-border);
  color: var(--pc-gray-600);
  font-style: normal;
}
.pc-article-body blockquote p:last-child { margin-bottom: 0; }

/* Images — the editor sets width as an inline style on the figure */
.pc-article-body img { border-radius: var(--pc-radius); }

.pc-article-body figure,
.pc-article-body .wysiwyg-image {
  margin: 1.75em 0;
  max-width: 100%;
}
.pc-article-body figure img { display: block; }
.pc-article-body figcaption {
  margin-top: .625rem;
  font-size: .8125rem;
  color: var(--pc-gray-500);
  line-height: 1.55;
}

.wysiwyg-image-resized img { width: 100%; }

/* Alignment classes emitted by the editor */
.wysiwyg-text-align-center, .wysiwyg-float-center { text-align: center; margin-inline: auto; }
.wysiwyg-text-align-right { text-align: right; }
.wysiwyg-text-align-left { text-align: left; }
.wysiwyg-float-left { float: left; margin-inline-end: 1.5rem; margin-block: .5rem 1rem; max-width: 50%; }
.wysiwyg-float-right { float: right; margin-inline-start: 1.5rem; margin-block: .5rem 1rem; max-width: 50%; }
.wysiwyg-indent1 { padding-inline-start: 2rem; }
.wysiwyg-indent2 { padding-inline-start: 4rem; }
.wysiwyg-indent3 { padding-inline-start: 6rem; }

@media (max-width: 640px) {
  .wysiwyg-float-left, .wysiwyg-float-right { float: none; margin-inline: 0; max-width: 100%; }
}

/* Code */
.pc-article-body code {
  font-family: var(--pc-font-mono);
  font-size: .875em;
  background: var(--pc-gray-100);
  border-radius: 5px;
  padding: .15em .4em;
  color: var(--pc-gray-900);
}
.pc-article-body pre {
  background: var(--pc-gray-900);
  color: #E4E4E7;
  border-radius: var(--pc-radius);
  padding: 1.125rem 1.25rem;
  overflow-x: auto;
  font-size: .875rem;
  line-height: 1.65;
  margin: 1.75em 0;
}
.pc-article-body pre code { background: transparent; color: inherit; padding: 0; font-size: inherit; }

/* Tables */
.pc-article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.75em 0;
  font-size: .9375em;
}
.pc-article-body th,
.pc-article-body td {
  border: 1px solid var(--pc-border);
  padding: .625rem .875rem;
  text-align: start;
  vertical-align: top;
}
.pc-article-body th {
  background: var(--pc-gray-50);
  font-family: var(--pc-font-heading);
  font-weight: 600;
  color: var(--pc-heading);
}
.pc-article-body tbody tr:nth-child(even) { background: rgba(0, 0, 0, .015); }

/* Wide tables scroll inside their own container, never the page */
.pc-table-scroll { overflow-x: auto; margin: 1.75em 0; }
.pc-table-scroll table { margin: 0; }

/* Callouts emitted by the Zendesk editor.
   Real markup in these articles:
     <div class="wysiwyg-callout wysiwyg-callout-info">…</div>
   Variants in use: info, tip, warning. The rest are covered defensively so a
   new type never renders unstyled. */

.pc-article-body .wysiwyg-callout {
  display: block;               /* Zendesk ships grid-template-columns: 16px 1fr */
  position: relative;
  margin: 1.75em 0;
  padding: 1.125rem 1.25rem 1.125rem 3.25rem;
  border-radius: var(--pc-radius);
  background: var(--pc-gray-50);
  border: 1px solid var(--pc-border);
  font-size: .9375em;
  line-height: 1.65;
}
.pc-article-body .wysiwyg-callout > *:first-child { margin-top: 0; }
.pc-article-body .wysiwyg-callout > *:last-child { margin-bottom: 0; }

.pc-article-body .wysiwyg-callout::before {
  content: "";
  position: absolute;
  inset-inline-start: 1.125rem;
  top: 1.2rem;
  width: 19px;
  height: 19px;
  background-color: var(--pc-gray-500);
  -webkit-mask: var(--pc-callout-ico, var(--ico-question)) center / contain no-repeat;
  mask: var(--pc-callout-ico, var(--ico-question)) center / contain no-repeat;
}

.pc-article-body .wysiwyg-callout-info {
  --pc-callout-ico: var(--ico-info);
  background: #F1F6FE;
  border-color: #CFE0F8;
}
.pc-article-body .wysiwyg-callout-info::before { background-color: var(--pc-blue); }

.pc-article-body .wysiwyg-callout-tip {
  --pc-callout-ico: var(--ico-sparkles);
  background: #F6F3FF;
  border-color: #DDD6FB;
}
.pc-article-body .wysiwyg-callout-tip::before { background-color: #6B62E8; }

.pc-article-body .wysiwyg-callout-warning {
  --pc-callout-ico: var(--ico-warning);
  background: #FDF6EC;
  border-color: #F3DFC0;
}
.pc-article-body .wysiwyg-callout-warning::before { background-color: var(--pc-amber); }

.pc-article-body .wysiwyg-callout-danger,
.pc-article-body .wysiwyg-callout-error {
  --pc-callout-ico: var(--ico-warning);
  background: #FDF1F0;
  border-color: #F6D2CF;
}
.pc-article-body .wysiwyg-callout-danger::before,
.pc-article-body .wysiwyg-callout-error::before { background-color: var(--pc-red); }

.pc-article-body .wysiwyg-callout-success {
  --pc-callout-ico: var(--ico-check);
  background: #F0F8F4;
  border-color: #C9E5D6;
}
.pc-article-body .wysiwyg-callout-success::before { background-color: var(--pc-green); }

.pc-article-body .wysiwyg-callout-note { --pc-callout-ico: var(--ico-doc); }

/* --- Requirements panel ------------------------------------------------
   `pc-requires` marks a plan/licence requirement. It carries structured
   metadata in data-pc-* attributes and holds a two-column table of
   label/value pairs. It reads as a spec sheet rather than a notice, so it
   drops the callout's icon and tint and becomes its own panel.
*/

.pc-article-body .wysiwyg-callout.pc-requires {
  padding: 0;
  overflow: hidden;
  background: var(--pc-bg);
  border-color: rgba(113, 108, 255, .22);
  border-radius: var(--pc-radius-lg);
}
.pc-article-body .wysiwyg-callout > .wysiwyg-callout-icon { display: none; }

.pc-article-body .wysiwyg-callout.pc-requires::before { content: none; }

/* The leading <p><strong>…</strong></p> becomes the panel header. */
.pc-article-body .pc-requires > p:first-child {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  padding: .75rem 1.25rem;
  background: var(--pc-gradient-soft);
  border-bottom: 1px solid rgba(113, 108, 255, .18);
  font-family: var(--pc-font-heading);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--pc-heading);
}
.pc-article-body .pc-requires > p:first-child::before {
  content: "";
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  background-color: #5B3FD6;
  -webkit-mask: var(--ico-shield) center / contain no-repeat;
  mask: var(--ico-shield) center / contain no-repeat;
}
.pc-article-body .pc-requires > p:first-child strong { font-weight: 600; color: inherit; }

/* Label/value rows, stripped of the generic table chrome. */
/* Nothing may add spacing between the header bar and the first row. */
.pc-article-body .wysiwyg-callout .pc-table-scroll { margin: 0; overflow: visible; }

.pc-article-body .pc-requires table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: .9375rem;
}
.pc-article-body .pc-requires td {
  border: 0;
  border-top: 1px solid var(--pc-gray-100);
  padding: .6875rem 1.25rem;
  vertical-align: top;
}
.pc-article-body .pc-requires tr:first-child td { border-top: 0; }

.pc-article-body .pc-requires td:first-child {
  /* Shrink to the longest label rather than claiming a third of the row, so
     a single short requirement does not leave the value stranded. */
  width: 1%;
  padding-inline-end: 2rem;
  color: var(--pc-gray-500);
  white-space: nowrap;
}
.pc-article-body .pc-requires td:first-child strong {
  font-family: var(--pc-font-heading);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--pc-gray-500);
}
.pc-article-body .pc-requires td:last-child { color: var(--pc-heading); font-weight: 500; }
.pc-article-body .pc-requires tbody tr:nth-child(even) { background: transparent; }

@media (max-width: 560px) {
  .pc-article-body .pc-requires td { display: block; padding-block: .35rem; white-space: normal; }
  .pc-article-body .pc-requires td:first-child { width: auto; padding-bottom: 0; border-top: 0; }
  .pc-article-body .pc-requires tr + tr td:first-child { border-top: 1px solid var(--pc-gray-100); padding-top: .75rem; }
}

/* Accordion / details emitted by the editor */
.pc-article-body details {
  margin: 1.25em 0;
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius);
  overflow: hidden;
}
.pc-article-body summary {
  cursor: pointer;
  padding: .875rem 1.125rem;
  font-family: var(--pc-font-heading);
  font-weight: 600;
  color: var(--pc-heading);
  background: var(--pc-gray-50);
  list-style: none;
}
.pc-article-body summary::-webkit-details-marker { display: none; }
.pc-article-body summary::after {
  content: "";
  float: inline-end;
  width: 16px; height: 16px;
  background-color: var(--pc-gray-500);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .2s var(--pc-ease);
}
.pc-article-body details[open] summary::after { transform: rotate(180deg); }
.pc-article-body details > *:not(summary) { padding-inline: 1.125rem; }
.pc-article-body details > *:last-child { padding-bottom: 1rem; }

/* Attachments */
.pc-attachments { margin-top: 2rem; }
.pc-attachments h3 { font-size: .9375rem; margin-bottom: .5rem; }
.pc-attachments ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.pc-attachments a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .875rem;
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius);
  font-size: .875rem;
  color: var(--pc-gray-700);
  background: var(--pc-bg);
}
.pc-attachments a:hover { border-color: var(--pc-gray-400); text-decoration: none; color: var(--pc-heading); }

/* Content tags */
.pc-content-tags { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: 1.5rem; }
.pc-content-tags a {
  font-size: .75rem;
  font-weight: 600;
  padding: .25rem .625rem;
  border-radius: var(--pc-radius-pill);
  background: var(--pc-gray-100);
  color: var(--pc-gray-600);
}
.pc-content-tags a:hover { background: var(--pc-gray-200); color: var(--pc-heading); text-decoration: none; }


/* 18 — TABLE OF CONTENTS ====================================================== */

.pc-toc { font-size: .8125rem; }

.pc-toc-heading {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--pc-font-heading);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--pc-gray-500);
  margin: 0 0 .75rem;
}
.pc-toc-heading::before {
  content: "";
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--ico-list) center / contain no-repeat;
  mask: var(--ico-list) center / contain no-repeat;
}

.pc-toc ul { list-style: none; margin: 0; padding: 0; border-inline-start: 1px solid var(--pc-border); }
.pc-toc li { margin: 0; }
.pc-toc a {
  display: block;
  padding: .3125rem 0 .3125rem .875rem;
  margin-inline-start: -1px;
  border-inline-start: 2px solid transparent;
  color: var(--pc-gray-500);
  line-height: 1.5;
}
.pc-toc a:hover { color: var(--pc-heading); text-decoration: none; }
.pc-toc a.is-active {
  color: var(--pc-heading);
  font-weight: 700;
  border-inline-start-color: var(--pc-heading);
}
.pc-toc .pc-toc-h3 a { padding-inline-start: 1.75rem; font-size: .78125rem; }

/* Below the three-column breakpoint the side column cannot fit, so the
   chapters move to a collapsible block above the article instead of
   disappearing. Exactly one of the two is ever visible. */
@media (max-width: 1199px) {
  .pc-toc-col { display: none; }
}
@media (min-width: 1200px) {
  .pc-toc-inline { display: none !important; }
}

.pc-toc-inline {
  margin: 0 0 2rem;
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius-lg);
  background: var(--pc-surface);
  overflow: hidden;
}
.pc-toc-inline[hidden] { display: none; }

.pc-toc-inline > summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .875rem 1.125rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--pc-font-heading);
  font-size: .875rem;
  font-weight: 600;
  color: var(--pc-heading);
}
.pc-toc-inline > summary::-webkit-details-marker { display: none; }
.pc-toc-inline > summary::before {
  content: "";
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-color: var(--pc-gray-500);
  -webkit-mask: var(--ico-list) center / contain no-repeat;
  mask: var(--ico-list) center / contain no-repeat;
}
.pc-toc-inline > summary::after {
  content: "";
  width: 14px;
  height: 14px;
  margin-inline-start: auto;
  background-color: var(--pc-gray-500);
  -webkit-mask: var(--ico-chevron-down) center / contain no-repeat;
  mask: var(--ico-chevron-down) center / contain no-repeat;
  transition: transform .4s var(--pc-ease);
}
.pc-toc-inline[open] > summary::after { transform: rotate(180deg); }

.pc-toc-inline ul {
  list-style: none;
  margin: 0;
  padding: 0 1.125rem 1rem 1.125rem;
}
.pc-toc-inline li { margin: 0; }
.pc-toc-inline a {
  display: block;
  padding: .375rem 0;
  font-size: .875rem;
  color: var(--pc-gray-600);
  line-height: 1.5;
}
.pc-toc-inline a:hover { color: var(--pc-heading); text-decoration: none; }
.pc-toc-inline a.is-active { color: var(--pc-heading); font-weight: 700; }
.pc-toc-inline .pc-toc-h3 a { padding-inline-start: 1rem; font-size: .8125rem; }


/* 19 — VOTING, SHARING, FOLLOWING ============================================= */

.pc-vote {
  display: flex;
  align-items: center;
  /* space-between rather than an auto margin on the controls: when the row
     wraps, an auto margin leaves them floating oddly indented on their own
     line, while this drops them flush under the question. */
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.5rem;
  border-radius: var(--pc-radius-lg);
  background: var(--pc-surface);
}
.pc-vote-question {
  font-family: var(--pc-font-heading);
  font-weight: 600;
  color: var(--pc-heading);
  margin: 0;
}
.pc-vote-controls { display: flex; align-items: center; gap: .5rem; }

/* A like counter rather than a score. The negative half of the vote is still
   recorded — Zendesk needs both to count — but it is never shown, and a "no"
   opens a route to support instead of leaving a verdict on the screen. */
.pc-vote-btn {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .5rem 1rem;
  border-radius: var(--pc-radius-pill);
  border: 1px solid var(--pc-border);
  background: var(--pc-bg);
  color: var(--pc-gray-700);
  font-family: var(--pc-font-heading);
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--pc-transition);
}
.pc-vote-btn:hover { border-color: var(--pc-gray-400); color: var(--pc-heading); text-decoration: none; }
.pc-vote-btn.is-voted {
  background: var(--pc-primary);
  color: var(--pc-on-primary);
  border-color: var(--pc-primary);
}
.pc-vote-btn .pc-ico { width: 16px; height: 16px; flex: none; }

/* The count rides inside the thumbs-up, so the two read as one control. */
.pc-vote-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 20px;
  padding-inline: .375rem;
  border-radius: var(--pc-radius-pill);
  background: rgba(0, 0, 0, .07);
  font-size: .75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pc-vote-btn.is-voted .pc-vote-count { background: rgba(255, 255, 255, .22); }
/* Until the script has moved it into the button it must not sit loose in the
   row — a bare number next to two buttons means nothing. */
.pc-vote-controls > .pc-vote-count { display: none; }


.pc-article-callout { margin: 1.5rem 0 0; font-size: .875rem; }

.pc-share { display: flex; align-items: center; gap: .375rem; }
.pc-share a, .share a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--pc-radius-sm);
  border: 1px solid var(--pc-border);
  color: var(--pc-gray-600);
  background: var(--pc-bg);
  transition: var(--pc-transition);
}
.pc-share a:hover, .share a:hover { color: var(--pc-heading); border-color: var(--pc-gray-400); text-decoration: none; }
.share { display: flex; gap: .375rem; list-style: none; padding: 0; margin: 0; }
.share li { display: inline-flex; }

/* Zendesk subscribe button */
.subscribe-button, button[data-auth-action] {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .4375rem .875rem;
  border-radius: var(--pc-radius);
  border: 1px solid var(--pc-border);
  background: var(--pc-bg);
  color: var(--pc-gray-700);
  font-family: var(--pc-font-heading);
  font-size: .8125rem;
  font-weight: 500;
  cursor: pointer;
}
.subscribe-button:hover { border-color: var(--pc-gray-400); color: var(--pc-heading); }

/* The helper renders its own markup, which arrived as a bare word on a grey
   square beside the search field. Whatever it emits, it reads as the theme's
   secondary button. */
/* The helper wraps its button in an unstyled div, which the flex row then
   squeezed to the width of the word inside it. */
.pc-band-aside > * { flex: none; }
.pc-band-aside .pc-band-search { flex: 1 1 auto; }

/* The helper emits a bare <button data-follower-count> with no class at all,
   which is why it arrived as a word floating beside the search field. */
.pc-band-aside button[data-follower-count],
.pc-band-aside .subscribe button,
.pc-band-aside button.subscribe-button,
.pc-band-aside [class*="subscribe"] > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  height: 39px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--pc-radius);
  background: rgba(0, 0, 0, .1);
  color: var(--pc-heading);
  font-family: var(--pc-font-heading);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.03em;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--pc-transition);
}
.pc-band-aside button[data-follower-count]:hover,
.pc-band-aside .subscribe button:hover,
.pc-band-aside button.subscribe-button:hover,
.pc-band-aside [class*="subscribe"] > button:hover { background: rgba(0, 0, 0, .16); }
/* Following already: the state should read at a glance. */
.pc-band-aside button[data-follower-count][data-selected="true"] {
  background: var(--pc-primary);
  color: var(--pc-on-primary);
}


/* --- Vote control --------------------------------------------------------
   Used for community posts and comments, where a score is the point. The
   article's "was this helpful" block stays separate — different question,
   different control.
*/

.pc-votebar {
  display: inline-flex;
  align-items: center;
  gap: .125rem;
  padding: .1875rem;
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius-pill);
  background: var(--pc-bg);
}

.pc-votebtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--pc-gray-500);
  cursor: pointer;
  transition: var(--pc-transition);
}
.pc-votebtn:hover { background: var(--pc-gray-100); color: var(--pc-heading); }
.pc-votebtn.is-voted { background: var(--pc-primary); color: var(--pc-on-primary); }

.pc-votescore {
  min-width: 1.75rem;
  text-align: center;
  font-family: var(--pc-font-heading);
  font-size: .875rem;
  font-weight: 600;
  color: var(--pc-heading);
  font-variant-numeric: tabular-nums;
}

.pc-votebar--sm { padding: .125rem; }
.pc-votebar--sm .pc-votebtn { width: 26px; height: 26px; }
.pc-votebar--sm .pc-votescore { font-size: .8125rem; min-width: 1.5rem; }

.pc-comment-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: .75rem;
}


/* 20 — COMMENTS =========================================================== */

/* Closed for comments and none posted: Zendesk renders no form, so the whole
   section is a heading, a zero and a notice. Nothing there to read. The
   sign-in prompt is a link, so that case stays visible. */
.pc-comments:not(:has(#comments)):not(:has(form)):not(:has(.pc-comment-form a)) {
  display: none;
}

.pc-comments { margin-top: 3.5rem; }
.pc-comments h2 { font-size: 1.25rem; margin-bottom: 1.25rem; }

.pc-comment {
  display: flex;
  gap: 1rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--pc-border);
}
.pc-comment-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.pc-comment-body { flex: 1; min-width: 0; }
.pc-comment-head { display: flex; align-items: baseline; gap: .625rem; flex-wrap: wrap; margin-bottom: .375rem; }
.pc-comment-author { font-family: var(--pc-font-heading); font-weight: 600; color: var(--pc-heading); }
.pc-comment-date { font-size: .8125rem; color: var(--pc-gray-500); }
.pc-comment-content { font-size: .9375rem; line-height: 1.7; }
.pc-comment-content > *:last-child { margin-bottom: 0; }

.pc-comment-official {
  border-radius: var(--pc-radius-lg);
  background: var(--pc-surface);
  padding: 1.5rem;
  border-top: 0;
}

.pc-badge {
  display: inline-flex;
  align-items: center;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: .125rem .5rem;
  border-radius: var(--pc-radius-pill);
  background: var(--pc-gray-900);
  color: #fff;
}

.pc-comment-form { margin-top: 2rem; }


/* 21 — SEARCH RESULTS ===================================================== */

.pc-results-head { margin-bottom: 1.5rem; }
.pc-results-count { color: var(--pc-gray-500); font-size: .9375rem; }

.pc-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--pc-border);
}
.pc-filters a, .pc-filters button {
  font-size: .8125rem;
  font-weight: 600;
  padding: .375rem .875rem;
  border-radius: var(--pc-radius-pill);
  border: 1px solid var(--pc-border);
  background: var(--pc-bg);
  color: var(--pc-gray-600);
  cursor: pointer;
}
.pc-filters a:hover { color: var(--pc-heading); border-color: var(--pc-gray-400); text-decoration: none; }
.pc-filters a.is-active, .pc-filters .current {
  background: var(--pc-primary);
  border-color: var(--pc-primary);
  color: var(--pc-on-primary);
}

.pc-results { list-style: none; margin: 0; padding: 0; }

.pc-result {
  padding: 1.375rem 0;
  border-bottom: 1px solid var(--pc-gray-100);
}
.pc-result-title {
  font-family: var(--pc-font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.02em;
  margin: 0 0 .25rem;
}
.pc-result-title a { color: var(--pc-heading); }
.pc-result-title a:hover { color: var(--pc-link); text-decoration: none; }
.pc-result-breadcrumb { font-size: .75rem; color: var(--pc-gray-500); margin-bottom: .375rem; }
.pc-result-breadcrumb ol { display: inline-flex; }
.pc-result-body { font-size: .9375rem; color: var(--pc-gray-600); margin: 0; line-height: 1.6; }
.pc-result-body em, .pc-article-body mark, mark {
  background: rgba(255, 203, 52, .32);
  color: inherit;
  font-style: normal;
  font-weight: 600;
  padding: 0 .1em;
  border-radius: 2px;
}
.pc-result-meta { display: flex; gap: 1rem; font-size: .75rem; color: var(--pc-gray-500); margin-top: .375rem; }

.pc-no-results { padding: 3.5rem 1.5rem; text-align: center; }
.pc-no-results h2 { font-size: 1.375rem; }
.pc-no-results p { color: var(--pc-gray-600); max-width: 46ch; margin-inline: auto; }


/* --- Search page --------------------------------------------------------- */

.pc-search-band { margin-bottom: 2.5rem; }
.pc-search-band h1 { margin-bottom: 1rem; }
.pc-search--band { max-width: 640px; }
.pc-search--band input[type="search"] {
  height: 52px;
  font-size: 1rem;
  padding-inline: 3rem 1.25rem;
  border-radius: var(--pc-radius);
  border-color: var(--pc-border);
  box-shadow: none;
  background: var(--pc-bg);
}
.pc-search--band input[type="search"]:focus {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .06);
  transform: none;
}
.pc-search--band .pc-search-icon { inset-inline-start: 1.0625rem; }
.pc-search-band .pc-results-count { margin: .875rem 0 0; }

/* Zendesk's AI answer sits at the top of the results. Only the frame is ours:
   spacing and a max width, so its own UI keeps working if Zendesk changes it. */
/* Zendesk renders the AI answer into a CLOSED shadow root, so no selector in
   this file can reach its markup — verified against the live Help Center.
   Inherited properties do cross that boundary, which is the whole lever the
   theme has: set the type here and the answer reads like the rest of the page
   instead of like Zendesk's default. Everything else comes from the colour
   identifiers in the manifest. */
.pc-ai-answer:not(:empty) { margin-bottom: 2rem; }
.pc-ai-answer > *:only-child { max-width: 100%; }

.pc-ai-answer {
  font-family: var(--pc-font-body);
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--pc-text);
}

.pc-filter-list a { display: flex !important; align-items: center; gap: .5rem; }
.pc-filter-count {
  margin-inline-start: auto;
  font-size: .75rem;
  font-weight: 600;
  color: var(--pc-gray-400);
  font-variant-numeric: tabular-nums;
}
.pc-tree a.is-current .pc-filter-count { color: var(--pc-gray-600); }

.pc-result-type {
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--pc-gray-600);
  background: var(--pc-gray-100);
  border-radius: var(--pc-radius-pill);
  padding: .125rem .5rem;
}

.pc-no-results-actions {
  display: flex;
  gap: .75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.75rem;
}

.pc-content-tags a.is-selected {
  background: var(--pc-primary);
  color: var(--pc-on-primary);
}


/* 22 — REQUESTS & TICKET FORM ========================================
   The Zendesk React bundles (new-request-form, request-list, ticket-fields,
   wysiwyg) render in here. We style the containers and pull the Garden
   components onto our own typography.
   ========================================================================== */

.pc-form-wrap { max-width: none; }

.pc-request-form-wrap.is-open { max-width: 46rem; }

#new-request-form,
#request-list,
#service-catalog,
#approval-requests { font-family: var(--pc-font-body); }

/* Garden ships its own tokens; force our fonts and radius onto it */
#new-request-form input,
#new-request-form textarea,
#new-request-form select,
#new-request-form button,
#request-list input,
#request-list select,
#request-list button {
  font-family: var(--pc-font-body);
}
#new-request-form [data-garden-id="buttons.button"],
#request-list [data-garden-id="buttons.button"],
#service-catalog [data-garden-id="buttons.button"] {
  border-radius: var(--pc-radius);
  font-family: var(--pc-font-heading);
  font-weight: 500;
}
#new-request-form [data-garden-id="forms.input"],
#new-request-form [data-garden-id="forms.textarea"],
#new-request-form [data-garden-id="forms.faux_input"],
#request-list [data-garden-id="forms.input"] {
  border-radius: var(--pc-radius);
}

/* The editor inside the ticket form is the same CKEditor as elsewhere, so it
   gets the same variables. */
#new-request-form {
  --ck-border-radius: var(--pc-radius);
  --ck-font-face: var(--pc-font-body);
  --ck-color-base-border: var(--pc-border);
  --ck-color-base-background: var(--pc-bg);
  --ck-color-toolbar-background: var(--pc-gray-100);
  --ck-color-toolbar-border: var(--pc-border);
  --ck-color-focus-border: var(--pc-gray-500);
  --ck-color-button-default-hover-background: rgba(0, 0, 0, .05);
}
#new-request-form .ck.ck-editor__editable { min-height: 12rem; line-height: 1.7; }

/* Request list */
.pc-requests-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}

.pc-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.pc-table th {
  text-align: start;
  font-family: var(--pc-font-heading);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--pc-gray-500);
  padding: .625rem .875rem;
  border-bottom: 1px solid var(--pc-border);
  white-space: nowrap;
}
.pc-table td {
  padding: .875rem;
  border-bottom: 1px solid var(--pc-gray-100);
  vertical-align: middle;
}
.pc-table tbody tr { transition: background .18s var(--pc-ease); }
.pc-table tbody tr:hover { background: var(--pc-gray-50); }
.pc-table a { color: var(--pc-heading); font-weight: 600; }

.pc-table-wrap { overflow-x: auto; }

/* Ticket detail */
.pc-request-layout { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .pc-request-layout { grid-template-columns: minmax(0, 1fr) 280px; } }

.pc-request-aside {
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius-lg);
  padding: 1.25rem;
  font-size: .875rem;
}
.pc-request-aside dt {
  font-family: var(--pc-font-heading);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--pc-gray-500);
  margin-bottom: .1875rem;
}
.pc-request-aside dd { margin: 0 0 1rem; color: var(--pc-gray-700); }
.pc-request-aside dd:last-child { margin-bottom: 0; }


/* --- Channel chooser & messaging ---------------------------------------
   Chat is presented as the leading route; the ticket form expands in place
   underneath so it never reads as a dead end.
*/

/* Ticket form panel, revealed from the chooser. */
.pc-request-form-wrap { display: none; }
/* The animation runs on .is-open rather than on the panel with fill-mode
   `both`: a retained fill leaves a transform on the element, and a transform
   is a stacking context — which traps Garden's dropdowns inside the panel,
   under the header, however high their z-index. */
.pc-request-form-wrap.is-open {
  display: block;
  animation: pc-form-in .5s var(--pc-ease);
}

/* Opacity only, deliberately: a transform here would make the panel a
   stacking context and trap the ticket form's dropdowns under the header. */
@keyframes pc-form-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

.pc-form-heading {
  font-size: 1.25rem;
  margin-bottom: 1.25rem;
  padding-top: .5rem;
}

/* Floating chat launcher, echoing the round button on pluscloud.nl. */
.pc-launcher {
  position: fixed;
  inset-block-end: 20px;
  inset-inline-end: 20px;
  z-index: 5000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: var(--pc-primary);
  color: var(--pc-on-primary);
  box-shadow: var(--pc-shadow-lg);
  cursor: pointer;
  transition: var(--pc-transition);
}
.pc-launcher:hover { transform: translateY(-3px) scale(1.04); }
.pc-launcher.is-hidden { opacity: 0; visibility: hidden; transform: scale(.8); }

/* Open, the same button closes the conversation again: the icon crosses over
   in place rather than the button being swapped for the widget's own. */
.pc-launcher-icon {
  display: inline-flex;
  transition: opacity .2s var(--pc-ease), transform .3s var(--pc-ease);
}
.pc-launcher-icon--close { position: absolute; opacity: 0; transform: rotate(-90deg) scale(.7); }
.pc-launcher.is-open .pc-launcher-icon { opacity: 0; transform: rotate(90deg) scale(.7); }
.pc-launcher.is-open .pc-launcher-icon--close { opacity: 1; transform: none; }
/* Nothing unread to report while it is open and being read. */
.pc-launcher.is-open .pc-launcher-badge { display: none; }

.pc-launcher-badge {
  position: absolute;
  top: 2px;
  inset-inline-end: 2px;
  min-width: 18px;
  height: 18px;
  padding-inline: 4px;
  border-radius: 9px;
  background: var(--pc-red);
  color: #fff;
  font-size: .6875rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* With our own button in the corner, Zendesk's must not also be there. It is
   re-created on every `messenger show`, so hiding it once from script would not
   hold; this does. */
.pc-own-launcher iframe#launcher { display: none !important; }

@media print { .pc-launcher { display: none !important; } }


@media (min-width: 900px) {
  .pc-contact-tabs:has([data-pc-channel="phone"]):has([data-pc-channel="chat"]:not([hidden])) {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Approval requests --------------------------------------------------
   The bundle writes its own heading — translated, and the first element in
   its container — so the page promotes that one rather than adding a second
   above it. Everything else in here is Garden, and picked up by the list
   rules in the Garden section. */
#approval-request-list > * > [data-garden-id="typography.font"]:first-child {
  display: block;
  margin-bottom: 1.5rem;
  font-family: var(--pc-font-heading);
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.25rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.03em;
  color: var(--pc-heading);
}

/* The empty state, which is the second one and reads as body text. */
#approval-request-list [data-garden-id="typography.font"]:not(:first-child) {
  color: var(--pc-gray-600);
}

/* --- Team page ----------------------------------------------------------
   A row per person, the same shape the billing rows use, so the two account
   pages read as one place. The controls only appear for an admin; the server
   refuses the rest regardless. */
.pc-team-rows { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; flex-direction: column; }
.pc-team-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .875rem 0;
  border-block-end: 1px solid var(--pc-border);
}
.pc-team-row:last-child { border-block-end: 0; }

.pc-team-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.pc-team-name {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--pc-heading);
}
.pc-team-you {
  padding: 1px 6px;
  border-radius: var(--pc-radius-pill);
  background: var(--pc-gray-100);
  font-size: .6875rem;
  font-weight: 600;
  color: var(--pc-gray-600);
}
.pc-team-meta { font-size: .8125rem; color: var(--pc-gray-600); }
.pc-team-rolelabel { font-size: .8125rem; color: var(--pc-gray-600); flex: none; }

.pc-team-role {
  flex: none;
  padding: .375rem .5rem;
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius-sm);
  background: var(--pc-bg);
  font-family: inherit;
  font-size: .8125rem;
  color: var(--pc-heading);
}
.pc-team-remove {
  flex: none;
  border: 0;
  background: none;
  padding: .25rem;
  font-family: inherit;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--pc-gray-500);
  cursor: pointer;
}
.pc-team-remove:hover { color: var(--pc-red); }

.pc-team-add {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .75rem 1rem;
  align-items: end;
  padding: 1.25rem;
  border-radius: var(--pc-radius-lg);
  background: var(--pc-surface);
}
.pc-team-field { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.pc-team-field span { font-size: .75rem; font-weight: 600; color: var(--pc-gray-600); }
.pc-team-field input,
.pc-team-field select {
  width: 100%;
  min-height: var(--pc-btn-h);
  padding: .5rem .75rem;
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius);
  background: var(--pc-bg);
  font-family: inherit;
  font-size: 15px;
  color: var(--pc-heading);
}
.pc-team-field input:focus,
.pc-team-field select:focus {
  outline: none;
  border-color: var(--pc-heading);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .06);
}

.pc-team-note { margin: 1rem 0 0; font-size: .875rem; color: var(--pc-gray-600); }
.pc-team-note--error { color: var(--pc-red); }

/* --- Billing page ------------------------------------------------------
   One card per entity, in the same shape the category and section pages use,
   so a reader who arrives here from the profile menu is not somewhere new. */
.pc-billing-head .pc-icon-badge { background: var(--pc-gray-100); }

.pc-billing-list {
  display: grid;
  /* Wide enough for a row of name, amount and a link without wrapping; one
     account then fills the column rather than huddling in a corner of it. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr));
  gap: 1rem;
}

.pc-billing-card {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1.5rem;
  border-radius: var(--pc-radius-lg);
  background: var(--pc-surface);
  transition: var(--pc-transition);
}
.pc-billing-card:not(.is-loading):hover { background: var(--pc-gray-200); }

.pc-billing-name {
  margin: 0;
  font-family: var(--pc-font-heading);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -.03em;
  color: var(--pc-heading);
}

.pc-billing-facts { display: flex; gap: 1.25rem; margin: 0; flex-wrap: wrap; }
.pc-billing-fact { display: flex; flex-direction: column; gap: 1px; }
.pc-billing-fact dt { font-size: .75rem; color: var(--pc-gray-500); }
.pc-billing-fact dd {
  margin: 0;
  font-family: var(--pc-font-mono);
  font-size: .9375rem;
  font-variant-numeric: tabular-nums;
  color: var(--pc-heading);
}

/* The action sits at the foot of the card whatever the card above it holds. */
.pc-billing-card .pc-btn { margin-top: auto; align-self: flex-start; }

.pc-billing-note, .pc-billing-empty { font-size: .875rem; color: var(--pc-gray-600); margin: 0; }

.pc-billing-via {
  margin: 0;
  font-size: .75rem;
  color: var(--pc-gray-500);
}

/* A row per subscription rather than a card: with a dozen apps on an account
   the stacked cards became a wall, and what a reader scans for is the name and
   the amount, in a column they can run their eye down. */
.pc-billing-subs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pc-billing-sub {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .625rem 0;
  border-block-end: 1px solid var(--pc-border);
}
.pc-billing-sub:last-child { border-block-end: 0; }

.pc-billing-sub-icon { width: 26px; height: 26px; flex: none; border-radius: 6px; }
.pc-billing-sub-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.pc-billing-sub-what {
  font-size: .9375rem;
  font-weight: 500;
  color: var(--pc-heading);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pc-billing-sub-meta {
  font-size: .8125rem;
  color: var(--pc-gray-600);
  font-variant-numeric: tabular-nums;
}
.pc-billing-sub-doc {
  flex: none;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--pc-gray-600);
}
.pc-billing-sub-doc:hover { color: var(--pc-heading); }

.pc-billing-scope {
  margin: 1.5rem 0 0;
  font-size: .8125rem;
  color: var(--pc-gray-500);
}
.pc-billing-scope[hidden] { display: none; }
.pc-billing-empty { padding: 2rem 0; }

.pc-skeleton--line { height: 14px; border-radius: 7px; }
.pc-skeleton--short { width: 45%; }

/* The phone panel is a tab like the others: closed unless chosen. */
.pc-contact-phone { display: none; }
.pc-contact-phone.is-open { display: block; }

/* --- The organisation's emergency code --------------------------------
   Keys rather than a number in a sentence: a code read as prose is a code
   mistyped, and the shape says what it is before the caption does. */
.pc-pin {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  /* Its own surface inside the panel: it is the one thing on this page that
     is only yours, and it should not read as another paragraph. */
  margin: 1rem 0 0;
  padding: 1rem 1.25rem;
  border-radius: var(--pc-radius);
  background: var(--pc-bg);
  border: 1px solid var(--pc-border);
}
.pc-pin[hidden] { display: none; }

.pc-pin-label {
  margin: 0;
  font-size: .8125rem;
  color: var(--pc-gray-600);
}
.pc-pin-label strong { color: var(--pc-heading); font-weight: 600; }

.pc-pin-keys { display: inline-flex; gap: .375rem; }

.pc-pin-signin {
  margin: .75rem 0 0;
  font-size: .8125rem;
  color: var(--pc-gray-600);
}
.pc-pin-signin[hidden] { display: none; }
.pc-pin-signin a { font-weight: 600; color: var(--pc-heading); }

.pc-pin-number {
  margin: 0;
  font-size: .75rem;
  color: var(--pc-gray-500);
}

.pc-pin-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 40px;
  padding-inline: .25rem;
  border-radius: 8px;
  border: 1px solid var(--pc-border);
  /* The key sits a shade proud of the surface, the way a keypad does. */
  box-shadow: 0 1px 0 var(--pc-border), 0 1px 2px rgba(0, 0, 0, .05);
  background: var(--pc-bg);
  font-family: var(--pc-font-mono);
  font-size: 1.0625rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--pc-heading);
}


/* 23 — SERVICE CATALOG & APPROVALS =================================== */

.pc-catalog-hero {
  border-radius: var(--pc-radius-xl);
  padding: clamp(2rem, 5vw, 3.5rem);
  background: var(--pc-gradient-soft);
  margin-bottom: 2.5rem;
  background-size: cover;
  background-position: center;
}
.pc-catalog-hero h1 { margin-bottom: .375rem; }
.pc-catalog-hero p { color: var(--pc-gray-600); max-width: 52ch; margin: 0; }


/* 24 — COMMUNITY ========================================================== */

/* Community landing */
/* The community banner is .pc-band — see section 12. */


.pc-post-list { list-style: none; margin: 0; padding: 0; }
.pc-post {
  display: flex;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--pc-gray-100);
}
.pc-post-votes {
  flex-shrink: 0;
  width: 56px;
  text-align: center;
  font-family: var(--pc-font-heading);
}
.pc-post-votes strong { display: block; font-size: 1.125rem; color: var(--pc-heading); }
.pc-post-votes span { font-size: .6875rem; color: var(--pc-gray-500); text-transform: uppercase; letter-spacing: .04em; }
.pc-post-title { font-family: var(--pc-font-heading); font-size: 1rem; font-weight: 600; margin: 0 0 .25rem; }
.pc-post-title a { color: var(--pc-heading); }
.pc-post-meta { font-size: .8125rem; color: var(--pc-gray-500); }

.pc-status-badge {
  display: inline-flex;
  align-items: center;
  gap: .3125rem;
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: .1875rem .5rem;
  border-radius: var(--pc-radius-pill);
  background: var(--pc-gray-100);
  color: var(--pc-gray-600);
}
.pc-status-badge--answered { background: #E8F5EE; color: var(--pc-green); }
.pc-status-badge--planned { background: #EDF3FD; color: var(--pc-blue); }
.pc-status-badge--completed { background: #F1EEFE; color: #5B3FD6; }
.pc-status-badge--not-planned { background: var(--pc-gray-100); color: var(--pc-gray-600); }


/* 25 — PROFILE & SUBSCRIPTIONS ============================================= */

.pc-profile-head {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--pc-border);
  margin-bottom: 2rem;
}
.pc-profile-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.pc-profile-name { font-size: 1.5rem; margin: 0 0 .125rem; }
.pc-profile-meta { font-size: .875rem; color: var(--pc-gray-500); }

.pc-tabs {
  display: flex;
  gap: .25rem;
  border-bottom: 1px solid var(--pc-border);
  margin-bottom: 1.75rem;
  overflow-x: auto;
  scrollbar-width: none;          /* the track showed even with nothing to scroll */
  -ms-overflow-style: none;
}
.pc-tabs::-webkit-scrollbar { display: none; }
.pc-tabs a {
  padding: .625rem .875rem;
  font-family: var(--pc-font-heading);
  font-size: .875rem;
  font-weight: 500;
  color: var(--pc-gray-500);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.pc-tabs a:hover { color: var(--pc-heading); text-decoration: none; }
.pc-tabs a.is-active { color: var(--pc-heading); border-bottom-color: var(--pc-heading); font-weight: 600; }


/* 26 — NOTIFICATIONS & STATUS LABELS =========================================== */

.notification, .pc-notice {
  padding: .875rem 1.125rem;
  border-radius: var(--pc-radius);
  margin-bottom: 1.25rem;
  font-size: .9375rem;
  border: 1px solid var(--pc-border);
  background: var(--pc-gray-50);
}
.notification-error, .pc-notice--error { background: #FDF1F0; border-color: #F6D2CF; color: #8C2A22; }
.notification-success, .pc-notice--success { background: #F0F8F4; border-color: #C9E5D6; color: #14563A; }
.notification-notice, .pc-notice--info { background: #F1F6FE; border-color: #CFE0F8; color: #14508C; }

/* On the request page this is the one thing a reader looks for first, so it
   is a badge you can read across the page rather than a whisper beside the
   title. Sentence case, because micro-caps at 11px is the hardest thing on
   the page to read. */
.status-label {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: -.13px;
  text-transform: none;
  padding: .375rem .75rem;
  border-radius: var(--pc-radius-pill);
  background: var(--pc-gray-100);
  color: var(--pc-gray-600);
}
/* A dot in front carries the state at a glance, before the word is read. */
.status-label::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.status-label-open, .status-label-new { background: #FDF1F0; color: #8C2A22; }
.status-label-pending { background: #FDF6EC; color: #7A4708; }
.status-label-solved, .status-label-closed { background: #F0F8F4; color: #14563A; }
.status-label-answered { background: #F0F8F4; color: #14563A; }


/* 27 — PAGINATION =======================================================
   Matches .pix-pagination on the website: flat links, and the current page
   lifted onto a white card with a soft shadow.
   ======================================================================== */

.pagination, .pc-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  flex-wrap: wrap;
}
.pagination li { display: inline-flex; }

.pagination a,
.pagination span,
.pc-pagination a,
.pc-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px;
  margin: 0 5px;
  font-size: 14px;
  line-height: 14px;
  font-weight: 600;
  color: var(--pc-text);
  border-radius: var(--pc-radius-normal);
  transition: var(--pc-transition);
}
.pagination a:hover, .pc-pagination a:hover {
  color: var(--pc-heading);
  text-decoration: none;
}

.pagination .pagination-current,
.pagination [aria-current],
.pc-pagination .is-current {
  background: var(--pc-bg);
  color: var(--pc-heading);
  box-shadow: var(--pc-shadow-sm);
  cursor: default;
}

/* Previous / next arrows */
.pagination .pagination-prev,
.pagination .pagination-next { padding-inline: 14px; }

@media (max-width: 640px) {
  .pagination a, .pagination span { padding: 12px 14px; margin: 0 2px; }
}


/* 28 — FOOTER ============================================================= */

/* The website's footer is white with no top rule. */
.pc-footer {
  margin-top: 4rem;
  background: var(--pc-bg);
  padding-block: 3rem 2rem;
}

.pc-footer-top {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--pc-border);
}

.pc-footer-brand { max-width: 30ch; }
.pc-footer-brand img { height: 28px; margin-bottom: .875rem; }
.pc-footer-tagline { font-size: .875rem; color: var(--pc-gray-600); margin: 0; line-height: 1.6; }

.pc-footer-links { display: flex; flex-wrap: wrap; gap: 2rem 3rem; }
.pc-footer-col h3 {
  font-family: var(--pc-font-heading);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -.03em;
  color: rgba(0, 0, 0, .5);
  margin: 0 0 .75rem;
}
.pc-footer-col ul { list-style: none; margin: 0; padding: 0; }
.pc-footer-col li { margin-bottom: .4375rem; }
.pc-footer-col a {
  font-family: var(--pc-font-heading);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -.03em;
  color: var(--pc-heading);
  transition: opacity .4s var(--pc-ease);
}
.pc-footer-col a:hover { opacity: .6; color: var(--pc-heading); }

.pc-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.5rem;
  font-size: .8125rem;
  color: var(--pc-gray-500);
}

/* Language picker */
.pc-lang { position: relative; }
.pc-lang .pc-dropdown-toggle {
  border-color: var(--pc-border);
  font-size: .8125rem;
  padding: .375rem .625rem;
}
/* Opening upward and to the left belongs to the footer and the mobile menu.
   In the strip it hangs from the button, right-aligned, or it opens off the
   edge of the screen. */
.pc-lang .pc-dropdown-menu { min-width: 180px; }
.pc-mobile-utils .pc-lang .pc-dropdown-menu,
.pc-footer .pc-lang .pc-dropdown-menu {
  inset-inline-end: auto;
  inset-inline-start: 0;
  top: auto;
  bottom: calc(100% + .5rem);
}
.pc-topbar .pc-lang .pc-dropdown-menu {
  inset-inline-start: auto;
  inset-inline-end: 0;
  top: calc(100% + .5rem);
  bottom: auto;
}
/* The switcher sits near the right edge of the footer, so on a phone its menu
   has to hang from that edge or it runs off the screen. */
@media (max-width: 767px) {
  .pc-lang .pc-dropdown-menu { inset-inline-start: auto; inset-inline-end: 0; }
}



/* 31 — SEARCH PALETTE ====================================================
   Opens over the page from the header, the hero field or Cmd/Ctrl+K.
   ======================================================================== */

.pc-palette {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  justify-content: center;
  padding: clamp(1rem, 8vh, 7rem) 1rem 1rem;
}
.pc-palette[hidden] { display: none; }

.pc-palette-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(24, 24, 27, .4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .2s var(--pc-ease);
}
.pc-palette.is-open .pc-palette-backdrop { opacity: 1; }

.pc-palette-dialog {
  position: relative;
  width: 100%;
  max-width: 620px;
  max-height: min(30rem, 80vh);
  display: flex;
  flex-direction: column;
  background: var(--pc-bg);
  border-radius: var(--pc-radius-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .22), 0 4px 12px rgba(0, 0, 0, .1);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px) scale(.98);
  transition: opacity .2s var(--pc-ease), transform .2s var(--pc-ease);
}
.pc-palette.is-open .pc-palette-dialog { opacity: 1; transform: none; }

.pc-palette-field {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .875rem 1rem;
  border-bottom: 1px solid var(--pc-border);
  flex-shrink: 0;
}
.pc-palette-icon { color: var(--pc-gray-500); flex-shrink: 0; }

.pc-palette-field input[type="search"] {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  font-size: 1rem;
  font-weight: 500;
  color: var(--pc-heading);
}
.pc-palette-field input:focus { outline: none; box-shadow: none; }
.pc-palette-field input::-webkit-search-cancel-button { -webkit-appearance: none; }

.pc-palette-spinner {
  width: 15px; height: 15px;
  border: 2px solid var(--pc-gray-200);
  border-top-color: var(--pc-gray-500);
  border-radius: 50%;
  animation: pc-spin .7s linear infinite;
  flex-shrink: 0;
}
@keyframes pc-spin { to { transform: rotate(360deg); } }

.pc-palette-esc {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.pc-palette kbd {
  font-family: var(--pc-font-body);
  font-size: .6875rem;
  font-weight: 600;
  color: var(--pc-gray-500);
  background: var(--pc-gray-100);
  border-radius: 4px;
  padding: .125rem .375rem;
}

.pc-palette-results {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .375rem;
  flex: 1;
}

.pc-palette-section {
  font-family: var(--pc-font-heading);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--pc-gray-400);
  padding: .625rem .75rem .25rem;
}

.pc-palette-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5625rem .75rem;
  border-radius: var(--pc-radius-sm);
  color: var(--pc-gray-700);
  text-decoration: none;
}
.pc-palette-row:hover,
.pc-palette-row.is-active {
  background: var(--pc-gray-100);
  color: var(--pc-heading);
  text-decoration: none;
}
.pc-palette-row-icon { display: inline-flex; color: var(--pc-gray-400); flex-shrink: 0; }
.pc-palette-row.is-active .pc-palette-row-icon { color: var(--pc-heading); }

.pc-palette-row-body { min-width: 0; flex: 1; }
.pc-palette-row-title {
  display: block;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--pc-heading);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pc-palette-row-meta {
  display: block;
  font-size: .75rem;
  color: var(--pc-gray-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A quiet kind label, so a saved query never reads like an article. */
.pc-palette-row-kind {
  flex-shrink: 0;
  font-family: var(--pc-font-heading);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--pc-gray-400);
  background: var(--pc-gray-100);
  border-radius: var(--pc-radius-pill);
  padding: .125rem .4375rem;
  line-height: 1.5;
}
.pc-palette-row.is-active .pc-palette-row-kind,
.pc-palette-row:hover .pc-palette-row-kind {
  background: var(--pc-bg);
  color: var(--pc-gray-600);
}

.pc-palette-none {
  padding: 1.5rem .75rem 1rem;
  margin: 0;
  text-align: center;
  color: var(--pc-gray-500);
  font-size: .9375rem;
}

.pc-palette-foot {
  display: flex;
  gap: 1rem;
  padding: .5rem 1rem;
  border-top: 1px solid var(--pc-border);
  font-size: .6875rem;
  color: var(--pc-gray-500);
  flex-shrink: 0;
}
.pc-palette-foot span { display: inline-flex; align-items: center; gap: .25rem; }

@media (max-width: 560px) {
  .pc-palette { padding-top: 0; }
  .pc-palette-dialog { max-height: 100vh; border-radius: 0; max-width: none; }
  .pc-palette-foot { display: none; }
}


/* 32 — HOME PAGE EFFECTS =================================================
   Borrowed from the website: the two-tone heading treatment and counters
   that count up when scrolled into view.
   ======================================================================== */

/* Two-tone heading, the way the website emphasises words: the sentence sits
   at 40% black and the marked words come forward at full strength. There is
   no marker or highlighter anywhere on pluscloud.nl — checked, not assumed. */
.pc-js [data-pc-emphasis] > span { color: rgba(0, 0, 0, .4); }
.pc-emphasis { color: var(--pc-heading); }

.pc-hero--image [data-pc-emphasis] > span { color: rgba(255, 255, 255, .55); }

/* Counters */
@media (prefers-reduced-motion: reduce) {
  .pc-palette-spinner { animation: none; }
  .pc-blob { animation: none !important; }
}


/* 29 — MOTION ============================================================
   The website's interaction vocabulary, reused across the help center.
   Measured from pluscloud.nl rather than invented:

     block reveal   translateY(20px) + fade, 0.5s signature ease
     stagger        50ms steps, as data-anim-delay does on the site
     sliding text   translateY(1.4em), 0.8s with a 0.1s delay
     fly            hover lift of 6px (3px for the small variant)
     press          active state sinks to scale(.95)

   Nothing is hidden unless JS is running, so content never disappears, and
   section 30 disables all of it under prefers-reduced-motion.
   ======================================================================== */

.pc-fly { transition: var(--pc-transition); }
.pc-fly:hover { transform: translateY(-6px); }

.pc-fly-sm { transition: var(--pc-transition); }
.pc-fly-sm:hover { transform: translateY(-3px); }

.pc-press { transition: var(--pc-transition); }
.pc-press:active { transform: scale(.95); }

/* --- Block reveal -------------------------------------------------------
   script.js marks the document with .pc-js and observes [data-pc-reveal].
   The hidden state only applies when JS is present.
*/

.pc-js [data-pc-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: transform .5s var(--pc-ease), opacity .5s var(--pc-ease);
  will-change: transform, opacity;
}
.pc-js [data-pc-reveal="left"]  { transform: translateX(-20px); }
.pc-js [data-pc-reveal="right"] { transform: translateX(20px); }
.pc-js [data-pc-reveal="down"]  { transform: translateY(-20px); }
.pc-js [data-pc-reveal="fade"]  { transform: none; }

.pc-js [data-pc-reveal].pc-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Staggered children, matching the site's 50ms rhythm. */
.pc-js [data-pc-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: transform .5s var(--pc-ease), opacity .5s var(--pc-ease);
}
.pc-js [data-pc-stagger].pc-in > * { opacity: 1; transform: none; }
.pc-js [data-pc-stagger].pc-in > *:nth-child(1)    { transition-delay: 0ms; }
.pc-js [data-pc-stagger].pc-in > *:nth-child(2)    { transition-delay: 50ms; }
.pc-js [data-pc-stagger].pc-in > *:nth-child(3)    { transition-delay: 100ms; }
.pc-js [data-pc-stagger].pc-in > *:nth-child(4)    { transition-delay: 150ms; }
.pc-js [data-pc-stagger].pc-in > *:nth-child(5)    { transition-delay: 200ms; }
.pc-js [data-pc-stagger].pc-in > *:nth-child(6)    { transition-delay: 250ms; }
.pc-js [data-pc-stagger].pc-in > *:nth-child(7)    { transition-delay: 300ms; }
.pc-js [data-pc-stagger].pc-in > *:nth-child(n+8)  { transition-delay: 350ms; }

/* --- Sliding hero title -------------------------------------------------
   Each line is clipped and slides up, the way pix-sliding-text does.
*/

.pc-slide-text { display: block; overflow: hidden; }
.pc-slide-text > span { display: block; }

/* Hidden only when JS can reveal it again. */
.pc-js .pc-slide-text > span {
  transform: translateY(1.4em);
  opacity: 0;
  transition: transform .8s .1s var(--pc-ease), opacity .8s .1s var(--pc-ease);
}
.pc-js .pc-slide-text.pc-in > span { transform: none; opacity: 1; }

/* Article images settle in the way the website's images do. */
@keyframes pc-fade-in-img {
  0%   { transform: scale(1.06); filter: brightness(70%); opacity: 0; }
  100% { transform: none; filter: brightness(100%); opacity: 1; }
}
.pc-article-body img.pc-img-in { animation: pc-fade-in-img .8s var(--pc-ease) both; }

/* Underline sweep on inline article links, echoing btn-underline-* */
.pc-article-body p > a:not([class]) {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  transition: background-size .4s var(--pc-ease);
}
.pc-article-body p > a:not([class]):hover { background-size: 100% 2px; }


/* 30 — ACCESSIBILITY, PRINT & MOTION =================================== */

.pc-visually-hidden, .visibility-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pc-skip {
  position: absolute;
  inset-inline-start: 1rem;
  top: -100px;
  z-index: 1000;
  padding: .75rem 1.25rem;
  background: var(--pc-primary);
  color: var(--pc-on-primary);
  border-radius: var(--pc-radius);
  font-weight: 600;
  transition: top .2s var(--pc-ease);
}
.pc-skip:focus { top: 1rem; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .pc-btn:hover, .pc-card-link:hover,
  .pc-fly:hover, .pc-fly-sm:hover, .pc-popular a:hover { transform: none; }
  .pc-js [data-pc-reveal], .pc-js [data-pc-stagger] > *, .pc-js .pc-slide-text > span {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .pc-article-body img.pc-img-in { animation: none; }
}

@media print {
  .pc-topbar, .pc-header, .pc-footer, .pc-subnav,
  .pc-tree-col, .pc-toc-col, .pc-vote, .pc-share,
  .pc-comments, .pc-related { display: none !important; }
  .pc-layout { display: block; }
  .pc-article { max-width: none; }
  body { font-size: 11pt; color: #000; }
  a { color: #000; text-decoration: underline; }
  .pc-article-body a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .pc-article-body pre, .pc-article-body table { break-inside: avoid; }
}


/* A "see all" that follows an index block needs air; it was sitting on it. */
.pc-index + .pc-see-all { display: inline-flex; margin-top: 1rem; }


/* --- Wide article lists --------------------------------------------------
   A list of titles at full container width is a long walk for the eye, so it
   splits into two columns once there is room for them.
------------------------------------------------------------------------ */

@media (min-width: 900px) {
  .pc-article-list--split {
    columns: 2;
    column-gap: 2.5rem;
  }
  .pc-article-list--split > li {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
  }
}

/* Sorting is a different question from filtering, so it does not borrow the
   filter's selected look. */
.pc-filters-sep {
  width: 1px;
  align-self: stretch;
  margin: .25rem .5rem;
  background: var(--pc-border);
}
.pc-filters .pc-sorter {
  background: none;
  border-color: transparent;
  color: var(--pc-gray-600);
}
.pc-filters .pc-sorter:hover { color: var(--pc-heading); }
.pc-filters .pc-sorter.is-active {
  background: none;
  border-color: transparent;
  color: var(--pc-heading);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--pc-heading);
  border-radius: 0;
}


/* The mark-as-solved button drives this checkbox, so only one of the two is
   ever on screen. Without JS the checkbox is the control that works. */
.pc-js .mark-as-solved ~ label input[name="mark_as_solved"],
.pc-js label:has(input[name="mark_as_solved"]) { display: none; }

/* The floating chat button steps aside once the footer is in view, instead of
   sitting on top of the footer links. */
.pc-launcher.is-parked { opacity: 0; visibility: hidden; transform: scale(.8); }


/* --- Section page: onward navigation and the article index ---------------
   A section holds two different things. The subsections are the route
   onwards, so they stay small; the articles are what the page is actually
   for, so they carry the weight.
------------------------------------------------------------------------ */

.pc-onward { margin-bottom: 2rem; }

.pc-onward-label {
  margin: 0 0 .625rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pc-gray-500);
}

.pc-tiles {
  display: grid;
  gap: .75rem;
  /* Three columns, so a tile is always wide enough for a real section name —
     the longest twelve in the knowledge base all fit on one line at this
     width. Two below 1024px, one on a phone. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.pc-tile {
  display: flex;
  align-items: center;
  gap: .75rem;
  height: 100%;
  padding: .75rem .875rem;
  border-radius: var(--pc-radius);
  background: var(--pc-gray-100);
  color: var(--pc-heading);
  transition: background .4s var(--pc-ease), transform .4s var(--pc-ease);
}
.pc-tile:hover {
  background: var(--pc-gray-200);
  color: var(--pc-heading);
  text-decoration: none;
  transform: translateY(-2px);
}

.pc-tile-body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.pc-tile-title { font-weight: 600; font-size: .9375rem; letter-spacing: -.01em; }
.pc-tile-count { font-size: .75rem; color: var(--pc-gray-500); }

.pc-tile-arrow { flex-shrink: 0; color: var(--pc-gray-400); transition: transform .4s var(--pc-ease); }

@media (max-width: 1023px) { .pc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .pc-tiles { grid-template-columns: minmax(0, 1fr); } }
.pc-tile:hover .pc-tile-arrow { transform: translateX(3px); color: var(--pc-heading); }

/* The index itself: one filled block, so a long list reads as a single
   object instead of loose text floating on the page. */
.pc-index {
  border-radius: var(--pc-radius-lg);
  background: var(--pc-gray-100);
  padding: 1.25rem 1.5rem 1.5rem;
}

.pc-index-head h2 {
  margin: 0 0 .75rem;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.02em;
}

.pc-index-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pc-index-list a {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .6875rem .75rem;
  border-radius: 8px;
  color: var(--pc-text);
  transition: background .3s var(--pc-ease), color .3s var(--pc-ease);
}
.pc-index-list a:hover {
  background: #fff;
  color: var(--pc-heading);
  text-decoration: none;
  box-shadow: var(--pc-shadow-sm);
}

.pc-index-icon { flex-shrink: 0; color: var(--pc-gray-400); }
.pc-index-list a:hover .pc-index-icon { color: var(--pc-heading); }
.pc-index-title { flex: 0 1 auto; min-width: 0; }
.pc-index-list .pc-flag { flex-shrink: 0; color: var(--pc-gray-400); }

@media (min-width: 900px) {
  .pc-index-list { columns: 2; column-gap: 1.5rem; }
  .pc-index-list > li { break-inside: avoid; -webkit-column-break-inside: avoid; }
}

@media (max-width: 640px) {
  .pc-index { padding: 1rem; }
  .pc-index-list a { padding: .625rem .5rem; }
}


/* --- Zendesk's own form controls ----------------------------------------
   The comment editor, the attachment drop zone and the select are rendered by
   Zendesk, not by this theme. They are steered through the variables their own
   stylesheets read, so the theme leans on their behaviour instead of fighting
   it — which is what Zendesk asks of a theme.
------------------------------------------------------------------------ */

/* CKEditor 5, which the wysiwyg helper mounts inside #hc-wysiwyg. */
#hc-wysiwyg {
  --ck-border-radius: var(--pc-radius);
  --ck-font-face: var(--pc-font-body);
  --ck-font-size-base: 15px;
  --ck-color-base-border: var(--pc-border);
  --ck-color-base-background: var(--pc-bg);
  --ck-color-base-text: var(--pc-heading);
  --ck-color-toolbar-background: var(--pc-gray-100);
  --ck-color-toolbar-border: var(--pc-border);
  --ck-color-focus-border: var(--pc-gray-500);
  --ck-color-button-default-hover-background: rgba(0, 0, 0, .05);
  --ck-color-button-on-background: rgba(0, 0, 0, .08);
  --ck-color-button-on-color: var(--pc-heading);
  --ck-color-text: var(--pc-text);
  --ck-color-link-default: var(--pc-link);
}

#hc-wysiwyg .ck.ck-editor {
  border-radius: var(--pc-radius);
  background: var(--pc-bg);
}

#hc-wysiwyg .ck.ck-toolbar {
  border: 1px solid var(--pc-border);
  background: rgba(0, 0, 0, .035);   /* a tint over the field, not a fixed grey */
  border-radius: var(--pc-radius) var(--pc-radius) 0 0;
  padding: .25rem .375rem;
}

#hc-wysiwyg .ck.ck-editor__editable {
  background: var(--pc-bg);
  min-height: 9rem;
  padding: .75rem .875rem;
  border: 1px solid var(--pc-border);
  border-top: 0;
  border-radius: 0 0 var(--pc-radius) var(--pc-radius);
  font-family: var(--pc-font-body);
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--pc-heading);
}
/* The ring belongs around the whole field. Put it on the editable alone and it
   sits proud of the toolbar above it. */
#hc-wysiwyg .ck.ck-editor:focus-within {
  border-radius: var(--pc-radius);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .07);
}
#hc-wysiwyg .ck.ck-editor:focus-within .ck.ck-toolbar,
#hc-wysiwyg .ck.ck-editor:focus-within .ck.ck-editor__editable { border-color: var(--pc-gray-500); }
#hc-wysiwyg .ck.ck-editor__editable:focus,
#hc-wysiwyg .ck.ck-editor__editable.ck-focused { outline: none; box-shadow: none; }
#hc-wysiwyg .ck.ck-editor__editable > *:first-child { margin-top: 0; }

/* CKEditor ships its own reset, but a theme should not depend on it having
   loaded: without these the toolbar falls back to browser button chrome. */
#hc-wysiwyg .ck.ck-toolbar__items { display: flex; align-items: center; gap: 1px; flex-wrap: wrap; }

#hc-wysiwyg .ck.ck-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--pc-gray-600);
  cursor: pointer;
  transition: background .2s var(--pc-ease), color .2s var(--pc-ease);
}
#hc-wysiwyg .ck.ck-button:hover { background: rgba(0, 0, 0, .06); color: var(--pc-heading); }
#hc-wysiwyg .ck.ck-button.ck-on { background: rgba(0, 0, 0, .09); color: var(--pc-heading); }
#hc-wysiwyg .ck.ck-button:focus-visible { outline: 2px solid var(--pc-heading); outline-offset: 1px; }
#hc-wysiwyg .ck.ck-button .ck-icon { width: 18px; height: 18px; }

#hc-wysiwyg .ck.ck-toolbar__separator {
  width: 1px;
  height: 18px;
  margin: 0 .375rem;
  background: var(--pc-border);
}

/* The attachment drop zone the upload helper renders. */
.upload-dropzone {
  display: flex;
  align-items: center;
  gap: .625rem;
  flex-wrap: wrap;
  padding: .875rem 1rem;
  border: 1px dashed var(--pc-border);
  border-radius: var(--pc-radius);
  background: var(--pc-gray-100);
  font-size: .875rem;
  color: var(--pc-gray-600);
  transition: border-color .3s var(--pc-ease), background .3s var(--pc-ease);
}
.upload-dropzone:hover,
.upload-dropzone.dragover { border-color: var(--pc-gray-500); background: var(--pc-gray-200); }
.upload-dropzone span { color: var(--pc-gray-600); }
.upload-dropzone a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* A file input styled to match the buttons, wherever one is shown bare. */
input[type="file"] { font-size: .875rem; color: var(--pc-gray-600); max-width: 100%; }
input[type="file"]::file-selector-button {
  margin-inline-end: .75rem;
  padding: .4375rem .875rem;
  font-family: var(--pc-font-heading);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--pc-heading);
  background: var(--pc-bg);
  border: 1px solid var(--pc-border);
  border-radius: 8px;
  cursor: pointer;
  transition: var(--pc-transition);
}
input[type="file"]::file-selector-button:hover { background: var(--pc-gray-100); }

/* Selects keep the theme's chevron rather than the platform's. */
select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%2371717A' stroke-width='1.4' stroke-linecap='round' d='M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  cursor: pointer;
}
[dir="rtl"] select { background-position: left .75rem center; }

/* The comment form's footer row. */
.comment-form-controls {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.comment-form-controls label { margin-bottom: 0; font-weight: 500; }
.comment-attachments { margin-top: .75rem; }

/* Zendesk's AI summary block on a request. */
zd-summary-block {
  display: block;
  margin-bottom: 1.25rem;
  padding: 1rem 1.125rem;
  border-radius: var(--pc-radius);
  background: var(--pc-gradient-soft);
  font-size: .9375rem;
  line-height: 1.65;
}


/* --- Community badges ---------------------------------------------------
   Zendesk splits badges into two kinds. "Titles" are words and belong beside
   the name; "achievements" are pictures and read as a row of awards.
------------------------------------------------------------------------ */

.pc-badge--title {
  background: var(--pc-gradient-soft);
  color: var(--pc-heading);
  border: 1px solid rgba(0, 0, 0, .06);
}

.pc-awards {
  display: flex;
  align-items: center;
  gap: .375rem;
  list-style: none;
  margin: .625rem 0 0;
  padding: 0;
}
.pc-awards img {
  width: 30px;
  height: 30px;
  padding: 6px;                 /* the glyph filled the disc edge to edge */
  box-sizing: border-box;
  object-fit: contain;
  border-radius: 50%;
  background: var(--pc-gray-100);
}
.pc-awards-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--pc-gray-100);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1;
  color: var(--pc-gray-600);
}
.pc-awards-more:hover { background: var(--pc-gray-200); color: var(--pc-heading); text-decoration: none; }

.pc-awards-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  align-items: start;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pc-award {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: none;
  gap: .25rem .875rem;
  padding: 1.125rem;
  border-radius: var(--pc-radius);
  background: var(--pc-gray-100);
}

.pc-award-icon {
  grid-row: span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--pc-bg);
  overflow: hidden;
}
.pc-award-icon img { width: 26px; height: 26px; object-fit: contain; }

.pc-award-name {
  margin: 0;
  font-family: var(--pc-font-heading);
  font-weight: 600;
  font-size: .9375rem;
  letter-spacing: -.01em;
  color: var(--pc-heading);
}
.pc-award-desc { margin: .125rem 0 0; font-size: .8125rem; color: var(--pc-gray-600); }
.pc-award:not(:has(.pc-award-icon)) { grid-template-columns: 1fr; }
.pc-award:not(:has(.pc-award-icon)) .pc-award-date { grid-column: 1; }

.pc-award-date {
  grid-column: 2;
  margin: .5rem 0 0;
  font-size: .75rem;
  color: var(--pc-gray-500);
}


/* --- Search facets -------------------------------------------------------
   Three filter groups stacked with no air between them read as one long list,
   so each group gets a rule and room of its own.
------------------------------------------------------------------------ */

#pc-search-filters .pc-filter-list + .pc-tree-heading {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--pc-border);
}
#pc-search-filters .pc-tree-heading { margin-bottom: .5rem; }


/* Marks out where a Zendesk-rendered block lands. Preview only — nothing in
   the theme emits this class, so it never reaches a published page. */
.pc-preview-slot {
  padding: 1.25rem 1.375rem;
  border: 1px dashed var(--pc-border);
  border-radius: var(--pc-radius-lg);
  background: var(--pc-gray-50, var(--pc-gray-100));
  font-size: .875rem;
  color: var(--pc-gray-600);
}
.pc-preview-slot p { margin: .5rem 0 0; max-width: 60ch; }
.pc-preview-slot-tag {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .75rem;
  color: var(--pc-gray-500);
}


/* Preview-only stand-in for the AI answer block. The real one is Zendesk's and
   lives in a closed shadow root; this exists so the search page can be judged
   with something in that slot. Nothing in the theme emits .pc-genai. */
.pc-genai {
  padding: 1.25rem 1.375rem;
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius-lg);
}
.pc-genai-head {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0 0 .75rem;
  font-family: var(--pc-font-heading);
  font-weight: 600;
  font-size: .9375rem;
  color: var(--pc-heading);
}
.pc-genai-body { margin: 0; }
.pc-genai-label { margin: 1.125rem 0 .5rem; font-size: .8125rem; color: var(--pc-gray-500); }
.pc-genai-sources { list-style: none; margin: 0; padding: 0; display: grid; gap: .3125rem; }
.pc-genai-sources a { font-size: .875rem; text-decoration: underline; text-underline-offset: 2px; }
.pc-genai-feedback { display: flex; gap: .5rem; margin-top: 1.125rem; color: var(--pc-gray-400); }


/* --- 33 · WHAT THE EDITOR EMITS THAT WAS NOT YET COVERED -----------------
   Checked against the 177 live articles plus Zendesk's own list of supported
   HTML, rather than against assumptions.
------------------------------------------------------------------------ */

/* The new editor's code block. Older articles emit a bare <pre>, which is
   already styled; this matches the two. */
.pc-article-body pre.wysiwyg-code-block { margin: 1.5em 0; }
.pc-article-body pre.wysiwyg-code-block > code { display: block; white-space: pre; }

/* The new editor wraps tables in a figure. The theme's own scroll container
   would double up on it, so the figure becomes the scroller instead. */
.pc-article-body figure.wysiwyg-table {
  margin: 1.75em 0;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.pc-article-body figure.wysiwyg-table > table { margin: 0; min-width: 34rem; }

/* Type-size classes from the toolbar. Relative, so they follow the reading
   size the visitor picked in the theme settings. */
.pc-article-body .wysiwyg-font-size-small { font-size: .875em; }
.pc-article-body .wysiwyg-font-size-medium { font-size: 1em; }
.pc-article-body .wysiwyg-font-size-large { font-size: 1.25em; }
.pc-article-body .wysiwyg-font-size-x-large { font-size: 1.5em; }
.pc-article-body .wysiwyg-underline { text-decoration: underline; text-underline-offset: .15em; }

/* Zendesk's notice when an article has no translation in the visitor's
   language — 73 of the articles in this knowledge base carry one. */
.pc-article-body .guide-fallback-notice {
  display: flex;
  gap: .625rem;
  margin: 0 0 1.75em;
  padding: .875rem 1.125rem;
  border-radius: var(--pc-radius);
  background: var(--pc-gray-100);
  font-size: .875rem;
  color: var(--pc-gray-600);
}
.pc-article-body .guide-fallback-notice a { color: var(--pc-heading); font-weight: 600; }
.pc-article-body .guide-fallback-placeholder { display: none; }

/* Images carried over from the old Confluence import. */
.pc-article-body .confluence-embedded-image,
.pc-article-body .confluence-embedded-file-wrapper img { max-width: 100%; height: auto; border-radius: var(--pc-radius); }
.pc-article-body .confluence-thumbnail { cursor: zoom-in; }


/* --- 34 · VIDEO AND EMBEDS ----------------------------------------------
   Zendesk's editor can insert YouTube, Vimeo, Wistia, Loom, Synthesia,
   JWPlayer, Brightcove, Vidyard and Figma. They all arrive as a bare iframe,
   so script.js wraps each one and records which provider it came from.
------------------------------------------------------------------------ */

.pc-embed {
  position: relative;
  margin: 1.75em 0;
  width: 100%;
  border-radius: var(--pc-radius-lg);
  overflow: hidden;
  background: var(--pc-gray-900);
  box-shadow: var(--pc-shadow-sm);
}
.pc-embed > iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Video players are 16:9. */
.pc-embed[data-embed="youtube"],
.pc-embed[data-embed="vimeo"],
.pc-embed[data-embed="wistia"],
.pc-embed[data-embed="loom"],
.pc-embed[data-embed="synthesia"],
.pc-embed[data-embed="jwplayer"],
.pc-embed[data-embed="brightcove"],
.pc-embed[data-embed="vidyard"] { aspect-ratio: 16 / 9; }

/* A design file is not a video, and neither is a spreadsheet: those keep the
   height the author set, with a floor so they are never a sliver. */
.pc-embed[data-embed="figma"] { aspect-ratio: 4 / 3; }
.pc-embed[data-embed="other"] {
  height: var(--pc-embed-h, 30rem);
  min-height: 18rem;
  background: var(--pc-gray-100);
}

/* Without JavaScript no wrapper is added, so a bare iframe still has to behave. */
.pc-article-body iframe:not(.pc-embed > iframe) {
  max-width: 100%;
  border: 0;
  border-radius: var(--pc-radius-lg);
}

.pc-article-body .pc-video {
  display: block;
  width: 100%;
  margin: 1.75em 0;
  border-radius: var(--pc-radius-lg);
  background: #000;
}


/* --- 35 · CINEMA ARTICLE TEMPLATE ---------------------------------------
   templates/article_pages/cinema.hbs, picked per article in Guide for pieces
   that are really a video. The theme's header steps aside entirely, the player
   takes the screen, and everything written about it waits below the fold.
   The dark palette is scoped through :has(), so the rest of the help center
   never leaves light mode.
------------------------------------------------------------------------ */

body:has(.pc-cinema) {
  --pc-bg: #08080A;
  --pc-surface: #101014;
  --pc-heading: #FFFFFF;
  --pc-text: rgba(255, 255, 255, .70);
  --pc-border: rgba(255, 255, 255, .10);
  --pc-link: #FFFFFF;
  --pc-link-hover: var(--pc-accent);
  --pc-link-visited: rgba(255, 255, 255, .58);

  --pc-gray-50:  #101014;
  --pc-gray-100: #141418;
  --pc-gray-200: #1C1C21;
  --pc-gray-300: #26262C;
  --pc-gray-400: #6E6E76;
  --pc-gray-500: #8A8A93;
  --pc-gray-600: #A8A8B0;
  --pc-gray-700: #C9C9CF;
  --pc-gray-800: #E4E4E7;
  --pc-gray-900: #FFFFFF;

  background: var(--pc-bg);
  color: var(--pc-text);
}

/* The whole site header goes. Nothing should sit above the picture. */
body:has(.pc-cinema) .pc-header-wrap,
body:has(.pc-cinema) .pc-header-spacer,
body:has(.pc-cinema) .pc-launcher { display: none; }

body:has(.pc-cinema) .pc-footer {
  background: var(--pc-bg);
  border-top: 1px solid var(--pc-border);
}
body:has(.pc-cinema) .pc-footer-links { display: none; }
body:has(.pc-cinema) .pc-footer-tagline { color: var(--pc-gray-500); }
body:has(.pc-cinema) .pc-footer-logo-light { display: none; }
.pc-footer-logo-dark { display: none; }
body:has(.pc-cinema) .pc-footer-logo-dark { display: block; }

.pc-cinema { padding-bottom: 4rem; }

/* --- the bar ------------------------------------------------------------ */

.pc-cinema-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 4.5rem;
  background: linear-gradient(180deg, rgba(8, 8, 10, .92), rgba(8, 8, 10, 0));
  transition: opacity .45s var(--pc-ease);
}
/* Fades away once the pointer settles, the way player chrome does. Any move,
   key or focus brings it straight back — see initCinemaChrome. */
.pc-cinema-bar.is-idle { opacity: 0; }
.pc-cinema-bar:focus-within { opacity: 1; }

.pc-cinema-back {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .9375rem .5rem .6875rem;
  border-radius: var(--pc-radius-pill);
  background: rgba(255, 255, 255, .09);
  color: #fff;
  font-size: .875rem;
  font-weight: 600;
  backdrop-filter: blur(12px);
  transition: background .3s var(--pc-ease), transform .3s var(--pc-ease);
}
.pc-cinema-back:hover {
  background: rgba(255, 255, 255, .18);
  color: #fff;
  text-decoration: none;
  transform: translateX(-2px);
}
.pc-cinema-back svg { transition: transform .3s var(--pc-ease); }
.pc-cinema-back:hover svg { transform: translateX(-2px); }

.pc-cinema-bar-right { display: flex; align-items: center; gap: .875rem; }
.pc-cinema-logo img { height: 26px; width: auto; opacity: .9; }
/* Only if no white asset is uploaded: better than nothing, but the
   Brand setting is the right place to fix it. */
.pc-cinema-logo .pc-logo-needs-invert { filter: invert(1) brightness(1.7); }
.pc-cinema-logo:hover img { opacity: 1; }

/* --- the stage ---------------------------------------------------------- */

.pc-cinema-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--pc-gutter);
  margin-top: -4.5rem;           /* the bar floats over the picture */
  padding-top: 4.5rem;
}
/* No video in the article: no stage. */
.pc-cinema-stage:not(:has(.pc-embed, .pc-video)) { display: none; }

.pc-cinema-stage .pc-embed,
.pc-cinema-stage .pc-video {
  position: relative;
  z-index: 1;
  margin: 0;
  width: min(100%, calc((100svh - 9rem) * 16 / 9));
  aspect-ratio: 16 / 9;
  border-radius: var(--pc-radius-lg);
  background: #000;
  box-shadow: 0 40px 120px rgba(0, 0, 0, .7);
}

/* A bloom behind the player rather than a hard edge against the black. */
.pc-cinema-glow {
  position: absolute;
  z-index: 0;
  inset: 4.5rem var(--pc-gutter) 0;
  background: var(--pc-gradient);
  filter: blur(90px);
  opacity: .3;
  pointer-events: none;
}
@media (max-width: 900px) { .pc-cinema-glow { inset: 3.75rem var(--pc-gutter) 0; opacity: .22; } }
@media (prefers-reduced-motion: reduce) { .pc-cinema-bar { transition: none; } }

/* --- what is written about it ------------------------------------------- */

.pc-cinema-bar,
.pc-cinema-meta,
.pc-cinema-body,
.pc-cinema-files,
.pc-cinema-vote {
  width: 100%;
  max-width: var(--pc-container);
  margin-inline: auto;
  padding-inline: var(--pc-gutter);
}

.pc-cinema-meta { margin-top: 2.5rem; }
.pc-cinema-meta h1 {
  margin: 0;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.375rem);
  color: #fff;
}
.pc-cinema-sub {
  margin: .625rem 0 0;
  font-size: .875rem;
  color: var(--pc-gray-500);
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.pc-cinema-sub a { color: var(--pc-gray-600); }
.pc-cinema-sub a:hover { color: #fff; }

.pc-cinema-body { margin-top: 2rem; }
.pc-cinema-body > * { max-width: var(--pc-reading); }

.pc-cinema-files,
.pc-cinema-vote { margin-top: 2rem; }
.pc-cinema-files h2 { font-size: .9375rem; margin-bottom: .625rem; color: #fff; }
.pc-cinema-files ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.pc-cinema-files a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .875rem;
  border-radius: var(--pc-radius);
  background: rgba(255, 255, 255, .07);
  color: #fff;
  font-size: .875rem;
}
.pc-cinema-files a:hover { background: rgba(255, 255, 255, .14); text-decoration: none; }

.pc-cinema-vote {
  padding: 1rem 1.25rem;
  background: rgba(255, 255, 255, .05);
  border-radius: var(--pc-radius);
}
.pc-cinema-vote .pc-vote-question { color: #fff; }
body:has(.pc-cinema) .article-vote-up,
body:has(.pc-cinema) .article-vote-down {
  background: rgba(255, 255, 255, .08);
  border-color: transparent;
  color: #fff;
}
body:has(.pc-cinema) .article-vote-up:hover,
body:has(.pc-cinema) .article-vote-down:hover { background: rgba(255, 255, 255, .16); color: #fff; }

@media (max-width: 900px) {
  .pc-cinema-stage .pc-embed,
  .pc-cinema-stage .pc-video { width: 100%; }
  .pc-cinema-bar { height: 3.75rem; }
  .pc-cinema-stage { margin-top: -3.75rem; padding-top: 3.75rem; }
}


/* --- 36 · ICON SET -------------------------------------------------------
   The website draws its icons from the pixfort set: viewBox 2 2 20 20, three
   styles (Line, Duotone, Solid), colour and stroke fed by two custom
   properties. Declaring those here lets the markup be pasted from the design
   unchanged, so the icons cannot drift from it.
------------------------------------------------------------------------ */

.pc-ico {
  --pf-icon-color: currentColor;
  --pf-icon-stroke-width: 1.75;
  display: inline-block;
  vertical-align: middle;
  flex: none;
}

/* The status icon carries its own colour from the theme settings. */
.pc-ico.pc-status-ico { --pf-icon-color: #1F7A4D; }

/* The status icon is the one place the colour is not inherited. */



/* Placeholder rows for the lists Zendesk renders with its own bundles, so
   those pages are never a blank rectangle while the script loads. */
.pc-skeleton { display: grid; gap: .5rem; }
.pc-skeleton-row {
  height: 3.5rem;
  border-radius: var(--pc-radius);
  background: linear-gradient(90deg, var(--pc-gray-100) 25%, var(--pc-gray-50) 37%, var(--pc-gray-100) 63%);
  background-size: 400% 100%;
  animation: pc-shimmer 1.4s ease infinite;
}
@keyframes pc-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .pc-skeleton-row { animation: none; } }


/* Folding a card away as it leaves. The perspective is set per card from
   script.js because it equals the card's own width, exactly as on the
   website; the turn and the fade are applied to the card inside. */
.pc-carousel-track > li > * {
  transform-origin: center center;
  transition: transform .35s var(--pc-ease), opacity .35s var(--pc-ease);
}
.pc-carousel-track.is-dragging > li > * { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .pc-carousel-track > li { transform: none; transition: none; }
}


/* --- Community post: details beside the thread ---------------------------
   A post left one narrow column of text with half the grid empty beside it.
   The panel carries what the reader actually wants to know about the post,
   the way the request page does, and gives the page a second column.
------------------------------------------------------------------------ */

@media (min-width: 1024px) {
  .pc-layout--post { grid-template-columns: minmax(0, 1fr) 300px; }
}

/* Wider than a knowledge article: a post title carries a status badge on the
   same line, and the comments below need the room too. */
.pc-layout--post .pc-article { max-width: 52rem; }
.pc-layout--post .pc-post-aside { align-self: start; }

.pc-post-aside {
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius-lg);
  padding: 1.25rem;
  font-size: .875rem;
}
.pc-post-aside h2 {
  font-size: .9375rem;
  font-weight: 600;
  margin: 0 0 1rem;
}
.pc-post-aside dl { margin: 0; }
.pc-post-aside dt {
  font-family: var(--pc-font-heading);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--pc-gray-500);
  margin-bottom: .1875rem;
}
.pc-post-aside dd { margin: 0 0 1rem; color: var(--pc-gray-700); }
.pc-post-aside dd a { color: var(--pc-heading); font-weight: 600; }
.pc-post-aside-user { display: flex; align-items: center; gap: .5rem; }
.pc-post-aside-user img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.pc-post-aside .pc-btn { margin-top: .25rem; }


/* Title badges are words, so they read as a row of names with what they mean
   beside them — not as picture cards with an empty slot where an icon is not. */
.pc-award-titles {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: .5rem;
}
.pc-award-titles li { display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; }
.pc-award-titles-desc { font-size: .875rem; color: var(--pc-gray-600); }


/* --- 37 · EMBEDDED CONVERSATION -----------------------------------------
   Zendesk's messenger rendered into the contact page instead of floating over
   it. The container has to carry its own height: the widget fills whatever it
   is given, so a box with no height renders as a sliver.
------------------------------------------------------------------------ */

.pc-chat-panel {
  display: none;
  /* The conversation and its history need the whole rail. */
  max-width: none;
}
/* Same reason as the form panel above: no retained transform. */
.pc-chat-panel.is-open { display: block; animation: pc-form-in .5s var(--pc-ease); }
.pc-chat-panel[hidden] { display: none; }

.pc-chat-embed {
  height: clamp(28rem, 60vh, 40rem);
  border-radius: var(--pc-radius-lg);
  overflow: hidden;
  background: var(--pc-gray-100);
  border: 1px solid var(--pc-border);
}

/* The floating button has no business on a page that already holds the
   conversation, and none at all when the messenger failed to load. */
.pc-chat-panel ~ * .pc-launcher,
.pc-no-messenger .pc-launcher { display: none; }

/* Rating and Marketplace link, in the section's own header. */
.pc-band-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .375rem;
  margin: .375rem 0 0;
  font-size: .8125rem;
  color: var(--pc-gray-600);
}
.pc-band-meta[hidden] { display: none; }
.pc-band-meta .pc-star { color: rgba(0, 0, 0, .18); flex: none; }
.pc-band-meta .pc-star.is-on { color: #F5A623; }
.pc-band-meta > span { margin-inline-end: .5rem; }
.pc-band-meta a {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 600;
  color: var(--pc-heading);
}
.pc-band-meta a:hover { text-decoration: none; opacity: .7; }

/* Who this ticket will come from, shown under the form chooser. */
.pc-requester {
  display: flex;
  align-items: center;
  gap: .75rem;
  /* 16px above, matching the gap Zendesk puts between its own fields. Nothing
     below: the form's own gap element follows this card. */
  margin: 1rem 0 0;
  padding: .75rem 1rem;
  border-radius: var(--pc-radius);
  background: var(--pc-surface);
}
.pc-requester[hidden] { display: none; }
.pc-requester-avatar {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
}
.pc-requester-body { display: flex; flex-direction: column; line-height: 1.35; }
.pc-requester-label { font-size: .75rem; color: var(--pc-gray-500); }
.pc-requester-name {
  font-family: var(--pc-font-heading);
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: -.03em;
  color: var(--pc-heading);
}

/* The conversation runs inside this box: Zendesk's embedded mode fills the
   element it is given, so the box only has to set the size. */
.pc-chat-dock {
  position: relative;
  height: min(620px, 70dvh);
  border-radius: var(--pc-radius-lg);
  background: var(--pc-surface);
  overflow: hidden;
}
.pc-chat-dock.is-live @media (max-width: 767px) {
  .pc-chat-dock { height: min(560px, 68dvh); }
}

.pc-chat-dock-hint { display: none; }
.pc-chat-dock-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pc-gray-500);
  font-size: .875rem;
}
/* With the conversation in the page, a floating button to the same thing
   would be a second way in on top of it. */
.pc-chat-embedded .pc-launcher { display: none; }

/* The panel invites; the widget itself takes it from there. */
.pc-chat-invite {
  padding: 2rem 1.5rem;
  border-radius: var(--pc-radius-lg);
  background: var(--pc-surface);
  text-align: center;
}
.pc-chat-invite-text { margin: 0 auto 1.25rem; max-width: 34rem; color: var(--pc-gray-600); }

/* Without a messaging key there is no chat to offer. */
.pc-no-messenger [data-pc-channel="chat"] { display: none; }

/* Preview only: marks out the conversation's place. Zendesk paints the real
   one; nothing in the theme emits this class. */
.pc-chat-embed:empty::after {
  content: attr(data-preview);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 2rem;
  text-align: center;
  font-size: .875rem;
  color: var(--pc-gray-500);
}


/* --- 38 · CONTACT: TABS JOINED TO THEIR PANEL ---------------------------
   The earlier version put four cards in a row and a loose panel underneath,
   which read as four equal choices and left the panel floating. Two of those
   four only opened a mail client or a dialler. So: the two routes that open
   something are tabs attached to one panel, and the other two are a line of
   links below it.
------------------------------------------------------------------------ */

/* The page carries a conversation with its history beside it, so it takes the
   full content rail rather than the reading column it started as. The ticket
   form keeps its own measure — a form that wide is harder to read, not
   easier. */
.pc-contact { max-width: min(76rem, 100%); }

/* Earlier conversations to the left, the one being read to the right —
   Zendesk's embedded mode hands each half to its own element. */
.pc-chat-split {
  display: grid;
  /* 384px for the history, as in the reference implementation. */
  grid-template-columns: 384px minmax(0, 1fr);
  gap: 1rem;
  height: min(620px, 70dvh);
}
/* The widget drops a container of its own in here; as a third grid cell it
   landed on top of the history. Only the two columns belong in the grid. */
.pc-chat-split > :not(#pc-chat-list):not(#pc-chat-embed) { display: none; }
.pc-chat-list,
.pc-chat-log {
  position: relative;
  border-radius: var(--pc-radius-lg);
  background: var(--pc-surface);
  overflow: hidden;
}
@media (max-width: 899px) {
  /* No room for two columns; the widget keeps its own back navigation. */
  .pc-chat-split { grid-template-columns: 1fr; height: min(560px, 68dvh); }
  .pc-chat-list { display: none; }
}

/* What this visitor's organisations are, from their own account. */
.pc-orgs { margin-top: 2rem; }
.pc-orgs-title {
  font-family: var(--pc-font-heading);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -.03em;
  color: var(--pc-heading);
  margin: 0 0 1rem;
}
.pc-orgs-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}
.pc-org {
  padding: 1.25rem 1.5rem;
  border-radius: var(--pc-radius-lg);
  background: var(--pc-surface);
}
.pc-org h3 {
  font-family: var(--pc-font-heading);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -.03em;
  color: var(--pc-heading);
  margin: 0 0 .75rem;
}
.pc-org dl { display: grid; grid-template-columns: auto 1fr; gap: .375rem 1rem; margin: 0; }
.pc-org dt { font-size: .8125rem; color: var(--pc-gray-500); }
.pc-org dd {
  margin: 0;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--pc-heading);
  font-variant-numeric: tabular-nums;
}

.pc-contact-tabs {
  display: grid;
  /* Equal columns, as many as there are channels, rather than auto-fit: with
     only two of them auto-fit left both at their minimum width, huddled
     against the left edge. Chat is hidden until the messenger answers, so the
     count is read from what is actually on screen. */
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  padding: .5rem;
  border: 1px solid var(--pc-border);
  border-bottom: 0;
  border-radius: var(--pc-radius-lg) var(--pc-radius-lg) 0 0;
  background: var(--pc-gray-100);
}

@media (max-width: 599px) {
  .pc-contact-tabs { grid-template-columns: 1fr; }
}

.pc-contact-tab {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .875rem 1rem;
  text-align: start;
  border: 0;
  border-radius: var(--pc-radius);
  background: transparent;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
  transition: background .3s var(--pc-ease), box-shadow .3s var(--pc-ease);
}
.pc-contact-tab:hover { background: rgba(255, 255, 255, .6); }
.pc-contact-tab[aria-selected="true"] {
  background: var(--pc-bg);
  box-shadow: var(--pc-shadow-sm);
}
.pc-contact-tab[hidden] { display: none; }

.pc-contact-tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 11px;
  background: var(--pc-gray-200);
  color: var(--pc-heading);
  transition: background .3s var(--pc-ease), color .3s var(--pc-ease);
}
.pc-contact-tab[aria-selected="true"] .pc-contact-tab-icon {
  background: var(--pc-heading);
  color: var(--pc-bg);
}

.pc-contact-tab-body { display: flex; flex-direction: column; min-width: 0; }
.pc-contact-tab-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--pc-font-heading);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--pc-heading);
}
.pc-contact-tab-desc { margin-top: .125rem; font-size: .8125rem; color: var(--pc-gray-600); }

.pc-channel-badge {
  font-family: var(--pc-font-body);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: .125rem .5rem;
  border-radius: var(--pc-radius-pill);
  background: var(--pc-gradient);
  color: #fff;
}

/* One box: the strip above and the panel below share a border. */
.pc-contact-panels {
  border: 1px solid var(--pc-border);
  border-radius: 0 0 var(--pc-radius-lg) var(--pc-radius-lg);
  padding: 1rem;
  background: var(--pc-bg);
}
/* The conversation brings its own two surfaces, so it needs breathing room
   rather than a second frame of padding — but not none: at zero the columns
   butt straight against the tab bar. */

.pc-contact-alt {
  display: flex;
  align-items: center;
  gap: .625rem;
  flex-wrap: wrap;
  margin: 1.25rem 0 0;
  font-size: .875rem;
  color: var(--pc-gray-600);
}
.pc-contact-alt a {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  color: var(--pc-heading);
  font-weight: 600;
}

@media (max-width: 560px) {
  .pc-contact-tabs { grid-template-columns: 1fr; }
  .pc-contact-panels { padding: .75rem; }
}


/* --- 39 · PHONE AVAILABILITY --------------------------------------------
   Says whether the line is answered right now, so nobody rings into a lunch
   break without knowing. Computed in the office's own time zone.
------------------------------------------------------------------------ */

.pc-availability {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  font-size: .8125rem;
  color: var(--pc-gray-600);
}
.pc-availability[hidden] { display: none; }

.pc-availability-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--pc-gray-400);
}
.pc-availability-dot[data-state="open"]   { background: var(--pc-green); }
.pc-availability-dot[data-state="lunch"]  { background: var(--pc-amber); }
.pc-availability-dot[data-state="closed"] { background: var(--pc-gray-400); }

.pc-availability[data-state="open"] .pc-availability-text { color: var(--pc-green); font-weight: 600; }
.pc-availability[data-state="lunch"] .pc-availability-text { color: var(--pc-amber); font-weight: 600; }

/* The number is the one thing on this page someone may be hunting for, so it
   gets its own panel rather than a line of small print under the form. */
.pc-contact-phone {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius-lg);
  background: var(--pc-surface);
}
.pc-contact-phone-label {
  margin: 0;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--pc-gray-500);
}
.pc-contact-phone-number { margin: .375rem 0 0; }
.pc-contact-phone-number a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--pc-font-heading);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -.03em;
  color: var(--pc-heading);
}
.pc-contact-phone-number a:hover { text-decoration: none; opacity: .7; }
.pc-contact-phone-number .pc-ico { width: 18px; height: 18px; }
.pc-contact-phone .pc-availability { margin-top: .5rem; }
.pc-contact-note {
  margin: .25rem 0 0;
  font-size: .8125rem;
  color: var(--pc-gray-500);
  max-width: 46ch;
}
.pc-contact-emergency { color: var(--pc-gray-600); }
.pc-contact-emergency[hidden] { display: none; }


/* --- 40 · CLOSING BLOCK ---------------------------------------------------
   The old version said "Still stuck?" over two buttons, which puts the failure
   on the reader. This one offers the conversation instead. The phone and its
   live status sit on the contact page, not here.
------------------------------------------------------------------------ */

.pc-reach {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--pc-radius-lg);
  background: var(--pc-gradient-soft);
}

.pc-reach-body { min-width: 0; }
.pc-reach-body h2 {
  margin: 0;
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
}
.pc-reach-body p {
  margin: .625rem 0 0;
  max-width: 52ch;
  color: var(--pc-gray-700);
}

.pc-reach-actions {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

/* The phone sits apart, with its status beside it — that is the part that
   actually answers the question "can I reach someone right now". */
.pc-reach-phone {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  gap: .375rem;
  padding: 1.125rem 1.25rem;
  border-radius: var(--pc-radius);
  background: rgba(255, 255, 255, .7);
}
.pc-reach-phone > a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--pc-font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--pc-heading);
}
.pc-reach-phone .pc-contact-note { max-width: 30ch; }

@media (max-width: 700px) {
  .pc-reach { flex-direction: column; align-items: stretch; }
  .pc-reach-phone { align-items: flex-start; }
}

/* 41 — ZENDESK GARDEN =====================================================
   The request list, approvals and the service catalog are React bundles
   Zendesk mounts into the page. Their class names are hashed per build, but
   every Garden component carries a stable `data-garden-id`, so that is what
   this section reaches for. Anything not listed keeps Garden's own styling.
------------------------------------------------------------------------- */

.pc-garden { font-family: var(--pc-font-body); }

/* Tabs read as the website's nav pills rather than Garden's underline — the
   underlined tab row was one of the clearest Copenhagen tells left. */
.pc-garden [data-garden-id="tabs.tablist"][data-garden-version] {
  border-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 1.5rem;
}
.pc-garden [data-garden-id="tabs.tab"][data-garden-version] {
  font-family: var(--pc-font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.16px;
  color: var(--pc-gray-600);
  padding: 8px 14px;
  margin: 0;
  border: 0;
  border-radius: var(--pc-radius);
  box-shadow: none;
  background: none;
  transition: var(--pc-transition);
}
.pc-garden [data-garden-id="tabs.tab"][data-garden-version]:hover {
  background: rgba(0, 0, 0, .05);
  color: var(--pc-heading);
}
.pc-garden [data-garden-id="tabs.tab"][data-garden-version][aria-selected="true"] {
  color: var(--pc-heading);
  background: rgba(0, 0, 0, .1);
  box-shadow: none;
}

/* Search field and its Filter button */
.pc-garden [data-garden-id="forms.faux_input"][data-garden-version],
.pc-garden [data-garden-id="forms.input"][data-garden-version] {
  border-radius: var(--pc-radius);
  border-color: var(--pc-border);
  min-height: var(--pc-btn-h);
  font-family: var(--pc-font-body);
  font-size: .9375rem;
}
.pc-garden [data-garden-id="forms.faux_input"][data-garden-version]:focus-within {
  border-color: var(--pc-gray-500);
  box-shadow: none;
}
.pc-garden [data-garden-id="forms.media_figure"][data-garden-version] { color: var(--pc-gray-500); }

.pc-garden [data-garden-id="buttons.button"][data-garden-version] {
  min-height: var(--pc-btn-h);
  padding: 9px 18px;
  border: 0;
  border-radius: var(--pc-radius);
  background: rgba(0, 0, 0, .1);
  color: var(--pc-heading);
  font-family: var(--pc-font-heading);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.03em;
  box-shadow: none;
}
.pc-garden [data-garden-id="buttons.button"][data-garden-version]:hover { background: rgba(0, 0, 0, .16); color: var(--pc-heading); }

/* One field appearance for every control Zendesk renders. Left alone, a
   ticket form mixes three borders, two radii and two type sizes: text inputs
   picked up this theme's, while textareas and comboboxes kept Garden's darker
   grey and its 4px corner. */
.pc-garden [data-garden-id="forms.input"][data-garden-version],
.pc-garden [data-garden-id="forms.textarea"][data-garden-version],
.pc-garden [data-garden-id="forms.faux_input"][data-garden-version],
.pc-garden [data-garden-id="dropdowns.combobox.trigger"][data-garden-version] {
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius);
  background: var(--pc-bg);
  font-family: var(--pc-font-body);
  font-size: 15px;
  color: var(--pc-heading);
  box-shadow: none;
}
.pc-garden [data-garden-id="forms.input"][data-garden-version],
.pc-garden [data-garden-id="forms.faux_input"][data-garden-version],
.pc-garden [data-garden-id="dropdowns.combobox.trigger"][data-garden-version] {
  min-height: var(--pc-btn-h);
}
.pc-garden [data-garden-id="forms.textarea"][data-garden-version] { padding: .625rem .875rem; }
/* Garden hides a size-mirror div next to the input, carrying min-height 43px.
   That stacks on top of the field's own border and leaves it 2px taller than
   every input beside it. The field carries the height, not what is in it. */
.pc-garden [data-garden-id="forms.faux_input"][data-garden-version] { box-sizing: border-box; }
.pc-garden [data-garden-id="forms.faux_input"][data-garden-version] div { min-height: 0; }

.pc-garden [data-garden-id="forms.input"][data-garden-version]:focus,
.pc-garden [data-garden-id="forms.textarea"][data-garden-version]:focus,
.pc-garden [data-garden-id="forms.faux_input"][data-garden-version]:focus-within,
.pc-garden [data-garden-id="dropdowns.combobox.trigger"][data-garden-version]:focus-within {
  border-color: var(--pc-heading);
  box-shadow: none;
  outline: none;
}

/* The rich text editor is one field: the box goes on the outer container and
   the parts inside only keep the seam between them. CKEditor takes its colours
   from its own custom properties, which is a far steadier hook than fighting
   its stylesheet rule by rule. No overflow:hidden here — that would clip the
   toolbar's own dropdowns. */
.pc-garden .ck.ck-editor {
  --ck-border-radius: var(--pc-radius);
  --ck-color-base-border: var(--pc-border);
  --ck-color-toolbar-border: var(--pc-border);
  --ck-color-toolbar-background: var(--pc-gray-50);
  --ck-color-base-background: var(--pc-bg);
  /* Its toolbar menus are floating layers too, and would otherwise open
     underneath the header just as Garden's did. */
  --ck-z-default: 6150;
  --ck-z-modal: 6151;
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius);
}
.pc-garden .ck.ck-editor .ck.ck-toolbar {
  border: 0;
  border-bottom: 1px solid var(--pc-border);
  border-radius: var(--pc-radius) var(--pc-radius) 0 0;
  background: var(--pc-gray-50);
}
.pc-garden .ck.ck-editor .ck.ck-editor__editable {
  border: 0;
  border-radius: 0 0 var(--pc-radius) var(--pc-radius);
}
.pc-garden .ck.ck-editor:focus-within { border-color: var(--pc-heading); }

/* On a list page the search is a filter, not the widest box on the screen:
   flat and quiet, and only there — on a ticket form it must look like every
   other field. */
.pc-garden--list div:has(> form) { width: auto; flex: none; }
.pc-garden--list form { width: 260px; max-width: 100%; }
.pc-garden--list [data-garden-id="forms.faux_input"][data-garden-version] {
  font-size: .875rem;
  background: var(--pc-gray-50);
  border-color: transparent;
}
.pc-garden--list [data-garden-id="forms.faux_input"][data-garden-version]:focus-within {
  background: var(--pc-bg);
  border-color: var(--pc-border);
}
/* On a phone the list is the whole page, so the filter takes the full width
   rather than sitting as a stub in a column of its own. */
@media (max-width: 767px) {
  .pc-garden--list form,
  .pc-garden--list div:has(> form) { width: 100%; }
}
.pc-garden [data-garden-id="forms.field"][data-garden-version] { margin: 0; }

/* Garden's faux_input IS the field; the real input inside it only carries
   the text. Our own input styling was drawing a second box in there — the
   box-in-a-box that showed up on the request list and the service catalog. */
.pc-garden [data-garden-id="forms.faux_input"][data-garden-version] input,
.pc-garden [data-garden-id="forms.faux_input"][data-garden-version] textarea,
.pc-garden [data-garden-id="forms.media_input"][data-garden-version] {
  font: inherit;
  border: 0;
  background: none;
  border-radius: 0;
  padding: 0;
  /* Garden gives the inner input its own height, which then sits on top of
     the faux input's border and makes the field 2px taller than its
     neighbours. The faux input carries the height; this only carries text. */
  height: auto;
  min-height: 0;
  box-shadow: none;
  color: inherit;
}
.pc-garden [data-garden-id="forms.faux_input"][data-garden-version] {
  padding: 0 .875rem;
  align-items: center;
}

/* The count line above the table */
.pc-garden [data-garden-id="typography.font"][data-garden-version] { color: var(--pc-gray-600); font-size: .875rem; }

/* The table itself: hairlines rather than Garden's boxes. */
.pc-garden [data-garden-id="tables.table"][data-garden-version] { border-collapse: collapse; }
.pc-garden [data-garden-id="tables.header_row"][data-garden-version] { border-bottom: 1px solid var(--pc-border); }
.pc-garden [data-garden-id="tables.header_cell"][data-garden-version] {
  font-family: var(--pc-font-heading);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--pc-gray-500);
  border: 0;
}
.pc-garden [data-garden-id="tables.sortable"][data-garden-version] {
  display: inline-flex;
  align-items: center;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  background: none;
  min-height: 0;
  /* Garden hangs the sort arrow in an absolutely positioned wrapper, so the
     label needs room reserved for it rather than a flex gap. */
  padding: 0 1.25rem 0 0;
}
.pc-garden [data-garden-id="tables.row"][data-garden-version] { border-bottom: 1px solid var(--pc-gray-100); }
.pc-garden [data-garden-id="tables.row"][data-garden-version]:hover { background: var(--pc-gray-50); }
.pc-garden [data-garden-id="tables.cell"][data-garden-version] { border: 0; font-size: .9375rem; color: var(--pc-gray-700); }
.pc-garden [data-garden-id="buttons.anchor"][data-garden-version] {
  font-family: var(--pc-font-heading);
  font-weight: 500;
  color: var(--pc-heading);
  text-decoration: none;
}
.pc-garden [data-garden-id="buttons.anchor"][data-garden-version]:hover { text-decoration: underline; }

/* Status reads as one of the site's small pills — sentence case, fully
   rounded. Garden's micro-caps chip is one of the clearest Copenhagen tells. */
.pc-garden [data-garden-id="tags.tag_view"][data-garden-version] {
  font-family: var(--pc-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -.12px;
  text-transform: none;
  height: auto;
  padding: 4px 10px;
  border-radius: var(--pc-radius-pill);
  background: rgba(0, 0, 0, .06);
  color: var(--pc-gray-700);
  border: 0;
}

/* A table of 107px columns is unreadable on a phone, and it is the single
   biggest reason the list still read as stock Copenhagen. Below 768px the
   rows become cards in the site's own card language: subject first, the rest
   as a quiet meta line, the row menu pinned to the corner. Deliberately no
   :nth-child — readers can add and remove columns, so each cell is styled by
   its role (first / last / the rest) rather than by its position. */
@media (max-width: 767px) {
  .pc-garden [data-garden-id="tables.table"][data-garden-version],
  .pc-garden [data-garden-id="tables.body"][data-garden-version],
  .pc-garden [data-garden-id="tables.row"][data-garden-version],
  .pc-garden [data-garden-id="tables.cell"][data-garden-version] { display: block; width: auto; }

  .pc-garden [data-garden-id="tables.head"][data-garden-version] { display: none; }

  .pc-garden [data-garden-id="tables.row"][data-garden-version] {
    position: relative;
    /* Garden pins its rows to a fixed row height, which a card has to shed. */
    height: auto;
    min-height: 0;
    padding: 1rem;
    margin-bottom: .625rem;
    border: 0;
    border-radius: var(--pc-radius-lg);
    background: var(--pc-surface);
    transition: var(--pc-transition);
  }
  .pc-garden [data-garden-id="tables.row"][data-garden-version]:hover { background: var(--pc-gray-100); }

  .pc-garden [data-garden-id="tables.cell"][data-garden-version] {
    padding: 0;
    font-size: .8125rem;
    color: var(--pc-gray-500);
  }
  /* The subject carries the card. */
  .pc-garden [data-garden-id="tables.cell"][data-garden-version]:first-child {
    font-family: var(--pc-font-heading);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: -.03em;
    color: var(--pc-heading);
    margin-bottom: .5rem;
  }
  .pc-garden [data-garden-id="tables.cell"][data-garden-version]:first-child [data-garden-id="typography.ellipsis"][data-garden-version] {
    white-space: normal;
    overflow: visible;
  }
  /* Everything between the subject and the row menu shares one quiet line. */
  .pc-garden [data-garden-id="tables.cell"][data-garden-version]:not(:first-child):not(:last-child) {
    display: inline-block;
    margin-inline-end: .75rem;
  }
  /* A row menu, where there is one, goes to the corner rather than taking a
     column of its own — and only then does the card reserve room for it. */
  .pc-garden [data-garden-id="tables.cell"][data-garden-version]:last-child:has(button) {
    position: absolute;
    inset-block-start: .75rem;
    inset-inline-end: .5rem;
  }
  .pc-garden [data-garden-id="tables.row"][data-garden-version]:has([data-garden-id="tables.cell"]:last-child button) {
    padding-inline-end: 3rem;
  }
  /* Garden leaves an empty trailing cell when the row has no menu. */
  .pc-garden [data-garden-id="tables.cell"][data-garden-version]:last-child:not(:has(button)) {
    display: none;
  }
}

/* Zendesk's loading skeleton, in this theme's greys and on one rhythm — two
   different bar patterns at two different tones read as two overlapping
   loaders rather than one page arriving. */
.pc-garden [data-garden-id="loaders.skeleton"][data-garden-version] {
  background: linear-gradient(90deg, var(--pc-gray-100) 25%, var(--pc-surface) 37%, var(--pc-gray-100) 63%);
  background-size: 400% 100%;
  border-radius: var(--pc-radius);
  height: 12px;
  margin-block: 10px;
}

/* The activity feed on a profile, as a timeline: a rail with a marker per
   entry, so what was done reads before what it was done to. */
.pc-timeline { list-style: none; margin: 2rem 0 0; padding: 0; position: relative; }
.pc-timeline::before {
  content: "";
  position: absolute;
  inset-block: 12px 12px;
  inset-inline-start: 15px;
  width: 1px;
  background: var(--pc-border);
}
.pc-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 1rem;
  padding-bottom: 1.5rem;
}
.pc-timeline-mark {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--pc-gray-100);
  color: var(--pc-gray-600);
  /* A ring in the page colour lifts the marker off the rail behind it. */
  box-shadow: 0 0 0 4px var(--pc-bg);
}
.pc-timeline-label {
  margin: 6px 0 .5rem;
  font-size: .875rem;
  color: var(--pc-gray-500);
}
.pc-timeline-card {
  padding: 1rem 1.25rem;
  border-radius: var(--pc-radius-lg);
  background: var(--pc-surface);
  transition: var(--pc-transition);
}
.pc-timeline-card:hover { background: var(--pc-gray-100); }
.pc-timeline-title {
  margin: 0;
  font-family: var(--pc-font-heading);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -.03em;
}
.pc-timeline-title a { color: var(--pc-heading); }
.pc-timeline-title a:hover { text-decoration: none; opacity: .7; }
.pc-timeline-excerpt {
  margin: .375rem 0 0;
  font-size: .875rem;
  color: var(--pc-gray-600);
}
.pc-timeline-meta:empty { display: none; }
.pc-timeline-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .75rem 0 0;
  font-size: .8125rem;
  color: var(--pc-gray-500);
}

@media (max-width: 599px) {
  .pc-timeline-item { grid-template-columns: 24px 1fr; gap: .75rem; }
  .pc-timeline-mark { width: 24px; height: 24px; }
  .pc-timeline-mark .pc-ico { width: 12px; height: 12px; }
  .pc-timeline::before { inset-inline-start: 11px; }
}

/* Garden modals: the request filter, the profile editor. These render in a
   container of their own outside .pc-garden, so the selectors are unscoped —
   the data-garden-id attributes are specific enough on their own. */
[data-garden-id="modals.backdrop"][data-garden-version] {
  background: rgba(0, 0, 0, .45);
  backdrop-filter: saturate(1.4) blur(3px);
  -webkit-backdrop-filter: saturate(1.4) blur(3px);
}
[data-garden-id="modals.modal"][data-garden-version] {
  border: 0;
  border-radius: var(--pc-radius-lg);
  box-shadow: var(--pc-shadow-lg);
  font-family: var(--pc-font-body);
}
[data-garden-id="modals.header"][data-garden-version] {
  font-family: var(--pc-font-heading);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -.03em;
  color: var(--pc-heading);
  border-bottom: 0;
  padding: 1.5rem 1.5rem .5rem;
}
[data-garden-id="modals.body"][data-garden-version] {
  padding: .5rem 1.5rem 1.5rem;
  font-size: .9375rem;
  color: var(--pc-gray-700);
}
[data-garden-id="modals.footer"][data-garden-version] {
  padding: 0 1.5rem 1.5rem;
  border-top: 0;
  gap: .5rem;
}
[data-garden-id="modals.footer_item"][data-garden-version] { margin: 0; }
[data-garden-id="modals.close"][data-garden-version] {
  inset-block-start: 1.25rem;
  inset-inline-end: 1.25rem;
  border-radius: var(--pc-radius);
  color: var(--pc-gray-500);
}
[data-garden-id="modals.close"][data-garden-version]:hover {
  background: rgba(0, 0, 0, .05);
  color: var(--pc-heading);
}
/* The modal's own fields and buttons follow the same rules as the ones in the
   page, so the two never read as different products. */
[data-garden-id="modals.modal"][data-garden-version] [data-garden-id="forms.input"],
[data-garden-id="modals.modal"][data-garden-version] [data-garden-id="forms.textarea"],
[data-garden-id="modals.modal"][data-garden-version] [data-garden-id="forms.faux_input"],
[data-garden-id="modals.modal"][data-garden-version] [data-garden-id="dropdowns.combobox.trigger"] {
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius);
  background: var(--pc-bg);
  font-family: var(--pc-font-body);
  font-size: 15px;
  color: var(--pc-heading);
  box-shadow: none;
  min-height: var(--pc-btn-h);
}
[data-garden-id="modals.modal"][data-garden-version] [data-garden-id="forms.textarea"] {
  min-height: 0;
  padding: .625rem .875rem;
}
[data-garden-id="modals.modal"][data-garden-version] [data-garden-id="forms.input_label"] {
  font-family: var(--pc-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--pc-gray-700);
}
[data-garden-id="modals.modal"][data-garden-version] [data-garden-id="forms.input_hint"] {
  font-size: .8125rem;
  color: var(--pc-gray-500);
}
[data-garden-id="modals.modal"][data-garden-version] [data-garden-id="notifications.alert"] {
  border: 0;
  border-radius: var(--pc-radius);
  background: var(--pc-gray-100);
  color: var(--pc-gray-700);
  font-size: .875rem;
}
/* The focus ring. Garden's own is a heavy dark outline that reads as an error
   state next to the quiet fields around it; this is the ring the rest of the
   theme uses. */
[data-garden-id="modals.modal"][data-garden-version] [data-garden-id="forms.input"]:focus,
[data-garden-id="modals.modal"][data-garden-version] [data-garden-id="forms.textarea"]:focus,
[data-garden-id="modals.modal"][data-garden-version] [data-garden-id="forms.input"]:focus-visible,
[data-garden-id="modals.modal"][data-garden-version] [data-garden-id="forms.textarea"]:focus-visible {
  outline: none;
  border-color: var(--pc-heading);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .06);
}

/* Buttons inside the modal: "Change photo" and the footer pair. Garden ships
   its own blue; this is a black-and-grey theme and a single blue control in a
   dialog is the only blue on the page. */
[data-garden-id="modals.modal"][data-garden-version] [data-garden-id="buttons.button"] {
  border-radius: var(--pc-radius);
  border: 1px solid var(--pc-border);
  background: var(--pc-bg);
  font-family: var(--pc-font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.16px;
  color: var(--pc-heading);
  min-height: var(--pc-btn-h);
  padding-inline: 18px;
}
[data-garden-id="modals.modal"][data-garden-version] [data-garden-id="buttons.button"]:hover {
  background: var(--pc-gray-100);
}
/* The one that commits: the same black button the rest of the theme uses. */
[data-garden-id="modals.modal"][data-garden-version] [data-garden-id="modals.footer_item"]:last-child [data-garden-id="buttons.button"] {
  border-color: transparent;
  background: var(--pc-primary);
  color: var(--pc-on-primary);
}
[data-garden-id="modals.modal"][data-garden-version] [data-garden-id="modals.footer_item"]:last-child [data-garden-id="buttons.button"]:hover {
  background: #000;
}

/* An anchor styled as a button — "Manage 2FA" — arrives in Garden blue. */
[data-garden-id="modals.modal"][data-garden-version] [data-garden-id="buttons.anchor"] {
  color: var(--pc-heading);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
[data-garden-id="modals.modal"][data-garden-version] [data-garden-id="buttons.anchor"]:hover {
  color: var(--pc-gray-700);
}

[data-garden-id="modals.modal"][data-garden-version] [data-garden-id="avatars.avatar"] {
  border-radius: 50%;
  overflow: hidden;
}
/* The footer's confirm button is the page's primary; the other is the quiet
   one beside it. */
[data-garden-id="modals.footer"][data-garden-version] [data-garden-id="buttons.button"] {
  min-height: var(--pc-btn-h);
  padding: 9px 18px;
  border: 0;
  border-radius: var(--pc-radius);
  background: rgba(0, 0, 0, .08);
  color: var(--pc-heading);
  font-family: var(--pc-font-heading);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.03em;
  box-shadow: none;
}
[data-garden-id="modals.footer"][data-garden-version] [data-garden-id="modals.footer_item"]:last-child [data-garden-id="buttons.button"] {
  background: var(--pc-primary);
  color: var(--pc-on-primary);
}
[data-garden-id="modals.footer"][data-garden-version] [data-garden-id="modals.footer_item"]:last-child [data-garden-id="buttons.button"]:hover {
  background: var(--pc-heading);
}

/* Rows sit on one line: without this the status pill drops below the text it
   belongs beside. */
.pc-garden [data-garden-id="tables.cell"][data-garden-version],
.pc-garden [data-garden-id="tables.header_cell"][data-garden-version] { vertical-align: middle; }

/* The magnifier and the field it introduces need air between them. */
.pc-garden [data-garden-id="forms.faux_input"][data-garden-version] { gap: .5rem; }
.pc-garden [data-garden-id="forms.media_figure"][data-garden-version] { flex: none; margin: 0; }

/* The service catalog's own sidebar is not a Garden component; it hangs its
   hooks on data-test-id instead, and ships Zendesk blue for the selection. */
.pc-garden [data-test-id^="sidebar-"] {
  border-radius: var(--pc-radius);
  font-family: var(--pc-font-heading);
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: -.03em;
  color: var(--pc-heading);
  background: rgba(0, 0, 0, .06);
}
.pc-garden [data-test-id^="sidebar-"]:hover { background: rgba(0, 0, 0, .1); }

/* Pagination */
.pc-garden [data-garden-id="cursor_pagination.cursor"][data-garden-version] {
  font-family: var(--pc-font-heading);
  font-size: .875rem;
  font-weight: 500;
  color: var(--pc-heading);
  border-radius: var(--pc-radius);
}

/* Garden's popups are not portalled to the body — every one of them renders
   inline in a `.floating` wrapper at `z-index: 1000`, far below this theme's
   header, so a form's select opened underneath it. The suffix match covers
   menus, comboboxes and whatever Garden adds next. Above the strip (6100),
   below the mobile menu (6200). */
[data-garden-id$=".floating"][data-garden-version],
[data-garden-id="datepickers.menu_wrapper"][data-garden-version],
[data-garden-id="tooltip.tooltip"][data-garden-version] { z-index: 6150; }


/* 42 — MESSENGER SCROLL LOCK =============================================
   On a narrow viewport the Zendesk messenger locks the host page by setting
   `position: fixed; inset: 0` inline on <body>, because it expects to be
   covering the screen. On the contact page it is embedded in a panel, so
   that lock left the page unscrollable. Released unless it really is open —
   script.js sets .pc-messenger-open from the widget's own open/close events.
------------------------------------------------------------------------- */

html:not(.pc-messenger-open) body {
  position: static !important;
  inset: auto !important;
}

/* ---------------------------------------------------------------- invoices */

/* The Invoices page carries two blocks now — what we billed the organisation,
   and what runs on Stripe for Zendesk apps. They need a heading each, in the
   page's own idiom rather than the marketing headings. */
.pc-section-title {
  /* Family, colour and tracking come from the shared heading rule; only the
     size and the space around it are this block's own. */
  margin: 2.5rem 0 1rem;
  font-size: 1.25rem;
  font-weight: 600;
}
.pc-invoices-wrap .pc-section-title { margin-top: 0; }

.pc-invoices-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.pc-invoices-filter { display: flex; gap: .25rem; }
.pc-invoices-tab {
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: .8125rem;
  color: var(--pc-gray-600);
  padding: .3rem .7rem;
  border-radius: var(--pc-radius-pill);
  transition: var(--pc-transition);
}
.pc-invoices-tab:hover { background: var(--pc-gray-100); color: var(--pc-heading); }
.pc-invoices-tab.is-active { background: var(--pc-gray-200); color: var(--pc-heading); }

/* A list, not a grid: invoices are read down a column, and one number lining
   up under the next is the whole point of a statement. */
.pc-invoices-list { display: flex; flex-direction: column; gap: .5rem; }

.pc-invoice-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem 1.25rem;
  border-radius: var(--pc-radius-lg);
  background: var(--pc-surface);
  transition: var(--pc-transition);
}
.pc-invoice-row:not(.is-loading):hover { background: var(--pc-gray-200); }

.pc-invoice-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pc-invoice-number { font-weight: 600; color: var(--pc-heading); }
.pc-invoice-date, .pc-invoice-ref { font-size: .8125rem; color: var(--pc-gray-500); }

.pc-invoice-side {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-inline-start: auto;
}
.pc-invoice-amount {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--pc-heading);
}

/* Settled, owed, owed too long. Colour carries it, but never alone — the word
   is there for anyone who cannot tell these two greens and reds apart. */
.pc-invoice-state {
  font-size: .75rem;
  font-weight: 600;
  padding: .2rem .6rem;
  border-radius: var(--pc-radius-pill);
  white-space: nowrap;
  background: var(--pc-gray-100);
  color: var(--pc-gray-600);
}
.pc-invoice-state--paid { background: #E8F5EC; color: #17663A; }
.pc-invoice-state--overdue { background: #FDEDE8; color: #A33212; }
.pc-invoice-state--uncollectible { background: var(--pc-gray-200); color: var(--pc-gray-600); }

.pc-invoice-dl { white-space: nowrap; }
.pc-invoice-dl[disabled] { opacity: .6; cursor: default; }

.pc-invoices-empty { font-size: .875rem; color: var(--pc-gray-600); margin: 0; }

@media (max-width: 640px) {
  .pc-invoice-row { align-items: flex-start; }
  .pc-invoice-side { margin-inline-start: 0; width: 100%; justify-content: space-between; }
}

.pc-invoices-more { align-self: flex-start; margin-top: .25rem; }
.pc-invoices-more[disabled] { opacity: .6; cursor: default; }