/*
  irs_help_match.css
  Styles for the IRS Help exact-match landing page (/irs-help-match/).
  Mobile-first layout — base styles target mobile, media queries add desktop.

  Table of contents:
  1.  Variables & Reset
  2.  Base typography
  3.  Layout utilities
  4.  Buttons
  5.  Header
  6.  Hero section
  7.  Form card (panels, radio cards, fields, TCPA)
  8.  Trust strip
  9.  Section base
  10. How We Help section
  11. Common Problems section
  12. Process section
  13. CTA section
  14. FAQ section
  15. Footer
  16. Mobile sticky CTA
  17. Thank-you page
  18. Utilities (hidden, spinner)
  19. Responsive — tablet (600px+)
  20. Responsive — desktop (900px+)
*/


/* ═══════════════════════════════════════════════════════════════════════════
   1. VARIABLES & RESET
════════════════════════════════════════════════════════════════════════════ */

:root {
  /* Brand colours */
  --navy:        #0a1f3d;
  --navy2:       #0e2a52;
  --amber:       #d97706;
  --amber-hover: #b45309;
  --amber-light: #fffbeb;
  --green:       #16a34a;
  --red:         #dc2626;

  /* Text */
  --text:        #0f172a;
  --muted:       #64748b;
  --light-text:  #94a3b8;

  /* Backgrounds */
  --bg:          #f8fafc;
  --bg-alt:      #f1f5f9;
  --bg-navy:     #0a1f3d;
  --white:       #ffffff;

  /* Borders */
  --border:      #e2e8f0;
  --border-focus:#3b82f6;

  /* Shadows */
  --shadow-sm:   0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --shadow-md:   0 4px 12px rgba(0,0,0,.10);
  --shadow-lg:   0 8px 30px rgba(0,0,0,.14);

  /* Radius */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-pill: 999px;

  /* Spacing */
  --section-py:  60px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

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

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

a:hover {
  text-decoration: underline;
}

ul {
  list-style: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   2. BASE TYPOGRAPHY
════════════════════════════════════════════════════════════════════════════ */

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
}

h1 { font-size: clamp(1.6rem, 5vw, 2.6rem); }
h2 { font-size: clamp(1.3rem, 4vw, 2rem);   }
h3 { font-size: 1.1rem; }
h4 { font-size: 1rem;   }

p { margin-bottom: 0; }


/* ═══════════════════════════════════════════════════════════════════════════
   3. LAYOUT UTILITIES
════════════════════════════════════════════════════════════════════════════ */

.container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}

.section {
  padding: var(--section-py) 0;
}

.section-title {
  text-align: center;
  margin-bottom: 12px;
}

.section-sub {
  text-align: center;
  color: var(--muted);
  max-width: 640px;
  margin: 0 auto 40px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   4. BUTTONS
════════════════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background .18s, color .18s, border-color .18s, box-shadow .18s;
  text-decoration: none;
}

/* Solid amber — primary action */
.btn-primary {
  background: var(--amber);
  color: var(--white);
  border-color: var(--amber);
  box-shadow: 0 2px 8px rgba(217,119,6,.35);
}
.btn-primary:hover {
  background: var(--amber-hover);
  border-color: var(--amber-hover);
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(217,119,6,.45);
}

/* Outlined white — secondary action on dark backgrounds */
.btn-outline-white {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,.6);
}
.btn-outline-white:hover {
  background: rgba(255,255,255,.1);
  border-color: var(--white);
  text-decoration: none;
}

/* Ghost — subtle secondary (used in mobile sticky) */
.btn-ghost {
  background: rgba(255,255,255,.15);
  color: var(--white);
  border-color: rgba(255,255,255,.4);
}
.btn-ghost:hover {
  background: rgba(255,255,255,.25);
  text-decoration: none;
}

/* Full-width submit button inside the form */
.btn-submit {
  width: 100%;
  padding: 16px;
  font-size: 1.05rem;
  margin-top: 6px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   5. HEADER
════════════════════════════════════════════════════════════════════════════ */

.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  padding-bottom: 10px;
}

.logo-link {
  display: flex;
  align-items: center;
}

.logo-img {
  height: 50px;
  width: auto;
}

.header-phone {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .92rem;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
}

.header-phone:hover {
  color: var(--amber);
  text-decoration: none;
}

