/*
 * Paylaterr inner pages. Loaded after site.css and home.css (home.css supplies the tokens, .ph frames,
 * full-screen menu and header behaviour; body has .is-home .is-inner .is-<template>).
 * Same palette and fonts as the homepage. Image areas are .ph placeholders until real photos arrive.
 */

/* ---------- shared section rhythm ---------- */
.is-inner .i-sec { position: relative; padding: 72px 0; }
.is-inner .i-bg-w { background: #fff; }
.is-inner .i-bg-s { background: var(--soft); }
.is-inner .i-head { max-width: 46rem; }
.is-inner .i-head--center { margin-inline: auto; text-align: center; }
.is-inner .i-head--center p { margin-inline: auto; }
.is-inner .i-head h2, .is-inner .i-sec h2.i-h2 {
  margin: 0; font-family: var(--display); font-weight: 700; color: var(--navy);
  font-size: clamp(1.85rem, 1.2rem + 2.2vw, 2.75rem); line-height: 1.12; letter-spacing: -0.028em; text-wrap: balance;
}
.is-inner .i-head p { margin: 16px 0 0; font-size: 18px; line-height: 1.7; color: var(--muted); max-width: 40rem; }
.is-inner .i-sec h3 { font-family: var(--display); letter-spacing: -0.01em; color: var(--navy); }
@media (min-width: 1024px) { .is-inner .i-sec { padding: 104px 0; } }

/* ---------- cards ---------- */
.is-inner .i-cards { list-style: none; margin: 44px 0 0; padding: 0; display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
.is-inner .i-card { display: flex; flex-direction: column; gap: 16px; padding: 28px; border-radius: 28px; background: #fff; border: 1px solid var(--line); transition: transform .2s, box-shadow .2s, border-color .2s; }
.is-inner .i-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--line-2); }
.is-inner .i-card > span:first-child { width: 56px; height: 56px; border-radius: 16px; background: var(--soft); color: var(--blue-700); }
.is-inner .i-sec--uses .i-card > span:first-child { background: var(--teal-50); color: var(--teal-700); }
.is-inner .i-card h3 { margin: 0; font-size: 1.15rem; font-weight: 700; }
.is-inner .i-card p { margin: 10px 0 0; font-size: 15px; line-height: 1.7; color: var(--muted); }
.is-inner .i-card a { margin-top: 14px; }
@media (min-width: 640px) { .is-inner .i-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .is-inner .i-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .is-inner .i-card { transition: none; } .is-inner .i-card:hover { transform: none; } }

/* ---------- loan hero ---------- */
.is-inner .i-hero { background: linear-gradient(180deg, var(--soft) 0%, var(--off) 100%); }
.is-inner .i-hero__grid { padding-top: 28px; padding-bottom: 64px; row-gap: 32px; }
.is-inner .i-hero h1 { font-family: var(--display); font-weight: 800; letter-spacing: -0.035em; color: var(--navy); }
.is-inner .i-hero h1 + p { color: var(--muted); }
.is-inner .i-hero nav ol a { color: var(--muted); }
.is-inner .i-hero__grid > div:first-child > span:first-of-type { width: 56px; height: 56px; border-radius: 18px; background: #fff; border: 1px solid var(--line); color: var(--teal-700); box-shadow: 0 8px 20px -12px rgb(22 43 77 / .35); }
.is-inner .i-hero ul > li { align-items: flex-start; }
.is-inner .i-stage { position: relative; }
.is-inner .i-stage__arch, .is-inner .i-stage__circle { display: none; }
.is-inner .i-stage > #explore { position: relative; z-index: 2; border-radius: 32px; box-shadow: var(--shadow-lift); }
@media (min-width: 1024px) {
  .is-inner .i-hero__grid { padding-top: 40px; padding-bottom: 104px; }
  .is-inner .i-stage { padding: 40px 0 12px; }
  .is-inner .i-stage__arch { display: grid; position: absolute; z-index: 0; width: 66%; right: -9%; top: 0; border-radius: 999px 999px 36px 36px; }
  .is-inner .i-stage__circle { display: grid; position: absolute; z-index: 3; width: 88px; left: -84px; top: -22px; border-radius: 50%; box-shadow: 0 0 0 8px var(--soft); }
  .is-inner .i-stage__circle .ph__name, .is-inner .i-stage__circle .ph__size { display: none; }
  .is-inner .i-stage__arch .ph__label { margin-bottom: 40%; }
}

/* ---------- split (image + copy) ---------- */
.is-inner .i-split { display: grid; gap: 36px; align-items: start; }
.is-inner .i-split__side .ph { margin-top: 28px; aspect-ratio: 16 / 10; border-radius: 28px; }
.is-inner .i-split__main > ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
  .is-inner .i-split { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 72px; }
  .is-inner .i-split--rev { grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); }
  .is-inner .i-split--rev .i-split__side { order: 2; }
  .is-inner .i-split__side { position: sticky; top: 112px; }
  .is-inner .i-split__side .ph { aspect-ratio: 9 / 10; border-radius: 32px 180px 32px 32px; }
  .is-inner .i-split--rev .i-split__side .ph { border-radius: 180px 32px 32px 32px; }
}
/* checklist */
.is-inner .i-checks > li { display: flex; gap: 16px; padding: 22px 24px; border-radius: 24px; background: #fff; border: 1px solid var(--line); }
.is-inner .i-checks > li > span:first-child { width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--teal-700); font-size: 15px; }
.is-inner .i-checks h3, .is-inner .i-steps h3 { margin: 0; font-size: 1.1rem; font-weight: 700; }
.is-inner .i-checks p, .is-inner .i-steps p { margin: 8px 0 0; font-size: 15px; line-height: 1.7; color: var(--muted); }
/* steps */
.is-inner .i-steps > li { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; padding: 24px; border-radius: 24px; background: #fff; border: 1px solid var(--line); }
.is-inner .i-steps > li > span:first-child { grid-row: span 2; width: 44px; height: 44px; background: var(--blue); }
.is-inner .i-steps > li h3 { margin-top: 0; align-self: center; }
.is-inner .i-steps > li p { margin-top: 6px; }
.is-inner .i-bg-s .i-checks > li, .is-inner .i-bg-s .i-steps > li { background: #fff; }

/* ---------- eligibility ---------- */
.is-inner .i-elig dl { display: grid; gap: 14px; border: 0; }
.is-inner .i-elig dl > div { padding: 22px 26px; border-radius: 24px; background: #fff; border: 1px solid var(--line); }
.is-inner .i-elig dt { font-family: var(--display); font-weight: 700; color: var(--navy); }
.is-inner .i-elig [class*="border-l-4"] { border-radius: 24px; border: 1px solid rgb(21 166 140 / .35); background: var(--teal-50); }

/* ---------- costs ---------- */
.is-inner .i-costs dl { margin-top: 0; }
.is-inner .i-costs dl > div { padding: 26px 28px; border-radius: 24px; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--teal); }
.is-inner .i-costs dt { font-family: var(--display); font-weight: 700; color: var(--navy); }
.is-inner .i-note { max-width: 46rem; margin: 28px auto 0; border-radius: 24px; background: var(--soft); border-color: var(--line-2); }

/* ---------- responsible-borrowing panel ---------- */
.is-inner .i-sec--resp { padding-top: 24px; }
.is-inner .i-panel { padding: 36px 24px; border-radius: 32px; background: var(--navy); color: #fff; }
.is-inner .i-panel__top { display: grid; gap: 36px; align-items: center; }
.is-inner .i-panel__copy h2 { color: #fff; }
.is-inner .i-panel__copy p { color: rgb(255 255 255 / .78); }
.is-inner .i-panel__img { aspect-ratio: 5 / 4; border-radius: 28px; }
.is-inner .i-habits { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 14px; background: transparent; border-radius: 0; overflow: visible; }
.is-inner .i-habit { padding: 24px; border-radius: 22px; background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .12); }
.is-inner .i-habit > span:first-child { width: 40px; height: 40px; }
.is-inner .i-habit h3 { color: #fff; font-size: 1.1rem; font-weight: 700; margin: 18px 0 0; }
.is-inner .i-habit p { margin: 8px 0 0; font-size: 15px; line-height: 1.65; color: rgb(255 255 255 / .78); }
@media (min-width: 640px) { .is-inner .i-habits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .is-inner .i-panel { padding: 64px; border-radius: 40px; }
  .is-inner .i-panel__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; }
  .is-inner .i-habits { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 52px; }
}

/* ---------- related ---------- */
.is-inner .i-related ul.divide-y { background: #fff; border-radius: 28px; border-color: var(--line); overflow: hidden; }
.is-inner .i-related ul.divide-y a { padding: 22px 24px; }
.is-inner .i-related ul.divide-y a > span:first-child { width: 48px; height: 48px; border-radius: 16px; }
.is-inner .i-related li.rounded-xl { border-radius: 20px; background: #fff; padding: 18px 20px; transition: border-color .2s, transform .2s; }
.is-inner .i-related li.rounded-xl:hover { border-color: var(--blue); transform: translateX(3px); }
.is-inner .i-related h3 { font-size: 1.1rem; font-weight: 700; }

/* ---------- FAQ ---------- */
.is-inner .i-faq__grid h2 { }
.is-inner .i-faq__panel { padding: 4px 28px; border-radius: 28px; background: #fff; border: 1px solid var(--line); }
.is-inner .i-faq__panel > div:last-child { border-bottom: 0; }
@media (min-width: 1024px) { .is-inner .i-faq__grid > .i-head, .is-inner .i-faq__grid > div:first-child { position: sticky; top: 112px; align-self: start; } }

/* ---------- tail: sources, CTA, disclosure ---------- */
.is-inner .i-sec--tail { padding-top: 64px; background: var(--off); }
.is-inner .i-sources { border-top: 0; padding: 28px; border-radius: 24px; background: #fff; border: 1px solid var(--line); }
.is-inner .i-cta { position: relative; overflow: hidden; border-radius: 32px; background: var(--blue-700); }
.is-inner .i-cta::before { content: ""; position: absolute; width: 360px; height: 360px; right: -120px; top: -160px; border-radius: 50%; background: rgb(255 255 255 / .08); }
.is-inner .i-cta > * { position: relative; }
.is-inner .i-cta h2 { font-family: var(--display); letter-spacing: -0.028em; }
.is-inner .i-disclosure { border-radius: 24px; }

/* ---------- bad credit: green / red flags ---------- */
.is-inner .i-flags { margin-top: 44px; gap: 20px; }
.is-inner .i-flag { border-radius: 32px; padding: 32px; }
.is-inner .i-flag h3 { font-size: 1.2rem; font-weight: 700; }
.is-inner .i-flag.bg-white { border: 1px solid rgb(21 166 140 / .4); box-shadow: 0 18px 40px -30px rgb(22 43 77 / .4); }
/* home improvement: project-size rows */
.is-inner .i-rows > li { border-radius: 24px; border: 1px solid var(--line); background: #fff; padding: 20px 24px; }
.is-inner .i-split__main .i-note { margin: 20px 0 0; max-width: none; }

/* =====================================================================
   Guides, pay-later articles and hubs  (.is-doc)
   ===================================================================== */
.is-doc .i-hero--doc { background: linear-gradient(180deg, var(--soft) 0%, var(--off) 100%); border: 0; overflow: hidden; }
.is-doc .i-dochero__grid { display: grid; gap: 32px; padding-top: 28px; padding-bottom: 56px; }
.is-doc .i-dochero__copy h1 { font-family: var(--display); font-weight: 800; letter-spacing: -0.035em; color: var(--navy); }
.is-doc .i-dochero__copy h1 + p { color: var(--muted); }
.is-doc .i-dochero__copy nav ol { color: var(--muted); }
.is-doc .i-stage { padding: 0; }
.is-doc .i-takeaways { position: relative; z-index: 2; margin: 0; padding: 28px; border-radius: 28px; background: #fff; border: 1px solid rgb(21 166 140 / .35); box-shadow: var(--shadow-lift); }
.is-doc .i-takeaways h2 { font-family: var(--display); font-weight: 700; }
@media (min-width: 1024px) {
  .is-doc .i-dochero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 72px; align-items: center; padding-top: 44px; padding-bottom: 84px; }
  .is-doc .i-stage { position: relative; padding: 28px 0; }
  .is-doc .i-stage__arch { display: grid; position: absolute; z-index: 0; width: 62%; right: -8%; top: -8px; bottom: -8px; height: auto; aspect-ratio: auto; border-radius: 999px 999px 36px 36px; }
}

/* body */
.is-doc .i-docbody { padding-top: 24px; }
.is-doc .i-prose h2 { font-family: var(--display); font-weight: 700; letter-spacing: -0.025em; color: var(--navy); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.18; text-wrap: balance; }
.is-doc .i-prose h3 { font-family: var(--display); font-weight: 700; color: var(--navy); }
.is-doc .i-prose ul[class*="list-disc"] li::marker { color: var(--teal); }
.is-doc .i-prose ol[class*="list-decimal"] li::marker { color: var(--blue-700); font-weight: 700; }
.is-doc .i-prose a:not(.i-linkcard):not([class*="rounded-full"]) { text-underline-offset: 4px; }
.is-doc .i-prose figure:not(.ph) { margin-top: 32px; margin-bottom: 32px; border-radius: 24px; background: #fff; border: 1px solid var(--line); overflow: hidden; }
.is-doc .i-prose figure:not(.ph) figcaption { padding: 12px 20px 16px; }
.is-doc .i-prose [class*="border-l-4"], .is-doc .i-prose [class*="border-l-"][class*="rounded"] { border-radius: 20px; }
.is-doc .i-prose [class*="rounded-2xl"], .is-doc .i-prose [class*="rounded-xl"] { border-radius: 22px; }
.is-doc .i-toc nav { border: 1px solid var(--line); border-radius: 24px; background: #fff; padding: 12px 10px; }
.is-doc .i-toc nav a { border-radius: 12px; transition: background .15s, color .15s; }
.is-doc .i-toc nav a:hover { background: var(--soft); color: var(--blue-700); }
.is-doc .i-docbody details { border-radius: 24px; background: #fff; border: 1px solid var(--line); }
.is-doc .i-docbody section[class*="mt-16"] { padding-top: 8px; }
.is-doc section[class*="mt-16"] > div.border-t { margin-top: 20px; padding: 4px 26px; border: 1px solid var(--line); border-radius: 28px; background: #fff; }
.is-doc section[class*="mt-16"] > div.border-t > div:last-child { border-bottom: 0; }
.is-doc section[class*="mt-16"] > h2 { font-family: var(--display); letter-spacing: -0.025em; color: var(--navy); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
.is-doc div[class*="mt-16"][class*="space-y-8"] > div:first-child { padding: 26px 28px; border-radius: 28px; background: #fff; border: 1px solid var(--line); }
.is-doc div[class*="mt-16"][class*="space-y-8"] h2 { font-family: var(--display); }

/* link cards with an image on top */
.is-doc .i-linkcard, .is-about .i-linkcard { overflow: hidden; border-radius: 28px; padding: 14px; gap: 0; transition: transform .2s, box-shadow .2s, border-color .2s; }
.is-doc .i-linkcard:hover, .is-about .i-linkcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.is-doc .i-linkcard .i-thumb, .is-about .i-linkcard .i-thumb { aspect-ratio: 16 / 7; border-radius: 18px; margin-bottom: 14px; }
.is-doc .i-linkcard .i-thumb .ph__label, .is-about .i-linkcard .i-thumb .ph__label { flex-direction: row; gap: 8px; padding: 6px 12px; }
.is-doc .i-linkcard .i-thumb .ph__icon, .is-about .i-linkcard .i-thumb .ph__icon { width: 18px; height: 18px; }
.is-doc .i-linkcard .i-thumb .ph__size, .is-about .i-linkcard .i-thumb .ph__size { display: none; }
.is-doc .i-linkcard > span, .is-about .i-linkcard > span { margin-inline: 8px; }
.is-doc .i-linkcard > span:last-child, .is-about .i-linkcard > span:last-child { margin-bottom: 8px; }
.is-doc .i-keep { background: var(--soft); border: 0; }
.is-doc .i-keep h2 { font-family: var(--display); letter-spacing: -0.028em; color: var(--navy); }
@media (prefers-reduced-motion: reduce) { .is-doc .i-linkcard, .is-about .i-linkcard { transition: none; } }

/* ---------- about / contact / legal ---------- */
.is-doc .i-dochero__grid--plain { display: grid; gap: 32px; padding-top: 28px; padding-bottom: 52px; }
.is-doc .i-stage--plain { display: none; }
.is-doc .i-stage--plain .i-stage__circle { display: none; }
.is-doc.is-legal .i-hero--doc { background: linear-gradient(180deg, var(--soft) 0%, var(--off) 100%); }
.is-doc.is-legal .i-dochero__grid--plain { padding-bottom: 44px; }
.is-doc.is-legal .i-prose h2 { padding-top: 6px; }
.is-doc .i-aboutbody__img { display: none; }
@media (min-width: 1024px) {
  .is-doc .i-dochero__grid--plain { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 72px; align-items: center; padding-top: 44px; padding-bottom: 84px; }
  .is-doc.is-legal .i-dochero__grid--plain { grid-template-columns: minmax(0, 1fr); padding-bottom: 52px; }
  .is-doc .i-stage--plain { display: block; position: relative; min-height: 340px; }
  .is-doc .i-stage--plain .i-stage__arch { display: grid; position: absolute; inset: 0 8% 0 auto; width: 70%; height: 100%; aspect-ratio: auto; border-radius: 999px 999px 36px 36px; }
  .is-doc .i-stage--plain .i-stage__circle { display: grid; position: absolute; width: 110px; left: 6%; bottom: 14%; border-radius: 50%; box-shadow: 0 0 0 8px var(--soft); }
  .is-doc .i-stage--plain .i-stage__circle .ph__name, .is-doc .i-stage--plain .i-stage__circle .ph__size { display: none; }
  .is-doc .i-aboutbody { display: grid; grid-template-columns: minmax(0, 68ch) minmax(0, 1fr); gap: 72px; align-items: start; }
  .is-doc .i-aboutbody__img { display: grid; position: sticky; top: 112px; border-radius: 32px 180px 32px 32px; }
}
/* 404 */
.is-404 main { background: linear-gradient(180deg, var(--soft), var(--off)); }
.is-404 .i-404 h1 { font-family: var(--display); letter-spacing: -0.03em; color: var(--navy); }

/* Loan hero photo V5 — compact accent arch, sized closer to homepage.
   Only applies to desktop loan pages. Cards, headings, and mobile stay unchanged. */
@media (min-width: 1280px) {
  .is-loan .i-stage__arch {
    right: -12%;
    width: 56%;
    height: 76%;
    top: 10%;
    bottom: auto;
    aspect-ratio: auto;
    overflow: hidden;
    border-radius: 180px 180px 30px 30px;
  }
  .is-loan .i-stage__arch img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 35%;
  }
  .is-loan .i-stage > #explore { position: relative; z-index: 2; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .is-loan .i-stage__arch {
    right: -7%;
    width: 55%;
    height: 74%;
    top: 11%;
    bottom: auto;
    aspect-ratio: auto;
    overflow: hidden;
    border-radius: 160px 160px 28px 28px;
  }
  .is-loan .i-stage__arch img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 35%;
  }
}

/* Part 5 card thumbnails: keep the existing card crop and spacing. */
.i-thumb:has(> .part5-thumbnail) { display:block; overflow:hidden; position:relative; }
.i-thumb > .part5-thumbnail { width:100%; height:100%; display:block; object-fit:cover; object-position:center; }

/* ---------- loan hero v2 (picture peeks out around the card, like the homepage). Personal loans first. ---------- */
@media (min-width: 1024px) {
  .is-inner .i-hero--v2 .i-stage { padding: 96px 0 12px; }
  .is-inner .i-hero--v2 .i-stage > #explore { max-width: 470px; }
  .is-inner .i-hero--v2 .i-stage__arch { right: 0; width: 56%; aspect-ratio: auto; height: 500px; top: 0; border-radius: 999px 999px 36px 36px; }
  .is-inner .i-hero--v2 .i-stage__circle { left: 3%; top: 0; width: 96px; }
}
@media (min-width: 1024px) {
  .is-inner .i-hero--v2 .i-stage { padding-top: 84px; }
  .is-inner .i-hero--v2 .i-stage__arch img { object-position: 12% 25%; }
}

/* personal loans hero: compact card + smaller picture so the whole hero fits on first view */
@media (min-width: 1024px) {
  .is-inner .i-hero--v2 .i-hero__grid { padding-top: 24px; padding-bottom: 72px; }
  .is-inner .i-hero--v2 .i-stage { padding-top: 60px; padding-bottom: 0; }
  .is-inner .i-hero--v2 .i-stage__arch { width: 52%; height: 400px; }
  .is-inner .i-hero--v2 .i-stage__circle { width: 80px; left: 4%; top: -30px; }
  .is-inner .i-hero--v2 #explore > div.bg-navy { padding: 18px 26px 20px; }
  .is-inner .i-hero--v2 #explore h2 { font-size: 1.2rem; }
  .is-inner .i-hero--v2 #explore output { font-size: 3rem; }
  .is-inner .i-hero--v2 #explore .bg-navy > .mt-5 { margin-top: 10px; }
  .is-inner .i-hero--v2 #explore .bg-navy > .mt-4 { margin-top: 6px; }
  .is-inner .i-hero--v2 #explore [aria-label="Quick amounts"] button { height: 40px; }
  .is-inner .i-hero--v2 #explore > div:last-child { padding: 16px 26px 18px; }
  .is-inner .i-hero--v2 #explore > div:last-child > p { line-height: 1.55; }
  .is-inner .i-hero--v2 #explore > div:last-child > .mt-6 { margin-top: 14px; }
  .is-inner .i-hero--v2 #explore a[data-apply-cta] { height: 50px; }
}
@media (min-width: 1024px) {
  /* keep each hero subject's face in the strip that stays visible beside the card */
  .is-inner .i-hero--v2 [data-img-slot="emergency-loans-hero"] img,
  .is-inner .i-hero--v2 [data-img-slot="medical-loans-hero"] img,
  .is-inner .i-hero--v2 [data-img-slot="bad-credit-loans-hero"] img,
  .is-inner .i-hero--v2 [data-img-slot="home-improvement-loans-hero"] img { object-position: 0% 25%; }
}

/* doc hero v2 (pay later hub first): picture peeks out beside / above the takeaways card */
@media (min-width: 1024px) {
  .is-doc .i-hero--doc2 .i-stage { padding: 44px 0 0; }
  .is-doc .i-hero--doc2 .i-takeaways { max-width: 410px; }
  .is-doc .i-hero--doc2 .i-stage__arch { top: 0; right: -48px; bottom: 30px; width: 50%; height: auto; aspect-ratio: auto; }
  .is-doc .i-hero--doc2 .i-stage__arch img { object-position: 0% 25%; }
}