/* Shared presentation layer for the three industry prototypes.
   Decisions and verification: design-refinement.md. */
.hero.section-wrap { padding-block: 48px 64px; column-gap: 64px; grid-template-rows: auto auto auto; }
.hero-copy #hero-title { margin: 0; font-size: clamp(40px, 3.8vw, 56px); line-height: 1.42; letter-spacing: -.025em; }
.hero-copy #hero-title > span { display: block; }
.hero-copy #hero-title > span:last-child { margin-top: 8px; font-size: .58em; font-weight: 600; letter-spacing: .01em; }
.hero .hero-lead { margin: 24px 0 0; font-size: 20px; line-height: 1.8; }
.hero-copy .hero-description { margin-block: 18px 0; max-width: 38em; font-size: 15px; line-height: 1.95; }
.hero-copy .hero-actions { margin-top: 28px; }
.hero .microcopy { font-size: 12px; margin-top: 12px; }
.device-showcase .visual-label { display: none; }
.device-stage { background: #e8ede5; aspect-ratio: 1.25; }
.laptop-device { left: 7%; top: 8%; width: 80%; }
.phone-device { right: 4%; top: 24%; width: 25%; }
.sample-caption { margin: 14px 0 0; gap: 8px; }
.sample-caption a { min-height: 44px; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; }
.device-showcase .visual-note { margin-top: 0; line-height: 1.7; }
.section-space { padding-block: 88px; }
.section-heading { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 48px; margin-bottom: 40px; }
.section-heading > * { min-width: 0; }
@media (max-width: 899px) { .section-heading { display: block; } }
.section-heading h2, .faq-heading h2 { font-size: clamp(26px, 2.8vw, 36px); line-height: 1.55; letter-spacing: .015em; text-wrap: auto; }
.heading-description { font-size: 15px; line-height: 1.95; }
/* A simple relationship diagram replaces the repeated introductory copy. */
.journey-section { background: var(--ink); color: #fff; }
.journey-inner { padding-block: 45px 48px; }
.journey-inner h2 { margin: 0 0 30px; color: #fff; font-size: 25px; line-height: 1.6; }
.journey-path { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px; list-style: none; margin: 0; padding: 0; }
.journey-path li { position: relative; padding-top: 20px; border-top: 1px solid #81988e; }
.journey-path li:not(:last-child)::after { content: '→'; position: absolute; right: -43px; top: 15px; font-size: 25px; color: #dce6df; }
.journey-path h3 { margin: 0; color: #fff; font-size: 22px; line-height: 1.6; text-wrap: auto; }
.journey-path p { margin: 4px 0 0; color: #e3ebe7; font-size: 14px; line-height: 1.8; }
.journey-path .journey-media { margin-top: 14px; font-size: 15px; color: #fff; }
/* Hierarchy comes from alignment and spacing; numbers are retained for steps. */
.problem-grid { gap: 38px; }
.problem-grid article { display: block; padding: 0; border: 0; }
.problem-grid h3 { margin: 0; font-size: 21px; line-height: 1.65; text-wrap: auto; }
.problem-grid p { margin: 14px 0 0; font-size: 15px; line-height: 1.9; }
#area-support { border-top: 1px solid var(--line); }
.support-layout { gap: 70px; }
.support-intro h2 { font-size: clamp(27px, 2.6vw, 34px); line-height: 1.65; text-wrap: auto; }
.support-intro p, .support-channels article p { font-size: 15px; line-height: 1.95; }
.support-channels { display: grid; gap: 32px; }
.support-channels article { padding: 0; border: 0; }
.support-channels article:last-child { border: 0; }
.support-channels h3 { font-size: 22px; margin: 0 0 10px; }
.support-channels article .channel-output { font-size: 13px; margin-top: 12px; color: var(--muted); }
.support-scope { margin-top: 32px; padding-top: 24px; }
.support-scope p, .campaign-result p { font-size: 14px; }
.campaign-example { background: var(--light); border: 0; padding: 32px; margin-top: 48px; }
.campaign-flow { gap: 24px; }
.campaign-flow li { border: 0; padding-top: 0; }
.campaign-flow p, .campaign-heading p { font-size: 14px; line-height: 1.9; }
.campaign-result { padding-top: 24px; margin-top: 24px; border-top: 1px solid #c3d0c3; }
.builder-content { border-top: 1px solid var(--line); }
.builder-content-list > div { grid-template-columns: minmax(170px, .65fr) 2fr; gap: 48px; padding-block: 26px; }
.builder-content-list dt { padding: 0; }
.builder-content-list dt strong { font-size: 20px; line-height: 1.65; }
.builder-content-list dd p { font-size: 15px; line-height: 1.95; }
.builder-content-list dd li, .builder-content-note { font-size: 14px; line-height: 1.9; }
.deliverable p, .monthly-grid p, .flow-grid p { font-size: 14px; line-height: 1.9; }
.price-card { box-shadow: none; }
.price-card-title { padding: 22px 28px; }
.price-card-title > span:first-child { font-size: 21px; }
.price-status { border: 0; padding: 0; }
.price-inclusions p, .price-footnote, .plan-options ul, .plan-options .plan-boundary { font-size: 14px; line-height: 1.9; }
.plan-options { gap: 0 32px; border: 0; }
.plan-options article { padding: 24px 0 0; border: 0; border-top: 2px solid var(--ink); }
.plan-options article + article { border-left: 0; }
.plan-options h3 { font-size: 26px; }
.plan-options .plan-intent { font-size: 15px; line-height: 1.9; }
.plan-options .plan-boundary { padding-top: 20px; border-top: 1px solid #cbd5cb; }
@supports (grid-template-rows: subgrid) {
  .plan-options { grid-template-rows: repeat(4, auto); grid-auto-flow: column; }
  .plan-options article { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 18px; }
  .plan-options h3, .plan-options .plan-intent, .plan-options ul, .plan-options .plan-boundary { margin-block: 0; min-height: 0; }
  .plan-options .plan-boundary { margin-bottom: 0; }
}
.mobile-consult.is-unneeded { visibility: hidden; pointer-events: none; }
body.dialog-open .mobile-consult { visibility: hidden; }
@media (min-width: 900px) {
  .hero.section-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
}
@media (min-width: 600px) and (max-width: 899px) {
  .hero.section-wrap { max-width: 620px; padding-top: 32px; }
  .hero-heading { order: 0; }
  .hero .device-showcase { order: 1; margin-top: 28px; width: 100%; }
  .hero-action-block { order: 2; }
  .hero-description-block { order: 3; }
  .hero-copy #hero-title { font-size: 48px; }
  .hero-copy .hero-actions { margin-top: 26px; }
  .hero-copy .hero-description { margin-top: 24px; }
  .journey-path { gap: 40px; }
  .journey-path li:not(:last-child)::after { right: -30px; }
  .journey-path h3 { font-size: 19px; }
  .journey-path p, .journey-path .journey-media { font-size: 13px; }
  .support-layout { gap: 40px; }
}
@media (max-width: 599px) {
  .hero.section-wrap { padding-block: 12px 36px; }
  .hero-copy #hero-title { font-size: clamp(30px, 8.7vw, 38px); line-height: 1.35; }
  .hero-copy #hero-title > span:last-child { display: none; }
  .hero .hero-mobile-lead { margin-top: 13px; font-size: 17px; line-height: 1.6; }
  .hero .device-showcase { margin-top: 18px; }
  .hero .device-stage { aspect-ratio: 1.48; }
  .hero .laptop-device { left: 7%; top: 9%; width: 80%; }
  .hero .phone-device { right: 3%; top: 17%; width: 24%; }
  .hero .sample-caption { margin-top: 5px; }
  .hero .sample-caption a { font-size: 13px; min-height: 44px; }
  .hero .visual-note { font-size: 12px; text-align: right; margin-top: 0; }
  .hero-copy .hero-actions { margin-top: 16px; }
  .hero .hero-copy .hero-description { margin-top: 24px; padding-top: 21px; font-size: 15px; line-height: 1.95; }
  .section-space { padding-block: 56px; }
  .section-heading { margin-bottom: 30px; }
  .section-heading h2, .faq-heading h2 { font-size: 26px; line-height: 1.65; }
  .heading-description { margin-top: 18px; font-size: 15px; }
  .journey-inner { padding-block: 32px 36px; }
  .journey-inner h2 { margin-bottom: 28px; font-size: 23px; line-height: 1.6; }
  .journey-path { grid-template-columns: 1fr; gap: 34px; }
  .journey-path li { padding-top: 16px; }
  .journey-path h3 { font-size: 21px; }
  .journey-path .journey-media { margin-top: 8px; font-size: 14px; }
  .journey-path p { font-size: 14px; }
  .journey-path li:not(:last-child)::after { content: '↓'; right: 0; top: auto; bottom: -28px; font-size: 24px; }
  .problem-grid { gap: 28px; }
  .problem-grid h3 { font-size: 20px; }
  .problem-grid p { margin-top: 10px; }
  .support-layout { gap: 30px; }
  .support-intro h2 { font-size: 26px; line-height: 1.65; }
  .support-channels { gap: 28px; }
  .support-channels h3 { font-size: 20px; line-height: 1.6; }
  .support-channels article .channel-output { font-size: 13px; }
  .campaign-example { margin-top: 32px; padding: 24px 20px; }
  .campaign-flow { gap: 20px; }
  .campaign-heading h3 { font-size: 20px; line-height: 1.7; }
  .campaign-flow h4 { font-size: 16px; }
  .builder-content-list > div { display: block; padding-block: 24px; }
  .builder-content-list dd { margin-top: 14px; }
  .builder-content-list dt strong { font-size: 20px; }
  .flow-grid li { column-gap: 12px; }
  .flow-grid h3 { font-size: 18px; }
  .flow-grid p { font-size: 14px; }
  .price-card-title { padding: 20px; align-items: start; gap: 12px; }
  .price-card-title > span:first-child { font-size: 18px; }
  .price-status { font-size: 12px; flex-shrink: 0; }
  .plan-options { display: block; }
  .plan-options article { display: block; padding: 24px 0; }
  .plan-options article + article { border-top: 1px solid #9cac9d; }
  .plan-options h3 { font-size: 25px; margin-bottom: 12px; }
  .plan-options .plan-intent { margin-bottom: 20px; }
  .plan-options .plan-boundary { margin-top: 20px; padding-top: 16px; }
  .closing-inner h2 { font-size: 26px; line-height: 1.65; text-wrap: auto; }
}
@media (max-width: 359px) {
  .hero-copy #hero-title { font-size: 30px; }
  .hero .hero-mobile-lead { font-size: 16px; }
  .price-card-title { display: block; }
  .price-status { display: block; margin-top: 5px; }
}
@media (max-width: 599px) {
  body[data-industry="cleaning"] .hero-copy #hero-title { font-size: clamp(26px, 7.7vw, 34px); }
}

@media (min-width: 900px) {
  body[data-industry="cleaning"] .hero-copy #hero-title { font-size: clamp(31px, 3.2vw, 47px); }
}

/* Raised controls: a firm lower edge, soft cast shadow, and pressed feedback. */
.button {
  --button-edge: #7e2d1f;
  --button-shadow: rgb(75 39 28 / 20%);
  --button-highlight: rgb(255 255 255 / 24%);
  border-radius: 6px;
  box-shadow: inset 0 1px 0 var(--button-highlight),
    0 4px 0 var(--button-edge), 0 8px 16px var(--button-shadow);
  transition: background .16s, border-color .16s, box-shadow .16s, transform .16s;
}
.button:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 var(--button-highlight),
    0 5px 0 var(--button-edge), 0 10px 18px var(--button-shadow);
}
.button:active {
  transform: translateY(3px);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 12%),
    0 1px 0 var(--button-edge), 0 3px 6px var(--button-shadow);
}
.button-outline {
  --button-edge: #a8b9ad;
  --button-shadow: rgb(24 59 52 / 14%);
  --button-highlight: #fff;
  background: var(--paper);
}
.button-outline:hover { background: #e9eee5; }
@media (prefers-reduced-motion: reduce) {
  .button:hover, .button:active { transform: none; }
}