@charset "UTF-8";

:root {
  --fp-navy: #11162d;
  --fp-coral: #ff5f56;
  --fp-light-blue: #A0C1E5;
  --fp-light-gray: #F5F7FB;
  --fp-medium-gray: #6B7280;
  --fp-dark-gray: #1F2937;
  --fp-white: #FFFFFF;
  /* Derived values */
  --fp-radius: 10px;
  --fp-shadow: 0 12px 30px rgba(0,0,0,0.12);
  --fp-shadow-soft: 0 2px 10px rgba(0,0,0,0.06);
  --fp-shadow-lift: 3px 3px 8px rgba(0,0,0,0.2);
  --fp-transition: 0.2s ease;
  --fp-font: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  /* Horizontal spacing scale (kept constant per breakpoint):
       --fp-gutter      screen edge → header card / white body-card edge / hero content block
       --fp-content-pad card/hero edge → text content (so hero + card content align vertically) */
  --fp-gutter: 30px;
  --fp-content-pad: 30px;
}
@media (max-width: 768px) {
  :root { --fp-gutter: 20px; --fp-content-pad: 20px; }
}
@media (max-width: 640px) {
  :root { --fp-gutter: 12px; --fp-content-pad: 12px; }
}

* { box-sizing: border-box; }

/* Global guard against horizontal overflow. `clip` (not `hidden`) prevents any
   stray-wide element from creating a horizontal scrollbar WITHOUT establishing a
   scroll container — so it doesn't break the article page's position:sticky rail. */
html { overflow-x: clip; }

/* Body is the page column so the footer sits at the bottom of the viewport on
   pages whose content is shorter than it — otherwise the footer stops wherever
   the content ends and leaves the body background below it. <main> takes the
   slack; the skip link is position:absolute, so it stays out of the column. */
body {
  margin: 0;
  font-family: var(--fp-font);
  background: var(--fp-light-gray);
  color: var(--fp-dark-gray);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;   /* excludes mobile browser chrome where supported */
}
body > main { flex: 1 0 auto; }
body > .fp-footer { flex-shrink: 0; }

a {
  color: var(--fp-navy);
  text-decoration: none;
}

a:hover, a:focus { text-decoration: none; }

h1, h2, h3, h4 { margin: 0 0 12px; font-family: var(--fp-font); }

h1 {
  font-size: 48px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.1em;
  text-decoration: none;
  text-transform: none;
}

h2 {
  font-size: 38px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.1em;
  text-decoration: none;
  text-transform: none;
}

h3 {
  font-size: 34px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.1em;
  text-decoration: none;
  text-transform: none;
}

p {
  font-family: var(--fp-font);
  font-style: normal;
  letter-spacing: 0;
  line-height: 1.4em;
  text-decoration: none;
  text-transform: none;
}

.fp-container {
  width: 100%;
  margin: 0 auto;
  padding: 0 30px;
}

.fp-main-container {
  width: 100%;
  margin: 0 auto;
  padding: 90px;
}

/* Skip link */
.skip-navigation {
  position: absolute;
  left: -999px;
  top: auto;
  padding: 12px 16px;
  background: var(--fp-navy);
  color: var(--fp-white);
  border-radius: var(--fp-radius);
  z-index: -1;
}
.skip-navigation:focus { left: 12px; top: 12px; z-index: 999; }

/* Links used as subtle actions */
.fp-link {
  color: var(--fp-light-blue);
  font-weight: 600;
}
.fp-link:hover { color: var(--fp-white); text-decoration: none; }

/* Buttons */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--fp-radius);
  font-weight: 600;
  font-size: 15px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--fp-transition), color var(--fp-transition);
}

.fp-button-primary {
  background: var(--fp-coral);
  color: var(--fp-navy);
  box-shadow: var(--fp-shadow-soft);
}
.fp-button-primary:hover, .fp-button-primary:focus {
  background: var(--fp-navy);
  color: var(--fp-white);
}

/* Header */
/* --------------------------------------------------------------------------
   Support banner (content from {{dc 'support_message'}}, shown/parsed by script.js)
   Sticky + in-flow: it pushes the page down by itself; only the fixed header
   needs offsetting, via --fp-banner-h (set by script.js while visible).
   -------------------------------------------------------------------------- */
.fp-banner {
  position: sticky;
  top: 0;
  z-index: 130;
  background: var(--fp-coral);
}
.fp-banner[hidden] { display: none; }

.fp-banner-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 10px 52px;
  color: var(--fp-navy);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

.fp-banner-btn {
  display: inline-flex;
  align-items: center;
  background: var(--fp-navy);
  color: var(--fp-white);
  border-radius: 8px;
  padding: 5px 14px;
  margin-left: 10px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--fp-transition);
}
.fp-banner-btn:hover { background: #1c2b4a; color: var(--fp-white); }

/* Whole-banner link: stretched over the banner (keyboard/screen-reader friendly) */
.fp-banner-link { color: inherit; text-decoration: none; }
.fp-banner-link:hover { text-decoration: underline; }
.fp-banner-link::after { content: ""; position: absolute; inset: 0; }
.fp-banner-clickable:hover { background: #ff6f67; }

.fp-banner-close {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;               /* above the stretched link */
  display: flex;
  padding: 8px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--fp-navy);
  opacity: 0.7;
}
.fp-banner-close:hover { opacity: 1; }

.fp-header {
  position: fixed;
  top: var(--fp-banner-h, 0px);
  left: 0;
  right: 0;
  z-index: 120;
  padding: 0 var(--fp-gutter);   /* header card edge aligns with the white body-card edge */
  background: transparent;
}

.fp-header-wrap {
  width: 100%;
}

.fp-header-hat {
  display: flex;
  justify-content: flex-end;
  padding: 8px 0 6px;
}

.fp-hat-link {
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}
.fp-hat-link:hover { color: var(--fp-white); }

.fp-header-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
}

.fp-header-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 24px;
  background: var(--fp-navy);
  border-radius: var(--fp-radius);
  box-shadow: 0 0 4px 4px hsla(0,0%,100%,.02);
  flex: 1;
}

.fp-header-nav {
  display: flex;
  align-items: center;
}

.fp-header-nav .fp-link {
  font-weight: 500;
  white-space: nowrap;   /* keep "ForwardPass Home" on one line, don't blow out the header */
}

.fp-brand { display: inline-flex; align-items: center; gap: 10px; }

.fp-logo-img {
  height: 33px;
  width: auto;
  display: block;
}
/* Full logo by default; the compact mark swaps in on very narrow screens (below).
   .fp-no-mark is added by the mark img's onerror when no small logo is available,
   so it safely reverts to the full logo. */
.fp-logo-mark { display: none; }

.fp-link-light { color: rgba(255,255,255,0.9); }
.fp-link-light:hover { color: var(--fp-white); text-decoration: none; }

.fp-header-cta {
  white-space: nowrap;
  padding: 16px 28px;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--fp-radius);
  align-self: stretch;
  display: flex;
  align-items: center;
}

/* Landing / hero */

.fp-hero {
  padding: 130px 0 60px;
  color: var(--fp-white);
  position: relative;
  overflow: hidden;
  min-height: 650px;
  background-color: var(--fp-navy);
  background-size: cover;
  background-position: center;
}


.fp-hero-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 48px;
  align-items: center;
  padding: 120px;
}

.fp-kicker { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--fp-light-blue); margin: 0 0 12px; }

.fp-lede { font-size: 18px; max-width: 520px; margin: 0 0 24px; color: rgba(255,255,255,0.86); }



.fp-card-top { display: flex; gap: 6px; margin-bottom: 14px; }
.fp-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e2e8f0;
}

.fp-card-body { background: #f8fafc; border-radius: 12px; padding: 16px; }

.fp-request-form-wrapper {
  margin-top: 16px;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.fp-request-form-wrapper .request-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fp-request-form-wrapper .form-field {
  margin-bottom: 12px;
}

.fp-request-form-wrapper .form-field label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: var(--fp-dark-gray);
  font-size: 14px;
}

.fp-request-form-wrapper .form-field input[type="text"],
.fp-request-form-wrapper .form-field input[type="email"],
.fp-request-form-wrapper .form-field select,
.fp-request-form-wrapper .form-field textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-family: var(--fp-font);
  font-size: 14px;
  background: var(--fp-white);
}

.fp-request-form-wrapper .form-field input:focus,
.fp-request-form-wrapper .form-field select:focus,
.fp-request-form-wrapper .form-field textarea:focus {
  outline: none;
  border-color: var(--fp-light-blue);
  box-shadow: 0 0 0 3px rgba(157, 196, 224, 0.1);
}

.fp-request-form-wrapper .request-form-footer {
  margin-top: 16px;
}

.fp-request-form-wrapper .request-submit-button {
  background: var(--fp-coral);
  color: var(--fp-navy);
  border: none;
  padding: 12px 24px;
  border-radius: var(--fp-radius);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background var(--fp-transition);
  width: 100%;
}

.fp-request-form-wrapper .request-submit-button:hover {
  background: var(--fp-navy);
  color: var(--fp-white);
}

.fp-request-form-wrapper .request-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 16px;
}

.fp-request-form-wrapper .request-checkbox input[type="checkbox"] {
  margin-top: 2px;
}

.fp-request-form-wrapper .request-checkbox label {
  font-size: 12px;
  line-height: 1.4;
  color: var(--fp-medium-gray);
}

.fp-request-form-wrapper input[type="submit"] {
  background: var(--fp-light-blue);
  color: var(--fp-navy);
  border: none;
  padding: 12px 24px;
  border-radius: var(--fp-radius);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background var(--fp-transition);
  font-family: var(--fp-font);
}

.fp-request-form-wrapper input[type="submit"]:hover {
  background: var(--fp-coral);
  color: var(--fp-navy);
}

