/* Homepage composition. Other routes retain the shared design unchanged. */
body[data-page="home"] { --home-radius: 12px; }
body[data-page="home"] .home-band { background: var(--page); border-block: 1px solid var(--line); }
body[data-page="home"] .home-section-intro { min-width: 0; }
body[data-page="home"] .home-section-intro h2 { font-size: clamp(1.65rem, 2.25vw, 2.15rem); margin-bottom: 14px; }
body[data-page="home"] .home-section-intro p { font-size: .93rem; line-height: 1.55; }
body[data-page="home"] .home-section-intro .kicker { font-size: .7rem; margin-bottom: 12px; }
body[data-page="home"] .text-link { display: inline-flex; align-items: center; min-height: 44px; }
body[data-page="home"] .home-challenge { display: grid; grid-template-columns: 1.05fr 1fr .85fr; grid-template-rows: 1fr auto; grid-template-areas: 'intro photo pains' 'link photo pains'; gap: 12px 28px; padding-block: 36px; }
body[data-page="home"] .home-challenge .home-section-intro { grid-area: intro; }
body[data-page="home"] .home-challenge-link { grid-area: link; justify-self: start; }
body[data-page="home"] .home-meeting { grid-area: photo; width: 100%; height: 100%; min-height: 310px; object-fit: cover; object-position: 48% center; border-radius: var(--home-radius); }
body[data-page="home"] .home-pains { grid-area: pains; margin: 0; padding: 24px 18px; list-style: none; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px 18px; align-content: center; border-radius: var(--home-radius); background: var(--section-soft); }
body[data-page="home"] .home-pains li { display: flex; flex-direction: column; gap: 12px; font-size: .85rem; line-height: 1.5; font-weight: 600; }
body[data-page="home"] .home-pains .icon { width: 32px; height: 32px; color: var(--kizoshi-primary-dark); }
body[data-page="home"] .home-actions, body[data-page="home"] .home-foundation { display: grid; grid-template-columns: 230px minmax(0,1fr); gap: 26px; padding-block: 36px; }
body[data-page="home"] .home-capabilities { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
body[data-page="home"] .home-capability { min-width: 0; padding: 16px 12px; background: var(--white); border: 1px solid var(--line); border-radius: var(--home-radius); display: flex; flex-direction: column; align-items: flex-start; }
body[data-page="home"] .home-icon { display: inline-grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--line); border-radius: 50%; background: var(--kizoshi-primary-soft); color: var(--kizoshi-primary-dark); flex-shrink: 0; }
body[data-page="home"] .home-icon .icon { width: 30px; height: 30px; }
body[data-page="home"] .home-capability h3 { margin: 12px 0 10px; font-size: 1rem; }
body[data-page="home"] .home-capability > p { font-size: .82rem; line-height: 1.55; }
body[data-page="home"] .home-example { width: 100%; margin-top: auto; border: 1px solid var(--line); border-radius: 8px; padding: 9px; font-size: .7rem; line-height: 1.5; overflow-wrap: anywhere; }
body[data-page="home"] .home-example strong { display: flex; align-items: center; gap: 5px; font-size: .72rem; }
body[data-page="home"] .home-example .icon { width: 20px; height: 20px; color: var(--kizoshi-primary-dark); flex-shrink: 0; }
body[data-page="home"] .home-example p { margin: 8px 0 0; }
body[data-page="home"] .home-status { display: block; color: var(--kizoshi-primary-dark); margin-block: 6px; }
body[data-page="home"] .home-example-tabs { display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid var(--line); padding-block: 5px; }
body[data-page="home"] .home-example-tabs b { color: var(--kizoshi-primary-dark); border-bottom: 2px solid var(--kizoshi-primary); }
body[data-page="home"] .home-example-list { padding: 0; margin: 0; list-style: none; }
body[data-page="home"] .home-example-list li { display: flex; gap: 7px; align-items: center; padding: 8px 0; }
body[data-page="home"] .home-example-list li + li { border-top: 1px solid var(--line); }
body[data-page="home"] .home-chart-bars { display: flex; gap: 5px; margin-top: 14px; }
body[data-page="home"] .home-chart-bars > div { flex: 1; text-align: center; }
body[data-page="home"] .home-bar-pair { height: 75px; display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid var(--line); }
body[data-page="home"] .home-bar-pair span { width: 50%; background: var(--kizoshi-primary-dark); }
body[data-page="home"] .home-bar-pair span + span { background: var(--kizoshi-primary); }
body[data-page="home"] .home-chart-legend { display: flex; flex-wrap: wrap; gap: 6px; }
body[data-page="home"] .home-chart-legend span::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 3px; background: var(--kizoshi-primary-dark); }
body[data-page="home"] .home-chart-legend span + span::before { background: var(--kizoshi-primary); }
body[data-page="home"] .home-connected { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; padding-block: 36px; }
body[data-page="home"] .home-map { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; }
body[data-page="home"] .home-map-summary { border-radius: var(--home-radius); background: var(--kizoshi-primary-soft); padding: 12px 24px; text-align: center; margin-bottom: 20px; }
body[data-page="home"] .home-map-summary p { font-size: .8rem; margin: 0; }
body[data-page="home"] .home-nodes { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); width: 100%; position: relative; gap: 14px; }
body[data-page="home"] .home-nodes::before { content: ''; position: absolute; top: 32px; left: 12%; right: 12%; border-top: 1px solid var(--kizoshi-primary); }
body[data-page="home"] .home-node { position: relative; text-align: center; min-width: 0; }
body[data-page="home"] .home-node .home-icon { width: 64px; height: 64px; background: var(--white); border-color: var(--kizoshi-primary); }
body[data-page="home"] .home-node h3 { font-size: .9rem; margin: 10px 0 5px; }
body[data-page="home"] .home-node p { font-size: .8rem; line-height: 1.5; margin: 0; }
body[data-page="home"] .home-map-identity { display: none; }
body[data-page="home"] .home-foundation-items { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 22px; align-items: center; }
body[data-page="home"] .home-foundation-items .icon { width: 40px; height: 40px; color: var(--kizoshi-primary-dark); margin-bottom: 14px; }
body[data-page="home"] .home-foundation-items h3 { font-size: .9rem; margin-bottom: 7px; }
body[data-page="home"] .home-foundation-items p { font-size: .82rem; line-height: 1.5; margin: 0; }
body[data-page="home"] footer a { display: inline-flex; min-height: 44px; align-items: center; }
@media(min-width:1025px) {
 .homepage-hero__layout { grid-template-columns: minmax(0,38fr) minmax(0,62fr); min-height: 570px; padding-block: 36px 0; gap: 22px 10px; }
 .homepage-hero__visual { padding: 0; align-self: stretch; }
 .homepage-hero__character { width: 43%; height: 100%; max-height: 550px; align-self: end; margin-left: -9%; z-index: 0; }
 .homepage-hero .hero-app { width: 66%; min-height: 440px; z-index: 1; margin-bottom: 36px; }
 .homepage-hero .hero-app__stage { padding: 22px 16px 18px; }
 .homepage-hero .hero-app__state { grid-template-rows: auto auto auto; align-content: center; gap: 22px; }
 .homepage-hero .hero-app__prompt { min-height: 100px; }
 .homepage-hero__actions .btn { padding-inline: 14px; }
 .homepage-hero__proof { padding-bottom: 36px; }
}
@media(max-width:1200px) {
 body[data-page="home"] .home-actions, body[data-page="home"] .home-foundation { grid-template-columns: minmax(0,1fr); }
 body[data-page="home"] .home-section-intro { max-width: 650px; }
 body[data-page="home"] .home-challenge { grid-template-columns: 1fr 1fr; grid-template-areas: 'intro photo' 'link photo' 'pains pains'; }
 body[data-page="home"] .home-pains { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@media(max-width:1024px) {
 body[data-page="home"] .home-capabilities { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
 body[data-page="home"] .home-capability { padding: 20px; }
 body[data-page="home"] .home-example { font-size: .82rem; }
 body[data-page="home"] .home-example strong { font-size: .82rem; }
 body[data-page="home"] .home-connected { grid-template-columns: 1fr; gap: 24px; }
 .homepage-hero .hero-app__state { grid-template-rows: auto auto auto; align-content: center; gap: 18px; }
 .homepage-hero .hero-app { min-height: 400px; margin-top: 0; }
 .homepage-hero__character { height: 248px; width: 300px; }
}
@media(max-width:600px) {
 body[data-page="home"] .container { width: calc(100% - 40px); }
 body[data-page="home"] .home-challenge { grid-template-columns: minmax(0,1fr); grid-template-areas: 'intro' 'photo' 'link' 'pains'; gap: 18px; }
 body[data-page="home"] .home-meeting { height: auto; min-height: 0; aspect-ratio: 3/2; object-fit: cover; }
 body[data-page="home"] .home-challenge-link { justify-self: stretch; }
 body[data-page="home"] .home-pains { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 18px; gap: 22px; }
 body[data-page="home"] .home-capabilities { grid-template-columns: minmax(0,1fr); gap: 12px; }
 body[data-page="home"] .home-capability { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 4px 12px; padding: 15px 12px; }
 body[data-page="home"] .home-capability .home-icon { grid-row: span 2; width: 44px; height: 44px; }
 body[data-page="home"] .home-capability h3 { margin: 0; }
 body[data-page="home"] .home-capability > p { margin: 0; }
 body[data-page="home"] .home-capability .home-example { display: none; }
 body[data-page="home"] .home-map { flex-direction: column-reverse; gap: 22px; }
 body[data-page="home"] .home-map-summary { width: 100%; margin: 0; }
 body[data-page="home"] .home-nodes { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: auto 106px auto; gap: 12px 28px; }
 body[data-page="home"] .home-node:nth-child(3), body[data-page="home"] .home-node:nth-child(4) { grid-row: 3; }
 body[data-page="home"] .home-nodes::before { inset: 32px 23%; border: 1px solid var(--kizoshi-primary); border-radius: 35px; }
 body[data-page="home"] .home-node { background: var(--white); }
 body[data-page="home"] .home-map-identity { display: block; grid-area: 2 / 1 / 3 / 3; justify-self: center; width: 106px; height: 106px; padding: 7px; border: 1px solid var(--kizoshi-primary); border-radius: 50%; background: var(--section-soft); z-index: 1; }
 body[data-page="home"] .home-map-identity img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
 body[data-page="home"] .home-foundation-items { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
 body[data-page="home"] .home-foundation-items article { padding: 18px 12px; border: 1px solid var(--line); border-radius: var(--home-radius); background: var(--white); text-align: center; height: 100%; }
 .homepage-hero__layout { gap: 20px; }
 .homepage-hero__character { height: 183px; width: 230px; margin-inline: auto; }
 .homepage-hero .hero-app { margin-top: 0; min-height: 0; }
 .homepage-hero .hero-app__stage { padding: 18px 12px 12px; }
 .homepage-hero .hero-app__state { grid-template-rows: auto auto auto; gap: 17px; }
 .homepage-hero .hero-app__prompt { min-height: 90px; padding: 10px; gap: 7px; }
}
@media(max-width:22rem) {
 body[data-page="home"] .home-foundation-items { grid-template-columns: minmax(0,1fr); }
}
/* Let enlarged text reflow without truncating diagram labels or trust items. */
body[data-page="home"] main h2,
body[data-page="home"] main h3,
body[data-page="home"] .home-node p,
body[data-page="home"] .home-foundation-items p { overflow-wrap: anywhere; hyphens: manual; }
@media(min-width:1201px) {
 body[data-page="home"] .home-capabilities { grid-template-columns: repeat(auto-fit,minmax(min(100%,10rem),1fr)); }
}
@media(max-width:600px) {
 body[data-page="home"] .home-foundation-items { grid-template-columns: repeat(auto-fit,minmax(min(100%,9rem),1fr)); }
}
body[data-page="home"] .home-pains li { min-width: 0; overflow-wrap: anywhere; hyphens: manual; }
@media(max-width:600px) {
 body[data-page="home"] .home-pains { grid-template-columns: repeat(auto-fit,minmax(min(100%,8rem),1fr)); }
}

/* Static chart dimensions: external CSS preserves the strict CSP. */
span.chart-height-25{height:25%}
span.chart-height-40{height:40%}
span.chart-height-55{height:55%}
span.chart-height-35{height:35%}
span.chart-height-48{height:48%}
span.chart-height-60{height:60%}
span.chart-height-75{height:75%}
span.chart-height-72{height:72%}
span.chart-height-85{height:85%}
span.chart-height-95{height:95%}