/* legacy-bridge — Bulma-era markup on DS tokens. Transitional; new work goes
   in blocks.css. */

/* grid */

.columns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter);
}
.columns:not(:last-child) { margin-bottom: var(--space-5); }
.columns.is-gapless { gap: 0; }

.columns.is-gapless > .column { max-width: none; }
.columns.is-multiline { flex-wrap: wrap; }
.columns.is-vcentered { align-items: center; }
.columns.is-centered { justify-content: center; }
.columns.is-mobile { flex-wrap: nowrap; }
.columns.reverse-columns { flex-direction: row-reverse; }

.column { flex: 1 1 0; min-width: 0; }
.column.is-narrow { flex: 0 0 auto; }

/* Bulma collapses everything to full width below tablet. */
@media (max-width: 768px) {
  .column { flex-basis: 100% !important; max-width: 100% !important; margin-left: 0 !important; }
}

/* typography */

.title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  color: var(--text-strong);
}
.title.is-1 { font-size: var(--fs-display); }
.title.is-2 { font-size: var(--fs-h1); }
.title.is-3 { font-size: var(--fs-h2); }
.title.is-4 { font-size: var(--fs-h3); }
.title.is-5 { font-size: var(--fs-h4); }
.title.is-6 { font-size: var(--fs-h5); }

.subtitle {
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  line-height: var(--lh-snug);
  color: var(--text-muted);
}

/* Bulma's own rhythm; the reset had flattened it */
.title:not(:last-child),
.subtitle:not(:last-child) { margin-bottom: var(--space-5); }
/* Bulma pulled the deck to 0.25rem; too tight here */
.title:not(.is-spaced) + .subtitle { margin-top: calc(var(--space-3) - var(--space-5)); }
.title.is-spaced,
.subtitle.is-spaced { margin-bottom: var(--space-5); }

/* the_content() output */
.content > * + * { margin-top: var(--space-4); }
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 { margin-top: var(--space-7); }
.content h2 { font-size: var(--fs-h2); }
.content h3 { font-size: var(--fs-h3); }
.content h4 { font-size: var(--fs-h4); }
.content ul, .content ol { padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.content ul { list-style: disc; }
.content ol { list-style: decimal; }
.content li::marker { color: var(--accent); }
/* prose links only; buttons keep their own colour */
.content a:not(.btn):not(.button) { color: var(--primary); }
.content a:not(.btn):not(.button):hover { color: var(--accent); }
.content table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.content th, .content td { text-align: left; padding: 0.85rem 1rem; border-bottom: 1px solid var(--border); }
.content th { color: var(--text-muted); font-weight: var(--fw-semibold); }
.content img { border-radius: var(--radius); }

/* buttons */

/* Covers Bulma's .button plus this theme's bespoke button classes
   (arrowlinkbutton, v2_solidarrowbutton, neonbluearrowbutton, …). */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.75rem 1.6rem;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  color: var(--text-strong);
  background: transparent;
  transition: all var(--dur) var(--ease);
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
}
.button:hover { transform: translateY(-1px); border-color: var(--accent); color: var(--accent); }

.button.is-primary,
.button.v2_solidarrowbutton,
.button.solidneonbluearrowbutton,
.button.solidroyalbluearrowbutton {
  background-image: var(--gradient-primary);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-cta);
}
.button.is-primary:hover,
.button.v2_solidarrowbutton:hover,
.button.solidneonbluearrowbutton:hover,
.button.solidroyalbluearrowbutton:hover { color: #fff; border-color: transparent; }

/* .is-outlined wins over the solid variants — matches Bulma's precedence. */
.button.is-primary.is-outlined,
.button.is-outlined {
  background: transparent;
  background-image: none;
  box-shadow: none;
  border-color: var(--border-strong);
  color: var(--text-strong);
}
.button.is-outlined:hover { border-color: var(--accent); color: var(--accent); }

.button.arrowlinkbutton {
  border: 0; padding-inline: 0; border-radius: 0;
  color: var(--primary); background: transparent;
}
.button.arrowlinkbutton::after { content: "→"; transition: transform var(--dur) var(--ease); }
.button.arrowlinkbutton:hover { color: var(--accent); transform: none; }
.button.arrowlinkbutton:hover::after { transform: translateX(3px); }

.button.is-small { padding: 0.5rem 1.1rem; font-size: var(--fs-xs); }
.button.is-large { padding: 0.95rem 2.1rem; font-size: var(--fs-body); }
.button.is-fullwidth { display: flex; width: 100%; }
.button.is-spaced { margin-top: var(--space-4); }

/* hero */

.hero { display: flex; flex-direction: column; justify-content: center; }

.hero-body { padding-block: 0; }
.hero-head, .hero-foot { flex-shrink: 0; }
.hero.is-primary, .primaryblue_bg_wrap { background: transparent; }
/* tokens.css gives this the dark set; it needs the ground to match. On the
   wrapper, not the section inside it — that one sits within .container and
   would leave light edges. */
.primaryblue_bg_wrap:has(.features_wrap.with_features_logo) {
  /* the homepage's radial rather than flat --bg, so the band has depth */
  background-color: var(--bg);
  background-image: var(--page-radial);
  padding-block: var(--space-9);
  color: var(--text);
}
/* Bulma's full-height hero modifiers reserved a viewport-tall band for what is
   now just a title block. */
.hero.is-fullheight, .hero.is-fullheight-with-navbar, .hero.is-medium, .hero.is-large { min-height: 0; }

/* level */

.level { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5); }
.level-item { display: flex; align-items: center; justify-content: center; flex-grow: 1; }
.level-left, .level-right { display: flex; align-items: center; gap: var(--space-4); }

/* fragments */

.notification { padding: var(--space-4) var(--space-5); border-radius: var(--radius); border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 60%, transparent); }
.tag { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.3rem 0.7rem; font-size: var(--fs-xs); border-radius: var(--radius-pill); border: 1px solid var(--border); color: var(--text-muted); }
.box { padding: var(--space-6); border-radius: var(--radius-lg); border: 1px solid var(--surface-border); background: color-mix(in srgb, var(--surface) 90%, transparent); box-shadow: var(--card-shadow); }

.spacer { height: var(--space-6); }
.spacer.is-small  { height: var(--space-4); }
.spacer.is-medium { height: var(--space-8); }
.spacer.is-large  { height: var(--space-10); }

.clearboth::after { content: ""; display: table; clear: both; }

/* Decorative chrome from the old design that has no place in the new one. */

.hero_background_gradient { display: none; }

/* utilities */

.has-text-centered { text-align: center; }
.has-text-left     { text-align: left; }
.has-text-right    { text-align: right; }
.has-text-white, .has-text-light { color: var(--text-strong); }
.has-text-grey, .has-text-grey-light { color: var(--text-muted); }

.is-hidden { display: none !important; }
@media (max-width: 768px)  { .is-hidden-mobile { display: none !important; } }
@media (min-width: 769px)  { .is-hidden-tablet { display: none !important; } }
@media (max-width: 1023px) { .is-hidden-touch  { display: none !important; } }
@media (min-width: 1024px) { .is-hidden-desktop { display: none !important; } }

.is-flex { display: flex; }
.is-block { display: block; }
.is-inline-block { display: inline-block; }
.is-relative { position: relative; }
.is-marginless { margin: 0 !important; }
.is-paddingless { padding: 0 !important; }
.margin-top-10 { margin-top: var(--space-4); }

/* The old scroll-entrance classes are re-implemented on the design system's
   IntersectionObserver — see .fadeInUp in aqua.css. Nothing needed here. */

/* generated column widths */
/* base (all widths) */
.column.is-1 { flex: 1 1 calc(8.3333% - var(--gutter)); max-width: calc(8.3333% - var(--gutter)); }
.column.is-2 { flex: 1 1 calc(16.6667% - var(--gutter)); max-width: calc(16.6667% - var(--gutter)); }
.column.is-3 { flex: 1 1 calc(25% - var(--gutter)); max-width: calc(25% - var(--gutter)); }
.column.is-4 { flex: 1 1 calc(33.3333% - var(--gutter)); max-width: calc(33.3333% - var(--gutter)); }
.column.is-5 { flex: 1 1 calc(41.6667% - var(--gutter)); max-width: calc(41.6667% - var(--gutter)); }
.column.is-6 { flex: 1 1 calc(50% - var(--gutter)); max-width: calc(50% - var(--gutter)); }
.column.is-7 { flex: 1 1 calc(58.3333% - var(--gutter)); max-width: calc(58.3333% - var(--gutter)); }
.column.is-8 { flex: 1 1 calc(66.6667% - var(--gutter)); max-width: calc(66.6667% - var(--gutter)); }
.column.is-9 { flex: 1 1 calc(75% - var(--gutter)); max-width: calc(75% - var(--gutter)); }
.column.is-10 { flex: 1 1 calc(83.3333% - var(--gutter)); max-width: calc(83.3333% - var(--gutter)); }
.column.is-11 { flex: 1 1 calc(91.6667% - var(--gutter)); max-width: calc(91.6667% - var(--gutter)); }
.column.is-12 { flex: 1 1 calc(100% - var(--gutter)); max-width: calc(100% - var(--gutter)); }
.column.is-offset-1 { margin-left: 8.3333%; }
.column.is-offset-2 { margin-left: 16.6667%; }
.column.is-offset-3 { margin-left: 25%; }
.column.is-offset-4 { margin-left: 33.3333%; }
.column.is-offset-5 { margin-left: 41.6667%; }
.column.is-offset-6 { margin-left: 50%; }
.column.is-offset-7 { margin-left: 58.3333%; }
.column.is-offset-8 { margin-left: 66.6667%; }
.column.is-offset-9 { margin-left: 75%; }
.column.is-offset-10 { margin-left: 83.3333%; }
.column.is-offset-11 { margin-left: 91.6667%; }

@media (max-width: 768px) {   /* -mobile */
  .column.is-1-mobile { flex: 1 1 calc(8.3333% - var(--gutter)); max-width: calc(8.3333% - var(--gutter)); }
  .column.is-2-mobile { flex: 1 1 calc(16.6667% - var(--gutter)); max-width: calc(16.6667% - var(--gutter)); }
  .column.is-3-mobile { flex: 1 1 calc(25% - var(--gutter)); max-width: calc(25% - var(--gutter)); }
  .column.is-4-mobile { flex: 1 1 calc(33.3333% - var(--gutter)); max-width: calc(33.3333% - var(--gutter)); }
  .column.is-5-mobile { flex: 1 1 calc(41.6667% - var(--gutter)); max-width: calc(41.6667% - var(--gutter)); }
  .column.is-6-mobile { flex: 1 1 calc(50% - var(--gutter)); max-width: calc(50% - var(--gutter)); }
  .column.is-7-mobile { flex: 1 1 calc(58.3333% - var(--gutter)); max-width: calc(58.3333% - var(--gutter)); }
  .column.is-8-mobile { flex: 1 1 calc(66.6667% - var(--gutter)); max-width: calc(66.6667% - var(--gutter)); }
  .column.is-9-mobile { flex: 1 1 calc(75% - var(--gutter)); max-width: calc(75% - var(--gutter)); }
  .column.is-10-mobile { flex: 1 1 calc(83.3333% - var(--gutter)); max-width: calc(83.3333% - var(--gutter)); }
  .column.is-11-mobile { flex: 1 1 calc(91.6667% - var(--gutter)); max-width: calc(91.6667% - var(--gutter)); }
  .column.is-12-mobile { flex: 1 1 calc(100% - var(--gutter)); max-width: calc(100% - var(--gutter)); }
  .column.is-offset-1-mobile { margin-left: 8.3333%; }
  .column.is-offset-2-mobile { margin-left: 16.6667%; }
  .column.is-offset-3-mobile { margin-left: 25%; }
  .column.is-offset-4-mobile { margin-left: 33.3333%; }
  .column.is-offset-5-mobile { margin-left: 41.6667%; }
  .column.is-offset-6-mobile { margin-left: 50%; }
  .column.is-offset-7-mobile { margin-left: 58.3333%; }
  .column.is-offset-8-mobile { margin-left: 66.6667%; }
  .column.is-offset-9-mobile { margin-left: 75%; }
  .column.is-offset-10-mobile { margin-left: 83.3333%; }
  .column.is-offset-11-mobile { margin-left: 91.6667%; }
}

@media (min-width: 769px) {   /* -tablet */
  .column.is-1-tablet { flex: 1 1 calc(8.3333% - var(--gutter)); max-width: calc(8.3333% - var(--gutter)); }
  .column.is-2-tablet { flex: 1 1 calc(16.6667% - var(--gutter)); max-width: calc(16.6667% - var(--gutter)); }
  .column.is-3-tablet { flex: 1 1 calc(25% - var(--gutter)); max-width: calc(25% - var(--gutter)); }
  .column.is-4-tablet { flex: 1 1 calc(33.3333% - var(--gutter)); max-width: calc(33.3333% - var(--gutter)); }
  .column.is-5-tablet { flex: 1 1 calc(41.6667% - var(--gutter)); max-width: calc(41.6667% - var(--gutter)); }
  .column.is-6-tablet { flex: 1 1 calc(50% - var(--gutter)); max-width: calc(50% - var(--gutter)); }
  .column.is-7-tablet { flex: 1 1 calc(58.3333% - var(--gutter)); max-width: calc(58.3333% - var(--gutter)); }
  .column.is-8-tablet { flex: 1 1 calc(66.6667% - var(--gutter)); max-width: calc(66.6667% - var(--gutter)); }
  .column.is-9-tablet { flex: 1 1 calc(75% - var(--gutter)); max-width: calc(75% - var(--gutter)); }
  .column.is-10-tablet { flex: 1 1 calc(83.3333% - var(--gutter)); max-width: calc(83.3333% - var(--gutter)); }
  .column.is-11-tablet { flex: 1 1 calc(91.6667% - var(--gutter)); max-width: calc(91.6667% - var(--gutter)); }
  .column.is-12-tablet { flex: 1 1 calc(100% - var(--gutter)); max-width: calc(100% - var(--gutter)); }
  .column.is-offset-1-tablet { margin-left: 8.3333%; }
  .column.is-offset-2-tablet { margin-left: 16.6667%; }
  .column.is-offset-3-tablet { margin-left: 25%; }
  .column.is-offset-4-tablet { margin-left: 33.3333%; }
  .column.is-offset-5-tablet { margin-left: 41.6667%; }
  .column.is-offset-6-tablet { margin-left: 50%; }
  .column.is-offset-7-tablet { margin-left: 58.3333%; }
  .column.is-offset-8-tablet { margin-left: 66.6667%; }
  .column.is-offset-9-tablet { margin-left: 75%; }
  .column.is-offset-10-tablet { margin-left: 83.3333%; }
  .column.is-offset-11-tablet { margin-left: 91.6667%; }
}