/* HubSpot forms embedded in article bodies (initHubspotForms in script.js).
   The embed passes css:"" so HubSpot ships none of its own styling except a
   small per-instance block it injects at runtime (float columns, fixed input
   metrics). Everything else fell back to browser defaults, which is why these
   forms read as a different product to the request form. The rules below
   mirror .fp-request-form-wrapper above so the two share one language.

   Two specificity notes, both load-bearing:
   - The doubled [id] outweighs HubSpot's per-render form class
     (.hs-form-<guid>_<random>), which is injected after the theme CSS.
   - HubSpot's own input rule is `.hs-custom-style fieldset input` plus six
     :not([type=…]) clauses, so the padding/min-height reset below has to
     carry a matching :not() list to outweigh it. Splitting box metrics from
     the visual rule keeps the rest at a sane weight. */

[id^="HubspotForm-"][id] { margin: 1.5em 0; }
[id^="HubspotForm-"][id] .hs-form { font-family: var(--fp-font); }

/* Rows — flex replaces HubSpot's floats so the gutter is a real gutter. */
[id^="HubspotForm-"][id] .hs-form fieldset.form-columns-1,
[id^="HubspotForm-"][id] .hs-form fieldset.form-columns-2,
[id^="HubspotForm-"][id] .hs-form fieldset.form-columns-3 { display: flex; gap: 16px; max-width: none; margin: 0; padding: 0; border: 0; }
[id^="HubspotForm-"][id] .hs-form fieldset > .hs-form-field,
[id^="HubspotForm-"][id] .hs-form fieldset > .legal-consent-container { flex: 1 1 0; min-width: 0; width: auto; float: none; margin-bottom: 20px; }
/* HubSpot's own 8px gutter shim — the flex gap replaces it. */
[id^="HubspotForm-"][id] .hs-form .hs-form-field .input { margin-right: 0; }

[id^="HubspotForm-"][id] .hs-form .hs-form-field > label { display: block; margin-bottom: 6px; font-weight: 500; font-size: 14px; color: var(--fp-dark-gray); }
[id^="HubspotForm-"][id] .hs-form .hs-form-required { color: var(--fp-coral); }
/* Field help text — HubSpot emits it as a <legend>, hence the explicit display. */
[id^="HubspotForm-"][id] .hs-form .hs-field-desc { display: block; margin: 0 0 6px; padding: 0; font-size: 13px; line-height: 1.4; color: var(--fp-medium-gray); }

/* Fields — appearance. */
[id^="HubspotForm-"][id] .hs-form .hs-input:not([type="checkbox"]):not([type="radio"]) { width: 100%; max-width: 100%; box-sizing: border-box; border: 1px solid #e2e8f0; border-radius: 6px; font-family: var(--fp-font); font-size: 14px; color: var(--fp-dark-gray); background: var(--fp-white); }
/* Fields — box metrics. Only these collide with HubSpot's injected rule, so
   only these carry the heavier selector. */
[id^="HubspotForm-"][id] .hs-form input.hs-input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="image"]),
[id^="HubspotForm-"][id] .hs-form select.hs-input,
[id^="HubspotForm-"][id] .hs-form textarea.hs-input { padding: 10px 12px; min-height: 0; }
[id^="HubspotForm-"][id] .hs-form textarea.hs-input { min-height: 120px; resize: vertical; }
/* :focus and .invalid repeat the :not() pair so they outweigh the border set
   by the appearance rule above. */
[id^="HubspotForm-"][id] .hs-form .hs-input:not([type="checkbox"]):not([type="radio"]):focus { outline: none; border-color: var(--fp-light-blue); box-shadow: 0 0 0 3px rgba(157, 196, 224, 0.1); }
[id^="HubspotForm-"][id] .hs-form .hs-input.invalid:not([type="checkbox"]):not([type="radio"]) { border-color: var(--fp-coral); }

/* Checkbox/radio rows. These are <ul>s inside .article-body, so without a
   reset they pick up the article's bullets and indent. */
[id^="HubspotForm-"][id] .hs-form ul.inputs-list { list-style: none; margin: 0; padding: 0; }
[id^="HubspotForm-"][id] .hs-form ul.inputs-list li { margin: 0 0 8px; }
[id^="HubspotForm-"][id] .hs-form ul.inputs-list li:last-child { margin-bottom: 0; }
[id^="HubspotForm-"][id] .hs-form ul.inputs-list label { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.4; color: var(--fp-dark-gray); }
/* HubSpot indents the caption by 20px; the flex gap owns that spacing now. */
[id^="HubspotForm-"][id] .hs-form ul.inputs-list label > span { margin-left: 0; }
[id^="HubspotForm-"][id] .hs-form ul.inputs-list input[type="checkbox"],
[id^="HubspotForm-"][id] .hs-form ul.inputs-list input[type="radio"] { flex: none; width: auto; margin: 3px 0 0; float: none; }

/* Consent copy sits quieter than the fields, as on the request form. */
[id^="HubspotForm-"][id] .hs-form .legal-consent-container,
[id^="HubspotForm-"][id] .hs-form .legal-consent-container ul.inputs-list label { font-size: 12px; line-height: 1.4; color: var(--fp-medium-gray); }
[id^="HubspotForm-"][id] .hs-form .legal-consent-container p { margin: 0; }

/* Validation messages arrive as .inputs-list too, so they need the heavier
   selector to escape the checkbox-row styling above. */
[id^="HubspotForm-"][id] .hs-form ul.hs-error-msgs { margin: 6px 0 0; }
[id^="HubspotForm-"][id] .hs-form ul.hs-error-msgs li label { display: block; font-size: 13px; font-weight: 400; color: var(--fp-coral); }

/* Submit — mirrors .fp-request-form-wrapper input[type="submit"]. */
[id^="HubspotForm-"][id] .hs-form .hs-button { -webkit-appearance: none; appearance: none; width: auto; background: var(--fp-light-blue); color: var(--fp-navy); border: none; padding: 12px 24px; border-radius: var(--fp-radius); font-family: var(--fp-font); font-weight: 600; font-size: 15px; line-height: 1.2; cursor: pointer; transition: background var(--fp-transition); }
[id^="HubspotForm-"][id] .hs-form .hs-button:hover { background: var(--fp-coral); color: var(--fp-navy); }

/* Inline thank-you that replaces the form on submit (inlineMessage: true). */
[id^="HubspotForm-"][id] .submitted-message { font-size: 15px; line-height: 1.6; color: var(--fp-dark-gray); }

@media (max-width: 768px) {
  [id^="HubspotForm-"][id] .hs-form fieldset.form-columns-2,
  [id^="HubspotForm-"][id] .hs-form fieldset.form-columns-3 { flex-direction: column; gap: 0; }
}

/* Request Page */
.fp-request-page {
  background: var(--fp-light-gray);
}

.fp-small-hero {
  background-color: var(--fp-navy);
  height: 250px;
  color: var(--fp-white);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.fp-request-content {
  display: grid;
  grid-template-columns: 30% 1fr;
  gap: 48px;
  align-items: start;
}

.fp-request-info h2 {
  font-size: 38px;
  margin-bottom: 16px;
  color: var(--fp-navy);
}

.fp-request-info .fp-lede {
  font-size: 18px;
  margin-bottom: 32px;
  color: var(--fp-dark-gray);
}

.fp-sla-info {
  background: var(--fp-white);
  padding: 24px;
  border-radius: var(--fp-radius);
  box-shadow: var(--fp-shadow-soft);
}

.fp-sla-info h3 {
  font-size: 20px;
  margin-bottom: 16px;
  color: var(--fp-navy);
}

.fp-sla-info ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fp-sla-info li {
  padding: 8px 0;
  border-bottom: 1px solid #f1f5f9;
  position: relative;
  padding-left: 24px;
}

.fp-sla-info li:last-child {
  border-bottom: none;
}

.fp-sla-info li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--fp-coral);
  font-weight: 700;
}

.fp-request-form-section {
  min-width: 0;
  overflow: hidden;
}

.fp-hero-form-card {
  position: relative;
  background: var(--fp-white);
  border-radius: 16px;
  padding: 18px;
  box-shadow: var(--fp-shadow);
  z-index: 1;
  max-width: 100%;
  width: 100%;
}
/* ==========================================================================
   Footer — 3-column HubSpot-mirror layout
   ========================================================================== */
.fp-footer {
  background: var(--fp-navy);
  color: rgba(255, 255, 255, 0.8);
}

.fp-footer-inner {
  display: flex;
  gap: 40px;
  padding: 40px 30px;
  align-items: flex-start;
}

/* Right col: logo + social */
.fp-footer-brand {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-end;
  margin-left: auto;
}

.fp-footer-logo .fp-logo-img {
  height: 36px;
  width: auto;
}

.fp-footer-contact-label {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
}

/* Center/Right cols */
.fp-footer-col {
  flex: 1;
}

.fp-footer-col-title {
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 16px;
}

.fp-footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fp-footer-col ul li {
  margin-bottom: 10px;
}

.fp-footer-col ul li a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 14px;
  transition: color var(--fp-transition);
}

.fp-footer-col ul li a:hover {
  color: var(--fp-coral);
}

/* Social icons row */
.fp-footer-social-icons {
  display: flex;
  gap: 14px;
  margin-top: 4px;
}

.fp-footer-social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.7);
  transition: color var(--fp-transition);
}

.fp-footer-social-icons a:hover {
  color: var(--fp-coral);
}

.fp-footer-social-icons svg {
  width: 20px;
  height: 20px;
}

/* Bottom bar */
.fp-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 20px 0;
}