.phone-svg {
  width: 16px;
  height: 16px;
  color: var(--amber);
  flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   6. HERO SECTION
════════════════════════════════════════════════════════════════════════════ */

.hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy2) 100%);
  padding: 28px 0 36px;
}

.hero-inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── Hero copy (left column) ── */

.hero-copy {
  color: var(--white);
}

.hero-eyebrow {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 10px;
}

.hero-headline {
  color: var(--white);
  margin-bottom: 16px;
}

.hero-subhead {
  color: rgba(255,255,255,.82);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 24px;
  max-width: 520px;
}

.hero-bullets {
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hero-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .94rem;
  color: rgba(255,255,255,.88);
}

.hero-bullets li::before {
  content: "✓";
  color: var(--amber);
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 1px;
}

.hero-cta {
  display: inline-flex;
  font-size: 1rem;
  padding: 15px 32px;
  margin-bottom: 14px;
}

/* Hero accreditation badges — replaces scroll-to-form CTA button */
.hero-badges {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap;
  margin-bottom: 14px;
}
.hero-badges img {
  width: 110px;
  height: auto;
  object-fit: contain;
  display: block;
  background: #ffffff;
  border-radius: 6px;
  padding: 5px 8px;
}
.hero-badges .hero-badge-ca {
  width: 135px;
}
.hero-badges a {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  background: #ffffff;
  border-radius: 6px;
  padding: 5px 8px;
}
.hero-badges a img {
  width: 58px;
  height: auto;
  background: none;
  border-radius: 0;
  padding: 0;
}
@media (max-width: 600px) {
  .hero-badges { flex-wrap: wrap; gap: 10px; }
  .hero-badges img { width: 88px; }
  .hero-badges .hero-badge-ca { width: 110px; }
  .hero-badges a img { width: 48px; }
}

.hero-phone-line {
  font-size: .88rem;
  color: rgba(255,255,255,.7);
}

.hero-phone-line a {
  color: var(--white);
  font-weight: 700;
  text-decoration: underline;
}


/* ═══════════════════════════════════════════════════════════════════════════
   7. FORM CARD  (mirrors /irs-help/ landing page style)
════════════════════════════════════════════════════════════════════════════ */

/* Outer card shell */
.hero-form-card {
  background: #fff;
  border-radius: 12px;
  padding: 28px 24px;
  box-shadow: 0 8px 40px rgba(0,0,0,.14);
  border: 1px solid #ccd8ec;
}

/* Card title / subtitle */
.ct {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  text-align: center;
  margin-bottom: 2px;
}

.cs {
  font-size: .82rem;
  color: #888;
  text-align: center;
  margin-bottom: 18px;
}

/* Step dots */
.dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 16px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e2e8f0;
  transition: background .2s;
}

.dot.on {
  background: var(--navy);
}

/* Form steps */
.form-step {
  display: none;
}

.form-step.active {
  display: block;
  animation: stepIn .28s ease;
}

@keyframes stepIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Step question heading */
.sq {
  font-size: .95rem;
  font-weight: 700;
  color: var(--navy);
  text-align: center;
  margin-bottom: 12px;
}

/* Step micro-copy (shown on mobile only) */
.step-mc {
  display: none;
  font-size: .78rem;
  color: #aaa;
  text-align: center;
  margin: -2px 0 14px;
  line-height: 1.5;
}

/* 2-column radio grid */
.dg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

/* Full-column radio option */
.fc {
  grid-column: 1 / -1;
}

/* Individual radio option */
.ro {
  position: relative;
}

.ro input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
}

.ro label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 6px;
  border: 2px solid #e2e8f0;
  border-radius: 6px;
  font-size: .83rem;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  text-align: center;
  transition: all .15s;
  background: #f8fafc;
}

.ro label:hover {
  border-color: var(--navy);
  color: var(--navy);
}

.ro input:checked + label {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
  font-weight: 700;
}