@media (max-width: 1023px) {  /* -touch */
  .column.is-1-touch { flex: 1 1 calc(8.3333% - var(--gutter)); max-width: calc(8.3333% - var(--gutter)); }
  .column.is-2-touch { flex: 1 1 calc(16.6667% - var(--gutter)); max-width: calc(16.6667% - var(--gutter)); }
  .column.is-3-touch { flex: 1 1 calc(25% - var(--gutter)); max-width: calc(25% - var(--gutter)); }
  .column.is-4-touch { flex: 1 1 calc(33.3333% - var(--gutter)); max-width: calc(33.3333% - var(--gutter)); }
  .column.is-5-touch { flex: 1 1 calc(41.6667% - var(--gutter)); max-width: calc(41.6667% - var(--gutter)); }
  .column.is-6-touch { flex: 1 1 calc(50% - var(--gutter)); max-width: calc(50% - var(--gutter)); }
  .column.is-7-touch { flex: 1 1 calc(58.3333% - var(--gutter)); max-width: calc(58.3333% - var(--gutter)); }
  .column.is-8-touch { flex: 1 1 calc(66.6667% - var(--gutter)); max-width: calc(66.6667% - var(--gutter)); }
  .column.is-9-touch { flex: 1 1 calc(75% - var(--gutter)); max-width: calc(75% - var(--gutter)); }
  .column.is-10-touch { flex: 1 1 calc(83.3333% - var(--gutter)); max-width: calc(83.3333% - var(--gutter)); }
  .column.is-11-touch { flex: 1 1 calc(91.6667% - var(--gutter)); max-width: calc(91.6667% - var(--gutter)); }
  .column.is-12-touch { flex: 1 1 calc(100% - var(--gutter)); max-width: calc(100% - var(--gutter)); }
  .column.is-offset-1-touch { margin-left: 8.3333%; }
  .column.is-offset-2-touch { margin-left: 16.6667%; }
  .column.is-offset-3-touch { margin-left: 25%; }
  .column.is-offset-4-touch { margin-left: 33.3333%; }
  .column.is-offset-5-touch { margin-left: 41.6667%; }
  .column.is-offset-6-touch { margin-left: 50%; }
  .column.is-offset-7-touch { margin-left: 58.3333%; }
  .column.is-offset-8-touch { margin-left: 66.6667%; }
  .column.is-offset-9-touch { margin-left: 75%; }
  .column.is-offset-10-touch { margin-left: 83.3333%; }
  .column.is-offset-11-touch { margin-left: 91.6667%; }
}

@media (min-width: 1024px) {  /* -desktop */
  .column.is-1-desktop { flex: 1 1 calc(8.3333% - var(--gutter)); max-width: calc(8.3333% - var(--gutter)); }
  .column.is-2-desktop { flex: 1 1 calc(16.6667% - var(--gutter)); max-width: calc(16.6667% - var(--gutter)); }
  .column.is-3-desktop { flex: 1 1 calc(25% - var(--gutter)); max-width: calc(25% - var(--gutter)); }
  .column.is-4-desktop { flex: 1 1 calc(33.3333% - var(--gutter)); max-width: calc(33.3333% - var(--gutter)); }
  .column.is-5-desktop { flex: 1 1 calc(41.6667% - var(--gutter)); max-width: calc(41.6667% - var(--gutter)); }
  .column.is-6-desktop { flex: 1 1 calc(50% - var(--gutter)); max-width: calc(50% - var(--gutter)); }
  .column.is-7-desktop { flex: 1 1 calc(58.3333% - var(--gutter)); max-width: calc(58.3333% - var(--gutter)); }
  .column.is-8-desktop { flex: 1 1 calc(66.6667% - var(--gutter)); max-width: calc(66.6667% - var(--gutter)); }
  .column.is-9-desktop { flex: 1 1 calc(75% - var(--gutter)); max-width: calc(75% - var(--gutter)); }
  .column.is-10-desktop { flex: 1 1 calc(83.3333% - var(--gutter)); max-width: calc(83.3333% - var(--gutter)); }
  .column.is-11-desktop { flex: 1 1 calc(91.6667% - var(--gutter)); max-width: calc(91.6667% - var(--gutter)); }
  .column.is-12-desktop { flex: 1 1 calc(100% - var(--gutter)); max-width: calc(100% - var(--gutter)); }
  .column.is-offset-1-desktop { margin-left: 8.3333%; }
  .column.is-offset-2-desktop { margin-left: 16.6667%; }
  .column.is-offset-3-desktop { margin-left: 25%; }
  .column.is-offset-4-desktop { margin-left: 33.3333%; }
  .column.is-offset-5-desktop { margin-left: 41.6667%; }
  .column.is-offset-6-desktop { margin-left: 50%; }
  .column.is-offset-7-desktop { margin-left: 58.3333%; }
  .column.is-offset-8-desktop { margin-left: 66.6667%; }
  .column.is-offset-9-desktop { margin-left: 75%; }
  .column.is-offset-10-desktop { margin-left: 83.3333%; }
  .column.is-offset-11-desktop { margin-left: 91.6667%; }
}

@media (min-width: 1216px) {  /* -widescreen */
  .column.is-1-widescreen { flex: 1 1 calc(8.3333% - var(--gutter)); max-width: calc(8.3333% - var(--gutter)); }
  .column.is-2-widescreen { flex: 1 1 calc(16.6667% - var(--gutter)); max-width: calc(16.6667% - var(--gutter)); }
  .column.is-3-widescreen { flex: 1 1 calc(25% - var(--gutter)); max-width: calc(25% - var(--gutter)); }
  .column.is-4-widescreen { flex: 1 1 calc(33.3333% - var(--gutter)); max-width: calc(33.3333% - var(--gutter)); }
  .column.is-5-widescreen { flex: 1 1 calc(41.6667% - var(--gutter)); max-width: calc(41.6667% - var(--gutter)); }
  .column.is-6-widescreen { flex: 1 1 calc(50% - var(--gutter)); max-width: calc(50% - var(--gutter)); }
  .column.is-7-widescreen { flex: 1 1 calc(58.3333% - var(--gutter)); max-width: calc(58.3333% - var(--gutter)); }
  .column.is-8-widescreen { flex: 1 1 calc(66.6667% - var(--gutter)); max-width: calc(66.6667% - var(--gutter)); }
  .column.is-9-widescreen { flex: 1 1 calc(75% - var(--gutter)); max-width: calc(75% - var(--gutter)); }
  .column.is-10-widescreen { flex: 1 1 calc(83.3333% - var(--gutter)); max-width: calc(83.3333% - var(--gutter)); }
  .column.is-11-widescreen { flex: 1 1 calc(91.6667% - var(--gutter)); max-width: calc(91.6667% - var(--gutter)); }
  .column.is-12-widescreen { flex: 1 1 calc(100% - var(--gutter)); max-width: calc(100% - var(--gutter)); }
  .column.is-offset-1-widescreen { margin-left: 8.3333%; }
  .column.is-offset-2-widescreen { margin-left: 16.6667%; }
  .column.is-offset-3-widescreen { margin-left: 25%; }
  .column.is-offset-4-widescreen { margin-left: 33.3333%; }
  .column.is-offset-5-widescreen { margin-left: 41.6667%; }
  .column.is-offset-6-widescreen { margin-left: 50%; }
  .column.is-offset-7-widescreen { margin-left: 58.3333%; }
  .column.is-offset-8-widescreen { margin-left: 66.6667%; }
  .column.is-offset-9-widescreen { margin-left: 75%; }
  .column.is-offset-10-widescreen { margin-left: 83.3333%; }
  .column.is-offset-11-widescreen { margin-left: 91.6667%; }
}

@media (min-width: 1504px) {  /* -fullhd (theme overrides $fullhd to 1440+2*gap) */
  .column.is-1-fullhd { flex: 1 1 calc(8.3333% - var(--gutter)); max-width: calc(8.3333% - var(--gutter)); }
  .column.is-2-fullhd { flex: 1 1 calc(16.6667% - var(--gutter)); max-width: calc(16.6667% - var(--gutter)); }
  .column.is-3-fullhd { flex: 1 1 calc(25% - var(--gutter)); max-width: calc(25% - var(--gutter)); }
  .column.is-4-fullhd { flex: 1 1 calc(33.3333% - var(--gutter)); max-width: calc(33.3333% - var(--gutter)); }
  .column.is-5-fullhd { flex: 1 1 calc(41.6667% - var(--gutter)); max-width: calc(41.6667% - var(--gutter)); }
  .column.is-6-fullhd { flex: 1 1 calc(50% - var(--gutter)); max-width: calc(50% - var(--gutter)); }
  .column.is-7-fullhd { flex: 1 1 calc(58.3333% - var(--gutter)); max-width: calc(58.3333% - var(--gutter)); }
  .column.is-8-fullhd { flex: 1 1 calc(66.6667% - var(--gutter)); max-width: calc(66.6667% - var(--gutter)); }
  .column.is-9-fullhd { flex: 1 1 calc(75% - var(--gutter)); max-width: calc(75% - var(--gutter)); }
  .column.is-10-fullhd { flex: 1 1 calc(83.3333% - var(--gutter)); max-width: calc(83.3333% - var(--gutter)); }
  .column.is-11-fullhd { flex: 1 1 calc(91.6667% - var(--gutter)); max-width: calc(91.6667% - var(--gutter)); }
  .column.is-12-fullhd { flex: 1 1 calc(100% - var(--gutter)); max-width: calc(100% - var(--gutter)); }
  .column.is-offset-1-fullhd { margin-left: 8.3333%; }
  .column.is-offset-2-fullhd { margin-left: 16.6667%; }
  .column.is-offset-3-fullhd { margin-left: 25%; }
  .column.is-offset-4-fullhd { margin-left: 33.3333%; }
  .column.is-offset-5-fullhd { margin-left: 41.6667%; }
  .column.is-offset-6-fullhd { margin-left: 50%; }
  .column.is-offset-7-fullhd { margin-left: 58.3333%; }
  .column.is-offset-8-fullhd { margin-left: 66.6667%; }
  .column.is-offset-9-fullhd { margin-left: 75%; }
  .column.is-offset-10-fullhd { margin-left: 83.3333%; }
  .column.is-offset-11-fullhd { margin-left: 91.6667%; }
}


.column.is-one-quarter { flex: 1 1 calc(25% - var(--gutter)); max-width: calc(25% - var(--gutter)); }
.column.is-one-third { flex: 1 1 calc(33.3333% - var(--gutter)); max-width: calc(33.3333% - var(--gutter)); }
.column.is-half { flex: 1 1 calc(50% - var(--gutter)); max-width: calc(50% - var(--gutter)); }
.column.is-two-thirds { flex: 1 1 calc(66.6667% - var(--gutter)); max-width: calc(66.6667% - var(--gutter)); }
.column.is-three-quarters { flex: 1 1 calc(75% - var(--gutter)); max-width: calc(75% - var(--gutter)); }
.column.is-one-fifth { flex: 1 1 calc(20% - var(--gutter)); max-width: calc(20% - var(--gutter)); }
.column.is-two-fifths { flex: 1 1 calc(40% - var(--gutter)); max-width: calc(40% - var(--gutter)); }
.column.is-three-fifths { flex: 1 1 calc(60% - var(--gutter)); max-width: calc(60% - var(--gutter)); }
.column.is-four-fifths { flex: 1 1 calc(80% - var(--gutter)); max-width: calc(80% - var(--gutter)); }

@media (max-width: 768px) {
  .column.is-one-quarter-mobile { flex: 1 1 calc(25% - var(--gutter)); max-width: calc(25% - var(--gutter)); }
  .column.is-one-third-mobile { flex: 1 1 calc(33.3333% - var(--gutter)); max-width: calc(33.3333% - var(--gutter)); }
  .column.is-half-mobile { flex: 1 1 calc(50% - var(--gutter)); max-width: calc(50% - var(--gutter)); }
  .column.is-two-thirds-mobile { flex: 1 1 calc(66.6667% - var(--gutter)); max-width: calc(66.6667% - var(--gutter)); }
  .column.is-three-quarters-mobile { flex: 1 1 calc(75% - var(--gutter)); max-width: calc(75% - var(--gutter)); }
  .column.is-one-fifth-mobile { flex: 1 1 calc(20% - var(--gutter)); max-width: calc(20% - var(--gutter)); }
  .column.is-two-fifths-mobile { flex: 1 1 calc(40% - var(--gutter)); max-width: calc(40% - var(--gutter)); }
  .column.is-three-fifths-mobile { flex: 1 1 calc(60% - var(--gutter)); max-width: calc(60% - var(--gutter)); }
  .column.is-four-fifths-mobile { flex: 1 1 calc(80% - var(--gutter)); max-width: calc(80% - var(--gutter)); }
}

