/* The public website's own layer.
 *
 * play-base.css is a recognisable subset of the UIdeck Play template and is left that
 * way so it can be re-extracted when upstream moves. Everything PrivateComms decides -
 * colour, typography, dark mode, focus, and the components the template has no answer
 * for - lives here and overrides it.
 *
 * Nothing in this file is loaded by the messenger or by the administration area, and
 * nothing of theirs is loaded here. Three surfaces, three stylesheets.
 *
 * Contents
 *   1.  Tokens, light and dark
 *   2.  Typography
 *   3.  Accessibility: skip link, focus, reduced motion
 *   4.  Header and navigation
 *   5.  Hero, and the product preview drawn in the hero
 *   6.  Sections, cards and lists
 *   7.  Pricing
 *   8.  FAQ
 *   9.  The security architecture diagram
 *   10. Contact form
 *   11. Footer
 *   12. Error pages
 *   13. Reveal-on-scroll
 */

/* ============================================================
   1. Tokens
   ============================================================

   Three states, in this order, exactly as the messenger's theme.css handles them:

     no choice made      -> follow the operating system
     an explicit choice  -> honour it in both directions
     neither supported   -> the light values on :root still apply

   data-pc-theme is the same attribute the authenticated application writes, so somebody
   who chose dark inside the product sees a dark marketing site as well. The public pages
   only read it - there is no theme toggle out here to write it.

   The accent is the Priveloq mark's teal, not the template's #3056d3. A marketing site
   whose colour is not the product's colour looks like a different product the moment
   somebody signs in - and here it also has to agree with the logo sitting next to it. */

