/**
 * EveryFiveDays — Site Foundations
 * efd-site.css  —  Pre-Launch Phase 0
 *
 * The shared prose system used by every supporting page (About, Affiliate
 * Disclosure, Terms, Contact, Privacy, Editorial Standards), the author
 * identity components, the publication social block, and the contact routes.
 *
 * Loaded site-wide. `efd-single-article.css` loads on top of this on single
 * posts and owns everything specific to reading an article — the Skip Through
 * rail, the progress bar, the six editorial components.
 *
 * Tokens mirror that file exactly, and both read from the Elementor Kit (Kit 5)
 * so there is one source of truth. The literal after each comma is a fallback
 * only, so the file still works standalone and in a static export.
 *
 * Everything is scoped under an `efd-` class. No bare element selectors outside
 * a `.efd-page-prose` container — nothing here can reach unrelated content.
 */

/* ------------------------------------------------------------------ */
/* Tokens                                                              */
/* ------------------------------------------------------------------ */

:root {
  --efd-primary:    var(--e-global-color-primary, #0D1B2A);
  --efd-secondary:  var(--e-global-color-secondary, #1B263B);
  --efd-tertiary:   var(--e-global-color-efd-tertiary, #778DA9);
  --efd-accent:     var(--e-global-color-accent, #415A77);
  --efd-background: var(--e-global-color-efd-background, #E0E1DD);
  --efd-surface:    var(--e-global-color-efd-surface, #FFFFFF);
  --efd-border:     var(--e-global-color-efd-border, #DDE3EA);
  --efd-tint:       var(--e-global-color-efd-tint, #F4F6F8);
  --efd-muted-fg:   var(--e-global-color-efd-muted-fg, #5A6B7F);

  --efd-font-display: var(--e-global-typography-primary-font-family, "Archivo Black"), sans-serif;
  --efd-font-text:    var(--e-global-typography-text-font-family, "Roboto"), sans-serif;

  --efd-radius: 12px;

  /* The reading measure. Articles were narrowed to this in Milestone 13;
     every supporting page now reads at the same width, so the publication
     has one line length rather than one per page. */
  --efd-measure: 700px;

  /* Author profiles carry a portrait beside the text, so they need more
     room than a pure prose column without becoming a different design. */
  --efd-measure-wide: 880px;

  /* Overridden per author by the inline style each component emits. */
  --efd-author-accent: var(--efd-accent);
}

/* ------------------------------------------------------------------ */
/* Shared page prose                                                   */
/* ------------------------------------------------------------------ */

/* Elementor stamps `max-width: 100%` on every widget and
   `min(100%, var(--width))` on every top-level container from
   custom-frontend.min.css, which loads after this file and at a higher
   weight — so a bare `.efd-page-prose { max-width }` is dead on arrival.
   The measure is restated below at matching weight for both the widget and
   the container form. Boxed containers insert an `.e-con-inner`, so that
   branch is declared too. No !important. */
.efd-page-prose {
  max-width: var(--efd-measure);
  margin-inline: auto;
  font-family: var(--efd-font-text);
  font-size: 18px;
  line-height: 1.75;
  color: var(--efd-secondary);
}

.e-con.e-con > .e-con-inner > .elementor-widget.efd-page-prose,
.elementor.elementor .e-con > .elementor-widget.efd-page-prose,
.e-con.e-con.efd-page-prose {
  max-width: var(--efd-measure);
  margin-inline: auto;
}

.efd-page-prose--wide,
.e-con.e-con > .e-con-inner > .elementor-widget.efd-page-prose--wide,
.elementor.elementor .e-con > .elementor-widget.efd-page-prose--wide,
.e-con.e-con.efd-page-prose--wide {
  max-width: var(--efd-measure-wide);
}

.efd-page-prose p { margin: 0 0 18px; }

.efd-page-prose h2 {
  font-family: var(--efd-font-display);
  font-size: clamp(22px, 2.2vw, 27px);
  line-height: 1.3;
  color: var(--efd-primary);
  margin: 34px 0 14px;
}

.efd-page-prose h3 {
  font-family: var(--efd-font-display);
  font-size: clamp(18px, 1.7vw, 21px);
  line-height: 1.35;
  color: var(--efd-primary);
  margin: 26px 0 12px;
}

.efd-page-prose ul,
.efd-page-prose ol { margin: 0 0 18px; padding-left: 1.3em; }

.efd-page-prose li + li { margin-top: 8px; }

.efd-page-prose a { color: var(--efd-accent); text-underline-offset: 2px; }

.efd-page-prose blockquote {
  margin: 32px 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--efd-accent);
  font-style: italic;
  color: var(--efd-primary);
}

.efd-page-prose hr {
  border: 0;
  border-top: 1px solid var(--efd-border);
  margin: 32px 0;
}

.efd-page-prose > *:last-child { margin-bottom: 0; }

/* Anchor landing offset, matching the article rule so a jumped-to heading
   on Terms clears the sticky header exactly as it does in an article. */
.efd-page-prose h2[id],
.efd-page-prose h3[id] {
  scroll-margin-top: calc(var(--efd-header-offset, 96px) + 16px);
}

/* Every member of a supporting page's reading column is sized from the same
   token, so the eyebrow, H1, standfirst, section headings and prose share one
   left edge. Elementor's own `max-width:100%` on widgets and
   `min(100%,var(--width))` on containers load after this file at a higher
   weight, so each is restated at matching weight rather than with !important. */
/* The Kit centres headings by default, which is right for a homepage section
   and wrong for a document: it left every section heading centred over
   left-aligned body copy. Supporting pages read as documents, so the shell
   states left alignment once for everything inside it. */
.e-con.e-con.efd-page,
.efd-page,
.efd-page .elementor-widget-heading .elementor-heading-title {
  text-align: left;
}

/* The header block is constrained on the CONTAINER, not on each widget
   inside it. Constraining the widgets individually left them centred inside
   a full-width parent, so the eyebrow, H1 and standfirst each floated to a
   different left edge depending on how long their text happened to be —
   above a body column that starts at a fixed one. */
.e-con.e-con.efd-page-header,
.efd-page-header {
  max-width: var(--efd-measure);
  margin-inline: auto;
  align-items: flex-start;
  text-align: left;
}

.efd-page-header .elementor-widget { width: 100%; }

.efd-page-eyebrow,
.efd-page-section-title {
  max-width: var(--efd-measure);
  margin-inline: auto;
}

.e-con.e-con > .e-con-inner > .elementor-widget.efd-page-eyebrow,
.elementor.elementor .e-con > .elementor-widget.efd-page-eyebrow,
.e-con.e-con > .e-con-inner > .elementor-widget.efd-page-section-title,
.elementor.elementor .e-con > .elementor-widget.efd-page-section-title {
  max-width: var(--efd-measure);
  margin-inline: auto;
}

/* A little more air above a section heading than the container gap gives,
   so a page of headings reads as sections rather than as a list. */
.efd-page-section-title { margin-top: 10px; }

/* A stated caveat at the top of a page — used where a document is a working
   draft and the reader deserves to know before they rely on it. */
.efd-page-prose .efd-callout {
  padding: 18px 22px;
  background: var(--efd-tint);
  border: 1px solid var(--efd-border);
  border-left: 3px solid var(--efd-accent);
  border-radius: var(--efd-radius);
  font-size: 16px;
  line-height: 1.65;
  color: var(--efd-secondary);
}

/* Page standfirst — the one line under an H1 on a supporting page. */
.efd-page-standfirst,
.efd-page-standfirst p {
  font-family: var(--efd-font-text);
  font-size: 20px;
  line-height: 1.55;
  color: var(--efd-muted-fg);
}

.efd-page-standfirst {
  max-width: var(--efd-measure);
  margin-inline: auto;
}

.efd-page-standfirst p { margin: 0; }

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */

.efd-button.efd-button {
  display: inline-block;
  font-family: var(--efd-font-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  padding: 14px 22px;
  border-radius: 8px;
  background: var(--efd-primary);
  color: var(--efd-surface);
  text-decoration: none;
  transition: background-color 0.18s ease;
}

.efd-button.efd-button:hover,
.efd-button.efd-button:focus-visible {
  background: var(--efd-accent);
  color: var(--efd-surface);
  text-decoration: none;
}

.efd-button:focus-visible {
  outline: 2px solid var(--efd-primary);
  outline-offset: 3px;
}

/* ------------------------------------------------------------------ */
/* In-page anchor nav (Terms, Affiliate Disclosure)                    */
/* ------------------------------------------------------------------ */

.efd-page-nav {
  max-width: var(--efd-measure);
  margin-inline: auto;
  padding: 22px 24px;
  background: var(--efd-tint);
  border: 1px solid var(--efd-border);
  border-radius: var(--efd-radius);
}

.efd-page-nav__eyebrow {
  font-family: var(--efd-font-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--efd-muted-fg);
  margin: 0 0 12px;
}

.efd-page-nav ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 28px;
}

.efd-page-nav li { margin: 0; counter-increment: efd-nav; }

.efd-page-nav a {
  font-family: var(--efd-font-text);
  font-size: 15px;
  line-height: 1.45;
  color: var(--efd-secondary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.efd-page-nav a:hover,
.efd-page-nav a:focus-visible {
  color: var(--efd-primary);
  border-bottom-color: var(--efd-accent);
}

@media (max-width: 767px) {
  .efd-page-nav ol { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ */
/* Display sizes                                                       */
/* ------------------------------------------------------------------ */

/* The Kit set article and page H1s at 52-56px flat, which is a poster size
   rather than a headline one — it dominated the screen above a 700px reading
   column and pushed everything else down. These clamp instead of stepping at
   a breakpoint, so the headline shrinks with the viewport rather than jumping.
   Elementor writes its own per-element typography, so the article title needs
   the extra class to match weight. */
/* H1/H2/H3 sizes are NOT set here. They live in the Global Kit (and, for the
   three hero headings, in the elements themselves), because Elementor writes
   per-element typography at a specificity a stylesheet class cannot beat — an
   override here worked on articles and silently did nothing on the homepage,
   the blog index and category archives. One source of truth, and it stays
   editable in Elementor. See Kit 5 → Typography. */

/* Author archive: set in this file, so just retuned. */
.efd-author-header__name { font-size: clamp(26px, 3vw, 36px); }

/* ------------------------------------------------------------------ */
/* Sticky header vs the WordPress admin bar                            */
/* ------------------------------------------------------------------ */

/* Xpro's sticky header is `position: sticky; top: 0`, so it sticks to the
   top of the VIEWPORT — which is underneath `#wpadminbar`, a 32px fixed bar
   WordPress paints above everything at z-index 99999. The header was not
   missing, it was behind it.
   Only logged-in users ever see the admin bar, so this never affected a
   visitor or the static export; it made the site awkward to work in, which is
   reason enough. 32px and 46px are WordPress's own admin-bar heights and its
   own 783px breakpoint between them. */
body.admin-bar header.xpro-theme-builder-header.xtb-header-sticky,
body.admin-bar [data-efd-sticky-header] {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar header.xpro-theme-builder-header.xtb-header-sticky,
  body.admin-bar [data-efd-sticky-header] {
    top: 46px;
  }
}

/* Below 601px WordPress stops fixing the admin bar and lets it scroll away,
   so the header should sit at the very top again. */
@media screen and (max-width: 600px) {
  body.admin-bar header.xpro-theme-builder-header.xtb-header-sticky,
  body.admin-bar [data-efd-sticky-header] {
    top: 0;
  }
}

/* ------------------------------------------------------------------ */
/* Category hero — "What you'll find here"                             */
/* ------------------------------------------------------------------ */

/* Was a bare left rule with transparent background and no border, so it read
   as loose text rather than a defined panel. It is a promise about the area's
   coverage and deserves to look like one. */
/* Elementor writes border and radius as per-element rules
   (`.elementor-element-xxxx { … }`), which outrank a bare class — the
   background landed and the border silently did not. Restated at container
   specificity, which matches. */
.e-con.e-con.efd-cathero__expect,
.efd-cathero__expect {
  padding: 18px 20px !important;
  background: var(--efd-tint);
  border: 1px solid var(--efd-border);
  border-left: 3px solid var(--efd-cat-current, var(--efd-accent));
  border-radius: var(--efd-radius);
}

.efd-cathero__expect-label {
  color: var(--efd-cat-current, var(--efd-accent));
}

/* ------------------------------------------------------------------ */
/* Product card                                                        */
/* ------------------------------------------------------------------ */

/* ONE card, TWO entry points. `[efd_product]` renders it inside an article
   body, where the data is per-article and Elementor cannot reach; the
   Elementor template renders it on category, blog and home pages, where an
   editor places it by hand. Both emit the class contract below and neither
   owns the design — this file does.
   These rules used to live in efd-single-article.css, which is enqueued only
   on `is_singular('post')`, so all 22 of them were unreachable on exactly the
   three pages the hand-placed cards appear on.

   Every slot is optional. A card with no image, no brand, no summary or no
   link is a reachable state — CYNTH's Amazon retrieval is thin, and a
   hand-placed card may legitimately have none of them. */

/* The query container is the WRAPPER, not the card.
   An element cannot respond to a container query it declares itself — the
   query only reaches descendants — so putting `container-type` on the card and
   then trying to restyle the card from inside `@container` silently does
   nothing. The wrapper carries the containment; the card responds to it. */
.efd-product-card-outer {
  container-type: inline-size;
  container-name: efd-card;
  margin: 22px 0;
  /* Without this the card collapses to ~0px whenever its parent is a flex or
     grid container that does not stretch its children — which is every picks
     row on the site. A container query on a 0px container then reports 0px,
     so the card is both invisible and stuck in its narrow layout. */
  width: 100%;
  min-width: 0;
}

/* Elementor wraps a shortcode in its own widget div, which is the actual flex
   child and has no sizing of its own — so inside a flex container it collapses
   to its content width instead of filling the row. That cost a 2px-wide
   product card in the picks rows and an 834px card in a 1180px homepage
   section, both silently. Any wrapper holding one of our components stretches. */
.elementor-widget-shortcode:has(.efd-product-card-outer),
.elementor-widget-shortcode:has(.efd-bfc),
.elementor-widget-shortcode:has(.efd-related),
.elementor-widget-shortcode:has(.efd-category-editor) {
  flex: 1 1 auto;
  width: 100%;
  align-self: stretch;
  min-width: 0;
}

/* Same, for engines without :has(). The picks rows are the only place a card
   sits inside one of our own flex containers. */
.efd-catpicks__card > .elementor-widget-shortcode,
.efd-prod__card > .elementor-widget-shortcode,
.efd-picks__card > .elementor-widget-shortcode {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

/* A card placed in a picks row provides its own frame, so the container it
   sits in should not draw a second one around it. Stated at container
   specificity because Elementor writes the old border as a per-element rule. */
.e-con.e-con.efd-catpicks__card:has(.efd-product-card-outer),
.efd-catpicks__card:has(.efd-product-card-outer) {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.efd-catpicks__card .efd-product-card-outer { margin: 0; }

.efd-product-card {
  display: flex;
  flex-direction: column;
  background: var(--efd-surface);
  border: 1px solid rgba(13, 27, 42, 0.07);
  border-radius: var(--efd-radius);
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(13, 27, 42, 0.06),
    0 18px 40px -24px rgba(13, 27, 42, 0.35);
}

/* Elementor stamps max-width on widgets and containers from a stylesheet that
   loads later at a higher weight, so a card placed as an Elementor node needs
   the measure restated at matching weight. */
.e-con.e-con > .e-con-inner > .elementor-widget.efd-product-card-outer,
.elementor.elementor .e-con > .elementor-widget.efd-product-card-outer,
.e-con.e-con.efd-product-card-outer {
  max-width: var(--efd-measure);
  margin-inline: auto;
}

/* --- the image plate ------------------------------------------------ */

/* WHITE, deliberately. Product photography from Amazon is roughly square on a
   white field: `cover` would crop the top and bottom off the product, and
   `contain` letterboxes. A white plate makes that letterboxing invisible for a
   white-background photo and still suits a transparent cut-out — the one
   background that is right for both. This is also why the source design's dark
   radial well and elliptical ground shadow are not reproduced: behind the
   photography this site actually gets, neither would ever be seen. */
/* NO fixed aspect ratio. A 4/5 plate was in the source design, but the design
   assumed cut-out product art; real photography here is landscape or square,
   and `contain` inside a tall box letterboxes it — which is where the large
   empty bands above and below the image came from, and the gap between the
   image and the accent rule. The plate now hugs the image, and the cap below
   stops an unusually tall one from taking over the card. */
.efd-product-card__media {
  display: block;
  position: relative;
  flex: 0 0 auto;
  padding: 10px;
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(13, 27, 42, 0.05);
}

/* Both markup shapes. The shortcode puts the class on the <img> itself; an
   Elementor image widget puts it on the widget's wrapper and nests the <img>
   inside. Styling both means the same rules hold whichever built the card. */
.efd-article-content .efd-product-card__image,
.efd-product-card__image,
.efd-product-card__image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 320px;
  margin: 0;
  border-radius: 0;
  object-fit: contain;
}

/* The accent rule between image and body. Reads the article's own category
   colour, which the Elementor wrapper already sets, so the card is
   category-coloured without printing the category name. */
.efd-product-card__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--efd-cat-current, var(--efd-accent));
}

/* --- the badge ------------------------------------------------------ */

/* Accent fill with light text. The source design used a pastel fill with navy
   text; against our deep category accents that pairing has no usable contrast,
   so the roles swap. Geometry, dot and letter-spacing are unchanged. */
.efd-product-card__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px 7px 11px;
  border-radius: 999px;
  background: var(--efd-cat-current, var(--efd-accent));
  box-shadow: 0 4px 12px -4px rgba(13, 27, 42, 0.45);
  font-family: var(--efd-font-text);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--efd-surface);
  pointer-events: none;
}

/* Inline variant, for a card with no image plate to sit on. Same pill, in
   flow at the top of the body rather than absolutely placed over a photo. */
.efd-product-card__badge--inline {
  position: static;
  align-self: flex-start;
  box-shadow: none;
}

.efd-product-card__badge::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.75;
}

/* --- the body ------------------------------------------------------- */

.efd-product-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 22px 24px;
}

.efd-article-content .efd-product-card__brand,
.efd-product-card__brand {
  margin: 0;
  font-family: var(--efd-font-text);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--efd-accent);
}

/* A <p>, not a heading: four cards in a buyer's guide would put four spurious
   entries into an article outline. Styled as the design's H3. */
.efd-article-content .efd-product-card__title,
.efd-product-card__title {
  margin: 0;
  font-family: var(--efd-font-display);
  font-size: 23px;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--efd-primary);
  text-wrap: pretty;
}

.efd-product-card__title a { color: inherit; text-decoration: none; }
.efd-product-card__title a:hover,
.efd-product-card__title a:focus-visible { text-decoration: underline; }

.efd-article-content .efd-product-card__summary,
.efd-product-card__summary {
  margin: 0;
  font-family: var(--efd-font-text);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--efd-accent);
  text-wrap: pretty;
}

.efd-article-content .efd-product-card__cta,
.efd-product-card__cta { margin: 6px 0 0; }

/* --- the call to action --------------------------------------------- */

/* Hairline is the default: restrained enough to sit inside running prose.
   The amber is Amazon's own brand orange and is applied only when the vendor
   IS Amazon — it is a vendor cue, not a house colour, which is why it is
   scoped to a modifier rather than baked into the button. */
.efd-product-card .efd-product-card__link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border-radius: 8px;
  text-decoration: none;
  font-family: var(--efd-font-text);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--efd-surface);
  background: linear-gradient(180deg, #22314A 0%, var(--efd-primary) 100%);
  box-shadow:
    0 1px 0 var(--efd-vendor-accent, var(--efd-accent)) inset,
    0 6px 14px -8px rgba(13, 27, 42, 0.7);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.efd-product-card .efd-product-card__link:hover,
.efd-product-card .efd-product-card__link:focus-visible {
  color: var(--efd-surface);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow:
    0 1.5px 0 var(--efd-vendor-accent, var(--efd-accent)) inset,
    0 14px 28px -12px rgba(13, 27, 42, 0.8);
}

.efd-product-card .efd-product-card__link:focus-visible {
  outline: 2px solid var(--efd-primary);
  outline-offset: 3px;
}

.efd-product-card__link svg { flex: 0 0 auto; }

/* Amazon's brand orange, applied only for Amazon. */
.efd-product-card--amazon { --efd-vendor-accent: #FF9900; }

/* The bold variant, for picks rows where the card IS the call to action. */
.efd-product-card--bold-cta .efd-product-card__link {
  align-self: stretch;
  justify-content: space-between;
  padding: 16px 18px;
  border-radius: 12px;
  font-size: 12.5px;
  letter-spacing: 0.12em;
  color: var(--efd-primary);
  background: linear-gradient(180deg, #FFB33E 0%, #FF9900 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 10px 22px -12px rgba(255, 153, 0, 0.75);
}

.efd-product-card--bold-cta .efd-product-card__link:hover,
.efd-product-card--bold-cta .efd-product-card__link:focus-visible {
  color: var(--efd-primary);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 14px 26px -12px rgba(255, 153, 0, 0.85);
}

.efd-article-content .efd-product-card__disclosure,
.efd-product-card__disclosure {
  margin: 2px 0 0;
  font-family: var(--efd-font-text);
  font-size: 12px;
  line-height: 1.5;
  color: var(--efd-tertiary);
}

/* --- horizontal: desktop viewport AND a wide enough card ------------ */

/* Both conditions are needed, and neither alone is enough.
   The brief is stacked on mobile and tablet, horizontal on desktop — but the
   article column is 700px at a 768px viewport just as it is at 1440, so the
   card's own width cannot tell a tablet from a desktop. Hence the media query.
   And the picks rows put three cards side by side at roughly 370px each on a
   1440 desktop, where image-left is wrong however wide the screen is. Hence
   the container query. Nesting them gives the requested behaviour in the
   article column and keeps grid contexts stacked everywhere. */
@media (min-width: 1025px) {
@container efd-card (min-width: 560px) {
  .efd-product-card {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: stretch;
  }

  .efd-product-card__media {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    border-right: 1px solid rgba(13, 27, 42, 0.07);
  }

  /* In the horizontal layout the plate is a fixed-height column beside the
     text, so the image centres inside it rather than sizing it. */
  .efd-product-card__image,
  .efd-product-card__image img { max-height: 100%; }

  /* The full-bleed rule becomes the design's 44px stub, above the eyebrow. */
  .efd-product-card__media::after { content: none; }

  .efd-product-card__body {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    justify-content: center;
    padding: 26px 24px;
  }

  .efd-product-card__body::before {
    content: "";
    height: 3px;
    width: 44px;
    background: var(--efd-cat-current, var(--efd-accent));
  }

  .efd-article-content .efd-product-card__title,
  .efd-product-card__title { font-size: 26px; line-height: 1.12; }
}
}

/* Fallback for engines without container queries: the article column is the
   only place a card is reliably wide, so key it to the viewport there. */
@supports not (container-type: inline-size) {
  @media (min-width: 1025px) {
    .efd-article-content .efd-product-card {
      display: grid;
      grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    }
    .efd-article-content .efd-product-card__media {
      grid-column: 1; grid-row: 1; aspect-ratio: auto; min-height: 300px;
    }
    .efd-article-content .efd-product-card__media::after { content: none; }
    .efd-article-content .efd-product-card__body {
      grid-column: 2; grid-row: 1; justify-content: center; padding: 26px 24px;
    }
    .efd-article-content .efd-product-card__title { font-size: 26px; line-height: 1.12; }
  }
}

/* ------------------------------------------------------------------ */
/* Related articles                                                    */
/* ------------------------------------------------------------------ */

.efd-related {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 20px;
}

.efd-related__card {
  display: flex;
  flex-direction: column;
  background: var(--efd-surface);
  border: 1px solid var(--efd-border);
  border-radius: var(--efd-radius);
  overflow: hidden;
}

.efd-related__media {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--efd-background);
  overflow: hidden;
}

.efd-related__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Most freshly generated articles have no featured image yet, so the
   no-image state is designed rather than left as a gap: a flat panel in the
   article's own area accent, which also keeps every card the same height. */
.efd-related__media--empty {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(0, 0, 0, 0.06)),
    var(--efd-card-accent, var(--efd-accent));
}

.efd-related__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 18px 20px 20px;
}

.efd-related__area {
  font-family: var(--efd-font-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--efd-card-accent, var(--efd-accent));
  margin: 0 0 8px;
}

.efd-related__title {
  font-family: var(--efd-font-display);
  font-size: 17px;
  line-height: 1.32;
  color: var(--efd-primary);
  margin: 0 0 10px;
}

.efd-related__title a { color: inherit; text-decoration: none; }
.efd-related__title a:hover,
.efd-related__title a:focus-visible { text-decoration: underline; }

.efd-related__meta {
  font-family: var(--efd-font-text);
  font-size: 13px;
  color: var(--efd-tertiary);
  margin: auto 0 0;
}

@media (max-width: 1024px) {
  .efd-related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .efd-related { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ */
/* Author card — end of article                                        */
/* ------------------------------------------------------------------ */

.efd-author-card {
  max-width: var(--efd-measure);
  margin-inline: auto;
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 28px;
  background: var(--efd-surface);
  border: 1px solid var(--efd-border);
  border-left: 3px solid var(--efd-author-accent);
  border-radius: var(--efd-radius);
}

.e-con.e-con > .e-con-inner > .elementor-widget.efd-author-card-host,
.elementor.elementor .e-con > .elementor-widget.efd-author-card-host,
.e-con.e-con.efd-author-card-host {
  max-width: var(--efd-measure);
  margin-inline: auto;
}

.efd-author-card__portrait { flex: 0 0 auto; }

.efd-author-card__portrait img {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 50%;
}

.efd-author-card__body { flex: 1 1 auto; min-width: 0; }

.efd-author-card__eyebrow {
  font-family: var(--efd-font-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--efd-muted-fg);
  margin: 0 0 6px;
}

.efd-author-card__name {
  font-family: var(--efd-font-display);
  font-size: 20px;
  line-height: 1.25;
  color: var(--efd-primary);
  margin: 0 0 4px;
}

.efd-author-card__name a { color: inherit; text-decoration: none; }
.efd-author-card__name a:hover { text-decoration: underline; }

.efd-author-card__role {
  font-family: var(--efd-font-text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--efd-author-accent);
  margin: 0 0 12px;
}

.efd-author-card__bio {
  font-family: var(--efd-font-text);
  font-size: 15px;
  line-height: 1.65;
  color: var(--efd-secondary);
  margin: 0 0 12px;
}

.efd-author-card__more { margin: 0; }

.efd-author-card__more a {
  font-family: var(--efd-font-text);
  font-size: 14px;
  font-weight: 600;
  color: var(--efd-accent);
  text-decoration: none;
}

.efd-author-card__more a:hover { text-decoration: underline; }

@media (max-width: 599px) {
  .efd-author-card { flex-direction: column; gap: 16px; padding: 22px; }
}

/* ------------------------------------------------------------------ */
/* Author profiles — About page                                        */
/* ------------------------------------------------------------------ */

.efd-author-profiles {
  max-width: var(--efd-measure-wide);
  margin-inline: auto;
  display: grid;
  gap: 14px;
}

.e-con.e-con > .e-con-inner > .elementor-widget.efd-author-profiles-host,
.elementor.elementor .e-con > .elementor-widget.efd-author-profiles-host,
.e-con.e-con.efd-author-profiles-host {
  max-width: var(--efd-measure-wide);
  margin-inline: auto;
}

.efd-author-profile {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  padding: 28px;
  background: var(--efd-surface);
  border: 1px solid var(--efd-border);
  border-left: 3px solid var(--efd-author-accent);
  border-radius: var(--efd-radius);
}

.efd-author-profile__portrait { flex: 0 0 auto; }

.efd-author-profile__portrait img {
  display: block;
  width: 88px;
  height: 88px;
  border-radius: 50%;
}

.efd-author-profile__body { flex: 1 1 auto; min-width: 0; }

.efd-author-profile__name {
  font-family: var(--efd-font-display);
  font-size: 22px;
  line-height: 1.25;
  color: var(--efd-primary);
  margin: 0 0 4px;
}

.efd-author-profile__name a { color: inherit; text-decoration: none; }
.efd-author-profile__name a:hover { text-decoration: underline; }

.efd-author-profile__role {
  font-family: var(--efd-font-text);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--efd-author-accent);
  margin: 0 0 14px;
}

.efd-author-profile__bio {
  font-family: var(--efd-font-text);
  font-size: 16px;
  line-height: 1.7;
  color: var(--efd-secondary);
  margin: 0 0 14px;
}

.efd-author-profile__more { margin: 0; }

.efd-author-profile__more a {
  font-family: var(--efd-font-text);
  font-size: 14px;
  font-weight: 600;
  color: var(--efd-accent);
  text-decoration: none;
}

.efd-author-profile__more a:hover { text-decoration: underline; }

@media (max-width: 599px) {
  .efd-author-profile { flex-direction: column; gap: 16px; padding: 22px; }
}

/* ------------------------------------------------------------------ */
/* Blog Feature Category card — design 1b                              */
/* ------------------------------------------------------------------ */

/* The source design's geometry, on this site's palette and type. Newsreader /
   Work Sans and the cream-and-terracotta palette are not reproduced: the same
   rule the product card follows. What replaces the flat terracotta is better
   suited to this site anyway — the active tab, the active dot and the CTA all
   take `--efd-bfc-accent`, set per category, so the card carries each area's
   own colour as the reader rotates through it. */

/* The design specifies 1100px; this site's container is 1180, so 1100 left the
   card visibly narrower than every section around it. Letting it simply fill
   its parent was worse — the four places it now sits give it 794px, 1180px and
   1440px — so it carries the site's own container measure and centres itself,
   the same width `.efd-related` uses on an article. */
.efd-bfc {
  --efd-bfc-accent: var(--efd-accent);
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 20px;
  box-sizing: border-box;
}

.efd-bfc__eyebrow {
  font-family: var(--efd-font-text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--efd-tertiary);
  margin: 0 0 18px;
}

/* --- tab rail ------------------------------------------------------- */

.efd-bfc__tabs {
  display: flex;
  gap: 4px;
  overflow: hidden;
}

.efd-bfc .efd-bfc__tab {
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  padding: 11px 10px;
  font-family: var(--efd-font-text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border: 1.5px solid var(--efd-border);
  border-radius: 10px 10px 0 0;
  background: var(--efd-tint);
  color: var(--efd-muted-fg);
  position: relative;
  z-index: 1;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.efd-bfc .efd-bfc__tab:hover { color: var(--efd-primary); }

/* The active tab merges into the panel: dark border on three sides, its own
   bottom edge painted out in the panel's colour and pulled down over the
   panel's top border. */
.efd-bfc .efd-bfc__tab.is-active {
  background: var(--efd-surface);
  border-color: var(--efd-primary);
  border-bottom-color: var(--efd-surface);
  margin-bottom: -1.5px;
  color: var(--efd-primary);
  z-index: 2;
}

/* --- mobile stepper -------------------------------------------------- */

/* Hidden at every width here; the media query at the end reveals it. The
   [hidden] attribute is removed by JS, so a no-JS reader never sees controls
   that would do nothing. */
.efd-bfc__mobilebar { display: none; }

.efd-bfc__arrow {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--efd-primary);
  background: var(--efd-surface);
  color: var(--efd-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.efd-bfc__arrow:hover,
.efd-bfc__arrow:focus-visible {
  background: var(--efd-primary);
  color: var(--efd-surface);
}

.efd-bfc__arrow:focus-visible { outline: 2px solid var(--efd-primary); outline-offset: 2px; }

.efd-bfc__counter { text-align: center; min-width: 0; }

.efd-bfc__counter-title {
  display: block;
  font-family: var(--efd-font-display);
  font-size: 15px;
  line-height: 1.2;
  color: var(--efd-primary);
}

.efd-bfc__counter-n {
  display: block;
  font-family: var(--efd-font-text);
  font-size: 11px;
  font-weight: 600;
  color: var(--efd-tertiary);
  margin-top: 2px;
}

/* --- panel ----------------------------------------------------------- */

.efd-bfc__panel {
  border: 1.5px solid var(--efd-primary);
  /* Square where the active tab lands, rounded everywhere else. */
  border-radius: 2px 14px 14px 14px;
  background: var(--efd-surface);
  padding: 32px 36px;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  align-items: center;
  box-sizing: border-box;
}

.efd-bfc__panel[hidden] { display: none; }

.efd-bfc__thumb {
  width: 100%;
  height: 220px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--efd-background);
}

.efd-bfc__thumb img,
.efd-bfc__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
}

/* A category with nothing published yet still needs a left column that reads
   as deliberate rather than broken. */
.efd-bfc__thumb--empty {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(0, 0, 0, 0.06)),
    var(--efd-bfc-accent);
}

.efd-bfc__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.efd-bfc__title {
  font-family: var(--efd-font-display);
  font-size: clamp(24px, 2.6vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--efd-primary);
  margin: 0;
}

.efd-bfc__meta {
  font-family: var(--efd-font-text);
  font-size: 14px;
  font-weight: 500;
  color: var(--efd-muted-fg);
  margin: 0;
}

.efd-bfc__desc {
  font-family: var(--efd-font-text);
  font-size: 16px;
  line-height: 1.6;
  color: var(--efd-secondary);
  max-width: 52ch;
  margin: 0;
}

.efd-bfc__actions { margin: 6px 0 0; }

/* Doubled class throughout this block. The Global Kit styles
   `.elementor-kit-5 a` at (0,1,1) and post-5.css loads after this file, so a
   single-class link rule of ours silently loses. On components painted over a
   colour that mattered: the card's CTA ended up as accent-blue text on the
   category accent — 1.01:1 on a purple panel, which is invisible, not merely
   low-contrast. Same reason the pills below lost their per-category colour. */
.efd-bfc .efd-bfc__cta {
  display: inline-block;
  background: var(--efd-bfc-accent);
  color: var(--efd-surface);
  text-decoration: none;
  border-radius: 24px;
  padding: 12px 26px;
  font-family: var(--efd-font-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  transition: filter 0.15s ease;
}

.efd-bfc .efd-bfc__cta:hover,
.efd-bfc .efd-bfc__cta:focus-visible {
  color: var(--efd-surface);
  text-decoration: none;
  filter: brightness(0.88);
}

.efd-bfc .efd-bfc__cta:focus-visible { outline: 2px solid var(--efd-primary); outline-offset: 3px; }

/* --- dots ------------------------------------------------------------ */

.efd-bfc__dots {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 16px;
}

/* The rule the spec puts between this section and the footer, so the card
   does not read as part of it. Scaled with the rest of the site's rhythm
   rather than the design's original 56px. */
.efd-bfc::after {
  content: "";
  display: block;
  height: 1px;
  background: var(--efd-border);
  margin-top: 36px;
}

.efd-bfc__dot {
  width: 7px;
  height: 7px;
  border-radius: 4px;
  background: var(--efd-border);
  transition: width 0.15s ease, background-color 0.15s ease;
}

.efd-bfc__dot.is-active {
  width: 20px;
  background: var(--efd-bfc-accent);
}

/* --- below 640px ----------------------------------------------------- */

@media (max-width: 640px) {
  .efd-bfc__tabs { display: none; }

  .efd-bfc__mobilebar:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
  }

  .efd-bfc__panel {
    grid-template-columns: 1fr;
    border-radius: 14px;
    padding: 20px;
    gap: 18px;
  }

  .efd-bfc__thumb { height: 180px; order: -1; }

  .efd-bfc__title { font-size: 24px; }

  .efd-bfc__dots { justify-content: center; }
}

/* ------------------------------------------------------------------ */
/* Category editor card                                                */
/* ------------------------------------------------------------------ */

.efd-category-editor {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  background: var(--efd-surface);
  border: 1px solid var(--efd-border);
  border-left: 3px solid var(--efd-author-accent);
  border-radius: var(--efd-radius);
}

.efd-category-editor__label {
  font-family: var(--efd-font-text);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--efd-tertiary);
  margin: 0;
}

.efd-category-editor__row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
}

.efd-category-editor__portrait { flex: 0 0 auto; }

.efd-category-editor__portrait img {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 50%;
}

.efd-category-editor__ident { min-width: 0; }

.efd-category-editor__name {
  font-family: var(--efd-font-display);
  font-size: 18px;
  line-height: 1.2;
  color: var(--efd-primary);
  margin: 0 0 3px;
}

.efd-category-editor__name a { color: inherit; text-decoration: none; }
.efd-category-editor__name a:hover { text-decoration: underline; }

.efd-category-editor__role {
  font-family: var(--efd-font-text);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--efd-author-accent);
  margin: 0;
}

.efd-category-editor__remit,
.efd-category-editor__bio {
  font-family: var(--efd-font-text);
  font-size: 14px;
  line-height: 1.6;
  color: var(--efd-secondary);
  margin: 0;
}

.efd-category-editor__bio { color: var(--efd-muted-fg); }

.efd-category-editor__more { margin: 0; }

.efd-category-editor__more a {
  font-family: var(--efd-font-text);
  font-size: 13px;
  font-weight: 600;
  color: var(--efd-accent);
  text-decoration: none;
}

.efd-category-editor__more a:hover { text-decoration: underline; }

/* One featured article: a single card should not sit in a three-column grid
   pretending to be the first of three. The height cap stops a 16/9 image
   across the full container from becoming a 660px wall above the headline. */
.efd-related--featured { grid-template-columns: minmax(0, 1fr); }
.efd-related--featured .efd-related__media { max-height: 380px; }
.efd-related--featured .efd-related__title { font-size: 24px; }

@media (max-width: 767px) {
  .efd-related--featured .efd-related__media { max-height: 220px; }
  .efd-related--featured .efd-related__title { font-size: 20px; }
}

/* ------------------------------------------------------------------ */
/* Author archive header                                               */
/* ------------------------------------------------------------------ */

.efd-author-header {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  max-width: var(--efd-measure-wide);
  margin-inline: auto;
  padding: 0 0 8px;
}

.efd-author-header__portrait { flex: 0 0 auto; }

.efd-author-header__portrait img {
  display: block;
  width: 112px;
  height: 112px;
  border-radius: 50%;
}

.efd-author-header__body { flex: 1 1 auto; min-width: 0; }

.efd-author-header__role {
  font-family: var(--efd-font-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--efd-author-accent);
  margin: 0 0 8px;
}

.efd-author-header__name {
  font-family: var(--efd-font-display);
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.12;
  color: var(--efd-primary);
  margin: 0 0 14px;
}

.efd-author-header__bio {
  font-family: var(--efd-font-text);
  font-size: 17px;
  line-height: 1.7;
  color: var(--efd-secondary);
  margin: 0 0 12px;
}

.efd-author-header__count {
  font-family: var(--efd-font-text);
  font-size: 13px;
  color: var(--efd-tertiary);
  margin: 0;
}

.efd-archive { max-width: var(--efd-measure-wide); margin-inline: auto; }

.efd-archive__empty {
  max-width: var(--efd-measure);
  margin-inline: auto;
  font-family: var(--efd-font-text);
  font-size: 16px;
  color: var(--efd-muted-fg);
}

@media (max-width: 599px) {
  .efd-author-header { flex-direction: column; gap: 18px; }
  .efd-author-header__portrait img { width: 88px; height: 88px; }
}

/* ------------------------------------------------------------------ */
/* Social links                                                        */
/* ------------------------------------------------------------------ */

.efd-social,
.efd-author-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 0;
}

