/* ============================================================================
   EPIEME HOME — features section (07-features-grid).

   The one section on the homepage with its own authored layout. The vendor
   bento grid was replaced with a warm, editorial 2×2 card layout: a serif
   headline, a text card paired with a product panel on a soft gradient, and
   two photo cards with copy and a pill link beneath. Every class here is
   prefixed `fx-`; the section still sits inside the vendor page shell
   (`.padding-global` / `.container-large`) so it aligns with its neighbours.

   Colour: warm cream surfaces so the section reads as its own band between
   the white case-study section and the deep-green exports section, with the
   page's deep-green ink and teal accent carried through the buttons, chips
   and the panel gradient. Values are scoped as `--fx-*` custom properties so
   they can be retuned in one place.
   ============================================================================ */

.fx-section {
  --fx-ink: #1d2a24;
  --fx-ink-soft: #5d6a63;
  --fx-cream: #f7f4ef;
  --fx-cream-deep: #f1ece5;
  --fx-cream-edge: #e9e2d8;
  --fx-green: #0b1c15;
  --fx-teal: #00896e;
  --fx-radius: 1.75rem;
  --fx-radius-panel: 1rem;
  --fx-serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia,
    "Times New Roman", serif;

  /* Override the vendor's dark bento styling on the same section element. */
  border-top: 1px solid var(--fx-cream-edge);
  border-top-left-radius: var(--_layout---border-radius--border-radius-regular);
  border-top-right-radius: var(--_layout---border-radius--border-radius-regular);
  background-color: var(--fx-cream);
  color: var(--fx-ink);
  contain-intrinsic-size: auto 1360px;
}

.fx-section .container-large {
  border-left-color: var(--fx-cream-edge);
  border-right-color: var(--fx-cream-edge);
}

.fx-component {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding: var(--_layout---global--section-padding)
    var(--_layout---global--container-inner-padding);
}

/* -------------------------------------------------------------- header --- */
/* The header uses the vendor section-header pattern (tag, h2, support line)
   so it matches every other section on the page; only its width is set here. */
.fx-header {
  max-width: 44rem;
}

/* ---------------------------------------------------------------- grid --- */
.fx-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.25rem;
}

.fx-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--fx-radius);
  background-color: var(--fx-cream-deep);
}

.fx-card--text {
  grid-column: span 5;
  min-height: 24rem;
}

.fx-card--visual {
  grid-column: span 7;
  min-height: 24rem;
}

.fx-card--media {
  grid-column: span 6;
}

.fx-card_body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 2rem 2rem 2.25rem;
}

.fx-card--text .fx-card_body {
  padding: 2.5rem 2.25rem;
}

.fx-card_title {
  margin: 0;
  font-family: var(--fx-serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.15rem + 0.9vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--fx-ink);
}

.fx-card_text {
  margin: 0;
  max-width: 34ch;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--fx-ink-soft);
}

/* Pill link — the reference's small dark button with an arrow. */
.fx-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.55rem 0.95rem 0.55rem 1.05rem;
  border-radius: 999px;
  background-color: var(--fx-green);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.fx-button:hover {
  background-color: var(--fx-teal);
  transform: translateY(-1px);
}

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

.fx-button_arrow {
  display: inline-flex;
  transition: transform 0.18s ease;
}

.fx-button:hover .fx-button_arrow {
  transform: translateX(2px);
}

