/* css/components/ecp-platform.css
 *
 * EasyTax Calculator Platform (ecp) design system — every primitive the
 * calculator hub + pages use. Built on the locked brand tokens; all
 * dimensions are 4px multiples; Manrope only.
 *
 * Signature: the lakh/crore readout — full Indian-grouped figures paired
 * with a compact "≈ ₹1.02 Cr" chip. Numbers are the display face here.
 *
 * Cascade defenses (see AUDIT.md §5): everything is scoped under .ecp;
 * headings reclaim Manrope + text-transform from new.css's element rules.
 */

/* Manrope self-hosted (theme convention: each component declares its own
 * @font-face; nothing guarantees another component's CSS is present). */
@font-face {
  font-family: 'Manrope';
  src: url('/themes/techprosolutions/fonts/Manrope-VariableFont_wght.woff2?v=2') format('woff2-variations');
  font-weight: 200 800;
  font-display: swap;
}

.ecp {
  /* Token bridge — single place the platform reads color/space from. */
  --ecp-green: var(--et-green, #3CB944);
  --ecp-green-2: var(--et-green-2, #1D9E75);
  --ecp-navy: var(--et-navy, #1C3557);
  --ecp-ink: var(--et-navy, #1C3557);
  --ecp-body: var(--et-body-color, #45464F);
  --ecp-wash: var(--et-wash, #E8F5E9);
  --ecp-muted: #6E7076;
  --ecp-line: rgba(28, 53, 87, 0.12);
  --ecp-surface: #FFFFFF;
  --ecp-page: #F8FAF9;
  --ecp-focus: var(--et-green, #3CB944);
  --ecp-shadow-rest: 0 1px 2px rgba(28, 53, 87, 0.06), 0 4px 16px rgba(28, 53, 87, 0.06);
  --ecp-shadow-lift: 0 2px 4px rgba(28, 53, 87, 0.08), 0 12px 32px rgba(28, 53, 87, 0.10);
  --ecp-r-lg: 16px;
  --ecp-r-sm: 12px;
  --ecp-r-pill: 9999px;
  --ecp-s-1: 0.25rem;  /* 4px  */
  --ecp-s-2: 0.5rem;   /* 8px  */
  --ecp-s-3: 0.75rem;  /* 12px */
  --ecp-s-4: 1rem;     /* 16px */
  --ecp-s-5: 1.25rem;  /* 20px */
  --ecp-s-6: 1.5rem;   /* 24px */
  --ecp-s-8: 2rem;     /* 32px */
  --ecp-s-10: 2.5rem;  /* 40px */
  --ecp-s-12: 3rem;    /* 48px */
  --ecp-s-16: 4rem;    /* 64px */
  --ecp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ecp-dur: 0.25s;

  font-family: 'Manrope', -apple-system, sans-serif;
  color: var(--ecp-body);
  font-size: 1rem;
  line-height: 1.6;
}

/* Heading reclaim: new.css forces Roboto + capitalize + 40px h1 with
 * !important element rules; these outrank them (class+element) per the
 * established design-tokens.css pattern. */
.ecp h1, .ecp h2, .ecp h3, .ecp h4 {
  font-family: 'Manrope', sans-serif !important;
  text-transform: none !important;
  color: #1C3557 !important;
}
.ecp h1 {
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem) !important;
  font-weight: 800;
  line-height: 1.15 !important;
  letter-spacing: -0.02em;
  margin: 0;
}
.ecp h2 {
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.75rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.ecp h3 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Input reclaim: style.css (theme bucket, loads AFTER module CSS) puts a
 * 1px #ccc border + 4px radius on bare text inputs and wins aggregate-order
 * ties — the !important is the documented countermeasure, not decoration. */
.ecp input, .ecp select, .ecp button {
  font-family: 'Manrope', sans-serif;
}
.ecp .ecp-currency input,
.ecp .ecp-sliderrow__box input,
.ecp .ecp-duration__part input {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent;
  outline: none !important;
}
.ecp input:focus,
.ecp input:focus-visible {
  outline: none !important;
}

/* Interactive elements focus treatment (inputs handled cleanly via container/border without green outlines). */
.ecp :is(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ecp-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------- layout */

.ecp-shell {
  max-width: 76rem; /* 1216px matching service landing container */
  margin: 0 auto;
  padding: var(--ecp-s-8) var(--ecp-s-4) var(--ecp-s-16);
}

/* Two-column widget: inputs left, results right; stacked below 992px. */
.ecp-widget {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--ecp-s-6);
  align-items: start;
}
@media (max-width: 991px) {
  .ecp-widget { grid-template-columns: 1fr; }
}

/* Page body: content + right rail. */
.ecp-body-grid {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: var(--ecp-s-10);
  margin-top: var(--ecp-s-12);
}
@media (max-width: 991px) {
  .ecp-body-grid { grid-template-columns: 1fr; }
}
/* No rail yet (single registered calculator): let content use the full row. */
.ecp-body-grid > .ecp-content:only-child { grid-column: 1 / -1; }

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

.ecp-card {
  background: var(--ecp-surface);
  border: 1px solid var(--ecp-line);
  border-radius: var(--ecp-r-lg);
  box-shadow: var(--ecp-shadow-rest);
  padding: var(--ecp-s-6);
}

/* Sidebar and card link colors: default navy #1C3557, hover green #3CB944. Exclude buttons! */
.ecp-rail .ecp-card:not(.ecp-cta-card) a:not(.ecp-btn),
.ecp-card ul a:not(.ecp-btn),
.ecp-card:not(.ecp-cta-card):not(.ecp-results) a:not(.ecp-btn) {
  color: #1C3557 !important;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}
.ecp-rail .ecp-card:not(.ecp-cta-card) a:not(.ecp-btn):hover,
.ecp-card ul a:not(.ecp-btn):hover,
.ecp-card:not(.ecp-cta-card):not(.ecp-results) a:not(.ecp-btn):hover {
  color: #3CB944 !important;
}

/* Rail link list: full natural display */
.ecp-rail-links-list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

/* ------------------------------------------------------------ breadcrumb */

.ecp-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ecp-s-2);
  list-style: none;
  margin: 0 0 var(--ecp-s-4);
  padding: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.ecp-breadcrumb li { display: flex; align-items: center; gap: var(--ecp-s-2); }
.ecp-breadcrumb li + li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: var(--ecp-r-pill);
  background: var(--ecp-line);
}
.ecp-breadcrumb a { color: var(--ecp-muted); text-decoration: none; }
.ecp-breadcrumb a:hover { color: var(--ecp-navy); }
.ecp-breadcrumb [aria-current] { color: var(--ecp-ink); }

/* --------------------------------------------------------------- buttons */

.ecp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ecp-s-2);
  min-height: 48px;
  padding: var(--ecp-s-3) var(--ecp-s-6);
  border-radius: var(--ecp-r-pill);
  border: 1px solid transparent;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em; /* bold weight needs slight positive tracking */
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--ecp-dur) var(--ecp-ease),
              box-shadow var(--ecp-dur) var(--ecp-ease),
              transform 0.15s var(--ecp-ease);
}
.ecp-btn--primary,
a.ecp-btn--primary,
.ecp a.ecp-btn--primary,
.ecp-card a.ecp-btn--primary,
.ecp-results a.ecp-btn--primary {
  /* Navy fill: brand green + white text fails WCAG AA (~2.2:1). */
  background: var(--ecp-navy) !important;
  color: #ffffff !important;
}
.ecp-btn--primary:hover,
a.ecp-btn--primary:hover,
.ecp a.ecp-btn--primary:hover,
.ecp-card a.ecp-btn--primary:hover,
.ecp-results a.ecp-btn--primary:hover {
  background: #142A45 !important;
  color: #ffffff !important;
  box-shadow: var(--ecp-shadow-lift);
}
.ecp-btn--primary:active { transform: translateY(1px); }
.ecp-btn--ghost {
  background: transparent;
  color: var(--ecp-navy);
  border-color: var(--ecp-line);
}
.ecp-btn--ghost:hover { border-color: var(--ecp-navy); color: var(--ecp-navy); }
.ecp-btn--block { width: 100%; }

/* ---------------------------------------------------------------- fields */

.ecp-field { margin-bottom: var(--ecp-s-5); }
.ecp-field__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--ecp-s-3);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ecp-ink);
  margin-bottom: var(--ecp-s-2);
}
.ecp-field__hint { font-size: 0.8125rem; font-weight: 500; color: var(--ecp-muted); }
.ecp-field[hidden] { display: none; }

