/* Product-page composition only. The shared shell and banner retain their styles. */
body[data-page="product"] { --product-green: #14764a; --product-green-soft: #edf9f2; --product-purple: #6736ba; --product-purple-soft: #f5f0ff; }
body[data-page="product"] main { overflow-wrap: anywhere; }
body[data-page="product"] main .icon { flex-shrink: 0; }
.product-hero { background: radial-gradient(ellipse at 78% 60%,var(--kizoshi-primary-soft),transparent 64%),linear-gradient(115deg,var(--white),var(--section-soft)); border-bottom: 1px solid var(--line); }
/* Match the homepage hero frame without widening the sections below it. */
.product-hero > .container { width: min(calc(100% - 64px), 1480px); }
.product-hero__layout { display: grid; grid-template-columns: minmax(0,40fr) minmax(0,60fr); grid-template-areas: 'copy visual' 'actions visual' 'benefits visual'; gap: 20px 12px; align-items: center; padding-block: 24px 0; }
.product-hero__copy { grid-area: copy; align-self: end; }
.product-hero__copy .kicker { margin-bottom: 14px; }
.product-hero__copy h1 { font-size: clamp(2rem,2.55vw,2.3rem); line-height: 1.12; margin-bottom: 18px; }
.product-hero__copy h1 span { display: inline; }
.product-hero__copy > p:last-child { margin-bottom: 0; font-size: .95rem; line-height: 1.6; }
.product-hero__actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: 10px; }
.product-hero__actions .btn { padding-inline: 14px; }
.product-hero__visual { grid-area: visual; display: grid; min-width: 0; align-self: stretch; align-items: center; }
.product-hero__character { grid-area: 1/1; width: 40%; margin-left: -8%; height: 445px; align-self: end; overflow: clip; }
.product-hero__character img { display: block; width: 100%; height: auto; }
.product-result { grid-area: 1/1; justify-self: end; align-self: center; position: relative; width: 68%; min-height: 460px; margin-bottom: 30px; padding: 18px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 105px; }
.product-result__question { margin-left: 14%; border: 1px solid var(--line); background: var(--kizoshi-primary-soft); padding: 12px 14px; border-radius: 12px 12px 0 12px; font-size: .85rem; line-height: 1.5; }
.product-result__response { padding: 12px 0 0; }
.product-result__brand { display: flex; align-items: center; gap: 8px; }
.product-result__brand > .icon { color: var(--kizoshi-primary-dark); width: 28px; height: 28px; }
.product-result__brand > span { margin-left: auto; color: var(--muted); font-size: .7rem; }
.product-result__response > p { font-size: .8rem; line-height: 1.5; margin: 12px 0; }
.product-result__response ul { list-style: none; padding: 0; margin: 0; border: 1px solid var(--line); border-radius: 8px; }
.product-result__response li { display: flex; align-items: center; gap: 9px; padding: 10px; font-size: .8rem; line-height: 1.4; }
.product-result__response li + li { border-top: 1px solid var(--line); }
.product-result__response li .icon { width: 20px; height: 20px; color: var(--kizoshi-primary-dark); }
.product-result .text-link { display: inline-flex; min-height: 44px; align-items: center; font-size: .8rem; }
.product-result__status { font-size: .7rem; line-height: 1.45; margin: 0; color: var(--muted); }
.product-result__composer { margin-top: auto; display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 8px; font-size: .75rem; color: var(--muted); }
.product-result__composer .icon { color: var(--kizoshi-primary-dark); width: 22px; height: 22px; }
.product-result__send { flex-shrink: 0; margin-left: auto; width: 2rem; height: 2rem; display: grid; place-items: center; background: var(--kizoshi-primary-dark); color: var(--white); border-radius: 8px; font-size: 1.2rem; }
.product-benefits { grid-area: benefits; align-self: start; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding: 0 0 30px; margin: 0; list-style: none; }
.product-benefits li { display: flex; align-items: flex-start; gap: 8px; }
.product-benefits .icon { width: 25px; height: 25px; color: var(--kizoshi-primary-dark); }
.product-benefits strong { display: block; font-size: .73rem; line-height: 1.4; }
.product-benefits p { font-size: .7rem; line-height: 1.5; margin: 5px 0 0; }
section.product-value.container { padding-block: 40px; }
.product-section-heading { display: grid; grid-template-columns: 1fr 1.6fr; gap: 36px; align-items: center; margin-bottom: 30px; }
.product-section-heading h2 { margin-bottom: 0; }
.product-section-heading > p { font-size: .9rem; line-height: 1.65; margin: 0; }
.product-section-heading .kicker { margin-bottom: 10px; }
.product-pillars { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.product-pillar { --pillar-color: var(--kizoshi-primary-dark); --pillar-soft: var(--kizoshi-primary-soft); display: grid; grid-template-rows: subgrid; grid-row: span 2; gap: 18px; min-width: 0; padding-inline: 16px; border-left: 1px solid var(--line); }
.product-pillar--grow { --pillar-color: var(--product-green); --pillar-soft: var(--product-green-soft); }
.product-pillar--discover { --pillar-color: var(--product-purple); --pillar-soft: var(--product-purple-soft); }
.product-pillar:first-child { border-left: 0; padding-left: 0; }
.product-pillar:last-child { padding-right: 0; }
.product-pillar__heading { display: flex; gap: 14px; align-items: center; color: var(--pillar-color); }
.product-pillar__symbol { width: 52px; height: 52px; display: grid; place-items: center; background: var(--pillar-soft); border: 1px solid var(--line); border-radius: 10px; }
.product-pillar__symbol .icon { width: 32px; height: 32px; }
.product-pillar__number { font-weight: 700; font-size: .72rem; }
.product-pillar__heading h3 { margin: 0; font-size: 1.6rem; letter-spacing: -.04em; }
.product-pillar__descriptor { font-weight: 600; color: var(--ink); margin: 12px 0 9px; font-size: 1rem; line-height: 1.45; }
.product-pillar__audience { display: inline-block; background: var(--pillar-soft); color: var(--pillar-color); border-radius: 6px; padding: 4px 9px; font-size: .72rem; }
.product-pillar__copy { margin: 16px 0; font-size: .85rem; line-height: 1.65; }
.product-pillar__benefits { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.product-pillar__benefits li { display: flex; align-items: flex-start; gap: 8px; font-size: .8rem; line-height: 1.55; color: var(--muted); }
.product-pillar__benefits .icon { width: 19px; height: 19px; color: var(--pillar-color); }
.product-pillar__status { padding: 9px 10px; border-left: 3px solid var(--pillar-color); background: var(--pillar-soft); font-size: .75rem; line-height: 1.5; font-weight: 600; color: var(--ink); margin: 20px 0 8px; }
.product-pillar__note { font-size: .73rem; line-height: 1.5; margin: 0; }
.product-example { border: 1px solid var(--line); border-radius: 10px; padding: 14px 10px 10px; min-width: 0; scroll-margin-top: 110px; background: var(--white); }
.product-example > h3 { font-size: .82rem; letter-spacing: -.015em; margin: 0 0 7px; }
.product-example__label { font-size: .7rem; margin: 0 0 12px; line-height: 1.4; }
.product-example ul { display: grid; gap: 9px; list-style: none; margin: 0; padding: 0; }
.product-example li { display: flex; align-items: flex-start; gap: 10px; padding: 12px 9px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(var(--white),var(--page)); }
.product-example li > div { min-width: 0; }
.product-example__avatar { width: 34px; height: 36px; border: 1px solid var(--line); background: var(--pillar-soft); color: var(--pillar-color); border-radius: 7px; display: grid; place-items: center; flex-shrink: 0; font-weight: 600; }
.product-example__avatar .icon { width: 22px; height: 22px; }
.product-example h4 { margin: 0 0 4px; font-size: .8rem; line-height: 1.4; }
.product-example li p { font-size: .75rem; line-height: 1.5; margin: 0 0 5px; }
.product-example__context { color: var(--muted); }
.product-example__badge { display: inline-block; border-radius: 20px; font-size: .67rem; padding: 3px 8px; background: var(--pillar-soft); color: var(--pillar-color); }
.product-context { border-top: 1px solid var(--line); background: var(--page); }
.product-context__layout { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; padding-block: 40px; align-items: center; }
.product-context__copy h2 { font-size: clamp(1.75rem,2.4vw,2.3rem); }
.product-context__copy > p { font-size: .9rem; }
.product-context__copy .kicker { font-size: .72rem; }
.product-context__copy .text-link { display: inline-flex; min-height: 44px; align-items: center; }
.product-context__copy .product-integration-note { font-size: .75rem; margin: 12px 0 0; }
.product-map { min-width: 0; scroll-margin-top: 110px; }
.product-sources { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; padding-inline: 18px; }
.product-source { --pillar-color: var(--kizoshi-primary-dark); --pillar-soft: var(--kizoshi-primary-soft); display: flex; align-items: center; gap: 8px; background: var(--pillar-soft); border: 1px solid var(--line); border-radius: 9px; padding: 12px 9px; position: relative; font-size: .75rem; line-height: 1.5; }
.product-source.product-pillar--grow { --pillar-color: var(--product-green); --pillar-soft: var(--product-green-soft); }
.product-source.product-pillar--discover { --pillar-color: var(--product-purple); --pillar-soft: var(--product-purple-soft); }
.product-source .icon { width: 22px; height: 22px; color: var(--pillar-color); }
.product-source span { display: block; font-size: .7rem; color: var(--muted); }
.product-source::after { content: ''; position: absolute; height: 22px; top: 100%; left: 50%; border-left: 1px solid var(--kizoshi-primary); }
.product-map__centre { display: flex; align-items: center; justify-content: center; gap: 10px; width: fit-content; max-width: 100%; margin: 44px auto; padding: 12px 28px; border: 1px solid var(--kizoshi-primary); border-radius: 12px; background: var(--white); position: relative; }
.product-map__centre::before,.product-map__centre::after { content: ''; position: absolute; height: 22px; left: 50%; border-left: 1px solid var(--kizoshi-primary); }
.product-map__centre::before { bottom: 100%; }
.product-map__centre::after { top: 100%; }
.product-map__centre .icon { width: 32px; height: 32px; color: var(--kizoshi-primary-dark); }
.product-map__centre p { margin: 0; font-size: .75rem; }
.product-modules { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 10px; position: relative; }
.product-sources { position: relative; }
.product-sources::after { content: ''; position: absolute; left: 18%; right: 18%; bottom: -22px; border-bottom: 1px solid var(--kizoshi-primary); }
.product-modules::before { content: ''; position: absolute; left: 6%; right: 6%; top: -22px; border-top: 1px solid var(--kizoshi-primary); }
.product-module { position: relative; text-align: center; }
.product-module::before { content: ''; position: absolute; left: 50%; height: 22px; top: -22px; border-left: 1px solid var(--kizoshi-primary); }
.product-module > span { display: inline-grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 50%; background: var(--white); color: var(--kizoshi-primary-dark); }
.product-module h3 { font-size: .75rem; line-height: 1.4; letter-spacing: -.02em; margin: 10px 0 5px; }
.product-module p { font-size: .75rem; line-height: 1.5; margin: 0; }
@media(max-width:1100px) {
 .product-hero__layout { grid-template-columns: minmax(0,1fr); grid-template-areas: 'copy' 'actions' 'visual' 'benefits'; }
 .product-hero__copy { max-width: 700px; }
 .product-hero__copy h1 { font-size: 2.6rem; }
 .product-hero__visual { width: min(100%,800px); justify-self: center; }
 .product-hero__character { width: 36%; margin-left: 0; height: 350px; }
 .product-result { width: 64%; margin-bottom: 24px; }
 .product-benefits { max-width: 750px; }
 .product-pillars { grid-template-columns: minmax(0,1fr); gap: 26px; }
 .product-pillar { grid-template-rows: auto; grid-row: auto; grid-template-columns: 1fr 1fr; border-left: 0; border-top: 1px solid var(--line); padding: 26px 0 0; gap: 28px; }
 .product-pillar:first-child { border-top: 0; padding-top: 0; }
 .product-example { align-self: center; }
 .product-context__layout { grid-template-columns: 1fr; }
 .product-context__copy { max-width: 680px; }
}
@media(max-width:700px) {
 .product-hero__layout { gap: 22px; }
 .product-hero__copy h1 { font-size: clamp(2rem,8.7vw,2.55rem); }
 .product-hero__actions { flex-direction: column; }
 .product-hero__actions .btn { width: 100%; }
 .product-hero__visual { display: flex; flex-direction: column; }
 .product-hero__character { width: 230px; max-width: 90%; height: 200px; margin: 0 auto; align-self: center; }
 .product-result { width: 100%; margin: 0; padding: 16px; min-height: 460px; }
 .product-result__question { margin-left: 8%; }
 .product-result__brand { flex-wrap: wrap; }
 .product-benefits { grid-template-columns: minmax(0,1fr); gap: 16px; }
 .product-benefits strong { font-size: .85rem; }
 .product-benefits p { font-size: .8rem; }
 .product-section-heading { grid-template-columns: minmax(0,1fr); gap: 16px; }
 .product-pillar { grid-template-columns: minmax(0,1fr); gap: 20px; }
 .product-example { width: 100%; }
 .product-example li p,.product-example h4 { font-size: .85rem; }
 .product-example__label,.product-example__badge { font-size: .75rem; }
 .product-sources { grid-template-columns: minmax(0,1fr); padding: 0; gap: 10px; }
 .product-source { font-size: .85rem; }
 .product-source span { font-size: .8rem; }
 .product-source::after,.product-sources::after { display: none; }
 .product-map__centre { margin-block: 24px; }
 .product-map__centre::before,.product-map__centre::after { height: 24px; }
 .product-modules { grid-template-columns: repeat(auto-fit,minmax(min(100%,8rem),1fr)); gap: 16px; padding-top: 10px; border-top: 1px solid var(--line); }
 .product-modules::before,.product-module::before { display: none; }
 .product-module { border: 1px solid var(--line); background: var(--white); border-radius: 10px; padding: 14px 10px; }
 .product-module h3,.product-module p { font-size: .8rem; }
}
@media(min-width:701px) {
 .product-map { container: product-map / inline-size; }
 @container product-map (max-width:38rem) {
  .product-modules { grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid var(--line); padding-top: 14px; }
  .product-modules::before,.product-module::before { display: none; }
  .product-module { padding: 12px; }
 }
}

@media (max-width: 1024px) {
 .product-hero > .container { width: min(calc(100% - 48px), 800px); }
}
@media (max-width: 600px) {
 .product-hero > .container { width: calc(100% - 40px); }
}
@media (max-width: 350px) {
 .product-hero > .container { width: calc(100% - 32px); }
}