@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Fraunces:wght@700;800;900&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* ============================================================
     CANONICAL COLOR SYSTEM  (spec §1)
     Dark navy throughout, white + red accents.
     Legacy token names below are aliased onto these so every
     existing rule and inline style inherits the system.
     ============================================================ */
  --navy:            #0C192B;  /* page background */
  --cloud:           #11213A;  /* alternating sections */
  --navy-mid:        #14253F;  /* hero gradients, proof bar */
  --surface:         #152743;  /* cards, panels */
  --surface-2:       #1A2F50;  /* raised cards */
  --white:           #FFFFFF;
  --text-primary:    #FFFFFF;  /* headings */
  --text-secondary:  #C8D6EA;  /* body copy */
  --text-muted:      #9FB3D0;  /* captions, timestamps */
  --accent-light:    #7FA8DC;  /* eyebrows, links, step labels */
  --red:             #C4122E;  /* primary buttons */
  --red-light:       #D9283F;  /* hover */
  --gold-star:       #F5A623;  /* review stars */
  --compare-neg:     #F08A86;  /* competitor values in the comparison table */
  --border-soft:     rgba(255,255,255,0.14);
  --topbar-bg:       #060D19;  /* top announcement strip */
  --nav-bg:          #FFFFFF;  /* header - the only light area */
  --nav-link:        #334155;  /* nav links on white */
  --nav-logo:        #37629C;  /* logo wordmark on white */
  --nav-phone:       #CE363E;  /* header CTA */
  --lang-active:     #223859;  /* active side of the EN/ES toggle */

  /* Icon / emoji tiles - never pastel */
  --icon-tile:       #1E3A63;

  /* --- Legacy aliases (kept so older rules keep working) --- */
  --navy-abyss:var(--topbar-bg);
  --navy-deep:var(--navy);
  --navy-surface:var(--surface);
  --navy-raised:var(--surface-2);
  --warm-bg:var(--navy);
  --red-soft:rgba(255,255,255,.12);
  --sky:rgba(127,168,220,.14);--sky-deep:rgba(127,168,220,.26);
  --sage:rgba(127,168,220,.12);--peach:rgba(127,168,220,.12);
  --lav:rgba(127,168,220,.12);--lemon:rgba(245,166,35,.16);
  --ocean:var(--accent-light);--ocean-light:#A8C6EA;
  --forest:#4FD18B;--forest-light:#7BE3AC;

  /* Form inputs stay white so fields read as fillable */
  --input-bg:#ffffff;--input-text:#0C192B;

  --shadow-soft:0 2px 12px rgba(0,0,0,0.35);--shadow-card:0 12px 44px rgba(0,0,0,0.5);

  /* TYPE SCALE (rem-based, scales with user text-size setting) */
  --text-2xs:0.625rem;   /* 10px @ default */
  --text-xs:0.6875rem;   /* 11px */
  --text-sm:0.75rem;     /* 12px */
  --text-base:0.8125rem; /* 13px */
  --text-md:0.875rem;    /* 14px */
  --text-lg:0.9375rem;   /* 15px */
  --text-xl:1rem;        /* 16px */
  --text-2xl:1.0625rem;  /* 17px */
  --text-3xl:1.125rem;   /* 18px */
  --text-4xl:1.1875rem;  /* 19px */
  --text-5xl:1.25rem;    /* 20px */
  --text-6xl:1.375rem;   /* 22px */
  --text-7xl:1.5rem;     /* 24px */
  --text-8xl:1.625rem;   /* 26px */
  --text-9xl:1.75rem;    /* 28px */
  --text-10xl:1.875rem;  /* 30px */
  --text-11xl:2rem;      /* 32px */
  --text-12xl:2.125rem;  /* 34px */
  --text-13xl:2.5rem;    /* 40px */
  --text-14xl:2.625rem;  /* 42px */
  --text-15xl:4rem;      /* 64px */

  /* SPACING SCALE (rem-based, base unit = 0.25rem = 4px) */
  --space-1:0.25rem;   /* 4px */
  --space-2:0.5rem;    /* 8px */
  --space-3:0.75rem;   /* 12px */
  --space-4:1rem;      /* 16px */
  --space-5:1.25rem;   /* 20px */
  --space-6:1.5rem;    /* 24px */
  --space-7:1.75rem;   /* 28px */
  --space-8:2rem;      /* 32px */
  --space-9:2.25rem;   /* 36px */
  --space-10:2.5rem;   /* 40px */
  --space-12:3rem;     /* 48px */
  --space-14:3.5rem;   /* 56px */
  --space-15:3.75rem;  /* 60px */
  --space-16:4rem;     /* 64px */
  --space-18:4.5rem;   /* 72px */
  --space-20:5rem;     /* 80px */
  --space-24:6rem;     /* 96px */

  /* COMPONENT SIZES — in rem so they scale with text */
  --nav-h-desktop:5.25rem;  /* 84px */
  --nav-h-mobile:4.5rem;    /* 72px */
  --icon-sm:1.25rem;        /* 20px */
  --icon-md:1.625rem;       /* 26px */
  --icon-lg:2rem;           /* 32px */
  --icon-xl:2.5rem;         /* 40px */
  --icon-2xl:3rem;          /* 48px */
  --avatar:8.75rem;         /* 140px */

  /* RADIUS */
  --radius-sm:0.375rem;     /* 6px */
  --radius-md:0.5rem;       /* 8px */
  --radius-lg:0.625rem;     /* 10px */
  --radius-xl:0.75rem;      /* 12px */
  --radius-2xl:0.875rem;    /* 14px */
  --radius-3xl:1rem;        /* 16px */
  --radius-4xl:1.5rem;      /* 24px */
  --radius-pill:9999px;

  /* LAYOUT */
  --container:1200px;
  --container-narrow:960px;
  --measure:65ch
}
html{scroll-behavior:smooth;font-size:100%;overflow-x:hidden}
body{font-family:'Plus Jakarta Sans',-apple-system,sans-serif;background:var(--warm-bg);color:var(--text-primary);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;font-size:var(--text-xl)}