/* Currency input: ₹ prefix box + right-aligned amount. */
.ecp-currency {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--ecp-line);
  border-radius: var(--ecp-r-sm);
  background: var(--ecp-surface);
  overflow: hidden;
  transition: border-color var(--ecp-dur) var(--ecp-ease);
}
.ecp-currency:focus-within { border-color: var(--ecp-navy); }
.ecp-currency__symbol {
  display: flex;
  align-items: center;
  padding: 0 var(--ecp-s-4);
  background: var(--ecp-wash);
  color: var(--ecp-navy);
  font-weight: 800;
  font-size: 1.125rem;
}
.ecp-currency input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  border: 0;
  padding: var(--ecp-s-3) var(--ecp-s-4);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ecp-ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
  background: transparent;
}
.ecp-currency input:focus,
.ecp-currency input:focus-visible {
  outline: none !important;
}

/* Slider + synced number. */
.ecp-sliderrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: var(--ecp-s-4);
  align-items: center;
}
.ecp-sliderrow__box {
  display: flex;
  align-items: center;
  border: 1px solid var(--ecp-line);
  border-radius: var(--ecp-r-sm);
  overflow: hidden;
  transition: border-color var(--ecp-dur) var(--ecp-ease);
}
.ecp-sliderrow__box:focus-within { border-color: var(--ecp-navy); }
.ecp-sliderrow__box input:focus,
.ecp-sliderrow__box input:focus-visible {
  outline: none !important;
}
.ecp-sliderrow__box input {
  width: 100%;
  min-height: 44px;
  border: 0;
  padding: var(--ecp-s-2) var(--ecp-s-2) var(--ecp-s-2) var(--ecp-s-3);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ecp-ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ecp-sliderrow__suffix {
  padding: 0 var(--ecp-s-3) 0 var(--ecp-s-1);
  color: var(--ecp-muted);
  font-weight: 700;
}
.ecp input[type="range"].ecp-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;
  background: transparent;
  cursor: pointer;
}
.ecp .ecp-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--ecp-r-pill);
  background: linear-gradient(to right, var(--ecp-green) var(--ecp-fill, 50%), var(--ecp-line) var(--ecp-fill, 50%));
}
.ecp .ecp-range::-moz-range-track {
  height: 4px;
  border-radius: var(--ecp-r-pill);
  background: var(--ecp-line);
}
.ecp .ecp-range::-moz-range-progress {
  height: 4px;
  border-radius: var(--ecp-r-pill);
  background: var(--ecp-green);
}
.ecp .ecp-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -10px;
  border-radius: var(--ecp-r-pill);
  background: var(--ecp-navy);
  border: 4px solid #fff;
  box-shadow: var(--ecp-shadow-rest);
  transition: transform 0.15s var(--ecp-ease);
}
.ecp .ecp-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: var(--ecp-r-pill);
  background: var(--ecp-navy);
  border: 4px solid #fff;
  box-shadow: var(--ecp-shadow-rest);
}
.ecp .ecp-range:hover::-webkit-slider-thumb { transform: scale(1.08); }