:root {
  color-scheme: light;

  /* Two accents, not one, and the distinction is what makes dark mode legible.
     --primary-color is the accent as INK: link text, an eyebrow, an icon, a border. It
     has to lighten in dark mode or it disappears into the page. --primary-solid is the
     accent as a FILL: the background of a button, an avatar, an outgoing message bubble.
     It must NOT lighten, because the white label sitting on it needs the fill to stay
     dark - lightening both is how a primary button ends up at 3:1 in dark mode while a
     check that only looks at text colour reports nothing wrong. */
  --primary-color: #00786c;
  --primary-hover: #00655b;
  --primary-solid: #00786c;
  --primary-solid-hover: #00655b;
  --primary-on-solid: #ffffff;
  --primary-soft: rgba(0, 120, 108, .09);
  --heading-color: #0b1f24;
  --body-color: #4d6168;
  --white: #ffffff;

  --pc-public-bg: #ffffff;
  --pc-public-bg-alt: #f1f7f6;
  --pc-public-surface: #ffffff;
  --pc-public-border: #dbe7e4;
  --pc-public-border-strong: #b9cdc8;
  --pc-public-shadow: 0 8px 30px rgba(18, 22, 38, .07);
  --pc-public-shadow-lg: 0 24px 60px rgba(18, 22, 38, .12);
  --pc-public-ring: rgba(0, 120, 108, .45);
  --pc-public-code: #eef6f4;

  /* Status colours are theme-aware for the same reason the accent is: the light values
     are chosen to pass against a white surface and are 3.7:1 against a near-black one,
     which is a validation message somebody in dark mode has to squint at. */
  --pc-public-success: #0f7a4f;
  --pc-public-danger: #c22a3c;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

@media (prefers-color-scheme: dark) {
  :root:not([data-pc-theme="light"]) {
    color-scheme: dark;

    --primary-color: #2fd4bd;
    --primary-hover: #5ce3ce;

    /* Deliberately unchanged from light. See the note on the light palette. */
    --primary-solid: #00786c;
    --primary-solid-hover: #00655b;
    --primary-soft: rgba(47, 212, 189, .14);
    --heading-color: #eef6f4;
    --body-color: #9fb6b8;

    --pc-public-bg: #0e1618;
    --pc-public-bg-alt: #121d1f;
    --pc-public-surface: #162225;
    --pc-public-border: #253539;
    --pc-public-border-strong: #33474c;
    --pc-public-shadow: 0 8px 30px rgba(0, 0, 0, .45);
    --pc-public-shadow-lg: 0 24px 60px rgba(0, 0, 0, .55);
    --pc-public-ring: rgba(47, 212, 189, .55);
    --pc-public-code: #1d2b2e;
    --pc-public-success: #4ecb95;
    --pc-public-danger: #ff8592;
  }
}

:root[data-pc-theme="dark"] {
  color-scheme: dark;

  --primary-color: #2fd4bd;
  --primary-hover: #5ce3ce;

  /* Deliberately unchanged from light. See the note on the light palette. */
  --primary-solid: #00786c;
  --primary-solid-hover: #00655b;
  --primary-soft: rgba(47, 212, 189, .14);
  --heading-color: #eef6f4;
  --body-color: #9fb6b8;

  --pc-public-bg: #0e1618;
  --pc-public-bg-alt: #121d1f;
  --pc-public-surface: #162225;
  --pc-public-border: #253539;
  --pc-public-border-strong: #33474c;
  --pc-public-shadow: 0 8px 30px rgba(0, 0, 0, .45);
  --pc-public-shadow-lg: 0 24px 60px rgba(0, 0, 0, .55);
  --pc-public-ring: rgba(47, 212, 189, .55);
  --pc-public-code: #1d2b2e;
  --pc-public-success: #4ecb95;
  --pc-public-danger: #ff8592;
}

/* ============================================================
   2. Typography and page surface
   ============================================================ */

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body.pc-public {
  font-family: var(--font);
  background: var(--pc-public-bg);
  color: var(--body-color);
  line-height: 1.65;

  /* The template sets this to keep its decorative shapes from widening the page. Kept,
     and every section below is written so that nothing needs to be clipped: at 390px
     there is no horizontal scrollbar to hide. */
  overflow-x: hidden;
}

.pc-public h1,
.pc-public h2,
.pc-public h3,
.pc-public h4,
.pc-public h5,
.pc-public h6 {
  color: var(--heading-color);
  line-height: 1.25;
}

/* Prose links. Deliberately written as `.pc-public a`, which is a class plus an element
   and therefore outranks a bare `.ud-main-btn` from the template - so every rule below
   that colours a button, a chip or a brand lockup has to carry at least two classes to
   win it back. They all do, and the ones that had to be strengthened to manage it are
   marked. Getting this wrong is not subtle: a button whose label takes the link colour
   is a blue label on a blue button, which is to say a button with no label at all. */
.pc-public a {
  color: var(--primary-color);
}

.pc-public a:hover {
  color: var(--primary-hover);
}

.pc-public .pc-skip-link {
  color: var(--heading-color);
}

.pc-public .ud-section-title {
  margin-bottom: 56px;
}

.pc-public .ud-section-title h2 {
  font-size: 35px;
  line-height: 1.25;

  /* The template title-cases every section heading. The copy on this site is written in
     sentences, and "Everything A Private Conversation Needs" is not one. */
  text-transform: none;
}

.pc-public .ud-section-title p {
  font-size: 17.5px;
  line-height: 1.65;
}

.pc-public .ud-section-title span {
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (max-width: 767px) {
  .pc-public .ud-section-title h2 {
    font-size: 26px;
  }
}

.pc-lead {
  font-size: 18px;
  line-height: 1.7;
}

.pc-muted {
  color: var(--body-color);
}

.pc-section {
  padding: 90px 0;
}

.pc-section-alt {
  background: var(--pc-public-bg-alt);
}

@media (max-width: 767px) {
  .pc-section {
    padding: 60px 0;
  }
}

/* ============================================================
   3. Accessibility
   ============================================================ */

.pc-skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 999;
  padding: 12px 20px;
  border-radius: 6px;
  background: var(--pc-public-surface);
  color: var(--heading-color);
  box-shadow: var(--pc-public-shadow-lg);
  transition: top .2s ease-out;
}

.pc-skip-link:focus {
  top: 16px;
}

/* The template removed focus outlines wholesale; play-base.css has had that rule taken
   out, and this puts a real indicator back. :focus-visible rather than :focus so a mouse
   click on a button does not leave a ring behind it. */
.pc-public a:focus-visible,
.pc-public button:focus-visible,
.pc-public input:focus-visible,
.pc-public textarea:focus-visible,
.pc-public select:focus-visible,
.pc-public summary:focus-visible,
.pc-public [tabindex]:focus-visible {
  outline: 3px solid var(--pc-public-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* On the coloured hero header the accent ring has too little contrast against the
   background it sits on, so the indicator there is white. */
.ud-header:not(.sticky) a:focus-visible,
.ud-header:not(.sticky) button:focus-visible,
.ud-hero a:focus-visible,
.ud-page-banner a:focus-visible,
.ud-footer a:focus-visible,
.ud-footer button:focus-visible {
  outline-color: rgba(255, 255, 255, .9);
}

/* The sprite in Views/Shared/Public/_PublicIcons.cshtml is drawn with strokes, so an
   icon inherits the current text colour rather than carrying one of its own. Sized here
   once; components that need a different size say so themselves. */
.pc-public .pc-icon {
  width: 20px;
  height: 20px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pc-visually-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;
}

/* ============================================================
   3b. Buttons
   ============================================================

   The template defines .ud-main-btn once and then defines its variants only inside the
   sections that happen to use them - .ud-hero-buttons .ud-white-btn, .ud-single-pricing
   .ud-border-btn, and so on. Used anywhere else, .ud-border-btn is a solid primary
   button, which is invisible on the primary-coloured hero it sits on.

   So the variants are defined generically here, and then again for the three surfaces
   that are always the brand gradient regardless of theme: the hero, the closing call to
   action and the sub-page banner. Those three use fixed colours rather than the tokens,
   because a token that flips in dark mode would put near-white text on a white button
   that never changed. */

.pc-public .ud-main-btn {
  font-weight: 600;
  background: var(--primary-solid);
  border-color: var(--primary-solid);

  /* Two classes, to beat the prose-link rule above. Without this the default button is
     primary-on-primary and reads as an empty blue rectangle. */
  color: var(--white);
}

.pc-public .ud-main-btn:hover {
  color: var(--white);
}

/* Secondary action on an ordinary light or dark page surface. */
.pc-public .ud-border-btn {
  background: transparent;
  border-color: var(--pc-public-border-strong);
  color: var(--heading-color);
}

.pc-public .ud-main-btn.ud-border-btn:hover {
  background: var(--primary-soft);
  border-color: var(--primary-color);
  color: var(--primary-color);
}

/* The same button on a brand-coloured band. */
.pc-public .ud-hero .ud-border-btn,
.pc-public .pc-cta .ud-border-btn,
.pc-public .ud-page-banner .ud-border-btn {
  background: transparent;
  border-color: rgba(255, 255, 255, .55);
  color: #ffffff;
}

.pc-public .ud-hero .ud-main-btn.ud-border-btn:hover,
.pc-public .pc-cta .ud-main-btn.ud-border-btn:hover,
.pc-public .ud-page-banner .ud-main-btn.ud-border-btn:hover {
  background: rgba(255, 255, 255, .16);
  border-color: #ffffff;
  color: #ffffff;
}

/* Primary action on a brand-coloured band: solid white, with a blue dark enough to
   stay legible on it in either theme. */
.pc-public .ud-hero-buttons .ud-white-btn,
.pc-public .pc-cta .ud-white-btn {
  background: #ffffff;
  border-color: #ffffff;
  color: #005a51;
}

.pc-public .ud-hero-buttons .ud-main-btn.ud-white-btn:hover,
.pc-public .pc-cta .ud-main-btn.ud-white-btn:hover {
  background: #e6f4f1;
  color: #00463f;
}

/* The navigation bar's call to action. Solid white over the transparent header, solid
   accent once the header has a background under it. */
.pc-public .navbar-btn .ud-white-btn {
  background: #ffffff;
  border-color: #ffffff;
  color: #005a51;
}

.pc-public .navbar-btn .ud-main-btn.ud-white-btn:hover {
  background: #e6f4f1;
  color: #00463f;
}

.pc-public .ud-header.sticky .navbar-btn .ud-white-btn {
  background: var(--primary-solid);
  border-color: var(--primary-solid);
  color: var(--primary-on-solid);
}

.pc-public .ud-header.sticky .navbar-btn .ud-main-btn.ud-white-btn:hover {
  background: var(--primary-solid-hover);
  border-color: var(--primary-solid-hover);
  color: var(--primary-on-solid);
}

.pc-public .navbar-btn .ud-main-btn.ud-login-btn {
  background: transparent;
  border-color: rgba(255, 255, 255, .45);
  color: #ffffff;
}

.pc-public .navbar-btn .ud-main-btn.ud-login-btn:hover {
  background: rgba(255, 255, 255, .16);
  border-color: #ffffff;
  color: #ffffff;
}

.pc-public .ud-header.sticky .navbar-btn .ud-main-btn.ud-login-btn {
  border-color: var(--pc-public-border-strong);
  color: var(--heading-color);
}

.pc-public .ud-header.sticky .navbar-btn .ud-main-btn.ud-login-btn:hover {
  background: var(--primary-soft);
  border-color: var(--primary-color);
  color: var(--primary-color);
}

/* Inside the collapsed panel the header is a light surface whatever the page behind it
   is doing, so a white button there would be white on white. */
@media (max-width: 1199px) {
  .pc-public .navbar-btn .ud-main-btn.ud-white-btn,
  .pc-public .ud-header.sticky .navbar-btn .ud-main-btn.ud-white-btn {
    background: var(--primary-solid);
    border-color: var(--primary-solid);
    color: var(--primary-on-solid);
  }

  .pc-public .navbar-btn .ud-main-btn.ud-login-btn,
  .pc-public .ud-header.sticky .navbar-btn .ud-main-btn.ud-login-btn {
    background: transparent;
    border-color: var(--pc-public-border-strong);
    color: var(--heading-color);
  }
}

/* ============================================================
   4. Header and navigation
   ============================================================ */

.ud-header .navbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--white);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -.2px;
}

.ud-header .navbar-brand img {
  width: 38px;
  height: 38px;
  max-width: none;
}

/* Opaque rather than the template's translucent white. Over the coloured hero a
   translucent bar left the navigation reading as pale grey on pale blue, which is a
   contrast failure at exactly the moment the header becomes the only thing anchoring
   the page. */
.ud-header.sticky {
  background-color: var(--pc-public-bg);
  box-shadow: 0 1px 0 0 var(--pc-public-border), 0 6px 20px rgba(18, 22, 38, .06);
}

.ud-header.sticky .navbar-brand,
.ud-header.sticky .navbar-nav .nav-item > a {
  color: var(--heading-color);
  opacity: 1;
}

.ud-header.sticky .navbar-nav .nav-item > a:hover,
.ud-header.sticky .navbar-nav .nav-item > a[aria-current="page"] {
  color: var(--primary-color);
}

.ud-header .navbar-nav .nav-item > a {
  color: var(--white);
  opacity: .85;
  font-weight: 500;
}

.ud-header .navbar-nav .nav-item > a:hover,
.ud-header .navbar-nav .nav-item > a[aria-current="page"] {
  opacity: 1;
}

/* The current page is marked with a rule under it rather than by colour alone, so it is
   still identifiable to somebody who cannot distinguish the two shades. */
.ud-header .navbar-nav .nav-item > a[aria-current="page"] {
  box-shadow: inset 0 -2px 0 0 currentColor;
}

.ud-header .toggler-icon {
  background-color: var(--white);
}

.ud-header.sticky .toggler-icon {
  background-color: var(--heading-color);
}

.ud-header .navbar-toggler {
  border: 0;
  background: transparent;
  padding: 6px;
}

/* Between 1200px and 1400px the row fits, but only just: at 1200 exactly the seven
   links, the wordmark and the two buttons overshoot by about forty pixels and give the
   page a horizontal scrollbar. The template already tightens item padding for 992-1199
   and then stops; this carries the same idea into the band where the row is now used. */
@media (min-width: 1200px) and (max-width: 1399px) {
  .pc-public .navbar-nav .nav-item {
    padding: 0 8px;
  }

  .pc-public .navbar-nav .nav-item > a {
    padding: 25px 4px;
    font-size: 15px;
  }

  .pc-public .navbar-btn {
    gap: 8px;
  }

  .pc-public .navbar-btn .ud-main-btn {
    padding: 8px 13px;
    font-size: 15px;
  }

  .pc-public .ud-header .navbar-brand {
    font-size: 18px;
  }
}

/* The collapsed navigation, up to 1199px rather than the template's 991px - see the
   comment on the navbar element in _PublicHeader.cshtml for why. The panel is drawn
   here rather than left to the template, whose version is a white box with a white
   background and would be unreadable in dark mode. */
@media (max-width: 1199px) {
  .pc-public .navbar-collapse {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 9;
    width: 100%;
    max-width: 320px;
    display: none;
    padding: 8px 20px 14px;
    margin-top: 10px;
    border-radius: 12px;
    background: var(--pc-public-surface);
    border: 1px solid var(--pc-public-border);
    box-shadow: var(--pc-public-shadow-lg);
  }

  .pc-public .navbar-collapse.show {
    display: block;
  }

  .pc-public .navbar-nav {
    padding: 8px 0;
    display: block;
  }

  .pc-public .ud-header .navbar-nav .nav-item > a,
  .pc-public .ud-header.sticky .navbar-nav .nav-item > a {
    display: block;
    color: var(--heading-color);
    opacity: 1;
    padding: 10px 0;
  }

  .pc-public .ud-header .navbar-nav .nav-item > a[aria-current="page"] {
    color: var(--primary-color);

    /* The underline that marks the current page reads as a divider once the links are
       stacked, so inside the panel the marker is a rule down the leading edge. */
    box-shadow: inset 2px 0 0 0 currentColor;
    padding-left: 12px;
  }

  /* Back into the flow. The template pins this block absolutely below 992px, because in
     the original markup it sits beside the toggle button rather than inside the panel.
     Here it is the last thing in the panel, and left absolute it floats over the
     navigation links instead of sitting under them. */
  .pc-public .ud-header .navbar-btn {
    position: static;
    transform: none;
    display: flex;
    gap: 10px;
    padding: 12px 0 4px;
    border-top: 1px solid var(--pc-public-border);
  }

  .pc-public .ud-header .navbar-btn .ud-main-btn {
    flex: 1;
    text-align: center;
  }
}

.ud-header .navbar-btn {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* -- A page with no coloured band under the header -----------------------------------
   The error pages. Everywhere else the header floats in white over the hero or the
   sub-page banner; here there is neither, so it needs a surface of its own or the
   wordmark and the navigation are white on white. Stated as a body class rather than by
   reusing .sticky, because the scroll handler owns .sticky and would take it straight
   off again at scroll position zero. */

.pc-solid-header .ud-header {
  position: relative;
  background: var(--pc-public-bg);
  box-shadow: 0 1px 0 0 var(--pc-public-border);
}

.pc-solid-header .ud-header .navbar-brand,
.pc-solid-header .ud-header .navbar-nav .nav-item > a {
  color: var(--heading-color);
  opacity: 1;
}

.pc-solid-header .ud-header .toggler-icon {
  background-color: var(--heading-color);
}

.pc-solid-header .navbar-btn .ud-main-btn.ud-white-btn {
  background: var(--primary-solid);
  border-color: var(--primary-solid);
  color: var(--primary-on-solid);
}

.pc-solid-header .navbar-btn .ud-main-btn.ud-login-btn {
  background: transparent;
  border-color: var(--pc-public-border-strong);
  color: var(--heading-color);
}

/* Three classes, to outrank the white-on-brand focus ring the header normally uses:
   there is no brand colour behind it here. */
.pc-solid-header .ud-header a:focus-visible,
.pc-solid-header .ud-header button:focus-visible {
  outline-color: var(--pc-public-ring);
}

/* The header is in the flow on these pages, so the content no longer has to clear it. */
.pc-solid-header .pc-error {
  padding-top: 70px;
}

/* ============================================================
   5. Hero and the product preview
   ============================================================ */

.ud-hero {
  background: linear-gradient(135deg, #00655b 0%, #00786c 45%, #0f9482 100%);
  position: relative;
  padding-bottom: 120px;
  overflow: hidden;
}

.ud-hero .pc-hero-shape {
  position: absolute;
  opacity: .16;
  pointer-events: none;
}

.ud-hero .pc-hero-shape-1 {
  top: 90px;
  left: -60px;
  width: 220px;
}

.ud-hero .pc-hero-shape-2 {
  bottom: 40px;
  right: -60px;
  width: 220px;
}

.ud-hero-content .ud-hero-title {
  font-size: 52px;
  line-height: 1.15;
  letter-spacing: -1px;
}

@media (max-width: 991px) {
  .ud-hero-content .ud-hero-title {
    font-size: 38px;
  }
}

@media (max-width: 767px) {
  .ud-hero-content .ud-hero-title {
    font-size: 30px;
  }
}

.pc-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto 22px;
  padding: 7px 16px;
  border-radius: 999px;

  /* A DARK veil rather than a light one, and the direction matters. Lightening the
     hero behind white 14px text left it at 4.2:1 - under AA, and it read as fine
     because the pill looks subtle either way. Darkening lifts the same label to
     7:1. The border keeps the pill's edge, which is what the white fill was for. */
  background: rgba(0, 0, 0, .16);
  border: 1px solid rgba(255, 255, 255, .28);
  color: var(--white);
  font-size: 14px;
  font-weight: 500;
}

.pc-hero-eyebrow svg {
  width: 15px;
  height: 15px;
}

.ud-hero-buttons {
  flex-wrap: wrap;
}

/* -- The product preview ------------------------------------------------------------
   A browser frame drawn in HTML and CSS rather than a screenshot, for three reasons:
   it weighs nothing next to a picture of a messenger, it cannot go stale against the
   real interface, and there is no possibility of a real conversation, a real name or a
   real address ending up in a marketing asset. Everything in it is invented. */

.pc-preview {
  max-width: 940px;
  margin: 56px auto 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--pc-public-surface);
  box-shadow: var(--pc-public-shadow-lg);
  border: 1px solid rgba(255, 255, 255, .18);
  text-align: left;
}

.pc-preview-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  background: var(--pc-public-bg-alt);
  border-bottom: 1px solid var(--pc-public-border);
}