@media (min-width: 769px) {
  .column.is-one-quarter-tablet { flex: 1 1 calc(25% - var(--gutter)); max-width: calc(25% - var(--gutter)); }
  .column.is-one-third-tablet { flex: 1 1 calc(33.3333% - var(--gutter)); max-width: calc(33.3333% - var(--gutter)); }
  .column.is-half-tablet { flex: 1 1 calc(50% - var(--gutter)); max-width: calc(50% - var(--gutter)); }
  .column.is-two-thirds-tablet { flex: 1 1 calc(66.6667% - var(--gutter)); max-width: calc(66.6667% - var(--gutter)); }
  .column.is-three-quarters-tablet { flex: 1 1 calc(75% - var(--gutter)); max-width: calc(75% - var(--gutter)); }
  .column.is-one-fifth-tablet { flex: 1 1 calc(20% - var(--gutter)); max-width: calc(20% - var(--gutter)); }
  .column.is-two-fifths-tablet { flex: 1 1 calc(40% - var(--gutter)); max-width: calc(40% - var(--gutter)); }
  .column.is-three-fifths-tablet { flex: 1 1 calc(60% - var(--gutter)); max-width: calc(60% - var(--gutter)); }
  .column.is-four-fifths-tablet { flex: 1 1 calc(80% - var(--gutter)); max-width: calc(80% - var(--gutter)); }
}

@media (max-width: 1023px) {
  .column.is-one-quarter-touch { flex: 1 1 calc(25% - var(--gutter)); max-width: calc(25% - var(--gutter)); }
  .column.is-one-third-touch { flex: 1 1 calc(33.3333% - var(--gutter)); max-width: calc(33.3333% - var(--gutter)); }
  .column.is-half-touch { flex: 1 1 calc(50% - var(--gutter)); max-width: calc(50% - var(--gutter)); }
  .column.is-two-thirds-touch { flex: 1 1 calc(66.6667% - var(--gutter)); max-width: calc(66.6667% - var(--gutter)); }
  .column.is-three-quarters-touch { flex: 1 1 calc(75% - var(--gutter)); max-width: calc(75% - var(--gutter)); }
  .column.is-one-fifth-touch { flex: 1 1 calc(20% - var(--gutter)); max-width: calc(20% - var(--gutter)); }
  .column.is-two-fifths-touch { flex: 1 1 calc(40% - var(--gutter)); max-width: calc(40% - var(--gutter)); }
  .column.is-three-fifths-touch { flex: 1 1 calc(60% - var(--gutter)); max-width: calc(60% - var(--gutter)); }
  .column.is-four-fifths-touch { flex: 1 1 calc(80% - var(--gutter)); max-width: calc(80% - var(--gutter)); }
}

@media (min-width: 1024px) {
  .column.is-one-quarter-desktop { flex: 1 1 calc(25% - var(--gutter)); max-width: calc(25% - var(--gutter)); }
  .column.is-one-third-desktop { flex: 1 1 calc(33.3333% - var(--gutter)); max-width: calc(33.3333% - var(--gutter)); }
  .column.is-half-desktop { flex: 1 1 calc(50% - var(--gutter)); max-width: calc(50% - var(--gutter)); }
  .column.is-two-thirds-desktop { flex: 1 1 calc(66.6667% - var(--gutter)); max-width: calc(66.6667% - var(--gutter)); }
  .column.is-three-quarters-desktop { flex: 1 1 calc(75% - var(--gutter)); max-width: calc(75% - var(--gutter)); }
  .column.is-one-fifth-desktop { flex: 1 1 calc(20% - var(--gutter)); max-width: calc(20% - var(--gutter)); }
  .column.is-two-fifths-desktop { flex: 1 1 calc(40% - var(--gutter)); max-width: calc(40% - var(--gutter)); }
  .column.is-three-fifths-desktop { flex: 1 1 calc(60% - var(--gutter)); max-width: calc(60% - var(--gutter)); }
  .column.is-four-fifths-desktop { flex: 1 1 calc(80% - var(--gutter)); max-width: calc(80% - var(--gutter)); }
}

@media (min-width: 1216px) {
  .column.is-one-quarter-widescreen { flex: 1 1 calc(25% - var(--gutter)); max-width: calc(25% - var(--gutter)); }
  .column.is-one-third-widescreen { flex: 1 1 calc(33.3333% - var(--gutter)); max-width: calc(33.3333% - var(--gutter)); }
  .column.is-half-widescreen { flex: 1 1 calc(50% - var(--gutter)); max-width: calc(50% - var(--gutter)); }
  .column.is-two-thirds-widescreen { flex: 1 1 calc(66.6667% - var(--gutter)); max-width: calc(66.6667% - var(--gutter)); }
  .column.is-three-quarters-widescreen { flex: 1 1 calc(75% - var(--gutter)); max-width: calc(75% - var(--gutter)); }
  .column.is-one-fifth-widescreen { flex: 1 1 calc(20% - var(--gutter)); max-width: calc(20% - var(--gutter)); }
  .column.is-two-fifths-widescreen { flex: 1 1 calc(40% - var(--gutter)); max-width: calc(40% - var(--gutter)); }
  .column.is-three-fifths-widescreen { flex: 1 1 calc(60% - var(--gutter)); max-width: calc(60% - var(--gutter)); }
  .column.is-four-fifths-widescreen { flex: 1 1 calc(80% - var(--gutter)); max-width: calc(80% - var(--gutter)); }
}

@media (min-width: 1504px) {
  .column.is-one-quarter-fullhd { flex: 1 1 calc(25% - var(--gutter)); max-width: calc(25% - var(--gutter)); }
  .column.is-one-third-fullhd { flex: 1 1 calc(33.3333% - var(--gutter)); max-width: calc(33.3333% - var(--gutter)); }
  .column.is-half-fullhd { flex: 1 1 calc(50% - var(--gutter)); max-width: calc(50% - var(--gutter)); }
  .column.is-two-thirds-fullhd { flex: 1 1 calc(66.6667% - var(--gutter)); max-width: calc(66.6667% - var(--gutter)); }
  .column.is-three-quarters-fullhd { flex: 1 1 calc(75% - var(--gutter)); max-width: calc(75% - var(--gutter)); }
  .column.is-one-fifth-fullhd { flex: 1 1 calc(20% - var(--gutter)); max-width: calc(20% - var(--gutter)); }
  .column.is-two-fifths-fullhd { flex: 1 1 calc(40% - var(--gutter)); max-width: calc(40% - var(--gutter)); }
  .column.is-three-fifths-fullhd { flex: 1 1 calc(60% - var(--gutter)); max-width: calc(60% - var(--gutter)); }
  .column.is-four-fifths-fullhd { flex: 1 1 calc(80% - var(--gutter)); max-width: calc(80% - var(--gutter)); }
}

/* Bulma card internals */
/* .card itself is design-system-owned; only its sub-parts are missing, and
   without them card text sits flush against the edge. */
.card-image { position: relative; display: block; overflow: hidden; }
.card-image img { width: 100%; height: auto; display: block; }
.card-content { padding: var(--space-5); }
.card-footer {
  display: flex;
  align-items: stretch;
  border-top: 1px solid var(--border);
  margin-top: auto; /* pins CTAs to the bottom so cards in a row line up */
}
.card-footer-item { display: flex; align-items: center; justify-content: center; flex: 1 1 0; padding: var(--space-4); }

/* resource cards */
.resource_link_card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  gap: 0;
  overflow: hidden;
}
.resource_link_card .card-content { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--space-2); }
.resource_link_card .card-content::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--brand-teal), var(--brand-electric-blue));
}
.resource_image_wrap { aspect-ratio: 16 / 9; background: var(--bg-elevated-2); }
.resource_image_wrap .resource_image { width: 100%; height: 100%; object-fit: cover; }
.resource_type { font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--accent); }
.resource_title { font-size: var(--fs-h5); font-weight: var(--fw-bold); color: var(--text-strong); line-height: var(--lh-snug); }
.resource_label {
  position: absolute; top: var(--space-3); right: var(--space-3); z-index: 2;
  padding: 0.3rem 0.7rem; border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  background: var(--bg-elevated); border: 1px solid var(--border-strong); color: var(--text-strong);
}

.resource_link_card .card-footer {
  border-top: 0;
  padding: 0 var(--space-5) var(--space-5);
}
.resource_link_card .card-footer-item { flex: 0 0 auto; padding: 0; justify-content: flex-start; }
.resource_arrowlink {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--primary);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  transition: gap var(--dur) var(--ease), color var(--dur) var(--ease);
}
.resource_arrowlink::after { content: "\2192"; }
.resource_link_card:hover .resource_arrowlink { gap: var(--space-3); color: var(--accent); }
.resource_event_date { font-size: var(--fs-sm); color: var(--text-muted); }

/* hero layers */

.hero_background_image_wrap,
.hero_background_video_wrap { display: none; }

/* Hero side image: the SCSS gave this height, so without it the div collapses. */
.page_header_image_wrap { position: relative; }
.page_header_image,
.page_header_image_alternate,
.page_header_image_narrow {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.page_header_image_alternate, .page_header_image_narrow { display: none; }

/* ratio boxes */
.image { display: block; position: relative; }
.image img { width: 100%; height: 100%; display: block; }
.image.is-16by9  { aspect-ratio: 16 / 9; }
.image.is-4by3   { aspect-ratio: 4 / 3; }
.image.is-3by2   { aspect-ratio: 3 / 2; }
.image.is-square, .image.is-1by1 { aspect-ratio: 1 / 1; }
.image.is-16by9 > img, .image.is-4by3 > img, .image.is-3by2 > img, .image.is-square > img {
  position: absolute; inset: 0; object-fit: cover;
}

/* Bulma modals have no display rule now, so the markup renders inline in the
   page body. Keep them hidden until something adds .is-active. */
.modal { display: none; }
.modal.is-active { display: flex; align-items: center; justify-content: center; position: fixed; inset: 0; z-index: var(--z-modal); }
.modal-background { position: absolute; inset: 0; background: rgba(1, 15, 31, 0.86); }
.modal-card, .modal-content {
  position: relative; z-index: 1;
  width: 100%; max-width: 40rem; max-height: 85vh; overflow: auto;
  padding: var(--space-6);
  background: var(--bg-elevated); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-pop);
}

/* Bulma tiles */
.tile { display: flex; flex: 1 1 0; min-width: 0; align-items: stretch; gap: var(--gutter); }
.tile.is-ancestor { flex-wrap: wrap; }
.tile.is-vertical { flex-direction: column; }
.tile.is-child { display: flex; margin: 0; }
@media (max-width: 768px) { .tile:not(.is-child) { flex-direction: column; } }


.tile > .generic_tile { width: 100%; margin: 0; flex: 1 1 auto; }

/* form controls */
.control { position: relative; flex: 1 1 auto; }
.field.is-grouped { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.field.is-grouped > .control { flex: 0 0 auto; }
.select { position: relative; display: inline-block; }

/* wrapper, not control — the child has the box */
.input:has(input, select, textarea),
.select:has(select),
.textarea:has(textarea) {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.select select,
input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
input[type="number"], input[type="url"], input[type="password"], textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  color: var(--text-strong);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}
.checkbox, .radio { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text); }
.checkbox input, .radio input { accent-color: var(--primary); }

/* HubSpot forms */
/* HubSpot injects unstyled markup client-side; every rule lived in the SCSS.
   Ported so the 9+ templates embedding a form stop rendering browser defaults. */
/* The ambient/glow layers are absolutely positioned, so they paint over a
   static form. Lift the wrapper into the positioned layer. */
.hubspot_form_wrap { max-width: 40rem; margin-inline: auto; position: relative; z-index: 1; }
/* HubSpot's wrapper also carries the DS's own .field, so it is already a flex
   column with a gap and the label's margin doubled it. Each row is its own
   fieldset, so the rhythm between rows lives there, not on the last field. */
.hs-form-field { gap: 0; margin-bottom: 0; }
.hs-form-field > label { display: block; margin-bottom: var(--space-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text); }
.hs-form-field .hs-field-desc { font-size: var(--fs-xs); color: var(--text-muted); }
.hs-input:not([type="checkbox"]):not([type="radio"]) {
  width: 100% !important;
  padding: 0.7rem 0.9rem;
  font: inherit;
  color: var(--text-strong);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}
.hs-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent); }
textarea.hs-input { min-height: 7rem; resize: vertical; }
.hs-form .inputs-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.hs-error-msgs { list-style: none; padding: 0; margin-top: var(--space-2); color: var(--danger); font-size: var(--fs-sm); }
.hs-button, .hs-form input[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.85rem 2rem;
  font-family: var(--font-sans); font-size: var(--fs-body); font-weight: var(--fw-semibold);
  color: #fff; background-image: var(--gradient-primary);
  border: 0; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-cta); cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.hs-button:hover { transform: translateY(-1px); }
.hs-form .form-columns-3 { display: none; } /* honeypot row, as in the original */
/* HubSpot floats the pair flush; give them a real gutter. The row gap matches
   the between-row rhythm, for when the pair wraps to one column. */
.hs-form .form-columns-2 { display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-4); }
.hs-form .form-columns-2 > .hs-form-field { float: none; width: auto !important; flex: 1 1 14rem; }
/* form.hs-form, not .hs-form: HubSpot injects an inline <style> at runtime
   with a per-instance `.hs-form-<uuid> fieldset` rule that ties on specificity
   and wins on source order. The type selector outranks it. */
form.hs-form fieldset { max-width: none !important; border: 0; padding: 0; margin: 0 0 var(--space-5); }
form.hs-form fieldset:last-of-type { margin-bottom: 0; }
.legal-consent-container { font-size: var(--fs-sm); color: var(--text-muted); }
.hs-richtext { margin-bottom: var(--space-5); }
.hs-richtext:last-child { margin-bottom: 0; }
.hs-richtext span { background-color: transparent !important; }
/* HubSpot rich text is authored against a white background and hardcodes its
   colours inline, so links land near-black on a dark page. */
[data-theme="dark"] .hs-richtext [style*="color"],
[data-theme="dark"] .legal-consent-container [style*="color"] { color: inherit !important; }
[data-theme="dark"] .hs-richtext a,
[data-theme="dark"] .legal-consent-container a { color: var(--accent) !important; }

