/* ══════════════════════════════════════════════════════
   Easy Loans — "The Ledger"
   Financial-document aesthetic: ruled paper, serif authority,
   stamp motifs, tabular figures.
   ══════════════════════════════════════════════════════ */

:root{
  --paper:      #F7F3EA;
  --paper-2:    #EFEAE0;
  --card:       #FFFDF8;
  --ink:        #1A1E2E;
  --ink-2:      #3D4459;
  --muted:      #767C90;
  --rule:       rgba(26,30,46,.13);
  --rule-hard:  rgba(26,30,46,.24);
  --indigo:     #26356B;
  --indigo-dk:  #1A2650;
  --amber:      #F5A524;
  --amber-ink:  #8A5A05;
  --stamp:      #26356B;
  --alert:      #A5342A;

  --brand: "Bricolage Grotesque","Trebuchet MS",sans-serif;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:  "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;

  --maxw: 1180px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* paper grain */
.grain{
  position:fixed; inset:0; z-index:100; pointer-events:none;
  opacity:.32; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

h1,h2,h3{ font-family:var(--serif); font-weight:600; letter-spacing:-.018em; margin:0; line-height:1.08; }
h1 em, h2 em{ font-style:italic; color:var(--indigo); }
p{ margin:0; }
a{ color:var(--indigo-dk); text-underline-offset:3px; text-decoration-thickness:1px; }
a:hover{ color:var(--amber); }

/* ── reveal ─────────────────────────────── */
[data-reveal]{ opacity:0; transform:translateY(14px); animation:rise .8s var(--ease) forwards; animation-delay:var(--d,0s); }
@keyframes rise{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  [data-reveal]{ animation:none; opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* ══ HEADER ══════════════════════════════ */
.site-head{
  max-width:var(--maxw); margin:0 auto;
  padding:26px 28px 0;
  display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.wordmark{ display:inline-flex; align-items:baseline; gap:9px; text-decoration:none; color:var(--ink); }
.wordmark__mark{ width:44px; height:44px; display:block; flex:none; transform:translateY(6px); }
.foot__brand .wordmark__mark{ width:38px; height:38px; transform:none; }
.wordmark__text{ font-family:var(--brand); font-size:26px; font-weight:700; letter-spacing:-.03em; }
.wordmark__text em{ font-style:normal; color:var(--amber-ink); }
.head-note{
  font-size:12.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); font-weight:500;
}
.head-note strong{ color:var(--alert); font-weight:700; }

/* ══ HERO ════════════════════════════════ */
.hero{
  max-width:var(--maxw); margin:0 auto;
  padding:56px 28px 72px;
  display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:start;
  position:relative;
}
.hero::before{
  content:""; position:absolute; inset:0 0 0 -50vw; width:200vw; z-index:-1;
  background:repeating-linear-gradient(to bottom, transparent 0 33px, var(--rule) 33px 34px);
  mask-image:linear-gradient(to bottom, transparent, #000 22%, #000 70%, transparent);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 22%, #000 70%, transparent);
  opacity:.75;
}

.eyebrow{
  font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--amber-ink); font-weight:600; margin-bottom:18px;
}
.eyebrow::before{ content:"—— "; letter-spacing:0; }

.hero h1{ font-size:clamp(2.5rem, 5.4vw, 4.1rem); margin-bottom:22px; }

.lede{ font-size:19px; color:var(--ink-2); max-width:34ch; margin-bottom:28px; }

.ticks{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.ticks li{
  position:relative; padding-left:30px; font-size:16px; color:var(--ink-2);
}
.ticks li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:15px; height:8px; border-left:2px solid var(--indigo); border-bottom:2px solid var(--indigo);
  transform:rotate(-45deg);
}

/* ── application slip ───────────────────── */
.slip{
  background:var(--card);
  border:1px solid var(--rule-hard);
  border-radius:3px;
  padding:0 30px 30px;
  position:relative;
  box-shadow:0 1px 0 var(--rule-hard), 0 18px 44px -22px rgba(26,30,46,.40);
}
.slip__perf{
  position:absolute; top:0; left:0; right:0; height:9px;
  background:
    radial-gradient(circle at 6px 0, transparent 0 4.5px, var(--card) 5px) 0 0/12px 9px repeat-x;
  border-bottom:1px dashed var(--rule-hard);
}
.slip__head{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:26px 0 18px; margin-bottom:22px;
  border-bottom:2px solid var(--ink);
}
.slip__title{ font-family:var(--serif); font-size:20px; font-weight:600; }
.slip__ref{
  font-size:11px; letter-spacing:.18em; color:var(--muted);
  font-variant-numeric:tabular-nums;
}

.field{ margin-bottom:17px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
label{
  display:block; font-size:12px; letter-spacing:.11em; text-transform:uppercase;
  font-weight:600; color:var(--ink-2); margin-bottom:6px;
}
input[type=text],input[type=tel],select{
  width:100%; padding:12px 13px;
  font-family:var(--sans); font-size:16.5px; color:var(--ink);
  background:transparent;
  border:0; border-bottom:1.5px solid var(--rule-hard); border-radius:0;
  transition:border-color .2s, background .2s;
  appearance:none;
}
select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23767C90' stroke-width='1.8'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 6px center;
}
input:focus,select:focus{
  outline:none; border-bottom-color:var(--indigo);
  background:linear-gradient(to bottom, transparent 70%, rgba(38,53,107,.07));
}
input::placeholder{ color:#A6AAB8; }
.phone-wrap{ display:flex; align-items:center; gap:8px; border-bottom:1.5px solid var(--rule-hard); }
.phone-wrap:focus-within{ border-bottom-color:var(--indigo); }
.phone-wrap input{ border-bottom:0; padding-left:0; }
.phone-cc{
  font-size:16.5px; color:var(--muted); padding-left:2px;
  font-variant-numeric:tabular-nums;
}
.hint{ font-size:12.5px; color:var(--muted); margin-top:5px; }

.field.err input, .field.err select, .phone-wrap.err{ border-bottom-color:var(--alert); }
.err-msg{ font-size:12.5px; color:var(--alert); margin-top:5px; font-weight:500; }

.consent{
  display:flex; gap:11px; align-items:flex-start;
  margin:22px 0 20px; text-transform:none; letter-spacing:0;
  font-size:12.8px; line-height:1.5; color:var(--muted); font-weight:400;
}
.consent input{ margin-top:3px; width:16px; height:16px; accent-color:var(--indigo); flex:none; }
.consent.err span{ color:var(--alert); }

.btn-primary{
  width:100%; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 22px; border:0; border-radius:2px; cursor:pointer;
  background:var(--indigo); color:#FBF8F1;
  font-family:var(--sans); font-size:16px; font-weight:600; letter-spacing:.01em;
  transition:background .2s, transform .12s;
  box-shadow:0 10px 24px -14px var(--indigo-dk);
}
.btn-primary:hover{ background:var(--indigo-dk); }
.btn-primary:active{ transform:translateY(1px); }
.btn-primary svg{ transition:transform .25s var(--ease); }
.btn-primary:hover svg{ transform:translateX(4px); }
.btn-primary[disabled]{ opacity:.6; cursor:progress; }

.form-foot{ font-size:12px; color:var(--muted); text-align:center; margin-top:14px; }

/* ══ RESULT ══════════════════════════════ */
.result{
  background:var(--ink);
  color:var(--paper);
  padding:74px 28px 78px;
  position:relative; overflow:hidden;
}
.result::before{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(to bottom, transparent 0 33px, rgba(247,244,238,.055) 33px 34px);
}
.result__inner{ max-width:760px; margin:0 auto; position:relative; }

.stamp{
  position:absolute; top:-22px; right:-6px;
  width:126px; height:126px; border-radius:50%;
  border:3px double var(--stamp); color:var(--stamp);
  display:grid; place-items:center; text-align:center;
  font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:.13em; line-height:1.35;
  transform:rotate(-13deg) scale(.5); opacity:0;
  animation:stampIn .55s var(--ease) .75s forwards;
}
@keyframes stampIn{ to{ transform:rotate(-13deg) scale(1); opacity:.92; } }

.result__eyebrow{
  font-size:12px; letter-spacing:.17em; text-transform:uppercase;
  color:rgba(247,244,238,.55); margin-bottom:14px;
}
.result__figure{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(3.2rem, 9vw, 5.6rem); line-height:1;
  font-variant-numeric:tabular-nums; letter-spacing:-.03em;
  color:#F7F3EA; margin-bottom:14px;
}
.result__figure .cur{ font-size:.56em; vertical-align:.1em; margin-right:.06em; color:rgba(247,244,238,.65); }
.result__sub{ font-size:19px; color:rgba(247,244,238,.8); max-width:38ch; margin-bottom:32px; }

.result__meta{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
  margin:0 0 30px; background:rgba(247,244,238,.15);
  border:1px solid rgba(247,244,238,.15);
}
.result__meta > div{ background:var(--ink); padding:16px 18px; }
.result__meta dt{
  font-size:11.5px; letter-spacing:.11em; text-transform:uppercase;
  color:rgba(247,244,238,.5); margin-bottom:5px;
}
.result__meta dd{
  margin:0; font-family:var(--serif); font-size:21px; font-weight:600;
  font-variant-numeric:tabular-nums;
}

.result__warn{
  font-size:14px; line-height:1.65; color:rgba(247,244,238,.68);
  border-left:2px solid var(--amber); padding-left:16px; margin-bottom:46px;
}
.result__warn strong{ color:#F7F3EA; }

.products__head{ font-size:25px; margin-bottom:6px; }
.products__note{ font-size:14.5px; color:rgba(247,244,238,.6); margin-bottom:22px; }
.products{ display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:12px; }

.product{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:18px 20px; text-decoration:none;
  background:rgba(247,244,238,.055);
  border:1px solid rgba(247,244,238,.18);
  color:#F7F3EA; border-radius:2px;
  transition:background .2s, border-color .2s, transform .15s var(--ease);
}
.product:hover{ background:rgba(247,244,238,.11); border-color:var(--amber); color:#F7F3EA; transform:translateX(3px); }
.product__name{ font-family:var(--serif); font-size:18.5px; font-weight:600; display:block; }
.product__meta{ font-size:12.5px; color:rgba(247,244,238,.55); }
.product__arrow{ font-size:19px; color:var(--amber); flex:none; }
.product--todo{ border-style:dashed; opacity:.75; cursor:not-allowed; }

/* ══ HOW ═════════════════════════════════ */
.section-title{
  font-size:clamp(1.9rem,3.4vw,2.6rem); margin-bottom:34px;
  padding-bottom:14px; border-bottom:2px solid var(--ink);
}
.how,.lenders,.faq{ max-width:var(--maxw); margin:0 auto; padding:78px 28px 0; }

.steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.steps li{ padding:26px 28px 30px; border-left:1px solid var(--rule-hard); }
.steps li:first-child{ padding-left:0; border-left:0; }
.steps__no{
  font-family:var(--serif); font-size:13px; font-weight:700; letter-spacing:.12em;
  color:var(--amber-ink); display:block; margin-bottom:14px; font-variant-numeric:tabular-nums;
}
.steps h3{ font-size:21px; margin-bottom:9px; }
.steps p{ font-size:15.5px; color:var(--ink-2); }

/* ══ LENDERS ═════════════════════════════ */
.lender-strip{ display:flex; flex-wrap:wrap; gap:10px; }
.lender-chip{
  padding:10px 17px; border:1px solid var(--rule-hard); border-radius:100px;
  font-size:14.5px; font-weight:500; background:var(--card);
}
.lender-chip--todo{
  border-style:dashed; color:var(--alert); background:transparent; font-weight:600;
}
.lenders__note{ font-size:13.5px; color:var(--muted); margin-top:16px; max-width:70ch; }

/* ══ FAQ ═════════════════════════════════ */
.faq__list{ border-top:1px solid var(--rule-hard); }
.faq details{ border-bottom:1px solid var(--rule-hard); }
.faq summary{
  cursor:pointer; list-style:none; padding:21px 40px 21px 0; position:relative;
  font-family:var(--serif); font-size:19.5px; font-weight:600;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-family:var(--sans); font-size:24px; font-weight:400; color:var(--indigo);
  transition:transform .25s var(--ease);
}
.faq details[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.faq details p{ padding:0 0 22px; max-width:74ch; color:var(--ink-2); font-size:15.5px; }

/* ══ DISCLOSURE ══════════════════════════ */
.disclosure{ margin-top:82px; background:var(--paper-2); border-top:1px solid var(--rule-hard); }
.disclosure__inner{ max-width:var(--maxw); margin:0 auto; padding:46px 28px 50px; }
.disclosure h2{
  font-size:14px; letter-spacing:.15em; text-transform:uppercase;
  font-family:var(--sans); font-weight:700; color:var(--alert); margin-bottom:18px;
}
.disclosure p{ font-size:13.6px; line-height:1.68; color:var(--ink-2); max-width:92ch; margin-bottom:11px; }
.disclosure strong{ color:var(--ink); }

/* ══ FOOTER ══════════════════════════════ */
.site-foot{ background:var(--ink); color:rgba(247,244,238,.72); padding:44px 28px 40px; }
.foot__grid{
  max-width:var(--maxw); margin:0 auto;
  display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; align-items:flex-start;
}
.foot__brand{ display:flex; gap:14px; align-items:flex-start; max-width:44ch; }
.foot__legal{ font-size:13.5px; line-height:1.6; }
.foot__links{ display:flex; flex-wrap:wrap; gap:8px 26px; }
.foot__links a{ color:rgba(247,244,238,.8); font-size:14.5px; text-decoration:none; }
.foot__links a:hover{ color:var(--amber); text-decoration:underline; }
.foot__rule{ max-width:var(--maxw); margin:34px auto 18px; height:1px; background:rgba(247,244,238,.16); }
.foot__fine{ max-width:var(--maxw); margin:0 auto; font-size:12.3px; line-height:1.6; color:rgba(247,244,238,.45); }

/* ══ RESPONSIVE ══════════════════════════ */
@media (max-width:920px){
  .hero{ grid-template-columns:1fr; gap:44px; padding-top:40px; }
  .steps{ grid-template-columns:1fr; }
  .steps li{ border-left:0; border-top:1px solid var(--rule-hard); padding-left:0; }
  .steps li:first-child{ border-top:0; padding-top:0; }
  .result__meta{ grid-template-columns:1fr; }
  .stamp{ width:100px; height:100px; font-size:10.5px; top:-14px; right:-4px; }
}
@media (max-width:540px){
  body{ font-size:16px; }
  .site-head{ padding:20px 20px 0; }
  .hero,.how,.lenders,.faq{ padding-left:20px; padding-right:20px; }
  .disclosure__inner,.site-foot{ padding-left:20px; padding-right:20px; }
  .slip{ padding:0 20px 24px; }
  .field-row{ grid-template-columns:1fr; gap:0; }
  .result{ padding:56px 20px 60px; }
  .stamp{ position:static; margin:0 0 22px auto; transform:rotate(-13deg); opacity:.92; animation:none; }
}

/* ── legal pages ────────────────────────── */
.legal{ max-width:800px; margin:0 auto; padding:56px 28px 90px; }
.legal h1{ font-size:clamp(2rem,4.4vw,3rem); margin-bottom:8px; }
.legal .updated{ font-size:13px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; margin-bottom:38px; }
.legal h2{ font-size:22px; margin:38px 0 12px; padding-bottom:9px; border-bottom:1px solid var(--rule-hard); }
.legal p, .legal li{ font-size:15.6px; color:var(--ink-2); margin-bottom:13px; }
.legal ul{ padding-left:22px; }
.legal .back{ display:inline-block; margin-bottom:26px; font-size:14.5px; }