/* Duration input: years / months / days parts. */
.ecp-duration {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ecp-s-3);
}
.ecp-duration__part {
  display: flex;
  align-items: center;
  border: 1px solid var(--ecp-line);
  border-radius: var(--ecp-r-sm);
  overflow: hidden;
  transition: border-color var(--ecp-dur) var(--ecp-ease);
}
.ecp-duration__part:focus-within { border-color: var(--ecp-navy); }
.ecp-duration__part input:focus,
.ecp-duration__part input:focus-visible {
  outline: none !important;
}
.ecp-duration__part input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border: 0;
  padding: var(--ecp-s-2) var(--ecp-s-1);
  font-size: 1rem;
  font-weight: 700;
  text-align: right;
  color: var(--ecp-ink);
  font-variant-numeric: tabular-nums;
}

/* Spinners steal width from 2-digit values in narrow duration cells. */
.ecp input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.ecp input[type="number"]::-webkit-outer-spin-button,
.ecp input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.ecp-duration__part span {
  padding: 0 var(--ecp-s-3) 0 var(--ecp-s-1);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ecp-muted);
}

/* Select. */
.ecp select.ecp-select {
  width: 100%;
  min-height: 48px;
  padding: var(--ecp-s-3) var(--ecp-s-4);
  border: 1px solid var(--ecp-line);
  border-radius: var(--ecp-r-sm);
  background: var(--ecp-surface);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ecp-ink);
  transition: border-color var(--ecp-dur) var(--ecp-ease);
}
.ecp select.ecp-select:focus,
.ecp select.ecp-select:focus-visible {
  outline: none !important;
  border-color: var(--ecp-navy);
}