.fp-footer-bottom-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  /* nowrap so the language selector stays pinned far-right (popup visible); the
     copyright text wraps instead — e.g. "All Rights Reserved." drops to a 2nd line. */
  flex-wrap: nowrap;
}

.fp-footer-copy {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
  margin: 0;
}
.fp-footer-copy .fp-nowrap { white-space: nowrap; }
.fp-footer-bottom .fp-lang-dropdown { flex-shrink: 0; }

/* Coral accent for portal login link */
.fp-salmon-link {
  color: var(--fp-coral) !important;
  text-decoration: none;
  font-weight: 500;
}

.fp-salmon-link:hover {
  color: var(--fp-coral) !important;
  text-decoration: underline;
}

/* Language switcher in footer bottom bar */
.fp-footer-bottom .fp-lang-dropdown .dropdown-toggle {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.fp-footer-bottom .fp-lang-dropdown .dropdown-menu {
  background: var(--fp-navy);
  border: 1px solid rgba(255, 255, 255, 0.15);
  top: auto;
  bottom: 100%;
  left: auto;
  right: 0;
  margin-top: 0;
  margin-bottom: 6px;
  min-width: 200px;
  white-space: nowrap;
}

.fp-footer-bottom .fp-lang-dropdown .dropdown-menu a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
}

.fp-footer-bottom .fp-lang-dropdown .dropdown-menu a:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--fp-white);
}

/* Responsive — stack columns on mobile */
@media (max-width: 768px) {
  .fp-footer-inner {
    flex-direction: column;
    gap: 32px;
  }
  .fp-container.fp-footer-inner { padding: 30px; }
}

@media (max-width: 640px) {
  .fp-container.fp-footer-inner { padding: 16px; }
}

.fp-lang-dropdown .dropdown-toggle {
  background: transparent;
  color: rgba(255,255,255,0.9);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--fp-radius);
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.dropdown {
  position: relative;
}

.dropdown-menu {
  display: none;
  position: absolute;
  background: var(--fp-white);
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 8px;
  margin-top: 6px;
  box-shadow: var(--fp-shadow-soft);
  z-index: 100;
}

.dropdown.is-open .dropdown-menu { display: block; }

.dropdown-menu a {
  display: block;
  padding: 8px 10px;
  color: var(--fp-dark-gray);
  border-radius: 6px;
}
.dropdown-menu a:hover { background: #f1f5f9; }

/* Responsive Styles */

/* Tablet (768px and below) */
@media (max-width: 768px) {
  /* Containers — horizontal insets come from --fp-gutter / --fp-content-pad */
  .fp-container { padding: 0 24px; }
  .fp-main-container { padding: 60px 40px; }

  /* Header */
  .fp-header-hat { display: none; }
  .fp-header-card { padding: 12px 16px; }
  .fp-header-cta { padding: 12px 16px; font-size: 13px; }
  
  /* Hero Section */
  .fp-hero {
    padding: 160px 0 60px;
    min-height: 600px;
  }
  .fp-hero-home { padding: 80px 0 80px 40px; }
  
  .fp-hero-inner {
    padding: 60px 24px;
    gap: 32px;
    grid-template-columns: 1fr;
  }

  .fp-hero-form {
    max-width: 100%;
    justify-self: center;
  }

  /* Request Page */
  .fp-small-hero {
    height: 200px;
  }
  
  .fp-request-content {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  
  .fp-request-info h2 {
    font-size: 28px;
  }
  
  .fp-hero-form-card {
    max-width: 100%;
  }
  
}

/* Mobile (576px and below) */
@media (max-width: 640px) {
  /* Containers */
  .fp-container { padding: 0 16px; }
  .fp-main-container { padding: 40px 16px; }

  /* Header */
  .fp-header-row { flex-wrap: wrap; }
  .fp-header-cta { width: 100%; justify-content: center; margin-top: 4px; }

  .fp-brand img {
    max-height: 28px;
  }
}

/* Very narrow: swap the full wordmark for the compact mark (if one is available)
   so the brand + nav fit the header row without wrapping/overflowing. */
@media (max-width: 480px) {
  .fp-brand:not(.fp-no-mark) .fp-logo-full { display: none; }
  .fp-brand:not(.fp-no-mark) .fp-logo-mark { display: block; }
}
@media (max-width: 640px) {

  /* Hero Section */
  .fp-hero {
    min-height: 500px;
  }
  .fp-hero-home { padding: 80px 0 80px 30px; min-height: 550px; }

  .fp-hero-inner {
    padding: 40px 16px;
  }

  .fp-lede {
    font-size: 16px;
  }

  .fp-hero-form {
    padding: 16px;
  }

  .fp-hero-form h2 {
    font-size: 18px;
  }

  /* Home search card — smaller top pull/padding; sides track --fp-gutter (base rule) */
  .fp-home-search-card { margin-top: -32px; padding: 16px; }
  .fp-search-submit { padding: 8px 14px; }

  /* Wide author tables scroll instead of forcing the page wider */
  .article-body table { display: block; overflow-x: auto; }

  /* Request Page */
  .fp-small-hero {
    height: 150px;
  }

  .fp-request-info h2 {
    font-size: 24px;
  }

  .fp-request-info .fp-lede {
    font-size: 16px;
  }

}

/* =============================================
   HOME PAGE
   ============================================= */

.fp-hero-home {
  min-height: 650px;
  background-color: var(--fp-navy);
  --page-hero: none;
  background-image: linear-gradient(135deg, rgba(9,14,28,0.85) 0%, rgba(17,22,45,0.65) 55%, rgba(28,43,74,0.35) 100%), var(--page-hero);
  background-size: cover, cover;
  background-position: center, center;
  display: flex;
  align-items: flex-end;
  padding: 100px 0 80px 60px;
  position: relative;
  overflow: hidden;
}

.fp-hero-home::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
  z-index: 0;
  pointer-events: none;
}

.fp-hero-home .fp-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  position: relative;
  z-index: 1;
  max-width: 600px;
  padding: 0;
  margin: 0;
}

.fp-hero-home .fp-kicker {
  color: var(--fp-light-blue);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 16px;
}

.fp-hero-home h1 {
  color: var(--fp-white);
  font-size: 52px;
  font-weight: 700;
  margin: 0 0 20px;
  line-height: 1.1;
}

.fp-hero-home .fp-lede {
  color: rgba(255,255,255,0.8);
  font-size: 18px;
  margin: 0 0 28px;
  max-width: 500px;
}

.fp-hero-signin {
  margin-top: 14px;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
}

/* Hero search (glassmorphism, lives inside the hero) */
.fp-search-form {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: var(--fp-radius);
  padding: 10px 14px;
  max-width: 520px;
  margin-top: 8px;
}

.fp-search-icon {
  color: rgba(255,255,255,0.6);
  flex-shrink: 0;
}

.fp-search-input {
  flex: 1;
  min-width: 0;   /* allow the input to shrink so the Search button never overflows */
  border: none;
  outline: none;
  font-family: var(--fp-font);
  font-size: 15px;
  color: var(--fp-white);
  background: transparent;
  padding: 4px 0;
}

.fp-search-input::placeholder { color: rgba(255,255,255,0.5); }

.fp-search-submit {
  flex-shrink: 0;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 700;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  background: var(--fp-coral);
  color: var(--fp-navy);
  transition: background var(--fp-transition), color var(--fp-transition);
}

.fp-search-submit:hover { background: var(--fp-white); color: var(--fp-navy); }

/* Home search card — white card overlapping hero/categories boundary */
.fp-home-search-card {
  position: relative;
  z-index: 10;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.12);
  margin: -44px var(--fp-gutter) 0;   /* horizontal inset tracks the shared spacing scale */
  padding: 20px 30px;
}

.fp-home-search-card .fp-search-form {
  background: #f1f5f9;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid #e2e8f0;
  max-width: none;
  width: 100%;
  box-sizing: border-box;
  margin-top: 0;
}

.fp-home-search-card .fp-search-icon { color: rgba(17, 22, 45, 0.45); }

.fp-home-search-card .fp-search-input {
  color: var(--fp-navy);
}

.fp-home-search-card .fp-search-input::placeholder {
  color: rgba(17, 22, 45, 0.4);
}

.fp-home-search-card .fp-hero-signin {
  margin: 8px 0 0;
  font-size: 13px;
  color: rgba(17, 22, 45, 0.5);
}

.fp-home-search-card .fp-hero-signin a { color: var(--fp-coral); }

/* Category section */
.fp-categories-section {
  padding: 48px 0 80px;
}

.fp-section-heading {
  font-size: 28px;
  font-weight: 700;
  color: var(--fp-navy);
  margin: 0 0 36px;
}

.fp-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

/* Photo-led category card: media area (photo, or gradient + glyph placeholder),
   colored icon tile overlapping the boundary, title/desc, coral arrow. */
.fp-category-card {
  display: flex;
  flex-direction: column;
  background: var(--fp-white);
  border: 1px solid #e9e9ee;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--fp-shadow-soft);
  color: var(--fp-dark-gray);
  text-decoration: none;
  transition: box-shadow var(--fp-transition), transform var(--fp-transition), border-color var(--fp-transition);
}

.fp-category-card:hover {
  box-shadow: var(--fp-shadow-lift);
  transform: translateY(-3px);
  border-color: var(--fp-light-blue);
  color: var(--fp-dark-gray);
  text-decoration: none;
}

.fp-category-media {
  position: relative;
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(140px 140px at 94% -12%, rgba(255, 95, 86, 0.32), transparent 70%),
    linear-gradient(135deg, #151b36 0%, #1c2b4a 55%, #27395e 100%);
}

/* Placeholder glyph — soft translucent tile; sits under the photo when one is wired */
.fp-category-media .fp-category-glyph {
  width: 96px;
  height: 96px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.9);
}
.fp-category-media .fp-category-glyph svg { width: 44px; height: 44px; }