/* Bootstrap leftovers in content-hubspot_form.php's wrapper. */
.col-xs-12 { width: 100%; }
@media (min-width: 992px) {
  .col-md-6 { width: 50%; }
  .col-md-8 { width: 66.6667%; }
  .col-md-offset-3 { margin-left: 25%; }
  .col-md-offset-2 { margin-left: 16.6667%; }
}

/* misc fragments */
.panel { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: color-mix(in srgb, var(--surface) 60%, transparent); }
.panel-block, .panel-heading { display: block; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); }
.panel-heading { font-weight: var(--fw-semibold); color: var(--text-strong); }
.menu-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.menu-list a { color: var(--text-muted); }
.menu-list a:hover, .menu-list a.is-active { color: var(--accent); }
.icon { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; }

/* Bulma dropdown — still used by the secondary navbar. */
.dropdown { position: relative; display: inline-flex; }
.dropdown .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; z-index: var(--z-overlay); min-width: 14rem; padding-top: var(--space-2); }
.dropdown.is-active .dropdown-menu, .dropdown:hover .dropdown-menu { display: block; }
.dropdown-content { padding: var(--space-2); background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-pop); }
.dropdown-item { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--text-muted); font-size: var(--fs-sm); }
.dropdown-item:hover, .dropdown-item.is-active { background: color-mix(in srgb, var(--text-strong) 8%, transparent); color: var(--text-strong); }
.dropdown-divider { height: 1px; margin: var(--space-2) 0; background: var(--border); border: 0; }

/* Remaining bespoke button skins. Without these they fall back to the ghost
   default, which reads as a broken link on dark panels. */
.button.neonbluearrowbutton, .button.is-neonblue { border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--accent); }
.button.neonbluearrowbutton:hover, .button.is-neonblue:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.button.whitearrowbutton, .button.is-white { border-color: var(--border-strong); color: var(--text-strong); }
.button.is-royalblue { border-color: color-mix(in srgb, var(--primary) 55%, transparent); color: var(--primary); }
.button.neonbluearrowbutton::after, .button.whitearrowbutton::after, .button.solidneonbluearrowbutton::after,
.button.solidroyalbluearrowbutton::after, .button.v2_solidarrowbutton::after { content: " \2192"; }

/* utilities */

.anchor_offset { display: block; height: 0; visibility: hidden; scroll-margin-top: calc(var(--header-height) + 1rem); }
.padding-top-0 { padding-top: 0 !important; }
.padding-bottom-0 { padding-bottom: 0 !important; }
.video_oembed { position: relative; }
.video_oembed iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--radius); }

/* partner locator */


.partners_filters_wrap .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.partners_filters_wrap .input,
.partners_filters_wrap .select {
  width: auto;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.partners_filters_wrap .text_filter { flex: 1 1 18rem; max-width: 26rem; }
.partners_filters_wrap .select { flex: 0 0 auto; }

.form-control {
  width: 100%;
  padding: 0.7rem 0.9rem;
  font: inherit;
  color: var(--text-strong);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  transition: all var(--dur) var(--ease);
}
.form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent);
}
select.form-control { min-width: 13rem; cursor: pointer; }
/* Native option lists inherit the page's dark surface poorly on some engines. */
select.form-control option { background: var(--bg-elevated); color: var(--text-strong); }

.partner_item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  height: 100%;
  padding: var(--space-6);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  transition: all var(--dur) var(--ease);
}
.partner_item:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--surface-border));
  box-shadow: var(--shadow-pop);
}
.partner_logo { display: block; }
.partner_logo img {
  width: auto;
  max-width: 140px;
  max-height: 56px;
  object-fit: contain;
}
.partner_name {
  display: block;
  font-size: var(--fs-h5);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  line-height: var(--lh-snug);
}
.partner_description {
  display: block;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text-muted);
}
.partner_desc_expand { color: var(--primary); cursor: pointer; white-space: nowrap; }
.partner_desc_expand:hover { color: var(--accent); }
.partner_website {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--primary);
}
.partner_website::after { content: " \2192"; }
.partner_website:hover { color: var(--accent); }

/* Equal-height tiles across the row. */
.partner_item_wrap { display: flex; }
.partner_item_wrap > .partner_item { flex: 1 1 auto; }

/* resources centre */


/* outer row sticks; nested card grid stretches */
.resources_page_wrap .columns { align-items: flex-start; }
.resources_page_wrap .columns .columns { align-items: stretch; }

.vertical_resources_filters_wrap {
  position: sticky;
  top: calc(var(--header-height) + 1rem);
}
.vertical_resource_filters_title {
  font-size: var(--fs-h5);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  margin-bottom: var(--space-4);
}

/* The search box is a real .input, so the design system already styles it —
   it only needs the pill treatment and spacing the mockup gives it. */
.vertical_resource_search_filter {
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-6);
}

.vertical_resource_filter_title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text);
  margin-bottom: var(--space-2);
}

.vertical_resource_filter {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vertical_resource_filter li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-align: left;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.vertical_resource_filter li:hover {
  color: var(--text-strong);
  background: color-mix(in srgb, var(--text-strong) 6%, transparent);
}
.vertical_resource_filter li.is-selected {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  font-weight: var(--fw-medium);
}
/* The per-term count. */
.vertical_resource_filter li em {
  font-style: normal;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.vertical_resource_filter li.is-selected em { color: inherit; }

.vertical_resource_filter .list_more_link {
  justify-content: flex-start;
  color: var(--primary);
  font-weight: var(--fw-semibold);
}
.vertical_resource_filter .list_more_link:hover { color: var(--accent); background: none; }

/* Mobile/tablet filter bar — two selects side by side rather than stacked. */
.resources_filters_wrap .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.resources_filters_wrap .input,
.resources_filters_wrap .select {
  width: auto;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
/* .section gives this 80px of block padding, which is far too much for a
   single row of dropdowns. */
.resources_filters_wrap { padding-block: var(--space-6) var(--space-4); }
/* Size the control to its content instead of letting a lone select stretch the
   full container width. */
.resources_filters_wrap .select { flex: 0 1 auto; }
.resources_filters_wrap select.form-control { width: auto; min-width: 14rem; max-width: 100%; }
@media (max-width: 768px) {
  .resources_filters_wrap .select { flex: 1 1 100%; }
  .resources_filters_wrap select.form-control { width: 100%; }
}

/* Card grid: keep tiles equal height so the CTAs line up across a row. */
.resource_item_wrap { display: flex; }
.resource_item_wrap > .resource_link_card { flex: 1 1 auto; }

.empty_resource_item_wrap {
  padding: var(--space-9) 0;
  text-align: center;
  color: var(--text-muted);
}

/* stacking context */

.content_wrap { position: relative; z-index: 3; }
.relative { position: relative; }

/* generic titles */
/* 20 lines covering ~18 templates' section headings. */
.generic_title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  color: var(--text-strong);
  margin-bottom: var(--space-3);
}
.generic_subtitle { font-size: var(--fs-lead); color: var(--text-muted); padding-bottom: var(--space-3); }
.generic_date { font-size: var(--fs-sm); color: var(--text-faint); padding-bottom: var(--space-3); }

/* slick carousel */

.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  user-select: none;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; }
.slick-list:focus { outline: none; }
.slick-list.dragging { cursor: pointer; cursor: hand; }
.slick-slider .slick-track, .slick-slider .slick-list { transform: translate3d(0, 0, 0); }
.slick-track { position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; }
.slick-track::before, .slick-track::after { display: table; content: ""; }
.slick-track::after { clear: both; }
.slick-loading .slick-track { visibility: hidden; }
.slick-slide { display: none; float: left; height: 100%; min-height: 1px; }
[dir="rtl"] .slick-slide { float: right; }
.slick-slide img { display: block; }
.slick-slide.slick-loading img { display: none; }
.slick-slide.dragging img { pointer-events: none; }
.slick-initialized .slick-slide { display: block; }
.slick-loading .slick-slide { visibility: hidden; }
.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; }
.slick-arrow.slick-hidden { display: none; }

/* Arrows — without this the buttons render their literal "Previous"/"Next" text. */
.slick-prev, .slick-next {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  transform: translateY(-50%);
  cursor: pointer;
  color: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  font-size: 0;
  line-height: 0;
}
.slick-prev { left: -1.25rem; }
.slick-next { right: -1.25rem; }
.slick-prev:hover, .slick-next:hover { border-color: var(--accent); }
.slick-prev::before, .slick-next::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 9px; height: 9px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
}
.slick-prev::before { transform: translate(-30%, -50%) rotate(135deg); }
.slick-next::before { transform: translate(-70%, -50%) rotate(-45deg); }
.slick-prev:hover::before, .slick-next:hover::before { border-color: var(--accent); }
.slick-prev.slick-disabled, .slick-next.slick-disabled { opacity: 0.35; pointer-events: none; }

/* Dots — otherwise a raw bulleted list. */
.slick-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
}
.slick-dots li { display: block; }
.slick-dots li button {
  width: 8px; height: 8px; padding: 0;
  font-size: 0; line-height: 0; color: transparent;
  border: 0; border-radius: 50%;
  background: var(--border-strong);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.slick-dots li.slick-active button { background: var(--accent); }

/* magnific popup lightbox */
/* Also vendored-only. Its JS is live in the bundle, so without these the
   lightbox appends into normal flow: no dimmed overlay, no close target. */
.mfp-bg {
  position: fixed;
  inset: 0;
  z-index: 1042;
  overflow: hidden;
  background: #010f1f;
  opacity: 0.9;
}
.mfp-wrap {
  position: fixed;
  inset: 0;
  z-index: 1043;
  outline: none !important;
  -webkit-backface-visibility: hidden;
}
.mfp-container {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  padding: 0 var(--space-2);
  text-align: center;
  box-sizing: border-box;
}
.mfp-container::before { content: ""; display: inline-block; height: 100%; vertical-align: middle; }
.mfp-align-top .mfp-container::before { display: none; }
.mfp-content {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  text-align: left;
  vertical-align: middle;
  z-index: 1045;
}
.mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { width: 100%; cursor: auto; }
.mfp-close {
  position: absolute;
  top: 0; right: 0;
  width: 44px; height: 44px;
  padding: 0 0 18px 10px;
  z-index: 1046;
  font-size: 28px;
  line-height: 44px;
  text-align: center;
  color: #fff;
  background: transparent;
  border: 0;
  opacity: 0.75;
  cursor: pointer;
}
.mfp-close:hover { opacity: 1; }
.mfp-close-btn-in .mfp-close { color: var(--text-strong); }
.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { right: -6px; top: -44px; width: 100%; text-align: right; color: #fff; }
.mfp-iframe-holder { padding: 40px 0; }
.mfp-iframe-holder .mfp-content { width: 100%; max-width: 900px; line-height: 0; }
.mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: 56.25%; }
.mfp-iframe-scaler iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  background: #000;
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
}
.mfp-figure { line-height: 0; }
.mfp-figure figcaption { color: var(--text-muted); }
.mfp-img { display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto; }
.mfp-hide { display: none !important; }
.mfp-preloader { position: absolute; top: 50%; width: auto; margin-top: -0.8em; left: 8px; right: 8px; z-index: 1044; color: var(--text-muted); text-align: center; }
body.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: auto; }

/* hero tabs v1 now live in blocks.css */

/* solutions-page blocks */

/* Alternating image/text blocks — content-bouncing_blocks.php, 9 templates. */
.bouncing_blocks_wrap .item_wrap { position: relative; z-index: 3; }
.bouncing_block_title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  color: var(--text-strong);
  margin-bottom: var(--space-4);
}
.bouncing_block_subtitle { font-size: var(--fs-lead); color: var(--text-muted); margin-bottom: var(--space-3); }
.bouncing_block_content { font-size: var(--fs-lead); color: var(--text-muted); }
.bouncing_block_content p + p { margin-top: var(--space-4); }
.bouncing_block_link, .bouncing_block_cta { font-size: var(--fs-body); }
.bouncing_blocks_wrap .tile_image { position: relative; }
.bouncing_block_image { position: relative; display: block; width: 100%; max-width: 100%; height: auto; border-radius: var(--radius-lg); }
@media (max-width: 768px) {
  .bouncing_block_title { font-size: var(--fs-h3); }
  .bouncing_block_subtitle, .bouncing_block_cta { font-size: var(--fs-body); }
}

/* Icon/text feature lists — content-features.php, 8 templates. */
.features_wrap { position: relative; }
.features_title { font-size: var(--fs-h3); font-weight: var(--fw-regular); color: var(--text-strong); margin-bottom: var(--space-7); }
.feature_icon {
  width: 60px; height: 60px;
  margin-bottom: var(--space-4);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}
.feature_title { font-size: var(--fs-h5); font-weight: var(--fw-bold); color: var(--text-strong); margin-bottom: var(--space-2); }
.feature_title a { color: inherit; }
.feature_title a:hover { color: var(--accent); }
.feature_subtitle { font-size: var(--fs-body); color: var(--text-muted); }
.feature_subtitle ul { padding-left: var(--space-5); list-style: disc; }
.feature_subtitle ul li { margin-bottom: var(--space-3); }
.feature_link { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--primary); }
.feature_link:hover { color: var(--accent); }
.feature_cta_wrap { display: block; }

/* Related resources rail. */
.related_resources_wrap { position: relative; z-index: 5; margin-top: var(--space-6); }
.rel_resource_item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: 100%;
  margin-bottom: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  transition: all var(--dur) var(--ease);
}
.rel_resource_item:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--surface-border)); transform: translateY(-3px); }
.rel_resource_item .resource_title { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--text-strong); }
.rel_resource_item .resource_arrowlink { margin-top: auto; }

/* background-image layer components */


.generic_tile {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: auto;
  width: 31%;
  min-height: 400px;
  margin: 1%;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--surface-border);
  background-color: var(--ink-deep);
  box-shadow: var(--card-shadow);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.generic_tile:hover { transform: scale(1.03); box-shadow: var(--shadow-pop); }

.generic_tile.narrow_tile { width: 23%; }
.generic_tile.wide_tile   { width: 48%; }

/* The spacer is what pushes content to the bottom of the tile. */
.tile_spacer { flex-grow: 1; }

