/*
 * MARTA Design System overlay on the existing HTML pages.
 *
 * Source of truth for structure / copy / SEO / IA / JS: the HTML pages.
 * Source of truth for tokens / Marketing UI chrome: docs/design-system.md,
 * docs/component-spec.md, src/styles/tokens.css, and the Figma components.
 *
 * This file restyles existing classes. It does not rebuild pages from Figma
 * Website / Chi siamo / Landing frames.
 *
 * Applied (verified correspondences):
 *   colors → paint styles / brand mode pink
 *   body + headings + body copy → Lexend type scale
 *   heading color → brand --color-900 (Pink/900); Regular weight
 *   Source Sans 3 (legacy prototype body font; not in Figma) → Lexend
 *   named containers → --layout-container-width 1220
 *   copy containers → --layout-copy-width 800
 *   Button → Contained / Outline Large Light|Dark
 *   Navbar Light Variant2 chrome (white bar, 96px, logo 203×40, CTA buttons)
 *   Dropdown Navbar panel fill / radius / padding / type (content stays the IA)
 *   Input Field chrome on .form_input
 *   Checkbox 20×20 on native privacy checkboxes
 *
 * NOT applied (would break IA or is NOT DEFINED in Figma):
 *   Navbar 3-item IA (Piattaforma / Soluzioni / Risorse)
 *   Navbar padding-inline 112px (measured for the 3-item 1440 artboard)
 *   Dropdown Navbar fixed 431×98 / 499×232 (would clip existing menus)
 *   Dropdown Navbar Figma lorem items
 *   Button hover / focus / disabled
 *   Input focus / error / textarea-as-component
 *   Footer as a new DS component
 *   New breakpoints (existing @media kept)
 */

@import url("/src/styles/tokens.css");

/* -------------------------------------------------------------------------- */
/* Prototype aliases → verified tokens                                         */
/* vinaccia-800 hex was already Pink/900. greyscale-100/200/800 had no exact    */
/* paint-style match; nearest verified paints are used.                        */
/* -------------------------------------------------------------------------- */

:root {
  --vinaccia-100: var(--color-pink-100);
  --vinaccia-500: var(--color-pink-500);
  --vinaccia-800: var(--color-pink-900);
  --blue-100: var(--color-blue-100);
  --blue-500: var(--color-blue-500);
  --blue-800: var(--color-blue-800);
  --softy-100: var(--color-softy-100);
  --softy-500: var(--color-softy-500);
  --greyscale-50: var(--color-gray-100);
  --greyscale-100: var(--color-gray-100);
  --greyscale-200: var(--color-gray-200);
  --greyscale-800: var(--color-standard-black);
  --full-white: var(--color-standard-white);
}

/* -------------------------------------------------------------------------- */
/* Typography                                                                  */
/* -------------------------------------------------------------------------- */

html {
  -webkit-font-smoothing: antialiased;
}

/* body[data-brand] beats page `body { font-family: "Source Sans 3" }`
   and Webflow .body-3, even when those rules load after this file. */
html,
body,
body.body-3,
body[data-brand],
body[data-brand].body-3 {
  font-family: var(--font-family-lexend);
}

body,
body.body-3,
body[data-brand] {
  color: var(--color-gray-900);
  background: var(--color-standard-white);
}

h1,
h2,
h3,
h4,
h5,
h6,
.heading-style-h1,
.heading-style-h2,
.heading-style-h3,
.hero__title,
.text-inline,
.proto-banner,
.skip-link,
.text-rich-text,
.richtext-paragraph {
  font-family: var(--font-family-lexend);
}

.heading-style-h1,
h1,
.hero__title {
  font-size: var(--text-title-large-size);
  line-height: var(--text-title-large-line-height);
  letter-spacing: var(--text-title-large-letter-spacing);
  font-weight: var(--font-weight-regular);
}

.hero__title strong,
h1 strong {
  font-weight: var(--font-weight-semibold);
}

.heading-style-h2,
h2,
.text-inline {
  font-size: var(--text-title-medium-size);
  line-height: var(--text-title-medium-line-height);
  letter-spacing: var(--text-title-medium-letter-spacing);
  font-weight: var(--font-weight-regular);
}

