/* Homepage V7 (D-026): pixel pass from the adversarial review in verification/homepage-pixel/
   (typography.md, grid.md, components.md, benchmark.md). Loaded on / after home-v6.css.
   One type scale (typography.json tokens), one spacing scale, one recipe per component. */

:root {
  --z7-head-gap: 64px;
  --z7-on-green: rgba(255, 255, 255, .78);
  --z7-rule-green: rgba(255, 255, 255, .18);
  --z7-shadow: 0 1px 0 #e6e1da, 0 24px 48px -20px rgba(12, 10, 8, .18);
  --z7-card-pad: 32px;
}
@media (max-width: 767px) { :root { --z7-head-gap: 48px; --z7-card-pad: 24px; } }

/* ── Spacing scale: section padding 120 / 96 / 72, applied to every section and the CTA ── */
:root { --z3-sec-y: 120px; }
@media (max-width: 1279px) { :root { --z3-sec-y: 96px; } }
@media (max-width: 767px) { :root { --z3-sec-y: 72px; } }
.z3-head, .z5-managed .z3-head { margin-bottom: var(--z7-head-gap); }
body:has(.z3-hero) .section_component:has(.customer-industry-component) .spacer-component { height: var(--z7-head-gap) !important; }
.z3-sec__inner > :last-child { margin-bottom: 0; }

