/* Everest Biolabs — component & utility classes.
   Patterns are built from core blocks that carry these class names, so the
   markup stays fully editable in Gutenberg while matching the handoff design.
   Loaded on the front end and in the editor (see functions.php). */

/* ------------------------------------------------------------------ *
 * Base
 * ------------------------------------------------------------------ */
body.wp-site-blocks,
body {
  font-family: var(--font-sans);
  color: var(--text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { text-decoration: none; }
.eb-strong { color: var(--text-strong); }
.eb-muted  { color: var(--text-muted); }
.eb-body   { color: var(--text-body); }

/* Constrained inner container used by full-bleed sections */
.eb-container { max-width: var(--maxw); margin-inline: auto; padding-inline: 32px; box-sizing: border-box; }

/* Section vertical rhythm */
.eb-section       { padding-block: 86px; }
.eb-section--tight{ padding-block: 56px; }

/* Surface helpers */
.eb-surface-tint   { background: var(--surface-tint); }
.eb-surface-sunken { background: var(--surface-sunken); }
.eb-surface-dark   { background: var(--green-900); color: #fff; }
.eb-border-y { border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.eb-border-t { border-top: 1px solid var(--border-subtle); }
.eb-border-b { border-bottom: 1px solid var(--border-subtle); }

/* ------------------------------------------------------------------ *
 * Eyebrow / overline (orange triangle + uppercase green label)
 * ------------------------------------------------------------------ */
.eb-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-accent); margin: 0 0 12px;
}
/* The orange triangle marker shows only on eyebrows in the FIRST section of
   the page (the top). Everywhere else the eyebrow is just the label. */
.eb-eyebrow::before { content: none; }
.wp-block-post-content > :first-child .eb-eyebrow::before,
main > :first-child:not(.wp-block-post-content) .eb-eyebrow::before,
.eb-eyebrow.eb-triangle::before {
  content: ""; width: 0; height: 0;
  border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-bottom: 12px solid var(--orange-600); flex: none;
}
/* Per-eyebrow overrides via Advanced → Additional CSS class(es):
     eb-triangle    → force the marker ON  (e.g. a non-top section)
     eb-no-triangle → force the marker OFF (even in the top section) */
.eb-eyebrow.eb-no-triangle::before { content: none !important; }
.eb-surface-dark .eb-eyebrow { color: var(--accent); }

/* ------------------------------------------------------------------ *
 * Green-check bullet list
 * ------------------------------------------------------------------ */
.eb-checklist { list-style: none; margin: 18px 0 0; padding: 0; }
.eb-checklist li {
  position: relative; padding: 7px 0 7px 28px;
  font-size: 15px; color: var(--text-body);
}
/* Green checkmark (matches the design), drawn as a masked SVG so it recolors
   on dark surfaces via background-color. */
.eb-checklist li::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 18px; height: 18px; background-color: var(--action);
  -webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
.eb-surface-dark .eb-checklist li { color: var(--text-on-dark-muted); }
.eb-surface-dark .eb-checklist li::before { background-color: var(--accent); }
/* The design uses SQUARE bullets in the hero (first section) and checkmarks in
   the sections below it. Override the first section back to squares. */
.wp-block-post-content > :first-child .eb-checklist li,
main > :first-child:not(.wp-block-post-content) .eb-checklist li { padding-left: 24px; }
.wp-block-post-content > :first-child .eb-checklist li::before,
main > :first-child:not(.wp-block-post-content) .eb-checklist li::before {
  -webkit-mask: none; mask: none;
  top: 13px; width: 9px; height: 9px; border-radius: 2px;
  background-color: var(--action);
}
.wp-block-post-content > :first-child.eb-surface-dark .eb-checklist li::before,
main > :first-child.eb-surface-dark:not(.wp-block-post-content) .eb-checklist li::before { background-color: var(--accent); }

/* ------------------------------------------------------------------ *
 * Everest List block (everest/list) — bullet chosen from the sidebar,
 * not from position. Base + one rule per bullet variant.
 * ------------------------------------------------------------------ */
.eb-list { list-style: none; margin: 18px 0 0; padding: 0; }
.eb-list li { position: relative; padding: 7px 0 7px 28px; font-size: 15px; color: var(--text-body); }
.eb-list li::before { content: ""; position: absolute; left: 0; }
/* Checkmark (masked SVG so it recolours on dark surfaces). */
.eb-list--check li::before {
  top: 6px; width: 18px; height: 18px; background-color: var(--action);
  -webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
/* The non-check markers sit closer to the text. */
.eb-list--square li,
.eb-list--circle li,
.eb-list--open-circle li,
.eb-list--triangle li,
.eb-list--triangle-orange li { padding-left: 24px; }
.eb-list--square li::before      { top: 13px; width: 9px; height: 9px; border-radius: 2px; background: var(--action); }
.eb-list--circle li::before      { top: 12px; width: 9px; height: 9px; border-radius: 50%; background: var(--action); }
.eb-list--open-circle li::before { top: 12px; width: 9px; height: 9px; border-radius: 50%; background: transparent; border: 2px solid var(--action); }
/* Up-pointing triangles (same geometry as the eyebrow marker). */
.eb-list--triangle li::before,
.eb-list--triangle-orange li::before {
  top: 9px; width: 0; height: 0;
  border-left: 6px solid transparent; border-right: 6px solid transparent;
}
.eb-list--triangle li::before        { border-bottom: 10px solid var(--action); }
.eb-list--triangle-orange li::before { border-bottom: 10px solid var(--orange-600); }
/* Dark-surface recolour (green markers → light accent; orange stays brand orange). */
.eb-surface-dark .eb-list li { color: var(--text-on-dark-muted); }
.eb-surface-dark .eb-list--check li::before,
.eb-surface-dark .eb-list--square li::before,
.eb-surface-dark .eb-list--circle li::before { background-color: var(--accent); }
.eb-surface-dark .eb-list--open-circle li::before { border-color: var(--accent); }
.eb-surface-dark .eb-list--triangle li::before { border-bottom-color: var(--accent); }

/* ------------------------------------------------------------------ *
 * Buttons — align core buttons to the handoff variants
 * ------------------------------------------------------------------ */
.eb-btn,
.wp-block-button.eb-btn-primary .wp-block-button__link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 15px; padding: 12px 22px;
  border-radius: 8px; background: var(--action); color: #fff;
  transition: background .15s;
}
.wp-block-button.eb-btn-primary .wp-block-button__link:hover { background: var(--action-hover); }

.wp-block-button.eb-btn-outline .wp-block-button__link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 15px; padding: 11px 20px;
  border-radius: 8px; background: transparent;
  color: var(--action); border: 1.6px solid var(--action);
  transition: background .15s;
}
.wp-block-button.eb-btn-outline .wp-block-button__link:hover { background: var(--surface-tint); }

.eb-surface-dark .wp-block-button.eb-btn-ondark .wp-block-button__link {
  background: #fff; color: var(--green-900);
}
.eb-link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14.5px; font-weight: 700; color: var(--action);
}
.eb-link-arrow::after {
  content: "→"; font-weight: 700; transition: transform .15s;
}
.eb-link-arrow:hover::after { transform: translateX(3px); }
/* everest/link-arrow block: a standalone CTA gets a little space above, and
   can be centred / right-aligned (the base class is inline-flex, so switch to
   flex to move it). */
.wp-block-everest-link-arrow { margin-top: 18px; }
.eb-link-arrow.is-center { display: flex; justify-content: center; }
.eb-link-arrow.is-right  { display: flex; justify-content: flex-end; }
/* Button variant: the same CTA rendered as the primary green button, arrow
   tucked inside the pill. */