.pc-preview-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pc-public-border-strong);
}

.pc-preview-url {
  margin-left: 10px;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--pc-public-surface);
  border: 1px solid var(--pc-public-border);
  color: var(--body-color);
  font-size: 12px;
}

.pc-preview-body {
  display: grid;
  grid-template-columns: 232px 1fr;
  min-height: 380px;
}

@media (max-width: 767px) {
  .pc-preview-body {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .pc-preview-sidebar {
    display: none;
  }
}

.pc-preview-sidebar {
  border-right: 1px solid var(--pc-public-border);
  background: var(--pc-public-bg-alt);
  padding: 14px 12px;
}

.pc-preview-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin-bottom: 12px;
  border-radius: 8px;
  background: var(--pc-public-surface);
  border: 1px solid var(--pc-public-border);
  color: var(--body-color);
  font-size: 12px;
}

.pc-preview-chat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  margin-bottom: 3px;
}

.pc-preview-chat.is-active {
  background: var(--primary-soft);
}

.pc-preview-avatar {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--primary-solid);
  color: var(--primary-on-solid);
  font-size: 11px;
  font-weight: 700;
}

.pc-preview-chat-text {
  min-width: 0;
}

.pc-preview-chat-name {
  display: block;
  color: var(--heading-color);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

.pc-preview-chat-line {
  display: block;
  color: var(--body-color);
  font-size: 11.5px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pc-preview-vault {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px dashed var(--pc-public-border-strong);
  color: var(--body-color);
  font-size: 11.5px;
}

.pc-preview-vault svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.pc-preview-main {
  display: flex;
  flex-direction: column;
}

.pc-preview-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--pc-public-border);
}

