/* ==========================================================================
   HONEST LOAN HUB — design system
   Concept: "The Truth Box" — built from the actual federal Truth-in-Lending
   disclosure format (Reg Z / "Schumer box") every loan is legally required
   to show. Paper + ink, ruled ledgers instead of cards, rubber-stamp risk
   marks instead of colored dots. No illustrated hero — the disclosure box
   itself is the opening statement.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600;700;800;900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root{
  --paper:      #FAFAF6;
  --paper-2:    #F0EEE6;
  --ink:        #0B0B0C;
  --ink-soft:   #4A4A48;
  --ink-faint:  #85837C;
  --rule:       #0B0B0C;
  --rule-soft:  #CFCCC0;

  --stamp:      #1D3FD6;
  --stamp-tint: #E3E8FC;
  --redact:     #C6371F;
  --redact-tint:#F7DFD8;
  --verify:     #146B49;
  --verify-tint:#DCEAE1;

  --f-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --f-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --f-mono:    'JetBrains Mono', 'SF Mono', Consolas, monospace;

  --container: 1180px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--f-display); font-weight:800; text-transform:uppercase;
  line-height:0.96; margin:0 0 .4em; letter-spacing:.005em;
}
h1{ font-size:clamp(46px,7vw,92px); }
h2{ font-size:clamp(28px,4vw,44px); }
h3{ font-size:20px; font-weight:700; text-transform:none; font-family:var(--f-body); }
p{ margin:0 0 1em; color:var(--ink-soft); }
a{ color:inherit; }
img,svg{ display:block; max-width:100%; }
button{ font-family:inherit; }
::selection{ background:var(--stamp); color:var(--paper); }

.container{ max-width:var(--container); margin:0 auto; padding:0 28px; }

/* ---------- eyebrow ---------- */
.eyebrow{
  font-family:var(--f-mono); font-size:11.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--stamp);
  display:inline-flex; align-items:center; gap:10px; margin-bottom:16px;
  padding-bottom:6px; border-bottom:2px solid var(--ink);
}
.eyebrow::before{ content:"§"; font-size:14px; }

/* ---------- buttons (ink-stamp style) ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  font-family:var(--f-mono); font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:15px 26px; border-radius:2px; border:2px solid var(--ink);
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
}
.btn-stamp{ background:var(--ink); color:var(--paper); }
.btn-stamp:hover{ background:var(--stamp); border-color:var(--stamp); transform:translateY(-2px) rotate(-0.4deg); }
.btn-ghost{ background:transparent; color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--paper); }
.btn-invert{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.btn-invert:hover{ background:var(--stamp); border-color:var(--stamp); color:var(--paper); transform:translateY(-2px) rotate(-0.4deg); }
.btn-sm{ padding:10px 16px; font-size:11.5px; }

/* ---------- sidebar (fixed vertical nav — the spine) ---------- */
.sidebar{
  position:fixed; top:0; left:0; bottom:0; width:100%; z-index:50;
  background:var(--ink); color:var(--paper);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 20px; height:64px;
}
@media (min-width:960px){
  .sidebar{
    width:230px; height:100%; flex-direction:column; align-items:stretch; justify-content:flex-start;
    padding:0; border-right:3px solid var(--ink);
  }
}
.content-wrap{ padding-top:64px; }
@media (min-width:960px){ .content-wrap{ padding-top:0; margin-left:230px; } }

