/* ==========================================================================
   BORROW SMART — design system
   Concept: "The Borrowing Field Guide" — a naturalist's field guide to
   small loans. Parchment pages, moss ink, mustard accent, specimen cards,
   book-tab index nav (not a side dock), and a magnifying-lens cursor that
   reveals plain-English fine print on hover.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&family=Archivo:wght@500;600;700&display=swap');

:root{
  --paper:      #EEEADB;
  --paper-2:    #E4DEC9;
  --paper-3:    #DCD4B9;
  --ink:        #23271F;
  --ink-soft:   #4A5142;
  --ink-faint:  #6E7660;
  --moss:       #4F6B4B;
  --moss-dim:   #3A4E38;
  --moss-tint:  #DCE5D6;
  --marigold:   #C97A2B;
  --marigold-dim: #A25F1F;
  --marigold-tint: #F3E1C8;
  --rust:       #A8432C;
  --rust-tint:  #F1DCD3;
  --line:       #C9C2A8;
  --line-soft:  #DAD4BE;

  --f-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --f-body:    'Source Serif 4', Georgia, serif;
  --f-label:   'Archivo', 'Helvetica Neue', Arial, sans-serif;

  --container: 1120px;
  --tab-w: 168px;
  --shadow-card: 0 14px 34px -18px rgba(35,39,31,.35);
  --shadow-lift: 0 24px 60px -24px rgba(35,39,31,.45);
  --notch: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(35,39,31,.055) 1px, transparent 0);
  background-size: 22px 22px;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:600; line-height:1.14; margin:0 0 .5em; letter-spacing:-.01em; color:var(--ink); }
p{ margin:0 0 1.1em; color:var(--ink-soft); }
button{ font-family:inherit; }
input,select,textarea{ font-family:inherit; }
::selection{ background:var(--marigold); color:var(--paper); }
:focus-visible{ outline:2px solid var(--moss); outline-offset:3px; }

.container{ max-width:var(--container); margin:0 auto; padding:0 40px; }
.eyebrow{ font-family:var(--f-label); font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--marigold-dim); display:inline-flex; align-items:center; gap:8px; margin-bottom:14px; }
.eyebrow::before{ content:""; width:16px; height:2px; background:var(--marigold); }

/* ---------------------------------------------------------------------- */
/* magnifying lens cursor                                                 */
/* ---------------------------------------------------------------------- */
.lens{
  position:fixed; top:0; left:0; width:130px; height:130px;
  border-radius:50%; pointer-events:none; z-index:9999;
  border:3px solid var(--moss);
  background: var(--paper-2);
  box-shadow: var(--shadow-lift), inset 0 0 0 6px var(--paper);
  transform:translate(-50%,-50%) scale(0);
  opacity:0;
  transition: transform .22s cubic-bezier(.2,.9,.3,1.3), opacity .18s ease, border-color .18s ease;
  overflow:hidden;
  will-change:transform;
}
.lens::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.5), transparent 55%);
}
.lens-handle{
  position:fixed; top:0; left:0; width:46px; height:9px; border-radius:6px;
  background:var(--marigold); pointer-events:none; z-index:9998;
  transform-origin:0 50%;
  opacity:0; transition:opacity .18s ease;
}
.lens.is-active,.lens.is-active + .lens-handle{ opacity:1; }
.lens.is-active{ transform:translate(-50%,-50%) scale(1); }
.lens-label{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:14px; font-family:var(--f-label); font-size:11.5px;
  font-weight:600; letter-spacing:.03em; color:var(--ink); line-height:1.35;
}
@media (hover:none), (pointer:coarse){ .lens,.lens-handle{ display:none; } }
.reduce-motion .lens,.reduce-motion .lens-handle{ display:none; }

[data-lens-term]{
  border-bottom:1.5px dotted var(--moss);
  cursor:help;
}