/* Footer column variant — stacked text links matching the icon-list columns
   beside it, so the Connect column reads as one of the four, not as a
   different component that happens to sit there. */
.efd-social--list {
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

.efd-social--list .efd-social__link {
  padding: 0;
  border: 0;
  border-radius: 0;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.4;
  color: inherit;
  opacity: 0.85;
}

.efd-social--list .efd-social__link:hover,
.efd-social--list .efd-social__link:focus-visible {
  opacity: 1;
  color: inherit;
  text-decoration: underline;
}

/* Icon row variant — the brand marks under the footer's blurb. Sized and
   spaced to match the Font Awesome row it replaces (16px, 18px gap). */
.efd-social--icons { gap: 18px; margin: 0; }

.efd-social__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  opacity: 0.75;
  text-decoration: none;
  transition: opacity 0.18s ease;
}

.efd-social__icon:hover,
.efd-social__icon:focus-visible { opacity: 1; color: currentColor; }

.efd-social__icon svg { display: block; }

.efd-social__heading {
  font-family: var(--efd-font-text);
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 18px;
}

.efd-social .efd-social__link,
.efd-author-socials .efd-social__link {
  font-family: var(--efd-font-text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  padding: 9px 14px;
  border: 1px solid var(--efd-border);
  border-radius: 999px;
  color: var(--efd-secondary);
  text-decoration: none;
  transition: border-color 0.18s ease, color 0.18s ease;
}

.efd-social__link:hover,
.efd-social__link:focus-visible {
  border-color: var(--efd-accent);
  color: var(--efd-primary);
  text-decoration: none;
}

/* ------------------------------------------------------------------ */
/* Newsletter — designs 1a (inline) and 1b (split)                     */
/* ------------------------------------------------------------------ */

/* TYPEFACES ARE THE SITE'S, NOT THE MOCKUP'S. The source design uses
   Fraunces and Inter; neither is loaded or referenced. Display text is
   --efd-font-display (Archivo Black) and body text --efd-font-text (Roboto),
   inherited from the Global Kit exactly as every other component does. The
   design's proportions, hierarchy and copy carry over; its typeface and its
   sand-and-terracotta palette do not. */

.efd-newsletter {
  --efd-nl-ink: var(--efd-primary);
  width: 100%;
  box-sizing: border-box;
  text-align: left;
}

.efd-newsletter__eyebrow {
  font-family: var(--efd-font-text);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--efd-tertiary);
  margin: 0 0 10px;
}