.heading-style-h3,
h3 {
  font-size: var(--text-title-small-size);
  line-height: var(--text-title-small-line-height);
  letter-spacing: var(--text-title-small-letter-spacing);
  font-weight: var(--font-weight-regular);
}

h3.text-size-large,
.text-size-large {
  font-size: var(--text-title-xsmall-size);
  line-height: var(--text-title-xsmall-line-height-regular);
  letter-spacing: var(--text-title-xsmall-letter-spacing);
  font-weight: var(--font-weight-semibold);
}

.text-size-regular,
.hero__sub,
p {
  font-family: var(--font-family-lexend);
  font-size: var(--text-body-medium-size);
  line-height: var(--text-body-medium-line-height);
  letter-spacing: var(--text-body-medium-letter-spacing);
}

/* Heading color / weight: Pink mode 900 + Title Regular.
   body[data-brand] beats page `.tech-hero h1 { color:#141c24; font-weight:700 }`
   (same 0,1,1 specificity, this file loads last).
   Font-size stays on the rules above so `.heading-style-h3` (Title small)
   still wins over `h1` (Title large) on product heroes. */
body[data-brand] h1,
body[data-brand] h2,
body[data-brand] h3,
body[data-brand] h4,
body[data-brand] .heading-style-h1,
body[data-brand] .heading-style-h2,
body[data-brand] .heading-style-h3,
body[data-brand] .hero__title,
body[data-brand] .text-inline,
body[data-brand] .section-h,
body[data-brand] .section-h2,
body[data-brand] .section-heading {
  color: var(--color-900);
  font-weight: var(--font-weight-regular);
}

body[data-brand] .text-size-regular,
body[data-brand] .hero__sub {
  color: var(--color-gray-900);
}

body[data-brand] .text-style-label,
body[data-brand] .hero__label {
  color: var(--color-500);
}

body[data-brand] .text-style-label.is-black {
  color: var(--color-gray-900);
}

/* Dark bands: keep white. More specific than the heading color rule. */
body[data-brand] .text-color-white,
body[data-brand] .text-color-white h1,
body[data-brand] .text-color-white h2,
body[data-brand] .text-color-white h3,
body[data-brand] h1.text-color-white,
body[data-brand] h2.text-color-white,
body[data-brand] h3.text-color-white,
body[data-brand] .heading-style-h3.text-color-white,
body[data-brand] .text-size-regular.text-color-white,
body[data-brand] .text-style-label.is-white,
body[data-brand] .cta-section h1,
body[data-brand] .cta-section h2,
body[data-brand] .cta-section h3,
body[data-brand] .cta-form h1,
body[data-brand] .cta-form h2,
body[data-brand] .cta-form h3,
body[data-brand] .cta-form__copy h2,
body[data-brand] .r-section--dark h1,
body[data-brand] .r-section--dark h2,
body[data-brand] .r-section--dark h3,
body[data-brand] .r-section--dark .section-h,
body[data-brand] .r-section--dark2 h1,
body[data-brand] .r-section--dark2 h2,
body[data-brand] .r-section--dark2 h3,
body[data-brand] .cs-hero h1,
body[data-brand] .cs-hero h2,
body[data-brand] .cs-hero h3,
body[data-brand] .comp-card.is-dark h3,
body[data-brand] .comp-card.is-pink h3,
body[data-brand] .mkt-stack-card[data-tone="pink"] .mkt-stack-card__title,
body[data-brand] .mkt-stack-card[data-tone="pink"] .mkt-stack-card__body,
body[data-brand] .mkt-stack-card[data-tone="blue"] .mkt-stack-card__title,
body[data-brand] .mkt-stack-card[data-tone="blue"] .mkt-stack-card__body,
body[data-brand] .mkt-stack-card[data-tone="violet"] .mkt-stack-card__title,
body[data-brand] .mkt-stack-card[data-tone="violet"] .mkt-stack-card__body {
  color: var(--color-standard-white);
}

