.stft {
  --stft-accent: var(--e-global-color-accent, #a41615);
  --stft-red: var(--stft-accent);
  --stft-font: var(--e-global-typography-text-font-family, var(--fm, Inter, system-ui, -apple-system, "Segoe UI", sans-serif));
  --stft-bg: #0f0d0e;
  --stft-panel: #181416;
  --stft-soft: #211b1d;
  --stft-ink: #f3f2f2;
  --stft-muted: #aaa5a6;
  --stft-line: #ffffff1f;
  --stft-link: #dfa29f;
  --stft-code: #0a090b;
  --stft-good-bg: #142c22;
  --stft-good: #8ad4ae;
  --stft-review-bg: #352914;
  --stft-review: #f4c66a;
  --stft-bad-bg: #3a1c1d;
  --stft-bad: #f9a3a0;
  color-scheme: dark;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 960px;
  margin: 28px auto;
  border: 1px solid var(--stft-line);
  border-radius: 18px;
  background: var(--stft-bg);
  color: var(--stft-ink);
  font-family: var(--stft-font);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.65;
  text-align: left;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 12px 40px #00000012;
}

.stft[data-color-scheme="light"] {
  --stft-bg: #fff;
  --stft-panel: #f7f6f6;
  --stft-soft: #f0eded;
  --stft-ink: #202024;
  --stft-muted: #646168;
  --stft-line: #e5e0e1;
  --stft-link: var(--stft-accent);
  --stft-code: #f1eeee;
  --stft-good-bg: #e3f5eb;
  --stft-good: #1f6547;
  --stft-review-bg: #fff0d6;
  --stft-review: #815002;
  --stft-bad-bg: #fde6e2;
  --stft-bad: #982b23;
  color-scheme: light;
}

.stft *, .stft *::before, .stft *::after { box-sizing: border-box; }
.stft [hidden] { display: none !important; }
/* Existing Elementor tool pages use important rules on all paragraphs,
   headings and links. Keep these overrides inside the widget. */
.stft.stft :where(p) { margin: 8px 0 16px !important; font-family: var(--stft-font) !important; font-size: 15px !important; line-height: 1.65 !important; color: var(--stft-ink) !important; }
.stft.stft :where(a) { color: var(--stft-link) !important; text-decoration: none !important; }
.stft.stft :where(a:hover) { color: var(--stft-ink) !important; }
.stft.stft strong { color: inherit; }
.stft-heading { display: flex; align-items: center; gap: 12px; padding: 20px 30px; border-bottom: 1px solid var(--stft-line); }
.stft-brand { color: var(--stft-ink); font-size: 21px; font-weight: 600; letter-spacing: -.6px; }
.stft-mark { display: grid; place-items: center; flex: 0 0 32px; height: 36px; border-radius: 9px; background: var(--stft-accent); color: #fff; font-size: 18px; font-weight: 600; }
.stft-site-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.stft-site-logo a { display: flex; align-items: center; line-height: 1; }
.stft-site-logo img { display: block; width: 152px; max-width: 100%; height: 40px; object-fit: contain; }
.stft[data-color-scheme="light"] .stft-site-logo { padding: 5px 12px; border-radius: 10px; background: #0a0a0b; }
.stft-eyebrow { display: block; color: var(--stft-muted); font-size: 11px; font-weight: 500; line-height: 1.5; letter-spacing: .6px; }
.stft-free { margin-left: auto; padding: 3px 12px; border: 1px solid var(--stft-line); border-radius: 20px; color: var(--stft-ink); font-size: 11px; white-space: nowrap; }
.stft-body { padding: 30px; }
.stft.stft :is(h2, h3, h4) { padding: 0 !important; border: 0; color: var(--stft-ink) !important; font-family: var(--stft-font) !important; font-weight: 600 !important; text-transform: none !important; }
.stft.stft h2 { margin: 0 0 12px !important; font-size: clamp(24px, 3vw, 32px) !important; line-height: 1.25 !important; letter-spacing: -.8px; }
.stft.stft h3 { margin: 0 0 8px !important; font-size: 18px !important; line-height: 1.4 !important; letter-spacing: -.3px; }
.stft.stft h4 { margin: 0 0 8px !important; font-size: 14px !important; line-height: 1.5 !important; }
.stft .stft-intro { max-width: 700px; color: var(--stft-muted) !important; }
.stft .stft-budget { margin: 20px 0 !important; padding: 13px 16px; border: 1px solid var(--stft-line); border-radius: 12px; background: var(--stft-panel); color: var(--stft-ink) !important; font-size: 13px !important; font-weight: 600; }
.stft-budget span { display: block; margin-top: 3px; color: var(--stft-muted); font-size: 12px; font-weight: 400; }
.stft-form { margin: 24px 0 20px; }
.stft .stft-form :where(label) { display: block; margin-bottom: 9px; color: var(--stft-ink); font-size: 13px; font-weight: 500; }
.stft-input-row { display: flex; align-items: stretch; gap: 6px; padding: 5px; border: 1px solid #e2dede; border-radius: 14px; background: #fff; }
.stft input:not([type="checkbox"]) { flex: 1; min-width: 0; width: 100%; min-height: 46px; margin: 0; padding: 10px 14px; border: 0; border-radius: 9px; background: #fff; color: #202024; font: inherit; font-size: 15px; box-shadow: none; color-scheme: light; }
/* Match the existing tool-page input selector to override its forced dark
   field without changing any inputs outside this widget. */
.stft.stft input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="range"]) { border: 0 !important; border-radius: 9px !important; background-color: #fff !important; color: #202024 !important; -webkit-text-fill-color: #202024 !important; caret-color: #202024 !important; font-family: var(--stft-font) !important; }
.stft.stft input::placeholder { color: #6e6b73 !important; -webkit-text-fill-color: #6e6b73 !important; opacity: 1 !important; }
.stft.stft :where(button), .stft .stft-portal { min-height: 46px; margin: 0; padding: 12px 18px; border: 1px solid transparent; border-radius: 12px; font: inherit; font-size: 14px; font-weight: 600; line-height: 1.4; text-transform: none; text-decoration: none; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.stft button.stft-submit, .stft .stft-portal { background: var(--stft-accent); color: #fff; }
.stft button.stft-submit:hover:not(:disabled), .stft .stft-portal:hover { background: color-mix(in srgb, var(--stft-accent) 88%, #fff); color: #fff; }
.stft button:disabled { opacity: .6; cursor: wait; }
.stft :is(button, a, input, select, summary):focus-visible { outline: 3px solid var(--stft-link); outline-offset: 3px; }
.stft input:not([type="checkbox"]):focus-visible { outline-color: var(--stft-accent); outline-offset: -2px; }
.stft-form .stft-consent { display: flex; align-items: flex-start; gap: 9px; margin-top: 16px; color: var(--stft-muted); font-size: 12px; font-weight: 400; cursor: pointer; }
.stft .stft-consent input { appearance: auto; flex: 0 0 17px; width: 17px; height: 17px; min-height: 17px; margin: 2px 0 0; padding: 0; accent-color: var(--stft-accent); cursor: pointer; }
.stft .stft-hint, .stft .stft-privacy { color: var(--stft-muted) !important; font-size: 12px !important; line-height: 1.75 !important; }
.stft .stft-hint { margin-top: 10px !important; }
.stft-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px; border: 1px solid var(--stft-line); border-radius: 12px; background: var(--stft-panel); }
.stft-progress-track { display: block; flex: 0 0 100%; height: 4px; overflow: hidden; border-radius: 4px; background: var(--stft-line); }
.stft-progress-track > span { display: block; width: 35%; height: 100%; border-radius: inherit; background: var(--stft-accent); animation: stft-progress 1.6s ease-in-out infinite alternate; }
@keyframes stft-progress { from { transform: translateX(0); } to { transform: translateX(186%); } }
.stft-spinner { flex: 0 0 18px; width: 18px; height: 18px; border: 2px solid var(--stft-line); border-top-color: var(--stft-link); border-radius: 50%; animation: stft-spin .8s linear infinite; }
@keyframes stft-spin { to { transform: rotate(360deg); } }
.stft .stft-progress-text { font-size: 13px; }
.stft .stft-clock { margin-left: auto; color: var(--stft-muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stft .stft-error { padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--stft-bad) 35%, transparent); border-radius: 12px; background: var(--stft-bad-bg); color: var(--stft-bad) !important; font-size: 13px !important; }
.stft-result { margin-top: 28px; outline: none; }
.stft-result-heading { display: flex; align-items: center; gap: 18px; padding: 20px; border: 1px solid var(--stft-line); border-radius: 14px; background: var(--stft-panel); }
.stft-score { display: grid; place-items: center; flex-shrink: 0; width: 72px; min-height: 72px; border: 1px solid var(--stft-line); border-radius: 12px; background: var(--stft-soft); color: var(--stft-ink); font-size: 30px; font-weight: 600; }
.stft-score[data-tone="good"], .stft-badge[data-tone="good"] { background: var(--stft-good-bg); color: var(--stft-good); }
.stft-score[data-tone="review"], .stft-badge[data-tone="review"] { background: var(--stft-review-bg); color: var(--stft-review); }
.stft-score[data-tone="bad"], .stft-badge[data-tone="bad"] { background: var(--stft-bad-bg); color: var(--stft-bad); }
.stft .stft-result-heading p { margin: 0 !important; color: var(--stft-muted) !important; font-size: 13px !important; }
.stft .stft-meta, .stft .stft-result-heading .stft-meta { color: var(--stft-muted) !important; font-size: 12px !important; overflow-wrap: anywhere; }
.stft-priorities { margin: 18px 0; padding: 16px 20px; border-left: 3px solid var(--stft-review); border-radius: 8px; background: var(--stft-review-bg); color: var(--stft-ink); font-size: 13px; }
.stft .stft-priorities h3 { font-size: 15px !important; }
.stft ul { margin: 8px 0; padding-left: 20px; }
.stft li { margin: 5px 0; }
.stft-checks { display: grid; gap: 12px; margin-top: 18px; }
.stft-check { min-width: 0; padding: 17px 18px; border: 1px solid var(--stft-line); border-radius: 12px; background: var(--stft-panel); overflow-wrap: anywhere; }
.stft-check-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.stft-check-header strong { font-size: 14px; font-weight: 600; }
.stft-badge { display: inline-block; flex-shrink: 0; padding: 3px 9px; border-radius: 20px; background: var(--stft-soft); color: var(--stft-muted); font-size: 11px; font-weight: 500; }
.stft .stft-check p { margin: 8px 0 !important; color: var(--stft-muted) !important; font-size: 13px !important; }
.stft-check code, .stft pre { display: block; padding: 12px; border-radius: 8px; background: var(--stft-code); color: var(--stft-ink); font-size: 12px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.stft details { margin-top: 15px; padding: 15px 18px; border: 1px solid var(--stft-line); border-radius: 12px; background: var(--stft-panel); }
.stft summary { color: var(--stft-ink); font-size: 13px; font-weight: 500; cursor: pointer; }
.stft dl { display: grid; grid-template-columns: minmax(110px, 1fr) 2fr; gap: 8px 16px; margin: 18px 0; font-size: 13px; }
.stft dt { color: var(--stft-muted); }
.stft dd { margin: 0; overflow-wrap: anywhere; }
.stft .stft-secondary { margin: 10px 8px 0 0; border-color: var(--stft-line); background: transparent; color: var(--stft-ink); font-size: 12px; }
.stft .stft-secondary:hover { border-color: var(--stft-link); background: var(--stft-panel); }
.stft .stft-coverage { margin-top: 18px !important; padding: 15px 16px; border-radius: 10px; background: var(--stft-panel); color: var(--stft-muted) !important; font-size: 12px !important; }
.stft .stft-platform { margin-top: 10px; padding: 8px; border: 1px solid var(--stft-line); border-radius: 8px; background: var(--stft-bg); color: var(--stft-ink); font: inherit; font-size: 13px; }
.stft .stft-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.stft .stft-tile-state { color: var(--stft-ink) !important; font-size: 14px !important; font-weight: 600; }
.stft .stft-labels { display: flex; flex-wrap: wrap; gap: 6px; margin: 5px 0 11px; }
.stft .stft-section-title { margin-top: 28px !important; }
.stft .stft-source, .stft .stft-upgrade { color: var(--stft-link) !important; font-size: 12px; font-weight: 500; }
.stft .stft-port-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 15px; font-size: 12px; }
.stft .stft-port-grid p { padding-bottom: 8px; border-bottom: 1px solid var(--stft-line); font-size: 12px !important; overflow-wrap: anywhere; }
.stft-handoff { display: grid; gap: 17px; margin: 28px 0 20px; padding: 24px; border: 1px solid color-mix(in srgb, var(--stft-accent) 45%, var(--stft-line)); border-radius: 14px; background: linear-gradient(120deg, color-mix(in srgb, var(--stft-accent) 11%, var(--stft-bg)), var(--stft-panel)); }
.stft .stft-handoff h3 { font-size: 21px !important; font-weight: 500 !important; }
.stft .stft-handoff p { margin: 0 !important; color: var(--stft-muted) !important; font-size: 13px !important; }
.stft-handoff .stft-eyebrow { margin-bottom: 10px; color: var(--stft-link); font-size: 10px; font-weight: 600; letter-spacing: 1.3px; }
.stft .stft-benefits { margin: 14px 0 0; padding: 0; list-style: none; font-size: 13px; }
.stft .stft-benefits li { position: relative; padding-left: 22px; color: var(--stft-ink); }
.stft-benefits li::before { position: absolute; left: 0; color: var(--stft-link); font-weight: 600; content: '✓'; }
.stft .stft-portal, .stft .stft-portal:hover { display: inline-flex; align-items: center; justify-content: center; justify-self: start; gap: 22px; color: #fff !important; }
.stft .stft-handoff small { display: block; color: var(--stft-muted); font-size: 12px; line-height: 1.75; }
.stft-related { display: flex; flex-wrap: wrap; gap: 10px; max-height: 190px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--stft-line); overflow: auto; }
.stft-related a { padding: 7px 11px; border: 1px solid var(--stft-line); border-radius: 8px; color: var(--stft-muted); font-size: 12px; font-weight: 500; text-decoration: none; }
.stft-related a:hover { border-color: var(--stft-link); color: var(--stft-link); }

/* Form-only embeds leave the surrounding section to the WordPress theme.
   Native dialogs enter the top layer, outside Elementor overflow/transforms. */
.stft[data-layout="form"] { max-width: none; margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
.stft[data-layout="form"] > .stft-body { padding: 0; }
.stft[data-layout="form"] .stft-form { margin: 0; }
.stft[data-layout="form"] .stft-progress { margin-top: 12px; }
.stft .stft-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.stft .stft-modal { position: fixed; inset: 0; width: min(800px, calc(100% - 32px)); max-width: none; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 1px solid var(--stft-line); border-radius: 18px; background: var(--stft-bg); color: var(--stft-ink); font: inherit; text-align: left; overflow: auto; overscroll-behavior: contain; box-shadow: 0 24px 80px #0008; }
.stft .stft-modal::backdrop { background: #08090bc4; }
html:has(.stft-modal[open]) { overflow: hidden; }
.stft-modal-heading { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 16px; padding: 18px 24px; border-bottom: 1px solid var(--stft-line); background: var(--stft-bg); }
.stft.stft .stft-modal-heading h2 { flex: 1; margin: 0 !important; font-size: 20px !important; line-height: 1.4 !important; letter-spacing: -.3px; }
.stft.stft button.stft-modal-close { flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 1px solid var(--stft-line); border-radius: 10px; background: var(--stft-panel); color: var(--stft-ink); font-size: 28px; line-height: 1; }
.stft-modal-body { padding: 24px; }
.stft-modal .stft-result { margin-top: 0; }
.stft .stft-confirm-target { overflow-wrap: anywhere; }
.stft .stft-authorization-form .stft-consent { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 20px; font-size: 14px; cursor: pointer; }
.stft .stft-view-result { margin-top: 12px; }

@media (max-width: 700px) {
  .stft-heading { padding: 17px 20px; }
  .stft-heading > .stft-eyebrow { display: none; }
  .stft-body { padding: 24px 20px; }
  .stft-input-row { flex-direction: column; gap: 5px; }
  .stft .stft-submit { width: 100%; white-space: normal; }
  .stft-result-heading { gap: 12px; padding: 16px; }
  .stft-score { width: 58px; min-height: 64px; font-size: 25px; }
  .stft dl { grid-template-columns: 1fr; gap: 3px; }
  .stft dd { margin-bottom: 8px; }
  .stft .stft-tiles, .stft .stft-port-grid { grid-template-columns: 1fr; }
  .stft .stft-progress { flex-wrap: wrap; }
  .stft .stft-clock { width: 100%; margin-left: 28px; }
  .stft .stft-portal { width: 100%; justify-self: stretch; }
  .stft-handoff { padding: 20px; }
  .stft .stft-related { flex-direction: column; flex-wrap: nowrap; }
  .stft-related a { flex-shrink: 0; overflow-wrap: anywhere; }
  .stft .stft-modal { width: calc(100% - 20px); max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); border-radius: 14px; }
  .stft-modal-heading { gap: 10px; padding: 12px 16px; }
  .stft-modal-body { padding: 20px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .stft-spinner { animation: none; }
  .stft-progress-track > span { animation: none; width: 100%; opacity: .65; }
  .stft button, .stft .stft-portal { transition: none; }
}