.wp-block-everest-link-arrow.is-button { margin-top: 24px; }
.eb-link-arrow.is-button::after { content: none; }
.eb-link-arrow.is-button > a {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--action); color: #fff;
  padding: 12px 22px; border-radius: 8px;
  font-weight: 700; text-decoration: none;
}
.eb-link-arrow.is-button > a::after { content: "→"; transition: transform .15s; }
.eb-link-arrow.is-button > a:hover { background: var(--action-hover); }
.eb-link-arrow.is-button > a:hover::after { transform: translateX(3px); }
/* Outline button variant: same pill, transparent with a green (or white-on-dark) border. */
.eb-link-arrow.is-button.is-button-outline > a { background: transparent; color: var(--action); border: 1.6px solid var(--action); padding: 11px 20px; }
.eb-link-arrow.is-button.is-button-outline > a:hover { background: var(--surface-tint); }
.eb-surface-dark .eb-link-arrow.is-button.is-button-outline > a { color: #fff; border-color: #ffffff57; }
.eb-surface-dark .eb-link-arrow.is-button.is-button-outline > a:hover { background: rgba(255,255,255,.08); }
/* Hero CTA row: when a button is followed by a second link-arrow on the same
   line (e.g. Shop hero "View cart" + "Order history"), give the button breathing
   room to its right so they don't touch. Scoped with :has so a lone button is
   unaffected. */
.eb-pagehero .eb-link-arrow.is-button:has(+ .eb-link-arrow) { margin-right: 22px; }
/* Stacked CTA buttons: two (or more) link-arrow buttons in a left-aligned
   vertical column with space between, instead of sitting on one row
   (e.g. Atlas Reader "Read out what you isolate"). */
.eb-btn-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.eb-btn-stack > .wp-block-everest-link-arrow { margin-top: 0; }
/* Optional CTA: a link-arrow with no text filled in renders nothing on the page
   (the button/arrow only appears once a label is set). Stays visible while being
   edited (focus-within) so it can still be filled in. */
.eb-link-arrow:not(:focus-within):has(> a > span:empty) { display: none; }
/* In-page section jump targets — offset for the sticky header. */
#ascent, #apex, #atlas-elisa { scroll-margin-top: 100px; }

/* ------------------------------------------------------------------ *
 * Hero (dark green + triangle-pattern overlay)
 * ------------------------------------------------------------------ */
.eb-hero {
  position: relative; overflow: hidden;
  background: var(--green-900); color: #fff;
}
.eb-hero::after {
  content: ""; position: absolute; right: -40px; bottom: 0;
  width: 60%; height: 108%; opacity: .5; pointer-events: none;
  background: url("../images/triangle-pattern-color.png") right bottom / contain no-repeat;
}
.eb-hero > * { position: relative; z-index: 1; }
.eb-hero h1 {
  font-size: clamp(2.25rem, 5vw, 56px); font-weight: 800;
  letter-spacing: -1.2px; line-height: 1.06; color: #fff; margin: 0;
}
.eb-hero .eb-hero-accent { color: var(--accent); }
.eb-hero .eb-hero-lede { font-size: 21px; font-weight: 600; color: #eafff0; margin: 20px 0 0; }
.eb-hero .eb-hero-sub  { font-size: 16.5px; color: var(--text-on-dark-muted); line-height: 1.7; margin: 18px 0 0; max-width: 64ch; }
/* A little breathing room between the hero copy and its optional CTA button. */
.eb-hero .wp-block-everest-link-arrow, .eb-hero .wp-block-buttons { margin-top: 32px; }
/* Hero with a framed product image beside the copy (e.g. Ascent unboxing). */
.eb-hero--media > .eb-container { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .9fr); gap: 48px; align-items: center; }
.eb-hero--media .eb-hero__text { max-width: 620px; }
.eb-hero--media .eb-hero__media { justify-self: center; width: 100%; }
.eb-hero--media .eb-hero__media .eb-media-card { min-height: 0; width: 100%; }
.eb-hero--media .eb-hero__media .eb-media-card img { max-height: 300px; }
@media (max-width: 860px) {
  .eb-hero--media > .eb-container { grid-template-columns: 1fr; gap: 28px; }
  .eb-hero--media .eb-hero__media { display: none; }
}

/* Page hero (light, used by interior pages) */
.eb-pagehero h1 {
  font-size: clamp(2rem, 4.5vw, 44px); font-weight: 800;
  letter-spacing: -.8px; line-height: 1.08; color: var(--text-strong); margin: 14px 0 0;
}
.eb-pagehero .eb-pagehero-sub { font-size: 17.5px; color: var(--text-muted); line-height: 1.6; margin: 16px 0 0; max-width: 62ch; }

/* ------------------------------------------------------------------ *
 * Feature row (image card + copy) — alternating layouts
 * ------------------------------------------------------------------ */
.eb-media-card {
  background: radial-gradient(120% 100% at 50% 30%, #ffffff, #eef6ec);
  border: 1px solid var(--border-subtle); border-radius: 20px;
  padding: 30px; display: flex; align-items: center; justify-content: center;
  min-height: 330px;
}
.eb-media-card img { max-width: 100%; max-height: 330px; width: auto; object-fit: contain; display: block; }
.eb-feature-h2 { font-size: 30px; font-weight: 800; letter-spacing: -.4px; line-height: 1.2; color: var(--text-strong); margin: 0; }
/* Section Text used as a page's top heading (asH1): larger, page-hero scale. */
.eb-feature-h2--page { font-size: clamp(2rem, 1.6rem + 1.7vw, 2.75rem); letter-spacing: -.7px; line-height: 1.1; }

/* ------------------------------------------------------------------ *
 * Cards (news / application notes / products)
 * ------------------------------------------------------------------ */
.eb-card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--border-subtle); border-radius: 14px;
  overflow: hidden; transition: box-shadow .18s, transform .18s; height: 100%;
}
.eb-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.eb-card__media { aspect-ratio: 16/9; overflow: hidden; background: var(--surface-sunken); }
.eb-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eb-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.eb-card__body h3 { font-size: 16px; font-weight: 700; line-height: 1.35; margin: 0; color: var(--text-strong); }
.eb-tag {
  align-self: flex-start; font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: #0c6342; background: #e7fdea;
  padding: 4px 9px; border-radius: 999px;
}
.eb-tag--spark { color: #6b3d02; background: var(--orange-100); }
.eb-tag--gold  { color: #7a5200; background: #fff0db; }
/* Everest Tag List: "Validated in:" label followed by a wrapping row of pills. */
.eb-taglist { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; align-items: center; }
.eb-taglist__label { font-size: 12.5px; font-weight: 700; color: var(--text-muted); }

/* Everest Map + region-grouped distributor cards (everest/map) */
.eb-map { margin-top: 26px; }
.eb-map__canvas { height: 460px; width: 100%; border: 1px solid var(--border-subtle); border-radius: 16px; overflow: hidden; background: var(--surface-sunken); position: relative; z-index: 0; }
/* Split layout: map (canvas + legend) sits in a tall, sticky left column beside
   the region cards, so the map runs from the top of the section down past the
   cards. Collapses back to stacked on narrow screens. */
.eb-map-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: start; margin-top: 26px; }
.eb-map-split .eb-map { margin-top: 0; position: sticky; top: 24px; }
.eb-map-split .eb-map__regions { margin-top: 0; }
.eb-map.is-split .eb-map__canvas { height: clamp(460px, 74vh, 720px); }
@media (max-width: 860px) {
  .eb-map-split { grid-template-columns: 1fr; gap: 0; }
  .eb-map-split .eb-map { position: static; }
  .eb-map.is-split .eb-map__canvas { height: 420px; }
}
.eb-map__legend { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.eb-map__key { display: inline-flex; align-items: center; gap: 8px; }
.eb-map__dot { width: 13px; height: 13px; border-radius: 50%; display: inline-block; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--border-subtle); }
.eb-map__regions { margin-top: 34px; }
.eb-map__region { font-size: 13px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--green-700); margin: 30px 0 0; }
.eb-map__region:first-child { margin-top: 0; }
.eb-distcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; margin-top: 16px; }
.eb-distcard { border: 1px solid var(--border-subtle); border-radius: 14px; background: #fff; padding: 22px; }
.eb-distcard__country { margin: 0; font-size: 17px; font-weight: 800; color: var(--text-strong); }
.eb-distcard__company { margin: 4px 0 0; font-size: 14px; font-weight: 600; color: var(--green-700); }
.eb-distcard__contact { margin: 10px 0 0; font-size: 14px; display: flex; flex-direction: column; gap: 2px; }
.eb-distcard__contact a { color: var(--text-muted); text-decoration: none; }
.eb-distcard__contact a:hover { color: var(--action); }
.eb-distcard__link { margin-top: 12px; }
/* HQ (direct-contact) cards: distributor-card shell + green accent + labelled rows. */
.eb-distcard--hq { border-top: 3px solid var(--action); }
.eb-distcard__eyebrow { margin: 0 0 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--green-700); }
.eb-distcard__row { margin: 0 0 9px; font-size: 14px; display: flex; flex-direction: column; gap: 1px; }
.eb-distcard__row:last-child { margin-bottom: 0; }
.eb-distcard__rowlabel { font-size: 12px; font-weight: 700; color: var(--text-strong); }
.eb-distcard__row a { color: var(--action); text-decoration: none; }
.eb-distcard__row a:hover { text-decoration: underline; }
.eb-distcard__addr { margin: 0 0 4px; font-size: 14px; color: var(--text-body); line-height: 1.5; }
.eb-distcard__addr a { color: inherit; text-decoration: none; }
.eb-distcard__addr a:hover { color: var(--action); text-decoration: underline; }

/* Everest Contact Details (everest/contact-details) */
.eb-contact__group { margin-top: 22px; }
.eb-contact__group:first-child { margin-top: 0; }
.eb-contact__label { margin: 0 0 3px; font-size: 12.5px; font-weight: 800; letter-spacing: .03em; color: var(--green-800); }
.eb-contact__val { margin: 2px 0 0; font-size: 15px; line-height: 1.5; }
.eb-contact__val a { color: var(--orange-600); text-decoration: none; }
.eb-contact__val a:hover { text-decoration: underline; }
.eb-contact__val--text { color: var(--text-body); }