.efd-newsletter__heading {
  font-family: var(--efd-font-display);
  color: var(--efd-nl-ink);
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}

.efd-newsletter__body {
  font-family: var(--efd-font-text);
  font-size: 15px;
  line-height: 1.6;
  color: var(--efd-secondary);
  margin: 0;
  max-width: 46ch;
}

/* --- the form ------------------------------------------------------- */

.efd-newsletter__form { display: flex; flex-direction: column; gap: 10px; }

.efd-newsletter__row { display: flex; gap: 8px; }

/* Element-qualified, because Hello Elementor's reset.css styles
   `input[type=email]` (0,1,1) and `button, [type=submit]` (0,1,0) and loads
   AFTER this file. A bare class lost both: the field took the theme's grey
   border and the button rendered transparent with a #c36 pink border — the
   theme's own link colour — instead of the site's navy fill. */
/* The Global Kit styles `.elementor-kit-5 input:not([type=button]):not([type=submit])`
   — each :not() carries its argument's weight, making it (0,3,1) — and post-5.css
   loads after this file, so even a matching-weight restatement loses the tie.
   The block class is doubled to clear it, the same idiom this file already uses
   for `.e-con.e-con`. No !important. */
.efd-newsletter.efd-newsletter .efd-newsletter__form input.efd-newsletter__input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--efd-font-text);
  font-size: 15px;
  line-height: 1.2;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--efd-border);
  border-radius: 10px;
  background: var(--efd-surface);
  color: var(--efd-primary);
}

