/*
Theme Name: EcomCFO
Theme URI: https://ecomcfo.ru/
Author: ДАТА СТАРТА
Description: Editable WordPress block theme for the EcomCFO website approved design.
Version: 0.2.0
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 8.3
Text Domain: ecomcfo
*/

@font-face {
  font-family: var(--ec-font);
  src: url("./assets/fonts/manrope-cyrillic.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: var(--ec-font);
  src: url("./assets/fonts/manrope-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ec-ink: var(--wp--preset--color--ink, #101923);
  --ec-dark: var(--wp--preset--color--ink-17, #0f1a23);
  --ec-dark-2: var(--wp--preset--color--ink-13, #15232d);
  --ec-text: var(--wp--preset--color--graphite, #17212b);
  --ec-muted: var(--wp--preset--color--muted, #5e6870);
  --ec-line: var(--wp--preset--color--sage-01, #dfe3de);
  --ec-soft: var(--wp--preset--color--soft, #f7f7f3);
  --ec-card: var(--wp--preset--color--white, #ffffff);
  --ec-sage: var(--wp--preset--color--sage, #75856c);
  --ec-sage-2: var(--wp--preset--color--sage-21, #8fa081);
  --ec-sage-3: var(--wp--preset--color--sage-light, #b7c2ad);
  --ec-risk: var(--wp--preset--color--risk, #c7442e);
  /* Semantic tokens derived from the 10 base colours in theme.json. A new
     site changes only theme.json's palette (or Site Editor → Styles → Colors);
     everything below and every rgba()-style tint follows automatically. */
  --ec-white: var(--wp--preset--color--white, #fff);
  --ec-paper: var(--ec-white); /* light plate under the footer logo (was referenced but never defined) */
  --ec-accent-text: color-mix(in srgb, var(--ec-sage) 75%, var(--ec-ink) 25%); /* WCAG AA on white/soft */
  --ec-text-subtle: var(--ec-muted); /* secondary text that must stay >= 4.5:1 */
  --ec-font: var(--wp--preset--font-family--manrope, Manrope, system-ui, sans-serif);
  --ec-shadow: 0 14px 34px color-mix(in srgb, var(--ec-ink) 8%, transparent);
  --ec-radius: 8px;
  --ec-wide: 1136px;
  --ec-reference-wide: 912px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--wp--preset--color--white, #fff);
  color: var(--ec-text);
  font-family: var(--ec-font);
  font-size: 16px;
  line-height: 1.45;
  overflow-x: hidden;
}

a {
  color: inherit;
}

.wp-site-blocks {
  min-height: 100vh;
}

.ec-shell,
.ec-section,
.ec-header__inner,
.ec-footer__inner {
  max-width: var(--ec-wide);
  width: calc(100% - 112px);
  margin-inline: auto;
  padding-inline: 0;
}

@media (max-width: 1180px) {
  .ec-shell,
  .ec-section,
  .ec-header__inner,
  .ec-footer__inner {
    max-width: var(--ec-reference-wide);
  }
}

.ec-header {
  background: var(--wp--preset--color--white, #fff);
  color: var(--ec-ink);
  border-bottom: 1px solid color-mix(in srgb, var(--ec-ink) 5%, transparent);
}

body:not(.home):not(.front-page) .ec-header,
.ec-header--dark {
  background: linear-gradient(135deg, var(--wp--preset--color--ink-19, #0d1821) 0%, var(--wp--preset--color--ink-11, #152530) 100%);
  color: var(--wp--preset--color--white, #fff);
  border-bottom: 0;
}

.ec-header__inner {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

body:not(.home):not(.front-page) .ec-header__inner {
  height: 67px;
}

/* The logo is the СФО mark only (no wordmark) at a 1:1 (92x92) ratio — see
   ecomcfo_render_logo_img() in functions.php. The clamp() floor is 44px so
   the link's own box (padding included, box-sizing: border-box) always
   meets the 44x44 CSS px minimum touch target, with no separate mobile
   override needed. */
.ec-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(44px, 4.2vw, 52px);
  height: auto;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
  text-decoration: none;
}

.ec-logo img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Light plate behind the mark wherever it sits on a dark background: the
   footer (always dark) and the header on inner pages (dark gradient — see
   `.ec-header--dark` above). Without it the graphite mark reads at ~1.2:1
   against the dark background; the plate is what tests/logo-contrast checks.
   The footer plate is a rounded rectangle (owner's earlier "rectangle on
   white" footer treatment, kept alongside the current Cyrillic mark rather
   than reverting to the old Latin-wordmark asset); the header plate stays
   circular but thinner (4px ring instead of 8px) per the owner's request. */
.ec-footer .ec-logo {
  width: clamp(52px, 5vw, 60px);
  padding: 6px;
  background: var(--ec-paper);
  border-radius: 10px;
}

body:not(.home):not(.front-page) .ec-header .ec-logo,
.ec-header--dark .ec-logo {
  width: clamp(48px, 4.6vw, 56px);
  padding: 4px;
  background: var(--ec-paper);
  border-radius: 50%;
}

.ec-nav {
  display: flex;
  align-items: center;
  gap: clamp(34px, 5vw, 64px);
  font-weight: 700;
  font-size: 15px;
}

.ec-nav a {
  text-decoration: none;
  position: relative;
}

.ec-nav a[aria-current="page"]::after,
.ec-nav a:hover::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  height: 2px;
  background: var(--ec-sage-2);
}

.ec-button {
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  padding: 11px 23px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--wp--preset--color--sage-23, #879877), var(--wp--preset--color--sage-31, #65795f));
  color: var(--wp--preset--color--white, #fff);
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ec-white) 22%, transparent);
  white-space: nowrap;
}

.ec-mobile-nav {
  display: none;
}

.wp-block-button.ec-button {
  min-height: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.wp-block-button.ec-button .wp-block-button__link {
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  padding: 11px 23px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--wp--preset--color--sage-23, #879877), var(--wp--preset--color--sage-31, #65795f));
  color: var(--wp--preset--color--white, #fff);
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ec-white) 22%, transparent);
  white-space: nowrap;
}

.wp-block-button.ec-button--plain .wp-block-button__link,
.wp-block-button.ec-button--link .wp-block-button__link {
  min-height: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: var(--ec-ink);
  font-weight: 800;
  font-size: inherit;
  text-decoration: none;
  box-shadow: none;
  white-space: normal;
}

.wp-block-button.ec-button--link .wp-block-button__link {
  color: var(--wp--preset--color--sage-32, #526451);
}

.ec-page-hero--dark .wp-block-button.ec-button--plain .wp-block-button__link,
.ec-page-hero--dark .wp-block-button.ec-button--link .wp-block-button__link,
.ec-dark-cta .wp-block-button.ec-button--plain .wp-block-button__link,
.ec-dark-cta .wp-block-button.ec-button--link .wp-block-button__link {
  color: var(--wp--preset--color--cream-07, #edf3ec);
}

.wp-block-button.ec-button.ec-button--light .wp-block-button__link {
  background: linear-gradient(135deg, var(--wp--preset--color--sage-17, #a4b096), var(--wp--preset--color--sage-29, #708266));
  color: var(--wp--preset--color--white, #fff);
}

.ec-button--plain {
  background: transparent;
  color: var(--ec-ink);
  box-shadow: none;
  padding-inline: 0;
}

.ec-button--light {
  background: linear-gradient(135deg, var(--wp--preset--color--sage-17, #a4b096), var(--wp--preset--color--sage-29, #708266));
  color: var(--wp--preset--color--white, #fff);
}

.ec-hero {
  padding: 14px 0 0;
  background: radial-gradient(circle at 72% 28%, color-mix(in srgb, var(--ec-sage-2) 10%, transparent), transparent 30%), var(--wp--preset--color--white, #fff);
}

.ec-pattern-page .ec-hero {
  padding-top: 0;
}

.ec-pattern-page > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

.ec-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 488px);
  gap: 42px;
  align-items: start;
}

.wp-block-columns.ec-hero__grid,
.wp-block-columns.ec-problem-grid,
.wp-block-columns.ec-services-split,
.wp-block-columns.ec-benefits,
.wp-block-columns.ec-case-grid,
.wp-block-columns.ec-about-grid,
.wp-block-columns.ec-mini-articles,
.wp-block-columns.ec-dark-cta__inner {
  margin-bottom: 0;
}

.wp-block-columns.ec-hero__grid > .wp-block-column,
.wp-block-columns.ec-problem-grid > .wp-block-column,
.wp-block-columns.ec-services-split > .wp-block-column,
.wp-block-columns.ec-benefits > .wp-block-column,
.wp-block-columns.ec-case-grid > .wp-block-column,
.wp-block-columns.ec-about-grid > .wp-block-column,
.wp-block-columns.ec-mini-articles > .wp-block-column {
  min-width: 0;
}

.ec-hero h1,
.ec-page-hero h1,
.ec-article h1 {
  margin: 0;
  color: var(--ec-ink);
  font-size: clamp(32px, 3.45vw, 40px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: 0;
}

.ec-hero h1 {
  font-size: clamp(32px, 3.35vw, 38px);
}

.ec-hero p,
.ec-page-hero p {
  max-width: 520px;
  margin: 24px 0 28px;
  color: var(--wp--preset--color--ink-04, #38434c);
  line-height: 1.62;
}

.ec-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.ec-hero .ec-button,
.ec-hero .wp-block-button.ec-button .wp-block-button__link {
  min-height: 38px;
  padding: 10px 17px;
  font-size: 12px;
}

.ec-dashboard {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  position: relative;
}

/*
 * WordPress core injects `:root :where(.is-layout-flow) > * { margin-block: 24px 0 }`
 * (global-styles-inline-css) for every flow-layout group's non-first child, including
 * .ec-dashboard's own direct children (each KPI card / .ec-wide-chart is a Gutenberg
 * group with layout:"default", so it carries the `is-layout-flow` class). That 24px
 * top margin eats into the fixed row height below and clips card content. Cancel it
 * here instead of touching the global block-gap setting.
 */
.ec-dashboard.is-layout-flow > * {
  margin-block-start: 0;
}

.ec-pattern-page .ec-dashboard {
  /* Row 2 (Маржа/Состояние) measured ~9-20px short of its own content even with the
     block-gap margin above fixed; +24px keeps rows 1 and 3 (already correct) untouched. */
  grid-template-rows: 124px 148px 68px;
}

.ec-dashboard::after {
  content: "";
  position: absolute;
  top: 112px;
  right: -46px;
  z-index: -1;
  width: 132px;
  height: 112px;
  background: radial-gradient(circle, color-mix(in srgb, var(--ec-sage-2) 34%, transparent) 0 1.5px, transparent 2px);
  background-size: 18px 18px;
  pointer-events: none;
}

.ec-kpi,
.ec-wide-chart,
.ec-card,
.ec-service-card,
.ec-case-card,
.ec-person,
.ec-sidebar-card,
.ec-article-card,
.ec-legal-box,
.ec-doc-toc {
  border: 1px solid var(--ec-line);
  border-radius: var(--ec-radius);
  background: var(--ec-card);
  box-shadow: 0 12px 34px color-mix(in srgb, var(--ec-ink) 5%, transparent);
}

.ec-kpi {
  min-height: 112px;
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
}

.ec-pattern-page .ec-kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  padding: 10px 14px;
}

.ec-kpi p,
.ec-wide-chart p {
  margin: 0;
}

.ec-kpi--dark {
  background: linear-gradient(140deg, var(--wp--preset--color--ink-16, #101b24), var(--wp--preset--color--ink-06, #1d2b35));
  color: var(--wp--preset--color--white, #fff);
  border-color: color-mix(in srgb, var(--ec-white) 12%, transparent);
}

.ec-kpi__label,
.ec-meta,
.ec-card__eyebrow {
  color: var(--ec-muted);
  font-size: 12px;
  font-weight: 800;
}

.ec-kpi .ec-kpi__label {
  color: var(--ec-muted);
}

.ec-kpi--dark .ec-kpi__label {
  color: var(--wp--preset--color--cream-02, #f4f7f1);
}

.ec-kpi__value {
  display: block;
  margin-top: 7px;
  font-size: 25px;
  font-weight: 800;
  color: var(--ec-ink);
}

.ec-pattern-page .ec-kpi__value {
  margin-top: 0;
}

.ec-kpi--dark .ec-kpi__value {
  color: var(--wp--preset--color--white, #fff);
}

.ec-kpi__delta {
  margin-top: 10px;
  color: var(--ec-sage);
  font-weight: 800;
  font-size: 13px;
}

.ec-kpi--profit .ec-spark {
  height: 30px;
}

.ec-kpi__risk {
  color: var(--ec-risk);
}

.ec-spark,
.ec-bars,
.ec-donut,
.ec-riskbar,
.ec-wave,
.ec-thumb {
  position: absolute;
  inset: auto 18px 13px 18px;
  height: 48px;
}

.ec-pattern-page .ec-kpi .ec-spark,
.ec-pattern-page .ec-kpi .ec-bars,
.ec-pattern-page .ec-kpi .ec-riskbar {
  position: relative;
  inset: auto;
  margin-top: auto;
}

.ec-pattern-page .ec-kpi .ec-riskbar {
  flex: 0 0 5px;
  min-height: 5px;
}

.ec-chart-line {
  position: absolute;
  inset: 16px 18px 12px;
  width: calc(100% - 36px);
  height: calc(100% - 28px);
  overflow: visible;
}

.ec-chart-line polyline,
.ec-chart-line path {
  fill: none;
  stroke: var(--wp--preset--color--sage-28, #6f8068);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ec-kpi--dark .ec-chart-line polyline,
.ec-kpi--dark .ec-chart-line path,
.ec-finance-panel .ec-chart-line polyline,
.ec-finance-panel .ec-chart-line path {
  stroke: var(--wp--preset--color--sage-19, #9bab8e);
}

.ec-spark:has(.ec-chart-line)::before,
.ec-wide-chart:has(.ec-chart-line)::before {
  display: none;
}

.ec-spark::before {
  content: "";
  position: absolute;
  inset: 5px 0 4px;
  /* Line colour from the palette; the SVG is only a mask shape. */
  background: var(--wp--preset--color--sage-30, #6f8068);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 52'%3E%3Cpolyline points='3,41 24,35 43,22 63,29 86,12 109,20 131,4 154,14 177,8' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 52'%3E%3Cpolyline points='3,41 24,35 43,22 63,29 86,12 109,20 131,4 154,14 177,8' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.ec-bars {
  display: flex;
  align-items: end;
  gap: 10px;
  justify-content: center;
}

.ec-kpi--cashflow .ec-bars {
  width: min(180px, 100%);
  flex: 0 0 32px;
  height: 32px;
  min-height: 32px;
  background:
    linear-gradient(to top, var(--wp--preset--color--sage-13, #a9b69d) 0 8px, transparent 8px) 0 100% / 13px 100% no-repeat,
    linear-gradient(to top, var(--wp--preset--color--sage-13, #a9b69d) 0 14px, transparent 14px) 22px 100% / 13px 100% no-repeat,
    linear-gradient(to top, var(--wp--preset--color--sage-13, #a9b69d) 0 18px, transparent 18px) 44px 100% / 13px 100% no-repeat,
    linear-gradient(to top, var(--wp--preset--color--sage-13, #a9b69d) 0 12px, transparent 12px) 66px 100% / 13px 100% no-repeat,
    linear-gradient(to top, var(--wp--preset--color--sage-13, #a9b69d) 0 10px, transparent 10px) 88px 100% / 13px 100% no-repeat,
    linear-gradient(to top, var(--wp--preset--color--sage-13, #a9b69d) 0 16px, transparent 16px) 110px 100% / 13px 100% no-repeat,
    linear-gradient(to top, var(--wp--preset--color--sage-13, #a9b69d) 0 23px, transparent 23px) 132px 100% / 13px 100% no-repeat,
    linear-gradient(to top, var(--wp--preset--color--sage-13, #a9b69d) 0 30px, transparent 30px) 154px 100% / 13px 100% no-repeat;
}

.ec-bars span {
  width: 13px;
  background: linear-gradient(180deg, var(--wp--preset--color--sage-13, #a9b69d), var(--wp--preset--color--sage-32, #526451));
}

.ec-donut {
  width: 68px;
  height: 68px;
  inset: auto auto 18px 22px;
  border-radius: 50%;
  background: conic-gradient(var(--wp--preset--color--ink-12, #17242e) 0 26%, var(--wp--preset--color--sage-21, #8fa081) 26% 61%, var(--wp--preset--color--sage-05, #d8ddd3) 61% 80%, var(--wp--preset--color--sage-10, #b8bfae) 80% 100%);
}

.ec-donut::after {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background: var(--wp--preset--color--white, #fff);
}

.ec-kpi__visual-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 0;
}

.ec-kpi__visual-row .ec-donut {
  position: relative;
  inset: auto;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  margin: 0;
}

.ec-kpi__visual-row .ec-donut::after {
  inset: 11px;
}

.ec-kpi__legend {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--wp--preset--color--ink-05, #28343d);
  font-size: 7px;
  font-weight: 700;
  line-height: 1.35;
}

.ec-riskbar {
  height: 5px;
  top: auto;
  background: var(--wp--preset--color--cream-11, #e8e8e5);
}

.ec-riskbar::before {
  content: "";
  display: block;
  width: 44%;
  height: 100%;
  background: var(--ec-risk);
}

.ec-kpi__eta {
  color: var(--wp--preset--color--ink-01, #58636b);
  font-size: 10px;
  font-weight: 700;
}

.ec-wide-chart {
  grid-column: 1 / -1;
  height: 94px;
  padding: 16px 20px;
  position: relative;
  overflow: hidden;
}

.ec-pattern-page .ec-wide-chart {
  height: 68px;
}

.ec-wide-chart::before {
  content: "";
  position: absolute;
  inset: 32px 26px 28px 58px;
  /* Line colour comes from the palette: the SVG is only a mask shape. */
  background: var(--wp--preset--color--sage-31, #66775f);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 48'%3E%3Cpolyline points='0,43 34,36 68,31 102,24 136,29 170,22 204,8 238,17 272,12 306,4 340,10 360,5' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 48'%3E%3Cpolyline points='0,43 34,36 68,31 102,24 136,29 170,22 204,8 238,17 272,12 306,4 340,10 360,5' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.ec-wide-chart .ec-chart-line {
  inset: 32px 26px 28px 58px;
  width: calc(100% - 84px);
  height: 34px;
}

.ec-wide-chart::after {
  content: "01 02 03 04 05 06 07 08 09 10 11 12";
  position: absolute;
  left: 58px;
  right: 22px;
  bottom: 9px;
  color: var(--wp--preset--color--ink-01, #58636b);
  font-size: 9px;
  word-spacing: 14px;
  white-space: nowrap;
}

.ec-finance-panel::before,
.ec-thumb--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 16% 68%, color-mix(in srgb, var(--ec-sage-2) 20%, transparent) 0 2px, transparent 3px),
    radial-gradient(circle at 84% 18%, color-mix(in srgb, var(--ec-sage-2) 16%, transparent) 0 2px, transparent 3px);
  background-size: 42px 28px;
  opacity: 0.45;
}

.ec-thumb--dark::after,
.ec-thumb--wave::after {
  content: "";
  position: absolute;
  inset: 24% 14% 20%;
  background: linear-gradient(145deg, transparent 0 18%, var(--wp--preset--color--sage-24, #7f9276) 18.6% 20.3%, transparent 21% 33%, var(--wp--preset--color--sage-24, #7f9276) 33.8% 35.5%, transparent 36.2% 50%, var(--wp--preset--color--sage-24, #7f9276) 50.8% 52.5%, transparent 53.2%);
}

.ec-band {
  margin-top: 0;
  padding: 14px 0 16px;
  background: linear-gradient(135deg, var(--wp--preset--color--ink-18, #0e1922) 0%, var(--wp--preset--color--ink-08, #182733) 100%);
  color: var(--wp--preset--color--white, #fff);
}

.ec-band h2 {
  margin: 0 0 14px;
  font-size: 22px;
  line-height: 1.15;
  color: var(--wp--preset--color--white, #fff);
}

.ec-band .ec-section h2 {
  color: var(--wp--preset--color--white, #fff);
}

.ec-problem-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.ec-problem {
  min-height: 176px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--ec-white) 28%, transparent);
  border-radius: var(--ec-radius);
  background: color-mix(in srgb, var(--ec-white) 2%, transparent);
  position: relative;
}

.ec-problem strong {
  color: var(--ec-sage-2);
  font-size: 42px;
  line-height: 1;
  margin-right: 14px;
  float: left;
}

.ec-problem-number {
  margin: 0;
  float: left;
}

.ec-problem__icon {
  width: 48px;
  height: 48px;
  margin: auto 0 0 auto;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ec-sage-2) 95%, transparent);
  color: var(--wp--preset--color--white, #fff);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--ec-ink) 16%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  font-weight: 800;
  line-height: 1;
}

.ec-problem h3 {
  margin: 2px 0 8px;
  font-size: 18px;
  color: var(--wp--preset--color--white, #fff);
}

.ec-problem p {
  margin: 0 0 12px;
  color: var(--ec-sage-3);
  font-size: 13px;
}

.ec-problem ul {
  margin: 0;
  padding-left: 16px;
  font-size: 12px;
  line-height: 1.5;
}

.ec-section {
  padding-block: 12px;
}

.ec-section h2 {
  margin: 0 0 16px;
  font-size: 25px;
  line-height: 1.15;
  color: var(--ec-ink);
}

.ec-services-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ec-services-split--cases {
  grid-template-columns: 1.15fr 1.15fr 1fr;
}

.ec-service-large {
  min-height: 176px;
  padding: 18px 150px 18px 20px;
  position: relative;
  overflow: hidden;
}

.ec-service-large::after {
  content: "";
  position: absolute;
  right: 24px;
  bottom: 18px;
  width: 104px;
  height: 104px;
  opacity: 0.8;
  background:
    linear-gradient(var(--wp--preset--color--sage-01, #dfe3de), var(--wp--preset--color--sage-01, #dfe3de)) 54px 15px / 46px 8px no-repeat,
    linear-gradient(var(--wp--preset--color--sage-14, #a5b19d), var(--wp--preset--color--sage-14, #a5b19d)) 54px 36px / 52px 38px no-repeat,
    linear-gradient(90deg, transparent 48%, color-mix(in srgb, var(--ec-ink) 8%, transparent) 49% 51%, transparent 52%),
    linear-gradient(135deg, transparent 0 18px, var(--wp--preset--color--cream-03, #f4f5f2) 18px);
  border: 3px solid color-mix(in srgb, var(--ec-ink) 8%, transparent);
  border-radius: 7px;
}

.ec-service-large--accounting::after {
  background:
    linear-gradient(var(--wp--preset--color--sage-08, #cfd4ca), var(--wp--preset--color--sage-08, #cfd4ca)) 22px 19px / 58px 10px no-repeat,
    repeating-linear-gradient(90deg, var(--wp--preset--color--sage-08, #cfd4ca) 0 18px, transparent 18px 28px) 22px 40px / 84px 52px no-repeat,
    linear-gradient(135deg, transparent 0 20px, var(--wp--preset--color--cream-03, #f4f5f2) 20px);
}

.ec-service-large ul {
  list-style: none;
  padding-left: 0;
}

.ec-service-large li {
  position: relative;
  padding-left: 20px;
}

.ec-service-large li::before {
  content: "▥";
  position: absolute;
  left: 0;
  top: 0.05em;
  color: var(--ec-sage);
  font-size: 12px;
}

.ec-service-large h3,
.ec-service-large h2.ec-h3,
.ec-service-card h3,
.ec-case-card h3,
.ec-person h3,
.ec-article-card h2,
.ec-sidebar-card h3 {
  margin: 0 0 10px;
  color: var(--ec-ink);
  line-height: 1.25;
}

.ec-service-large p,
.ec-case-card p,
.ec-person p {
  margin-block: 0 10px;
}

.ec-service-large ul {
  margin: 12px 0;
  padding-left: 17px;
  line-height: 1.55;
  font-size: 12px;
}

.ec-link {
  color: var(--wp--preset--color--sage-32, #526451);
  font-weight: 800;
  text-decoration: none;
}

.ec-benefits {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}

.ec-benefit h3 {
  font-size: 15px;
  margin: 8px 0 5px;
}

.ec-benefit p {
  margin: 0;
  color: var(--ec-muted);
  font-size: 12px;
  line-height: 1.45;
}

.ec-icon {
  width: 42px;
  height: 42px;
  border: 3px solid var(--ec-sage);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ec-sage);
  font-weight: 800;
  margin: 0;
}

.ec-case-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.ec-case-card {
  min-height: 96px;
  padding: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(92px, 0.42fr);
  column-gap: 16px;
  align-items: start;
  overflow: hidden;
}

.ec-case-card > .ec-tag,
.ec-case-card > h3,
.ec-case-card > p:not(.ec-case-metric) {
  grid-column: 1;
}

.ec-case-metric {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  margin: 0;
  color: var(--wp--preset--color--sage-32, #526451);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.35;
  text-align: left;
}

.ec-case-metric span,
.ec-case-metric strong,
.ec-case-metric small {
  display: block;
}

.ec-case-metric strong {
  color: var(--wp--preset--color--graphite, #17212b);
  font-size: 15px;
  line-height: 1.12;
}

.ec-case-card--audit .ec-case-metric {
  color: var(--wp--preset--color--graphite, #17212b);
}

.ec-case-card--audit .ec-case-metric strong {
  color: var(--wp--preset--color--risk, #c7442e);
}

.ec-tag {
  display: inline-flex;
  border: 1px solid var(--ec-line);
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11px;
  color: var(--wp--preset--color--sage-33, #53634f);
  background: var(--wp--preset--color--cream-01, #f7f8f4);
  font-weight: 700;
}

/*
 * Post tags sidebar card: .ec-tag styles a single wrapping element as one pill,
 * which works for category (always exactly one term) but a post can carry several
 * tags, so wp:post-terms for post_tag would render them all inside one shared pill.
 * Style each generated <a> as its own pill instead, wrapped so multiple tags flow
 * onto new lines - same visual recipe as .ec-tag, just targeted per-link.
 */
.ec-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ec-tag-list a {
  display: inline-flex;
  border: 1px solid var(--ec-line);
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11px;
  color: var(--wp--preset--color--sage-33, #53634f);
  background: var(--wp--preset--color--cream-01, #f7f8f4);
  font-weight: 700;
  text-decoration: none;
}

.ec-tag-list a:hover {
  border-color: var(--wp--preset--color--sage-33, #53634f);
}

.ec-about-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px;
}

.ec-person {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 16px;
  padding: 14px;
  align-items: center;
}

.ec-person > .wp-block-group:only-child {
  grid-column: 1 / -1;
}

.ec-avatar {
  width: 82px;
  height: 82px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--wp--preset--color--cream-10, #e7e9e4), var(--wp--preset--color--sage-09, #c9d2c0));
  display: flex;
  align-items: end;
  justify-content: center;
  overflow: hidden;
}

.wp-block-image.ec-avatar {
  margin: 0;
}

.wp-block-image.ec-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wp-block-image.ec-avatar::before {
  display: none;
}

.ec-avatar::before {
  content: "";
  width: 46px;
  height: 62px;
  border-radius: 26px 26px 8px 8px;
  background: linear-gradient(180deg, var(--wp--preset--color--risk-light, #f2d5c6) 0 30%, var(--wp--preset--color--ink-10, #18232e) 31% 100%);
}

.ec-mini-articles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.ec-mini-article-link {
  display: block;
  height: 100%;
}

.ec-mini-article {
  display: grid;
  grid-template-columns: 112px 1fr;
  align-content: start;
  align-items: start;
  gap: 12px;
  height: 100%;
  padding: 0;
  overflow: hidden;
}

.ec-mini-article > .ec-thumb {
  grid-column: 1;
  grid-row: 1;
}

.ec-thumb {
  position: static;
  display: block;
  width: 100%;
  height: 78px;
  background: var(--wp--preset--color--ink-16, #101b24);
  overflow: hidden;
  margin: 0;
}

.wp-block-image.ec-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ec-thumb--photo {
  background: linear-gradient(135deg, var(--wp--preset--color--tan-01, #b9ad9b), var(--wp--preset--color--tan-02, #6b604f));
}

.ec-thumb--wave {
  background: var(--wp--preset--color--ink-16, #101b24);
}

.ec-thumb--donut {
  background:
    radial-gradient(circle at 54% 50%, var(--wp--preset--color--ink-15, #10202a) 0 24px, transparent 25px),
    conic-gradient(var(--wp--preset--color--sage-21, #8fa081) 0 42%, var(--wp--preset--color--sage-07, #d4d9cf) 42% 68%, var(--wp--preset--color--sage-30, #6c7e64) 68% 100%);
}

.ec-thumb--doc {
  background:
    linear-gradient(90deg, transparent 0 48%, color-mix(in srgb, var(--ec-ink) 8%, transparent) 49% 51%, transparent 52%),
    linear-gradient(var(--wp--preset--color--gray-01, #dcdeda), var(--wp--preset--color--gray-01, #dcdeda)) 62% 34% / 58px 8px no-repeat,
    linear-gradient(var(--wp--preset--color--gray-02, #b2b8ac), var(--wp--preset--color--gray-02, #b2b8ac)) 62% 52% / 64px 32px no-repeat,
    var(--wp--preset--color--cream-05, #f5f5f1);
}

.ec-thumb--bars {
  background:
    linear-gradient(90deg, transparent 0 40%, var(--wp--preset--color--sage-25, #7d9073) 41% 47%, transparent 48% 54%, var(--wp--preset--color--sage-21, #8fa081) 55% 62%, transparent 63% 68%, var(--wp--preset--color--sage-15, #a6b39b) 69% 77%, transparent 78%),
    var(--wp--preset--color--ink-16, #101b24);
}

.ec-thumb--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(color-mix(in srgb, var(--ec-ink) 28%, transparent), color-mix(in srgb, var(--ec-ink) 28%, transparent)),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--ec-white) 12%, transparent) 0 2px, transparent 2px 34px);
}

.ec-thumb--dark,
.ec-thumb--photo,
.ec-thumb--wave,
.ec-thumb--bars {
  position: relative;
}

.ec-thumb--dark::after,
.ec-thumb--wave::after {
  content: "";
  position: absolute;
  inset: 24% 14% 20%;
  background: linear-gradient(145deg, transparent 0 18%, var(--wp--preset--color--sage-24, #7f9276) 18.6% 20.3%, transparent 21% 33%, var(--wp--preset--color--sage-24, #7f9276) 33.8% 35.5%, transparent 36.2% 50%, var(--wp--preset--color--sage-24, #7f9276) 50.8% 52.5%, transparent 53.2%);
}

.ec-article-hero-visual {
  min-height: 210px;
  position: relative;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--ec-sage-2) 16%, transparent), color-mix(in srgb, var(--ec-sage-2) 4%, transparent) 62%, transparent 63%);
  overflow: hidden;
}

.ec-article-hero-visual .ec-bars {
  left: 82px;
  right: auto;
  bottom: 58px;
  width: 152px;
  height: 102px;
  /* Drawn with layered backgrounds (same technique as .ec-kpi--cashflow
     .ec-bars above) instead of child <span> elements, so this stays a real,
     empty, editor-locked block — see templates/home.html. */
  background:
    linear-gradient(180deg, var(--wp--preset--color--sage-13, #a9b69d), var(--wp--preset--color--sage-32, #526451)) 24px 100% / 13px 38px no-repeat,
    linear-gradient(180deg, var(--wp--preset--color--sage-13, #a9b69d), var(--wp--preset--color--sage-32, #526451)) 47px 100% / 13px 50px no-repeat,
    linear-gradient(180deg, var(--wp--preset--color--sage-13, #a9b69d), var(--wp--preset--color--sage-32, #526451)) 70px 100% / 13px 62px no-repeat,
    linear-gradient(180deg, var(--wp--preset--color--sage-13, #a9b69d), var(--wp--preset--color--sage-32, #526451)) 93px 100% / 13px 76px no-repeat,
    linear-gradient(180deg, var(--wp--preset--color--sage-13, #a9b69d), var(--wp--preset--color--sage-32, #526451)) 116px 100% / 13px 94px no-repeat;
}

.ec-article-hero-visual .ec-spark {
  right: 54px;
  left: auto;
  bottom: 68px;
  width: 172px;
}

.ec-mini-article h3 {
  grid-column: 2;
  grid-row: 1;
  margin: 10px 10px 0 14px;
  font-size: 14px;
  line-height: 1.22;
}

.ec-dark-cta,
.ec-footer {
  background: linear-gradient(135deg, var(--wp--preset--color--ink-16, #101b24) 0%, var(--wp--preset--color--ink-07, #182934) 100%);
  color: var(--wp--preset--color--white, #fff);
}

.ec-dark-cta {
  margin-top: 18px;
  padding: 22px 0;
}

.ec-dark-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(var(--ec-wide), calc(100% - 112px));
  margin-inline: auto;
}

.ec-dark-cta h2 {
  margin: 0 0 6px;
  color: var(--wp--preset--color--white, #fff);
  font-size: 25px;
}

.ec-dark-cta p {
  margin: 0;
  color: var(--wp--preset--color--sage-06, #d6ded1);
}

.ec-inline-cta {
  margin: 0;
  padding: 28px;
  border-radius: var(--ec-radius);
}

.ec-inline-cta h3 {
  margin: 0 0 14px;
  color: var(--wp--preset--color--white, #fff);
  font-size: 24px;
}

.ec-inline-cta .ec-button {
  margin-top: 22px;
}

.ec-footer {
  padding: 26px 0 24px;
}

.ec-footer__inner {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 0.9fr 1.1fr 1fr;
  gap: 28px;
}

.ec-footer p,
.ec-footer a,
.ec-footer li {
  color: var(--wp--preset--color--sage-04, #d7ded4);
  font-size: 13px;
}

.ec-footer a {
  display: block;
  text-decoration: none;
  margin-bottom: 7px;
}

.ec-footer h3,
.ec-footer h2 {
  margin: 0 0 12px;
  color: var(--wp--preset--color--white, #fff);
  font-size: 15px;
}

.ec-page-hero {
  background: var(--wp--preset--color--white, #fff);
  padding: 52px 0 42px;
}

.ec-page-hero--dark {
  background: radial-gradient(circle at 70% 18%, color-mix(in srgb, var(--ec-sage-2) 18%, transparent), transparent 36%), linear-gradient(135deg, var(--wp--preset--color--ink-18, #0e1922), var(--wp--preset--color--ink-07, #182934));
  color: var(--wp--preset--color--white, #fff);
}

.ec-page-hero--dark h1,
.ec-page-hero--dark p {
  color: var(--wp--preset--color--white, #fff);
}

.ec-page-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 488px);
  gap: 42px;
  align-items: center;
}

.ec-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.ec-service-card {
  min-height: 222px;
  padding: 20px 18px;
}

.ec-service-card .ec-price {
  display: block;
  margin-top: 24px;
  font-size: 18px;
  font-weight: 800;
}

.ec-service-card > * {
  min-width: 0;
}

.ec-service-card p:last-child {
  margin-top: auto;
}

.ec-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
}

.ec-step {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 14px;
}

.ec-step > strong {
  color: var(--ec-accent-text);
  font-size: 44px;
  line-height: 1;
}

.ec-step > h3 {
  margin: 0;
  color: var(--ec-accent-text);
  font-size: 44px;
  line-height: 1;
}

/* Step title: the <strong> that opens the step's paragraph. It used to inherit
   the big pale number style (.ec-step strong), which made it unreadable
   (1.85:1) and pushed it off-screen on phones (white-space: nowrap). */
.ec-step p strong {
  display: block;
  margin-bottom: 6px;
  color: var(--ec-ink);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
  white-space: normal;
}

.ec-blog-layout,
.ec-article-layout,
.ec-legal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 50px;
}

.ec-blog-layout > aside {
  align-self: start;
}

.ec-article-layout {
  grid-template-columns: minmax(0, 1fr) 228px;
  gap: 42px;
}

.ec-blog-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 36px;
}

.ec-tax-pills {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.ec-search input {
  width: 300px;
  min-height: 46px;
  border: 1px solid var(--ec-line);
  border-radius: var(--ec-radius);
  padding: 0 16px;
  font: inherit;
}

.ec-post-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

/*
 * WordPress core injects `:where(.is-layout-flow) > * { margin-block-start: 24px }`
 * (global-styles-inline-css) for every flow-layout container's non-first child. The
 * Post Template block backing /articles/ carries `is-layout-flow` even though
 * .ec-post-grid turns it into a 2-column CSS grid above, so every card but the very
 * first got pushed 24px lower than its row sibling (only the first row looked broken;
 * later rows got the same +24px on both cards, so they stayed flush but with extra
 * gap). Cancel it here with plain selector specificity, same pattern as the
 * .ec-dashboard fix - no !important, no change to the global block-gap setting.
 */
.ec-post-grid.is-layout-flow > * {
  margin-block-start: 0;
}

.ec-article-card {
  overflow: hidden;
}

.ec-article-card__body {
  padding: 20px;
}

.ec-article-card h2 {
  font-size: 20px;
}

.ec-article-card p {
  color: var(--ec-muted);
  font-size: 14px;
}

.ec-sidebar-card {
  padding: 22px;
  margin-bottom: 28px;
}

.ec-sidebar-card .wp-block-post-title a {
  text-decoration: underline;
  text-decoration-color: var(--ec-line);
  text-underline-offset: 3px;
}

.ec-sidebar-card .wp-block-post-title a:hover {
  color: var(--ec-sage-2);
  text-decoration-color: var(--ec-sage-2);
}

.ec-popular-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  margin-top: 18px;
}

.ec-article-card .post-categories {
  list-style: none;
  margin: 0 0 11px;
  padding: 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ec-article-card .post-categories a {
  display: inline-flex;
  border: 1px solid color-mix(in srgb, var(--ec-sage) 35%, transparent);
  border-radius: 999px;
  padding: 4px 9px;
  color: var(--wp--preset--color--sage-33, #53634f);
  background: var(--wp--preset--color--cream-01, #f7f8f4);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}

.ec-popular-item h4 {
  margin: 0 0 5px;
  font-size: 13px;
  line-height: 1.3;
}

.ec-article {
  padding: 28px 0 0;
}

.ec-breadcrumbs {
  color: var(--ec-text-subtle);
  font-size: 13px;
  margin-bottom: 22px;
}

.ec-article .ec-lead {
  font-size: 17px;
  color: var(--wp--preset--color--ink-04, #38434c);
  margin-bottom: 28px;
}

.ec-article-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--ec-line);
  padding-bottom: 22px;
  margin-bottom: 24px;
}

.ec-finance-panel {
  min-height: 310px;
  padding: 28px;
  border-radius: var(--ec-radius);
  color: var(--wp--preset--color--white, #fff);
  background: linear-gradient(135deg, var(--wp--preset--color--ink-16, #101b24), var(--wp--preset--color--ink-09, #172832));
  position: relative;
  overflow: hidden;
  margin: 24px 0;
}

.ec-finance-panel .ec-big {
  color: var(--ec-sage-2);
  font-size: 44px;
  font-weight: 800;
}

.ec-finance-panel--article {
  min-height: 284px;
}

.ec-finance-panel--article .ec-bars {
  left: 34px;
  right: 34px;
  bottom: 58px;
  height: 122px;
  gap: 12px;
}

.ec-finance-panel--article .ec-bars span:nth-child(even) {
  background: linear-gradient(180deg, var(--wp--preset--color--sage-03, #d9ddd7), var(--wp--preset--color--gray-03, #87908a));
}

.ec-finance-metrics {
  position: absolute;
  top: 28px;
  right: 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.ec-finance-metrics span {
  min-width: 112px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--ec-white) 15%, transparent);
  border-radius: var(--ec-radius);
  color: var(--wp--preset--color--white, #fff);
  font-weight: 800;
}

.ec-finance-metrics b {
  display: block;
  margin-bottom: 5px;
  color: var(--wp--preset--color--sage-02, #dce5d6);
  font-size: 12px;
}

.ec-finance-panel--compact {
  min-height: 0;
  padding: 22px 24px;
}

.ec-finance-panel h3,
.ec-finance-panel p,
.ec-sidebar-card.ec-dark-cta h3,
.ec-sidebar-card.ec-dark-cta p {
  color: var(--wp--preset--color--cream-07, #edf3ec);
}

.ec-article-content h2 {
  margin-top: 34px;
  font-size: 25px;
}

.ec-article-content p {
  color: var(--wp--preset--color--ink-03, #39444d);
}

.ec-article-content .ec-finance-panel h3,
.ec-article-content .ec-finance-panel p {
  color: var(--wp--preset--color--cream-07, #edf3ec);
}

.ec-note {
  padding: 18px 22px;
  border-radius: var(--ec-radius);
  background: var(--wp--preset--color--cream-06, #f2f3f0);
  border: 1px solid var(--ec-line);
  font-weight: 700;
}

.ec-note--inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 26px;
}

.ec-note--inline h3,
.ec-note--inline p,
.ec-note--inline .ec-note__title {
  margin: 0;
}

.ec-faq .wp-block-details {
  padding: 18px 22px;
  border: 1px solid var(--ec-line);
  border-radius: var(--ec-radius);
  background: var(--wp--preset--color--white, #fff);
  box-shadow: 0 14px 38px color-mix(in srgb, var(--ec-ink) 6%, transparent);
}

.ec-faq .wp-block-details + .wp-block-details {
  margin-top: 12px;
}

.ec-faq summary {
  cursor: pointer;
  font-weight: 800;
}

.ec-file-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--ec-line);
  border-radius: var(--ec-radius);
  background: var(--wp--preset--color--cream-01, #f7f8f4);
}

.ec-file-card a {
  font-weight: 800;
}

.ec-contact-card {
  color: var(--ec-text);
}

/* 404 "maybe you meant" list: plain <ul><li><a> text links sit too close
   together for a touch target (Lighthouse target-size, <24x24 CSS px) —
   scoped to this list only, not .ec-contact-card ul in general, so the
   existing contacts-page card is untouched. */
.ec-tap-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ec-tap-list li + li {
  margin-top: 4px;
}

.ec-tap-list a {
  display: inline-block;
  padding: 6px 2px;
}

.ec-expert-image img {
  width: 100%;
  border-radius: var(--ec-radius);
  box-shadow: var(--ec-shadow);
}

.ec-table {
  width: 100%;
  margin: 20px 0;
  font-size: 14px;
  overflow-x: auto;
}

.ec-table table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

.ec-table th,
.ec-table td {
  border: 1px solid var(--ec-line);
  padding: 11px 14px;
  text-align: left;
  overflow-wrap: break-word;
  word-break: normal;
  min-width: 72px;
}

.ec-table th {
  background: var(--wp--preset--color--cream-04, #f4f5f1);
}

.ec-reasons {
  list-style: none;
  padding: 0;
}

.ec-reasons li {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 15px;
  margin: 12px 0;
}

.ec-reasons strong {
  color: var(--ec-sage);
  font-size: 32px;
}

.ec-legal-layout {
  grid-template-columns: 280px minmax(0, 1fr);
  padding: 42px 0 54px;
}

.ec-doc-toc,
.ec-legal-box {
  padding: 24px;
}

.ec-doc-toc {
  position: sticky;
  top: 20px;
}

.ec-doc-toc ol {
  margin: 14px 0 0;
  padding-left: 18px;
  line-height: 2.05;
  color: var(--wp--preset--color--ink-02, #47525b);
}

.ec-legal h1 {
  margin: 0 0 14px;
  font-size: 34px;
}

.ec-legal h2 {
  margin: 26px 0 8px;
  font-size: 21px;
}

.ec-legal p,
.ec-legal li {
  color: var(--wp--preset--color--ink-04, #38434c);
}

.editor-styles-wrapper {
  --ec-wide: 1136px;
  --ec-reference-wide: 912px;
  color: var(--ec-text);
  font-family: var(--ec-font);
}

.editor-styles-wrapper .is-root-container > .ec-pattern-page,
.editor-styles-wrapper .wp-block-post-content > .ec-pattern-page,
.editor-styles-wrapper .ec-pattern-page {
  max-width: none;
  width: 100%;
}

.editor-styles-wrapper .ec-shell,
.editor-styles-wrapper .ec-section,
.editor-styles-wrapper .ec-header__inner,
.editor-styles-wrapper .ec-footer__inner {
  max-width: var(--ec-wide);
  width: min(var(--ec-wide), calc(100% - 112px));
  margin-inline: auto;
}

.editor-styles-wrapper .ec-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 488px);
  max-width: var(--ec-wide);
}

.editor-styles-wrapper .ec-hero h1,
.editor-styles-wrapper .ec-hero p {
  max-width: none;
}

.editor-styles-wrapper .ec-dashboard,
.editor-styles-wrapper .ec-problem-grid,
.editor-styles-wrapper .ec-services-split,
.editor-styles-wrapper .ec-benefits,
.editor-styles-wrapper .ec-case-grid,
.editor-styles-wrapper .ec-about-grid,
.editor-styles-wrapper .ec-mini-articles {
  max-width: none;
}

.editor-styles-wrapper .ec-dark-cta__inner {
  display: flex;
}

@media (min-width: 861px) and (max-width: 1180px) {
  body {
    font-size: 13px;
  }

  .ec-nav {
    gap: 44px;
    font-size: 13px;
  }

  .ec-button,
  .wp-block-button.ec-button .wp-block-button__link {
    min-height: 36px;
    padding: 9px 18px;
    font-size: 12px;
  }

  .ec-hero {
    padding-top: 14px;
  }

  .ec-hero .ec-shell {
    width: min(810px, calc(100% - 112px));
  }

  .ec-hero__grid {
    grid-template-columns: 370px 392px;
    gap: 46px;
  }

  .ec-hero h1 {
    font-size: 29px;
    line-height: 1.07;
  }

  .ec-page-hero h1,
  .ec-article h1 {
    font-size: 34px;
  }

  .ec-hero p,
  .ec-page-hero p {
    margin: 18px 0 20px;
    line-height: 1.5;
  }

  .ec-hero p {
    margin: 14px 0 16px;
    font-size: 12px;
    line-height: 1.45;
  }

  .ec-hero .ec-actions {
    gap: 14px;
  }

  .ec-hero .ec-button,
  .ec-hero .wp-block-button.ec-button .wp-block-button__link {
    min-height: 34px;
    padding: 8px 14px;
    font-size: 11px;
  }

  .ec-kpi {
    min-height: 100px;
    padding: 14px 16px;
  }

  .ec-kpi__value {
    font-size: 22px;
  }

  .ec-wide-chart {
    height: 82px;
    padding: 14px 18px;
  }

  .ec-band {
    padding: 10px 0 12px;
  }

  .ec-band h2,
  .ec-section h2 {
    margin-bottom: 12px;
    font-size: 21px;
  }

  .ec-problem {
    min-height: 150px;
    padding: 14px;
  }

  .ec-problem strong {
    font-size: 36px;
  }

  .ec-problem h3 {
    font-size: 16px;
  }

  .ec-problem ul,
  .ec-service-large ul {
    font-size: 11px;
    line-height: 1.45;
  }

  .ec-section {
    padding-block: 10px;
  }

  .ec-service-large {
    min-height: 156px;
    padding: 16px 18px;
  }

  .ec-service-large h3,
  .ec-service-large h2.ec-h3,
  .ec-service-card h3,
  .ec-case-card h3,
  .ec-person h3,
  .ec-article-card h2,
  .ec-sidebar-card h3 {
    margin-bottom: 8px;
  }

  .ec-benefits {
    gap: 12px;
  }

  .ec-benefit .ec-icon {
    width: 34px;
    height: 34px;
    border-width: 2px;
  }

  .ec-benefit h3 {
    margin: 6px 0 4px;
    font-size: 11px;
    line-height: 1.18;
  }

  .ec-benefit p,
  .ec-case-card p,
  .ec-person p,
  .ec-mini-article h3,
  .ec-article-card p {
    font-size: 11px;
    line-height: 1.35;
  }

  .ec-case-card {
    min-height: 112px;
    padding: 14px;
  }

  .ec-case-card h3 {
    font-size: inherit;
  }

  .ec-person {
    grid-template-columns: 64px 1fr;
    gap: 12px;
    padding: 12px;
  }

  .ec-avatar {
    width: 64px;
    height: 64px;
  }

  .ec-mini-article {
    grid-template-columns: 86px 1fr;
    gap: 10px;
  }

  .ec-thumb {
    height: 66px;
  }

  .ec-page-hero {
    padding: 40px 0 34px;
  }

  body.ecomcfo-services:not(.home):not(.front-page) .ec-header__inner,
  body.ecomcfo-articles:not(.home):not(.front-page) .ec-header__inner {
    height: 80px;
  }

  body.ecomcfo-services .ec-page-hero {
    padding: 23px 0 29px;
  }

  body.ecomcfo-services .ec-page-hero__grid {
    grid-template-columns: 430px 440px;
    gap: 42px;
  }

  body.ecomcfo-services .ec-page-hero h1 {
    font-size: 34px;
    line-height: 1.08;
  }

  body.ecomcfo-services .ec-page-hero p {
    max-width: 420px;
    margin: 16px 0 21px;
    line-height: 1.5;
  }

  body.ecomcfo-services .ec-page-hero .ec-actions {
    flex-wrap: nowrap;
    gap: 12px;
  }

  body.ecomcfo-services .ec-page-hero .ec-actions .ec-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-width: 2px;
    background: color-mix(in srgb, var(--ec-sage-2) 28%, transparent);
    color: var(--wp--preset--color--cream-09, #eef3e8);
  }

  body.ecomcfo-services .ec-page-hero .ec-actions p {
    margin: 4px 0 0;
    max-width: 170px;
    font-size: 10px;
    line-height: 1.3;
  }

  body.ecomcfo-services .ec-dashboard--service {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body.ecomcfo-services .ec-dashboard--service .ec-kpi,
  body.ecomcfo-services .ec-dashboard--service .ec-wide-chart {
    min-height: 140px;
    padding: 18px 20px;
    background: color-mix(in srgb, var(--ec-white) 3.5%, transparent);
    border-color: color-mix(in srgb, var(--ec-white) 18%, transparent);
    color: var(--wp--preset--color--white, #fff);
    box-shadow: none;
  }

  body.ecomcfo-services .ec-dashboard--service .ec-kpi__label,
  body.ecomcfo-services .ec-dashboard--service .ec-kpi__delta {
    color: var(--wp--preset--color--cream-08, #edf2ea);
  }

  body.ecomcfo-services .ec-dashboard--service .ec-kpi__value {
    font-size: 24px;
  }

  body.ecomcfo-services .ec-dashboard--service .ec-donut {
    width: 74px;
    height: 74px;
    inset: 48px auto auto 18px;
  }

  body.ecomcfo-services .ec-dashboard--service .ec-donut::after {
    background: var(--wp--preset--color--ink-14, #14222c);
  }

  body.ecomcfo-services .ec-dashboard--service .ec-wide-chart {
    height: 126px;
  }

  body.ecomcfo-services .ec-dashboard--service .ec-wide-chart .ec-chart-line {
    display: none;
  }

  body.ecomcfo-services .ec-dashboard--service .ec-wide-chart::before {
    display: block;
    inset: auto 28px 30px 64px;
    height: 64px;
    background:
      linear-gradient(to top, var(--wp--preset--color--sage-28, #6f8068) 0 18px, transparent 18px) 0 100% / 14px 64px no-repeat,
      linear-gradient(to top, var(--wp--preset--color--sage-22, #879a7c) 0 25px, transparent 25px) 34px 100% / 14px 64px no-repeat,
      linear-gradient(to top, var(--wp--preset--color--sage-18, #a0ad95) 0 34px, transparent 34px) 68px 100% / 14px 64px no-repeat,
      linear-gradient(to top, var(--wp--preset--color--sage-27, #76886e) 0 15px, transparent 15px) 102px 100% / 14px 64px no-repeat,
      linear-gradient(to top, var(--wp--preset--color--sage-28, #6f8068) 0 18px, transparent 18px) 136px 100% / 14px 64px no-repeat,
      linear-gradient(to top, var(--wp--preset--color--sage-22, #879a7c) 0 20px, transparent 20px) 170px 100% / 14px 64px no-repeat,
      linear-gradient(to top, var(--wp--preset--color--sage-16, #a5b39a) 0 38px, transparent 38px) 204px 100% / 14px 64px no-repeat,
      linear-gradient(to top, var(--wp--preset--color--sage-26, #7c8f72) 0 24px, transparent 24px) 238px 100% / 14px 64px no-repeat,
      linear-gradient(to top, var(--wp--preset--color--sage-22, #879a7c) 0 25px, transparent 25px) 272px 100% / 14px 64px no-repeat,
      linear-gradient(to top, var(--wp--preset--color--sage-20, #98a88d) 0 34px, transparent 34px) 306px 100% / 14px 64px no-repeat,
      linear-gradient(to top, var(--wp--preset--color--sage-12, #aab79e) 0 46px, transparent 46px) 340px 100% / 14px 64px no-repeat,
      linear-gradient(to top, var(--wp--preset--color--sage-11, #b6c2aa) 0 58px, transparent 58px) 374px 100% / 14px 64px no-repeat;
  }

  body.ecomcfo-services .ec-service-card {
    min-height: 0;
    height: 244px;
    padding: 17px 17px 15px;
    display: flex;
    flex-direction: column;
  }

  body.ecomcfo-services .ec-service-card .ec-icon {
    width: 42px;
    height: 42px;
    margin-bottom: 8px;
    border-width: 2px;
  }

  body.ecomcfo-services .ec-service-card h3 {
    font-size: 14px;
    line-height: 1.2;
  }

  body.ecomcfo-services .ec-service-card p {
    margin: 0;
    font-size: 11px;
    line-height: 1.38;
  }

  body.ecomcfo-services .ec-service-card .ec-price {
    margin-top: auto;
    font-size: 15px;
  }

  body.ecomcfo-services .ec-steps {
    gap: 32px;
  }

  body.ecomcfo-services .ec-step {
    grid-template-columns: 46px 1fr;
    gap: 10px;
  }

  body.ecomcfo-services .ec-step > strong {
    font-size: 38px;
  }

  body.ecomcfo-services .ec-step > h3 {
    font-size: 38px;
  }

  body:not(.home):not(.front-page) .ec-services-split .ec-service-large {
    padding-right: 132px;
  }

  body.ecomcfo-services .ec-services-split--cases {
    grid-template-columns: 1fr 1fr 0.96fr;
    gap: 10px;
  }

  body.ecomcfo-services .ec-services-split--cases .ec-kpi,
  body.ecomcfo-services .ec-services-split--cases .ec-service-large,
  body.ecomcfo-services .ec-services-split--cases .ec-inline-cta {
    min-height: 156px;
    height: 174px;
  }

  body.ecomcfo-services .ec-services-split--cases .ec-inline-cta {
    padding: 22px 24px;
  }

  body.ecomcfo-articles .ec-page-hero {
    padding: 32px 0 29px;
  }

  body.ecomcfo-articles .ec-page-hero__grid {
    grid-template-columns: 360px minmax(0, 450px);
    gap: 104px;
  }

  body.ecomcfo-articles .ec-article-hero-visual {
    min-height: 190px;
  }

  body.ecomcfo-articles .ec-blog-layout {
    grid-template-columns: 617px 253px;
    gap: 42px;
    padding-top: 14px;
  }

  body.ecomcfo-articles .ec-blog-layout > div {
    display: contents;
  }

  body.ecomcfo-articles .ec-blog-tools {
    grid-column: 1 / -1;
    margin-bottom: 18px;
  }

  body.ecomcfo-articles .ec-tax-pills {
    gap: 10px;
    flex-wrap: nowrap;
  }

  body.ecomcfo-articles .ec-search input {
    width: 248px;
    min-height: 36px;
    font-size: 12px;
  }

  body.ecomcfo-articles .ec-post-grid {
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  body.ecomcfo-articles .ec-blog-layout > aside {
    grid-column: 2;
    grid-row: 2 / span 2;
  }

  body.ecomcfo-articles .ec-article-card {
    height: 281px;
    display: flex;
    flex-direction: column;
  }

  body.ecomcfo-articles .ec-article-card .ec-thumb {
    flex: 0 0 116px;
    height: 116px;
  }

  body.ecomcfo-articles .ec-article-card__body {
    flex: 1;
    padding: 16px 17px 14px;
    overflow: hidden;
  }

  body.ecomcfo-articles .ec-article-card h2 {
    margin-bottom: 8px;
    font-size: 17px;
    line-height: 1.22;
  }

  body.ecomcfo-articles .ec-article-card p {
    margin: 0 0 10px;
    font-size: 10.5px;
    line-height: 1.35;
  }

  body.ecomcfo-articles .ec-sidebar-card {
    padding: 18px;
    margin-bottom: 30px;
  }

  body.ecomcfo-articles .ec-popular-item {
    grid-template-columns: 58px 1fr;
    gap: 12px;
    margin-top: 16px;
  }

  body.ecomcfo-articles .ec-popular-item .ec-thumb {
    height: 58px;
  }

  body.ecomcfo-articles .ec-sidebar-card.ec-dark-cta {
    padding: 28px 20px;
  }

  body.ecomcfo-articles .ec-pagination {
    grid-column: 1;
    grid-row: 3;
  }

  .ec-service-card {
    min-height: 210px;
    padding: 18px 16px;
  }

  .ec-service-card .ec-price {
    margin-top: 18px;
    font-size: 16px;
  }

  .ec-steps {
    gap: 24px;
  }

  .ec-step {
    grid-template-columns: 48px 1fr;
    gap: 10px;
  }

  .ec-step > strong {
    font-size: 38px;
  }

  .ec-blog-layout,
  .ec-legal-layout {
    gap: 36px;
  }

  .ec-article {
    padding-top: 22px;
  }

  .ec-breadcrumbs {
    margin-bottom: 16px;
  }

  .ec-article .ec-lead {
    margin-bottom: 20px;
    font-size: 14px;
  }

  .ec-article-meta {
    padding-bottom: 16px;
    margin-bottom: 18px;
  }

  .ec-finance-panel {
    padding: 22px;
    margin: 20px 0;
  }

  .ec-finance-panel--article {
    min-height: 284px;
  }

  .ec-finance-panel .ec-big {
    font-size: 40px;
  }

  .ec-sidebar-card {
    padding: 16px;
    margin-bottom: 18px;
  }

  .ec-popular-item {
    grid-template-columns: 52px 1fr;
    gap: 10px;
    margin-top: 14px;
  }

  .ec-popular-item h4 {
    font-size: 11px;
  }

  .ec-article-content h2 {
    margin-top: 24px;
    font-size: 21px;
  }

  .ec-note {
    padding: 14px 16px;
  }

  .ec-table {
    margin: 16px 0;
    font-size: 12px;
  }

  .ec-table th,
  .ec-table td {
    padding: 9px 10px;
  }

  .ec-reasons li {
    grid-template-columns: 44px 1fr;
    gap: 12px;
    margin: 9px 0;
  }

  .ec-reasons strong {
    font-size: 28px;
  }

  .ec-legal-layout {
    padding: 28px 0 34px;
    grid-template-columns: 220px minmax(0, 1fr);
  }

  body.ecomcfo-privacy .ec-legal-layout {
    grid-template-columns: 219px 665px;
    gap: 28px;
    padding: 20px 0 20px;
  }

  body.ecomcfo-consent .ec-legal-layout {
    grid-template-columns: 212px 675px;
    gap: 24px;
    padding: 18px 0 20px;
  }

  .ec-doc-toc,
  .ec-legal-box {
    padding: 18px;
  }

  body.ecomcfo-privacy .ec-doc-toc,
  body.ecomcfo-privacy .ec-legal-box,
  body.ecomcfo-consent .ec-doc-toc,
  body.ecomcfo-consent .ec-legal-box {
    padding: 16px 18px;
    font-size: 10.5px;
    line-height: 1.45;
  }

  body.ecomcfo-privacy .ec-doc-toc ol,
  body.ecomcfo-consent .ec-doc-toc ol {
    margin-top: 12px;
    line-height: 1.58;
  }

  body.ecomcfo-privacy .ec-legal-box,
  body.ecomcfo-consent .ec-legal-box {
    margin-top: 20px;
  }

  body.ecomcfo-privacy .ec-legal-box .ec-icon,
  body.ecomcfo-consent .ec-legal-box .ec-icon {
    width: 38px;
    height: 38px;
    border-width: 2px;
    margin-bottom: 8px;
  }

  .ec-legal h1 {
    font-size: 30px;
  }

  body.ecomcfo-privacy .ec-legal,
  body.ecomcfo-consent .ec-legal {
    font-size: 9.4px;
    line-height: 1.34;
  }

  body.ecomcfo-privacy .ec-breadcrumbs,
  body.ecomcfo-consent .ec-breadcrumbs {
    margin-bottom: 16px;
    font-size: 10px;
  }

  body.ecomcfo-privacy .ec-legal h1,
  body.ecomcfo-consent .ec-legal h1 {
    margin-bottom: 11px;
    font-size: 24px;
    line-height: 1.1;
  }

  .ec-legal h2 {
    margin: 20px 0 7px;
    font-size: 18px;
  }

  body.ecomcfo-privacy .ec-legal h2,
  body.ecomcfo-consent .ec-legal h2 {
    margin: 10px 0 3px;
    font-size: 12.5px;
    line-height: 1.2;
  }

  body.ecomcfo-privacy .ec-legal p,
  body.ecomcfo-privacy .ec-legal li,
  body.ecomcfo-consent .ec-legal p,
  body.ecomcfo-consent .ec-legal li {
    margin-top: 0;
    margin-bottom: 5px;
  }

  body.ecomcfo-consent .ec-legal ul,
  body.ecomcfo-consent .ec-legal ol {
    margin-block: 4px 7px;
  }

  body.ecomcfo-privacy .ec-legal {
    font-size: 10.8px;
    line-height: 1.45;
  }

  body.ecomcfo-privacy .ec-legal h1 {
    font-size: 28px;
  }

  body.ecomcfo-privacy .ec-legal h2 {
    margin: 15px 0 5px;
    font-size: 15px;
  }

  body.ecomcfo-privacy .ec-legal p,
  body.ecomcfo-privacy .ec-legal li {
    margin-bottom: 8px;
  }

  body.ecomcfo-privacy .ec-legal ul,
  body.ecomcfo-consent .ec-legal ul {
    margin: 6px 0 10px;
    padding-left: 20px;
  }

  body.ecomcfo-consent .ec-note--inline {
    min-height: 58px;
    padding: 10px 14px;
  }

  body.ecomcfo-consent .ec-note--inline h3 {
    margin-bottom: 2px;
    font-size: 13px;
  }

  body.ecomcfo-consent .ec-note--inline p {
    margin: 0;
    font-size: 10px;
  }

  .ec-dark-cta {
    margin-top: 10px;
    padding: 16px 0;
  }

  .ec-dark-cta h2 {
    font-size: 21px;
  }

  .ec-footer {
    padding: 18px 0;
  }

  .ec-footer__inner {
    gap: 22px;
  }

  .ec-footer p,
  .ec-footer a,
  .ec-footer li {
    margin-bottom: 4px;
    font-size: 10px;
    line-height: 1.35;
  }

  .ec-footer h3,
  .ec-footer h2 {
    margin-bottom: 8px;
    font-size: 12px;
  }

  .ec-article-layout .ec-sidebar-card.ec-dark-cta .ec-button {
    min-height: 34px;
    padding-inline: 16px;
    white-space: normal;
  }

  body.home .ec-hero h1 {
    font-size: 27px;
    max-width: 390px;
  }

  body.home .ec-hero p {
    max-width: 360px;
    margin: 14px 0 18px;
    font-size: 11px;
    line-height: 1.38;
  }

  body.home .ec-section,
  body.home .ec-dark-cta__inner {
    width: min(824px, calc(100% - 112px));
  }

  body.home .ec-dashboard {
    gap: 10px;
  }

  body.home .ec-hero__grid {
    grid-template-columns: 396px 392px;
    gap: 20px;
  }

  body.home .ec-kpi {
    min-height: 104px;
    padding: 12px 14px;
  }

  body.home .ec-kpi > p {
    margin: 0;
  }

  body.home .ec-kpi__label {
    font-size: 10px;
    line-height: 1.25;
  }

  body.home .ec-kpi__value {
    font-size: 22px;
    line-height: 1.1;
  }

  body.home .ec-kpi__delta {
    font-size: 10px;
    line-height: 1.2;
  }

  body.home .ec-kpi__eta,
  body.home .ec-kpi--status > p:not([class]) {
    font-size: 10px;
    line-height: 1.25;
  }

  body.home .ec-wide-chart {
    height: 82px;
  }

  body.home .ec-kpi--profit .ec-spark,
  body.home .ec-kpi--cashflow .ec-bars {
    flex: 0 0 34px;
    min-height: 34px;
  }

  body.home .ec-kpi__visual-row {
    flex: 0 0 42px;
    min-height: 42px;
  }

  body.home .ec-kpi--status .ec-riskbar {
    margin-top: 4px;
  }

  body.home .ec-band {
    padding: 8px 0 10px;
  }

  body.home .ec-problem-grid {
    gap: 8px;
  }

  body.home .ec-problem {
    min-height: 196px;
    padding: 14px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 44px;
    grid-template-rows: auto auto 1fr;
    column-gap: 8px;
    row-gap: 4px;
    align-items: start;
  }

  body.home .ec-problem-number {
    grid-column: 1;
    grid-row: 1 / span 2;
    float: none;
  }

  body.home .ec-problem strong {
    float: none;
    margin-right: 0;
    font-size: 34px;
  }

  body.home .ec-problem h3 {
    grid-column: 2 / 4;
    grid-row: 1;
    margin: 0;
    font-size: 14px;
    line-height: 1.18;
  }

  body.home .ec-problem p:not(.ec-problem-number):not(.ec-problem__icon) {
    grid-column: 2 / 4;
    grid-row: 2;
    margin: 0;
    font-size: 10px;
    line-height: 1.25;
  }

  body.home .ec-problem p,
  body.home .ec-problem ul,
  body.home .ec-service-large ul {
    font-size: 10px;
    line-height: 1.32;
  }

  body.home .ec-problem ul {
    grid-column: 1 / 4;
    grid-row: 3;
    margin-top: 6px;
    padding-left: 15px;
    padding-right: 50px;
  }

  body.home .ec-problem .ec-problem__icon {
    grid-column: 3;
    grid-row: 3;
    align-self: end;
    justify-self: end;
    width: 42px;
    height: 42px;
    margin: 0;
    font-size: 20px;
  }

  body.home .ec-section {
    padding-block: 4px;
  }

  body.home .ec-section > h2,
  body.home .ec-section > .wp-block-heading {
    margin-bottom: 10px;
  }

  body.home .ec-section .wp-block-columns {
    margin-top: 0;
  }

  body.home .ec-service-large {
    min-height: 104px;
    padding: 10px 118px 10px 14px;
  }

  body.home .ec-service-large::after {
    right: 16px;
    bottom: 14px;
    width: 82px;
    height: 82px;
  }

  body.home .ec-service-large p,
  body.home .ec-case-card p,
  body.home .ec-person p,
  body.home .ec-mini-article h3 {
    font-size: 10px;
    line-height: 1.2;
  }

  body.home .ec-service-large h3,
  body.home .ec-service-large h2.ec-h3,
  body.home .ec-case-card h3,
  body.home .ec-person h3,
  body.home .ec-mini-article h3 {
    margin-bottom: 5px;
  }

  body.home .ec-service-large ul {
    margin: 7px 0;
  }

  body.home .ec-benefit .ec-icon {
    width: 30px;
    height: 30px;
  }

  body.home .ec-benefit h3 {
    margin: 5px 0 3px;
    font-size: 10px;
    line-height: 1.12;
  }

  body.home .ec-benefit p {
    font-size: 9.5px;
    line-height: 1.26;
  }

  body.home .ec-case-card {
    min-height: 104px;
    grid-template-columns: minmax(0, 1fr) 88px;
    column-gap: 10px;
    padding: 10px;
  }

  body.home .ec-case-card .ec-tag {
    padding: 3px 7px;
    font-size: 9px;
  }

  body.home .ec-case-card h3 {
    font-size: 11px;
    line-height: 1.18;
  }

  body.home .ec-case-card p:not(.ec-case-metric) {
    margin-bottom: 0;
    font-size: 10px;
    line-height: 1.25;
  }

  body.home .ec-case-metric {
    font-size: 9px;
  }

  body.home .ec-case-metric strong {
    font-size: 13px;
  }

  body.home .ec-person {
    grid-template-columns: 66px 1fr;
    gap: 10px;
    padding: 6px 9px;
  }

  body.home .ec-avatar {
    width: 64px;
    height: 64px;
  }

  body.home .ec-person h3 {
    margin-bottom: 4px;
    font-size: 13px;
  }

  body.home .ec-person p {
    margin-bottom: 4px;
  }

  body.home .ec-person .ec-tag {
    padding: 2px 8px;
    font-size: 8px;
  }

  body.home .ec-mini-article {
    grid-template-columns: 86px 1fr;
    min-height: 54px;
  }

  body.home .ec-mini-article h3 {
    margin-left: 14px;
  }

  body.home .ec-thumb {
    height: 54px;
  }

  body.home .ec-dark-cta {
    margin-top: 12px;
    padding: 8px 0;
  }

  body.home .ec-dark-cta h2 {
    font-size: 16px;
  }

  body.home .ec-dark-cta p {
    font-size: 10px;
  }

  body.home .ec-footer {
    padding: 8px 0;
  }

  body.home .ec-footer__inner {
    gap: 14px;
  }

  body.home .ec-footer p,
  body.home .ec-footer a,
  body.home .ec-footer li {
    margin-bottom: 2px;
    font-size: 8.5px;
    line-height: 1.25;
  }

  body.home .ec-footer h3,
  body.home .ec-footer h2 {
    margin-bottom: 4px;
    font-size: 10px;
  }

  body.home .ec-footer .ec-logo {
    width: 48px;
    padding: 6px;
  }

}

@media (max-width: 860px) {
  .ec-hero__grid,
  .ec-page-hero__grid,
  .ec-blog-layout,
  .ec-article-layout,
  .ec-legal-layout {
    grid-template-columns: 1fr;
  }

  .ec-dashboard {
    max-width: 620px;
  }

  .ec-pattern-page .ec-dashboard {
    grid-template-rows: none;
  }

  .ec-benefits,
  .ec-footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .ec-service-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  }
}

/* Tablet + phone header: logo + burger. Below 1025px the full nav and the
   Telegram CTA don't fit next to the logo (iPad portrait 810px overflowed). */
@media (max-width: 1024px) {
  .ec-header__inner {
    height: auto;
    min-height: 72px;
    padding-block: 12px;
    align-items: center;
    flex-wrap: nowrap;
  }

  .ec-nav,
  .ec-header__inner > .ec-button {
    display: none;
  }

  .ec-mobile-nav {
    display: block;
    margin-left: auto;
    position: relative;
  }

  .ec-mobile-nav summary {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--ec-sage) 55%, transparent);
    display: grid;
    place-items: center;
    cursor: pointer;
    list-style: none;
  }

  .ec-mobile-nav summary::-webkit-details-marker {
    display: none;
  }

  .ec-mobile-nav summary::before {
    content: "";
    width: 18px;
    height: 12px;
    border-top: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    box-shadow: 0 5px 0 currentColor;
  }

  .ec-mobile-nav[open] summary::before {
    height: 18px;
    border: 0;
    box-shadow: none;
    background:
      linear-gradient(45deg, transparent 45%, currentColor 46% 54%, transparent 55%),
      linear-gradient(-45deg, transparent 45%, currentColor 46% 54%, transparent 55%);
  }

  .ec-mobile-nav__panel {
    position: absolute;
    top: 52px;
    right: 0;
    z-index: 10;
    width: min(300px, calc(100vw - 36px));
    padding: 14px;
    border: 1px solid var(--ec-line);
    border-radius: var(--ec-radius);
    background: var(--wp--preset--color--white, #fff);
    color: var(--ec-ink);
    box-shadow: var(--ec-shadow);
  }

  .ec-mobile-nav__panel a {
    display: block;
    padding: 10px 8px;
    font-weight: 800;
    text-decoration: none;
  }

  .ec-mobile-nav__panel .ec-button {
    margin-top: 8px;
    width: 100%;
  }
}

@media (max-width: 800px) {
  .ec-shell,
  .ec-section,
  .ec-header__inner,
  .ec-footer__inner {
    width: calc(100% - 36px);
  }

  .ec-hero h1,
  .ec-page-hero h1,
  .ec-article h1 {
    font-size: 32px;
  }

  .ec-hero__grid,
  .ec-page-hero__grid {
    gap: 28px;
  }

  .ec-dashboard,
  .ec-problem-grid,
  .ec-services-split,
  .ec-case-grid,
  .ec-about-grid,
  .ec-mini-articles,
  .ec-post-grid,
  .ec-steps {
    grid-template-columns: 1fr;
  }

  .ec-service-grid {
    grid-template-columns: 1fr;
  }

  .ec-benefits {
    grid-template-columns: 1fr;
  }

  .ec-blog-tools,
  .ec-dark-cta__inner,
  .ec-article-meta,
  .ec-file-card {
    align-items: stretch;
    flex-direction: column;
  }

  .ec-search input {
    width: 100%;
  }

  .ec-footer__inner {
    grid-template-columns: 1fr;
  }

  .ec-table {
    font-size: 12px;
    white-space: normal;
  }

  .ec-finance-metrics {
    position: relative;
    top: auto;
    right: auto;
    grid-template-columns: 1fr;
    margin-top: 18px;
  }

  .ec-finance-panel--article {
    min-height: 460px;
  }

  /* Some .ec-note--inline blocks are authored with layout:{type:flex,
     flexWrap:wrap} (Gutenberg's own reflow for the desktop row: text and
     button side by side, wrapping to two rows if they don't fit). Once this
     rule forces flex-direction:column for the stacked mobile layout, that
     leftover flex-wrap:wrap turns into a column-wrapping container instead —
     which sizes each child's cross-axis (width) from its own content instead
     of the container's actual width, ignoring how narrow the card really is.
     Cancelling it back to nowrap here makes width sizing follow the
     container again, same as any ordinary single-column stack. */
  .ec-note--inline {
    align-items: stretch;
    flex-direction: column;
    flex-wrap: nowrap;
  }

  /* .ec-button also forces white-space:nowrap on the label so it never wraps
     at normal (row-layout) button widths; kept wrapping here too as a second,
     independent safety net so a long label can never re-create the same
     overflow even if something else forces a wide flex-basis on this child.
     Selector matches .wp-block-button.ec-button .wp-block-button__link's own
     specificity (3 classes) — a lighter selector here would silently lose to
     that rule's white-space:nowrap and never actually apply. */
  .ec-note--inline .wp-block-button.ec-button .wp-block-button__link {
    width: 100%;
    min-width: 0;
    white-space: normal;
    text-align: center;
  }

}

@media (max-width: 430px) {
  .ec-shell,
  .ec-section,
  .ec-header__inner,
  .ec-footer__inner {
    padding-inline: 18px;
  }

  .ec-logo {
    width: 44px;
  }

  main .ec-button,
  footer .ec-button {
    width: 100%;
  }

  /* At this width .ec-wide-chart's "01..12" month index (word-spacing:14px from the base
     rule) no longer fits its inset (scrollWidth > clientWidth) and overflow:hidden clips
     the trailing months. Pre-existing, unrelated to the dashboard block-gap/row-height
     fix above; caught by the new inner-clipping regression gate. */
  .ec-wide-chart::after {
    word-spacing: 8px;
  }

  .ec-article-layout,
  .ec-legal-layout,
  .ec-article-content,
  .ec-legal,
  .ec-doc-toc,
  .ec-legal-box,
  .ec-finance-panel,
  .ec-note,
  .ec-table {
    max-width: 100%;
    min-width: 0;
  }

  .ec-table th,
  .ec-table td {
    padding: 9px 8px;
  }

  .ec-reasons li {
    grid-template-columns: 40px 1fr;
  }

  .ec-reasons strong {
    font-size: 26px;
  }

  .ec-kpi__value {
    font-size: 24px;
  }
}

.ec-page-hero--compact {
  padding-block: 42px 38px;
}

.ec-hero-panel {
  padding: 24px;
  border: 1px solid color-mix(in srgb, var(--ec-white) 18%, transparent);
  border-radius: var(--ec-radius);
  background: color-mix(in srgb, var(--ec-white) 5.5%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ec-white) 8%, transparent);
}

.ec-hero-panel p,
.ec-hero-panel ul {
  margin: 0;
  color: var(--wp--preset--color--cream-07, #edf3ec);
}

.ec-hero-panel p + ul {
  margin-top: 14px;
}

.ec-hero-panel li {
  margin-block: 8px;
  line-height: 1.45;
}

body .wp-block-columns.ec-service-grid--mvp,
.ec-service-grid--mvp {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

body .wp-block-columns.ec-service-grid--mvp > .wp-block-column,
.ec-service-grid--mvp > .wp-block-column {
  flex-basis: auto !important;
  flex-grow: initial !important;
  min-width: 0;
}

.ec-service-grid--mvp .ec-service-card {
  height: auto;
  min-height: 270px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

body.ecomcfo-service-detail .ec-service-grid--mvp .ec-service-card,
body.ecomcfo-expert .ec-service-grid--mvp .ec-service-card,
body.ecomcfo-platform .ec-service-grid--mvp .ec-service-card {
  min-height: 218px;
}

.ec-service-grid--mvp .ec-service-card h3 {
  font-size: 19px;
  line-height: 1.2;
}

.ec-service-grid--mvp .ec-service-card p,
.ec-service-grid--mvp .ec-service-card li {
  font-size: 14px;
  line-height: 1.52;
}

.ec-service-grid--mvp .ec-service-card p:last-child {
  margin-top: 0;
}

.ec-card-result {
  margin-top: auto;
  padding-top: 14px;
  color: var(--wp--preset--color--sage-32, #526451);
  font-weight: 800;
}

body .wp-block-columns.ec-steps--mvp,
.ec-steps--mvp {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

body .wp-block-columns.ec-steps--mvp > .wp-block-column {
  flex-basis: auto !important;
  flex-grow: initial !important;
  min-width: 0;
}

.ec-steps--mvp .ec-step {
  grid-template-columns: 44px 1fr;
  padding: 18px;
  border: 1px solid var(--ec-line);
  border-radius: var(--ec-radius);
  background: var(--wp--preset--color--white, #fff);
  box-shadow: 0 14px 38px color-mix(in srgb, var(--ec-ink) 6%, transparent);
}

.ec-steps--mvp .ec-step > h3,
.ec-steps--mvp .ec-step > strong {
  font-size: 30px;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.ec-expert-image--large img {
  aspect-ratio: 4 / 5;
  min-height: 360px;
  object-fit: cover;
  object-position: center top;
}

body.ecomcfo-expert .ec-page-hero {
  padding-block: 44px 38px;
}

.ec-article-featured {
  margin: 24px 0 30px;
}

.ec-article-featured img,
.ec-article-card .ec-thumb img,
.ec-article-card .wp-post-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ec-article-featured img {
  aspect-ratio: 16 / 9;
  height: auto;
  border-radius: var(--ec-radius);
  box-shadow: var(--ec-shadow);
}

.ec-article-card .ec-thumb {
  height: 150px;
}

.ec-article-content {
  max-width: 720px;
}

.ec-article-content h2,
.ec-article-content h3 {
  line-height: 1.2;
}

.ec-article-content li {
  margin-block: 8px;
  line-height: 1.6;
}

@media (min-width: 861px) and (max-width: 1180px) {
  body.ecomcfo-services .ec-page-hero__grid,
  body.ecomcfo-service-detail .ec-page-hero__grid,
  body.ecomcfo-platform .ec-page-hero__grid,
  body.ecomcfo-expert .ec-page-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(310px, 380px);
    gap: 30px;
  }

  body.ecomcfo-services .wp-block-columns.ec-service-grid--mvp,
  body.ecomcfo-service-detail .wp-block-columns.ec-service-grid--mvp,
  body.ecomcfo-platform .wp-block-columns.ec-service-grid--mvp,
  body.ecomcfo-expert .wp-block-columns.ec-service-grid--mvp {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.ecomcfo-services .ec-service-grid--mvp .ec-service-card,
  body.ecomcfo-service-detail .ec-service-grid--mvp .ec-service-card,
  body.ecomcfo-platform .ec-service-grid--mvp .ec-service-card,
  body.ecomcfo-expert .ec-service-grid--mvp .ec-service-card {
    height: auto;
    min-height: 208px;
    padding: 20px;
  }

  body.ecomcfo-services .ec-service-grid--mvp .ec-service-card h3,
  body.ecomcfo-service-detail .ec-service-grid--mvp .ec-service-card h3,
  body.ecomcfo-platform .ec-service-grid--mvp .ec-service-card h3,
  body.ecomcfo-expert .ec-service-grid--mvp .ec-service-card h3 {
    font-size: 18px;
  }

  body.ecomcfo-services .ec-service-grid--mvp .ec-service-card p,
  body.ecomcfo-service-detail .ec-service-grid--mvp .ec-service-card p,
  body.ecomcfo-platform .ec-service-grid--mvp .ec-service-card p,
  body.ecomcfo-expert .ec-service-grid--mvp .ec-service-card p {
    font-size: 13px;
    line-height: 1.5;
  }

  body .wp-block-columns.ec-steps--mvp,
  .ec-steps--mvp {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.ecomcfo-articles .ec-blog-layout {
    grid-template-columns: minmax(0, 1fr) 253px;
  }

  body.ecomcfo-articles .ec-article-card {
    height: auto;
    min-height: 342px;
  }

  body.ecomcfo-articles .ec-article-card .ec-thumb {
    flex-basis: 136px;
    height: 136px;
  }
}

@media (max-width: 860px) {
  body .wp-block-columns.ec-service-grid--mvp,
  body .wp-block-columns.ec-steps--mvp,
  .ec-service-grid--mvp,
  .ec-steps--mvp,
  .ec-blog-layout,
  .ec-article-layout {
    grid-template-columns: 1fr;
  }

  .ec-article-layout {
    /* minmax(0, 1fr) instead of a bare 1fr: a bare fr track keeps the
       default min-width:auto, so an unstyled wide child (e.g. a table
       without the .ec-table class) blows the column past the viewport
       instead of being clipped/scrolled inside it. */
    grid-template-columns: minmax(0, 1fr);
  }

  .ec-service-grid--mvp .ec-service-card {
    min-height: 0;
  }

  body:not(.home):not(.front-page) .ec-services-split .ec-service-large::after {
    display: none;
  }

  .ec-hero-panel {
    padding: 20px;
  }

  .ec-expert-image--large img {
    min-height: 320px;
  }

  .ec-article-card .ec-thumb {
    height: 180px;
  }
}

.ec-lead-form {
  padding: 28px 30px;
  max-width: 640px;
}

.ec-lead-form p {
  margin: 0 0 20px;
}

.ec-lead-form label {
  display: block;
  font-weight: 700;
  color: var(--ec-ink);
  margin-bottom: 8px;
}

.ec-lead-form .wpcf7-form-control {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 16px;
  color: var(--ec-ink);
  background: var(--wp--preset--color--white, #fff);
  border: 1px solid var(--ec-line);
  border-radius: 12px;
  padding: 12px 16px;
}

.ec-lead-form textarea.wpcf7-form-control {
  min-height: 120px;
  resize: vertical;
}

.ec-lead-form .wpcf7-form-control:focus {
  outline: 2px solid var(--wp--preset--color--sage-21, #8fa081);
  outline-offset: 1px;
}

.ec-lead-form .wpcf7-not-valid {
  outline: 2px solid var(--wp--preset--color--risk, #c7442e);
}

.ec-lead-form .wpcf7-response-output {
  margin: 20px 0 0;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--ec-line);
}

.ec-lead-form.wpcf7 form.invalid .wpcf7-response-output {
  border-color: var(--wp--preset--color--risk, #c7442e);
  color: var(--wp--preset--color--risk, #c7442e);
}

.ec-lead-form input[type="submit"] {
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  padding: 11px 23px;
  background: linear-gradient(135deg, var(--wp--preset--color--sage-23, #879877), var(--wp--preset--color--sage-31, #65795f));
  color: var(--wp--preset--color--white, #fff);
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ec-white) 22%, transparent);
}

.ec-lead-form input[type="submit"]:disabled {
  opacity: 0.6;
  cursor: default;
}

.ec-lead-form .wpcf7-spinner {
  margin-inline-start: 10px;
}

/* ==========================================================================
   Premium pass (2026-09-24): audit fixes that don't fit a single component.
   All colours come from the semantic tokens at the top of this file.
   ========================================================================== */

/* Decorative circles (.ec-dashboard::after sits at right:-46px) must never
   widen the page on phones. overflow-x: clip does not create a scroll
   container, so the dashboard can still overlap the next section vertically. */
.ec-hero {
  overflow-x: clip;
}

/* Long Russian words in headings ("конфиденциальности" at 32px is wider than
   a 318px phone column) must never widen the page. No `hyphens: auto`: Chrome
   loads its hyphenation dictionary asynchronously and re-lays out the text,
   which measurably delayed LCP on article pages. Size down instead, and keep
   overflow-wrap as the last-resort safety net. */
.ec-pattern-page h1,
.ec-pattern-page h2,
.ec-legal h1,
.ec-article h1 {
  overflow-wrap: break-word;
}

@media (max-width: 430px) {
  .ec-legal h1 {
    font-size: 28px;
  }
}

/* Headings promoted from h3 to h2 for a valid outline keep their h3 size. */
h2.ec-h3 {
  font-size: 1.17em;
}

/* "Важно про цифры" note title: was an h3 (broke the h1 -> h2 outline),
   now a paragraph that keeps the same visual weight. */
.ec-note__title {
  font-size: 1.17em;
  font-weight: 800;
  line-height: 1.25;
}

.ec-contact-card h2.ec-h3 {
  margin-top: 0;
}

/* Approved 1440 reference: the "Динамика прибыли" card overlaps the dark
   band below the hero by 24px instead of butting against it. Desktop only;
   the grid row heights fixed in b228b11 are untouched. */
@media (min-width: 861px) {
  /* Only the chart card is lifted above the band (.ec-wide-chart is already
     position: relative). No stacking context on .ec-hero/.ec-dashboard, so the
     dashboard's decorative ::after stays behind the hero background as before. */
  .ec-pattern-page .ec-hero .ec-dashboard {
    margin-bottom: -24px;
  }

  .ec-pattern-page .ec-hero .ec-wide-chart {
    z-index: 2;
  }
}

/* Step paragraph starts level with its number (WordPress flow layout adds a
   24px block gap before every non-first child). */
.ec-steps--mvp .ec-step > p {
  margin-block-start: 0;
}

/* Burger icon: three equal 2px bars (the old border+box-shadow trick drew a
   thin top bar and a thick bottom one). The [open] "×" rule still wins. */
.ec-mobile-nav summary::before {
  height: 14px;
  border: 0;
  box-shadow: none;
  background:
    linear-gradient(currentColor 0 0) top / 100% 2px no-repeat,
    linear-gradient(currentColor 0 0) center / 100% 2px no-repeat,
    linear-gradient(currentColor 0 0) bottom / 100% 2px no-repeat;
}

/* Tables: scroll shadows show there is more to the right/left (pure CSS,
   visible only while the table actually overflows its column) + a text hint
   that inc/content-presentation.php reveals for tables that overflow. */
.ec-table {
  background:
    linear-gradient(to right, var(--ec-white) 30%, transparent) left center / 40px 100% no-repeat local,
    linear-gradient(to left, var(--ec-white) 30%, transparent) right center / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--ec-ink) 14%, transparent), transparent) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--ec-ink) 14%, transparent), transparent) right center / 14px 100% no-repeat scroll;
}

.ec-table th,
.ec-table td {
  background-clip: padding-box;
}

.ec-table-hint {
  display: none;
  margin: 18px 0 -12px;
  color: var(--ec-text-subtle);
  font-size: 13px;
  font-weight: 700;
}

.ec-table-hint.is-visible {
  display: block;
}

.ec-table-hint::after {
  content: " →";
}

/* Landing mode (Внешний вид → Настройки сайта → Режим сайта → Лендинг):
   one page with anchor navigation; forms are replaced by a Telegram button. */
.ec-landing section[id] {
  scroll-margin-top: 16px;
}

.ec-landing-form-off {
  margin: 24px 0;
  padding: 24px;
  border: 1px solid var(--ec-line);
  border-radius: var(--ec-radius);
  background: var(--ec-soft);
  color: var(--ec-text);
}

.ec-landing-form-off p {
  margin: 0 0 16px;
}

.ec-landing-form-off .ec-landing-form-off__action {
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}