.pc-preview-head-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.pc-preview-icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--pc-public-bg-alt);
  color: var(--body-color);
}

.pc-preview-icon-btn svg {
  width: 15px;
  height: 15px;
}

.pc-preview-stream {
  flex: 1;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pc-bubble {
  max-width: 78%;
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.5;
}

.pc-bubble-in {
  align-self: flex-start;
  background: var(--pc-public-bg-alt);
  color: var(--heading-color);
  border-bottom-left-radius: 5px;
}

.pc-bubble-out {
  align-self: flex-end;
  background: var(--primary-solid);
  color: var(--primary-on-solid);
  border-bottom-right-radius: 5px;
}

.pc-bubble-media {
  align-self: flex-start;
  width: 210px;
  height: 96px;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(0, 120, 108, .32), rgba(109, 123, 240, .18)),
    var(--pc-public-bg-alt);
  border: 1px solid var(--pc-public-border);
  display: grid;
  place-items: center;
  color: var(--primary-color);
}

.pc-bubble-media svg {
  width: 26px;
  height: 26px;
}

.pc-voice {
  align-self: flex-end;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 13px;
  border-radius: 14px;
  border-bottom-right-radius: 5px;
  background: var(--primary-solid);
  color: var(--primary-on-solid);
  font-size: 12px;
}

