/**
 * Marketra, styles for the calculator page widgets.
 *
 *   .mk-roi-*      Lead Cost Calculator
 *   .mk-cmp-*      Compare Table
 *   .mk-tst-*      Testimonials
 *   .mk-calccta-*  Calculator CTA banner
 *
 * Everything here consumes the core tokens from style.css, so a Branding &
 * Colors override in the Marketra Editor flows through without edits here.
 *
 * @package Marketra
 */

:root,
.mk-roi-root {
  --mk-roi-bad: var(--mk-rose);
  --mk-roi-good: var(--mk-success);
  --mk-roi-radius: 18px;
}

/* ===================== LEAD COST CALCULATOR ===================== */

.mk-roi-root { margin: 0 auto; }
.mk-roi-head { margin-bottom: 36px; }
.mk-roi-intro {
  margin-top: 18px;
  color: var(--mk-ink-2);
  font-size: 17px;
  line-height: 1.6;
  max-width: 62ch;
}
.mk-roi-head[style*="center"] .mk-roi-intro { margin-left: auto; margin-right: auto; }

/* --- Inputs --------------------------------------------------- */

.mk-roi-form {
  background: var(--mk-navy-3);
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-roi-radius);
  padding: 28px;
}
.mk-roi-inputs { display: grid; }

.mk-roi-field { display: flex; flex-direction: column; gap: 8px; }
.mk-roi-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--mk-ink-2);
  line-height: 1.4;
}
.mk-roi-input-wrap {
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--mk-line-strong);
  border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.mk-roi-input-wrap:focus-within {
  border-color: var(--mk-rose);
  box-shadow: 0 0 0 3px var(--mk-rose-soft);
}
.mk-roi-prefix {
  padding-left: 14px;
  font-family: var(--mk-mono);
  font-size: 15px;
  color: var(--mk-ink-3);
}
.mk-roi-input {
  flex: 1;
  width: 100%;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--mk-ink);
  font-family: var(--mk-mono);
  font-size: 20px;
  padding: 13px 14px;
  -moz-appearance: textfield;
}
.mk-roi-input::-webkit-outer-spin-button,
.mk-roi-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Unit that sits after the number, e.g. the % on profit margin. Mirrors
   .mk-roi-prefix, and the input drops its right padding so the two touch. */
.mk-roi-suffix {
  padding-right: 14px;
  font-family: var(--mk-mono);
  font-size: 15px;
  color: var(--mk-ink-3);
}
.mk-roi-input-suffixed .mk-roi-input { padding-right: 4px; }

.mk-roi-hint { font-size: 12px; color: var(--mk-ink-4); line-height: 1.4; }
.mk-roi-err { font-size: 12px; color: var(--mk-rose-2); font-weight: 600; }
.mk-roi-field[data-invalid="1"] .mk-roi-input-wrap { border-color: var(--mk-rose); }

.mk-roi-actions {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.mk-roi-calc { padding: 16px 28px; font-size: 15px; }
.mk-roi-placeholder { font-size: 13px; color: var(--mk-ink-4); }

/* Says out loud that the starting numbers are ours, not theirs. */
.mk-roi-prefill-note {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--mk-ink-3);
}

/* --- Result panels -------------------------------------------- */

.mk-roi-results { margin-top: 28px; display: grid; gap: 22px; }
.mk-roi-results[hidden] { display: none; }

/* The panels are a single full-width column: recommendation, plan comparison,
   booking. The .mk-roi-duo wrapper that used to pair the first two side by side
   went with the "what you are paying right now" panel in v12.28.0; .mk-roi-results
   above already supplies the same 22px gap. */

.mk-roi-panel {
  background: var(--mk-navy-3);
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-roi-radius);
  padding: 24px;
}
.mk-roi-panel-title {
  font-family: var(--mk-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mk-ink-3);
  font-weight: 500;
  margin-bottom: 22px;
}

/* The .mk-roi-headline* and .mk-roi-row* families lived only in the removed
   "what you are paying right now" panel and went with it in v12.28.0. The two
   surviving tables use their own vocabularies, .mk-roi-vs-* and
   .mk-roi-compare-*, so nothing here was shared. */

