/* ==========================================================================
   MyDebtRep landing page — "Gino Final" structure (client's original page,
   restyled). Tokens, reset, top strip, header and hero live inline in
   index.html (critical CSS). Everything from the FTC card down is here.
   Breakpoints: 460px, 760px, 1100px — taken from the design reference's own
   JS (renderVals in the .dc.html), which is the source of truth here.

   A note on the grids below: the handoff README's breakpoint table disagrees
   with the reference file's actual JS in four places (law grid, step grid,
   logo grid, FAQ grid) — the table shows one extra intermediate tier that the
   live component's ternary logic never produces (e.g. it lists a 2-column
   tier for the law cards that the JS has no branch for). Every grid-column
   value below matches what the reference file actually renders, not the
   prose table, per the handoff's own instruction to treat the file as the
   source of truth ("read the file for exact... values").
   ========================================================================== */

/* --------------------------------------------------------------- shared */

.sec{padding:56px 0}
.sec--tight{padding:34px 0}
.h2{font-family:var(--display);font-size:clamp(1.9rem,3vw,3rem);font-weight:800;letter-spacing:-.025em;text-align:center;color:var(--navy)}
.block-title{font-family:var(--display);font-size:17px;font-weight:800;color:var(--navy);margin:0}
@media (max-width:759px){.sec{padding:42px 0}.sec--tight{padding:42px 0}}

/* ------------------------------------------------------- 4. FTC card */

.ftc{margin-top:30px;display:grid;grid-template-columns:1fr;gap:26px;padding:28px;align-items:center}
.h2-ftc{text-align:left;font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2.35rem);font-weight:800;letter-spacing:-.025em;color:var(--navy);line-height:1.15;margin-top:12px}
.ftc__body{font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--text-muted);margin-top:12px}
.ftc__aside{background:var(--surface);border:1px solid var(--border);border-radius:15px;padding:20px;display:grid;gap:14px}
.ftc__aside-title{font-family:var(--display);color:var(--navy)}
.ftc__aside-body{color:var(--text-muted);margin:0}
@media (min-width:1100px){.ftc{grid-template-columns:1fr .72fr}}

/* --------------------------------------------------- 5. Wide banner */

