/* ── Hero ── */
  /* ── Recurring Giving — page-specific styles ── */

  .tab-nav {
    display: flex; background: var(--white);
    border-bottom: 2px solid var(--line);
    position: sticky; top: 72px; z-index: 100;
    box-shadow: 0 2px 10px rgba(15,23,42,.05);
  }
  .tab-btn {
    flex: 1; padding: 17px 8px;
    font-family: var(--font-body); font-size: .88rem; font-weight: 600;
    border: none; background: transparent; cursor: pointer;
    color: var(--charcoal-soft); border-bottom: 3px solid transparent;
    transition: all .2s;
    display: flex; align-items: center; justify-content: center; gap: 7px;
  }
  .tab-btn:hover  { color: var(--charcoal); background: var(--oatmeal); }
  .tab-btn.active { color: var(--forest); border-bottom-color: var(--forest); background: var(--white); }
  @media(max-width:600px){ .tab-btn { font-size:.78rem; padding:12px 4px; gap:3px; } }

  .rg-shell { background: var(--oatmeal); padding: 44px 0 80px; min-height: 60vh; }
  .tab-panel { display: none; }
  .tab-panel.active { display: block; }

  /* Wizard */
  .wizard-wrap { max-width: 740px; margin: 0 auto; }

  .info-grid {
    display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
    gap: 16px; margin-bottom: 36px;
  }
  .info-tile {
    background: var(--white); border: 1px solid var(--line);
    border-radius: 12px; padding: 22px; text-align: center;
    transition: transform .2s, box-shadow .2s;
  }
  .info-tile:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(15,23,42,.08); }
  .info-tile .it-icon { font-size: 1.8rem; margin-bottom: 10px; display: block; }
  .info-tile h4 { font-family: var(--font-head); font-size: 1rem; color: var(--forest); margin: 0 0 5px; }
  .info-tile p  { font-size: .8rem; color: var(--charcoal-soft); margin: 0; line-height: 1.55; max-width: none; }

  .step-bar { display: flex; align-items: center; margin-bottom: 28px; }
  .step-node {
    display: flex; align-items: center; gap: 8px;
    font-size: .78rem; font-weight: 600; color: var(--charcoal-soft);
    flex: 1; position: relative;
  }
  .step-node::after {
    content: ''; flex: 1; height: 2px;
    background: var(--line); margin: 0 6px; transition: background .3s;
  }
  .step-node:last-child::after { display: none; }
  .step-dot {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--oatmeal-deep); border: 2px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; flex-shrink: 0; transition: all .25s;
  }
  .step-node.active .step-dot { background: var(--forest); border-color: var(--forest); color: var(--oatmeal); }
  .step-node.done   .step-dot { background: var(--gold); border-color: var(--accent); color: var(--premium); }
  .step-node.done::after { background: var(--gold); }
  .step-node.active { color: var(--forest); }
  .step-label { display: none; }
  @media(min-width:560px){ .step-label { display: block; } }

  .wiz-card {
    background: var(--white); border: 1px solid var(--line);
    border-radius: 14px; padding: 36px;
    box-shadow: 0 4px 20px rgba(15,23,42,.06); margin-bottom: 16px;
  }
  .wiz-card h2 { font-family: var(--font-head); font-size: 1.5rem; color: var(--forest); margin: 0 0 5px; }
  .wiz-card .sub { font-size:.87rem; color:var(--charcoal-soft); margin:0 0 28px; line-height:1.6; max-width:none; }

  .fld { margin-bottom: 22px; }
  .fld label {
    display: block; font-size: .78rem; font-weight: 700;
    color: var(--charcoal); text-transform: uppercase;
    letter-spacing: .05em; margin-bottom: 7px;
  }
  .fld input,.fld select,.fld textarea {
    width: 100%; padding: 12px 15px;
    border: 1.5px solid var(--line); border-radius: var(--radius);
    font-family: var(--font-body); font-size: .95rem;
    background: var(--oatmeal); color: var(--charcoal);
    box-sizing: border-box; transition: border-color .15s,background .15s;
  }
  .fld input:focus,.fld select:focus,.fld textarea:focus {
    outline: none; border-color: var(--forest); background: var(--white);
  }
  .fld .hint { font-size: .75rem; color: var(--charcoal-soft); margin-top: 5px; }
  .fld-prefix { position: relative; }
  .fld-prefix span { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--charcoal-soft); font-weight:600; pointer-events:none; }
  .fld-prefix input { padding-left: 28px; }
  .fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  @media(max-width:560px){ .fld-row { grid-template-columns: 1fr; } }

  .freq-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
  @media(max-width:480px){ .freq-grid { grid-template-columns: repeat(2,1fr); } }
  .freq-card {
    border: 1.5px solid var(--line); border-radius: var(--radius);
    padding: 16px 10px; text-align: center; cursor: pointer;
    background: var(--white); transition: all .15s;
  }
  .freq-card:hover { border-color: var(--gold); transform: translateY(-1px); }
  .freq-card.selected { border-color: var(--forest); background: var(--forest); color: var(--oatmeal); }
  .freq-card .fc-label { font-weight: 700; font-size: .92rem; }
  .freq-card .fc-sub   { font-size: .72rem; color: var(--charcoal-soft); margin-top: 3px; }
  .freq-card.selected .fc-sub { color: rgba(247,242,234,.65); }

  .amount-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:8px; margin-bottom:14px; }
  .amt-tile {
    border: 1.5px solid var(--line); border-radius: var(--radius);
    padding: 13px 8px; text-align: center; cursor: pointer;
    font-weight: 700; font-size: 1rem; background: var(--white); transition: all .15s;
  }
  .amt-tile:hover { border-color: var(--gold); }
  .amt-tile.selected { border-color: var(--gold); background: var(--gold); color: var(--premium); }

  .chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
  .chip {
    padding: 8px 18px; border: 1.5px solid var(--line); border-radius: 100px;
    font-size: .85rem; font-family: var(--font-body); cursor: pointer;
    background: var(--oatmeal); color: var(--charcoal); transition: all .15s; user-select: none;
  }
  .chip:hover { border-color: var(--gold); color: var(--premium); }
  .chip.selected { border-color: var(--forest); background: var(--forest); color: var(--oatmeal); font-weight: 600; }
  .chip.multi.selected { border-color: var(--gold); background: #fdf8ee; color: var(--premium); }

  .cause-alloc-row { display:flex; align-items:center; gap:14px; padding:11px 0; border-bottom:1px solid var(--line); }
  .cause-alloc-row:last-child { border-bottom: none; }
  .cause-icon-sm { font-size: 1.1rem; flex-shrink: 0; }
  .cause-name { flex:1; font-size:.88rem; font-weight:600; color:var(--charcoal); }
  .cause-pct  { font-size:.8rem; color:var(--charcoal-soft); min-width:36px; text-align:right; font-weight:600; }
  .alloc-bar-wrap { flex:2; height:6px; background:var(--oatmeal-deep); border-radius:100px; overflow:hidden; }
  .alloc-bar-fill { height:100%; background:linear-gradient(90deg,var(--gold),var(--accent)); border-radius:100px; transition:width .4s; }

  .sub-summary { background:var(--oatmeal-deep); border-radius:12px; border:1px solid var(--line); padding:20px 22px; margin-bottom:22px; }
  .sub-summary h4 { font-family:var(--font-head); font-size:1rem; color:var(--forest); margin:0 0 14px; }
  .sub-row { display:flex; justify-content:space-between; font-size:.85rem; padding:6px 0; border-bottom:1px solid rgba(43,39,36,.08); }
  .sub-row:last-of-type { border-bottom: none; }
  .sub-row .sk { color:var(--charcoal-soft); } .sub-row .sv { font-weight:600; color:var(--charcoal); }
  .sub-big { font-family:var(--font-head); font-size:2.2rem; color:var(--forest); margin:8px 0 2px; line-height:1; }
  .sub-freq-label { font-size:.8rem; color:var(--charcoal-soft); margin-bottom:16px; }

  .payment-method-tabs { display:flex; border:1.5px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-bottom:20px; }
  .pmt-tab { flex:1; padding:11px; text-align:center; font-size:.84rem; font-weight:600; cursor:pointer; background:var(--oatmeal); color:var(--charcoal-soft); border:none; font-family:var(--font-body); transition:all .15s; }
  .pmt-tab.active { background:var(--forest); color:var(--oatmeal); }

  #paypal-buttons-container { margin:18px 0 8px; min-height:50px; }

  .api-notice { background:#dbeafe; border:1px solid #93c5fd; border-radius:var(--radius); border-left:4px solid #3b82f6; padding:14px 18px; font-size:.83rem; color:#1e40af; line-height:1.6; margin-bottom:18px; }
  .api-notice strong { color:#1e3a8a; }

  .wiz-nav { display:flex; gap:12px; margin-top:24px; flex-wrap:wrap; }
  .btn-next { background:var(--forest); color:var(--oatmeal); border:none; padding:12px 28px; border-radius:var(--radius); font-family:var(--font-body); font-weight:700; font-size:.95rem; cursor:pointer; transition:all .15s; }
  .btn-next:hover { background:var(--premium); transform:translateY(-1px); box-shadow:0 4px 14px rgba(15,23,42,.15); }
  .btn-next:disabled { opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }
  .btn-back { background:transparent; border:1.5px solid var(--line); color:var(--charcoal-soft); padding:12px 20px; border-radius:var(--radius); font-family:var(--font-body); font-size:.9rem; cursor:pointer; transition:all .15s; }
  .btn-back:hover { border-color:var(--charcoal-soft); color:var(--charcoal); }

  .success-card { background:var(--white); border:1px solid var(--line); border-radius:16px; padding:56px 40px; text-align:center; box-shadow:0 8px 40px rgba(15,23,42,.08); }
  .success-icon { font-size:3.5rem; margin-bottom:18px; display:block; }
  .success-card h2 { font-family:var(--font-head); font-size:1.8rem; color:var(--forest); margin:0 0 12px; }
  .success-card p { font-size:.9rem; color:var(--charcoal-soft); max-width:480px; margin:0 auto 24px; line-height:1.7; }
  .sub-id-badge { display:inline-block; background:var(--oatmeal-deep); border:1px solid var(--line); border-radius:var(--radius); padding:10px 20px; font-size:.85rem; font-weight:700; color:var(--charcoal); margin-bottom:28px; font-family:monospace; letter-spacing:.06em; }

  /* Dashboard */
  .dashboard-wrap { max-width:800px; margin:0 auto; }
  .lookup-card { background:var(--white); border:1px solid var(--line); border-radius:14px; padding:36px; box-shadow:0 4px 20px rgba(15,23,42,.06); margin-bottom:24px; }
  .lookup-card h2 { font-family:var(--font-head); font-size:1.4rem; color:var(--forest); margin:0 0 6px; }
  .sub-card { background:var(--white); border:1px solid var(--line); border-radius:12px; padding:24px; margin-bottom:16px; box-shadow:0 2px 10px rgba(15,23,42,.05); transition:box-shadow .2s; }
  .sub-card:hover { box-shadow:0 6px 20px rgba(15,23,42,.08); }
  .sub-card-top { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:14px; }
  .sub-amount-big { font-family:var(--font-head); font-size:1.8rem; color:var(--forest); line-height:1; }
  .sub-freq-sm { font-size:.78rem; color:var(--charcoal-soft); margin-top:3px; }
  .sub-status { display:inline-flex; align-items:center; gap:5px; padding:5px 13px; border-radius:100px; font-size:.73rem; font-weight:700; }
  .sub-status.active    { background:#d1fae5; color:#065f46; }
  .sub-status.paused    { background:#fef3c7; color:#92400e; }
  .sub-status.cancelled { background:#fee2e2; color:#991b1b; }
  .sub-card-meta { font-size:.8rem; color:var(--charcoal-soft); margin:12px 0; line-height:1.6; }
  .sub-card-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
  .btn-sm { padding:7px 16px; border-radius:var(--radius); font-size:.8rem; font-family:var(--font-body); font-weight:600; cursor:pointer; border:none; transition:all .15s; }
  .btn-sm.pause   { background:var(--oatmeal-deep); color:var(--charcoal); border:1px solid var(--line); }
  .btn-sm.pause:hover   { background:var(--gold); color:var(--premium); }
  .btn-sm.cancel  { background:#fee2e2; color:#991b1b; border:1px solid #fca5a5; }
  .btn-sm.cancel:hover  { background:#fca5a5; }
  .btn-sm.edit    { background:var(--forest); color:var(--oatmeal); }
  .btn-sm.edit:hover    { background:var(--premium); }
  .btn-sm.summary { background:var(--oatmeal-deep); color:var(--charcoal); border:1px solid var(--line); }
  .btn-sm.summary:hover { border-color:var(--forest); color:var(--forest); }

  .code-inputs { display:flex; gap:9px; justify-content:center; margin:22px 0; }
  .code-digit { width:46px; height:56px; border:2px solid var(--line); border-radius:var(--radius); font-size:1.5rem; font-weight:700; text-align:center; font-family:var(--font-head); color:var(--forest); background:var(--oatmeal); transition:border-color .15s; }
  .code-digit:focus { outline:none; border-color:var(--forest); background:var(--white); }

  .status-banner { padding:13px 18px; border-radius:var(--radius); font-size:.85rem; margin-bottom:16px; display:none; line-height:1.5; }
  .status-banner.success { background:#d1fae5; color:#065f46; border:1px solid #6ee7b7; display:block; }
  .status-banner.error   { background:#fee2e2; color:#991b1b; border:1px solid #fca5a5; display:block; }
  .status-banner.info    { background:#dbeafe; color:#1e40af; border:1px solid #93c5fd; display:block; }

  /* Corporate */
  .corp-wrap { max-width:840px; margin:0 auto; }
  .corp-section-tabs { display:flex; gap:8px; margin-bottom:24px; flex-wrap:wrap; }
  .corp-stab { padding:9px 20px; border:1.5px solid var(--line); border-radius:100px; font-size:.83rem; font-weight:600; cursor:pointer; background:var(--white); color:var(--charcoal); transition:all .15s; }
  .corp-stab.active { background:var(--forest); border-color:var(--forest); color:var(--oatmeal); }
  .corp-stab:hover:not(.active) { border-color:var(--gold); color:var(--premium); }

  .matching-toggle { display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); }
  .toggle-label { font-size:.9rem; color:var(--charcoal); }
  .toggle-label .tl-sub { font-size:.75rem; color:var(--charcoal-soft); display:block; margin-top:2px; }
  .tog-switch { position:relative; width:42px; height:23px; flex-shrink:0; }
  .tog-switch input { opacity:0; width:0; height:0; }
  .tog-track { position:absolute; inset:0; background:var(--oatmeal-deep); border-radius:23px; border:1.5px solid var(--line); cursor:pointer; transition:.2s; }
  .tog-track::before { content:''; position:absolute; left:3px; top:2px; width:15px; height:15px; border-radius:50%; background:var(--charcoal-soft); transition:.2s; }
  .tog-switch input:checked + .tog-track { background:var(--forest); border-color:var(--forest); }
  .tog-switch input:checked + .tog-track::before { transform:translateX(19px); background:var(--white); }

  .employee-table { width:100%; border-collapse:collapse; font-size:.84rem; }
  .employee-table th { background:var(--oatmeal-deep); padding:10px 14px; text-align:left; color:var(--charcoal-soft); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid var(--line); font-weight:700; }
  .employee-table td { padding:11px 14px; border-bottom:1px solid var(--line); color:var(--charcoal); }
  .employee-table tr:last-child td { border-bottom:none; }
  .employee-table tr:hover td { background:var(--oatmeal); }
  .emp-status { display:inline-block; padding:2px 9px; border-radius:100px; font-size:.7rem; font-weight:700; }
  .emp-status.active  { background:#d1fae5; color:#065f46; }
  .emp-status.pending { background:#fef3c7; color:#92400e; }

  .upload-zone { border:2px dashed var(--line); border-radius:var(--radius); padding:32px; text-align:center; background:var(--oatmeal); cursor:pointer; transition:border-color .15s,background .15s; }
  .upload-zone:hover { border-color:var(--gold); background:#fdf8ee; }
  .upload-zone .uz-icon { font-size:2rem; margin-bottom:10px; display:block; }
  .upload-zone p { font-size:.83rem; color:var(--charcoal-soft); margin:4px 0 0; max-width:none; }

  .spinner-wrap { text-align:center; padding:28px; }
  .spinner { width:32px; height:32px; border:3px solid var(--line); border-top-color:var(--forest); border-radius:50%; animation:spin .8s linear infinite; display:inline-block; }
  @keyframes spin { to { transform:rotate(360deg); } }

  .hidden { display: none !important; }