body[data-brand] .mkt-stack-card[data-tone="pink-soft"] .mkt-stack-card__title,
body[data-brand] .mkt-stack-card[data-tone="violet-soft"] .mkt-stack-card__title,
body[data-brand] .mkt-stack-card:not([data-tone]) .mkt-stack-card__title {
  color: var(--color-gray-800);
}

/* Stack card compact width — IMPLEMENTATION DECISION, not a Figma token.
   !important: page CSS (e.g. Gamification .container-small { max-width: 80rem })
   and cached sheets were leaving cards at full column width (~1060px). */
body[data-brand] .mkt-stack {
  width: min(100%, 730px) !important;
  max-width: 730px !important;
  margin-inline: auto;
}

body[data-brand] .mkt-stack-card {
  max-width: 730px !important;
}

body[data-brand] .proto-banner {
  background: var(--color-100);
  color: var(--color-900);
  font-family: var(--font-family-lexend);
  text-align: center;
  padding: var(--space-8) var(--space-16);
  font-size: var(--text-body-small-size);
  line-height: var(--text-body-small-line-height);
}

input,
textarea,
select {
  font-family: var(--font-family-lexend);
}

.text-size-small,
.text-style-label,
.hero__label,
.stats-bar__label {
  font-size: var(--text-body-small-size);
  line-height: var(--text-body-small-line-height);
  letter-spacing: var(--text-body-small-letter-spacing);
  font-family: var(--font-family-lexend);
}

.stats-bar__value {
  font-family: var(--font-family-lexend);
  font-size: var(--text-title-xsmall-size);
  line-height: var(--text-title-xsmall-line-height-regular);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--text-title-xsmall-letter-spacing);
}

/* -------------------------------------------------------------------------- */
/* Containers                                                                  */
/* -------------------------------------------------------------------------- */

.container-large,
.stats-bar__inner,
.filter-bar__inner,
.cta-form__inner,
.components-section__inner,
.deep-grid-section__inner {
  max-width: var(--layout-container-width);
}

.container-small {
  max-width: var(--layout-copy-width);
}

.padding-global {
  padding-inline: var(--space-32);
}

h1,
h2,
h3,
.hero__title,
.heading-style-h3,
.text-inline {
  overflow-wrap: break-word;
}

/* -------------------------------------------------------------------------- */
/* Button — map Webflow .button to Marketing UI Button Large                   */
/* Contained Dark on light surfaces; Contained Light (.is-white) on dark.     */
/* Hover / focus / disabled are not in Figma and are not added.                */
/* -------------------------------------------------------------------------- */

body[data-brand] .button,
body[data-brand] .button.w-button {
  appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  border: 0;
  gap: var(--button-gap);
  height: var(--button-height-lg);
  padding-block: var(--button-padding-block-lg);
  padding-inline: var(--button-padding-inline-lg);
  border-radius: var(--button-radius);
  background: var(--color-900);
  background-color: var(--color-900);
  color: var(--color-standard-white);
  box-shadow: none;
  font-family: var(--font-family-lexend);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-body-medium-size);
  line-height: var(--text-body-medium-line-height);
  letter-spacing: var(--text-body-medium-letter-spacing);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

body[data-brand] .button.is-primary,
body[data-brand] .button.is-primary.w-button {
  background: var(--color-900);
  background-color: var(--color-900);
  color: var(--color-standard-white);
  box-shadow: none;
}

body[data-brand] .button.is-primary.is-white,
body[data-brand] .button.is-white {
  background: var(--color-100);
  background-color: var(--color-100);
  color: var(--color-900);
  box-shadow: none;
}

body[data-brand] .button.is-secondary,
body[data-brand] .button.is-secondary-black {
  background: transparent;
  background-color: transparent;
  color: var(--color-900);
  box-shadow: 0 0 0 2px var(--color-900);
}

body[data-brand] .button.is-secondary.is-white {
  background: transparent;
  background-color: transparent;
  color: var(--color-100);
  box-shadow: 0 0 0 2px var(--color-100);
}

body[data-brand] .button.is-form-submit {
  width: 100%;
}

/* -------------------------------------------------------------------------- */
/* Navbar Light — Variant2 chrome on the existing 6-group IA                   */
/* -------------------------------------------------------------------------- */