/* ---------------------------------------------------------------------- */
/* buttons                                                                */
/* ---------------------------------------------------------------------- */
.btn{ display:inline-flex; align-items:center; gap:9px; justify-content:center; font-family:var(--f-label); font-size:13px; font-weight:600; letter-spacing:.04em; padding:14px 26px; border-radius:3px; border:1.5px solid transparent; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease, color .15s ease; white-space:nowrap; }
.btn-primary{ background:var(--moss); color:var(--paper); border-color:var(--moss); }
.btn-primary:hover{ background:var(--moss-dim); transform:translateY(-1px); box-shadow:0 10px 24px -12px rgba(79,107,75,.55); }
.btn-outline{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-outline:hover{ border-color:var(--marigold); color:var(--marigold-dim); }
.btn-ghost{ background:transparent; color:var(--ink-soft); border-color:transparent; }
.btn-ghost:hover{ color:var(--ink); }
.btn-sm{ padding:10px 18px; font-size:12px; }
.btn-block{ width:100%; }

/* ---------------------------------------------------------------------- */
/* header (compact top bar, since nav lives in book tabs)                 */
/* ---------------------------------------------------------------------- */
.topbar{ position:sticky; top:0; z-index:400; background:rgba(238,234,219,.92); backdrop-filter:blur(6px); border-bottom:1px solid var(--line); }
.topbar-inner{ display:flex; align-items:center; justify-content:space-between; padding:12px 40px; max-width:var(--container); margin:0 auto; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ width:56px; height:56px; }
.brand-word{ font-family:var(--f-display); font-weight:600; font-size:25px; }
.brand-word em{ font-style:normal; color:var(--marigold-dim); }
.topbar-cta{ display:flex; align-items:center; gap:14px; }
.topbar-phone{ font-family:var(--f-label); font-size:13px; font-weight:600; color:var(--moss-dim); }
.tab-toggle{ display:none; background:none; border:1.5px solid var(--ink); border-radius:3px; width:42px; height:38px; align-items:center; justify-content:center; cursor:pointer; }
.tab-toggle span{ display:block; width:18px; height:2px; background:var(--ink); position:relative; }
.tab-toggle span::before,.tab-toggle span::after{ content:""; position:absolute; left:0; width:18px; height:2px; background:var(--ink); }
.tab-toggle span::before{ top:-6px; } .tab-toggle span::after{ top:6px; }

/* ---------------------------------------------------------------------- */
/* book-tab index navigation (right edge, like dictionary thumb tabs)     */
/* ---------------------------------------------------------------------- */
.tab-index{ position:fixed; top:132px; right:0; z-index:390; display:flex; flex-direction:column; gap:6px; }
.tab-index a{
  display:flex; align-items:center; gap:8px; font-family:var(--f-label); font-size:12px; font-weight:600;
  letter-spacing:.04em; padding:11px 18px 11px 16px; background:var(--paper-3); color:var(--ink-soft);
  border:1px solid var(--line); border-right:none; border-radius:8px 0 0 8px;
  transform:translateX(72px); transition:transform .22s cubic-bezier(.3,.8,.4,1), background .18s ease, color .18s ease;
  box-shadow:-6px 6px 14px -10px rgba(35,39,31,.25);
}
.tab-index a .tab-num{ font-family:var(--f-label); font-size:10px; color:var(--marigold-dim); font-weight:700; }
.tab-index a:hover, .tab-index a:focus-visible{ transform:translateX(0); background:var(--moss-tint); color:var(--ink); }
.tab-index a.is-active{ transform:translateX(0); background:var(--moss); color:var(--paper); }
.tab-index a.is-active .tab-num{ color:var(--marigold-tint); }
.tab-overlay{ display:none; }

@media (max-width: 880px){
  .tab-toggle{ display:flex; }
  .tab-index{ top:0; right:0; height:100vh; width:min(78vw,320px); flex-direction:column; justify-content:center;
    background:var(--paper); border-left:1px solid var(--line); transform:translateX(100%); transition:transform .28s ease; padding:0 18px; gap:10px; }
  .tab-index.is-open{ transform:translateX(0); }
  .tab-index a{ transform:none; border-radius:6px; border:1px solid var(--line); justify-content:space-between; }
  .tab-overlay{ display:none; position:fixed; inset:0; background:rgba(35,39,31,.45); z-index:385; opacity:0; pointer-events:none; transition:opacity .22s ease; }
  .tab-overlay.is-open{ display:block; opacity:1; pointer-events:auto; }
}

/* ---------------------------------------------------------------------- */
/* hero                                                                   */
/* ---------------------------------------------------------------------- */
.hero{ padding:88px 0 70px; border-bottom:1px solid var(--line); position:relative; }
.hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:60px; align-items:center; }
.hero h1{ font-size:clamp(38px,5vw,58px); margin-bottom:.4em; }
.hero h1 .accent{ color:var(--marigold-dim); }
.hero-lede{ font-size:19px; max-width:52ch; }
.hero-actions{ display:flex; gap:14px; margin-top:28px; flex-wrap:wrap; }
.hero-note{ margin-top:22px; font-family:var(--f-label); font-size:12px; letter-spacing:.03em; color:var(--ink-faint); }

