/*
 * The public site: the landing page at "/", the knowledge base at "/kb", and every article.
 *
 * Self-contained apart from the brand palette: every colour here resolves to a token, and the
 * dark theme is the one block at the top rather than a second set of rules further down. The
 * knowledge base at /kb and every article draw the same header, hero, bands and footer from
 * here, which is the point: one file to change, and all three pages change together.
 *
 * Tokens are named for the job, not the paint, so the dark block answers each one differently.
 * The brand orange and coral are deliberately NOT re-themed: orange stays orange, as site.css
 * says. What changes is the paper under it.
 */
.ps-page {
  --ps-ink: #1d2128;          /* headings */
  --ps-text: #3a414c;         /* body copy */
  --ps-muted: #697180;        /* captions and meta */
  --ps-line: #e4e8ef;
  --ps-line-soft: #eef1f5;
  --ps-paper: #ffffff;        /* cards */
  --ps-wash: #f5f7fb;         /* the page behind them */
  --ps-raised: #ffffff;       /* the search field, above the hero */
  --ps-orange: #ff751a;
  --ps-coral: #fe3838;
  --ps-orange-deep: #c2410c;  /* orange as text: 5.2:1 on white, per site.css --link */
  --ps-orange-wash: #fff1e6;
  /*
   * The hero, taken from triniteq.com and the Triniteq blog: a charcoal band, a small orange
   * eyebrow above the heading, and one phrase of the heading in orange italic. Behind it, bleeding
   * off the right edge, is the Triniteq mark itself -- the rounded triangle from the logo, the
   * same shape the website carries there -- at the opacity that leaves it a tint of the band
   * rather than a picture on it.
   */
  --ps-hero-bg: #2b2b2b;
  --ps-hero-ink: #ffffff;
  --ps-hero-lead: #d6d8db;
  --ps-hero-mark: .3;
  --ps-shadow-sm: 0 6px 20px rgba(30, 38, 52, .045);
  --ps-shadow-md: 0 14px 34px rgba(30, 38, 52, .09);
  --ps-shadow-hero: 0 18px 40px rgba(120, 30, 0, .22);
  --ps-focus: #ff751a;
  /* The two notices a form gives back. Named for the job: the dark blocks answer them. */
  --ps-ok-ink: #0d6b4b;
  --ps-ok-wash: #e9f7f1;
  --ps-ok-line: #bfe4d4;
  --ps-bad-ink: #b3261e;
  --ps-bad-wash: #fdecea;
  --ps-bad-line: #f5c9c4;
  --ps-dark-band: #1d2128;    /* the "still stuck?" band */
  --ps-dark-band-border: transparent;
  --ps-dark-band-ink: #ffffff;
  --ps-dark-band-muted: #c5cad3;

  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  color: var(--ps-text);
  background: var(--ps-wash);
  font-family: Inter, "Century Gothic", "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/*
 * Dark. Driven by the system preference, with the data-theme attribute as the visitor's override
 * in either direction — the guard on the media query is what lets "light" win over a dark OS.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ps-page {
    color-scheme: dark;
    --ps-ink: #f2f4f8;
    --ps-text: #c8cdd6;
    --ps-muted: #969dab;
    --ps-line: #2c313a;
    --ps-line-soft: #262a32;
    --ps-paper: #1b1e24;
    --ps-wash: #141619;
    --ps-raised: #23272f;
    --ps-orange-deep: #ff9452;
    --ps-orange-wash: #3a2113;
    --ps-shadow-sm: 0 6px 20px rgba(0, 0, 0, .3);
    --ps-shadow-md: 0 14px 34px rgba(0, 0, 0, .45);
    --ps-shadow-hero: 0 18px 40px rgba(0, 0, 0, .5);
    --ps-dark-band: #24282f;
    --ps-dark-band-border: #343a44;
    --ps-dark-band-muted: #a8aeba;
    --ps-hero-bg: #101216;
    --ps-hero-lead: #b9bec8;
    --ps-hero-mark: .26;
    --ps-ok-ink: #6dd6ab;
    --ps-ok-wash: #11271f;
    --ps-ok-line: #1f4a37;
    --ps-bad-ink: #ff9b93;
    --ps-bad-wash: #2d1618;
    --ps-bad-line: #4d2529;
  }
}
:root[data-theme="dark"] .ps-page {
  color-scheme: dark;
  --ps-ink: #f2f4f8;
  --ps-text: #c8cdd6;
  --ps-muted: #969dab;
  --ps-line: #2c313a;
  --ps-line-soft: #262a32;
  --ps-paper: #1b1e24;
  --ps-wash: #141619;
  --ps-raised: #23272f;
  --ps-orange-deep: #ff9452;
  --ps-orange-wash: #3a2113;
  --ps-shadow-sm: 0 6px 20px rgba(0, 0, 0, .3);
  --ps-shadow-md: 0 14px 34px rgba(0, 0, 0, .45);
  --ps-shadow-hero: 0 18px 40px rgba(0, 0, 0, .5);
  --ps-dark-band: #24282f;
  --ps-dark-band-border: #343a44;
  --ps-dark-band-muted: #a8aeba;
  --ps-hero-bg: #101216;
  --ps-hero-lead: #b9bec8;
  --ps-hero-mark: .26;
  --ps-ok-ink: #6dd6ab;
  --ps-ok-wash: #11271f;
  --ps-ok-line: #1f4a37;
  --ps-bad-ink: #ff9b93;
  --ps-bad-wash: #2d1618;
  --ps-bad-line: #4d2529;
}

