:root {
  --ink: #182033;
  --muted: #5f687b;
  --line: #e4e8ef;
  --paper: #ffffff;
  --tint: #f6f8fb;
  --blue: #315fd4;
  --blue-soft: #eef3ff;
  --orange: #b9531f;
  --orange-soft: #fff5ee;
  --warm: #fff9f4;
  --max: 1280px;
  --shadow: 0 20px 70px rgba(33, 51, 91, .10);
  --portfolio-content-width: min(1280px, calc(100vw - 240px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; font-size: 16px; line-height: 1.8; -webkit-font-smoothing: antialiased; }
body.portfolio-case--bangyang {
  --portfolio-focus: var(--blue);
  --portfolio-focus-text: #fff;
  --portfolio-brand: var(--ink);
  --portfolio-brand-accent: var(--blue);
  --portfolio-footer-bg: var(--tint);
  --portfolio-footer-color: var(--muted);
  --portfolio-footer-line: var(--line);
}
body.no-scroll { overflow: hidden; }
button, a { font: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
figure, dl, dd, blockquote, p, h1, h2, h3 { margin: 0; }
.wrap { width: var(--portfolio-content-width); margin-inline: auto; }
.section-tint { background: var(--tint); }
.section-warm { background: var(--warm); }
.quiet, .footnote, .result-footnote { color: var(--muted); }

.version-label { position: fixed; top: 28px; right: 34px; z-index: 30; color: #8790a4; font-size: 12px; letter-spacing: .06em; }
.version-label span { color: var(--blue); font-weight: 700; }
.scroll-progress { position: fixed; z-index: 50; top: 0; left: 0; height: 2px; width: 0; background: var(--blue); }
.arch-index { position: fixed; right: 18px; left: auto; top: 50%; z-index: 20; display: flex; flex-direction: column; gap: 6px; width: 85px; padding: 8px; transform: translateY(-50%); }
.arch-index a { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; padding: 6px; border-radius: 9px; color: #657084; text-decoration: none; font-size: 12px; line-height: 1.2; }
.arch-index a span { font-variant-numeric: tabular-nums; font-weight: 700; }
.arch-index a i { border: 1px solid #b9c1d1; border-radius: 50%; background: #fff; }
.arch-index a.on { color: var(--blue); background: transparent; }
.arch-index a.on i { border-color: var(--blue); background: var(--blue); }
.arch-index a:focus-visible, .family-module-tabs button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.eyebrow { color: var(--blue); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hero { min-height: 100vh; padding-top: clamp(170px, 18vh, 230px); padding-bottom: 100px; }
.hero-copy { max-width: 900px; }
.hero h1 { margin-top: 24px; font-size: 64px; line-height: 1.1; letter-spacing: -.04em; }
.hero-lead { max-width: 680px; margin-top: 34px; color: var(--muted); font-size: 20px; line-height: 1.75; }
.hero-meta { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 72px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hero-meta div { padding: 20px 22px 20px 0; }
.hero-meta div + div { padding-left: 22px; border-left: 1px solid var(--line); }
.hero-meta dt { color: #9299a8; font-size: 13px; }
.hero-meta dd { margin-top: 4px; font-weight: 600; }
.role-boundary { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; margin-top: 26px; color: var(--muted); font-size: 14px; }
.role-boundary p { display: flex; gap: 12px; }
.role-boundary b { flex: 0 0 auto; color: var(--ink); }
.role-boundary .design-split { grid-column: 1 / -1; padding-top: 16px; border-top: 1px solid var(--line); }
.hero-route { display: grid; grid-template-columns: 1fr 70px 1fr 70px 1fr; align-items: center; margin-top: 88px; }
.hero-route > div { min-height: 154px; padding: 26px 28px; border-top: 3px solid var(--blue); background: var(--tint); }
.hero-route > div:nth-of-type(2) { border-color: var(--orange); background: var(--orange-soft); }
.hero-route > div:nth-of-type(3) { border-color: #f0a04b; background: #fff9ef; }
.hero-route small, .hero-route span { display: block; color: var(--muted); font-size: 13px; }
.hero-route strong { display: block; margin: 12px 0 18px; font-size: 22px; line-height: 1.3; }
.hero-route em { display: inline-flex; margin-top: 15px; padding: 4px 9px; border-radius: 999px; background: rgba(49,95,212,.09); color: var(--blue); font-size: 11px; font-style: normal; font-weight: 700; }
.hero-route > div:nth-of-type(2) em { background: rgba(249,107,2,.1); color: #c95600; }
.hero-route > div:nth-of-type(3) em { background: rgba(217,136,49,.11); color: #aa671f; }
.hero-route > i { color: var(--blue); font-style: normal; font-size: 24px; text-align: center; }
.hero-route > i.planned-arrow { color: var(--orange); }
.hero-note { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 18px; color: var(--muted); font-size: 13px; }
.solid-line, .dash-line { display: inline-block; width: 30px; height: 0; border-top: 2px solid var(--blue); }
.dash-line { border-top-style: dashed; border-color: var(--orange); }

.chapter { padding: 120px 0; scroll-margin-top: 10px; }
.chapter-head { max-width: none; margin-bottom: 70px; }
.chapter-no { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.chapter-no span { color: var(--blue); font-size: 18px; }
.chapter h2 { margin-top: 22px; font-size: 44px; line-height: 1.2; letter-spacing: -.035em; }
.chapter-head .intro { max-width: none; margin-top: 28px; color: var(--muted); font-size: 18px; line-height: 1.85; }
.chapter-head .intro.portfolio-lead { font-size: 20px; line-height: 1.6; }
.chapter h3 { font-size: 24px; line-height: 1.4; }

.problem-editorial { display: grid; grid-template-columns: 1.15fr .85fr; gap: 100px; align-items: start; }
.problem-editorial blockquote { padding-top: 8px; font-size: 30px; line-height: 1.65; font-weight: 600; letter-spacing: -.02em; }
.problem-editorial blockquote::before { content: "“"; display: block; height: 30px; color: var(--blue); font: 64px/1 Georgia, serif; }
.problem-list article { display: grid; grid-template-columns: 42px 1fr; gap: 18px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.problem-list article:first-child { padding-top: 0; }
.problem-list article > span { color: var(--blue); font-size: 13px; font-weight: 700; }
.problem-list h3 { font-size: 20px; }
.problem-list p { margin-top: 7px; color: var(--muted); }
.origin-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-top: 120px; padding-top: 56px; border-top: 1px solid var(--line); }
.origin-facts > div { display: grid; grid-template-columns: auto 1fr; column-gap: 20px; align-items: end; }
.origin-facts strong { grid-row: span 2; color: var(--blue); font-size: 96px; line-height: .85; letter-spacing: -.06em; }
.origin-facts span { font-size: 18px; font-weight: 700; }
.origin-facts p { color: var(--muted); }
.solution-bridge { display: grid; grid-template-columns: 1fr 1.2fr; gap: 70px; align-items: end; margin-top: 105px; padding-top: 46px; border-top: 1px solid var(--line); }
.solution-bridge h3 { margin-top: 14px; font-size: 34px; }
.solution-bridge > p:last-child { color: var(--muted); }
.solution-bridge + .service-map { margin-top: 52px; }

.service-map { display: grid; grid-template-columns: 1fr 100px 1fr 100px 1fr; align-items: stretch; }
.service-stage { display: flex; flex-direction: column; min-height: 330px; padding: 34px; border-top: 4px solid var(--blue); background: var(--tint); }
.service-stage.wecom-stage { border-color: var(--orange); background: var(--orange-soft); }
.service-stage.family-stage { border-color: #f0a04b; background: #fff9ef; }
.stage-tag { color: var(--muted); font-size: 13px; font-weight: 700; }
.service-stage h3 { margin-top: 40px; font-size: 28px; }
.service-stage > p { margin-top: 14px; color: var(--muted); }
.stage-output { margin-top: auto; padding-top: 25px; border-top: 1px solid rgba(100,112,137,.18); }
.stage-output small, .stage-output b { display: block; }
.stage-output small { color: var(--muted); font-size: 12px; }
.stage-output b { margin-top: 4px; }
.service-transfer { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--blue); }
.service-transfer span { color: var(--muted); font-size: 12px; text-align: center; }
.service-transfer i { font-style: normal; font-size: 24px; }
.service-transfer.planned { color: var(--orange); }
.map-note { margin-top: 26px; color: var(--muted); font-size: 14px; text-align: center; }

.ecosystem-chapter { padding-top: 110px; }
.flow-chapter-head { max-width: none; margin-bottom: 58px; }
.ecosystem-flow { overflow: hidden; border: 1px solid var(--line); background: var(--paper); box-shadow: 0 24px 80px rgba(33,51,91,.07); }
.flow-lane { display: grid; grid-template-columns: 132px 1fr; }
.flow-lane + .flow-lane { border-top: 1px solid var(--line); }
.lane-label { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 26px 24px; border-right: 1px solid var(--line); background: #f8f9fb; }
.lane-label small { color: var(--blue); font-size: 11px; font-weight: 700; }
.lane-label b { font-size: 15px; }
.lane-track { display: grid; grid-template-columns: 1fr 34px 1fr 34px 1fr 34px 1fr; align-items: stretch; padding: 24px; }
.lane-track article { min-width: 0; min-height: 156px; padding: 20px; border-top: 3px solid #aeb8cc; background: var(--tint); }
.lane-track article.highlight { border-color: var(--orange); background: var(--orange-soft); }
.lane-track article.planned { border: 1px dashed rgba(185,83,31,.45); border-top: 3px dashed var(--orange); background: #fffaf5; }
.lane-track article.lane-spacer { visibility: hidden; }
.lane-track > i { display: grid; place-items: center; color: #9da6b8; font-style: normal; font-size: 20px; }
.lane-track > i.two-way { color: var(--blue); }
.lane-track > i.planned { color: var(--orange); }
.lane-track span, .lane-track h3, .lane-track p { display: block; }
.lane-track span { color: var(--blue); font-size: 11px; font-weight: 700; }
.lane-track article.highlight span, .lane-track article.planned span { color: var(--orange); }
.lane-track h3 { margin-top: 22px; font-size: 17px; }
.lane-track p { margin-top: 10px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.platform-flow { padding: 24px; }
.portal-entry { display: flex; align-items: center; justify-content: center; gap: 18px; max-width: 690px; margin: 0 auto; padding: 17px 24px; border-radius: 9px; background: var(--blue); color: #fff; }
.portal-entry span { color: rgba(255,255,255,.72); font-size: 11px; }
.portal-entry b { font-size: 15px; }
.platform-track { display: grid; grid-template-columns: 1fr 42px 1fr 42px 1fr; align-items: stretch; margin-top: 22px; }
.platform-track article { min-height: 145px; padding: 20px 22px; border: 1px solid var(--line); background: #fff; }
.platform-track small { color: var(--blue); font-weight: 700; }
.platform-track h3 { margin-top: 18px; font-size: 17px; }
.platform-track p { margin-top: 9px; color: var(--muted); font-size: 12px; }
.platform-track > i { display: grid; place-items: center; color: #9da6b8; font-style: normal; }
.platform-base { display: flex; justify-content: center; gap: 22px; margin-top: 16px; padding: 14px 20px; border-left: 3px solid var(--blue); background: var(--blue-soft); font-size: 12px; }
.platform-base span { color: var(--muted); }
.flow-legend { display: flex; justify-content: flex-end; gap: 34px; margin-top: 22px; color: var(--muted); font-size: 12px; }
.flow-legend span { display: flex; align-items: center; gap: 10px; }

.stage-kicker { display: flex; align-items: center; gap: 18px; margin-bottom: 72px; color: var(--blue); }
.stage-kicker::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.stage-kicker span { font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.stage-kicker b { color: var(--ink); font-size: 15px; }
.stage-kicker.warm { color: var(--orange); }
.case-framing { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-bottom: 70px; background: var(--line); border: 1px solid var(--line); }
.case-framing > div { min-height: 170px; padding: 32px 36px; background: var(--paper); }
.case-framing small, .case-framing strong { display: block; }
.case-framing small { color: var(--blue); font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.case-framing strong { max-width: 430px; margin-top: 22px; font-size: 20px; line-height: 1.65; }
.evolution-line { display: grid; grid-template-columns: 1fr 52px 1fr minmax(116px,.48fr) 1fr; align-items: center; }
.evolution-line article { min-height: 236px; padding: 28px; border: 1px solid var(--line); background: var(--paper); }
.evolution-line article.active { color: #fff; border-color: var(--blue); background: var(--blue); box-shadow: var(--shadow); }
.evolution-line small, .evolution-line span { display: block; color: var(--muted); }
.evolution-line .active small, .evolution-line .active span, .evolution-line .active p { color: rgba(255,255,255,.75); }
.evolution-line strong { display: block; margin-top: 18px; font-size: 58px; line-height: 1; letter-spacing: -.06em; }
.evolution-line span { margin-top: 6px; font-weight: 700; }
.evolution-line p { margin-top: 22px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.evolution-line > i { color: #9da5b4; font-style: normal; text-align: center; font-size: 24px; }
.evolution-stage-change { display: grid; place-items: center; align-content: center; gap: 6px; min-height: 92px; padding: 12px 8px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; }
.evolution-stage-change small { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.evolution-stage-change b { color: var(--ink); font-size: 12px; line-height: 1.5; }
.evolution-example { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 22px; }
.evolution-example i { padding: 4px 7px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 10px; font-style: normal; line-height: 1.3; }
.evolution-example--dense { gap: 4px; }
.evolution-example--dense i { padding: 3px 6px; }
.evolution-line .evolution-source { margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--line); font-size: 11px; line-height: 1.55; }
.evolution-line .active .evolution-example i { border-color: rgba(255,255,255,.22); color: rgba(255,255,255,.78); }
.architecture-actions { display: flex; justify-content: space-between; align-items: center; gap: 40px; margin-top: 30px; }
.architecture-actions p { max-width: 740px; color: var(--muted); }
.architecture-actions p b { color: var(--ink); }
.architecture-actions button, .text-action { padding: 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: var(--blue); cursor: pointer; text-decoration: none; font-size: 14px; font-weight: 700; white-space: nowrap; }
.architecture-figure { margin-top: 42px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.architecture-figure img { width: 100%; max-height: 680px; object-fit: contain; background: #f8f9fb; }
.architecture-figure figcaption { padding: 16px 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.system-architecture { margin-top: 30px; padding: 34px; border: 1px solid var(--line); background: var(--paper); box-shadow: 0 24px 80px rgba(33,51,91,.06); }
.system-portal { display: grid; justify-items: center; max-width: 650px; margin: 0 auto; padding: 24px 30px; border-radius: 10px; background: var(--blue); color: #fff; text-align: center; }
.system-portal small { color: rgba(255,255,255,.7); font-size: 11px; font-weight: 700; }
.system-portal b { margin-top: 8px; font-size: 20px; }
.system-portal span { margin-top: 5px; color: rgba(255,255,255,.75); font-size: 12px; }
.architecture-connector { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; margin: 22px 0; color: var(--muted); font-size: 11px; }
.architecture-connector i { height: 1px; background: var(--line); }
.business-systems { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.business-systems article { min-height: 154px; padding: 20px 18px; border-top: 3px solid #aeb8cc; background: var(--tint); }
.business-systems article:first-child { border-color: var(--blue); background: var(--blue-soft); }
.business-systems article:nth-child(3) { border-color: #6684ca; }
.business-systems article:nth-child(4), .business-systems article:nth-child(5) { border-color: var(--orange); }
.business-systems small { color: #9aa3b4; font-weight: 700; }
.business-systems h3 { margin-top: 18px; font-size: 18px; }
.business-systems p { margin-top: 12px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.governance-system { display: grid; grid-template-columns: 220px 1fr 280px; gap: 24px; align-items: center; margin-top: 16px; padding: 20px 24px; border-left: 4px solid var(--blue); background: #edf2ff; }
.governance-system small { color: var(--blue); font-size: 11px; font-weight: 700; }
.governance-system h3 { margin-top: 4px; font-size: 17px; }
.governance-system p, .governance-system span { color: var(--muted); font-size: 12px; }
.governance-system span { padding-left: 22px; border-left: 1px solid rgba(49,95,212,.18); }
.backend-operating-model { margin-top: 94px; padding: 58px 54px 46px; border: 1px solid var(--line); background: var(--paper); box-shadow: 0 24px 80px rgba(33,51,91,.06); }
.backend-model-head { display: grid; grid-template-columns: 1fr 410px; gap: 84px; align-items: end; }
.backend-model-head h3 { margin-top: 16px; font-size: 34px; }
.backend-model-head > p { color: var(--muted); }
.governance-layer { display: grid; grid-template-columns: 72px 170px 1fr 94px 250px; gap: 18px; align-items: center; margin-top: 54px; padding: 22px 24px; border-left: 4px solid var(--blue); background: var(--blue-soft); }
.governance-layer span, .governance-layer p, .governance-layer i { color: var(--muted); font-size: 13px; }
.governance-layer span { color: var(--blue); font-weight: 700; }
.governance-layer i { font-style: normal; text-align: center; }
.governance-layer strong { padding: 12px 16px; background: var(--blue); color: #fff; text-align: center; font-size: 14px; }
.business-flow { display: grid; grid-template-columns: 1fr 34px 1fr 34px 1.15fr 34px 1.15fr 34px 1fr; align-items: stretch; margin-top: 34px; }
.business-flow article { display: flex; flex-direction: column; min-height: 154px; padding: 22px 20px; border-top: 3px solid #aeb8cc; background: #f7f8fa; }
.business-flow article.primary { border-color: var(--blue); background: var(--blue-soft); }
.business-flow small, .business-flow span { color: var(--muted); font-size: 12px; }
.business-flow b { margin: 19px 0 6px; font-size: 18px; }
.business-flow span { margin-top: auto; }
.business-flow > i { display: grid; place-items: center; color: #9ca6b9; font-style: normal; }
.flow-feedback { display: flex; gap: 28px; margin-top: 28px; padding: 20px 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.flow-feedback b { flex: 0 0 auto; color: var(--ink); }

.evidence-block { margin-top: 115px; }
.portal-block { display: grid; grid-template-columns: 310px 1fr; gap: 70px; align-items: center; }
.portal-block { margin-top: 76px; }
.foundation-block { display: grid; grid-template-columns: 310px 1fr; gap: 70px; align-items: center; padding: 54px; background: #edf2fa; }
.foundation-block .evidence > button, .foundation-block .evidence-media { height: auto; background: #fff; }
.foundation-block .evidence img { height: auto; object-fit: contain; }
.evidence-copy h3 { margin-top: 16px; font-size: 34px; }
.evidence-copy > p:not(.eyebrow) { margin-top: 24px; color: var(--muted); }
.annotation-list { margin: 28px 0 0; padding: 0; list-style: none; }
.annotation-list li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.annotation-list li b { color: var(--blue); font-size: 12px; }
.decision-proof { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.decision-proof span { padding: 7px 11px; border: 1px solid rgba(49,95,212,.18); border-radius: 999px; background: #fff; color: var(--blue); font-size: 12px; font-weight: 700; }
.name-rule { display: flex; align-items: center; gap: 12px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 14px; }
.name-rule i { width: 1px; height: 18px; background: #c8ceda; }
.name-rule span { color: var(--muted); }
.subsystem-name-proof { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.subsystem-name-proof > small { display: block; margin-top: 8px; color: var(--muted); font-size: 11px; }
.subsystem-name-proof .name-rule { margin-top: 9px; padding-top: 0; border-top: 0; }
.subsystem-header-crop { width: 100%; height: 58px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.subsystem-header-crop img { width: 690px; max-width: none; height: auto; }
.permission-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 30px; }
.permission-switch button { display: grid; gap: 4px; padding: 13px 14px; border: 1px solid var(--line); background: #fff; text-align: left; cursor: pointer; }
.permission-switch button span { color: #9aa3b4; font-size: 11px; font-weight: 700; }
.permission-switch button b { font-size: 13px; }
.permission-switch button[aria-selected="true"] { border-color: rgba(49,95,212,.42); background: var(--blue-soft); color: var(--blue); }
.evidence { overflow: hidden; border: 1px solid var(--line); background: #fff; }
.evidence > button { display: block; width: 100%; padding: 0; overflow: hidden; border: 0; background: transparent; cursor: zoom-in; }
.evidence-media { position: relative; display: block; width: 100%; overflow: hidden; background: transparent; }
.evidence-media[data-zoomable] { cursor: zoom-in; }
.evidence-media[data-zoomable]::after { content: "点击放大"; position: absolute; z-index: 9; right: 14px; bottom: 14px; padding: 6px 10px; border-radius: 999px; background: rgba(17,24,39,.76); color: #fff; font-size: 11px; line-height: 1; opacity: 0; transform: translateY(4px); transition: .2s ease; pointer-events: none; }
.evidence-media[data-zoomable]:hover::after, .evidence-media[data-zoomable]:focus-visible::after { opacity: 1; transform: none; }
.evidence-media[data-zoomable]:focus-visible { outline: 3px solid rgba(49,95,212,.35); outline-offset: 3px; }
.evidence img { width: 100%; height: auto; object-fit: contain; }
.ui-marker { position: absolute; z-index: 3; display: grid; place-items: center; width: 34px; height: 34px; border: 3px solid #fff; border-radius: 50%; background: var(--blue); color: #fff; box-shadow: 0 6px 18px rgba(26,48,99,.28); font-size: 11px; font-style: normal; font-weight: 800; line-height: 1; }
.portal-marker-01 { top: 47%; left: 23%; }
.portal-marker-02 { top: 3%; left: 7%; }
.permission-marker-01 { top: 27%; left: 21%; }
.permission-marker-02 { top: 39%; left: 66%; }
.permission-marker-03 { right: 12%; bottom: 7%; }
.permission-evidence-media[data-permission-mode="role"] .permission-marker-01 { top: 7%; left: 30%; }
.permission-evidence-media[data-permission-mode="role"] .permission-marker-02 { top: 28%; left: 53%; }
.permission-evidence-media[data-permission-mode="role"] .permission-marker-03 { top: 7%; right: 4%; bottom: auto; }
.screen-annotation-key { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); background: #f8faff; }
.screen-annotation-key.two-items { grid-template-columns: repeat(2,1fr); }
.screen-annotation-key span { display: flex; align-items: center; gap: 8px; padding: 11px 13px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.screen-annotation-key span + span { border-left: 1px solid var(--line); }
.screen-annotation-key b { color: var(--blue); }
.evidence figcaption { display: flex; justify-content: space-between; gap: 20px; padding: 15px 18px; border-top: 1px solid var(--line); font-size: 13px; }
.evidence figcaption span { color: var(--muted); }
.subchapter-head { display: grid; grid-template-columns: 1fr 420px; gap: 80px; align-items: end; margin-top: 120px; }
.subchapter-head h3 { margin-top: 16px; font-size: 38px; }
.subchapter-head > p { color: var(--muted); }
.tabs { display: flex; gap: 10px; margin-top: 48px; }
.tabs button { padding: 11px 20px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; }
.tabs button[aria-selected="true"] { border-color: var(--blue); background: var(--blue); color: #fff; }
.flow-area { display: grid; grid-template-columns: 280px 1fr; gap: 46px; margin-top: 28px; align-items: start; }
.flow-steps { display: flex; flex-direction: column; }
.flow-step { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 20px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; }
.flow-step > span { color: #a0a7b5; font-size: 12px; font-weight: 700; }
.flow-step strong, .flow-step small { display: block; }
.flow-step strong { font-size: 17px; }
.flow-step small { margin-top: 5px; color: var(--muted); line-height: 1.55; }
.flow-step[aria-pressed="true"] > span, .flow-step[aria-pressed="true"] strong { color: var(--blue); }
.flow-evidence .evidence img { aspect-ratio: 16/10; object-fit: contain; background: #eef1f6; }
.flow-insight { margin-top: 22px; color: var(--muted); }
.flow-insight strong { color: var(--ink); }
.system-boundary { display: grid; grid-template-columns: .72fr 1.65fr; gap: 60px; margin-top: 92px; padding-top: 42px; border-top: 1px solid var(--line); }
.boundary-intro h3 { margin-top: 14px; font-size: 28px; }
.boundary-flow { display: grid; grid-template-columns: 1fr 130px 1fr; align-items: center; }
.boundary-flow article { min-height: 210px; padding: 28px; border-top: 3px solid var(--blue); background: var(--paper); }
.boundary-flow article.read-only { border-color: var(--orange); }
.boundary-flow small, .boundary-flow b { display: block; }
.boundary-flow small { color: var(--blue); font-weight: 700; }
.boundary-flow .read-only small { color: var(--orange); }
.boundary-flow b { margin-top: 20px; line-height: 1.65; }
.boundary-flow article p { margin-top: 22px; color: var(--muted); font-size: 14px; }
.boundary-flow > i { color: var(--muted); font-style: normal; font-size: 12px; text-align: center; }
.boundary-task-list { display: grid; gap: 7px; margin: 17px 0 0; padding: 0; color: var(--muted); font-size: 12px; list-style: none; counter-reset: boundary-step; }
.boundary-task-list li { display: grid; grid-template-columns: 21px 1fr; gap: 7px; align-items: start; line-height: 1.55; counter-increment: boundary-step; }
.boundary-task-list li::before { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); font-size: 9px; font-weight: 800; content: counter(boundary-step); }
.boundary-flow .read-only .boundary-task-list li::before { background: var(--orange-soft); color: var(--orange); }
.boundary-evidence { grid-column: 1 / -1; margin-top: -18px; }
.boundary-marker-01 { top: 43%; left: 43%; }
.boundary-marker-02 { top: 48%; right: 2.5%; }
.architecture-drawer { margin-top: 82px; }
.architecture-drawer .backend-operating-model { margin: 0 0 36px; padding: 26px 0 10px; border: 0; box-shadow: none; }
.screen-evidence-head { display: grid; grid-template-columns: 1fr 420px; gap: 80px; align-items: end; margin-top: 104px; }
.screen-evidence-head h3 { margin-top: 14px; font-size: 32px; }
.screen-evidence-head > p { color: var(--muted); }
.screen-evidence-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 36px; }
.screen-evidence-grid .evidence > button, .screen-evidence-grid .evidence-media { height: 320px; background: #edf0f5; }
.screen-evidence-grid .evidence img { height: 100%; object-fit: contain; }
.system-coverage { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; margin-top: 80px; padding: 42px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.system-coverage h3 { margin-top: 14px; font-size: 28px; }
.system-coverage > div:last-child > p { color: var(--muted); }
.coverage-logic { display: grid; justify-items: center; margin-top: 24px; }
.coverage-node { position: relative; z-index: 1; width: 100%; padding: 11px 14px; border: 1px solid var(--line); background: #fff; color: var(--muted); font-size: 12px; line-height: 1.45; text-align: center; }
.coverage-foundation, .coverage-quality { width: min(58%,280px); color: var(--ink); font-weight: 700; }
.coverage-foundation { border-color: rgba(49,95,212,.24); background: var(--blue-soft); color: var(--blue); }
.coverage-parallel { position: relative; display: grid; width: 100%; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.coverage-parallel::before { position: absolute; top: -11px; right: 25%; left: 25%; border-top: 1px solid #cbd4e2; content: ""; }
.coverage-parallel .coverage-node::before { position: absolute; top: -11px; left: 50%; height: 10px; border-left: 1px solid #cbd4e2; content: ""; }
.coverage-logic > i { display: block; width: 1px; height: 20px; background: #cbd4e2; }
.coverage-quality { background: #f8f9fb; }
.evidence-drawer { margin-top: 90px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.evidence-drawer summary { display: flex; justify-content: space-between; align-items: center; padding: 26px 0; cursor: pointer; list-style: none; }
.evidence-drawer summary::-webkit-details-marker { display: none; }
.evidence-drawer summary span { display: flex; gap: 18px; color: var(--muted); }
.evidence-drawer summary b { color: var(--ink); }
.evidence-drawer summary > i { color: var(--blue); font-style: normal; font-size: 24px; transition: transform .25s ease; }
.evidence-drawer[open] summary > i { transform: rotate(45deg); }
.expanded-evidence { margin-top: 90px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.expanded-evidence-head { padding: 26px 0 10px; }
.expanded-evidence-head span { display: flex; gap: 18px; color: var(--muted); }
.expanded-evidence-head b { color: var(--ink); }
.drawer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding: 12px 0 36px; }
.drawer-grid.two-columns { grid-template-columns: 1fr 1fr; }
.drawer-grid .evidence > button { height: 210px; background: #edf0f5; }
.drawer-grid .evidence img { height: 100%; object-fit: contain; }

.single-showcase { display: grid; grid-template-columns: 1fr 520px; gap: 100px; align-items: center; min-height: 800px; }
.design-focus-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-bottom: 74px; border: 1px solid rgba(185,83,31,.16); background: rgba(185,83,31,.14); }
.design-focus-rail article { min-height: 190px; padding: 30px; background: rgba(255,255,255,.82); }
.design-focus-rail small, .design-focus-rail b { display: block; }
.design-focus-rail small { color: var(--orange); font-size: 12px; font-weight: 700; }
.design-focus-rail b { margin-top: 26px; font-size: 17px; }
.design-focus-rail p { margin-top: 10px; color: var(--muted); font-size: 14px; }
.showcase-copy { max-width: 470px; }
.status { display: inline-flex; padding: 7px 12px; border-radius: 999px; background: #edf8f1; color: #2e7c50; font-size: 13px; font-weight: 700; }
.status.amber { background: #fff0dd; color: #b66a14; }
.status-row { display: flex; align-items: center; gap: 18px; }
.status-row > button { padding: 6px 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: var(--muted); cursor: pointer; font-size: 13px; }
.manual-hint { color: var(--muted); font-size: 13px; }
.manual-hint::before { content: "•"; margin-right: 8px; color: var(--orange); }
.story-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; margin-top: 42px; }
.story-switch button { display: flex; align-items: center; gap: 13px; padding: 17px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--muted); text-align: left; cursor: pointer; }
.story-switch button span { font-size: 12px; font-weight: 700; }
.story-switch button b { font-size: 15px; }
.story-switch button[aria-selected="true"] { color: var(--orange); border-color: var(--orange); }
.story-description { margin-top: 54px; min-height: 168px; }
.story-description small { color: var(--orange); font-weight: 700; }
.story-description h3 { margin-top: 12px; font-size: 30px; }
.story-description p { margin-top: 14px; color: var(--muted); }
.single-showcase .text-action { display: inline-block; margin-top: 24px; color: var(--orange); }
.interaction-tip { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.phone-stage { display: flex; justify-content: center; align-items: center; min-height: 800px; padding: 32px; background: rgba(255,255,255,.72); }
.static-phone, .live-phone { position: relative; width: 370px; height: auto; overflow: auto; border: 10px solid #1f2330; border-radius: 38px; background: #fff; box-shadow: 0 28px 80px rgba(44,39,54,.16); scrollbar-width: thin; }
.static-phone { aspect-ratio: 750 / 1624; }
.live-phone { aspect-ratio: 390 / 844; }
.static-phone img { width: 100%; height: auto; }
.live-phone { overflow: hidden; --phone-scale: .9; }
.live-phone iframe { width: 390px; height: 844px; border: 0; transform: scale(var(--phone-scale)); transform-origin: top left; pointer-events: none; }
.family-showcase .live-phone iframe { pointer-events: auto; }
.screen-cover { position: absolute; inset: 0; z-index: 2; }
.motion-phone { overflow: hidden; }
.motion-phone #wecom-image { position: relative; z-index: 1; width: 100%; height: auto; will-change: transform; }
.wecom-top-chrome { position: absolute; z-index: 4; top: 0; left: 0; width: 100%; aspect-ratio: 750 / 178; overflow: hidden; background: #fff; box-shadow: 0 7px 18px rgba(18,24,38,.08); }
.wecom-top-chrome img { width: 100%; height: auto; }
.wecom-top-chrome[hidden] { display: none; }
.wecom-action-dock { position: absolute; z-index: 3; left: 0; bottom: 0; width: 100%; aspect-ratio: 750 / 150; background: #fff; }
.wecom-action-dock img { position: absolute; left: 2.13%; bottom: 26.6667%; width: 95.73%; height: auto; box-shadow: 0 -8px 20px rgba(18, 24, 38, .08); }
.wecom-action-dock[hidden] { display: none; }
.figma-wecom-phone { position: relative; width: 370px; aspect-ratio: 750 / 1624; overflow: hidden; background: #f2f1f6; box-shadow: 0 28px 80px rgba(44,39,54,.16); }
.figma-wecom-viewport, .figma-single-canvas, .figma-wecom-scroll { position: absolute; inset: 0; overflow: hidden; }
.figma-single-canvas, .figma-long-canvas { position: relative; width: 100%; }
.figma-wecom-scroll { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.figma-wecom-scroll::-webkit-scrollbar { display: none; }
.figma-wecom-screen { display: block; width: 100%; height: auto; }
.figma-fixed-top, .figma-fixed-bottom { position: absolute; z-index: 4; left: 0; width: 100%; pointer-events: none; background-repeat: no-repeat; background-size: 100% auto; }
.figma-fixed-top { top: 0; height: 10.8374%; background-position: top; }
.figma-fixed-bottom { bottom: 0; height: 9.2365%; background-position: bottom; }
.figma-hotspot { position: absolute; z-index: 8; padding: 0; border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
.figma-hotspot:focus-visible { outline: 3px solid rgba(249,107,2,.78); outline-offset: 2px; }
.hotspot-search { left: 10.1%; top: 53.3%; width: 79.8%; height: 5.5%; }
.hotspot-back { left: 10%; top: 64.4%; width: 38.5%; height: 5.5%; }
.hotspot-confirm { left: 51.5%; top: 64.4%; width: 38.5%; height: 5.5%; }
.hotspot-rebind { left: 79%; top: 8.75%; width: 15%; height: 1.5%; }
.hotspot-history-tab { left: 27%; top: 11%; width: 20%; height: 1.55%; }
.hotspot-profile-tab { left: 3%; top: 26.2%; width: 21%; height: 3.8%; }
.hotspot-add-fixed { left: 25%; bottom: 2.463%; width: 25%; height: 6.773%; }
.hotspot-cancel { left: 4.267%; bottom: 1.478%; width: 44.4%; height: 5.296%; }
.hotspot-save { right: 4.267%; bottom: 1.478%; width: 44.4%; height: 5.296%; }
.wecom-save-toast { position: absolute; z-index: 15; left: 50%; bottom: 12%; width: max-content; max-width: 82%; padding: 9px 13px; border-radius: 999px; background: rgba(30,39,35,.9); color: #fff; font-size: 11px; line-height: 1.3; box-shadow: 0 8px 24px rgba(0,0,0,.18); transform: translateX(-50%); animation: toast-in .22s ease both; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%,8px); } to { opacity: 1; transform: translate(-50%,0); } }
.showcase-note { max-width: 820px; margin: 46px auto 0; color: var(--muted); text-align: center; }
.wecom-data-path { display: flex; justify-content: center; align-items: center; gap: 12px; max-width: 920px; margin: 24px auto 0; color: var(--muted); font-size: 12px; }
.wecom-data-path span { padding: 9px 13px; border: 1px solid #eaded4; border-radius: 999px; background: rgba(255,255,255,.72); color: #463d38; font-weight: 700; }
.wecom-data-path i { color: #b87847; font-style: normal; }
.wecom-data-path i::after { content: " →"; }

.shift-editorial { display: grid; grid-template-columns: .9fr 1.15fr 1fr; gap: 22px; align-items: stretch; margin-bottom: 110px; }
.shift-editorial > div { min-height: 240px; padding: 30px 34px; border-left: 3px solid #b5bdca; background: var(--tint); }
.shift-editorial > div.shift-rationale { border-color: var(--blue); background: #fff; box-shadow: 0 18px 45px rgba(43,53,73,.08); }
.shift-editorial > div:last-child { border-color: var(--orange); background: var(--orange-soft); }
.shift-editorial small, .shift-editorial strong { display: block; }
.shift-editorial small { color: var(--muted); }
.shift-editorial strong { margin-top: 20px; font-size: 20px; }
.shift-editorial p { margin-top: 12px; color: var(--muted); }
.shift-decisions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.shift-decisions span { padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 11px; }
.shift-decisions b { margin-right: 5px; color: var(--blue); }
.shift-decisions span:last-child b { color: var(--orange); }
.compact-shift { margin-bottom: 54px; }
.compact-shift > div { min-height: 0; padding: 26px 30px; }
.compact-shift small { font-size: 12px; }
.compact-shift strong { margin-top: 14px; font-size: 18px; }
.compact-shift p { margin-top: 9px; font-size: 14px; line-height: 1.72; }
.compact-shift .shift-decisions { margin-top: 15px; }
.loop-bridge { display: flex; align-items: center; justify-content: space-between; gap: 36px; margin-bottom: 18px; padding: 18px 22px; border-left: 4px solid #117c79; background: #edf5f3; }
.loop-bridge div { display: flex; align-items: center; gap: 18px; }
.loop-bridge small { color: #4d7774; font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.loop-bridge b { font-size: 15px; }
.loop-bridge > span { flex: 0 0 auto; color: #117c79; font-size: 12px; font-weight: 700; }
.mini-experience-map { margin: 0 0 22px; border: 1px solid #dce8e5; background: #f8fbfa; scroll-margin-top: 90px; }
.mini-map-head { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: end; padding: 34px 38px; border-bottom: 1px solid #dce8e5; background: #fff; }
.mini-map-head h3 { margin-top: 12px; font-size: 28px; line-height: 1.4; }
.mini-map-head > p { color: var(--muted); font-size: 14px; }
.mini-map-layer { display: grid; grid-template-columns: 178px 1fr; border-bottom: 1px solid #dce8e5; }
.mini-map-layer:last-child { border-bottom: 0; }
.mini-map-label { display: flex; flex-direction: column; justify-content: center; padding: 24px 26px; border-right: 1px solid #dce8e5; background: #eef5f3; }
.mini-map-label small { color: #4b8882; font-size: 10px; font-weight: 800; }
.mini-map-label b { margin-top: 7px; font-size: 15px; }
.mini-map-label span { margin-top: 7px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.mini-entry-items, .mini-support-items { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; padding: 20px; }
.mini-entry-items > span, .mini-support-items > span { display: flex; flex-direction: column; justify-content: center; min-height: 72px; padding: 12px 15px; border: 1px solid #dfe7e5; border-radius: 8px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 700; }
.mini-entry-items > span.active { border-color: #6fa9a3; background: #e7f2f0; color: #117c79; }
.mini-entry-items small, .mini-support-items small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; font-weight: 400; line-height: 1.5; }
.mini-core-track { position: relative; display: grid; grid-template-columns: 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr; align-items: center; gap: 6px; padding: 24px 20px 54px; }
.mini-core-track > button { display: flex; flex-direction: column; align-items: flex-start; min-height: 118px; padding: 14px 13px; border: 1px solid #dfe7e5; border-radius: 8px; background: #fff; color: var(--ink); text-align: left; cursor: pointer; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.mini-core-track > button:hover { transform: translateY(-3px); border-color: #8eb8b3; box-shadow: 0 8px 24px rgba(44,91,85,.08); }
.mini-core-track > button.active { border-color: var(--orange); background: #fff8f2; box-shadow: inset 0 3px 0 var(--orange); }
.mini-core-track > button span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #117c79; color: #fff; font-size: 12px; font-weight: 800; }
.mini-core-track > button.active span { background: var(--orange); }
.mini-core-track > button b { margin-top: 11px; font-size: 13px; }
.mini-core-track > button small { margin-top: 5px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.mini-core-track > i { color: #75a7a2; font-style: normal; text-align: center; }
.mini-visual-flow { position: relative; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; padding: 26px 20px 62px; }
.mini-visual-card { position: relative; min-width: 0; padding: 8px 8px 12px; border: 1px solid #dfe7e5; border-radius: 10px; background: #fff; color: var(--ink); cursor: zoom-in; outline: none; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.mini-visual-card:hover, .mini-visual-card:focus-visible { border-color: #78aaa5; box-shadow: 0 12px 28px rgba(44,74,70,.12); transform: translateY(-3px); }
.mini-visual-card:focus-visible .mini-screen-thumb, .mini-visual-card:hover .mini-screen-thumb { border-color: #4b958e; box-shadow: 0 14px 34px rgba(44,74,70,.16); transform: translateY(-3px); }
.mini-visual-card:not(:nth-of-type(5))::after { position: absolute; top: 62px; right: -11px; z-index: 3; color: #75a7a2; font-size: 13px; content: "→"; }
.mini-screen-thumb { position: relative; width: 100%; height: 104px; overflow: hidden; border: 1px solid #dfe7e5; border-radius: 7px; background: #f4f7f6; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.mini-screen-thumb::after { position: absolute; inset: auto 0 0; height: 22px; background: linear-gradient(transparent,rgba(255,255,255,.92)); content: ""; pointer-events: none; }
.mini-screen-thumb iframe { position: absolute; top: -28px; left: 0; display: block; width: 390px; height: 844px; border: 0; pointer-events: none; transform: scale(.4); transform-origin: top left; }
.mini-visual-card:nth-of-type(1) .mini-screen-thumb iframe { top: -54px; }
.mini-visual-card:nth-of-type(2) .mini-screen-thumb iframe { top: -30px; }
.mini-visual-card:nth-of-type(3) .mini-screen-thumb iframe { top: -36px; }
.mini-visual-card:nth-of-type(4) .mini-screen-thumb iframe { top: -46px; }
.mini-visual-card:nth-of-type(5) .mini-screen-thumb iframe { top: -34px; }
.mini-visual-card > span, .mini-visual-card > b, .mini-visual-card > small { display: block; }
.mini-visual-card > span { margin-top: 12px; color: #117c79; font-size: 10px; font-weight: 800; }
.mini-visual-card > b { margin-top: 3px; font-size: 13px; }
.mini-visual-card > small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.mini-visual-card > em { display: block; margin-top: 5px; color: #117c79; font-size: 9px; font-style: normal; font-weight: 700; }
.mini-loopback { position: absolute; right: 20px; bottom: 15px; left: 20px; display: flex; justify-content: space-between; align-items: center; padding-top: 9px; border-top: 1px dashed #9fc1bd; color: #117c79; font-size: 10px; font-weight: 700; }
.mini-loopback i { font-style: normal; }
.teach-learn-contrast { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; margin: 0 0 18px; padding: 14px 20px; border: 1px solid #dbe8e5; background: #fff; color: var(--muted); font-size: 12px; }
.teach-learn-contrast span { display: flex; align-items: center; gap: 9px; }
.teach-learn-contrast span:last-child { justify-content: flex-end; text-align: right; }
.teach-learn-contrast b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #117c79; color: #fff; }
.teach-learn-contrast span:last-child b { background: var(--orange); }
.teach-learn-contrast i { color: #9aa5a2; font-size: 10px; font-style: normal; }
.family-gallery-head { display: grid; grid-template-columns: 1fr .9fr; gap: 80px; align-items: end; margin: 78px 0 22px; padding-top: 42px; border-top: 1px solid var(--line); }
.family-gallery-head h3 { margin-top: 12px; font-size: 32px; }
.family-gallery-head > p { color: var(--muted); }
.learning-map { margin: -62px 0 24px; padding: 42px; background: #f4f7f6; }
.learning-map-head { display: grid; grid-template-columns: 1.2fr .8fr; gap: 80px; align-items: end; }
.learning-map-head h3 { margin-top: 12px; font-size: 28px; line-height: 1.35; }
.learning-map-head > p { color: var(--muted); }
.learning-map-axis { display: flex; align-items: center; gap: 20px; margin: 30px 0 0; padding: 16px 20px; border-left: 4px solid #117c79; background: #e6f0ee; }
.learning-map-axis small { color: #4d7774; }
.learning-map-axis b { font-size: 18px; }
.learning-map-axis span { margin-left: auto; color: #117c79; font-size: 12px; font-weight: 700; }
.learning-map-feedback { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; margin: 18px 0 0; color: #117c79; font-size: 11px; }
.learning-map-feedback span, .learning-map-feedback b { white-space: nowrap; }
.learning-map-feedback i { position: relative; height: 1px; background: #91b8b4; color: transparent; font-size: 0; }
.learning-map-feedback i::before { position: absolute; top: -4px; left: 0; width: 8px; height: 8px; border-bottom: 1px solid #91b8b4; border-left: 1px solid #91b8b4; transform: rotate(45deg); content: ""; }
.module-capabilities { margin-top: 26px; }
.module-capabilities small { color: #117c79; font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.module-capabilities ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.module-capabilities li { padding: 6px 9px; border-radius: 999px; background: #eaf3f1; color: #4d716e; font-size: 11px; }
.module-design-proof { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.module-design-proof small { color: var(--orange); font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.module-design-proof p { margin-top: 10px; color: var(--muted); font-size: 14px; line-height: 1.8; }
.family-showcase { grid-template-columns: 220px 430px minmax(0,1fr); gap: 40px; min-height: 760px; padding: 28px 0 50px; border-bottom: 1px solid var(--line); }
.family-showcase .phone-stage { min-height: 740px; padding: 20px; }
.family-showcase .showcase-copy { max-width: none; }
.wecom-showcase { grid-template-columns: 220px 430px minmax(0,1fr); gap: 40px; min-height: 820px; padding: 28px 0 50px; border-bottom: 1px solid rgba(185,83,31,.16); }
.wecom-showcase .phone-stage { min-height: 800px; padding: 20px; }
.wecom-showcase .showcase-copy { max-width: none; }
.wecom-step-points small, .wecom-showcase .module-design-proof small { color: var(--orange); }
.wecom-step-points li { background: var(--orange-soft); color: #8c552d; }
.family-module-tabs { display: grid; align-content: center; gap: 10px; }
.family-module-tabs button { display: grid; gap: 5px; width: 100%; padding: 16px 17px; border: 1px solid var(--line); border-left: 3px solid transparent; border-radius: 8px; background: #fff; color: var(--muted); text-align: left; cursor: pointer; transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.family-module-tabs button:hover { transform: translateX(3px); }
.family-module-tabs button.active { border-color: rgba(239,122,59,.34); border-left-color: var(--orange); background: var(--orange-soft); color: var(--ink); }
.family-module-tabs span { color: #16847f; font-size: 11px; font-weight: 700; }
.family-module-tabs button.active span { color: var(--orange); }
.family-module-tabs b { font-size: 16px; }
.family-module-tabs em { color: var(--muted); font-size: 11px; font-style: normal; line-height: 1.55; }
.old-evidence { display: grid; grid-template-columns: .8fr 1.4fr .8fr; gap: 50px; align-items: center; padding: 30px 0 50px; }
.old-evidence .evidence > button { height: 320px; background: #f0f1f4; }
.old-evidence .evidence img { height: 100%; object-fit: contain; }
.old-evidence > div p { margin-top: 18px; color: var(--muted); }
.old-evidence .footnote { font-size: 13px; }
.upgrade-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding: 12px 0 38px; }
.upgrade-grid article { padding-top: 24px; border-top: 3px solid var(--orange); }
.upgrade-grid span { color: var(--orange); font-size: 13px; font-weight: 700; }
.upgrade-grid h3 { margin-top: 20px; font-size: 20px; }
.upgrade-grid p { margin-top: 14px; color: var(--muted); font-size: 14px; }
.family-foot { max-width: 760px; margin-top: 28px; color: var(--muted); font-size: 13px; }

.relay-acts { display: grid; grid-template-columns: 1fr 64px 1fr 64px 1fr; align-items: center; }
.relay-acts > article { padding: 28px; background: #fff; }
.relay-acts > article > small { color: var(--blue); font-weight: 700; letter-spacing: .06em; }
.relay-acts > article:nth-of-type(2) > small, .relay-acts > article:nth-of-type(3) > small { color: var(--orange); }
.relay-acts article h3 { margin-top: 14px; }
.relay-acts article > p { min-height: 88px; margin-top: 10px; color: var(--muted); }
.relay-acts article > b { display: block; margin-top: 20px; }
.relay-acts > i { color: var(--blue); font-style: normal; text-align: center; font-size: 23px; }
.relay-acts > i.planned { color: var(--orange); }
.planned-act { border: 1px dashed rgba(239,122,59,.55); }
.act-proof { height: 210px; overflow: hidden; background: #edf0f4; }
.act-proof img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.act-proof.portrait img { object-fit: contain; }
.act-proof iframe { width: 390px; height: 844px; border: 0; transform: scale(.25); transform-origin: top left; pointer-events: none; }
.relay-status { display: flex; justify-content: center; gap: 38px; margin-top: 30px; color: var(--muted); font-size: 13px; }
.relay-status span { display: flex; align-items: center; gap: 10px; }
.relay-acts--compact > article { min-height: 460px; display: flex; flex-direction: column; padding: 34px; border-top: 4px solid var(--blue); }
.relay-acts--compact > article:nth-of-type(2) { border-top-color: var(--orange); }
.relay-acts--compact > article:nth-of-type(3) { border-top: 4px dashed #e6a15b; }
.relay-acts--compact h3 { margin-top: 26px; }
.journey-scene { min-height: 120px; margin-top: 18px; color: var(--muted); }
.relay-acts--compact ol { margin: 22px 0 0; padding: 20px 0 20px 22px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); }
.relay-acts--compact li + li { margin-top: 9px; }
.relay-acts--compact article > b { margin-top: auto; padding-top: 26px; }
.relay-chapter { padding-block: 104px; }
.relay-scenario { display: grid; grid-template-columns: 110px 1fr; align-items: center; max-width: 820px; margin-bottom: 44px; padding: 20px 24px; border-left: 3px solid var(--blue); background: var(--paper); }
.relay-scenario small { color: var(--blue); font-weight: 700; }
.relay-scenario p { color: var(--muted); }
.relay-design-flow { display: grid; grid-template-columns: 1fr 64px 1fr 64px 1fr; align-items: stretch; }
.relay-design-flow article { min-height: 280px; padding: 30px; border-top: 4px solid var(--blue); background: var(--paper); }
.relay-design-flow article:nth-of-type(2) { border-color: var(--orange); }
.relay-design-flow article:nth-of-type(3) { border-top-style: dashed; border-color: #e6a15b; }
.relay-design-flow small { color: var(--blue); font-weight: 700; }
.relay-design-flow article:nth-of-type(n+2) small { color: var(--orange); }
.relay-design-flow h3 { margin-top: 30px; }
.relay-design-flow p { margin-top: 12px; color: var(--muted); }
.relay-design-flow b { display: block; margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; }
.relay-design-flow > i { display: grid; place-items: center; color: var(--blue); font-style: normal; }
.relay-design-flow > i.planned { color: var(--orange); }
#backend { padding-bottom: 82px; }
#wecom { padding-top: 88px; padding-bottom: 82px; }
#family { padding-top: 88px; padding-bottom: 54px; }
#delivery { padding-top: 72px; }

.delivery-line { display: grid; grid-template-columns: 1fr 34px 1fr 34px 1fr 34px 1fr 34px 1fr; align-items: center; }
.delivery-line > div { min-height: 185px; padding: 28px 20px; border-top: 3px solid var(--blue); background: var(--tint); }
.delivery-line > div span { color: var(--blue); font-size: 12px; font-weight: 700; }
.delivery-line > div b, .delivery-line > div p { display: block; }
.delivery-line > div b { margin-top: 24px; }
.delivery-line > div p { margin-top: 9px; color: var(--muted); font-size: 14px; }
.delivery-line > i { color: #a7afbd; font-style: normal; text-align: center; }
.delivery-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; margin-top: 90px; }
.delivery-notes > div { padding-top: 22px; border-top: 1px solid var(--line); }
.delivery-notes p { margin-top: 10px; color: var(--muted); }
.evidence-led-delivery small { display: block; margin-bottom: 16px; color: var(--blue); font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.evidence-led-delivery a { display: inline-block; margin-top: 18px; color: var(--blue); font-size: 12px; font-weight: 700; text-decoration: none; }
.evidence-led-delivery a:hover { text-decoration: underline; }
.timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; padding: 25px 0 45px; }
.timeline time { color: var(--blue); font-weight: 700; }
.timeline h3 { margin-top: 14px; font-size: 17px; }
.timeline p { margin-top: 8px; color: var(--muted); font-size: 14px; }
.outcome-head { display: grid; grid-template-columns: 1fr .9fr; gap: 96px; align-items: end; margin-top: 72px; padding-top: 52px; border-top: 1px solid var(--line); }
.outcome-head h3 { margin-top: 14px; font-size: 38px; }
.outcome-head > p:last-child { color: var(--muted); }
.outcome-head + .result-strip { margin-top: 44px; }

.result-strip { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.result-strip article { padding: 50px 42px 52px 0; }
.result-strip article + article { padding-left: 42px; border-left: 1px solid var(--line); }
.result-strip strong { font-size: 54px; line-height: 1; color: var(--blue); letter-spacing: -.05em; }
.result-strip span { display: block; margin-top: 8px; font-size: 18px; font-weight: 700; }
.result-strip p { min-height: 95px; margin-top: 26px; color: var(--muted); }
.result-strip b { color: var(--blue); font-size: 13px; }
.result-strip article:nth-child(2) strong, .result-strip article:nth-child(2) b { color: var(--orange); }
.result-strip article:nth-child(3) strong { color: #d98831; }
.result-strip article:nth-child(3) b { color: #9c5b20; }
.end-statement { max-width: 820px; margin: 105px auto 0; text-align: center; }
.end-statement h3 { margin-top: 18px; font-size: clamp(40px, 5vw, 62px); line-height: 1.3; }
.end-statement > p:last-child { margin-top: 30px; color: var(--muted); font-size: 18px; }
.result-footnote { margin-top: 70px; font-size: 13px; text-align: center; }
.related { display: flex; justify-content: space-between; align-items: center; margin-top: 70px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.related a { color: var(--blue); font-weight: 700; text-decoration: none; }

#image-viewer { width: min(94vw, 1500px); max-width: none; height: 92vh; padding: 0; border: 0; background: #f5f6f8; }
#image-viewer[open] { display: grid; grid-template-rows: 86px 1fr; }
#image-viewer::backdrop { background: rgba(14,18,28,.76); backdrop-filter: blur(5px); }
#image-viewer > header { display: flex; justify-content: space-between; align-items: center; height: 86px; padding: 0 28px; border-bottom: 1px solid var(--line); background: #fff; }
#image-viewer h3 { margin-top: 2px; font-size: 18px; }
.viewer-actions { display: flex; gap: 10px; }
.viewer-actions button { padding: 9px 14px; border: 1px solid var(--line); background: #fff; cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.viewer-actions button[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); }
.viewer-scroll { height: calc(92vh - 86px); overflow: auto; padding: 28px; text-align: center; }
.viewer-scroll img { width: 100%; height: auto; margin: 0 auto; object-fit: contain; }
.viewer-scroll.is-original img { width: auto; max-width: none; }

#mini-flow-viewer { width: min(900px, 92vw); max-width: none; height: min(900px, 92vh); padding: 0; border: 0; border-radius: 18px; background: #f4f7f6; overflow: hidden; }
#mini-flow-viewer[open] { display: grid; grid-template-rows: 76px 1fr; }
#mini-flow-viewer::backdrop { background: rgba(14,18,28,.76); backdrop-filter: blur(5px); }
#mini-flow-viewer > header { display: flex; justify-content: space-between; align-items: center; padding: 0 26px; border-bottom: 1px solid #dce8e5; background: #fff; }
#mini-flow-viewer > header small { color: #117c79; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
#mini-flow-viewer > header h3 { margin-top: 2px; font-size: 18px; }
#mini-flow-viewer > header button { padding: 8px 14px; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.mini-flow-dialog-body { display: grid; grid-template-columns: 430px 1fr; gap: 44px; align-items: center; min-height: 0; padding: 28px 48px; overflow: auto; }
.mini-flow-phone { box-sizing: content-box; width: 390px; height: min(730px, calc(92vh - 132px)); overflow-x: hidden; overflow-y: auto; border: 10px solid #1f2330; border-radius: 38px; background: #fff; box-shadow: 0 26px 70px rgba(31,45,55,.2); scrollbar-width: thin; }
.mini-flow-phone iframe { display: block; width: 390px; height: 844px; border: 0; }
.mini-flow-dialog-body aside { align-self: center; }
.mini-flow-dialog-body aside > span { color: #117c79; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.mini-flow-dialog-body aside h3 { margin-top: 18px; font-size: 30px; }
.mini-flow-dialog-body aside p { margin-top: 16px; color: var(--muted); line-height: 1.8; }
.mini-flow-dialog-body aside small { display: block; margin-top: 28px; padding-top: 18px; border-top: 1px solid #dce8e5; color: #117c79; }

@media (max-width: 1360px) and (min-width: 1241px) {
  .family-showcase, .wecom-showcase { grid-template-columns: 190px 400px minmax(0,1fr); gap: 26px; }
  .family-module-tabs button { padding: 14px 13px; }
  .story-description { margin-top: 42px; }
  .story-description h3 { font-size: 27px; }
  .phone-stage { padding-inline: 15px; }
  .mini-screen-thumb iframe { transform: scale(.35); }
}

@media (max-width: 1240px) {
  .portfolio-case { --portfolio-content-width: min(1080px, calc(100vw - 128px)); }
  .arch-index { top: 72px; right: 24px; left: 24px; flex-direction: row; justify-content: center; gap: 6px; overflow-x: auto; transform: none; scrollbar-width: none; }
  .arch-index::-webkit-scrollbar { display: none; }
  .arch-index a { flex: 0 0 auto; min-width: 0; }
  .chapter, .hero { scroll-margin-top: 126px; }
  .wrap { width: min(var(--max), calc(100% - 64px)); }
  .hero-route { grid-template-columns: 1fr 50px 1fr 50px 1fr; }
  .service-map { grid-template-columns: 1fr 70px 1fr 70px 1fr; }
  .single-showcase { grid-template-columns: 1fr 470px; gap: 60px; }
  .family-showcase { grid-template-columns: 200px 390px minmax(0,1fr); gap: 32px; }
  .wecom-showcase { grid-template-columns: 200px 390px minmax(0,1fr); gap: 32px; }
}

@media (max-width: 900px) {
  .portfolio-case { --portfolio-content-width: min(720px, calc(100vw - 40px)); --portfolio-h1-size: 46px; --portfolio-h2-size: 40px; }
  .version-label { display: none; }
  .arch-index { justify-content: flex-start; }
  .wrap { width: min(100% - 40px, 720px); }
  .hero { min-height: auto; padding-top: 150px; }
  .hero h1 { font-size: clamp(44px, 12vw, 68px); }
  .hero-meta { grid-template-columns: 1fr 1fr; }
  .hero-meta div:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .hero-meta div:nth-child(4) { border-top: 1px solid var(--line); }
  .hero-route, .service-map, .evolution-line { grid-template-columns: 1fr; }
  .hero-route > i, .service-transfer, .evolution-line > i { padding: 12px 0; transform: rotate(90deg); }
  .hero-note { justify-content: flex-start; }
  .role-boundary, .solution-bridge, .system-coverage, .outcome-head, .case-framing, .screen-evidence-head { grid-template-columns: 1fr; gap: 24px; }
  .role-boundary p { display: grid; grid-template-columns: 74px 1fr; }
  .solution-bridge { align-items: start; margin-top: 82px; }
  .chapter { padding: 96px 0; }
  #backend { padding-bottom: 76px; }
  #wecom { padding-top: 76px; padding-bottom: 76px; }
  #family { padding-top: 84px; padding-bottom: 76px; }
  #delivery { padding-top: 84px; }
  .chapter-head { margin-bottom: 70px; }
  .problem-editorial { grid-template-columns: 1fr; gap: 60px; }
  .origin-facts { gap: 36px; }
  .service-stage { min-height: 250px; }
  .flow-lane { grid-template-columns: 1fr; }
  .lane-label { flex-direction: row; justify-content: flex-start; align-items: center; padding: 17px 20px; border-right: 0; border-bottom: 1px solid var(--line); }
  .lane-track { grid-template-columns: 1fr; gap: 0; }
  .lane-track > i, .platform-track > i { padding: 8px 0; transform: rotate(90deg); }
  .service-track .lane-spacer, .service-track .lane-spacer + i { display: none; }
  .platform-track { grid-template-columns: 1fr; }
  .platform-base { flex-direction: column; gap: 4px; }
  .business-systems { grid-template-columns: 1fr 1fr; }
  .governance-system { grid-template-columns: 1fr; gap: 10px; }
  .governance-system span { padding: 12px 0 0; border-top: 1px solid rgba(49,95,212,.18); border-left: 0; }
  .stage-kicker { margin-bottom: 72px; }
  .portal-block, .foundation-block, .subchapter-head, .flow-area, .single-showcase, .backend-model-head { grid-template-columns: 1fr; }
  .portal-block { gap: 44px; }
  .foundation-block { gap: 44px; }
  .backend-model-head { gap: 24px; }
  .governance-layer { grid-template-columns: 80px 1fr; }
  .governance-layer p { grid-column: 2; }
  .governance-layer i { grid-column: 1 / -1; padding: 4px 0; }
  .governance-layer strong { grid-column: 1 / -1; }
  .business-flow { grid-template-columns: 1fr; gap: 0; }
  .business-flow > i { padding: 8px 0; transform: rotate(90deg); }
  .business-flow article { min-height: 124px; }
  .flow-feedback { flex-direction: column; gap: 8px; }
  .subchapter-head { gap: 24px; }
  .flow-area { gap: 30px; }
  .flow-steps { display: grid; grid-template-columns: repeat(3, 1fr); }
  .flow-step { grid-template-columns: 1fr; padding-right: 16px; }
  .drawer-grid { grid-template-columns: 1fr; }
  .drawer-grid.two-columns { grid-template-columns: 1fr; }
  .system-boundary { grid-template-columns: 1fr; }
  .screen-evidence-grid { grid-template-columns: 1fr; }
  .system-coverage { gap: 30px; margin-top: 64px; }
  .single-showcase { min-height: auto; gap: 60px; }
  .family-showcase, .wecom-showcase { grid-template-columns: 1fr; }
  .family-module-tabs { grid-template-columns: repeat(5,1fr); gap: 8px; }
  .family-module-tabs button { padding: 14px 12px; }
  .wecom-showcase .phone-stage { min-height: auto; }
  .showcase-copy { max-width: none; }
  .phone-stage { min-height: auto; }
  .shift-editorial { grid-template-columns: 1fr; gap: 18px; }
  .shift-editorial > div { min-height: auto; }
  .mini-map-head, .mini-map-layer { grid-template-columns: 1fr; }
  .mini-map-label { border-right: 0; border-bottom: 1px solid #dce8e5; }
  .mini-visual-flow { grid-template-columns: repeat(5,minmax(112px,1fr)); }
  .mini-screen-thumb iframe { transform: scale(.34); }
  .mini-visual-card:not(:nth-of-type(5))::after { top: 62px; }
  .loop-bridge { align-items: flex-start; flex-direction: column; gap: 8px; }
  .loop-bridge div { align-items: flex-start; flex-direction: column; gap: 4px; }
  .learning-map-head { grid-template-columns: 1fr; gap: 18px; }
  .learning-map-axis { align-items: flex-start; flex-direction: column; gap: 5px; }
  .learning-map-axis span { margin-left: 0; }
  .old-evidence { grid-template-columns: 1fr; }
  .upgrade-grid { grid-template-columns: 1fr; gap: 22px; }
  .design-focus-rail article { padding: 24px 20px; }
  .relay-acts { grid-template-columns: 1fr; gap: 18px; }
  .relay-acts > i { transform: rotate(90deg); }
  .relay-acts--compact > article { min-height: auto; }
  .delivery-line { grid-template-columns: 1fr; gap: 10px; }
  .delivery-line > div { min-height: 150px; }
  .delivery-line > i { transform: rotate(90deg); }
  .delivery-notes { grid-template-columns: 1fr; gap: 28px; }
  .timeline { grid-template-columns: 1fr 1fr; }
  .wecom-data-path { flex-wrap: wrap; }
  .result-strip { grid-template-columns: 1fr; }
  .result-strip article, .result-strip article + article { padding: 42px 0; border-left: 0; border-top: 1px solid var(--line); }
  .result-strip article:first-child { border-top: 0; }
  .result-strip p { min-height: auto; }
  .outcome-head { align-items: start; margin-top: 84px; }
}

@media (max-width: 560px) {
  .portfolio-case { --portfolio-content-width: calc(100vw - 30px); --portfolio-h1-size: 40px; --portfolio-h2-size: 34px; }
  .wrap { width: min(100% - 30px, 520px); }
  .arch-index { top: 66px; right: 15px; left: 15px; padding: 6px; }
  .arch-index a { padding: 6px 8px; font-size: 11px; }
  .chapter, .hero { scroll-margin-top: 118px; }
  .hero { padding-top: 125px; padding-bottom: 80px; }
  .hero h1 { font-size: 42px; }
  .hero-lead { font-size: 17px; }
  .hero-meta { margin-top: 52px; }
  .hero-meta div, .hero-meta div + div { padding: 16px 12px; }
  .hero-route { margin-top: 60px; }
  .hero-route > div { min-height: 138px; }
  .role-boundary { gap: 12px; font-size: 13px; }
  .role-boundary p { grid-template-columns: 68px 1fr; gap: 8px; }
  .chapter { padding: 78px 0; }
  #backend { padding-bottom: 64px; }
  #wecom { padding-top: 64px; padding-bottom: 64px; }
  #family { padding-top: 72px; padding-bottom: 64px; }
  #delivery { padding-top: 72px; }
  .chapter h2 { font-size: 38px; }
  .chapter-head .intro { font-size: 16px; }
  .problem-editorial blockquote { font-size: 24px; }
  .solution-bridge { margin-top: 68px; padding-top: 38px; }
  .solution-bridge h3 { font-size: 28px; }
  .origin-facts { grid-template-columns: 1fr; margin-top: 80px; }
  .origin-facts strong { font-size: 76px; }
  .service-stage { padding: 28px; }
  .ecosystem-flow { margin-inline: -1px; }
  .lane-track, .platform-flow { padding: 18px; }
  .flow-legend { align-items: flex-start; flex-direction: column; gap: 10px; }
  .portal-entry { align-items: flex-start; flex-direction: column; gap: 3px; }
  .system-architecture { padding: 24px 18px; }
  .system-portal { padding: 22px 18px; }
  .business-systems { grid-template-columns: 1fr; }
  .case-framing > div { min-height: auto; padding: 28px 24px; }
  .evolution-line article { min-height: 230px; }
  .architecture-actions { align-items: flex-start; flex-direction: column; }
  .backend-operating-model { margin-top: 72px; padding: 38px 24px 30px; }
  .backend-model-head h3 { font-size: 28px; }
  .governance-layer { margin-top: 40px; padding: 20px; }
  .flow-feedback { padding-inline: 0; }
  .evidence-block, .subchapter-head { margin-top: 84px; }
  .foundation-block { padding: 32px 24px; }
  .foundation-block .evidence > button { height: auto; }
  .screen-annotation-key { grid-template-columns: 1fr; }
  .screen-annotation-key span + span { border-top: 1px solid var(--line); border-left: 0; }
  .ui-marker { width: 30px; height: 30px; font-size: 10px; }
  .subchapter-head h3 { font-size: 30px; }
  .flow-steps { grid-template-columns: 1fr; }
  .evidence-drawer summary span, .expanded-evidence-head span { flex-direction: column; gap: 2px; }
  .story-switch { grid-template-columns: 1fr; }
  .family-module-tabs { grid-template-columns: 1fr 1fr; }
  .story-description { margin-top: 40px; }
  .phone-stage { padding: 24px 10px; }
  .static-phone, .live-phone, .figma-wecom-phone { width: min(350px, calc(100vw - 56px)); height: auto; }
  .system-boundary { grid-template-columns: 1fr; margin-top: 72px; }
  .boundary-flow { grid-template-columns: 1fr; gap: 0; }
  .boundary-flow > i { padding: 12px 0; transform: rotate(90deg); }
  .design-focus-rail { grid-template-columns: 1fr; }
  .design-focus-rail article { min-height: auto; }
  .learning-map { margin-top: -52px; padding: 34px 20px 28px; }
  .mini-map-head { gap: 20px; padding: 26px 22px; }
  .mini-entry-items, .mini-support-items { grid-template-columns: 1fr 1fr; }
  .mini-visual-flow { justify-content: start; overflow-x: auto; }
  .learning-map-feedback { grid-template-columns: 1fr; text-align: center; }
  .learning-map-feedback i { width: 1px; height: 26px; margin: auto; }
  .loop-bridge { padding: 16px 18px; }
  .screen-evidence-head { margin-top: 80px; }
  .screen-evidence-grid .evidence > button, .screen-evidence-grid .evidence-media { height: auto; }
  .relay-scenario { grid-template-columns: 1fr; gap: 6px; }
  .relay-design-flow { grid-template-columns: 1fr; }
  .relay-design-flow > i { padding: 12px 0; transform: rotate(90deg); }
  .system-coverage { margin-top: 56px; padding: 34px 0; }
  .relay-status { flex-direction: column; align-items: center; gap: 12px; }
  .timeline { grid-template-columns: 1fr; }
  .wecom-data-path { align-items: stretch; flex-direction: column; text-align: center; }
  .wecom-data-path i::after { content: " ↓"; }
  .result-strip strong { font-size: 46px; }
  .end-statement { margin-top: 110px; }
  .related { align-items: flex-start; flex-direction: column; gap: 15px; }
  .portfolio-footer__inner { flex-direction: column; align-items: flex-start; gap: 8px; }
  .portfolio-footer__meta { text-align: left; }
}






/* v0.2 portfolio edit: lead with visible design evidence and reduce explanatory weight. */
.hero { min-height: 100vh; padding-top: clamp(120px, 13vh, 160px); padding-bottom: 74px; }
.hero-intro { display: grid; grid-template-columns: .84fr 1.16fr; gap: 74px; align-items: center; }
.hero-copy { max-width: 560px; }
.hero h1 { font-size: clamp(54px, 5.1vw, 76px); }
.hero-lead { max-width: 560px; margin-top: 28px; font-size: 18px; }
.hero-meta { grid-template-columns: repeat(3, 1fr); margin-top: 46px; }
.hero-meta div { padding: 16px 16px 16px 0; }
.hero-meta div + div { padding-left: 16px; }
.hero-proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 286px 230px; gap: 14px; min-height: 530px; }
.hero-proof-card { position: relative; display: block; min-width: 0; overflow: hidden; border: 1px solid rgba(32,48,83,.11); background: #fff; color: var(--ink); text-decoration: none; box-shadow: 0 24px 70px rgba(31,50,91,.11); transition: transform .28s ease, box-shadow .28s ease; }
.hero-proof-card:hover { z-index: 5; transform: translateY(-6px); box-shadow: 0 38px 100px rgba(31,50,91,.19); }
.hero-proof-card > span { position: absolute; inset: auto 0 0; z-index: 2; display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; padding: 16px 18px; background: rgba(255,255,255,.94); backdrop-filter: blur(12px); }
.hero-proof-card small { color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.hero-proof-card b { grid-column: 1; font-size: 14px; }
.hero-proof-card em { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: #397b58; font-size: 10px; font-style: normal; font-weight: 800; }
.hero-proof-media { height: 100%; overflow: hidden; background: #eef2f8; }
.hero-proof-media img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.hero-proof-card--backend { grid-column: 1 / -1; }
.hero-proof-card--backend .hero-proof-media { padding: 12px 12px 62px; }
.hero-proof-card--backend img { object-fit: contain; }
.hero-proof-card--wecom { grid-column: 1; }
.hero-proof-card--wecom .hero-proof-media { padding: 0 34px 60px; background: linear-gradient(150deg,#eef4ff,#f8fafc); }
.hero-proof-card--wecom .hero-proof-media img { object-fit: cover; object-position: top; border: 1px solid rgba(29,47,77,.1); border-radius: 12px 12px 0 0; box-shadow: 0 12px 30px rgba(29,47,77,.12); }
.hero-proof-card--wecom small { color: var(--orange); }
.hero-proof-card--family { grid-column: 2; }
.hero-proof-card--family .hero-proof-media { padding-bottom: 60px; background: linear-gradient(150deg,#fff7ed,#fff); }
.hero-proof-card--family small { color: #bc762b; }
.hero-proof-card--family em { color: #a96d2f; }
.hero-proof-media--mini { display: flex; justify-content: center; align-items: flex-start; overflow: hidden; }
.hero-proof-media--mini iframe { flex: 0 0 390px; width: 390px; height: 844px; border: 0; transform: scale(.48); transform-origin: top center; pointer-events: none; }
.role-boundary { grid-template-columns: .9fr .9fr 1.2fr; gap: 32px; margin-top: 54px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 13px; }
.role-boundary .design-split { grid-column: auto; padding-top: 0; border-top: 0; }
.hero-task-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 36px; border: 1px solid var(--line); background: var(--line); }
.hero-task-summary article { min-height: 132px; padding: 22px 24px; background: #fff; }
.hero-task-summary small, .hero-task-summary strong, .hero-task-summary span { display: block; }
.hero-task-summary small { color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.hero-task-summary article:nth-child(2) small { color: var(--orange); }
.hero-task-summary article:nth-child(3) small { color: #b8752e; }
.hero-task-summary strong { margin-top: 12px; font-size: 17px; }
.hero-task-summary span { margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.65; }

.design-case-label { display: grid; grid-template-columns: 92px 280px 1fr; gap: 24px; align-items: center; margin-top: 72px; margin-bottom: 24px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.design-case-label > span { color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.design-case-label b { font-size: 17px; }
.design-case-label p { color: var(--muted); font-size: 13px; }
.design-case-label + .evidence-block { margin-top: 0; }
.architecture-note { margin: 30px 0 0; padding: 18px 22px; border-left: 3px solid var(--blue); background: rgba(255,255,255,.72); color: var(--muted); font-size: 13px; }
.architecture-note b { color: var(--ink); }
#backend .chapter-head { margin-bottom: 52px; }
#backend .case-framing { margin-bottom: 44px; }
#backend .evolution-line article { min-height: 254px; }
#backend .evolution-line--phase-one { grid-template-columns: minmax(0,1fr) 72px minmax(0,1fr); }
#backend .evolution-line article:nth-of-type(1) { border-color: rgba(54,102,214,.28); background: #f7f9ff; }
#backend .evolution-line article:nth-of-type(2) { position: relative; z-index: 1; border: 2px solid var(--blue); background: #eef3ff; box-shadow: 0 14px 34px rgba(54,102,214,.12); }
#backend .evolution-line article:nth-of-type(2) small,
#backend .evolution-line article:nth-of-type(2) strong { color: var(--blue); }
#backend .evolution-line > i { position: relative; height: 2px; background: var(--blue); color: transparent; font-size: 0; }
#backend .evolution-line > i::after { content: ""; position: absolute; top: 50%; right: 0; width: 9px; height: 9px; border-top: 2px solid var(--blue); border-right: 2px solid var(--blue); transform: translateY(-50%) rotate(45deg); }
.backend-phase-head { display: grid; grid-template-columns: 82px auto 1fr; gap: 18px; align-items: center; margin-bottom: 24px; }
.backend-phase-head::after { height: 1px; background: var(--line); content: ""; }
.backend-phase-head small { color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.backend-phase-head h3 { font-size: 18px; line-height: 1.4; }
.backend-phase--two { margin-top: 84px; padding-top: 40px; border-top: 1px solid var(--line); }
.backend-phase-transition { margin-bottom: 14px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.phase-structure-summary { display: grid; grid-template-columns: 220px 180px minmax(0,1fr); gap: 30px; align-items: center; min-height: 154px; padding: 26px 32px; border: 1px solid #d9dee8; border-top: 3px solid rgba(54,102,214,.62); background: #f6f7fa; }
.phase-structure-summary small { color: var(--muted); font-size: 12px; }
.phase-structure-summary strong { color: var(--blue); font-size: 52px; line-height: 1; letter-spacing: -.06em; }
.phase-structure-summary span { display: block; font-weight: 700; }
.phase-structure-summary p { margin-top: 10px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.real-project-evidence { margin-top: 28px; padding: 18px 20px 20px; border: 1px solid var(--line); background: rgba(255,255,255,.72); }
.real-evidence-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.real-evidence-head div { flex: 0 0 auto; }
.real-evidence-head small, .real-evidence-head b { display: block; }
.real-evidence-head small { color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.real-evidence-head b { margin-top: 4px; font-size: 14px; }
.real-evidence-head p { max-width: 720px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.real-evidence-grid { display: grid; grid-template-columns: minmax(0,.48fr) minmax(0,1fr); gap: 16px; margin-top: 16px; }
.real-evidence-item { min-width: 0; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.real-evidence-item figcaption { display: flex; align-items: baseline; gap: 10px; min-height: 42px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.real-evidence-item figcaption small { color: var(--blue); font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.real-evidence-item figcaption strong { font-size: 12px; }
.real-evidence-media { height: 264px; overflow: hidden; background: #f4f6f9; }
.real-evidence-media img { display: block; width: 100%; height: 100%; }
.real-evidence-item--original img { object-fit: contain; }
.real-evidence-item--implementation img { object-fit: cover; object-position: left top; }
#backend .portal-block { margin-top: 0; }
#backend .foundation-block { padding: 46px; }
#backend .subchapter-head { margin-top: 78px; }
#backend .system-boundary { margin-top: 60px; }
#backend .system-coverage { margin-top: 58px; }

.delivery-process { padding: 38px; border: 1px solid var(--line); background: var(--tint); }
.delivery-process-head { display: grid; grid-template-columns: 1fr .9fr; gap: 90px; align-items: end; }
.delivery-process-head h3 { margin-top: 12px; font-size: 32px; }
.delivery-process-head > p { color: var(--muted); font-size: 14px; line-height: 1.85; }
#delivery .delivery-notes { gap: 1px; margin-top: 34px; border: 1px solid var(--line); background: var(--line); }
#delivery .delivery-notes > div { position: relative; min-height: 206px; padding: 26px 28px; border-top: 3px solid var(--blue); background: #fff; }
#delivery .delivery-notes > div:not(:last-child)::after { position: absolute; z-index: 2; top: 50%; right: -10px; display: grid; width: 19px; height: 19px; place-items: center; border: 1px solid #d9dfeb; border-radius: 50%; background: #fff; color: var(--blue); font-size: 10px; line-height: 1; content: "→"; transform: translateY(-50%); }
#delivery .delivery-notes b { display: block; font-size: 17px; line-height: 1.55; }
#delivery .delivery-notes p { font-size: 13px; line-height: 1.75; }
.compact-timeline { display: grid; grid-template-columns: 122px minmax(0,1fr); gap: 24px; align-items: start; margin-top: 24px; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.compact-timeline > header small, .compact-timeline > header b { display: block; }
.compact-timeline > header small { color: var(--blue); font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.compact-timeline > header b { margin-top: 2px; font-size: 13px; }
.compact-timeline-track { display: grid; grid-template-columns: minmax(0,1fr) 24px minmax(0,1fr) 24px minmax(0,1fr) 24px minmax(0,1fr) 24px minmax(0,1fr); column-gap: 8px; align-items: center; }
.compact-timeline span { color: var(--muted); font-size: 11px; }
.compact-timeline span b { display: block; color: var(--blue); font-size: 10px; }
.compact-timeline i { color: #a7afbd; font-style: normal; text-align: center; }
.result-strip--impact article { padding-top: 38px; }
.result-strip--impact article > small { display: block; margin-bottom: 18px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.result-strip--impact strong { font-size: 40px; }
.result-strip--impact p { min-height: 116px; margin-top: 20px; }
.result-footnote { margin-top: 42px; }
.related { margin-top: 46px; }

@media (min-width: 1600px) {
  .hero-intro { grid-template-columns: .78fr 1.22fr; gap: 92px; }
  .hero-proof { grid-template-rows: 310px 250px; min-height: 574px; }
  .hero-proof-media--mini iframe { transform: scale(.53); }
}

@media (max-width: 1240px) {
  .hero-intro { grid-template-columns: 1fr; }
  .hero-copy { max-width: 780px; }
  .hero-proof { min-height: 530px; }
  .role-boundary, .hero-task-summary { grid-template-columns: 1fr; }
  .role-boundary .design-split { grid-column: auto; }
  .design-case-label { grid-template-columns: 80px 1fr; }
  .design-case-label p { grid-column: 2; }
  .delivery-process-head, .outcome-head { grid-template-columns: 1fr; gap: 24px; }
  .compact-timeline { grid-template-columns: 1fr; gap: 14px; }
  .compact-timeline-track { grid-template-columns: minmax(0,1fr) 24px minmax(0,1fr) 24px minmax(0,1fr) 24px minmax(0,1fr) 24px minmax(0,1fr); column-gap: 8px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Service blueprint: customer journey first, product touchpoints second. */
.service-blueprint { overflow: hidden; border: 1px solid var(--line); background: #fff; box-shadow: 0 24px 80px rgba(33,51,91,.07); }
.blueprint-head { display: grid; grid-template-columns: minmax(0,1fr) max-content; gap: 60px; align-items: end; padding: 30px 34px; border-bottom: 1px solid var(--line); }
.blueprint-head small, .blueprint-head b { display: block; }
.blueprint-head small { color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.blueprint-head b { margin-top: 8px; font-size: 20px; }
.blueprint-head p { color: var(--muted); font-size: 13px; line-height: 1.7; white-space: nowrap; }
.journey-strip { display: grid; grid-template-columns: 208px 1fr; border-bottom: 1px solid var(--line); background: #f8f9fc; }
.blueprint-side-label { display: flex; flex-direction: column; justify-content: center; padding: 28px 28px; border-right: 1px solid var(--line); }
.blueprint-side-label span { font-size: 15px; font-weight: 800; }
.blueprint-side-label small { margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.journey-strip ol { position: relative; display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); margin: 0; padding: 25px 18px 24px; list-style: none; }
.journey-strip ol::before { position: absolute; top: 41px; right: 8.6%; left: 8.6%; height: 1px; background: #cfd7e6; content: ""; }
.journey-strip li { position: relative; z-index: 1; min-width: 0; padding: 0 9px; text-align: center; }
.journey-strip li i { display: grid; width: 33px; height: 33px; margin: 0 auto 15px; place-items: center; border: 1px solid #cfd7e6; border-radius: 50%; background: #fff; color: var(--blue); font-size: 9px; font-style: normal; font-weight: 800; }
.journey-strip li b, .journey-strip li span { display: block; }
.journey-strip li b { font-size: 13px; }
.journey-strip li span { margin-top: 6px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.touchpoint-map { background: #fff; }
.touchpoint-row { display: grid; grid-template-columns: 208px 1fr; min-height: 132px; border-bottom: 1px solid var(--line); }
.touchpoint-row > header { display: flex; flex-direction: column; justify-content: center; padding: 24px 28px; border-right: 1px solid var(--line); }
.touchpoint-row > header small { color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.touchpoint-row > header b { margin-top: 7px; font-size: 15px; }
.touchpoint-row > header span { margin-top: 6px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.touchpoint-track { position: relative; display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 8px; align-items: center; padding: 20px 18px; background-image: repeating-linear-gradient(90deg,transparent 0,transparent calc(16.666% - 1px),rgba(221,226,236,.68) calc(16.666% - 1px),rgba(221,226,236,.68) 16.666%); }
.touchpoint-track article { position: relative; z-index: 1; min-width: 0; min-height: 82px; padding: 15px 14px; border-top: 3px solid var(--blue); background: #eef3ff; }
.touchpoint-track article small, .touchpoint-track article b, .touchpoint-track article span { display: block; }
.touchpoint-track article small { color: var(--blue); font-size: 9px; font-weight: 800; }
.touchpoint-track article b { margin-top: 8px; font-size: 12px; line-height: 1.35; }
.touchpoint-track article span { margin-top: 7px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.touchpoint-track .at-2 { grid-column: 2; }
.touchpoint-track .at-3 { grid-column: 3; }
.touchpoint-track .at-4 { grid-column: 4; }
.touchpoint-track .at-5 { grid-column: 5; }
.touchpoint-track .at-4.span-2 { grid-column: 4 / span 2; }
.touchpoint-track .at-5.span-2 { grid-column: 5 / span 2; }
.touchpoint-row--wecom > header small { color: var(--orange); }
.touchpoint-row--wecom .touchpoint-track article { border-color: var(--orange); background: #fff3e9; }
.touchpoint-row--wecom .touchpoint-track article small { color: #c85b09; }
.touchpoint-row--family > header small { color: #117c79; }
.touchpoint-row--family .touchpoint-track article { border: 1px solid #b8d6d2; border-top: 3px solid #178f88; background: #edf8f6; }
.touchpoint-row--family .touchpoint-track article small { color: #117c79; }
.blueprint-foundation { display: grid; grid-template-columns: 150px 110px 34px 250px 1fr; gap: 14px; align-items: center; min-height: 72px; padding: 15px 28px; background: #172641; color: #fff; }
.blueprint-foundation > span { color: #91a5c8; font-size: 10px; font-weight: 800; letter-spacing: .06em; }
.blueprint-foundation b { font-size: 12px; }
.blueprint-foundation i { height: 1px; background: #526683; }
.blueprint-foundation p { color: #aebbd0; font-size: 10px; line-height: 1.5; }
.blueprint-decisions { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin-top: 18px; border: 1px solid var(--line); background: var(--line); }
.blueprint-decisions article { display: grid; grid-template-columns: 38px 1fr; gap: 14px; min-height: 104px; padding: 22px; background: rgba(255,255,255,.78); }
.blueprint-decisions article > span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: var(--blue-soft); color: var(--blue); font-size: 10px; font-weight: 800; }
.blueprint-decisions article:nth-child(2) > span { background: var(--orange-soft); color: var(--orange); }
.blueprint-decisions article:nth-child(3) > span { background: #eaf7f5; color: #117c79; }
.blueprint-decisions b { font-size: 14px; }
.blueprint-decisions p { margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.55; }

@media (max-width: 1240px) {
  .blueprint-head { grid-template-columns: 1fr 330px; gap: 38px; }
  .blueprint-head p { white-space: normal; }
  .journey-strip, .touchpoint-row { grid-template-columns: 176px 1fr; }
  .blueprint-side-label, .touchpoint-row > header { padding-inline: 20px; }
  .touchpoint-track article { padding-inline: 10px; }
  .blueprint-foundation { grid-template-columns: 130px 96px 26px 210px 1fr; }
}

@media (max-width: 820px) {
  .blueprint-head { grid-template-columns: 1fr; gap: 12px; }
  .journey-strip, .touchpoint-row { grid-template-columns: 1fr; }
  .blueprint-side-label, .touchpoint-row > header { border-right: 0; border-bottom: 1px solid var(--line); }
  .journey-strip ol, .touchpoint-track { min-width: 760px; }
  .journey-strip, .touchpoint-map { overflow-x: auto; }
  .blueprint-foundation { grid-template-columns: 1fr; gap: 7px; }
  .blueprint-foundation i { display: none; }
  .blueprint-decisions { grid-template-columns: 1fr; }
}

/* v0.3 surface-first portfolio: complete screens, explicit cross-product logic. */
.hero { min-height: auto; padding-top: clamp(88px, 9vh, 116px); padding-bottom: 78px; }
.hero-intro { display: block; }
.hero-copy { max-width: none; }
.hero h1 { max-width: none; font-size: 64px; }
.hero-lead { max-width: none; margin-top: 22px; }
.hero-meta { max-width: none; margin-top: 30px; }

.text-nowrap { white-space: nowrap; }
#backend .chapter-head .intro, #wecom .chapter-head .intro { max-width: none; }
.family-foot { max-width: 820px; }
.family-showcase .story-description h3 { text-wrap: balance; }

.hero-service-chain { display: grid; grid-template-columns: minmax(460px, 1.7fr) 86px minmax(190px, .66fr) 86px minmax(190px, .66fr); align-items: center; gap: 0; margin-top: 40px; }
.hero-terminal { min-width: 0; overflow: hidden; border: 1px solid rgba(32,48,83,.12); background: #fff; box-shadow: 0 22px 60px rgba(31,50,91,.09); }
.hero-terminal header { display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: 0 16px; border-bottom: 1px solid var(--line); background: #fff; }
.hero-terminal header span { color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.hero-terminal header em { padding: 4px 8px; border-radius: 99px; background: #edf7f1; color: #397b58; font-size: 9px; font-style: normal; font-weight: 800; }
.hero-terminal--wecom header span { color: var(--orange); }
.hero-terminal--family header span { color: #a86b2c; }
.hero-terminal--family header em { background: #fff5e9; color: #a86b2c; }
.hero-terminal-media { display: grid; place-items: center; overflow: hidden; padding: 18px; background: #edf2f8; }
.hero-terminal-media img { display: block; width: 100%; height: auto; object-fit: contain; }
.hero-terminal--backend .hero-terminal-media { height: 420px; min-height: 420px; }
.hero-terminal--backend .hero-terminal-media img { box-shadow: 0 12px 30px rgba(29,47,77,.11); }
.hero-terminal-media--phone { height: 420px; padding: 12px; background: linear-gradient(160deg,#eef4fb,#f8fafc); }
.hero-terminal--family .hero-terminal-media--phone { background: linear-gradient(160deg,#fff7ef,#f8fafc); }
.hero-terminal-media--phone img { width: 183px; height: 396px; object-fit: contain; object-position: center; }
.hero-phone-viewport { position: relative; width: 183px; height: 396px; overflow: hidden; background: #fff; }
.hero-phone-viewport iframe { position: absolute; top: 0; left: 0; width: 390px; height: 844px; border: 0; transform: scale(.4692); transform-origin: top left; pointer-events: none; }
.hero-wecom-preview .figma-wecom-scroll { pointer-events: none; }
.hero-terminal-copy { height: 112px; min-height: 112px; padding: 15px 18px 16px; }
.hero-terminal-copy strong { display: block; font-size: 16px; }
.hero-terminal-copy p { margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.hero-data-link { position: relative; z-index: 2; display: grid; justify-items: center; gap: 5px; padding: 0 7px; text-align: center; }
.hero-data-link i { position: relative; display: block; width: 100%; height: 1px; border-top: 2px solid var(--blue); }
.hero-data-link i::before, .hero-data-link i::after { position: absolute; top: -5px; width: 8px; height: 8px; border-top: 2px solid var(--blue); border-right: 2px solid var(--blue); content: ""; }
.hero-data-link i::before { left: -1px; transform: rotate(-135deg); }
.hero-data-link i::after { right: -1px; transform: rotate(45deg); }
.hero-data-link b { margin-top: 7px; color: var(--ink); font-size: 10px; line-height: 1.4; }
.hero-data-link small { padding: 4px 7px; border-radius: 99px; background: var(--blue-soft); color: var(--blue); font-size: 8px; font-weight: 800; white-space: nowrap; }
.hero-data-link--dashed i { border-top-style: dashed; border-color: #cc8740; }
.hero-data-link--dashed i::before { display: none; }
.hero-data-link--dashed i::after { border-color: #cc8740; }
.hero-data-link--dashed small { background: #fff4e8; color: #a86b2c; }
.hero-data-link--related i::after { display: none; }
.role-boundary { margin-top: 42px; }

.evidence-note { margin-top: 14px; color: var(--muted); font-size: 12px; line-height: 1.6; letter-spacing: .01em; }

.surface-case-intro { display: grid; grid-template-columns: .78fr 1.22fr; gap: 70px; align-items: end; margin-top: 0; padding: 40px 0 28px; }
.surface-case-intro h3 { margin-top: 10px; font-size: clamp(28px,3vw,42px); line-height: 1.18; letter-spacing: -.03em; }
.surface-case-intro > div:last-child > p { color: var(--muted); font-size: 14px; line-height: 1.85; }
.surface-screen-grid { display: grid; gap: 20px; }
.surface-screen-grid--two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.surface-screen-grid .evidence { box-shadow: 0 16px 44px rgba(31,50,91,.07); }
.surface-screen-index { display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: center; min-height: 78px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.surface-screen-index > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: var(--blue-soft); color: var(--blue); font-size: 11px; font-weight: 800; }
.surface-screen-index b, .surface-screen-index small { display: block; }
.surface-screen-index b { font-size: 15px; }
.surface-screen-index small { margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.crm-surface-flow { display: grid; gap: 22px; margin-top: 28px; }
.crm-surface-flow > article { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 26px; align-items: center; padding: 24px; border: 1px solid var(--line); background: #fff; box-shadow: 0 14px 38px rgba(31,50,91,.06); }
.crm-surface-copy > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: var(--blue); color: #fff; font-size: 11px; font-weight: 800; }
.crm-surface-copy small { display: block; margin-top: 22px; color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.crm-surface-copy h4 { margin-top: 7px; font-size: 21px; line-height: 1.3; }
.crm-surface-copy p { margin-top: 12px; color: var(--muted); font-size: 13px; line-height: 1.75; }
.crm-surface-flow .evidence { box-shadow: none; }

.mini-visual-flow { gap: 14px; padding: 24px 18px 68px; }
.mini-visual-card { padding: 8px 8px 14px; cursor: default; transition: none; }
.mini-visual-card:hover, .mini-visual-card:focus-visible { border-color: #dfe7e5; box-shadow: none; transform: none; }
.mini-visual-card:hover .mini-screen-thumb, .mini-visual-card:focus-visible .mini-screen-thumb { border-color: #dfe7e5; box-shadow: none; transform: none; }
.mini-visual-card:not(:nth-of-type(5))::after { top: calc(var(--mini-screen-height, 280px) / 2 + 8px); right: -13px; }
.mini-screen-thumb { height: var(--mini-screen-height, 280px); border-radius: 18px; background: #f4f7f6; transition: none; }
.mini-screen-thumb::after { display: none; }
.mini-screen-thumb iframe, .mini-visual-card:nth-of-type(n) .mini-screen-thumb iframe { top: 0; left: 50%; width: 390px; height: 844px; transform: translateX(-50%) scale(var(--mini-screen-scale, .32)); transform-origin: top center; }
.mini-visual-card > span { margin-top: 14px; font-size: 11px; }
.mini-visual-card > b { margin-top: 4px; font-size: 14px; }
.mini-visual-card > small { margin-top: 4px; font-size: 10px; }

@media (min-width: 1600px) {
  .hero-service-chain { grid-template-columns: minmax(520px,1.75fr) 96px minmax(210px,.65fr) 96px minmax(210px,.65fr); }
  .hero-terminal--backend .hero-terminal-media { min-height: 390px; }
}

@media (min-width: 1241px) and (max-width: 1599px) {
  .hero-service-chain { grid-template-columns: minmax(450px,1.62fr) 66px minmax(204px,.69fr) 66px minmax(204px,.69fr); }
}

@media (min-width: 1241px) {
  #backend .system-coverage { grid-template-columns: .72fr 1.28fr; }
}

@media (max-width: 1240px) {
  .hero-service-chain { grid-template-columns: minmax(410px,1.5fr) 64px minmax(176px,.62fr) 64px minmax(176px,.62fr); }
  .hero-terminal--backend .hero-terminal-media { min-height: 300px; }
  .surface-case-intro { grid-template-columns: 1fr; gap: 20px; }
}

/* The family chapter uses one live prototype; the five-stage map is structural. */
#family .mini-stage-flow { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; margin: 0; padding: 22px 20px; list-style: none; }
#family .mini-stage-flow li { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 116px; padding: 17px 15px; border: 1px solid #dfe7e5; border-radius: 9px; background: #fff; }
#family .mini-stage-flow li:not(:last-child)::after { position: absolute; top: 50%; right: -9px; z-index: 1; color: #75a7a2; font-size: 13px; content: "→"; transform: translateY(-50%); }
#family .mini-stage-flow span { color: #117c79; font-size: 11px; font-weight: 800; }
#family .mini-stage-flow b { margin-top: 10px; color: var(--ink); font-size: 15px; }
#family .mini-stage-flow small { margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.5; }
#family .mini-support-items--three { grid-template-columns: repeat(3,minmax(0,1fr)); }
#family .family-gallery-head { margin-top: 56px; }
#family .family-showcase { min-height: 720px; }
#family .family-module-tabs { align-content: start; padding-top: 54px; }
#family .family-demo-exit { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 34px; padding: 23px 26px; border: 1px solid #e4e9e7; border-radius: 10px; background: #f7faf9; }
#family .family-demo-exit strong { font-size: 16px; }
#family .family-demo-exit p { margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.6; }
#family .family-demo-exit a { display: inline-flex; align-items: center; justify-content: center; gap: 10px; flex: 0 0 auto; min-height: 44px; padding: 10px 18px; border: 1px solid #c98b58; border-radius: 9px; background: #fffaf5; color: #8a4b25; font-size: 13px; font-weight: 700; text-decoration: none; }
#family .family-demo-exit a:hover { background: #fff1e4; }
#family .family-demo-exit a:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

@media (max-width: 1240px) {
  #family .family-module-tabs { grid-template-columns: repeat(3,minmax(0,1fr)); padding-top: 0; }
  #family .family-showcase { min-height: auto; }
}
@media (max-width: 760px) {
  #family .mini-stage-flow { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #family .mini-stage-flow li { min-height: 104px; }
  #family .mini-stage-flow li::after { display: none; }
  #family .mini-stage-flow li:last-child { grid-column: 1 / -1; }
  #family .mini-support-items--three { grid-template-columns: 1fr; }
  #family .family-module-tabs { grid-template-columns: 1fr; }
  #family .family-gallery-head { margin-top: 44px; }
  #family .family-demo-exit { align-items: stretch; flex-direction: column; }
}

/* Keep the three-end overview readable instead of forcing its desktop chain offscreen. */
@media (max-width: 900px) {
  .hero-service-chain { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .hero-terminal { width: 100%; }
  .hero-terminal--backend .hero-terminal-media { height: 210px; min-height: 210px; }
  .hero-terminal-media--phone { height: 266px; }
  .hero-terminal-media--phone .hero-phone-viewport { transform: scale(.62); }
  .hero-terminal-copy { height: auto; min-height: 0; }
  .hero-data-link { justify-items: start; gap: 4px; padding: 4px 16px; text-align: left; }
  .hero-data-link i { display: none; }
  .hero-data-link b { margin: 0; }
  #backend .portal-block { grid-template-columns: minmax(0,1fr); }
  #backend .portal-block > * { min-width: 0; }
  #backend .phase-structure-summary { grid-template-columns: minmax(0,1fr); gap: 10px; }
  .family-showcase, .wecom-showcase { grid-template-columns: minmax(0,1fr); }
  .family-showcase > *, .wecom-showcase > * { min-width: 0; }
}

@media (min-width: 1440px) {
  .hero-terminal header { gap: 8px; padding-inline: 12px; }
  .hero-terminal header em { font-size: 11px; }

  .journey-strip li span { font-size: 11px; line-height: 1.55; }
  .journey-strip li:nth-child(6) span,
  .touchpoint-row--family > header > span { text-wrap: balance; }
  .touchpoint-row > header small,
  .touchpoint-row > header span { font-size: 11px; }
  .touchpoint-track article { min-height: 100px; padding: 14px 12px; }
  .touchpoint-track article small,
  .touchpoint-track article span { font-size: 11px; }
  .touchpoint-track article b { font-size: 13px; }

  .compact-timeline-track { align-items: start; }
  .compact-timeline-track > i { align-self: start; }
  .compact-timeline span { font-size: 13px; line-height: 1.55; }
  .compact-timeline span b { margin-bottom: 4px; font-size: 12px; }
}

/* Make supported prototype actions visible without changing the design screenshots. */
.figma-hotspot{outline:1px dashed rgba(234,112,39,.7);outline-offset:-2px;background:rgba(255,164,81,.04)}
.figma-hotspot:hover{background:rgba(255,164,81,.15);outline-style:solid}
.status-row{flex-wrap:wrap}

/* 项目时间轴：日期与箭头同排，说明统一从第二行开始。 */
.compact-timeline > header { padding-top: 1px; }
.compact-timeline-track { align-items: start; }
.compact-timeline-track > span { min-width: 0; line-height: 1.65; }
.compact-timeline-track > span > b { min-height: 20px; margin-bottom: 8px; line-height: 20px; white-space: nowrap; }
.compact-timeline-track > i { align-self: start; display: block; height: 20px; margin: 0; line-height: 20px; }
@media (max-width: 760px) {
  .compact-timeline-track { grid-template-columns: 1fr; row-gap: 12px; }
  .compact-timeline-track > i { width: 20px; transform: rotate(90deg); }
}

/* 第二阶段以架构背景与设计工作分栏，衔接下方三个案例。 */
#backend .phase-two-brief { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; padding:32px 0 36px; border-top:2px solid var(--blue); }
#backend .phase-two-context h3 { margin:14px 0 16px; font-size:28px; font-weight:600; line-height:1.4; }
#backend .phase-two-context > p:last-child { color:var(--muted); font-size:16px; line-height:1.8; }
#backend .phase-two-focus { list-style:none; margin:0; padding:0; }
#backend .phase-two-focus li { display:grid; grid-template-columns:28px minmax(0,1fr); gap:16px; padding:16px 0; }
#backend .phase-two-focus li:first-child { padding-top:0; }
#backend .phase-two-focus li + li { border-top:1px solid var(--line); }
#backend .phase-two-focus li > span { padding-top:3px; color:var(--blue); font-size:12px; line-height:1.5; }
#backend .phase-two-focus b { font-size:16px; font-weight:600; line-height:1.5; }
#backend .phase-two-focus p { margin-top:6px; color:var(--muted); font-size:14px; line-height:1.7; }
.hero-terminal--family > header { flex-wrap:wrap; gap:6px 12px; padding-block:10px; }
@media (max-width:1000px) { #backend .phase-two-brief { grid-template-columns:1fr; gap:28px; } }

/* 说明使用完整列宽；双栏标题与正文从同一顶部起排。 */
#backend .real-evidence-head > p { max-width:none; width:100%; }
#backend .surface-case-intro,
#family .family-gallery-head { align-items:start; }
#backend .surface-case-intro > div:last-child,
#family .family-gallery-head > p { margin-top:0; min-width:0; }

/* 同类双栏标题区统一顶部对齐，长说明在可用列宽内自然换行。 */
#problem .blueprint-head,
#backend .subchapter-head,
#family .mini-map-head,
#delivery .delivery-process-head,
#delivery .outcome-head { align-items:start; }
#problem .blueprint-head { grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); }
#problem .blueprint-head > p { white-space:normal; min-width:0; margin-top:0; }
#backend .subchapter-head > p,
#family .mini-map-head > p,
#delivery .delivery-process-head > p,
#delivery .outcome-head > p { min-width:0; margin-top:0; }
#family .family-foot { max-width:none; }
@media (max-width:820px) { #problem .blueprint-head { grid-template-columns:1fr; } }

/* CRM任务说明：同一起点的两行，桌面为完整句子预留列宽。 */
#backend .crm-task-head { grid-template-columns:minmax(0,1fr) max-content; gap:40px; align-items:start; }
#backend .crm-task-summary { min-width:0; text-align:left; }
#backend .crm-task-summary p { margin:0; color:var(--muted); font-size:16px; line-height:1.8; white-space:nowrap; }
#backend .crm-task-summary p + p { margin-top:4px; }
@media(max-width:1240px) {
 #backend .crm-task-head { grid-template-columns:1fr; gap:20px; }
 #backend .crm-task-summary p { white-space:normal; }
}

/* Align the service-map description with the Chinese heading, in one desktop line. */
body.portfolio-case--bangyang #problem .blueprint-head { grid-template-columns:minmax(0,1fr) max-content; gap:24px; align-items:end; }
body.portfolio-case--bangyang #problem .blueprint-head > p { margin:0; max-width:none; white-space:nowrap; line-height:1.4; }
@media(max-width:1439px) {
 body.portfolio-case--bangyang #problem .blueprint-head { grid-template-columns:1fr; gap:16px; }
 body.portfolio-case--bangyang #problem .blueprint-head > p { white-space:normal; line-height:1.8; }
}