@charset "UTF-8";
/* ==========================================================================
   Retain International — Base CSS Foundation
   Generated by Webshape Design (block-builder skill)
   Design profile: Modern SaaS
     shape: soft (8/16/24, pill buttons)   cards: shadow
     transitions: clean                    decoration: grid
     spacing: standard                     images: rounded
     hover: lift
   Brand source: Retain - New Styles (Adobe XD export)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ==========================================================================
   1. ROOT VARIABLES
   ========================================================================== */

:root {
  /* === Brand: core colours === */
  --color-dark: #254261; /* Core navy — primary text, dark sections */
  --color-dark-lighter: #2f5479; /* Navy hover / lighter variant */
  --color-accent: #36b270; /* Core green — primary action, highlights */
  --color-accent-dark: #2b9660; /* Green hover state */
  --color-accent-rgb: 54, 178, 112;
  --color-dark-rgb: 37, 66, 97;

  /* === Brand: secondary colours === */
  --color-rose: #bc4855;
  --color-blue: #4783b9;
  --color-amber: #d58b4a;

  /* === Brand: background-only tints === */
  --color-bg-green: #d3f0e2;
  --color-bg-rose: #fef7f8;
  --color-bg-blue: #eef7ff;
  --color-bg-amber: #fffaf6;

  /* === Brand: gradients === */
  --gradient-green: linear-gradient(180deg, #36b270 0%, #d3f0e2 100%);
  --gradient-rose: linear-gradient(180deg, #bc4855 0%, #fef7f8 100%);
  --gradient-blue: linear-gradient(180deg, #4783b9 0%, #eef7ff 100%);
  --gradient-amber: linear-gradient(180deg, #d58b4a 0%, #fffaf6 100%);
  --gradient-card-green: linear-gradient(180deg, #ffffff 0%, #d3f0e2 100%);
  --gradient-card-rose: linear-gradient(180deg, #ffffff 0%, #f3d3d7 100%);
  --gradient-card-blue: linear-gradient(180deg, #ffffff 0%, #d6e7f5 100%);
  --gradient-card-amber: linear-gradient(180deg, #ffffff 0%, #f5dcc4 100%);

  /* === Neutrals (derived from core navy) === */
  --color-secondary: #6b819a; /* Muted text, icon strokes */
  --color-light: #e4eaf1; /* Light borders, empty states */
  --color-light-alt: #f5f8fb; /* Grey section background */
  --color-white: #ffffff;

  /* === Semantic aliases === */
  --color-text: var(--color-dark);
  --color-text-muted: #56708c;
  --color-border: rgba(37, 66, 97, 0.14);
  --color-overlay: rgba(37, 66, 97, 0.62);

  /* === Semantic status (mapped to brand secondaries) === */
  --color-success: var(--color-accent);
  --color-warning: var(--color-amber);
  --color-error: var(--color-rose);
  --color-error-rgb: 188, 72, 85;
  --color-info: var(--color-blue);

  /* === Typography === */
  /* Fluid-type basis. 1vw in production. The style guide re-points this at
     1cqi inside its previews so a block renders type for the width it has
     been given, not the width of the window. */
  --fluid: 1vw;
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* === Spacing === */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;

  /* === Shadows === */
  --shadow-sm: 0 1px 2px rgba(37, 66, 97, 0.06);
  --shadow-md: 0 4px 6px rgba(37, 66, 97, 0.07), 0 2px 4px rgba(37, 66, 97, 0.05);
  --shadow-lg: 0 10px 15px rgba(37, 66, 97, 0.1), 0 4px 6px rgba(37, 66, 97, 0.05);
  --shadow-xl: 0 20px 25px rgba(37, 66, 97, 0.1), 0 10px 10px rgba(37, 66, 97, 0.04);
  --shadow-card: 0 4px 20px rgba(37, 66, 97, 0.08);
  --shadow-card-hover: 0 14px 34px rgba(37, 66, 97, 0.15);
  --shadow-subtle: 0 1px 3px rgba(37, 66, 97, 0.05);

  /* === Transitions === */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;
  --transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  /* === Container === */
  --container-max: 1280px;
  --container-padding: 1.5rem;

  /* ======================================================================
     DESIGN PROFILE — Modern SaaS
     ====================================================================== */

  /* Shape Language: soft */
  --profile-radius-sm: 8px;
  --profile-radius-md: 16px;
  --profile-radius-lg: 24px;
  --profile-radius-pill: 999px;
  --profile-button-radius: var(--profile-radius-pill);

  /* Card Treatment: shadow */
  --profile-card-border: none;
  --profile-card-shadow: var(--shadow-card);
  --profile-card-bg: var(--color-white);
  --profile-card-hover-shadow: var(--shadow-card-hover);
  --profile-card-hover-lift: -4px;

  /* Section Transitions: clean */
  --profile-section-transition: clean;
  --profile-section-gap: 0;

  /* Decorative Elements: grid */
  --profile-decoration: grid;
  --profile-decoration-opacity: 0.1;
  --profile-decoration-colour-1: var(--color-dark);
  --profile-decoration-colour-2: var(--color-accent);
  --profile-grid-size: 64px;

  /* Spacing Density: standard */
  --profile-space-multiplier: 1;
  --profile-section-padding: calc(var(--space-3xl) * var(--profile-space-multiplier));
  --profile-container-max: 1440px;

  /* Image Treatment: rounded */
  --profile-image-radius: var(--profile-radius-md);
  --profile-image-aspect: 16 / 10;
  --profile-image-overlay: none;
  --profile-image-filter: none;

  /* Hover Behaviour: lift */
  --profile-hover-shadow: var(--shadow-card-hover);
  --profile-hover-transform: translateY(-4px);
  --profile-hover-transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);

  /* Aliases — elements reference these */
  --border-radius-sm: var(--profile-radius-sm);
  --border-radius-md: var(--profile-radius-md);
  --border-radius-lg: var(--profile-radius-lg);
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-primary);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg,
video {
  max-width: 100%;
  display: block;
}
a {
  color: var(--color-accent);
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   3. TYPOGRAPHY
   Source tokens: H1 Inter Bold 78pt / -50 tracking / 85 line spacing
                  H2 Inter Bold 52pt / 60 line spacing
                  Body Inter Medium 20pt / 30 line spacing
   ========================================================================== */

h1,
.h1 {
  font-size: clamp(2.5rem, calc(5.4 * var(--fluid)), 4.25rem);
  font-weight: 700;
  line-height: 1.09;
  letter-spacing: -0.05em;
  color: var(--color-dark);
  margin: 0 0 var(--space-md);
}

h2,
.h2 {
  font-size: clamp(1.9rem, calc(3.4 * var(--fluid)), 2.9rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.035em;
  color: var(--color-dark);
  margin: 0 0 var(--space-sm);
}

.text-title {
  /* non-h2 title, same visual scale as h2 */
  font-size: clamp(1.9rem, calc(3.4 * var(--fluid)), 2.9rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.035em;
  color: var(--color-dark);
}

h3,
.h3 {
  font-size: clamp(1.3rem, calc(1.8 * var(--fluid)), 1.6rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--color-dark);
  margin: 0 0 var(--space-xs);
}

h4,
.h4 {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--color-dark);
  margin: 0 0 var(--space-xs);
}

h5,
.h5 {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--color-secondary);
  margin: 0 0 var(--space-xs);
}

p {
  margin: 0 0 var(--space-sm);
}
p:last-child {
  margin-bottom: 0;
}

.highlight {
  color: var(--color-accent);
}

.small-title {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 var(--space-xs);
}

.text-highlight {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-dark);
}

.text-muted {
  color: var(--color-text-muted);
}

.text-small {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* Inverted type — dark and accent-filled sections */
.on-dark,
.on-dark h1,
.on-dark h2,
.on-dark h3,
.on-dark h4,
.on-dark .h1,
.on-dark .h2,
.on-dark .h3,
.on-dark .h4,
.on-dark .text-title {
  color: var(--color-white);
}
.on-dark .text-muted,
.on-dark p.text-muted,
.on-dark .text-small {
  color: rgba(255, 255, 255, 0.72);
}
.on-dark h5,
.on-dark .h5 {
  color: rgba(255, 255, 255, 0.72);
}
.on-dark .small-title {
  color: var(--color-white);
}
.on-dark .text-highlight {
  color: var(--color-white);
}
.on-dark .highlight {
  color: var(--color-bg-green);
}
.on-dark a {
  color: var(--color-white);
}

/* ==========================================================================
   4. BUTTONS
   Three styles from the brand sheet. Arrow pivots ↘ → → on hover.
   Skill-compatible aliases: .main-button.pink = green, .main-button = navy
   ========================================================================== */

.button-holder {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
.button-holder.left {
  justify-content: flex-start;
}
.button-holder.center {
  justify-content: center;
}
.button-holder.short {
  gap: 0.625rem;
  margin-top: var(--space-sm);
}

.main-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6875rem 1.375rem;
  border: 1.5px solid var(--color-dark);
  border-radius: var(--profile-button-radius);
  background: var(--color-dark);
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.2;
  color: var(--color-white);
  cursor: pointer;
  text-decoration: none;
  transition: var(--profile-hover-transition);
}

.main-button .btn-arrow {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  transform: rotate(45deg);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.main-button:hover .btn-arrow,
.main-button:focus-visible .btn-arrow {
  transform: rotate(0deg);
}

.main-button:hover {
  background: var(--color-dark-lighter);
  border-color: var(--color-dark-lighter);
  box-shadow: 0 6px 16px rgba(var(--color-dark-rgb), 0.22);
  transform: translateY(-1px);
}

/* Style 1 — solid green (primary) */
.main-button.green,
.main-button.pink {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}
.main-button.green:hover,
.main-button.pink:hover {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  box-shadow: 0 6px 16px rgba(var(--color-accent-rgb), 0.32);
}

/* Style 2 — outlined */
.main-button.outlined {
  background: transparent;
  border-color: var(--color-dark);
  color: var(--color-dark);
}
.main-button.outlined:hover {
  background: var(--color-dark);
  border-color: var(--color-dark);
  color: var(--color-white);
  box-shadow: 0 6px 16px rgba(var(--color-dark-rgb), 0.22);
}
.main-button.outlined.green {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: transparent;
}
.main-button.outlined.green:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
  box-shadow: 0 6px 16px rgba(var(--color-accent-rgb), 0.32);
}

.main-button.small {
  padding: 0.5rem 1.125rem;
  font-size: 0.8125rem;
}
.main-button.large {
  padding: 0.875rem 1.75rem;
  font-size: 0.9375rem;
}
.main-button:disabled,
.main-button.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* On dark / accent-filled sections — buttons invert to white */
.on-dark .main-button,
.on-dark .main-button.green,
.on-dark .main-button.pink {
  background: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-dark);
}
.on-dark .main-button:hover,
.on-dark .main-button.green:hover,
.on-dark .main-button.pink:hover {
  background: var(--color-bg-green);
  border-color: var(--color-bg-green);
  color: var(--color-dark);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.on-dark .main-button.outlined,
.on-dark .main-button.outlined.green {
  background: transparent;
  border-color: var(--color-white);
  color: var(--color-white);
}
.on-dark .main-button.outlined:hover,
.on-dark .main-button.outlined.green:hover {
  background: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-dark);
}

/* Style 3 — text link with pivoting arrow */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition-base);
}
.text-link .btn-arrow {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  transform: rotate(45deg);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.text-link:hover {
  color: var(--color-accent-dark);
}
.text-link:hover .btn-arrow,
.text-link:focus-visible .btn-arrow {
  transform: rotate(0deg);
}
.text-link.navy {
  color: var(--color-dark);
}
.text-link.navy:hover {
  color: var(--color-accent);
}
.on-dark .text-link {
  color: var(--color-white);
}
.on-dark .text-link:hover {
  color: var(--color-bg-green);
}

/* ==========================================================================
   5. BADGES
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.25rem 0.6875rem;
  border-radius: var(--profile-radius-pill);
  border: 1px solid transparent;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.4;
}
.badge.accent {
  background: var(--color-accent);
  color: var(--color-white);
}
.badge.light {
  background: var(--color-bg-green);
  color: var(--color-accent-dark);
}
.badge.outline {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text-muted);
}
.badge.dark {
  background: var(--color-dark);
  color: var(--color-white);
}
.badge.rose {
  background: var(--color-bg-rose);
  color: var(--color-rose);
}
.badge.blue {
  background: var(--color-bg-blue);
  color: var(--color-blue);
}
.badge.amber {
  background: var(--color-bg-amber);
  color: #b4712f;
}

/* ==========================================================================
   6. FORM ELEMENTS
   ========================================================================== */

.form-field {
  margin-bottom: var(--space-md);
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--color-text);
}
.form-label .req {
  color: var(--color-error);
}

.text-field {
  width: 100%;
  height: 3rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--profile-radius-sm);
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-white);
  transition: var(--transition-base);
}
.text-field::placeholder {
  color: var(--color-secondary);
  font-weight: 400;
}
.text-field:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.14);
}
.text-field.area {
  height: 8rem;
  padding-top: 0.875rem;
  resize: vertical;
}
.text-field.has-error {
  border-color: var(--color-error);
  background: rgba(var(--color-error-rgb), 0.03);
}
.text-field.has-error:focus {
  box-shadow: 0 0 0 3px rgba(var(--color-error-rgb), 0.14);
}
.text-field:disabled {
  background: var(--color-light-alt);
  color: var(--color-secondary);
  cursor: not-allowed;
}

select.text-field {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B819A' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  cursor: pointer;
}

.form-error {
  display: none;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-error);
  margin-top: 0.375rem;
}
.form-field.has-error .form-error {
  display: block;
}

/* Checkbox */
.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  cursor: pointer;
  font-size: 0.9375rem;
}
.form-checkbox input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.form-checkbox-box {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: 2px solid var(--color-border);
  border-radius: calc(var(--profile-radius-sm) * 0.4);
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-base);
  margin-top: 2px;
}
.form-checkbox input:checked + .form-checkbox-box {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.form-checkbox input:focus-visible + .form-checkbox-box {
  box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.2);
}
.form-checkbox-box svg {
  width: 12px;
  height: 12px;
  stroke: #fff;
  stroke-width: 3;
  fill: none;
  opacity: 0;
  transition: var(--transition-fast);
}
.form-checkbox input:checked + .form-checkbox-box svg {
  opacity: 1;
}
.form-checkbox.has-error .form-checkbox-box {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(var(--color-error-rgb), 0.14);
  background: rgba(var(--color-error-rgb), 0.03);
}
.form-radio.has-error .form-radio-dot {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(var(--color-error-rgb), 0.14);
}

/* Radio */
.form-radio {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  cursor: pointer;
  font-size: 0.9375rem;
}
.form-radio input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.form-radio-dot {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-base);
  margin-top: 1px;
}
.form-radio-dot::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-accent);
  transform: scale(0);
  transition: var(--transition-fast);
}
.form-radio input:checked + .form-radio-dot {
  border-color: var(--color-accent);
}
.form-radio input:checked + .form-radio-dot::after {
  transform: scale(1);
}
.form-radio input:focus-visible + .form-radio-dot {
  box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.2);
}

/* Toggle switch */
.form-switch {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
  font-size: 0.9375rem;
}
.form-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.form-switch-track {
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: var(--color-light);
  position: relative;
  flex-shrink: 0;
  transition: var(--transition-base);
}
.form-switch input:checked + .form-switch-track {
  background: var(--color-accent);
}
.form-switch input:focus-visible + .form-switch-track {
  box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.2);
}
.form-switch-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-white);
  position: absolute;
  top: 3px;
  left: 3px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-base);
}
.form-switch input:checked + .form-switch-track .form-switch-thumb {
  transform: translateX(20px);
}

/* Range slider */
.form-range-wrap {
  position: relative;
  padding-top: 1.75rem;
}
.form-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--color-light);
  outline: none;
}
.form-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-accent);
  cursor: pointer;
  border: none;
  box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.15);
  transition: var(--transition-fast);
}
.form-range::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 0 0 5px rgba(var(--color-accent-rgb), 0.2);
}
.form-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: var(--color-accent);
  cursor: pointer;
  box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.15);
}
.form-range-value {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  padding: 0.125rem 0.5rem;
  border-radius: var(--profile-radius-pill);
  background: var(--color-dark);
  color: var(--color-white);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

/* File upload */
.form-upload-input {
  display: none;
}
.form-upload-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: var(--space-xl) var(--space-lg);
  border: 2px dashed var(--color-border);
  border-radius: var(--profile-radius-md);
  background: var(--color-light-alt);
  cursor: pointer;
  text-align: center;
  transition: var(--transition-base);
}
.form-upload-label:hover,
.form-upload-label.dragover {
  border-color: var(--color-accent);
  background: rgba(var(--color-accent-rgb), 0.04);
}
.form-upload-label svg {
  width: 26px;
  height: 26px;
  stroke: var(--color-accent);
  stroke-width: 1.75;
  fill: none;
}
.form-upload-text {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text);
}
.form-upload-text strong {
  color: var(--color-accent);
}
.form-upload-hint {
  font-size: 0.78rem;
  color: var(--color-secondary);
}

/* ==========================================================================
   7. CARDS
   ========================================================================== */

.card-base {
  border: var(--profile-card-border);
  box-shadow: var(--profile-card-shadow);
  background: var(--profile-card-bg);
  border-radius: var(--border-radius-md);
  transition: var(--profile-hover-transition);
  overflow: hidden;
}
.card-base:hover {
  box-shadow: var(--profile-card-hover-shadow);
  transform: translateY(var(--profile-card-hover-lift));
}

.card-media {
  aspect-ratio: var(--profile-image-aspect);
  border-radius: var(--profile-image-radius);
  overflow: hidden;
  background: var(--color-light);
  filter: var(--profile-image-filter);
}
.card-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-body {
  padding: var(--space-md);
}
.card-body > * + * {
  margin-top: 0.625rem;
}

/* Article card */
.article-card {
  display: flex;
  flex-direction: column;
}
.article-card .card-media {
  border-radius: 0;
}
.article-card .card-excerpt {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

/* Service card */
.service-card {
  display: block;
  color: inherit;
}
.service-card .card-media {
  position: relative;
  border-radius: 0;
}
.service-card .card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(37, 66, 97, 0) 45%, rgba(37, 66, 97, 0.72) 100%);
}

/* Benefit card */
.benefit-card {
  padding: var(--space-lg);
}
.benefit-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--profile-radius-md);
  background: var(--color-bg-green);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-sm);
}
.benefit-icon svg {
  width: 21px;
  height: 21px;
  stroke: var(--color-accent);
  stroke-width: 2;
  fill: none;
}
.benefit-card p {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

/* Team card */
.team-card .card-media {
  aspect-ratio: 1 / 1;
  border-radius: 0;
}
.team-card .team-role {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.team-card p {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

/* Gradient panel card — from the brand sheet's gradient examples */
.gradient-card {
  border-radius: var(--profile-radius-lg);
  padding: var(--space-md);
  transition: var(--profile-hover-transition);
}
.gradient-card:hover {
  box-shadow: var(--profile-card-hover-shadow);
  transform: translateY(var(--profile-card-hover-lift));
}
.gradient-card.green {
  background: var(--gradient-card-green);
}
.gradient-card.rose {
  background: var(--gradient-card-rose);
}
.gradient-card.blue {
  background: var(--gradient-card-blue);
}
.gradient-card.amber {
  background: var(--gradient-card-amber);
}
.gradient-card.green h3 {
  color: var(--color-accent-dark);
}
.gradient-card.rose h3 {
  color: var(--color-rose);
}
.gradient-card.blue h3 {
  color: var(--color-blue);
}
.gradient-card.amber h3 {
  color: #b4712f;
}
.gradient-card p {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

/* ==========================================================================
   8. UI PATTERNS
   ========================================================================== */

/* FAQ accordion */
.faq-item {
  border-bottom: 1px solid var(--color-border);
}
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-md) 0;
  background: none;
  border: none;
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
  transition: color var(--transition-base);
}
.faq-question:hover {
  color: var(--color-accent);
}
.faq-chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  stroke: var(--color-secondary);
  stroke-width: 2.5;
  fill: none;
  transition:
    transform var(--transition-base),
    stroke var(--transition-base);
}
.faq-question[aria-expanded='true'] {
  color: var(--color-accent);
}
.faq-question[aria-expanded='true'] .faq-chevron {
  transform: rotate(180deg);
  stroke: var(--color-accent);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.faq-answer-inner {
  padding-bottom: var(--space-md);
  font-size: 0.92rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* Tabs */
.tab-menu {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--color-light);
}
.tab-trigger {
  padding: var(--space-sm) var(--space-md);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  font-family: var(--font-primary);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-secondary);
  cursor: pointer;
  transition: var(--transition-base);
}
.tab-trigger:hover {
  color: var(--color-text);
}
.tab-trigger.active {
  color: var(--color-text);
  border-bottom-color: var(--color-accent);
}
.tab-panel {
  display: none;
  padding: var(--space-lg) 0;
}
.tab-panel.active {
  display: block;
}

/* Breadcrumbs */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  margin-bottom: var(--space-md);
}
.breadcrumbs a {
  color: var(--color-secondary);
  transition: color var(--transition-fast);
}
.breadcrumbs a:hover {
  color: var(--color-accent);
}
.breadcrumb-sep {
  color: var(--color-secondary);
  opacity: 0.5;
}
.breadcrumb-current {
  color: var(--color-text);
  font-weight: 600;
}
/* Breadcrumb band — the page-level wrapper the trail sits in on interior
   pages, directly beneath the hero (matching the live site's position).
   The trail itself is the .breadcrumbs component from UI patterns. */
.breadcrumb-band {
  margin-bottom: var(--space-2xl);
}
.breadcrumb-band-inner {
  max-width: var(--profile-container-max);
  margin: 0 auto;
}
.breadcrumb-band .breadcrumbs {
  margin-bottom: 0;
}
.on-dark .breadcrumbs a {
  color: rgba(255, 255, 255, 0.7);
}
.on-dark .breadcrumbs a:hover {
  color: var(--color-white);
}

/* ---- Page hero ----
   Had no CSS at all, so the breadcrumbs sat hard against the bottom of the
   header — more obvious now the header is sticky and the two are always
   adjacent.

   Vertical rhythm only: .container inside the hero already handles the side
   gutters, and .breadcrumbs carries its own margin-bottom, so this is purely
   the space above and below the block. */
.page-hero {
  padding-top: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.page-hero h1 {
  margin: 0 0 0.5rem;
}
.on-dark .breadcrumb-sep {
  color: rgba(255, 255, 255, 0.5);
}
.on-dark .breadcrumb-current {
  color: var(--color-white);
}

/* Star ratings */
.star-rating {
  display: inline-flex;
  gap: 2px;
}
.star {
  width: 18px;
  height: 18px;
  fill: var(--color-light);
  transition: fill var(--transition-fast);
}
.star.filled {
  fill: var(--color-accent);
}
.star-rating.small .star {
  width: 14px;
  height: 14px;
}
.star-rating.large .star {
  width: 24px;
  height: 24px;
}

/* Toasts */
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--profile-radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-lg);
  border-left: 4px solid var(--color-secondary);
  max-width: 420px;
  animation: toast-in 0.3s ease forwards;
}
.toast.success {
  border-left-color: var(--color-success);
}
.toast.warning {
  border-left-color: var(--color-warning);
}
.toast.error {
  border-left-color: var(--color-error);
}
.toast.info {
  border-left-color: var(--color-info);
}
.toast-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.toast-icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.25;
  fill: none;
}
.toast.success .toast-icon svg {
  stroke: var(--color-success);
}
.toast.warning .toast-icon svg {
  stroke: var(--color-warning);
}
.toast.error .toast-icon svg {
  stroke: var(--color-error);
}
.toast.info .toast-icon svg {
  stroke: var(--color-info);
}
.toast-content {
  flex: 1;
}
.toast-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-text);
}
.toast-text {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin-top: 0.15rem;
}
.toast-close {
  background: none;
  border: none;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--color-secondary);
  cursor: pointer;
  padding: 0 0.25rem;
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Search bar */
.search-bar {
  display: flex;
  align-items: center;
  position: relative;
}
.search-bar-icon {
  position: absolute;
  left: 0.875rem;
  width: 18px;
  height: 18px;
  stroke: var(--color-secondary);
  stroke-width: 2.25;
  fill: none;
  pointer-events: none;
}
.search-bar-input {
  width: 100%;
  height: 2.75rem;
  padding: 0.5rem 2.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--profile-radius-pill);
  font-family: var(--font-primary);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-white);
  transition: var(--transition-base);
}
.search-bar-input::placeholder {
  color: var(--color-secondary);
  font-weight: 400;
}
.search-bar-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.14);
}
.search-bar-clear {
  position: absolute;
  right: 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-secondary);
  padding: 0.25rem;
  display: flex;
}
.search-bar-clear svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
}

/* ------------------------------------------------------------------
   Site search — a trigger in the navbar that opens a full-page
   overlay. The form posts to Drupal's existing /search route with
   the `keys` parameter, so it needs no new back end.
   ------------------------------------------------------------------ */
/* Screen-reader-only utility — used by the search form's label.
   screen-reader-text is the WordPress core class name: search.php and 404.php
   use it, and so does core's own output (paginate_links, comment forms). It was
   never defined, so those labels were rendering visibly. Aliased here rather
   than changing the templates, so core markup is covered too. */
.visually-hidden,
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.nav-search {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--profile-radius-pill);
  background: transparent;
  color: var(--color-dark);
  cursor: pointer;
  transition: var(--transition-fast);
}
.nav-search:hover {
  background: var(--color-light-alt);
  border-color: var(--color-dark);
}
.nav-search:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.nav-search svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: rgba(var(--color-dark-rgb), 0.97);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--transition-base),
    visibility var(--transition-base);
}
.search-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
body.search-open {
  overflow: hidden;
}

.search-overlay-top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--profile-container-max);
  margin: 0 auto;
  padding: var(--space-lg) clamp(1.5rem, 5vw, 5rem) 0;
}
.search-overlay-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.search-overlay-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: transparent;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-fast);
}
.search-overlay-close:hover {
  background: rgba(255, 255, 255, 0.14);
}
.search-overlay-close:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.search-overlay-close svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2.25;
  fill: none;
}

.search-overlay-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: var(--profile-container-max);
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 5rem) clamp(2rem, 8vw, 6rem);
}
.search-overlay-form {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  border-bottom: 2px solid rgba(255, 255, 255, 0.28);
  padding-bottom: var(--space-md);
}
.search-overlay-icon {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  stroke: var(--color-accent);
  stroke-width: 2;
  fill: none;
}
.search-overlay-input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  padding: 0;
  color: #fff;
  font-family: var(--font-primary);
  font-size: clamp(1.4rem, calc(3.2 * var(--fluid)), 2.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.search-overlay-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
  font-weight: 600;
}
.search-overlay-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.search-overlay-suggest {
  margin-top: clamp(1.5rem, 4vw, 3rem);
}
.search-overlay-suggest-title {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 var(--space-md);
}
.search-overlay-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
}
.search-overlay-chips a {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--profile-radius-pill);
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.875rem;
  text-decoration: none;
  transition: var(--transition-fast);
}
.search-overlay-chips a:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

@media (max-width: 767px) {
  .search-overlay-form {
    gap: var(--space-sm);
  }
  .search-overlay-icon {
    width: 20px;
    height: 20px;
  }
  .search-overlay-body {
    justify-content: flex-start;
    padding-top: var(--space-xl);
  }
}

/* Custom select dropdown */
.select-dropdown {
  position: relative;
  max-width: 260px;
}
.select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--profile-radius-sm);
  background: var(--color-white);
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  transition: var(--transition-base);
}
.select-trigger:hover {
  border-color: var(--color-accent);
}
.select-chevron {
  width: 16px;
  height: 16px;
  stroke: var(--color-secondary);
  stroke-width: 2.5;
  fill: none;
  transition: transform var(--transition-base);
}
.select-dropdown.open .select-chevron {
  transform: rotate(180deg);
}
.select-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 0.25rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--profile-radius-sm);
  box-shadow: var(--shadow-lg);
  z-index: 50;
  display: none;
  overflow: hidden;
}
.select-dropdown.open .select-panel {
  display: block;
}
.select-search-wrap {
  padding: 0.5rem;
  border-bottom: 1px solid var(--color-border);
}
.select-search {
  width: 100%;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: calc(var(--profile-radius-sm) * 0.75);
  font-family: var(--font-primary);
  font-size: 0.8125rem;
}
.select-search:focus {
  outline: none;
  border-color: var(--color-accent);
}
.select-options {
  list-style: none;
  margin: 0;
  padding: 0.25rem;
  max-height: 190px;
  overflow-y: auto;
}
.select-option {
  padding: 0.5rem 0.625rem;
  border-radius: calc(var(--profile-radius-sm) * 0.75);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.select-option:hover {
  background: var(--color-light-alt);
}
.select-option.active {
  color: var(--color-accent);
  font-weight: 700;
  background: var(--color-bg-green);
}
.select-empty {
  display: none;
  padding: 0.75rem;
  font-size: 0.8125rem;
  color: var(--color-secondary);
  text-align: center;
  margin: 0;
}

/* ==========================================================================
   9. LAYOUT UTILITIES
   ========================================================================== */

.body-container {
  width: 100%;
  max-width: var(--profile-container-max);
  margin: 0 auto;
  padding-inline: var(--container-padding);
  position: relative;
  z-index: 2;
}

.body-section {
  position: relative;
  padding-block: var(--profile-section-padding);
  background: var(--color-white);
  overflow: hidden;
}
.body-section.light {
  background: var(--color-light-alt);
}
.body-section.dark {
  background: var(--color-dark);
}
.body-section.accent {
  background: var(--color-accent);
}
.body-section.image {
  background: var(--color-dark);
}
.body-section.tight {
  padding-block: calc(var(--profile-section-padding) * 0.5);
}

.section-bg-image {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.section-bg-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.background-overlay {
  position: absolute;
  inset: 0;
  background: var(--color-overlay);
  z-index: 1;
}

/* Title holder */
.title-holder {
  margin-bottom: var(--space-lg);
}
.title-holder.center {
  text-align: center;
  margin-inline: auto;
  max-width: 720px;
}
.title-holder.left {
  text-align: left;
}
.title-border {
  width: 60px;
  height: 4px;
  background: var(--color-accent);
  border-radius: 2px;
  margin-top: 1rem;
}
.title-holder.center .title-border {
  margin-inline: auto;
}

/* Text restrict */
.text-restrict {
  margin: 0 auto;
}
.text-restrict.left {
  margin-left: 0;
}
.text-restrict._2-cols {
  columns: 2;
  column-gap: 2rem;
  max-width: none;
}

/* Columns */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}
.split-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

/* Panel — the brand sheet's 6 content-panel colour options */
.panel {
  border-radius: var(--profile-radius-lg);
  padding: clamp(var(--space-lg), 4vw, var(--space-2xl));
}
.panel.green-tint {
  background: var(--color-bg-green);
}
.panel.rose-tint {
  background: var(--color-bg-rose);
}
.panel.blue-tint {
  background: var(--color-bg-blue);
}
.panel.amber-tint {
  background: var(--color-bg-amber);
}
.panel.accent {
  background: var(--color-accent);
}
.panel.navy {
  background: var(--color-dark);
}

/* The tinted hero wash. Shared by the article templates — a case study uses
   the same header treatment as a post, so it takes the same wash and the same
   bg-* tint switches rather than carrying a second copy of the rule. */
.blog-single,
.case-study,
.blog-archive,
.resource-archive {
  position: relative;
  /* The default tint lives here, on the element, NOT on the ::after below.
     A custom property declared on a pseudo-element beats the value it would
     inherit from its parent, so declaring it there made the .bg-* switches
     dead — every wash came out green whatever class was set. */
  --hs-tint: var(--color-bg-green);
}
.blog-single::after,
.case-study::after,
.blog-archive::after,
.resource-archive::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  max-height: 700px;
  z-index: -1;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background:
    radial-gradient(
      62% 58% at 50% 0%,
      rgba(var(--color-accent-rgb), 0.16) 0%,
      rgba(var(--color-accent-rgb), 0) 72%
    ),
    linear-gradient(180deg, var(--hs-tint) 0%, var(--color-white) 100%);
}
/* One tint switch for every page type that carries the wash. */
.blog-single.bg-blue,
.case-study.bg-blue,
.blog-archive.bg-blue,
.resource-archive.bg-blue {
  --hs-tint: var(--color-bg-blue);
}
.blog-single.bg-rose,
.case-study.bg-rose,
.blog-archive.bg-rose,
.resource-archive.bg-rose {
  --hs-tint: var(--color-bg-rose);
}
.blog-single.bg-amber,
.case-study.bg-amber,
.blog-archive.bg-amber,
.resource-archive.bg-amber {
  --hs-tint: var(--color-bg-amber);
}

/* ==========================================================================
   10. DECORATIVE ELEMENTS — profile: grid
   ========================================================================== */

.section-decoration {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--profile-decoration-opacity);
  background-image:
    linear-gradient(to right, var(--profile-decoration-colour-1) 1px, transparent 1px),
    linear-gradient(to bottom, var(--profile-decoration-colour-1) 1px, transparent 1px);
  background-size: var(--profile-grid-size) var(--profile-grid-size);
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    transparent 30%,
    transparent 70%,
    #000 100%
  );
  mask-image: linear-gradient(to bottom, #000 0%, transparent 30%, transparent 70%, #000 100%);
}
.body-section.dark .section-decoration,
.body-section.accent .section-decoration,
.body-section.image .section-decoration {
  --profile-decoration-colour-1: #ffffff;
  opacity: 0.14;
  z-index: 2;
}

/* Check / cross list items — List Style 1 & 2 from the brand sheet */
.check-list {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.check-list-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}
.check-list-item strong {
  color: var(--color-dark);
  font-weight: 700;
}
.check-list-icon-wrap {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  border-radius: calc(var(--profile-radius-sm) * 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-green);
}
.check-list-icon-wrap svg {
  width: 12px;
  height: 12px;
  stroke: var(--color-accent);
  stroke-width: 3;
  fill: none;
}
.check-list-item.cross .check-list-icon-wrap {
  background: var(--color-bg-rose);
}
.check-list-item.cross .check-list-icon-wrap svg {
  stroke: var(--color-error);
}
.on-dark .check-list-item {
  color: rgba(255, 255, 255, 0.78);
}
.on-dark .check-list-item strong {
  color: var(--color-white);
}
.on-dark .check-list-icon-wrap {
  background: rgba(255, 255, 255, 0.18);
}
.on-dark .check-list-icon-wrap svg {
  stroke: var(--color-white);
}

/* ==========================================================================
   11. NAVIGATION — navbar & mega menu
   Refined mega menu: flat icon rows + group labels + subtle featured rail.
   Replaces the heavy pastel gradient cards with a clean, scannable panel.
   ========================================================================== */

/* --- Header bar ---
   Sticky at top:0. The comment that used to sit on position said "production:
   sticky, top:0" but the value was never changed and nothing in the templates
   ever added .is-sticky, so the header did not stick.

   The announcement bar is deliberately NOT pinned with it. It is a sibling that
   sits before <header> in nav.php (lines 83-90, header opens at 92), not a
   child of it, so it scrolls away on its own and only the nav stays put. No
   extra rule is needed to exclude it — that falls out of the markup order.

   Sticky needs every ancestor to have overflow:visible. The header is a direct
   child of <body> (header.php:71) and neither html nor body sets overflow, so
   that holds. body.search-open sets overflow:hidden, but only while the search
   dialog is covering the viewport anyway. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--color-white);
  border-top: 3px solid var(--color-accent);
  border-bottom: 1px solid var(--color-border);
}
/* Now redundant — the base rule above is sticky, and no template adds this
   class. Left in place because it is harmless and lumisol-meh.css carries the
   same rule. */
.site-header.is-sticky {
  position: sticky;
  top: 0;
}

.site-nav {
  position: relative; /* anchor for full-width mega menu */
  display: flex;
  align-items: center;
  gap: var(--space-md);
  max-width: var(--profile-container-max);
  margin: 0 auto;
  padding: 0.8125rem var(--container-padding);
}

.container {
  max-width: var(--profile-container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* Logo */
.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  text-decoration: none;
}
.nav-logo img {
  width: 100px;
  height: auto;
}
.nav-logo-mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.03em;
}
.nav-logo-text {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--color-dark);
}

/* Primary menu */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  list-style: none;
  margin: 0 0 0 var(--space-sm);
  padding: 0;
}
.nav-item {
  position: static;
}
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border: none;
  background: none;
  border-radius: var(--profile-radius-pill);
  font-family: var(--font-primary);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--color-dark);
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--transition-fast),
    color var(--transition-fast);
}
.nav-link:hover {
  background: var(--color-light-alt);
}
.nav-chevron {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 2.25;
  fill: none;
  transition: transform var(--transition-base);
}
.nav-item.is-open > .nav-link {
  color: var(--color-accent);
  background: var(--color-bg-green);
}
.nav-item.is-open > .nav-link .nav-chevron {
  transform: rotate(180deg);
}

/* Right-hand actions */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-left: auto;
  flex-shrink: 0;
}

/* Mobile toggle */
.nav-toggle {
  display: none;
  margin-left: auto;
  width: 42px;
  height: 42px;
  border: 1px solid var(--color-border);
  border-radius: var(--profile-radius-sm);
  background: var(--color-white);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav-toggle svg {
  width: 20px;
  height: 20px;
  stroke: var(--color-dark);
  stroke-width: 2;
  fill: none;
}

/* --- Mega menu panel --- */
.mega {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0; /* span the full nav-container width */
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--profile-radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--space-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity var(--transition-base),
    transform var(--transition-base),
    visibility var(--transition-base);
  z-index: 70;
}
.mega::before {
  /* connective hover bridge */
  content: '';
  position: absolute;
  top: -0.75rem;
  left: 0;
  right: 0;
  height: 0.75rem;
}
.nav-item.is-open > .mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Padding variant — panels always span the full nav-container width */
.mega.compact {
  padding: var(--space-md);
}

/* Layout: content grid + optional featured rail */
.mega-layout {
  display: grid;
  gap: var(--space-lg);
  align-items: start;
}
.mega-layout.has-rail {
  grid-template-columns: minmax(0, 1fr) 288px;
}

.mega-grid {
  display: grid;
  grid-template-columns: repeat(var(--mega-cols, 2), minmax(0, 1fr));
  gap: var(--space-md) var(--space-lg);
}

.mega-col-title {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin: 0 0 0.375rem;
  padding-bottom: 0.4375rem;
  border-bottom: 1px solid var(--color-border);
}
.mega-list {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
}
.mega-list.spread {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.125rem 0.75rem;
}

.mega-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--profile-radius-md);
  text-decoration: none;
  color: inherit;
  transition: background var(--transition-fast);
}
.mega-link:hover {
  background: var(--color-light-alt);
}
.mega-link-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--color-bg-green);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background var(--transition-fast),
    transform var(--transition-fast);
}
.mega-link-icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--color-accent);
  stroke-width: 2;
  fill: none;
}
.mega-link:hover .mega-link-icon {
  background: var(--color-accent);
  transform: translateY(-2px);
}
.mega-link:hover .mega-link-icon svg {
  stroke: #fff;
}

.mega-link-body {
  min-width: 0;
}
.mega-link-title {
  display: block;
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-dark);
}
.mega-link:hover .mega-link-title {
  color: var(--color-accent);
}
.mega-link-desc {
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--color-text-muted);
  margin-top: 0.125rem;
}

/* Icon-tile colour variants — mirror the brand secondaries */
.mega-link-icon.rose {
  background: var(--color-bg-rose);
}
.mega-link-icon.rose svg {
  stroke: var(--color-rose);
}
.mega-link:hover .mega-link-icon.rose {
  background: var(--color-rose);
}
.mega-link-icon.blue {
  background: var(--color-bg-blue);
}
.mega-link-icon.blue svg {
  stroke: var(--color-blue);
}
.mega-link:hover .mega-link-icon.blue {
  background: var(--color-blue);
}
.mega-link-icon.amber {
  background: var(--color-bg-amber);
}
.mega-link-icon.amber svg {
  stroke: var(--color-amber);
}
.mega-link:hover .mega-link-icon.amber {
  background: var(--color-amber);
}
.mega-link-icon.navy {
  background: var(--color-light);
}
.mega-link-icon.navy svg {
  stroke: var(--color-dark);
}
.mega-link:hover .mega-link-icon.navy {
  background: var(--color-dark);
}

/* Compact row — icon + title only, for dense menus (e.g. Product) */
.mega-link.compact {
  align-items: center;
  padding: 0.4375rem 0.625rem;
  gap: 0.625rem;
}
.mega-link.compact .mega-link-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}
.mega-link.compact .mega-link-icon svg {
  width: 15px;
  height: 15px;
}

/* Featured rail (customer story / blog / tutorials) */
.mega-rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  border-left: 1px solid var(--color-border);
  padding-left: var(--space-lg);
}
.mega-rail-title {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin: 0 0 0.25rem;
}
.mega-feature {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--profile-radius-md);
  background: var(--color-light-alt);
  padding: var(--space-md);
  transition: var(--profile-hover-transition);
}
.mega-feature:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.mega-feature.green-tint {
  background: var(--color-bg-green);
}
.mega-feature .badge {
  margin-bottom: 0.5rem;
}
.mega-feature-title {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-dark);
  margin-bottom: 0.35rem;
}
.mega-feature-text {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* Footer strip (e.g. "Host on your own server") */
.mega-footer {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

/* --- Navigation responsive — mobile drawer + accordion --- */
@media (max-width: 991px) {
  .site-nav {
    flex-wrap: wrap;
  }
  .nav-toggle {
    display: inline-flex;
    margin-left: auto;
  }

  /* Drawer collapsed by default; opened via .site-header.nav-open */
  .nav-menu,
  .nav-actions {
    display: none;
  }
  .site-header.nav-open .nav-menu {
    display: flex;
  }
  .site-header.nav-open .nav-actions {
    display: flex;
  }

  .nav-menu {
    order: 5;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: var(--space-sm) 0 0;
    max-height: 70vh;
    overflow-y: auto;
  }
  .nav-item {
    width: 100%;
    border-top: 1px solid var(--color-border);
  }
  .nav-item:first-child {
    border-top: none;
  }
  .nav-link {
    width: 100%;
    justify-content: space-between;
    border-radius: 0;
    padding: 0.875rem 0.25rem;
    font-size: 1rem;
  }
  .nav-item.is-open > .nav-link {
    background: transparent;
  }

  /* Mega panel becomes an inline, single-column accordion body */
  .mega {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 0 0 var(--space-sm);
    display: none;
  }
  .nav-item.is-open > .mega {
    display: block;
  }
  .mega-layout,
  .mega-layout.has-rail {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  .mega-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-md);
  }
  .mega-list.spread {
    grid-template-columns: 1fr;
  }
  .mega-rail {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-md);
  }
  .mega-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .nav-actions {
    order: 6;
    width: 100%;
    flex-direction: column;
    gap: 0.625rem;
    margin: var(--space-sm) 0 0;
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-border);
  }
  .nav-actions .main-button {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   12. RESPONSIVE
   ========================================================================== */

@media (max-width: 991px) {
  :root {
    --profile-section-padding: calc(var(--space-2xl) * var(--profile-space-multiplier));
  }
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .split-2 {
    gap: var(--space-xl);
  }
}

@media (max-width: 767px) {
  :root {
    --container-padding: 1rem;
  }
  .grid-2,
  .grid-3,
  .grid-4,
  .split-2 {
    grid-template-columns: 1fr;
  }
  .text-restrict._2-cols {
    columns: 1;
  }
  .tab-menu {
    overflow-x: auto;
  }
}

@media (max-width: 479px) {
  body {
    font-size: 1rem;
  }
  .main-button {
    width: 100%;
    justify-content: center;
  }
  .button-holder {
    flex-direction: column;
  }
}

/* ==========================================================================
   13. BLOCK — home_header (split hero)
   Full-width homepage hero: title + text + CTA + trust badges on the left,
   product screenshot in a dark device frame on the right, green brand glow.
   ========================================================================== */

.home-header {
  --hh-tint: var(--color-bg-blue); /* background colour option */
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      58% 82% at 102% 62%,
      rgba(var(--color-accent-rgb), 0.2) 0%,
      rgba(var(--color-accent-rgb), 0) 60%
    ),
    linear-gradient(180deg, var(--hh-tint) 0%, var(--color-white) 100%);
}
/* Background colour options — green brand glow stays constant */
.home-header.bg-green {
  --hh-tint: var(--color-bg-green);
}
.home-header.bg-blue {
  --hh-tint: var(--color-bg-blue);
}
.home-header.bg-red {
  --hh-tint: var(--color-bg-rose);
}
.home-header.bg-orange {
  --hh-tint: var(--color-bg-amber);
}

/* Optional CTA arrow */
.home-header.no-arrow .btn-arrow {
  display: none;
}

.home-header-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(2.5rem, 6vw, 5.5rem) 0;
}

.home-header-content {
  max-width: 640px;
}
.home-header-content h1 {
  margin-bottom: var(--space-md);
}
.home-header-text {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  max-width: 46ch;
  margin: 0 0 var(--space-lg);
}
.home-header .button-holder {
  margin-top: 0;
  margin-bottom: var(--space-xl);
}

/* Trust badges */
.home-header-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.75rem;
}
.trust-badge {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  min-height: 74px;
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--color-border);
  border-radius: var(--profile-radius-sm);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.trust-badge-top {
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--color-secondary);
}
.trust-badge-title {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-dark);
}
.trust-badge-sub {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-secondary);
}
.trust-badge.g2 {
  border-top: 3px solid var(--color-amber);
}
.trust-badge.soc,
.trust-badge.iso {
  align-items: center;
}
.trust-badge .tb-mark {
  width: 26px;
  height: 26px;
  margin: 0 auto 0.15rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
}
.trust-badge.g2 .tb-mark {
  background: var(--color-error);
  border-radius: 50%;
}
.trust-badge.soc .tb-mark {
  background: var(--color-blue);
  border-radius: 50%;
}
.trust-badge.iso .tb-mark {
  background: var(--color-dark);
  border-radius: 6px 6px 10px 10px;
}

/* Media — dark device frame */
.home-header-media {
  position: relative;
}
.hh-device {
  position: relative;
  z-index: 2;
  background: #17191d;
  border-radius: 22px;
  padding: 1.15rem;
  box-shadow: var(--shadow-xl);
}
.hh-device::before,
.hh-device::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}
.hh-device::before {
  top: 6px;
}
.hh-device::after {
  bottom: 6px;
}
.hh-screen {
  border-radius: 9px;
  overflow: hidden;
  background: var(--color-white);
  aspect-ratio: 16 / 9;
}
.hh-screen > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Hero media option — screenshot mock or video. The block carries
   .media-video to swap which child of .hh-screen is shown. */
.hh-video {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #0f1114;
}
.home-header.media-video .hh-dash {
  display: none;
}
.home-header.media-video .hh-video {
  display: block;
}

/* Two columns hold on tablet; stack on phones */
@media (max-width: 767px) {
  .home-header-inner {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  .home-header-content {
    max-width: none;
  }
}
/* Tablet — tighten the split */
@media (min-width: 768px) and (max-width: 991px) {
  .home-header-inner {
    gap: var(--space-lg);
    padding: var(--space-2xl) var(--space-lg);
  }
}

/* ==========================================================================
   14. BLOCK — client_logos (logo carousel)
   Centred title + rating line, then an infinite marquee of client logos.
   ========================================================================== */

.client-logos {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  background: var(--color-white);
  text-align: center;
  overflow: hidden;
}
.client-logos-head {
  padding-inline: clamp(1.5rem, 4vw, 3rem);
}
.client-logos-title {
  font-size: clamp(1.4rem, calc(2.5 * var(--fluid)), 1.95rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--color-dark);
  margin: 0 0 0.6rem;
}
.client-logos-sub {
  font-size: 1rem;
  color: var(--color-text-muted);
  margin: 0 0 clamp(1.75rem, 4vw, 2.75rem);
}
.client-logos-sub a {
  color: var(--color-blue);
  font-weight: 600;
}
.client-logos-sub a:hover {
  text-decoration: underline;
}

/* Marquee */
.logo-carousel {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.logo-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: clamp(2.5rem, 6vw, 5rem);
  animation: logo-scroll 42s linear infinite;
}
.logo-carousel:hover .logo-track {
  animation-play-state: paused;
}

.logo-item {
  flex: 0 0 auto;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-dark);
  opacity: 0.55;
  filter: grayscale(1);
  transition:
    opacity var(--transition-base),
    filter var(--transition-base);
}
.logo-item:hover {
  opacity: 1;
  filter: grayscale(0);
}
.logo-name {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.logo-name.serif {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 1.05rem;
}
.logo-name .lm {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

@keyframes logo-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .logo-track {
    animation: none;
  }
}

@media (max-width: 767px) {
  .client-logos-title {
    font-size: 1.2rem;
  }
  .client-logos-sub {
    font-size: 0.9rem;
  }
  .logo-item {
    height: 34px;
  }
  .logo-name {
    font-size: 1.15rem;
  }
}

/* ==========================================================================
   15. BLOCK — text_block (image + text columns, reversible)
   Options: .media-left / .media-right, and .no-btn to hide the CTA.
   Tablet keeps two columns; mobile stacks with text always above the image.
   ========================================================================== */

.text-block {
  background: var(--color-white);
}
/* .text-block paints a full-bleed white ground; this constrains the content
   inside it to the same 1440px as every other section, so a feature row lines
   up with the heroes and grids above and below it.

   It had no max-width and no horizontal padding at all, which meant two things:
   the row ran to the full viewport on a wide screen while everything around it
   stopped at 1440, and on a phone the copy touched the screen edge. The
   padding-inline is the same clamp the other -inner wrappers use. */
.text-block-inner {
  max-width: var(--profile-container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  padding: clamp(2.5rem, 6vw, 5.5rem) clamp(1.5rem, 5vw, 5rem);
}
/* Content is first in the DOM (so mobile stacks text on top); desktop position via order */
.text-block-content {
  order: 2;
}
.text-block-media {
  order: 1;
}
.text-block.media-right .text-block-content {
  order: 1;
}
.text-block.media-right .text-block-media {
  order: 2;
}

.text-block-content h2 {
  margin-bottom: var(--space-md);
}
.text-block-text {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-lg);
}
.text-block .button-holder {
  margin-top: 0;
}
.text-block.no-btn .button-holder {
  display: none;
}
/* One column, no media side. The Text block always carries this; the same
   reasoning as .page-head.text-only — a two-column grid with nothing in the
   second column leaves the copy in the left half with a hole beside it.

   The measure matters as much as the collapse: a single column of body text
   across the full 1440 container runs to well over 200 characters a line, which
   is unreadable. 68ch is a normal prose measure. The heading is left to span,
   since a long heading breaking early looks like a mistake. */
.text-block.no-media .text-block-inner {
  grid-template-columns: minmax(0, 1fr);
}
.text-block.no-media .text-block-text {
  max-width: 68ch;
}

/* height:auto so the image keeps its own aspect ratio as the column resizes.
   Without it the height is whatever the file is, and a wide column scales the
   width while the height stays put — which squashes the image. */
.text-block-media img {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius-md);
  display: block;
}

/* Placeholder for a row with no featured image: the site logo on white, the
   same idea as .archive-card__media.is-placeholder on the card grids.

   The width:100% above would stretch a wordmark across the whole column, so
   this resets it to auto and contains it instead. aspect-ratio holds the box
   open — a contained logo cannot give the column its height on its own. */
.text-block-media.is-placeholder {
  background: var(--color-white);
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
}
.text-block-media.is-placeholder img {
  width: auto;
  height: auto;
  max-width: 46%;
  max-height: 40%;
  object-fit: contain;
  border-radius: 0;
}
.text-block-media.framed {
  background: var(--color-bg-blue);
  border-radius: var(--profile-radius-lg);
  padding: clamp(1.25rem, 3vw, 2.25rem);
}

/* Mobile — stack, text always above the image */
@media (max-width: 767px) {
  .text-block-inner {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  .text-block-content,
  .text-block.media-right .text-block-content {
    order: 1;
  }
  .text-block-media,
  .text-block.media-right .text-block-media {
    order: 2;
  }
}

/* ==========================================================================
   16. BLOCK — tab_content (tabbed before/after)
   Row of icon tabs switch a green before/after panel built on .check-list.
   ========================================================================== */

.tab-block {
  background: var(--color-white);
  padding: clamp(2.5rem, 6vw, 5rem) 0;
}
/* .tab-block-inner { max-width: var(--profile-container-max); margin: 0 auto; padding-inline: clamp(1.5rem, 5vw, 5rem); } */
.tab-block-title {
  text-align: center;
  color: var(--color-accent);
  font-size: clamp(1.6rem, calc(3 * var(--fluid)), 2.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 var(--space-xl);
}

.tab-block-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}
.tab-block-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  padding: var(--space-md) var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--profile-radius-md);
  background: var(--color-white);
  font-family: var(--font-primary);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-dark);
  text-align: center;
  cursor: pointer;
  transition: var(--transition-base);
}
.tab-block-tab:hover {
  border-color: var(--color-accent);
}
.tab-block-tab.is-active {
  background: var(--color-bg-green);
  border-color: var(--color-bg-green);
}
.tab-block-tab svg {
  width: 30px;
  height: 30px;
  stroke: var(--color-dark);
  stroke-width: 1.6;
  fill: none;
}
.tab-block-tab.is-active svg {
  stroke: var(--color-accent-dark);
}

.tab-block-panel {
  display: none;
}
.tab-block-panel.is-active {
  display: block;
}

.tab-block-body {
  border-radius: var(--profile-radius-lg);
  background: linear-gradient(120deg, #eaf7f0 0%, #cfeedf 100%);
  padding: clamp(1.5rem, 4vw, 3rem);
}
.tab-block-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
}
.tab-block-col h4 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-dark);
  margin: 0 0 var(--space-md);
}

/* Check-list overrides inside the green panel — white circular icon chips */
.tab-block .check-list-icon-wrap {
  background: var(--color-white);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
}
.tab-block .check-list-icon-wrap svg {
  stroke: var(--color-accent);
}
.tab-block .check-list-item.cross .check-list-icon-wrap {
  background: var(--color-white);
}
.tab-block .check-list-item.cross .check-list-icon-wrap svg {
  stroke: var(--color-error);
}
.tab-block .check-list-item {
  color: var(--color-dark);
}

.tab-block-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}
.tab-block-foot p {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-dark);
  margin: 0;
}

@media (max-width: 991px) {
  .tab-block-tabs {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 767px) {
  .tab-block-tabs {
    display: flex;
    overflow-x: auto;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    scroll-snap-type: x mandatory;
  }
  .tab-block-tab {
    flex: 0 0 46%;
    scroll-snap-align: start;
    font-size: 0.85rem;
  }
  .tab-block-cols {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .tab-block-foot {
    flex-direction: column;
    gap: var(--space-md);
    text-align: center;
  }
}

/* ==========================================================================
   17. BLOCK — reviews (testimonial grid)
   Three review cards (stars, title, quote, name/role) + centred CTA.
   ========================================================================== */

.reviews {
  background: var(--color-light-alt);
  padding: clamp(2.5rem, 6vw, 5rem) 0;
}
.reviews-inner {
  max-width: var(--profile-container-max);
  margin: 0 auto;
  padding-inline: clamp(1.5rem, 5vw, 5rem);
}
/* A heading inside the band, above the cards. The block itself has no heading;
   the Demo page template adds one here rather than stacking a Section Heading
   block on top, which doubled the padding. */
.reviews-heading {
  text-align: center;
  margin: 0 0 var(--space-xl);
}
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.review-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-lg);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-sm);
  transition: var(--profile-hover-transition);
}
.review-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(var(--profile-card-hover-lift));
}
.review-card .star-rating {
  margin-bottom: var(--space-md);
}
.review-card .star.filled {
  fill: #f5b301;
} /* gold review stars */
.review-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-dark);
  margin: 0 0 var(--space-sm);
}
.review-text {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-lg);
}
.review-author {
  margin-top: auto;
}
.review-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-dark);
}
.review-role {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-top: 0.15rem;
}
.reviews .button-holder {
  margin-top: var(--space-xl);
}

/* The button under the cards. Centred, and spaced off the grid by the same
   rhythm the cards use between themselves. */
.reviews-foot {
  display: flex;
  justify-content: center;
  margin-top: clamp(2rem, 4vw, 3rem);
}

@media (max-width: 991px) {
  .reviews-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .reviews-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   18. BLOCK — benefits (icon feature grid)
   Centred title + grey panel holding a 3x2 grid of icon/title/text items.
   ========================================================================== */

.benefits {
  background: var(--color-white);
  padding: clamp(2.5rem, 6vw, 5rem) 0;
}
/* .benefits-inner { max-width: var(--profile-container-max); margin: 0 auto; padding-inline: clamp(1.5rem, 5vw, 5rem); } */
.benefits-title {
  text-align: center;
  margin: 0 0 var(--space-xl);
}
.benefits-panel {
  background: var(--color-light-alt);
  border-radius: var(--profile-radius-lg);
  padding: clamp(2rem, 5vw, 4rem);
}
/* Flex rather than grid so the column count can respond to how many items
   there are, which grid-template-columns cannot do on its own.

   --benefits-cols is the single source of truth: the breakpoints and the
   item-count rules below only change that number, and .benefits-item works its
   width out from it. The column gap has to be its own custom property because
   the width calculation needs to subtract it. */
.benefits-grid {
  --benefits-cols: 3;
  --benefits-gap-col: var(--space-xl);
  --benefits-gap-row: clamp(2rem, 4vw, 3.5rem);
  display: flex;
  flex-wrap: wrap;
  gap: var(--benefits-gap-row) var(--benefits-gap-col);
  align-items: stretch;
}

/* min-width: 0 because a flex item defaults to min-width: auto, which stops it
   shrinking below its content and would push a long unbroken word out of the
   row. */
.benefits-item {
  flex: 0 0
    calc((100% - (var(--benefits-cols) - 1) * var(--benefits-gap-col)) / var(--benefits-cols));
  min-width: 0;
  text-align: center;
}
.benefits-item-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.benefits-item-icon svg {
  width: 44px;
  height: 44px;
  stroke: var(--color-secondary);
  stroke-width: 1.4;
  fill: none;
}
.benefits-item-title {
  color: var(--color-accent);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-sm);
}
.benefits-item-text {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0 auto;
  max-width: 34ch;
}

/* Optional intro under the title. Centred in both styles, because the title
   above it already is. */
.benefits-intro {
  text-align: center;
  max-width: 62ch;
  margin: calc(var(--space-xl) * -0.6) auto var(--space-xl);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* ---- Banner style ----
   The alternative to the default panel: no card, the section itself carries the
   colour, everything centred. The template skips .benefits-panel entirely in
   this mode, so the grid is a direct child and there is no card padding to
   undo. */
/* The solid brand colours, not the pale tints — the same green as the buttons
   and the same navy as the footer. Both are dark enough to need light text, so
   the colours below are restated rather than left to inherit. */
.benefits.is-banner {
  background: var(--color-white);
}
.benefits.is-banner.bg-green {
  background: var(--color-accent);
}
.benefits.is-banner.bg-navy {
  background: var(--color-dark);
}

/* Centred on the section so anything added later is centred too — that is the
   point of the variant. */
.benefits.is-banner .benefits-inner {
  text-align: center;
}
.benefits.is-banner .benefits-item-text {
  margin-inline: auto;
}

/* Everything in the column, centred.

   These have to be stated: the homepage-override section further down sets
   .benefits-item to text-align:left with a border-top, and .benefits-item-icon
   to margin:0 0 (no auto), which is what was pulling the icon and the copy to
   the left edge even though the wrapper above is centred. Two class names of
   specificity beats it wherever it sits in the file.

   align-items as well as text-align because .benefits-item is a flex column, so
   the icon box is a flex child and is placed by align-items, not by text
   alignment. The border-top and its padding go with it — a divider above each
   column reads as a list, not a banner row. */
.benefits.is-banner .benefits-item {
  text-align: center;
  align-items: center;
  border-top: none;
  padding-top: 0;
}
.benefits.is-banner .benefits-item-icon {
  margin-left: auto;
  margin-right: auto;
}

/* Both solid grounds take light text.

   The colour is set on the wrapper first so everything inside inherits it —
   headings, paragraphs, list items, anything an editor puts in the text field.
   Naming each element instead is what left the item copy navy: it is a bare <p>
   from wpautop, so a rule aimed at .benefits-item-text never reached it. The
   named rules below only refine what the inherited colour already covers. */
.benefits.is-banner.bg-green .benefits-inner,
.benefits.is-banner.bg-navy .benefits-inner {
  color: #fff;
}

/* The item titles are normally accent green — invisible on green, weak on navy. */
.benefits.is-banner.bg-green .benefits-title,
.benefits.is-banner.bg-green .benefits-item-title,
.benefits.is-banner.bg-navy .benefits-title,
.benefits.is-banner.bg-navy .benefits-item-title {
  color: #fff;
}

/* Body copy a touch softer than the headings, so the hierarchy survives. */
.benefits.is-banner.bg-green .benefits-intro,
.benefits.is-banner.bg-green .benefits-item-text,
.benefits.is-banner.bg-navy .benefits-intro,
.benefits.is-banner.bg-navy .benefits-item-text {
  color: rgba(255, 255, 255, 0.88);
}

/* A link in the copy has to stay visible against both grounds. */
.benefits.is-banner.bg-green .benefits-inner a,
.benefits.is-banner.bg-navy .benefits-inner a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* wpautop gives each paragraph browser default margins; .benefits-item-text is
   a wrapper now, so they are cleared and spaced from here instead. */
.benefits-item-text p {
  margin: 0;
}
.benefits-item-text p + p {
  margin-top: var(--space-sm);
}

/* Item count decides the column count, but only on a desktop width — below 992px
   the breakpoints own it and these must not fight them. Scoping the rules to
   min-width instead of trying to out-specify them keeps that simple: :has() is
   far more specific than a bare .benefits-grid, so a max-width rule would
   otherwise lose to it and a four-item block would stay two-up on a phone.

   Four is the case worth handling. At three-up it wraps 3 + 1 and leaves a lone
   item on its own row, so two rows of two reads better. Five or more goes back
   to three: 5 wraps 3 + 2 and 6 makes two clean rows. */
@media (min-width: 992px) {
  .benefits-grid:has(> .benefits-item:nth-child(4):last-child) {
    --benefits-cols: 2;
  }
  .benefits-grid:has(> .benefits-item:nth-child(5)) {
    --benefits-cols: 3;
  }
}

@media (max-width: 991px) {
  .benefits-grid {
    --benefits-cols: 2;
  }
}
@media (max-width: 767px) {
  .benefits-grid {
    --benefits-cols: 1;
  }
}

/* ==========================================================================
   19. BLOCK — feature_accordion (accordion + image)
   Green title, an accordion of feature cards on the left, product image right.
   ========================================================================== */

.feature-accordion-block {
  background: var(--color-white);
  padding: clamp(2.5rem, 6vw, 5rem) 0;
}
/* .feature-accordion-inner { max-width: var(--profile-container-max); margin: 0 auto; padding-inline: clamp(1.5rem, 5vw, 5rem); } */
.feature-accordion-title {
  text-align: center;
  color: var(--color-accent);
  font-size: clamp(1.5rem, calc(2.8 * var(--fluid)), 2.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 auto var(--space-xl);
}
.feature-accordion-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.feature-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.fa-item {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--profile-radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.fa-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-primary);
}
.fa-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-dark);
}
.fa-toggle {
  position: relative;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-accent);
  transition: background var(--transition-base);
}
.fa-toggle::before,
.fa-toggle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 2px;
}
.fa-toggle::before {
  width: 12px;
  height: 2px;
}
.fa-toggle::after {
  width: 2px;
  height: 12px;
  transition: opacity var(--transition-fast);
}
.fa-item.is-open .fa-toggle::after {
  opacity: 0;
}

.fa-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-base);
}
.fa-body-inner {
  padding: 0 var(--space-lg) var(--space-lg);
}
.fa-body p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}

.feature-media {
  position: relative;
}

@media (max-width: 767px) {
  .feature-accordion-cols {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}

/* ==========================================================================
   20. BLOCK — integrations (logo panel + CTA)
   Blue panel with centred title/text, a grid of logo cards, and a CTA.
   ========================================================================== */

.integrations {
  background: var(--color-white);
  padding: clamp(2rem, 5vw, 4rem) 0;
}
/* .integrations-inner { max-width: var(--profile-container-max); margin: 0 auto; padding-inline: clamp(1.5rem, 5vw, 5rem); } */
.integrations-panel {
  background: var(--color-bg-blue);
  border-radius: var(--profile-radius-lg);
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4rem);
}
.integrations-head {
  text-align: center;
}
.integrations-title {
  margin: 0 0 var(--space-sm);
}
.integrations-sub {
  font-size: 1.0625rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-xl);
}
.integrations-body {
  max-width: 820px;
  margin: 0 auto;
}
.integrations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.integration-logo {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-sm);
  min-height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  transition: var(--profile-hover-transition);
}
.integration-logo:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(var(--profile-card-hover-lift));
}
.integration-logo img {
  max-height: 46px;
  max-width: 100%;
}
.int-name {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-dark);
  white-space: nowrap;
}
.int-name.sap {
  background: #0faaff;
  color: #fff;
  padding: 0.1rem 0.6rem;
  border-radius: 3px;
  font-style: italic;
}
.int-name.aspaara {
  background: #2b2b2b;
  color: #fff;
  padding: 0.25rem 0.7rem;
  border-radius: 3px;
  font-size: 1rem;
}
.integrations-body .button-holder {
  margin-top: var(--space-xl);
}

@media (max-width: 767px) {
  .integrations-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 479px) {
  .integrations-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   21. BLOCK — page_form (content + demo form)
   Left content column, right form card built from the form elements.
   ========================================================================== */

.page-form {
  background: var(--color-white);
  padding: clamp(2.5rem, 6vw, 5rem) 0;
}
/* Neither the Page Form nor the Contact Form block wraps this in a .container,
   so the width cap and the side padding have to live here. Without them the
   grid runs the full width of the viewport and the copy sits hard against both
   screen edges on a phone — which is what was happening while the three
   properties below were commented out. */
.page-form-inner {
  max-width: var(--profile-container-max);
  margin: 0 auto;
  padding-inline: clamp(1.5rem, 5vw, 5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.page-form-content h2 {
  margin-bottom: var(--space-md);
}
.page-form-subhead {
  color: var(--color-accent);
  font-weight: 700;
  font-size: 1rem;
  margin: var(--space-lg) 0 var(--space-sm);
}
.page-form-list {
  margin: 0 0 var(--space-sm);
  padding-left: 1.25rem;
}
.page-form-list li {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-bottom: 0.4rem;
}
.page-form-list li strong {
  color: var(--color-dark);
  font-weight: 700;
}
.page-form-highlight {
  color: var(--color-accent);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: var(--space-md) 0 0;
}

.page-form-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--profile-radius-lg);
  box-shadow: var(--shadow-card);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
/* .page-form-card .form-field:last-of-type { margin-bottom: 0; } */

.form-radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.recaptcha-mock {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 302px;
  max-width: 100%;
  border: 1px solid #d3d3d3;
  border-radius: 4px;
  padding: 0.75rem 0.9rem;
  background: #f9f9f9;
  margin: var(--space-lg) 0;
}
.recaptcha-mock .rc-box {
  width: 24px;
  height: 24px;
  border: 2px solid #c1c1c1;
  border-radius: 3px;
  background: #fff;
  flex-shrink: 0;
}
.recaptcha-mock .rc-label {
  font-size: 0.85rem;
  color: #3c4043;
}
.recaptcha-mock .rc-logo {
  margin-left: auto;
  text-align: center;
  color: #9aa0a6;
  font-size: 0.5rem;
  line-height: 1.2;
}
.recaptcha-mock .rc-logo b {
  display: block;
  font-size: 0.72rem;
  color: #5f6368;
  font-weight: 700;
}

/* Stacked from 991px, not 767px. A form card and a column of copy sharing a
   tablet width leaves both too narrow to read — the labels wrap and the select
   truncates. Copy is first in the markup, so it falls above the form without
   any ordering. */
@media (max-width: 991px) {
  .page-form-inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The card's own padding is enough at this width; the wrapper's would double it
   and squeeze the fields. */
@media (max-width: 479px) {
  .page-form-inner {
    padding-inline: var(--space-sm);
  }
  .page-form-card {
    padding: var(--space-md);
  }
}

/* ==========================================================================
   22. BLOCK — faqs (accordion)
   Green centred title + a stack of question cards (reuses .fa-item styles).
   ========================================================================== */

.faq-block {
  background: var(--color-white);
  padding: clamp(2.5rem, 6vw, 5rem) 0;
}
.faq-inner {
  max-width: 920px;
  margin: 0 auto;
  padding-inline: clamp(1.5rem, 5vw, 5rem);
}
.faq-title {
  text-align: center;
  color: var(--color-accent);
  font-size: clamp(1.5rem, calc(2.6 * var(--fluid)), 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-xl);
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
/* FAQ search — sits between the title and the accordion and filters it.
   .has-search tightens the title's gap so the bar doesn't float. */
.faq-block.has-search .faq-title {
  margin-bottom: var(--space-lg);
}
/* Full width of .faq-inner, so the bar lines up with the questions below it. */
.faq-search {
  margin: 0 0 var(--space-lg);
}
.faq-list .fa-item[hidden] {
  display: none;
}
.faq-empty {
  margin: var(--space-lg) 0 0;
  padding: var(--space-lg);
  border: 1px dashed var(--color-border);
  border-radius: var(--profile-radius-md);
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}
.faq-empty strong {
  color: var(--color-dark);
  font-weight: 700;
}
.faq-block .fa-head {
  padding: var(--space-lg);
}
.faq-block .fa-title {
  font-size: 1.15rem;
}

/* ==========================================================================
   23. SITE FOOTER
   Dark footer: social icons, link columns with green headings + blue
   subheads, copyright and logo.
   ========================================================================== */

.site-footer {
  background: var(--color-dark);
  color: #fff;
  padding: clamp(2.5rem, 5vw, 4rem) 0 var(--space-xl);
}
.site-footer-inner {
  /* max-width: var(--profile-container-max); margin: 0 auto; */
  /* padding-inline: clamp(1.5rem, 5vw, 5rem); */
  display: flex;
  gap: clamp(2rem, 4vw, 4rem);
}
.footer-social-col {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  flex-shrink: 0;
}
.footer-icons {
  display: flex;
  gap: 0.625rem;
}
.footer-social {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
}
.footer-social:hover {
  background: rgba(255, 255, 255, 0.24);
}
.footer-social svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.footer-cols {
  flex: 1;
  display: grid;
  grid-template-columns: 1.15fr 1fr 0.85fr 0.85fr;
  gap: var(--space-lg);
}
.footer-heading {
  color: var(--color-accent);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin: 0 0 var(--space-md);
}
.footer-subhead {
  color: #7fb0e6;
  font-size: 0.9rem;
  font-weight: 700;
  margin: var(--space-md) 0 0.625rem;
}
.footer-subhead:first-of-type {
  margin-top: 0;
}
.footer-links {
  list-style: none;
  margin: 0 0 var(--space-sm);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.footer-links a {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.9rem;
  text-decoration: none;
  transition: color var(--transition-fast);
}
.footer-links a:hover {
  color: #fff;
}

.site-footer-bottom {
  max-width: var(--profile-container-max);
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  padding-inline: clamp(1.5rem, 5vw, 5rem);
}
.footer-copy {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 var(--space-md);
}
.footer-logo-mark {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #fff;
}
.footer-logo-mark span {
  color: var(--color-accent);
}
.footer-logo-tag {
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 0.15rem;
}

/* ==========================================================================
   Footer — balanced layout (.footer-alt)
   The original puts four link columns beside the logo, but one of them
   (Product) carries four sub-groups and ~18 links while Resources carries
   five — column heights ran 3:1 and the bottom-right sat empty. This
   version promotes every sub-group to a peer column, giving two balanced
   rows of four, adds a brand band across the top, and moves the legal
   links into the bottom bar.

   Opt-in via .footer-alt on .site-footer. The original layout is retained
   above and is still what the About, Enterprise and Capacity templates use.
   ========================================================================== */
/* Brand band */
.footer-alt .footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(2rem, 4vw, 4rem);
  padding-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.footer-alt .footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 38ch;
}
.footer-alt .footer-logo img {
  display: block;
  width: 150px;
  max-width: 100%;
  height: auto;
}
.footer-alt .footer-pitch {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}
.footer-alt .footer-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-md);
  flex-shrink: 0;
}
.footer-alt .footer-icons {
  margin: 0;
}

/* Link groups — eight peers, two rows of four */
.footer-alt .footer-groups {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
.footer-alt .footer-group .footer-heading {
  margin: 0 0 var(--space-sm);
}
.footer-alt .footer-group .footer-links {
  margin: 0;
}

/* Bottom bar — copyright left, legal right */
.footer-alt .footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.footer-alt .footer-bar .footer-copy {
  margin: 0;
}
.footer-alt .footer-legal {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
}
.footer-alt .footer-legal a {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.footer-alt .footer-legal a:hover {
  color: #fff;
}

/* The footer sizes itself against its own width, not the window, so it lays
   out correctly inside the style guide's tablet and phone frames as well as
   in a real browser. At full width the container equals the viewport, so
   production behaviour is unchanged from the old media queries. */
.footer-alt {
  container-type: inline-size;
}

@container (max-width: 991px) {
  .footer-alt .footer-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer-alt .footer-top {
    flex-direction: column;
  }
  .footer-alt .footer-actions {
    align-items: flex-start;
  }
  .footer-alt .footer-brand {
    max-width: none;
  }
}
@container (max-width: 560px) {
  .footer-alt .footer-groups {
    grid-template-columns: 1fr;
  }
  .footer-alt .footer-bar {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-alt .footer-top {
    gap: var(--space-md);
  }
}

@media (max-width: 991px) {
  .footer-cols {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--space-xl);
  }
}
@media (max-width: 767px) {
  .site-footer-inner {
    flex-direction: column;
  }
  .footer-cols {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   24. BLOCK — page_head (interior page hero: eyebrow + title + text + image)
   ========================================================================== */
.page-head {
  background: var(--color-white);
}
.page-head-inner {
  /* Same width cap and side gutter as .container, so the head lines up with
     the sections below it. Vertical padding is the block's own. */
  max-width: var(--profile-container-max);
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 5rem) var(--container-padding);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.page-head-eyebrow {
  color: var(--color-accent);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 var(--space-sm);
}
.page-head-content h1 {
  margin-bottom: var(--space-md);
}
.page-head-text {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-sm);
}
.page-head .button-holder {
  margin-top: var(--space-md);
}
.page-head-media img,
.page-head-media video {
  height: auto;
  width: 100%;
  border-radius: var(--profile-radius-lg);
  display: block;
}
/* A video keeps the image's shape and shadow so the two options sit in the
   same place; the shadow lifts it off the tint the way the photo card does. */
.page-head-media video {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--color-dark);
  box-shadow: var(--shadow-lg);
}
@media (prefers-reduced-motion: reduce) {
  /* The poster stays; the recording does not run for anyone who has asked
     for less motion. */
  .page-head-media video {
    display: none;
  }
}
.page-head-photo {
  aspect-ratio: 4 / 3;
  border-radius: var(--profile-radius-lg);
  background: linear-gradient(135deg, var(--color-bg-blue), var(--color-bg-green));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
}
.page-head-photo svg {
  width: 56px;
  height: 56px;
  stroke: rgba(37, 66, 97, 0.4);
  stroke-width: 1.5;
  fill: none;
}
@media (max-width: 767px) {
  .page-head-inner {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   25. BLOCK — text_section (content panel: green heading + text, optional tint)
   ========================================================================== */
/* Matches the Business Impact section's clamp(2.5rem, 6vw, 5rem), so the two
   panels sit at the same distance from what is above and below them. It was
   clamp(0.75rem, 1.5vw, 1.25rem) — 12px to 20px — which on the single templates
   left this panel almost touching the section before it. */
.text-section {
  background: var(--color-white);
  padding: clamp(2.5rem, 6vw, 5rem) 0;
}
.text-section-inner {
  max-width: var(--profile-container-max);
  margin: 0 auto;
  padding-inline: clamp(1.5rem, 5vw, 5rem);
}
.text-section-panel {
  border-radius: var(--profile-radius-lg);
  padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
  background: var(--color-light-alt);
}
.text-section.green .text-section-panel {
  background: var(--color-bg-green);
}
.text-section.blue .text-section-panel {
  background: var(--color-bg-blue);
}
.text-section.rose .text-section-panel {
  background: var(--color-bg-rose);
}
.text-section.amber .text-section-panel {
  background: var(--color-bg-amber);
}
.text-section-title {
  color: var(--color-accent);
  font-size: clamp(1.5rem, calc(2.6 * var(--fluid)), 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-md);
}
.text-section-body {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-text);
  max-width: 74ch;
  margin: 0 auto;
}
.text-section-body p {
  margin: 0 0 var(--space-sm);
}
.text-section-body p:last-child {
  margin-bottom: 0;
}
.text-section-body ul {
  margin: var(--space-sm) 0 0;
  padding-left: 1.25rem;
}
.text-section-body ul li {
  margin-bottom: 0.4rem;
}
.text-section-values {
  list-style: none;
  margin: var(--space-sm) 0 0;
  padding: 0;
}
.text-section-values li {
  margin-bottom: 0.5rem;
  color: var(--color-text-muted);
}
.text-section-values li strong {
  color: var(--color-dark);
}

/* ==========================================================================
   26. BLOCK — case_study_cards (three coloured cards with logo panels)
   ========================================================================== */
.case-cards {
  background: var(--color-white);
  padding: clamp(2.5rem, 6vw, 5rem) 0;
}
.case-cards-inner {
  max-width: var(--profile-container-max);
  margin: 0 auto;
  padding-inline: clamp(1.5rem, 5vw, 5rem);
}
.case-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
.case-card {
  border-radius: var(--profile-radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  min-height: 300px;
  transition: var(--profile-hover-transition);
}
.case-card:hover {
  transform: translateY(var(--profile-card-hover-lift));
  box-shadow: var(--shadow-card-hover);
}
.case-card.navy {
  background: var(--color-dark);
  color: #fff;
}
.case-card.green {
  background: var(--color-accent);
  color: #fff;
}
.case-card.light {
  background: var(--color-white);
  border: 1px solid var(--color-border);
}
.case-card-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: var(--space-sm);
}
.case-card.light .case-card-label {
  color: var(--color-accent);
  opacity: 1;
}
.case-card-title {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-sm);
}
.case-card.light .case-card-title {
  color: var(--color-dark);
}
.case-card.navy .case-card-title,
.case-card.green .case-card-title {
  color: #fff;
}
.case-card-text {
  font-size: 0.95rem;
  line-height: 1.55;
  opacity: 0.9;
  margin: 0;
}
.case-card.light .case-card-text {
  color: var(--color-text-muted);
  opacity: 1;
}
.case-card-logo {
  margin-top: var(--space-lg);
  background: #fff;
  border-radius: var(--profile-radius-md);
  padding: var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 110px;
}
.case-card-logo .cl-name {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--color-dark);
}
@media (max-width: 991px) {
  .case-cards-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   27. BLOCK — cta (call-to-action band)
   ========================================================================== */
.cta {
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}
.cta.green {
  background: var(--color-accent);
}
.cta.navy {
  background: var(--color-dark);
}
.cta-inner {
  max-width: 780px;
  margin: 0 auto;
  padding-inline: clamp(1.5rem, 5vw, 3rem);
}
.cta-title {
  color: #fff;
  font-size: clamp(1.7rem, calc(3.2 * var(--fluid)), 2.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 var(--space-sm);
}
.cta-text {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.0625rem;
  line-height: 1.55;
  margin: 0 0 var(--space-lg);
}
.cta .button-holder {
  justify-content: center;
  margin-top: 0;
}
.cta.green .main-button {
  background: #fff;
  border-color: #fff;
  color: var(--color-dark);
}
.cta.green .main-button:hover {
  background: var(--color-bg-green);
  border-color: var(--color-bg-green);
  color: var(--color-dark);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

/* ==========================================================================
   28. BLOCK — announcement_bar (sitewide notice strip)
   ========================================================================== */
.announcement-bar {
  background: var(--color-accent);
  color: #fff;
}
.announcement-bar-inner {
  max-width: var(--profile-container-max);
  margin: 0 auto;
  padding: 0.3125rem clamp(1.5rem, 5vw, 5rem);
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
}
.announcement-bar-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
}
.announcement-bar-icon svg {
  width: 18px;
  height: 18px;
  stroke: #fff;
  stroke-width: 2;
  fill: none;
}
.announcement-bar p {
  margin: 0;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #fff;
}
.announcement-bar a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.announcement-bar a:hover {
  color: var(--color-dark);
}
@media (max-width: 479px) {
  .announcement-bar-icon {
    display: none;
  }
  .announcement-bar-inner {
    min-height: 44px;
  }
}

/* ==========================================================================
   29. BLOCK — main_banner_small (compact page banner)
   Add .has-overlay for the 62% navy scrim when the background is photographic.
   ========================================================================== */
.banner-small {
  position: relative;
  background-color: var(--color-dark);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: clamp(3rem, 6vw, 4.375rem) 0 clamp(3rem, 9vw, 11.25rem);
}
.banner-small.bg-align-left {
  background-position: left center;
}
.banner-small.bg-align-right {
  background-position: right center;
}
.banner-small.has-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-overlay);
}
.banner-small-inner {
  position: relative;
  z-index: 1;
  max-width: var(--profile-container-max);
  margin: 0 auto;
  padding-inline: clamp(1.5rem, 5vw, 5rem);
}
.banner-small h1 {
  color: #fff;
  margin: 0;
  max-width: 62%;
}
.banner-small.alt {
  padding: clamp(3rem, 6vw, 5rem) 0;
}
.banner-small.alt .banner-small-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.banner-small.alt h1 {
  max-width: none;
  margin-bottom: var(--space-md);
}
.banner-small.alt p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.0625rem;
  line-height: 1.6;
  margin: 0;
}
.banner-small-media {
  border-radius: var(--profile-radius-md);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  box-shadow: var(--shadow-lg);
}
@media (max-width: 991px) {
  .banner-small h1 {
    max-width: 85%;
  }
  .banner-small.alt .banner-small-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 767px) {
  .banner-small h1 {
    max-width: 100%;
  }
}

/* ==========================================================================
   30. BLOCK — campaign_hero_form (hero with inline capture form)
   ========================================================================== */
.campaign-hero {
  background: var(--color-bg-blue);
  overflow: hidden;
}
.campaign-hero-grid {
  display: grid;
  grid-template-columns: 2fr 50%;
  align-items: center;
  max-width: var(--profile-container-max);
  margin: 0 auto;
}
.campaign-hero-col {
  padding: clamp(2.5rem, 6vw, 6.25rem) clamp(1.5rem, 4vw, 3rem) clamp(2.5rem, 5vw, 3.5rem);
  min-width: 0;
}
.campaign-hero-eyebrow {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 var(--space-sm);
}
.campaign-hero h1 {
  margin: 0 0 var(--space-lg);
}
.campaign-hero-body h3 {
  margin: var(--space-md) 0 var(--space-xs);
}
.campaign-hero-body p {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-sm);
}
.campaign-hero-body p strong {
  color: var(--color-dark);
}
.campaign-hero-card {
  background: #fff;
  border-radius: var(--profile-radius-lg) var(--profile-radius-lg) var(--profile-radius-lg) 0;
  padding: clamp(1.5rem, 3vw, 2.1875rem) clamp(1.5rem, 3.5vw, 3.125rem);
  max-width: 600px;
  box-shadow: var(--shadow-lg);
}
.campaign-hero-card h2 {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-dark);
  margin: 0 0 var(--space-md);
}
.campaign-hero-card .form-label {
  color: var(--color-accent-dark);
}
.campaign-hero-consent {
  line-height: 1.5;
  color: var(--color-text);
}
.campaign-hero-consent a {
  color: var(--color-text);
  text-decoration: underline;
}
.campaign-hero-consent a:hover {
  color: var(--color-accent);
}
@media (max-width: 991px) {
  .campaign-hero-grid {
    grid-template-columns: 1fr;
  }
  .campaign-hero-card {
    max-width: none;
  }
}

/* ==========================================================================
   31. BLOCK — section_heading (standalone heading)
   ========================================================================== */
.section-heading {
  width: 100%;
  padding: clamp(2.5rem, 7vw, 5.625rem) 0;
}
.section-heading-inner {
  max-width: var(--profile-container-max);
  margin: 0 auto;
  padding-inline: clamp(1.5rem, 5vw, 5rem);
}
.section-heading.align-center {
  text-align: center;
}
.section-heading.align-right {
  text-align: right;
}
.section-heading h2 {
  margin: 0;
}

/* ==========================================================================
   32. BLOCK — text_full_width (full-width text band)
   ========================================================================== */
.text-full {
  padding: clamp(2.5rem, 8vw, 9.375rem) 0 clamp(2.5rem, 7vw, 8.125rem);
}
.text-full.no-padding {
  padding-top: 0;
}
.text-full-inner {
  max-width: var(--profile-container-max);
  margin: 0 auto;
  padding-inline: clamp(1.5rem, 5vw, 5rem);
}
.text-full-body {
  max-width: 66.6667%;
}
.text-full-body h2 {
  margin: 0 0 var(--space-md);
}
.text-full-body p {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-sm);
}
.text-full-body p:last-child {
  margin-bottom: 0;
}
@media (max-width: 767px) {
  .text-full-body {
    max-width: none;
  }
}

/* ==========================================================================
   33. BLOCK — benefits_boxes (icon benefit boxes)
   ========================================================================== */
.benefit-boxes {
  padding: clamp(2rem, 4vw, 2.5rem) 0 clamp(3rem, 7vw, 5rem);
}
.benefit-boxes-inner {
  max-width: var(--profile-container-max);
  margin: 0 auto;
  padding-inline: clamp(1.5rem, 5vw, 5rem);
}
.benefit-boxes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
.benefit-box {
  padding-inline: clamp(0, 2vw, 1.875rem);
}
.benefit-box-icon {
  width: 48px;
  height: 48px;
  margin: 0 0 var(--space-md);
  border-radius: var(--profile-radius-sm);
  background: var(--color-bg-green);
  display: grid;
  place-items: center;
}
.benefit-box-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--color-accent);
  stroke-width: 2;
  fill: none;
}
.benefit-box h3 {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 var(--space-sm);
}
.benefit-box p {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}
@media (max-width: 991px) {
  .benefit-boxes-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .benefit-boxes-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   34. BLOCK — feature_block_text_image (alternating feature rows)
   ========================================================================== */
.feature-text-image {
  padding: clamp(2.5rem, 6vw, 3.125rem) 0;
}
.feature-text-image-inner {
  max-width: var(--profile-container-max);
  margin: 0 auto;
  padding-inline: clamp(1.5rem, 5vw, 5rem);
}
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.75rem);
  align-items: center;
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
}
.feature-row:last-child {
  margin-bottom: 0;
}
.feature-row.img-pos-right .feature-row-media {
  order: 2;
}
.feature-row.img-pos-right .feature-row-text {
  order: 1;
}
.feature-row-media {
  border-radius: var(--profile-radius-md);
  overflow: hidden;
  aspect-ratio: var(--profile-image-aspect);
  box-shadow: var(--shadow-card);
}
.feature-row-eyebrow {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 var(--space-sm);
}
.feature-row-text h3 {
  margin: 0 0 var(--space-md);
}
.feature-row-text p {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-md);
}
.feature-row-text p:last-child {
  margin-bottom: 0;
}
.feature-row .button-holder {
  margin-top: var(--space-lg);
}
.feature-text-image.style-modern .feature-row-eyebrow {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}
@media (max-width: 991px) {
  .feature-row {
    gap: var(--space-lg);
  }
}
@media (max-width: 767px) {
  .feature-row {
    grid-template-columns: 1fr;
  }
  .feature-row.img-pos-right .feature-row-media,
  .feature-row.img-pos-right .feature-row-text {
    order: 0;
  }
}

/* ==========================================================================
   35. BLOCK — latest_buzz (article teaser row) + article_teaser card
   The teaser is a distinct component from .article-card: category pill over
   the image, read time, and an author row beneath a divider.
   ========================================================================== */
.latest-buzz {
  padding: clamp(2.5rem, 6vw, 5rem) 0;
}
.latest-buzz-inner {
  max-width: var(--profile-container-max);
  margin: 0 auto;
  padding-inline: clamp(1.5rem, 5vw, 5rem);
}
.latest-buzz-title {
  text-align: center;
  margin: 0 0 clamp(2rem, 4vw, 3.75rem);
}
.latest-buzz-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
.latest-buzz .more-link {
  text-align: center;
  margin-top: var(--space-xl);
}
.article-teaser {
  display: flex;
  flex-direction: column;
  background: var(--profile-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--profile-radius-md);
  overflow: hidden;
  transition: var(--profile-hover-transition);
}
.article-teaser:hover {
  transform: var(--profile-hover-transform);
  box-shadow: var(--profile-hover-shadow);
}
.article-teaser__top {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--color-light-alt);
  display: flex;
  align-items: flex-start;
  padding: var(--space-sm);
}
/* The three templates that print this card each pass the same inline style on
   the thumbnail. Stating it here too means the card is correct on its own: the
   box is a flex container with align-items:flex-start, so an image that arrives
   without that inline style would sit at its natural size, top-aligned. The
   category pill keeps position:relative and z-index:1, so it stays above. */
.article-teaser__top img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.article-teaser__category {
  position: relative;
  z-index: 1;
  background: #fff;
  color: var(--color-dark);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border-radius: var(--profile-radius-pill);
}
.article-teaser__middle {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex: 1 1 auto;
}
.article-teaser__time {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.article-teaser__time svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}
.article-teaser__title {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.article-teaser__title a {
  color: var(--color-dark);
  text-decoration: none;
}
.article-teaser__title a:hover {
  color: var(--color-accent);
}
.article-teaser__text {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}
/* One row: whatever identifies the post on the left, the read time on the
   right. With a single child (the resource cards carry only an author or a
   download link) space-between leaves it left, as before. margin-top: auto
   pins the row to the foot of the card so mixed-length titles still line up. */
.article-teaser__bottom {
  padding: var(--space-md);
  border-top: 1px solid var(--color-border);
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}
.article-teaser__bottom .article-teaser__time {
  flex: 0 0 auto;
}

/* Published date and read time, grouped as one item so the bottom row stays a
   two-part space-between rather than three things competing for a third-width
   card.

   Nothing here wraps. Letting it wrap made the row two lines tall on the cards
   with a long author name and one line on the rest, so a grid of cards had
   footers at two different heights for no reason a reader could see. The meta
   holds its size and the author block gives up the space instead, which it can
   do because a truncated name still reads. Every card is now laid out
   identically whatever is in it. */
.article-teaser__meta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.45rem;
}
/* Matches .article-teaser__time exactly, minus the icon. */
.article-teaser__date {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.article-teaser__meta .dot {
  width: 3px;
  height: 3px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--color-text-muted);
  opacity: 0.5;
}
/* The author block is what yields. min-width:0 lets it shrink below its
   content — a flex item will not otherwise — and the name and role truncate
   rather than pushing the date off the end. */
.article-teaser__bottom {
  flex-wrap: nowrap;
}
.article-teaser__author {
  flex: 1 1 auto;
  min-width: 0;
}
.article-teaser__author-name {
  min-width: 0;
}
.article-teaser__author-name__name,
.article-teaser__author-role {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.article-teaser__time {
  white-space: nowrap;
}

/* Below this the two will not sit side by side on any card, so every card
   stacks together. Consistent because it is a width, not a name length. */
@media (max-width: 599px) {
  .article-teaser__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }
  .article-teaser__author {
    width: 100%;
  }
}
.article-teaser__author {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.article-teaser__author-image {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  background: var(--color-light-alt);
}
/* The box had no img rule, so a 72px avatar rendered at full size inside a 36px
   box with overflow:hidden — full width, cropped to the top-left corner rather
   than centred. .article-author-avatar (further down) always had this; this one
   was missed. object-position is the default for cover, but stated so the
   intent is not mistaken for an oversight a second time. */
.article-teaser__author-image img,
.article-teaser__author-image .sg-ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.article-teaser__author-name {
  display: flex;
  flex-direction: column;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--color-text-muted);
}
.article-teaser__author-name__name {
  font-weight: 600;
  color: var(--color-dark);
}
.article-teaser__author-name__name a {
  color: inherit;
  text-decoration: none;
}
.article-teaser__author-name__name a:hover {
  color: var(--color-accent);
}
/* The author's role, from the author_role user field. The parent is already a
   flex column, so this sits under the name and inherits the muted colour. */
.article-teaser__author-role {
  font-size: 0.75rem;
}
@media (max-width: 991px) {
  .latest-buzz-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .latest-buzz-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   36. BLOCK — cta_banner (inset call-to-action panel)
   Inset rounded panel, as opposed to the full-bleed .cta band in section 27.
   ========================================================================== */
/* The block has two shapes, and they want opposite things from this wrapper.
   .is-light is added by components/blocks/cta.php in form mode only, so it is
   the hook for telling them apart.

   BUTTON MODE — an inset rounded card, held to 1440 so it lines up with the
   sections above and below, with breathing room around it. */
.cta-banner:not(.is-light) {
  padding: clamp(2.5rem, 6vw, 5.625rem) 0 clamp(2.5rem, 7vw, 7.1875rem);
}
.cta-banner:not(.is-light) .cta-banner-outer {
  max-width: var(--profile-container-max);
  margin: 0 auto;
  padding-inline: clamp(1.5rem, 5vw, 5rem);
}

/* FORM MODE — a full-width band. The ground runs edge to edge and the 1440 cap
   moves off the background and onto the content inside it.

   That is what the padding calculation does: half the overflow beyond 1440,
   floored at zero, plus the normal gutter. On a narrow screen it collapses to
   just the gutter; on a wide one it grows so the form still lines up with every
   other section while the colour bleeds to both edges. Same approach as
   .ts-panel > .ts-visual further down.

   100%, not 100vw — 100vw includes the scrollbar, which would make the band a
   few pixels wider than the page and show up as a horizontal scroll. */
.cta-banner.is-light .cta-banner-outer {
  max-width: none;
  margin: 0;
  padding-inline: 0;
}
.cta-banner.is-light .cta-banner-inner {
  border-radius: 0;
  padding-inline: calc(
    max(0px, (100% - var(--profile-container-max)) / 2) + clamp(1.5rem, 5vw, 5rem)
  );
}
.cta-banner-inner {
  padding: clamp(2.5rem, 5vw, 3.75rem) clamp(1.25rem, 4vw, 3rem);
  border-radius: var(--profile-radius-md);
  text-align: center;
  background: var(--color-dark);
}
.cta-banner.green .cta-banner-inner {
  background: var(--color-accent);
}
.cta-banner.gradient .cta-banner-inner {
  background: var(--gradient-green);
}
.cta-banner-inner h2 {
  color: #fff;
  font-size: clamp(1.7rem, calc(3.2 * var(--fluid)), 2.5rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin: 0 auto var(--space-sm);
  max-width: 80%;
}
.cta-banner-inner p {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 auto clamp(2rem, 4vw, 3.125rem);
  max-width: 50%;
}
.cta-banner-inner .button-holder {
  justify-content: center;
  margin-top: 0;
  gap: var(--space-sm);
}
.cta-banner .main-button {
  background: #fff;
  border-color: #fff;
  color: var(--color-dark);
}
.cta-banner .main-button:hover {
  background: var(--color-light-alt);
  border-color: var(--color-light-alt);
}
.cta-banner.has-subtitle .cta-banner-inner h2 {
  color: var(--color-dark);
  margin-bottom: var(--space-sm);
}
.cta-banner.has-subtitle .cta-banner-inner h3 {
  color: #fff;
  margin: 0 auto var(--space-md);
  max-width: 80%;
}
@media (max-width: 767px) {
  .cta-banner-inner h2,
  .cta-banner-inner p {
    max-width: none;
  }
  .cta-banner-inner .button-holder {
    flex-direction: column;
  }
  .cta-banner .main-button {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   37. BLOCK — title_subtitle_text_image (centred intro with image)
   ========================================================================== */
.title-subtitle-block {
  padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 3.125rem);
  text-align: center;
}
.title-subtitle-inner {
  max-width: var(--profile-container-max);
  margin: 0 auto;
  padding-inline: clamp(1.5rem, 5vw, 5rem);
}
.title-subtitle-col {
  max-width: 66.6667%;
  margin: 0 auto;
}
.title-subtitle-block h2 {
  margin: 0 0 var(--space-xs);
}
.title-subtitle-block h3 {
  color: var(--color-accent);
  margin: 0 0 var(--space-lg);
}
.title-subtitle-text {
  margin: 0 0 clamp(2rem, 4vw, 3.125rem);
}
.title-subtitle-text p {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-sm);
}
.title-subtitle-text p:last-child {
  margin-bottom: 0;
}
.title-subtitle-media {
  max-width: 80%;
  margin: 0 auto;
  border-radius: var(--profile-radius-md);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  box-shadow: var(--shadow-card);
}
@media (max-width: 767px) {
  .title-subtitle-col {
    max-width: none;
  }
  .title-subtitle-media {
    max-width: 100%;
  }
}

/* ==========================================================================
   38. BLOCK — title_text_panels (title with equal panels)
   ========================================================================== */
.title-text-panels {
  padding: clamp(2.5rem, 6vw, 5rem) 0;
}
.title-text-panels-inner {
  max-width: var(--profile-container-max);
  margin: 0 auto;
  padding-inline: clamp(1.5rem, 5vw, 5rem);
}
.title-text-panels-inner .main-button {
  margin: 0 auto;
}
.title-text-panels h2 {
  text-align: center;
  margin: 0 0 var(--space-sm);
}
.title-text-panels-sub {
  color: var(--color-accent);
  text-align: center;
  margin: 0 0 clamp(2rem, 4vw, 3.125rem);
}
.title-text-panels .panels {
  display: flex;
  flex-direction: row;
  column-gap: var(--space-lg);
}
.title-text-panel {
  flex: 1 1 20%;
  background: var(--profile-card-bg);
  box-shadow: var(--shadow-card);
  border-radius: var(--profile-radius-md);
  padding: clamp(1.75rem, 3vw, 2.8125rem) clamp(1.5rem, 2.6vw, 2.5rem);
}
.title-text-panel h3 {
  text-align: center;
  margin: 0 0 var(--space-md);
}
.title-text-panel p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  text-align: center;
  margin: 0;
}
@media (max-width: 991px) {
  .title-text-panels .panels {
    flex-wrap: wrap;
    row-gap: var(--space-md);
  }
  .title-text-panel {
    flex: 1 1 40%;
  }
}
@media (max-width: 767px) {
  .title-text-panels .panels {
    flex-direction: column;
  }
  .title-text-panel {
    flex: 1 1 auto;
  }
}

/* The attribution row at the foot of each panel: the name over the company on
   the left, the logo to their right.

   margin-top:auto pins it to the bottom of the panel, so the rows line up
   across a row of panels however long the copy above them runs. .title-text-panel
   is a plain block, so it has to become a flex column for that to work. */
.title-text-panel {
  display: flex;
  flex-direction: column;
}
.title-text-panel-foot {
  margin-top: auto;
  padding-top: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  /* The panels are centre-aligned; this row is not. A name and company read as
     a left-aligned pair, and centring them under centred copy would leave the
     logo floating with nothing to align to. */
  text-align: left;
}

.title-text-panel-person {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
  min-width: 0;
}
.title-text-panel-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-dark);
}
.title-text-panel-company {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* contain, never cover — a logo must not be cropped. flex-shrink:0 so a long
   company name squeezes the text rather than the mark. */
.title-text-panel-logo {
  flex: 0 0 auto;
}
.title-text-panel-logo img {
  width: auto;
  height: auto;
  max-width: 6.5rem;
  max-height: 2.25rem;
  object-fit: contain;
  display: block;
}

/* ==========================================================================
   39. BLOCK — coloured_block_with_paragraphs (tinted section wrapper)
   Contributes a background and vertical padding only. Wrap it around any
   block that needs a tinted band; it collapses that block's own padding.
   ========================================================================== */
.coloured-block {
  background: var(--color-light-alt);
  padding: clamp(2.5rem, 6vw, 5rem) 0;
}
.coloured-block .title-text-panels {
  padding: 0;
}

/* ==========================================================================
   40. BLOG SINGLE
   Article template: hero with byline, two-column body + sticky sidebar,
   AI summary, editorial-process accordion, share rail, content blocks
   (text / image / gallery / video / cta / signup) and an exit popup.
   Sizes come from the type scale; nothing here is hard-coded from a comp.
   ========================================================================== */

/* Reading progress — thin bar pinned to the top of the viewport */
.blog-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 150;
  background: transparent;
  pointer-events: none;
}
.blog-progress-fill {
  height: 100%;
  width: 0;
  background: var(--color-accent);
  transition: width 90ms linear;
}

/* Skip link — first focusable thing on the page */
.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -3rem;
  z-index: 300;
  background: var(--color-dark);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: var(--profile-radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: top var(--transition-fast);
}
.skip-link:focus {
  top: 0.5rem;
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Promotional interruptions carry a styled title, not a heading, so the
   article's outline stays h1 > h2 > h3 of actual content.

   .blog-signup-title is the exception — it is an <h3> now. The signup is a
   real, self-contained section rather than a caption, so a heading is
   defensible; it does mean it appears in the article's outline between the
   body's own h2s. Its colour and sizing are set in the .blog-signup component
   further down, not here, because inside .article-body it has to outrank the
   prose h3 rule. */
.blog-cta-title,
.blog-popup-title {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-xs);
}
.blog-cta-title {
  color: var(--color-dark);
}
.blog-popup-title {
  color: var(--color-dark);
  padding-right: var(--space-lg);
}

/* Gallery is a list */
.blog-gallery {
  list-style: none;
  padding: 0;
}

/* Pull-quote: attribution lives in a <footer>, per the blockquote spec */
.article-pullquote p {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
}
.article-pullquote footer {
  margin-top: var(--space-sm);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

/* Teaser titles are headings now — strip the heading defaults */
h3.article-teaser__title {
  margin: 0;
  letter-spacing: -0.01em;
}

/* ---- Article hero ---- */
.article-hero {
  padding: clamp(1rem, 2vw, 1.5rem) 0 clamp(4.2rem, 6vw, 5rem);
}
.article-hero-inner {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(0.75rem, 1.4vw, 1.5rem);
}
.article-hero-content {
  grid-column: 1 / span 9;
  align-self: end;
}
.article-hero-img {
  grid-column: 11 / span 4;
  justify-self: center;
}

/* Two-column hero, used when the post has a featured image — copy left, image
   right, the same split the .archive-hero single templates use.

   The 12-column grid above is left alone for a post with no image. Beside one
   it does not work: .article-hero-content is pinned to 1 / span 9 and
   .article-hero-img to 11 / span 4, which ends at line 15 of a 12-column grid
   and pushes the picture out past the container. Both are reset to auto here
   and the row is split explicitly instead.

   .has-media is only added by the template when there is an image, so a post
   without one is untouched by all of this. */
.article-hero.has-media .article-hero-inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 42%);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.article-hero.has-media .article-hero-content {
  grid-column: auto;
  align-self: center;
}
.article-hero.has-media .article-hero-img {
  grid-column: auto;
  justify-self: stretch;
  border-radius: var(--profile-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--color-light-alt);
}
.article-hero.has-media .article-hero-img img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 991px) {
  /* Stacked, copy first. The image is second in the markup, so it falls below
     without any ordering — someone on a phone reads what the page is before
     scrolling past a picture to reach it. */
  .article-hero.has-media .article-hero-inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

.article-hero .badge {
  margin-bottom: var(--space-md);
}
.article-hero h1 {
  margin: 0 0 var(--space-md);
}
.article-standfirst {
  font-size: clamp(1.0625rem, calc(1.4 * var(--fluid)), 1.25rem);
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-lg);
}
/* A standfirst of more than one paragraph (a <div> holding <p>s, as the
   webinars archive and the blog category view use): the paragraphs carry the
   spacing between them and the div keeps the outer margin. */
.article-standfirst p {
  margin: 0;
}
.article-standfirst p + p {
  margin-top: var(--space-sm);
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}
.article-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.article-author-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  background: var(--color-accent);
}
.article-author-avatar img,
.article-author-avatar .sg-ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.article-author-text {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.article-author-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-dark);
}
.article-author-name a {
  color: inherit;
  text-decoration: none;
}
.article-author-name a:hover,
.article-author-name a:focus-visible {
  color: var(--color-accent);
}
.article-author-role {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* ==========================================================================
   AUTHOR PROFILE (author.php) and AUTHORS INDEX (page-authors.php)

   .article-author above is the 44px byline that sits on a card or under a post
   title. This is the larger treatment for the author's own page, where the
   person is the subject rather than a credit line.
   ========================================================================== */
.author-profile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: clamp(1.25rem, 3vw, 2.25rem);
}
.author-profile-avatar {
  width: clamp(5rem, 10vw, 7.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  background: var(--color-light-alt);
}
.author-profile-avatar img,
.author-profile-avatar .avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Last-resort user icon, used when there is no ACF thumbnail and get_avatar()
   comes back empty — which it does when avatars are off under Settings >
   Discussion. Shared by the profile header and the authors index cards, so both
   fall back to the same mark.

   Sized in percentages rather than pixels so the one rule covers the 7.5rem
   profile avatar and the 5rem card avatar without a second breakpoint. */
.author-profile-icon {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: var(--color-bg-green);
  color: var(--color-accent-dark);
}
.author-profile-icon svg {
  width: 58%;
  height: 58%;
  display: block;
  fill: none;
  stroke: currentColor;
}
.author-profile-body .badge {
  margin-bottom: var(--space-sm);
}
.author-profile-body h1 {
  margin: 0 0 0.25rem;
}
.author-profile-role {
  margin: 0 0 var(--space-md);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-accent-dark);
}
.author-profile-bio {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  max-width: 60ch;
}
.author-profile-bio p {
  margin: 0 0 var(--space-sm);
}
.author-profile-bio p:last-child {
  margin-bottom: 0;
}
.author-profile-meta {
  margin: var(--space-md) 0 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}
.author-profile-sep {
  margin: 0 0.5rem;
  opacity: 0.5;
}

@media (max-width: 599px) {
  /* Stacked and centred on a phone — a 5rem avatar beside two words of role
     leaves the name on three lines. */
  .author-profile {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .author-profile-bio {
    max-width: none;
  }
}

/* ---- Authors index ---- */
.author-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* auto-fit rather than a fixed column count: the number of authors changes,
     and this fills the row at whatever that number happens to be. */
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-lg);
}
.author-card {
  display: flex;
}
.author-card-link {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
  padding: var(--space-lg) var(--space-md);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--profile-radius-md);
  box-shadow: var(--profile-card-shadow);
  transition: var(--profile-hover-transition);
  text-decoration: none;
  color: inherit;
}
.author-card-link:hover {
  transform: var(--profile-hover-transform);
  box-shadow: var(--profile-hover-shadow);
}
.author-card-avatar {
  width: 5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-light-alt);
  margin-bottom: var(--space-sm);
}
.author-card-avatar img,
.author-card-avatar .avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.author-card-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-dark);
}
.author-card-link:hover .author-card-name {
  color: var(--color-accent);
}
.author-card-role {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-accent-dark);
}
.author-card-count {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
.article-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.article-facts .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}
.article-facts svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  vertical-align: -2px;
  margin-right: 0.3rem;
}
.article-facts span {
  display: flex;
  align-items: center;
}

/* ---- Layout ---- */
.article-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  max-width: var(--profile-container-max);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) 0;
  align-items: start;
  justify-items: center;
}
.article-sidebar {
  position: sticky;
  top: var(--space-3xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
/* The signup card lives in the sidebar. The column's gap spaces it, so the card's own article-body margin goes. */
.article-sidebar .blog-signup {
  margin: 0;
}

/* ---- Prose ---- */
.article-body {
  max-width: 78ch;
  background-color: var(--color-white);
  padding: var(--space-lg);
  border-radius: var(--profile-radius-md);
}
.article-body > * + * {
  margin-top: var(--space-md);
}
/* ---- Article body: prose rhythm ----
   The owl above (> * + *) gives every direct child a baseline margin-top. These
   rules override it where that default is too tight — headings want more air
   above them than a paragraph does, and media needs room on both sides.

   Headings set top and bottom margins deliberately: the gap under a heading is
   always smaller than the gap above it, so a heading reads as belonging to the
   text that follows rather than floating between two blocks. Everything else
   leans on the owl. */
.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4,
.article-body h5,
.article-body h6 {
  color: var(--color-dark);
  font-weight: 800;
  letter-spacing: -0.015em;
  scroll-margin-top: var(--space-2xl);
}
.article-body h1 {
  font-size: clamp(1.875rem, calc(3.4 * var(--fluid)), 2.5rem);
  line-height: 1.2;
  margin: var(--space-2xl) 0 var(--space-md);
}
.article-body h2 {
  font-size: clamp(1.5rem, calc(2.8 * var(--fluid)), 2rem);
  line-height: 1.25;
  margin: var(--space-2xl) 0 var(--space-sm);
}
.article-body h3 {
  font-size: clamp(1.25rem, calc(2.2 * var(--fluid)), 1.5rem);
  line-height: 1.3;
  margin: var(--space-xl) 0 var(--space-xs);
}
.article-body h4 {
  font-size: 1.125rem;
  line-height: 1.4;
  margin: var(--space-lg) 0 var(--space-xs);
}
.article-body h5 {
  font-size: 1rem;
  line-height: 1.45;
  margin: var(--space-lg) 0 var(--space-xs);
}
.article-body h6 {
  font-size: 0.9375rem;
  line-height: 1.45;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin: var(--space-lg) 0 var(--space-xs);
}

.article-body p {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--color-text);
}

.article-body p:first-of-type() {
  margin: 0;
}

/* Lists. Explicit margins rather than the owl's, because a list following a
   paragraph is a tighter relationship than two paragraphs. Nested lists sit
   closer still. */
.article-body ul,
.article-body ol {
  margin: var(--space-md) 0;
  padding-left: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.article-body li {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-text);
}
.article-body li > ul,
.article-body li > ol {
  margin: 0.5rem 0 0;
}
.article-body li::marker {
  color: var(--color-accent);
}

/* Media. There was no img rule at all, so images were inline elements with a
   baseline gap under them, no width cap and no vertical spacing. display:block
   with max-width kills all three. The margins cover every shape the editor
   produces: a bare <img>, a Gutenberg <figure class="wp-block-image">, and an
   image wrapped in a <p> by the classic editor. */
.article-body img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--profile-radius-md);
}
.article-body figure,
.article-body .wp-block-image,
.article-body .wp-block-embed,
.article-body .blog-figure {
  margin: var(--space-xl) 0;
}
/* The figure already carries the spacing — the image inside must not add more. */
.article-body figure img,
.article-body .wp-block-image img {
  margin: 0;
}
.article-body > img,
.article-body p > img {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xl);
}
.article-body figcaption {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  text-align: center;
}
.article-body iframe,
.article-body video {
  display: block;
  max-width: 100%;
  margin: var(--space-xl) 0;
  border-radius: var(--profile-radius-md);
}

/* Everything else the editor can emit, so none of it falls back to browser
   defaults the way h4 to h6 and images were doing. */
/* :not(.article-pullquote) matters. .article-pullquote is a blockquote inside
   this container with its own borderless treatment, and a bare
   ".article-body blockquote" (0,1,1) outranks ".article-pullquote" (0,1,0) —
   so without the exclusion this would repaint every pull quote on the site. */
.article-body blockquote:not(.article-pullquote) {
  margin: var(--space-xl) 0;
  padding: var(--space-md) var(--space-lg);
  border-left: 3px solid var(--color-accent);
  background: var(--color-light-alt);
  border-radius: 0 var(--profile-radius-md) var(--profile-radius-md) 0;
}
.article-body blockquote:not(.article-pullquote) p {
  font-size: 1.125rem;
  line-height: 1.6;
}
.article-body blockquote p + p {
  margin-top: var(--space-sm);
}
.article-body hr {
  margin: var(--space-2xl) 0;
  border: 0;
  border-top: 1px solid var(--color-border);
}
.article-body table {
  width: 100%;
  margin: var(--space-xl) 0;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.article-body th,
.article-body td {
  padding: 0.75rem;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}
.article-body th {
  font-weight: 700;
  color: var(--color-dark);
}
.article-body pre {
  margin: var(--space-xl) 0;
  padding: var(--space-md);
  background: var(--color-dark);
  color: var(--color-white);
  border-radius: var(--profile-radius-md);
  overflow-x: auto;
  font-size: 0.875rem;
}

/* No leading gap at the top of the article and no trailing gap at the bottom —
   the padding on .article-body is doing that job. Direct children only, so a
   last paragraph inside a blockquote keeps its own spacing. */
.article-body > :first-child {
  margin-top: 0;
}
.article-body > :last-child {
  margin-bottom: 0;
}
/* Prose links. The exclusions matter: .share-row and .ai-share both sit inside
   .article-body, so without them this selector — (0,2,1) — outranks
   .share-btn:hover at (0,2,0) and the buttons are painted as underlined body
   links that never take their own hover colour. Excluding them here is tidier
   than escalating the button selectors, which is how .ai-share-btn was patched
   further down. */
.article-body a:not(.main-button):not(.share-btn):not(.ai-share-btn) {
  color: var(--color-accent-dark);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.article-body a:not(.main-button):not(.share-btn):not(.ai-share-btn):hover {
  color: var(--color-dark);
}
.article-pullquote {
  margin: var(--space-xl) 0;
  padding: 0 0 0 var(--space-lg);
  border-left: 3px solid var(--color-accent);
  font-size: clamp(1.15rem, calc(1.6 * var(--fluid)), 1.4rem);
  line-height: 1.5;
  font-weight: 600;
  color: var(--color-dark);
}
.article-pullquote cite {
  display: block;
  margin-top: var(--space-sm);
  font-size: 0.85rem;
  font-weight: 500;
  font-style: normal;
  color: var(--color-text-muted);
}

/* ---- AI summary ---- */
.ai-summary {
  border: 1px solid var(--color-border);
  border-radius: var(--profile-radius-md);
  background: var(--color-light-alt);
  padding: var(--space-lg);
}
.ai-summary-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: var(--space-md);
}
.ai-summary-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
}
.ai-summary-badge svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}
.ai-summary-note {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* Ask AI — a grid of buttons that open this article in each assistant.
   Replaces the tabbed summary: the summary was three panels of text the reader
   could already get from the article; this hands the article to the tool they
   would have pasted it into anyway. */
.ai-share-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.ai-share-grid {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}
.ai-share-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--profile-radius-pill);
  background: var(--color-white);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-dark);
  text-decoration: none;
  transition: var(--transition-fast);
}
/* .article-body a:not(.main-button) underlines every link in the article, so
   the buttons need the same weight of selector to stay buttons. */
.ai-share a.ai-share-btn {
  color: var(--color-dark);
  text-decoration: none;
}
.ai-share a.ai-share-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}
.ai-share-mark {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 8px;
  background: var(--color-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-secondary);
}
.ai-share-btn:hover .ai-share-mark {
  background: var(--color-bg-green);
  color: var(--color-accent);
}

@media (max-width: 560px) {
  .ai-share-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.ai-summary-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: var(--space-md);
}
.ai-tab {
  border: 1px solid var(--color-border);
  background: var(--color-white);
  border-radius: var(--profile-radius-pill);
  padding: 0.4rem 0.85rem;
  font-family: var(--font-primary);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: var(--transition-fast);
}
.ai-tab:hover {
  border-color: var(--color-dark);
  color: var(--color-dark);
}
.ai-tab.is-active {
  background: var(--color-dark);
  border-color: var(--color-dark);
  color: #fff;
}
.ai-tab:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.ai-panel {
  display: none;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-text);
}
.ai-panel.is-active {
  display: block;
}
.ai-panel ul {
  margin: 0;
  padding-left: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

/* ---- Share ---- */
.share-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
/* The row closes the article body, so it keeps clear of the last paragraph or block above it. */
.article-body > .share-row {
  margin-top: var(--space-lg);
}
.share-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin-right: 0.25rem;
}
.share-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-fast);
  text-decoration: none;
}
.share-btn:hover {
  background: var(--color-dark);
  border-color: var(--color-dark);
  color: #fff;
}
.share-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.share-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  transition: fill var(--transition-fast);
}
/* Stated rather than left to currentColor. The icon turning white is the point
   of the hover, so it should not depend on nothing else having got in front of
   the colour on .share-btn:hover — which is exactly what the prose link rule
   used to do. */
.share-btn:hover svg,
.share-btn:focus-visible svg,
.share-btn.copied svg {
  fill: #fff;
}
.share-btn.copied {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

/* ---- Sidebar cards ---- */
.sidebar-card {
  border-radius: var(--profile-radius-md);
  padding: var(--space-lg);
}
.sidebar-card.toc {
  padding: 0;
}
.sidebar-card-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin: 0 0 var(--space-md);
}
.sidebar-card.cta {
  background: var(--color-dark);
  border-color: var(--color-dark);
}
.sidebar-card.cta .sidebar-card-title {
  color: rgba(255, 255, 255, 0.6);
}
.sidebar-card.cta h3 {
  color: #fff;
  font-size: 1.2rem;
  margin: 0 0 var(--space-sm);
}
.sidebar-card.cta p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0 0 var(--space-md);
}
.sidebar-card.cta .main-button {
  width: 100%;
  justify-content: center;
}

/* ---- Customer story sidebar (single-customer-stories.php) ----
   Two additions to the existing .sidebar-card; everything else there is reused
   as-is. */

/* The client's logo in the hero media column (single-customer-stories.php).

   .archive-hero-media img is width:100%, which is right for a photograph and
   badly wrong for a wordmark — it would blow the logo up to the full column.
   is-logo contains it on a white card instead: a logo must never be cropped,
   and a dark wordmark needs a light ground whatever the file is. */
.archive-hero-media.is-logo {
  display: grid;
  place-items: center;
  background: var(--color-white);
  padding: clamp(1.5rem, 4vw, 3rem);
  aspect-ratio: 16 / 10;
  box-shadow: var(--shadow-lg);
}
.archive-hero-media.is-logo img {
  width: auto;
  height: auto;
  max-width: 70%;
  max-height: 60%;
  object-fit: contain;
}

/* ==========================================================================
   WEBINARS (single-webinar.php, archive-webinar.php)
   ========================================================================== */

/* Date and duration under the hero intro. */
.webinar-meta {
  margin: var(--space-md) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.webinar-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.webinar-meta-item svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  stroke: var(--color-accent);
}

/* The recording, full width above the two columns. oembed returns the
   provider's own iframe with hard width and height attributes, so the ratio has
   to be forced here — aspect-ratio on the wrapper plus absolute positioning on
   whatever lands inside it. */
.webinar-video-section {
  padding-top: 0;
}
.webinar-video {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: var(--profile-container-max);
  margin: 0 auto;
  border-radius: var(--profile-radius-lg);
  overflow: hidden;
  background: var(--color-dark);
  box-shadow: var(--shadow-lg);
}
.webinar-video iframe,
.webinar-video object,
.webinar-video embed,
.webinar-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* The gate that stands in for the player when a webinar is upcoming, or is
   gated and the visitor has no valid link.

   Same 16/9 box as .webinar-video on purpose: returning on a Sugar link swaps
   the panel for the recording in the same space, so the page does not jump. */
.webinar-gate {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: var(--profile-container-max);
  margin: 0 auto;
  border-radius: var(--profile-radius-lg);
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: var(--space-lg);
  text-align: center;
  background:
    radial-gradient(
      70% 70% at 50% 0%,
      rgba(var(--color-accent-rgb), 0.22) 0%,
      rgba(var(--color-accent-rgb), 0) 70%
    ),
    var(--color-dark);
  box-shadow: var(--shadow-lg);
}
.webinar-gate-inner {
  max-width: 34rem;
  display: grid;
  justify-items: center;
  gap: var(--space-sm);
}
.webinar-gate-icon {
  width: 3.25rem;
  height: 3.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.webinar-gate-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}
.webinar-gate-text {
  margin: 0;
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height: 1.5;
  font-weight: 600;
  color: #fff;
}
.webinar-gate .button-holder {
  margin-top: var(--space-sm);
  justify-content: center;
}
/* The expired-link line. Amber rather than red: a link running out is expected,
   not an error the visitor caused. */
.webinar-gate-note {
  margin: var(--space-sm) 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-bg-amber);
}

/* With the interim form in it the panel needs real height, and the 16/9 box is
   nowhere near enough for four fields and a button. */
.webinar-gate.has-form {
  aspect-ratio: auto;
  padding: clamp(2rem, 5vw, 3.5rem) var(--space-lg);
}
.webinar-gate.has-form .webinar-gate-inner {
  max-width: 38rem;
  width: 100%;
}

.webinar-gate-form {
  width: 100%;
  text-align: left;
  margin-top: var(--space-sm);
}
.webinar-gate-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-md);
}
@media (max-width: 559px) {
  .webinar-gate-row {
    grid-template-columns: 1fr;
  }
}

/* The panel is dark, so the labels have to be too — .form-label is
   --color-text, which is near-black and unreadable here. The fields themselves
   are already white with dark text, so they need nothing. */
.webinar-gate-form .form-label {
  color: rgba(255, 255, 255, 0.86);
}
.webinar-gate-form .form-label .req {
  color: var(--color-bg-amber);
}
/* The consent checkbox label inherits the page text colour, which is the same
   navy as the panel, so without this the sentence is invisible and only the
   green privacy-policy link shows. */
.webinar-gate-form .form-checkbox {
  color: rgba(255, 255, 255, 0.86);
}
.webinar-gate-form .button-holder {
  justify-content: center;
  margin-top: var(--space-sm);
}

.webinar-gate-fallback {
  margin: var(--space-md) 0 0;
  text-align: center;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.75);
}
.webinar-gate-fallback a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

@media (max-width: 599px) {
  /* A 16/9 box on a phone is too short for a headline, a button and a note. */
  .webinar-gate {
    aspect-ratio: auto;
    min-height: 16rem;
  }
}

/* Speakers in the sidebar. */
.speaker-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-md);
}
.speaker {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
}
.speaker-photo {
  width: 3rem;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-light-alt);
  flex: 0 0 auto;
}
.speaker-photo img,
.speaker-photo .author-profile-icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.speaker-text {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
  min-width: 0;
}
.speaker-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-dark);
}
.speaker-role {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* The registration card holds a form plugin's markup, which brings its own
   styles. Only the heading spacing is set here; the CSS bridge that makes
   Gravity Forms look like this design system is already in the stylesheet. */
.sidebar-card.webinar-form h3 {
  margin: 0 0 var(--space-md);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-dark);
}

/* ==========================================================================
   eBOOK CARDS (archive-ebook.php)

   A separate component from .archive-card for one reason: .archive-card__media
   is a 16/9 object-fit: cover box, and an eBook cover is usually portrait. That
   crop would slice the top and bottom off every cover. These use contain on a
   tinted ground instead, which takes portrait and landscape without cropping
   either.
   ========================================================================== */
.ebook-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
@media (max-width: 991px) {
  .ebook-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .ebook-grid {
    grid-template-columns: 1fr;
  }
}

.ebook-card {
  display: flex;
}
.ebook-card-link {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--profile-radius-md);
  overflow: hidden;
  transition: var(--profile-hover-transition);
  text-decoration: none;
  color: inherit;
}
/* No resting shadow — the border carries the edge, and the lift is saved for
   hover. Same as .article-teaser, so the two sit flat together in a mixed row. */
.ebook-card-link:hover {
  transform: var(--profile-hover-transform);
  box-shadow: var(--profile-hover-shadow);
}
.ebook-card-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* White behind the cover, and the blog card's 16/9 top box so a row of eBooks
   and a row of articles are the same shape. The label sits top-left the way the
   blog card's category badge does. */
.ebook-card-media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  background: var(--color-white);
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}
/* The cover, never cropped. max-height keeps a tall portrait inside the box
   while a landscape image is held by max-width. */
/* Held by height, not width. An eBook cover is portrait and the box is now
   landscape, so capping the width would let a tall cover run past the top and
   bottom of it. Never cropped either way. */
.ebook-card-media img {
  width: auto;
  height: auto;
  max-width: 60%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  border-radius: var(--profile-radius-sm);
  box-shadow: var(--shadow-lg);
}
.ebook-card-label {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  background: var(--color-white);
  color: var(--color-dark);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border-radius: var(--profile-radius-pill);
}

.ebook-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
  flex: 1 1 auto;
}
.ebook-card-title {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--color-dark);
}
.ebook-card-link:hover .ebook-card-title {
  color: var(--color-accent);
}
.ebook-card-text {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* margin-top:auto pins the footer down, so the download row lines up across a
   row of cards whatever length the titles are. */
/* A ruled foot, the same as .article-teaser__bottom. The negative margins pull
   it back out to the card edges, since it sits inside the padded body rather
   than being a sibling of it as it is on the blog card. */
.ebook-card-foot {
  margin: auto calc(var(--space-md) * -1) calc(var(--space-md) * -1);
  padding: var(--space-md);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}
.ebook-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-accent-dark);
  text-decoration: none;
}
.ebook-card-cta:hover {
  color: var(--color-accent);
}
/* The eBook listings now print .article-teaser cards (with .ebook-teaser on top)
   in the blog's .archive-grid; the download row above sits in
   .article-teaser__bottom where the blog shows author and date. .ebook-grid /
   .ebook-card below are kept for anything else still using them. */
.ebook-card-cta svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}
.ebook-card-size {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* The review quote. A <figure> holding a <blockquote> and a <figcaption>, so
   the attribution belongs to the quotation rather than being a paragraph that
   happens to follow it. */
.story-quote {
  margin: 0;
  background: var(--color-bg-green);
  border: 1px solid var(--color-bg-green);
  position: relative;
}
.story-quote blockquote ul {
  padding-left: 10px;
}
.story-quote blockquote ul li {
margin: 0 0 5px;
}
.story-quote blockquote {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  font-weight: 600;
  color: var(--color-dark);
}
.story-quote blockquote p {
  margin: 0 0 var(--space-sm);
}
.story-quote blockquote p:last-child {
  margin-bottom: 0;
}
/* Typographic quotes on the first and last paragraph, so an editor does not
   have to type them and they cannot end up mismatched. */
.story-quote blockquote p:first-of-type::before {
  content: '\201C';
}
.story-quote blockquote p:last-of-type::after {
  content: '\201D';
}
.story-quote figcaption {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(var(--color-dark-rgb), 0.12);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-accent-dark);
}
.toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.toc-list a {
  display: block;
  padding: 0.4rem 0.5rem;
  border-radius: var(--profile-radius-sm);
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--color-text-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
}
.toc-list a:hover {
  background: var(--color-light-alt);
  color: var(--color-dark);
}
.toc-list a.is-current {
  color: var(--color-dark);
  font-weight: 600;
  border-left-color: var(--color-accent);
  background: var(--color-bg-green);
}

/* ---- Content blocks ---- */
.blog-figure {
  margin: var(--space-xl) 0;
}
.blog-figure-media {
  border-radius: var(--profile-radius-md);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--color-light-alt);
}
.blog-figure-media img,
.blog-figure-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.blog-figure figcaption {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin-top: 0.625rem;
  line-height: 1.5;
}
.blog-gallery {
  margin: var(--space-xl) 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}
.blog-gallery .blog-gallery-item {
  border-radius: var(--profile-radius-sm);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--color-light-alt);
}
.blog-gallery .blog-gallery-item img,
.blog-gallery .blog-gallery-item .sg-ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blog-gallery.wide {
  grid-template-columns: repeat(2, 1fr);
}
.blog-cta {
  margin: var(--space-xl) 0;
  padding: var(--space-lg);
  border-radius: var(--profile-radius-md);
  background: var(--gradient-card-green);
  border: 1px solid var(--color-border);
}
.blog-cta h3 {
  margin: 0 0 var(--space-xs);
}
.blog-cta p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-md);
}
.blog-signup {
  margin: var(--space-xl) 0;
  padding: var(--space-lg);
  border-radius: var(--profile-radius-md);
  background: var(--color-dark);
  color: #fff;
  /* One even rhythm from a flex gap rather than a different bottom margin on
     each child, which is what made the spacing look uneven — the title had
     --space-xs under it, the paragraph --space-md, and the note --space-sm
     above. Every child now zeroes its own margin and the gap does the work. */
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.blog-signup > * {
  margin: 0;
}

/* Two classes, so it beats .article-body h3 — (0,1,1) — which would otherwise
   paint this dark navy on a dark navy panel and add a --space-xl margin above
   it. The signup sits inside .article-body, so that rule does apply here. */
.blog-signup .blog-signup-title {
  color: var(--color-accent);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-top: 0;
  margin-bottom: -10px;
}
.blog-signup p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.92rem;
  line-height: 1.6;
}
/* A little more air before the control row than between the two lines of copy,
   so the form reads as the next step rather than a third paragraph. */
.blog-signup-form {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: var(--space-xs);
}
.blog-signup-form input {
  flex: 1 1 200px;
  min-width: 0;
  height: 2.75rem;
  padding: 0.5rem 1rem;
  border-radius: var(--profile-radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-family: var(--font-primary);
  font-size: 0.9rem;
}
.blog-signup-form input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.blog-signup-form input:focus {
  outline: none;
  border-color: var(--color-accent);
  background: rgba(255, 255, 255, 0.14);
}
/* margin cleared by .blog-signup > *; the gap spaces it like everything else. */
.blog-signup-note {
  font-size: 0.75rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
}

/* ---- Editorial process ---- */
.editorial {
  margin: var(--space-lg) 0;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}
.editorial-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--space-md);
}
.editorial-head svg {
  width: 18px;
  height: 18px;
  stroke: var(--color-accent);
  stroke-width: 2;
  fill: none;
}
.editorial-head h2 {
  font-size: 1.15rem;
  margin: 0;
}
.ai-share-head h2 {
  font-size: 1.15rem;
  margin: 0;
}

/* ---- Popup ---- */
.blog-popup {
  position: fixed;
  inset: 0;
  z-index: 180;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  background: rgba(20, 34, 52, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--transition-base),
    visibility var(--transition-base);
}
.blog-popup.is-open {
  opacity: 1;
  visibility: visible;
}
/* Scroll lock. position:fixed rather than overflow:hidden — the latter is
   ignored by iOS Safari, and body keeps its scroll offset in `top` so the page
   does not jump to the top when the modal opens. */
body.is-modal-open {
  position: fixed;
  width: 100%;
  overflow: hidden;
}
.blog-popup-card {
  position: relative;
  width: min(440px, 100%);
  transform: translateY(10px) scale(0.985);
  transition: transform var(--transition-base);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--profile-radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--space-lg);
}
.blog-popup-card h3 {
  font-size: 1.15rem;
  margin: 0 0 var(--space-xs);
  padding-right: var(--space-lg);
}
.blog-popup-card p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-md);
}
.blog-popup-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.blog-popup.is-open .blog-popup-card {
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .blog-popup-card {
    transition: none;
  }
}
.blog-popup-close:hover {
  background: var(--color-light-alt);
  color: var(--color-dark);
}
.blog-popup-close svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
}

/* ---- Related ---- */
.related-articles {
  background: var(--color-light-alt);
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}
.related-inner {
  max-width: var(--profile-container-max);
  margin: 0 auto;
  padding-inline: clamp(1.5rem, 5vw, 5rem);
}
.related-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}
.related-head h2 {
  margin: 0;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

@media (max-width: 991px) {
  .article-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Stacked, the sidebar comes first in the DOM but reads better after the
     article: order moves it below the body (and the share row) without
     changing the markup, so the desktop grid is untouched. */
  .article-sidebar {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    order: 1;
  }
  .article-sidebar .sidebar-card,
  .article-sidebar .blog-signup {
    flex: 1 1 260px;
  }
  .article-sidebar .sidebar-card.toc {
    display: none;
  }
  .related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .article-body {
    max-width: none;
  }
  .blog-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
  .related-grid {
    grid-template-columns: 1fr;
  }
  .blog-popup {
    right: var(--space-sm);
    left: var(--space-sm);
    bottom: var(--space-sm);
    width: auto;
  }
  .article-sidebar {
    flex-direction: column;
  }
}

/* ==========================================================================
   41. CASE STUDY
   Composed almost entirely from existing components: the blog's
   .article-hero / .article-layout / .article-body / .article-sidebar /
   .sidebar-card / .share-row / .blog-figure / .article-pullquote, plus
   .check-list for the recommendation points. The only addition is the
   definition-list styling for the At-a-glance card below.
   ========================================================================== */

/* At a glance — name/value pairs, so a definition list */
.case-glance {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.case-glance div {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.case-glance dt {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-secondary);
}
.case-glance dd {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-text);
}

/* ==========================================================================
   42. REVIEW-NOTE VARIANTS  (7 Aug review — Rachel Paterson / Rahat Ahmed)
   Opt-in modifiers on existing blocks. Nothing here changes a default, so
   the approved components render exactly as before until a class is added.
   ========================================================================== */

/* Nav — on-premise link de-emphasised (was oversized with a strapline) */
.mega-footer.compact {
  justify-content: flex-start;
  padding-top: var(--space-sm);
}
.text-link.small {
  font-size: 0.8125rem;
  font-weight: 600;
}

/* Nav — Features reads as a distinct category from Platform (runn.io) */
.mega-col.is-group {
  background: var(--color-light-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--profile-radius-md);
  padding: var(--space-md);
  margin: calc(-1 * var(--space-sm)) 0;
}
.mega-col.is-group .mega-col-title {
  color: var(--color-accent-dark);
}

/* Benefit boxes / benefits — compact row layout, icon beside text not above.
   Review: "icon-above-text uses a lot of vertical space". */
.benefits.compact .benefits-item {
  text-align: left;
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}
.benefits.compact .benefits-item-icon {
  width: 36px;
  height: 36px;
  margin: 0;
  flex: 0 0 auto;
}
.benefits.compact .benefits-item-icon svg {
  width: 28px;
  height: 28px;
}
.benefits.compact .benefits-item-title {
  font-size: 1.05rem;
  margin-bottom: 0.2rem;
}
.benefits.compact .benefits-item-text {
  margin: 0;
  max-width: none;
  font-size: 0.9rem;
}
.benefit-boxes.compact .benefit-box {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  padding-inline: 0;
}
.benefit-boxes.compact .benefit-box-icon {
  margin: 0;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
}
.benefit-boxes.compact .benefit-box h3 {
  margin-bottom: 0.2rem;
}

/* Testimonials — navy variant with a logo slot.
   Review: "white-on-white looks flat; no company logos on cards". */
.reviews.on-navy {
  background: var(--color-dark);
}
.reviews.on-navy .reviews-title,
.reviews.on-navy .reviews-sub {
  color: #fff;
}
.reviews.on-navy .review-card {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}
.reviews.on-navy .review-title {
  color: #fff;
}
.reviews.on-navy .review-text {
  color: rgba(255, 255, 255, 0.78);
}
.reviews.on-navy .review-name {
  color: #fff;
}
.reviews.on-navy .review-role {
  color: rgba(255, 255, 255, 0.6);
}
.review-logo {
  margin-top: auto;
  padding-top: var(--space-md);
  display: flex;
  align-items: center;
  min-height: 34px;
}
.review-logo .cl-name {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-dark);
  opacity: 0.7;
}
.reviews.on-navy .review-logo .cl-name {
  color: #fff;
  opacity: 0.85;
}
.review-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  background: #fff;
}
.review-avatar img,
.review-avatar .sg-ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Integrations — carousel instead of a grid of white cards.
   Review: "each logo in its own card takes up a lot of page space". */
.integrations.as-carousel .integrations-grid {
  display: none;
}
.integrations.as-carousel .logo-carousel {
  padding: 0;
}
/* 150px logos, per the client. The img inside is height: 100% / width: auto,
   so the row height is what sets the image height. */
.integrations.as-carousel .logo-item {
  height: 150px;
}
.integrations.as-carousel .logo-item img {
  height: 100%;
  width: auto;
  max-width: none;
}

/* Page head — three hero options.
   Review: "template forces an image even when there isn't a relevant one". */
.page-head.text-only .page-head-inner {
  grid-template-columns: minmax(0, 1fr);
  text-align: center;
  max-width: 820px;
}
.page-head.text-only .page-head-media {
  display: none;
}
.page-head.text-only .page-head-text {
  margin-inline: auto;
}
.page-head.text-only .button-holder {
  justify-content: center;
}
.page-head.banner {
  background: var(--color-bg-blue);
}
.page-head.banner.no-image .page-head-inner {
  grid-template-columns: minmax(0, 1fr);
}
.page-head.banner.no-image .page-head-media {
  display: none;
}

/* Text section — unblocked option.
   Review: "copy inside heavy blocks looks blocky and dated". */
.text-section.unblocked .text-section-panel {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
.text-section.unblocked .text-section-inner {
  max-width: 780px;
}

/* Cards — equal height regardless of copy length.
   Review: "longer text misaligns card images above/below". */
.case-cards-grid,
.reviews-grid,
.related-grid {
  align-items: stretch;
}
.case-cards-grid > *,
.reviews-grid > *,
.related-grid > * {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.card-row-aligned .card-base {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.card-row-aligned .card-media {
  flex: 0 0 auto;
}
.card-row-aligned .card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.card-row-aligned .card-body .text-link {
  margin-top: auto;
  padding-top: var(--space-sm);
}

/* Feature accordion image — the heavy black frame was called out */
.feature-media.soft .hh-device {
  background: var(--color-light-alt);
  box-shadow: var(--shadow-card);
}
.feature-media.soft .hh-device::before,
.feature-media.soft .hh-device::after {
  display: none;
}

/* Trust bar — logos lead, strapline recedes */
.client-logos.logos-first .client-logos-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0;
}
.client-logos.logos-first .logo-item img {
  filter: none;
}
.client-logos-ratings {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}
.client-logos-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.client-logos-rating strong {
  color: var(--color-dark);
  font-weight: 700;
}

/* Cards with a CTA: pin it to the bottom of the card, not to the end of the
   copy. Card bodies vary in length, so without this the buttons sit at a
   different height in every card of a row. Each card is already a flex column;
   `margin-top: auto` on the last element pushes it down to the card's floor. */
.case-card .button-holder,
.case-card .main-button,
.case-card .text-link,
.review-card .button-holder,
.sidebar-card .button-holder,
.sidebar-card .main-button,
.article-teaser .button-holder,
.article-teaser .text-link,
.benefit-box .button-holder,
.benefit-box .text-link,
.campaign-hero-card .button-holder {
  margin-top: auto;
}
/* The pin only works if the card is a column that fills its grid track */
.case-card,
.review-card,
.sidebar-card,
.article-teaser,
.benefit-box {
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* …and the element directly above the pinned CTA keeps its own spacing */
.case-card .button-holder,
.sidebar-card .button-holder,
.article-teaser .button-holder,
.benefit-box .button-holder {
  padding-top: var(--space-md);
}

/* ==========================================================================
   43. BLOG ARCHIVE (listing: category filter + featured post + grid)
   Reuses .article-teaser for the cards and .badge for the chips. Everything
   here is the listing furniture the system did not already have.
   ========================================================================== */

/* ---- Header ---- */
.archive-hero {
  padding: clamp(1rem, 2vw, 1.5rem) 0 clamp(2rem, 4vw, 3rem);
}
.archive-hero-inner {
  max-width: 46rem;
}

/* Two-column hero, used when the post has a featured image. The single-column
   46rem measure above is right for copy on its own — beside an image it would
   leave the picture squeezed into whatever was left, so the cap comes off and
   the row is split explicitly.

   .has-media is only added by the template when there is an image, so a post
   without one is untouched by all of this. */
.archive-hero.has-media .archive-hero-inner {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 42%);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
/* The copy column. It had no rule at all, in spite of being emitted by
   single-features, single-industry, single-role, single-products and
   single-customer-stories.

   min-width: 0 because a grid item defaults to min-width: auto, which stops it
   shrinking below its content: one long unbroken word — a product name, a URL
   in a standfirst — would push the column past its 1fr and squeeze the picture.
   The minmax(0, 1fr) above protects the track; this protects the item in it. */
.archive-hero-content {
  min-width: 0;
}

.archive-hero-media {
  margin: 0 auto;
}

.archive-hero-media img {
  width: auto!important;
  max-width: 100%;
  max-height: 500px;
}

.archive-hero-media img,
.archive-hero-media video {
  border-radius: var(--profile-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--color-light-alt);
  width: 100%;
  height: auto;
  display: block;
}
/* The hero video (single feature, product, role and industry pages) keeps a
   fixed shape so the two-column hero does not resize as it loads. */
.archive-hero-media video {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
@media (prefers-reduced-motion: reduce) {
  /* Poster only for anyone who has asked for less motion. */
  .archive-hero-media.is-video video {
    display: none;
  }
}

@media (max-width: 991px) {
  /* Stacked, copy first. The image is second in the markup, so it falls below
     without any ordering — someone on a phone reads what the page is before
     scrolling past a picture to reach it. */
  .archive-hero.has-media .archive-hero-inner {
    grid-template-columns: minmax(0, 1fr);
  }
}
.archive-hero h1 {
  margin: 0 0 var(--space-md);
}
.archive-hero .article-standfirst {
  margin-bottom: var(--space-lg);
}

/* ---- Blog index hero: title left, signup right ----
   .has-signup is set by home.php. Same shape as .has-media above, with the
   signup card in the second track instead of a picture. An even split: the
   card carries as much weight as the title. */
.archive-hero.has-signup .archive-hero-inner {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.archive-hero.has-signup .archive-hero-content {
  max-width: 46rem;
}
.archive-hero.has-signup .archive-hero-signup {
  min-width: 0;
}
/* copy-wide: a single column at 70% of the container, the signup stacked
   under the copy. Set on the customer stories archive header (without
   has-signup, so no split). */
.archive-hero.copy-wide .archive-hero-inner {
  max-width: 70%;
}
.archive-hero.copy-wide .archive-hero-signup {
  /* A hairline between the hero copy and the signup, so the signup reads as
     a footnote to the title rather than a second heading under it. */
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(var(--color-dark-rgb), 0.12);
}
@media (max-width: 991px) {
  .archive-hero.copy-wide .archive-hero-inner {
    max-width: none;
  }
}

@media (max-width: 991px) {
  /* Stacked: title, then the signup. Nothing to reorder. */
  .archive-hero.has-signup .archive-hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
  }
  .archive-hero.has-signup .archive-hero-signup {
    max-width: 480px;
  }
}

/* ---- Filter bar ----
   Sticks below the site header. The offset is --header-h, which the page sets
   from the header's measured height rather than a hard-coded guess, so it
   stays correct if the nav wraps or the announcement bar is added. */
.filter-bar {
  position: sticky;
  /* --header-h is published by initHeaderOffset() in js/main.js, measured from
     the header so the announcement bar is accounted for. The fallback is the
     header's usual height rather than 0 — at 0 the bar slides under the header
     instead of stopping below it, which is what it did while nothing was
     setting the property at all. */
  top: var(--header-h, 76px);
  z-index: 40;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.filter-bar-inner {
  max-width: var(--profile-container-max);
  margin: 0 auto;
  /* Same side padding as .container, so the bar lines up with the hero above
     it rather than sitting on its own gutter. */
  padding: 0.75rem var(--container-padding);
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* ==========================================================================
   BOOK A DEMO BLOCK (acf/book-a-demo)

   Two columns: the pitch, and the form on a raised white card. The section
   paints its own tinted wash — the same radial-over-linear treatment
   .archive-hero uses — so the white card has something to lift off. On plain
   white the card's border was the only thing separating it from the page, which
   is what made the first version look flat.

   Every control inside the card is an existing primitive (.form-field,
   .form-label, .text-field, .form-checkbox, .form-radio), so the rules here are
   layout and the wysiwyg list treatment only.
   ========================================================================== */
.book-demo {
  position: relative;
  isolation: isolate;
  --bd-tint: var(--color-bg-green);
  padding: clamp(3rem, 7vw, 6rem) 0;
  overflow: hidden;
}
.book-demo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(
      70% 60% at 78% 0%,
      rgba(var(--color-accent-rgb), 0.16) 0%,
      rgba(var(--color-accent-rgb), 0) 70%
    ),
    linear-gradient(180deg, var(--bd-tint) 0%, var(--color-white) 100%);
}
/* Tint variants, typed into the block's Advanced -> Additional CSS class. */
.book-demo.bg-blue {
  --bd-tint: var(--color-bg-blue);
}
.book-demo.bg-rose {
  --bd-tint: var(--color-bg-rose);
}
.book-demo.bg-amber {
  --bd-tint: var(--color-bg-amber);
}

.book-demo-inner {
  max-width: var(--profile-container-max);
  margin: 0 auto;
  padding-inline: clamp(1.5rem, 5vw, 5rem);
  display: grid;
  /* The card is the fixed side. A form much wider than 27rem starts reading as
     two columns of unrelated fields. */
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

/* ---- Left: the pitch ---- */
.book-demo-copy .badge {
  margin-bottom: var(--space-md);
}
.book-demo-copy h2 {
  margin: 0 0 var(--space-md);
  font-size: clamp(1.75rem, calc(3.6 * var(--fluid)), 2.75rem);
  letter-spacing: -0.02em;
}
/* The Demo page's h1 — same type as the homepage hero title (.hero-stack-title),
   including its mobile size below. */
.book-demo-copy h1 {
  margin: 0 0 var(--space-md);
  font-size: clamp(2.5rem, calc(5.4 * var(--fluid)), 4.25rem);
  font-weight: 700;
  line-height: 1.09;
  letter-spacing: -0.05em;
  color: var(--color-dark);
}
@media (max-width: 767px) {
  .book-demo-copy h1 {
    font-size: clamp(1.75rem, calc(7.5 * var(--fluid)), 2.375rem);
  }
}
/* The Demo page's testimonial under the hero copy — the customer story's
   .story-quote figure, given the padding and radius it gets there from its
   sidebar card. */
.book-demo-copy .story-quote {
  margin-top: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--profile-radius-md);
  max-width: 34rem;
}

.book-demo-rich {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}
.book-demo-rich > :first-child {
  margin-top: 0;
}
.book-demo-rich > :last-child {
  margin-bottom: 0;
}
.book-demo-rich p {
  margin: 0 0 var(--space-sm);
}
.book-demo-rich strong {
  color: var(--color-dark);
  font-weight: 700;
}

/*
 * Any list in the wysiwyg becomes a ticked list. This replaced a benefits
 * repeater, so an editor types a normal bulleted list and gets the design's
 * ticks. The tick is a masked SVG in ::before rather than a background-image,
 * so it inherits currentColor and stays crisp at any size.
 */
.book-demo-rich ul {
  list-style: none;
  margin: var(--space-md) 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.book-demo-rich ul li {
  position: relative;
  padding-left: 2rem;
  color: var(--color-text);
}
.book-demo-rich ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--color-accent);
  /* The tick itself, punched out of the circle. */
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")
      center / 0.8rem no-repeat,
    linear-gradient(#fff, #fff);
  -webkit-mask-composite: xor;
  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")
      center / 0.8rem no-repeat,
    linear-gradient(#fff, #fff);
  mask-composite: exclude;
}
/* Ordered lists keep their numbers — only bullets become ticks. */
.book-demo-rich ol {
  margin: var(--space-md) 0;
  padding-left: 1.25rem;
}
.book-demo-rich ol li {
  margin-bottom: 0.4rem;
}

/*
 * "What the demo covers". Cards rather than a plain indented list: on the wash
 * a bare list disappeared into the copy above it, and these are a distinct
 * promise about what happens next.
 */
.book-demo-steps {
  list-style: none;
  counter-reset: book-demo-step;
  margin: var(--space-xl) 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.book-demo-step {
  counter-increment: book-demo-step;
  position: relative;
  padding: var(--space-md) var(--space-md) var(--space-md) 3.75rem;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid var(--color-border);
  border-radius: var(--profile-radius-md);
}
.book-demo-step::before {
  content: counter(book-demo-step);
  position: absolute;
  left: var(--space-md);
  top: var(--space-md);
  width: 1.875rem;
  height: 1.875rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-dark);
  color: var(--color-white);
  font-size: 0.8125rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.book-demo-step-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-dark);
}
.book-demo-step-text {
  margin: 0.25rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* ---- Right: the form card ---- */
.book-demo-form {
  position: relative;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--profile-radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  /* Deeper than --shadow-lg on purpose: this is the one thing on the page that
     should look like it is floating above the wash. */
  box-shadow:
    0 24px 48px -24px rgba(var(--color-dark-rgb), 0.28),
    0 2px 6px rgba(var(--color-dark-rgb), 0.06);
}
@media (min-width: 992px) {
  /* --header-h is set by the page script where one runs; 0 is a safe default. */
  .book-demo-form {
    position: sticky;
    top: calc(var(--header-h, 76px) + 1.5rem);
  }
}

.book-demo-form-title {
  margin: 0 0 0.375rem;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-dark);
}
.book-demo-form-intro {
  margin: 0 0 var(--space-lg);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* Two fields to a row. The card is capped at 27rem, so this collapses on the
   card's own width, not the viewport's. */
.book-demo-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-md);
}
@media (max-width: 519px) {
  .book-demo-row {
    grid-template-columns: 1fr;
  }
}

/* The consent block reads as one unit, set apart from the fields above it. */
.book-demo-fields .form-checkbox,
.book-demo-fields .form-radio-group {
  margin-top: 0.25rem;
}
.book-demo-fields .form-radio-group {
  flex-direction: row;
  gap: var(--space-md);
}

.book-demo-fields .button-holder {
  margin-top: var(--space-lg);
}
.book-demo-fields .main-button {
  width: 100%;
  justify-content: center;
}

/* Editor-only. The block prints this under is_preview and never on the front. */
/* Built-in forms: the honeypot is off-screen, not display:none, so a bot that
   skips hidden fields still fills it. The thank-you and error panels are shown
   by the script in place of the fields. */
.book-demo-hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.book-demo-done {
  padding: var(--space-md) var(--space-lg);
  background: var(--color-bg-green);
  border-radius: var(--profile-radius-md);
}
.book-demo-done-title {
  margin: 0 0 var(--space-xs);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-dark);
}
.book-demo-done p {
  margin: 0;
  color: var(--color-text-muted);
}
.book-demo-done[hidden],
.book-demo-error[hidden] {
  display: none;
}
.book-demo-error {
  margin: var(--space-sm) 0 0;
  padding: 0.625rem 0.875rem;
  background: var(--color-bg-rose);
  color: var(--color-error);
  border-radius: var(--profile-radius-sm);
  font-size: 0.9rem;
}
.book-demo-fields.is-busy {
  opacity: 0.6;
  pointer-events: none;
}
/* The multi-step form inside the white card is not the CTA's own card, so it
   needs no card chrome — just the step spacing the CTA classes already give. */
.book-demo-multistep .cta-form-consent:last-child {
  margin-top: var(--space-md);
}
.book-demo-warning {
  margin: 0 0 var(--space-md);
  padding: 0.75rem 1rem;
  border-radius: var(--profile-radius-sm);
  background: var(--color-bg-amber);
  color: var(--color-dark);
  font-size: 0.875rem;
  line-height: 1.5;
}

@media (max-width: 991px) {
  .book-demo-inner {
    grid-template-columns: 1fr;
  }
  /* Form first: someone who tapped "Book a demo" wants the form, not to scroll
     past the pitch to reach it. */
  .book-demo-form {
    order: 1;
  }
  .book-demo-copy {
    order: 2;
  }
  .book-demo-steps {
    margin-top: var(--space-lg);
  }
}

/* ---- Filter bar as a search form ----
   search.php and 404.php put .filter-bar on the <form> itself and skip
   .filter-bar-inner. Two consequences that had to be undone here:

   1. They inherited the sticky bar treatment above — sticky positioning, the
      translucent ground and the top/bottom borders — which is wrong for a form
      sitting inside .section > .container.
   2. The flex layout lives on .filter-bar-inner, which these templates do not
      use, so the form's children were laying out as blocks. That is why the
      unclassed <svg> filled the page: an inline SVG with a viewBox and no
      width/height and no CSS sizing scales to its container.

   Scoped to form.filter-bar so home.php's <div class="filter-bar"> — which
   does use .filter-bar-inner and does want the sticky treatment — is
   untouched. */
form.filter-bar {
  position: static;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  max-width: var(--profile-container-max);
  margin: 0 auto clamp(2rem, 5vw, 3rem);
}

.filter-bar__search {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.125rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 999px;
}
.filter-bar__search:focus-within {
  border-color: var(--color-dark);
}

/* The sizing that was missing. flex: 0 0 auto stops the icon being stretched
   by the row as well. */
.filter-bar__search svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
}

.filter-bar__search input[type='search'] {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  padding: 0;
  color: inherit;
  font-family: var(--font-primary);
  font-size: 1rem;
}
.filter-bar__search input[type='search']::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

@media (max-width: 767px) {
  form.filter-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  /* Stretched to full width by align-items above. .main-button is inline-flex
     with no justify-content, so without this the label hugs the left edge. */
  form.filter-bar .main-button {
    justify-content: center;
  }
}
.filter-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex: 1 1 auto;
}
.filter-pill {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--profile-radius-pill);
  background: var(--color-white);
  color: var(--color-text-muted);
  transition:
    color var(--transition-fast),
    background var(--transition-fast),
    border-color var(--transition-fast);
}
.filter-pill:hover {
  border-color: var(--color-accent);
  color: var(--color-dark);
}
.filter-pill:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
/* Two selectors because the pills are links, not buttons.
   aria-pressed belongs to a toggle button — the static prototype these came
   from used <button>. In the theme they are <a> elements pointing at a category
   archive, and the correct attribute for "this is the current page" is
   aria-current="page", which is what category.php, tag.php and home.php all
   emit. The aria-pressed selector is kept so any button-based pill still
   highlights. */
.filter-pill[aria-pressed='true'],
.filter-pill[aria-current='page'] {
  background: var(--color-dark);
  border-color: var(--color-dark);
  color: var(--color-white);
}
/* Without this the hover colour wins over the active state — same specificity,
   and :hover comes first in the file. */
.filter-pill[aria-current='page']:hover {
  border-color: var(--color-dark);
  color: var(--color-white);
}
.filter-count {
  flex: 0 0 auto;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* ---- Select filters (customer stories) ----
   Pill-shaped controls in one row, in the language of the site's other pills:
   the taxonomy name sits inside the pill as a prefix, the native select is
   transparent behind it with its own chevron drawn, and a pill goes dark when
   a value is chosen — the same active state the category pills use. */
.filter-selects {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.filter-selects-lead {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-right: 0.25rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-secondary);
}
.filter-selects-lead svg {
  width: 15px;
  height: 15px;
}
.filter-select {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 2.5rem;
  padding: 0 2.25rem 0 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--profile-radius-sm);
  background: var(--color-white);
  color: var(--color-dark);
  font-size: 0.85rem;
  cursor: pointer;
  transition:
    color var(--transition-fast),
    background var(--transition-fast),
    border-color var(--transition-fast);
}
.filter-select:hover {
  border-color: var(--color-accent);
}
.filter-select:focus-within {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.filter-select-label {
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.filter-select-label::after {
  content: ':';
}
.filter-select-input {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background: transparent;
  margin: 0;
  padding: 0;
  height: 100%;
  min-width: 0;
  max-width: 14rem;
  font: inherit;
  font-weight: 700;
  color: inherit;
  cursor: pointer;
  text-overflow: ellipsis;
}
.filter-select-input:focus {
  outline: none;
}
.filter-select-chevron {
  position: absolute;
  right: 0.8rem;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}
.filter-select:hover .filter-select-chevron {
  color: var(--color-dark);
}
/* Chosen: dark, like an active category pill. */
.filter-select.is-active {
  background: var(--color-dark);
  border-color: var(--color-dark);
  color: var(--color-white);
}
.filter-select.is-active .filter-select-label {
  color: rgba(255, 255, 255, 0.7);
}
.filter-select.is-active .filter-select-chevron {
  color: var(--color-white);
}
/* The dropdown list itself takes the browser's colours, so its options stay
   readable whatever the pill's state. */
.filter-select.is-active .filter-select-input option {
  color: var(--color-dark);
  background: var(--color-white);
}
.filter-apply {
  height: 2.5rem;
  padding-block: 0;
}
.filter-apply[hidden] {
  display: none;
}
/* While a filter is fetching, fade the results rather than blanking them. */
[data-filter-results].is-loading {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity var(--transition-fast);
}
.filter-bar.has-selects .filter-count {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
/* Reset: a round icon button beside the count. The label is in the title and
   aria-label rather than on screen. */
.filter-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-text-muted);
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast),
    background var(--transition-fast);
}
.filter-clear svg {
  width: 15px;
  height: 15px;
}
.filter-clear:hover,
.filter-clear:focus-visible {
  color: var(--color-dark);
  border-color: var(--color-dark);
  background: var(--color-light-alt);
}
@media (max-width: 767px) {
  .filter-bar.has-selects .filter-bar-inner {
    flex-direction: column;
    align-items: stretch;
  }
  .filter-selects-lead {
    flex: 1 1 100%;
  }
  .filter-select {
    flex: 1 1 calc(50% - 0.25rem);
  }
  .filter-select-input {
    max-width: none;
    flex: 1 1 auto;
  }
  .filter-bar.has-selects .filter-count {
    justify-content: space-between;
  }
}

/* ---- Featured post ---- */
.archive-section {
  padding: clamp(2rem, 4vw, 3rem) 0 0;
}

/* Top padding only, because each section is spaced off the one above it. The
   last one on a page has nothing below it but the footer, though, and the
   footer's own top padding does not read as a gap when the two are the same
   colour — the navy newsletter panel on the webinars archive ran straight into
   the navy footer as one dark block. This is the page background showing
   through between them. */
.archive-section:last-child {
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.archive-inner {
  max-width: var(--profile-container-max);
  margin: 0 auto;
  /* Same side padding as .container, so the grid lines up with the hero and
     the filter bar above it. */
  padding-inline: var(--container-padding);
}
.archive-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.archive-section-head h2 {
  margin: 0;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-secondary);
}

.featured-post {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: stretch;
  background: var(--profile-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--profile-radius-lg);
  overflow: hidden;
  box-shadow: var(--profile-card-shadow);
  transition: var(--profile-hover-transition);
}
.featured-post:hover {
  box-shadow: var(--profile-hover-shadow);
}
.featured-post-media {
  position: relative;
  min-height: 260px;
  background: var(--color-light-alt);
}
.featured-post-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.featured-post-flag {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: 1;
}
.featured-post-body {
  padding: clamp(1.5rem, 3vw, 2.75rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-sm);
}
.featured-post-title {
  font-size: clamp(1.5rem, calc(2.2 * var(--fluid)), 2rem);
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin: 0;
}
.featured-post-title a {
  color: var(--color-dark);
  text-decoration: none;
}
.featured-post-title a:hover {
  color: var(--color-accent);
}
.featured-post-text {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}

/* ---- Grid ---- */
.archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
.archive-grid .article-teaser[hidden] {
  display: none;
}

/* ---- Archive card ----
   search.php uses .archive-card and its children throughout. None of it was
   ever written: the template was built against a static prototype
   (blog-archive.html, referenced in its docblock) whose CSS never came across.
   That is why the post thumbnails rendered at their natural size and pulled the
   grid apart — an unstyled <img> from the_post_thumbnail() is whatever size the
   uploaded file is.

   Tokens are deliberately the same as .article-teaser above, so search results
   read as the same component as every other card listing on the site. */
.archive-card {
  display: flex;
  flex-direction: column;
  background: var(--profile-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--profile-radius-md);
  overflow: hidden;
  transition: var(--profile-hover-transition);
  text-decoration: none;
  color: inherit;
}
/* No resting shadow — the border carries the edge and the lift is saved for
   hover, the same as .article-teaser and .ebook-card-link. */
.archive-card:hover {
  transform: var(--profile-hover-transform);
  box-shadow: var(--profile-hover-shadow);
}

/* The uniform media box. A fixed ratio rather than fixed pixel dimensions:
   the grid columns are already equal width, so an equal ratio makes every image
   identical in both dimensions, and it stays correct as the grid reflows to two
   columns then one. object-fit: cover crops the overflow instead of squashing
   the image, which is what stops portrait uploads distorting. */
.archive-card__media {
  position: relative;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-light-alt);
}
.archive-card__media img {
  display: block;
  width: 100%;
  height: auto;
  /* object-fit: cover; */
}

/* Placeholder for results with no featured image: the site logo on white.
   The cover rule above would stretch a logo edge to edge and crop it, so this
   overrides width/height back to auto and switches to contain. The box keeps
   its 16/9 ratio, so these cards still line up with the ones that have a real
   image. */
.archive-card__media.is-placeholder {
  background: var(--color-light-alt);
  display: grid;
  place-items: center;
  padding: var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.archive-card__media.is-placeholder img {
  width: auto;
  height: auto;
  max-width: 58%;
  max-height: 46%;
  object-fit: contain;
}

/* A client's own logo, not the site's standing in for a missing image. It is
   the content of the card rather than a gap-filler, so it takes more of the box
   — still contained, so a wide wordmark and a square mark both sit whole.

   max-height is what actually bounds it. A tall, narrow logo is limited by the
   box height rather than its width, and without this a portrait mark would run
   past the top and bottom of the 16/9 media box and be clipped by its
   overflow: hidden. The 100% ceiling is the padded content box, so the logo can
   never be taller than the space it sits in whatever shape it arrives as. */
.archive-card__media.is-client img {
  max-width: 70%;
  max-height: min(62%, 100%);
}

/* The category pill, sitting over the image. Same treatment as the blog
   teaser's .article-teaser__category — white on the artwork, small caps — but
   positioned absolutely, because .archive-card__media is a fixed-ratio box with
   the image filling it rather than a padded flex container. */
/* Two pills over the image — category, then sector — in one absolutely placed
   row, so they sit side by side rather than on top of each other. */
.archive-card__badges {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  right: var(--space-sm);
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.archive-card__badges .archive-card__category {
  position: static;
}
.archive-card__category.is-sector {
  background: var(--color-bg-green);
  color: var(--color-accent-dark);
}
.archive-card__size {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
.archive-card__category {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: 1;
  background: #fff;
  color: var(--color-dark);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border-radius: var(--profile-radius-pill);
}

.archive-card__body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex: 1 1 auto;
}
.archive-card__meta {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}
.archive-card__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--color-dark);
}
.archive-card:hover .archive-card__title {
  color: var(--color-accent);
}
.archive-card__excerpt {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}
/* margin-top:auto pins the footer to the bottom, so cards in a row line their
   "Read More" up even when titles and excerpts run to different lengths. */
.archive-card__foot {
  /* A ruled foot, the same as .article-teaser__bottom on the blog cards. The
     negative margins pull it back out to the card edges, since it sits inside
     the padded body rather than being a sibling of it as it is on the teaser;
     the top margin clears the body's gap so the rule sits a full space-md
     below the copy. */
  margin: auto calc(var(--space-md) * -1) calc(var(--space-md) * -1);
  padding: var(--space-md);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
.archive-card__body > *:nth-last-child(2) {
  margin-bottom: var(--space-sm);
}
.archive-card__more {
  font-weight: 700;
  color: var(--color-dark);
}
.archive-card:hover .archive-card__more {
  color: var(--color-accent);
}

/* ---- The stories archive's card (.archive-card.is-story) ---- */
/* A shorter image box than the demo page's 2:1, so the card is more copy than
   picture. The client logo inside it is capped at 40px tall, the width
   following, still contained so a wide wordmark sits whole. */
.archive-card.is-story .archive-card__media {
  aspect-ratio: 3 / 1;
}
.archive-card.is-story .archive-card__media.is-client img {
  max-height: 40px;
  max-width: 70%;
}
/* The category, as the green .badge.light, top-left over the image. */
.archive-card__badge {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: 1;
  font-size: 0.7rem;
  padding: 0.2rem 0.6rem;
}
/* Sector and company size as white pills (.archive-card__category, static
   inside this row) bottom-left over the image, in one row that wraps upward
   if the two will not fit side by side. */
.archive-card__badges-bottom {
  position: absolute;
  left: var(--space-sm);
  right: var(--space-sm);
  bottom: var(--space-sm);
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.35rem;
}
.archive-card__badges-bottom .archive-card__category {
  position: static;
}

/* ---- Search result groups (one per post type) ---- */
.search-group + .search-group {
  margin-top: clamp(2.5rem, 6vw, 4rem);
}
.search-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-border);
}
.search-group__title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-dark);
}
.search-group__count {
  font-weight: 500;
  color: var(--color-text-muted);
}
.search-group__all {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-dark);
  text-decoration: none;
  white-space: nowrap;
}
.search-group__all:hover {
  color: var(--color-accent);
}
.archive-empty {
  padding: clamp(2.5rem, 6vw, 4rem) 0;
  text-align: center;
  color: var(--color-text-muted);
}
.archive-empty p {
  margin: 0 0 var(--space-md);
}

/* ---- Pagination ---- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(3rem, 6vw, 4.5rem);
}
.pagination a,
.pagination span {
  min-width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--profile-radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  background: var(--color-white);
}
.pagination a:hover {
  border-color: var(--color-accent);
  color: var(--color-dark);
}
.pagination [aria-current='page'] {
  background: var(--color-dark);
  border-color: var(--color-dark);
  color: var(--color-white);
}
.pagination .is-disabled {
  opacity: 0.45;
  pointer-events: none;
}
.pagination .pagination-gap {
  border: none;
  background: none;
  min-width: 20px;
}
.pagination svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
}

@media (max-width: 991px) {
  .archive-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .featured-post {
    grid-template-columns: 1fr;
  }
  .featured-post-media {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
}
@media (max-width: 767px) {
  .archive-grid {
    grid-template-columns: 1fr;
  }
  .filter-bar-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .filter-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    width: 100%;
  }
  .filter-list::-webkit-scrollbar {
    display: none;
  }
  .filter-pill {
    white-space: nowrap;
  }
}

/* ==========================================================================
   44. RESOURCE ARCHIVE (hub: one row per post type)
   A row per content type — webinars, case studies, resources — each showing
   three cards and linking on to that type's own archive. Cards are
   .article-teaser and the row head is .related-head; only the banding is new.
   ========================================================================== */
.resource-row {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}
.resource-row.alt {
  background: var(--color-light-alt);
}
.resource-row .related-head {
  margin-bottom: var(--space-lg);
}
.resource-row .related-head h2 {
  font-size: clamp(1.5rem, calc(2.2 * var(--fluid)), 1.9rem);
}
.resource-row-note {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 0.25rem 0 0;
}

/* The card foot carries whatever identifies that type — a speaker, a client,
   or the download itself — so all three rows keep the same card silhouette. */
.article-teaser__bottom .text-link {
  font-size: 0.85rem;
}

/* ==========================================================================
   BLOCK — comparison_table (capability matrix across options)
   A real <table> — header cells carry scope, and every tick/cross has a text
   equivalent for screen readers, so the meaning does not live in the icon.
   The first column is sticky while the table scrolls sideways on narrow
   screens, and the scroller is focusable so it can be reached by keyboard.
   ========================================================================== */
.compare {
  background: var(--color-white);
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}
.compare-inner {
  max-width: var(--profile-container-max);
  margin: 0 auto;
  padding-inline: clamp(1.5rem, 5vw, 5rem);
}
.compare-head {
  max-width: 46rem;
  margin: 0 0 var(--space-xl);
}
.compare-head h2 {
  margin: 0 0 var(--space-sm);
}
.compare-lede {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}

/* Focusable so a keyboard user can scroll it; the outline only shows on
   keyboard focus, not on click. */
.compare-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.compare-scroll:focus {
  outline: none;
}
.compare-scroll:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: var(--profile-radius-sm);
}

.compare-table {
  width: 100%;
  min-width: 700px; /* below this the columns stop being readable — scroll instead */
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
}
.compare-table th,
.compare-table td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.compare-table thead th {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-secondary);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
/* Row headers stay put while the table scrolls sideways. */
.compare-table tbody th {
  position: sticky;
  left: 0;
  background: var(--color-white);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-dark);
  min-width: 15rem;
}
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td {
  border-bottom: none;
}
.compare-table td {
  text-align: center;
}
.compare-table thead th:not(:first-child) {
  text-align: center;
}

/* The column being argued for */
.compare-col-feature {
  width: 34%;
}
.compare-table .is-highlight {
  background: var(--color-bg-green);
}
.compare-table thead .is-highlight {
  color: var(--color-accent-dark);
  border-top-left-radius: var(--profile-radius-md);
  border-top-right-radius: var(--profile-radius-md);
}
.compare-table tbody tr:last-child .is-highlight {
  border-bottom-left-radius: var(--profile-radius-md);
  border-bottom-right-radius: var(--profile-radius-md);
}
.compare-brand {
  display: block;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--color-accent-dark);
}

/* Marks — icon plus a visually-hidden word, never the icon alone */
.compare-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
}
.compare-mark svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.5;
  fill: none;
  stroke: currentColor;
}
.compare-mark.yes {
  background: var(--color-accent);
  color: #fff;
}
.compare-mark.partial {
  background: var(--color-bg-amber);
  color: #b4712f;
}
.compare-mark.no {
  background: var(--color-light);
  color: var(--color-secondary);
}

.compare-note {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: var(--space-md) 0 0;
}

@media (max-width: 767px) {
  .compare-table tbody th {
    min-width: 12rem;
    font-size: 0.9rem;
  }
  .compare-table th,
  .compare-table td {
    padding: 0.75rem 0.875rem;
  }
}

/* Embedded in prose — no section chrome, and a narrower floor because the
   article measure is about 600px, so the table would otherwise always scroll.
   .article-body handles the vertical rhythm. */
.compare-embed {
  margin: var(--space-xl) 0;
}
.compare-embed .compare-table {
  min-width: 560px;
}
.compare-embed .compare-note {
  font-size: 0.8rem;
}

/* ==========================================================================
   BLOCK — stat_band (a row of figures)
   Numbers carried at display size with a coloured rule above each, so the
   block reads visually without implying a proportion it cannot support —
   these are counts, not percentages, so no bars or rings.
   ========================================================================== */
.stat-band {
  margin: var(--space-xl) 0;
}
.stat-band-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin: 0 0 var(--space-md);
}
.stat-band-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}
.stat-item {
  padding-top: var(--space-sm);
  border-top: 3px solid var(--color-accent);
}
.stat-item:nth-child(2) {
  border-top-color: var(--color-blue);
}
.stat-item:nth-child(3) {
  border-top-color: var(--color-amber);
}
.stat-item:nth-child(4) {
  border-top-color: var(--color-rose);
}
.stat-figure {
  display: block;
  font-size: clamp(1.9rem, calc(3.2 * var(--fluid)), 2.6rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--color-dark);
  font-variant-numeric: tabular-nums;
}
.stat-label {
  display: block;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--color-text);
  margin-top: 0.375rem;
}
.stat-note {
  display: block;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--color-text-muted);
  margin-top: 0.25rem;
}

@media (max-width: 767px) {
  .stat-band-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md) var(--space-sm);
  }
}

/* ==========================================================================
   FROM retain-international-style.css — blocks base did not have
   Hero stack, text-scroll, tab block, step form, demo hero, integrations and the
   rest of the homepage-family blocks. Nothing above this line was altered.
   ========================================================================== */

.nav-search.as-bar {
  width: auto;
  min-width: 210px;
  height: 2.375rem;
  justify-content: flex-start;
  gap: 0.5rem;
  padding: 0 1rem;
  background: var(--color-white);
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-secondary);
  text-align: left;
}
.nav-search.as-bar svg {
  width: 16px;
  height: 16px;
  stroke: var(--color-secondary);
  stroke-width: 2.25;
  flex: 0 0 auto;
}
.nav-search.as-bar:hover {
  background: var(--color-white);
  border-color: var(--color-dark);
  color: var(--color-dark);
}
.nav-search.as-bar:hover svg {
  stroke: var(--color-dark);
}
.nav-search-text {
  white-space: nowrap;
}
.mega-layout.overview-led > .mega-grid {
  grid-template-columns: 28% 38% minmax(0, 1fr);
  gap: 0;
}
.mega-layout.overview-led .mega-col {
  padding: 0 var(--space-lg);
  border-right: 1px solid var(--color-border);
}
.mega-layout.overview-led .mega-col:first-child {
  padding-left: 0;
}
.mega-layout.overview-led .mega-col:last-child {
  padding-right: 0;
  border-right: none;
}
.mega-layout.overview-led .mega-col-title {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0.625rem;
  letter-spacing: 0.13em;
  font-weight: 600;
}
.mega-overview {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.mega-overview-text {
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.015em;
  color: var(--color-dark);
  margin: 0;
  align-self: stretch;
  max-width: 15em;
  transition: color var(--transition-fast);
}
.mega-overview-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding: 0.5rem 1.25rem;
  border: 1.5px solid var(--color-dark);
  border-radius: var(--profile-radius-pill);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.5;
  background: var(--color-dark);
  color: #fff;
  text-decoration: none;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
}
.mega-overview-cta svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2.25;
  fill: none;
}
/* The button is the only link in the overview now, so it carries its own
   hover; the text beside it is plain copy. */
.mega-overview-cta:hover,
.mega-overview-cta:focus-visible {
  background: var(--color-white);
  color: var(--color-dark);
}
.mega-overview-text + .mega-overview-cta {
  margin-top: var(--space-lg);
}
.mega-link.plain {
  padding: 0.3125rem 0.625rem;
}
.mega-link.plain:hover {
  background: transparent;
}
.mega-link.plain .mega-link-title {
  font-weight: 600;
}
.mega-col-title.spaced {
  margin-top: var(--space-lg);
}
.nav-item.is-anchored {
  position: relative;
}
.mega.auto {
  left: 0;
  right: auto;
  width: max-content;
  max-width: min(720px, calc(100vw - 2 * var(--container-padding)));
}
.mega.auto .mega-grid {
  gap: var(--space-md) var(--space-lg);
}
.mega.auto .mega-col {
  min-width: 0;
}
.hero-stack {
  --hs-tint: var(--color-bg-green);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      62% 58% at 50% 0%,
      rgba(var(--color-accent-rgb), 0.16) 0%,
      rgba(var(--color-accent-rgb), 0) 72%
    ),
    linear-gradient(180deg, var(--hs-tint) 0%, var(--color-white) 62%);
}
.hero-stack.bg-green {
  --hs-tint: var(--color-bg-green);
}
.hero-stack.bg-blue {
  --hs-tint: var(--color-bg-blue);
}
.hero-stack.bg-red {
  --hs-tint: var(--color-bg-rose);
}
.hero-stack.bg-orange {
  --hs-tint: var(--color-bg-amber);
}
.hero-stack.no-arrow .btn-arrow {
  display: none;
}
.hero-stack-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 5rem) clamp(1.5rem, 3vw, 2.5rem);
  text-align: center;
}
.hero-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3125rem 0.875rem 0.3125rem 0.375rem;
  border: 1px solid var(--color-border);
  border-radius: var(--profile-radius-pill);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-dark);
  text-decoration: none;
  transition: var(--profile-hover-transition);
}
.hero-flag:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.hero-flag-badge {
  padding: 0.1875rem 0.5rem;
  border-radius: var(--profile-radius-pill);
  background: var(--color-accent);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.hero-flag svg {
  width: 14px;
  height: 14px;
  stroke: var(--color-secondary);
  stroke-width: 2.25;
  fill: none;
}
.hero-flag:hover svg {
  stroke: var(--color-accent);
}
.hero-stack-title {
  font-size: clamp(2.5rem, calc(5.4 * var(--fluid)), 4.25rem);
  font-weight: 700;
  line-height: 1.09;
  letter-spacing: -0.05em;
  color: var(--color-dark);
  max-width: 24ch;
  margin: var(--space-md) auto var(--space-sm);
}
.hero-stack-title em {
  font-style: normal;
  color: var(--color-accent);
}
.hero-stack-text {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  max-width: 56ch;
  /* margin: 0 auto var(--space-lg); */
}
.hero-stack-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}
/* ---- Hero logos: one row under the video ----
   The parent brand, accreditations and awards from the block's Hero Logos
   repeater, centred beneath the video frame. Height-capped so mixed
   proportions line up; large enough to read without leaning in. */
  .hero-circle-inner .hero-badges {
    justify-content: flex-start;
  gap: clamp(1.5rem, 3.5vw, 2.5rem);
  margin-top: 0;
  
  margin-bottom: clamp(2rem, 4vw, 3rem);
  }
.hero-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 3.5vw, 3.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.hero-badges img {
  display: block;
  width: auto;
  height: clamp(3.5rem, 5.5vw, 5rem);
  max-width: 12rem;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity var(--transition-fast);
}
.hero-badges img:hover {
  opacity: 1;
}
@media (max-width: 767px) {
  .hero-badges {
    gap: var(--space-md) var(--space-lg);
  }
  .hero-badges img {
    height: 3rem;
    max-width: 7.5rem;
  }
}
/* The rating tile inside the hero (the Home Hero block prints .hero-trust
   between the text and the button). No strip ground or padding there — the
   tile sits on the hero's own wash, spaced like the other hero rows. */
.hero-stack .hero-trust {
  background: none;
  padding: 0;
  margin: 0 auto var(--space-lg);
}
.hero-stack .hero-trust-inner {
  padding: 0;
}
.hero-stack-proof {
  margin: var(--space-md) 0 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-secondary);
}
.hero-shots {
  margin-top: clamp(1.5rem, 2.5vw, 2rem);
}
.hero-stack.media-video .hh-dash {
  display: none;
}
.hero-stack.media-video .hh-video {
  display: block;
}
.hero-shots .hh-device::before,
.hero-shots .hh-device::after {
  width: 7.797cqw;
  height: 0.847cqw;
}
.hero-shots .hh-device::before {
  top: 1.017cqw;
}
.hero-shots .hh-device::after {
  bottom: 1.017cqw;
}
.hero-shots .hh-screen {
  border-radius: 1.525cqw;
}
.hero-shots .hh-dash-top {
  grid-template-columns: 15.593cqw 1fr;
  gap: 1.017cqw;
  padding: 1.186cqw;
}
.hero-shots .hh-kpis {
  gap: 0.847cqw;
}
.hero-shots .hh-kpi {
  border-radius: 0.678cqw;
  padding: 0.847cqw 1.017cqw;
}
.hero-shots .hh-kpi b {
  font-size: 2.203cqw;
}
.hero-shots .hh-kpi span {
  font-size: 1.102cqw;
  margin-top: 0.169cqw;
}
.hero-shots .hh-heat {
  border-radius: 0.847cqw;
  padding: 1.017cqw;
}
.hero-shots .hh-heat-bar {
  height: 1.356cqw;
  border-radius: 0.339cqw;
  margin-bottom: 0.847cqw;
}
.hero-shots .hh-heat-grid {
  gap: 0.339cqw;
}
.hero-shots .hh-cell {
  border-radius: 0.169cqw;
}
.hero-shots .hh-chart {
  height: 12.542cqw;
  padding: 1.017cqw 1.356cqw;
}
.hero-shots .hh-chart-head {
  height: 1.186cqw;
  border-radius: 0.339cqw;
  margin-bottom: 0.847cqw;
}
.hero-shots .hh-chart svg {
  height: 7.458cqw;
}
.logo-item img {
  height: 100%;
  width: auto;
  display: block;
}
.text-scroll {
  background: var(--color-white);
  overflow-x: clip;
}
.text-scroll-inner {
  display: grid;
  grid-template-columns: 44% 56%;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
  max-width: var(--profile-container-max);
  margin: 0 auto;
  padding-inline: clamp(1.5rem, 5vw, 5rem);
}
.ts-track {
  padding-bottom: 26vh;
}
.ts-step {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  padding-right: var(--space-lg);
}
.ts-step + .ts-step {
  margin-top: 34vh;
} /* was 50vh — tightens the run of copy */
.ts-eyebrow {
  margin: 0 0 0.625rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.ts-title {
  margin-bottom: var(--space-sm);
}
.ts-title em {
  font-style: normal;
  color: var(--color-accent);
}
.ts-text {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-lg);
}
.ts-step .button-holder {
  margin-top: 0;
}
.ts-visual {
  display: none;
  border-radius: var(--profile-radius-lg);
  padding: clamp(1.25rem, 2.5vw, 2.25rem);
  background: var(--color-light-alt);
}
.ts-visual.tint-green {
  background: var(--color-bg-green);
}
.ts-visual.tint-blue {
  background: var(--color-bg-blue);
}
.ts-visual.tint-amber {
  background: var(--color-bg-amber);
}
.ts-visual.tint-rose {
  background: var(--color-bg-rose);
}
.ts-shot {
  aspect-ratio: 16 / 10;
  border-radius: var(--profile-radius-md);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
}
.ts-shot > * {
  height: 100%;
}
.ts-shot > .tb-app {
  box-shadow: none;
  border-radius: 0;
}
/* Both dimensions are maximums, and both are auto, which is what lets the
     image shrink to fit whichever constraint it hits first while keeping its
     ratio. A tall image now stops at 480px and its width follows; a wide one
     still stops at 85% of the column.

     width had to stop being a fixed 85% for this to work: with a set width and
     max-height, the browser clamps the height and leaves the width alone, which
     squashes the image rather than scaling it. min() keeps the percentage and
     the pixel ceiling in one property, since only one max-width can apply. */
.ts-img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(85%, 1000px);
  max-height: 480px;
  margin: auto;
  border-radius: var(--profile-radius-md);
  background: #fff;
  box-shadow: 0 30px 60px rgba(37, 66, 97, 0.22);
}
.ts-slot {
  width: 85%;
  max-width: 1000px;
  aspect-ratio: 16 / 10;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
  border-radius: var(--profile-radius-md);
  border: 2px dashed rgba(37, 66, 97, 0.25);
  background: rgba(255, 255, 255, 0.55);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-secondary);
}
.ts-list {
  margin: 0 0 var(--space-lg);
  padding-left: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.ts-list li {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}
.ts-list li strong {
  color: var(--color-dark);
  font-weight: 700;
}
.ts-text-lead {
  margin-bottom: var(--space-sm);
}
.ts-sticky {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
}
.ts-panels {
  position: relative;
  width: 100%;
  height: 100vh;
}
.ts-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.ts-panel.is-active {
  opacity: 1;
  pointer-events: auto;
}
.ts-panel > .ts-visual {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: auto;
  width: calc(
    100% + clamp(1.5rem, 5vw, 5rem) + max(0px, (100vw - var(--profile-container-max)) / 2) -
      clamp(1.5rem, 3vw, 3rem)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 3vw, 3rem);
  border-radius: 0;
}
.ts-panel .ts-shot {
  width: 100%;
  max-width: 560px;
}
.tab-block-inner {
  max-width: var(--profile-container-max);
  margin: 0 auto;
  padding-inline: clamp(1.5rem, 5vw, 5rem);
}
.tab-block-tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--color-accent);
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.tab-block-tab.is-active::after {
  opacity: 1;
}
.tab-block-tab:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}
.tab-block .check-list {
  gap: 0.625rem;
}
.benefits-inner {
  max-width: var(--profile-container-max);
  margin: 0 auto;
  padding-inline: clamp(1.5rem, 5vw, 5rem);
}
.benefits.title-centered .benefits-title {
  text-align: center;
  margin-inline: auto;
}
.benefits.title-centered .benefits-lede {
  text-align: center;
  margin-inline: auto;
}
.benefits-item:nth-child(4n + 2) .benefits-item-icon {
  background: var(--color-bg-blue);
}
.benefits-item:nth-child(4n + 2) .benefits-item-icon svg {
  stroke: var(--color-blue);
}
.benefits-item:nth-child(4n + 3) .benefits-item-icon {
  background: var(--color-bg-rose);
}
.benefits-item:nth-child(4n + 3) .benefits-item-icon svg {
  stroke: var(--color-rose);
}
.benefits-item:nth-child(4n + 4) .benefits-item-icon {
  background: var(--color-bg-amber);
}
.benefits-item:nth-child(4n + 4) .benefits-item-icon svg {
  stroke: var(--color-amber);
}
.feature-accordion-inner {
  max-width: var(--profile-container-max);
  margin: 0 auto;
  padding-inline: clamp(1.5rem, 5vw, 5rem);
}
.feature-shot {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--profile-radius-lg);
  padding: 0.5rem;
  box-shadow: 0 24px 48px -28px rgba(20, 34, 52, 0.38);
}
.feature-shot .hh-screen {
  border-radius: calc(var(--profile-radius-lg) - 0.4rem);
}
.fa-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: var(--space-sm);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-accent);
  text-decoration: none;
}
.fa-link svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 2.25;
  fill: none;
  transition: transform var(--transition-fast);
}
.fa-link:hover {
  text-decoration: underline;
}
.fa-link:hover svg {
  transform: translateX(2px);
}
.integrations-inner {
  max-width: var(--profile-container-max);
  margin: 0 auto;
  padding-inline: clamp(1.5rem, 5vw, 5rem);
}
.page-head.bg-green {
  --ph-tint: var(--color-bg-green);
}
.page-head.bg-blue {
  --ph-tint: var(--color-bg-blue);
}
.page-head.bg-red {
  --ph-tint: var(--color-bg-rose);
}
.page-head.bg-orange {
  --ph-tint: var(--color-bg-amber);
}
body.sg-body {
  background: #fbfcfd;
}
.sg-layout {
  display: grid;
  grid-template-columns: 296px 1fr;
}
.sg-nav {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
}
.sg-nav-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  background: var(--color-white);
  border-right: 1px solid var(--color-border);
  overflow: hidden;
}
.sg-nav-head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: var(--space-sm) var(--space-sm) 0.625rem;
  flex: 0 0 auto;
}
.sg-logo-slot {
  width: 100%;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}
.sg-logo-slot img {
  width: 150px;
  height: auto;
  margin: 0 0 var(--space-xs);
}
.sg-logo-slot p {
  padding: 0;
}
.sg-nav-head strong {
  color: var(--color-dark);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.sg-nav-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 0.6875rem 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--color-light) transparent;
}
.sg-nav-scroll::-webkit-scrollbar {
  width: 6px;
}
.sg-nav-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.sg-nav-scroll::-webkit-scrollbar-thumb {
  background: var(--color-light);
  border-radius: var(--profile-radius-pill);
}
.sg-nav-group {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin: 0;
  padding: 0.375rem 0.625rem 0.4375rem;
}
.sg-nav-rule {
  height: 1px;
  background: var(--color-border);
  margin: 1rem 0.625rem 1rem;
}
.sg-nav-rule.top {
  margin: 0.5rem 0.625rem;
}
.sg-nav ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: sgnav;
}
.sg-nav li {
  counter-increment: sgnav;
}
.sg-nav a {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5625rem 0.625rem;
  border-radius: var(--profile-radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  transition: var(--transition-fast);
}
.sg-nav-label {
  flex: 1 1 auto;
  min-width: 0;
}
.sg-nav-numbered a::before {
  content: counter(sgnav, decimal-leading-zero);
  flex: 0 0 auto;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--color-secondary);
  opacity: 0.75;
  transition: var(--transition-fast);
}
.sg-nav-plain li {
  counter-increment: none;
}
.sg-nav-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.75;
  fill: none;
  opacity: 0.4;
  transition: var(--transition-fast);
}
.sg-nav a:hover {
  background: var(--color-light-alt);
  color: var(--color-dark);
}
.sg-nav a:hover .sg-nav-icon {
  opacity: 0.75;
}
.sg-nav a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}
.sg-nav a.is-current {
  background: var(--color-bg-green);
  color: var(--color-dark);
  font-weight: 600;
}
.sg-nav a.is-current .sg-nav-icon {
  opacity: 1;
  stroke: var(--color-accent-dark);
}
.sg-nav-numbered a.is-current::before {
  color: var(--color-accent-dark);
  opacity: 1;
}
.sg-nav a.is-within {
  color: var(--color-dark);
  font-weight: 600;
}
.sg-nav a.is-within .sg-nav-icon,
.sg-nav a.is-within .sg-caret {
  opacity: 1;
}
.sg-caret {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  stroke: var(--color-secondary);
  stroke-width: 2.25;
  fill: none;
  transition: transform var(--transition-base);
}
.sg-has-sub.open .sg-caret {
  transform: rotate(180deg);
}
.sg-subnav {
  list-style: none;
  display: none;
  margin: 0.125rem 0 0.375rem 1.0625rem;
  padding: 0 0 0 0.5rem;
  border-left: 1px solid var(--color-border);
}
.sg-has-sub.open .sg-subnav {
  display: block;
}
.sg-nav .sg-subnav li {
  counter-increment: none;
}
.sg-nav .sg-subnav a {
  padding: 0.375rem 0.5rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}
.sg-nav .sg-subnav a::before {
  content: none;
}
.sg-nav .sg-subnav a:hover {
  color: var(--color-dark);
  background: var(--color-light-alt);
}
.sg-nav .sg-subnav a.is-current {
  background: var(--color-bg-green);
  color: var(--color-dark);
  font-weight: 600;
}
.sg-nav-foot {
  flex: 0 0 auto;
  padding: 0.5rem 0.6875rem var(--space-md);
}
.sg-nav-note {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  background: var(--color-light-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--profile-radius-md);
  padding: 0.6875rem 0.75rem;
}
.sg-nav-note-mark {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-accent);
  display: grid;
  place-items: center;
}
.sg-nav-note-mark svg {
  width: 13px;
  height: 13px;
  stroke: #fff;
  stroke-width: 3;
  fill: none;
}
.sg-nav-note-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sg-nav-note-text strong {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-dark);
  letter-spacing: -0.01em;
}
.sg-nav-note-text > span {
  font-size: 0.72rem;
  color: var(--color-text-muted);
}
.sg-nav-note-text code {
  font-size: 0.68rem;
}
.sg-sub[id] {
  scroll-margin-top: var(--space-lg);
}
.sg-main {
  min-width: 0;
}
.sg-hero {
  padding: var(--space-2xl) clamp(1.5rem, 4vw, 3.5rem);
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}
.sg-hero .sg-eyebrow {
  color: var(--color-accent);
}
.sg-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin: 0 0 0.75rem;
}
.sg-section {
  padding: var(--space-2xl) clamp(1.5rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--color-border);
  scroll-margin-top: 0;
}
.sg-section:nth-of-type(even) {
  background: var(--color-white);
}
.sg-section > h2 {
  margin-bottom: 0.375rem;
}
.sg-lede {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  max-width: 62ch;
  margin: 0 0 var(--space-lg);
}
.sg-sub {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-dark);
  margin: var(--space-xl) 0 var(--space-md);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border);
}
.sg-sub:first-of-type {
  margin-top: 0;
}
.sg-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.sg-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}
.sg-row.tight {
  gap: 0.625rem;
}
.sg-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-md);
}
.sg-cols.wide {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.sg-panel {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--profile-radius-md);
  padding: var(--space-md);
}
.sg-section:nth-of-type(even) .sg-panel {
  background: #fbfcfd;
}
.sg-panel-dark {
  background: var(--color-dark);
  border-radius: var(--profile-radius-md);
  padding: var(--space-md);
}
.sg-panel-accent {
  background: var(--color-accent);
  border-radius: var(--profile-radius-md);
  padding: var(--space-md);
}
.sg-note {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: 0.625rem 0 0;
}
.sg-flag {
  display: flex;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  border-left: 3px solid var(--color-amber);
  background: var(--color-bg-amber);
  border-radius: 0 var(--profile-radius-sm) var(--profile-radius-sm) 0;
  font-size: 0.8125rem;
  color: #7a4c15;
  margin: var(--space-sm) 0 0;
}
.sg-flag strong {
  color: #5f3a0e;
}
code,
.sg-code {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.75rem;
  color: var(--color-dark);
  background: rgba(37, 66, 97, 0.06);
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
}
.on-dark code,
.sg-panel-dark code {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.sg-profile {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--profile-radius-md);
  overflow: hidden;
}
.sg-profile-cell {
  background: var(--color-white);
  padding: 0.875rem 1rem;
}
.sg-profile-key {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin-bottom: 0.25rem;
}
.sg-profile-val {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-dark);
  letter-spacing: -0.01em;
}
.sg-profile-note {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 0.125rem;
}
.sg-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: var(--space-sm);
}
.sg-swatch {
  border-radius: var(--profile-radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: #fff;
}
.sg-swatch-chip {
  height: 92px;
  display: flex;
  align-items: flex-end;
  padding: 0.625rem;
}
.sg-swatch-meta {
  padding: 0.625rem 0.75rem 0.75rem;
}
.sg-swatch-hex {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-dark);
  letter-spacing: -0.01em;
}
.sg-swatch-var {
  display: block;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  color: var(--color-secondary);
  margin-top: 0.1875rem;
  word-break: break-all;
}
.sg-swatch-role {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.sg-gradients {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: var(--space-sm);
}
.sg-gradient {
  height: 118px;
  border-radius: var(--profile-radius-md);
  border: 1px solid var(--color-border);
  position: relative;
}
.sg-gradient span {
  position: absolute;
  bottom: 0.5rem;
  left: 0.625rem;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.6875rem;
  color: var(--color-dark);
  background: rgba(255, 255, 255, 0.85);
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
}
.sg-type-row {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: var(--space-md);
  align-items: baseline;
  padding: var(--space-sm) 0;
  border-bottom: 1px dashed var(--color-border);
}
.sg-type-row:last-child {
  border-bottom: none;
}
.sg-type-spec {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.6875rem;
  line-height: 1.6;
  color: var(--color-secondary);
}
.sg-type-spec b {
  display: block;
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  color: var(--color-dark);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}
.sg-state {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin: 0 0 0.5rem;
}
.on-dark .sg-state,
.sg-panel-dark .sg-state,
.sg-panel-accent .sg-state {
  color: rgba(255, 255, 255, 0.7);
}
.sg-btn-cell {
  min-width: 160px;
}
.sg-space-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.3125rem 0;
}
.sg-space-bar {
  height: 14px;
  background: var(--color-accent);
  border-radius: 3px;
}
.sg-space-label {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.6875rem;
  color: var(--color-secondary);
  white-space: nowrap;
  min-width: 190px;
}
.sg-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-md);
}
.sg-tile {
  height: 94px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: flex-end;
  padding: 0.625rem;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.6875rem;
  color: var(--color-secondary);
}
.sg-tile.shadow {
  border: none;
}
.sg-transition-demo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}
.sg-transition-box {
  padding: 0.75rem 1rem;
  border-radius: var(--profile-radius-sm);
  background: var(--color-bg-green);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-accent-dark);
  cursor: default;
}
.sg-transition-box.t-fast {
  transition: var(--transition-fast);
}
.sg-transition-box.t-base {
  transition: var(--transition-base);
}
.sg-transition-box.t-slow {
  transition: var(--transition-slow);
}
.sg-transition-box.t-smooth {
  transition: var(--transition-smooth);
}
.sg-transition-box:hover {
  background: var(--color-accent);
  color: #fff;
  transform: translateY(-3px);
}
.sg-ph {
  width: 100%;
  height: 100%;
  background:
    linear-gradient(135deg, rgba(37, 66, 97, 0.1) 0%, rgba(54, 178, 112, 0.16) 100%),
    var(--color-light-alt);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sg-ph svg {
  width: 30px;
  height: 30px;
  stroke: var(--color-secondary);
  stroke-width: 1.5;
  fill: none;
  opacity: 0.7;
}
.sg-mock {
  background: var(--color-white);
  border-radius: var(--profile-radius-sm);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.sg-mock-bar {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.625rem;
  border-bottom: 1px solid var(--color-border);
}
.sg-mock-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-light);
}
.sg-mock-title {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-left: 0.25rem;
}
.sg-mock-body {
  padding: 0.625rem;
  display: grid;
  gap: 0.3125rem;
}
.sg-mock-line {
  height: 9px;
  border-radius: 3px;
  background: var(--color-light-alt);
}
.sg-mock-line.accent {
  background: var(--color-bg-green);
}
.sg-mock-line.w70 {
  width: 70%;
}
.sg-mock-line.w45 {
  width: 45%;
}
.sg-transition-stack {
  border-radius: var(--profile-radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.sg-transition-stack > div {
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
}
.sg-nav-demo {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--profile-radius-md);
  background: var(--color-light-alt);
  min-height: 440px;
}
.sg-nav-demo .site-header {
  border-radius: var(--profile-radius-md) var(--profile-radius-md) 0 0;
}
.sg-nav-demo .site-nav {
  padding-inline: var(--space-md);
}
.sg-mega-frame {
  position: relative;
  background: var(--color-light-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--profile-radius-md);
  padding: var(--space-lg);
}
.sg-mega-frame .mega.is-static {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  min-width: 0;
  width: 100%;
  box-shadow: var(--shadow-lg);
}
.sg-mega-frame .mega.is-static.auto {
  width: max-content;
  max-width: 100%;
}
.sg-phones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  align-items: flex-start;
}
.sg-phone {
  width: 340px;
  max-width: 100%;
  border: 10px solid #16273b;
  border-radius: 34px;
  overflow: hidden;
  background: var(--color-white);
  box-shadow: var(--shadow-xl);
}
.sg-phone .site-header {
  border-top: none;
  border-radius: 0;
  position: relative;
}
.sg-phone .site-nav {
  flex-wrap: wrap;
  padding: 0.75rem var(--space-sm);
  max-width: none;
}
.sg-phone .nav-toggle {
  display: inline-flex;
  margin-left: auto;
}
.sg-phone .nav-menu,
.sg-phone .nav-actions {
  display: none;
}
.sg-phone .site-header.nav-open .nav-menu {
  display: flex;
}
.sg-phone .site-header.nav-open .nav-actions {
  display: flex;
}
.sg-phone .nav-menu {
  order: 5;
  width: 100%;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin: var(--space-sm) 0 0;
  max-height: 460px;
  overflow-y: auto;
}
.sg-phone .nav-item {
  width: 100%;
  border-top: 1px solid var(--color-border);
}
.sg-phone .nav-item:first-child {
  border-top: none;
}
.sg-phone .nav-link {
  width: 100%;
  justify-content: space-between;
  border-radius: 0;
  padding: 0.875rem 0.25rem;
  font-size: 1rem;
}
.sg-phone .nav-item.is-open > .nav-link {
  background: transparent;
}
.sg-phone .mega {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  box-shadow: none;
  border: none;
  border-radius: 0;
  padding: 0 0 var(--space-sm);
  display: none;
  min-width: 0;
}
.sg-phone .nav-item.is-open > .mega {
  display: block;
}
.sg-phone .mega-layout,
.sg-phone .mega-layout.has-rail {
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
.sg-phone .mega-grid {
  grid-template-columns: 1fr !important;
  gap: var(--space-md);
}
.sg-phone .mega-list.spread {
  grid-template-columns: 1fr;
}
.sg-phone .mega-rail {
  border-left: none;
  padding-left: 0;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-md);
}
.sg-phone .mega-footer {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}
.sg-phone .mega .hide-in-drawer {
  display: none;
}
.sg-phone .mega.auto {
  width: auto;
  max-width: none;
}
.sg-phone .mega-layout.overview-led > .mega-grid {
  gap: var(--space-md);
}
.sg-phone .mega-layout.overview-led .mega-col {
  padding: 0;
  border-right: none;
}
.sg-phone .mega-layout.overview-led .mega-overview {
  height: auto;
}
.sg-phone .mega-overview-text {
  font-size: 1.0625rem;
  max-width: none;
}
.sg-phone .mega-overview-cta,
.sg-phone .mega-overview-text + .mega-overview-cta {
  margin-top: 0;
}
.sg-phone .mega-col-title.spaced {
  margin-top: var(--space-md);
}
.sg-phone .mega-layout.overview-led .mega-link-desc {
  display: none;
}
.sg-phone .mega-layout.overview-led .mega-link {
  align-items: center;
  padding: 0.4375rem 0.625rem;
  gap: 0.625rem;
}
.sg-phone .mega-layout.overview-led .mega-link-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}
.sg-phone .mega-layout.overview-led .mega-link-icon svg {
  width: 15px;
  height: 15px;
}
.sg-phone .mega-layout.overview-led .mega-col:first-child {
  padding-bottom: 0.25rem;
}
.sg-phone .mega-layout.overview-led .mega-link.plain {
  padding-left: 0;
}
.sg-phone .nav-actions {
  order: 6;
  width: 100%;
  flex-direction: column;
  gap: 0.625rem;
  margin: var(--space-sm) 0 0;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
}
.sg-phone .nav-actions .main-button {
  width: 100%;
  justify-content: center;
}
.sg-phone .nav-actions .nav-search.as-bar {
  width: 100%;
  min-width: 0;
  height: 2.75rem;
}
.sg-phone-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin: 0 0 0.75rem;
  text-align: center;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--color-border);
}
.sg-device-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin: 0 calc(-1 * clamp(1.5rem, 4vw, 3.5rem)) var(--space-md);
  padding: 0 clamp(1.5rem, 4vw, 3.5rem) 0.5rem;
  border-bottom: 2px solid var(--color-border);
}
.sg-blockset {
  margin-bottom: var(--space-md);
}
.sg-blockset .sg-phones {
  margin-top: var(--space-lg);
}
.sg-block-full {
  margin-inline: calc(-1 * clamp(1.5rem, 4vw, 3.5rem));
}
.sg-block-full,
.sg-tablet,
.sg-phone,
.sg-search-frame {
  container-type: inline-size;
  --fluid: 1cqi;
}
.sg-nav-demo .search-overlay {
  position: absolute;
  z-index: 30;
}
.sg-search-frame {
  position: relative;
  min-height: 420px;
  border: 1px solid var(--color-border);
  border-radius: var(--profile-radius-md);
  overflow: hidden;
}
.sg-search-frame .search-overlay {
  position: absolute;
  opacity: 1;
  visibility: visible;
}
.hh-dash {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #eef1f5;
}
.hh-dash-top {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 6px;
  padding: 7px;
  flex: 1;
  min-height: 0;
}
.hh-kpis {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.hh-kpi {
  background: var(--color-blue);
  color: #fff;
  border-radius: 4px;
  padding: 5px 6px;
  line-height: 1;
}
.hh-kpi.alt {
  background: #fff;
  color: var(--color-dark);
  border: 1px solid var(--color-border);
}
.hh-kpi b {
  display: block;
  font-size: 13px;
  letter-spacing: -0.02em;
}
.hh-kpi span {
  display: block;
  font-size: 6.5px;
  font-weight: 600;
  opacity: 0.82;
  margin-top: 1px;
}
.hh-heat {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hh-heat-bar {
  height: 8px;
  background: var(--color-dark);
  border-radius: 2px;
  margin-bottom: 5px;
  opacity: 0.9;
}
.hh-heat-grid {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-auto-rows: 1fr;
  gap: 2px;
  flex: 1;
}
.hh-cell {
  border-radius: 1px;
  background: var(--color-light);
}
.hh-cell.ok {
  background: #74c79b;
}
.hh-cell.warm {
  background: #f0c36d;
}
.hh-cell.hot {
  background: #e1786f;
}
.hh-cell.cool {
  background: #bfd9ee;
}
.hh-chart {
  height: 74px;
  background: #fff;
  border-top: 1px solid var(--color-border);
  padding: 6px 8px;
}
.hh-chart-head {
  height: 7px;
  width: 40%;
  background: var(--color-blue);
  border-radius: 2px;
  margin-bottom: 5px;
}
.hh-chart svg {
  width: 100%;
  height: 44px;
  display: block;
}
.sg-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-xl);
  align-items: center;
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--profile-radius-md);
}
.sg-control {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.sg-control-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-secondary);
}
.sg-swatch-btns {
  display: flex;
  gap: 0.4rem;
}
.sg-cbtn {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--c, var(--color-light));
  cursor: pointer;
  transition:
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}
.sg-cbtn:hover {
  transform: translateY(-1px);
}
.sg-cbtn.is-active {
  box-shadow:
    0 0 0 2px var(--color-white),
    0 0 0 4px var(--color-dark);
}
.sg-cbtn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--color-white),
    0 0 0 4px var(--color-accent);
}
.sg-phone .home-header {
  overflow: hidden;
}
.sg-phone .home-header-inner {
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  padding: var(--space-lg) var(--space-md);
}
.sg-phone .home-header-content {
  max-width: none;
}
.sg-phone .home-header-content h1 {
  font-size: 1.9rem;
  line-height: 1.12;
  margin-bottom: var(--space-sm);
}
.sg-phone .home-header-text {
  font-size: 0.95rem;
  max-width: none;
  margin-bottom: var(--space-md);
}
.sg-phone .home-header .button-holder {
  margin: 0 0 var(--space-lg);
}
.sg-phone .home-header .main-button {
  width: 100%;
  justify-content: center;
}
.sg-phone .home-header-badges {
  gap: 0.4rem;
}
.sg-phone .home-header-badges .trust-badge {
  flex: 1 1 0;
  min-width: 0;
  padding: 0.5rem 0.35rem;
}
.sg-phone .home-header-badges .trust-badge-title {
  font-size: 0.72rem;
}
.sg-phone .hh-device {
  padding: 0.6rem;
  border-radius: 16px;
}
.sg-phone .hh-device::before,
.sg-phone .hh-device::after {
  width: 34px;
  height: 4px;
}
.sg-tablet {
  width: 600px;
  max-width: 100%;
  border: 13px solid #16273b;
  border-radius: 26px;
  overflow: hidden;
  background: var(--color-white);
  box-shadow: var(--shadow-xl);
}
.sg-tablet .home-header {
  overflow: hidden;
}
.sg-tablet .home-header-inner {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-md);
  padding: var(--space-lg);
  align-items: center;
}
.sg-tablet .home-header-content {
  max-width: none;
}
.sg-tablet .home-header-content h1 {
  font-size: 1.7rem;
  line-height: 1.12;
  margin-bottom: 0.5rem;
}
.sg-tablet .home-header-text {
  font-size: 0.8rem;
  max-width: none;
  margin-bottom: var(--space-sm);
}
.sg-tablet .home-header .button-holder {
  margin-bottom: var(--space-md);
}
.sg-tablet .home-header-badges {
  gap: 0.3rem;
}
.sg-tablet .home-header-badges .trust-badge {
  flex: 1 1 0;
  min-width: 0;
  min-height: 56px;
  padding: 0.35rem 0.3rem;
}
.sg-tablet .home-header-badges .trust-badge-title {
  font-size: 0.6rem;
}
.sg-tablet .home-header-badges .trust-badge-top,
.sg-tablet .home-header-badges .trust-badge-sub {
  font-size: 0.46rem;
}
.sg-tablet .hh-device {
  padding: 0.5rem;
  border-radius: 14px;
}
.sg-tablet .hh-device::before,
.sg-tablet .hh-device::after {
  width: 30px;
  height: 4px;
}
.sg-phone .client-logos {
  padding: var(--space-lg) 0;
}
.sg-phone .client-logos-title {
  font-size: 1.02rem;
}
.sg-phone .client-logos-sub {
  font-size: 0.75rem;
}
.sg-phone .client-logos-head {
  margin-bottom: var(--space-lg);
}
.sg-phone .logo-item {
  height: 40px;
}
.sg-phone .logo-name {
  font-size: 1.2rem;
}
.sg-phone .logo-name.serif {
  font-size: 0.92rem;
}
.sg-phone .logo-track {
  gap: 2.75rem;
}
.sg-tablet .client-logos {
  padding: var(--space-xl) 0;
}
.sg-tablet .client-logos-title {
  font-size: 1.3rem;
}
.sg-tablet .client-logos-sub {
  font-size: 0.8rem;
}
.sg-tablet .logo-item {
  height: 52px;
}
.sg-tablet .logo-name {
  font-size: 1.5rem;
}
.sg-tablet .logo-name.serif {
  font-size: 1.1rem;
}
.sg-tablet .logo-track {
  gap: 4rem;
}
.sg-tbtn {
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: var(--profile-radius-pill);
  background: var(--color-white);
  font-family: var(--font-primary);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: var(--transition-fast);
}
.sg-tbtn:hover {
  border-color: var(--color-dark);
  color: var(--color-dark);
}
.sg-tbtn.is-active {
  background: var(--color-dark);
  border-color: var(--color-dark);
  color: #fff;
}
.tb-app {
  background: #fff;
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  padding: 12px;
}
.tb-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-bottom: 7px;
}
.tb-kpi {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 6px 7px;
}
.tb-kpi .lbl {
  font-size: 6.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-secondary);
}
.tb-kpi .val {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-top: 2px;
  color: var(--color-dark);
}
.tb-lower {
  display: grid;
  grid-template-columns: 1fr 82px;
  gap: 6px;
  align-items: start;
}
.tb-table {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
}
.tb-caption {
  font-size: 7px;
  font-weight: 800;
  color: var(--color-dark);
  padding: 5px 6px;
}
.tb-row {
  display: grid;
  grid-template-columns: 1.5fr 30px 30px 40px;
  align-items: center;
  border-top: 1px solid var(--color-border);
}
.tb-row.head {
  background: var(--color-light-alt);
}
.tb-row.head > div {
  font-size: 6px;
  font-weight: 700;
  color: var(--color-secondary);
}
.tb-row > div {
  font-size: 6.5px;
  padding: 3px 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-dark);
}
.tb-row > .num {
  text-align: center;
}
.tb-side {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tb-mini {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 6px;
  text-align: center;
}
.tb-mini .lbl {
  font-size: 6.5px;
  font-weight: 600;
  color: var(--color-secondary);
}
.tb-mini .val {
  font-size: 16px;
  font-weight: 800;
  color: var(--color-dark);
}
.tb-gauge {
  width: 52px;
  height: 52px;
  margin: 3px auto 0;
  border-radius: 50%;
  background: conic-gradient(var(--color-dark) calc(58% * 1), var(--color-light) 0);
  position: relative;
}
.tb-gauge::after {
  content: '58%';
  position: absolute;
  inset: 8px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8.5px;
  font-weight: 800;
  color: var(--color-dark);
}
.sg-tablet .text-block-inner {
  gap: var(--space-lg);
  padding: var(--space-xl) var(--space-lg);
}
.sg-tablet .text-block-content h2 {
  font-size: 1.4rem;
}
.sg-tablet .text-block-text {
  font-size: 0.82rem;
  margin-bottom: var(--space-md);
}
.sg-tablet .text-block-media.framed {
  padding: 0.9rem;
}
.sg-phone .text-block-inner {
  grid-template-columns: 1fr !important;
  gap: var(--space-lg);
  padding: var(--space-lg) var(--space-md);
}
.sg-phone .text-block-content {
  order: 1 !important;
}
.sg-phone .text-block-media {
  order: 2 !important;
}
.sg-phone .text-block-content h2 {
  font-size: 1.5rem;
}
.sg-phone .text-block-text {
  font-size: 0.95rem;
}
.sg-phone .text-block .main-button {
  width: 100%;
  justify-content: center;
}
.sg-phone .text-block-media.framed {
  padding: 0.8rem;
}
.sg-tablet .tab-block {
  padding: var(--space-lg) 0;
}
.sg-tablet .tab-block-inner {
  padding-inline: var(--space-lg);
}
.sg-tablet .tab-block-title {
  font-size: 1.3rem;
  margin-bottom: var(--space-lg);
}
.sg-tablet .tab-block-tabs {
  gap: 0 1rem;
  overflow-x: auto;
  scrollbar-width: none;
  justify-content: flex-start;
}
.sg-tablet .tab-block-tabs::-webkit-scrollbar {
  display: none;
}
.sg-tablet .tab-block-tab {
  font-size: 0.72rem;
  padding: 0.5rem 0.125rem;
}
.sg-tablet .tab-block-cols {
  gap: 1.5rem;
}
.sg-tablet .tab-block-col h4 {
  font-size: 0.85rem;
}
.sg-tablet .tab-block .check-list-item {
  font-size: 0.72rem;
}
.sg-phone .tab-block {
  padding: var(--space-md) 0;
}
.sg-phone .tab-block-inner {
  padding-inline: var(--space-md);
}
.sg-phone .tab-block-title {
  font-size: 1.15rem;
  margin-bottom: var(--space-md);
}
.sg-phone .tab-block-tabs {
  gap: 0 0.875rem;
  overflow-x: auto;
  scrollbar-width: none;
  justify-content: flex-start;
  flex-wrap: nowrap;
}
.sg-phone .tab-block-tabs::-webkit-scrollbar {
  display: none;
}
.sg-phone .tab-block-tab {
  font-size: 0.7rem;
  padding: 0.5rem 0.125rem;
}
.sg-phone .tab-block-cols {
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
.sg-phone .tab-block-col h4 {
  font-size: 0.9rem;
}
.sg-phone .tab-block .check-list-item {
  font-size: 0.8rem;
}
.sg-phone .tab-block-foot {
  flex-direction: column;
  gap: var(--space-sm);
}
.sg-tablet .reviews {
  padding: var(--space-lg) 0;
}
.sg-tablet .reviews-inner {
  padding-inline: var(--space-lg);
}
.sg-tablet .reviews-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}
.sg-tablet .review-card {
  padding: var(--space-md);
}
.sg-tablet .review-title {
  font-size: 0.95rem;
}
.sg-tablet .review-text {
  font-size: 0.8rem;
}
.sg-tablet .review-name {
  font-size: 0.85rem;
}
.sg-tablet .review-role {
  font-size: 0.72rem;
}
.sg-phone .reviews {
  padding: var(--space-md) 0;
}
.sg-phone .reviews-inner {
  padding-inline: var(--space-md);
}
.sg-phone .reviews-grid {
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
.sg-phone .review-card {
  padding: var(--space-md);
}
.sg-phone .review-title {
  font-size: 1rem;
}
.sg-phone .review-text {
  font-size: 0.9rem;
}
.sg-phone .reviews .main-button {
  width: 100%;
  justify-content: center;
}
.sg-tablet .benefits {
  padding: var(--space-lg) 0;
}
.sg-tablet .benefits-inner {
  padding-inline: var(--space-lg);
}
.sg-tablet .benefits-panel {
  padding: var(--space-lg);
}
.sg-tablet .benefits-grid {
  --benefits-cols: 2;
  --benefits-gap-row: var(--space-lg);
  --benefits-gap-col: var(--space-lg);
}
.sg-tablet .benefits-item-title {
  font-size: 0.95rem;
}
.sg-tablet .benefits-item-text {
  font-size: 0.75rem;
}
.sg-tablet .benefits-item-icon svg {
  width: 34px;
  height: 34px;
}
.sg-phone .benefits {
  padding: var(--space-md) 0;
}
.sg-phone .benefits-inner {
  padding-inline: var(--space-md);
}
.sg-phone .benefits-panel {
  padding: var(--space-lg) var(--space-md);
}
.sg-phone .benefits-grid {
  --benefits-cols: 1;
  --benefits-gap-row: var(--space-lg);
  --benefits-gap-col: var(--space-lg);
}
.sg-phone .benefits-item-title {
  font-size: 1.05rem;
}
.sg-phone .benefits-item-text {
  font-size: 0.9rem;
}
.fa-app {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
}
.fa-app-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--color-border);
}
.fa-pill {
  font-size: 6px;
  padding: 2px 6px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.fa-pill.accent {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
  margin-left: auto;
}
.fa-app-body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 98px;
  min-height: 0;
}
.fa-gantt {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-right: 1px solid var(--color-border);
  overflow: hidden;
}
.fa-grow {
  position: relative;
  height: 11px;
  background: var(--color-light-alt);
  border-radius: 2px;
}
.fa-bar {
  position: absolute;
  top: 1px;
  height: 9px;
  border-radius: 2px;
}
.fa-suggest {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: #fff;
}
.fa-suggest-head {
  font-size: 6.5px;
  font-weight: 800;
  color: var(--color-dark);
  margin-bottom: 1px;
}
.fa-person {
  display: flex;
  align-items: center;
  gap: 4px;
}
.fa-ava {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-bg-blue);
  color: var(--color-blue);
  font-size: 6px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fa-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.fa-person .nm {
  font-size: 6px;
  font-weight: 700;
  color: var(--color-dark);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fa-person .av {
  font-size: 5.5px;
  color: var(--color-accent-dark);
}
.sg-tablet .feature-accordion-block {
  padding: var(--space-lg) 0;
}
.sg-tablet .feature-accordion-inner {
  padding-inline: var(--space-lg);
}
.sg-tablet .feature-accordion-title {
  font-size: 1.2rem;
  margin-bottom: var(--space-lg);
}
.sg-tablet .feature-accordion-cols {
  gap: var(--space-md);
}
.sg-tablet .fa-head {
  padding: 0.55rem 0.75rem;
}
.sg-tablet .fa-title {
  font-size: 0.8rem;
}
.sg-tablet .fa-toggle {
  width: 20px;
  height: 20px;
}
.sg-tablet .fa-body-inner {
  padding: 0 0.75rem 0.65rem;
}
.sg-tablet .fa-body p {
  font-size: 0.7rem;
}
.sg-tablet .feature-media .hh-device {
  padding: 0.45rem;
  border-radius: 12px;
}
.sg-phone .feature-accordion-block {
  padding: var(--space-md) 0;
}
.sg-phone .feature-accordion-inner {
  padding-inline: var(--space-md);
}
.sg-phone .feature-accordion-title {
  font-size: 1.15rem;
  margin-bottom: var(--space-md);
}
.sg-phone .feature-accordion-cols {
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
.sg-phone .fa-title {
  font-size: 0.95rem;
}
.sg-phone .fa-body p {
  font-size: 0.88rem;
}
.sg-phone .feature-media .hh-device {
  padding: 0.6rem;
  border-radius: 16px;
}
.sg-tablet .integrations {
  padding: var(--space-lg) 0;
}
.sg-tablet .integrations-inner {
  padding-inline: var(--space-lg);
}
.sg-tablet .integrations-panel {
  padding: var(--space-xl) var(--space-lg);
}
.sg-tablet .integrations-title {
  font-size: 1.4rem;
}
.sg-tablet .integrations-sub {
  font-size: 0.85rem;
  margin-bottom: var(--space-lg);
}
.sg-tablet .integrations-grid {
  gap: var(--space-sm);
}
.sg-tablet .integration-logo {
  min-height: 68px;
  padding: var(--space-sm);
}
.sg-tablet .int-name {
  font-size: 0.9rem;
}
.sg-phone .integrations {
  padding: var(--space-md) 0;
}
.sg-phone .integrations-inner {
  padding-inline: var(--space-md);
}
.sg-phone .integrations-panel {
  padding: var(--space-lg) var(--space-md);
}
.sg-phone .integrations-title {
  font-size: 1.3rem;
}
.sg-phone .integrations-sub {
  font-size: 0.85rem;
}
.sg-phone .integrations-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}
.sg-phone .integration-logo {
  min-height: 64px;
  padding: var(--space-sm);
}
.sg-phone .int-name {
  font-size: 0.85rem;
}
.sg-phone .integrations .main-button {
  width: 100%;
  justify-content: center;
}
.sg-tablet .page-form {
  padding: var(--space-lg) 0;
}
.sg-tablet .page-form-inner {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  padding-inline: var(--space-lg);
}
.sg-tablet .page-form-content h2 {
  font-size: 1.35rem;
}
.sg-tablet .page-form-list li {
  font-size: 0.78rem;
}
.sg-tablet .page-form-highlight {
  font-size: 1rem;
}
.sg-tablet .page-form-card {
  padding: var(--space-lg);
}
.sg-phone .page-form {
  padding: var(--space-md) 0;
}
.sg-phone .page-form-inner {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  padding-inline: var(--space-md);
}
.sg-phone .page-form-content h2 {
  font-size: 1.5rem;
}
.sg-phone .page-form-list li {
  font-size: 0.88rem;
}
.sg-phone .page-form-highlight {
  font-size: 1.1rem;
}
.sg-phone .page-form-card {
  padding: var(--space-md);
}
.sg-phone .page-form .main-button {
  width: 100%;
  justify-content: center;
}
.sg-tablet .faq-block {
  padding: var(--space-lg) 0;
}
.sg-tablet .faq-inner {
  padding-inline: var(--space-lg);
}
.sg-tablet .faq-title {
  font-size: 1.3rem;
  margin-bottom: var(--space-lg);
}
.sg-tablet .faq-block .fa-head {
  padding: 0.8rem 0.9rem;
}
.sg-tablet .faq-block .fa-title {
  font-size: 0.85rem;
}
.sg-tablet .faq-block .fa-body p {
  font-size: 0.75rem;
}
.sg-phone .faq-block {
  padding: var(--space-md) 0;
}
.sg-phone .faq-inner {
  padding-inline: var(--space-md);
}
.sg-phone .faq-title {
  font-size: 1.2rem;
  margin-bottom: var(--space-md);
}
.sg-phone .faq-block .fa-head {
  padding: 0.8rem 0.9rem;
}
.sg-phone .faq-block .fa-title {
  font-size: 0.92rem;
}
.sg-phone .faq-block .fa-body p {
  font-size: 0.85rem;
}
.sg-tablet .site-footer {
  padding: var(--space-lg) 0;
}
.sg-tablet .site-footer-inner {
  padding-inline: var(--space-lg);
  gap: var(--space-lg);
}
.sg-tablet .footer-cols {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  row-gap: var(--space-lg);
}
.sg-tablet .footer-heading {
  font-size: 0.66rem;
}
.sg-tablet .footer-subhead {
  font-size: 0.78rem;
}
.sg-tablet .footer-links a {
  font-size: 0.75rem;
}
.sg-tablet .site-footer-bottom {
  padding-inline: var(--space-lg);
}
.sg-tablet .footer-logo-mark {
  font-size: 1.4rem;
}
.sg-phone .site-footer {
  padding: var(--space-lg) 0;
}
.sg-phone .site-footer-inner {
  flex-direction: column;
  padding-inline: var(--space-md);
  gap: var(--space-lg);
}
.sg-phone .footer-cols {
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
.sg-phone .footer-links a {
  font-size: 0.9rem;
}
.sg-phone .site-footer-bottom {
  padding-inline: var(--space-md);
}
.sg-block-full + .sg-phones {
  margin-top: var(--space-lg);
}
.sg-block-full + .sg-device-label {
  margin-top: var(--space-lg);
}
.sg-tablet .footer-alt,
.sg-phone .footer-alt {
  padding: var(--space-lg) 0 var(--space-md);
}
.sg-tablet .footer-alt .container {
  padding-inline: var(--space-md);
}
.sg-phone .footer-alt .container {
  padding-inline: var(--space-sm);
}
.sg-tablet .footer-alt .footer-top,
.sg-phone .footer-alt .footer-top {
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-md);
  gap: var(--space-md);
}
.sg-tablet .footer-alt .footer-logo img {
  width: 112px;
}
.sg-phone .footer-alt .footer-logo img {
  width: 100px;
}
.sg-tablet .footer-alt .footer-pitch {
  font-size: 0.72rem;
}
.sg-phone .footer-alt .footer-pitch {
  font-size: 0.78rem;
}
.sg-tablet .footer-alt .footer-brand,
.sg-phone .footer-alt .footer-brand {
  gap: var(--space-sm);
}
.sg-tablet .footer-alt .footer-actions,
.sg-phone .footer-alt .footer-actions {
  gap: var(--space-sm);
}
.sg-tablet .footer-alt .footer-social,
.sg-phone .footer-alt .footer-social {
  width: 26px;
  height: 26px;
  border-radius: 6px;
}
.sg-tablet .footer-alt .footer-social svg,
.sg-phone .footer-alt .footer-social svg {
  width: 13px;
  height: 13px;
}
.sg-tablet .footer-alt .footer-groups {
  gap: var(--space-md) var(--space-md);
}
.sg-phone .footer-alt .footer-groups {
  gap: var(--space-md);
}
.sg-tablet .footer-alt .footer-heading {
  font-size: 0.6rem;
  margin-bottom: 0.4rem;
}
.sg-phone .footer-alt .footer-heading {
  font-size: 0.66rem;
  margin-bottom: 0.45rem;
}
.sg-tablet .footer-alt .footer-links {
  gap: 0.3rem;
}
.sg-phone .footer-alt .footer-links {
  gap: 0.35rem;
}
.sg-tablet .footer-alt .footer-links a {
  font-size: 0.7rem;
}
.sg-phone .footer-alt .footer-links a {
  font-size: 0.78rem;
}
.sg-tablet .footer-alt .footer-bar,
.sg-phone .footer-alt .footer-bar {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  gap: 0.4rem var(--space-md);
}
.sg-tablet .footer-alt .footer-copy,
.sg-phone .footer-alt .footer-copy {
  font-size: 0.65rem;
}
.sg-tablet .footer-alt .footer-legal {
  gap: var(--space-sm);
}
.sg-phone .footer-alt .footer-legal {
  gap: 0.6rem;
}
.sg-tablet .footer-alt .footer-legal a,
.sg-phone .footer-alt .footer-legal a {
  font-size: 0.65rem;
}
.sg-tablet .footer-alt .main-button,
.sg-phone .footer-alt .main-button {
  padding: 0.45rem 0.9rem;
  font-size: 0.72rem;
}
.sg-phone .footer-alt .main-button {
  width: 100%;
  justify-content: center;
}
.sg-tablet .page-head-inner,
.sg-phone .page-head-inner {
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  padding: var(--space-lg);
}
.sg-tablet .page-head-content h1 {
  font-size: 1.5rem;
}
.sg-phone .page-head-content h1 {
  font-size: 1.6rem;
}
.sg-tablet .page-head-text,
.sg-phone .page-head-text {
  font-size: 0.85rem;
}
.sg-tablet .text-section-inner,
.sg-phone .text-section-inner {
  padding-inline: var(--space-md);
}
.sg-tablet .text-section-panel,
.sg-phone .text-section-panel {
  padding: var(--space-lg);
}
.sg-tablet .text-section-title {
  font-size: 1.2rem;
}
.sg-phone .text-section-title {
  font-size: 1.15rem;
}
.sg-tablet .text-section-body,
.sg-phone .text-section-body {
  font-size: 0.85rem;
}
.sg-tablet .case-cards,
.sg-phone .case-cards {
  padding: var(--space-lg) 0;
}
.sg-tablet .case-cards-inner,
.sg-phone .case-cards-inner {
  padding-inline: var(--space-md);
}
.sg-tablet .case-cards-grid,
.sg-phone .case-cards-grid {
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
.sg-tablet .case-card,
.sg-phone .case-card {
  min-height: 0;
  padding: var(--space-md);
}
.sg-tablet .case-card-logo,
.sg-phone .case-card-logo {
  min-height: 72px;
  padding: var(--space-md);
}
.sg-tablet .cta-title,
.sg-phone .cta-title {
  font-size: 1.3rem;
}
.sg-tablet .cta-text,
.sg-phone .cta-text {
  font-size: 0.85rem;
}
:has(> .site-header.nav-open) > .announcement-bar {
  display: none;
}
.cta-form-card {
  max-width: 620px;
  margin: 0 auto;
  text-align: left;
  background: var(--color-white);
  border-radius: var(--profile-radius-lg);
  box-shadow: var(--shadow-xl);
  padding: clamp(1.5rem, 3vw, 2rem);
}
.cta-form-progress {
  display: flex;
  gap: 0.375rem;
  margin-bottom: var(--space-sm);
}
.cta-form-bar {
  flex: 1 1 0;
  height: 4px;
  border-radius: 999px;
  background: var(--color-light);
  transition: background var(--transition-base);
}
.cta-form-bar.is-done {
  background: var(--color-accent);
}
.cta-form-step {
  margin: 0 0 var(--space-md) !important;
  max-width: none !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-secondary) !important;
}
.cta-step[hidden] {
  display: none;
}
.cta-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-md);
}
.cta-form-grid .form-field {
  margin-bottom: var(--space-md);
}
.cta-form-grid .form-field:nth-last-child(-n + 2) {
  margin-bottom: 0;
}
.cta-form-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.625rem;
  margin-top: var(--space-md);
}
.cta-form-actions .main-button.outlined {
  margin-right: auto;
}
/* Step 1: the privacy checkbox shares the row with Continue — consent on the
   left, the button on the right, the same line. */
.cta-form-actions .form-checkbox {
  margin-right: auto;
  align-self: center;
  font-size: 0.875rem;
  line-height: 1.45;
  /* max-width: 34ch; */
}
@media (max-width: 519px) {
  .cta-form-actions {
    flex-wrap: wrap;
  }
  .cta-form-actions .form-checkbox {
    flex: 1 1 100%;
    max-width: none;
  }
  .cta-form-actions .main-button {
    flex: 1 1 100%;
    justify-content: center;
  }
}
.cta-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.cta-cal-month {
  margin: 0 !important;
  max-width: none !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--color-dark) !important;
}
.cta-cal-nav {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-dark);
  cursor: pointer;
  transition: var(--transition-fast);
}
.cta-cal-nav:hover {
  border-color: var(--color-dark);
  background: var(--color-light-alt);
}
.cta-cal-nav svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 2.25;
  fill: none;
}
.cta-cal-days,
.cta-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.cta-cal-days {
  margin-bottom: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-secondary);
  text-align: center;
}
.cta-cal-cell {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--profile-radius-sm);
  background: var(--color-light-alt);
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-dark);
  cursor: pointer;
  transition: var(--transition-fast);
}
.cta-cal-cell:hover:not(:disabled) {
  background: var(--color-bg-green);
  border-color: var(--color-accent);
}
.cta-cal-cell.is-empty {
  background: none;
  border: none;
  pointer-events: none;
}
.cta-cal-cell:disabled {
  background: none;
  color: var(--color-border);
  cursor: not-allowed;
}
.cta-cal-cell.is-today {
  border-color: var(--color-secondary);
}
.cta-cal-cell.is-chosen {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
.cta-cal-cell.is-chosen:hover {
  background: var(--color-accent-dark);
}
.cta-times {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}
.cta-times[hidden] {
  display: none;
}
.cta-times-title {
  margin: 0 0 0.625rem !important;
  max-width: none !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: var(--color-dark) !important;
}
.cta-times-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 0.5rem;
}
.cta-time {
  padding: 0.5rem 0.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--profile-radius-pill);
  background: var(--color-white);
  font-family: var(--font-primary);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-dark);
  cursor: pointer;
  transition: var(--transition-fast);
}
.cta-time:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.cta-time.is-chosen {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
.cta-times-note {
  margin: 0.625rem 0 0 !important;
  max-width: none !important;
  font-size: 0.78rem !important;
  color: var(--color-secondary) !important;
}
.cta-form-actions .main-button[disabled] {
  opacity: 0.45;
  pointer-events: none;
}
/* Step 2's way out: a text button under Back / Book a demo, styled as a quiet
   underlined line so it never competes with the green button above it. */
.cta-form-skip-wrap {
  margin: var(--space-sm) 0 0 !important;
  max-width: none !important;
  text-align: center;
}
.cta-form-skip {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0.25rem 0;
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}
.cta-form-skip:hover,
.cta-form-skip:focus-visible {
  color: var(--color-accent-dark);
}
.cta-form-skip:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.cta-form-skip[disabled] {
  opacity: 0.45;
  pointer-events: none;
}
.cta-form-consent {
  margin: var(--space-md) 0 0 !important;
  max-width: none !important;
  font-size: 0.8rem !important;
  line-height: 1.5;
  color: var(--color-secondary) !important;
}
.cta-form-consent a {
  color: var(--color-accent-dark);
  text-decoration: underline;
}
.cta-banner .cta-form-card .main-button.green {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
.cta-banner .cta-form-card .main-button.green:hover {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
}
.cta-banner .cta-form-card .main-button.outlined {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-dark);
}
.cta-banner .cta-form-card .main-button.outlined:hover {
  background: var(--color-light-alt);
  border-color: var(--color-dark);
}
.cta-banner.is-light .cta-banner-inner {
  --cb-tint: var(--color-bg-blue);
  background:
    radial-gradient(
      46% 130% at 102% 58%,
      rgba(var(--color-accent-rgb), 0.16) 0%,
      rgba(var(--color-accent-rgb), 0) 62%
    ),
    linear-gradient(180deg, var(--cb-tint) 0%, var(--cb-tint) 45%, var(--color-white) 100%);
}
.cta-banner.is-light.bg-green .cta-banner-inner {
  --cb-tint: var(--color-bg-green);
}
.cta-banner.is-light.bg-orange .cta-banner-inner {
  --cb-tint: var(--color-bg-amber);
}
.cta-banner.is-light .cta-banner-inner h2 {
  color: var(--color-dark);
}
.cta-banner.is-light .cta-banner-inner p {
  color: var(--color-text-muted);
}
.cta-banner.is-light .cta-form-card {
  border: 1px solid var(--color-border);
  box-shadow: 0 18px 44px -26px rgba(20, 34, 52, 0.3);
}
.cta-banner.is-light > .cta-banner-outer .main-button {
  background: var(--color-dark);
  border-color: var(--color-dark);
  color: #fff;
}
.cta-banner.is-light .cta-form-card .main-button.green {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
.sg-tablet .announcement-bar-inner,
.sg-phone .announcement-bar-inner {
  padding-inline: var(--space-sm);
  gap: var(--space-sm);
  min-height: 40px;
}
.sg-tablet .announcement-bar p,
.sg-phone .announcement-bar p {
  font-size: 0.78rem;
}
.sg-phone .announcement-bar-icon {
  display: none;
}
.sg-tablet .banner-small,
.sg-phone .banner-small {
  padding: var(--space-lg) 0 var(--space-xl);
}
.sg-tablet .banner-small-inner,
.sg-phone .banner-small-inner {
  padding-inline: var(--space-md);
}
.sg-tablet .banner-small h1 {
  font-size: 1.7rem;
  max-width: 85%;
}
.sg-phone .banner-small h1 {
  font-size: 1.5rem;
  max-width: 100%;
}
.sg-tablet .banner-small.alt .banner-small-grid,
.sg-phone .banner-small.alt .banner-small-grid {
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
.sg-tablet .banner-small.alt p,
.sg-phone .banner-small.alt p {
  font-size: 0.85rem;
}
.sg-tablet .campaign-hero-grid,
.sg-phone .campaign-hero-grid {
  grid-template-columns: 1fr;
}
.sg-tablet .campaign-hero-col,
.sg-phone .campaign-hero-col {
  padding: var(--space-lg) var(--space-md);
}
.sg-tablet .campaign-hero h1 {
  font-size: 1.7rem;
}
.sg-phone .campaign-hero h1 {
  font-size: 1.5rem;
}
.sg-tablet .campaign-hero-eyebrow,
.sg-phone .campaign-hero-eyebrow {
  font-size: 0.72rem;
}
.sg-tablet .campaign-hero-body p,
.sg-phone .campaign-hero-body p {
  font-size: 0.85rem;
}
.sg-tablet .campaign-hero-card,
.sg-phone .campaign-hero-card {
  padding: var(--space-md);
  max-width: none;
}
.sg-tablet .campaign-hero-card h2,
.sg-phone .campaign-hero-card h2 {
  font-size: 1rem;
}
.sg-tablet .section-heading,
.sg-phone .section-heading {
  padding: var(--space-lg) 0;
}
.sg-tablet .section-heading-inner,
.sg-phone .section-heading-inner {
  padding-inline: var(--space-md);
}
.sg-tablet .section-heading h2 {
  font-size: 1.4rem;
}
.sg-phone .section-heading h2 {
  font-size: 1.25rem;
}
.sg-tablet .text-full,
.sg-phone .text-full {
  padding: var(--space-lg) 0;
}
.sg-tablet .text-full-inner,
.sg-phone .text-full-inner {
  padding-inline: var(--space-md);
}
.sg-tablet .text-full-body,
.sg-phone .text-full-body {
  max-width: none;
}
.sg-tablet .text-full-body h2 {
  font-size: 1.25rem;
}
.sg-phone .text-full-body h2 {
  font-size: 1.15rem;
}
.sg-tablet .text-full-body p,
.sg-phone .text-full-body p {
  font-size: 0.85rem;
}
.sg-tablet .benefit-boxes,
.sg-phone .benefit-boxes {
  padding: var(--space-md) 0 var(--space-lg);
}
.sg-tablet .benefit-boxes-inner,
.sg-phone .benefit-boxes-inner {
  padding-inline: var(--space-md);
}
.sg-tablet .benefit-boxes-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}
.sg-phone .benefit-boxes-grid {
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
.sg-tablet .benefit-box,
.sg-phone .benefit-box {
  padding-inline: 0;
}
.sg-tablet .benefit-box h3,
.sg-phone .benefit-box h3 {
  font-size: 0.85rem;
}
.sg-tablet .benefit-box p,
.sg-phone .benefit-box p {
  font-size: 0.85rem;
}
.sg-tablet .benefit-box-icon,
.sg-phone .benefit-box-icon {
  width: 36px;
  height: 36px;
}
.sg-tablet .feature-text-image,
.sg-phone .feature-text-image {
  padding: var(--space-md) 0;
}
.sg-tablet .feature-text-image-inner,
.sg-phone .feature-text-image-inner {
  padding-inline: var(--space-md);
}
.sg-tablet .feature-row,
.sg-phone .feature-row {
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.sg-tablet .feature-row.img-pos-right .feature-row-media,
.sg-phone .feature-row.img-pos-right .feature-row-media {
  order: 0;
}
.sg-tablet .feature-row.img-pos-right .feature-row-text,
.sg-phone .feature-row.img-pos-right .feature-row-text {
  order: 0;
}
.sg-tablet .feature-row-eyebrow,
.sg-phone .feature-row-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.25em;
}
.sg-tablet .feature-row-text h3 {
  font-size: 1.35rem;
}
.sg-phone .feature-row-text h3 {
  font-size: 1.25rem;
}
.sg-tablet .feature-row-text p,
.sg-phone .feature-row-text p {
  font-size: 0.85rem;
}
.sg-tablet .latest-buzz,
.sg-phone .latest-buzz {
  padding: var(--space-md) 0;
}
.sg-tablet .latest-buzz-inner,
.sg-phone .latest-buzz-inner {
  padding-inline: var(--space-md);
}
.sg-tablet .latest-buzz-title {
  font-size: 1.4rem;
  margin-bottom: var(--space-md);
}
.sg-phone .latest-buzz-title {
  font-size: 1.25rem;
  margin-bottom: var(--space-md);
}
.sg-tablet .latest-buzz-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}
.sg-phone .latest-buzz-grid {
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
.sg-tablet .article-teaser__title,
.sg-phone .article-teaser__title {
  font-size: 0.92rem;
}
.sg-tablet .article-teaser__text,
.sg-phone .article-teaser__text {
  font-size: 0.8rem;
}
.sg-tablet .article-teaser__middle,
.sg-phone .article-teaser__middle {
  padding: var(--space-sm);
}
.sg-tablet .article-teaser__bottom,
.sg-phone .article-teaser__bottom {
  padding: var(--space-sm);
}
.sg-tablet .cta-banner,
.sg-phone .cta-banner {
  padding: var(--space-lg) 0;
}
.sg-tablet .cta-banner-outer,
.sg-phone .cta-banner-outer {
  padding-inline: var(--space-md);
}
.sg-tablet .cta-banner-inner,
.sg-phone .cta-banner-inner {
  padding: var(--space-lg) var(--space-md);
}
.sg-tablet .cta-banner-inner h2,
.sg-phone .cta-banner-inner h2 {
  font-size: 1.2rem;
  max-width: none;
}
.sg-tablet .cta-banner-inner p,
.sg-phone .cta-banner-inner p {
  font-size: 0.85rem;
  max-width: none;
}
.sg-phone .cta-banner .main-button {
  width: 100%;
  justify-content: center;
}
.sg-tablet .title-subtitle-block,
.sg-phone .title-subtitle-block {
  padding: var(--space-lg) 0;
}
.sg-tablet .title-subtitle-inner,
.sg-phone .title-subtitle-inner {
  padding-inline: var(--space-md);
}
.sg-tablet .title-subtitle-col,
.sg-phone .title-subtitle-col {
  max-width: none;
}
.sg-tablet .title-subtitle-block h2 {
  font-size: 1.35rem;
}
.sg-phone .title-subtitle-block h2 {
  font-size: 1.2rem;
}
.sg-tablet .title-subtitle-block h3,
.sg-phone .title-subtitle-block h3 {
  font-size: 1rem;
}
.sg-tablet .title-subtitle-text p,
.sg-phone .title-subtitle-text p {
  font-size: 0.85rem;
}
.sg-tablet .title-subtitle-media,
.sg-phone .title-subtitle-media {
  max-width: 100%;
}
.sg-tablet .coloured-block,
.sg-phone .coloured-block {
  padding: var(--space-lg) 0;
}
.sg-tablet .title-text-panels,
.sg-phone .title-text-panels {
  padding: var(--space-lg) 0;
}
.sg-tablet .title-text-panels-inner,
.sg-phone .title-text-panels-inner {
  padding-inline: var(--space-md);
}
.sg-tablet .title-text-panels h2 {
  font-size: 1.3rem;
}
.sg-phone .title-text-panels h2 {
  font-size: 1.2rem;
}
.sg-tablet .title-text-panels-sub,
.sg-phone .title-text-panels-sub {
  font-size: 1rem;
  margin-bottom: var(--space-md);
}
.sg-tablet .title-text-panels .panels {
  flex-wrap: wrap;
  row-gap: var(--space-md);
  column-gap: var(--space-md);
}
.sg-phone .title-text-panels .panels {
  flex-direction: column;
  row-gap: var(--space-md);
}
.sg-tablet .title-text-panel {
  flex: 1 1 40%;
  padding: var(--space-md);
}
.sg-phone .title-text-panel {
  flex: 1 1 auto;
  padding: var(--space-md);
}
.sg-tablet .title-text-panel h3,
.sg-phone .title-text-panel h3 {
  font-size: 1rem;
  margin-bottom: var(--space-sm);
}
.sg-tablet .title-text-panel p,
.sg-phone .title-text-panel p {
  font-size: 0.85rem;
  line-height: 1.45;
}
/* .ai-share container removed: it exists only in style.css and no page that
     uses that stylesheet has an Ask-AI block. Appending it wrapped the blog
     single's Ask-AI panel in a grey bordered card that base.css never had. */
.reviews.cards-navy {
  background: var(--color-white);
}
.reviews.cards-navy .review-card {
  background: var(--color-dark);
  border-color: transparent;
  box-shadow: 0 18px 40px -24px rgba(20, 34, 52, 0.55);
}
.reviews.cards-navy .review-card:hover {
  box-shadow: 0 26px 52px -24px rgba(20, 34, 52, 0.65);
}
.reviews.cards-navy .review-title {
  color: #fff;
}
.reviews.cards-navy .review-text {
  color: rgba(255, 255, 255, 0.78);
}
.reviews.cards-navy .review-name {
  color: #fff;
}
.reviews.cards-navy .review-role {
  color: rgba(255, 255, 255, 0.62);
}
.reviews.cards-navy .star {
  fill: rgba(255, 255, 255, 0.22);
}
.reviews.cards-navy .star.filled {
  fill: #f5b301;
}
.review-foot {
  margin-top: auto;
  padding-top: var(--space-md);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.review-foot .review-author {
  margin-top: 0;
  min-width: 0;
}
.review-foot .review-name,
.review-foot .review-role {
  display: block;
}
.review-avatar.is-initials {
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-dark);
}
.review-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: var(--space-md);
}
.review-head .star-rating {
  margin-bottom: 0;
}
.review-logo .cl-name.serif {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.68rem;
}
.review-logo img {
  max-height: 26px;
  width: auto;
  display: block;
}
.reviews.on-navy .review-logo .cl-name,
.reviews.cards-navy .review-logo .cl-name {
  color: #fff;
  opacity: 0.8;
}
.reviews.cards-navy .review-logo img {
  filter: brightness(0) invert(1);
  opacity: 0.85;
}
.integrations.as-carousel {
  padding: clamp(2rem, 4vw, 3rem) 0;
}
.integrations.as-carousel .integrations-panel {
  background: none;
  border-radius: 0;
  padding: 0;
}
.integrations.as-carousel .integrations-head {
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.integrations.as-carousel .integrations-title {
  font-size: clamp(1.4rem, calc(2.4 * var(--fluid)), 1.95rem);
  max-width: 24ch;
  margin-inline: auto;
}
.integrations.as-carousel .integrations-sub {
  font-size: 0.95rem;
}
.integrations.as-carousel .integrations-rail {
  background: none;
  box-shadow: none;
  padding: 0;
}
.integrations.as-carousel .logo-track {
  gap: clamp(3rem, 6vw, 5.5rem);
  /* A fallback only. The block sets data-speed and js/main.js works the real
     duration out from the track's width (about 150s for 19 logos), so the
     pace no longer depends on how many logos are in the rail. */
  animation-duration: 120s;
}
.integrations.as-carousel .logo-item:hover {
  opacity: 1;
}
.integrations.as-carousel .int-name {
  font-size: 1.3rem;
}
.integrations.as-carousel .integrations-body {
  max-width: none;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.integrations.as-carousel .integrations-body .button-holder {
  margin-top: 0;
}
.page-form-faq {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}
.page-form-faq-title {
  margin: 0 0 var(--space-sm);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-secondary);
}
.page-form-faq dl {
  margin: 0;
}
.page-form-faq dt {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-top: var(--space-sm);
}
.page-form-faq dt:first-child {
  margin-top: 0;
}
.page-form-faq dd {
  margin: 0.125rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}
.page-form-card .form-checkbox {
  margin-top: 0.25rem;
}
.banner-small-eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
.banner-small.is-light {
  --bs-tint: var(--color-bg-blue);
  background-color: transparent;
  background-image:
    radial-gradient(
      46% 130% at 102% 58%,
      rgba(var(--color-accent-rgb), 0.15) 0%,
      rgba(var(--color-accent-rgb), 0) 62%
    ),
    linear-gradient(180deg, var(--bs-tint) 0%, var(--bs-tint) 45%, var(--color-white) 100%);
  padding: clamp(2.25rem, 4.5vw, 3.25rem) 0;
}
.banner-small.is-light.bg-green {
  --bs-tint: var(--color-bg-green);
}
.banner-small.is-light.bg-red {
  --bs-tint: var(--color-bg-rose);
}
.banner-small.is-light.bg-orange {
  --bs-tint: var(--color-bg-amber);
}
.banner-small.is-light::before {
  content: none;
}
.banner-small.is-light h1 {
  color: var(--color-dark);
}
.banner-small.is-light p {
  color: var(--color-text-muted);
}
.banner-small.is-light .banner-small-eyebrow {
  color: var(--color-accent);
}
.banner-small.is-light .banner-small-stat {
  color: var(--color-secondary);
}
.banner-small.is-light .banner-small-stat b {
  color: var(--color-dark);
}
.banner-small.no-image .banner-small-grid {
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
}
.banner-small-aside {
  display: flex;
  gap: clamp(1.5rem, 4vw, 3rem);
  justify-content: flex-end;
}
.banner-small-stat {
  display: flex;
  flex-direction: column;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.68);
}
.banner-small-stat b {
  color: #fff;
  font-size: clamp(1.6rem, calc(2.6 * var(--fluid)), 2.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.banner-small.with-image {
  padding: clamp(2.5rem, 5vw, 3.75rem) 0;
}
.page-head.text-only .page-head-content h1 {
  max-width: 18ch;
  margin-inline: auto;
}
.page-head.banner .page-head-inner {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  padding-block: clamp(2.25rem, 4.5vw, 3.5rem);
}
.page-head.banner .page-head-photo {
  aspect-ratio: 16 / 10;
}
.page-head.banner.no-image .page-head-content h1 {
  max-width: 20ch;
}
.page-head.banner.no-image .page-head-text {
  max-width: 62ch;
}
.demo-hero {
  background: var(--gradient-card-green);
  padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(3rem, 6vw, 4.5rem);
}
.demo-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  max-width: var(--profile-container-max);
  margin: 0 auto;
  padding-inline: clamp(1.5rem, 5vw, 5rem);
}
.demo-hero h1 {
  margin: 0 0 var(--space-md);
}
.demo-hero-lede {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-lg);
  max-width: 46ch;
}
.demo-hero-covered {
  margin-top: var(--space-lg);
}
.demo-hero-covered-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin: 0 0 var(--space-sm);
}
.demo-hero-proof {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.demo-hero .cta-form-card {
  background: var(--color-white);
  border-radius: var(--profile-radius-lg);
  box-shadow: var(--shadow-xl);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  position: sticky;
  top: var(--space-lg);
}
.demo-faq,
.faq-block {
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
  background: var(--color-light-alt);
}
.demo-faq-inner,
.faq-block-inner {
  max-width: 52rem;
  margin: 0 auto;
  padding-inline: clamp(1.5rem, 5vw, 5rem);
}
.demo-faq-title,
.faq-block-title {
  text-align: center;
  margin: 0 0 var(--space-xl);
}
.benefits-lede {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 991px;
  margin: 0 auto;
  margin-bottom: var(--space-lg);
}
.archive-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(
      62% 58% at 50% 0%,
      rgba(var(--color-accent-rgb), 0.16) 0%,
      rgba(var(--color-accent-rgb), 0) 72%
    ),
    linear-gradient(180deg, var(--hs-tint) 0%, var(--color-white) 100%);
}
.archive-hero.bg-blue {
  --hs-tint: var(--color-bg-blue);
}
.archive-hero.bg-rose {
  --hs-tint: var(--color-bg-rose);
}
.archive-hero.bg-amber {
  --hs-tint: var(--color-bg-amber);
}
.archive-hero .badge {
  margin-bottom: var(--space-md);
}
.archive-hero .hero-stack-actions {
  justify-content: flex-start;
}
.parent-brand {
  background: var(--color-white);
  padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.5rem, 5vw, 5rem) 0;
  display: flex;
  justify-content: center;
}
.parent-brand a {
  display: block;
  line-height: 0;
}
.parent-brand img {
  width: 155px;
  height: auto;
  display: block;
  opacity: 0.72;
  transition: opacity var(--transition-fast);
}
.parent-brand a:hover img {
  opacity: 1;
}

@container (max-width: 767px) {
  .hero-stack-inner {
    text-align: left;
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }
  .hero-flag,
  .hero-stack-title,
  .hero-stack-text,
  .hero-stack-actions,
  .hero-stack-proof {
    padding-inline: 0.5rem;
  }
  .hero-flag {
    border-radius: 12px;
    padding: 0.4375rem 0.6875rem;
    font-size: 0.8rem;
    text-align: left;
  }
  .hero-flag svg {
    display: none;
  }
  .hero-stack-title,
  .hero-stack-text {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
  .hero-stack-title {
    font-size: clamp(1.75rem, calc(7.5 * var(--fluid)), 2.375rem);
  }
  .hero-stack-actions {
    justify-content: stretch;
  }
  .hero-stack-actions .main-button {
    flex: 1 1 100%;
    justify-content: center;
  }
}

@container (max-width: 991px) {
  .text-scroll-inner {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .ts-sticky {
    display: none;
  }
  .ts-track {
    padding-bottom: 0;
  }
  .ts-step {
    min-height: 0;
    padding: var(--space-xl) 0;
    padding-right: 0;
    border-top: 1px solid var(--color-border);
  }
  .ts-step + .ts-step {
    margin-top: 0;
  }
  .ts-step:first-child {
    border-top: none;
  }
  .ts-visual {
    display: block;
    margin-top: var(--space-md);
  }
}

@media (max-width: 560px) {
  .cta-form-grid {
    grid-template-columns: 1fr;
  }
  .cta-form-grid .form-field,
  .cta-form-grid .form-field:nth-last-child(-n + 2) {
    margin-bottom: var(--space-md);
  }
  .cta-form-actions {
    flex-direction: column-reverse;
  }
  .cta-form-actions .main-button {
    justify-content: center;
    margin-right: 0;
  }
  .cta-banner-fields {
    flex-direction: column;
  }
  .cta-banner-fields .text-field {
    flex: 0 0 auto;
  }
  .cta-banner-fields .main-button {
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .hero-stack-inner {
    text-align: left;
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }
  .hero-flag,
  .hero-stack-title,
  .hero-stack-text,
  .hero-stack-actions,
  .hero-stack-proof {
    padding-inline: 0.5rem;
  }
  .hero-flag {
    border-radius: 12px;
    padding: 0.4375rem 0.6875rem;
    font-size: 0.8rem;
    text-align: left;
  }
  .hero-flag svg {
    display: none;
  }
  .hero-stack-title,
  .hero-stack-text {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
  .hero-stack-title {
    font-size: clamp(1.75rem, calc(7.5 * var(--fluid)), 2.375rem);
  }
  .hero-stack-actions {
    justify-content: stretch;
  }
  .hero-stack-actions .main-button {
    flex: 1 1 100%;
    justify-content: center;
  }
  .client-logos-head {
    margin-bottom: var(--space-lg);
  }
  .logo-name.serif {
    font-size: 1rem;
  }
  .logo-name .lm {
    width: 22px;
    height: 22px;
  }
  .tab-block-tabs::-webkit-scrollbar {
    display: none;
  }
  .banner-small-aside {
    justify-content: flex-start;
    margin-top: var(--space-md);
  }
  .parent-brand img {
    width: 130px;
  }
}

@media (max-width: 900px) {
  .sg-layout {
    grid-template-columns: 1fr;
  }
  .sg-nav {
    position: relative;
    height: auto;
    padding: var(--space-md);
  }
  .sg-nav-scroll {
    overflow: visible;
  }
  .sg-nav-numbered,
  .sg-nav-plain {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 2px;
  }
  .sg-nav-numbered > li,
  .sg-nav-plain > li {
    min-width: 0;
  }
  .sg-nav-plain > li.sg-has-sub {
    grid-column: 1 / -1;
  }
  .sg-type-row {
    grid-template-columns: 1fr;
    gap: 0.375rem;
  }
}

@media (max-width: 991px) {
  .mega.auto {
    width: auto;
    max-width: none;
  }
  .mega .hide-in-drawer {
    display: none;
  }
  .mega-layout.overview-led > .mega-grid {
    gap: var(--space-md);
  }
  .mega-layout.overview-led .mega-col {
    padding: 0;
    border-right: none;
  }
  .mega-layout.overview-led .mega-overview {
    height: auto;
  }
  .mega-overview-text {
    font-size: 1.0625rem;
    max-width: none;
  }
  .mega-overview-cta,
  .mega-overview-text + .mega-overview-cta {
    margin-top: 0;
  }
  .mega-col-title.spaced {
    margin-top: var(--space-md);
  }
  .mega-layout.overview-led .mega-link-desc {
    display: none;
  }
  .mega-layout.overview-led .mega-link {
    align-items: center;
    padding: 0.4375rem 0.625rem;
    gap: 0.625rem;
  }
  .mega-layout.overview-led .mega-link-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }
  .mega-layout.overview-led .mega-link-icon svg {
    width: 15px;
    height: 15px;
  }
  .mega-layout.overview-led .mega-col:first-child {
    padding-bottom: 0.25rem;
  }
  .mega-layout.overview-led .mega-link.plain {
    padding-left: 0;
  }
  .nav-actions .nav-search.as-bar {
    width: 100%;
    min-width: 0;
    height: 2.75rem;
  }
  .text-scroll-inner {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .ts-sticky {
    display: none;
  }
  .ts-track {
    padding-bottom: 0;
  }
  .ts-step {
    min-height: 0;
    padding: var(--space-xl) 0;
    padding-right: 0;
    border-top: 1px solid var(--color-border);
  }
  .ts-step + .ts-step {
    margin-top: 0;
  }
  .ts-step:first-child {
    border-top: none;
  }
  .ts-visual {
    display: block;
    margin-top: var(--space-md);
  }
  .demo-hero-inner {
    grid-template-columns: 1fr;
  }
  .demo-hero .cta-form-card {
    position: static;
  }
}

@media (min-width: 1280px) {
  /* max-width, not width — a fixed width here would override the width:auto
     that keeps the 480px height cap from distorting the image. */
  .ts-img {
    max-width: min(88%, 1000px);
  }
  .ts-slot {
    width: 88%;
  }
}

@media (min-width: 1600px) {
  .ts-img {
    max-width: min(90%, 1100px);
  }
  .ts-slot {
    width: 90%;
    max-width: 1100px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ts-step,
  .ts-panel {
    transition: none;
  }
}
/* ==========================================================================
   FROM retain-international-style.css — homepage-family overrides
   Same selectors as above but the newer homepage treatment. Article-family rules
   are deliberately NOT overridden: base.css keeps benefits, client logos, tab
   block, reviews, page-head and footer at their style.css values.
   ========================================================================== */

.nav-logo img {
  width: 100px;
  height: auto;
  display: block;
}
.home-header-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.88fr);
  align-items: center;
  gap: clamp(2rem, 2.5vw, 5rem);
  padding: clamp(2rem, 4vw, 3.75rem) clamp(1.5rem, 5vw, 5rem);
}
.home-header-content h1 {
  font-size: clamp(2.125rem, calc(4.1 * var(--fluid)), 3.25rem);
  line-height: 1.14;
  letter-spacing: -0.025em;
  max-width: 22ch;
  margin-bottom: var(--space-sm);
}
.home-header-text {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  max-width: 46ch;
  margin: 0 0 var(--space-md);
}
.home-header .button-holder {
  margin-top: 0;
  margin-bottom: var(--space-lg);
}
.hh-device {
  position: relative;
  z-index: 2;
  border-radius: 22px;
  box-shadow: var(--shadow-xl);
}
.hh-video {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.client-logos {
  padding: clamp(2.75rem, 5vw, 4.25rem) 0;
  background: var(--color-white);
  text-align: center;
  overflow: hidden;
}
.client-logos-head {
  padding-inline: clamp(1.5rem, 4vw, 3rem);
  margin-bottom: clamp(2rem, 4.5vw, 3rem);
}
/* Reduced from clamp(1.9rem, 3.4vw, 2.9rem) — 30px to 46px. This is a lead-in
     line above a logo rail, not a section heading, and at that size it competed
     with the real headings either side of it.

     The clamp scales all the way down now, which also fixes a second problem:
     being later in the file this rule beat the 1.2rem mobile size at line 1739,
     so the title was running at 30px on a phone. */
.client-logos-title {
  font-size: clamp(1.15rem, calc(2 * var(--fluid)), 1.6rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--color-dark);
  margin: 0 0 0.6rem;
}
.client-logos-sub {
  font-size: 0.9rem;
  color: var(--color-secondary);
  margin: 0;
}
.logo-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: clamp(3.25rem, 7vw, 6rem);
  animation: logo-scroll 42s linear infinite;
}
.logo-item {
  flex: 0 0 auto;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-dark);
  opacity: 0.62;
  filter: grayscale(1);
  transition:
    opacity var(--transition-base),
    filter var(--transition-base);
}
/* Single templates (products, features, industry, role) wrap the rail in
     .client-logos and want the logos in full colour at all times, not the
     greyscale-until-hover treatment the block uses elsewhere. */
.client-logos .logo-item,
.client-logos .logo-item:hover {
  opacity: 1;
  filter: none;
}
.logo-name {
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.logo-name.serif {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 1.35rem;
}
.logo-name .lm {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
}
/* display and grid-template-columns dropped: they repeated the values already
     set at line 1760, and being later in the file they beat the 767px collapse
     at line 1828 — so the Text block and the Feature Block image rows stayed
     50/50 on a phone. Alignment, gap and padding genuinely differ, so they stay. */
.text-block-inner {
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  padding: clamp(2.5rem, 6vw, 5.5rem) clamp(1.5rem, 5vw, 5rem);
}
.tab-block {
  background: var(--color-white);
  padding: clamp(2.25rem, 4.5vw, 3.5rem) 0;
}
.tab-block-title {
  text-align: center;
  color: var(--color-accent);
  font-size: clamp(1.9rem, calc(3.4 * var(--fluid)), 2.9rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.035em;
  margin: 0 0 var(--space-md);
}
.tab-block-tabs {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0 clamp(1.25rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-lg);
}
.tab-block-tab {
  position: relative;
  border: none;
  background: none;
  padding: 0.75rem 0.125rem;
  margin-bottom: -1px;
  font-family: var(--font-primary);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text-muted);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--transition-fast);
}
.tab-block-tab:hover {
  color: var(--color-dark);
}
.tab-block-tab.is-active {
  color: var(--color-dark);
  font-weight: 700;
}
.tab-block-body {
  border-radius: var(--profile-radius-lg);
  background: linear-gradient(120deg, #eaf7f0 0%, #cfeedf 100%);
  padding: clamp(1.25rem, 2.5vw, 2rem);
}
/* Gap only. display and grid-template-columns were re-declared here with the
     same values they already have at line 1872, and because a media query
     carries no specificity of its own that later copy beat the 767px collapse
     above it — so the two columns stayed 50/50 all the way down to a phone. */
.tab-block-cols {
  gap: clamp(1.5rem, 3.5vw, 2.75rem);
}
.tab-block-col h4 {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin: 0 0 0.75rem;
}
.tab-block-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.benefits {
  background: var(--color-white);
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}
.benefits-title {
  text-align: center;
  margin: 0 0 var(--space-lg);
}
.benefits-panel {
  background: none;
  border-radius: 0;
  padding: 0;
}
/* The homepage gaps, kept. display and grid-template-columns are gone: the
     grid is a flex row now, and re-declaring display: grid here would undo it
     and take the item-count rules with it. */
.benefits-grid {
  --benefits-gap-row: clamp(1.75rem, 3vw, 2.5rem);
  --benefits-gap-col: clamp(1.5rem, 3vw, 2.5rem);
}
.benefits-item {
  text-align: left;
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--color-border);
  padding-top: var(--space-md);
}
.benefits-item-icon {
  width: 44px;
  height: 44px;
  margin: 0 0 var(--space-md);
  border-radius: 12px;
  background: var(--color-bg-green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.benefits-item-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--color-accent);
  stroke-width: 2;
  fill: none;
}
.benefits-item-title {
  color: var(--color-dark);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 0.375rem;
}
.benefits-item-text {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
  max-width: none;
}
/* .page-form-inner was re-declared here with exactly the values it already
     has further up the file. Media queries carry no specificity of their own,
     so this later copy beat the stacking rules at line 2168 and the block stayed
     two columns at every width. Removed — the rule at 2126 is identical. */
.footer-icons {
  display: flex;
  gap: 10px;
}
.site-footer {
  background: var(--color-dark);
  color: #fff;
  padding: clamp(2.5rem, 5vw, 4rem) 20px var(--space-xl);
}
.site-footer-inner {
  max-width: var(--profile-container-max);
  margin: 0 auto;
  padding-inline: clamp(1.5rem, 5vw, 5rem);
  display: flex;
  gap: clamp(2rem, 4vw, 4rem);
}
.footer-social-col {
  display: flex;
  gap: 0.625rem;
  flex-shrink: 0;
}
.page-head {
  --ph-tint: var(--color-bg-blue);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      46% 130% at 102% 58%,
      rgba(var(--color-accent-rgb), 0.15) 0%,
      rgba(var(--color-accent-rgb), 0) 62%
    ),
    linear-gradient(180deg, var(--ph-tint) 0%, var(--ph-tint) 45%, var(--color-white) 100%);
}
.page-head-content h1 {
  font-size: clamp(2rem, calc(3.6 * var(--fluid)), 2.9rem);
}
.cta-banner-inner {
  padding: clamp(5rem, 10vw, 7.5rem) clamp(1.25rem, 4vw, 3rem);
  border-radius: var(--profile-radius-md);
  text-align: center;
  background: var(--color-dark);
}
.benefits.compact .benefits-item {
  text-align: left;
  display: block;
  position: relative;
  padding-left: calc(36px + var(--space-md));
}
.benefits.compact .benefits-item-icon {
  position: absolute;
  left: 0;
  top: var(--space-md);
  width: 36px;
  height: 36px;
  margin: 0;
}
.review-avatar {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.14);
}
.review-logo {
  margin-left: auto;
  padding-left: 0.5rem;
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
}
.review-logo .cl-name {
  overflow: hidden;
  text-overflow: ellipsis;
}
.integrations.as-carousel .logo-item {
  opacity: 0.92;
  filter: none;
}
.page-head.text-only .page-head-inner {
  grid-template-columns: minmax(0, 1fr);
  text-align: center;
  max-width: 780px;
  padding-block: clamp(2.25rem, 4.5vw, 3.5rem);
}
.page-head.text-only .page-head-text {
  margin-inline: auto;
  max-width: 60ch;
}
.page-head.banner.no-image .page-head-inner {
  grid-template-columns: minmax(0, 1fr);
  max-width: 1000px;
}
.feature-media.soft .hh-device {
  background: var(--color-light-alt);
  padding: 0.75rem;
  box-shadow: var(--shadow-card);
}
.archive-hero {
  position: relative;
  --hs-tint: var(--color-bg-green);
  padding: clamp(1.5rem, 3vw, 2.25rem) 0 clamp(2.5rem, 5vw, 3.75rem);
}

@media (max-width: 767px) {
  .client-logos-sub {
    font-size: 0.8rem;
  }
  .logo-item {
    height: 44px;
  }
  .logo-name {
    font-size: 1.3rem;
  }
  .tab-block-tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 0 1.25rem;
  }
  .tab-block-tab {
    font-size: 0.875rem;
  }
}

@media (max-width: 991px) {
  .tab-block-tabs {
    gap: 0 clamp(1rem, 2.5vw, 1.75rem);
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .home-header-inner {
    gap: var(--space-lg);
    padding: var(--space-xl) var(--space-lg);
  }
}

/* --------------------------------------------------------------------------
   Hand-resolved: .archive-hero paints its own wash for the product and service
   pages, which have no page-level wrapper. The archive pages do have one, so
   suppress the hero's copy there instead of stacking two gradients.
   -------------------------------------------------------------------------- */
.blog-archive .archive-hero::after,
.resource-archive .archive-hero::after {
  content: none;
}

/* Sticky sidebar: state align-self explicitly so a theme overriding the
   parent's align-items cannot flatten the grid item and kill the stick. */
.article-sidebar {
  align-self: start;
}
.toc-list li.is-current > a {
  color: var(--color-dark);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Merge correction — hero device frame
   base.css and style.css both define .hh-device, and style.css wins. But the
   merge appends the winner rather than replacing the loser, so any property
   base declares and style does not survives underneath. For .hh-device that is
   background: #17191d and padding: 1.15rem, which put a dark padded bezel round
   the home hero shot that the v2 homepage does not have. Same for .hh-video's
   background.

   Reset rather than delete: the older templates (homepage.html, enterprise,
   industry-accounting) still use .hh-device and want base's dark frame, so the
   correction is scoped to .hero-shots, which only the v2 hero uses.
   -------------------------------------------------------------------------- */
.hero-shots .hh-device {
  background: none;
  padding: 0;
}
.hero-shots .hh-video {
  background: transparent;
}

/* --------------------------------------------------------------------------
   Logo carousel — full-colour variant
   Logos are greyed back to 55% by default so they sit behind the heading, and
   come forward on hover. This class turns that off for carousels where the
   logos are the point.
   -------------------------------------------------------------------------- */
.client-logos.logos-colour .logo-item {
  opacity: 1;
  filter: none;
}

/* Intro line under an FAQ block's heading — the demo page had no such line, so
   this is the only rule the reusable block needs beyond the aliases above. */
.faq-block-text {
  text-align: center;
  max-width: 46rem;
  margin: calc(var(--space-xl) * -1 + var(--space-sm)) auto var(--space-xl);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* ==========================================================================
   BLOCK — accreditations
   A centred row of certification logos, driven by the site-wide Accreds Logos
   repeater. Sized like .logo-item so accreditation marks sit at the same
   optical weight as client logos, but static rather than scrolling and at full
   contrast — a compliance mark greyed back reads as decoration.
   ========================================================================== */
.accreditations {
  background: var(--color-white);
  padding: clamp(2rem, 4vw, 3rem) 0;
}
.accreditations-inner {
  max-width: var(--profile-container-max);
  margin: 0 auto;
  padding-inline: clamp(1.5rem, 5vw, 5rem);
}
.accreditations-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.accreditations-item {
  flex: 0 0 auto;
  height: 56px;
  display: flex;
  align-items: center;
}
.accreditations-item img {
  height: 100%;
  width: auto;
  display: block;
}

@media (max-width: 767px) {
  .accreditations-item {
    height: 40px;
  }
  .accreditations-row {
    gap: var(--space-lg);
  }
}

/* --------------------------------------------------------------------------
   Benefits — icon as an uploaded image
   The block was drawn with inline SVG, so the only sizing rule was for <svg>.
   Icons now come from the media library, and an <img> with no rule renders at
   its natural size and bursts the 44px tile. Matched to the svg sizing.
   -------------------------------------------------------------------------- */
.benefits-item-icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}
.benefits.compact .benefits-item-icon img {
  width: 20px;
  height: 20px;
}

/* Intro line under a related/recent-posts heading. .related-head is a
   space-between row, so the heading and this line share a wrapper on the left
   and the "all articles" link stays right. */
.related-head-text {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 0.35rem 0 0;
  max-width: 60ch;
}

/* Reviews block — .review-logo keeps margin-top:auto, padding-top and min-height
   from the losing side of the merge (line 2790). Inside .review-head that pushes
   the logo to the bottom of the row and pads it away from the stars. */
.review-head .review-logo {
  margin-top: 0;
  padding-top: 0;
  min-height: 0;
}

/* Tabbed content — .tab-block-tab.is-active kept the green pill background from
   the losing side of the merge (line 1780). The current design is underline
   tabs, whose .is-active rule (line 4061) only sets colour and weight, so the
   pill survived and sat behind the active label. */
.tab-block-tab.is-active {
  background: none;
  border-color: transparent;
}
.tab-block-tab {
  display: inline-block;
  border-radius: 0;
}

/* Text Full Width — the block's wysiwyg has the full toolbar, but .text-full-body
   only styled h2 and p, so lists, links, subheadings and quotes rendered at
   browser defaults. Borrowed from .article-body so the two prose treatments read
   the same. */
.text-full-body h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-dark);
  margin: var(--space-lg) 0 var(--space-xs);
}
.text-full-body ul,
.text-full-body ol {
  margin: 0 0 var(--space-sm);
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.text-full-body li {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}
.text-full-body a:not(.main-button) {
  color: var(--color-accent-dark);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.text-full-body a:not(.main-button):hover {
  color: var(--color-dark);
}
.text-full-body strong {
  color: var(--color-dark);
  font-weight: 700;
}
.text-full-body blockquote {
  margin: var(--space-md) 0;
  padding-left: var(--space-md);
  border-left: 3px solid var(--color-bg-green);
  color: var(--color-text);
  font-style: normal;
}
.text-full-body blockquote p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   BLOCK — page_form: wysiwyg copy + Gravity Forms bridge
   ========================================================================== */

/* Only one side filled — don't leave half the row empty. */
.page-form.single-column .page-form-inner {
  grid-template-columns: minmax(0, 1fr);
  max-width: 820px;
}

/* The left column is one wysiwyg now, so the static's .page-form-subhead,
   .page-form-list and .page-form-highlight classes never get written. These
   give the plain h3/ol/ul an editor produces the same treatment. */
.page-form-content h3 {
  color: var(--color-accent);
  font-weight: 700;
  font-size: 1rem;
  margin: var(--space-lg) 0 var(--space-sm);
}
.page-form-content h3:first-child {
  margin-top: 0;
}
.page-form-content ol,
.page-form-content ul {
  margin: 0 0 var(--space-sm);
  padding-left: 1.25rem;
}
.page-form-content ol li,
.page-form-content ul li {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-bottom: 0.4rem;
}
.page-form-content li strong {
  color: var(--color-dark);
  font-weight: 700;
}
.page-form-content p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-sm);
}
.page-form-content p:last-child {
  margin-bottom: 0;
}
.page-form-content a:not(.main-button) {
  color: var(--color-accent-dark);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* --------------------------------------------------------------------------
   Gravity Forms bridge
   Written against GF 2.5+ markup (the .gravity-theme wrapper). Leave the
   plugin's own CSS enabled — this overrides the visual layer only, and turning
   "Output CSS" off would take the column and multi-input layouts with it.
   Scoped to the two cards so it cannot leak into any other form on the site.
   -------------------------------------------------------------------------- */
.page-form-card .gform_wrapper,
.campaign-hero-card .gform_wrapper {
  margin: 0;
}

.page-form-card .gform_wrapper .gform_fields,
.campaign-hero-card .gform_wrapper .gform_fields {
  row-gap: var(--space-md);
}

.page-form-card .gform_wrapper .gfield_label,
.campaign-hero-card .gform_wrapper .gfield_label {
  display: block;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--color-text);
}
.page-form-card .gform_wrapper .gfield_required,
.campaign-hero-card .gform_wrapper .gfield_required {
  color: var(--color-error);
}

.page-form-card .gform_wrapper input[type='text'],
.page-form-card .gform_wrapper input[type='email'],
.page-form-card .gform_wrapper input[type='tel'],
.page-form-card .gform_wrapper input[type='url'],
.page-form-card .gform_wrapper input[type='number'],
.page-form-card .gform_wrapper select,
.page-form-card .gform_wrapper textarea,
.campaign-hero-card .gform_wrapper input[type='text'],
.campaign-hero-card .gform_wrapper input[type='email'],
.campaign-hero-card .gform_wrapper input[type='tel'],
.campaign-hero-card .gform_wrapper input[type='url'],
.campaign-hero-card .gform_wrapper input[type='number'],
.campaign-hero-card .gform_wrapper select,
.campaign-hero-card .gform_wrapper textarea {
  width: 100%;
  height: 3rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--profile-radius-sm);
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-white);
  transition: var(--transition-base);
}
.page-form-card .gform_wrapper textarea,
.campaign-hero-card .gform_wrapper textarea {
  height: auto;
  min-height: 7rem;
  line-height: 1.5;
}

.page-form-card .gform_wrapper input:focus,
.page-form-card .gform_wrapper select:focus,
.page-form-card .gform_wrapper textarea:focus,
.campaign-hero-card .gform_wrapper input:focus,
.campaign-hero-card .gform_wrapper select:focus,
.campaign-hero-card .gform_wrapper textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.14);
}
.page-form-card .gform_wrapper ::placeholder,
.campaign-hero-card .gform_wrapper ::placeholder {
  color: var(--color-secondary);
  font-weight: 400;
}

/* Checkboxes and radios. The design system hides the native control behind a
   drawn box; a plugin's markup has no span to draw into, so these style the
   native control with accent-color instead — same green, no markup needed. */
.page-form-card .gform_wrapper .gchoice,
.campaign-hero-card .gform_wrapper .gchoice {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}
.page-form-card .gform_wrapper .gchoice input,
.campaign-hero-card .gform_wrapper .gchoice input {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin: 1px 0 0;
  accent-color: var(--color-accent);
}
.page-form-card .gform_wrapper .gchoice label,
.campaign-hero-card .gform_wrapper .gchoice label {
  font-size: 0.9375rem;
  line-height: 1.5;
  font-weight: 500;
  color: var(--color-text);
  margin: 0;
  max-width: none;
}
.page-form-card .gform_wrapper .gchoice label a,
.campaign-hero-card .gform_wrapper .gchoice label a {
  color: var(--color-accent-dark);
  text-decoration: underline;
}

.page-form-card .gform_wrapper .gfield_description,
.campaign-hero-card .gform_wrapper .gfield_description {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-secondary);
  padding: 0.375rem 0 0;
}

/* Submit — .main-button, without needing the class on the plugin's input. */
.page-form-card .gform_wrapper .gform_footer,
.campaign-hero-card .gform_wrapper .gform_footer {
  margin: var(--space-md) 0 0;
  padding: 0;
}
.page-form-card .gform_wrapper .gform_button,
.campaign-hero-card .gform_wrapper .gform_button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: auto;
  height: auto;
  padding: 0.6875rem 1.375rem;
  border: 1.5px solid var(--color-dark);
  border-radius: var(--profile-button-radius);
  background: var(--color-dark);
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.2;
  color: var(--color-white);
  cursor: pointer;
  transition: var(--profile-hover-transition);
}
.page-form-card .gform_wrapper .gform_button:hover,
.campaign-hero-card .gform_wrapper .gform_button:hover {
  background: var(--color-dark-lighter);
  border-color: var(--color-dark-lighter);
  box-shadow: 0 6px 16px rgba(var(--color-dark-rgb), 0.22);
  transform: translateY(-1px);
}

/* Validation and confirmation. */
.page-form-card .gform_wrapper .gfield_error input,
.page-form-card .gform_wrapper .gfield_error select,
.page-form-card .gform_wrapper .gfield_error textarea,
.campaign-hero-card .gform_wrapper .gfield_error input,
.campaign-hero-card .gform_wrapper .gfield_error select,
.campaign-hero-card .gform_wrapper .gfield_error textarea {
  border-color: var(--color-error);
}
.page-form-card .gform_wrapper .validation_message,
.campaign-hero-card .gform_wrapper .validation_message {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-error);
  background: none;
  border: none;
  padding: 0.375rem 0 0;
}
.page-form-card .gform_wrapper .gform_validation_errors,
.campaign-hero-card .gform_wrapper .gform_validation_errors {
  border: 1px solid var(--color-error);
  border-radius: var(--profile-radius-sm);
  background: rgba(var(--color-error-rgb, 220, 53, 69), 0.06);
  box-shadow: none;
  margin: 0 0 var(--space-md);
  padding: var(--space-sm) var(--space-md);
}
.page-form-card .gform_confirmation_message,
.campaign-hero-card .gform_confirmation_message {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
  margin: 0;
}

/* Text Scroll — the step copy is one wysiwyg, so it emits plain p/ul rather than
   .ts-text and .ts-list. Wrapped in .ts-body rather than styled through .ts-step,
   because the eyebrow is also a <p> and a .ts-step p rule would outrank
   .ts-eyebrow on both specificity and order. */
.ts-body p {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-lg);
}
.ts-body p:last-child {
  margin-bottom: var(--space-lg);
}
.ts-body ul,
.ts-body ol {
  margin: 0 0 var(--space-lg);
  padding-left: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.ts-body li {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}
.ts-body li strong {
  color: var(--color-dark);
  font-weight: 700;
}
.ts-body strong {
  color: var(--color-dark);
  font-weight: 700;
}
.ts-body a:not(.main-button) {
  color: var(--color-accent-dark);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* The bold lead-in above a list — .ts-text-lead in the static. A paragraph whose
   only content is a <strong> is the one thing that can be inferred from wysiwyg
   output; if it ever misfires the fix is a field, not a selector. */
.ts-body p:has(> strong:only-child) {
  margin-bottom: var(--space-sm);
}

/* Home hero pill — the green "New" badge is drawn here rather than marked up,
   because the field group has no badge field. Same values as .hero-flag-badge
   (line 3183), which stays in the stylesheet for the static pages that do mark
   it up. The wording is hardcoded: see the note in home-hero.php. */
.hero-flag::before {
  content: 'New';
  flex: 0 0 auto;
  padding: 0.1875rem 0.5rem;
  border-radius: var(--profile-radius-pill);
  background: var(--color-accent);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.4;
}
/* A pill that already marks the badge up must not get a second one. */
.hero-flag:has(.hero-flag-badge)::before {
  content: none;
}

/* ==========================================================================
   LIBRARY BLOCK
   A grid of cards, each an image, a title and a line of text — the
   integrations directory, and anything else shaped like a directory.

   Close to .archive-card but its own thing: this one has a selectable column
   count, a centred heading of its own, and cards that are only clickable when
   a link has been set.
   ========================================================================== */

.library {
  background: var(--color-white);
  padding: clamp(2.5rem, 6vw, 5rem) 0;
}
.library-inner {
  max-width: var(--profile-container-max);
  margin: 0 auto;
  padding-inline: clamp(1.5rem, 5vw, 5rem);
}

/* ---- Heading ---- */
.library-head {
  text-align: center;
  max-width: 62ch;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
}
.library-title {
  margin: 0;
  font-size: clamp(1.9rem, calc(3.4 * var(--fluid)), 2.9rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.035em;
  color: var(--color-dark);
}
.library-intro {
  margin-top: var(--space-sm);
  color: var(--color-text-muted);
  font-size: 1.05rem;
  line-height: 1.6;
}
.library-intro p {
  margin: 0;
}
.library-intro p + p {
  margin-top: var(--space-sm);
}

/* ---- Grid ----
   The column count is a class rather than an inline style so the breakpoints
   below stay in the stylesheet. Every setting collapses the same way. */
.library-grid {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.library-grid.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}
.library-grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}
.library-grid.cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* ---- Card ---- */
.library-card {
  display: flex;
  flex-direction: column;
  background: var(--profile-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--profile-radius-md);
  overflow: hidden;
  box-shadow: var(--profile-card-shadow);
  transition: var(--profile-hover-transition);
  text-decoration: none;
  color: inherit;
}

/* The hover treatment is on .is-link only. A card with no link is a <div>, and
   one that lifts under the cursor but does nothing when clicked is a broken
   affordance. */
.library-card.is-link:hover {
  transform: var(--profile-hover-transform);
  box-shadow: var(--profile-hover-shadow);
}
.library-card.is-link:hover .library-card__title {
  color: var(--color-accent);
}

/* ---- Media ----
   The 16:9 cover box the blog and archive cards use. A fixed ratio rather than
   fixed pixel dimensions: the columns are already equal width, so an equal
   ratio makes every image identical in both dimensions, and it stays correct as
   the grid reflows. cover crops the overflow instead of squashing a portrait
   upload. */
.library-card__media {
  aspect-ratio: 16 / 9;
  flex: 0 0 auto;
  overflow: hidden;
  background: var(--color-light-alt);
}
.library-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Card body ---- */
.library-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
}
.library-card__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--color-dark);
  transition: color var(--transition-fast);
}
.library-card__text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* margin-top: auto pins the link row to the bottom, so cards in a row line
   theirs up even when the copy above runs to different lengths. */
.library-card__more {
  margin-top: auto;
  padding-top: var(--space-sm);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-dark);
  transition: color var(--transition-fast);
}
.library-card__more .btn-arrow {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  transition: transform var(--transition-fast);
}
.library-card.is-link:hover .library-card__more {
  color: var(--color-accent);
}
.library-card.is-link:hover .library-card__more .btn-arrow {
  transform: translateX(3px);
}

/* ---- Footer link ---- */
.library-foot {
  display: flex;
  justify-content: center;
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* Dropped inside a coloured wrapper the section's own padding would double up,
   and the white ground would fight the wrapper's. */
.coloured-block .library {
  padding: 0;
  background: none;
}

@media (max-width: 991px) {
  .library-grid.cols-3,
  .library-grid.cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .library-grid.cols-2,
  .library-grid.cols-3,
  .library-grid.cols-4 {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   404 (.not-found)
   One centred hero: a large figure, the message, the search bar from
   search.php, and the site's areas as a row of .main-button links. Then the
   closing banner. Everything but the figure, the centring and the button row
   is existing CSS.
   ========================================================================== */

/* The archive hero is left-aligned and capped at 46rem for copy. Centred, the
   cap stays — a 404 message is still copy — and the pieces line up on the
   middle. Breadcrumbs are not shown: there is nothing to crumb to. */
.archive-hero.is-centred {
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5rem);
}
.archive-hero.is-centred .archive-hero-inner {
  margin: 0 auto;
  text-align: center;
  max-width: 48rem;
}
.archive-hero.is-centred h1 {
  margin-inline: auto;
}
.archive-hero.is-centred .article-standfirst {
  margin-inline: auto;
  max-width: 42rem;
}

/* The figure: a "404" drawn behind the copy by ::before, most of the hero
   tall. It is a wash, not a heading — the h1 does the talking — so it is set
   in the accent as a gradient that fades to nothing towards the copy, clipped
   to the glyphs. Painted at z-index 0 under the container, which is lifted to 1;
   the hero's tint (::after, z-index -1) stays underneath both. isolation keeps
   those three layers inside the hero rather than fighting the page. */
.archive-hero.not-found {
  isolation: isolate;
  overflow: hidden;
}
.archive-hero.not-found .container {
  position: relative;
  z-index: 1;
}
.archive-hero.not-found::before {
  content: '404';
  position: absolute;
  z-index: 0;
  top: -0.06em;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-primary);
  font-size: clamp(16rem, 45vw, 39rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.07em;
  white-space: nowrap;
  /* Holds its colour through the top half, then fades to nothing over the
     stretch the headline sits on, so the title reads clean against the tint
     and the figure appears to pass behind it. */
  /* The digits' baseline sits at roughly 80% of the box (line-height 1 leaves
     descender space below), so the zero stop is there, not at 100%. */
  background: linear-gradient(
    180deg,
    rgba(var(--color-accent-rgb), 0.34) 0%,
    rgba(var(--color-accent-rgb), 0.18) 30%,
    rgba(var(--color-accent-rgb), 0.06) 60%,
    rgba(var(--color-accent-rgb), 0) 79%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  pointer-events: none;
  user-select: none;
}
/* A fixed 10rem: the copy sits under the figure's middle. The figure starts at the
   hero's top edge, darker there, fades through its lower half to a faint 5%,
   then drops to nothing over the last stretch so the baseline dissolves. */
.archive-hero.not-found.is-centred {
  padding-top: 10rem;
}

/* form.filter-bar is a full-width bar on the search page. Here it is a control
   under the standfirst: a measure, centred, with the hero's rhythm. */
.archive-hero .not-found-search {
  max-width: 34rem;
  margin: 0 auto var(--space-lg);
}

/* The areas: a label and a wrapping row of full-size buttons, centred. */
.not-found-areas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}
.not-found-areas-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}
.not-found-areas-label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-secondary);
}

@media (max-width: 767px) {
  .archive-hero.is-centred {
    text-align: left;
  }
  .archive-hero.is-centred .archive-hero-inner {
    text-align: left;
  }
  .archive-hero.is-centred h1,
  .archive-hero.is-centred .article-standfirst {
    margin-inline: 0;
  }
  .archive-hero .not-found-search {
    margin-inline: 0;
  }
  .not-found-areas {
    align-items: flex-start;
  }
  .not-found-areas-list {
    justify-content: flex-start;
  }
}

/* ==========================================================================
   STORY BLOCK (.story)
   The problem → solution beats on the single product / industry / role /
   feature templates. Replaces the two-card .text-block.as-cards row, which put
   two dense columns of copy against each other.

   Each beat is a row on a vertical rail: a dot, the copy, and — when there is
   one — a picture. Rose dot for the problem, green for the solution, matching
   the glyphs on the bullet lists. The rail runs between the dots so the eye
   travels down from before to after.

   Copy is capped at a readable measure and the bullet list goes two-up when
   the column is wide enough, so the density the cards had is spread rather
   than stacked.
   ========================================================================== */

.story {
  background: var(--color-light-alt);
  padding: clamp(3rem, 6vw, 5.5rem) 0;
}
.story-inner {
  max-width: var(--profile-container-max);
  margin: 0 auto;
  padding-inline: clamp(1.5rem, 5vw, 5rem);
}
.story-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* One beat. Three tracks: rail, copy, media. The rail is fixed width so the
   dots line up down the page whatever the copy does. */
.story-step {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0 clamp(1rem, 2vw, 1.5rem);
  align-items: start;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.story-step.has-media {
  grid-template-columns: 2.5rem minmax(0, 1fr) minmax(0, 40%);
  gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.5rem);
}
.story-step.has-media .story-media {
  align-self: center;
}
.story-step:last-child {
  padding-bottom: 0;
}

/* ---- Rail ---- */
.story-rail {
  position: relative;
  height: 100%;
  display: flex;
  justify-content: center;
}
/* The line. Drawn on every beat but the last, from its dot down to the next
   beat's dot, which is what makes them read as a sequence. */
.story-step:not(:last-child) .story-rail::before {
  content: '';
  position: absolute;
  top: 1.75rem;
  bottom: -0.25rem;
  width: 2px;
  background: var(--color-border);
}
.story-dot {
  position: relative;
  z-index: 1;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.25rem;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow:
    0 0 0 6px var(--color-light-alt),
    0 0 0 7px var(--color-border);
}
.story-step.is-problem .story-dot {
  background: var(--color-rose);
}
.story-step.is-solution .story-dot {
  background: var(--color-accent);
}

/* ---- Copy ---- */
.story-copy {
  min-width: 0;
  max-width: 60ch;
}
.story-label {
  display: inline-block;
  margin-bottom: var(--space-sm);
  padding: 0.3rem 0.75rem;
  border-radius: var(--profile-radius-pill);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  background: var(--color-bg-green);
  color: var(--color-accent-dark);
}
.story-step.is-problem .story-label {
  background: var(--color-bg-rose);
  color: var(--color-rose);
}
.story-title {
  margin: 0 0 var(--space-sm);
  font-size: clamp(1.5rem, calc(2.6 * var(--fluid)), 2.1rem);
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.story-text {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}
.story-text p {
  margin: 0;
}
.story-text p + p {
  margin-top: var(--space-sm);
}

/* ---- No image: centre the copy ----
   A beat whose image is hidden (the Show image toggle, off by default) or was
   never uploaded. The copy block moves to the middle of the page so it does
   not sit to the left with an empty half beside it; the text inside stays
   left-aligned. The rail keeps its place — the line of dots still runs down
   the left — so the block is nudged left by half the rail's width to land on
   the true centre. */
.story-step:not(.has-media) .story-copy {
  margin-inline: auto;
}
@media (min-width: 768px) {
  .story-step:not(.has-media) .story-copy {
    transform: translateX(calc((2.5rem + clamp(1rem, 2vw, 1.5rem)) / -2));
  }
}

/* Bullets two-up. auto-fit with a 16rem floor, so at 60ch they pair and in a
   narrow column they stack; no breakpoint needed. */
.story .check-list {
  margin-top: var(--space-md);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0.75rem 1.5rem;
}

/* ---- Media ---- */
.story-media {
  border-radius: var(--profile-radius-lg);
  overflow: hidden;
  background: var(--color-white);
  box-shadow: var(--shadow-lg);
}
.story-media img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 991px) {
  /* Picture drops under the copy, still indented past the rail. */
  .story-step.has-media {
    grid-template-columns: 2.5rem minmax(0, 1fr);
  }
  .story-step.has-media .story-media {
    grid-column: 2;
    max-width: 32rem;
  }
}
@media (max-width: 767px) {
  /* Rail off: at phone width it costs a column the copy needs. The labels and
     the coloured bullets still tell the two beats apart. */
  .story-step,
  .story-step.has-media {
    grid-template-columns: minmax(0, 1fr);
  }
  .story-rail {
    display: none;
  }
  .story-step.has-media .story-media {
    grid-column: auto;
  }
  .story-copy {
    max-width: none;
  }
}

/* ==========================================================================
   TEXT BLOCK — two-card treatment (.text-block.as-cards)
   The Why / How row on the single templates. Same fields, same markup order,
   but each column is a surface of its own rather than two runs of copy sharing
   a white ground.

   A modifier rather than a change to .text-block itself, because the Text block
   and the Feature Block use the same classes for an image-and-copy row and must
   not pick any of this up.
   ========================================================================== */

/* Tinted ground so the white cards have something to sit on. Against the plain
   white of .text-block they would be invisible. */
.text-block.as-cards {
  background: var(--color-light-alt);
}

/* stretch, not the centre alignment the image row uses — cards in a pair have
   to be the same height or the whole effect falls apart. The gap tightens too:
   4.5rem is right for copy beside a picture, too loose for two cards. */
.text-block.as-cards .text-block-inner {
  align-items: stretch;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

/* One card. Flex column so the check list can be pinned to the bottom. */
.text-block.as-cards .text-block-content {
  order: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--profile-radius-lg);
  box-shadow: var(--shadow-card);
  padding: clamp(1.75rem, 3vw, 2.75rem);
  overflow: hidden;
}

/* The accent rule along the top edge. Always on, never a hover state: these
   cards are not links, and a card that reacts to the cursor but does nothing
   when clicked reads as broken. The second card takes the blue so the pair is
   telling Why from How at a glance rather than by reading. */
.text-block.as-cards .text-block-content::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--color-accent);
}
.text-block.as-cards .text-block-content:nth-child(2)::before {
  background: var(--color-blue);
}

/* Tighter type than the image row: a card is a narrower measure than half a
   1440 container, so the section heading size is too big in here. */
.text-block.as-cards .text-block-content h2 {
  font-size: clamp(1.35rem, calc(2.1 * var(--fluid)), 1.75rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-sm);
}
.text-block.as-cards .text-block-text {
  font-size: 1rem;
  margin-bottom: var(--space-md);
}

/* margin-top: auto drops the list to the foot of the card, so both cards' lists
   sit on the same baseline however long the copy above them runs. The rule
   above it separates the points from the prose. .check-list only renders when
   there are rows, so a card without any gets neither. */
.text-block.as-cards .check-list {
  margin-top: auto;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

/* Only one of Why / How filled in. A lone card in half a row with a hole beside
   it looks like something failed to load, so it takes the full width. */
.text-block.as-cards .text-block-inner:has(> .text-block-content:only-child) {
  grid-template-columns: minmax(0, 1fr);
}

/* Stacked earlier than the image row. Two cards of copy sharing a tablet width
   leaves both too narrow, and unlike a picture there is nothing to gain from
   keeping them side by side. */
@media (max-width: 991px) {
  .text-block.as-cards .text-block-inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   RESPONSIVE GAPS
   Layouts that never reached a single column. Both are here at the end rather
   than beside their own rules because the declarations they have to beat sit in
   the homepage-override section further up — a media query carries no
   specificity of its own, so an earlier copy would lose to it.
   ========================================================================== */

@media (max-width: 991px) {
  /* The 991px collapse further up only names .banner-small.alt, so the
     .no-image variant kept its 1.15fr / 0.85fr split all the way down. */
  .banner-small.no-image .banner-small-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The stats sit hard right beside the copy in that split. Once it stacks
     there is nothing to sit beside, so they read better ranged left with the
     text above them. */
  .banner-small-aside {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

/* The attribution row at the foot of a Title Text Panel is a name and company
   with the logo beside them. In a single-column panel on a phone that is a lot
   of row for the width, so it is allowed to wrap rather than squeeze the
   wordmark down to nothing. */
@media (max-width: 479px) {
  .title-text-panel-foot {
    flex-wrap: wrap;
    row-gap: var(--space-sm);
  }
}

@media (max-width: 767px) {
  /* The override section sets .home-header-inner to a genuinely different split
     from the base rule, so its declaration has to stay — but being later in the
     file it also beat the 767px collapse at line 1665. Restated here, after it. */
  .home-header-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
  }
}

/* ==========================================================================
   HOME HERO — primary CTA
   The hero ground is --color-bg-green washed with --color-accent, so a green
   button had about 2.2:1 against it — the one thing the page is asking you to
   do had the least separation on it. The button is navy here for that reason.

   The pulse picks it out further: a ring sweeping outward from the edge, drawn
   in the same navy so it reads as part of the button rather than a border
   round it.

   Scoped to the hero. Elsewhere the button takes whatever class the markup
   gives it.
   ========================================================================== */

.hero-stack .hero-stack-actions .main-button {
  background: var(--color-dark);
  border-color: var(--color-dark);
  color: var(--color-white);
  /* A shade larger than the standard button, so it reads as the primary action
     rather than one of several. */
  padding: 0.875rem 1.75rem;
  font-size: 0.9375rem;
  font-weight: 700;
  animation: hero-cta-pulse 2.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.hero-stack .hero-stack-actions .main-button:hover,
.hero-stack .hero-stack-actions .main-button:focus-visible {
  background: var(--color-dark-lighter);
  border-color: var(--color-dark-lighter);
  transform: translateY(-1px);
  /* Pulse off on hover: the ring and the hover shadow fight each other, and
     once the cursor is on the button it has already done its job. */
  animation: none;
  box-shadow: 0 8px 20px rgba(var(--color-dark-rgb), 0.35);
}

/* An expanding ring rather than a glow that grows and shrinks. It draws the eye
   on the outward sweep then gets out of the way, instead of sitting there
   throbbing under the cursor. The long tail between beats is deliberate. */
@keyframes hero-cta-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--color-dark-rgb), 0.45);
  }
  55% {
    box-shadow: 0 0 0 14px rgba(var(--color-dark-rgb), 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(var(--color-dark-rgb), 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-stack .hero-stack-actions .main-button {
    animation: none;
  }
}

/* ==========================================================================
   HOME HERO — logo strip
   .parent-brand was a centred flex row holding a single mark. hero_logos is a
   repeater now, so it needs a gap between them and permission to wrap.

   Declared here rather than beside the rule at line 5278 because that one sits
   in the homepage-override section, and anything earlier in the file would lose
   to it on source order.
   ========================================================================== */

.parent-brand {
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.75rem, 4vw, 3.5rem);
}

/* The single-logo rule pins every mark to 155px wide. That works for one, but
   logos arrive at wildly different proportions and a row of them set to the
   same width makes a wide wordmark tower over a square one. Capping the height
   instead is what lines them up optically — each keeps its own ratio. */
.parent-brand img {
  width: auto;
  max-width: 155px;
  max-height: 60px;
  object-fit: contain;
}

@media (max-width: 767px) {
  .parent-brand {
    gap: var(--space-lg) var(--space-xl);
  }
  .parent-brand img {
    max-width: 130px;
    max-height: 28px;
  }
}

/* ==========================================================================
   BLOCK — image_text_rows (.image-text)
   Alternating copy-and-image rows inside one tinted panel: the z-pattern
   feature list. Row one puts the copy left, row two puts it right.

   The flip is :nth-child(even) here rather than alternating markup, so the
   copy stays first in the DOM on every row. That is what a screen reader wants,
   and it makes the mobile rule one line — drop the order and every row stacks
   copy-first on its own.
   ========================================================================== */

.image-text {
  background: var(--color-white);
  padding: clamp(2.5rem, 6vw, 5rem) 0;
}
.image-text-inner {
  max-width: var(--profile-container-max);
  margin: 0 auto;
  padding-inline: clamp(1.5rem, 5vw, 5rem);
}

/* The panel. One surface holding every row — the colour is contained rather
   than running the full width of the page behind them. */
.image-text-panel {
  border-radius: var(--profile-radius-lg);
  padding: clamp(2rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 3.5rem);
}
.image-text-panel.bg-light {
  background: var(--color-light-alt);
}
.image-text-panel.bg-white {
  background: var(--color-white);
  border: 1px solid var(--color-border);
}
.image-text-panel.bg-green {
  background: var(--color-bg-green);
}
.image-text-panel.bg-blue {
  background: var(--color-bg-blue);
}
.image-text-panel.bg-amber {
  background: var(--color-bg-amber);
}
.image-text-panel.bg-rose {
  background: var(--color-bg-rose);
}
.image-text-panel.bg-navy {
  background: var(--color-dark);
}

/* Navy is the one ground that needs the text inverted. Set on the panel so
   everything inside inherits it, rather than naming each element — the same
   lesson as the Benefits banner, where a bare <p> from a wysiwyg kept the
   navy body colour and vanished. */
.image-text-panel.bg-navy {
  color: #fff;
}
.image-text-panel.bg-navy .image-text-row-title {
  color: #fff;
}
.image-text-panel.bg-navy .image-text-row-text {
  color: rgba(255, 255, 255, 0.86);
}

/* ---- A row ---- */
.image-text-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.image-text-row + .image-text-row {
  margin-top: clamp(3rem, 7vw, 6rem);
}

/* The flip. order on the media rather than on both children, so there is only
   one thing to undo at the breakpoint. */
.image-text-row:nth-child(even) .image-text-media {
  order: -1;
}

/* A row with no image takes the full width instead of leaving a hole beside
   the copy. The measure keeps it readable at that width. */
.image-text-row.no-media {
  grid-template-columns: minmax(0, 1fr);
}
.image-text-row.no-media .image-text-content {
  max-width: 68ch;
}

/* ---- Copy column ---- */
.image-text-row-title {
  margin: 0 0 var(--space-sm);
  font-size: clamp(1.4rem, calc(2.4 * var(--fluid)), 2rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--color-dark);
}
.image-text-row-text {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}
.image-text-row-text p {
  margin: 0;
}
.image-text-row-text p + p {
  margin-top: var(--space-sm);
}

/* ---- The pill button ----
   .main-button already gives the pill shape, the padding, the arrow that
   rotates on hover, and the navy fill — the base button is --color-dark, so
   there is nothing to restate here. Only the hover is block-specific.

   Navy inverting to white. The border stays navy through the swap so the button
   keeps its outline against a white or light-grey panel; without it, hovering
   on .bg-white makes the button disappear into the ground. */
.image-text-content .main-button {
  margin-top: var(--space-lg);
}

.image-text-content .main-button:hover,
.image-text-content .main-button:focus-visible {
  background: var(--color-white);
  border-color: var(--color-dark);
  color: var(--color-dark);
  box-shadow: 0 6px 16px rgba(var(--color-dark-rgb), 0.16);
}

/* Navy panel: the button and the ground are the same colour, so it inverts.
   White at rest, navy on hover — the same two colours, the other way round. */
.image-text-panel.bg-navy .image-text-content .main-button {
  background: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-dark);
}
.image-text-panel.bg-navy .image-text-content .main-button:hover,
.image-text-panel.bg-navy .image-text-content .main-button:focus-visible {
  background: transparent;
  border-color: var(--color-white);
  color: var(--color-white);
  box-shadow: none;
}

/* ---- Image column ----
   height: auto so the image keeps its own ratio as the column resizes. Without
   it the height stays at the file's own and a wider column squashes it. */
.image-text-media {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.image-text-media img {
  border-radius: var(--profile-radius-md);
  box-shadow: var(--shadow-lg);
  background: var(--color-white);
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 400px;
  display: block;
}

/* Dropped inside a coloured wrapper the section's own padding would double up
   and the white ground would fight the wrapper's. */
.coloured-block .image-text {
  padding: 0;
  background: none;
}

@media (max-width: 991px) {
  /* Stacked, copy above the image on every row. The order reset is the whole
     trick: because the copy is first in the DOM, removing the flip is enough. */
  .image-text-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
  }
  .image-text-row:nth-child(even) .image-text-media {
    order: 0;
  }
  .image-text-row + .image-text-row {
    margin-top: clamp(2.5rem, 8vw, 4rem);
  }
}

@media (max-width: 479px) {
  /* The panel's padding and the section gutter stack up at this width and
     leave the copy in a very narrow column. */
  .image-text-inner {
    padding-inline: var(--space-sm);
  }
  .image-text-panel {
    padding: var(--space-lg) var(--space-md);
    border-radius: var(--profile-radius-md);
  }
}

/* ==========================================================================
   NEWSLETTER PANEL (.newsletter)
   The signup on the blog index. Its own component rather than the sidebar's
   .blog-signup stretched wide — that card is drawn for a 320px column, and
   across a 1440px container it needed enough overriding that a second
   component was the honest answer.

   Copy left, form right, on a navy panel with the accent wash and the faint
   grid the dark sections elsewhere use.
   ========================================================================== */

.newsletter {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--profile-radius-lg);
  padding: clamp(2.25rem, 5vw, 4rem) clamp(1.75rem, 4vw, 3.5rem);
  background:
    radial-gradient(
      58% 90% at 100% 0%,
      rgba(var(--color-accent-rgb), 0.28) 0%,
      rgba(var(--color-accent-rgb), 0) 62%
    ),
    var(--color-dark);
  color: #fff;
}

.newsletter-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}

/* ---- Copy ---- */
.newsletter-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: var(--space-md);
  padding: 0.3rem 0.75rem;
  border-radius: var(--profile-radius-pill);
  background: rgba(var(--color-accent-rgb), 0.16);
  color: var(--color-bg-green);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.newsletter-eyebrow svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.newsletter-title {
  margin: 0 0 var(--space-sm);
  /* font-size: clamp(1.6rem, calc(2.9 * var(--fluid)), 2.4rem); */
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.035em;
  color: #fff;
}
/* .highlight is --color-accent, which is too dark against navy. The pale tint
   is the on-dark pairing the theme already uses at .on-dark .highlight. */
.newsletter-title .highlight {
  color: var(--color-accent);
}

.newsletter-text {
  margin: 0;
  max-width: 42ch;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}

/* ---- Form ---- */
.newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
/* The consent box sits on its own row under the field and button. On the dark
   panel it takes the panel's light text; the compact and plain variants on a
   light ground set it back to the theme's muted grey. */
.newsletter-consent {
  flex: 1 1 100%;
  margin-top: 0.25rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
}
.newsletter-consent a {
  color: inherit;
  text-decoration: underline;
}
.newsletter.is-compact .newsletter-consent {
  color: var(--color-text-muted);
}
.newsletter.is-compact .newsletter-consent a {
  color: var(--color-accent-dark);
}
.newsletter .text-field {
  flex: 1 1 auto;
  width: auto;
}
.newsletter-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.newsletter-input:focus {
  outline: none;
  border-color: var(--color-accent);
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.25);
}
.newsletter-form .main-button {
  flex: 0 0 auto;
  height: 3rem;
}

/* The thank-you and error panels the lead-form script swaps in. The form is
   a flex row, so they take the full row. */
.newsletter-form .book-demo-done,
.newsletter-form .book-demo-error {
  flex: 1 1 100%;
  margin: 0;
}
.newsletter-form .book-demo-hp {
  flex: 0 0 0;
}

/* ---- Trust line ---- */
.newsletter-trust {
  list-style: none;
  margin: var(--space-md) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.62);
}
.newsletter-trust li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.newsletter-trust svg {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  stroke: var(--color-accent);
}

@media (max-width: 991px) {
  /* Stacked, copy first — it is first in the DOM, so nothing needs reordering. */
  .newsletter-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
  }
  .newsletter-text {
    max-width: none;
  }
}

/* ---- Compact: a column, not a band ----
   newsletter.php adds .is-compact when called with compact => true. Copy over
   form at every width, tighter padding, a smaller title. The wash is moved to
   the top-left corner because the card is now taller than it is wide and the
   corner it sat in is where the form is. */
.newsletter.is-compact {
  padding: 0;
  border-radius: 0;
  background: none;
}
.newsletter.is-compact .newsletter-text {
  color: var(--color-dark);
}
.newsletter.is-compact .newsletter-inner {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
}
.newsletter.is-compact .newsletter-eyebrow {
  margin-bottom: var(--space-md);
}
.newsletter.is-compact .newsletter-title {
  /* font-size: clamp(1.5rem, calc(2.4 * var(--fluid)), 2rem); */
  margin-bottom: var(--space-sm);
  color: var(--color-dark);
}
.newsletter.is-compact .newsletter-text {
  font-size: 1rem;
  max-width: 46ch;
}
/* The field and the button share the row while there is room, and the button
   drops under the field when there is not — flex-wrap does that on its own. */
.newsletter.is-compact .newsletter-form {
  flex-wrap: wrap;
  width: 70%;
}
.newsletter.is-compact .newsletter-input {
  flex: 1 1 160px;
}
.newsletter.is-compact .newsletter-trust {
  margin-top: var(--space-sm);
}

/* ---- Plain: on a light hero ----
   The compact layout without the dark-panel field: a white field with the
   theme's border, the field and button on one row under the text, the field
   taking whatever width the button leaves. Below 480px the base rule wraps
   them onto two rows. */
.newsletter.is-plain .newsletter-inner {
  gap: var(--space-md);
}
/* Smaller than the panel's display title: under a hero h1 it is a lead-in,
   not a heading in its own right. */
.newsletter.is-plain .newsletter-title {
  /* font-size: clamp(1.2rem, calc(1.7 * var(--fluid)), 1.45rem); */
  letter-spacing: -0.02em;
  margin-bottom: var(--space-xs);
}
.newsletter.is-plain .newsletter-text {
  max-width: none;
  font-size: 1rem;
  color: var(--color-text-muted);
}
.newsletter.is-plain .newsletter-form {
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  /* Field and button together stop at a comfortable email-field width rather
     than running the full column. */
  max-width: 34rem;
}
.newsletter.is-plain .newsletter-input {
  /* Enough basis to keep the field and button on one row at the form's width;
     the consent box below is the only thing that wraps. */
  flex: 1 1 14rem;
  background: var(--color-white);
  border-color: var(--color-border);
  color: var(--color-dark);
}
.newsletter.is-plain .newsletter-input::placeholder {
  color: var(--color-text-muted);
}
.newsletter.is-plain .newsletter-input:focus {
  background: var(--color-white);
  border-color: var(--color-accent);
}
@media (max-width: 479px) {
  /* Too narrow for both on one row: let the button drop under the field. */
  .newsletter.is-plain .newsletter-form {
    flex-wrap: wrap;
  }
}

/* ---- Sidebar: the single post ----
   The same plain form as the archive heroes, unchanged in type, colour and
   spacing — the only adjustments are the ones the 320px column forces. The
   hairline above is the one the copy-wide hero draws between its title and
   the signup; it only appears when the contents card is there to separate
   from. */
.article-sidebar .sidebar-signup {
  padding: 0;
}
/* Desktop only: below 992px the contents card is display:none and the
   sidebar moves under the article, so there is nothing to separate from. */
@media (min-width: 992px) {
  .article-sidebar .sidebar-card.toc + .sidebar-signup {
    padding-top: var(--space-lg);
    border-top: 1px solid rgba(var(--color-dark-rgb), 0.12);
  }
}
/* The heroes run the title at the compact size; in a 320px column that wraps
   to three lines, so the sidebar steps it down to the plain variant's original
   clamp. Four classes so it beats the compact rule. */
.sidebar-signup .newsletter.is-plain .newsletter-title {
  font-size: clamp(1.2rem, calc(1.7 * var(--fluid)), 1.45rem);
}
/* The compact rule gives the form 70% of its column, which in the hero is a
   comfortable email-field width and in a 320px sidebar is not. Full width
   here; the field and button wrap onto two rows on their own when they must,
   exactly as the hero form does on a narrow screen. */
.sidebar-signup .newsletter.is-plain .newsletter-form {
  width: 100%;
}

@media (max-width: 479px) {
  /* The field and the button will not both fit on a row at this width. */
  .newsletter-form {
    flex-wrap: wrap;
  }
  .newsletter-input {
    flex: 1 1 100%;
  }
  .newsletter-form .main-button {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   WEBINAR LIST (.webinar-list / .webinar-row)
   Wide rows on the webinars archive: copy left, image right, one per row.
   Replaces a three-up .archive-card grid, which gave the blurb a line and a
   half — not enough to decide whether to spend half an hour on something.

   Copy is first in the DOM and the image is placed second, so the stacked
   layout below 767px leads with the words without any reordering.
   ========================================================================== */

/* No card. The reference has no box, no border and no shadow — each webinar is
   just copy beside an image, separated by space rather than by chrome. The gap
   is large because it is the only thing telling one row from the next. */
.webinar-list {
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 7vw, 5.5rem);
}

.webinar-row {
  display: grid;
  grid-template-columns: minmax(0, 48%) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  text-decoration: none;
  color: inherit;
}

/* Image left, copy right — done with order rather than by putting the image
   first in the markup. The copy stays first in the DOM, so the stacked layout
   below still leads with the words and needs nothing undone but this line. */
.webinar-row__media {
  order: -1;
}

/* Nothing lifts or moves on hover — with no card there is nothing to lift. The
   title and the link colour instead, which is enough to say the whole row is
   clickable. */

/* ---- Copy ---- */
.webinar-row__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}
.webinar-row__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.webinar-row__date {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.webinar-row__title {
  margin: 0;
  font-size: clamp(1.5rem, calc(2.9 * var(--fluid)), 2.25rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: var(--color-dark);
  transition: color var(--transition-fast);
}
.webinar-row:hover .webinar-row__title {
  color: var(--color-accent);
}
.webinar-row__text {
  margin: 0;
  max-width: 46ch;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}

/* The pill. .main-button does the shape, padding and colour; this only adds the
   space above it.

   The hover states hang off the row, not off the button — the whole row is the
   link, so the button has to react to the cursor being anywhere on it. Without
   these the pill would sit inert while the title beside it changed colour. */
.webinar-row__more {
  margin-top: var(--space-sm);
}
.webinar-row:hover .webinar-row__more {
  background: var(--color-dark-lighter);
  border-color: var(--color-dark-lighter);
  box-shadow: 0 6px 16px rgba(var(--color-dark-rgb), 0.22);
}
/* .main-button parks its arrow at 45deg and straightens it on its own hover.
   Same again, driven by the row. */
.webinar-row:hover .webinar-row__more .btn-arrow {
  transform: rotate(0deg);
}

/* ---- Image ---- */
/* The image is the only thing on the row carrying any chrome, so it takes the
   larger radius the reference uses. */
.webinar-row__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--profile-radius-lg);
  background: var(--color-light-alt);
}
.webinar-row__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* No image: the site logo, contained on white rather than stretched edge to
   edge and cropped by the cover rule above. */
.webinar-row__media.is-placeholder {
  background: var(--color-white);
  display: grid;
  place-items: center;
  padding: var(--space-md);
}
.webinar-row__media.is-placeholder img {
  width: auto;
  height: auto;
  max-width: 52%;
  max-height: 44%;
  object-fit: contain;
}

@media (max-width: 767px) {
  /* Stacked, copy first. Dropping the order is the whole of it — the copy is
     already first in the DOM. */
  .webinar-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
  }
  .webinar-row__media {
    order: 0;
  }
}

/* ==========================================================================
   SINGLE WEBINAR — layout
   One two-column grid for the whole page, not a hero followed by a body: the
   heading, the recording and the write-up run down the left, and the form
   column on the right stays stuck to the viewport the whole way past them.

   On a gated webinar that form is what the page exists to do, so it should
   never scroll out of reach.
   ========================================================================== */

.webinar-main {
  padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(3rem, 6vw, 5rem);
}

.webinar-layout {
  display: grid;
  /* 55 / 45, not a fixed sidebar width — the form column grows with the page
     rather than leaving the copy to take up all the slack on a wide screen.
     The gap comes out of both, so the two are 55/45 of what is left after it. */
  grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.webinar-col > * + * {
  margin-top: var(--space-lg);
}
.webinar-col h1 {
  margin: 0 0 var(--space-md);
}

/* The trail sits above both columns, not inside the copy one. That is what
   lines the form up with the badge rather than with the breadcrumbs — the grid
   now starts at the badge, so both columns start there together. */
.webinar-main .breadcrumb-band {
  margin-bottom: var(--space-lg);
}

/* ---- The sticky column ----
   position:sticky needs a top offset and an ancestor that does not clip it.
   align-items:start on the grid is the other half — a stretched item fills the
   row and has nothing left to move within, which is the usual reason a sticky
   sidebar refuses to stick. */
.webinar-aside {
  position: sticky;
  top: calc(var(--header-h, 76px) + 1.5rem);
}
.webinar-aside-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* The gate panel is the form. It was built for a full-width band, so inside a
   380px column it drops the fixed video ratio and sits at its natural height. */
.webinar-aside .webinar-gate {
  aspect-ratio: auto;
  min-height: 0;
}
.webinar-aside .webinar-gate-inner {
  padding: clamp(1.5rem, 2.5vw, 2rem);
}
.webinar-aside .webinar-gate-row {
  grid-template-columns: minmax(0, 1fr);
}

/* ---- The recording ---- */
.webinar-video-section {
  padding: 0;
}

@media (max-width: 991px) {
  /* Stacked. The form is second in the DOM, so it lands under the heading and
     the recording rather than at the very bottom — close enough to the top to
     still be the obvious next step, without pushing the copy off the screen. */
  .webinar-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
  }
  .webinar-aside {
    position: static;
  }
}

/* ==========================================================================
   SINGLE WEBINAR — speakers
   Inside the copy column rather than a full-width band of their own, so the
   sticky form is still beside the page while someone reads who is presenting.
   ========================================================================== */

.speakers {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.speakers-title {
  margin: 0 0 var(--space-lg);
  font-size: clamp(1.35rem, calc(2.3 * var(--fluid)), 1.9rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--color-dark);
}

/* Cards rather than a bare list. auto-fit rather than a fixed two, because the
   column is 55% of the page — two fit at full width, one at a tablet, without
   a breakpoint for either. */
.speaker-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-md);
}

/* .speaker is the photo-beside-text row from the old sidebar card, reused. The
   card around it is what is new. */
/* A row of photo + text while there is no bio; once there is one the card
   becomes two rows, with the bio spanning the full width underneath rather
   than squeezing into the column beside a 64px photo. */
.speaker-grid .speaker {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--profile-radius-md);
  background: var(--color-white);
}
.speaker-bio {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}
.speaker-grid .speaker-photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: var(--color-bg-green);
}
.speaker-grid .speaker-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.speaker-grid .speaker-photo .author-profile-icon {
  width: 60%;
  height: 60%;
  color: var(--color-accent-dark);
}
.speaker-grid .speaker-name {
  font-size: 1.05rem;
  font-weight: 700;
}
.speaker-grid .speaker-role {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* ==========================================================================
   BUSINESS IMPACT (.impact)
   The impact section on the four single templates. Redesigned from the
   Benefits-block grid it used to borrow: that was a centred heading, a centred
   intro and a 3-up row of cards, with too much air between each and the intro
   cut off from the list it introduced.

   Now a lead and a list. Title and intro in the left column; the outcomes down
   the right as ruled rows — mark, title, one line — so the whole thing reads
   top to bottom as one statement and its proof. The panel is the same tinted
   rounded ground .story and the Why / How cards sit on.

   Banner (.is-banner + .bg-*) puts the colour on the section, drops the panel,
   and takes the type white — the same switch the Benefits block has.
   ========================================================================== */

.impact {
  background: var(--color-white);
  padding: clamp(2.5rem, 6vw, 5rem) 0;
}

.impact-inner {
  max-width: var(--profile-container-max);
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 5vw, 5rem);
  background: var(--color-light-alt);
  border-radius: var(--profile-radius-lg);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
/* Container padding on the panel, not the section: the panel's own edges are
   what the 1440 cap should meet, as .story-inner and .benefits-inner do. */

/* ---- Lead ---- */
.impact-lead {
  max-width: 40ch;
}
.impact-title {
  margin: 0 0 var(--space-md);
  font-size: clamp(1.6rem, calc(2.8 * var(--fluid)), 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--color-dark);
}
.impact-text {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}
.impact-text p {
  margin: 0;
}
.impact-text p + p {
  margin-top: var(--space-sm);
}
/* The intro's last line is often a lead-in — "Organisations can:" — so it
   takes the heading colour and sits a touch apart from the paragraph above. */
.impact-text p:last-child:not(:only-child) {
  margin-top: var(--space-md);
  font-weight: 600;
  color: var(--color-dark);
}

/* ---- List ---- */
.impact-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.impact-item {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--space-md);
  align-items: start;
  padding: var(--space-md) 0;
  border-top: 1px solid var(--color-border);
}
.impact-item:first-child {
  padding-top: 0;
  border-top: none;
}
.impact-item:last-child {
  padding-bottom: 0;
}

/* The mark: the item's icon in a rounded tile, or its number in the same tile
   when it has none. One size, so a list mixing the two still lines up. */
.impact-item-mark {
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--color-bg-green);
  color: var(--color-accent-dark);
}
.impact-item-mark svg {
  width: 22px;
  height: 22px;
  stroke: var(--color-accent-dark);
  stroke-width: 2;
  fill: none;
}
.impact-item-mark img {
  width: 22px;
  height: 22px;
  display: block;
}
.impact-item-mark.is-number {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.impact-item-body {
  min-width: 0;
  padding-top: 0.35rem;
}
.impact-item-title {
  margin: 0 0 0.25rem;
  font-size: 1.1rem;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--color-dark);
}
.impact-item-text {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  max-width: 58ch;
}
.impact-item-text p {
  margin: 0;
}
.impact-item-text p + p {
  margin-top: var(--space-xs);
}

/* Six or more: the list goes two columns so the section does not run twice as
   tall as the lead beside it. */
.impact-list:has(> .impact-item:nth-child(6)) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(1.5rem, 3vw, 2.5rem);
}
.impact-list:has(> .impact-item:nth-child(6)) .impact-item:nth-child(2) {
  padding-top: 0;
  border-top: none;
}

/* ---- Stacked: lead across the top, the items in columns beneath ----
   The two-column split (lead left, list right) went; the client preferred the
   heading and intro on top with the items laid out under them. The list is a
   grid: items with text fall into two columns, title-only items (compact,
   below) into up to four. No hairlines between items in a grid — the gap does
   the separating. */
.impact .impact-inner {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
}
.impact .impact-lead {
  max-width: 62ch;
}
.impact .impact-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: var(--space-lg) clamp(1.5rem, 3vw, 2.5rem);
}
.impact .impact-list .impact-item {
  padding: 0;
  border-top: none;
}

/* ---- Compact: title-only items ----
   Added by the template when no item has text. Selectors carry .impact so
   they outrank the six-item :has() rule above. Two columns of small ticks,
   no hairlines, tight rows — a checklist rather than a run of feature rows,
   so four short titles sit level with the intro instead of towering over it. */
.impact .impact-list.is-compact {
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.25rem var(--space-lg);
}
.impact .impact-list.is-compact .impact-item {
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0.875rem;
  align-items: center;
  padding: 0;
  border-top: none;
}
.impact .impact-list.is-compact .impact-item-mark {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 10px;
}
.impact .impact-list.is-compact .impact-item-mark svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.5;
}
.impact .impact-list.is-compact .impact-item-mark img {
  width: 16px;
  height: 16px;
}
.impact .impact-list.is-compact .impact-item-mark.is-number {
  font-size: 0.7rem;
}
.impact .impact-list.is-compact .impact-item-body {
  padding-top: 0;
}
.impact .impact-list.is-compact .impact-item-title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
}
@media (max-width: 640px) {
  .impact .impact-list,
  .impact .impact-list.is-compact {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Banner ---- */
.impact.is-banner {
  background: var(--color-light-alt);
}
.impact.is-banner.bg-green {
  background: var(--color-accent);
}
.impact.is-banner.bg-navy {
  background: var(--color-dark);
}
.impact.is-banner .impact-inner {
  background: none;
  border-radius: 0;
  padding-block: 0;
}
.impact.is-banner.bg-green .impact-title,
.impact.is-banner.bg-navy .impact-title,
.impact.is-banner.bg-green .impact-item-title,
.impact.is-banner.bg-navy .impact-item-title,
.impact.is-banner.bg-green .impact-text p:last-child:not(:only-child),
.impact.is-banner.bg-navy .impact-text p:last-child:not(:only-child) {
  color: #fff;
}
.impact.is-banner.bg-green .impact-text,
.impact.is-banner.bg-navy .impact-text,
.impact.is-banner.bg-green .impact-item-text,
.impact.is-banner.bg-navy .impact-item-text {
  color: rgba(255, 255, 255, 0.86);
}
.impact.is-banner.bg-green .impact-item,
.impact.is-banner.bg-navy .impact-item {
  border-color: rgba(255, 255, 255, 0.18);
}
.impact.is-banner.bg-green .impact-item-mark,
.impact.is-banner.bg-navy .impact-item-mark {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.impact.is-banner.bg-green .impact-item-mark svg,
.impact.is-banner.bg-navy .impact-item-mark svg {
  stroke: #fff;
}

@media (max-width: 991px) {
  /* Lead over list. */
  .impact-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
  }
  .impact-lead {
    max-width: 60ch;
  }
  .impact-list:has(> .impact-item:nth-child(6)) {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 479px) {
  .impact-inner {
    padding: var(--space-lg) var(--space-md);
  }
}

/* ==========================================================================
   HERO — CIRCLE (acf/hero-circle)

   A static alternative to the homepage hero: pale green ground, copy left, a
   large circle bleeding off the right edge with the product video inside it,
   and an accent shape tucked under its lower left.

   The block has no fields of its own: it reads the Home Hero block on the
   front page and shows that content in this layout, falling back to fixed
   demo copy when there is nothing to read.
   ========================================================================== */

.hero-circle {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-green);
  /* The section owns the height, because the circle is measured against it.
     Padding alone would leave the height dependent on how long the heading
     happens to be. */
  min-height: clamp(30rem, 50vw, 48rem);
  display: flex;
  align-items: center;
  padding-block: clamp(3rem, 6vw, 5rem);
}

.hero-circle-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  /* The same measure as .container — the width cap and the flat gutter — so
     the hero copy lines up with everything below it. */
  max-width: var(--profile-container-max);
  margin: 0 auto;
  padding-inline: var(--container-padding);
  display: grid;
  /* The circle's left edge is at 55% of the section, and in the design the copy
     runs to roughly 49%. 52 / 48 keeps the text clear of the curve without
     wasting the room. */
  grid-template-columns: minmax(0, 52%) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}

/* The copy column. No measure cap — the grid column is what bounds the copy, so
   a cap here would be a second limit doing the same job and the narrower would
   always win.

   min-width: 0 because a grid item defaults to min-width: auto, which stops it
   shrinking below its content: one long unbroken word would push the column
   wider than its 52% and shove the circle off. */
.hero-circle-content {
  min-width: 0;
}
/* The pill is the homepage hero's top_link, so it can be an <a>. */
.hero-circle-content a.badge {
  text-decoration: none;
}
.hero-circle-content a.badge:hover {
  text-decoration: underline;
}

.hero-circle-title {
  

  font-size: clamp(2.5rem, calc(5.4 * var(--fluid)), 4.25rem);
    font-weight: 700;
    line-height: 1.09;
    letter-spacing: -0.05em;
    color: var(--color-dark);
    max-width: 24ch;
    margin: var(--space-md) auto var(--space-sm);
}
.hero-circle-title .highlight {
  color: var(--color-accent);
}

.hero-circle-text {
  margin: 0 0 var(--space-lg);
  font-size: clamp(1.0625rem, calc(1.4 * var(--fluid)), 1.1875rem);
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 52ch;
}
/* The text is wysiwyg from the homepage hero, so it arrives wrapped in <p>. */
.hero-circle-text p {
  margin: 0;
}
.hero-circle-text p + p {
  margin-top: var(--space-sm);
}

.hero-circle-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hero-circle-proof {
  margin: var(--space-lg) 0 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-secondary);
}

/* ---- The circle ----
   Sized off the SECTION HEIGHT, not the viewport width, so it runs past the top
   and bottom edges the way the design does.

   Percentages rather than raw pixels so it holds at any width. aspect-ratio
   derives the width from the height, so it stays a circle rather than an
   ellipse whatever shape the section ends up:

       height 166%   left 55%   top -30%   — leaving 60% of it in the band */
.hero-circle-media {
  position: absolute;
  top: -30%;
  left: 55%;
  height: 166%;
  z-index: 1;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-light-alt);
}

/* The video is NOT set to fill the circle.

   object-fit: cover on a 1:1 box from a 16:9 source throws away 44% of the
   width — that is geometry, not a setting. Instead the video keeps its own 16:9
   shape and is sized by width, centred, with the circle clipping the overflow.

   --video-w is the one number to tune:

       100%  the full frame, nothing cropped, deep bands top and bottom
       130%  current — about 15% off each side, shallow bands
       178%  the point where it fills the circle, i.e. back to the full crop

   The bands show --color-light-alt. */
.hero-circle-media video,
.hero-circle-media img {
  --video-w: 130%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--video-w);
  height: 100%;
  display: block;
  object-fit: cover;
}

/* ---- The accent shape ----
   Tucked into the bottom left of the big circle, overlapping its lower curve
   and running off the bottom of the band.

   Placed in the same coordinate system as the circle rather than off the
   section's right edge, so the two stay locked together at any width. z-index 0
   puts it behind the video circle, which is what makes it read as tucked
   underneath rather than stuck on top. */
.hero-circle-shape {
  position: absolute;
  z-index: 0;
  left: 46%;
  bottom: -10%;
  height: 52%;
  aspect-ratio: 1;
  background: var(--color-accent);
  border-radius: 50%;
  pointer-events: none;
}

@media (max-width: 991px) {
  /* The circle goes into normal flow rather than staying absolute. As the second
     child of a now single-column grid it lands below the copy on its own, which
     is the only reliable way to keep it there — absolutely positioned it reached
     up behind the text however much bottom padding was reserved for it.

     It still bleeds: margin-left pushes it past the right edge and the negative
     margin-bottom runs it off the bottom, both clipped by the section. */
  .hero-circle {
    min-height: 0;
    display: block;
    padding-block: clamp(2.5rem, 7vw, 4rem) 0;
  }
  .hero-circle-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 3rem);
  }

  .hero-circle-media {
    position: relative;
    top: auto;
    left: auto;
    height: auto;
    width: 84vw;
    margin-left: 22%;
    margin-bottom: clamp(-9rem, -16vw, -5rem);
  }

  /* Absolute still, because it has to sit behind the circle rather than after
     it — but anchored to the section's bottom left so it tucks under the curve
     wherever the copy ends up pushing it. */
  .hero-circle-shape {
    left: 4%;
    bottom: clamp(-5rem, -9vw, -3rem);
    height: auto;
    width: clamp(8rem, 30vw, 13rem);
  }
}

@media (max-width: 600px) {
  /* Bigger in proportion and pushed further left, so more of the curve is on
     screen — on a narrow column a circle sitting mostly off the edge reads as a
     stray shape rather than a deliberate crop. */
  .hero-circle-media {
    width: 104vw;
    margin-left: 14%;
    margin-bottom: clamp(-7rem, -18vw, -4rem);
  }
  .hero-circle-shape {
    left: 0;
    bottom: clamp(-4rem, -10vw, -2.5rem);
    width: clamp(7rem, 34vw, 10rem);
  }
}

/* An autoplaying loop is motion, so anyone who has asked for less of it gets a
   still instead. This needs a poster on the <video> to fall back TO; without
   one the circle is just its own ground, which is honest but empty. */
@media (prefers-reduced-motion: reduce) {
  .hero-circle-media video {
    display: none;
  }
}

/* ==========================================================================
   HERO — GLOW (acf/hero-glow)

   The other static hero alternative: near-white ground with soft green washes,
   copy left, the product right in a pale panel with a green gradient coming out
   from behind it.

   Also fieldless — see the note on .hero-circle above.
   ========================================================================== */

.hero-glow {
  position: relative;
  overflow: hidden;
  /* Three layers on a near-white base: a wash behind the product on the right, a
     fainter one bottom left, then the pale tint underneath. Radial rather than
     linear so the colour has a source — it should read as light coming off the
     product, not as a panel behind it. */
  background:
    radial-gradient(
      58% 68% at 82% 42%,
      rgba(var(--color-accent-rgb), 0.3) 0%,
      rgba(var(--color-accent-rgb), 0) 68%
    ),
    radial-gradient(
      46% 60% at 6% 96%,
      rgba(var(--color-accent-rgb), 0.22) 0%,
      rgba(var(--color-accent-rgb), 0) 70%
    ),
    linear-gradient(180deg, #f4fbf7 0%, var(--color-bg-green) 100%);
  padding-block: clamp(3rem, 7vw, 6rem);
}

.hero-glow-inner {
  position: relative;
  z-index: 2;
  max-width: var(--profile-container-max);
  margin: 0 auto;
  padding-inline: clamp(1.5rem, 5vw, 5rem);
  display: grid;
  grid-template-columns: minmax(0, 45%) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}

/* min-width: 0 for the same reason as .hero-circle-content — a grid item will
   not shrink below its content without it, and one long word would widen the
   column past its 45%. */
.hero-glow-content {
  min-width: 0;
}

.hero-glow-title {
  margin: 0 0 var(--space-md);
  font-size: clamp(2.4rem, calc(5.4 * var(--fluid)), 4rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.04em;
  color: var(--color-dark);
}
.hero-glow-title .highlight {
  color: var(--color-accent);
}

.hero-glow-text {
  margin: 0 0 var(--space-lg);
  font-size: clamp(1.0625rem, calc(1.4 * var(--fluid)), 1.1875rem);
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 46ch;
}

.hero-glow-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hero-glow-proof {
  margin: var(--space-lg) 0 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-secondary);
}

/* ---- The product ----
   A pale panel with the media inset, which is what gives the screenshot room to
   breathe rather than sitting hard against the background.

   It runs off the right edge deliberately: the panel is wider than its column
   and the section clips it, so the product reads as continuing past the page
   rather than being a card dropped onto it. */
.hero-glow-media {
  position: relative;
  z-index: 1;
  margin-right: clamp(-9rem, -7vw, -3rem);
  padding: clamp(0.75rem, 1.4vw, 1.25rem);
  border-radius: clamp(20px, 2.2vw, 32px);
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* The glow behind it. A blurred ellipse rather than another gradient on the
   section, so it moves with the product if the layout changes and stays centred
   on it at any width. z-index -1 keeps it behind the panel; the section's own
   background still shows through the panel's translucency. */
.hero-glow-media::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -12% -18% -16% -8%;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(var(--color-accent-rgb), 0.55) 0%,
    rgba(var(--color-accent-rgb), 0) 100%
  );
  filter: blur(28px);
  pointer-events: none;
}

/* 16:10 rather than the circle variant's 1:1, so a landscape screen recording
   fills it with almost nothing cropped. */
.hero-glow-frame {
  border-radius: clamp(14px, 1.6vw, 22px);
  overflow: hidden;
  background: var(--color-white);
  box-shadow:
    0 24px 60px rgba(var(--color-dark-rgb), 0.16),
    0 2px 8px rgba(var(--color-dark-rgb), 0.06);
  aspect-ratio: 16 / 10;
}
.hero-glow-frame video,
.hero-glow-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 991px) {
  /* Stacked, product below the copy. It keeps running off the right — that is
     the shape of the thing — but not off the left as well, so the panel stays
     readable at a narrow width. */
  .hero-glow-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 3rem);
  }
  .hero-glow-media {
    margin-right: clamp(-6rem, -12vw, -2rem);
  }
  .hero-glow-text {
    max-width: none;
  }
}

@media (max-width: 600px) {
  .hero-glow {
    padding-block: clamp(2.5rem, 8vw, 3.5rem);
  }
  .hero-glow-media {
    margin-right: -1.5rem;
  }
  .hero-glow-frame {
    aspect-ratio: 4 / 3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-glow-frame video {
    display: none;
  }
}

/* ==========================================================================
   TEAM BLOCK (acf/team)

   A grid of people: photograph, name, role, department, with an optional
   pill filter on the department.

   THE CARD IS NOT NEW. main.css already has one, at line 747:

       .team-card .card-media { aspect-ratio: 1 / 1; border-radius: 0; }
       .team-card .team-role  { ...uppercase, green, letterspaced... }
       .team-card p           { font-size: 0.9375rem; muted }

   It sits in the CARDS section with .article-card and .service-card, on
   top of the shared .card-media / .card-body pair — a style-sheet
   component nothing has ever rendered. So the markup below uses it as
   written, square photographs and all, rather than declaring a second
   team card that competes with it. .team-role is its own class for the
   job title; using a bare <p> would have collided with the rule above.

   What IS new here is only the block around it: the section, the
   container, the heading and the grid. Same shape as .library and
   .benefits so it reads as one of the set.

   Not using .card-base, which is the family's shell — it carries a
   resting box-shadow, and resting shadows were taken off the archive,
   teaser and ebook cards. This follows .archive-card instead: 1px
   border, no shadow until hover.
   ========================================================================== */

.team {
  background: var(--color-white);
  padding: clamp(2.5rem, 6vw, 5rem) 0;
}
.team.bg-light {
  background: var(--color-light-alt);
}
.team-inner {
  max-width: var(--profile-container-max);
  margin: 0 auto;
  padding-inline: clamp(1.5rem, 5vw, 5rem);
}

/* ---- Heading ---- */
.team-head {
  text-align: center;
  max-width: 62ch;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
}
.team-title {
  margin: 0;
  font-size: clamp(1.9rem, calc(3.4 * var(--fluid)), 2.9rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.035em;
  color: var(--color-dark);
}
.team-intro {
  margin-top: var(--space-sm);
  color: var(--color-text-muted);
  font-size: 1.05rem;
  line-height: 1.6;
}
.team-intro p {
  margin: 0;
}
.team-intro p + p {
  margin-top: var(--space-sm);
}

/* ---- Filter ----
   .filter-list and .filter-pill are the archive filter bar's, reused
   unchanged — same pill, same active state, same focus ring. Only the
   centring is added, because the archives range theirs left in a bar and
   this one sits under a centred heading.

   Not sticky. The archive bars stick because those pages are long lists
   you scroll while filtering; a team grid is one screen and a sticky bar
   would hang over the page for no reason. */
.team-filter {
  justify-content: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* ---- Grid ----
   The column count is a class rather than an inline style so the
   breakpoints stay in the stylesheet, the same as .library-grid.

   cols-4 is the sensible default for a team: people are small cards and a
   wide grid keeps the section from running down the page. */
.team-grid {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.team-grid.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}
.team-grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}
.team-grid.cols-4 {
  grid-template-columns: repeat(4, 1fr);
}
.team-grid.cols-5 {
  grid-template-columns: repeat(5, 1fr);
}

/* ---- Card shell ----
   The only additions to the existing .team-card: the column layout, the
   border and the hover. Everything about the photograph and the job title
   is already declared at main.css:747.

   Construction copied from .archive-card — bordered, rounded, clipped, no
   resting shadow, lift on hover. */
.team-card {
  display: flex;
  flex-direction: column;
  background: var(--profile-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--profile-radius-md);
  overflow: hidden;
  transition: var(--profile-hover-transition);
  text-decoration: none;
  color: inherit;
}
/* A card that lifts under the cursor but does nothing when clicked is a
   broken affordance, so the hover is on .is-link only — the rule
   .library-card and .archive-card both follow. */
.team-card.is-link:hover {
  transform: var(--profile-hover-transform);
  box-shadow: var(--profile-hover-shadow);
}
.team-card.is-link:hover .team-name {
  color: var(--color-accent);
}

/* .card-media is 1/1 here, from main.css:747. Square headshots, which is
   what the existing component declares — so no ratio is overridden.

   object-position is the one addition: heads sit above the middle of a
   portrait, and a centred square crop of a 600x900 photograph cuts the
   top of the head off. */
.team-card .card-media {
  flex: 0 0 auto;
}
.team-card .card-media > img {
  object-position: 50% 22%;
}

/* The stand-in for someone with no photograph yet: their initials on a
   brand tint. Deliberate rather than a grey box, but still obviously not
   a portrait, so a half-populated team does not look broken.

   .card-media already supplies the 1/1 ratio and the clipping, so this
   only paints and centres. */
.team-card .card-media.is-initials {
  display: grid;
  place-items: center;
  background: var(--color-bg-green);
  font-size: clamp(1.5rem, calc(2.4 * var(--fluid)), 2.1rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-dark);
  opacity: 0.5;
}
.team-card .card-media.is-initials.tint-blue {
  background: var(--color-bg-blue);
}
.team-card .card-media.is-initials.tint-rose {
  background: var(--color-bg-rose);
}
.team-card .card-media.is-initials.tint-amber {
  background: var(--color-bg-amber);
}

/* .card-body already sets the padding and the 0.625rem stack spacing.
   This only makes it fill the card, so the department can pin to the
   bottom and line up across a row. */
.team-card .card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* The name. The h3 base is up to 1.6rem, which is heading-sized for a
   card this narrow — this brings it back to the same 1.05rem the library
   and archive card titles use. */
.team-name {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--color-dark);
  transition: color var(--transition-fast);
}

/* .team-role is main.css:748 — uppercase, letterspaced, green. Nothing
   added.

   The department, pinned to the bottom. Set quieter than the role so the
   two do not compete: the role is what the person does, the department is
   just what the filter matches on. */
.team-dept {
  margin-top: auto;
  padding-top: var(--space-sm);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-secondary);
}

/* Filtered-out cards. The hidden attribute does the hiding; this is only
   needed to beat the display: flex above, which would otherwise win. */
.team-card[hidden] {
  display: none;
}

@media (max-width: 1200px) {
  .team-grid.cols-5 {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 991px) {
  .team-grid.cols-3,
  .team-grid.cols-4,
  .team-grid.cols-5 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 767px) {
  .team-grid.cols-2,
  .team-grid.cols-3,
  .team-grid.cols-4,
  .team-grid.cols-5 {
    grid-template-columns: repeat(2, 1fr);
  }
  .team-card .card-body {
    padding: var(--space-sm);
  }
}

/* ==========================================================================
   GALLERY BLOCK (acf/gallery)

   A photo grid. No heading on the pictures, no body copy, no links — just
   the photographs, which is exactly why no existing block does it: library
   and archive cards are white panels with a padded body, so an image-only
   card renders with an empty box under every picture.

   The default arrangement is deliberately uneven. Photographs of an office
   come in whatever shape they were taken; a row of identical 16/9 crops
   throws away most of a portrait and makes five different pictures look
   like one contact sheet. So the first cell takes two rows and two others
   take two columns, and the varied source ratios become the point.
   ========================================================================== */

.gallery {
  background: var(--color-white);
  padding: clamp(2.5rem, 6vw, 5rem) 0;
}
.gallery.bg-light {
  background: var(--color-light-alt);
}
.gallery-inner {
  max-width: var(--profile-container-max);
  margin: 0 auto;
  padding-inline: clamp(1.5rem, 5vw, 5rem);
}

.gallery-head {
  text-align: center;
  max-width: 62ch;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
}
.gallery-title {
  margin: 0;
  font-size: clamp(1.9rem, calc(3.4 * var(--fluid)), 2.9rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.035em;
  color: var(--color-dark);
}
.gallery-intro {
  margin-top: var(--space-sm);
  color: var(--color-text-muted);
  font-size: 1.05rem;
  line-height: 1.6;
}
.gallery-intro p {
  margin: 0;
}

/* Fixed row height rather than aspect-ratio on the cells, because the
   cells span different numbers of rows — a ratio per cell would fight the
   spans.

   The rows are deliberately tall. At 15vw the pictures were postage stamps in a
   1440 container and the whole point of the section — that these are real
   photographs of real people — did not land. 22vw is roughly a 300px row on a
   1440 canvas, so the two-row cell is 600px high and reads as a photograph
   rather than a thumbnail. */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(12rem, 22vw, 19rem);
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

/* .is-mosaic is the uneven default arrangement. Cell 1 tall, cells 2 and 4
   wide. Written as nth-child so the block needs no per-image setting —
   upload five photographs and the shape happens.

   Anything past the fifth falls through to a plain 1x1 cell, which is why
   the rules are numbered rather than using a loop. */
.gallery-grid.is-mosaic > :nth-child(1) {
  grid-row: span 2;
}
.gallery-grid.is-mosaic > :nth-child(2) {
  grid-column: span 2;
}
.gallery-grid.is-mosaic > :nth-child(4) {
  grid-column: span 2;
}

/* .is-even is the alternative: every picture the same size, for a set that
   was shot to match. */
.gallery-grid.is-even > * {
  grid-row: span 1;
  grid-column: span 1;
}

.gallery-item {
  overflow: hidden;
  border-radius: var(--profile-radius-md);
  background: var(--color-light-alt);
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
/* A slow push in on hover. The only movement in the block, and it is the
   picture rather than the card, so nothing shifts in the layout. */
.gallery-item:hover img {
  transform: scale(1.04);
}

@media (max-width: 991px) {
  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* The mosaic spans assume four columns. In two, a cell spanning two
     columns is a full-width band and the arrangement stops meaning
     anything, so only the tall first cell survives. */
  .gallery-grid.is-mosaic > :nth-child(2),
  .gallery-grid.is-mosaic > :nth-child(4) {
    grid-column: span 1;
  }
}

@media (max-width: 600px) {
  .gallery-grid {
    grid-auto-rows: clamp(9rem, 42vw, 13rem);
  }
  .gallery-grid.is-mosaic > :nth-child(1) {
    grid-row: span 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-item img {
    transition: none;
  }
  .gallery-item:hover img {
    transform: none;
  }
}

/* ==========================================================================
   CLOSING FIGURES BAND (.stat-closing)

   The second set of figures, near the foot of the About page. Same markup as
   the .stat-band at the top — .stat-band-grid, .stat-item, .stat-figure,
   .stat-label — so there is no second component to keep in step, only a
   modifier that changes how it is dressed.

   WHY IT LOOKS DIFFERENT TO THE TOP BAR
   The two hold nearly the same numbers, so rendering them identically twice on
   one page reads as a mistake. The top bar is a ruled row on white and belongs
   to the hero. This is a full-width tinted band with the figures centred and
   set larger, and it belongs to the close — the last thing before the CTA.

   WHY GREEN AND NOT NAVY
   The client's mockup had this band navy, which worked there because their CTA
   was green. Ours is navy, so a navy figures band would run straight into it as
   one unbroken slab. Green separates the two and is the only brand ground the
   page has not used yet.

   To match the mockup exactly instead, put .bg-navy styling here and add
   .green to the .cta-banner below it — that modifier already exists.
   ========================================================================== */

.stat-closing {
  background: var(--color-bg-green);
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}

/* .stat-band carries its own vertical margin for use inside a container. Inside
   a band that owns its padding, that margin is a second gap doing the same job. */
.stat-closing .stat-band {
  margin: 0;
}

.stat-closing .stat-band-grid {
  text-align: center;
}

/* No rules. The cycling green/blue/amber/rose top borders are the top bar's
   signature — repeating them here is what would make the two read as the same
   component twice rather than as an opening and a close. */
.stat-closing .stat-item {
  padding-top: 0;
  border-top: 0;
}

.stat-closing .stat-figure {
  font-size: clamp(2.4rem, calc(4.4 * var(--fluid)), 3.5rem);
  letter-spacing: -0.04em;
}

/* The accented part of a figure — the "M+" on 1.5M+, the "100" in 100%.
   accent-dark rather than accent: the pale green ground is light, and the
   brighter green does not hold against it at this size. */
.stat-closing .stat-figure .ac {
  color: var(--color-accent-dark);
}

.stat-closing .stat-label {
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
}

@media (max-width: 767px) {
  /* .stat-band-grid already drops to two columns here. */
  .stat-closing {
    padding: clamp(2rem, 8vw, 3rem) 0;
  }
}

/* ==========================================================================
   BENEFITS — NUMBER IN THE ICON TILE (.benefits-item-icon.is-number)

   A numbered step instead of an icon, in the same tile the icons sit in.

   The tile itself is untouched — .benefits-item-icon already draws a 44px
   rounded square and .benefits-item:nth-child(4n+2/3/4) already cycles its
   background green → blue → rose → amber. A numbered item picks all of that up
   for free; the only thing missing is the number's own colour, because the
   existing rules colour an SVG's stroke and there is no SVG here.

   So this is four declarations of type and four of colour, matching the stroke
   colours one for one. Nothing about the box is re-declared.

   tabular-nums so 01 and 10 are the same width and the tiles do not shift.
   ========================================================================== */

.benefits-item-icon.is-number {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
}

/* The same cycle the SVG strokes follow, so a numbered row and an iconed row
   are the same four colours in the same order. */
.benefits-item:nth-child(4n + 2) .benefits-item-icon.is-number {
  color: var(--color-blue);
}
.benefits-item:nth-child(4n + 3) .benefits-item-icon.is-number {
  color: var(--color-rose);
}
.benefits-item:nth-child(4n + 4) .benefits-item-icon.is-number {
  color: var(--color-amber);
}

/* On a coloured banner the tiles go translucent white and the strokes go white,
   so a number does too — otherwise it would sit in a white tile in brand green
   on a navy ground. */
.benefits.is-banner .benefits-item-icon.is-number {
  color: #fff;
}

/* ==========================================================================
   GALLERY LIGHTBOX

   Click a photograph and it opens full size over the page.

   Built on the .search-overlay pattern rather than a native <dialog>: the same
   .is-open / aria-hidden / body-lock shape, the same transition tokens, the
   same navy backdrop. <dialog> would have given the focus trap and Escape for
   free, but it would also have been a second, different way of doing the one
   thing this codebase already does one way.
   ========================================================================== */

/* ---- The trigger ----
   .gallery-item is a <button> now, so it needs the browser's button styling
   taken off before it can be a grid cell again. Everything else about it —
   radius, clipping, the hover push-in — is unchanged from the static version. */
.gallery-item {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: zoom-in;
  display: block;
  width: 100%;
}
.gallery-item:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* ---- The overlay ---- */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(var(--color-dark-rgb), 0.94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--transition-base),
    visibility var(--transition-base);
}
.gallery-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

/* Above .search-overlay's 200 so the two cannot fight, and the same lock the
   search overlay uses so the page behind does not scroll. */
body.gallery-open {
  overflow: hidden;
}

/* ---- The picture ----
   No width or height set, only maxima — so an image is never scaled ABOVE its
   natural size. That matters here: the source files are 900px wide, and on a
   1440px screen a stretched-to-fit lightbox would show them softer than the
   thumbnail that was clicked, which is the opposite of what a lightbox is for.

   Bigger source files would fill more of the screen. Nothing else needs to
   change for that; the rule already allows it. */
.gallery-lightbox-figure {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-lightbox-figure img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - clamp(6rem, 16vw, 10rem));
  width: auto;
  height: auto;
  border-radius: var(--profile-radius-md);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

/* ---- Controls ----
   Circular, translucent white, the same shape as .search-overlay-close. */
.gallery-lightbox-close,
.gallery-lightbox-nav {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.gallery-lightbox-close:hover,
.gallery-lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.2);
}
.gallery-lightbox-close:focus-visible,
.gallery-lightbox-nav:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.gallery-lightbox-close svg,
.gallery-lightbox-nav svg {
  width: 1.15rem;
  height: 1.15rem;
  stroke: currentColor;
  stroke-width: 2.25;
  fill: none;
}

.gallery-lightbox-close {
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
}
.gallery-lightbox-nav.is-prev {
  left: clamp(0.5rem, 2.5vw, 2rem);
}
.gallery-lightbox-nav.is-next {
  right: clamp(0.5rem, 2.5vw, 2rem);
}
.gallery-lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
}

/* ---- Position counter ---- */
.gallery-lightbox-count {
  position: absolute;
  bottom: clamp(1rem, 3vw, 2rem);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.65);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
  /* The arrows would sit on top of the picture at this width, so they move to
     the bottom bar beside the counter. */
  .gallery-lightbox-nav {
    top: auto;
    bottom: clamp(0.75rem, 3vw, 1.25rem);
    transform: none;
  }
  .gallery-lightbox-nav.is-prev {
    left: clamp(1rem, 8vw, 3rem);
  }
  .gallery-lightbox-nav.is-next {
    right: clamp(1rem, 8vw, 3rem);
  }
  .gallery-lightbox-figure img {
    max-height: calc(100vh - 11rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-lightbox {
    transition: none;
  }
}

/* ==========================================================================
   BLOCK — contact_form (acf/contact-form)

   Two sections from one block, the top of the contact page.

   .contact-hero  A navy band with the copy on the left and the white form
                  card on the right. The band is a pseudo-element that stops a
                  few rem short of the section's bottom, so the card — which is
                  taller than the band — hangs over the edge onto the light
                  ground below. The rings bottom-left are decoration.
   .contact-ways  "Other ways to reach us". Centred eyebrow and heading, then
                  the channels as three columns with an icon square, a title,
                  a note and the linked detail, hairlines between them.

   Form controls inside the card are the existing primitives (.form-field,
   .form-label, .text-field, .form-checkbox); the rules here are layout.
   ========================================================================== */
.contact-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* The ground the card hangs onto. */
  /* background: var(--color-light-alt); */
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
}
/* The band. The same green wash the homepage hero and the Book A Demo block
   paint — a soft accent glow over the pale green tint fading to white —
   ending above the section's bottom so the card overlaps its edge. */
.contact-hero::before {
  content: '';
  position: absolute;
  /* The band ends this far above the section's bottom; the card, taller than
     the copy, hangs over the edge onto the light ground. */
  inset: 0 0 clamp(5rem, 10vw, 8rem) 0;
  z-index: -1;
  background:
    radial-gradient(
      62% 70% at 78% 0%,
      rgba(var(--color-accent-rgb), 0.22) 0%,
      rgba(var(--color-accent-rgb), 0) 68%
    ),
    linear-gradient(180deg, var(--color-bg-green) 0%, #eef7f2 100%);
}

.contact-hero-inner {
  max-width: var(--profile-container-max);
  margin: 0 auto;
  padding-inline: clamp(1.5rem, 5vw, 5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.contact-card {
  justify-self: end;
  width: 100%;
  max-width: 37rem;
}
/* "For enquiries" inside the hero copy, under the intro: a quieter heading
   than the title, with the same eyebrow the sections below use. */
.contact-hero-more {
  margin-top: var(--space-xl);
  max-width: 34rem;
}
.contact-hero-more .contact-eyebrow {
  margin-bottom: 0.5rem;
}
.contact-hero-more-title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.25rem, calc(1.9 * var(--fluid)), 1.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--color-dark);
}
.contact-hero-more-title .highlight {
  color: var(--color-accent);
}
.contact-hero-more-text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* ---- Left: the copy, on the green wash ---- */
.contact-hero-copy {
  position: relative;
  min-width: 0;
  /* Sits a little lower than the card top, as a title beside a form does. */
  padding-top: clamp(1rem, 3vw, 3rem);
  padding-bottom: clamp(5rem, 10vw, 8rem);
  color: var(--color-dark);
}
.contact-hero-eyebrow {
  margin: 0 0 var(--space-md);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
}
.contact-hero-title {
  margin: 0 0 var(--space-md);
  font-size: clamp(2.25rem, calc(4.6 * var(--fluid)), 3.5rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.04em;
  color: var(--color-dark);
}
.contact-hero-title .highlight {
  color: var(--color-accent);
}
.contact-hero-text {
  max-width: 34rem;
  font-size: clamp(1.0625rem, calc(1.3 * var(--fluid)), 1.1875rem);
  line-height: 1.6;
  color: var(--color-text-muted);
}
.contact-hero-text > :first-child {
  margin-top: 0;
}
.contact-hero-text > :last-child {
  margin-bottom: 0;
}
.contact-hero-text p {
  margin: 0 0 var(--space-sm);
}
.contact-hero-text strong {
  color: var(--color-dark);
}
.contact-hero-text a {
  color: var(--color-accent-dark);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
/* Legacy content: the old block's "For Enquiries:" h3 and bullet list. */
.contact-hero-text h3,
.contact-hero-text h4 {
  margin: var(--space-md) 0 var(--space-xs);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-secondary);
}
.contact-hero-text ul,
.contact-hero-text ol {
  margin: 0 0 var(--space-sm);
  padding-left: 1.25rem;
}
.contact-hero-text li {
  margin-bottom: 0.35rem;
  font-size: 0.95rem;
}

/* Three rings along the bottom of the copy column, as quick links: a circle
   each with an icon over a short label. Runn's rings were decoration; these
   earn their place. */
.contact-hero-rings {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  margin-top: var(--space-lg);
}
.contact-hero-ring {
  width: clamp(6.5rem, 9vw, 8rem);
  height: clamp(6.5rem, 9vw, 8rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.75rem;
  border-radius: 50%;
  border: 2px solid rgba(var(--color-dark-rgb), 0.22);
  background: rgba(255, 255, 255, 0.35);
  color: var(--color-dark);
  text-decoration: none;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  transition: border-color var(--transition-base), background var(--transition-base), transform var(--transition-base);
}
.contact-hero-ring svg {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-accent);
  transition: color var(--transition-base);
}
.contact-hero-ring:hover,
.contact-hero-ring:focus-visible {
  border-color: var(--color-accent);
  background: var(--color-white);
  transform: translateY(-3px);
  outline: none;
}
.contact-hero-ring:hover svg,
.contact-hero-ring:focus-visible svg {
  color: var(--color-accent-dark);
}
.contact-hero-ring:focus-visible {
  box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.45);
}

/* ---- Right: the form card ---- */
.contact-card {
  position: relative;
  min-width: 0;
  background: var(--color-white);
  border-radius: var(--profile-radius-lg);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--color-border);
  /* The deep drop shadow is what lifts the card off the wash and carries it
     over the band's edge onto the light ground — the same one the Book A
     Demo card uses. */
  box-shadow:
    0 32px 64px -32px rgba(var(--color-dark-rgb), 0.35),
    0 2px 6px rgba(var(--color-dark-rgb), 0.06);
}

/* Two fields to a row. Collapses on the card's own width rather than the
   viewport's, which is why this is 519px and not the 991px grid breakpoint. */
.contact-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-md);
}
@media (max-width: 519px) {
  .contact-row {
    grid-template-columns: 1fr;
  }
}

/* The consent checkboxes read as one unit, set apart from the fields above. */
.contact-consent {
  display: grid;
  gap: 0.75rem;
  margin-top: var(--space-xs);
}
.contact-consent .form-checkbox {
  margin: 0;
}

.contact-form-fields .button-holder {
  margin-top: var(--space-lg);
}
.contact-form-fields .main-button {
  width: 100%;
  justify-content: center;
}

/* ---- The two content sections under the hero ----
   The enquiry cards (their heading is up in the hero), then "For support"
   with its centred head and a hairline above. */
.contact-enquiries {
  background: var(--color-white);
  padding: clamp(3rem, 6vw, 4.5rem) 0;
}
.contact-ways {
  background: var(--color-white);
  padding: 0 0 clamp(3rem, 7vw, 5.5rem);
}
.contact-ways-inner {
  border-top: 1px solid var(--color-border);
  padding-top: clamp(3rem, 7vw, 5.5rem);
}
.contact-enquiries-inner,
.contact-ways-inner {
  max-width: var(--profile-container-max);
  margin: 0 auto;
  padding-inline: clamp(1.5rem, 5vw, 5rem);
  text-align: center;
}
.contact-section-head {
  max-width: 44rem;
  margin: 0 auto clamp(2rem, 5vw, 3.5rem);
}
.contact-eyebrow {
  margin: 0 0 var(--space-sm);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-secondary);
}
.contact-section-title {
  margin: 0;
  font-size: clamp(1.75rem, calc(3.4 * var(--fluid)), 2.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--color-dark);
}
.contact-section-title .highlight {
  color: var(--color-accent);
}
.contact-section-intro {
  margin: var(--space-md) auto 0;
  max-width: 38rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* ---- For enquiries: the four types as tinted cards ---- */
.contact-enquiries-grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 76rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md);
  text-align: left;
}
.contact-enquiry {
  padding: var(--space-lg);
  background: var(--color-light-alt);
  border-radius: var(--profile-radius-md);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.contact-enquiry:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}
.contact-enquiry .contact-way-icon {
  margin-bottom: var(--space-md);
}
.contact-enquiry-title {
  margin: 0 0 0.5rem;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-dark);
}
.contact-enquiry-text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* ---- For support: the three channels as hairline columns ---- */
.contact-ways-grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 68rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  text-align: left;
}
.contact-way {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: 0 clamp(1.25rem, 2.5vw, 2rem);
}
/* Hairlines between the columns, not around them. */
.contact-way + .contact-way {
  border-left: 1px solid var(--color-border);
}
.contact-way-icon {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: var(--profile-radius-sm);
  background: var(--color-dark);
  color: var(--color-white);
}
.contact-way-icon svg {
  width: 1.2rem;
  height: 1.2rem;
}
.contact-way-body {
  min-width: 0;
}
.contact-way-title {
  margin: 0.3rem 0 0.4rem;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-dark);
}
.contact-way-note {
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}
.contact-way-value {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-accent-dark);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.contact-way-value .btn-arrow {
  width: 0.9rem;
  height: 0.9rem;
  flex: 0 0 auto;
  transition: transform var(--transition-fast);
}
a.contact-way-value:hover,
a.contact-way-value:focus-visible {
  color: var(--color-dark);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
a.contact-way-value:hover .btn-arrow {
  transform: translateX(3px);
}

@media (max-width: 991px) {
  /* One column: the copy, then the card. The band only has to sit behind the
     copy and the card's top edge. */
  .contact-hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
  }
  .contact-hero-copy {
    padding-top: 0;
    padding-bottom: 0;
  }
  .contact-hero-more {
    margin-top: var(--space-lg);
  }
  .contact-card {
    max-width: none;
    justify-self: stretch;
  }
  .contact-hero::before {
    inset: 0 0 auto 0;
    height: min(62%, 44rem);
  }
  .contact-enquiries-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .contact-ways-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
  }
}
@media (max-width: 599px) {
  .contact-enquiries-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .contact-way {
    padding: 0;
  }
  .contact-way + .contact-way {
    border-left: 0;
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-lg);
  }
}
@media (max-width: 479px) {
  .contact-card {
    padding: var(--space-md);
    border-radius: var(--profile-radius-md);
  }
}
/* ==========================================================================
   THANK-YOU PAGE (template-thank-you.php)

   Where every form lands. The hero is the contact hero's green wash, centred:
   a tick in a ring, eyebrow, title, one line, two buttons. Under it, "What
   happens next" in the Book A Demo block's step cards, and the three latest
   posts in the archive card. The section heads reuse the contact block's
   .contact-section-head / .contact-eyebrow / .contact-section-title.
   ========================================================================== */
.thanks-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(4rem, 9vw, 7rem) 0 clamp(3.5rem, 7vw, 6rem);
  text-align: center;
  background:
    radial-gradient(
      62% 70% at 50% 0%,
      rgba(var(--color-accent-rgb), 0.22) 0%,
      rgba(var(--color-accent-rgb), 0) 68%
    ),
    linear-gradient(180deg, var(--color-bg-green) 0%, var(--color-white) 100%);
}
.thanks-hero-inner {
  max-width: 44rem;
  margin: 0 auto;
  padding-inline: clamp(1.5rem, 5vw, 5rem);
}
/* The tick: a green ring with a white tick, the one moment of celebration. */
.thanks-tick {
  display: inline-grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  margin-bottom: var(--space-lg);
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-white);
  box-shadow:
    0 0 0 10px rgba(var(--color-accent-rgb), 0.16),
    0 18px 36px -18px rgba(var(--color-accent-rgb), 0.7);
  animation: thanks-pop 600ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.thanks-tick svg {
  width: 2.1rem;
  height: 2.1rem;
}
@keyframes thanks-pop {
  from {
    transform: scale(0.4);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .thanks-tick {
    animation: none;
  }
}
.thanks-eyebrow {
  margin: 0 0 var(--space-sm);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
}
.thanks-title {
  margin: 0 0 var(--space-md);
  font-size: clamp(2.25rem, calc(4.6 * var(--fluid)), 3.5rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.04em;
  color: var(--color-dark);
}
.thanks-title .highlight {
  color: var(--color-accent);
}
.thanks-text {
  margin: 0 auto var(--space-lg);
  max-width: 36rem;
  font-size: clamp(1.0625rem, calc(1.3 * var(--fluid)), 1.1875rem);
  line-height: 1.6;
  color: var(--color-text-muted);
}
.thanks-text a {
  color: var(--color-accent-dark);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.thanks-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

/* ---- The sections under the hero ---- */
.thanks-inner {
  max-width: var(--profile-container-max);
  margin: 0 auto;
  padding-inline: clamp(1.5rem, 5vw, 5rem);
  text-align: center;
}
.thanks-body {
  padding: clamp(2rem, 5vw, 3.5rem) 0 0;
}
.thanks-body-inner {
  max-width: 46rem;
  text-align: left;
}
.thanks-next {
  padding: clamp(3rem, 7vw, 5.5rem) 0;
}
/* The Book A Demo block's step cards, three across instead of stacked. The
   translucent card ground was for the demo's tinted wash; on white they take
   the light-alt tint the enquiry cards use. */
.thanks-steps {
  max-width: 72rem;
  margin: 0 auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
  text-align: left;
}
.thanks-steps .book-demo-step {
  background: var(--color-light-alt);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
}
.thanks-posts {
  padding: 0 0 clamp(3rem, 7vw, 5.5rem);
}
.thanks-next + .thanks-posts .thanks-inner {
  border-top: 1px solid var(--color-border);
  padding-top: clamp(3rem, 7vw, 5.5rem);
}
.thanks-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  text-align: left;
}
.thanks-posts-grid .archive-card__body .badge {
  align-self: flex-start;
  margin-bottom: var(--space-sm);
}

@media (max-width: 991px) {
  .thanks-steps,
  .thanks-posts-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 479px) {
  .thanks-actions .main-button {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   HERO TRUST STRIP (.hero-trust) — printed by the Home Hero block under the
   hero, replacing .parent-brand.

   One row of proof: the G2 rating as a tile — big number, five stars, a
   caption — then the accreditation and award badges at full strength in white
   cards. It sits on its own white ground between the tinted hero and the logo
   rail, and the rail beneath is quietened by the sibling rules at the end so
   the two no longer compete: the strip is the headline, the logos the
   supporting line.
   ========================================================================== */
.hero-trust {
  background: var(--color-white);
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 5vw, 5rem) 0;
}
.hero-trust-inner {
  max-width: var(--profile-container-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2.5vw, 2rem) clamp(1.5rem, 4vw, 3.5rem);
}

/* ---- The rating tile ---- */
.hero-trust-rating {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: 0.85rem;
  align-items: center;
  padding: 0.85rem 1.25rem 0.85rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--profile-radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
  color: var(--color-dark);
  text-decoration: none;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
a.hero-trust-rating:hover,
a.hero-trust-rating:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}
.hero-trust-mark {
  grid-row: 1 / span 2;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ff492c; /* G2's red, the one brand colour the tile borrows */
  color: var(--color-white);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.hero-trust-score {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 1;
}
.hero-trust-score strong {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--color-dark);
}
/* Five stars from one glyph run, the fill clipped to the score: --stars is
   0–5, so the fill is (score / 5) of the width. */
.hero-trust-stars {
  position: relative;
  display: inline-block;
  font-size: 1.05rem;
  line-height: 1;
  letter-spacing: 0.05em;
  color: rgba(var(--color-dark-rgb), 0.18);
}
.hero-trust-stars::before,
.hero-trust-stars-fill::before {
  content: '★★★★★';
}
.hero-trust-stars-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--stars, 0) / 5 * 100%);
  overflow: hidden;
  white-space: nowrap;
  color: var(--color-amber);
}
.hero-trust-caption {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* ---- The badges ---- */
.hero-trust-badges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
.hero-trust-badge {
  display: grid;
  place-items: center;
  height: 4.5rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--profile-radius-md);
  background: var(--color-white);
}
.hero-trust-badge img {
  display: block;
  width: auto;
  height: 100%;
  max-width: 8.5rem;
  max-height: 3.3rem;
  object-fit: contain;
}

/* ---- The logo rail beneath recedes ----
   Keyed off the strip so the Logo Carousel block is untouched elsewhere: a
   small muted lead-in instead of a heading, the ratings line (if the editor
   has left one) reduced to a footnote, greyscale logos that colour on hover,
   and less air above so it reads as the strip's continuation. */
.hero-trust + .client-logos {
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
}
.hero-trust + .client-logos .client-logos-head {
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.hero-trust + .client-logos .client-logos-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin: 0;
}
.hero-trust + .client-logos .client-logos-sub {
  margin-top: 0.5rem;
  font-size: 0.85rem;
}
/* The subtitle wysiwyg on the live page still carries Bootstrap wrappers
   (.row, .col-*, .has-long-text); flatten their spacing. */
.hero-trust + .client-logos .client-logos-sub p {
  margin: 0;
}
.hero-trust + .client-logos.logos-colour .logo-item {
  opacity: 0.55;
  filter: grayscale(1);
  transition: opacity var(--transition-base), filter var(--transition-base);
}
.hero-trust + .client-logos.logos-colour .logo-item:hover {
  opacity: 1;
  filter: none;
}

@media (max-width: 767px) {
  .hero-trust-inner {
    flex-direction: column;
  }
  .hero-trust-badge {
    height: 3.75rem;
    padding: 0.5rem 0.75rem;
  }
  .hero-trust-badge img {
    max-width: 6.5rem;
    max-height: 2.75rem;
  }
}

/* ---- Bottom bar: Area Footer left, copyright and legal right ----
   The areas (Site Content > Footer > Area Footer) are paragraphs, one per
   area, set in the bar's own type — the same size and colour as the copyright
   line and the legal links — and run inline with dot separators so they read
   as one line. The copyright and legal links share the right-hand side. */
/* One line: nothing wraps until the container is too narrow for it all, the
   areas do not take more room than they need, and the gaps between items and
   between the two halves are tight. */
.footer-alt .footer-bar {
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--space-md);
}
.footer-alt .footer-areas {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
}
.footer-alt .footer-areas p {
  display: inline-flex;
  align-items: center;
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}
.footer-alt .footer-areas p + p::before {
  content: '';
  width: 3px;
  height: 3px;
  margin: 0 0.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}
.footer-alt .footer-areas a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}
.footer-alt .footer-areas a:hover {
  color: #fff;
}
.footer-alt .footer-bar-right {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-sm);
  margin-left: auto;
  flex: 0 0 auto;
}
.footer-alt .footer-bar-right .footer-copy,
.footer-alt .footer-legal a {
  white-space: nowrap;
}
.footer-alt .footer-bar-right .footer-legal {
  gap: var(--space-sm);
  flex-wrap: nowrap;
}
/* Too narrow for one line: let the halves stack, and let each wrap. */
@container (max-width: 991px) {
  .footer-alt .footer-bar {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .footer-alt .footer-areas,
  .footer-alt .footer-bar-right,
  .footer-alt .footer-bar-right .footer-legal {
    flex-wrap: wrap;
  }
  .footer-alt .footer-bar-right {
    justify-content: flex-start;
    margin-left: 0;
  }
}

/* ==========================================================================
   CASE STUDY TILES (.case-tiles / .case-tile)
   The case studies row on the feature, product, role and industry pages.
   Compact: the company logo, the headline, a "read the story" link. No image
   box — these images are logos, and a logo does not need a 16:9 stage.

   Built from the archive card's own recipe so the two sit together: the same
   card ground, border, radius and hover lift (the --profile-card-* tokens),
   the same title size, the logo on the light panel the archive puts logos on,
   and the link row on a hairline like .archive-card__foot. Three across, two
   on a tablet, one on a phone.
   ========================================================================== */
.case-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}
@media (max-width: 991px) {
  .case-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .case-tiles {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Two rows: the logo centred on top, then the headline and the link sharing
   the bottom row — headline left, link right, space between. */
.case-tile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: var(--space-md);
  align-items: end;
  padding: var(--space-md);
  background: var(--profile-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--profile-radius-md);
  color: inherit;
  text-decoration: none;
  transition: var(--profile-hover-transition);
}
/* No resting shadow — the border carries the edge and the lift is saved for
   hover, the same as .archive-card. */
a.case-tile:hover,
a.case-tile:focus-visible {
  transform: var(--profile-hover-transform);
  box-shadow: var(--profile-hover-shadow);
  outline: none;
}
a.case-tile:focus-visible {
  box-shadow: var(--profile-hover-shadow), 0 0 0 3px rgba(var(--color-accent-rgb), 0.35);
}
/* The logo, plain on the card — no panel behind it — centred in a
   fixed-height slot across both columns, so a wide wordmark and a square
   mark both sit whole and every tile's bottom row starts level. */
.case-tile-logo {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 7.25rem;
  /* The hairline between the logo and the bottom row, as .archive-card__foot
     draws above its footer. */
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}
.case-tile-logo img {
  display: block;
  width: auto;
  height: auto;
  max-height: 100%;
  max-width: 10rem;
  object-fit: contain;
}
.case-tile-title {
  grid-column: 1;
  align-self: end;
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--color-dark);
  transition: color var(--transition-fast);
}
a.case-tile:hover .case-tile-title {
  color: var(--color-accent-dark);
}
/* The link, on the bottom row to the right of the headline: dark at rest,
   green on hover, arrow nudging right. */
.case-tile-more {
  grid-column: 2;
  align-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  padding-bottom: 0.2rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-dark);
  transition: color var(--transition-fast);
}
.case-tile-more .btn-arrow {
  width: 0.9rem;
  height: 0.9rem;
  transition: transform var(--transition-fast);
}
a.case-tile:hover .case-tile-more {
  color: var(--color-accent);
}
a.case-tile:hover .case-tile-more .btn-arrow {
  transform: translateX(3px);
}
/* The stories archive adds a row of pills — category, sector, company size —
   between the logo and the headline. It spans both columns, otherwise it is
   auto-placed into the headline's column and squeezes it to a few characters.
   The tile then has three rows: logo, pills, and the headline/link row, which
   still takes the spare height so every tile's bottom row sits level. */
.case-tile.has-tags {
  grid-template-rows: auto auto minmax(0, 1fr);
}
.case-tile-tags {
  grid-column: 1 / -1;
  align-self: start;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: var(--space-md);
}
.case-tile-tags .badge {
  font-size: 0.7rem;
  padding: 0.2rem 0.6rem;
}
/* The stories archive stacks the tile like the blog card (.article-teaser):
   logo, pills, then the headline across the full width, and the link on a
   ruled foot at the bottom. Flex column rather than the two-column grid the
   compact tile uses, so the headline never shares a row with the link. */
.case-tile.is-stacked {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.case-tile.is-stacked .case-tile-logo {
  width: 100%;
}
.case-tile.is-stacked .case-tile-tags {
  margin-bottom: var(--space-sm);
}
.case-tile.is-stacked .case-tile-title {
  width: 100%;
  align-self: stretch;
}
.case-tile.is-stacked .case-tile-more {
  /* align-self: stretch undoes the compact tile's align-self: end, which
     would shrink the foot to the link's width and pull it right. Text on the
     left, arrow on the right, hairline across the whole tile. */
  align-self: stretch;
  display: flex;
  margin-top: auto;
  padding-top: var(--space-md);
  padding-bottom: 0;
  border-top: 1px solid var(--color-border);
  justify-content: space-between;
}
/* The headline keeps clear of the foot when the tile is taller than its
   content: the auto margin on the foot does the pushing, this is the minimum. */
.case-tile.is-stacked .case-tile-title {
  margin-bottom: var(--space-md);
}
/* ==========================================================================
   PAGE HEAD — glow and logos (acf/page-head, Sep 2026)
   .has-glow          the Hero Glow block's blurred green ellipse behind the
                      image/video. Same recipe as .hero-glow-media::before.
   .page-head-badges  the Hero Logos row under the copy — .hero-badges from
                      the Hero Circle block, left-aligned here.
   .page-head-corner  one logo under the media, right-aligned, 10px below it.
                      No tile, no shadow.
   ========================================================================== */
.page-head-media {
  position: relative;
  margin-left: auto;
}
.page-head.has-glow .page-head-media {
  z-index: 1;
}
/* With the glow on, the section takes the Home Hero's ground: a soft green
   wash from the top centre over the tint, fading to white lower down. The tint
   defaults to green as the Home Hero does; a bg-* class on the block still
   changes it. */
.page-head.has-glow:not(.bg-green):not(.bg-blue):not(.bg-red):not(.bg-orange) {
  --ph-tint: var(--color-bg-green);
}
.page-head.has-glow {
  background:
    radial-gradient(
      62% 58% at 50% 0%,
      rgba(var(--color-accent-rgb), 0.16) 0%,
      rgba(var(--color-accent-rgb), 0) 72%
    ),
    linear-gradient(180deg, var(--ph-tint) 0%, var(--color-white) 62%);
}
.page-head.has-glow .page-head-media::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -12% -16% -16% -12%;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(var(--color-accent-rgb), 0.55) 0%,
    rgba(var(--color-accent-rgb), 0) 100%
  );
  filter: blur(28px);
  pointer-events: none;
}
/* The media keeps its shape; the glow sits behind it. Lift it a touch so the
   ellipse reads as light coming out from behind rather than a halo on top. */
/* Direct children only, so the corner logo under the media is left alone. */
.page-head.has-glow .page-head-media > img,
.page-head.has-glow .page-head-media > video {
  position: relative;
  box-shadow:
    0 24px 60px rgba(var(--color-dark-rgb), 0.16),
    0 2px 8px rgba(var(--color-dark-rgb), 0.06);
}

.page-head-media img {
  width: auto;
  max-width: 100%;
  max-height: 500px;
}

.page-head .page-head-badges {
  justify-content: flex-start;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.page-head .page-head-badges img {
  height: clamp(2.75rem, 4.5vw, 4rem);
  max-width: 10rem;
}
.page-head.text-only .page-head-badges {
  justify-content: center;
}

.page-head-corner {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
.page-head-corner img {
  display: block;
  width: auto;
  max-height: 3rem;
  max-width: 12rem;
  object-fit: contain;
}
@media (max-width: 767px) {
  .page-head .page-head-badges {
    gap: var(--space-md) var(--space-lg);
  }
  .page-head .page-head-badges img {
    height: 2.5rem;
    max-width: 7rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .page-head.has-glow .page-head-media::before {
    filter: blur(20px);
  }
}

/* Mega menu overview: the optional line at the foot of the column (Overview
   Extra Text in Site Content > Navigation). Small and muted, it reads as a
   footnote to the column rather than part of the pitch, and it is what sits at
   the very bottom: margin-top:auto takes the free space, and the button, which
   normally pins itself to the foot, moves up under the lead text instead. */
.mega-overview-extra {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 0;
  margin-top: auto;
  padding-top: var(--space-md);
  padding-bottom: var(--space-lg);
  align-self: stretch;
  max-width: 19em;
}
.mega-overview.has-extra .mega-overview-cta {
  margin-top: var(--space-lg);
}
.mega-overview-extra a {
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}
.mega-overview-extra a:hover,
.mega-overview-extra a:focus-visible {
  color: var(--color-dark);
}

/* Demo page — interactive features accordion (template-demo.php). Five
   screenshots stacked in the one frame; only the one for the open panel shows.
   The frame keeps the first image's height so it does not jump between panels. */
.fa-shots {
  position: relative;
}
.fa-shots .fa-shot {
  display: none;
}
.fa-shots .fa-shot.is-active {
  display: block;
}

/* ==========================================================================
   BLOCK — latest_content (acf/latest-content)
   Up to four rows, each its archive's own card and grid (.archive-grid with
   .article-teaser / .ebook-teaser / .archive-card.is-story, and .webinar-list
   with .webinar-row). These rules only space the rows and size the row
   headings, which are h2 like the archives' own section heads.
   ========================================================================== */
.latest-content .latest-group + .latest-group {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.latest-content .latest-content-head {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.latest-content .latest-group-head {
  margin-bottom: var(--space-md);
}
.latest-content .latest-group-title {
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  margin: 0;
}
/* The archive grids and the webinar rows carry their own gaps; the group only
   needs its heading kept clear of the cards. */
.latest-content .archive-grid,
.latest-content .webinar-list {
  margin-top: 0;
}

/* Page Head with the glow on: the title at the Hero Glow block's size. */
.page-head.has-glow .page-head-content h1 {
  font-size: clamp(2.4rem, calc(5.4 * var(--fluid)), 4rem);
  line-height: 1.06;
}

/* Page Head on the homepage: half the usual bottom padding, so the block
   below sits closer. The vertical padding is clamp(2.5rem, 6vw, 5rem). */
.page-head.is-home .page-head-inner {
  padding-bottom: calc(clamp(2.5rem, 6vw, 5rem) / 2);
}

/* Case study tiles (the "Customer case studies" row on the single templates
   and the Case Studies block): the image fills the top of the card, edge to
   edge, instead of sitting as a contained logo in a slot. Negative margins
   cancel the tile's padding on three sides; the top corners follow the card's
   radius; the image covers the slot and crops rather than letterboxing. */
.case-tile .case-tile-logo,
.case-tile.is-stacked .case-tile-logo {
  /* Full card width: the tile's own width plus the padding cancelled either side. */
  width: calc(100% + 2 * var(--space-md));
  height: 10rem;
  padding: 0;
  margin: calc(-1 * var(--space-md)) calc(-1 * var(--space-md)) var(--space-md);
  border-bottom: 0;
  border-radius: var(--profile-radius-md) var(--profile-radius-md) 0 0;
  overflow: hidden;
  background: var(--color-light-alt);
  display: block;
}
.case-tile .case-tile-logo img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
}

/* Card images fill their box. .archive-card__media has a fixed aspect ratio
   but its img was width:100% / height:auto with object-fit commented out, so a
   featured image of any other shape sat centred with the tinted ground showing
   above and below. Cover crops instead. Placeholders (.is-placeholder — a
   client or site logo standing in for a photo) keep their contained sizing. */
.archive-card__media:not(.is-placeholder) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}