/* ── Type scale ─────────────────────────────────────────────────────── */
.z3-hero h1 { font-size: var(--z-type-display-size) !important; line-height: 1.08 !important; letter-spacing: -.02em; }
body:has(.z3-hero) .section_component:has(.faq_component) h2,
.z6-cta .cta_title { font-size: var(--z-type-section-size) !important; line-height: 1.18 !important; letter-spacing: -.015em; }
.z6-figures dd, .z6-steps__n { font-size: clamp(2.25rem, 1.875rem + 1.5vw, 3rem) !important; line-height: 1 !important; letter-spacing: -.02em; color: #000; }
.z4-feat .z3-feat__copy h3, .z6-steps h3, .z3-points h3, .z5-seal li b, .z5-team__card b { font-size: var(--z-type-card-size) !important; line-height: 1.3 !important; letter-spacing: -.005em; }
.z6-figures dt { font-size: 16px; line-height: 1.5; }
.z5-team__card span { font-size: 14px; line-height: 1.5; }
.z3-hero__steps strong { font-size: 14px; }
.z3-hero__steps small { font-size: 12px; }
.z5-seal li { letter-spacing: 0; }
.z5-commit__statement { font: 400 18px/1.6 var(--z-font-body) !important; max-width: 30rem; }
.z6-story__q { color: #000; -webkit-line-clamp: unset; display: block; min-height: calc(3 * 1.35em); text-wrap: pretty; }
body:has(.z3-hero) :is(.faq_question_title, .z3-sec h2, .z3-sec h3, .z6-stories__head h2) { text-wrap: balance; }
body:has(.z3-hero) :is(.z3-sec, .section_component) p { text-wrap: pretty; }
body:has(.z3-hero) .faq_answer p { max-width: 65ch; }
.z4-feat .z3-feat__copy p { max-width: 36rem; }
.z3-hub__tile span { font-size: 12px !important; line-height: 1.2; }
/* One label spec. */
.z6-label, .z6-steps__k, .z3-hub__label { font: 500 12px/1.3 var(--z-font-body) !important; letter-spacing: .08em !important; text-transform: uppercase; }
.z6-label { margin-bottom: 16px; }
/* Text on deep green: one tint. */
.z3-head--dark .z3-head__aside p, .z6-steps p, .z6-cta__lead, .z5-seal li span, .z5-seal__foot, .z6-claims--dark li, .z6-cta__phone { color: var(--z7-on-green) !important; }

/* ── Hero rhythm and fit ───────────────────────────────────────────── */
.z3-hero__lead { margin-top: 24px; }
.z3-hero__form { margin-top: 32px; }
.z6-claims { margin-top: 16px; }
.z3-hero__note { margin-top: 16px; }
.z3-hero__steps { padding: 0; }
.z3-hero__card { box-shadow: var(--z7-shadow); }
/* The card never crosses the form: inside the photo up to 1320px. */
@media (max-width: 1320px) and (min-width: 981px) {
  .z3-hero__card { left: 24px; bottom: 24px; width: 300px; }
  .z3-hero__steps small { display: none; }
}
@media (max-width: 600px) { .z3-hero__card { width: auto; } }
.z6-g2 { gap: 8px; }
.z6-g2 img { width: auto !important; height: 18px; }

/* ── Lead → actions: 32px visible gap everywhere ───────────────────── */
.z3-actions, .z5-commit__copy .z3-actions, .z6-cta .footer-form-container { margin-top: 32px !important; }
.z3-head__aside .z3-link { margin-top: 22px; }

/* ── Buttons: 52 standalone, 56 in forms, weight 500 everywhere ────── */
.z3-btn, .z6-faq-cta { height: 52px; padding: 0 24px; font-weight: 500; }
.z3-hero__submit, .z6-cta .cta_form .button { height: 56px; font-weight: 500 !important; }

/* ── Links: one spec, arrow never underlined ───────────────────────── */
.z3-link, .z6-more, .z6-claims a { display: inline-flex; align-items: center; gap: 6px; font: 500 16px/1.4 var(--z-font-body); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; color: inherit; }
.z3-link { color: #0c0a08; }
.z3-link--light { color: #fff; }
.z6-claims a { font: inherit; }
.z3-link span, .z6-more span, .z6-claims a span { display: inline-block; text-decoration: none; }
body:has(.z3-hero) .section_component:has(.customer-industry-component) .button,
body:has(.z3-hero) .section_component:has(.customer-industry-component) .button:hover { border-bottom: 0 !important; text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 4px !important; gap: 6px !important; min-height: 44px !important; }
body:has(.z3-hero) .section_component:has(.customer-industry-component) .button::after { display: inline-block; text-decoration: none; }
body:has(.z3-hero) .section_component:has(.faq_component) a[href^="tel:"], body:has(.z3-hero) .section_component:has(.faq_component) a[href^="mailto:"] { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.z5-seal__foot a { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

/* ── Focus: one ring ───────────────────────────────────────────────── */
body:has(.z3-hero) :where(a, button, input, summary, [tabindex]):focus-visible { outline: 2px solid #183e3d !important; outline-offset: 3px; }
body:has(.z3-hero) :where(.z5-managed, .z6-cta, .z5-seal, .z3-hub__core) :where(a, button, input):focus-visible { outline-color: #afecdb !important; }
.footer_cta_component .cta_form .form_input:focus { outline: none; }
.footer_cta_component .cta_form .form_input:focus-visible { outline: 2px solid #afecdb !important; outline-offset: 2px; }

/* ── Inputs: visible edges (≥3:1) ──────────────────────────────────── */
.z3-hero__input { border-color: #8c8273; }
.z6-cta .cta_form .form_input { border-color: rgba(255, 255, 255, .55) !important; }

/* ── Cards, panels, chips, rules ───────────────────────────────────── */
.z4-feat .z3-feat__card { outline-color: #e6e1da; }
.z4-feat .z3-feat__card:hover { outline-color: #0c0a08; }
.z4-feat .z3-feat__copy, .z4-feat .z3-feat__item--lg .z3-feat__copy, .z4-feat .z3-feat__item--md .z3-feat__copy { padding: var(--z7-card-pad); }
.z4-panel { box-shadow: var(--z7-shadow); }
.z4-panel__head { padding: 16px 20px; }
.z4-rows li, .z4-status li, .z4-bars li { padding-left: 20px; padding-right: 20px; }
.z4-rows li, .z4-status li { padding-top: 12px; padding-bottom: 12px; }
.z4-bar { background: #f6f5f3; }
.z4-due, .z4-bars small { font-variant-numeric: normal; }
.z4-chip, .z3-hub__status, body:has(.z3-hero) .customer-industry-container .tag.z6-chip--switch { padding: 4px 8px !important; font: 500 12px/1.3 var(--z-font-body) !important; }
.z5-team__card { padding: 20px 24px; box-shadow: var(--z7-shadow); }
.z5-seal { padding: var(--z7-card-pad); }
.z5-seal__mark, .z5-seal li, .z6-steps li { border-color: var(--z7-rule-green) !important; }
.z3-hub { padding: 40px; }
@media (max-width: 767px) { .z3-hub { padding: 24px; } }
.z3-hub__tile { outline: 1px solid #e6e1da; outline-offset: -1px; }
a.z3-hub__tile:hover { outline-color: #0c0a08; }
.z3-hub__tile img { filter: grayscale(1); opacity: .85; transition: filter .2s, opacity .2s; max-height: 40px; }
.z3-hub__tile:hover img, .z3-hub__tile.is-pulse img { filter: none; opacity: 1; }
.z6-more { margin-top: 16px; }

/* ── Grid: one edge, one set of column lines ───────────────────────── */
body:has(.z3-hero) .navbar_component { padding-left: var(--z3-g) !important; padding-right: var(--z3-g) !important; }
body:has(.z3-hero) .navbar_container { max-width: 84rem; margin-left: auto; margin-right: auto; }
.z3-points li { padding: 24px 24px 0 0; }
.z6-steps ol, .z3-points { grid-template-rows: auto auto auto; }
@media (min-width: 981px) {
  .z6-steps li { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
  .z3-points li { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .z3-points li .z3-link { align-self: start; }
  /* Stories: three cards on the shared 4-column lines. */
  body:has(.z3-hero) .customer-industry-component .swiper-slide { width: calc((min(84rem, 100vw - 2 * var(--z3-g)) - 2 * var(--z3-gap)) / 3) !important; }
  /* Closing CTA on the 12-column grid. */
  .z6-cta { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; gap: 0 var(--z3-gap) !important; }
  .z6-cta__copy { grid-column: 1 / span 6; }
  .z6-cta__photo { grid-column: 8 / -1; }
  /* FAQ on the 12-column grid. */
  body:has(.z3-hero) .section_component:has(.faq_component) .w-layout-grid { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)) !important; column-gap: var(--z3-gap) !important; }
  body:has(.z3-hero) .section_component:has(.faq_component) .w-layout-grid > :first-child { grid-column: 1 / span 5; }
  body:has(.z3-hero) .section_component:has(.faq_component) .w-layout-grid > :last-child { grid-column: 7 / -1; }
}
@media (min-width: 601px) and (max-width: 980px) {
  body:has(.z3-hero) .customer-industry-component .swiper-slide { width: calc((100vw - 2 * var(--z3-g) - var(--z3-gap)) / 2) !important; }
  .z3-hub__tiles { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .z4-feat .z3-feat__item--lg, .z4-feat .z3-feat__item--md, .z4-feat .z3-feat__item--sm { grid-column: span 6; }
  .z4-feat .z3-feat__item--sm:last-child { grid-column: span 12; }
}
body:has(.z3-hero) .customer-industry-component .customer-industry-container,
body:has(.z3-hero) .customer-industry-component .customer-industry-image { width: 100% !important; }
@media (max-width: 600px) {
  body:has(.z3-hero) .customer-industry-component .swiper-slide { width: calc(100vw - 2 * var(--z3-g) - 40px) !important; }
  .z4-feat .z4-art { padding: 24px !important; }
  .z4-feat .z3-feat__copy { padding: 24px !important; }
}
/* Commitment 981–1200: side by side, 6/6. */
@media (min-width: 981px) and (max-width: 1200px) {
  .z5-commit__copy { grid-column: 1 / span 6 !important; }
  .z5-seal { grid-column: 7 / -1 !important; min-width: 0; max-width: none; }
}
/* Team photo at laptop widths: taller crop so the caption clears faces. */
@media (min-width: 981px) and (max-width: 1280px) { .z5-team > img { aspect-ratio: 5 / 2; object-position: 50% 78%; } }

/* ── Story photo: keep the AI-generator mark on the archived David image out of frame (asset decision pending) ── */
body:has(.z3-hero) .customer-industry-container[href$="/customers/david"] .customer-industry-image { object-position: 40% 0; transform: scale(1.08); transform-origin: 40% 0; }

/* ── Mobile tap targets ────────────────────────────────────────────── */
@media (max-width: 767px) {
  .z6-claims a, body:has(.z3-hero) .section_component:has(.faq_component) a[href^="tel:"], body:has(.z3-hero) .section_component:has(.faq_component) a[href^="mailto:"] { display: inline-flex; align-items: center; min-height: 44px; }
}
/* Filing panel: header shares the row grid so "Due" and "Status" sit over their columns. */
.z7-head3 { display: grid !important; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; }
.z7-head3 .z4-panel__meta:nth-child(2) { text-align: right; min-width: 3.6em; }
.z7-head3 .z4-panel__meta:nth-child(3) { min-width: 4.4em; }
.z3-hub__caption { font-size: 12px !important; }

/* ── Verification fixes (verification/homepage-pixel/verification.md) ── */
/* R1 focus ring on the black footer. */
body:has(.z3-hero) .footer_component :where(a, button, input):focus-visible { outline-color: #afecdb !important; }
/* C6/R13 links: inline-block so the underline never runs under the arrow. */
.z3-link, .z6-more, .z6-claims a { display: inline-block; padding-block: 10px; min-height: 0; }
.z3-link span, .z6-more span, .z6-claims a span { display: inline-block; margin-left: 6px; text-decoration: none; }
.z6-more { padding-block: 0; }
body:has(.z3-hero) .section_component:has(.customer-industry-component) .button { display: inline-block !important; padding-block: 10px !important; }
body:has(.z3-hero) .section_component:has(.customer-industry-component) .button::after { margin-left: 6px; }
/* C9 keep the AI-generator mark out of the David crop. */
body:has(.z3-hero) .customer-industry-container[href$="/customers/david"] .customer-industry-image { transform: scale(1.18) !important; }
/* T10/R11 closing CTA uses the section rhythm. */
.z6-cta { padding-top: var(--z3-sec-y) !important; padding-bottom: var(--z3-sec-y) !important; }
/* T12/R12 FAQ lead → button 32. */
.z6-faq-cta { margin-top: 32px !important; }
/* T15/R7 buttons: nav weight 500; platform mobile button 52. */
body:has(.z3-hero) .navbar_button-wrapper-inside > a.button { font-weight: 500 !important; }
@media (max-width: 767px) { .z6-feat-cta .z3-btn { height: 52px; } }
/* T16/R8 steps on the same 24px top inset as points. */
.z6-steps li { padding-top: 24px; }
/* R4/R6 mobile tap targets, even claim rows. */
@media (max-width: 767px) {
  .z5-seal__foot a, .z6-cta__phone a { display: inline-flex; align-items: center; min-height: 44px; }
  .z6-claims li { min-height: 44px; }
  .z6-claims a { padding-block: 0; }
}
/* R9 hub connectors over the 8-column tiles at 601–980. */
@media (min-width: 601px) and (max-width: 980px) {
  .z3-hub__wires { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; }
  .z3-hub__wires span:nth-child(1) { grid-column: 2; } .z3-hub__wires span:nth-child(2) { grid-column: 4; }
  .z3-hub__wires span:nth-child(3) { grid-column: 6; } .z3-hub__wires span:nth-child(4) { grid-column: 8; }
}
/* R10 FAQ: a real button inside each question heading. */
.z7-faq-btn { all: unset; display: block; width: 100%; cursor: pointer; font: inherit; color: inherit; text-align: left; }
.z7-faq-btn:focus-visible { outline: 2px solid #183e3d !important; outline-offset: 4px; }
/* C11 leftovers. */
.z3-hub__engine-head { border-color: var(--z7-rule-green) !important; }
