/* SocialTalent Tools — base styles. Brand tokens match TT Hoves Pro + Forest/Lime palette. */

/* Server-rendered SEO header — visible above any [data-st-tool] mount.
   Crawlers see this without JS; users see it while bundle loads. */
.st-tool-page-header {
  font-family: 'Hoves', 'TT Hoves Pro', system-ui, -apple-system, sans-serif;
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 16px 8px;
  text-align: center;
}

.st-tool-page-h1 {
  font-size: 40px;
  line-height: 1.1;
  font-weight: 700;
  color: #124035;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}

.st-tool-page-lede {
  font-size: 18px;
  line-height: 1.5;
  color: #6B6B68;
  margin: 0 auto;
  max-width: 600px;
}

@media (max-width: 640px) {
  .st-tool-page-h1 { font-size: 30px; }
  .st-tool-page-lede { font-size: 16px; }
}

.st-tool, [data-st-tool] {
  --st-forest: #124035;
  --st-ocean: #02271F;
  --st-emerald: #147D5C;
  --st-leaf: #00A75D;
  --st-lime: #97F881;
  --st-pastel: #C2F4C4;
  --st-frost: #EBF5EB;
  --st-ink: #1D1D1B;
  --st-ink-soft: #2D2D2B;
  --st-ink-muted: #6B6B68;
  --st-paper: #FFFFFF;
  --st-rule: #E5E7E5;

  font-family: 'Hoves', 'TT Hoves Pro', system-ui, -apple-system, sans-serif;
  color: var(--st-ink);
  max-width: 1320px;
  margin: 0 auto;
  padding: 32px 16px;
  line-height: 1.5;
}

/* Form view (pre-result) keeps its narrow column for readability;
   intro / question wrapper centers inside the wider mount. */
[data-st-tool] .st-tool-intro,
[data-st-tool] .st-tool-question,
[data-st-tool] .st-tool-progress {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

[data-st-tool] *, [data-st-tool] *::before, [data-st-tool] *::after {
  box-sizing: border-box;
}

.st-tool-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 13px;
  font-weight: 600;
  color: var(--st-emerald);
  margin: 0 0 8px;
}

.st-tool-headline,
.st-tool-question h2,
.st-tool-question-text {
  font-size: 28px;
  font-weight: 700;
  color: var(--st-forest);
  margin: 0 0 12px;
  line-height: 1.2;
}

.st-tool-sub,
.st-tool-helper {
  color: var(--st-ink-muted);
  font-size: 16px;
  margin: 0 0 24px;
}

.st-tool-cta,
.st-tool-next,
.st-tool-download {
  background: #97F881;
  color: #02271F;
  border: 0;
  padding: 16px 28px;
  border-radius: 9999px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  font-family: inherit;
}

.st-tool-cta:hover,
.st-tool-next:hover:not([disabled]),
.st-tool-download:hover {
  background: #C2F4C4;
  color: #02271F;
  box-shadow: 0 6px 24px rgba(20, 125, 92, 0.18);
}

.st-tool-cta:focus-visible,
.st-tool-next:focus-visible,
.st-tool-download:focus-visible {
  outline: 2px solid #147D5C;
  outline-offset: 3px;
}

/* Intro section: center eyebrow + sub + button so the lime CTA sits centred under the section opener question */
.st-tool-intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  padding: 8px 0 16px;
}

.st-tool-intro .st-tool-eyebrow {
  margin: 0 0 12px;
}

.st-tool-intro .st-tool-sub {
  margin: 0 auto 28px;
  max-width: 56ch;
}

.st-tool-intro .st-tool-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .st-tool-cta,
  .st-tool-next,
  .st-tool-download {
    transition: none;
  }
}

/* ============================================================
   Editorial system extensions — page-wide (hub + 3 sub-pages)
   ------------------------------------------------------------
   Defined here so they survive any per-page Elementor edits.
   All tokens live in the [data-st-tool] scope above + literals
   matching the brand palette.
   ============================================================ */

