/* salesforce.warren.digital — Salesforce Lightning–inspired design system
   Light theme. Inter stands in for Salesforce Sans.
   Not affiliated with or endorsed by Salesforce. */

:root {
  --sf-blue: #0176d3;
  --sf-blue-dark: #014486;
  --sf-navy: #032d60;
  --sf-ink: #181818;
  --sf-text-2: #444c56;
  --sf-text-3: #5c6b7a;
  --sf-cloud: #eaf5fe;
  --sf-cloud-2: #f3f9ff;
  --sf-gray: #f3f4f6;
  --sf-line: #d8e2ec;
  --sf-green: #2e844a;
  --sf-orange: #fe9339;
  --sf-violet: #7526e3;
  --sf-grad: linear-gradient(100deg, #7526e3, #0176d3);
  --sf-radius: 16px;
  --sf-radius-sm: 10px;
  --sf-shadow: 0 2px 8px rgba(3, 45, 96, 0.08), 0 8px 28px rgba(3, 45, 96, 0.08);
  --sf-shadow-lg: 0 6px 16px rgba(3, 45, 96, 0.12), 0 20px 48px rgba(3, 45, 96, 0.16);
  --wrap: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: var(--sf-ink);
  background: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--sf-blue); text-decoration: none; }
a:hover { color: var(--sf-blue-dark); }
:focus-visible { outline: 3px solid var(--sf-blue); outline-offset: 2px; border-radius: 4px; }

.sf-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* ---------- utility bar + nav ---------- */
.sf-utility {
  background: var(--sf-navy);
  color: #dbeafe;
  font-size: 0.8rem;
  text-align: center;
  padding: 8px 16px;
  letter-spacing: 0.01em;
}
.sf-utility strong { color: #fff; font-weight: 600; }

.sf-nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sf-line);
}
.sf-nav-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 28px; height: 64px;
}
.sf-logo { display: inline-flex; align-items: baseline; gap: 2px; font-weight: 800; font-size: 1.25rem; color: var(--sf-navy); letter-spacing: -0.02em; }
.sf-logo .badge {
  background: var(--sf-blue); color: #fff; font-size: 0.72rem; font-weight: 700;
  padding: 2px 8px; border-radius: 999px; margin-left: 6px; letter-spacing: 0.04em;
  transform: translateY(-2px); display: inline-block;
}
.sf-navlinks { display: flex; gap: 4px; }
.sf-navlinks a {
  color: var(--sf-text-2); font-weight: 600; font-size: 0.92rem;
  padding: 8px 14px; border-radius: 999px; transition: background 0.15s, color 0.15s;
}
.sf-navlinks a:hover { background: var(--sf-cloud); color: var(--sf-navy); }
.sf-navlinks a[aria-current="page"] { background: var(--sf-cloud); color: var(--sf-blue-dark); }
.sf-nav-spacer { flex: 1; }
.sf-nav-cta {
  background: var(--sf-blue); color: #fff !important; font-weight: 700; font-size: 0.9rem;
  padding: 10px 20px; border-radius: 999px; transition: background 0.15s, transform 0.15s;
  white-space: nowrap;
}
.sf-nav-cta:hover { background: var(--sf-blue-dark); transform: translateY(-1px); }