.mk-roi-note { margin-top: 14px; font-size: 14px; color: var(--mk-ink-3); font-style: italic; }
.mk-roi-disclaimer { margin-top: 18px; font-size: 12px; color: var(--mk-ink-4); line-height: 1.55; }

/* --- Plan comparison table ------------------------------------ */

/* The table can outgrow a narrow panel, so it scrolls inside its own box
   rather than pushing the page sideways. */
.mk-roi-compare-scroll { overflow-x: auto; }
.mk-roi-compare { display: grid; }
.mk-roi-compare[hidden] { display: none; }

/* Sized to fit half of a 1040px container without a scrollbar. The overflow
   on the wrapper above is only a safety net, so the table can never push the
   page sideways if the container gets narrower than expected. */
.mk-roi-compare-head,
.mk-roi-compare-row {
  display: grid;
  grid-template-columns: minmax(110px, 1.6fr) repeat(4, minmax(72px, 1fr));
  gap: 10px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--mk-line);
}
.mk-roi-compare-row:last-child { border-bottom: 0; }

.mk-roi-compare-head .mk-roi-compare-cell {
  font-family: var(--mk-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mk-ink-4);
  font-weight: 500;
}
/* Headings wrap instead of overflowing their track. The number tracks are only
   about 85px wide inside the two-up layout, so a three-word heading set nowrap
   spills sideways over its neighbour. Data cells stay nowrap below: a formatted
   money value fits, a heading does not. */
.mk-roi-compare-head .mk-roi-compare-cell {
  white-space: normal;
  overflow-wrap: anywhere;
}
.mk-roi-compare-head .mk-roi-compare-cell:not(.mk-roi-compare-plan),
.mk-roi-compare-row .mk-roi-compare-cell:not(.mk-roi-compare-plan) { text-align: right; }

.mk-roi-compare-cell {
  font-family: var(--mk-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--mk-ink);
  white-space: nowrap;
}
.mk-roi-compare-plan {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--mk-ink-2);
  white-space: normal;
  line-height: 1.35;
}
.mk-roi-compare-plan a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--mk-line-strong); }
.mk-roi-compare-plan a:hover { color: var(--mk-ink); border-bottom-color: var(--mk-rose); }

/* What a bundle row contains, e.g. "Local SEO Starter + Website Starter build".
   Wraps, unlike the setup line: it is a phrase, not a figure. */
.mk-roi-compare-sub {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--mk-ink-3);
  white-space: normal;
  line-height: 1.35;
}

/* The one-time build on a bundle row. It has to be its own block: the plan
   cell is the only one that wraps, and it is a figure, so it stays nowrap. */
.mk-roi-compare-setup {
  display: block;
  margin-top: 3px;
  font-family: var(--mk-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--mk-ink-4);
  white-space: nowrap;
}

.mk-roi-compare-profit { color: var(--mk-roi-good); }

/* The baseline row is their situation today, so it reads muted and its
   profit is not painted green. It is the thing every other row beats. */
/* The baseline row is what every other row beats, so it reads in the cost
   color rather than as muted grey. */
.mk-roi-compare-row-now { border-bottom: 1px solid var(--mk-line-strong); }
.mk-roi-compare-row-now .mk-roi-compare-cell { color: var(--mk-roi-bad); }
.mk-roi-compare-row-now .mk-roi-compare-plan { color: var(--mk-roi-bad); }

.mk-roi-compare-empty { font-size: 14px; color: var(--mk-ink-3); }
.mk-roi-compare-empty[hidden] { display: none; }

/* --- "Right now" against "on this plan" ------------------------ */

.mk-roi-vs { display: grid; margin-bottom: 8px; }
.mk-roi-vs[hidden] { display: none; }

.mk-roi-vs-head,
.mk-roi-vs-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.7fr) minmax(90px, 1fr) minmax(90px, 1fr);
  gap: 16px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--mk-line);
}
.mk-roi-vs-row:last-child { border-bottom: 0; }