.fp-category-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Bias the crop toward the upper-centre so the person's face stays in frame at
     any card aspect ratio (faces sit in the top third of these shots) while the
     full-height locker remains the focus. Retune per image if a photo differs. */
  object-position: 50% 25%;
  transition: transform var(--fp-transition);
}
.fp-category-card:hover .fp-category-photo { transform: scale(1.03); }

.fp-category-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 26px 24px;
}

/* Colored tile overlapping the media/body boundary (white ring so it reads over photos) */
.fp-category-tile {
  position: relative;
  z-index: 1;
  margin: -22px 0 14px;
  border: 3px solid var(--fp-white);
  box-shadow: 0 2px 8px rgba(17, 22, 45, 0.12);
}

.fp-category-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--fp-navy);
  line-height: 1.3;
  margin: 0 0 8px;
}

.fp-category-desc {
  font-size: 14px;
  color: var(--fp-medium-gray);
  margin: 0 0 18px;
  line-height: 1.55;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.fp-category-card .fp-arrow-link { margin-top: auto; }

@media (max-width: 640px) {
  .fp-category-grid { grid-template-columns: 1fr; }
  .fp-hero-home h1 { font-size: 36px; }
  .fp-hero-home { padding: 80px 0 80px 16px; }
}

/* ==========================================================================
   INNER PAGE STYLES — targeting Copenhagen/default Zendesk classes
   ========================================================================== */

/* Container override for inner pages — no max-width, matches FP.io full-width layout */
.container {
  width: 100%;
  padding: 0 var(--fp-content-pad);
}

/* Heading section content aligns with the white-card content: gutter + content pad. */
.heading-section .container {
  padding-left: calc(var(--fp-gutter) + var(--fp-content-pad));
  padding-right: calc(var(--fp-gutter) + var(--fp-content-pad));
}

/* --------------------------------------------------------------------------
   Heading section (mini-hero used on article, category, section, search,
   error pages)
   -------------------------------------------------------------------------- */
/* Shared interior-page hero (category / section / article; profile overrides itself).
   Geometry is centralised here: the .fp-page-body card pulls up -160px (desktop) /
   -120px (mobile ≤768px), so padding-bottom must exceed that overlap — 200px leaves
   ~40px of clearance between the hero content and the card on every page. */
.heading-section {
  background-color: var(--fp-navy);
  --page-hero: none;
  background-image: linear-gradient(135deg, rgba(9,14,28,0.85) 0%, rgba(17,22,45,0.65) 55%, rgba(28,43,74,0.35) 100%), var(--page-hero);
  background-size: cover, cover;
  background-position: center, center;
  min-height: 460px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 90px 0 200px;
  margin-bottom: 0;
  position: relative;
  overflow: hidden;
}

/* Breadcrumb → title gap: 24px on every page (the article/section pages get it
   via .fp-article-hero-head, which carries the same 24px). */
.heading-section h1 {
  color: var(--fp-white);
  font-size: 32px;
  font-weight: 700;
  margin: 24px 0 12px;
  line-height: 1.2;
}

.heading-section .page-header-description {
  color: rgba(255,255,255,0.75);
  font-size: 16px;
  margin: 0;
  max-width: 640px;
}

/* Description + search on the same row at the bottom of the hero */
.heading-section-footer {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 24px;
  min-height: 44px;
  margin-top: 12px;
}

.heading-section-footer .page-header-description {
  flex: 1;
  align-self: flex-end;
}

.heading-section-footer .search-container {
  flex-shrink: 0;
  margin: 0 0 0 auto;
}

@media (max-width: 768px) {
  .heading-section-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .heading-section-footer .page-header-description {
    align-self: auto;
  }
  .heading-section-footer .search-container {
    width: 100%;
    margin: 0;
  }
  .heading-section .heading-section-footer .search-container {
    width: 100%;
  }
}

.heading-section .sub-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* Modern horizontal breadcrumbs */
.heading-section .breadcrumbs ol {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0;
}

.heading-section .breadcrumbs li {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-size: 13px;
  color: rgba(255,255,255,0.65);
}

/* Chevron separator before every item after the first */
.heading-section .breadcrumbs li + li::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 6px;
  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='rgba(255%2C255%2C255%2C0.35)' stroke-linecap='round' d='M4.5 3l3 3-3 3'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

.heading-section .breadcrumbs li::after { content: none; }

.heading-section .breadcrumbs a {
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  transition: color var(--fp-transition);
}
.heading-section .breadcrumbs a:hover { color: var(--fp-white); }

/* Last item (current page) — no link, slightly dimmer */
.heading-section .breadcrumbs li:last-child {
  color: rgba(255,255,255,0.45);
}

/* Replace first item text with home icon */
.heading-section .breadcrumbs li:first-child > a,
.heading-section .breadcrumbs li:first-child > span {
  font-size: 0;
  line-height: 0;
  display: inline-flex;
  align-items: center;
}

.heading-section .breadcrumbs li:first-child > a::before,
.heading-section .breadcrumbs li:first-child > span::before {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='rgba(255%2C255%2C255%2C0.65)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.heading-section .breadcrumbs li:first-child > a:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='rgba(255%2C255%2C255%2C1)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
}

/* Inline search inside heading-section */
.heading-section .search-container {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--fp-radius);
  padding: 8px 14px;
  gap: 8px;
  width: 320px;
  max-width: 100%;
}


.heading-section .search-container .search-icon {
  color: rgba(255,255,255,0.6);
  flex-shrink: 0;
}

.heading-section .search-container input[type="search"],
.heading-section .search-container input[type="text"] {
  background: transparent;
  border: none;
  outline: none;
  color: var(--fp-white);
  font-family: inherit;
  font-size: 14px;
  width: 100%;
}
.heading-section .search-container input::placeholder { color: rgba(255,255,255,0.5); }

/* --------------------------------------------------------------------------
   Article page layout
   -------------------------------------------------------------------------- */
.article-container {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  padding: 48px 0 80px;
}

/* Sidebar */
.article-sidebar {
  flex: 0 0 220px;
  min-width: 0;
}

.collapsible-sidebar {
  background: var(--fp-light-gray);
  border-radius: var(--fp-radius);
  padding: 20px;
  position: sticky;
  top: 90px;
}

.collapsible-sidebar-title,
.sidenav-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fp-medium-gray);
  margin: 0 0 12px;
  display: block;
}

.collapsible-sidebar-toggle {
  display: none; /* hidden on desktop; shown on mobile */
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--fp-navy);
}

.collapsible-sidebar-body ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.collapsible-sidebar-body li {
  margin: 0;
}

.sidenav-item {
  display: block;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--fp-dark-gray);
  text-decoration: none;
  transition: background var(--fp-transition), color var(--fp-transition);
  line-height: 1.4;
}
.sidenav-item:hover {
  background: rgba(17,22,45,0.06);
  color: var(--fp-navy);
  text-decoration: none;
}
.sidenav-item.current-article,
.sidenav-item[aria-current="page"] {
  background: var(--fp-navy);
  color: var(--fp-white);
  font-weight: 600;
}

.article-sidebar-item {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  color: var(--fp-coral);
  text-decoration: none;
  font-weight: 600;
}
.article-sidebar-item:hover { text-decoration: underline; }

/* Article content */
.article {
  flex: 1;
  min-width: 0;
  max-width: 900px;
}

.article-header {
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 24px;
  margin-bottom: 32px;
}

.article-title {
  font-size: 30px;
  font-weight: 700;
  color: var(--fp-navy);
  line-height: 1.25;
  margin: 0 0 16px;
}

.article-author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.article-meta {
  font-size: 13px;
  color: var(--fp-medium-gray);
}
.article-meta a { color: var(--fp-medium-gray); text-decoration: none; }
.article-meta a:hover { color: var(--fp-navy); }

.meta-group {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.meta-data { font-size: 13px; color: var(--fp-medium-gray); }

.avatar { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; }
.user-avatar { width: 100%; height: 100%; object-fit: cover; }

/* Article body typography */
.article-body {
  font-size: 16px;
  line-height: 1.75;
  color: var(--fp-dark-gray);
}
/* Authors use h1 as the top heading level in article bodies — style it on-theme
   (matches the .fp-section-heading scale) instead of the browser-default giant. */
.article-body h1 {
  font-size: 28px;
  font-weight: 700;
  color: var(--fp-navy);
  line-height: 1.25;
  margin: 2em 0 0.6em;
}
.article-body > h1:first-child,
.article-body > h2:first-child { margin-top: 0; }
.article-body h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--fp-navy);
  margin: 2em 0 0.6em;
}
.article-body h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--fp-navy);
  margin: 1.6em 0 0.5em;
}
.article-body h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--fp-navy);
  margin: 1.4em 0 0.4em;
}
.article-body p { margin: 0 0 1.2em; }
.article-body ul, .article-body ol {
  padding-left: 1.5em;
  margin: 0 0 1.2em;
}
.article-body li { margin: 0 0 0.4em; }
.article-body a { color: var(--fp-coral); }
.article-body a:hover { text-decoration: underline; }
/* Card-style links inside article bodies behave like section cards: lift, no underline */
.article-body .card-link:hover { text-decoration: none; }

/* An article-body card may carry an optional icon tile authored next to the
   title (see the card contract in the theme README). Laying .card-content out
   as a wrapping row puts icon and title on one line with the description
   beneath — the same shape as a section card. A card with no tile is
   unaffected: the title simply takes the first row on its own. Scoped to
   .article-body so the templates' own card-grids keep their block layout. */