.proto-nav.proto-nav--v2 {
  height: auto;
  min-height: var(--navbar-height);
  background: var(--navbar-fill-variant2);
  border-bottom: 1px solid var(--color-gray-200);
  font-family: var(--font-family-lexend);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.proto-nav--v2 .proto-nav__inner {
  box-sizing: border-box;
  max-width: var(--layout-artboard-width);
  height: var(--navbar-height);
  padding-block: var(--navbar-padding-block);
  padding-inline: var(--space-32);
  gap: var(--space-16);
}

.proto-nav--v2 .proto-nav__logo-link {
  flex: 0 0 auto;
  height: var(--navbar-logo-height);
}

.proto-nav--v2 .proto-nav__logo-link img {
  display: block;
  width: auto;
  height: var(--navbar-logo-height);
  object-fit: contain;
  object-position: left center;
  /* Existing CDN asset is a white glyph; Variant2 bar is white. */
  filter: brightness(0);
}

.proto-nav--v2 .proto-nav__list {
  gap: var(--space-16);
}

/* Text Medium Dark: Large 12/16 padding is the 3-item Figma navbar and
   overflows this 6-group IA. Medium is a verified Button size. */
.proto-nav--v2 .proto-nav__trigger {
  box-sizing: border-box;
  height: var(--button-height-md);
  padding-block: var(--button-padding-block-md);
  padding-inline: var(--space-8);
  border-radius: var(--button-radius);
  background: transparent;
  color: var(--color-900);
  font-family: var(--font-family-lexend);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-body-medium-size);
  line-height: var(--text-body-medium-line-height);
  letter-spacing: var(--text-body-medium-letter-spacing);
}

.proto-nav--v2 .proto-nav__trigger svg {
  box-sizing: border-box;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  overflow: hidden;
}

.proto-nav--v2 .proto-nav__actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--navbar-link-group-gap);
  height: var(--button-height-md);
}

.proto-nav--v2 .proto-nav__actions .button,
.proto-nav--v2 .proto-nav__actions .button.w-button {
  height: var(--button-height-md);
  padding-block: var(--button-padding-block-md);
  padding-inline: var(--button-padding-inline-md);
}

.filter-bar {
  top: var(--navbar-height);
}

/* -------------------------------------------------------------------------- */
/* Dropdown Navbar visuals on existing mega-nav panels                         */
/* Content, URLs, and hover-open behavior stay as in the HTML.                 */
/* Fixed Simple/Details sizes are not applied (they would clip the IA).        */
/* -------------------------------------------------------------------------- */

.proto-nav--v2 .proto-nav__dropdown {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--dropdown-navbar-gap);
  min-width: var(--dropdown-navbar-simple-width);
  padding: var(--dropdown-navbar-padding);
  border-radius: var(--dropdown-navbar-radius);
  background: var(--dropdown-navbar-fill);
  border: 0;
  box-shadow: var(--shadow-xsmall), inset 0 0 0 1px var(--color-gray-100);
}

.proto-nav--v2 .proto-nav__dropdown-list {
  display: flex;
  flex-direction: column;
  gap: var(--dropdown-navbar-gap);
}

.proto-nav--v2 .proto-nav__dropdown-link {
  align-items: flex-start;
  gap: var(--space-8);
  padding: 0;
  border-radius: 0;
  color: #181d27;
  font-family: var(--font-family-lexend);
}

.proto-nav--v2 .proto-nav__dropdown-link > span:not(.proto-nav__dd-icon) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  min-width: 0;
}

.proto-nav--v2 .proto-nav__dropdown-link br {
  display: none;
}

.proto-nav--v2 .proto-nav__dropdown-link strong {
  display: block;
  margin: 0;
  font-size: var(--text-body-small-size);
  line-height: var(--text-body-small-line-height);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--text-body-small-letter-spacing);
}

.proto-nav--v2 .proto-nav__dropdown-link small {
  display: block;
  margin: 0;
  font-size: var(--text-body-xsmall-size);
  line-height: var(--text-body-xsmall-line-height-regular);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--text-body-xsmall-letter-spacing);
  color: var(--color-gray-500);
}

