:root {
      --orange: #E67E22;
      --orange-dark: #D35400;
      --orange-light: #FDF2E9;
      --gold: #D4A017;
      --cream: #FDF8F0;
      --cream-dark: #F5EDE0;
      --navy: #1A1A2E;
      --navy-deep: #0F1623;
      --text: #2C2C2C;
      --muted: #6B6B6B;
      --border: #E8DFD0;
      --white: #FFFFFF;
      --success: #1E7A4A;
      --danger: #C0392B;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      background: #fdf8f0;
      color: var(--text);
      line-height: 1.55;
      font-size: 15px;
	
    }
    @media print {
      .no-print { display: none !important; }
      body { background: white; }
      .card { box-shadow: none; border: 1px solid #ddd; }
    }
    .print-bar {
      background: white;
      border-bottom: 1px solid var(--border);
      padding: 10px 20px;
      display: flex;
      justify-content: flex-start;
    }
    .print-btn {
      background: white;
      border: 1px solid #ddd;
      color: var(--navy);
      font-size: 13px;
      font-weight: 500;
      padding: 8px 16px;
      border-radius: 6px;
      cursor: pointer;
      font-family: inherit;
     /* transition: background 0.15s;*/
		margin-top: -30px;
    }
    .print-btn:hover {
    background: black !important;
    }
    .site-header {
      background: var(--white);
      border-bottom: 1px solid var(--border);
      padding: 14px 0;
      color: var(--navy);
    }
    .header-inner {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .logo-wrap {
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
    }
    .logo-wrap img { height: 44px; width: auto; border-radius: 4px; }
    .logo-text {
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 700;
      font-size: 20px;
      color: var(--navy);
      letter-spacing: -0.3px;
    }
    .header-cta {
      background: var(--orange);
      color: white;
      font-weight: 600;
      font-size: 13px;
      padding: 10px 18px;
      border-radius: 6px;
      text-decoration: none;
      transition: background 0.2s;
    }
    .header-cta:hover { background: var(--orange-dark); }
    .breadcrumb {
      background: var(--navy);
      color: #ccc;
      font-size: 13px;
      padding: 10px 0;
    }
    .breadcrumb-inner {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 20px;
    }
    .breadcrumb a { color: var(--orange); text-decoration: none; }
    .breadcrumb span { color: #999; margin: 0 6px; }
    .hero {
    /*  background: linear-gradient(180deg, #FFF9F0 0%, var(--cream) 100%); */
      border-bottom: 3px solid var(--orange);
      padding: 36px 20px 32px;
      text-align: center;
    }
    .hero-logo { height: 56px !important; margin-bottom: 10px; border-radius: 6px; }
    .hero-tags {
      font-size: 12px;
      color: var(--muted);
      letter-spacing: 0.5px;
      margin-bottom: 8px;
    }
    .hero-tags span { color: var(--orange); margin: 0 4px; }
    .hero h1 {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: clamp(26px, 4vw, 36px);
      font-weight: 700;
      color: var(--navy);
      line-height: 1.25;
      max-width: 720px;
      margin: 0 auto 12px;
    }
    .hero h1 em { font-style: normal; color: var(--orange); }
    .hero p {
      max-width: 620px;
      margin: 0 auto;
      color: var(--muted);
      font-size: 15px;
    }
    .container {
      max-width: 1100px;
      margin: 0 auto;
  
    }
    .card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 10px;
      margin-bottom: 24px;
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      margin-top:30px;
    }
    .card-header {
      background: #f5ede0;
      padding: 1px 20px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .card-header h2 {
      font-size: 16px;
      font-weight: 600;
      color: var(--navy);
    }
    .card-header .badge {
      font-size: 11px;
      font-weight: 600;
      background: var(--orange-light);
      color: var(--orange-dark);
      padding: 3px 10px;
      border-radius: 20px;
    }
    .card-body { padding: 20px; }
    .section-label {
      font-size: 13px;
      font-weight: 600;
      color: var(--navy);
      text-transform: uppercase;
      letter-spacing: 0.4px;
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .section-label .num {
      width: 22px;
      height: 22px;
      background: var(--orange);
      color: white;
      border-radius: 50%;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
    }
    .grid-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    @media (max-width: 640px) {
      .grid-2 { grid-template-columns: 1fr; }
    }
    .field { margin-bottom: 4px; }
    .field label {
      display: block;
      font-size: 13px;
      font-weight: 500;
      color: var(--text);
      margin-bottom: 6px;
    }
    .field input {
      width: 100%;
      padding: 11px 14px;
      border: 1px solid var(--border);
      border-radius: 7px;
      font-size: 15px;
      font-family: inherit;
      color: var(--navy);
      background: #FFFEFB;
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .field input:focus {
      outline: none;
      border-color: var(--orange);
      box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.15);
    }
    .field .hint {
      font-size: 12px;
      color: var(--muted);
      margin-top: 4px;
    }
    .amount-words {
      font-size: 12px;
      color: var(--orange-dark);
      font-weight: 500;
      margin-top: 5px;
      min-height: 18px;
      font-style: italic;
    }
    .info-box {
      background: var(--cream);
      border: 1px solid var(--border);
      border-radius: 7px;
      padding: 10px 14px;
      font-size: 13px;
      color: var(--muted);
      margin-top: 12px;
    }
    .info-box strong { color: var(--navy); }
    .btn-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 20px;
      padding-top: 16px;
      border-top: 1px solid var(--border);
    }
    .btn-primary {
      background: var(--orange);
      color: white;
      border: none;
      font-weight: 600;
      font-size: 14px;
      padding: 12px 24px;
      border-radius: 7px;
      cursor: pointer;
      transition: background 0.2s;
      font-family: inherit;
    }
   .btn-primary:hover { background: var(--orange-dark); }
    .btn-secondary {
      background: white;
      color: black;
      border: 1px solid var(--border);
      font-weight: 500;
      font-size: 14px;
      padding: 12px 18px;
      border-radius: 7px;
      cursor: pointer;
      transition: background 0.2s;
      font-family: inherit;
    } 
     .btn-secondary:hover { background: var(--orange-dark); }
    .btn-text {
      background: none;
      border: none;
      color: black;
      font-size: 13px;
      cursor: pointer;
      padding: 12px 8px;
      font-family: inherit;
    }
    .btn-text:hover { color: var(--navy); }
    #resultsSection { display: none; }
    #resultsSection.visible { display: block; }
    .summary-banner {
      background: var(--navy);
      color: white;
      border-radius: 10px;
      padding: 18px 22px;
      margin-bottom: 20px;
    }
    .summary-banner .label {
      font-size: 12px;
      color: #A0A0B0;
      font-weight: 500;
      margin-bottom: 4px;
    }
    .summary-banner .insight {
      font-size: 16px;
      font-weight: 600;
      line-height: 1.4;
    }
    .summary-banner .insight span { color: #F5B041; }
    .results-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-bottom: 20px;
    }
    @media (max-width: 720px) {
      .results-grid { grid-template-columns: 1fr; }
    }
    .result-card {
      border-radius: 10px;
      overflow: hidden;
      border: 1px solid var(--border);
      background: white;
    }
    .result-card.fr { border-color: #F5C6C0; }
    .result-card.wa { border-color: #B8E0C8; }
    .result-card .rc-header {
      padding: 12px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-weight: 600;
      font-size: 14px;
    }
    .result-card.fr .rc-header { background: #FDEDEC; color: var(--danger); }
    .result-card.wa .rc-header { background: #E8F8F0; color: var(--success); }
    .result-card .rc-badge {
      font-size: 10px;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 12px;
    }
    .result-card.fr .rc-badge { background: #FADBD8; color: var(--danger); }
    .result-card.wa .rc-badge { background: #D5F5E3; color: var(--success); }
    .result-card .rc-body { padding: 16px; }
    .metric {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 10px;
    }
    .metric .lbl { font-size: 13px; color: var(--muted); }
    .metric .val { font-size: 18px; font-weight: 700; color: var(--navy); }
    .metric .val.highlight-fr { color: var(--danger); }
    .metric .val.highlight-wa { color: var(--success); }
    .metric-note {
      font-size: 12px;
      color: var(--muted);
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid var(--border);
      line-height: 1.45;
    }
    .table-wrap { overflow-x: auto; }
    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13.5px;
    }
    th {
      text-align: left;
      padding: 11px 16px;
      background: var(--cream-dark);
      color: var(--muted);
      font-weight: 600;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.3px;
      border-bottom: 1px solid var(--border);
    }
    th:not(:first-child) { text-align: right; }
    td {
      padding: 12px 16px;
      border-bottom: 1px solid var(--border);
      color: var(--text);
    }
    td:not(:first-child) { text-align: right; font-weight: 500; }
    tr:last-child td { border-bottom: none; }
    .diff-cell { color: var(--orange-dark); font-weight: 600; }
    .step-block {
      border: 1px solid var(--border);
      border-radius: 8px;
      margin-bottom: 16px;
      overflow: hidden;
    }
    .step-block .sb-header {
      padding: 12px 16px;
      font-weight: 600;
      font-size: 14px;
    }
    .step-block.fr .sb-header { background: #FDEDEC; color: var(--danger); }
    .step-block.wa .sb-header { background: #E8F8F0; color: var(--success); }
    .step-block .sb-body { padding: 16px; font-size: 13.5px; }
    .step-block p { margin-bottom: 12px; color: var(--text); }
    .calc-box {
      background: var(--cream);
      border: 1px solid var(--border);
      border-radius: 7px;
      padding: 12px 14px;
      font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
      font-size: 12.5px;
      line-height: 1.7;
      margin: 10px 0;
    }
    .calc-box .result-line {
      border-top: 1px solid var(--border);
      padding-top: 6px;
      margin-top: 4px;
      font-weight: 600;
    }
    .calc-box .result-line.fr { color: var(--danger); }
    .calc-box .result-line.wa { color: var(--success); }
    .abc-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin: 12px 0;
    }
    @media (max-width: 600px) {
      .abc-grid { grid-template-columns: 1fr; }
    }
    .abc-item {
      background: var(--cream);
      border: 1px solid var(--border);
      border-radius: 7px;
      padding: 10px 12px;
    }
    .abc-item .abc-label {
      font-size: 11px;
      color: var(--muted);
      margin-bottom: 4px;
    }
    .abc-item .abc-val {
      font-size: 15px;
      font-weight: 700;
      color: var(--navy);
    }
    .abc-item .abc-sub {
      font-size: 11px;
      color: var(--muted);
      margin-top: 2px;
    }
    .why-box {
      background: #E8F8F0;
      border: 1px solid #B8E0C8;
      border-radius: 7px;
      padding: 12px 14px;
      font-size: 13px;
      color: #1E5C38;
      margin-top: 12px;
    }
    .formula-box {
      background: var(--cream);
      border-left: 4px solid var(--orange);
      border-radius: 0 7px 7px 0;
      padding: 14px 16px;
      margin-bottom: 14px;
    }
    .formula-box h4 {
      font-size: 14px;
      font-weight: 600;
      color: var(--navy);
      margin-bottom: 6px;
    }
    .formula-box p {
      font-size: 13px;
      color: var(--muted);
      margin-bottom: 8px;
    }
    .formula-box code {
      display: block;
      font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
      font-size: 12px;
      background: white;
      border: 1px solid var(--border);
      border-radius: 5px;
      padding: 8px 10px;
      color: var(--navy);
      line-height: 1.6;
    }
    .edu-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    @media (max-width: 640px) {
      .edu-grid { grid-template-columns: 1fr; }
    }
    .edu-grid p {
      font-size: 13.5px;
      color: var(--muted);
      margin-bottom: 10px;
    }
    .edu-grid strong { color: var(--navy); display: block; margin-bottom: 2px; }
    .tip-box {
      background: #FEF5E7;
      border: 1px solid #F5CBA7;
      border-radius: 7px;
      padding: 14px 16px;
      font-size: 13.5px;
      color: #7D4E00;
      margin-top: 16px;
    }
    .disclaimer {
      font-size: 12px;
      color: var(--muted);
      line-height: 1.6;
      border-top: 1px solid var(--border);
      padding-top: 20px;
      margin-top: 8px;
    }
    .disclaimer a {
      color: var(--orange);
      text-decoration: none;
    }
    .disclaimer a:hover { text-decoration: underline; }

    /* Footer matching ESOP tool style */
    .cta-footer {
      background: linear-gradient(135deg, #0F1623 0%, #1A2332 100%);
      color: white;
      margin-top: 20px;
      border-radius: 10px;
      overflow: hidden;
    }
    .cta-footer-inner {
      display: flex;
      align-items: center;
      gap: 24px;
      padding: 28px 32px;
      flex-wrap: wrap;
    }
    .cta-footer-logo {
      flex-shrink: 0;
    }
    .cta-footer-logo img {
      height: 64px;
      width: auto;
      border-radius: 6px;
    }
    .cta-footer-content {
      flex: 1;
      min-width: 220px;
    }
    .cta-footer-content h3 {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 6px;
      color: white;
    }
    .cta-footer-content h3 span {
      color: var(--gold);
    }
    .cta-footer-content p {
      font-size: 13px;
      color: #A0AAB8;
      line-height: 1.5;
      max-width: 380px;
    }
    .cta-footer-features {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
      margin-left: auto;
      align-items: center;
    }
    .cta-feature {
      text-align: center;
      font-size: 12px;
      color: #C0C8D4;
    }
    .cta-feature .check {
      color: #2ECC71;
      font-weight: 700;
      margin-right: 3px;
    }
    .cta-feature strong {
      display: block;
      color: white;
      font-size: 13px;
      margin-bottom: 2px;
    }
    .cta-btn {
      background: linear-gradient(135deg, #D4A017 0%, #E67E22 100%);
      color: #1A1A2E;
      font-weight: 700;
      font-size: 14px;
      padding: 12px 22px;
      border-radius: 8px;
      text-decoration: none;
      white-space: nowrap;
      transition: transform 0.15s, box-shadow 0.15s;
      box-shadow: 0 2px 8px rgba(212, 160, 23, 0.3);
    }
    .cta-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(212, 160, 23, 0.4);
    }
    .site-footer {
      background: var(--navy-deep);
      color: #7A8494;
      text-align: center;
      padding: 16px 20px;
      font-size: 12px;
      margin-top: 30px;
    }
    .site-footer a { color: var(--orange); text-decoration: none; }
    @media (max-width: 768px) {
      .cta-footer-inner { flex-direction: column; text-align: center; }
      .cta-footer-features { margin-left: 0; justify-content: center; }
      .cta-footer-content p { max-width: 100%; }
    }