/* Scoped layout integration: consultation, reminder, yoshi, agent intro and empathy. */
main #consultation.consultation-integrated{padding-block:clamp(44px,6vw,72px);background:var(--color-main)}
#consultation .section-title{max-width:25em;margin-bottom:18px}
#consultation .section-lead{max-width:44em;margin-bottom:28px}
#consultation .consultation-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
#consultation .consultation-layout>div{min-width:0}
#consultation .consultation-subtitle{font:600 19px/1.75 "Yu Gothic",Meiryo,sans-serif;color:var(--color-ivory);margin:0 0 12px}
#consultation #flow{scroll-margin-top:var(--header-offset,96px)}
#consultation .consultation-topic-list{margin:0}
#consultation .consultation-topic{padding:14px 0;border-top:1px solid var(--rule)}
#consultation .consultation-topic dt{margin:0 0 5px;font-size:17px;font-weight:600;color:var(--color-accent-soft)}
#consultation .consultation-topic dd{margin:0;font-size:16px;line-height:1.85;color:var(--copy)}
#consultation .consultation-steps{grid-template-columns:minmax(0,1fr);gap:0;margin:0}
#consultation .consultation-steps li{padding:16px 0;gap:14px}
#consultation .consultation-steps h4{margin:0 0 7px;font:600 17px/1.8 "Yu Gothic",Meiryo,sans-serif;color:var(--color-ivory)}
#consultation .consultation-steps p{margin:0;font-size:16px;line-height:1.85}
#consultation .consultation-action{margin-top:28px}
#consultation .consultation-action .btn{width:100%}

/* Client relationship diagram; all layout changes stay inside #yoshi. */
main #yoshi{background:#F3EFE7;color:#1A2A3A;padding-block:clamp(40px,5.5vw,68px);text-align:left}
#yoshi .yoshi-layout{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "diagram" "details";gap:24px}
#yoshi .yoshi-layout>*{min-width:0}
#yoshi .yoshi-intro{grid-area:intro}
#yoshi .section-title{color:#1A2A3A;font-size:clamp(27px,3vw,38px);margin:0 0 14px}
#yoshi .yoshi-lead{max-width:44em;margin:0;color:#52606A;font-size:16px;line-height:1.85}
#yoshi .yoshi-diagram{grid-area:diagram;width:100%;max-width:500px;margin:0;justify-self:center;align-self:center}
#yoshi .yoshi-diagram img{display:block;width:100%;max-width:500px;height:auto;object-fit:contain}
#yoshi .yoshi-details{grid-area:details}
#yoshi .yoshi-text{max-width:44em;margin:0;color:#1A2A3A;font-size:16px;line-height:1.95;text-wrap:pretty}
#yoshi .yoshi-bridge-out{max-width:44em;margin:18px 0 8px;color:#52606A;font-size:15px;line-height:1.9}
#yoshi .yoshi-agent-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;max-width:100%;padding:8px 0;color:#28696C;font-size:16px;line-height:1.8;text-underline-offset:5px}
#yoshi .yoshi-agent-link:focus-visible{outline:3px solid #856028;outline-offset:4px}

/* Dark warning CTA: restrained gold, no glow or animation. */
main .consultation-reminder{background:var(--color-base);padding-block:clamp(36px,5vw,60px);border-block:1px solid #80683F}
main .consultation-reminder .inner-container{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;border:0;padding-top:0}
main .consultation-reminder .cta-banner-title{margin:0;color:var(--color-accent-soft);font-size:clamp(29px,3.4vw,48px);line-height:1.5;letter-spacing:.015em;text-wrap:pretty}
main .consultation-reminder .cta-banner-sub{margin:0 0 10px;color:var(--color-ivory);font-size:17px;line-height:1.85}
main .consultation-reminder .cta-banner-note{margin:0;color:var(--copy);font-size:16px;line-height:1.95}
main .consultation-reminder .reminder-link{display:inline-flex;justify-content:center;align-items:center;min-height:52px;max-width:100%;width:fit-content;padding:12px 20px;border:1px solid var(--color-accent-soft);border-radius:3px;color:var(--color-accent-soft);font-size:16px;line-height:1.75;text-decoration:none;text-align:center}

/* Center the two column groups, not the individual list text. */
main .empathy-section{padding-block:clamp(34px,4.5vw,56px);background:var(--color-main)}
main .empathy-section .empathy-layout{grid-template-columns:minmax(0,1fr);gap:22px;align-items:center}
main .empathy-section .empathy-layout>div:first-child{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;text-align:center}
main .empathy-section .section-title{max-width:20em;margin:0 0 12px;text-align:center;font-size:clamp(24px,2.5vw,30px);line-height:1.65}
main .empathy-section .empathy-lead{max-width:24em;text-align:center;font-size:16px;line-height:1.85}
main .empathy-section .empathy-list{width:100%;max-width:30em;justify-self:center;align-self:center;grid-template-columns:minmax(0,1fr);text-align:left}
main .empathy-section .empathy-list .check-item{padding:8px 0;font-size:16px;line-height:1.85;text-align:left}
main .empathy-section .empathy-bridge{max-width:52em;margin:22px auto 0;text-align:center;font-size:15px;line-height:1.9}
main #agent #agent-title{max-width:25em;font-size:clamp(25px,2.6vw,34px)}

@media(min-width:900px){
  main #yoshi{padding-bottom:clamp(40px,4.5vw,56px)}
  #yoshi .yoshi-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"intro diagram" "details diagram";column-gap:clamp(36px,5vw,64px);row-gap:20px}
}
@media(min-width:1000px){
  #consultation .consultation-layout{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px}
  #consultation .consultation-action{text-align:center}
  #consultation .consultation-action .btn{width:fit-content;min-width:280px}
  main .consultation-reminder .inner-container{grid-template-columns:minmax(0,1fr) minmax(240px,310px);grid-template-areas:"title cta" "copy cta";column-gap:40px;row-gap:14px;align-items:center}
  main .consultation-reminder .cta-banner-title{grid-area:title}
  main .consultation-reminder .reminder-copy{grid-area:copy}
  main .consultation-reminder .reminder-link{grid-area:cta;justify-self:end}
  main .empathy-section .empathy-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px}
  main .empathy-section .empathy-layout>div:first-child{min-height:100%}
}