.proto-nav--v2 .proto-nav__dd-icon {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  overflow: hidden;
  border-radius: var(--radius-8);
  background: var(--color-gray-100);
  font-size: 20px;
  line-height: 20px;
}

.proto-nav--v2 .proto-nav__dd-icon img,
.proto-nav--v2 .proto-nav__dd-icon svg {
  display: block;
  width: 20px;
  height: 20px;
}

/* -------------------------------------------------------------------------- */
/* Input Field chrome on existing .form_input                                  */
/* Width 240 is the Figma sample; page forms keep their column width.          */
/* Textarea is not in the Input Field set: chrome only, height unchanged.      */
/* -------------------------------------------------------------------------- */

.form_field-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
}

.form_label {
  margin: 0;
  color: var(--color-gray-900);
  font-family: var(--font-family-lexend);
  font-size: var(--text-body-small-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--text-body-small-line-height);
  letter-spacing: var(--text-body-small-letter-spacing);
}

.cta-form .form_label,
.cta-form__form .form_label {
  color: var(--color-softy-100);
}

.form_input.w-input,
.form_input {
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  height: 36px;
  margin: 0;
  padding: 8px 8px 8px 12px;
  border: 0;
  border-radius: var(--radius-8);
  background: rgb(255 255 255 / 0.4);
  box-shadow: inset 0 0 0 1px var(--color-gray-400);
  color: var(--color-gray-900);
  caret-color: var(--color-gray-900);
  font-family: var(--font-family-lexend);
  font-size: var(--text-body-small-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--text-body-small-line-height);
  letter-spacing: var(--text-body-small-letter-spacing);
}

.form_input::placeholder {
  color: var(--color-gray-500);
  opacity: 1;
}

.form-row input::placeholder,
.form-row textarea::placeholder {
  color: var(--color-gray-500);
  opacity: 1;
}

.form_input.is-text-area,
textarea.form_input {
  height: auto;
  min-height: calc(36px * 3);
  resize: vertical;
}

.form-row input,
.form-row select,
.form-row textarea {
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  height: 36px;
  margin: 0;
  padding: 8px 8px 8px 12px;
  border: 0;
  border-radius: var(--radius-8);
  background: rgb(255 255 255 / 0.4);
  box-shadow: inset 0 0 0 1px var(--color-gray-400);
  color: var(--color-gray-900);
  font-family: var(--font-family-lexend);
  font-size: var(--text-body-small-size);
  line-height: var(--text-body-small-line-height);
}

.form-row textarea {
  height: auto;
  min-height: calc(36px * 3);
}

/* Hover is a verified Input Field variant. Stroke is Gray/500 (not Blue/500). */
.form_input:hover {
  box-shadow:
    inset 0 0 0 1px var(--color-gray-500),
    0 2px 4px -2px rgb(10 13 18 / 0.06);
}

/* -------------------------------------------------------------------------- */
/* Checkbox — native privacy inputs → 20×20 set                                */
/* -------------------------------------------------------------------------- */

.w-checkbox input[type="checkbox"],
form label input[type="checkbox"],
.form-2 input[type="checkbox"] {
  appearance: none;
  box-sizing: border-box;
  display: inline-block;
  flex: 0 0 var(--checkbox-size);
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--checkbox-radius);
  background-color: var(--color-standard-white);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--checkbox-size) var(--checkbox-size);
  box-shadow: inset 0 0 0 var(--checkbox-stroke-width) var(--color-gray-200);
}

.w-checkbox input[type="checkbox"]:checked,
form label input[type="checkbox"]:checked,
.form-2 input[type="checkbox"]:checked {
  background-color: var(--color-blue-500);
  background-image: url("/src/components/checkbox/assets/check.svg");
  box-shadow: none;
}

/* -------------------------------------------------------------------------- */
/* Page bands that already used verified paints                                */
/* -------------------------------------------------------------------------- */

.section-list {
  background: var(--color-pink-100);
}

.section-list .list-item_wrapper {
  background: var(--color-standard-white) !important;
  border-color: var(--color-gray-200) !important;
  border-radius: var(--radius-24) !important;
}

.section-list .list-item_wrapper::before {
  background-color: var(--color-gray-900);
  border-radius: var(--radius-8);
}

