/* Non-EC support: approved EC foundation + purpose-specific diagrams. */
.web-page { --web-diagram-line: #AFBBC0; }
.web-page .ec-hero__grid { grid-template-columns: 1.2fr 1fr; gap: 60px; margin-top: 58px; }
.web-page .ec-hero h1 { font-size: clamp(32px,3.65vw,52px); }
.web-page .ec-hero__label { max-width: 35em; }
.web-page .ec-hero__visual { min-width: 0; }
.web-page #web-plans { padding-top: 0; }
.web-page #web-promise { background: rgba(255,255,255,.42); }
.web-page .ec-method .section-kicker { font-size: clamp(34px,4.3vw,61px); }
.web-journey { max-width: 494px; margin-inline: auto; padding: 10px 22px; }
.web-journey__sources { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; }
.web-touchpoint { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border-radius: 999px; background: white; font-size: 13px; min-height: 64px; }
.web-touchpoint svg { width: 32px; height: 32px; fill: none; stroke: var(--color-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.web-touchpoint--map svg { stroke: var(--color-accent); }
.web-journey__connector { height: 60px; display: flex; justify-content: center; position: relative; }
.web-journey__connector i { position: absolute; width: 25%; height: 24px; border-bottom: 1px solid var(--web-diagram-line); top: 0; }
.web-journey__connector i:first-child { right: 50%; border-left: 1px solid var(--web-diagram-line); border-bottom-left-radius: 12px; }
.web-journey__connector i:last-child { left: 50%; border-right: 1px solid var(--web-diagram-line); border-bottom-right-radius: 12px; }
.web-journey__connector span { position: relative; top: 24px; color: var(--color-accent); font-size: 24px; line-height: 32px; }
.web-information { background: #fff; border-radius: 20px; box-shadow: 0 10px 24px #1C1E1F06; }
.web-information__chrome { height: 28px; display: flex; align-items: center; gap: 4px; padding: 0 18px; border-bottom: 1px solid var(--color-line); }
.web-information__chrome i { width: 3px; height: 3px; border-radius: 50%; background: #A7B2B7; }
.web-information__chrome b { margin-left: auto; height: 2px; width: 28px; background: var(--color-ink); }
.web-information__body { display: grid; grid-template-columns: .75fr 1.25fr; align-items: center; gap: 18px; padding: 24px; }
.web-information__symbol { display: grid; place-items: center; aspect-ratio: 1; border-radius: 12px; background: #E7ECE9; }
.web-information__symbol svg { width: 82%; fill: none; stroke: var(--color-ink); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.web-information__labels strong { display: block; font-size: 14px; line-height: 1.9; }
.web-information__labels > span { display: block; font-size: 12px; margin-top: 12px; }
.web-information__labels > div { display: grid; gap: 8px; margin-top: 22px; }
.web-information__labels i { height: 3px; width: 95%; background: #D6DEE1; }
.web-information__labels i:last-child { width: 70%; }
.web-journey__arrow { height: 48px; display: grid; place-items: center; font-size: 26px; color: var(--color-accent); }
.web-journey__destination { margin-inline: auto; max-width: 300px; padding: 22px 26px; display: flex; gap: 12px; align-items: center; justify-content: center; border-radius: 999px; background: var(--color-ink); color: white; font-size: 15px; }
.web-journey__destination svg { width: 22px; height: 22px; stroke: white; stroke-width: 1.2; fill: none; margin-left: auto; }
.web-journey__dot { width: 6px; height: 6px; background: var(--color-accent); border-radius: 50%; }
.web-measure { display: grid; grid-template-columns: 1fr 130px 1fr; align-items: center; border: 1px solid #AEBAC0; border-radius: var(--ec-radius); padding: 34px; margin-top: 30px; }
.web-measure__item { text-align: center; }
.web-measure__item > span { font: 400 11px/1.5 var(--font-en); letter-spacing: .1em; }
.web-measure__item strong { display: block; font-size: 18px; margin-top: 14px; }
.web-measure__item p { font-size: 13px; line-height: 1.9; margin-top: 12px; }
.web-measure__divider { display: flex; flex-direction: column; align-items: center; gap: 14px; font-size: 11px; }
.web-measure__divider i { height: 34px; width: 1px; background: #AEBAC0; }
.web-page .web-case-visual { aspect-ratio: 1.6; overflow: hidden; border-radius: 16px; position: relative; background: #DFE6E3; padding: 26px; }
.web-case-visual--second { background: #E9E3DC !important; }
.web-case-visual__sample { position: absolute; top: 14px; right: 14px; font-size: 10px; background: white; padding: 5px 8px; border: 1px solid #C7D0D4; border-radius: 3px; }
.web-case-visual__label { position: relative; font-size: 15px; font-weight: 500; z-index: 1; }
.web-case-visual__canvas { position: absolute; left: 12%; top: 27%; width: 74%; height: 76%; border: 9px solid white; border-radius: 8px; background: #EDF1EF; transform: rotate(-4deg); }
.web-case-visual--second .web-case-visual__canvas { transform: rotate(4deg); background: #F2EDE7; }
.web-case-visual svg { width: 100%; height: 100%; fill: none; stroke: #303638; stroke-width: 1.6; }
.web-case-visual .web-diagram-fill { fill: #fff; stroke: #fff; }
.web-case-visual .web-diagram-accent { fill: var(--color-accent); stroke: none; }
.web-case-visual__caption { position: absolute; bottom: 20px; left: 26px; font: 400 10px/1 var(--font-en); letter-spacing: .07em; }
.web-cover { position: relative; aspect-ratio: 1.36; padding: 48px 24px 24px; overflow: hidden; color: var(--color-ink); background: #EAD9CF; display: flex; flex-direction: column; }
.web-cover--map { background: #DEE6E3; }
.web-cover--content { background: #E9E5DD; }
.web-cover__sample { position: absolute; right: 12px; top: 12px; font-size: 9px; background: #fff9; border: 1px solid #C2CDCE; border-radius: 3px; padding: 4px 6px; }
.web-cover p { font-size: clamp(16px,1.5vw,21px); font-weight: 700; line-height: 1.65; }
.web-cover__drawing { min-height: 0; flex: 1; display: flex; align-items: center; padding-block: 15px; }
.web-cover__drawing svg { width: 100%; max-height: 120px; fill: none; stroke: var(--color-ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.web-cover .cover-accent { fill: var(--color-accent); stroke: none; }
.web-cover .cover-accent-line { stroke: var(--color-accent); stroke-width: 3; }
.web-cover small { font: 400 9px/1.5 var(--font-en); letter-spacing: .06em; }
.web-cover__comparison { flex: 1; display: flex; align-items: center; justify-content: center; gap: 17px; padding-block: 14px; }
.web-cover__comparison span { display: grid; place-items: center; width: 72px; aspect-ratio: 1; border: 1px solid var(--color-ink); border-radius: 50%; font-size: 16px; }
.web-cover__comparison span:last-child { background: white; border-color: white; }
.web-cover__comparison i { height: 36px; width: 1px; background: var(--color-accent); }
@media (max-width:1100px) {
  .web-page .ec-hero__grid { gap: 26px; grid-template-columns: 1.1fr 1fr; }
  .web-journey { padding-inline: 0; }
  .web-touchpoint { font-size: 11px; gap: 4px; }
  .web-information__body { gap: 12px; padding: 18px; }
  .web-information__labels strong { font-size: 12px; }
  .web-page .ec-hero h1 { font-size: 36px; }
  .web-page .ec-hero__label { font-size: 12px; }
}
@media (max-width:800px) {
  .web-page .ec-hero__grid { grid-template-columns: 1fr; gap: 46px; margin-top: 36px; }
  .web-page .ec-hero h1 { font-size: 43px; }
  .web-page .ec-hero__visual { width: 100%; }
  .web-journey { max-width: 450px; }
  .web-touchpoint { font-size: 14px; }
  .web-information__labels strong { font-size: 15px; }
  .web-measure { padding: 26px 20px; grid-template-columns: 1fr 100px 1fr; }
  .web-measure__item strong { font-size: 16px; }
  .web-cover { padding: 42px 16px 18px; }
  .web-cover p { font-size: 17px; }
}
@media (max-width:600px) {
  .web-page .ec-hero h1 { font-size: clamp(21px,6.5vw,36px); line-height: 1.85; letter-spacing: 0; }
  .web-page .ec-hero__grid { gap: 34px; }
  .web-page .ec-hero__label { font-size: 12px; margin-bottom: 20px; }
  .web-journey { padding: 4px 10px; }
  .web-journey__sources { gap: 10px 18px; }
  .web-touchpoint { font-size: 11px; min-height: 52px; padding: 7px; }
  .web-touchpoint svg { width: 26px; height: 26px; }
  .web-journey__connector { height: 48px; }
  .web-journey__connector i { height: 17px; }
  .web-journey__connector span { top: 17px; font-size: 21px; }
  .web-information { border-radius: 16px; }
  .web-information__body { padding: 16px; grid-template-columns: .7fr 1.3fr; }
  .web-information__labels strong { font-size: 12px; }
  .web-information__labels > span { font-size: 11px; margin-top: 8px; }
  .web-information__labels > div { margin-top: 16px; }
  .web-journey__destination { padding: 18px 22px; font-size: 13px; max-width: 250px; }
  .web-measure { grid-template-columns: 1fr; gap: 14px; padding: 28px 22px; }
  .web-measure__item > span { font-size: 10px; }
  .web-measure__item strong { font-size: 16px; margin-top: 10px; }
  .web-measure__item p { font-size: 12px; }
  .web-measure__divider { flex-direction: row; justify-content: center; gap: 14px; padding-block: 10px; }
  .web-measure__divider i { width: 52px; height: 1px; }
  .web-page .web-case-visual { padding: 20px; }
  .web-case-visual__label { font-size: 13px; }
  .web-case-visual__caption { left: 20px; bottom: 16px; font-size: 9px; }
  .web-cover { padding: 45px 24px 24px; }
  .web-cover p { font-size: 20px; }
}