.pc-voice svg {
  width: 15px;
  height: 15px;
}

.pc-wave {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 18px;
}

.pc-wave i {
  display: block;
  width: 2px;
  border-radius: 1px;
  background: rgba(255, 255, 255, .75);
}

.pc-typing {
  align-self: flex-start;
  color: var(--body-color);
  font-size: 12px;
  font-style: italic;
}

.pc-preview-composer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-top: 1px solid var(--pc-public-border);
  color: var(--body-color);
  font-size: 13px;
}

.pc-preview-composer svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.pc-preview-composer .pc-preview-placeholder {
  flex: 1;
}

/* ============================================================
   6. Sections, cards and lists
   ============================================================ */

.ud-features {
  background: var(--pc-public-bg-alt);
}

.pc-public .ud-single-feature {
  height: calc(100% - 40px);
  padding: 30px 26px;
  border-radius: 14px;
  background: var(--pc-public-surface);
  border: 1px solid var(--pc-public-border);
  box-shadow: var(--pc-public-shadow);
  transition: transform .25s ease-out, box-shadow .25s ease-out;
}

.pc-public .ud-single-feature:hover {
  transform: translateY(-3px);
  box-shadow: var(--pc-public-shadow-lg);
}

.pc-public .ud-single-feature .ud-feature-icon {
  width: 54px;
  height: 54px;
  border-radius: 13px;
  margin-bottom: 22px;
  background: var(--primary-soft);
  color: var(--primary-color);
}

.pc-public .ud-single-feature .ud-feature-icon svg {
  width: 26px;
  height: 26px;
}

.pc-public .ud-feature-title {
  font-size: 19px;
  margin-bottom: 10px;
}

.pc-public .ud-feature-desc {
  font-size: 15px;
  line-height: 1.65;
}

/* -- Split section: copy on one side, a panel on the other -------------------------- */

.pc-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

@media (max-width: 991px) {
  .pc-split {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

.pc-eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primary-color);
}

.pc-split h2 {
  font-size: 32px;
  margin-bottom: 16px;
}

@media (max-width: 767px) {
  .pc-split h2 {
    font-size: 25px;
  }
}