.ps-page *, .ps-page *::before, .ps-page *::after { box-sizing: border-box; }
.ps-wrap { width: min(1140px, calc(100% - 40px)); margin: 0 auto; }
.ps-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ps-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  padding: 10px 16px;
  border-radius: 0 0 10px 0;
  color: #fff;
  background: var(--ps-dark-band);
}
.ps-skip:focus { left: 0; }
.ps-page :focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; border-radius: 6px; }

/* ---- Header ---------------------------------------------------------------------------- */
.ps-header { border-bottom: 1px solid var(--ps-line); background: var(--ps-paper); }
.ps-header-inner { min-height: 68px; display: flex; align-items: center; gap: 20px; }
.ps-brand { display: flex; align-items: center; gap: 10px; color: var(--ps-ink); text-decoration: none; }
.ps-brand img { height: 26px; width: auto; }
.ps-brand span { font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ps-muted); }
.ps-nav { margin-left: 14px; display: flex; gap: 4px; flex: 1; }
.ps-nav a {
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--ps-text);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}
.ps-nav a:hover { color: var(--ps-orange-deep); background: var(--ps-orange-wash); }
.ps-nav a.is-current { color: var(--ps-orange-deep); }
.ps-header-actions { display: flex; align-items: center; gap: 8px; }

/* The menu at phone width. The button only exists below the breakpoint; the panel is the same
   set of links as the row, so there is one menu, drawn twice by _PublicHeader.cshtml. */
.ps-menu-toggle {
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--ps-line);
  border-radius: 10px;
  display: none;
  place-items: center;
  color: var(--ps-ink);
  background: transparent;
  cursor: pointer;
}
.ps-menu-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ps-menu-toggle.is-open { color: var(--ps-orange-deep); border-color: var(--ps-orange); }
.ps-mobile-nav { border-top: 1px solid var(--ps-line); background: var(--ps-paper); }
.ps-mobile-nav .ps-wrap { display: grid; padding-top: 6px; padding-bottom: 10px; }
.ps-mobile-nav a {
  padding: 13px 2px;
  border-bottom: 1px solid var(--ps-line-soft);
  color: var(--ps-text);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}
.ps-mobile-nav a:last-child { border-bottom: 0; }
.ps-mobile-nav a.is-current { color: var(--ps-orange-deep); }