/* ------------------------------------------------------- visual (feed) --- */
.fx-card--gradient {
  justify-content: center;
  padding: 2.25rem 0 2.25rem 2.5rem;
  background-color: #dcece4;
  background-image:
    radial-gradient(60% 70% at 18% 20%, #f6ecc4 0%, rgba(246, 236, 196, 0) 70%),
    radial-gradient(55% 60% at 88% 12%, #7fd0bb 0%, rgba(127, 208, 187, 0) 70%),
    radial-gradient(70% 70% at 70% 100%, #c7e6d8 0%, rgba(199, 230, 216, 0) 75%),
    linear-gradient(160deg, #e9f2ec 0%, #cfe6da 55%, #b9dccb 100%);
}

.fx-panel {
  background-color: #fff;
  border-radius: var(--fx-radius-panel);
  box-shadow:
    0 1px 2px rgba(11, 28, 21, 0.06),
    0 18px 40px -18px rgba(11, 28, 21, 0.28);
  color: var(--fx-ink);
  font-size: 0.8125rem;
  line-height: 1.35;
}

.fx-panel--feed {
  width: min(100%, 30rem);
  margin-left: auto;
  padding: 1.1rem 1.25rem 0.9rem;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.fx-panel_tabs {
  display: flex;
  gap: 0.375rem;
  margin-bottom: 0.75rem;
}

.fx-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid #e2e8e4;
  border-radius: 999px;
  background-color: #fff;
  color: var(--fx-ink-soft);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
}

.fx-chip.is-active {
  border-color: var(--fx-green);
  background-color: var(--fx-green);
  color: #fff;
}

.fx-feed {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fx-feed_row {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-top: 1px solid #edf1ee;
}

.fx-feed_row:first-child {
  border-top: 0;
}

.fx-feed_row.is-faded {
  opacity: 0.45;
}

.fx-feed_score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.6rem;
  border-radius: 0.45rem;
  background-color: #e6f4ee;
  color: #00694f;
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.fx-feed_main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.1rem;
}

.fx-feed_id {
  white-space: nowrap;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fx-ink-soft);
}

.fx-feed_title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 500;
}

.fx-feed_stage {
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background-color: #f2f5f3;
  color: var(--fx-ink-soft);
  font-size: 0.6875rem;
  font-weight: 500;
  white-space: nowrap;
}

.fx-panel_foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.5rem;
  padding-top: 0.6rem;
  border-top: 1px solid #edf1ee;
  color: var(--fx-ink-soft);
  font-size: 0.6875rem;
}

/* ---------------------------------------------------------- media cards --- */
.fx-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: #d9e2dc;
}

.fx-media_image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fx-media--blur .fx-media_image {
  transform: scale(1.15);
  filter: blur(16px) saturate(1.2);
}

/* Tint the blur onto the brand green so it reads as a surface, not a smear. */
.fx-media--blur::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 60% at 80% 15%, rgba(143, 211, 188, 0.55), rgba(143, 211, 188, 0) 70%),
    linear-gradient(180deg, rgba(0, 137, 110, 0.35), rgba(11, 28, 21, 0.55));
}

/* Timeline panel floating over the capitol photo. */
.fx-panel--timeline {
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 1.5rem;
  padding: 0.9rem 1rem 1rem;
}

.fx-timeline_head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.fx-timeline_title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 500;
}

.fx-timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.fx-timeline_step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-top: 0.9rem;
}

/* Connector line between stage dots. */
.fx-timeline_step::before {
  content: "";
  position: absolute;
  top: 0.3rem;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #e2e8e4;
}

.fx-timeline_step.is-done::before,
.fx-timeline_step.is-current::before {
  background-color: var(--fx-teal);
}

.fx-timeline_dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  border: 2px solid #e2e8e4;
  background-color: #fff;
}

.fx-timeline_step.is-done .fx-timeline_dot {
  border-color: var(--fx-teal);
  background-color: var(--fx-teal);
}

.fx-timeline_step.is-current .fx-timeline_dot {
  border-color: var(--fx-teal);
  box-shadow: 0 0 0 3px rgba(0, 137, 110, 0.18);
}

.fx-timeline_label {
  font-size: 0.75rem;
  font-weight: 600;
}

.fx-timeline_step:not(.is-done):not(.is-current) .fx-timeline_label {
  color: var(--fx-ink-soft);
  font-weight: 500;
}

.fx-timeline_date {
  color: var(--fx-ink-soft);
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
}

/* Chat-style bubbles over the blurred photo (committee & sponsors). */
.fx-bubbles {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.5rem 1.75rem;
}

.fx-bubble {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: min(100%, 19rem);
  padding: 0.85rem 1rem;
  border-radius: 1rem;
  background-color: #fff;
  box-shadow:
    0 1px 2px rgba(11, 28, 21, 0.06),
    0 14px 30px -16px rgba(11, 28, 21, 0.35);
  color: var(--fx-ink);
  font-size: 0.8125rem;
  line-height: 1.35;
}

.fx-bubble--ask {
  align-self: flex-start;
  border-top-left-radius: 0.375rem;
}

.fx-bubble--answer {
  align-self: flex-end;
  border-top-right-radius: 0.375rem;
}

.fx-bubble_kicker {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fx-ink-soft);
}

.fx-bubble_text {
  font-weight: 500;
}

.fx-bubble_meta,
.fx-bubble_source {
  color: var(--fx-ink-soft);
  font-size: 0.75rem;
}

.fx-bubble_source {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.15rem;
  color: var(--fx-teal);
  font-weight: 500;
}

.fx-bubble_tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.fx-tag {
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background-color: #e6f4ee;
  color: #00694f;
  font-size: 0.75rem;
  font-weight: 600;
}

/* ------------------------------------------------- secondary feature row --- */
.fx-minor {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 0.5rem 0 0;
  padding: 2rem 0 0;
  border-top: 1px solid var(--fx-cream-edge);
  list-style: none;
}

