/* ==========================================================================
   Diaz Blueprint — Lot Check  ·  PAGE LAYER
   Loads AFTER ds.css. Everything visual comes from the design system
   (ds.css, the dbp- classes); this file holds only what the DS doesn't own:
   the base reset, page-level layout/scaffolding (hero grid, form rows, the
   blueprint sketch, the results/loading state, result-card sub-structure),
   and responsive behavior. Page-only classes are namespaced `lc-`.
   Tokens (--dbp-*) are defined in ds.css.
   ========================================================================== */

/* ---------- Base reset ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--dbp-font-body);
  color: var(--dbp-dark);
  background: var(--dbp-white);
  line-height: 1.7;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--dbp-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}

/* Body copy inside design-system text blocks keeps comfortable paragraph spacing. */
.dbp-section p + p,
.dbp-result__body p + p { margin-top: 12px; }
.dbp-section--dark p { color: rgba(255, 255, 255, 0.82); }

/* ---------- Header: make the DS header sticky on this page ---------- */
.dbp-header { position: sticky; top: 0; z-index: 50; }

/* ---------- Hero layout ---------- */
.lc-hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 44px;
  align-items: center;
}
.lc-hero-call { font-size: 14.5px; color: var(--dbp-gray-700); margin-top: 16px; }
.lc-microcopy { font-size: 12.5px; color: var(--dbp-gray-500); margin-top: 10px; font-style: italic; }

/* Address form: input grows, button hugs its label. Uses dbp-input + dbp-btn. */
.lc-form { display: flex; gap: 10px; flex-wrap: wrap; }
.lc-form .dbp-input { flex: 1 1 280px; width: auto; }
.lc-form--center { max-width: 560px; margin: 0 auto 8px; }

/* Blueprint sketch (page-specific line art) */
.lc-hero-plan svg { width: 100%; height: auto; }
.plan-label { font-family: var(--dbp-font-head); font-size: 10px; letter-spacing: 2px; fill: var(--dbp-gray-500); }
.plan-label-blue { fill: var(--dbp-blue); font-weight: 700; }
.plan-dim { font-family: var(--dbp-font-head); font-size: 9px; fill: var(--dbp-blue); }

/* "Every Lot Check includes" — a warm DS card with a small title */
.lc-includes { margin-top: 44px; }
.lc-includes__title { font-family: var(--dbp-font-head); font-size: 16px; font-weight: 700; color: var(--dbp-dark); margin-bottom: 12px; }

/* "What your result means" footnote, trust español line */
.lc-fine-note { margin-top: 24px; font-size: 13.5px; color: var(--dbp-gray-500); font-style: italic; }
.lc-trust-espanol { font-style: italic; color: rgba(255, 255, 255, 0.7); margin-top: 14px; font-size: 15px; }
.lc-trust-espanol a { color: var(--dbp-white); }

/* ---------- Results ---------- */
.lc-results { padding: 12px 20px 48px; }
.lc-results__inner { max-width: 1040px; margin: 0 auto; }

.lc-loading { text-align: center; padding: 40px 0; }
.lc-loading__rule {
  width: 120px; height: 3px; margin: 0 auto 18px;
  background: linear-gradient(90deg, var(--dbp-blue), transparent);
  animation: lc-sweep 1.2s ease-in-out infinite;
  border-radius: 2px;
}
@keyframes lc-sweep {
  0% { transform: translateX(-30px); opacity: 0.4; }
  50% { transform: translateX(30px); opacity: 1; }
  100% { transform: translateX(-30px); opacity: 0.4; }
}
.lc-loading__text { font-family: var(--dbp-font-head); font-weight: 700; font-size: 20px; }
.lc-loading__sub { font-size: 14px; color: var(--dbp-gray-500); margin-top: 6px; }

/* Result-card sub-structure (composition around the DS Verdict/Chip/Stat atoms) */
.lc-result-section + .lc-result-section { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--dbp-gray-200); }
.lc-result-section h4 {
  font-family: var(--dbp-font-head);
  font-size: 11px; font-weight: 700; letter-spacing: 2.5px;
  color: var(--dbp-blue); margin-bottom: 10px; text-transform: uppercase;
}
.lc-facts { display: flex; flex-wrap: wrap; gap: 22px; }

.lc-result-next { margin-top: 24px; background: var(--dbp-warm); border-radius: var(--dbp-radius-sm); padding: 20px 22px; }
.lc-result-next h4 {
  font-family: var(--dbp-font-head);
  font-size: 11px; font-weight: 700; letter-spacing: 2.5px;
  color: var(--dbp-dark); margin-bottom: 10px; text-transform: uppercase;
}
.lc-result-next p { font-size: 14.5px; color: var(--dbp-gray-700); }
.lc-cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 14px 0; }