.article-body .card-content {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: 14px;
  row-gap: 10px;
}
.article-body .card-content > .fp-icon-tile { flex: none; }
.article-body .card-content .fp-icon-tile-sm { width: 36px; height: 36px; border-radius: 9px; }
.article-body .card-content .fp-icon-tile-sm svg { width: 19px; height: 19px; }
.article-body .card-title { flex: 1 1 0; min-width: 0; margin-bottom: 0; }
.article-body .card-description { flex: 1 1 100%; }
.article-body img { max-width: 100%; height: auto; border-radius: var(--fp-radius); margin: 1em 0; }
/* Inline icons (Zendesk .icon-inline) sit within a line of text — size to the text,
   not their natural (often huge) dimensions. */
.article-body img.icon-inline {
  display: inline-block;
  width: auto;
  height: 1.25em;
  margin: 0 0.15em;
  vertical-align: -0.22em;
  border-radius: 0;
}
.article-body code {
  background: var(--fp-light-gray);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.88em;
  color: var(--fp-navy);
}
.article-body pre {
  background: var(--fp-light-gray);
  border: 1px solid #e5e7eb;
  border-radius: var(--fp-radius);
  padding: 16px 20px;
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.6;
  margin: 1.2em 0;
}
.article-body pre code { background: none; padding: 0; }
.article-body blockquote {
  border-left: 4px solid var(--fp-light-blue);
  margin: 1.2em 0;
  padding: 12px 20px;
  background: rgba(157,196,224,0.1);
  border-radius: 0 var(--fp-radius) var(--fp-radius) 0;
  color: var(--fp-dark-gray);
}
/* Tables. Zendesk's application.css gives editor tables a border on every side
   (figure.wysiwyg-table > table, and its td/th) but sets only border-style and
   border-width — no colour — so those borders fall back to currentColor. The
   theme used to colour the bottom edge only, which left every cell with three
   dark text-coloured sides and one pale one: an outer box in near-black, faint
   interior rules, and a bottom edge so light it read as missing. In a <th> the
   text colour is white, so the header's own dividers vanished into the navy.

   Colouring all four sides fixes it. ZD sets no colour of its own, so the
   theme's wins despite the lower specificity, and the width/style it does set
   match what we ask for anyway. */
.article-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: 1.2em 0;
  border: 1px solid #e5e7eb;
}
.article-body th {
  background: var(--fp-navy);
  color: var(--fp-white);
  text-align: left;
  padding: 10px 14px;
  font-weight: 600;
  border: 1px solid var(--fp-navy);   /* header reads as one solid band */
}
.article-body td {
  padding: 10px 14px;
  border: 1px solid #e5e7eb;
}
.article-body tr:nth-child(even) td { background: var(--fp-light-gray); }

/* Content tags */
.content-tags {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
  font-size: 13px;
  color: var(--fp-medium-gray);
}
.content-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}
.content-tag-item a {
  display: inline-block;
  padding: 4px 12px;
  background: var(--fp-light-gray);
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  font-size: 13px;
  color: var(--fp-dark-gray);
  text-decoration: none;
  transition: background var(--fp-transition), border-color var(--fp-transition);
}
.content-tag-item a:hover {
  background: var(--fp-navy);
  color: var(--fp-white);
  border-color: var(--fp-navy);
}

/* Attachments */
.article-attachments-footer {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}
.article-attachments-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--fp-navy);
  margin: 0 0 16px;
}
.attachments { list-style: none; padding: 0; margin: 0; }
.attachment-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
}
.attachment-icon { color: var(--fp-medium-gray); flex-shrink: 0; }
.attachment-item a { color: var(--fp-coral); text-decoration: none; }
.attachment-item a:hover { text-decoration: underline; }
.attachment-meta { margin-left: auto; }
.attachment-meta-item { color: var(--fp-medium-gray); font-size: 13px; }

/* Article footer row (share + comment count) */
.article-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid #e5e7eb;
  margin-top: 32px;
}

.article-comment-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--fp-medium-gray);
  text-decoration: none;
}
.article-comment-count:hover { color: var(--fp-navy); }

/* Article votes */
.article-votes {
  width: 100%;
  box-sizing: border-box;
  background: var(--fp-light-gray);
  border-radius: var(--fp-radius);
  padding: 28px 32px;
  text-align: center;
  margin-top: 32px;
}

.article-votes-question {
  font-size: 17px;
  font-weight: 600;
  color: var(--fp-navy);
  margin: 0 0 20px;
}

.article-votes-controls {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.article-vote {
  padding: 10px 28px;
  border-radius: var(--fp-radius);
  border: 2px solid var(--fp-navy);
  background: transparent;
  color: var(--fp-navy);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--fp-transition), color var(--fp-transition);
}
.article-vote:hover,
.article-vote.button-primary {
  background: var(--fp-navy);
  color: var(--fp-white);
  text-decoration: none;
}

/* Article "Have we missed something?" CTA */
.article-more-questions {
  width: 100%;
  box-sizing: border-box;
  background: linear-gradient(135deg, var(--fp-navy) 0%, #1e2a52 100%);
  border-radius: var(--fp-radius);
  padding: 28px 32px;
  margin-top: 24px;
  text-align: center;
}

.article-more-questions .article-votes-question {
  color: var(--fp-white);
  margin-bottom: 16px;
}

.article-more-questions .button,
.article-more-questions .button-primary {
  background: var(--fp-coral);
  color: var(--fp-navy);
  border: none;
  padding: 11px 28px;
  border-radius: var(--fp-radius);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  display: inline-block;
  transition: background var(--fp-transition), color var(--fp-transition);
}
.article-more-questions .button:hover,
.article-more-questions .button-primary:hover {
  background: var(--fp-white);
  color: var(--fp-navy);
}

/* Return to top — flex row with date on left, link on right (below all cards) */
.article-return-to-top {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}
.article-return-to-top .meta-data,
.article-return-to-top a {
  font-size: 13px;
  color: var(--fp-medium-gray);
  font-weight: 400;
}
.article-return-to-top a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.article-return-to-top a:hover { color: var(--fp-navy); }
.article-return-to-top-icon { transform: rotate(180deg); }

/* Recently viewed / related articles — collapsible cards (JS adds .collapsible-sidebar) */
/* ZD renders: section.recent-articles / section.related-articles > h2 + ul              */
.article-relatives { margin-top: 32px; display: flex; flex-direction: column; gap: 16px; }

.article-relatives .collapsible-sidebar {
  position: static; /* never sticky */
  width: 100%;
  box-sizing: border-box;
}

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

.article-relatives li {
  margin: 0;
}

/* Links inside relatives cards */
.article-relatives .collapsible-sidebar a {
  display: block;
  padding: 8px 0;
  color: var(--fp-dark-gray);
  text-decoration: none;
  border-bottom: 1px solid #e5e7eb;
  border-radius: 0;
  font-size: 14px;
  transition: color var(--fp-transition);
}
.article-relatives .collapsible-sidebar li:last-child a { border-bottom: none; }
.article-relatives .collapsible-sidebar a:hover { color: var(--fp-navy); background: transparent; }

/* Mobile sidebar duplicate — hidden on desktop */
.article-sidebar-mobile { display: none; }

/* --------------------------------------------------------------------------
   Section page: article-preview cards (articles-grid)
   -------------------------------------------------------------------------- */
.articles-section {
  margin-top: 40px;
}

.articles-section-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--fp-navy);
  margin: 0 0 20px;
}

.articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.article-card-link {
  text-decoration: none;
}

.article-preview {
  background: var(--fp-white);
  border: 1px solid #e5e7eb;
  border-radius: var(--fp-radius);
  padding: 24px;
  transition: box-shadow var(--fp-transition), transform var(--fp-transition), border-color var(--fp-transition);
}
.article-card-link:hover .article-preview {
  box-shadow: var(--fp-shadow-lift);
  transform: translateY(-2px);
  border-color: var(--fp-light-blue);
}

.article-preview .article-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--fp-navy);
  margin: 0 0 10px;
  line-height: 1.4;
}

.article-excerpt {
  font-size: 14px;
  color: var(--fp-medium-gray);
  line-height: 1.6;
  margin: 0 0 12px;
}

.read-more {
  font-size: 13px;
  font-weight: 600;
  color: var(--fp-coral);
}

/* --------------------------------------------------------------------------
   Category / Section pages: card-grid
   -------------------------------------------------------------------------- */
.content-section { padding: 0 0 48px; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.card-link {
  text-decoration: none;
  display: block;
}

.card {
  background: var(--fp-white);
  border: 1px solid #e5e7eb;
  border-radius: var(--fp-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: box-shadow var(--fp-transition), transform var(--fp-transition), border-color var(--fp-transition);
}

.card-link:hover .card {
  box-shadow: var(--fp-shadow-lift);
  transform: translateY(-3px);
  border-color: var(--fp-light-blue);
}

/* Card internals are element-agnostic: templates use h3/div, while article-body
   cards are authored with <span>s (the editor strips block tags) — force block
   display so title and description stack in both cases. */
.card-content {
  display: block;
  padding: 24px;
  flex: 1;
}

.card-title {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--fp-navy);
  margin: 0 0 8px;
  line-height: 1.35;
}

.card-description {
  display: block;
  font-size: 14px;
  color: var(--fp-medium-gray);
  line-height: 1.55;
  margin: 0;
}

.card-image-wrapper {
  height: 140px;
  background: var(--fp-light-gray);
  overflow: hidden;
}

.card-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.4s ease;
}

.card-link:hover .card-image {
  transform: scale(1.04);
}

/* --------------------------------------------------------------------------
   Search results page
   -------------------------------------------------------------------------- */
.search-results {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  padding: 48px 0 80px;
}

.search-results-sidebar {
  flex: 0 0 200px;
}

.search-results-column {
  flex: 1;
  min-width: 0;
}

.filters-in-section {
  background: var(--fp-light-gray);
  border-radius: var(--fp-radius);
  padding: 16px;
  margin-bottom: 16px;
}