.mk-roi-vs-head {
  padding-top: 0;
  font-family: var(--mk-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}
.mk-roi-vs-head .mk-roi-vs-now  { color: var(--mk-roi-bad); }
.mk-roi-vs-head .mk-roi-vs-plan { color: var(--mk-roi-good); }

.mk-roi-vs-label { font-size: 14px; color: var(--mk-ink-2); line-height: 1.4; }
.mk-roi-vs-now,
.mk-roi-vs-plan {
  font-family: var(--mk-mono);
  font-size: 18px;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}
.mk-roi-vs-row .mk-roi-vs-now  { color: var(--mk-roi-bad); }
.mk-roi-vs-row .mk-roi-vs-plan { color: var(--mk-roi-good); }
/* Profit rows. Red/green already comes from the two rules above; this only
   sets the break between the cost block and the profit block. */
.mk-roi-vs-row-sep {
  border-top: 1px solid var(--mk-line-strong);
  margin-top: 7px;
  padding-top: 20px;
}
.mk-roi-costs-more {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--mk-ink-2);
  background: rgba(255, 255, 255, 0.04);
  border-left: 2px solid var(--mk-line-strong);
  padding: 14px 16px;
  border-radius: 0 10px 10px 0;
}
.mk-roi-costs-more[hidden] { display: none; }

/* --- Plan --- */

.mk-roi-plan {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 22px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--mk-line);
}
.mk-roi-plan-eyebrow { font-size: 13px; color: var(--mk-ink-3); }
.mk-roi-plan-name {
  font-family: var(--mk-display);
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1;
  color: var(--mk-ink);
  border-bottom: 2px solid transparent;
  align-self: flex-start;
}
.mk-roi-plan-name:hover { border-bottom-color: var(--mk-rose); }
.mk-roi-plan-name[data-inert] { pointer-events: none; }
.mk-roi-plan-price {
  font-family: var(--mk-mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--mk-roi-good);
}
.mk-roi-plan-per { font-size: 14px; color: var(--mk-ink-3); margin-left: 2px; }

/* --- Booking --- */

.mk-roi-panel-book {
  background: linear-gradient(180deg, rgba(244, 63, 94, 0.10) 0%, var(--mk-navy-3) 55%);
  border-color: rgba(244, 63, 94, 0.35);
}
/* The ask reads as an invitation, so it is centered. The capture form below is
   held left, further down, because a form should read like a form. */
.mk-roi-panel-book { text-align: center; }
/* max-width alone leaves the block hugging the left edge of a full-width panel,
   so the box has to be centered as well as its text. */
.mk-roi-book-sub { font-size: 15px; color: var(--mk-ink-2); line-height: 1.6; margin-bottom: 22px; max-width: 60ch; margin-left: auto; margin-right: auto; }
.mk-roi-book-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.mk-roi-book-btn { padding: 16px 26px; font-size: 15px; max-width: 100%; }
.mk-roi-book-btn span { white-space: normal; text-align: center; }

.mk-roi-calendar { margin-top: 28px; }
.mk-roi-calendar-title {
  font-family: var(--mk-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mk-ink-3);
  margin-bottom: 12px;
}
.mk-roi-calendar .calendly-inline-widget {
  width: 100%;
  border: 1px solid var(--mk-line);
  background: #fff;
  display: block;
}

/* --- Email capture --- */

/* Left, deliberately: the panel above is centered, but centered field labels and
   centered typing inside the inputs read as broken data entry. */
.mk-roi-capture { margin-top: 28px; border-top: 1px solid var(--mk-line); padding-top: 24px; text-align: left; }
.mk-roi-capture-intro { font-size: 14px; color: var(--mk-ink-3); margin-bottom: 14px; }
.mk-roi-capture-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.mk-roi-capture-field { display: flex; flex-direction: column; gap: 6px; }
.mk-roi-capture-field > span { font-size: 12px; color: var(--mk-ink-3); }
.mk-roi-capture-field input {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--mk-line-strong);
  border-radius: 9px;
  color: var(--mk-ink);
  font-family: inherit;
  font-size: 14px;
  padding: 11px 12px;
  outline: none;
}
.mk-roi-capture-field input:focus { border-color: var(--mk-rose); }
.mk-roi-req { color: var(--mk-rose); }
.mk-roi-consent { display: flex; gap: 9px; align-items: flex-start; margin-top: 14px; font-size: 13px; color: var(--mk-ink-3); }
.mk-roi-capture-actions { margin-top: 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mk-roi-status { font-size: 13px; color: var(--mk-ink-3); }
.mk-roi-status[data-kind="success"] { color: var(--mk-success); }
.mk-roi-status[data-kind="error"] { color: var(--mk-rose-2); }
[data-mk-roi-send][data-loading] { opacity: .6; pointer-events: none; }
.mk-roi-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Sticky bar --- */

.mk-roi-sticky {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 720px;
  margin: 0 auto;
  padding: 12px 14px 12px 20px;
  background: var(--mk-navy-2);
  border: 1px solid var(--mk-line-strong);
  border-radius: 14px;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.9);
}
.mk-roi-sticky[hidden] { display: none; }
.mk-roi-sticky-text { flex: 1; font-size: 14px; color: var(--mk-ink); line-height: 1.4; }
.mk-roi-sticky-x {
  background: none;
  border: 0;
  color: var(--mk-ink-4);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
}
.mk-roi-sticky-x:hover { color: var(--mk-ink-2); }

