/* ============================================================
   First-Time Home Buyer Guide page
   Extends styles.css tokens.
   ============================================================ */

html{scroll-behavior:smooth;}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none;} }

/* ---------- guide hero ---------- */
.g-hero{background:var(--surface-2);border-bottom:1px solid var(--line);padding:76px 0 64px;}
.g-hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;}
@media (max-width:900px){ .g-hero .wrap{grid-template-columns:1fr;} }
.g-hero h1{font-size:clamp(2.2rem,4vw,3.1rem);line-height:1.08;color:var(--ink);margin:12px 0 18px;}
.g-hero p.lead{font-size:1.08rem;max-width:50ch;margin-bottom:26px;}
.g-hero .ctas{display:flex;gap:14px;flex-wrap:wrap;}
.g-hero .card{
  background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:28px;
  box-shadow:0 20px 44px -28px var(--shadow);
}
.g-hero .card img{width:88px;height:88px;border-radius:50%;object-fit:cover;margin-bottom:14px;}
.g-hero .card .name{font-family:'Fraunces',serif;font-weight:600;font-size:1.15rem;color:var(--ink);}
.g-hero .card .role{font-size:.82rem;color:var(--orange);font-weight:700;margin-top:2px;}
.g-hero .card p{margin-top:12px;font-size:.92rem;}

/* ---------- sticky guide nav ---------- */
.guide-nav{
  position:sticky;top:76px;z-index:30;background:color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
}
.guide-nav .wrap{display:flex;gap:4px;overflow-x:auto;padding:12px 28px;scrollbar-width:none;}
.guide-nav .wrap::-webkit-scrollbar{display:none;}
.guide-nav a{
  white-space:nowrap;font-size:.84rem;font-weight:700;color:var(--ink-soft);text-decoration:none;
  padding:8px 14px;border-radius:999px;
}
.guide-nav a:hover{background:var(--surface-2);color:var(--ink);}

/* ---------- section basics ---------- */
.g-section{padding:76px 0;}
@media (max-width:720px){ .g-section{padding:52px 0;} }
.g-section:nth-child(even){background:var(--surface-2);}
.g-section h2{font-size:clamp(1.6rem,2.8vw,2.1rem);color:var(--ink);margin-bottom:18px;}
.g-section .lede{max-width:70ch;margin-bottom:28px;}
.g-section ul.plain{margin:0 0 18px;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px;max-width:72ch;}
.g-section ul.plain li{padding-left:26px;position:relative;}
.g-section ul.plain li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;border-radius:50%;background:var(--gold);}
.g-section p{max-width:72ch;margin-bottom:14px;}
.g-section .callout{
  background:var(--surface);border:1.5px solid var(--gold);border-radius:14px;padding:22px 26px;
  margin-top:10px;max-width:72ch;
}
.g-section .callout p{margin-bottom:0;}

/* ---------- process timeline ---------- */
.timeline{position:relative;max-width:760px;margin-top:10px;}
.timeline::before{
  content:"";position:absolute;left:23px;top:10px;bottom:10px;width:2px;background:var(--line);
}
.t-step{position:relative;padding:0 0 38px 64px;}
.t-step:last-child{padding-bottom:0;}
.t-step .num{
  position:absolute;left:0;top:0;width:48px;height:48px;border-radius:50%;background:var(--surface);
  border:2px solid var(--gold);color:var(--ink);font-family:'Fraunces',serif;font-weight:600;
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;
}
.t-step h3{font-size:1.08rem;color:var(--ink);margin-bottom:6px;}
.t-step p{margin:0;font-size:.95rem;max-width:58ch;}

/* ---------- loan table ---------- */
table.loans{width:100%;max-width:880px;border-collapse:collapse;margin-top:6px;}
table.loans th{
  text-align:left;background:var(--surface-2);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--orange);font-weight:800;padding:14px 16px;border-bottom:2px solid var(--line);
}
table.loans td{padding:16px;border-bottom:1px solid var(--line);font-size:.94rem;color:var(--ink);}
table.loans tr:last-child td{border-bottom:none;}

/* ---------- glossary ---------- */
.glossary{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 40px;max-width:900px;}
@media (max-width:720px){ .glossary{grid-template-columns:1fr;} }
.glossary dt{font-weight:800;color:var(--ink);font-size:.95rem;}
.glossary dd{margin:2px 0 0;color:var(--ink-soft);font-size:.9rem;}

/* ---------- resource cards ---------- */
.res-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;max-width:1000px;}
.res-card{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px 22px;
  box-shadow:0 14px 32px -26px var(--shadow);
}
.res-card a.name{font-weight:800;color:var(--blue);text-decoration:none;font-size:.98rem;}
.res-card a.name:hover{color:var(--orange);}
.res-card p{font-size:.86rem;margin:8px 0 0;}

/* ---------- southern oregon spotlight ---------- */
.so-spotlight{background:var(--surface);}
.so-gallery{
  display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:200px 200px;gap:14px;margin-bottom:40px;
}
.so-gallery a{grid-row:span 2;border-radius:18px;overflow:hidden;position:relative;display:block;box-shadow:0 20px 44px -28px var(--shadow);}
.so-gallery a.tall{grid-row:span 2;}
.so-gallery .pair{display:grid;grid-template-rows:1fr 1fr;gap:14px;}
.so-gallery .pair a{grid-row:auto;border-radius:18px;overflow:hidden;box-shadow:0 20px 44px -28px var(--shadow);}
.so-gallery img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
.so-gallery a:hover img{transform:scale(1.05);}
@media (max-width:760px){
  .so-gallery{grid-template-columns:1fr;grid-template-rows:none;}
  .so-gallery a.tall{grid-row:auto;height:260px;}
  .so-gallery .pair{grid-template-columns:1fr 1fr;grid-template-rows:none;}
  .so-gallery .pair a{height:160px;}
}
.so-gallery.two-up{grid-template-columns:1fr 1fr;grid-template-rows:340px;}
.so-gallery.two-up a{grid-row:auto;}
.so-gallery.two-up .pair{display:block;}
.so-gallery.two-up .pair a{height:100%;}
@media (max-width:760px){
  .so-gallery.two-up{grid-template-columns:1fr;grid-template-rows:none;}
  .so-gallery.two-up a{height:240px;}
}
.so-feature{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-bottom:36px;}
@media (max-width:760px){ .so-feature{grid-template-columns:1fr;gap:28px;} }
.so-feature h3{font-family:'Fraunces',serif;font-weight:600;font-size:1.2rem;color:var(--ink);margin-bottom:8px;}
.so-feature p{margin:0 0 8px;}
.so-feature .tag{
  display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--orange);margin-bottom:8px;
}

/* ---------- final cta ---------- */
.g-cta{
  background:linear-gradient(160deg,var(--blue-deep),var(--blue));color:#F6EFD9;
  border-radius:24px;padding:48px 44px;margin:0 auto;max-width:1180px;
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
}
.g-cta h2{color:#fff;font-size:clamp(1.5rem,2.6vw,2rem);max-width:18ch;margin:0;}
.g-cta p{color:#D9E3EC;max-width:42ch;margin:10px 0 0;}
.g-cta .btn-primary{flex-shrink:0;}