/* Toggle: segmented two-option control (SIP / Lumpsum). */
.ecp-toggle {
  display: inline-flex;
  padding: var(--ecp-s-1);
  gap: var(--ecp-s-1);
  background: var(--ecp-wash);
  border-radius: var(--ecp-r-pill);
}
.ecp-toggle button {
  min-height: 40px;
  padding: var(--ecp-s-2) var(--ecp-s-5);
  border: 0;
  border-radius: var(--ecp-r-pill);
  background: transparent;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ecp-navy);
  cursor: pointer;
  transition: background-color 0.15s var(--ecp-ease), color 0.15s var(--ecp-ease);
}
.ecp-toggle button[aria-pressed="true"] {
  background: var(--ecp-navy);
  color: #fff;
}

/* --------------------------------------------------------------- results */

.ecp-results { position: sticky; top: 96px; }
@media (max-width: 991px) { .ecp-results { position: static; } }

.ecp-donut { position: relative; max-width: 240px; margin: 0 auto var(--ecp-s-4); }
.ecp-donut svg { display: block; }
.ecp-donut circle { transition: stroke-dasharray var(--ecp-dur) var(--ecp-ease), stroke-dashoffset var(--ecp-dur) var(--ecp-ease); }
.ecp-donut__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ecp-s-1);
  pointer-events: none;
}
.ecp-donut__center b {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ecp-ink);
  font-variant-numeric: tabular-nums;
}
.ecp-donut__center small {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ecp-muted);
}

.ecp-legend {
  display: flex;
  justify-content: center;
  gap: var(--ecp-s-6);
  margin-bottom: var(--ecp-s-5);
  font-size: 0.8125rem;
  font-weight: 600;
}
.ecp-legend span { display: inline-flex; align-items: center; gap: var(--ecp-s-2); }
.ecp-legend i {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  display: inline-block;
}

.ecp-result-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--ecp-s-4);
  padding: var(--ecp-s-3) 0;
  border-top: 1px solid var(--ecp-line);
}
.ecp-result-row dt {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ecp-body);
  margin: 0;
  flex-shrink: 0;
  max-width: 48%;
}
.ecp-result-row dd {
  margin: 0;
  font-weight: 800;
  color: var(--ecp-ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
  word-break: normal;
  overflow-wrap: break-word;
}
.ecp-result-row--total { border-top-width: 2px; border-top-color: var(--ecp-navy); }
.ecp-result-row--total dt { font-weight: 800; color: var(--ecp-ink); }
.ecp-result-row--total dd {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.ecp-result-row--text {
  align-items: flex-start;
}
.ecp-result-row--text dd {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--ecp-ink);
}

/* The signature chip: compact lakh/crore reading of a full figure. */
.ecp-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 var(--ecp-s-2);
  margin-left: var(--ecp-s-2);
  border-radius: var(--ecp-r-pill);
  background: var(--ecp-wash);
  color: var(--ecp-green-2);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  vertical-align: middle;
}