/* Layer order inside a tile: image 2, gradient 3, content 4, play button 10. */
.tile_background_image {
  position: absolute;
  inset: 0;
  z-index: 2;

  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: inherit;
}
.tile_gradient_overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background: linear-gradient(15deg, color-mix(in srgb, var(--ink) 55%, transparent) 0.2%, color-mix(in srgb, var(--ink) 12%, transparent) 66%, transparent 98%);
}
.tile_content, .tile_titles_wrap {
  position: relative;
  z-index: 4;
  width: 100%;
  padding: var(--space-5);
}
.tile_logo {
  position: relative;
  z-index: 4;
  width: 200px;
  height: 70px;
  top: 20px;
  left: 15px;
  margin-bottom: 20px;
}
.tile_logo img { height: 100%; width: auto; object-fit: contain; }

.tile_pretitle { font-size: var(--fs-lead); font-weight: var(--fw-bold); color: #fff; padding-bottom: 8px; }
.tile_title    { font-size: var(--fs-h3); line-height: 1.3; font-weight: var(--fw-semibold); color: #fff; padding-bottom: var(--space-5); }
.tile_subtitle { font-size: var(--fs-lead); color: #fff; padding-bottom: var(--space-5); }
.tile_cta      { font-size: var(--fs-lead); color: var(--accent); }

/* number_tile is the one variant that changes the box model: its content is a
   centred absolute overlay, so it must not inherit the bottom-pinning spacer. */
.number_tile .tile_content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 10px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: inherit;
}
.number_tile .tile_spacer { flex-grow: 0; }
.number_tile .tile_title { font-size: 5rem; line-height: 1.1; font-weight: var(--fw-bold); padding-bottom: 0; }
.number_tile .tile_subtitle { font-size: 2rem; line-height: 1.4; font-weight: var(--fw-semibold); }

.video_tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: url('../../images/ico_playbutton_01.svg') center center / 135px no-repeat;
  transition: background-size var(--dur) var(--ease);
}
.video_tile:hover::after { background-size: 150px; }

.tile_rating_wrap {
  position: relative;
  z-index: 4;
  top: 30px;
  left: 20px;
  width: calc(100% - 40px);
}

/* Light-backed tiles flip their copy to ink. */
.tile_background_is_light { background-color: var(--paper); }
.tile_background_is_light .tile_pretitle,
.tile_background_is_light .tile_title,
.tile_background_is_light .tile_subtitle { color: var(--ink); }
.tile_background_is_light .tile_cta { color: var(--primary-strong); }
.tile_background_is_light .tile_gradient_overlay {
  background: linear-gradient(15deg, #fff 0.2%, rgba(255,255,255,0.1) 66%, rgba(255,255,255,0) 98%);
}

/* The grid container. Without this every tile stacks full width. */
.gridtiles_tiles_wrap { position: relative; z-index: 2; }
.gridtiles_tiles {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: flex-start;
  margin: 0 auto;
}
.gridtiles_title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-extrabold);
  color: var(--text-strong);
  text-align: center;
  margin-bottom: var(--space-6);
}
.gridtiles_cta { padding: var(--space-5); text-align: center; }

@media (max-width: 1023px) {
  .generic_tile,
  .generic_tile.normal_tile,
  .generic_tile.narrow_tile,
  .generic_tile.wide_tile { width: 100%; margin-left: var(--space-5); margin-right: var(--space-5); }
}

/* logo slider */

.logoslider_section_wrap {
  /* it also carries .section, which the design system pads */
  padding-block: 0;
  text-align: center;
  max-width: 80%;
  margin-inline: auto;
}
.logoslider_marquee_mask {
  position: relative;
  width: 100%;
  height: 58px;
  overflow: hidden;
  margin-inline: auto;
  margin-bottom: var(--space-8);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #fff 4%, #fff 96%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #fff 4%, #fff 96%, transparent 100%);
}
.logoslider_marquee_wrap { position: relative; z-index: 2; height: 58px; white-space: nowrap; }
.logoslider_marquee {
  display: block;
  position: absolute;
  animation: marquee_animation 20s linear infinite;
}
.logoslider_marquee_wrap_2 .logoslider_marquee { animation-direction: reverse; }
.logoslider_marquee:hover { animation-play-state: paused; }
.slider_logos_wrap { float: left; display: inline-block; overflow: hidden; }
.logo_item { display: inline-block; padding: 0 10px; margin: 0; }
.logo_item img { width: 200px; height: 58px; display: block; margin: 0 auto; }
/* Same treatment as the rebuilt marquee: these are dark-on-light brand marks. */
[data-theme="dark"] .logo_item img { filter: grayscale(1) brightness(0) invert(1); opacity: 0.6; }
.logo_item:hover img { opacity: 1; filter: none; }

@keyframes marquee_animation {
  0%   { left: 0; }
  100% { left: -100%; }
}

@media (max-width: 1023px) {
  .logoslider_section_wrap { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .logoslider_marquee { animation: none; }
}

/* Blog / category cards — same failure shape. */
.card-background-image_wrap { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; }
.card-background-image { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform var(--dur-slow) var(--ease); }
.card_titles_wrap, .card_data_wrap { position: relative; z-index: 1; }
.blog_category { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--accent); }
[data-theme="light"] .blog_category { color: var(--navy-700); }
.blog_title { font-size: var(--fs-h5); font-weight: var(--fw-bold); color: var(--text-strong); line-height: var(--lh-snug); }
.blog_subtitle, .blog_excerpt { font-size: var(--fs-sm); color: var(--text-muted); }
.blog_arrowlink { color: var(--primary); font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.blog_arrowlink::after { content: " \2192"; }


/* Long-form measure — single-post and the case-study CPT set their own. */
.match_customer_width, .match_advisory_width { max-width: 46rem; margin-inline: auto; }

/* animations */
/* Entrance variants beyond fadeInUp, wired to the same observer. */
.fadeInDown, .bounceInLeft, .bounceInRight {
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.fadeInDown { transform: translateY(-18px); }
.bounceInLeft { transform: translateX(-24px); }
.bounceInRight { transform: translateX(24px); }
.fadeInDown.is-visible, .bounceInLeft.is-visible, .bounceInRight.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .fadeInDown, .bounceInLeft, .bounceInRight { opacity: 1; transform: none; transition: none; }
}

/* news archive */

.news_archive_wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.news_archive_item {
  padding: var(--space-6);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  box-shadow: var(--card-shadow);
  transition: all var(--dur) var(--ease);
}
.news_archive_item:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--surface-border));
  box-shadow: var(--shadow-pop);
}

.news_archive_item .columns { align-items: flex-start; margin-bottom: 0; }
.news_archive_item .news_image { align-self: flex-start; }
.news_image img { border-radius: var(--radius); margin-inline: auto; }
.news_archive_item_title {
  font-size: var(--fs-h5);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--text-strong);
  margin-bottom: var(--space-2);
}
.news_archive_item_title a { color: inherit; }
.news_archive_item:hover .news_archive_item_title a { color: var(--accent); }
.news_archive_item_excerpt { font-size: var(--fs-sm); color: var(--text-muted); }
.news_archive_item .generic_date { padding-bottom: var(--space-2); }

/* The sidebar RSS widget alongside the list. */
.rsswidget { display: block; font-weight: var(--fw-semibold); color: var(--text-strong); }
.rsswidget:hover { color: var(--accent); }
.rss-date { display: block; font-size: var(--fs-xs); color: var(--text-faint); margin-bottom: var(--space-3); }

/* blog cards */


.blog_item_wrap { display: flex; }

a.blog_link_card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 34rem;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--surface-border);
  background-color: var(--ink-deep);
  color: #fff;
  transition: all var(--dur) var(--ease);
}
a.blog_link_card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--surface-border));
  box-shadow: var(--shadow-pop);
}

.blog_link_card .card-background-image_wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  border-radius: inherit;
}
.blog_link_card .card-background-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center right;
  transition: transform var(--dur-slow) var(--ease);
}
a.blog_link_card:hover .card-background-image { transform: scale(1.05); }
/* Legibility wash over the photo. */
.blog_link_card .card-background-image_wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(160deg, var(--ink-deep) 0%, rgba(1, 15, 31, 0) 80%);
}

.blog_link_card .card-content { position: relative; z-index: 5; height: 100%; }

.blog_link_card .card_titles_wrap {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  opacity: 1;
  transition: opacity var(--dur) var(--ease);
}

.blog_link_card .card_data_wrap {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  opacity: 0;
  transform: translateX(100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--ink-deep) 55%, transparent);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.blog_link_card .card_data { display: flex; flex-direction: column; justify-content: center; pointer-events: none; }

a.blog_link_card:hover .card_titles_wrap { opacity: 0; }
a.blog_link_card:hover .card_data_wrap { opacity: 1; transform: translateX(0); }

.blog_link_card .blog_category { color: var(--accent); }
.blog_link_card .blog_title { color: #fff; font-size: var(--fs-h3); }
.blog_link_card .blog_excerpt { color: rgba(255, 255, 255, 0.82); font-size: var(--fs-body); }
.blog_link_card .card-footer {
  position: relative;
  z-index: 5;
  margin-top: auto;
  border-top: 0;
  padding: 0 var(--space-5) var(--space-5);
}
.blog_link_card .blog_arrowlink { color: #fff; }
a.blog_link_card:hover .blog_arrowlink { color: var(--accent); }

.blog_link_card_featured { min-height: 38rem; }
.blog_link_card_featured .blog_title { font-size: var(--fs-h2); }

/* No hover affordance on touch: show the title and the excerpt together. */
@media (max-width: 768px) {
  a.blog_link_card { min-height: 22rem; }
  .blog_link_card .card_titles_wrap { position: relative; opacity: 1; overflow: visible; }
  .blog_link_card .card_data_wrap {
    position: relative;
    inset: auto;
    transform: none;
    opacity: 1;
    height: auto;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  a.blog_link_card:hover .card_titles_wrap { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  a.blog_link_card:hover .card-background-image { transform: none; }
}

/* quotes */


.quote_item_v2 {
  position: relative;
  padding: var(--space-5);
}

/* Decorative frame + panel behind the copy. */
.quote_item_glass_border {
  position: absolute;
  top: 0;
  left: var(--space-5);
  width: calc(100% - var(--space-5) * 2);
  height: 100%;
  z-index: 0;
  border-radius: var(--radius-xl);
  border: 1px solid var(--surface-border);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.quote_item_bg_back {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  border-radius: var(--radius-lg);
  background-image: url('../../images/quote_bg_02.svg');
  background-repeat: no-repeat;
  background-position: right top;
  opacity: 0.5;
}
[data-theme="dark"] .quote_item_bg_back { background-image: url('../../images/quote_bg_02_darkbg.svg'); }

.quote_content {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-7);
}
.quote_content:not(.with_avatar) { padding-inline: var(--space-8); }

.quote_avatar {
  flex: 0 0 auto;
  width: 157px;
  height: 157px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.quote_avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.quote_text {
  position: relative;
  font-size: var(--fs-h3);
  font-weight: var(--fw-light);
  line-height: var(--lh-snug);
  color: var(--text-strong);
  margin-bottom: var(--space-5);
}
.quote_name {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-size: var(--fs-lead);
  line-height: 1.3;
  color: var(--text-muted);
}
.quote_logo { height: 55px; width: auto; max-width: 100%; }

/* Star rating: a two-row sprite — empty on top, filled below — with the filled
   layer clipped to the score. */
.quote_stars {
  position: relative;
  z-index: 4;
  width: 157px;
  height: 24px;
  margin: 0 0 var(--space-3);
}
.quote_stars::before,
.quote_stars::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 24px;
  background-image: url('../../images/quote_stars_small_sprite.png');
  background-size: 157px auto;
  background-repeat: no-repeat;
}
.quote_stars::before { width: 157px; background-position: left top; z-index: 1; }
.quote_stars::after  { width: 0; background-position: left bottom; z-index: 2; }
.quote_stars.stars-0::after  { width: 0; }
.quote_stars.stars-1::after  { width: 8%; }
.quote_stars.stars-2::after  { width: 16%; }
.quote_stars.stars-3::after  { width: 29%; }
.quote_stars.stars-4::after  { width: 39%; }
.quote_stars.stars-5::after  { width: 50%; }
.quote_stars.stars-6::after  { width: 60%; }
.quote_stars.stars-7::after  { width: 71%; }
.quote_stars.stars-8::after  { width: 81%; }
.quote_stars.stars-9::after  { width: 92%; }
.quote_stars.stars-10::after { width: 100%; }

.quote_g2, .quote_gpi {
  width: 40px;
  height: 30px;
  background-repeat: no-repeat;
  background-position: center left;
  background-size: contain;
}
.quote_g2  { background-image: url('../../images/quote_g2_small.png'); }
.quote_gpi { background-image: url('../../images/quote_gpi_small.png'); }

/* Inside a post the quote breaks out of the reading measure — at the article's
   own width the copy was down to about twenty characters a line. */
.main_content_column .quote_item_v2 { margin-inline: calc(var(--space-6) * -1); padding-inline: 0; }
.main_content_column .quote_item_glass_border { left: 0; width: 100%; }
.main_content_column .quote_content:not(.with_avatar) { padding-inline: var(--space-7); }
.main_content_column .quote_text { font-size: var(--fs-h4); }

@media (max-width: 860px) {
  .quote_content { gap: var(--space-4); padding: var(--space-6); }
  .quote_content:not(.with_avatar) { padding-inline: var(--space-6); }
  .quote_avatar { width: 96px; height: 96px; }
  .quote_text { font-size: var(--fs-h5); }
  .quote_item_glass_border { left: 0; width: 100%; }
  .quote_item_v2 { padding: 0; }
  .main_content_column .quote_item_v2 { margin-inline: 0; }
}

/* single post */
/* The highest-traffic template. sass/templates/_single_post.scss is 1263 lines;
   this ports the structure that actually carries layout. */

.post_pagewrap { position: relative; }

/* Reading measure. The original used percentages of the container
   (60% / 80% / 100%); a rem cap holds a steadier line length across widths. */
.match_blog_width { max-width: 46rem; margin-inline: auto; }

.main_content_wrap { position: relative; z-index: 2; }
.main_content_column { padding-top: var(--space-5); }


.social_float_wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}
.social_float_wrap .match_blog_width { height: 100%; pointer-events: none; }
.social_float {
  position: sticky;
  top: calc(var(--header-height) + 2rem);
  margin-left: calc(100% + 2.5rem);
  width: 44px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  pointer-events: auto;
}
.social_float_link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  transition: all var(--dur) var(--ease);
}
.social_float_link:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
/* Not enough room beside the column below desktop — lay it out inline instead. */
@media (max-width: 1279px) {
  .social_float_wrap { position: relative; height: auto; }
  .social_float {
    position: relative;
    margin-left: 0;
    width: auto;
    flex-direction: row;
    margin-bottom: var(--space-5);
  }
}

/* Pro tips — injected into post and wiki content from the protips CPT. */
.pro_tip {
  position: relative;
  margin: var(--space-6) 0 var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}
.pro_tip.has_label { padding-top: var(--space-8); }
.tip_label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.35rem var(--space-4);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: #fff;
  background: var(--primary-strong);
  border-start-start-radius: var(--radius-lg);
  border-end-end-radius: var(--radius-lg);
}
.tip_title { font-size: var(--fs-h5); font-weight: var(--fw-semibold); color: var(--text-strong); }
.tip_text { font-size: var(--fs-body); color: var(--text); }
.tip_title + .tip_text { padding-top: var(--space-3); }
.tip_cta { margin-top: var(--space-3); }
.pro_tip .author_info {
  display: block;
  margin-top: var(--space-5);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--primary);
}
.pro_tip .author_info:hover { color: var(--accent); }
.pro_tip .author_avatar {
  display: inline-block;
  width: 26px;
  height: 26px;
  margin: 0 6px -8px 4px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background-size: cover;
  background-position: center;
}