/* ---------- buttons ---------- */
.sf-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 0.98rem; padding: 13px 26px; border-radius: 999px;
  border: 2px solid transparent; cursor: pointer; transition: all 0.15s;
}
.sf-btn-primary { background: var(--sf-blue); color: #fff; }
.sf-btn-primary:hover { background: var(--sf-blue-dark); color: #fff; transform: translateY(-1px); box-shadow: var(--sf-shadow); }
.sf-btn-outline { background: #fff; color: var(--sf-blue-dark); border-color: var(--sf-blue); }
.sf-btn-outline:hover { background: var(--sf-cloud); transform: translateY(-1px); }
.sf-btn-ghost { background: transparent; color: var(--sf-blue-dark); }
.sf-btn-ghost:hover { background: var(--sf-cloud); }

/* ---------- hero ---------- */
.sf-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--sf-cloud-2), var(--sf-cloud) 60%, #fff);
  padding: 84px 0 40px;
}
.sf-hero-inner { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; position: relative; z-index: 2; max-width: 820px; text-align: center; }
.sf-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sf-blue-dark); background: #fff; border: 1px solid var(--sf-line);
  padding: 7px 16px; border-radius: 999px; box-shadow: 0 1px 4px rgba(3,45,96,0.06);
}
.sf-kicker .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sf-green); animation: sf-pulse 2s infinite; }
@keyframes sf-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(46,132,74,0.5);} 50% { box-shadow: 0 0 0 6px rgba(46,132,74,0);} }
.sf-hero h1 {
  font-size: clamp(2.2rem, 5.4vw, 3.6rem); line-height: 1.08; letter-spacing: -0.03em;
  color: var(--sf-navy); font-weight: 800; margin: 22px 0 18px;
}
.sf-hero h1 .grad { background: var(--sf-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sf-lead { font-size: 1.13rem; color: var(--sf-text-2); max-width: 640px; margin: 0 auto 28px; }
.sf-hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.sf-meta {
  display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap;
  margin-top: 26px; color: var(--sf-text-3); font-size: 0.88rem; font-weight: 600;
}
.sf-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--sf-line); }