.filters-in-section .collapsible-sidebar-title,
.filters-in-section .sidenav-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fp-medium-gray);
  margin: 0 0 10px;
}

.multibrand-filter-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.multibrand-filter-list li { margin: 0; }

.sidenav-subitem { font-size: 13px; }
.filter-name { color: var(--fp-dark-gray); }
.doc-count { color: var(--fp-medium-gray); }

.sidenav-item.current {
  background: var(--fp-navy);
  color: var(--fp-white);
  font-weight: 600;
}
.sidenav-item.current .filter-name,
.sidenav-item.current .doc-count {
  color: inherit;
}

.see-all-filters {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--fp-coral);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 0;
  margin-top: 4px;
}

/* Search result items.

   A result card carries three things, in this order: the article title (plus the
   Classic/Enhanced tree pill script.js adds), the article's location in the
   knowledge base, and the excerpt Zendesk cuts around the query match.

   The location comes from ZD's {{path_steps}} helper as an <ol class="breadcrumbs">,
   which without these rules renders as a numbered list — the "1. 2. 3." that made
   the cards look like they contained steps. It is a hierarchy, not a sequence, so
   it is set as a breadcrumb trail. Likewise .search-results-list is a plain <ul>
   and needs its bullets removed. */
.search-results-list { list-style: none; margin: 0; padding: 0; }
.search-results-list > li { margin: 0; }

.search-result-link {
  display: block;
  text-decoration: none;
  padding: 18px 20px;
  background: var(--fp-white);
  border: 1px solid #e5e7eb;
  border-radius: var(--fp-radius);
  margin-bottom: 10px;
  transition: box-shadow var(--fp-transition), border-color var(--fp-transition);
}
.search-result-link:hover {
  box-shadow: var(--fp-shadow-soft);
  border-color: var(--fp-light-blue);
}

/* Title and tree pill share a baseline and wrap together on narrow screens. */
.search-result-title-container {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.search-result-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--fp-navy);
  margin: 0;
}

/* Article location — scoped to the card so the page-level breadcrumbs keep theirs. */
.search-result-card .breadcrumbs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
  margin: 6px 0 0;
  padding: 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--fp-medium-gray);
}
.search-result-card .breadcrumbs li {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.search-result-card .breadcrumbs li + li::before { content: "\203A"; color: #cbd5e1; }

.search-result-description {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--fp-medium-gray);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Zendesk wraps the matched terms in <em>. Italics inside an already-truncated
   fragment are hard to spot, so mark them as a highlight instead. */
.search-result-description em {
  font-style: normal;
  font-weight: 600;
  color: var(--fp-navy);
  background: rgba(160, 193, 229, 0.26);
  border-radius: 3px;
  padding: 0 2px;
}

/* Pagination. ZD emits a plain <ul>, so it arrives bulleted and left-aligned;
   these turn the links into a centred control row. Unified search only offers
   next/last (and prev/first past page one) — there are no page numbers to style,
   but .pagination-current-page is covered in case a listing supplies them. */
.pagination { padding: 8px 0 24px; }
.pagination-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.pagination-list li { margin: 0; }
.pagination-list a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: var(--fp-white);
  color: var(--fp-navy);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--fp-transition), background var(--fp-transition);
}
.pagination-list a:hover {
  border-color: var(--fp-light-blue);
  background: var(--fp-light-gray);
}
.pagination-current-page {
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  border-radius: 8px;
  background: var(--fp-navy);
  color: var(--fp-white);
  font-size: 14px;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Error page
   -------------------------------------------------------------------------- */
.error-page {
  max-width: 560px;
  margin: 80px auto;
  padding: 48px;
  background: var(--fp-white);
  border-radius: var(--fp-radius);
  box-shadow: var(--fp-shadow-soft);
  text-align: center;
}

.error-page h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--fp-navy);
  margin: 0 0 16px;
}

.error-page p {
  color: var(--fp-medium-gray);
  font-size: 15px;
  margin: 0 0 24px;
  line-height: 1.6;
}

.error-page a {
  display: inline-block;
  padding: 12px 28px;
  background: var(--fp-coral);
  color: var(--fp-navy);
  border-radius: var(--fp-radius);
  font-weight: 700;
  text-decoration: none;
  transition: background var(--fp-transition), color var(--fp-transition);
}
.error-page a:hover {
  background: var(--fp-navy);
  color: var(--fp-white);
}

/* --------------------------------------------------------------------------
   Subscribe / share / follow controls (generic overrides)
   -------------------------------------------------------------------------- */
.article-subscribe,
.article-share {
  font-size: 13px;
}

.article-subscribe a,
.article-share a {
  color: var(--fp-medium-gray);
  text-decoration: none;
  transition: color var(--fp-transition);
}
.article-subscribe a:hover,
.article-share a:hover { color: var(--fp-navy); }

/* --------------------------------------------------------------------------
   Collapsible sidebar toggle (mobile)
   -------------------------------------------------------------------------- */
.collapsible-sidebar-toggle-icon { pointer-events: none; }
.collapsible-sidebar-toggle .x-icon { display: none; }
.collapsible-sidebar-toggle[aria-expanded="true"] .x-icon { display: block; }
.collapsible-sidebar-toggle[aria-expanded="true"] .chevron-icon { display: none; }

/* --------------------------------------------------------------------------
   Responsive — inner pages
   -------------------------------------------------------------------------- */

/* Tablet and below: hide desktop sidebar, collapse article cards */
@media (max-width: 1024px) {
  .article-container,
  .search-results {
    flex-direction: column;
    gap: 24px;
  }

  /* Hide desktop sidebar; mobile copy appears after the article content */
  .article-sidebar { display: none; }
  .article-sidebar-mobile { display: block; margin-top: 16px; }

  /* Consistent spacing between footer cards and the collapsible cards */
  .article-relatives { margin-top: 16px; }

  /* Article fills full column width — flex-start was preventing stretch */
  .article-container { align-items: stretch; }
  .article { width: 100%; }

  /* Collapsible cards: grid ensures toggle icon and title are always
     on the same row with perfect vertical centering */
  .collapsible-sidebar {
    position: static;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 8px;
    align-items: center;
  }

  .collapsible-sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-column: 1;
    grid-row: 1;
    color: var(--fp-navy);
  }

  .collapsible-sidebar-title {
    grid-column: 2;
    grid-row: 1;
    display: block;
    margin: 0; /* remove default bottom margin inside header row */
  }

  .collapsible-sidebar-body {
    display: none;
    grid-column: 1 / -1;
    margin-top: 12px;
  }

  .collapsible-sidebar-toggle[aria-expanded="true"] ~ .collapsible-sidebar-body {
    display: block;
  }
}

/* Mobile: search sidebar stacks */
@media (max-width: 768px) {
  .search-results-sidebar {
    flex: none;
    width: 100%;
    position: static;
  }
}

@media (max-width: 640px) {
  /* The fixed header wraps to two rows (brand + full-width CTA) at this width,
     so the hero needs ~150px of top padding for the breadcrumbs to clear it. */
  .heading-section { min-height: 400px; padding: 150px 0 150px; }
  .heading-section h1 { font-size: 24px; }
  .heading-section .sub-nav { flex-direction: column; align-items: flex-start; }
  .heading-section .breadcrumbs ol { flex-wrap: wrap; }
  /* white-card left/right margin now = --fp-gutter (aligns with header + submit button) */
  .card-grid { grid-template-columns: 1fr; }
  .articles-grid { grid-template-columns: 1fr; }
  .article-container { padding: 32px 0 48px; }
  .article-title { font-size: 24px; }
  .article-votes { padding: 20px 16px; }
  .article-more-questions { padding: 20px 16px; }
  .error-page { margin: 40px auto; padding: 32px 20px; }

  /* Tighter internal padding on the section/article/category cards so their
     content (icon, title, articles/browse, etc.) sits closer to the card edges. */
  .fp-featured-section { padding: 22px; }
  .fp-featured-article { padding: 20px; gap: 18px; }
  .fp-article-card { padding: 18px 20px; }
  .fp-section-row { padding: 14px 16px; gap: 12px; }
  .fp-category-body { padding: 0 18px 20px; }
  .fp-cat-split { gap: 18px; }
  .fp-section-heading { margin: 0 0 20px; }
}

/* ==========================================================================
   HubSpot Mirror — New Patterns
   ========================================================================== */

/* Header gradient fade — full viewport width, floats header over hero images */
.fp-header::before {
  content: '';
  width: 100%;
  height: 45px;
  background: linear-gradient(to bottom, rgba(17, 22, 45, 0.6), rgba(17, 22, 45, 0));
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: -1;
}

/* Decorative SVG ring — applied to dark-background hero/banner sections */
.fp-decorated {
  position: relative;
  overflow: hidden;
}