/* Table of contents — in flow under the article header, collapsible. */
.toc_inline { margin-top: var(--space-7); margin-bottom: var(--space-7); }
.toc_wrap {
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
}
.toc_title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-faint);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.toc_title::-webkit-details-marker { display: none; }
.toc_title::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
}
.toc_wrap[open] > .toc_title { margin-bottom: var(--space-4); }
.toc_wrap[open] > .toc_title::before { transform: rotate(-135deg); }
.toc_wrap ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}
.toc_wrap a { font-size: var(--fs-sm); color: var(--text-muted); }
.toc_wrap a:hover, .toc_wrap .is-active > a { color: var(--accent); }

/* Cover image. */
.post_cover_image {
  display: block;
  width: 100%;
  max-height: 30rem;
  margin-bottom: var(--space-7);
  border-radius: var(--radius-lg);
  overflow: hidden;
  object-fit: cover;
}
.post_cover_image img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg); }

/* Meta and byline. */
.post_date, .post_meta { font-size: var(--fs-sm); color: var(--text-faint); }
.post_footer_meta {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.post_author_info {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-block: var(--space-6);
}
/* Co-authors sit in a .avatars_wrap that defaults to display:block, so the
   avatars stacked vertically. Lay them out as an overlapping group. */
.post_author_info .avatars_wrap { display: flex; align-items: center; }
.post_author_info .avatar_wrap {
  flex: 0 0 auto;
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--bg);
}
.post_author_info .avatar_wrap + .avatar_wrap { margin-left: -0.75rem; }
/* .author_avatar carries the photo as an inline background-image, not an <img>. */
.author_avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
}
.author_avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.post_author_info .names_wrap { font-size: var(--fs-sm); color: var(--text-muted); }
.post_author_info .names_wrap a { color: var(--text-strong); font-weight: var(--fw-semibold); }
.post_author_info .names_wrap a:hover { color: var(--accent); }


[data-scrollmagic-pin-spacer] { pointer-events: none; }
[data-scrollmagic-pin-spacer] > * { pointer-events: auto; }

/* Blog landing chrome around the cards. */
.blog_page_wrap { position: relative; z-index: 2; }
.blogpage_title { font-size: var(--fs-h1); font-weight: var(--fw-extrabold); color: var(--text-strong); }
.blogpage_subtitle { font-size: var(--fs-lead); color: var(--text-muted); margin-top: var(--space-3); }
.blog_subscription_form_wrap {
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
}
.blog_tags_list { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; }
.blog_tags_list li { display: block; }
.blog_tags_list a,
.blog_tags_list .list_more_link {
  display: block;
  padding: var(--space-1) var(--space-3);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.blog_tags_list a:hover,
.blog_tags_list .list_more_link { color: var(--text-strong); border-color: var(--border-strong); }
.blog_tags_list .list_more_link { cursor: pointer; }
.blog_tags_list .list_more_link:hover { border-color: var(--accent); color: var(--accent); }

/* popular posts */

.popular_posts_wrap {
  position: relative;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
}
.popular_posts_title {
  padding: var(--space-4);
  font-size: var(--fs-lead);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  border-bottom: 1px solid var(--border);
}
.popular_posts .item {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 132px;
  padding: var(--space-4) var(--space-5) var(--space-4) 132px;
  border-bottom: 1px solid var(--border);
  transition: background var(--dur) var(--ease);
}
.popular_posts .item:last-child { border-bottom: 0; }
.popular_posts .item:hover { background: color-mix(in srgb, var(--text-strong) 4%, transparent); }
.popular_posts .item_title {
  font-size: var(--fs-lead);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  line-height: var(--lh-snug);
  transition: color var(--dur) var(--ease);
}
.popular_posts .item:hover .item_title { color: var(--accent); }
.popular_posts .item_subtitle { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--danger); }
.popular_posts .item_image_wrap {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: 2;
  width: 100px;
  height: 100px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.popular_posts .item_image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center right;
  transition: transform var(--dur-slow) var(--ease);
}
/* The markup nests a real <img>; the SCSS assumed a background image. */
.popular_posts .item_image img { width: 100%; height: 100%; object-fit: cover; }
.popular_posts .item:hover .item_image { transform: scale(1.2); }

/* features logo panel */

.features_wrap { position: relative; z-index: 3; }
/* Straddles the top edge of the dark band. Scoped to that context on
   purpose: unscoped, the pull-up overlapped whatever preceded the section. */
.primaryblue_bg_wrap:has(.features_wrap.with_features_logo) .features_logo { margin-top: -130px; }

.features_wrap .features_logo {
  position: relative;
  z-index: 5;
  width: 160px;
  height: 160px;
  margin-bottom: var(--space-4);
  /* deliberately white in both themes: these are full-colour brand marks */
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 95% auto;
  border-radius: var(--radius);
  box-shadow: 20px 20px 60px rgba(0, 0, 0, 0.2), -20px -20px 60px rgba(13, 27, 255, 0.05);
}
.features_wrap .item { min-height: 220px; margin-bottom: var(--space-5); }
@media (max-width: 768px) {
  .features_wrap .features_logo { width: 130px; height: 130px; }
}

/* careers */


/* Neither wrapper sits in a .container, so both ran full-bleed. */
.tiles_grid_title_wrap,
.tilesgrid_wrap {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.tilesgrid_wrap { position: relative; margin-block: 10px; }
.tile_wrap { padding: 5px; text-align: center; z-index: 2; }
.tile_item_wrap { padding: calc(var(--gutter) / 4); }
.tile_item {
  position: relative;
  padding: 30px;
  height: 310px;
  border-radius: var(--radius);
  overflow: hidden;
}
.tile_item img { max-width: 100%; }
.tilecarousel { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; }
/* .tileimage is a DIV carrying an inline background-image, not an <img>. */
.tilecarousel .item .tileimage {
  width: 100%;
  height: 310px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  border-radius: var(--radius);
}

.tilesgrid_v2 .tile_item {
  display: block;
  padding: 0;
  height: auto;
  border-radius: 0;
}
.tilesgrid_v2 .tilecarousel { position: relative; height: auto; }
.tilesgrid_v2 .tilecarousel .item .tileimage { height: 100%; border-radius: 0; display: block; }

.tile_item_is_video::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: url('../../images/icon_play.png') center center no-repeat;
}

/* intro band */
.intro_wrap { position: relative; z-index: 2; }
.intro_title { font-size: var(--fs-h1); font-weight: var(--fw-extrabold); color: var(--text-strong); }
.intro_blurb { font-size: var(--fs-lead); color: var(--text-muted); margin-bottom: var(--space-5); }

/* perks */
.perks_wrap { position: relative; z-index: 3; }
.perks_title { font-size: var(--fs-h2); text-align: center; margin-bottom: var(--space-7); color: var(--text-strong); }
.perk_wrap {
  min-height: 220px;
  height: 100%;
  padding: 15px 15px 30px;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
}
/* Icon is a background-image on an empty div — with no size it rendered 0x0,
   which reads as "the images aren't loading". */
.perk_icon {
  width: 60px;
  height: 60px;
  margin-bottom: 10px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}
.perk_title { font-size: var(--fs-h5); font-weight: var(--fw-bold); color: var(--text-strong); }
.perk_text { font-size: var(--fs-body); color: var(--text-muted); }
@media (max-width: 768px) { .perks_title { font-size: var(--fs-h3); } }

.worldmap_wrap { padding-bottom: 0; }
.worldmap_image { width: 100%; height: auto; }

/* Comeet category grid */
.careers_categories_wrap { padding-bottom: 60px; }
.career_cats_tabs_wrap { text-align: center; padding: 15px; }
.inline_filters_wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.inline_filter {
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.inline_filter:hover { color: var(--text-strong); border-color: var(--border-strong); }
.inline_filter.active { color: #fff; background-image: var(--gradient-primary); border-color: transparent; }

/* Without this BOTH tab panels render at once and the tabs look inert. */
.career_cats_tab_content { display: none; }
.career_cats_tab_content.active { display: block; }

.career_cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 200px;
  padding: 15px;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  transition: all var(--dur) var(--ease);
}
.career_cat:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--surface-border)); transform: translateY(-3px); }
.career_cat_title { font-size: var(--fs-h5); font-weight: var(--fw-bold); color: var(--text-strong); }
.career_cat_count {
  font-size: var(--fs-body);
  color: var(--warning);
  opacity: 0;
  margin-bottom: -1rem;
  transition: all var(--dur) var(--ease);
}
.career_cat:hover .career_cat_count { opacity: 1; margin-top: 10px; margin-bottom: 0; }
@media (max-width: 768px) {
  .career_cat { min-height: auto; }
  .career_cat_count { opacity: 1; margin-bottom: 0; }
}

/* Comeet position list (page-careers.php) */
.careers_pos_filters_wrap { position: relative; z-index: 3; padding: 20px 0 0; }
/* .select is a layout wrapper here, but the design system owns it as a real
   control — width:100% put each filter on its own row inside a second border. */
/* already inside a container — the nested one would indent it a second gutter */
.careers_pos_filters_wrap .container { display: flex; flex-wrap: wrap; gap: var(--space-3); padding-inline: 0; }
.careers_pos_filters_wrap .select {
  flex: 0 0 auto;
  width: auto;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.careers_pos_filters_wrap .select::after { display: none; }
.careers_pos_filters_wrap select { width: auto; }
.careers_pos_item_wrap { padding-bottom: 25px; }
a.careers_pos_item {
  display: block;
  height: 100%;
  min-height: 250px;
  padding: 15px;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  transition: all var(--dur) var(--ease);
}
a.careers_pos_item:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--surface-border)); }
.pos_name { display: block; font-size: var(--fs-h5); font-weight: var(--fw-bold); color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pos_location, .pos_department { display: inline-block; font-size: var(--fs-sm); color: var(--text-muted); }
.pos_department { border-left: 1px solid var(--border); padding-left: var(--space-3); margin-left: var(--space-3); }
.pos_details { display: block; min-height: 160px; color: var(--text-muted); font-size: var(--fs-sm); }

/* news archive widgets */
/* Hyphenated, unlike its neighbours. Also used by page-events.php. */
.news-archive-widget-panel {
  position: relative;
  z-index: 3;
  min-height: 360px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
}
.news-archive-widget-panel .widget_title a {
  display: block;
  margin-bottom: 10px;
  padding-left: 38px;
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
  color: var(--text-strong);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 30px;
}
/* The RSS widget prints its own 14px icon next to the heading. */
.news-archive-widget-panel .widget_title .rsswidget img { display: none; }
.news-archive-widget-panel ul { list-style: none; padding-left: 0; margin: 0; }
.news-archive-widget-panel li {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.news-archive-widget-panel li:last-of-type { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.news-archive-widget-panel li .rss-date { display: block; font-size: var(--fs-xs); padding-top: 4px; opacity: 0.8; margin-bottom: 0; }
.news-archive-blog-widget-panel li .rss-date { display: inline-block; padding-left: 4px; padding-top: 0; }
.news-archive-blog-widget-panel .widget_title a { background-image: url('../../images/icons/60px/rss.svg'); }
@media (max-width: 1200px) { .news-archive-widget-panel { min-height: 430px; } }
@media (max-width: 992px)  { .news-archive-widget-panel { min-height: auto; } }

/* pagination */
/* page-news_archive.php and friends emit a bare .pagination_wrap of spans and
   anchors. Styled to match the design system's own .pagination component. */
.pagination_wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-8);
}
/* The "Page 1 of 45" counter is the first child — give it its own line. */
.pagination_wrap > span:first-child {
  flex: 1 1 100%;
  margin-bottom: var(--space-3);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.pagination_wrap a,
.pagination_wrap > span.current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  height: 2.4rem;
  padding: 0 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  transition: all var(--dur) var(--ease);
}
.pagination_wrap a:hover { color: var(--text-strong); border-color: var(--border-strong); }
.pagination_wrap > span.current {
  color: #fff;
  font-weight: var(--fw-semibold);
  background-image: var(--gradient-primary);
  border-color: transparent;
}

/* single post spacing */

.post_pagewrap .header_title_wrap { padding-bottom: var(--space-5); }
.post_pagewrap .content_wrap { padding-top: 0; }

/* back links */

.page_back,
.page_label.has_left_arrow {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  transition: gap var(--dur) var(--ease), color var(--dur) var(--ease);
}
.page_back.has_left_arrow::before,
.page_label.has_left_arrow::before { content: "\2190"; }
.page_back:hover,
.page_label.has_left_arrow:hover { gap: var(--space-3); color: var(--accent); }

/* customers CPT */


/* hero tile */

.customer_header_tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 24rem;
  padding: var(--space-7);
  border-radius: var(--radius-xl);
  border: 1px solid var(--surface-border);
  background-color: var(--bg-inset);
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  box-shadow: var(--card-shadow);
}
.customer_header_tile_logo {
  width: min(80%, 22rem);
  height: 8rem;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* highlights panel */

.v2_highlights_wrap {
  position: relative;
  z-index: 4;
  padding-block: var(--space-6);
}
.v2_highlights_glass_border {
  position: absolute;
  top: var(--space-6);
  bottom: var(--space-6);
  /* Track the container: hug the gutter on narrow screens, and once the page is
     wider than --container settle on the same centred column the copy uses. */
  left: max(var(--gutter), calc((100% - var(--container)) / 2));
  right: max(var(--gutter), calc((100% - var(--container)) / 2));
  z-index: 0;
  border-radius: var(--radius-xl);
  border: 1px solid var(--surface-border);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--card-shadow);
}
.v2_highlights_content {
  position: relative;
  z-index: 1;
  padding-block: var(--space-7);
}
/* The copy would otherwise start exactly on the panel's edge — the container's
   gutter is what the panel is aligned to. */