.ps-button {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid transparent;
  /*
   * Square-ish, like every button on triniteq.com. The Triniteq style guide says fully rounded
   * and the staff desk and the portal follow it; the public site follows the website instead, so
   * a customer arriving from triniteq.com sees the same company. Deliberate divergence, not drift.
   */
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  font: inherit;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
/* White on #ff751a, as decided for the product's primary buttons. */
.ps-button.is-solid { color: #fff; background: var(--ps-orange); }
.ps-button.is-solid:hover { background: #ff5f07; }
.ps-button.is-quiet { color: var(--ps-text); background: transparent; }
.ps-button.is-quiet:hover { color: var(--ps-ink); background: var(--ps-line-soft); }
/* The website's "Support" button: the brand colour as an outline rather than a fill. */
.ps-button.is-bordered { border-color: var(--ps-orange); color: var(--ps-orange-deep); background: var(--ps-paper); }
.ps-button.is-bordered:hover { color: #fff; background: var(--ps-orange); }
.ps-button.is-outline { border-color: rgba(255, 255, 255, .34); color: #fff; background: transparent; }
.ps-button.is-outline:hover { background: rgba(255, 255, 255, .12); }

.ps-theme-toggle {
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--ps-line);
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--ps-muted);
  background: transparent;
  cursor: pointer;
}
.ps-theme-toggle:hover { color: var(--ps-ink); border-color: var(--ps-muted); }
.ps-theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ps-theme-toggle .ps-icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ps-theme-toggle .ps-icon-sun { display: none; }
  :root:not([data-theme="light"]) .ps-theme-toggle .ps-icon-moon { display: block; }
}
:root[data-theme="dark"] .ps-theme-toggle .ps-icon-sun { display: none; }
:root[data-theme="dark"] .ps-theme-toggle .ps-icon-moon { display: block; }
:root[data-theme="light"] .ps-theme-toggle .ps-icon-sun { display: block; }
:root[data-theme="light"] .ps-theme-toggle .ps-icon-moon { display: none; }

/* ---- Hero and search ------------------------------------------------------------------- */
.ps-hero { position: relative; overflow: hidden; color: var(--ps-hero-ink); background: var(--ps-hero-bg); }
/* The mark behind the hero, as the website draws it: large, pointing right, running off the
   edge. It is the logo's own triangle (triniteq-hero-mark.svg), not an abstraction of it. */
.ps-hero::after {
  content: "";
  position: absolute;
  right: -180px;
  top: 50%;
  width: 760px;
  height: 620px;
  transform: translateY(-50%);
  background: url("../images/triniteq-hero-mark.svg") no-repeat right center / contain;
  opacity: var(--ps-hero-mark);
  pointer-events: none;
}
/* The compact hero is a band, not a page: the mark scales with it rather than overflowing. */
.ps-hero.is-compact::after { width: 460px; height: 320px; right: -90px; }
.ps-hero-inner { position: relative; z-index: 1; padding: 62px 0 66px; }
.ps-eyebrow {
  margin: 0 0 12px;
  color: var(--ps-orange);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}
/* 56px/800 at -0.01em is the blog's heading; the website's home page runs it to 72px. */
.ps-hero h1 { margin: 0 0 14px; font-size: clamp(34px, 5vw, 56px); font-weight: 800; letter-spacing: -.012em; line-height: 1.06; }
/* One phrase of the heading in orange italic, as "hospo" and "for busy venues" are on the site. */
.ps-accent { color: var(--ps-orange); font-style: italic; }
.ps-hero-lead { max-width: 580px; margin: 0 0 28px; color: var(--ps-hero-lead); font-size: 18px; }

.ps-search {
  position: relative;
  width: min(680px, 100%);
  min-height: 60px;
  padding: 0 8px 0 20px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--ps-raised);
  box-shadow: var(--ps-shadow-hero);
}
.ps-search > svg { width: 21px; height: 21px; flex: none; fill: none; stroke: var(--ps-muted); stroke-width: 2; stroke-linecap: round; }
.ps-search input {
  min-width: 0;
  height: 60px;
  flex: 1;
  border: 0;
  outline: 0;
  color: var(--ps-ink);
  background: transparent;
  font: inherit;
  font-size: 16.5px;
}
.ps-search input::placeholder { color: var(--ps-muted); }
/* The pill's :focus-within ring is the focus indicator. Without these the field drew a second
   ring inside the first: site.css gives every focused input an orange halo, which is right in a
   form and wrong inside a search pill that already lights up around it. */
.ps-search input:focus,
.ps-search input:focus-visible { outline: none; box-shadow: none; }
.ps-search input::-webkit-search-cancel-button { filter: grayscale(1); }
.ps-search:focus-within { box-shadow: 0 0 0 3px rgba(255, 117, 26, .55), var(--ps-shadow-hero); }
.ps-search-go {
  height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 10px;
  flex: none;
  color: #fff;
  background: var(--ps-orange);
  cursor: pointer;
  font: inherit;
  font-size: 14.5px;
  font-weight: 700;
}
.ps-search-go:hover { background: #ff5f07; }
/* Without a Search button beside it the pill closes up on the right: the knowledge base's own
   field submits on Enter and as the reader types, so it carries no button. */
label.ps-search { padding-right: 20px; }
/* The knowledge base draws the same hero in a compact form on a folder or a results page: the
   band stays, so the page is still the same page, while the heading and lead step back and the
   list is what the reader sees first. */
.ps-hero.is-compact .ps-hero-inner { padding: 34px 0 36px; }
.ps-hero.is-compact h1 { margin-bottom: 16px; font-size: clamp(24px, 3vw, 32px); }
.ps-hero.is-compact .ps-hero-lead { display: none; }
.ps-hero.is-compact .ps-search { min-height: 52px; }
.ps-hero.is-compact .ps-search input { height: 52px; }

.ps-suggestions {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 12;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--ps-line);
  border-radius: 14px;
  list-style: none;
  background: var(--ps-paper);
  box-shadow: var(--ps-shadow-md);
}
.ps-suggestions li { margin: 0; }
.ps-suggestions a {
  padding: 10px 12px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ps-text);
  font-size: 15px;
  text-decoration: none;
}
.ps-suggestions a:hover, .ps-suggestions li.is-active a { color: var(--ps-ink); background: var(--ps-orange-wash); }
.ps-suggestions svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--ps-muted); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.ps-topics { margin: 18px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.ps-topics > span { color: var(--ps-hero-lead); font-weight: 700; }
.ps-topics button {
  padding: 6px 13px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, .09);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
}
.ps-topics button:hover { border-color: var(--ps-orange); background: rgba(255, 117, 26, .22); }

