/* ==========================================================================
   MyDebtRep landing page — "V3 outcome-led" design, the handoff's recommended
   direction. Tokens, reset, floating header and hero live inline in
   index.html (critical CSS). Everything from the credibility band down is
   here. Single breakpoint: 900px.
   ========================================================================== */

.sec{padding:clamp(56px,7vw,88px) 0}
.h2{font-family:var(--display);font-size:clamp(28px,3.6vw,42px);font-weight:800;line-height:1.14;letter-spacing:-.8px;margin:0}

.chip{font-family:var(--display);font-size:15px;font-weight:700;color:var(--navy);white-space:nowrap}
.chip--link{background:#fff;border:1.5px solid #C6DAF7;border-radius:999px;padding:13px 24px;text-decoration:none;display:inline-flex;align-items:center;gap:9px;transition:border-color .15s ease,background-color .15s ease,color .15s ease}
.chip--link:hover{background:var(--blue-bg);color:var(--navy);text-decoration:none}
.chip--cream{border-color:var(--cream-border)}
.chip--cream:hover{background:var(--cream-bg)}

/* --------------------------------------------------- 3. Credibility band */

.credibility{background:var(--cream-bg)}
.credibility__inner{padding-block:52px;display:flex;align-items:center;justify-content:space-between;gap:34px;flex-wrap:wrap}
.credibility__text{flex:1 1 400px;min-width:300px}
.credibility__title{font-family:var(--display);font-size:clamp(24px,3vw,34px);font-weight:800;line-height:1.2;letter-spacing:-.6px}
.credibility__sub{font-size:17px;color:var(--text-muted);margin-top:10px;max-width:520px}
.credibility__chips{display:flex;gap:10px;flex-wrap:wrap;align-items:center;flex:0 1 auto}
.credibility .chip:not(.chip--link){background:#fff;border:1px solid var(--cream-border);border-radius:999px;padding:9px 18px}
.credibility .chip--link{border-color:var(--navy);padding:9px 18px}
.credibility .chip--link:hover{background:var(--navy);color:#fff}

/* -------------------------------------------------- 4. How it works */

.how__head{max-width:620px;margin-bottom:44px}
.how__sub{font-size:19px;color:var(--text-muted);margin-top:14px}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:20px}
/* Below the 900px column breakpoint this becomes a one-card-at-a-time
   carousel — full width, no peek of the next card — with the dots below
   tracking (and controlling) which one is in view. Swipe/trackpad scroll
   stays native; only the dots are driven by JS. */
@media (max-width:899px){
  .steps{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;
         scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain}
  .steps::-webkit-scrollbar{display:none}
  .step{flex:0 0 100%;scroll-snap-align:start}
}

.steps-dots{display:none}
@media (max-width:899px){
  .steps-dots{display:flex;justify-content:center;align-items:center;gap:4px;margin-top:16px}
  .dot{width:32px;height:32px;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
  .dot::before{content:"";width:8px;height:8px;border-radius:999px;background:var(--blue-border);transition:background-color .2s ease,width .2s ease}
  .dot.is-active::before{background:var(--blue);width:22px}
}
.step{border-radius:22px;overflow:hidden;display:flex;flex-direction:column}
.step--navy{background:var(--navy)}
.step--blue{background:var(--blue)}
.step--light{background:var(--blue-bg);border:1px solid var(--blue-border)}
.step__body{padding:30px 28px 22px}
.step__label{font-family:var(--display);font-size:13px;font-weight:800;color:var(--mint);letter-spacing:1.2px;margin:0 0 10px}
.step__label--blue{color:var(--blue)}
.step__title{font-family:var(--display);font-size:24px;font-weight:800;color:#fff;line-height:1.2;margin:0 0 10px}
.step--light .step__title{color:var(--navy)}
.step__desc{font-size:16px;color:rgba(255,255,255,.8);margin:0;line-height:1.6}
.step__desc--dark{color:var(--text-muted)}
.step__img-wrap{margin-top:auto;padding:0 20px 20px}
.step__img-wrap img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:16px}
@media (min-width:900px){.steps{grid-template-columns:repeat(3,1fr)}}

/* --------------------------------------------------- 5. Benefit panels */

.panels__inner{display:flex;flex-direction:column;gap:20px;padding-top:clamp(36px,5vw,56px);padding-bottom:0}
.panel{border-radius:26px;padding:clamp(28px,4vw,52px);display:flex;flex-direction:column;gap:clamp(28px,4vw,52px);align-items:center}
.panel--blue-bg{background:var(--blue-bg)}
.panel--cream-bg{background:var(--cream-bg)}
.panel--navy{background:var(--navy)}
.panel__text{min-width:0;width:100%}
.panel__eyebrow{font-family:var(--display);font-size:13px;font-weight:800;letter-spacing:1.2px;margin:0 0 14px}
.panel__title{font-family:var(--display);font-size:clamp(25px,3.2vw,36px);font-weight:800;margin:0 0 16px;line-height:1.16;letter-spacing:-.6px}
.panel__title--light{color:#fff}
.panel__body{font-size:18px;color:var(--text-muted);margin:0 0 26px;line-height:1.65}
.panel__body--light{color:rgba(255,255,255,.8)}
/* Classic padding-bottom aspect box, not the `aspect-ratio` property: tested
   directly and in this engine `aspect-ratio` loses to the <img>'s own
   width/height HTML attributes (used for CLS prevention) — the image
   rendered at the attributes' literal 600x450 pixels regardless of what
   aspect-ratio said. Stretching an absolutely-positioned <img> to fill a
   wrapper sized by padding-top sidesteps that interaction entirely. */
.panel__img-wrap{min-width:0;width:100%;position:relative;overflow:hidden;border-radius:20px}
.panel__img-wrap::before{content:"";display:block;padding-top:75%} /* 4:3 */
.panel__img-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:20px}
/* Panels stack to a single column below 900px, so the 4:3 ratio at full
   mobile width runs quite tall — shortened here so a card's image doesn't
   push its own CTA past the viewport. Row layout (≥900px) keeps 4:3. */
@media (max-width:899px){.panel__img-wrap::before{padding-top:62.5%}} /* 16:10 */
@media (max-width:479px){.panel__img-wrap::before{padding-top:56.25%}} /* 16:9 */
.panel__cta{background:var(--mint);color:var(--navy);font-size:17px;font-weight:800;border-radius:999px;padding:14px 28px}
.panel__cta:hover{background:#0fe6d0;color:var(--navy)}
@media (min-width:900px){
  .panel--a{flex-direction:row}
  .panel--b{flex-direction:row-reverse}
  /* flex-basis:380px only makes sense as a WIDTH hint once panels are a row
     (≥900px) — in the column layout below, the same value on a column flex
     container reads as a *height* basis instead and forces both the text
     block and the image wrapper to a 380px-tall minimum for no reason. */
  .panel__text,.panel__img-wrap{flex:1 1 380px}
}

/* -------------------------------------------------------- 6. Gino band */

.gino-band{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.gino-band__inner{padding-block:44px;display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.gino-band__photo{width:96px;height:96px;border-radius:50%;object-fit:cover;object-position:center 22%;flex-shrink:0}
.gino-band__text{flex:1 1 420px;min-width:280px}
.gino-band__quote{font-family:var(--display);font-size:clamp(19px,2.3vw,24px);font-weight:700;line-height:1.4;margin:0 0 8px}
.gino-band__byline{font-size:16px;color:var(--text-muted);margin:0}

/* -------------------------------------------------------- 7. Testimonials */

.testimonials__head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:34px}
.testimonials__h2{max-width:560px}
.testimonials__arrows{display:flex;gap:10px}
.arrow-btn{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--blue-border);display:flex;align-items:center;justify-content:center;cursor:pointer;background:#fff;padding:0;transition:border-color .15s ease,background-color .15s ease}
.arrow-btn:hover{border-color:var(--blue);background:var(--blue-bg)}
.testi-row{list-style:none;margin:0;padding:0 0 10px;display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
.testi-row::-webkit-scrollbar{display:none}
.testi{flex:0 0 min(400px,84vw);scroll-snap-align:start;border-radius:22px;padding:32px}
.testi--blue{background:var(--blue-bg)}
.testi--cream{background:var(--cream-bg)}
.testi__headline{font-family:var(--display);font-size:20px;font-weight:800;margin:0 0 12px}
.testi__quote{font-size:17px;color:#475569;line-height:1.65;margin:0 0 24px}
.testi__attr{display:flex;align-items:center;gap:13px}
.testi__avatar{width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:17px;font-weight:700;flex-shrink:0}
.testi__name{font-size:16px;font-weight:700;margin:0}
.testi__loc{font-size:15px;color:var(--text-faint);margin:0}

/* -------------------------------------------------------------- 8. Pricing */

.pricing{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.pricing__inner{padding-block:clamp(56px,7vw,84px);display:flex;gap:clamp(32px,5vw,64px);align-items:center;flex-wrap:wrap}
.pricing__text{flex:1 1 380px;min-width:290px}
.pricing__h2{margin-bottom:16px}
.pricing__sub{font-size:19px;color:var(--text-muted);margin:0 0 24px}
.pricing__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.pricing__list li{display:flex;align-items:center;gap:11px;font-size:17px;color:#334155}
.check-badge{width:22px;height:22px;border-radius:50%;background:var(--success-bg);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pricing__card-wrap{flex:1 1 340px;min-width:290px;max-width:440px}
.pricing-card{background:#fff;border-radius:24px;padding:34px;box-shadow:var(--shadow-pricing)}
.pricing-card__eyebrow{font-family:var(--display);font-size:13px;font-weight:800;color:var(--blue);letter-spacing:1.2px;margin:0 0 14px}
.pricing-card__price{display:flex;align-items:flex-end;gap:7px;margin:0 0 24px}
.pricing-card__amount{font-family:var(--display);font-size:clamp(42px,5vw,54px);font-weight:800;line-height:1;letter-spacing:-1.6px}
.pricing-card__period{font-size:18px;color:var(--text-faint);padding-bottom:7px}
.pricing-card__features{list-style:none;margin:0 0 26px;padding:0 0 26px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:13px}
.pricing-card__features li{font-size:17px;color:#334155}
.pricing-card__cta{width:100%;font-size:18px;font-weight:800;padding:16px;border-radius:999px;box-shadow:0 8px 24px rgba(1,77,222,.24)}
.pricing-card__login{font-size:15px;color:var(--text-faint);text-align:center;margin:14px 0 0}
.pricing-card__login a{font-weight:600}

/* -------------------------------------------------------------- 9. FAQ */

.faq__head{max-width:600px;margin-bottom:38px}
.faq{display:grid;grid-template-columns:1fr;gap:14px 24px;align-items:start}
.faq__item{border:1px solid #E4EBF5;border-radius:18px;background:#fff;overflow:hidden}
.faq__q{margin:0;font-size:inherit;font-weight:inherit}
.faq__q button{display:flex;align-items:center;gap:16px;padding:22px 24px;cursor:pointer;width:100%;background:none;border:0;text-align:left;font-family:var(--display);font-size:18px;font-weight:700;color:var(--navy);min-height:44px;transition:background-color .15s ease}
.faq__q button:hover{background:var(--surface)}
.faq__q button>span:first-child{flex:1;text-wrap:pretty}
.faq__glyph{font-family:var(--display);font-size:26px;font-weight:600;color:#9DBEEC;line-height:1;flex-shrink:0;transition:transform .28s cubic-bezier(.22,.61,.36,1),color .2s ease}
.faq__q button[aria-expanded="true"] .faq__glyph{transform:rotate(180deg);color:var(--blue)}
.faq__a{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .3s cubic-bezier(.22,.61,.36,1),visibility 0s linear .3s}
.faq__a.is-open{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .3s cubic-bezier(.22,.61,.36,1),visibility 0s}
.faq__a>div{overflow:hidden}
.faq__a p{font-size:17px;color:var(--text-muted);margin:0;line-height:1.6;padding:0 24px 24px;font-family:var(--sans);font-weight:400}
.faq__more{margin:30px 0 0}
@media (min-width:900px){.faq{grid-template-columns:repeat(2,1fr)}}

/* -------------------------------------------------------- 10. Final CTA */

.sec-final{padding:0 0 clamp(56px,7vw,80px)}
.final{background:var(--cta-grad);border-radius:30px;padding:clamp(44px,6vw,76px) clamp(28px,4vw,56px);text-align:center;position:relative;overflow:hidden}
.final__glow{position:absolute;top:-120px;right:-80px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(28,255,232,.22),rgba(28,255,232,0) 70%)}
.final__inner{position:relative;max-width:660px;margin:0 auto}
.final__h2{font-family:var(--display);font-size:clamp(28px,3.8vw,44px);font-weight:800;color:#fff;margin:0 0 16px;line-height:1.12;letter-spacing:-.9px}
.final__sub{font-size:19px;color:rgba(255,255,255,.82);margin:0 0 34px}
.final__cta{background:var(--mint);color:var(--navy);font-size:19px;font-weight:800;padding:18px 38px;border-radius:999px}
@media (max-width:699px){.final__cta{padding:18px 20px}}
.final__cta:hover{background:#0fe6d0;color:var(--navy)}
.final__trust{font-size:16px;color:rgba(255,255,255,.7);margin:20px 0 0}

/* -------------------------------------------------------------- 11. Footer */

.footer{background:#001347;color:rgba(255,255,255,.72)}
.footer .container{padding-block:56px 40px}
.footer__grid{display:grid;grid-template-columns:1fr;gap:32px 20px;align-items:start;margin-bottom:44px}
.footer__logo{height:44px;width:auto;margin-bottom:18px;filter:brightness(0) invert(1)}
.footer__tagline{font-size:14px;line-height:1.6;margin:0}
.footer__heading{font-family:var(--display);font-size:15px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.7px;margin:0 0 16px}
.footer__links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;font-size:16px}
.footer__links a{color:rgba(255,255,255,.72)}
.footer__links a:hover{color:#fff;text-decoration:underline}
.footer__bottom{border-top:1px solid rgba(255,255,255,.14);padding-top:28px}
.footer__disclaimer-label{font-family:var(--display);font-size:13px;font-weight:700;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.8px;margin:0 0 12px}
.footer__disclaimer{font-size:15px;line-height:1.7;margin:0 0 14px;max-width:920px}
.footer__copyright{font-size:15px;color:rgba(255,255,255,.5);margin:8px 0 0}
@media (min-width:700px){.footer__grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.footer__grid{grid-template-columns:1.9fr 1fr 1fr 1fr 1.7fr}}

@media (max-width:699px){
  .footer__grid{text-align:center;justify-items:center}
  .footer__logo{margin-inline:auto}
  .footer__links{align-items:center}
  .footer__bottom{text-align:center}
  /* Disclaimer stays left-aligned on purpose: it's the legally-required
     paragraph, and centering multi-line body text gives it ragged edges
     that measurably hurt readability — the one thing this block shouldn't do. */
  .footer__disclaimer{text-align:left;margin-inline:auto}
}

/* Mobile type tweaks. Placed last on purpose: media queries add no
   specificity of their own, so at equal specificity the LAST-declared rule
   wins ties regardless of which one is inside a media query — an earlier
   version of this block sat right after .panel__body's base rule and lost
   every one of these overrides to the plain (later-declared) base rules
   further down the file. Keeping this block at the very end guarantees it's
   never shadowed by a base rule that hasn't been declared yet. */
@media (max-width:699px){
  .panel__body{font-size:16px}
  .credibility__sub{font-size:16px}
  .panel__cta{font-size:16px}
  .testi__quote{font-size:16px}
  .testi__avatar{font-size:16px}
  .pricing__sub{font-size:16px}
  .pricing__list li{font-size:16px}
  .pricing-card__features li{font-size:16px}
  .faq__a p{font-size:16px}
}