/* cloud blobs */
.sf-blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.55; pointer-events: none; }
.sf-blob.b1 { width: 420px; height: 420px; background: #bfe0fb; top: -160px; left: -120px; }
.sf-blob.b2 { width: 360px; height: 360px; background: #d8c6fa; bottom: -180px; right: -100px; opacity: 0.4; }
.sf-blob.b3 { width: 240px; height: 240px; background: #bde8cd; bottom: -120px; left: 22%; opacity: 0.35; }

/* horizon svg strip */
.sf-horizon { position: relative; z-index: 1; margin-top: 34px; }
.sf-horizon svg { width: 100%; height: auto; }

/* ---------- opportunity record + path ---------- */
.sf-record {
  background: #fff; border: 1px solid var(--sf-line); border-radius: var(--sf-radius);
  box-shadow: var(--sf-shadow); padding: 22px 24px; margin-top: -8px;
}
.sf-record-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.sf-record-ico {
  width: 40px; height: 40px; border-radius: 10px; background: var(--sf-grad);
  display: grid; place-items: center; color: #fff; font-weight: 800; flex: none;
}
.sf-record-title { font-weight: 800; color: var(--sf-navy); font-size: 1.05rem; letter-spacing: -0.01em; }
.sf-record-sub { color: var(--sf-text-3); font-size: 0.85rem; font-weight: 600; }
.sf-fields { display: flex; gap: 26px; flex-wrap: wrap; margin-left: auto; }
.sf-field .k { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-text-3); }
.sf-field .v { font-weight: 700; color: var(--sf-ink); font-size: 0.92rem; }
.sf-field .v.green { color: var(--sf-green); }

.sf-path { display: flex; width: 100%; overflow-x: auto; scrollbar-width: none; }
.sf-path::-webkit-scrollbar { display: none; }
.sf-path-step {
  --bg: var(--sf-gray); --fg: var(--sf-text-2);
  position: relative; flex: 1 1 0; min-width: 118px;
  background: var(--bg); color: var(--fg);
  font-size: 0.78rem; font-weight: 700; text-align: center;
  padding: 10px 10px 10px 20px; white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
}
.sf-path-step:first-child { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); border-radius: 999px 0 0 999px; padding-left: 14px; }
.sf-path-step:last-child { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 14px 50%); border-radius: 0 999px 999px 0; }
.sf-path-step + .sf-path-step { margin-left: 3px; }
.sf-path-step .era { display: block; font-size: 0.66rem; font-weight: 600; opacity: 0.75; }
.sf-path-step.done { --bg: #c5e0f8; --fg: var(--sf-blue-dark); }
.sf-path-step.current { --bg: var(--sf-blue); --fg: #fff; }
.sf-path-step.won { --bg: var(--sf-green); --fg: #fff; animation: sf-won 2.4s ease-in-out infinite; }
@keyframes sf-won { 0%,100% { filter: brightness(1);} 50% { filter: brightness(1.14);} }

/* ---------- sections ---------- */
.sf-section { padding: 64px 0; }
.sf-section.alt { background: var(--sf-cloud-2); }
.sf-section.navy { background: var(--sf-navy); color: #e6f1fb; }
.sf-h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--sf-navy); letter-spacing: -0.02em; font-weight: 800; margin: 0 0 8px; }
.sf-section.navy .sf-h2 { color: #fff; }
.sf-sub { color: var(--sf-text-3); font-size: 1rem; margin: 0 0 32px; max-width: 640px; }
.sf-section.navy .sf-sub { color: #b7d2ec; }
.sf-center { text-align: center; }
.sf-center .sf-sub { margin-left: auto; margin-right: auto; }

/* ---------- card grids ---------- */
.sf-grid { display: grid; gap: 20px; }
.sf-grid-2 { grid-template-columns: repeat(2, 1fr); }
.sf-grid-3 { grid-template-columns: repeat(3, 1fr); }
.sf-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .sf-grid-3, .sf-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .sf-grid-2, .sf-grid-3, .sf-grid-4 { grid-template-columns: 1fr; } }

.sf-card {
  background: #fff; border: 1px solid var(--sf-line); border-radius: var(--sf-radius);
  padding: 22px; box-shadow: 0 1px 4px rgba(3,45,96,0.05);
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
  display: flex; flex-direction: column; gap: 10px;
}
.sf-card:hover { transform: translateY(-4px); box-shadow: var(--sf-shadow); border-color: #b8d4f0; }
.sf-card[role="button"] { cursor: pointer; }
.sf-card-ico {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  color: #fff; font-size: 1.05rem; flex: none;
}
.ico-blue { background: var(--sf-blue); }
.ico-navy { background: var(--sf-navy); }
.ico-green { background: var(--sf-green); }
.ico-violet { background: var(--sf-violet); }
.ico-orange { background: var(--sf-orange); }
.ico-grad { background: var(--sf-grad); }
.sf-card-kicker { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sf-blue); }
.sf-card h3 { margin: 0; font-size: 1.06rem; color: var(--sf-navy); letter-spacing: -0.01em; line-height: 1.35; }
.sf-card p { margin: 0; color: var(--sf-text-2); font-size: 0.92rem; }
.sf-card-foot { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; padding-top: 6px; }
.sf-pill {
  font-size: 0.72rem; font-weight: 700; color: var(--sf-blue-dark);
  background: var(--sf-cloud); border-radius: 999px; padding: 4px 11px;
}
.sf-pill.green { color: var(--sf-green); background: #e8f5ec; }
.sf-pill.violet { color: var(--sf-violet); background: #f1e8fd; }
.sf-openhint { font-size: 0.82rem; font-weight: 700; color: var(--sf-blue); display: inline-flex; align-items: center; gap: 5px; }
.sf-card:hover .sf-openhint { text-decoration: underline; }

/* ---------- stats ---------- */
.sf-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
@media (max-width: 900px) { .sf-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 580px) { .sf-stats { grid-template-columns: repeat(2, 1fr); } }
.sf-stat { text-align: center; padding: 20px 10px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--sf-radius-sm); }
.sf-section:not(.navy) .sf-stat { background: #fff; border-color: var(--sf-line); }
.sf-stat .n { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.sf-section:not(.navy) .sf-stat .n { color: var(--sf-navy); }
.sf-stat .l { font-size: 0.8rem; color: #b7d2ec; font-weight: 600; }
.sf-section:not(.navy) .sf-stat .l { color: var(--sf-text-3); }

/* ---------- agent panel ---------- */
.sf-agent {
  background: #fff; border-radius: 20px; border: 1px solid var(--sf-line);
  box-shadow: var(--sf-shadow-lg); overflow: hidden; max-width: 720px; margin: 0 auto;
}
.sf-agent-head {
  display: flex; align-items: center; gap: 12px; padding: 16px 20px;
  background: var(--sf-grad); color: #fff;
}
.sf-agent-ava { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.2); display: grid; place-items: center; font-size: 1.1rem; }
.sf-agent-head .t { font-weight: 800; font-size: 0.98rem; }
.sf-agent-head .s { font-size: 0.78rem; opacity: 0.85; }
.sf-agent-body { padding: 20px; min-height: 170px; }
.sf-bubble {
  background: var(--sf-cloud-2); border: 1px solid var(--sf-line);
  border-radius: 4px 16px 16px 16px; padding: 14px 18px; color: var(--sf-text-2);
  font-size: 0.95rem; max-width: 92%;
}
.sf-bubble strong { color: var(--sf-navy); }
.sf-bubble[hidden] { display: none; }
.sf-bubble.in { animation: sf-bubble-in 0.35s ease both; }
@keyframes sf-bubble-in { from { opacity: 0; transform: translateY(8px);} to { opacity: 1; transform: none;} }
.sf-agent-chips { display: flex; gap: 10px; flex-wrap: wrap; padding: 0 20px 20px; }
.sf-chip {
  border: 1.5px solid var(--sf-line); background: #fff; color: var(--sf-blue-dark);
  font-weight: 700; font-size: 0.85rem; font-family: inherit; padding: 9px 16px; border-radius: 999px;
  cursor: pointer; transition: all 0.15s;
}
.sf-chip:hover { border-color: var(--sf-blue); background: var(--sf-cloud); }
.sf-chip[aria-pressed="true"] { background: var(--sf-blue); border-color: var(--sf-blue); color: #fff; }

/* ---------- badges (Trailhead-style) ---------- */
.sf-badge-art {
  width: 74px; height: 74px; margin: 0 auto 6px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.6rem; color: #fff;
  box-shadow: inset 0 0 0 5px rgba(255,255,255,0.35), 0 4px 14px rgba(3,45,96,0.18);
}
.sf-badge-card { text-align: center; align-items: center; }
.sf-badge-card h3 { font-size: 1rem; }

/* ---------- reviews ---------- */
.sf-review {
  background: #fff; border: 1px solid var(--sf-line); border-radius: var(--sf-radius);
  padding: 24px; box-shadow: 0 1px 4px rgba(3,45,96,0.05);
  display: flex; flex-direction: column; gap: 14px;
}
.sf-review .stars { color: var(--sf-orange); letter-spacing: 2px; font-size: 0.95rem; }
.sf-review blockquote { margin: 0; color: var(--sf-text-2); font-size: 0.95rem; }
.sf-review .who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.sf-review .ava {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 0.9rem;
}
.sf-review .who .n { font-weight: 700; color: var(--sf-navy); font-size: 0.92rem; }
.sf-review .who .r { font-size: 0.8rem; color: var(--sf-text-3); }

/* ---------- modal ---------- */
.sf-modal-scrim {
  position: fixed; inset: 0; z-index: 100; display: none;
  background: rgba(3, 45, 96, 0.45); backdrop-filter: blur(4px);
  padding: 4vh 16px; overflow-y: auto;
}
.sf-modal-scrim.open { display: block; }
.sf-modal {
  max-width: 760px; margin: 0 auto; background: #fff; border-radius: 20px;
  box-shadow: var(--sf-shadow-lg); overflow: hidden; animation: sf-modal-in 0.28s ease both;
}
@keyframes sf-modal-in { from { opacity: 0; transform: translateY(18px) scale(0.98);} to { opacity: 1; transform: none;} }
.sf-modal-hero { position: relative; padding: 34px 30px 24px; color: #fff; }
.sf-modal-hero.mh-blue { background: linear-gradient(120deg, var(--sf-navy), var(--sf-blue)); }
.sf-modal-hero.mh-violet { background: linear-gradient(120deg, #3b0a70, var(--sf-violet)); }
.sf-modal-hero.mh-green { background: linear-gradient(120deg, #14432a, var(--sf-green)); }
.sf-modal-hero.mh-orange { background: linear-gradient(120deg, #7a3c00, var(--sf-orange)); }
.sf-modal-hero .sf-meta { justify-content: flex-start; color: rgba(255,255,255,0.85); margin: 0 0 10px; }
.sf-modal-hero .sf-meta .dot { background: rgba(255,255,255,0.4); }
.sf-modal-hero h2 { margin: 0 0 6px; font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1.25; }
.sf-modal-hero .log { margin: 0; opacity: 0.9; font-size: 0.95rem; max-width: 92%; }
.sf-modal-close {
  position: absolute; top: 14px; right: 14px; width: 38px; height: 38px;
  border-radius: 50%; border: none; background: rgba(255,255,255,0.18); color: #fff;
  font-size: 1.3rem; line-height: 1; cursor: pointer; transition: background 0.15s;
}
.sf-modal-close:hover { background: rgba(255,255,255,0.32); }
.sf-modal-body { padding: 0 30px 30px; }
.sf-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--sf-line); margin: 0 -30px 20px; padding: 10px 30px 0; }
.sf-tab {
  border: none; background: none; font-family: inherit; font-weight: 700; font-size: 0.92rem;
  color: var(--sf-text-3); padding: 10px 16px; cursor: pointer; position: relative;
}
.sf-tab::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -2px; height: 3px; border-radius: 3px; background: transparent; }
.sf-tab[aria-selected="true"] { color: var(--sf-blue-dark); }
.sf-tab[aria-selected="true"]::after { background: var(--sf-blue); }
.sf-prose p { color: var(--sf-text-2); font-size: 0.96rem; margin: 0 0 14px; }
.sf-prose strong { color: var(--sf-navy); }
.sf-prose ul { color: var(--sf-text-2); font-size: 0.95rem; padding-left: 20px; margin: 0 0 14px; }
.sf-prose li { margin-bottom: 6px; }

/* ---------- dashboard (JD → proof table) ---------- */
.sf-dash { border: 1px solid var(--sf-line); border-radius: var(--sf-radius); overflow: hidden; background: #fff; box-shadow: 0 1px 4px rgba(3,45,96,0.05); }
.sf-dash-head {
  display: flex; align-items: center; gap: 10px; padding: 14px 20px;
  background: var(--sf-cloud); border-bottom: 1px solid var(--sf-line);
  font-weight: 800; color: var(--sf-navy); font-size: 0.95rem;
}
.sf-dash-row { display: grid; grid-template-columns: minmax(200px, 2fr) 3fr; border-bottom: 1px solid var(--sf-line); }
.sf-dash-row:last-child { border-bottom: none; }
.sf-dash-row:nth-child(even) { background: var(--sf-cloud-2); }
.sf-dash-req { padding: 16px 20px; font-weight: 700; color: var(--sf-navy); font-size: 0.9rem; border-right: 1px solid var(--sf-line); }
.sf-dash-req .tag { display: inline-block; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-green); background: #e8f5ec; border-radius: 999px; padding: 2px 8px; margin-bottom: 6px; }
.sf-dash-req .tag.pref { color: var(--sf-violet); background: #f1e8fd; }
.sf-dash-proof { padding: 16px 20px; color: var(--sf-text-2); font-size: 0.92rem; }
.sf-dash-proof strong { color: var(--sf-ink); }
@media (max-width: 680px) {
  .sf-dash-row { grid-template-columns: 1fr; }
  .sf-dash-req { border-right: none; border-bottom: 1px dashed var(--sf-line); padding-bottom: 10px; }
  .sf-dash-proof { padding-top: 10px; }
}

/* ---------- record detail (work.html lead) ---------- */
.sf-detail {
  background: #fff; border: 1px solid var(--sf-line); border-radius: 20px;
  box-shadow: var(--sf-shadow); overflow: hidden;
}
.sf-detail-hero { background: linear-gradient(120deg, var(--sf-navy), var(--sf-blue)); color: #fff; padding: 40px 34px; }
.sf-detail-hero h1 { margin: 8px 0 10px; font-size: clamp(1.5rem, 3.4vw, 2.2rem); letter-spacing: -0.02em; line-height: 1.2; }
.sf-detail-hero .log { opacity: 0.92; max-width: 640px; margin: 0; font-size: 1rem; }
.sf-detail-hero .sf-kicker { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.25); color: #fff; }
.sf-highlights { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--sf-line); }
.sf-highlights .sf-field { padding: 16px 24px; border-right: 1px solid var(--sf-line); flex: 1 1 160px; }
.sf-highlights .sf-field:last-child { border-right: none; }
.sf-detail-body { padding: 30px 34px; }
@media (max-width: 640px) { .sf-detail-hero, .sf-detail-body { padding: 26px 20px; } }

/* ---------- flow steps (playbook) ---------- */
.sf-flow { counter-reset: step; display: grid; gap: 14px; }
.sf-step {
  display: grid; grid-template-columns: 52px 1fr; gap: 16px;
  background: #fff; border: 1px solid var(--sf-line); border-radius: var(--sf-radius);
  padding: 20px; transition: border-color 0.15s, box-shadow 0.15s;
}
.sf-step:hover { border-color: #b8d4f0; box-shadow: var(--sf-shadow); }
.sf-step .num {
  counter-increment: step; width: 44px; height: 44px; border-radius: 50%;
  background: var(--sf-cloud); color: var(--sf-blue-dark); font-weight: 800;
  display: grid; place-items: center; font-size: 1.05rem;
}
.sf-step .num::before { content: counter(step); }
.sf-step h3 { margin: 2px 0 6px; color: var(--sf-navy); font-size: 1.02rem; }
.sf-step p { margin: 0; color: var(--sf-text-2); font-size: 0.93rem; }
.sf-step .proof { margin-top: 8px; font-size: 0.85rem; color: var(--sf-blue-dark); font-weight: 600; }
.sf-step .proof::before { content: "⚡ "; }

/* ---------- checklist (about.html qualifications) ---------- */
.sf-check { display: grid; gap: 12px; }
.sf-check-item {
  display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start;
  background: #fff; border: 1px solid var(--sf-line); border-radius: var(--sf-radius-sm);
  padding: 16px 18px;
}
.sf-check-item .mark {
  width: 28px; height: 28px; border-radius: 50%; background: #e8f5ec; color: var(--sf-green);
  display: grid; place-items: center; font-weight: 800; font-size: 0.9rem; margin-top: 2px;
}
.sf-check-item .mark.honest { background: #fdf1e2; color: #b25e00; }
.sf-check-item .req { font-weight: 700; color: var(--sf-navy); font-size: 0.93rem; }
.sf-check-item .ans { color: var(--sf-text-2); font-size: 0.9rem; margin-top: 3px; }

/* ---------- values ---------- */
.sf-values .sf-card h3 { display: flex; align-items: center; gap: 10px; }
.sf-values .em { font-size: 1.2rem; }

/* ---------- CTA band ---------- */
.sf-cta {
  background: var(--sf-grad); border-radius: 24px; color: #fff; text-align: center;
  padding: 52px 28px; position: relative; overflow: hidden;
}
.sf-cta h2 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); margin: 0 0 10px; letter-spacing: -0.02em; }
.sf-cta p { margin: 0 auto 26px; max-width: 560px; opacity: 0.92; }
.sf-cta .sf-btn-primary { background: #fff; color: var(--sf-blue-dark); }
.sf-cta .sf-btn-primary:hover { background: var(--sf-cloud); }
.sf-cta .sf-btn-outline { border-color: rgba(255,255,255,0.7); color: #fff; background: transparent; }
.sf-cta .sf-btn-outline:hover { background: rgba(255,255,255,0.12); }

/* ---------- footer ---------- */
.sf-footer { background: var(--sf-navy); color: #b7d2ec; padding: 48px 0 36px; margin-top: 72px; }
.sf-footer-inner { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 36px; }
@media (max-width: 720px) { .sf-footer-inner { grid-template-columns: 1fr; } }
.sf-footer .sf-logo { color: #fff; }
.sf-footer h4 { color: #fff; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 12px; }
.sf-footer a { display: block; color: #b7d2ec; font-size: 0.9rem; margin-bottom: 8px; }
.sf-footer a:hover { color: #fff; }
.sf-footer .fine { font-size: 0.78rem; color: #7fa5c9; margin: 14px 0 0; max-width: 420px; }

/* ---------- reveal ---------- */
.sf-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.5s ease, transform 0.5s ease; }
.sf-reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .sf-reveal { opacity: 1; transform: none; transition: none; }
  .sf-path-step.won, .sf-kicker .dot { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- small screens ---------- */
@media (max-width: 720px) {
  .sf-navlinks { display: none; }
  .sf-hero { padding-top: 56px; }
  .sf-fields { margin-left: 0; }
}


/* ---------- resourcing-tool motion card (self-contained, no JS) ---------- */
/* Themeable via custom properties. Defaults are neutral-dark.
   Override on a wrapper: --rt-bg, --rt-panel, --rt-fg, --rt-muted, --rt-line,
   --rt-accent, --rt-ok, --rt-warn, --rt-radius, --rt-font, --rt-mono */
.rt-card{
  --rt-bg:#101014; --rt-panel:#17171d; --rt-fg:#f2f2f5; --rt-muted:#9a9aa8;
  --rt-line:rgba(255,255,255,.12); --rt-accent:#6f8cff; --rt-ok:#39c07f; --rt-warn:#ef6a5a;
  --rt-radius:14px;
  --rt-font:inherit; --rt-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  position:relative; width:100%; max-width:460px; box-sizing:border-box;
  font-family:var(--rt-font); color:var(--rt-fg); background:var(--rt-bg);
  border:1px solid var(--rt-line); border-radius:var(--rt-radius);
  padding:18px 18px 16px; overflow:hidden; line-height:1.45;
}
.rt-card *,.rt-card *::before,.rt-card *::after{box-sizing:border-box}
.rt-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--rt-line)}
.rt-head-t{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--rt-muted);font-weight:600;margin:0}
.rt-live{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:600;
  color:var(--rt-muted);font-variant-numeric:tabular-nums}
.rt-dot{width:6px;height:6px;border-radius:50%;background:var(--rt-accent);animation:rt-pulse 2s ease-in-out infinite}

/* stage keeps a stable height so nothing jumps */
.rt-stage{position:relative;min-height:206px}

/* --- step 1: what was said in the meeting --- */
.rt-said{display:flex;gap:10px;align-items:flex-start;opacity:0;transform:translateY(6px);
  animation:rt-said 12s cubic-bezier(.2,.7,.3,1) infinite}
.rt-av{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--rt-panel);
  border:1px solid var(--rt-line);display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;color:var(--rt-muted)}
.rt-bub{flex:1 1 auto;background:var(--rt-panel);border:1px solid var(--rt-line);
  border-radius:10px;border-top-left-radius:3px;padding:9px 11px;font-size:12.5px;color:var(--rt-muted)}
.rt-bub b{color:var(--rt-fg);font-weight:600}

/* --- step 2: the decision, staged for a yes --- */
.rt-prop{margin-top:12px;border:1px solid var(--rt-line);border-left:3px solid var(--rt-accent);
  border-radius:10px;background:var(--rt-panel);padding:11px 12px;
  opacity:0;transform:translateY(8px) scale(.985);animation:rt-prop 12s cubic-bezier(.2,.7,.3,1) infinite}
.rt-prop-k{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--rt-muted);
  font-weight:700;margin:0 0 5px}
.rt-prop-b{font-size:13px;font-weight:600;margin:0;color:var(--rt-fg)}
.rt-prop-r{display:flex;align-items:center;gap:8px;margin-top:10px}
.rt-btn{font-size:11px;font-weight:600;padding:5px 11px;border-radius:999px;
  border:1px solid var(--rt-line);color:var(--rt-fg);background:transparent;position:relative;overflow:hidden}
.rt-btn-y{border-color:transparent;color:#fff;background:var(--rt-accent)}
.rt-btn-y::after{content:"";position:absolute;inset:0;background:#fff;opacity:0;animation:rt-press 12s linear infinite}
.rt-hint{font-size:10.5px;color:var(--rt-muted);margin-left:auto}

/* --- step 3: the plan re-balances --- */
.rt-grid{margin-top:13px;opacity:0;animation:rt-grid 12s cubic-bezier(.2,.7,.3,1) infinite}
.rt-grid-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.rt-grid-t{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--rt-muted);font-weight:700;margin:0}
.rt-stamp{font-size:9.5px;font-weight:700;color:var(--rt-ok);letter-spacing:.03em;
  opacity:0;animation:rt-stamp 12s ease-out infinite}
.rt-row{display:grid;grid-template-columns:64px 1fr 40px;align-items:center;gap:9px;margin-top:7px}
.rt-name{font-size:11.5px;color:var(--rt-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rt-track{display:block;height:7px;border-radius:99px;background:var(--rt-line);overflow:hidden}
.rt-fill{display:block;height:100%;border-radius:99px;background:var(--rt-accent);width:60%}
.rt-fill-over{background:var(--rt-warn);width:100%;animation:rt-over 12s cubic-bezier(.4,0,.2,1) infinite}
.rt-fill-up{width:52%;animation:rt-up 12s cubic-bezier(.4,0,.2,1) infinite}
.rt-pct{position:relative;display:block;height:15px;font-size:10.5px;font-family:var(--rt-mono);
  color:var(--rt-muted);text-align:right;font-variant-numeric:tabular-nums}
.rt-num-before,.rt-num-after{position:absolute;right:0;top:0;white-space:nowrap}
.rt-foot{margin-top:14px;padding-top:11px;border-top:1px solid var(--rt-line);
  font-size:11px;color:var(--rt-muted);margin-bottom:0}

@keyframes rt-pulse{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes rt-said{
  0%{opacity:0;transform:translateY(6px)} 6%{opacity:1;transform:translateY(0)}
  82%{opacity:1;transform:translateY(0)} 92%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes rt-prop{
  0%,16%{opacity:0;transform:translateY(8px) scale(.985)}
  24%,82%{opacity:1;transform:translateY(0) scale(1)}
  92%,100%{opacity:0;transform:translateY(-4px) scale(.99)}}
@keyframes rt-press{0%,43%{opacity:0}45%{opacity:.5}50%,100%{opacity:0}}
@keyframes rt-grid{
  0%,46%{opacity:0} 54%,86%{opacity:1} 94%,100%{opacity:0}}
@keyframes rt-stamp{0%,58%{opacity:0}66%,86%{opacity:1}94%,100%{opacity:0}}
@keyframes rt-over{0%,54%{width:100%;background:var(--rt-warn)}64%,100%{width:84%;background:var(--rt-accent)}}
@keyframes rt-up{0%,54%{width:52%}64%,100%{width:71%}}
/* swap the numbers with the bars using two spans */
.rt-num-before{animation:rt-numb 12s steps(1,end) infinite}
.rt-num-after{opacity:0;animation:rt-numa 12s steps(1,end) infinite}
@keyframes rt-numb{0%,54%{opacity:1}54.01%,100%{opacity:0}}
@keyframes rt-numa{0%,54%{opacity:0}54.01%,100%{opacity:1}}
.rt-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (prefers-reduced-motion: reduce){
  .rt-card *{animation:none !important}
  .rt-said,.rt-prop,.rt-grid,.rt-stamp,.rt-num-after{opacity:1 !important;transform:none !important}
  .rt-num-before{display:none}
  .rt-fill-over{width:84%;background:var(--rt-accent)}
  .rt-fill-up{width:71%}
}


/* ---------- resourcing-tool feature block ---------- */
.sf-restool {
  display: grid; grid-template-columns: 1fr minmax(0, 460px); gap: 34px;
  align-items: center; text-align: left; margin-top: 36px;
}
@media (max-width: 900px) { .sf-restool { grid-template-columns: 1fr; } }
.sf-restool-copy h3 { margin: 8px 0 14px; font-size: 1.3rem; line-height: 1.3; color: var(--sf-navy); letter-spacing: -0.01em; }
.sf-restool-copy p { margin: 0 0 14px; color: var(--sf-text-2); font-size: 0.95rem; }
.sf-restool-copy p:last-child { margin-bottom: 0; }
.sf-restool-copy strong { color: var(--sf-navy); }
.sf-restool .rt-card { margin: 0 auto; box-shadow: var(--sf-shadow); }

/* ---------- inline note callout ---------- */
.sf-note {
  margin-top: 34px; text-align: left; background: #fff;
  border: 1px solid var(--sf-line); border-left: 4px solid var(--sf-blue);
  border-radius: var(--sf-radius); padding: 22px 26px;
  box-shadow: 0 1px 4px rgba(3, 45, 96, 0.05);
}
.sf-note h3 { margin: 0 0 10px; font-size: 1.02rem; color: var(--sf-navy); }
.sf-note p { margin: 0 0 12px; color: var(--sf-text-2); font-size: 0.95rem; }
.sf-note p:last-child { margin-bottom: 0; }
.sf-note strong { color: var(--sf-navy); }