.plate{
  background:var(--paper-2); border:1px solid var(--line); border-radius:4px;
  clip-path:var(--notch); padding:30px; box-shadow:var(--shadow-card);
}
.plate-title{ font-family:var(--f-label); font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--marigold-dim); margin-bottom:14px; display:flex; justify-content:space-between; }
.field-row{ display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px dashed var(--line); font-family:var(--f-label); font-size:13px; }
.field-row:last-child{ border-bottom:none; }
.field-row dt{ color:var(--ink-soft); }
.field-row dd{ margin:0; font-weight:700; color:var(--ink); }

/* ---------------------------------------------------------------------- */
/* section shells                                                         */
/* ---------------------------------------------------------------------- */
.section{ padding:78px 0; border-bottom:1px solid var(--line); }
.section-head{ max-width:640px; margin-bottom:44px; }
.section-head p{ font-size:17.5px; }

/* ---------------------------------------------------------------------- */
/* specimen cards (catalog of loan types)                                 */
/* ---------------------------------------------------------------------- */
.specimen-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.specimen{
  background:var(--paper-2); border:1px solid var(--line); border-radius:4px; padding:28px 26px;
  position:relative; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  clip-path:var(--notch);
}
.specimen:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); border-color:var(--moss); }
.specimen-no{ font-family:var(--f-label); font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--marigold-dim); margin-bottom:10px; }
.specimen h3{ font-size:22px; margin-bottom:8px; }
.specimen-meta{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 16px; }
.pill{ font-family:var(--f-label); font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:5px 10px; border-radius:20px; background:var(--moss-tint); color:var(--moss-dim); }
.pill.risk-high{ background:var(--rust-tint); color:var(--rust); }
.pill.risk-med{ background:var(--marigold-tint); color:var(--marigold-dim); }
.specimen-desc{ font-size:15px; margin-bottom:14px; }
.specimen-foot{ display:flex; align-items:center; justify-content:space-between; font-family:var(--f-label); font-size:12.5px; font-weight:600; color:var(--moss-dim); border-top:1px dashed var(--line); padding-top:14px; }

