/* ============================================================
       BASE & GLOBAL KADENCE VARIABLES
       ============================================================ */
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
    
    :root {
      --p1: #002868;       /* Navy */
      --p1d: #00183F;      /* Dark Navy */
      --p8: #BF0A30;       /* Red */
      --p8h: #9B0826;      /* Red Hover */
      --p9: #00875A;       /* Green */
      --white: #FFFFFF;
      --charcoal: #1D1D1F;
      --gray-text: #5F6368;
      --border: #E0E4E8;
      --bg-light: #F7F9FC;
    }

    body{font-family:'Inter','Segoe UI',sans-serif;font-size:15px;color:var(--charcoal);background:var(--bg-light);line-height:1.5}
    input,select,button{font:inherit;color:inherit}
    button{cursor:pointer}

/* ── REDESIGNED CALCULATOR TITLE BAR ── */
    .calc-wrap {
      max-width: 1200px;
      margin: 40px auto;
      padding: 0 20px 60px;
    }

    /* ── REDESIGNED TITLE BAR ── */
    .calc-title-bar {
      background: linear-gradient(135deg, var(--p1) 0%, var(--p1d) 100%);
      color: var(--white);
      border-radius: 12px 12px 0 0;
      padding: 24px 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap;
      border-bottom: 4px solid var(--p8); /* Red accent line */
      position: relative;
      overflow: hidden;
    }

    /* Subtle red glow effect in the background */
    .calc-title-bar::before {
      content: '';
      position: absolute;
      top: -50px;
      right: -5%;
      width: 300px;
      height: 300px;
      background: radial-gradient(circle, rgba(191,10,48,0.15) 0%, rgba(0,0,0,0) 70%);
      border-radius: 50%;
      pointer-events: none;
    }

    .calc-title-left {
      display: flex;
      align-items: center;
      z-index: 1;
    }

    .calc-title-bar h1 {
      font-family: 'Montserrat', sans-serif;
      font-size: 22px;
      font-weight: 800;
      line-height: 1.2;
      margin: 0;
      letter-spacing: -0.5px;
      color: #ffffff !important; /* Forces the text to stay pure white */
    }

    .calc-title-bar .badges {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      z-index: 1;
    }

    .calc-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.15);
      color: #ffffff !important;
      font-family: 'Inter', sans-serif;
      font-size: 11.5px;
      font-weight: 600;
      letter-spacing: 0.02em;
      padding: 6px 12px;
      border-radius: 6px;
      white-space: nowrap;
      backdrop-filter: blur(4px);
    }

    .calc-badge i {
      color: #4ade80; /* Vibrant green checkmarks */
      font-size: 11px;
    }

    /* Mobile Adjustments for Title Bar */
    @media (max-width: 768px) {
      .calc-title-bar {
        padding: 20px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
      }
      .calc-title-bar h1 {
        font-size: 18px;
      }
      .calc-badge {
        font-size: 10.5px;
        padding: 4px 10px;
      }
    }

    /* Subtle red glow effect in the background */
    .calc-title-bar::before {
      content: '';
      position: absolute;
      top: -50px;
      right: -5%;
      width: 300px;
      height: 300px;
      background: radial-gradient(circle, rgba(191,10,48,0.15) 0%, rgba(0,0,0,0) 70%);
      border-radius: 50%;
      pointer-events: none;
    }

    .calc-title-left {
      display: flex;
      align-items: center;
      gap: 16px;
      z-index: 1;
    }

    .calc-title-icon {
      width: 48px;
      height: 48px;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      color: var(--white);
      flex-shrink: 0;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }

    .calc-title-bar h1 {
      font-family: 'Montserrat', sans-serif;
      font-size: 22px;
      font-weight: 800;
      line-height: 1.2;
      margin: 0;
      letter-spacing: -0.5px;
    }

    .calc-title-bar .badges {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      z-index: 1;
    }

    .calc-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.15);
      color: var(--white);
      font-family: 'Inter', sans-serif;
      font-size: 11.5px;
      font-weight: 600;
      letter-spacing: 0.02em;
      padding: 6px 12px;
      border-radius: 6px;
      white-space: nowrap;
      backdrop-filter: blur(4px);
    }

    .calc-badge i {
      color: #4ade80; /* Vibrant green accent for the checkmarks */
      font-size: 11px;
    }

    /* Mobile Adjustments for Title Bar */
    @media (max-width: 768px) {
      .calc-title-bar {
        padding: 20px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
      }
      .calc-title-left {
        gap: 12px;
      }
      .calc-title-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
      }
      .calc-title-bar h1 {
        font-size: 18px;
      }
      .calc-badge {
        font-size: 10.5px;
        padding: 4px 10px;
      }
    }
  
    /* Layout */
    .calc-wrap{max-width:1200px;margin:40px auto;padding:0 20px 60px;}
    .calc-title-bar{background:var(--p1);color:#fff;border-radius:12px 12px 0 0;padding:20px 24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
    .calc-title-bar h1{font-family:'Montserrat',sans-serif;font-size:20px;font-weight:800;line-height:1.2;flex:1;margin:0;}
    .calc-title-bar .badges{display:flex;gap:8px;flex-wrap:wrap}
    .calc-badge{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:9999px;white-space:nowrap}
    .calc-body{display:grid;grid-template-columns:1fr 420px;gap:0;background:#fff;border:1px solid var(--border);border-top:none;border-radius:0 0 12px 12px;overflow:hidden; box-shadow: 0 4px 20px rgba(0,40,104,.08);}
    .calc-inputs{padding:24px;border-right:1px solid #e8eaf0;overflow-y:auto}
    .calc-results-panel{background:#f0f4fb;padding:24px;display:flex;flex-direction:column;gap:16px}

    /* Property Type Selector */
    .prop-type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
    .prop-btn{background:#fff;border:2px solid var(--border);border-radius:8px;padding:10px 6px;text-align:center;font-size:11.5px;font-weight:700;font-family:'Montserrat',sans-serif;color:var(--gray-text);cursor:pointer;transition:all 180ms ease;line-height:1.3}
    .prop-btn:hover{border-color:var(--p1);color:var(--p1);background:#f0f4fb}
    .prop-btn.active{background:var(--p1);border-color:var(--p1);color:#fff}
    .prop-btn i{display:block;margin:0 auto 4px;font-size:16px;}

    /* Section headers */
    .section-title{font-family:'Montserrat',sans-serif;font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--p1);margin:24px 0 12px;padding-bottom:8px;border-bottom:2px solid var(--bg-light);display:flex;align-items:center;gap:8px}
    .section-title i{color:var(--p9)}

    /* Form fields */
    .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    .form-grid.cols3{grid-template-columns:1fr 1fr 1fr}
    .field{display:flex;flex-direction:column;gap:4px}
    .field label{font-size:12.5px;font-weight:600;color:var(--charcoal)}
    .field label span.hint{font-weight:400;color:var(--gray-text);font-size:11px}
    .input-wrap{position:relative;display:flex;align-items:center}
    .input-wrap .prefix,.input-wrap .suffix{position:absolute;font-size:13px;font-weight:600;color:var(--gray-text);pointer-events:none; z-index: 5;}
    .input-wrap .prefix{left:12px}
    .input-wrap .suffix{right:12px}

    /* 🚨 NUCLEAR KADENCE OVERRIDES 🚨 */
    .calc-body input[type="text"],
    .calc-body input[type="number"],
    .calc-body select {
      width: 100% !important;
      padding: 9px 12px !important;
      border: 1.5px solid var(--border) !important;
      border-radius: 8px !important;
      font-family: 'Inter', sans-serif !important;
      font-size: 13.5px !important;
      color: var(--charcoal) !important;
      background-color: #ffffff !important;
      background-image: none !important;
      transition: all 0.2s !important;
      outline: none !important;
      -webkit-appearance: none !important;
      box-shadow: none !important;
      height: 40px !important;
    }
    .calc-body input:focus, .calc-body select:focus {
      border-color: var(--p1) !important;
      box-shadow: 0 0 0 3px rgba(0,40,104,.1) !important;
    }
    .calc-body input:read-only { background: #f9fafb !important; color: #9ca3af !important; }
    
    .input-wrap.has-prefix input{padding-left:26px !important;}
    .input-wrap.has-suffix input{padding-right:28px !important;}
    select{cursor:pointer !important; padding-right:30px !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%235F6368'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") no-repeat right 10px center/12px #ffffff !important;}

    /* Toggle sections */
    .toggle-section{background:var(--bg-light);border:1px solid var(--border);border-radius:8px;margin-top:16px;overflow:hidden}
    .toggle-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;cursor:pointer;user-select:none}
    .toggle-header .toggle-label{font-size:13px;font-weight:700;color:var(--p1);display:flex;align-items:center;gap:8px}
    .toggle-header .toggle-badge{background:#e8f4f5;color:var(--p9);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:9999px}
    .toggle-header .chevron{color:#9ca3af;transition:transform 200ms ease}
    .toggle-header.open .chevron{transform:rotate(180deg)}
    .toggle-body{padding:16px;border-top:1px solid var(--border);display:none}
    .toggle-body.open{display:block}

    /* Action buttons */
    .calc-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:12px 16px;border-radius:8px;font-size:13px;font-family:'Montserrat',sans-serif;font-weight:700;border:none;cursor:pointer;transition:all 180ms ease;}
    .btn-calc{background:var(--p8);color:#fff;flex:1; min-width: 200px;}
    .btn-calc:hover{background:var(--p8h);box-shadow:0 4px 12px rgba(191,10,48,.25); transform: translateY(-1px);}
    .btn-clear{background:#fff;color:var(--charcoal);border:1.5px solid #d1d5db}
    .btn-clear:hover{border-color:var(--p8);color:var(--p8);background:#fff7f7}
    .btn-pdf{background:var(--p1);color:#fff}
    .btn-pdf:hover{background:var(--p1d);box-shadow:0 4px 12px rgba(0,40,104,.2)}
    .btn-wa{background:var(--p9);color:#fff}
    .btn-wa:hover{background:var(--p9h)}
    .btn-pdf,.btn-wa{display:none}

    /* Results */
    .results-placeholder{text-align:center;padding:40px 20px;color:#9ca3af}
    .results-placeholder i{font-size:40px; margin-bottom:16px;color:#d1d5db}
    .results-placeholder p{font-size:13.5px;line-height:1.6}

    .kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    .kpi{background:#fff;border:1px solid var(--border);border-radius:8px;padding:12px}
    .kpi.featured{background:var(--p1);border-color:var(--p1);grid-column:1/-1}
    .kpi .kpi-label{font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-text);margin-bottom:4px}
    .kpi.featured .kpi-label{color:rgba(255,255,255,.7)}
    .kpi .kpi-val{font-size:22px;font-family:'Montserrat',sans-serif;font-weight:900;color:var(--p1);font-variant-numeric:tabular-nums}
    .kpi.featured .kpi-val{color:#fff;font-size:26px}
    .kpi .kpi-sub{font-size:11px;color:#9ca3af;margin-top:2px}
    .kpi.featured .kpi-sub{color:rgba(255,255,255,.6)}
    .kpi .kpi-val.green{color:var(--p9)}
    .kpi .kpi-val.red{color:var(--p8)}
    .kpi .kpi-val.amber{color:#d97706}

    /* Yield bar */
    .yield-bars{display:flex;flex-direction:column;gap:6px;margin:12px 0}
    .yield-bar-row{display:flex;align-items:center;gap:10px}
    .yield-bar-label{font-size:11px;font-weight:600;color:var(--charcoal);width:110px;flex-shrink:0}
    .yield-bar-track{flex:1;height:8px;background:var(--border);border-radius:9999px;overflow:hidden}
    .yield-bar-fill{height:100%;border-radius:9999px;transition:width 400ms ease}
    .yield-bar-pct{font-size:11px;font-weight:700;color:var(--charcoal);width:45px;text-align:right;font-variant-numeric:tabular-nums}

    /* Scenario table */
    .scenario-section{margin-top:24px;background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden; box-shadow: var(--shadow-sm); display:none;}
    .scenario-header{background:var(--p1);color:#fff;padding:12px 20px;font-family:'Montserrat',sans-serif;font-size:13px;font-weight:800;letter-spacing:.03em}
    .scenario-table{width:100%;font-size:13px;border-collapse:collapse}
    .scenario-table th{background:#f0f4fb;padding:10px 12px;font-family:'Montserrat',sans-serif;font-weight:700;color:var(--p1);text-align:left;border-bottom:1px solid var(--border);font-size:11px;letter-spacing:.04em;text-transform:uppercase}
    .scenario-table td{padding:10px 12px;border-bottom:1px solid #f1f5f9;font-variant-numeric:tabular-nums; font-family: 'Inter', sans-serif;}
    .scenario-table td.metric{color:var(--charcoal);font-weight:600}
    .scenario-table td.base{color:var(--p1);font-weight:700}
    .scenario-table td.opt{color:var(--p9);font-weight:700}
    .scenario-table td.pess{color:var(--p8);font-weight:700}
    .scenario-table tr:last-child td{border-bottom:none;background:#f0f4fb;font-weight:800}

    /* Break-even indicator */
    .be-wrap{background:#fff;border:1px solid var(--border);border-radius:8px;padding:16px;margin-top:8px}
    .be-title{font-family:'Montserrat',sans-serif;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--gray-text);margin-bottom:8px}
    .be-track{height:16px;background:var(--border);border-radius:9999px;position:relative;overflow:visible;margin:12px 0}
    .be-fill{height:100%;border-radius:9999px;position:relative}
    .be-marker{position:absolute;top:-4px;width:4px;height:24px;background:var(--p8);border-radius:2px}
    .be-labels{display:flex;justify-content:space-between;font-size:10px;color:#9ca3af; font-weight: 600;}
    .be-status{font-size:12px;font-weight:700;margin-top:8px}

    /* Chart */
    .chart-wrap{background:#fff;border:1px solid var(--border);border-radius:8px;padding:16px;margin-top:8px}
    .chart-wrap canvas{max-height:200px}

    /* Benchmark callout */
    .benchmark-box{background:#fffbeb;border:1px solid #fde68a;border-radius:8px;padding:12px;margin-top:8px;font-size:12.5px;color:#78350f;line-height:1.55}
    .benchmark-box strong{color:#92400e}

    /* Data Rows (For load factor/YOC display) */
    .data-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed var(--border); font-size: 13.5px; }
    .data-row:last-child { border-bottom: none; }
    .data-label { color: var(--gray-text); font-weight: 600; }
    .data-val { font-weight: 700; color: var(--charcoal); }

    /* ============================================================
       NUCLEAR KADENCE OVERRIDES & MOBILE FIXES
       ============================================================ */
    @media(max-width:900px) {
      .calc-body { grid-template-columns: 1fr; }
      .calc-results-panel { border-top: 1px solid #e8eaf0; border-right: none; }
    }

    @media(max-width:600px) {
      .calc-wrap { padding: 20px 12px; margin: 20px auto; }
      .calc-title-bar h1 { font-size: 1.1rem; }
      .calc-inputs, .calc-results-panel { padding: 1.25rem 1rem; }
      
      /* Stack standard 2-column inputs to 1 column */
      .form-grid { grid-template-columns: 1fr; gap: 0.85rem; }
      
      /* FIX SCENARIO GRID: Keep 3 columns but allow horizontal scroll */
      .toggle-body { overflow-x: auto; padding-bottom: 1rem; }
      .form-grid.cols3 { 
          grid-template-columns: repeat(3, minmax(90px, 1fr)); 
          gap: 0.5rem; 
      }
      
      /* Property Type Buttons: 2 columns */
      .prop-type-grid { grid-template-columns: repeat(2, 1fr); }
      
      /* Fix Action Buttons */
      .calc-actions { 
          display: grid !important; 
          grid-template-columns: 1fr 1fr; 
          gap: 10px; 
      }
      .btn-calc { grid-column: 1 / -1; } 
      .btn-clear, .btn-pdf, .btn-wa { width: 100%; justify-content: center; }
      
      /* KPI Grid */
      .kpi-grid { grid-template-columns: 1fr; gap: 10px; }
      .kpi.featured .kpi-val { font-size: 1.75rem; }
    }

.how-section {
  background: #f7f8fa;
  border-top: 3px solid #e8eaf0;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 4vw, 2rem);
  font-family: 'Inter', 'Segoe UI', sans-serif;
  color: #1a1f2e;
}

.how-container { max-width: 1100px; margin-inline: auto; }

/* Header */
.how-header { margin-bottom: 2.5rem; }

.how-eyebrow {
  display: inline-block;
  background: #e8f4f5; color: #00875A;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  padding: 0.3rem 0.9rem; border-radius: 9999px;
  border: 1px solid #c3e6cb; margin-bottom: 0.85rem;
}

.how-section h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800; color: #002868;
  line-height: 1.2; margin-bottom: 0.75rem;
}

.how-section .how-intro {
  font-size: 1rem; color: #4a5568;
  max-width: 72ch; line-height: 1.7;
  margin-bottom: 2rem;
}

/* Section Titles */
.how-section-title {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 1.1rem; font-weight: 700; color: #002868;
  margin-bottom: 1.25rem; padding-bottom: 0.5rem;
  border-bottom: 2px solid #e2e8f0;
}

.how-section-title svg { color: #00875A; flex-shrink: 0; }

.how-divider {
  border: none; border-top: 1px solid #e2e8f0;
  margin: 2.5rem 0;
}

/* Steps */
.how-steps { display: flex; flex-direction: column; gap: 0.875rem; margin-bottom: 0; }

.how-step {
  display: flex; gap: 1rem; align-items: flex-start;
  background: #ffffff; border: 1px solid #e2e8f0;
  border-radius: 0.625rem; padding: 1rem 1.25rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: box-shadow 180ms ease, transform 180ms ease;
}

.how-step:hover {
  box-shadow: 0 4px 12px rgba(0,40,104,0.08);
  transform: translateY(-1px);
}

.how-step-number {
  flex-shrink: 0; width: 2rem; height: 2rem;
  background: #002868; color: #ffffff;
  font-size: 0.8rem; font-weight: 800;
  border-radius: 50%; display: flex;
  align-items: center; justify-content: center;
  margin-top: 0.15rem;
}

.how-step-body h4 { font-size: 0.95rem; font-weight: 700; color: #002868; margin-bottom: 0.3rem; }
.how-step-body p { font-size: 0.875rem; color: #4a5568; line-height: 1.65; max-width: 72ch; }
.how-step-body p strong { color: #002868; font-weight: 700; }

/* Input Cards */
.how-inputs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 1rem;
}

.how-input-card {
  background: #ffffff; border: 1px solid #e2e8f0;
  border-radius: 0.625rem; padding: 1rem 1.125rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: box-shadow 180ms ease;
}

.how-input-card:hover { box-shadow: 0 4px 12px rgba(0,40,104,0.08); }

.how-input-card-label {
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: #00875A; margin-bottom: 0.35rem;
}

.how-input-card h4 { font-size: 0.9rem; font-weight: 700; color: #002868; margin-bottom: 0.35rem; }
.how-input-card p { font-size: 0.8rem; color: #4a5568; line-height: 1.55; }

.how-input-range {
  display: inline-block; margin-top: 0.5rem;
  font-size: 0.7rem; font-weight: 600;
  color: #BF0A30; background: #fff0f2;
  border-radius: 9999px; padding: 0.15rem 0.6rem;
  border: 1px solid #fcd5da;
}

/* Formula Cards */
.how-formulas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 1rem;
}

.how-formula-card {
  background: #ffffff; border: 1px solid #e2e8f0;
  border-radius: 0.625rem; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.how-formula-card-header {
  background: #002868; color: #ffffff;
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.04em; padding: 0.55rem 1rem;
}

.how-formula-box {
  background: #f0f4f8; border-bottom: 1px solid #e2e8f0;
  padding: 0.75rem 1rem;
  font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  font-size: 0.75rem; color: #002868;
  line-height: 1.6; white-space: pre; overflow-x: auto;
}

.how-formula-card p {
  font-size: 0.8rem; color: #4a5568;
  line-height: 1.65; padding: 0.75rem 1rem;
}

/* Property Type Cards */
.how-lease-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: 1rem;
}

.how-lease-card {
  background: #ffffff; border: 1px solid #e2e8f0;
  border-radius: 0.625rem; padding: 1.125rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: box-shadow 180ms ease, transform 180ms ease;
}

.how-lease-card:hover {
  box-shadow: 0 6px 16px rgba(0,40,104,0.09);
  transform: translateY(-2px);
}

.how-lease-badge {
  display: inline-block; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.2rem 0.65rem; border-radius: 9999px; margin-bottom: 0.6rem;
}

.how-lease-badge.gross  { background: #d1fae5; color: #065f46; }
.how-lease-badge.snet   { background: #dbeafe; color: #1e3a8a; }
.how-lease-badge.dnet   { background: #fef3c7; color: #92400e; }
.how-lease-badge.nnn    { background: #fee2e2; color: #991b1b; }

.how-lease-card h4 { font-size: 0.95rem; font-weight: 700; color: #002868; margin-bottom: 0.4rem; }
.how-lease-card p { font-size: 0.8rem; color: #4a5568; line-height: 1.6; max-width: 100%; }

/* Glossary */
.how-glossary {
  background: #ffffff; border: 1px solid #e2e8f0;
  border-radius: 0.625rem; padding: 1.25rem 1.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.how-glossary dl {
  display: grid;
  grid-template-columns: minmax(180px, auto) 1fr;
  gap: 0.55rem 1.25rem;
}

.how-glossary dt {
  font-size: 0.82rem; font-weight: 700;
  color: #002868; padding-top: 0.1rem;
}

.how-glossary dd {
  font-size: 0.82rem; color: #4a5568;
  line-height: 1.6; border-bottom: 1px solid #f1f5f9;
  padding-bottom: 0.5rem; max-width: none;
}

.how-glossary dd:last-child { border-bottom: none; }

/* Disclaimer */
.how-disclaimer {
  background: #fffbeb; border: 1px solid #fde68a;
  border-radius: 0.5rem; padding: 0.875rem 1.125rem;
  display: flex; gap: 0.65rem; align-items: flex-start;
  margin-top: 1.5rem;
}

.how-disclaimer-icon { font-size: 1rem; line-height: 1; flex-shrink: 0; margin-top: 0.1rem; }
.how-disclaimer p { font-size: 0.78rem; color: #78350f; line-height: 1.65; max-width: none; }
.how-disclaimer p strong { color: #78350f; font-weight: 700; }

/* Responsive */
@media (max-width: 640px) {
  .how-formulas-grid, .how-inputs-grid, .how-lease-grid {
    grid-template-columns: 1fr;
  }
  .how-glossary dl { grid-template-columns: 1fr; gap: 0.2rem; }
  .how-glossary dt { font-weight: 800; margin-top: 0.75rem; }
  .how-glossary dd { margin-bottom: 0.35rem; }
  .how-formula-box { font-size: 0.7rem; }
}

.examples-section {
  background: #f7f8fa;
  border-top: 3px solid #e8eaf0;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 4vw, 2rem);
  font-family: 'Inter', 'Segoe UI', sans-serif;
  color: #1a1f2e;
}

.examples-container { max-width: 1100px; margin-inline: auto; }

/* Header */
.examples-header { margin-bottom: 2.5rem; }

.examples-eyebrow {
  display: inline-block;
  background: #e8f4f5; color: #00875A;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  padding: 0.3rem 0.9rem; border-radius: 9999px;
  border: 1px solid #c3e6cb; margin-bottom: 0.85rem;
}

.examples-section h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800; color: #002868;
  line-height: 1.2; margin-bottom: 0.75rem;
}

.examples-intro {
  font-size: 1rem; color: #4a5568;
  max-width: 72ch; line-height: 1.7;
}

/* Example Card */
.ex-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  margin-bottom: 2rem;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Card Header */
.ex-card-header {
  background: #f0f4fb;
  border-bottom: 1px solid #e2e8f0;
  padding: 1.25rem 1.5rem;
}

.ex-header-meta { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.6rem; }

.ex-badge {
  font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  padding: 0.2rem 0.65rem; border-radius: 9999px;
}

.ex-badge--industrial  { background: #fef3c7; color: #92400e; }
.ex-badge--multifamily { background: #dbeafe; color: #1e3a8a; }
.ex-badge--office      { background: #ede9fe; color: #5b21b6; }
.ex-badge--retail      { background: #d1fae5; color: #065f46; }
.ex-badge--unleveraged { background: #f3f4f6; color: #374151; }
.ex-badge--leveraged   { background: #fee2e2; color: #991b1b; }
.ex-badge--valueadd    { background: #fce7f3; color: #9d174d; }

.ex-card-header h3 {
  font-size: clamp(1rem, 2vw, 1.15rem);
  font-weight: 800; color: #002868;
  line-height: 1.25; margin-bottom: 0.5rem;
}

.ex-scenario {
  font-size: 0.85rem; color: #4a5568;
  line-height: 1.7; max-width: 72ch; margin: 0;
}

/* Body: inputs + results */
.ex-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.ex-inputs-col { padding: 1.25rem 1.5rem; border-right: 1px solid #e2e8f0; }
.ex-results-col { padding: 1.25rem 1.5rem; }

.ex-inputs-col h4, .ex-results-col h4 {
  font-size: 0.75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: #002868; margin-bottom: 0.85rem;
  padding-bottom: 0.4rem; border-bottom: 1px solid #e2e8f0;
}

/* Input Table */
.ex-input-table { width: 100%; font-size: 0.78rem; }
.ex-input-table td { padding: 0.3rem 0; border-bottom: 1px solid #f1f5f9; }
.ex-input-table td:first-child { color: #6b7280; width: 48%; }
.ex-input-table td:last-child { color: #1a1f2e; }
.ex-input-table strong { color: #002868; font-weight: 700; }

/* KPI Grid */
.ex-kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.ex-kpi {
  background: #f7f8fa;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 0.6rem 0.75rem;
}

.ex-kpi-label {
  display: block; font-size: 0.65rem; font-weight: 700;
  color: #6b7280; text-transform: uppercase;
  letter-spacing: 0.05em; margin-bottom: 0.2rem;
}

.ex-kpi-value {
  display: block; font-size: 1rem; font-weight: 800;
  color: #002868; font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.ex-kpi-value--green { color: #00875A; }
.ex-kpi-value--red   { color: #BF0A30; }

.ex-kpi-note {
  display: block; font-size: 0.62rem; color: #9ca3af;
  margin-top: 0.15rem; line-height: 1.3;
}

/* Insight Box */
.ex-insight {
  display: flex; gap: 0.75rem; align-items: flex-start;
  padding: 1rem 1.5rem;
  border-top: 1px solid #e2e8f0;
  font-size: 0.83rem; line-height: 1.7;
  background: #fffbeb; color: #78350f;
}

.ex-insight--red {
  background: #fff0f0; color: #7f1d1d;
  border-top-color: #fca5a5;
}

.ex-insight--green {
  background: #f0fdf4; color: #14532d;
  border-top-color: #86efac;
}

.ex-insight--amber {
  background: #fffbeb; color: #78350f;
}

.ex-insight-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 0.1rem; }
.ex-insight strong { font-weight: 700; }

/* Summary Table */
.ex-summary {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin-top: 0.5rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.ex-summary h3 {
  font-size: 1rem; font-weight: 800;
  color: #002868; margin-bottom: 1rem;
}

.ex-summary-scroll { overflow-x: auto; }

.ex-summary-table {
  width: 100%; font-size: 0.78rem;
  border-collapse: collapse; white-space: nowrap;
}

.ex-summary-table thead tr { background: #002868; color: #fff; }
.ex-summary-table th {
  padding: 0.5rem 0.85rem; text-align: left;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em;
}

.ex-summary-table tbody tr:nth-child(even) { background: #f9fafb; }
.ex-summary-table td {
  padding: 0.5rem 0.85rem;
  border-bottom: 1px solid #f1f5f9;
  font-variant-numeric: tabular-nums;
}

.ex-green  { color: #00875A; font-weight: 700; }
.ex-red    { color: #BF0A30; font-weight: 700; }
.ex-neutral { color: #6b7280; }

.ex-verdict {
  display: inline-block;
  font-size: 0.68rem; font-weight: 700;
  padding: 0.2rem 0.65rem; border-radius: 9999px;
}

.ex-verdict--pass { background: #d1fae5; color: #065f46; }
.ex-verdict--fail { background: #fee2e2; color: #991b1b; }

.ex-summary-note {
  font-size: 0.72rem; color: #6b7280;
  margin-top: 0.75rem; line-height: 1.6;
  font-style: italic; max-width: none;
}

/* Responsive */
@media (max-width: 768px) {
  .ex-body { grid-template-columns: 1fr; }
  .ex-inputs-col { border-right: none; border-bottom: 1px solid #e2e8f0; }
  .ex-kpi-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .ex-kpi-grid { grid-template-columns: 1fr; }
  .ex-card-header { padding: 1rem; }
  .ex-inputs-col, .ex-results-col { padding: 1rem; }
}

.tips-section {
  background: #ffffff;
  border-top: 3px solid #e8eaf0;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 4vw, 2rem);
  font-family: 'Inter', 'Segoe UI', sans-serif;
  color: #1a1f2e;
}

.tips-container { max-width: 1000px; margin-inline: auto; }

/* Header */
.tips-header { margin-bottom: 2.5rem; }

.tips-eyebrow {
  display: inline-block;
  background: #e8f4f5; color: #00875A;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  padding: 0.3rem 0.9rem; border-radius: 9999px;
  border: 1px solid #c3e6cb; margin-bottom: 0.85rem;
}

.tips-section h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800; color: #002868;
  line-height: 1.2; margin-bottom: 0.75rem;
}

.tips-intro {
  font-size: 1rem; color: #4a5568;
  max-width: 72ch; line-height: 1.7;
}

/* Tip Card */
.tip-card {
  display: flex; gap: 1.5rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 1.75rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: box-shadow 200ms ease;
}

.tip-card:hover { box-shadow: 0 6px 24px rgba(0,40,104,0.09); }

.tip-card--featured {
  border-color: #002868;
  box-shadow: 0 4px 16px rgba(0,40,104,0.12);
}

/* Number */
.tip-number-wrap { flex-shrink: 0; }

.tip-number {
  width: 3rem; height: 3rem;
  background: #002868; color: #ffffff;
  font-size: 1rem; font-weight: 900;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: -0.02em;
}

/* Content */
.tip-content { flex: 1; min-width: 0; }

.tip-header-row {
  display: flex; align-items: center; gap: 0.65rem;
  flex-wrap: wrap; margin-bottom: 0.65rem;
}

.tip-content h3 {
  font-size: clamp(1rem, 2vw, 1.15rem);
  font-weight: 800; color: #002868;
  line-height: 1.25; flex: 1; min-width: 200px;
}

.tip-tag {
  display: inline-block;
  font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  padding: 0.2rem 0.7rem; border-radius: 9999px;
  flex-shrink: 0;
}

.tip-tag--red   { background: #fee2e2; color: #BF0A30; border: 1px solid #fca5a5; }
.tip-tag--navy  { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }
.tip-tag--green { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }

.tip-lead {
  font-size: 0.9rem; color: #374151;
  line-height: 1.75; font-weight: 500;
  margin-bottom: 0.85rem; max-width: 72ch;
}

.tip-body p {
  font-size: 0.85rem; color: #4a5568;
  line-height: 1.75; max-width: 72ch;
  margin-bottom: 0.85rem;
}

.tip-body p strong { color: #002868; font-weight: 700; }

/* Comparison table */
.tip-comparison {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0.75rem; margin-bottom: 0.85rem;
}

.tip-comp-col {
  background: #f7f8fa;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem; overflow: hidden;
}

.tip-comp-header {
  background: #002868; color: #fff;
  font-size: 0.7rem; font-weight: 700;
  padding: 0.4rem 0.75rem; letter-spacing: 0.04em;
}

.tip-comp-row {
  display: flex; justify-content: space-between;
  padding: 0.3rem 0.75rem;
  font-size: 0.78rem;
  border-bottom: 1px solid #f1f5f9;
  color: #6b7280;
}

.tip-comp-row strong { font-weight: 700; }
.tc-green { color: #00875A; }
.tc-red   { color: #BF0A30; }
.tc-navy  { color: #002868; }
.tc-amber { color: #92400e; }

/* Formula block */
.tip-formula-block {
  background: #f0f4fb;
  border: 1px solid #bfdbfe;
  border-radius: 0.5rem;
  padding: 0.85rem 1rem;
  margin-bottom: 0.85rem;
}

.tip-formula-label {
  font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: #002868; margin-bottom: 0.4rem;
}

.tip-formula {
  font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  font-size: 0.78rem; color: #002868;
  line-height: 1.7; white-space: pre-line;
}

.tip-formula-note {
  font-size: 0.75rem; color: #4a5568;
  margin-top: 0.5rem; font-style: italic;
  line-height: 1.5; max-width: none;
}

/* Benchmarks */
.tip-benchmarks {
  background: #f7f8fa;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 0.85rem;
}

.tip-bench-title {
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: #002868; margin-bottom: 0.75rem;
}

.tip-bench-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
  gap: 0.5rem;
}

.tip-bench-item {
  border-radius: 0.375rem; padding: 0.6rem 0.75rem;
  display: flex; flex-direction: column; gap: 0.15rem;
}

.tip-bench--green { background: #d1fae5; border: 1px solid #6ee7b7; }
.tip-bench--amber { background: #fef3c7; border: 1px solid #fcd34d; }
.tip-bench--red   { background: #fee2e2; border: 1px solid #fca5a5; }

.tip-bench-range {
  font-size: 0.85rem; font-weight: 800;
  color: #1a1f2e;
}

.tip-bench-label {
  font-size: 0.72rem; font-weight: 700;
  color: #374151;
}

.tip-bench-desc {
  font-size: 0.68rem; color: #6b7280;
}

/* Value-Add Flow */
.tip-value-add-flow {
  display: flex; align-items: center; gap: 0.5rem;
  flex-wrap: wrap;
  background: #f7f8fa;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 0.85rem;
}

.tip-va-step {
  display: flex; align-items: flex-start; gap: 0.5rem;
  flex: 1; min-width: 160px;
}

.tip-va-num {
  width: 1.5rem; height: 1.5rem;
  background: #002868; color: #fff;
  font-size: 0.7rem; font-weight: 800;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.tip-va-text { display: flex; flex-direction: column; gap: 0.1rem; }
.tip-va-text strong { font-size: 0.78rem; color: #002868; font-weight: 700; }
.tip-va-text span   { font-size: 0.72rem; color: #4a5568; line-height: 1.4; }

.tip-va-arrow {
  color: #9ca3af; font-size: 1.2rem; font-weight: 300;
  flex-shrink: 0; align-self: center;
}

/* Scenarios Table */
.tip-scenarios-table {
  background: #f7f8fa;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  overflow: hidden;
  margin-bottom: 0.85rem;
  font-size: 0.78rem;
}

.tip-scenario-header-row {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
  background: #002868; color: #fff;
  padding: 0.45rem 0.85rem;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.04em;
}

.tip-scenario-row {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
  padding: 0.4rem 0.85rem;
  border-bottom: 1px solid #f1f5f9;
  align-items: center;
  color: #374151;
}

.tip-scenario-row:last-child { border-bottom: none; }
.tip-scenario-row span:first-child { font-weight: 600; color: #002868; }

/* Bottom CTA */
.tips-cta {
  background: #002868;
  border-radius: 0.75rem;
  margin-top: 0.5rem;
  overflow: hidden;
}

.tips-cta-inner {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 1.5rem; padding: 1.75rem 2rem;
  flex-wrap: wrap;
}

.tips-cta h3 {
  font-size: 1.05rem; font-weight: 800;
  color: #ffffff; margin-bottom: 0.3rem;
}

.tips-cta p {
  font-size: 0.85rem; color: rgba(255,255,255,0.72);
  line-height: 1.5; max-width: 55ch; margin: 0;
}

.tips-cta-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: #00875A; color: #ffffff;
  font-size: 0.875rem; font-weight: 700;
  padding: 0.75rem 1.5rem; border-radius: 0.5rem;
  text-decoration: none; flex-shrink: 0;
  transition: background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.tips-cta-btn:hover {
  background: #00694a;
  box-shadow: 0 4px 14px rgba(0,135,90,0.4);
  transform: translateY(-1px);
}

.tips-cta-btn svg { transition: transform 180ms ease; }
.tips-cta-btn:hover svg { transform: translateX(3px); }

/* Responsive */
@media (max-width: 640px) {
  .tip-card { flex-direction: column; gap: 1rem; padding: 1.25rem; }
  .tip-number { width: 2.25rem; height: 2.25rem; font-size: 0.85rem; }
  .tip-comparison { grid-template-columns: 1fr; }
  .tip-scenario-header-row,
  .tip-scenario-row { grid-template-columns: 1fr 1fr; font-size: 0.7rem; }
  .tip-scenario-header-row span:nth-child(3),
  .tip-scenario-row span:nth-child(3) { display: none; }
  .tip-value-add-flow { flex-direction: column; }
  .tip-va-arrow { transform: rotate(90deg); align-self: flex-start; }
  .tips-cta-inner { flex-direction: column; }
  .tips-cta-btn { width: 100%; justify-content: center; }
}

.faq-section {
  background: #ffffff;
  border-top: 3px solid #e8eaf0;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 4vw, 2rem);
  font-family: 'Inter', 'Segoe UI', sans-serif;
}

.faq-container { max-width: 860px; margin-inline: auto; }

/* Header */
.faq-header { margin-bottom: 2.5rem; }

.faq-eyebrow {
  display: inline-block;
  background: #e8f4f5; color: #00875A;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  padding: 0.3rem 0.9rem; border-radius: 9999px;
  border: 1px solid #c3e6cb; margin-bottom: 0.75rem;
}

.faq-section h2 {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 800; color: #002868;
  line-height: 1.2; margin-bottom: 0.65rem;
}

.faq-intro {
  font-size: 0.95rem; color: #4a5568;
  line-height: 1.7; max-width: 72ch;
  margin-bottom: 1rem;
}

.faq-stats { display: flex; gap: 1rem; flex-wrap: wrap; }

.faq-stats span {
  font-size: 0.72rem; font-weight: 600;
  color: #718096; background: #f7f8fa;
  border: 1px solid #e2e8f0;
  padding: 0.25rem 0.75rem; border-radius: 9999px;
}

/* Category */
.faq-category { margin-bottom: 2rem; }

.faq-cat-title {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 1rem; font-weight: 700; color: #002868;
  margin-bottom: 0.85rem; padding-bottom: 0.55rem;
  border-bottom: 2px solid #e2e8f0;
}

.faq-cat-title svg { color: #00875A; flex-shrink: 0; }

/* FAQ Item */
.faq-item {
  border: 1px solid #e2e8f0; border-radius: 0.5rem;
  margin-bottom: 0.5rem; overflow: hidden;
  background: #ffffff; transition: box-shadow 180ms ease;
}

.faq-item:hover { box-shadow: 0 2px 8px rgba(0,40,104,0.07); }
.faq-item.is-open { border-color: #002868; box-shadow: 0 0 0 1px rgba(0,40,104,0.12); }

/* Question Button */
.faq-q {
  width: 100%; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem;
  padding: 0.9rem 1.1rem; background: none;
  border: none; cursor: pointer; text-align: left;
  font-size: 0.88rem; font-weight: 600; color: #1a1f2e;
  line-height: 1.45;
  transition: background 150ms ease, color 150ms ease;
}

.faq-q:hover { background: #f7f8fa; color: #002868; }
.faq-item.is-open .faq-q { background: #f0f4fb; color: #002868; }

/* Chevron */
.faq-chevron {
  flex-shrink: 0; color: #9ca3af;
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), color 150ms ease;
}

.faq-item.is-open .faq-chevron { transform: rotate(180deg); color: #002868; }

/* Answer */
.faq-a {
  overflow: hidden; max-height: 0;
  transition: max-height 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-a[hidden] { display: block !important; visibility: hidden; max-height: 0; }
.faq-item.is-open .faq-a { max-height: 800px; visibility: visible; }

.faq-a-inner {
  padding: 0 1.1rem 1rem;
  border-top: 1px solid #e2e8f0;
}

.faq-a-inner p {
  font-size: 0.865rem; color: #374151;
  line-height: 1.75; max-width: 72ch;
  padding-top: 0.75rem;
}

.faq-a-inner p + p { padding-top: 0.5rem; }
.faq-a-inner p strong { color: #002868; font-weight: 700; }

/* Mobile */
@media (max-width: 600px) {
  .faq-q { font-size: 0.83rem; padding: 0.85rem 0.9rem; }
  .faq-a-inner { padding: 0 0.9rem 0.9rem; }
  .faq-stats { gap: 0.5rem; }
}

.related-section {
  background: #f7f8fa;
  border-top: 3px solid #e8eaf0;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 4vw, 2rem);
  font-family: 'Inter', 'Segoe UI', sans-serif;
}

.related-container { max-width: 1100px; margin-inline: auto; }

/* Header */
.related-header { margin-bottom: 2rem; }

.related-eyebrow {
  display: inline-block;
  background: #e8f4f5; color: #00875A;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  padding: 0.3rem 0.9rem; border-radius: 9999px;
  border: 1px solid #c3e6cb; margin-bottom: 0.75rem;
}

.related-section h2 {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 800; color: #002868;
  line-height: 1.2; margin-bottom: 0.6rem;
}

.related-intro {
  font-size: 0.95rem; color: #4a5568;
  line-height: 1.7; max-width: 65ch;
}

/* Primary Featured Grid */
.related-primary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

/* Secondary Grid */
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 0.75rem;
  margin-bottom: 2rem;
}

/* Base Card */
.related-card {
  display: flex; align-items: flex-start; gap: 0.875rem;
  background: #ffffff; border: 1px solid #e2e8f0;
  border-radius: 0.625rem; padding: 1.125rem;
  text-decoration: none; color: inherit;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease;
  position: relative;
}

.related-card:hover {
  box-shadow: 0 6px 20px rgba(0,40,104,0.10);
  transform: translateY(-2px);
  border-color: #002868;
}

.related-card:focus-visible {
  outline: 2px solid #002868;
  outline-offset: 3px;
}

/* Featured variant */
.related-card--featured {
  flex-direction: column; gap: 0.75rem;
  align-items: flex-start;
  padding: 1.25rem 1.25rem 1.25rem 1.125rem;
}

.related-card--featured .related-card-icon {
  width: 44px; height: 44px;
  background: #eef3fb;
}

.related-card--featured .related-card-arrow {
  position: absolute; top: 1.125rem; right: 1.125rem;
}

/* Icon */
.related-card-icon {
  flex-shrink: 0; width: 38px; height: 38px;
  background: #f0f4fb; border-radius: 0.5rem;
  display: flex; align-items: center; justify-content: center;
  color: #002868; transition: background 180ms ease;
}

.related-card-icon--sm { width: 34px; height: 34px; }
.related-card:hover .related-card-icon { background: #dce6f7; }

/* Body */
.related-card-body { flex: 1; min-width: 0; }

.related-card-tag {
  display: inline-block; font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: #00875A; margin-bottom: 0.3rem;
}

.related-card-body h3 {
  font-size: 0.9rem; font-weight: 700;
  color: #002868; line-height: 1.3; margin-bottom: 0.35rem;
}

.related-card-body p {
  font-size: 0.78rem; color: #4a5568;
  line-height: 1.55; max-width: 100%;
}

/* Arrow */
.related-card:not(.related-card--featured) .related-card-arrow {
  flex-shrink: 0; color: #cbd5e0; align-self: center;
  transition: color 180ms ease, transform 180ms ease;
}

.related-card:hover .related-card-arrow {
  color: #002868; transform: translateX(3px);
}

/* Footer CTA */
.related-footer { display: flex; justify-content: center; padding-top: 0.5rem; }

.related-view-all {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: #002868; color: #ffffff;
  font-size: 0.875rem; font-weight: 600;
  padding: 0.7rem 1.5rem; border-radius: 0.5rem;
  text-decoration: none;
  transition: background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.related-view-all:hover {
  background: #001a50;
  box-shadow: 0 4px 14px rgba(0,40,104,0.25);
  transform: translateY(-1px);
}

.related-view-all svg { transition: transform 180ms ease; }
.related-view-all:hover svg { transform: translateX(3px); }

/* Responsive */
@media (max-width: 640px) {
  .related-primary-grid,
  .related-grid { grid-template-columns: 1fr; }

  .related-card--featured {
    flex-direction: row; align-items: flex-start; gap: 0.85rem;
  }

  .related-card--featured .related-card-icon { width: 38px; height: 38px; }

  .related-card--featured .related-card-arrow {
    position: static; align-self: center; margin-left: auto; flex-shrink: 0;
  }
}

/* ─── Transparency Section ─── */
.arc-transparency-section {
  background: #002868;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 4vw, 2rem);
  font-family: 'Inter', 'Segoe UI', sans-serif;
}

.arc-transparency-inner {
  max-width: 1100px;
  margin-inline: auto;
  display: flex;
  align-items: flex-start;
  gap: 2rem;
}

/* Logo Badge */
.arc-trans-logo-wrap { flex-shrink: 0; }

.arc-trans-logo {
  width: 72px; height: 72px;
  background: #BF0A30;
  border-radius: 0.75rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.arc-trans-initials {
  color: #ffffff;
  font-size: 0.85rem; font-weight: 900;
  text-align: center; line-height: 1.2;
  letter-spacing: 0.04em;
}

/* Content */
.arc-trans-content { flex: 1; min-width: 0; }

.arc-trans-title {
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 800; color: #ffffff;
  margin-bottom: 0.75rem; line-height: 1.2;
}

.arc-trans-text {
  font-size: 0.9rem; color: rgba(255,255,255,0.82);
  line-height: 1.75; max-width: 72ch;
  margin-bottom: 1.25rem;
}

.arc-trans-text strong { color: #ffffff; font-weight: 700; }

/* Badges */
.arc-trans-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }

.arc-trans-badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #ffffff;
  font-size: 0.72rem; font-weight: 600;
  padding: 0.28rem 0.75rem; border-radius: 9999px;
  white-space: nowrap;
}

.arc-trans-chk { color: #4ade80; font-size: 0.68rem; }

/* Gov Links */
.arc-trans-govlinks { border-top: 1px solid rgba(255,255,255,0.15); padding-top: 1.25rem; }

.arc-trans-govlinks-title {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 0.85rem;
}

.arc-trans-govlinks-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.arc-trans-govlink {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.75);
  font-size: 0.73rem; font-weight: 500;
  padding: 0.3rem 0.75rem; border-radius: 0.375rem;
  text-decoration: none;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.arc-trans-govlink:hover {
  background: rgba(255,255,255,0.15);
  color: #ffffff;
  border-color: rgba(255,255,255,0.35);
}

.arc-trans-govlink:focus-visible {
  outline: 2px solid rgba(255,255,255,0.6);
  outline-offset: 2px;
}

/* ─── Legal Disclaimer Section ─── */
.arc-disclaimer-section {
  background: #f7f8fa;
  border-top: 3px solid #e2e8f0;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 4vw, 2rem);
  font-family: 'Inter', 'Segoe UI', sans-serif;
}

.arc-disclaimer-inner { max-width: 900px; margin-inline: auto; }

.arc-disclaimer-header {
  display: flex; align-items: center; gap: 0.65rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #e2e8f0;
}

.arc-disclaimer-icon { color: #BF0A30; flex-shrink: 0; }

.arc-disclaimer-title {
  font-size: 1.15rem; font-weight: 800;
  color: #002868; line-height: 1.2;
}

/* Disclaimer blocks */
.arc-disclaimer-body { display: flex; flex-direction: column; gap: 1.25rem; }

.arc-disclaimer-block {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
}

.arc-disclaimer-block h3 {
  font-size: 0.78rem; font-weight: 700;
  color: #002868; text-transform: uppercase;
  letter-spacing: 0.05em; margin-bottom: 0.5rem;
}

.arc-disclaimer-block p {
  font-size: 0.8rem; color: #4a5568;
  line-height: 1.75; max-width: none;
}

.arc-disclaimer-block p strong { color: #1a202c; font-weight: 700; }

/* Footer */
.arc-disclaimer-footer {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #e2e8f0;
  display: flex; flex-direction: column; gap: 0.3rem;
}

.arc-disclaimer-footer p {
  font-size: 0.7rem; color: #9ca3af;
  line-height: 1.5; max-width: none;
}

/* Responsive */
@media (max-width: 640px) {
  .arc-transparency-inner { flex-direction: column; gap: 1.25rem; }
  .arc-trans-logo { width: 56px; height: 56px; }
  .arc-trans-initials { font-size: 0.75rem; }
  .arc-trans-badges { gap: 0.35rem; }
  .arc-trans-badge { font-size: 0.68rem; padding: 0.25rem 0.6rem; }
  .arc-trans-govlinks-grid { gap: 0.35rem; }
  .arc-trans-govlink { font-size: 0.68rem; }
  .arc-disclaimer-block { padding: 0.875rem 1rem; }
}


.bt,
.cat-card,
.role-card,
.ind-card,
.bracket-btn {
  color: var(--g900, #0f172a);
}

/* ── INNER LABELS: always inherit from parent card ── */
.bt .bl, .bt .bs,
.cat-card .cl, .cat-card .cr,
.role-card .rl, .role-card .rm,
.ind-card .il, .ind-card .ir,
.bracket-btn .bv, .bracket-btn .bl {
  color: inherit !important;
}

/* ── HOVER STATE: navy text on light blue background ── */
.bt:hover,
.cat-card:hover,
.role-card:hover,
.ind-card:hover,
.bracket-btn:hover {
  color: var(--navy, #002868) !important;
}

/* ── ACTIVE / SELECTED STATE: always white text ── */
.bt.active, .bt.on,
.cat-card.on,
.role-card.on,
.ind-card.on,
.bracket-btn.on {
  color: #fff !important;
}

/* ── ALSO FIX: opacity on .cr / .ir / .rm / .bs 
     Stays 65% in default & selected, 
     but goes to 80% on hover for readability ── */
.bt:hover .bs,
.cat-card:hover .cr,
.role-card:hover .rm,
.ind-card:hover .ir {
  opacity: 0.85 !important;
}

/* ── ALSO FIX: btype-grid (.bt) for CLV calculator ── */
.bt.active .bs {
  color: rgba(255,255,255,0.65) !important;
  opacity: 1 !important;
}