.fp-decorated::after {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 500px;
  height: 500px;
  /* viewBox padded (-10 → 220) so the outer ring (edge at r105) isn't clipped flat by the SVG bounds */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 220 220'%3E%3Ccircle cx='100' cy='100' r='90' fill='none' stroke='rgba(255%2C255%2C255%2C0.06)' stroke-width='30'/%3E%3Ccircle cx='100' cy='100' r='55' fill='none' stroke='rgba(255%2C255%2C255%2C0.04)' stroke-width='20'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}

/* Hide the ring on the home hero, where a real background image carries the visual
   interest and the ring just competes with it. Scoped to home specifically (rather
   than "any --page-hero") so interior heroes keep the ring even if their optional
   hero-image settings happen to be populated. Dimming/tint gradient is unaffected. */
.fp-hero-home::after { content: none; }

/* Overlapping content card — lifts over the mini-hero like fp-contact */
.fp-page-body {
  background-color: #fff;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.12);
  margin-top: -160px;
  margin-left: var(--fp-gutter);
  margin-right: var(--fp-gutter);
  position: relative;
  z-index: 2;
  padding-top: 30px;
  padding-bottom: 60px;
  min-height: 400px;
  overflow: hidden;
}


/* Inner content — padding/layout only, card styling lives on fp-page-body */
.fp-page-body-inner {
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  padding-top: 0;
  padding-bottom: 0;
}

@media (max-width: 768px) {
  .fp-page-body { margin-top: -120px; }
  .fp-page-body-inner {
    padding-top: 0;
    padding-bottom: 0;
  }
}


/* --------------------------------------------------------------------------
   Profile header — shorter hero, content flows from top
   -------------------------------------------------------------------------- */
.profile-header.heading-section {
  min-height: auto;
  justify-content: flex-start;
  padding: 120px 0 64px;
}

/* --------------------------------------------------------------------------
   Activity / profile nav tabs inside fp-page-body card
   -------------------------------------------------------------------------- */
.fp-page-body .my-activities-nav,
.fp-page-body .profile-nav {
  border-bottom: 1px solid var(--fp-border);
  margin-bottom: 32px;
}

.fp-page-body .my-activities-nav .container,
.fp-page-body .profile-nav .container {
  padding-left: 0;
  padding-right: 0;
}

.fp-page-body .my-activities-nav .collapsible-nav-list,
.fp-page-body .profile-nav .collapsible-nav-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0;
}

.fp-page-body .my-activities-nav .collapsible-nav-list li a,
.fp-page-body .profile-nav .collapsible-nav-list li a {
  display: block;
  padding: 10px 20px 12px;
  color: var(--fp-medium-gray);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: color var(--fp-transition), border-color var(--fp-transition);
}

.fp-page-body .my-activities-nav .collapsible-nav-list li.current a,
.fp-page-body .profile-nav .collapsible-nav-list li.current a {
  color: var(--fp-navy);
  border-bottom-color: var(--fp-coral);
}

.fp-page-body .my-activities-nav .collapsible-nav-list li a:hover,
.fp-page-body .profile-nav .collapsible-nav-list li a:hover {
  color: var(--fp-navy);
}

.fp-page-body .my-activities-nav .collapsible-nav-toggle,
.fp-page-body .profile-nav .collapsible-nav-toggle {
  display: none;
}

/* =============================================================================
   ForwardPass Help Center — dynamic category / section / article additions
   Append this to the theme's style.css (after the existing rules).
   Reuses the theme's existing tokens (--fp-navy, --fp-coral, --fp-radius, …)
   and adds the five solution colours + pale surface tint.
   ============================================================================= */

:root {
  --fp-charging: #307836;
  --fp-loaners: #564CA0;
  --fp-repairs: #A7ADE6;
  --fp-deployments: #FFC85B;
  --fp-replacements: #45B15E;
  --fp-surface-tint: #EEF3FA;
  --fp-line-soft: #e9e9ee;
}

/* ---------- Coloured icon tiles (glyph injected by script.js) ---------- */
.fp-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 13px;
  background: var(--fp-navy);
  color: #fff;
  flex: 0 0 auto;
}
.fp-icon-tile svg { width: 26px; height: 26px; }
/* The FUYL marks are drawn to fill their grid, unlike a stock glyph that sits in
   a margin, so they are sized as a share of the tile rather than a fixed px. */
.fp-icon-tile svg.fp-mark { width: 68%; height: 68%; }
.fp-icon-tile-sm { width: 44px; height: 44px; border-radius: 11px; }
.fp-icon-tile-sm svg { width: 22px; height: 22px; }
.fp-icon-tile-lg { width: 96px; height: 96px; border-radius: 16px; }
.fp-icon-tile-lg svg { width: 44px; height: 44px; }
.fp-icon-tile-title { width: 52px; height: 52px; border-radius: 13px; }
.fp-icon-tile-title svg { width: 26px; height: 26px; }