/* ===================== COMPARE TABLE ===================== */

.mk-cmp { display: grid; gap: 0; border: 1px solid var(--mk-line); border-radius: 18px; overflow: hidden; }
.mk-cmp-head {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  background: var(--mk-navy-2);
  border-bottom: 1px solid var(--mk-line);
}
.mk-cmp-head > div { padding: 18px 22px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; }
.mk-cmp-head-spacer { color: var(--mk-ink-4); }
.mk-cmp-head-bad { color: var(--mk-rose-2); }
.mk-cmp-head-good { color: var(--mk-success); }

.mk-cmp-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  border-bottom: 1px solid var(--mk-line);
  background: var(--mk-navy-3);
}
.mk-cmp-row:last-child { border-bottom: 0; }
.mk-cmp-row > div { padding: 20px 22px; font-size: 14px; line-height: 1.55; }
.mk-cmp-label { color: var(--mk-ink-2); font-weight: 600; }
.mk-cmp-cell { color: var(--mk-ink-3); display: flex; gap: 10px; align-items: flex-start; }
.mk-cmp-cell-bad { color: var(--mk-ink-2); background: rgba(244, 63, 94, 0.06); }
.mk-cmp-cell-good { color: var(--mk-ink-2); background: rgba(52, 211, 153, 0.06); }
.mk-cmp-mark { flex: none; margin-top: 2px; }
.mk-cmp-mark-bad { color: var(--mk-rose); }
.mk-cmp-mark-good { color: var(--mk-success); }

/* ===================== TESTIMONIALS ===================== */