.topbar{background:var(--navy-abyss);color:rgba(255,255,255,.85);text-align:center;padding:0.625rem var(--space-5);font-size:var(--text-base);font-weight:600}
.topbar strong{color:#fff}.topbar a{color:#fff;text-decoration:none;font-weight:700}

.nav{background:var(--surface);border-bottom:1px solid var(--border-soft);padding:0 var(--space-10);display:flex;align-items:center;justify-content:center;min-height:var(--nav-h-desktop);position:sticky;top:0;z-index:100;box-shadow:var(--shadow-soft)}
.nav-inner{max-width:1200px;width:100%;display:flex;align-items:center;justify-content:space-between}
.nav-logo{font-family:'Fraunces',serif;font-weight:900;font-size:var(--text-7xl);color:var(--text-primary);text-decoration:none}
.nav-logo span{color:var(--ocean)}
.nav-logo-text{display:flex;flex-direction:column;line-height:1.1}
.nav-logo-wordmark{display:block}
.nav-tagline{display:block;font-family:'Inter','Helvetica Neue',Arial,sans-serif;font-weight:600;font-size:var(--text-xs);color:var(--ocean);letter-spacing:.04em;margin-top:0.1875rem;text-transform:uppercase}
.nav-tagline-phone{display:none}
html[lang="es"] .nav-tagline-phone{display:inline}
.nav-right{display:flex;align-items:center;gap:var(--space-7)}
.nav-links{display:flex;gap:var(--space-7)}
.nav-links a{color:var(--text-secondary);text-decoration:none;font-size:var(--text-lg);font-weight:600;transition:color .3s}
.nav-links a:hover{color:var(--ocean)}
.nav-cta{text-align:right;line-height:1.2}
.nav-cta-label{font-size:var(--text-xs);font-weight:700;color:var(--ocean);text-transform:uppercase;letter-spacing:.5px}
.nav-cta-num{font-family:'Fraunces',serif;font-size:var(--text-5xl);font-weight:900;color:#fff;text-decoration:none}
.lang-toggle{display:inline-flex;align-items:center;border:1.5px solid var(--border-soft);border-radius:999px;overflow:hidden;font-size:var(--text-sm);font-weight:800;line-height:1;flex-shrink:0}
.lang-toggle a,.lang-toggle span{padding:0.4rem 0.66rem;text-decoration:none;display:block}
.lang-toggle .lang-active{background:var(--lang-active);color:#fff}
.lang-toggle a{color:var(--text-secondary);transition:color .2s,background .2s}
.lang-toggle a:hover{color:var(--ocean);background:var(--cloud)}

.proof-bar{background:var(--surface);border-bottom:1px solid var(--border-soft);padding:var(--space-3) var(--space-10)}
.proof-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:var(--space-9);flex-wrap:wrap}
.proof-item{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-base);font-weight:600;color:var(--text-secondary)}
.proof-item .stars{color:var(--gold-star);font-size:var(--text-lg);letter-spacing:1px}
.proof-item strong{color:var(--text-primary)}
.bbb-badge{display:inline-flex;align-items:center;gap:0.3125rem;background:var(--navy-raised);color:#fff;padding:0.1875rem 0.625rem 0.1875rem 0.4375rem;border-radius:5px;font-size:var(--text-xs);font-weight:800}
.bbb-badge .grade{background:#fff;color:var(--navy-deep);border-radius:3px;padding:0.0625rem 0.3125rem;font-size:var(--text-2xs);font-weight:900}
.proof-sep{width:1px;height:20px;background:rgba(255,255,255,.16)}

/* HERO */
.hero{padding:var(--space-12) var(--space-10) var(--space-16);max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr minmax(22rem, 27.5rem);gap:var(--space-14);align-items:start}
.hero-eyebrow{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--sage);color:var(--forest);border-radius:100px;padding:0.4375rem 0.875rem;font-size:var(--text-sm);font-weight:700;margin-bottom:var(--space-5)}
.hero-text h1{font-family:'Fraunces',serif;font-size:clamp(2.125rem,4.5vw,3.25rem);font-weight:900;line-height:1.1;color:var(--text-primary);margin-bottom:var(--space-4);letter-spacing:-.5px}
.hero-text .subtitle{font-size:var(--text-2xl);color:var(--text-secondary);margin-bottom:var(--space-6);max-width:460px;line-height:1.7}
.hero-promises{display:flex;flex-direction:column;gap:0.625rem;margin-bottom:var(--space-6)}
.promise{display:flex;align-items:center;gap:0.625rem;font-size:var(--text-lg);font-weight:600;color:var(--text-primary)}
.promise-check{width:var(--icon-md);height:var(--icon-md);background:var(--sage);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.promise-check svg{color:var(--forest)}
.hero-trust-row{display:flex;align-items:center;gap:0.875rem;flex-wrap:wrap}
.mini-badge{display:flex;align-items:center;gap:0.375rem;padding:0.375rem var(--space-3);background:var(--surface);border:1px solid var(--border-soft);border-radius:8px;font-size:var(--text-xs);font-weight:700;color:var(--text-secondary);box-shadow:var(--shadow-soft)}

/* FORM - NAVY with red accent line + red submit only */
.form-card{background:linear-gradient(170deg,var(--navy-raised),var(--navy-surface));border:1px solid rgba(255,255,255,.09);border-radius:24px;overflow:hidden;box-shadow:var(--shadow-card)}
.form-header{padding:var(--space-6) var(--space-7) var(--space-4);text-align:center}
.form-header h2{font-family:'Fraunces',serif;font-size:var(--text-6xl);font-weight:900;color:#fff;margin-bottom:0.1875rem}
.form-header p{font-size:var(--text-base);color:rgba(255,255,255,.65)}
.form-header-line{display:none}
.form-body{padding:var(--space-1) var(--space-7) var(--space-7)}
.form-group{margin-bottom:var(--space-3)}
.form-group label{display:block;font-size:var(--text-xs);font-weight:700;color:rgba(255,255,255,.65);margin-bottom:var(--space-1);text-transform:uppercase;letter-spacing:.5px}
.form-group input,.form-group select{width:100%;background:var(--input-bg);border:2px solid transparent;border-radius:8px;padding:var(--space-3) 0.875rem;font-size:var(--text-xl);color:var(--input-text);font-family:'Plus Jakarta Sans',sans-serif;transition:.3s;outline:none;-webkit-appearance:none}
.form-group select{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23475569' stroke-width='2' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:var(--space-9)}
.form-group input:focus,.form-group select:focus{border-color:var(--ocean);box-shadow:0 0 0 3px rgba(90,169,232,.45)}
.form-group input::placeholder{color:#7a8ba0}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:0.625rem}
.submit-btn{width:100%;padding:0.9375rem;background:var(--red);border:none;border-radius:8px;font-size:var(--text-2xl);font-weight:800;font-family:'Plus Jakarta Sans',sans-serif;color:#fff;cursor:pointer;transition:.3s;margin-top:var(--space-1);text-transform:uppercase;letter-spacing:.3px}
.submit-btn:hover{background:var(--red-light);transform:translateY(-1px);box-shadow:0 6px 20px rgba(224,30,55,.55)}
.form-callback{text-align:center;margin-top:0.625rem;font-size:var(--text-sm);font-weight:600;color:rgba(255,255,255,.5)}
.form-callback strong{color:rgba(255,255,255,.8)}
.form-trust{display:flex;align-items:center;gap:0.375rem;margin-top:var(--space-3);justify-content:center;font-size:var(--text-2xs);color:rgba(255,255,255,.65)}

/* Pin SEO-promoted h3s (formerly h4s) back to original visual size */
.legal-inner h3,.check-item h3,.storage-card h3,.qualify-yes h3{font-size:1em;font-weight:bold;margin:1.33em 0}

/* SECTIONS */
.section-eyebrow{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);font-weight:700;color:var(--ocean);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:var(--space-3)}
.section-title{font-family:'Fraunces',serif;font-size:clamp(1.625rem,3vw,2.25rem);font-weight:900;color:var(--text-primary);margin-bottom:var(--space-2);letter-spacing:-.5px}
.section-subtitle{font-size:var(--text-xl);color:var(--text-muted);max-width:500px;margin-bottom:2.75rem;line-height:1.7}

.how-section{padding:var(--space-18) var(--space-10);max-width:1200px;margin:0 auto}
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
.step-card{background:var(--surface);border:1px solid var(--border-soft);border-radius:16px;padding:var(--space-7) var(--space-5);text-align:center;transition:.3s}
.step-card:hover{transform:translateY(-3px);box-shadow:0 8px 26px rgba(0,0,0,.42)}
.step-icon{width:3.25rem;height:3.25rem;border-radius:12px;display:flex;align-items:center;justify-content:center;margin:0 auto 0.875rem;font-size:var(--text-7xl)}
.step-card:nth-child(1) .step-icon{background:var(--sky)}
.step-card:nth-child(2) .step-icon{background:var(--peach)}
.step-card:nth-child(3) .step-icon{background:var(--sage)}
.step-card:nth-child(4) .step-icon{background:var(--lav)}
.step-num{font-size:var(--text-2xs);font-weight:800;color:var(--ocean);margin-bottom:var(--space-2);letter-spacing:1.5px}
.step-card h3{font-size:var(--text-lg);font-weight:800;color:var(--text-primary);margin-bottom:0.375rem}
.step-card p{font-size:var(--text-base);color:var(--text-muted);line-height:1.5}

.vehicles-section{padding:0 var(--space-10) var(--space-18);max-width:1200px;margin:0 auto}
.vehicle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0.875rem;margin-top:var(--space-9)}
.vehicle-card{background:var(--surface);border:1px solid var(--border-soft);border-radius:14px;padding:var(--space-5);display:flex;align-items:center;gap:0.875rem;transition:.3s}
.vehicle-card:hover{border-color:rgba(90,169,232,.4);transform:translateY(-2px);box-shadow:var(--shadow-soft)}
.vehicle-emoji{width:2.75rem;height:2.75rem;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:var(--text-6xl)}

.vehicle-card h3{font-size:var(--text-lg);font-weight:800;color:var(--text-primary);margin-bottom:0.125rem}
.vehicle-card p{font-size:var(--text-sm);color:var(--text-muted)}

.trust-section{background:linear-gradient(180deg,#0d2340 0%,var(--navy-deep) 100%);padding:var(--space-18) var(--space-10)}
.trust-inner{max-width:1200px;margin:0 auto}
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);margin-top:var(--space-10)}
.trust-card{background:var(--surface);border-radius:16px;padding:var(--space-7) var(--space-6);box-shadow:var(--shadow-soft);border:1px solid rgba(255,255,255,.07)}
.tc-icon{width:2.75rem;height:2.75rem;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:0.875rem;font-size:var(--text-6xl)}
.trust-card:nth-child(1) .tc-icon{background:var(--sky)}
.trust-card:nth-child(2) .tc-icon{background:var(--sage)}
.trust-card:nth-child(3) .tc-icon{background:var(--peach)}
.trust-card h3{font-size:var(--text-xl);font-weight:800;color:var(--text-primary);margin-bottom:0.375rem}
.trust-card p{font-size:var(--text-base);color:var(--text-muted);line-height:1.7}

.test-section{padding:var(--space-18) var(--space-10);max-width:1200px;margin:0 auto}
.test-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.125rem;margin-top:var(--space-8)}
.test-card{background:var(--surface);border:1px solid var(--border-soft);border-radius:14px;padding:var(--space-6)}
.test-stars{color:var(--gold-star);font-size:var(--text-md);margin-bottom:0.625rem;letter-spacing:2px}
.test-card blockquote{font-size:var(--text-md);color:var(--text-secondary);line-height:1.7;font-style:italic;margin-bottom:var(--space-3)}
.test-card cite{font-size:var(--text-sm);font-style:normal;font-weight:700;color:var(--text-primary)}
.test-card cite span{font-weight:500;color:var(--text-muted)}

.cta-section{padding:var(--space-10) var(--space-10) var(--space-14);text-align:center}
.cta-inner{max-width:680px;margin:0 auto;background:linear-gradient(135deg,#1d5288,var(--navy-deep));border-radius:24px;padding:3.25rem 2.75rem;color:#fff;position:relative;overflow:hidden}
.cta-inner::before{content:'';position:absolute;top:-40%;right:-15%;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,0.04)}
.cta-inner h2{font-family:'Fraunces',serif;font-size:var(--text-11xl);font-weight:900;margin-bottom:var(--space-2);position:relative}
.cta-inner .cta-sub{font-size:var(--text-xl);opacity:.75;margin-bottom:var(--space-6);position:relative}
.cta-phone-big{font-family:'Fraunces',serif;font-size:var(--text-12xl);font-weight:900;margin-bottom:0.375rem;position:relative}
.cta-phone-big a{color:#fff;text-decoration:none}
.cta-details{font-size:var(--text-base);opacity:.5;margin-bottom:var(--space-6);position:relative}
.cta-btn-action{display:inline-block;padding:0.875rem var(--space-9);background:var(--red);color:#fff;border-radius:10px;font-size:var(--text-lg);font-weight:800;text-decoration:none;transition:.2s;position:relative;text-transform:uppercase;letter-spacing:.5px}
.cta-btn-action:hover{background:var(--red-light);transform:translateY(-2px)}

.legal-footer{padding:var(--space-10);max-width:960px;margin:0 auto;border-top:1px solid var(--border-soft)}
.legal-footer p{font-size:0.65625rem;color:var(--text-muted);line-height:1.8;margin-bottom:0.625rem}
.legal-footer p strong{color:var(--text-secondary)}
.legal-footer a{color:var(--ocean);text-decoration:underline}
.footer{padding:var(--space-4) var(--space-10) var(--space-7);text-align:center}
.footer p{font-size:var(--text-sm);color:var(--text-muted);line-height:1.8}
.footer a{color:var(--ocean);text-decoration:none}

/* SUB-PAGE SHARED */

.page-header{padding:var(--space-12) var(--space-10) var(--space-10);max-width:1200px;margin:0 auto}
.page-header h1{font-family:'Fraunces',serif;font-size:clamp(1.875rem,4vw,2.875rem);font-weight:900;color:var(--text-primary);margin-bottom:var(--space-3)}
.page-header h1 em{color:var(--ocean);font-style:normal}
.page-header .lead{font-size:var(--text-3xl);color:var(--text-secondary);max-width:560px;line-height:1.7}

.timeline-section{padding:var(--space-15) var(--space-10);max-width:900px;margin:0 auto}
.timeline-item{display:grid;grid-template-columns:4.375rem 1fr;gap:var(--space-7);padding-bottom:var(--space-12);position:relative}
.timeline-item:not(:last-child)::after{content:'';position:absolute;left:2.125rem;top:var(--space-16);bottom:0;width:2px;background:var(--sky-deep)}
.timeline-num{width:4.375rem;height:4.375rem;border-radius:16px;display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-size:var(--text-9xl);font-weight:900;color:#fff;position:relative;z-index:1}
.timeline-item:nth-child(1) .timeline-num{background:var(--red)}
.timeline-item:nth-child(2) .timeline-num{background:#e8873a}
.timeline-item:nth-child(3) .timeline-num{background:var(--ocean)}
.timeline-item:nth-child(4) .timeline-num{background:var(--forest)}
.timeline-content h3{font-size:var(--text-5xl);font-weight:800;color:var(--text-primary);margin-bottom:var(--space-2);margin-top:var(--space-2)}
.timeline-content p{font-size:var(--text-lg);color:var(--text-secondary);line-height:1.7;margin-bottom:0.875rem}
.timeline-detail{background:var(--cloud);border-radius:10px;padding:0.875rem 1.125rem;font-size:var(--text-base);color:var(--text-muted);line-height:1.6;border-left:3px solid var(--ocean)}
.timeline-detail strong{color:var(--text-secondary)}

.faq-section{padding:var(--space-15) var(--space-10);max-width:800px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--border-soft);padding:var(--space-5) 0}
.faq-q{font-size:var(--text-xl);font-weight:800;color:var(--text-primary);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--space-4)}
.faq-q::after{content:'+';font-size:var(--text-6xl);color:var(--ocean);flex-shrink:0}
.faq-item.open .faq-q::after{content:'\2212'}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s,padding .3s;font-size:var(--text-md);color:var(--text-muted);line-height:1.7}
.faq-item.open .faq-a{max-height:1500px;padding-top:var(--space-3)}

.vcat{display:grid;grid-template-columns:1fr 1fr;gap:2.75rem;align-items:center;padding:var(--space-12) 0;border-bottom:1px solid var(--border-soft)}
.vcat:last-child{border-bottom:none}
.vcat.reverse{direction:rtl}.vcat.reverse>*{direction:ltr}
.vcat-visual{background:var(--surface);border:1px solid var(--border-soft);border-radius:20px;padding:var(--space-10);text-align:center;box-shadow:var(--shadow-soft)}
.vcat-emoji{font-size:var(--text-15xl);margin-bottom:0.875rem}
.vcat-range{font-family:'Fraunces',serif;font-size:var(--text-8xl);font-weight:900;color:var(--text-primary)}
.vcat-range-label{font-size:var(--text-sm);color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;font-weight:700}
.vcat-info h2{font-family:'Fraunces',serif;font-size:var(--text-7xl);font-weight:900;color:var(--text-primary);margin-bottom:0.625rem}
.vcat-info p{font-size:var(--text-lg);color:var(--text-secondary);line-height:1.7;margin-bottom:0.875rem}
.vcat-makes{display:flex;flex-wrap:wrap;gap:0.375rem;margin-bottom:var(--space-4)}
.make-tag{background:var(--cloud);border:1px solid var(--border-soft);border-radius:6px;padding:var(--space-1) var(--space-3);font-size:var(--text-sm);font-weight:600;color:var(--text-secondary)}
.btn-accent{display:inline-block;padding:0.625rem 1.375rem;background:var(--ocean);color:#fff;border-radius:8px;font-size:var(--text-md);font-weight:700;text-decoration:none;transition:.2s}
.btn-accent:hover{background:var(--ocean-light);transform:translateY(-1px)}

.cta-banner{max-width:1200px;margin:0 auto;background:linear-gradient(135deg,#1d5288,var(--navy-deep));border-radius:24px;padding:3.25rem 2.75rem;color:#fff;text-align:center;position:relative;overflow:hidden}
.cta-banner::before{content:'';position:absolute;top:-40%;right:-15%;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.04)}
.cta-banner h2{font-family:'Fraunces',serif;font-size:var(--text-10xl);font-weight:900;margin-bottom:var(--space-2);position:relative}
.cta-banner .cta-sub{font-size:var(--text-lg);opacity:.75;margin-bottom:var(--space-6);position:relative}

.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);margin-top:var(--space-10)}
.card{background:var(--surface);border:1px solid var(--border-soft);border-radius:16px;padding:var(--space-7) 1.375rem;transition:.3s}
.card:hover{transform:translateY(-3px);box-shadow:0 8px 26px rgba(0,0,0,.42)}
.card-icon{width:var(--icon-2xl);height:var(--icon-2xl);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:0.875rem;font-size:var(--text-6xl)}
.card-icon.sky{background:var(--sky)}.card-icon.sage{background:var(--sage)}.card-icon.peach{background:var(--peach)}
.card-icon.lav{background:var(--lav)}.card-icon.rose{background:var(--red-soft)}.card-icon.lemon{background:var(--lemon)}
.card h3{font-size:var(--text-xl);font-weight:800;color:var(--text-primary);margin-bottom:0.375rem}
.card p{font-size:var(--text-base);color:var(--text-muted);line-height:1.7}
.cred-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4);margin-top:var(--space-9)}
.cred-item{text-align:center;padding:var(--space-6) 0.875rem;background:var(--surface);border-radius:14px;border:1px solid var(--border-soft)}
.cred-item .cred-big{font-family:'Fraunces',serif;font-size:var(--text-11xl);font-weight:900;color:var(--text-primary)}
.cred-item .cred-label{font-size:var(--text-sm);color:var(--text-muted);margin-top:var(--space-1);font-weight:600}
.loc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0.875rem;margin-top:var(--space-9)}
.loc-card{background:var(--surface);border:1px solid var(--border-soft);border-radius:12px;padding:var(--space-5)}
.loc-card h3{font-size:var(--text-lg);font-weight:800;color:var(--text-primary);margin-bottom:0.1875rem}
.loc-card p{font-size:var(--text-base);color:var(--text-muted)}
.loc-card a{color:var(--ocean);text-decoration:none;font-weight:600;font-size:var(--text-md)}

/* Mobile nav hamburger + drawer — hidden on desktop */











@media(max-width:960px){
  .hero{grid-template-columns:1fr;gap:var(--space-8);padding:var(--space-8) var(--space-6) var(--space-12)}
  .steps-grid{grid-template-columns:repeat(2,1fr)}.vehicle-grid{grid-template-columns:1fr 1fr}
  .trust-grid,.test-grid,.values-grid{grid-template-columns:1fr}
  .nav-links{display:none}.proof-sep{display:none}
  .nav-cta{display:none}
  .lang-toggle{margin-left:auto}
  .vcat{grid-template-columns:1fr}.vcat.reverse{direction:ltr}
  .cred-grid{grid-template-columns:repeat(2,1fr)}.loc-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .topbar{font-size:var(--text-xs);padding:var(--space-2) var(--space-4)}.nav{padding:0 var(--space-4);min-height:var(--nav-h-mobile)}
  .topbar-espanol{display:block}
  .topbar-espanol-sep{display:none}
  .topbar a{white-space:nowrap}
  .nav-logo{font-size:var(--text-4xl)}
  .nav-logo img{height:32px !important;margin-right:0.375rem !important}
  .nav-tagline{font-size:var(--text-xs);margin-top:0.125rem;cursor:pointer}
  .nav-tagline-phone{display:inline}
  .proof-bar{padding:var(--space-2) var(--space-4)}.proof-inner{flex-direction:column;gap:0.375rem}
  .hero{padding:var(--space-6) var(--space-5) var(--space-9)}.form-body{padding:var(--space-1) var(--space-5) var(--space-6)}.form-header{padding:var(--space-5) var(--space-5) var(--space-3)}
  .steps-grid{grid-template-columns:1fr}.vehicle-grid{grid-template-columns:1fr !important}.form-row{grid-template-columns:1fr}
  .owner-hero-grid{grid-template-columns:1fr !important;gap:var(--space-6) !important}
  .owner-hero-grid>div:first-child{order:2}
  .owner-hero-grid>div:last-child{order:1;max-width:280px;margin:0 auto;width:100%}
  .team-grid{grid-template-columns:1fr !important;gap:var(--space-8) !important}
  .dont-do-grid{grid-template-columns:1fr !important}
  .dont-do-section{padding:var(--space-12) var(--space-5) !important}
  .how-section,.vehicles-section{padding-left:var(--space-5);padding-right:var(--space-5)}
  .carousel-eyebrow-wrap,.carousel-wrap{padding-left:var(--space-5) !important;padding-right:var(--space-5) !important}
  .trust-section{padding:var(--space-12) var(--space-5)}.test-section{padding:var(--space-12) var(--space-5)}
  .cta-section{padding:var(--space-6) var(--space-5) var(--space-10)}.cta-inner{padding:var(--space-9) var(--space-6);border-radius:18px}
  .cta-phone-big{font-size:var(--text-7xl)}
  .timeline-section{padding:var(--space-10) var(--space-5)}.timeline-item{grid-template-columns:3.125rem 1fr;gap:var(--space-4)}
  .timeline-num{width:3.125rem;height:3.125rem;font-size:var(--text-6xl);border-radius:12px}
  .timeline-item:not(:last-child)::after{left:var(--space-6);top:3.375rem}
  .faq-section,.page-header{padding-left:var(--space-5);padding-right:var(--space-5)}
  .hero-trust-row{flex-direction:column;align-items:flex-start;gap:var(--space-2)}
  .cash-decision-grid{grid-template-columns:1fr 1fr !important}
  .value-links-grid{grid-template-columns:1fr !important}
}
@media(max-width:480px){
  .cash-decision-grid{grid-template-columns:1fr !important}
}
/* CAPTCHA (Cloudflare Turnstile): flexible widget fills its form container and aligns with the input fields; max-width+overflow keep it inside its slot on mobile (the widget has a ~300px min width it won't shrink below). overflow-x:hidden on html/body remains the backstop against any horizontal slip. */
@media(max-width:640px){
  .form-body .cf-turnstile,.hiw-hero-form .cf-turnstile,.v-hero-form .cf-turnstile,.form-strip-form .cf-turnstile{margin-left:0;margin-right:0;max-width:100%;overflow:hidden}
}
/* "See sample pictures" disclosure on the lead forms */
.sample-pics{margin-top:var(--space-2)}
.sample-pics summary{cursor:pointer;color:#fff;font-size:var(--text-sm);font-weight:600;text-decoration:underline}
.sample-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2);margin-top:var(--space-2)}
.sample-grid img{width:100%;height:auto;border-radius:8px;display:block;background:rgba(255,255,255,.06)}
/* MID-PAGE CTAs: mobile only, hidden on desktop. Repositions high-intent users back to the form without forcing them to scroll to the bottom. */
.mid-cta{display:none}
@media(max-width:640px){
  .mid-cta{display:block;margin:var(--space-6) var(--space-5);background:linear-gradient(135deg,#1d5288,var(--navy-deep));border-radius:16px;padding:var(--space-6) var(--space-5);text-align:center;color:#fff;position:relative;overflow:hidden}
  .mid-cta::before{content:'';position:absolute;top:-40%;right:-15%;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.04)}
  .mid-cta h3{font-family:'Fraunces',serif;font-size:var(--text-6xl);font-weight:900;line-height:1.2;margin-bottom:var(--space-3);position:relative;color:#fff}
  .mid-cta p{font-size:var(--text-md);color:rgba(255,255,255,.8);margin-bottom:var(--space-4);line-height:1.5;position:relative}
  .mid-cta .cta-btn-action{display:inline-block;padding:var(--space-3) var(--space-7);font-size:var(--text-md)}
}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.hero-text{animation:fadeInUp .6s ease-out}
.form-card{animation:fadeInUp .6s ease-out .12s both}

/* Spanish-only mobile proof bar: longer ES copy must wrap, not overflow */
@media(max-width:640px){html[lang="es"] .proof-inner{width:100%}html[lang="es"] .proof-item{flex-wrap:wrap;justify-content:center;text-align:center;max-width:100%}html[lang="es"] .proof-item span{white-space:normal!important}}


/* ============================================================
   DARK NAVY THEME LAYER
   Sits last so it wins over the light-theme defaults above.
   Applies to both the English (/) and Spanish (/es/) trees.
   ============================================================ */
html{background:var(--navy-deep)}
body{background:var(--navy-deep);color:var(--text-primary)}

/* Nav sits one step above the page so it reads as a bar, not a void */
.nav{background:var(--navy-surface);border-bottom:1px solid var(--border-soft);
     box-shadow:0 2px 18px rgba(0,0,0,.4)}
.proof-bar{background:var(--navy-surface);border-bottom:1px solid var(--border-soft)}

/* Logo keeps its white plate — the mark is red-on-white and needs it */
.nav-logo img{background:#fff;border-radius:10px;padding:0.25rem;
              box-shadow:0 1px 6px rgba(0,0,0,.35)}

/* Body copy on navy */
.hero-text .subtitle,.promise,.section-subtitle,.faq-a,.test-card blockquote,
.timeline-content p,.vcat-info p,.page-header .lead{color:var(--text-secondary)}
.step-card p,.trust-card p,.card p,.vehicle-card p,.loc-card p,.footer p{color:var(--text-muted)}

/* Cards: raised navy with a hairline, not white boxes */
.step-card,.vehicle-card,.trust-card,.test-card,.card,.cred-item,.loc-card,.vcat-visual,.mini-badge{
  background:var(--navy-surface);border:1px solid var(--border-soft)}
.step-card:hover,.card:hover{background:var(--navy-raised);border-color:rgba(90,169,232,.35)}
.make-tag{background:var(--navy-raised);border:1px solid var(--border-soft);color:var(--text-secondary)}
.timeline-detail{background:var(--navy-raised)}
.timeline-item:not(:last-child)::after{background:rgba(255,255,255,.14)}

/* Red is the accent: section eyebrows and the FAQ marker carry it */
.section-eyebrow{color:#fff}
.faq-q::after{color:#fff}
.faq-item{border-bottom:1px solid var(--border-soft)}
.page-header h1 em{color:#fff}
.legal-footer{border-top:1px solid var(--border-soft)}

/* Mobile drawer + hamburger on dark */




/* Selects: the chevron was drawn dark for a light field — keep it dark, field is white */
.form-group select{color:var(--input-text)}

/* Any section that still declares a light background inline gets caught here */
[style*="background:var(--surface)"],[style*="background:var(--cloud)"],
[style*="background:var(--warm-bg)"]{color:var(--text-primary)}

/* Focus visibility on a dark ground */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{
  outline:3px solid #fff;outline-offset:2px}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* --- Contrast corrections found by audit (WCAG AA on navy) --- */

/* Unstyled links on the legal pages were falling back to browser default blue
   (#0000EE = 1.88:1 on navy — effectively invisible). Give every link a floor. */
a{color:var(--ocean)}
.legal-inner a,.legal-body a,.page-body a{color:var(--ocean);text-decoration:underline}

/* Form field labels were rgba(255,255,255,.4) = 3.78:1 */
.form-group label,.form-group label span{color:rgba(255,255,255,.78)}

/* Small red text on navy: use the bright tone (3.16:1 -> 5.9:1).
   Red stays vivid where it is a BACKGROUND (buttons), which is white-on-red. */
.step-card a,.timeline-content a,.trust-card a,.card a{color:#fff}

/* Low-opacity white copy inside dark panels */
.cta-details{opacity:.72}
.form-callback{color:rgba(255,255,255,.72)}
.form-trust{color:rgba(255,255,255,.75)}

/* ============================================================
   LIGHT NAV BAR
   The header sits white against the navy page. Every nav colour
   is re-darkened here, since the theme layer above assumes navy.
   Applies to both / and /es/ (shared stylesheet).
   ============================================================ */
.nav{background:#fff;border-bottom:1px solid rgba(37,99,160,.16);
     box-shadow:0 2px 14px rgba(0,0,0,.28)}

/* Logo: no white plate needed now that the bar is white */
.nav-logo img{background:none;border-radius:0;padding:0;box-shadow:none}
.nav-logo{color:#1a3a5c}
.nav-logo span{color:#2563a0}
.nav-tagline{color:#2563a0}

.nav-links a{color:#475569}
.nav-links a:hover{color:#c4122e}

.nav-cta-label{color:#2563a0}
/* --red (#e01e37) on white = 4.8:1, so the brighter tone isn't needed here */
.nav-cta-num{color:var(--red)}

.lang-toggle{border:1.5px solid rgba(37,99,160,.22)}
.lang-toggle a{color:#475569}
.lang-toggle a:hover{color:#c4122e;background:rgba(37,99,160,.07)}
.lang-toggle .lang-active{background:var(--lang-active);color:#fff}



/* The drawer is the nav on mobile — it opens from the white bar, so it matches */







/* Current-page nav link: red on the white bar (4.8:1), not the pale dark-theme blue */
.nav-links a.nav-current{color:#c4122e;font-weight:700}

/* ============================================================
   SPEC ALIGNMENT LAYER  (loads last — wins)
   Locks the header, eyebrows, tiles and cards to the canonical
   values in the design spec. Also defines the components used by
   the Industry Insights page and the Classic Car landing page.
   ============================================================ */

/* --- 3.1 Top strip --- */
.topbar{background:var(--topbar-bg);color:rgba(255,255,255,.88)}
.topbar strong,.topbar a{color:#fff}

/* --- 3.2 Nav bar: the only light area on the site --- */
.nav{background:var(--nav-bg);border-bottom:1px solid rgba(12,25,43,.14);
     box-shadow:0 2px 14px rgba(0,0,0,.28)}
.nav-logo,.nav-logo-wordmark{color:var(--nav-logo)}
.nav-logo span{color:var(--nav-logo)}
.nav-tagline{color:var(--nav-logo)}
.nav-links{white-space:nowrap}
.nav-links a{color:var(--nav-link);white-space:nowrap}
.nav-links a:hover,.nav-links a.nav-current{color:var(--nav-phone)}
.nav-cta-label{color:var(--nav-link)}
.nav-cta-num{color:var(--nav-phone)}
.lang-toggle{border:1.5px solid rgba(12,25,43,.2)}
.lang-toggle a{color:var(--nav-link)}
.lang-toggle a:hover{color:var(--nav-phone);background:rgba(12,25,43,.06)}
.lang-toggle .lang-active{background:var(--lang-active);color:#fff}








/* --- 3.3 Page ground --- */
html,body{background:var(--navy)}
.proof-bar{background:var(--navy-mid);border-bottom:1px solid var(--border-soft)}

/* --- 4. Component patterns --- */
.section-eyebrow{font-size:0.6875rem;font-weight:800;text-transform:uppercase;
                 letter-spacing:.16em;color:var(--accent-light)}
.step-num{color:var(--accent-light);letter-spacing:.16em;font-weight:800}
.step-card,.trust-card,.card,.vehicle-card,.test-card,.cred-item,.loc-card{
  background:var(--surface);border:1px solid var(--border-soft);border-radius:16px}
.step-card h3,.trust-card h3,.card h3,.vehicle-card h3,.loc-card h3{color:var(--text-primary)}
.step-card p,.trust-card p,.card p,.vehicle-card p,.loc-card p{color:var(--text-secondary)}
/* Icon tiles: solid deep blue, never pastel */
.step-icon,.tc-icon,
.step-card:nth-child(1) .step-icon,.step-card:nth-child(2) .step-icon,
.step-card:nth-child(3) .step-icon,.step-card:nth-child(4) .step-icon,
.trust-card:nth-child(1) .tc-icon,.trust-card:nth-child(2) .tc-icon,
.trust-card:nth-child(3) .tc-icon{background:var(--icon-tile)}
.test-stars,.proof-item .stars{color:var(--gold-star)}
.test-card blockquote{color:var(--text-secondary);font-style:italic}
.test-card cite{color:var(--text-primary)}
.test-card .test-date{color:var(--text-muted);font-size:var(--text-sm)}
.faq-q{color:var(--text-primary)}

/* Review "Read more" toggle */
.rev-clamp{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.rev-more{display:block;background:none;border:none;padding:.25rem 0;margin:.4rem 0 .6rem;
          cursor:pointer;text-align:left;color:var(--accent-light);
          font:700 var(--text-sm)/1.2 'Plus Jakarta Sans',sans-serif}
.rev-more:hover{text-decoration:underline}

/* Quote form: white fields, dark text */
.form-card{background:var(--surface);border:2px solid var(--border-soft)}
.form-group input,.form-group select,.form-group textarea{
  background:#fff;color:var(--input-text)}
.form-group input::placeholder{color:#5B6C82}
.submit-btn{background:var(--red)}
.submit-btn:hover{background:var(--red-light);box-shadow:0 6px 20px rgba(196,18,46,.5)}

/* Links */
a{color:var(--accent-light)}
.legal-inner a,.legal-body a,.page-body a{color:var(--accent-light)}

/* Tap targets */
a,button,summary,input[type=submit]{min-height:auto}


/* ============================================================
   INDUSTRY INSIGHTS
   ============================================================ */
.insights-hero{background:var(--navy);text-align:center;
  padding:var(--space-16) var(--space-10) var(--space-10)}
.insights-hero h1{font-family:'Fraunces',serif;font-weight:900;color:#fff;
  /* scales down before it can crowd the viewport edges */
  font-size:clamp(1.75rem,4.2vw,3rem);line-height:1.15;
  max-width:22ch;margin:0 auto var(--space-4);
  text-wrap:balance;overflow-wrap:break-word}
.insights-hero p{color:var(--text-secondary);max-width:640px;margin:0 auto;
  font-size:var(--text-3xl);line-height:1.65;text-wrap:pretty}
.insights-section{background:var(--navy);padding:0 var(--space-6) var(--space-16)}
.insights-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:1.5rem;max-width:1200px;margin:0 auto}
.insight-card{background:var(--surface-2);border:1px solid var(--border-soft);
  border-radius:16px;padding:1.5rem;display:flex;flex-direction:column}
.insight-date{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);
  font-size:var(--text-sm);font-weight:700;margin-bottom:.5rem}
.insight-card h2{font-size:1.5rem;font-weight:800;color:#fff;line-height:1.25;
  margin-bottom:.625rem;font-family:'Plus Jakarta Sans',sans-serif}
.insight-excerpt{color:var(--text-secondary);line-height:1.65;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
  text-overflow:ellipsis;margin-bottom:1rem}
.insight-more{color:var(--accent-light);font-weight:700;text-decoration:none;margin-top:auto}
.insight-more:hover{text-decoration:underline}

/* ============================================================
   CLASSIC CAR LANDING (hidden ads page)
   ============================================================ */

.nav--bare .nav-inner{justify-content:space-between}
.nav--bare .nav-cta{display:block !important;text-align:right}
.cc-hero{background:linear-gradient(170deg,var(--navy-mid),var(--navy));
  padding:var(--space-14) var(--space-6) var(--space-12)}
.cc-hero-inner{max-width:1200px;margin:0 auto;display:grid;
  grid-template-columns:1fr minmax(22rem,27.5rem);gap:var(--space-12);align-items:start}
.cc-eyebrow{font-size:0.6875rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.16em;color:var(--accent-light);margin-bottom:var(--space-4)}
.cc-hero h1{font-family:'Fraunces',serif;font-weight:900;color:#FFFFFF;
  font-size:clamp(2rem,4.6vw,3.25rem);line-height:1.1;letter-spacing:-.5px;
  margin-bottom:var(--space-5)}
.cc-lede{color:#FFFFFF;font-size:var(--text-5xl);font-weight:700;font-style:italic;
  margin-bottom:var(--space-3)}
.cc-sub{color:var(--text-secondary);font-size:var(--text-3xl);line-height:1.7;max-width:34rem}
.cc-rating{display:flex;align-items:center;gap:.5rem;justify-content:center;
  font-size:var(--text-5xl);font-weight:800;color:#fff;margin-bottom:var(--space-2)}
.cc-rating .stars{color:var(--gold-star);letter-spacing:2px}
.cc-consent{display:flex;align-items:flex-start;gap:.6rem;color:var(--text-secondary);
  font-size:var(--text-md);line-height:1.55;margin:var(--space-3) 0;cursor:pointer}
.cc-consent input{margin-top:.2rem;width:1.15rem;height:1.15rem;flex-shrink:0;
  accent-color:var(--red);cursor:pointer}
.cc-footnote{color:var(--text-muted);font-size:var(--text-sm);line-height:1.6;
  max-width:960px;margin:0 auto var(--space-4)}
@media(max-width:900px){.cc-hero-inner{grid-template-columns:1fr;gap:var(--space-8)}}

/* ============================================================
   RESPONSIVE GUARDS
   ============================================================ */
html,body{max-width:100%;overflow-x:hidden}
img{max-width:100%}
@media(max-width:640px){
  .insights-grid{grid-template-columns:1fr}
  .test-grid{grid-template-columns:1fr !important}
  .steps-grid,.trust-grid,.cc-hero-inner{grid-template-columns:1fr !important}
  .insights-hero{padding:var(--space-10) var(--space-5) var(--space-8)}
}

/* Mobile header: keep the tagline from breaking mid-phrase */
@media(max-width:560px){
  .nav-tagline{white-space:nowrap;font-size:var(--text-2xs)}
  .nav-tagline-phone{display:block;margin-top:.05rem}
  .nav-logo{font-size:var(--text-3xl)}
}

/* Industry Insights: loading / empty / error state */
.insights-message{color:var(--text-secondary);text-align:center;font-size:var(--text-3xl);
  line-height:1.65;max-width:640px;margin:0 auto var(--space-4)}
#insights-grid:not(.insights-grid){display:block;text-align:center;max-width:1200px;margin:0 auto}

/* ============================================================
   MOBILE TAP TARGETS (spec section 8: 44px minimum)
   ============================================================ */
/* Both halves of the toggle must size identically. The active side is a
   <span>, the other an <a> — styling only the <a> made them uneven. */
.lang-toggle a,.lang-toggle span{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding-inline:0.75rem;
}
.lang-toggle{align-items:stretch}
.nav-cta-num{min-height:44px;display:inline-flex;align-items:center}
.rev-more{min-height:44px;display:flex;width:fit-content;align-items:center;
          margin:.25rem 0 .75rem}
/* Consent checkbox: enlarge the hit area without changing the box's look */
.form-consent{min-height:44px;padding-block:0.375rem}
.form-consent input[type=checkbox]{width:1.375rem;height:1.375rem}
/* Checkbox inputs and selects on every form */
input[type=checkbox]{width:1.375rem;height:1.375rem}
.form-group select,.form-group input{min-height:44px}
/* Logo is a link; give it a full-height hit area */
.nav-logo{min-height:44px;display:inline-flex;align-items:center}
/* Inline CTA links that act as buttons */
.cta-btn-action,.hero-cta a,.loc-card a{min-height:44px;display:inline-flex;align-items:center}
/* Checkbox hit area: inline width/height attributes on some inputs need !important */
input[type=checkbox]{width:1.375rem !important;height:1.375rem !important;flex-shrink:0}
.form-consent{min-height:44px;align-items:center !important;padding-block:0.375rem}
/* CTA links that read as buttons */
a.cta-btn-action,a.hero-cta-btn,.cta-phone-big a{min-height:44px;display:inline-flex;align-items:center;justify-content:center}

/* Very narrow screens: the Spanish tagline is long enough to push the
   language toggle and hamburger off the right edge. Shrink the logo block. */
@media(max-width:430px){
  .nav-tagline{font-size:0.5rem;letter-spacing:.02em}
  .nav-logo{font-size:1.0625rem;white-space:nowrap}
  .nav-inner{gap:0.5rem}
  .nav-left{min-width:0;flex-shrink:1;overflow:hidden}
  .nav-right{flex-shrink:0}
  .lang-toggle a,.lang-toggle span{padding-inline:0.5rem;font-size:0.6875rem}
}
@media(max-width:360px){
  .nav-tagline{display:none}
}
a[href^="tel:"]{padding-block:0.25rem}

/* Desktop nav links: 44px hit area for touch-screen laptops and tablets */
.nav-links a{min-height:44px;display:inline-flex;align-items:center}


/* Spanish tagline ("PRESTAMOS SOBRE AUTOS (310) 977-1311") is long enough to
   slide under the language toggle between 361px and 389px. Drop the phone
   number from the tagline there — it already appears in the top strip. */
@media(max-width:389px){
  .nav-tagline-phone{display:none}
}
@media(max-width:400px){
  html[lang="es"] .nav-tagline{font-size:0.4375rem}
}

/* ============================================================
   ITEM 11 — mobile: keep the arrow on the same line as the label
   ("GET YOUR FREE QUOTE ↑" was wrapping the arrow to its own row)
   ============================================================ */
@media(max-width:640px){
  a.cta-btn-action,.mid-cta a.cta-btn-action{
    display:inline-flex;
    flex-wrap:nowrap;
    white-space:nowrap;
    align-items:center;
    justify-content:center;
    gap:.45rem;
    font-size:0.9375rem;
    letter-spacing:.3px;
    padding-inline:var(--space-6);
    max-width:100%;
  }
}
@media(max-width:380px){
  a.cta-btn-action,.mid-cta a.cta-btn-action{font-size:0.875rem;padding-inline:var(--space-5)}
}


/* ============================================================
   ITEM 12 — How It Works comparison table
   Competitor values read red; RPM's own values stay green.
   Applies at every width (desktop and mobile).
   ============================================================ */
.compare-col:not(.highlight) .compare-row{color:var(--compare-neg)}
.compare-col.highlight h3{color:var(--compare-neg)}


/* ============================================================
   INDUSTRY INSIGHTS — pre-launch state
   ============================================================ */
.insights-note{max-width:760px;margin:0 auto var(--space-10);text-align:center}
.insights-note h2{font-family:'Fraunces',serif;font-weight:900;color:#fff;
  font-size:clamp(1.375rem,3vw,1.875rem);line-height:1.25;margin-bottom:var(--space-4)}
.insights-note p{color:var(--text-secondary);font-size:var(--text-3xl);line-height:1.7}
.insights-placeholder{
  max-width:1200px;margin:0 auto;
  background:var(--surface-2);
  border:1px dashed var(--border-soft);
  border-radius:16px;
  padding:var(--space-14) var(--space-6);
  text-align:center;
  font-family:'Fraunces',serif;font-weight:900;
  font-size:clamp(1.5rem,4vw,2.25rem);
  color:var(--accent-light);
  letter-spacing:.02em;
}
@media(max-width:640px){
  .insights-placeholder{padding:var(--space-10) var(--space-5)}
  .insights-note{margin-bottom:var(--space-8)}
}

/* ============================================================
   FORM TEXT LEGIBILITY
   Forms had accumulated ad-hoc translucent whites (rgba .5–.85)
   at 10–12px. All passed AA, but read washed out. This maps every
   piece of form text onto the canonical tokens and lifts the
   smallest sizes. !important is required because much of this
   copy carries inline style attributes.
   ============================================================ */
.form-card, .hiw-hero-form, .form-strip-form, .form-body, .form-header{
  --form-body-color: var(--text-secondary);
  --form-fine-color: var(--text-muted);
}

/* Card heading + subheading */
.form-card .form-header h2,.hiw-hero-form h3,.form-strip-form h3{color:#fff !important}
.form-card .form-header p,.hiw-hero-form > p,.form-strip-form > p{
  color:var(--text-secondary) !important;font-size:0.8125rem !important;opacity:1 !important}

/* Field labels */
.form-group label,.form-card label,.hiw-hero-form label,.form-strip-form label{
  color:var(--text-secondary) !important;font-size:0.75rem !important;opacity:1 !important}
.form-group label span,.form-card label span:not(.form-consent span){
  color:var(--text-muted) !important;opacity:1 !important}

/* Storage-consent line */
.form-consent,.form-consent span{
  color:var(--text-secondary) !important;font-size:0.8125rem !important;opacity:1 !important}

/* "Text us … 6 pictures" helper + sample-pictures toggle */
.form-body > div:not([class]),.form-card > .form-body > div:not([class]){opacity:1 !important}
.sample-grid summary,summary{color:var(--accent-light) !important}

/* Reassurance lines under the button */
.form-trust{color:var(--text-muted) !important;font-size:0.75rem !important;opacity:1 !important}
.form-callback{color:var(--text-secondary) !important;font-size:0.75rem !important;opacity:1 !important}
.form-callback strong{color:#fff !important}

/* Legal fine print — smallest text on the page, so use the muted token
   rather than a low alpha, and hold it at 11.5px */
form > div[style*="font-size:var(--text-xs)"],
form div[style*="rgba(255,255,255,.6)"],
form div[style*="rgba(255,255,255,0.6)"]{
  color:var(--text-muted) !important;font-size:0.71875rem !important;line-height:1.6 !important;opacity:1 !important}
form a{color:var(--accent-light) !important}
form .form-consent a{color:var(--accent-light) !important}

/* The lien notice stays the most prominent line in the block */
.lien-notice{color:#fff !important}


/* ============================================================
   SITE MAP  (every page)
   Labelled columns — the "mini site map" footer pattern. Columns
   stay open on desktop for scanning and internal linking; on
   mobile they collapse to tap-to-open accordions so the block
   doesn't add a screen of scrolling.
   ============================================================ */
.sitemap{background:var(--cloud);border-top:1px solid var(--border-soft);
         padding:var(--space-12) var(--space-6) var(--space-10)}
.sitemap-inner{max-width:1200px;margin:0 auto}
.sitemap-title{font-family:'Fraunces',serif;font-weight:900;color:#fff;
  font-size:1.25rem;margin-bottom:var(--space-6);text-align:left}
.sitemap-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-8)}
.sitemap-col{min-width:0}
.sitemap-col > summary{
  font-family:'Plus Jakarta Sans',sans-serif;font-size:0.6875rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.16em;color:var(--accent-light);
  margin-bottom:var(--space-3);cursor:default;list-style:none;
  display:flex;align-items:center;min-height:auto}
.sitemap-col > summary::-webkit-details-marker{display:none}
.sitemap-col ul{list-style:none;margin:0;padding:0}
.sitemap-col li{color:var(--text-secondary);font-size:var(--text-md);line-height:1.5}
.sitemap-col a{color:var(--text-secondary);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px}
.sitemap-col a:hover{color:#fff;text-decoration:underline}

@media(max-width:900px){
  .sitemap-cols{grid-template-columns:repeat(2,1fr);gap:var(--space-6)}
}
@media(max-width:640px){
  .sitemap{padding:var(--space-10) var(--space-5) var(--space-8)}
  .sitemap-cols{grid-template-columns:1fr;gap:0}
  .sitemap-col{border-bottom:1px solid var(--border-soft)}
  .sitemap-col > summary{
    cursor:pointer;min-height:52px;margin-bottom:0;justify-content:space-between;
    font-size:0.75rem}
  .sitemap-col > summary::after{
    content:'+';font-size:1.125rem;font-weight:700;color:var(--accent-light);
    font-family:'Plus Jakarta Sans',sans-serif;letter-spacing:0}
  .sitemap-col[open] > summary::after{content:'\2212'}
  .sitemap-col ul{padding-bottom:var(--space-3)}
}

@media(max-width:900px){ .insights-hero{padding-inline:var(--space-7)} }
@media(max-width:640px){ .insights-hero{padding:var(--space-10) var(--space-5) var(--space-8)} }

/* ============================================================
   LINE-BREAK CONTROL
   Keep multi-word names, phone numbers, hours and ratings from
   splitting across lines. The wrapper spans below are inserted
   into the markup; these rules keep each phrase intact and let
   the browser break at the separators between them instead.
   ============================================================ */
.nb{white-space:nowrap}
/* Phone and email links should never split mid-string */
a[href^="tel:"],a[href^="sms:"],a[href^="mailto:"],
.nav-tagline-phone,.nav-cta-num,.cta-phone,.cta-phone-big,
.location-hours a,.footer-phone,
input[type="tel"]::placeholder{white-space:nowrap}


/* ============================================================
   MOBILE NAV — links on a second row (below 960px)
   Top row: logo + language toggle.
   Second row: the four page links.
   ============================================================ */
@media(max-width:960px){
  body:not(.lp) .nav{height:auto;min-height:0;padding-block:0.5rem}
  body:not(.lp) .nav-inner{flex-wrap:wrap;row-gap:0.375rem;align-items:center}
  /* let the logo, links and toggle lay out as siblings of .nav-inner */
  body:not(.lp) .nav-right{display:contents}
  body:not(.lp) .nav-logo{order:1;flex:1 1 auto;min-width:0}
  body:not(.lp) .lang-toggle{order:2;flex:0 0 auto;margin-left:auto}
  body:not(.lp) .nav-links{
    display:flex !important;
    order:3;
    flex:0 0 100%;
    width:100%;
    justify-content:space-between;
    align-items:center;
    gap:0.375rem;
    padding-top:0.375rem;
    border-top:1px solid rgba(12,25,43,.12);
  }
  body:not(.lp) .nav-links a{
    font-size:0.8125rem;
    white-space:nowrap;
    min-height:44px;
    display:inline-flex;
    align-items:center;
    padding-block:0;
  }
}
@media(max-width:430px){ body:not(.lp) .nav-links a{font-size:0.75rem} }
@media(max-width:390px){ body:not(.lp) .nav-links a{font-size:0.6875rem} }
@media(max-width:340px){ body:not(.lp) .nav-links a{font-size:0.625rem} body:not(.lp) .nav-links{gap:0.25rem} }
/* Spanish link labels are longer; step down one more size at 320px */
html[lang="es"] .nav-links a{font-size:0.75rem}
@media(max-width:430px){ html[lang="es"] .nav-links a{font-size:0.6875rem} }
@media(max-width:390px){ html[lang="es"] .nav-links a{font-size:0.625rem} }
@media(max-width:340px){ html[lang="es"] .nav-links a{font-size:0.5625rem} html[lang="es"] .nav-links{gap:0.1875rem} }

/* ============================================================
   CTA PHONE — keep the number inside the card on small screens
   34px at 320-375px overflows the card; scale it to fit while
   staying on one line.
   ============================================================ */
@media(max-width:430px){ .cta-phone-big{font-size:1.75rem} }
@media(max-width:390px){ .cta-phone-big{font-size:1.5rem} }
@media(max-width:340px){ .cta-phone-big{font-size:1.3125rem} }

/* ============================================================
   CTA BUTTON — keep the label inside the button at 320-360px
   "OBTÉN TU COTIZACIÓN GRATIS" is wider than the button can be
   at 320px, so trim the type and side padding at that size.
   ============================================================ */
@media(max-width:360px){
  a.cta-btn-action,.mid-cta a.cta-btn-action{font-size:0.6875rem;letter-spacing:.2px;padding-inline:var(--space-4)}
}

/* Spanish CTA label is ~30% wider than the English one */
@media(max-width:430px){
  html[lang="es"] a.cta-btn-action,html[lang="es"] .mid-cta a.cta-btn-action{
    font-size:0.8125rem;padding-inline:var(--space-5)}
}
@media(max-width:390px){
  html[lang="es"] a.cta-btn-action,html[lang="es"] .mid-cta a.cta-btn-action{
    font-size:0.75rem;letter-spacing:.1px;padding-inline:var(--space-4)}
}
@media(max-width:360px){
  html[lang="es"] a.cta-btn-action,html[lang="es"] .mid-cta a.cta-btn-action{
    font-size:0.625rem;letter-spacing:0;padding-inline:0.75rem}
}

/* Mobile: let the CTA button use the full width of its container so the
   label has room, instead of shrink-wrapping and overflowing. */
@media(max-width:640px){
  a.cta-btn-action,.mid-cta a.cta-btn-action{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    padding-inline:0.75rem;
    text-align:center;
  }
}

/* Mobile: the CTA banner's 2.75rem side padding leaves the button too narrow
   for the Spanish label. Trim it so the button has room. */
@media(max-width:430px){
  body .cta-banner{padding-inline:1.25rem}
}
@media(max-width:360px){
  body .cta-banner{padding-inline:1rem}
}

/* Desktop: guarantee clear space between the logo block and the nav links.
   Between 961-1080px they were touching, worst on the Spanish wordmark. */
@media(min-width:961px){
  .nav-inner{column-gap:2.5rem}
  .nav-logo{margin-right:1rem}
}

/* ============================================================
   DESKTOP HEADER SPACING
   .nav-logo was allowed to shrink below its own text width, so the
   wordmark overflowed its box and printed over the nav links. Lock
   the logo to its content width, give the header a real gap, and let
   the link spacing absorb any shortfall instead.
   ============================================================ */
@media(min-width:961px){
  .nav-inner{gap:var(--space-8)}
  .nav-logo{flex:0 0 auto;min-width:max-content}
  .nav-right{flex:0 1 auto;min-width:0;gap:var(--space-6)}
  /* links must not shrink below their text either, or the last label
     spills into the phone CTA (seen on Spanish at ~1024px) */
  .nav-links{flex:0 0 auto;min-width:max-content;gap:clamp(1rem,2.2vw,var(--space-7))}
  .nav-cta{flex:0 0 auto}
  .lang-toggle{flex:0 0 auto}
}
/* Narrow desktop: tighten spacing and type so the full row still fits */
@media(min-width:961px) and (max-width:1200px){
  .nav-inner{gap:var(--space-5)}
  .nav-right{gap:var(--space-4)}
  .nav-links{gap:0.875rem}
  .nav-links a{font-size:0.8125rem}
  html[lang="es"] .nav-links a{font-size:0.75rem}
  html[lang="es"] .nav-links{gap:0.6875rem}
}