.fp-tone-charging     { background: var(--fp-charging);     color: #fff; }
.fp-tone-loaners      { background: var(--fp-loaners);      color: #fff; }
.fp-tone-replacements { background: var(--fp-replacements); color: #fff; }
.fp-tone-repairs      { background: var(--fp-repairs);      color: var(--fp-navy); }
.fp-tone-deployments  { background: var(--fp-deployments);  color: var(--fp-navy); }
.fp-tone-dark         { background: var(--fp-navy);         color: #fff; }
/* Enhanced carries the coral of its pill; Classic uses .fp-tone-dark, which is
   the navy of its own pill. Coral takes navy text — white on coral is under 3:1. */
.fp-tone-enhanced     { background: var(--fp-coral);        color: var(--fp-navy); }
/* The article hero is navy, so a navy tile on it needs an edge to read against
   the background — Single Use is the one workflow whose tone is navy. */
.heading-section-article .fp-icon-tile.fp-tone-dark {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

/* ---------- Hero enrichments (title row + article meta) ---------- */
/* Icon tile to the left of the hero title (article + section pages).
   Carries the same 24px breadcrumb→title gap as the central h1 rule. */
.fp-article-hero-head { display: flex; align-items: center; gap: 16px; margin: 24px 0 0; }
.fp-article-hero-head h1 { margin: 0; }
.fp-article-hero-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.fp-meta-item { color: rgba(255,255,255,.72); font-size: 13px; }
.fp-meta-item:empty { display: none; }
.fp-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.4); }
/* Article hero sizing is inherited from the central .heading-section rule. */

/* ---------- Coral corner-flare (small, top-right, never over content) ---------- */
.fp-flare {
  position: absolute; top: 0; right: 0;
  width: 92px; height: 92px;
  background: var(--fp-coral);
  border-bottom-left-radius: 100%;
  opacity: .92; pointer-events: none; z-index: 0;
}

/* =============================================================================
   CATEGORY PAGE — editorial split (1b)
   ============================================================================= */
.fp-cat-split {
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  gap: 28px;
  align-items: start;
}

.fp-featured-section {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--fp-navy);
  border-radius: 18px;
  padding: 34px;
  min-height: 320px;
  text-decoration: none;
  transition: transform var(--fp-transition), box-shadow var(--fp-transition);
}
.fp-featured-section:hover { transform: translateY(-2px); box-shadow: var(--fp-shadow); }
.fp-featured-section > *:not(.fp-flare) { position: relative; z-index: 1; }
.fp-featured-section .fp-icon-tile { background: var(--fp-charging); margin: 6px 0 18px; }
.fp-featured-title { font-family: var(--fp-font); font-size: 24px; font-weight: 700; color: #fff; margin-bottom: 10px; }
.fp-featured-desc { color: rgba(255,255,255,.75); font-size: 15px; line-height: 1.6; margin-bottom: auto; }
.fp-featured-foot { display: flex; align-items: center; gap: 16px; margin-top: 26px; }

.fp-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  border-radius: 999px; padding: 5px 12px; align-self: flex-start;
}
.fp-badge-coral { background: var(--fp-coral); color: var(--fp-navy); }

.fp-count-pill {
  display: inline-flex; align-items: center;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16);
  color: #fff; border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 600;
}
.fp-arrow-link { display: inline-flex; align-items: center; gap: 7px; color: var(--fp-coral); font-size: 14px; font-weight: 700; }
.fp-arrow-link-coral { color: var(--fp-coral); }

.fp-section-list { display: flex; flex-direction: column; gap: 12px; }
.fp-list-label { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fp-medium-gray); margin-bottom: 2px; }
.fp-section-list-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.fp-section-row {
  display: flex; align-items: center; gap: 16px;
  background: #fff; border: 1px solid var(--fp-line-soft); border-radius: 14px;
  padding: 18px 20px; text-decoration: none;
  box-shadow: 0 3px 10px rgba(17,22,45,.04);
  transition: transform var(--fp-transition), box-shadow var(--fp-transition), border-color var(--fp-transition);
}
.fp-section-row:hover { transform: translateY(-2px); box-shadow: var(--fp-shadow-lift); border-color: var(--fp-light-blue); }
.fp-section-row-tint { background: var(--fp-surface-tint); border-color: #dbe6f4; }
.fp-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fp-row-title { font-family: var(--fp-font); font-size: 16px; font-weight: 700; color: var(--fp-navy); }
.fp-row-meta { color: var(--fp-medium-gray); font-size: 13px; }
.fp-chevron { color: #c3c6d0; flex: 0 0 auto; }

/* =============================================================================
   SECTION PAGE — featured article + meta cards (2a)
   ============================================================================= */
.fp-featured-article {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 28px;
  background: var(--fp-surface-tint); border: 1px solid #dbe6f4;
  border-radius: 16px; padding: 30px 34px; margin-bottom: 24px; text-decoration: none;
  transition: transform var(--fp-transition), box-shadow var(--fp-transition);
}
.fp-featured-article:hover { transform: translateY(-2px); box-shadow: var(--fp-shadow-soft); }
.fp-featured-article-body { flex: 1; min-width: 0; }
.fp-featured-article-flags { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.fp-featured-article-title { font-family: var(--fp-font); font-size: 24px; font-weight: 700; color: var(--fp-navy); margin-bottom: 8px; }
.fp-featured-article-excerpt { color: var(--fp-dark-gray); font-size: 15px; line-height: 1.6; margin: 0 0 16px; }
.fp-featured-article .fp-icon-tile-lg { background: var(--fp-navy); }

.fp-article-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
/* Article cards run icon and title on one row, with the excerpt and foot
   spanning underneath. The middle row is 1fr — that is what keeps the foot on
   the card's bottom edge so cards in a row still line up (it replaces the
   flex:1 the excerpt used to carry). Section rows and category cards keep
   their own layouts. */
.fp-article-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr auto;
  column-gap: 14px;
  background: #fff; border: 1px solid var(--fp-line-soft); border-radius: 16px;
  padding: 24px 26px; text-decoration: none;
  box-shadow: 0 4px 12px rgba(17,22,45,.05);
  transition: transform var(--fp-transition), box-shadow var(--fp-transition), border-color var(--fp-transition);
}
.fp-article-card:hover { transform: translateY(-3px); box-shadow: var(--fp-shadow-lift); border-color: var(--fp-light-blue); }
.fp-article-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; min-height: 44px; }
/* Inline with the title: no reserved row of its own, and a tile sized to sit
   against 17px text, anchored to the title's first line so a title running to
   three lines doesn't drag the icon down with it. */
.fp-article-card .fp-article-card-top { grid-area: 1 / 1; align-self: start; margin-bottom: 0; min-height: 0; }
.fp-article-card .fp-icon-tile-sm { width: 36px; height: 36px; border-radius: 9px; }
.fp-article-card .fp-icon-tile-sm svg { width: 19px; height: 19px; }
.fp-card-flags { display: inline-flex; gap: 6px; }
.fp-article-card-title { font-family: var(--fp-font); font-size: 17px; font-weight: 700; color: var(--fp-navy); line-height: 1.3; margin-bottom: 8px; }
.fp-article-card .fp-article-card-title { grid-area: 1 / 2; align-self: start; margin-bottom: 0; }
.fp-article-card-excerpt { color: var(--fp-medium-gray); font-size: 14px; line-height: 1.55; margin: 0 0 16px; flex: 1; }
.fp-article-card .fp-article-card-excerpt { grid-area: 2 / 1 / 3 / 3; margin: 14px 0 16px; }
.fp-article-card-foot { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #f0f0f4; padding-top: 12px; }
.fp-article-card .fp-article-card-foot { grid-area: 3 / 1 / 4 / 3; }
.fp-card-date { color: var(--fp-medium-gray); font-size: 12px; }
.fp-card-arrow { color: var(--fp-coral); }

.fp-pill-new, .fp-pill-updated {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  border-radius: 999px; padding: 4px 9px;
}
.fp-pill-new { background: #dff3e4; color: #1f7a37; }
.fp-pill-updated { background: #eef1f6; color: #5b6180; }

/* =============================================================================
   ARTICLE PAGE — focused reading + sticky TOC (3b) with Quick answer (3a)
   ============================================================================= */
.fp-article-layout {
  display: grid; grid-template-columns: minmax(0,1fr) 280px;
  gap: 44px; align-items: start; padding: 0 0 48px;   /* matches .content-section rhythm */
}
.fp-article-focused { max-width: 720px; width: 100%; margin: 0 auto; }

.fp-quick-answer {
  background: var(--fp-surface-tint); border-left: 4px solid var(--fp-coral);
  border-radius: 12px; padding: 20px 24px; margin-bottom: 30px;
}
.fp-quick-answer-label { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--fp-coral); margin-bottom: 8px; }
.fp-quick-answer-body { color: var(--fp-navy); font-size: 15px; line-height: 1.6; font-weight: 500; }
.fp-quick-answer-body p { margin: 0; }

.fp-still-stuck {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 16px;
  background: var(--fp-navy); border-radius: 14px; padding: 22px 28px; margin-top: 32px;
}
.fp-still-stuck > *:not(.fp-flare) { position: relative; z-index: 1; }
.fp-still-stuck .fp-flare { width: 70px; height: 70px; }
.fp-still-stuck-copy { flex: 1; }
.fp-still-stuck-title { font-family: var(--fp-font); color: #fff; font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.fp-still-stuck-sub { color: rgba(255,255,255,.7); font-size: 14px; }
.fp-still-stuck-btn {
  white-space: nowrap; background: var(--fp-coral); color: var(--fp-navy);
  font-weight: 700; font-size: 14px; border-radius: 8px; padding: 11px 22px;
  text-decoration: none; flex: 0 0 auto; transition: background var(--fp-transition), color var(--fp-transition);
}
.fp-still-stuck-btn:hover { background: #fff; color: var(--fp-navy); }

/* Sticky right rail */
.fp-article-rail { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 16px; }
.fp-toc-card, .fp-related-card, .fp-share-card, .fp-section-nav-card {
  border: 1px solid var(--fp-line-soft); border-radius: 14px; background: #fff; padding: 20px 22px;
  box-shadow: 0 4px 12px rgba(17,22,45,.05);
}
.fp-toc-card { background: var(--fp-surface-tint); border-color: #dbe6f4; box-shadow: none; }
.fp-toc-title, .fp-related-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fp-navy); margin-bottom: 14px;
}
.fp-toc-title svg { color: var(--fp-coral); }

/* Collapsible "On this page" header */
.fp-toc-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 0; margin: 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.fp-toc-toggle .fp-toc-title { margin-bottom: 0; }
.fp-toc-chevron { color: var(--fp-medium-gray); flex: 0 0 auto; transition: transform var(--fp-transition); }
.fp-toc-card.is-collapsed .fp-toc-chevron { transform: rotate(-90deg); }

.fp-toc-list { display: flex; flex-direction: column; gap: 3px; margin-top: 14px; }
.fp-toc-card.is-collapsed .fp-toc-list { display: none; }
.fp-toc-link {
  font-size: 14px; color: var(--fp-medium-gray); text-decoration: none;
  padding: 8px 12px; border-radius: 8px; line-height: 1.35;
  transition: background var(--fp-transition), color var(--fp-transition);
}
.fp-toc-link:hover { color: var(--fp-navy); }
.fp-toc-link-h3 { padding-left: 24px; font-size: 13px; }
.fp-toc-link.is-active { background: #fff; color: var(--fp-navy); font-weight: 600; }

/* Articles-in-this-section rail card (vertical list, matches Related styling) */
.fp-section-nav-list { display: flex; flex-direction: column; }
.fp-section-nav-link {
  display: block; padding: 9px 0; color: var(--fp-navy); text-decoration: none;
  font-size: 14px; font-weight: 500; line-height: 1.35; border-bottom: 1px solid #f0f0f4;
  transition: color var(--fp-transition);
}
.fp-section-nav-link:last-child { border-bottom: none; }
.fp-section-nav-link:hover { color: var(--fp-coral); }
.fp-section-nav-link.is-current { color: var(--fp-coral); font-weight: 700; }
.fp-section-nav-more { color: var(--fp-coral); font-weight: 600; }

/* External "link article" indicator (↗) — appended by script.js to link-out entries */
.fp-ext-icon {
  display: inline-block;
  vertical-align: -1px;
  margin-left: 4px;
  color: var(--fp-coral);
  flex: 0 0 auto;
}

/* Related / recent helper output (ZD renders <section><h2>+<ul>) */
.fp-related-card section > h2 { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fp-medium-gray); margin: 0 0 12px; }
.fp-related-card ul { list-style: none; padding: 0; margin: 0; }
.fp-related-card li { margin: 0; }
.fp-related-card a { display: block; padding: 9px 0; color: var(--fp-navy); text-decoration: none; font-size: 14px; font-weight: 500; line-height: 1.35; border-bottom: 1px solid #f0f0f4; }
.fp-related-card li:last-child a { border-bottom: none; }
.fp-related-card a:hover { color: var(--fp-coral); }

/* =============================================================================
   CLASSIC / ENHANCED TREE MARKING (notice strip + pills, filled by script.js)
   ============================================================================= */
.fp-tree-notice {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  background: var(--fp-surface-tint);
  border: 1px solid #dbe6f4;
  border-radius: 12px;
  padding: 12px 18px;
  margin-bottom: 24px;
  font-size: 14px;
  color: var(--fp-dark-gray);
}
.fp-tree-notice[hidden] { display: none; }
.fp-tree-link {
  margin-left: auto;
  color: var(--fp-coral);
  font-weight: 700;
  text-decoration: none;
}
.fp-tree-link:hover { text-decoration: underline; }
/* On narrow screens stack the notice so the cross-link wraps inside the box
   instead of overflowing to the right. */
@media (max-width: 640px) {
  .fp-tree-notice { flex-direction: column; align-items: flex-start; }
  .fp-tree-link { margin-left: 0; }
}

.fp-tree-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Classic navy / Enhanced coral. The pale blue this used to carry is now the
   search-match highlight, so the two would have read as the same marker. Coral
   takes navy text rather than white — white on coral falls under 3:1. */
.fp-tree-pill-classic { background: var(--fp-navy); color: var(--fp-white); }
.fp-tree-pill-enhanced { background: var(--fp-coral); color: var(--fp-navy); }

/* Compact variant appended to search result titles */
.fp-tree-pill-sm {
  font-size: 10px;
  padding: 3px 8px;
  margin-left: 8px;
  vertical-align: middle;
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width: 1024px) {
  .fp-cat-split { grid-template-columns: 1fr; }
  .fp-article-layout { grid-template-columns: 1fr; gap: 28px; }
  .fp-article-focused { max-width: none; }
  /* Let the rail's cards flow directly into the single-column grid so we can
     order them individually: only "On this page" sits above the article; the
     rest (In this section, Related, Share) drop below it. */
  .fp-article-rail { display: contents; }
  .fp-article-rail > .fp-toc-card { order: -1; }   /* above the article */
  /* article + the remaining rail cards keep order 0 → they follow in DOM order,
     i.e. article first, then In this section / Related / Share below it. */
}
@media (max-width: 640px) {
  .fp-featured-article { flex-direction: column; align-items: flex-start; }
  .fp-featured-article .fp-icon-tile-lg { order: -1; }
  .fp-article-grid, .fp-section-list-grid { grid-template-columns: 1fr; }
  .fp-featured-section { min-height: 0; }
}