.fx-minor_item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.fx-minor_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 0.25rem;
  border-radius: 0.75rem;
  background-color: var(--fx-cream-deep);
  color: var(--fx-green);
}

.fx-minor_title {
  font-family: var(--fx-serif);
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--fx-ink);
}

.fx-minor_text {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--fx-ink-soft);
}

/* ------------------------------------------------------------ responsive --- */
@media (max-width: 991px) {
  .fx-card--text,
  .fx-card--visual,
  .fx-card--media {
    grid-column: span 12;
  }

  .fx-card--text {
    min-height: 0;
  }

  .fx-card--visual {
    min-height: 22rem;
  }

  .fx-minor {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .fx-component {
    gap: 2rem;
  }

  .fx-grid {
    gap: 1rem;
  }

  .fx-card {
    border-radius: 1.25rem;
  }

  .fx-card_body,
  .fx-card--text .fx-card_body {
    padding: 1.5rem 1.375rem 1.75rem;
  }

  .fx-card--gradient {
    padding: 1.5rem 0 1.5rem 1.25rem;
  }

  .fx-card--visual {
    min-height: 0;
  }

  .fx-feed_stage {
    display: none;
  }

  .fx-panel--timeline {
    left: 0.875rem;
    right: 0.875rem;
    bottom: 0.875rem;
    padding: 0.75rem 0.75rem 0.85rem;
  }

  .fx-timeline_label {
    font-size: 0.625rem;
    letter-spacing: -0.01em;
  }

  .fx-timeline_date {
    display: none;
  }

  .fx-bubbles {
    padding: 1rem;
  }
}

@media (max-width: 479px) {
  .fx-minor {
    grid-template-columns: minmax(0, 1fr);
  }

  .fx-media {
    aspect-ratio: 1 / 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fx-button,
  .fx-button_arrow {
    transition: none;
  }
}

/* ============================================================================
   COMPARE SECTION (10-compare) — surface treatment only.

   The vendor comparison UX stays exactly as built (the scrolling list of
   manual tasks, the "vs", the Epieme card, the two buttons). These rules only
   restyle its surfaces to the same editorial language as the features
   section: a left-aligned serif headline with a plain subtitle, hairline
   cards with softer radii, muted chips instead of neon ones, and pill
   buttons. Every selector is scoped to .section_compare.
   ============================================================================ */

.section_compare {
  --cmp-ink: #1d2a24;
  --cmp-ink-soft: #5d6a63;
  --cmp-line: #e6ebe8;
  --cmp-tile: #f4f7f5;
  --cmp-green: #0b1c15;
  --cmp-teal: #00896e;
  --cmp-mint: #d7f1e6;
  --cmp-serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia,
    "Times New Roman", serif;

  background-color: #fff;
  color: var(--cmp-ink);
}

/* Header: drop the eyebrow tag, left-align, serif title, plain subtitle. */
.section_compare .section-header_component {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  align-items: flex-start;
  text-align: left;
}

.section_compare .section-heading_tag-wrap {
  display: none;
}

.section_compare .section-header_heading-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;
  text-align: left;
}

.section_compare .heading-style-h2.display-inline {
  display: block;
  max-width: 24ch;
  font-family: var(--cmp-serif);
  font-weight: 400;
  font-size: clamp(1.875rem, 1.3rem + 1.6vw, 2.625rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--cmp-ink);
  text-wrap: balance;
}

.section_compare .heading-support {
  display: block;
  max-width: 32rem;
  opacity: 1;
  font-family: var(--_typography---font-family--font-family-primary);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--cmp-ink-soft);
}

/* Two labelled columns, top-aligned. */
.section_compare .compare_content {
  gap: 2.5rem;
  align-items: flex-start;
}

.section_compare .compare_col {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  width: 23rem;
}

.section_compare .compare_col-label {
  padding-left: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--cmp-ink-soft);
}

/* Competitor list: hairline cards, softer radius. */

.section_compare .compare_competitor-mask {
  width: 100%;
  max-height: 27rem;
  justify-content: flex-start;
}

/* The vendor script drives the scroll with an inline transform; a CSS
   animation outranks inline styles in the cascade, so this takes over the
   motion: same speed, but it pauses on hover/focus and stops entirely for
   people who asked for reduced motion (WCAG 2.2.2). home-nav.js measures the
   list and sets --cmp-travel / --cmp-duration. */
.section_compare .compare_competitor-track {
  animation: cmp-scroll var(--cmp-duration, 40s) linear infinite;
  will-change: transform;
}

