/* Native text, controls, and charts stay crisp at any display density.
   Original PNG artwork is used only inside illustration and photo crops. */
.hero-art-crop { position:relative; overflow:hidden; width:100%; aspect-ratio:862/700; mask-image:linear-gradient(to right,transparent,#000 5%,#000 96%,transparent),linear-gradient(#000 90%,transparent); mask-composite:intersect; }
.hero-art-crop img { position:absolute; display:block; max-width:none; width:193.967517%; height:auto; left:-93.967517%; top:-15.714286%; }
.hero-visual { height:auto; }
/* Blend at the header's stacking boundary so the logo's dark pixels meet Home. */
.site-header { mix-blend-mode:lighten; }
/* The card-derived logo keeps the existing header footprint. Pure black
   blends into the dark Site without changing the image's brand colors. */
.brand img { aspect-ratio:315/87; object-fit:cover; mix-blend-mode:lighten; }
.appointment-link { display:inline-flex; align-items:center; gap:9px; min-height:38px; margin:10px 0 0; padding:3px 0; color:#c5edbf; background:none; border:0; font-size:14px; font-weight:600; cursor:pointer; text-underline-offset:5px; }
.appointment-link svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.appointment-link:hover { color:var(--green); text-decoration:underline; }
.appointment-link:focus-visible { outline:2px solid var(--green); outline-offset:5px; border-radius:3px; }
.hero-copy .trust-row { margin-top:clamp(16px,1.55vw,26px); }
.appointment-fields { border:0; margin:18px 0 0; padding:0; min-width:0; }
.appointment-fields[hidden], .contact-handoff[hidden] { display:none; }
.appointment-fields legend { font-size:12px; font-weight:700; color:#c5edbf; padding:0; margin-bottom:10px; }
.appointment-timezone { color:#b5c7bc; font-size:12px; line-height:1.55; margin:9px 0 0; }
.contact-handoff { display:inline-block; color:var(--green); font-size:13px; font-weight:600; margin-top:5px; text-underline-offset:3px; }
.review-modal input[type="date"], .review-modal input[type="time"] { color-scheme:dark; min-width:0; width:100%; }
.modal-backdrop { grid-template-columns:minmax(0,1fr); }
.review-modal, .review-modal label, .review-modal input, .review-modal select, .review-modal textarea { min-width:0; }
.process-photo { position:relative; overflow:hidden; border-radius:7px; }
.process-photo img { position:absolute; max-width:none; display:block; height:auto; }
.photo-audit { aspect-ratio:507/303; }
.photo-audit img { width:221.301775%; left:-106.706114%; top:-92.409241%; }
.photo-audit .brand-cup-patch { position:absolute; display:block; max-width:none; width:221.301775%; height:auto; left:-106.706114%; top:-92.409241%; pointer-events:none; }
.photo-dispute { aspect-ratio:514/295; }
.photo-dispute img { width:218.287938%; left:-14.202335%; top:-223.050847%; }
.photo-rebuild { aspect-ratio:521/276; }
.photo-rebuild img { width:215.355086%; left:-101.34357%; top:-371.376812%; }
/* Anchor translated cards to the photo, excluding its caption, and cover the
   entire English card already present in the original picture. */
html[lang="es"] .photo-dispute .dispute-overlay { left:3.5%; top:11.4%; bottom:auto; width:41%; min-width:0; max-width:none; min-height:75%; display:flex; flex-direction:column; justify-content:space-between; }
html[lang="es"] .photo-dispute .dispute-overlay .timeline { margin:4px 0; }
html[lang="es"] .photo-rebuild .rebuild-overlay { right:3%; bottom:4%; top:auto; width:44%; min-width:0; max-width:none; min-height:61%; }
.home-chart-motion { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:hidden; }
.home-chart-bars use { transform-box:fill-box; transform-origin:center bottom; }
.home-chart-curve,.home-phone-curve,.home-score-arrow { stroke-dasharray:1; }
html[lang="en"] .media-overlay { display:none; }
.factor-pct { font-variant-numeric:tabular-nums; }
.factor-meter i { transform-origin:left center; }
.factor-meter.motion-waiting i { transform:scaleX(0); }
.factor-icon { font-family:Arial,sans-serif; }
.credit-factor p { font-family:Montserrat,Arial,sans-serif; }
.desktop-nav a[href="#free-review"] { display:none; }
.desktop-nav a[href="#faq"] { display:block; }
.hero-buttons .cta, .free-actions .cta { touch-action:manipulation; }
.mobile-lang { cursor:pointer; }
.free-review { width:100%; max-width:none; margin-inline:0; }
.free-inner { position:relative; z-index:4; }
.social-links { display:flex; justify-content:center; gap:12px; margin-top:22px; }
.social-link { display:grid; place-items:center; width:40px; height:40px; padding:9px; border:1px solid #72f65e65; border-radius:50%; color:#d6eed8; background:#081710d9; text-decoration:none; cursor:pointer; }
.social-link svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.social-link:disabled { opacity:.65; cursor:default; }
.social-link:focus-visible { outline:2px solid #fff; outline-offset:4px; }

/* Native layout also uses the original pictures, without resampling them. */
@media (min-width:1025px) {
  .brand { width:clamp(190px,17vw,292px); }
  .site-header { gap:24px; }
  .desktop-nav { gap:clamp(12px,1.5vw,28px); }
  .header-cta { min-width:170px; }
  .hero-grid { grid-template-columns:1fr 1.1fr; }
  .hero-visual { height:auto; min-width:0; }
  .credit-factor { grid-template-columns:74px 250px minmax(140px,1fr) 84px minmax(270px,1fr); gap:20px; }
  .credit-inner { position:relative; z-index:3; }
  .credit-bars, .credit-arrow { height:30%; }
  .rounds h2 { font-size:clamp(40px,4.9vw,55px); }
  .rounds-lead { font-size:18px; max-width:860px; }
  .round-copy > p { font-size:18px; }
  .free-review { min-height:56.2799vw; height:auto; padding:88px 7.6%; display:grid; place-items:center; }
  .free-inner { width:100%; max-width:1050px; }
  .free-kicker { font-size:14px; line-height:1.5; gap:20px; justify-content:center; }
  .free-review h2 { font-size:clamp(64px,6.7vw,112px); line-height:.98; margin:24px 0 20px; }
  .free-lead { max-width:850px; font-size:clamp(18px,1.3756vw,23px); line-height:1.5; margin:0 auto 30px; }
  .free-meta { margin-top:28px; font-size:14px; line-height:1.6; }
  .free-bars { height:78%; opacity:.4; }
  .free-arrow { height:39%; bottom:4%; opacity:.65; }
  html[lang="es"] .hero h1 { font-size:clamp(48px,4.6vw,77px); line-height:1; }
  html[lang="es"] .hero-buttons { flex-wrap:nowrap; }
  html[lang="es"] .hero-buttons .primary { min-width:0; flex:1; padding-inline:18px; font-size:14px; }
  html[lang="es"] .hero-buttons .outline { min-width:150px; padding-inline:18px; font-size:14px; }
  html[lang="es"] .section-signoff { font-size:9px; letter-spacing:.22em; }
  html[lang="es"] .free-review h2 { font-size:clamp(58px,5.6vw,94px); }
}

@media (min-width:1025px) and (max-width:1280px) {
  html[lang="es"] .desktop-nav, html[lang="es"] .header-cta { display:none; }
  html[lang="es"] .header-actions { margin-left:auto; }
  html[lang="es"] .menu-toggle { display:block; }
  html[lang="es"] .mobile-nav { position:absolute; z-index:79; top:112px; left:0; right:0; background:#07110d; padding:18px 24px; display:grid; }
  html[lang="es"] .mobile-nav a, html[lang="es"] .mobile-lang { padding:14px 0; text-decoration:none; border:0; border-bottom:1px solid #ffffff20; color:white; background:transparent; text-align:left; }
  html[lang="es"] .credit-factor { grid-template-columns:64px 230px 1fr 80px; }
  html[lang="es"] .credit-factor p { grid-column:2/5; border-left:0; padding:0 0 18px; }
}

@media (max-width:1024px) {
  .site-header { height:84px; gap:14px; padding:0 20px; }
  .brand { width:225px; }
  .mobile-nav { top:84px; }
  .hero-visual { height:auto; max-width:720px; margin:26px auto 0; }
  .hero-art-crop { aspect-ratio:862/700; }
  .hero h1 { line-height:1; }
  .hero-copy { padding-top:0; }
  .round-media { min-width:0; }
  .credit-factor p { font-family:Montserrat,Arial,sans-serif; }
  .factor-title small { font-size:11px; line-height:1.5; letter-spacing:.15em; }
  .factor-title strong { line-height:1.3; }
  .factor-icon { font-size:28px; }
  .credit-factor p { font-size:16px; }
  .media-overlay { max-width:48%; min-width:0; font-size:11px; padding:12px; }
  .media-overlay strong { font-size:11px; }
}
@media (max-width:768px) {
  html[lang="es"] .photo-dispute .dispute-overlay { width:46%; }
  .brand { width:182px; }
  .hero { padding:110px 20px 40px; }
  .hero h1 { font-size:clamp(36px,10.5vw,66px); }
  .hero-lead { font-size:17px; }
  .hero-visual { height:auto; }
  .trust-item { font-size:12px; }
  .hero-buttons .cta { font-size:15px; }
  .rounds-lead, .round-copy > p { font-size:16px; }
  .round-icons small { font-size:11px; letter-spacing:.035em; line-height:1.5; }
  .round-icons > div { padding-inline:10px; }
  .figure-caption { font-size:10px; letter-spacing:.07em; gap:10px; }
  .free-kicker { flex-wrap:wrap; font-size:11px; line-height:1.5; gap:9px; }
  .free-review { min-height:850px; }
  .free-meta { font-size:12px; line-height:1.7; }
  .review-modal label { font-size:14px; }
  .review-modal input, .review-modal textarea, .review-modal select { font-size:16px; }
  .stats-grid span { font-size:11px; line-height:1.5; }
  .stats-grid article { padding:18px 8px; }
  .credit-makeup h2 { font-size:clamp(36px,9.7vw,64px); }
}
@media (max-width:430px) {
  .site-header { height:76px; padding-inline:16px; }
  .mobile-nav { top:76px; }
}
@media (prefers-reduced-motion:reduce) {
  .factor-meter.motion-waiting i { transform:none; }
}

/* Secondary Home actions share one quiet row and wrap naturally on phones. */
.hero-secondary-actions { display:flex; align-items:center; flex-wrap:wrap; gap:4px 22px; margin-top:10px; }
.hero-secondary-actions .appointment-link { margin:0; }
.smartcredit-link { display:inline-flex; align-items:center; gap:8px; min-height:38px; padding:3px 0; color:#c5edbf; font-size:14px; font-weight:600; text-decoration:none; text-underline-offset:5px; }
.smartcredit-link svg { width:20px; height:20px; flex:none; fill:none; stroke:var(--green); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.smartcredit-link:hover { color:var(--green); text-decoration:underline; }
.smartcredit-link:focus-visible { outline:2px solid var(--green); outline-offset:5px; border-radius:3px; }
.login-button { position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:8px; flex:none; min-height:44px; padding:0 14px; border:1px solid #55f52c99; border-radius:9px; color:#d8fbd1; background:#0c2015; font:600 14px Montserrat,Arial,sans-serif; opacity:1; cursor:default; }
.login-button svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.login-button[href] { text-decoration:none; cursor:pointer; }
.login-button[href]:focus-visible { outline:2px solid #fff; outline-offset:4px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(min-width:1025px) { .header-actions { gap:10px; } .site-header { gap:18px; } .desktop-nav { gap:clamp(10px,1vw,18px); } .header-cta { min-width:140px; padding-inline:18px; } }
@media(max-width:1024px) { .hero-secondary-actions { justify-content:center; } .login-button { min-height:40px; padding-inline:10px; gap:5px; font-size:13px; } }
@media(max-width:420px) { .brand { width:155px; } .header-actions { gap:4px; } .login-button svg { display:none; } }

/* A shared desktop size keeps Login and Get Started identical in both languages. */
@media(min-width:1025px) {
 .header-cta,.login-button { width:166px; min-width:166px; height:56px; min-height:56px; flex:0 0 166px; padding-inline:14px; border-radius:8px; }
 .header-actions { flex:none; }
 .desktop-nav { gap:clamp(8px,.8vw,14px); }
 .desktop-nav a { font-size:clamp(11px,.84vw,14px); }
}

/* Localized labels use the artwork's own coordinates and perspective. */
/* Both languages share one live font instead of mixing raster and SVG text. */
.home-art-labels { display:block; font-style:normal; }
@media(min-width:1200px) { .hero-visual { width:48.3%; } }
.credit-arrow marker,.reviews-arrow marker,.free-arrow marker { overflow:visible; }

.home-language-note { display:flex; align-items:center; gap:8px; margin:14px 0 0; color:#c5ddca; font-size:13px; font-weight:500; line-height:1.4; }
.home-language-note svg { width:17px; height:17px; flex:none; fill:none; stroke:#6af34e; stroke-width:1.5; }
.free-meta [data-i18n="free.meta"] { white-space:pre-line; }
@media(max-width:1199px) { .home-language-note { justify-content:center; } }