/* Trust badges strip — below form, visible on all screen sizes */
.form-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: nowrap;
  padding: 16px 0 4px;
  border-top: 1px solid #efefef;
  margin-top: 12px;
}
.form-badges img {
  height: 50px;
  width: auto;
  object-fit: contain;
}
.form-badges .form-badge-ca {
  height: 26px;
}
.form-badges a {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.form-badges a img {
  height: 60px;
  width: auto;
}

/* Text / select fields */
.fg {
  margin-bottom: 11px;
}

.fg label {
  display: block;
  font-size: .79rem;
  font-weight: 600;
  color: #444;
  margin-bottom: 3px;
}

.fg input,
.fg select {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid #d1d5db;
  border-radius: 6px;
  font-size: .92rem;
  font-family: inherit;
  color: var(--navy);
  background: #fff;
  box-sizing: border-box;
}

.fg input:focus,
.fg select:focus {
  outline: none;
  border-color: var(--navy);
}

/* Name row — 2 columns */
.r2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Submit button — full width */
.fb {
  width: 100%;
  font-size: .97rem;
  padding: 12px;
  margin-top: 4px;
  display: block;
}

/* Back link */
.btn-back {
  background: none;
  border: none;
  color: #999;
  font-size: .8rem;
  cursor: pointer;
  padding: 5px 0;
  margin-top: 2px;
  display: block;
  text-align: center;
  text-decoration: underline;
  font-family: inherit;
  width: 100%;
}

.btn-back:hover {
  color: #555;
}

/* Inline form error */
.form-err {
  color: #c44e00;
  font-size: .82rem;
  font-weight: 600;
  text-align: center;
  margin: 6px 0 2px;
  min-height: 1.1em;
}

/* TCPA */
.tcpa-label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 12px 0 14px;
  cursor: pointer;
}

.tcpa-label input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: #2563eb;
  cursor: pointer;
}

.tcpa-label span {
  font-size: .72rem;
  color: #64748b;
  line-height: 1.5;
}

.tcpa-label.error {
  border: 1.5px solid #dc2626;
  border-radius: 6px;
  background: #fff5f5;
  padding: 8px 10px;
}

.tcpa-label.error span {
  color: #9b1c1c;
}

#tcpa-err {
  display: none;
  color: #dc2626;
  font-size: .78rem;
  font-weight: 600;
  margin: 4px 0 10px;
}

/* Loading spinner */
.ld {
  display: none;
  text-align: center;
  padding: 16px 0;
}

.sp {
  width: 32px;
  height: 32px;
  border: 4px solid #e2e8f0;
  border-top-color: var(--navy);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  margin: 0 auto 7px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Mobile progress bar (hidden by default, shown on mobile via media query) */
.mob-progress {
  display: none;
}

.mob-prog-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.mob-step-label {
  font-size: .7rem;
  font-weight: 700;
  color: #64748b;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.mob-prog-micro {
  font-size: .68rem;
  color: #94a3b8;
}

.mob-progress-bar {
  height: 7px;
  background: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
  width: 100%;
}

.mob-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--navy) 0%, #2d6fa0 100%);
  border-radius: 4px;
  transition: width .45s cubic-bezier(.4,0,.2,1);
}


/* ═══════════════════════════════════════════════════════════════════════════
   8. TRUST STRIP
════════════════════════════════════════════════════════════════════════════ */

.trust-strip {
  background: var(--white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 20px 0;
}

.trust-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 8px;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
}

.trust-icon {
  font-size: 1.1rem;
  line-height: 1;
}

.trust-divider {
  width: 1px;
  height: 20px;
  background: var(--border);
  display: none; /* shown on wider screens via media query */
}


/* ═══════════════════════════════════════════════════════════════════════════
   9. SECTION BASE (alternate bg for visual rhythm)
════════════════════════════════════════════════════════════════════════════ */

.how-we-help  { background: var(--bg); }
.problems-section { background: var(--bg-alt); }
.process-section  { background: var(--white); }
.cta-section  { background: var(--navy); padding: 52px 0; }
.faq-section  { background: var(--bg); }


/* ═══════════════════════════════════════════════════════════════════════════
   10. HOW WE HELP SECTION
════════════════════════════════════════════════════════════════════════════ */

.help-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.help-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px 22px;
  box-shadow: var(--shadow-sm);
}

.help-icon {
  font-size: 1.8rem;
  margin-bottom: 12px;
  line-height: 1;
}

.help-card h3 {
  font-size: 1rem;
  margin-bottom: 8px;
  color: var(--navy);
}

.help-card p {
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.6;
}


/* ═══════════════════════════════════════════════════════════════════════════
   11. COMMON PROBLEMS SECTION
════════════════════════════════════════════════════════════════════════════ */

.problems-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.problem-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}

.problem-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  margin-top: 2px;
  line-height: 1;
}

.problem-card h4 {
  font-size: .95rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
}

.problem-card p {
  font-size: .86rem;
  color: var(--muted);
  line-height: 1.6;
}