.section_compare .compare_competitor-mask:hover .compare_competitor-track,
.section_compare .compare_competitor-mask:focus-within .compare_competitor-track {
  animation-play-state: paused;
}

@keyframes cmp-scroll {
  from { transform: translateY(0); }
  to { transform: translateY(calc(-1 * var(--cmp-travel, 0px))); }
}

.section_compare .compare_competitor-item {
  gap: 0;
  width: 100%;
  min-height: 3.5rem;
  justify-content: center;
  padding: 0.75rem 0.875rem;
  border-color: var(--cmp-line);
  border-radius: 0.875rem;
  box-shadow: 0 1px 2px rgba(11, 28, 21, 0.04);
}

.section_compare .compare_competitor-top-left {
  gap: 0.75rem;
}

.section_compare .compare_competitor-logo-wrap {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 0.625rem;
  background-color: var(--cmp-tile);
  color: var(--cmp-ink);
}

.section_compare .compare_competitor-logo {
  width: 1rem;
  height: 1rem;
}

.section_compare .compare_competitor-item .heading-style-h5 {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--cmp-ink);
}

.section_compare .compare_competitor_top-right {
  display: none;
}

.section_compare .compare_competitor-bottom {
  display: none;
}

.section_compare .tertiary-fade-out {
  background-image: linear-gradient(180deg, #fff, rgba(255, 255, 255, 0));
}

/* "vs": quiet, centred between the two columns. */
.section_compare .compare_content > .heading-style-h1 {
  align-self: center;
  flex-shrink: 0;
  font-family: var(--cmp-serif);
  font-weight: 400;
  font-style: italic;
  font-size: 1.25rem;
  letter-spacing: 0;
  color: #9aa49e;
}

/* Epieme panel: the same row-card grammar as the left column, mirrored, so
   each manual task lines up with its answer. Tinted surface, no border, no
   shadow; white rows inside. */
.section_compare .compare_provet {
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem;
  border: 0;
  border-radius: 1.25rem;
  background-color: var(--cmp-tile);
  box-shadow: none;
}

.section_compare .compare_provet-top,
.section_compare .compare_provet .horizontal-dashed-line {
  display: none;
}

.section_compare .compare_provet .features-split_checklist-list {
  gap: 0.5rem;
}

.section_compare .checklist_item {
  align-items: center;
  gap: 0.75rem;
  min-height: 3.5rem;
  padding: 0.75rem 0.875rem;
  border-radius: 0.875rem;
  background-color: #fff;
}

/* Icon tile: the same monochrome glyph as the matching row on the left. */
.section_compare .checklist_icon {
  top: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  background-color: var(--cmp-tile);
  color: var(--cmp-ink);
}

.section_compare .checklist_icon-svg {
  width: 1rem;
  height: 1rem;
}

.section_compare .checklist_paragraph-wrapper {
  flex: 1 1 auto;
  min-width: 0;
}

.section_compare .checklist_paragraph-wrapper p {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--cmp-ink);
}

.section_compare .compare_provet-bottom {
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.5rem 0.625rem 0.375rem;
}

.section_compare .compare_provet-bottom .text-color-secondary {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--cmp-ink-soft);
}

.section_compare .compare_provet-bottom .text-color-secondary em {
  font-style: normal;
}

.section_compare .compare_provet-bottom .heading-style-h2 {
  font-family: var(--_typography---font-family--font-family-primary);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0;
  color: var(--cmp-ink);
}

/* Buttons as pills: mint primary, hairline secondary. */
.section_compare .button-group .button {
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--cmp-mint);
  border-radius: 999px;
  background-color: var(--cmp-mint);
  background-image: none;
  box-shadow: none;
  color: var(--cmp-green);
  font-size: 0.9375rem;
  font-weight: 600;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.section_compare .button-group .button:hover {
  border-color: var(--cmp-green);
  background-color: var(--cmp-green);
  color: #fff;
}

.section_compare .button-group .button.is-secondary {
  border-color: var(--cmp-line);
  background-color: #fff;
  color: var(--cmp-ink);
}

.section_compare .button-group .button.is-secondary:hover {
  border-color: var(--cmp-ink);
  background-color: #fff;
  color: var(--cmp-ink);
}

@media (max-width: 767px) {
  .section_compare .compare_content {
    gap: 1.5rem;
  }

  .section_compare .compare_col {
    width: 100%;
    max-width: 23rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section_compare .compare_competitor-track {
    animation: none;
    transform: none !important;
  }

  .section_compare .compare_competitor-mask {
    max-height: none;
  }

  .section_compare .compare_competitor-list[data-clone],
  .section_compare .tertiary-fade-out {
    display: none;
  }
}