/* Unified .st-cta — single component, modifier classes pick the variant */
.st-cta{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 24px;border-radius:9999px;
  font:600 16px/20px 'Hoves', 'TT Hoves Pro', -apple-system, BlinkMacSystemFont, sans-serif;
  text-decoration:none;cursor:pointer;border:1.5px solid transparent;
  background:#147D5C;color:#FFFFFF;
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
  text-wrap:pretty;
}
.st-cta:hover{background:#02271F;color:#FFFFFF}
.st-cta:focus-visible{outline:2px solid #97F881;outline-offset:3px}
.st-cta--lime{background:#97F881;color:#02271F}
.st-cta--lime:hover{background:#C2F4C4;color:#02271F;box-shadow:0 6px 24px rgba(20,125,92,.18)}
.st-cta--outlined{background:transparent;color:#147D5C;border-color:#147D5C}
.st-cta--outlined:hover{background:#147D5C;color:#FFFFFF}
.st-cta--outlined-light{background:transparent;color:#97F881;border-color:#97F881}
.st-cta--outlined-light:hover{background:#97F881;color:#124035}
.st-cta--lg{padding:18px 32px;font-size:18px;line-height:22px}

/* Make .st-tool-cta inherit from .st-cta so React intro reuses the same shape */
.st-tool-cta{
  background:#97F881 !important;color:#02271F !important;
  padding:16px 28px;border:0;border-radius:9999px;
  font:600 16px/20px 'Hoves', 'TT Hoves Pro', sans-serif;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, box-shadow .15s ease;
}
.st-tool-cta:hover{background:#C2F4C4 !important;box-shadow:0 6px 24px rgba(20,125,92,.18)}

/* Typographic polish */
.st-cta, .st-tool-cta, [data-st-tool], [data-st-tool] *{
  font-feature-settings:'kern' 1, 'liga' 1;
}
[data-st-tool] h2, [data-st-tool] h3, [data-st-tool] p,
.st-section-opener h2, .st-section-opener p,
.st-faq-grid h2, .st-faq-grid p{ text-wrap:pretty }

/* === Readiness signature widget — Tier band === */
.st-tier-band{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  max-width:1100px;margin:0 auto 64px;padding:0 16px;
}
.st-tier{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;
  padding:24px 28px;border-radius:16px;
  background:var(--tier-bg,#EBF5EB);color:var(--tier-fg,#124035);
  border:1px solid rgba(20,125,92,.12);
  font-family:'Hoves', 'TT Hoves Pro', sans-serif;
}
.st-tier .st-tier-range{
  font:700 12px/16px inherit;letter-spacing:1.5px;text-transform:uppercase;
  opacity:.85;margin:0 0 8px;
}
.st-tier .st-tier-name{font:600 24px/29px inherit;margin:0 0 6px}
.st-tier .st-tier-meta{font:400 14px/18px inherit;color:inherit;opacity:.85;margin:0}
.st-tier--emerging{--tier-bg:#EBF5EB;--tier-fg:#124035}
.st-tier--developing{--tier-bg:#C2F4C4;--tier-fg:#124035}
.st-tier--mature{--tier-bg:#147D5C;--tier-fg:#FFFFFF;border-color:#147D5C}
@media (max-width:768px){
  .st-tier-band{grid-template-columns:1fr;gap:8px;margin-bottom:48px}
  .st-tier{padding:20px 24px}
  .st-tier .st-tier-name{font-size:20px;line-height:24px}
}

/* === Governance signature widget — framework strip === */
.st-framework-strip{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  margin:0 auto 32px;padding:0 16px;max-width:760px;
}
.st-framework{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;border-radius:9999px;
  background:rgba(255,255,255,.08);color:#C2F4C4;border:1px solid rgba(151,248,129,.35);
  font:700 12px/16px 'Hoves', 'TT Hoves Pro', sans-serif;letter-spacing:1.5px;text-transform:uppercase;
}
.st-framework .st-fw-region{
  font-weight:400;letter-spacing:.5px;color:rgba(255,255,255,.6);
}

/* === Playbook signature widget — 4-phase timeline === */
.st-timeline{
  position:relative;max-width:1100px;margin:0 auto 56px;padding:48px 24px 24px;
}
.st-timeline-track{
  position:absolute;left:5%;right:5%;top:96px;height:2px;
  background:linear-gradient(to right,#C2F4C4,#147D5C);
  z-index:0;
}
.st-timeline-markers{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  position:relative;z-index:1;
}
.st-timeline-marker{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  font-family:'Hoves', 'TT Hoves Pro', sans-serif;
}
.st-timeline-marker .st-timeline-day{
  font:700 12px/16px inherit;letter-spacing:1.5px;text-transform:uppercase;
  color:#147D5C;margin:0 0 32px;
}
.st-timeline-marker .st-timeline-dot{
  width:14px;height:14px;border-radius:50%;background:#147D5C;
  border:3px solid #FFFFFF;box-shadow:0 0 0 1px #147D5C;
  margin:0 0 16px;
}
.st-timeline-marker .st-timeline-phase{
  font:600 18px/22px inherit;color:#02271F;margin:0 0 4px;
}
.st-timeline-marker .st-timeline-desc{
  font:400 14px/18px inherit;color:#545452;margin:0;max-width:14ch;
}
@media (max-width:768px){
  .st-timeline{padding:24px 16px}
  .st-timeline-track{display:none}
  .st-timeline-markers{grid-template-columns:1fr;gap:24px}
  .st-timeline-marker{flex-direction:row;align-items:center;text-align:left;gap:16px}
  .st-timeline-marker .st-timeline-day{margin:0;flex:0 0 60px}
  .st-timeline-marker .st-timeline-dot{margin:0;flex:0 0 14px}
  .st-timeline-marker .st-timeline-phase{margin:0}
}

/* === Scroll-reveal observer hook === */
.st-scrollin{opacity:0;transform:translateY(12px);transition:opacity .5s cubic-bezier(.4,0,.2,1), transform .5s cubic-bezier(.4,0,.2,1)}
.st-scrollin.is-shown{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .st-scrollin{opacity:1;transform:none;transition:none}
}

/* === No-JS fallback: anything tagged for fade reveal must still render === */
.no-js .st-fadein, .no-js .st-scrollin{opacity:1 !important;transform:none !important}

/* === Print stylesheet — strip animation, expand FAQ, single column === */
@media print{
  .st-hero-animated::before, .st-hero-animated{animation:none !important;background:#FFFFFF !important;color:#02271F !important}
  .st-hero-animated *, .st-tools-hub *, .st-tier, .st-tier *, .st-framework{color:#02271F !important;background:#FFFFFF !important;border-color:#E2E2E2 !important}
  .st-faq-list details{break-inside:avoid}
  .st-faq-list details[open]{}
  .st-faq-list details:not([open]){display:none}
  .st-rec, form, .st-toolkit-form-success, .st-cta, .st-tool-cta{display:none !important}
  .st-directory{border-top:1px solid #C1C1C1}
  .st-directory .st-row{break-inside:avoid;page-break-inside:avoid}
  .st-pill-tag{background:transparent !important;color:#02271F !important;border:1px solid #02271F}
  .st-timeline-track{background:#02271F}
  body, .elementor *{background:#FFFFFF !important;color:#02271F !important}
  @page{margin:18mm 14mm}
}

.st-tool-next[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.st-tool-back {
  background: transparent;
  border: 0;
  color: var(--st-emerald);
  font-weight: 600;
  cursor: pointer;
  padding: 14px 0;
  font-family: inherit;
  font-size: 14px;
  margin-right: 16px;
}

.st-tool-progress {
  background: var(--st-frost);
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 16px;
}

.st-tool-progress-bar {
  background: var(--st-lime);
  height: 100%;
  transition: width 0.3s;
}

.st-tool-step-meta {
  font-size: 13px;
  color: var(--st-ink-muted);
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.st-tool-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 24px 0;
}

.st-tool-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--st-rule);
  border-radius: 8px;
  cursor: pointer;
  background: var(--st-paper);
  transition: border-color 0.15s, background 0.15s;
}

.st-tool-option:hover {
  border-color: var(--st-leaf);
  background: var(--st-frost);
}

.st-tool-option.is-selected {
  border-color: var(--st-forest);
  background: var(--st-pastel);
}

.st-tool-option input[type="radio"] {
  margin-top: 4px;
  flex: 0 0 auto;
}

.st-tool-option-text {
  flex: 1;
  font-size: 15px;
  color: var(--st-ink);
}

.st-tool-nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 24px;
}

.st-tool-loading,
.st-tool-error {
  text-align: center;
  padding: 48px 16px;
  color: var(--st-ink-muted);
}

.st-tool-error pre {
  text-align: left;
  background: var(--st-frost);
  padding: 12px;
  border-radius: 6px;
  font-size: 12px;
  white-space: pre-wrap;
}

/* Results */
.st-tool-result-header {
  text-align: center;
  padding: 32px 0;
  border-bottom: 1px solid var(--st-rule);
  margin-bottom: 32px;
}

.st-tool-score {
  font-size: 56px;
  font-weight: 700;
  color: var(--st-forest);
  margin: 0;
  line-height: 1;
}

.st-tool-band-name {
  font-size: 24px;
  font-weight: 600;
  color: var(--st-emerald);
  margin: 12px 0 8px;
}

.st-tool-band-desc {
  color: var(--st-ink-soft);
  max-width: 520px;
  margin: 0 auto;
}

.st-tool-breakdown h3,
.st-tool-gaps h3 {
  font-size: 20px;
  color: var(--st-forest);
  margin: 32px 0 16px;
  font-weight: 700;
}

.st-tool-cat {
  margin-bottom: 16px;
}

.st-tool-cat-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--st-ink-soft);
}

.st-tool-cat-bar {
  height: 8px;
  background: var(--st-frost);
  border-radius: 4px;
  overflow: hidden;
}

.st-tool-cat-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--st-leaf), var(--st-lime));
  transition: width 0.4s;
}

.st-tool-gap {
  background: var(--st-frost);
  border-left: 4px solid var(--st-emerald);
  padding: 20px;
  margin-bottom: 16px;
  border-radius: 0 8px 8px 0;
}

.st-tool-gap h4 {
  font-size: 18px;
  margin: 0 0 8px;
  color: var(--st-forest);
}

.st-tool-gap-meaning {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--st-ink-soft);
}

.st-tool-gap-actions {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
}

.st-tool-gap-actions li {
  margin-bottom: 6px;
  color: var(--st-ink-soft);
}

.st-tool-actions {
  text-align: center;
  margin-top: 32px;
}

/* ============ Governance — gap detail + 30-day plan ============ */
.st-tool-gap-q {
  font-size: 14px;
  font-weight: 600;
  color: var(--st-forest);
  margin: 0 0 6px;
}

.st-tool-gap-if-no {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--st-ink);
  background: var(--st-paper);
  padding: 8px 12px;
  border-radius: 6px;
}

.st-tool-plan h3 {
  font-size: 20px;
  color: var(--st-forest);
  margin: 32px 0 8px;
  font-weight: 700;
}

.st-tool-plan-intro {
  color: var(--st-ink-muted);
  margin: 0 0 16px;
  font-size: 15px;
}

.st-tool-week {
  background: var(--st-paper);
  border: 1px solid var(--st-rule);
  border-radius: 8px;
  padding: 18px 20px;
  margin-bottom: 14px;
}

.st-tool-week h4 {
  font-size: 17px;
  color: var(--st-forest);
  margin: 0 0 6px;
  font-weight: 700;
}

.st-tool-week-desc {
  color: var(--st-ink-muted);
  font-size: 13px;
  margin: 0 0 12px;
}

.st-tool-week-tasks {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
}

.st-tool-week-tasks li {
  margin-bottom: 4px;
  color: var(--st-ink-soft);
}

/* ============ Playbook — input panel + phase accordion ============ */
.st-tool-input-panel {
  margin: 32px 0;
}

.st-tool-input-panel h3 {
  font-size: 18px;
  color: var(--st-forest);
  margin: 0 0 12px;
  font-weight: 700;
}

.st-tool-input-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.st-tool-input-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--st-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0 12px 8px 0;
  border-bottom: 1px solid var(--st-rule);
}

.st-tool-input-table td {
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--st-frost);
  vertical-align: top;
}

.st-tool-input-table .st-tool-input-name {
  font-weight: 600;
  color: var(--st-forest);
  width: 110px;
}

.st-tool-input-table .st-tool-input-choice {
  color: var(--st-ink);
  width: 200px;
}

.st-tool-input-table .st-tool-input-changed {
  color: var(--st-ink-soft);
}

.st-tool-phases h3 {
  font-size: 20px;
  color: var(--st-forest);
  margin: 32px 0 16px;
  font-weight: 700;
}

.st-tool-phase {
  background: var(--st-paper);
  border: 1px solid var(--st-rule);
  border-radius: 10px;
  padding: 24px;
  margin-bottom: 18px;
}

.st-tool-phase-head {
  border-bottom: 1px solid var(--st-frost);
  padding-bottom: 14px;
  margin-bottom: 16px;
}

.st-tool-phase-weeks {
  font-size: 11px;
  font-weight: 600;
  color: var(--st-emerald);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 6px;
}

.st-tool-phase-title {
  font-size: 22px;
  color: var(--st-forest);
  margin: 0 0 6px;
  font-weight: 700;
}

.st-tool-phase-intro {
  color: var(--st-ink-muted);
  font-size: 14px;
  margin: 0;
}

.st-tool-phase-block {
  margin-bottom: 16px;
}

.st-tool-phase-block:last-child {
  margin-bottom: 0;
}

.st-tool-phase-block h5 {
  font-size: 12px;
  font-weight: 600;
  color: var(--st-emerald);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 8px;
}

.st-tool-phase-block ul {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  color: var(--st-ink-soft);
}

.st-tool-phase-block ul li {
  margin-bottom: 4px;
}

.st-tool-cm {
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--st-ink-soft);
  line-height: 1.5;
}

.st-tool-cm strong {
  color: var(--st-forest);
}

.st-tool-phase-failures {
  background: var(--st-frost);
  border-radius: 6px;
  padding: 16px;
  margin-top: 12px;
  margin-bottom: 0;
}

.st-tool-fm {
  margin-bottom: 12px;
}

.st-tool-fm:last-child {
  margin-bottom: 0;
}

.st-tool-fm-failure {
  font-size: 13px;
  font-weight: 600;
  color: var(--st-forest);
  margin: 0 0 4px;
}

.st-tool-fm-mitigation {
  font-size: 13px;
  color: var(--st-ink-soft);
  margin: 0;
  line-height: 1.5;
}

/* ============ Email gate modal ============ */
.st-eg-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 39, 31, 0.6);
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: st-eg-fade-in 0.15s ease-out;
}
@keyframes st-eg-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.st-eg-dialog {
  background: #FFFFFF;
  border-radius: 12px;
  padding: 32px;
  max-width: 440px;
  width: 100%;
  font-family: 'Hoves', 'TT Hoves Pro', system-ui, -apple-system, sans-serif;
  box-shadow: 0 24px 48px -12px rgba(2, 39, 31, 0.4);
}

.st-eg-title {
  font-size: 22px;
  font-weight: 700;
  color: #124035;
  margin: 0 0 8px;
}

.st-eg-sub {
  font-size: 14px;
  color: #6B6B68;
  margin: 0 0 20px;
}

.st-eg-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #1D1D1B;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.st-eg-input {
  width: 100%;
  padding: 12px 14px;
  font-size: 16px;
  border: 1px solid #E5E7E5;
  border-radius: 8px;
  background: #FFFFFF;
  color: #1D1D1B;
  font-family: inherit;
  transition: border-color 0.15s;
  margin-bottom: 16px;
  box-sizing: border-box;
}
.st-eg-input:focus {
  outline: none;
  border-color: #147D5C;
  box-shadow: 0 0 0 3px rgba(20, 125, 92, 0.15);
}

.st-eg-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: #6B6B68;
  margin-bottom: 16px;
  cursor: pointer;
  line-height: 1.5;
}
.st-eg-consent input[type="checkbox"] {
  margin-top: 3px;
  flex: 0 0 auto;
}

.st-eg-error {
  font-size: 13px;
  color: #b3542b;
  background: #fdf3ec;
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 12px;
}

.st-eg-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

.st-eg-cancel {
  background: transparent;
  color: #6B6B68;
  border: 0;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border-radius: 999px;
}
.st-eg-cancel:hover {
  color: #124035;
}

.st-eg-submit {
  background: #124035;
  color: #FFFFFF;
  border: 0;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border-radius: 999px;
  transition: background 0.15s;
}
.st-eg-submit:hover:not([disabled]) {
  background: #147D5C;
}
.st-eg-submit[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ============================================================
   D1 — Readiness results redesign (.tio.d1 scope)
   Shared chrome under .tio, scenario-specific rules under .tio.d1
   ============================================================ */

[data-st-tool] .tio {
  --ink: #0c1714;
  --ink-2: #3a4a44;
  --ink-3: #6b7a74;
  --ink-4: #9aa8a2;
  --paper-cool: #f5f8f5;
  --rule: #dfe5e1;
  --rule-soft: #eef2ee;
  --st-pistache: #CBE8C5;
  --st-pear: #E2FFDC;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  font-family: 'Hoves', 'TT Hoves Pro', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: #ffffff;
  letter-spacing: -0.01em;
  line-height: 1.5;
  /* Override the [data-st-tool] mount constraint so the new layout can breathe */
  max-width: none;
  padding: 0;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

.tio *,
.tio *::before,
.tio *::after { box-sizing: border-box; }

.tio h1, .tio h2, .tio h3, .tio h4, .tio h5, .tio h6 {
  font-family: inherit;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0;
  color: var(--ink);
}

.tio p { margin: 0; }

.tio .container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 48px 32px 96px;
}

.tio .eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}

.tio .label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}

.tio .mono { font-family: var(--font-mono); }

.tio .page-head { margin-bottom: 32px; }

.tio .page-h1 {
  font-size: 56px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 12px;
}

.tio .page-sub {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 720px;
}

/* ----- D1: Hero ----- */

.tio.d1 .hero {
  background: radial-gradient(circle at 80% 20%, #143b34 0%, #02271F 60%);
  border-radius: 24px;
  padding: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
  color: #ffffff;
  margin-bottom: 48px;
  overflow: hidden;
}

.tio.d1 .hero-left { display: flex; flex-direction: column; gap: 20px; }

.tio.d1 .hero-left h1 {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: #ffffff;
  font-size: 96px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}

.tio.d1 .hero-left h1 .pct { color: var(--st-lime); }
.tio.d1 .hero-left h1 .of {
  font-size: 36px;
  color: rgba(255,255,255,0.5);
  font-family: var(--font-mono);
  font-weight: 400;
}

.tio.d1 .band-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 4px;
}

.tio.d1 .band-row .seg {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  padding: 8px 4px;
  border-radius: 999px;
  color: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.02);
}

.tio.d1 .band-row .seg.active {
  background: var(--st-lime);
  color: var(--st-ocean);
  border-color: var(--st-lime);
  font-weight: 700;
}

.tio.d1 .lede {
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255,255,255,0.78);
  max-width: 460px;
}

.tio.d1 .lede b { color: #ffffff; font-weight: 600; }

/* ----- D1: Radar ----- */

.tio.d1 .radar-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tio.d1 .radar {
  width: 100%;
  max-width: 480px;
  height: auto;
  overflow: visible;
}

.tio.d1 .radar .ring {
  stroke: rgba(255,255,255,0.10);
  stroke-width: 1;
}

.tio.d1 .radar .axis {
  stroke: rgba(255,255,255,0.08);
  stroke-width: 1;
}

.tio.d1 .radar .shape-bg {
  fill: rgba(151,248,129,0.18);
  stroke: var(--st-lime);
  stroke-width: 2;
  stroke-linejoin: round;
}

.tio.d1 .radar .point {
  fill: var(--st-lime);
  stroke: #02271F;
  stroke-width: 2;
}

.tio.d1 .radar .lbl {
  fill: rgba(255,255,255,0.72);
  font-size: 12px;
  font-family: 'Hoves', 'TT Hoves Pro', system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.tio.d1 .radar .lbl-pct {
  fill: var(--st-lime);
  font-size: 11px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-weight: 500;
}

/* ----- D1: Body (gap list + detail) ----- */

.tio.d1 .body {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 32px;
  align-items: stretch;
}

.tio.d1 .gap-list { display: flex; flex-direction: column; gap: 8px; }

.tio.d1 .gap-list h2 {
  font-size: 14px;
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}

.tio.d1 .gap-tab {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: #ffffff;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  transition: border-color 0.15s, background 0.15s;
}

.tio.d1 .gap-tab:hover {
  border-color: var(--ink-3);
  background: var(--rule-soft);
}

.tio.d1 .gap-tab.active {
  background: var(--st-ocean);
  border-color: var(--st-ocean);
  color: #ffffff;
}

.tio.d1 .gap-tab .num {
  font-size: 12px;
  color: var(--ink-3);
}

.tio.d1 .gap-tab.active .num { color: var(--st-lime); }

.tio.d1 .gap-tab .name {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
}

.tio.d1 .gap-tab .name .cat {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 500;
}

.tio.d1 .gap-tab.active .name .cat { color: rgba(255,255,255,0.6); }

.tio.d1 .gap-tab .pct {
  font-size: 13px;
  color: var(--ink-3);
}

.tio.d1 .gap-tab.active .pct { color: var(--st-lime); }

.tio.d1 .gap-detail {
  background: #ffffff;
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.tio.d1 .gd-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.tio.d1 .gd-head h3 {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  flex: 1;
}

.tio.d1 .gd-cat {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--st-pear);
  color: var(--st-ocean);
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
  font-weight: 600;
}

.tio.d1 .gd-diag {
  background: var(--st-frost);
  border-left: 3px solid var(--st-emerald);
  padding: 16px 20px;
  border-radius: 0 12px 12px 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}

.tio.d1 .gd-actions h4 {
  font-size: 13px;
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}

.tio.d1 .gd-action-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tio.d1 .gd-action-list li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  background: var(--paper-cool);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}

.tio.d1 .gd-action-list .ga-num {
  font-size: 12px;
  color: var(--st-emerald);
  font-weight: 600;
  padding-top: 1px;
}

.tio.d1 .gd-action-list .ga-text { color: var(--ink-2); }

/* ----- D1: CTA strip ----- */

.tio .cta-strip {
  background: var(--st-ocean);
  border-radius: 18px;
  padding: 22px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  color: rgba(255,255,255,0.85);
  font-size: 14px;
  margin-top: 48px;
}

.tio .cta-pill {
  background: var(--st-lime);
  color: var(--st-ocean);
  font-weight: 700;
  padding: 14px 24px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: filter 0.15s;
}

.tio .cta-pill:hover { filter: brightness(0.95); }

.tio .cta-pill span[aria-hidden] {
  background: var(--st-ocean);
  color: var(--st-lime);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

/* ----- D1: Responsive ----- */

@media (max-width: 900px) {
  .tio .container { padding: 32px 20px 64px; }
  .tio .page-h1 { font-size: 40px; }
  .tio.d1 .hero {
    grid-template-columns: 1fr;
    padding: 32px;
    gap: 24px;
  }
  .tio.d1 .hero-left h1 { font-size: 72px; }
  .tio.d1 .body { grid-template-columns: 1fr; }
  .tio.d1 .gap-detail { padding: 24px 28px; }
  .tio .cta-strip {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }
  .tio .cta-pill { justify-content: center; }
}

/* ============================================================
   D2A — Governance results — Top 3 risks
   Scoped under .tio.d2a so nothing leaks. Shared .tio chrome
   (page-head, container, eyebrow, cta-strip, mono, base tokens)
   is owned by D1 and appended once there.
   ============================================================ */
.tio.d2a {
  background: var(--paper, #ffffff);
  padding: 56px 0 72px;
  --crit: #b54344; --crit-bg: #fbeeee;
  --high: #c98024; --high-bg: #fdf3e7;
  --med:  #8a7320; --med-bg:  #fbf7e9;
}
.tio.d2a .head {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 48px;
  margin-bottom: 36px;
  align-items: start;
}
.tio.d2a .head h1 {
  font-size: 64px; font-weight: 600; letter-spacing: -0.03em;
  line-height: 0.95; margin: 0;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}
.tio.d2a .head h1 .num { color: var(--crit); }
.tio.d2a .head h1 .of  { color: var(--ink-3, #6b7a74); font-weight: 400; }
.tio.d2a .score-row { display: flex; align-items: center; gap: 16px; }
.tio.d2a .band-tag {
  padding: 6px 14px; border-radius: 999px; font-size: 12px;
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.tio.d2a .band-tag.crit { background: var(--crit-bg); color: var(--crit); }
.tio.d2a .band-tag.high { background: var(--high-bg); color: var(--high); }
.tio.d2a .band-tag.med  { background: var(--med-bg);  color: var(--med); }
.tio.d2a .head .sub {
  color: var(--ink-2, #3a4a44); font-size: 15px; line-height: 1.55;
  max-width: 540px; margin-top: 14px;
}
.tio.d2a .cat-mini {
  background: var(--paper-cool, #f5f8f5);
  border: 1px solid var(--rule, #dfe5e1);
  border-radius: 14px; padding: 18px 20px;
}
.tio.d2a .cat-mini .label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3, #6b7a74); margin-bottom: 12px;
}
.tio.d2a .cat-row {
  display: flex; justify-content: space-between; padding: 6px 0;
  font-size: 13px; color: var(--ink-2, #3a4a44);
  border-bottom: 1px solid var(--rule-soft, #eef2ee);
}
.tio.d2a .cat-row:last-child { border-bottom: none; }

.tio.d2a .section-title {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 16px;
}
.tio.d2a .section-title h2 {
  font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin: 0;
}
.tio.d2a .section-title .meta { color: var(--ink-3, #6b7a74); font-size: 13px; }

.tio.d2a .top3 { display: flex; flex-direction: column; gap: 16px; }
.tio.d2a .risk-card {
  display: grid; grid-template-columns: 80px 1fr; gap: 24px;
  padding: 28px 32px; border-radius: 18px;
  background: var(--paper, #ffffff);
  border: 1px solid var(--rule, #dfe5e1);
  border-left: 4px solid var(--crit);
}
.tio.d2a .risk-card.sev-critical { border-left-color: var(--crit); }
.tio.d2a .risk-card.sev-high     { border-left-color: var(--high); }
.tio.d2a .risk-card.sev-med      { border-left-color: var(--med); }

.tio.d2a .risk-card .rank {
  font-size: 36px; font-weight: 600; color: var(--crit);
  letter-spacing: -0.03em; line-height: 1;
}
.tio.d2a .risk-card.sev-high .rank { color: var(--high); }
.tio.d2a .risk-card.sev-med  .rank { color: var(--med); }

.tio.d2a .rc-tags { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.tio.d2a .sev-tag {
  padding: 4px 12px; border-radius: 999px; font-size: 11px;
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.tio.d2a .sev-tag.critical { background: var(--crit-bg); color: var(--crit); }
.tio.d2a .sev-tag.high     { background: var(--high-bg); color: var(--high); }
.tio.d2a .sev-tag.med      { background: var(--med-bg);  color: var(--med); }
.tio.d2a .cat-tag {
  padding: 4px 12px; border-radius: 999px; font-size: 11px;
  font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--st-frost, #e6f1ec); color: var(--st-emerald, #147D5C);
}
.tio.d2a .risk-card h3 {
  font-size: 19px; font-weight: 600; line-height: 1.3;
  margin: 0 0 10px;
}
.tio.d2a .risk-card .why {
  font-size: 14px; line-height: 1.6;
  color: var(--ink-2, #3a4a44); margin: 0 0 14px;
}
.tio.d2a .risk-card .todo {
  background: var(--st-frost, #e6f1ec); border-radius: 10px;
  padding: 12px 14px; font-size: 13px; line-height: 1.5;
  color: var(--ink, #0c1714);
}
.tio.d2a .risk-card .todo b { color: var(--st-emerald, #147D5C); }

@media (max-width: 900px) {
  .tio.d2a .head { grid-template-columns: 1fr; gap: 24px; }
  .tio.d2a .head h1 { font-size: 52px; }
  .tio.d2a .risk-card { grid-template-columns: 56px 1fr; padding: 22px 22px; gap: 16px; }
  .tio.d2a .risk-card .rank { font-size: 28px; }
}

/* === D3B: Playbook results — tabbed phase panel ============================= */
/* Scoped under .tio.d3b. Shared .tio chrome (page-head, eyebrow, cta-strip,
   container) is owned by D1. D3B-specific rules only below. */

.tio.d3b {
  --d3b-ink: #1D1D1B;
  --d3b-ink-2: #3A3A37;
  --d3b-ink-3: #6B6B68;
  --d3b-paper: #FFFFFF;
  --d3b-paper-cool: #F4F7F5;
  --d3b-rule: #E5E7E5;
  --d3b-rule-soft: #EEF1EF;
  --d3b-ocean: #124035;
  --d3b-emerald: #147D5C;
  --d3b-lime: #C6F26B;
  --d3b-crit: #b3542b;
  --d3b-crit-bg: #fdf3ec;
  padding: 32px 0 48px;
}

.tio.d3b .mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-feature-settings: "tnum" 1;
}

/* Tabs ---------------------------------------------------------------------- */
.tio.d3b .phase-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 24px 0 0;
}

.tio.d3b .ptab {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  padding: 14px 16px;
  background: var(--d3b-paper);
  border: 1px solid var(--d3b-rule);
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  color: var(--d3b-ink);
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.tio.d3b .ptab:hover {
  border-color: var(--d3b-emerald);
  background: var(--d3b-paper-cool);
}

.tio.d3b .ptab.active {
  border-color: var(--d3b-ocean);
  background: var(--d3b-ocean);
  color: var(--d3b-paper);
}

.tio.d3b .ptab.active .pt-n,
.tio.d3b .ptab.active .pt-w {
  color: var(--d3b-lime);
}

.tio.d3b .pt-n {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--d3b-emerald);
  text-transform: uppercase;
}

.tio.d3b .ptab.active .pt-n { color: var(--d3b-lime); }

.tio.d3b .pt-t {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

.tio.d3b .pt-w {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--d3b-ink-3);
  text-transform: uppercase;
}

/* Panel --------------------------------------------------------------------- */
.tio.d3b .phase-panel {
  margin-top: 16px;
  padding: 28px;
  background: var(--d3b-paper);
  border: 1px solid var(--d3b-rule);
  border-radius: 16px;
}

.tio.d3b .pp-head {
  border-bottom: 1px solid var(--d3b-rule-soft);
  padding-bottom: 20px;
  margin-bottom: 24px;
}

.tio.d3b .pp-w {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--d3b-emerald);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.tio.d3b .pp-head h2 {
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--d3b-ink);
  margin: 0 0 8px;
}

.tio.d3b .pp-intent {
  font-size: 15px;
  line-height: 1.55;
  color: var(--d3b-ink-2);
  margin: 0;
  max-width: 70ch;
}

/* Grid ---------------------------------------------------------------------- */
.tio.d3b .pp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 32px;
}

.tio.d3b .pp-grid > section { min-width: 0; }

.tio.d3b .pp-grid h4 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--d3b-ink-3);
  text-transform: uppercase;
  margin: 0 0 12px;
}

.tio.d3b .pp-failures h4 { color: var(--d3b-crit); }

/* Bullets ------------------------------------------------------------------- */
.tio.d3b .bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tio.d3b .bullets li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--d3b-ink);
}

.tio.d3b .bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--d3b-ocean);
}

.tio.d3b .bullets.metrics li::before { background: var(--d3b-emerald); }

.tio.d3b .more {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--d3b-ink-3);
  font-style: italic;
}

/* Change management items --------------------------------------------------- */
.tio.d3b .cm-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tio.d3b .cm-item {
  padding: 12px 14px;
  background: var(--d3b-paper-cool);
  border-radius: 10px;
  border-left: 3px solid var(--d3b-emerald);
}

.tio.d3b .cm-h {
  font-size: 13px;
  font-weight: 600;
  color: var(--d3b-ink);
  margin-bottom: 4px;
}

.tio.d3b .cm-b {
  font-size: 13px;
  line-height: 1.5;
  color: var(--d3b-ink-2);
}

/* Failure mode -------------------------------------------------------------- */
.tio.d3b .fm-item {
  padding: 14px 16px;
  background: var(--d3b-crit-bg);
  border-radius: 10px;
  border-left: 3px solid var(--d3b-crit);
}

.tio.d3b .fm-q {
  font-size: 14px;
  font-weight: 600;
  font-style: italic;
  color: var(--d3b-crit);
  margin-bottom: 6px;
  line-height: 1.4;
}

.tio.d3b .fm-a {
  font-size: 13px;
  line-height: 1.5;
  color: var(--d3b-ink-2);
}

/* Responsive ---------------------------------------------------------------- */
@media (max-width: 900px) {
  .tio.d3b .pp-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .tio.d3b .phase-tabs { grid-template-columns: 1fr 1fr; }
  .tio.d3b .phase-panel { padding: 20px; }
  .tio.d3b .pp-head h2 { font-size: 22px; }
}
/* === /D3B =================================================================== */

/* === Result-screen mount widening + next-step CTA ===========================
   Lifts the 720px [data-st-tool] cap when a .tio result screen is rendered,
   so the wider Readiness/Governance/Playbook scorecard layouts can breathe.
   ============================================================================ */
/* Result-screen widening — break out of any Elementor container constraint.
   Uses viewport-relative width + a hard left/right reset on the parent
   widget container so the scorecard layout can spread across the page. */
[data-st-tool]:has(.tio) {
  max-width: 1440px !important;
  width: min(1440px, calc(100vw - 48px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 24px 0 !important;
}
/* Force the wrapping Elementor widget container + tool section to give us
   the full viewport width when a result is rendered. */
.elementor-widget-st_tool_readiness:has([data-st-tool] .tio),
.elementor-widget-st_tool_governance:has([data-st-tool] .tio),
.elementor-widget-st_tool_playbook:has([data-st-tool] .tio) {
  max-width: none !important;
  width: 100% !important;
}
.elementor-widget-st_tool_readiness:has([data-st-tool] .tio) > .elementor-widget-container,
.elementor-widget-st_tool_governance:has([data-st-tool] .tio) > .elementor-widget-container,
.elementor-widget-st_tool_playbook:has([data-st-tool] .tio) > .elementor-widget-container {
  max-width: none !important;
  width: 100% !important;
}
#tool:has(.tio) {
  max-width: none !important;
  width: 100% !important;
  --content-width: 100%;
}

/* Governance result-screen → Playbook handoff CTA */
.tio.d2a .next-strip {
  margin-top: 24px;
  padding: 32px;
  background: var(--st-frost, #EBF5EB);
  border: 1px solid var(--st-rule, #E5E7E5);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tio.d2a .next-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--st-emerald, #147D5C);
}
.tio.d2a .next-strip h3 {
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--st-forest, #124035);
  margin: 0;
  letter-spacing: -0.01em;
}
.tio.d2a .next-strip p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--st-ink-soft, #2D2D2B);
  margin: 0;
  max-width: 720px;
}
.tio.d2a .next-cta {
  display: inline-flex;
  align-self: flex-start;
  margin-top: 4px;
  padding: 14px 22px;
  background: var(--st-lime, #97F881);
  color: var(--st-forest, #124035);
  font-weight: 600;
  font-size: 15px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tio.d2a .next-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(18, 64, 53, 0.18);
}
.tio.d2a .next-cta .arrow { margin-left: 6px; }
@media (max-width: 720px) {
  .tio.d2a .next-strip { padding: 24px; }
  .tio.d2a .next-strip h3 { font-size: 20px; }
}


/* ============================================================
   Cara V2 — How-it-works section (hero + FAQ now use real Elementor templates)
   ============================================================ */

/* ---- HOW IT WORKS (3 steps) — near-white band, matches Image #15 ---- */
.cara-v2-how {
  background: #FAFCFA;
  padding: 96px 0;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--font-sans, 'Hoves', 'TT Hoves Pro', system-ui, sans-serif);
}
.cara-v2-how .container { max-width: 1180px; margin: 0 auto; padding: 0 56px; }
.cara-v2-how .head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.cara-v2-how .head .eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink, #0c1714); margin-bottom: 14px;
}
.cara-v2-how .head h2 {
  font-size: 40px; font-weight: 600; letter-spacing: -0.025em;
  line-height: 1.1; color: var(--ink, #0c1714); margin: 0 0 14px;
}
.cara-v2-how .head p { font-size: 16px; color: var(--ink-2); line-height: 1.55; margin: 0; }
.cara-v2-how .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cara-v2-how .step {
  background: #fff; border-radius: 18px; border: 1px solid var(--rule, #dfe5e1);
  padding: 32px 28px;
}
.cara-v2-how .step .num {
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 700;
  color: var(--st-emerald);
  background: var(--st-frost);
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid; place-items: center;
  margin-bottom: 22px;
}
.cara-v2-how .step h3 {
  font-size: 19px; font-weight: 600; letter-spacing: -0.01em;
  line-height: 1.3; color: var(--ink, #0c1714); margin: 0 0 10px;
}
.cara-v2-how .step p { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 0; }
.cara-v2-how .step .meta {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule-soft);
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3);
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .cara-v2-how { padding: 56px 0; }
  .cara-v2-how .container { padding: 0 24px; }
  .cara-v2-how .head h2 { font-size: 30px; }
  .cara-v2-how .steps { grid-template-columns: 1fr; }
}

/* Tool pages now use a Cara V2 hero above the widget; suppress the
   widget's built-in page header so we don't render two H1s on the page.
   Hide the entire widget mount on page load — show it only once the form
   or result is being rendered (i.e. after the user clicks the green
   "Start the assessment" pill). This suppresses the bootstrap "Loading
   assessment..." state and the widget's intro pill so there's a single
   visible entry point. */
.st-tool-page-header { display: none; }
[data-st-tool] { display: none !important; }
[data-st-tool]:has(.st-tool-question),
[data-st-tool]:has(.tio),
[data-st-tool]:has(.st-tool-result-header) {
  display: block !important;
}

/* "Start the assessment" pill — sits 40px below the cards inside .cara-v2-how.
   Rendered as a <button> so we can wire it to the widget's start-assessment
   function without an anchor jump. */
.cara-v2-how .cara-v2-how-cta {
  display: flex; justify-content: center;
  margin-top: 40px;
}
.cara-v2-how .cara-v2-how-cta-btn {
  display: inline-flex; align-items: center;
  background: var(--st-lime, #97F881);
  color: var(--st-ocean, #02271F);
  padding: 14px 32px;
  border-radius: 999px;
  font-size: 16px; font-weight: 700;
  font-family: var(--font-sans, 'Hoves', 'TT Hoves Pro', system-ui, sans-serif);
  text-decoration: none;
  border: 0; outline: 0; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.cara-v2-how .cara-v2-how-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -8px rgba(151, 248, 129, 0.55);
}

/* Hide the assessment section until a [data-st-tool-start] trigger is pressed.
   Toggled via the JS handler in socialtalent-tools.php. */
#tool[data-st-collapsed="true"] { display: none !important; }

/* Standalone CTA card converted from anchor to direct-start trigger. */
.st-tool-start-cta { cursor: pointer; }