/* ═══════════════════════════════════════════════════════════════════════════
   12. PROCESS SECTION
════════════════════════════════════════════════════════════════════════════ */

.process-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.process-step {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px 20px;
  text-align: center;
  width: 100%;
  box-shadow: var(--shadow-sm);
}

.step-number {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--amber);
  color: var(--white);
  font-size: 1.1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}

.process-step h4 {
  font-size: .97rem;
  color: var(--navy);
  margin-bottom: 6px;
}

.process-step p {
  font-size: .87rem;
  color: var(--muted);
  line-height: 1.6;
}

.process-arrow {
  font-size: 1.4rem;
  color: var(--amber);
  transform: rotate(90deg); /* points down on mobile */
  display: block;
}


/* ═══════════════════════════════════════════════════════════════════════════
   13. CTA SECTION
════════════════════════════════════════════════════════════════════════════ */

.cta-box {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.cta-box h2 {
  color: var(--white);
  margin-bottom: 14px;
}

.cta-box p {
  color: rgba(255,255,255,.8);
  margin-bottom: 28px;
  line-height: 1.7;
}

.cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   14. FAQ SECTION
════════════════════════════════════════════════════════════════════════════ */

.faq-list {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.faq-item summary {
  padding: 18px 20px;
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--text);
  transition: background .15s;
}

.faq-item summary:hover {
  background: var(--bg);
}

/* Custom toggle arrow */
.faq-item summary::after {
  content: "+";
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--amber);
  flex-shrink: 0;
  transition: transform .2s;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

/* Remove default browser disclosure marker */
.faq-item summary::-webkit-details-marker { display: none; }

.faq-answer {
  padding: 0 20px 18px;
}

.faq-answer p {
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.7;
}


/* ═══════════════════════════════════════════════════════════════════════════
   15. FOOTER
════════════════════════════════════════════════════════════════════════════ */

.site-footer {
  background: var(--navy);
  padding: 40px 0 32px;
}

.footer-inner {
  text-align: center;
}

.footer-logo {
  height: 30px;
  width: auto;
  margin: 0 auto 10px;
  filter: brightness(0) invert(1);
  opacity: .85;
}

.footer-tagline {
  color: rgba(255,255,255,.6);
  font-size: .82rem;
  margin-bottom: 14px;
}

.footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
}

.footer-links a {
  color: rgba(255,255,255,.65);
  font-size: .8rem;
  text-decoration: underline;
}

.footer-links a:hover {
  color: var(--white);
}

.footer-links span {
  color: rgba(255,255,255,.3);
  font-size: .8rem;
}

.footer-disclaimer {
  color: rgba(255,255,255,.45);
  font-size: .74rem;
  line-height: 1.6;
  max-width: 720px;
  margin: 0 auto 14px;
}

.footer-copy {
  color: rgba(255,255,255,.35);
  font-size: .76rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   16. MOBILE STICKY CTA BAR
   Hidden by default. Becomes visible (.visible) after user scrolls
   past the hero section (toggled by JavaScript).
════════════════════════════════════════════════════════════════════════════ */

.mobile-sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--navy);
  padding: 12px 16px;
  display: flex;
  gap: 10px;
  box-shadow: 0 -2px 12px rgba(0,0,0,.25);

  /* Hidden by default — transitions up from below */
  transform: translateY(100%);
  transition: transform .3s ease;
}

.mobile-sticky-cta.visible {
  transform: translateY(0);
}