/* ------------------------------------------------------------- accordion */

.ecp-accordion {
  border: 1px solid var(--ecp-line);
  border-radius: var(--ecp-r-sm);
  background: var(--ecp-surface);
}
.ecp-accordion + .ecp-accordion { margin-top: var(--ecp-s-3); }
.ecp-accordion summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ecp-s-4);
  padding: var(--ecp-s-4) var(--ecp-s-5);
  font-weight: 700;
  color: var(--ecp-ink);
  cursor: pointer;
  list-style: none;
}
.ecp-accordion summary::-webkit-details-marker { display: none; }
.ecp-accordion summary::after {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ecp-navy);
  border-bottom: 2px solid var(--ecp-navy);
  transform: rotate(45deg);
  transition: transform var(--ecp-dur) var(--ecp-ease);
}
.ecp-accordion[open] summary::after { transform: rotate(-135deg); }
.ecp-accordion__body { padding: 0 var(--ecp-s-5) var(--ecp-s-5); }

/* ----------------------------------------------------------------- table */

.ecp-tablewrap { overflow-x: auto; }
.ecp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.ecp-table th {
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ecp-muted);
  padding: var(--ecp-s-2) var(--ecp-s-3);
  border-bottom: 2px solid var(--ecp-line);
}
.ecp-table td {
  padding: var(--ecp-s-2) var(--ecp-s-3);
  border-bottom: 1px solid var(--ecp-line);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ecp-table td.ecp-num { text-align: right; font-weight: 600; color: var(--ecp-ink); }

/* Growth spark-bar inside schedule rows — width encodes value share. */
.ecp-spark {
  display: block;
  height: 4px;
  border-radius: var(--ecp-r-pill);
  background: var(--ecp-wash);
  margin-top: var(--ecp-s-1);
  overflow: hidden;
}
.ecp-spark i {
  display: block;
  height: 100%;
  width: var(--ecp-spark, 0%);
  background: var(--ecp-green);
  border-radius: var(--ecp-r-pill);
}

/* ----------------------------------------------------------------- share */

.ecp-share {
  display: inline-flex;
  align-items: center;
  gap: var(--ecp-s-2);
  min-height: 40px;
  padding: var(--ecp-s-2) var(--ecp-s-4);
  border: 1px solid var(--ecp-line);
  border-radius: var(--ecp-r-pill);
  background: var(--ecp-surface);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ecp-navy);
  cursor: pointer;
}
.ecp-share:hover { border-color: var(--ecp-navy); }
.ecp-share svg { width: 16px; height: 16px; }

/* -------------------------------------------------------------- hub grid */

.ecp-hub {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ecp-s-5);
}
@media (max-width: 991px) { .ecp-hub { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .ecp-hub { grid-template-columns: 1fr; } }

.ecp-hubcard {
  display: flex;
  flex-direction: column;
  gap: var(--ecp-s-3);
  min-height: 208px;
  padding: var(--ecp-s-6);
  background: var(--ecp-surface);
  border: 1px solid var(--ecp-line);
  border-radius: var(--ecp-r-lg);
  box-shadow: var(--ecp-shadow-rest);
  text-decoration: none;
  transition: box-shadow var(--ecp-dur) var(--ecp-ease), border-color var(--ecp-dur) var(--ecp-ease);
}
.ecp-hubcard:hover { box-shadow: var(--ecp-shadow-lift); border-color: rgba(28, 53, 87, 0.24); }
.ecp-hubcard--span2 { grid-column: span 2; }
@media (max-width: 639px) { .ecp-hubcard--span2 { grid-column: span 1; } }

.ecp-eyebrow {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ecp-green-2);
}
.ecp-hubcard h3 { margin: 0; }
.ecp-hubcard p { margin: 0; font-size: 0.9375rem; line-height: 1.5; }
.ecp-hubcard__go {
  margin-top: auto;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--ecp-navy);
}