@media (max-width: 980px){ .specimen-grid{ grid-template-columns:repeat(2,1fr); } .hero-grid{ grid-template-columns:1fr; } }
@media (max-width: 640px){ .specimen-grid{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------------------- */
/* calculator strip                                                       */
/* ---------------------------------------------------------------------- */
.calc{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; }
.calc-panel{ background:var(--ink); color:var(--paper); border-radius:4px; padding:36px; clip-path:var(--notch); }
.calc-panel label{ display:block; font-family:var(--f-label); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--marigold-tint); margin-bottom:8px; }
.calc-field{ margin-bottom:22px; }
.calc-field input[type="range"]{ width:100%; accent-color:var(--marigold); }
.calc-field-val{ font-family:var(--f-label); font-weight:700; color:var(--paper); float:right; }
.calc-results{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:24px; }
.calc-result{ background:rgba(238,234,219,.08); border:1px solid rgba(238,234,219,.18); border-radius:4px; padding:16px; }
.calc-result-label{ font-family:var(--f-label); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--moss-tint); opacity:.85; }
.calc-result-val{ font-family:var(--f-display); font-size:26px; font-weight:600; margin-top:4px; }
.calc-copy h2{ margin-bottom:.4em; }
@media (max-width:900px){ .calc{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------------------- */
/* accordion (FAQ)                                                        */
/* ---------------------------------------------------------------------- */
.acc-item{ border-bottom:1px solid var(--line); }
.acc-trigger{ width:100%; text-align:left; background:none; border:none; padding:20px 4px; display:flex; align-items:center; justify-content:space-between; gap:20px; cursor:pointer; font-family:var(--f-display); font-size:18px; font-weight:600; color:var(--ink); }
.acc-trigger .plus{ font-family:var(--f-label); font-size:20px; color:var(--marigold-dim); 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 .28s ease; }
.acc-panel-inner{ padding:0 4px 20px; font-size:15.5px; }

/* ---------------------------------------------------------------------- */
/* forms                                                                  */
/* ---------------------------------------------------------------------- */
.field{ margin-bottom:18px; }
.field label{ display:block; font-family:var(--f-label); font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:7px; }
.field input,.field select,.field textarea{ width:100%; padding:13px 14px; border:1.5px solid var(--line); border-radius:3px; background:var(--paper); color:var(--ink); font-size:15px; transition:border-color .15s ease; }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--moss); outline:none; }
.field-hint{ font-size:12.5px; color:var(--ink-faint); margin-top:6px; }
.form-success{ display:none; background:var(--moss-tint); border:1px solid var(--moss); border-radius:4px; padding:26px; }
.form-success.is-visible{ display:block; }
.checkbox-row{ display:flex; align-items:flex-start; gap:12px; font-size:14px; color:var(--ink-soft); }
.checkbox-row input[type="checkbox"]{ appearance:none; -webkit-appearance:none; margin:2px 0 0; flex-shrink:0; width:18px; height:18px; border:1.5px solid var(--line); border-radius:3px; background:var(--paper); cursor:pointer; position:relative; }
.checkbox-row input[type="checkbox"]:checked{ background:var(--moss); border-color:var(--moss); }
.checkbox-row input[type="checkbox"]:checked::after{ content:""; position:absolute; left:5px; top:1px; width:5px; height:10px; border:solid var(--paper); border-width:0 2px 2px 0; transform:rotate(45deg); }
.checkbox-row input[type="checkbox"]:focus-visible{ outline:2px solid var(--moss); outline-offset:2px; }
.consent-block{ margin:22px 0; padding:18px 20px; background:var(--paper); border:1px solid var(--line); border-radius:4px; }
.consent-block .checkbox-row{ margin-bottom:16px; }
.consent-block .checkbox-row:last-child{ margin-bottom:0; }
.field.checkbox-row label.consent-label{
  display:block; margin:0; text-transform:none; font-weight:400; letter-spacing:normal;
  font-family:var(--f-body); font-size:13.5px; line-height:1.55; color:var(--ink-soft);
  flex:1 1 auto; min-width:0;
}
.field.checkbox-row label.consent-label strong{ display:block; font-family:var(--f-label); font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--marigold-dim); margin-bottom:4px; }
.field.checkbox-row label.consent-label a{ color:var(--moss-dim); text-decoration:underline; }

/* ---------------------------------------------------------------------- */
/* footer                                                                 */
/* ---------------------------------------------------------------------- */
footer{ background:var(--ink); color:var(--paper-2); padding:56px 0 30px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; margin-bottom:40px; }
footer h4{ color:var(--paper); font-family:var(--f-label); font-size:12px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:16px; }
footer a{ color:var(--paper-2); opacity:.8; }
footer a:hover{ opacity:1; color:var(--marigold-tint); }
footer li{ margin-bottom:10px; font-size:14.5px; }
.footer-bottom{ border-top:1px solid rgba(238,234,219,.15); padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12.5px; color:var(--ink-faint); font-family:var(--f-label); }
.disclosure{ font-size:12.5px; color:var(--ink-faint); max-width:720px; }

@media (max-width:780px){ .footer-grid{ grid-template-columns:1fr 1fr; } .container{ padding:0 22px; } .topbar-inner{ padding:14px 22px; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------------------- */
/* reveal on scroll                                                       */
/* ---------------------------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s ease; }
.reveal.is-in{ opacity:1; transform:translateY(0); }
.reduce-motion .reveal{ opacity:1; transform:none; }