.sticky-form-btn,
.sticky-call-btn {
  flex: 1;
  padding: 12px 10px;
  font-size: .88rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   17. THANK-YOU PAGE
════════════════════════════════════════════════════════════════════════════ */

.thankyou-section {
  padding: 64px 0 80px;
  text-align: center;
}

.thankyou-inner {
  max-width: 600px;
  margin: 0 auto;
}

.thankyou-icon {
  font-size: 3.5rem;
  margin-bottom: 20px;
}

.thankyou-section h1 {
  margin-bottom: 18px;
}

.thankyou-lead {
  font-size: 1.05rem;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 36px;
}

.thankyou-next-steps {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 26px 28px;
  text-align: left;
  margin-bottom: 32px;
}

.thankyou-next-steps h2 {
  font-size: 1.1rem;
  margin-bottom: 14px;
  color: var(--navy);
}

.thankyou-next-steps ol {
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.thankyou-next-steps li {
  font-size: .93rem;
  color: var(--muted);
  line-height: 1.6;
}

.thankyou-call {
  font-size: .95rem;
  color: var(--muted);
}

.thankyou-phone {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--navy);
  text-decoration: none;
  display: block;
  margin-top: 6px;
}

.thankyou-phone:hover {
  color: var(--amber);
}


/* ═══════════════════════════════════════════════════════════════════════════
   18. UTILITIES
════════════════════════════════════════════════════════════════════════════ */

.hidden {
  display: none !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   19. RESPONSIVE — TABLET (600px+)
════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 600px) {

  /* Trust strip — show dividers, single row */
  .trust-inner {
    flex-wrap: nowrap;
    gap: 0;
    justify-content: space-around;
  }

  .trust-divider {
    display: block;
  }

  /* Help grid — 2 columns */
  .help-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Problems grid — 2 columns */
  .problems-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Process — horizontal (2+2 on tablet) */
  .process-steps {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
  }

  .process-step {
    flex: 1 1 180px;
    max-width: 220px;
  }

  .process-arrow {
    transform: rotate(0deg); /* points right */
    align-self: flex-start;
    margin-top: 44px;
  }

  /* CTA actions — side by side */
  .cta-actions {
    flex-direction: row;
    justify-content: center;
  }

  /* Form field row — 2 columns for first+last name */
  .field-row {
    flex-direction: row;
    gap: 12px;
  }

  /* Mobile sticky — desktop hides it (only show on ≤ 900px) */
}


/* ═══════════════════════════════════════════════════════════════════════════
   20a. MOBILE HERO OVERRIDES (below 900px)
   On mobile: hide subhead, bullets, CTA button, and phone line so the form
   card appears immediately below the headline and stays above the fold.
════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 899px) {
  .hero-subhead,
  .hero-bullets,
  .hero-cta,
  .hero-phone-line {
    display: none;
  }

  /* Center eyebrow + headline on mobile */
  .hero-copy {
    text-align: center;
  }

  /* Tighten eyebrow + headline spacing on mobile */
  .hero-eyebrow {
    margin-bottom: 6px;
  }

  .hero-headline {
    margin-bottom: 0;
    font-size: 1.6rem;
  }

  /* Form card mobile tweaks */
  .hero-form-card {
    margin: 0;
    border-radius: 16px;
    padding: 22px 20px 26px;
  }

  /* Show progress bar on mobile, hide dots */
  .mob-progress {
    display: block;
    margin-bottom: 16px;
  }

  .dots {
    display: none;
  }

  /* Show step micro-copy on mobile */
  .step-mc {
    display: block;
    font-size: .82rem;
    color: #64748b;
    margin-bottom: 16px;
  }

  /* Trust badges inside form — tighter on mobile */
  .form-badges {
    gap: 10px;
    flex-wrap: wrap;
    margin: 12px -20px -26px;
    padding: 12px 12px 14px;
    border-radius: 0 0 16px 16px;
    background: #fff;
  }
  .form-badges img { height: 28px; }
  .form-badges .form-badge-ca { height: 22px; }
  .form-badges a img { height: 36px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   20. RESPONSIVE — DESKTOP (900px+)
════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 900px) {

  /* Bigger logo on desktop */
  .logo-img {
    height: 64px;
  }

  /* Hero: restore subhead, bullets, CTA, phone on desktop */
  .hero-subhead,
  .hero-bullets,
  .hero-cta,
  .hero-phone-line {
    display: block;
  }

  /* Hero: side-by-side layout */
  .hero {
    padding: 48px 0 56px;
  }

  .hero-inner {
    flex-direction: row;
    align-items: flex-start;
    gap: 52px;
  }

  .hero-copy {
    flex: 1;
    padding-top: 12px;
  }

  .hero-form-card {
    width: 400px;
    flex-shrink: 0;
  }

  /* Help grid — 2 columns (already set), keep at 2 for balance */

  /* Problems grid — 4 columns */
  .problems-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  /* Process — horizontal single row */
  .process-steps {
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
  }

  .process-step {
    flex: 1;
    max-width: none;
  }

  .process-arrow {
    font-size: 1.6rem;
    margin-top: 22px;
    flex-shrink: 0;
  }

  /* Hide mobile sticky on wide screens */
  .mobile-sticky-cta {
    display: none;
  }

  /* Section vertical rhythm */
  :root {
    --section-py: 80px;
  }
}