.v2_highlights_content > .container { padding-inline: calc(var(--gutter) + var(--space-5)); }


.v2_highlights_content > .container > .columns > .column { flex-basis: 100%; max-width: 100%; }

/* Dark-on-light brand mark, same treatment as the logo marquee. */
.v2_company_logo { margin-bottom: var(--space-4); }
.v2_company_logo img { max-height: 3.5rem; width: auto; }
[data-theme="dark"] .v2_company_logo img { filter: grayscale(1) brightness(0) invert(1); opacity: 0.85; }

.v2_highlights_title { margin-bottom: var(--space-2); }
.v2_highlights_subtitle { font-size: var(--fs-lead); color: var(--text-muted); margin-bottom: var(--space-6); }

.v2_highlight_item { padding-bottom: var(--space-6); }
.v2_highlight_label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  /* --text-faint is the natural choice for a label, but at 12px uppercase over
     the light theme's white panel it lands under 3:1. */
  color: var(--text-muted);
  margin-bottom: var(--space-1);
}
/* The six company facts. Their value is a bare text node inside the item, so
   the type treatment has to sit on the item itself. */
.v2_highlight_item.v2_stat {
  padding-bottom: var(--space-4);
  font-size: var(--fs-lead);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
}
.v2_highlight_title {
  font-size: var(--fs-h5);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  margin-bottom: var(--space-2);
}

/* technology stack */

.technology_stack_wrap { padding-bottom: 0; }
.technology_stack_wrap .v2_highlight_title { margin-bottom: var(--space-4); }

.stack_items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
}
.stack_item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1 1 15rem;
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-sm);
  color: var(--text);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
}
.stack_icon {
  flex: 0 0 auto;
  width: 50px;
  height: 30px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-image: url('../../images/technology_stack_icons_sprite_03.png');
}

[data-theme="dark"] .stack_icon:not(.with_icon_override) { filter: brightness(0) invert(1); opacity: 0.75; }

.stack_icon.icon_aws {background-position:0px 0px;}
.stack_icon.icon_azure {background-position:0px -101px;}
.stack_icon.icon_docker {background-position:0px -201px;}
.stack_icon.icon_gcp {background-position:0px -301px;}
.stack_icon.icon_ibmcloud {background-position:0px -401px;}
.stack_icon.icon_kubernetes {background-position:0px -501px;}
.stack_icon.icon_mesosphere {background-position:0px -601px;}
.stack_icon.icon_microsoft {background-position:0px -701px;}
.stack_icon.icon_pivotal {background-position:0px -801px;}
.stack_icon.icon_rancher {background-position:0px -901px;}
.stack_icon.icon_redhat {background-position:0px -1001px;}
.stack_icon.icon_vmware {background-position:0px -1101px;}
.stack_icon.icon_windows {background-position:0px -1201px;}
.stack_icon.icon_openshift {background-position:0px -1301px;}
.stack_icon.icon_pks {background-position:0px -1401px;}
.stack_icon.icon_oracle {background-position:0px -1501px;}
.stack_icon.icon_tanzu {background-position:0px -1601px;}
.stack_icon.icon_gitlab {background-position:0px -1701px;}
.stack_icon.icon_gcb {background-position:0px -1801px;}
.stack_icon.icon_linux {background-position:0px -1901px;}
.stack_icon.icon_opa {background-position:0px -2001px;}
.stack_icon.icon_yaml {background-position:0px -2101px;}
.stack_icon.icon_github {background-position:0px -2201px;}
.stack_icon.icon_terraform {background-position:0px -2301px;}
.stack_icon.icon_artifactsregistry {background-position:0px -2401px;}

.stack_icon.with_icon_override {
  width: 30px;
  background-size: contain;
  background-position: center center;
}

/* content blocks */
.content_block_wrap { margin-bottom: var(--space-5); }
.content_block_title { font-size: var(--fs-h3); }
.content_block_content { font-size: var(--fs-lead); line-height: var(--lh-body); }

@media (max-width: 1023px) {
  .customer_header_tile { min-height: 16rem; padding: var(--space-5); }
  .customer_header_tile_logo { height: 6rem; }
  /* Below desktop the glass panel is more chrome than the screen can spare;
     the items get dividers instead, as they did in the original. */
  .v2_highlights_glass_border { display: none; }
  .v2_highlights_content { padding-block: var(--space-4); }
  /* With no panel to sit inside, the extra inset just puts this band out of
     line with the rest of the page. */
  .v2_highlights_content > .container { padding-inline: var(--gutter); }
  .v2_highlight_item {
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-3);
    border-bottom: 1px solid var(--border);
  }
  .v2_highlight_item.v2_stat { margin-bottom: 0; }
  .v2_highlight_item.technology_stack_wrap { border-bottom: 0; }
  .content_block_content { font-size: var(--fs-body); }
}

/* page accelerator */

.page_accelerator_wrap {
  position: relative;
  z-index: 3;
  margin-bottom: var(--space-8);
  border-bottom: 1px solid var(--border);
}
.page_accelerator {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1);
  list-style: none;
  padding: 0;
}
.page_accelerator a {
  display: block;
  margin-bottom: -1px;
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.page_accelerator a:hover,
.page_accelerator a.active { color: var(--text-strong); border-bottom-color: var(--accent); }

/* videos library */


/* glass card */

.glass_v3 {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--surface-border-strong);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 45%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* Light sweep across the card on hover. One-shot, not a loop, so it is not
   gated on prefers-reduced-motion — see the note in tokens.css. */
.glass_v3::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text-strong) 8%, transparent), transparent);
  transition: left 600ms var(--ease);
}
.glass_v3:hover::before { left: 100%; }
.glass_v3.is_link { cursor: pointer; }
.glass_v3.is_link:hover {
  border-color: var(--danger);
  background-color: color-mix(in srgb, var(--danger) 10%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--danger) 45%, transparent);
}

/* video card */
.video_item_wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 100%;
  /* gutter between carousel slides — slick sizes the slide, not the card */
  padding-right: var(--space-4);
}
.video_item {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-height: 18rem;
  padding: var(--space-4);
  line-height: var(--lh-snug);
}

.video_image_wrap { position: relative; }
/* Carousel thumbnails come in via slick's data-lazy, so the <img> has no src
   until it scrolls in — the ratio box is what stops the card from jumping. */
.video_image_wrap img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--bg-inset);
}


.video_label {
  position: absolute;
  right: -5px;
  bottom: -16px;
  padding: 0.35em 1em;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: #fff;
  background-color: var(--danger);
  border-start-start-radius: var(--radius-sm);
  border-end-start-radius: var(--radius-sm);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
/* the folded-corner notch above the ribbon */
.video_label::after {
  content: "";
  position: absolute;
  right: 0;
  top: -5px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-left: 5px solid color-mix(in srgb, var(--danger) 45%, #000);
}

.video_content_wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-grow: 1;
  gap: var(--space-1);
  padding-block: var(--space-3);
}
.video_type { font-size: var(--fs-sm); color: var(--text-muted); }
/* flex-grow on the title is what pushes the CTA to the bottom of every card, so
   the buttons line up across a row of uneven titles. */
.video_title {
  flex-grow: 1;
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--text-strong);
}
.video_cta_button { margin-top: var(--space-4); }


[data-theme="dark"] .button.v2_solidarrowbutton.v2_white {
  background-image: none;
  background-color: #fff;
  color: var(--ink);
  box-shadow: none;
}
[data-theme="dark"] .button.v2_solidarrowbutton.v2_white:hover { background-color: var(--paper-2); color: var(--ink); }
.button.smaller_btn { padding: 0.6rem 1.1rem; font-size: var(--fs-sm); }

/* channel header */
.channel_logo {
  height: clamp(6rem, 11vw, 14rem);
  width: auto;
  max-width: 100%;
  margin: var(--space-3) 0 var(--space-5);
}

[data-theme="light"] .channel_logo {
  box-sizing: content-box;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius);
  background: var(--bg-inset);
}
.channel_subtitle {
  font-size: var(--fs-h5);
  font-weight: var(--fw-light);
  line-height: var(--lh-snug);
  color: var(--text-muted);
  margin-bottom: var(--space-5);
}


.categories_list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
}
.categories_list a {
  display: block;
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-sm);
  white-space: nowrap;
  color: var(--text);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 45%, transparent);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.categories_list a:hover {
  color: var(--text-strong);
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}
@media (max-width: 1215px) { .categories_list { flex-direction: row; } }
@media (max-width: 768px)  { .categories_list { display: none; } }

.featured_category_title,
.videos-page .category_title {
  font-size: var(--fs-h3);
  margin-top: var(--space-6);
  margin-bottom: var(--space-4);
}

/* carousel of videos */
/* .slick-slide is floated by slick's own stylesheet; a flex track overrides that
   and is what makes every card in a row the same height. */
.category_carousel_wrap .slick-track {
  display: flex;
  align-items: stretch;
  margin-left: 0;
  padding: 1px 0;
}
.category_carousel_wrap .slick-slide { height: auto; float: none; }
.category_carousel_wrap .slick-slide > div,
.category_carousel_wrap .slick-slide .video_item_wrap { height: 100%; }

.category_carousel_wrap { padding-inline: var(--space-8); }
.category_carousel_wrap .slick-prev { left: calc(var(--space-8) * -1); }
.category_carousel_wrap .slick-next { right: calc(var(--space-8) * -1); }
@media (max-width: 1023px) { .category_carousel_wrap { padding-inline: 0; } }
.category_carousel_wrap .slick-arrow { opacity: 0.5; transition: opacity var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.category_carousel_wrap:hover .slick-arrow { opacity: 0.8; }
.category_carousel_wrap .slick-arrow:hover { opacity: 1; }

/* featured strip */

.featured_video_wrap .video_item_wrap { padding-right: 0; }

@media (min-width: 1024px) {
  .featured_video_wrap .video_content_wrap { gap: var(--space-2); }
  .featured_video_wrap .video_type  { font-size: var(--fs-lead); }
  .featured_video_wrap .video_title { font-size: var(--fs-h4); font-weight: var(--fw-bold); }
}

@media (max-width: 768px) {
  .video_item_wrap { padding-right: 0; }
  .video_item { min-height: 0; }
}

/* pricing */


.pricingtable_wrap,
.estimator_wrap { position: relative; z-index: 3; }

.pricingtable_title,
.estimator_title { font-size: var(--fs-h1); margin-bottom: var(--space-3); }
.pricingtable_subtitle,
.estimator_subtitle { font-size: var(--fs-lead); color: var(--text-muted); margin-bottom: var(--space-8); }

/* plan cards */
.pricing_plan_item_wrap { position: relative; margin-bottom: var(--space-5); }
.pricing_plan_item {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--card-shadow);
}

.pricing_plan_item.with_label { border-color: var(--accent); }

.pricing_plan_header,
.result_plan_header {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  text-align: center;
  color: #fff;
  /* the blue gradient is fixed in both themes, so the accents below are the
     literal brand teal rather than --accent, which follows the theme */
  background-image: var(--gradient-primary);
}

.plan_label {
  margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) 0;
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.25);
}

.plan_pretitle { font-size: var(--fs-sm); letter-spacing: var(--ls-wide); text-transform: uppercase; opacity: 0.85; }
.plan_title { font-size: var(--fs-h2); font-weight: var(--fw-extrabold); line-height: var(--lh-heading); }
.plan_subtitle { font-size: var(--fs-h5); font-weight: var(--fw-semibold); opacity: 0.85; }

.plan_price_wrap {
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.plan_price { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--brand-teal); }
.plan_price_suffix { font-size: var(--fs-body); font-weight: var(--fw-regular); color: var(--brand-teal); }

.plan_cta { margin-top: auto; }
.plan_cta .button { width: 100%; }
/* solidneonbluearrowbutton is the blue gradient, which vanishes into the blue
   header. Inside a header it becomes the inverse. */
.pricing_plan_header .plan_cta .button,
.result_plan_header .plan_cta .button {
  background-image: none;
  background-color: #fff;
  border-color: transparent;
  color: var(--primary-strong);
  box-shadow: none;
}
.pricing_plan_header .plan_cta .button:hover,
.result_plan_header .plan_cta .button:hover { background-color: var(--paper-2); color: var(--primary-strong); }