.mk-tst-grid { display: grid; }
.mk-tst-card {
  background: var(--mk-navy-3);
  border: 1px solid var(--mk-line);
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mk-tst-stars { display: inline-flex; gap: 3px; color: var(--mk-amber, #fbbf24); }
.mk-tst-quote { font-size: 16px; line-height: 1.65; color: var(--mk-ink-2); }
.mk-tst-quote p { margin: 0 0 10px; }
.mk-tst-quote p:last-child { margin-bottom: 0; }
.mk-tst-result {
  border-top: 1px solid var(--mk-line);
  padding-top: 16px;
}
.mk-tst-result-value { font-family: var(--mk-display); font-size: 40px; line-height: 1; color: var(--mk-rose); display: block; }
.mk-tst-result-label { font-size: 12px; color: var(--mk-ink-4); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 6px; display: block; }
.mk-tst-person { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.mk-tst-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid var(--mk-line-strong); }
.mk-tst-name { font-size: 14px; font-weight: 700; color: var(--mk-ink); }
.mk-tst-meta { font-size: 12px; color: var(--mk-ink-4); margin-top: 2px; }

/* ===================== CALCULATOR CTA BANNER ===================== */

.mk-calccta { border-radius: 18px; padding: 44px 40px; }
.mk-calccta-rose { background: var(--mk-rose); color: #fff; }
.mk-calccta-dark { background: var(--mk-navy-2); border: 1px solid var(--mk-line); }
.mk-calccta-bordered { background: transparent; border: 1px solid var(--mk-line-strong); }
.mk-calccta-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.mk-calccta-body { flex: 1; min-width: 260px; }
.mk-calccta-eyebrow {
  font-family: var(--mk-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 12px;
}
.mk-calccta-rose .mk-calccta-eyebrow { color: rgba(255, 255, 255, 0.75); }
.mk-calccta-dark .mk-calccta-eyebrow,
.mk-calccta-bordered .mk-calccta-eyebrow { color: var(--mk-rose); }
.mk-calccta-heading { font-family: var(--mk-display); font-size: clamp(38px, 4.4vw, 60px); line-height: 0.92; }
.mk-calccta-rose .mk-calccta-heading .mk-calccta-l2 { color: rgba(255, 255, 255, 0.62); }
.mk-calccta-dark .mk-calccta-heading .mk-calccta-l2,
.mk-calccta-bordered .mk-calccta-heading .mk-calccta-l2 { color: var(--mk-rose); }
.mk-calccta-sub { margin-top: 14px; font-size: 15px; line-height: 1.6; max-width: 52ch; }
.mk-calccta-rose .mk-calccta-sub { color: rgba(255, 255, 255, 0.85); }
.mk-calccta-dark .mk-calccta-sub,
.mk-calccta-bordered .mk-calccta-sub { color: var(--mk-ink-2); }
.mk-calccta-rose .mk-btn-primary { background: #fff; color: var(--mk-rose); box-shadow: none; }
.mk-calccta-rose .mk-btn-primary:hover { background: rgba(255, 255, 255, 0.9); color: var(--mk-rose); }

/* ===================== MOBILE ===================== */

@media (max-width: 900px) {
  .mk-cmp-head, .mk-cmp-row { grid-template-columns: 1fr; }
  .mk-cmp-head { display: none; }
  .mk-cmp-row { padding-bottom: 6px; }
  .mk-cmp-row > div { padding: 14px 18px; }
  .mk-cmp-label { padding-top: 20px; font-size: 15px; color: var(--mk-ink); }
  .mk-cmp-cell::before {
    content: attr(data-col);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mk-ink-4);
    display: block;
    margin-bottom: 2px;
  }
  .mk-cmp-cell { flex-direction: column; gap: 4px; }
}

@media (max-width: 768px) {
  .mk-roi-form { padding: 20px; }
  .mk-roi-inputs { grid-template-columns: 1fr !important; }
  .mk-roi-panel { padding: 22px; }
  .mk-roi-actions { flex-direction: column; align-items: stretch; }
  .mk-roi-calc { width: 100%; }
  .mk-roi-placeholder { text-align: center; }

  /* Stack each plan into its own labeled card. The header row goes away and
     every cell grows a label from its data-label attribute instead. */
  .mk-roi-compare { min-width: 0; display: block; }
  .mk-roi-compare-head { display: none; }
  .mk-roi-compare-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
    padding: 16px 0;
  }
  .mk-roi-compare-plan { grid-column: 1 / -1; font-size: 15px; color: var(--mk-ink); }
  .mk-roi-compare-row-now .mk-roi-compare-plan { color: var(--mk-ink-3); }
  .mk-roi-compare-row .mk-roi-compare-cell:not(.mk-roi-compare-plan) { text-align: left; }
  .mk-roi-compare-cell[data-label]:not(.mk-roi-compare-plan)::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-family: var(--mk-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mk-ink-4);
    font-weight: 500;
  }
  /* Same treatment for the yours-vs-ours table: the head row goes away and
     each value grows its own column label. */
  .mk-roi-vs-head { display: none; }
  .mk-roi-vs-row {
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    padding: 14px 0;
  }
  .mk-roi-vs-label { grid-column: 1 / -1; color: var(--mk-ink); font-weight: 600; }
  .mk-roi-vs-now,
  .mk-roi-vs-plan { text-align: left; font-size: 17px; }
  .mk-roi-vs-row [data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-family: var(--mk-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mk-ink-4);
    font-weight: 500;
  }

  .mk-roi-book-actions .mk-btn { width: 100%; }
  .mk-roi-sticky { flex-wrap: wrap; padding: 12px 14px; gap: 10px; }
  .mk-roi-sticky-text { flex-basis: 100%; font-size: 13px; }
  .mk-roi-sticky .mk-btn { flex: 1; }
  .mk-calccta { padding: 32px 24px; }
  .mk-calccta-inner { flex-direction: column; align-items: flex-start; gap: 24px; }
}