.lc-lead-form { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.lc-lead-form .dbp-input { flex: 1 1 170px; width: auto; padding: 11px 13px; font-size: 14.5px; border-width: 1.5px; }
.lc-lead-thanks { font-size: 14.5px; color: var(--dbp-green); font-weight: 600; margin-top: 12px; }
.lc-result-disclaimer { margin-top: 18px; font-size: 12px; color: var(--dbp-gray-500); font-style: italic; }

/* ---------- Tap chips (goal / owner / timeline / who-to-call / pro volume) ---------- */
.lc-chipbtn {
  font-family: var(--dbp-font-head); font-size: 14px; font-weight: 600;
  color: var(--dbp-gray-700); background: var(--dbp-white);
  border: 1.5px solid #7A828F; border-radius: 999px;
  padding: 10px 16px; min-height: 44px; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.lc-chipbtn:hover { border-color: var(--dbp-blue); color: var(--dbp-blue); }
.lc-chipbtn--on { border-color: var(--dbp-blue); color: var(--dbp-white); background: var(--dbp-blue); }
.lc-chipbtn--dark { background: transparent; color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.35); }
.lc-chipbtn--dark:hover { border-color: var(--dbp-white); color: var(--dbp-white); }
.lc-chipbtn--dark.lc-chipbtn--on { background: var(--dbp-blue); border-color: var(--dbp-blue); color: var(--dbp-white); }

.lc-goalrow { margin-top: 14px; }
.lc-goalrow__label { font-size: 13.5px; font-weight: 600; color: var(--dbp-gray-700); margin-bottom: 8px; }
.lc-goalrow__hint { font-weight: 400; color: var(--dbp-gray-500); font-style: italic; }
.lc-goalrow__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.lc-goalrow__chips--center { justify-content: center; }

/* Header pro-lane link */
.lc-pro-link { color: rgba(255,255,255,.75); font-size: 13px; margin-right: 14px; }
.lc-pro-link:hover { color: #fff; }

/* Hero plan warn label + compact relabel for long goal names */
.plan-dim--warn { fill: #D97706; }
.plan-label--small { font-size: 7.5px; letter-spacing: 1px; }

/* "The deal, plainly" two-column card */
.lc-deal { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }

/* Loading-wait owner question */
.lc-loading-q { margin-top: 22px; }
.lc-loading-q__label { font-size: 14px; font-weight: 600; color: var(--dbp-gray-700); margin-bottom: 10px; }
.lc-skip { background: none; border: none; color: var(--dbp-gray-500); font-size: 13px; margin-top: 6px; padding: 10px 12px; cursor: pointer; text-decoration: underline; }

/* Result-card additions */
.lc-goal-line { margin-top: 10px; font-weight: 600; }
.lc-verdict-ask { margin-top: 10px; }
.lc-timeline, .lc-callfor { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.lc-timeline__label { font-size: 13.5px; font-weight: 600; color: var(--dbp-gray-700); }
.lc-exploring-note, .lc-callfor-note { font-size: 13px; color: var(--dbp-gray-500); font-style: italic; margin-top: 8px; }
.lc-lead-fail { font-size: 14px; color: var(--dbp-dark); background: #FDF3E7; border-left: 3px solid #D97706; padding: 10px 14px; border-radius: 4px; margin-top: 12px; }

/* Labeled inputs (visible labels above fields — senior-friendly, no ghost text) */
.lc-labeled { display: flex; flex-direction: column; gap: 4px; flex: 1 1 170px; }
.lc-labeled label, .lc-labeled__label { font-size: 13px; font-weight: 600; color: var(--dbp-gray-700); }
.lc-optional { font-weight: 400; color: var(--dbp-gray-500); }
.lc-lead-form .lc-labeled .dbp-input { width: 100%; }
.lc-lead-form { align-items: flex-end; }

/* Expanders (killer cards) */
.lc-more { margin-top: 10px; }
.lc-more summary {
  cursor: pointer; font-family: var(--dbp-font-head); font-size: 12px; font-weight: 700;
  letter-spacing: 1px; color: var(--dbp-blue); text-transform: uppercase; padding: 8px 0;
}
.lc-more p { margin-top: 8px; font-size: 14px; }

/* Four-types tap strip */
.lc-types-title { font-family: var(--dbp-font-head); font-size: 16px; font-weight: 700; margin: 34px 0 14px; }
.lc-types { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.lc-type { background: var(--dbp-white); border: 1.5px solid var(--dbp-gray-200); border-radius: var(--dbp-radius-sm); padding: 12px 14px; }
.lc-type summary {
  cursor: pointer; display: flex; align-items: center; gap: 10px;
  font-family: var(--dbp-font-head); font-weight: 600; font-size: 14px; list-style: none;
}
.lc-type summary::-webkit-details-marker { display: none; }
.lc-type summary::after { content: '+'; margin-left: auto; color: var(--dbp-blue); font-weight: 700; font-size: 18px; }
.lc-type[open] summary::after { content: '–'; }
.lc-type svg { width: 48px; height: 36px; flex: none; }
.lc-type p { margin-top: 8px; font-size: 13.5px; color: var(--dbp-gray-700); }
.lc-type[open] { border-color: var(--dbp-blue); }

/* Honest-no paragraph */
.lc-no-paragraph { margin-top: 26px; font-size: 16px; }
.lc-espanol-inline { color: var(--dbp-blue); }

/* Centered stat chips (pricing) */
.lc-facts--center { justify-content: center; margin-top: 22px; }

/* FAQ accordion */
.lc-faq details { border-bottom: 1px solid var(--dbp-gray-200); padding: 14px 0; }
.lc-faq summary {
  cursor: pointer; font-family: var(--dbp-font-head); font-weight: 600; font-size: 15.5px;
  list-style: none; position: relative; padding-right: 28px;
}
.lc-faq summary::-webkit-details-marker { display: none; }
.lc-faq summary::after {
  content: '+'; position: absolute; right: 4px; top: 0;
  color: var(--dbp-blue); font-weight: 700; font-size: 18px;
}
.lc-faq details[open] summary::after { content: '–'; }
.lc-faq p { margin-top: 10px; font-size: 14.5px; color: var(--dbp-gray-700); }

/* Handbook + centered microcopy */
.lc-microcopy--center { text-align: center; }
.lc-lead-thanks--center { text-align: center; }

/* Pro lane */
.lc-kicker {
  font-family: var(--dbp-font-head); font-size: 11px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase; color: var(--dbp-blue); margin-bottom: 8px;
}
.dbp-feature--dark { background: rgba(255,255,255,.05); }
.dbp-feature--dark .dbp-feature__title { color: var(--dbp-white); }
.dbp-feature--dark .dbp-feature__body { color: rgba(255,255,255,.8); }
.lc-pro-form-wrap { margin-top: 34px; background: rgba(255,255,255,.05); border-radius: var(--dbp-radius-sm); padding: 24px; }
.lc-pro-form-title { font-family: var(--dbp-font-head); font-size: 17px; font-weight: 700; color: var(--dbp-white); margin-bottom: 6px; }
.lc-pro-lede { font-size: 14.5px; color: rgba(255,255,255,.8); margin-bottom: 16px; }
.lc-pro-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; align-items: end; }
.lc-pro-form .lc-labeled label, .lc-pro-form .lc-labeled__label { color: rgba(255,255,255,.85); }
.lc-pro-form .dbp-btn { grid-column: 1 / -1; justify-self: start; }
.lc-microcopy--dark { color: rgba(255,255,255,.6); }
.lc-microcopy--dark a { color: rgba(255,255,255,.85); }

/* Four-card grid rows on wide screens */
.lc-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- QA fixes: occlusion, contrast, motion, labeled hero form ---------- */
/* Header polish (2026-07-02): larger logo, more breathing room from the page edge */
.dbp-header { padding: 12px clamp(20px, 4vw, 44px); }
.dbp-logo--header { height: 40px; }
.dbp-logo-link { display: inline-flex; align-items: center; line-height: 0; }

/* Sticky header must not cover scrolled-to targets (header is taller now) */
#results, #pro-lane { scroll-margin-top: 76px; }

/* Verdict banner contrast (page-layer override of DS tones for small text) */
.dbp-verdict--yes { background: #0E7A37; }
.dbp-verdict--conditions { background: #B45309; }
.dbp-verdict__label, .dbp-verdict__sub { opacity: 1; }

/* Muted grays fail AA on the warm background — darken on those surfaces */
.lc-fine-note, .lc-microcopy { color: #5B6270; }
.dbp-card--warm .dbp-proof { color: #5B6270; }
.dbp-section--warm .dbp-stat__label { color: #565E6C; }

/* Footer legibility (legal text is the least readable line for seniors) */
.dbp-footer__legal { color: rgba(255, 255, 255, 0.62); font-size: 12.5px; }
.dbp-footer__taglines { color: rgba(255, 255, 255, 0.68); }

/* Labeled inputs inside the flex address forms */
.lc-form .lc-labeled { flex: 1 1 280px; }
.lc-form .lc-labeled .dbp-input { width: 100%; }
.lc-form { align-items: flex-end; }

/* Failure notes promoted to alert styling get the amber treatment */
#handbook-note.lc-lead-fail, #pro-note.lc-lead-fail { font-style: normal; font-size: 14px; }
#pro-note.lc-lead-fail { color: var(--dbp-dark); }
#pro-note.lc-lead-fail a { color: var(--dbp-blue); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lc-loading__rule { animation: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  .dbp-hero { padding: 36px 20px 28px; }
  .lc-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .lc-hero-plan { max-width: 420px; margin: 0 auto; }
  .dbp-header__espanol { display: none; }
  .lc-pro-link { display: none; }
  .dbp-section { padding: 44px 20px; }
  .lc-form .dbp-btn { flex: 1 1 100%; }
  .lc-deal { grid-template-columns: 1fr; }
  .lc-types { grid-template-columns: 1fr 1fr; }
  .lc-grid-4 { grid-template-columns: 1fr; }
  .lc-pro-form { grid-template-columns: 1fr; }
}
@media (min-width: 761px) and (max-width: 1080px) {
  .lc-types { grid-template-columns: 1fr 1fr; }
  .lc-grid-4 { grid-template-columns: 1fr 1fr; }
}