/* =====================================================
   MORTGAGE PAYOFF GOAL CALCULATOR — CSS
   USFinanceCalculators.com | Kadence Integration
   ===================================================== */
:root {
  --sb-blue:    var(--global-palette1, #002868);
  --sb-charcoal:var(--global-palette3, #1D1D1F);
  --sb-gray:    var(--global-palette4, #5F6368);
  --sb-border:  var(--global-palette5, #E0E4E8);
  --sb-bg:      var(--global-palette6, #F7F9FC);
  --sb-white:   var(--global-palette7, #FFFFFF);
  --sb-red:     var(--global-palette8, #BF0A30);
  --sb-green:   var(--global-palette9, #00875A);
  --sb-amber:   #D97706;
  --sb-purple:  #7C3AED;
  --sb-teal:    #0891B2;
  --sb-orange:  #EA580C;
  --sb-snow:    #0284c7;
}

#sbWrapper {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  max-width: 1180px; margin: 0 auto;
  color: var(--sb-charcoal); -webkit-font-smoothing: antialiased;
}

/* ---- HEADER ---- */
.sb-header {
  background: linear-gradient(135deg, #001840 0%, #002868 40%, #0a3060 100%);
  border-radius: 18px; padding: 36px 32px 28px;
  text-align: center; margin-bottom: 24px;
  position: relative; overflow: hidden;
}
.sb-header::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 10% 50%, rgba(2,132,199,0.12) 0%, transparent 50%),
              radial-gradient(ellipse at 90% 50%, rgba(0,135,90,0.08) 0%, transparent 50%);
  pointer-events: none;
}
.sb-header::after {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 44px 44px; pointer-events: none;
}
.sb-header-icon { font-size: 2.6rem; display: block; margin-bottom: 12px; position: relative; z-index: 1; }
.sb-title {
  font-family: 'Montserrat','Inter',sans-serif!important;
  font-size: clamp(1.3rem, 3vw, 1.9rem)!important; font-weight: 800!important;
  color: #fff!important; margin: 0 0 10px!important; line-height: 1.2!important;
  position: relative; z-index: 1;
}
.sb-subtitle {
  font-size: 0.87rem; color: rgba(255,255,255,0.72);
  max-width: 780px; margin: 0 auto 22px; line-height: 1.65; position: relative; z-index: 1;
}
.sb-badges { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; position: relative; z-index: 1; }
.sb-badge {
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.88); font-size: 0.7rem; font-weight: 600;
  padding: 4px 11px; border-radius: 20px; letter-spacing: 0.02em;
}

/* ---- MAIN GRID ---- */
.sb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.sb-input-panel { background: var(--sb-white); border: 1px solid var(--sb-border); border-radius: 16px; padding: 28px; }
.sb-results-panel { background: var(--sb-bg); border: 1px solid var(--sb-border); border-radius: 16px; padding: 28px; }

/* ---- SECTION LABEL ---- */
.sb-sec {
  font-family: 'Montserrat','Inter',sans-serif; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--sb-blue);
  margin: 0 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--sb-border);
  display: flex; align-items: center; gap: 7px;
}
.sb-gap { margin-top: 22px; }

/* ---- FORM ---- */
.sb-r2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sb-field { margin-bottom: 14px; }
.sb-field label { display: block; font-size: 0.76rem; font-weight: 600; color: var(--sb-charcoal); margin-bottom: 6px; }
.sb-field label.h { font-weight: 400; color: var(--sb-gray); font-size: 0.68rem; }
.sb-iw { display: flex; align-items: center; border: 1.5px solid var(--sb-border); border-radius: 8px; overflow: hidden; background: var(--sb-white); transition: border-color 0.2s; }
.sb-iw:focus-within { border-color: var(--sb-blue); }
.sb-pre,.sb-suf { background: var(--sb-bg); color: var(--sb-gray); font-size: 0.78rem; font-weight: 600; padding: 0 10px; height: 42px; display: flex; align-items: center; flex-shrink: 0; border-right: 1.5px solid var(--sb-border); }
.sb-suf { border-right: none; border-left: 1.5px solid var(--sb-border); }
.sb-iw input { flex: 1; height: 42px; border: none; outline: none; background: transparent; font-size: 0.9rem; color: var(--sb-charcoal); padding: 0 10px; min-width: 0; }
.sb-sel { width: 100%; height: 42px; border: 1.5px solid var(--sb-border); border-radius: 8px; background: var(--sb-white); font-size: 0.84rem; color: var(--sb-charcoal); padding: 0 10px; outline: none; cursor: pointer; transition: border-color 0.2s; }
.sb-sel:focus { border-color: var(--sb-blue); }

/* ---- BUTTONS ---- */
.sb-calc-btn { width: 100%; padding: 14px; background: var(--sb-blue); color: #fff; font-family: 'Montserrat','Inter',sans-serif; font-size: 1rem; font-weight: 800; border: none; border-radius: 10px; cursor: pointer; letter-spacing: 0.04em; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; }
.sb-calc-btn:hover { background: #001a4d; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,40,104,0.3); }
.sb-reset-btn { width: 100%; padding: 10px; background: transparent; color: var(--sb-gray); font-size: 0.78rem; font-weight: 600; border: 1.5px solid var(--sb-border); border-radius: 10px; cursor: pointer; margin-top: 8px; transition: all 0.2s; }
.sb-reset-btn:hover { border-color: var(--sb-red); color: var(--sb-red); }
.sb-err { background: #FFF5F7; border: 1.5px solid var(--sb-red); border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; font-size: 0.82rem; color: var(--sb-red); display: none; gap: 8px; align-items: center; }
.sb-err.show { display: flex; }

/* ---- RESULTS ---- */
.sb-empty { text-align: center; padding: 48px 20px; color: var(--sb-gray); }
.sb-empty-icon { font-size: 3rem; display: block; margin-bottom: 14px; opacity: 0.35; }
.sb-empty p { font-size: 0.85rem; line-height: 1.65; }
.sb-results { display: none; }
.sb-results.show { display: block; }

/* ---- GOAL HERO ---- */
.sb-hero {
  background: linear-gradient(135deg, #001840 0%, #002868 60%, #003d8c 100%);
  border-radius: 16px; padding: 22px 20px 16px;
  text-align: center; margin-bottom: 18px; position: relative; overflow: hidden;
}
.sb-hero::after { content:''; position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; }
.sb-hero-eyebrow { font-size: 0.67rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 6px; position: relative; z-index: 1; }
.sb-hero-date { font-family: 'Montserrat','Inter',sans-serif; font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 900; color: #fff; line-height: 1.2; margin-bottom: 6px; position: relative; z-index: 1; }
.sb-hero-sub { font-size: 0.78rem; color: rgba(255,255,255,0.65); position: relative; z-index: 1; }
.sb-hero-pills { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; position: relative; z-index: 1; }
.sb-hero-pill { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.85); font-size: 0.71rem; font-weight: 600; padding: 4px 12px; border-radius: 20px; }

/* ---- STATS GRID ---- */
.sb-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.sb-stat { background: var(--sb-white); border: 1px solid var(--sb-border); border-radius: 10px; padding: 12px 14px; text-align: center; }
.sb-stat.green { border-color: rgba(0,135,90,0.25); background: #F0FBF6; }
.sb-stat.blue  { border-color: rgba(2,132,199,0.25); background: #F0F9FF; }
.sb-stat.amber { border-color: rgba(217,119,6,0.25);  background: #FFFBEB; }
.sb-stat.purple{ border-color: rgba(124,58,237,0.25); background: #F5F3FF; }
.sb-stat-label { font-size: 0.63rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--sb-gray); margin-bottom: 4px; }
.sb-stat-value { font-family: 'Montserrat','Inter',sans-serif; font-size: 1.1rem; font-weight: 800; color: var(--sb-charcoal); }
/* BUG #4 FIXED: space between modifier and descendant class */
.sb-stat.green .sb-stat-value { color: var(--sb-green); }
.sb-stat.blue  .sb-stat-value { color: var(--sb-snow); }
.sb-stat.amber .sb-stat-value { color: var(--sb-amber); }
.sb-stat.purple .sb-stat-value { color: var(--sb-purple); }

/* ---- INVEST vs PAY OFF ---- */
.sb-invest-panel { background: var(--sb-white); border: 1px solid rgba(124,58,237,0.2); border-radius: 12px; padding: 14px 16px; margin-bottom: 18px; }
.sb-invest-title { font-family: 'Montserrat','Inter',sans-serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--sb-purple); margin-bottom: 10px; }
.sb-invest-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.sb-invest-block { background: var(--sb-bg); border-radius: 9px; padding: 12px; text-align: center; }
.sb-invest-block.winner { background: #F0FBF6; border: 1px solid rgba(0,135,90,0.2); }
.sb-invest-block.loser  { background: #FFF5F7; border: 1px solid rgba(191,10,48,0.15); }
.sb-invest-block-label { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sb-gray); margin-bottom: 6px; }
.sb-invest-block-value { font-family: 'Montserrat','Inter',sans-serif; font-size: 1.15rem; font-weight: 900; color: var(--sb-charcoal); }
/* BUG #4 FIXED: space before descendant selector */
.sb-invest-block.winner .sb-invest-block-value { color: var(--sb-green); }
.sb-invest-block.loser  .sb-invest-block-value { color: var(--sb-red); }
.sb-invest-verdict { font-size: 0.79rem; line-height: 1.55; color: var(--sb-charcoal); border-top: 1px solid var(--sb-border); padding-top: 8px; margin-top: 8px; }
.sb-invest-verdict strong { color: var(--sb-green); }

/* ---- AMORT PREVIEW ---- */
.sb-amort-wrap { background: var(--sb-white); border: 1px solid var(--sb-border); border-radius: 12px; padding: 14px 16px; }
.sb-amort-title { font-family: 'Montserrat','Inter',sans-serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--sb-blue); margin-bottom: 10px; }
.sb-amort-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
.sb-amort-table th { background: var(--sb-bg); color: var(--sb-gray); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 6px 8px; text-align: right; border-bottom: 1px solid var(--sb-border); }
.sb-amort-table th:first-child { text-align: left; }
.sb-amort-table td { padding: 5px 8px; text-align: right; border-bottom: 1px solid rgba(0,0,0,0.04); color: var(--sb-charcoal); font-variant-numeric: tabular-nums; }
.sb-amort-table td:first-child { text-align: left; font-weight: 600; color: var(--sb-blue); }
.sb-amort-table tr:last-child td { border-bottom: none; font-weight: 700; background: #F0F9FF; }
.sb-amort-toggle { font-size: 0.72rem; color: var(--sb-blue); cursor: pointer; text-decoration: underline; margin-top: 8px; display: inline-block; background: none; border: none; padding: 0; }

/* ---- RESPONSIVE ---- */
@media (max-width: 900px) { .sb-grid { grid-template-columns: 1fr; } }
@media (max-width: 768px) { .sb-r2 { grid-template-columns: 1fr; } .sb-header { padding: 28px 18px 22px; } .sb-input-panel, .sb-results-panel { padding: 20px 16px; } }
@media (max-width: 480px) { .sb-stats { grid-template-columns: 1fr; } .sb-hero-date { font-size: 1.4rem; } .sb-invest-grid { grid-template-columns: 1fr; } }
/* ========================================================
   HOW IT WORKS + EDUCATIONAL CONTENT — CSS
   All classes prefixed sb-hw- and sb-edu- to avoid conflicts
   ======================================================== */

/* ---- SHARED SECTION WRAPPER ---- */
.sb-section-block {
  background: var(--sb-white);
  border: 1px solid var(--sb-border);
  border-radius: 16px;
  padding: 32px 28px;
  margin-top: 28px;
}

/* ---- SECTION HEADING ROW ---- */
.sb-section-head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-bottom: 16px;
  margin-bottom: 24px;
  border-bottom: 2px solid var(--sb-border);
}
.sb-section-head-icon {
  width: 46px; height: 46px; flex-shrink: 0;
  background: linear-gradient(135deg, #001840 0%, #002868 100%);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem;
}
.sb-section-head-copy h2 {
  font-family: 'Montserrat','Inter',sans-serif;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  font-weight: 800;
  color: var(--sb-charcoal);
  margin: 0 0 4px;
  line-height: 1.2;
}
.sb-section-head-copy p {
  font-size: 0.79rem;
  color: var(--sb-gray);
  margin: 0;
  line-height: 1.5;
}

/* ---- INTRO PARA ---- */
.sb-hw-intro {
  font-size: 0.9rem;
  color: var(--sb-gray);
  line-height: 1.75;
  margin: 0 0 28px;
  max-width: 860px;
}
.sb-hw-intro strong { color: var(--sb-charcoal); }

/* ============================
   STEP TIMELINE
   ============================ */
.sb-hw-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  margin-bottom: 32px;
}
.sb-hw-timeline::before {
  content: '';
  position: absolute;
  left: 22px;
  top: 46px;
  bottom: 46px;
  width: 2px;
  background: linear-gradient(to bottom, var(--sb-blue), rgba(0,40,104,0.1));
  border-radius: 2px;
}
.sb-hw-step {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 0 0 24px;
  position: relative;
}
.sb-hw-step:last-child { padding-bottom: 0; }
.sb-hw-step-bullet {
  flex-shrink: 0;
  width: 44px; height: 44px;
  background: var(--sb-blue);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Montserrat','Inter',sans-serif;
  font-size: 1rem; font-weight: 900;
  color: #fff;
  position: relative; z-index: 1;
  box-shadow: 0 4px 12px rgba(0,40,104,0.28);
}
.sb-hw-step-body {
  background: var(--sb-bg);
  border: 1px solid var(--sb-border);
  border-radius: 12px;
  padding: 16px 18px;
  flex: 1;
}
.sb-hw-step-body h3 {
  font-family: 'Montserrat','Inter',sans-serif;
  font-size: 0.9rem; font-weight: 800;
  color: var(--sb-charcoal);
  margin: 0 0 8px;
}
.sb-hw-step-body p {
  font-size: 0.82rem;
  color: var(--sb-gray);
  line-height: 1.7;
  margin: 0 0 10px;
}
.sb-hw-step-body p:last-child { margin: 0; }
.sb-hw-step-body strong { color: var(--sb-charcoal); }
.sb-hw-formula-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,40,104,0.06);
  border: 1px solid rgba(0,40,104,0.14);
  border-radius: 8px;
  padding: 7px 12px;
  margin-top: 8px;
  font-family: 'Courier New',Courier,monospace;
  font-size: 0.79rem;
  color: var(--sb-blue);
  font-weight: 600;
  word-break: break-all;
}
.sb-hw-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: #EFF6FF;
  border: 1px solid rgba(2,132,199,0.2);
  border-radius: 8px;
  padding: 9px 12px;
  margin-top: 10px;
  font-size: 0.77rem;
  color: #1e40af;
  line-height: 1.6;
}
.sb-hw-note-icon { flex-shrink: 0; font-size: 0.9rem; margin-top: 1px; }

/* ============================
   INPUT → OUTPUT EXPLAINER TABLE
   ============================ */
.sb-hw-io-label {
  font-family: 'Montserrat','Inter',sans-serif;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--sb-blue);
  margin: 28px 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--sb-border);
  display: flex; align-items: center; gap: 7px;
}
.sb-hw-io-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 28px;
}
.sb-hw-io-card {
  background: var(--sb-bg);
  border: 1px solid var(--sb-border);
  border-radius: 10px;
  padding: 14px 14px;
}
.sb-hw-io-card.output {
  background: #F0F9FF;
  border-color: rgba(2,132,199,0.25);
}
.sb-hw-io-card.output-green {
  background: #F0FBF6;
  border-color: rgba(0,135,90,0.25);
}
.sb-hw-io-field {
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--sb-gray);
  margin-bottom: 4px;
}
.sb-hw-io-card.output .sb-hw-io-field { color: var(--sb-snow); }
.sb-hw-io-card.output-green .sb-hw-io-field { color: var(--sb-green); }
.sb-hw-io-desc {
  font-size: 0.8rem; color: var(--sb-charcoal);
  line-height: 1.55;
  margin: 0;
}


/* ============================
   EDUCATIONAL CONTENT SECTION
   ============================ */
.sb-edu-divider {
  height: 2px;
  background: linear-gradient(to right, var(--sb-blue), rgba(0,40,104,0.1));
  border-radius: 2px;
  margin: 36px 0;
}

.sb-edu-h2 {
  font-family: 'Montserrat','Inter',sans-serif;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  font-weight: 800;
  color: var(--sb-charcoal);
  margin: 0 0 10px;
  line-height: 1.25;
}
.sb-edu-h3 {
  font-family: 'Montserrat','Inter',sans-serif;
  font-size: 0.95rem; font-weight: 700;
  color: var(--sb-charcoal);
  margin: 24px 0 8px;
  line-height: 1.3;
}
.sb-edu-p {
  font-size: 0.88rem;
  color: var(--sb-gray);
  line-height: 1.78;
  margin: 0 0 16px;
  max-width: 860px;
}
.sb-edu-p strong { color: var(--sb-charcoal); }
.sb-edu-p a { color: var(--sb-blue); text-decoration: underline; }
.sb-edu-p a:hover { color: #001a4d; }

/* Callout box */
.sb-edu-callout {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border-radius: 12px;
  padding: 18px 18px;
  margin: 20px 0;
}
.sb-edu-callout.navy {
  background: linear-gradient(135deg, #001840, #002868);
  color: #fff;
}
.sb-edu-callout.green { background: #F0FBF6; border: 1px solid rgba(0,135,90,0.2); }
.sb-edu-callout.amber { background: #FFFBEB; border: 1px solid rgba(217,119,6,0.25); }
.sb-edu-callout.blue  { background: #EFF6FF; border: 1px solid rgba(2,132,199,0.2); }
.sb-edu-callout-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 1px; }
.sb-edu-callout-body {}
.sb-edu-callout-title {
  font-family: 'Montserrat','Inter',sans-serif;
  font-size: 0.8rem; font-weight: 800;
  letter-spacing: 0.03em;
  margin-bottom: 5px;
}
.sb-edu-callout.navy .sb-edu-callout-title { color: rgba(255,255,255,0.9); }
.sb-edu-callout.green .sb-edu-callout-title { color: var(--sb-green); }
.sb-edu-callout.amber .sb-edu-callout-title { color: var(--sb-amber); }
.sb-edu-callout.blue  .sb-edu-callout-title { color: var(--sb-snow); }
.sb-edu-callout-text {
  font-size: 0.82rem; line-height: 1.68;
  margin: 0;
}
.sb-edu-callout.navy .sb-edu-callout-text { color: rgba(255,255,255,0.78); }
.sb-edu-callout.green .sb-edu-callout-text { color: #065f46; }
.sb-edu-callout.amber .sb-edu-callout-text { color: #92400E; }
.sb-edu-callout.blue  .sb-edu-callout-text { color: #1e40af; }
.sb-edu-callout.navy strong { color: #fff; }
.sb-edu-callout.green strong { color: var(--sb-green); }
.sb-edu-callout.amber strong { color: var(--sb-amber); }
.sb-edu-callout.blue  strong { color: var(--sb-snow); }

/* Comparison table */
.sb-edu-table-wrap {
  overflow-x: auto;
  margin: 20px 0;
  border-radius: 12px;
  border: 1px solid var(--sb-border);
}
.sb-edu-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  min-width: 520px;
}
.sb-edu-table thead tr {
  background: linear-gradient(135deg, #001840, #002868);
}
.sb-edu-table thead th {
  padding: 12px 14px;
  text-align: left;
  font-family: 'Montserrat','Inter',sans-serif;
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255,255,255,0.88);
  border: none;
}
.sb-edu-table tbody tr:nth-child(even) { background: var(--sb-bg); }
.sb-edu-table tbody tr:hover { background: #EEF2F8; }
.sb-edu-table td {
  padding: 11px 14px;
  color: var(--sb-charcoal);
  border-bottom: 1px solid var(--sb-border);
  line-height: 1.55;
  vertical-align: top;
}
.sb-edu-table td:first-child { font-weight: 700; color: var(--sb-blue); }
.sb-edu-table tbody tr:last-child td { border-bottom: none; }
.sb-edu-badge-green {
  display: inline-block;
  background: #D1FAE5; color: #065f46;
  font-size: 0.65rem; font-weight: 700;
  padding: 2px 8px; border-radius: 20px;
}
.sb-edu-badge-red {
  display: inline-block;
  background: #FFE4E6; color: #9f1239;
  font-size: 0.65rem; font-weight: 700;
  padding: 2px 8px; border-radius: 20px;
}

/* Bullet list */
.sb-edu-list {
  list-style: none;
  padding: 0; margin: 0 0 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.sb-edu-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.85rem;
  color: var(--sb-gray);
  line-height: 1.65;
}
.sb-edu-list li::before {
  content: '';
  flex-shrink: 0;
  width: 7px; height: 7px;
  background: var(--sb-blue);
  border-radius: 50%;
  margin-top: 7px;
}
.sb-edu-list li strong { color: var(--sb-charcoal); }

/* Example scenario card */
.sb-edu-example {
  background: var(--sb-bg);
  border: 1px solid var(--sb-border);
  border-left: 4px solid var(--sb-blue);
  border-radius: 0 12px 12px 0;
  padding: 18px 18px;
  margin: 20px 0;
}
.sb-edu-example-label {
  font-family: 'Montserrat','Inter',sans-serif;
  font-size: 0.67rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--sb-blue); margin-bottom: 8px;
}
.sb-edu-example p {
  font-size: 0.83rem; color: var(--sb-charcoal);
  line-height: 1.7; margin: 0 0 8px;
}
.sb-edu-example p:last-child { margin: 0; }
.sb-edu-example strong { color: var(--sb-blue); }
.sb-edu-example .sb-edu-example-result {
  display: inline-flex; align-items: center; gap: 7px;
  background: #F0FBF6; border: 1px solid rgba(0,135,90,0.2);
  border-radius: 8px; padding: 6px 12px; margin-top: 6px;
  font-family: 'Montserrat','Inter',sans-serif;
  font-size: 0.85rem; font-weight: 800; color: var(--sb-green);
}

/* ---- RESPONSIVE ---- */
@media (max-width: 900px) {
  .sb-hw-io-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .sb-section-block { padding: 22px 16px; }
  .sb-hw-timeline::before { left: 20px; }
  .sb-hw-step-bullet { width: 40px; height: 40px; font-size: 0.9rem; }
  .sb-hw-io-grid { grid-template-columns: 1fr; }
  .sb-edu-callout { flex-direction: column; gap: 8px; }
}
@media (max-width: 480px) {
  .sb-hw-step { gap: 12px; }
  .sb-hw-step-body { padding: 13px 12px; }
  .sb-section-head { flex-direction: column; align-items: flex-start; gap: 10px; }
}

.sb-case-section {
  background: var(--sb-white);
  border: 1px solid var(--sb-border);
  border-radius: 16px;
  padding: 32px 28px;
  margin-top: 28px;
}
.sb-case-head {
  display:flex; align-items:center; gap:13px;
  padding-bottom:16px; margin-bottom:24px;
  border-bottom:2px solid var(--sb-border);
}
.sb-case-head-icon {
  width:46px; height:46px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, #001840 0%, #002868 100%);
  font-size:1.35rem;
}
.sb-case-head-copy h2 {
  margin:0 0 4px; color: var(--sb-charcoal);
  font-family:'Montserrat','Inter',sans-serif; font-size: clamp(1.05rem, 2.2vw, 1.3rem); font-weight:800;
}
.sb-case-head-copy p { margin:0; color:var(--sb-gray); font-size:0.79rem; line-height:1.6; }
.sb-case-intro { font-size:0.88rem; color:var(--sb-gray); line-height:1.78; margin:0 0 22px; max-width:900px; }
.sb-case-wrap { display:grid; grid-template-columns:1fr; gap:16px; }
.sb-case-card {
  background: var(--sb-bg);
  border: 1px solid var(--sb-border);
  border-radius: 14px;
  padding: 20px 18px;
}
.sb-case-top { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; margin-bottom:10px; }
.sb-case-badge {
  display:inline-flex; align-items:center; border-radius:20px; padding:4px 10px;
  background: rgba(0,40,104,0.08); color: var(--sb-blue); font-size:0.68rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
}
.sb-case-verdict {
  display:inline-flex; align-items:center; border-radius:20px; padding:4px 10px;
  font-size:0.68rem; font-weight:700; letter-spacing:0.03em;
}
.sb-case-verdict.green { background:#DCFCE7; color:#166534; }
.sb-case-verdict.purple { background:#F3E8FF; color:#7C3AED; }
.sb-case-title { margin:0 0 6px; color:var(--sb-charcoal); font-family:'Montserrat','Inter',sans-serif; font-size:1rem; font-weight:800; line-height:1.3; }
.sb-case-context { margin:0 0 14px; color:var(--sb-gray); font-size:0.82rem; line-height:1.7; }
.sb-case-inputs { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:14px; }
.sb-case-mini { background: var(--sb-white); border:1px solid var(--sb-border); border-radius:10px; padding:11px 10px; }
.sb-case-mini span { display:block; font-size:0.66rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--sb-gray); margin-bottom:5px; }
.sb-case-mini strong { color:var(--sb-charcoal); font-size:0.9rem; font-family:'Montserrat','Inter',sans-serif; }
.sb-case-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.sb-case-stat { border-radius:10px; padding:13px 12px; border:1px solid transparent; }
.sb-case-stat span { display:block; font-size:0.67rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--sb-gray); margin-bottom:5px; }
.sb-case-stat strong { color:var(--sb-charcoal); font-size:0.98rem; font-family:'Montserrat','Inter',sans-serif; line-height:1.35; }
.sb-case-stat.blue { background:#EFF6FF; border-color:rgba(2,132,199,0.18); }
.sb-case-stat.navy { background:#EEF2FF; border-color:rgba(0,40,104,0.18); }
.sb-case-stat.amber { background:#FFFBEB; border-color:rgba(217,119,6,0.18); }
.sb-case-stat.green { background:#F0FBF6; border-color:rgba(0,135,90,0.18); }
.sb-case-stat.teal { background:#ECFEFF; border-color:rgba(8,145,178,0.18); }
.sb-case-stat.purple { background:#F5F3FF; border-color:rgba(124,58,237,0.18); }
.sb-case-summary { margin-top:14px; background:var(--sb-white); border:1px solid var(--sb-border); border-radius:10px; padding:14px 14px; }
.sb-case-summary p { margin:0 0 10px; color:var(--sb-gray); font-size:0.82rem; line-height:1.7; }
.sb-case-summary p:last-child { margin:0; }
.sb-case-summary strong { color:var(--sb-charcoal); }
@media (max-width: 900px) {
  .sb-case-inputs { grid-template-columns: repeat(2,1fr); }
  .sb-case-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
  .sb-case-section { padding:22px 16px; }
}
@media (max-width: 520px) {
  .sb-case-head { flex-direction:column; align-items:flex-start; }
  .sb-case-inputs, .sb-case-grid { grid-template-columns:1fr; }
}

/* ========================================================
   PRO TIPS SECTION CSS — prefixed sb-pt-
   ======================================================== */

.sb-pt-section {
  margin-top: 28px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--sb-border);
}

/* ---- Dark navy header banner ---- */
.sb-pt-header {
  background: linear-gradient(135deg, #001840 0%, #002868 50%, #003d8c 100%);
  padding: 30px 28px 26px;
  position: relative; overflow: hidden;
}
.sb-pt-header::after {
  content: '';
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 44px 44px; pointer-events: none;
}
.sb-pt-header-inner {
  display: flex; align-items: center; gap: 14px;
  position: relative; z-index: 1;
}
.sb-pt-header-icon {
  width: 50px; height: 50px; flex-shrink: 0;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
}
.sb-pt-header-copy h2 {
  font-family: 'Montserrat','Inter',sans-serif;
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  font-weight: 800; color: #fff;
  margin: 0 0 5px; line-height: 1.2;
}
.sb-pt-header-copy p {
  font-size: 0.8rem; color: rgba(255,255,255,0.68);
  margin: 0; line-height: 1.5; max-width: 540px;
}

/* ---- Tips list body ---- */
.sb-pt-body {
  background: var(--sb-white);
  padding: 0;
}

/* ---- Individual tip row ---- */
.sb-pt-tip {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: stretch;
  border-bottom: 1px solid var(--sb-border);
}
.sb-pt-tip:last-child { border-bottom: none; }

/* ---- Left accent strip + number ---- */
.sb-pt-num {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 24px;
  gap: 6px;
  position: relative;
}
.sb-pt-num::after {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 1px;
  background: var(--sb-border);
}
.sb-pt-num-circle {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Montserrat','Inter',sans-serif;
  font-size: 0.85rem; font-weight: 900;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(0,0,0,0.12);
}
.sb-pt-tip:nth-child(1) .sb-pt-num { background: rgba(0,40,104,0.04); }
.sb-pt-tip:nth-child(2) .sb-pt-num { background: rgba(0,135,90,0.04); }
.sb-pt-tip:nth-child(3) .sb-pt-num { background: rgba(217,119,6,0.04); }
.sb-pt-tip:nth-child(4) .sb-pt-num { background: rgba(8,145,178,0.04); }
.sb-pt-tip:nth-child(5) .sb-pt-num { background: rgba(124,58,237,0.04); }

.sb-pt-tip:nth-child(1) .sb-pt-num-circle { background: var(--sb-blue); color: #fff; }
.sb-pt-tip:nth-child(2) .sb-pt-num-circle { background: var(--sb-green); color: #fff; }
.sb-pt-tip:nth-child(3) .sb-pt-num-circle { background: var(--sb-amber); color: #fff; }
.sb-pt-tip:nth-child(4) .sb-pt-num-circle { background: var(--sb-teal); color: #fff; }
.sb-pt-tip:nth-child(5) .sb-pt-num-circle { background: var(--sb-purple); color: #fff; }

.sb-pt-tip:nth-child(1) .sb-pt-num::after { background: rgba(0,40,104,0.1); }
.sb-pt-tip:nth-child(2) .sb-pt-num::after { background: rgba(0,135,90,0.1); }
.sb-pt-tip:nth-child(3) .sb-pt-num::after { background: rgba(217,119,6,0.1); }
.sb-pt-tip:nth-child(4) .sb-pt-num::after { background: rgba(8,145,178,0.1); }
.sb-pt-tip:nth-child(5) .sb-pt-num::after { background: rgba(124,58,237,0.1); }

.sb-pt-num-emoji {
  font-size: 1.1rem; opacity: 0.6; margin-top: 2px;
}

/* ---- Right content column ---- */
.sb-pt-content {
  padding: 22px 22px 22px 20px;
}
.sb-pt-tip-label {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  border-radius: 20px; padding: 3px 9px;
  margin-bottom: 9px;
}
.sb-pt-tip:nth-child(1) .sb-pt-tip-label { background: rgba(0,40,104,0.08); color: var(--sb-blue); }
.sb-pt-tip:nth-child(2) .sb-pt-tip-label { background: rgba(0,135,90,0.08); color: var(--sb-green); }
.sb-pt-tip:nth-child(3) .sb-pt-tip-label { background: rgba(217,119,6,0.10); color: var(--sb-amber); }
.sb-pt-tip:nth-child(4) .sb-pt-tip-label { background: rgba(8,145,178,0.08); color: var(--sb-teal); }
.sb-pt-tip:nth-child(5) .sb-pt-tip-label { background: rgba(124,58,237,0.08); color: var(--sb-purple); }

.sb-pt-tip-title {
  font-family: 'Montserrat','Inter',sans-serif;
  font-size: clamp(0.92rem, 1.8vw, 1.05rem); font-weight: 800;
  color: var(--sb-charcoal);
  margin: 0 0 10px; line-height: 1.25;
}
.sb-pt-tip-body {
  font-size: 0.85rem; color: var(--sb-gray);
  line-height: 1.78; margin: 0 0 14px;
}
.sb-pt-tip-body strong { color: var(--sb-charcoal); }

/* ---- Inline callout box inside a tip ---- */
.sb-pt-callout {
  display: flex; gap: 11px; align-items: flex-start;
  border-radius: 10px; padding: 12px 14px; margin-bottom: 14px;
}
.sb-pt-callout.navy { background: linear-gradient(135deg,#001840,#002868); }
.sb-pt-callout.green { background: #F0FBF6; border: 1px solid rgba(0,135,90,0.18); }
.sb-pt-callout.amber { background: #FFFBEB; border: 1px solid rgba(217,119,6,0.2); }
.sb-pt-callout.teal  { background: #ECFEFF; border: 1px solid rgba(8,145,178,0.18); }
.sb-pt-callout.purple { background: #F5F3FF; border: 1px solid rgba(124,58,237,0.18); }
.sb-pt-callout-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.sb-pt-callout-text {
  font-size: 0.8rem; line-height: 1.65; margin: 0;
}
.sb-pt-callout.navy .sb-pt-callout-text { color: rgba(255,255,255,0.82); }
.sb-pt-callout.green .sb-pt-callout-text { color: #065f46; }
.sb-pt-callout.amber .sb-pt-callout-text { color: #92400E; }
.sb-pt-callout.teal .sb-pt-callout-text  { color: #155e75; }
.sb-pt-callout.purple .sb-pt-callout-text { color: #4c1d95; }
.sb-pt-callout.navy strong { color: #fff; }
.sb-pt-callout.green strong { color: var(--sb-green); }
.sb-pt-callout.amber strong { color: var(--sb-amber); }
.sb-pt-callout.teal  strong { color: var(--sb-teal); }
.sb-pt-callout.purple strong { color: var(--sb-purple); }

/* ---- Mini stat strip ---- */
.sb-pt-mini-strip {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px;
}
.sb-pt-mini-stat {
  flex: 1 1 120px;
  background: var(--sb-bg); border: 1px solid var(--sb-border);
  border-radius: 9px; padding: 10px 12px;
  text-align: center;
}
.sb-pt-mini-stat span {
  display: block; font-size: 0.63rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--sb-gray); margin-bottom: 4px;
}
.sb-pt-mini-stat strong {
  font-family: 'Montserrat','Inter',sans-serif;
  font-size: 1rem; font-weight: 900;
}
.sb-pt-mini-stat.v-blue strong  { color: var(--sb-blue); }
.sb-pt-mini-stat.v-green strong { color: var(--sb-green); }
.sb-pt-mini-stat.v-amber strong { color: var(--sb-amber); }
.sb-pt-mini-stat.v-teal  strong { color: var(--sb-teal); }
.sb-pt-mini-stat.v-purple strong { color: var(--sb-purple); }

/* ---- Bullet checklist inside tip ---- */
.sb-pt-checklist {
  list-style: none; padding: 0; margin: 0 0 10px;
  display: flex; flex-direction: column; gap: 7px;
}
.sb-pt-checklist li {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 0.83rem; color: var(--sb-gray); line-height: 1.65;
}
.sb-pt-checklist li::before {
  content: "✓";
  flex-shrink: 0;
  font-weight: 900; font-size: 0.75rem;
  margin-top: 2px;
}
.sb-pt-tip:nth-child(1) .sb-pt-checklist li::before { color: var(--sb-blue); }
.sb-pt-tip:nth-child(2) .sb-pt-checklist li::before { color: var(--sb-green); }
.sb-pt-tip:nth-child(3) .sb-pt-checklist li::before { color: var(--sb-amber); }
.sb-pt-tip:nth-child(4) .sb-pt-checklist li::before { color: var(--sb-teal); }
.sb-pt-tip:nth-child(5) .sb-pt-checklist li::before { color: var(--sb-purple); }
.sb-pt-checklist li strong { color: var(--sb-charcoal); }

/* ---- Bottom CTA strip ---- */
.sb-pt-footer {
  background: var(--sb-bg);
  border-top: 1px solid var(--sb-border);
  padding: 18px 22px;
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; justify-content: space-between;
}
.sb-pt-footer-copy {
  font-size: 0.82rem; color: var(--sb-gray); line-height: 1.55;
}
.sb-pt-footer-copy strong { color: var(--sb-charcoal); }
.sb-pt-footer-link {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--sb-blue); color: #fff;
  font-family: 'Montserrat','Inter',sans-serif;
  font-size: 0.78rem; font-weight: 800;
  padding: 10px 18px; border-radius: 9px;
  text-decoration: none; white-space: nowrap;
  transition: background 0.2s, transform 0.2s;
}
.sb-pt-footer-link:hover { background: #001a4d; transform: translateY(-1px); text-decoration: none; color: #fff; }

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
  .sb-pt-header { padding: 22px 18px 20px; }
  .sb-pt-tip { grid-template-columns: 58px 1fr; }
  .sb-pt-content { padding: 18px 16px 18px 14px; }
  .sb-pt-footer { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .sb-pt-tip { grid-template-columns: 50px 1fr; }
  .sb-pt-num { padding-top: 18px; }
  .sb-pt-num-circle { width: 30px; height: 30px; font-size: 0.75rem; }
  .sb-pt-header-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
  .sb-pt-mini-strip { flex-direction: column; }
  .sb-pt-mini-stat { flex: none; text-align: left; }
}

/* ========================================================
   FAQ SECTION CSS — prefixed sb-faq2-
   ======================================================== */

.sb-faq2-section {
  background: var(--sb-white);
  border: 1px solid var(--sb-border);
  border-radius: 16px;
  margin-top: 28px;
  overflow: hidden;
}

/* ---- Header ---- */
.sb-faq2-header {
  background: linear-gradient(135deg, #001840 0%, #002868 55%, #003d8c 100%);
  padding: 28px 28px 24px;
  position: relative; overflow: hidden;
}
.sb-faq2-header::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 44px 44px; pointer-events: none;
}
.sb-faq2-header-inner {
  display: flex; align-items: center; gap: 14px;
  position: relative; z-index: 1;
}
.sb-faq2-header-icon {
  width: 50px; height: 50px; flex-shrink: 0;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
}
.sb-faq2-header-copy h2 {
  font-family: 'Montserrat','Inter',sans-serif;
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  font-weight: 800; color: #fff;
  margin: 0 0 5px; line-height: 1.2;
}
.sb-faq2-header-copy p {
  font-size: 0.8rem; color: rgba(255,255,255,0.68);
  margin: 0; line-height: 1.5;
}

/* ---- Category tabs ---- */
.sb-faq2-cats {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 18px 22px 0;
  border-bottom: 1px solid var(--sb-border);
}
.sb-faq2-cat-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border-radius: 20px 20px 0 0;
  border: 1px solid var(--sb-border);
  border-bottom: none;
  background: var(--sb-bg);
  color: var(--sb-gray);
  font-family: 'Inter',-apple-system,sans-serif;
  font-size: 0.75rem; font-weight: 700;
  cursor: pointer; transition: all 0.18s;
  white-space: nowrap;
  margin-bottom: -1px;
}
.sb-faq2-cat-btn:hover { background: #EEF2F8; color: var(--sb-charcoal); }
.sb-faq2-cat-btn.active {
  background: var(--sb-white);
  color: var(--sb-blue);
  border-color: var(--sb-border);
  border-bottom-color: var(--sb-white);
  box-shadow: 0 -2px 0 var(--sb-blue) inset;
  z-index: 1; position: relative;
}
.sb-faq2-count {
  background: rgba(0,40,104,0.08);
  color: var(--sb-blue);
  font-size: 0.65rem; font-weight: 800;
  padding: 1px 6px; border-radius: 20px;
}
.sb-faq2-cat-btn.active .sb-faq2-count {
  background: var(--sb-blue); color: #fff;
}

/* ---- FAQ list ---- */
.sb-faq2-body { padding: 6px 22px 22px; }

.sb-faq2-group { display: none; }
.sb-faq2-group.active { display: block; }

.sb-faq2-group-label {
  font-family: 'Montserrat','Inter',sans-serif;
  font-size: 0.67rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--sb-blue);
  padding: 18px 0 10px;
  border-bottom: 2px solid var(--sb-border);
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 7px;
}

/* ---- Accordion items ---- */
.sb-faq2-item {
  border-bottom: 1px solid var(--sb-border);
}
.sb-faq2-item:last-child { border-bottom: none; }

.sb-faq2-q {
  width: 100%; background: transparent; border: none;
  padding: 15px 4px;
  text-align: left;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  cursor: pointer; transition: background 0.15s;
  border-radius: 6px;
}
.sb-faq2-q:hover { background: var(--sb-bg); }
.sb-faq2-q[aria-expanded="true"] { background: transparent; }

.sb-faq2-q-text {
  font-family: 'Inter',-apple-system,sans-serif;
  font-size: 0.87rem; font-weight: 700;
  color: var(--sb-charcoal); line-height: 1.4;
  text-align: left;
}
.sb-faq2-q[aria-expanded="true"] .sb-faq2-q-text { color: var(--sb-blue); }

.sb-faq2-icon {
  flex-shrink: 0; margin-top: 1px;
  width: 22px; height: 22px;
  border: 1.5px solid var(--sb-border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.62rem; color: var(--sb-gray);
  transition: transform 0.25s, border-color 0.2s, background 0.2s;
  background: var(--sb-bg);
}
.sb-faq2-q[aria-expanded="true"] .sb-faq2-icon {
  transform: rotate(180deg);
  border-color: var(--sb-blue);
  background: var(--sb-blue); color: #fff;
}

.sb-faq2-ans {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.32s ease, padding 0.32s ease;
  padding: 0 4px;
}
.sb-faq2-ans.open {
  max-height: 600px;
  padding: 0 4px 16px;
}
.sb-faq2-ans-inner {
  background: var(--sb-bg);
  border: 1px solid var(--sb-border);
  border-radius: 10px;
  padding: 14px 16px;
}
.sb-faq2-ans-inner p {
  font-size: 0.84rem; color: var(--sb-gray);
  line-height: 1.75; margin: 0 0 10px;
}
.sb-faq2-ans-inner p:last-child { margin: 0; }
.sb-faq2-ans-inner strong { color: var(--sb-charcoal); }
.sb-faq2-ans-inner a { color: var(--sb-blue); text-decoration: underline; }
.sb-faq2-ans-inner ul {
  margin: 8px 0 10px; padding-left: 0;
  list-style: none;
  display: flex; flex-direction: column; gap: 6px;
}
.sb-faq2-ans-inner ul li {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 0.83rem; color: var(--sb-gray); line-height: 1.65;
}
.sb-faq2-ans-inner ul li::before {
  content: "▸";
  color: var(--sb-blue); flex-shrink: 0;
  font-size: 0.7rem; margin-top: 3px; font-weight: 900;
}
.sb-faq2-ans-inner .sb-faq2-highlight {
  display: flex; gap: 10px; align-items: flex-start;
  background: #EFF6FF; border: 1px solid rgba(2,132,199,0.2);
  border-radius: 8px; padding: 10px 13px; margin-top: 10px;
  font-size: 0.8rem; color: #1e40af; line-height: 1.6;
}
.sb-faq2-ans-inner .sb-faq2-highlight strong { color: #1e3a8a; }

/* ---- Footer count bar ---- */
.sb-faq2-footer {
  background: var(--sb-bg);
  border-top: 1px solid var(--sb-border);
  padding: 14px 22px;
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: center; justify-content: space-between;
}
.sb-faq2-footer p {
  font-size: 0.78rem; color: var(--sb-gray); margin: 0; line-height: 1.5;
}
.sb-faq2-footer strong { color: var(--sb-charcoal); }
.sb-faq2-expand-all {
  background: transparent; border: 1.5px solid var(--sb-border);
  color: var(--sb-gray); font-size: 0.75rem; font-weight: 700;
  padding: 7px 14px; border-radius: 8px; cursor: pointer;
  transition: all 0.2s; white-space: nowrap;
  font-family: 'Inter',-apple-system,sans-serif;
}
.sb-faq2-expand-all:hover { border-color: var(--sb-blue); color: var(--sb-blue); }

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
  .sb-faq2-header { padding: 20px 16px 18px; }
  .sb-faq2-body { padding: 4px 14px 18px; }
  .sb-faq2-cats { padding: 14px 14px 0; gap: 6px; }
  .sb-faq2-footer { padding: 12px 14px; }
  .sb-faq2-cat-btn { font-size: 0.7rem; padding: 6px 10px; }
}
@media (max-width: 480px) {
  .sb-faq2-header-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
  .sb-faq2-q-text { font-size: 0.83rem; }
}


/* ========================================================
   RELATED CALCULATORS — prefixed sb-rc-
   ======================================================== */

.sb-rc-section {
  background: var(--sb-white);
  border: 1px solid var(--sb-border);
  border-radius: 16px;
  margin-top: 28px;
  overflow: hidden;
}

/* ---- Header ---- */
.sb-rc-header {
  background: linear-gradient(135deg, #001840 0%, #002868 55%, #003d8c 100%);
  padding: 28px 28px 24px;
  position: relative; overflow: hidden;
}
.sb-rc-header::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 44px 44px; pointer-events: none;
}
.sb-rc-header-inner {
  display: flex; align-items: center; gap: 14px;
  position: relative; z-index: 1;
}
.sb-rc-header-icon {
  width: 50px; height: 50px; flex-shrink: 0;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
}
.sb-rc-header-copy h2 {
  font-family: 'Montserrat','Inter',sans-serif;
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  font-weight: 800; color: #fff;
  margin: 0 0 5px; line-height: 1.2;
}
.sb-rc-header-copy p {
  font-size: 0.8rem; color: rgba(255,255,255,0.68);
  margin: 0; line-height: 1.5;
}

/* ---- Category filter row ---- */
.sb-rc-filters {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 18px 22px 16px;
  border-bottom: 1px solid var(--sb-border);
  background: var(--sb-bg);
}
.sb-rc-filter-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--sb-border);
  background: var(--sb-white);
  color: var(--sb-gray);
  font-family: 'Inter',-apple-system,sans-serif;
  font-size: 0.74rem; font-weight: 700;
  cursor: pointer; transition: all 0.18s;
  white-space: nowrap;
}
.sb-rc-filter-btn:hover { border-color: var(--sb-blue); color: var(--sb-blue); }
.sb-rc-filter-btn.active {
  background: var(--sb-blue); color: #fff;
  border-color: var(--sb-blue);
}

/* ---- Grid body ---- */
.sb-rc-body { padding: 22px; }

.sb-rc-group { display: none; }
.sb-rc-group.active { display: block; }

.sb-rc-group-label {
  font-family: 'Montserrat','Inter',sans-serif;
  font-size: 0.67rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--sb-blue);
  padding-bottom: 10px; margin-bottom: 14px;
  border-bottom: 2px solid var(--sb-border);
  display: flex; align-items: center; gap: 7px;
}

/* ---- Cards grid ---- */
.sb-rc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.sb-rc-grid:last-child { margin-bottom: 0; }

/* ---- Individual card ---- */
.sb-rc-card {
  display: flex;
  flex-direction: column;
  background: var(--sb-bg);
  border: 1px solid var(--sb-border);
  border-radius: 12px;
  padding: 16px 15px;
  text-decoration: none;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  position: relative; overflow: hidden;
}
.sb-rc-card:hover {
  border-color: var(--sb-blue);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,40,104,0.1);
  text-decoration: none;
}
.sb-rc-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 12px 12px 0 0;
  opacity: 0; transition: opacity 0.2s;
}
.sb-rc-card:hover::before { opacity: 1; }

/* Accent top-border colors per category */
.sb-rc-card.cat-mortgage::before  { background: linear-gradient(90deg, var(--sb-blue), #2563EB); }
.sb-rc-card.cat-investing::before { background: linear-gradient(90deg, var(--sb-green), #059669); }
.sb-rc-card.cat-taxes::before     { background: linear-gradient(90deg, var(--sb-amber), #D97706); }
.sb-rc-card.cat-credit::before    { background: linear-gradient(90deg, var(--sb-teal), #0891B2); }
.sb-rc-card.cat-loans::before     { background: linear-gradient(90deg, var(--sb-purple), #7C3AED); }
.sb-rc-card.cat-personal::before  { background: linear-gradient(90deg, #EC4899, #DB2777); }

/* Card emoji icon */
.sb-rc-card-icon {
  font-size: 1.4rem;
  margin-bottom: 10px; line-height: 1;
}

/* Category badge */
.sb-rc-badge {
  display: inline-flex; align-items: center;
  border-radius: 20px; padding: 2px 8px;
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  margin-bottom: 7px; width: fit-content;
}
.cat-mortgage .sb-rc-badge  { background: rgba(0,40,104,0.08);  color: var(--sb-blue); }
.cat-investing .sb-rc-badge { background: rgba(0,135,90,0.08);  color: var(--sb-green); }
.cat-taxes .sb-rc-badge     { background: rgba(217,119,6,0.1);  color: var(--sb-amber); }
.cat-credit .sb-rc-badge    { background: rgba(8,145,178,0.08); color: var(--sb-teal); }
.cat-loans .sb-rc-badge     { background: rgba(124,58,237,0.08);color: var(--sb-purple); }
.cat-personal .sb-rc-badge  { background: rgba(236,72,153,0.08);color: #DB2777; }

/* Card title */
.sb-rc-card-title {
  font-family: 'Montserrat','Inter',sans-serif;
  font-size: 0.84rem; font-weight: 800;
  color: var(--sb-charcoal); line-height: 1.3;
  margin-bottom: 7px; flex: 1;
}
.sb-rc-card:hover .sb-rc-card-title { color: var(--sb-blue); }

/* Card description */
.sb-rc-card-desc {
  font-size: 0.75rem; color: var(--sb-gray);
  line-height: 1.6; margin: 0;
}

/* CTA arrow */
.sb-rc-card-arrow {
  display: flex; align-items: center; gap: 4px;
  margin-top: 12px;
  font-size: 0.72rem; font-weight: 700;
  color: var(--sb-gray); transition: color 0.18s;
}
.sb-rc-card:hover .sb-rc-card-arrow { color: var(--sb-blue); }

/* ---- "See All" footer row per group ---- */
.sb-rc-see-all {
  display: flex; align-items: center; justify-content: flex-end;
  margin-top: -8px; margin-bottom: 24px;
}
.sb-rc-see-all a {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.76rem; font-weight: 700;
  color: var(--sb-blue); text-decoration: none;
  padding: 6px 12px; border-radius: 8px;
  border: 1.5px solid rgba(0,40,104,0.15);
  transition: background 0.18s, border-color 0.18s;
}
.sb-rc-see-all a:hover {
  background: #EEF2F8; border-color: var(--sb-blue); text-decoration: none;
}

/* ---- Bottom CTA strip ---- */
.sb-rc-footer {
  background: var(--sb-bg);
  border-top: 1px solid var(--sb-border);
  padding: 16px 22px;
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; justify-content: space-between;
}
.sb-rc-footer-copy { font-size: 0.8rem; color: var(--sb-gray); line-height: 1.55; }
.sb-rc-footer-copy strong { color: var(--sb-charcoal); }
.sb-rc-footer-link {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--sb-blue); color: #fff;
  font-family: 'Montserrat','Inter',sans-serif;
  font-size: 0.78rem; font-weight: 800;
  padding: 10px 18px; border-radius: 9px;
  text-decoration: none; white-space: nowrap;
  transition: background 0.2s, transform 0.2s;
}
.sb-rc-footer-link:hover {
  background: #001a4d; transform: translateY(-1px);
  text-decoration: none; color: #fff;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 900px) {
  .sb-rc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .sb-rc-header { padding: 20px 16px 18px; }
  .sb-rc-body { padding: 16px; }
  .sb-rc-filters { padding: 14px 16px 12px; }
  .sb-rc-footer { padding: 14px 16px; flex-direction: column; align-items: flex-start; }
}
@media (max-width: 520px) {
  .sb-rc-grid { grid-template-columns: 1fr; }
  .sb-rc-header-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ========================================================
   DISCLAIMER + EDITORIAL SECTION CSS — prefixed sb-dis-
   ======================================================== */

.sb-dis-section {
  margin-top: 28px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(217,119,6,0.3);
}

/* ---- Amber warning header ---- */
.sb-dis-header {
  background: linear-gradient(135deg, #78350F 0%, #92400E 60%, #B45309 100%);
  padding: 24px 28px 20px;
  position: relative; overflow: hidden;
}
.sb-dis-header::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 44px 44px; pointer-events: none;
}
.sb-dis-header-inner {
  display: flex; align-items: center; gap: 14px;
  position: relative; z-index: 1;
}
.sb-dis-header-icon {
  width: 48px; height: 48px; flex-shrink: 0;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.45rem;
}
.sb-dis-header-copy h2 {
  font-family: 'Montserrat','Inter',sans-serif;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  font-weight: 800; color: #fff;
  margin: 0 0 4px; line-height: 1.2;
}
.sb-dis-header-copy p {
  font-size: 0.78rem; color: rgba(255,255,255,0.72);
  margin: 0; line-height: 1.5;
}

/* ---- Main content area ---- */
.sb-dis-body {
  background: var(--sb-white);
  padding: 26px 26px 0;
}

/* ---- Divider between sub-sections ---- */
.sb-dis-divider {
  height: 1px;
  background: var(--sb-border);
  margin: 24px 0;
}

/* ---- Section sub-heading ---- */
.sb-dis-subhead {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.sb-dis-subhead-icon {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.sb-dis-subhead-icon.amber { background: #FEF3C7; }
.sb-dis-subhead-icon.blue  { background: #EFF6FF; }
.sb-dis-subhead-icon.green { background: #F0FBF6; }
.sb-dis-subhead-icon.navy  { background: #EEF2FF; }
.sb-dis-subhead h3 {
  font-family: 'Montserrat','Inter',sans-serif;
  font-size: 0.92rem; font-weight: 800;
  color: var(--sb-charcoal); margin: 0; line-height: 1.2;
}

/* ---- Paragraph text ---- */
.sb-dis-p {
  font-size: 0.84rem; color: var(--sb-gray);
  line-height: 1.78; margin: 0 0 14px;
}
.sb-dis-p:last-child { margin: 0; }
.sb-dis-p strong { color: var(--sb-charcoal); }
.sb-dis-p a { color: var(--sb-blue); text-decoration: underline; }
.sb-dis-p a:hover { color: #001a4d; }

/* ---- Warning box (amber) ---- */
.sb-dis-warning {
  background: #FFFBEB;
  border: 1px solid rgba(217,119,6,0.3);
  border-left: 4px solid var(--sb-amber);
  border-radius: 0 10px 10px 0;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.sb-dis-warning p {
  font-size: 0.83rem; color: #92400E;
  line-height: 1.72; margin: 0 0 8px;
}
.sb-dis-warning p:last-child { margin: 0; }
.sb-dis-warning strong { color: #78350F; }

/* ---- Info box (blue) ---- */
.sb-dis-info {
  background: #EFF6FF;
  border: 1px solid rgba(2,132,199,0.2);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.sb-dis-info p {
  font-size: 0.83rem; color: #1e40af;
  line-height: 1.72; margin: 0 0 8px;
}
.sb-dis-info p:last-child { margin: 0; }
.sb-dis-info strong { color: #1e3a8a; }

/* ---- 2-col responsibility grid ---- */
.sb-dis-resp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.sb-dis-resp-card {
  border-radius: 10px; padding: 14px 14px;
  border: 1px solid transparent;
}
.sb-dis-resp-card.do   { background: #F0FBF6; border-color: rgba(0,135,90,0.2); }
.sb-dis-resp-card.dont { background: #FFF1F2; border-color: rgba(159,18,57,0.15); }
.sb-dis-resp-label {
  font-family: 'Montserrat','Inter',sans-serif;
  font-size: 0.65rem; font-weight: 800;
  letter-spacing: 0.07em; text-transform: uppercase;
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 5px;
}
.do .sb-dis-resp-label   { color: var(--sb-green); }
.dont .sb-dis-resp-label { color: #9f1239; }
.sb-dis-resp-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.sb-dis-resp-list li {
  font-size: 0.8rem; line-height: 1.6;
  display: flex; gap: 8px; align-items: flex-start;
}
.do .sb-dis-resp-list li   { color: #065f46; }
.dont .sb-dis-resp-list li { color: #9f1239; }
.sb-dis-resp-list li::before {
  flex-shrink: 0; font-weight: 900;
  font-size: 0.75rem; margin-top: 2px;
}
.do .sb-dis-resp-list li::before   { content: "✓"; color: var(--sb-green); }
.dont .sb-dis-resp-list li::before { content: "✗"; color: #9f1239; }
.sb-dis-resp-list li strong { font-weight: 700; }

/* ---- Editorial pillars grid ---- */
.sb-dis-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.sb-dis-pillar {
  background: var(--sb-bg);
  border: 1px solid var(--sb-border);
  border-radius: 10px;
  padding: 14px 12px;
  text-align: center;
}
.sb-dis-pillar-icon { font-size: 1.3rem; margin-bottom: 8px; }
.sb-dis-pillar-title {
  font-family: 'Montserrat','Inter',sans-serif;
  font-size: 0.76rem; font-weight: 800;
  color: var(--sb-charcoal);
  margin-bottom: 5px; line-height: 1.25;
}
.sb-dis-pillar-desc {
  font-size: 0.72rem; color: var(--sb-gray);
  line-height: 1.6; margin: 0;
}

/* ---- Gov authority links ---- */
.sb-dis-gov-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 0;
}
.sb-dis-gov-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--sb-bg);
  border: 1px solid var(--sb-border);
  border-radius: 11px;
  padding: 14px 14px;
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.sb-dis-gov-card:hover {
  border-color: var(--sb-blue);
  box-shadow: 0 4px 14px rgba(0,40,104,0.09);
  transform: translateY(-1px);
  text-decoration: none;
}
.sb-dis-gov-icon {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  background: linear-gradient(135deg,#001840,#002868);
}
.sb-dis-gov-body {}
.sb-dis-gov-agency {
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--sb-blue); margin-bottom: 3px;
}
.sb-dis-gov-title {
  font-family: 'Montserrat','Inter',sans-serif;
  font-size: 0.8rem; font-weight: 800;
  color: var(--sb-charcoal);
  line-height: 1.3; margin-bottom: 4px;
}
.sb-dis-gov-card:hover .sb-dis-gov-title { color: var(--sb-blue); }
.sb-dis-gov-desc {
  font-size: 0.73rem; color: var(--sb-gray);
  line-height: 1.55; margin: 0;
}
.sb-dis-gov-arrow {
  font-size: 0.7rem; color: var(--sb-gray);
  margin-top: 6px; display: flex; align-items: center; gap: 4px;
  font-weight: 700; transition: color 0.18s;
}
.sb-dis-gov-card:hover .sb-dis-gov-arrow { color: var(--sb-blue); }

/* ---- Internal legal link row ---- */
.sb-dis-legal-links {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 16px 26px;
  border-top: 1px solid var(--sb-border);
  background: var(--sb-bg);
  align-items: center;
}
.sb-dis-legal-links a {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.74rem; font-weight: 700;
  color: var(--sb-gray); text-decoration: none;
  padding: 5px 11px; border-radius: 7px;
  border: 1.5px solid var(--sb-border);
  transition: all 0.18s;
}
.sb-dis-legal-links a:hover {
  border-color: var(--sb-blue); color: var(--sb-blue);
  background: #EEF2F8; text-decoration: none;
}
.sb-dis-legal-sep {
  font-size: 0.7rem; color: var(--sb-border);
  font-weight: 300;
}
.sb-dis-legal-copy {
  margin-left: auto;
  font-size: 0.72rem; color: var(--sb-gray);
}

/* ---- RESPONSIVE ---- */
@media (max-width: 900px) {
  .sb-dis-pillars { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .sb-dis-header { padding: 18px 16px 16px; }
  .sb-dis-body { padding: 20px 16px 0; }
  .sb-dis-resp-grid { grid-template-columns: 1fr; }
  .sb-dis-gov-grid { grid-template-columns: 1fr; }
  .sb-dis-legal-links { padding: 14px 16px; }
  .sb-dis-legal-copy { margin-left: 0; width: 100%; }
}
@media (max-width: 520px) {
  .sb-dis-header-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
  .sb-dis-pillars { grid-template-columns: 1fr 1fr; }
}
/* =========================================================
   📱 MOBILE CONTAINMENT, UX FIXES & EXPORT BUTTONS
   ========================================================= */
html, body {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

/* 1. Aggressively contain ALL structural wrappers to prevent blowout */
#sbWrapper, 
.sb-grid, 
.sb-input-panel, 
.sb-results-panel, 
.sb-r2, 
.sb-stats, 
.sb-invest-grid,
.sb-hero,
.sb-hero-pills,
.sb-invest-panel { 
  min-width: 0 !important; 
  max-width: 100% !important; 
  box-sizing: border-box !important; 
}

/* 2. Force text inside data blocks to wrap instead of stretching */
.sb-hero-pill, 
.sb-stat, 
.sb-invest-block {
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* 3. Force Amortization Table to scroll horizontally instead of blowing out screen */
.sb-amort-wrap {
  min-width: 0 !important;
  width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* 4. Prevent long FAQ answers from getting cut off on mobile */
.sb-faq2-ans.open {
  max-height: 2500px !important; 
}

/* =========================================================
   📥 EXPORT ACTION ROW (PDF, Print, WhatsApp)
   ========================================================= */
.sb-export-row {
  display: flex; gap: 10px; margin-top: 20px;
  padding-top: 20px; border-top: 1px solid var(--sb-border);
  flex-wrap: wrap;
}
.sb-export-btn {
  flex: 1; min-width: max-content;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px; border-radius: 8px; font-family: 'Montserrat', 'Inter', sans-serif;
  font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: all 0.2s;
}
.sb-export-btn svg { width: 16px; height: 16px; }

/* Button Colors */
.sb-btn-wa { background: #fff; color: #16a34a; border: 1.5px solid #16a34a; }
.sb-btn-wa:hover { background: #16a34a; color: #fff; }
.sb-btn-pdf { background: #fff; color: var(--sb-blue); border: 1.5px solid var(--sb-blue); }
.sb-btn-pdf:hover { background: var(--sb-blue); color: #fff; }
.sb-btn-print { background: var(--sb-bg); color: var(--sb-gray); border: 1.5px solid var(--sb-border); }
.sb-btn-print:hover { border-color: var(--sb-charcoal); color: var(--sb-charcoal); }

/* =========================================================
   📱 MOBILE MEDIA QUERIES (STACKING)
   ========================================================= */
@media screen and (max-width: 640px) {
  /* Force all 2-column internal grids to stack */
  .sb-r2, 
  .sb-stats, 
  .sb-invest-grid { 
    grid-template-columns: 1fr !important; 
  }
  
  /* Make sure the hero pills stack neatly */
  .sb-hero-pills { 
    flex-direction: column !important; 
    gap: 8px !important;
  }
  
  .sb-hero-pill {
    width: 100% !important;
    text-align: center !important;
  }
  
  /* Export buttons stack */
  .sb-export-row { flex-direction: column; }
  .sb-export-btn { width: 100%; }
}