/* Everest Shop Card (everest/shop-card) — curated card + live Shopify price/cart */
.eb-shop-card { display: flex; flex-direction: column; overflow: hidden; height: 100%; }
.eb-shop-card__media { background: var(--surface-sunken); display: flex; align-items: center; justify-content: center; padding: 22px; aspect-ratio: 4 / 3; }
.eb-shop-card__media img { max-width: 100%; max-height: 210px; width: auto; height: auto; object-fit: contain; display: block; }
.eb-shop-card__media img[hidden] { display: none; }
.eb-shop-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.eb-shop-card:hover { box-shadow: none; transform: none; }
.eb-shop-card__title { margin: 0; font-size: 16.5px; font-weight: 800; color: var(--text-strong); line-height: 1.25; }
.eb-shop-card__desc { margin: 0; font-size: 13.5px; color: var(--text-muted); line-height: 1.5; }
.eb-shop-card__price { margin: 4px 0 0; font-size: 18px; font-weight: 800; color: var(--green-700); }
/* Understated per-unit line under the price (e.g. "$23.75 per column"). */
.eb-shop-card__perunit { margin: 2px 0 0; font-size: 12px; font-weight: 500; color: var(--text-muted); }
.eb-shop-card__perunit:empty { display: none; }
.eb-shop-card__sku { margin: 0; font-size: 12px; letter-spacing: .02em; color: var(--text-muted); }
.eb-shop-card__sku strong { color: var(--text-strong); font-weight: 700; letter-spacing: .04em; }
.eb-shop-card__sku:empty { display: none; }
.eb-shop-card__sku[hidden] { display: none; }
.eb-shop-card__price--quote { font-size: 14px; font-weight: 700; color: var(--text-muted); }
.eb-shop-card shopify-variant-selector { display: block; margin: 6px 0 2px; }
.eb-shop-card__add { align-self: flex-start; margin-top: 6px; background: var(--action); color: #fff; border: 0; border-radius: 8px; font: inherit; font-weight: 700; padding: 10px 18px; cursor: pointer; transition: background .15s ease; }
.eb-shop-card__add:hover { background: var(--action-hover); }
.eb-shop-card__add[disabled] { opacity: .5; cursor: not-allowed; }
.eb-shop-card__cta { margin-top: 6px; }

/* Everest Image Links (everest/image-links) — dark band of photo category tiles */
.eb-imagelinks { padding: 60px 0 66px; }
.eb-imagelinks__eyebrow { color: var(--accent); margin: 0 0 22px; }
.eb-imagelinks__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.eb-imgtile { position: relative; display: block; aspect-ratio: 4 / 3.4; border-radius: 16px; overflow: hidden; color: #fff; text-decoration: none; }
.eb-imgtile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.eb-imgtile__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,53,34,.05) 38%, rgba(7,53,34,.74) 100%); }
.eb-imgtile__label { position: absolute; left: 22px; bottom: 20px; z-index: 1; display: inline-flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 800; letter-spacing: -.3px; }
.eb-imgtile__arrow { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1.6px solid rgba(255,255,255,.85); border-radius: 50%; flex: none; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.eb-imgtile:hover .eb-imgtile__img { transform: scale(1.05); }
.eb-imgtile:hover .eb-imgtile__arrow { background: var(--accent); border-color: var(--accent); color: var(--green-900); }
@media (max-width: 782px) { .eb-imagelinks__grid { grid-template-columns: 1fr; } }

/* Product card (shop) */
.eb-product-card { border-radius: 16px; }
.eb-product-card .eb-card__media { aspect-ratio: 4/3; background: #fff; border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: center; padding: 18px; }
.eb-product-card .eb-card__media img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.eb-product-card:hover { box-shadow: 0 18px 38px rgba(7,53,34,.10); transform: translateY(-4px); }

/* Elevate-on-hover for INTERACTIVE bordered card groups in column grids —
   i.e. cards that link somewhere (Compatible Columns link to product pages).
   Scoping with :has(a) keeps static figure/chart and text-only cards put.
   Add the class "eb-no-lift" to force any card static. */
main .wp-block-column > .wp-block-group.has-background:has(a[href]) {
  transition: box-shadow .18s ease, transform .18s ease;
}
main .wp-block-column > .wp-block-group.has-background:has(a[href]):hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(7,53,34,.10);
}
main .wp-block-column > .wp-block-group.has-background.eb-no-lift:hover {
  transform: none; box-shadow: none;
}

/* One Workflow / integration link cards (dark section, built as raw-HTML
   anchors). Targeted by their distinctive translucent-green border so they
   lift on hover like the other clickable cards — no re-insert needed. */
a[style*="rgba(164,237,177"] {
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
a[style*="rgba(164,237,177"]:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(0,0,0,.28);
  background: rgba(255,255,255,.12) !important;
}

/* ------------------------------------------------------------------ *
 * TablePress column helpers — add to the TablePress block's
 * Advanced → Additional CSS class(es). They work whether the class lands on
 * the table or a wrapper, so no guesswork.
 *   eb-tp-center → centre every data column (all but the first). For the
 *                  comparison-table look. (Leave off for left-aligned.)
 *   eb-tp-3466   → first column ~34%, the rest share ~66% (key/value specs).
 * ------------------------------------------------------------------ */
.eb-tp-center td:not(.column-1), .eb-tp-center th:not(.column-1) { text-align: center; }
.eb-tp-3466 .column-1 { width: 34%; }

/* Card row (latest news / application notes).
   A wrapping flex row rather than an overflow scroller: no scroll container,
   so no phantom vertical scrollbar and hover shadows are never clipped. Cards
   are equal height and share the row width (max ~3 across), wrapping on
   narrow screens. */
.eb-card-scroller {
  display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch;
  padding: 0;
}
.eb-card-scroller > * {
  flex: 1 1 300px; max-width: 420px;
  align-self: stretch;   /* all cards in the row take the same (tallest) height */
  height: auto;          /* let the stretch define height, not the content */
  /* WordPress's flow layout injects a top margin on non-first children;
     neutralise it so every card aligns. */
  margin-block: 0 !important;
}
/* Pin the "Read more" link to the bottom of each equal-height card. */
.eb-card__body { flex: 1; }
.eb-card__body .eb-link-arrow { margin-top: auto; }

/* Application Notes block (everest/app-notes) — section header row + tag pills.
   The cards reuse .eb-card-scroller / .eb-card above. */
.eb-appnotes__head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; margin-bottom: 26px; }
.eb-appnotes__head > div { min-width: 0; }
.eb-appnotes__tags { display: flex; flex-wrap: wrap; gap: 6px; }
/* Archive mode: a wrapping grid of note cards + a live category filter. */
.eb-appnotes__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px; align-items: start; }
.eb-appfilter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.eb-appfilter__pill { font: inherit; font-size: 13px; font-weight: 700; color: var(--green-700); background: #fff; border: 1.5px solid var(--border-subtle); border-radius: 999px; padding: 7px 15px; cursor: pointer; transition: background .14s, color .14s, border-color .14s; }
.eb-appfilter__pill:hover { border-color: var(--green-400); }
.eb-appfilter__pill.is-active { background: var(--green-600); color: #fff; border-color: var(--green-600); }
.eb-appfilter__empty { color: var(--text-muted); font-size: 14px; margin: 8px 0 0; }
@media (max-width: 640px) { .eb-appnotes__grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ *
 * Product card grid — the "Everest Product Grid" / "Product Card"
 * blocks (e.g. the Apex column & plate range). The second selector
 * makes the grid lay out inside the block editor's InnerBlocks wrapper
 * too, so it previews correctly while editing.
 * ------------------------------------------------------------------ */
.eb-pcard-grid,
.eb-pcard-grid > .block-editor-inner-blocks > .block-editor-block-list__layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 16px; margin: 0;
}
.eb-pcard {
  display: flex; flex-direction: column; align-items: center;
  background: #fff; border: 1px solid var(--border-subtle); border-radius: 14px;
  padding: 18px 12px; text-align: center;
}
.eb-pcard__media { margin: 0; }
.eb-pcard__media a { display: inline-block; }
.eb-pcard__media img { width: 110px; height: auto; display: block; margin: 0 auto; }
.eb-pcard__label {
  display: inline-block; margin: 12px 0 0; padding: 3px 14px;
  border-radius: 6px; color: #fff; font-size: 12px; font-weight: 800; line-height: 1.5;
}

/* ------------------------------------------------------------------ *
 * About page — hero triangle + team-bio modal
 * ------------------------------------------------------------------ */
/* Faceted triangle anchored to the bottom-right of the dark hero. Sized by
   HEIGHT relative to the hero (not a fixed width) so the peak always stays
   inside the section and is never clipped by overflow:hidden. */
.eb-abouthero { position: relative; overflow: hidden; }
.eb-abouthero > .eb-container { position: relative; z-index: 1; }
.eb-hero-tri { position: absolute; right: 0; bottom: 0; height: 74%; max-height: 300px; width: auto; opacity: .14; pointer-events: none; z-index: 0; }
.eb-hero-tri svg { display: block; height: 100%; width: auto; }
/* Everest Mountain block — inline (non-decor) sizing; decor mode reuses .eb-hero-tri. */
.eb-mountain:not(.eb-hero-tri) svg { display: block; width: auto; height: auto; max-width: 200px; margin-inline: auto; }

/* "Read bio" opens a centered modal. .eb-bio summary keeps its small green
   link look (styled above); JS turns the click into the modal below. */
.eb-biomodal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.eb-biomodal[hidden] { display: none; }
.eb-biomodal__scrim { position: absolute; inset: 0; background: rgba(7,53,34,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.eb-biomodal__card { position: relative; background: #fff; border-radius: 20px; max-width: 640px; width: 100%; max-height: 85vh; overflow-y: auto; padding: 32px 34px; box-shadow: 0 30px 70px rgba(7,53,34,.35); }
.eb-biomodal__close { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border-subtle); background: #fff; color: var(--text-strong); font-size: 22px; line-height: 1; cursor: pointer; }
.eb-biomodal__close:hover { background: var(--surface-tint); }
.eb-biomodal__head { display: flex; gap: 18px; align-items: center; margin: 0 0 18px; }
.eb-biomodal__photo img { width: 84px; height: 84px; border-radius: 14px; object-fit: cover; display: block; }
.eb-biomodal__id h3 { margin: 0; font-size: 22px; color: var(--text-strong); }
.eb-biomodal__id p { margin: 4px 0 0; color: var(--green-700); font-weight: 600; font-size: 14px; }
.eb-biomodal__li { margin-top: 10px; }
.eb-biomodal__body p { margin: 0 0 14px; color: var(--text-body); line-height: 1.65; font-size: 15px; }
.eb-biomodal__body p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ *
 * Figure card (Everest Figure block) — bordered card with a small
 * uppercase title, image, and caption. Consistent data-figure styling.
 * ------------------------------------------------------------------ */
.eb-figure {
  margin: 0;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 20px;
}
.eb-figure__title {
  margin: 0 0 12px;
  color: var(--text-strong);
  font-size: 14px; font-weight: 800; letter-spacing: -0.1px; line-height: 1.3;
}
.eb-figure__img { display: block; width: 100%; height: auto; }
/* Product / column photos: center at natural size instead of stretching. */
.eb-figure--photo .eb-figure__img { width: auto; max-width: min(100%, 240px); max-height: 300px; height: auto; margin-inline: auto; }
.eb-figure__caption { margin: 12px 0 0; color: var(--text-muted); font-size: 12px; line-height: 1.55; text-align: left; }
/* Equal-height figure cards: the columns already stretch to the same height, so
   let each figure grow to fill its column. A shorter chart/caption then no
   longer leaves its card ending short of its neighbour. */
.eb-figs-equal > .wp-block-column { display: flex; }
.eb-figs-equal > .wp-block-column > .eb-figure { flex: 1; }
/* Apex 4B/6B "collect" strip: the plate/column photo reads as a card the same
   height as the four stat cards beside it. The photo sits at its natural aspect
   and drives the row height; the stat grid then stretches its cards to match. No
   absolute positioning (which would collapse the photo column) — just the
   eb-strip-photo-col class the pattern carries on its photo column. */
.eb-strip-photo-col .eb-figure--photo {
  margin: 0; background: #fff; border: 1px solid var(--border-subtle);
  border-radius: 12px; padding: 14px;
  display: flex; align-items: center; justify-content: center;
}
.eb-strip-photo-col .eb-figure--photo .eb-figure__img {
  width: 100%; max-width: 100%; max-height: none; height: auto;
  object-fit: contain; margin: 0; display: block;
}
/* stat column fills the row height; its grid and cards stretch to match the photo */
.eb-strip-photo-col + .wp-block-column { display: flex; }
.eb-strip-photo-col + .wp-block-column > .eb-statband__row { flex: 1 1 auto; }
/* Selectable backgrounds (Figure block sidebar → Background).
   Solid greens map to the design tokens green-50 / -100 / -200. */
.eb-figure--light         { background: #f3fef4; }                                             /* green-50  */
.eb-figure--tint          { background: #e7fdea; }                                             /* green-100 */
.eb-figure--mist          { background: #c8f4cf; }                                             /* green-200 */
.eb-figure--orange        { background: #fff0db; }                                             /* orange-100 */
.eb-figure--gradient      { background: radial-gradient(120% 92% at 50% 22%, #ffffff, #eef6ec); }
.eb-figure--gradient-soft { background: linear-gradient(180deg, #ffffff 0%, #e7fdea 100%); }

/* ------------------------------------------------------------------ *
 * Vector Data block — server-rendered SVG chart in a figure card.
 * ------------------------------------------------------------------ */
.eb-vector {
  margin: 0;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 20px;
}
.eb-vector__title {
  margin: 0 0 4px;
  color: var(--text-strong);
  font-size: 14px; font-weight: 800; letter-spacing: -0.1px; line-height: 1.3;
}
.eb-vector__chart { margin-top: 10px; }
.eb-vector__chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.eb-vector__caption { margin: 12px 0 0; color: var(--text-muted); font-size: 12px; line-height: 1.55; text-align: left; }

/* ------------------------------------------------------------------ *
 * Yield → purity spectrum
 * ------------------------------------------------------------------ */
.eb-spectrum { max-width: 980px; margin: 58px auto 0; }
/* Intro line (everest/spectrum block renders it as the first <p>). */
.eb-spectrum > p { font-size: 15px; color: var(--text-body); margin: 0 0 26px; }
.eb-spectrum > p strong, .eb-spectrum > p b { color: var(--text-strong); }
.eb-spectrum__labels { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 13px; }
.eb-spectrum__labels span:first-child { color: var(--green-500); }
.eb-spectrum__labels span:last-child  { color: var(--green-800); }
.eb-spectrum__bar { position: relative; height: 10px; border-radius: 6px; background: linear-gradient(90deg, var(--green-300), var(--green-500), var(--green-800)); }
.eb-spectrum__bar span { position: absolute; top: 50%; transform: translate(-50%,-50%); width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); border: 3px solid var(--green-600); }
/* Marker colours (moved off inline styles so the scheme/reverse options can recolour). */
.eb-spectrum__bar span:nth-child(1) { border-color: var(--green-500); }
.eb-spectrum__bar span:nth-child(2) { border-color: var(--green-600); }
.eb-spectrum__bar span:nth-child(3) { border-color: var(--green-800); }

/* Reverse direction (green scheme) — Highest purity → Highest yield. */
.eb-spectrum.is-reverse .eb-spectrum__bar { background: linear-gradient(90deg, var(--green-800), var(--green-500), var(--green-300)); }
.eb-spectrum.is-reverse .eb-spectrum__bar span:nth-child(1) { border-color: var(--green-800); }
.eb-spectrum.is-reverse .eb-spectrum__bar span:nth-child(3) { border-color: var(--green-500); }
.eb-spectrum.is-reverse .eb-spectrum__labels span:first-child { color: var(--green-800); }
.eb-spectrum.is-reverse .eb-spectrum__labels span:last-child  { color: var(--green-500); }

/* Apex colour scheme — 6B green · 4B green · MM orange (yield → purity). */
.eb-spectrum.is-apex .eb-spectrum__bar { background: linear-gradient(90deg, var(--green-800), var(--green-500), #ff9f25); }
.eb-spectrum.is-apex .eb-spectrum__bar span:nth-child(1) { border-color: var(--green-800); }
.eb-spectrum.is-apex .eb-spectrum__bar span:nth-child(2) { border-color: var(--green-500); }
.eb-spectrum.is-apex .eb-spectrum__bar span:nth-child(3) { border-color: #ff9f25; }
.eb-spectrum.is-apex .eb-spectrum__labels span:first-child { color: var(--green-800); }
.eb-spectrum.is-apex .eb-spectrum__labels span:last-child  { color: #ff9f25; }

/* Apex + reversed — MM orange · 4B dark green · 6B green (purity → yield),
   coloured to match the product accents used on the cards below. */
.eb-spectrum.is-apex.is-reverse .eb-spectrum__bar { background: linear-gradient(90deg, #ff9f25, #0a4a30 50%, #2e9e66); }
.eb-spectrum.is-apex.is-reverse .eb-spectrum__bar span:nth-child(1) { border-color: #ff9f25; }
.eb-spectrum.is-apex.is-reverse .eb-spectrum__bar span:nth-child(2) { border-color: #0a4a30; }
.eb-spectrum.is-apex.is-reverse .eb-spectrum__bar span:nth-child(3) { border-color: #2e9e66; }
.eb-spectrum.is-apex.is-reverse .eb-spectrum__labels span:first-child { color: #ff9f25; }
.eb-spectrum.is-apex.is-reverse .eb-spectrum__labels span:last-child  { color: #2e9e66; }

/* ------------------------------------------------------------------ *
 * Spec / comparison tables
 * ------------------------------------------------------------------ */
/* Matches the handoff design: white table with a rounded 1px outer border, a
   full thin cell-border grid, a green header row, a muted-grey key column, and
   NO zebra striping. One rule set covers three ways of making a table:
     (a) the pattern figure class  .eb-spec-table
     (b) a core Table block given the "Everest Spec Table" block style
     (c) any TablePress table  (.tablepress)
   TablePress's own default stylesheet is disabled in functions.php
   (tablepress_use_default_css → false), so these rules aren't fighting it. */
.eb-spec-table, .wp-block-table.is-style-eb-spec { margin: 0; }
.eb-spec-table caption { text-align: left; font-weight: 800; color: var(--text-strong); font-size: 18px; margin-bottom: 12px; }
/* Standalone table title — matches the old table caption. Add the class
   "eb-table-title" to a Heading/Paragraph block placed above a TablePress table
   so you keep the title without it living inside the table. */
.eb-table-title { text-align: left; font-weight: 800; color: var(--text-strong); font-size: 18px; margin: 0 0 12px; }

.eb-spec-table table,
.wp-block-table.is-style-eb-spec table,
.tablepress {
  /* separate (not collapse) so border-radius + overflow actually clip the
     header's corners; border-spacing:0 keeps the grid tight. */
  width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14.5px;
  background: #fff; color: var(--text-strong);
  border: 1px solid var(--border-subtle);
  border-radius: 12px; overflow: hidden; margin: 0 0 1.25rem;
}

/* Kill WordPress core's 3px thead divider (the thick line under the header). */
.eb-spec-table thead, .eb-spec-table thead tr,
.wp-block-table.is-style-eb-spec thead, .wp-block-table.is-style-eb-spec thead tr,
.tablepress thead, .tablepress thead tr { border: 0; }

/* Grid lines via each cell's right + bottom edge (no doubling with the
   table's own border, which is handled by the :last-child resets below). */
.eb-spec-table th, .eb-spec-table td,
.wp-block-table.is-style-eb-spec th, .wp-block-table.is-style-eb-spec td,
.tablepress th, .tablepress td {
  text-align: left; vertical-align: top; padding: 12px 18px;
  border: 0;
  border-right: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.eb-spec-table th:last-child, .eb-spec-table td:last-child,
.wp-block-table.is-style-eb-spec th:last-child, .wp-block-table.is-style-eb-spec td:last-child,
.tablepress th:last-child, .tablepress td:last-child { border-right: 0; }
.eb-spec-table tbody tr:last-child > *,
.wp-block-table.is-style-eb-spec tbody tr:last-child > *,
.tablepress tbody tr:last-child > * { border-bottom: 0; }

/* Green header row */
.eb-spec-table thead th,
.wp-block-table.is-style-eb-spec thead th,
.tablepress thead th {
  background: #c4ead2; color: var(--green-900); font-weight: 800; padding: 13px 18px;
}

/* Muted-grey key column (first column of the body) */
.eb-spec-table tbody th[scope="row"],
.eb-spec-table tbody tr td:first-child,
.wp-block-table.is-style-eb-spec tbody tr td:first-child,
.tablepress tbody td.column-1 {
  color: var(--text-muted); font-weight: 600;
}
/* Key/value spec tables read best with a narrower first column (~34/66). */
.eb-spec-table thead th:first-child,
.eb-spec-table tbody th[scope="row"],
.wp-block-table.is-style-eb-spec thead th:first-child { width: 34%; }

/* Highlighted (recommended) column: green tint + bold green text. Used either
   by per-cell class .eb-col-hi or by the is-hi-* modifiers below. */
.eb-spec-table .eb-col-hi,
.wp-block-table.is-style-eb-spec .eb-col-hi {
  background: #f3fef4; font-weight: 700; color: var(--green-700);
}
/* Opt-out of the green fill on highlighted cells (bold green text on white),
   per-table via the block's "Highlight fill" toggle → .eb-no-hifill. */
.eb-spec-table.eb-no-hifill .eb-col-hi { background: transparent; }
/* Emphasised value cells (e.g. an "Optimized for" row): bold, dark green, no fill. */
.eb-spec-table td.eb-td-em, .eb-spec-table th.eb-td-em { font-weight: 700; color: var(--green-700); }

/* Comparison-table variant — centered data columns, muted-left key column.
   Add "eb-compare" to the table's CSS class (Block → Advanced → Additional CSS
   class(es)). Add "is-hi-2" to highlight the 2nd column, or "is-hi-last" to
   highlight the final column, as the recommended option (green tint + bold
   green) — matching the design's comparison tables. */
.eb-compare thead th, .eb-compare tbody td { text-align: center; }
/* Left-align the label column. th[scope="row"] covers native/core tables;
   td.column-1 covers TablePress (which doesn't use scope="row"). */
.eb-compare thead th:first-child, .eb-compare tbody th[scope="row"], .eb-compare tbody td.column-1 { text-align: left; }
/* Standalone "Centre data columns" (not the comparison variant): centre the
   value columns, keep the first/label column left. Toggled by the block. */
.eb-spec-table.is-centered thead th, .eb-spec-table.is-centered tbody td { text-align: center; }
.eb-spec-table.is-centered thead th:first-child, .eb-spec-table.is-centered tbody th[scope="row"] { text-align: left; }
.eb-compare.is-hi-2 thead th:nth-child(2),
.eb-compare.is-hi-last thead th:last-child { color: var(--green-700); }
.eb-compare.is-hi-2 tbody tr td:nth-child(2),
.eb-compare.is-hi-last tbody tr td:last-child {
  background: #f3fef4; font-weight: 700; color: var(--green-700);
}

/* Everest Spec Table block (everest/spec-table) — small per-column "Learn
   more" link under a header, and full-width note rows. Reuses all the
   .eb-spec-table / .eb-compare / .eb-col-hi rules above. */
.eb-spec-table thead th .eb-th-link {
  display: block; margin-top: 5px; font-size: 12px; font-weight: 700;
  color: var(--green-700);
}
.eb-spec-table thead th .eb-th-link:hover { color: var(--action); }
.eb-spec-table td.eb-td-note { color: var(--text-muted); font-size: 13px; line-height: 1.55; }
/* In-editor: the spec-table block's control buttons and cell spans. */
.wp-block-everest-spec-table table td[style*="none"] { background: transparent; }
.eb-spec-table [contenteditable] { min-width: 40px; }

/* ------------------------------------------------------------------ *
 * Video tabs (everest/video-tabs) — a tabbed video walkthrough. Tab
 * switching / autoplay-next is wired by assets/js/eb-vtabs.js.
 * ------------------------------------------------------------------ */
.eb-vtabs { max-width: 820px; margin: 24px auto 0; }
.eb-vtabs__tabs { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 16px; justify-content: center; }
.eb-vtabs__tab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; border: 1.5px solid var(--border-subtle); background: #fff; color: var(--green-700); font: inherit; font-size: 13.5px; font-weight: 700; line-height: 1; cursor: pointer; transition: all .14s; }
.eb-vtabs__tab .n { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; border-radius: 50%; background: var(--green-100); color: var(--green-700); font-size: 10.5px; font-weight: 800; }
.eb-vtabs__tab.is-active { background: var(--green-900); color: #fff; border-color: var(--green-900); }
.eb-vtabs__tab.is-active .n { background: var(--accent); color: var(--green-900); }
.eb-vtabs__stage { position: relative; aspect-ratio: 16/9; background: #04150d; border-radius: 16px; overflow: hidden; border: 1px solid var(--border-subtle); }
.eb-vtabs__stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #04150d; display: block; }
.eb-vtabs__cap { text-align: center; font-size: 13px; color: var(--text-muted); margin: 13px 0 0; }
.eb-vtabs__desc { text-align: center; font-size: 15px; color: var(--text-body); line-height: 1.6; margin: 8px auto 0; max-width: 60ch; }
.eb-vtabs__desc:empty { display: none; }

/* ------------------------------------------------------------------ *
 * FAQ accordion (native <details>) — each question is its own white
 * rounded card with a +/− toggle, matching the design.
 * ------------------------------------------------------------------ */
/* FAQ eyebrow + heading are left-justified to match the other section titles. */
.eb-faq > .eb-eyebrow { display: flex; justify-content: flex-start; }
.eb-faq > .wp-block-heading { text-align: left; }
.eb-faq details {
  background: #fff; border: 1px solid var(--border-subtle);
  border-radius: 10px; overflow: hidden; margin: 0 0 9px;
}
.eb-faq details:last-child { margin-bottom: 0; }
/* Core Details blocks (wp:details) are now separate blocks; keep even 12px gaps
   and give the first card a little space below the heading. */
.eb-faq .wp-block-details { margin-top: 0; }
.eb-faq > .wp-block-details:first-of-type { margin-top: 9px; }
.eb-faq .wp-block-details > summary { padding: 13px 14px; }
.eb-faq summary {
  cursor: pointer; list-style: none; padding: 13px 14px;
  font-size: 14.5px; font-weight: 600; color: var(--text-strong);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.eb-faq summary::-webkit-details-marker { display: none; }
.eb-faq summary::after { content: "+"; font-size: 18px; font-weight: 400; line-height: 1; color: var(--text-muted); }
.eb-faq details[open] summary::after { content: "–"; }
.eb-faq details p { padding: 0 14px 16px; margin: 0; font-size: 14.5px; color: var(--text-muted); line-height: 1.6; }
/* FAQ is now the everest/faq block (a nested .eb-faq holding everest/faq-item
   <details>). Give the accordion the same 20px gap under the section heading the
   old core-Details layout had, and keep even 12px gaps between items. */
.eb-faq > .wp-block-everest-faq { margin-top: 9px; }
.wp-block-everest-faq > .wp-block-everest-faq-item { margin: 0 0 9px; }
.wp-block-everest-faq > .wp-block-everest-faq-item:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ *
 * Centered CTA (everest/centered-cta) — a narrow, centred heading +
 * text + buttons band.
 * ------------------------------------------------------------------ */
.eb-centered-cta { padding-block: 72px; }
.eb-centered-cta__inner { max-width: 760px; margin-inline: auto; text-align: center; }
.eb-centered-cta__title { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.4px; line-height: 1.2; color: var(--text-strong); }
.eb-centered-cta__text { margin: 12px 0 0; font-size: 16.5px; color: var(--text-muted); line-height: 1.65; }
.eb-centered-cta .wp-block-buttons { justify-content: center; margin-top: 22px; }
.eb-surface-dark .eb-centered-cta__title { color: #fff; }
.eb-surface-dark .eb-centered-cta__text { color: var(--text-on-dark-muted); }

/* ------------------------------------------------------------------ *
 * Link cards (everest/link-cards + everest/link-card) — the "one
 * workflow" cross-sell row on dark sections: translucent cards, each a
 * title (with arrow) + short text, lifting on hover.
 * ------------------------------------------------------------------ */
.eb-linkcards { display: flex; flex-wrap: wrap; gap: 14px; }
.eb-linkcard {
  flex: 1 1 150px; display: block;
  background: rgba(255,255,255,.06); border: 1px solid rgba(164,237,177,.32);
  border-radius: 12px; padding: 18px 20px; color: #fff;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.eb-linkcard:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(0,0,0,.28); background: rgba(255,255,255,.12); }
.eb-linkcard__title { display: block; font-size: 15px; font-weight: 800; color: #fff; }
.eb-linkcard__title::after { content: " →"; }
.eb-linkcard__text { display: block; font-size: 13px; color: #cfeede; margin-top: 5px; line-height: 1.45; }

/* ------------------------------------------------------------------ *
 * Steps (everest/steps + everest/step) — numbered process steps in a
 * vertical video walkthrough, a numbered-card grid, or a dark process
 * strip. Layout is driven by the variant class on the container.
 * ------------------------------------------------------------------ */
.eb-steps--video { display: flex; flex-direction: column; gap: 22px; max-width: 820px; }
.eb-steps--cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; }
.eb-steps--process { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.eb-step { background: #fff; border: 1px solid var(--border-subtle); border-radius: 14px; padding: 22px; }
.eb-step__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.eb-step__num { font-weight: 800; color: var(--green-700); }
.eb-step__label { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-accent); }
.eb-step__title { margin: 0; font-weight: 800; color: var(--text-strong); line-height: 1.25; }
.eb-step__text, .eb-step__body p { margin: 12px 0 0; color: var(--text-muted); font-size: 14px; line-height: 1.55; }
.eb-step__body .wp-block-video, .eb-step__body figure { margin: 14px 0 0; }
.eb-step__body video { width: 100%; height: auto; display: block; border-radius: 10px; }
/* Video walkthrough: big "01." prefix, larger title, roomy card. */
.eb-steps--video .eb-step__num,
.eb-steps--video .eb-step__title { font-size: 20px; }
.eb-steps--video .eb-step__body p { font-size: 15px; }
/* Numbered cards: round badge above the title. */
.eb-steps--cards .eb-step__head { display: block; }
.eb-steps--cards .eb-step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px;
  background: var(--green-900); color: var(--accent); font-size: 15px; margin-bottom: 10px;
}
.eb-steps--cards .eb-step__num { vertical-align: middle; }
.eb-steps--cards .eb-step__label { margin-left: 10px; vertical-align: middle; }
.eb-steps--cards .eb-step__title { display: block; font-size: 16px; }
/* Dark process strip: translucent cards on a dark surface, with a
   "01 · LABEL" eyebrow above a white title. */
.eb-steps--process { margin-top: 30px; }
.eb-steps--process .eb-step { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); border-radius: 14px; padding: 20px; align-self: start; }
.eb-steps--process .eb-step__head { gap: 4px; }
.eb-steps--process .eb-step__num,
.eb-steps--process .eb-step__label { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--green-600); }
.eb-steps--process .eb-step__num::after { content: " ·"; }
.eb-steps--process .eb-step__title { flex-basis: 100%; margin-top: 6px; font-size: 18px; color: #fff; }
.eb-steps--process .eb-step__body p { color: #c4d4b6; font-size: 13.5px; margin-top: 6px; }

/* ------------------------------------------------------------------ *
 * CTA banner
 * ------------------------------------------------------------------ */
.eb-cta-banner {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  justify-content: space-between; background: var(--green-900);
  border-radius: 18px; padding: 30px 34px; color: #fff;
}
.eb-cta-banner h3 { color: #fff; font-size: 18px; font-weight: 800; margin: 0; }
.eb-cta-banner p  { color: rgba(255,255,255,.82); font-size: 14.5px; line-height: 1.55; margin: 4px 0 0; }

/* ------------------------------------------------------------------ *
 * Section Text (everest/section-text) — the standard eyebrow + heading +
 * subtitle cluster that opens a section, with body content nested under.
 * Standardises the previously hand-styled section-intro paragraphs.
 * ------------------------------------------------------------------ */
.eb-section-text__lede { margin: 10px 0 0; color: var(--text-muted); font-size: 16px; line-height: 1.65; }
/* Body content that follows the header gets consistent spacing (the header
   trio keeps its own tight margins). */
.eb-section-text > .eb-eyebrow:first-child { margin-top: 0; }
.eb-section-text > :not(.eb-eyebrow):not(.eb-feature-h2):not(.eb-section-text__lede) { margin-top: 22px; }
/* Dark-section variant (or any section-text sitting on a dark band): white
   heading, light subtitle. */
.eb-section-text--dark .eb-feature-h2,
.eb-surface-dark .eb-section-text .eb-feature-h2 { color: #fff; }
.eb-section-text--dark .eb-section-text__lede,
.eb-surface-dark .eb-section-text .eb-section-text__lede { color: var(--text-on-dark-muted); }

/* ------------------------------------------------------------------ *
 * Stat band (everest/stat-band + everest/stat) — metric callouts.
 * The band is a full-bleed surface; stats share the row equally and
 * wrap on narrow screens. Colours adapt to the surface (light green
 * number + muted-green label on the dark band; green on light).
 * ------------------------------------------------------------------ */
.eb-statband { padding-block: 40px; }
/* CSS grid so every stat card in the row is the same height (grid cells stretch
   by default), regardless of label length or WP's injected block-gap margins. */
.eb-statband__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; align-items: stretch; }
.eb-statband__row > .eb-stat { margin: 0; }
.eb-statband__row > .eb-stat.is-boxed { display: flex; flex-direction: column; justify-content: center; }
/* Reserve two label lines so every card's number+label block is the same height;
   with justify-content:center that keeps the numbers/labels aligned across cards
   AND vertically centred, regardless of 1- vs 2-line labels. */
.eb-statband__row > .eb-stat.is-boxed .eb-stat__label { min-height: 2.9em; }
.eb-stat__num { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -.5px; line-height: 1; color: var(--text-strong); }
.eb-stat__label { margin: 7px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--text-muted); }
.eb-surface-dark .eb-stat__num { color: var(--accent); }
.eb-surface-dark .eb-stat__label { color: #cfeede; }
/* Boxed stat — a bordered white card for use inside feature columns. */
.eb-stat.is-boxed { background: #fff; border: 1px solid var(--border-subtle); border-radius: 12px; padding: 16px 18px; }
.eb-stat.is-boxed .eb-stat__num { color: var(--green-800); }
.eb-stat.is-boxed .eb-stat__label { color: var(--text-muted); }
/* Vertical stack of boxed spec cards (e.g. Apex MM plasma-depletion figures). */
.eb-spec-stack { display: grid; gap: 12px; margin-top: 20px; }

/* ------------------------------------------------------------------ *
 * Feature card + grid (everest/feature-card + everest/feature-grid) —
 * bordered tiles with a green top accent, in a responsive grid. The
 * second selector lets the grid lay out inside the editor's InnerBlocks
 * wrapper too, so it previews correctly while editing.
 * ------------------------------------------------------------------ */
.eb-fcard-grid,
.eb-fcard-grid > .block-editor-inner-blocks > .block-editor-block-list__layout {
  display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
}
.eb-fcard-grid.is-cols-2 { grid-template-columns: repeat(2, 1fr); }
.eb-fcard-grid.is-cols-4 { grid-template-columns: repeat(4, 1fr); }
/* Cards equalise height via the grid's default stretch — no height:100%, which
   in an auto-sized row could over-stretch and overlap the next block. */
.eb-fcard {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--border-subtle);
  border-radius: 12px; padding: 22px 24px;
}
.eb-fcard--accent { border-top: 3px solid var(--green-600); }
.eb-fcard__num { margin: 0 0 6px; font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -.5px; color: var(--green-600); }
.eb-fcard__title { margin: 0; font-size: 16.5px; font-weight: 800; line-height: 1.3; color: var(--text-strong); }
.eb-fcard__kicker { margin: 6px 0 0; font-size: 12.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--green-700); }
.eb-fcard__text { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--text-muted); }
/* A list (or other body block) inside a feature card keeps a small gap above. */
.eb-fcard > .eb-list { margin-top: 12px; }
/* Small icon (used instead of a number) — e.g. the "Why SEC" value tiles. */
.eb-fcard__icon { display: block; width: 46px; height: 46px; margin: 0 auto; }
/* Home "Apex formats" strip — Feature Grid tiles showing the product photo large
   and centred inside a white rounded card (image + name + volume). */
.eb-formats .eb-fcard { background: #fff; border: 1px solid var(--border-subtle); border-radius: 12px; padding: 22px 18px; }
.eb-formats .eb-fcard__icon { width: auto; height: auto; max-height: 128px; max-width: 100%; margin: 0 auto 12px; }
.eb-formats .eb-fcard__title { font-size: 14px; font-weight: 800; }
.eb-formats .eb-fcard__text { margin-top: 2px; font-size: 11.5px; color: var(--text-muted); }
/* Home Apex variant cards — sentence-case green tagline (kicker) under the name;
   each card's per-column colour shows as the top accent border. */
.eb-apex-variants .eb-fcard__kicker { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 700; color: var(--green-700); margin-top: 4px; }
.eb-apex-variants .eb-fcard__text { margin-top: 6px; }

/* Featured event spotlight (News & Events) — contained 2-up card: full-bleed
   image beside a coloured tier badge, title, date/location and blurb. */
.eb-event-featured { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; border: 1px solid var(--border-subtle); border-radius: 18px; overflow: hidden; background: #fff; }
.eb-event-featured__media { min-height: 240px; }
.eb-event-featured__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eb-event-featured__body { padding: 34px; display: flex; flex-direction: column; justify-content: center; }
.eb-event-featured__badge { align-self: flex-start; background: #ff9f25; color: #3a2400; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; }
.eb-event-featured__body h3 { font-size: 25px; margin: 14px 0 0; color: var(--text-strong); }
.eb-event-featured__meta { color: #0c6342; font-weight: 700; font-size: 14px; margin: 10px 0 0; }
.eb-event-featured__desc { color: var(--text-muted); font-size: 15.5px; margin: 12px 0 0; }
@media ( max-width: 700px ) { .eb-event-featured { grid-template-columns: 1fr; } }
/* Centered grid variant: value/benefit tiles — centre the cards and enlarge
   the stat number. */
.eb-fcard-grid.is-center .eb-fcard { text-align: center; align-items: center; }
.eb-fcard-grid.is-center .eb-fcard__num { font-size: 44px; letter-spacing: -1px; margin-bottom: 0; color: var(--green-700); }
.eb-fcard-grid.is-center .eb-fcard__title { margin-top: 14px; }
/* When a centred stat card uses the EV icon instead of a 44px number, scale the
   icon so its graphic fills the same ~44px footprint and the row reads evenly. */
.eb-fcard-grid.is-center .eb-fcard__icon { width: 64px; height: 64px; }
/* In a mixed row (some cards use a number, one uses the icon), give the number
   the same 64px slot as the icon so the titles and body text line up across all
   cards. Scoped with :has so number-only rows are unaffected. */
.eb-fcard-grid.is-center:has(.eb-fcard__icon) .eb-fcard__num { height: 64px; display: flex; align-items: center; justify-content: center; }
/* Apex format line-up (mini / column / 24-well plate) uses product PHOTOS, not
   square icons. Preserve each image's aspect ratio instead of forcing them into
   the 64x64 icon box (which stretches the tall column and mini photos), and
   normalize on a common height so the family reads as a consistent line-up. */
.eb-fcard-grid.is-center.eb-formats .eb-fcard__icon { width: auto; height: 120px; max-width: 100%; margin: 0 auto 14px; }
@media (max-width: 780px) {
  .eb-fcard-grid, .eb-fcard-grid.is-cols-2, .eb-fcard-grid.is-cols-4 { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ *
 * Support-page blocks — jump-link pills, download rows, product header.
 * ------------------------------------------------------------------ */
.eb-pillnav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.eb-pill { font-size: 13.5px; font-weight: 700; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); padding: 9px 16px; border-radius: 999px; transition: background .14s; }
.eb-pill:hover { background: rgba(255,255,255,.2); }

.eb-downloads + .eb-downloads { margin-top: 22px; }
.eb-downloads__label { font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); margin: 0; }
.eb-download { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--border-subtle); border-radius: 10px; background: #fff; margin-top: 9px; }
.eb-download:hover { border-color: var(--border-default); }
.eb-download__icon { flex: none; color: var(--action-active); display: flex; }
.eb-download__label { flex: 1; font-size: 14.5px; font-weight: 600; color: var(--text-strong); }
.eb-download__badge { font-size: 10px; font-weight: 800; letter-spacing: .05em; padding: 3px 7px; border-radius: 5px; color: var(--action); background: var(--green-100); }
.eb-download__badge.is-external { color: var(--text-muted); background: var(--surface-sunken); }
.eb-download__arrow { flex: none; color: var(--text-muted); display: flex; }

.eb-support-header { display: flex; align-items: center; gap: 18px; }
.eb-support-header__tile { flex: none; width: 74px; height: 74px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-subtle); border-radius: 14px; padding: 11px; }
.eb-support-header__tile img { width: auto; height: auto; max-width: 52px; max-height: 52px; object-fit: contain; display: block; }
.eb-support-header__cat { margin: 0 0 3px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--green-700); }
.eb-support-header__title { margin: 0; font-size: 27px; letter-spacing: -.4px; color: var(--text-strong); }

/* Support Hero block — dark hero with a live guide-search box + Contact button.
   Uses .eb-surface-dark for bg/colour and reuses .eb-pillnav for the jump links. */
.eb-support-hero { padding: 74px 0 66px; }
.eb-support-hero__title { font-size: 44px; font-weight: 800; letter-spacing: -.8px; line-height: 1.08; color: #fff; margin: 6px 0 0; }
.eb-support-hero__lead { font-size: 18px; line-height: 1.6; color: #ffffffd9; margin: 18px 0 0; max-width: 60ch; }
.eb-support-hero__tools { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 26px 0 0; }
.eb-support-hero__search { flex: 1 1 340px; max-width: 460px; }
/* !important guards the field against the GoDaddy DesignSetGo plugin, which
   injects a high-specificity `input {}` rule using CSS variables this theme
   doesn't define — collapsing the background to transparent on the dark hero. */
.eb-support-hero__search input { width: 100%; box-sizing: border-box; padding: 13px 16px; border-radius: 10px; border: 1px solid rgba(255,255,255,.4) !important; background: #fff !important; color: var(--text-strong) !important; font-size: 15px; font-family: inherit; box-shadow: 0 6px 18px rgba(7,53,34,.22); }
.eb-support-hero__search input::placeholder { color: var(--text-muted) !important; opacity: 1; }
.eb-support-hero__search input:focus { outline: none; border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(164,237,177,.45); }
.eb-support-hero__contact { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--green-900); font-weight: 700; font-size: 15px; padding: 12px 22px; border-radius: 10px; }
.eb-support-hero__contact:hover { background: var(--green-100); }
.eb-support-hero .eb-pillnav { margin-top: 22px; }

/* Legal / long-form page template (Privacy Policy, Terms & Conditions).
   Narrow, readable measure + a sunken title band; styles whatever the page
   content happens to be (headings, lists, tables) so pasted policy text
   looks intentional without any per-page markup. */
.eb-legal-wrap { max-width: 812px; margin-inline: auto; padding-inline: 32px; }
.eb-legal-head .eb-eyebrow { margin: 0 0 8px; }
.eb-legal-title { margin: 0; font-size: 40px; letter-spacing: -.6px; line-height: 1.1; color: var(--text-strong); }
.eb-legal { color: var(--text-body); }
.eb-legal .wp-block-post-content { font-size: 16.5px; line-height: 1.75; }
.eb-legal .wp-block-post-content > :first-child { margin-top: 0; }
.eb-legal p { margin: 0 0 1.1em; }
.eb-legal h2 { font-size: 24px; letter-spacing: -.3px; color: var(--text-strong); margin: 2em 0 .5em; padding-top: 1.6em; border-top: 1px solid var(--border-subtle); }
.eb-legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.eb-legal h3 { font-size: 18px; color: var(--text-strong); margin: 1.8em 0 .4em; }
.eb-legal h4 { font-size: 15px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin: 1.6em 0 .3em; }
.eb-legal ul, .eb-legal ol { margin: 0 0 1.1em; padding-left: 1.35em; }
.eb-legal li { margin: .4em 0; }
.eb-legal li::marker { color: var(--text-muted); }
.eb-legal a { color: var(--text-accent); text-decoration: underline; text-underline-offset: 2px; }
.eb-legal a:hover { color: var(--action-hover); }
.eb-legal strong { color: var(--text-strong); font-weight: 700; }
.eb-legal hr { border: 0; border-top: 1px solid var(--border-subtle); margin: 2.2em 0; }
.eb-legal blockquote { margin: 1.4em 0; padding: 2px 0 2px 18px; border-left: 3px solid var(--border-default); color: var(--text-muted); }
.eb-legal table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 0 0 1.2em; }
.eb-legal th, .eb-legal td { border: 1px solid var(--border-subtle); padding: 10px 12px; text-align: left; vertical-align: top; }
.eb-legal th { background: var(--surface-sunken); font-weight: 700; color: var(--text-strong); }
@media (max-width: 640px) {
  .eb-legal-wrap { padding-inline: 22px; }
  .eb-legal-title { font-size: 32px; }
}

/* Long-form posts (application notes, conferences, news articles) rendered via
   single.html. Constrain to a comfortable ~860px reading column with a larger
   body size, matching the previous site (which used a narrow measure with
   generous side margins). Marketing pages keep the wider 1200px layout. */
body.single .wp-block-post-title,
body.single .wp-block-post-featured-image,
body.single .wp-block-post-content,
body.single .eb-post-pdf { max-width: 860px; margin-inline: auto; }
body.single .wp-block-post-content { font-size: 18px; line-height: 1.7; }
/* Download-PDF button: block-level flex so it sits inside the 860px reading
   column — left-aligned at the top, centred at the bottom (is-center). */
body.single .eb-post-pdf { display: flex; justify-content: flex-start; margin-block: 4px 0; }
body.single .eb-post-pdf.is-center { justify-content: center; }
body.single .wp-block-post-content + .eb-post-pdf { margin-block: 24px 0; }
/* Application-note card: keep "Read note" and "Download PDF" on one row when
   there's room, wrapping to the next line otherwise. */
.eb-card__links { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px; margin-top: 10px; }
.eb-card__links .eb-link-arrow, .eb-card__links .eb-card__pdf { margin: 0; }
.eb-card__pdf { font-size: 13px; font-weight: 600; }
.eb-card__pdf a { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); text-decoration: none; }
.eb-card__pdf a:hover { color: var(--text-accent); }
.eb-card__pdf svg { width: 15px; height: 15px; flex: none; }

/* ------------------------------------------------------------------ *
 * Site header (nav) — sticky, blurred
 * ------------------------------------------------------------------ */
/* Make the sticky header actually stick: WordPress wraps the Header template
   part in a <div class="wp-block-template-part">, and position:sticky can only
   travel within its parent's box — that wrapper is only as tall as the header,
   so it scrolls away. Collapsing the wrapper lets the header stick relative to
   the whole page. */
.wp-site-blocks > .wp-block-template-part:has(.eb-header) { display: contents; }
/* Remove the 1.5rem flow gap WordPress puts above <main>, so the first section
   (e.g. a full-bleed hero) sits flush under the sticky header. */
.wp-site-blocks > main { margin-block-start: 0; }
.eb-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-subtle); }
/* The header's backdrop-filter makes it the containing block for the
   position:fixed mobile-nav overlay, trapping the opened menu inside the ~84px
   header (it renders as a tiny scrollable strip). Drop the filter only while the
   overlay is open so the fixed menu fills the viewport; the blur is unchanged
   otherwise. */
.eb-header:has(.wp-block-navigation__responsive-container.is-menu-open) { backdrop-filter: none; -webkit-backdrop-filter: none; }
.eb-header .eb-container { display: flex; align-items: center; gap: 18px; min-height: 84px; }
.eb-header .wp-block-navigation { margin-left: auto; }
/* Force the brand font on the whole menu. A Shopify/e-commerce plugin often
   ships CSS that re-fonts nav elements even after its cart is turned off, so
   !important is used to win against it. */
.eb-header .wp-block-navigation,
.eb-header .wp-block-navigation a,
.eb-header .wp-block-navigation button,
.eb-header .wp-block-navigation .wp-block-navigation-item__label {
  font-family: var(--font-sans) !important;
}
.eb-header .wp-block-navigation a { font-size: 15px; font-weight: 600; }
/* Menu links are dark green (--text-strong) per the design; WordPress/plugin
   defaults were rendering them charcoal, so !important forces the design color. */
.eb-header .wp-block-navigation .wp-block-navigation-item__content { color: var(--text-strong) !important; }
.eb-header .wp-block-navigation .wp-block-navigation-item__content:hover { color: var(--action) !important; }
/* The design spaces top-level items with per-link padding; widened to 20px so the
   menu reads with more air, matching the design. */
.eb-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
  padding: 10px 20px; border-radius: 8px;
}
.eb-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover {
  background: var(--green-50);
}
/* Parent items that own a submenu (About, Products, Support) should only reveal
   their dropdown — not navigate. Disabling pointer events on the parent link
   stops the click/tap from following its href; the parent <li> still receives
   hover (the events pass through to it) so the dropdown opens on hover, and the
   sub-links + the mobile chevron toggle stay fully clickable. */
.eb-header .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation-item__content {
  pointer-events: none;
  cursor: default;
}
.eb-header .wp-block-navigation .wp-block-navigation__submenu-container {
  background: #fff !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 8px !important;
  min-width: 220px;
}
.eb-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: 10px 12px !important;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-body) !important;
}
.eb-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background: var(--surface-tint) !important;
  color: var(--text-strong) !important;
}
/* Logo — bundled image (no upload needed), sized like the design (30px tall). */
.eb-header .eb-logo { margin: 0; flex: none; }
.eb-header .eb-logo img { height: 30px; width: auto; display: block; }
/* GoDaddy's "Site Designer" injects `.wp-block-site-logo img{width:auto!important;
   height:auto!important}`, which collapses the SVG logo to its 1x1 intrinsic size.
   Force a real height (higher specificity + !important) so the logo shows. */
.eb-header .wp-block-site-logo img,
.eb-header .wp-block-site-logo.is-default-size img {
  height: 30px !important; width: auto !important; max-width: none !important; max-height: none !important;
}
.eb-nav-cta a { background: var(--action); color: #fff !important; padding: 11px 20px; border-radius: 8px; font-weight: 700; }
.eb-nav-cta a:hover { background: var(--action-hover); }

/* --- Mobile menu overlay: layout + polish (applies only while the hamburger
   overlay is open; the desktop horizontal menu is untouched). The core menu
   list is right-justified/no-wrap for the desktop row, so inside the overlay we
   restack it as a full-width, left-aligned column with large tap targets and
   flatten the floating-card submenu into an inline indented list. The
   "Contact us" nav-link (.eb-nav-contact) is hidden everywhere except inside the
   open overlay, where it renders as the primary button (the standalone header
   CTA is hidden on mobile — see the mobile-header block below). --- */
/* Hidden in the desktop row (!important beats WordPress's own nav-item display
   rule, which was leaving a duplicate "Contact us" showing on desktop). */
.eb-nav-contact { display: none !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { position: relative; width: 100%; padding: 58px 6px 16px; }
/* Brand the open menu with the logo top-left — it balances the right-aligned
   list and the close (X) button top-right, and the padding-top above also gives
   the first item room so it no longer collides with the X. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content::before { content: ""; position: absolute; top: 18px; left: 8px; width: 150px; height: 28px; background: url(../images/logo-horizontal.svg) left center / contain no-repeat; }
.wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container { flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0 !important; width: 100%; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { font-size: 16.5px; font-weight: 700; line-height: 1.3; padding: 7px 10px; border-radius: 9px; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle { padding: 6px 10px !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { border: 0 !important; box-shadow: none !important; padding: 0 0 2px 14px !important; min-width: 0 !important; background: transparent !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: 14.5px; line-height: 1.3; padding: 5px 10px !important; }
.wp-block-navigation__responsive-container.is-menu-open .eb-nav-contact { display: block !important; margin-top: 12px; }
.wp-block-navigation__responsive-container.is-menu-open .eb-nav-contact .wp-block-navigation-item__content { background: var(--action); color: #fff !important; font-weight: 700; font-size: 16.5px; text-align: center; justify-content: center; padding: 12px 20px !important; border-radius: 10px; }
.wp-block-navigation__responsive-container.is-menu-open .eb-nav-contact .wp-block-navigation-item__content:hover { background: var(--action-hover); color: #fff !important; }

/* Mobile header sizing: the horizontal logo is ~200px wide and was an oversized
   tap target competing with the small hamburger. Shrink the logo so it doesn't
   dominate, and give the hamburger a proper ~48px touch target that reads as the
   primary control. */
@media (max-width: 600px) {
  .eb-header .wp-block-site-logo img,
  .eb-header .wp-block-site-logo.is-default-size img,
  .eb-header .eb-logo img { height: 22px !important; }
  .eb-header .wp-block-navigation__responsive-container-open { padding: 12px 16px !important; margin-right: -16px !important; }
  .eb-header .wp-block-navigation__responsive-container-open svg { width: 30px !important; height: 30px !important; }
  /* Drop the standalone header CTA on phones — it crowded the bar (and its text
     reflowed on font-swap, resizing the header). "Contact us" now lives inside
     the opened menu (.eb-nav-contact) instead. */
  .eb-header .eb-nav-cta { display: none; }
}
/* The Shopify plugin auto-injects a "View Cart" toggle into the header; the
   design has no header cart, so hide it. (Turning off its icon leaves the text.) */
.eb-header .wp-block-create-block-shopify-cart-toggle-block { display: none; }

/* ------------------------------------------------------------------ *
 * Site footer
 * ------------------------------------------------------------------ */
.eb-footer { background: var(--green-900); color: var(--text-on-dark-muted); }
.eb-footer a { color: var(--text-on-dark-muted); }
.eb-footer a:hover { color: #fff; }
.eb-footer h4 { color: #fff; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; margin: 0 0 16px; }
.eb-footer .eb-footer-legal { border-top: 1px solid rgba(255,255,255,.1); font-size: 12.5px; }
/* The cookie-consent bar (Cookie Notice plugin) is position:fixed at the viewport
   bottom with pointer-events:auto, so while it is showing it sits on top of the
   footer's legal row and steals the links' hover/click area (it even keeps
   capturing events while faded to opacity:0). Reserve clearance below the footer
   ONLY while the banner is visible — the ".cookie-notice-visible" state is dropped
   the moment the visitor dismisses it, so no permanent empty space is added.
   The bar wraps as the viewport narrows — measured height is 57px only at
   ≥1100px (single line), then 102px (two lines) and up to 122px on phones
   (three lines). So the generous clearance is the DEFAULT (covers the whole
   601–1099px band, where the last legal link — FCOI — otherwise sits under the
   bar) and only wide desktop, where the bar is one line, gets the smaller value. */
body:has(#cookie-notice.cookie-notice-visible) .eb-footer { padding-bottom: 150px; }
@media (min-width: 1100px) {
  body:has(#cookie-notice.cookie-notice-visible) .eb-footer { padding-bottom: 80px; }
}
/* Footer newsletter band — copy on the left, subscribe form in a compact white
   card on the right, divided from the link columns below. */
.eb-footer-subscribe { border-bottom: 1px solid rgba(255,255,255,.12); align-items: center; }
.eb-footer-subscribe__copy { flex: 1 1 320px; max-width: 560px; }
.eb-footer-subscribe__title { color: #fff; font-size: 22px; line-height: 1.25; letter-spacing: -.01em; margin: 0 0 8px; }
.eb-footer-subscribe__text { color: var(--text-on-dark-muted); font-size: 14px; line-height: 1.6; margin: 0; }
.eb-footer-subscribe__cta { flex: 0 0 auto; }

/* Subscribe band (contact page #subscribe target). The subscribe form is styled
   for a dark surface in HubSpot, so this band is dark and the theme's white
   form card is dropped so the form sits directly on the green. */
.eb-subscribe-band .wp-block-everest-hubspot-form { max-width: 460px; margin-top: 22px; }
.eb-subscribe-band .eb-form-card { background: transparent; box-shadow: none; padding: 0; border-radius: 0; }

/* ------------------------------------------------------------------ *
 * HubSpot form — restyle the embedded form to match the design
 * ------------------------------------------------------------------ */
.eb-form-card { background: #fff; border-radius: 18px; padding: 30px; box-shadow: 0 26px 56px rgba(7,53,34,.30); }
.eb-form-card .hs-form-field { margin-bottom: 15px; }
.eb-form-card .hs-form-field > label {
  display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px;
}
.eb-form-card .hs-input:not([type=checkbox]):not([type=radio]) {
  width: 100%; box-sizing: border-box; padding: 11px 13px;
  border: 1.5px solid var(--border-subtle); border-radius: 9px;
  font-size: 14.5px; font-family: inherit; color: var(--text-strong); background: #fff;
}
.eb-form-card .hs-input:focus { outline: none; border-color: var(--action); }
.eb-form-card .hs-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--action); color: #fff; font-weight: 700; font-size: 15px;
  padding: 13px 22px; border: none; border-radius: 9px; cursor: pointer;
  font-family: inherit; transition: background .15s; width: 100%;
}
.eb-form-card .hs-button:hover { background: var(--action-hover); }
.eb-form-card .hs-error-msg { color: var(--danger); font-size: 12.5px; }

/* ------------------------------------------------------------------ *
 * Custom-block layout (everest/section, everest/feature-row)
 * ------------------------------------------------------------------ */
.eb-section-block { padding-block: 86px; }
.eb-section-block.is-tight { padding-block: 56px; }
.eb-section-block.is-flush { padding-block: 0; }
.eb-fr {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 56px; align-items: center;
}
.eb-fr--left .eb-fr__media { order: -1; }

/* Page Hero block (everest/page-hero) — light interior-page hero. Reuses the
   .eb-fr two-column grid + .eb-media-card frame; adds the band + H1/lead type. */
.eb-pagehero-band { padding: 70px 0 72px; border-bottom: 1px solid var(--border-subtle); }
.eb-pagehero-band > .eb-fr { gap: 52px; }
.eb-pagehero__h1 { font-size: clamp(2rem, 4.5vw, 42px); font-weight: 800; letter-spacing: -.6px; line-height: 1.1; color: var(--text-strong); margin: 6px 0 0; }
.eb-pagehero__lede { font-size: 18px; color: var(--text-muted); line-height: 1.6; margin: 16px 0 0; }

/* Product Hero block (everest/product-hero) — like the page hero, but the media
   side is a radial-gradient card holding a strip of badged product images. */
.eb-prodhero { padding: 70px 0 72px; }
.eb-prodhero > .eb-fr { gap: 52px; }
.eb-prodstrip {
  background: radial-gradient(120% 92% at 50% 22%, #ffffff 0%, #eef6ec 100%);
  border: 1px solid var(--border-subtle); border-radius: 22px;
  padding: 30px 26px 22px; display: grid; align-items: end; gap: 30px; min-height: 320px;
}
.eb-prodstrip.is-cols-1 { grid-template-columns: 1fr; }
.eb-prodstrip.is-cols-2 { grid-template-columns: repeat(2, 1fr); }
.eb-prodstrip.is-cols-3 { grid-template-columns: repeat(3, 1fr); }
.eb-prodstrip.is-cols-4 { grid-template-columns: repeat(4, 1fr); }
.eb-prodstrip__item { display: flex; flex-direction: column; align-items: center; gap: 12px; border-radius: 14px; transition: transform .18s ease, box-shadow .18s ease; }
/* Linked format cards: whole card (image + badge) clickable, lifts on hover. */
.eb-prodstrip__link { display: flex; flex-direction: column; align-items: center; gap: 12px; text-decoration: none; }
.eb-prodstrip__item:has(a) { padding: 14px 18px; border-radius: 16px; }
.eb-prodstrip__item:has(a):hover { transform: translateY(-4px); background: #fff; box-shadow: 0 16px 34px rgba(7,53,34,.14); }
.eb-prodstrip__item img { max-height: 236px; width: auto; max-width: 100%; object-fit: contain; display: block; }
.eb-prodstrip__badge { font-size: 12px; font-weight: 800; color: #fff; border-radius: 6px; padding: 3px 14px; line-height: 1.5; }
/* Product-hero image box with the outline disabled (Product Hero → Image box border off). */
.eb-prodstrip.is-frameless { border: none; }

/* ------------------------------------------------------------------ *
 * Everest Section band (everest/section) + extra surface fills.
 * A full-bleed band with 72px vertical rhythm; background comes from the
 * eb-surface-* class the block adds, border from eb-border-y.
 * ------------------------------------------------------------------ */
.eb-section-band { padding-block: 72px; }
.eb-surface-light  { background: var(--green-50); }
.eb-surface-orange { background: var(--orange-100); }

/* Feature Card square bullets tint to the card's accent colour (6B/4B greens). */
.eb-fcard .eb-list--square li::before { background: var(--eb-accent, var(--action)); }

/* ------------------------------------------------------------------ *
 * Flush full-bleed sections
 * WordPress's flow layout injects a top margin between top-level blocks;
 * between full-bleed page sections that gap shows the white page background
 * as a strip. Our sections pad themselves, so remove the margin on full-width
 * top-level blocks (scoped to .alignfull so normal post/paragraph spacing on
 * blog content is untouched).
 * ------------------------------------------------------------------ */
.wp-block-post-content > .alignfull,
.wp-block-post-content > .eb-section-block,
main > .alignfull,
main > .eb-section-block { margin-block: 0 !important; }

/* ------------------------------------------------------------------ *
 * Responsive
 * ------------------------------------------------------------------ */
@media (max-width: 900px) {
  .eb-section { padding-block: 56px; }
  .eb-hero h1 { font-size: 34px; }
  .eb-container { padding-inline: 22px; }
  .eb-card-scroller > * { flex-basis: 260px; }
}

/* Team member bio expander (About page) */
.eb-bio { margin-top: 12px; }
.eb-bio summary { cursor: pointer; list-style: none; font-size: 12px; font-weight: 700; color: var(--action); display: inline; text-decoration: underline; text-underline-offset: 2px; }
.eb-bio summary::-webkit-details-marker { display: none; }
.eb-bio summary:hover { color: var(--action-hover); }
.eb-bio p { font-size: 13.5px; color: var(--text-body); line-height: 1.6; margin: 10px 0 0; }

/* ------------------------------------------------------------------ *
 * Everest Bio block (team-member card) + responsive team grid.
 * Auto-flow grid replaces the old columns-with-empty-fillers layout.
 * ------------------------------------------------------------------ */
.eb-bio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
  gap: 22px; margin-top: 18px;
}
/* WordPress flow layout adds margin-block-start:1.5rem to every child except
   the first; inside this grid that pushes cards 2+ down and leaves the first
   card sitting higher. Neutralise it so the whole row aligns (grid gap spaces). */
.eb-bio-grid > * { margin-block: 0 !important; }
.eb-bio-card { overflow: hidden; }
.eb-bio-card__photo { margin: 0; aspect-ratio: 1; background: var(--surface-sunken); cursor: pointer; }
.eb-bio-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eb-bio-card__name { font-size: 16.5px; font-weight: 700; letter-spacing: -.2px; line-height: 1.3; color: var(--text-strong); margin: 0; }
.eb-bio-card__role { color: #0c6342; font-size: 12.5px; font-weight: 600; line-height: 1.4; margin: 4px 0 0; }
/* Footer row: LinkedIn link + "Read bio" expander sit together under the name. */
.eb-bio-card .eb-card__body { gap: 0; }
.eb-bio-card__foot { display: flex; align-items: baseline; gap: 16px; margin-top: 12px; }
.eb-bio-card .eb-bio { margin: 0; }
.eb-bio-card__linkedin {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--action);
}
.eb-bio-card__linkedin::before {
  content: ""; width: 15px; height: 15px; flex: none; background-color: currentColor;
  -webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.13 1.45-2.13 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.63-1.85 3.36-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z'/%3E%3C/svg%3E");
  mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.13 1.45-2.13 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.63-1.85 3.36-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z'/%3E%3C/svg%3E");
}
.eb-bio-card__linkedin:hover { color: var(--action-hover); }

/* ------------------------------------------------------------------ *
 * v1.38.0 fixes
 * ------------------------------------------------------------------ */
/* Kill the 1.5rem block-gap WordPress inserts between the header, <main> and
   the footer — it showed as a white strip above the (dark) footer and below
   the header. Sections manage their own padding. */
.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }

/* Product-card block (everest/product-card → .eb-pcard) — lift + shadow on
   hover when the card is a link (e.g. the Ascent "Compatible columns" grid).
   The hover was on the old .eb-card / .eb-product-card but never added here. */
.eb-pcard { transition: box-shadow .18s ease, transform .18s ease; }
.eb-pcard:has(a):hover { box-shadow: 0 18px 38px rgba(7,53,34,.10); transform: translateY(-4px); }

/* Step card as a clickable link (everest/step with a URL) — full-card link,
   no underline; on the dark process grid it lifts like the link cards. */
a.eb-step, a.eb-step--link, .eb-step--link { text-decoration: none; color: inherit; }
.eb-steps--process a.eb-step { cursor: pointer; }
.eb-steps--process a.eb-step:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(0,0,0,.28); background: rgba(255,255,255,.10); }

/* Peer-reviewed evidence link rows — clean (no underline) with a green
   top-right arrow that nudges on hover. */
.eb-evidence-link { text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.eb-evidence-link:hover { border-color: var(--green-400); box-shadow: 0 10px 24px rgba(7,53,34,.08); transform: translateY(-2px); }
.eb-evidence-link .eb-evidence-arrow { transition: transform .15s; }
.eb-evidence-link:hover .eb-evidence-arrow { transform: translate(2px,-2px); }

/* Citations block — peer-reviewed evidence card. */
.eb-citations { border: 1px solid var(--border-subtle); border-radius: 16px; background: #fff; padding: 24px 26px; box-shadow: 0 12px 30px rgba(7,53,34,.06); }
.eb-citations__head { display: inline-flex; align-items: center; gap: 8px; color: var(--green-700); }
.eb-citations__head svg { display: block; }
.eb-citations__label { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.eb-citations__intro { font-size: 14px; color: var(--text-muted); line-height: 1.55; margin: 12px 0 0; }
.eb-citations__list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.eb-citations__item { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--border-subtle); border-radius: 10px; padding: 13px 15px; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.eb-citations__item:hover { border-color: var(--green-400); box-shadow: 0 10px 24px rgba(7,53,34,.08); transform: translateY(-2px); }
.eb-citations__item b { color: var(--green-900); font-size: 14.5px; }
.eb-citations__meta { color: var(--text-muted); font-size: 13px; }
.eb-citations__arrow { color: var(--green-700); display: flex; }
.eb-citations__arrow svg { display: block; }

/* Workflow 02: two path cards (Ascent / Summit) stacked inside the step. */
.eb-step__body .eb-linkcards { flex-direction: column; gap: 10px; margin-top: 4px; }
.eb-step__body .eb-linkcard { flex: 0 0 auto; padding: 12px 15px; }