.banner{margin-top:34px;padding:18px 24px;border-radius:16px;background:var(--band);color:#fff;text-align:center;box-shadow:var(--shadow)}
.banner__title{display:block;font-family:var(--display);font-size:clamp(1.4rem,2.4vw,2rem)}
.banner__sub{font-weight:650;opacity:.95}

/* ---------------------------------------------------- 6. Your rights */

.laws{display:grid;grid-template-columns:1fr;gap:14px;margin-top:28px}
.law{padding:22px 16px;text-align:center}
.law__badge{width:54px;height:54px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--blue-bg);color:var(--blue);font-family:var(--display);font-weight:900;font-size:16px}
.law__badge--sm{font-size:14px}
.law__badge--xs{font-size:13px}
.law__title{font-family:var(--display);font-size:17px;color:var(--navy)}
.law__desc{color:var(--text-muted);font-size:14px;margin-top:8px}
@media (min-width:460px){.laws{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1100px){.laws{grid-template-columns:repeat(5,1fr)}}

/* ---------------------------------------------------- 7. Resources */

.resources{display:grid;grid-template-columns:1fr;gap:24px}
.resource{padding:28px;display:grid;gap:18px}
.resource__title{font-family:var(--display);font-size:1.5rem;color:var(--navy);margin-top:6px}
.resource__tag{margin:0}
.resource__visual{min-height:210px;border-radius:15px;background:linear-gradient(135deg,var(--blue-bg),#fff);border:1px solid var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;gap:8px}
.resource__icon{font-size:6rem}
.resource__icon--cyan{color:var(--cyan)}
.resource__icon--blue{font-size:5.5rem;color:var(--blue)}
.resource__visual-text{color:var(--text-muted);margin:0}
.resource__list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px;text-align:left}
@media (min-width:760px){.resources{grid-template-columns:1fr 1fr}}

/* -------------------------------------------------- 8. How it works */

.steps{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.step{padding:20px 13px;text-align:center}
.step__num{width:30px;height:30px;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--blue);color:#fff;font-family:var(--display);font-weight:800}
.step__emoji{font-size:2rem;margin-bottom:8px}
.step__title{font-family:var(--display);font-size:17px;color:var(--navy)}
.step__desc{color:var(--text-muted);font-size:14px;margin-top:8px}
@media (min-width:460px){.steps{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1100px){.steps{grid-template-columns:repeat(7,1fr)}}

/* --------------------------------------------------- 9. Debt buyers */

.logos{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.logo{min-height:88px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px;text-align:center;font-family:var(--display);font-weight:900;color:var(--navy)}
.logo small{display:block;font-weight:700;color:var(--text-muted);margin-top:3px}
@media (min-width:460px){.logos{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1100px){.logos{grid-template-columns:repeat(7,1fr)}}

.columns3{display:grid;grid-template-columns:1fr;gap:22px;margin-top:28px}
.agencies,.news-block,.callout{padding:24px}
.agencies__grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;margin-top:16px}
.agencies__grid span{color:var(--text-muted);font-size:14px;display:flex;gap:6px}
.agencies__grid span[aria-hidden]{flex-shrink:0}
.news{display:grid;grid-template-columns:1fr;gap:14px;margin-top:16px}
.news__item{border:1px solid var(--border);border-radius:13px;padding:16px;background:var(--surface)}
.news__item time{color:var(--text-muted);font-size:13px}
.news__title{font-family:var(--display);font-size:16px;color:var(--navy);margin:7px 0}
.news__body{color:var(--text-muted);font-size:14px;margin:0 0 8px}
.news__link{font-weight:850;font-size:14px}
.callout__body{color:var(--text-muted);margin:12px 0 18px}
@media (min-width:760px){.news{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1100px){.columns3{grid-template-columns:1fr 1.4fr .86fr}}

/* ----------------------------------------------------------- 10. FAQ */

.faq{display:grid;grid-template-columns:1fr;gap:14px;margin-top:28px}
.faq__item{padding:0 16px}
.faq__q{font-weight:800;padding:16px 0;color:var(--navy);display:flex;justify-content:space-between;gap:14px;align-items:center}
.faq__q::after{content:"+";font-family:var(--display);font-weight:600;color:var(--blue);flex-shrink:0}
.faq__item[open] .faq__q::after{content:"–"}
.faq__a{color:var(--text-muted);padding:0 0 16px;margin:0}
@media (min-width:760px){.faq{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.faq{grid-template-columns:repeat(3,1fr)}}

/* ----------------------------------------------- 11+12. Stats + final */

.stats{display:grid;grid-template-columns:1fr;border-radius:18px;overflow:hidden;background:var(--band);color:#fff}
.stat{padding:24px;text-align:center;border-bottom:1px solid rgba(255,255,255,.25)}
.stat:last-child{border-bottom:0}
.stat__num{display:block;font-family:var(--display);font-size:1.75rem}
.stat__label{opacity:.9;font-size:14px}
@media (min-width:460px){
  .stats{grid-template-columns:1fr 1fr}
  .stat{border-right:1px solid rgba(255,255,255,.25);border-bottom:1px solid rgba(255,255,255,.25)}
  .stat:nth-child(2n){border-right:0}
  .stat:nth-last-child(-n+2){border-bottom:0}
}
@media (min-width:760px){
  .stats{grid-template-columns:repeat(4,1fr)}
  .stat{border-bottom:0}
  .stat:last-child{border-right:0}
}

.final{display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;gap:24px;padding:28px;margin-top:22px;border:1px solid var(--border);border-radius:18px;background:var(--surface);text-align:center}
.h2-final{text-align:left;font-family:var(--display);font-size:clamp(1.7rem,3vw,2.6rem);font-weight:800;letter-spacing:-.025em;color:var(--navy)}
.final__sub{font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--text-muted);margin-top:8px}
.final__badges{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.badge-btn{min-width:160px;padding:11px 18px;border-radius:10px;background:var(--navy);color:#fff;text-align:center;font-family:var(--display);font-weight:850}
.badge-btn:hover{background:#001347;color:#fff}
.disclaimer{font-size:13px;color:var(--text-muted);margin-top:18px;text-align:center}
@media (min-width:760px){
  .final{flex-direction:row;align-items:center;text-align:left}
  .h2-final{text-align:left}
  .final__badges{justify-content:flex-start}
}

/* -------------------------------------------------------- 13. Footer */

.footer{background:var(--navy);color:#fff;padding:26px 0}
.footer__inner{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:14px}
.footer__links{display:flex;gap:18px;flex-wrap:wrap}
.footer__links a{color:#fff}
.footer__links a:hover{color:#fff;text-decoration:underline}

/*
    FROM ORIGINAL PAGE: 

*/


@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url(assets/fonts/inter-var.woff2) format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

@font-face {
    font-family: Manrope;
    font-style: normal;
    font-weight: 700 800;
    font-display: swap;
    src: url(assets/fonts/manrope-var.woff2) format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

:root {
    --navy: #001D66;
    --blue: #014DDE;
    --cyan: #1CC2DE;
    --blue-bg: #F2F8FF;
    --surface: #F8FAFC;
    --border: #D6E4FA;
    --text-muted: #5A6B85;
    --band: linear-gradient(90deg,#001D66,#014DDE);
    --shadow: 0 12px 30px rgba(7,50,127,.10);
    --sans: Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
    --display: Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;
    --header-h: 76px;
}

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

html {
    scroll-behavior: smooth
}

@media (prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }
}

body {
    margin: 0;
    background: #fff;
    color: var(--navy);
    font-family: var(--sans);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased
}

h1, h2, h3, p {
    margin: 0
}

img {
    display: block;
    max-width: 100%
}

a {
    color: var(--blue);
    text-decoration: none
}

    a:hover {
        color: var(--navy)
    }

:where(a,button,summary):focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
    border-radius: 4px
}

[id] {
    scroll-margin-top: var(--header-h)
}

details summary {
    list-style: none;
    cursor: pointer
}

    details summary::-webkit-details-marker {
        display: none
    }

.container {
    width: min(1240px,calc(100% - 32px));
    margin-inline: auto
}

@media (max-width:459px) {
    .container {
        width: calc(100% - 20px)
    }
}

.eyebrow {
    margin: 0 0 10px;
    color: var(--blue);
    font-family: var(--display);
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: 14px
}

.eyebrow--center {
    text-align: center
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap
}

.card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow)
}

/* 1. Top strip */
.topbar {
    background: var(--navy);
    color: #fff;
    text-align: center;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 700
}

    .topbar span[aria-hidden] {
        opacity: .6
    }

/* 2. Header */
.header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.97);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px)
}

.header__inner {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px
}

.header__logo {
    height: 52px;
    width: auto
}

.nav {
    display: none;
    gap: 24px;
    align-items: center;
    font-weight: 750;
    font-size: 15px
}

    .nav a:not(.nav__cta) {
        color: var(--navy)
    }

.nav__cta {
    background: var(--blue);
    color: #fff;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 12px;
    font-family: var(--display);
    font-weight: 850;
    font-size: 14px;
    display: flex;
    align-items: center;
    transition: background-color .15s ease
}

    .nav__cta:hover {
        background: #0142bd;
        color: #fff
    }

.burger {
    border: 1px solid var(--border);
    background: #fff;
    color: var(--navy);
    border-radius: 10px;
    padding: 10px 14px;
    font-family: var(--display);
    font-weight: 800;
    cursor: pointer;
    min-height: 44px;
    display: flex;
    align-items: center
}

.menu {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    visibility: hidden
}

    .menu.is-open {
        grid-template-rows: 1fr;
        visibility: visible
    }

.menu__inner {
    overflow: hidden
}

.menu__panel {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: 18px;
    margin: 0 0 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-weight: 750;
    font-size: 16px
}

    .menu__panel a:not(.nav__cta) {
        color: var(--navy)
    }

    .menu__panel .nav__cta {
        min-height: 44px;
        justify-content: center
    }

@media (min-width:1100px) {
    .nav {
        display: flex
    }

    .burger {
        display: none
    }

    .menu {
        display: none
    }
}

/* 3. Hero */
.hero {
    background: linear-gradient(180deg,var(--surface),#fff);
    padding: 62px 0 30px
}

.hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 48px
}

.hero h1 {
    font-family: var(--display);
    font-size: clamp(2.6rem,6vw,5.2rem);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.05;
    color: var(--navy)
}

.hero__lead {
    font-size: clamp(1.05rem,1.6vw,1.3rem);
    color: var(--text-muted);
    max-width: 720px;
    margin-top: 22px
}

.hero__left {
    display: grid;
    gap: 22px
}

.checklist {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px 24px;
    margin-top: 4px
}

    .checklist div {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-weight: 750
    }

    .checklist span.badge {
        flex: 0 0 23px;
        height: 23px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--blue);
        color: #fff;
        font-size: 12px;
        margin-top: 1px
    }

.hero__cta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 50px;
    padding: 0 22px;
    border-radius: 12px;
    font-family: var(--display);
    font-weight: 850;
    transition: background-color .15s ease,color .15s ease,border-color .15s ease
}

.btn-primary {
    background: var(--blue);
    color: #fff;
    box-shadow: 0 10px 24px rgba(1,77,222,.25)
}

    .btn-primary:hover {
        background: #0142bd;
        color: #fff
    }

.btn-outline {
    background: #fff;
    color: var(--blue);
    border: 2px solid var(--blue)
}

    .btn-outline:hover {
        background: var(--blue-bg);
        color: var(--blue)
    }

.btn-sm {
    min-height: 42px;
    padding: 0 16px;
    font-size: 14px
}

.founder {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: end;
    max-width: 720px;
    margin: 0 auto
}

.founder__photo-card {
    overflow: hidden;
    border-radius: 26px
}

.founder__photo {
    width: 100%;
    aspect-ratio: 1/1.08;
    object-fit: cover;
    object-position: center 22%
}

.founder__card {
    padding: 24px
}
/* Styled as the source's h3, but not one — the H1 sits right above it in the
               hero with no H2 between, and this label isn't really a section heading. */
.founder__name {
    font-family: var(--display);
    font-size: 1.35rem;
    font-weight: 800;
    margin-bottom: 14px;
    color: var(--navy)
}

.founder__list {
    display: grid;
    gap: 11px;
    list-style: none;
    margin: 0;
    padding: 0
}

    .founder__list li {
        display: flex;
        gap: 9px;
        font-weight: 750;
        color: var(--text-muted)
    }

        .founder__list li span[aria-hidden] {
            color: var(--blue);
            font-weight: 900
        }

@media (min-width:760px) {
    .checklist {
        grid-template-columns: 1fr 1fr
    }

    .founder {
        grid-template-columns: 1fr .72fr
    }
}

@media (min-width:1100px) {
    .hero__grid {
        grid-template-columns: 1.12fr .88fr
    }

    .founder {
        max-width: none;
        margin: 0
    }
}