.pc-check-list {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.pc-check-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  line-height: 1.6;
}

.pc-check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary-soft);
  /* An inline SVG tick, so the list needs neither an icon font nor a network request.
     Encoded rather than base64 so it stays readable in a diff. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5bd7' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 11px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-pc-theme="light"]) .pc-check-list li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d8bf5' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  }
}

:root[data-pc-theme="dark"] .pc-check-list li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d8bf5' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

.pc-panel {
  padding: 30px;
  border-radius: 16px;
  background: var(--pc-public-surface);
  border: 1px solid var(--pc-public-border);
  box-shadow: var(--pc-public-shadow);
}

.pc-panel-tight {
  padding: 24px;
}

/* -- A row of small labelled capabilities ------------------------------------------- */

.pc-chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-top: 26px;
}

.pc-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 11px;
  background: var(--pc-public-surface);
  border: 1px solid var(--pc-public-border);
  color: var(--heading-color);
  font-size: 14.5px;
  font-weight: 500;
}

.pc-public .pc-chip {
  color: var(--heading-color);
  text-decoration: none;
}

.pc-public a.pc-chip:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.pc-chip svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--primary-color);
}

/* -- Numbered steps ------------------------------------------------------------------ */

.pc-steps {
  counter-reset: pc-step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 22px;
  margin-top: 40px;
  padding: 0;
  list-style: none;
}

.pc-steps li {
  position: relative;
  padding: 26px 24px 24px;
  border-radius: 14px;
  background: var(--pc-public-surface);
  border: 1px solid var(--pc-public-border);
}

.pc-steps li::before {
  counter-increment: pc-step;
  content: counter(pc-step);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--primary-solid);
  color: var(--primary-on-solid);
  font-weight: 700;
  font-size: 15px;
}

.pc-steps h3 {
  font-size: 17px;
  margin-bottom: 8px;
}

.pc-steps p {
  font-size: 14.5px;
  margin: 0;
}

/* -- A note the reader should not skim past ------------------------------------------ */

.pc-note {
  margin-top: 28px;
  padding: 18px 22px;
  border-radius: 12px;
  border-left: 4px solid var(--primary-color);
  background: var(--primary-soft);
  color: var(--heading-color);
  font-size: 15px;
}

.pc-note strong {
  color: var(--heading-color);
}

/* -- Call to action ------------------------------------------------------------------ */

.pc-cta {
  padding: 80px 0;
  background: linear-gradient(135deg, #00655b 0%, #00786c 55%, #0f9482 100%);
  text-align: center;
}

.pc-cta h2 {
  color: var(--white);
  font-size: 34px;
  margin-bottom: 14px;
}

@media (max-width: 767px) {
  .pc-cta h2 {
    font-size: 25px;
  }
}

.pc-cta p {
  color: rgba(255, 255, 255, .86);
  font-size: 18px;
  max-width: 620px;
  margin: 0 auto 30px;
}

.pc-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* ============================================================
   7. Pricing
   ============================================================ */

.pc-public .ud-single-pricing {
  height: 100%;
  border-radius: 16px;
  border: 1px solid var(--pc-public-border);
  background: var(--pc-public-surface);
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
}

.pc-public .ud-single-pricing.active {
  border-color: var(--primary-color);
  box-shadow: var(--pc-public-shadow-lg);
}

/* The template's featured tier is a blue gradient card with white text on it. This one
   is an ordinary surface with an accent border instead - a gradient card would need its
   own set of fixed colours to survive dark mode - so the white text the template sets
   has to be put back, or the featured plan is white-on-white and reads as an empty
   card. */
.pc-public .ud-single-pricing.active .ud-pricing-header h3 {
  color: var(--heading-color);
}

.pc-public .ud-single-pricing.active .ud-pricing-header h4,
.pc-public .ud-single-pricing.active .ud-pricing-header p,
.pc-public .ud-single-pricing.active .ud-pricing-body li {
  color: var(--body-color);
}

.pc-public .ud-pricing-header h3 {
  font-size: 21px;
  margin-bottom: 6px;
}

.pc-public .ud-pricing-header p {
  font-size: 14.5px;
  margin-bottom: 18px;
}

.pc-price {
  display: block;
  font-size: 25px;
  font-weight: 700;
  color: var(--primary-color);
  line-height: 1.3;
}

.pc-price-note {
  display: block;
  font-size: 13.5px;
  color: var(--body-color);
}

.pc-public .ud-pricing-body {
  flex: 1;
  padding: 22px 0;
  margin: 22px 0;
  border-top: 1px solid var(--pc-public-border);
  border-bottom: 1px solid var(--pc-public-border);
}

.pc-public .ud-pricing-body ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pc-public .ud-pricing-body li {
  position: relative;

  /* The template centres everything in a pricing card, which puts a tick on the left of
     a centred line and reads as a mistake. The header stays centred; the list of what
     the plan includes does not. */
  text-align: left;
  padding-left: 26px;
  margin-bottom: 11px;
  font-size: 14.5px;
  line-height: 1.55;
}

.pc-public .ud-pricing-body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 14px;
  height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5bd7' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-pc-theme="light"]) .pc-public .ud-pricing-body li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d8bf5' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  }
}

:root[data-pc-theme="dark"] .pc-public .ud-pricing-body li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d8bf5' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

.pc-public .ud-popular-tag {
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--primary-solid);
  color: var(--primary-on-solid);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .06em;
}

.pc-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 26px;
  align-items: stretch;
}

.pc-pricing-cell {
  position: relative;
}

