/* V24 flyer content, expressed through the local website's visual system. */
.hero-reference .hero-scope { max-width: 420px; margin-top: 24px; color: #91cdbf; font-size: 15px; line-height: 1.7; }
.home-page.hero-reference .flyer-product .product-intro h2 { max-width: 900px; }
.home-page.hero-reference .flyer-product .feature-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hero-reference .flow-phase { display: flex; align-items: center; gap: 16px; }
.hero-reference .flow-phase b { color: #009c82; font-size: 18px; font-weight: 500; letter-spacing: -0.02em; }
.home-page.hero-reference .flow-visual { overflow: visible; min-height: 0; padding: 0; border: 0; background: transparent; }
.home-page.hero-reference .flow-visual::after { display: none; }
.home-page.hero-reference .flow-visual:hover { transform: none; box-shadow: none; }
.hero-reference .flow-visual figcaption { margin-top: 12px; color: #75868d; font-size: 10px; line-height: 1.4; letter-spacing: 0.04em; }
.hero-reference .flow-ui { overflow: hidden; border: 1px solid #d5dfdc; background: #fff; color: #173341; }
.hero-reference .flow-ui-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 26px; background: #071f35; color: #fff; font-size: 14px; font-weight: 500; }
.hero-reference .flow-ui-bar span { color: #80caba; font-size: 11px; letter-spacing: 0.1em; }
.hero-reference .flow-ui-body { padding: 26px; }
.hero-reference .flow-ui-label { display: block; margin-bottom: 14px; color: #007d69; font-size: 11px; font-weight: 600; line-height: 1.5; letter-spacing: 0.06em; text-transform: uppercase; }
.hero-reference .flow-input { display: flex; min-height: 92px; align-items: center; padding: 20px; border: 1px solid #dce5e0; background: #f5f7f6; font-size: 14px; line-height: 1.5; }
.hero-reference .flow-down { margin: 12px 0; color: #009c82; font-size: 24px; line-height: 1.4; text-align: center; }
.hero-reference .flow-paths { display: grid; grid-template-columns: 0.75fr 1.25fr 1fr; gap: 10px; }
.hero-reference .flow-paths span { padding: 14px 8px; border: 1px solid #c6dad3; color: #007d69; font-size: 13px; font-weight: 500; text-align: center; }
.hero-reference .flow-divider { height: 1px; margin: 22px 0; background: #dce5e0; }
.hero-reference .flow-warning { display: flex; align-items: flex-start; gap: 14px; padding: 18px; border-left: 2px solid #ceae5d; background: #fffbf1; }
.hero-reference .flow-warning > span { display: grid; width: 24px; height: 24px; flex: 0 0 24px; place-items: center; color: #87630b; font-weight: 600; }
.hero-reference .flow-warning strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.5; }
.hero-reference .flow-warning small { display: block; margin-top: 5px; color: #87630b; font-size: 12px; line-height: 1.5; }
.hero-reference .flow-evidence { margin: 0; }
.hero-reference .flow-evidence div { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 12px; margin-top: 12px; font-size: 13px; line-height: 1.5; }
.hero-reference .flow-evidence dt { color: #647981; }
.hero-reference .flow-evidence dd { margin: 0; padding: 10px 12px; }
.hero-reference .flow-flag { background: #fffbf1; color: #87630b; }
.hero-reference .flow-day { display: inline-block; padding: 8px 12px; background: #edf5f2; color: #007d69; font-size: 13px; font-weight: 500; }
.hero-reference .flow-stay-track { position: relative; display: flex; height: 16px; margin: 42px 0 18px; }
.hero-reference .flow-stay-track span:nth-child(1) { width: 16%; background: #e9bbb0; }
.hero-reference .flow-stay-track span:nth-child(2) { width: 32%; background: #a4d8c7; }
.hero-reference .flow-stay-track span:nth-child(3) { width: 37%; background: #ead796; }
.hero-reference .flow-stay-track span:nth-child(4) { width: 15%; background: #e9bbb0; }
.hero-reference .flow-stay-track b { position: absolute; left: 20%; top: -20px; width: 2px; height: 42px; background: #007d69; }
.hero-reference .flow-stay-track b::after { position: absolute; left: -5px; top: 22px; width: 12px; height: 12px; background: #007d69; content: ""; }
.hero-reference .flow-stay-labels { display: flex; justify-content: space-between; gap: 8px; color: #647981; font-size: 11px; }
.hero-reference .flow-confirm { display: flex; align-items: center; gap: 12px; margin-top: 32px; padding: 16px; background: #edf5f2; color: #007d69; font-size: 13px; font-weight: 500; line-height: 1.5; }
.hero-reference .flow-confirm > span { font-size: 17px; }
.hero-reference .flow-code { display: inline-block; padding: 8px 12px; background: #edf5f2; color: #007d69; font-size: 13px; font-weight: 600; }
.hero-reference .flow-diagnosis { display: block; margin-top: 12px; font-size: 14px; font-weight: 500; line-height: 1.5; }
.hero-reference .flow-source { margin: 10px 0 0; color: #007d69; font-size: 12px; line-height: 1.5; }
.hero-reference .flow-code-change { display: grid; grid-template-columns: 85px 32px minmax(0, 1fr); align-items: center; gap: 16px; }
.hero-reference .flow-code-change s { display: block; color: #647981; font-size: 12px; line-height: 1.9; }
.hero-reference .flow-code-change > span { color: #009c82; font-size: 24px; }
.hero-reference .flow-code-change b { padding: 14px; border: 1px solid #c6dad3; background: #edf5f2; color: #007d69; font-size: 15px; font-weight: 600; text-align: center; }
.hero-reference .flow-chat-question { margin: 0 0 24px 28px; padding: 16px 18px; background: #edf5f2; font-size: 13px; line-height: 1.7; }
.hero-reference .flow-chat-answer { margin: 0; font-size: 14px; line-height: 1.75; }
.hero-reference .flow-chat-more { display: block; margin-top: 14px; color: #007d69; font-size: 12px; font-weight: 500; }
.hero-reference .flow-chat-followup { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 24px; padding: 12px 14px; border: 1px solid #c6dad3; color: #647981; font-size: 12px; line-height: 1.5; }
.hero-reference .flow-chat-followup > span { color: #007d69; font-size: 20px; }
.home-page.hero-reference .modules-showcase { grid-template-columns: minmax(0, 1fr); }
.home-page.hero-reference .module-card-letter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; gap: 64px; align-items: center; }
.home-page.hero-reference .module-card-letter .module-copy { min-height: 0; }
.home-page.hero-reference .success-layout { align-items: end; }
.home-page.hero-reference .success-copy { display: flex; flex-direction: column; align-items: flex-start; }
.home-page.hero-reference .success-copy .button { margin-bottom: 0; }
.home-page.hero-reference .flyer-pilot .cta-panel { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; }
.hero-reference .flyer-pilot .cta-panel > div { max-width: 800px; }
.hero-reference .flyer-pilot .section-kicker { color: #91cdbf; }
.hero-reference .pilot-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; width: 100%; margin: 0; padding: 0; list-style: none; }
.hero-reference .pilot-steps li { padding-top: 20px; border-top: 1px solid #365462; }
.hero-reference .pilot-steps li > span { color: #91cdbf; font-size: 13px; }
.hero-reference .pilot-steps h3 { margin: 18px 0 0; color: #fff; font-size: 19px; font-weight: 500; line-height: 1.4; }
.home-page.hero-reference .pilot-steps p { margin-top: 12px; color: #b8c9cf; font-size: 14px; line-height: 1.7; }

@media (max-width: 1120px) {
  .home-page.hero-reference .flyer-product .feature-row { gap: 48px; }
}
@media (max-width: 900px) {
  .home-page.hero-reference .flyer-product .feature-row { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .home-page.hero-reference .flyer-product .feature-copy { order: 1; }
  .home-page.hero-reference .flyer-product .feature-visual { order: 2; max-width: 600px; width: 100%; }
  .home-page.hero-reference .module-card-letter { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .hero-reference .pilot-steps { gap: 24px; }
}
@media (max-width: 760px) {
}
@media (max-width: 640px) {
  .hero-reference .hero-scope { font-size: 14px; }
  .home-page.hero-reference .flyer-product .product-intro h2 { font-size: 34px; }
  .home-page.hero-reference .flyer-product .feature-copy h3 { font-size: 30px; }
  .home-page.hero-reference .flyer-product .feature-row { margin-bottom: 56px; }
  .home-page.hero-reference .flyer-product .feature-row:last-child { margin-bottom: 0; }
  .hero-reference .flow-ui-bar { padding: 16px 18px; font-size: 13px; }
  .hero-reference .flow-ui-body { padding: 20px 18px; }
  .hero-reference .flow-input { min-height: 76px; padding: 16px; font-size: 13px; }
  .hero-reference .flow-paths { gap: 6px; }
  .hero-reference .flow-paths span { padding: 12px 4px; font-size: 11px; }
  .hero-reference .flow-evidence div { grid-template-columns: 78px minmax(0, 1fr); gap: 8px; font-size: 12px; }
  .hero-reference .flow-evidence dd { padding: 8px; }
  .hero-reference .flow-code-change { grid-template-columns: 68px 20px minmax(0, 1fr); gap: 12px; }
  .hero-reference .flow-code-change b { padding: 12px 8px; font-size: 14px; }
  .hero-reference .flow-chat-question { margin-left: 12px; }
  .hero-reference .flow-chat-answer { font-size: 13px; }
  .hero-reference .pilot-steps { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .home-page.hero-reference .flyer-pilot .cta-panel { padding: 36px 24px; gap: 32px; }
}