/* ------------------------------------------ authored content (calc_* ) */

.ecp-content .ecp-section { margin-bottom: var(--ecp-s-12); }
.ecp-content .ecp-section h2 { margin: 0 0 var(--ecp-s-4); }
.ecp-content p { margin: 0 0 var(--ecp-s-4); }
.ecp-content ul, .ecp-content ol { margin: 0 0 var(--ecp-s-4); padding-left: var(--ecp-s-5); }
.ecp-content li { margin-bottom: var(--ecp-s-2); }
.ecp-content strong { color: var(--ecp-ink); }

/* Formula: the expression gets a quiet display treatment of its own. */
.ecp-formula__expr {
  padding: var(--ecp-s-5) var(--ecp-s-6);
  background: var(--ecp-wash);
  border-radius: var(--ecp-r-sm);
  color: var(--ecp-navy);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  overflow-x: auto;
  white-space: nowrap;
}

/* Worked example: green-edged callout card. */
.ecp-example__card {
  padding: var(--ecp-s-5) var(--ecp-s-6);
  border: 1px solid var(--ecp-line);
  border-left: 4px solid var(--ecp-green);
  border-radius: var(--ecp-r-sm);
  background: var(--ecp-surface);
}
.ecp-example__card > *:last-child, .ecp-example__card p:last-child { margin-bottom: 0; }

/* Authored tables render through tablefield markup. */
.ecp-content .ecp-tablewrap table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.ecp-content .ecp-tablewrap th {
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ecp-muted);
  padding: var(--ecp-s-2) var(--ecp-s-3);
  border-bottom: 2px solid var(--ecp-line);
  background: transparent;
}
.ecp-content .ecp-tablewrap td {
  padding: var(--ecp-s-2) var(--ecp-s-3);
  border-bottom: 1px solid var(--ecp-line);
  font-variant-numeric: tabular-nums;
}
.ecp-tablesec__note { font-size: 0.8125rem; color: var(--ecp-muted); margin-top: var(--ecp-s-2); }

/* Author box. */
.ecp-author {
  display: flex;
  gap: var(--ecp-s-4);
  align-items: flex-start;
  padding: var(--ecp-s-5) var(--ecp-s-6);
  border: 1px solid var(--ecp-line);
  border-radius: var(--ecp-r-lg);
  background: var(--ecp-surface);
}
.ecp-author__badge {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ecp-r-pill);
  background: var(--ecp-navy);
  color: #fff;
  font-weight: 800;
  font-size: 1.25rem;
}
.ecp-author__name { font-weight: 800; color: var(--ecp-ink); margin: 0; }
.ecp-author__role { font-size: 0.8125rem; color: var(--ecp-muted); margin: 0 0 var(--ecp-s-2); }