.sidebar-brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--paper); }
@media (min-width:960px){
  .sidebar-brand{ flex-direction:column; align-items:flex-start; gap:14px; padding:28px 22px 26px; border-bottom:1px solid #2A2A28; }
}
.sidebar-brand img{ width:38px; height:38px; flex-shrink:0; }
@media (min-width:960px){ .sidebar-brand img{ width:46px; height:46px; } }
.sidebar-brand .brand-word{ font-family:var(--f-display); font-weight:800; font-size:14px; letter-spacing:.01em; text-transform:uppercase; line-height:1.05; max-width:120px; }
@media (min-width:960px){ .sidebar-brand .brand-word{ font-size:18px; max-width:none; } }
.sidebar-brand .sub{ display:none; }
@media (min-width:960px){ .sidebar-brand .sub{ display:block; font-family:var(--f-mono); font-weight:500; font-size:9px; letter-spacing:.1em; color:var(--stamp); text-transform:uppercase; margin-top:4px; } }

.sidebar-nav{ display:none; }
@media (min-width:960px){
  .sidebar-nav{ display:flex; flex-direction:column; flex:1; padding:14px 0; overflow-y:auto; }
}
.sidebar-nav a{
  display:flex; align-items:baseline; gap:10px; text-decoration:none; color:#A8A8A3;
  font-family:var(--f-mono); font-size:12.5px; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
  padding:12px 22px; border-left:3px solid transparent;
}
.sidebar-nav a .idx{ font-size:10px; color:#5C5C58; }
.sidebar-nav a:hover{ color:var(--paper); background:#141413; }
.sidebar-nav a.is-active{ color:var(--paper); background:#141413; border-left-color:var(--stamp); }
.sidebar-nav a.is-active .idx{ color:var(--stamp); }

.sidebar-foot{ display:none; }
@media (min-width:960px){
  .sidebar-foot{ display:flex; flex-direction:column; gap:12px; padding:20px 22px 26px; border-top:1px solid #2A2A28; }
}
.sidebar-foot .phone{ font-family:var(--f-mono); font-size:12px; color:#A8A8A3; text-decoration:none; }
.sidebar-foot .phone:hover{ color:var(--paper); }

.mobile-cta{ display:flex; align-items:center; gap:10px; }
@media (min-width:960px){ .mobile-cta{ display:none; } }

.menu-toggle{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  width:36px; height:36px; border:1.5px solid var(--paper); border-radius:2px; background:none; cursor:pointer; flex-shrink:0;
}
@media (min-width:960px){ .menu-toggle{ display:none; } }
.menu-toggle span, .menu-toggle::before, .menu-toggle::after{ content:""; display:block; width:15px; height:1.5px; background:var(--paper); }

/* full-screen mobile nav overlay */
.mobile-nav{
  display:none; position:fixed; inset:0; z-index:60; background:var(--ink);
  flex-direction:column; padding:20px 24px 30px;
}
.mobile-nav.is-open{ display:flex; }
.mobile-nav-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.mobile-nav-close{
  width:36px; height:36px; border:1.5px solid var(--paper); border-radius:2px; background:none; color:var(--paper);
  font-family:var(--f-mono); font-size:16px; cursor:pointer;
}
.mobile-nav a{
  padding:16px 2px; text-decoration:none; color:var(--paper); font-family:var(--f-display); font-weight:800;
  font-size:26px; text-transform:uppercase; border-bottom:1px solid #2A2A28;
}
@media (min-width:960px){ .mobile-nav{ display:none !important; } }

/* ---------- hero (no illustration — the Truth Box IS the hero) ---------- */
.hero{ padding:64px 0 80px; border-bottom:3px solid var(--ink); }
.hero-grid{ display:grid; grid-template-columns:1fr; gap:48px; }
@media (min-width:980px){ .hero-grid{ grid-template-columns:1.05fr .95fr; align-items:end; } }
.hero h1{ margin-bottom:22px; }
.hero h1 .stamp-word{ color:var(--stamp); }
.hero-lede{ font-size:18px; max-width:52ch; color:var(--ink-soft); margin-bottom:30px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; }

/* ---------- truth box (Reg-Z style disclosure table) ---------- */
.truthbox{ border:3px solid var(--ink); background:var(--paper); }
.truthbox-head{ background:var(--ink); color:var(--paper); padding:12px 18px; display:flex; justify-content:space-between; align-items:center; }
.truthbox-head .label{ font-family:var(--f-mono); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.truthbox-head .tag{ font-family:var(--f-mono); font-size:10px; color:var(--stamp); background:var(--paper); padding:3px 8px; border-radius:2px; font-weight:700; }
.truthbox-grid{ display:grid; grid-template-columns:1fr 1fr; }
.truthbox-cell{ padding:20px 18px; border-right:2px solid var(--ink); border-bottom:2px solid var(--ink); }
.truthbox-cell:nth-child(2n){ border-right:none; }
.truthbox-cell .tb-label{ font-family:var(--f-mono); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); margin-bottom:8px; line-height:1.35; display:block; min-height:28px; }
.truthbox-cell .tb-val{ font-family:var(--f-mono); font-size:28px; font-weight:700; color:var(--ink); }
.truthbox-cell.hero-cell .tb-val{ color:var(--stamp); font-size:34px; }
.truthbox-controls{ padding:22px 18px; }
.dial-field{ margin-bottom:20px; }
.dial-field:last-child{ margin-bottom:0; }
.dial-field label{ display:flex; justify-content:space-between; font-family:var(--f-mono); font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:10px; }
.dial-field .val{ color:var(--stamp); font-weight:700; }
.dial-field input[type="range"]{ width:100%; accent-color:var(--ink); height:3px; }
.truthbox-foot{ padding:14px 18px; font-family:var(--f-mono); font-size:11px; color:var(--ink-faint); border-top:2px solid var(--ink); }

/* ---------- people section (illustrated figure) ---------- */
.people-section{ background:var(--paper-2); }
.people-grid{ display:grid; grid-template-columns:1fr; gap:44px; align-items:center; }
@media (min-width:900px){ .people-grid{ grid-template-columns:.85fr 1.15fr; gap:60px; } }
.people-figure{ border:2px solid var(--ink); }
.people-figure img{ width:100%; height:auto; display:block; }
.people-copy .eyebrow{ margin-bottom:18px; }
.people-copy h2{ margin-bottom:18px; }

/* ---------- sections ---------- */
.section{ padding:76px 0; border-bottom:3px solid var(--ink); }
.section-alt{ background:var(--paper-2); }
.section-head{ max-width:680px; margin-bottom:40px; }
.section-head p{ font-size:17px; }
.section-num{ font-family:var(--f-mono); font-size:12px; color:var(--stamp); font-weight:700; margin-bottom:6px; display:block; }

/* ---------- the ledger (loan type comparison table) ---------- */
.ledger{ width:100%; border-collapse:collapse; border:2px solid var(--ink); }
.ledger th{ font-family:var(--f-mono); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; text-align:left; padding:12px 16px; background:var(--ink); color:var(--paper); border-right:1px solid #3A3A38; }
.ledger th:last-child{ border-right:none; }
.ledger td{ padding:16px; border-top:1px solid var(--rule-soft); border-right:1px solid var(--rule-soft); vertical-align:top; font-size:14.5px; }
.ledger td:last-child{ border-right:none; }
.ledger tr:hover td{ background:var(--stamp-tint); }
.ledger .lt-name{ font-family:var(--f-body); font-weight:700; font-size:16px; }
.ledger .lt-ex{ font-family:var(--f-mono); font-size:10.5px; color:var(--ink-faint); display:block; margin-bottom:3px; }
.ledger td.apr-cell{ font-family:var(--f-mono); font-weight:700; }

/* rubber stamp marks */
.stampmark{
  display:inline-block; font-family:var(--f-mono); font-size:11px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; padding:5px 11px; border:2px solid currentColor; border-radius:2px;
  transform:rotate(-2.5deg); white-space:nowrap;
}
.stampmark.hazard{ color:var(--redact); }
.stampmark.caution{ color:var(--stamp); }
.stampmark.clear{ color:var(--verify); }
.stampmark.rotate-r{ transform:rotate(2deg); }

/* mobile ledger -> stacked cards */
@media (max-width:760px){
  .ledger, .ledger thead, .ledger tbody, .ledger th, .ledger td, .ledger tr{ display:block; width:100%; }
  .ledger thead{ display:none; }
  .ledger tr{ border-bottom:2px solid var(--ink); padding:16px; }
  .ledger td{ border:none; padding:6px 0; }
  .ledger td::before{ content:attr(data-label); display:block; font-family:var(--f-mono); font-size:10px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em; margin-bottom:2px; }
}

/* ---------- redaction reveal ---------- */
.redact-doc{ border:2px solid var(--ink); background:var(--paper); padding:40px; font-family:'Courier New', var(--f-mono); font-size:16.5px; line-height:2.1; color:var(--ink); }
.redact-doc .doc-head{ font-family:var(--f-mono); font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.08em; margin-bottom:24px; padding-bottom:14px; border-bottom:1px dashed var(--rule-soft); }
.rbar{
  background:var(--ink); color:var(--ink); border-radius:2px; padding:1px 8px; cursor:pointer;
  user-select:none; transition:background .18s ease, color .18s ease; border:1px solid var(--ink);
}
.rbar .truth{ display:none; }
.rbar .cover{ display:inline; }
.rbar.is-revealed{ background:var(--stamp-tint); color:var(--stamp); border-color:var(--stamp); font-weight:700; }
.rbar.is-revealed .truth{ display:inline; }
.rbar.is-revealed .cover{ display:none; }
.redact-hint{ font-family:var(--f-mono); font-size:12px; color:var(--ink-faint); margin-top:22px; }
.redact-count{ font-family:var(--f-mono); font-size:12px; color:var(--stamp); font-weight:700; }

/* ---------- notes / tips ---------- */
.notes-list{ border-top:2px solid var(--ink); }
.note-row{ display:grid; grid-template-columns:70px 1fr; gap:22px; padding:26px 0; border-bottom:1px solid var(--rule-soft); }
.note-row .n{ font-family:var(--f-display); font-size:36px; font-weight:800; color:var(--stamp-tint); -webkit-text-stroke:1.5px var(--stamp); line-height:1; }
.note-row h3{ margin-bottom:6px; }
.note-row p{ margin:0; font-size:14.5px; }

/* ---------- glossary hover ---------- */
[data-term]{ border-bottom:2px dotted var(--stamp); cursor:help; text-decoration:none; }
.term-tip{
  position:fixed; z-index:9999; max-width:320px; background:var(--ink); color:var(--paper);
  border:2px solid var(--stamp); padding:12px 15px; font-family:var(--f-mono); font-size:12.5px;
  line-height:1.55; pointer-events:none; opacity:0; transform:translateY(4px); transition:opacity .12s ease, transform .12s ease;
}
.term-tip.is-visible{ opacity:1; transform:translateY(0); }

/* ---------- footer ---------- */
footer{ background:var(--ink); color:#C9C9C4; padding:60px 0 26px; }
footer h4{ font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--stamp); margin:0 0 16px; }
footer a{ color:#C9C9C4; text-decoration:none; }
footer a:hover{ color:var(--paper); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:36px; border-bottom:1px solid #2E2E2C; }
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr; } }
footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:14px; }
.disclosure{ font-size:12.5px; color:#8B8B87; line-height:1.6; max-width:360px; font-family:var(--f-mono); }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding-top:20px; font-family:var(--f-mono); font-size:11px; color:#6E6E6A; }
.footer-bottom a{ color:#8B8B87; }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s ease; }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ---------- page hero (inner pages) ---------- */
.page-hero{ padding:56px 0 48px; border-bottom:3px solid var(--ink); }
.page-hero .container{ max-width:800px; }
.page-hero h1{ font-size:clamp(36px,5.5vw,58px); margin-bottom:14px; }
.page-hero p{ font-size:17px; margin:0; }

/* ---------- exhibit detail card (loan type deep dive) ---------- */
.exhibit-card{ border:2px solid var(--ink); margin-bottom:26px; }
.exhibit-head{ background:var(--ink); color:var(--paper); padding:14px 22px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.exhibit-head .ex-no{ font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; color:var(--stamp); }
.exhibit-head h2{ margin:2px 0 0; font-size:24px; color:var(--paper); }
.exhibit-body{ padding:26px 28px; }
.exhibit-meta{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.meta-pill{ font-family:var(--f-mono); font-size:11px; padding:5px 11px; border:1px solid var(--ink); color:var(--ink-soft); }
.exhibit-rows{ margin:20px 0 0; border-top:2px solid var(--ink); }
.exhibit-row{ display:flex; justify-content:space-between; gap:24px; padding:13px 0; border-bottom:1px solid var(--rule-soft); font-size:14.5px; }
.exhibit-row dt{ font-family:var(--f-mono); font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em; margin:0; flex-shrink:0; padding-top:2px; }
.exhibit-row dd{ margin:0; text-align:right; color:var(--ink); font-weight:600; }
.exhibit-row dd.hazard{ color:var(--redact); }
.exhibit-row dd.clear{ color:var(--verify); }
.exhibit-row dd.caution{ color:var(--stamp); }

/* ---------- glossary entries ---------- */
.entry-row{ border-top:2px solid var(--ink); padding:24px 0; }
.entry-row:last-child{ border-bottom:2px solid var(--ink); }
.entry-no{ font-family:var(--f-mono); font-size:11px; color:var(--stamp); letter-spacing:.08em; margin-bottom:6px; display:block; }
.entry-row h3{ font-size:20px; margin-bottom:8px; }
.entry-row p{ font-size:15px; margin:0; max-width:66ch; }

/* ---------- accordion (FAQ) ---------- */
.acc-item{ border-top:2px solid var(--ink); }
.acc-item:last-child{ border-bottom:2px solid var(--ink); }
.acc-trigger{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px;
  background:none; border:none; padding:22px 2px; text-align:left; cursor:pointer;
  font-family:var(--f-body); font-size:17px; font-weight:700; color:var(--ink);
}
.acc-trigger .plus{ font-family:var(--f-mono); font-size:20px; color:var(--stamp); transition:transform .2s ease; flex-shrink:0; }
.acc-item.is-open .acc-trigger .plus{ transform:rotate(45deg); }
.acc-panel{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.acc-panel-inner{ padding:0 2px 22px; font-size:15px; color:var(--ink-soft); max-width:68ch; }

/* ---------- info box (contact / at-a-glance) ---------- */
.infobox{ border:2px solid var(--ink); }
.infobox-title{ display:flex; justify-content:space-between; font-family:var(--f-mono); font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; background:var(--ink); color:var(--paper); padding:11px 18px; }
.infobox dl{ margin:0; }
.infobox .field-row{ display:flex; justify-content:space-between; gap:16px; padding:13px 18px; border-bottom:1px solid var(--rule-soft); font-size:14px; }
.infobox .field-row:last-child{ border-bottom:none; }
.infobox .field-row dt{ margin:0; color:var(--ink-faint); font-family:var(--f-mono); font-size:11px; text-transform:uppercase; }
.infobox .field-row dd{ margin:0; color:var(--ink); font-weight:600; text-align:right; }
.infobox .field-row a{ color:var(--ink); text-decoration:none; }
.infobox .field-row a:hover{ color:var(--stamp); }

/* ---------- forms ---------- */
.field{ margin-bottom:18px; }
.field label{ display:block; font-family:var(--f-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea{
  width:100%; background:var(--paper); border:2px solid var(--ink); border-radius:0;
  padding:12px 14px; font-family:var(--f-body); font-size:14.5px; color:var(--ink);
}
.field textarea{ resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--stamp); outline-offset:1px; }
.consent-block{ margin:22px 0; display:flex; flex-direction:column; gap:14px; }
.field.checkbox-row{ display:flex; align-items:flex-start; gap:12px; margin:0; }
.field.checkbox-row input{ margin-top:3px; width:16px; height:16px; accent-color:var(--ink); flex-shrink:0; }
.field.checkbox-row label{ font-family:var(--f-body); text-transform:none; letter-spacing:0; font-size:12.5px; color:var(--ink-soft); line-height:1.55; cursor:pointer; }
.field.checkbox-row label.consent-label strong{ display:block; font-family:var(--f-mono); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--stamp); margin-bottom:4px; }
.field.checkbox-row label a{ color:var(--ink); text-decoration:underline; }
.btn-block{ width:100%; }
.form-card{ background:var(--paper); border:2px solid var(--ink); padding:32px; }
.form-success{ display:none; background:var(--paper); border:2px solid var(--verify); padding:32px; }
.form-success.is-visible{ display:block; }
.form-success h3{ color:var(--ink); }

/* ---------- legal pages ---------- */
.legal-body{ max-width:72ch; }
.legal-body h2{ font-size:19px; text-transform:none; font-family:var(--f-body); font-weight:700; margin-top:36px; }
.legal-body p, .legal-body li{ font-size:15px; color:var(--ink-soft); }
.legal-body ul{ padding-left:22px; }

@media (max-width:820px){
  .two-col{ grid-template-columns:1fr !important; }
}

:focus-visible{ outline:2px solid var(--stamp); outline-offset:2px; }