.pricing_plan_body { flex: 1 1 auto; padding: var(--space-4) var(--space-3); }
.plan_feature_item {
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--text);
}
.plan_feature_item.display_as_group_title {
  margin-top: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
}
.plan_feature_item:first-child.display_as_group_title { margin-top: 0; padding-top: var(--space-2); border-top: 0; }
.feature_estimator_link { display: block; margin-top: var(--space-1); font-weight: var(--fw-medium); color: var(--primary); }
.feature_estimator_link:hover { color: var(--accent); }

.pricing_plan_footer { margin-top: auto; padding: 0 var(--space-5) var(--space-5); text-align: center; }

/* The "?" affordance beside a feature. It is an <span> with no content, so it
   needs its own box; the icon is dark ink artwork with no light variant. */
.tooltip_hint {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: -0.3em;
  background-image: url('../../images/icon_hint.png');
  background-repeat: no-repeat;
  background-position: center center;
  opacity: 0.4;
  cursor: pointer;
  transition: opacity var(--dur) var(--ease);
}
.tooltip_hint:hover { opacity: 1; }
[data-theme="dark"] .tooltip_hint { filter: brightness(0) invert(1); }


body > .tooltip {
  position: absolute;
  display: block;
  z-index: var(--z-modal);
  max-width: 300px;
  padding: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--text-strong);
  background: var(--bg-elevated-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
}

/* estimator */
.estimator_content_wrap {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--space-8);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--card-shadow);
}

.estimator_sliders_column { padding: var(--space-6); }
.estimator_cspm_title,
.estimator_image_scanning_title,
.estimator_dynamic_threat_analysis_title,
.estimator_workload_protection_title {
  font-size: var(--fs-h5);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  margin-bottom: var(--space-2);
}
.estimator_cspm_description,
.estimator_image_scanning_description,
.estimator_dynamic_threat_analysis_description,
.estimator_workload_protection_description { max-width: 90%; color: var(--text-muted); }

.estimator_slider_title { font-weight: var(--fw-semibold); margin: var(--space-5) 0 var(--space-2); }
.estimator_slider_wrap { margin-bottom: var(--space-2); }

/* The toggle floats right of its copy, so the section needs to contain it. */
.estimator_toggle_section_wrap {
  padding-top: var(--space-4);
  padding-bottom: var(--space-3);
  border-top: 1px solid var(--border);
}
.estimator_toggle_section_wrap::after { content: ""; display: table; clear: both; }
.estimator_dynamic_threat_analysis_toggle,
.estimator_workload_protection_toggle { float: right; margin-left: var(--space-5); }

.estimator_plans_column {
  position: relative;
  height: 100%;
  color: #fff;
  background-image: var(--gradient-primary);
}
.flex_helper_wrap { display: flex; flex-direction: column; justify-content: space-between; height: 100%; }

.result_plan_label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: var(--space-4) var(--space-5);
  text-align: center;
  font-size: var(--fs-h5);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--warning);
  background: rgba(0, 0, 0, 0.25);
}
.result_plan_label span.nowrap { white-space: nowrap; }


.result_plan_item_wrap { display: none; }
.result_plan_item_wrap.is_active { display: block; }

.estimator_disclaimer {
  margin: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  font-size: var(--fs-sm);
  opacity: 0.8;
}

@media (max-width: 768px) {
  .estimator_sliders_column { padding: var(--space-5) var(--space-4); }
  .estimator_cspm_description,
  .estimator_image_scanning_description,
  .estimator_dynamic_threat_analysis_description,
  .estimator_workload_protection_description { max-width: 100%; }
}

/* toggle */
/* Two-column, two-row sprite: normal and hover side by side, inactive over
   active. The ::after layer is the hover frame, cross-faded on top. */
.toggle {
  position: relative;
  display: block;
  width: 84px;
  height: 63px;
  cursor: pointer;
  background-image: url('../../images/toggle_sprite_150_03.png');
  background-repeat: no-repeat;
  background-position: 0 0;
}
.toggle::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background-image: url('../../images/toggle_sprite_150_03.png');
  background-repeat: no-repeat;
  background-position: -84px 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.toggle:hover::after { opacity: 1; }
.toggle.is-active { background-position: 0 -63px; }
.toggle.is-active::after { background-position: -84px -63px; }
.toggle.disabled { opacity: 0.3; cursor: default; }
.toggle.disabled:hover::after { opacity: 0; }

/* ion.rangeSlider 2.3.1 */

.irs {
  position: relative;
  display: block;
  user-select: none;
  font-size: var(--fs-sm);
}
.irs-line { position: relative; display: block; overflow: hidden; outline: none !important; }
.irs-bar { position: absolute; display: block; left: 0; width: 0; }
.irs-shadow { position: absolute; display: none; left: 0; width: 0; }
.irs-handle { position: absolute; display: block; box-sizing: border-box; cursor: default; z-index: 1; }
.irs-handle.type_last { z-index: 2; }
.irs-min, .irs-max { position: absolute; display: block; cursor: default; }
.irs-min { left: 0; }
.irs-max { right: 0; }
.irs-from, .irs-to, .irs-single { position: absolute; display: block; top: 0; left: 0; cursor: default; white-space: nowrap; }
.irs-grid { position: absolute; display: none; bottom: 0; left: 0; width: 100%; height: 20px; }
.irs-with-grid .irs-grid { display: block; }
.irs-grid-pol { position: absolute; top: 0; left: 0; width: 1px; height: 8px; background: var(--border-strong); }
.irs-grid-pol.small { height: 4px; }
.irs-grid-text {
  position: absolute;
  bottom: 0;
  left: 0;
  white-space: nowrap;
  text-align: center;
  font-size: 9px;
  line-height: 9px;
  padding: 0 3px;
  color: var(--text-muted);
}
.irs-disable-mask { position: absolute; display: block; top: 0; left: -1%; width: 102%; height: 100%; cursor: default; background: rgba(0, 0, 0, 0); z-index: 2; }
.irs-disabled { opacity: 0.4; }
.irs-hidden-input {
  position: absolute !important;
  display: block !important;
  top: 0 !important;
  left: 0 !important;
  width: 0 !important;
  height: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  outline: none !important;
  z-index: -9999 !important;
  background: none !important;
  border-style: solid !important;
  border-color: transparent !important;
}

/* the "aqua" skin */
.irs--aqua { height: 80px; }
.irs--aqua.irs-with-grid { margin-bottom: 20px; }
.irs--aqua .irs-line { top: 35px; height: 20px; border-radius: var(--radius-sm); background-color: var(--bg-elevated-2); }
.irs--aqua .irs-bar { top: 35px; height: 20px; background-image: var(--gradient-primary); }
.irs--aqua .irs-bar--single { border-start-start-radius: var(--radius-sm); border-end-start-radius: var(--radius-sm); }
.irs--aqua .irs-shadow { height: 1px; bottom: 16px; background-color: var(--border-strong); }
.irs--aqua .irs-handle { top: 30px; width: 16px; height: 30px; background-color: transparent; cursor: e-resize; }
.irs--aqua .irs-handle > i:first-child {
  position: absolute;
  display: block;
  top: 0;
  left: 50%;
  width: 4px;
  height: 100%;
  margin-left: -1px;
  border-radius: 2px;
  background-color: var(--text-strong);
}
.irs--aqua .irs-handle.state_hover > i:first-child,
.irs--aqua .irs-handle:hover > i:first-child { background-color: var(--accent); }
.irs--aqua .irs-min,
.irs--aqua .irs-max {
  top: 0;
  padding: 2px 10px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.333;
  color: var(--text-muted);
  background-color: var(--bg-elevated-2);
  border-radius: var(--radius-sm);
}
.irs--aqua .irs-from,
.irs--aqua .irs-to,
.irs--aqua .irs-single {
  padding: 2px 10px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.333;
  color: #fff;
  background-color: var(--primary-strong);
  border-radius: var(--radius-sm);
}
.irs--aqua .irs-from::before,
.irs--aqua .irs-to::before,
.irs--aqua .irs-single::before {
  content: "";
  position: absolute;
  display: block;
  bottom: -6px;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -3px;
  overflow: hidden;
  border: 3px solid transparent;
  border-top-color: var(--primary-strong);
}
.irs--aqua .irs-grid-pol { background-color: var(--border-strong); }
.irs--aqua .irs-grid-text { color: var(--text-muted); }

/* pricing v2 */

.pricing_sections_title { font-size: var(--fs-h1); margin-bottom: var(--space-3); }
.pricing_sections_subtitle { font-size: var(--fs-lead); color: var(--text-muted); }
.pricing_sections_blurb { font-size: var(--fs-lead); margin-bottom: var(--space-6); }

.pricing_section_item_wrap { margin-bottom: var(--space-6); }
.pricing_section_item {
  position: relative;
  overflow: hidden;
  padding: var(--space-7) var(--space-6) var(--space-5);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--card-shadow);
}
/* accent rule across the top of each plan */
.pricing_section_item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background-image: var(--gradient-primary);
}

.leftcolumn_wrap { display: flex; flex-direction: column; height: 100%; }
.section_title_wrap { flex-grow: 1; }
.section_title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--text-strong);
  margin-bottom: var(--space-2);
}
.section_subtitle { font-size: var(--fs-lead); line-height: var(--lh-snug); color: var(--text-muted); }
.section_cta_button { margin: var(--space-5) 0 var(--space-3); }
.section_disclaimer { font-size: var(--fs-sm); opacity: 0.85; }

.section_short_description { font-size: var(--fs-lead); padding-bottom: var(--space-3); }
.section_features_wrap { padding-bottom: var(--space-3); }
.section_feature_item {
  position: relative;
  padding: var(--space-2) 0 var(--space-2) var(--space-8);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--text);
}

.section_feature_item .item_icon {
  position: absolute;
  left: 0.75rem;
  top: 0.7rem;
  width: 0.5rem;
  height: 0.9rem;
  border: solid var(--accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.section_feature_item.display_as_group_title {
  padding: var(--space-4) 0 var(--space-1);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
}

/* page-company_about_v3 */

.v3_management_wrap,
.v3_investors_wrap,
.v3_awards_wrap,
.v3_impact_wrap { position: relative; z-index: 3; padding-block: var(--space-9); }

/* Deep bands in both themes: the award marks are white knockouts. */
.v3_awards_wrap,
.v3_impact_wrap {
  color: #fff;
  background-color: var(--ink-deep);
  background-image: radial-gradient(at 20% 0%, var(--navy-700) 0, transparent 55%),
                    radial-gradient(at 90% 100%, var(--brand-blue) 0, transparent 60%);
}
.v3_awards_wrap .awards_title,
.v3_awards_wrap .award_title,
.v3_impact_wrap .impact_title { color: #fff; }
.v3_awards_wrap .awards_subtitle,
.v3_awards_wrap .award_subtitle,
.v3_impact_wrap .impact_subtitle { color: rgba(255, 255, 255, 0.75); }
.v3_awards_wrap .button.is-outlined,
.v3_impact_wrap .button.is-outlined { border-color: rgba(255, 255, 255, 0.5); color: #fff; }
.v3_awards_wrap .button.is-outlined:hover,
.v3_impact_wrap .button.is-outlined:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); color: #fff; }

.management_title,
.investors_title,
.awards_title,
.impact_title { font-size: var(--fs-display); font-weight: var(--fw-extrabold); line-height: var(--lh-heading); }
.management_title span,
.investors_title span { display: block; }
.awards_subtitle,
.impact_subtitle { font-size: var(--fs-lead); color: var(--text-muted); margin-top: var(--space-4); }
.awards_cta,
.impact_cta { margin-top: var(--space-6); }

.management_title_wrap,
.investors_title_wrap,
.impact_titles_wrap { display: flex; flex-direction: column; justify-content: center; height: 100%; }

.manager,
.investor_item {
  height: 100%;
  padding: var(--space-6);
  text-align: center;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color var(--dur) var(--ease);
}
.manager { position: relative; }
.manager:hover,
.investor_item:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }

.manager_photo_wrap {
  width: 180px;
  height: 180px;
  margin: 0 auto var(--space-3);
  border: 2px solid var(--surface-border-strong);
  border-radius: 50%;
  overflow: hidden;
}
.manager_photo { width: 100%; height: 100%; background-size: cover; background-position: center; }
.manager_title { font-size: var(--fs-h5); font-weight: var(--fw-bold); color: var(--text-strong); }
.manager_subtitle { font-size: var(--fs-body); color: var(--text-muted); }

.manager_social_links { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-4); }
.manager_social_url {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.manager_social_url:hover { border-color: var(--accent); background-color: color-mix(in srgb, var(--accent) 12%, transparent); }
.manager_social_url.linkedin { background-image: url('../../images/icons/social/ico_linkedin_white.svg'); }
.manager_social_url.twitter  { background-image: url('../../images/icons/social/ico_twitterx_white.svg'); }
[data-theme="light"] .manager_social_url { background-color: var(--ink); border-color: transparent; }

/* Investor marks are dark-on-light, so the plaque stays white in both themes. */
.investor_logo_wrap {
  height: 150px;
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius);
  background: #fff;
}
.investor_logo { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.investor_logo img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; }
.investor_title { font-size: var(--fs-h5); font-weight: var(--fw-bold); color: var(--text-strong); }
.investor_title span { display: block; }
.investor_subtitle { font-size: var(--fs-body); color: var(--text-muted); }

.award_item { height: 100%; text-align: center; }
.award_image_wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 160px;
  margin-bottom: var(--space-3);
  transition: opacity var(--dur) var(--ease);
}
.award_image { max-width: 100%; max-height: 100%; width: auto; }
.award_item:hover .award_image_wrap { opacity: 0.8; }
.award_title { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--text-strong); }
.award_subtitle { font-size: var(--fs-body); color: var(--text-muted); }

.impact_image {
  padding: 10px;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
}
.impact_image img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }

@media (max-width: 1023px) {
  .management_title,
  .investors_title,
  .awards_title,
  .impact_title { font-size: var(--fs-h1); }
  .manager_photo_wrap { width: 140px; height: 140px; }
  .award_image_wrap { height: 120px; }
}