.efd-newsletter.efd-newsletter .efd-newsletter__form input.efd-newsletter__input::placeholder { color: var(--efd-tertiary); }

.efd-newsletter.efd-newsletter .efd-newsletter__form input.efd-newsletter__input:focus-visible {
  outline: 2px solid var(--efd-accent);
  outline-offset: 1px;
  border-color: var(--efd-accent);
}

.efd-newsletter button.efd-newsletter__button {
  flex: 0 0 auto;
  height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--efd-font-text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  background: var(--efd-primary);
  color: var(--efd-surface);
  transition: background-color 0.18s ease;
}

.efd-newsletter button.efd-newsletter__button:hover,
.efd-newsletter button.efd-newsletter__button:focus-visible { background: var(--efd-accent); }

.efd-newsletter__note {
  font-family: var(--efd-font-text);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--efd-tertiary);
  margin: 2px 0 0;
  max-width: 44ch;
}

/* The honeypot. Off-screen rather than display:none, because some bots skip
   fields they can tell are hidden. */
.efd-newsletter__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Shown only to a logged-in editor, when no provider is configured. */
.efd-newsletter__form.is-preview { opacity: 0.75; }

.efd-newsletter__setup {
  font-family: var(--efd-font-text);
  font-size: 12px;
  line-height: 1.5;
  color: var(--efd-muted-fg);
  background: var(--efd-tint);
  border: 1px dashed var(--efd-border);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 4px 0 0;
}