/* ============================================================
   8. FAQ
   ============================================================ */

.pc-public .ud-faq {
  background: var(--pc-public-bg-alt);
}

.pc-public .ud-single-faq {
  margin-bottom: 18px;
  border-radius: 12px;
  border: 1px solid var(--pc-public-border);
  background: var(--pc-public-surface);
  overflow: hidden;
}

.pc-public .ud-faq-btn {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 22px;
  background: transparent;
  border: 0;
  text-align: left;
  color: var(--heading-color);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
}

.pc-public .ud-faq-btn .icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-color);
  transition: transform .2s ease-out;
}

.pc-public .ud-faq-btn .icon svg {
  width: 13px;
  height: 13px;
}

.pc-public .ud-faq-btn[aria-expanded="true"] .icon {
  transform: rotate(180deg);
}

.pc-public .ud-faq-body {
  padding: 0 22px 22px 60px;
  font-size: 15.5px;
  line-height: 1.7;
}

@media (max-width: 575px) {
  .pc-public .ud-faq-body {
    padding-left: 22px;
  }
}

/* ============================================================
   9. Security architecture diagram
   ============================================================

   Markup and CSS rather than an image. A diagram of how a request travels through this
   application is exactly the sort of asset that quietly goes out of date when it is a
   PNG somebody exported once; as a list of boxes it can be edited in the same commit as
   the thing it describes, and it reads correctly to a screen reader without alt text
   trying to summarise a picture. */

.pc-architecture {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pc-arch-node {
  padding: 18px 22px;
  border-radius: 12px;
  background: var(--pc-public-surface);
  border: 1px solid var(--pc-public-border);
}

.pc-arch-node h3 {
  font-size: 16px;
  margin-bottom: 4px;
}

.pc-arch-node p {
  margin: 0;
  font-size: 14px;
}

.pc-arch-node-accent {
  border-color: var(--primary-color);
  background: var(--primary-soft);
}

.pc-arch-arrow {
  display: grid;
  place-items: center;
  color: var(--pc-public-border-strong);
}

.pc-arch-arrow svg {
  width: 18px;
  height: 18px;
}

.pc-arch-branches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pc-arch-branch {
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--pc-public-border);
  background: var(--pc-public-bg-alt);
  font-size: 14px;
  font-weight: 500;
  color: var(--heading-color);
}

.pc-arch-branch span {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--body-color);
}

/* ============================================================
   10. Contact form
   ============================================================ */

.pc-public .ud-contact {
  background: var(--pc-public-bg-alt);
}

/* The template pushes 150px between this heading and the details under it, because in
   the original design the panel is nearly empty. Ours is not. */
.pc-public .ud-contact-title {
  margin-bottom: 28px;
  font-size: 24px;
}

.pc-public .ud-contact-form-title {
  font-size: 24px;
  margin-bottom: 26px;
}

.pc-public .ud-contact-form-wrapper,
.pc-public .ud-contact-info-wrapper {
  background: var(--pc-public-surface);
  border: 1px solid var(--pc-public-border);
  border-radius: 16px;
  box-shadow: var(--pc-public-shadow);
  padding: 34px;
  height: 100%;
}

.pc-public .ud-form-group {
  margin-bottom: 22px;
}

.pc-public .ud-form-group label {
  font-size: 14px;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 6px;
}

.pc-public .ud-form-group input,
.pc-public .ud-form-group textarea {
  padding: 11px 14px;
  border: 1px solid var(--pc-public-border-strong);
  border-radius: 8px;
  background: var(--pc-public-bg);
  color: var(--heading-color);
  font-size: 15px;
  font-family: inherit;
}

.pc-public .ud-form-group input:focus,
.pc-public .ud-form-group textarea:focus {
  border-color: var(--primary-color);
}

.pc-public .ud-form-group input.input-validation-error,
.pc-public .ud-form-group textarea.input-validation-error {
  border-color: var(--pc-public-danger);
}

/* The framework emits the validation summary and each field's message container on
   every render and marks them valid when there is nothing to say. Left visible they
   would be an empty red panel and a row of empty gaps on a form nobody has submitted
   yet. */
.pc-public .validation-summary-valid,
.pc-public .field-validation-valid {
  display: none;
}

.pc-public .validation-summary-errors ul {
  margin: 0;
  padding-left: 18px;
  list-style: disc;
}

.pc-field-error {
  display: block;
  margin-top: 6px;
  color: var(--pc-public-danger);
  font-size: 13.5px;
}

.pc-field-hint {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--body-color);
}

/* The honeypot. Off-screen, out of the tab order and hidden from the accessibility
   tree, so no person can reach it by any means and a form-filler that reads the DOM
   fills it in. */
.pc-hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.pc-alert {
  padding: 16px 20px;
  border-radius: 10px;
  margin-bottom: 26px;
  font-size: 15px;
  border: 1px solid transparent;
}

.pc-alert-success {
  background: rgba(23, 145, 95, .1);
  border-color: rgba(23, 145, 95, .35);
  color: var(--pc-public-success);
}

.pc-alert-error {
  background: rgba(207, 53, 70, .09);
  border-color: rgba(207, 53, 70, .35);
  color: var(--pc-public-danger);
}

.pc-contact-detail {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 24px;
}

.pc-contact-detail svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--primary-color);
}

.pc-contact-detail h3 {
  font-size: 16px;
  margin-bottom: 3px;
}

.pc-contact-detail p {
  margin: 0;
  font-size: 14.5px;
}

/* ============================================================
   11. Footer
   ============================================================ */

