/* Steps Conversion Calculator v1.3.5 — Brand Scheme v1.0 */
.stmc{
--stmc-primary:#0A5BFF;--stmc-primary-2:#2D7BFF;--stmc-primary-dark:#0347D6;--stmc-primary-light:#EEF5FF;
--stmc-secondary:#09C78A;--stmc-secondary-dark:#05996A;--stmc-secondary-light:#EFFCF8;
--stmc-heading:#102A43;--stmc-body:#4A5C78;--stmc-muted:#7A8CA8;
--stmc-border:#E2E8F2;--stmc-field-border:#D8E1EE;--stmc-surface:#fff;--stmc-soft:#F8FAFD;
--stmc-error:#E5484D;
--stmc-gradient:linear-gradient(135deg,#0A5BFF 0%,#2D7BFF 45%,#09C78A 100%);
--stmc-font-body:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
--stmc-font-head:Manrope,Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
font-family:var(--stmc-font-body);
color:var(--stmc-body);-webkit-font-smoothing:antialiased}
.stmc *{box-sizing:border-box}
/* Font only. A `color` here would be (0,1,1) and outrank every single-class
   control rule (0,1,0) — that is what turned the gradient CTA label slate grey.
   Every button, input and select below sets its own colour explicitly. */
.stmc button,.stmc input,.stmc select{font:inherit}
.stmc [hidden]{display:none!important}
.stmc svg{max-width:100%}

/* 1. Container */
.stmc__shell{width:100%;max-width:var(--stmc-max-width,1100px);margin:0 auto;background:var(--stmc-surface);border:1px solid var(--stmc-border);border-radius:20px;padding:24px;box-shadow:0 25px 60px rgba(10,91,255,.12)}
/* v1.3.5: container-type only on desktop-width viewports. Size containment on
   .stmc__shell triggered a mobile-browser height bug (a large void rendered
   below the chart). The @container rules below only ever fire at 900px+ card
   width, which cannot happen on a <=900px viewport — so mobile loses nothing,
   and the two-column desktop behaviour is byte-identical. */
@media(min-width:901px){.stmc__shell{container-type:inline-size;container-name:stmc}}
.stmc__header{margin:0 0 16px;text-align:center}
.stmc__eyebrow{margin:0 0 6px;color:var(--stmc-secondary-dark);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.stmc__title{margin:0;font-family:var(--stmc-font-head);color:var(--stmc-heading);font-size:26px;font-weight:800;line-height:1.2;letter-spacing:-.02em}
.stmc__intro{margin:8px 0 0;color:var(--stmc-muted);font-size:13px;line-height:1.6}

/* 3. Mode switch */
.stmc__modes{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:3px;background:var(--stmc-soft);border:1px solid var(--stmc-border);border-radius:14px}
.stmc__modes label{cursor:pointer;display:block}
.stmc__modes input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.stmc__modes span{display:flex;align-items:center;justify-content:center;height:48px;border-radius:11px;background:transparent;color:var(--stmc-heading);font-size:14px;font-weight:700;transition:background .18s,color .18s,box-shadow .18s}
.stmc__modes input:checked+span{background:var(--stmc-primary);color:#fff;box-shadow:0 5px 14px rgba(10,91,255,.22)}
.stmc__modes input:focus-visible+span{outline:3px solid rgba(10,91,255,.35);outline-offset:2px}

/* 4. Main input */
.stmc__block{margin-top:14px}
.stmc__label{display:block;margin-bottom:7px;color:var(--stmc-heading);font-size:13px;font-weight:700}
.stmc__main-wrap{position:relative;display:flex;align-items:center;height:72px;background:var(--stmc-surface);border:1px solid var(--stmc-field-border);border-radius:12px;transition:border-color .18s,box-shadow .18s}
.stmc__main-wrap:focus-within{border-color:var(--stmc-primary);box-shadow:0 0 0 3px rgba(10,91,255,.10)}
.stmc__main{flex:1;min-width:0;height:100%;padding:0 8px 0 20px;border:0;background:transparent;font-family:var(--stmc-font-head);color:var(--stmc-heading);font-size:30px;font-weight:800;letter-spacing:-.01em;outline:0}
.stmc__main-suffix{padding-right:20px;color:var(--stmc-muted);font-size:14px;font-weight:600;white-space:nowrap}
.stmc__main-unit{margin-right:12px;height:44px;padding:0 10px;border:1px solid var(--stmc-field-border);border-radius:12px;background:var(--stmc-soft);color:var(--stmc-heading);font-size:13px;font-weight:600;cursor:pointer}
.stmc--invalid .stmc__main-wrap{border-color:var(--stmc-error);box-shadow:0 0 0 3px rgba(229,72,77,.10)}
.stmc__error{margin:6px 0 0;color:var(--stmc-error);font-size:12px;line-height:1.45}
.stmc__error:empty{display:none}

/* 5. Presets */
.stmc__presets{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;margin-top:12px}
.stmc__preset.stmc__preset{height:38px;padding:0 2px;background:var(--stmc-surface);border:1px solid var(--stmc-field-border);border-radius:12px;color:var(--stmc-body);font-size:12px;font-weight:600;cursor:pointer;transition:border-color .15s,background .15s,color .15s,box-shadow .15s}
.stmc__preset:hover{border-color:var(--stmc-primary);color:var(--stmc-primary)}
.stmc__preset:focus-visible{outline:3px solid rgba(10,91,255,.35);outline-offset:2px}
.stmc__preset[aria-pressed="true"]{border-color:var(--stmc-primary);background:var(--stmc-primary-light);color:var(--stmc-primary);box-shadow:0 0 0 2px rgba(10,91,255,.08)}

/* 6. Improve Accuracy accordion */
.stmc .stmc__acc{margin-top:13px;padding:15px 16px;border:1px solid var(--stmc-border);border-radius:14px;background:var(--stmc-surface);height:auto;min-height:0;max-height:none;overflow:visible}
/* A generic `details{overflow:hidden}` or a fixed summary height from the theme
   clipped the "Choose your method..." sub-line. These win on specificity. */
.stmc .stmc__acc>summary{height:auto;min-height:0;max-height:none;overflow:visible;padding:0;margin:0;line-height:1.35}
.stmc .stmc__acc>summary>*{min-width:0}
.stmc__acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px}
.stmc__acc summary::-webkit-details-marker{display:none}
.stmc__acc summary:focus-visible{outline:3px solid rgba(10,91,255,.35);outline-offset:3px;border-radius:8px}
.stmc__acc-title{color:var(--stmc-heading);font-size:14px;font-weight:700}
.stmc__acc-sub{display:block;margin-top:3px;color:var(--stmc-muted);font-size:12px;font-weight:400}
.stmc__chev{flex:none;color:var(--stmc-muted);transition:transform .2s}
.stmc__chev svg{width:18px;height:18px;display:block}
.stmc__acc[open] .stmc__chev{transform:rotate(180deg)}
.stmc__acc-body{margin-top:14px;border-top:1px solid var(--stmc-border);padding-top:14px}
.stmc__methods{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.stmc__method{position:relative;cursor:pointer}
.stmc__method input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.stmc__method span{display:flex;align-items:center;min-height:46px;padding:9px 12px;border:1px solid var(--stmc-field-border);border-radius:12px;background:var(--stmc-surface);color:var(--stmc-body);font-size:13px;font-weight:600;line-height:1.3;transition:border-color .15s,background .15s,color .15s}
.stmc__method input:checked+span{border-color:var(--stmc-primary);background:var(--stmc-primary-light);color:var(--stmc-primary)}
.stmc__method input:focus-visible+span{outline:3px solid rgba(10,91,255,.35);outline-offset:2px}
.stmc__row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.stmc__field{min-width:0}
.stmc__field--full{grid-column:1/-1}
.stmc__sublabel{display:block;margin-bottom:7px;color:var(--stmc-heading);font-size:12px;font-weight:700}
.stmc__ctrl{display:flex;align-items:center;height:46px;border:1px solid var(--stmc-field-border);border-radius:12px;background:var(--stmc-surface);transition:border-color .18s,box-shadow .18s}
.stmc__ctrl:focus-within{border-color:var(--stmc-primary);box-shadow:0 0 0 3px rgba(10,91,255,.10)}
.stmc__ctrl input{flex:1;min-width:0;height:100%;padding:0 4px 0 12px;border:0;background:transparent;color:var(--stmc-heading);font-size:15px;font-weight:600;outline:0}
.stmc__ctrl .stmc__unit-suffix{padding-right:12px;color:var(--stmc-muted);font-size:12px;font-weight:600}
.stmc__ctrl select{flex:none;height:100%;max-width:112px;padding:0 8px;border:0;border-left:1px solid var(--stmc-border);border-radius:0 11px 11px 0;background:var(--stmc-soft);color:var(--stmc-heading);font-size:12px;font-weight:600;cursor:pointer;outline:0}
.stmc__select{width:100%;height:46px;padding:0 10px;border:1px solid var(--stmc-field-border);border-radius:12px;background:var(--stmc-surface);color:var(--stmc-heading);font-size:13px;font-weight:600;cursor:pointer}
.stmc__select:focus-visible,.stmc__ctrl select:focus-visible{outline:3px solid rgba(10,91,255,.35);outline-offset:1px}
.stmc__hint{margin:7px 0 0;color:var(--stmc-muted);font-size:12px;line-height:1.5}
.stmc__field-error{margin:6px 0 0;color:var(--stmc-error);font-size:12px;line-height:1.45}
.stmc__field-error:empty{display:none}
.stmc__ctrl--invalid{border-color:var(--stmc-error);box-shadow:0 0 0 3px rgba(229,72,77,.10)}
.stmc__toggle.stmc__toggle{margin-top:7px;border:0;background:none;padding:0;color:var(--stmc-primary);font-size:12px;font-weight:600;text-decoration:underline;cursor:pointer}

/* 7. Calculate button */
.stmc__calc.stmc__calc{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:52px;margin-top:14px;border:0;border-radius:12px;background:var(--stmc-gradient);color:#fff;font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 7px 18px rgba(10,91,255,.20);transition:transform .16s,box-shadow .16s}
.stmc__calc svg{width:18px;height:18px;flex:none;display:block}
.stmc__calc:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(10,91,255,.25)}
.stmc__calc:focus-visible{outline:3px solid rgba(10,91,255,.4);outline-offset:2px}

/* 8. Results header */
.stmc__results-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0 10px}
.stmc__results-title{margin:0;padding:0;font-family:var(--stmc-font-head);color:var(--stmc-heading);font-size:15px;font-weight:700}
.stmc__live{display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border-radius:999px;background:var(--stmc-secondary-light);color:var(--stmc-secondary-dark);font-size:11px;font-weight:700}

/* 9. Result cards */
.stmc__grid{display:block}
.stmc__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stmc__card{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:112px;padding:17px 12px;text-align:center;background:linear-gradient(145deg,#fff,var(--stmc-soft));border:1px solid var(--stmc-border);border-radius:18px}
.stmc__card-top{display:block;min-height:15px;margin:0 0 4px;color:var(--stmc-muted);font-size:11px;font-weight:600;line-height:1.35;letter-spacing:.02em}
.stmc__card-value{display:block;font-family:var(--stmc-font-head);color:var(--stmc-heading);font-size:28px;font-weight:800;line-height:1.1;letter-spacing:-.02em;word-break:break-word}
.stmc__card-value sub{font-size:15px;font-weight:700;vertical-align:baseline}
.stmc__card--primary .stmc__card-value{color:var(--stmc-primary)}
.stmc__card-label{display:block;margin-top:5px;color:var(--stmc-body);font-size:12px;font-weight:600}
.stmc__card-sub{display:block;margin-top:2px;color:var(--stmc-muted);font-size:11px}
.stmc__card--method .stmc__card-value{font-size:15px;font-weight:700;color:var(--stmc-heading)}
.stmc__icon{display:none;flex:none;width:34px;height:34px;align-items:center;justify-content:center;border-radius:10px;background:var(--stmc-primary-light);color:var(--stmc-primary)}
.stmc__card--secondary .stmc__icon{background:var(--stmc-secondary-light);color:var(--stmc-secondary-dark)}
.stmc__icon svg{width:18px;height:18px;flex:none;display:block}

/* 11. Actions */
.stmc__actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.stmc__action.stmc__action{display:flex;align-items:center;justify-content:center;gap:6px;height:46px;background:var(--stmc-surface);border:1px solid var(--stmc-border);border-radius:12px;color:var(--stmc-heading);font-size:13px;font-weight:600;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.stmc__action:hover:not(:disabled){border-color:var(--stmc-primary);color:var(--stmc-primary);background:var(--stmc-primary-light)}
.stmc__action:focus-visible{outline:3px solid rgba(10,91,255,.35);outline-offset:2px}
.stmc__action:disabled{opacity:.45;cursor:not-allowed}
.stmc__action svg{width:15px;height:15px;flex:none;display:block}
.stmc__action-short{display:none}
.stmc__privacy{margin:11px 0 0;color:var(--stmc-muted);font-size:12px;text-align:center;line-height:1.5}
.stmc__sr-live{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Conversion chart */
.stmc__table-wrap{margin-top:22px;padding-top:20px;border-top:1px solid var(--stmc-border)}
.stmc__table-title{margin:0 0 5px;padding:0;font-family:var(--stmc-font-head);color:var(--stmc-heading);font-size:17px;font-weight:800;letter-spacing:-.01em}
.stmc__table-note{margin:0 0 12px;color:var(--stmc-muted);font-size:12px;line-height:1.55}
.stmc__table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--stmc-border);border-radius:14px;background:#fff}
.stmc__table{width:100%;min-width:460px;border-collapse:collapse;font-size:13px}
.stmc__table.stmc__table th,.stmc__table.stmc__table td{padding:11px 14px;text-align:center;vertical-align:middle;border-bottom:1px solid var(--stmc-border)}
.stmc__table.stmc__table thead th{background:var(--stmc-soft);color:var(--stmc-muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.stmc__table.stmc__table tbody th{color:var(--stmc-heading);font-weight:700}
.stmc__table.stmc__table tbody td{color:var(--stmc-body)}
.stmc__table tbody tr:last-child th,.stmc__table tbody tr:last-child td{border-bottom:0}

/* Wide-card layout.
   Driven by a container query on the shell, so it depends on how wide the CARD
   actually is — not the viewport. A 700px card inside a 1400px Elementor column
   stays single-column; widen the card past 900px and the form and the results
   sit side by side instead of the form stretching into a letterbox. */
@container stmc (min-width:900px){
.stmc__shell{padding:30px}
/* align-items:stretch lets the results panel run the full height of the row, so
   the shorter form column reads as deliberate white space rather than a gap. */
.stmc__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:stretch}
.stmc__col--form{align-self:start}
.stmc__col--out{display:flex;flex-direction:column;padding:20px 22px;background:var(--stmc-soft);border:1px solid var(--stmc-border);border-radius:16px}
.stmc__col--out .stmc__results-head{margin-top:0}
.stmc__col--out .stmc__privacy{margin-top:auto;padding-top:11px}
/* Three cards across keeps the results panel two rows tall, which matches the
   height of the form column instead of towering over it. */
.stmc__cards{grid-template-columns:repeat(3,1fr);gap:8px}
.stmc__card{min-height:100px;padding:14px 8px;background:var(--stmc-surface)}
.stmc__card-value{font-size:20px}
.stmc__card--method .stmc__card-value{font-size:13px}
.stmc__card-top{font-size:10px}
.stmc__card-label{margin-top:4px;font-size:11px}
.stmc__card-sub{font-size:10px}
.stmc__actions{gap:8px}
.stmc__action{font-size:12px}
.stmc__calc{margin-top:18px}
.stmc__title{font-size:30px}
.stmc__table-wrap{margin-top:28px}
}
@container stmc (min-width:1280px){
.stmc__grid{gap:30px}
.stmc__col--out{padding:24px 26px}
.stmc__cards{gap:10px}
.stmc__card{min-height:108px;padding:16px 10px}
.stmc__card-value{font-size:23px}
.stmc__card--method .stmc__card-value{font-size:14px}
.stmc__card-top{font-size:11px}
.stmc__card-label{font-size:12px}
.stmc__action{font-size:13px}
}

/* 10 + 14. Mobile */
@media(max-width:600px){
.stmc__shell{padding:14px;border-radius:16px}
.stmc__title{font-size:21px}
.stmc__modes span{height:44px;font-size:13px}
.stmc__main-wrap{height:64px}
.stmc__main{font-size:28px;padding-left:14px}
.stmc__presets{grid-template-columns:repeat(3,1fr)}
.stmc__methods{grid-template-columns:1fr}
.stmc__row{grid-template-columns:1fr}
.stmc__cards{grid-template-columns:1fr;gap:8px}
.stmc__card{flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;min-height:58px;padding:12px 14px;text-align:left;background:var(--stmc-surface);border-color:var(--stmc-border);border-radius:14px}
.stmc__icon{display:flex}
.stmc__card-body{min-width:0}
.stmc__card-top{min-height:0;margin:0}
.stmc__card-top:empty{display:none}
.stmc__card-value{font-size:21px}
.stmc__card--method .stmc__card-value{font-size:14px}
.stmc__card-label{display:inline;margin:0 0 0 5px;font-size:12px}
.stmc__card-sub{display:inline;margin-left:5px}
.stmc__action-long{display:none}
.stmc__action-short{display:inline}
.stmc__table{min-width:0;font-size:12px}
.stmc__table.stmc__table th,.stmc__table.stmc__table td{padding:9px 8px}
.stmc__table.stmc__table thead th{font-size:10px;letter-spacing:.03em}
}

@media(prefers-reduced-motion:reduce){
.stmc *,.stmc *::before,.stmc *::after{transition:none!important;animation:none!important}
.stmc__calc:hover{transform:none}
}

/* v1.3.4: page-builder wrapper stretch guard.
   The plugin's own markup is always content-height, but some Elementor
   layouts stretch the WIDGET WRAPPER itself (flex-grow / min-height from
   the parent container), which leaves a large void inside the widget
   below the card — visible on mobile. Rules inside .stmc cannot fix that,
   so the wrapper chain is pinned to content height here. Zero effect on
   layouts where the wrapper already behaves. */
.elementor-widget-steps_conversion_calculator,
.elementor-widget-steps_conversion_calculator>.elementor-widget-container{height:auto!important;min-height:0!important;flex:0 0 auto!important}
.stmc{display:block;height:auto;min-height:0}