/* --- 1a: inline article callout ------------------------------------- */

.efd-newsletter--inline {
  max-width: var(--efd-measure);
  margin-inline: auto;
  background: var(--efd-surface);
  border: 1px solid var(--efd-border);
  border-radius: var(--efd-radius);
  padding: 28px 30px;
  display: grid;
  gap: 20px;
}

.efd-newsletter--inline .efd-newsletter__heading { font-size: clamp(20px, 2.2vw, 24px); line-height: 1.2; }

/* The design puts a hairline between the lede and the headline row. */
.efd-newsletter--inline .efd-newsletter__editorial { position: relative; }

.efd-newsletter--inline .efd-newsletter__body { margin-bottom: 0; }

/* Headline beside the form above 620px of card width, stacked below it —
   a container query, so this is right inside the 700px article column and
   still right if the card is ever placed somewhere narrower. */
@supports (container-type: inline-size) {
  .efd-newsletter--inline { container-type: inline-size; container-name: efd-nl; }
}

@container efd-nl (min-width: 620px) {
  .efd-newsletter--inline {
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: end;
    gap: 28px;
  }
}

/* --- 1b: homepage split feature ------------------------------------- */

.efd-newsletter--split {
  max-width: 1180px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: var(--efd-tint);
  border: 1px solid var(--efd-border);
  border-radius: var(--efd-radius);
  overflow: hidden;
}