.home_promo-card.is-first,
.home_promo-card:not(.is-second-new) {
  background-color: var(--color-pink-900) !important;
}

.home_promo-card.is-second-new {
  background-color: var(--color-standard-white) !important;
  border-color: var(--color-gray-200) !important;
}

/* Off-screen until keyboard focus, same pattern as blog.css. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  background: var(--color-pink-900);
  color: var(--color-standard-white);
  font-family: var(--font-family-lexend);
  font-size: var(--text-body-small-size);
  line-height: var(--text-body-small-line-height);
}

.skip-link:focus {
  left: 0;
}

/* -------------------------------------------------------------------------- */
/* EXISTING WEBFLOW breakpoints (991 / 767 / 479). Not Figma tokens.           */
/* ds-apply loads last and was pinning desktop padding / type / nowrap,        */
/* which blocked the live-site stacking. Restore those Webflow values.         */
/* -------------------------------------------------------------------------- */

@media (max-width: 991px) {
  .grid-2-col {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }

  body[data-brand] .button,
  body[data-brand] .button.w-button {
    white-space: normal;
    height: auto;
    min-height: var(--button-height-lg);
  }

  /* Webflow .is-ai sets height 32.2rem + aspect-ratio 1, which forces
     a ~515px width on small screens. Keep 1:1 but cap to the column. */
  .text-image-section_wrapper,
  .text-image-section_wrapper.is-ai,
  .new-marta-hero-image_box,
  .feature-mock {
    max-width: 100%;
  }

  .text-image-section_wrapper.is-ai {
    height: auto;
    aspect-ratio: 1;
  }

  .proto-nav--v2 .proto-nav__menu {
    display: none;
  }

  .proto-nav--v2 .proto-nav__inner {
    padding-inline: var(--space-16);
  }
}

@media (max-width: 767px) {
  .padding-global {
    padding-inline: 1.25rem; /* Webflow .padding-global at 767px */
  }

  .container-large {
    max-width: none; /* Webflow .container-large at 767px */
  }

  h1,
  .hero__title {
    font-size: var(--text-title-medium-size);
    line-height: var(--text-title-medium-line-height);
    letter-spacing: var(--text-title-medium-letter-spacing);
  }

  h2,
  .text-inline,
  .section-h,
  .section-h2,
  .section-heading {
    font-size: var(--text-title-small-size);
    line-height: var(--text-title-small-line-height);
    letter-spacing: var(--text-title-small-letter-spacing);
  }
}

@media (max-width: 479px) {
  .padding-global {
    padding-inline: var(--space-16); /* Webflow .padding-global at 479px */
  }
}

/* Heroicons outline (MIT) replacing page/nav emoji. Not a published DS component. */
img.mkt-heroicon {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
  object-fit: contain;
  flex-shrink: 0;
}

.mkt-dropdown-navbar__icon img.mkt-heroicon {
  display: block;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  vertical-align: top;
}

/* <img> SVGs paint currentColor as black. Invert on dark / brand wells. */
.arch-node__icon.dark .mkt-heroicon,
.arch-node__icon.pink .mkt-heroicon,
.arch-node__icon.blue .mkt-heroicon,
.arch-node__icon.teal .mkt-heroicon,
.arch-node__icon.amber .mkt-heroicon,
.arch-node__icon[style*="linear-gradient"] .mkt-heroicon {
  filter: brightness(0) invert(1);
}

/* Hero top gap. Webflow uses 9rem plus 2rem on the title wrapper. */
.padding-vertical.padding-huge.is-hero {
  padding-top: var(--space-72);
}

.section-hero .marta-hero-text_wrapper-copy {
  padding-top: 0;
}

/* Case study hero: .grid-1-col is two columns above 991px and this hero has one cell, so the block sits in the left half. */
.section-hero .grid-1-col:has(.main-image_cell.is-case-study) {
  grid-template-columns: 1fr;
}

.section-hero .main-image_cell.is-case-study > .text-align-center {
  width: 100%;
}

@media (max-width: 479px) {
  .padding-vertical.padding-huge.is-hero {
    padding-top: var(--space-32);
  }
}