.pc-public .ud-footer {
  background: #0d1b1e;
  position: relative;
  overflow: hidden;
}

.pc-public .ud-footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--white);
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 16px;
}

.pc-public .ud-footer-logo img {
  width: 34px;
  height: 34px;
  max-width: none;
}

.pc-public .ud-widget-desc {
  color: #9fb6b8;
  font-size: 14.5px;
  max-width: 300px;
}

.pc-public .ud-widget-title {
  color: var(--white);
  font-size: 16px;
  margin-bottom: 18px;
}

.pc-public .ud-widget-links li a {
  color: #9fb6b8;
  font-size: 14.5px;
  line-height: 2;
}

.pc-public .ud-widget-links li a:hover {
  color: var(--white);
}

.pc-public .ud-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 22px 0;
  margin-top: 30px;
}

.pc-public .ud-footer-bottom-left li a,
.pc-public .ud-footer-bottom-right {
  color: #86a0a3;
  font-size: 13.5px;
}

.pc-public .ud-footer-bottom-left {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ============================================================
   12. Sub-page banner and error pages
   ============================================================ */

.pc-public .ud-page-banner {
  background: linear-gradient(135deg, #00655b 0%, #00786c 55%, #0f9482 100%),
    url("../images/banner/banner-bg.svg");
  background-blend-mode: overlay;
  padding-top: 150px;
  padding-bottom: 80px;
}

/* The colour is restated, not inherited. `.pc-public h1` and the template's
   `.ud-banner-content h1` have identical specificity, so whichever file loads second
   decides - and this one does, which would otherwise put the page's dark heading colour
   on the brand-coloured banner. */
.pc-public .ud-banner-content h1 {
  font-size: 40px;
  margin-bottom: 12px;
  color: #ffffff;
}

@media (max-width: 767px) {
  .pc-public .ud-banner-content h1 {
    font-size: 28px;
  }
}

.pc-banner-lead {
  color: rgba(255, 255, 255, .85);
  font-size: 18px;
  max-width: 640px;
  margin: 0;
}

.pc-error {
  padding: 150px 0 100px;
  text-align: center;
}

.pc-error-code {
  font-size: 96px;
  font-weight: 800;
  line-height: 1;
  color: var(--primary-color);
  margin-bottom: 12px;
}

@media (max-width: 767px) {
  .pc-error-code {
    font-size: 64px;
  }
}

.pc-error h1 {
  font-size: 30px;
  margin-bottom: 14px;
}

.pc-error p {
  max-width: 520px;
  margin: 0 auto 30px;
  font-size: 17px;
}

.pc-error-reference {
  margin-top: 32px;
  font-size: 13px;
  color: var(--body-color);
}

.pc-error-reference code {
  padding: 2px 8px;
  border-radius: 5px;
  background: var(--pc-public-code);
  color: var(--heading-color);
}

/* -- Back to top --------------------------------------------------------------------
   The template shows and hides this with an inline display style. It is a button here,
   toggled with the hidden attribute instead, so that while it is out of view it is also
   out of the tab order rather than merely invisible to somebody using a mouse. */

.pc-public .back-to-top {
  display: grid;
  place-items: center;
  border: 0;
  background: var(--primary-solid);
  color: var(--primary-on-solid);
  transform: rotate(180deg);
}

.pc-public .back-to-top .pc-icon {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

/* ============================================================
   13. Reveal-on-scroll
   ============================================================

   The template ships WOW.js and animate.css for this. Neither is here: between them
   they are about twelve kilobytes to move an element twenty pixels, WOW.js has not been
   released since 2016, and it has no notion of prefers-reduced-motion - it would animate
   regardless of what the visitor asked their operating system for.

   What replaces them is an IntersectionObserver in public-site.js and these two rules.
   Anything marked data-pc-reveal starts slightly low and transparent and settles when it
   scrolls into view, once. */

[data-pc-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease-out, transform .5s ease-out;
  transition-delay: var(--pc-reveal-delay, 0ms);
}

[data-pc-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* Two safety nets. The first honours a stated preference for less motion; the second
   makes sure that if the script does not run at all - blocked, failed, unsupported - the
   content is visible rather than permanently transparent. */
@media (prefers-reduced-motion: reduce) {
  [data-pc-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .pc-public *,
  .pc-public *::before,
  .pc-public *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

html:not(.pc-js) [data-pc-reveal] {
  opacity: 1;
  transform: none;
}

/* ============================================================
   14. Print
   ============================================================

   Somebody printing the privacy notice or the terms is a real thing, and the reveal is
   the reason they would otherwise get blank pages: a section the reader never scrolled
   past is still at opacity 0 when the print stylesheet takes over. Everything is
   revealed here, and the chrome that only makes sense on screen is dropped. */

@media print {
  [data-pc-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  .pc-public .ud-header,
  .pc-public .back-to-top,
  .pc-public .pc-skip-link,
  .pc-public .pc-hero-shape {
    display: none !important;
  }

  .pc-public {
    background: #ffffff;
    color: #000000;
  }

  .pc-public .ud-page-banner,
  .pc-public .pc-cta,
  .pc-public .ud-footer {
    background: none !important;
  }

  .pc-public .ud-banner-content h1,
  .pc-public .pc-banner-lead {
    color: #000000 !important;
  }

  .pc-public .pc-section,
  .pc-public .ud-features,
  .pc-public .ud-faq {
    padding: 18px 0;
  }

  /* An accordion prints as whatever it happens to be showing, which is a column of
     headings. Open it. */
  .pc-public .ud-faq-body[hidden] {
    display: block !important;
  }
}