.efd-newsletter--split .efd-newsletter__editorial {
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.efd-newsletter--split .efd-newsletter__heading {
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.12;
  margin: 0;
}

.efd-newsletter--split .efd-newsletter__eyebrow { margin: 0; }

/* The dark half. */
.efd-newsletter--split .efd-newsletter__panel {
  padding: 44px 40px;
  background: var(--efd-primary);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}

.efd-newsletter--split .efd-newsletter__form-title {
  font-family: var(--efd-font-display);
  font-size: 16px;
  line-height: 1.2;
  color: var(--efd-surface);
  margin: 0;
}

.efd-newsletter--split.efd-newsletter--split .efd-newsletter__form input.efd-newsletter__input {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--efd-surface);
}

.efd-newsletter--split.efd-newsletter--split .efd-newsletter__form input.efd-newsletter__input::placeholder { color: rgba(255, 255, 255, 0.45); }

.efd-newsletter--split .efd-newsletter__row { flex-direction: column; }

.efd-newsletter--split button.efd-newsletter__button {
  width: 100%;
  background: var(--efd-surface);
  color: var(--efd-primary);
}

.efd-newsletter--split button.efd-newsletter__button:hover,
.efd-newsletter--split button.efd-newsletter__button:focus-visible {
  background: var(--efd-background);
  color: var(--efd-primary);
}