/* Related-links list. */
.ecp-links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ecp-s-2); }
.ecp-links a { font-weight: 700; color: #1C3557 !important; text-decoration: none; transition: color 0.2s ease; }
.ecp-links a:hover { color: #3CB944 !important; }

/* ------------------------------------------- bottom conversion sections */

.ecp-bottom-sections {
  margin-top: 3.5rem;
}

/* 1. FAQ in bottom sections (matching Service Landing Design) */
.ecp-bottom-sections .faq-section {
  padding-block: 2.5rem 1.5rem !important;
  background: transparent !important;
  border-top: 1px solid var(--ecp-line);
}
.ecp-bottom-sections .faq-grid-layout {
  padding: 0 !important;
  max-width: 100% !important;
}
.ecp-bottom-sections .faq-sidebar__heading {
  color: #1C3557 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800 !important;
}

/* 2. Navy CTA Banner */
.et-svc__navy-cta-banner {
  margin: 3rem 0;
  background: linear-gradient(135deg, #1C3557 0%, #0F2038 100%);
  border-radius: 16px;
  padding: 2.5rem 3rem;
  color: #FFFFFF;
  box-shadow: 0 10px 30px rgba(15, 32, 56, 0.15);
}
.et-svc__navy-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.et-svc__navy-cta-text {
  flex: 1;
  min-width: 280px;
}
.et-svc__navy-cta-title,
.ecp .et-svc__navy-cta-title,
.et-svc__navy-cta-banner h2 {
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif !important;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem) !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  color: #FFFFFF !important;
  margin: 0 0 0.5rem !important;
  letter-spacing: -0.02em;
}
.et-svc__green-text {
  color: #22C55E !important;
}
.et-svc__navy-cta-sub {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  line-height: 1.5;
}
.et-svc__white-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 2rem;
  background: #FFFFFF;
  color: #0F2038 !important;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  border-radius: 9999px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
  white-space: nowrap;
}
.et-svc__white-pill-btn:hover {
  background: #F8FAFC;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
  color: #0F2038 !important;
}

/* 3. CA Verification & Statutory Advisory Banner */
.et-svc__ca-verify-banner {
  margin: 2.5rem 0;
}
.et-svc__ca-verify-card {
  border-left: 4px solid #16A34A;
  background: #F8FAFC;
  border-top: 1px solid #E2E8F0;
  border-right: 1px solid #E2E8F0;
  border-bottom: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.et-svc__ca-verify-main {
  flex: 1;
  min-width: 280px;
}
.et-svc__ca-verify-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.375rem;
  flex-wrap: wrap;
}
.et-svc__ca-verify-kicker {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #64748B;
  text-transform: uppercase;
}
.et-svc__ca-verify-icai {
  background: #DCFCE7;
  color: #15803D;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
}
.et-svc__ca-verify-name,
.ecp .et-svc__ca-verify-name {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 1.1875rem !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  margin: 0 0 0.35rem !important;
}
.et-svc__ca-verify-desc {
  font-size: 0.875rem;
  color: #475569;
  line-height: 1.55;
  margin: 0;
  max-width: 820px;
}
.et-svc__ca-verify-badge-wrap {
  display: flex;
  align-items: center;
}
.et-svc__ca-verify-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #15803D;
  background: #DCFCE7;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  white-space: nowrap;
}

/* 4. Author section styling in bottom area */
.ecp-author-wrapper {
  margin: 2.5rem 0;
}
.ecp-bottom-sections .ecp-author {
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  background: #FFFFFF;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
  padding: 1.5rem 1.75rem;
  margin: 0;
}

/* 5. Related Services & Tools Card Grid */
.et-svc__bottom-cards-sec {
  margin: 2.5rem 0;
}
.et-svc__bottom-cards-heading,
.ecp .et-svc__bottom-cards-heading {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 1.625rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  color: #1C3557 !important;
  margin: 0 0 1.25rem !important;
}
.et-svc__cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.et-svc__card-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 1.125rem 1.375rem;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
  transition: all 0.2s ease;
}
.et-svc__card-tile:hover {
  border-color: #94A3B8;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}
.et-svc__card-tile-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #0F172A;
  line-height: 1.35;
}
.et-svc__card-tile-arrow {
  font-size: 1.125rem;
  font-weight: 700;
  color: #64748B;
  transition: transform 0.2s ease, color 0.2s ease;
}
.et-svc__card-tile:hover .et-svc__card-tile-arrow {
  transform: translateX(4px);
  color: #16A34A;
}

@media (max-width: 992px) {
  .et-svc__cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .et-svc__cards-grid {
    grid-template-columns: 1fr;
  }
  .et-svc__navy-cta-banner {
    padding: 2rem 1.5rem;
  }
}

/* ------------------------------------------------- design-system preview */

.ecp-ds section { margin-bottom: var(--ecp-s-16); }
.ecp-ds section > h2 {
  padding-bottom: var(--ecp-s-3);
  border-bottom: 1px solid var(--ecp-line);
  margin-bottom: var(--ecp-s-6);
}
.ecp-ds__row { display: flex; flex-wrap: wrap; gap: var(--ecp-s-4); align-items: center; }

/* --------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
  .ecp *, .ecp *::before, .ecp *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}