/* ---- A hero with a card beside it, as the Triniteq blog does ---------------------------- */
.ps-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 48px; align-items: center; }
.ps-hero-card {
  padding: 26px 26px 22px;
  border-radius: 20px;
  background: var(--ps-paper);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .3);
}
.ps-hero-card-label { margin: 0 0 6px; color: var(--ps-orange-deep); font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.ps-hero-card h2 { margin: 0 0 8px; color: var(--ps-ink); font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.ps-hero-card > p { margin: 0 0 16px; color: var(--ps-muted); font-size: 14.5px; line-height: 1.55; }
.ps-hero-card ol, .ps-hero-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.ps-hero-card li a {
  padding: 12px 14px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ps-ink);
  background: var(--ps-wash);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}
.ps-hero-card li a:hover { color: var(--ps-orange-deep); background: var(--ps-orange-wash); }
.ps-hero-card li svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--ps-orange); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ps-hero-card-empty { padding: 14px; border: 1px dashed var(--ps-line); border-radius: 12px; color: var(--ps-muted); font-size: 14.5px; text-align: center; }

/* ---- Article columns ------------------------------------------------------------------- */
.ps-articles { margin: 48px auto 0; }
.ps-articles-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ps-column {
  padding: 24px 24px 18px;
  border: 1px solid var(--ps-line);
  border-radius: 18px;
  background: var(--ps-paper);
  box-shadow: var(--ps-shadow-sm);
}
.ps-column-head { margin: 0 0 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.ps-column-head h2 { margin: 0; color: var(--ps-ink); font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.ps-more { color: var(--ps-orange-deep); font-size: 13.5px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.ps-more:hover { text-decoration: underline; }

.ps-article-list { margin: 0; padding: 0; list-style: none; counter-reset: ps-rank; }
.ps-article-list li { border-top: 1px solid var(--ps-line-soft); }
.ps-article-list li:first-child { border-top: 0; }
.ps-article-list a {
  padding: 12px 2px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--ps-text);
  text-decoration: none;
}
.ps-article-list a:hover .ps-article-title { color: var(--ps-orange-deep); }
.ps-rank {
  width: 24px;
  flex: none;
  color: var(--ps-muted);
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
}
.ps-article-body { min-width: 0; }
.ps-article-title { display: block; color: var(--ps-ink); font-size: 15.5px; font-weight: 650; line-height: 1.4; }
.ps-article-meta { display: block; margin-top: 3px; color: var(--ps-muted); font-size: 12.5px; }
.ps-pill {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--ps-orange-deep);
  background: var(--ps-orange-wash);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ps-article-skeleton { height: 46px; border-top: 1px solid var(--ps-line-soft); }
.ps-article-skeleton::after {
  content: "";
  display: block;
  width: 70%;
  height: 13px;
  margin: 15px 0;
  border-radius: 6px;
  background: var(--ps-line-soft);
}
.ps-article-skeleton:nth-child(2)::after { width: 84%; }
.ps-article-skeleton:nth-child(3)::after { width: 58%; }
.ps-column-empty { padding: 14px 2px; color: var(--ps-muted); font-size: 14.5px; }

/* ---- Browse by topic ------------------------------------------------------------------- */
.ps-categories { margin: 24px auto 0; }
.ps-category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.ps-category {
  padding: 20px 20px 18px;
  border: 1px solid var(--ps-line);
  border-radius: 16px;
  display: block;
  color: inherit;
  background: var(--ps-paper);
  box-shadow: var(--ps-shadow-sm);
  text-decoration: none;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.ps-category:hover { border-color: #ffc9a3; box-shadow: var(--ps-shadow-md); transform: translateY(-2px); }
.ps-category h3 { margin: 0 0 4px; color: var(--ps-ink); font-size: 16.5px; font-weight: 750; }
.ps-category p { margin: 0; color: var(--ps-muted); font-size: 14px; line-height: 1.5; }
.ps-category-count { display: block; margin-top: 10px; color: var(--ps-orange-deep); font-size: 13px; font-weight: 700; }

/* ---- Search results -------------------------------------------------------------------- */
.ps-results { margin: 40px auto 0; }
.ps-results-head { margin: 0 0 14px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; }
.ps-results-head h2 { margin: 0; color: var(--ps-ink); font-size: 20px; font-weight: 800; }
.ps-results-clear { padding: 0; border: 0; color: var(--ps-orange-deep); background: none; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 700; }
.ps-results-clear:hover { text-decoration: underline; }
.ps-result-list { display: grid; gap: 12px; }
.ps-result {
  padding: 18px 20px;
  border: 1px solid var(--ps-line);
  border-radius: 16px;
  display: block;
  color: inherit;
  background: var(--ps-paper);
  text-decoration: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.ps-result:hover { border-color: #ffc9a3; box-shadow: var(--ps-shadow-md); }
.ps-result h3 { margin: 0 0 6px; color: var(--ps-ink); font-size: 17px; font-weight: 750; }
.ps-result p { margin: 0; color: var(--ps-muted); font-size: 14.5px; line-height: 1.55; }
.ps-result mark { padding: 0 2px; border-radius: 3px; color: var(--ps-orange-deep); background: var(--ps-orange-wash); font-weight: 700; }
.ps-result small { display: block; margin-top: 8px; color: var(--ps-muted); font-size: 12.5px; }
.ps-empty {
  padding: 34px 24px;
  border: 1px dashed var(--ps-line);
  border-radius: 18px;
  color: var(--ps-muted);
  background: var(--ps-paper);
  text-align: center;
}
.ps-empty b { display: block; margin-bottom: 6px; color: var(--ps-ink); font-size: 16.5px; }

/* ---- The three doors ------------------------------------------------------------------- */
.ps-doors { margin: 48px auto 0; }
.ps-door-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ps-door {
  padding: 24px 24px 22px;
  border: 1px solid var(--ps-line);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  color: inherit;
  background: var(--ps-paper);
  box-shadow: var(--ps-shadow-sm);
  text-decoration: none;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.ps-door:hover { border-color: #ffc9a3; box-shadow: var(--ps-shadow-md); transform: translateY(-2px); }
.ps-door-icon {
  width: 44px;
  height: 44px;
  margin: 0 0 14px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: var(--ps-orange-deep);
  background: var(--ps-orange-wash);
}
.ps-door-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ps-door h3 { margin: 0 0 6px; color: var(--ps-ink); font-size: 17.5px; font-weight: 750; }
.ps-door p { margin: 0 0 16px; flex: 1; color: var(--ps-muted); font-size: 14.5px; line-height: 1.55; }
.ps-door-cta { color: var(--ps-orange-deep); font-size: 14px; font-weight: 700; }

/* ---- The signed-in customer's band ------------------------------------------------------ */
.ps-mine { margin: 36px auto 0; }
.ps-mine-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.ps-mine-card {
  padding: 22px 24px 20px;
  border: 1px solid var(--ps-line);
  border-radius: 18px;
  background: var(--ps-paper);
  box-shadow: var(--ps-shadow-sm);
}
.ps-mine-count { margin: 0 0 4px; color: var(--ps-ink); font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.ps-mine-total { margin: 0 0 12px; color: var(--ps-muted); font-size: 14.5px; }
.ps-mine-card .ps-article-list { margin: 0 0 16px; }
.ps-mine-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- The customer's requests, inside the shared layout ---------------------------------- */
.ps-portal { margin: 28px auto 56px; }
.ps-portal .portal-shell { max-width: none; margin: 0; padding: 0; }
.ps-who { color: var(--ps-muted); font-size: 14px; font-weight: 700; white-space: nowrap; }
.ps-mobile-signout {
  padding: 0;
  border: 0;
  color: var(--ps-ink);
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  text-align: left;
}

/* ---- Closing band and footer ----------------------------------------------------------- */
.ps-cta {
  margin: 48px 0 56px;
  padding: 32px 36px;
  border: 1px solid var(--ps-dark-band-border);
  border-radius: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: var(--ps-dark-band-ink);
  background: var(--ps-dark-band);
}
.ps-cta h2 { margin: 0 0 6px; font-size: 22px; font-weight: 800; }
.ps-cta p { margin: 0; color: var(--ps-dark-band-muted); font-size: 15.5px; }
.ps-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- Sign in ---------------------------------------------------------------------------- */
/* The login form on its own: wide enough to read, not the whole page. */
.ps-auth { margin: 36px auto 56px; display: grid; grid-template-columns: minmax(0, 620px); justify-content: center; }
/* The two doors: the same cards the home page uses, given the room of a page of their own. */
.ps-signin-doors { margin: 36px auto 64px; }
.ps-signin-doors .ps-door-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ps-signin-doors .ps-door { padding: 30px 30px 26px; }
.ps-hero-lead-compact { margin-bottom: 4px; }
.ps-hero.is-compact .ps-hero-lead-compact { display: block; }
.ps-auth-back { margin: 18px 0 0; font-size: 14px; }
.ps-auth-back a { color: var(--ps-muted); text-decoration: none; }
.ps-auth-back a:hover { color: var(--ps-orange-deep); text-decoration: underline; }
.ps-auth-card {
  padding: 28px 28px 24px;
  border: 1px solid var(--ps-line);
  border-radius: 18px;
  background: var(--ps-paper);
  box-shadow: var(--ps-shadow-sm);
}
.ps-auth-card + .ps-auth-card { margin-top: 16px; }
.ps-auth-card h2 { margin: 0 0 6px; color: var(--ps-ink); font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
.ps-auth-card .ps-eyebrow { color: var(--ps-orange-deep); }
.ps-auth-lead { margin: 0 0 20px; color: var(--ps-muted); font-size: 15px; }
.ps-auth-card form { display: grid; gap: 14px; }
.ps-auth-card form label { display: grid; gap: 6px; color: var(--ps-ink); font-size: 14px; font-weight: 700; }
/* The field name and its asterisk are one line: in a grid label each child is a row of its own,
   which put the asterisk under the name. */
.ps-auth-card form label > span:first-child { display: flex; align-items: baseline; gap: 4px; }
.ps-auth-card form label > span:first-child span { color: var(--ps-coral); }
.ps-auth-card input[type="email"],
.ps-auth-card input[type="password"],
.ps-auth-card input[type="text"] {
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--ps-line);
  border-radius: 10px;
  color: var(--ps-ink);
  background: var(--ps-wash);
  font: inherit;
  font-size: 15.5px;
  font-weight: 400;
}
.ps-auth-card input:focus { border-color: var(--ps-orange); outline: none; }
.ps-auth-check { grid-template-columns: auto 1fr; align-items: center; font-weight: 600 !important; }
.ps-auth-submit { width: 100%; margin-top: 4px; }
.ps-auth-divider { margin: 18px 0 12px; display: flex; align-items: center; gap: 12px; color: var(--ps-muted); font-size: 13px; }
.ps-auth-divider::before, .ps-auth-divider::after { content: ""; height: 1px; flex: 1; background: var(--ps-line); }
.ps-auth-link { padding: 0; border: 0; color: var(--ps-orange-deep); background: none; cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; }
.ps-auth-link:hover { text-decoration: underline; }
.ps-auth-link { display: block; margin-top: 10px; text-align: left; }
/*
 * What the form says back. This used to carry site.css's .login-result as well, which paints a
 * box from the AGENT theme's green and coral tokens -- tokens the public dark theme never
 * answers. The result was the confirmation rendered as near-white text on a pale green box,
 * unreadable in dark. These pages carry only ps- classes now, and both colours come from tokens
 * the dark blocks above redefine. Don't reintroduce .login-result here.
 */
.ps-auth-result { margin: 12px 0 0; color: var(--ps-muted); font-size: 14px; }
.ps-auth-result:empty { display: none; }
.ps-auth-result.is-ok, .ps-auth-result.is-error {
  padding: 11px 13px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-weight: 600;
  line-height: 1.5;
}
.ps-auth-result.is-ok { border-color: var(--ps-ok-line); color: var(--ps-ok-ink); background: var(--ps-ok-wash); }
.ps-auth-result.is-error { border-color: var(--ps-bad-line); color: var(--ps-bad-ink); background: var(--ps-bad-wash); }
/* The expired-link notice, on the same two tokens as the form result below. It used to be
   coral text on the ORANGE wash, which is barely 3:1 in dark. */
.ps-auth-error {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--ps-bad-line);
  border-radius: 10px;
  color: var(--ps-bad-ink);
  background: var(--ps-bad-wash);
  font-size: 14.5px;
}
.ps-auth-note { margin: 14px 0 0; color: var(--ps-muted); font-size: 13.5px; line-height: 1.5; }
.ps-auth-switch { margin: 16px 0 0; color: var(--ps-muted); font-size: 14px; }
.ps-auth-switch button { padding: 0; border: 0; color: var(--ps-orange-deep); background: none; cursor: pointer; font: inherit; font-weight: 700; }
.ps-auth-switch a { color: var(--ps-orange-deep); font-weight: 700; }

/* ---- Customer sign-in, step by step -----------------------------------------------------
   One card, two steps: the address, then how to sign in. Only the step in play is in the
   document's flow, so the card grows and shrinks around whichever is showing rather than
   reserving room for both. */
.ps-auth-step[hidden] { display: none; }
.ps-auth-identity {
  margin: 0 0 18px;
  padding: 10px 14px;
  border: 1px solid var(--ps-line);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--ps-line-soft);
}
.ps-auth-identity-email {
  overflow: hidden;
  color: var(--ps-ink);
  font-size: 14.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Sits on the identity row rather than under it, so it keeps the row's baseline. */
.ps-auth-link.is-inline { flex: none; margin-top: 0; }
.ps-auth-card .ps-auth-divider { margin: 20px 0 16px; }

.ps-footer { margin-top: auto; border-top: 1px solid var(--ps-line); background: var(--ps-paper); }
.ps-footer-inner { min-height: 64px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; }
.ps-footer p { margin: 0; color: var(--ps-muted); font-size: 13.5px; }
.ps-footer nav { display: flex; flex-wrap: wrap; gap: 18px; }
.ps-footer a { color: var(--ps-muted); font-size: 13.5px; text-decoration: none; }
.ps-footer a:hover { color: var(--ps-orange-deep); text-decoration: underline; }

/* ---- Narrow ---------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .ps-nav { display: none; }
  .ps-menu-toggle { display: grid; }
  .ps-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ps-hero-card { box-shadow: var(--ps-shadow-md); }
  .ps-articles-grid { grid-template-columns: minmax(0, 1fr); }
  .ps-door-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ps-wrap { width: calc(100% - 28px); }
  .ps-header-inner { min-height: 60px; gap: 10px; }
  .ps-brand span { display: none; }
  /* On a phone the header keeps the brand, the theme control and one action; everything else
     is in the menu panel below it. Scoped to the header: unscoped, it also took the sign-in
     screen's "Email me a link" button and the home page's "View all tickets" off every phone. */
  .ps-header .ps-button.is-quiet, .ps-header .ps-button.is-bordered, .ps-who { display: none; }
  .ps-hero-inner { padding: 40px 0 44px; }
  .ps-hero-lead { font-size: 15.5px; }
  .ps-search { padding-left: 16px; }
  .ps-search input { height: 54px; font-size: 16px; }
  .ps-search-go { padding: 0 14px; }
  .ps-cta { padding: 26px 22px; }
  .ps-footer-inner { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-category, .ps-door, .ps-result { transition: none; }
  .ps-category:hover, .ps-door:hover { transform: none; }
}