.efd-newsletter--split .efd-newsletter__note { color: rgba(255, 255, 255, 0.5); }

.efd-newsletter--split .efd-newsletter__setup {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.75);
}

/* --- category pills -------------------------------------------------- */

/* The mockup drew five identical green chips. These are the real terms,
   linked to their archives, each in its own accent — the site already has
   that data and five identical chips would throw it away. */
.efd-newsletter__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.efd-newsletter .efd-newsletter__pill {
  font-family: var(--efd-font-text);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  padding: 7px 12px;
  border-radius: 20px;
  text-decoration: none;
  color: var(--efd-pill-accent, var(--efd-accent));
  background: color-mix(in srgb, var(--efd-pill-accent, var(--efd-accent)) 12%, transparent);
  transition: background-color 0.18s ease;
}

.efd-newsletter .efd-newsletter__pill:hover,
.efd-newsletter .efd-newsletter__pill:focus-visible {
  color: var(--efd-surface);
  background: var(--efd-pill-accent, var(--efd-accent));
  text-decoration: none;
}

/* --- responsive ------------------------------------------------------ */

@media (max-width: 767px) {
  .efd-newsletter--split { grid-template-columns: 1fr; }
  .efd-newsletter--split .efd-newsletter__editorial,
  .efd-newsletter--split .efd-newsletter__panel { padding: 28px 22px; }
  .efd-newsletter--inline { padding: 22px; }
}

@media (max-width: 479px) {
  .efd-newsletter__row { flex-direction: column; }
  .efd-newsletter button.efd-newsletter__button { width: 100%; }
}

/* ------------------------------------------------------------------ */
/* Contact routes                                                      */
/* ------------------------------------------------------------------ */

