/* Marketomize — shared design system + health page. Generated; edit src/. */
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--mkt-page, #FAFBFF); }

/* ============================================================================
   Marketomize — homepage design system
   Every rule is scoped under `.mkt` because this markup is injected into a
   WordPress page and must not leak into (or be clobbered by) theme/Elementor CSS.
   Source of truth: "Marketomize Home.dc.html" (claude.ai/design project
   6be3e54e-bee5-4ccc-a0ea-48f9c8a10c47). The mockup had zero media queries —
   all responsive behaviour below is added here.
   ========================================================================== */

.mkt {
  /* brand */
  --mkt-blue: #2A46DB;
  --mkt-blue-deep: #1E33A8;
  --mkt-blue-light: #5C77FF;
  --mkt-green: #75FB91;
  --mkt-green-ink: #1E6B3E;
  --mkt-navy: #0A0E27;
  --mkt-navy-deep: #070B1F;
  --mkt-gold: #F0B429;

  /* text */
  --mkt-body: #4E5573;
  --mkt-body-strong: #2B3150;
  --mkt-muted: #6B7292;

  /* surfaces */
  --mkt-page: #FAFBFF;
  --mkt-tint: #F1F5FF;
  --mkt-tint-2: #EEF2FF;
  --mkt-hairline: rgba(10, 14, 39, 0.07);
  --mkt-hairline-2: rgba(10, 14, 39, 0.12);

  /* shape */
  --mkt-r-card: 16px;
  --mkt-r-lg: 22px;
  --mkt-r-xl: 26px;
  --mkt-pill: 999px;
  --mkt-shadow: 0 8px 24px rgba(15, 17, 21, 0.08);
  --mkt-shadow-blue: 0 10px 26px rgba(42, 70, 219, 0.32);

  /* layout */
  --mkt-max: 1240px;
  --mkt-gutter: 32px;
  --mkt-section: clamp(64px, 8vw, 104px);

  /* fallbacks for the two brand photos — replaced by real images when the
     files are uploaded (see scripts/upload-media.mjs) */
  --mkt-img-rower: linear-gradient(150deg, #1E33A8 0%, #2A46DB 45%, #5C77FF 100%);
  --mkt-img-mountain: linear-gradient(115deg, #070B1F 0%, #16224F 55%, #2A46DB 100%);

  box-sizing: border-box;
  color: var(--mkt-navy);
  background: var(--mkt-page);
  font-family: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

.mkt *,
.mkt *::before,
.mkt *::after { box-sizing: border-box; }

/* The reset is wrapped in :where() so it carries ZERO specificity. Without it
   `.mkt p {margin:0}` (0,1,1) silently beats every component rule like
   `.mkt-hero__lead {margin-top:24px}` (0,1,0), and `.mkt a {color:blue}` beats
   `.mkt-btn--primary {color:#fff}` — which renders blue text on a blue button. */
:where(.mkt) :is(h1, h2, h3, h4, p, figure, ul, ol, dl, dd, blockquote) {
  margin: 0;
  padding: 0;
}
:where(.mkt) :is(ul, ol) { list-style: none; }
:where(.mkt) :is(img, svg) { display: block; max-width: 100%; }
:where(.mkt) img { height: auto; }
:where(.mkt) a { color: var(--mkt-blue); text-decoration: none; }
:where(.mkt) a:hover { color: var(--mkt-blue-deep); }
.mkt ::selection { background: var(--mkt-green); color: var(--mkt-navy); }

.mkt :focus-visible {
  outline: 3px solid var(--mkt-blue);
  outline-offset: 3px;
  border-radius: 6px;
}
.mkt--on-dark :focus-visible,
.mkt-dark :focus-visible { outline-color: var(--mkt-green); }

/* ============================================================================
   THEME-PROOFING — measured against the live finxpert theme, 2026-08-10.

   `.mkt` sets font-family and color once and lets them INHERIT. That works in a
   bare document, but the theme styles bare elements directly (`h1`, `svg`,
   `blockquote`, `input`), and a direct rule always wins over an inherited value
   no matter how specific the ancestor's rule is. It is not a specificity contest
   — inheritance simply never applies once any rule matches the element.

   Symptoms this block fixes, all confirmed by computed style on the deployed
   page: every h1/h2/h3 rendered in Montserrat 700 at #494949 grey instead of
   Poppins navy; outline icons filled solid because the theme sets `fill` and a
   `fill="none"` presentation attribute loses to any CSS rule; a gold themify
   quote glyph stacked on top of the review stars; and 15px of theme margin under
   every input, on top of the flex `gap`, inflating the contact form.

   Only properties the component classes do NOT set are re-asserted here. Do not
   add font-weight or font-size — `.mkt h3` (0,1,1) would then outrank
   `.mkt-h3` (0,1,0) and flatten the type scale.
   ========================================================================== */
/* font-family is safe at (0,1,1): no component class sets it on a heading. */
.mkt h1, .mkt h2, .mkt h3, .mkt h4, .mkt h5, .mkt h6 { font-family: inherit; }

/* color is NOT safe at (0,1,1) — it would outrank component rules like
   `.mkt-phase__name {color:#fff}` (0,1,0) and paint headings on dark panels
   navy-on-navy. `:where()` pins this at (0,1) exactly: it still beats the
   theme's bare `h1{...}` (same specificity, and this stylesheet is emitted
   after the theme's), while any component class keeps winning. */
:where(.mkt) :is(h1, h2, h3, h4, h5, h6) { color: inherit; }

/* Keep icons drawn as outlines. Scoped to SVGs that ask for it themselves, so
   filled marks (the logo, the review stars) are untouched. */
.mkt svg[fill="none"],
.mkt svg[fill="none"] * { fill: none; }

/* The theme decorates every blockquote with a themify quote glyph, absolutely
   positioned — it landed on top of the star rating in the reviews strip. */
.mkt blockquote::before,
.mkt blockquote::after { content: none; }

/* Form controls carry a theme margin-bottom that stacks on top of our flex gap.
   Spacing in this design comes from `gap` alone. */
.mkt :is(input, select, textarea, button) { margin-bottom: 0; }

/* CF7 runs wpautop over its template, so it can still emit stray <p> wrappers
   whatever the markup looks like. The reset that would flatten them is inside
   :where() at zero specificity, so the theme's paragraph margin wins and adds
   ~30px under the submit button. Scoped tightly: widening this to `.mkt p`
   would outrank every component margin (gotcha 4). */
.mkt .wpcf7-form p { margin: 0; }

/* Each CF7 field is wrapped so wpautop has no loose inline content to wrap.
   The wrappers are the flex items, so `gap` alone sets the rhythm. */
.mkt-field { display: block; position: relative; }
.mkt-field > .wpcf7-form-control-wrap { display: block; }

/* CF7's submit spinner is an inline-block sibling of the button. With a
   full-width button it wrapped onto its own line and silently added ~31px under
   every submit. Taken out of flow and parked inside the button instead — it is
   only ever visible mid-submit. */
.mkt .wpcf7-spinner {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}

/* --- helpers -------------------------------------------------------------- */
.mkt-wrap {
  width: 100%;
  max-width: var(--mkt-max);
  margin-inline: auto;
  padding-inline: var(--mkt-gutter);
}
.mkt-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.mkt-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  padding: 12px 20px; border-radius: 0 0 12px 0;
  background: var(--mkt-navy); color: #fff; font-weight: 600;
}
.mkt-skip:focus { left: 0; color: #fff; }

/* --- typography ----------------------------------------------------------- */
.mkt-eyebrow {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--mkt-blue);
}
.mkt-eyebrow--green { color: var(--mkt-green); }

.mkt-h1 {
  margin-top: 26px;
  font-size: clamp(34px, 5.4vw, 66px);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.036em;
  text-wrap: balance;
}
.mkt-h2 {
  margin-top: 16px;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.036em;
  text-wrap: balance;
}
.mkt-h2--sm { font-size: clamp(26px, 3.1vw, 38px); line-height: 1.14; }
.mkt-h2--lg { font-size: clamp(30px, 3.9vw, 46px); line-height: 1.08; }
.mkt-h3 {
  font-size: 19px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.026em;
}
.mkt-lead {
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.62;
  font-weight: 300;
  color: var(--mkt-body);
  text-wrap: pretty;
}
.mkt-p {
  font-size: 14px;
  line-height: 1.62;
  font-weight: 300;
  color: var(--mkt-body);
  text-wrap: pretty;
}

/* highlighted word in the H1 */
.mkt-mark { position: relative; white-space: nowrap; }
.mkt-mark > span { position: relative; z-index: 1; }
.mkt-mark::after {
  content: "";
  position: absolute; left: -2px; right: -2px; bottom: 0.12em;
  height: 0.22em;
  background: var(--mkt-green);
  opacity: 0.55;
  border-radius: 3px;
}

/* --- buttons -------------------------------------------------------------- */
.mkt-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 26px;
  border: 1px solid transparent;
  border-radius: var(--mkt-pill);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-align: left;
  transition: transform 150ms ease-out, box-shadow 150ms ease-out, background-color 150ms ease-out;
}
.mkt-btn svg { flex: none; }
.mkt-btn:hover { transform: translateY(-2px); }

.mkt-btn--primary { background: var(--mkt-blue); color: #fff; box-shadow: var(--mkt-shadow-blue); }
.mkt-btn--primary:hover { color: #fff; box-shadow: 0 16px 34px rgba(42, 70, 219, 0.4); }

.mkt-btn--ghost {
  background: rgba(255, 255, 255, 0.8);
  color: var(--mkt-navy);
  border-color: var(--mkt-hairline-2);
  font-weight: 500;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.mkt-btn--ghost:hover { background: #fff; color: var(--mkt-navy); }

.mkt-btn--outline {
  background: #fff;
  color: var(--mkt-navy);
  border-color: var(--mkt-hairline-2);
  font-weight: 500;
  font-size: 14px;
  padding: 14px 22px;
}
.mkt-btn--outline:hover { color: var(--mkt-navy); box-shadow: var(--mkt-shadow); }

.mkt-btn--dark { background: var(--mkt-navy); color: #fff; font-size: 14.5px; }
.mkt-btn--dark:hover { color: #fff; }

.mkt-btn--green {
  width: 100%;
  justify-content: center;
  background: var(--mkt-green);
  color: var(--mkt-navy);
  font-size: 14.5px;
}
.mkt-btn--green:hover { background: #5cf07c; color: var(--mkt-navy); }

.mkt-btn--sm { padding: 13px 20px; font-size: 13.5px; }

/* CF7 renders its submit as a real <input type="submit">, and the finxpert theme
   styles that element with a rule that outranks a bare class: the green button
   came out gold (#d6b25e) with a lopsided `0 30px 30px 0` radius and forced
   uppercase. These re-assert the design at (0,2,1) so the element selector no
   longer wins. Keep the attribute selector — dropping it silently restores the
   theme's gold pill. */
.mkt input[type="submit"].mkt-btn {
  border-radius: var(--mkt-pill);
  border: 1px solid transparent;
  text-transform: none;
  letter-spacing: normal;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  padding: 16px 26px;
  height: auto;
  width: auto;
}
.mkt input[type="submit"].mkt-btn--green {
  width: 100%;
  background: var(--mkt-green);
  color: var(--mkt-navy);
  font-size: 14.5px;
}
.mkt input[type="submit"].mkt-btn--green:hover { background: #5cf07c; color: var(--mkt-navy); }

.mkt-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--mkt-blue);
}
.mkt-link:hover { color: var(--mkt-blue-deep); text-decoration: underline; }

/* --- pills / badges ------------------------------------------------------- */
.mkt-tag {
  display: inline-block;
  padding: 6px 12px;
  border-radius: var(--mkt-pill);
  font-size: 11.5px;
  font-weight: 500;
  background: #F4F5F9;
  color: var(--mkt-body);
}
.mkt-tag--blue { background: var(--mkt-tint-2); color: var(--mkt-blue); font-weight: 600; }
.mkt-tag--green { background: rgba(117, 251, 145, 0.18); color: #0f5a2c; font-weight: 600; }

/* --- glass panel ---------------------------------------------------------- */
.mkt-glass {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(18px) saturate(1.8);
  backdrop-filter: blur(18px) saturate(1.8);
  box-shadow: 0 18px 44px rgba(15, 32, 120, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.mkt-glass::before {
  content: "";
  position: absolute; inset: 0;
  /* inherit the radius so the sheen is clipped by its own corners — this is why
     .mkt-header__bar can safely drop overflow:hidden and let the mobile nav
     sheet escape the pill */
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 38%);
  pointer-events: none;
}
.mkt-glass > * { position: relative; }

.mkt-glass--dark {
  background: rgba(20, 26, 54, 0.45);
  border-color: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.mkt-glass--dark::before {
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 38%);
}

/* --- card ----------------------------------------------------------------- */
.mkt-card {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border-radius: var(--mkt-r-card);
  background: #fff;
  border: 1px solid var(--mkt-hairline);
  transition: transform 150ms ease-out, box-shadow 150ms ease-out;
}
.mkt-card:hover { transform: translateY(-2px); box-shadow: var(--mkt-shadow); }
a.mkt-card { color: var(--mkt-navy); }
a.mkt-card:hover { color: var(--mkt-navy); }

/* ============================================================================
   HEADER
   ========================================================================== */
.mkt-header {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: 14px 0;
}
/* Published for anything else that sticks to the top of the viewport — the
   /servicii/ filter bar parks below the header instead of sliding under it.
   Measured, not guessed: the pill's height is content-driven. Keep in sync if
   the logo, the CTA button or the 14px padding above ever change. */
.mkt { --mkt-header-h: 92px; }
@media (max-width: 900px) { .mkt { --mkt-header-h: 94px; } }
.mkt-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 10px 14px 10px 22px;
  border-radius: var(--mkt-pill);
  overflow: visible; /* the mobile nav sheet is absolutely positioned below it */
}
.mkt-logo { display: flex; align-items: center; }
.mkt-logo svg { width: 150px; height: auto; }
.mkt-logo__mark { fill: var(--mkt-blue); }
.mkt-logo__word { fill: var(--mkt-navy); }

.mkt-nav { display: flex; align-items: center; gap: 28px; }
.mkt-nav__list { display: flex; align-items: center; gap: 28px; }
.mkt-nav__link {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.9px;
  color: var(--mkt-body);
}
.mkt-nav__link:hover { color: var(--mkt-navy); }

/* Current section. Marked with a dot rather than an underline: the links are
   uppercase 12px with letter-spacing, and an underline at that size collides
   with the descenders. */
.mkt-nav__link { position: relative; }
.mkt-nav__link--active { color: var(--mkt-navy); }
/* Absolutely positioned, not a flex item: SERVICII is an inline-flex link with
   a caret inside it, so a laid-out dot lands beside the caret instead of under
   the word. */
.mkt-nav__link--active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  translate: -50% 0;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--mkt-blue);
}

/* --- Servicii submenu ------------------------------------------------------
   Pure CSS: :hover for pointers, :focus-within for keyboards. No JavaScript —
   LiteSpeed defers inline JS until the first interaction, and a stray ampersand
   in home.js has killed the whole script once before (gotcha 9 in CLAUDE.md).
   Navigation must survive that.
   On touch at desktop widths there is no hover, but tapping SERVICII just goes
   to /servicii/, which lists the same four categories. Nothing is unreachable. */
.mkt-nav__has-sub { position: relative; }
.mkt-nav__has-sub > .mkt-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.mkt-nav__caret { flex: none; transition: transform 150ms ease-out; }
.mkt-nav__has-sub:hover .mkt-nav__caret,
.mkt-nav__has-sub:focus-within .mkt-nav__caret { transform: rotate(180deg); }

/* The wrapper carries only position + the 12px hover bridge, so the pointer can
   travel from the link into the panel without crossing dead space. The panel
   look lives on .mkt-sub__panel. */
.mkt-sub {
  position: absolute;
  top: 100%;
  left: 50%;
  translate: -50% 0;
  padding-top: 12px;
  min-width: 296px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 150ms ease-out, transform 150ms ease-out, visibility 150ms;
}
.mkt-nav__has-sub:hover > .mkt-sub,
.mkt-nav__has-sub:focus-within > .mkt-sub {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.mkt-sub__panel {
  padding: 8px;
  background: #fff;
  border: 1px solid var(--mkt-hairline);
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(15, 32, 120, 0.16);
}
.mkt-sub__list { display: block; }
.mkt-sub__list a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 12px;
  color: var(--mkt-navy);
}
.mkt-sub__list a:hover { background: var(--mkt-tint-2); color: var(--mkt-navy); }
.mkt-sub__num {
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--mkt-blue);
  letter-spacing: 0.5px;
}
.mkt-sub__name { font-size: 14px; font-weight: 500; letter-spacing: 0; }
.mkt-sub__from {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--mkt-muted);
  white-space: nowrap;
  letter-spacing: 0;
}
.mkt-sub__faq {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  padding: 11px 12px;
  border-top: 1px solid var(--mkt-hairline);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--mkt-blue);
}
.mkt-sub__faq:hover { color: var(--mkt-blue-deep); }

.mkt-header__actions { display: flex; align-items: center; gap: 10px; }
.mkt-tel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--mkt-navy);
  padding: 9px 14px;
  border-radius: var(--mkt-pill);
  border: 1px solid rgba(10, 14, 39, 0.1);
  white-space: nowrap;
}
.mkt-tel:hover { background: rgba(255, 255, 255, 0.9); color: var(--mkt-navy); }
.mkt-header__cta { padding: 12px 20px; font-size: 13px; }

/* The bars used to be drawn with a 18x12 <span> plus ::before/::after. The theme
   collapsed that span to width:0, so the button rendered as an empty pill with an
   invisible icon — and it picked up the theme's gold button fill on top. Two
   plain SVGs instead: they carry their own width/height attributes, so there is
   nothing for a stray `width:auto` to collapse. The element selectors below beat
   the theme's own `button {...}` rule. */
/* `display` MUST stay on the bare class at (0,1,0): the mobile media query flips
   it to inline-flex with the same specificity, and anything stronger here would
   pin the button hidden on phones. Everything the theme fights over lives in the
   (0,2,0) rule below. */
.mkt-burger {
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.mkt-header .mkt-burger {
  width: 44px; height: 44px;
  min-width: 44px; min-height: 44px;
  padding: 0;
  border: 1px solid rgba(10, 14, 39, 0.1);
  border-radius: var(--mkt-pill);
  background: rgba(255, 255, 255, 0.9);
  color: var(--mkt-navy);
  box-shadow: none;
}
.mkt-header .mkt-burger:hover { background: #fff; color: var(--mkt-navy); }
.mkt-burger__icon { width: 22px; height: 22px; flex: none; }
.mkt-burger__icon--close { display: none; }
.mkt-burger[aria-expanded="true"] .mkt-burger__icon--open { display: none; }
.mkt-burger[aria-expanded="true"] .mkt-burger__icon--close { display: block; }

/* ============================================================================
   HERO
   ========================================================================== */
.mkt-hero {
  position: relative;
  padding: clamp(48px, 6vw, 76px) 0 clamp(64px, 8vw, 96px);
  background: linear-gradient(180deg, #FAFBFF 0%, #EEF3FF 58%, #E4ECFF 100%);
  overflow: hidden;
}
.mkt-hero__blob,
.mkt-hero__grid { position: absolute; pointer-events: none; }
.mkt-hero__blob--a {
  top: -120px; left: -80px; width: 420px; height: 420px;
  border-radius: 46% 54% 50% 50% / 52% 48% 52% 48%;
  background: linear-gradient(135deg, #7C97FF, var(--mkt-blue));
  opacity: 0.16; filter: blur(6px);
}
.mkt-hero__blob--b {
  top: 180px; right: -60px; width: 320px; height: 320px; border-radius: 50%;
  background: linear-gradient(135deg, var(--mkt-green), #A9CCE3);
  opacity: 0.22; filter: blur(4px);
}
.mkt-hero__grid {
  inset: 0;
  background-image:
    linear-gradient(rgba(10, 14, 39, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 14, 39, 0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 40%, transparent 100%);
  mask-image: radial-gradient(70% 60% at 50% 40%, #000 40%, transparent 100%);
}
.mkt-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.mkt-hero__copy { animation: mkt-rise 500ms cubic-bezier(.32, .72, 0, 1) both; }

.mkt-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 12px;
  border-radius: var(--mkt-pill);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 20px rgba(15, 32, 120, 0.07);
}
.mkt-badge__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--mkt-green);
  box-shadow: 0 0 0 4px rgba(117, 251, 145, 0.28);
  flex: none;
}
.mkt-badge__text {
  font-size: 11.5px; font-weight: 600; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--mkt-body);
}

.mkt-hero__lead { margin-top: 24px; max-width: 520px; }
.mkt-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

.mkt-rating {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  margin-top: 40px; padding-top: 26px;
  border-top: 1px solid var(--mkt-hairline);
}
.mkt-stars { display: flex; align-items: center; gap: 3px; }
.mkt-stars svg { fill: var(--mkt-gold); }
.mkt-rating__text { font-size: 13.5px; font-weight: 300; color: var(--mkt-body); }

/* --- hero report panel ---------------------------------------------------- */
.mkt-panel {
  position: relative;
  animation: mkt-rise 620ms cubic-bezier(.32, .72, 0, 1) both;
  animation-delay: 90ms;
}
.mkt-panel__shape { position: absolute; pointer-events: none; }
.mkt-panel__shape--a {
  top: -26px; right: -18px; width: 150px; height: 150px;
  border-radius: 42px; transform: rotate(12deg); opacity: 0.85;
  background: linear-gradient(135deg, #8FA6FF, var(--mkt-blue));
}
.mkt-panel__shape--b {
  bottom: -22px; left: -26px; width: 104px; height: 104px; border-radius: 50%;
  background: linear-gradient(135deg, var(--mkt-green), #3FD5A0); opacity: 0.9;
}
.mkt-panel__body { padding: 26px; border-radius: 24px; }
.mkt-panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.mkt-panel__label {
  font-size: 10.5px; font-weight: 600; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--mkt-muted);
}
.mkt-panel__title {
  margin-top: 4px; font-size: 17px; font-weight: 600;
  letter-spacing: -0.024em; color: var(--mkt-navy);
}
.mkt-panel__roi {
  padding: 7px 13px; border-radius: var(--mkt-pill);
  background: rgba(117, 251, 145, 0.28);
  border: 1px solid rgba(51, 160, 90, 0.28);
  font-size: 11.5px; font-weight: 600; color: var(--mkt-green-ink);
  white-space: nowrap;
}
.mkt-kpis {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px;
}
.mkt-kpi {
  padding: 14px; border-radius: 14px; background: #fff;
  border: 1px solid var(--mkt-hairline);
}
.mkt-kpi__label { font-size: 10.5px; font-weight: 500; letter-spacing: 0.4px; color: var(--mkt-muted); }
.mkt-kpi__value {
  margin-top: 6px; font-size: 24px; font-weight: 700;
  letter-spacing: -0.04em; color: var(--mkt-navy);
}
.mkt-kpi__delta { margin-top: 4px; font-size: 11px; font-weight: 500; color: var(--mkt-green-ink); }
.mkt-kpi__delta--flat { color: var(--mkt-muted); }

.mkt-chart {
  margin-top: 12px; padding: 18px; border-radius: var(--mkt-r-card);
  background: var(--mkt-navy); overflow: hidden;
}
.mkt-chart__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.mkt-chart__title { font-size: 11px; font-weight: 500; letter-spacing: 0.6px; color: rgba(255, 255, 255, 0.68); }
.mkt-chart__flag { font-size: 11px; font-weight: 600; color: var(--mkt-green); }
.mkt-chart__bars { display: flex; align-items: flex-end; gap: 8px; height: 92px; margin-top: 16px; }
.mkt-chart__bar { flex: 1; border-radius: 5px; background: rgba(255, 255, 255, 0.16); }
.mkt-chart__axis {
  display: flex; justify-content: space-between; margin-top: 10px;
  font-size: 10px; color: rgba(255, 255, 255, 0.55);
}
.mkt-panel__note {
  display: flex; align-items: center; gap: 9px; margin-top: 14px;
  font-size: 11.5px; font-weight: 300; color: var(--mkt-body);
}
.mkt-panel__note svg { flex: none; }

/* ============================================================================
   DARK STATS STRIP
   ========================================================================== */
.mkt-stats { padding: 34px 0; background: var(--mkt-navy); }
.mkt-stats__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.mkt-stat { display: flex; flex-direction: column; gap: 6px; }
.mkt-stat + .mkt-stat { padding-left: 28px; border-left: 1px solid rgba(255, 255, 255, 0.12); }
.mkt-stat__value { font-size: clamp(26px, 2.6vw, 32px); font-weight: 700; letter-spacing: -0.038em; color: #fff; }
.mkt-stat__label { font-size: 12.5px; font-weight: 300; line-height: 1.5; color: rgba(255, 255, 255, 0.68); }

/* ============================================================================
   SECTION SHELLS
   ========================================================================== */
.mkt-section { padding: var(--mkt-section) 0; background: var(--mkt-page); }
.mkt-section--flush-top { padding-top: 0; }
.mkt-section--tint { background: linear-gradient(180deg, #F5F8FF 0%, #FAFBFF 100%); }
.mkt-section--soft { background: var(--mkt-tint); }
.mkt-section--dark { position: relative; background: var(--mkt-navy); overflow: hidden; }

.mkt-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 48px; flex-wrap: wrap;
}
.mkt-head__text { max-width: 640px; }
.mkt-head--center { display: block; text-align: center; max-width: 660px; margin-inline: auto; }

/* ============================================================================
   PAIN CARDS
   ========================================================================== */
.mkt-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 44px; }
.mkt-pain__top { display: flex; align-items: center; justify-content: space-between; }
.mkt-icon {
  width: 42px; height: 42px; border-radius: 12px; background: var(--mkt-tint-2);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.mkt-pain__num { font-size: 12px; font-weight: 600; color: var(--mkt-muted); }
.mkt-pain h3 { margin-top: 22px; }
.mkt-pain p { margin-top: 12px; }
.mkt-pain__link { margin-top: auto; padding-top: 22px; font-size: 13px; font-weight: 600; color: var(--mkt-blue); }
.mkt-pain__link:hover { text-decoration: underline; }

/* ============================================================================
   WHY US
   ========================================================================== */
.mkt-why {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  border-radius: var(--mkt-r-lg);
  overflow: hidden;
  border: 1px solid var(--mkt-hairline);
  background: #fff;
}
.mkt-why__media {
  position: relative;
  min-height: 520px;
  background: var(--mkt-img-rower);
  background-size: cover;
  background-position: center;
}
.mkt-why__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mkt-why__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 14, 39, 0.3) 0%, rgba(10, 14, 39, 0.05) 40%, rgba(10, 14, 39, 0.6) 100%);
}
.mkt-why__quote {
  position: absolute; left: 26px; right: 26px; bottom: 26px;
  padding: 20px 22px; border-radius: 18px;
}
.mkt-why__quote .mkt-eyebrow { font-size: 12px; letter-spacing: 1.3px; }
/* :not() keeps this off the eyebrow. Without it `.mkt-why__quote p` (0,1,1)
   beat `.mkt-eyebrow--green` (0,1,0) and "Arhetipul brandului" rendered white
   instead of green — the same specificity trap as gotcha 4. */
.mkt-why__quote p:not(.mkt-eyebrow) {
  margin-top: 10px; font-size: 16px; line-height: 1.55; font-weight: 300;
  color: rgba(255, 255, 255, 0.94); text-wrap: pretty;
}
.mkt-why__body { padding: clamp(32px, 4vw, 56px) clamp(24px, 3.6vw, 52px); }
.mkt-why__list { margin-top: 36px; }
.mkt-why__row {
  display: grid; grid-template-columns: 118px 1fr; gap: 24px;
  padding: 24px 0; border-top: 1px solid var(--mkt-hairline);
}
.mkt-why__row:last-child { border-bottom: 1px solid var(--mkt-hairline); }
.mkt-why__figure {
  font-size: clamp(28px, 3vw, 34px); font-weight: 700;
  letter-spacing: -0.04em; color: var(--mkt-blue); line-height: 1;
}
.mkt-why__label { font-size: 15.5px; font-weight: 600; color: var(--mkt-navy); }
.mkt-why__row p { margin-top: 8px; }

/* ============================================================================
   METHOD (dark)
   ========================================================================== */
.mkt-method__glow { position: absolute; pointer-events: none; }
.mkt-method__glow--a {
  top: -140px; right: -120px; width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, rgba(42, 70, 219, 0.55) 0%, rgba(42, 70, 219, 0) 70%);
}
.mkt-method__glow--b {
  bottom: -160px; left: -100px; width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(117, 251, 145, 0.22) 0%, rgba(117, 251, 145, 0) 70%);
}
.mkt-method__inner { position: relative; }
.mkt-method__intro { max-width: 720px; }
.mkt-method__intro .mkt-h2 { color: #fff; }
.mkt-method__intro p {
  margin-top: 20px; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6;
  font-weight: 300; color: rgba(255, 255, 255, 0.72); text-wrap: pretty;
}
.mkt-method__cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  margin-top: 52px; align-items: stretch;
}
.mkt-diagram {
  /* the right column (3 phase cards) is taller; centre the SVG in the leftover
     space instead of leaving a block of dead navy at the bottom */
  display: flex; flex-direction: column;
  padding: 32px; border-radius: var(--mkt-r-lg);
  background: rgba(30, 34, 56, 0.5); border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.mkt-diagram__head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.mkt-diagram__title { font-size: 13px; font-weight: 600; letter-spacing: 0.4px; color: rgba(255, 255, 255, 0.92); }
.mkt-diagram__key { display: flex; align-items: center; gap: 14px; font-size: 11px; font-weight: 500; color: rgba(255, 255, 255, 0.62); }
.mkt-diagram__key span { display: flex; align-items: center; gap: 6px; }
.mkt-diagram__swatch { width: 16px; height: 2px; background: rgba(255, 255, 255, 0.35); }
.mkt-diagram__swatch--ok { background: var(--mkt-green); }

.mkt-slider {
  position: relative; margin-top: 24px;
  flex: 1; display: flex; align-items: center;
  cursor: ew-resize; touch-action: none;
  -webkit-user-select: none; user-select: none;
}
.mkt-slider svg { width: 100%; height: auto; }
.mkt-slider__foot {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-top: 8px;
  font-size: 11.5px; color: rgba(255, 255, 255, 0.62);
}
.mkt-slider__foot strong { font-weight: 600; color: rgba(255, 255, 255, 0.9); }
.mkt-slider__hint {
  display: flex; align-items: center; gap: 7px;
  font-size: 10.5px; letter-spacing: 0.6px; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.mkt-slider__out { color: rgba(255, 255, 255, 0.9); font-weight: 500; }

.mkt-steps-dark { display: flex; flex-direction: column; gap: 12px; }
.mkt-phase {
  padding: 24px 26px; border-radius: 18px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);
}
.mkt-phase__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.mkt-phase__name { font-size: 16px; font-weight: 600; color: #fff; }
.mkt-phase__name span { font-weight: 300; color: rgba(255, 255, 255, 0.62); }
/* :not() keeps the body-copy rule off the percentage. `.mkt-phase p` (0,1,1)
   was beating `.mkt-phase__pct` (0,1,0), so 92% / 89% / 95% rendered in muted
   white instead of the brand green. */
.mkt-phase__pct { font-size: 20px; font-weight: 700; letter-spacing: -0.03em; color: var(--mkt-green); }
.mkt-phase p:not(.mkt-phase__pct) {
  margin-top: 8px; font-size: 13.5px; line-height: 1.55; font-weight: 300;
  color: rgba(255, 255, 255, 0.68); text-wrap: pretty;
}
.mkt-meter {
  margin-top: 16px; height: 5px; border-radius: var(--mkt-pill);
  background: rgba(255, 255, 255, 0.1); overflow: hidden;
}
.mkt-meter__fill {
  height: 100%; border-radius: var(--mkt-pill);
  background: linear-gradient(90deg, var(--mkt-blue), var(--mkt-green));
}

/* ============================================================================
   STEPS
   ========================================================================== */
.mkt-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; align-items: stretch; }
.mkt-step { padding: 32px; border-radius: 20px; }
.mkt-step__top { display: flex; align-items: center; gap: 12px; }
.mkt-step__num {
  width: 34px; height: 34px; border-radius: var(--mkt-pill);
  background: var(--mkt-blue); color: #fff; font-size: 13px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.mkt-step__kicker {
  font-size: 11.5px; font-weight: 600; letter-spacing: 1.3px;
  text-transform: uppercase; color: var(--mkt-muted);
}
.mkt-step h3 { margin-top: 22px; font-size: 22px; letter-spacing: -0.032em; }
.mkt-step p { margin-top: 12px; font-size: 14.5px; }
.mkt-step__foot {
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--mkt-hairline);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.mkt-step--dark {
  position: relative; overflow: hidden;
  background: var(--mkt-navy); border-color: rgba(255, 255, 255, 0.1);
}
.mkt-step--dark::after {
  content: ""; position: absolute; top: -60px; right: -50px;
  width: 190px; height: 190px; border-radius: 50%;
  background: radial-gradient(circle, rgba(117, 251, 145, 0.28) 0%, rgba(117, 251, 145, 0) 70%);
  pointer-events: none;
}
.mkt-step--dark > * { position: relative; z-index: 1; }
.mkt-step--dark:hover { box-shadow: none; }
.mkt-step--dark .mkt-step__num { background: var(--mkt-green); color: var(--mkt-navy); font-weight: 700; }
.mkt-step--dark .mkt-step__kicker { color: rgba(255, 255, 255, 0.7); }
.mkt-step--dark h3 { color: #fff; }
.mkt-step--dark p { color: rgba(255, 255, 255, 0.72); }
.mkt-step--dark .mkt-step__foot { border-top-color: rgba(255, 255, 255, 0.12); }
.mkt-step--dark .mkt-tag--green { background: rgba(117, 251, 145, 0.18); color: var(--mkt-green); }

.mkt-steps__cta { display: flex; justify-content: center; margin-top: 40px; }

/* ============================================================================
   CASES
   ========================================================================== */
.mkt-cases { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start; }
.mkt-cases__aside { position: sticky; top: 110px; }
.mkt-cases__aside p { margin-top: 18px; font-size: 16px; line-height: 1.62; font-weight: 300; color: var(--mkt-body); text-wrap: pretty; }
.mkt-cases__aside .mkt-btn { margin-top: 26px; }
.mkt-cases__list { display: flex; flex-direction: column; gap: 12px; }
.mkt-case { display: grid; grid-template-columns: 48px 1fr; gap: 22px; padding: 26px 28px; }
.mkt-case__num { font-size: 13px; font-weight: 600; color: var(--mkt-blue); padding-top: 4px; }
.mkt-case h3 { font-size: 18px; line-height: 1.35; letter-spacing: -0.022em; }
.mkt-case p { margin-top: 10px; font-size: 14.5px; }

/* ============================================================================
   REVIEWS MARQUEE
   ========================================================================== */
.mkt-reviews__viewport {
  margin-top: 44px; overflow: hidden; cursor: grab;
  touch-action: pan-y; -webkit-user-select: none; user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.mkt-reviews__viewport.is-grabbing { cursor: grabbing; }
.mkt-reviews__track {
  display: flex; align-items: stretch; gap: 20px;
  width: max-content; will-change: transform;
}
.mkt-review { flex: 0 0 392px; max-width: 86vw; }
/* the card is the flex column, but the content lives one level down inside the
   <blockquote> — it has to stretch too or `margin-top:auto` on the attribution
   never pins it to the bottom and the cards end up ragged */
.mkt-review blockquote { margin: 0; flex: 1; display: flex; flex-direction: column; }
.mkt-review__text {
  margin-top: 18px; font-size: 15px; line-height: 1.65;
  font-weight: 300; color: var(--mkt-body-strong); text-wrap: pretty;
}
.mkt-review__who {
  display: flex; align-items: center; gap: 12px; margin-top: auto;
  padding-top: 20px; border-top: 1px solid var(--mkt-hairline);
}
.mkt-review__avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600;
}
.mkt-review__name { font-size: 14px; font-weight: 600; color: var(--mkt-navy); }
.mkt-review__src { font-size: 12px; font-weight: 300; color: var(--mkt-muted); }
/* --mkt-muted (#6B7292) only reaches 4.33:1 on the #F1F5FF tint — one notch
   darker to clear WCAG AA for body text */
.mkt-reviews__note { margin-top: 20px; font-size: 12.5px; font-weight: 300; color: #5D6480; }
.mkt-reviews__link { white-space: nowrap; }
.mkt-reviews__score { display: inline-flex; align-items: center; gap: 4px; }
.mkt-reviews__score svg { fill: var(--mkt-gold); }

/* ============================================================================
   BLOG
   ========================================================================== */
.mkt-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.mkt-post {
  display: flex; flex-direction: column; border-radius: 18px; background: #fff;
  border: 1px solid var(--mkt-hairline); overflow: hidden; color: var(--mkt-navy);
  transition: transform 150ms ease-out, box-shadow 150ms ease-out;
}
.mkt-post:hover { transform: translateY(-2px); box-shadow: var(--mkt-shadow); color: var(--mkt-navy); }
.mkt-post__media {
  height: 184px; overflow: hidden;
  background: linear-gradient(135deg, #1E33A8 0%, #2A46DB 55%, #5C77FF 100%);
}
.mkt-post__media img { width: 100%; height: 100%; object-fit: cover; }
.mkt-post__body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.mkt-post__cat {
  font-size: 11px; font-weight: 600; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--mkt-blue);
}
.mkt-post h3 { margin-top: 12px; font-size: 17.5px; line-height: 1.38; letter-spacing: -0.022em; }
.mkt-post__more { margin-top: auto; padding-top: 18px; font-size: 13px; font-weight: 600; color: var(--mkt-blue); }

/* ============================================================================
   CTA + FORM
   ========================================================================== */
.mkt-cta {
  position: relative; border-radius: var(--mkt-r-xl); overflow: hidden;
  min-height: 380px; display: flex; align-items: center;
  background: var(--mkt-img-mountain); background-size: cover; background-position: center;
}
.mkt-cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mkt-cta__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(10, 14, 39, 0.94) 0%, rgba(10, 14, 39, 0.78) 48%, rgba(10, 14, 39, 0.42) 100%);
}
.mkt-cta__inner {
  position: relative; display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: 48px; align-items: center; width: 100%;
  padding: clamp(36px, 5vw, 64px) clamp(24px, 4.5vw, 56px);
}
.mkt-cta__copy .mkt-h2 { color: #fff; }
.mkt-cta__copy p {
  margin-top: 18px; max-width: 460px; font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.6; font-weight: 300; color: rgba(255, 255, 255, 0.8); text-wrap: pretty;
}
.mkt-form { padding: 28px; border-radius: var(--mkt-r-lg); }
/* 28px a side leaves under 270px of field width on a 360px phone — not enough
   for the 300px Turnstile box. Buy the room back. */
@media (max-width: 430px) { .mkt-form { padding: 20px 16px; } }
.mkt-form__title { font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.8); }
.mkt-form__fields { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.mkt-form input[type="text"],
.mkt-form input[type="email"] {
  width: 100%; padding: 14px 16px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff; font-family: inherit; font-size: 14px; font-weight: 300;
}
.mkt-form input::placeholder { color: rgba(255, 255, 255, 0.62); }
.mkt-form input:focus { border-color: var(--mkt-green); background: rgba(255, 255, 255, 0.16); }
.mkt-consent {
  display: flex; align-items: flex-start; gap: 9px; margin-top: 4px;
  font-size: 11.5px; line-height: 1.5; font-weight: 300; color: rgba(255, 255, 255, 0.75);
}
.mkt-consent input { margin-top: 2px; accent-color: var(--mkt-green); flex: none; }
.mkt-consent a { color: var(--mkt-green); text-decoration: underline; }
.mkt-consent a:hover { color: #fff; }
.mkt-form__alt { margin-top: 16px; font-size: 12px; font-weight: 300; line-height: 1.5; color: rgba(255, 255, 255, 0.72); }
.mkt-form__alt a { color: var(--mkt-green); font-weight: 500; }
.mkt-form__alt a:hover { color: #fff; }
/* honeypot — must stay reachable in the DOM but invisible to humans */
.mkt-hp { position: absolute !important; left: -5000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Cloudflare Turnstile. In "Managed" mode the widget usually renders nothing at
   all, so this wrapper must not reserve height — an empty 65px gap above the
   submit button is the failure mode. It collapses when the iframe is absent.
   The iframe is a FIXED 300x65 box. `max-width:100%` only shrinks the frame,
   never its contents, so on a narrow panel the widget came out sliced through
   the Cloudflare wordmark. Scale it down instead, and let the wrapper clip the
   sliver of transform rounding rather than push the page sideways. */
.mkt-turnstile:not(:empty) { margin-top: 0; }
.mkt-turnstile { max-width: 100%; overflow: hidden; }
.mkt-turnstile iframe { max-width: none; }
/* The ladder is measured, not guessed: the field width inside .mkt-form is
   viewport − 88px, so 300px stops fitting just under 400px of viewport. */
@media (max-width: 400px) { .mkt-turnstile { transform: scale(0.90); transform-origin: left center; height: 60px; } }
@media (max-width: 370px) { .mkt-turnstile { transform: scale(0.80); height: 54px; } }
@media (max-width: 340px) { .mkt-turnstile { transform: scale(0.67); height: 46px; } }

/* ============================================================================
   FOOTER
   ========================================================================== */
.mkt-footer { padding: 80px 0 32px; background: var(--mkt-navy-deep); color: #fff; }
.mkt-footer__cols {
  display: grid; grid-template-columns: 1.25fr 0.75fr 0.75fr 1.1fr; gap: 48px;
}
.mkt-footer .mkt-logo__mark { fill: var(--mkt-blue-light); }
.mkt-footer .mkt-logo__word { fill: #fff; }
.mkt-footer__about {
  margin-top: 18px; max-width: 300px; font-size: 14px; line-height: 1.6;
  font-weight: 300; color: rgba(255, 255, 255, 0.68); text-wrap: pretty;
}
.mkt-footer__contact { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; }
.mkt-footer__label {
  font-size: 11px; font-weight: 500; letter-spacing: 0.8px;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.58);
}
.mkt-footer__tel { display: inline-block; margin-top: 4px; font-size: 17px; font-weight: 600; color: #fff; }
.mkt-footer__tel:hover { color: var(--mkt-green); }
.mkt-footer__place { margin-top: 4px; font-size: 14.5px; font-weight: 300; color: rgba(255, 255, 255, 0.85); }
.mkt-footer h2 {
  font-size: 13px; font-weight: 600; letter-spacing: 0.6px;
  text-transform: uppercase; color: #fff;
}
.mkt-footer__list { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.mkt-footer__list a { font-size: 14px; font-weight: 300; color: rgba(255, 255, 255, 0.72); }
.mkt-footer__list a:hover { color: #fff; text-decoration: underline; }
.mkt-footer__news {
  margin-top: 20px; font-size: 14px; line-height: 1.6; font-weight: 300;
  color: rgba(255, 255, 255, 0.72); text-wrap: pretty;
}
.mkt-footer__news strong { font-weight: 600; color: #fff; }
.mkt-news { display: flex; gap: 8px; margin-top: 20px; flex-wrap: wrap; }
/* The mockup had a <button> here, but CF7 emits <input type="submit">. Match on
   the field types instead of the tag: a bare `.mkt-news input` swept the submit
   into the text-field style — translucent panel, black text, flex:1 — so the
   button read as a second empty input. */
.mkt-news input:not([type="submit"]) {
  flex: 1; min-width: 0; padding: 13px 15px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.24);
  color: #fff; font-family: inherit; font-size: 13.5px; font-weight: 300;
}
.mkt-news input::placeholder { color: rgba(255, 255, 255, 0.6); }
.mkt-news input:not([type="submit"]):focus { border-color: var(--mkt-green); }
.mkt-news button,
.mkt-news input[type="submit"] {
  flex: none; width: auto; height: auto;
  padding: 13px 18px; border: none; border-radius: 12px;
  background: var(--mkt-blue); color: #fff; font-family: inherit;
  font-size: 13.5px; font-weight: 600; line-height: 1.2; cursor: pointer;
  text-transform: none; letter-spacing: normal;
  transition: transform 150ms ease-out, background-color 150ms ease-out;
}
.mkt-news button:hover,
.mkt-news input[type="submit"]:hover { transform: translateY(-2px); background: var(--mkt-blue-light); }
.mkt-news__consent { margin-top: 10px; font-size: 11px; line-height: 1.5; color: rgba(255, 255, 255, 0.62); }
.mkt-news__consent a { color: var(--mkt-green); text-decoration: underline; }

.mkt-social { display: flex; gap: 10px; margin-top: 22px; }
.mkt-social a {
  width: 38px; height: 38px; border-radius: var(--mkt-pill);
  border: 1px solid rgba(255, 255, 255, 0.24);
  display: flex; align-items: center; justify-content: center;
}
.mkt-social a:hover { background: rgba(255, 255, 255, 0.1); }
.mkt-social svg { fill: rgba(255, 255, 255, 0.85); }
.mkt-social a:hover svg { fill: #fff; }

.mkt-footer__legal {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-top: 56px; padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 12.5px; font-weight: 300; color: rgba(255, 255, 255, 0.62);
}

/* ============================================================================
   MOTION
   ========================================================================== */
@keyframes mkt-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================================
   RESPONSIVE
   The mockup is desktop-only; everything below is authored for this build.
   ========================================================================== */
@media (max-width: 1180px) {
  .mkt { --mkt-gutter: 24px; }
  .mkt-nav__list { gap: 20px; }
  .mkt-header__bar { gap: 16px; }
  .mkt-tel { display: none; }
}

@media (max-width: 1024px) {
  .mkt-hero__inner { grid-template-columns: 1fr; gap: 44px; }
  .mkt-panel { max-width: 560px; }
  .mkt-panel__shape--a { width: 110px; height: 110px; }
  .mkt-why { grid-template-columns: 1fr; }
  .mkt-why__media { min-height: 340px; }
  .mkt-method__cols { grid-template-columns: 1fr; }
  .mkt-cases { grid-template-columns: 1fr; gap: 36px; }
  .mkt-cases__aside { position: static; }
  .mkt-cta__inner { grid-template-columns: 1fr; gap: 32px; }
  .mkt-footer__cols { grid-template-columns: 1fr 1fr; gap: 40px; }
  .mkt-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .mkt-posts { grid-template-columns: repeat(2, 1fr); }
  .mkt-posts > :last-child { grid-column: 1 / -1; }
  .mkt-post:last-child .mkt-post__media { height: 220px; }
}

/* --- nav collapses to a sheet -------------------------------------------- */
@media (max-width: 900px) {
  .mkt-burger { display: inline-flex; }
  .mkt-header__bar { padding: 10px 10px 10px 18px; }
  .mkt-nav {
    /* containing block is .mkt-header__bar, which already sits inside the
       gutter — so 0 here lines the sheet up with the pill's edges */
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 14px;
    border-radius: 20px;
    /* fully opaque on purpose: a translucent menu sheet sitting over the hero
       headline is unreadable, and backdrop-filter is unreliable when an
       ancestor (.mkt-glass) already has one */
    background: #fff;
    border: 1px solid var(--mkt-hairline);
    box-shadow: 0 18px 44px rgba(15, 32, 120, 0.18);
  }
  /* Closed is the CSS default, not a JS-applied state. home.js sets [hidden] on
     load, but any delay in that script — LiteSpeed Cache defers inline JS until
     the first interaction — used to leave the sheet rendered open across the hero
     on every mobile first paint. Now it starts closed even if the script never
     runs, and :has() opens it from the burger's own aria-expanded. */
  .mkt-nav { display: none; }
  .mkt-header__bar:has(.mkt-burger[aria-expanded="true"]) .mkt-nav { display: flex; }
  .mkt-nav[hidden] { display: none; }
  .mkt-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .mkt-nav__link {
    display: block;
    padding: 14px 12px;
    font-size: 13px;
    border-bottom: 1px solid var(--mkt-hairline);
  }
  /* Inside the sheet the submenu is simply always open — nested, indented, no
     second tap. A collapsible sub-accordion here would need JS, and the whole
     point of the CSS-only menu is that it survives the script dying. */
  .mkt-nav__has-sub > .mkt-nav__link { display: flex; justify-content: space-between; }
  .mkt-nav__caret { display: none; }
  /* In the sheet the links are full-width rows with a hairline under each; a
     dot below the text would sit on that line. Weight carries it instead. */
  .mkt-nav__link--active::after { display: none; }
  .mkt-nav__link--active { font-weight: 700; }
  .mkt-sub {
    position: static;
    translate: none;
    transform: none;
    min-width: 0;
    padding: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: none;
  }
  .mkt-sub__panel {
    padding: 4px 0 4px 12px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--mkt-hairline);
    border-radius: 0;
    box-shadow: none;
  }
  .mkt-sub__list a { padding: 10px 10px; border-radius: 10px; }
  .mkt-sub__faq { margin-top: 2px; padding: 10px; }

  .mkt-header__actions { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 14px; }
  .mkt-tel { display: inline-flex; justify-content: center; }
  .mkt-header__cta { justify-content: center; }
}

@media (max-width: 860px) {
  .mkt-stats__list { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .mkt-stat:nth-child(odd) { padding-left: 0; border-left: none; }
  .mkt-stat:nth-child(3) { padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
  .mkt-stat:nth-child(4) { padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
  .mkt-grid-3 { grid-template-columns: 1fr; }
  .mkt-head { gap: 24px; }
}

@media (max-width: 640px) {
  .mkt { --mkt-gutter: 18px; }
  .mkt-grid-4 { grid-template-columns: 1fr; gap: 14px; margin-top: 32px; }
  .mkt-posts { grid-template-columns: 1fr; margin-top: 32px; }
  .mkt-posts > :last-child { grid-column: auto; }
  .mkt-post:last-child .mkt-post__media { height: 184px; }
  .mkt-kpis { grid-template-columns: 1fr; }
  .mkt-panel__body { padding: 20px; }
  .mkt-panel__head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .mkt-panel__shape--a, .mkt-panel__shape--b { display: none; }
  .mkt-why__row { grid-template-columns: 1fr; gap: 8px; }
  .mkt-why__quote { left: 16px; right: 16px; bottom: 16px; padding: 16px; }
  .mkt-diagram { padding: 22px; }
  .mkt-case { grid-template-columns: 1fr; gap: 8px; padding: 22px; }
  .mkt-case__num { padding-top: 0; }
  .mkt-hero__actions .mkt-btn { flex: 1 1 100%; justify-content: center; }
  .mkt-footer { padding-top: 56px; }
  .mkt-footer__cols { grid-template-columns: 1fr; gap: 32px; }
  .mkt-footer__legal { margin-top: 36px; }
  .mkt-review { flex-basis: 300px; }
  .mkt-stats__list { grid-template-columns: 1fr; }
  .mkt-stat:nth-child(n+2) { padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
  .mkt-steps__cta .mkt-btn { width: 100%; justify-content: center; }
}

/* ============================================================================
   REDUCED MOTION — no auto-scroll, no entrance animation, no hover lift
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .mkt *,
  .mkt *::before,
  .mkt *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .mkt-btn:hover, .mkt-card:hover, .mkt-post:hover { transform: none; }
  .mkt-reviews__viewport { overflow-x: auto; cursor: default; }
  .mkt-reviews__track { transform: none !important; }
}

/* ============================================================================
   PRINT
   ========================================================================== */
@media print {
  .mkt-header, .mkt-social, .mkt-news, .mkt-form, .mkt-skip { display: none !important; }
  .mkt, .mkt-section, .mkt-footer { background: #fff !important; color: #000 !important; }
  .mkt-reviews__track { flex-wrap: wrap; width: auto; transform: none !important; }
}


/* ---- health.marketomize.ro ---- */
/* ==========================================================================
   health.marketomize.ro — page-specific rules.

   Loaded AFTER home.css, so every token here (--mkt-blue, --mkt-green,
   --mkt-navy, --mkt-max, --mkt-section ...) is the main site's. The mock this
   replaces carried its own parallel palette (#2F5DFE / #31D183 / Verdana /
   1440px); none of that survives — the whole point is that the subdomain reads
   as the same site.

   One trap worth naming: --mkt-green (#75FB91) is a bright mint. It is a
   BACKGROUND colour. For green *text* on white always use --mkt-green-ink
   (#1E6B3E), which is what the main site does; #75FB91 on #fff is ~1.5:1 and
   fails contrast outright.
   ========================================================================== */

.mkt-hl-sec { padding-block: var(--mkt-section); }
.mkt-hl-tint { background: var(--mkt-tint); }

/* --- dark sections --------------------------------------------------------
   In home.css `.mkt-dark` is ONLY a focus-outline hook — it paints nothing.
   The main site's dark bands each carry their own background, so a section
   that merely says .mkt-dark renders navy-on-white and the headings vanish.
   This is that missing half, scoped to main so the footer keeps the deeper
   --mkt-navy-deep it sets for itself.

   .mkt sets colour once and lets it inherit, so headings need no rule — but
   .mkt-lead and .mkt-p hard-code --mkt-body and do. */
.mkt-hl main .mkt-dark { background: var(--mkt-navy); color: #fff; }
.mkt-hl main .mkt-dark .mkt-lead { color: rgba(255, 255, 255, 0.82); }
.mkt-hl main .mkt-dark .mkt-p { color: rgba(255, 255, 255, 0.72); }
.mkt-hl main .mkt-dark .mkt-eyebrow { color: var(--mkt-green); }
.mkt-hl main .mkt-dark a:not(.mkt-btn) { color: #fff; }
.mkt-hl .mkt-eyebrow { display: block; margin-bottom: 14px; }
.mkt-hl-sec > .mkt-wrap > .mkt-h2 { margin-bottom: 18px; }

/* Two-column split used by problem / audit / plan / reporting / contact. */
.mkt-hl-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 76px);
  align-items: center;
}
.mkt-hl-two--top { align-items: start; }
@media (max-width: 900px) {
  .mkt-hl-two { grid-template-columns: 1fr; gap: 40px; }
}

/* --- shared CTA cluster --------------------------------------------------- */
.mkt-hl-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-top: 28px;
}
.mkt-hl-tel {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  align-items: baseline;
  font-size: 14px;
  color: var(--mkt-body);
}
.mkt-hl-tel a {
  font-weight: 600;
  font-size: 15px;
  color: var(--mkt-navy);
  border-bottom: 2px solid var(--mkt-green);
  padding-bottom: 1px;
  white-space: nowrap;
}
.mkt-dark .mkt-hl-tel { color: rgba(255, 255, 255, 0.72); }
.mkt-dark .mkt-hl-tel a { color: #fff; }
.mkt-dark .mkt-hl-tel a:hover { color: var(--mkt-green); }

/* --- hero ----------------------------------------------------------------- */
.mkt-hl main .mkt-hl-hero {
  background: var(--mkt-img-mountain);
  padding-block: clamp(56px, 7vw, 92px) clamp(64px, 8vw, 104px);
  overflow: hidden;
}
.mkt-hl-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
@media (max-width: 960px) {
  .mkt-hl-hero__grid { grid-template-columns: 1fr; gap: 48px; }
}
.mkt-hl-hero__lead { max-width: 42ch; margin-top: 20px; }
.mkt-hl-region {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 18px 0 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #fff;
}
.mkt-hl-region::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--mkt-green);
}

/* Photo composition. Two staggered columns, so it reads as a set rather than
   a grid. col2 is nudged down to break the horizon line. */
.mkt-hl-comp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
  position: relative;
  max-width: 560px;
  margin-inline: auto 0;
}
.mkt-hl-comp__col2 { padding-top: 48px; }
.mkt-hl-comp > div { display: grid; gap: 16px; }
.mkt-hl-comp__tag {
  position: absolute;
  left: -12px; top: -16px;
  z-index: 2;
  background: var(--mkt-green);
  color: var(--mkt-navy);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: var(--mkt-pill);
  box-shadow: 0 10px 24px rgba(7, 11, 31, 0.35);
}
.mkt-hl-shot {
  margin: 0;
  position: relative;
  border-radius: var(--mkt-r-card);
  overflow: hidden;
  background: #16224F;
  box-shadow: 0 24px 56px rgba(7, 11, 31, 0.45);
}
.mkt-hl-shot img {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.mkt-hl-shot figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 40px 16px 14px;
  background: linear-gradient(180deg, rgba(7, 11, 31, 0), rgba(7, 11, 31, 0.88));
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  line-height: 1.35;
}
.mkt-hl-shot figcaption::before {
  content: "";
  display: block;
  width: 24px; height: 3px;
  background: var(--mkt-green);
  margin-bottom: 9px;
}
@media (max-width: 960px) { .mkt-hl-comp { max-width: 520px; margin-inline: 0; } .mkt-hl-comp__tag { left: 0; } }
@media (max-width: 480px) {
  .mkt-hl-comp { gap: 10px; }
  .mkt-hl-comp > div { gap: 10px; }
  .mkt-hl-comp__col2 { padding-top: 28px; }
  .mkt-hl-shot figcaption { font-size: 10px; padding: 28px 11px 11px; letter-spacing: 0.8px; }
}

/* --- client logos --------------------------------------------------------- */
.mkt-hl-logos { padding-block: clamp(56px, 6vw, 80px); border-bottom: 1px solid var(--mkt-hairline); }
.mkt-hl-logos__title { text-align: center; max-width: 26ch; margin: 0 auto 40px; }
.mkt-hl-logos__row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(36px, 6vw, 80px);
  flex-wrap: wrap;
}
.mkt-hl-logo {
  height: 54px; width: auto; max-width: 100%;
  display: block;
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter 200ms ease, opacity 200ms ease;
}
.mkt-hl-logo--sq { height: 74px; }
.mkt-hl-logo:hover { filter: none; opacity: 1; }
@media (max-width: 700px) {
  .mkt-hl-logos__row { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 24px; justify-items: center; }
  /* Touch devices never hover, so grey logos would just stay grey forever. */
  .mkt-hl-logo { height: auto; max-height: 52px; max-width: 150px; filter: none; opacity: 1; }
  .mkt-hl-logo--sq { max-height: 70px; }
}

/* --- problem list --------------------------------------------------------- */
.mkt-hl-issues p {
  margin: 0;
  padding: 18px 0;
  border-top: 1px solid var(--mkt-hairline-2);
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.55;
  color: var(--mkt-body-strong);
}
.mkt-hl-issues p:last-child { border-bottom: 1px solid var(--mkt-hairline-2); }
.mkt-hl-issues__q { font-weight: 600; }
.mkt-hl-issues__q em { font-style: normal; color: var(--mkt-green-ink); }

/* --- interrupt band ------------------------------------------------------- */
.mkt-hl-interrupt { padding-block: clamp(72px, 9vw, 128px); }
.mkt-hl-interrupt__h { max-width: 16ch; margin-bottom: 40px; }
.mkt-hl-trail { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0; }
.mkt-hl-trail span {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--mkt-pill);
  padding: 11px 17px;
  white-space: nowrap;
}
.mkt-hl-trail__hi { background: var(--mkt-green); color: var(--mkt-navy) !important; border-color: var(--mkt-green) !important; }
.mkt-hl-trail i {
  display: inline-block;
  width: 40px; height: 2px;
  margin-inline: 6px;
  position: relative;
  background: linear-gradient(90deg, rgba(117, 251, 145, 0.2), var(--mkt-green));
}
.mkt-hl-trail i::after {
  content: "";
  position: absolute; right: -1px; top: -4px;
  border: 5px solid transparent;
  border-left: 7px solid var(--mkt-green);
}
@media (max-width: 640px) {
  .mkt-hl-trail { flex-direction: column; align-items: flex-start; }
  .mkt-hl-trail i {
    width: 2px; height: 26px; margin: 0 0 0 22px;
    background: linear-gradient(180deg, rgba(117, 251, 145, 0.2), var(--mkt-green));
  }
  .mkt-hl-trail i::after { right: -4px; top: auto; bottom: -2px; border: 5px solid transparent; border-top: 7px solid var(--mkt-green); }
}

/* --- research stats ------------------------------------------------------- */
.mkt-hl-research__h { max-width: 20ch; }
.mkt-hl-research__h em { font-style: normal; color: var(--mkt-green-ink); }
.mkt-hl-stats { display: flex; flex-wrap: wrap; gap: 40px clamp(48px, 8vw, 110px); margin-top: 48px; }
.mkt-hl-stats > div { max-width: 280px; }
.mkt-hl-stat {
  display: block;
  font-size: clamp(56px, 7vw, 96px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  color: var(--mkt-navy);
}
.mkt-hl-stat small { font-size: 0.36em; letter-spacing: 0; margin-inline: 0.12em; font-weight: 600; }
.mkt-hl-statlbl {
  display: block;
  margin-top: 12px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--mkt-body);
}
.mkt-hl-concl { margin-top: 52px; padding-top: 32px; border-top: 2px solid var(--mkt-navy); }
.mkt-hl-concl p {
  margin: 0;
  max-width: 24ch;
  font-size: clamp(21px, 2.4vw, 32px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--mkt-navy);
}

/* --- system 01-04 --------------------------------------------------------- */
.mkt-hl-sys {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px clamp(48px, 6vw, 96px);
  margin-top: 44px;
}
@media (max-width: 760px) { .mkt-hl-sys { grid-template-columns: 1fr; gap: 36px; } }
.mkt-hl-sys__n {
  display: block;
  font-size: clamp(36px, 4vw, 54px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--mkt-blue);
  margin-bottom: 12px;
}
.mkt-hl-sys h3 { margin-bottom: 10px; }

/* --- method steps --------------------------------------------------------- */
.mkt-hl-method__lead { max-width: 44ch; margin-bottom: 48px; }
.mkt-hl-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}
/* The rail sits behind the numerals, at the vertical centre of the dot row. */
.mkt-hl-steps::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 9px;
  height: 2px;
  background: linear-gradient(90deg, var(--mkt-green), rgba(117, 251, 145, 0.15));
}
.mkt-hl-steps li { position: relative; padding: 0 28px 0 0; }
.mkt-hl-steps li::before {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--mkt-navy);
  border: 3px solid var(--mkt-green);
  z-index: 1;
}
.mkt-hl-steps__n {
  display: block;
  margin: 44px 0 16px;
  font-size: clamp(44px, 5vw, 68px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  color: rgba(255, 255, 255, 0.28);
}
.mkt-hl-steps p {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(15px, 1.3vw, 17px);
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
}
@media (max-width: 960px) {
  .mkt-hl-steps { grid-template-columns: 1fr; max-width: 560px; }
  .mkt-hl-steps::before { left: 8px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: linear-gradient(180deg, var(--mkt-green), rgba(117, 251, 145, 0.15)); }
  .mkt-hl-steps li { padding: 0 0 36px 40px; }
  .mkt-hl-steps li::before { top: 4px; }
  .mkt-hl-steps__n { margin-top: 0; font-size: 44px; }
}
.mkt-hl-loop {
  margin-top: 48px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.78);
}
.mkt-hl-loop b { color: #fff; }
.mkt-hl-method__end { margin-top: clamp(64px, 8vw, 112px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid rgba(255, 255, 255, 0.16); }
.mkt-hl-method__end h2 { max-width: 16ch; }
.mkt-hl-method__end em { font-style: normal; color: var(--mkt-green); }

/* --- checklists ----------------------------------------------------------- */
.mkt-hl-checks { list-style: none; margin: 26px 0 0; padding: 0; }
.mkt-hl-checks li {
  position: relative;
  padding: 12px 0 12px 28px;
  border-top: 1px solid var(--mkt-hairline-2);
  font-size: clamp(14.5px, 1.2vw, 16px);
  line-height: 1.5;
  color: var(--mkt-body-strong);
}
.mkt-hl-checks li:last-child { border-bottom: 1px solid var(--mkt-hairline-2); }
.mkt-hl-checks li::before {
  content: "";
  position: absolute; left: 2px; top: 18px;
  width: 11px; height: 6px;
  border-left: 2px solid var(--mkt-green-ink);
  border-bottom: 2px solid var(--mkt-green-ink);
  transform: rotate(-45deg);
}
.mkt-dark .mkt-hl-checks li { color: rgba(255, 255, 255, 0.9); border-color: rgba(255, 255, 255, 0.16); }
.mkt-dark .mkt-hl-checks li::before { border-color: var(--mkt-green); }
.mkt-hl-plan__lbl { margin-bottom: 0 !important; }
.mkt-hl-plan { position: relative; }
.mkt-hl-plan::before {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 100%; height: 5px;
  background: linear-gradient(90deg, var(--mkt-green) 0 34%, var(--mkt-blue) 34% 100%);
}

/* --- photos --------------------------------------------------------------- */
.mkt-hl-photo { margin: 0; border-radius: var(--mkt-r-lg); overflow: hidden; box-shadow: var(--mkt-shadow); }
.mkt-hl-photo img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; }
.mkt-dark .mkt-hl-photo { box-shadow: 0 32px 72px rgba(7, 11, 31, 0.5); }

/* --- pricing -------------------------------------------------------------- */
.mkt-hl-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
  margin-top: 44px;
}
@media (max-width: 1000px) { .mkt-hl-plans { grid-template-columns: 1fr; max-width: 540px; } }
.mkt-hl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--mkt-hairline);
  border-radius: var(--mkt-r-lg);
  padding: 32px 28px;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.mkt-hl-card:hover { transform: translateY(-3px); box-shadow: var(--mkt-shadow); }
.mkt-hl main .mkt-hl-card--rec {
  background: var(--mkt-navy);
  border-color: var(--mkt-navy);
  box-shadow: 0 28px 60px rgba(10, 14, 39, 0.28);
}
/* Only lift the recommended card out of the row where there IS a row. */
@media (min-width: 1001px) {
  .mkt-hl-card--rec { transform: scale(1.03); }
  .mkt-hl-card--rec:hover { transform: scale(1.03) translateY(-3px); }
}
.mkt-hl-card__badge {
  position: absolute; top: -13px; left: 28px;
  background: var(--mkt-green);
  color: var(--mkt-navy);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 7px 13px;
  border-radius: var(--mkt-pill);
}
.mkt-hl-card__pos {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--mkt-green-ink);
  margin-bottom: 6px;
}
.mkt-hl-card--rec .mkt-hl-card__pos { color: var(--mkt-green); }
.mkt-hl-card__name { font-size: 23px; font-weight: 700; letter-spacing: -0.03em; margin: 0 0 16px; }
.mkt-hl-card--rec .mkt-hl-card__name { color: #fff; }
.mkt-hl-card__price { display: flex; align-items: baseline; gap: 9px; margin: 0 0 4px; }
.mkt-hl-card__price span {
  font-size: clamp(38px, 3.4vw, 50px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  color: var(--mkt-navy);
}
.mkt-hl-card--rec .mkt-hl-card__price span { color: #fff; }
.mkt-hl-card__price small { font-size: 13.5px; font-weight: 600; color: var(--mkt-muted); }
.mkt-hl-card--rec .mkt-hl-card__price small { color: rgba(255, 255, 255, 0.6); }
.mkt-hl-card__vat { margin: 0 0 18px; font-size: 13px; color: var(--mkt-muted); }
.mkt-hl-card--rec .mkt-hl-card__vat { color: rgba(255, 255, 255, 0.6); }
.mkt-hl-card__hook { margin: 0 0 12px; font-size: 16.5px; font-weight: 600; line-height: 1.35; color: var(--mkt-navy); }
.mkt-hl-card__day {
  display: block;
  margin: 0 0 18px;
  padding: 11px 13px;
  border-radius: 10px;
  background: rgba(117, 251, 145, 0.22);
  color: var(--mkt-green-ink);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  line-height: 1.3;
}
.mkt-hl-card__day b { font-size: 19px; letter-spacing: -0.02em; margin-right: 5px; }
.mkt-hl-card__who {
  margin: 0 0 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--mkt-hairline-2);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--mkt-body);
}
.mkt-hl-card--rec .mkt-hl-card__who { color: rgba(255, 255, 255, 0.78); border-color: rgba(255, 255, 255, 0.16); }
.mkt-hl-card__list { list-style: none; margin: 0 0 22px; padding: 0; flex: 1; }
.mkt-hl-card__list li {
  position: relative;
  padding: 8px 0 8px 24px;
  border-top: 1px solid var(--mkt-hairline);
  font-size: 14px;
  line-height: 1.5;
  color: var(--mkt-body-strong);
}
.mkt-hl-card__list li:first-child { border-top: none; }
.mkt-hl-card__list li::before {
  content: "";
  position: absolute; left: 1px; top: 14px;
  width: 10px; height: 5px;
  border-left: 2px solid var(--mkt-green-ink);
  border-bottom: 2px solid var(--mkt-green-ink);
  transform: rotate(-45deg);
}
.mkt-hl-card--rec .mkt-hl-card__list li { color: rgba(255, 255, 255, 0.9); border-color: rgba(255, 255, 255, 0.16); }
.mkt-hl-card--rec .mkt-hl-card__list li::before { border-color: var(--mkt-green); }
.mkt-hl-card__meta { margin: 0 0 20px; font-size: 13px; line-height: 1.7; color: var(--mkt-muted); }
.mkt-hl-card__meta b { color: var(--mkt-navy); }
.mkt-hl-card--rec .mkt-hl-card__meta { color: rgba(255, 255, 255, 0.6); }
.mkt-hl-card--rec .mkt-hl-card__meta b { color: #fff; }
.mkt-hl-card__btn { justify-content: center; width: 100%; }
.mkt-hl-card--rec .mkt-btn--outline { color: #fff; border-color: rgba(255, 255, 255, 0.4); background: transparent; }

.mkt-hl-custom {
  margin-top: 48px;
  background: #fff;
  border: 1px solid var(--mkt-hairline);
  border-radius: var(--mkt-r-lg);
  padding: 32px 36px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
}
@media (max-width: 760px) { .mkt-hl-custom { grid-template-columns: 1fr; padding: 28px 22px; } }
.mkt-hl-custom p {
  margin: 0;
  font-size: clamp(18px, 1.9vw, 24px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: var(--mkt-navy);
}
.mkt-hl-custom p span { display: block; margin-top: 6px; font-size: 15px; font-weight: 300; color: var(--mkt-body); letter-spacing: 0; }

/* --- reporting decision block --------------------------------------------- */
.mkt-hl-decision { margin-top: 32px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.mkt-hl-decision h3 { color: #fff; margin: 0 0 6px; }
.mkt-hl-pill {
  display: inline-block;
  margin-bottom: 18px;
  padding: 9px 15px;
  border-radius: var(--mkt-pill);
  background: rgba(117, 251, 145, 0.12);
  border: 1px solid rgba(117, 251, 145, 0.4);
  color: var(--mkt-green);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.mkt-hl-decision__close {
  margin: 26px 0 0;
  font-size: clamp(19px, 2.2vw, 28px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: #fff;
}

/* --- rules ---------------------------------------------------------------- */
.mkt-hl-rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 44px; }
@media (max-width: 760px) { .mkt-hl-rules { grid-template-columns: 1fr; gap: 26px; } }
.mkt-hl-rules > div { border-top: 3px solid var(--mkt-navy); padding-top: 18px; }
.mkt-hl-rules h3 { margin: 0 0 8px; }
.mkt-hl-rules__close {
  margin: 52px 0 0;
  max-width: 32ch;
  font-size: clamp(19px, 2.2vw, 27px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.03em;
  color: var(--mkt-navy);
}

/* --- fit list ------------------------------------------------------------- */
.mkt-hl-fit__h { max-width: 20ch; }
.mkt-hl-fit { list-style: none; margin: 32px 0 0; padding: 0; max-width: 820px; counter-reset: fit; }
.mkt-hl-fit li {
  counter-increment: fit;
  position: relative;
  padding: 18px 0 18px 44px;
  border-top: 1px solid var(--mkt-hairline-2);
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.45;
  color: var(--mkt-navy);
}
.mkt-hl-fit li:last-child { border-bottom: 1px solid var(--mkt-hairline-2); }
.mkt-hl-fit li::before {
  content: counter(fit, decimal-leading-zero);
  position: absolute; left: 0; top: 22px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--mkt-blue);
  font-variant-numeric: tabular-nums;
}
.mkt-hl-fit__close {
  margin: clamp(44px, 6vw, 76px) 0 32px;
  font-size: clamp(28px, 4.4vw, 56px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.04em;
  color: var(--mkt-navy);
}

/* --- team ----------------------------------------------------------------- */
.mkt-hl-team { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); margin-top: 44px; }
@media (max-width: 760px) { .mkt-hl-team { grid-template-columns: 1fr; gap: 44px; } }
.mkt-hl-person img {
  display: block;
  width: 100%; max-width: 400px; height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--mkt-r-card);
  margin-bottom: 20px;
}
@media (max-width: 760px) { .mkt-hl-person img { max-width: 300px; } }
.mkt-hl-person__name { font-size: 23px; font-weight: 700; letter-spacing: -0.03em; margin: 0 0 10px; }
.mkt-hl-team__foot {
  margin: 48px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--mkt-hairline-2);
  font-size: 15px;
  color: var(--mkt-body-strong);
}

/* --- faq ------------------------------------------------------------------ */
.mkt-hl-faq { max-width: 880px; margin-top: 36px; }
.mkt-hl-faq details { border-top: 1px solid var(--mkt-hairline-2); }
.mkt-hl-faq details:last-of-type { border-bottom: 1px solid var(--mkt-hairline-2); }
.mkt-hl-faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 22px 0;
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--mkt-navy);
}
.mkt-hl-faq summary::-webkit-details-marker { display: none; }
.mkt-hl-faq summary::after {
  content: "+";
  flex: none;
  font-size: 25px;
  font-weight: 300;
  line-height: 1;
  color: var(--mkt-green-ink);
}
.mkt-hl-faq details[open] summary::after { content: "–"; }
.mkt-hl-faq details > div { padding-bottom: 22px; }
.mkt-hl-faq details p { margin: 0; max-width: 68ch; }

/* --- contact -------------------------------------------------------------- */
.mkt-hl-contact .mkt-hl-two { margin-top: 44px; align-items: start; }
.mkt-hl-direct { margin-top: 36px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.mkt-hl-phone {
  display: block;
  width: fit-content;
  margin-bottom: 12px;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #fff;
  border-bottom: 3px solid var(--mkt-green);
  padding-bottom: 3px;
}
.mkt-hl-phone:hover { color: var(--mkt-green); }
.mkt-hl-mail {
  display: inline-block;
  margin-top: 10px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}
.mkt-hl-mail:hover { color: var(--mkt-green); border-color: var(--mkt-green); }

/* The form is a white panel sitting INSIDE the dark section, so the dark
   colour rule above paints its contents white — invisible on white. Reset the
   inherited colour at the panel boundary rather than colouring each field:
   <option> and any future text would keep falling through the gap otherwise. */
.mkt-hl main .mkt-dark .mkt-hl-form { color: var(--mkt-body); }
.mkt-hl main .mkt-dark .mkt-hl-form .mkt-eyebrow { color: var(--mkt-navy); }
/* The dark rule above also whitens links, which on this white panel means the
   consent link disappears entirely. Same trap as the panel colour, one level in. */
.mkt-hl main .mkt-dark .mkt-hl-form a:not(.mkt-btn) { color: var(--mkt-blue); }
.mkt-hl-form { background: #fff; border-radius: var(--mkt-r-lg); padding: 32px; }
@media (max-width: 520px) { .mkt-hl-form { padding: 24px 20px; } }
.mkt-hl-form__lbl {
  margin: 0 0 20px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--mkt-navy);
}
.mkt-hl-f { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.mkt-hl-f label { font-size: 13px; font-weight: 600; color: var(--mkt-navy); }
.mkt-hl-f input, .mkt-hl-f select, .mkt-hl-f textarea {
  width: 100%;
  min-width: 0;
  font: inherit;
  font-size: 15px;
  padding: 13px 15px;
  border: 1px solid var(--mkt-hairline-2);
  border-radius: 10px;
  background: #fff;
  color: var(--mkt-navy);
}
.mkt-hl-f textarea { resize: vertical; min-height: 92px; }
.mkt-hl-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mkt-hl-form__row > * { min-width: 0; }
@media (max-width: 520px) { .mkt-hl-form__row { grid-template-columns: 1fr; gap: 0; } }
/* Honeypot: off-screen rather than display:none, so bots that skip hidden
   fields still fill it in. Kept out of the tab order and the a11y tree. */
.mkt-hl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Consent: the checkbox and its label share a row, and the label wraps under
   nothing — a checkbox that drifts away from its text is a checkbox people
   tick without reading. */
.mkt-hl-consent { margin-bottom: 16px; }
/* Deliberately NOT grid or flex. Both blockify every element child, which turns
   the "politicii de confidențialitate" link into its own item on a second row
   instead of letting it flow inside the sentence. Absolute-positioning the box
   out of a padded block keeps the text — link included — as one run. */
.mkt-hl-consent label {
  display: block;
  position: relative;
  padding-left: 27px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--mkt-body);
  cursor: pointer;
}
.mkt-hl-consent input {
  position: absolute;
  left: 0;
  top: 2px;
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--mkt-blue);
  cursor: pointer;
}
.mkt-hl-consent a { text-decoration: underline; }

.mkt-hl-turnstile { margin: 4px 0 16px; min-height: 65px; }

.mkt-hl-form__btn { justify-content: center; width: 100%; margin-top: 6px; }
.mkt-hl-form__btn[disabled] { opacity: 0.6; cursor: progress; transform: none; }
.mkt-hl-form__after { margin: 12px 0 0; font-size: 13px; color: var(--mkt-muted); }
.mkt-hl-form__after--err { color: #B4232A; font-weight: 600; }

/* --- mobile sticky bar ---------------------------------------------------- */
.mkt-hl-mbar { display: none; }
@media (max-width: 600px) {
  .mkt-hl-mbar {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 40;
    background: rgba(7, 11, 31, 0.96);
    backdrop-filter: blur(10px);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  }
  .mkt-hl-mbar .mkt-btn { justify-content: center; padding: 14px 16px; font-size: 14px; box-shadow: none; }
  .mkt-hl-mbar .mkt-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.4); background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .mkt-hl * { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   HEADER + FOOTER — this page's own.

   The mock's content, restyled onto the main site's system: the same .mkt-glass
   bar, the same pill CTA, Poppins, the same logo SVG. What is deliberately NOT
   borrowed is the shared partials' *content* — the main nav and the sitemap
   footer both push a visitor off a landing page whose only job is the 90-day
   plan.
   ========================================================================== */

.mkt-hl-header { position: sticky; top: 0; z-index: 30; padding-top: 14px; }
.mkt-hl-header__bar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 14px 12px 24px;
  border-radius: var(--mkt-pill);
  /* .mkt-glass clips with overflow:hidden; nothing here escapes the bar, but
     keeping it visible matches the main header and costs nothing. */
  overflow: visible;
}
.mkt-hl-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: none;
  /* The reset paints every <a> --mkt-blue. Nothing here is bare text today, but
     blue-on-navy is 2.78:1 and the next word added to this link would inherit it. */
  color: var(--mkt-navy);
  /* The mark is only ~18px tall at the phone width; the padding is what makes
     this a 24px tap target rather than a thin strip. */
  padding-block: 4px;
}
.mkt-hl-brand--inv { color: #fff; }
.mkt-hl-brand svg { display: block; width: 150px; height: auto; }
.mkt-hl-brand .mkt-logo__mark { fill: var(--mkt-blue); }
.mkt-hl-brand .mkt-logo__word { fill: var(--mkt-navy); }
.mkt-hl-brand__sub {
  padding-left: 12px;
  border-left: 1px solid var(--mkt-hairline-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mkt-blue);
  line-height: 1;
}
.mkt-hl-nav { display: flex; gap: 26px; margin-left: auto; }
.mkt-hl-nav a {
  display: inline-block;
  padding-block: 3px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--mkt-body);
  white-space: nowrap;
}
.mkt-hl-nav a:hover { color: var(--mkt-navy); }
.mkt-hl-header__cta { flex: none; padding: 12px 20px; font-size: 14px; }

@media (max-width: 900px) {
  /* No burger: four in-page anchors and a sticky CTA bar do not justify a
     JavaScript sheet. The links become a scrollable row instead, so they stay
     reachable rather than disappearing the way the mock hid them. */
  .mkt-hl-header__bar { flex-wrap: wrap; gap: 10px 16px; padding: 12px 16px; }
  .mkt-hl-nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    gap: 18px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .mkt-hl-nav::-webkit-scrollbar { display: none; }
  .mkt-hl-header__cta { margin-left: auto; }
}
@media (max-width: 600px) {
  .mkt-hl-brand svg { width: 124px; }
  .mkt-hl-brand__sub { padding-left: 9px; letter-spacing: 1.4px; }
  /* The sticky bottom bar already carries the CTA — two on screen is one too many. */
  .mkt-hl-header__cta { display: none; }
}

.mkt-hl-footer { background: var(--mkt-navy-deep); color: #fff; padding: 56px 0 28px; }
.mkt-hl-footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 28px 48px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.mkt-hl-brand--inv .mkt-logo__mark { fill: var(--mkt-blue-light); }
.mkt-hl-brand--inv .mkt-logo__word { fill: #fff; }
.mkt-hl-brand--inv .mkt-hl-brand__sub { color: var(--mkt-green); border-left-color: rgba(255, 255, 255, 0.28); }
.mkt-hl-footer__place { margin: 16px 0 0; font-size: 14px; color: rgba(255, 255, 255, 0.72); }
.mkt-hl-footer__contact { display: flex; flex-direction: column; gap: 8px; }
.mkt-hl-footer__contact a { display: inline-block; padding-block: 2px; font-size: 16px; font-weight: 600; color: #fff; }
.mkt-hl-footer__contact a:hover { color: var(--mkt-green); }
.mkt-hl-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 32px;
  padding-top: 22px;
}
.mkt-hl-footer__legal p { margin: 0; font-size: 13.5px; color: rgba(255, 255, 255, 0.6); }
.mkt-hl-footer__links { display: flex; flex-wrap: wrap; gap: 2px 22px; }
/* inline-block + padding, so each legal link is a real 24px tap target rather
   than a 19px strip of text. Negative margin keeps the row visually tight. */
.mkt-hl-footer__links a {
  display: inline-block;
  padding-block: 3px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.72);
}
.mkt-hl-footer__links a:hover { color: #fff; }
@media (max-width: 600px) {
  /* Clear the fixed CTA bar. */
  .mkt-hl-footer { padding-bottom: 92px; }
}