.efd-contact-routes {
  max-width: var(--efd-measure-wide);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.efd-contact-route {
  display: flex;
  flex-direction: column;
  padding: 26px;
  background: var(--efd-surface);
  border: 1px solid var(--efd-border);
  border-radius: var(--efd-radius);
}

.efd-contact-route__title {
  font-family: var(--efd-font-display);
  font-size: 18px;
  line-height: 1.3;
  color: var(--efd-primary);
  margin: 0 0 8px;
}

.efd-contact-route__blurb {
  font-family: var(--efd-font-text);
  font-size: 15px;
  line-height: 1.6;
  color: var(--efd-muted-fg);
  margin: 0 0 20px;
  flex: 1 1 auto;
}

.efd-contact-route__action { margin: 0; }

.efd-contact-route__action .efd-button {
  font-size: 14px;
  padding: 12px 18px;
  word-break: break-word;
}

.efd-contact-routes__empty {
  max-width: var(--efd-measure);
  margin-inline: auto;
  padding: 20px 24px;
  background: var(--efd-tint);
  border: 1px dashed var(--efd-border);
  border-radius: var(--efd-radius);
  font-family: var(--efd-font-text);
  font-size: 15px;
  color: var(--efd-muted-fg);
}

@media (max-width: 767px) {
  .efd-contact-routes { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ */
/* Last updated                                                        */
/* ------------------------------------------------------------------ */

.efd-updated {
  max-width: var(--efd-measure);
  margin-inline: auto;
  font-family: var(--efd-font-text);
  font-size: 13px;
  color: var(--efd-muted-fg);
}

/* ------------------------------------------------------------------ */
/* Responsive prose                                                    */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
  .efd-page-prose { font-size: 17px; line-height: 1.7; }
  .efd-page-prose h2 { margin: 40px 0 16px; }
  .efd-page-prose h3 { margin: 32px 0 14px; }
  .efd-page-standfirst { font-size: 18px; }
}

/* ------------------------------------------------------------------ */
/* FAQ — the collapsible reader-questions card                          */
/* ------------------------------------------------------------------ */

/* TYPEFACES ARE THE SITE'S, NOT THE MOCKUP'S. The source design uses Bitter
   and IBM Plex Sans; neither is loaded or referenced anywhere. Display text is
   --efd-font-display (Archivo Black) and body text --efd-font-text (Roboto),
   inherited from the Global Kit exactly as every other component does. The
   design's proportions, hierarchy, plus-to-close mark and one-open-at-a-time
   behaviour all carry over; its typefaces and its #2E5AAC blue do not — the
   accent is whichever of the five areas the article belongs to.

   NO JAVASCRIPT. The card is <details>/<summary>, so opening, closing, keyboard
   handling and what a screen reader announces are the browser's. `name` makes
   the group exclusive natively. The only thing script would add is the height
   animation, and CSS now does that — see the @supports block at the end, which
   is written so that a browser without it snaps open rather than showing an
   answer of zero height. */

.efd-faq {
  --efd-faq-accent: var(--efd-accent);
  /* The accent guaranteed legible as small text on the card. Set per area
     alongside --efd-faq-accent; the fallback keeps a standalone card correct. */
  --efd-faq-ink: var(--efd-accent);
  width: 100%;
  box-sizing: border-box;
  margin: 26px 0;
  background: var(--efd-surface);
  border: 1px solid var(--efd-border);
  border-radius: var(--efd-radius);
  /* Two shadows, as the design has: a tight one that seats the card on the
     page and a wide soft one that lifts it. Both in the site's ink rather
     than the mockup's. */
  box-shadow: 0 1px 2px rgba(13, 27, 42, 0.05), 0 10px 26px rgba(13, 27, 42, 0.06);
  overflow: hidden;
}

/* --- header --------------------------------------------------------- */

.efd-faq__head {
  padding: 24px 26px 18px;
  border-bottom: 1px solid var(--efd-border);
}

.efd-faq__eyebrow {
  font-family: var(--efd-font-text);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--efd-faq-ink);
  margin: 0 0 9px;
}

/* Doubled class. The heading is a real <h2> inside the post content, where
   the Global Kit styles `.elementor-kit-5 h2` and Elementor may add a
   per-element rule for the content widget — both load after this file. */
.efd-faq.efd-faq .efd-faq__heading {
  font-family: var(--efd-font-display);
  font-size: clamp(19px, 2.3vw, 23px);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--efd-primary);
  margin: 0;
  /* The Skip Through rail scrolls to this heading, so it needs the same
     clearance from the sticky header the article's own headings have. */
  scroll-margin-top: 96px;
}

.efd-faq__intro {
  font-family: var(--efd-font-text);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--efd-muted-fg);
  margin: 9px 0 0;
  max-width: 56ch;
}

/* --- items ---------------------------------------------------------- */

.efd-faq__list { padding: 4px 0 6px; }

.efd-faq__item + .efd-faq__item { border-top: 1px solid var(--efd-border); }

/* --- the question row ----------------------------------------------- */

.efd-faq .efd-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 26px;
  cursor: pointer;
  /* The default disclosure triangle, removed twice: `list-style` is the
     standards route and WebKit needs its own pseudo-element. */
  list-style: none;
  transition: background-color 0.18s ease;
}

.efd-faq .efd-faq__q::-webkit-details-marker { display: none; }
.efd-faq .efd-faq__q::marker { content: ''; }

.efd-faq .efd-faq__q:hover { background: var(--efd-tint); }

.efd-faq .efd-faq__q:focus-visible {
  outline: 2px solid var(--efd-faq-ink);
  outline-offset: -3px;
  background: var(--efd-tint);
}

.efd-faq__q-text {
  font-family: var(--efd-font-text);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--efd-primary);
}

/* --- the plus, which rotates into a close mark ----------------------- */

.efd-faq__mark {
  position: relative;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--efd-faq-ink);
  transition: transform 0.32s cubic-bezier(0.65, 0, 0.35, 1);
}

.efd-faq__mark-bar {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--efd-surface);
  transform: translate(-50%, -50%);
}

.efd-faq__mark-bar:first-child { width: 10px; height: 2px; }
.efd-faq__mark-bar:last-child  { width: 2px;  height: 10px; }

.efd-faq__item[open] .efd-faq__mark { transform: rotate(135deg); }

/* --- the answer ------------------------------------------------------ */

.efd-faq__a-inner {
  padding: 0 26px 17px;
  max-width: 64ch;
}

.efd-faq .efd-faq__a-inner > :first-child { margin-top: 0; }
.efd-faq .efd-faq__a-inner > :last-child  { margin-bottom: 0; }

.efd-faq .efd-faq__a-inner p,
.efd-faq .efd-faq__a-inner li {
  font-family: var(--efd-font-text);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--efd-secondary);
}

.efd-faq .efd-faq__a-inner p { margin: 0 0 10px; }
.efd-faq .efd-faq__a-inner ul,
.efd-faq .efd-faq__a-inner ol { margin: 0 0 10px; padding-left: 20px; }

/* Doubled class: the Global Kit styles `.elementor-kit-5 a` at (0,1,1) and
   loads after this file, so a single-class rule here loses the tie and the
   link takes the Kit's colour rather than the area accent. */
.efd-faq.efd-faq .efd-faq__a-inner a {
  color: var(--efd-faq-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.efd-faq.efd-faq .efd-faq__a-inner a:hover,
.efd-faq.efd-faq .efd-faq__a-inner a:focus-visible { color: var(--efd-primary); }

/* --- the open/close animation ---------------------------------------- */

/* `<details>` hides its content with `display: none`, which cannot be
   transitioned. `::details-content` plus `interpolate-size` is what makes a
   height animation possible without script.

   BOTH are required in the test on purpose. If only one were checked, a
   browser with `::details-content` but no `interpolate-size` would apply
   `block-size: 0` and never be able to animate back to `auto` — the answer
   would open to nothing at all. Failing the test leaves the native
   display:none behaviour, which snaps open and is completely correct. */
@supports (interpolate-size: allow-keywords) and (selector(::details-content)) {
  .efd-faq { interpolate-size: allow-keywords; }

  .efd-faq__item::details-content {
    block-size: 0;
    overflow: clip;
    transition:
      block-size 0.32s cubic-bezier(0.65, 0, 0.35, 1),
      content-visibility 0.32s allow-discrete;
  }

  .efd-faq__item[open]::details-content { block-size: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .efd-faq__mark,
  .efd-faq__item::details-content { transition: none; }
}

/* --- narrow ---------------------------------------------------------- */

@media (max-width: 600px) {
  .efd-faq { margin: 20px 0; }
  .efd-faq__head { padding: 19px 18px 15px; }
  .efd-faq .efd-faq__q { padding: 13px 18px; gap: 12px; }
  .efd-faq__a-inner { padding: 0 18px 15px; }
  .efd-faq__q-text { font-size: 15px; }
  .efd-faq__intro { font-size: 14px; }
}